@charset "utf-8";
/* ===================================================
	access CSS
====================================================== */

#main_img { background: url(../../access/img/title.jpg)no-repeat center; background-size: cover;}
section { width: 1100px; max-width: 92%; margin: 0 auto;}

/* ---------------------------------------------------
#sec1
------------------------------------------------------ */
#sec1 { padding: 30px 0 50px;}
#sec1 #map { padding: 7px; background: url(../../access/img/map_bg.png); box-sizing: border-box;}
#sec1 #map iframe { display: block; width: 100%; padding: 0; margin: 0 auto;}
#sec1 p { padding-top: 30px; text-align: center; font-size: 16px;}
#sec1 p span { margin: 0 1em;}

@media screen and (max-width: 600px) {
	#sec1 { padding: 30px 0 0;}
	#sec1 #map iframe { height: 300px;}
	#sec1 p { text-align: left;}
	#sec1 p span { display: block; margin: 0;}
}



/* ---------------------------------------------------
共通
------------------------------------------------------ */
.sec_route { padding: 50px 0;}
.sec_route h3 { margin-bottom: 80px; color: #455533; font-size: 30px; text-align: center;
 font-family: "游明朝", YuMincho, "ヒラギノ明朝ProN W3", "Hiragino Mincho ProN","HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;}
.sec_route h3 img { display: block; margin: 0 auto 10px;}
.sec_route h3 span { display: block; padding-top: 15px; margin-top: 5px; border-top: 3px solid #88a069; color: #bfbfbf; font-size: 15px; letter-spacing: 2px;}
.sec_route h3 br { display: none;}

.route { text-align: center; font-size: 16px;}
.route h4 { color: #fff; padding: 20px; box-sizing: border-box; background: #6f7568;}
.route ul { position: relative;}
.route ul:before {
	content: ""; display: block; position: absolute; z-index: -1; top: 0; bottom: 0;
	left: 50%; margin-left: -2.5px; width: 6px; height: 100%; background: #aaa;
}
.route .point { padding: 20px; background: #fff; color: #4f781f; border: 1px solid #4f781f;}
.route .time { padding: 45px 2%;}
.route .time span { display: block; padding: 10px 0; background: url(../img/con_bg1.gif);}
.route .goal { padding: 15px; background: #202b0d;}

@media screen and (max-width: 600px) {
	.sec_route h3 { margin-bottom: 20px; font-size: 24px;}
	.sec_route h3 span { padding-top: 10px; line-height: 1.5;}
	.route h4 { padding: 10px; position: relative;}
	.route h4:after { position: absolute; margin: auto; content: ""; vertical-align: middle;
	right: 5%; top: calc(50% - 6px); width: 6px; height: 6px; border-bottom: 2px solid #fff;
	border-right: 2px solid #fff; -webkit-transform: rotate(45deg); transform: rotate(45deg);
}
	.route h4.active:after { -webkit-transform: rotate(225deg); transform: rotate(225deg); top: calc(50% - 2px);}
	.route .time { padding: 20px 2%!important;}
	.route .point { padding: 10px;}
	.route .goal img { width: 200px;}
}

@media screen and (max-width: 340px) {
	.sec_route h3 br { display: block;}
}


/* ---------------------------------------------------
#sec2
------------------------------------------------------ */
#sec2 .route_box { width: 680px; max-width: 100%; margin: 0 auto;}

@media screen and (max-width: 600px) {
	#sec2.sec_route h3 img { width: 50px;}
}


/* ---------------------------------------------------
#sec3
------------------------------------------------------ */
#sec3 { padding: 100px 0;}
#sec3 .route_box { width: 50%; float: left; padding-bottom: 30px;}
#sec3 .route_box:nth-of-type(1) { padding-right: 3%;}
#sec3 .route_box:nth-of-type(2) { float: right; padding-left: 3%; background: url(../../access/img/line.png)no-repeat top 35px left;}
#sec3 .route_box>p:nth-child(1) { padding: 15px 0 70px; color: #fff;
	background: url(../../access/img/sec3_arrow.png)no-repeat center top;
	font-size: 18px; text-align: center; position: relative;}
#sec3 .route_box .route { width: 48%; float: left;}
#sec3 .route_box .route+.route { float: right;}
#sec3 .time2 { padding: 45px 2%!important;}
#sec3 .goal { display: none;}
#sec3 .route_box p.ver_pc { clear: both; padding: 15px; background: #202b0d; text-align: center;}

@media screen and (max-width: 600px) {
	#sec3 { padding: 20px 0;}
	#sec3 .route_box { width: 100%; float: none!important; padding: 10px 0 0!important;}
	#sec3 .route_box:nth-of-type(2) { margin-top: 40px; background: none;}
	#sec3 .route_box>p:nth-child(1) { padding: 15px 0 50px;}
	#sec3 .route_box .route { width: 100%; float: none!important;}
	#sec3 .route_box .route+.route { padding-top: 30px;}
	#sec3.sec_route h3 img { width: 40px;}
	#sec3 .route ul { margin-bottom: 20px;}
	#sec3 .goal { display: block;}
	#sec3 .route_box p.ver_pc { display: none;}
	#sec3 .time2 { padding: 20px 2%!important;}
}

@media screen and (max-width: 320px) {
	#sec3.sec_route h3 { line-height: 1.5;}
}



/* ---------------------------------------------------
#sec4
------------------------------------------------------ */
#sec4 .route { width: 44%; float: left;}
#sec4 .route:nth-of-type(2) { float: right;}

@media screen and (max-width: 600px) {
	#sec4.sec_route h3 img { width: 70px;}
	#sec4 .route { width: 100%; float: none!important;}
	#sec4 .route+.route { padding-top: 30px;}
	#sec4 .route ul { margin-bottom: 20px;}
}


/* ---------------------------------------------------
#sec5
------------------------------------------------------ */
#sec5 { padding: 60px 0 120px;}
#sec5 ul li { float: left; width: 23.5%;}
#sec5 ul li+li { margin-left: 2%;}
#sec5 ul li span { display: block; text-align: center;}
#sec5 ul li>a { display: block; margin: 5px 0; background: #fff; border: 1px solid #ccc; text-align: center;}
#sec5 ul li p { text-align: center; font-size: 14px;}
#sec5 ul li p span { margin: 8px 0;}
#sec5 ul li p a { color: #0064b8; text-decoration: underline;}
#sec5 ul li p a:hover { text-decoration: none;}
#sec5 ul li p a::before { content: "▶︎"; display: inline-block; margin-right: 2px; font-size: 13px;}

@media screen and (max-width: 600px) {
	#sec5 { padding: 20px 0 50px;}
	#sec5 ul li { float: none; width: 300px; max-width: 100%; margin: 0 auto;}
	#sec5 ul li+li { margin: 20px auto 0;}
	#sec5 ul li img { width: 180px;}
	#sec5 ul li>a { padding: 5px 0;}
	#sec5 ul li:nth-child(4) img { width: 200px;}
	#sec5 ul li:nth-child(4) a { padding: 0;}
	#sec5 ul li p { font-size: 15px;}
}




/* ---------------------------------------------------
clear
------------------------------------------------------ */
#sec3:after,
#sec3 .route_box:after,
#sec4:after,
#sec5 ul:after { content: "."; display: block; height: 0px; clear: both; visibility: hidden; font-size: 0;}