@charset "utf-8";
/* ===================================================
	Master CSS
====================================================== */
/* ---------------------------------------------------
	客室トップ
------------------------------------------------------ */
.index #sec01 .room_list { padding-bottom: clamp(80px, 13.636vw, 150px); }
.index #sec01 .room_list .photo { margin-bottom: clamp(10px, 1.818vw, 20px); }
.index #sec01 .room_list .photo a { display: block; position: relative; transition: none; background: #000; }
.index #sec01 .room_list .photo a img { opacity: 0.75; transition: opacity .5s; }
.index #sec01 .room_list .photo a::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: url(../../room/img/sec01_arrow.svg) no-repeat center/contain; width: 16%; aspect-ratio: 1 / 1; z-index: 2; }
.index #sec01 .room_list .cmn_tit01 { margin-bottom: clamp(10px, 1.818vw, 20px); }

.index #sec02 { padding: clamp(70px, 11.364vw, 125px) 0 clamp(60px, 10.455vw, 115px);}
.index #sec02 .cmn_tit02 { margin-bottom: clamp(30px, 5.455vw, 60px); }
.index #sec02 p { font-size: 15px; }
.index #sec02 p span { display: inline-block; }

@media screen and (hover: hover) and (min-width: 651px) {
	.index #sec01 .photo a:hover { opacity: 1; }
	.index #sec01 .photo a:hover img { opacity: 1; }
}

@media screen and (min-width: 651px) {
	.index #sec02 p { font-size: 17px; }

}



/* ---------------------------------------------------
	客室詳細
------------------------------------------------------ */
[class^=room0] #sec_lead .cmn_tit01 { margin-bottom: clamp(15px, 2.273vw, 25px); }

[class^=room0] .room_list_layout .tit_col { padding-top: 65px; margin-bottom: clamp(35px, 6.364vw, 70px); text-align: center; position: relative; }
[class^=room0] .room_list_layout .tit_col::before { content: ''; position: absolute; top: 0; left: 50%; height: 40px; width: 1px; background: #000; }
[class^=room0] .room_list_layout .tit_col .tit01 { font-size: 18px; }
[class^=room0] .room_list_layout .tit_col .tit01 span { display: inline-block; }

[class^=room0] .room_list_layout { padding-bottom: clamp(80px, 13.636vw, 150px); }
[class^=room0] .room_list_layout .room_list .room_item + .room_item { margin-top: clamp(25px, 4.091vw, 45px); }
[class^=room0] .room_list_layout .room_list .room_link .caption { margin-top: 5px; display: flex; align-items: center; flex-wrap: wrap; gap: 0 15px; }
[class^=room0] .room_list_layout .room_list .room_link .name { font-size: 18px; }
[class^=room0] .room_list_layout .room_list .room_link .detail { font-size: 10px;}

/* 客室ナビ */
#room_nav { padding: clamp(55px, 9.091vw, 100px) 0 clamp(70px, 11.364vw, 125px); background: #000; color: #fff; }
#room_nav h2 { margin-bottom: clamp(30px, 5.455vw, 60px); color: rgba(255, 255, 255, 0.5); text-align: center; font-size: 20px; }
#room_nav a { color: #fff; }
#room_nav .list_col li a { display: flex; gap: 15px; padding: 10px 15px 10px 0; border-bottom: 1px solid #c7c7c7; }
#room_nav .list_col li a::after { content: ''; margin: 0 0 0 auto; background: url(../../room/img/nav_arrow.svg) no-repeat center/contain; width: 14px; aspect-ratio: 1 / 1; flex-shrink: 0; }
#room_nav .list_col li .room_nav_photo { width: 30%; flex-shrink: 0; }
#room_nav .list_col li .room_nav_photo img { aspect-ratio: 20 / 11; }
#room_nav .list_col li .room_nav_name { display: flex; align-items: center; flex-wrap: wrap; font-size: 17px; line-height: 1.2; }
#room_nav .list_col li .room_nav_name .room_nav_detail { font-size: 12px; display: inline-block; line-height: 1; }
#room_nav .list_col li .room_nav_name span:not(.room_nav_detail) { font-size: 14px; letter-spacing: 0; }

@media screen and (hover: hover) and (min-width: 651px) {
}
@media screen and (min-width: 651px) {
	[class^=room0] .room_list_layout .tit_col { padding-top: min(calc(4.545vw + 65px), 110px); }
	[class^=room0] .room_list_layout .tit_col .tit01 { font-size: 22px; }
	[class^=room0] .room_list_layout .tit_col::before { height: 65px; }
	[class^=room0] .room_list_layout .room_list .room_link .caption { gap: 30px; }
	[class^=room0] .room_list_layout .room_list .room_link .name { font-size: 22px; }
	[class^=room0] .room_list_layout .room_list .room_link .detail { font-size: 12px;}
	#room_nav h2 { font-size: 25px; }
	#room_nav .list_col li a { gap: 35px; padding: 15px 25px 15px 0; }
	#room_nav .list_col li .room_nav_photo { width: 24%; }
	#room_nav .list_col li .room_nav_name { font-size: 22px; }
	#room_nav .list_col li .room_nav_name .room_nav_detail { font-size: 15px; }
	#room_nav .list_col li .room_nav_name span:not(.room_nav_detail) { font-size: 20px; }
}


/* ---------------------------------------------------
	客室モーダル
------------------------------------------------------ */
[class^=room0] .room_detail .photo_col { position: relative; }
[class^=room0] .room_detail .photo_col .slick-list:after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, transparent 50%);  }
[class^=room0] .room_detail .photo_col .caption { color: #fff; position: absolute; top: calc(95% - 99px); left: 6%; }
[class^=room0] .room_detail .photo_col:not(:has(.slick-dots)) .caption { top: calc(95% - 70px); }
[class^=room0] .room_detail .photo_col .caption .name { font-size: 22px; }
[class^=room0] .room_detail .photo_col .caption .name span { font-size: 9px; display: block; line-height: 1; margin-bottom: 5px; }
[class^=room0] .room_detail .photo_col .caption .detail { font-size: 11px; }
[class^=room0] .room_detail .modal_txt { margin-top: clamp(55px, 9.091vw, 100px); }
[class^=room0] .room_detail .modal_txt .main_tit { font-size: 20px; line-height: 1.6; margin-bottom: clamp(20px, 3.636vw, 40px); }
[class^=room0] .room_detail .modal_txt p + p { margin-top: 1em; }
[class^=room0] .room_detail .modal_txt .list { margin-top: 1em; }
[class^=room0] .room_detail .modal_txt .list li { display: flex; line-height: 1.5; padding-top: 0.3em; }
[class^=room0] .room_detail .modal_txt .list li::before { content: '■'; }
[class^=room0] .room_detail .cmn_table { margin-top: clamp(50px, 7.727vw, 85px); border-top: 1px solid var(--color-bd); }
[class^=room0] .room_detail .cmn_table dt { font-size: 15px; color: rgba(0, 0, 0, 0.6);}
[class^=room0] .room_detail .cmn_table dd span { display: inline-block; }
[class^=room0] .room_detail .amenity_photo { margin-top: clamp(30px, 4.545vw, 50px); }
[class^=room0] .room_detail .calendar { margin-top: clamp(30px, 4.545vw, 50px); }
[class^=room0] .room_detail .calendar .cap + p { margin: 0 0 clamp(15px, 3.6%, 20px); font-size: 11px; }
[class^=room0] .room_detail .room_cal { min-height: 315px; }
[class^=room0] .room_detail .room_cal:has(table) { min-height: 0; }
[class^=room0] .room_detail .room_cal table { width: 100%; line-height: 1.6; text-align: center; table-layout: fixed; }
[class^=room0] .room_detail .room_cal caption { margin: 0 0 5px; font-size: 16px; text-align: left;}
[class^=room0] .room_detail .room_cal th,
[class^=room0] .room_detail .room_cal td { border: 1px solid #ddd; }
[class^=room0] .room_detail .room_cal :is(th, td):first-of-type,
[class^=room0] .room_detail .room_cal :is(th, td):first-of-type a { color: #da4e52; }
[class^=room0] .room_detail .room_cal :is(th, td):last-of-type,
[class^=room0] .room_detail .room_cal :is(th, td):last-of-type a { color: #8387bb; }
[class^=room0] .room_detail .room_cal th { padding: 10px 5px; font-size: 13px; font-weight: bold; background: var(--color-bg02); }
[class^=room0] .room_detail .room_cal td { padding: 5px; font-size: 12px; background: #fff; }
[class^=room0] .room_detail .calendar .link { margin: 5px 0 0; font-size: 13px; text-align: right; }
[class^=room0] .room_detail .calendar .link a { display: inline-block; border-bottom: 1px solid var(--color-bd); transition: border-color 0.5s; }
[class^=room0] .room_detail .btn { margin-top: clamp(25px, 3.636vw, 40px); }
[class^=room0] .room_detail .btn a { display: flex; align-items: center; justify-content: center; min-height: 60px; }

@media screen and (hover: hover) and (min-width: 651px) {
	[class^=room0] .room_detail .calendar .link a:hover { border-color: transparent; opacity: 1; }
}
@media screen and (min-width: 651px) {
	[class^=room0] .room_detail .calendar .cap { font-size: 20px; }
	[class^=room0] .room_detail .calendar .cap + p { font-size: 14px; }
	[class^=room0] .room_detail .room_cal { min-height: 340px; }
	[class^=room0] .room_detail .room_cal caption { font-size: 20px; }
	[class^=room0] .room_detail .room_cal th { font-size: 15px; }
	[class^=room0] .room_detail .room_cal td { font-size: 13px; }
	[class^=room0] .room_detail .calendar .link { margin: 10px 0 0; font-size: 14px; }
	[class^=room0] .room_detail .btn a { min-height: 85px; }

	[class^=room0] .room_detail .photo_col .caption { top: calc(95% - 141px); }
	[class^=room0] .room_detail .photo_col:not(:has(.slick-dots)) .caption { top: calc(95% - 100px); }
	[class^=room0] .room_detail .photo_col .caption .name { font-size: 32px; }
	[class^=room0] .room_detail .photo_col .caption .name span { font-size: 11px; margin-bottom: 10px;}
	[class^=room0] .room_detail .photo_col .caption .detail { font-size: 12px; }
	[class^=room0] .room_detail .modal_txt .main_tit { font-size: 25px; }
	[class^=room0] .room_detail .cmn_table dt { font-size: 17px; }
	[class^=room0] .room_detail .modal_txt p + p { margin-top: 1.5em; }
	[class^=room0] .room_detail .modal_txt .list { margin-top: 1.5em; }
}


/* ---------------------------------------------------
	room01
------------------------------------------------------ */
.room01 .tit02 { font-size: 15px; line-height: 1; margin-bottom: clamp(20px, 4.545vw, 50px); }
.room01 .tit02 span { display: block; font-size: 30px; }
.room01 #sec01 { padding-top: clamp(40px, 9.091vw, 100px); }
.room01 #sec01.room_list_layout .tit_col::before { background: #fff; }
.room01 #sec01.room_list_layout .room_list .room_link { color: #fff; }
.room01 #sec02 { padding-top: 65px;}

@media screen and (hover: hover) and (min-width: 651px) {
}
@media screen and (min-width: 651px) {
	.room01 .tit02 { font-size: 18px; }
	.room01 .tit02 span { font-size: 55px; }
}