/* ========================================
ROOMS
======================================== */

.rooms-page{
	color:#222;
}

/* ----------------------------------------
ROOM SECTION
---------------------------------------- */
.room-section{
	position:relative;
	padding:50px 0 60px;
	border-top:0;
}

.sub-intro + .room-section{
	padding-top:50px;
}

.room-inner{
	display:grid;
	grid-template-columns:minmax(0,1.45fr) minmax(340px,.55fr);
	align-items:start;
	width:calc(100% - 120px);
	max-width:1200px;
	margin:0 auto;
}

/* ----------------------------------------
ROOM IMAGE
---------------------------------------- */
.room-image{
	position:relative;
	overflow:hidden;
}

.room-image img{
	display:block;
	width:100%;
	height:auto;
	aspect-ratio:8 / 5;
	object-fit:cover;
}

/* ----------------------------------------
ROOM CONTENT
---------------------------------------- */
.room-content{
	position:relative;
	padding:0 0 30px 45px;
	color:#222;
}

.room-heading{
	margin-bottom:20px;
}

.room-number{
	display:inline-block;
	margin-right:12px;
	font-family:"Times New Roman","Times",serif;
	font-size:12px;
	line-height:1;
	letter-spacing:.12em;
}

.room-en{
	display:inline-block;
	font-family:"Times New Roman","Times",serif;
	font-size:12px;
	line-height:1;
	letter-spacing:.16em;
}

.room-title{
	margin:12px 0 0;
	font-size:26px;
	font-weight:400;
	line-height:1.6;
}

.room-description{
	margin:0 0 24px;
	font-size:16px;
	line-height:1.8;
}

/* ----------------------------------------
ROOM SPEC
---------------------------------------- */
.room-spec{
	margin:0;
	border-top:1px solid #c9c5ba;
}

.room-spec-row{
	display:grid;
	grid-template-columns:95px 1fr;
	border-bottom:1px solid #c9c5ba;
}

.room-spec dt,
.room-spec dd{
	margin:0;
	padding:11px 0;
	font-size:14px;
	line-height:1.7;
}

.room-spec dt{
	padding-right:15px;
	font-weight:400;
}

.room-spec dd{
	color:#555;
}

/* ----------------------------------------
ROOM REVERSE
---------------------------------------- */
.room-section.reverse .room-inner{
	grid-template-columns:minmax(340px,.55fr) minmax(0,1.45fr);
}

.room-section.reverse .room-image{
	grid-column:2;
	grid-row:1;
}

.room-section.reverse .room-content{
	grid-column:1;
	grid-row:1;
	padding:0 45px 30px 0;
}

/* ----------------------------------------
ROOM SUB IMAGE
---------------------------------------- */
.room-sub-image{
	position:relative;
	width:calc(100% - 120px);
	max-width:1200px;
	margin:25px auto 0;
}

.room-sub-image img{
	position:relative;
	z-index:2;
	display:block;
	width:48%;
	height:auto;
	aspect-ratio:8 / 5;
	object-fit:cover;
}

/* 柳の装飾 */
.room-sub-image::after{
	content:"";
	position:absolute;
	z-index:1;
	top:50%;
	right:3%;
	width:43%;
	aspect-ratio:1.55 / 1;
	background:url("../images/rooms/yanagi.png") center / contain no-repeat;
	opacity:.12;
	transform:translateY(-50%);
	pointer-events:none;
}

/* 偶数客室 */
.room-section.reverse .room-sub-image img{
	margin-left:auto;
}

.room-section.reverse .room-sub-image::after{
	right:auto;
	left:3%;
	transform:translateY(-50%) scaleX(-1);
}

/* ----------------------------------------
ROOM DIVIDER
---------------------------------------- */
.rooms-page>section:not(.sub-hero)+section::before{
	height:1px;
	background:#c9c5ba;
}

/* ----------------------------------------
ROOM INFORMATION
---------------------------------------- */
.rooms-information{
	position:relative;
	padding:60px 0;
	background:#ebe8e0;
}

.rooms-information-inner{
	width:calc(100% - 120px);
	max-width:1000px;
	margin:0 auto;
}

.rooms-information-head{
	margin-bottom:30px;
	text-align:center;
}

.rooms-information-en{
	display:block;
	margin-bottom:10px;
	font-family:"Times New Roman","Times",serif;
	font-size:12px;
	line-height:1;
	letter-spacing:.16em;
}

.rooms-information-title{
	margin:0;
	font-size:27px;
	font-weight:400;
	line-height:1.6;
}

/* ----------------------------------------
AMENITIES
---------------------------------------- */
.amenities{
	display:grid;
	grid-template-columns:repeat(2,1fr);
	gap:0 50px;
	margin:0;
	border-top:1px solid #c9c5ba;
}

.amenities-row{
	display:grid;
	grid-template-columns:130px 1fr;
	border-bottom:1px solid #c9c5ba;
}

.amenities dt,
.amenities dd{
	margin:0;
	padding:15px 0;
	font-size:14px;
	line-height:1.8;
}

.amenities dt{
	padding-right:20px;
	font-weight:400;
}

.amenities dd{
	color:#555;
}

/* ========================================
TABLET
======================================== */
@media(max-width:1100px){
	.room-section{
		padding:45px 0 55px;
	}

	.sub-intro + .room-section{
		padding-top:40px;
	}

	.room-inner{
		grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr);
		width:calc(100% - 80px);
	}

	.room-content{
		padding:0 0 25px 35px;
	}

	.room-section.reverse .room-inner{
		grid-template-columns:minmax(320px,.8fr) minmax(0,1.2fr);
	}

	.room-section.reverse .room-content{
		padding:0 35px 25px 0;
	}

	.room-title{
		font-size:24px;
	}

	.room-description{
		font-size:15px;
	}

	.room-sub-image{
		width:calc(100% - 80px);
		margin-top:22px;
	}

	.rooms-information-inner{
		width:calc(100% - 80px);
	}
}

/* ========================================
MOBILE
======================================== */
@media(max-width:768px){
	.room-section{
		padding:40px 0 45px;
	}

	.sub-intro + .room-section{
		padding-top:40px;
	}

	.room-inner,
	.room-section.reverse .room-inner{
		display:block;
		width:100%;
	}

	.room-section.reverse .room-image,
	.room-section.reverse .room-content{
		display:block;
	}

	.room-image{
		width:100%;
	}

	.room-content,
	.room-section.reverse .room-content{
		width:calc(100% - 44px);
		margin:0 auto;
		padding:28px 0 0;
	}

	.room-heading{
		margin-bottom:18px;
	}

	.room-number,
	.room-en{
		font-size:11px;
	}

	.room-title{
		margin-top:10px;
		font-size:21px;
	}

	.room-description{
		margin-bottom:22px;
		font-size:15px;
		line-height:1.8;
	}

	.room-spec-row{
		grid-template-columns:85px 1fr;
	}

	.room-spec dt,
	.room-spec dd{
		padding:10px 0;
		font-size:13px;
	}

	/* SUB IMAGE */
	.room-sub-image{
		width:calc(100% - 44px);
		margin-top:22px;
	}

	.room-sub-image img,
	.room-section.reverse .room-sub-image img{
		width:68%;
		margin:0;
	}

	.room-section.reverse .room-sub-image img{
		margin-left:auto;
	}

	/* INFORMATION */
	.rooms-information{
		padding:50px 0;
	}

	.rooms-information-inner{
		width:calc(100% - 44px);
	}

	.rooms-information-head{
		margin-bottom:25px;
	}

	.rooms-information-en{
		font-size:11px;
	}

	.rooms-information-title{
		font-size:21px;
	}

	.amenities{
		display:block;
	}

	.amenities-row{
		grid-template-columns:100px 1fr;
	}

	.amenities dt,
	.amenities dd{
		padding:12px 0;
		font-size:13px;
	}
}

/* ========================================
SMALL MOBILE
======================================== */
@media(max-width:380px){
	.room-content,
	.room-section.reverse .room-content,
	.room-sub-image,
	.rooms-information-inner{
		width:calc(100% - 30px);
	}

	.room-title{
		font-size:20px;
	}

	.room-sub-image img,
	.room-section.reverse .room-sub-image img{
		width:75%;
	}

	.amenities-row{
		grid-template-columns:90px 1fr;
	}
}