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

/* ================= font ====================== */

@import url(https://fonts.googleapis.com/css?family=Roboto:500,400,300,100);

/* ============================================= */



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;
	-webkit-text-size-adjust: 100%;
}


a{ color:#000;}


#topcontrol{
	z-index:100;
}


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



.pcview{ display:block;}
.pcview02{ display:block;}
.mbview{ display:none;}
.mbview02{ display:none;}




@media screen and (max-width: 768px) {
.pcview02{ display:none;}
.mbview02{ display:block;}
}

@media screen and (max-width: 519px) {
.pcview{ display:none;}
.mbview{ display:block;}
}





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


header{
	width:100%;
	/*height:727px;*/
	padding-bottom:70px;
	overflow:hidden;
	position:relative;
}
.headerIn{
	width:90%;
	margin:0 auto;
	max-width:1200px;
	text-align:left;
}
.headleft{
	width:50%;
	float:left;
	margin-top:60px;
}
.headright{
	width:550px;
	position:absolute;
	right:0;
	top:0;
	-webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all  0.2s;
}


header h1{
	font-size:3.2em;
	line-height:1.4;
	font-weight:100;
	margin-bottom:0.3em;
}
header p.copy{
	font-size:1.08em;
	line-height:1.7;
	margin-bottom:1.5em;
}

.itemnameSet{
	margin-bottom:10px;
}
.itemname{
	float:left;
	margin-top:0.5%;
	padding-left:20px;
}
.itemname h2{
	font-family: 'Roboto', sans-serif;
	font-weight:300;
	font-size:2.0em;
	line-height:1.2;
}
.itemname h3{
	font-size:0.9em;
}

.icon{
	float:left;
	width:100px;
}

hr{
	height:0px;
	border:none;
	border-top:2px solid #000;
	margin:0 0 5px 0;
	width: 18px;
	text-align:left;
}
.itemspec h4{
	padding-bottom:0.5em;
	font-family: 'Roboto', sans-serif;
	font-weight:300;
	font-size:1.5em;
	line-height:1;
}
.specset{
	width:100%;
}
.itemspec p{line-height:1.4;}
.itemspec .buy a{
	width:100%;
	max-width:140px;
	display:block;
	background:#000;
	font-weight:300;
	font-size:1.0em;
	letter-spacing:0.1em;
	text-align:center;
	line-height:1;
	padding:8px 0 8px 0;
	color:#FFF;
	margin-top:5px;
}


.specleft{
	float:left;
	width:150px;
}
.speccenter{
	float:left;
	width:150px;
	margin-left:50px;
}
.specright{
	float:left;
	width:150px;
	margin-left:20px;
}

.itemimg{
	width:80%;
	margin:0 auto;
	padding-bottom:5px;
}


.wrapper{
	width:90%;
	margin:0 auto;
	max-width:1200px;
	padding-bottom:100px;
}

.infoleft{
	width:49.5%;
	float:left;
	border:1px solid #666;
	text-align:left;
	margin-bottom:0.7%;
}
.inforight{
	width:49.5%;
	float:right;
	border:1px solid #666;
	text-align:left;
	margin-bottom:0.7%;
}
.wrapper h3{
	font-size:1.6em;
	margin-bottom:0.5em;
	padding:4% 4% 0 4%;
}
.wrapper .text{
	float:left;
	padding:0% 0 4% 4%;
}
.wrapper .infoimg{
	float:right;
	padding:0% 4% 4% 0;
}
.info01 .text{ width:75%;}
.info01 .infoimg{ width:12%; margin-top:-4%;}

.info02 .text{ width:70%;}
.info02 .infoimg{ width:17%; margin-top:-4%;}

.info03 .text{ width:70%;}
.info03 .infoimg{ width:17%; margin-top:-1%;}

.info04 .text{ width:63%;}
.info04 .infoimg{ width:24%; margin-top:-2%;}


.ip5{ display:none;}


@media only screen and (max-width: 1150px) {
.headleft{width:45%;}
.headright{margin-right:-80px; width:580px;}



.specleft{width:35%;}
.speccenter{width:35%; margin-left:10%;}
.specright{width:30%; margin-left:5%;}
.itemimg{width:100%;}



}
@media only screen and (max-width: 1000px) {
.headright{margin-right:-160px;}


.info01 .text{ width:72%;}
.info01 .infoimg{ width:15%; margin-top:0%;}

.info02 .text{ width:67%;}
.info02 .infoimg{ width:20%; margin-top:0%;}

.info03 .text{ width:64%;}
.info03 .infoimg{ width:24%; margin-top:0%;}

.info04 .text{ width:57%;}
.info04 .infoimg{ width:30%; margin-top:2%;}



.itemname{
	float:left;
	margin-top:0.5%;
	padding-left:10px;
}
.itemname h2{
	font-size:1.9em;
}
.itemname h3{
	font-size:0.9em;
}
.icon{
	float:left;
	width:90px;
}




}


@media only screen and (max-width: 850px) {
header{
	width:100%;
	padding-bottom:10px;
}
header p.copy{
	margin-bottom:2.5em;
}

.headerIn{width:100%;margin:0 auto;}
.headright{
	width:65%;
	margin-left:35%;
	position:static;
	right:0;
	top:0;
	max-width:none;
	overflow:hidden;
}
.headright img{
	margin-top:-70px;
}

.headleft{
	width:90%;
	margin:0 auto;
	float:none;
	margin-top:0;
	padding-top:50px;
}


.specset{
	width:80%;
	margin:0 auto;
	margin-top:30px;
}

.specleft{width:46%;}
.speccenter{width:46%; margin-left:8%;}
.specright{width:28%; margin-left:8%;}

.itemspec .buy a{
	max-width:100%;
}







.itemname{width:83%;}
.icon{width:15%;}



.wrapper{margin-top:6%;}

.infoleft,
.inforight{
	width:99.8%;
	float:none;
	margin:0 auto;
	margin-top:1%;
}

.info01 .text{ width:78%;}
.info01 .infoimg{ width:10%; margin-top:-4%;}

.info02 .text{ width:75%;}
.info02 .infoimg{ width:13%; margin-top:-4%;}

.info03 .text{ width:73%;}
.info03 .infoimg{ width:15%; margin-top:-3%;}

.info04 .text{ width:65%;}
.info04 .infoimg{ width:23%; margin-top:-4%;}
}



@media only screen and (max-width: 650px) {
header h1{text-align:center; margin-bottom:0.6em;}
.headright{width:85%;margin-left:15%;}


.itemname{width:100%; text-align:center; float:none;}
.icon{width:100px; margin:0 auto; float:none; margin-bottom:10px; padding-top:10px;}

.infoleft,
.inforight{
	margin-top:2%;
}

.wrapper{
	padding-bottom:50px;
}

.info01 .text{ width:70%;}
.info01 .infoimg{ width:18%; margin-top:-4%;}

.info02 .text{ width:68%;}
.info02 .infoimg{ width:20%; margin-top:-4%;}

.info03 .text{ width:62%;}
.info03 .infoimg{ width:26%; margin-top:-0%;}

.info04 .text{ width:60%;}
.info04 .infoimg{ width:28%; margin-top:-0%;}
}



@media only screen and (max-width: 400px) {
header h1{font-size:2.8em;}
header p.copy{font-size:1.02em;}

.headright{width:85%;margin-left:15%;}

.wrapper{margin-top:10%;}

.specset{
	width:90%;
	margin:0 auto;
	margin-top:20px;
}



.info01 .text,
.info02 .text,
.info03 .text,
.info04 .text{ width:92%;}
.info01 .infoimg{ width:30%; margin:0 auto; margin-top:2%; float:none; padding:0 0 4% 0;}
.info02 .infoimg{ width:36%; margin:0 auto; margin-top:2%; float:none; padding:0 0 4% 0;}
.info03 .infoimg{ width:40%; margin:0 auto; margin-top:2%; float:none; padding:0 0 4% 0;}
.info04 .infoimg{ width:54%; margin:0 auto; margin-top:2%; float:none; padding:0 0 4% 0;}

}

@media only screen and (max-width: 350px) {
header h1{font-size:2.5em;}
.ip5{ display:block;}
}













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









ul:after,
.infoleft:after,
.inforight:after,
header:after,
.clear:after{
	  content: "";
	  display: table;
	  float:none;
	  clear: both;
}