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




body{color:#333;}
a{color:#333;}
a:hover{color:#999;}

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


hr.w100{
	height:0px;
	border:none;
	border-top:1px solid #666;
	width:100%;
}
/*
.box{
	filter:alpha(opacity=0);
    -moz-opacity: 0;
    opacity:0;
}
*/

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

header{
	width:100%;
	margin:0 auto;
	position:relative;
	background:url(../../images/mainimg_pc.jpg) center center no-repeat;
	background-size:cover;
}
header .inner{
	width:90%;
	margin:0 auto;
	text-align:right;
	position:relative;
}
header .titleBox{
	width:45%;
	max-width:430px;
	z-index:10;
	padding:27% 0 22% 0;
	display:inline-block;
}
header .banner{
	width:70%;
	max-width:280px;
	margin-top:5%;
}
header .tanaka{
	width:30%;
	max-width:300px;
	position:absolute;
	left:15px;
	bottom:15px;
}









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






/* ---------- Read --------- */

.read{
	width:100%;
	background:url(../../images/read_bk.jpg) center center no-repeat;
	background-size:cover;
}
.readIn{
	width:90%;
	max-width:1100px;
	margin:0 auto;
	text-align:left;
	padding:80px 0;
	color:#FFF;
	position:relative;
	text-align:center;
}
.read h2{
	font-size:3.2em;
	font-weight:bold;
	text-align:center;
	padding-bottom:0.6em;
}
.read h2 br{
	display:none;
}
.read h3{
	font-size:1.7em;
	line-height:1.9;
	text-align:center;
}
.read .point{
	border-top:1px solid #999;
	width:auto;
	display:inline-block;
	text-align:left;
	font-size:1.3em;
	margin-top:2.0em;
	padding-top:1.5em;
}
.read .point p{
	padding-left:1em;
	text-indent:-1em;
	box-sizing:border-box;
	line-height:1.5;
	margin:0.8em 0;
}






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



.film{
	position:relative;
	width:100%;
	background:#000;
}
.campaign .film{
	margin-top:30px;
}
.film .filmIn{
	position:relative;
	width:100%;
	max-width:1050px;
	margin:0 auto;
}
.film.full .filmIn{
	max-width:none;
}
.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{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:url(../../images/mov_bk.png) center center repeat;
	cursor:pointer;
}
.film .start02{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.8);
	cursor:pointer;
}

.film .start_mb{
	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:-17%;
}



.film .playinner h2{
	width:72%;
	margin:0 auto;
}
.film .playbt{
	width:10%;
	margin:2% auto;
}
.film .playbt{
	-webkit-transition: opacity 0.25s;
	-moz-transition: opacity 0.25s;
	-ms-transition: opacity 0.25s;
	transition: opacity 0.25s;
}



.film_mb{
	width:100%;
	margin:0 auto;
}
.campaign .film_mb{
	width:100%;
	margin:25px auto 0;
}
.main_youtube{
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  margin:0 auto;
}
.main_youtube iframe{
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}















/* ---------- Campaign --------- */



#campaign{
	position:absolute;
	margin-top:-60px;
}

.campaign{
	background:#F5F5F5;
	width:100%;
	padding:25px;
	box-sizing:border-box;
	color:#333;
	position:relative;
}
.campaignIn{
	border:10px solid #FFF;
	padding:35px 45px 45px;
	box-sizing:border-box;
	text-align:left;
	font-size:1.2em;
	max-width:1100px;
	margin:0 auto;
}
.campaign h2.camTitle{
	width:100%;
	font-size:2.0em;
	font-weight:bold;
	padding-bottom:0.8em;
}
.campaign h3{
	line-height:1.7;
	padding-bottom:1.5em;
}


.campaign .imageBox{
/*	width:270px;*/
	width:45%;
	float:right;
}


.campaign .textBox{
	width:52%;
	float:left;
	margin:0;
	padding:0;
/*	margin-right:-430px;*/
}
.campaign .textBox .boxInner{
	
/*	margin-right:430px;*/
/*	border-bottom:1px solid #CCC;*/

}




.campaign dl{
	border-top:1px solid #CCC;
}
.campaign dl dt{
	width:100px;
	float:left;
	padding:1.5em 0;
}
.campaign dl dd{
	width:100%;
	float:right;
	margin-left:-100px;
	padding:1em 0;
}
.campaign dl dd .ddIn{
	margin-left:100px;
}
.campaign dl dd .linebox{
	border:1px solid #333;
	display:inline-block;
	padding:0.3em 0.6em;
	box-sizing:border-box;
	font-size:1.1em;
}
.campaign dl dd .winning{
	padding-top:0.5em;
}
.campaign dl dd .period{
	padding:0.5em 0;
}
.campaign dl dd .dotline{
	border-top:1px dotted #999;
	margin-top:0.5em;
}


.tours{
	width:100%;
	margin-top:30px;
}
.tours h3{
	background:#FFF;
	text-align:center;
	padding:0.5em 0;
	margin-bottom:1em;
}

table.toursInfo{
	width:48%;
	float:left;
	margin-top:2.4em;
	border-top:1px solid #CCC;
}
table.toursInfo th{
	width:8em;
	padding:0.5em 0;
	border-bottom:1px solid #CCC;
	vertical-align:middle;
}
table.toursInfo td{
	padding:0.5em 0;
	border-bottom:1px solid #CCC;
	vertical-align:middle;
}

.schedule{
	width:48%;
	float:right;
}
.schedule h4{
	padding:0.5em 0;
}
.schedule table{
	width:100%;
	border-top:1px solid #CCC;
}
.schedule table th{
	width:5em;
	padding:0.5em 0;
	border-bottom:1px solid #CCC;
	vertical-align:middle;
}
.schedule table td{
	padding:0.5em 0;
	border-bottom:1px solid #CCC;
	vertical-align:middle;
}
.schedule .note{
	padding-top:0.2em;
	font-size:0.8em;
}

.campaign .link{
	width:100%;
	margin-top:30px;
}
.campaign .link a{
	background:#000;
	color:#FFF;
	font-size:1.6em;
	font-weight:bold;
	text-align:center;
	display:block;
	padding:1.2em 0;
	-webkit-transition:background-color 0.25s;
	   -moz-transition:background-color 0.25s;
	        transition:background-color 0.25s;
}

.campaign .link a:hover{
	background:#666;
}

.campaign .end{
	width:100%;
	border:1px solid #000;
	margin-top:30px;
	text-align:center;
	padding:1em;
	color:#C00;
	line-height:1.6;
	box-sizing:border-box;
}



/* ------- Athlite ------- */

.athlite{
	width:90%;
	margin:0 auto;
	max-width:1100px;
	padding:70px 0 70px;
	font-size:1.1em;
}
.athlite h2{
	font-family: 'Roboto', sans-serif;
	font-weight:700;
	font-size:3.0em;
	letter-spacing:0.05em;
	padding-bottom:60px;
}

.athlite .profile{
	width:100%;
	float:right;
	margin-left:-350px;
	text-align:left;
}
.athlite .profile .proInner{
	margin-left:350px;
}
.athlite .imageBox{
	width:300px;
	float:left;
}
.athlite .profile h3{
	font-family: 'Roboto', sans-serif;
	font-weight:400;
	font-size:1.8em;
	letter-spacing:0.01em;
	line-height:1.2;
	padding-bottom:0.2em;
}
.athlite .profile h4{
	font-size:1.2em;
	padding-bottom:0.8em;
	
}
.athlite .profile h4 span{
	font-size:1.4em;
	padding-right:0.5em;
}
.athlite .voide{
	margin-top:30px;
	border:1px solid #CCC;
	box-sizing:border-box;
	padding:20px;
	text-align:left;
}




/* ------- Tights ------- */

.tights{
	width:90%;
	padding:60px 0 40px;
	max-width:1100px;
	margin:0 auto;
	box-sizing:border-box;
	text-align:left;
	font-size:1.1em;
}
.tights h2{
	width:650px;
}
.tights h3{
	font-size:2.3em;
	padding:0.8em 0 1.5em;
	font-weight:bold;
}
.tights h3 br{
	display:none;
}

.tights .tightsBox{
	width:380px;
	float:left;
}
.tights .tightsBox .supportPoint{
	margin-top:40px;
	text-align:center;
	width:100%;
	font-size:0.9em;
	overflow:hidden;
}
.tights .tightsBox .supportPoint p{
	position:relative;
}
.tights .tightsBox .supportPoint p span{
	position:relative;
	z-index:100;
	background:#FFF;
	padding:0 1em;
}
.tights .tightsBox .supportPoint p:before{
	content:"";
    display:block;
	position:absolute;
	top:50%;
    width:100%;
	height:1px;
	border-top:1px solid #999;
}
.tights .tightsBox .supportPoint ul{
	width:101.5%;
	margin-top:10px;
}
.tights .tightsBox .supportPoint ul li{
	width:48.5%;
	margin-right:1.5%;
	margin-bottom:1.5%;
	box-sizing:border-box;
	line-height:1;
	padding:0.4em 0;
	border:1px solid #999;
	float:left;
	-webkit-border-radius:5px;
       -moz-border-radius:5px;
	        border-radius:5px;
}

.tights .explanation{
	width:100%;
	float:right;
	margin-left:-500px;
}
.tights .explanation ul{
	margin-left:500px;
}
.tights .explanation ul li{
	padding:0.9em 0;
	border-bottom:1px dotted #CCC;
}
.tights .explanation ul li:first-child{
	padding-top:0;
}
.tights .explanation ul li h4{
	font-size:1.2em;
	font-weight:bold;
	padding-bottom:0.2em;
}

.tights .explanation .exText{
	width:100%;
	float:left;
	margin-right:-170px;
}
.tights .explanation .exText h4,
.tights .explanation .exText p{
	margin-right:170px;
}

.tights .explanation .exImage{
	width:150px;
	float:right;
}




/* ---------- Item ------------ */

.item{
	width:90%;
	max-width:1100px;
	margin:0 auto;
	border-top:1px solid #CCC;
	padding:70px 0;
}

.item .itemLeft{
	width:45%;
	float:left;
	position:relative;
}
.item .itemRight{
	width:45%;
	float:right;
	position:relative;
}
.item .itemImg{
	width:55%;
}

.item .spec{
	width:45%;
	text-align:left;
	position:absolute;
	left:55%;
	bottom:0;
	max-width:180px;
}
.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;
}



.comingsoon{
	width:100%;
	background:#999;
	font-family: 'Roboto', sans-serif;
	font-weight:400;
	font-size:1.2em;
	text-align:center;
	line-height:1;
	padding:8px 0 7px 0;
	margin-top:5px;
	color:#FFF;
}
.buy{width:100%;}
.buy a{
	font-size:1.1em;
	margin-top:5px;
	width:100%;
	display:block;
	background:#000;
	text-align:center;
	margin-top:5px;
	color:#FFF;	
	line-height:1;
	padding:8px 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;}










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

.gallery{
	width:99.6%;
	margin:0 auto;
	overflow:hidden;
	margin-top:0.5%;
	position:relative;
	z-index:1;
}
.gallery ul.galleryList{
	width:100.2%;
}
.gallery ul.galleryList li{
	width:24.8%;
	margin-right:0.2%;
	margin-bottom:0.2%;
	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;
}









/* ================================ footer ============================== */
footer{
	width:90%;
	margin:0 auto;
	padding:4em 0 3em;
	font-size:0.9em;
}
footer p{padding:0.2em 0;}
footer a{color:#191919;}
footer a:hover{color:#FECE02;}
footer br{display:none;}


@media only screen and (max-width: 768px) {
footer{padding:4% 0 4%;}
}

@media only screen and (max-width: 575px) {
footer{font-size:0.85em;}
footer br{display:block;}
}






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

.tights .explanation{margin-left:-440px;}
.tights .explanation ul{margin-left:440px;}
}



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

.readIn{padding:60px 0;width:92%;}
.read h3{font-size:1.6em;}


.campaignIn{padding:30px 35px 35px;}
/*.campaign .imageBox{width:220px;}
.campaign .textBox{margin-right:-240px;}*/
/*.campaign .textBox .boxInner{margin-right:240px;}*/
.campaign dl dt{width:80px;}
.campaign dl dd{margin-left:-80px;}
.campaign dl dd .ddIn{margin-left:80px;}


.athlite{padding:70px 0 60px;}
.athlite .profile{margin-left:-300px;}
.athlite .profile .proInner{margin-left:300px;}
.athlite .imageBox{width:270px;float:left;}


.tights .tightsBox{width:350px;}
.tights .explanation{margin-left:-380px;}
.tights .explanation ul{margin-left:380px;}
.tights .explanation .exText{margin-right:-140px;}
.tights .explanation .exText h4,
.tights .explanation .exText p{margin-right:140px;}
.tights .explanation .exImage{width:120px;}


.item{padding:50px 0 60px;}
.item .itemLeft{width:48%;}
.item .itemRight{width:48%;}
.item .itemImg{width:60%;}
.item .spec{width:40%;left:60%;}

}



@media only screen and (max-width: 768px) {
header .inner{text-align:center;}
header .titleBox{
	width:62%;
	max-width:none;
	padding:26% 0 30% 0;
}
header .banner{
	width:70%;
	max-width:none;
	margin:7% auto 0;
}
header .tanaka{
	width:40%;
	max-width:none;
	left:0;
	right:0;
	bottom:10px;
	margin:0 auto;
}







.readIn{width:90%;}
.read h2{font-size:2.8em;}
.read h3{font-size:1.6em;line-height:1.8;text-align:left;}
.read h3 br{display:none;}
.read .point{width:100%;display:block;font-size:1.3em;}


.film .playinner{margin-top:-19%;}
.film .playinner h2{width:80%;}
.film .playbt{width:12%;}



#campaign{margin-top:-60px;}
.campaign{padding:20px;}
.campaignIn{border:8px solid #FFF;}
.campaign h2.camTitle{font-size:2.0em;}
/*
.campaign .imageBox{width:100%;max-width:300px;margin:20px auto 0;float:none;}
.campaign .textBox{float:none;margin-right:0;}
.campaign .textBox .boxInner{margin-right:0;}
*/
.campaign .textBox{width:100%; float:none;}
.campaign .imageBox{width:100%; float:none;margin-top:0%;}



table.toursInfo{width:100%;float:none;margin-top:0;}

.schedule{width:100%;float:none;padding-top:0.7em;}
.schedule table th{width:4.5em;}



.athlite .profile{float:none;margin-left:0;font-size:1.1em;}
.athlite .profile h3{text-align:center;}
.athlite .profile h4{text-align:center;font-size:1.0em; padding-bottom:1.5em;}
.athlite .profile h4 span{padding-right:0;display:block;font-size:2.0em;}
.athlite .profile .proInner{margin-left:0;}
.athlite .imageBox{width:100%;float:none;margin:20px auto;}
.athlite .voide{margin-top:0;font-size:1.1em;}


.tights{padding:60px 0 5px;}
.tights h2{width:90%; margin:0 auto;}
.tights h3{text-align:center;}
.tights .tightsBox{width:90%;max-width:400px;margin:0 auto;float:none;}
.tights .tightsBox .supportPoint{margin-top:20px;}
.tights .explanation{width:100%;float:none;margin-left:0;}
.tights .explanation ul{margin:30px 0 0;font-size:1.1em;}
.tights .explanation ul li{padding:1.2em 0;border-bottom:none;border-top:1px dotted #CCC;}
.tights .explanation ul li:first-child{padding:1.2em 0;}
.tights .explanation .exText{margin-right:-180px;}
.tights .explanation .exText h4,
.tights .explanation .exText p{margin-right:180px;}
.tights .explanation .exImage{width:160px;}



.item{padding:50px 0 40px;}
.item .itemImg{width:80%;margin:0 auto;}
.item .spec{
	width:100%;
	text-align:left;
	position:relative;
	left:0;
	max-width:180px;
	display:inline-block;
	margin-top:30px;
}

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


}




@media only screen and (max-width: 575px) {
.wide{display:none;}


header .titleBox{width:75%;padding:30% 0 28% 0;}
header .banner{margin:5% auto 0;}


.read{
	background:url(../../images/read_bkmb.jpg) center center no-repeat;
	background-size:cover;
}
.readIn{padding:40px 0 30px;}
.read h2{font-size:2.0em;}
.read h3{font-size:1.3em;line-height:1.8;}
.read .point{font-size:1.2em;margin-top:1.5em;padding-top:1.0em;}
.read .point p{margin:0.5em 0;}


.film .playinner{margin-top:-26%;}
.film .playinner h2{width:90%;}
.film .playbt{width:18%;}

.campaign .film .playinner{margin-top:-22%;}
.campaign .film .playbt{width:15%;}

.campaign{padding:10px;}
.campaignIn{border:5px solid #FFF;padding:22px 25px 25px;}
.campaign h2.camTitle{font-size:1.6em;padding-bottom:0.5em;}
.campaign dl dt{width:100%;float:none;padding:0.3em 0;border-bottom:1px dashed #CCC;}
.campaign dl dd{width:100%;float:none;margin-left:0;}
.campaign dl dd .ddIn{margin-left:0;}

.campaign .link a{padding:1.5em 0;}

.campaign .end br{
	display:none;
}



.athlite{padding:45px 0 5%;}
.athlite h2{font-size:2.5em;padding-bottom:35px;}
.athlite .profile h4 span{font-size:1.7em;}
.athlite .voide{padding:15px;}

.tights{padding:8% 0 5px;}
.tights h2{width:95%;}
.tights h3{font-size:1.9em;padding:1.0em 0 1.0em;}
.tights h3 br{display:block;}

.tights .explanation ul li h4{font-size:1.1em;}
.tights .explanation .exText{margin-right:-150px;}
.tights .explanation .exText h4,
.tights .explanation .exText p{margin-right:150px;}
.tights .explanation .exImage{width:130px;}


.item .itemLeft{width:100%;float:none;}
.item .itemRight{width:100%;float:none; margin-top:12%;}
.item .itemImg{width:60%;}
.item .spec{margin-top:10px;}



}



@media only screen and (max-width: 420px) {
.campaign h2{font-size:1.5em;}
.campaign .link a{font-size:1.5em;}

}



@media only screen and (max-width: 360px) {
.read h2{font-size:1.8em;}
.read h3{font-size:1.2em;}
.read .point{font-size:1.1em;}

.campaignIn{padding:18px 20px 20px; font-size:1.15em;}
.campaign h2.camTitle{font-size:1.3em;}



.athlite h2{font-size:2.3em;padding-bottom:20px;}
.athlite .profile h3{font-size:1.6em;}
.athlite .profile h4 span{font-size:1.6em;}
.athlite .profile p{font-size:0.95em;}
}











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








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

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