/* top.css — index.html に直書きされていた5つの <style> を、順番そのまま外に出したもの（2026-09-14 第4段）。
   中身は一切変えていない。ブロックの境目は下の ==== 行。 */

/* ==================== index.html inline <style> #1 ==================== */

    :root {
      --pink: #f48fb1;
      --pink-soft: #fde4ec;
      --pink-pale: #fff5f8;
      --green: #6abf4b;
      --green-deep: #4ea732;
      --green-soft: #e7f4dd;
      --orange: #ff7a3d;
      --orange-soft: #fff0e7;
      --ink: #1b2430;
      --ink-soft: #4b5563;
      --muted: #7a8593;
      --line: #ecedf1;
      --bg: #fafafb;
      --card: #ffffff;
      --shadow-sm: 0 2px 10px rgba(30, 32, 40, .05);
      --shadow-md: 0 10px 30px rgba(30, 32, 40, .08);
      --radius: 16px;
    }
    * { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; }
    /* v4.93: SP横揺れ防止 — 横方向のはみ出しをルートで遮断（clipはstickyを壊さない） */
    html, body { overflow-x: clip; }
    @supports not (overflow-x: clip) {
      html, body { overflow-x: hidden; }
    }
    body {
      font-family: "Noto Sans JP", system-ui, -apple-system, "Hiragino Sans", "Yu Gothic UI", sans-serif;
      color: var(--ink);
      background: var(--bg);
      -webkit-font-smoothing: antialiased;
      line-height: 1.7;
    }
    img { max-width: 100%; display: block; }
    a { color: inherit; }

    /* ===== Header ===== */
    .th {
      position: sticky; top: 0; z-index: 50;
      background: #fffffff0;
      backdrop-filter: saturate(140%) blur(10px);
      -webkit-backdrop-filter: saturate(140%) blur(10px);
      border-bottom: 1px solid var(--line);
    }
    .th__inner {
      max-width: 1200px; margin: 0 auto;
      padding: 14px 20px;
      display: flex; align-items: center; gap: 16px;
    }
    .th__logo { height: 34px; }
    .th__nav { margin-left: auto; display: flex; gap: 22px; }
    .th__nav a { font-size: 14px; font-weight: 700; color: var(--ink-soft); text-decoration: none; }
    .th__nav a:hover { color: var(--ink); }
    .th__cta { display: flex; gap: 8px; }
    .btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 6px;
      padding: 10px 18px; border-radius: 999px; font-weight: 700; font-size: 14px;
      text-decoration: none; border: 0; cursor: pointer;
      transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
    }
    .btn--org { background: var(--green); color: #fff; }
    .btn--org:hover { background: var(--green-deep); transform: translateY(-1px); }
    .btn--corp { background: var(--orange); color: #fff; }
    .btn--corp:hover { background: #e95d20; transform: translateY(-1px); }
    .btn--ghost { background: #fff; color: var(--ink); border: 1px solid var(--line); }
    .btn--pill { padding: 12px 22px; font-size: 15px; }
    .btn--lg { padding: 14px 28px; font-size: 16px; }
    @media (max-width: 760px) { .th__nav { display: none; } }

    /* ===== ドロップダウンボタン ===== */
    .btn-dropdown { position: relative; display: inline-flex; flex-direction: column; align-items: stretch; }
    .btn-dropdown__toggle { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
    .btn-dropdown__toggle::after { content: "▾"; font-size: 12px; margin-left: 2px; }
    .btn-dropdown__menu {
      position: absolute; top: calc(100% + 8px); left: 0;
      min-width: 200px; background: #fff; border-radius: 12px;
      box-shadow: 0 8px 32px rgba(0,0,0,.14); border: 1px solid #ecedf1;
      overflow: hidden; z-index: 200;
      display: none; flex-direction: column;
    }
    .btn-dropdown__menu.is-open { display: flex; }
    .btn-dropdown__menu a {
      display: flex; align-items: center; gap: 10px;
      padding: 14px 18px; font-size: 14px; font-weight: 700;
      text-decoration: none; color: #1b2430;
      border-bottom: 1px solid #f0f1f3; transition: background .12s;
    }
    .btn-dropdown__menu a:last-child { border-bottom: none; }
    .btn-dropdown__menu a:hover { background: #f7f8fa; }
    .btn-dropdown__menu a .menu-icon { font-size: 18px; }

    /* 支援を予約するナビボタン */
    .gnav-reserve-btn {
      background: var(--green) !important;
      color: #fff !important;
      padding: 7px 16px !important;
      border-radius: 999px;
      font-size: 13px !important;
      transition: background .15s, transform .15s !important;
    }
    .gnav-reserve-btn:hover { background: var(--green-deep) !important; transform: translateY(-1px); }
    .gnav-sp-reserve { color: #2a8f1a !important; font-weight: 900 !important; }

    /* ===== メニュー サブアイテム ===== */
    .gnav-sp-menu .has-sub > a { display: flex; align-items: center; justify-content: space-between; }
    .gnav-sp-menu .has-sub > a::after { content: "＋"; font-size: 16px; color: #aaa; transition: transform .2s; }
    .gnav-sp-menu .has-sub.is-open > a::after { content: "－"; }
    .gnav-sp-menu .sub-menu { display: none; margin: 0; padding: 0; list-style: none; background: #f7f8f2; border-left: 3px solid #6abf4b; }
    .gnav-sp-menu .has-sub.is-open .sub-menu { display: block; }
    .gnav-sp-menu .sub-menu li a { font-size: 13px; padding: 10px 20px 10px 24px; display: block; color: #444; text-decoration: none; border-bottom: 1px solid #eee; }
    .gnav-sp-menu .sub-menu li:last-child a { border-bottom: none; }

    /* ===== Hero ===== */
    .hero {
      position: relative; overflow: hidden;
      background:
        radial-gradient(circle at 15% 20%, #fff0e7 0%, transparent 40%),
        radial-gradient(circle at 85% 10%, #e7f4dd 0%, transparent 45%),
        radial-gradient(circle at 80% 80%, #fde4ec 0%, transparent 45%),
        linear-gradient(180deg, #fffdf9 0%, #f7fbf4 100%);
      padding: 72px 20px 64px;
    }
    .hero__inner {
      max-width: 1100px; margin: 0 auto;
      display: grid; grid-template-columns: 1.15fr .9fr; gap: 48px; align-items: center;
    }
    .hero__eyebrow {
      display: inline-block; padding: 6px 14px; border-radius: 999px;
      background: var(--green-soft); color: var(--green-deep);
      font-weight: 700; font-size: 13px; letter-spacing: .04em;
      position: relative; z-index: 2;
      margin-top: -80px;
      box-shadow: 0 2px 8px rgba(0,0,0,.06);
    }
    @media (max-width: 767px){
      .hero__eyebrow { margin-top: -110px; }
    }
    .hero__title {
      font-size: clamp(28px, 4vw, 46px); font-weight: 900;
      line-height: 1.35; margin: 18px 0 16px; letter-spacing: .02em;
    }
    .hero__title em { font-style: normal; color: var(--orange); }
    .hero__title b { color: var(--green-deep); }
    .hero__title-sub {
      display: inline-block; margin-top: 10px;
      font-size: clamp(16px, 1.9vw, 22px); font-weight: 800;
      color: var(--ink); letter-spacing: .02em;
    }
    .hero__lead { color: var(--ink-soft); margin: 0 0 26px; font-size: 16px; }
    .hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; }

    .kpis {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
      margin-top: 28px;
    }
    .kpi {
      background: var(--card); border-radius: 14px; padding: 14px 12px;
      box-shadow: var(--shadow-sm); text-align: center;
      border: 1px solid var(--line);
    }
    .kpi__label { font-size: 12px; color: var(--muted); font-weight: 700; }
    .kpi__num { font-size: clamp(18px, 2.6vw, 26px); font-weight: 900; color: var(--ink); margin-top: 2px; line-height: 1.1; white-space: nowrap; }
    /* 修正 2026-05-19 (v3.15): small (単位) を改行表示にして月桂冠装飾からのはみ出しを防ぐ。
       「1,850社（予定含む）」のような長い接尾語を、数字の下に小さく折り返す。 */
    .kpi__num small { font-size: .52em; font-weight: 700; color: var(--ink-soft); display: block; margin: 2px 0 0 0; line-height: 1.2; white-space: nowrap; }
    .kpi__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    .hero__art {
      position: relative; aspect-ratio: 5/6;
      background: linear-gradient(160deg, #e8f5df 0%, #fdecec 100%);
      border-radius: 28px;
      box-shadow: var(--shadow-md);
      overflow: hidden;
    }
    .hero__art::before, .hero__art::after { content: none; }
    .hero__art-inner {
      position: absolute; inset: 0; display: flex; flex-direction: column;
      align-items: center; justify-content: center; gap: 14px; padding: 30px; text-align: center;
    }
    .hero__art-inner h2 {
      font-size: 22px; font-weight: 900; margin: 0; color: var(--ink);
    }
    .hero__art-badge {
      display: inline-flex; gap: 8px; align-items: center;
      background: #fff; border: 1px solid var(--line); border-radius: 999px;
      padding: 8px 16px; font-size: 13px; font-weight: 700; box-shadow: var(--shadow-sm);
      white-space: nowrap;
      max-width: 100%;
    }
    .hero__art-badge b { color: var(--orange); }
    .hero__art-figure {
      display: block;
      margin: -60px -50% 0;
      width: calc(100% + 100%);
    }
    .hero__art-figure img {
      width: 100%; height: auto; display: block;
      max-width: none;
      margin: 0 auto;
    }
    .hero__art-inner { overflow: visible; }
    .hero__art { overflow: visible; }
    .hero__inner { overflow: visible; }
    @media (max-width: 900px) {
      .hero__art-figure { margin: -20px 0 0; width: 100%; }
      .hero__art-figure img { max-width: 640px; }
    }
    .cycle-svg {
      display: block;
      width: 100%;
      max-width: 520px;
      height: auto;
      margin: 0 auto;
      filter: drop-shadow(0 10px 24px rgba(0,0,0,.08));
    }

    @media (max-width: 900px) {
      .hero__inner { grid-template-columns: 1fr; gap: 30px; }
      .hero__art {
        max-width: 420px; margin: 0 auto;
        width: 100%;
        aspect-ratio: auto;
        min-height: 360px;
      }
      .hero__art-inner { position: static; padding: 24px 20px; min-height: 320px; }
      .hero__art-figure { position: relative; margin: 0; width: 100%; }
    }
    @media (max-width: 480px) {
      .hero__art { min-height: 300px; }
      .hero__art-inner { padding: 20px 16px; min-height: 260px; }
      .hero__art-badge { font-size: 12px; padding: 7px 14px; }
    }

    /* ===== Section base ===== */
    section.block { padding: 72px 20px; }
    .container { max-width: 1100px; margin: 0 auto; }
    .block h2.block__title {
      font-size: clamp(22px, 2.6vw, 30px); font-weight: 900;
      margin: 0 0 8px; letter-spacing: .02em;
      display: flex; align-items: center; gap: 10px;
    }
    .block h2 .chip {
      display: inline-block; padding: 4px 10px; border-radius: 999px;
      background: var(--orange-soft); color: var(--orange);
      font-size: 12px; font-weight: 800; letter-spacing: .08em;
    }
    .block__lead { color: var(--muted); margin: 0 0 28px; font-size: 14px; }
    .more-link {
      display: inline-flex; align-items: center; gap: 4px;
      color: var(--green-deep); font-weight: 700; font-size: 13px; text-decoration: none;
    }
    .more-link:hover { text-decoration: underline; }

    /* ===== Ranking ===== */
    /* v6.9: 応援実績 = 順位バッジなしの横スクロールカード */
    .rank-list {
      display: flex; gap: 16px; overflow-x: auto;
      padding: 4px 2px 14px; scroll-snap-type: x proximity;
      -webkit-overflow-scrolling: touch; scrollbar-width: thin;
    }
    .rank-list::-webkit-scrollbar { height: 8px; }
    .rank-list::-webkit-scrollbar-track { background: transparent; }
    .rank-list::-webkit-scrollbar-thumb { background: #e6dede; border-radius: 999px; }
    .rk-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
    .rk-head__text { min-width: 0; }
    .rk-head__link { flex: none; white-space: nowrap; padding-top: 6px; }
    /* ============================================================
       応援実績カード v4.0（2026-08-18 デザイン変更）
       ロゴ＋区分の札／会社名 → 業種・所在地 → 区切り → 数字2つ
       ⚠ ロゴの枠は «正方形で固定»。中の画像は object-fit:contain ＋
         内側に余白（padding）を持たせ、トリミングしない。
         縦長・横長どちらのロゴでも欠けず、枠の大きさも揃う。
       ============================================================ */
    .rk-card {
      flex: 0 0 336px; min-width: 0;   /* ← これが無いと長い業種名でカードが横に伸びる */
      scroll-snap-align: start; display: flex; flex-direction: column;
      background: #fff; border: 1px solid #eeeae4; border-radius: 20px;
      padding: 0; overflow: hidden;    /* ← v5.0: 画像を上端いっぱいに出すため余白は各段に持たせる */
      text-decoration: none; color: inherit; box-shadow: 0 1px 3px rgba(27,36,48,.05);
      transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    }
    .rk-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(27,36,48,.10); border-color: #e2dcd3; }

    /* ── ① 画像エリア（横幅いっぱい）──────────────────────────
       ⚠ 高さは aspect-ratio で固定する。ロゴの縦横比はバラバラなので、
         枠の高さを画像に決めさせると1枚だけ背が高いカードができて並びが崩れる。
       ⚠ 中の画像は object-fit:contain のまま。cover にすると社名の一部が切れる。 */
    /* v7.0(2026-09-11) 運営指示:
       ・ロゴは «縦の大きさ» をそろえる（枠の高さいっぱい）
       ・横に余る分は白い背景で埋める（会社ごとに背景色が違って見えないように）
       ・ロゴが無い会社も白地に黒文字にする
       ⚠ 枠の高さは aspect-ratio で固定したまま。ここを画像に決めさせると
         1枚だけ背の高いカードができて並びが崩れる。
       ⚠ 余白は枠(.rk-visual)の padding で作る。box-sizing:border-box が要る
         （付けないと padding のぶん枠が縦に伸びて、高さがそろわなくなる）。 */
    .rk-visual {
      position: relative; width: 100%; aspect-ratio: 20 / 9;
      box-sizing: border-box; padding: 11px 14px;
      background: #fff; border-bottom: 1px solid #efe9dd;
      display: flex; align-items: center; justify-content: center; overflow: hidden;
    }
    /* height:100% がロゴの縦をそろえる本体。
       width:auto なので横幅は絵の形なりに決まり、余った左右は白のまま残る。 */
    .rk-visual img {
      height: 100%; width: auto; max-width: 100%;
      object-fit: contain; display: block;
      background: none; padding: 0; border-radius: 0; box-shadow: none;
    }
    /* ロゴを登録していない会社は、社名の1文字を白地に黒で出す。 */
    .rk-visual__char { font-size: 46px; font-weight: 900; color: #1b2430; opacity: 1; line-height: 1; }

    /* ── 区分と地域の札 ──────────────────────────
       v6.0(2026-09-10): 画像の上に重ねるのをやめ、社名の帯の中に置く。
       重ねていたころは ①ロゴや写真と重なって読めない
       ②地域名が長い会社では2行になってロゴを覆う、という問題があった。
       帯の中なら、何行になっても他のものを隠さない。
       ⚠ それでも1行に収める。地域は «残り幅まで» にして、あふれた分は … で省く。 */
    /* v7.0(2026-09-11) 運営指示: 種別と所在地は小さく、社名を大きく。
       いちばん伝えたいのは «どの会社か» なので、そこに一番大きい文字を使う。 */
    .rk-meta {
      display: flex; align-items: center; gap: 5px; min-width: 0;
      min-height: 19px;   /* 札が無い会社でも高さが揃うように場所を空けておく */
    }
    .rk-badge {
      display: inline-block; padding: 2px 7px; border-radius: 5px;
      font-size: 9.5px; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
      border: 1px solid transparent; line-height: 1.55; flex: 0 0 auto;
    }
    .rk-badge--area {
      background: #fff; color: #5c6067; border-color: #e2dcd3; font-weight: 600;
      flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
    }

    /* ── ② 社名の帯 ──────────────────────────
       ⚠ 会社名は2行ぶんの高さを必ず確保する。1行の会社と2行の会社で
         下の内容の位置がずれないようにするため。 */
    .rk-ident { background: #f2ede2; padding: 11px 17px 13px; display: flex; flex-direction: column; gap: 6px; }
    .rk-name {
      font-weight: 800; font-size: 17.5px; line-height: 1.4; color: #1b2430;
      display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
      overflow: hidden; min-height: calc(17.5px * 1.4 * 2); overflow-wrap: anywhere;
    }
    .rk-sub {
      font-size: 11.5px; line-height: 1.6; color: #7d7569; min-height: calc(11.5px * 1.6);
      display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;
      overflow: hidden; overflow-wrap: anywhere;
    }

    /* ── ③ 本体（白地）── */
    .rk-body { padding: 15px 17px 17px; display: flex; flex-direction: column; flex: 1; gap: 11px; }

    /* ボタン＋タグの行。カード全体がリンクなので «見た目だけ» のボタン
       （<a> の入れ子はブラウザが壊すため、ここは span で作る） */
    /* v6.0(2026-09-10): ボタンとタグが混ざって折り返し、2行目にタグだけが
       取り残されて不格好だった。ボタンは左に固定し、タグは «その右のかたまりの中だけ»
       で折り返す。入りきらないときはコンパクトなまま2行までにする。 */
    /* v7.0(2026-09-11) 運営指示: タグは «必ず» ボタンの右に置く。
       下の行に落とさない。入りきらないときはコンパクトなまま2行にする。
       ⚠ 2行に入りきらない分は表示されない。
         リスクファイナンス研究所さまのように «会計／リスクマネジメント／保険» と
         3つあり、うち1つが長い会社では、3つ目が出ない幅がある（実測）。
         3つとも必ず見せたい場合は、ボタンの文字を短くして幅を作るか、
         タグの数を2つまでにする必要がある。 */
    .rk-actions { display: flex; flex-wrap: nowrap; align-items: center; gap: 7px; }
    .rk-tags {
      flex: 1 1 0; min-width: 0; display: flex; flex-wrap: wrap; gap: 4px;
      /* ⚠ align-content は flex-start にする。center にすると3行目が «上下が削れた文字»
         になって、切れているのか汚れているのか分からない見え方になる。 */
      align-content: flex-start; overflow: hidden;   /* 高さは下で2行ぶんに固定 */
    }
    .rk-cta {
      flex: 0 0 auto;
      border: 1px solid #e4c2c1; background: #f9f1f0; color: #b0656a;
      border-radius: 10px; padding: 7px 12px; font-size: 12px; font-weight: 700;
      white-space: nowrap; line-height: 1.4;
    }
    .rk-card:hover .rk-cta { background: #f4e6e4; border-color: #dbb0af; }
    .rk-tag {
      border: 1px solid #e6e1d8; border-radius: 6px; padding: 2px 6px;
      font-size: 9.5px; color: #6f7680; background: #fff; white-space: nowrap; line-height: 1.6;
      max-width: 100%; overflow: hidden; text-overflow: ellipsis;
    }
    /* タグ2行ぶんの高さ。ここを超えた3行目は出さない（半分だけ見える状態を作らない）。
       1行 = 上下padding 2+2 + 文字 9.5×1.6 + 枠線 2 ≒ 21.2px。2行 + すき間4px ≒ 46.4px */
    .rk-tags { max-height: 47px; }

    /* 紹介文。3行ぶんの高さを確保して、下の数字の位置を揃える */
    .rk-intro {
      font-size: 12.5px; line-height: 1.75; color: #6f7680;
      display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
      overflow: hidden; overflow-wrap: anywhere;
      min-height: calc(12.5px * 1.75 * 3);
    }

    /* ── ④ 数字2つ（枠付きカード・PSD準拠）──
       margin-top:auto でいつもカードの底に置く。上の文字量が変わっても位置は揃う。 */
    .rk-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: auto; }
    /* v6.0(2026-09-10): «団体を支援予約» が枠の外へはみ出していた。
       アイコンと余白を少し詰めて、文字が入る幅を確保する。
       ⚠ .rk-stat__box に overflow:hidden を付けているのは «最後の保険»。
         想定より狭い環境でも、文字が枠の外に描かれることだけは起きないようにする。 */
    /* v7.0(2026-09-11) 運営指示: 数字は枠の «中央» に、大きめに。
       アイコンを左に置くと数字が右に寄るので、アイコンは上に小さく置き、
       数字と説明を枠の中央にそろえる。 */
    .rk-stat {
      display: flex; flex-direction: column; align-items: center; text-align: center;
      gap: 2px; border: 1px solid #efece6; border-radius: 12px; padding: 9px 8px; min-width: 0;
    }
    .rk-stat__ico {
      width: 22px; height: 22px; border-radius: 50%; flex: none;
      display: flex; align-items: center; justify-content: center;
    }
    .rk-stat__ico svg { width: 12px; height: 12px; }
    /* ⚠ flex:1 1 0 は «横並びのとき» の指定。縦積みに切り替えたところでは
       これが «高さ0» と解釈され、overflow:hidden と重なって
       数字とラベルが消えてしまう。縦積み側で必ず打ち消すこと。 */
    .rk-stat__box { min-width: 0; flex: 0 0 auto; width: 100%;
                    display: flex; flex-direction: column; align-items: center; overflow: hidden; }
    .rk-stat__n {
      font-size: 30px; font-weight: 900; line-height: 1.1; letter-spacing: -.02em;
      font-variant-numeric: tabular-nums;
    }
    .rk-stat__l { font-size: 10px; color: #8b95a3; line-height: 1.45; white-space: nowrap; letter-spacing: -.01em; }
    .rk-stat--act .rk-stat__ico { background: #edf6ef; color: #638459; }
    .rk-stat--act .rk-stat__n { color: #638459; }
    .rk-stat--res .rk-stat__ico { background: #fbf5ed; color: #c8873c; }
    .rk-stat--res .rk-stat__n { color: #c8873c; }

    /* 数字がまだ無い会社は、代わりに役割を1行で。高さは数字カードと揃える。 */
    .rk-note {
      margin: auto 0 0; font-size: 12.5px; color: #8b95a3; line-height: 1.7;
      text-align: center; display: flex; align-items: center; justify-content: center;
      border: 1px solid #efece6; border-radius: 12px; padding: 10px 12px;
      min-height: calc(34px + 20px + 2px);
    }

    @media (max-width: 640px) {
      .rk-card { flex-basis: 296px; }
      .rk-ident { padding: 10px 15px 12px; }
      .rk-body { padding: 13px 15px 15px; }
      .rk-head__link { padding-top: 0; }
      /* 狭い画面では横に並べる幅が足りず «団体を支援予約» が枠から出る。
         アイコンを上に置いて、文字に横幅を全部使わせる。 */
      .rk-stat { flex-direction: column; align-items: flex-start; gap: 6px; padding: 9px 10px; }
      .rk-stat__box { flex: 0 0 auto; width: 100%; }   /* ← 縦積みでは高さを潰さない */
      .rk-stat__ico { width: 26px; height: 26px; }
      .rk-stat__ico svg { width: 14px; height: 14px; }
      .rk-stat__n { font-size: 21px; }
      .rk-tags { max-height: 52px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .rk-card { transition: none; }
      .rk-card:hover { transform: none; }
    }
    .rank-item {
      display: grid;
      grid-template-columns: 48px 44px minmax(140px, 1fr) auto auto;
      align-items: center; gap: 14px;
      background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
      padding: 14px 18px; box-shadow: var(--shadow-sm);
      transition: transform .15s, box-shadow .15s;
    }
    .rank-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
    .rank-badge {
      width: 42px; height: 42px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-weight: 900; color: #fff; font-size: 16px;
    }
    .rank-badge.g1 { background: linear-gradient(135deg, #ffd54a, #e8a500); box-shadow: 0 4px 14px rgba(232,165,0,.35); }
    .rank-badge.g2 { background: linear-gradient(135deg, #d4d7de, #9aa1ae); box-shadow: 0 4px 14px rgba(154,161,174,.35); }
    .rank-badge.g3 { background: linear-gradient(135deg, #e2a879, #aa6a3f); box-shadow: 0 4px 14px rgba(170,106,63,.35); }
    .rank-avatar {
      width: 44px; height: 44px; border-radius: 50%;
      background: var(--pink-soft);
      display: flex; align-items: center; justify-content: center;
      font-weight: 900; color: var(--pink); font-size: 15px;
      border: 2px solid #fff; box-shadow: var(--shadow-sm);
    }
    .rank-avatar.a1 { background: #fff2c9; color: #b68400; }
    .rank-avatar.a2 { background: #dff0d7; color: var(--green-deep); }
    .rank-avatar.a3 { background: #f3ebe2; color: #7B5E3A; }
    .rank-avatar.a4 { background: #e8f5e9; color: #2a8c5a; }
    .rank-avatar.a5 { background: #f0f0f0; color: #666; }
    .rank-badge.g0 { background: #cbd0d6; color: #555; }
    .rank-item.rank-hidden { display: none; }
    .rank-name { font-weight: 800; font-size: 15px; }
    .rank-note { font-size: 12px; color: var(--muted); font-weight: 600; margin-top: 2px; }
    .rank-amount { font-weight: 900; font-size: 17px; color: var(--orange); white-space: nowrap; }
    .rank-meta { font-size: 12px; color: var(--muted); white-space: nowrap; }
    @media (max-width: 640px) {
      .rank-item { grid-template-columns: 36px 36px 1fr; row-gap: 4px; padding: 12px 14px; }
      .rank-amount { grid-column: 3; text-align: right; }
      .rank-meta { grid-column: 1 / -1; padding-left: 86px; }
    }

    /* ===== Generic card grid ===== */
    .grid-cards {
      display: grid; gap: 16px;
      grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    }

    /* ===== Horizontal scroller (rail) ===== */
    .rail {
      position: relative;
      margin: 0 -20px; /* 左右の画面端までヌッと流す */
    }
    .rail__track {
      display: flex;
      gap: 16px;
      padding: 10px 20px 24px;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;
    }
    .rail__track::-webkit-scrollbar { height: 8px; }
    .rail__track::-webkit-scrollbar-thumb { background: #d9dde3; border-radius: 999px; }
    .rail__track::-webkit-scrollbar-track { background: transparent; }
    .rail .card {
      flex: 0 0 260px;
      scroll-snap-align: start;
    }
    /* 右端フェード（奥行き感） */
    .rail::after {
      content: "";
      position: absolute; top: 0; right: 0; bottom: 10px;
      width: 80px;
      background: linear-gradient(to right, transparent, var(--coupon-bg, #fafafb) 85%);
      pointer-events: none;
    }
    /* ナビ矢印 */
    .rail__nav {
      position: absolute; top: 50%; transform: translateY(-50%);
      width: 44px; height: 44px; border-radius: 50%;
      background: #fff; border: 1px solid var(--line);
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; z-index: 2;
      box-shadow: var(--shadow-md);
      font-weight: 900; color: var(--ink);
      transition: transform .15s, box-shadow .15s;
    }
    .rail__nav:hover { transform: translateY(-50%) scale(1.06); }
    .rail__nav--prev { left: 8px; }
    .rail__nav--next { right: 8px; }
    .rail__nav:disabled { opacity: .35; cursor: default; transform: translateY(-50%); }
    @media (max-width: 720px) {
      .rail__nav { display: none; }
      .rail .card { flex: 0 0 78%; }
    }
    .card {
      background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
      overflow: hidden; box-shadow: var(--shadow-sm);
      transition: transform .15s, box-shadow .15s;
      display: flex; flex-direction: column;
    }
    .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
    .card__thumb {
      aspect-ratio: 4/3;
      background: linear-gradient(135deg, #ffe5d3, #fde4ec);
      display: flex; align-items: center; justify-content: center;
      font-weight: 900; color: #fff; font-size: 22px; letter-spacing: .1em;
      position: relative;
    }
    .card__thumb::after {
      content: ""; position: absolute; inset: 0;
      background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,.1));
    }
    .card__thumb span { position: relative; z-index: 1; text-shadow: 0 2px 8px rgba(0,0,0,.2); }
    .card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; position: absolute; inset: 0; z-index: 0; }
    .card__thumb.has-image { overflow: hidden; }
    .card__thumb.has-image::after { background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.25)); }
    .thumb-cafe { background: linear-gradient(135deg, #f2c994, #c58a4a); }
    .thumb-school { background: linear-gradient(135deg, #b8d4a8, #6ea84e); }
    .thumb-medical { background: linear-gradient(135deg, #b3d8ec, #4a8fc4); }
    .thumb-sport { background: linear-gradient(135deg, #f0a4a4, #c45a5a); }
    .thumb-beauty { background: linear-gradient(135deg, #e8b8d4, #b566a0); }
    .thumb-edu { background: linear-gradient(135deg, #f2d58c, #c99b36); }
    .thumb-gym { background: linear-gradient(135deg, #c5c5e4, #6b6bb5); }
    .thumb-food { background: linear-gradient(135deg, #f2b295, #d66d45); }
    .card__body { padding: 14px 14px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
    .card__cat {
      display: inline-block; padding: 3px 10px; border-radius: 999px;
      background: var(--green-soft); color: var(--green-deep); font-size: 11px; font-weight: 800;
      align-self: flex-start;
    }
    .card__cat.cat-orange { background: var(--orange-soft); color: var(--orange); }
    .card__cat.cat-pink { background: var(--pink-soft); color: #b34d7a; }
    .card__title { font-weight: 800; font-size: 15px; margin: 2px 0; }
    .card__desc { font-size: 12px; color: var(--muted); margin: 0; }
    .card__offer { font-weight: 900; font-size: 17px; color: var(--orange); }
    .card__support { font-size: 11px; color: var(--muted); }

    /* ============================================================
       v17.5(2026-08-06) 特典クーポンのカードを短く・読みやすく
       ------------------------------------------------------------
       ・写真の枠が縦に長く、上下に大きな余白ができていたので詰める
       ・オレンジの特典文は2行まで。続きは遷移先で読めるので «…» で止める
       ・団体名も2行まで。文字サイズを少しだけ小さく
       ※ #coupons の中だけに効かせます（学校カードなど他の .card は変えません）
       ============================================================ */
    #coupons .card__thumb { aspect-ratio: 16 / 10; }
    #coupons .card__thumb img { object-fit: contain; padding: 6px; box-sizing: border-box; }
    #coupons .card__body { padding: 10px 12px 12px; gap: 4px; }
    #coupons .card__cat { align-self: flex-start; }
    #coupons .card__title {
      font-size: 13.5px; line-height: 1.45; margin: 1px 0 0;
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    #coupons .card__offer {
      font-size: 14.5px; line-height: 1.5; margin: 2px 0 0;
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    #coupons .card__support { font-size: 10.5px; margin: 2px 0 0; }
    @media (max-width: 600px) {
      #coupons .card__title { font-size: 13px; }
      #coupons .card__offer { font-size: 13.5px; }
    }

    /* ===== Partner stripe ===== */
    .partners-stripe {
      display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 12px;
    }
    /* iPad（768-1199px）: 4 列固定で 4+4 配置に */
    @media (min-width: 768px) and (max-width: 1199px) {
      .partners-stripe { grid-template-columns: repeat(4, 1fr); }
    }
    .partner-card {
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 6px; padding: 18px 14px;
      background: var(--card); border: 1px solid var(--line); border-radius: 14px;
      text-align: center; min-height: 120px;
      transition: transform .15s;
    }
    .partner-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
    .partner-logo {
      width: 54px; height: 54px; border-radius: 12px;
      display: flex; align-items: center; justify-content: center;
      font-weight: 900; color: #fff; font-size: 17px;
    }
    .partner-name { font-size: 13px; font-weight: 800; color: var(--ink); }
    .partner-sub { font-size: 11px; color: var(--muted); }

    /* ===== 支援先団体カード（トップページ用） ===== */
    .orgs-intro-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
      gap: 16px;
      margin-bottom: 4px;
    }
    .org-mini-card {
      display: flex; flex-direction: column; gap: 10px;
      padding: 20px 18px 18px;
      background: #fff; border: 1.5px solid #f5ddd0; border-radius: 18px;
      text-decoration: none; color: inherit;
      transition: transform .15s, box-shadow .15s, border-color .15s;
    }
    .org-mini-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(200,130,80,.12); border-color: #f2a07a; }
    .org-mini-card__head { display: flex; align-items: center; gap: 12px; }
    .org-mini-card__badge {
      width: 48px; height: 48px; border-radius: 12px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      font-size: 18px; font-weight: 900; color: #fff;
    }
    .org-mini-card__kind {
      font-size: 11px; font-weight: 700; color: #c96a00;
      background: #fff3e0; padding: 3px 10px; border-radius: 4px;
      display: inline-block; margin-bottom: 4px;
    }
    .org-mini-card__name { font-size: 14px; font-weight: 900; color: #2b1c0e; line-height: 1.3; margin: 0; }
    .org-mini-card__area { font-size: 11.5px; color: #a07850; margin: 0; }
    .org-mini-card__intro { font-size: 12.5px; line-height: 1.75; color: #4a3828; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

    /* ===== Certified partners ===== */
    .certified-grid {
      display: grid; gap: 16px;
      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    }
    .cert-card {
      position: relative;
      background: var(--card); border: 2px solid #ffe19a; border-radius: var(--radius);
      padding: 22px 20px; box-shadow: var(--shadow-sm);
      overflow: hidden; display: block; text-decoration: none; color: inherit;
      transition: transform .15s, box-shadow .15s;
    }
    a.cert-card:hover { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }
    .cert-card::before {
      content: "認定"; position: absolute; top: 12px; right: -28px;
      background: linear-gradient(135deg, #ffd54a, #e8a500); color: #5c3d00;
      font-weight: 900; font-size: 11px; letter-spacing: .2em;
      padding: 4px 32px; transform: rotate(35deg);
    }
    .cert-name { font-weight: 900; font-size: 17px; margin: 0 0 6px; color: var(--ink); }
    .cert-tag { font-size: 11px; color: var(--muted); font-weight: 700; letter-spacing: .06em; }
    .cert-desc { font-size: 13px; color: var(--ink-soft); margin: 10px 0 14px; }
    .cert-link { font-size: 12px; font-weight: 700; color: var(--green-deep); text-decoration: none; }
    .cert-link:hover { text-decoration: underline; }

    /* ===== Pre-supporter block ===== */
    .presup {
      background: linear-gradient(135deg, #fff4d6 0%, #fde4ec 100%);
      border-radius: 28px; padding: 40px 32px;
      position: relative; overflow: hidden;
    }
    .presup::before {
      content: "✨ FIRST SUPPORTER ✨";
      position: absolute; top: 16px; right: 24px;
      background: #fff; padding: 6px 14px; border-radius: 999px;
      font-size: 11px; font-weight: 900; letter-spacing: .2em; color: #b68400;
      box-shadow: var(--shadow-sm);
    }
    .presup__title { font-weight: 900; font-size: 22px; margin: 0 0 6px; }
    .presup__lead { color: var(--ink-soft); margin: 0 0 24px; font-size: 14px; }
    .presup__cos {
      display: grid; gap: 10px;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      margin-bottom: 28px;
    }
    .presup__cos .partner-card { border: 1px solid #fff; background: #ffffffcc; }
    .presup__schools {
      background: #ffffffcc; border-radius: 18px; padding: 22px 24px;
      border: 1px dashed #e3b7a3;
    }
    .presup__schools h4 {
      margin: 0 0 12px; font-size: 15px; font-weight: 900;
      display: flex; align-items: center; gap: 8px;
    }
    .presup__schools h4::before { content: "🏫"; }
    .school-chips { display: flex; flex-wrap: wrap; gap: 6px; }
    .school-chip {
      display: inline-block; padding: 5px 12px; border-radius: 999px;
      background: #fff; border: 1px solid var(--line);
      font-size: 12px; font-weight: 700; color: var(--ink-soft);
    }
    .school-chip b { color: var(--green-deep); }

    /* ===== Reservation grid ===== */
    .res-grid {
      display: grid; gap: 12px;
      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }

    .res-card {
      background: var(--card); border: 1px solid var(--line); border-radius: 12px;
      overflow: hidden; box-shadow: var(--shadow-sm);
      display: flex; flex-direction: column;
    }
    a.res-card-link {
      text-decoration: none; color: inherit;
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    }
    a.res-card-link:hover {
      transform: translateY(-3px);
      box-shadow: 0 10px 22px rgba(0,0,0,.1);
      border-color: var(--green-deep);
    }
    a.res-card-link:focus-visible {
      outline: 2px solid var(--green-deep); outline-offset: 2px;
    }
    .res-thumb {
      aspect-ratio: 16/10;
      display: flex; align-items: center; justify-content: center;
      color: #fff; font-weight: 900; font-size: 15px; letter-spacing: .05em;
      text-shadow: 0 2px 6px rgba(0,0,0,.2);
      overflow: hidden; background: #e5e7eb;
    }
    .res-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .res-body { padding: 10px 12px 12px; }
    .res-title { font-size: 13px; font-weight: 800; margin: 0 0 4px; }
    .res-meta { font-size: 11px; color: var(--muted); }
    .res-amt { font-size: 14px; font-weight: 900; color: var(--orange); margin-top: 4px; }

    /* Color palette for res thumbs */
    .rc0{background:linear-gradient(135deg,#ffb87a,#e8702a);}
    .rc1{background:linear-gradient(135deg,#9cd07f,#4d8b2a);}
    .rc2{background:linear-gradient(135deg,#f29fb3,#c94670);}
    .rc3{background:linear-gradient(135deg,#8fb9e8,#3767ac);}
    .rc4{background:linear-gradient(135deg,#f2d88c,#c99b2f);}
    .rc5{background:linear-gradient(135deg,#b8a7e2,#6849b5);}
    .rc6{background:linear-gradient(135deg,#7ed3c4,#2a8d7a);}
    .rc7{background:linear-gradient(135deg,#f2a994,#d86147);}

    /* ===== Res supporter row ===== */
    .res-supporters {
      display: flex; flex-wrap: wrap; gap: 4px 6px;
      padding: 8px 12px 10px; border-top: 1px dashed var(--line);
      background: #fafafb;
    }
    .res-sup-label {
      font-size: 10px; font-weight: 800; color: var(--muted);
      letter-spacing: .05em; width: 100%; margin-bottom: 2px;
    }
    .res-sup-chip {
      display: inline-flex; align-items: center; gap: 4px;
      padding: 3px 8px; border-radius: 999px;
      background: #fff; border: 1px solid var(--line);
      font-size: 11px; font-weight: 700; color: var(--ink);
    }
    a.res-sup-chip {
      text-decoration: none; cursor: pointer;
      transition: background .12s, border-color .12s, transform .12s, box-shadow .12s;
    }
    a.res-sup-chip:hover {
      background: #f4f9f4; border-color: #3aa55c;
      transform: translateY(-1px);
      box-shadow: 0 2px 6px rgba(58,165,92,.15);
    }
    .res-sup-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); display: inline-block; }

    /* ===== News list ===== */
    .news-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
    /* v6.9: TOPの新着情報は最新6件まで。7件目以降は「もっと見る ＞」(news-list.html)で全件閲覧。
       ※HTMLには残したまま表示だけ絞るので、記事を追加しても自動的に最新6件表示になる。 */
    #newsList .news-item:nth-child(n+7) { display: none; }
    .news-item {
      border-bottom: 1px solid var(--line);
    }
    .news-link {
      display: grid;
      grid-template-columns: 110px 120px 1fr;
      align-items: center; gap: 12px;
      padding: 14px 8px;
      text-decoration: none;
      color: inherit;
      transition: background .15s ease;
    }
    .news-link:hover { background: #f7f9fc; }
    .news-link:focus-visible { outline: 2px solid #2a5ea8; outline-offset: -2px; border-radius: 6px; }
    .news-date { font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: .02em; }
    .news-tag {
      display: inline-flex; align-items: center; justify-content: center;
      padding: 4px 10px; border-radius: 999px;
      font-size: 11px; font-weight: 800; letter-spacing: .03em;
      white-space: nowrap;
    }
    .news-tag--support { background: #e7f5ea; color: #1f7a3a; border: 1px solid #cfe8d5; }
    .news-tag--join    { background: #e7f0fb; color: #2a5ea8; border: 1px solid #cfdef1; }
    .news-tag--offer   { background: #fff1e3; color: #b8541a; border: 1px solid #f6d8bb; }
    .news-tag--rank    { background: #f1e9f8; color: #7a3fa8; border: 1px solid #e0cde8; }
    .news-tag--reserve { background:#fdf6e3; color:#9a7a12; border:1px solid #f0e2a8; }
    .news-text { margin: 0; font-size: 14px; color: var(--ink); line-height: 1.55; font-weight: 600; }
    .more-link { font-size: 13px; font-weight: 800; color: var(--green-deep); text-decoration: none; }
    .more-link:hover { text-decoration: underline; }
    @media (max-width: 700px) {
      .news-link { grid-template-columns: 92px 1fr; row-gap: 6px; }
      .news-tag { justify-self: start; }
      .news-text { grid-column: 1 / -1; }
    }

    /* ===== CTA footer ===== */
    .cta-band {
      background: linear-gradient(135deg, var(--orange) 0%, var(--pink) 100%);
      color: #fff; padding: 60px 20px;
      text-align: center;
      overflow: visible;       /* ドロップダウンがバンド外にはみ出せるよう */
    }
    .cta-band .btn-dropdown__menu { z-index: 9999; }
    .cta-band h2 { font-size: clamp(22px, 3vw, 30px); font-weight: 900; margin: 0 0 10px; }
    .cta-band p { margin: 0 0 28px; opacity: .95; font-size: 15px; }
    .cta-band .btn--org { background: #fff; color: var(--green-deep); }
    .cta-band .btn--corp { background: var(--ink); }

    footer.ft {
      background: #1b2430; color: #cbd1db;
      padding: 32px 20px; text-align: center; font-size: 13px;
    }
    footer.ft a { color: #fff; text-decoration: none; margin: 0 10px; }

    /* Hero photos band (Hero内の3連写真) */
    .hero-photos {
      width: 100%;
      background: transparent;
      padding: 0 0 10px;
      overflow: hidden;
      margin: -20px auto 10px;
    }
    .hero-photos img {
      display: block;
      width: 100%;
      max-width: 1100px;
      height: auto;
      margin: 0 auto;
    }
    @media (max-width: 767px){
      .hero-photos { margin: -30px auto 6px; padding: 0 0 4px; }
    }

    /* Mockup watermark */
    .mock-note {
      position: fixed; top: 10px; left: 10px; z-index: 9999;
      background: #ff7a3d; color: #fff; font-size: 11px; font-weight: 900;
      padding: 6px 12px; border-radius: 999px; letter-spacing: .1em;
      box-shadow: 0 4px 14px rgba(255,122,61,.4);
    }

    /* ===== 貢献ランキング × 先行サポーター 2カラム ===== */
    .rank-presup-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
      gap: 32px;
      align-items: start;
    }
    .rank-col { min-width: 0; }
    .presup-col {
      min-width: 0;
      background: linear-gradient(180deg, #fcfaf5 0%, #fff 100%);
      border: 1px solid var(--line, #e5e7eb);
      border-radius: 16px;
      padding: 24px;
      box-shadow: 0 4px 16px rgba(0,0,0,.04);
    }
    .presup-col .block__title { margin-top: 0; font-size: clamp(18px, 2vw, 22px); }
    .presup-col .block__lead { font-size: 13px; margin-bottom: 16px; }
    .presup-col .presup { margin-top: 8px; }
    .presup-col .presup__cos {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
    }
    .presup-col .presup__cos .partner-card { padding: 10px; }
    .presup-col .presup__cos .partner-logo { width: 40px; height: 40px; font-size: 16px; }
    .presup-col .presup__cos .partner-name { font-size: 11px; line-height: 1.35; }
    .presup-col .presup__cos .partner-sub { font-size: 10px; }
    .presup-col .presup__schools { margin-top: 18px; }
    .presup-col .presup__schools h4 { font-size: 13px; margin: 0 0 10px; }
    .presup-col .school-chips {
      display: flex; flex-wrap: wrap; gap: 6px;
      max-height: 260px; overflow-y: auto;
      padding-right: 4px;
      scrollbar-width: thin;
    }
    .presup-col .school-chip { font-size: 11px; padding: 4px 10px; }

    @media (max-width: 960px) {
      .rank-presup-grid { grid-template-columns: 1fr; gap: 28px; }
      .presup-col .school-chips { max-height: none; }
    }

    /* ===== 新着活動レポート REPORT (v4.8 PSD アートボード 1 準拠) ===== */
    .block--report { background: #fff; padding-top: 8px; padding-bottom: 48px; }
    .block--report .block__title { margin-bottom: 6px; }
    .block--report .block__lead { margin-bottom: 20px; }

    .report-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 18px;
      position: relative;
    }
    .report-card {
      background: #fff;
      border: 1px solid var(--line, #e5e7eb);
      border-radius: 14px;
      overflow: hidden;
      text-decoration: none;
      color: inherit;
      display: flex;
      flex-direction: column;
      transition: transform .15s ease, box-shadow .15s ease;
      box-shadow: 0 2px 6px rgba(0,0,0,.04);
    }
    .report-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 22px rgba(0,0,0,.08);
    }
    .report-thumb {
      width: 100%;
      aspect-ratio: 4 / 3;
      background: linear-gradient(135deg, #e9e9e9 0%, #d6d6d6 100%);
      display: block;
      overflow: hidden;
      position: relative;
    }
    .report-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .report-thumb-placeholder {
      width: 100%; height: 100%;
      display: flex; align-items: center; justify-content: center;
      color: #8a8a8a; font-size: 11px; font-weight: 700; letter-spacing: .08em;
      background: linear-gradient(135deg, #efeae0 0%, #dfd6c5 100%);
    }
    .report-body { padding: 14px 14px 16px; display: flex; flex-direction: column; gap: 8px; }
    .report-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .report-date { font-size: 12px; font-weight: 700; color: var(--muted, #6b7280); letter-spacing: .02em; }
    .report-tag {
      display: inline-flex; align-items: center; justify-content: center;
      padding: 3px 9px; border-radius: 999px;
      font-size: 10.5px; font-weight: 800; letter-spacing: .03em;
      white-space: nowrap;
      background: #e7f4dd; color: #4ea732; border: 1px solid #b9e0a3;
    }
    .report-title {
      margin: 0;
      font-size: 13px;
      line-height: 1.55;
      font-weight: 700;
      color: var(--ink, #1b2430);
      display: -webkit-box;
      -webkit-line-clamp: 5;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    /* スワイプ的な矢印（装飾。クリックで横スクロール） */
    .report-arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 36px; height: 36px;
      border-radius: 50%;
      background: #fff;
      border: 1px solid #f9c6d4;
      box-shadow: 0 4px 12px rgba(0,0,0,.08);
      display: none;  /* PC では非表示（4枚 grid に収まる） */
      align-items: center; justify-content: center;
      cursor: pointer; z-index: 3;
      color: #d96a82;
      font-weight: 900; font-size: 16px;
    }
    .report-arrow--prev { left: -16px; }
    .report-arrow--next { right: -16px; }

    @media (max-width: 960px) {
      .report-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    }
    @media (max-width: 767px) {
      /* SP では横スクロールカルーセル化 */
      .report-grid {
        grid-template-columns: none;
        display: flex;
        gap: 12px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 10px;
        scrollbar-width: thin;
      }
      .report-grid .report-card {
        flex: 0 0 72%;
        scroll-snap-align: start;
      }
      .report-arrow { display: flex; }
    }

    /* ===== v4.33: #ranking Figma 完全準拠リデザイン ===== */
    /* セクション全体: 枠内固定 (はみ出し防止) */
    #ranking .container {
      max-width: 1120px !important;
      box-sizing: border-box !important;
    }
    #ranking .rank-presup-grid {
      box-sizing: border-box !important;
      width: 100% !important;
      max-width: 100% !important;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
      gap: 28px !important;
    }
    /* SP (960px 以下): 1 カラム縦並びに */
    @media (max-width: 960px) {
      #ranking .rank-presup-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 22px !important;
      }
    }
    /* 2 カラム外枠: 白カード + 薄ピンク細枠 + 角丸 */
    /* v4.34: align-items: stretch で 2 カラムの高さを揃える */
    #ranking .rank-presup-grid {
      align-items: stretch !important;
    }
    #ranking .rank-col,
    #ranking .presup-col {
      background: #fff !important;
      border: 1.5px solid #fbd6dc !important;
      border-radius: 18px !important;
      padding: 28px 26px 24px !important;
      box-shadow: 0 2px 10px rgba(0,0,0,.04) !important;
      min-width: 0 !important;
      box-sizing: border-box !important;
      overflow: hidden;
      display: flex !important;
      flex-direction: column !important;
    }
    /* v4.34: rank-col の中身を flex 配分 - more-link を一番下に押し下げ */
    #ranking .rank-col > .rank-list {
      flex: 1 !important;
      align-content: start;
    }
    #ranking .rank-col > p:last-child {
      margin-top: auto !important;
      padding-top: 12px !important;
    }
    #ranking .presup-col > .presup > p:last-child {
      margin-top: auto !important;
    }
    #ranking .presup-col > .presup {
      display: flex !important;
      flex-direction: column !important;
      flex: 1 !important;
    }

    /* ===== ヘッダー: 2 段組 (タイトル + TOP3 RANKING/SUPPORTER ラベル別行) ===== */
    #ranking .rank-col .block__title,
    #ranking .presup-col .block__title {
      position: relative !important;
      padding-left: 16px !important;
      font-size: 22px !important;
      font-weight: 800 !important;
      color: #1b2430 !important;
      line-height: 1.3 !important;
      display: block !important;
      margin: 0 !important;
    }
    /* タイトル左の縦ピンクライン (太め + 中央寄せ) */
    #ranking .rank-col .block__title::before,
    #ranking .presup-col .block__title::before {
      content: "" !important;
      position: absolute !important;
      left: 0 !important;
      top: 4px !important;
      bottom: 4px !important;
      width: 5px !important;
      background: #f48fa3 !important;
      border-radius: 2px !important;
      display: block !important;
    }
    /* chip を別行に: TOP3 RANKING / SUPPORTER */
    #ranking .rank-col .block__title .chip,
    #ranking .presup-col .block__title .chip {
      display: block !important;
      margin-top: 4px !important;
      margin-left: 0 !important;
      padding: 0 !important;
      background: transparent !important;
      color: #a8a08c !important;
      font-size: 14px !important;
      font-weight: 700 !important;
      letter-spacing: .18em !important;
      line-height: 1.4 !important;
    }
    /* 説明文 */
    #ranking .block__lead {
      color: #5a6573 !important;
      font-size: 13.5px !important;
      margin: 12px 0 24px !important;
      padding-left: 0 !important;
      line-height: 1.6 !important;
    }

    /* ===== TOP3 ランキングカード (rank-item) ===== */
    /* v3.0(2026-08-13): «上位6位まで» の打ち切りをやめた。
       ここが «順位» だった頃の名残で、横スクロールのカードに変えたあとも
       7枚目以降を display:none で消し続けていた。
       そのため管理画面に19社を登録しても6社しか出ず、
       «紐づけても反映されない» ように見えていた。
       横スクロールなので、全社出しても場所は取らない。 */
    /* v4.36: 本番 partners-data.js が生成する実構造に対応 */
    /* 実構造: <div.rank-item>
                 <div.rank-badge> <div.rank-avatar>
                 <div>  ← unclassed wrapper
                   <div.rank-name>name + note span</div>
                   <div.rank-note>sub</div>
                 </div>
                 <div.rank-amount> <div.rank-meta>
               </div> */
    /* → 5 直接子要素を grid-template-areas で明示配置 */
    /* v6.9: 応援実績は「順位なし・横スクロールのカード」に変更したため、
       旧ランキング用の grid 強制を解除して flex(横並び+横スクロール)にする。
       以降の #ranking .rank-list .rank-item 系ルールは旧デザイン用で、現在は該当要素が無く不作用。 */
    #ranking .rank-list { gap: 16px !important; display: flex !important; overflow-x: auto !important; }
    #ranking .rank-list .rank-item {
      display: grid !important;
      grid-template-columns: 60px 56px minmax(0, 1fr) auto !important;
      grid-template-rows: auto auto !important;
      grid-template-areas:
        "badge logo nameblock amount"
        "badge logo nameblock meta" !important;
      column-gap: 14px !important;
      row-gap: 2px !important;
      padding: 14px 18px !important;
      background: #fff !important;
      border: 1.5px solid #fce6eb !important;
      border-radius: 14px !important;
      box-shadow: none !important;
      min-width: 0 !important;
      box-sizing: border-box !important;
      align-items: center !important;
    }
    #ranking .rank-list .rank-item:hover {
      transform: none !important;
      box-shadow: 0 4px 14px rgba(0,0,0,.06) !important;
    }
    /* === 各要素を grid-area で明示配置 (auto-flow 完全無効化) === */
    #ranking .rank-list .rank-item > .rank-badge {
      grid-area: badge !important;
      justify-self: center !important;
      align-self: center !important;
    }
    #ranking .rank-list .rank-item > .rank-avatar {
      grid-area: logo !important;
      justify-self: center !important;
      align-self: center !important;
    }
    /* 名前+sub の wrapper div (unclassed) → nameblock エリア */
    #ranking .rank-list .rank-item > div:not([class]),
    #ranking .rank-list .rank-item > div.rank-textblock {
      grid-area: nameblock !important;
      min-width: 0 !important;
      align-self: center !important;
      display: block !important;
    }
    /* wrapper 内 .rank-name / .rank-note は通常 block で自然 stack */
    /* v4.74: 長い社名 (例: 一般社団法人リスクファイナンス研究所) は自動折り返し */
    #ranking .rank-list .rank-item > div > .rank-name {
      display: block !important;
      margin: 0 0 3px 0 !important;
      white-space: normal !important;
      overflow: visible !important;
      word-break: break-word !important;
      overflow-wrap: anywhere !important;
      line-height: 1.35 !important;
    }
    #ranking .rank-list .rank-item > div > .rank-note {
      display: block !important;
      margin: 0 !important;
      overflow-wrap: anywhere !important;
      word-break: break-word !important;
    }
    /* 金額: 右上 */
    #ranking .rank-list .rank-item > .rank-amount {
      grid-area: amount !important;
      justify-self: end !important;
      align-self: end !important;
      margin: 0 !important;
      padding: 0 !important;
    }
    /* 場所/URL: 右下 (amount の真下) */
    #ranking .rank-list .rank-item > .rank-meta {
      grid-area: meta !important;
      justify-self: end !important;
      align-self: start !important;
      margin: 0 !important;
      padding: 0 !important;
    }
    /* フォールバック: もし name/note が直接子の場合 (test injection 等) */
    #ranking .rank-list .rank-item > .rank-name {
      grid-area: nameblock !important;
      grid-row: 1 !important;
      align-self: end !important;
    }
    #ranking .rank-list .rank-item > .rank-note {
      grid-area: nameblock !important;
      grid-row: 2 !important;
      align-self: start !important;
    }
    /* クラウン (RANK 1/2/3) */
    #ranking .rank-list .rank-badge.g1,
    #ranking .rank-list .rank-badge.g2,
    #ranking .rank-list .rank-badge.g3 {
      width: 56px !important;
      height: 56px !important;
    }
    /* アバター → 四角ロゴ枠 (Figma 通り角丸スクエア + グレー背景 + "ロゴ" 文字) */
    #ranking .rank-list .rank-avatar {
      width: 52px !important;
      height: 52px !important;
      border-radius: 10px !important;
      background: #ededed !important;
      color: #6b7280 !important;
      font-size: 11px !important;
      font-weight: 700 !important;
      border: 0 !important;
      box-shadow: none !important;
    }
    /* 名前 + sub */
    #ranking .rank-list .rank-name {
      font-size: 14.5px !important;
      font-weight: 800 !important;
      color: #1b2430 !important;
      line-height: 1.35 !important;
      overflow-wrap: anywhere !important;
      word-break: break-word !important;
      margin: 0 !important;
    }
    #ranking .rank-list .rank-note {
      font-size: 11px !important;
      line-height: 1.5 !important;
      color: #8b95a3 !important;
      font-weight: 600 !important;
      margin: 3px 0 0 !important;
      overflow-wrap: anywhere !important;
    }
    /* 右側: 金額 (上) + 場所/URL (下) を密に積む (間に 2px のみ) */
    #ranking .rank-list .rank-amount {
      grid-column: 4 !important;
      grid-row: 1 !important;
      font-size: 15px !important;
      font-weight: 900 !important;
      color: #e7825a !important;
      white-space: nowrap !important;
      justify-self: end !important;
      text-align: right !important;
      align-self: end !important;
      margin: 0 !important;
      padding: 0 !important;
      line-height: 1.2 !important;
    }
    #ranking .rank-list .rank-meta {
      grid-column: 4 !important;
      grid-row: 2 !important;
      font-size: 11px !important;
      color: #8b95a3 !important;
      font-weight: 500 !important;
      white-space: nowrap !important;
      justify-self: end !important;
      text-align: right !important;
      padding-left: 0 !important;
      margin: 0 !important;
      align-self: start !important;
      line-height: 1.3 !important;
    }
    /* ランキングをもっと見る */
    #ranking .more-link {
      color: #d96a82 !important;
      font-weight: 700 !important;
      font-size: 13.5px !important;
      text-decoration: none !important;
    }
    #ranking .rank-col p:has(.more-link) {
      margin-top: 18px !important;
      text-align: center !important;
    }

    /* v4.91s: セクション ON/OFF 強制制御 */
    .is-section-off { display: none !important; }
    /* ===== 先行サポーター予約状況 (presup-col) ===== */
    /* presup の派手な背景や ::before バッジを完全に消す */
    #ranking .presup::before {
      content: none !important;
      display: none !important;
    }
    #ranking .presup {
      background: transparent !important;
      padding: 0 !important;
      border-radius: 0 !important;
      border: none !important;
      box-shadow: none !important;
      margin-top: 0 !important;
    }
    /* 予約状況 タイトル + First Supporter サブ */
    #ranking .presup__title {
      font-size: 17px !important;
      font-weight: 800 !important;
      color: #1b2430 !important;
      margin: 0 0 4px !important;
      display: flex !important;
      align-items: baseline !important;
      gap: 10px !important;
      flex-wrap: wrap !important;
    }
    #ranking .presup__title .first-supporter-label {
      font-size: 12px !important;
      font-weight: 700 !important;
      color: #a8a08c !important;
      letter-spacing: .08em !important;
    }
    #ranking .presup__lead {
      color: #8b95a3 !important;
      font-size: 12.5px !important;
      margin: 0 0 18px !important;
      line-height: 1.6 !important;
    }

    /* ===== 3 partner cards (1位/2位/3位) - HTML 側で .rank-pos="1/2/3" ラベル付与 ===== */
    #ranking .presup__cos {
      display: grid !important;
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      gap: 10px !important;
      margin: 16px 0 22px !important;
    }
    /* カード上の "1位/2位/3位" ラベルを CSS で挿入 */
    #ranking .presup__cos .partner-card {
      position: relative !important;
      min-width: 0 !important;
      padding: 32px 8px 12px !important;
      box-sizing: border-box !important;
      border-radius: 12px !important;
      text-align: center !important;
      box-shadow: none !important;
    }
    #ranking .presup__cos .partner-card::before {
      position: absolute !important;
      top: 8px !important;
      left: 12px !important;
      font-size: 13px !important;
      font-weight: 900 !important;
      letter-spacing: .02em !important;
    }
    /* 1位: ピンク */
    #ranking .presup__cos .partner-card:nth-child(1) {
      background: #fff3f5 !important;
      border: 1.5px solid #fcdde5 !important;
    }
    #ranking .presup__cos .partner-card:nth-child(1)::before {
      content: "1位" !important;
      color: #d96a82 !important;
    }
    /* 2位: 黄色 */
    #ranking .presup__cos .partner-card:nth-child(2) {
      background: #fffbe6 !important;
      border: 1.5px solid #f0e5b8 !important;
    }
    #ranking .presup__cos .partner-card:nth-child(2)::before {
      content: "2位" !important;
      color: #b68400 !important;
    }
    /* 3位: グリーン */
    #ranking .presup__cos .partner-card:nth-child(3) {
      background: #f0f8e8 !important;
      border: 1.5px solid #c8e0b8 !important;
    }
    #ranking .presup__cos .partner-card:nth-child(3)::before {
      content: "3位" !important;
      color: #4a8a3a !important;
    }
    /* partner card 内のロゴ枠 */
    #ranking .presup__cos .partner-card .partner-logo {
      width: 44px !important;
      height: 36px !important;
      margin: 0 auto 8px !important;
      border-radius: 6px !important;
      background: #ededed !important;
      color: #6b7280 !important;
      font-size: 10px !important;
      font-weight: 700 !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      border: 0 !important;
      box-shadow: none !important;
    }
    #ranking .presup__cos .partner-card .partner-name {
      font-size: 11px !important;
      font-weight: 700 !important;
      line-height: 1.35 !important;
      color: #1b2430 !important;
      overflow-wrap: anywhere !important;
      word-break: break-word !important;
      margin: 0 !important;
    }
    #ranking .presup__cos .partner-card .partner-sub {
      display: none !important;
    }

    /* ===== 対象エリア (黄色ボックス撤去 - シンプルな heading + bullets) ===== */
    #ranking .presup__areas {
      margin: 18px 0 22px !important;
      padding: 0 !important;
      background: transparent !important;
      border-radius: 0 !important;
    }
    #ranking .presup__areas h4 {
      color: #1b2430 !important;
      font-size: 14px !important;
      font-weight: 800 !important;
      margin: 0 0 8px !important;
    }
    #ranking .presup__areas ul {
      font-size: 12.5px !important;
      line-height: 1.85 !important;
      color: #5a6573 !important;
      padding: 0 !important;
      margin: 0 !important;
      list-style: none !important;
    }

    /* 支援先を探す ボタン: ピンクグラデ大型 pill */
    #ranking .presup-col > .presup > p:last-child {
      margin-top: 22px !important;
      text-align: center !important;
    }
    #ranking .presup-col .btn--org {
      background: linear-gradient(135deg, #f48fa3, #d96a82) !important;
      color: #fff !important;
      padding: 14px 40px !important;
      border-radius: 999px !important;
      font-weight: 800 !important;
      font-size: 15px !important;
      border: 0 !important;
      box-shadow: 0 6px 18px rgba(217,106,130,.32) !important;
      display: inline-block !important;
      text-decoration: none !important;
    }

    /* ===== レスポンシブ: 狭い画面で rank-item を 2段組に ===== */
    @media (max-width: 1100px) {
      #ranking .rank-list .rank-item {
        grid-template-columns: 56px 50px minmax(0, 1fr) auto !important;
        gap: 10px !important;
        padding: 12px 14px !important;
      }
      #ranking .rank-list .rank-amount { font-size: 15px !important; }
      #ranking .rank-list .rank-name { font-size: 14px !important; }
    }
    @media (max-width: 960px) {
      /* 2 カラム → 1 カラム時、左右余白を増やす */
      #ranking .rank-col,
      #ranking .presup-col {
        padding: 28px 22px !important;
      }
    }

    /* ===== v4.95: スマホ(≤600px) ランキングカードを縦積みに =====
       狭い端末(320〜414px)で社名カラム(minmax(0,1fr))が ~29px まで潰れ、
       社名が縦1文字書きになる不具合の根治。
       件数・地域を社名の下に落とし、社名を必ず全幅・横書きにする。 */
    @media (max-width: 600px) {
      #ranking .rank-list .rank-item {
        grid-template-columns: 42px 42px minmax(0, 1fr) !important;
        grid-template-rows: auto auto auto !important;
        grid-template-areas:
          "badge logo nameblock"
          "badge logo amount"
          "badge logo meta" !important;
        column-gap: 10px !important;
        row-gap: 1px !important;
        padding: 12px 14px !important;
        align-items: center !important;
      }
      /* badge / avatar をスマホ用に縮小して社名スペースを確保 */
      #ranking .rank-list .rank-badge.g1,
      #ranking .rank-list .rank-badge.g2,
      #ranking .rank-list .rank-badge.g3 {
        width: 42px !important;
        height: 42px !important;
        font-size: 14px !important;
      }
      #ranking .rank-list .rank-avatar {
        width: 42px !important;
        height: 42px !important;
      }
      /* 社名ブロック(無classラッパ): nameblock エリア・全幅 */
      #ranking .rank-list .rank-item > div:not([class]),
      #ranking .rank-list .rank-item > div.rank-textblock {
        grid-area: nameblock !important;
        min-width: 0 !important;
        align-self: center !important;
      }
      /* 社名: 必ず横書き・折り返し (縦書き根治の要) */
      #ranking .rank-list .rank-item > div > .rank-name,
      #ranking .rank-list .rank-name {
        white-space: normal !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
        font-size: 14px !important;
        line-height: 1.35 !important;
      }
      /* 件数: 社名の真下・左寄せ */
      #ranking .rank-list .rank-item > .rank-amount {
        grid-area: amount !important;
        justify-self: start !important;
        align-self: center !important;
        text-align: left !important;
        white-space: nowrap !important;
        margin: 1px 0 0 0 !important;
        padding: 0 !important;
      }
      /* 地域: 件数の下・左寄せ (長い地域名は折り返し可) */
      #ranking .rank-list .rank-item > .rank-meta {
        grid-area: meta !important;
        justify-self: start !important;
        align-self: center !important;
        text-align: left !important;
        white-space: normal !important;
        margin: 0 !important;
        padding: 0 !important;
      }
    }

    /* ===== v4.29: NEWS + REPORT を Figma 最新デザインに合わせる ===== */
    /* v4.31 fix: 内側カードを白に (薄黄色は外側のみ、箱の中は白) */
    .block--news .container,
    .block--report .container {
      background: #fff !important;
      border: 1.5px solid #fbd6dc;
      border-radius: 16px;
      padding: 28px 28px 24px;
      max-width: 1120px;
    }
    /* 見出しに左縦ピンクライン + chip スタイル */
    .block--news .block__title,
    .block--report .block__title {
      position: relative;
      padding-left: 14px;
      font-size: clamp(18px, 1.6vw, 22px);
      font-weight: 800;
      color: #1b2430;
      line-height: 1.4;
      display: flex;
      align-items: baseline;
      gap: 12px;
      flex-wrap: wrap;
      margin: 0 0 6px;
    }
    .block--news .block__title::before,
    .block--report .block__title::before {
      content: "";
      position: absolute;
      left: 0;
      top: 4px;
      bottom: 4px;
      width: 4px;
      background: #f48fa3;
      border-radius: 2px;
    }
    .block--news .block__title .chip,
    .block--report .block__title .chip {
      font-size: clamp(11px, 1vw, 13px);
    }
    .block--news .block__lead,
    .block--report .block__lead {
      color: #6b7280;
      font-size: 13px;
      margin: 0 0 18px;
    }
    /* news-item の区切りを破線に */
    .block--news .news-list {
      border-top: none !important;
    }
    .block--news .news-item {
      border-bottom: 1px dashed #d8d3c5 !important;
    }
    .block--news .news-item:last-child {
      border-bottom: none !important;
    }
    .block--news .news-link {
      padding: 14px 4px !important;
    }
    /* report-card カード化 (枠ピンク) */
    .block--report .report-card {
      background: #fff !important;
      border: 1.5px solid #fbd6dc !important;
    }
    .block--report .report-arrow {
      background: #fff !important;
      border: 1.5px solid #fbd6dc !important;
      color: #f48fa3 !important;
    }
    /* SP では padding を少し緩める */
    @media (max-width: 767px) {
      .block--news .container,
      .block--report .container {
        padding: 20px 18px 18px;
      }
    }

    /* ===== v4.9 NEWS 上の新ビジュアル 2 セクション (PSD 系のアートワーク貼込み) ===== */
    /* v4.13: !important で .block の padding を強制上書き
       (.block { padding: 72px 20px } が figma-style.css 経由で勝っていた) */
    .block--hero-overview,
    .block--benefits {
      background: #fff !important;
      padding: 0 !important;
      margin: 0 !important;
      border-top: 0 !important;
      border-bottom: 0 !important;
      line-height: 0 !important;  /* 画像の下の inline gap も消す */
    }
    .block--hero-overview .visual-figure,
    .block--benefits .visual-figure {
      margin: 0 !important;
      padding: 0 !important;
      max-width: none !important;
      width: 100% !important;
      text-align: center;
      line-height: 0 !important;
    }
    .block--hero-overview .visual-figure picture,
    .block--benefits .visual-figure picture,
    .block--hero-overview .visual-figure img,
    .block--benefits .visual-figure img {
      display: block !important;
      width: 100% !important;
      height: auto !important;
      max-width: none !important;  /* 画面いっぱい */
      margin: 0 !important;
      padding: 0 !important;
    }

    /* ===== v4.10 新ヒーロー (画像 + 2 CTA ボタン構成) ===== */
    /* v4.13 fix: figma-critical-overrides の SP メディアクエリ
       .hero { padding-top: 20px !important; padding-bottom: 16px !important; } が
       後で定義されていて勝っていたので、tag + class で specificity を上げて勝つ。
       (section.hero--v410 = 0,0,1,1 > .hero = 0,0,1,0) */
    section.hero--v410,
    .hero--v410 {
      background: #fff !important;
      padding: 0 !important;
      margin: 0 !important;
      display: block;
      position: relative;
      overflow: visible;
      min-height: 0 !important;
    }
    .hero--v410 .hero__inner { display: none !important; }
    .hero--v410 .hero-photos { display: none !important; }
    .hero--v410 .hero-circle-photos { display: none !important; }

    .hero-v410-stage {
      width: 100%;
      max-width: 1800px;
      margin: 0 auto;
      line-height: 0;
    }
    .hero-v410-bg {
      display: block;
      width: 100%;
      height: auto;
      max-width: 1800px;
      margin: 0 auto;
    }

    .hero-v410-cta {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 32px;
      flex-wrap: wrap;
      /* v4.14: ヒーロー画像下端の白い余白部分にボタンを被せる
         画像高さ ÷ 16 (1280/1800 * 781 ≈ 555) のうち、
         下端 約120px が白い空間 → ボタン (高さ 67px) が中央に来るよう
         margin-top: -100px くらいで重ねる */
      padding: 0 16px 24px;
      background: transparent;
      margin-top: -100px;  /* 画像の白余白に被せる */
      position: relative;
      z-index: 2;
    }
    .hero-v410-cta-btn {
      display: inline-block;
      line-height: 0;
      transition: transform .15s ease, filter .15s ease;
      max-width: 360px;
      width: 100%;
      flex: 0 1 360px;
    }
    .hero-v410-cta-btn img {
      display: block;
      width: 100%;
      height: auto;
      max-width: 360px;
    }
    .hero-v410-cta-btn:hover { transform: translateY(-2px); filter: brightness(1.05); }
    .hero-v410-cta-btn:active { transform: translateY(0); }
    .hero-v410-cta-btn:focus-visible { outline: 3px solid #2a5ea8; outline-offset: 4px; border-radius: 999px; }

    @media (max-width: 767px) {
      .hero-v410-cta {
        flex-direction: column;
        gap: 14px;
        padding: 0 24px 16px;
        /* SP: 画像 750x1221 を 375 幅で表示 (高さ 610px) のうち
           下端約 85px が白余白 → ボタン 2 個分 (約 130px) なので
           ボタン中央が白部分にちょうど被さるよう margin-top: -60px */
        margin-top: -60px;
      }
      .hero-v410-cta-btn {
        /* v4.11 fix: column flex で flex-basis: 360px が縦方向に効いてしまい
           ボタン間に巨大な空白ができていた → flex を auto に戻す */
        flex: 0 0 auto;
        max-width: 320px;
        width: 100%;
      }
      .hero-v410-cta-btn img { max-width: 320px; width: 100%; }
      /* v4.21 fix: 後で定義される .hero-v410-cta-dropdown { flex: 0 1 360px } に
         specificity が同じで負けるので !important で確実に上書き。
         360px が SP の column flex で縦サイズ 360px として効くバグ再発防止 */
      .hero-v410-cta-dropdown {
        flex: 0 0 auto !important;
        max-width: 320px !important;
        width: 100% !important;
      }
    }
    /* v4.12: NEWS の区切り線は不要 (v4.11 で追加していたが撤去) */

    /* ===== v4.16: ヒーロー CTA ドロップダウン (v4.10 以前の機能を復元) ===== */
    .hero-v410-cta-dropdown {
      position: relative;
      max-width: 360px;
      width: 100%;
      flex: 0 1 360px;
    }
    .hero-v410-cta-btn--toggle {
      background: transparent;
      border: 0;
      padding: 0;
      cursor: pointer;
      width: 100%;
      display: block;
      line-height: 0;
    }
    .hero-v410-cta-btn--toggle img {
      display: block;
      width: 100%;
      height: auto;
      max-width: 360px;
      pointer-events: none;
    }
    .hero-v410-cta-menu {
      position: absolute;
      top: calc(100% + 8px);
      left: 50%;
      transform: translateX(-50%) translateY(-6px);
      min-width: 280px;
      max-width: 90vw;
      background: #fff;
      border: 1px solid #e5e7eb;
      border-radius: 14px;
      box-shadow: 0 14px 36px rgba(0,0,0,.18);
      padding: 8px;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity .18s ease, transform .18s ease, visibility .18s;
      z-index: 1000;
    }
    .hero-v410-cta-dropdown.is-open .hero-v410-cta-menu {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translateX(-50%) translateY(0);
    }
    .hero-v410-cta-menu a {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 16px;
      border-radius: 10px;
      color: #1b2430;
      text-decoration: none;
      font-size: 14px;
      font-weight: 700;
      transition: background .12s ease;
      white-space: nowrap;
    }
    .hero-v410-cta-menu a:hover,
    .hero-v410-cta-menu a:focus-visible {
      background: #fdf6f0;
      outline: none;
    }
    .hero-v410-cta-menu__icon {
      font-size: 18px;
      line-height: 1;
      flex-shrink: 0;
    }
    /* 矢印 (上向き三角) */
    .hero-v410-cta-menu::before {
      content: "";
      position: absolute;
      top: -7px;
      left: 50%;
      transform: translateX(-50%);
      width: 14px;
      height: 14px;
      background: #fff;
      border-left: 1px solid #e5e7eb;
      border-top: 1px solid #e5e7eb;
      transform: translateX(-50%) rotate(45deg);
    }
    /* SP: メニューがはみ出ないよう viewport 制限 */
    @media (max-width: 767px) {
      .hero-v410-cta-menu {
        min-width: min(280px, calc(100vw - 32px));
      }
    }

    /* ===== v4.15 注目コンテンツ - 人気特典パートナー TOP3 ===== */
    .block--featured {
      background: #fff;
      padding: 56px 16px 56px;
    }
    .block--featured .featured-title {
      text-align: center;
      font-size: clamp(22px, 2.8vw, 28px);
      font-weight: 900;
      color: #6D4A39;
      margin: 0 0 18px;
    }
    .featured-label-wrap {
      text-align: center;
      margin: 0 auto 28px;
    }
    .featured-label {
      display: inline-block;
      background: #fde4ec;
      color: #d96a82;
      font-size: 15px;
      font-weight: 700;
      padding: 10px 36px;
      border-radius: 999px;
    }
    .featured-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
      max-width: 1100px;
      margin: 0 auto;
    }
    .featured-card {
      display: flex;
      align-items: stretch;
      gap: 14px;
      padding: 16px;
      border: 1.5px solid #fde4ec;
      border-radius: 14px;
      background: #fff;
      text-decoration: none;
      color: inherit;
      transition: box-shadow .15s ease, transform .15s ease;
      min-height: 112px;
    }
    .featured-card:hover {
      box-shadow: 0 8px 20px rgba(0,0,0,.08);
      transform: translateY(-2px);
      border-color: #f9c6d4;
    }
    .featured-card__logo {
      flex: 0 0 80px;
      width: 80px;
      height: 80px;
      border-radius: 8px;
      background: #fafafa;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
    .featured-card__logo img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
    .featured-card__logo-char {
      font-size: 32px;
      font-weight: 900;
      color: #fff;
      line-height: 1;
    }
    .featured-card__body {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 6px;
      justify-content: center;
    }
    .featured-card__name {
      margin: 0;
      font-size: 14px;
      font-weight: 800;
      color: #1b2430;
      line-height: 1.4;
    }
    .featured-card__intro {
      margin: 0;
      font-size: 12px;
      color: #6b7280;
      line-height: 1.5;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    @media (max-width: 960px) {
      .featured-grid { grid-template-columns: 1fr; max-width: 600px; }
    }
    @media (max-width: 767px) {
      .block--featured { padding: 40px 16px; }
      .featured-card { padding: 14px; min-height: auto; }
      .featured-card__logo { flex: 0 0 64px; width: 64px; height: 64px; }
    }

    /* ============================================================
       v4.73: ランキング rank-item 重なり修正 (PC)
       長い社名（例: 一般社団法人リスクファイナンス研究所）が
       右側の rank-amount を侵食する問題の根本修正。

       仕組み:
       ・grid の name 列を minmax(0, 1fr) に → 最小幅 0 で縮約可
       ・name wrapper に min-width: 0 → grid item の内在最小幅を解除
       ・rank-name に折り返し許可 → 長文は 2 行で表示
       ・amount/meta との視覚的隙間も確保
       ============================================================ */
    @media (min-width: 641px) {
      #ranking .rank-item {
        grid-template-columns: 48px 44px minmax(0, 1fr) auto auto !important;
        column-gap: 16px !important;
      }
      #ranking .rank-item > div:nth-child(3) {
        min-width: 0 !important;
        overflow: hidden !important;
      }
      #ranking .rank-name {
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        line-height: 1.35 !important;
        font-size: 14px !important;
      }
      #ranking .rank-note {
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        line-height: 1.5 !important;
      }
      #ranking .rank-amount {
        flex-shrink: 0 !important;
        text-align: right !important;
        white-space: nowrap !important;
        font-size: 16px !important;
        padding-left: 4px !important;
      }
      #ranking .rank-meta {
        flex-shrink: 0 !important;
        text-align: right !important;
        white-space: nowrap !important;
        max-width: 110px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
      }
    }
  

/* ==================== index.html inline <style> #2 ==================== */

    /* === ヒーロータイトル: Figma 厳密仕様 === */
    .hero__title { font-size: 40px !important; line-height: 1 !important; letter-spacing: 0 !important; font-weight: 700 !important; }
    .hero__title em { color: #6abf4b !important; font-style: normal !important; font-weight: 700 !important; }   /* 緑 「支援」 */
    .hero__title b  { color: #ef8fa3 !important; font-weight: 700 !important; }   /* ピンク 「集客」「信頼」 */
    .hero__title-sub { display: inline-block !important; margin-top: 14px !important; color: #6D4A39 !important; font-size: 24px !important; font-weight: 700 !important; line-height: 1 !important; letter-spacing: 0 !important; }
    .hero__lead { font-size: 20px !important; font-weight: 400 !important; line-height: 30px !important; color: #6D4A39 !important; margin: 0 0 26px !important; }

    /* === 上部の不要な hero-photos バンドを完全に隠す === */
    .hero-photos { display: none !important; }
    .hero-circle-photos { display: none !important; }

    /* === ヒーロー右側 .hero__art を Kv1.png に === */
    .hero__art { background: transparent !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; aspect-ratio: 721/564; display: flex !important; align-items: center; justify-content: center; }
    .hero__art-inner { display: none !important; }
    .hero__art .hero__kv-image { width: 100% !important; max-width: 720px !important; height: auto !important; display: block !important; }

    /* === CTA ボタン色を Figma に揃える (org=オレンジ, corp=緑) === */
    .btn--org { background: linear-gradient(135deg, #ff9c5a, #ff8a4f) !important; color: #fff !important; border: 0 !important; font-weight: 700 !important; box-shadow: 0 4px 14px rgba(255,138,79,.35) !important; }
    .btn--corp { background: linear-gradient(135deg, #82d165, #6abf4b) !important; color: #fff !important; border: 0 !important; font-weight: 700 !important; box-shadow: 0 4px 14px rgba(106,191,75,.35) !important; }
    .hero__ctas .btn--lg { width: 272px; min-height: 67px; font-size: 18px !important; padding: 18px 28px !important; }

    /* === KPI 月桂樹装飾 === */
    /* 修正 2026-05-17: minmax(0, 1fr) で 3 列を強制等幅化（content が広くて 1fr が膨らむのを防止） */
    .kpis { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 16px !important; margin-top: 32px !important; overflow: hidden; }
    .kpi { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 12px 36px !important; position: relative; min-height: 96px; text-align: center; min-width: 0; overflow: hidden; }
    .kpi::before, .kpi::after { content: ""; position: absolute; top: 50%; width: 32px; height: 100px; background-image: url("./lp-images/figma/icons/laurel-wreath.png"); background-repeat: no-repeat; background-size: 176px 106px; transform: translateY(-50%); pointer-events: none; }
    .kpi::before { left: 0; background-position: 0 center; }
    .kpi::after  { right: 0; background-position: right center; }

    /* iPad 横 (961-1199px): KPI のパディングを縮めて改行を防止 */
    @media (min-width: 961px) and (max-width: 1199px) {
      .kpi { padding: 12px 22px !important; min-height: 110px !important; }
      .kpi::before, .kpi::after { width: 20px !important; background-size: 130px 78px !important; }
      .kpi__num { font-size: 22px !important; }
      .kpi__num small { font-size: 11px !important; }
    }

    /* === ランキング クラウン === */
    .rank-badge.g1, .rank-badge.g2, .rank-badge.g3 { width: 56px !important; height: 56px !important; background-color: transparent !important; background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; border: 0 !important; box-shadow: none !important; color: transparent !important; font-size: 0 !important; }
    .rank-badge.g1 { background-image: url("./lp-images/figma/icons/crown-gold.png") !important; }
    .rank-badge.g2 { background-image: url("./lp-images/figma/icons/crown-silver.png") !important; }
    .rank-badge.g3 { background-image: url("./lp-images/figma/icons/crown-bronze.png") !important; }

    /* === 地域共創パートナー リボン勲章 === */
    .cert-card { position: relative !important; border: 2px solid #fde4ec !important; border-radius: 18px !important; background: #fff !important; padding-top: 50px !important; overflow: visible !important; }
    .cert-card::before { display: none !important; }
    .cert-card::after { content: ""; position: absolute; top: -28px; left: 50%; transform: translateX(-50%); width: 55px; height: 69px; background: url("./lp-images/figma/icons/ribbon-medal.png") no-repeat center/contain; pointer-events: none; z-index: 2; }

    /* === CTA バンド ピンク背景 === */
    .cta-band { background: linear-gradient(180deg, #fff5f8 0%, #fde4ec 100%) !important; color: #1b2430 !important; padding: 80px 20px !important; }
    .cta-band h2 { font-size: clamp(26px, 4vw, 36px) !important; font-weight: 900 !important; color: #1b2430 !important; }
    .cta-band p { color: #4b5563 !important; opacity: 1 !important; }
    .cta-band .btn--org { background: linear-gradient(135deg, #f48fa3, #d96a82) !important; }
    .cta-band .btn--corp { background: linear-gradient(135deg, #82d165, #6abf4b) !important; }
    .cta-band .btn--ghost { background: linear-gradient(135deg, #ffc35c, #ff8a4f) !important; color: #fff !important; border: 0 !important; }

    /* CTA 円形写真 */
    .cta-photos { display: flex; justify-content: center; align-items: center; gap: 14px; margin: 0 auto 36px; max-width: 600px; }
    .cta-photos .cta-photo { width: clamp(120px, 16vw, 200px); aspect-ratio: 1; border-radius: 50%; background: #fefaee; overflow: hidden; border: 6px solid #fff; box-shadow: 0 6px 20px rgba(0,0,0,0.1); flex-shrink: 0; }
    .cta-photos .cta-photo:nth-child(2) { margin-top: 24px; }
    .cta-photos .cta-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

    /* === ニュースバッジ Figma 配色 === */
    .news-tag--support { background: #e7f4dd !important; color: #4ea732 !important; border: 1px solid #b9e0a3 !important; }
    .news-tag--join    { background: #fde4ec !important; color: #d96a82 !important; border: 1px solid #f9c6d4 !important; }
    .news-tag--offer   { background: #fff5e6 !important; color: #c66020 !important; border: 1px solid #f5c799 !important; }

    /* === SP では PC 用 Kv1 を非表示、SP 用画像を表示 === */
    .hero__kv-sp-image { display: none; }

    /* === SP / タブレット縦: Figma SP-TOP1 完全準拠 === */
    @media (max-width: 960px) {
      /* ヒーローは白背景。装飾ドットは hero-sp.png に焼き込まれているので CSS で出さない */
      .hero {
        background: #ffffff !important;
        position: relative !important;
        overflow: visible !important;        /* ドロップダウンがヒーロー外にはみ出せるよう visible に */
        padding-top: 20px !important;
        padding-bottom: 16px !important;     /* 次セクションとのギャップを 30→16 に */
      }
      .hero > * { position: relative; z-index: 1; }
      .hero__inner, .hero__ctas { overflow: visible !important; }
      /* ドロップダウンメニューは最前面に */
      .hero__ctas .btn-dropdown__menu { z-index: 9999 !important; }

      /* === Figma SP-TOP1: テキストを画像にオーバーレイ ===
         hero-sp.png は上半分が装飾ドットの余白、下半分が 3 円写真。
         上半分のドット余白部分に title / subtitle / lead を absolute で
         重ねて、Figma のイメージ通りの構図を作る。 */
      .hero__inner {
        display: flex !important;
        flex-direction: column;
        gap: 0 !important;
        align-items: center !important;
        position: relative !important;
      }
      .hero__inner > div:first-child { display: contents !important; }
      /* 視覚順: 画像 (テキスト重なり) → KPI → CTA */
      .hero__art     { order: 1; width: 100%; }
      .kpis          { order: 2; }
      .hero__ctas    { order: 3; }

      /* eyebrow は SP では非表示（Figma SP-TOP1 準拠） */
      .hero__eyebrow { display: none !important; margin-top: 0 !important; }

      /* タイトル: 画像上部に絶対配置（オーバーレイ） */
      .hero__title {
        position: absolute !important;
        top: 12px !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 10 !important;
        order: 0 !important;
        text-align: center !important;
        font-size: clamp(18px, 5.4vw, 24px) !important;
        line-height: 1.3 !important;
        margin: 0 !important;
        padding: 0 12px !important;
        letter-spacing: -0.04em !important;
        white-space: nowrap !important;
        overflow: visible !important;
      }
      .hero__title em, .hero__title b { letter-spacing: -0.04em !important; }
      .hero__title-sub {
        display: block !important;
        font-size: clamp(13px, 3.7vw, 16px) !important;
        margin-top: 10px !important;
        line-height: 1.5 !important;
        letter-spacing: 0 !important;
        white-space: normal !important;
      }
      /* 説明文: タイトル直下の装飾ドット領域に配置（写真に被らない高さ） */
      .hero__lead {
        position: absolute !important;
        top: 96px !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 10 !important;
        order: 0 !important;
        text-align: center !important;
        font-size: 12px !important;
        line-height: 1.6 !important;
        margin: 0 !important;
        padding: 0 20px !important;
      }

      /* === SP ヒーロー写真 = Figma 公式 SP 画像 (hero-sp.png) を 1 枚そのまま表示
         画像の上半分が文字オーバーレイ領域、下半分が写真領域 */
      .hero__art {
        background: transparent !important;
        aspect-ratio: auto !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 0 !important;
        display: block !important;
        width: 100% !important;
        text-align: center;
        position: relative;
      }
      .hero__art .hero__kv-image { display: none !important; }
      .hero__art .hero__kv-sp-image {
        display: block !important;
        width: 100%;
        max-width: 540px;
        height: auto;
        margin: 0 auto;
      }

      /* KPI (SP) - v3.15: small 接尾語を改行表示にしているので、高さに余裕を持たせる */
      .kpis { padding: 0 4px !important; gap: 4px !important; margin-top: 18px !important; }
      .kpi { padding: 8px 18px !important; min-height: 96px !important; }
      .kpi__num { font-size: 18px !important; line-height: 1.05 !important; }
      .kpi__num small { font-size: 9px !important; line-height: 1.2 !important; margin-top: 1px !important; }
      .kpi__label { font-size: 10px !important; }
      .kpi::before, .kpi::after { width: 14px !important; height: 96px !important; background-size: 110px 96px !important; }

      /* CTA: 縦並び + 中央寄せ + 横幅最適化 */
      .hero__ctas {
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;
        width: 100%;
        margin-top: 18px;
      }
      .hero__ctas .btn-dropdown { width: 100%; max-width: 320px; }
      .hero__ctas .btn--lg, .hero__ctas .btn-dropdown__toggle {
        width: 100% !important;
        max-width: 320px !important;
        min-height: 60px !important;
        font-size: 17px !important;
        padding: 16px 24px !important;
        border-radius: 999px !important;
      }
    }
  

/* ==================== index.html inline <style> #3 ==================== */

/* 2026-08-12: 運営指示で「応援を受けている団体」の表示を **合計10組** に揃える。
   ・以前は PCだけ20件までで、スマホは32件すべて出ていた（画面ごとに数が違った）。
     → 画面幅にかかわらず10組に統一する。
   ・11組目以降は消していない。«見せていないだけ» で、
     「支援を受けている団体をすべて見る ＞」(reservations.html) には全件出る。
   （旧 v7.6: @media (min-width:768px) で nth-child(n+21)） */
#active-support .res-grid > .res-card:nth-child(n+11){ display:none !important; }

/* 2026-08-09: スマホでも2列で見せる（1列だと縦に長くなりすぎるため）。
   「支援先を探す」(search-all.html の .usx-grid) と同じ手当てに揃えている。
   .res-grid は auto-fill/minmax(180px) のため、375px端末（内容幅≈343px）だと
   2枚入らず1列に落ちる。ここでは列数を直接指定する。
   あわせて中の文字も少し詰め、長い団体名は行数で切って高さを揃える。
   このセクション専用の指定（#active-support 配下）なので他へは影響しない。 */
@media (max-width: 560px){
  #active-support .res-grid,
  /* 2026-08-14 運営指示: 支援予約の枠もスマホで2列にする（#active-support だけに
     かかっていたため、こちらは1列のままだった） */
  #reserved-support .res-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
  #active-support .res-body { padding: 8px 10px 10px; }
  #active-support .res-title {
    font-size: 12px; line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  #active-support .res-meta {
    font-size: 10.5px; line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  #active-support .res-amt { font-size: 12.5px; margin-top: 3px; }
  #active-support .res-supporters { padding: 6px 10px 8px; gap: 3px 5px; }
  #active-support .res-sup-label { font-size: 9.5px; }
  #active-support .res-sup-chip { font-size: 10px; padding: 2px 7px; }
  #active-support .res-thumb { font-size: 13px; }
}
@media (max-width: 380px){
  #active-support .res-grid,
  #reserved-support .res-grid { gap: 8px; }
}


/* ==================== index.html inline <style> #4 ==================== */

    .coupon-modal{position:fixed;inset:0;z-index:9000;display:none;align-items:center;justify-content:center;padding:20px;}
    .coupon-modal.is-open{display:flex;}
    .coupon-modal__backdrop{position:absolute;inset:0;background:rgba(20,22,28,0.55);backdrop-filter:blur(4px);animation:cmFade .2s ease;}
    .coupon-modal__dialog{position:relative;background:#fff;border-radius:20px;max-width:520px;width:100%;max-height:90vh;overflow:auto;box-shadow:0 30px 80px rgba(0,0,0,.3);animation:cmPop .25s cubic-bezier(.2,.9,.3,1.2);}
    .coupon-modal__close{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:50%;border:none;background:rgba(255,255,255,.9);font-size:22px;line-height:1;cursor:pointer;z-index:2;box-shadow:0 2px 8px rgba(0,0,0,.15);}
    .coupon-modal__close:hover{background:#fff;transform:scale(1.05);}
    .coupon-modal__thumb{width:100%;height:220px;background:#f2f4f7;overflow:hidden;border-radius:20px 20px 0 0;}
    .coupon-modal__thumb img{width:100%;height:100%;object-fit:cover;display:block;}
    .coupon-modal__body{padding:24px 28px 28px;}
    .coupon-modal__title{margin:8px 0 6px;font-size:22px;font-weight:700;}
    .coupon-modal__offer{font-size:18px;color:#2a8c5a;font-weight:600;margin:0 0 6px;}
    .coupon-modal__support{font-size:13px;color:#666;margin:0 0 16px;}
    .coupon-modal__meta{border-top:1px solid #eef0f3;padding-top:16px;margin-top:8px;}
    .coupon-modal__desc{font-size:13px;line-height:1.6;color:#444;margin:0 0 14px;}
    .coupon-modal__info{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:13px;margin:0 0 18px;}
    .coupon-modal__info dt{color:#888;font-weight:500;}
    .coupon-modal__info dd{margin:0;color:#222;}
    .coupon-modal__actions{display:flex;gap:10px;flex-wrap:wrap;}
    .coupon-modal__actions .btn{flex:1;min-width:140px;text-align:center;}
    #couponRail .card{cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;}
    #couponRail .card:hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(0,0,0,.1);}
    #couponRail .card:focus-visible{outline:3px solid #2a8c5a;outline-offset:3px;}
    @keyframes cmFade{from{opacity:0}to{opacity:1}}
    @keyframes cmPop{from{opacity:0;transform:scale(.92) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}
    @media (max-width:767px){
      .coupon-modal__thumb{height:180px;}
      .coupon-modal__body{padding:20px;}
      .coupon-modal__title{font-size:19px;}
    }
  

/* ==================== index.html inline <style> #5 ==================== */
 ごと外せば元の見た目に戻る。 -->
<style>
  #ranking .rank-list{ gap:12px !important }   /* 既存の gap:16px !important に勝たせる */
  /* 枠の幅から gap 3つ分を引いて4等分。狭い画面では min-width が効いて横スクロールに戻る */
  #ranking .rk-card{ flex:0 0 calc((100% - 36px) / 4); min-width:228px }
  /* v5.0(2026-09-10) 4枚並びは幅が狭いので、各段を少し詰める。
     クラス名がデザイン変更で変わったので、ここも合わせて書き換えた。 */
  #ranking .rk-ident{ padding:11px 13px 12px }
  #ranking .rk-body{ padding:12px 13px 13px; gap:9px }
  #ranking .rk-name{ font-size:16px; line-height:1.4; min-height:calc(16px * 1.4 * 2) }
  #ranking .rk-sub{ font-size:10.5px; min-height:calc(10.5px * 1.6) }
  #ranking .rk-badge{ font-size:9px; padding:2px 6px }
  /* v6.0(2026-09-10): 札は画像の上ではなく社名の帯の中に置く。
     ここも本体CSSと同じ名前に合わせておく（片方だけ直すと効かない）。 */
  #ranking .rk-meta{ gap:5px; min-height:21px }
  #ranking .rk-cta{ font-size:11px; padding:6px 10px; border-radius:9px }
  #ranking .rk-tag{ font-size:9px; padding:2px 5px; border-radius:5px }
  /* タグ2行ぶん。1行 ≒ 2+2+9×1.6+2 = 20.4px、2行+すき間4px ≒ 44.8px */
  #ranking .rk-tags{ gap:4px; max-height:45px }
  #ranking .rk-intro{ font-size:11.5px; line-height:1.7; -webkit-line-clamp:3;
                      min-height:calc(11.5px * 1.7 * 3); color:#7b8390 }
  #ranking .rk-stats{ gap:7px }
  /* ⚠ 本番で実測してわかったこと（2026-09-10）:
     一覧の枠は最大1100pxで止まるので、画面をどれだけ広げても
     «4枚並び» のカードは265pxのまま。数字の枠は115pxしかなく、
     アイコンを左に置くと «団体を支援予約» が入らない（実測で8px不足）。
     «画面が広いから横並びで大丈夫» は成り立たない。
     4枚並びのあいだは、アイコンを上に置いて文字に横幅を全部使わせる。 */
  /* v7.0(2026-09-11): 数字の枠は «どの幅でも» アイコンを上・数字とラベルを中央に。
     ⚠ 以前は幅ごとに «横並び／縦積み» を切り替えていたが、同じ指定が «本体» と
       «#ranking» の2か所にあるため取り違えが起き、561〜615px の帯で
       «団体を支援予約» が切れていた（本番で実測）。幅で切り替えないので再発しない。
     ⚠ 中央ぞろえだと文字が枠の幅いっぱいを使えるので、いちばん細い320px端末
       （数字の枠95px）でもラベル66pxが収まる。 */
  #ranking .rk-stat{ padding:8px 6px; gap:2px; border-radius:10px }
  #ranking .rk-stat__ico{ width:20px; height:20px }
  #ranking .rk-stat__ico svg{ width:11px; height:11px }
  #ranking .rk-stat__n{ font-size:26px }
  #ranking .rk-stat__l{ font-size:9.5px; line-height:1.4 }
  #ranking .rk-note{ font-size:11.5px; min-height:calc(20px + 34px + 2px) }
  @media (max-width: 900px){
    #ranking .rk-card{ flex:0 0 calc((100% - 12px) / 2); min-width:200px }
  }
  @media (max-width: 560px){
    #ranking .rk-card{ flex:0 0 78%; min-width:0 }
  }