@charset "UTF-8";
/* ==========================================================================
   ランク図鑑 — デザインシステム v4「年鑑」

   立ち返った反省
   --------------
   v3 は斜めストライプ・蛍光ペン・押し込みボタン・多重の角丸で
   「賑やかさ」を作ろうとして失敗した。あれは装飾であって設計ではない。
   背景に柄を敷くほど、肝心の数字が弱くなる。

   v4 の方針
   ---------
   1. 賑やかさは「数字と順位」で出す。背景では出さない。
   2. 緑は塗りではなく**インク**として扱う。罫・見出し・マストヘッドに使う。
   3. 面は生成りの紙。影も勾配も付けない。平らなインクと余白で組む。
   4. 金は箔。1位と罫の一部にだけ差す。蛍光ペンには使わない。
   5. 見出しは二重罫（太い緑＋細い金）。塗りつぶした帯は使わない。
   6. 角丸はほぼ持たない（2px）。大きな角丸はアプリUIの記号で、印刷物には無い。

   ★画像ファイルを使わない。@see docs/DECISIONS.md D-010
   ★ダークモードは持たない。@see docs/DECISIONS.md D-022

   目次
     1. トークン
     2. リセットと基本
     3. 版面（地・マストヘッド・面）
     4. ヘッダー・ナビ
     5. パンくず
     6. 見出しと本文
     7. カード
     8. 結論ブロック
     9. 出典ボックス
    10. 表彰台
    11. 順位表
    12. タイル地図
    13. 認定証
    14. 部品
    15. 広告枠
    16. フッター
    17. ユーティリティ・演出
   ========================================================================== */

/* ==========================================================================
   1. トークン
   ========================================================================== */

:root {
    color-scheme: only light;

    /* --- 緑（インク） ---------------------------------------------------
       鮮やかな緑ではなく、印刷インクの深い緑にする。
       彩度を落とすと、同じ緑でも安さが消えて落ち着く。 */
    --ground:       #0c5a41;
    --ground-deep:  #073d2c;
    --ground-line:  rgba(251, 249, 243, .22);

    /* --- 紙 -------------------------------------------------------------
       純白にしない。わずかに温かい生成りにすると、
       同じ余白でも紙らしく見えて、文字が硬くならない。 */
    --paper:        #fbf9f3;
    --paper-raised: #ffffff;
    --paper-sunken: #f4f1e8;

    /* --- 墨 ------------------------------------------------------------- */
    --ink:          #1a201c;
    --ink-soft:     #454b46;
    --ink-mute:     #7b7f78;

    /* --- 箔（金）--------------------------------------------------------
       黄色ではなく、くすんだ金。蛍光色は使わない。 */
    --gold:         #b08a2e;
    --gold-soft:    #c8a13c;
    --gold-pale:    #e3d2a4;

    /* --- 順位 ------------------------------------------------------------ */
    --rank1:        #b08a2e;
    --rank1-bg:     #f7f0dd;
    --rank2:        #8b9198;
    --rank2-bg:     #f0f2f4;
    --rank3:        #a06a3c;
    --rank3-bg:     #f6ece2;

    /* --- 注意喚起。災害系で使うが、煽らないよう彩度を落とす -------------- */
    --alert:        #8f3d20;
    --alert-bg:     #f9efe8;
    --info:         #0c5a41;
    --info-bg:      #eef4f0;

    /* --- 罫 -------------------------------------------------------------- */
    --rule:         #ddd8ca;
    --rule-strong:  #bdb6a2;

    /* --- 余白 ------------------------------------------------------------ */
    --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
    --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

    /* --- 文字 ------------------------------------------------------------
       表題は明朝。年鑑・図鑑の見出しは明朝で組まれてきた。
       これだけで「まとめサイト」との距離がはっきり出る。
       本文と数値はゴシック。読みやすさが要るところに書体を凝らない。 */
    --font-serif: "Hiragino Mincho ProN", "Yu Mincho", YuMincho,
                  "Noto Serif JP", "MS PMincho", serif;
    --font-sans: -apple-system, BlinkMacSystemFont, "Hiragino Sans",
                 "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI",
                 Meiryo, sans-serif;
    --font-num: "Helvetica Neue", Arial, "Hiragino Sans", sans-serif;

    --fs-xs: 0.75rem; --fs-sm: 0.8125rem; --fs-base: 1rem;
    --fs-md: 1.0625rem; --fs-lg: 1.1875rem; --fs-xl: 1.4rem;
    --fs-2xl: 1.75rem; --fs-3xl: 2.2rem;

    --lh-tight: 1.4;
    --lh-base:  1.9;

    --radius: 2px;

    --container: 1100px;
    --measure:   38rem;
}

/* ==========================================================================
   2. リセットと基本
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    background: var(--ground);
}

body {
    margin: 0;
    color: var(--ink);
    background: var(--ground);
    font-family: var(--font-sans);
    font-size: var(--fs-md);
    line-height: var(--lh-base);
    line-break: strict;
    overflow-wrap: anywhere;
    word-break: normal;
}

h1, h2, h3, h4 { margin: 0 0 var(--s-3); line-height: var(--lh-tight); font-weight: 700; }

p { margin: 0 0 var(--s-4); }

a {
    color: var(--ground);
    text-decoration-thickness: 1px;
    text-underline-offset: .2em;
}
a:hover { color: var(--gold); }

/* ★押せる場所は必ず指の形にする。@see docs/RULES.md 6 */
a[href], button, summary, label[for], select,
[role="button"], [role="tab"], .is-clickable { cursor: pointer; }

button[disabled], .is-disabled { cursor: not-allowed; }

:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

img, svg { max-width: 100%; height: auto; vertical-align: middle; }

/* ★数字は必ず等幅にする。桁が揃わない順位表は読めない。 */
table, .num, .rank-table td, data {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

hr { border: 0; border-top: 1px solid var(--rule); margin: var(--s-6) 0; }

::selection { background: var(--gold-pale); color: var(--ink); }

/* ==========================================================================
   3. 版面
   ========================================================================== */

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--s-5);
}
.container--narrow { max-width: 780px; }

/* --------------------------------------------------------------------------
   マストヘッド

   ★h1 は必ずここに置く。本文の面には置かない。

     v3 では緑の板を白い面の中に入れていた。
     緑→白→緑と入れ子になり、どれが主役か分からない濁った構造だった。
     見出しは地の上、本文は紙の上、と層を分ければ入れ子が消える。
   -------------------------------------------------------------------------- */

.masthead {
    background: var(--ground);
    color: var(--paper);
    padding-block: var(--s-7) var(--s-7);
    border-bottom: 1px solid var(--ground-line);
}

.masthead h1 {
    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 4.2vw, 2.4rem);
    letter-spacing: .05em;
    color: #fff;
    margin: 0;
}

.masthead--center { text-align: center; }
.masthead--center h1 { font-size: clamp(1.7rem, 5vw, 2.7rem); }

.masthead__meta {
    margin: var(--s-4) 0 0;
    font-size: var(--fs-sm);
    color: rgba(251, 249, 243, .72);
}
.masthead__meta a { color: var(--gold-pale); }

.masthead__lead {
    margin: var(--s-4) auto 0;
    max-width: 34rem;
    color: rgba(251, 249, 243, .9);
}
.masthead__lead strong { color: #fff; font-weight: 700; }

/*
   小見出し（欧文の柱）。左右に細い罫を伸ばす。
   年鑑の扉に入っている、あの一本の線。
*/
.kicker {
    display: flex;
    align-items: center;
    gap: 1.1em;
    margin: 0 0 var(--s-4);
    font-size: .7rem;
    letter-spacing: .34em;
    text-transform: uppercase;
    color: var(--gold-pale);
    font-weight: 600;
}
.kicker::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: .35; }
.masthead--center .kicker { justify-content: center; }
.masthead--center .kicker::before { content: ""; flex: 1; height: 1px; background: currentColor; opacity: .35; }

/* 紙の面 */
.sheet {
    background: var(--paper);
    border-radius: var(--radius);
    padding: var(--s-8) var(--s-6) var(--s-9);
    margin-inline: auto;
    max-width: var(--container);
}
.sheet > .container { padding-inline: 0; }

@media (max-width: 640px) {
    .sheet { padding: var(--s-7) var(--s-4) var(--s-8); border-radius: 0; }
    .container { padding-inline: var(--s-4); }
    .masthead { padding-block: var(--s-6); }
}

.stack > * + * { margin-top: var(--s-6); }
.stack-lg > * + * { margin-top: var(--s-8); }

.main { padding: 0; }

/* ==========================================================================
   4. ヘッダー・ナビ
   ========================================================================== */

.site-header {
    background: var(--ground-deep);
    color: var(--paper);
    border-bottom: 1px solid var(--ground-line);
}

.site-header__inner {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    min-height: 68px;
    padding-block: var(--s-3);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    text-decoration: none;
    color: inherit;
    flex: 0 0 auto;
}

.brand__name {
    font-family: var(--font-serif);
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: .18em;
    color: #fff;
}
.brand__en {
    display: block;
    font-size: 9px;
    letter-spacing: .32em;
    color: rgba(251, 249, 243, .5);
    margin-top: 2px;
}

.site-nav {
    margin-left: auto;
    display: flex;
    gap: var(--s-4);
    flex-wrap: wrap;
}
.site-nav a {
    font-size: var(--fs-sm);
    color: rgba(251, 249, 243, .8);
    text-decoration: none;
    padding-block: var(--s-1);
    border-bottom: 1px solid transparent;
    transition: color .15s ease, border-color .15s ease;
}
.site-nav a:hover { color: #fff; border-bottom-color: var(--gold-soft); }
.site-nav a[aria-current="page"] { color: var(--gold-pale); border-bottom-color: var(--gold-soft); }

/*
   ★狭い画面ではヘッダーを縦に積む。
     1行に収める指定のままだと、ロゴの右にメニューが折り返して
     文字が段違いに散らばる。375px で実際にそうなっていた。
*/
@media (max-width: 700px) {
    .site-header__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--s-2);
        min-height: 0;
    }
    .site-nav {
        margin-left: 0;
        width: 100%;
        gap: var(--s-2) var(--s-4);
        font-size: var(--fs-xs);
    }
    .brand__name { font-size: 1.15rem; letter-spacing: .12em; }
    .brand__en { letter-spacing: .24em; }
}

/* ==========================================================================
   5. パンくず（地の上）
   ========================================================================== */

.breadcrumb {
    font-size: var(--fs-sm);
    color: rgba(251, 249, 243, .6);
    padding-block: var(--s-3);
    background: var(--ground);
}
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; padding: 0; }
.breadcrumb li + li::before { content: "／"; margin-right: var(--s-2); opacity: .45; }
.breadcrumb a { color: rgba(251, 249, 243, .6); text-decoration: none; }
.breadcrumb a:hover { color: var(--gold-pale); }
.breadcrumb [aria-current="page"] { color: rgba(251, 249, 243, .85); }

/* ==========================================================================
   6. 見出しと本文
   ========================================================================== */

/*
   節の見出しは二重罫。太い緑の下に細い金を一本。
   塗りつぶした帯を使わないのは、帯にすると
   「見出しが強い」のではなく「色が強い」だけになるため。
*/
.prose h2,
section > h2:not(.source-box__title) {
    position: relative;
    font-family: var(--font-serif);
    font-size: var(--fs-xl);
    letter-spacing: .04em;
    color: var(--ground);
    margin-top: var(--s-8);
    padding-bottom: var(--s-2);
    border-bottom: 2px solid var(--ground);
}
.prose h2::after,
section > h2:not(.source-box__title)::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -4px;
    height: 1px;
    background: var(--gold-soft);
    opacity: .75;
}

.prose { max-width: var(--measure); }
.prose h3 {
    margin-top: var(--s-6);
    font-size: var(--fs-lg);
    color: var(--ground);
    padding-left: .7em;
    border-left: 3px solid var(--gold-soft);
}
.prose ul, .prose ol { padding-left: 1.4em; margin: 0 0 var(--s-4); }
.prose li { margin-bottom: var(--s-2); }

/*
   ★強調に蛍光ペンを使わない。
     あれは情報商材のページの記号になってしまっている。
     太さと色だけで十分に立つ。
*/
.prose strong, .lead-block strong { font-weight: 700; color: var(--ground); }

/* 分類などの小さな札 */
.plate-caption {
    display: inline-block;
    font-size: var(--fs-xs);
    letter-spacing: .18em;
    color: var(--ink-mute);
    margin: 0 0 var(--s-3);
}

.ornament {
    display: flex; align-items: center; gap: var(--s-3);
    margin-block: var(--s-7);
}
.ornament::before, .ornament::after {
    content: ""; flex: 1; height: 1px; background: var(--rule-strong);
}

/* ==========================================================================
   7. カード
   ========================================================================== */

.specimen {
    position: relative;
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    border-top: 3px solid var(--ground);
    border-radius: var(--radius);
    padding: var(--s-5);
}

.specimen__label {
    display: inline-block;
    font-size: var(--fs-xs);
    letter-spacing: .12em;
    color: var(--ground);
    border-bottom: 1px solid var(--gold-soft);
    padding-bottom: 2px;
    margin-bottom: var(--s-3);
}

.card-grid {
    display: grid;
    gap: var(--s-4);
    grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
}

a.specimen {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s ease, background-color .15s ease;
}
a.specimen:hover { border-color: var(--gold); background: var(--paper-sunken); }

/* 一覧カード */
.rank-card { display: flex; flex-direction: column; }
.rank-card__title {
    font-family: var(--font-serif);
    font-size: var(--fs-lg);
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .02em;
    margin: 0 0 var(--s-4);
}

/*
   ★カードに1位を出す。
     題名だけのカードは、押してみるまで中身が分からない。
     ランキングの一覧で最初に知りたいのは1位である。
*/
.rank-card__top {
    display: flex;
    align-items: baseline;
    gap: var(--s-3);
    margin-top: auto;
    padding-top: var(--s-3);
    border-top: 1px solid var(--rule);
}
.rank-card__crown {
    flex: 0 0 auto;
    font-family: var(--font-serif);
    font-size: var(--fs-xs);
    letter-spacing: .1em;
    color: var(--gold);
}
.rank-card__who { font-weight: 700; }
.rank-card__val {
    margin-left: auto;
    font-family: var(--font-num);
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--ground);
    white-space: nowrap;
}
.rank-card__val small { font-size: var(--fs-xs); color: var(--ink-mute); margin-left: 2px; }
.rank-card__meta { font-size: var(--fs-xs); color: var(--ink-mute); margin: var(--s-3) 0 0; }

/* ==========================================================================
   8. 結論ブロック

   ★ページの最初に必ず置く。LLM がここだけ読んでも正しく引用できる密度にする。
     @see docs/SPEC.md 5 / 10.2
   ========================================================================== */

.lead-block {
    position: relative;
    background: var(--paper-sunken);
    border-top: 2px solid var(--ground);
    border-bottom: 1px solid var(--rule-strong);
    padding: var(--s-5) var(--s-5) var(--s-4);
    font-size: var(--fs-lg);
    line-height: 1.95;
}
.lead-block p:last-child { margin-bottom: 0; }
.lead-block__label {
    display: block;
    font-family: var(--font-serif);
    font-size: var(--fs-xs);
    letter-spacing: .22em;
    color: var(--gold);
    margin-bottom: var(--s-2);
}

/* ==========================================================================
   9. 出典ボックス

   ★このサイトで最も重要な部品。数値と同じ画面内に必ず出す。
     たたんで隠さない。出典を隠すサイトは出典を持っていないのと同じ。
   ========================================================================== */

.source-box {
    border: 1px solid var(--rule-strong);
    border-left: 3px solid var(--ground);
    background: var(--paper-raised);
    padding: var(--s-4) var(--s-5);
    font-size: var(--fs-sm);
}
.source-box__title {
    display: flex; align-items: baseline; gap: var(--s-2);
    font-family: var(--font-serif);
    font-size: var(--fs-base);
    letter-spacing: .1em;
    color: var(--ground);
    margin: 0 0 var(--s-3);
    padding-bottom: var(--s-2);
    border-bottom: 1px solid var(--rule);
}
.source-box dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--s-2) var(--s-5);
    margin: 0;
}
.source-box dt { color: var(--ink-mute); white-space: nowrap; }
.source-box dd { margin: 0; }

.tier {
    display: inline-block;
    padding: 0 7px;
    font-size: 11px;
    letter-spacing: .04em;
    border: 1px solid currentColor;
}
.tier--s1 { color: var(--ground); }
.tier--s2 { color: var(--gold); }
.tier--s3 { color: var(--ink-mute); }

/* ==========================================================================
   10. 表彰台
   ========================================================================== */

.podium {
    display: grid;
    gap: var(--s-4);
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
}

.podium__item {
    text-align: center;
    background: var(--paper-raised);
    border: 1px solid var(--rule-strong);
    border-top-width: 3px;
    padding: var(--s-5) var(--s-3) var(--s-4);
}
/* 並びは 2位・1位・3位（表彰台の形） */
.podium__item--1 { order: 2; border-top-color: var(--rank1); background: var(--rank1-bg); }
.podium__item--2 { order: 1; border-top-color: var(--rank2); }
.podium__item--3 { order: 3; border-top-color: var(--rank3); }

/* 順位の丸。勾配も影も付けない。輪だけ。 */
.medal {
    width: 44px; height: 44px;
    margin: 0 auto var(--s-3);
    border-radius: 50%;
    display: grid; place-items: center;
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 19px;
    background: transparent;
}
.medal--1 { border: 2px solid var(--rank1); color: var(--rank1); width: 52px; height: 52px; font-size: 23px; }
.medal--2 { border: 2px solid var(--rank2); color: var(--rank2); }
.medal--3 { border: 2px solid var(--rank3); color: var(--rank3); }

.podium__place {
    display: block;
    font-size: var(--fs-xs);
    letter-spacing: .16em;
    color: var(--ink-mute);
    margin: 0 0 var(--s-2);
}
.podium__name {
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: var(--fs-lg);
    margin-bottom: var(--s-2);
}
.podium__value {
    font-family: var(--font-num);
    font-size: clamp(1.7rem, 4.5vw, 2.3rem);
    font-weight: 700;
    color: var(--ground);
    letter-spacing: -.02em;
    line-height: 1.1;
}
.podium__item--1 .podium__value { font-size: clamp(2rem, 5.5vw, 2.8rem); }
.podium__unit { font-size: var(--fs-sm); color: var(--ink-mute); margin-left: 3px; }

/* ==========================================================================
   11. 順位表
   ========================================================================== */

.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--rule-strong);
    background: var(--paper-raised);
}

.rank-table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); }
.rank-table th, .rank-table td {
    padding: var(--s-3) var(--s-4);
    text-align: left;
    border-bottom: 1px solid var(--rule);
    vertical-align: middle;
}
.rank-table thead th {
    position: sticky; top: 0;
    background: var(--ground);
    color: var(--paper);
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: .06em;
    white-space: nowrap;
    z-index: 1;
    border-bottom: 0;
}
.rank-table thead th:hover { background: var(--ground-deep); }
.rank-table tbody tr:last-child td { border-bottom: 0; }
.rank-table tbody tr:hover { background: var(--paper-sunken); }

/* 上位3行は左の罫で示す。塗りは薄く。 */
.rank-table tbody tr.is-top1 { background: var(--rank1-bg); box-shadow: inset 3px 0 0 var(--rank1); }
.rank-table tbody tr.is-top2 { background: var(--rank2-bg); box-shadow: inset 3px 0 0 var(--rank2); }
.rank-table tbody tr.is-top3 { background: var(--rank3-bg); box-shadow: inset 3px 0 0 var(--rank3); }

.rank-table .col-rank  { width: 4.5em; text-align: center; }
/*
   ★対象名を途中で折らない。
     日本語は既定でどこでも改行されるので、放っておくと
     「信濃／川」「阿武隈／川」のように名前が割れる。名前が割れた表は読めない。
*/
.rank-table .col-label {
    min-width: 7em;
    word-break: keep-all;
    overflow-wrap: normal;
}
.rank-table .col-value { text-align: right; white-space: nowrap; font-weight: 700; font-size: var(--fs-lg); }
.rank-table .col-source { font-size: var(--fs-sm); color: var(--ink-mute); }

.rank-table th[data-sort] { user-select: none; }
.rank-table th[data-sort]::after { content: "↕"; margin-left: .4em; opacity: .55; font-size: .85em; }
.rank-table th[aria-sort="ascending"]::after  { content: "↑"; opacity: 1; }
.rank-table th[aria-sort="descending"]::after { content: "↓"; opacity: 1; }

/* 順位。明朝の数字。活字の見え方に寄せる。 */
.rank-badge {
    display: inline-block;
    min-width: 2em;
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: var(--fs-lg);
    color: var(--ink-soft);
}
.rank-badge--1 { color: var(--rank1); }
.rank-badge--2 { color: var(--rank2); }
.rank-badge--3 { color: var(--rank3); }

/* 順位バー。
   ★0 起点にしない。狭い範囲で競う指標を 0 から描くと
     全部同じ長さになり、図として何も語らない。最小値起点で差を見せる。 */
.bar {
    display: block;
    height: 6px;
    background: var(--paper-sunken);
    box-shadow: inset 0 0 0 1px var(--rule);
    overflow: hidden;
    min-width: 80px;
}
/*
 * ★JS が動かなくても正しい長さで出る作りにする。
 *   既定＝最終状態。@see docs/DECISIONS.md D-021
 */
.bar__fill {
    display: block;
    height: 100%;
    width: var(--bar-w, 0%);
    background: var(--ground);
    transform-origin: left center;
}
.bar--gold .bar__fill { background: var(--gold); }

/* スマホでは表をカードに組み替える。横スクロールの表は読まれない。 */
@media (max-width: 640px) {
    .rank-table thead { display: none; }
    .rank-table, .rank-table tbody, .rank-table tr, .rank-table td { display: block; width: 100%; }
    /*
       ★display を書き換えているので、hidden 属性が効かなくなる。
         [hidden] の既定（display:none）より、こちらの指定のほうが強い。
         たたむ機能が黙って動かなくなるので、明示的に打ち消す。
    */
    .rank-table tbody tr[hidden] { display: none; }
    .table-wrap { overflow-x: visible; border: 0; background: transparent; }

    .rank-table tr {
        background: var(--paper-raised);
        border: 1px solid var(--rule-strong);
        border-left-width: 3px;
        margin-bottom: var(--s-3);
        padding: var(--s-3) var(--s-4);
    }
    .rank-table tbody tr.is-top1 { border-left-color: var(--rank1); }
    .rank-table tbody tr.is-top2 { border-left-color: var(--rank2); }
    .rank-table tbody tr.is-top3 { border-left-color: var(--rank3); }

    .rank-table td {
        border: 0;
        padding: var(--s-1) 0;
        display: grid;
        grid-template-columns: 6.5em 1fr;
        gap: var(--s-3);
        align-items: baseline;
    }
    .rank-table td::before {
        content: attr(data-label);
        color: var(--ink-mute);
        font-size: var(--fs-sm);
    }
    .rank-table .col-value { text-align: left; font-size: var(--fs-xl); }
    .rank-table .col-rank  { text-align: left; }

    .podium { grid-template-columns: 1fr; }
    .podium__item--1 { order: 0; }
    .podium__item--2 { order: 1; }
    .podium__item--3 { order: 2; }
}

/* ==========================================================================
   12. 分布図（日本地図）

   ★形は推測で描かない。
     国土地理院「地球地図日本」の境界データから起こしている。
     手で描いた日本地図は必ず嘘になるし、見る人はすぐ気づく。
     @see app/Console/Commands/MapBuild.php

   ★沖縄は別枠に置く。
     地図に収めようとすると図の6割が海になり、本土が小さくなる。
     九州と南西諸島が左下を占めるので、必ず空く左上に枠を取る。
   ========================================================================== */

.jmap {
    margin: 0;
    border: 1px solid var(--rule-strong);
    background: var(--paper-raised);
    padding: var(--s-5);
}

.jmap__caption { display: block; margin-bottom: var(--s-4); }
.jmap__title {
    display: block;
    font-family: var(--font-serif);
    font-size: var(--fs-md);
    color: var(--ground);
    letter-spacing: .06em;
    margin-bottom: var(--s-1);
}
.jmap__note { display: block; font-size: var(--fs-sm); color: var(--ink-mute); }

/*
   ★地図と読み取り表を横に並べる。
     日本列島は縦長なので、地図だけ置くと左右に大きな余白ができる。
     余白のまま出すと「作りかけ」に見えるので、
     県名と数値が読める表を隣に置いて、図として完結させる。
*/
.jmap__body {
    display: grid;
    grid-template-columns: minmax(0, 460px) minmax(200px, 250px);
    gap: var(--s-7);
    justify-content: center;
    align-items: start;
}
.jmap__frame { display: flex; justify-content: center; }

.jmap__svg {
    display: block;
    width: 100%;
    max-width: 460px;
    height: auto;
}

/* 県の塗り。境界は紙の色で抜くと、色面が隣とくっつかない。 */
.jmap__pref path {
    stroke: var(--paper-raised);
    stroke-width: 1.1;
    stroke-linejoin: round;
    transition: opacity .13s ease;
}
.jmap__pref a { cursor: pointer; }
.jmap__pref:hover path { opacity: .62; }

/* 上位3件の縁取り */
.jmap__top { stroke-width: 3.2; stroke-linejoin: round; pointer-events: none; }
.jmap__halo { stroke: #2b3129; stroke-width: 5.6; opacity: .5; }
.jmap__top--1 { stroke: var(--rank1); }
.jmap__top--2 { stroke: var(--rank2); }
.jmap__top--3 { stroke: var(--rank3); }

/* 沖縄の別枠 */
.jmap__inset {
    fill: none;
    stroke: var(--rule-strong);
    stroke-width: 1.4;
    stroke-dasharray: 5 4;
}
.jmap__inset-label {
    font-size: 15px;
    fill: var(--ink-mute);
    font-family: var(--font-sans);
}

/* ---- 右側の読み取り表 ---- */

.jmap__side {
    display: flex;
    flex-direction: column;
    gap: var(--s-5);
    font-size: var(--fs-sm);
}

/* ---- 凡例。色と数値の対応表 ---- */

.jmap__key-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.jmap__key-list li {
    display: grid;
    grid-template-columns: 18px 1fr auto;
    gap: var(--s-2);
    align-items: center;
    padding: 3px 0;
}
.jmap__key-swatch {
    display: block;
    width: 18px; height: 12px;
    border: 1px solid rgba(0, 0, 0, .16);
}
.jmap__key-range {
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
    font-size: var(--fs-xs);
    color: var(--ink);
}
/* 件数。数字だけだと順位と紛らわしいので単位を添える。 */
.jmap__key-count { font-size: var(--fs-xs); color: var(--ink-mute); }
.jmap__key-count::after { content: '件'; }

.jmap__ledger-title {
    margin: 0 0 var(--s-2);
    font-family: var(--font-serif);
    font-size: var(--fs-sm);
    color: var(--ground);
    letter-spacing: .08em;
    border-bottom: 1px solid var(--rule-strong);
    padding-bottom: 3px;
}
.jmap__ledger-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.jmap__ledger-list li {
    display: grid;
    grid-template-columns: 1.9em 1fr auto;
    gap: var(--s-2);
    align-items: baseline;
    padding: 3px 0;
    border-bottom: 1px dotted var(--rule);
}
.jmap__ledger-list li:last-child { border-bottom: 0; }
.jmap__ledger-rank {
    font-family: var(--font-num);
    font-size: var(--fs-xs);
    color: var(--ink-mute);
    text-align: right;
}
.jmap__ledger-name { color: var(--ink); }
.jmap__ledger-value {
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
    color: var(--ground);
}

.jmap__outline-note {
    margin: 0;
    font-size: var(--fs-xs);
    color: var(--ink-mute);
    line-height: 1.8;
}
.jmap__swatch {
    display: inline-block;
    width: 11px; height: 11px;
    border: 2px solid;
    margin: 0 2px 0 4px;
    vertical-align: -1px;
}
.jmap__swatch--1 { border-color: var(--rank1); }
.jmap__swatch--2 { border-color: var(--rank2); }
.jmap__swatch--3 { border-color: var(--rank3); }

.jmap__credit {
    margin: var(--s-5) 0 0;
    padding-top: var(--s-4);
    border-top: 1px solid var(--rule);
    font-size: var(--fs-xs);
    color: var(--ink-mute);
    line-height: 1.7;
}

/* 横並びが窮屈になる幅で、表を地図の下に落とす。 */
@media (max-width: 860px) {
    .jmap__body { grid-template-columns: 1fr; gap: var(--s-5); }
    .jmap__side {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
        gap: var(--s-4) var(--s-5);
        align-items: start;
    }
    .jmap__outline-note { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
    .jmap { padding: var(--s-4); }
}


/* ==========================================================================
   13. 認定証（記録ページの主役）
   ========================================================================== */

.certificate {
    position: relative;
    text-align: center;
    background: var(--paper-raised);
    border: 1px solid var(--gold);
    padding: var(--s-8) var(--s-5) var(--s-7);
}
/* 内側にもう一本、細い罫。二重枠は賞状の記号。 */
.certificate::before {
    content: "";
    position: absolute; inset: 6px;
    border: 1px solid var(--gold);
    opacity: .45;
    pointer-events: none;
}
.certificate__kicker {
    display: inline-block;
    font-family: var(--font-serif);
    font-size: var(--fs-xs);
    letter-spacing: .34em;
    color: var(--gold);
    margin-bottom: var(--s-4);
}
.certificate__name {
    font-family: var(--font-serif);
    font-size: clamp(1.6rem, 5vw, 2.4rem);
    letter-spacing: .08em;
    margin-bottom: var(--s-3);
}
.certificate__value {
    font-family: var(--font-num);
    font-size: clamp(2.2rem, 8vw, 3.4rem);
    font-weight: 700;
    color: var(--ground);
    letter-spacing: -.02em;
    line-height: 1.05;
}
.certificate__meta {
    margin-top: var(--s-4);
    font-size: var(--fs-xs);
    color: var(--ink-mute);
    line-height: 1.8;
    max-width: 46em;
    margin-left: auto;
    margin-right: auto;
}
.certificate__rule { width: 72px; height: 1px; margin: var(--s-4) auto; background: var(--gold); }

/* ==========================================================================
   14. 部品
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center; justify-content: center;
    gap: var(--s-2);
    min-height: 46px;
    padding: var(--s-2) var(--s-6);
    border: 1px solid var(--ground);
    border-radius: var(--radius);
    background: var(--ground);
    color: var(--paper);
    font-family: inherit;
    font-size: var(--fs-base);
    font-weight: 600;
    letter-spacing: .04em;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}
.btn:hover { background: var(--ground-deep); color: var(--paper); }

.btn--ghost { background: transparent; color: var(--ground); }
.btn--ghost:hover { background: var(--paper-sunken); color: var(--ground); }

.btn--sm { min-height: 36px; padding: var(--s-1) var(--s-4); font-size: var(--fs-sm); }

.badge {
    display: inline-block;
    padding: 1px 8px;
    border: 1px solid var(--rule-strong);
    font-size: var(--fs-xs);
    color: var(--ink-soft);
}
.badge--year { color: var(--ground); border-color: var(--ground); }

.notice {
    border: 1px solid var(--rule-strong);
    border-left: 4px solid var(--info);
    background: var(--info-bg);
    padding: var(--s-4) var(--s-5);
}
.notice__title { font-weight: 700; margin-bottom: var(--s-2); color: var(--info); }
.notice p:last-child { margin-bottom: 0; }
.notice--alert { border-left-color: var(--alert); background: var(--alert-bg); }
.notice--alert .notice__title { color: var(--alert); }

.faq { border: 1px solid var(--rule-strong); background: var(--paper-raised); }
.faq details + details { border-top: 1px solid var(--rule); }
.faq summary {
    padding: var(--s-4) var(--s-5);
    font-weight: 700;
    list-style: none;
    display: flex; gap: var(--s-3); align-items: flex-start;
    transition: background-color .15s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
    content: "問";
    font-family: var(--font-serif);
    color: var(--gold);
    font-weight: 700;
    flex: 0 0 auto;
}
.faq summary:hover, .faq details[open] summary { background: var(--paper-sunken); }
.faq__answer { padding: 0 var(--s-5) var(--s-4) calc(var(--s-5) + 1.6em); color: var(--ink-soft); }
.faq__answer p:last-child { margin-bottom: 0; }

/* フォーム */
.field { margin-bottom: var(--s-5); }
.field__label { display: block; font-weight: 700; margin-bottom: var(--s-2); }
.field__hint { display: block; font-size: var(--fs-sm); color: var(--ink-mute); font-weight: 400; margin-top: 2px; }
.field__required { font-size: var(--fs-xs); color: var(--alert); margin-left: var(--s-2); }
.input, .textarea, .select {
    width: 100%;
    padding: var(--s-3) var(--s-4);
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius);
    background: #fff;
    color: var(--ink);
    font-family: inherit;
    font-size: var(--fs-base);
    line-height: 1.7;
    transition: border-color .15s ease;
}
.input:focus, .textarea:focus, .select:focus { border-color: var(--ground); outline: none; box-shadow: 0 0 0 2px rgba(12,90,65,.14); }
.textarea { min-height: 12em; resize: vertical; }
.field__error { display: block; margin-top: var(--s-2); color: var(--alert); font-size: var(--fs-sm); }
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--alert); }

/* ハニーポット。人には見せず、支援技術にも読ませない。 */
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.alert-success {
    border: 1px solid var(--rule-strong);
    border-left: 4px solid var(--ground);
    background: var(--info-bg);
    padding: var(--s-4) var(--s-5);
}

/* 実績の数字（マストヘッドの中） */
.stat-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: var(--s-7);
    border-top: 1px solid var(--ground-line);
}
.stat-strip__cell {
    padding: var(--s-4) var(--s-2) 0;
    text-align: center;
    border-right: 1px solid var(--ground-line);
}
.stat-strip__cell:last-child { border-right: 0; }
.stat-strip__num {
    display: block;
    font-family: var(--font-num);
    font-size: clamp(1.5rem, 4vw, 2.1rem);
    font-weight: 700;
    line-height: 1.15;
    color: var(--gold-pale);
}
.stat-strip__label {
    display: block;
    font-size: var(--fs-xs);
    letter-spacing: .12em;
    color: rgba(251, 249, 243, .6);
    margin-top: var(--s-1);
}

/* ==========================================================================
   15. 広告枠

   ★自動広告は挿入位置が読めない。だから主要な挿入点に高さを予約しておく。
     予約しないと広告が入った瞬間に本文が下へずれ、CLS が跳ね上がる。
     @see docs/SPEC.md 11.7
   ========================================================================== */

.ad-slot { display: block; margin-block: var(--s-7); min-height: 280px; text-align: center; contain: layout; }
@media (max-width: 640px) { .ad-slot { min-height: 250px; } }

/* 47行の表をたたむボタン。JS が入れる要素なので、既定では存在しない。 */
.table-fold__wrap { margin: var(--s-4) 0 0; text-align: center; }
.table-fold { width: 100%; }

/* ==========================================================================
   16. フッター
   ========================================================================== */

.site-footer {
    background: var(--ground-deep);
    color: rgba(251, 249, 243, .75);
    padding-block: var(--s-8) var(--s-6);
    font-size: var(--fs-sm);
    border-top: 1px solid var(--ground-line);
}
.site-footer__grid {
    display: grid;
    gap: var(--s-6);
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    margin-bottom: var(--s-7);
}
.site-footer h2 {
    font-family: var(--font-serif);
    font-size: var(--fs-sm);
    letter-spacing: .16em;
    color: var(--gold-pale);
    margin-bottom: var(--s-3);
    padding-bottom: var(--s-2);
    border-bottom: 1px solid var(--ground-line);
    border-top: 0;
}
.site-footer h2::after { display: none; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: var(--s-2); }
.site-footer a { color: rgba(251, 249, 243, .75); text-decoration: none; }
.site-footer a:hover { color: var(--gold-pale); text-decoration: underline; }

.site-footer__brand {
    display: flex; align-items: center; gap: var(--s-3);
    padding-block: var(--s-5);
    border-top: 1px solid var(--ground-line);
}
.site-footer__name {
    display: block;
    font-family: var(--font-serif);
    font-size: var(--fs-base);
    letter-spacing: .14em;
    color: var(--gold-pale);
}
.site-footer__tagline { display: block; font-size: var(--fs-xs); color: rgba(251, 249, 243, .55); }

.site-footer__bottom {
    border-top: 1px solid var(--ground-line);
    padding-top: var(--s-4);
    display: flex; flex-wrap: wrap; gap: var(--s-3);
    justify-content: space-between;
    color: rgba(251, 249, 243, .5);
    font-size: var(--fs-xs);
}

/* ==========================================================================
   17. ユーティリティ・演出
   ========================================================================== */

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%);
    white-space: nowrap; border: 0;
}

.text-mute { color: var(--ink-mute); }
.text-sm   { font-size: var(--fs-sm); }
.text-xs   { font-size: var(--fs-xs); }
.text-right { text-align: right; }
.center    { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

.updated-at { font-size: var(--fs-sm); color: var(--ink-mute); }

.brand-mark { flex: 0 0 auto; display: block; }

.skip-link {
    position: absolute;
    left: var(--s-4); top: -100px;
    z-index: 50;
    background: var(--gold-pale);
    color: var(--ink);
    padding: var(--s-2) var(--s-4);
    text-decoration: none;
    font-weight: 700;
    transition: top .18s ease;
}
.skip-link:focus { top: 0; color: var(--ink); }

/* --------------------------------------------------------------------------
   演出

   ★.is-pending は JS だけが付ける。JS が動かなければ何も隠れない。
     さらに JS 側に5秒の保険がある。@see docs/DECISIONS.md D-021
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
    .reveal { transition: opacity .45s ease, transform .45s cubic-bezier(.2,.7,.3,1); }
    .reveal.is-pending { opacity: 0; transform: translateY(8px); }

    .bar__fill { transition: transform .8s cubic-bezier(.2,.8,.25,1); }
    .bar.is-pending .bar__fill { transform: scaleX(0); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .reveal, .reveal.is-pending { opacity: 1; transform: none; }
    .bar.is-pending .bar__fill { transform: none; }
}

/* --------------------------------------------------------------------------
   災害・健康のページでは順位の色分けを外す

   ★数値の誤読が実害につながる領域で、演出が「煽り」に見えてはいけない。
     @see docs/RULES.md 9 / docs/DECISIONS.md D-014
   -------------------------------------------------------------------------- */

.is-ymyl .rank-table tbody tr.is-top1,
.is-ymyl .rank-table tbody tr.is-top2,
.is-ymyl .rank-table tbody tr.is-top3 { background: transparent; box-shadow: none; }
.is-ymyl .rank-badge--1, .is-ymyl .rank-badge--2, .is-ymyl .rank-badge--3 { color: var(--ink-soft); }
.is-ymyl .podium__item--1 { background: var(--paper-raised); }
.is-ymyl .medal--1, .is-ymyl .medal--2, .is-ymyl .medal--3 { border-color: var(--rule-strong); color: var(--ink-soft); }
.is-ymyl .bar--gold .bar__fill { background: var(--ground); }
/* 公式サイトへの導線が入る分、対象の列を広げる */
.is-ymyl .rank-table .col-label { min-width: 9.5em; }

/* 表の中に置く公式サイトへの導線 */
/* 県のページで「上位／下位」を先に見せるための小さな見出し */
.extreme-label {
    display: inline-block;
    font-size: var(--fs-xs);
    letter-spacing: .08em;
    padding: 1px 7px;
    margin-right: var(--s-2);
    border: 1px solid;
    white-space: nowrap;
}
.extreme-label--top    { color: var(--ground); border-color: var(--ground); }
.extreme-label--bottom { color: var(--ink-mute); border-color: var(--rule-strong); }

.official-link {
    display: block;
    margin-top: 3px;
    /* 「↗」だけが行に取り残されないようにする */
    white-space: nowrap;
    font-size: var(--fs-xs);
    color: var(--ink-mute);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.official-link::before { content: "↗ "; }
.official-link:hover { color: var(--ground); }

/* 災害ページの冒頭に出す注意。目立たせるが、煽らない。 */
.notice--official {
    border-left-width: 4px;
    border-left-color: var(--ground);
    background: var(--paper-raised);
}

/* --------------------------------------------------------------------------
   印刷
   -------------------------------------------------------------------------- */

@media print {
    body { background: #fff !important; color: #000; font-size: 10.5pt; }
    .site-nav, .ad-slot, .skip-link, .site-footer__grid, .ornament { display: none; }
    .sheet { max-width: none; margin: 0; padding: 0; }
    .site-header, .site-footer, .masthead { background: #fff !important; color: #000; border-color: #999; }
    .brand__name, .site-footer h2, .masthead h1, .masthead .kicker { color: #000; }
    .rank-table thead th { background: #eee !important; color: #000 !important; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}