/**
 *
 * theme-okunankai.css
 *
 * 奥南会 独自デザインテーマ（Editorial Academy）
 * 参照元サイトのデザイン言語（ポップな円形モチーフ・巨大英字ワードマーク・
 * 波形区切り・点線装飾・ピル型フローティングナビ）を廃し、
 * 明朝体見出し × 深緑・生成り・金の落ち着いた編集的デザインへ全面転換する。
 * 全ページで各 page-*.css の後に読み込むこと。
 *
 */

/* ------------------------------------------------------------
 1. デザイントークン（既存変数の上書き）
------------------------------------------------------------ */
:root {
	/* 深緑（松葉・常磐）系へ全面転換 */
	--color-main: #1e5b41;
	--color-main2: #174934;
	--color-accent: #4f7d68;
	--color-accent2: #24634a;
	--color-accent3: #2e6e52;
	--color-accent4: #6d9180;
	--color-accent5: #9dbfae;
	--color-accent6: #1b503a;
	--color-accent7: #123527;

	/* 生成り（アイボリー）基調 */
	--color-bg5: #f1eee4;
	--color-bg6: #efece1;
	--color-bg7: #e7e3d5;
	--color-bg8: #f6f4ec;
	--color-bg10: #ece8db;
	--color-bg13: #e4e0d2;

	/* 罫線 */
	--color-line: #8d876f;
	--color-line3: #c2bca6;
	--color-line4: #ddd8c6;

	/* テキスト */
	--color-txt: #23271f;
	--color-txt8: #8ba896;

	/* 金（アンティークゴールド）アクセント */
	--okn-gold: #a98a45;
	--okn-gold-soft: #c8b06a;
	--okn-ink: #23271f;
	--okn-cream: #f6f4ec;
	--okn-cream2: #efece1;
	--okn-green: #1e5b41;
	--okn-green-deep: #143f2d;
	--okn-green-night: #0e2c20;
	/* 朱：番号・引用など「点」でだけ使う差し色（面には使わない） */
	--okn-vermilion: #b43a2b;
	--okn-serif: 'Noto Serif JP', 'Noto Serif', serif;
	--okn-en-serif: 'DM Serif Display', serif;
	/* 本文・UI の和文ゴシック。全ページで Noto Sans JP を読み込むようにした（2026-07-30）。 */
	--okn-sans: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
	--okn-hairline: 1px solid rgba(35, 39, 31, 0.18);
	--okn-hairline-light: 1px solid rgba(246, 244, 236, 0.28);

	/* 明朝を正式なセリフ書体に */
	--font-mincho: 'Noto Serif JP', 'Noto Serif', serif;
	--font-mincho2: YakuHanMP, 'Noto Serif JP', 'Noto Serif', serif;

	/* 参照元の書体トークンに和文を補う。
	   --font-sans-serif は 'Albert Sans' だけを指しており、この書体には和文が無い。
	   STORIES・活動・トップの大見出しがこれを使っていたため、和文だけが
	   端末既定のゴシック（Windows は游ゴシック、mac はヒラギノ）へ落ち、
	   ページごと・端末ごとに別の書体で表示されていた。欧文は Albert Sans のまま、
	   和文は Noto Sans JP で受ける。 */
	--font-sans-serif: 'Albert Sans', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
	--font-gothic: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
	--font-gothic2: YakuHanJP, 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
	--font-gothic3: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', 'Noto Sans JP', sans-serif;
}

/* ------------------------------------------------------------
 2. 汎用：角丸・装飾の沈静化
------------------------------------------------------------ */
/* 極端な角丸（参照元の署名）を上品な小Rへ */
.c-radius-sm,
.c-radius-2xs2,
.c-radius-3xs,
.c-radius-2xs3 {
	border-radius: 12px !important;
}

/* 点線モチーフ（SVG stroke-dasharray）→ 実線へ */
.c-dashed__svg line,
.c-dashed__svg path {
	stroke-dasharray: 0 !important;
}

/* グレイン（紙目）テクスチャの全廃：ノイズ画像レイヤーを外しグラデーションのみ残す */
[class*='c-texture-']:not(.c-texture-before-after):not(.c-texture-before):not(.c-texture-overlay) {
	background-image: none !important;
}

.c-texture-before::before,
.c-texture-after::after,
.c-texture-before-after::before,
.c-texture-before-after::after,
.c-texture-overlay::before {
	background-image: var(--background, linear-gradient(var(--pallet-transp), var(--pallet-transp))) !important;
	background-size: 100% 100% !important;
}

/* ------------------------------------------------------------
 3. セクション見出し（c-title）
    丸アイコン＋英語ラベル → 金の罫＋セリフ小型キャップへ
------------------------------------------------------------ */
.c-title {
	gap: 0;
}

.c-title .c-title__icon {
	display: none !important;
}

.c-title .c-title__txt {
	font-family: var(--okn-en-serif);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.32em;
	font-size: var(--font-size14);
	color: var(--okn-ink);
	display: inline-flex;
	align-items: center;
}

.c-title .c-title__txt::before {
	content: '';
	display: inline-block;
	width: 3.4rem;
	height: 1px;
	background-color: var(--okn-gold);
	margin-right: 1.4rem;
	flex: none;
}

/* 白抜き系バリアント（暗背景上）
   ※l-spotlight 帯は 2026-07-29 の「和紙の帯」刷新でクリーム地になったため
   このリストから外した */
.c-title.-white-black .c-title__txt,
.c-title.-yellow-white .c-title__txt {
	color: var(--okn-cream);
}

/* home-people は元デザインの明るいグラデーション背景に戻したため、他の白抜き
   バリアントとは逆に濃色を保つ（-white-black 修飾クラスの白抜き指定を打ち消す） */
.home-people .c-title .c-title__txt {
	color: var(--okn-ink) !important;
}

/* ------------------------------------------------------------
 4. ヘッダー：ピル型フローティング → 全幅スリムバー
------------------------------------------------------------ */
.l-header::before {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 7.2rem;
	background-color: rgba(246, 244, 236, 0.94);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border-bottom: var(--okn-hairline);
	z-index: calc(var(--z-index-l-header__nav) - 1);
	transition: background-color 0.4s ease, border-color 0.4s ease;
}

.l-header__logo {
	position: fixed;
	top: 0;
	left: 0;
	z-index: var(--z-index-l-header__nav);
	display: flex;
	align-items: center;
	height: 7.2rem;
	width: auto !important;
	padding-left: 4rem;
}

/* 旧・白抜きロゴ差し替え機構（画像ベース）を無効化 */
.l-header__logo a::before {
	content: none !important;
	display: none !important;
}

.l-header__nav {
	top: 0 !important;
	right: 25rem !important;
	height: 7.2rem !important;
	border-radius: 0 !important;
	background-color: transparent !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
	padding: 0 !important;
}

.l-header__nav__list {
	gap: 2.6rem;
}

.l-header__nav__list a span {
	font-size: var(--font-size14);
	font-weight: 500;
	letter-spacing: 0.12em;
	position: relative;
	padding-bottom: 0.5rem;
}

.l-header__nav__list a span::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background-color: var(--okn-gold);
	-webkit-transform: scaleX(0);
	transform: scaleX(0);
	-webkit-transform-origin: right center;
	transform-origin: right center;
	transition: -webkit-transform 0.35s ease;
	transition: transform 0.35s ease;
	transition: transform 0.35s ease, -webkit-transform 0.35s ease;
}

@media (hover: hover) {
	.l-header__nav__list a:hover span::after {
		-webkit-transform: scaleX(1);
		transform: scaleX(1);
		-webkit-transform-origin: left center;
		transform-origin: left center;
	}
}

/* SPOTLIGHTバッジ：テキストリンク（旧円盤画像はマークアップごと撤去済み） */
.l-header__spotlight {
	top: 0 !important;
	right: 10rem !important;
	width: auto !important;
	height: 7.2rem !important;
	display: flex;
	align-items: center;
}

.l-header__spotlight a {
	display: inline-block;
	width: auto !important;
	height: auto !important;
	border-radius: 2px !important;
	overflow: visible !important;
	font-family: var(--okn-en-serif);
	font-size: var(--font-size12);
	letter-spacing: 0.22em;
	color: var(--okn-ink);
	border: 1px solid var(--okn-gold);
	padding: 0.9rem 1.5rem;
	transition: background-color 0.3s ease, color 0.3s ease;
	-webkit-animation: none !important;
	animation: none !important;
	-webkit-transform: none !important;
	transform: none !important;
}

@media (hover: hover) {
	.l-header__spotlight a:hover {
		background-color: var(--okn-gold);
		color: var(--okn-cream);
	}
}

/* ハンバーガー：円形 → 正方形ミニマル */
.l-header__button {
	top: 1.4rem !important;
	right: 2.4rem !important;
	border-radius: 2px !important;
	background-color: transparent !important;
	border: 1px solid rgba(35, 39, 31, 0.35);
}

.l-header__button span {
	background-color: var(--okn-ink) !important;
}

/* 縦線（グリッド模様＝参照元の署名）を廃し3本線のみに */
.l-header__button span:nth-of-type(n + 4) {
	display: none !important;
}

/* ホーム（-type2）：ヒーロー上でも常時表示、暗背景では白文字 */
.l-header.-type2 .l-header__button,
.l-header.-type2 .l-header__logo,
.l-header.-type2 .l-header__nav,
.l-header.-type2 .l-header__spotlight {
	opacity: 1 !important;
	visibility: visible !important;
}

.l-header.-type2:not(.is-sticky)::before {
	background-color: rgba(14, 44, 32, 0.28);
	border-bottom-color: rgba(246, 244, 236, 0.22);
}

.l-header.-type2:not(.is-sticky) .l-header__nav__list a span,
.l-header.-type2:not(.is-sticky) .l-header__spotlight a {
	color: var(--okn-cream);
}

.l-header.-type2:not(.is-sticky) .l-header__spotlight a {
	border-color: rgba(246, 244, 236, 0.55);
}

.l-header.-type2:not(.is-sticky) .l-header__button {
	border-color: rgba(246, 244, 236, 0.55);
}

.l-header.-type2:not(.is-sticky) .l-header__button span {
	background-color: var(--okn-cream) !important;
}

.l-header.-type2:not(.is-sticky) .brand-lockup {
	color: var(--okn-cream);
}

@media screen and (max-width: 1023px) {
	.l-header::before,
	.l-header__logo,
	.l-header__spotlight {
		height: 5.8rem;
	}

	/* 左右の env() は viewport-fit=cover を入れて初めて 0 以外になる
	   （apply-pwa-head.cjs が全ページの viewport に付ける）。横向きの iPhone は
	   センサーハウジング側に 40px 以上の帯ができるので、画面端に貼り付く要素は
	   その分だけ内側へ寄せる。下端と同じ加算の書き方に揃えている。 */
	.l-header__logo {
		padding-left: calc(2rem + env(safe-area-inset-left, 0px));
	}

	.l-header__spotlight {
		right: calc(7.6rem + env(safe-area-inset-right, 0px)) !important;
	}

	.l-header__button {
		top: 0.9rem !important;
		right: calc(1.6rem + env(safe-area-inset-right, 0px)) !important;
	}
}

/* ------------------------------------------------------------
 5. ブランドロックアップ（同窓会提供の毛筆ロゴ）

 「青森県立八戸西高等学校 同窓会」＋落款＋「奥南会」が一枚に入った
 毛筆の原画（611×202・背景透過）をそのまま使う。文字を組み直さない。

 墨は黒一色なので、深緑地（フッタ・サイトマップ・ヒーロー上のヘッダ）では
 invert(1) で白へ反転させる。色替え版の画像を別に持たずに済み、
 かすれや筆の抜けもそのまま残る。
------------------------------------------------------------ */
.brand-lockup {
	display: inline-flex;
	align-items: center;
	color: var(--okn-ink);
}

.brand-lockup__mark {
	display: block;
	width: auto;
	/* ヘッダの実高は 7.2rem。上下 0.7rem ずつ残してほぼ一杯まで使う。
	   「青森県立八戸西高等学校 同窓会」の一行が読める大きさがここで決まる。 */
	height: 5.8rem;
	max-width: 100%;
	/* 収まる幅が足りない場所で潰れないための保険。高さ指定と max-width が
	   衝突しても、毛筆の縦横比は崩さない。 */
	object-fit: contain;
	flex: none;
	/* ヘッダが sticky に変わると地色が深緑→生成りへ切り替わる。
	   その追従を既存の色トランジションと同じ速度に合わせる。 */
	transition: filter 0.4s ease;
}

/* 反転するのは地色が深緑のときだけ。参照元の is-logo-white は sticky 時にも
   付くが、sticky のヘッダ地色は生成りなので、そこで白にすると飛んでしまう。
   判定はテキスト版ロックアップと同じ -type2:not(.is-sticky) に揃える。 */
.brand-lockup.-white .brand-lockup__mark,
.l-sitemap .brand-lockup__mark,
.l-footer .brand-lockup__mark,
.l-header.-type2:not(.is-sticky) .brand-lockup__mark {
	filter: invert(1);
}

/* 参照元サイトは濃色ヒーロー上で「黒ロゴを消して白ロゴ画像に差し替える」作りで、
   common.min.css が黒側を opacity:0 にしている。こちらはロゴが1枚で、
   反転で白にするので、その打ち消しが要る。 */
.l-header.-type2:not(.is-sticky) .l-header__logo a .brand-lockup__mark,
.l-header.is-logo-white .l-header__logo a .brand-lockup__mark {
	opacity: 1;
}

/* フッタは幅が 1248px 空いているので、ここが一番大きく置ける。 */
.l-footer .brand-lockup__mark {
	height: 7.6rem;
}

/* サイトマップの枠は cqw で決まるうえ max-width で頭打ちになる。
   高さを固定すると幅が足りず letterbox になるので、こちらは幅駆動にする。 */
.l-sitemap .brand-lockup__mark {
	width: 100%;
	height: auto;
}

.l-sitemap__logo {
	max-width: 21rem !important;
}

@media screen and (max-width: 1023px) {
	/* 狭幅のヘッダは高さではなく横幅で頭打ちになる。ロゴの右には
	   LINE・SPOTLIGHT・メニューが並んでおり、そこへ寄せられない。
	   左の余白を詰めてぶつからない範囲まで広げる。 */
	.l-header__logo {
		/* 上の 331〜 のブロックと同じ指定を、こちらが後から上書きしている。
		   左の safe-area を足す理由は上のコメントを参照。 */
		padding-left: calc(1.4rem + env(safe-area-inset-left, 0px));
	}

	.brand-lockup__mark {
		height: 3.9rem;
	}

	.l-footer .brand-lockup__mark {
		height: 5.8rem;
	}

	.l-sitemap__logo {
		max-width: 13rem !important;
	}
}

/* 360px 以下では LINE チップまでの余白が一桁 px まで詰まるので一段落とす。 */
@media screen and (max-width: 360px) {
	.brand-lockup__mark {
		height: 3.6rem;
	}
}

/* ------------------------------------------------------------
 5b. 下層ページヒーロー：円形「O」置換ギミックの廃止＋セリフ化
------------------------------------------------------------ */
.c-circle-txt__inner span {
	width: auto !important;
	height: auto !important;
	background: none !important;
	border-radius: 0 !important;
	-webkit-filter: none !important;
	filter: none !important;
	-webkit-transform: none !important;
	transform: none !important;
	transition: none !important;
}

.p-hero__en {
	font-family: var(--okn-en-serif) !important;
	font-weight: 400 !important;
	font-size: clamp(3.6rem, 5vw, 7rem) !important;
	letter-spacing: 0.1em !important;
	color: var(--okn-gold) !important;
	text-transform: none !important;
}

.p-hero__ja {
	font-family: var(--okn-serif) !important;
	font-weight: 600 !important;
	letter-spacing: 0.18em !important;
}

/* ------------------------------------------------------------
 6. サイトマップ（全画面メニュー）：深緑の編集的レイアウトへ
------------------------------------------------------------ */
.l-sitemap {
	background-color: var(--okn-green-night);
}

.l-sitemap__catch {
	display: none !important;
}

.l-sitemap__logo {
	width: auto !important;
}

/* 参照元サイトのロゴ画像だけを落とす。奥南会の毛筆ロゴは画像なので除外する。 */
.l-sitemap__logo img:not(.brand-lockup__mark) {
	display: none;
}

/* --- 書架メニュー（2026-07-29 direction B）--------------------------------
   CONTENTS見出し＋写真カードグリッドを廃し、6冊の「背表紙」が並ぶ書架へ。
   フォーカス可視・開閉機構（common.min.css の .l-sitemap / .is-open）は既存のまま。 */

/* 写真スライダー（figure_dark_*）が暗すぎるとの指摘（2026-08-19）を受け、
   素材そのものを実写の自然な明るさに差し替えた（scripts/brighten-sitemap-figures.cjs）。
   白ロゴ（.l-sitemap__logo, 左下）の可読性は、画像全体を暗くする代わりに
   下部だけの帯グラデーションで確保する。 */
.l-sitemap__figure__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(10, 20, 14, 0.62), rgba(10, 20, 14, 0) 46%);
	pointer-events: none;
}

.l-sitemap a:focus-visible {
	outline: 2px solid var(--okn-gold-soft);
	outline-offset: 3px;
}

/* 目次ラベル */
.l-sitemap__index {
	margin-bottom: clamp(3rem, 4.5vh, 5.2rem);
	text-align: center;
}

.l-sitemap__index-title {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.6rem;
	color: var(--okn-cream);
	font-family: var(--okn-serif);
	font-size: var(--font-size18);
	font-weight: 600;
	letter-spacing: 0.42em;
	text-indent: 0.42em;
}

.l-sitemap__index-title::before,
.l-sitemap__index-title::after {
	content: "";
	display: block;
	width: 5.4rem;
	height: 1px;
	background-color: var(--okn-gold-soft);
	opacity: 0.7;
}

.l-sitemap__index-top {
	margin-top: 1.3rem;
}

.l-sitemap__index-top a {
	color: var(--okn-cream);
	font-size: var(--font-size12);
	letter-spacing: 0.2em;
	opacity: 0.72;
	transition: opacity 0.3s ease;
}

@media (hover: hover) {
	.l-sitemap__index-top a:hover {
		opacity: 1;
		text-decoration: underline;
		text-underline-offset: 0.4em;
	}
}

/* 書架本体：棚板（金の罫）の上に6冊 */
.l-sitemap__shelf {
	display: flex;
	align-items: stretch;
	justify-content: center;
	gap: clamp(1rem, 1.4cqw, 1.8rem);
	height: min(54rem, 58vh);
	min-height: 33rem;
	padding-bottom: 1.6rem;
	border-bottom: 1px solid rgba(200, 176, 106, 0.45);
}

.l-sitemap__spine {
	flex: 1 1 0;
	max-width: 9.4rem;
	min-width: 0;
}

.l-sitemap__spine a {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	gap: 1.8rem;
	width: 100%;
	height: 100%;
	padding: 3.6rem 0.4rem 2.4rem;
	border-radius: 3px 3px 2px 2px;
	box-shadow: 0 0.6rem 1.6rem rgba(0, 0, 0, 0.35);
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}

/* 装丁の金帯（上下二重線） */
.l-sitemap__spine a::before,
.l-sitemap__spine a::after {
	content: "";
	position: absolute;
	left: 0.9rem;
	right: 0.9rem;
	height: 1px;
	background-color: var(--okn-gold-soft);
	opacity: 0.85;
	pointer-events: none;
}

.l-sitemap__spine a::before {
	top: 1.3rem;
	box-shadow: 0 0.4rem 0 var(--okn-gold-soft);
}

.l-sitemap__spine a::after {
	bottom: 1.3rem;
	box-shadow: 0 -0.4rem 0 var(--okn-gold-soft);
}

.l-sitemap__spine-title {
	writing-mode: vertical-rl;
	font-family: var(--okn-serif);
	font-size: clamp(1.8rem, 1.7cqw, 2.3rem);
	font-weight: 600;
	letter-spacing: 0.22em;
	line-height: 1;
}

.l-sitemap__spine-vol {
	display: block;
	width: min-content;
	margin-inline: auto;
	font-family: var(--okn-en-serif);
	font-size: 1rem;
	letter-spacing: 0.18em;
	line-height: 1.6;
	text-align: center;
	text-transform: uppercase;
	opacity: 0.8;
}

/* 装丁のトーン：クリーム／緑の互い違い */
.l-sitemap__spine.-vol1 a,
.l-sitemap__spine.-vol4 a,
.l-sitemap__spine.-vol6 a {
	background-color: var(--okn-cream);
	color: var(--okn-ink);
}

.l-sitemap__spine.-vol2 a {
	background-color: #4f7d68;
	color: var(--okn-cream);
}

.l-sitemap__spine.-vol3 a {
	background-color: var(--okn-green);
	color: var(--okn-cream);
}

.l-sitemap__spine.-vol5 a {
	background-color: var(--okn-green-deep);
	color: var(--okn-cream);
}

/* 1冊だけ棚から浮く（hover / focus） */
@media (hover: hover) {
	.l-sitemap__spine a:hover {
		transform: translateY(-1.2rem);
		box-shadow: 0 1.6rem 2.6rem rgba(0, 0, 0, 0.4);
	}
}

.l-sitemap__spine a:focus-visible {
	transform: translateY(-1.2rem);
}

/* 脚部：SNSとSPOTLIGHTバッジ */
.l-sitemap__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 2rem 2.4rem;
	margin-top: clamp(2.6rem, 4vh, 4.2rem);
}

/* 旧円盤バッジの absolute 配置（common.min.css）を打ち消してフローに戻す */
.l-sitemap__spotlight {
	position: static;
	width: auto;
	margin: 0;
}

.l-sitemap__spotlight a {
	display: inline-block;
	font-family: var(--okn-en-serif);
	font-size: var(--font-size13);
	letter-spacing: 0.26em;
	color: var(--okn-cream);
	border: 1px solid var(--okn-gold-soft);
	/* 旧円盤時代の border-radius:50%（common.min.css）を矩形へ戻す */
	border-radius: 2px;
	padding: 1.2rem 2rem;
	-webkit-animation: none !important;
	animation: none !important;
}

@media (hover: hover) {
	.l-sitemap__spotlight a:hover {
		background-color: var(--okn-gold);
		border-color: var(--okn-gold);
	}
}

/* モバイル：平積みの本（横帯）に組み替え。図版は従来どおり下部に残る */
@media screen and (max-width: 1023px) {
	.l-sitemap__shelf {
		flex-direction: column;
		height: auto;
		min-height: 0;
		gap: 1rem;
		padding-bottom: 0;
		border-bottom: 0;
	}

	.l-sitemap__spine {
		max-width: none;
	}

	.l-sitemap__spine a {
		flex-direction: row;
		justify-content: space-between;
		gap: 1.6rem;
		padding: 1.7rem 2.4rem;
	}

	/* 金帯は左右の縦線（本の小口側）へ */
	.l-sitemap__spine a::before,
	.l-sitemap__spine a::after {
		top: 0.8rem;
		bottom: 0.8rem;
		width: 1px;
		height: auto;
	}

	.l-sitemap__spine a::before {
		left: 1.1rem;
		right: auto;
		box-shadow: 0.4rem 0 0 var(--okn-gold-soft);
	}

	.l-sitemap__spine a::after {
		right: 1.1rem;
		left: auto;
		box-shadow: -0.4rem 0 0 var(--okn-gold-soft);
	}

	.l-sitemap__spine-title {
		writing-mode: horizontal-tb;
		font-size: 1.9rem;
	}

	.l-sitemap__spine-vol {
		width: auto;
		margin-inline: 0;
	}

	@media (hover: hover) {
		.l-sitemap__spine a:hover {
			transform: translateY(-0.3rem);
		}
	}

	.l-sitemap__spine a:focus-visible {
		transform: translateY(-0.3rem);
	}

	.l-sitemap__foot {
		justify-content: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.l-sitemap__spine a,
	.l-sitemap__index-top a {
		transition: none !important;
	}

	.l-sitemap__spine a:hover,
	.l-sitemap__spine a:focus-visible {
		transform: none;
	}
}

/* ------------------------------------------------------------
 7. ホーム：ヒーロー（フルブリード写真＋明朝見出し）
------------------------------------------------------------ */
.home-kv {
	height: 100vh;
	height: 100svh;
	min-height: 56rem;
	overflow: hidden;
}

.home-kv::before {
	display: none;
}

.home-kv__slider {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.home-kv__slider__content,
.home-kv__slider li {
	position: absolute !important;
	inset: 0;
	width: 100%;
	height: 100%;
}

.home-kv__slider li img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
}

/* 俯瞰の実写は縦長。横長のファーストビューで cover すると中央の帯（芝や
   屋根）しか残らず、校舎も空も切れる。少し上寄りを見せる。 */
.home-kv__slider li img.-focus-upper {
	-o-object-position: 50% 30%;
	object-position: 50% 30%;
}

/* 写真上のスクリム（深緑→透明） */
.home-kv__slider::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 5;
	background: linear-gradient(
		to top,
		rgba(14, 44, 32, 0.82) 0%,
		rgba(14, 44, 32, 0.38) 38%,
		rgba(14, 44, 32, 0.16) 62%,
		rgba(14, 44, 32, 0.3) 100%
	);
	pointer-events: none;
}

.home-kv__inner {
	position: absolute;
	inset: 0;
	height: auto;
	min-height: 0 !important;
	max-height: none !important;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	z-index: 10;
}

.home-kv__inner::after {
	display: none;
}

.home-hero {
	position: relative;
	color: var(--okn-cream);
	padding: 0 4rem 9rem;
	max-width: 132rem;
	width: 100%;
	margin: 0 auto;
}

.home-hero__eyebrow {
	font-family: var(--okn-en-serif);
	font-size: var(--font-size13);
	letter-spacing: 0.34em;
	margin-bottom: 2.6rem;
	opacity: 0.92;
}

.home-hero__title {
	font-family: var(--okn-serif);
	font-weight: 600;
	font-size: clamp(3.6rem, 5.4vw, 7.2rem);
	line-height: 1.42;
	letter-spacing: 0.18em;
	margin-bottom: 2.8rem;
}

.home-hero__rule {
	width: 8.6rem;
	height: 1px;
	background-color: var(--okn-gold-soft);
	margin-bottom: 2.4rem;
}

.home-hero__lead {
	font-size: var(--font-size15);
	letter-spacing: 0.22em;
	opacity: 0.9;
}

.home-kv__scroll {
	left: auto !important;
	right: 4.6rem !important;
	bottom: 4.4rem !important;
}

@media screen and (max-width: 1023px) {
	.home-hero {
		padding: 0 2.4rem 7rem;
	}

	.home-hero__eyebrow {
		font-size: var(--font-size10);
		letter-spacing: 0.24em;
		margin-bottom: 1.8rem;
	}

	.home-hero__title {
		font-size: clamp(3rem, 9vw, 4.4rem);
	}

	.home-hero__lead {
		font-size: var(--font-size12);
		letter-spacing: 0.16em;
	}

	.home-kv__scroll {
		right: 2.4rem !important;
		bottom: 2.4rem !important;
	}
}

/* ------------------------------------------------------------
 8. ホーム：イントロ〜各セクションの沈静化
------------------------------------------------------------ */
/* 波形区切り（参照元の署名）を全廃 */
.home-container__curve-1,
.home-container__curve-2 {
	display: none !important;
}

/* 旧・波形カーブ連動のグラデーションマスク（home-container__curve-1/2 と対で機能していた
   スクロール演出）を、カーブ自体を廃止した現行レイアウトでは不整合になるため無効化のみ維持。
   角丸・スクリムは元デザインへ戻す（本体のスタイルは page-home.css 側の指定に委ねる）。 */
.home-intro__main__inner::before,
.home-intro__main__inner::after {
	display: none !important;
}

/* イントロ背景＝母校の航空写真。田んぼの明るい緑と校庭の砂地が白文字と
   ぶつかるため、テキストが乗る側だけを落とすスクリムを重ねる。
   実測（白文字に対するコントラスト比・最悪値）: 素の写真 1.29 → 3.4 前後。
   写真そのものを暗くしたくない場合は、この 2 ブロックを外せば元に戻る。 */
.home-intro__main__bg figure::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		100deg,
		rgba(14, 44, 32, 0.06) 0%,
		rgba(14, 44, 32, 0.18) 38%,
		rgba(14, 44, 32, 0.52) 68%,
		rgba(14, 44, 32, 0.72) 100%
	);
}

@media screen and (max-width: 1023px) {
	/* 狭幅ではテキストが横幅いっぱいに来るので、縦方向のグラデーションに切り替える。 */
	.home-intro__main__bg figure::after {
		background: linear-gradient(
			180deg,
			rgba(14, 44, 32, 0.34) 0%,
			rgba(14, 44, 32, 0.5) 45%,
			rgba(14, 44, 32, 0.68) 100%
		);
	}
}

.home-intro__lead,
.home-about__catch,
.home-other__catch,
.home-people__catch {
	font-family: var(--okn-serif) !important;
	font-weight: 600 !important;
	letter-spacing: 0.14em !important;
}

.c-title5 {
	font-family: var(--okn-serif);
	font-weight: 600;
	letter-spacing: 0.2em;
}

/* 各ページに散っていた和文の大見出しを明朝へ統一する（2026-07-30）。
   参照元テンプレート由来のこれらの見出しはゴシックのままで、
   /company/ や /spotlight/ の明朝見出しと並ぶとページごとに書体が変わって見えた。
   欧文だけの見出し（__en / __num）は Albert Sans・DM Serif Display のまま。 */
.p-hero__contents2__catch,
.work-item__contents__title,
.work-item__contents__catch,
.work-item__section__title,
.company-intro__catch,
.company-message__catch,
.c-title4 {
	font-family: var(--okn-serif);
	font-weight: 600;
	letter-spacing: 0.08em;
}

/* コンテンツカードの番号：英セリフの金 */
/* home-other の扉カードは地色が2種類あり、金をカード側で --card-gold として
   出し分けている（深緑には明るい金、生成りには沈んだ金）。ここで !important の
   一色に塗ると、深緑側でコントラストが 2.44 まで落ちるので対象から外す。 */
.p-contents__num:not(.home-other .p-contents__num) {
	color: var(--okn-gold) !important;
}

.p-contents__num {
	font-family: var(--okn-en-serif) !important;
	font-weight: 400 !important;
}

.p-contents__tags li {
	border: var(--okn-hairline) !important;
	background-color: transparent !important;
	border-radius: 2px !important;
}

/* 円形矢印ボタン → 角丸小の正方形 */
.p-contents__arrow {
	border-radius: 4px !important;
}

/* 曲線ジャーニー線・黄色グロー（参照元の署名装飾）を全廃 */
.home-other__journey,
.home-about__light-1,
.home-about__light-2,
.home-about__light-3,
.home-about__light-4,
.contact-intro__light {
	display: none !important;
}

/* --- home-about：校歌「若草萌ゆる 奥南の野に」の野を敷く（2026-07-29）------
   上のグロー装飾を落とした跡が白のまま広く空いていたので、和紙色の地に
   若草の日本画を下端から立ち上げる。画像の紙地は --okn-cream2 に合わせて
   再調色済み（scripts/build-home-about-frieze.cjs）なので継ぎ目は出ない。 */
.home-about {
	position: relative;
	/* 上下端はページ地色に戻し、中ほどだけ和紙色に膨らませる。前後のセクションも
	   #f6f4ec なので、帯状の段差が一切出ない。 */
	background-image: linear-gradient(
		to bottom,
		var(--okn-cream) 0%,
		var(--okn-cream2) 34%,
		var(--okn-cream2) 68%,
		var(--okn-cream) 100%
	);
}

.home-about::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 0;
	/* 画像そのものに地色へのフェードを焼き込んであるため、高さを固定して
	   切り落とすとその部分ごと消えて上端に段差が出る。原寸比で敷く。 */
	aspect-ratio: 1600 / 533;
	background-image: url("../img/home/about_grass_frieze.webp");
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: 100% auto;
	/* 本文と重なる領域なので、草は地に沈める */
	opacity: 0.5;
	pointer-events: none;
}

/* 本文・見出しは草より前へ */
.home-about__inner {
	position: relative;
	z-index: 1;
}

@media screen and (max-width: 1023px) {
	/* 画面幅が狭いと葉が細かくなりすぎるので倍率を上げる。
	   背景を2倍で敷くぶん、帯の高さも比率を倍にして全体を見せる。 */
	.home-about::after {
		aspect-ratio: 1600 / 1066;
		background-size: 200% auto;
	}
}

/* 波形前提の余白・グラデーション残骸を整理 */
.home-container__inner {
	padding-top: 11rem !important;
	padding-bottom: 12rem !important;
}

.home-container__inner::before,
.home-container__inner::after {
	display: none !important;
}

@media screen and (max-width: 1023px) {
	.home-container__inner {
		padding-top: 7rem !important;
		padding-bottom: 8rem !important;
	}
}

/* ------------------------------------------------------------
 9. ホーム：people セクション
------------------------------------------------------------ */
/* プロフィールカード：罫線の端正なカードへ */
.home-people__profile-card {
	border-radius: 10px !important;
	border: var(--okn-hairline);
	box-shadow: 0 10px 30px rgba(14, 44, 32, 0.18) !important;
}

.home-people__profile-tags li {
	border: var(--okn-hairline) !important;
	background-color: transparent !important;
	border-radius: 2px !important;
}

.home-people__profile-name {
	font-family: var(--okn-serif);
	letter-spacing: 0.12em;
}

/* View more 円形 → 罫線ボタン */
.c-view {
	border-radius: 2px !important;
	background-color: transparent !important;
	border: 1px solid var(--okn-gold-soft);
	color: var(--okn-cream) !important;
	font-family: var(--okn-en-serif) !important;
	letter-spacing: 0.2em;
}

/* 円形矢印 → 小さな正方形 */
.c-arrow2,
.c-arrow3 {
	border-radius: 2px !important;
}

/* --- l-spotlight 帯「和紙の帯」（2026-07-29 direction C）-------------------
   夜景マルシェ帯 → 和紙の紙目のクリーム地・多重刷りの緑題字・縦書きラベルと
   朱印・下端をゆっくり流れる金の帯文へ。
   base の .l-spotlight a の clip-path:inset(0) はカーソル追従の封じ込めと
   重なり順の両方を担っているため触らない（監査 mustKeep）。 */

.l-spotlight {
	border-top: 2px solid var(--okn-gold);
}

/* spotlight ページ本体は page-spotlight.css の「五十年誌」デザインが正。 */

.l-spotlight a {
	height: auto;
	min-height: 0;
	padding: 9rem 0 15rem;
	color: var(--okn-ink);
	background-color: var(--okn-cream);
	/* 和紙の紙目：feTurbulence を 4% で敷く（アニメーションなし） */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}

.l-spotlight__contents {
	margin-top: clamp(2.4rem, 3.2vh, 4.4rem);
}

/* 多重刷りの題字：紙目が文字の中に透ける */
.l-spotlight__wordmark {
	display: block;
	font-family: var(--okn-en-serif);
	font-weight: 400;
	font-size: clamp(4.6rem, 6.4vw, 9.2rem);
	line-height: 1.08;
	letter-spacing: 0.06em;
	color: var(--okn-green);
	mix-blend-mode: multiply;
}

.l-spotlight__year {
	font-family: var(--okn-serif) !important;
	/* クリーム地でもAAを満たす墨がかった金 */
	color: #7d652e !important;
	letter-spacing: 0.22em;
}

/* 右端の縦書きラベル＋朱印（装飾・aria-hidden） */
.l-spotlight__side {
	position: absolute;
	top: 9rem;
	right: clamp(2.4rem, 3.6vw, 5.6rem);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2rem;
	margin: 0;
}

.l-spotlight__side-label {
	writing-mode: vertical-rl;
	font-family: var(--okn-serif);
	font-size: 1.4rem;
	font-weight: 600;
	letter-spacing: 0.34em;
	color: var(--okn-ink);
	opacity: 0.82;
}

.l-spotlight__side-seal {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 5.6rem;
	height: 5.6rem;
	border: 2px solid #b43a2b;
	border-radius: 50%;
	transform: rotate(-4deg);
	color: #b43a2b;
	opacity: 0.9;
}

.l-spotlight__side-seal span {
	writing-mode: vertical-rl;
	font-family: var(--okn-serif);
	font-size: 1.2rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	line-height: 1;
}

/* モバイルの View more：暗地用の大円ボタン → 金罫の小さな矩形ボタンへ
   （デスクトップは base の display:none のままカーソル追従が担う） */
.l-spotlight__view.c-view {
	--size: auto;
	width: auto;
	height: auto;
	border-radius: 2px;
	background-color: transparent;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	border: 1px solid var(--okn-gold);
	/* 汎用 .c-view（暗背景用）の cream !important に勝つため同じく !important */
	color: var(--okn-green-deep) !important;
	font-family: var(--okn-en-serif);
	font-weight: 400;
	font-size: var(--font-size13);
	letter-spacing: 0.26em;
	padding: 1.4rem 3.2rem;
}

/* 下端の帯文：金の罫の間を読書速度で流れる（80s/周） */
.l-spotlight__frieze {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 3.4rem;
	display: flex;
	align-items: center;
	height: 5.6rem;
	border-top: 1px solid var(--okn-gold-soft);
	border-bottom: 1px solid var(--okn-gold-soft);
	overflow: hidden;
}

.l-spotlight__frieze-track {
	display: flex;
	flex-shrink: 0;
	animation: okn-frieze-drift 80s linear infinite;
	will-change: transform;
}

.l-spotlight__frieze-track span {
	flex-shrink: 0;
	white-space: nowrap;
	font-family: var(--okn-serif);
	font-size: 1.35rem;
	letter-spacing: 0.3em;
	color: var(--okn-gold);
}

@keyframes okn-frieze-drift {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

@media screen and (max-width: 1023px) {
	.l-spotlight a {
		height: auto;
		padding: 6.4rem 0 12rem;
	}

	/* 縦書きラベルは横組みに変え、本文の結びの落款として中央へ */
	.l-spotlight__side {
		position: static;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		gap: 1.6rem;
		margin: 3.6rem 0 0;
	}

	.l-spotlight__side-label {
		writing-mode: horizontal-tb;
		font-size: 1.2rem;
	}

	.l-spotlight__side-seal {
		width: 4.4rem;
		height: 4.4rem;
	}

	.l-spotlight__side-seal span {
		font-size: 1rem;
	}

	.l-spotlight__frieze {
		bottom: 2.6rem;
		height: 4.6rem;
	}

	.l-spotlight__frieze-track span {
		font-size: 1.15rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	/* 停止しても「組版された一行」として成立させる */
	.l-spotlight__frieze-track {
		animation: none;
	}
}

/* ------------------------------------------------------------
 11. フッター：ワードマーク型 → 深緑の端正なフッターへ
------------------------------------------------------------ */
.l-footer.c-texture-f4f4f3 {
	background-color: var(--okn-green-night);
	color: var(--okn-cream);
}

.l-footer__catch,
.l-footer__light {
	display: none !important;
}

.l-footer__logo {
	width: auto !important;
	margin: 0 0 4.6rem !important;
	padding-top: 7.2rem;
}

/* 参照元サイトのロゴ画像だけを落とす。奥南会の毛筆ロゴは画像なので除外する。 */
.l-footer__logo img:not(.brand-lockup__mark) {
	display: none;
}

.l-footer__nav__list a,
.l-footer__company,
.l-footer__address,
.l-footer__copyright {
	color: var(--okn-cream);
}

.l-footer__nav {
	border-top: var(--okn-hairline-light);
	border-bottom: var(--okn-hairline-light);
	align-items: flex-end;
}

/* --- フッターのナビ：書架（2026-07-29）------------------------------------
   全画面メニュー「書架」の意匠をフッターにも展開。横並びテキスト＋hoverで
   照明画像（footer_light.webp＝参照元の「灯り」演出）が灯る構成を廃し、
   小さな背表紙が棚板に並ぶ構成へ。マークアップは不変（CSSのみ）。 */

.l-footer__nav__list ul {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 1rem;
	border-bottom: 1px solid rgba(200, 176, 106, 0.45);
	padding-bottom: 0;
}

.l-footer__nav__list a {
	writing-mode: vertical-rl;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: auto;
	min-height: 12rem;
	margin: 0;
	padding: 2.2rem 1.05rem;
	font-family: var(--okn-serif);
	font-size: var(--font-size13);
	font-weight: 600;
	/* 縦書きでは line-height が背表紙の「厚み」になる */
	line-height: 1;
	letter-spacing: 0.18em;
	border-radius: 3px 3px 0 0;
	box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.3);
	transition: transform 0.3s ease;
}

/* 装丁の金帯（上下二重線）。base の hover 照明用 ::before を完全に転用する */
.l-footer__nav__list a::before,
.l-footer__nav__list a::after {
	content: "";
	position: absolute;
	left: 0.55rem;
	right: 0.55rem;
	width: auto;
	height: 1px;
	bottom: auto;
	-webkit-transform: none;
	transform: none;
	background-image: none;
	background-color: var(--okn-gold-soft);
	opacity: 0.85;
	pointer-events: none;
	-webkit-animation: none !important;
	animation: none !important;
	transition: none;
}

.l-footer__nav__list a::before {
	top: 0.8rem;
	box-shadow: 0 0.3rem 0 var(--okn-gold-soft);
}

.l-footer__nav__list a::after {
	top: auto;
	bottom: 0.8rem;
	box-shadow: 0 -0.3rem 0 var(--okn-gold-soft);
}

.l-footer__nav__list a:hover::before {
	opacity: 0.85;
	-webkit-animation: none !important;
	animation: none !important;
}

/* 装丁トーン：メニューの書架と同じ循環 */
.l-footer__nav__list li:nth-child(6n + 1) a,
.l-footer__nav__list li:nth-child(6n + 4) a,
.l-footer__nav__list li:nth-child(6n) a {
	background-color: var(--okn-cream);
	color: var(--okn-ink);
}

.l-footer__nav__list li:nth-child(6n + 2) a {
	background-color: #4f7d68;
	color: var(--okn-cream);
}

.l-footer__nav__list li:nth-child(6n + 3) a {
	background-color: var(--okn-green);
	color: var(--okn-cream);
}

.l-footer__nav__list li:nth-child(6n + 5) a {
	background-color: var(--okn-green-deep);
	color: var(--okn-cream);
}

@media (hover: hover) {
	.l-footer__nav__list a:hover {
		transform: translateY(-0.5rem);
	}
}

.l-footer__nav__list a:focus-visible {
	outline: 2px solid var(--okn-gold-soft);
	outline-offset: 3px;
	transform: translateY(-0.5rem);
}

/* lineIn 下線アニメーションは背表紙では不要 */
.l-footer__nav__list .c-anchor-lineIn {
	background-image: none !important;
	letter-spacing: inherit;
	padding: 0;
	margin: 0;
}

@media screen and (max-width: 1023px) {
	/* Instagramアイコンとの横並びが棚の幅を241pxに絞り8冊目が落ちるため、
	   モバイルは縦積みにして棚へ全幅を渡す */
	.l-footer__nav {
		flex-direction: column;
		align-items: stretch;
		gap: 2.4rem;
	}

	.l-footer__nav__list {
		width: 100%;
	}

	.l-footer__nav__list ul {
		display: flex;
		justify-content: center;
		gap: 0.6rem;
	}

	.l-footer__nav__list a {
		min-height: 9rem;
		padding: 1.6rem 0.75rem;
		font-size: 1.1rem;
		letter-spacing: 0.14em;
	}
}

@media (prefers-reduced-motion: reduce) {
	.l-footer__nav__list a {
		transition: none;
	}

	.l-footer__nav__list a:hover,
	.l-footer__nav__list a:focus-visible {
		transform: none;
	}
}

.l-footer__company {
	font-family: var(--okn-serif);
	font-weight: 600;
	letter-spacing: 0.16em;
}

.l-footer__copyright small {
	opacity: 0.7;
}

/* GO TOP マスコット → テキストリンク */
.l-footer__gotop {
	width: auto !important;
}

.l-footer__gotop img {
	display: none;
}

.l-footer__gotop a {
	display: inline-flex;
	align-items: center;
	gap: 0.8rem;
	color: var(--okn-cream);
	font-family: var(--okn-en-serif);
	font-size: var(--font-size12);
	letter-spacing: 0.26em;
	border-bottom: 1px solid var(--okn-gold-soft);
	padding-bottom: 0.6rem;
}

.l-footer__gotop a::before {
	content: '↑';
	font-size: var(--font-size14);
	color: var(--okn-gold-soft);
}

.l-footer__gotop a::after {
	content: 'PAGE TOP';
}

/* ==========================================================================
   Carousel dots — hit area and state contrast
   The shared stylesheet paints these as 9x9px buttons, which is both the dot
   *and* the entire click target: well under the 24x24 minimum (WCAG 2.5.8),
   and awkward on touch. The inactive colour (#e1e1e1) also sat at ~1.3:1
   against the cream ground, below the 3:1 that UI components need (WCAG
   1.4.11). Keep the 9px dot visually, but paint it with a pseudo-element so
   the button itself can carry a full-size target.
   ========================================================================== */
.c-dots li button {
	position: relative;
	width: 2.4rem;
	height: 2.4rem;
	background-color: transparent;
	color: var(--color-line);
}

.c-dots li button::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0.9rem;
	height: 0.9rem;
	margin: -0.45rem 0 0 -0.45rem;
	border-radius: 50%;
	background-color: currentColor;
	transition: background-color 0.25s ease, transform 0.25s ease;
}

.c-dots li.is-active button {
	background-color: transparent;
	color: var(--okn-green);
}

.c-dots li.is-active button::before {
	transform: scale(1.15);
}

.c-dots li button:focus-visible {
	outline: 2px solid var(--okn-gold);
	outline-offset: 2px;
	border-radius: 50%;
}

/* ------------------------------------------------------------
 27. 下部常駐メニュー（l-quicknav）

 ヘッダーのナビは 1023px 以下で display:none になるため、主要ページへは
 ハンバーガーを開く1タップが必ず要る。その1タップを省くための常駐バー。
 デスクトップはヘッダーのナビが常時見えているので出さない。

 参照元の「ピル型フローティングナビ」へ戻らないよう、角丸も浮きも持たない
 全幅の帯として組む。区切りはヘアライン、現在地は金の罫で示す。

 rem は端末幅に連動して 8〜10px まで縮むので（html{font-size:calc((10/400)*100vw)}）、
 タップ領域と文字サイズは px 下限を max() で押さえる。
------------------------------------------------------------ */
.l-quicknav {
	display: none;
}

@media screen and (max-width: 1023px) {
	.l-quicknav {
		display: block;
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: calc(var(--z-index-l-sitemap) - 1);
		background-color: var(--okn-green-deep);
		border-top: 1px solid rgba(246, 244, 236, 0.24);
		box-shadow: 0 -0.4rem 2rem rgba(14, 44, 32, 0.28);
		padding-bottom: env(safe-area-inset-bottom, 0px);
		/* 横向きでは左右にもセンサーハウジングの帯ができる。4つ並ぶ項目が
		   その下に潜ると、いちばん外側の「ホーム」と「事業・店舗紹介」が
		   押しにくくなる。 */
		padding-left: env(safe-area-inset-left, 0px);
		padding-right: env(safe-area-inset-right, 0px);
		transition: transform 0.3s ease;
	}

	/* ハンバーガーのサイトマップを開いている間は主張させない */
	body.is-sitemap-open .l-quicknav {
		transform: translateY(100%);
		pointer-events: none;
	}

	.l-quicknav__list {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
	}

	.l-quicknav__item + .l-quicknav__item {
		border-left: 1px solid rgba(246, 244, 236, 0.16);
	}

	.l-quicknav__link {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: max(0.5rem, 4px);
		min-height: max(6.2rem, 54px);
		padding: max(0.8rem, 7px) max(0.4rem, 3px);
		color: var(--okn-cream);
		text-align: center;
		text-decoration: none;
		transition: background-color 0.25s ease, color 0.25s ease;
	}

	/* 現在地は金の罫で示す。色だけに頼らないよう上辺に罫を引く */
	.l-quicknav__link::before {
		content: '';
		position: absolute;
		top: -1px;
		left: 0;
		width: 100%;
		height: 2px;
		background-color: var(--okn-gold);
		transform: scaleX(0);
		transition: transform 0.3s ease;
	}

	.l-quicknav__link[aria-current='page'] {
		background-color: rgba(246, 244, 236, 0.08);
		color: var(--okn-gold-soft);
	}

	.l-quicknav__link[aria-current='page']::before {
		transform: scaleX(1);
	}

	.l-quicknav__link:focus-visible {
		outline: 2px solid var(--okn-gold);
		outline-offset: -4px;
	}

	.l-quicknav__icon {
		display: block;
		width: max(2.2rem, 20px);
		height: max(2.2rem, 20px);
	}

	.l-quicknav__icon svg {
		display: block;
		width: 100%;
		height: 100%;
		/* common.min.css の svg{fill:currentColor} は CSS なので、マークアップの
		   fill="none" 属性に勝ってしまう。線画のアイコンが塗り潰れるため、
		   ここで CSS として塗りを外す */
		fill: none;
		stroke: currentColor;
	}

	.l-quicknav__label {
		font-family: var(--okn-sans);
		font-size: max(1.05rem, 10px);
		font-weight: 500;
		line-height: 1.2;
		letter-spacing: 0.04em;
		white-space: nowrap;
	}

	/* STORIES は欧文。サイト内の英字ラベルと同じ字間に揃える */
	.l-quicknav__label.-en {
		font-family: var(--font-sans-serif);
		letter-spacing: 0.12em;
	}

	/* 常駐バーがフッター末尾（コピーライト・先頭へ戻る）を隠さないよう逃がす。
	   元の padding-bottom: 7.2rem を保ったまま、バーの高さぶんだけ足す */
	.l-footer {
		padding-bottom: calc(7.2rem + max(6.2rem, 54px) + env(safe-area-inset-bottom, 0px));
	}
}

@media screen and (max-width: 1023px) and (hover: hover) {
	.l-quicknav__link:hover {
		background-color: rgba(246, 244, 236, 0.1);
	}
}

/* ------------------------------------------------------------
 28. 下層ページの扉（p-hero__contents）の高さ

 共有スタイルは 1023px 以下でこの帯を height: 40rem に固定している。中の
 4つは下端と決め打ちの座標に置かれるので、余った縦はまるごと空白になる:

   ← TOP ボタン   top: 12rem（上からの決め打ち）
   スクロール線   bottom: 2.3rem・高さ 4.9rem（下からの決め打ち）
   About / 見出し 下端そろえ（padding-bottom 2.9rem）

 実測すると、幅507pxでボタンの下端から About の上端まで 136px が何も無い。
 28rem まで詰めると、この空きが約16pxになり、写真が早く出てくる。

 28rem を下限とみなす根拠: 下端に積む3つ（余白2.9 + 見出し2.2 + その上余白
 2.0 + About 3.1 ＝ 10.2rem）と、上から 12rem + ボタン 3.3rem。合わせて
 25.5rem。28rem ならまだ 2.5rem 空く。この帯を使うのは扉が4ページ
 （同窓会について・活動について・お問い合わせ・卒業生）だけで、見出しは
 どれも7文字以下、狭い画面でも1行に収まるので折り返しで押し合うこともない。

 1024px 以上は別の組み方（横並び）なので触らない。
 ------------------------------------------------------------ */
@media screen and (max-width: 1023px) {
	.p-hero__contents {
		height: 28rem;
	}
}