@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;
}

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

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

/* scrolltopcontrol アイコン */
#topcontrol:hover{
}
#topcontrol{
	z-index:100000;
}


/* -----------------------------------------
                   Header 
   ----------------------------------------- */

header{
	width:100%;
	margin:0 auto;
	position:relative;
}

header.morning{background:url(../../images/main_morning.jpg) center center no-repeat;background-size:cover;}
header.noon{background:url(../../images/main_noon.jpg) center center no-repeat;background-size:cover;}
header.evening{background:url(../../images/main_evening.jpg) center center no-repeat;background-size:cover;}
header.night{background:url(../../images/main_night.jpg) center center no-repeat;background-size:cover;}


header h1{
	width:92%;
	max-width:1200px;
	margin:0 auto;
	text-align:left;
}

header h1 p{
	width:43%;
	z-index:10;
	padding:21% 0 21% 0;
	display:inline-block;
}

header .mbimg{display:none;}




.fade{
	position:relative;
}



#wrapper{
	width:100%;
	margin:0 auto;
}






.read{
	width:100%;
	background:url(../../images/read_bk.jpg) center center no-repeat;
	background-size:cover;
}
.readIn{
	width:92%;
	max-width:1200px;
	margin:0 auto;
	text-align:left;
	padding:100px 0;
	color:#FFF;
}
.readIn h2{
	text-align:center;
	width:350px;
	margin:0 auto;
}
.readIn p{
	font-size:1.3em;
	line-height:2.2;
	text-align:center;
	margin-top:2em;
}








.detail{
	border-bottom:1px solid #CCC;
	border-top:1px solid #CCC;
}
.detail ul{
	width:100%;
}
.detail li{
	width:50%;
	box-sizing: border-box;
}

.detail li.blood,
.detail li.uvcut{
	float:left;
	border-right:1px solid #CCC;
}

.detail li.design3d,
.detail li.smartseam{
	float:right;
}
.detail li.blood,
.detail li.design3d{
	border-bottom:1px solid #CCC;
}

.detail .detailIn{
	padding:30px 0;
	width:92%;
	max-width:600px;
	text-align:left;
	box-sizing: border-box;
}
.detail .detailIn .text{
	width:100%;
	margin-right:-210px;
	float:left;
}
.detail .detailIn .text div{
	margin-right:210px;
}
.detail .detailIn .detail_img{
	width:180px;
	float:right;
}
.detail .detailIn h3{
	font-size:1.6em;
	margin-bottom:0.5em;
}
.detail .detailIn p{
	font-size:1.1em;
}
.detail li.blood .detailIn,
.detail li.uvcut .detailIn{
	float:right;
	padding-right:5%;
	
}

.detail li.design3d .detailIn,
.detail li.smartseam .detailIn{
	float:left;
	padding-left:7%;
}






.illust{
	width:95%;
	max-width:1200px;
	margin:0 auto;
	padding:40px 0 50px 0;
}

.illust h3{
	font-size:1.6em;
	margin-bottom:0.5em;
}
.illust h4{
	font-size:1.1em;
}

.illust ul{
	font-size:0;
	width:100%;
	text-align:left;
	margin-top:30px;
}

.illust ul li{
	font-size:12px;
	display:inline-block;
	text-align:center;
}
.illust ul li p{
	font-family: 'Roboto', sans-serif;
	font-weight:400;
	font-size:1.4em;
	margin-top:0.5em;
}
.illust ul li.ill01{
	width:12%;
}
.illust ul li.ill02{
	width:17.333%;
}






.imagebox{
	width:100%;
	font-size:0;
}
.imagebox p{
	width:100%;
}












.item{
	width:92%;
	max-width:1200px;
	margin:30px auto 60px;
}

.item .tights,
.item .gaiters,
.item .package{
	float:left;
	text-align:left;
}

.item .tights{
	width:37%;
	margin-right:10%;
}
.item .gaiters{
	width:30%;
}
.item .package{
	width:22%;
	display:table;
}
.item .package p{
	vertical-align:bottom;
	display:table-cell;
}
.item .tights .left{
	width:47%;
	float:left;
}
.item .tights .right{
	width:47%;
	float:right;
}

.item .gaiters .left{
	width:58%;
}


.item h2{
	font-family: 'Roboto', sans-serif;
	font-weight:400;
	font-size:1.9em;
	width:100%;
	line-height:1.2;
	height:2.6em;
	vertical-align:bottom;
	position:relative;
	display:table;
}
.item h2 span{
	vertical-align:bottom;
	display:table-cell;
	position:relative;
}
.item h3{
	font-size:0.9em;
	width:100%;
	margin-top:0.2em;
}


.item .spec{
	width:130px;
	text-align:left;
	margin:0 auto;
	margin-top:10px;
}
.item .spec h4 a{
	color:#191919;
}
.item .spec hr{
	height:0px;
	border:none;
	border-top:2px solid #000;
	margin:5px 0 5px 0;
	width: 18px;
	text-align:left;
}
.item .spec .sex{
	height:25px;
	font-family: 'Roboto', sans-serif;
	font-weight:300;
	font-size:1.5em;
	line-height:1;
}
.medical{
	width:100%;
	margin-bottom:0.8em;
}
.medical p{
	border:1px solid #333;
	display:inline-block;
	padding:0.1em 0.2em;
	line-height:1;
	font-size:0.8em;
}
.buy{
	width:100%;
}
.buy a{
	width:100%;
	display:block;
	background:#000;
	text-align:center;
	margin-top:5px;
	color:#FFF;	
	line-height:1;
	padding:7px 0 8px 0;
}
.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;}



.mb02{ display:block;}










/* ----------- youtube --------- */

.film{
	position:relative;
	width:100%;
	background:#000;
}
.film .filmIn{
	position:relative;
	width:80%;
	margin:0 auto;
}

.film .movie{
	position:relative;
	width:100%;
	padding-top:56.25%;
}
.film .movie iframe{
	position:absolute;
	top:0;
	right:0;
	width:100% !important;
	height:100% !important;
}

.film .start,
.film .start02{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:url(../../images/mov_bk.png) center center repeat;
	cursor:pointer;
}

.film .start_mb,
.film .start_mb02{
	top:0;
	position:absolute;
	left:0;
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.8);
	cursor:pointer;
}

.film .playinner{
	position:absolute;
	left:0;
	right:0;
	margin:0 auto;
	top:50%;
	margin-top:-200px;
}
.film .playinner h2{
	width:650px;
	margin:0 auto;
}

.film .playbt{
	width:100px;
	margin:0 auto;
	margin-top:30px;
}



.film .start .playbt,
.film .start02 .playbt{
	-webkit-transition: opacity 0.25s;
	-moz-transition: opacity 0.25s;
	-ms-transition: opacity 0.25s;
	transition: opacity 0.25s;
}
/*
.film .start:hover .playbt,
.film .start02:hover .playbt{
	filter:alpha(opacity=60); 
	-moz-opacity:0.60;
	-khtml-opacity:0.6;
	opacity:0.60;
}
*/




/* ================ gallery ================= */

.gallery{
	width:99%;
	margin:0 auto;
	overflow:hidden;
	margin-top:0.5%;
	position:relative;
	z-index:1;
}
.gallery ul.galleryList{
	width:100.5%;
}
.gallery ul.galleryList li{
	width:24.5%;
	margin-right:0.5%;
	margin-bottom:0.5%;
	float:left;
	position:relative;
}

.gallery ul.galleryList li a{
	display:block;
	background:rgba(0,0,0,0);
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	z-index:10000;
}


/*View Mobile*/
.gallery.viewMb{
	width:100%;
	padding:5px 0 15px 0;
	position:relative;
	overflow:visible;
}
.gallery.viewMb ul.galleryList{
	width:100%;
	position:relative;
}
.gallery.viewMb ul.galleryList li{
	width:100%;
	margin:0 0%;
	position:relative;
	float:none;
	display:inline-block;
}
.gallery.viewMb ul.galleryList li a{
	display:none;
}


@media only screen and (max-width: 1200px) {
.gallery ul.galleryList li{width:32.833333%;}
}






@media only screen and (max-width: 920px) {


.detail .detailIn{
	padding:35px 0 40px 0;
}
.detail .detailIn h3{text-align:center;}
.detail .detailIn .text{
	width:100%;
	margin-right:0;
	float:none;
}
.detail .detailIn .text div{margin-right:0;}
.detail .detailIn .detail_img{
	width:180px;
	margin:0 auto;
	margin-top:25px;
	float:none;
}



.item .tights{
	width:48%;
	margin-right:11%;
}
.item .gaiters{
	width:38%;
}
.item .gaiters .left{
	width:59.3%;
}

.item .package{
	width:100%;
	display:block;
	margin-top:50px;
}
.item .package p{
	width:200px;
	display:block;
	margin:0 auto;
}

.item h2{
	font-size:1.7em;
	text-align:center;
}
.item h3{
	text-align:center;
}

.item .gaiters .left{
	margin:0 auto;
}


}









@media only screen and (max-width: 768px) {
header h1 p{
	width:52%;
	z-index:10;
	padding:22% 0 22% 0;
	display:inline-block;
}



.readIn h2{width:50%;}
.readIn p{
	font-size:1.2em;
	line-height:2.0;
	text-align:left;
	width:90%;
	margin:0 auto;
	margin-top:2em;
}
.readIn p .pcbr{display:none;}
.readIn{padding:10% 0;}





.illust{
	width:90%;
	padding:7% 0 10% 0;
}
.illust ul li.ill01{
	width:20%;
	padding:0 2.5%;
}
.illust ul li.ill02{
	width:27%;
	padding:0 3%;
	margin-top:2%;
}

.illust h4{
	text-align:left;
}

.illust h4 br{
	display:none;
}








.imagebox p{width:100%;display:block;}

.item{
}

.item .tights{
	width:90%;
	margin:0 auto;
	float:none;
}
.item .tights .left{
	width:45%;
}
.item .tights .right{
	width:45%;
}
.item .gaiters{
	width:100%;
	margin-top:7%;
	padding-top:2%;
	border-top:1px solid #CCC;
}
.item .gaiters .left{
	width:38%;
}
.item h2{
	font-size:1.9em;
}
.item .package{
	border-top:1px solid #CCC;
	margin-top:7%;
}
.item .package p{
	width:40%;
}
.medical{
	text-align:center;
}
.medical p{
	margin:0 auto;
}





.film .filmIn{
	width:100%;
}

.film .playinner{margin-top:-150px;}
.film .playinner h2{width:70%;}
.film .playbt{width:80px;margin-top:20px;}


.gallery ul.galleryList li{width:49.5%;}


}




@media only screen and (max-width: 575px) {


.wide{display:none;}


header h1 p{
	width:63%;
	padding:36% 0 36% 0;
}
header.morning{background:url(../../images/main_morning_mb.jpg) center center no-repeat;background-size:cover;}
header.noon{background:url(../../images/main_noon_mb.jpg) center center no-repeat;background-size:cover;}
header.evening{background:url(../../images/main_evening_mb.jpg) center center no-repeat;background-size:cover;}
header.night{background:url(../../images/main_night_mb.jpg) center center no-repeat;background-size:cover;}



.readIn h2{width:70%;}
.readIn p{
	font-size:1.1em;
	line-height:1.8;
	width:95%;
	margin-top:5%;
}





.detail li{
	width:100%;
	box-sizing: border-box;
}

detail li.blood,
.detail li.uvcut{
	float:none;
	border-right:none;
	border-bottom:1px solid #CCC;
}
.detail li.design3d,
.detail li.smartseam{
	float:none;
}
.detail .detailIn .detail_img{
	width:60%;
}

.item{
	margin-top:4%;
}
.item .spec{
	width:80%;
}
.item .package{
	border-top:1px solid #CCC;
	margin-top:7%;
	padding-top:2%;
}


.illust{
	padding:10% 0;
}
.illust ul li p{
	font-size:1.2em;
}
.illust h4{
	width:95%;
	margin:0 auto;
}



.mb02{ display:none;}






.film{ border-top:30px solid #000;border-bottom:30px solid #000; background:#000;}
.film .playinner{margin-top:-21%;}
.film .playinner h2{width:80%;}
.film .playbt{width:12%;margin-top:1%;}

}




@media only screen and (max-width: 360px) {
.item h2{font-size:1.7em;}

.readIn h2{width:75%;}
}











.over a:hover img {
	filter:alpha(opacity=60); 
	-moz-opacity:0.60;
	-khtml-opacity: 0.6;
	opacity:0.60
}








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

ul:after,
li:after,
.item:after,
.detailIn:after{
	  content: "";
	  display: table;
	  float:none;
	  clear: both;
}