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


/* font converted using font-converter.net. thank you! */
@font-face {
  font-family: "DINBold";
  src: url("fonts/DINBold.eot"); /* IE9 Compat Modes */
  src: url("fonts/DINBold.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("fonts/DINBold.otf") format("opentype"), /* Open Type Font */
    url("fonts/DINBold.svg") format("svg"), /* Legacy iOS */
    url("fonts/DINBold.ttf") format("truetype"), /* Safari, Android, iOS */
    url("fonts/DINBold.woff") format("woff"), /* Modern Browsers */
    url("fonts/DINBold.woff2") format("woff2"); /* Modern Browsers */
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "DIN-Medium";
  src: url("fonts/DIN-Medium.eot"); /* IE9 Compat Modes */
  src: url("fonts/DIN-Medium.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("fonts/DIN-Medium.otf") format("opentype"), /* Open Type Font */
    url("fonts/DIN-Medium.svg") format("svg"), /* Legacy iOS */
    url("fonts/DIN-Medium.ttf") format("truetype"), /* Safari, Android, iOS */
    url("fonts/DIN-Medium.woff") format("woff"), /* Modern Browsers */
    url("fonts/DIN-Medium.woff2") format("woff2"); /* Modern Browsers */
  font-weight: normal;
  font-style: normal;
}




body{
	width:100%;
	height:100%;
	min-height:100%;
	margin:0px;
	padding:0px;
	text-align:center;
	color:#333;
	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%;
}
.ie8 body{
	min-width:1000px;	
}









header{
	background:url(../images/mainimg.jpg) center center no-repeat;
	background-size:cover;
	width:100%;
	padding:14% 0;
}
header h1{
	width:40%;
	max-width:430px;
	margin:0 auto;
}




#copy{
	width:90%;
	max-width:1000px;
	margin:0 auto;
	line-height:1.7;
}
#copy h2{
	font-size:2.8em;
	padding:2em 0 0.5em;	
}
#copy p{
	font-size:1.3em;
	line-height:1.8;
}


   
			

#itemBox{
	width:90%;
	max-width:1000px;
	margin:0 auto;
	padding-bottom:70px;
}
#itemBox h3{
	width:100%;
	border-top:2px solid #000;
	border-bottom:2px solid #000;
	padding:0.2em 0 0.3em;
	font-size:2.8em;
	font-family: 'DINBold';
	letter-spacing:0.05em;
	margin-top:70px;
}

#itemBox h4.summery{
	width:100%;
	font-size:1.4em;
	padding:2em 0 1em;
	line-height:1.8;
}





.coordinate{
	width:100%;
	padding:40px 0 40px;
	overflow:hidden;
}
.coordinate .left{
	width:46%;
	float:left;
}
.coordinate .right{
	width:46%;
	float:right;
}
.coordinate h4{
	font-family:"DIN-Medium";
	font-size:1.6em;
	padding:0.3em 0;
}
.coordinate .spec{
	font-family:"DIN-Medium";
	font-size:1.3em;
	line-height:1.2;
}
.coordinate .comment{
	width:100%;
	text-align:left;
	padding-top:1em;
	font-size:1.1em;
}

.coordinate .pickimg{
	width:80%;
	margin:0 auto 10px;
}

.coordinate .buy{
	width:100%;
	margin:0 auto;
	margin-top:1em;
}
.coordinate .buy a{
	width:100%;
	display:block;
	font-family:"DIN-Medium";
	font-size:1.8em;
	color:#444;
	line-height:1.0;
	padding:0.4em 0 0.4em 0;
	letter-spacing:0.05em;
	border:2px solid #666;
	box-sizing: border-box;
	-webkit-transition:border-color 0.2s,color 0.2s;
	   -moz-transition:border-color 0.2s,color 0.2s;
	        transition:border-color 0.2s,color 0.2s;
}
.coordinate .buy a span{
	font-size:0.7em;
	padding-left:0.2em;
	letter-spacing:0;
	vertical-align:middle;
	display:inline-block;
	margin-top:-0.25em;

}
.coordinate .buy a:hover{
	color:#D70920;
	border-color:#D70920;
}

.coordinate .pickimg a img{
	-webkit-transition: opacity 0.2s;
	-moz-transition: opacity 0.2s;
	-ms-transition: opacity 0.2s;
	transition: opacity 0.2s;
}
.coordinate .pickimg a:hover img{
	filter:alpha(opacity=70);
	-webkit-opacity: 0.7;
	-moz-opacity: 0.7;
	-ms-opacity: 0.7;
	opacity: 0.7;
}









.itemlist{
	width:100%;
	overflow:hidden;
	margin:0 auto;
	margin-top:35px;
}
.itemlist ul{
	width:104%;
	text-align:left;
	font-size:0;
}
.itemlist ul li{
	width:21%;
	margin-right:4%;
	margin-bottom:4%;
	display:inline-block;
	text-align:center;
	font-size:12px;
	vertical-align:top;
}
.itemlist .itemimg{
	width:100%;
	margin:0 auto;
}
.itemlist .itemimg a{
	-webkit-transition: opacity 0.2s;
	-moz-transition: opacity 0.2s;
	-ms-transition: opacity 0.2s;
	transition: opacity 0.2s;
}
.itemlist .itemimg a:hover{
	filter:alpha(opacity=70);
	-webkit-opacity: 0.7;
	-moz-opacity: 0.7;
	-ms-opacity: 0.7;
	opacity: 0.7;
}




.itemlist h5{
	font-size:1.3em;
	font-family:"DIN-Medium";
	font-weight:400;
	line-height:1.2;
	padding:0.5em 0 0.2em;
}
.itemlist p.spec{
	font-size:1.1em;
	font-family:"DIN-Medium";
	line-height:1.2;
}
.itemlist .itemcomment{
	text-align:left;
	padding:0.5em 0;
}
.itemlist p.buy{
	width:100%;
	margin:0 auto;
	margin-top:0.5em;
}
.itemlist p.buy a{
	width:100%;
	display:block;
	font-family:"DIN-Medium";
	font-size:1.4em;
	font-weight:400;
	color:#FFF;
	line-height:1.2;
	padding:0.3em 0 0.3em 0;
	letter-spacing:0.05em;
	-webkit-transition:background-color 0.2s;
	   -moz-transition:background-color 0.2s;
	        transition:background-color 0.2s;
}
.itemlist p.buy a span{
	font-size:0.7em;
	padding-left:0.2em;
	letter-spacing:0;
	display:inline-block;
	margin-top:-0.4em;
	vertical-align:middle;
}
.itemlist p.men a{background:#000;}
.itemlist p.unisex a{background:#666;}
.itemlist p.women a{ background:#DD6AB8;}

.itemlist p.men a:hover{background:#666;}
.itemlist p.unisex a:hover{background:#B3B3B3;}
.itemlist p.women a:hover{ background:#DF98CE;}







ul.fabricList{
	width:104%;
	font-size:0;
	text-align:left;
	margin-top:30px;
}
ul.fabricList li{
	width:21%;
	margin-right:4%;
	margin-top:20px;
	display:inline-block;
	font-size:12px;
	vertical-align:top;
}
ul.fabricList li p.fabImg{
	width:90%;
	margin:0 auto;
}









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

header{padding:18% 0;}
header h1{width:50%;}
#copy h2{font-size:2.5em;padding-bottom:1.0em;}
#itemBox h3{font-size:2.5em;}
.itemlist h5{font-size:1.2em;}

ul.fabricList li{
	width:29.3333333%;
}
}


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


#copy p{text-align:left;}
#copy p br.sp{display:none;}

.coordinate .left{width:48%;}
.coordinate .right{width:48%;}

.itemlist{width:82%;margin:25px auto 0;}
.itemlist ul{width:110%;}
.itemlist ul li{width:40%;margin:0 10% 8% 0;}

ul.fabricList{margin-top:0;}
ul.fabricList li p.fabImg{width:100%;}

}


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


header{padding:20% 0;}
header h1{width:60%;}


#copy h2{font-size:2.0em;padding-bottom:1.0em;}
#copy p{font-size:1.25em;line-height:1.6;}


#itemBox h3{margin-top:60px;font-size:2.1em;}

#itemBox h4.summery{font-size:1.2em;line-height:1.6;text-align:left;padding:1em 0 1em;}
#itemBox h4.summery br{display:none;}

.coordinate{padding:20px 0 30px;}
.coordinate .left{width:100%;float:none;margin-bottom:40px;}
.coordinate .right{width:100%;float:none;}

.coordinate h4{font-size:1.5em;}
.coordinate .spec{font-size:1.2em;}
.coordinate .buy a{font-size:1.7em;}


.itemlist{width:100%;margin:30px auto 0;}
.itemlist ul{width:105%;}
.itemlist ul li{width:45%;margin:0 5% 8% 0;}

.itemlist p.buy a{font-size:1.3em;}
ul.fabricList li{width:46%;}



}





@media screen and (max-width: 360px) {
#itemBox h3{margin-top:60px;font-size:1.9em;}
#copy h2{font-size:1.8em;}
}






















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






/* ================================ 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;}
}