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

.flex_col { display: flex; justify-content: space-between;}

@media screen and (max-width: 600px) {
	.flex_col { display: block;}
}


/* ---------------------------------------------------
sec1
------------------------------------------------------ */
#sec1 { padding: 80px 0 100px;}
#sec1 h2 { padding: 0 0 30px; font-size: 34px; text-align: center;}
#sec1 h2+p { text-align: center; margin: 0 0 60px;}
#sec1 iframe { width: 100%; margin: 0 0 100px;}
#sec1 .flex_col >div { width: 46%;}
#sec1 .flex_col >div p { font-size: 24px;}
#sec1 .flex_col >div dl { display: flex; padding: 20px 0; border-bottom: 1px solid #aaa;}
#sec1 .flex_col >div dl dt { width: 110px;}
#sec1 .flex_col >div dl dd { width: calc(100% - 110px);}
#sec1 .flex_col >div >a { display: table; margin: 35px 0 0 auto; padding: 0 0 15px 40px; border-bottom: 1px solid #000; background: url(../../access/img/icon_arrow1.svg)no-repeat left 2px; background-size: 25px;}

@media screen and (max-width: 600px) {
	#sec1 { padding: 70px 0 50px;}
	#sec1 h2 { padding: 0 6% 20px; font-size: 26px; text-align: left;}
	#sec1 h2+p { text-align: left; margin: 0 0 40px; padding: 0 6%;}
	#sec1 iframe { margin: 0 0 50px;}
	#sec1 .flex_col >div { width: 100%; padding: 30px 0 0;}
	#sec1 .flex_col >div p { font-size: 20px;}
}

/* ---------------------------------------------------
Common parts
------------------------------------------------------ */
.route_box,
.route,
.route ul,
.route li { display: flex;}
.route_box { margin: 0 auto 50px; justify-content: space-between;}
.route { flex-direction: column; width: 22%; text-align: center;}
.route_box .route.route_wrap { z-index: 2;}
.route h3 { display: flex; height: 72px; padding: 0 2%; background: #006835; color: #fff; justify-content: center; align-items: center; line-height: 1.4;}
.route ul { flex-direction: column; justify-content: space-between; flex-grow: 1; position: relative; z-index: 0; }
.route li { padding: 15px 2%;}
.route li > span { display: block; width: 100%;}
.route li > span span { display: inline-block;}
.route .point { border: 1px solid #ccc; background: #fff;}
.route .goal { background: #d5e2ab; color: #fff;}
.route .goal img { margin: 0 auto;}
.route .time { -ms-align-items: center; align-items: center; flex-wrap: wrap; flex-grow: 1; padding: 20px 0;}
.route .time span { display: block; padding: 10px 0; background: #fff;}

.route_box li.full { width: 1200px; box-sizing: border-box;}

#sec2_time1 { height: 421px;}
#sec2 .route_box li.half { width: 563px;}
#sec3 .route { width: 30%;}
#sec3 .route_box li.half { width: 764px;}
#sec4 .route ul:before { display: none;}
.route .time.none { background: none;}
.route .time { background: url(../../access/img/bg_line.png) repeat-y center center;}



@media screen and (max-width: 1280px) {
	#sec3 .route_box li.half { width: 59.8vw;}
}

@media screen and (max-width: 1200px) {
	#sec3 .route_box li.half { width: 718px;}
}

@media screen and (max-width: 1230px) {
	.route_box li.full { width: 94vw; min-width: 1128px;}
	#sec2 .route_box li.half { width: 44.5vw; min-width: 530px;}
	#sec2 .route_box li.half.time { width: 550px;}
	

	
}

@media screen and (max-width: 600px) {
.route_box { width: 88%;}
.route_box,
.route,
.route ul,
.route li { display: block;}
.route,#sec3 .route { width: auto;}
.route+.route { margin: 30px 0 0;}
.route ul { margin-bottom: 40px;}
.route h4,
.route li { padding: 10px 2%;}
.route h3 { position: relative;}
.route h3:after { content: ""; display: block; position: absolute; top: 50%; right: 15px; margin: -5px 0; width: 6px; height: 6px; border-bottom: 1px solid #fff; border-right: 1px solid #fff; transform: rotate(45deg); }
.route h3.active:after { margin: 0 0; transform: rotate(-135deg); }
.route .time { height: auto !important;}
.route .time.none { background: url(../../access/img/bg_line.png) repeat-y center center;}

.route_box li.full,
#sec2 .route_box li.half { width: auto; min-width: auto;}
#sec2 .route_box li.half.time,
#sec3 .route_box li.half { width: 100%;}

#sec3 .route_box li.half { width: 100%; box-sizing: border-box;}

}


/* ---------------------------------------------------
.sec_route
------------------------------------------------------ */
.sec_route { padding: 80px 0 100px; background-color: #fff; border-bottom: 1px solid #aaa;}
.sec_route h2 { margin: 0 0 50px; text-align: center; font-size: 32px;}
.sec_route h2 img { display: block; margin: 0 auto;}
.sec_route > a { margin: 0 auto;}
.sec_route > a.btn_route { display: block; width: 400px; margin: 0 auto 50px; padding: 16px 0; background-color: #006835; color: #fff; text-align: center; border-radius: 30px;}

.sec_route .link_btn1 { width: auto; display: table; padding: 0 30px 20px 0;}

#sec4.sec_route { border-bottom: none;}

@media screen and (max-width: 600px) {
	.sec_route { padding: 70px 0;}
	.sec_route h2 { margin: 0 0 30px; font-size: 26px;}
	.sec_route h2 img { width: 24px;}

	.sec_route > a.btn_route { width: 88%; margin: 0 auto 30px;}
}


/* ---------------------------------------------------
#sec5
------------------------------------------------------ */
#sec5 { padding: 100px 0;}
#sec5 h2 { margin: 0 0 30px; font-size: 32px;}
#sec5 h2 .tit_note { margin: 0 20px 0 0; padding: 6px 16px; background-color: #006835; color: #fff; font-size: 22px;}
#sec5 .flex_col >div { width: 50%;}
#sec5 .flex_col >img { width: 46%;}
#sec5 .flex_col p span { display: block; color: #e60012;}
#sec5 .sec5_time { margin: 0 0 30px;}
#sec5 .sec5_time h3::before { content: "■"; color: #006835; font-size: 16px;}
#sec5 .sec5_time h3 { font-size: 22px;}
#sec5 .sec5_time h3 span { font-size: 16px;}
#sec5 .sec5_time dl:first-of-type { border-top: 1px solid #aaa;}
#sec5 .sec5_time dl { display: flex; border-bottom: 1px solid #aaa}
#sec5 .sec5_time dt { width: 250px; padding: 26px 30px; box-sizing: border-box; background-color: #edf1e1;}
#sec5 .sec5_time dd { width: calc(100% - 250px); padding: 26px 30px; box-sizing: border-box;}

@media screen and (max-width: 600px) {
	#sec5 { padding: 70px 0;}
	#sec5 .flex_col >div { width: 100%;}
	#sec5 h2 { margin: 0 0 20px; text-align: center; font-size: 28px;}
	#sec5 h2 .tit_note { display: table; margin: 0 auto; padding: 0 16px; font-size: 18px; vertical-align: text-top;}
	#sec5 .flex_col >img { width: 100%; margin: 10px 0 50px;}
	#sec5 .sec5_time dl { display: block;}
	#sec5 .sec5_time dt,
	#sec5 .sec5_time dd { width: 100%; padding: 10px 20px;}
	#sec5 .sec5_time { margin: 0 0 50px;}
}