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

/* ---------------------------------------------------
#sec1
------------------------------------------------------ */
#sec1 { padding: 0 0 200px;}
#sec1 h2 { padding: 180px 0 60px; text-align: center; font-style: italic; font-size: 40px; color: rgba(65, 65, 65, .6);}
#sec1 .box_map { background: #fff; margin: 0 0 100px; padding: 16px; box-shadow:  0px 0px 9px 1px rgba(0, 0, 0, 0.3);}
#sec1 .box_map img { display: block; width: 100%; height: auto;}
#sec1 iframe { width: 42%; height: 380px; border: 1px solid #ccc !important;}
#sec1 .flex_col > div { width: 50%;}
#sec1 .flex_col > div h3 { margin: 0 0 25px; font-size: 28px; font-style: italic; color: rgba(65, 65, 65, .6);}
#sec1 .flex_col > div dl { display: flex; flex-wrap: wrap; padding: 20px 0; border-bottom: 1px solid #ccc; font-size: 16px;}
#sec1 .flex_col > div dt { width: 130px; color: rgba(65, 65, 65, .6);}
#sec1 .flex_col > div dd { width: calc(100% - 130px);}
#sec1 .flex_col > div dl+a { display: table; margin: 40px 0 0 auto; font-size: 15px; padding: 0 0 0 30px; background: url(../../access/img/arrow.svg)no-repeat left center; background-size: 18px; color: rgba(65, 65, 65, .6);}

@media screen and (hover: hover) and (min-width: 601px) {


}

@media screen and (max-width: 600px) {
	#sec1 { padding: 0 0 100px;}
	#sec1 h2 { font-size: 26px; padding: 100px 0 30px;}
	#sec1 .box_map { margin-bottom: 50px; padding: 9px;}
	#sec1 .box_map .viewport { z-index: 1;}
	#sec1 iframe { width: 100%; height: 70vw;}
	#sec1 .flex_col > div { width: 100%; margin: 20px 0 0;}
	#sec1 .flex_col > div h3 { margin: 0; font-size: 20px;}
	#sec1 .flex_col > div dl { display: block; padding: 10px 0;}
	#sec1 .flex_col > div dl dt,
	#sec1 .flex_col > div dl dd { width: 100%;}
	#sec1 .flex_col > div dl+a { margin: 20px 0 0 auto;}
}


/* ---------------------------------------------------
#sec2
------------------------------------------------------ */
#sec2 { padding: 180px 0 220px; background: url(../../access/img/sec2_bg.png)no-repeat right 0 top 20px,url(../../access/img/sec2_bg2.gif);}
#sec2 h2 { padding: 0 0 40px; font-style: italic; font-size: 40px; color: rgba(65, 65, 65, .6);}
#sec2 .flex_col { margin-bottom: 140px;}
#sec2 .flex_col img { width: 42%;}
#sec2 .flex_col .sec_txt { width: 54%;}
#sec2 .flex_col .sec_txt p { padding: 0 0 20px;}
#sec2 .flex_col .sec_txt p span { font-weight: bold; border-bottom: 1px solid #414141;}
#sec2 .flex_col .sec_txt ul li::before { content: "・";}
#sec2 .flex_col .sec_txt ul li { padding-left: 1em; text-indent: -.7em;}
#sec2 .inner_md >div:nth-of-type(2) ul { display: flex; justify-content: space-between;}
#sec2 .inner_md >div:nth-of-type(2) ul li:nth-of-type(1) { width: 42%;}
#sec2 .inner_md >div:nth-of-type(2) ul li:nth-of-type(2) { width: 55%;}
#sec2 .inner_md >div:nth-of-type(2) p { padding: 30px 0 0;}

@media screen and (max-width: 600px) {
 #sec2 { padding: 80px 0;}
 #sec2 h2 { padding: 0 0 20px; font-size: 26px;}
 #sec2 .flex_col { margin-bottom: 50px;}
 #sec2 .flex_col img,
 #sec2 .flex_col .sec_txt { width: 100%;}
 #sec2 .flex_col .sec_txt { margin-top: 20px;}
 #sec2 .inner_md >div:nth-of-type(2) ul { display: block;}
 #sec2 .inner_md >div:nth-of-type(2) ul img { width: 100%;}
 #sec2 .inner_md >div:nth-of-type(2) ul li:nth-of-type(1) { margin: 0 0 10px;}
 #sec2 .inner_md >div:nth-of-type(2) ul li:nth-of-type(1),
 #sec2 .inner_md >div:nth-of-type(2) ul li:nth-of-type(2) { width: 100%;}
}

/* ---------------------------------------------------
#sec3
------------------------------------------------------ */
#sec3 { padding: 200px 0;}
#sec3 h2 { padding: 0 0 70px; text-align: center; font-style: italic; font-size: 40px; color: rgba(65, 65, 65, .6);}

.route_wrap { margin-bottom: 230px;}
/* ルート詳細 */
.route_col,
.route,
.route ul,
.route li { display: -webkit-flex; display: -ms-flex; display: flex;}

.route,
.route ul { -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column;}
.route_col { justify-content: space-between; width: 1100px; max-width: 100%; margin: 0 auto;}
.route dt {
	padding: 10px 0; margin: 0 0 35px; position: relative; text-align: center;
	border-bottom: 1px solid #aaa; font-size: 20px; line-height: 1.6; opacity: .6;
	box-sizing: border-box; min-height: calc((20px * 1.6) + (16px * 1.6) + 20px);
}
.route dt::before {
	content: ''; width: 100%; height: 25px;
	position: absolute; bottom: -25px; left: 0;
	background: url(../../access/img/route_arrow.svg) no-repeat center bottom;
	background-size: 30px;
}
.route dt span { display: block; font-size: 16px;}
.route dd { flex-grow: 1; padding: 15px 0 0; margin: 0 auto; text-align: left;}
.route ul { height: 100%; min-height: 525px;}
.route li { padding: 0 0 0 40px; position: relative; z-index: 0; line-height: 1.2;}
.route li.point { min-height: 30px; font-size: 18px; line-height: 1.6; z-index: 2;}
.route li.point::before {
	content: ''; width: 30px; height: 30px;
	position: absolute; left: 0; top: 0;
	border: 9px solid #bbb; border-radius: 50%;
	-webkit-box-sizing: border-box; box-sizing: border-box;
}
.route li.start::before { border-color: #656565;}
.route li.goal::before { border-color: #966a76;}
.route li.time {
	flex-grow: 1; -ms-align-items: center; align-items: center;
	padding: 20px 0 20px 40px; font-size: 14px;
}
.route li.time::before {
	content: ''; width: 6px; height: 100%; position: absolute;
	left: 15px; top: 0; z-index: -1;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
}
.route li.time p + p { margin: 20px 0 0;}

.route { width: 310px; max-width: 28%;}
.route li.time::before { background: #e7e7e7;}

#sec3 .route_col2 { margin-bottom: 200px;}
#sec3 .route_col2 h2 { padding: 0 0 40px;}
#sec3 .route_col2:last-of-type { margin: 0;}
.route_col2 dl { display: flex; border-bottom: 1px solid #d9d9d9;}
.route_col2 dt,
.route_col2 dd { padding: 30px;}
.route_col2 dt { width: 230px; background-color: #f2f2f2; font-size: 18px; opacity: .7;}
.route_col2 dd { font-size: 16px; color: rgba(65, 65, 65, .6);}
.route_col2 dd p { color: #414141;}
.route_col2 dd p span { font-weight: bold;}

@media screen and (max-width: 600px) {
	#sec3 { padding: 80px 0;}
	#sec3 h2 { padding: 0 0 20px; font-size: 26px;}
	.route_wrap { margin-bottom: 100px;}
	.route_col,
	.route,
	.route ul,
	.route li { display: block;}

	.route_col { width: 92%;}
	.route { width: auto !important;}
	.route dt {
		padding: 10px 0; margin: 0 0 35px; position: relative;
		font-size: 16px; min-height: auto;
	}
	.route dt span { display: inline; font-size: 12px;}
	.route dd { padding: 15px 20px 0; margin: 0 0 30px;}
	.route ul { min-height: 0;}
	.route li.point { font-size: 16px;}
	.route li.time p + p { margin-top: 10px;}

	#sec3 .route_col2 { margin-bottom: 80px;}
	#sec3 .route_col2 h2 { padding: 0 0 20px;}
	.route_col2 dl { display: block;}
	.route_col2 dt,.route_col2 dd { width: 100%; padding: 10px 5%; box-sizing: border-box;}
	.route_col2 dt { font-size: 16px;}
}