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

#contents_wrap{ background: #f3efe9;}

/* ---------------------------------------------------
Box Local Navigation
------------------------------------------------------ */
.box_lnav{ text-align: center; padding: 100px 0;}
.box_lnav .lnav{ display: flex; justify-content: center; align-items: stretch;}
.box_lnav .lnav li{ width: 290px; margin: 0 5px;}
.box_lnav .lnav li a{ display: flex; justify-content: center; align-items: center; font-size: 18px; line-height: 1.6; height: 100px; width: 100%; border-top: solid 3px #dfd6d1; position: relative; padding: 0 0 10px;}
.box_lnav .lnav li a::after{ content: ""; display: block; width: 8px; height: 8px; border-bottom: solid 3px #dfd6d1; border-right: solid 3px #dfd6d1; transform: rotate(45deg); position: absolute; bottom: 15px; left: 0; right: 0; margin: 0 auto; transition: bottom 0.5s;}
.box_lnav .lnav li a:hover{ text-decoration: none;}
.box_lnav .lnav li a:hover::after{ bottom: 10px;}

@media screen and (max-width: 600px) {
.box_lnav{ padding: 30px 0;}
.box_lnav .lnav{ flex-direction: column; width: 90%; margin: 0 auto; border-bottom: solid 1px #dfd6d1;}
.box_lnav .lnav li{ width: 100%; margin: 0;}
.box_lnav .lnav li a{ font-size: 16px; line-height: 1.4; height: 60px; border-top: solid 1px #dfd6d1; padding: 0;}
.box_lnav .lnav li a::after{ width: 8px; height: 8px; border-bottom: solid 2px #dfd6d1; border-right: solid 2px #dfd6d1; top: 0; bottom: 0; left: inherit; right: 15px; margin: auto 0;}
.box_lnav .lnav li a:hover::after{ bottom: 3px;}
}

/* ---------------------------------------------------
Slide Type01
------------------------------------------------------ */
.slide_01 .slick-list{ width: 100%; margin: 0;}
.slide_01 .slick-slide{ margin: 0 8px; position: relative; line-height: 0;}
.slide_01 .cap{ position: absolute; bottom: 0; right: 0; background: #fff; font-size: 16px; line-height: 1.5; padding: 10px 15px; z-index: 2;}
.slide_01 .slick-slide img{ width: 100%; height: auto; position: relative; z-index: 1;}
.slide_01 .slick-dots{ text-align: left; bottom: -30px;}

@media screen and (max-width: 600px) {
.slide_01 .slick-list{ width: 100%; margin: 0 auto;}
.slide_01 .slick-slide{ margin: 0; position: relative;}
.slide_01 .cap{ position: absolute; bottom: 0; right: 0; background: #fff; font-size: 14px; line-height: 1.5; padding: 10px 15px; z-index: 2;}
.slide_01 .slick-dots{ text-align: center;}
}

/* ---------------------------------------------------
Section Note
------------------------------------------------------ */
.sec_note{ background: #f3efe9; padding: 70px; box-sizing: border-box;}
.sec_note .tit_03{ font-size: 22px; line-height: 1.4; padding: 0 0 10px;}
.sec_note .note_02{ font-size: 14px; line-height: 1.7; color:rgba(96,50,25,0.7);}
.sec_note .note_02:last-of-type{ padding: 1em 0 0;}

@media screen and (max-width: 600px) {
.sec_note{ padding: 5%;}
.sec_note .tit_03{ font-size: 18px; line-height: 1.4; padding: 0;}
.sec_note .note_02{ font-size: 13px; line-height: 1.7;}
}

/* ---------------------------------------------------
Section Meal
------------------------------------------------------ */
.sec_meal{ background: #fff url("../../contents/img/bg_01.webp") no-repeat; background-position: calc( 50% + 100px ) calc( 0% + 550px ); padding: 0 0 150px;}
.sec_meal .img_01{ width: 100%;}
.sec_meal .img_01 img{ width: 100%; height: 600px; object-fit: cover;}
.sec_meal .tit_01{ font-size: 60px; line-height: 1.1; color: #d08383; letter-spacing: 0.05em; padding: 90px 0 30px; text-align: center;}
.sec_meal .txt_01{ font-size: 16px; line-height: 1.9; text-align: center; padding: 0 0 100px;}
.sec_meal .sec_in{ display: flex; justify-content: space-between; align-items: center; flex-direction: row-reverse; margin: 0 auto 100px;}
.sec_meal .sec_in:nth-of-type(2n){ flex-direction: row;}
.sec_meal .box_imgs{ width: 800px; max-width: 66.6%;}
.sec_meal .box_txt{ width: 350px; max-width: 29.1%;}
.sec_meal .tit_02{ font-size: 32px; line-height: 1.1; padding: 0 0 40px;}
.sec_meal .txt_02{ font-size: 16px; line-height: 1.9;}
.sec_meal .txt_03{ font-size: 16px; line-height: 1.9; padding: 2em 0 0; font-weight: 600;}
.sec_meal .note_01{ font-size: 14px; line-height: 1.9; color:rgba(96,50,25,0.7);}

@media screen and (max-width: 600px) {
.sec_meal{ background-position: calc( 50% + 100px ) calc( 0% + 150px ); padding: 0 0 50px;}
.sec_meal .img_01 img{ height: 250px;}
.sec_meal .tit_01{ font-size: 30px; line-height: 1.1; letter-spacing: 0.05em; padding: 40px 0 20px; text-align: center;}
.sec_meal .txt_01{ font-size: 15px; line-height: 1.7; text-align: left; padding: 0 5% 30px;}
.sec_meal .sec_in{ flex-direction: column; margin: 0 auto 40px;}
.sec_meal .sec_in:nth-of-type(2n){ flex-direction: column;}
.sec_meal .box_imgs{ width: 100%; max-width: 100%;}
.sec_meal .box_txt{ width: 100%; max-width: 100%; padding: 20px 0 0;}
.sec_meal .tit_02{ font-size: 24px; line-height: 1.1; padding: 0 0 10px;}
.sec_meal .txt_02{ font-size: 15px; line-height: 1.7;}
.sec_meal .txt_03{ font-size: 15px; line-height: 1.7; padding: 1em 0 0; font-weight: 600;}
.sec_meal .note_01{ font-size: 13px; line-height: 1.7;}
}

/* ---------------------------------------------------
Section Onsen
------------------------------------------------------ */
.sec_onsen{ background: url("../../contents/img/bg_01.webp") no-repeat; background-position: calc( 50% + 100px ) calc( 0% + 550px ); padding: 0 0 150px;}
.sec_onsen .img_01{ width: 100%;}
.sec_onsen .img_01 img{ width: 100%; height: 600px; object-fit: cover;}
.sec_onsen .tit_01{ font-size: 60px; line-height: 1.1; color: #d08383; letter-spacing: 0.05em; padding: 90px 0 30px; text-align: center;}
.sec_onsen .txt_01{ font-size: 16px; line-height: 1.9; text-align: center; padding: 0 0 100px;}
.sec_onsen .sec_in{ display: flex; justify-content: space-between; align-items: center; flex-direction: row-reverse; margin: 0 auto 100px;}
.sec_onsen .sec_in:nth-of-type(2n){ flex-direction: row;}
.sec_onsen .box_imgs{ width: 800px; max-width: 66.6%;}
.sec_onsen .box_txt{ width: 350px; max-width: 29.1%;}
.sec_onsen .tit_02{ font-size: 32px; line-height: 1.4; padding: 0 0 15px;}
.sec_onsen .txt_02{ font-size: 16px; line-height: 1.1; color:rgba(96,50,25,0.7); padding: 0 0 30px;}
.sec_onsen .txt_03{ font-size: 16px; line-height: 1.9;}
.sec_onsen .txt_04{ font-size: 16px; line-height: 1.9; padding: 2em 0 0; font-weight: 600;}
.sec_onsen .sec_note{ background: #e8e2d9;}

@media screen and (max-width: 600px) {
.sec_onsen{ background-position: calc( 50% + 100px ) calc( 0% + 150px ); padding: 0 0 50px;}
.sec_onsen .img_01 img{ height: 250px;}
.sec_onsen .tit_01{ font-size: 30px; line-height: 1.1; letter-spacing: 0.05em; padding: 40px 0 20px; text-align: center;}
.sec_onsen .txt_01{ font-size: 15px; line-height: 1.7; text-align: left; padding: 0 5% 30px;}
.sec_onsen .sec_in{ flex-direction: column; margin: 0 auto 40px;}
.sec_onsen .sec_in:nth-of-type(2n){ flex-direction: column;}
.sec_onsen .box_imgs{ width: 100%; max-width: 100%;}
.sec_onsen .box_txt{ width: 100%; max-width: 100%; padding: 20px 0 0;}
.sec_onsen .tit_02{ font-size: 24px; line-height: 1.4; padding: 0;}
.sec_onsen .txt_02{ font-size: 15px; line-height: 1.7; padding: 0 0 10px;}
.sec_onsen .txt_03{ font-size: 15px; line-height: 1.7;}
.sec_onsen .txt_04{ font-size: 15px; line-height: 1.7; padding: 1em 0 0; font-weight: 600;}
}

/* ---------------------------------------------------
Section Rooms
------------------------------------------------------ */
.sec_rooms{ background: #fff url("../../contents/img/bg_01.webp") no-repeat; background-position: calc( 50% + 100px ) calc( 0% + 550px ); padding: 0 0 150px;}
.sec_rooms .img_01{ width: 100%;}
.sec_rooms .img_01 img{ width: 100%; height: 600px; object-fit: cover;}
.sec_rooms .tit_01{ font-size: 60px; line-height: 1.1; color: #d08383; letter-spacing: 0.05em; padding: 90px 0 30px; text-align: center;}
.sec_rooms .txt_01{ font-size: 16px; line-height: 1.9; text-align: center; padding: 0 0 100px;}
.sec_rooms .list_data{ border-top: solid 1px #dad0c8;}
.sec_rooms .list_data:last-of-type{ border-bottom: solid 1px #dad0c8; margin: 0 auto 100px;}
.sec_rooms .box_tit{ padding: 30px 0; font-size: 28px; line-height: 1.4; position: relative;}
.sec_rooms .box_tit.active{ border-top: solid 1px #dad0c8;}
.sec_rooms .box_tit::after{ content: ""; display: block; width: 10px; height: 10px; border-bottom: solid 2px #603219; border-right: solid 2px #603219; transform: rotate(45deg); position: absolute; top: 0; bottom: 0; right: 20px; margin: auto 0; transition: transform 0.5s;}
.sec_rooms .box_tit.active::after{ transform: rotate(-135deg);}
/*.sec_rooms .acc_contents{ display: none;}*/
.sec_rooms .box_body{ display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap; padding: 0 0 20px;}
.sec_rooms .box_room{ width: 48%; max-width: 580px; margin: 0 0 40px; background: #f3efe9;}
.sec_rooms .box_room:nth-of-type(2n){ margin: 0 0 40px 40px;}
.sec_rooms .box_img{ width: 100%;}
.sec_rooms .box_img img{ width: 100%; height: auto;}
.sec_rooms .box_txt{ padding: 30px; display: flex; flex-wrap: wrap; justify-content: space-between;}
.sec_rooms .txt_02,
.sec_rooms .tit_02,
.sec_rooms .txt_03,
.sec_rooms .txt_04{ width: 100%; display: block; line-height: 1.7;}
.sec_rooms .txt_02{ font-size: 14px;}
.sec_rooms .tit_02{ font-size: 24px;}
.sec_rooms .txt_03{ font-size: 16px; padding: 0 0 1em;}
.sec_rooms .txt_04{ font-size: 14px; padding: 0 0 1em;}
.sec_rooms .btn_01{ width: 49%; height: 50px; background: #9b7e6c; color: #fff; font-size: 16px; line-height: 50px; text-align: center;}

.sec_rooms .btn_02{ width: 100%; background: #9b7e6c; color: #fff; font-size: 16px; line-height: 1.4; padding: 10px; text-align: center; margin: 0 0 10px;}

.sec_rooms .box_body .note{ width: 100%; display: block; font-size: 14px; line-height: 1.7; color: rgba(96,50,25,0.7);}
.sec_rooms .box_body .note:last-of-type{ padding: 0 0 40px;}
.sec_rooms .note_02{ padding: 15px 0 0; font-size: 14px; line-height: 1.7; color: rgba(96,50,25,0.7);}

@media screen and (max-width: 600px) {
.sec_rooms{ background-position: calc( 50% + 100px ) calc( 0% + 150px ); padding: 0 0 30px;}
.sec_rooms .img_01 img{ height: 250px;}
.sec_rooms .tit_01{ font-size: 30px; line-height: 1.1; letter-spacing: 0.05em; padding: 40px 0 20px; text-align: center;}
.sec_rooms .txt_01{ font-size: 15px; line-height: 1.7; text-align: left; padding: 0 5% 30px;}
.sec_rooms .list_data:last-of-type{ margin: 0 auto 30px;}
.sec_rooms .box_tit{ padding: 20px; font-size: 18px;}
.sec_rooms .box_tit::after{ width: 7px; height: 7px; border-bottom: solid 1px #603219; border-right: solid 1px #603219;}
.sec_rooms .box_room{ width: 100%; max-width: 100%; margin: 0 0 20px;}
.sec_rooms .box_room:nth-of-type(2n){ margin: 0 0 20px;}
.sec_rooms .box_txt{ padding: 8%;}
.sec_rooms .txt_02{ font-size: 13px;}
.sec_rooms .tit_02{ font-size: 22px;}
.sec_rooms .txt_03{ font-size: 15px; padding: 0 0 1em;}
.sec_rooms .txt_04{ font-size: 13px; padding: 0 0 1em;}
.sec_rooms .btn_01{ width: 100%; font-size: 15px;}
.sec_rooms .btn_01:nth-of-type(n+2){ margin: 10px 0 0;}
.sec_rooms .box_body .note{ font-size: 14px;}
.sec_rooms .box_body .note:last-of-type{ padding: 0 0 20px;}
.sec_rooms .note_02{ padding: 15px 0 0; font-size: 14px;}
}

/* ---------------------------------------------------
Section Facility
------------------------------------------------------ */
.sec_facility{ padding: 0 0 150px;}
.sec_facility .img_01{ width: 100%;}
.sec_facility .img_01 img{ width: 100%; height: 600px; object-fit: cover;}
.sec_facility .tit_01{ font-size: 40px; line-height: 1.1; letter-spacing: 0.05em; padding: 100px 0 50px; text-align: center;}
.sec_facility .box_facilities{ display: flex; justify-content: space-between; flex-wrap: wrap; padding: 0 0 60px;}
.sec_facility .box_facilities > div{ width: 30.8%; max-width: 370px; margin: 0 0 45px;}
.sec_facility .box_facilities > div > img{ width: 100%; height: auto;}
.sec_facility .box_facilities > div > span{ font-size: 16px; line-height: 1.4; color: rgba(96,50,25,0.7); padding: 10px 0 0; display: block;}
.sec_facility .list_01{ border-top: solid 1px #d6c9bf;}
.sec_facility .list_01 > div{ border-bottom: solid 1px #d6c9bf; display: flex; width: 100%;}
.sec_facility .list_01 dt,
.sec_facility .list_01 dd{ padding: 20px 30px; box-sizing: border-box;}
.sec_facility .list_01 dt{ width: 17.5%; background: rgba(255,255,255,0.6); font-weight: bold;}
.sec_facility .list_01 dd{ width: 82.5%; padding: 20px 40px;}
.sec_facility .list_02 li{ padding: 0 0 0 0.5em; text-indent: -0.5em;}
.sec_facility .list_02 li::before{ content: "・";}
.sec_facility .time{ color:rgba(96,50,25,0.7); padding: 0 0 0 1em;}

@media screen and (max-width: 600px) {
.sec_facility{ padding: 0 0 50px;}
.sec_facility .img_01 img{ height: 250px;}
.sec_facility .tit_01{ font-size: 24px; line-height: 1.1; letter-spacing: 0.05em; padding: 40px 0 40px; text-align: center;}
.sec_facility .box_facilities{ padding: 0 0 20px;}
.sec_facility .box_facilities > div{ width: 48%; max-width: 48%; margin: 0 0 20px;}
.sec_facility .box_facilities > div > span{ font-size: 14px; line-height: 1.4; padding: 10px 0 0;}
.sec_facility .list_01 > div{ flex-direction: column; width: 100%;}
.sec_facility .list_01 dt,
.sec_facility .list_01 dd{ padding: 10px 15px;}
.sec_facility .list_01 dt{ width: 100%;}
.sec_facility .list_01 dd{ width: 100%; padding: 10px 15px;}
}