@charset "UTF-8";
/* ===================================================
	ACCESS アクセス Unique Style
====================================================== */

/* ---------------------------------------------------
Box Address
------------------------------------------------------ */
.box_adr{ background: #eae9e5 url("../img/bg_pattern_01.webp") repeat center center; background-size: 300px; padding: 200px 0 0;}
.box_adr .box_gmap{ line-height: 0; width: 100%;}
.box_adr .box_gmap iframe{ width: 100%; height: 700px; filter: grayscale(1);}
.box_adr .box_in{ width: 1200px; margin: 130px auto 0; display: flex; justify-content: space-between; align-items: flex-start;}
.box_adr .box_in .box_img{ width: 510px;}
.box_adr .box_in .box_txt{ width: 550px; margin: 0 50px 0 0;}
.box_adr .list_01{ border-top: solid 1px #d0cec6;}
.box_adr .list_01 > div{ display: table; width: 100%;}
.box_adr .list_01 dt,
.box_adr .list_01 dd{ display: table-cell; border-bottom: solid 1px #d0cec6; padding: 20px 15px;}
.box_adr .list_01 dt{ width: 130px; color: rgba(0,0,0,0.6); font-size: 18px;}
.box_adr .list_01 dd{ width: calc( 100% - 130px ); font-size: 14px; line-height: 1.7;}
.box_adr .btn_01{ display: flex; justify-content: flex-end; padding: 20px 0 0;}
.box_adr .btn_01 a{ font-size: 15px; position: relative;}
.box_adr .btn_01 a::before{ content: ""; display: block; background: url("../img/ico_pin_01.svg") no-repeat 0 center; background-size: 19px; width: 19px; height: 27px; position: absolute; top: 0; left: -25px; bottom: 0; margin: auto 0;}
.box_adr .btn_01 a:hover{ opacity: 1;}
.box_adr .btn_01 a span::before,
.box_adr .btn_01 a span::after{ content: ""; width: 100%; height: 1px; position: absolute; bottom: 0; left: 0;}
.box_adr .btn_01 a span::before{ background-color: #000;}
.box_adr .btn_01 a span::after{ background-color: #b4b4b4; transform: scale(0, 1); transform-origin: left top; transition: transform .3s;}
.box_adr .btn_01 a:hover span::after { transform: scale(1, 1);}

@media screen and (max-width: 600px) {
.box_adr{ padding: 50px 0;}
.box_adr .box_gmap iframe{ height: 400px;}
.box_adr .box_in{ width: 80%; margin: 30px auto 0; flex-direction: column;}
.box_adr .box_in .box_img{ width: 100%;}
.box_adr .box_in .box_txt{ width: 100%; margin: 20px 0 0;}
.box_adr .list_01 > div{ display: table;}
.box_adr .list_01 dt,
.box_adr .list_01 dd{ display: table-cell; padding: 15px 10px;}
.box_adr .list_01 dt{ width: 80px; font-size: 18px;}
.box_adr .list_01 dd{ width: calc( 100% - 80px ); font-size: 14px; line-height: 1.7;}
}

/* ---------------------------------------------------
Section Trafic (#Car/#Train)
------------------------------------------------------ */
.sec_trafic{ position: relative; overflow: hidden; background: #eae9e5 url("../img/bg_pattern_01.webp") repeat center center; background-size: 300px; padding: 200px 0 0;}
.sec_trafic#train{ padding: 200px 0;}
.sec_trafic .tit_01{ padding: 0 0 90px; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.sec_trafic .tit_01 .en{ font-size: clamp(60px,6rem,6rem); line-height: 1; position: relative; z-index: 1;}
.sec_trafic .tit_01 .ja{ font-size: clamp(30px,3rem,3rem); line-height: 1; padding: 20px 0 0;}
.sec_trafic .txt_01{ text-align: center; font-size: 1.4rem; line-height: 1.7;}
.sec_trafic .list_01{ width: 1200px; margin: 50px auto 60px; display: flex; justify-content: space-between;}
.sec_trafic .list_01 li{ width: 30%; background: #000; color: #fff;}
.sec_trafic .list_01 li a{ display: block; color: #fff; text-align: center; padding: 20px 0;}
.sec_trafic .list_01 li .start{ font-size: 1.8rem;}
.sec_trafic .list_01 li .start span{ font-size: 1.4rem;}
.sec_trafic .list_01 li .time{ font-size: 1.4rem; padding: 5px 0 0;}
.sec_trafic .list_02{ width: 1200px; margin: 50px auto 60px;}
.sec_trafic .list_02 > div{ display: table; width: 100%; box-sizing: border-box; border-bottom: solid 1px #d0cec6;}
.sec_trafic .list_02 dt{ display: table-cell; width: 210px; background: rgba(255,255,255,0.4); text-align: center; vertical-align: middle; font-size: 1.5rem;}
.sec_trafic .list_02 dd{ display: table-cell; width: calc( 100% - 210px ); padding: 30px 50px; font-size: 1.4rem;}
.sec_trafic .list_02 dd .time{ color: #858482;}
.sec_trafic .list_02 dd .flow{ padding: 5px 0 0;}
.sec_trafic .btn_01{ width: 480px; margin: 0 auto; position: relative; font-size: 16px;}
.sec_trafic .btn_01::before,
.sec_trafic .btn_01::after{ content: ""; position: absolute; top: 0; bottom: 0; left: 50%; background-repeat: no-repeat; background-position: 0 0;}
.sec_trafic .btn_01::before{ background-image: url("../img/ico_pin_01.svg"); background-size: 14px; width: 14px; height: 22px; margin: auto 0 auto -11em;}
.sec_trafic .btn_01::after{ width: 10px; height: 10px; border-bottom: solid 1px #000; border-right: solid 1px #000; transform: rotate(-45deg); transform-origin: center center; margin: auto 0 auto 10em;}
.sec_trafic .btn_01 a{ height: 80px; line-height: 80px; border-radius: 80px; font-size: 16px;}

@media screen and (max-width: 600px) {
.sec_trafic{ padding: 0 0 50px;}
.sec_trafic#train{ padding: 0 0 100px 0;}
.sec_trafic .tit_01{ padding: 70px 0 30px;}
.sec_trafic .tit_01 .en{ font-size: 28px; }
.sec_trafic .tit_01 .ja{ font-size: 18px; line-height: 1; padding: 10px 0 0;}
.sec_trafic .txt_01{ text-align: left; font-size: 14px; line-height: 1.7; padding: 0 10%;}
.sec_trafic .list_01{ width: 80%; margin: 20px auto 10px; flex-direction: column;}
.sec_trafic .list_01 li{ width: 100%; margin: 0 0 20px;}
.sec_trafic .list_01 li a{ padding: 20px 0;}
.sec_trafic .list_01 li .start{ font-size: 18px;}
.sec_trafic .list_01 li .start span{ font-size: 14px;}
.sec_trafic .list_01 li .time{ font-size: 14px; padding: 5px 0 0;}
.sec_trafic .list_02{ width: 80%; margin: 20px auto 30px; border-bottom: solid 1px #d0cec6;}
.sec_trafic .list_02 > div{ display: flex; flex-direction: column; border-bottom: none;}
.sec_trafic .list_02 dt{ display: block; width: 100%; padding: 15px; font-size: 15px; box-sizing: border-box;}
.sec_trafic .list_02 dd{ display: block; width: 100%; padding: 15px 15px 30px; font-size: 14px; box-sizing: border-box;}
.sec_trafic .list_02 dd .flow{ padding: 5px 0 0;}
.sec_trafic .btn_01{ width: 80%;}
.sec_trafic .btn_01::before{ margin: auto 0 auto -7.5em;}
.sec_trafic .btn_01::after{ margin: auto 0 auto 6.5em;}
.sec_trafic .btn_01 a{ height: 80px; line-height: 1.5; border-radius: 80px;}
}