/*
 * theme.css — kknavi2026 テーマ固有の微調整。
 * kknavi.css（カンプ同梱・無改変）の上に足す最小限だけをここに書く。
 * 主目的: 旧記事のクラシックエディタ HTML（記事本文カラム = .prose）が新デザインで崩れないようにする。
 *
 * ★ 本文カラムのラッパはカンプ準拠で <article class="prose stack-lg">（旧: .article-body クラスは撤去）。
 *   旧記事HTMLガードは同一要素上の .prose を対象にする。
 */

/* 旧記事の本文画像は横幅を超えない（CLS を出さないよう高さは auto）。 */
.prose img {
	max-width: 100%;
	height: auto;
}

/* 旧記事に混ざる可能性のある広い表は、はみ出さずに横スクロールさせる。 */
.prose table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
}

/* 旧記事の iframe（YouTube 埋め込み等）もはみ出さない。 */
.prose iframe,
.prose embed,
.prose object,
.prose video {
	max-width: 100%;
}

/* 旧記事の figure/画像キャプションの下余白を整える。 */
.prose figure {
	margin: 0 0 var(--space-5);
}

/* 目次はクライアント生成完了まで hidden。生成後に表示されるが、
   万一 JS が無効でも本文閲覧に支障が出ないよう details のデフォルト挙動に任せる。 */
.toc[hidden] {
	display: none;
}

/* =============================================================================
   写真の統一（目視QA指摘 B）— kknavi.css は無改変のまま、img の当て方だけここで補強。
   ============================================================================= */

/* B1. プロフェッショナル円形アバター（顔検出で1人ずつ自動クロップ・小泉指摘 2026-07-27）:
   固定サイズの円に、登録写真の「顔」を収める。

   【旧】1人ずつ目視で --pro-pos-x/y と --pro-zoom を決めて、この CSS に post ID キーで書く手運用。
     登録できたのは13人だけで、残り約270人は既定値（zoom 1.35・上寄せ12%）が当たっていた。
     寄りの写真・引きの写真・横長の写真が混在するため、既定値では顔が切れる人が出ていた（ユーザー指摘）。
   【新】macOS Vision の顔検出で1人ずつ算出した値を post_meta `_kknavi_focal` に持たせ、
     kknavi2026_focal_style() が inline の CSS 変数として出す（283人ぶん登録済み）。
     算出規則: 顔の高さが窓の42%になる正方窓＋頭頂に髪の余白（顔高さの45%）を必ず確保する。
     顔が検出できない画像（イラスト・ロゴ等10件）は変数を持たず、下の既定値にフォールバックする。

   【拡大の実装】object-position で「見せたい点」を決め、transform-origin を同じ値にして scale する。
     こうすると、その点を固定したまま寄れる（見える窓＝1辺 min(W,H)/zoom の正方形）。
     旧実装の width/height:calc(100% * zoom) は、枠を溢れさせた分だけ左上に寄る挙動で直感に反した。 */
.pro-card__photo {
	--pro-pos-x: 50%;
	--pro-pos-y: 22%;
	--pro-zoom: 1;
	background: #F5F5F5; /* 欠損・余白時のフォールバック地 */
}
.pro-card__photo img,
.person-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--pro-pos-x, 50%) var(--pro-pos-y, 22%);
	transform: scale(var(--pro-zoom, 1));
	transform-origin: var(--pro-pos-x, 50%) var(--pro-pos-y, 22%);
	display: block;
}
.pro-card__photo .imgslot { width: 100%; height: 100%; }

/* B1-archive. プロフェッショナル一覧(/professional/ archive) = 円形アバターの密なディレクトリ
   （小泉 目視QA 2026-07-09 → 円形統一 2026-07-09）:
   ★ 指摘: 「トップ③は円形なのに一覧は角丸矩形で不整合。円形マスクに統一し余白も調整して」。
   → 共有 .pro-card__photo（88px 円・トップ③）と同じ真円マスクに統一する。
   ・写真は「列内で正方形(aspect-ratio:1/1)＋border-radius:pill＝真円」で全カード均一
     （元画像 519×360 でも 500×300 でも同一表示。intrinsic サイズに依存させない）。
   ・径は max-width で 124px に固定＋列内で中央寄せ（margin-inline:auto）。列が広くても円が肥大せず、
     全ブレークポイントで同径の「アバター一覧」に揃う（トップ③88pxより一回り大きい専用ページ径）。
   ・円は矩形より接触・不揃いが目立つため、径固定＋中央寄せで“整った円の一覧”にする。列は SP=2 →最大6列で密。
   per-person クロップ（--pro-zoom / --pro-pos-*）は base の .pro-card__photo img がそのまま効く
   （object-position のパンは円形でも有効）。※ kknavi.css は無改変。archive専用ゆえ theme.css 側で当てる。 */
.pro-grid--archive {
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-6) var(--space-4);
}
.pro-grid--archive .pro-card__photo {
	width: 100%;
	max-width: 124px;         /* 円の径を全カード・全幅で固定 */
	height: auto;
	aspect-ratio: 1 / 1;
	margin-inline: auto;      /* 列内で中央寄せ（円の左右に均等な余白） */
	border-radius: var(--radius-pill); /* 真円マスク＝トップ③ .pro-card__photo と統一 */
}
@media (min-width: 480px)  { .pro-grid--archive { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 680px)  { .pro-grid--archive { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 900px)  { .pro-grid--archive { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 1120px) { .pro-grid--archive { grid-template-columns: repeat(6, 1fr); } }

/* B2. カードサムネの見え方統一（目視QA指摘 B・再発／2026-07-09 修正）:
   .card__media は kknavi.css で aspect-ratio:16/9 + `.card__media img{height:100%}` を持つが、
   カード生成点（kknavi2026_card / feature-card）はアイキャッチを <a> で包んで出す。
   その <a> は素のインライン要素で高さを持たないため、img の height:100% が解決できず、
   画像は intrinsic 比率のまま表示され「新着カードの写真高さがバラバラ」になっていた（実測: 519x360 等）。
   → <a> をブロック化して 16:9 枠を充填させ、object-fit:cover で全カード同一比率に揃える。 */
.card__media > a {
	display: block;
	width: 100%;
	height: 100%;
}
.card__media > a > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Pick Up のミニカード（4:3）・セミナー告知（16:10）・人物ヒーロー写真も
   intrinsic サイズに依存せず枠を充填させ、カードごとの不揃いを無くす。 */
.mini-card__media img,
.event-item__thumb img,
.profile-hero__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.mini-card__media,
.event-item__thumb {
	background: #F5F5F5;
}
/* 人物ヒーロー写真の枠は 1:1（小泉指摘 2026-07-29 で 4:3 から修正）。
 *
 * 旧: aspect-ratio: 4/3。しかしカンプ t13 は imgslot--ratio-1-1＝正方形で、
 *   実装だけが横長になっていた（カンプが構造の正なので実装側の誤り）。
 *
 * これが「個別ページで顔がきれいに収まっていない人が多い」の原因。配信される元画像は
 * kknavi_square 由来の正方形なので、4:3 の枠に object-fit: cover で入れると
 * 上下が合計25%削られる。顔は写真の上寄りにあることが多く、頭が切れる。
 * さらに顔検出が失敗した人は --pro-pos-y が 50% に落ちるため、上を守る余地も無かった。
 *
 * 1:1 に戻せば正方形の元画像がそのまま収まり、切り落としが原理的に発生しない。
 * 個別に座標を詰める必要も無くなる（下の focal 指定は寄り/引きの調整として引き続き効く）。
 */
.profile-hero__photo {
	aspect-ratio: 1 / 1;
	background: #F5F5F5;
}
/* 人物ヒーローも顔検出のフォーカルポイントに従う（2026-07-27）。
   従来は全員一律 center 20% で、寄りの写真・引きの写真が混在すると顔位置がぶれていた。 */
.profile-hero__photo img {
	object-position: var(--pro-pos-x, 50%) var(--pro-pos-y, 20%);
	transform: scale(var(--pro-zoom, 1));
	transform-origin: var(--pro-pos-x, 50%) var(--pro-pos-y, 20%);
}

/* B3改. 記事直下 figure の余白（ヒーロー/アイキャッチ共通）。 */
.container--article > figure {
	margin: 0 0 var(--space-6);
}

/* B3改. 記事アイキャッチ＝無クロップ（目視QA指摘／2026-07-10）:
   【回帰の経緯】旧B3（2026-07-09）は T7 content-interview のヒーロー実写真用に
   `.container--article > figure > img` へ 4:3 クロップを当てた。当時のコメントには
   「T4/T5 の本文中図版は .prose figure でこの直下セレクタには当たらない」とあったが、
   2026-07-10 の表示順入替バッチで content-class.php / content-textbook.php がアイキャッチを
   `.container--article` 直下の <figure> に出すようになり、旧B3 が記事アイキャッチにも当たって
   左右が大きく欠けた（＝7/9 B3 × 7/10 表示順入替、2つのQA修正の相互作用による回帰）。
   【対処】記事アイキャッチは aspect-ratio 指定なし＝元の縦横比のまま無クロップで出す。
   固定枠(1063/570 等)にしない理由＝記事バナーの規格が混在するため
   （実測: 1063×570=AR1.86 と 920×450=AR2.04 が混在。縦長 317×448 の教材書影もある）。
   【追記（小泉承認 2026-07-10）】原寸超の拡大は禁止＝ width:auto + max-width:100%。
   縦長・低解像度の教材書影（317×448 等・本文幅未満）が width:100% だと全幅に引き伸ばされ
   拡大ボケしていた → 原寸のまま中央寄せ（margin-inline:auto ＋ display:block）。
   本文幅以上の横長バナー（920/1063px）は max-width:100% が効いて従来どおり全幅表示＝挙動不変。 */
.container--article > figure > img {
	width: auto;
	max-width: 100%;
	height: auto;
	margin-inline: auto;
	border-radius: var(--radius-md);
	background: #F5F5F5;
	display: block;
}

/* B3改. 教材レビュー＋先生のおすすめ 個別ページ限定＝書影の高さ上限 360px
   （教材レビュー: 2026-07-11 小泉承認・AUQで360px選択／先生のおすすめ: 2026-07-11 小泉承認で追随）:
   書影は原寸表示だと記事間で大きさがバラつく（実測: 317×448 / 479×675 / 300×400 等）ため高さ上限で統一。
   width:auto + height:auto の img（replaced element）に max-height を足すと縦横比なりに
   横幅も自動縮小＝歪みなし。margin-inline:auto の中央寄せも維持される。
   body class 前置（.single-textbook / .single-pro_recommend）＝記事 post（class/webinar 等）の
   横長バナーは対象外。両CPTは同じ content-textbook.php で描画され書影規格も同種。 */
.single-textbook .container--article > figure > img,
.single-pro_recommend .container--article > figure > img {
	max-height: 360px;
}

/* B3改. 書影ページ限定＝アイキャッチ figure の上余白 32px（小泉承認 2026-07-11・AUQで「書影ページのみ32px」選択）:
   記事詳細はタイトル/公開メタの header.stack と figure が密着（基底 figure ルールは margin-top:0＝gap 実質0px）。
   書影ページでは中央の小さい書影がメタ行に張り付いて見え、下側 80px（figure mb32 + section pt48）と非対称
   だった → 上に --space-6=32px を足して密着解消・下とのバランスを取る。
   通常記事（post）のバナーはタイトル直下密着のまま＝対象外（変更しない）。 */
.single-textbook .container--article > figure,
.single-pro_recommend .container--article > figure {
	margin-top: var(--space-6);
}

/* B3改. プロフェッショナル個別ページ限定の 4:3 ヒーロー枠（旧B3 のスコープ限定版）:
   body class `.single-professional` 前置で旧 T7 ヒーロー実写真専用に戻す。
   現状の professional 個別は T13 profile-hero（figure を出さない・実機確認 2026-07-10）のため
   当たる対象は無いが、T7 に巻き戻した場合の将来防御として残置する。 */
.single-professional .container--article > figure > img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: center 22%;
}

/* T13プロフィール余白修正（小泉AUQ承認「両方適用」2026-07-11）:
   余白監査の実測根拠＝bio 本文（.container--article）→直下のグレー帯（.section--subtle）が
   0px 密着、かつ帯内の padding-top が PC 64px と「外0/中64」の非対称だった。
   → (1) bio 側に 32px の白余白（--space-6）を足して帯との密着を解消し、
     (2) 帯内 padding-top を 64→48px（--space-7）に締めて非対称を緩和する。
   .single-professional スコープ＝他ページのグレー帯（トップ等・64px）には非波及。
   (2) は media 外の宣言だが SP のベース値も 48px（--space-7）のため SP は実質無変更。 */
.single-professional .container--article {
	padding-bottom: var(--space-6);
}
.single-professional .section--subtle {
	padding-top: var(--space-7);
}

/* =============================================================================
   カテゴリLP（ハブ）のファセット差別化（目視QA指摘 D）で使う軽微な余白のみ。
   facet / compare-table 本体スタイルは kknavi.css（無改変）を再利用する。
   ============================================================================= */
.facet__group + .facet__group { margin-top: var(--space-4); }

/* =============================================================================
   グロナビ 現在ページ・ハイライト（目視QA指摘 修正1／2026-07-09）
   -----------------------------------------------------------------------------
   カンプは <a class="gnav__link" aria-current="page"> に「ピンク文字＋下線(inset box-shadow)」を
   当てる（kknavi.css の .gnav__link[aria-current="page"]）。
   一方 WP は現在ページを <li class="menu-item current-menu-item …"> 側の class で示し、
   <a> に aria-current を付けない。そこで WP の current 系 class から子の .gnav__link / .gnav-drawer__link に
   同値のハイライトを橋渡しする（値はカンプ [aria-current=page] と一致：color-link＋inset下線）。
   ※ <a> への gnav__link 付与は functions.php の nav_menu_link_attributes フィルタが担う。
   ============================================================================= */
.menu-item.current-menu-item > .gnav__link,
.menu-item.current_page_item > .gnav__link,
.menu-item.current-menu-parent > .gnav__link,
.menu-item.current-menu-ancestor > .gnav__link {
	color: var(--color-link);
	box-shadow: inset 0 -2px 0 var(--color-link);
}
/* SPドロワーは下線ではなくピンク文字で現在地を示す（ドロワー項目は区切り線持ちのため下線は不自然）。 */
.menu-item.current-menu-item > .gnav-drawer__link,
.menu-item.current_page_item > .gnav-drawer__link,
.menu-item.current-menu-parent > .gnav-drawer__link,
.menu-item.current-menu-ancestor > .gnav-drawer__link {
	color: var(--color-link);
}

/* =============================================================================
   トップ ファーストビューの上余白詰め（目視QA 修正2／2026-07-09）
   -----------------------------------------------------------------------------
   トップ(front-page) 最初のセクション = Pick Up「注目の記事」。共有 .section の上下 padding は
   SP 48px / PC(≥768) 64px（kknavi.css）で、ステージングはカンプ t1-top と実効値まで一致している
   （measure-topgap.mjs 実測: header下→Pick Up eyebrow が SP48px / PC64px で完全同値）。
   ユーザー要望「もう少し上詰めしたい」に応え、ヘッダー直下の第1セクションの *上* 余白だけを詰める。
   ・下 padding は据え置き（②セミナーとの間隔＝リズムは不変）。
   ・.home の main 直下・最初の section に限定（他ページ／他セクションは不変＝回帰させない）。
   ・詰めすぎて sticky ヘッダーと干渉しない範囲: SP 48→28px / PC 64→40px。 */
.home main > section.section:first-of-type {
	padding-top: 28px; /* SP: 48→28 */
}
@media (min-width: 768px) {
	.home main > section.section:first-of-type {
		padding-top: 40px; /* PC: 64→40 */
	}
}

/* =============================================================================
   目視QA 2026-07-09（追加ラウンド）
   ============================================================================= */

/* 修正1: ロゴが本文コンテナより右にずれる（実測 PC1280: ロゴ左56px / 本文左40px＝16pxずれ）。
   原因＝ヘッダー内側 .site-header__inner の左右余白（常時16px）が .container の余白
   （kknavi.css: SP16 / ≥768=24 / ≥1200=0）とブレークポイントで不一致。
   → ヘッダー内側の余白を .container に揃える（SPは元々16pxで一致するので上書き不要）。 */
@media (min-width: 768px) {
	.site-header__inner { padding-inline: var(--space-6); } /* 本文コンテナと同じ24px */
}
@media (min-width: 1200px) {
	.site-header__inner { padding-inline: 0; }              /* 本文コンテナ(≥1200で0)と同じ端そろえ */
}

/* 改修5 カード画像クロップの統一（縦長アイキャッチのカード高さ不揃いバグ・小泉承認 2026-07-13）。
   症状: タグLP「この条件の記事」等で縦長ポートレート写真の記事カード（例 ZESTAR特集）が未クロップの
   原寸で描画されカードだけ異常に縦長になる（実測 342×446px／16:9正常カードは342×192px）。
   原因: .card は kknavi.css で display:flex;flex-direction:column ＝ .card__media はカラム方向の
   フレックスアイテム。フレックスアイテム既定の min-height:auto は「中身（置換要素 img）の内在高さ」を
   最小高さにするため、ポートレート画像では aspect-ratio:16/9（kknavi.css）が算出する高さより大きくなり、
   メディア枠が画像高さまで伸びて object-fit:cover のクロップが効かない（横長画像は内在高さ≒16:9のため無害＝
   縦長画像だけ顕在化）。対策: min-height を 0 にして aspect-ratio に高さを支配させる（全カード文脈で統一・
   横長カードは不変／.card--textbook は明示 height 指定のため影響なし）。テーマ内 CSS のみ・kknavi.css 無改変。 */
.card__media { min-height: 0; }

/* 修正3: 教材レビューのカード書影が大きすぎる（実測 3列で 384×788px・書影メディア539px）。
   書影の高さを抑え、書名・キーアートのある上部を見せる cover トリミングで全カード均一＆コンパクトに。
   ※ .card--textbook 限定（他カテゴリのカードは 16:9 のまま不変）。 */
.card--textbook .card__media {
	aspect-ratio: auto;
	height: 170px;          /* SP: 503→300→210→170（2026-07-10 4列化バッチでさらに縮小） */
	background: #f5f5f5;
}
.card--textbook .card__media > a,
.card--textbook .card__media > a > img,
.card--textbook .card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center; /* 書影の上部（書名）を優先表示 */
	display: block;
}
@media (min-width: 768px) {
	.card--textbook .card__media { height: 180px; } /* PC: 539→320→220→180（2026-07-10 4列化バッチでさらに縮小） */

	/* 教材系グリッドの多列化（PC・2026-07-10 AUQ承認→小泉指示で5列→改修4で6列へ・小泉承認 2026-07-13）。
	   対象は「純教材のグリッド」のみ:
	   ① /textbook/ ハブ（body class post-type-archive-textbook）＝6列
	   ② トップの教材リバー（aria-labelledby 属性セレクタ。sanitize_title('Textbook Review') 由来）＝6列1行
	      （3列の記事リバーと並ぶためメリハリを付ける／リバー取得は6件＝空き枠なし・front-page.php と一致）
	   ③ ファセットLP のメイン結果グリッド（.facet-layout 内）＝4列のまま
	      （サイドバー264px併存で6列だと1枚が狭すぎるため・改修4対象外）
	       同ページ下部「この条件の記事」は facet-layout の外＝3列のまま）
	   ※ DOMゲートは class 署名比較のため .grid--cards へのクラス追加は不可。
	     body class / 属性セレクタ / 文脈セレクタの CSS だけで当てる。
	     記事・混在グリッド（related__grid・検索結果・他リバー・「この条件の記事」）は3列を維持。
	     gap は kknavi.css の既存 --grid-gutter を踏襲（指定しない＝継承）。 */
	.post-type-archive-textbook .grid--cards,
	[aria-labelledby="river-textbook-review"] .grid--cards {
		grid-template-columns: repeat(6, 1fr);
	}
	.facet-layout .grid--cards {
		grid-template-columns: repeat(4, 1fr);
	}
	/* 関連記事（related__grid）＝4列（小泉指摘 2026-07-27）。
	   教材ハブが6列・ファセットが4列なのに、記事末の関連だけ3列で不整合に見えていた。
	   列数の根拠（実測・1140px コンテナで3/4/5/6列を比較）:
	     ・6列＝教材ハブ専用。書影＋短いタイトル前提で、記事カードの日本語タイトルは8行に崩れる。
	     ・5列＝チップ（「技能 ライティング(英作文)」等）がラベルの途中で改行して読めなくなる。
	     ・4列＝タイトル4〜5行・チップは1行1個で成立。関連は補助導線なので、3列より視覚的重みを
	       下げられるこの密度が妥当。
	     ・3列＝旧。カードが大きく本文セクションと同じ強さで主張してしまう。
	   取得件数も related.php 側で 3→4 に合わせている（空き枠を作らない）。 */
	.related__grid {
		grid-template-columns: repeat(4, 1fr);
	}
	/* 改修4 縦圧縮（小泉承認 2026-07-13）: 6列化で書影が縮む前提。教材カード限定で書影の高さを圧縮
	   （180→150px）。textbook 6列スコープに閉じ、記事カード（.card）・プロカード・ファセット4列へは波及させない。 */
	.post-type-archive-textbook .grid--cards .card--textbook .card__media,
	[aria-labelledby="river-textbook-review"] .grid--cards .card--textbook .card__media {
		height: 150px;
	}
}

/* 改修4 追補（小泉指摘 2026-07-13）: 関連記事枠（related）の textbook 書影は 6列縮小スコープ外だったため
   PC/SP とも 180/170px のままで大きかった（related は textbook 記事で kknavi2026_card($post,'textbook')＝
   .card--textbook を出す。related__grid は 6列化の 2スコープに含まれない）。関連は補助導線のため、ハブ6列の
   150px より控えめな 130px に縮める。セレクタ .related__grid .card--textbook（0,3,0）は基底 .card--textbook
   .card__media（0,2,0・SP170/PC180）より詳細度が高く、メディアクエリ非依存で全幅に効く。
   ※ .related__grid は related.php 専用。post/interview の関連カード（.card / .card--interview＝16:9）や
     textbook ハブ・トップ教材リバー・プロカードには非波及（.card--textbook かつ .related__grid 配下のみ）。 */
.related__grid .card--textbook .card__media {
	height: 130px;
}

/* =============================================================================
   T13 プロフェッショナル個別ページ「この先生の記事」枠の件数別レイアウト
   （小泉 目視QA 2026-07-09 追加ラウンド）
   -----------------------------------------------------------------------------
   問題: 大半の先生は関連記事が1件。single-professional.php ④の枠は共有 .grid--cards で
   ≥768px=3列・≥480px=2列（kknavi.css・無改変）。1件だと3列の左1枠だけ埋まり右2/3が空いて
   スカスカに見える（2件なら3列目が空く）。
   方針: DOM構造ゲートは class のみを署名し data-* は不可視。かつ div.grid.grid--cards は
   collapseSig 登録済で「枠の存在・位置だけ見て内部カード列は葉化」する。よって枠クラスも
   カードクラスも一切足さず、single-professional.php が枠に付ける data-articles（実表示件数
   1 / 2 / many）だけを手がかりに、この文脈（.section--subtle 内）に閉じてトラック数と
   単一カードの向きを整える。
   ・[data-articles="1"] … ≥768px で1トラック＋単一カードを横型化（.card--row の3ルールを
     クラスを足さず複製＝画像左40%/本文右）。<768px は既定の縦型フル幅のまま（触らない）。
   ・[data-articles="2"] … ≥768px で2列に強制（空の3列目を消す）。<768px は既定のまま。
   ・many（3件以上）… 一切触らない＝既定の3列を維持（回帰させない）。
   ※ data-articles を出すのは single-professional.php だけ＝他ページの .grid--cards には
     属性が無く、このセレクタに当たらないので波及しない。kknavi.css は無改変。
   ============================================================================= */
/* 変更2(a): 480〜767px 中間帯。kknavi.css:969 が .grid--cards を ≥480px で 2 列にするため、
   1件カードが左半分だけ埋まり右半分が空く。1件グリッドは ≥480px で常に 1 列＝全幅単一カードにする
   （<480px は元々 1 列）。[data-articles] は single-professional.php だけが出す＝他ページ非波及。 */
@media (min-width: 480px) {
	.section--subtle .grid--cards[data-articles="1"] {
		grid-template-columns: 1fr;
	}
}

@media (min-width: 768px) {
	/* 1件: 枠を1トラックにして単一カードを全幅の横型カードにする（右の空きを無くす）。 */
	.section--subtle .grid--cards[data-articles="1"] {
		grid-template-columns: 1fr;
	}
	/* .card--row（kknavi.css）の3ルールをクラスを足さずに複製（画像左38%・16:9・本文右）。
	   変更2(b): 画像は 4/3→16/9 で低く・40%→38% で少し狭く。本文は justify-content:center で縦中央。 */
	.section--subtle .grid--cards[data-articles="1"] .card {
		flex-direction: row;
	}
	.section--subtle .grid--cards[data-articles="1"] .card__media {
		flex: 0 0 38%;
		aspect-ratio: 16 / 9;
	}
	.section--subtle .grid--cards[data-articles="1"] .card__body {
		flex: 1 1 auto;
		justify-content: center; /* 変更2(b): 短い本文を横型カード内で縦中央に（右下の空白を詰める）。 */
	}

	/* 2件: 3列→2列に強制して空の3列目を消す（カードは既定の縦型のまま）。 */
	.section--subtle .grid--cards[data-articles="2"] {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* =============================================================================
   変更3: トップ「セミナー・お知らせ」欄の縦余白を詰める（#seminars 限定・★実測ベース／2026-07-09）
   -----------------------------------------------------------------------------
   実測 before（staging /stg2026/・measure-seminars.mjs）:
     ・section padding-block           … SP 48px / PC(≥768) 64px  ← 最も緩い縦gap
     ・section-title margin-bottom（見出し→1件目）… 32px
     ・event-item padding-block（各itemの上下）    … 16px + 16px
     ・moreDiv margin-top=16px は inline style（front-page.php）ゆえ theme.css からは触らない。
   方針: 最も緩い section padding を目安に約30%減。詰めすぎず「締まって・読める」を維持。
     サムネ(~90px)・日付カラム・グリッド列は不変。縦方向のリズムだけ詰める。
   ★スコープ: .section--subtle は複数セクションで使われるため #seminars だけに限定（他セクション非波及）。
     以前のコンパクト化（front-page.php: posts_per_page=2）は不変＝退行させない。
   ============================================================================= */
#seminars { padding-block: 32px; }                 /* SP: 48→32（−33%） */
#seminars .section-title { margin-bottom: 22px; }  /* 32→22（−31%）見出し→1件目 */
#seminars .event-item { padding-block: 12px; }     /* 16→12（−25%）各itemの上下 */
@media (min-width: 768px) {
	#seminars { padding-block: 44px; }             /* PC: 64→44（−31%） */
}

/* =============================================================================
   .section--tight の PC 復活（小泉承認 2026-07-11・PC=48px）
   -----------------------------------------------------------------------------
   【バグの仕組み】kknavi.css（無改変厳守）のカスケードバグ:
     192行 `.section--tight { padding-block: var(--space-6) }`（=32px）が、
     後方 983行の PC media query（min-width:768px）内 `.section { padding-block: var(--space-8) }`
     （=64px）に「同詳細度(0,1,0)・後方定義」で上書きされ、PC では tight が全サイト無効
     ＝全セクション 64px になっていた（SP は media 非該当ゆえ正常に 32px が効く）。
   【対処】theme.css は kknavi.css の後に enqueue される（functions.php・配信HTML実測で確認）ため、
     同じブレークポイントで tight を再宣言すれば同詳細度でも後方読み込みで確実に勝つ。
     PC 値は --space-7=48px＝SP の 32px（--space-6）から一段スケールアップ
     （.section が 48→64 にスケールするのと同じ「1トークン差」の関係を維持）。
     SP（<768px）は無変更＝kknavi.css 192行の 32px のまま。 */
@media (min-width: 768px) {
	.section--tight { padding-block: var(--space-7); }
}

/* =============================================================================
   変更A: 開催セミナー一覧（news の ACF seminar_repeat リピータ）。
   content-class.php が .container--article 内・タグの前に注入する開催回リスト。
   新規 class（.seminar-list / .seminar-item）— 新テーマのカード言語（境界線＋角丸＋余白）に合わせる。
   既存トークン（--space-* / --color-* / --radius-* / --font-*）のみ使用。
   ★スコープ: seminar_repeat のある news 記事でのみ描画（t5 授業づくり記事には出ない＝DOMゲート非波及）。
   ============================================================================= */
.seminar-list {
	list-style: none;
	margin: var(--space-5) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0; /* 案B: グループ内は横罫区切り・グループ間は .seminar-group の margin で空ける */
}
/* 案B採用（日付グループ見出し・小泉承認 2026-07-11・3案スクショ比較の結果）:
   旧デザインは各回カードの左ピンク縦罫＋枠線が強調され「各イベントがつながって見える」と
   指摘（小泉 目視QA）→ 同一開催日の回を日付ピル（.seminar-group）の下にまとめる形に変更。
   回側は枠なし・左ピンク罫撤去。同グループ内は薄い横罫で区切る（.seminar-group が
   .seminar-item の隣接を断ち切るため、各グループ先頭には罫が出ない）。
   日付行は各回にそのまま残す（時刻情報を失わない）。ピル生成は content-class.php 側
   （seminar_date から抽出・失敗時はピル無しの従来表示フォールバック）。 */
.seminar-group {
	display: inline-block;
	align-self: flex-start;
	margin-top: var(--space-5);
	padding: 2px var(--space-3);
	border-radius: var(--radius-pill);
	background: var(--color-bg-subtle);
	font-size: var(--font-size-small);
	font-weight: var(--font-weight-bold);
	color: var(--color-text);
}
.seminar-group:first-child { margin-top: 0; }
.seminar-item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-2);
	padding: var(--space-4) 0;
}
.seminar-item + .seminar-item {
	border-top: 1px solid var(--color-border);
}
/* 主役：タイトル（各カードの視線アンカー・濃く一段大きく） */
.seminar-item__title {
	font-size: var(--font-size-h4);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-heading);
	color: var(--color-text);
	margin: 0;
}
/* 2番手アンカー：開催日時（アクセント色＋太字で「いつ」を立てる） */
.seminar-item__date {
	margin: 0;
	font-size: var(--font-size-body);
	font-weight: var(--font-weight-bold);
	color: var(--color-link);
	line-height: var(--line-height-tight);
}
.seminar-item__ico {
	margin-right: var(--space-1);
	font-weight: var(--font-weight-regular);
}
/* 脇役：形式バッジ＋主催/場所を淡色1行に畳む（反復ラベルを廃し灰色の壁を解消） */
.seminar-item__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	margin: 0;
}
.seminar-item__sub {
	font-size: var(--font-size-small);
	color: var(--color-text-muted);
	line-height: var(--line-height-tight);
}
/* 形式バッジ：オンライン＝アクセント塗り／会場＝淡色枠。対面/オンラインを一目で拾える。 */
.seminar-badge {
	display: inline-block;
	font-size: var(--font-size-caption);
	font-weight: var(--font-weight-bold);
	line-height: 1.4;
	padding: 2px var(--space-2);
	border-radius: var(--radius-pill);
	white-space: nowrap;
}
.seminar-badge--online {
	background: var(--color-link);
	color: var(--color-on-accent);
}
.seminar-badge--venue {
	background: transparent;
	color: var(--color-text-muted);
	border: 1px solid var(--color-border);
}
/* 申込ボタン：控えめ・コンパクト（タイトル/日時を邪魔しない） */
.seminar-item .btn {
	margin-top: var(--space-2);
	min-height: 0;
	padding: var(--space-2) var(--space-4);
	font-size: var(--font-size-small);
	line-height: var(--line-height-tight);
}

/* =============================================================================
   検索フォーム（searchform.php）— 入力欄と『検索』ボタンを1行に横並び。
   DOM は不変（flex 化のみ）。flex なので SP でも1行を保つ。
   ========================================================================== */
.search-form {
	display: flex;
	gap: var(--space-3);
	align-items: stretch;
	max-width: 40em;
}
.search-form .field {
	flex: 1;
	min-width: 0;
}
.search-form .btn {
	flex-shrink: 0;
}

/* =============================================================================
   T3 ファセットLP（taxonomy.php）— カンプ t3-facet.html の <style> 一式を移植。
   kknavi.css（無改変）に既にある facet 本体（.facet / .facet__pills / .facet-pill 等）は
   移さず、ページ固有レイアウトだけを移植。既存トークンのみ・新規HEX/サイズ無し。
   ※ .facet__group の区切り線はサイドバー内に限定する（t2教材ハブの facet__group には
     theme.css 上部の margin のみ版が当たっており、波及させない）。
   ========================================================================== */
.facet-layout { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 1024px) {
	.facet-layout { grid-template-columns: 264px 1fr; gap: var(--space-7); align-items: start; }
	.facet-sidebar { position: sticky; top: calc(var(--header-height) + var(--space-4)); }
}
.facet-sidebar { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-paper); padding: var(--space-5); }
.facet-sidebar__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.facet-sidebar__title { font-size: var(--font-size-h4); font-weight: var(--font-weight-bold); color: var(--color-ink); }
.facet-reset { font-size: var(--font-size-caption); color: var(--color-link); }
.facet-sidebar .facet__group + .facet__group { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--color-border); }

.selected-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.selected-chip { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 32px; padding: 4px var(--space-3); border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-on-accent); border: 1px solid var(--color-ink); font-size: var(--font-size-label); line-height: 1.3; }
.selected-chip__axis { color: rgba(255,255,255,.75); font-size: var(--font-size-caption); }
.selected-chip__remove { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border: 0; border-radius: var(--radius-pill); background: rgba(255,255,255,.18); color: var(--color-on-accent); line-height: 1; padding: 0; }
.selected-chip__remove:hover { background: rgba(255,255,255,.32); }

.result-bar { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-5); }
.result-count { font-size: var(--font-size-small); color: var(--color-text-muted); }
.result-count strong { font-size: var(--font-size-h4); color: var(--color-ink); font-family: var(--font-sans-latin); font-weight: var(--font-weight-bold); }

.facet-sp-bar { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-bottom: var(--space-5); }
.facet-sp-bar .facet-sheet-trigger { flex: 0 0 auto; }

/* チップ内カウント（chip__axis=軸ラベルとは別物。数値は muted latin で意味を分離）
   ※ 2026-07-10: T3 のピル/チップ件数表示は「教材限定の見出し件数」との矛盾回避のため撤去
     （数字なしピル）。クラス定義はカンプ t3 の <style> 整合と将来の educated 件数用に残す。 */
.chip__count { color: var(--color-text-muted); font-family: var(--font-sans-latin); font-size: var(--font-size-caption); }

/* 空状態（絞り込み0件）— 行き止まりにしない（条件解除導線） */
.empty-state { text-align: center; border: 1px dashed var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); padding: var(--space-7) var(--space-5); }
.empty-state__title { font-size: var(--font-size-h4); font-weight: var(--font-weight-bold); color: var(--color-ink); margin-bottom: var(--space-2); }
.empty-state__lead { font-size: var(--font-size-small); color: var(--color-text-muted); margin-bottom: var(--space-4); }
.empty-state__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; }

/* =============================================================================
   トップ ファーストビュー（Pick Up）改修（小泉AUQ承認 2026-07-10）
   -----------------------------------------------------------------------------
   CSSのみ / front-page.php・kknavi.css は不変。目的:
     (1) 主役画像の文字切れ解消（枠を編集部バナー規格 1063×570≒AR1.86 に）
     (2) 主役リードを2行に制限（長文でカードが縦伸びするのを抑える）
     (3) 右の準主役ミニ3枚を「縦型サムネ大カード」に変え、右下の空白
         （実測 before: feature-card 725px vs secondary-list 353px＝diff 372px）を解消し、
         左右の高さを±20px以内に揃える。
   ★カンプ t1-top はこの変更に追随しない＝theme.css 上書きによる意図的乖離
     （前例: プロ一覧の密ディレクトリ B1-archive）。DOMは不変（CSSのみ）ゆえ構造ゲートは緑。
   ============================================================================= */

/* (1) 主役画像枠を 1063/570（≒1.86）に。
   アイキャッチ原本は 1063×570（AR1.865）が主流（stg REST 実測: 直近8本中7本が1.86、
   残1本は 500×290＝AR1.72 の小画像）。登録サイズ kknavi_feature(1200×675) は原本幅<1200のため
   生成されず、the_post_thumbnail は full（＝1.86 原本）を配信する。枠が16:9(kknavi.css:475)だと
   object-fit:cover 中央で左右約4%クロップ＝バナー左端の文字が欠ける（before 実測 disp AR1.778）。
   枠を1.86にすれば無クロップで全幅表示できる。※稀に AR1.72 の小画像が主役化した場合のみ
   上下に軽微クロップ（許容）。スコープは .feature-card 限定（新着カード/ミニは16:9のまま不変）。 */
/* 追記（2026-07-30・小泉指摘「額縁になっている」）:
   上の「原本は 1.86 が主流」という前提が崩れる画像が主役になったときの手当て。
   sticky にしたセミナーバナーは 920×450（AR 2.043）で、枠 1.865 に対して
   cover なら左右が約9%切れ、contain なら上下に約9%のグレー帯＝額縁になった。
   どちらも NG（A4 が「不要な余白」を FAIL 条件に持つ＝額縁は元から NG と決めてある）。
   そこで front-page.php がアイキャッチの実比率を `--fv-ar` として渡し、**枠を画像に合わせる**。
   渡されないとき（比率が 1.5〜2.4 の外・アイキャッチ無し）は従来の 1063/570 のまま。 */
.feature-card .card__media { aspect-ratio: var(--fv-ar, 1063 / 570); }

/* (2) 主役リードを2行に制限。 */
.feature-card .card__excerpt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

/* (3) 右の準主役リストを縦型サムネ大カード化（記事のみ×2枚・1.86無クロップ版。
   小泉AUQ承認 2026-07-10「記事のみ＋1.86枠」。front-page.php 側で post のみ・news除外・
   2枚に変更済＝種類ごとの画像規格差〔記事=1.86バナー/プロ=人物/お知らせ=イラスト〕を根治）。
   幾何根拠: 1.86無クロップ=幅427×高さ約230px＋テキスト約90px≒320px/枚。3枚=960px は
   左（主役カード 約706px）を超過するため2枚。2枚は space-between で左と等高に割り付ける。
   ★スコープ: FVが2カラムになる PC(≥768px) 限定。SP/中間帯(<768px)は kknavi.css の
     既定「横型ミニ（サムネ左104px＋テキスト右）」のまま＝非破壊（before SP390 実測維持）。 */
@media (min-width: 768px) {
	/* 右列を主役カードの高さに追随させる（グリッド行を stretch）。 */
	.lead-grid { align-items: stretch; }
	/* 右リストは行の高さ（＝主役カード高）いっぱい。2枚を上下端に振り分けて左と等高に。 */
	.secondary-list {
		height: 100%;
		gap: var(--space-5);
		justify-content: space-between;
	}
	/* 縦型サムネ大カードでは項目間の区切り線は不要（各カードが独立サムネを持つ）。 */
	.secondary-list .mini-card + .mini-card { border-top: 0; }
	/* 縦1列（サムネ上・テキスト下）。カード高は内容なり（サムネ1.86＋テキスト）＝flexで伸ばさない。 */
	.secondary-list .mini-card {
		grid-template-columns: 1fr;    /* 横104px＋1fr → 縦1列 */
		gap: var(--space-3);
		padding: 0;
		flex: 0 0 auto;
	}
	/* サムネは編集部バナー規格 1063/570（主役 .card__media と同じ枠）。原本AR=1.86 と一致する
	   ため object-fit:cover のままで無クロップ全面表示（記事のみ化で人物/イラスト規格は来ない）。 */
	.secondary-list .mini-card__media {
		aspect-ratio: 1063 / 570;
		height: auto;
	}
	/* タイトルは2行制限（縦型カードのテキスト高さを一定に保ち割付を安定させる）。 */
	.secondary-list .mini-card__title {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
}

/* (4)(5) FVワンポイントグラデ＝案D（A上辺ライン＋Bグラデピル。小泉採用 2026-07-10。
   3案スクショ比較 fv-grad-a/b/c/d から選定）。色はメルマガCTAと同じブランド資産
   --gradient-brand（#FF5E83→#FF6883→#FFA66B・kknavi.css:30）を流用＝新色なし。 */

/* (4) 案A: 主役カード上辺にグラデアクセントライン。
   .card は position:relative＋overflow:hidden＋角丸(radius-md) → 帯は角丸に自動クリップ。
   hub-entry--primary（border-image罫線）と同じ「効かせどころ＝面/罫のみ」のVI言語。 */
.feature-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 5px;
	background: var(--gradient-brand);
	z-index: 1;
	pointer-events: none; /* カード全面リンク（.card__title a::after inset:0）のクリックを阻害しない */
}

/* (5) 案B: FVラベル（特集/授業実践 等）をグラデ塗り＋白文字のピルに。
   ★スコープ: FV限定（.feature-card / .secondary-list 配下のみ）。記事詳細の eyebrow
   （.card__category 共有クラス）や他カードには波及しない。SP(<768px) もピル適用
   （SP390 スクショで自然さを確認のうえ全幅適用・不自然なら @media で PC 限定に）。 */
.feature-card .card__category,
.secondary-list .mini-card__cat {
	display: inline-block;
	align-self: flex-start; /* flex列 .card__body 内で横伸び防止 */
	background: var(--gradient-brand);
	color: var(--color-on-accent);
	padding: 3px 12px;
	border-radius: var(--radius-pill);
}

/* =============================================================================
   リード/説明文の日本語改行改善（小泉指示 2026-07-11）
   -----------------------------------------------------------------------------
   症状: /class/ ハブの説明文（p.lead）が「…実践を探」/「せます。」と語の途中で折れ、
   末尾に3文字の孤立行ができていた。同種のリード/説明文系クラスへ一括適用する。
   ・word-break: auto-phrase … 文節単位の折り返し（Chrome 119+・BudouX 内蔵。
     非対応ブラウザは宣言ごと無視＝現状維持のプログレッシブ・エンハンスメント）。
   ・text-wrap: pretty … 最終行の孤立防止（非対応ブラウザは無視）。
   【除外】
   ・.prose（記事本文）… 長文への auto-phrase コスト回避・本文は現状で問題ないため適用しない。
   ・line-clamp 使用要素（.feature-card .card__excerpt / .secondary-list .mini-card__title）…
     -webkit-line-clamp との相互作用回避のため対象リストに含めない。
   ============================================================================= */
.lead,
.section-title__lead,
.empty-state__title,
.empty-state__lead,
.result-bar,
.hub-entry__desc,
.promo__desc,
.cta__note,
.site-footer__desc {
	word-break: auto-phrase;
	text-wrap: pretty;
}

/* HTMLサイトマップ（page-sitemap.php）。実データから生成する一覧なので、装飾は最小限に。 */
.sitemap-list {
	list-style: none;
	margin: var(--space-4) 0 0;
	padding: 0;
	display: grid;
	gap: var(--space-2);
	grid-template-columns: 1fr;
}
@media (min-width: 768px) {
	.sitemap-list {
		grid-template-columns: repeat(2, 1fr);
	}
}
.sitemap-list li {
	display: flex;
	align-items: baseline;
	gap: var(--space-3);
	padding-block: var(--space-2);
	border-bottom: 1px solid var(--color-border);
}
.sitemap-list__count {
	color: var(--color-text-muted);
	font-size: var(--font-size-caption);
}
.sitemap-axis + .sitemap-axis {
	margin-top: var(--space-5);
}
.sitemap-axis__label {
	margin-bottom: var(--space-2);
	font-size: var(--font-size-caption);
	color: var(--color-text-muted);
	letter-spacing: 0.04em;
}

/* 固定ページ（page.php）の下余白（小泉指摘 2026-07-27）。
   記事系テンプレは末尾に関連/メルマガCTA（.section = padding-block 48〜96px）が続くので
   フッターとの間が空くが、固定ページは container--article で終わるため本文の最終行が
   フッターの黒帯に密着していた（/privacy/ で顕在化）。上の余白は header.stack が持つので下だけ足す。 */
.page .container--article {
	margin-bottom: var(--space-9);
}

/* 節（句読点区切り）単位の改行制御（小泉 目視QA 2026-07-27）。
   auto-phrase だけでは「…お名前から、その」/「先生の記事を…」と連体詞「その」の直後で折れる
   （BudouX 的には正しい文節境界なので CSS では直せない）。
   kknavi2026_lead_html() が節を .jp-clause で包み、atomic inline 同士の境界＝句読点の直後だけを
   改行候補にする。狭い画面で節が1行に収まらない場合は節の内部で折り返す（従来挙動へフォールバック）。 */
.jp-clause {
	display: inline-block;
}

/* =============================================================================
   教材ページの食べログ型IA・A案（改修1/改修2・小泉AUQ承認 2026-07-12）
   ============================================================================= */

/* 改修1: 先生のおすすめ（pro_recommend）個別ページのレビュー本体（.single-pro_recommend .prose 内）。
   評者行＝「◯◯先生（肩書）のおすすめ」1行。総評（行0・qa_ttl空）＝リード風の導入。
   いずれも .single-pro_recommend にスコープし、教材ページ（textbook）側へは波及させない。 */
.single-pro_recommend .prose .reco-byline {
	margin-bottom: var(--space-5);
	color: var(--color-text-muted);
	font-size: var(--font-size-caption);
}
.single-pro_recommend .prose .reco-byline a {
	color: var(--color-link);
	text-decoration: underline;
}
.single-pro_recommend .prose .reco-lead {
	font-size: calc(var(--font-size-body) * 1.06);
	line-height: var(--line-height-body);
}
.single-pro_recommend .prose .reco-lead p {
	margin-top: var(--space-4);
}
.single-pro_recommend .prose .reco-lead p:first-child {
	margin-top: 0;
}

/* 回答を面で閉じる（小泉指摘 2026-07-29）。
   旧サイトは回答が #f5f5f5 のグレー箱に入っており、Q（見出し）と A（箱）で
   1ユニットが視覚的に閉じていた。新テーマは白地に流し込みで、区切りが
   見出しの大きさだけになっていたため、Q&A が続くこのページ型では
   「どこまでが1つの答えか」が読み取れなかった。
   本文サイズ（17px / 行間1.9）は据え置く。読みにくさの原因は字の大きさではなく
   群が見えないことなので、面を戻せば足りる。 */
.single-pro_recommend .prose .reco-answer {
	background: var(--color-surface);
	border-radius: var(--radius-md);
	padding: var(--space-4) var(--space-5);
	margin-top: var(--space-3);
}
.single-pro_recommend .prose .reco-answer > p:first-child {
	margin-top: 0;
}
.single-pro_recommend .prose .reco-answer > p:last-child {
	margin-bottom: 0;
}
/* 箱が続くので、次の設問見出しとの間を空けて群の切れ目を作る。 */
.single-pro_recommend .prose .reco-answer + h2 {
	margin-top: var(--space-6);
}

/* 改修2: 教材ページ（textbook）「この教材への先生のおすすめ」のレビューサマリカード。
   新規クラスは section--ichioshi 内に閉じる（ゲート識別セクションのスコープを越えない）。
   .grid.grid--cards の自動配置に載る（display:grid は kknavi.css 側）。 */
.section--ichioshi .reco-card {
	display: flex;
	flex-direction: column;
	padding: var(--space-5);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
}
.section--ichioshi .reco-card__link {
	display: block;
	text-decoration: none;
	color: inherit;
}
.section--ichioshi .reco-card__title {
	font-weight: 700;
	line-height: 1.5;
	color: var(--color-ink);
}
.section--ichioshi .reco-card__excerpt {
	margin-top: var(--space-3);
	font-size: var(--font-size-caption);
	line-height: var(--line-height-body);
	color: var(--color-text);
}
.section--ichioshi .reco-card__by {
	margin-top: var(--space-4);
	padding-top: var(--space-3);
	border-top: 1px solid var(--color-border);
	font-size: var(--font-size-caption);
	color: var(--color-text-muted);
}
.section--ichioshi .reco-card__role {
	color: var(--color-text-muted);
}

/* =============================================================================
   横長リッチサマリー行（改修A/改修B・小泉AUQ承認 2026-07-13）
   教材ページ「この教材への先生のおすすめ」（改修A）と pro_recommend 個別「この教材への他の
   先生のおすすめ」（改修B）で共有（kknavi2026_reco_row）。1列縦積み（.reco-list）に横長行を積む。
   写真あり=左に円形72px、写真なし=写真枠ごと出さず本文左詰め（灰色丸・イニシャルは出さない）。
   新規クラスは .reco-list（グリッド枠の置換）と section--ichioshi 内に閉じる。
   ============================================================================= */
.reco-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}
.section--ichioshi .reco-row {
	flex-direction: row;
	align-items: flex-start;
	gap: var(--space-5);
}
.reco-row__photo {
	flex: 0 0 auto;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--color-surface-subtle, var(--color-surface));
}
.reco-row__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* 写真未登録の先生の丸アイコン（人型シルエット・小泉指摘 2026-07-27）。
   匿名先生だけ丸が出て、実名でも写真が無い先生は枠ごと消えていたため行頭が不揃いだった。
   丸枠は常に出し、中身だけ写真↔シルエットで切り替える。 */
.person-avatar .person-avatar__fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: var(--color-surface);
	color: #C9C9C9; /* シルエット。--color-border(#D5D5D5) より一段濃くして面と分離させる */
}
.person-avatar .person-avatar__fallback svg {
	width: 78%;
	height: 78%;
	display: block;
}
.reco-row__body {
	flex: 1 1 auto;
	min-width: 0;
}
.reco-row__by {
	margin-bottom: var(--space-2);
	font-size: var(--font-size-caption);
	color: var(--color-text-muted);
}
.reco-row__by a {
	color: var(--color-link);
	text-decoration: underline;
}
.reco-row__role {
	color: var(--color-text-muted);
}
.reco-row__more-link {
	margin-top: var(--space-4);
	font-size: var(--font-size-caption);
}
.reco-row__more-link a {
	color: var(--color-link);
	font-weight: 700;
	text-decoration: none;
}
.reco-row__more-link a:hover {
	text-decoration: underline;
}
@media (max-width: 640px) {
	.reco-row__photo {
		width: 56px;
		height: 56px;
	}
	.section--ichioshi .reco-row {
		gap: var(--space-4);
	}
}

/* =============================================================================
   pro_recommend 個別（実践レポート）の評者プロフィールカード
   （mybest型・E-E-A-T強化・小泉AUQ承認 2026-07-13 → 2026-07-27 にファーストビューへ移設）
   author-meta クラスは使わない（DOMゲート card-byline-guard 抵触回避）。
   .single-pro_recommend にスコープし textbook 側へ波及させない。写真なし→写真枠なし／紹介文なし→bio行省略。
   ★ 2026-07-27: 本文（.prose）冒頭 → ヘッダ直下へ移したのでスコープから .prose を外した。
   ============================================================================= */
.single-pro_recommend .reco-reviewer {
	display: flex;
	align-items: flex-start;
	gap: var(--space-5);
	margin-bottom: var(--space-6);
	padding: var(--space-5);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
}
.single-pro_recommend .reco-reviewer__photo {
	flex: 0 0 auto;
	width: 96px;
	height: 96px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--color-surface-subtle, var(--color-surface));
}
.single-pro_recommend .reco-reviewer__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.single-pro_recommend .reco-reviewer__body {
	flex: 1 1 auto;
	min-width: 0;
}
.single-pro_recommend .reco-reviewer__name {
	font-weight: 700;
	font-size: calc(var(--font-size-body) * 1.06);
	color: var(--color-ink);
}
.single-pro_recommend .reco-reviewer__name a {
	color: var(--color-link);
	text-decoration: none;
}
.single-pro_recommend .reco-reviewer__name a:hover {
	text-decoration: underline;
}
.single-pro_recommend .reco-reviewer__role {
	margin-top: var(--space-2);
	font-size: var(--font-size-caption);
	color: var(--color-text-muted);
}
.single-pro_recommend .reco-reviewer__bio {
	margin-top: var(--space-3);
	font-size: var(--font-size-caption);
	line-height: var(--line-height-body);
	color: var(--color-text);
}
.single-pro_recommend .reco-reviewer__link {
	color: var(--color-link);
	white-space: nowrap;
	text-decoration: underline;
}
@media (max-width: 640px) {
	.single-pro_recommend .reco-reviewer__photo {
		width: 72px;
		height: 72px;
	}
}
/* 評者カードの小見出し（ファーストビューで「これは人が書いたレポートだ」と最初に伝える行）。 */
.single-pro_recommend .reco-reviewer__eyebrow {
	margin-bottom: var(--space-2);
	font-size: var(--font-size-caption);
	letter-spacing: 0.04em;
	color: var(--color-text-muted);
}

/* =============================================================================
   実践レポート（pro_recommend）の「対象の教材」ストリップ（小泉指摘 2026-07-27）
   教材ページ →「実践レポート全文を読む」→ レポート、と進んだとき、レポート側にも書影＋スペックが
   同じ並びで再掲され、遷移したことが分からない／レビューではない画像が主役になっていた。
   書影はここに小さく落として「文脈＋教材ページへの戻り導線」に役割を変える。
   ============================================================================= */
.reco-target {
	display: block; /* 統合パネルは head + spec の2段になる。横並びは __head / --next 側に持たせる */
	margin-top: var(--space-5);
	padding: var(--space-4);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-paper);
	text-decoration: none;
	color: inherit;
}
.reco-target--next {
	display: flex;
	align-items: center;
	gap: var(--space-4);
}
.reco-target--next:hover {
	background: var(--color-surface);
	text-decoration: none;
}
.reco-target__head {
	display: flex;
	align-items: center;
	gap: var(--space-4);
}
.reco-target__thumb {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	border-radius: var(--radius-sm);
	overflow: hidden;
	background: var(--color-surface);
}
.reco-target__thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}
.reco-target__body {
	flex: 1 1 auto;
	min-width: 0;
}
.reco-target__label {
	display: block;
	font-size: var(--font-size-caption);
	letter-spacing: 0.04em;
	color: var(--color-text-muted);
}
.reco-target__title {
	display: block;
	margin-top: 2px;
	font-weight: var(--font-weight-bold);
	color: var(--color-ink);
}
.reco-target__more {
	flex: 0 0 auto;
	font-size: var(--font-size-caption);
	color: var(--color-link);
	white-space: nowrap;
}
@media (max-width: 640px) {
	.reco-target__more {
		display: none; /* 幅が足りないので矢印文言は省く。カード全体がリンクなので機能は落ちない。 */
	}
}

/*
 * 対象教材パネルのスペック（小泉指摘 2026-07-28）。
 * 旧 .spec-fold（details「この教材の基本情報」）を廃止して、ここに統合した。
 * コンテナが a でなくなったので、書影・教材名・「教材ページを見る」を個別のリンクにしている
 * （スペック値が term リンクを含むため、リンクの入れ子にできない）。
 */
a.reco-target__thumb {
	display: block;
}
a.reco-target__title,
a.reco-target__more {
	text-decoration: none;
}
a.reco-target__title:hover,
a.reco-target__more:hover {
	text-decoration: underline;
}
.reco-target__spec {
	margin: var(--space-4) 0 0;
	padding-top: var(--space-4);
	border-top: 1px solid var(--color-border);
	display: grid;
	gap: var(--space-2);
}
/* 孤児レポート（親教材が解決できない5本）は head が無く spec だけになる。仕切り線は不要。 */
.reco-target__spec:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}
.reco-target__spec-row {
	display: flex;
	gap: var(--space-3);
	font-size: var(--font-size-small);
}
.reco-target__spec-row dt {
	flex: 0 0 4.5em;
	color: var(--color-text-muted);
}
.reco-target__spec-row dd {
	margin: 0;
	min-width: 0;
}

/* =========================================================================
   イベント掲載依頼フォーム（page-event-submit.php）。
   外部の先生がセミナー/イベント情報を投稿する簡易フォーム＋完了画面。
   入力欄は kknavi.css の .field を再利用し、ここではフォーム固有のレイアウトだけを足す。
   ========================================================================= */
.event-form {
	max-width: 40em;
	margin-top: var(--space-6);
	/* 送信ボタンがフッター（インク地）に密着しないよう白地側に下余白を確保（2026-07-16 小泉指摘）。
	   padding にするのは margin だと .stack 末尾要素の相殺で消えうるため（padding は相殺しない）。 */
	padding-bottom: var(--space-8);
}
.event-form__field {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}
.event-form__label {
	font-size: var(--font-size-label);
	font-weight: 700;
	color: var(--color-text);
}
.event-form__required {
	display: inline-block;
	margin-left: var(--space-2);
	padding: 1px var(--space-2);
	border-radius: var(--radius-sm);
	font-size: var(--font-size-caption);
	font-weight: 700;
	color: var(--color-on-accent);
	background: var(--color-state-error);
	vertical-align: middle;
}
.event-form__textarea {
	min-height: 8em;
	resize: vertical;
	line-height: var(--line-height-body);
}
.event-form__checks {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3) var(--space-5);
}
.event-form__check {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
}
.event-form__section-note {
	font-size: var(--font-size-caption);
	color: var(--color-text-muted);
}
.event-form__actions {
	margin-top: var(--space-4);
}
/* honeypot: 画面外に退避（display:none だと一部 bot が回避するため位置退避で隠す）。 */
.event-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
/* 送信エラー通知。 */
.event-form__notice {
	margin-top: var(--space-5);
	padding: var(--space-4) var(--space-5);
	border-radius: var(--radius-md);
	border: 1px solid var(--color-border);
}
.event-form__notice--error {
	border-color: var(--color-state-error);
	background: rgba(216, 52, 92, .06);
	color: var(--color-text);
}
.event-form__notice ul {
	margin: var(--space-2) 0 0;
	padding-left: 1.25em;
}
/* 完了画面。 */
.event-submit-done {
	margin-top: var(--space-6);
	padding-bottom: var(--space-8);
}
.event-submit-done__lead {
	font-size: var(--font-size-body);
	line-height: var(--line-height-body);
}
.event-recap {
	padding: var(--space-5);
	border-radius: var(--radius-md);
	border: 1px solid var(--color-border);
	background: var(--color-bg-subtle);
}
.event-recap__title {
	margin: 0 0 var(--space-3);
	font-size: var(--font-size-label);
	font-weight: 700;
}
.event-recap__list,
.info-list {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--space-2) var(--space-4);
	margin: 0;
}
.event-recap__list dt,
.info-list dt {
	font-weight: 700;
	color: var(--color-text-muted);
	white-space: nowrap;
}
.event-recap__list dd,
.info-list dd {
	margin: 0;
	color: var(--color-text);
	overflow-wrap: anywhere;
}
@media (max-width: 640px) {
	.event-recap__list,
	.info-list {
		grid-template-columns: 1fr;
		gap: var(--space-1) var(--space-4);
	}
	.event-recap__list dd,
	.info-list dd {
		margin-bottom: var(--space-2);
	}
}

/* =========================================================================
   メルマガCTA: 自前フォーム化（お名前・学校名・メールの3項目＋同意）2026-07-27
   kknavi.css は PC で .cta__form 全体を横並び(row)にするが、項目が増えたので
   フォームは縦積みに戻し、入力欄だけを横並びにする。
   kknavi.css は編集禁止なので、同じセレクタ・同じメディアクエリを theme.css 側で
   後勝ちさせて打ち消す（[[feedback: 修飾クラスはmedia query内の基底クラス再宣言に敗北しうる]]）。
   ========================================================================= */
.cta__security {
	display: none !important; /* nonce/honeypot 置き場。hidden 属性が flex に負けないよう明示 */
}
.cta__form {
	max-width: 46em;
}
.cta__fields {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}
.cta__consent {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 0.5em;
	color: var(--color-on-accent);
	font-size: var(--font-size-caption);
	line-height: 1.6;
	text-align: left;
	cursor: pointer;
}
.cta__consent input {
	flex: 0 0 auto;
	margin-top: 0.28em;
}
.cta__done,
.cta__error {
	max-width: 34em;
	margin-inline: auto;
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-md, 8px);
	background: rgba(255, 255, 255, 0.16);
	color: var(--color-on-accent);
	font-weight: 700;
}
.cta__error {
	background: rgba(0, 0, 0, 0.18);
}

@media (min-width: 768px) {
	/* kknavi.css の .cta__form{flex-direction:row} を打ち消す（項目が3つに増えたため） */
	.cta__form {
		flex-direction: column;
		align-items: stretch;
	}
	.cta__fields {
		flex-direction: row;
	}
	.cta__fields .field {
		flex: 1 1 0;
		min-width: 0;
	}
	.cta__form .btn {
		flex: 0 0 auto;
		align-self: center;
		min-width: 12em;
	}
}

/* =========================================================================
   見出しの2階層化（C案・小泉承認 2026-07-13）— 2026-07-27 復元
   2026-07-13 に適用したはずが staging にも git 履歴にも残っておらず（別端末の作業が
   git 化のタイミングで取り込まれなかったと見られる）、教材/おすすめ個別ページの
   見出しがすべて同じ強さ（h2.h3＝22px）で並び、スペック枠と本文の境界が消えていた。

   階層1 = 本文の章見出し（.prose 内）    → 強く見せる（D案・28px＋左罫）
   階層2 = 補助枠の見出し（section > h2.h3）→ 枠ラベル化して弱める
   「全部を強くしない」ことでスペック枠と本文章の境界を保つ設計。

   ★ 2026-07-27 追記（小泉判断）: 当初は .single-textbook / .single-pro_recommend 限定だった。
     教材/おすすめだけ本文見出しがテンプレ出力の <h2 class="h3">（＝22px）で、枠見出しと同じ
     強さに潰れていたのが元の症状で、通常記事は素の .prose h2（28px）＝すでに階層があったため。
     ただしその結果「この記事のタグ」等の同じ枠ラベルが、教材=15px muted / 通常記事=22px と
     ページ種別で別の見え方になった。同じ部品が場所で変わるのは読者にも実装にも事故の元なので、
     全 single ページに統一する（本文h2の左罫も含めてサイト全体で見出しの語彙を1つにする）。
   ========================================================================= */

/* 階層1: 本文の章見出し。.h3 が付いていても勝てるよう詳細度を確保する（PHP 無改変で効かせる） */
.single .prose h2 {
	font-size: 28px;
	line-height: 1.4;
	margin-top: 48px;
	padding-left: 0.6em;
	border-left: 4px solid var(--color-link);
}
.single .prose h2 + p {
	margin-top: 12px;
}

/* 階層2: 補助枠（スペック/おすすめ/比較/タグ/登場する先生 等）の見出しは小さな枠ラベルにする */
.single section > h2.h3 {
	font-size: 15px;
	line-height: 1.5;
	color: var(--color-text-muted);
	letter-spacing: 0.04em;
}

/* =========================================================================
   ページネーション（WPネイティブ the_posts_pagination をカンプ design に合わせる）
   2026-07-27

   kknavi.css の .pagination__link / .pagination__current はカンプ独自マークアップ前提。
   テーマは WP ネイティブの the_posts_pagination を使っており、出力は
     nav.navigation.pagination > div.nav-links > a/span.page-numbers
   なので、.pagination（flex）は nav に当たるものの、その直下は
   h2.screen-reader-text と div.nav-links の2つ。**数字そのもの（.page-numbers）には
   スタイルが一切当たっていなかった**（枠線もパディングも無い素のリンク）。
   結果、番号が詰まって並び、前後の余白も無く、一覧の末尾で窮屈に見えていた。
   ここで .page-numbers を .pagination__link / __current と同じ見た目に揃える。
   ========================================================================= */
.navigation.pagination {
	/* 一覧本体からの離れを確保（上）と、次のセクションとの間（下） */
	margin-top: var(--space-7);
	margin-bottom: var(--space-4);
}
.navigation.pagination .nav-links {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	flex-wrap: wrap;
}
.navigation.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--tap-target-min);
	min-height: var(--tap-target-min);
	padding: 0 var(--space-3);
	border-radius: var(--radius-sm);
	border: 1px solid var(--color-border);
	font-family: var(--font-sans-latin);
	font-size: var(--font-size-small);
	color: var(--color-link);
	background: var(--color-paper);
	text-decoration: none;
}
.navigation.pagination a.page-numbers:hover {
	background: var(--color-surface);
	text-decoration: none;
}
.navigation.pagination .page-numbers.current {
	background: var(--color-ink);
	color: var(--color-on-accent);
	border-color: var(--color-ink);
	font-weight: var(--font-weight-bold);
}
/* 省略記号（…）はボタンにしない＝枠も最小幅も持たせない */
.navigation.pagination .page-numbers.dots {
	min-width: 0;
	border-color: transparent;
	background: transparent;
	color: var(--color-text-muted);
	padding: 0 var(--space-1);
}

/* =========================================================================
   編集ポリシー・運営者情報（T11系）2026-07-28
   kknavi.css の reset が ul/ol のマーカーを全消しするため、この固定ページの
   箇条書きだけ復活させる（方針の列挙が地の文に見えると読み飛ばされる）。
   サイト全体の .prose に効かせると記事本文の旧HTML（レイアウト用ul）まで
   巻き込むので、ページ限定クラスに閉じる。
   ========================================================================= */
.policy-prose ul {
	list-style: disc;
	padding-left: 1.4em;
}
.policy-prose ul > li {
	margin-bottom: var(--space-2);
}
.policy-prose ul > li::marker {
	color: var(--color-text-muted);
}

/* =========================================================================
   記事本文の箇条書き・番号付きリストのマーカーを戻す（小泉指摘 2026-07-29）
   kknavi.css:133 の reset `ul, ol { list-style: none }` がサイト全体に効いており、
   本文の <ul>/<ol>/<li> は HTML に存在するのにマーカーだけが出ていなかった。
   体裁の問題ではなく内容の欠落で、たとえば pro_recommend/15062 の「5つの観点」は
   <ol> の 1〜5 が消えて、ただの5行に見えていた。

   直下の子（>）に限定する理由 — 実測 430 ページ・ul/ol 215 件の調査結果:
     ・直下の子 204 件はすべて本物の箇条書き。class 属性を持つものは 0 件だった
       （＝class による許可/除外リストは書けず、深さが唯一の弁別軸）。
     ・入れ子 11 件のうち 8 件は Squarespace 移行時の関連記事リンク
       （div.sqs-block-content > ul[data-rte-list]、li の中身が <a>）。
       子孫セレクタ `.prose ul` にするとこのナビに黒丸が付くが、直下限定なら当たらない。
   これが theme.css:1452 の「.prose 全体に効かせると旧HTMLを巻き込む」警告の実体で、
   深さで切れば回避できることが確認できたため、ページ限定を解いて本文全体に広げる。

   取りこぼし（把握のうえ許容）: seminarvideo/9944 の1件だけ、本物の箇条書きが
   div.event-description の中（depth 3）にあるためマーカーが付かない。
   seminarvideo は全8件と少なく、必要になったら個別に足す。
   ========================================================================= */
/* .reco-answer / .reco-lead は pro_recommend の本文をテーマ側で包んでいるだけの
   ラッパーで、その中身は「直下の本文」と同格に扱う（包んだせいでマーカーが
   消えては本末転倒なので、深さ判定の例外として明示的に許可する）。 */
.prose > ul,
.prose > .reco-answer > ul,
.prose > .reco-lead > ul {
	list-style: disc;
	padding-left: 1.4em;
}
.prose > ol,
.prose > .reco-answer > ol,
.prose > .reco-lead > ol {
	list-style: decimal;
	padding-left: 1.6em;
}
.prose > ul ul {
	list-style: circle;
	padding-left: 1.2em;
}
.prose > ol ol {
	list-style: lower-alpha;
	padding-left: 1.4em;
}
.prose > ul > li,
.prose > ol > li,
.prose > .reco-answer > ul > li,
.prose > .reco-answer > ol > li {
	margin-bottom: var(--space-2);
}
/* Squarespace 由来の関連記事リンク。万一 .prose 直下に現れても記号を出さない。 */
.prose ul[data-rte-list] {
	list-style: none;
	padding-left: 0;
}

/* =========================================================================
   本文の蛍光ペン（小泉指摘 2026-07-29）
   旧テーマは記事本文に対して次の2本を当てていた（KKNtheme/assets/css/styles.css）:
     .wysiwyg strong { font-weight:500; background: linear-gradient(transparent 60%, #ff6 60%) }
     .wysiwyg em     { font-weight:500; font-style:normal;
                       background: linear-gradient(transparent 60%, #F7C1CC 60%) }
   つまりライターは長年、**太字＝黄色マーカー / 斜体＝ピンクマーカー**として書いてきた。
   新テーマにこの指定が無いため、黄色は「ただの太字」、ピンクは「日本語の斜体」になり、
   書き手の意図（ここが要点）が読み手に伝わらなくなっていた。
   markup は新旧とも同じ <strong> / <em> なので、CSS を戻すだけで復元できる。

   ★ em の font-style: normal は必須。旧サイトの本文で em は斜体ではなく
     ピンクマーカーとして使われており、外すと日本語が斜体になって読みにくくなる。

   範囲は article.prose（記事本文の4テンプレ = content-class / content-interview /
   content-textbook / single-professional）に限定し、旧の .wysiwyg と一致させる。
   固定ページは div.prose なので当たらない（編集ポリシー・プライバシー・お問い合わせ等の
   法務/案内文で太字が黄色くなるのは意図と違うため、ここは分ける）。
   ========================================================================= */
article.prose strong {
	font-weight: 500;
	background: linear-gradient(transparent 60%, #ff6 60%);
}
article.prose em {
	font-weight: 500;
	font-style: normal;
	background: linear-gradient(transparent 60%, #f7c1cc 60%);
}
/* 見出しの中の強調まで蛍光ペンにすると帯が二重になるので、見出し内は素の強調に戻す。 */
article.prose :is(h1, h2, h3, h4, h5, h6) strong,
article.prose :is(h1, h2, h3, h4, h5, h6) em {
	background: none;
	font-weight: inherit;
}

/* =========================================================================
   カードのホバー演出（小泉要望 2026-07-29「邪魔にならない程度に楽しく」）

   現行サイトはアイキャッチにマウスを乗せると拡大する演出がある。新テーマは
   .card:hover の影とタイトル下線だけで、一覧が静止画のように見えていた。
   色は変えない・動きだけで気配を出す方針で、次の2つに絞る。

     1. アイキャッチが少しだけ寄る（scale 1.04 / 0.45s ease-out）
        1.04 は「動いたと分かるが、隣のカードに視線を奪われない」上限として選んだ。
        1.08 以上は一覧に10枚以上並ぶこのサイトでは落ち着かない。
     2. カードがわずかに浮く（translateY -2px）
        既存の box-shadow 変化と同時に効かせて「持ち上がった」ことにする。
        kknavi.css の transform .1s は速すぎて影と歩調が合わないので .22s に伸ばす。

   回転・色反転・フェードイン・大きな移動は入れない（記事一覧の可読性を落とすため）。

   ★ CSS のみ。DOM は一切変えないので DOM ゲートの署名に影響しない。
   ★ .card は kknavi.css で overflow:hidden だが、.card__media 自身には指定が無く、
     拡大した画像が本文側にはみ出るため、ここで媒体枠にも overflow を効かせる
     （他の3種 .mini-card__media / .pro-card__photo / .event-item__thumb は指定済み）。
   ========================================================================= */
.card__media {
	overflow: hidden;
}

/* 横長すぎるアイキャッチは切らずに全体を見せる（小泉指摘 2026-07-29）。
   値は kknavi2026_card_fit_attr() が画像ごとに --card-fit として渡す（既定は cover）。
   class を増やさないのは、DOM ゲートが class を署名するため（データ次第で
   構造比較が揺れるのを避ける）。上下に出る余白は枠の背景色が受ける。 */
.card__media img,
.card__media > a > img {
	object-fit: var(--card-fit, cover);
}
.card {
	transition: box-shadow .15s ease, transform .22s cubic-bezier(.2, .6, .2, 1);
}
.card:hover {
	transform: translateY(-2px);
}
.card__media img,
.mini-card__media img,
.pro-card__photo img,
.event-item__thumb img {
	transition: transform .45s cubic-bezier(.2, .6, .2, 1);
	will-change: transform;
}
.card:hover .card__media img,
.mini-card:hover .mini-card__media img,
.event-item:hover .event-item__thumb img {
	transform: scale(1.04);
}

/* プロフィール写真だけは基準の拡大率を掛け合わせる（小泉指摘 2026-07-29）。
   .pro-card__photo img には既に transform: scale(var(--pro-zoom, 1)) が効いている。
   顔検出（macOS Vision）で1人ずつ算出した値で、283人ぶん登録済み＝人によって
   1.0 から 1.3 まで異なる。ここに scale(1.04) を上書きすると基準値ごと消えるため、
   実測で 1.306 の先生はホバーで「縮む」、1.0 の先生だけ「拡大する」という
   バラバラな挙動になっていた。calc で掛けて、どの写真も一律 4% 寄る形にする。
   transform-origin（＝顔の位置）は base の指定がそのまま効く。 */
.pro-card:hover .pro-card__photo img {
	transform: scale(calc(var(--pro-zoom, 1) * 1.04));
}

/* 行型（セミナー開催のお知らせ）は、行全体が対象だと分かるように地をほんのり敷く。
   カード型は画像が動くので色は変えないが、行型は画像が小さく端にあるため、
   動きだけだと「どこまでが1件か」が伝わらない。#fafafa 相当の薄さに留めて、
   既存の枠線や区切りと競合させない。 */
.event-item {
	transition: background-color .18s ease;
}
.event-item:hover {
	background-color: rgba(26, 26, 31, .028);
}

/* 動きが苦手な人には出さない。kknavi.css の reduced-motion は transition を
   詰めるだけで、拡大した状態そのものは残るため、ここで変形自体を打ち消す。 */
@media (prefers-reduced-motion: reduce) {
	.card:hover,
	.card:hover .card__media img,
	.mini-card:hover .mini-card__media img,
	.pro-card:hover .pro-card__photo img,
	.event-item:hover .event-item__thumb img {
		transform: none;
	}
}

/* =========================================================================
   本文に残るインライン font-size を無効化する（小泉指摘 2026-07-29）
   「記事の途中からフォントが大きくなる」の原因（例: class/14826）。

   旧テーマは `html { font-size: 62.5% }`（KKNtheme/assets/css/styles.css）で
   1rem = 10px にしていた。そのため本文に書かれた `font-size: 1.6rem` は
   16px＝本文と同じ大きさとして見えていた。新テーマのルートは 16px なので、
   同じ記述が 25.6px＝**1.5倍**に膨らむ。書いた人は何も間違えていないのに、
   テーマを替えた瞬間に意味が変わる類の負債。

   実測（公開記事・staging DB, 2026-07-29）:
     post_content 130記事 / ACF本文 82記事 にインライン font-size あり
     rem 319回（ほぼ 1.6rem）… 1.5倍に膨張＝今回の不具合
     pt 2,045回（12pt 1,482 / 14pt 448 ほか）… Word/Docs 貼り付け痕。
       12pt=16px・14pt=18.7px で、本文 17px に対して段落ごとに揺れる
     px 46回

   CSS で潰す理由: データ側の一括置換は200記事超を書き換える不可逆な作業になる。
   こちらは font-size だけを無効化し、色・太字・下線などの装飾は残す。
   元に戻したくなればこのブロックを消すだけでよい。
   単位で絞れない（CSS はセレクタで単位を判別できない）ので rem/pt/px をまとめて
   無効化する。結果として本文はテーマの設計値（17px / 行間1.9）に揃う。

   ※ インライン指定に勝つ必要があるため !important が要る。ここは例外として許容する。
   ========================================================================= */
article.prose [style*="font-size"] {
	font-size: inherit !important;
}

/* =========================================================================
   本文に残るインライン色を配色に揃える（小泉指摘 2026-07-29）
   class/15756 に <span style="background-color: #3366ff; color: #ffffff;"> が
   あり、青地×白文字という配色外のハイライトが出ていた。ライターがエディタの
   文字色・背景色機能で個別に指定したもので、記事ごとに色がばらつく。

   実測（公開記事・staging DB）:
     背景色を指定している記事 32 / 文字色を指定している記事 103
     背景色の値: #ffffff 98・#f4f4f4 50・#ffff00 30・#0000ff 23・#3366ff 6 ほか
     文字色の値: #000000 461・#0000ff 100・#008000 89・#993300 69・#ffffff 29 ほか

   方針: 強調の手段は「太字＝黄マーカー／斜体＝ピンクマーカー」に一本化し、
   本文中の個別指定は無効化する。フォントサイズと同じ考え方（データは書き換えず
   CSS で無効化する＝いつでも戻せる）。

   ただし黄色の背景（#ffff00 / yellow）だけは残す。これは書き手が
   「ここが要点」と示した意図がテーマの蛍光ペンと同じなので、消すのではなく
   テーマの黄色（#ff6）に寄せて統一する。

   リンクは色を奪うと「押せる」ことが伝わらなくなるので、配色のリンク色に揃える。

   ※ [style*="color"] は background-color にも一致するので、1つのセレクタで
     文字色・背景色の両方を拾える。
   ========================================================================= */
article.prose [style*="color"] {
	color: inherit !important;
	background-color: transparent !important;
}
/* 黄色マーカーの意図は残し、テーマの蛍光ペンに揃える。 */
article.prose [style*="#ffff00"],
article.prose [style*="#ff0"],
article.prose [style*="yellow"] {
	background: linear-gradient(transparent 60%, #ff6 60%) !important;
	color: inherit !important;
}
/* リンクは配色のリンク色を保つ（色を消すと本文と区別が付かなくなる）。 */
article.prose a[style*="color"] {
	color: var(--color-link) !important;
}

/* =========================================================================
   購読ボタンを「入力欄ではなく操作」に見せる（小泉指摘 2026-07-28）
   .btn--on-accent は白地×ink文字で、直上の入力欄（白の角丸ピル）と同じ見えになり、
   グラデ地の上では「4つめの入力欄」に見えてしまっていた。
   ink 地＋白文字にして、入力（白）と操作（濃色）を色で分ける。
   グラデ地に対して 17:1 と面内で最も強いコントラストになり、視線の終点になる。
   ※ .cta__form 内に限定（SP追従バー .cta-sticky の白ボタンは ink 地の上なので現状維持）。
   ========================================================================= */
.cta__form .btn--on-accent {
	background: var(--color-ink);
	color: var(--color-on-accent);
	border-color: transparent;
	box-shadow: 0 6px 18px rgba(26, 26, 31, 0.22);
}
/* 足りない項目を枠でも示す（小泉指摘 2026-07-29）。
   文言だけだと、3つ並んだ入力欄のどれを直せばよいか目で追えない。
   グラデ地の上なので赤の細枠ではなく、白のリング＋薄い赤地で「ここ」を示す。
   通常時の見た目は変えない（aria-invalid が付いたときだけ効く）。 */
.cta__form .field[aria-invalid="true"] {
	box-shadow: 0 0 0 3px rgba(255, 255, 255, .85), 0 0 0 5px rgba(216, 52, 92, .9);
	background: #fff5f7;
}
.cta__consent input[aria-invalid="true"] {
	outline: 3px solid rgba(255, 255, 255, .85);
	outline-offset: 1px;
}

.cta__form .btn--on-accent:hover {
	filter: brightness(1.15);
	box-shadow: 0 8px 22px rgba(26, 26, 31, 0.28);
}

/* =========================================================================
   メルマガLP「メルマガで届く、3つの内容」の画像枠（小泉指摘 2026-07-28）
   カンプ t9 のカードは .card__media > .imgslot（＝画像プレースホルダ。16:9 の
   グレー地で寸法だけ確保するカンプ用の仕掛け）を持つが、この3枚に入れる写真は
   存在せず、今後も用意する予定がない。そのまま出すと「画像が抜けたカード」に
   見えるので、グレー地と 16:9 の枠を消して、中の装飾アイコンだけを残す。
   ・class は足さない（DOM構造ゲートの署名はクラスのみ。追加すると FAIL する）
     → セクションの aria-labelledby を属性セレクタで掴んでスコープする。
   ・アイコン色は --color-accent-graphic（ピンクは「面・グラフィックのみ」で
     本文不可のトークン。アイコン＝グラフィックなので用途に合う）。
   写真を用意する方針に変わったら、このブロックごと削せばカンプの枠に戻る。
   ========================================================================= */
section[aria-labelledby="nl-what"] .card__media {
	aspect-ratio: auto;
	background: none;
}
section[aria-labelledby="nl-what"] .card__media .imgslot {
	aspect-ratio: auto;
	height: auto;
	background: none;
	place-items: start;
	padding: var(--space-5) var(--space-4) 0;
	color: var(--color-accent-graphic);
}
section[aria-labelledby="nl-what"] .card__media .imgslot svg {
	width: 30px;
	height: 30px;
}

/* =========================================================================
   運営元サービス枠のロゴを実ロゴにする（小泉指摘 2026-07-28）
   .promo__logo はカンプでは「RepeaTalk」「KOOM」という素のテキストだった。
   Drive の branded-doc ブランド資産（repeatalk-horizontal.png / koom-horizontal.png・
   いずれもグラデ版）を透明余白を落として 240px 幅に縮小し、テーマに同梱して背景に敷く。
   ・DOM構造ゲートの署名は「タグ＋class」なので、class を増やさず data-brand で出し分ける
     （html-tree.mjs は data-* を見ない＝署名不変）。
   ・kknavi.css は変更禁止なので、カンプ側は素テキストのまま。ここはテーマだけの上書き。
   ・span 内のテキストは font-size:0 で視覚的にだけ隠す（DOM から消さない）。すぐ右の
     .promo__title が「RepeaTalk｜…」と同じ情報を持つので、読み上げ上の欠落は起きない。
   ========================================================================= */
.promo__logo[data-brand] {
	font-size: 0;
	color: transparent;
	background-repeat: no-repeat;
	background-position: center;
}
/*
 * 幅は2つ揃えず、光学的に揃える。KOOM は太い字面のワードマークだけで枠を使い切るのに対し、
 * RepeaTalk は「アイコン＋細めの欧文」なので、同じ幅にすると文字が一回り小さく見える。
 * RepeaTalk を大きめ・KOOM を小さめに振って、並べたときの重さを合わせる。
 */
.promo__logo[data-brand="repeatalk"] {
	background-image: url("../img/repeatalk-icon.png");
	background-size: auto 40px;
}
.promo__logo[data-brand="koom"] {
	background-image: url("../img/koom-logo.png");
	background-size: 64px auto;
}

/* =========================================================================
   法務文書ページの本文（.legal-doc / いまはプライバシーポリシーのみ）2026-07-28
   付与は page.php（slug で判定）。全体の .prose には効かせない——旧テーマ時代の
   記事本文がレイアウト目的で ul を使っており、黒丸が付いてしまうため。
   ・箇条書き: kknavi.css の reset（ul { list-style: none }）を、このページだけ戻す。
     条件や取得項目の列挙が地の文に見えると読み飛ばされる。
   ・見出しの間隔: .stack-lg は「* + *」なので最初の子に margin が付かず、h1 と最初の
     h2 が 0px で密着していた（実測）。あわせて h2 は上を広く・下を詰めて、見出しが
     次の本文に属して見えるようにする（既定の .stack-lg は上下とも 32px で等間隔）。
   ========================================================================= */
.legal-doc ul {
	list-style: disc;
	padding-left: 1.4em;
}
.legal-doc ul > li + li {
	margin-top: var(--space-2);
}
.legal-doc ul > li::marker {
	color: var(--color-text-muted);
}
.legal-doc > h2 {
	margin-top: var(--space-7);
}
.legal-doc > h2:first-child {
	margin-top: var(--space-6);
}
.legal-doc > h2 + * {
	margin-top: var(--space-3);
}

/* =========================================================================
   購読フォームの完了・エラー表示（小泉指摘 2026-07-28）
   旧: どちらもグラデ地に半透明を重ねるだけ（done=白16%・error=黒18%）。
   error は「ピンク地＋半透明の黒」で濁った赤紫の帯になり、警告に見えなかった。
   グラデ地の上では赤系の文字色が使えない（ピンクに埋もれる）ので、面を白に抜いて
   前景をインクにし、エラーだけ左に赤いレールを立てて種類を分ける。
   文字は左寄せにする（中央寄せだと2行に折れたとき読みにくい・実測で2行になる）。
   ========================================================================= */
.cta__done,
.cta__error {
	background: var(--color-paper);
	text-align: left;
	font-weight: var(--font-weight-bold);
	box-shadow: 0 2px 10px rgba(26, 26, 31, 0.12);
	word-break: auto-phrase;
	text-wrap: pretty;
}
/*
 * 種類の区別は「枠の左に色レールを立てる」ではなく、白く抜いた面の内側の文字色で行う。
 * レール方式は最初に試したが、赤(#D8345C)がグラデ地のピンク(#FF6583)と隣接して
 * 判別できなかった（実測）。白地の上なら同じ赤がコントラスト 4.6:1 で AA を満たす。
 */
.cta__done {
	color: var(--color-ink);
}
.cta__error {
	color: var(--color-state-error);
}

/* ---------------------------------------------------------------------------
 * カードのカテゴリ表示をリンク化したことによる調整（2026-07-30・§3-6）
 *
 * kknavi2026_card が出す .card__category を <span> から <a> にした。
 * kknavi.css の .card__category は元々 color: var(--color-link) で
 * 「リンクの色だが押せない」見た目だったので、色は変えない＝**見た目は据え置き**。
 * <a> になったことで付く既定の下線だけ外し、代わりに hover/focus で
 * 「押せる」ことが分かるようにする。
 *
 * kknavi.css は変更禁止なので、ここで後勝ちさせる（theme.css は後に読まれる）。
 * ------------------------------------------------------------------------ */
a.card__category {
	text-decoration: none;
	/* 隣のカード全体リンクと押し間違えないよう、当たり判定を文字幅に閉じる。 */
	align-self: flex-start;
}
a.card__category:hover,
a.card__category:focus-visible {
	text-decoration: underline;
	text-underline-offset: 2px;
}
/*
 * FVラベルはグラデ塗りのピル（上の (5)）。ピルの上に下線が出ると潰れて見えるので、
 * ピル側は hover でも下線を出さず、わずかな不透明度で押せることを示す。
 */
.feature-card a.card__category:hover,
.feature-card a.card__category:focus-visible {
	text-decoration: none;
	opacity: 0.88;
}

/* ---------------------------------------------------------------------------
 * フッター列見出しの階層を立てる（2026-07-30・小泉指摘）
 *
 * 指摘は「見出しと実項目の表記が近すぎて関係性が分かりづらい」。
 * 実測すると原因は2つで、どちらも kknavi.css:937 の指定に由来する。
 *
 * ① 上下関係が逆転していた。見出し 13px（--font-size-caption）に対し
 *    項目は 15px（--font-size-small）で、**見出しの方が小さい**。
 *    このサイトの他の場所（h2 28px vs 本文 17px 等）では見出しは常に中身より
 *    大きいので、フッターだけが作法を破っていた。
 * ② 近接（グルーピング）の手がかりが無かった。字面の実測で
 *    見出し→1項目目 23.7px / 項目→項目 22.3px ＝ **差 1.4px**。
 *    ボックス値では margin-bottom 12px vs margin-top 8px だが、行送りの差で
 *    視覚的には相殺され、見出しは自分のリストより**遠い**位置にいた。
 *
 * `text-transform: uppercase` は和文に効かないので落とす。ラテンのラベルを
 * 前提に書かれたスタイルに日本語を入れた痕跡で、意図した差が出ていなかった。
 *
 * 色は白100%（対 #1A1A1F で 17.33:1）、項目は白78%（10.91:1）でどちらも AA 十分。
 * ★ 本文セクションの eyebrow 色 --color-link (#D8345C) はダーク地では 3.77:1 で
 *   AA に届かない。フッターにブランド色を入れたくなったら --color-accent-pink
 *   (#FF5E83 / 5.93:1) を使うこと。
 *
 * hover は kknavi.css:925 `.site-footer a:hover`（詳細度 0,2,1）が
 * 下の `.footer-nav__list a`（0,1,1）に勝つので白100%に戻る＝追記不要。
 *
 * kknavi.css は変更禁止なので、同一セレクタを後勝ちさせる（メディアクエリ非依存）。
 * フッターは `</main>` の外なので DOMゲートの署名対象外＝カンプ改修も不要。
 * ------------------------------------------------------------------------ */
.footer-nav__title {
	font-size: var(--font-size-body);           /* 13px → 17px（項目 15px より大きく） */
	line-height: var(--line-height-heading);
	letter-spacing: var(--letter-spacing-body); /* .08em → .02em（和文に字間は不要） */
	text-transform: none;
	color: var(--color-on-accent);
	margin-bottom: var(--space-2);              /* 12px → 8px（自分のリストに寄せる） */
}
.footer-nav__list a {
	color: rgba(255, 255, 255, .78);
}

/* ---------------------------------------------------------------------------
 * 改訂前の版のレビューであることの注記（2026-07-30・小泉判断）
 *
 * 教材レビュー22件（高校 旧課程 / 中学 令和3年度版 / 小学 令和2年度版）は検索から落として
 * ページは残す。残す以上「古い」と分かる形にするための注記で、記事タイトルの直下・書影の上に出る
 * （template-parts/content-textbook.php）。
 *
 * 既存の注記系スタイルが .event-form__notice しか無く、あれはフォームのエラー/成功表示
 * （--error で赤に振る前提・フォーム幅に収まる想定）なので、記事本文の文脈に流用すると
 * 「入力を間違えた」と読める。ここは事実の但し書きなので、警告色ではなく面（--color-surface）＋
 * 左の細い罫線という、このサイトで既に使っている「囲って落ち着かせる」形（.reco-answer 系）に寄せる。
 *
 * 色は本文と同じ --color-ink（本文中の但し書きを --color-text-muted まで落とすと、
 * いちばん読ませたい1行がいちばん薄くなる）。罫線だけブランド色 --color-accent-pink で、
 * 「ここは編集部からの注記」と分かる手がかりにする（面の上の細線なのでコントラスト要件は掛からない）。
 *
 * kknavi.css は変更禁止のため、新規クラスとして theme.css にだけ足す（打ち消しではないので
 * 同一セレクタの後勝ちは不要）。DOMゲートは class を署名に使うので、識別クラス legacy-note を
 * 付けて将来の許容を1署名に閉じられるようにしてある。
 * ------------------------------------------------------------------------ */
.legacy-note {
	display: block;
	margin: var(--space-5) 0 var(--space-6);
	padding: var(--space-4) var(--space-5);
	background: var(--color-surface);
	border-left: 3px solid var(--color-accent-pink);
	border-radius: var(--radius-sm);
}
.legacy-note__title {
	margin: 0;
	font-size: var(--font-size-body);
	font-weight: 700;
	line-height: var(--line-height-heading);
	color: var(--color-ink);
}
.legacy-note__body {
	margin: var(--space-2) 0 0;
	font-size: var(--font-size-small);
	line-height: var(--line-height-body);
	color: var(--color-ink);
}

/* ---------------------------------------------------------------------------
 * セミナー告知サムネの枠比率を 16:10 → 16:9 に合わせる（2026-07-30・小泉指摘）
 *
 * 実測（本番トップ・headless Chrome + CDP）:
 *   枠 .event-item__thumb = 112x70px（比率 1.6 ＝ 16:10）
 *   入る画像             = 640x360（1.778 ＝ 16:9）／500x290（1.724）
 *   object-fit: cover なので **左右が約10%切り落とされていた**。
 *
 * セミナーバナーは左右端まで文字（日付・会場・「無料」等）が入っている素材なので、
 * 端が切れると情報が読めなくなる。アイキャッチの「横長は contain で全体表示」
 * （kknavi2026_card_fit_attr・2026-07-10）と同じ問題がこの枠だけ残っていた。
 *
 * 直し方の選択: **枠を画像に合わせる**（16:9 に変更）。
 * 画像側を contain にすると枠内にレターボックスの余白が出てバナーが小さくなり、
 * 112px 幅では文字が読めなくなる。テーマが渡すサイズ（kknavi_card 640x360）が
 * 16:9 なので、枠を 16:9 にすれば無切り抜き・無余白でぴったり収まる。
 *
 * kknavi.css:1138 は変更禁止なので、同一セレクタを後勝ちさせて上書きする。
 * ------------------------------------------------------------------------ */
.event-item__thumb {
	aspect-ratio: 16 / 9;
}

/* ---------------------------------------------------------------------------
 * 透明 PNG のアイキャッチで面色が透けて「額縁」に見える事故のガード
 * （2026-07-31・小泉指摘「まだ額縁がある」）
 *
 * 経緯: 07-30 に --fv-ar で「枠を画像に合わせる」手当てを入れたが、それでも
 * 額縁が残った。原因は CSS ではなく画像側で、編集部バナーの PNG 書き出しに
 * 周囲の透明余白（920x450 で左右30px・上14px・下15px＝約3%）が焼き込まれていた。
 * .card__media の面色 #F5F5F5 がその透明部分から透けるので、枠を画像の比率に
 * 合わせても中の絵だけ一回り小さい額縁になる。直近30本中5本が該当（PNG のみ。
 * JPG は透明を持てないので無傷）。実データ側は 07-31 にトリムして差し替え済み。
 *
 * ここでは今後また透明 PNG が来たときの受け皿として、面色をカード地の白に
 * 寄せて帯が見えないようにする。書影（.card--textbook）やミニカード等、
 * 意図して面色を持たせている枠は詳細度が高い既存指定がそのまま勝つ。
 * ------------------------------------------------------------------------ */
.card__media {
	background: var(--color-bg);
}

/* =============================================================================
   記事冒頭のリード文（.article-lead / 小泉指示 2026-08-01）
   -----------------------------------------------------------------------------
   kknavi2026_render_legacy_lead() が旧ACF class_lead を本文の冒頭に出す。素の <p> のままだと
   本文と地続きで「どこまでが導入か」が読めないので、最小限の差をつける。
   差は **色** と **下のヘアライン＋余白** の2つだけ。

   【採らなかった案（実機比較 2026-08-01）】
   ・左のアクセント罫 … `.prose h2` が既に border-left 4px #D8345C を持つ＝**見出しのモチーフ**。
     リードに流用すると「見出しなのか導入なのか」が読めなくなる（小泉指摘）。
   ・薄い面（背景＋角丸）… 直上の目次（CONTENTS）が薄グレーの角丸ボックスなので、
     灰色の箱が2つ縦に並んで重くなる。
   ・本文より大きい文字（19px = --font-size-lead）… 見出し下の要約を大きくするのは定石だが、
     それは1〜3行の短いデックが前提。ここのリードは中央値248字＝約7行・最大457字＝13行の
     「導入セクション」で、7〜13行を丸ごと大きくすると冒頭が重い。区切りはヘアラインが
     担っているので、サイズ差を足すと合図が二重になる（小泉判断でサイズ差なしに決定）。

   【対象範囲】いまは class_lead を持つ記事（公開55件）だけに付く。本文の1段落目が導入に
   なっている残り375件には付かないので、記事によって見え方が変わる。全記事で揃えるなら
   `.prose > p:first-child` にも同じ指定を広げる（未実施・編集判断）。
   ============================================================================= */
.article-lead {
	padding-bottom: var(--space-6);
	margin-bottom: var(--space-6);
	border-bottom: 1px solid var(--color-border);
}
.article-lead > p {
	/* サイズ・行間は本文と同じ（トークンを上書きしない）。色だけわずかに淡くする。 */
	color: #3C3C44; /* 本文 #1A1A1F より少し淡い＝導入のトーン。白背景でコントラスト約10:1 */
}
.article-lead > p + p {
	margin-top: 1em;
}