@charset "utf-8";
/* ===================================================
	Access CSS
====================================================== */
#contents_wrap { line-height: 2;}

@media screen and (max-width: 600px) {
	#contents_wrap { line-height: 1.6;}
}


/* ---------------------------------------------------
上部
------------------------------------------------------ */

.lead { padding: 65px 0 40px; text-align: center;}
.lead .cap { margin: 0 0 25px; font-size: 28px; font-weight: bold;}

.cnav,
.cnav a { display: flex; justify-content: center;}
.cnav { margin-bottom: 80px;}
.cnav li { width: 280px; min-height: 70px; border-right: 1px solid #d4d4d4; box-sizing: border-box;}
.cnav li:first-child { border-left: 1px solid #d4d4d4;}
.cnav a { align-items: center; height: 100%; padding: 10px; box-sizing: border-box;}

#map_col { margin-bottom: 105px;}
#map_col iframe { max-width: 100%;}
#map_col .address { display: flex; align-items: center; justify-content: space-between; margin: 45px 0 0;}
#map_col .address div .cap { margin: 0 0 20px; font-size: 22px; font-weight: bold;}
#map_col .lr_link { width: 260px; padding: 8px 10px; border: 1px solid #d4d4d4; font-size: 17px;}
#map_col .lr_link::before { background: #f9f9f7;}

@media screen and (max-width: 600px) {
	.lead { padding: 40px 0;}
	.lead .cap { margin-bottom: 15px; font-size: 22px; line-height: 1.6;}
	.lead p:not([class]) { text-align: left; }
	.lead p:not([class]) br { display: none; }

	.cnav { display: block; margin-bottom: 40px;}
	.cnav li { width: auto; min-height: 0; border-right: none; border-bottom: 1px solid #d4d4d4;}
	.cnav li:first-child { border-left: none; border-top: 1px solid #d4d4d4;}
	.cnav a { padding: 15px 40px; position: relative;}
	.cnav a::after { content: ''; width: 20px; height: 100%; position: absolute; right: 0; top: 0; background: url(../img/cnav_arrow.svg) no-repeat center center; background-size: 100% auto;}

	#map_col { margin-bottom: 60px;}
	#map_col iframe { height: 60vw;}
	#map_col .address { display: block; margin-top: 15px;}
	#map_col .address div .cap { margin-bottom: 10px; font-size: 18px;}
	#map_col .lr_link { width: 200px; padding: 5px 10px; margin: 20px 0 0;}
}


/* ---------------------------------------------------
section
------------------------------------------------------ */
#contents { padding: 0 2% 110px; background: #f8f8f6;}
section { width: 1100px; max-width: 100%; padding: 100px 0 0; margin: 0 auto;}
section h2 { margin: 0 0 55px; font-size: 22px; text-align: center;}
section h2 .en { display: block; margin: 0 0 15px; color: #9daab1; font-size: 65px; line-height: 1; letter-spacing: 15px;}

section .route_col,
section .route_col dl,
section .route_col ul,
section .route_col .time { display: flex;}
section .route_col dl,
section .route_col ul { flex-direction: column;}
section .route_col { justify-content: space-between; text-align: center;}
section .route_col dl { width: 330px; max-width: calc((100% - 30px) / 3);}
section .route_col dt em { display: block; margin: 0 0 25px; color: #214d8d; font-style: normal;}
section .route_col dt span { display: block; padding: 15px 10px; background: #e2e7eb;}
section .route_col dd { flex-grow: 1;}
section .route_col ul { height: 100%; padding: 1px 0 0; position: relative; z-index: 0;}
section .route_col ul::before { content: ''; width: 3px; height: 100%; position: absolute; top: 0; left: 50%; z-index: -1; background: #c6c6c6; transform: translateX(-50%);}
section .route_col .point { padding: 10px; background: #fff; border: 1px solid #d4d4d4;}
section .route_col .goal { padding: 15px 10px; background: #214d8d; color: #fff;}
section .route_col .time { flex-grow: 1; align-items: center; line-height: 1.6;}
section .route_col .time span { width: 100%; padding: 10px 0; margin: 20px 0; background: #f8f8f6;}

section .info { padding: 45px 55px 55px; margin: 75px 0 0; border: 1px solid #d4d4d4;}
section .info dt { font-size: 22px; font-weight: bold;}
section .info li { padding: 0 0 0 1em; text-indent: -1em;}
section .info li::before { content: '・';}
section .info a { color: #214d8d; text-decoration: underline;}
section .info a:hover { text-decoration: none;}
section .info.flex { display: flex; align-items: center;}
section .info.flex dt { flex-shrink: 0; margin: 0 60px 0 0;}

@media screen and (max-width: 600px) {
	#contents { padding: 0 4% 70px;}
	section { width: 100%; padding-top: 50px;}
	section h2 { margin-bottom: 25px; font-size: 18px;}
	section h2 .en { margin-bottom: 10px; font-size: 36px; letter-spacing: 10px;}

	section .route_col,
	section .route_col dl,
	section .route_col ul,
	section .route_col .time { display: block;}
	section .route_col dl { width: auto; max-width: none;}
	section .route_col dl + dl { margin: 10px 0 0;}
	section .route_col dt { padding: 15px 30px; position: relative; background: #e2e7eb; line-height: 1.6;}
	section .route_col dt::before,
	section .route_col dt::after { content: ''; position: absolute; top: 50%; background: #5f7d94; transform: translateY(-50%); transition: transform 0.5s, opacity 0.5s;}
	section .route_col dt::before { width: 15px; height: 1px; right: 10px;}
	section .route_col dt::after { width: 1px; height: 15px; right: 17px;}
	section .route_col dt.active::before,
	section .route_col dt.active::after { transform: translateY(-50%) rotate(-90deg);}
	section .route_col dt.active::before { opacity: 0;}
	section .route_col dt em { margin-bottom: 5px;}
	section .route_col dt span { padding: 0;}
	section .route_col .time span { display: block; margin: 15px 0;}

	section .info { padding: 20px; margin-top: 30px;}
	section .info dt { font-size: 18px;}
	section .info.flex { display: block;}
	section .info.flex dt { margin: 0;}
}