/* ===============================
   contact-hero: ページタイトル帯
   SP: 左クリーム地に見出し、右に個室写真がかかる帯
   PC: 左45%クリーム地 / 右55%写真の2カラム帯
   =============================== */

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

	position: relative;
	background: var(--color-bg);
	overflow: hidden;
}

/* 左上の植物線画（mask + トークン色） */
.contact-hero::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: var(--space-11);
	height: var(--space-12);
	background-color: var(--color-accent);
	opacity: 0.4;
	pointer-events: none;
	z-index: 2;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 96'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M6 2C18 26 30 52 44 92'/%3E%3Cpath d='M14 22c8-8 18-10 28-8-4 10-14 16-26 14'/%3E%3Cpath d='M24 44c8-6 18-7 27-4-5 9-15 13-26 10'/%3E%3Cpath d='M33 64c7-5 15-6 23-4-4 8-13 12-22 10'/%3E%3Cpath d='M10 12c-6 2-9 7-9 13 6-2 9-7 9-13z'/%3E%3Cpath d='M20 34c-6 2-9 7-9 13 6-2 9-7 9-13z'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 96'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M6 2C18 26 30 52 44 92'/%3E%3Cpath d='M14 22c8-8 18-10 28-8-4 10-14 16-26 14'/%3E%3Cpath d='M24 44c8-6 18-7 27-4-5 9-15 13-26 10'/%3E%3Cpath d='M33 64c7-5 15-6 23-4-4 8-13 12-22 10'/%3E%3Cpath d='M10 12c-6 2-9 7-9 13 6-2 9-7 9-13z'/%3E%3Cpath d='M20 34c-6 2-9 7-9 13 6-2 9-7 9-13z'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}

.contact-hero__inner {
	position: relative;
}

/* ---- 写真（SP: 右側の背景として敷く） ---- */

.contact-hero__photo {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 55%;
}

.contact-hero__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 写真左端をクリーム地へフェード */
.contact-hero__photo::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, var(--color-bg) 0%, transparent 65%);
	pointer-events: none;
}

/* ---- テキスト ---- */

.contact-hero__text {
	position: relative;
	z-index: 1;
	width: 60%;
	padding: var(--space-7) 0 var(--space-7) var(--container-gutter-mobile);
}

.contact-hero__title {
	font-size: var(--fs-h2-mobile);
	color: var(--color-primary);
	letter-spacing: 0.1em;
	line-height: var(--lh-tight);
}

/* SPは「ご予約・/お問い合わせ」の単位で折る */
.contact-hero__title span {
	display: inline-block;
}

.contact-hero__ornament {
	display: flex;
	align-items: center;
	width: 70%;
	margin-top: var(--space-4);
}

.contact-hero__ornament::before,
.contact-hero__ornament::after {
	content: "";
	flex: 1;
	border-top: 1px solid var(--color-accent);
}

.contact-hero__ornament span {
	flex: none;
	width: var(--space-2);
	height: var(--space-2);
	margin-inline: var(--space-2);
	border: 1px solid var(--color-accent);
	transform: rotate(45deg);
}

.contact-hero__lead {
	margin-top: var(--space-4);
	font-size: var(--fs-body-sm);
	letter-spacing: 0.05em;
}

@media (max-width: 767px) {
	.contact-hero::before,
	.contact-hero__photo::before {
		display: none;
	}

	.contact-hero__ornament {
		display: none;
	}

	.contact-hero__lead {
		color: var(--color-sub);
	}
}

/* ===============================
   md: 768px〜（左45%テキスト / 右55%写真）
   =============================== */

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

	.contact-hero > .page-breadcrumb--hero {
		display: none;
	}

	.contact-hero::before {
		width: var(--space-13);
		height: var(--space-13);
	}

	.contact-hero__inner {
		display: flex;
		align-items: center;
		min-height: 508px;
	}

	.contact-hero__photo {
		width: 55%;
	}

	.contact-hero__photo::before {
		background: linear-gradient(to right, var(--color-bg) 0%, transparent 30%);
	}

	.contact-hero__text {
		width: 45%;
		padding: var(--space-10) var(--space-8) var(--space-10) var(--container-gutter);
	}

	.contact-hero__title {
		font-size: var(--fs-hero);
		max-width: none;
		white-space: nowrap;
	}

	.contact-hero__ornament {
		width: 80%;
		margin-top: var(--space-6);
	}

	.contact-hero__lead {
		margin-top: var(--space-6);
		font-size: var(--fs-body-pc);
		letter-spacing: 0.08em;
	}
}