@charset "UTF-8";
/* CSS Document */

body{
	width:100%;
	height:100%;
	min-height:100%;
	margin:0px;
	padding:0px;
	text-align:center;
	color:#191919;
	font-size:12px;
	line-height:1.5;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	background:#FFF;
	-webkit-font-smoothing:subpixel-antialiased;
}

.wide{ display:block;}

.ie8 body{
	min-width:1000px;
}

.fl{float:left;}
.fr{float:right;}

/* scrolltopcontrol アイコン */
#topcontrol:hover{
}


.fade{
	position:relative;
}

header{
	width:100%;
	max-width:1100px;
	position:relative;
	padding:0;
	height:500px;
	margin:0 auto;
	margin-top:30px;
	overflow:hidden;
}

.mainimg{
	margin:0 auto;
	position:absolute;
	top:0;
	right:22%;
	margin-right:-200px;
	width:500px;
}

h1{
	width:260px;
	position:absolute;
	top:50%;
	left:7%;
	margin-top:-70px;
}
h2.sptitle{
	width:100%;
	display:none;
}



.maincopy{
	background:#F8F8F8;
	padding:70px 5%;
	text-align:center;
	color:#4C4C4C;
	box-sizing:border-box;
}
.maincopy h2{
	font-size:2.5em;
	line-height:1.7;
	margin-bottom:0.8em;
	font-weight:bold;
	
}
.maincopy ul{
	width:auto;
	display:inline-block;
	text-align:left;
	padding-left:0.8em;
}
.maincopy li{
	list-style:square;
	list-style-position:outside;
	font-size:1.3em;
	padding:0.3em 0;
}





.itemAll{
	width:100%;
}

.itemBox{
	width:100%;
	margin-top:60px;
	padding-bottom:60px;
	border-bottom:1px solid #CCC;
}
.infoBox{
	width:95%;
	max-width:1000px;
	margin:0 auto;
	text-align:left;
	padding:0;
	box-sizing:border-box;
}
.info{
	width:48%;
	float:left;
}
.second .info{
	width:40%;
}
.infoBox h2{
	font-size:2.8em;
	font-weight:bold;
	padding-bottom:1.6em;
	color:#666;
}
.mainitem h3{
	font-family: 'Roboto', sans-serif;
	font-weight:300;
	font-size:1.9em;
	width:100%;
	line-height:1.2;
	position:relative;
	margin-top:0.8em;
}
.info .infoimg{
	width:90%;
	max-width:350px;
}
.mainitem{
	width:41%;
	float:right;
}
.second .mainitem{
	width:56%;
}
.itemlist{
	width:95%;
	max-width:1000px;
	margin:0 auto;
	overflow:hidden;
	margin-top:80px;
}
.itemlist ul{
	width:102%;
	margin:0 auto;
}
.itemlist ul li{
	float:left;
	margin:0;
	padding:0;
}
.itemlist ul.item3 li{
	width:31.333333%;
	margin-right:2%;
}
.itemlist ul.item2{
	width:88%;
	margin:0 auto;
}
.itemlist ul.item2 li{
	width:50%;
	margin-right:0%;
	padding:0 8%;
	box-sizing: border-box;
}
.itemlist h3{
	font-family: 'Roboto', sans-serif;
	font-weight:300;
	font-size:1.4em;
	width:100%;
	line-height:1.2;
	position:relative;
	margin-top:0.8em;
}
.itemlist .listimg{
	width:85%;
	margin:0 auto;
}

.mainitemIn{
}
.mainitemIn h3{
	margin-top:0em;
}
.mainitemIn .mainitem02{
	float:left;
	width:40%;
}
.mainitemIn .mainitemRight{
	float:right;
	width:50%;
}









.spec{
	width:210px;
	text-align:left;
	margin-top:15px;
}

.itemlist .spec{
	margin:15px auto 0;
}
.spec hr{
	height:0px;
	border:none;
	border-top:2px solid #000;
	margin:5px 0 5px 0;
	width: 18px;
	text-align:left;
}
.spec .sex{
	height:25px;
	font-family: 'Roboto', sans-serif;
	font-weight:300;
	font-size:1.5em;
	line-height:1;
}


.spec .buy{
	margin:0 auto;
	width:100%;
}
.spec .buy a{
	width:100%;
	display:block;
	background:#000;
	font-weight:300;
	font-size:1.1em;
	letter-spacing:0.1em;
	text-align:center;
	line-height:1;
	padding:8px 0 7px 0;
	color:#FFF;
	margin-top:5px;
}


.spec .point{
}
.spec .point span{
	color:#F00;
	padding-right:0.3em;
}
.spec .alias{
	font-size:0.85em;
	padding:0.3em 0;
	height:4.3em;
}









.sex{
	width:100%;
	text-align:left;
	margin:0 auto;
}
.sex hr{
	height:0px;
	border:none;
	border-top:2px solid #000;
	margin:0 0 5px 0;
	width:18px;
	text-align:left;
}

.sex h4{
	height:30px;
	font-family: 'Roboto', sans-serif;
	font-weight:300;
	font-size:1.5em;
	line-height:1;
}


.color{
	width:90%;
	max-width:180px;
	margin-bottom:15px;
}
.belt{
	font-size:1.3em;
	color:#666;
	list-style:square;
	padding-left:1.3em;
	text-align:left;
}
.belt li{
	list-style:square;
	list-style-position:outside;
	padding-bottom:0.4em;
}
.medical{
	border:1px solid #666;
	padding:0.3em;
	display:inline-block;
	line-height:1;
	margin-bottom:0.5em;
}





.method{
	width:95%;
	max-width:1000px;
	margin:0 auto;
	padding:50px 0 0;
}
.method .title{
	width:300px;
}
.method h2{
	font-size:2.8em;
	font-weight:bold;
	padding-bottom:1em;
	color:#666;
	text-align:left;
	line-height:1.5;
}
.method h2 br{
	display:none;
}

.method .methodIn{
	margin-top:30px;
}
.method .leftBox{
	width:52%;
	float:left;
}
.method .leftBox p{
	width:70%;
	margin:0;
}
.method .rightBox{
	width:48%;
	float:right;
	background:url(../images/dot.png) 0 0 repeat-x;

}
.method .rightBox .box{
	width:100%;
	background:url(../images/dot.png) 0 bottom repeat-x;
	padding:20px 0;
	text-align:left;
}

.method .box h3{
	font-size:1.8em;
	font-weight:bold;
	color:#4C4C4C;
	padding-bottom:0.2em;
	position:relative;
}
.method .box h3 span img{
	width:30px;
	vertical-align:sub;
	position:relative;
	margin-right:5px;
}
.method .box h4{
	font-size:1.2em;
}
.method .methodItem{
	width:100%;
	margin-top:5px;
}
.method .methodItem .itemleft{
	float:left;
	width:50%;
}
.method .methodItem .itemright{
	float:right;
	width:50%;
}


.method .methodItem img{
	width:80%;
	max-width:120px;
	
	
}



.method .methodItem .alias{
	font-size:0.8em;
	padding:0.5em 0;
}

.method .buy{
	margin:0;
	width:100%;
	max-width:100px;
}
.method .buy a{
	width:100%;
	display:block;
	background:#000;
	font-weight:300;
	font-size:1.0em;
	letter-spacing:0.1em;
	text-align:center;
	line-height:1;
	padding:7px 0 7px 0;
	color:#FFF;
	margin-top:5px;
}




.buy a{
	transition: background-color 0.15s linear;
	-webkit-transition: background-color 0.15s linear;
}
.men a:hover{ background-color: #555;}
.women a:hover{ background-color: #F27076;}
.unisex a:hover{ background-color:#B3B3B3;}


.note{
	width:95%;
	max-width:1050px;
	margin:40px auto 10px;
	text-align:left;
}


@media only screen and (max-width: 768px) {
.maincopy{padding:7% 5%;}
.maincopy h2{
	text-align:left;
	font-size:2.3em;
	margin-bottom:0.6em;
}
.maincopy h2 br{display:none;}


.itemBox{margin-top:6%;padding-bottom:6%;}

.infoBox{width:90%;}

.info{width:46%;}
.second .info{width:35%;}
.info .infoimg{width:90%;}
.info h2 br{display:none;}


.infoBox h2{font-size:2.6em;}
.mainitem h3{font-size:1.7em;}


.mainitem{width:45%;}
.second .mainitem{width:55%;}
.itemlist{margin-top:8%;}

.itemlist ul.item2{width:86%;margin:0 auto;}
.itemlist ul.item2 li{width:50%;margin-right:0%;padding:0 5%;}

.mainitemIn .mainitem02{width:38%;}
.mainitemIn .mainitemRight{width:50%;}

.spec{width:100%;max-width:210px;}
.belt{
	font-size:1.2em;
}

.method{width:90%;padding:5% 0 0;}
.method h2{font-size:2.5em;}
.method h2 br{display:block;}
.method .leftBox{width:45%;}
.method .leftBox p{width:95%;}
.method .rightBox{width:53%;}

.method .methodItem .itemleft{width:48%;}
.method .methodItem .itemright{width:48%;}
}



@media only screen and (max-width: 700px) {
	
header{
	height:auto;
}

.mainimg{display:none;}
h1{display:none;}
h2.sptitle{display:block;}


.maincopy h2{font-size:2.0em;line-height:1.5;}
.maincopy li{font-size:1.2em;}

.infoBox{
	text-align:center;
}

.info{width:90%; margin:0 auto;float:none;}
.info h2{padding-bottom:1em;}
.infoBox h2{text-align:center;padding-bottom:0.8em;}
.info .infoimg{margin:0 auto;}
.second .info{width:100%;}
.second .infoimg{width:50%; margin:0 auto;}



.mainitem{
	width:85%;
	float:none;
	max-width:400px;
	margin:0 auto;
	margin-top:10%;
}
.second .mainitem{
	width:100%;
}

.mainitem h3{
	text-align:center;
}
.mainitem h4{
	text-align:center;
}

.mainitemIn h3{
	margin-top:0.8em;
}
.mainitemIn .mainitem02{
	float:none;
	width:40%;
	margin:0 auto;
}
.mainitemIn .mainitemRight{
	float:none;
	width:100%;
}
.spec{
	margin:15px auto 0;
}




.itemlist{
	width:91%;
	background:url(../images/dot.png) 0 0 repeat-x;
	padding-top:7%;
}

.itemlist ul{
	width:105%;
	margin:0 auto;
	font-size:0;
	text-align:left;
}
.itemlist ul li{
	font-size:12px;
	float:none;
	vertical-align:top;
	display:inline-block;
}

.itemlist ul li.last{
	margin-top:7%;
}
.itemlist ul.item3 li{
	width:45%;
	margin-right:5%;
}

.itemlist ul.item2{
	width:105%;
}
.itemlist ul.item2 li{
	width:45%;
	padding:0%;
	margin-right:5%;
}
.itemlist h3{
	text-align:center;
}
.itemlist h4{
	font-size:0.9em;
	text-align:center;
}

.color{
	width:90%;
	margin:15px auto;
}
.medical{
	font-size:0.9em;
}



.method .title{
	width:50%;
	margin:0 auto;
}
.method .leftBox{
	width:100%;
	float:none;
}
.method h2{
	text-align:center;
	font-size:2.7em;
}
.method h2 br{
	display:none;
}
.method .leftBox p{
	width:50%;
	margin:0 auto;
}
.method .rightBox{
	width:100%;
	margin:0 auto;
	margin-top:5%;
	float:none;
}


.note{
	width:90%;
	text-align:center;
	margin-top:3%;
	font-size:0.9em;
}




}


@media only screen and (max-width: 640px) {
.infoBox h2{font-size:2.2em;}
.belt{font-size:1.1em;}
.info h2 br{display:block;}

}


@media only screen and (max-width: 450px) {
	
.maincopy h2{font-size:1.8em;}
.maincopy li{font-size:1.1em;}



.infoBox h2{font-size:1.9em;}

.itemlist{
	width:80%;
	background:none;
	padding-top:0%;
}

.itemlist ul{
	width:100%;
}
.itemlist ul li{
	display:block;
	padding:7% 0;
	background:url(../images/dot.png) 0 0 repeat-x;
}
.itemlist ul.item3 li{
	width:100%;
	margin-right:0 auto;
}

.itemlist ul.item2{
	width:100%;
}
.itemlist ul.item2 li{
	width:100%;
	margin-right:0%;
	padding:7% 0;
}

.itemlist .listimg{
	width:70%;
}

.beltimg{
	width:90%;
	margin:0 auto;
}

.spec .alias{
	height:auto;
}


.method .title{width:70%;}
.method h2{font-size:1.9em;}
.method .box h3{text-align:center;}
.method .box h4{text-align:center;}
.method .methodItem .itemleft{
	float:none;
	width:100%;
	text-align:center;
}
.method .methodItem .itemright{
	float:none;
	width:100%;
	text-align:center;
	margin-top:6%;
}
.method .buy{margin:0 auto;}
.method .methodItem .alias{
	height:auto;
}




}

@media only screen and (max-width: 360px) {
.itemlist .listimg{
	width:70%;
}


}






/* -----------------------------------------
                   Clearfix 
   ----------------------------------------- */

ul:after,
.infoBox:after,
.mainitemIn:after,
.methodIn:after,
.methodItem:after,
section:after{
	  content: "";
	  display: table;
	  float:none;
	  clear: both;
}