@charset "utf-8";
/* ===================================================
room css
====================================================== */
/* ---------------------------------------------------
	page common
------------------------------------------------------ */
/* メインエリア＋タイトル */
@media screen and (min-width: 601px) {
	.p_block { display: flex; justify-content: space-between; }
	.p_block._reverse_pc { flex-direction: row-reverse; }
}
@media screen and (max-width: 600px) {
	.p_block_main { margin-top: 30px; }
}

/* ---------------------------------------------------
	cmn_lead
------------------------------------------------------ */
.cmn_lead { padding-top: 132px; }
.cmn_lead .c_anchor { margin: 160px auto 0; max-width: 1160px; }
@media screen and (max-width: 600px) {
	.cmn_lead { padding-top: 70px; }
	.cmn_lead .c_anchor { margin-top: 95px; }
}

/* ---------------------------------------------------
	sec01
------------------------------------------------------ */
#sec01 { padding-top: 114px; }
#sec01 .inner_md { max-width: 1050px; }
#sec01 .p_block_ttl { position: relative; }
#sec01 .cmn_tit01 .tit03 { font-weight: 500; font-size: 19px; letter-spacing: .1em; text-indent: .1em; color: rgba(0,0,0,.7); }
#sec01 .deco { position: absolute; top: 350px; right: -150px; width: 236px; }
#sec01 .list_item:nth-child(n+2) { margin-top: 40px; }
#sec01 .list_link { display: grid; align-items: center; position: relative; background-color: #000; aspect-ratio: 850 / 350; overflow: hidden; }
#sec01 .list_link::before { content:""; position: absolute; inset: 0; z-index: 1; background-image: linear-gradient(to right, rgba(0,0,0,.5) 0%, transparent calc(300 / 850 * 100%) ); }
#sec01 .list_bg { grid-row: 1; grid-column: 1; display: block; position: relative; width: 100%; height: 100%; }
#sec01 .list_bg .ofi { transition: opacity 0.5s, transform 0.5s; }
#sec01 .list_num { font-feature-settings: "palt"; font-weight: 500; font-size: 14px; letter-spacing: .1em; text-indent: .1em; color: rgba(255,255,255,.8); display: grid; place-content: center; position: absolute; top: 0; left: 0; z-index: 1; width: 80px; height: 30px; background-color: rgba(255,255,255,.25); }
#sec01 .list_hgroup { grid-row: 1; grid-column: 1; position: relative; z-index: 1; padding: 15px 45px 0; }
#sec01 .list_hgroup_ttl { font-weight: 500; font-size: 28px; line-height: calc(33 / 28); letter-spacing: .1em; color: #fff; display: flex; align-items: center; position: relative; padding-left: 50px; }
#sec01 .list_hgroup_ttl::before { content:""; position: absolute; top: 50%; left: 0; translate: 0 -50%; width: 34px; height: 34px; opacity: .7; filter: brightness(0) invert(1); }
#sec01 .list_hgroup_ttl._awasumi::before { background: url(../img/icon_room_suite_awasumi.webp) center / contain no-repeat; }
#sec01 .list_hgroup_ttl._ruri::before { background: url(../img/icon_room_suite_ruri.webp) center / contain no-repeat; }
#sec01 .list_hgroup_ttl._moegi::before { background: url(../img/icon_room_junior_suite_moegi.webp) center / contain no-repeat; }
#sec01 .list_hgroup_ttl._akebono::before { background: url(../img/icon_room_junior_suite_akebono.webp) center / contain no-repeat; }
#sec01 .list_hgroup_ttl .font_en { margin-top: 5px; }
#sec01 .list_hgroup_ttl_sml { font-size: 15px; line-height: calc(33 / 15); margin-left: 10px; }
#sec01 .list_hgroup_txt { font-weight: 500; font-size: 14px; line-height: calc(24 / 14); letter-spacing: .1em; color: #fff; margin-top: 20px; }
@media (any-hover: hover) {
	#sec01 .list_link:hover { opacity: 1; }
	#sec01 .list_link:hover .ofi { transform: scale(1.05); opacity: .6; }
}
@media screen and (min-width: 601px) {
	#sec01 .p_block_main { width: 850px; }
}
@media screen and (max-width: 600px) {
	#sec01 { padding-top: 65px; }
	#sec01 .inner_md { width: calc(325 / 375 * 100%); }
	#sec01 .cmn_tit01 .tit03 { font-size: 14px; }
	#sec01 .deco { top: 30px; right: -30px; width: 100px; }
	#sec01 .list_item:nth-child(n+2) { margin-top: 20px; }
	#sec01 .list_link { align-items: flex-end; aspect-ratio: 650 / 465; }
	#sec01 .list_link::before { background-image: linear-gradient(to right, rgba(0,0,0,.5) 0%, transparent calc(390 / 650 * 100%) ); }
	#sec01 .list_num { font-size: 12px; width: 69px; height: 26px; }
	#sec01 .list_hgroup { padding: calc(18 / 375 * 100vw) calc(17.5 / 375 * 100vw); }
	#sec01 .list_hgroup_ttl { font-size: 15px; line-height: calc(26 / 15); padding-left: 31px; }
	#sec01 .list_hgroup_ttl::before { width: 22px; height: 22px; }
	#sec01 .list_hgroup_ttl .font_en { margin-top: 3px; }
	#sec01 .list_hgroup_ttl_sml { font-size: 10px; line-height: calc(26 / 10); margin-left: 6px; }
	#sec01 .list_hgroup_txt { font-size: 11px; line-height: calc(19 / 11); margin-top: 12px; }
}

/* ---------------------------------------------------
	sec02
------------------------------------------------------ */
#sec02 { padding-top: 87px; }
#sec02 .inner_md { max-width: 1050px; }
#sec02 .p_block_main { position: relative; }
#sec02 .p_block_main::before { content:""; position: absolute; top: -87px; right: -113px; z-index: -1; width: 697px; height: 543px; background: url(../img/cmn_illust_bg01.png) left top / 65px; }
#sec02 .list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; }
#sec02 .list_link { display: grid; align-items: flex-end; position: relative; background-color: #000; aspect-ratio: 420 / 350; overflow: hidden; }
#sec02 .list_link::before { content:""; position: absolute; inset: 0; z-index: 1; background-image: linear-gradient(to top, rgba(0,0,0,.7) 0%, transparent calc(128 / 350 * 100%) ); }
#sec02 .list_bg { grid-row: 1; grid-column: 1; display: block; position: relative; width: 100%; height: 100%; }
#sec02 .list_bg .ofi { transition: opacity 0.5s, transform 0.5s; }
#sec02 .list_num { display: flex; flex-wrap: wrap; gap: 4px; position: absolute; top: 0; left: 0; z-index: 1; }
#sec02 .list_num_label { font-feature-settings: "palt"; font-weight: 500; font-size: 14px; letter-spacing: .1em; text-indent: .1em; color: rgba(255,255,255,.8); display: grid; place-content: center; width: 70px; height: 30px; background-color: rgba(255,255,255,.25); }
#sec02 .list_hgroup { grid-row: 1; grid-column: 1; position: relative; z-index: 1; padding: 30px 35px; }
#sec02 .list_hgroup_ttl { font-weight: 500; font-size: 24px; line-height: calc(33 / 24); letter-spacing: .1em; color: #fff; display: flex; align-items: center; position: relative; padding-left: 43px; }
#sec02 .list_hgroup_ttl::before { content:""; position: absolute; top: 50%; left: 0; translate: 0 -50%; width: 31px; height: 31px; opacity: .7; filter: brightness(0) invert(1); }
#sec02 .list_hgroup_ttl._nichi::before { background: url(../img/icon_room_nichi.webp) center / contain no-repeat; }
#sec02 .list_hgroup_ttl._tsuki::before { background: url(../img/icon_room_tsuki.webp) center / contain no-repeat; }
#sec02 .list_hgroup_ttl._hi::before { background: url(../img/icon_room_hi.webp) center / contain no-repeat; }
#sec02 .list_hgroup_ttl._sui::before { background: url(../img/icon_room_sui.webp) center / contain no-repeat; }
#sec02 .list_hgroup_ttl._moku::before { background: url(../img/icon_room_moku.webp) center / contain no-repeat; }
#sec02 .list_hgroup_ttl._kin::before { background: url(../img/icon_room_kin.webp) center / contain no-repeat; }
#sec02 .list_hgroup_ttl._tsuchi::before { background: url(../img/icon_room_tsuchi.webp) center / contain no-repeat; }
#sec02 .list_hgroup_ttl._sumi::before { background: url(../img/icon_room_sumi.webp) center / contain no-repeat; }
#sec02 .list_hgroup_ttl .font_en { margin-top: 5px; }
#sec02 .list_hgroup_ttl_sml { font-size: 15px; line-height: calc(33 / 15); margin-left: 16px; }
#sec02 .list_hgroup_txt { font-weight: 500; font-size: 14px; line-height: calc(24 / 14); letter-spacing: .1em; color: #fff; margin-top: 10px; }
@media (any-hover: hover) {
	#sec02 .list_link:hover { opacity: 1; }
	#sec02 .list_link:hover .ofi { transform: scale(1.05); opacity: .6; }
}
@media screen and (min-width: 601px) {
	#sec02 { margin-top: 184px; }
	#sec02 .p_block_main { width: 880px; }
}
@media screen and (max-width: 600px) {
	#sec02 { padding-top: 65px; }
	#sec02 .inner_md { width: calc(325 / 375 * 100%); }
	#sec02 .p_block_main::before { top: -20px; right: -20px; width: calc(200 / 375 * 100vw); height: calc(155 / 375 * 100vw); background-size: calc(32.5 / 375 * 100vw); }
	#sec02 .list { gap: calc(10 / 375 * 100vw); }
	#sec02 .list_link { aspect-ratio: 320 / 410; }
	#sec02 .list_link::before { background-image: linear-gradient(to top, rgba(0,0,0,.7) 0%, transparent calc(188 / 410 * 100%) ); }
	#sec02 .list_num { gap: 2px; }
	#sec02 .list_num_label { font-size: 11px; width: 53px; height: 23px; }
	#sec02 .list_hgroup { padding: calc(16 / 375 * 100vw) calc(18 / 375 * 100vw); }
	#sec02 .list_hgroup_ttl { font-size: 15px; line-height: calc(20 / 15); padding-left: 26px; }
	#sec02 .list_hgroup_ttl::before { width: 19px; height: 19px; }
	#sec02 .list_hgroup_ttl .font_en { margin-top: 3px; }
	#sec02 .list_hgroup_ttl_sml { font-size: 9px; line-height: calc(20 / 9); margin-left: 10px; }
	#sec02 .list_hgroup_txt { font-size: 11px; line-height: calc(16 / 11); margin-top: 10px; }
}
/* ---------------------------------------------------
	sec03
------------------------------------------------------ */
#sec03 { margin-top: 193px; padding-block: 187px 216px; }
#sec03 .inner_md { max-width: 1050px; }
#sec03 .map { position: relative; z-index: 1; margin-top: 75px; padding-block: 91px 104px; background-color: #fff; }
#sec03 .map_deco { position: absolute; z-index: -1; width: 292px; }
#sec03 .map_deco._top { top: 0; left: 0; }
#sec03 .map_deco._bottom { right: 0; bottom: 0; transform: rotate(180deg); }
#sec03 .map .cmn_tit01 { position: relative; margin-inline: auto; padding-left: 14px; width: fit-content; }
#sec03 .map .cmn_tit01::before { content:""; position: absolute; top: 2px; left: 0; width: 13px; height: 27px; background: url(../../room/img/floor_plan_arrow.png) center / contain no-repeat; }
#sec03 .map .cmn_tit01._arrow_low::before { top: 4px; transform: scale(1,-1); }
#sec03 .map .cmn_tit01 .tit01 { font-size: 22px; letter-spacing: .5em; text-indent: .5em; color: rgba(0,0,0,.5); }
#sec03 .map .cmn_tit01 .tit02 { font-size: 14px; }
#sec03 .map_fig { margin: 28px auto 0; width: 731px; }
#sec03 .map_fig + .cmn_tit01 { margin-top: 48px; }
#sec03 .map_fig_img { display: block; }
#sec03 .hgroup { display: flex; align-items: end; column-gap: 18px; }
#sec03 .hgroup_ttl { font-feature-settings: "palt"; font-weight: 500; font-size: 26px; line-height: 1; letter-spacing: .1em; color: rgba(0,0,0,.45); }
#sec03 .hgroup_txt { font-weight: 500; font-size: 16px; line-height: 1; letter-spacing: .1em; color: rgba(0,0,0,.5); }
#sec03 .block01 { margin-top: 168px; }
#sec03 .block01 .block01_slide { margin-top: 34px; overflow: hidden }
#sec03 .block01 .cmn_slick { margin: 0 -20px!important; }
#sec03 .block01 .cmn_slick .photo { margin-inline: 20px; }
#sec03 .block01 .cmn_slick .slick-dots { gap: 15px; position: static; margin: 22px 20px 0; }
#sec03 .block01 .cmn_slick .slick-dots li { margin: 0; }
#sec03 .block01 .cmn_slick .slick-dots li button { background: rgba(0,0,0,.2); }
#sec03 .block01 .cmn_slick .slick-dots li.slick-active button { background: rgba(0,0,0,.5); }
#sec03 .block01_txt { font-weight: 500; font-size: 16px; line-height: calc(32 / 16); letter-spacing: .1em; color: rgba(0,0,0,.8); margin-top: 43px; }
#sec03 .block02 { position: relative; margin-top: 110px; isolation: isolate; }
#sec03 .block02 + .block02 { margin-top: 50px; }
#sec03 .block02_txt { font-weight: 500; font-size: 16px; line-height: calc(32 / 16); letter-spacing: .1em; color: rgba(0,0,0,.8); margin-top: 18px; }
#sec03 .block02_deco { position: absolute; right: -168px; bottom: -78px; z-index: -1; width: 257px; }
#sec03 .c_dlist01 { margin-top: 136px; }
@media screen and (min-width: 601px) {
	#sec03 .block01 .cmn_slick .slick-dots { justify-content: flex-start; }
	#sec03 .block02 { display: grid; align-items: flex-start; grid-template-columns: 505px 1fr; column-gap: 58px; }
	#sec03 .block02_txt_box { padding-top: 61px; }
}
@media screen and (max-width: 600px) {
	#sec03 { margin-top: 65px; padding-block: 65px; }
	#sec03 .map { margin-top: 30px; padding-block: 40px; }
	#sec03 .map_deco { width: calc(120 / 375 * 100vw); }
	#sec03 .map .cmn_tit01 { padding-left: 11px; }
	#sec03 .map .cmn_tit01::before { top: 1px; width: 10px; height: 24px; }
	#sec03 .map .cmn_tit01._arrow_low::before { top: 4px; }
	#sec03 .map .cmn_tit01 .tit01 { font-size: 18px; }
	#sec03 .map .cmn_tit01 .tit02 { font-size: 12px; }
	#sec03 .map_fig { margin-top: 20px; width: 88%; }
	#sec03 .map_fig + .cmn_tit01 { margin-top: 20px; }
	#sec03 .hgroup { column-gap: 10px; }
	#sec03 .hgroup_ttl { font-size: 20px; }
	#sec03 .hgroup_txt { font-size: 14px; }
	#sec03 .block01 { margin-top: 50px; }
	#sec03 .block01 .block01_slide { margin-top: 20px; }
	#sec03 .block01 .cmn_slick { margin: 0 -10px!important; }
	#sec03 .block01 .cmn_slick .photo { margin-inline: 10px; }
	#sec03 .block01 .cmn_slick .slick-dots { margin: 15px 0 0; }
	#sec03 .block01_txt { font-size: 13px; line-height: calc(23 / 13); margin-top: 20px; }
	#sec03 .block02 { margin-top: 40px; }
	#sec03 .block02 + .block02 { margin-top: 40px; }
	#sec03 .block02_txt_box { margin-top: 20px; }
	#sec03 .block02_txt { font-size: 13px; line-height: calc(23 / 13); margin-top: 10px; }
	#sec03 .block02_deco { right: -15px; bottom: -100px; width: 120px; }
	#sec03 .c_dlist01 { margin-top: 120px; }
}

/* ---------------------------------------------------
	breadcrumb
------------------------------------------------------ */
#contents_wrap #breadcrumb { margin-top: 116px; }
@media screen and (max-width: 600px) {
	#contents_wrap #breadcrumb { margin-top: 65px; }
}
