/* ===============================
   rooms-hero: パンくず・ページヒーロー・導入
   =============================== */

.rooms-hero {
	--photo-fv-object-position: 50% 45%;

	padding-block: var(--space-2) 0;
	background: var(--color-page-bg);
}

.rooms-hero__intro--mobile {
	display: none;
}

.rooms-hero__layout {
	margin-top: var(--space-1);
}

.rooms-hero__body {
	margin-inline: var(--space-3) var(--space-7);
	text-align: center;
}

.rooms-hero__title {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-4);
	color: var(--color-text);
	font-size: var(--fs-h2-mobile);
	font-weight: var(--fw-medium);
	letter-spacing: 0.18em;
	text-indent: 0.18em;
	white-space: nowrap;
}

.rooms-hero__title::before,
.rooms-hero__title::after {
	content: "";
	flex: 1 1 var(--space-11);
	max-width: var(--space-11);
	height: 1px;
	background: var(--color-main);
}

.rooms-hero__subcopy {
	margin-top: var(--space-1);
	width: calc(100% + var(--space-8));
	margin-left: calc(-1 * var(--space-5));
	font-size: var(--fs-body);
	letter-spacing: 0.08em;
}

.rooms-hero__subcopy-break {
	display: none;
}

.rooms-hero__photos {
	display: grid;
	gap: var(--space-1);
	margin-top: 0;
	margin-inline: var(--space-3) var(--space-7);
}

.rooms-hero__photo {
	width: 100%;
	aspect-ratio: 8 / 3;
	height: auto;
	object-fit: cover;
	border-radius: var(--radius-sm);
}

.rooms-hero__photo:nth-child(2) {
	aspect-ratio: 17 / 8;
}

.rooms-hero__intro {
	margin-top: 1px;
	margin-left: var(--space-3);
	font-size: var(--fs-body);
	line-height: var(--lh-tight);
}

.rooms-hero .page-breadcrumb {
	margin-inline: var(--space-3) var(--space-7);
}

@media (min-width: 768px) {
	.rooms-hero .photo-fv {
		--photo-fv-content-width: 46%;
	}

	.rooms-hero__frame > .container {
		max-width: calc(var(--container-max) + var(--container-gutter) * 2);
		padding-inline: var(--space-9);
	}

	.rooms-hero .page-breadcrumb--hero {
		position: static;
		width: auto;
		padding-inline: 0;
	}

	.rooms-hero .page-breadcrumb--hero::after {
		display: none;
	}

	.rooms-hero {
		padding-block: var(--space-7) var(--space-10);
	}

	.rooms-hero__layout {
		display: grid;
		grid-template:
			"body photos" auto
			"intro photos" 1fr
			/ 20fr 33fr;
		column-gap: var(--space-8);
		margin-top: var(--space-10);
	}

	.rooms-hero__body {
		grid-area: body;
		align-self: start;
		margin: var(--space-5) 0 0;
		text-align: left;
	}

	.rooms-hero__title {
		display: block;
		font-size: var(--fs-page-title);
		letter-spacing: 0.02em;
		text-indent: 0;
	}

	.rooms-hero__title::before,
	.rooms-hero__title::after {
		display: none;
	}

	.rooms-hero__subcopy {
		margin-top: var(--space-6);
		width: auto;
		margin-left: 0;
		font-size: var(--fs-page-lead);
		letter-spacing: 0.02em;
	}

	.rooms-hero__photos {
		grid-area: photos;
		grid-template-columns: 6fr 7fr;
		gap: var(--space-3);
		min-width: 0;
		margin: 0;
		aspect-ratio: 13 / 6;
	}

	.rooms-hero__photo {
		aspect-ratio: auto;
		height: 100%;
		border-radius: 0;
	}

	.rooms-hero__photo:nth-child(2) {
		aspect-ratio: auto;
	}

	.rooms-hero__intro {
		grid-area: intro;
		align-self: start;
		margin: var(--space-9) 0 0;
		font-size: var(--fs-body-pc);
		letter-spacing: 0.05em;
		line-height: var(--lh-page-intro);
	}

	.rooms-hero .page-breadcrumb {
		margin-inline: 0;
	}
}

@media (max-width: 767px) {
	.rooms-hero {
		padding-block: 0;
	}

	.rooms-hero__frame > .container {
		width: 100%;
		max-width: none;
		padding-inline: 0;
	}

	.rooms-hero__layout {
		display: contents;
		margin-top: 0;
	}

	.rooms-hero__body,
	.rooms-hero__photos,
	.rooms-hero .page-breadcrumb {
		margin-inline: 0;
	}

	.rooms-hero__title {
		display: block;
		font-size: var(--fs-h2-mobile);
		line-height: var(--lh-tight);
		white-space: normal;
	}

	.rooms-hero__title::before,
	.rooms-hero__title::after {
		display: none;
	}

	.rooms-hero__subcopy {
		width: auto;
		margin-top: var(--space-3);
		margin-left: 0;
		font-size: var(--fs-body-pc);
		line-height: var(--lh-body);
	}

	.rooms-hero__subcopy-break {
		display: inline;
	}

	.rooms-hero__photos {
		display: block;
		margin-top: 0;
	}

	.rooms-hero__photo {
		height: 100%;
		aspect-ratio: auto;
		border-radius: 0;
		object-position: var(--photo-fv-object-position);
	}

	.rooms-hero__photo:nth-child(2) {
		display: none;
	}

	.rooms-hero__intro--desktop {
		display: none;
	}

	.rooms-hero__intro--mobile {
		display: block;
		margin: 0 auto;
		padding-block: var(--space-5) var(--space-6);
		font-size: var(--fs-body-pc);
		line-height: var(--lh-body);
	}
}