@charset "utf-8";

/* reset
------------------------------------------ */
body,div,pre,p,blockquote,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,form,fieldset,input,textarea,th,td,address{margin:0;padding:0;}
table{margin:0;padding:0;border:none;border-spacing:0;border-collapse:collapse;}
img,a img,fieldset{border:none;}
ol,ul,li{list-style-type:none;}
address{font-style:normal;}

img{vertical-align:middle;}

/* setup
------------------------------------------ */
html{overflow-y:scroll;}
body{padding-bottom:20px;background:#ffffff;font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;font-size:90%;}
p,h2,h3,h4,h5,h6,li,th,td,dt,dd,pre,legend{font-size:100%;line-height:1;color:#000000;}


/* print
------------------------------------------ */
@media print{
* html body{zoom:65%;}
}



/* contents
------------------------------------------ */
section{
	width: 100%;
}

a:hover img{
opacity:0.8;
filter:alpha(opacity=80);
}

h1{
	max-width: 768px;
	margin: 0 auto;
}

div.wrap{
	width: 100%;
	padding: 6.5% 0;
	background-color: #1d2088;
	text-align: center;
}

div.wrap p{
	font-size: calc(150vw / 32);
	line-height: 1.4em;
	color: #ffffff;
}

div.wrap p span{
	color: #fff100;
}

div.wrap ul{
	width: 84%;
	max-width: 648px;
	margin: 0 auto;
}

div.wrap ul li{
	padding-top: 2.6%;
}

div.wrap p:last-of-type{
	width: 84%;
	max-width: 648px;
	margin: 2.6% auto 0;
}

div.center{
	width: 94%;
	margin: 0 3%;
	padding: 5% 0 0 0;
}

div.center h2{
	border-left: #369438 solid 6px;
	padding-left: 2px;
	font-size: calc(130vw / 32);
}

div.center > dl{
	margin-top: 2%;
}

div.center > dl > dt{
	font-size: calc(100vw / 32);
	font-weight: bold;
}

div.center > dl > dd{
	font-size: calc(88vw / 32);	
}

div.center > dl > dd dt{
	margin-top: 1%;
	line-height: 1.2em;
}

div.center > dl > dd dt span{
	color: #969696;
}

div.center > dl > dd dd{
	padding-left: 1em;
	line-height: 1.3em;
}


div.banner{
	width: 94%;
	margin: 5% 3% 0;
	padding: 4% 0 0 0;
	border-top: #e5e5e5 solid 3px;
}

div.banner ul{
	width: 100%;
	display: -webkit-box;
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
}

div.banner ul li{
	width: 32%;
	margin-bottom: 2%;
}


@media screen and (min-width:769px) {
	.non {
		display: none;
	}

	div.wrap ul{
		width: 84%;
		max-width: 857px;
		margin: 0 auto;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		}

	div.wrap ul li{
		width: 40%;

		padding-top: 2.6%;
	}

	div.wrap p{
		font-size: calc(80vw / 32);
		line-height: 1.6em;
	}

	div.wrap p:last-of-type{
		width: 28%;
/*		max-width: 352px;*/
		margin: 2.6% auto 0;
}

	div.center {
		max-width: 960px;
		margin: 0 auto;
		padding: 2% 0 0 0;
		overflow: hidden;
	}
	
	div.center > dl{
		width: 49%;
	}
	
	div.center > dl:first-of-type{
		float: left;
	}
	
	div.center > dl:last-of-type{
		float: right;
	}

	div.center h2{
		font-size: calc(70vw / 32);
	}
	
	div.center > dl > dt{
		font-size: calc(55vw / 32);
	}

	div.center > dl > dd{
		font-size: calc(40vw / 32);	
	}

	div.banner ul {
		width: 80%;
		margin: 0 10%;
	}

	div.banner ul li{
		width: 24%;
}

}

@media screen and (min-width:900px) {
	h1{
		width: 600px;
		margin: 0 auto;
	}
	
	div.wrap{
	width: 100%;
	padding: 2% 0;
	}

	div.wrap ul{
		width: 74%;
	}

	div.wrap ul li{
		width: 35%;
		padding-top: 2%;
	}

	
	
	div.wrap p{
		font-size: 22px;
	}

	div.center h2{
		font-size: 18px;
	}
	
	div.center > dl > dt{
		font-size: 15px;
	}

	div.center > dl > dd{
		font-size: 12px;	
	}
}


/* footer
------------------------------------------ */
footer{
	width: 100%;
	border-top: #009944 solid 10px;
	padding-bottom: 5%;
}

footer p{
	width: 94%;
	margin: 1.5% 3%;
	color: #333333;
	font-size: calc(80vw / 32);
	text-align: center;
}

@media screen and (min-width:769px) {
	footer p{
		font-size: 16px;
	}
}