@charset "utf-8";
/* ===================================================
room detail css
露天風呂付き客室 / スタンダード客室 各ページ共通
====================================================== */
/* ---------------------------------------------------
	page common
------------------------------------------------------ */
/* パンくず */
#contents_wrap .p_block:has(#breadcrumb) { margin-block: 109px 25px; }
@media screen and (max-width: 600px) {
	#contents_wrap .p_block:has(#breadcrumb) { margin-top: 50px; }
}
/* ブロック */
.p_block { margin-inline: auto; width: min(1200px, 80%); }
@media screen and (min-width: 601px) {
	.p_block { display: flex; justify-content: space-between; }
}
@media screen and (max-width: 600px) {
	.p_block { width: 88%; }
}
/* 戻るボタン */
.p_back_btn_link { font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3","Hiragino Kaku GothicPro","Osaka","Verdana","Helvetica","Arial","ＭＳ Ｐゴシック", sans-serif; font-weight: 500; font-size: 14px; letter-spacing: .1em; color: rgba(0,0,0,.5); display: grid; place-content: center; position: relative; padding-left: 19px; width: 160px; height: 35px; border-radius: 5px; background: var(--light-gray); transition: color .5s, opacity .5s; }
.p_back_btn_link::before { content:""; position: absolute; top: calc(50% + 1px); left: 19px; width: 8px; height: 8px; border-top: 1px solid currentColor; border-left: 1px solid currentColor; transform: translateY(-50%) rotate(-45deg); }
@media screen and (max-width: 600px) {
	.p_back_btn_link { font-size: 12px; width: 140px; height: 30px; }
}

/* ---------------------------------------------------
	sec01
------------------------------------------------------ */
#sec01 { position: relative; padding-block: 20px 200px; }
#sec01 .inner_md { max-width: 950px; }
#sec01 .deco { position: absolute; top: 0; right: 0; width: 359px; }
#sec01 .hgroup { margin-top: 113px; }
#sec01 .hgroup_ttl { font-weight: 500; font-size: 35px; line-height: 1; letter-spacing: .1em; color: var(--black-70); display: flex; align-items: center; position: relative; padding-left: 44px; }
#sec01 .hgroup_ttl::before { content:""; position: absolute; top: 50%; left: 0; translate: 0 -50%; width: 31px; height: 31px; }
#sec01 .hgroup_ttl._awasumi::before { background: url(../img/icon_room_suite_awasumi.webp) center / contain no-repeat; }
#sec01 .hgroup_ttl._ruri::before { background: url(../img/icon_room_suite_ruri.webp) center / contain no-repeat; }
#sec01 .hgroup_ttl._moegi::before { background: url(../img/icon_room_junior_suite_moegi.webp) center / contain no-repeat; }
#sec01 .hgroup_ttl._akebono::before { background: url(../img/icon_room_junior_suite_akebono.webp) center / contain no-repeat; }
#sec01 .hgroup_ttl .font_en { margin-top: 7px; }
#sec01 .hgroup_ttl_sml { font-size: 16px; line-height: 1; color: var(--black-40); margin-left: 12px; }
#sec01 .hgroup_txt { font-weight: 500; font-size: 16px; line-height: 1; letter-spacing: .1em; color: var(--black-50); }
#sec01 .list { margin-top: 70px; }
#sec01 .list_item { --_list-item-content-grid-template-rows: 0fr; --_list-item-btn-before-rotate: 90deg; --_list-item-btn-after-rotate: 0deg; --_list-item-btn-after-opacity: 1; border-bottom: 1px solid rgba(25,19,12,.15); }
#sec01 .list_item.is_open { --_list-item-content-grid-template-rows: 1fr; --_list-item-btn-before-rotate: 0deg; --_list-item-btn-after-rotate: -90deg; --_list-item-btn-after-opacity: 0; }
#sec01 .list_item_btn { display: block; position: relative; padding: 43px 35px 43px 0; outline: none; }
#sec01 .list_item_btn::before,#sec01 .list_item_btn::after { content:""; position: absolute; top: 50%; right: 0; translate: 0 -50%; width: 16px; height: 1px; background-color: rgba(25,19,12,.3); transition: rotate .5s ease-out, opacity .5s ease-out; }
#sec01 .list_item_btn::before { rotate: var(--_list-item-btn-before-rotate); }
#sec01 .list_item_btn::after { rotate: var(--_list-item-btn-after-rotate); opacity: var(--_list-item-btn-after-opacity); }
#sec01 .list_hgroup_ttl { font-feature-settings: "palt"; font-weight: 500; font-size: 35px; line-height: 1; letter-spacing: .1em; color: var(--black-70); display: flex; align-items: center; position: relative; padding-left: 44px; }
#sec01 .list_hgroup_ttl::before { content:""; position: absolute; top: 50%; left: 0; translate: 0 -50%; width: 31px; height: 31px; }
#sec01 .list_hgroup_ttl._nichi::before { background: url(../img/icon_room_nichi.webp) center / contain no-repeat; }
#sec01 .list_hgroup_ttl._tsuki::before { background: url(../img/icon_room_tsuki.webp) center / contain no-repeat; }
#sec01 .list_hgroup_ttl._hi::before { background: url(../img/icon_room_hi.webp) center / contain no-repeat; }
#sec01 .list_hgroup_ttl._sui::before { background: url(../img/icon_room_sui.webp) center / contain no-repeat; }
#sec01 .list_hgroup_ttl._moku::before { background: url(../img/icon_room_moku.webp) center / contain no-repeat; }
#sec01 .list_hgroup_ttl._kin::before { background: url(../img/icon_room_kin.webp) center / contain no-repeat; }
#sec01 .list_hgroup_ttl._tsuchi::before { background: url(../img/icon_room_tsuchi.webp) center / contain no-repeat; }
#sec01 .list_hgroup_ttl._sumi::before { background: url(../img/icon_room_sumi.webp) center / contain no-repeat; }
#sec01 .list_hgroup_ttl .font_en { margin-top: 7px; }
#sec01 .list_hgroup_ttl_sml { font-size: 16px; line-height: 1; color: var(--black-40); margin-left: 12px; }
#sec01 .list_hgroup_txt { font-weight: 500; font-size: 16px; line-height: 1; letter-spacing: .1em; color: var(--black-50); }
#sec01 .list_item_content {	display: grid; grid-template-rows: var(--_list-item-content-grid-template-rows); transition: grid-template-rows .5s ease-out; }
#sec01 .list_item_content_outer { overflow: hidden; }
#sec01 .list_item_content_inner { padding-bottom: 152px; }
#sec01 .tab_btns { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
#sec01 .tab_btn { font-weight: 500; font-size: 14px; line-height: calc(24 / 14); letter-spacing: .1em; color: var(--black-50); text-align: center; appearance: none; -webkit-appearance: none; margin: 0; padding: 8px 24px 6px; min-width: 168px; border: 1px solid currentColor; border-radius: 5px 5px 0 0; background: var(--white); cursor: pointer; }
#sec01 .tab_btn.is_active { color: var(--white); border-color: #9a9a9a; background: #9a9a9a; }
#sec01 .tab_btn_txt { font: inherit; color: inherit; display: inline-block; position: relative; }
#sec01 .tab_btn_txt::after { content:""; display: none; position: absolute; top: calc(50% - 2px); right: 2px; translate: 0 -50%; width: 8px; height: 8px; border-right: 1px solid var(--white); border-bottom: 1px solid var(--white); rotate: 45deg; }
#sec01 .tab_btn.is_active .tab_btn_txt { padding-right: 21px; }
#sec01 .tab_btn.is_active .tab_btn_txt::after { display: block; }
#sec01 .tab_contents { position: relative; }
#sec01 .tab_panel { position: absolute;	top: 0;	left: 0; width: 100%; visibility: hidden; opacity: 0; pointer-events: none; }
#sec01 .tab_panel.is_active { position: relative; visibility: visible; opacity: 1; pointer-events: auto; }
#sec01 .cmn_slick { margin-block: 45px 0; }
#sec01 .list .cmn_slick { margin-top: 0; }
#sec01 .detail { margin-top: 73px; }
#sec01 .detail_message_ttl { font-weight: 500; font-size: 24px; line-height: calc(35 / 24); letter-spacing: .1em; color: var(--black-50); }
#sec01 .detail_message_txt { font-weight: 500; font-size: 16px; line-height: calc(32 / 16); letter-spacing: .1em; color: var(--black-80); margin-top: 22px; }
#sec01 .detail_message_txt a { font-size: 15px; border-bottom: 1px solid currentColor; padding: 2px 0; }
#sec01 .detail_info_dlist { display: grid; gap: 11px; }
#sec01 .detail_info_dlist_item { display: grid; grid-template-columns: 70px 1fr; gap: 18px; }
#sec01 .detail_info_dlist_theme,#sec01 .detail_info_dlist_des { font-weight: 500; font-size: 14px; line-height: calc(24 / 14); letter-spacing: .1em; color: var(--black-80); }
#sec01 .detail_info_dlist_theme { text-indent: .1em; text-align: center; display: grid; place-content: center; height: 30px; background-color: var(--light-gray); }
#sec01 .detail_info_dlist_des { padding-top: 3px; }
#sec01 .detail_info_btn { margin-top: 32px; }
#sec01 .detail_info_btn_link { font-feature-settings: "palt"; font-weight: 500; font-size: 15px; line-height: calc(25 / 15); letter-spacing: .1em; color: var(--white); text-indent: .1em; text-align: center; display: grid; place-content: center; width: 100%; height: 52px; background-color: #5c5c5c; }
#sec01 .detail_info_anchor { font-weight: 500; font-size: 14px; line-height: calc(24 / 14); letter-spacing: .1em; margin-top: 17px; }
#sec01 .detail_info_anchor_link { font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3","Hiragino Kaku GothicPro","Osaka","Verdana","Helvetica","Arial","ＭＳ Ｐゴシック", sans-serif; color: var(--black-50); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; display: inline-block; }
#sec01 .gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; margin-top: 130px; }
@media screen and (min-width: 601px) {
	#sec01 .hgroup { display: flex; justify-content: space-between; align-items: flex-end; }
	#sec01 .list_hgroup { display: grid; align-items: center; grid-template-columns: 1fr auto; }
	#sec01 .detail { display: grid; grid-template-columns: 1fr 346px; }
	#sec01 .detail_message { padding-right: 45px; }
	#sec01 .detail_info { padding: 6px 0 0 55px; border-left: 1px solid rgba(0, 0, 0, .15); }
}
@media screen and (max-width: 600px) {
	#sec01 { padding-block: 20px 65px; container-type: inline-size; }
	#sec01 .deco { width: 150px; }
	#sec01 .hgroup { margin-top: 65px; }
	#sec01 .hgroup_ttl { font-size: 20px; line-height: calc(26 / 20); padding-left: 31px; }
	#sec01 .hgroup_ttl::before { width: 22px; height: 22px; }
	#sec01 .hgroup_ttl .font_en { margin-top: 6px; }
	#sec01 .hgroup_ttl_sml { font-size: 14px; line-height: calc(26 / 14); margin-left: 6px; }
	#sec01 .hgroup_txt { font-size: 14px; line-height: calc(24 / 14); margin-top: 6px; }
	#sec01 .list { margin: 48px calc(50% - 50cqi) 0; }
	#sec01 .list_item_btn { padding: 17px calc(18px + (32 / 375 * 100vw)) 17px calc(25 / 375 * 100vw); }
	#sec01 .list_item_btn::before,#sec01 .list_item_btn::after { right: calc(32 / 375 * 100vw); width: 12px; }
	#sec01 .list_hgroup_ttl { font-size: 18px; padding-left: 26px; }
	#sec01 .list_hgroup_ttl::before { width: 16px; height: 16px; }
	#sec01 .list_hgroup_ttl .font_en { margin-top: 4px; }
	#sec01 .list_hgroup_ttl_sml { font-size: 15px; margin-left: 11px; }
	#sec01 .list_hgroup_txt { font-size: 12px; line-height: calc(16 / 12); margin-top: 6px }
	#sec01 .list_item_content_inner { padding: 0 calc(25 / 375 * 100vw) 65px; }
	#sec01 .tab_btns { gap: 4px; }
	#sec01 .tab_btn { font-size: 12px; padding: 8px 12px 6px; min-width: auto; width: 100%; border-radius: 5px; }
	#sec01 .tab_btn_txt::after { width: 6px; height: 6px; }
	#sec01 .tab_btn.is_active .tab_btn_txt { padding-right: 16px; }
	#sec01 .tab_contents { margin-top: 15px; }
	#sec01 .cmn_slick { margin-block: 30px 0; }
	#sec01 .detail { margin-top: 30px; }
	#sec01 .detail_message_ttl { font-size: 18px; }
	#sec01 .detail_message_txt { font-size: 13px; margin-top: 10px; }
	#sec01 .detail_message_txt a { font-size: 12px; text-align: left; }
	#sec01 .detail_info { margin-top: 20px; padding-top: 25px; border-top: 1px solid rgba(0, 0, 0, .15); }
	#sec01 .detail_info_dlist { gap: 8px; }
	#sec01 .detail_info_dlist_item { gap: 10px;  }
	#sec01 .detail_info_dlist_theme,#sec01 .detail_info_dlist_des { font-size: 13px; }
	#sec01 .detail_info_dlist_des { padding-top: 4px; }
	#sec01 .detail_info_btn { margin-top: 25px; }
	#sec01 .detail_info_btn_link { font-size: 12px; height: 40px; }
	#sec01 .detail_info_anchor { font-size: 13px; text-align: center; margin-top: 18px; }
	#sec01 .gallery { grid-template-columns: 1fr; gap: 20px; margin-top: 37px; }
}

/* ---------------------------------------------------
	sec02
------------------------------------------------------ */
#sec02 { padding-block: 180px 197px; }
#sec02 .inner_md { max-width: 1050px; }
#sec02 .slide_block { margin-top: 77px; overflow: hidden; }
#sec02 .slide_block .cmn_slick { margin: 0 -11.5px!important; }
#sec02 .slide_block .cmn_slick .img { display: block; margin-inline: 11.5px; }
#sec02 .slide_block .cmn_slick .slick-dots { gap: 15px; position: static; margin: 36px 20px 0; }
#sec02 .slide_block .cmn_slick .slick-dots li { margin: 0; }
#sec02 .slide_block .cmn_slick .slick-dots li button { background: rgba(0,0,0,.2); }
#sec02 .slide_block .cmn_slick .slick-dots li.slick-active button { background: rgba(0,0,0,.5); }
#sec02 .c_dlist01 { margin-top: 67px; }
@media (any-hover: hover) {
}
@media screen and (min-width: 601px) {
	#sec02 .c_dlist01_item { grid-template-columns: 168px 1fr; padding-right: 14px; }
	#sec02 .cmn_tit01 + .c_dlist01 { margin-top: 86px; }
}
@media screen and (max-width: 600px) {
	#sec02 { padding-block: 65px; }
	#sec02 .slide_block { margin-top: 40px; }
	#sec02 .slide_block .cmn_slick { margin: 0 -4px!important; }
	#sec02 .slide_block .cmn_slick .img { margin-inline: 4px; }
	#sec02 .slide_block .cmn_slick .slick-dots { margin: 15px 0 0; }
	#sec02 .c_dlist01 { margin-top: 40px; }
}
/* ---------------------------------------------------
	sec03
------------------------------------------------------ */
#sec03 { padding-block: 137px 72px; }
#sec03 .inner_md { max-width: 1050px; }
#sec03 .ttl { font-weight: 500; font-size: 24px; line-height: calc(35 / 24); letter-spacing: .1em; color: rgba(0,0,0,.45); }
#sec03 .list { margin-top: 33px; }
#sec03 .list_item { border-bottom: 1px solid rgba(25,19,12,.15); }
#sec03 .list_item:first-child { border-top: 1px solid rgba(25,19,12,.15); }
#sec03 .list_link { display: block; position: relative;	padding: 33px 70px 32px 30px; background-color: #fff; transition: .5s background-color; }
#sec03 .list_link::before,#sec03 .list_link::after { content:""; position: absolute; top: 50%; translate: 0 -50%; }
#sec03 .list_link::before { right: 30px; width: 21px; height: 21px; border-radius: 50%; background-color: var(--light-gray); }
#sec03 .list_link::after { right: 38px; width: 8px; height: 8px; border-top: 1px solid rgba(25,19,12,.3); border-right: 1px solid rgba(25,19,12,.3); rotate: 45deg; }
#sec03 .list_hgroup_ttl { font-feature-settings: "palt"; font-weight: 500; font-size: 28px; line-height: 1; letter-spacing: .1em; color: var(--black-70); display: flex; align-items: center; position: relative; padding-left: 52px; }
#sec03 .list_hgroup_ttl::before { content:""; position: absolute; top: 50%; left: 0; translate: 0 -50%; width: 31px; height: 31px; }
#sec03 .list_hgroup_ttl._awasumi::before { background: url(../img/icon_room_suite_awasumi.webp) center / contain no-repeat; }
#sec03 .list_hgroup_ttl._ruri::before { background: url(../img/icon_room_suite_ruri.webp) center / contain no-repeat; }
#sec03 .list_hgroup_ttl._moegi::before { background: url(../img/icon_room_junior_suite_moegi.webp) center / contain no-repeat; }
#sec03 .list_hgroup_ttl._akebono::before { background: url(../img/icon_room_junior_suite_akebono.webp) center / contain no-repeat; }
#sec03 .list_hgroup_ttl .font_en { margin-top: 7px; }
#sec03 .list_hgroup_ttl_sml { font-size: 16px; line-height: 1; color: var(--black-40); margin-left: 18px; }
#sec03 .list_hgroup_txt { font-weight: 500; font-size: 16px; line-height: calc(32 / 16); letter-spacing: .1em; color: var(--black-50); }
@media (any-hover: hover) {
	#sec03 .list_link:hover { background-color: #f9f9f9; opacity: 1; }
}
@media screen and (min-width: 601px) {
	#sec03 .list_hgroup { display: grid; grid-template-columns: 1fr auto; column-gap: 18px; }
}
@media screen and (max-width: 600px) {
	#sec03 { padding-block: 65px 15px; }
	#sec03 .ttl { font-size: 20px; line-height: calc(30 / 20); }
	#sec03 .list { margin-top: 30px; }
	#sec03 .list_link { padding: 20px 30px 20px 10px; }
	#sec03 .list_link::before { right: 0; }
	#sec03 .list_link::after { right: 8px; }
	#sec03 .list_hgroup_ttl { font-size: 18px; line-height: calc(24 / 18); padding-left: 24px; }
	#sec03 .list_hgroup_ttl::before { width: 16px; height: 16px; }
	#sec03 .list_hgroup_ttl .font_en { margin-top: 4px; }
	#sec03 .list_hgroup_ttl_sml { font-size: 10px; line-height: calc(20 / 10); margin-left: 6px; }
	#sec03 .list_hgroup_txt { font-size: 12px; line-height: calc(22 / 12); }
}

/* ---------------------------------------------------
	breadcrumb
------------------------------------------------------ */
#contents_wrap .p_block #breadcrumb { margin: 0; width: auto; }
@media screen and (max-width: 600px) {
	#contents_wrap .p_block #breadcrumb { margin-top: 25px; }
}