/* 指摘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ページ(ID=88) 刷新 専用CSS
   design/top-concept-v1.html をベースに実装。
   is_front_page() のときだけ functions.php から enqueue され、他ページには一切影響しない。
   クラス名は既存スタイルとの衝突を避けるため全て sao-top- プレフィックスを付けている
   (例外: ヒーロー主ボタン・「合格者を検索する」ボタンは、サイト全体で共通のボタン配色
   システム .sao-btn / .sao-btn-cta を意図的に再利用している。css/sao-buttons.css 側の
   変数を変更すればこのページのボタンにも自動的に反映される)。
   設計: reports/20260814-top-redesign-plan.md
   実装報告: reports/20260814-top-redesign.md
   ============================================ */

:root {
  --sao-top-navy: #0A2E4D;
  --sao-top-blue: #0B5A9E;
  --sao-top-blue-d: #0A4F8A;
  --sao-top-sky: #4A9FD8;
  --sao-top-ice: #E8F2FA;
  --sao-top-snow: #FBFDFF;
  --sao-top-ink: #16202B;
  --sao-top-muted: #5E7183;
  --sao-top-line: #DFE7EE;
  /* 指摘131■4(2026-08-30): --sao-top-tag-soumu/kyogi/kyoikuは、お知らせタグの
     ベタ塗り色として使っていたが、枠線+淡い背景の.chip方式へ変更した際に
     --sao-top-berry/--sao-top-blue/--sao-top-pineへ差し替えたため未使用に
     なった。用途が無くなったため削除する(juyo・topicは引き続き重要
     セクションのアイコン色等で使うため残す)。 */
  --sao-top-tag-juyo: #C0392B;
  --sao-top-tag-topic: #B45309;

  /* 指摘130■2(2026-08-30): design/skioita-renewal-final.htmlの:rootにある
     「新しく足す7色」のうち6色を追加(命名は既存に合わせ--sao-top-*プレフィックス)。
     --snowは値(#FBFDFF)が既存の--sao-top-snowと完全一致のため追加していない
     (上の23行目に既存定義あり)。見本の--ice(#EDF5FB)は既存の--sao-top-ice
     (#E8F2FA)とは微妙に異なる値だが、指摘126のときと同じ考え方で既存優先とし、
     こちらも追加していない(このほかの既存トークン navy/blue/sky/ink/muted/line
     も見本と全て一致することを確認済み。詳細はreports/20260830-instr130-impl.md)。 */
  --sao-top-sun: #E4632B;
  --sao-top-sun-2: #F59A3E;
  --sao-top-ice-txt: #B9DEF7;
  --sao-top-ice-line: #7FC2EC;
  --sao-top-pine: #1E7A5E;
  --sao-top-berry: #9C3A6B;
}

/* ヒーローが画面幅いっぱいに出るよう、Lightningのコンテナ幅制限を打ち破る */
.sao-top-breakout {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

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

/* ---------- ヘッダー(実サイトの#site-headerを流用し、TOPページだけ透過ヘッダー化) ---------- */
body.home #site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  background: transparent; box-shadow: none; border-bottom: none;
  transition: background .35s, box-shadow .35s, padding .35s;
}
/* Lightningの.site-header--layout--nav-floatは、固定ヘッダー用にLightning自身が
   .site-bodyへpadding-top(実測56px)を確保する仕様になっている。TOPページはヒーローを
   ヘッダーの下に潜り込ませたい(ヒーローがy=0から始まってヘッダーが透過で重なる)ため、
   この確保分を打ち消す。打ち消さないと、ヒーロー上部にbodyの素の背景色(白)が56px分だけ
   帯状に見えてしまう(2026-08-14に発覚・対処。ヘッダー自体は透過になっていたにも関わらず
   白い帯が見えたため原因調査に時間を要した)。 */
body.home .site-body { padding-top: 0; }
body.home.sao-top-scrolled #site-header {
  background: rgba(255,255,255,.96); box-shadow: 0 1px 14px rgba(10,46,77,.10);
}
body.home #site-header .site-header-logo a span { color: #fff; transition: color .35s; text-shadow: 0 1px 8px rgba(0,0,0,.28); }
body.home.sao-top-scrolled #site-header .site-header-logo a span { color: var(--sao-top-navy); text-shadow: none; }
body.home #site-header .global-nav-name { color: #fff; transition: color .35s; text-shadow: 0 1px 8px rgba(0,0,0,.28); }
body.home.sao-top-scrolled #site-header .global-nav-name { color: var(--sao-top-navy); text-shadow: none; }
body.home #vk-mobile-nav-menu-btn { transition: filter .35s; filter: drop-shadow(0 1px 4px rgba(0,0,0,.4)); }

/* ---------- ヒーロー ---------- */
.sao-top-hero {
  position: relative; height: 100svh; min-height: 600px; overflow: hidden;
  display: flex; align-items: center;
}
.sao-top-slide { position: absolute; inset: 0; opacity: 0; animation: sao-top-fade 18s linear infinite; }
.sao-top-slide::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(10,46,77,.80) 0%, rgba(10,46,77,.42) 52%, rgba(10,46,77,.18) 100%);
}
/* 指摘130■3(2026-08-30): 見本の「18秒かけてゆっくり拡大」に合わせ、
   周期を20s→18sに変更(scale幅・alternate・ease-in-outは既存のまま)。 */
.sao-top-slide img { width: 100%; height: 100%; object-fit: cover; display: block; animation: sao-top-zoom 18s infinite alternate ease-in-out; }
.sao-top-slide:nth-child(2) { animation-delay: 6s; }
.sao-top-slide:nth-child(3) { animation-delay: 12s; }
/* 指摘105(2026-08-26)で修正: 従来は`0%,28%{opacity:1}`だったため、周期の
   先頭(0%)でフェードインが定義されておらず、opacity:0(base)→1(0%開始と
   同時)へ瞬間的に切り替わっていた(「変わり目がなだらかでない」というご指摘
   の原因)。3枚・delay6s・周期18s(=1枚あたり6sの持ち分)の関係を保ったまま、
   フェードイン(F=2秒)→保持→フェードアウト(F=2秒、次スライドの6s境界を
   跨いで前後2秒ずつ、6s境界を中心に対称)→非表示、という形に直した。
   次のスライドのdelayはちょうど6s後のため、このスライドのフェードアウト
   後半(6s〜6+F=8s)と、次スライドのフェードイン前半(6s〜6+F=8s、次スライド
   自身の局所時間では0%〜F%)が完全に重なり、どちらもopacity>0の状態が
   必ず共存する(重なりが無くなる=どちらも0%になる瞬間が発生しない設計)。
   秒→%換算(18s=100%): F=2s→11.111%、6-F=4s→22.222%、6+F=8s→44.444%。
   上記の秒数換算はキーフレーム間が直線的に変化する前提のため、
   `.sao-top-slide`側のanimationショートハンドに`linear`を明記した
   (未指定だとブラウザ既定の`ease`になり、区間内で速度が変化しS字状に
   なるため、この換算どおりの重なり方にならないことを実機検証で確認した
   〈指摘105で発見〉)。 */
@keyframes sao-top-fade {
  0% { opacity: 0; }
  11.111% { opacity: 1; }
  22.222% { opacity: 1; }
  44.444% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes sao-top-zoom { from { transform: scale(1); } to { transform: scale(1.13); } }

.sao-top-mtns { position: absolute; left: 0; right: 0; bottom: 0; height: 46%; z-index: 1; }
.sao-top-mtns svg { width: 100%; height: 100%; display: block; }

.sao-top-hero-in { position: relative; z-index: 3; width: 100%; }
/* 指摘131■2(2026-08-30): 実写に近い明るい写真(下半分が雪で明るい)では、
   ヒーローの暗幕(.sao-top-slide::afterの単純なグラデーション)だけでは
   英字・リード文・SCROLLが背景に溶けることを実測で確認した。指摘91の
   SCROLL(「文字は残し、影で対応する」)と同じ方針で、チップ・帯を足すのでは
   なく文字影を強めて対応する。字の輪郭に沿った複数方向のハードな影
   (最初の4つ)+柔らかい滲み影(最後)を組み合わせ、明るい部分に重なっても
   文字の縁が黒く縁取られて読めるようにした。
   あわせて、指摘130■3で「--ice-txt/--ice-line相当の値で実装済み」と
   報告していたのは誤りで、実際には#fff/var(--sao-top-sky)のままだった
   ことが今回判明したため、このタイミングで正しいトークンに修正する。 */
.sao-top-eyebrow {
  display: inline-flex; align-items: center; gap: 11px; color: var(--sao-top-ice-txt);
  font-size: 11px; letter-spacing: .26em; font-weight: 700; opacity: 0;
  animation: sao-top-up .9s .3s forwards;
  text-shadow:
    1px 1px 1px rgba(0,0,0,.9), -1px -1px 1px rgba(0,0,0,.9),
    1px -1px 1px rgba(0,0,0,.9), -1px 1px 1px rgba(0,0,0,.9),
    0 2px 8px rgba(0,0,0,.75);
}
.sao-top-eyebrow::before { content: ""; width: 44px; height: 2px; background: var(--sao-top-ice-line); box-shadow: 0 1px 3px rgba(0,0,0,.6); }
.sao-top-hero h1 {
  color: #fff; font-size: clamp(34px, 5.4vw, 64px); line-height: 1.24; letter-spacing: .01em;
  margin: 20px 0 18px; text-shadow: 0 2px 26px rgba(10,46,77,.34); opacity: 0;
  animation: sao-top-up .9s .5s forwards;
  /* 指摘62(2026-08-21): Lightning本体側の見出しリセットでoverflow-wrap:break-word
     が効いており、320px幅で「未来のスキーヤ/ーを。」のように長音符「ー」が
     行頭に来る禁則違反の折り返しが発生していた。日本語は文字単位で折り返せる
     ため、overflow-wrapをnormalに戻して禁則処理(kinsoku)をブラウザ既定の
     挙動に任せれば、はみ出しは起きない(実機確認済み)。line-break:strictで
     禁則をより厳格な設定に固定し、意図しない緩和を防ぐ。 */
  overflow-wrap: normal; word-break: normal; line-break: strict;
}
.sao-top-hero-lead {
  color: #fff; font-size: clamp(14px, 1.5vw, 17.5px); max-width: 620px;
  opacity: 0; animation: sao-top-up .9s .7s forwards;
  overflow-wrap: normal; word-break: normal; line-break: strict;
  /* 指摘131■2: eyebrowと同じ「輪郭のハード影+滲み影」の考え方。
     colorも.94の半透明からopaqueの#fffに変更した(半透明のままだと影を
     いくら強めても文字自体が薄く写真に透けるため)。 */
  text-shadow:
    1px 1px 1px rgba(0,0,0,.85), -1px -1px 1px rgba(0,0,0,.85),
    1px -1px 1px rgba(0,0,0,.85), -1px 1px 1px rgba(0,0,0,.85),
    0 2px 10px rgba(0,0,0,.7);
}
.sao-top-hero-cta { display: flex; gap: 14px; margin-top: 36px; flex-wrap: wrap; opacity: 0; animation: sao-top-up .9s .9s forwards; }
/* 指摘105(2026-08-26): デスクトップ幅で「今シーズンの大会情報」(.sao-btn、
   flex:1 1 220pxで残り空間いっぱいに伸びる)と「講習会・検定を見る」
   (.sao-top-btn-ghost、flex-growの指定が無く文字幅ぴったりのまま)の横幅が
   907.5px対202.5pxまで乖離していた(実測)。指摘63(2026-08-22、下記600px
   以下のメディアクエリ)で縦積み時の等幅化は既に対応済みだったが、横並びの
   デスクトップ幅ではこの子セレクタ自体が無く、同じ不具合が残っていた。
   .sao-btn単体のクラスに頼らず、`.sao-top-hero-cta > a`という共通の
   子セレクタでflex:1 1 220pxを与えることで、クラスの組み合わせに関わらず
   2つのボタンが常に同じ基準値から等しく伸びるようにした(600px以下では
   下のメディアクエリが同じ子セレクタでflex:1 1 autoに上書きし、縦積み時の
   挙動は従来どおり)。 */
.sao-top-hero-cta > a { flex: 1 1 220px; }
/* 指摘130■3(2026-08-30): 主ボタン(.sao-btn-cta、サイト全体共通の塗りつぶし色)を
   ヒーロー内だけオレンジのグラデーションに変更する。サイト全体で使う
   .sao-btn-ctaクラス自体(css/sao-buttons.css側、Custom CSS & JSプラグイン管理)は
   一切変更せず、`.sao-top-hero-cta`配下という詳細度の高いセレクタで上書きする形に
   したため、他ページ・TOPページの他セクション(検定・資格の「合格者を検索する」等)の
   .sao-btn-ctaには影響しない。box-shadowの色は見本のrgba(228,99,43,...)をそのまま使用。 */
.sao-top-hero-cta a.sao-btn-cta {
  background: linear-gradient(135deg, var(--sao-top-sun), var(--sao-top-sun-2)) !important;
  box-shadow: 0 6px 20px rgba(228,99,43,.38);
}
.sao-top-hero-cta a.sao-btn-cta:hover {
  background: linear-gradient(135deg, var(--sao-top-sun), var(--sao-top-sun-2)) !important;
  box-shadow: 0 10px 28px rgba(228,99,43,.5);
}
@keyframes sao-top-up { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

.sao-top-btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 15px 34px; border-radius: 6px;
  font-weight: 700; font-size: 14.5px; transition: .25s, outline 0s; border: 2px solid rgba(255,255,255,.85); color: #fff;
  /* 指摘63(2026-08-22): justify-content:centerを追加。従来はcontent-fitの
     幅だったため見た目に影響しなかったが、320px/375pxで隣の.sao-btnと
     幅を揃えた(flex:1 1 auto)ことで、揃えた幅の中で文字が左寄せのまま
     残ってしまう問題が新たに見えたため、あわせて中央寄せにした。 */
  /* 指摘92(2026-08-25): ヒーローのオーバーレイ(linear-gradient(105deg,...))は
     105度方向のため右側ほど薄くなり(.18程度)、右側に置かれたこのボタンは
     文字色rgba(255,255,255? 実際は不透明#fff)が写真によっては2.68〜3.41:1
     しか無く、WCAG AA(小さい文字4.5:1)を満たさないと実測で判明した
     (詳細: reports/20260825-contrast-fixes.md)。塗りつぶしの主CTAボタン
     (.sao-btn-cta)とは別物に見える必要があるため、下地は控えめな半透明にし、
     枠線が主役の透けたボタンの見た目は保った。 */
  background: rgba(10,46,77,.55);
  /* 指摘93(2026-08-25): 指摘92時点で枠線(border)の不透明度が.62のままだった
     ため、「枠線 vs ボタンの外側(写真そのもの)」の比較では9通り(3枚の
     写真×3幅)中6通りで3:1未達のまま残っていた(詳細:
     reports/20260825-contrast-fixes.md「■2」)。ヒーロー全体のオーバーレイを
     濃くする対応は写真全体が濁るため採らず、WCAG 1.4.11が求めているのは
     「部品を識別するために必要な視覚情報」であり、上記の下地(このボタン
     自身の内側の塗り)との境界で輪郭が識別できていれば要件を満たせると
     判断した。枠線の不透明度を.62→.85に上げ、内側の下地との対比を
     さらに広げて閉じた(実測は「枠線 vs 内側の下地」で3幅×写真3枚とも
     3:1以上、reports/20260825-real-images.md参照)。 */
}
.sao-top-btn-ghost:hover { background: rgba(10,46,77,.72); border-color: #fff; }

.sao-top-scrollcue {
  position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); z-index: 3;
  text-align: center;
}
/* 指摘92(2026-08-25)時点の記録: 「SCROLL」の文字(color:rgba(255,255,255,.8)、
   9.5pxの小さい文字なので合格基準4.5:1)の実測コントラストが1.87:1しか無く、
   WCAG AA不合格と判明した。原因を調べたところ、この位置は::mtns(山の
   シルエットSVG、z-index:1)がちょうど重なっており、SVG自体の塗り
   (rgba(255,255,255,.16)/.26、白系)がヒーローのnavyオーバーレイで
   暗くした分を上から明るく戻してしまっていた(詳細:
   reports/20260825-contrast-fixes.md)。この時点では「SCROLL」の文字だけに
   em/部門カードと同じnavy下地チップを追加して対処した。
 *
 * 【指摘105(2026-08-26)でよこしゅんさんの判断により訂正】「Scrollも下に
 * かつてのように下地無しで。」というご指示により、上記のnavy下地チップを
 * 撤去し、文字への濃いtext-shadowに置き換えた(あわせて文字色もrgba(255,
 * 255,255,.8)から不透明#fffに変更。チップが無くなった以上、透過させる
 * 理由が無いため)。
 * **これは意図的な例外である: text-shadowはWCAGのコントラスト計算に
 * 加味されないため、この文字は引き続きAA基準(4.5:1、9.5pxの小さい文字)を
 * 満たさない状態のままになる。** 影を除いた素の文字色(不透明#fff)と、
 * 影の影響を受けない位置(文字から25px離れた背景、山のシルエットSVGと
 * ヒーロー写真が重なる部分)を実測した結果、文字色は(255,255,255)・
 * 背景色は(175,188,203)、コントラスト比は1.93:1(理論値も同条件で1.93:1、
 * 実測と一致)。指摘92時点の1.87:1(当時はrgba(255,255,255,.8)+当時の
 * ヒーロー写真)とほぼ同水準で、背景のSVG重なりという物理的な原因自体は
 * 解消していない。基準未達を記録せず済ませることはせず、見た目(下地無しの
 * すっきりした表示)を優先するという、よこしゅんさんご自身の判断による
 * 例外として明記する。詳細: reports/20260826-instr105.md。 */
/* 指摘131■2(2026-08-30): 指摘105時点の影(ぼかしのみ)では、下半分が明るい
   雪の現行ヒーロー写真に対し実測1.3:1程度まで落ち込むことを確認したため、
   eyebrow/リード文と同じ「輪郭のハード影+滲み影」に強化した。指摘105の
   「意図的な例外」の位置づけ(チップを使わず文字+影のみで対応する方針)は
   維持しつつ、影そのものを強化する対応。 */
.sao-top-scrollcue span {
  display: inline-block; color: #fff; font-size: 9.5px; letter-spacing: .24em;
  text-shadow:
    1px 1px 1px rgba(0,0,0,.9), -1px -1px 1px rgba(0,0,0,.9),
    1px -1px 1px rgba(0,0,0,.9), -1px 1px 1px rgba(0,0,0,.9),
    0 2px 8px rgba(0,0,0,.75);
}
.sao-top-scrollcue::after {
  content: ""; display: block; width: 1px; height: 44px; margin: 11px auto 0;
  background: linear-gradient(rgba(255,255,255,.85), transparent); animation: sao-top-drop 2s infinite;
}
@keyframes sao-top-drop {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  51% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ---------- 共通セクション ---------- */
.sao-top-section { padding: 104px 0; }
.sao-top-lab { font-size: 10.5px; letter-spacing: .28em; color: var(--sao-top-sky); font-weight: 800; }
.sao-top-h2 {
  font-size: clamp(25px, 3.2vw, 36px); letter-spacing: .02em; margin: 9px 0 6px; font-weight: 800;
  /* 指摘62: h1と同じ理由(禁則違反の折り返し防止)、念のためセクション見出しにも適用 */
  overflow-wrap: normal; word-break: normal; line-break: strict;
}
.sao-top-sub {
  color: var(--sao-top-muted); font-size: 14px; margin-bottom: 42px;
  overflow-wrap: normal; word-break: normal; line-break: strict;
}
.sao-top-rv { opacity: 0; transform: translateY(30px); transition: .85s cubic-bezier(.2,.7,.3,1); }
.sao-top-rv.sao-top-on { opacity: 1; transform: none; }

/* ---------- お知らせ ---------- */
.sao-top-news { background: #fff; }
.sao-top-nlist { border-top: 1px solid var(--sao-top-line); }
.sao-top-nrow {
  display: grid; grid-template-columns: 104px 92px 1fr auto; gap: 20px; align-items: center;
  padding: 21px 8px; border-bottom: 1px solid var(--sao-top-line); transition: .22s, outline 0s;
}
.sao-top-nrow:hover { background: var(--sao-top-ice); padding-left: 16px; }
.sao-top-ndate { color: var(--sao-top-muted); font-size: 13px; font-variant-numeric: tabular-nums; letter-spacing: .03em; }
/* 指摘131■4(2026-08-30): ベタ塗り(背景色+白文字)をやめ、見本の.chip
   (枠線+淡い背景+その色自身の文字色)に変更した。部門ごとの色分けは
   指摘130■2で用意しただけで未使用だった--sao-top-berry(総務部)・
   --sao-top-blue(競技部、既存の--sao-top-tag-kyogiと同値)・
   --sao-top-pine(教育部)を使う。TOPIC・重要(juyo)は見本の.chip.sの
   配色(アンバー系)・独自の淡い赤系(それぞれ既存のトークン/概ね近い色相を
   踏襲)で、枠線+淡い背景の同じ見た目に揃えた(ベタ塗りをサイト全体から
   無くす方針のため、見本に無い2種も同じ処理に統一)。 */
.sao-top-tag {
  display: inline-block; text-align: center; width: 100%; padding: 3px 0; border-radius: 3px;
  font-size: 11px; font-weight: 800; letter-spacing: .06em; border: 1px solid;
}
.sao-top-tag-soumu { color: var(--sao-top-berry); border-color: #DCB6CB; background: #FCF3F8; }
.sao-top-tag-kyogi { color: var(--sao-top-blue); border-color: #A9CBE8; background: #F1F8FD; }
.sao-top-tag-kyoiku { color: var(--sao-top-pine); border-color: #A6D6C4; background: #F1FBF7; }
.sao-top-tag-juyo { color: var(--sao-top-tag-juyo); border-color: #EBC0BB; background: #FCF5F4; }
.sao-top-tag-topic { color: var(--sao-top-tag-topic); border-color: #E8C894; background: #FEF8EC; }
.sao-top-ntitle { font-weight: 700; font-size: 15.5px; }
.sao-top-narrow { color: var(--sao-top-sky); font-size: 17px; transition: .22s, outline 0s; }
.sao-top-nrow:hover .sao-top-narrow { transform: translateX(5px); }
.sao-top-more {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 34px; font-weight: 700;
  font-size: 14px; color: var(--sao-top-blue); border-bottom: 2px solid var(--sao-top-ice); padding-bottom: 5px; transition: .25s, outline 0s;
}
.sao-top-more:hover { border-color: var(--sao-top-blue); gap: 15px; }
.sao-top-comp .sao-top-more { color: var(--sao-top-sky); border-color: rgba(255,255,255,.2); }
.sao-top-comp .sao-top-more:hover { border-color: var(--sao-top-sky); }

/* ---------- 重要なお知らせ(6段階改善計画 段階1-④、2026-08-17) ----------
   赤(--sao-top-tag-juyo、既存の「重要」バッジと同色)を使うが、面積を
   絞る(細い左ボーダー+ごく薄い背景のみ)ことでTOPページ全体の紺/水色基調
   から浮かないようにする。バー全体を<a>で囲みクリック領域を最大化。
   コントラスト比(WCAG AA 4.5:1以上)を計算済み:
   ・見出し文字 #C0392B on 背景 #fff → 5.44:1
   ・本文文字 var(--sao-top-ink) #16202B on バー背景 #FDF2F0 → 15.02:1
   ・「重要」アイコン色 #C0392B on バー背景 #FDF2F0 → 4.96:1
   いずれも4.5:1を上回る。 */
.sao-top-urgent { background: #fff; padding-top: 56px; padding-bottom: 8px; }
.sao-top-lab-urgent, .sao-top-h2-urgent { color: var(--sao-top-tag-juyo); }
.sao-top-ulist { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.sao-top-urow {
  display: flex; align-items: center; gap: 14px;
  background: #FDF2F0; border-left: 4px solid var(--sao-top-tag-juyo);
  border-radius: 4px; padding: 15px 20px; text-decoration: none;
  color: var(--sao-top-ink); transition: .18s, outline 0s;
}
.sao-top-urow:hover { background: #FAE3DF; color: var(--sao-top-ink); }
.sao-top-uicon { font-size: 19px; color: var(--sao-top-tag-juyo); flex-shrink: 0; line-height: 1; }
.sao-top-udate {
  color: var(--sao-top-tag-juyo); font-size: 13px; font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: .03em; flex-shrink: 0; width: 84px;
}
.sao-top-utitle { flex: 1; font-weight: 700; font-size: 15.5px; }
.sao-top-uarrow { color: var(--sao-top-tag-juyo); font-size: 17px; flex-shrink: 0; transition: .18s, outline 0s; }
.sao-top-urow:hover .sao-top-uarrow { transform: translateX(5px); }
@media (max-width: 600px) {
  .sao-top-urgent { padding-top: 40px; }
  /* flex+orderでは「タイトルだけ100%幅で改行」が意図通りに効かず(item個別に
     折り返され窮屈になる不具合を実機確認で発見)、gridの2行構成に変更:
     1行目=アイコン・日付・矢印、2行目=タイトル(全幅) */
  .sao-top-urow {
    display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "icon date arrow" "title title title";
    gap: 5px 10px; padding: 13px 16px; align-items: center;
  }
  .sao-top-uicon { grid-area: icon; }
  .sao-top-udate { grid-area: date; width: auto; }
  .sao-top-uarrow { grid-area: arrow; }
  .sao-top-utitle { grid-area: title; font-size: 14.5px; line-height: 1.5; }
}

/* ---------- 目的からさがす(goals、指摘131■1) ----------
   design/skioita-renewal-final.html 見本1の.goals/.goalを、既存の
   TOPページの角丸トーン(.sao-top-dcard:12px・.sao-top-ccard:11px)に
   合わせて実装(見本の角丸3pxはこのページの他カードより控えめすぎるため、
   統一感を優先し10pxに調整。色・余白・動きは見本のとおり)。 */
.sao-top-ggrid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.sao-top-goal {
  display: block; text-decoration: none; background: #fff; border: 1px solid var(--sao-top-line);
  border-radius: 10px; padding: 26px 24px; position: relative; overflow: hidden;
  transition: transform .26s, box-shadow .26s, border-color .26s;
}
.sao-top-goal::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--sao-top-sun);
  transform: scaleY(0); transform-origin: top; transition: transform .3s;
}
.sao-top-goal:hover { border-color: var(--sao-top-sun); transform: translateY(-4px); box-shadow: 0 12px 28px rgba(10,46,77,.13); }
.sao-top-goal:hover::before { transform: scaleY(1); }
.sao-top-goal-ic { font-size: 27px; line-height: 1; color: var(--sao-top-sun); margin: 0 0 13px; }
.sao-top-goal b { display: block; font-size: 16px; color: var(--sao-top-navy); margin: 0 0 6px; }
.sao-top-goal span { display: block; font-size: 12.5px; color: var(--sao-top-muted); line-height: 1.75; }
@media (max-width: 860px) { .sao-top-ggrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .sao-top-ggrid { grid-template-columns: 1fr; } }

/* ---------- 部門カード ---------- */
.sao-top-dept { background: linear-gradient(180deg, var(--sao-top-snow), var(--sao-top-ice)); }
.sao-top-dgrid { display: grid; grid-template-columns: repeat(4,1fr); gap: 22px; }
.sao-top-dcard {
  background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 16px rgba(10,46,77,.07);
  transition: .34s cubic-bezier(.2,.7,.3,1); display: block;
}
.sao-top-dcard:hover { transform: translateY(-9px); box-shadow: 0 18px 42px rgba(10,46,77,.17); }
.sao-top-dimg { height: 158px; position: relative; overflow: hidden; }
.sao-top-dimg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: .6s cubic-bezier(.2,.7,.3,1); }
.sao-top-dcard:hover .sao-top-dimg img { transform: scale(1.1); }
/* 指摘131■3(2026-08-30): 指摘130■5で追加した上端(78%〜100%)の暗化
   ゾーンは、「暗い帯を足すのは見本が避けたかった見た目に近づく」との
   ご指摘により撤去し、指摘92確定時点の元のグラデーション(bラベル保護用の
   踊り場のみ)に戻した。emラベルの保護は下のem自体のtext-shadow強化のみで
   対応する(チップ・帯を使わない指摘91の方針に統一)。 */
.sao-top-dimg::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(10,46,77,.65) 0%, rgba(10,46,77,.65) 36%, rgba(10,46,77,0) 55%); }
/* 指摘92(2026-08-25)追記: 単純な2点グラデーション(0%→55%で線形に0まで薄まる)
   だと、bラベルの実際の位置(下端から約27.5%の高さ、実測で確認済み)では
   基準値の約半分の不透明度しか乗らない(実測: 基準.75で実効約.37、基準.85でも
   実効約.44。線形補間の性質上、基準値をいくら上げても効きが半分に減衰され、
   真っ白な写真での実効コントラストが基準1.0〈rgbaの最大値〉でも3.11:1と
   ほぼ余裕が無いことが判明)。そこで基準値を底上げする代わりに、0%〜36%
   (bラベルの位置を含む範囲)を同じ濃さのまま保つ「踊り場」を追加し、
   36%〜55%で0まで薄める形に変更した。これによりbラベルは基準値をほぼ
   そのまま(減衰なしに近い形で)受け取れるため、基準値は.65のままで足りる
   (真っ白な写真でのテストで3.47:1を実測、3:1に対し余裕あり)。emラベルの
   位置(下端から約78%以上)は55%地点より十分上のため、この変更後も
   オーバーレイの影響を一切受けない(無変更)。 */
/* 指摘91(2026-08-25): 上部のemラベルには::beforeの暗くする処理が一切
   かからず(グラデーションは55%地点で不透明度0になり切る)、下部のbラベルも
   写真によっては(特に明るい写真)不透明度80%の白文字だけでは不十分と判明した
   (実測: 白文字rgba(255,255,255,.8)のまま現在の仮画像4枚で計算すると
   2.73〜4.57:1で、うち3枚がWCAG AA基準4.5:1を下回っていた。詳細:
   reports/20260825-card-label-contrast.md)。この時点ではem・bとも一律
   4.5:1を基準に判定し、bにもemと同じnavy下地チップを追加していた。
   指摘92(2026-08-25)で訂正: bは21px/font-weight:700で、WCAGの「大きな文字」
   (18pt/24px以上、または14pt/18.66px以上の太字)に該当し、正しい合格基準は
   3:1。上記の指摘91時点の実測値(2.73〜4.57:1は4.5:1判定時の値。3:1判定では
   4枚とも合格〈詳細はreports/20260825-contrast-fixes.md〉)だったため、
   bのチップは不要な過剰対応だったと判明。bはチップを外し指摘91以前の
   単純な白文字+text-shadowに戻し、代わりに::beforeの下端の不透明度を
   .55→.75に上げることでbの実効コントラストを底上げした(emは4.5:1基準の
   ままなのでチップを維持、対象外)。 */
.sao-top-dimg b {
  position: absolute; left: 22px; bottom: 16px; color: #fff; font-size: 21px; z-index: 2;
  letter-spacing: .04em; font-weight: 700; text-shadow: 0 2px 12px rgba(0,0,0,.34);
}
/* 指摘130■5(2026-08-30): 見本の.dept .tagに合わせ、下地の紺色チップを廃止し、
   --sao-top-ice-txtの文字+短い線(::after)に変更。
   【指摘131■3(2026-08-30)で影を強化】指摘130■5時点の単純なぼかし影
   (0 1px 10px rgba(0,0,0,.55))では、実測で最悪1.3〜1.4:1程度までしか
   確保できないことが判明していた。帯・グラデーションを強めるのではなく
   (■2のeyebrow/リード文/SCROLLと同じ方針)、字の輪郭に沿った複数方向の
   ハードな影+滲み影に強化した(reports/20260830-instr131-impl.mdに実測
   結果を記載)。 */
.sao-top-dimg em {
  position: absolute; left: 15px; top: 13px; color: var(--sao-top-ice-txt); z-index: 2;
  font-size: 9.5px; letter-spacing: .2em; font-style: normal; font-weight: 700;
  display: inline-block;
  text-shadow:
    1px 1px 1px rgba(0,0,0,.9), -1px -1px 1px rgba(0,0,0,.9),
    1px -1px 1px rgba(0,0,0,.9), -1px 1px 1px rgba(0,0,0,.9),
    0 2px 8px rgba(0,0,0,.75);
}
.sao-top-dimg em::after {
  content: ""; display: block; width: 22px; height: 2px; margin-top: 6px;
  background: var(--sao-top-ice-line);
}
.sao-top-dbody { padding: 19px 22px 23px; }
/* 指摘130■5: ホバー時(スマホは@media(hover:none)で常時)に開く部門内の
   主要ページ一覧。見本の.dept .menuは写真上への半透明グラデーション表示だが、
   ここは白背景の.sao-top-dbody内に置くため、白背景でも視認できるよう
   ブルー系の淡いグラデーション+枠線に配色を調整した(挙動・
   「半透明+グラデーション+枠線」という質感自体は見本を踏襲)。 */
.sao-top-dmenu {
  margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 7px;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .35s ease, opacity .3s ease, margin .35s ease;
}
.sao-top-dcard:hover .sao-top-dmenu, .sao-top-dcard:focus-within .sao-top-dmenu {
  max-height: 96px; opacity: 1; margin-bottom: 13px;
}
.sao-top-dmenu li {
  font-size: 11.5px; font-weight: 700; color: var(--sao-top-blue); padding: 5px 10px; border-radius: 3px;
  background: linear-gradient(135deg, rgba(11,90,158,.11), rgba(11,90,158,.04));
  border: 1px solid rgba(11,90,158,.28);
}
@media (hover: none) {
  .sao-top-dmenu { max-height: 96px; opacity: 1; margin-bottom: 13px; }
}
.sao-top-dbody p { color: var(--sao-top-muted); font-size: 13.5px; line-height: 1.7; }
.sao-top-dbody span { display: inline-block; margin-top: 13px; color: var(--sao-top-blue); font-weight: 700; font-size: 13px; }

/* ---------- 大会情報 ---------- */
.sao-top-comp { background: var(--sao-top-navy); color: #fff; }
.sao-top-comp .sao-top-lab { color: var(--sao-top-sky); }
.sao-top-comp .sao-top-sub { color: rgba(255,255,255,.62); }
.sao-top-cgrid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.sao-top-ccard {
  background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.13);
  border-radius: 11px; padding: 26px 24px 22px; transition: .32s, outline 0s; position: relative; overflow: hidden;
  /* タイトルの文字数によって行数が変わっても(2行に折り返しても)、カードの高さと
     ボタン行の位置を揃えるための実装。.sao-top-cgrid側のalign-itemsはgridの既定値
     stretchのままなので、各カードの高さは行内で最も高いカードに揃う。カード自身を
     縦方向flexにし、ボタン行(.sao-top-cbtns)にmargin-top:autoを与えることで、
     カードの高さがどれだけ余っても余白がボタンの直前に集まり、ボタンが常に下端に
     揃う(タイトルにmin-heightを固定する方法は、将来3行になるタイトルが現れた際に
     破綻するため採用しない。2026-08-14、レビュー指摘により対応)。 */
  display: flex; flex-direction: column;
}
.sao-top-ccard::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--sao-top-sky);
  transform: scaleY(0); transform-origin: bottom; transition: .4s, outline 0s;
}
.sao-top-ccard:hover { background: rgba(255,255,255,.1); transform: translateY(-6px); }
.sao-top-ccard:hover::before { transform: scaleY(1); transform-origin: top; }
.sao-top-cdate { font-size: 12px; letter-spacing: .13em; color: var(--sao-top-sky); font-weight: 800; }
.sao-top-ccard h3 { font-size: 17.5px; margin: 11px 0 14px; line-height: 1.5; font-weight: 700; }
.sao-top-ccard h3 a { color: #fff; }
.sao-top-cmeta {
  font-size: 12.5px; color: rgba(255,255,255,.6); display: flex; flex-direction: column; gap: 5px;
  padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.13);
}
.sao-top-cbtns { display: flex; gap: 9px; margin-top: auto; padding-top: 17px; }
.sao-top-cb { flex: 1; text-align: center; padding: 10px 0; border-radius: 5px; font-size: 12.5px; font-weight: 700; transition: .24s, outline 0s; display: block; }
.sao-top-cb-y { background: var(--sao-top-blue); color: #fff; }
.sao-top-cb-y:hover { background: var(--sao-top-sky); }
/* 指摘97■5(2026-08-25): 枠線がカード背景(navy+カード地の合成(23,57,87))に
   対して2.61:1しか無く、非テキストUI部品の境界線の基準3:1を下回って
   いた(指摘96で発見)。このボタンの背景は大会情報セクションの単色navy
   固定で写真のような可変要因が無いため、必要最小限の不透明度に絞り込める。
   .32→.4で理論値3.263:1を確保。指摘99の指摘により「はず」で済ませず、
   実際のスクリーンショット画素を実測して確認済み(320/375/1440pxの3幅とも
   境界線の実ピクセル値はrgb(115,136,154)で理論合成値rgb(115.8,136.2,
   154.2)とほぼ一致、実測コントラスト比3.25:1で3:1を満たす。文字色
   (rgba(255,255,255,.9)、基準4.5:1)は変更していないため9.99:1のまま。 */
.sao-top-cb-o { border: 1.5px solid rgba(255,255,255,.4); color: rgba(255,255,255,.9); }
.sao-top-cb-o:hover { border-color: #fff; background: rgba(255,255,255,.09); }
.sao-top-cb-n { background: rgba(255,255,255,.07); color: rgba(255,255,255,.34); cursor: default; }

/* ---------- 検定・資格 ---------- */
.sao-top-edu { background: #fff; }
.sao-top-egrid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: center; }
.sao-top-evisual {
  border-radius: 12px; height: 330px; position: relative; overflow: hidden;
  background: linear-gradient(150deg, #0B5A9E, #6FBFD4);
}
.sao-top-evisual .sao-top-mtns2 { position: absolute; left: 0; right: 0; bottom: 0; height: 52%; }
.sao-top-evisual .sao-top-mtns2 svg { width: 100%; height: 100%; }
.sao-top-echip { display: flex; flex-wrap: wrap; gap: 9px; margin: 22px 0 26px; }
/* 指摘105(2026-08-26): 押しても何も起きなかった<span>を、合格者アーカイブの
   資格種別絞り込みへのリンク<a>に変更した。ピル型・色は従来のまま維持し、
   下線を消して見た目を変えない一方、hover/focus-visibleで押せることが
   わかるようにした(キーボード操作でもTab移動+視覚的なフォーカスが
   分かる)。 */
.sao-top-echip a { background: var(--sao-top-ice); color: var(--sao-top-blue); border-radius: 20px; padding: 7px 16px; font-size: 12.5px; font-weight: 700; text-decoration: none; transition: .2s, outline 0s; display: inline-block; }
.sao-top-echip a:hover { background: var(--sao-top-blue); color: #fff; }
.sao-top-echip a:focus-visible { outline: 2px solid var(--sao-top-blue); outline-offset: 2px; }
.sao-top-etext p { color: var(--sao-top-muted); font-size: 14.5px; }

/* ---------- バナー(既存の site-body-bottom を等幅・等高に再構成) ---------- */
body.home .site-body-bottom { background: var(--sao-top-ice); padding: 64px 0; }
body.home .site-body-bottom .container {
  max-width: 1180px; display: grid; grid-template-columns: repeat(4,1fr); gap: 18px;
}
body.home .site-body-bottom .widget {
  background: #fff; border-radius: 9px; height: 96px; display: flex; align-items: center;
  justify-content: center; box-shadow: 0 1px 8px rgba(10,46,77,.07); transition: .28s, outline 0s; padding: 0 14px;
}
body.home .site-body-bottom .widget:hover { transform: translateY(-4px); box-shadow: 0 12px 26px rgba(10,46,77,.14); }
body.home .site-body-bottom .widget figure { margin: 0; width: 100%; text-align: center; }
body.home .site-body-bottom .widget img { max-width: 100%; max-height: 64px; width: auto; height: auto; display: inline-block; }

/* ---------- フッター ---------- */
.sao-top-footer { background: var(--sao-top-navy); color: rgba(255,255,255,.62); padding: 64px 0 28px; font-size: 13px; }
.sao-top-fgrid {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 36px; padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.sao-top-fgrid b { color: #fff; display: block; margin-bottom: 15px; font-size: 13.5px; letter-spacing: .04em; }
.sao-top-fgrid a { display: block; padding: 5px 0; transition: .2s, outline 0s; color: rgba(255,255,255,.62); text-decoration: none; }
.sao-top-fgrid a:hover { color: var(--sao-top-sky); }
.sao-top-fbrand p { margin-top: 12px; line-height: 1.85; font-size: 12.5px; }
/* 指摘92(2026-08-25): 3.47:1で他のフッター文字(6.24:1で合格)より薄く、
   WCAG AA(小さい文字、11.5px、基準4.5:1)を満たしていなかった。他の
   フッター文字と揃える意図で不透明度だけを.4→.62に上げた(フォントサイズ・
   レイアウトは無変更)。 */
.sao-top-copy { padding-top: 24px; text-align: center; font-size: 11.5px; color: rgba(255,255,255,.62); }

@media (max-width: 900px) {
  .sao-top-dgrid, .sao-top-cgrid { grid-template-columns: 1fr 1fr; }
  body.home .site-body-bottom .container { grid-template-columns: 1fr 1fr; }
  .sao-top-egrid { grid-template-columns: 1fr; gap: 30px; }
  .sao-top-nrow { grid-template-columns: 76px 84px 1fr; gap: 12px; padding: 17px 4px; }
  .sao-top-narrow { display: none; }
  .sao-top-section { padding: 74px 0; }
  .sao-top-fgrid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .sao-top-dgrid, .sao-top-cgrid { grid-template-columns: 1fr; }
  body.home .site-body-bottom .container { grid-template-columns: 1fr; }
  .sao-top-nrow { grid-template-columns: 1fr; gap: 7px; }
  .sao-top-tag { width: 88px; }
  .sao-top-fgrid { grid-template-columns: 1fr; gap: 24px; }
  /* 指摘63(2026-08-22): ヒーローの2ボタンが縦積みになるこの幅で、主CTA
     (`.sao-btn`、css/sao-buttons.css側で同じ600px以下のブレークポイント時に
     `flex:1 1 auto`が指定済み)は自分の行いっぱいに広がる一方、
     誘導ボタン(`.sao-top-btn-ghost`、flex-growの指定なし)は文字幅ぴったり
     までしか広がらず、2つの幅が揃っていなかった。既存のCTA側と同じ
     `flex:1 1 auto`を指定し、同じ考え方(縦積み時は横幅いっぱい)で揃えた。 */
  .sao-top-hero-cta { flex-direction: column; }
  .sao-top-hero-cta > a { flex: 1 1 auto; }
}

/* prefers-reduced-motion: アニメーションを抑える */
@media (prefers-reduced-motion: reduce) {
  .sao-top-slide, .sao-top-slide img, .sao-top-eyebrow, .sao-top-hero h1,
  .sao-top-hero-lead, .sao-top-hero-cta, .sao-top-scrollcue::after, .sao-top-rv {
    animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important;
  }
  .sao-top-slide { opacity: 1; }
  .sao-top-slide:not(:first-child) { display: none; }
}