@layer pages {
	/* ヒーロー（デザイン .hero） */
	.hero { position: relative; padding-block: 44px 52px; background: #fff; overflow: hidden; }
	.hero .in { width: min(1240px, 100% - 2 * var(--sp-gutter)); }
	.hero-b { display: grid; grid-template-columns: 1fr; gap: 26px; align-items: center; }
	.hero .sub {
		font-size: 12px; font-weight: 500; letter-spacing: .22em; color: var(--mint); margin-bottom: 20px;
		display: flex; align-items: center; gap: 14px;
	}
	.hero .sub::before { content: ""; width: 34px; height: 1px; background: var(--mint); flex: none; }
	/* スマホはデザイン SP（.sp .hero h1）の固定値。768px 以上は従来の clamp */
	.hero h1 { font-size: 20px; font-weight: 700; line-height: 1.7; letter-spacing: .03em; }
	.hero h1 .big {
		display: block; font-size: 25px; font-weight: 900; color: var(--mint-deep);
		letter-spacing: .045em; line-height: 1.5; margin-top: 6px;
	}
	.hero h1 .num {
		font-size: 1.5em; font-weight: 900; line-height: 0; letter-spacing: -.01em; color: var(--mint-deep);
		margin-inline: .06em; position: relative; inset-block-start: .04em;
	}
	.hero .facts { display: flex; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); max-width: 30em; }
	.hero .facts div { padding-inline-end: 18px; margin-inline-end: 18px; border-inline-end: 1px solid var(--line); }
	.hero .facts div:last-child { border: 0; margin: 0; padding: 0; }
	.hero .facts dt { font-size: 11px; font-weight: 500; letter-spacing: .18em; color: var(--ink-faint); line-height: 1.6; }
	.hero .facts dd { font-size: 19px; font-weight: 700; letter-spacing: .05em; line-height: 1.6; color: var(--ink); }
	.hero .facts dd small { font-size: 12.5px; font-weight: 500; color: var(--ink-soft); letter-spacing: .08em; margin-inline-start: 4px; }
	.hero p.lead { margin-block: 22px 28px; color: var(--ink-soft); font-size: 15px; line-height: 1.95; max-width: 27em; }

	/* キービジュアル：10個の輪（SVG）＋写真枠（縦3:4） */
	.kvwrap { position: relative; height: 340px; }
	.kv { position: absolute; inset-block-start: -10px; inset-inline-start: -96px; width: 340px; height: 340px; opacity: .92; }
	.pf {
		position: absolute; inset-block-start: 0; inset-inline-end: 0; width: 178px; aspect-ratio: 3 / 4; outline: 9px solid #fff;
		background: linear-gradient(165deg, #16302B, var(--mint)); overflow: hidden; box-shadow: 0 30px 60px -34px rgba(7, 88, 75, .55);
	}
	.pf img { width: 100%; height: 100%; object-fit: cover; }

	/* キービジュアルの写真の切り替え（10/26。田原の案、小杉さんの確認待ち）。写真枠（.pf）の中だけ。輪の図柄と左の文はそのまま。
	   6枚を重ね、透明度だけを切り替える（1枚5秒＋切り替え1.5秒＝6.5秒、6枚で39秒、繰り返し。10/26 に6秒から5秒に）。並びは inc/data/kv.php。
	   動きを減らす設定の人には切り替えず、最初の1枚（和歌山）だけを出す */
	.kvs__s { position: absolute; inset: 0; opacity: 0; }
	.kvs__s:first-child { opacity: 1; }
	.kvs__s img { display: block; }
	@media (prefers-reduced-motion: no-preference) {
		.kvs__s { animation: kvs-fade 39s ease-in-out infinite; }
		/* 最初の1枚は表示しきった状態から始める（-1.5s）。2枚目からは 6.5 秒ずつ遅らせる */
		.kvs__s:nth-child(1) { animation-delay: -1.5s; }
		.kvs__s:nth-child(2) { animation-delay: 5s; }
		.kvs__s:nth-child(3) { animation-delay: 11.5s; }
		.kvs__s:nth-child(4) { animation-delay: 18s; }
		.kvs__s:nth-child(5) { animation-delay: 24.5s; }
		.kvs__s:nth-child(6) { animation-delay: 31s; }
		.kvs.is-paused .kvs__s { animation-play-state: paused; }
	}
	/* 39秒のうち: 0〜1.5秒で浮かぶ、6.5秒まで表示、8秒までに消える */
	@keyframes kvs-fade {
		0% { opacity: 0; }
		3.846% { opacity: 1; }
		16.667% { opacity: 1; }
		20.513% { opacity: 0; }
		100% { opacity: 0; }
	}
	/* 一時停止のボタン（デザインにない部品。田原の案、小杉さんの確認待ち）。写真枠の右下に置く。
	   背景は濃い色（--ink #16211F）の透明度50%、記号は白。768px 以上は 36px 四方（スマホは下の 32px 四方）。
	   キーボードで選んだときは、白と濃い色の二重の枠にして、明るい写真の上でも暗い写真の上でも見えるようにする */
	.kvs__btn {
		position: absolute; inset-block-end: 8px; inset-inline-end: 8px; z-index: 1; width: 40px; height: 40px;
		display: grid; place-items: center; border: 0; padding: 0; background: rgb(22 33 31 / .5); color: #fff; cursor: pointer;
	}
	.kvs__btn[hidden] { display: none; }
	.kvs__btn:hover { background: rgb(22 33 31 / .7); }
	.kvs__btn:focus-visible { outline: 2px solid #fff; outline-offset: 0; box-shadow: 0 0 0 4px var(--ink); }
	@media (min-width: 768px) { .kvs__btn { width: 36px; height: 36px; } }
	/* スマホ（767px まで）は写真枠が画面の大部分を占めるので、目立たないように 32px 四方、記号 12px、端から 6px にする（10/26）。
	   形は 768px 以上と同じ四角（丸にしたあと四角に戻した）。色と透明度は同じ */
	@media (max-width: 767px) {
		.kvs__btn { width: 32px; height: 32px; inset-block-end: 6px; inset-inline-end: 6px; }
		.kvs__btn svg { width: 12px; height: 12px; }
	}
	.kvs__i-play { display: none; }
	.kvs.is-paused .kvs__i-pause { display: none; }
	.kvs.is-paused .kvs__i-play { display: block; }
	@media (prefers-reduced-motion: reduce) { .kvs__btn { display: none; } }

	@media (min-width: 768px) {
		.hero { padding-block: 72px 72px; }
		.hero h1 { font-size: clamp(20px, 1.2rem + 1vw, 34px); }
		.hero h1 .big { font-size: clamp(25px, 1.3rem + 2.4vw, 46px); }
		.hero .facts { margin-top: 36px; padding-top: 24px; }
		.hero .facts div { padding-inline-end: 40px; margin-inline-end: 40px; }
		.hero .facts dd { font-size: 23px; }
		.hero p.lead { font-size: 17px; line-height: 2.05; margin-block: 30px 38px; }
		.kvwrap { height: 440px; }
		.kv { width: 480px; height: 480px; inset-inline-start: -60px; inset-block-start: -20px; }
		.pf { width: 300px; inset-block-start: 20px; outline-width: 12px; }
	}
	@media (min-width: 1180px) {
		.hero { padding-block: 104px 96px; }
		.hero-b { grid-template-columns: 1fr 544px; gap: 56px; }
		.hero .sub { }
		.hero h1 { line-height: 1.5; letter-spacing: .05em; }
		.hero h1 .big { line-height: 1.38; margin-top: 10px; }
		.hero h1 .num { font-size: 1.62em; }
		.kvwrap { height: 492px; }
		.kv { width: 560px; height: 560px; inset-block-start: -26px; inset-inline-start: -118px; }
		.pf { width: 347px; inset-block-start: 30px; outline-width: 14px; }
	}

	/* 事業（デザイン .biz2）。10/26 に3事業へ（田原の案。小杉さんの確認待ち）: 1023px までは1列、1024px から3列。部品と値はデザインのまま */
	.biz2 { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--ink); }
	.biz2 > article { padding-block: 30px 34px; border-bottom: 1px solid var(--line); position: relative; }
	.bz-h { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; }
	.bz-ic { width: 52px; height: 52px; flex: none; background: var(--mint-tint); display: grid; place-items: center; color: var(--mint); }
	.bz-h .no { font-size: 11.5px; font-weight: 500; letter-spacing: .2em; color: var(--ink-faint); display: block; margin-bottom: 5px; }
	.bz-h h3 { font-size: 19px; letter-spacing: .07em; }
	.biz2 p { color: var(--ink-soft); font-size: 14.5px; margin-bottom: 22px; }
	.bz-l { display: grid; gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
	.bz-l li { background: #fff; display: flex; align-items: center; gap: 13px; padding: 13px 4px; font-size: 14px; letter-spacing: .03em; }
	.bz-l li svg { color: var(--mint); }
	.biz2 .more { margin-top: 22px; display: inline-flex; align-items: center; gap: 9px; color: var(--mint); font-size: 13.5px; font-weight: 500; }
	.biz2 .more .ar { color: var(--mint); }
	.biz2 .more:hover { text-decoration: underline; text-underline-offset: .25em; }
	@media (min-width: 768px) {
		.biz2 > article { padding-block: 44px 48px; }
		.bz-ic { width: 64px; height: 64px; }
		.bz-h h3 { font-size: 23px; }
	}
	/* 3列。列の間はデザインと同じ 64px と細い縦線。項目数が違う（2・3・3）ので「詳細」リンクは各列の下端にそろえる */
	@media (min-width: 1024px) {
		.biz2 { grid-template-columns: repeat(3, 1fr); gap: 0 64px; }
		.biz2 > article { display: flex; flex-direction: column; }
		.biz2 > article:not(:last-child)::after { content: ""; position: absolute; inset-block: 44px 48px; inset-inline-end: -32px; width: 1px; background: var(--line); }
		.biz2 .bz-l { margin-bottom: 22px; }
		.biz2 .more { margin-top: auto; align-self: flex-start; }
	}

	/* 冊子（デザイン .bks） */
	.bks { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
	.bk .ph { aspect-ratio: 1 / 1.414; background: var(--mint-wash); border: 1px solid var(--line); position: relative; overflow: hidden; }
	.bk .ph img { width: 100%; height: 100%; object-fit: cover; }
	.bk b { display: block; font-size: 14px; font-weight: 500; margin-top: 14px; letter-spacing: .04em; line-height: 1.6; }
	/* 冊子のページへのリンク（10/26）。関連団体のリンクと同じく、名前の後ろに外部リンクの印、マウスを乗せると名前に下線 */
	a.bk { display: block; }
	a.bk .ex { display: inline-block; margin-inline-start: 6px; vertical-align: -1px; color: var(--ink-faint); }
	a.bk:hover b { text-decoration: underline; text-underline-offset: .25em; }
	@media (min-width: 768px) { .bks { grid-template-columns: repeat(4, 1fr); gap: 30px; } }
}