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

/* ---------------------------------------------------
	#main_img
------------------------------------------------------ */
#main_img { line-height: 0; counter-reset: point-num 0; position: relative;}
#main_img .slick,
#main_img .slick img { height: 100vh; min-height: 480px; }
#main_img .slick img { object-fit: cover; }
#main_img .slick .active img { transform: scale(1.1); transition: transform 8s linear;}
#main_img .slick { opacity: 0; transition: opacity 0.3s ease; height: 0; overflow: hidden; }
#main_img .slick.slick-initialized { opacity: 1; height: auto; overflow: visible; }

#main_img .tit{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
#main_img .scroll { display: block; width: 84px; height: 84px; position: absolute; z-index: 1; bottom: 0; left: calc(50% - 42px); overflow: hidden;}
#main_img .scroll::before { content: ''; display: block; width: 1px; height: 100%; background: rgba(255, 255, 255, .5); position: absolute; left: 50%;}
#main_img .scroll::after { content: ''; display: block; width: 1px; height: 100%; background: #fff; position: absolute; left: 50%; top: 0; -webkit-animation: main_scroll cubic-bezier(0.645,0.045,0.355,1) 2s infinite; animation: main_scroll cubic-bezier(0.645,0.045,0.355,1) 2s infinite; }

@media screen and (max-width: 600px) {
#main_img .slick img { transform: scale(1.1); }
#main_img .slick .active img { transform: scale(1.2);}
}

@keyframes main_scroll {
0% { transform: scaleY(0); transform-origin: top;}
50% { transform: scaleY(1);}
100% { transform: scaleY(0); transform-origin: bottom;}
}

/* ---------------------------------------------------
Section Best Rate
------------------------------------------------------ */
.sec_bestrate{ display: flex; justify-content: center; align-items: center; padding: 50px 0 40px;}
.sec_bestrate .mark{ padding: 0 20px 0 0;}
.sec_bestrate .box_in{ text-align: center;}
.sec_bestrate .tit{ font-size: 26px;}
.sec_bestrate .tit em{ font-size: 36px; font-style: normal;}
.sec_bestrate .txt{ font-size: 20px;}

@media screen and (max-width: 600px) {
.sec_bestrate{ flex-direction: column; padding: 40px 0;}
.sec_bestrate .mark{ padding: 0 0 10px 0;}
.sec_bestrate .tit{ font-size: 16px;}
.sec_bestrate .tit em{ font-size: 26px;}
.sec_bestrate .txt{ font-size: 14px;}
}

/* ---------------------------------------------------
Section 489ban Search
------------------------------------------------------ */
.sec_489ban_search{ padding: 0 0 100px;}
.sec_489ban_search .box_in{ border: solid 1px #dedede; background-color: #f2f2f2; display: flex; justify-content: space-between; align-items: flex-start; padding: 20px 55px 40px;}
.sec_489ban_search .tit{ width: 14.5%; font-size: 20px; line-height: 1; padding: 15px 0 15px 30px; margin: 26px 0 0 0; background: url(../img/ico_loupe_01.svg) no-repeat left center; background-size: 20px; border-right: solid 1px #dedede;}
.sec_489ban_search #search_489ban{ width: 77%;}
.sec_489ban_search #search_489ban form{ width: 100%; display: flex; justify-content: space-between; align-items: flex-start;}
.sec_489ban_search #search_489ban .date_489ban dd{ display: flex; align-items: center;}
.sec_489ban_search #search_489ban .date_489ban dt,
.sec_489ban_search #search_489ban .stay_489ban dt{ height: 26px; color: #a7abaa; font-size: 15px; line-height: 1;}
.sec_489ban_search #search_489ban input[type="text"] { width: 220px; height: 54px; margin: 0 20px 0 0; padding: 10px 20px; border: none; border-bottom: solid 1px #cfcfcf; border-radius: 0; outline: none; background: url(../img/ico_cal_01.webp) no-repeat right 10px center #fff; background-size: 18px; font-size: 20px; font-family: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif; box-sizing: border-box; color: #181818; }
.sec_489ban_search #search_489ban input:disabled{ color: #ccc;}
.sec_489ban_search #search_489ban input[ type="checkbox"] { appearance: none; height: 16px; width: 16px; margin: 0 5px 3px 0; border: 1px solid #a7abaa; background-color: #fff; border-radius: 0; position: relative; }
.sec_489ban_search #search_489ban input[ type="checkbox"]:checked { border: 1px solid #a7abaa; background-color: #112d26; }
.sec_489ban_search #search_489ban input[ type="checkbox"]:checked::before { content: ""; display: block; width: 10px; height: 5px; border-bottom: solid 2px #fff; border-left: solid 2px #fff; transform: rotate(-45deg); position: absolute; top: 0; right: 0; left: 0; margin: 2px auto; }
.sec_489ban_search #search_489ban input[ type="checkbox"]:focus-visible { outline: 2px solid #1d9bf0; outline-offset: 2px; }
.sec_489ban_search #search_489ban select{ -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none; border-radius:0; border: none; border-bottom: solid 1px #cfcfcf; width: 170px; height: 54px; padding: 10px 20px; background: url(../img/ico_select_01.webp) no-repeat right 10px center #fff; background-size: 30px; font-size: 20px; font-family: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif; box-sizing: border-box; color: #181818; }
.sec_489ban_search #search_489ban select::-ms-expand {	display: none;}
.sec_489ban_search #search_489ban button{ display: flex; justify-content: center; align-items: center; width: 30%; height: 54px; background-color: #112d26; color: #fff; font-size: 18px; transition: all 0.5s; margin: 26px 0 0; border-radius: 0; -webkit-box-sizing: content-box; -webkit-appearance: button; appearance: button; border: none; box-sizing: border-box; cursor: pointer; outline:none; font-family: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif; }
.sec_489ban_search #search_489ban button:hover{ background-color: #395c54; font-size: 16px; text-decoration: none;}
.sec_489ban_search .btns{ display: flex; justify-content: center; align-items: flex-start; padding: 15px 0 0;}
.sec_489ban_search .btns li{ display: inline-block; margin: 0 30px 15px 20px;}
.sec_489ban_search .btns li a{ position: relative; box-sizing: border-box;}
.sec_489ban_search .btns li a::after{ content: ""; display: block; width: 6px; height: 6px; border-right: solid 1px #181818; border-bottom: solid 1px #181818; position: absolute; top: 8px; left: -15px; transform: rotate(-45deg);}

.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight{ background-color: #8e9d9a !important;}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover{ background-color: #112d26 !important;}

@media screen and (max-width: 600px) {
.sec_489ban_search{ padding: 0 0 50px;}
.sec_489ban_search .box_in{ flex-direction: column; padding: 5%;}
.sec_489ban_search .tit{ width: 100%; font-size: 20px; line-height: 1; padding: 5px 0 15px 0; margin: 0 0 15px; background: url(../img/ico_loupe_01.svg) no-repeat; background-position: calc( 50% - 3em ) 5px; background-size: 20px; border-right: none; border-bottom: solid 1px #dedede; text-align: center; box-sizing: border-box;}
.sec_489ban_search #search_489ban{ width: 100%;}
.sec_489ban_search #search_489ban form{ flex-wrap: wrap;}
.sec_489ban_search #search_489ban .date_489ban{ width: 57%;}
.sec_489ban_search #search_489ban .inbox_489ban{ width: 40%;}
.sec_489ban_search #search_489ban .date_489ban dd{ align-items: flex-start; flex-direction: column;}
.sec_489ban_search #search_489ban .date_489ban dt,
.sec_489ban_search #search_489ban .stay_489ban dt{ height: 26px; font-size: 14px; line-height: 1;}
.sec_489ban_search #search_489ban input[type="text"] { width: 100%; height: 40px; margin: 0 0 10px; padding: 10px; border: none; border-bottom: solid 1px #cfcfcf; background: url(../img/ico_cal_01.webp) no-repeat right 10px center #fff; background-size: 16px; font-size: 16px; }
.sec_489ban_search #search_489ban select{ width: 100%; height: 40px; padding: 10px; background: url(../img/ico_select_01.webp) no-repeat right 10px center #fff; background-size: 20px; font-size: 16px; }
.sec_489ban_search #search_489ban select::-ms-expand {	display: none;}
.sec_489ban_search #search_489ban button{ width: 100%; height: 40px; font-size: 16px; margin: 15px 0 0; }
.sec_489ban_search #search_489ban button:hover{ font-size: 14px;}
.sec_489ban_search .btns{ flex-direction: column; padding: 15px 5% 0;}
.sec_489ban_search .btns li{ margin: 0 0 10px 20px;}
}

/* ---------------------------------------------------
Section Introduction
------------------------------------------------------ */
.sec_intro{ width: 100%; /* min-height: 1380px; */ padding: 0 0 700px; position: relative; background: url(../../img/intro_bg_01.webp) no-repeat right bottom; background-size: 460px;}
.sec_intro .box_01{ width: 520px; margin: 0 55% 150px auto; padding: 80px 0 0 70px; position: relative;}
.sec_intro .box_01 .en{ position: absolute; top: 90px; left: 0; transform: rotate(90deg); transform-origin: left top; color: #a7abaa; letter-spacing: 0.14em;}
.sec_intro .box_01 .tit{ font-size: 40px; line-height: 1.35; padding: 0 0 50px;}
.sec_intro .box_01 .txt{ font-size: 15px; line-height: 1.6; padding: 0 0 1.6em;}
.sec_intro .box_01 .btn{ margin: 30px 0 0;}
.sec_intro img{ width: 100%; height: auto;}
.sec_intro .img_01{ width: 50%; position: absolute; top: 0; right: 0;}
.sec_intro .img_01 img{ height: 750px;}
.sec_intro .img_02{ width: 470px; position: absolute; top: 680px; right: 50%; margin: 0 130px 0 0;}
.sec_intro .img_03{ width: 295px; position: absolute; top: 840px; right: 50%; margin: 0 -220px 0 0;}

@media screen and (max-width: 600px) {
.sec_intro{ min-height: auto; padding: 0 0 90px; background: url(../../img/intro_bg_01.webp) no-repeat right bottom; background-size: 50%; display: flex; flex-direction: column;}
.sec_intro .box_01{ width: 90%; margin: 0 auto; padding: 40px 0; order: 2;}
.sec_intro .box_01 .en{ position: static; transform: rotate(0deg); font-size: 13px; padding: 0 0 10px;}
.sec_intro .box_01 .tit{ font-size: 26px; line-height: 1.5; padding: 0 0 30px;}
.sec_intro .box_01 .txt{ font-size: 15px; line-height: 1.7; padding: 0 0 1.7em;}
.sec_intro .box_01 .btn{ margin: 15px 0 0;}
.sec_intro .img_01{ width: 95%; margin: 0 0 0 auto; position: relative; top: auto; right: auto; order: 1;}
.sec_intro .img_01 img{ height: auto;}
.sec_intro .img_02{ width: 70%; position: relative; top: auto; right: auto; margin: 0 5% 0 auto; order: 3;}
.sec_intro .img_03{ width: 50%; position: relative; top: auto; right: auto; margin: 30px auto 0 5%; order: 4;}
}

/* ---------------------------------------------------
Section Rooms
------------------------------------------------------ */
.sec_rooms{ padding: 0 0 60px; background: url(../../img/rooms_bg_01.webp) no-repeat; background-position: calc( 50% + 375px ) bottom; background-size: 586px;}
.sec_rooms .box_main_img{ width: 100%; position: relative;}
.sec_rooms .box_main_img::after{ content: ""; display: block; width: 50%; height: 100%; background: linear-gradient(-90deg,rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0) 100%); position: absolute; top: 0; right: 0; z-index: 2;}
.sec_rooms .box_main_img img{ width: 100%; height: auto; position: relative; z-index: 1;}
.sec_rooms .box_main_img .copy{ position: absolute; top: 0; right: 10%; z-index: 3; border-right: solid 1px #fff; padding: 50px 15px 0 0; display: block;}
.sec_rooms .box_main_img .copy span{ font-size: clamp(30px, 2.5vw, 50px); color: #fff; display: block; width: 1em; line-height: 1;}
.sec_rooms .box_lead{ padding: 0 0 80px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start;}
.sec_rooms .box_lead .tit{ width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; padding: 60px 0 30px;}
.sec_rooms .box_lead .tit span.en{ font-size: 24px; letter-spacing: 0.18em; line-height: 1; color: #a7abaa; padding: 0 0 5px;}
.sec_rooms .box_lead .tit span.ja{ font-size: 62px;}
.sec_rooms .box_lead .txt{ line-height: 1.9;}
.sec_rooms .box_lead .btn{ margin: 0 0 0 auto;}
.sec_rooms .sec_type{ padding: 0 0 50px; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
.sec_rooms .sec_type .tit{ display: flex; justify-content: flex-end; align-items: baseline; flex-direction: row-reverse; width: 100%; padding: 0 0 10px;}
.sec_rooms .sec_type .tit span.en{ font-size: 18px; color: #a7abaa; padding: 0 0 0 10px;}
.sec_rooms .sec_type .tit span.ja{ font-size: 30px;}
.sec_rooms .sec_type .box_room{ width: 32.5%; margin: 0 1.25% 1.25% 0; background-color: #fff; box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.2); position: relative;}
.sec_rooms .sec_type .box_room:nth-of-type(3n){ margin: 0 0 1.25% 0;}
.sec_rooms .sec_type .box_room::before{ content: ""; display: block; width: 50px; height: 1px; background-color: #1a3c34; position: absolute; bottom: 0; left: 0; transition: width 0.5s;}
.sec_rooms .sec_type .box_room a:hover{ text-decoration: none;}
.sec_rooms .sec_type .box_room:hover::before{ width: 100%;}
.sec_rooms .sec_type .box_room img{ transition: filter 0.5s;}
.sec_rooms .sec_type .box_room:hover img{ filter: brightness(1.3);}
.sec_rooms .sec_type .box_room .name{ padding: 10px 15px 0 15px; font-size: 20px;}
.sec_rooms .sec_type .box_room .name small{ padding: 0 5px 0 0; font-size: 15px;}
.sec_rooms .sec_type .box_room .spec{ padding: 0 15px 10px 15px; font-size: 15px;}

@media screen and (max-width: 600px) {
.sec_rooms{ padding: 0; background: url(../../img/rooms_bg_01.webp) no-repeat; background-position: right bottom; background-size: 70%;}
/* .sec_rooms .box_main_img img{ width: 100%; height: 250px; object-fit: cover;} */
.sec_rooms .box_main_img .copy{ right: 5%; padding: 20px 8px 0 0;}
.sec_rooms .box_main_img .copy span{ font-size: 20px; width: 2.8em; line-height: 1.4;}
.sec_rooms .box_lead{ padding: 0 0 40px;}
.sec_rooms .box_lead .tit{ padding: 30px 0 15px;}
.sec_rooms .box_lead .tit span.en{ font-size: 13px; line-height: 1; padding: 0 0 5px;}
.sec_rooms .box_lead .tit span.ja{ font-size: 28px;}
.sec_rooms .box_lead .txt{ line-height: 1.7;}
.sec_rooms .box_lead .btn{ margin: 20px 0 0 0;}
.sec_rooms .sec_type{ padding: 0 0 30px; justify-content: space-between;}
.sec_rooms .sec_type .tit{ flex-direction: column; padding: 0 0 10px;}
.sec_rooms .sec_type .tit span.ja{ font-size: 18px;}
.sec_rooms .sec_type .tit span.en{ font-size: 12px; line-height: 1; padding: 0 0 5px 0;}
.sec_rooms .sec_type .box_room{ width: 100%; margin: 0 0 15px 0;}
.sec_rooms .sec_type#type_02 .box_room,
.sec_rooms .sec_type#type_03 .box_room{ width: 48%;}
.sec_rooms .sec_type .box_room:nth-of-type(3n){ margin: 0 0 15px 0;}
.sec_rooms .sec_type .box_room img{ width: 100%; height: 220px; object-fit: cover;}
.sec_rooms .sec_type#type_02 .box_room img,
.sec_rooms .sec_type#type_03 .box_room img{ height: 110px;}
.sec_rooms .sec_type .box_room .name{ padding: 10px 10px 0 10px; font-size: 16px;}
.sec_rooms .sec_type .box_room .name small{ padding: 0 5px 0 0; font-size: 13px;}
.sec_rooms .sec_type .box_room .spec{ padding: 0 10px 10px 10px; font-size: 12px;}
}

/* ---------------------------------------------------
Section Hotspring
------------------------------------------------------ */
.sec_hotspring{ padding: 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start;}
.sec_hotspring .box_main_img{ width: 100%; position: relative; order: 1;}
.sec_hotspring .box_main_img::after{ content: ""; display: block; width: 50%; height: 100%; background: linear-gradient(90deg,rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0) 100%); position: absolute; top: 0; left: 0; z-index: 2;}
.sec_hotspring .box_main_img img{ width: 100%; height: auto; position: relative; z-index: 1;}
.sec_hotspring .box_main_img .copy{ position: absolute; top: 0; left: 10%; z-index: 3; border-right: solid 1px #fff; padding: 50px 15px 0 0; display: block;}
.sec_hotspring .box_main_img .copy span{ font-size: clamp(30px, 2.5vw, 50px); color: #fff; display: block; width: 2.8em; line-height: 1.4;}
.sec_hotspring .box_txt{ width: 400px; margin: 0 auto 0 180px; padding: 100px 0 190px; order: 3;}
.sec_hotspring .box_txt .tit{ width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; padding: 60px 0 30px;}
.sec_hotspring .box_txt .tit span.en{ font-size: 24px; letter-spacing: 0.18em; line-height: 1; color: #a7abaa; padding: 0 0 5px;}
.sec_hotspring .box_txt .tit span.ja{ font-size: 62px;}
.sec_hotspring .box_txt .txt{ line-height: 1.9;}
.sec_hotspring .box_txt .btn{ margin: 30px 0 0;}
.sec_hotspring .box_imgs{ width: 50%; order: 2; position: relative;}
.sec_hotspring .box_imgs img{ width: 100%; height: auto;}
.sec_hotspring .box_imgs::after{ content: ""; position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 440px; background-color: #f2f2f2;}
.sec_hotspring .img_02{ position: absolute; top: 100px; right: 0; margin: 0 310px 0 0;}
.sec_hotspring .img_03{ position: absolute; top: 55px; right: 0; margin: 0 -55px 0 0;}

@media screen and (max-width: 600px) {
.sec_hotspring{ padding: 0 0 50px; flex-direction: column;}
.sec_hotspring .box_main_img::after{ left: auto; right: 0; background: linear-gradient(-90deg,rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0) 100%);}
/* .sec_hotspring .box_main_img img{ width: 100%; height: 250px; object-fit: cover;} */
.sec_hotspring .box_main_img .copy{ left: auto; right: 5%; padding: 20px 8px 0 0;}
.sec_hotspring .box_main_img .copy span{ font-size: 20px;}
.sec_hotspring .box_txt{ width: 90%; margin: 0 auto; padding: 40px 0; order: 2;}
.sec_hotspring .box_txt .tit{ width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; padding: 0 0 20px;}
.sec_hotspring .box_txt .tit span.en{ font-size: 13px; letter-spacing: 0.18em; line-height: 1; color: #a7abaa; padding: 0 0 5px;}
.sec_hotspring .box_txt .tit span.ja{ font-size: 28px;}
.sec_hotspring .box_txt .txt{ line-height: 1.7;}
.sec_hotspring .box_txt .btn{ margin: 20px 0 0;}
.sec_hotspring .box_imgs{ width: 90%; margin: 0 auto; order: 3; position: relative; display: flex; justify-content: space-between;}
.sec_hotspring .box_imgs::after{ display: none;}
.sec_hotspring .img_02,
.sec_hotspring .img_03{ position: static; width: 49%; margin: 0;}
}

/* ---------------------------------------------------
Section Cuisine
------------------------------------------------------ */
.sec_cuisine{ padding: 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start;}
.sec_cuisine .box_main_img{ width: 100%; position: relative; order: 1;}
.sec_cuisine .box_main_img::after{ content: ""; display: block; width: 50%; height: 100%; background: linear-gradient(-90deg,rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0) 100%); position: absolute; top: 0; right: 0; z-index: 2;}
.sec_cuisine .box_main_img img{ width: 100%; height: auto; position: relative; z-index: 1;}
.sec_cuisine .box_main_img .copy{ position: absolute; top: 0; right: 10%; z-index: 3; border-right: solid 1px #fff; padding: 50px 15px 0 0; display: block;}
.sec_cuisine .box_main_img .copy span{ font-size: clamp(30px, 2.5vw, 50px); color: #fff; display: block; width: 2.8em; line-height: 1.4;}
.sec_cuisine .box_txt{ width: 400px; margin: 0 180px 0 auto; padding: 100px 0 190px; order: 2;}
.sec_cuisine .box_txt .tit{ width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; padding: 60px 0 30px;}
.sec_cuisine .box_txt .tit span.en{ font-size: 24px; letter-spacing: 0.18em; line-height: 1; color: #a7abaa; padding: 0 0 5px;}
.sec_cuisine .box_txt .tit span.ja{ font-size: 62px;}
.sec_cuisine .box_txt .txt{ line-height: 1.9;}
.sec_cuisine .box_txt .btn{ margin: 30px 0 0;}
.sec_cuisine .box_imgs{ width: 50%; order: 3; position: relative;}
.sec_cuisine .box_imgs img{ width: 100%; height: auto;}
.sec_cuisine .box_imgs::after{ content: ""; position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 440px; background-color: #f2f2f2;}
.sec_cuisine .img_02{ position: absolute; top: 100px; left: 0; margin: 0 0 0 -55px;}
.sec_cuisine .img_03{ position: absolute; top: 55px; left: 0; margin: 0 0 0 310px;}

@media screen and (max-width: 600px) {
.sec_cuisine{ padding: 0 0 50px; flex-direction: column;}
.sec_cuisine .box_main_img::after{ right: 0; background: linear-gradient(-90deg,rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0) 100%);}
/* .sec_cuisine .box_main_img img{ width: 100%; height: 250px; object-fit: cover;} */
.sec_cuisine .box_main_img .copy{ right: 5%; padding: 20px 8px 0 0;}
.sec_cuisine .box_main_img .copy span{ font-size: 20px;}
.sec_cuisine .box_txt{ width: 90%; margin: 0 auto; padding: 40px 0; order: 2;}
.sec_cuisine .box_txt .tit{ width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; padding: 0 0 20px;}
.sec_cuisine .box_txt .tit span.en{ font-size: 13px; letter-spacing: 0.18em; line-height: 1; color: #a7abaa; padding: 0 0 5px;}
.sec_cuisine .box_txt .tit span.ja{ font-size: 28px;}
.sec_cuisine .box_txt .txt{ line-height: 1.7;}
.sec_cuisine .box_txt .btn{ margin: 20px 0 0;}
.sec_cuisine .box_imgs{ width: 90%; margin: 0 auto; order: 3; position: relative; display: flex; justify-content: space-between;}
.sec_cuisine .box_imgs::after{ display: none;}
.sec_cuisine .img_02,
.sec_cuisine .img_03{ position: static; width: 49%; margin: 0;}
}

/* ---------------------------------------------------
Section Recommended Plan
------------------------------------------------------ */
.sec_recommend{ background-color: #1a3c34; color: #fff; padding: 90px 0;}
.sec_recommend .tit{ display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0 0 20px;}
.sec_recommend .tit span{ line-height: 1;}
.sec_recommend .tit span.en{ font-size: 24px; color: #90a29e; padding: 0 0 10px 0;}
.sec_recommend .tit span.ja{ font-size: 40px; color: #fff;}
.sec_recommend .bestrate{ display: flex; justify-content: center; align-items: center; padding: 0 0 50px;}
.sec_recommend .bestrate .mark{ padding: 0 10px 0 0;}
.sec_recommend .bestrate .txt_01{ font-size: 26px; line-height: 1; color: #bd9b58; padding: 0 10px 0 0;}
.sec_recommend .bestrate .txt_02{ font-size: 20px; line-height: 1; color: #bd9b58;}
.sec_recommend .bestrate .txt_02 em{ font-style: normal; font-size: 28px;}
.sec_recommend #recommend_489ban .slick-slide{ background-color: #0d2822; margin: 0 35px; width: 930px;}
.sec_recommend #recommend_489ban .PlanView{ display: flex !important;}
.sec_recommend #recommend_489ban .picture{ width: 45%;}
.sec_recommend #recommend_489ban .picture img{ width: 100%; height: 300px; object-fit: cover;}
.sec_recommend #recommend_489ban .picture img:hover{ filter: brightness(1.2);}
.sec_recommend #recommend_489ban .explan{ width: 55%; padding: 70px 40px; position: relative;}
.sec_recommend #recommend_489ban .plan a,
.sec_recommend #recommend_489ban .planlist a{ color: #fff;}
.sec_recommend #recommend_489ban .planlist a.btn{ position: absolute; bottom: 70px; right: 40px; display: block; width: 150px; height: 50px;  border-bottom: solid 1px #fff; font-size: 15px; line-height: 50px; text-align: center; overflow: hidden; container-type: inline-size; }
.sec_recommend #recommend_489ban .planlist a.btn::before{ content: ""; width: 25%; height: 2px; background-color: #fff; position: absolute; bottom: 0; left: 0; }
.sec_recommend #recommend_489ban .planlist a.btn:hover{  text-decoration: none; }
.sec_recommend #recommend_489ban .planlist a.btn:hover::before{  animation: moveLine 0.7s forwards linear;  }
.sec_recommend #recommend_489ban .slick-dots{ bottom: -40px;}
.sec_recommend #recommend_489ban .slick-dots li{ width: 30px; height: 3px; margin: 0; }
.sec_recommend #recommend_489ban .slick-dots li button { width: 30px; height: 20px; padding: 0; }
.sec_recommend #recommend_489ban .slick-dots li button::before { top: 8px; width: 30px; height: 2px; content: ""; opacity: 0.25; background-color: #fff; display: block; }
.sec_recommend #recommend_489ban .slick-dots li.slick-active,
.sec_recommend #recommend_489ban .slick-dots li.slick-active button::before { width: 80px; }
.sec_recommend #recommend_489ban .slick-dots li.slick-active button::before { opacity: 0.5; }
.sec_recommend .list{ width: 90%; max-width: 930px; margin: 80px auto 0; display: flex; justify-content: space-between;}
.sec_recommend .list li{ width: 32%;}
.sec_recommend .list li a{ width: 100%; height: 40px; font-size: 16px; line-height: 40px; text-align: center; background-color: #395c54; transition: background-color 0.5s; display: block; color: #fff;}
.sec_recommend .list li a:hover{ background-color: #112d26; text-decoration: none;}

@media screen and (max-width: 600px) {
.sec_recommend{ padding: 50px 0;}
.sec_recommend .tit{ padding: 0 0 30px;}
.sec_recommend .tit span.en{ font-size: 14px; padding: 0 0 10px 0;}
.sec_recommend .tit span.ja{ font-size: 22px;}
.sec_recommend .bestrate{ align-items: flex-start; flex-direction: column; padding: 0 0 40px 60px; position: relative; width: fit-content; margin: 0 auto;}
.sec_recommend .bestrate .mark{ padding: 0 10px 0 0; width: 50px; position: absolute; top: 0; left: 0;}
.sec_recommend .bestrate .txt_01{ font-size: 20px; padding: 0;}
.sec_recommend .bestrate .txt_02{ font-size: 12px;}
.sec_recommend .bestrate .txt_02 em{ font-size: 22px;}
.sec_recommend #recommend_489ban{ width: 90%; margin: 0 auto;}
.sec_recommend #recommend_489ban .slick-slide{ margin: 0; width: auto;}
.sec_recommend #recommend_489ban .PlanView{ flex-direction: column;}
.sec_recommend #recommend_489ban .picture{ width: 100%;}
.sec_recommend #recommend_489ban .picture img{ height: 200px;}
.sec_recommend #recommend_489ban .explan{ width: 100%; padding: 5%; box-sizing: border-box;}
.sec_recommend #recommend_489ban .planlist a.btn{ position: relative; bottom: auto; right: auto; height: 40px; font-size: 14px; line-height: 40px; margin: 10px 0 0 auto;}
.sec_recommend #recommend_489ban .slick-dots{ bottom: -30px;}
.sec_recommend #recommend_489ban .slick-dots li{ width: 20px;}
.sec_recommend #recommend_489ban .slick-dots li button { width: 20px; }
.sec_recommend #recommend_489ban .slick-dots li button::before { width: 20px; }
.sec_recommend #recommend_489ban .slick-dots li.slick-active,
.sec_recommend #recommend_489ban .slick-dots li.slick-active button::before { width: 40px; }
.sec_recommend .list{ width: 90%; max-width: 90%; margin: 60px auto 0; flex-wrap: wrap; }
.sec_recommend .list li{ width: 49%; margin: 0 0 2%;}
.sec_recommend .list li:first-child{ width: 100%;}
.sec_recommend .list li a{ height: 40px; font-size: 14px; line-height: 40px;}
}

@keyframes moveLine {
0% { transform: translateX(-100%); }
55.6% { transform: translateX(100cqw); }
55.7% { transform: translateX(-100%); }
100% { transform: translateX(0); }
}

/* ---------------------------------------------------
Section News
------------------------------------------------------ */
.sec_news{ padding: 90px 0;}
.sec_news .inner_md{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start;}
.sec_news .tit{ display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0 0 40px; width: 100%;}
.sec_news .tit span{ line-height: 1;}
.sec_news .tit span.en{ font-size: 24px; color: #a7abaa; padding: 0 0 10px 0;}
.sec_news .tit span.ja{ font-size: 40px;}
.sec_news #feed{ width: 100%;}
.sec_news #feed ul{ padding: 0 0 40px;}
.sec_news #feed ul li{ border-bottom: solid 1px #b0b0b0;}
.sec_news #feed ul li a{ position: relative; padding: 20px 0; display: flex; justify-content: flex-start; align-items: flex-start; background-color: #fff; transition: background-color 0.5s;}
.sec_news #feed ul li a:hover{ text-decoration: none; background-color: #f2f2f2;}
.sec_news #feed ul li a time{ width: 9em; background-color: #1a3c34; color: #fff; font-size: 12px; font-weight: bold; line-height: 1; padding: 5px 0; text-align: center; display: inline-block;}
.sec_news #feed ul li a .post{ width: calc( 100% - 9em ); display: inline-block; padding: 0 0 0 2em; box-sizing: border-box;}
.sec_news .sns{ display: flex; justify-content: flex-start; align-items: flex-start;}
.sec_news .sns li{ width: 31px; margin: 0 15px 0 0;}
.sec_news .sns li a{ display: block; width: 31px; height: 31px; text-indent: 100%; white-space: nowrap; overflow: hidden; background-size: 31px;}
.sec_news .sns li a.insta{ background: url(../img/ico_insta_01.svg) no-repeat 0 0; }
.sec_news .sns li a.fb{ background: url(../img/ico_fb_01.svg) no-repeat 0 0;}
.sec_news .sns li a:hover{ opacity: 0.8;}

@media screen and (max-width: 600px) {
.sec_news{ padding: 50px 0 70px;}
.sec_news .inner_md{ flex-direction: column;}
.sec_news .tit{ padding: 0 0 20px;}
.sec_news .tit span.en{ font-size: 14px; padding: 0 0 10px 0;}
.sec_news .tit span.ja{ font-size: 22px;}
.sec_news #feed ul{ padding: 0 0 15px;}
.sec_news #feed ul li a{ padding: 20px 0; flex-direction: column;}
.sec_news #feed ul li a time{ font-size: 12px;}
.sec_news #feed ul li a .post{ width: 100%; display: block; padding: 10px 0 0;}
.sec_news .sns{ width: 100%; padding: 0 0 30px; justify-content: flex-end;}
.sec_news .sns li{ width: 31px; margin: 0 0 0 10px;}
/* .sec_news .sns li a{ display: block; width: 31px; height: 31px; text-indent: 100%; white-space: nowrap; overflow: hidden; background-size: 31px;}
.sec_news .sns li a.insta{ background: url(../img/ico_insta_01.svg) no-repeat 0 0; }
.sec_news .sns li a.fb{ background: url(../img/ico_fb_01.svg) no-repeat 0 0;}
.sec_news .sns li a:hover{ opacity: 0.8;} */
.sec_news .btn{ margin: 0 auto;}
}