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

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

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

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

html{
	width:100%;
}



body{
	height:100%;
	margin:0px;
	padding:0px;
	text-align:center;
	color:#4C4C4C;
	font-size:12px;
	line-height:1.7;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	background:#FFF;
}

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


.fix{position:fixed;}
a{color:#4C4C4C;}



header{
	width:100%;
	padding:60px 0 80px;
}
header h1{
	width:320px;
	margin:0 auto;
}








.lookBox{
	width:98%;
	margin:0 auto;
	max-width:1200px;
	overflow:hidden;
	padding-bottom:50px;
}
.lookBox ul{
	width:101%;
}

.lookBox ul li{
	width:49%;
	margin:0 1% 1% 0;
	float:left;
	position:relative;
	overflow:hidden;
	line-height:0;
}

.lookBox ul li.copyBox{
	line-height:1.7;
	text-align:left;
	padding:0 20px;
	box-sizing:border-box;
	position:relative;

}

.lookBox ul li.copyBox .inner{
	position: absolute;
	top: 50%;
	padding:0 25px 0 15px;
	-webkit-transform:translateY(-50%);
	  -moz-transition:translateY(-50%);
	        transform:translateY(-50%);
}
.lookBox ul li.copyBox h2{
	font-family: 'Roboto Condensed', sans-serif;
	font-weight:300;
	font-size:3.0em;
	line-height:1.2;
	color:#1FB1D7;
}
.lookBox ul li.copyBox h3{
	font-size:1.2em;
	padding-top:1em;
}


.lookBox ul li a{
	width:100%;
	display:block;
	background:rgba(0,0,0,0.0);
	position:absolute;
	z-index:100;
	top:0;
	bottom:0;
	left:0;
	right:0;
	-webkit-transition: background-color 0.4s;
	-moz-transition: background-color 0.4s;
	transition: background-color 0.4s;
}





.lookBox .view{
	position:absolute;
	margin:0 auto;
	left:0;
	right:0;
	top:50%;
	margin-top:-1.8em;
	color:#FFF;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight:400;
	font-size:1.6em;
	line-height:1.4;
}
.lookBox .view i{
	font-size:1.5em;
}

.lookBox .view .viewIn{
	display:inline-block;
	position:relative;
	filter:alpha(opacity=0);
	-webkit-opacity: 0;
	   -moz-opacity: 0;
	        opacity: 0;
	-webkit-transition: opacity 0.4s;
	   -moz-transition: opacity 0.4s;
	        transition: opacity 0.4s;
	
}
.lookBox a .viewIn::before {
	position: absolute;
	top: -25px;
	right: -35px;
	bottom: -25px;
	left: -35px;
	border: 1px solid #fff;
	content: '';
	display:block;
	-webkit-transform: scale(0.8);
	transform: scale(0.8);
	-webkit-transition: -webkit-transform 0.3s;
	        transition:transform 0.3s;
}
.lookBox a:hover .viewIn::before {
	-webkit-transform: scale(1.0);
	transform: scale(1.0);
}




@media screen and (min-width: 768px) {
.lookBox a:hover .viewIn {
	filter:alpha(opacity=100);
	-webkit-opacity: 1;
	   -moz-opacity: 1;
	        opacity: 1;
}
.lookBox ul li a:hover{
	background:rgba(0,0,0,0.5);
}
}

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

header{padding:7% 0 8%;}
header h1{width:42%;}


.lookBox{
	width:97%;
}

.lookBox ul li.copyBox h2{font-size:2.6em;}
.lookBox ul li.copyBox h2 br{ display:none;}
.lookBox ul li.copyBox h3{padding-top:0.5em;}

.lookBox{padding-bottom:0;}

.lookBox ul li.copyBox{width:99%;margin-right:1%;padding:0 2% 2%;}
.lookBox ul li.copyBox .inner{
	position:relative;
	top:0;
	padding:0;
	-webkit-transform:translateY(0%);
	  -moz-transition:translateY(0%);
	        transform:translateY(0%);
}
.lookBox ul li .null{display:none;}


.bookInner .spec{border-bottom:1px solid #CCC;margin-top:15px !important;}
.bookInner .sex{
	background:#F5F5F5;
	text-align:center;
	padding:0.3em 0;
	line-height:1;
}

.bookInner .itemlist p{border-top:1px solid #CCC;}
.bookInner .itemlist a{padding:0.5em 0;display:block;}
.bookInner .itemlist i{display:none;}

}



@media screen and (max-width: 540px) {
header{padding:10% 0 10%;}
header h1{width:60%;}

.lookBox ul li.copyBox{width:99%;margin-right:1%;padding:0 4% 5%;}
.lookBox ul li.copyBox h2{font-size:2.3em;text-align:center;}


.bookInner h2{width:95%;margin:0 auto;}
.bookInner h3{width:95% !important;margin:0 auto; line-height:1.5 !important;}

.bookInner .spec{width:95% !important;}


}














/* ================================ footer ============================== */
footer{
	width:90%;
	margin:0 auto;
	padding:0em 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:8% 0 4%;}
}

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
















/* ===================================== InLine ============================================== */





.bookInner{
	width:100%;
	text-align:left;
	padding:0;
	box-sizing:border-box;
}

.bookInner h2{
	font-family: 'Roboto Condensed', sans-serif;
	font-weight:700;
	font-size:1.7em;
	color:#ACD8E5;
	letter-spacing:0.05em;
	margin-top:5px;
}
.bookInner h2 span{
	font-size:1.8em;
	padding-left:0.2em;
	letter-spacing:0 !important;
}

.bookInner h3{
	width:100%;
	font-size:1.15em;
}







.bookInner .spec{
	margin:0 auto;
	width:100%;
	margin-top:10px;
}
.bookInner .sex{
	font-family: 'Roboto Condensed', sans-serif;
	font-weight:400;
	font-size:1.4em;
	line-height:1.4;
	letter-spacing:0.03em;
	padding-bottom:0.1em;
}
.bookInner .itemlist{
	font-family: 'Roboto Condensed', sans-serif;
	font-weight:400;
	font-size:1.2em;
	line-height:1.3;
	letter-spacing:0.03em;
}
.bookInner .itemlist p{
	padding:0.1em 0;
}
.bookInner .itemlist a{
	color:#4C4C4C;
	text-decoration:none;
	-webkit-transition: color 0.2s;
	   -moz-transition: color 0.2s;
	        transition: color 0.2s;
}
.bookInner .itemlist a:hover{
	color:#1FB1D7;
}
.bookInner .itemlist i{
	padding-right:0.5em;
}










/* ========================================================
                            Clerfix
   ======================================================== */


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