@charset "UTF-8";
/* default */

/*	reset
------------------------------------------------------------ */ 
@import url("reset.css");

/*	elements
------------------------------------------------------------ */ 
@import url("elements.css");

/*	form
------------------------------------------------------------ */ 
@import url("form.css");

/*	nav
------------------------------------------------------------ */ 
@import url("nav.css");


/* links
------------------------------------------------------------ */
a:link { text-decoration: underline; color: #000; }
a:visited { text-decoration: underline; color: #000;}
a:hover { text-decoration: underline;color: #000;}
a:active { text-decoration: underline; color: #000;}

/* body
------------------------------------------------------------ */
body {
	background: #fff;
	font-size:13px;
	line-height:160%;
	font-family: YuGothic,Helvetica,"serif";
}



/* header
------------------------------------------------------------ */
header {width: 500px; margin: 0 auto 20px; text-align: center;}
header h1 { margin-bottom: 10px;}
header h2{}

@media screen and (max-width:500px){
	header {width: 90%; margin: 0 auto 10px; text-align: center;}
	header h1 img { width: 40%; height: auto;}
	header h2 img { width: 90%; height: auto;}
}

/*	main
------------------------------------------------------------ */ 
main { width: 920px; height: 420px; margin: 0 auto 40px; position: relative;}
main .main_inner {
	width: 600px;
	height: 420px;
	position: absolute;
	top: 0;
	left: 160px;
	background-image: url("../../images/main_bg.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 580px 400px;
}
main .main_illust { width: 160px; height: 300px; position: absolute; top: 40px; right: 40px;}

@media screen and (max-width:920px){
	main { width: 90%; height: auto;}
	main .main_inner { width: 100%; height: auto; position: relative; top: auto; left: auto;}
	main img { width: 100%; height: auto;}
	main .main_illust { width: 140px; height: 263px; position: absolute; top: 10px; right: 10px;}
	main .main_illust img { width: 100%; height: auto;}
}

/*	hgroup
------------------------------------------------------------ */
hgroup { text-align: center; margin-bottom: 40px;}
hgroup .hgroup_inner { display: inline-block; margin: 0 auto; text-align: left;}
hgroup .hgroup_inner h3 { font-size: 400%; margin-bottom: 40px;}
hgroup .hgroup_inner h4 { font-size: 120%;}

@media screen and (max-width:920px){
	hgroup { width: 90%; margin: 0 auto 20px;}
	hgroup .hgroup_inner { display: block; margin: 0 auto; text-align: left;}
	hgroup .hgroup_inner h3 { font-size: 180%; margin-bottom: 20px;}
	hgroup .hgroup_inner h4 { font-size: 100%;}
}

/*	features
------------------------------------------------------------ */
.features { width: 840px; margin: 0 auto 80px; display: flex; justify-content: space-between;}
.features .features_box { width: 400px;}
.features .features_box .photo_box {
	width: 400px;
	height: 280px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 400px 280px;
}
.features .features_box .photo_box.box01{background-image: url("../../images/image01.png");}
.features .features_box .photo_box.box02{background-image: url("../../images/image02.png");}
.features .features_box .photo_box.box03{background-image: url("../../images/image03.png");}
.features .features_box .photo_box.box04{background-image: url("../../images/image04.png");}
.features .features_box p { font-size: 90%; text-align: right;}

@media screen and (max-width:1000px){
	.features { width: 90%; margin: 0 auto; display: block;}
	.features .features_box { width: 100%; margin-bottom: 20px;}
	.features .features_box .photo_box {
		width: 100%;
		height: auto;
		background-size: 100% auto;
	}
	.features .features_box .photo_box img { width: 100%; height: auto;}
}

/*	sign up
------------------------------------------------------------ */
.sign_up { width: 100%; padding: 40px 0; background: #f0f0f0;}
.sign_up .sign_up_inner { width: 1000px; margin: 0 auto; display: flex; justify-content: space-between;}
.sign_up .sign_up_inner .info { width: 500px;}
.sign_up .sign_up_inner .info h3 { font-size: 140%; margin-bottom: 20px;}
.sign_up .sign_up_inner .form { width: 400px;}

@media screen and (max-width:1000px){
	.sign_up .sign_up_inner { width: 90%; margin: 0 auto; display: block;}
	.sign_up .sign_up_inner .info { width: 100%; margin-bottom: 20px;}
	.sign_up .sign_up_inner .form { width: 100%;}
}

/*	footer
------------------------------------------------------------ */
footer { width: 100%; padding: 40px 0 80px; background: #000; font-size: 90%; line-height: 140%;}
footer .footer_inner {width: 1000px; margin: 0 auto; color: #fff; display: flex; justify-content: space-between;}
footer .footer_inner .copyright{}
footer .footer_inner .credit{ margin-bottom: 20px;}
footer .footer_inner .credit a { color: #fff; text-decoration: none;}

@media screen and (max-width:1000px){
	footer { width: 100%; padding: 40px 0 80px; background: #000; font-size: 90%; line-height: 140%;}
	footer .footer_inner {width: 90%; margin: 0 auto; color: #fff; display: block;}
}