@charset "UTF-8";

* { box-sizing:border-box; }

#wrapper { line-height:1.5em; }
main     { overflow:hidden; }
section  { padding:80px 0; }
h2,h3    { line-height:1.5em; font-size:2em; text-align:center; }

.inner { width:1000px; padding-left:20px; padding-right:20px; margin: 0 auto; }

#mv {
	display:flex; justify-content:center; align-items:center;
	width:100%; height:500px;
	background:url(./img/mv.jpg)no-repeat center / cover;
}
#mv h2     { width:840px; margin:auto; padding:0 60px; position:relative; }
#mv h2 img { display:block; width:60%; }
#mv h2::after {
	content:"";
	background:url(./img/mv_img.png)no-repeat;
	width:330px; height:445px;
	position:absolute; top:50%; right:60px;
	margin-top:-222px;
}

/* nav */
#mv + nav      { background:#000; }
#mv + nav ul   { display:flex; justify-content:space-between; width:960px; padding:0 20px; margin:auto; }
#mv + nav li   { width:calc(100%/4); }
#mv + nav li a {
	display:block; width:100%; font-weight:bold; color:#666666;
	text-decoration:none; text-align:center;
	padding:20px 0 40px;
	position:relative;
}
#mv + nav li a::after {
	content:"";
	background:url(./img/arrow_off.svg)no-repeat;
	width:20px; height:10px;
	position:absolute; top:50px; left:50%;
	margin-left:-10px;
}
#mv + nav li a:hover        { color:#FFF; transition:.5s; }
#mv + nav li a:hover::after { background:url(./img/arrow_on.svg)no-repeat; transition:.5s;  }


/* web */
#web    { background:#ececec; }
#web ul {
	display:flex; justify-content:space-between;
	width:640px; margin:0 auto 40px;
	background:url(./img/web_img02.svg)no-repeat center / 80px;
}
#web li     { width:260px; }
#web li img { display:block; width:100%; }
#web p      { text-align:center; line-height:2em; }


/* fee */
#fee h2  { margin-bottom:30px; }
#fee div { width:640px; padding:65px 55px 55px; margin:auto; border:5px solid #000; border-radius:10px; }
#fee p   { padding-bottom:40px; margin-bottom:40px; text-align:center; border-bottom:5px solid #000; }
#fee li  { display:flex; font-size:0.75em; line-height:1.5em; }
#fee li::before { content:"※"; padding-right:0.3em; }
#fee li:not(:first-child) { margin-top:5px; }

/* contact */
.contact    { background:#ececec; }
.contact h3 { margin-bottom:30px; }
.contact ul { display:flex; justify-content:center; align-items:center; }
.contact li { width:470px; background:#f6b42d;  border-radius:10px; text-align:center; }
.contact li a   { display:block; padding:25px; text-decoration:none; color:#000; font-weight:bold; }
.contact strong { font-size:1.5em; }

/* homepage */
#homepage { background:#000; padding-top:125px; padding-bottom:0; }
#homepage h2 { position:relative; }
#homepage h2 img { display:block; }
#homepage h2::before {
	content:"";
	background:url(./img/homepage_line.svg)no-repeat;
	width:960px; height:30px;
	position:absolute; bottom:0; left:0;
	margin-bottom:-50px;
}
#homepage h2::after {
	content:"";
	background:url(./img/homepage_img.png)no-repeat;
	width:230px; height:375px;
	position:absolute; top:50%; right:0;
	margin-top:-188px;
}
#homepage ul { list-style:disc inside;  padding:85px 0 50px; }
#homepage li {
	padding:20px 0; border-bottom:2px dashed #333;
	color:#FFF; font-weight:bold; font-size:2em; line-height:1.5em;
}
#homepage .inner + div { background:#FFF; position:relative; }
#homepage .inner + div:before {
	content:"";
	background:url(./img/homepage_arrow.svg)no-repeat;
	width:1400px; height:100px;
	position:absolute; top:0; left:50%;
	margin:-2px 0 0 -700px;
}
#homepage p.inner { padding:130px 20px 70px; }
#homepage p.inner img { display:block; margin:auto; }

/* maintenance */
#maintenance { background:#f6b42d; padding:60px 0; }
#maintenance .inner { position:relative; }
#maintenance .inner::before {
	content:"";
	background:url(./img/maintenance_img.png)no-repeat;
	width:430px; height:508px;
	position:absolute; top:50%; right:0;
	margin:-254px -145px 0 0;
}
#maintenance h2     { text-align:left; margin-bottom:30px; }
#maintenance h2 img { display:block; }

/* info */
#info h2 { margin-bottom:30px; }
#info table { width:640px; margin:auto; }
#info th, #info td { padding:20px; }
#info th { background:#000; color:#FFF; width:160px; border-right:2px solid #FFF; }
#info td { background:#ececec; }
#info tr:not(:first-child) th { border-top:5px solid #FFF; }
#info tr:not(:first-child) td { border-top:5px solid #FFF; }


/* --------------------------------------------
スマホ対応
--------------------------------------------*/
.sp { display:none; }
@media screen and (max-width: 768px) {
	.pc { display:none; }
	.sp { display:block; }

	#wrapper { min-width:100%; }
	.inner   { width:100%; }
	section  { padding:40px 0; }

	/* header */
	header h1  { background:none; }
	header a   { display:block; padding:10px; }
	header img { width:100%; }

	/* mv */
	#mv { height:400px; }
	#mv h2     { width:100%; padding:0 20px; margin:auto; }
	#mv h2 img { width:70%; }
	#mv h2::after { width:30%; height:160px; margin-top:-80px; background-size:contain; background-position:right; right:20px; }
	#mv + nav ul   { width:100%; flex-wrap:wrap; }
	#mv + nav li   { width:50%; }
	#mv + nav li a { padding:10px 0 25px; }
	#mv + nav li a::after { top:40px; }

	/* web */
	#web ul { width:100%; background-size:10%; }
	#web li { width:40%; }

	/* fee */
	#fee div   { width:100%; padding:10%; }
	#fee p     { padding-bottom:5%; margin-bottom:5%; }
	#fee p img { width:100%; }

	/* contact */
	.contact ul { width:100%; flex-wrap:wrap; }
	.contact li { width:100%; }
	.contact li:not(:first-child) { margin:10px 0 0 0; }
	.contact strong { font-size:1em; }
	.contact li a   { padding:5%; }

	/* homepage */
	#homepage { padding-top:60px; }
	#homepage h2::before { width:100%; background-position:center; }
	#homepage h2::after  { width:30%; height:160px; margin-top:-60px; background-size:contain; background-position:right; }
	#homepage h2 img { width:70%; }
	#homepage li { font-size:1.25em; }
	#homepage p.inner img { width:100%; }

	/* maintenance */
	#maintenance { padding:40px 0; }
	#maintenance h2 img { width:70%; }
	#maintenance .inner::before {
		width:30%; height:160px; margin:0;
		background-size:contain; background-position:right;
		top:-60px; right:0;
	}

	/* info */
	#info table { width:100%; }
	#info th, #info td { display:block; width:100%; }
	#info th { border-right:none; }
	#info tr:not(:first-child) th { border-top:none; margin-top:5px; }
	#info td, #info tr:not(:first-child) td { border:none; margin-top:2px; }

	/* footer */
	footer { min-width:auto; }


}