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

@media screen and (max-width: 600px) {
.main_title .tit{ font-size: 30px;}
}

/* ---------------------------------------------------
Section Lead
------------------------------------------------------ */
.sec_lead { padding: 150px 0; background-image: url("../../access/img/bg_deco_01.webp"); background-repeat: no-repeat; background-position: calc( 50% + 600px ) bottom;}
.sec_lead .box_01{ position: relative;}
.sec_lead .tit_01{ font-size: 30px; line-height: 1.2; padding: 0 0 30px; text-align: center; letter-spacing: 0.1em;}
.sec_lead .txt_01{ font-size: 16px; line-height: 2; padding: 0 0 30px; text-align: center;}
/*.sec_lead .leaflet-container { z-index: 1; display: none;}*/
.sec_lead .box_map{ width: 90%; max-width: 1200px; margin: 0 auto;}
.sec_lead .box_gmap{ width: 100%; padding: 120px 0;}
.sec_lead .box_gmap iframe{ width: 100%; height: 600px;}
.sec_lead .box_02{ display: flex; justify-content: space-between; align-items: flex-start; flex-direction: row;}
.sec_lead .box_02 .box_img{ width: 550px;}
.sec_lead .box_02 .box_txt{ width: 600px;}
.sec_lead .tit_02{ font-size: 25px; line-height: 1.2; padding: 0 0 30px;}
.sec_lead .list_01{ font-size: 16px;}
.sec_lead .list_01 > div{ display: table; width: 100%;}
.sec_lead .list_01 dt,
.sec_lead .list_01 dd{ display: table-cell; vertical-align: top; text-align: left; padding: 25px 0; border-bottom: solid 1px #5d5d5d;}
.sec_lead .list_01 dt{ width: 8em;}
.sec_lead .list_01 dd{ width: calc( 100% - 8em );}
.sec_lead .btn_01{ text-align: right; margin: 40px 0 0;}
.sec_lead .btn_01 a{ position: relative; border-bottom: solid 1px #fff; padding: 3px 0;}
.sec_lead .btn_01 a:hover{ text-decoration: none; border-bottom: none;}
.sec_lead .btn_01 a::before{ content: ""; background: url("../../access/img/ico_pin_01.webp") no-repeat 0 0; background-size: 15px; position: absolute; top: 0; left: -23px; width: 15px; height: 22px;}

@media screen and (max-width: 600px) {
.sec_lead { padding: 50px 0 80px; background-position: right -5px bottom; background-size: 150px;}
.sec_lead .tit_01{ font-size: 20px; line-height: 1.4; padding: 0 0 15px; text-align: center;}
.sec_lead .txt_01{ font-size: 15px; line-height: 1.8; padding: 0 0 20px; text-align: left;}
.sec_lead .box_map{ width: 100%; max-width: 100%; margin: 0;}
/*.sec_lead .box_map{ border: 1px solid #3a3a3a; background: #000; padding: 15px;}
.sec_lead .leaflet-container { display: block; background: #000;}
.sec_lead .leaflet-left { left: auto; right: 0; }
.sec_lead .leaflet-left .leaflet-control { margin: 0; }*/
.sec_lead .box_gmap{ padding: 40px 0;}
.sec_lead .box_gmap iframe{ height: 350px;}
.sec_lead .box_02{ flex-direction: column;}
.sec_lead .box_02 .box_img{ width: 100%;}
.sec_lead .box_02 .box_txt{ width: 100%;}
.sec_lead .tit_02{ font-size: 20px; line-height: 1.4; padding: 20px 0 5px;}
.sec_lead .list_01{ font-size: 15px;}
.sec_lead .list_01 dt,
.sec_lead .list_01 dd{ padding: 15px 0;}
.sec_lead .list_01 dt{ width: 6em;}
.sec_lead .list_01 dd{ width: calc( 100% - 6em );}
.sec_lead .btn_01{ margin: 20px 0 0;}
}

/* ---------------------------------------------------
Section Route
------------------------------------------------------ */
.wrap_01{ background: url("../../access/img/bg_01.webp"); padding: 0 0 150px;}
.sec_route{ padding: 120px 0 0;}
.sec_route .tit_01{ font-size: 30px; line-height: 1.2; padding: 0 0 30px; text-align: center; letter-spacing: 0.1em;}
.sec_route .list_01{ font-size: 16px;}
.sec_route .list_01 > div{ display: table; width: 100%;}
.sec_route .list_01 dt,
.sec_route .list_01 dd{ display: table-cell; vertical-align: top; text-align: left; padding: 25px 35px; border-bottom: solid 1px #5d5d5d;}
.sec_route .list_01 dt{ width: 11em; background: #3e3e3e;}
.sec_route .list_01 dd{ width: calc( 100% - 11em );}
.sec_route .btn_01{ text-align: center; margin: 40px 0 0;}
.sec_route .btn_01 a{ position: relative; border-bottom: solid 1px #fff; padding: 3px 0;}
.sec_route .btn_01 a:hover{ text-decoration: none; border-bottom: none;}
.sec_route .btn_01 a::before{ content: ""; background: url("../../access/img/ico_pin_01.webp") no-repeat 0 0; background-size: 15px; position: absolute; top: 0; left: -23px; width: 15px; height: 22px;}
.sec_route .list_02{ margin: 70px 0 0; display: flex; justify-content: center; align-items: center; flex-direction: row;}
.sec_route .list_02 li{ margin: 0 20px;}
.sec_route .note{ font-size: 16px; line-height: 1.5; padding: 30px 0 0 0;}

@media screen and (max-width: 600px) {
.wrap_01{ padding: 20px 0 50px;}
.sec_route{ padding: 50px 0 0;}
.sec_route .tit_01{ font-size: 20px; line-height: 1.4; padding: 0 0 20px; text-align: center; letter-spacing: 0.1em;}
.sec_route .list_01{ font-size: 15px;}
.sec_route .list_01 > div{ display: block; width: 100%;}
.sec_route .list_01 dt,
.sec_route .list_01 dd{ display: block; vertical-align: top; text-align: left; padding: 10px 15px; border-bottom: none; box-sizing: border-box;}
.sec_route .list_01 dt{ width: 100%;}
.sec_route .list_01 dd{ width: 100%; padding: 10px 0 20px;}
.sec_route .btn_01{ text-align: center; margin: 20px 0 0;}
.sec_route .list_02{ margin: 40px 0 0;}
.sec_route .list_02 li{ margin: 0 10px;}
.sec_route .note{ font-size: 15px; padding: 15px 0 0 0;}
}