/* ===============================
   kodawari-hero: 写真 + キャッチコピー帯
   SP: 写真とコピー帯の縦積み / PC: 同一面で左右合成
   =============================== */

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

	position: relative;
}

.kodawari-hero__frame {
	position: relative;
}

.kodawari-hero__media img {
	width: 100%;
	height: auto;
	aspect-ratio: 375 / 165;
	object-fit: cover;
}

.kodawari-hero__band {
	position: relative;
	background: var(--color-bg);
	padding-block: var(--space-5) var(--space-2);
	overflow: hidden;
}

/* 左端の枝葉の地紋（mask + トークン色。装飾なので aria 対象外） */
.kodawari-hero__band::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: var(--space-11);
	background-color: var(--color-accent);
	opacity: 0.18;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 240'%3E%3Cg fill='currentColor'%3E%3Cpath d='M8 236 C 34 170 52 110 88 16' stroke='currentColor' stroke-width='3' fill='none'/%3E%3Cellipse cx='30' cy='150' rx='16' ry='6' transform='rotate(-42 30 150)'/%3E%3Cellipse cx='52' cy='112' rx='16' ry='6' transform='rotate(-36 52 112)'/%3E%3Cellipse cx='68' cy='72' rx='16' ry='6' transform='rotate(-30 68 72)'/%3E%3Cellipse cx='42' cy='190' rx='16' ry='6' transform='rotate(-48 42 190)'/%3E%3Cellipse cx='84' cy='40' rx='14' ry='5' transform='rotate(-26 84 40)'/%3E%3C/g%3E%3C/svg%3E") left center / auto 100% no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 240'%3E%3Cg fill='currentColor'%3E%3Cpath d='M8 236 C 34 170 52 110 88 16' stroke='currentColor' stroke-width='3' fill='none'/%3E%3Cellipse cx='30' cy='150' rx='16' ry='6' transform='rotate(-42 30 150)'/%3E%3Cellipse cx='52' cy='112' rx='16' ry='6' transform='rotate(-36 52 112)'/%3E%3Cellipse cx='68' cy='72' rx='16' ry='6' transform='rotate(-30 68 72)'/%3E%3Cellipse cx='42' cy='190' rx='16' ry='6' transform='rotate(-48 42 190)'/%3E%3Cellipse cx='84' cy='40' rx='14' ry='5' transform='rotate(-26 84 40)'/%3E%3C/g%3E%3C/svg%3E") left center / auto 100% no-repeat;
}

.kodawari-hero__inner {
	position: relative;
	/* 地紋の帯ぶんだけ本文をインセット（18px gutter → 64px + 12px） */
	padding-left: calc(var(--space-10) + var(--space-3));
}

.kodawari-hero__title {
	font-size: var(--fs-hero-mobile);
	font-weight: var(--fw-medium);
	line-height: var(--lh-tight);
	letter-spacing: 0.1em;
	color: var(--color-text);
}

.kodawari-hero__lead {
	margin-top: var(--space-4);
	font-size: var(--fs-body-sm);
	line-height: var(--lh-loose);
	letter-spacing: 0.06em;
	color: var(--color-text-muted);
}

.kodawari-hero__lead-break {
	display: none;
}

/* 菱形 + 罫線のオーナメント */
.kodawari-hero__ornament {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin-top: var(--space-3);
}

.kodawari-hero__ornament::before {
	content: "";
	width: var(--space-2);
	height: var(--space-2);
	border: 1px solid var(--color-accent);
	transform: rotate(45deg);
}

.kodawari-hero__ornament::after {
	content: "";
	width: var(--space-9);
	border-top: 1px solid var(--color-accent);
}

@media (max-width: 767px) {
	.kodawari-hero__media img {
		height: 100%;
		aspect-ratio: auto;
		object-position: var(--photo-fv-object-position);
	}

	.kodawari-hero__band {
		position: static;
		padding: 0;
		background: transparent;
		overflow: visible;
	}

	.kodawari-hero__band::before {
		display: none;
	}

	.kodawari-hero__inner {
		margin: 0;
		padding-inline: var(--photo-fv-inline-padding);
	}

	.kodawari-hero__title {
		font-size: var(--fs-h2-mobile);
	}

	.kodawari-hero__lead {
		font-size: var(--fs-body-pc);
	}

	.kodawari-hero__lead-break {
		display: inline;
	}

	.kodawari-hero__ornament {
		display: none;
	}
}

/* ===============================
   PC: 写真右フルブリード + 左ベージュオーバーレイ
   =============================== */

@media (min-width: 768px) {
	.kodawari-hero__frame {
		display: flex;
		aspect-ratio: 1440 / 492;
	}

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

	.kodawari-hero__media {
		position: absolute;
		inset: 0;
	}

	.kodawari-hero__media img {
		width: 100%;
		height: 100%;
		aspect-ratio: auto;
		object-fit: cover;
		object-position: center 62%;
	}

	/* 写真の左側をベージュへ溶かすオーバーレイ */
	.kodawari-hero__media::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(90deg, var(--color-bg) 0%, var(--color-bg) 28%, transparent 45%);
	}

	/* 帯はセクション全高に伸ばし、地紋を全高に。文字ブロックは中央より下げる */
	.kodawari-hero__band {
		background: none;
		padding-block: 0;
		padding-top: var(--space-10);
		width: 100%;
		overflow: visible;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.kodawari-hero__band::before {
		opacity: 0.22;
		width: var(--space-12);
	}

	.kodawari-hero__inner {
		padding-left: var(--container-gutter);
	}

	.kodawari-hero__title {
		font-size: var(--fs-h2);
	}

	.kodawari-hero__lead {
		margin-top: var(--space-6);
		font-size: var(--fs-body-pc);
		color: var(--color-text);
	}

	.kodawari-hero__ornament {
		margin-top: var(--space-9);
	}
}