#key { height: 800px; }

#key > div p {
	width: 1000px;
	margin: auto;
	display: block;
	padding-top: 140px;
	text-align: left;
}

#key .slid01 {
	background: url(../img/entryform/key01.jpg) no-repeat center top;
	height: 800px;
	width: 100%;
	background-size: cover;
	text-align: center;
}

#key .slid02 {
	background: url(../img/entryform/key02.jpg) no-repeat center top;
	height: 800px;
	width: 100%;
	background-size: cover;
	text-align: center;
}

#key .slid03 {
	background: url(../img/entryform/key03.jpg) no-repeat center top;
	height: 800px;
	width: 100%;
	background-size: cover;
	text-align: center;
}

#container {
	padding: 77px 0 106px;
	background: #f3f3f3;
	font-size: 15px;
}

#section01 {
	width: 1000px;
	height: 4300px;
	margin: auto;
	overflow: hidden;
}

#section01 iframe {
	display: block;
	height: 4500px;
}

#section02 {
	width: 100%;
	background: url(../img/entryform/section2_bg.jpg) no-repeat center top;
	background-size: cover;
	padding: 120px 0;
}

#section02 .detail {
	background-color: rgba(255,255,255,0.9);
	width: 750px;
	margin: auto;
	text-align: center;
	padding-bottom: 50px;
}

#section02 .detail h2 { padding-top: 50px; }
#section02 .detail h3 { padding-top: 33px; }

#section02 .detail ol > li {
	position: relative;
	font-weight: normal;
}

#section02 .detail ol > li:before {
	background-color: #25323f;
	content: "";
	width: 1px;
	height: 120px;
	display: block;
	margin: 3% auto;
}

#section02 .detail ol > li h4 { margin-bottom: 25px; }

#section02 .detail li a {
	background: url(../img/entryform/arrow.png) no-repeat 97% center;
	border: 3px solid #25323f;
	display: inline-block;
	padding: 2% 12% 2% 5%;
}

#section02 .detail li p {
	margin-top: 3%;
	line-height: 1.7;
}

#section02 .detail ul { margin-top: 4%; }

#section02 .detail ul li { line-height: 1.7; }

/* --------------------------------------------------------------------------------------
   タブレット
--------------------------------------------------------------------------------------- */

@media(max-width:1024px) and (min-width: 767px) {
	
	#key,
	#key > div { height: 500px !important; }
	
	#key > div p {
		width: 38%;
		text-align: left;
		padding-top: 19%;
		margin: 0 0 0 10%;
	}
	
	#key > div p img {
		width: 100%;
		height: auto;
	}
	
	#container {
		padding: 5% 0;
	}
	
	#section01 {
		width: auto;
		height: auto;
	}
	
	#section02 { padding: 10% 0; }
	
	#section02 .detail {
		width: auto;
		margin: 0 7%;
	}
}

/* --------------------------------------------------------------------------------------
   スマホ
--------------------------------------------------------------------------------------- */

@media (max-width: 766px) {
	
	#key,
	#key > div { height: 81vw !important; }
	
	#key .slid01 {
		background-size: 164% auto;
		background-position: 63% 0;
	}
	
	#key .slid02 {
		background-size: 164% auto;
		background-position: 89% 0;
	}
	
	#key .slid03 {
		background-size: 164% auto;
		background-position: 4% 0;
	}
	
	#key > div p {
		width: 44%;
		text-align: left;
		padding-top: 26%;
		margin: 0 0 0 13%;
	}
	
	#key > div p img {
		width: 100%;
		height: auto;
	}
	
	#container {
		padding: 5% 0;
	}
	
	#section01 {
		width: auto;
		height: 8565px;
	}

	#section01 iframe {
		height: 9000px;
	}
	
	#section02 { padding: 10% 0; }
	
	
	#section02 .detail {
		width: auto;
		margin: 0 7%;
	}
	
	#section02 .detail h2 {
		padding-top: 7%;
		width: 33%;
		margin: 0 auto;
	}
	
	#section02 .detail h3 {
		padding-top: 7%;
		width: 75%;
		margin: 0 auto;
	}
	
	#section02 .detail ol > li h4 { margin-bottom: 3%; }
	
	#section02 .detail ol > li div { margin: 0 10%; }
	
	#section02 .detail ol > li h4 img { width: 8%; }
	
	#section02 .detail li a {
		background-size: 4% auto;
		padding: 4% 12% 4% 5%;
	}
}