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


/* font converted using font-converter.net. thank you! */
@font-face {
	font-family:'DINPro-Light';
	src: url("fonts/DINPro-Light.eot");
	src: url("fonts/DINPro-Light.eot?#iefix") format("embedded-opentype"), 
	url('fonts/DINPro-Light.woff2') format('woff2'),
	url('fonts/DINPro-Light.woff') format('woff'),
	url('fonts/DINPro-Light.ttf') format('truetype'),
	url('fonts/DINPro-Light.svg#DINPro-Light') format('svg');
}


@font-face {
	font-family:'DINPro-Regular';
	src:url('fonts/DINPro-Regular.eot');
	src:url('fonts/DINPro-Regular.eot?#iefix') format('embedded-opentype'),
	url('fonts/DINPro-Regular.woff2') format('woff2'),
	url('fonts/DINPro-Regular.woff') format('woff'),
	url('fonts/DINPro-Regular.ttf') format('truetype'),
	url('fonts/DINPro-Regular.svg#DINPro-Regular') format('svg');
}


@font-face {
	font-family:'DINPro-Medium';
	src:url('fonts/DINPro-Medium.eot');
	src:url('fonts/DINPro-Medium.eot?#iefix') format('embedded-opentype'),
	url('fonts/DINPro-Medium.woff2') format('woff2'),
	url('fonts/DINPro-Medium.woff') format('woff'),
	url('fonts/DINPro-Medium.ttf') format('truetype'),
	url('fonts/DINPro-Medium.svg#DINPro-Medium') format('svg');
}




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




.mainImageTitle{
	padding:27% 0;
	background:url(../images/main_img_bk.jpg) center center no-repeat;
	background-size:cover;
	position:relative;
}

.mainImageTitle .titleBox{
	position:absolute;
	z-index:10;
	top:5%;
	left:0;
	right:0;
}

.mainImageTitle h1{
	font-family:'DINPro-Light';
	color:#FFF;
	font-size:12vw;
	line-height:0.9;
}
.mainImageTitle h2{
	font-size:1.8em;
	color:#FFF;
	letter-spacing:0.1em;
	margin:20px 0 30px;
	-webkit-text-shadow:1px 1px 7px #000;
	   -moz-text-shadow:1px 1px 7px #000;
	    -ms-text-shadow:1px 1px 7px #000;
	     -o-text-shadow:1px 1px 7px #000;
	        text-shadow:1px 1px 7px #000;
}
.mainImageTitle .hhLogo{
	width:100px;
	margin:0 auto;
}


.infomation{
	width:90%;
	max-width:1000px;
	margin:70px auto 0;
	font-size:1.2em;
}
.infomation h2{
	width:80%;
	max-width:420px;
	margin:0 auto;
}
.infomation h3{
	font-size:1.6em;
	margin:40px 0 10px;
}
.infomation p{
	line-height:1.7;
}
.infomation h4{
	font-size:1.2em;
	font-weight:bold;
	color:#13A5A4;
	margin:30px 0 10px;
}



.itemList{
	width:90%;
	max-width:1100px;
	margin:80px auto 0;
	overflow:hidden;
}
.itemList > h2{
	width:40%;
	max-width:180px;
	margin:0 auto;
}
.itemList > h3{
	color:#13A5A4;
	font-family:'DINPro-Medium';
	font-size:3.2em;
	border-top:2px solid #999;
	margin:30px 0 0;
	padding:30px 0 0;
	line-height:1.2;
}
.itemList > h4{
	font-size:1.3em;
	margin:1em 0 60px;
	line-height:1.5;
}
.itemList > h4 br{
	display:none;
}





.itemList ul{
	width:105%;
	text-align:left;
	font-size:0;
}
.itemList ul li{
	width:20%;
	margin-right:5%;
	margin-bottom:5%;
	display:inline-block;
	vertical-align:top;
	font-size:12px;
}



.itemList ul li h4{
	font-family:'DINPro-Medium';
	font-size:1.2em;
	text-align:center;
	margin-top:0.5em;
	line-height:1.2;
	padding:0.2em 0;
}
.itemList ul li .price{
	font-family:'DINPro-Regular';
	font-size:1.2em;
	text-align:center;
}

.itemList ul li .buy{
	margin:7px auto 15px;
	max-width:150px;
}
.itemList ul li .buy a{
	font-family:'DINPro-Medium';
	font-size:1.2em;
	text-align:center;
	display:block;
	background:#13A5A4;
	color:#FFF;
	line-height:1.0;
	padding:0.5em 0 0.4em;
	-webkit-border-radius:20px;  
	   -moz-border-radius:20px;  
	    -ms-border-radius:20px;  
	        border-radius:20px; 
	-webkit-transition:background 0.3s;
	   -moz-transition:background 0.3s;
	    -ms-transition:background 0.3s;
	        transition:background 0.3s;
}
.itemList ul li .buy a:hover{
	background:#001655;
}



@media screen and (max-width: 920px) {
.mainImageTitle{padding:30% 0;}
.mainImageTitle h2{font-size:1.7em;}
.itemList ul li{width:28.33333%;}
}


@media screen and (max-width: 768px) {
.mainImageTitle{padding:35% 0;}
.itemList > h3{font-size:2.5em;}
.itemList > h4 br{display:block;}


}


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

.infomation p{text-align:left;}
.infomation p.concept br{display:none;}
.infomation h4{margin:40px 0 30px;}

.infomation .date{border-top:1px solid #CCC;}
.infomation .date p{
	border-bottom:1px solid #CCC;
	line-height:1.4;
	padding:0.6em 0;
}


.itemList ul li{width:45%; padding:0 2%;box-sizing:border-box;}
.itemList ul li .comment{font-size:1.05em;}
.itemList ul li .buy a{font-size:1.3em;}


}


@media screen and (max-width: 500px) {
.mainImageTitle{padding:40% 0;}
.mainImageTitle h1{font-size:13vw;}
.mainImageTitle h2{font-size:1.5em;}
.mainImageTitle .hhLogo{width:80px;}


.infomation{font-size:1.15em;margin:15% auto 0;}
.infomation h3{font-size:1.4em; margin-top:30px;}
.infomation h3 br{display:none;}

.itemList{margin-top:50px;}
.itemList > h3{font-size:2.3em;margin-bottom:0px;}
.itemList ul li{width:45%; padding:0;}
.itemList ul li .buy a{font-size:1.2em;}
.itemList > h4{font-size:1.2em; margin-bottom:40px;}
}





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

.itemList > h3{font-size:2.1em;}
.itemList > h4{font-size:1.15em}
.itemList ul li .comment{font-size:1.0em;}

}






















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