/* private-hero: パンくず / 写真付きヒーロー / 個室概要 */

main:has(#private-hero) {
	background: var(--color-white);
}

.private-hero {
	--photo-fv-object-position: 48% 52%;

	max-width: 327px;
	margin-inline: auto;
	background: var(--color-bg);
}

.private-hero__frame {
	position: relative;
}

.private-hero__breadcrumb {
	max-width: 327px;
	margin-inline: auto;
	background: var(--color-bg);
	border-bottom: 1px solid var(--color-border-soft);
}

.private-hero__breadcrumb-nav {
	padding-block: var(--space-1);
}

.private-hero__breadcrumb-list {
	display: flex;
	align-items: center;
	gap: var(--space-5);
	color: var(--color-sub);
	font-size: 9px;
	letter-spacing: 0.08em;
}

.private-hero__breadcrumb-list li + li {
	position: relative;
}

.private-hero__breadcrumb-list li + li::before {
	content: "";
	position: absolute;
	top: 50%;
	left: calc(-1 * var(--space-3));
	width: var(--space-2);
	height: var(--space-2);
	border-top: 1px solid var(--color-main);
	border-right: 1px solid var(--color-main);
	transform: translate(-50%, -50%) rotate(45deg);
}

.private-hero__breadcrumb-list a {
	color: var(--color-primary);
}

.private-hero__visual {
	max-width: 327px;
	margin-inline: auto;
	background: var(--color-bg);
}

.private-hero__media img {
	width: 100%;
	aspect-ratio: 5 / 2;
	object-fit: cover;
	object-position: 48% 52%;
}

.private-hero__heading {
	padding: var(--space-1) var(--container-gutter-mobile) 0;
	text-align: center;
}

.private-hero__title {
	font-size: var(--fs-body);
	font-weight: var(--fw-normal);
	letter-spacing: 0.14em;
}

.private-hero__title-break {
	display: none;
}

.private-hero__sub {
	margin-top: var(--space-1);
	color: var(--color-primary);
	font-size: 10px;
	letter-spacing: 0.14em;
}

.private-hero__overview {
	max-width: 327px;
	margin-inline: auto;
	padding-inline: 28px;
	padding-top: 0;
	padding-bottom: var(--space-1);
	background-color: var(--color-bg);
	background-image: url("../../img/bg_top-concrete.webp");
	background-repeat: repeat;
}

.private-hero__text {
	font-size: 9px;
	line-height: 1.4;
	letter-spacing: 0.045em;
}

.private-hero__text > span,
.private-hero__keep {
	display: inline;
}

.private-hero__facts {
	margin-top: var(--space-1);
	border-top: 1px solid var(--color-comparison-line);
}

.private-hero__fact {
	padding: 1px var(--space-2);
	border-bottom: 1px solid var(--color-comparison-line);
	font-size: 9px;
	letter-spacing: 0.08em;
}

@media (min-width: 768px) {
	.private-hero {
		max-width: none;
		background: var(--color-bg);
	}

	.private-hero__breadcrumb,
	.private-hero__overview {
		max-width: none;
	}

	.private-hero__breadcrumb-nav {
		max-width: 1440px;
		padding-inline: 28px;
		padding-block: var(--space-5);
	}

	.private-hero__breadcrumb-list {
		font-size: var(--fs-body-pc);
	}

	.private-hero__frame > .page-breadcrumb--hero {
		position: static;
		width: auto;
		max-width: 1440px;
		margin-inline: auto;
		padding: var(--space-5) 28px;
	}

	.private-hero__frame > .page-breadcrumb--hero::after {
		display: none;
	}

	.private-hero__frame > .page-breadcrumb--hero .page-breadcrumb__list {
		font-size: var(--fs-body-pc);
	}

	.private-hero__visual {
		display: grid;
		grid-template-columns: 64% 36%;
		min-height: 610px;
		max-width: none;
		margin-inline: 0;
	}

	.private-hero__media {
		position: relative;
		overflow: hidden;
	}

	.private-hero__media::after {
		content: "";
		position: absolute;
		inset: 0 0 0 auto;
		width: 240px;
		background: linear-gradient(to right, rgb(250 244 236 / 0%), var(--color-bg));
	}

	.private-hero__media img {
		height: 100%;
		aspect-ratio: auto;
		object-position: 48% 50%;
		transform: scale(1.15);
		transform-origin: right center;
	}

	.private-hero__heading {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: var(--space-10) var(--space-9) var(--space-10) var(--space-4);
		text-align: left;
		transform: translateY(-30px);
	}

	.private-hero__title {
		font-size: var(--fs-section-title-lg);
		line-height: 1.8;
		letter-spacing: 0.18em;
	}

	.private-hero__title-break {
		display: block;
	}

	.private-hero__sub {
		margin-top: var(--space-5);
		color: var(--color-text);
		font-size: var(--fs-page-lead);
	}

	.private-hero__overview {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 100px;
		max-width: 1440px;
		padding: 60px 100px 56px;
	}

	.private-hero__text {
		font-size: var(--fs-body-pc);
		line-height: 2.15;
		letter-spacing: 0.07em;
	}

	.private-hero__facts {
		align-self: start;
		margin-top: var(--space-1);
	}

	.private-hero__fact {
		padding: var(--space-6);
		text-align: center;
		font-size: var(--fs-page-lead);
	}
}

@media (max-width: 767px) {
	.private-hero,
	.private-hero__breadcrumb,
	.private-hero__visual,
	.private-hero__overview {
		width: 100%;
		max-width: none;
	}

	.private-hero__breadcrumb-nav {
		padding-block: 0;
	}

	.private-hero__breadcrumb-list {
		gap: var(--space-6);
		font-size: var(--fs-body);
		line-height: var(--lh-tight);
	}

	.private-hero__breadcrumb-list a {
		display: inline-flex;
		align-items: center;
		min-height: var(--space-9);
	}

	.private-hero__visual {
		display: contents;
	}

	.private-hero__media img {
		height: 100%;
		aspect-ratio: auto;
		object-position: var(--photo-fv-object-position);
	}

	.private-hero__heading {
		padding: 0;
	}

	.private-hero__title {
		font-size: var(--fs-h2-mobile);
		line-height: var(--lh-tight);
	}

	.private-hero__sub {
		margin-top: var(--space-3);
		font-size: var(--fs-body);
		line-height: var(--lh-body);
	}

	.private-hero__overview {
		padding: var(--space-6) var(--container-gutter-mobile);
	}

	.private-hero__text {
		font-size: var(--fs-body-pc);
		font-feature-settings: "palt";
		line-height: var(--lh-body);
		letter-spacing: 0.02em;
		word-break: auto-phrase;
	}

	.private-hero__text > span {
		display: block;
	}

	.private-hero__text > span + span {
		margin-top: var(--space-4);
	}

	.private-hero__keep {
		white-space: nowrap;
	}

	.private-hero__facts {
		margin-top: var(--space-6);
	}

	.private-hero__fact {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: calc(var(--space-8) - var(--space-1));
		padding: var(--space-1) var(--space-3);
		font-size: var(--fs-body-pc);
		line-height: var(--lh-tight);
		text-align: center;
	}
}