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

/* ---------------------------------------------------
	Section Eyecatch
------------------------------------------------------ */
.box_eyecatch{ width: 100%; height: 100vh; overflow: hidden; font-size: 0; position: relative; padding: 0; margin: 0;}
.box_eyecatch .box_slide{ position: relative; z-index: 1; line-height: 0; height: 100%; margin: 0;}
.box_eyecatch .img{ width: 100%; height: 100%;}
.box_eyecatch .box_slide .slick-slide{ opacity: 1 !important; }
.box_eyecatch .box_slide .slideobject{ height: 100vh; opacity: 0; transition: 0s; padding-top: 50%; position: relative; z-index: 10; overflow: hidden; vertical-align: bottom; }
.box_eyecatch .box_slide .slideobject .img{ width: 100%; height: 100%; position: absolute; z-index: 10; top: 0; left: 0; right: 0; bottom: 0; object-fit: cover;}
.box_eyecatch .box_slide .slick-active .slideobject{ opacity: 1; transition: linear 5.0s; }
.box_eyecatch .box_slide .slick-continue .slideobject{ opacity: 0; transition: linear 5.0s; }
.box_eyecatch .box_slide .img{ transform: scale(1.0, 1.0); transition: 0s; }
.box_eyecatch .box_slide .slick-active .img{ transform: scale(1.1, 1.1); transition: linear 8s;  }
.box_eyecatch .box_slide .slick-continue .img{ transform: scale(1.2, 1.2); transition: linear 8s; }
.box_eyecatch .msg{ position: absolute; bottom: 120px; left: 17.3%; display: flex; flex-direction: row-reverse; align-items: flex-end; z-index: 2; color: #EFEFEF; width: 380px;}
.box_eyecatch .msg .txt_01{ width: 245px; padding: 0 0 200px; animation: fadeup 2s cubic-bezier(0.33, 1, 0.68, 1) both; }
.box_eyecatch .msg .txt_02{ width: 135px; animation: fadeup 2s cubic-bezier(0.33, 1, 0.68, 1) both; padding: 20px 0 0; display: flex; justify-content: flex-end; flex-direction: row-reverse; align-items: flex-start;}
.box_eyecatch .msg .txt_02 { animation-delay: 500ms; }
.box_eyecatch .msg .txt_02 span{ font-size: 34px; line-height: 1.7; letter-spacing: 0.1em; color: #EFEFEF; background: #373431; display: block; margin: 0 0 0 10px; padding: 10px 0;}
/*.box_eyecatch .copyright{ font-size: 11px; line-height: 1.1; color: #afc8f7; position: absolute; bottom: 30px; left: 5%; z-index: 100;}*/

@media screen and (max-width: 600px) {
.box_eyecatch{ width: 100%; height: auto; padding: 0; margin: 0;}
.box_eyecatch{ margin: 0; overflow: visible;}
.box_eyecatch .box_slide .slick-list{ width: 100%; margin: 0;}
.box_eyecatch .box_slide .slick-list,
.box_eyecatch .box_slide .slick-track,
.box_eyecatch .box_slide .slick-slide > div{ height: 600px;}
.box_eyecatch{ overflow: hidden;}
.box_eyecatch .box_slide{ height: 600px;}
.box_eyecatch .box_slide .slideobject{ height: 100%; padding-top: 100%;}
.box_eyecatch .msg{ bottom: 50%; left: 50%; margin: 0 0 -230px -160px; z-index: 2; width: 248px;}
.box_eyecatch .msg .txt_01{ width: 160px; padding: 0 0 100px; }
.box_eyecatch .msg .txt_02{ width: 88px; padding: 20px 0 0; display: flex; justify-content: flex-end; flex-direction: row-reverse; align-items: flex-start;}
.box_eyecatch .msg .txt_02 { animation-delay: 500ms; }
.box_eyecatch .msg .txt_02 span{ font-size: 20px; line-height: 1.7; letter-spacing: 0.1em; color: #EFEFEF; background: #373431; display: block; margin: 0 0 0 10px; padding: 10px 0;}
/*.box_eyecatch .copyright{ bottom: 15px;}*/
}

@keyframes fadeup {
0% { transform: translateY(30px); opacity: 0; }
80% { opacity: 1; }
100% { opacity: 1; transform: translateY(0); }
}

/* ---------------------------------------------------
	Box Information
------------------------------------------------------ */
.box_info{ width: 90%; max-width: 1000px; margin: 0 auto; padding: 50px 0 0;}
.box_info > div{ margin: 20px 0 0 0;}
.box_info > div.member{ cursor: pointer;}

@media screen and (max-width: 600px) {
.box_info{ width: 90%; padding: 20px 0 0;}
.box_info > div{ margin: 20px 0 0 0;}
}

/* モーダル */
.modal{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; text-align: center; background: rgba(0,0,0,50%); padding: 40px 20px; overflow: auto; opacity: 0; visibility: hidden; transition: .3s; box-sizing: border-box; z-index: 10; color: #000;}
.modal:before{ content: ""; display: inline-block; vertical-align: middle; height: 100%; margin-left: -0.2em; }
.modal.is-active{ opacity: 1; visibility: visible; }
.modal-container{ position: relative; display: inline-block; vertical-align: middle; max-width: 1100px; width: 90%;}
.modal-close{ position: absolute; display: block; top: 35px; right: 35px; width: 40px; height: 40px; color: #000; cursor: pointer; text-indent: 100%; white-space: nowrap; overflow: hidden; }
.modal-close::before,
.modal-close::after{ content: ""; display: block; width: 45px; height: 1px; background: #000; transform-origin: center center; position: absolute; top: 50%; left: 50%;}
.modal-close::before{ transform: translate(-50%, -50%) rotate(45deg);}
.modal-close::after{ transform: translate(-50%, -50%) rotate(-45deg);}
.modal-content{ background: #fff; text-align: left; line-height: 1.8; padding: 60px 120px; border-radius: 10px;}
.modal-content .txt_01{ text-align: center;}
.modal-content .txt_02{ text-align: center; font-size: 24px; letter-spacing: 0.1em; line-height: 1; padding: 35px 0 25px;}
.modal-content .txt_03{ text-align: center; font-size: 20px; letter-spacing: 0.1em; line-height: 1; padding: 0 0 15px;}
.modal-content .list_01{ letter-spacing: 0.15em;}
.modal-content .list_01 > div{ background: #f3f0e3; margin: 0 0 10px; padding: 15px 0; display: flex; justify-content: flex-start;}
.modal-content .list_01 dt{ width: 110px; display: flex; justify-content: center; align-items: center;}
.modal-content .list_01 dd{ width: calc( 100% - 110px); border-left: solid 1px #000; padding: 0 30px; font-size: 16px; line-height: 2;}
.modal-content .list_01 dd em{ font-size: 20px; color: #af1010; font-style: normal;}
.modal-content .list_01 dd strong{ font-size: 28px;}
.modal-content .list_01 dd p.digico{ padding: 10px 0 0;}
.modal-content .list_01 dd p.digico img{ width: 100%; height: auto;}
.modal-content .note{ padding: 0 0 0 1em; text-indent: -1em;}
.modal-content .btn{ width: 300px; height: 60px; margin: 20px auto 0;}
.modal-content .btn a{ display: block; width: 100%; height: 100%; background: #000; color: #fff; text-align: center; line-height: 60px; transition: background 0.5s;}
.modal-content .btn a:hover{ text-decoration: none; background:#444;}

@media screen and (max-width: 600px) {
.modal{ padding: 20px 0; z-index: 201; }
.modal-close{ top: 15px; right: 15px; width: 20px; height: 20px;}
.modal-close::before,
.modal-close::after{ width: 25px;}
.modal-content{ line-height: 1.8; padding: 60px 5% 5%; border-radius: 10px;}
.modal-content .txt_01{ width: 80%; margin: 0 auto;}
.modal-content .txt_02{ font-size: 16px; letter-spacing: 0.05em; line-height: 1.5; padding: 20px 0 10px;}
.modal-content .txt_03{ font-size: 15px; letter-spacing: 0.1em; line-height: 1; padding: 0 0 15px;}
.modal-content .list_01{ letter-spacing: 0.15em;}
.modal-content .list_01 > div{ flex-direction: column;}
.modal-content .list_01 dt{ width: 100%; padding: 0 0 10px;}
.modal-content .list_01 dt img{ width: auto; height: 18px;}
.modal-content .list_01 dd{ width: 90%; border-left: none; border-top: solid 1px #000; padding: 10px 0 0; margin: 0 auto; font-size: 15px; line-height: 1.5;}
.modal-content .list_01 dd em{ font-size: 18px;}
.modal-content .list_01 dd strong{ font-size: 20px;}
.modal-content .list_01 dd p.digico{ padding: 10px 0 0;}
.modal-content .note{ font-size: 14px;}
.modal-content .btn{ width: 100%; height: 60px; margin: 20px auto 0;}
}

/* ---------------------------------------------------
Section Lead
------------------------------------------------------ */
.sec_lead{ padding: 0 0 100px;}
.sec_lead .box_in{ width: 100%; background: url("../../img/lead_bg_01.webp") no-repeat bottom center; background-size: 1521px; padding: 120px 0; text-align: center;}
.sec_lead .tit{ font-size: 30px; line-height: 2;}
.sec_lead .txt{ font-size: 18px; line-height: 2.7; padding: 30px 0 0;}
.sec_lead .box_img{ width: 90%; max-width: 1400px; margin: 0 auto;}
.sec_lead .box_img img{ width: 100%; height: auto;}

@media screen and (max-width: 600px) {
.sec_lead{ padding: 0 0 50px;}
.sec_lead .box_in{ background: url("../../img/lead_bg_02.webp") no-repeat bottom center; background-size: 100%; padding: 40px 10% 150px;}
.sec_lead .tit{ font-size: 25px; line-height: 1.6;}
.sec_lead .txt{ font-size: 17px; line-height: 2; padding: 20px 0 0; text-align: left;}
.sec_lead .box_img{ width: 90%; max-width: 90%;}
}

/* ---------------------------------------------------
Section Room
------------------------------------------------------ */
.sec_room{ position: relative; padding: 100px 0; background: url("../img/bg_pattern_02.webp") #383531; color: #EFEFEF;}
.sec_room .box_imgs{ width: 63.3%; margin: 0 0 0 auto;}
.sec_room .box_imgs .img_02{ position: absolute; top: 540px; left: 50%; width: 400px; margin: 0 0 0 -690px;}
.sec_room .box_imgs img{ width: 100%; height: auto;}
.sec_room .box_txt{ width: 63.3%; padding: 0; margin: 0 0 0 auto;}
.sec_room .box_txt .tit_01{ position: absolute; top: 160px; left: 50%; margin: 0 0 0 -640px;}
.sec_room .box_txt .tit_01 span.ja{ font-size: 60px;}
.sec_room .box_txt .txt_01{ position: absolute; top: 330px; left: 50%; margin: 0 0 0 -640px; font-size: 34px; line-height: 1.8;}
.sec_room .box_txt .txt_02{ padding: 30px 0; font-size: 17px; line-height: 2.3;}
.sec_room .box_txt .btn_01{ margin: 0 0 0 auto; width: 250px;}

@media screen and (max-width: 600px) {
.sec_room{ padding: 50px 0;}
.sec_room .box_imgs{ width: 100%; margin: 0; position: relative;}
.sec_room .box_imgs .img_01{ width: 90%; margin: 0 0 0 auto;}
.sec_room .box_imgs .img_02{ position: static; width: 50%; margin: -20px auto 0 0;}
.sec_room .box_txt{ width: 80%; padding: 40px 0 0; margin: 0 auto;}
.sec_room .box_txt .tit_01{ position: static; margin: 0;}
.sec_room .box_txt .tit_01 span.ja{ font-size: 37px;}
.sec_room .box_txt .tit_01 span.en{ font-size: 17px;}
.sec_room .box_txt .txt_01{ position: static; margin: 0; font-size: 22px; line-height: 1.8;}
.sec_room .box_txt .txt_02{ padding: 15px 0; font-size: 16px;}
.sec_room .box_txt .btn_01{ margin: 0 auto;}
}

/* ---------------------------------------------------
Section BBQ
------------------------------------------------------ */
.sec_bbq{ position: relative; padding: 100px 0; }
.sec_bbq .box_imgs{ width: 63.3%; margin: 0 auto 0 0;}
.sec_bbq .box_imgs .img_02{ position: absolute; top: 540px; right: 50%; width: 400px; margin: 0 -690px 0 0;}
.sec_bbq .box_imgs img{ width: 100%; height: auto;}
.sec_bbq .box_txt{ width: 63.3%; padding: 0; margin: 0 auto 0 0;}
.sec_bbq .box_txt .tit_01{ position: absolute; top: 160px; right: 50%; margin: 0 -690px 0 0; width: 400px;}
.sec_bbq .box_txt .tit_01 span.ja{ font-size: 60px;}
.sec_bbq .box_txt .txt_01{ position: absolute; top: 330px; right: 50%; margin: 0 -690px 0 0; width: 400px; font-size: 34px; line-height: 1.8;}
.sec_bbq .box_txt .txt_02{ padding: 30px 0; font-size: 17px; line-height: 2.3;}
.sec_bbq .box_txt .btn_01{ margin: 0 0 0 auto; width: 250px;}

@media screen and (max-width: 600px) {
.sec_bbq{ padding: 50px 0;}
.sec_bbq .box_imgs{ width: 100%; margin: 0; position: relative;}
.sec_bbq .box_imgs .img_01{ width: 90%; margin: 0 0 0 auto;}
.sec_bbq .box_imgs .img_02{ position: static; width: 50%; margin: -20px auto 0 0;}
.sec_bbq .box_txt{ width: 80%; padding: 40px 0 0; margin: 0 auto;}
.sec_bbq .box_txt .tit_01{ position: static; margin: 0; width: 100%;}
.sec_bbq .box_txt .tit_01 span.ja{ font-size: 37px;}
.sec_bbq .box_txt .tit_01 span.en{ font-size: 17px;}
.sec_bbq .box_txt .txt_01{ position: static; margin: 0; width: 100%; font-size: 22px; line-height: 1.8;}
.sec_bbq .box_txt .txt_02{ padding: 15px 0; font-size: 16px;}
.sec_bbq .box_txt .btn_01{ margin: 0 auto;}
}

/* ---------------------------------------------------
Section Location
------------------------------------------------------ */
.sec_location{ position: relative; padding: 100px 0; background: url("../img/bg_pattern_02.webp") #383531; color: #EFEFEF;}
.sec_location .inner_lg{ display: flex; justify-content: space-between; align-items: center; flex-direction: row-reverse;}
.sec_location .box_imgs{ width: 63.3%;}
.sec_location .box_imgs img{ width: 100%; height: auto;}
.sec_location .box_txt{ width: 440px; padding: 0; margin: 0 90px 0 auto;}
.sec_location .box_txt .tit_01 span.ja{ font-size: 60px;}
.sec_location .box_txt .txt_01{ font-size: 34px; line-height: 1.8;}
.sec_location .box_txt .txt_02{ padding: 30px 0; font-size: 17px; line-height: 2.3;}

@media screen and (max-width: 600px) {
.sec_location{ padding: 50px 0;}
.sec_location .inner_lg{ flex-direction: column;}
.sec_location .box_imgs{ width: 100%;}
.sec_location .box_txt{ width: 80%; padding: 40px 0 0; margin: 0 auto;}
.sec_location .box_txt .tit_01 span.ja{ font-size: 37px;}
.sec_location .box_txt .tit_01 span.en{ font-size: 17px;}
.sec_location .box_txt .txt_01{ font-size: 22px; line-height: 1.8;}
.sec_location .box_txt .txt_02{ padding: 15px 0; font-size: 16px;}
}

/* ---------------------------------------------------
Section Guide
------------------------------------------------------ */
.sec_guide{ padding: 100px 0 0;}
.sec_guide .tit_01{ text-align: center; padding: 0 0 40px;}
.sec_guide .sec_in{ background: url("../img/bg_pattern_02.webp") #383531; color: #EFEFEF; padding: 60px 100px; margin-top: 40px; box-sizing: border-box;}
.sec_guide .tit_02{ color: #9c7b5c; display: flex; flex-direction: column; padding: 0 0 40px;}
.sec_guide .sec_in#facilities .tit_02{ padding: 0 0 20px;}
.sec_guide .tit_02 span{ display: block; line-height: 1.1;}
.sec_guide .tit_02 span.ja{ font-size: 15px; letter-spacing: 0.1em; font-weight: 500; padding: 0 0 10px;}
.sec_guide .tit_02 span.en{ font-size: 30px; letter-spacing: 0.15em; font-weight: 500;}
.sec_guide .box_wrap_01{ display: flex; justify-content: space-between; flex-direction: row-reverse;}
.sec_guide .box_wrap_01 .box_txt{ width: 55.5%;}
.sec_guide .box_wrap_01 .box_img{ width: 40%; max-width: 400px;}
.sec_guide .list_data_01{ font-size: 18px; margin: 0 0 20px; letter-spacing: 0.1em;}
.sec_guide .list_data_01 > div{ display: flex; padding: 0 0 10px;}
.sec_guide .list_data_01 dt{ width: 9em;}
.sec_guide .list_data_01 dd{ width: calc( 100% - 9em );}
.sec_guide .txt_01{ font-size: 15px; line-height: 2;}
.sec_guide .list_note_01{ font-size: 15px; line-height: 1.6; letter-spacing: 0.1em;}
.sec_guide .list_note_01 li{ padding: 0 0 1.6em 0.6em; text-indent: -0.6em;}
.sec_guide .list_note_01 li::before{ content: "・";}
.sec_guide .list_data_02{ font-size: 15px; line-height: 1.6; letter-spacing: 0.1em;}
.sec_guide .list_data_02 > div{ display: flex; border-bottom: solid 1px #595344; padding: 30px 0;}
.sec_guide .list_data_02 dt{ width: 14em;}
.sec_guide .list_data_02 dd{ width: calc( 100% - 14em );}
.sec_guide .list_data_03{ font-size: 15px; line-height: 2; letter-spacing: 0.1em; padding: 5px 0 0 ;}
.sec_guide .list_data_03 > div{ display: flex;}
.sec_guide .list_data_03 dt{ width: 12em;}
.sec_guide .list_data_03 dd{ width: calc( 100% - 12em );}
.sec_guide .list_data_03 dd::before{ content: "： ";}

@media screen and (max-width: 600px) {
.sec_guide{ padding: 40px 0 0;}
.sec_guide .tit_01{ padding: 0 0 20px;}
.sec_guide .sec_in{ padding: 10vw 5vw; margin-top: 20px; box-sizing: border-box;}
.sec_guide .tit_02{ display: flex; flex-direction: column; padding: 0 0 20px;}
.sec_guide .sec_in#facilities .tit_02{ padding: 0 0 10px;}
.sec_guide .tit_02 span{ display: block; line-height: 1.1;}
.sec_guide .tit_02 span.ja{ font-size: 15px; letter-spacing: 0.1em; font-weight: 500; padding: 0 0 10px;}
.sec_guide .tit_02 span.en{ font-size: 25px; letter-spacing: 0.15em; font-weight: 500;}
.sec_guide .box_wrap_01{ flex-direction: column;}
.sec_guide .box_wrap_01 .box_txt{ width: 100%; padding: 0 0 20px;}
.sec_guide .box_wrap_01 .box_img{ width: 100%; max-width: 100%;}
.sec_guide .list_data_01{ font-size: 15px; margin: 0 0 15px; letter-spacing: 0.1em;}
.sec_guide .list_data_01 > div{ flex-direction: column; padding: 0 0 10px;}
.sec_guide .list_data_01 dt,
.sec_guide .list_data_01 dd{ width: 100%;}
.sec_guide .txt_01{ font-size: 14px; line-height: 2;}
.sec_guide .list_note_01{ font-size: 14px; line-height: 1.6;}
.sec_guide .list_data_02{ font-size: 15px; line-height: 1.6;}
.sec_guide .list_data_02 > div{ flex-direction: column; padding: 15px 0;}
.sec_guide .list_data_02 dt{ width: 100%; font-size: 15px; font-weight: 700; padding: 0 0 5px;}
.sec_guide .list_data_02 dd{ width: 100%;}
.sec_guide .list_data_03{ font-size: 14px; line-height: 2; letter-spacing: 0.1em; padding: 5px 0 0 ;}
.sec_guide .list_data_03 dt{ width: 11em; font-size: 14px; font-weight: 500; padding: 0;}
.sec_guide .list_data_03 dd{ width: calc( 100% - 11em );}
}

/* ---------------------------------------------------
Section Access
------------------------------------------------------ */
.sec_access{ padding: 100px 0 150px; text-align-last: center;}
.sec_access .tit_01{ padding: 0 0 50px;}
.sec_access .txt_01{ font-size: 18px; line-height: 2; padding: 0 0 30px;}
.sec_access .box_gmap{ width: 1000px; height: 450px; margin: 0 auto; /*filter: grayscale(1);*/}
.sec_access .box_gmap iframe{ width: 100%; height: 100%;}
.sec_access .bnr_01{ padding: 30px 0 0;}
.sec_access .btn_01{ padding: 50px 0 0;}
.sec_access .btn_01 a{ margin: 0 auto;}
/*.sec_access .btn_01 a{ color: #23211e;}
.sec_access .btn_01 a.cmn_btn_02::after { background: #000;}*/

@media screen and (max-width: 600px) {
.sec_access{ padding: 40px 5% 80px;}
.sec_access .tit_01{ padding: 0 0 25px;}
.sec_access .txt_01{ font-size: 15px; line-height: 2; padding: 0 0 15px;}
.sec_access .box_gmap{ width: 100%; height: 250px;}
.sec_access .bnr_01{ padding: 20px 0 0;}
.sec_access .btn_01{ padding: 30px 0 0;}
/*.sec_access .btn_01{ padding: 20px 0 0; font-size: 16px;}*/
}