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


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

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

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




body{
	width:100%;
	height:100%;
	min-height:100%;
	margin:0px;
	padding:0px;
	text-align:center;
	color:#4C4C4C;
	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:1200px;}
a{ color:#4C4C4C;}
#topcontrol{z-index:100;}

header{
	background:#562832;
	width:100%;
	padding:80px 0 0 0;
	position:relative;
}
header h1{
	width:80%;
	max-width:450px;
	margin:0 auto;
}
header .badge{
	width:100%;
	margin-top:40px;
	background:url(../images/badge_bk.png) 0 0 repeat-x;
}
header .badge p{
	width:560px;
	margin:0 auto;
}
h2{
	width:80%;
	margin:0 auto;
	font-size:2.0em;
	line-height:1.9;
	margin-top:50px;
}

.itemlist{
	width:90%;
	max-width:950px;
	margin:0 auto;
	margin-top:60px;
	overflow:hidden;
	text-align:left;
}
.itemlist h3{
	width:100%;
	text-align:center;
	color:#562832;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight:400;
	font-size:3.0em;
	padding-bottom:1.8em;
}

.itemlist .listIn{
	width:90%;
	margin:0 auto;
	overflow:hidden;
}
.itemlist ul{
	width:104%;
	font-size:0;
}
.itemlist ul li{
	width:21%;
	margin-right:4%;
	margin-bottom:7%;
	font-size:12px;
	display:inline-block;
	text-align:center;
}
.itemlist ul li a{
	display:block;
	-webkit-transition: opacity 0.2s;
	-moz-transition: opacity 0.2s;
	-ms-transition: opacity 0.2s;
	transition: opacity 0.2s;
}
.itemlist ul li a:hover{
	filter:alpha(opacity=60); 
	-moz-opacity:0.60;
	-khtml-opacity:0.6;
	opacity:0.60;
}

.itemlist ul li .itemimg{
	width:90%;
	margin:0 auto;
	margin-bottom:20px;
}

.itemlist .other_item{
	width:100%;
	text-align:center;
}
.itemlist .other_item a{
	background:#562832;
	display:block;
	width:100%;
	color:#FFF;
	font-size:1.8em;
	line-height:1;
	padding:1.3em 0;
	-webkit-transition: background-color 0.2s;
	   -moz-transition: background-color 0.2s;
	    -ms-transition: background-color 0.2s;
        	transition: background-color 0.2s;
}
.itemlist .other_item a:hover{
	background:#CEE124;
}
footer{
	width:90%;
	max-width:950px;
	margin:0 auto;
	margin-top:40px;
	text-align:left;
}
footer h3{
	font-size:1.5em;
	padding-bottom:0.3em;
}
footer .ready{
	width:350px;
	margin:70px auto;
}




@media screen and (max-width: 768px) {
h2{font-size:1.8em;}
.itemlist .listIn{width:95%;}
.itemlist ul li{width:29.3333%;}
}

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

header{padding-top:15%;}
header .badge{margin-top:10%;}
header .badge p{width:100%;}
h2{
	width:90%;
	font-size:1.4em;
	line-height:1.7;
	margin-top:10%;
	text-align:left;
}
h2 br.del{display:none;}


.itemlist{margin-top:8%;}
.itemlist h3{font-size:2.3em;padding-bottom:1em;}
.itemlist ul{width:108%;}
.itemlist ul li{width:42%;margin-right:8%;margin-bottom:10%;}
.itemlist ul li a{font-size:0.9em;}
.itemlist ul li .itemimg{margin-bottom:7%;}
.itemlist .other_item a{font-size:1.6em;padding:1.8em 0;}

footer{margin-top:7%;}
footer h3{font-size:1.3em;}
footer .ready{width:65%;margin:20% auto;}

}