@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:#FFF;
	font-size:12px;
	line-height:1.5;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	background:#EB6100;
}


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


#wrapper{
	width:90%;
	max-width:1000px;
	margin:40px auto;
	padding:20px 20px 40px 20px;
	border:4px solid #FFF;
	box-sizing: border-box;
	-webkit-border-radius:20px;
	   -moz-border-radius:20px;
	        border-radius:20px;
}


.logo{
	text-align:right;
	width:100%;
}
.logo img{
	width:17%;
	max-width:140px;
}


h1{
	width:60%;
	max-width:500px;
	margin:0 auto;
}

h2{
	font-size:1.7em;
	margin-top:1.5em;
	line-height:1.7em;
}


.present{
	width:350px;
	margin:50px auto 50px;
}


h3{
	font-size:1.5em;
	padding-bottom:1.5em;
}


ul.itemlist{
	width:95%;
	margin:0 auto;
	text-align:left;
	font-size:0;
}

ul.itemlist li{
	width:21%;
	margin:2%;
	display:inline-block;
	font-size:12px;
	text-align:center;
	vertical-align:top;
}

ul.itemlist li a{
	color:#FFF;
}

ul.itemlist li a:hover{
	color:#FFD169;
}

ul.itemlist li h4{
	font-family: 'Roboto Condensed', sans-serif;
	font-weight:400;
	font-size:1.2em;
	line-height:1.3;
	letter-spacing:0.04em;
	padding:0.8em 0 0.3em;
}

.itemimg{
	width:100%;
	background:#FFF;
	box-sizing:border-box;
	padding:15px;
	-webkit-border-radius:7px;
	   -moz-border-radius:7px;
	        border-radius:7px;
}

.note{
	width:95%;
	margin:40px auto 0;
	text-align:left;
}

.notetitle{
	font-size:1.1em;
	padding-bottom:0.5em;
}



/* =========== footer ========== */
footer{
	width:90%;
	margin:0 auto;
	padding:2em 0 3em;
	font-size:0.9em;
}
footer p{padding:0.2em 0;}
footer a{color:#FFFFFF;}
footer br{display:none;}




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

ul.itemlist li{width:29.333333%;}

}






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

ul.itemlist{width:100%;}
h2{font-size:1.5em;}

.present{width:50%;margin:6% auto 8%;}

.note{margin:6% auto 0;}

/* =========== footer ========== */
footer{padding:4% 0 4%;}
}



@media screen and (max-width: 600px){
#wrapper{
	margin:5% auto;
	padding:5% 3% 8% 3%;
	-webkit-border-radius:20px;
	   -moz-border-radius:20px;
	        border-radius:20px;
}

.logo{text-align:center;}
.logo img{width:25%;}

h1{margin-top:8%; width:70%;}
h2{font-size:1.4em; text-align:left;width:95%;margin-left:auto;margin-right:auto;}
h2 br{display:none;}
h3{font-size:1.4em;padding-bottom:0.5em;}
.present{width:60%;}
ul.itemlist li{width:44%;margin:3%;}

}


@media screen and (max-width: 450px){
.logo img{width:30%;}
h1{width:80%;}
h2{font-size:1.3em;}
.present{width:65%;margin:8% auto 10%;}
.note{font-size:0.9em;margin:10% auto 0;}

/* =========== footer ========== */
footer{font-size:0.85em;}
footer br{display:block;}
}










@media screen and (max-width: 360px){
#wrapper{
	width:95%;
	margin:2.5% auto;
	padding:5% 2% 5% 2%;
}
h1{width:90%;}


}










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


ul:after{
	content: "";
	display: table;
	float:none;
	clear: both;
}