/* 指摘41(2026-08-20): このファイル内の `transition: .Ns;`(全プロパティ対象)は、
   ホバー時の色・影・移動などの変化を滑らかにするためのものだが、`outline`
   (指摘34で新設したフォーカスリング)にもそのまま適用されてしまい、
   キーボードでフォーカスした瞬間に輪郭が即座に出ず、既存の色(灰色等)から
   紺色へ約200〜300msかけて遷移して見える副作用があった(発見の経緯:
   reports/20260820-instr37-full-report.md「(5)指摘34の再確認」)。
   `transition: .Ns, outline 0s;` の形にすることで、outlineだけ即座に反映され、
   他のプロパティの遷移(ホバー効果等)は従来どおり残る(CSSのtransitionは
   カンマ区切りで複数指定でき、同じプロパティに複数の指定がある場合は後に
   書いた方が有効になる仕様を利用している)。 */
/* ============================================
   下層ページ(TOP以外) 共通デザイン骨格 専用CSS
   design/skioita-sub-concept-v1.html をベースに実装。
   skioita_is_sub_page()がtrueのときだけ functions.php 経由で enqueue され、
   TOPページには一切影響しない。

   【変数について】top-page.cssにも同じ配色の変数(--sao-top-*)があるが、今回は
   共通化(shared-vars.cssへの切り出し)を行わない。理由: TOPページは完成済みで、
   変数名を変えるとTOP側のCSS全体を書き換えることになり、下層ページ側の作業と
   混ざって問題の切り分けができなくなるため。値は意図的にtop-page.cssと同じ
   16進数を使っている(同じブランドカラーのため)。共通化は下層ページが安定してから、
   独立したコミット・TOP適用前後のスクリーンショット付きで行う予定
   (reports/20260814-sub-skeleton-plan.md 修正1)。

   クラス名は既存スタイルとの衝突を避けるため全て sao-sub- プレフィックスを付けている
   (例外: 本文内のボタンはサイト全体で共通の .sao-btn-cta 等の色クラスのみを再利用する。
   レイアウト用の.sao-btnは下層ページの単発ボタンには付けない。CSS自体は変更しない)。

   設計: reports/20260814-sub-skeleton-plan.md
   実装報告: reports/20260814-sub-skeleton.md
   ============================================ */

body.sao-sub {
  --sao-sub-navy: #0A2E4D;
  --sao-sub-blue: #0B5A9E;
  --sao-sub-blue-d: #0A4F8A;
  --sao-sub-sky: #4A9FD8;
  --sao-sub-ice: #E8F2FA;
  /* 指摘111■1(2026-08-27)で追加。design/bumon-mock.htmlの.navB a:hoverが
     使う--ice-2(#F5F9FC)のリテラル値。--sao-sub-ice(#E8F2FA)より一段階
     薄い、ほぼ白に近い色。既存トークンに値が完全一致するものが無かった
     ため新規追加した(--sao-sub-snowは値が近い(#FBFDFF)が完全一致では
     ないため転用しなかった)。用途: サイドバー部門メニューのホバー背景
     のみ(現在地の表示と紛らわしい、との指摘への対応)。 */
  --sao-sub-ice-2: #F5F9FC;
  --sao-sub-snow: #FBFDFF;
  --sao-sub-ink: #16202B;
  --sao-sub-muted: #5E7183;
  --sao-sub-line: #DFE7EE;
  --sao-sub-teal: #14708F;
  --sao-sub-amber: #B45309;
  /* 指摘60(2026-08-21)で追加。既存の--sao-sub-amberを白へ15%程度まで薄めた
     色(ダウンロードボタン等と同じアンバー系統の「薄い背景色」)。原本の
     黄色マーカーの代替として教育部行事計画表(304)の<mark>で使用。
     文字色(#333、テーブル本文の既定色)との実測コントラスト比10.75:1、
     WCAG AA(4.5:1)を大きく上回る。 */
  --sao-sub-amber-pale: #FBEAD9;

  /* 指摘132■1(2026-08-30): design/skioita-renewal-final.htmlの新色7色のうち
     6色を追加(TOPページのtop-page.css、指摘130■2と同じ考え方)。
     --snowは値(#FBFDFF)が既存の--sao-sub-snowと完全一致のため追加していない。
     見本の--ice(#EDF5FB)は既存の--sao-sub-ice(#E8F2FA)とは微妙に異なる値だが、
     指摘126・指摘130■2と同じ考え方で既存優先とし、こちらも追加していない
     (navy/blue/sky/ink/muted/lineは元々top-page.cssと同じ値で用意されて
     いるため、これらのズレも無い)。 */
  --sao-sub-sun: #E4632B;
  --sao-sub-sun-2: #F59A3E;
  --sao-sub-ice-txt: #B9DEF7;
  --sao-sub-ice-line: #7FC2EC;
  --sao-sub-pine: #1E7A5E;
  --sao-sub-berry: #9C3A6B;

  /* 指摘164■3(2026-09-01): 見本design/skioita-sub-premium-v2.htmlの
     --ground。新しく足してよい色は「地の色」1つだけという指示どおり、
     このトークンのみ新規追加した(他の色は既存トークンを再利用)。 */
  --sao-sub-ground: #EEF3F7;
}

/* 指摘164■3: bodyを地の色にし、本文コンテナ(.site-body-container.container、
   本文2カラム全体を包む既存のラッパー)を白にする。#breadcrumbは元から
   background:#fffが個別に指定済み(このファイル内、下方の
   `body.sao-sub #breadcrumb`参照)のため、bodyの地の色の上でも白い帯の
   ままで変化しない。.sao-sub-phead(ページヘッダー)も紺の背景を個別に
   持つため無関係。影響が及ぶのは.site-body-container.containerの外側
   (bodyの余白部分)のみ。 */
/* 【指摘291(2026-09-25)】地の色を --sao-sub-ground(#EEF3F7) → --sao-sub-snow(#FBFDFF)。
   見本 design/skioita-yawaraka-v1.html の `.demo.a{background:var(--snow)}`。
   ★戻し方: var(--sao-sub-snow) を var(--sao-sub-ground) に戻す。
   (--sao-sub-ground 自体は .sao-sub-sec-alt〈交互の帯〉がまだ使うので残す) */
body.sao-sub { background: var(--sao-sub-snow); }

.sao-sub-wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; }

/* ---------- ページヘッダー ---------- */
.sao-sub-phead {
  position: relative; background: var(--sao-sub-navy); overflow: hidden;
  padding: 72px 0 64px;
}
/* 背景写真。object-fit:coverと同じ効果をbackground-size:cover+centerで実現しており、
   画面幅が変わっても縦横比が崩れず常に帯いっぱいに表示される。画像が無い場合、この
   要素自体がPHP側で出力されないため、下の.sao-sub-phead-overlay(グラデーション)だけの
   表示になり崩れない。 */
.sao-sub-phead-photo {
  position: absolute; inset: 0; background-size: cover; background-position: center;
}
/* 白文字とのコントラスト比を写真の明るさによらず確保するためのオーバーレイ。
   色は常に同じ紺(#0A2E4D)を使い、不透明度だけを72%〜85%の範囲でグラデーションさせている
   (色自体を薄い水色に変化させると、最も不利な「真っ白に近い写真」の上では不透明度72%でも
   コントラスト比が3.16:1まで落ちてWCAG AA基準4.5:1を満たさないことが判明したため、
   2026-08-14に色を紺で統一する形に修正した)。不透明度72%地点でも実測5.78:1を確保できる
   (詳細な計算根拠: reports/20260814-sub-skeleton.md)。 */
.sao-sub-phead-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(115deg, rgba(10,46,77,.85) 0%, rgba(10,46,77,.78) 58%, rgba(10,46,77,.72) 100%);
}
.sao-sub-phead-in { position: relative; z-index: 2; }
/* 指摘164■1(2026-09-01): 見本design/skioita-sub-premium-v2.htmlの.ph .enに
   合わせてfont-size/font-weight/letter-spacingを変更(13px/800/.42em)。
   色は見本の指定(--ice-txt、#B9DEF7)をそのまま使わず、実測してから決めた。
   最悪条件(帯オーバーレイの不透明度が最も低い72%地点〈.sao-sub-phead-overlay
   参照〉× 真っ白に近い写真)で合成した背景色に対し、qa-tools/contrast_check.py
   で実測:
     --sao-sub-sky(#4A9FD8、旧色)      → 1.99:1(不合格、指示どおり要測り直し
                                          だった箇所。旧色のまま使うのは誤り)
     --sao-sub-ice-txt(#B9DEF7、見本の指定色) → 4.09:1(4.5:1未満、不合格)
     rgba(255,255,255,.88)             → 4.91:1(合格)
   4.5:1を満たしたrgba(255,255,255,.88)を採用した(指示どおりの代替値)。
   詳細: reports/20260901-instr164-item1-impl.md */
.sao-sub-phead-in em {
  display: block; font-style: normal; font-size: 16px; letter-spacing: .42em;
  color: rgba(255,255,255,.88); font-weight: 700; margin-bottom: 11px;
  /* 指摘164■5 手法12: 見本の.ph .enと同じくwill-change:transformを追加
     (assets/js/sub-page-parallax.jsがtransform:translateXを当てるため)。 */
  will-change: transform;
}
.sao-sub-phead-in h1 {
  color: #fff; font-size: clamp(26px, 3.6vw, 40px); letter-spacing: .03em; line-height: 1.35;
}
/* 指摘164■1: 見本の.ph .leadに合わせてfont-size/color/max-widthを変更
   (14.5px/rgba(255,255,255,.9)/560px)。text-shadowは.ph .leadの同じ規則の
   一部としてあわせて採用した(見本のリテラル値、写真上の文字の視認性を
   高める既存の方針〈指摘91・131等〉とも整合するため)。 */
.sao-sub-phead-in p {
  color: rgba(255,255,255,.9); font-size: 14.5px; margin: 14px 0 0; max-width: 560px;
  text-shadow: 0 1px 6px rgba(0,0,0,.4);
}
/* 指摘164■1: 帯の下辺を山型に切るSVG。見本design/skioita-sub-premium-v2.html
   の.ph svgと同じセレクタの考え方(要素セレクタ、新しいクラス名を作らない)で
   .sao-sub-phead svgとした。.sao-sub-pheadがoverflow:hiddenのため、
   はみ出さない。 */
.sao-sub-phead svg {
  position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 52px; display: block;
}
/* 【指摘291(2026-09-25)】帯の下の角を丸く(見本 `.a .band{border-radius:0 0 28px 28px}`)。
   .sao-sub-phead は overflow:hidden なので、写真・重ねた色・山並みも同じ角で切れる。
   山並みの白は、下に続く地の色(snow)に合わせる(白 #fff との差はほぼ見えないが、そろえておく)。
   ★重ねる色(.sao-sub-phead-overlay)は変えていない(保留)。見本の #3A7FB8 は
     白い字とのコントラストが不透明でも 4.28:1 で、4.5:1 に届かないため。
     詳細: reports/20260925-instr291-inventory.md の 3.
   ★戻し方: この2つの規則を消す。 */
/* border-radius＋overflow:hidden(あるいは clip-path だけ)だと、写真と山並みが
   別々に角で切られ、山並みの下の角の縁に写真の暗い色が細い灰色の線として漏れた
   (角の縁の画素の暗さを実測: 261。will-change:transform を足して帯を1枚の層に
   してから切ると 6＝漏れなし)。 */
.sao-sub-phead { clip-path: inset(0 round 0 0 var(--sao-radius-band) var(--sao-radius-band)); will-change: transform; }
.sao-sub-phead svg path { fill: var(--sao-sub-snow); }

/* ---------- 【指摘323(2026-10-12)】帯の写真で雪山が見えるように（案B） ----------
   ご指摘（よこしゅんさん）: 雪山の写真があるはずなのに、薄すぎて見えない。
   原因: 写真の上に色を重ねすぎていた。上の .sao-sub-phead-overlay は紺 72〜85%（2026-08-14、白い字とのコントラストを
   「真っ白な写真」でも 4.5:1 以上にするため）。★実際には sp-layout.css（指摘292）がさらに上書きして、青 94%→88% だった。
   見本 design/skioita-phead-photo-v1.html の案B（よこしゅんさんが選んだ）:
     - 文字（題名・説明文）は写真の「空」の部分に置き、雪山は帯の下側に分けて置く（雪山だけを切り出した page-header-mtn.jpg）。
     - 重ねる紺を薄く: 上 42% → 60% の所 34% → 下 0%。
     - 帯の下の余白: パソコン 64px → 150px、600px 以下 118px（帯が約 50px 高くなる。よこしゅんさん了承）。
   重なりの順: 写真 → 雪山 → 紺 → 文字（HTML の並び）。山型の白い切り込み（svg）・下の角の丸めは、いまのまま。
   すべて .sao-sub-phead.has-mtn の中だけ（has-mtn は inc/sub-page-display.php が、既定の写真で雪山の画像があるときだけ付ける）。
   上の 72〜85% の説明と規則は消していない（has-mtn でない帯はいままでどおり）。白い字とのコントラストは実測（reports/20261012-instr323.md）。
   ★戻し方: この区切りを消す（または inc/sub-page-display.php の $has_mtn を false に）。 */
.sao-sub-phead.has-mtn { padding-bottom: 150px; }
.sao-sub-phead.has-mtn .sao-sub-phead-photo { background-size: auto 300%; background-position: center top; } /* 空だけを見せる */
.sao-sub-phead.has-mtn .sao-sub-phead-mtn {
  position: absolute; left: 0; right: 0; bottom: 0; height: 170px;
  background-size: cover; background-position: center top;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 36px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 36px);
}
.sao-sub-phead.has-mtn .sao-sub-phead-overlay {
  background: linear-gradient(180deg, rgba(10,46,77,.42) 0%, rgba(10,46,77,.34) 60%, rgba(10,46,77,0) 100%);
}
@media (max-width: 600px) {
  .sao-sub-phead.has-mtn { padding-bottom: 118px; }
  .sao-sub-phead.has-mtn .sao-sub-phead-mtn { height: 136px; }
}

/* ---------- パンくず(Lightning標準 #breadcrumb の再スタイル) ---------- */
/* 【指摘291(2026-09-25)】見本 `.a .crumb{background:transparent;border:0}`。
   白地と下の線をやめる。上の線(親テーマ Lightning の border-top)もあわせて消す。
   ★戻し方: background を #fff、border を「border-top は消して border-bottom:1px solid var(--sao-sub-line)」に戻す。 */
body.sao-sub #breadcrumb {
  background: transparent; border: 0;
  /* 指摘212■1(2026-09-15): 12.5px → 16px。デザイン定義書§3.2.2「14px未満は
     使用しない」。パンくずは「さわらない」に入っていないため対象にした
     (さわらないのはヘッダーのグローバルナビ。ハンバーガーの切り替え幅に
     関わるため。pending-decision.md 28.)。 */
  font-size: 16px; color: var(--sao-sub-muted);
}
/* 指摘62(2026-08-21): 当初 .breadcrumb-list(外側のol) を display:flex; flex-wrap:wrap、
   .breadcrumb-list__item(各li)を display:inline-flex にしたうえで区切り「/」を
   各項目末尾の::afterで追加していたところ、先頭項目(サイト名、320pxで2行に折り返す)
   のように項目自身のテキストが複数行に折り返る場合、「/」がinline-flexの兄弟要素
   としてalign-items:centerで垂直中央寄せされ、折り返した本文から浮いた位置(行末に
   大きな空白を挟んで孤立)に表示される不具合があった(320px・SAO概要/大会単体で確認)。
   区切りを::beforeに変更(次の項目の先頭に付ける)する第一段階の修正を行ったが、
   .breadcrumb-list側のdisplay:flexは残したままだったため、今度は「短い項目
   (『イベント』等)が、直前の項目が行の大半を占めたことで残りの横幅がほぼ0になった
   状態でその行に配置され、flexアイテム自身の内部でテキストが折り返される」ことで
   区切りの『/』だけが孤立するという、同じ根本原因(flexアイテムの境界に依存した
   折り返し)による別パターンの不具合が新たに見つかった(320px・イベント単体で確認)。
   根本的に解決するため、外側のol自体もflexをやめ、リスト全体を1つの通常の
   インライン文字列(段落と同じ折り返し)として扱う方式に変更した。これにより、
   折り返し位置はブラウザの通常の禁則処理まかせになり、flexアイテムの境界に
   依存する孤立は原理的に発生しなくなる。 */
body.sao-sub #breadcrumb .breadcrumb-list {
  display: block;
  padding-top: 13px; padding-bottom: 13px; list-style: none; max-width: 1180px; margin: 0 auto; padding-left: 28px; padding-right: 28px;
}
body.sao-sub #breadcrumb .breadcrumb-list__item { display: inline; }
/* Lightning本体(親テーマ)側に `.breadcrumb-list li::after{content:"/"}` という
   既定の区切りスタイルが別途存在しており(子テーマ側では一度も定義していない
   ため気づきにくかった)、これが自分の::beforeと二重に効いて「//」のように
   区切りが2つ並ぶ不具合が発生した。子テーマ側で明示的にcontent:noneにして
   打ち消す。 */
body.sao-sub #breadcrumb .breadcrumb-list__item::after { content: none; }
body.sao-sub #breadcrumb .breadcrumb-list__item:not(:first-child)::before {
  content: "/"; color: var(--sao-sub-line); margin: 0 9px;
}
body.sao-sub #breadcrumb a { color: inherit; text-decoration: none; }
body.sao-sub #breadcrumb a:hover { color: var(--sao-sub-blue); }
body.sao-sub #breadcrumb .fa-house { margin-right: 4px; }

/* ---------- 本文レイアウト(2カラム) ---------- */
/* Lightning標準の.site-bodyは、本来ネイティブの.page-header(今回廃止)の下に付く
   前提でレスポンシブなpadding-top(画面幅により2rem〜3.5rem=32px〜56px)を持っている。
   ページヘッダーを独自実装に差し替えた結果、この余白が宙に浮いて二重に
   (このファイル側のsite-body-containerのpadding-topと合算されて)適用され、
   パンくずと本文の間に約120pxの不要な空白ができていた(2026-08-14に発覚・修正)。
   sao-subページでは.site-bodyのpadding-topを0にし、パンくず〜本文の間隔は
   site-body-container側のpadding-topだけで一元管理する。 */
body.sao-sub .site-body { padding-top: 0; }
/* 指摘164■3: このコンテナを白にする(bodyの地の色--sao-sub-groundの上に
   白いカードとして本文2カラム全体を載せる)。 */
/* 【指摘291】見本の案Aは本文(.main)が地の上にそのまま載る(白い箱なし)。
   白い箱をやめ、地の色(snow)を通す。★戻し方: transparent を #fff に戻す。 */
body.sao-sub .site-body-container.container { max-width: 1180px; padding: 48px 28px 96px; background: transparent; }
body.sao-sub .main-section--col--two { width: 68%; }
body.sao-sub .sub-section--col--two { width: 30%; }

/* ---------- TOPIC記事(post型)・work投稿(お知らせ)共通: 本文の白カード化・
   投稿メタ・戻るリンク ----------
   指摘23-A(2026-08-19、TOPIC記事)・指摘47(2026-08-20、work投稿)。他の下層ページ
   (taikai/gokakusha/badge_test等)の.sao-sub-*-detail/.sao-sub-*-factboxと同じ
   「白背景+角丸+薄い枠+余白」を、本文(.entry-body)全体に適用する。
   single-post・single-workはいずれもWordPress標準のbody_class(投稿タイプ名)。 */
body.sao-sub.single-post .entry-body,
body.sao-sub.single-work .entry-body {
  background: #fff; border: 0; border-radius: var(--sao-radius-card); box-shadow: var(--sao-shadow-card);
  padding: 30px 32px;
}
@media (max-width: 600px) {
  body.sao-sub.single-post .entry-body,
  body.sao-sub.single-work .entry-body { padding: 22px 20px; }
}
/* 投稿メタ(公開日のみ、topic-post-display.php・work-display.phpがlightning_the_entry_meta()で出力)。
   Lightning標準の.entry-metaクラスを再利用しつつ、余白だけ調整する。 */
body.sao-sub.single-post .entry-body > .entry-meta,
body.sao-sub.single-work .entry-body > .entry-meta { margin: 0 0 22px; padding: 0; border: none; }
/* 「一覧へ戻る」リンク(本文末尾、指摘23-B・指摘47で手動リンクの代わりに追加) */
body.sao-sub.single-post .sao-sub-topic-backlink,
body.sao-sub.single-work .sao-sub-topic-backlink { margin: 30px 0 0; padding-top: 20px; border-top: 1px solid var(--sao-sub-line); }
/* 指摘180■2: 部門が複数付いた投稿のみ、ボタンを横並び(狭い幅では折り返し)にする。
   ボタンが1つのときはこのクラス自体が付かないため、既存18件の表示は変わらない。 */
.sao-sub-topic-backlink-multi { display: flex; flex-wrap: wrap; gap: 10px; }

/* ============================================
   TOPIC記事内の写真ギャラリー(指摘71■2、2026-08-24)。
   [gallery]ショートコード(WordPressコアのgallery_shortcode())が出力する
   古典的なマークアップ(<div class="gallery gallery-columns-N">
   <dl class="gallery-item"><dt class="gallery-icon">(img)</dt>
   <dd class="gallery-caption">…</dd></dl>)を対象にする。
   ショートコード側が指定するcolumns属性(gallery-columns-N、投稿によって
   2〜既定3までまちまち)は無視し、画面幅ごとに一律の列数を強制する
   (320px/375pxで2列、デスクトップで3列)。画像は縦横比を統一して
   object-fit:coverでトリミング表示し(元ファイルは無加工、表示上のみ)、
   キャプションは行数を切り詰めず、min-heightで高さだけ揃える(文言は
   一切変更しない)。33/37件のTOPIC記事にギャラリーがあり、全件に一律で
   効く。縦横比は4:3(横位置・縦位置どちらの元画像でも極端なトリミングに
   なりにくく、サイト内の他の写真〈教育部行事計画の実施写真等〉とも近い
   比率のため採用)。 */
body.sao-sub .entry-body .gallery {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 14px !important;
  margin: 20px 0 !important;
}
body.sao-sub .entry-body .gallery br { display: none !important; } /* 列区切り用<br>を無効化(grid化により不要) */
body.sao-sub .entry-body .gallery .gallery-item {
  width: auto !important; margin: 0 !important; float: none !important;
}
body.sao-sub .entry-body .gallery .gallery-icon {
  aspect-ratio: 4 / 3; overflow: hidden; border-radius: 8px; background: var(--sao-sub-ice);
}
body.sao-sub .entry-body .gallery .gallery-icon a { display: block; width: 100%; height: 100%; }
body.sao-sub .entry-body .gallery .gallery-icon img {
  width: 100% !important; height: 100% !important; object-fit: cover !important;
  margin: 0 !important; border: none !important;
}
body.sao-sub .entry-body .gallery .gallery-caption {
  min-height: 2.8em; margin: 8px 0 0 !important; padding: 0 !important;
  font-size: 16px; line-height: 1.4; color: var(--sao-sub-muted); text-align: left;
}
@media (max-width: 700px) {
  body.sao-sub .entry-body .gallery { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
}

/* 前後の記事ナビ(指摘145■2、2026-08-31)。見本design/skioita-list-
   article-v1.html に該当部品が無いため、見本の考え方(枠線のみ・
   面を塗らない・ホバーで線と矢印だけ反応)をこの部品にも適用した。
   文言(「← 前の記事」「次の記事 →」)は無変更、矢印だけ
   topic-post-display.php側で<i class="sao-sub-topic-pn-arw">に
   包んでホバー時に個別アニメーションできるようにした(表示される
   文字列は変わらない)。 */
.sao-sub-topic-prevnext {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 26px;
}
.sao-sub-topic-pn {
  background: none; border: 0; border-radius: var(--sao-radius-card); box-shadow: var(--sao-shadow-card); padding: 16px 20px;
  transition: border-color .24s, outline 0s; text-decoration: none !important; color: inherit; display: block;
}
.sao-sub-topic-pn:hover { border-color: var(--sao-sub-sky); }
.sao-sub-topic-pn em {
  display: block; font-style: normal; font-size: 16px; color: var(--sao-sub-muted); letter-spacing: .08em;
  font-weight: 700; margin-bottom: 4px;
}
.sao-sub-topic-pn-arw { display: inline-block; font-style: normal; transition: transform .22s, outline 0s; }
/* 前の記事は左(外側)へ、次の記事は右(外側)へ矢印が動く。 */
.sao-sub-topic-pn:hover .sao-sub-topic-pn-arw { transform: translateX(-4px); }
.sao-sub-topic-pn.is-next:hover .sao-sub-topic-pn-arw { transform: translateX(4px); }
.sao-sub-topic-pn b {
  font-size: 14px; line-height: 1.5; display: block; font-weight: 700; color: var(--sao-sub-ink);
  transition: color .24s, outline 0s;
}
.sao-sub-topic-pn:hover b { color: var(--sao-sub-blue); }
.sao-sub-topic-pn.is-next { text-align: right; }
@media (max-width: 600px) {
  .sao-sub-topic-prevnext { grid-template-columns: 1fr; }
}

/* ---------- 本文タイポグラフィ ---------- */
/* ID=322(バッジテスト合格者)は自作の巨大レイアウトのため対象外。今後除外したい
   ページが増えた場合は、以下の各セレクタ先頭にある「body.sao-sub:not(.page-id-322)」の
   :not()を1つ追記するだけでよい(reports/20260814-sub-skeleton-plan.md 修正7)。
   【重要】CSSのネスト記法(セレクタの中に別のセレクタを書く書き方)は使わない。
   Safari 17.2 / Chrome 120より前のブラウザではネストされたブロックごと無視され、
   本文の見出し・箇条書き・表・リンク色のスタイルが丸ごと消えるため、
   全てフラットな形(セレクタを1行ずつ書き切る形)で記述すること。
   (2026-08-14、レビュー指摘によりネスト記法から書き直した) */
/* 指摘187■1(2026-09-05): 節の見出しの様式を新様式(20px navy + 2px下線)に
   統一した。

   【なぜ】指摘186■0の棚卸しで、同じ .entry-body h2 が2つの様式で
   描画されていることが分かった。
     新様式 20px/navy/2px下線 … .mark を直前に差し込む6ページだけ
                                (総務部・競技部・教育部・ライブラリー・
                                 行事計画・指導者上級者)
     旧様式 24px/#333/左5px青罫線 … それ以外のすべて
   総務部は .mark=1 に対し h2=2 で、**同じページの中で2様式が混在**して
   いた。ここを新様式に寄せることで、その混在も同時に解消する。

   【.mark は増やさない】番号+英字ラベル(.mark)を機械的に全ページへ
   付けるのは適切でない(節が1つしかないページに「01」だけ出るのは変。
   指摘175■2で実際に問題になった)。**h2 の見た目だけを新様式にし、
   .mark を出す対象は今の6ページのまま**にしている。

   下の .mark + h2 / .sao-sub-sec-hd h2 のルールは、margin だけが
   異なる(.mark の直後は 3px 0 0)ため残している。 */
body.sao-sub:not(.page-id-322) .entry-body h2 {
  font-size: 20px; letter-spacing: .02em; margin: 48px 0 20px;
  color: var(--sao-sub-navy); line-height: 1.5;
  padding-left: 0; padding-bottom: 11px;
  border-left: none; border-top: none; border-bottom: 2px solid var(--sao-sub-navy);
  background: none;
}
body.sao-sub:not(.page-id-322) .entry-body h2:first-child { margin-top: 0; }
body.sao-sub:not(.page-id-322) .entry-body h2::after { content: none; }
body.sao-sub:not(.page-id-322) .entry-body h3 {
  font-size: 18px; margin: 32px 0 13px; color: var(--sao-sub-blue-d);
  padding-bottom: 8px; border-bottom: 1px solid var(--sao-sub-line); background: none; padding-left: 0;
}
body.sao-sub:not(.page-id-322) .entry-body h3::after { content: none; }
body.sao-sub:not(.page-id-322) .entry-body p { margin-bottom: 20px; font-size: 15.5px; }
/* 指摘109■1(n): 部門TOP(総務部・競技部・教育部)の冒頭リード文だけ、
   見本の.lead(max-width:62ch)に合わせて折り返し幅を制限する。ページ全体のpに
   一律適用すると他ページの表組み等に影響するため、冒頭の1段落だけに絞った。

   ★指摘258(2026-09-23): ライブラリー(839)にも説明文を入れたので、同じ幅に揃える。
   指摘109の時点では「ライブラリーは本文冒頭の構造が異なるため対象外」としていたが、
   これは**当時ライブラリーに説明文が無かった**ため。いまは .sao-sub-library-desc
   として出ている(本文を丸ごと差し替える作りのため、専用のクラスが付く)。
   **新しい値は足していない。同じ 62ch を使い回しているだけ。** */
body.page-id-180.sao-sub .entry-body > p:first-of-type,
body.page-id-306.sao-sub .entry-body > p:first-of-type,
body.page-id-304.sao-sub .entry-body > p:first-of-type,
body.sao-sub .entry-body .sao-sub-library-desc {
  max-width: 62ch;
}
body.sao-sub:not(.page-id-322) .entry-body ul:not(.wp-block-gallery):not([class*="wp-block"]) {
  margin: 0 0 22px 2px; list-style: none; padding-left: 0;
}
body.sao-sub:not(.page-id-322) .entry-body ul:not(.wp-block-gallery):not([class*="wp-block"]) > li {
  position: relative; padding-left: 20px; margin-bottom: 9px; font-size: 15px;
}
body.sao-sub:not(.page-id-322) .entry-body ul:not(.wp-block-gallery):not([class*="wp-block"]) > li::before {
  content: ""; position: absolute; left: 2px; top: .72em; width: 7px; height: 7px;
  border-radius: 50%; background: var(--sao-sub-sky);
}
body.sao-sub:not(.page-id-322) .entry-body ol { margin: 0 0 22px 22px; }
/* 【指摘324■3(2026-10-12)】行事のページの「開催日程」（.sao-sub-event-dtable の中の ul）の日付の前の水色の点（上の箇条書きの点）を出さない。
   よこしゅんさんのご指摘（イベント日時の所の水色の点を消す）。点の分の字下げ（20px）もなくす。上の箇条書きの規則そのものは消していない（本文の箇条書きは点のまま）。
   行事のカード（.sao-sub-event-cdates）・大会のページ・TOP には、この点は無かった（実測）。★戻し方: この2つの規則を消す。 */
body.sao-sub:not(.page-id-322) .entry-body .sao-sub-event-dtable ul:not(.wp-block-gallery):not([class*="wp-block"]) > li::before { content: none; }
body.sao-sub:not(.page-id-322) .entry-body .sao-sub-event-dtable ul:not(.wp-block-gallery):not([class*="wp-block"]) > li { padding-left: 0; }
body.sao-sub:not(.page-id-322) .entry-body ol > li { padding-left: 4px; margin-bottom: 9px; font-size: 15px; }

/* 本文内リンク: ボタン(.sao-btn/.sao-btn-cta等)・ダウンロードカード(.sao-sub-dlitem)は
   除外する。修正6: 一括のa要素指定でボタンの見た目を壊さないための対応
   指摘126で.sao-sub-linkrow(リンク行、見本06)も同じ理由で除外に追加した
   (CSS.getMatchedStylesForNodeで、このルールの詳細度がsao-sub-linkrow側の
   color指定より高く上書きしてしまっていたことを確認して発見)。
   指摘157■1(2026-08-31)で.cbtnも除外に追加。「cbtn」という名前が
   `[class*="sao-btn"]`(部分一致)に一致しないため、この一括指定が
   お問合せボタン(.cbtn)の文字色(css/sao-buttons.cssで白#fffと指定
   済み)を--sao-sub-blueへ上書きしてしまっていた不具合を、
   CSS.getMatchedStylesForNodeで実際に確認して発見した(指摘の「ボタンの
   文字が薄い青」という報告は、.cbtn自体の指定ミスではなくこの外側の
   一括指定による上書きが原因だった。詳細:
   reports/20260831-instr157-item1-impl.md)。
   指摘181■3(2026-09-03)で.sao-sub-gisen-go(技術選手権ページのはしごの
   「要項・資料を見る」)も同じ理由で除外に追加。この一括指定が
   text-decoration:underlineを付けてしまい、見本(.go{text-decoration:none})と
   食い違うため。 */
body.sao-sub:not(.page-id-322) .entry-body a:not([class*="sao-btn"]):not(.sao-sub-dlitem):not(.sao-sub-linkrow):not(.cbtn):not(.sao-sub-gisen-go):not(.sao-frow):not(.sao-fcard):not(.sao-sub-gisen-ttl) {
  /* 【指摘212■3(2026-09-15)】下線は元から付いていたが、**色が
     --sao-sub-ice(#E8F2FA)で白地とのコントラストが1.13:1しかなく、
     事実上見えていなかった**(実測)。デザイン定義書§3.2.2
     「リンクテキストの下線は原則として解除しない」は、見えてこそ意味が
     あるので、下線の色を文字と同じ色(currentColor = --sao-sub-blue、
     白地で7.07:1)にした。あわせて offset を 2px → 3px(見本
     design/skioita-typo-teian.html の .new-link と同じ)。 */
  color: var(--sao-sub-blue); text-decoration: underline; text-decoration-color: currentColor;
  text-underline-offset: 3px; font-weight: 700;
}
body.sao-sub:not(.page-id-322) .entry-body a:not([class*="sao-btn"]):not(.sao-sub-dlitem):not(.sao-sub-linkrow):not(.cbtn):not(.sao-sub-gisen-go):not(.sao-frow):not(.sao-fcard):not(.sao-sub-gisen-ttl):hover {
  text-decoration-color: var(--sao-sub-blue);
}

/* 表 */
body.sao-sub:not(.page-id-322) .entry-body table {
  width: 100%; border-collapse: collapse; margin: 6px 0 28px; font-size: 14.5px;
}
body.sao-sub:not(.page-id-322) .entry-body table th,
body.sao-sub:not(.page-id-322) .entry-body table td {
  padding: 14px 16px; border-bottom: 1px solid var(--sao-sub-line); text-align: left; vertical-align: top;
}
body.sao-sub:not(.page-id-322) .entry-body table th {
  background: var(--sao-sub-ice); color: var(--sao-sub-navy); font-weight: 700; font-size: 16px;
}
/* 指摘73■2: 「th全部に31%」だと列数分だけ合計が100%を超え、4〜5列の表で
   列が過度に狭くなる原因になっていた(指摘72で確認)。2列表(区分|値、最も
   多いパターン)では従来どおり1列目だけ狭くしたい意図があったため、
   :first-childに絞って31%を残す。2列目以降はtable-layout:auto(既定)の
   内容に応じた自動配分に任せる。列数に関わらず「1列目だけ狭い」以外の
   崩れが起きなくなる。badge-compare-table/edu-schedule-ski/edu-schedule-sb
   のような個別th:nth-child指定は、より詳細度の高いセレクタとして
   引き続きこの既定値を上書きする(無変更)。 */
/* 指摘86■1(2026-08-24): 31%は表の実際の幅が狭い場合(event個別ページの
   事実表など、サイドバー分を差し引いた本文カラムはさらに狭い)に、
   見出し文字数分の幅を保証できず潰れの原因になっていた。emは要素自身の
   フォントサイズが基準のため、表ごとにフォントサイズが違っても「文字数」の
   意味が保たれる(px固定にしない理由)。6emは、サイト内のth:first-childで
   最長の実例「お問い合わせ」(6文字、event個別ページの事実表)が
   1行に収まる値として実測で決定した。
   【指摘87で発見・修正】上記のtable th/tdはすぐ上のルール(272行目)で
   box-sizing:border-box + padding:14px 16px(左右32px)が効いており、
   min-width:6emだけ指定すると6emはpadding込みの外側の箱の幅になってしまい、
   実際に文字が使える内側の幅は6em−32pxしか無かった(実測で6emのままだと
   320pxで依然として潰れることを発見)。padding分の32pxを足したことで、
   文字が使える幅が正しく6em(フォントサイズの6文字ぶん)になるようにした。 */
body.sao-sub:not(.page-id-322) .entry-body table th:first-child {
  width: 31%;
  min-width: calc(6em + 32px);
}
/* 指摘25(2029)で追加: 4列の比較表は、上記th{width:31%}(2列表を想定)のままだと
   列幅の合計が100%を超えて崩れるため、列ごとに個別の幅を指定して上書きする。 */
body.sao-sub:not(.page-id-322) .entry-body table.badge-compare-table th:nth-child(1) { width: 18%; }
body.sao-sub:not(.page-id-322) .entry-body table.badge-compare-table th:nth-child(2) { width: 24%; }
body.sao-sub:not(.page-id-322) .entry-body table.badge-compare-table th:nth-child(3) { width: 20%; }
body.sao-sub:not(.page-id-322) .entry-body table.badge-compare-table th:nth-child(4) { width: 38%; }

/* 指摘57(2026-08-21)。教育部(304)の行事計画(スキー/スノーボード)を画像から
   HTMLの表に起こす際に追加。badge-compare-tableと同じ理由(既定のth{width:31%}は
   2列表を想定しているため、列数の異なる表では個別に幅指定が必要)。 */
body.sao-sub:not(.page-id-322) .entry-body table.edu-schedule-ski th:nth-child(1) { width: 9%; }
body.sao-sub:not(.page-id-322) .entry-body table.edu-schedule-ski th:nth-child(2) { width: 14%; }
body.sao-sub:not(.page-id-322) .entry-body table.edu-schedule-ski th:nth-child(3) { width: 58%; }
body.sao-sub:not(.page-id-322) .entry-body table.edu-schedule-ski th:nth-child(4) { width: 19%; }
body.sao-sub:not(.page-id-322) .entry-body table.edu-schedule-sb th:nth-child(1) { width: 6%; }
body.sao-sub:not(.page-id-322) .entry-body table.edu-schedule-sb th:nth-child(2) { width: 6%; }
body.sao-sub:not(.page-id-322) .entry-body table.edu-schedule-sb th:nth-child(3) { width: 6%; }
body.sao-sub:not(.page-id-322) .entry-body table.edu-schedule-sb th:nth-child(4) { width: 8%; }
body.sao-sub:not(.page-id-322) .entry-body table.edu-schedule-sb th:nth-child(5) { width: 38%; }
body.sao-sub:not(.page-id-322) .entry-body table.edu-schedule-sb th:nth-child(6) { width: 12%; }
body.sao-sub:not(.page-id-322) .entry-body table.edu-schedule-sb th:nth-child(7) { width: 24%; }

/* ============================================
   指摘108■2(2026-08-27): edu-schedule-sbの左端「NO.」列(連番)を非表示にする。
   【edu-schedule-skiは対象外】: 元々No列を持たない(見出しは月/日（曜日）/
   行事/場所の4列で、1列目は実データの「月」)。指示文は両クラスの1列目を
   一律display:noneにする想定だったが、実際にskiの1列目を消すと連番ではなく
   月の情報が消えてしまうため、実際に列構成を確認したうえでsbのみに限定した
   (詳細: reports/20260827-instr108.md「■2」)。
   列を非表示にしてもresponsive-tables.jsの列インデックス処理(data-label・
   rowspanのcarry追跡)には影響しない(DOM構造自体は無変更、CSSで見た目上
   隠すだけのため)。 */
body.sao-sub:not(.page-id-322) .entry-body table.edu-schedule-sb th:nth-child(1),
body.sao-sub:not(.page-id-322) .entry-body table.edu-schedule-sb td:nth-child(1) {
  display: none;
}
/* NO.列(6%)が無くなった分、残り6列(合計94%)を100%に再配分。列ごとの
   比率(6:6:8:38:12:24)は維持したまま、94%→100%になるよう一律で拡大した
   (6/94≒6.4%, 8/94≒8.5%, 38/94≒40.4%, 12/94≒12.8%, 24/94≒25.5%)。 */
body.sao-sub:not(.page-id-322) .entry-body table.edu-schedule-sb th:nth-child(2) { width: 6.4%; }
body.sao-sub:not(.page-id-322) .entry-body table.edu-schedule-sb th:nth-child(3) { width: 6.4%; }
body.sao-sub:not(.page-id-322) .entry-body table.edu-schedule-sb th:nth-child(4) { width: 8.5%; }
body.sao-sub:not(.page-id-322) .entry-body table.edu-schedule-sb th:nth-child(5) { width: 40.4%; }
body.sao-sub:not(.page-id-322) .entry-body table.edu-schedule-sb th:nth-child(6) { width: 12.8%; }
body.sao-sub:not(.page-id-322) .entry-body table.edu-schedule-sb th:nth-child(7) { width: 25.5%; }

/* 指摘108■2: 日付列は等幅の数字で縦に揃え、行事名は太字、会場・場所は
   薄めの色にする(列見出しの文言自体は無変更)。
   【重要・発見した既存不具合】th(見出し行)は1行しか無くrowspanも無いため
   nth-childで安全に列を特定できるが、td(データ行)はrowspanで「月」列が
   省略される行が大多数(ski: 33行中28行、sb: 8行中4行)あり、その行だけ
   nth-childの数え方が1つずつ前にずれる(例: ski row2「29日（土）」行は
   月列が無いため<td>が3つしか無く、nth-child(1)が本来の「日」列に
   ズレる)。td側はresponsive-tables.js(指摘75)が既に付与している
   data-label属性(rowspanのずれを正しく追跡した実際の列名)で指定する。
   thはnth-childのまま(1行だけなのでズレない)。 */
body.sao-sub:not(.page-id-322) .entry-body table.edu-schedule-ski th:nth-child(1),
body.sao-sub:not(.page-id-322) .entry-body table.edu-schedule-ski td[data-label="月"],
body.sao-sub:not(.page-id-322) .entry-body table.edu-schedule-ski th:nth-child(2),
body.sao-sub:not(.page-id-322) .entry-body table.edu-schedule-ski td[data-label="日（曜日）"],
body.sao-sub:not(.page-id-322) .entry-body table.edu-schedule-sb th:nth-child(2),
body.sao-sub:not(.page-id-322) .entry-body table.edu-schedule-sb td[data-label="月"],
body.sao-sub:not(.page-id-322) .entry-body table.edu-schedule-sb th:nth-child(3),
body.sao-sub:not(.page-id-322) .entry-body table.edu-schedule-sb td[data-label="日"] {
  font-variant-numeric: tabular-nums;
}
/* rowspanで月列自体が無い行(tr自身にdata-carry-0/-1として値を持つ)は
   td[data-label]の対象外になるため、carryのtr::beforeにも同じ書体を適用。 */
body.sao-sub:not(.page-id-322) .entry-body table.edu-schedule-ski tr[data-carry-0]::before,
body.sao-sub:not(.page-id-322) .entry-body table.edu-schedule-sb tr[data-carry-1]::before {
  font-variant-numeric: tabular-nums;
}
body.sao-sub:not(.page-id-322) .entry-body table.edu-schedule-ski td[data-label="行事"],
body.sao-sub:not(.page-id-322) .entry-body table.edu-schedule-sb td[data-label="行事"] {
  font-weight: 700;
}
body.sao-sub:not(.page-id-322) .entry-body table.edu-schedule-ski td[data-label="場所"],
body.sao-sub:not(.page-id-322) .entry-body table.edu-schedule-sb td[data-label="会場"] {
  color: var(--sao-sub-muted);
}

/* ============================================
   指摘74■1(2026-08-24): 320pxで潰れが残っていた表に、表ごとの
   min-width(そのページのどの列も4文字ぶんを割らない最小幅、実測)を与える。
   .entry-body .scroll-box table{min-width:0 !important}という汎用ルールは
   意図的に残したまま(min-widthを指定していない他の表は今までどおり
   「収まれば折り返し」の挙動を維持する)、表クラスを足して詳細度を上げる
   ことでこれらの表だけ上書きする。「九重」「1級」のような短い値の列には
   nowrapも併用し、文章が入る列(行事・受検資格など)には掛けない。
   実測値・横スクロール量の詳細はreports/20260824-instr74-*.mdを参照。
   ============================================ */
/* 指摘77で発見・修正: 指摘74時点のmin-width算出はclientWidth(padding込み)を
   誤って「文字の実効幅」として使っており、実際には16px+16pxのpaddingで
   ほぼ全部消費されていたため、300pxでは320pxで潰れが残っていた(区分列以外の
   全列)。padding抜きの実効幅で再計測し460pxに修正。 */
/* 【指摘193■1(2026-09-07)で削除】ここにあった .badge-compare-table の
   min-width(460px)と1列目のnowrapは、対象の表(バッジテストの
   「3種類を比べる」)そのものを削除したため、当たる要素が無くなった。
   定義を残しても効かないだけだが、後任者が「この表はどこにあるのか」と
   探すことになるため削除する。当時の値は経緯として下に残す:

   body.sao-sub:not(.page-id-322) .entry-body .scroll-box table.badge-compare-table {
     min-width: 460px !important;
   }
   body.sao-sub:not(.page-id-322) .entry-body table.badge-compare-table th:nth-child(1),
   body.sao-sub:not(.page-id-322) .entry-body table.badge-compare-table td:nth-child(1) {
     white-space: nowrap;
   } */

/* 教育部行事計画: 実測の結果、横スクロール量が大きい(320pxで約350〜440px)。
   最小幅そのものは機械的に正しいが、UXとしては別対応(モバイルでの
   縦積みレイアウト等)を検討する価値がある。reports/20260824-instr74-*.md
   に代替案を提案として記載、実装はしていない(このmin-widthはあくまで
   「潰れゼロ」を満たすための暫定対応)。 */
body.sao-sub:not(.page-id-322) .entry-body .scroll-box table.edu-schedule-ski {
  min-width: 660px !important;
}
/* 指摘108■2で発見・修正: このnowrap指定は元々td:nth-child(1)/(2)/(4)を
   使っていたが、rowspanで「月」列が省略される行(ski全33行中28行が該当)は
   td の数え方が1つ前へずれるため、実際には無関係な列(行事等)にnowrapが
   誤って掛かったり、対象の列に掛からなかったりしていた(実測で発覚、
   詳細: reports/20260827-instr108.md「■2」)。th(見出し行)はrowspanが
   無く1行だけのためnth-childのままで問題ない。tdはresponsive-tables.jsが
   付与するdata-label(rowspanのずれを正しく追跡済み)で指定し直した。 */
body.sao-sub:not(.page-id-322) .entry-body table.edu-schedule-ski th:nth-child(1),
body.sao-sub:not(.page-id-322) .entry-body table.edu-schedule-ski td[data-label="月"],
body.sao-sub:not(.page-id-322) .entry-body table.edu-schedule-ski th:nth-child(2),
body.sao-sub:not(.page-id-322) .entry-body table.edu-schedule-ski td[data-label="日（曜日）"],
body.sao-sub:not(.page-id-322) .entry-body table.edu-schedule-ski th:nth-child(4),
body.sao-sub:not(.page-id-322) .entry-body table.edu-schedule-ski td[data-label="場所"] {
  white-space: nowrap;
}
body.sao-sub:not(.page-id-322) .entry-body table.edu-schedule-ski tr[data-carry-0]::before {
  white-space: nowrap;
}
/* 指摘108■2: 320px実測(qa-tools/min_width_search.py相当の手法、テーブル幅を
   直接変えて潰れの有無を機械判定)により、NO.列を消した後の必要幅は400pxと
   判明(390pxでは「会場」列の「九重」が潰れ、400pxで解消)。旧570pxから
   更新(推定ではなく実測、詳細: reports/20260827-instr108.md「■2」)。 */
body.sao-sub:not(.page-id-322) .entry-body .scroll-box table.edu-schedule-sb {
  min-width: 400px !important;
}
body.sao-sub:not(.page-id-322) .entry-body table.edu-schedule-sb th:nth-child(1),
body.sao-sub:not(.page-id-322) .entry-body table.edu-schedule-sb td[data-label="月"],
body.sao-sub:not(.page-id-322) .entry-body table.edu-schedule-sb th:nth-child(2),
body.sao-sub:not(.page-id-322) .entry-body table.edu-schedule-sb td[data-label="日"],
body.sao-sub:not(.page-id-322) .entry-body table.edu-schedule-sb th:nth-child(3),
body.sao-sub:not(.page-id-322) .entry-body table.edu-schedule-sb td[data-label="曜日"],
body.sao-sub:not(.page-id-322) .entry-body table.edu-schedule-sb th:nth-child(4),
body.sao-sub:not(.page-id-322) .entry-body table.edu-schedule-sb td[data-label="会場"] {
  white-space: nowrap;
}
body.sao-sub:not(.page-id-322) .entry-body table.edu-schedule-sb tr[data-carry-1]::before {
  white-space: nowrap;
}

/* 加盟クラブ一覧(1549)。<th>を持たない素の表だったため、post_contentに
   table class="kamei-club-table" を追加した(文言は一切変更していない、
   属性追加のみ)。事務局所在地・代表者(いずれも短い固有名詞)にnowrapを
   併用し、クラブ名・ホームページ(長くなりうる)には掛けない。 */
body.sao-sub:not(.page-id-322) .entry-body .scroll-box table.kamei-club-table {
  min-width: 520px !important;
}
body.sao-sub:not(.page-id-322) .entry-body table.kamei-club-table td:nth-child(2),
body.sao-sub:not(.page-id-322) .entry-body table.kamei-club-table td:nth-child(3) {
  white-space: nowrap;
}

/* rowspanで結合した月・NO.列の数字が上端に寄って見えるのを避け、縦方向で中央に揃える。 */
body.sao-sub:not(.page-id-322) .entry-body table.edu-schedule-ski td[rowspan],
body.sao-sub:not(.page-id-322) .entry-body table.edu-schedule-sb td[rowspan] {
  vertical-align: middle; text-align: center; background: var(--sao-sub-ice);
}
/* 出典表記(連盟の文字列をそのまま)。指摘139■1(2026-08-31)で、折りたたみの
   中(.badge-acc-body内、表のすぐ下)へ移した。以前は折りたたみの外に
   置いて常時表示していたが、見本design/skioita-schedule-acc-v1.htmlの
   決まりごと(5)に従い、開閉に連動する表示へ変更した。 */
body.sao-sub:not(.page-id-322) .entry-body p.edu-schedule-source {
  font-size: 16px; color: var(--sao-sub-muted); margin: 12px 0 0;
}

/* ============================================
   指摘75■2(2026-08-24): 横スクロール量が大きい3表(edu-schedule-ski・
   edu-schedule-sb・kamei-club-table)を、600px以下では1行=1カードの
   縦積みに切り替える(min-width+横スクロールは600px超のみ)。
   data-label・data-carry-N属性はresponsive-tables.jsが付与する
   (連盟の文言・タグ構造は無変更、属性追加のみ)。
   ============================================ */
@media (max-width: 600px) {
  body.sao-sub:not(.page-id-322) .entry-body table.edu-schedule-ski,
  body.sao-sub:not(.page-id-322) .entry-body table.edu-schedule-sb,
  body.sao-sub:not(.page-id-322) .entry-body table.kamei-club-table {
    display: block; width: 100% !important; min-width: 0 !important; border: none;
  }
  body.sao-sub:not(.page-id-322) .entry-body table.edu-schedule-ski tbody,
  body.sao-sub:not(.page-id-322) .entry-body table.edu-schedule-sb tbody,
  body.sao-sub:not(.page-id-322) .entry-body table.kamei-club-table tbody {
    display: block;
  }
  /* 見出し行(th、または見出し役のtd)は非表示にし、各セルのdata-labelで代替する。 */
  body.sao-sub:not(.page-id-322) .entry-body table.edu-schedule-ski tr:first-child,
  body.sao-sub:not(.page-id-322) .entry-body table.edu-schedule-sb tr:first-child,
  body.sao-sub:not(.page-id-322) .entry-body table.kamei-club-table tr:first-child {
    display: none;
  }
  body.sao-sub:not(.page-id-322) .entry-body table.edu-schedule-ski tr,
  body.sao-sub:not(.page-id-322) .entry-body table.edu-schedule-sb tr,
  body.sao-sub:not(.page-id-322) .entry-body table.kamei-club-table tr {
    display: block; background: #fff; border: 1px solid var(--sao-sub-line);
    border-radius: 8px; padding: 12px 14px; margin-bottom: 10px;
  }
  /* ★指摘264■2-2(2026-09-23): セレクタを1段深くした。**値は変えていない。**
     ここは「スマホで表を1行＝1枚のカードに積み替える」ための指定だが、
     `padding: 3px 0` だけが**一度も効いていなかった**。
     原因は、この下(752行)にある指摘59の指定
     `… table.edu-schedule-ski th, … td { padding: 6px 10px }` が
     **同じ強さで、ファイルの後ろにある**ため(後に書いたほうが勝つ)。
     同じブロックの `display: block` は効いているので
     「カードに積み替わる」見た目は正しく出ており、**paddingだけが死んでいる
     ことに気づけなかった**(指摘262■10-3とまったく同じ型)。
     `> tbody > tr >` を足して (0,4,3) → (0,4,5) にし、
     **読み込み順に関係なく必ず勝つ**ようにする。
     3つの表とも tbody があり thead が無いことを実機で確認済み
     (td の総数と `> tbody > tr > td` の数が一致)。 */
  body.sao-sub:not(.page-id-322) .entry-body table.edu-schedule-ski > tbody > tr > td,
  body.sao-sub:not(.page-id-322) .entry-body table.edu-schedule-sb > tbody > tr > td,
  body.sao-sub:not(.page-id-322) .entry-body table.kamei-club-table > tbody > tr > td {
    display: block; border-bottom: 0; padding: 3px 0;
    white-space: normal !important;
  }
  /* デスクトップ用のrowspanセル装飾(中央寄せ・氷色背景)を縦積みで打ち消す。
     td[rowspan]という属性セレクタを持つ元のルール(詳細度が高い)に勝つよう、
     同じ[rowspan]付きセレクタで指定する(!importantではなく詳細度で対抗)。 */
  body.sao-sub:not(.page-id-322) .entry-body table.edu-schedule-ski td[rowspan],
  body.sao-sub:not(.page-id-322) .entry-body table.edu-schedule-sb td[rowspan] {
    vertical-align: initial; text-align: left; background: transparent;
  }
  /* 「← 表は横にスクロールできます →」の案内バーは、縦積みでは横スクロール
     自体が発生しないため不要(誤解を招く)。この3表のscroll-boxだけ非表示にする。 */
  body.sao-sub:not(.page-id-322) .entry-body table.edu-schedule-ski,
  body.sao-sub:not(.page-id-322) .entry-body table.edu-schedule-sb,
  body.sao-sub:not(.page-id-322) .entry-body table.kamei-club-table {
    overflow: visible;
  }
  body.sao-sub:not(.page-id-322) .entry-body .scroll-box:has(table.edu-schedule-ski)::before,
  body.sao-sub:not(.page-id-322) .entry-body .scroll-box:has(table.edu-schedule-sb)::before,
  body.sao-sub:not(.page-id-322) .entry-body .scroll-box:has(table.kamei-club-table)::before {
    display: none !important;
  }
  /* data-label: 列見出しをラベルとして先頭に出す(生成コンテンツのため
     textContentには含まれず、連盟の文言比較に影響しない)。 */
  body.sao-sub:not(.page-id-322) .entry-body table.edu-schedule-ski td[data-label]::before,
  body.sao-sub:not(.page-id-322) .entry-body table.edu-schedule-sb td[data-label]::before,
  body.sao-sub:not(.page-id-322) .entry-body table.kamei-club-table td[data-label]::before {
    content: attr(data-label) "："; display: inline; font-size: 16px; font-weight: 700;
    color: var(--sao-sub-muted); margin-right: 4px;
  }
  /* data-carry-N: rowspanで飛ばされた列(edu-schedule-skiの月=列0、
     edu-schedule-sbの月=列1)を、その行の先頭に補って表示する。 */
  body.sao-sub:not(.page-id-322) .entry-body table.edu-schedule-ski tr[data-carry-0]::before {
    content: "月：" attr(data-carry-0); display: block; font-size: 14px; font-weight: 700;
    color: var(--sao-sub-muted); margin-bottom: 4px;
  }
  body.sao-sub:not(.page-id-322) .entry-body table.edu-schedule-sb tr[data-carry-1]::before {
    content: "月：" attr(data-carry-1); display: block; font-size: 14px; font-weight: 700;
    color: var(--sao-sub-muted); margin-bottom: 4px;
  }
}

/* ============================================
   指摘77■1(2026-08-24): 270(SAJ会員登録)の会員登録料テーブル(saj-fee-table)。
   .soumu-card .scroll-box { overflow-x: visible !important }
   (2026-08-20時点の既存ルール、意図的に横スクロール不要と判断されていた)を
   維持したまま潰れを防ぐため、他の3表と同じ考え方で600px以下を縦積みに
   する。見出し行を持たない表(1列目「会員登録料」がrowspanで3行をくくる
   だけの構造)のため、data-label方式ではなく、1列目を「グループ見出し」・
   2〜3列目を「項目名 ─ 金額」の1行にする専用のレイアウトにする。 */
@media (max-width: 600px) {
  body.sao-sub:not(.page-id-322) .entry-body table.saj-fee-table,
  body.sao-sub:not(.page-id-322) .entry-body table.saj-fee-table tbody {
    display: block; width: 100% !important;
  }
  body.sao-sub:not(.page-id-322) .entry-body table.saj-fee-table tr {
    display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: flex-start;
    gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--sao-sub-line);
  }
  body.sao-sub:not(.page-id-322) .entry-body table.saj-fee-table tr:last-child { border-bottom: 0; }
  body.sao-sub:not(.page-id-322) .entry-body table.saj-fee-table td {
    display: inline; padding: 0; background: transparent !important;
    color: inherit !important; font-weight: normal !important; text-align: left;
    white-space: normal !important;
  }
  /* 指摘79■1(a): rowspanの1列目(「会員登録料」)は、カード見出し
     (.soumu-subhead、直前に既に同じ文言で表示済み)と縦に並ぶと重複して
     見えるため、縦積み表示では非表示にする。情報自体はカード見出し側に
     残るため欠落にはならない。 */
  body.sao-sub:not(.page-id-322) .entry-body table.saj-fee-table td[rowspan] {
    display: none;
  }
  /* 指摘79■1(b): 項目名(rowspan以外の最終列より前の列)は折り返し可、
     金額(常に各行の最終列)は改行させず行の右端に固定する。項目名が
     長くて2行に折り返しても、金額は1行目の高さのまま右端に留まる
     (項目名側をflexで縮められる列にし、金額側は縮まない固定列にする)。 */
  body.sao-sub:not(.page-id-322) .entry-body table.saj-fee-table td:not([rowspan]):not(:last-child) {
    flex: 1 1 auto; min-width: 0;
  }
  body.sao-sub:not(.page-id-322) .entry-body table.saj-fee-table td:last-child {
    flex: 0 0 auto; white-space: nowrap !important;
  }
}
/* 指摘59(2026-08-21)。組織ページ(317)の役員名簿は23行だが、この2表は
   33行・8行と多く、317と同じpadding(14px 16px)では間延びするため詰める。
   .badge-acc-body .blue-head-table(バッジテストの表)と同じ密度(6px 10px)に
   揃えた(サイト内の「折りたたみ内の表」の既存の慣習)。 */
body.sao-sub:not(.page-id-322) .entry-body table.edu-schedule-ski th,
body.sao-sub:not(.page-id-322) .entry-body table.edu-schedule-ski td,
body.sao-sub:not(.page-id-322) .entry-body table.edu-schedule-sb th,
body.sao-sub:not(.page-id-322) .entry-body table.edu-schedule-sb td {
  padding: 6px 10px; font-size: 16px;
}
/* ============================================
   指摘139■1(2026-08-31): 行事計画セクションの展開ボタンを、見本
   design/skioita-schedule-acc-v1.htmlどおりに作り直す。塗りつぶしを
   一切使わず、文字色と下線(左から伸びる)だけで反応する。
   このdetailsからは.badge-acc(4266.css、Custom CSS & JSの青い塗りつぶし
   カード)クラスを外し、edu-schedule-acc単体で完結させた(4266.css側の
   .badge-acc/.badge-acc>summaryとの詳細度競合・!important合戦を避ける
   ため)。中身のラッパー(.badge-acc-body)はクラス名だけ流用しており、
   表の横スクロール・列幅・600px以下のカード化など既存のプラミングは
   そのまま効く(badge-acc-bodyは.badge-acc祖先を前提にしないクラス単独の
   セレクタのため)。以前ここにあった「summaryは長い文言でも折り返し可」
   の注記は、件数チップを分離した現在のレイアウトでは不要になった。
   ============================================ */
body.sao-sub:not(.page-id-322) .entry-body details.edu-schedule-acc {
  border: 0; margin: 0 0 6px; background: none;
}
body.sao-sub:not(.page-id-322) .entry-body details.edu-schedule-acc > summary {
  list-style: none; cursor: pointer; position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 13px 2px;
  border-top: 1px solid var(--sao-sub-line);
  border-bottom: 1px solid var(--sao-sub-line);
  background: none; font-size: 15px; font-weight: 700; color: var(--sao-sub-ink);
  white-space: normal; line-height: 1.5;
  transition: color .2s;
}
body.sao-sub:not(.page-id-322) .entry-body details.edu-schedule-acc > summary::-webkit-details-marker {
  display: none;
}
/* 下線が左から伸びる(ホバー時のみ)。面ではなく線で反応させる。 */
body.sao-sub:not(.page-id-322) .entry-body details.edu-schedule-acc > summary::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--sao-sub-sky); transform: scaleX(0); transform-origin: left;
  transition: transform .28s cubic-bezier(.22,.61,.36,1);
}
body.sao-sub:not(.page-id-322) .entry-body details.edu-schedule-acc > summary:hover {
  color: var(--sao-sub-blue);
}
body.sao-sub:not(.page-id-322) .entry-body details.edu-schedule-acc > summary:hover::after {
  transform: scaleX(1);
}
body.sao-sub:not(.page-id-322) .entry-body details.edu-schedule-acc > summary:focus-visible {
  outline: 2px solid var(--sao-sub-blue); outline-offset: 3px; border-radius: 4px;
}
body.sao-sub:not(.page-id-322) .entry-body details.edu-schedule-acc > summary .edu-schedule-sp {
  flex: 1;
}
/* 件数チップ: 枠線のみ。PHP側(inc/edu-schedule-count.php)が表示のたびに
   数えて書き込む。数えられなかった場合は空のままここで消える。 */
body.sao-sub:not(.page-id-322) .entry-body details.edu-schedule-acc .edu-schedule-count {
  font-size: 16px; font-weight: 700; color: var(--sao-sub-muted);
  border: 1px solid var(--sao-sub-line); border-radius: 4px; padding: 1px 9px;
  letter-spacing: .02em;
}
body.sao-sub:not(.page-id-322) .entry-body details.edu-schedule-acc .edu-schedule-count:empty {
  display: none;
}
/* 山形(シェブロン)。開くと180度回る。 */
body.sao-sub:not(.page-id-322) .entry-body details.edu-schedule-acc .edu-schedule-chev {
  width: 11px; height: 11px;
  border-right: 1.6px solid var(--sao-sub-muted); border-bottom: 1.6px solid var(--sao-sub-muted);
  transform: rotate(45deg) translate(-2px,-2px);
  transition: transform .28s, border-color .2s; flex: none;
}
body.sao-sub:not(.page-id-322) .entry-body details.edu-schedule-acc > summary:hover .edu-schedule-chev {
  border-color: var(--sao-sub-blue);
}
body.sao-sub:not(.page-id-322) .entry-body details.edu-schedule-acc[open] > summary .edu-schedule-chev {
  transform: rotate(-135deg) translate(-3px,-3px);
}
body.sao-sub:not(.page-id-322) .entry-body details.edu-schedule-acc[open] > summary {
  border-bottom-color: transparent;
}
body.sao-sub:not(.page-id-322) .entry-body details.edu-schedule-acc[open] > summary::after {
  transform: scaleX(1); background: var(--sao-sub-line);
}
body.sao-sub:not(.page-id-322) .entry-body details.edu-schedule-acc[open] > summary:hover::after {
  background: var(--sao-sub-sky);
}

/* ============================================
   指摘139■1(2026-08-31): PDFビューワー枠(スキー行事計画が主役)。
   design/skioita-schedule-acc-v1.html「.pdfbox」に対応。色は既存の
   --sao-sub-*トークンのみ使用(見本の指示どおり新しい色は足していない)。
   ============================================ */
body.sao-sub:not(.page-id-322) .entry-body .edu-schedule-pdfbox {
  border: 1px solid var(--sao-sub-line); border-radius: 8px;
  background: var(--sao-sub-snow); overflow: hidden; margin: 0 0 18px;
}
body.sao-sub:not(.page-id-322) .entry-body .edu-schedule-pdfbox-hd {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 14px; border-bottom: 1px solid var(--sao-sub-line); background: #fff;
}
body.sao-sub:not(.page-id-322) .entry-body .edu-schedule-pdfbox-season {
  font-size: 16px; font-weight: 700; letter-spacing: .04em; color: #fff;
  background: var(--sao-sub-navy); border-radius: var(--sao-radius-pill); padding: 3px 9px; flex: none;
}
body.sao-sub:not(.page-id-322) .entry-body .edu-schedule-pdfbox-ttl {
  font-size: 14.5px; font-weight: 700; flex: 1; min-width: 150px; color: var(--sao-sub-ink);
}
body.sao-sub:not(.page-id-322) .entry-body .edu-schedule-pdfbox-meta {
  font-size: 16px; color: var(--sao-sub-muted); flex: none;
}
body.sao-sub:not(.page-id-322) .entry-body .edu-schedule-pdfbox-view {
  background: #fff; padding: 0; max-width: 100%; overflow: hidden;
}
/* pdf-embedderプラグインが出力する要素が固定px幅を持っていても、320px等の
   狭い幅で右にはみ出さないようにする安全策。 */
body.sao-sub:not(.page-id-322) .entry-body .edu-schedule-pdfbox-view iframe,
body.sao-sub:not(.page-id-322) .entry-body .edu-schedule-pdfbox-view embed,
body.sao-sub:not(.page-id-322) .entry-body .edu-schedule-pdfbox-view canvas,
body.sao-sub:not(.page-id-322) .entry-body .edu-schedule-pdfbox-view img {
  max-width: 100% !important;
}
body.sao-sub:not(.page-id-322) .entry-body .edu-schedule-pdfbox-ft {
  display: flex; gap: 18px; flex-wrap: wrap; padding: 11px 14px;
  border-top: 1px solid var(--sao-sub-line); background: #fff;
}
body.sao-sub:not(.page-id-322) .entry-body .edu-schedule-pdf-lnk {
  font-size: 16px; font-weight: 700; color: var(--sao-sub-blue); text-decoration: none;
  border-bottom: 1px solid transparent; transition: border-color .2s;
}
body.sao-sub:not(.page-id-322) .entry-body .edu-schedule-pdf-lnk:hover {
  border-bottom-color: var(--sao-sub-sky);
}
body.sao-sub:not(.page-id-322) .entry-body .edu-schedule-pdf-lnk i {
  font-style: normal; color: var(--sao-sub-sun); margin-left: 5px;
}
/* 指摘388■1-1: .edu-schedule-notice(左の 2px の線の案内文)の決まりは消した。公開のページ 664 のどこにも出ていなかった(本文にあるのはゴミ箱の 5172 だけ)。 */
/* 指摘60(2026-08-21)。原本の黄色マーカー(競技大会を示す強調)を再現する。
   ブラウザ既定の<mark>(黄色地に黒文字)は必ず打ち消し、サイトのアンバー系統の
   薄い背景色に置き換える。box-decoration-break: cloneで、320px等の狭い幅で
   テキストが2行以上に折り返した場合も、各行ごとに背景色が正しく付くように
   する(付けないと2行目以降の背景が欠けて見える)。 */
body.sao-sub:not(.page-id-322) .entry-body mark.edu-schedule-taikai {
  background: var(--sao-sub-amber-pale);
  color: inherit;
  padding: 0 3px;
  border-radius: 4px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* 指摘38(2026-08-20)で発見: WordPressコアの[caption]ショートコードが生成する
   .wp-captionは、ショートコードのwidth属性からインラインstyleで固定px幅を
   持つため、320px幅で右にはみ出すことがあった(サイト内で唯一の使用例、
   ID=2256「第77回 国体冬季大会スキー競技会」)。max-widthで頭打ちにする。 */
body.sao-sub:not(.page-id-322) .entry-body .wp-caption {
  max-width: 100% !important;
  height: auto !important;
}
body.sao-sub:not(.page-id-322) .entry-body .wp-caption img {
  max-width: 100%;
  height: auto;
}

/* ---------- ダウンロードカード([skioita_dl]ショートコード) ---------- */
/* 指摘37(2026-08-20): grid-template-columnsを指定していなかったため、暗黙の列幅が
   「auto」(コンテンツの自然な幅に合わせる、100%に広がらない)になっていた。通常は
   ネストが浅く目立たなかったが、ライブラリーのアコーディオン(.sao-sub-library-
   subgroup > .sao-sub-dl、padding:16pxが加わり利用可能幅がさらに狭くなる)内では、
   ダウンロード名の文字列幅の分だけ列がはみ出し、320px幅で12pxの横はみ出しを
   引き起こしていた(原因はCDPでの実測+算出スタイルの祖先チェーン確認で特定、
   reports/20260820-instr37-*.md参照)。minmax(0,1fr)で「親要素の幅いっぱいに広がる、
   かつ内容量にかかわらず0まで縮小できる」列に変更する。 */
.sao-sub-dl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 11px; margin-bottom: 28px; }
.sao-sub-dl-group { margin-bottom: 8px; }
.sao-sub-dl-group-title { font-size: 15px; font-weight: 700; margin: 24px 0 12px; color: var(--sao-sub-navy); }
.sao-sub-dlitem {
  display: flex; align-items: center; gap: 16px; background: #fff; border: 0; border-radius: var(--sao-radius-row); box-shadow: var(--sao-shadow-row);
  padding: 16px 24px; transition: .26s, outline 0s; text-decoration: none !important;
}
.sao-sub-dlitem:hover {
  border-color: var(--sao-sub-sky); box-shadow: 0 8px 22px rgba(10,46,77,.10); transform: translateX(4px);
}
.sao-sub-ext {
  flex: none;
  /* 指摘214(2026-09-16)で統一した。元の指定は次のとおり:
       flex:none; width:46px; height:46px; border-radius:4px;
       display:grid; place-items:center; font-size:16px; font-weight:700;
       color:#fff; letter-spacing:.04em;
       .sao-sub-ext-pdf   background #C0392B（赤）
       .sao-sub-ext-xls   background #1E7A45（緑）
       .sao-sub-ext-doc   background #1F5FA8（青）
       .sao-sub-ext-other background var(--sao-sub-muted) #5E7183（灰）
     ★PDFの赤・Excelの緑・Wordの青は世間で通っている色だが、
       「色が付いていれば状態」という規則をひとつに保つため、
       **白地の分類の札**に統一した(連盟判断、指摘214への返事)。
       四角(46×46px)から横長の札に形も揃えている。
       見分けにくくなった可能性は reports/pending-decision.md に記録済み。 */
}
/* 指摘37(2026-08-20): モバイル幅で.sao-sub-dlitemが12pxだけ右にはみ出す不具合を修正。
   .sao-sub-dlname(flex:1)がflexアイテムの既定値min-width:autoにより、タイトル文字列
   (改行できない語を含む場合がある)の分だけ縮まずに残り、行全体が幅を超えていた。
   min-width:0で縮小を許可し、overflow-wrapで万一の長い語も折り返すようにする。
   配色(background/color等)には触れていない(指摘31で色は変更禁止と指示済みのため)。 */
.sao-sub-dlname { flex: 1; min-width: 0; }
.sao-sub-dlname b { display: block; font-size: 15px; font-weight: 700; color: var(--sao-sub-ink); overflow-wrap: break-word; }
.sao-sub-dlname span { font-size: 16px; color: var(--sao-sub-muted); }
.sao-sub-dlarrow { color: var(--sao-sub-blue); font-size: 18px; }

/* ---------- 部門ハブページの主要ページカード(クイックリンク)
   design/skioita-sub-concept-v1.htmlの.sbox・design/skioita-top-concept-v1.htmlの
   部門カード(.dcard)を参考に、sub-page.css既存の配色(--sao-sub-*)・角丸11px・
   ホバー時の影という体系に合わせて新規デザインした(2026-08-15、306の本文刷新で導入)。
   .sboxのような単一の大きいCTAボックスではなく、部門内の主要ページ7件程度を
   並べるグリッド用途のため、.sao-sub-dlrow(ダウンロードカード)に近い、
   より軽量なカードにした ---------- */
.sao-sub-quicklinks {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px;
  margin: 0 0 32px;
}
/* 指摘134■1(2026-08-30): 指摘132で指摘のあった「総務部だけ説明文がある」
   スタイル不統一に対応するため、横1行(タイトル+矢印のみ)だったカードを、
   .sao-sub-childcard(総務部側、説明文あり)と同じ縦積み構成(タイトル行→
   説明文)に変更した。クラス名自体は既存のsao-sub-qlcardのまま(総務部側の
   sao-sub-childcardとは別クラスを維持、互いに影響しないようにするため)。 */
.sao-sub-qlcard {
  display: flex; flex-direction: column;
  /* 指摘187■12(2026-09-05): 角丸を11px→12pxに。技選カードは見本
     design/skioita-gisen-v1.html が border-radius:12px と明示しており、
     見本に書かれている値を正とする(指摘151・176と同じ扱い)。 */
  background: #fff; border: 0; border-radius: var(--sao-radius-card); box-shadow: var(--sao-shadow-card);
  padding: 24px 24px 24px; text-decoration: none !important; transition: .26s, outline 0s;
}
.sao-sub-qlcard:hover {
  /* 指摘187■12(2026-09-05): 浮く量を3px→2pxに(他のカードが2px)。
     あわせて枠線を --sao-sub-sky から --sao-sub-blue に変更した。
     **棚卸し(指摘186■0)では「skyに揃える」と書いたが、これは誤りだった。**
     --sao-sub-sky は白地で 2.90:1 しかなく、非テキストの基準3:1を
     満たさない。指摘107■5で .sao-sub-childcard:hover を同じ理由で
     sky→blue に直した経緯があり、skyに揃えるとその対応を巻き戻して
     しまう。多数派ではなく**基準を満たすほう(blue、7.07:1)**に揃える。 */
  border-color: var(--sao-sub-blue); box-shadow: 0 8px 22px rgba(10,46,77,.10); transform: translateY(-2px);
}
.sao-sub-qlcard-hd {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.sao-sub-qlcard b {
  font-size: 14.5px; font-weight: 700; color: var(--sao-sub-navy); line-height: 1.5;
}
.sao-sub-qlcard i {
  flex: none; font-style: normal; color: var(--sao-sub-blue); font-size: 18px;
  /* 指摘212c(2026-09-15): 矢印の色を#0B5A9Eに揃えた。この「›」は名前に arrow が
     付かないだけで、一覧の矢印と同じ--sao-sub-sky(白地で2.90:1)だった。
     描かれている文字から探す qa-tools/arrow_color_audit.py ではなく、
     コントラストの全件測定のほうで見つかった(あちらは → だけを見ていたため)。 */
}
.sao-sub-qlcard-desc {
  margin: 6px 0 0; font-size: 16px; color: var(--sao-sub-muted); line-height: 1.7;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---------- TOPIC一覧(ID=123、コアのクエリループブロック)
   2026-08-19、第4段階(本文刷新)。oshirase.cssの.sao-sub-oshirase-row(2202/2210)と
   同じ配色・角丸・ホバー感を踏襲するが、コアのクエリループブロックが生成するDOM構造
   (wp:group内にwp:post-date+wp:post-titleを横並び)に合わせて別クラス名にした
   (oshirase.css側は<a>タグ1つがrow全体になる独自実装のため、DOM構造が異なりクラスの
   使い回しができない) ---------- */
.sao-sub-topiclist { background: #fff; border: 1px solid var(--sao-sub-line); border-radius: 8px; overflow: hidden; margin: 0 0 20px; }
/* 2026-08-19(指摘18): 日付列を.sao-sub-oshirase-row(oshirase.css)と同じ104pxの
   固定幅グリッドにし、タイトルの開始位置を揃える(displayをflexのままだと、
   日付の桁数〈2026.2.14 / 2025.12.22 等〉によって幅が変わり右側がぎざぎざに
   なっていた不具合の修正)。 */
.sao-sub-topiclist-row { display: grid !important; grid-template-columns: 104px 1fr; align-items: baseline; gap: 18px; padding: 15px 20px; border-bottom: 1px solid var(--sao-sub-line); transition: .22s, outline 0s; }
.sao-sub-topiclist-row:last-child { border-bottom: 0; }
.sao-sub-topiclist-row:hover { background: var(--sao-sub-ice); }
.sao-sub-topiclist-dt { font-size: 16px; color: var(--sao-sub-muted); font-variant-numeric: tabular-nums; white-space: nowrap; margin: 0; }
.sao-sub-topiclist-ttl { font-size: 15px; font-weight: 700; line-height: 1.55; margin: 0; }
/* 指摘55(2026-08-20)。上のmargin:0が効いていなかった不具合の修正。
   .sao-sub-topiclist-ttlの実体はコアの投稿タイトルブロック(wp:post-title)で、
   <p class="sao-sub-topiclist-ttl wp-block-post-title">として出力される。
   このため、本文の通常段落用リセット(175行目
   body.sao-sub:not(.page-id-322) .entry-body p、詳細度: クラス3+要素2)が、
   上の.sao-sub-topiclist-ttl(詳細度: クラス1のみ)のmargin:0を打ち消し、
   margin-bottom:20pxが適用されてしまっていた(タイトル行の下側だけに
   余分な20pxの空白ができ、「文字が枠の上に寄っている」ように見える原因)。
   175行目の詳細度を確実に上回るよう、同じセレクタ構造にこのクラスを
   足す形で明示的に上書きする(!importantは使わない)。 */
body.sao-sub:not(.page-id-322) .entry-body .sao-sub-topiclist-ttl { margin: 0; }
.sao-sub-topiclist-ttl a { color: var(--sao-sub-ink); text-decoration: none !important; }
.sao-sub-topiclist-row:hover .sao-sub-topiclist-ttl a { color: var(--sao-sub-blue); }
@media (max-width: 600px) {
  .sao-sub-topiclist-row { grid-template-columns: 1fr; gap: 4px; }
  .sao-sub-topiclist-dt { font-size: 16px; }
}

/* ---------- TOPIC一覧のページネーション(指摘32、2026-08-20)
   984/2009/2007/2003で追加。コアのwp:query-paginationブロックが出力する
   実際のクラス(.page-numbers、現在ページは.current)を対象にする。
   見た目はgokakusha一覧の.gk-pager(現在地をハイライトする数字ボタン)と
   同じ視覚パターンだが、色はsao-sub-*変数(このデザイン全体で統一している
   配色)に合わせた新規スタイル。 ---------- */
.sao-sub-topiclist-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 18px; }
.sao-sub-topiclist-pager .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px; padding: 0 10px; font-size: 17px; font-weight: 700;
  color: var(--sao-sub-blue); background: #fff; border: 1px solid var(--sao-sub-blue);
  border-radius: 4px; text-decoration: none !important; line-height: 1;
}
.sao-sub-topiclist-pager .page-numbers:hover { background: var(--sao-sub-ice); }
.sao-sub-topiclist-pager .page-numbers.current { color: #fff; background: var(--sao-sub-blue); }
.sao-sub-topiclist-pager .page-numbers.dots { border: none; background: none; color: var(--sao-sub-muted); min-width: auto; padding: 0 2px; }

/* ---------- 注意ボックス([skioita_note]ショートコード) ---------- */
/* 指摘388■1-1(見本 design/skioita-notice-v1.html「補足（ふつう）」): 左の縦の線をやめ、ice の地・角丸 14px・左に青のアイコン(site-icons.css)。
   前の指定: background ice・border-left 4px solid sky・border-radius 0 8px 8px 0・padding 24px・b 14.5px・p 14px #3D5062。 */
.sao-sub-callout {
  background: var(--sao-sub-ice); border-radius: var(--sao-radius-row, 14px);
  padding: 14px 18px; margin: 0 0 28px; font-size: 15px; line-height: 1.75; color: var(--sao-sub-ink);
}
.sao-sub-callout b { display: block; color: var(--sao-sub-navy); margin-bottom: 2px; font-size: 15px; }
.sao-sub-callout p { font-size: 15px; margin: 0; color: var(--sao-sub-ink); }
/* 「大事な注意」: 重要の淡い地・赤のアイコン・太字は濃い赤(#9B2C20 / #FDF2F0 = 6.90:1) */
.sao-sub-callout.sao-sub-callout-warn { background: #FDF2F0; }
.sao-sub-callout.sao-sub-callout-warn b { color: #9B2C20; }
/* 指摘388■1-2(E1): 「◯◯シーズンには該当する…がまだありません」は、一覧の場所に 1 つだけの白いカード(一覧の行と同じ影)・真ん中寄せ。
   下の「該当する…がありません。」は PHP 側で出さない。アイコン(見本の箱の絵)は文字の色 muted(白地 5.04:1)。 */
html body .sao-sub-callout[class*="-fallback-notice"] {
  background: #fff; box-shadow: var(--sao-shadow-row, 0 1px 6px rgba(10,46,77,.06)); border-radius: var(--sao-radius-card, 16px);
  padding: 26px 20px !important; text-align: center; color: var(--sao-sub-muted);
}
html body .sao-sub-callout[class*="-fallback-notice"]::before {
  --sao-icm: var(--sao-icm-empty); position: static; display: block; margin: 0 auto 6px; width: 26px; height: 26px; color: var(--sao-sub-muted);
}
html body .sao-sub-callout[class*="-fallback-notice"] b { color: var(--sao-sub-navy); font-size: 15.5px; margin: 0; }
html body .sao-sub-callout[class*="-fallback-notice"] .sao-sub-callout-btn { margin: 8px 0 0; }
/* 指摘55(2026-08-20)。TOPIC一覧タイトルと全く同じ原因(175行目の
   entry-body pルールの方が詳細度が高く、上のmargin:0を打ち消す)で、
   [skioita_note]ショートコードの本文(<p>)にも同じ余白の不具合を発見した
   (投稿タイトルブロックとは別の発生源だが、同じ詳細度の罠)。180・304の
   公開ページで実際に発生していたことを確認済み。
   さらに180(総務部)では、[skioita_note]が.soumu-infoブロック(4266.css、
   Custom CSS & JSプラグイン)の内側に置かれており、そちらの
   `.soumu-info p { margin: 0 0 8px !important; }`(soumu-infoの連続段落
   同士の行間を確保する専用ルール)にも巻き込まれ、8pxの余白が残っていた。
   このルールは!importantのため、詳細度を上げるだけでは勝てない
   (!important同士なら詳細度で決着するため、!importantを付けて対応する。
   他の箇所への影響は無い、このセレクタはsao-sub-callout配下のpにしか
   一致しない)。 */
body.sao-sub:not(.page-id-322) .entry-body .sao-sub-callout p { margin: 0 !important; }
/* 指摘156■1(2026-08-31): 合格者情報・バッジテスト合格者の「今シーズンは
   まだありません」案内内に「直近の発表を見る」ボタンを追加する際、上の
   margin:0 !importantに巻き込まれてボタンが案内文に隣接しすぎるのを防ぐ。
   このセレクタ自体は上と同じ詳細度のため、後に書いた方(このルール)が
   !important同士の中で優先される。 */
body.sao-sub:not(.page-id-322) .entry-body .sao-sub-callout p.sao-sub-callout-btn { margin: 12px 0 0 !important; }
.sao-sub-callout.sao-sub-callout-warn { background: #FDF0EE; border-color: #C0392B; }
.sao-sub-callout.sao-sub-callout-warn b { color: #9A2E22; }

/* 文中の一部だけを強調する用途(中止・無料開催等、意味を持つ赤字強調)。
   sao-sub-callout-warnと同じ色(#9A2E22、taikai.cssの中止バッジ#C0392B系統とも統一)を
   再利用し、サイト内で赤系の意味が揺れないようにする。白地でコントラスト比7.5:1
   (WCAG AA基準4.5:1を満たす)。2026-08-16、イベント個別ページ本文刷新で新設
   (reports/20260814-content-refresh-pattern.md「8. 意味を持つ強調の扱い」参照)。 */
.sao-sub-highlight-warn { color: #9A2E22; font-weight: 700; }

/* ---------- サイドナビ(Lightning標準 .widget_link_list の再スタイル) ---------- */
/* 指摘109(2026-08-27): design/skioita-bumon-concept-v1.htmlの.snavに合わせて
   全面的に書き直した。見本との差分(指摘109■1 a)「カード・枠線のまま」を
   解消するため、外枠(background/border/border-radius)を廃止し、見本と同じ
   「連続した1本の縦罫(ulのborder-left)+現在地/ホバーだけ伸びる別レイヤーの
   縦罫(li::beforeの疑似要素)」という構造に置き換えた。値は見本のCSSの
   リテラル値をそのまま使い、色だけ既存トークンに置き換えている(--sky→
   var(--sao-sub-sky)等。見本の色は既存トークンと同じ値にしてあるとの指示の
   ため、値そのものは見本のものを踏襲)。 */
body.sao-sub .sub-section .widget_link_list {
  background: none; border: none; border-radius: 0; overflow: visible;
  margin-bottom: 22px;
  /* 追従(sticky)はこのウィジェット箱だけに適用する(従来どおり、指摘106時点の
     判断を維持)。top値はヘッダーの実測高さ+余白(従来どおり)。 */
  position: sticky; top: 78px;
}
body.sao-sub .sub-section .widget_link_list > .sub-section-title {
  background: none; margin: 0 0 15px; padding: 0 !important; border-bottom: none;
}
body.sao-sub .sub-section .widget_link_list > .sub-section-title a {
  display: block; text-decoration: none;
}
body.sao-sub .sub-section .widget_link_list .sub-section-eyebrow {
  /* 見本のリテラル値はvar(--sky)だが、10px/太字の文字では白地2.90:1で
     4.5:1基準を満たさない(実測)。既に指摘106■2から確立しているeyebrow文字の
     色var(--sao-sub-blue)(白地7.07:1)を維持する(「既存トークンを使う」の
     指示を、この用途では従来の色に揃える形で適用した)。 */
  display: block; font-size: 16px; letter-spacing: .2em; color: var(--sao-sub-blue); font-weight: 700;
}
body.sao-sub .sub-section .widget_link_list .sub-section-label {
  display: block; font-size: 16px; font-weight: 700; color: var(--sao-sub-navy); letter-spacing: .02em; margin-top: 2px;
}
body.sao-sub .sub-section .widget_link_list > ul,
body.sao-sub .sub-section .widget_link_list > div > ul {
  list-style: none; margin: 0; padding: 0 0 0 16px; border-left: 2px solid var(--sao-sub-line);
  display: flex; flex-direction: column; gap: 1px;
}
body.sao-sub .sub-section .widget_link_list li { position: relative; list-style: none; }
/* 見本のli::before: ulのborder-leftとは別レイヤーの縦罫。通常は高さ0(見えない)、
   ホバーで62%、現在地で100%+3px+青、というアニメーションつきの表現。
   ホバー時のvar(--sao-sub-sky)(白地2.90:1)は3:1未達だが、意図的に対応
   しない: (1)ホバーでのみ一時的に見える非テキストの装飾で、リンクである
   ことは文字自体の背景色・文字色の変化(:hover { background/color })が
   既に示しており唯一の手段ではない、(2)現在地(常時表示、var(--sao-sub-
   blue)、7.07:1)とは別物として区別済み。指摘107■6と同じ考え方。

   指摘112■4(2026-08-27)で発見・修正: 見本のリテラル値(-21px/-21.5px)の
   ままだと、この縦罫が.widget_link_list(position:sticky)自身の左端
   (実測でul.x=widget_link_list.xの位置)より左にはみ出し、実際には
   一切描画されない(overflow:visibleを.sub-section/.widget_link_list/ul
   の全階層に確認済みだが、position:stickyの要素は独自のコンポジット
   境界を持つため、CSSのoverflow指定と無関係に、その要素自身の左端を
   越える描画が切り捨てられるという既知のブラウザ挙動に起因すると
   特定した。CDPで背景色を赤・幅30pxに強制して確認したところ、
   left:-18px以下(-18を含む)では全体が見える一方、left:-19px以降は
   徐々に切り詰められ、-21px/-21.5pxでは完全に不可視(0px)だった)。
   .widget_link_list自身の左端(ul.xと同じ)より内側に収まるよう、
   left値を-17pxに変更した(実測で欠けなく描画されることを確認済み)。 */
body.sao-sub .sub-section .widget_link_list li::before {
  content: ""; position: absolute; left: -17px; top: 50%; width: 2px; height: 0;
  background: var(--sao-sub-sky); transform: translateY(-50%); transition: height .2s;
}
body.sao-sub .sub-section .widget_link_list li:hover::before { height: 62%; }
/* 現在ページの強調表示。WordPress標準のcurrent_page_itemクラス・aria-current属性を
   そのまま利用する(独自のカレント判定ロジックは不要、従来の方針を維持) */
body.sao-sub .sub-section .widget_link_list li.current_page_item::before,
body.sao-sub .sub-section .widget_link_list li:has(> a[aria-current="page"])::before {
  height: 100%; width: 3px; left: -17px; background: var(--sao-sub-blue);
}
body.sao-sub .sub-section .widget_link_list a {
  display: block; padding: 10px 11px; font-size: 14px; text-decoration: none;
  color: var(--sao-sub-ink); border-radius: 4px; transition: background .18s, color .18s, outline 0s;
  /* 指摘110で発見: Lightning本体のstyle.css(.widget_link_list>ul li a等)が
     border-bottom:1px solid var(--vk-color-border-hr)を既定で当てており、
     このルールでは何もbotder-bottomを指定していなかったため、旧カード型の
     区切り線がそのまま残っていた(項目を区切る横罫は見本に無いにも関わらず)。
     明示的にnoneで打ち消す。 */
  border-bottom: none;
}
body.sao-sub .sub-section .widget_link_list a:hover {
  /* 指摘111■1: 従来--sao-sub-ice(#E8F2FA)を使っていたため、現在地(背景無し)
     との対比が弱く「塗りつぶした四角」に見え、現在地の表示と区別しにくい
     という指摘を受けた。見本の.navB a:hoverが使う一段階薄い--sao-sub-ice-2
     (#F5F9FC)に変更した。 */
  background: var(--sao-sub-ice-2); color: var(--sao-sub-blue);
}
body.sao-sub .sub-section .widget_link_list a:focus-visible {
  outline: 2px solid var(--sao-sub-blue); outline-offset: -2px; background: var(--sao-sub-ice-2);
}
/* 見本は現在地の項目でも背景は塗らない(文字色・太さ・縦罫だけで示す)。
   指摘107■6で報告した罫線コントラストの論点(通常時の細い縦罫は装飾であり
   WCAG 1.4.11の対象外)は本刷新でも変わらず有効(通常時の縦罫はul側の
   border-left、値は変更していない)。 */
body.sao-sub .sub-section .widget_link_list .current_page_item > a,
body.sao-sub .sub-section .widget_link_list a[aria-current="page"] {
  color: var(--sao-sub-blue) !important; font-weight: 700; background: none;
}

/* 指摘106(2026-08-26)で「当連盟について」(block-11)はTOPページのフッターで
   再利用されているため内容・見た目とも変更していない(従来どおりの紺ベタ塗り
   見出し)。「最新TOPIC」(block-12)だけ指摘106■5で個別に上書きする(下記)。
   バナー4件は元から.widget_media_imageのため、このルールの対象外のまま。 */
body.sao-sub .sub-section .widget_block:not(.widget_media_image) {
  /* 【指摘291】右の欄: 枠なし・角16px・薄い影(見本 `.a .side .box{border:0;border-radius:16px;box-shadow:0 1px 6px …}`)。
     ★戻し方: border 1px solid var(--sao-sub-line)・8px・影なし */
  background: #fff; border: 0; border-radius: var(--sao-radius-card); box-shadow: var(--sao-shadow-row); overflow: hidden;
  margin-bottom: 22px; padding-bottom: 4px;
}
body.sao-sub .sub-section .widget_block:not(.widget_media_image) > .wp-block-heading {
  background: var(--sao-sub-navy); color: #fff; margin: 0; padding: 15px 20px; font-size: 14px;
}
body.sao-sub .sub-section .widget_block:not(.widget_media_image) > *:not(.wp-block-heading) {
  padding-left: 20px; padding-right: 20px;
}

/* 指摘109■1(l): バナー4件(SAJ/FIS/くじゅう/SEIKO)が画像そのままで統一感が
   無かった差分。見本の.bnr(枠線カード、ホバーで枠線が水色に)と同じ視覚
   言語のカードに揃える。見本の例(丸ドット+団体名+英語表記のテキスト表示)は
   実際のロゴ画像を持つ本サイトの4バナーには当てはまらないため、「枠線
   カード+ホバー時の枠線変化」という外枠の意匠だけを移植した(画像を
   dot+textに差し替えることはしていない、実データ=画像はそのまま)。 */
body.sao-sub .sub-section .widget_media_image {
  /* 【指摘291】バナー: 見本 `.a .side .bn` と同じ(枠なし・角16px・薄い影・白地)。
     ★戻し方: border 1px solid var(--sao-sub-line)・8px・影と白地なし */
  background: #fff; border: 0; border-radius: var(--sao-radius-card); box-shadow: var(--sao-shadow-row); padding: 16px;
  text-align: center; margin-bottom: 22px; transition: border-color .2s;
}
/* ホバー時のvar(--sao-sub-sky)(白地2.90:1)は意図的に対応しない。バナーは
   元々クリック可能なロゴ画像自体が識別手段であり、この枠線変化は補助的な
   ホバーフィードバックにすぎない(指摘107■6と同じ考え方)。 */
body.sao-sub .sub-section .widget_media_image:hover { border-color: var(--sao-sub-sky); }
body.sao-sub .sub-section .widget_media_image figure { margin: 0; }
body.sao-sub .sub-section .widget_media_image img { max-width: 100%; height: auto; }
/* 【指摘324■1(2026-10-12)】SAJ の新しいロゴ（公益財団法人全日本スキー・スノーボード連盟、1500×252 の横長、余白なし）。
   パソコンの右の欄では、枠いっぱい（305/337px）に広がり、ほかの3つ（くじゅう 278px など）より大きく窮屈に見えるので、
   幅を 85% までにする（縦横比は保つ・はみ出さない・切れない）。TOP とスマホは、ほかのバナーと同じ幅に収まっているので変えない。
   画像そのものは加工していない。★戻し方: この規則を消す。 */
@media (min-width: 901px) {
  body.sao-sub .sub-section .widget_media_image a[href*="ski-japan.or.jp"] img { max-width: 85%; }
}

/* 指摘106■5(2026-08-26): 「最新TOPIC」(block-12)。ベタ塗り見出しをやめ、
   小さな英字ラベル(TOPIC、sub-page-display.phpのskioita_sub_get_section()が
   TOPIC記事に対して使っているのと同じ既存語彙を再利用。新しい英語は作って
   いない)+紺文字の見出しにする。本文の抜粋は表示せず(displayPostContent
   を外した)、日付と見出しだけの一覧にした(postsToShow:3、displayPostDate:
   true)。記事タイトル・日付は連盟のデータをそのまま使用(latest-postsブロック
   標準の出力、こちらで言い換えていない)。 */
body.sao-sub .sub-section #block-12.widget_block > .wp-block-heading {
  background: none; color: var(--sao-sub-navy); padding: 16px 20px 4px; position: relative;
}
body.sao-sub .sub-section #block-12.widget_block > .wp-block-heading::before {
  content: "TOPIC"; display: block; font-size: 16px; font-weight: 700;
  letter-spacing: .14em; color: var(--sao-sub-blue); margin-bottom: 3px;
}
body.sao-sub .sub-section #block-12 .wp-block-latest-posts__list { margin: 4px 0 0; }
body.sao-sub .sub-section #block-12 .wp-block-latest-posts__list li {
  list-style: none; padding: 10px 0; border-bottom: 1px solid var(--sao-sub-line);
  /* 指摘109■1(f): 見本は日付が上・タイトルが下。Latest PostsブロックのDOM順は
     タイトル→日付固定(コアブロックの出力順、変更不可)のため、flexの
     column-reverseで見た目の上下だけを入れ替える(DOM順・文言は無変更)。 */
  display: flex; flex-direction: column-reverse;
}
body.sao-sub .sub-section #block-12 .wp-block-latest-posts__list li:last-child { border-bottom: 0; padding-bottom: 4px; }
/* 日付を等幅数字で揃える(指摘の指示どおりtabular-nums、日付の桁が変わっても
   縦の位置が揃う) */
body.sao-sub .sub-section #block-12 .wp-block-latest-posts__post-date {
  display: block; font-size: 16px; color: var(--sao-sub-muted);
  font-variant-numeric: tabular-nums; margin-bottom: 3px;
}
body.sao-sub .sub-section #block-12 .wp-block-latest-posts__post-title {
  display: block; font-size: 16px; color: var(--sao-sub-ink); text-decoration: none; line-height: 1.5;
}
body.sao-sub .sub-section #block-12 .wp-block-latest-posts__post-title:hover { color: var(--sao-sub-blue); }
body.sao-sub .sub-section #block-12 .wp-block-latest-posts__post-title:focus-visible {
  outline: 2px solid var(--sao-sub-blue); outline-offset: 2px;
}
body.sao-sub .sub-section .sao-sub-topic-more { margin: 10px 0 2px !important; }
body.sao-sub .sub-section .sao-sub-topic-more a {
  font-size: 17px; font-weight: 700; color: var(--sao-sub-blue); text-decoration: none;
}
body.sao-sub .sub-section .sao-sub-topic-more a:hover { text-decoration: underline; }
body.sao-sub .sub-section .sao-sub-topic-more a:focus-visible {
  outline: 2px solid var(--sao-sub-blue); outline-offset: 2px;
}

@media (max-width: 900px) {
  body.sao-sub .main-section--col--two,
  body.sao-sub .sub-section--col--two { width: 100%; float: none; }
  body.sao-sub .sub-section .widget_link_list { position: static; }
  .sao-sub-phead { padding: 48px 0 48px; }
}

/* 指摘88■2(2026-08-24): 教育部(304)本文の「西日本各県連主管指導者研修会」
   案内表(県連盟/スキー/スノーボード/パトロールの4列)は、指摘86〜87で
   event個別ページに見つかったのと同じパターン(投稿本文にclass指定の
   無い素の<table>が直接埋め込まれている)。投稿本文(連盟の文章)は変更せず、
   CSSのみで対処する(指摘87■3と同じ考え方: nowrap+表自体をdisplay:block+
   overflow-xでスクロール可能にする)。
   このページ(304)に限定し(body.page-id-304)、304に既にある行事計画
   2表(edu-schedule-ski/edu-schedule-sb、いずれもclass指定あり)は
   :not([class])で除外されるため無関係。315(SAO概要)・317(組織)・
   2912(写真閲覧・販売)にも同種のclass無し<table>があるが、これらは
   別ページのため`body.page-id-304`スコープの外(実測でも無影響を確認済み、
   詳細はreports/20260824-instr88-implementation.md参照)。
   min-width(420px)は、全セルにwhite-space:nowrapを適用した状態での
   実際の必要幅(table.scrollWidth)を実測して決定した(指摘74と同じ
   「4文字を割らない最小幅を実測する」考え方)。 */
body.page-id-304 .entry-body table:not([class]) {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  min-width: 0;
}
body.page-id-304 .entry-body table:not([class]) tbody {
  display: table;
  width: 100%;
  min-width: 420px;
}
body.page-id-304 .entry-body table:not([class]) th,
body.page-id-304 .entry-body table:not([class]) td {
  white-space: nowrap;
}

/* 指摘97■1(2026-08-25): 2912(イベント写真閲覧・販売)にも304と同種の
   class指定の無い<table>があり、320px幅で「集合写真・表彰式」ボタン
   (Gutenbergボタンブロック、.wp-block-buttons{display:flex}の子要素で
   flex-shrink:1)が、テーブルセルの圧縮に引きずられてセル幅129px→
   ボタン幅96.58pxまで縮み、そこにボタン自身のpadding(13px 30px=左右
   計60px)+border(2px×2=4px)が乗るため、実際の文字が入る幅が
   32.58pxしか残らず、8文字が1文字ずつ縦に折り返される不具合が
   発生していた(DOM計測で確定、指摘95で発見)。304のときは
   `body.page-id-304`スコープの外として無影響と判断していたが、
   実際にはボタンを含むセレクタでの潰れ調査(指摘86〜88時点はbadge/table
   セレクタのみ対象、通常のボタンは対象外だった)を行っていなかったため
   見落としていた。304と同じ考え方(表自体をdisplay:block+overflow-xで
   スクロール可能にし、セルを圧縮させない)で対処する。
   min-width(1051px)は、全セルにwhite-space:nowrapを適用した状態での
   実際の必要幅(table.scrollWidth)を実測して決定した(304と同じ手法)。
   304(420px)より大幅に大きいのは、左列に「2023大分県民スポーツ大会、
   全九州ジュニア、2023県選手権 <2023/1/29>」のような長い大会名が
   複数あるため。 */
/* 指摘388■1-5(見本 design/skioita-table-scroll-v1.html): PC ではみ出さない表に。折り返しを許し、左の列(行事の名前と日付)を 36%。
   前は、表そのものを横に動かす箱にし(display:block・overflow-x:auto)、tbody の最小幅 1051px・どのセルも折り返さない(nowrap)
   ため、PC の幅(本文 約760px)でも右が切れていた。横に動かす箱は inc/table-scroll-hint.php の .sao-tscroll-box に移した。
   599px 以下の縦並び(sp-layout.css)はそのまま。 */
body.page-id-2912 .entry-body .sao-tscroll-box > table:not([class]) { table-layout: fixed; width: 100%; }
body.page-id-2912 .entry-body .sao-tscroll-box > table:not([class]) td:first-child { width: 36%; }

/* ---------- 指摘106■6(2026-08-26): 各部TOPの子ページカード ----------
   本文の下(the_contentフィルターで追加、dept-child-cards-display.php)に
   実際の子ページを2列カードで並べる。デザインは既存の.sao-sub-qlcard
   (クイックリンクカード)と統一感を持たせつつ、説明文を1行に収める点が
   異なるため別クラス名にした。ホバーは枠線の色が変わりわずかに浮く程度
   (.sao-sub-qlcardと同じ抑えた動き、派手にしない)。 */
/* 指摘109(2026-08-27): セクション見出しの共通クラス(見本の.sec-hd相当)。
   「NEWS/総務部からのお知らせ」「PAGES/総務部のページ」で共用する。小さな
   英字ラベル+見出し(下に紺の下線)、という見本の様式。値は見本のリテラル
   値、色は既存トークン。 */
/* 指摘164■3(手法7): 見本の.sec{padding:76px 0}に合わせ、節(PAGES/NEWS)の
   上の間隔を76pxに統一した(旧: PAGES=.sao-sub-pages-hdの44px、NEWS=
   このクラス自体は0で実質8px前後しか無かった)。下(18px)は見出しから
   直下の内容までの内部余白のため変更していない(セクション間の余白では
   ないため対象外)。 */
.sao-sub-sec-hd { margin: 80px 0 18px; }
/* 指摘164■2(2026-09-01): 見本design/skioita-sub-premium-v2.htmlの.markに
   合わせ、旧.sao-sub-sec-eyebrow(10.5pxの小さな英字1行)を「番号+巨大な
   英字」の構成に置き換えた。旧ルールは削除(このクラスを出力するPHPは
   dept-child-cards-display.php・dept-news-contact-display.phpの2箇所のみで、
   両方とも.markへ書き換え済みのため、このCSSクラスを参照する箇所は無い)。
   色は見本のリテラル値var(--sun)(#E4632B)ではなくvar(--sao-sub-amber)
   (#B45309)を使う。白地での実測(qa-tools/contrast_check.py):
   sun=3.43:1(不合格)/amber=5.02:1(合格)。.sao-sub-sec-eyebrowの旧色選定
   (指摘109)・.sao-top-lab(指摘153■1)と同じ理由・同じ置き換え。 */
/* 指摘166■1(2026-09-01): 指摘165■3で.markをPAGES/NEWS以外の見出しにも
   広げた際、.mark自身には上余白が無かった(margin:0 0 10px)ため、それまで
   節の間隔を作っていた汎用h2のmargin-top:52pxが.mark+h2ルールで3pxに
   潰され、結果として節と節の間隔が10px程度まで詰まっていた(指摘164■3で
   「節の上を76pxに揃える」と決めた値が、この経路(.mark単体で先頭に立つ
   セクション)では反映されていなかった)。.mark自体に76pxの上余白を持たせる。

   PAGES/NEWSは.sao-sub-sec-hdの中にネストされ、そちらも76pxの上余白を
   持つため、.sao-sub-sec-hdの中にある.markだけは明示的にmargin-top:0にし、
   二重にならないようにした(相殺〈collapsing〉に頼らず明示的に0にする方が、
   .sao-sub-reveal〈スクロールで浮き上がる演出〉のtransform:translateY(24px)
   〈まだ画面内に現れていない状態〉が実測に紛れ込みにくく、確実)。

   【実機検証時の注意点】.sao-sub-reveal付きの要素(PAGES/NEWS等)は、
   画面内に一度も現れていない状態だとtransform:translateY(24px)が掛かった
   ままのため、getBoundingClientRect()で間隔を測ると実際の値より24px
   大きく出ることがある(reveal-onクラスが付く前の一時的な状態)。実機
   計測は、対象セクションが実際に画面を通過してreveal-onが付いた後に
   行うこと(指摘164■5手法10の既存の仕組みで、演出自体は変更していない)。 */
/* 【指摘212■4(2026-09-15)】英字ラベル(.en)の出力を全部止めたので、
   この .mark には番号(.no)しか入らなくなった。指摘167(2026-09-02)で
   「英字が無い見出し」に対して決めた詰め方(margin-bottom 10px→4px、
   .no の行の高さを1に固定)を、**既定の見た目**にする。
   ★戻し方: margin の3つ目を 10px に戻し、下の .no の行を消すだけ。 */
.mark { display: flex; align-items: baseline; gap: 16px; margin: 80px 0 4px; }
.mark .no { line-height: 1; }
.mark.sao-sub-mark-first { margin-top: 0; }
.sao-sub-sec-hd .mark { margin-top: 0; }
/* 指摘167(2026-09-02): 対応表に無く英字(.en)が出ない見出し(304の
   「一般向け 講習会・検定」等3件)は、英字が入るはずの場所が空いて見え、
   読み込みに失敗したように見えるとの指摘。上余白(76px、節と節の間隔)は
   変えず、番号と見出しの間だけを詰めて「番号が見出しのすぐ上に置く
   小さなラベル」に見えるようにする。値は実機で見て違和感が無いように
   決めた(margin-bottom 10px→4px、.noの行の高さも1に固定して余分な
   行間を持ち込まない)。番号自体の色・字の大きさ・字間は変えていない。 */
.mark.sao-sub-mark-noen { margin-bottom: 4px; }
.mark.sao-sub-mark-noen .no { line-height: 1; }
/* 指摘175■2(2026-09-02): そのページに出る.markが1つだけのとき、番号(.no)を
   出さない(「01」だけが単独で出ると「02もあるはず」と思わせるため)。
   番号を外して中身が空になった.markは、この class でまるごと非表示にする。
   **divそのものを消さないのは、紺の下線の見出し(指摘166■2)が
   `.mark + h2` という隣接セレクタで当たっているため。** divを消すと
   h2が旧様式(青い左罫線)に戻ってしまう。display:noneなら場所も余白も
   一切取らない(指摘167で詰めた余白も残らない)一方、隣接セレクタは
   DOM上の関係なので `.mark + h2` はこれまでどおり効く。
   付与はPHP側(inc/dept-child-cards-display.php、優先度30のフィルター)。 */
.mark.sao-sub-mark-hidden { display: none; }
.mark .no { font-size: 16px; font-weight: 700; letter-spacing: .1em; color: var(--sao-sub-amber); }
.mark .en {
  font-size: 30px; font-weight: 700; letter-spacing: .34em; color: var(--sao-sub-line);
  line-height: 1; white-space: nowrap; overflow: hidden;
}
/* entry-body h2の汎用スタイル(左ボーダー様式、24px)より詳細度を上げて
   確実に上書きする(同じセレクタ接頭辞+.sao-sub-sec-hdを追加)。
   指摘166■2(2026-09-01): 「1ページの中に見出しの様式が2種類ある」
   (PAGES/NEWSは紺の下線、304の本文見出しは青い縦棒)への対応として、
   .mark直後のh2にも同じセレクタを適用し、様式を1種類に揃えた
   (セレクタを1つ足すだけ)。839(.sao-sub-library-depthead)は件数バッジ
   (data-dept-count)を持つ別構造で、display:flex/gapはこのルールで
   触れていないため崩れないことを実機確認したうえで対象に含めている
   (詳細はreports/20260901-instr166-implementation.md)。 */
body.sao-sub:not(.page-id-322) .entry-body .sao-sub-sec-hd h2,
body.sao-sub:not(.page-id-322) .entry-body .mark + h2 {
  margin: 3px 0 0; font-size: 20px; color: var(--sao-sub-navy); letter-spacing: .02em;
  padding-bottom: 11px; border-bottom: 2px solid var(--sao-sub-navy); line-height: 1.5;
  background: none; padding-left: 0; border-left: none; border-top: none;
}
/* 指摘164■2(b): 見出しの中の1語だけ色を変える(見本のh2.h em)。文言その
   ものは変えず、既存の見出しの末尾の名詞をPHP側で<em>で包んだだけ。
   304・839の見出しは連盟の文言のため、色分けする語はPHP側で追加していない
   (指摘166■2の指示どおり、色分けはPAGES/NEWSの既存2箇所のみ)。 */
body.sao-sub:not(.page-id-322) .entry-body .sao-sub-sec-hd h2 em {
  font-style: normal; color: var(--sao-sub-blue); /* 白地7.07:1、実測済み */
}
/* 【指摘291(2026-09-25)】見出しを案Aに(見本 `.a .eyebrow{display:none}`・
   `.a .h{border:0;padding:0 0 0 14px;position:relative;font-size:19px}`・
   `.a .h::before{…left:0;top:.28em;bottom:.28em;width:5px;border-radius:5px;background:var(--sky)}`)。
   ・番号(「01」など)は HTML から消さず、ここで出さないだけ(あとで戻せるように)。
     番号を出しているのは PHP: inc/dept-child-cards-display.php(211・242・414行あたり)と
     inc/dept-news-contact-display.php(115行あたり)。
   ・.mark 自体は消さない。.mark が節と節の間隔(上 80px)を持っているため
     (display:none にすると間隔まで消える)。番号だけを隠し、下の余白を 0 にする。
     `.mark + h2` の隣接セレクタもこれまでどおり効く。
   ・紺の下線をやめ、左に水色の丸い棒。下線の分(余白11px＋線2px)は、節の見出しでは
     下の余白 13px に置き換えて、見出しと中身の間隔を保つ。
   ★戻し方: この区切りの規則をまとめて消す。 */
.mark .no { display: none; }
.mark, .mark.sao-sub-mark-noen { margin-bottom: 0; }
body.sao-sub:not(.page-id-322) .entry-body h2,
body.sao-sub:not(.page-id-322) .entry-body .sao-sub-sec-hd h2,
body.sao-sub:not(.page-id-322) .entry-body .mark + h2 {
  border: 0; padding: 0 0 0 14px; position: relative; font-size: 19px;
}
body.sao-sub:not(.page-id-322) .entry-body .sao-sub-sec-hd h2,
body.sao-sub:not(.page-id-322) .entry-body .mark + h2 { margin-bottom: 13px; }
body.sao-sub:not(.page-id-322) .entry-body h2::before {
  content: ""; position: absolute; left: 0; top: .28em; bottom: .28em;
  width: 5px; border-radius: 5px; background: var(--sao-sub-sky);
}
/* 指摘164■3: 上記.sao-sub-sec-hdの76pxと同じ値に統一(旧44px)。値は
   .sao-sub-sec-hd側と重複するが、このクラス固有の上書きとして意図が
   追いやすいよう明示的に残した。 */
/* 指摘164■4(2026-09-01): 飾りの円(見本の.deco::after)。見本のリテラル値
   そのまま。既存のPAGES見出し(.sao-sub-pages-hd、180/304/306の3ページに
   1回だけ出現)にposition:relativeを追加し、新しいクラス名・新しいHTML要素を
   増やさずにこの1箇所だけへ付与した(「1ページにつき最大1つ」を、既存の
   セレクタが最初のセクションに対応することを利用して自然に満たす)。
   839(ライブラリー)は対象外(理由: ページ冒頭が絞り込みUI(.sao-sub-
   library-filter、チップ・detailsを含む高密度な操作パネル)で始まり、
   この装飾円を重ねると操作要素と視覚的に衝突するリスクがあるため。
   詳細はreports/20260901-instr164-item4-impl.md)。 */
/* 指摘164■5 手法9(2026-09-01): セクションごとに地の色を交互にする。
   見本はサイドバーを伴わない単一カラムのレイアウト前提で、box-shadow:
   0 0 0 100vmax + clip-path: inset(0 -100vmax)により画面の左右いっぱいに
   広げているが、実際の部門ページ・ライブラリーは常時右カラム(TOPIC欄・
   バナー)を伴う2カラムレイアウトのため、実機検証でこの手法をそのまま
   使うと崩れることを確認した:
     (1) box-shadowは要素の上下左右に均等に広がる。水平方向だけ見せる
         にはclip-path: inset(0 -100vmax)が必須で、これは祖先に
         overflow:hiddenが無いことが前提(.entry-body/.main-section--
         col--twoはoverflow:visibleで前提は満たす)
     (2) しかし解除すると帯は本文カラム(768px前後)を超えてサイドバー
         の下まで一様に広がり、サイドバー側の各ウィジェットは個別に
         白背景を持つため、ウィジェットの隙間だけに地の色が漏れて見える
         縞模様が発生する
     (3) 漏れを防ぐため.entry-bodyにoverflow:hiddenを追加すると、今度は
         ■4で追加した装飾円(意図的に列の外へはみ出す設計)がクリップされ
         消えてしまい、■4と■5が両立しない
   これらの理由により、見本の「画面の左右いっぱい」ではなく「本文カラム
   自身の左右いっぱい」に読み替えて実装した(negative marginのみ、
   box-shadow/clip-pathは使わずoverflow:hiddenも追加しない。■4の装飾円と
   両立する)。中身の幅(文章の折り返し位置)自体は変えていない。
   適用箇所: 180/304/306のNEWS見出し(1箇所、PAGES見出しとの間で交互になる
   よう、PAGES側には付けていない)。839(ライブラリー)は部門ブロック
   (.sao-sub-library-dept)が元から1部門=1つの自己完結した箱のため、
   奇数番目(2番目・4番目…)に交互付与できる(library-display.php側で実装)。 */
.sao-sub-sec-alt {
  background: var(--sao-sub-ground);
  padding: 28px 24px;
  margin-left: -24px; margin-right: -24px;
  border-radius: 8px;
}
/* 指摘166■1(2026-09-01): .sao-sub-sec-alt自身のpadding-top(28px)は、
   .mark自身の上余白(0、.sao-sub-library-dept .markで明示的に0にしている)
   とは独立に、ブロック自身のmargin-top(76px)にさらに上乗せされる形で
   効いてしまう(paddingは親子間のマージン相殺を妨げるCSS仕様のため、
   box内側のpaddingはmarginの外側にそのまま追加される)。実機計測で
   76+28=104pxになっていることを確認したため、margin-topを
   76px-28px=48pxに減らし、合計(48+28)が他の節と同じ76pxになるよう
   調整した。指摘166■3で180/304/306のNEWSからsao-sub-sec-altを外した
   ため、この調整が実際に効くのは839(.sao-sub-library-dept.sao-sub-sec-alt、
   偶数番目の部門)のみになった。 */
.sao-sub-library-dept.sao-sub-sec-alt {
  margin-top: 48px;
}
.sao-sub-pages-hd { margin-top: 80px; position: relative; }
.sao-sub-pages-hd::after {
  content: ""; position: absolute; right: -30px; top: -24px;
  width: 132px; height: 132px; border: 1px solid var(--sao-sub-line);
  border-radius: 50%; pointer-events: none;
}

/* 指摘109(2026-08-27): 「最新のお知らせ」一覧(差分c)。見本の.news相当。
   dept-news-contact-display.phpのthe_contentフィルターが本文中の
   List Category Posts出力を組み替えて生成する(タイトル・日付・リンク先は
   本文の値をそのまま使用、文言の創作なし)。値は見本のリテラル値、
   色は既存トークン。 */
.sao-sub-news { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
/* 指摘165■5(2026-09-01): .sao-sub-tocと同じ汎用ul/li装飾(丸い行頭記号、
   entry-body ul > li::beforeルール)の打ち消し漏れ。git log -Sで調査した
   結果、.sao-sub-news自体は指摘109■2(2026-08-27、指摘164より前)で追加され、
   汎用ルール自体はさらに前の指摘164以前(2026-08-14、下層ページ共通
   デザイン骨格の初回実装)から存在していた。つまりこの水色の点は指摘164の
   作業で新しく発生したものではなく、指摘109■2の時点から2026-09-01の
   指摘165で発見されるまで気づかれずに残っていた既存の不具合だった。
   .sao-sub-tocのときと同じ理由・同じ打ち消し方。 */
body.sao-sub:not(.page-id-322) .sao-sub-news { list-style: none !important; padding-left: 0 !important; }
body.sao-sub:not(.page-id-322) .sao-sub-news li { padding-left: 0 !important; margin-bottom: 0 !important; }
body.sao-sub:not(.page-id-322) .sao-sub-news li::before { content: none !important; }
/* 指摘110で発見: li:last-child{border-bottom:none}は指摘109実装時に自分で
   追加した値で、見本の.news li{border-bottom:1px solid var(--line-2)}には
   無い(見本は最後の項目の下にも線を引く、例外を設けていない)。「見本に
   ある値を自分で決め直さない」の指示に反していたため、見本の値どおりに
   戻した(最後の項目にも下線を引く)。 */
.sao-sub-news li { border-bottom: 0; }
.sao-sub-news a {
  /* 指摘187■11(2026-09-05): 文字サイズを15px→16pxに。他の一覧の行
     (ライブラリー・お知らせ・大会情報・イベント・合格者・バッジテスト・
      本文のリンク行)がすべて16pxで、ここだけ15pxだった。 */
  font-size: 16px;
  display: grid; grid-template-columns: 96px 1fr auto; gap: 16px; align-items: baseline;
  padding: 14px 16px; background: #fff; border: 0; border-radius: var(--sao-radius-row); box-shadow: var(--sao-shadow-row); text-decoration: none !important; color: inherit;
  transition: background .18s, padding .18s, outline 0s;
}
/* 指摘187■5(2026-09-05): 左余白が増える動き(padding-left)をやめ、
   背景色だけにした。文字が動くと狙ったリンクを押しにくくなるため。
   見本 .row:hover も「面ではなく線と矢印」で、余白は動かしていない。 */
.sao-sub-news a:hover { background: var(--sao-sub-ice); }
.sao-sub-news a:focus-visible { outline: 2px solid var(--sao-sub-blue); outline-offset: -2px; }
.sao-sub-news-d {
  font-size: 16px; color: var(--sao-sub-muted); letter-spacing: .04em; font-variant-numeric: tabular-nums;
}
.sao-sub-news-t { font-size: 14.5px; font-weight: 700; line-height: 1.6; color: var(--sao-sub-ink); }
.sao-sub-news a:hover .sao-sub-news-t { color: var(--sao-sub-blue); }
/* 指摘213■1(2026-09-15): この「›」の色を --sao-sub-line(#DFE7EE、白地1.25:1)から
   --sao-sub-muted(#5E7183、白地5.04:1)へ。飾りとしてもほとんど見えていなかったため。
   **--sao-sub-line そのものは変えていない**(枠線として118箇所で使っている)。
   ★一覧の矢印(.sao-sub-*-arrow)の #0B5A9E とは濃さが違うが、これで正しい(連盟判断)。
     一覧の矢印 = 「その行の先に進む」印。
     カード・行の「›」 = 「このカード(行)全体がリンクである」ことの控えめな印。
     役割が違うので、同じ濃さにしない。 */
.sao-sub-news-ch { color: var(--sao-sub-muted); font-size: 16px; }
/* ホバー時のvar(--sao-sub-sky)(白地2.90:1)は意図的に対応しない。行全体の
   背景色・タイトル文字色も同時に変わるため、この矢印アイコンが唯一の
   ホバー識別手段ではない(指摘107■6と同じ考え方)。 */
.sao-sub-news a:hover .sao-sub-news-ch { color: var(--sao-sub-sky); }
@media (max-width: 560px) {
  .sao-sub-news a { grid-template-columns: 1fr auto; gap: 2px 12px; }
  .sao-sub-news-d { grid-column: 1 / -1; }
}

/* 「お知らせ一覧へ」テキストリンク(差分d)。見本の.more相当。 */
.sao-sub-news-more {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 16px;
  font-size: 17px; font-weight: 700; color: var(--sao-sub-blue); text-decoration: none;
}
.sao-sub-news-more span { transition: transform .18s; }
.sao-sub-news-more:hover span { transform: translateX(4px); }
.sao-sub-news-more:focus-visible { outline: 2px solid var(--sao-sub-blue); outline-offset: 2px; }

/* 「お問合せ」帯(差分e)。見本design/skioita-navmenu-contact-v1.html
   (指摘157■1)の.cbox相当。
   指摘130■4(2026-08-30): ボタンは.sao-btn-ctaから.cbtn(design/
   skioita-renewal-final.html 見本2、サイト全体共通部品)に置き換えた。
   .cbtn自体のCSSはcss/sao-buttons.css(Custom CSS & JSプラグイン管理)側。
   指摘157■1(2026-08-31): 「枠は横に長いのに両脇に部名とボタンがあって
   おかしい」との指摘に対応。justify-content:space-betweenをやめ、
   見本の.cbox(.tx{flex:1}でテキスト側が残り幅を占め、ボタンは
   flex:noneで自然に右側に来る構成)に合わせた。あわせて見本どおり
   border(--sao-sub-line)を追加し、枠自体の輪郭を明確にした。 */
/* 指摘164■3: 上のtop marginを44px→76pxに(.sao-sub-sec-hdと同じ節間の
   統一、指示の「節の上下間隔を揃える」対象に含めた)。 */
.sao-sub-contact {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  /* 【指摘291】見本 `.a .ask{border-radius:18px;background:var(--sky-10)}`。枠もやめる。
     ★戻し方: background var(--sao-sub-ice)・border 1px solid var(--sao-sub-line)・8px */
  background: var(--sao-sub-sky-10); border: 0;
  border-radius: var(--sao-radius-contact); padding: 24px 24px; margin: 80px 0 0;
}
.sao-sub-contact-tx { flex: 1; min-width: 220px; }
.sao-sub-contact-t { margin: 0; font-size: 14.5px; font-weight: 700; color: var(--sao-sub-navy); }
/* 指摘157■1(2026-08-31): 部門名の下の一行説明(既存の部門カードの
   説明文を流用、新しい文言は作っていない)。 */
.sao-sub-contact-d { margin: 4px 0 0; font-size: 16px; color: var(--sao-sub-muted); }
.sao-sub-contact .cbtn { flex: none; }
/* 指摘157■1(2026-08-31): 640px以下では縦積みにし、ボタンを全幅にする
   (見本の@media(max-width:640px)と同じ)。 */
@media (max-width: 640px) {
  .sao-sub-contact { flex-direction: column; align-items: stretch; text-align: left; }
  .sao-sub-contact .cbtn { width: 100%; }
}

/* 指摘109: 見本(design/skioita-bumon-concept-v1.html).cardに合わせて全面的に
   書き直した。差分b「説明文が途中で切れ、省略記号も無い」を解消するため
   -webkit-line-clampで2行まで表示してから省略する形に変更。あわせて
   カード全体の構造も見本の「縦積み(flex-direction:column)、タイトル行の
   末尾に矢印」という形に合わせた(以前はタイトル+説明を1つのブロックにし、
   矢印をカード全体の右端に別出しする構造だった)。値は見本のリテラル値を
   使用、色は既存トークンに置き換え。 */
.sao-sub-childcards {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 32px 0 8px;
}
.sao-sub-childcard {
  /* 指摘107■6: 通常時の外枠(var(--sao-sub-line)、白地で1.25:1)は意図的に
     対応しない(連盟確認済み、2026-08-27)。カードであることはタイトル・
     矢印アイコン・カード間の余白(グリッドレイアウト)で識別でき、この
     外枠が唯一の識別手段ではないため、WCAG 1.4.11の非対象と判断した。
     ホバー時の枠線(var(--sao-sub-blue)、7.07:1)は指摘107■5で別途対応済み。
     詳細: reports/20260827-instr107.md「■6」。 */
  display: flex; flex-direction: column;
  background: #fff; border: 0; border-radius: var(--sao-radius-card); box-shadow: var(--sao-shadow-card);
  padding: 24px 24px 24px; text-decoration: none !important; color: var(--sao-sub-ink);
  transition: border-color .2s, box-shadow .2s, transform .2s, outline 0s;
}
.sao-sub-childcard:hover {
  /* 指摘107■5: ホバー時の枠線をvar(--sao-sub-sky)(白地で2.90:1、3:1未達)から
     var(--sao-sub-blue)(白地で約6.2:1)に変更。色トークン自体は変更せず、
     この用途で参照するトークンを変えただけ(他箇所への影響なし)。 */
  /* 指摘187■12(2026-09-05): 影の濃さを .09 → .10 に揃えた。
     枠線の --sao-sub-blue は指摘107■5でコントラストのために選ばれた値なので
     変えていない(むしろ他のカードをこちらに揃えた)。 */
  border-color: var(--sao-sub-blue); box-shadow: 0 8px 22px rgba(10,46,77,.10); transform: translateY(-2px);
}
.sao-sub-childcard:focus-visible {
  outline: 2px solid var(--sao-sub-blue); outline-offset: 2px;
}
.sao-sub-childcard-eyebrow {
  /* 見本のリテラル値var(--sky)は9.5px/太字で白地2.90:1、4.5:1未達(実測)。
     指摘106■6から確立しているvar(--sao-sub-blue)(白地7.07:1)を維持。 */
  font-size: 16px; font-weight: 700; letter-spacing: .18em; color: var(--sao-sub-blue);
}
.sao-sub-childcard-title {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 15.5px; font-weight: 700; color: var(--sao-sub-navy); margin: 4px 0 5px; line-height: 1.5;
}
.sao-sub-childcard-arrow {
/* 指摘213■1(2026-09-15): この「›」の色を --sao-sub-line(#DFE7EE、白地1.25:1)から
   --sao-sub-muted(#5E7183、白地5.04:1)へ。飾りとしてもほとんど見えていなかったため。
   **--sao-sub-line そのものは変えていない**(枠線として118箇所で使っている)。
   ★一覧の矢印(.sao-sub-*-arrow)の #0B5A9E とは濃さが違うが、これで正しい(連盟判断)。
     一覧の矢印 = 「その行の先に進む」印。
     カード・行の「›」 = 「このカード(行)全体がリンクである」ことの控えめな印。
     役割が違うので、同じ濃さにしない。 */
  color: var(--sao-sub-muted); font-size: 16px; flex: none; font-style: normal;
  transition: color .2s, transform .2s;
}
.sao-sub-childcard:hover .sao-sub-childcard-arrow { color: var(--sao-sub-blue); transform: translateX(3px); }
.sao-sub-childcard-desc {
  margin: 0; font-size: 16px; color: var(--sao-sub-muted); line-height: 1.7;
  /* 差分b: 2行まで表示し、超える分は省略記号(…)を付けて隠す */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

@media (max-width: 620px) {
  .sao-sub-childcards { grid-template-columns: 1fr; }
}
/* 【指摘291(2026-09-25)】カードの説明文は、ふつうの太さ・--sao-sub-ink
   (見本 `.a .card p{font-weight:400;color:var(--ink)}`)。
   カードは <a> なので、本文のリンクの太字(このファイルの
   `.entry-body a:not(…){font-weight:700}`)を受け継いで太字に見えていた。
   ★戻し方: この規則を消す。 */
.sao-sub-qlcard .sao-sub-qlcard-desc,
.sao-sub-childcard .sao-sub-childcard-desc { font-weight: 400; color: var(--sao-sub-ink); }

/* ============================================
   指摘108■3(2026-08-27改訂・承認待ち): 「一般向け 講習会・検定」の
   リンク一覧を2列グリッドのカード風に見せる。
   【指摘直後の差し戻しを受けて設計変更】当初案は<h3>を<p>に、<ul><li>を
   <div><a>に置き換える案だったが、これは見出し構造・リスト構造(読み上げ
   ソフトが「見出し」「リスト、N項目」と伝える情報)を失わせるとの指摘を
   受け、**タグは一切変更せず、対象の<ul>2つにclass="sao-sub-linklist-grid"
   を追加するだけ**に変更した(詳細判断根拠: reports/20260827-instr108-
   item3-proposal-v2.md)。

   指摘111■3(2026-08-27): 見本design/bumon-mock.htmlの06(.links/.grp>h4)に
   合わせて全面的に書き直した。以前は「枠線カード+ホバーで浮く」という
   見た目だったが、見本は「下に細い罫線が入る行+ホバーで左に少し動く」
   という、より簡素な一覧形式。タグ・文言は無変更、CSSの値だけ見本に
   合わせている(値は見本のリテラル値、色は既存トークンに置換)。 */
body.sao-sub:not(.page-id-322) .entry-body ul.sao-sub-linklist-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px;
  list-style: none !important; margin: 0 0 22px !important; padding: 0 !important;
}
/* 汎用ul/li装飾(丸い行頭記号・インデント等、上のentry-body ul > liルール)を
   打ち消す。上のルールはul:not(A):not(B) > li(::before)という形で
   詳細度がこちら(ul.sao-sub-linklist-grid > li)より高いため、
   !importantで明示的に上書きする。 */
body.sao-sub:not(.page-id-322) .entry-body ul.sao-sub-linklist-grid > li {
  padding-left: 0 !important; margin-bottom: 0 !important;
}
/* 承認後の確認事項(2026-08-27): 項目が1件しかないグループ(例:
   「スノーボード講習会」)は、2列グリッドのままだと左半分だけ埋まった
   中途半端な見た目になっていた(実機確認で発覚)。唯一の子要素のときだけ
   2列分(1/-1)を使って横幅いっぱいに広げる。 */
body.sao-sub:not(.page-id-322) .entry-body ul.sao-sub-linklist-grid > li:only-child {
  grid-column: 1 / -1;
}
body.sao-sub:not(.page-id-322) .entry-body ul.sao-sub-linklist-grid > li::before {
  content: none !important;
}
.sao-sub-linklist-grid > li > a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  background: none; border: none; border-radius: 0;
  border-bottom: 1px solid var(--sao-sub-line);
  padding: 12px 4px; font-size: 14px; font-weight: 700; color: var(--sao-sub-ink) !important;
  text-decoration: none !important; transition: color .18s, padding .18s, outline 0s;
}
.sao-sub-linklist-grid > li > a::after {
  /* 指摘107■6と同じ理由で対応しない(白地1.25→矢印は2.90:1、3:1未達だが
     ホバー限定の装飾で、リンクであることは文字色の変化が伝えている)。 */
  content: ""; flex: none; width: 16px; height: 16px; color: var(--sao-sub-line); /* 指摘315■3: › → 次へ（このサイトのアイコン） */
  background-color: currentColor; -webkit-mask: var(--sao-icm-u-next) center / contain no-repeat; mask: var(--sao-icm-u-next) center / contain no-repeat;
}
.sao-sub-linklist-grid > li > a:hover {
  color: var(--sao-sub-blue) !important; padding-left: 8px;
}
.sao-sub-linklist-grid > li > a:hover::after {
  color: var(--sao-sub-sky);
}
.sao-sub-linklist-grid > li > a:focus-visible {
  outline: 2px solid var(--sao-sub-blue); outline-offset: 2px;
}
/* PDF等ファイルへのリンクである旨を示す小さなバッジ(必要な場合のみ、
   <a>内に<span class="sao-sub-linklist-filetype">PDF</span>を追加して使う。
   現時点では対象リンクにファイルが無いため未使用)。 */
.sao-sub-linklist-filetype {
  flex: none; font-size: 16px; font-weight: 700; letter-spacing: .04em;
  color: #fff; background: var(--sao-sub-muted); border-radius: var(--sao-radius-pill); padding: 2px 10px;
}
@media (max-width: 560px) {
  /* 詳細度をベースルール(body.sao-sub:not(.page-id-322) .entry-body
     ul.sao-sub-linklist-grid)と揃えないと、狭い画面でも2列のまま
     上書きされない(実機検証で発覚・修正)。 */
  body.sao-sub:not(.page-id-322) .entry-body ul.sao-sub-linklist-grid {
    grid-template-columns: 1fr;
  }
}

/* 指摘111■3: 教育部(304)のグループ見出し(h3)を、見本の「小さめの紺文字+
   下に水色の短い線」に合わせる。<h3>タグ・見出しの文言は無変更、CSSの
   見た目だけを変えている。304ページの「一般向け 講習会・検定」〜
   「大会・その他」の節にあるh3は全てこのパターンのため、ページ全体に
   適用しても他の意図と衝突しない(同じ節の他の部分も見た目が揃うように、
   との指示に対応)。既存の汎用entry-body h3ルール(18px・青系・全幅下線)
   より詳細度を上げるため!importantを使用。 */
body.page-id-304.sao-sub .entry-body h3 {
  display: inline-block !important;
  font-size: 16px !important; font-weight: 700 !important; color: var(--sao-sub-navy) !important;
  letter-spacing: .04em; line-height: 1.5;
  padding: 0 0 7px !important; margin: 26px 0 12px !important;
  border-bottom: 2px solid var(--sao-sub-sky) !important;
  background: none !important; border-left: none !important; border-top: none !important;
}

/* ==========================================================
   指摘117■2(2026-08-28): 検索結果・アーカイブ(カテゴリー・タグ・年度・
   部門・その他タクソノミー・日付)・404ページ。
   見本: design/skioita-archive-search-404-v1.html
   色は全て既存の--sao-sub-*トークンを再利用(新規トークン追加なし)。
   chipの種別色(taikai/event/gokakusha/badge/work/page)のみ、見本自身が
   直接指定しているリテラル値をそのまま使う(見本に既に定義されている配色
   であり、新規に考案した色ではないため)。
   ========================================================== */

/* ---------- 検索フォーム(検索結果ページ上部の再掲・404の両方で使用) ---------- */
.sao-sub-sform { display: flex; gap: 0; max-width: 520px; margin: 0 0 30px; }
.sao-sub-sform input {
  flex: 1; min-width: 0; height: 46px; padding: 0 15px; font-size: 15px; font-family: inherit;
  border: 1px solid var(--sao-sub-line); border-right: none; background: #fff; color: var(--sao-sub-ink);
}
.sao-sub-sform input:focus { outline: 2px solid var(--sao-sub-sky); outline-offset: -2px; border-color: var(--sao-sub-sky); }
.sao-sub-sform input::placeholder { color: #9AA9BA; }
.sao-sub-sform button {
  height: 46px; padding: 0 24px; font-size: 14px; font-weight: 700; font-family: inherit;
  border: 1px solid var(--sao-sub-navy); background: var(--sao-sub-navy); color: #fff; cursor: pointer;
  letter-spacing: .06em; transition: background .18s, border-color .18s;
}
.sao-sub-sform button:hover { background: var(--sao-sub-blue); border-color: var(--sao-sub-blue); }

/* ---------- 件数バー ---------- */
.sao-sub-countbar {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; padding-bottom: 14px; margin-bottom: 6px; border-bottom: 2px solid var(--sao-sub-navy);
}
.sao-sub-countbar-n { font-size: 15px; font-weight: 700; color: var(--sao-sub-navy); }
.sao-sub-countbar-n b {
  font-size: 23px; color: var(--sao-sub-blue); font-variant-numeric: tabular-nums;
  margin: 0 3px; letter-spacing: .02em;
}
.sao-sub-countbar-sub { font-size: 16px; color: var(--sao-sub-muted); }

/* ---------- タクソノミー説明文(term_description()、ある場合のみ) ---------- */
/* 指摘388■1-1: 「補足（ふつう）」に(前: ice-2 の地・border-left 3px solid sky・14px)。アイコンは site-icons.css。 */
.sao-sub-termdesc {
  position: relative; background: var(--sao-sub-ice); border-radius: var(--sao-radius-row, 14px);
  padding: 14px 18px 14px 48px; margin: 0 0 26px; font-size: 15px; line-height: 1.75; color: var(--sao-sub-ink);
}
.sao-sub-termdesc p { margin: 0; }

/* ---------- 一覧の行(検索結果・カテゴリー・タグ・年度・部門・日付、全て共通) ---------- */
.sao-sub-rows { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--sao-sub-line); }
.sao-sub-rows li { border-top: 1px solid var(--sao-sub-line); }
.sao-sub-rows li:first-child { border-top: none; }
.sao-sub-rows a {
  display: grid; grid-template-columns: 112px 128px 1fr auto; gap: 0 18px; align-items: baseline; /* 【2026-10-18】札（バッジテスト・講習会・検定）が 88px に入らず題名に重なっていた。日付は会期「2026.03.04～」が入る幅に */
  padding: 16px 6px; text-decoration: none !important; transition: background .18s, padding .18s;
}
.sao-sub-rows a:hover { background: var(--sao-sub-ice-2); padding-left: 12px; }
.sao-sub-rows-d { font-size: 16px; color: var(--sao-sub-muted); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.sao-sub-rows-t { font-size: 15px; font-weight: 700; line-height: 1.62; color: var(--sao-sub-ink); }
.sao-sub-rows a:hover .sao-sub-rows-t { color: var(--sao-sub-blue); }
.sao-sub-rows-x {
  grid-column: 3; font-size: 16px; color: var(--sao-sub-muted); line-height: 1.75; margin-top: 4px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* 指摘117■2 検証: このシェブロン(›)は白地で1.25:1(基準3:1〈非テキストUI〉
   または4.5:1〈テキスト扱い〉のどちらでも不合格)。ただし行全体が<a>で
   すでにクリック可能・タイトル文字列が操作内容を明示しており、この記号
   自体は装飾・冗長な補助表示で独自の情報を持たない(見えなくても内容の
   理解に支障がない)ため、見本どおり薄い配色のまま据え置く判断とした
   (404の"404"数字を意図的に薄くしている扱いと同じ考え方)。 */
.sao-sub-rows-ch { color: var(--sao-sub-line); font-size: 16px; align-self: center; }
.sao-sub-rows a:hover .sao-sub-rows-ch { color: var(--sao-sub-sky); }

/* 種別チップ。枠線+淡い背景のみ、ベタ塗りにしない(見本の指示どおり)。 */
.sao-sub-chip {
  display: inline-block; font-size: 16px; font-weight: 700; letter-spacing: .06em;
  line-height: 1.7; padding: 1px 9px; border-radius: var(--sao-radius-pill); white-space: nowrap;
  border: 1px solid var(--sao-sub-line); color: var(--sao-sub-muted); background: #fff;
}
/* 指摘214(2026-09-16)で統一した。元の色は次のとおり:
     -taikai    border #9CC4E4 / color #0B5A9E / bg #F2F8FC
     -event     border #A8CFC0 / color #1B6B54 / bg #F2FAF7
     -gokakusha border #CBB9DC / color #5B3D7A / bg #F8F4FB
     -badge     border #E0C79B / color #8A6220 / bg #FDF8EE
     -work      border #C9D2DC / color #44586E / bg #F6F8FA
     -page      border #C9D2DC / color #44586E / bg #F6F8FA
   6つとも検索結果の「中身の種類」なので、style.css の「分類の札」に一本化。
   ★-event(#1B6B54) と 教育部(#1E7A5E) は色相差1°で見分けが付かず、
     -badge(#8A6220) は同じ「バッジテスト」を指す別の札(#14708F)と色が違っていた。 */

@media (max-width: 720px) {
  .sao-sub-rows a { grid-template-columns: 1fr auto; gap: 3px 12px; padding: 15px 4px; }
  .sao-sub-rows-d { grid-row: 1; grid-column: 1; }
  .sao-sub-rows-c { grid-row: 1; grid-column: 1; justify-self: end; margin-right: 8px; }
  .sao-sub-rows-t { grid-row: 2; grid-column: 1 / -1; }
  .sao-sub-rows-x { grid-row: 3; grid-column: 1 / -1; }
  .sao-sub-rows-ch { grid-row: 2; grid-column: 2; align-self: baseline; }
}

/* ---------- ページネーション(指摘117■2 修正1: 自前描画をやめ、
   WordPress標準the_posts_pagination()の実クラスにCSSを当てる。
   .sao-sub-topiclist-pager(指摘32、TOPIC一覧)と同じ流儀。
   指摘119■2: <nav>要素自体には既定の'pagination'クラス(margin-top:2remを
   含む)が付かなくなった(sanitize_html_class()の仕様上、クラス名は1個しか
   渡せないため)。<nav>自体の上余白をここで明示する。 ---------- */
/* 指摘144■1(2026-08-31): 見本design/skioita-list-article-v1.html の.pagerに
   合わせて配色・寸法を作り直した。paginate_links()自体の呼び出し
   (archive-search-404-display.phpの`lightning_pagenation_array`フィルター、
   type='plain'・class='sao-sub-archive-pager')は一切変更していない、
   CSSだけで見た目を変えている。変更前後でHTML構造(nav>.nav-links>
   .page-numbers/.current/.dots/.prev/.next)が同一であることを確認済み。 */
/* 指摘210■1(2026-09-14): 上の余白だけが見本と食い違っていたので直した。
   見本 design/skioita-list-article-v1.html の .pager は `margin:30px 0 0`、
   こちらは `margin-top:18px` だった(実測でも一覧の下端との間隔が18px)。
   角丸6px・中央寄せ・寸法38x38・配色は**もともと見本どおり**で、
   直したのはこの1行だけ。
   ※ 見本が2つあり値が違う: design/skioita-archive-search-404-v1.html の
     .pager は `margin:34px 0 0`(さらに角丸の指定が無く40x40・太さ700)。
     指摘144■1 が list-article-v1 を見本として採用しているので、
     こちらに揃えている。 */
.sao-sub-archive-pager { margin-top: 30px; }
.sao-sub-archive-pager .nav-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; }
.sao-sub-archive-pager .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; height: 38px; padding: 0 10px; font-size: 14px; font-weight: 700;
  color: var(--sao-sub-muted); background: #fff; border: 1px solid var(--sao-sub-line);
  border-radius: 4px; text-decoration: none !important; line-height: 1;
  transition: color .2s, border-color .2s, background .2s, outline 0s;
}
.sao-sub-archive-pager .page-numbers:hover { color: var(--sao-sub-blue); border-color: var(--sao-sub-sky); background: var(--sao-sub-snow); }
/* 現在ページだけ濃紺で塗る(--sao-sub-blueではなく--sao-sub-navy)。 */
.sao-sub-archive-pager .page-numbers.current { color: #fff; background: var(--sao-sub-navy); border-color: var(--sao-sub-navy); }
.sao-sub-archive-pager .page-numbers.dots { border: none; background: none; color: var(--sao-sub-muted); min-width: auto; padding: 0 2px; }
/* 前へ／次へ: paginate_links()自体の出力(«/»のみ)は変えず、CSSの
   生成コンテンツ(::before/::after)で「前へ」「次へ」の文字を追加する。
   前後関係を分かりやすくするためpaddingも少し広げる。 */
.sao-sub-archive-pager .page-numbers.prev,
.sao-sub-archive-pager .page-numbers.next { padding: 0 16px; gap: 6px; }
.sao-sub-archive-pager .page-numbers.prev::after { content: "前へ"; }
.sao-sub-archive-pager .page-numbers.next::before { content: "次へ"; }

/* ---------- 0件時の案内(main-section-no-postsを直接スタイルする。
   指摘117■2 修正2: <p>の中身はプレーンな文言のみのため、新しいdivは
   注入せず、親テーマの既存マークアップにCSSを当てるだけにする。
   指摘119■3で検索・カテゴリー・タグ・タクソノミー・日付アーカイブは
   全て.sao-sub-list-emptyクラス経由で非表示化されたため、ここに残る
   対象はtaikai/event/gokakusha/badge_test専用アーカイブが万一0件に
   なった場合(スコープ外、Lightning既定メッセージのまま)のみ。 ---------- */
body.sao-sub .main-section-no-posts {
  border: 1px solid var(--sao-sub-line); background: var(--sao-sub-ice-2); padding: 30px 26px; margin: 0 0 30px;
}
body.sao-sub .main-section-no-posts p { margin: 0; font-size: 14px; line-height: 1.9; color: var(--sao-sub-ink); }

/* ---------- 指摘118■3: 検索0件時は.main-section-no-posts自体を非表示にする。
   見出し<h2>+段落<p>+箇条書き<ul>の構造化された案内文(.sao-sub-empty)は
   <p>の制約を受けない場所(lightning_loop_after)に別途描画するため、空になった
   既定の枠(<p></p>だけの空箱)は余白として残らないよう消す。 ---------- */
body.sao-sub-list-empty .main-section-no-posts { display: none; }

/* ---------- 検索0件時の案内(.sao-sub-empty、見本2どおり見出し+段落+箇条書き) ---------- */
.sao-sub-empty { border: 1px solid var(--sao-sub-line); background: var(--sao-sub-ice-2); padding: 24px 24px; margin: 0 0 30px; }
/* 指摘119■2: Lightning既定の`.entry-title--post-type--page, h2:where(...)`が
   border-top(太い青)・border-bottom(細い灰)・padding:.5em 0を全<h2>に
   既定で当てている(見本2の.empty h2には無い線)。明示的に打ち消す。 */
.sao-sub-empty h2 { margin: 0 0 10px; padding: 0; border-top: none; border-bottom: none; font-size: 17px; color: var(--sao-sub-navy); }
.sao-sub-empty p { margin: 0 0 6px; font-size: 14px; line-height: 1.9; color: var(--sao-sub-ink); }
.sao-sub-empty ul { margin: 10px 0 0; padding-left: 1.3em; font-size: 16px; color: var(--sao-sub-muted); line-height: 1.95; }
/* 指摘119■2: Lightning既定の`li{margin-top:.5em;margin-bottom:.5em}`が
   箇条書きの各項目に余分な縦間隔を加えていたため、見本2どおりの詰まった
   行間(line-height頼み)に戻す。 */
.sao-sub-empty li { margin: 0; }

/* ---------- 行き先カード(検索0件時・404の両方で使用) ---------- */
.sao-sub-dest { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 40px 0 0; }
@media (max-width: 720px) { .sao-sub-dest { grid-template-columns: 1fr; } }
.sao-sub-dest a {
  display: block; text-decoration: none !important; border: 1px solid var(--sao-sub-line); background: #fff;
  padding: 17px 19px; transition: border-color .18s, background .18s, transform .18s;
}
.sao-sub-dest a:hover { border-color: var(--sao-sub-sky); background: var(--sao-sub-ice-2); transform: translateY(-1px); }
/* 指摘117■2 検証: 見本どおり--skyで実装したところ、白背景上でコントラスト比
   2.90:1(基準4.5:1、10px太字)となり不合格と判明。新規トークンは追加せず、
   既存の--sao-sub-blue(白地で7.07:1、他の項目〈countbar数字・chipのtaikai等〉
   でも使用済み)に差し替えて解消した(qa-tools/contrast_check.pyで確認)。 */
.sao-sub-dest-e { display: block; font-size: 16px; letter-spacing: .18em; color: var(--sao-sub-blue); font-weight: 700; }
.sao-sub-dest-t { display: block; margin: 4px 0 0; font-size: 15.5px; font-weight: 700; color: var(--sao-sub-navy); }
.sao-sub-dest-x { display: block; margin: 5px 0 0; font-size: 16px; color: var(--sao-sub-muted); line-height: 1.7; }

/* ---------- 404 ---------- */
.sao-sub-nf { padding: 56px 0 20px; text-align: center; }
.sao-sub-nf-code {
  font-size: 64px; font-weight: 700; color: var(--sao-sub-ice); line-height: 1; letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
}
.sao-sub-nf h1 { margin: 14px 0 0; font-size: 25px; color: var(--sao-sub-navy); letter-spacing: .02em; }
.sao-sub-nf p { margin: 14px auto 0; max-width: 44em; font-size: 14.5px; line-height: 1.95; color: var(--sao-sub-ink); }
.sao-sub-nf .sao-sub-sform { margin: 30px auto 0; }
@media (max-width: 560px) {
  .sao-sub-nf { padding: 40px 0 12px; }
  .sao-sub-nf-code { font-size: 48px; }
  .sao-sub-nf h1 { font-size: 20px; }
}

/* ==========================================================
   指摘126(2026-08-29): 教育部(304)リンク集(見本06 design/bumon-mock.html
   の.grp/.links/.lt/.ls/.ch/.pdfに対応)。マークアップは
   sub-page-shortcodes.phpの[skioita_linkrow]・[skioita_dl variant="row"]
   が出力する。色は全て既存の--sao-sub-*トークンを再利用(新規トークン
   追加なし)。.pdfバッジのみ、見本のリテラル値(--sand:#B0710E、白地で
   4.03:1と実測でWCAG AA〈4.5:1〉を割り込むことを確認)ではなく、
   既に検証済みの.sao-sub-chip-badge(指摘117■2)と同じ配色を再利用した
   (白地で5.15:1、合格)。
   ========================================================== */
.sao-sub-lg { margin-top: 22px; }
.sao-sub-lg:first-child { margin-top: 0; }
/* 指摘126 検証: Lightning既定の`h4:where(:not(.wp-block-post-title))`が
   全<h4>にpadding:.5em(4辺)・background-color・border-radius(灰色の
   角丸ピル)を当てていた(CSS.getMatchedStylesForNodeで確認)。
   padding-bottomのみ上書きしていたため他3辺のpaddingと背景・角丸が
   Lightning側のまま残っていた。明示的に打ち消す。 */
/* 指摘180■3(2026-09-03): 13pxは本文(14px)より小さく見出しとして弱かったため、
   ライブラリーの小分類見出し(.sao-sub-library-subhead、library.css)と
   同じ指定に揃えた。数値は同CSSから読み取ったもの(font-size:15.5px /
   font-weight:800 / color:var(--sao-sub-navy) / padding-bottom:8px /
   border-bottom:1px solid var(--sao-sub-line) / margin:0 0 12px)。
   letter-spacingは参照先に指定が無いため外し、下線が見出し幅いっぱいに
   なるよう display:inline-block → block にした(参照先はflexで全幅)。
   コントラストは #0A2E4D on #FFF = 13.90:1(15.5px/800 の基準4.5:1、合格)。 */
/* 指摘187■3(2026-09-05): 指摘180■3で「ライブラリーの小分類見出しと
   同じにする」として 15.5px に合わせたが、**画面上は揃っていなかった**。
   ライブラリー側(.sao-sub-library-subhead)はCSSに15.5pxと書かれているのに、
   body.sao-sub:not(.page-id-322) .entry-body h3(0,3,2)が
   .sao-sub-library-subhead(0,1,0)に詳細度で勝ち、**実際は18pxで描画**
   されていた(指摘186■0の棚卸しで発覚)。

   このとき私は .sao-sub-lg > h4 側の描画しか測らず、CSSに書かれた値どうしを
   比べて「揃った」と判断していた。今回は**両側の描画結果を測って**
   ライブラリー側の実測値(18px / 800 / rgb(10,79,138) / 下線1px
   rgb(223,231,238) / padding-bottom 8px)に合わせている。 */
.sao-sub-lg > h4 {
  margin: 0 0 12px; font-size: 18px; font-weight: 700; color: var(--sao-sub-blue-d);
  padding: 0 0 8px 0; background: none; border-radius: 0;
  border-bottom: 1px solid var(--sao-sub-line); display: block;
}
.sao-sub-linkrows { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; }
/* 指摘180■3(2026-09-03): wpautopがブロック内の改行に挿入する<br />が
   グリッドの子要素として1マスを占有し、リンクが右列に押し出されたり
   (5174「講習会（エキスパート）」)、左列だけに縦積みになったり
   (同「要項・申込書」)していた。実際のDOMをCDPで確認して特定。
   <br />自体はwpautopが出すもので本文には書かれていないため、
   表示から外す。 */
.sao-sub-linkrows > br { display: none; }
@media (max-width: 700px) { .sao-sub-linkrows { grid-template-columns: 1fr; } }
/* 指摘127■1: 項目が1件しかないグループ(スノーボード講習会・指導者研修会・
   教程本購入)は、2列グリッドのままだと左半分だけ埋まった中途半端な見た目に
   なっていた。指摘113の.sao-sub-linklist-grid > li:only-childと同じ考え方で、
   唯一の子要素のときだけ2列分(1/-1)を使って横幅いっぱいに広げる。
   指摘180■3(2026-09-03): 上の<br />が同居すると:only-childが成立せず
   全幅化が効かなかったため、:only-of-type(=<a>の子が1つだけ)に変えた。
   <br />が無い場合は:only-childと同じ集合になるため、既存の表示は変わらない。 */
.sao-sub-linkrows > .sao-sub-linkrow:only-of-type { grid-column: 1 / -1; }
.sao-sub-linkrow {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 12px 4px; border-bottom: 1px solid var(--sao-sub-line);
  text-decoration: none !important; color: var(--sao-sub-ink); transition: color .18s, padding .18s;
}
/* 指摘187■5(2026-09-05): 左余白が増える動きをやめ、背景色に置き換えた
   (他の一覧の行と同じ反応にする)。文字色が青になる部分は見本の
   .row:hover .t と同じなので残す。 */
.sao-sub-linkrow:hover { color: var(--sao-sub-blue); background: var(--sao-sub-ice); }
.sao-sub-linkrow-lt { font-size: 14px; font-weight: 700; line-height: 1.5; }
.sao-sub-linkrow-ls { display: block; font-size: 16px; color: var(--sao-sub-muted); font-weight: 400; margin-top: 1px; }
.sao-sub-linkrow-ch { color: var(--sao-sub-line); font-size: 16px; flex: none; }
.sao-sub-linkrow:hover .sao-sub-linkrow-ch { color: var(--sao-sub-sky); }
.sao-sub-linkrow-pdf {
  font-size: 16px; letter-spacing: .08em; font-weight: 700;
  color: #8A6220; border: 1px solid #E0C79B; background: #FDF8EE;
  border-radius: var(--sao-radius-pill); padding: 1px 9px; margin-left: 7px; vertical-align: 1px;
}
/* 指摘142■2(2026-08-31): [skioita_event_taishousha_group]の該当0件表示。
   .sao-sub-linkrow-lsと同じ配色(muted)、枠線・塗りつぶしは使わない。 */
.sao-sub-lg-empty { font-size: 16px; color: var(--sao-sub-muted); margin: 0; padding: 4px 0; }

/* ============================================================
   指摘132■1(2026-08-30): 部門ページへの新デザイン展開
   ============================================================ */

/* ---------- スクロールで浮き上がる動き(reveal、1回だけ) ----------
   design/skioita-renewal-final.htmlの.reveal/.onと同じ考え方。TOPページの
   .sao-top-rv/.sao-top-onと同じ実装パターン(IntersectionObserverで1回だけ
   .sao-sub-reveal-onを付与、以降は監視を止める)。対象はPHP側(dept-child-
   cards-display.php・dept-news-contact-display.php)でPAGES見出し・
   お問合せ帯に付与する(部門TOPページで実際に生成している範囲)。 */
.sao-sub-reveal { opacity: 0; transform: translateY(24px); transition: opacity .75s ease, transform .75s ease; }
.sao-sub-reveal.sao-sub-reveal-on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .sao-sub-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------- 灰色塗りつぶしボタンの全廃(見本3、部門TOPページ限定) ----------
   指摘145■1(2026-08-31)で削除。.sao-btn-nav自体をサイト全体で見本の
   副ボタン(.btn-s、白地・濃紺枠、ホバーで濃紺塗り)に統一したため、
   この3ページ限定の上書きは不要になった。
   【削除前に確認した事実】この上書きは削除前の時点で既に視覚的な効果を
   持っていなかった(死んだコード)。180/304/306のpost_content内にある
   唯一の.sao-btn-navボタン(「お知らせ一覧へ」相当)は、
   dept-news-contact-display.phpのthe_contentフィルターにより表示直前に
   テキストリンク(.sao-sub-news-more)へ差し替えられており、実機の
   レンダリング結果に.sao-btn-nav要素は1つも出力されていなかった
   (詳細: reports/20260831-instr145-item1-proposal.md)。そのため削除は
   3ページの見た目に一切影響しない。 */

/* ============================================================
   指摘164■5 手法11(2026-09-01): 吸着ナビ(TOC、見本の.toc)
   ============================================================
   見本design/skioita-sub-premium-v2.htmlの.toc/.toc-in/.bar相当。
   クラス名はこのファイルの命名規則に合わせsao-sub-toc/-in/-barに変更、
   値は見本のリテラル値をそのまま使用。
   実機確認で判明: サブページの#site-headerは読み込み直後こそposition:
   relativeだが、親テーマの「スクロールでヘッダーが縮んでposition:fixedに
   なる」機能(lightningOpt.header_scroll、Lightning本体のmain.js)が
   サブページにも効いており、ある程度スクロールするとheader_scrolledクラス
   が付いてposition:fixed(高さ約48px)に変わる。当初「top:0で重ならない」
   と判断したのはスクロール前の状態しか確認していなかったための誤りで、
   実際にはtop:0のままだとヘッダーと重なることが分かった。そのためtopは
   固定値にせず、JS(sub-page-toc.js)がヘッダーの現在の下端を毎回実測して
   設定する(下記の「吸着(sticky)の実装について」参照)。
   幅は見本のmax-width:1000pxを使わず、親要素(.entry-body、2カラムレイアウト
   の本文カラム自身)の幅にそのまま追従させている(見本はサイドバーの無い
   単一カラム前提のため独自のmax-widthを持つが、実際のページは常時
   右カラム(TOPIC欄・バナー)を伴うため、本文カラムの外まで広げると
   ■3・■4と同じ理由でサイドバーとの整合が崩れる)。

   【重要、実機検証で発見】CSSのposition:stickyは、親テーマ(Lightning)の
   html{overflow-x:hidden}(横スクロール防止のためのサイト全体共通ルール、
   assets/css/style.css。CSS仕様により、overflow-xがvisible以外だと
   overflow-yも自動的にautoへ計算され、その結果position:stickyの吸着が
   機能しなくなるブラウザの既知の挙動)の影響で実際には効かないことが
   判明した(htmlのoverflowを一時的にvisibleへ戻すと正常に動作することを
   確認し、原因を特定した)。html側のルールは横スクロールバー防止という
   このプロジェクトで繰り返し課題になってきた重要な役割を持つため変更せず、
   代わりにJS(sub-page-toc.js)でスクロール位置を監視し、吸着すべき地点を
   過ぎたら.sao-sub-toc-is-fixedを付与してposition:fixedへ切り替える方式
   (フォールバック実装)にした。left/width/topはJSが実測して直接インライン
   スタイルで設定する(固定後も本文カラムの幅・位置に追従させるため)。 */
.sao-sub-toc {
  z-index: 5;
  background: rgba(255,255,255,.94);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--sao-sub-line);
}
.sao-sub-toc.sao-sub-toc-is-fixed { position: fixed; }
/* 固定化された瞬間にTOCが本来占めていた高さ分だけ本文が詰まらないよう、
   同じ高さのスペーサーを表示する(JSがheightを設定する)。 */
.sao-sub-toc-spacer { display: block; height: 0; }
.sao-sub-toc-in { position: relative; }
.sao-sub-toc ul {
  display: flex; list-style: none !important; margin: 0 !important; padding: 0 !important;
  /* 指摘165■1(2026-09-01): 見出し7つ(304)がそのままでは本文カラム幅
     (約764px)に収まらず右端が単語の途中で切れていたため、gapを28px→20px、
     font-sizeを13.5px→13px(下記.sao-sub-toc a)に詰めて収まる可能性を
     上げた(見本のリテラル値から変更、承認済み)。 */
  gap: 20px;
  /* 375px等の狭い幅でリンクがはみ出す場合は折り返さず横スクロールさせる
     (指示どおり)。項目数に関わらず常に有効にしておけば、はみ出さない
     幅ではスクロールバー自体が現れないため、個別のメディアクエリで
     幅を決め打ちする必要が無い。 */
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  /* 指摘165■1: 線(.sao-sub-toc-bar)をこの中に置くための基準。 */
  position: relative;
}
/* 汎用ul/li装飾(丸い行頭記号、上の「entry-body ul > li」ルール、
   .sao-sub-linklist-gridと同じ理由)を打ち消す。実機確認で発見:
   list-style:noneを指定していても、汎用ルールの::before(丸い行頭記号)は
   別プロパティのため消えず、TOCのリンクの左に無関係な水色の点が
   表示されていた。 */
body.sao-sub:not(.page-id-322) .sao-sub-toc ul {
  list-style: none !important; padding-left: 0 !important;
}
body.sao-sub:not(.page-id-322) .sao-sub-toc ul > li {
  padding-left: 0 !important; margin-bottom: 0 !important;
}
body.sao-sub:not(.page-id-322) .sao-sub-toc ul > li::before {
  content: none !important;
}
/* 指摘166■4(2026-09-02): 本文内リンクの一括指定
   (body.sao-sub:not(.page-id-322) .entry-body a:not(...):not(...):not(...):not(...)、
   :not()を4つ持つため詳細度(0,7,2)と非常に高い)に、下の.sao-sub-toc a
   (当初クラス1つ、詳細度(0,1,1))が負けていた。実測したところ現在地(on)
   もそれ以外も全て一括指定側の色(#0B5A9E)になっており、下線も
   付いてしまっていた(一括指定はcolor・text-decorationの両方を
   設定するため)。TOCはthe_contentフィルターで挿入されるため.entry-body
   の中にあり、この一括指定の対象になる。祖先セレクタを足して
   (body.sao-sub .entry-body .sao-sub-toc a、詳細度(0,3,2))試したが、
   まだ届かなかったため(0,7,2)を超えるには!importantが必要と判断した
   (このファイル内で.sao-sub-toc ul等、同種の詳細度勝負に!importantを
   使っている既存の書き方と揃えている)。 */
body.sao-sub .entry-body .sao-sub-toc a {
  display: block; padding: 15px 0; font-size: 16px; font-weight: 700;
  /* --sao-sub-muted(#5E7183)は白地で5.04:1、WCAG AA(4.5:1)を実測で
     満たすため見本のままの色を採用した(qa-tools/contrast_check.pyで確認)。
     指摘165■1: font-sizeは見本の13.5pxから13pxへ(承認済み、上記gapと
     同じ理由)。 */
  color: var(--sao-sub-muted) !important; text-decoration: none !important; white-space: nowrap;
  transition: color .2s, outline 0s;
}
body.sao-sub .entry-body .sao-sub-toc a.on,
body.sao-sub .entry-body .sao-sub-toc a:hover { color: var(--sao-sub-navy) !important; }
body.sao-sub .entry-body .sao-sub-toc a:focus-visible { outline: 2px solid var(--sao-sub-blue); outline-offset: 2px; }
.sao-sub-toc-bar {
  position: absolute; bottom: 0; height: 2px; background: var(--sao-sub-sun);
  transition: left .3s ease, width .3s ease;
}
@media (prefers-reduced-motion: reduce) {
  /* 位置(left/width)自体はJSが更新し続けるが、滑らかに動かす演出だけを止める。 */
  .sao-sub-toc-bar { transition: none; }
}
/* 指摘165■1(2026-09-01): 右端(・スクロール済みなら左端も)が切れている
   ことを見せるグラデーション。.sao-sub-toc(rgba(255,255,255,.94))と
   同じ色から透明までのグラデーションにして、境目が目立たないようにした。
   スクロールする箱(ul)の外側に置き、フェード自体はスクロールしない。
   pointer-events:noneでクリックを妨げない。表示/非表示(is-visible)は
   JS(sub-page-toc.js)がスクロール位置に応じて切り替える。 */
.sao-sub-toc-fade {
  position: absolute; top: 0; bottom: 0; width: 32px; pointer-events: none;
  opacity: 0; transition: opacity .2s;
  /* 指摘166■6(2026-09-02): フェードの中に山括弧(‹/›)の文字自体を重ねる。
     フェードがopacity:0の間は山括弧も一緒に見えなくなるため、
     .is-visibleの切り替えに追加のJSを書かずに相乗りできる。 */
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700; color: var(--sao-sub-muted);
}
.sao-sub-toc-fade.is-visible { opacity: 1; }
.sao-sub-toc-fade-l { left: 0; background: linear-gradient(to right, rgba(255,255,255,.94), rgba(255,255,255,0)); }
.sao-sub-toc-fade-r { right: 0; background: linear-gradient(to left, rgba(255,255,255,.94), rgba(255,255,255,0)); }
@media (prefers-reduced-motion: reduce) {
  .sao-sub-toc-fade { transition: none; }
}

/* ============================================================
   技術選手権ページ(5177)の「位のはしご」
   指摘181■3(2026-09-03)。見本 design/skioita-gisen-v1.html の
   .ladder / .step / .dot / .card / .meta / .go / .pend / .updown を
   そのまま移したもの。**数値・色はすべて見本のリテラル値**で、
   こちらで決め直した値は無い。色は既存トークンのみ(新しい色は無し)。

   見本 → 実装 のトークン対応(値はいずれも完全一致):
     --navy    #0A2E4D → var(--sao-sub-navy)
     --blue    #0B5A9E → var(--sao-sub-blue)
     --sky     #4A9FD8 → var(--sao-sub-sky)
     --ice-txt #B9DEF7 → var(--sao-sub-ice-txt)
     --ink     #16202B → var(--sao-sub-ink)
     --muted   #5E7183 → var(--sao-sub-muted)
     --line    #DFE7EE → var(--sao-sub-line)
     --amber   #B45309 → var(--sao-sub-amber)

   【`.sao-sub-gisen-wrap` で包んでいる理由】このページの本文には
   既存の汎用ルールが効いており、素のクラス名だけでは詳細度で負ける。
   実測(CDPのcomputed style)で次の2つに負けていることを確認した:
     body.sao-sub:not(.page-id-322) .entry-body h3  (0,3,2)
       → 見出しが18px・#0A4F8A・下線付きになる(紺カードでも白にならない)
     body.sao-sub:not(.page-id-322) .entry-body p   (0,3,2)
       → .sao-sub-gisen-meta が15.5pxになり、中の<b>「未定」も15.5pxになる
   `body.sao-sub .entry-body .sao-sub-gisen-wrap` を前置すると
   クラスが1つ多い(0,4,x)ため確実に勝つ。見た目そのものは見本のままで、
   包み自体には装飾を付けていない。
   ============================================================ */
body.sao-sub .entry-body .sao-sub-gisen-wrap .sao-sub-gisen { list-style: none; margin: 0; padding: 0; position: relative; }
/* 縦の連結線。最後の段の下に線が余らないよう、段と段の「間」だけに引く。 */
/* 指摘189■3(No.34、2026-09-06): 番号の丸(64px)をやめ、縦線の起点になる
   小さい点(14px)に変えたことに伴い、線の left と top を点の中心に合わせ直した。
   計算: 段のグリッドは grid-template-columns: 64px 1fr のまま(カードの左端の
   位置を変えないため)。点は 64px の枠の中で左寄せ(margin-left:0)、直径14px
   なので中心は x=7px。線の幅が2pxなので left = 7 - 1 = 6px。
   top は点の中心(点の上端 25px + 半径7px = 32px)…ではなく、点の下端
   (25+14=39px)から線を始めると点と線が重ならない。bottom は次の段の点の
   上端まで伸ばす(-52px は従来と同じ、段の padding-bottom 20px + 次の段の
   点の上端までの距離)。 */
body.sao-sub .entry-body .sao-sub-gisen-wrap .sao-sub-gisen-step:not(:last-child)::before {
  content: ""; position: absolute; left: 6px; top: 39px; bottom: -52px; width: 2px;
  background: linear-gradient(180deg, var(--sao-sub-line), var(--sao-sub-sky)); border-radius: 2px;
}
body.sao-sub .entry-body .sao-sub-gisen-wrap .sao-sub-gisen-step {
  position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 0 20px;
  padding: 0 0 20px; margin: 0; font-size: inherit;
}
body.sao-sub .entry-body .sao-sub-gisen-wrap .sao-sub-gisen-step:last-child { padding-bottom: 0; }
body.sao-sub .entry-body .sao-sub-gisen-wrap .sao-sub-gisen-dot { position: relative; z-index: 2; width: 64px; }
/* 指摘189■3: 番号を入れる64pxの丸から、線の起点になる14pxの点に変更。
   中身の文字は無くなったので font 関連の指定も外した。 */
body.sao-sub .entry-body .sao-sub-gisen-wrap .sao-sub-gisen-dot i {
  display: block; width: 14px; height: 14px; border-radius: 50%;
  background: #fff; border: 2px solid var(--sao-sub-sky); font-style: normal;
  margin-top: 25px;
}
body.sao-sub .entry-body .sao-sub-gisen-wrap .sao-sub-gisen-card {
  background: #fff; border: 1px solid var(--sao-sub-line); border-radius: 8px; padding: 24px 24px 24px;
  transition: border-color .22s, box-shadow .22s, transform .22s, outline 0s;
}
body.sao-sub .entry-body .sao-sub-gisen-wrap .sao-sub-gisen-card:hover {
  border-color: var(--sao-sub-sky); box-shadow: 0 8px 22px rgba(10,46,77,.10); transform: translateY(-2px);
}
/* border-bottom / padding-bottom は、上記の汎用 .entry-body h3 が付ける
   下線と余白を打ち消すためのもの(見本の .card h3 には下線が無い)。 */
body.sao-sub .entry-body .sao-sub-gisen-wrap .sao-sub-gisen-card h3 {
  margin: 0; font-size: 19px; font-weight: 700; color: var(--sao-sub-navy);
  letter-spacing: .02em; line-height: 1.5;
  border-bottom: none; padding-bottom: 0; padding-left: 0; background: none;
}
/* 指摘315■5: 大会名のリンク（公式サイトか大会の詳細）。見出しの色のまま下線で押せることを示す */
body.sao-sub .entry-body .sao-sub-gisen-wrap .sao-sub-gisen-card h3 a.sao-sub-gisen-ttl {
  color: inherit; text-decoration: underline; text-decoration-color: currentColor;
  text-decoration-thickness: 1px; text-underline-offset: 4px;
}
body.sao-sub .entry-body .sao-sub-gisen-wrap .sao-sub-gisen-card h3 a.sao-sub-gisen-ttl:hover { text-decoration-thickness: 2px; }
body.sao-sub .entry-body .sao-sub-gisen-wrap .sao-sub-gisen-step.is-top .sao-sub-gisen-card h3 a.sao-sub-gisen-ttl .sao-fout { color: #fff; }
body.sao-sub .entry-body .sao-sub-gisen-wrap .sao-sub-gisen-meta {
  margin: 8px 0 0; font-size: 16px; color: var(--sao-sub-muted);
  display: flex; flex-wrap: wrap; gap: 4px 18px;
}
body.sao-sub .entry-body .sao-sub-gisen-wrap .sao-sub-gisen-meta b { color: var(--sao-sub-ink); font-weight: 700; }
/* 見本の注記どおり、.sao-sub-gisen-meta b より詳細度を上げる。
   下げると ink(黒)に負けて「未定」が黒く出る。 */
body.sao-sub .entry-body .sao-sub-gisen-wrap .sao-sub-gisen-meta b.sao-sub-gisen-tbd { color: var(--sao-sub-amber); }
body.sao-sub .entry-body .sao-sub-gisen-wrap .sao-sub-gisen-go {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; font-size: 17px; font-weight: 700;
  color: var(--sao-sub-blue); text-decoration: none;
}
body.sao-sub .entry-body .sao-sub-gisen-wrap .sao-sub-gisen-go span { transition: transform .18s; }
body.sao-sub .entry-body .sao-sub-gisen-wrap .sao-sub-gisen-card:hover .sao-sub-gisen-go span { transform: translateX(4px); }
body.sao-sub .entry-body .sao-sub-gisen-wrap .sao-sub-gisen-pend {
  margin: 14px 0 0; font-size: 16px; color: var(--sao-sub-muted);
}

/* 指摘189■3(No.34、2026-09-06): 区分の札。番号の代わりに「その大会が
   どの範囲の大会か」を示す。既存の札(.sao-sub-event-badge 等)と同じ
   11px/800/角丸4px/枠線のみ に揃えている(指摘187■10で札の角丸を4px・
   太さを800に統一した形)。白地で --sao-sub-blue は 7.07:1。
   white-space:nowrap は「西日本ブロック」が折り返さないようにするため。 */
body.sao-sub .entry-body .sao-sub-gisen-wrap .sao-sub-gisen-scope {
  display: inline-block; margin: 0 0 8px; padding: 2px 8px; border-radius: 8px;
  font-size: 16px; font-weight: 700; letter-spacing: .04em; white-space: nowrap;
  color: var(--sao-sub-blue); background: none; border: 1px solid currentColor;
}
body.sao-sub .entry-body .sao-sub-gisen-wrap .sao-sub-gisen-step.is-top .sao-sub-gisen-scope { color: var(--sao-sub-ice-txt); }

/* 最上位だけ紺のカード */
body.sao-sub .entry-body .sao-sub-gisen-wrap .sao-sub-gisen-step.is-top .sao-sub-gisen-dot i { background: var(--sao-sub-navy); border-color: var(--sao-sub-navy); }
body.sao-sub .entry-body .sao-sub-gisen-wrap .sao-sub-gisen-step.is-top .sao-sub-gisen-card { background: var(--sao-sub-navy); border-color: var(--sao-sub-navy); }
body.sao-sub .entry-body .sao-sub-gisen-wrap .sao-sub-gisen-step.is-top .sao-sub-gisen-card h3 { color: #fff; }
body.sao-sub .entry-body .sao-sub-gisen-wrap .sao-sub-gisen-step.is-top .sao-sub-gisen-meta { color: rgba(255,255,255,.78); }
body.sao-sub .entry-body .sao-sub-gisen-wrap .sao-sub-gisen-step.is-top .sao-sub-gisen-meta b { color: #fff; }
body.sao-sub .entry-body .sao-sub-gisen-wrap .sao-sub-gisen-step.is-top .sao-sub-gisen-meta b.sao-sub-gisen-tbd { color: var(--sao-sub-ice-txt); }
body.sao-sub .entry-body .sao-sub-gisen-wrap .sao-sub-gisen-step.is-top .sao-sub-gisen-go { color: var(--sao-sub-ice-txt); }
body.sao-sub .entry-body .sao-sub-gisen-wrap .sao-sub-gisen-step.is-top .sao-sub-gisen-pend { color: rgba(255,255,255,.8); }
body.sao-sub .entry-body .sao-sub-gisen-wrap .sao-sub-gisen-step.is-top .sao-sub-gisen-card:hover { border-color: var(--sao-sub-sky); box-shadow: 0 10px 26px rgba(10,46,77,.28); }

/* 指摘189■3(No.34、2026-09-06): 「下位 ──── ▲ 上位」の凡例
   (.sao-sub-gisen-updown)を削除した。はしごは縦に並んでいるのに凡例が
   横並びで、方向が2つあってどちらが上位か分からなくなっていたため。
   代わりに各カードの先頭へ区分の札(.sao-sub-gisen-scope)を置いている。 */

@media (max-width: 640px) {
  /* 指摘189■3: 点(14px)は幅を変えないので、線の left は 6px のまま。
     段の左の列だけ 64px→28px に詰めて、カードの幅を稼ぐ。 */
  body.sao-sub .entry-body .sao-sub-gisen-wrap .sao-sub-gisen-step:not(:last-child)::before { left: 6px; top: 35px; bottom: -44px; }
  body.sao-sub .entry-body .sao-sub-gisen-wrap .sao-sub-gisen-step { grid-template-columns: 28px 1fr; gap: 0 10px; }
  body.sao-sub .entry-body .sao-sub-gisen-wrap .sao-sub-gisen-dot { width: 28px; }
  body.sao-sub .entry-body .sao-sub-gisen-wrap .sao-sub-gisen-dot i { margin-top: 21px; }
  body.sao-sub .entry-body .sao-sub-gisen-wrap .sao-sub-gisen-card h3 { font-size: 17px; }
}

/* 見本の決めごと6「動きは控えめに。prefers-reduced-motionのときは動かさない」。 */
@media (prefers-reduced-motion: reduce) {
  body.sao-sub .entry-body .sao-sub-gisen-wrap .sao-sub-gisen-card,
  body.sao-sub .entry-body .sao-sub-gisen-wrap .sao-sub-gisen-go span { transition: none; }
  body.sao-sub .entry-body .sao-sub-gisen-wrap .sao-sub-gisen-card:hover { transform: none; }
  body.sao-sub .entry-body .sao-sub-gisen-wrap .sao-sub-gisen-card:hover .sao-sub-gisen-go span { transform: none; }
}

/* ------------------------------------------------------------------
   指摘212c(2026-09-15): SAO概要(page 315)の「中身が空の段落」を消す。

   このページの本文は手書きのHTMLで、`<p>…</p>` の閉じタグが余っている
   箇所がいくつかある。閉じタグだけが余ると、ブラウザはHTMLの決まりに
   従って**中身が空の段落**を作る。空でも下に20pxの余白が付くため、
   見出しの上やカードの中に、意味のない隙間ができていた(実測5箇所)。

   英字ラベル「ABOUT US」をコメントで囲って止めた際、WordPressの自動整形
   (wpautop)が同じ理由でもう1つ空の段落を作ったため、あわせてここで消す。
   囲みの書き方をいろいろ変えて試したが、**コメントを本文に置く限り必ず
   1つできる**ことを wpautop を直接動かして確かめた(A〜Fの6通り)。

   `p:empty` は「子も文字も1つも無い段落」だけに当たる。空白が1つでも
   あれば当たらないので、連盟の文章が消えることはない。
   お問合せページの `.screen-reader-response`(送信結果を読み上げるための
   空の段落)に当たらないよう、**この箱の中だけ**に絞っている。
   ------------------------------------------------------------------ */
body.sao-sub .entry-body .sao-about p:empty { display: none; }

/* ============================================================
   指摘275■5(2026-09-23): 教育部の3ページの「1行のカード」と種別の見出し。
   見本 design/skioita-kyoiku-pages-v2.html の .sec / .ev / .note の値そのまま
   (色はサイトの既存の --sao-sub-* を使う。新しい色は増やしていない)。
   inc/sub-page-shortcodes.php の [skioita_edu_event_sections] が出す。
   ★触れたときは薄い青の地になるだけ(左の線は出さない。指摘275■3)。
   ============================================================ */
body.sao-sub .entry-body .sao-sub-evsec { margin: 26px 0 0; }
body.sao-sub .entry-body .sao-sub-evsec:first-child { margin-top: 0; }
body.sao-sub:not(.page-id-322) .entry-body h3.sao-sub-evsec-hd {
  font-size: 18px; font-weight: 700; color: var(--sao-sub-navy); line-height: 1.5;
  margin: 0 0 10px; padding: 0 0 8px; background: none; border: 0; border-bottom: 1px solid var(--sao-sub-line);
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
body.sao-sub:not(.page-id-322) .entry-body h3.sao-sub-evsec-hd::before,
body.sao-sub:not(.page-id-322) .entry-body h3.sao-sub-evsec-hd::after { content: none; display: none; }
body.sao-sub .entry-body .sao-sub-evsec-n { font-size: 13px; font-weight: 400; color: var(--sao-sub-muted); }
body.sao-sub .entry-body .sao-sub-evsec-note { font-size: 13px; color: var(--sao-sub-muted); margin: -4px 0 10px; }

body.sao-sub .entry-body a.sao-sub-evcard {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: center;
  padding: 12px 16px; margin: 0 0 8px; border: 0; border-radius: var(--sao-radius-row); box-shadow: var(--sao-shadow-row);
  background: #fff; color: inherit; text-decoration: none !important;
  transition: background .2s, border-color .2s;
}
body.sao-sub .entry-body a.sao-sub-evcard:hover,
body.sao-sub .entry-body a.sao-sub-evcard:focus-visible { background: var(--sao-sub-ice); border-color: #C9DCEC; }
body.sao-sub .entry-body a.sao-sub-evcard:focus-visible { outline: 2px solid var(--sao-sub-blue); outline-offset: 2px; }
body.sao-sub .entry-body .sao-sub-evcard-t { grid-column: 1; font-size: 16px; font-weight: 700; color: var(--sao-sub-navy); line-height: 1.5; }
body.sao-sub .entry-body .sao-sub-evcard-meta { grid-column: 1; display: flex; flex-wrap: wrap; gap: 2px 16px; font-size: 13.5px; color: var(--sao-sub-ink); line-height: 1.7; }
body.sao-sub .entry-body .sao-sub-evcard-meta i { font-style: normal; color: var(--sao-sub-muted); font-size: 12.5px; margin-right: 5px; }
body.sao-sub .entry-body .sao-sub-evcard-date { grid-column: 2; grid-row: 1 / span 2; text-align: right; white-space: nowrap; }
body.sao-sub .entry-body .sao-sub-evcard-date strong { display: block; font-size: 16px; font-weight: 700; color: var(--sao-sub-navy); font-variant-numeric: tabular-nums; }
body.sao-sub .entry-body .sao-sub-evcard-next { font-size: 11.5px; font-weight: 400; color: var(--sao-sub-blue); margin-right: 4px; }
body.sao-sub .entry-body .sao-sub-evcard-date small { display: block; font-size: 12px; color: var(--sao-sub-muted); }
/* 全部終わった行事: 右の日付を薄い色で */
body.sao-sub .entry-body .sao-sub-evcard.is-past .sao-sub-evcard-date strong { color: var(--sao-sub-muted); font-weight: 400; }

@media (max-width: 760px) {
  body.sao-sub .entry-body a.sao-sub-evcard { grid-template-columns: 1fr; }
  body.sao-sub .entry-body .sao-sub-evcard-date { grid-column: 1; grid-row: auto; text-align: left; display: flex; gap: 8px; align-items: baseline; }
}

/* 指摘302(見本タブ2・7): 教育部のページの行事の行。中止の回・受付終了 */
body.sao-sub .entry-body .sao-sub-evcard-date strong.is-cancelled { color: #9AA5B1; font-weight: 400; }
body.sao-sub .entry-body .sao-sub-evcard-cx { margin-left: 6px; font-size: 12px; font-weight: 700; color: #C0392B; background: #FDECEA; border-radius: 999px; padding: 0 8px; text-decoration: none; }
body.sao-sub .entry-body .sao-sub-evcard-date small.sao-sub-evcard-closed { display: inline-block; margin-top: 4px; font-size: 12px; font-weight: 700; color: #5E7183; background: #F1F4F7; border-radius: 999px; padding: 0 9px; }
/* 申込みページ: 締切を過ぎた行事から来たとき */
.sao-apply-closed { background: #fff; border-radius: 12px; box-shadow: 0 1px 6px rgba(10,46,77,.06); padding: 14px 18px; margin: 0 0 16px; }

/* 指摘306■3-2(改善リスト No.2「資料（ラ　イブラリー）」): 種別の見出しの文字の間に空きが出ていたのを直す。
   見出しは件数を横に並べるため display:flex(gap 10px)。言葉の切れ目で折る仕組み(assets/js/sp-wrap.js)が
   文字の中に <wbr>・<span class="sao-nw"> を入れると、文字が別々の flex の子になり、その間にも 10px が空いて
   「資料　（ラ　イブラリー）」と見えていた(指導者向け 5174 の本文の見出し。文字そのものは正しい)。
   横の空き(column-gap)を 0 にし、件数の前の 10px は件数の側の余白で取る(見た目は前と同じ)。 */
body.sao-sub:not(.page-id-322) .entry-body h3.sao-sub-evsec-hd { column-gap: 0; }
body.sao-sub .entry-body h3.sao-sub-evsec-hd > .sao-sub-evsec-n { margin-left: 10px; }

/* 指摘308■7: TOPIC の本文に「本文に写真を入れる」で入れた写真(class="sao-topic-photo"、inc/topic-admin.php が付ける)。
   本文の幅いっぱい・角を少し丸く。押すと大きく(写真へのリンク＝いまのサイトの写真の拡大〈Easy FancyBox〉と同じ)。
   ★いまの TOPIC の本文の中の写真にはこの class が無いので、見た目は変わらない。 */
body.sao-sub .entry-body img.sao-topic-photo { display: block; width: 100%; max-width: 100%; height: auto; border-radius: 10px; margin: 12px 0; }

/* 【指摘322■7(2026-10-12)】サイトポリシー（ページ 1264）の表の見出し（th）を1行に。
   スマホ（375px）で「お問い合わせ」が「お問／い合わせ」と言葉の途中で折れ、「掲載する情報」の最後の行が「情報」だけになっていた
   （sp_layout_audit の (a)(b)）。見出しはどれも短い（6字まで）ので折らない。文字・表は変えていない。
   ★折らないだけだと、3列の表（7.）がスマホで枠より広くなり、右が切れた（375px で 387px／359px）。
   そのため 600px 以下では、このページの表だけ、ます目の左右の余白を 16px → 8px、見出しの字を 16px → 14px（このサイトの下限）にし、
   1列目の最低の幅（6em＋32px。表の決まり、指摘86）を外した。320px・375px で表が枠に収まることを確かめた。 */
body.page-id-1264 .entry-body table th { white-space: nowrap; }
@media (max-width: 600px) {
  body.sao-sub.page-id-1264 .entry-body table th,
  body.sao-sub.page-id-1264 .entry-body table td { padding-left: 8px; padding-right: 8px; }
  body.sao-sub.page-id-1264 .entry-body table th { font-size: 14px; }
  body.sao-sub.page-id-1264 .entry-body table th:first-child { width: auto; min-width: 0; }
}

/* 【指摘324■6(2026-10-12)】イベント写真のページ（2912）の横にスクロールする表の案内とぼかし（inc/table-scroll-hint.php・assets/js/table-scroll-hint.js）。
   案内は Custom CSS & JS 4266 の「← 表は横にスクロールできます →」と同じ文・同じ色と大きさ（#185FA5 / #E6F1FB・16px）。
   ぼかしは目次と同じ .sao-sub-toc-fade（上の規則）を、表の箱の左右に置く。表がはみ出しているとき（.is-scrollable）だけ出す。新しい色は足していない。 */
/* 指摘388■1-5: 「← 表は横にスクロールできます →」の帯をやめ、自治体・国のサイトで一般的な形に(見本 design/skioita-table-scroll-v1.html)。
   ・表がはみ出しているときだけ(.is-scrollable、assets/js/table-scroll-hint.js)、右上に小さな文字と横スワイプの絵「横にスクロールできます」。
   ・続きがある側にだけうすい影。端まで行くとその側の影は消える(背景の local / scroll の重ね。CSS だけ)。覆う色は本文の地(snow)。
   ・枠は Tab で選べ、← → のキーで動く(PHP 側で tabindex="0"・role="region"・読み上げの名前)。
   前: 帯(#E6F1FB の地・16px・真ん中)と、目次と同じ左右のぼかしと矢印(.sao-sub-toc-fade)。 */
.sao-tscroll { margin: 0 0 8px; }
.sao-tscroll-hint { display: none; align-items: center; justify-content: flex-end; gap: 6px; margin: 0 0 6px; font-size: 13px; color: var(--sao-sub-muted); }
.sao-tscroll-hint svg { width: 20px; height: 20px; flex: none; color: var(--sao-sub-blue); }
.sao-tscroll.is-scrollable .sao-tscroll-hint { display: flex; }
.sao-tscroll-box { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 8px; }
.sao-tscroll.is-scrollable .sao-tscroll-box {
  background:
    linear-gradient(to right, var(--sao-sub-snow) 30%, rgba(251,253,255,0)) left / 40px 100% no-repeat local,
    linear-gradient(to left, var(--sao-sub-snow) 30%, rgba(251,253,255,0)) right / 40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(10,46,77,.22), rgba(10,46,77,0)) left / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(10,46,77,.22), rgba(10,46,77,0)) right / 14px 100% no-repeat scroll;
}
.sao-tscroll.is-scrollable .sao-tscroll-box > table,
.sao-tscroll.is-scrollable .sao-tscroll-box > table td,
.sao-tscroll.is-scrollable .sao-tscroll-box > table th { background-color: transparent; }
.sao-tscroll-box:focus-visible { outline: 2px solid var(--sao-sub-blue); outline-offset: 2px; }

/* ==========================================================================
   指摘331■1(2026-10-13): 「見出しのような表示」をやめる(よこしゅんさんの指摘)。
   級別テスト(#5248)・プライズテスト(#5249)の「検定種目」の下の一文
   (「1・2級は実技検定、3〜5級は講習内検定です。」など。テーマ inc/event-display.php・
   inc/badge-integrated-display.php が出す <p class="badge-acc-note">)を、
   まわりのふつうの文と同じ見た目にする。★文字は1字も変えていない。
   ★前の指定(淡い背景・左の 3px の青い帯・角丸・余白・灰色の文字)は、
     Custom CSS & JS の投稿 4266 にある(DB が正。css/sao-buttons.css は写し)。
     DB は触らず、ここで上書きして止めている(4266 の
       .badge-acc-note { font-size:16px; color:#5F5E5A; line-height:1.7;
         background:#F7FAFD; border-left:3px solid #185FA5;
         padding:10px 14px; border-radius:0 8px 8px 0; margin:0 0 16px; }
     はそのまま残っている)。戻すときは、この塊を消すだけ。
   大きさ・行の高さは、本文のふつうの段落と同じ(.entry-body p の 15.5px)のまま。
   ========================================================================== */
.entry-body .badge-acc-note {
	background: none;
	border-left: 0;
	border-radius: 0;
	padding: 0;
	color: inherit;
}