/* ======================================================
   DESIGN D: 青緑 × ピンク（塾の判定システムに合わせた色）

   2026-10-02（43.）: 色とフォントを見本のサイトに合わせた。
   見本 https://sakura-yobiko.com/judgment-system/input
   （塾が別に持っている判定システム。Tailwind の teal-700 と pink-600 が主役）。
   並びや余白・文字の大きさは変えていない（ユーザー指示: 配置は変更しなくて良い）。

   元の「鮮やかな青 × 空色」は下の body.admin にそのまま残してある。
   生徒側だけこの色にして、管理画面は今までどおりにするため
   （ユーザー指示 2026-10-02: 管理画面はそのままで良い）。
   全部を元に戻したいときは、body.admin の値を :root に戻して body.admin を消す。
   ====================================================== */

:root {
    /* 見出し・リンク（見本の teal-700 / 800 / 600） */
    --primary: #00786f;
    --primary-dark: #005f5a;
    --primary-light: #009689;
    --sky: #ccfbf1;
    --sky-soft: #f0fdfa;
    --accent: #009689;

    /* ボタン（見本の pink-600 / 700 / 50）。
       見本は「見出しとリンクは青緑・ボタンはピンク」の2色使いなので、
       ボタン用の色を分けて持つ。管理画面では下で --primary と同じ青に戻している */
    --action: #e60076;
    --action-dark: #c6005c;
    --action-soft: #fdf2f8;

    /* 見本の本文は真っ黒、薄い字は黒の50% */
    --ink: #000000;
    --text: #000000;
    --text-mute: rgba(0, 0, 0, 0.5);
    --text-faint: #9e9e9e;

    --border: #d1d5dc;
    --border-soft: #f3f4f6;
    --bg: #ffffff;
    --bg-subtle: #f9fafb;

    /* 表の見出し（見本の結果画面は pink-500 の帯に白抜き）。
       管理画面では下で元の薄い灰色に戻している */
    --table-head-bg: #f6339a;
    --table-head-fg: #ffffff;

    /* 合格・不合格・A〜E判定など、意味を持っている色はまだ変えていない
       （結果画面の見本は別途もらう予定） */
    --success: #16a34a;
    --warning: #ca8a04;
    --danger: #dc2626;

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 12px 32px rgba(0, 120, 111, 0.12);

    /* 見本と同じ積み上げ。見本はウェブフォントを1つも読み込んでいないので、
       実際には端末のふつうのゴシック体で出る（日本語も数字も）。
       こちらも includes/config.php の SITE_FONT_URL を空にして読み込みをやめた。
       戻すときは config.php のコメントを外し、ここも元の2行に戻す */
    --font-jp: "Instrument Sans", ui-sans-serif, system-ui, sans-serif,
               "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-display: var(--font-jp);

    /* 「任意」のしるしの下地（54.）。この画面の色（--primary）の薄い版 */
    --badge-soft: #ccfbf1;
}

/* ------------------------------------------------------
   管理画面は今までの「鮮やかな青 × 空色」のまま。
   admin/_header.php も同じ assets/style.css を読むので、ここで元の値に戻す。
   43. の色を管理画面にも広げたくなったら、このかたまりを消すだけで良い。
   ------------------------------------------------------ */
body.admin {
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --primary-light: #60a5fa;
    --sky: #dbeafe;
    --sky-soft: #eff6ff;
    --accent: #0ea5e9;

    --action: #2563eb;
    --action-dark: #1d4ed8;
    --action-soft: #eff6ff;

    --ink: #1f2937;
    --text: #374151;
    --text-mute: #6b7280;
    --text-faint: #9ca3af;

    --border: #e5e7eb;

    --table-head-bg: #f9fafb;
    --table-head-fg: #374151;

    --shadow-lg: 0 12px 32px rgba(37, 99, 235, 0.12);

    --font-jp: "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", sans-serif;
    --font-display: "Inter", "Noto Sans JP", sans-serif;

    /* 生徒側は見本に合わせて外したので、管理画面だけ今までどおりにする */
    -webkit-font-smoothing: antialiased;
}
/* 見出しとヘッダーの題名も、管理画面は元の濃い灰色のまま */
body.admin h1,
body.admin .site-header__brand,
body.admin .site-header__brand:hover { color: var(--ink); }

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: var(--font-jp);
    font-size: 15px;
    line-height: 1.75;
    color: var(--text);
    background: var(--bg);
    /* 見本は -webkit-font-smoothing を指定していないので、こちらも外した（43.）。
       管理画面だけ body.admin で今までどおり antialiased にしてある */
}

h1, h2, h3, h4 {
    color: var(--ink);
    font-weight: 700;
    margin: 0 0 0.6em;
    line-height: 1.4;
    letter-spacing: -0.01em;
}
h1 { font-size: 1.9rem; color: var(--primary); }   /* 見本の題名と同じ青緑（43.） */
h2 { font-size: 1.3rem; color: var(--primary); }
h3 { font-size: 1.05rem; }
p  { margin: 0 0 1em; }

a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-dark); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Layout ---------- */
/* 67.: 下の余白は 28px → 12px（上は変えない。ユーザー指示「下部の空白を狭くする」） */
.page-wrap { width: 100%; max-width: 1040px; margin: 0 auto; padding: 28px 20px 8px; }
/* 68.（2026-11-01・ユーザー指示「志望校判定・志望校判定の入力のフッター近くの空白も縮めて」）:
   いちばん下の箱（カードやボタンの行）の下余白を消す。入力ページは最後のカードに 20px 付いていて、
   `.page-wrap` の 8px ＋ フッターの 16px と重なって 56px 空いていた。これで**どのページも 24px**。 */
.page-wrap > :last-child { margin-bottom: 0; }
/* 68.（2026-11-01・ユーザー指示「パソコンで見てもスマホのサイズになっている」）:
   67. で body を縦の flex にしたとき、`margin: 0 auto` の**横の auto が stretch を打ち消す**ため、
   flex の子（= <main class="page-wrap">）が**中身の幅まで縮んでいた**（shrink-to-fit）。
   表のある結果ページは中身が広いので気づかず、**入力フォームと合否判定の結果だけが細くなっていた**。
   `width: 100%` を入れて、max-width まで必ず広がるようにする。.site-footer も同じ理由で入れる。 */

/* ---------- Header ---------- */
.site-header {
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    padding: 14px 20px;
    position: sticky;
    top: 0;
    z-index: 10;
}
.site-header__inner {
    max-width: 1040px; margin: 0 auto;
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px; flex-wrap: wrap;
}
.site-header__brand {
    display: flex; align-items: center; gap: 10px;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--primary);   /* 見本のヘッダーの題名と同じ青緑（43.） */
}
.site-header__brand:hover { color: var(--primary-dark); text-decoration: none; }
.site-header__logo {
    width: 30px; height: 30px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 0.92rem;
}
/* 志望校判定・合否判定のページだけ、名前の下に塾名を小さく出す（2026-09-22） */
.site-header__names { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.site-header__sub { font-size: 0.72rem; font-weight: 500; color: var(--text-mute); letter-spacing: 0; }
@media (max-width: 520px) {
    .site-header__name { font-size: 0.9rem; }
    .site-header__sub { font-size: 0.62rem; }
}
.site-header__nav {
    display: flex; align-items: center; gap: 18px;
    font-size: 0.92rem;
}
.site-header__nav a { color: var(--text); }
.site-header__nav a:hover { color: var(--primary); text-decoration: none; }
.site-header__user {
    font-size: 0.86rem;
    color: var(--text-mute);
    padding: 4px 12px;
    background: var(--sky-soft);
    border-radius: 999px;
}

/* ---------- Footer ---------- */
/* 67.（2026-11-01・ユーザー指示「空白の部分がページの下部にあれば狭くして無くす」）:
   いちばん下のボタンとフッターの間が 60＋24＝84px、フッターの下がさらに 40px 空いていた。
   どのページも同じだけ詰まる。**線より上の余白は、くっついて見えない程度に残してある。** */
.site-footer {
    width: 100%;   /* 68.: .page-wrap と同じ理由（flex の子が縮むのを止める） */
    max-width: 1040px; margin: 16px auto 0;   /* 68.: 24px → 16px（フッター近くの空白を縮める） */
    /* 79.（2026-11-12・ユーザー指示「同じ幅にする」）: 上下を同じ 16px にそろえた（18px → 16px） */
    padding: 16px 20px;
    font-size: 0.85rem; color: var(--text-faint);
    text-align: center;
    border-top: 1px solid var(--border);
}
/* 79.: **これが無いと上下がそろわない。**
   © は <p> なので本文用の `p { margin: 0 0 1em }` が効いていて、
   下だけ 13.6px 余分に空いていた（線→© が 16px、©→下端が 31.6px）。 */
.site-footer p { margin: 0; }

/* ---------- Hero ---------- */
.hero {
    background: linear-gradient(135deg, var(--sky-soft) 0%, #ffffff 60%, var(--sky-soft) 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 48px 32px 52px;
    margin-bottom: 32px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.hero::before, .hero::after {
    content: "";
    position: absolute;
    width: 200px; height: 200px;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.5;
}
.hero::before {
    top: -60px; left: -60px;
    background: radial-gradient(circle, var(--primary-light), transparent 70%);
    opacity: 0.18;
}
.hero::after {
    bottom: -80px; right: -60px;
    background: radial-gradient(circle, var(--accent), transparent 70%);
    opacity: 0.14;
}
.hero__inner { position: relative; z-index: 1; }
.hero__kicker {
    display: inline-block;
    padding: 5px 14px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--primary);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    margin-bottom: 18px;
}
.hero h1 {
    font-size: 2.2rem;
    margin-bottom: 16px;
    line-height: 1.4;
}
.hero h1 .accent {
    background: linear-gradient(120deg, var(--primary), var(--accent));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.hero p {
    color: var(--text);
    max-width: 560px;
    margin: 0 auto 28px;
    font-size: 1rem;
}
.hero__actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
    text-decoration: none;
    /* 見本はボタンだけピンク（43.）。管理画面では --action が元の青に戻してある */
    background: var(--action);
    color: #fff;
    line-height: 1.2;
}
.btn:hover {
    background: var(--action-dark);
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}
.btn--ghost {
    background: var(--bg);
    color: var(--action);
    border-color: var(--action);
}
.btn--ghost:hover {
    background: var(--action-soft);
    color: var(--action-dark);
    border-color: var(--action-dark);
}
.btn--neutral {
    background: var(--bg);
    color: var(--text);
    border-color: var(--border);
}
.btn--neutral:hover {
    background: var(--bg-subtle);
    color: var(--ink);
    border-color: var(--text-mute);
}
.btn--block { display: block; width: 100%; }
.btn--sm { padding: 7px 14px; font-size: 0.85rem; }

/* ---------- Card ---------- */
.card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px 26px;
    margin-bottom: 20px;
}
.card__title {
    margin-top: 0;
    padding-bottom: 12px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border-soft);
    display: flex;
    align-items: center;
    gap: 10px;
}
.card__title .num-mark {
    display: inline-block;
    width: 4px;
    height: 18px;
    background: var(--primary);
    border-radius: 2px;
}

/* ---------- Section header ---------- */
.section-title {
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--primary);
    margin: 28px 0 14px;
    font-weight: 700;
}

/* ---------- Feature list (top page) ---------- */
.features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-bottom: 30px;
}
@media (max-width: 720px) {
    .features { grid-template-columns: 1fr; }
}
.feature {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px 22px;
    transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.feature:hover {
    border-color: var(--primary-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.feature__icon {
    width: 44px; height: 44px;
    border-radius: 10px;
    background: var(--sky-soft);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    margin-bottom: 14px;
    font-size: 1.2rem;
}
.feature h3 {
    font-size: 1.05rem;
    margin-bottom: 8px;
}
.feature p {
    color: var(--text-mute);
    font-size: 0.9rem;
    line-height: 1.7;
    margin: 0;
}

/* ---------- Dashboard ---------- */
.user-summary {
    background: linear-gradient(135deg, var(--sky-soft) 0%, var(--bg) 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px 26px;
    margin-bottom: 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.user-summary__avatar {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.2rem;
    flex-shrink: 0;
}
.user-summary__info { flex: 1; min-width: 0; }
.user-summary__name {
    font-weight: 700;
    color: var(--ink);
    font-size: 1.05rem;
}
.user-summary__meta {
    color: var(--text-mute);
    font-size: 0.86rem;
}
.tiles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 20px;
}
@media (max-width: 640px) { .tiles { grid-template-columns: 1fr; } }
/* トップページの3入口: PCは3列、スマホ(720px以下)は縦1列に並べる */
.tiles--three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px) { .tiles--three { grid-template-columns: 1fr; } }
.tile {
    display: block;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 26px;
    color: var(--text);
    text-decoration: none;
    position: relative;
    min-height: 170px;
    transition: all 0.18s;
    overflow: hidden;
}
.tile::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    opacity: 0;
    transition: opacity 0.18s;
}
.tile:hover {
    border-color: var(--primary-light);
    box-shadow: var(--shadow-lg);
    transform: translateY(-3px);
    color: var(--text);
    text-decoration: none;
}
.tile:hover::before { opacity: 1; }
.tile__icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: var(--sky-soft);
    color: var(--primary);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 14px;
    font-size: 1.15rem;
    font-weight: 700;
}
.tile__label {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--ink);
}
.tile__desc {
    font-size: 0.86rem;
    color: var(--text-mute);
    line-height: 1.65;
}
.tile__status {
    position: absolute;
    top: 18px; right: 18px;
    font-size: 0.72rem;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--sky-soft);
    color: var(--primary);
    font-weight: 600;
}
.tile__status--closed {
    background: var(--bg-subtle);
    color: var(--text-faint);
}
.tile--disabled {
    opacity: 0.55;
    cursor: not-allowed;
    filter: grayscale(0.4);
}
.tile--disabled:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--border);
}

/* ---------- Ranking summary ---------- */
.ranking-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 24px;
}
@media (max-width: 520px) {
    .ranking-summary { grid-template-columns: 1fr; }
}
.ranking-stat {
    background: var(--sky-soft);
    border: 1px solid var(--sky);
    border-radius: var(--radius-md);
    padding: 18px 16px;
    text-align: center;
}
.ranking-stat--highlight {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    border-color: var(--primary);
    color: #fff;
}
.ranking-stat__label {
    font-size: 0.78rem;
    color: var(--text-mute);
    margin-bottom: 6px;
    font-weight: 600;
    letter-spacing: 0.04em;
}
.ranking-stat--highlight .ranking-stat__label {
    color: rgba(255, 255, 255, 0.85);
}
.ranking-stat__value {
    font-size: 1.85rem;
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.ranking-stat--highlight .ranking-stat__value { color: #fff; }
.ranking-stat__value .unit {
    font-size: 0.7rem;
    margin-left: 3px;
    font-weight: 500;
    color: var(--text-mute);
}
.ranking-stat--highlight .ranking-stat__value .unit { color: rgba(255, 255, 255, 0.8); }

/* ---------- Tabs ---------- */
.tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 22px;
    overflow-x: auto;
}
.tabs a {
    padding: 10px 16px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-mute);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
    text-decoration: none;
    transition: color 0.15s, border-color 0.15s;
}
.tabs a.is-active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}
.tabs a:hover { color: var(--ink); text-decoration: none; }

/* ---------- Score table ---------- */
.score-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 12px;
    font-size: 0.92rem;
}
.score-table th, .score-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-soft);
    text-align: left;
}
.score-table thead th {
    /* 見本の結果画面に合わせてピンクの帯に白抜き（43.）。管理画面は body.admin で元の灰色 */
    background: var(--table-head-bg);
    font-weight: 600;
    color: var(--table-head-fg);
    font-size: 0.84rem;
    border-bottom: 1px solid var(--border);
}
.score-table tfoot th {
    border-top: 2px solid var(--primary);
    background: var(--sky-soft);
    color: var(--ink);
}
.score-table td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    color: var(--ink);
}

/* ---------- Note ---------- */
.note {
    font-size: 0.84rem;
    color: var(--text-mute);
    padding: 12px 14px;
    background: var(--sky-soft);
    border-left: 3px solid var(--primary);
    border-radius: var(--radius-sm);
    margin: 14px 0;
}

/* ---------- Utility ---------- */
.text-center { text-align: center; }
.text-mute { color: var(--text-mute); }
.text-small { font-size: 0.55rem; }
.flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.mt-3 { margin-top: 24px; }
.actions-row {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 24px;
}

/* ---------- Form ---------- */
.form { padding: 28px 26px; }
/* 「1.判定方法を選択して下さい」などの小見出し。
   61.（2026-10-29・ユーザー指示「緑色にしてほしい」）で黒から青緑にした。
   h2 はもともと var(--primary) なのだが、ここで var(--ink) に上書きしていた。
   つまり**題名（h1）と同じ色に戻した**かたち。白地に 5.36 で、1rem の太字に要る 4.5 を超えている。
   効くのは生徒側の「志望校判定」と「合否判定」の入力ページ。
   **管理画面（admin/question_edit.php）は今までどおり黒のまま**にする（下で戻している）。
   body.admin は --primary を元の青に差し替えているので、戻さないと青くなってしまう。 */
.form-section-title {
    font-size: 1rem;
    margin: 28px 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-soft);
    color: var(--primary);
}
body.admin .form-section-title { color: var(--ink); }
.form-section-title:first-of-type { margin-top: 8px; }
.form-section-hint {
    font-size: 0.8rem;
    color: var(--text-mute);
    font-weight: 500;
    margin-left: 6px;
}
.form-row { margin-bottom: 14px; }
.form-label {
    display: block;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 6px;
}
.form-required {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 8px;
    font-size: 0.7rem;
    font-weight: 600;
    color: #fff;
    background: var(--danger);
    border-radius: 999px;
    vertical-align: 1px;
}
.form-control {
    display: block;
    width: 100%;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--ink);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: border-color 0.15s, box-shadow 0.15s;
    -webkit-appearance: none;
    appearance: none;
}
select.form-control {
    background-image: linear-gradient(45deg, transparent 50%, var(--text-mute) 50%), linear-gradient(135deg, var(--text-mute) 50%, transparent 50%);
    background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 34px;
}
.form-control:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.form-control.has-error {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}
.form-control--num { font-variant-numeric: tabular-nums; }
.form-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}
.form-grid--small { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 720px) {
    .form-grid,
    .form-grid--small { grid-template-columns: repeat(3, 1fr); }
}
/* スマホ（520px 以下）は入力欄を横に並べず、縦1列に積む（ユーザー指示 2026-09-23:
   2列だと入力欄が狭い）。評定・点数（.form-grid--subjects）は「教科名を左・入力欄を右」の
   行を縦に並べる。教科名を上に置くと、評定の9つだけで画面1枚半になるため */
@media (max-width: 520px) {
    .form-grid,
    .form-grid--small { grid-template-columns: minmax(0, 1fr); gap: 0; }
    /* 行の下の余白をなくした分、次の見出しとの間はここで空ける（margin だと見出しの margin と重なって狭くなる） */
    .form-grid--subjects { gap: 8px; padding-bottom: 14px; }
    .form-grid--subjects > .form-row {
        display: grid;
        grid-template-columns: 5em minmax(0, 1fr);
        align-items: center;
        column-gap: 12px;
        margin-bottom: 0;
    }
    .form-grid--subjects .form-label { margin-bottom: 0; }
    .form-grid--subjects .form-error { grid-column: 2; }
}
.form-error {
    margin: 4px 0 0;
    font-size: 0.78rem;
    color: var(--danger);
}
.form-alert {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-left: 4px solid var(--danger);
    color: #7f1d1d;
    border-radius: var(--radius-md);
    padding: 14px 18px;
    margin-bottom: 18px;
    font-size: 0.9rem;
}
.form-alert ul {
    margin: 8px 0 0;
    padding-left: 20px;
}
.form-alert li { margin: 2px 0; }
.form-success {
    background: var(--sky-soft);
    border: 1px solid var(--sky);
    border-left: 4px solid var(--primary);
    color: var(--primary-dark);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    margin-bottom: 18px;
    font-size: 0.9rem;
}

/* ============================================================
   志望校判定・地域順位のビジュアル表示
   CSP で外部JSが使えないため、グラフは CSS のみで描画する。
   ============================================================ */

/* --- 判定バッジ（A〜E） --- */
.verdict {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 7px;
    border-radius: var(--radius-sm);
    font-size: .8rem;
    font-weight: 700;
    color: #fff;
}
.verdict--a { background: #2563eb; }
.verdict--b { background: #10b981; }
.verdict--c { background: #f59e0b; }
.verdict--d { background: #fb923c; }
.verdict--e { background: #ef4444; }
.verdict--none { background: var(--text-faint); }

/* 合否判定の1校ぶん（ドーナツ ＋ 合格可能性の説明）。
   「判定の見方」の枠を消して横幅いっぱいを使うようになったぶん、
   スマホ幅では2列だと右側が潰れるので縦に積む。 */
.verdict-layout {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 22px;
    align-items: center;
    margin-top: 18px;
}
@media (max-width: 560px) {
    /* ドーナツは .donut の margin: 0 auto で中央に来る。幅は触らない（丸が崩れる） */
    .verdict-layout { grid-template-columns: minmax(0, 1fr); }
}

/* --- 判定の見方（凡例）。design_d の合否判定では使っていないが、
       ほかのデザインと管理画面で使うので残す --- */
.legend-box {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    background: var(--bg-subtle);
}
.legend-box__title {
    font-size: .8rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
    text-align: center;
}
.legend-grid {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 6px 16px;
    justify-content: center;
}
.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .78rem;
    color: var(--text-mute);
    white-space: nowrap;
}

/* --- ドーナツグラフ（conic-gradient） --- */
.donut {
    --pct: 0;
    --donut-color: var(--primary);
    /* 39.（2026-10-06）: 輪の大きさを変数にして、中の字をこれに比例させる。
       スマホで輪が小さくなると中の字も一緒に小さくなるので、
       「上位 5%以内」のような長い文字でも折り返さない。 */
    --donut-size: 148px;
    width: var(--donut-size);
    height: var(--donut-size);
    border-radius: 50%;
    background: conic-gradient(var(--donut-color) calc(var(--pct) * 1%), var(--border-soft) 0);
    display: grid;
    place-items: center;
    margin: 0 auto;
}
.donut__inner {
    width: 76%;
    height: 76%;
    border-radius: 50%;
    background: var(--bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
}
/* 39.（2026-10-06）: 輪の中の「上位 ○%」が長いときに折り返していた。
   実測で 148px の輪の内側は 112px、132px（スマホ）だと 100px しかなく、
   いちばん長い「上位 5%以内」が 105px あって入り切っていなかった。
   輪の大きさに比例させたうえで、折り返さないようにしてある。
   **ブラウザで測った値**: いちばん長い「上位 5%以内」が
   パソコン 約88px（内側 112px）・スマホ 約78px（内側 100px）。どちらも2割の余裕がある。
   43. でウェブフォントをやめて端末ごとに字が変わるようになったので、余裕を持たせてある
   （「上位」の2文字は font-size の2倍ちょうどで、どの書体でもほぼ変わらない）。 */
.donut__value {
    font-size: calc(var(--donut-size) * 0.145);
    font-weight: 700;
    color: var(--donut-color);
    white-space: nowrap;
    line-height: 1.2;
}
.donut__value .unit {
    /* rem だと親だけ小さくなって一緒に縮まないので em にしてある（元は .8rem） */
    font-size: 0.52em;
    font-weight: 600;
    margin-left: 1px;
}
/* 71.（2026-11-01・ユーザー指示）: 「上位 50%以下」のときだけ、
   **「上位」を少し小さく・「50%以下」を大きく**する。ふつうの「上位 5%以内」は触らない。
   親（.donut__value）を小さくすると、em で書いてある .unit も一緒に小さくなるので、
   .unit 側は倍率を上げて打ち消してある。輪の大きさに比例するのは今までどおり（39.）。 */
.donut__value--coarse { font-size: calc(var(--donut-size) * 0.095); }
.donut__value--coarse .unit { font-size: 1.1em; font-weight: 700; margin-left: 3px; }
.donut__sub {
    font-size: .74rem;
    color: var(--text-mute);
    margin-top: 2px;
}
.donut__tag {
    margin-top: 6px;
    font-size: .7rem;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--sky-soft);
    color: var(--primary-dark);
}

/* --- 3スコープのカード --- */
.scope-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}
.scope-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 18px 16px;
}
.scope-card__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 14px;
}
.scope-card__title { font-size: .95rem; font-weight: 700; margin: 0; }
.scope-card__sub   { font-size: .75rem; color: var(--text-mute); }
.scope-lead {
    text-align: center;
    font-size: .88rem;
    margin: 14px 0 10px;
}
.scope-breakdown {
    border-top: 1px solid var(--border-soft);
    padding-top: 10px;
    font-size: .76rem;
}
.scope-breakdown__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 3px 0;
    color: var(--text-mute);
}
.scope-breakdown__label { display: flex; align-items: center; gap: 6px; }
.scope-breakdown__swatch {
    width: 10px; height: 10px; border-radius: 2px; flex: none;
}

/* --- 到達度のプログレスバー --- */
.progress {
    position: relative;
    height: 10px;
    border-radius: 6px;
    background: var(--border-soft);
    overflow: hidden;
}
.progress__bar {
    height: 100%;
    border-radius: 6px;
    background: var(--primary);
}
.progress-scale {
    position: relative;
    height: 16px;
    margin-top: 4px;
    font-size: .68rem;
    color: var(--text-faint);
}
.progress-scale span {
    position: absolute;
    transform: translateX(-50%);
    white-space: nowrap;
}
.progress-line {
    position: absolute;
    top: 0;
    width: 2px;
    height: 10px;
    background: var(--danger);
}

/* --- 志望校別の判定テーブル --- */
.judge-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.judge-table th, .judge-table td {
    padding: 11px 10px;
    border-bottom: 1px solid var(--border-soft);
    text-align: left;
    vertical-align: middle;
}
.judge-table th { font-size: .76rem; color: var(--text-mute); font-weight: 600; }
.judge-table__bar { width: 40%; min-width: 120px; }
.judge-table .num { text-align: right; white-space: nowrap; }
.rank-chip {
    display: inline-block;
    font-size: .68rem;
    padding: 2px 8px;
    border-radius: 10px;
    background: #fde8ef;
    color: #be185d;
    white-space: nowrap;
}

@media (max-width: 720px) {
    .scope-grid { grid-template-columns: 1fr; }
    .donut { --donut-size: 132px; }
    .table-scroll { overflow-x: auto; }
    .legend-grid { grid-template-columns: repeat(3, auto); }
}

/* 新規登録: 「ご利用の立場」は学年で is_ranking_target=0（その他）を選んだ時だけ表示する。
   JS を使わず select:has(option:checked) で切り替える。 */
.form-row--attribute { display: none; }
.form-row--grade:has(option[data-needs-attribute]:checked) ~ .form-row--attribute {
    display: block;
}

/* ============================================================
   志望校判定（1ページ入力・結果）
   ============================================================ */

/* 入力欄の出し分け。CSP で JS を使わない方針なので :has() だけで切り替える。
   :has() が効かない環境では全部表示されるが、サーバー側は選ばれた判定方法しか
   見ないのでそのまま送信できる。 */
.judge-form__cond { display: none; }
.judge-form:has(#use_target:checked)   .judge-form__cond--target  { display: block; }
.judge-form:has(#mode_regular:checked) .judge-form__cond--regular { display: block; }
.judge-form:has(#mode_exam:checked)    .judge-form__cond--exam    { display: block; }
@supports not selector(:has(*)) {
    .judge-form__cond { display: block; }
}

/* チェックボックス・ラジオの行 */
.check-group { display: flex; flex-direction: column; gap: 8px; }
.check-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
}
.check-row:has(input:checked) {
    border-color: var(--primary);
    background: var(--sky-soft);
}
/* 選ぶところは四角と丸が混ざらないよう、チェックもラジオもまるく描く（51.）。
   type="checkbox" のまま変えないこと。外せる必要があるため（理由は exclusive-check.js の頭）。
   appearance: none にすると選んだ印も自分で描くことになるので、中の丸を ::before で出す */
.check-row input {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    margin: 0;
    border: 2px solid var(--border);
    border-radius: 50%;
    background: var(--bg);
    display: grid;
    place-content: center;
    cursor: pointer;
}
.check-row input::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--primary);
    transform: scale(0);
    transition: transform 0.12s ease-out;
}
.check-row input:checked { border-color: var(--primary); }
.check-row input:checked::before { transform: scale(1); }
.check-row input:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* 合否判定の私立高校の合否（左に高校、右に「合格」「不合格」のチェック）。
   チェックの周りは余白を広めにとる（ユーザー指示 2026-09-23: ゆとりを持たせる）。
   54.: 文言はそれぞれの欄の「上」に出すので、中を2つの入れ物に分けて縦に積む */
.private-result { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 8px; }
.private-result + .private-result { margin-top: 16px; }
.private-result__field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.private-result__field:first-of-type { flex: 1 1 auto; }
.private-result__field--result { flex: 0 0 auto; }
.private-result__checks { display: flex; gap: 10px; }
.private-result select { width: 100%; }
.private-result__check { flex: 0 0 auto; white-space: nowrap; gap: 10px; padding: 10px 18px; }
/* スマホでは高校名が読めなくなるので、チェック2つを下の段に回す。
   2つで横幅を半分ずつ分け、次の高校との間は段の中より広く空けて、
   どの高校のチェックなのかを分かりやすくする */
@media (max-width: 520px) {
    .private-result { flex-wrap: wrap; row-gap: 10px; }
    .private-result + .private-result { margin-top: 26px; }
    .private-result__field { flex-basis: 100%; }
    .private-result__field--result { flex: 1 1 100%; }
    .private-result__checks { width: 100%; }
    .private-result__check { flex: 1 1 0; justify-content: center; padding: 12px; }
}

/* 入力した点数の合計（52.）。数のところだけ assets/live-total.js が書き換える。
   空の欄は 0 点として数える（ユーザー決定 2026-10-27）ので、開いた直後は 0 と出る */
.live-total {
    margin: 10px 0 0;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-subtle);
    font-size: 0.95rem;
}
.live-total__num { font-size: 1.2rem; font-weight: 700; color: var(--primary); }
/* 満点を超えたときだけ色を変えて気づけるようにする（送信は止めない） */
.live-total--over { border-color: var(--danger); }
.live-total--over .live-total__num { color: var(--danger); }

/* 「任意」のしるし（54.）。色は値ではなくこの画面の色で書く（デザインごとに変わる） */
.badge-optional {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 10px;
    border: 1px solid var(--primary);
    border-radius: 999px;
    background: var(--badge-soft);
    /* 小さい字なので濃いほうの色を使う（白地との対比を 4.5 以上にするため） */
    color: var(--primary-dark, var(--primary));
    font-size: 0.75rem;
    font-weight: 700;
    vertical-align: middle;
}

/* 合計点・段階の並び */
.summary-row {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
}

/* 狙える高校の一覧（尾張1群・尾張2群・私立高校） */
.recommend-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 0;
}
/* 私立の表は公立2つの下に横幅いっぱいで置く（校名が長いため） */
.recommend-grid__wide { grid-column: 1 / -1; }
/* 「公立高校の判定」「私立高校の判定」の見出し。表2つぶんの幅いっぱいに置く（2026-09-30） */
.recommend-group-title {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 1.15rem;
}
.recommend-title {
    margin: 0 0 8px;
    font-size: 0.95rem;
}
/* 行の高さをそろえる（学科・コースが空の行も同じ高さにする） */
.recommend-table td { height: 34px; }
.recommend-table th { white-space: nowrap; }

/* 40.（2026-10-06）: おすすめ（狙える高校）の表は、見出しも中身も中央ぞろえにする。
   **高校名の列だけ左のまま**（見出しの「高校」も中身に合わせて左にそろえる）。
   列は公立5列・私立5列で中身が違うので、td:nth-child(2) ではなく
   .recommend-name のクラスで指している（列が増え減りしても壊れない）。
   .score-table 全体は触らない。この表は grade_result.php でしか使っていないので、
   合否判定の結果などほかの表には影響しない。 */
.recommend-table th,
.recommend-table td { text-align: center; }
/* 「順位」の列。.score-table td.num の右ぞろえを打ち消す（詳細度を合わせてある） */
.recommend-table td.num { text-align: center; }
.recommend-table th.recommend-name,
.recommend-table td.recommend-name { text-align: left; }

@media (max-width: 720px) {
    .recommend-grid { grid-template-columns: 1fr; }
    .summary-row { gap: 18px; }
}

/* ============================================================
   スマホ表示の直し（2026-09-23・ユーザー指示「スマホでおかしくなるところがないか」）
   design_d〜h で同じ内容にしてある。
   ============================================================ */
.nowrap { white-space: nowrap; }

/* ヘッダー（ログイン中）: 「ホーム」「ログアウト」を途中で折り返さない。
   名前が長いときは名前だけを … で切る（ユーザー名は30文字まで入る） */
.site-header__nav { min-width: 0; max-width: 100%; }
.site-header__nav a,
.site-header__nav .logout-form { white-space: nowrap; flex-shrink: 0; }
.site-header__user { display: inline-flex; min-width: 0; white-space: nowrap; }
.site-header__user-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* 志望校判定の入力欄の出し入れ: JS（judge-cond.js）が動いたときはこちらで出し分ける。
   :has() が使えないブラウザでも同じ動きになる（:has() も JS も無いときは今までどおり全部出る） */
.judge-form.js-cond .judge-form__cond { display: none; }
.judge-form.js-cond .judge-form__cond.is-open { display: block; }
.js-cond .form-row--attribute { display: none; }
.js-cond .form-row--attribute.is-open { display: block; }

/* 320px 前後の小さいスマホでは、ページの見出し「志望校判定の結果」の最後の1文字だけが
   2行目に落ちていたので、少しだけ小さくする（トップのヒーローの見出しは .hero h1 の指定のまま）。
   ヘッダーの名前はロゴ（S）を消した分の幅で収まるので、大きさはそのまま */
@media (max-width: 360px) {
    h1 { font-size: 1.6rem; }
}

/* 会員のホームのあいさつ: 狭い幅では「マイページ」のボタンを下の段に回し、
   名前と学校の欄に幅を残す（名前が1行に数文字ずつ折り返していた） */
.user-summary__info { flex: 1 1 160px; }
.user-summary__name,
.user-summary__meta { overflow-wrap: anywhere; }

/* 合否判定の結果: 「80%」の下の段に「A判定ライン」を出す
   （1行だと狭い幅で右端の「100%」と重なっていた） */
.progress-scale--two { height: 30px; }
.progress-scale__mark { text-align: center; line-height: 1.35; color: var(--danger); }

/* 志望校判定の結果「狙える高校」: スマホではグループ・学科（私立は学科・コース）の列を隠し、
   同じ中身を高校名の下に小さく出す（5列のままだと高校名が1文字ずつ縦に折り返していた） */
.recommend-sub { display: none; }
.recommend-verdict { white-space: nowrap; }
/* タブレットの縦（768〜834px）でも、公立の2つの表を横に並べると高校名・学科が
   2行に折り返していたので、900px 以下は1つずつ縦に並べる（元は 720px 以下） */
@media (max-width: 900px) {
    .recommend-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
    .recommend-table .recommend-detail { display: none; }
    .recommend-sub { display: block; margin-top: 2px; font-size: 0.78rem; color: var(--text-mute); }
    .recommend-table th,
    .recommend-table td { padding: 8px; }
}

/* ============================================================
 * トップページ（45.・2026-10-05）
 * ユーザーからもらった見本の画像のとおりに並べ直した。
 * カードの色（2026-10-05 の追加指示「もう少し異なる色に」）:
 *   1枚目 … --action（ピンク。ボタンと同じ色）
 *   2枚目 … オレンジ    3枚目 … 緑   ＝ 見本の画像の色づかいに合わせた
 * 2枚目・3枚目は最初どちらも青緑（--primary / --primary-light）で見分けが付かなかった。
 * **白い文字が読める濃さを選んである**（白との明暗比 5.0 以上。
 * もとの --primary-light #009689 は 3.67 しかなく、説明の字が薄く見えていた）。
 * サイト全体の色は変えていない。ここでしか使わないので .home-cards の中だけに置く。
 * このページの HTML は index.php。**design_d 専用**なので、
 * design_e〜h へ同期するときは index.php を除くこと。
 * ============================================================ */

/* ---------- 見出しのかたまり ---------- */
.home-head { text-align: center; padding: 8px 0 4px; }

.home-head__kicker {
    margin: 0 0 10px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ink);
}

.home-head__brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
/* ロゴは画像でも仮の SVG でも同じ大きさで収まるようにしておく
   （差し替えた画像が縦長・横長でも崩れない）。
   2026-10-06: 本物のロゴ（assets/logo.png・丸い判子の形で中に塾名が入っている）に
   差し替えたので、44px から 88px に大きくした。44px だと中の字がつぶれて読めなかった。 */
.home-head__logo {
    width: 88px;
    height: 88px;
    object-fit: contain;
    color: var(--action);   /* 仮の SVG の花びらの色。画像を置いたら効かない */
    flex-shrink: 0;
}
.home-head__school {
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: 0.02em;
}

/* 塾名と大見出しのあいだの細い線（見本のとおり） */
.home-head__brand::after { content: none; }
.home-head__title {
    margin: 0;
    border-top: 1px solid var(--border);
    padding-top: 18px;
    margin-top: 14px;
    line-height: 1.15;
}
.home-head__title-sub,
.home-head__title-main { display: block; }
.home-head__title-sub {
    font-size: clamp(1.5rem, 6.4vw, 2.3rem);
    font-weight: 700;
    color: var(--ink);
    letter-spacing: 0.01em;
}
/* 2026-10-29（60.）: 「志望校判定」が「志望校判定システム」になって9文字になり、
   375px で「ム」1文字だけが2行目に落ちていた。10.5vw → 8.6vw に下げて1行に収めた
   （375px で 32.3px × 9文字 ＝ 290px。本文の幅は 335px）。 */
.home-head__title-main {
    font-size: clamp(1.9rem, 8.6vw, 3.2rem);
    font-weight: 700;
    color: var(--ink);
    letter-spacing: 0.01em;
    margin-top: 2px;
    /* 見出しの下の赤い線（見本）。design_d ではボタンと同じピンクを使う */
    padding-bottom: 10px;
    border-bottom: 3px solid var(--action);
}
/* 「判定」だけ色を変える。h1 全体は --ink なので、ここだけ上書きする。
   style.css の上のほうで h1 { color: var(--primary) } にしているため、
   .home-head__title 側でも --ink を指定しておくこと */
.home-head__title .accent {
    color: var(--action);
    -webkit-text-fill-color: currentColor;   /* .accent のグラデ指定を打ち消す */
    background: none;
}

.home-head__lead {
    margin: 14px 0 0;
    font-size: clamp(1.1rem, 4.6vw, 1.5rem);
    font-weight: 700;
    color: var(--ink);
    line-height: 1.5;
}

/* ---------- 入口のカード ---------- */
/*
 * 60.（2026-10-29・もらった赤入れの画像のとおり）
 *
 * 前は「色の濃いカードに白い文字」だったが、**白いカード＋左に色のついた丸いアイコン**にした。
 * 色の役割が入れ替わっている:
 *   前 … 濃い色＝カードの下地 / 白＝文字と「›」の丸
 *   今 … 白＝カードの下地 / 薄い色＝アイコンと「›」の丸の下地 / 濃い色＝アイコンと「›」そのもの
 * 文字は3枚とも黒なので、**どの色のカードでも読みやすさは同じ**になる。
 * 3枚の高さは grid-auto-rows: 1fr でそろえる（画像の「幅は統一」）。
 */
.home-cards {
    /* 3枚の色。濃いほう＝アイコンと「›」、soft＝その丸の下地。ほかの画面では使わない */
    --home-card-1: var(--action);   /* ピンク #e60076 */
    --home-card-2: #b45309;         /* オレンジ（見本の2枚目） */
    --home-card-3: #15803d;         /* 緑（見本の3枚目） */
    --home-card-1-soft: #fdf2f8;
    --home-card-2-soft: #fff7ed;
    --home-card-3-soft: #f0fdf4;
    /* 説明の文字。--text-mute（黒の50%）は白地だと明暗比が 3.95 しかなく、
       0.88rem の字には足りない。ここだけ濃いめの灰色を持つ（白地に 7.5） */
    --home-card-desc: #4b5563;

    display: grid;
    /* **3枚の高さをいちばん高いものにそろえる**（画像の「幅は統一」）。
       1列しか無いので「行の高さ＝カードの高さ」になる。
       説明の行数が違っても、カードの大きさは変わらない。 */
    grid-auto-rows: 1fr;
    gap: 14px;
    margin-top: 26px;
}

.home-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 22px;
    border-radius: var(--radius-xl);
    background: var(--bg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    color: var(--ink);
    text-decoration: none;
    transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}
.home-card:hover,
.home-card:focus-visible {
    color: var(--ink);
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
/* さわったときだけ、そのカードの色で枠を出す（白いカードどうしの見分け） */
.home-card--1:hover, .home-card--1:focus-visible { border-color: var(--home-card-1); }
.home-card--2:hover, .home-card--2:focus-visible { border-color: var(--home-card-2); }
.home-card--3:hover, .home-card--3:focus-visible { border-color: var(--home-card-3); }

/* 86.（2026-11-12・ユーザー指示）: 合否判定が公開日前のときの一言。
   旧システム（Laravel）が合否判定のラジオの下に赤字で出していた文に合わせた。
   ⚠️ **`.home-cards` の中には置かないこと。** あちらは `grid-auto-rows: 1fr` で
   カードの高さをそろえているので、中に入れるとカードと同じ高さに伸びてしまう。
   カードは `--off` で薄くなるが、この文は薄くしない（いちばん伝えたいことなので）。 */
.home-cards__note {
    margin: 12px 2px 0;
    color: var(--danger);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.6;
}

/* 64.（2026-10-30・ユーザー指示）: 一時的に公開しないカード。**薄くして押せなくする。**
   注意書き（「準備中」など）は出さない。
   index.php 側で <a> ではなく <span> にしてあるので、クリックもキーボードも通らない。
   ここは見た目だけ（これだけでは押せてしまうので、必ず <span> と両方にすること）。
   戻すときは index.php を <a> に戻して、この class を外すだけ。 */
.home-card--off {
    opacity: 0.45;
    box-shadow: none;
    cursor: default;
}
/* <span> なのでさわっても何も起きないが、
   万一また <a> に戻したときに浮き上がらないよう、動きも止めておく */
.home-card--off:hover,
.home-card--off:focus-visible {
    transform: none;
    box-shadow: none;
    border-color: var(--border);
}

/* 左の丸いアイコン。絵は index.php の中に SVG で描いてある
   （外から読み込むアイコン用フォントは使わない。CSP と読み込みの速さのため） */
.home-card__icon {
    flex: 0 0 auto;
    width: 52px; height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.home-card__icon svg { width: 26px; height: 26px; display: block; }
.home-card--1 .home-card__icon { background: var(--home-card-1-soft); color: var(--home-card-1); }
.home-card--2 .home-card__icon { background: var(--home-card-2-soft); color: var(--home-card-2); }
.home-card--3 .home-card__icon { background: var(--home-card-3-soft); color: var(--home-card-3); }

.home-card__body { display: block; flex: 1 1 auto; min-width: 0; }
.home-card__title {
    display: block;
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 6px;
    /* 日本語はふつう、どの字の間でも改行できてしまう。そのままだと 375px で
       「愛知県公立私立高校入試 志」／「望校判定」のように語の途中で割れる。
       keep-all にすると**空白のところだけで改行する**ので、
       「愛知県公立私立高校入試」／「志望校判定」ときれいに折れる。 */
    word-break: keep-all;
}
.home-card__desc {
    display: block;
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--home-card-desc);
}
/* 「ログインが必要」の札。白いカードになったので、そのカードの色で枠と字を描く */
.home-card__badge {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 9px;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    vertical-align: 2px;
    white-space: nowrap;
}
.home-card--1 .home-card__badge { color: var(--home-card-1); }
.home-card--2 .home-card__badge { color: var(--home-card-2); }
.home-card--3 .home-card__badge { color: var(--home-card-3); }

/* 右端の「›」。アイコンと同じく、薄い色の丸に濃い色の字 */
.home-card__go {
    flex: 0 0 auto;
    width: 36px; height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    padding-bottom: 3px;   /* 「›」が上に寄るぶんを戻す */
}
.home-card--1 .home-card__go { background: var(--home-card-1-soft); color: var(--home-card-1); }
.home-card--2 .home-card__go { background: var(--home-card-2-soft); color: var(--home-card-2); }
.home-card--3 .home-card__go { background: var(--home-card-3-soft); color: var(--home-card-3); }

/* ---------- スマホ ---------- */
@media (max-width: 520px) {
    /* 塾名が「名古屋市緑区のさくら予備校」と長くなったので（60.）、
       375px でも1行に収まるところまで小さくする。ロゴも少し詰める */
    .home-head__school { font-size: 1.25rem; }
    .home-head__logo { width: 56px; height: 56px; }
    .home-card { padding: 16px 14px; gap: 12px; }
    .home-card__icon { width: 44px; height: 44px; }
    .home-card__icon svg { width: 22px; height: 22px; }
    .home-card__go { width: 32px; height: 32px; font-size: 1.3rem; }
    /* 「愛知県公立高校入試 志望校判定」が 375px で折り返して
       「定」1文字だけが2行目に落ちていたので、少し小さくする */
    .home-card__title { font-size: 1rem; }
}

/* トップだけ題名を出さない（45.）。帯の中が nav だけになると
   space-between で左に寄るので、右へ寄せ直す。
   題名があるページでは元から右端なので、この指定が効いても見た目は変わらない。 */
.site-header__nav { margin-left: auto; }

/* ============================================================
 * 塾のサイトと同じ「体験授業の予約」「まずはLINEで質問」のタブ
 * （45. の追加・2026-10-05）
 *
 * **58.（2026-10-29）: HTML は index.php から includes/footer.php へ移した。**
 * これで生徒側の全ページに出る。管理画面は admin/_footer.php を読むので出ない。
 * style.css はデザインごとに別物（rsync の除外）なので、**この塊は design_e〜h にもコピーしてある**。
 *
 * 色は見本（https://sakura-yobiko.com）から実測した値をそのまま使う。
 *   ピンク #dd5b9c ／ 緑 #2fb900（LINE の緑）
 * **緑は白い文字との明暗比が 2.61 しかない**（見本のサイトも同じ）。
 * 読みやすさを優先するなら #06a94d くらいまで濃くする必要がある。
 *
 * パソコン … 画面の右端に縦書きで2つ縦に並ぶ
 * スマホ   … **画面の一番下に横並びで固定**（ユーザー指示）。
 *            見本のサイトも 375px では同じ出し方になっている。
 * ============================================================ */
.contact-tabs {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    /* ヘッダーの帯（z-index:10）より前に出す */
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.contact-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 54px;
    padding: 18px 0 20px;
    color: #ffffff;
    text-decoration: none;
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1;
    border-radius: 6px 0 0 6px;
    transition: filter 0.18s, padding-right 0.18s;
}
.contact-tab:hover,
.contact-tab:focus-visible {
    color: #ffffff;
    text-decoration: none;
    filter: brightness(1.08);
    /* ほんの少し出てくる。見本と同じ当たり方 */
    padding-right: 4px;
}
.contact-tab__icon { width: 22px; height: 22px; flex-shrink: 0; }
/* 文字だけ縦書きにする。アイコンは横書きのまま＝回らない */
.contact-tab__label { writing-mode: vertical-rl; letter-spacing: 0.1em; }
.contact-tab--trial { background: #dd5b9c; }
.contact-tab--line  { background: #2fb900; }


/* ---------- スマホ・タブレットの縦（720px 以下）---------- */
@media (max-width: 720px) {
    /* 79.（2026-11-12・ユーザー指示「フッターの下の余白をなくす」）:
       **帯の高さと body の下余白を1つの値で持つ。**
       いままでは帯が 47px なのに body の下余白が 62px で、
       **フッターの下に 15px の白い帯が残っていた**（別々の数字で書いていたため）。
       `height` で帯の高さを固定し、同じ変数を下余白に使うので、もう食い違わない。
       47px ＝ アイコン 19px ＋ 上下の padding 14px×2（いまの見た目と同じ数字）。 */
    :root { --cta-bar-h: 47px; }
    .contact-tabs {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        transform: none;
        flex-direction: row;
        gap: 0;
        height: var(--cta-bar-h);
    }
    .contact-tab {
        flex: 1 1 0;
        width: auto;
        flex-direction: row;
        justify-content: center;
        gap: 7px;
        padding: 14px 6px;
        border-radius: 0;
        font-size: 0.84rem;
    }
    .contact-tab:hover,
    .contact-tab:focus-visible { padding-right: 6px; }
    .contact-tab__label { writing-mode: horizontal-tb; letter-spacing: 0.02em; }
    .contact-tab__icon { width: 19px; height: 19px; }
    /* 帯がフッターの上に重ならないよう、ページの下に場所を空ける。
       **帯の高さと必ず同じ値**（上の --cta-bar-h）。多いとフッターの下に白い帯が残り、
       少ないと帯がフッターに重なる。includes/header.php が <body class="has-contact-tabs"> を出している */
    body.has-contact-tabs { padding-bottom: var(--cta-bar-h); }
}

/* 右端のタブ（54px）が本文に重なる幅だけ、本文を左へ逃がす。
   画面が広いとタブは本文の外（余白）に収まるので要らない。
   重なるのは 721px〜1147px のあいだだけ（本文は最大 1040px＋左右20px）。
   **58.（2026-10-29）: 前は .page-wrap--home＝トップだけだったが、タブが全ページに出るので
   .page-wrap＝生徒側の全ページに広げた。** 本文の幅はどのページも同じなので境目の数字は変わらない。
   index.php の page-wrap--home は、もう CSS では使っていない（直してもどこにも効かない）。 */
@media (min-width: 721px) and (max-width: 1147px) {
    .page-wrap { padding-right: 78px; }
}

/* ============================================================
   63.（2026-10-29・ユーザー指示「この画像のような表示を作成してください。
       そして既存の表示に追加して表示するようにしてください」）

   ユーザーからもらった見本 data/mockups/55-4.jpg・55-1.jpg の形。
     .rank-steps … 「必要な点数 → そのときの上位何％」の表（includes/rank_steps.php）
     .fc-panel   … 第1志望のカードに足した「左に表・まん中に輪・右に人数」（grade_result.php）

   **色は PHP から --steps-color で渡してもらう。** PHP はデザイン間で rsync するので、
   PHP に色を直書きすると design_e〜h まで design_d の色になってしまう（43.）。

   **この塊は design_d が本家**。assets/style.css は5つのデザインで中身が違って
   rsync の除外に入れてあるので、e〜h には同じ塊をコピーしてある。
   ============================================================ */

.rank-steps {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0 3px;
    margin-top: 14px;
    font-size: .8rem;
}
.rank-steps__cap {
    caption-side: top;
    text-align: left;
    font-size: .76rem;
    font-weight: 700;
    color: var(--ink);
    padding-bottom: 4px;
}
.rank-steps th,
.rank-steps td { padding: 7px 10px; text-align: left; vertical-align: middle; }
.rank-steps thead th {
    padding: 0 10px 5px;
    font-size: .68rem;
    font-weight: 600;
    color: var(--text-mute);
    border-bottom: 1px solid var(--border);
}
.rank-steps__note { font-weight: 400; }

/* 行の下地。いまの点数から離れた行ほど濃い（--tint は PHP が入れる）。
   color-mix を知らないブラウザでは下地が付かないだけで、字と枠線は読める。 */
.rank-steps__row > th,
.rank-steps__row > td {
    background: color-mix(in srgb, var(--steps-color) calc(var(--tint) * 1%), var(--bg));
}
.rank-steps__row > th { border-radius: 8px 0 0 8px; }
.rank-steps__row > td { border-radius: 0 8px 8px 0; }

/* いまの点数の行。見本でも1行だけ囲ってある */
.rank-steps__row--now > th,
.rank-steps__row--now > td {
    background: color-mix(in srgb, var(--steps-color) 13%, var(--bg));
    border-top: 2px solid var(--steps-color);
    border-bottom: 2px solid var(--steps-color);
}
.rank-steps__row--now > th { border-left: 2px solid var(--steps-color); }
.rank-steps__row--now > td { border-right: 2px solid var(--steps-color); }

/* いまより低い点の行は赤寄りにする（見本の一番下の行と同じ扱い） */
.rank-steps__row--down > th,
.rank-steps__row--down > td {
    background: color-mix(in srgb, var(--danger) calc(var(--tint) * 1%), var(--bg));
}

/* 点数は大きく（赤入れ「大きくする」） */
.rank-steps__points {
    display: block;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--steps-color);
    line-height: 1.15;
}
.rank-steps__row--down .rank-steps__points { color: var(--danger); }
.rank-steps__unit { font-size: .62em; font-weight: 600; margin-left: 1px; }
.rank-steps__delta {
    display: block;
    font-size: .68rem;
    font-weight: 600;
    color: var(--text-mute);
}
.rank-steps__pct { color: var(--text-mute); font-size: .74rem; line-height: 1.5; }
.rank-steps__pct strong { font-size: .95rem; color: var(--ink); }
.rank-steps__chip {
    display: inline-block;
    font-size: .64rem;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 9px;
    background: var(--border-soft);
    color: var(--text-mute);
    white-space: nowrap;
}
.rank-steps__chip--in {
    background: color-mix(in srgb, var(--steps-color) 16%, var(--bg));
    color: var(--steps-color);
}

/* --- 第1志望のカードに足した見本の形（55-1.jpg） --- */
.fc-panel {
    display: grid;
    gap: 14px 18px;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .9fr) minmax(0, 1fr);
    grid-template-areas: "table chart stats";
    align-items: start;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px dashed var(--border);
}
.fc-panel__table { grid-area: table; min-width: 0; }
/* 表は7行あって背が高い。輪と人数は**縦の真ん中**に置くと釣り合う */
.fc-panel__chart { grid-area: chart; min-width: 0; align-self: center; }
.fc-panel__stats { grid-area: stats; display: grid; gap: 8px; min-width: 0; align-self: center; }
.fc-panel .rank-steps { margin-top: 0; }
.fc-panel .donut { --donut-size: 136px; }
.fc-panel__state { margin: 10px 0 0; text-align: center; font-size: .85rem; }
.fc-panel__in  { color: var(--primary); }
.fc-panel__out { color: var(--danger); }

/* 右の人数の枠。赤入れに「小さくする」とあったので字は控えめ */
.fc-stat {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 10px 12px;
    background: var(--bg-subtle);
}
.fc-stat__label { display: block; font-size: .7rem; color: var(--text-mute); line-height: 1.45; }
.fc-stat__value {
    display: block;
    margin-top: 2px;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--primary);
    line-height: 1.2;
}
.fc-stat--mute .fc-stat__value { font-size: 1.1rem; color: var(--ink); }

@media (max-width: 900px) {
    /* 狭い画面では、輪 → 人数 → 表 の順に積む（HTML もこの並び） */
    .fc-panel {
        grid-template-columns: 1fr;
        grid-template-areas: "chart" "stats" "table";
    }
}

@media (max-width: 720px) {
    /* スマホでは「圏内／圏外」を必ず次の行に置く。
       「上位 5%以内」のような長い行だけ札が折り返して、行の高さがばらつくため */
    .rank-steps__chip { display: block; width: fit-content; margin-top: 3px; }
}

/* ============================================================
   67.（2026-10-31・ユーザー指示「結果の表示をこのようにして欲しいです」）

   見本は `data/mockups/67-1.webp`〜`67-4.webp`。
     67-1 … 志望校ごとのカード（.fc-card ＋ .rank-ranks）
     67-3 … 愛知県全体・市全体のカード（.scope-card ＋ .rank-steps）
   どちらも**左に表・まん中に輪・右に人数**の横並び（.fc-panel を使い回す）。

   **この塊は design_d にだけ入れてある**（ユーザーの回答「design_d だけでよい」）。
   assets/style.css は rsync の除外なので、design_e〜h は 67. の前の見た目のまま。
   ============================================================ */

/* 65.（カードが細長い）の直し。
   カードが横並びの中身を持つようになったので、1行に1枚だけ置く。
   前は repeat(3, 1fr) で、カードは最大2枚しかないのに1枚が画面の3分の1だった。 */
.scope-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 20px;
}
/* .card と重ねて使うので、古い .scope-card の枠は打ち消す */
.card.scope-card { background: var(--bg); padding: 20px 20px 18px; }

.scope-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 0;
}
.scope-card__title { font-size: 1.3rem; font-weight: 700; margin: 0; line-height: 1.3; }
.scope-card__badge {
    flex: none;
    border-radius: 999px;
    padding: 5px 14px;
    background: var(--sky-soft);
    color: var(--primary);
    font-size: .8rem;
    font-weight: 700;
}
.scope-card__lead { margin: 6px 0 0; font-size: .85rem; color: var(--text-mute); }

/* 志望校ごとのカード（見本 67-1）。1校につき1枚 */
.fc-card__head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.fc-card__title { margin: 0; font-size: 1.5rem; font-weight: 700; line-height: 1.25; }

/* .fc-panel は 63. のものを使い回す。67. ではカードの中身そのものなので、
   上の点線と余白は要らない */
.fc-card .fc-panel,
.scope-card .fc-panel { margin-top: 14px; padding-top: 0; border-top: 0; }

/* 輪の中の小さな見出し（「現在のランキング」「現在の順位」） */
.donut__cap {
    font-size: calc(var(--donut-size) * .082);
    color: var(--text-mute);
    font-weight: 600;
    line-height: 1.2;
}

/* カードの下段「現在の点数 / 現在の評定合計」（見本 67-1・67-3） */
.now-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 18px;
    margin-top: 16px;
    padding: 12px 16px;
    border-radius: var(--radius-lg);
    background: var(--action-soft);
}
.now-row__item { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; min-width: 0; }
.now-row__label { font-size: .75rem; color: var(--text-mute); width: 100%; }
.now-row__value { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.now-row__unit  { font-size: .62em; font-weight: 700; margin-left: 1px; }
.now-row__note  { font-size: .72rem; color: var(--text-mute); }

/* 「ランキング（目安） → 必要な点数」の表（includes/rank_ranks.php・見本 67-1）。
   **63. の .rank-steps とは別の表**。行の色は上から3段に分けてある。 */
.rank-ranks {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0 4px;
    font-size: .8rem;
}
.rank-ranks thead th {
    padding: 0 10px 6px;
    font-size: .72rem;
    font-weight: 700;
    color: var(--ink);
    text-align: center;
    border-bottom: 1px solid var(--border);
}
.rank-ranks__note { display: block; font-size: .64rem; font-weight: 400; color: var(--text-mute); }
.rank-ranks th,
.rank-ranks td { padding: 8px 10px; vertical-align: middle; }
.rank-ranks__rank  { text-align: center; font-weight: 700; font-size: .92rem; }
.rank-ranks__score { text-align: center; }
.rank-ranks__cup   { margin-right: 3px; }
.rank-ranks__points { font-size: 1.25rem; font-weight: 700; line-height: 1.15; }
.rank-ranks__unit   { font-size: .6em; font-weight: 700; margin-left: 1px; }
.rank-ranks__delta  { display: block; font-size: .7rem; color: var(--text-mute); line-height: 1.3; }
/* 69.（2026-11-01）: テストが満点でもその順位に届かないとき。67. では行ごと消していた */
.rank-ranks__over   { font-size: .78rem; font-weight: 700; color: var(--text-mute); line-height: 1.3; }

/* 行の色。見本と同じ並び（上がピンク・まん中が緑・下が青・いまの位置が青緑）。
   左のマスだけ濃く、右のマスは白に近くして点数を読みやすくする */
.rank-ranks__row > th { border-radius: 10px 0 0 10px; }
.rank-ranks__row > td { border-radius: 0 10px 10px 0; background: var(--bg); }
.rank-ranks__row--a > th { background: #fde8ef; color: #be185d; }
.rank-ranks__row--a .rank-ranks__points { color: #be185d; }
.rank-ranks__row--b > th { background: #d9f6ec; color: var(--primary-dark); }
.rank-ranks__row--b .rank-ranks__points { color: var(--primary-dark); }
.rank-ranks__row--c > th { background: #ddecfe; color: #1a5fb4; }
.rank-ranks__row--c .rank-ranks__points { color: #1a5fb4; }
.rank-ranks__row--now > th { background: var(--primary); color: #ffffff; }
.rank-ranks__row--now > td { background: var(--sky-soft); }
.rank-ranks__row--now .rank-ranks__points { color: var(--primary); }
/* **この行だけ「（+54点）」のような差の行が無い**ので、ほかの行より1行ぶん背が低い
   （枠を付ける前からそうだったが、枠で囲むと「潰れている」ように見える）。
   同じ高さの空の行を1つ足して、上下の行と高さをぴったりそろえる。
   `\00a0`（空白）を入れるのは、中身が空だと行の高さが 0 になるため。 */
.rank-ranks__row--now .rank-ranks__points::after {
    content: "\00a0";
    display: block;
    font-size: .7rem;
    font-weight: 400;
    line-height: 1.3;
}

/* 77.（2026-11-12・ユーザー指示「高校別の結果の表示で利用者の順位の部分を目立たせるために、
   左側に矢印を表示して、欄を二重線で囲むようにしたい」）。

   **行は th（左＝順位）と td（右＝点数）の2マスでできている。**
   border-collapse: separate なので、左のマスは「左・上・下」、右のマスは「右・上・下」に
   線を引くと、2マスをまたいで行をぐるりと囲む1本の二重線になる。
   **th の右と td の左には引かない**（引くとまん中に縦線が出て2つの箱に見える）。

   色は --ink（真っ黒）。左のマスは濃い青緑（--primary #00786f）、右のマスはほぼ白
   （--sky-soft #f0fdfa）で明るさが正反対なので、**両方で見える色が黒しかない**。
   青緑やピンク（--action #e60076）は左のマスとほぼ同じ明るさなので溶けて見えなくなる。

   太さは 3px。`double` が2本の線として描かれる最小の太さ。

   **`background-clip: padding-box` が肝。** これが無いと下地の色が線と線の隙間まで
   広がるので、**左の濃い青緑のマスでは隙間が青緑に埋まり「ただの太い黒線」に見える**。
   padding-box にすると隙間だけカードの白地が出るので、**左右どちらのマスでも
   『黒・白・黒』の二重線**になる。 */
.rank-ranks__row--now > th {
    position: relative;
    /* ほかの行は padding: 8px 10px・枠なし。この行だけ枠が 3px 付くので、
       **そのぶん padding を削って字の位置と行の高さを上下の行にそろえる**。
         横 … 左に枠 3px → 右の padding を 3px 増やす（10 → 13）。
              これで字の中心がマスの中心に来る（枠のぶん右へずれるのを打ち消す）。
         縦 … 上下に枠 3px → padding を 3px 減らす（8 → 5）。
              これで行の高さが上下の行と同じになる。
       **矢印は絶対配置なので padding を広げる必要はない**（広げると字が右へずれる）。 */
    padding: 5px 13px 5px 10px;
    border-width: 3px 0 3px 3px;
    border-style: double;
    border-color: var(--ink);
    background-clip: padding-box;
}
.rank-ranks__row--now > td {
    /* 右のマスは枠が右側なので、左右が逆（左の padding を 3px 増やす） */
    padding: 5px 10px 5px 13px;
    border-width: 3px 3px 3px 0;
    border-style: double;
    border-color: var(--ink);
    background-clip: padding-box;
}
/* 左の矢印。**絶対配置なので表の幅も列の幅も字の位置も変えない。**
   枠（3px）の内側、字が始まるより左の余白に置いている。
   色は指定しない＝ th の字の色（白）をそのまま継ぐ。 */
.rank-ranks__row--now > th::before {
    content: "\25B6";
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: .9em;
    line-height: 1;
}

@media (max-width: 720px) {
    .scope-card__title { font-size: 1.1rem; }
    .fc-card__title    { font-size: 1.2rem; }
    .now-row { grid-template-columns: 1fr; }
}

/* 67.: 輪は見本では大きい。表が9行あるので、これくらいでないと釣り合わない */
.fc-card .fc-panel .donut,
.scope-card .fc-panel .donut { --donut-size: 190px; }

/* 67.: 右の人数の枠に色を付ける（見本のとおり。上がピンク・下が水色） */
.fc-card .fc-stat,
.scope-card .fc-stat { background: var(--action-soft); border-color: transparent; }
.fc-card .fc-stat .fc-stat__value,
.scope-card .fc-stat .fc-stat__value { color: var(--action); }
.fc-card .fc-stat--mute,
.scope-card .fc-stat--mute { background: var(--sky-soft); }
.fc-card .fc-stat--mute .fc-stat__value,
.scope-card .fc-stat--mute .fc-stat__value { color: var(--ink); }
.fc-card .fc-stat__label,
.scope-card .fc-stat__label { font-size: .74rem; }
.fc-card .fc-stat__value,
.scope-card .fc-stat__value { font-size: 1.5rem; }

/* 67.: 合否判定の結果（見本 `data/mockups/67-4.webp`）。
   輪の右の「判定の基準（合格の可能性）」の一覧と、その下の帯・一言。 */
.band-list { min-width: 0; }
.band-list__title {
    font-size: .88rem;
    font-weight: 700;
    margin-bottom: 8px;
    padding-left: 10px;
    border-left: 3px solid var(--primary);
    line-height: 1.3;
}
.band-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: var(--radius-md);
    margin-bottom: 4px;
    background: var(--bg-subtle);
}
/* いまの判定の行だけ分かるようにする（見本には無いが、どれが自分か一目で分かるほうがよい） */
.band-row--now { background: var(--sky-soft); outline: 2px solid var(--primary); }
.band-row__body { min-width: 0; }
.band-row__pct  { display: block; font-size: .95rem; font-weight: 700; line-height: 1.25; }
.band-row__text { display: block; font-size: .75rem; color: var(--text-mute); line-height: 1.35; }

.verdict-progress { margin-top: 18px; }
.verdict-note {
    margin-top: 16px;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    background: var(--sky-soft);
}
.verdict-note--ok { background: #e8f7f0; }

/* 67.: 志望校を入れなかったときの判定の表（見本 `data/mockups/67-2.webp`）。
   中身は前と同じで、見出しと判定の札の見た目だけ変えてある。 */
.page-lead { margin: 6px 0 0; font-size: .9rem; color: var(--text-mute); }

.recommend-group-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 22px 0 12px;
    padding: 12px 16px;
    border-radius: var(--radius-lg);
    background: var(--sky-soft);
    color: var(--primary);
    font-size: 1.15rem;
}
.recommend-grid .recommend-group-title:first-child { margin-top: 0; }
/* 群の名前（尾張1群 など）は、左に色の線を引いた帯にする */
.recommend-title {
    margin: 0 0 10px;
    padding: 7px 0 7px 12px;
    border-left: 4px solid var(--action);
    background: var(--action-soft);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    font-size: .98rem;
}
.recommend-verdict__word { font-size: .72rem; color: var(--text-mute); margin-left: 4px; }

/* 合否判定の輪は見本では大きい */
.verdict-layout .donut { --donut-size: 168px; align-self: center; }

@media (max-width: 720px) {
    /* 67.: スマホでは輪を少し小さく。中の字は --donut-size に比例するので一緒に縮む（39.） */
    .fc-card .fc-panel .donut,
    .scope-card .fc-panel .donut { --donut-size: 150px; }
    .verdict-layout .donut { --donut-size: 140px; }
}

/* 67.（2026-11-01）: 合否判定のカードの右上の札（見本 67-4）。
   丸の中は、ページの頭に出していたのと同じ赤いハンコのロゴ（55-C。見出しの隣のものは 69. で消した）。
   **70.（2026-11-01・ユーザー指示）: 点線の輪を消して、その分ロゴを大きくした**
   （42px の枠はそのままで、中のロゴを 30px → 42px ＝ 枠いっぱいに）。 */
.brand-stamp {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 16px 7px 8px;
    border-radius: 999px;
    background: var(--action-soft);
    flex: none;
}
.brand-stamp__ring {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: none;
}
.brand-stamp__ring img { width: 42px; height: 42px; object-fit: contain; display: block; }
.brand-stamp__text { font-size: .85rem; font-weight: 700; color: var(--action); line-height: 1.3; }
.verdict-school__name { margin: 0; font-size: 1.6rem; font-weight: 700; line-height: 1.25; }

@media (max-width: 560px) {
    .brand-stamp { padding: 5px 12px 5px 6px; gap: 7px; }
    .brand-stamp__ring { width: 34px; height: 34px; }
    .brand-stamp__ring img { width: 34px; height: 34px; }   /* 70.: 輪を消した分だけ大きく */
    .brand-stamp__text { font-size: .74rem; }
    .verdict-school__name { font-size: 1.25rem; }
}

/* 67.（2026-11-01）: 志望校を入れなかったときの表を見本 67-2 の4列にした。
   学科・グループは高校名の下に小さく入れる（.recommend-sub を**パソコンでも出す**）。 */
.recommend-sub { display: block; margin-top: 2px; font-size: .78rem; color: var(--text-mute); }
.recommend-table th.recommend-advice,
.recommend-table td.recommend-advice { text-align: left; min-width: 230px; }
.recommend-table td.recommend-name { font-weight: 700; }
.recommend-table th.num, .recommend-table td.num { width: 56px; }
.recommend-table th { white-space: nowrap; }
/* **グリッドの子は min-width が auto なので、中の表の最小幅がそのまま列の幅になる。**
   `.table-scroll` に overflow-x を付けても、これを 0 にしないと**ページごと横に広がる**
   （67. で「これからの学習に大事なポイント」の列に min-width を付けたときに踏んだ）。 */
.recommend-grid { min-width: 0; }
.recommend-grid__wide { min-width: 0; }
.recommend-grid__wide .table-scroll { overflow-x: auto; }

@media (max-width: 900px) {
    /* 狭い画面では表を1列に積む（2列だと1つあたりが狭すぎる） */
    .recommend-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    /* スマホでは「ポイント」の列を細くして、表ごと横スクロールできるようにする */
    .recommend-table th.recommend-advice,
    .recommend-table td.recommend-advice { min-width: 150px; }
    .recommend-table th.num, .recommend-table td.num { width: 34px; }
    .recommend-table th, .recommend-table td { padding-left: 6px; padding-right: 6px; }
}

/* 67.（2026-11-01・ユーザー指示「空白の部分がページの下部にあれば狭くして無くす」）:
   中身の短いページ（ログインなど）では、フッターの**下に白い帯が残っていた**
   （手元で 238px）。本文を伸ばしてフッターを画面の底まで下げる。
   `.contact-tabs` は position: fixed なので、この並びには入らない。 */
body { min-height: 100vh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; }