/* 元の4案を、背景写真・見出しSVG・本文HTMLの3層で再現する。 */
.km-hero {
	position: relative;
	overflow: hidden;
	background: #fff;
}
.km-hero__stage {
	position: relative;
	container-type: inline-size;
	width: 100%;
	margin-inline: auto;
	aspect-ratio: 390 / 693.68;
	background: #fff;
}
.km-hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 1s ease, visibility 1s;
}
.km-hero__slide.is-active { opacity: 1; visibility: visible; z-index: 1; }
.km-hero__background, .km-hero__heading, .km-hero__copy { position: absolute; inset: 0; }
.km-hero__background img, .km-hero__heading img { display: block; width: 100%; height: 100%; object-fit: fill; }
.km-hero__background { z-index: 1; }
.km-hero__copy { z-index: 2; overflow: hidden; }
.km-hero__heading { z-index: 3; pointer-events: none; }
/* タブレット以上: 背景は元の写真を中央に置いたまま左右に延ばした -wide 版。枠（見出し・本文）の大きさ・位置は変えず、写真だけが画面幅いっぱいに続く。
   section の overflow hidden で画面の外は切る。 */
@media (min-width: 600px) {
	.km-hero__background img { position: absolute; top: 0; height: 100%; max-width: none; left: -50%; width: 200%; } /* タブレット 3336 / 1668 */
}
@media (min-width: 1024px) {
	.km-hero__background img { left: -75%; width: 250%; } /* PC 5400 / 2160 */
}
.km-hero__copy--pc, .km-hero__copy--tb { display: none; }
.km-hero__text {
	position: absolute;
	margin: 0;
	padding: 0;
	font-family: var(--font-base);
	font-weight: 400;
	font-synthesis: none;
	white-space: pre-wrap;
	overflow-wrap: break-word;
	line-break: auto;
	transform-origin: 0 0;
}
@media (min-width: 600px) and (max-width: 1023.98px) {
	.km-hero__stage { width: min(100%, 720px); aspect-ratio: 834 / 946; }
	.km-hero__copy--tb { display: block; }
	.km-hero__copy--sp { display: none; }
}
@media (min-width: 1024px) {
	.km-hero__stage {
		width: min(100%, 1200px);
		/* ヘッダーと次のセクションへの余白を残す。狭い高さでも本文を縮めすぎない。 */
		max-width: clamp(1040px, calc(191.489svh - 292.979px), 1200px);
		aspect-ratio: 1440 / 752;
	}
	.km-hero__copy--pc { display: block; }
	.km-hero__copy--sp { display: none; }
}
/* 写真の上でも本文が読めるように、サイト共通の落ち着いた文字色へ。 */
.km-hero__slide[data-slide="2"] .km-hero__text,
.km-hero__slide[data-slide="3"] .km-hero__text { color: #706963 !important; }
.km-hero__slide[data-slide="1"] .km-hero__text { text-shadow: 0 1px 5px rgb(0 0 0 / 30%); }
/* 帯レイヤー（1 案目）: 枠の内側は元画像と同じ横方向のグラデーション、枠の外は両端の色をそのまま画面端まで延ばす。写真レイヤーの帯の行は透明にしてある。 */
.km-hero__band { display: none; }
@media (min-width: 600px) {
	.km-hero__band {
		display: block;
		position: absolute;
		z-index: 1;
		left: 0;
		right: 0;
		top: 89.746%; /* タブレット図案 1698 / 1892 */
		bottom: 0;
		background: linear-gradient(90deg, rgb(250 163 29), rgb(239 116 14) 50%, rgb(229 71 1));
	}
	.km-hero__band::before, .km-hero__band::after { content: ""; position: absolute; top: 0; bottom: 0; width: 50vw; }
	.km-hero__band::before { right: 100%; background: rgb(250 163 29); }
	.km-hero__band::after { left: 100%; background: rgb(229 71 1); }
}
@media (min-width: 1024px) {
	.km-hero__band { top: 83.26%; } /* PC 図案 940 / 1129 */
}
/* 4 案目: 散らした文章は枠で切らず、画面の両脇まで続ける（section の端で切る） */
/* 4 案目（PC）だけ本文を枠の外へ出す。タブレット・スマホは従来どおり枠で切る。全行に改行があるので折り返しを禁じ、代替書体でも行数が増えないようにする */
@media (min-width: 1024px) {
	.km-hero__slide[data-slide="4"] .km-hero__copy { overflow: visible; }
}
.km-hero__slide[data-slide="4"] .km-hero__text { white-space: pre; }
/* 飾りの層（4 案目）: 縦書きの SVG とロゴ。背景の上・本文の下（Figma と同じ重なり順）。枠の外は切る。
   ロゴの位置・大きさ・角度は Figma の値（左上の点・幅・高さ・回転）を枠に対する割合にしたもの。 */
.km-hero__deco { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.km-hero__deco-vertical { position: absolute; inset: 0; }
.km-hero__deco-vertical img { display: block; width: 100%; height: 100%; object-fit: fill; }
.km-hero__deco-logo {
	position: absolute;
	max-width: none;
	object-fit: cover;
	transform-origin: 0 0;
	/* スマホ 390×693.68: 左上 (265.62, 227.34)、87.77×16.46、17.91° */
	left: 68.1069%; top: 32.7731%; width: 22.5039%; height: 2.3723%;
	transform: rotate(-17.91deg);
}
@media (min-width: 600px) {
	/* タブレット 834×946: 左上 (-42.83, 707.42)、241.57×45.29、13.63° */
	.km-hero__deco-logo { left: -5.1353%; top: 74.7796%; width: 28.9654%; height: 4.7880%; transform: rotate(-13.6336deg); }
}
@media (min-width: 1024px) {
	/* PC 1440×752: 左上 (281, 700.69)、197.36×37.01、17.91° */
	.km-hero__deco-logo { left: 19.5139%; top: 93.1773%; width: 13.7057%; height: 4.9209%; transform: rotate(-17.91deg); }
}
.km-hero__slide[data-slide="4"] .km-hero__copy { z-index: 2; }
@media (prefers-reduced-motion: reduce) {
	.km-hero__slide { transition: none; }
}