@charset "Shift_JIS";
/*----------------------------------------

	Systemic CSS

	- systemic
	- main
	- howto
	- feature
	- lineup
	- clearfix

	- active.html
	
	
-----------------------------------------*/

/*----------------------------------------
	systemic
-----------------------------------------*/

.sectionH1 #systemic img {
	vertical-align: bottom;
}
.sectionH1 #systemic .clear {
	clear: both;
}
.sectionH1 #systemic .float_r {
	float: right;
}
.sectionH1 #systemic .float_l {
	float: left;
}


/*----------------------------------------
	nav
-----------------------------------------*/

.sectionH1 .lnav li {
	float:left;
	list-style:none;
}


/*----------------------------------------
	main
-----------------------------------------*/

.sectionH1 #systemic #main {
	margin-bottom: 20px;
}
.sectionH1 #systemic #main h2 {
	float: right;
}
.sectionH1 #systemic #main dl {
	background: url(../images/index_main_bg01.jpg) no-repeat;
	padding: 12px 40px 22px;
}

/* ring */
.sectionH1 #systemic #main #ring_point {
	float:left;
	width:432px;
}
.sectionH1 #systemic #main #ring_point h2 {
	float:none;
}
.sectionH1 #systemic #main dl#ring_set {
	background: url(../images/ring_main_bg01.jpg) no-repeat;
	padding: 12px 40px 22px;
}
.sectionH1 #systemic #main #other {
	background: url(../images/ring_main_bg02.jpg) no-repeat;
	padding: 20px 0 17px;
}
.sectionH1 #systemic #main #other h2 {
	float:none;
}
.sectionH1 #systemic #main #other h2#other_ttit {
	margin-left:40px;
}
.sectionH1 #systemic #main #other #other_top {
	width:720px;
}
.sectionH1 #systemic #main #other #other_top p {
	float:left;
}
.sectionH1 #systemic #main #other #other_btm {
	width:640px;
	margin-left:40px;
}
.sectionH1 #systemic #main #other #other_btm #other_l {
	float:left;
	width:370px;
}
.sectionH1 #systemic #main #other #other_btm #other_r {
	float:right;
	width:250px;
}
.sectionH1 #systemic #main #other #other_btm #other_r #btn {
	text-align:right;
}


/*----------------------------------------
	howto
-----------------------------------------*/

.sectionH1 #systemic #howto {
	background-color: #eeeeee;
	padding-bottom: 20px;
}
.sectionH1 #systemic #howto h2 {
	margin-bottom:  20px;
}
.sectionH1 #systemic #howto p {
	padding: 0 0 20px 30px;
}
.sectionH1 #systemic #howto p.fly {
	position: fixed;
	position: absolute;
	top: -1000px;
	left: -1000px;
}
.sectionH1 #systemic #howto dl {
	margin-left: 30px;
}
.sectionH1 #systemic #howto dt {
	float: left;
}
.sectionH1 #systemic #howto dd {
	margin-bottom: 10px;
}
.sectionH1 #systemic #howto dd.mb0 {
	margin-bottom: 0;
}


/*----------------------------------------
	feature
-----------------------------------------*/

.sectionH1 #systemic #feature {
	background-color: #eeeeee;
	padding: 0 30px 30px;
}
.sectionH1 #systemic #feature h2 {
	margin: 0 -30px 20px;
}
.sectionH1 #systemic #feature div#left {
	width: 347px;
	float: left;
}
.sectionH1 #systemic #feature div#right {
	float: right;
	width: 313px;
}

/* ring */
.sectionH1 #systemic #feature_c {
	background-color: #eeeeee;
	padding: 0 30px 30px;
}
.sectionH1 #systemic #feature_c h2 {
	margin: 0 -30px 20px;
}
.sectionH1 #systemic #feature_c div#left {
	width: 289px;
	float: left;
}
.sectionH1 #systemic #feature_c div#right {
	float: right;
	width: 371px;
}


/*----------------------------------------
	size
-----------------------------------------*/

.sectionH1 #systemic #size {
	background: url(../images/index_size_bg.jpg) no-repeat center top;
	background-color: #eeeeee;
	padding: 20px 50px 43px;
}
.sectionH1 #systemic #size dl {
	width: 168px;
	float: left;
}
.sectionH1 #systemic #size dd {
	margin-top: 10px;
}
.sectionH1 #systemic #size ul {
	width: 438px;
	float: right;
}
.sectionH1 #systemic #size ul li {
	list-style: none;
	float: left;
}
.sectionH1 #systemic #size ul li.a5 {
	margin-top: 12px;
}
.sectionH1 #systemic #size ul li.a6 {
	margin-top: 60px;
}


/*----------------------------------------
	lineup
-----------------------------------------*/

.sectionH1 #systemic #lineup {
	background-color: #eeeeee;
	padding: 0 30px 20px;
}
.sectionH1 #systemic #lineup h2 {
	margin: 0 -30px 20px;
}
.sectionH1 #systemic #lineup h3 {
	margin-bottom: 10px;
}
.sectionH1 #systemic #lineup ul#kind li {
	list-style: none;
	float: left;
	padding-bottom: 10px;
}
.sectionH1 #systemic #lineup p {
	clear: both;
	margin-bottom: 3px;
}
.sectionH1 #systemic #lineup table.num {
	border-collapse: collapse;
	width: 660px;
	margin-bottom: 20px;
}
.sectionH1 #systemic #lineup table.num td.line {
	background:url(../images/index_line01.gif) center top repeat-y;
	width:40px;
}
.sectionH1 #systemic #lineup table.num td.red {
	color:#e04537;
	text-align:left;
}
.sectionH1 #systemic #lineup table.num td {
	text-align:right;
}
.sectionH1 #systemic #lineup table.detail {
	border-collapse: collapse;
	width: 660px;
	margin-bottom: 5px;
	text-align: center;
	font-size: 80%;
}
.sectionH1 #systemic #lineup table.detail th {
	border: #999999 1px solid;
	background-color: #ececec;
	padding: 3px 1px;
	vertical-align: middle;
}
.sectionH1 #systemic #lineup table.detail td {
	border: #999999 1px solid;
	background-color: #ffffff;
	padding: 3px 1px;
	vertical-align: middle;
}
.sectionH1 #systemic #lineup ul#chart {
	padding: 0 10px 7px 0;
}
.sectionH1 #systemic #lineup ul#chart li {
	list-style: none;
	font-size: 64%;
	color: #555555;
}
.sectionH1 #systemic #lineup .mb0 {
	margin-bottom: 0;
}

/* ring */
.sectionH1 #systemic #lineup #lineup_p {
	width:500px;
	margin:0 0 10px 75px;
}
.sectionH1 #systemic #lineup #lineup_p #b5 {
	float:left;
	width:253px;
	position:relative;
}
.sectionH1 #systemic #lineup #lineup_p #b5 p.num {
	text-align:center;
	width:253px;
	position:absolute;
	top:300px;
	left:0px;
}
.sectionH1 #systemic #lineup #lineup_p #a5 {
	float:right;
	width:211px;
	margin-top:39px;
	position:relative;
}
.sectionH1 #systemic #lineup #lineup_p #a5 p.num {
	text-align:center;
	width:211px;
	position:absolute;
	top:261px;
	left:0px;
}


/*----------------------------------------
	sale
-----------------------------------------*/

.sectionH1 #systemic p#sale01 {
	font-weight: bold;
	color: #d21606;
	padding-bottom: 3px;
}
.sectionH1 #systemic p#sale02 {
	font-weight: bold;
	color: #d21606;
	padding: 0 0 3px 10px;
	background-color: #eeeeee;
}
.sectionH1 #systemic #showcase01 {
	padding-top: 20px;
}

.sectionH1 #active #showcase01 {
	padding-top: 20px;
}

.sectionH1 #showcase01 ul {
	display:block;
	width:720px;
	overflow:hidden;
}
.sectionH1 #showcase01 li {
	float:left;
	margin:0 0 10px 0;
	list-style:none;
}

.sectionH1 #showcase01 li.none {
	margin-right: 0;
}

.sectionH1 #systemic #showcase01 .ns li , .sectionH1 #active #showcase01 .ns li {
	float:none;
	margin-bottom:0;
	padding-bottom:10px;
}


/*----------------------------------------
	color
-----------------------------------------*/

.sectionH1 #systemic .black {
	color: #333333;
}
.sectionH1 #systemic .red {
	color: #cc3333;
}
.sectionH1 #systemic .beige {
	color: #95602c;
}
.sectionH1 #systemic .blue {
	color: #003366;
}


/*----------------------------------------
	clearfix
-----------------------------------------*/

.sectionH1 .clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	height: 0px;
	font-size: 0.1px;
	line-height: 0.1px;
}

.sectionH1 .clearfix {
	display: inline-block;
	position: relative; /* DW */
}

/* Hides from IE-mac \*/
.sectionH1 .clearfix  {
	display: block; 
}
/* End hide from IE-mac */


/*----------------------------------------
	active.html
-----------------------------------------*/
.sectionH1 #active #new {
	margin: 10px 0 5px;
	text-align: right;
}

.sectionH1 #active #explane {
	width: 650px; /* 720 */
	/**width: 720px;*/ /* 互換モード用 */
	margin-bottom: 30px;
	padding: 35px 40px 0 30px;
	background: url(../images/act_point_bg.jpg) no-repeat;
}

.sectionH1 #active #explane .num {
	float: left;
	width: 80px;
}

.sectionH1 #active #explane .txt {
	float: left;
	width: 335px;
}

.sectionH1 #active #explane .txt h2 {
	margin: 5px 0 15px;
}

.sectionH1 #active #explane .pic {
	float: right;
}

.sectionH1 #active #explane #point1 {
	margin-bottom: 15px;
	padding-bottom: 15px;
	background: url(../images/act_point_dotline.gif) no-repeat bottom right;
}

.sectionH1 #active #explane #point2 {
	margin-bottom: 15px;
}

.sectionH1 #active #explane #set {
	margin-left: 10px;
	padding-bottom: 17px;
}

.sectionH1 #active #explane #set li {
	float: left;
}

.sectionH1 #active #howto {
	width: 682px; /* 720 */
	/**width: 720px;*/ /* 互換モード用 */
	padding: 20px 30px 10px 8px;
	background: #eeeeee;
}

.sectionH1 #active #howto h3 {
	margin-bottom: 20px;
	padding-left: 22px;
}

.sectionH1 #active #howto h4 {
	float: left;
}

.sectionH1 #active #howto dl {
	float: right;
	width: 460px;
}

.sectionH1 #active #howto dt,
.sectionH1 #active #howto dd {
	padding-bottom: 14px;
	float: left;
}

.sectionH1 #active #howto dt {
	background: url(../images/act_howto_arrow.gif) no-repeat 70px bottom;
}

.sectionH1 #active #howto dt.none {
	background: none;
}

.sectionH1 #active #feat {
	width: 660px; /* 720 */
	/**width: 720px;*/ /* 互換モード用 */
	padding: 20px 30px 20px;
	background: #eeeeee;
}

.sectionH1 #active #feat h3 {
	margin-bottom: 20px;
}

.sectionH1 #active #feat .detail {
	float: left;
}

.sectionH1 #active #feat .thumb {
	float: right;
	padding-top: 48px;
}

.sectionH1 #active #lineup {
	width: 660px; /* 720 */
	/**width: 720px;*/ /* 互換モード用 */
	padding: 35px 30px 45px;
	background: #eeeeee;
}

.sectionH1 #active #lineup #products {
	padding: 0 0 10px 133px;
}

.sectionH1 #active #lineup #products li {
	float: left;
	padding-right: 45px;
}

.sectionH1 .black {
	color: #000000;
}

.sectionH1 .khaki {
	color: #5f620b;
}

.sectionH1 #active #lineup table {
	width: 100%;
	text-align: center;
	border-collapse: collapse;
	margin-bottom: 5px;
	font-size: 80%;
}

.sectionH1 #active #lineup table.detail th {
	border: #999999 1px solid;
	background: #ececec;
	padding: 3px 1px;
	text-align: center;
	vertical-align: middle;
}

.sectionH1 #active #lineup table.detail td {
	border: #999999 1px solid;
	background: #ffffff;
	padding: 3px 1px;
	vertical-align: middle;
}

.sectionH1 #active #lineup #chart li {
	font-size: 64%;
	color: #555555;
}
.sectionH1 #active #info {
	margin: 5px 0;
	font-size: 64%;
	color: #555555;
}