@charset "UTF-8";
/* ===================================================
Cuisine / Onsen / Guest room CSS
====================================================== */

/* ---------------------------------------------------
Section Lead
------------------------------------------------------ */
.sec_cuisine{ padding: 150px 0;}
.sec_cuisine .tit_01{ font-size: 38px; line-height: 1.2; padding: 0 0 30px; text-align: center; display: flex; flex-direction: column;}
.sec_cuisine .tit_01 span.ja{ font-size: 24px; padding: 10px 0 0;}
.sec_cuisine .tit_02{ font-size: 30px; line-height: 1.2; padding: 0 0 30px;}
.sec_cuisine .tit_03{ font-size: 20px; line-height: 1.2; padding: 0 0 10px; border-bottom: solid 1px rgba(255,255,255,0.5);}
.sec_cuisine .txt_01{ font-size: 16px; line-height: 1.7;}
.sec_cuisine .sec_01{ display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: flex-start; padding: 100px 0 0;}
.sec_cuisine .sec_01 .box_txt{ width: 54.1%;}
.sec_cuisine .sec_01 .box_img{ width: 41.6%; max-width: 500px;}
.sec_cuisine .sec_01 .box_img img{ width: 100%; height: auto;}
.sec_cuisine .sec_01 .sec_in{ background: #3e3e3e; padding: 30px; margin: 40px 0 0;}
.sec_cuisine .sec_01 .sec_in .txt_01{ padding: 10px 0 0;}
.sec_cuisine .sec_02{ padding: 150px 0 0; text-align: center;}
.sec_cuisine .sec_02 .box_seasons{ display: flex; justify-content: space-between; flex-wrap: wrap; margin: 70px 0 0;}
.sec_cuisine .sec_02 .box_seasons .box_slide{ width: 48.3%; max-width: 580px; margin: 0 0 80px;}
.sec_cuisine .sec_02 .box_seasons .box_slide .slide_01{ margin-bottom: 0!important; line-height: 0;}
.sec_cuisine .sec_02 .box_seasons .box_slide .cap{ font-size: 28px; line-height: 1.2; padding: 20px 0 0;}
.sec_cuisine .slick-dots{ bottom: 5px; right: 10px; text-align: right; width: calc( 100% - 20px );}
.sec_cuisine .sec_03{ padding: 80px 0 0; text-align: center;}
.sec_cuisine .sec_03 .img_03{ padding: 50px 0 90px;}
.sec_cuisine .sec_03 .sec_in{ background-image: url("../../contents/img/bg_deco_01.webp") , url("../../contents/img/bg_01.webp"); background-repeat: no-repeat , repeat; background-position: right -5px bottom -20px , center center; background-size: 240px , 255px; display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: center; text-align: left;}
.sec_cuisine .sec_03 .sec_in .box_txt{ width: 500px; margin: 0 auto;}
.sec_cuisine .sec_03 .sec_in .box_txt .tit_02{ padding: 0 0 30px; margin: 0 0 30px; border-bottom: solid 1px rgba(255,255,255,0.5);}
.sec_cuisine .sec_03 .sec_in .box_img{ width: 570px;}
.sec_cuisine .sec_03 .sec_in .box_img img{ width: 100%; height: auto;}

@media screen and (max-width: 600px) {
.sec_cuisine{ padding: 50px 0;}
.sec_cuisine .tit_01{ font-size: 26px; padding: 0 0 15px;}
.sec_cuisine .tit_02{ font-size: 22px; padding: 0 0 15px;}
.sec_cuisine .tit_03{ font-size: 19px; padding: 0 0 10px;}
.sec_cuisine .txt_01{ font-size: 15px;}
.sec_cuisine .sec_01{ flex-direction: column; padding: 50px 0 0;}
.sec_cuisine .sec_01 .box_txt{ width: 100%;}
.sec_cuisine .sec_01 .box_txt .tit_02{ text-align: center;}
.sec_cuisine .sec_01 .box_img{ width: 80%; max-width: 80%; margin: 0 auto;}
.sec_cuisine .sec_01 .sec_in{ padding: 5%; margin: 20px 0 40px;}
.sec_cuisine .sec_01 .sec_in .txt_01{ padding: 10px 0 0;}
.sec_cuisine .sec_02{ padding: 50px 0 0;}
.sec_cuisine .sec_02 .txt_01{ text-align: left;}
.sec_cuisine .sec_02 .box_seasons{ flex-direction: column; margin: 30px 0 0;}
.sec_cuisine .sec_02 .box_seasons .box_slide{ width: 100%; max-width: 100%; margin: 0 0 40px;}
.sec_cuisine .sec_02 .box_seasons .box_slide .cap{ font-size: 20px; padding: 10px 0 0;}
.sec_cuisine .sec_03{ padding: 20px 0 0;}
.sec_cuisine .sec_03 .txt_01{ text-align: left;}
.sec_cuisine .sec_03 .img_03{ padding: 20px 0 30px;}
.sec_cuisine .sec_03 .sec_in{ background-position: right top 10px , center center; background-size: 120px , 255px; flex-direction: column; transform: scale(-1, 1);}
.sec_cuisine .sec_03 .sec_in .box_txt{ width: 90%; margin: 0 auto; padding: 5% 0; transform: scale(-1, 1);}
.sec_cuisine .sec_03 .sec_in .box_txt .tit_02{ padding: 5% 0; margin: 0 0 5%; text-align: center;}
.sec_cuisine .sec_03 .sec_in .box_img{ width: 100%;}
}

/* ---------------------------------------------------
Section Onsen
------------------------------------------------------ */
.sec_onsen{ background-image: url("../../contents/img/bg_02.webp") , url("../../contents/img/bg_01.webp"); background-repeat: no-repeat , repeat; background-position: left bottom -20px , center center; background-size: 390px , 255px; padding: 150px 0 200px; text-align: center;}
.sec_onsen .tit_01{ font-size: 38px; line-height: 1.2; padding: 0 0 15px; display: flex; flex-direction: column;}
.sec_onsen .tit_01 span.ja{ font-size: 24px; padding: 10px 0 0;}
.sec_onsen .tit_02{ font-size: 30px; line-height: 1.2; padding: 0 0 30px;}
.sec_onsen .txt_01{ font-size: 16px; line-height: 1.7; padding: 25px 0 0; letter-spacing: 0.1em;}
.sec_onsen .txt_01 a{ text-decoration: underline;}
.sec_onsen .txt_01 a:hover{ text-decoration: none;}
.sec_onsen .sec_in{ padding: 100px 0 0;}
.sec_onsen .sec_in .time{ display: inline-block; background: #3e3e3e; padding: 5px 15px; text-align: left;}
.sec_onsen .sec_in .img{ padding: 40px 0 0;}
.sec_onsen .list_01 > div{ display: table; width: 100%;}
.sec_onsen .list_01 dt,
.sec_onsen .list_01 dd{ border-bottom: solid 1px #5d5d5d; padding: 20px; display: table-cell; vertical-align: top; box-sizing: border-box; text-align: left;}
.sec_onsen .list_01 dt{ background: #3e3e3e; width: 20em;}
.sec_onsen .list_01 dd{ width: calc( 100% - 20em );}

@media screen and (max-width: 600px) {
.sec_onsen{ background-size: 150px , 255px; padding: 50px 0 80px;}
.sec_onsen .tit_01{ font-size: 26px; padding: 0 0 10px;}
.sec_onsen .tit_02{ font-size: 20px; padding: 0 0 20px;}
.sec_onsen .txt_01{ font-size: 15px; padding: 20px 0 0; text-align: left;}
.sec_onsen .sec_in{ padding: 50px 0 0;}
.sec_onsen .sec_in .img{ padding: 20px 0 0;}
.sec_onsen .list_01 > div{ display: block; width: 100%;}
.sec_onsen .list_01 dt,
.sec_onsen .list_01 dd{ border-bottom: none; display: block;}
.sec_onsen .list_01 dt{ width: 100%; padding: 10px;}
.sec_onsen .list_01 dd{ width: 100%; padding: 10px 10px 20px;}
}

/* ---------------------------------------------------
Section Guest room
------------------------------------------------------ */
.sec_room{ padding: 150px 0 200px; text-align: center; background-image: url("../../contents/img/bg_deco_02.webp"); background-repeat: no-repeat; background-position: right -5px bottom -20px; background-size: 379px;}
.sec_room .tit_01{ font-size: 38px; line-height: 1.2; padding: 0 0 40px; display: flex; flex-direction: column;}
.sec_room .tit_01 span.ja{ font-size: 24px; padding: 10px 0 0;}
.sec_room .txt_01{ font-size: 16px; line-height: 1.7; padding: 50px 0; letter-spacing: 0.1em; text-align: left;}
.sec_room .box_rooms{ display: flex; justify-content: center; flex-wrap: wrap; width: 1240px; margin: 0 auto;}
.sec_room .box_rooms .box_room{ width: 580px; padding: 0 20px 50px; box-sizing: content-box;}
.sec_room .box_rooms .box_room a{ position: relative; display: block; overflow: hidden;}
.sec_room .box_rooms .box_room a p{ position: absolute; z-index: 2; display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; height: 100%; text-shadow: 0px 0px 4px rgba(0,0,0,1);}
.sec_room .box_rooms .box_room a span.type{ font-size: 20px; }
.sec_room .box_rooms .box_room a span.name{ font-size: 25px; }
.sec_room .box_rooms .box_room a span.name span.ja{ display: block; font-size: 18px;}
.sec_room .box_rooms .box_room a img{ position: relative; z-index: 1; opacity: 0.7; transition: all 0.5s;}
.sec_room .box_rooms .box_room a:hover img{ opacity: 1; transform: scale(1.05);}

@media screen and (max-width: 600px) {
.sec_room{ padding: 50px 0 100px; background-size: 100px;}
.sec_room .tit_01{ font-size: 26px; line-height: 1.2; padding: 0 0 40px;}
.sec_room .txt_01{ font-size: 15px; line-height: 1.7; padding: 20px 0 50px;}
.sec_room .box_rooms{ width: 90%;}
.sec_room .box_rooms .box_room{ width: 100%; padding: 0 0 50px;}
.sec_room .box_rooms .box_room a span.type{ font-size: 20px; }
.sec_room .box_rooms .box_room a span.name{ font-size: 25px; }
}

/* ---------------------------------------------------
Modal Window
------------------------------------------------------ */
.mfp-bg { opacity: 1!important; background: #000 url("../../contents/img/bg_01.webp")!important;}
.mfp-wrap { left: 0!important; overflow: auto!important; }
.popup-modal-dismiss { position: absolute; top: 0; right: 0; }
.popup-modal-dismiss:hover { cursor: pointer; }
.popup-modal-dismiss > span { position: relative; font-size: 0; display: block; width: 55px; height: 55px; }
.popup-modal-dismiss > span span::before,
.popup-modal-dismiss > span span::after { position: absolute; left: 50%; content: ''; display: block; width: 1px; height: 100%; background: #fff; }
.popup-modal-dismiss > span span::before { transform: rotate(45deg) translate(-50%,1px); }
.popup-modal-dismiss > span span::after { transform: rotate(-45deg) translateX(-50%); }
.ro_container { position: relative; min-width: 1200px; padding: 60px 0;}
.ro_container .tit{ text-align: center; padding: 0 0 40px;}
.ro_container .tit span{ display: flex; flex-direction: column;}
.ro_container .tit span.type{ font-size: 25px;}
.ro_container .tit span.name{ font-size: 30px;}
.ro_container .tit span.name span.ja{ font-size: 20px;}
.ro_container .wrap{ position: relative;}
.ro_container .slick { width: 677px; background: #000; line-height: 0;}
.ro_container .slick .ofi { min-height: 444px; }
.ro_container .box_01{ width: 100%; padding: 40px 0 0;}
.ro_container .box_02{ position: absolute; top: 0; right: 0; width: 490px; text-align: center;}
.ro_container .box_02 .list_01{ border: solid 1px #3e3e3e; display: table; width: 100%;}
.ro_container .box_02 .list_01 dt,
.ro_container .box_02 .list_01 dd{ padding: 15px 20px; display: table-cell; text-align: left;}
.ro_container .box_02 .list_01 dt{ width: 3.3em;}
.ro_container .box_02 .list_01 dd{ width: calc( 100% - 3.3em ); border-left: solid 1px #3e3e3e;}
.ro_container .box_02 .btn_01{ padding: 20px 0;}
.ro_container .box_02 .btn_01 a{ border-bottom: solid 1px #a9a9a9; padding: 0 0 1px;}
.ro_container .box_02 .btn_01 a:hover{ text-decoration: none; border-bottom: none;}
.ro_container .box_02 .btn_02{ padding: 20px 0 0;}
.ro_container .box_02 .btn_02 a{ background: #3e3e3e; padding: 25px 60px; color: #fff; font-size: 16px; transition: all 0.5s;}
.ro_container .box_02 .btn_02 a:hover{ background: #5D5D5D; text-decoration: none;}

@media screen and (max-width: 600px) {
.mfp-container { padding: 0; }
.popup-modal-dismiss { position: absolute; top: 10px; right: 0; }
.popup-modal-dismiss > span { width: 40px; height: 40px; }
.popup-modal-dismiss > span span::before,
.popup-modal-dismiss > span span::after { top: 50%; height: 85%; }
.popup-modal-dismiss > span span::before { transform: rotate(45deg) translate(-12px,-11px); }
.popup-modal-dismiss > span span::after { transform: rotate(-45deg) translate(11px,-12px); }
.ro_container { min-width: 0; max-width: 100%; padding: 70px 0 60px; }
.ro_container .tit{ text-align: center; padding: 0 0 20px;}
.ro_container .tit span{ display: flex; flex-direction: column;}
.ro_container .tit span.type{ font-size: 20px;}
.ro_container .tit span.name{ font-size: 26px;}
.ro_container .wrap{ position: relative;}
.ro_container .slick { width: 100%; }
.ro_container .slick .ofi { min-height: 222px;}
.ro_container .box_01{ padding: 30px 0;}
.ro_container .box_02{ position: static; width: 100%;}
.ro_container .box_02 .list_01{ border: solid 1px #3e3e3e; display: table; width: 100%;}
.ro_container .box_02 .list_01 dt,
.ro_container .box_02 .list_01 dd{ padding: 10px 15px;}
.ro_container .box_02 .btn_01{ padding: 20px 0;}
.ro_container .box_02 .btn_02{ padding: 20px 0 0;}
}