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

/* ---------------------------------------------------
	lead_col
------------------------------------------------------ */
#lead_col { background: var(--color-bg);  color: #1b1b1b; padding: 90px 0 75px; }
#lead_col > div { display: flex; justify-content: space-between; align-items: center; }
#lead_col h2 { font-size: 22px; }

@media screen and (min-width: 601px) {
	#lead_col p { width: 550px; }
}

@media screen and (max-width: 600px) {
	#lead_col { padding: 50px 0 40px; }
	#lead_col > div { flex-direction: column; align-items: flex-start; }
	#lead_col h2 { font-size: 18px; margin-bottom: 10px; }
}

/* ---------------------------------------------------
	sec01
------------------------------------------------------ */
#sec01 { padding: 80px 0 160px;}
#sec01 #googlemap { position: relative; padding-bottom: 600px; margin-bottom: 50px; }
#sec01 #googlemap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#sec01 .detail_col { display: flex; justify-content: space-between; align-items: center; }
#sec01 .detail_col dl dt { font-size: 22px; margin-bottom: 15px; }
#sec01 .detail_col dl dd p + p { margin-top: 10px; }
#sec01 .detail_col dl dd a { color: #ececec;}
#sec01 .detail_col dl dd p a { border-bottom: 1px solid #fff;}
#sec01 .detail_col dl dd .cmn_btn03 { display: block; width: fit-content; margin: 45px 0 0 auto; padding: 0 10px 10px; }
#sec01 .detail_col dl dd .cmn_btn03 span { display: flex; }
#sec01 .detail_col dl dd .cmn_btn03 span::before { content: ""; width: 13px; height: 15px; margin: 0 12px 0 0; display: block; background: url(../../sightseeing/img/ico_map.svg) no-repeat center center/contain; }

@media screen and (hover: hover) {
}

@media screen and (min-width: 601px) {
	#sec01 .detail_col dl { width: 55%; }
}

@media screen and (max-width: 600px) {
	#sec01 { padding: 40px 0 60px;}
	#sec01 #googlemap { padding-bottom: 75%; margin-bottom: 30px; }
	#sec01 .detail_col { flex-direction: column; padding: 0 6%; }
	#sec01 .detail_col .txt { width: 100%; margin-top: 20px; }
	#sec01 .detail_col dl dt { font-size: 18px; margin-bottom: 10px; }
	#sec01 .detail_col dl dd p + p { margin-top: 10px; }
	#sec01 .detail_col dl dd .cmn_btn03 { margin: 30px 0 0 auto; padding: 0 5px 7px; }
}


/* ---------------------------------------------------
	sec02
------------------------------------------------------ */
#sec02 { padding: 0 0 135px;}
#sec02 h2 { margin-bottom: 130px; }
/* access3 */
.access_layout_03 .sb_tit { border-bottom: 1px solid #596269; text-align: center; padding: 5px 0; margin-bottom: 85px; font-size: 22px; position: relative; }
.access_layout_03 .sb_tit:after { content: ''; width: 13px; height: 8px; background: url(../img/arrow01_gr.svg) no-repeat center/contain; position: absolute; bottom: -20px; left: calc(50% - 6px);}
.access_layout_03 .layout3 { gap: 60px 6%; flex-wrap: wrap; display: flex; justify-content: center; letter-spacing: 0.1em; }
.access_layout_03 div > div { display: flex; flex-direction: column; }
.access_layout_03 div > div > div { display: flex; flex-direction: row; justify-content: space-between; flex-grow: 1; gap: clamp(45px, 3.8vw, 50px); position: relative; }
.access_layout_03 div > div > div > p { position: absolute; top: -28px; left: 50%; transform: translateX(-50%); width: 100%; text-align: center; }
.access_layout_03 div > div > div > div { display: flex; flex-direction: column; flex-grow: 1; min-width: 180px; }
.access_layout_03 ol { display: flex; list-style: none; flex-direction: column; flex-grow: 1; }
.access_layout_03 ol span { width: 100%; background: var(--color-bg02); position: relative; font-size: 15px; text-align: center; line-height: 1.3; padding: 3px 0; }
.access_layout_03 .point { font-size: 16px; position: relative; padding: 3px 0; text-align: center; background: #cecece; color: #313131; }
.access_layout_03 .way { padding: 40px 0; position: relative; display: flex; flex-grow: 1; align-items: center; }
.access_layout_03 .way::before { content: ''; width: 5px; height: 100%; position: absolute; left: calc(50% - 2.5px); top: 0; background: #5d6c7e; background-size: 13px 13px; }
.access_layout_03 .way.walk::before { content: ''; width: 5px; height: 100%; position: absolute; left: calc(50% - 2.5px); top: 0; background: linear-gradient(to bottom, #5d6c7e 5px, transparent 5px); background-size: 5px 10px; background-position: center top -2px; }
.access_layout_03 .min_height { min-height: 188px; }
.access_layout_03 .flex_box dl { display: flex; justify-content: space-between; gap: clamp(35px, 3vw, 40px); }
.access_layout_03 .flex_box dl div { flex-grow: 1; display: flex; flex-direction: column; flex: 1; }
.access_layout_03 .flex_box dl div dt { position: relative; padding: 40px 0 0; position: relative; display: flex; align-items: center; }
.access_layout_03 .flex_box dl div dt::before { content: ''; width: 5px; height: 100%; position: absolute; left: calc(50% - 2.5px); top: 0; background: #5d6c7e; background-size: 13px 13px; }
.access_layout_03 .flex_box dl div dd { display: flex; flex-direction: column; flex-grow: 1; }
.access_layout_03 .point.last { padding: 5px 0; background: #5d6c7e; color: #ececec; }
.access_layout_03 .layout3 + p { margin-top: 60px; }
.access_layout_03 .bottom_link { margin-top: 90px; display: flex; justify-content: center; }
.access_layout_03 .bottom_link li a { display: block; color: #ececec; font-size: 14px; }
.access_layout_03 .bottom_link li a span { display: flex; }
.access_layout_03 .bottom_link li a span::after { content: ""; width: 14px; height: 14px; margin: 0 0 0 5px; display: block; background: url(../../access/img/ico_tab.svg) no-repeat center center/contain; }
.access_layout_03 .bottom_link li + li { margin-left: 70px; }

@media screen and (min-width: 601px){
	.access_layout_03 .layout3 .col2_2 { width: 54%; }
	.access_layout_03 .layout3 .col3 { width: 72.5%; }
}

@media screen and (max-width: 600px){
	#sec02 { padding: 0 0 60px;}
	#sec02 h2 { margin-bottom: 20px; }
	.access_layout_03 .layout3 { flex-direction: column; gap: 0; }
	.access_layout_03 div > div > div { gap: 0; }
	.access_layout_03 div > div > div > div { width: 100%;}
	.access_layout_03 > div > div > div { padding: 20px 7% 0; flex-wrap: wrap; }
	.access_layout_03 div > div > div > p { position: static; transform: none; font-size: 14px; }
	.access_layout_03 ol span { font-size: 14px; }
	.access_layout_03 .sb_tit { margin: 20px 0; font-size: 18px; }
	.access_layout_03 .point { font-size: 15px; }
	.access_layout_03 .way { font-size: 14px; padding: 20px 0; }
	.access_layout_03 .min_height { min-height: auto; }
	.access_layout_03 .layout3 + p { margin-top: 40px; }
	.access_layout_03 .bottom_link { flex-direction: column; margin-top: 40px; }
	.access_layout_03 .bottom_link li + li { margin: 20px 0 0;}
	.access_layout_03 .bottom_link li a { width: fit-content; }

	.access_layout_03 div > div > div > div + div { padding-top: 40px; margin-top: 40px; border-top: 1px solid #596269;}
	.access_layout_03 .flex_box dl div dt { padding: 20px 0 0;}
	.access_layout_03 .flex_box dl div dd .point { font-size: 14px; }
	.access_layout_03 .flex_box dl div dd ol span { font-size: 13px; }
	.access_layout_03 .layout3 > div + div { margin-top: 20px; }
	.access_layout_03 .flex_box dl { gap: 5%; }
}