:root {
  --ink: #182234;
  --muted: #667085;
  --navy: #006b4b;
  --navy-dark: #004934;
  --teal: #10a271;
  --amber: #ff8a00;
  /* 2026-07 修正: ボタン淡色化の案トーン（濃緑 #006b4b →やわらかい緑）。
     「見にくい」というご指摘を受け白文字とのコントラストを 4.6:1 → 5.4:1 に引き上げたが、
     原色 #006b4b よりは淡いまま、というのが合意済みの到達点。
     ⚠ この変数は全16ページの .button-primary / .steps 番号 / .filter-btn.is-active が参照する。
       2026-07-27 に一度 #144c39（L*=28.4／原色 #006b4b の L*=39.6 より暗い）へ寄せたが、それは
       ヘッダーCTAとファーストビューの会員カードの緑を揃えるためのトップ限定の要求だったので、
       サイト全体を暗くしないよう .header-contact 側だけにスコープし直した（styles.css の .header-contact）。
       全ページを暗色化する場合は「淡色化」の経緯があるためクライアント再承認が必要 */
  --brand-soft: #17795a;
  --teal-text: #0c7c56; /* kicker等の文字用（白背景で5.2:1） */
  --paper: #ffffff;
  --surface: #f7faf9;
  --surface-strong: #eef7f4;
  --line: #dce7e3;
  --shadow: 0 20px 44px rgba(0, 75, 52, 0.08);
  --radius: 8px;
  --max: 1180px;

  /* === 2026-07-26 トップ刷新（モックアップ hp1/hp2 実測値） ===================== */
  /* 金アクセントの基準色。kicker縦バー / h1下の罫線 / 紋章 / 曲線 / パネル細罫を1変数に集約 */
  --gold: #c9a24d;
  --gold-soft: #e0c894;          /* 1px罫線用のやわらかい金 */
  --hero-green: #174939;         /* h1（白地10.25:1） */
  --hero-green-2: #104633;       /* kicker・最新情報見出し（白地10.79:1） */
  --cta-green: #144c39;          /* 左CTAの地色・矢印丸ボタン（白文字9.89:1） */
  --cta-line: #0f3b2a;           /* 右CTAの1px枠 */
  /* 見出し用の明朝スタック。Webフォントは読み込まないので「未読込で崩れる」状態が存在しない。
     システム明朝が1つも無い環境でも総称 serif まで確実に落ちる */
  --font-serif: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho", YuMincho,
                "BIZ UDPMincho", "Noto Serif JP", "Noto Serif CJK JP", "Source Han Serif JP",
                "MS PMincho", serif;
  /* ▼ヒーロー写真はここ1行で差し替え可能（index.html の data-hero でも上書きできる） */
  --hero-image: url("hero-unkai-crop.jpg");
  --hero-focus: 52% 44%;         /* background-position（写真の見せたい部分） */
  --veil-l: .97;                 /* 白ヴェール: コピー側（左） */
  --veil-m: .84;                 /* 白ヴェール: 中央 */
  --veil-r: .17;                 /* 白ヴェール: 写真を見せる側（右） */
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 0 160px, rgba(0,107,75,.06), transparent 170px),
    linear-gradient(180deg, #fff 0, #fff 58%, #f8faf9 100%);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", "YuGothic", "Noto Sans JP", Meiryo, sans-serif;
  /* px 直書きだとブラウザの既定文字サイズを上げたとき rem 指定の要素だけが伸び、継承のままの
     要素（.button の中身・.header-contact・.grant-alert strong 等）が16pxに取り残される。
     既定16px環境では 1rem = 16px なので見た目は1pxも変わらない */
  font-size: 1rem;
  line-height: 1.75;
  letter-spacing: 0;
}
a { color: inherit; text-decoration: none; }
svg { width: 1.1em; height: 1.1em; flex: 0 0 auto; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 18px; font-size: 3.25rem; line-height: 1.3; }
h2 { margin-bottom: 12px; font-size: 1.55rem; line-height: 1.35; }
h3 { margin-bottom: 8px; font-size: 1.18rem; line-height: 1.45; }
/* 2026-07-26: 見出し(h1/h2)を明朝に統一。モックアップの .section-intro は14ページ共有部品なので
   トップだけ明朝にすると同じ部品が2書体になる → サイト全体で明朝に揃える。
   h3・本文・ボタン・ナビ・チップはゴシックのまま（小サイズの明朝は可読性が落ちるため） */
h1, h2 { font-family: var(--font-serif); font-weight: 600; letter-spacing: .02em; }
/* モックアップでゴシックのまま描かれている見出しは元に戻す
   （.contact-panel は16ページのどのHTMLにも存在しない死にセレクタだったので除去。
     contact.html の h2 は他ページと同じく明朝で描画される＝サイト全体で統一） */
.latest-head h2 { font-family: inherit; font-weight: 800; letter-spacing: 0; }
.wrap { width: min(var(--max), calc(100% - 56px)); margin-inline: auto; }
.skip-link { position: absolute; left: 16px; top: -80px; z-index: 100; padding: 10px 14px; color: #fff; background: var(--navy); border-radius: 6px; }
.skip-link:focus { top: 12px; }

.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.98); border-bottom: 1px solid var(--line); backdrop-filter: blur(14px); }
.utility { color: #eaf1f7; background: var(--navy-dark); font-size: .84rem; }
.utility-inner { min-height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.header-inner { min-height: 76px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 12px; min-width: 270px; }
.brand-logo { display: block; height: 48px; width: auto; }
.brand-mark { display: grid; place-items: center; width: 48px; height: 48px; border: 3px solid var(--navy); border-radius: 50%; color: var(--navy); background: #fff; font-weight: 900; font-size: 1.28rem; box-shadow: inset 0 0 0 1px rgba(0,107,75,.12); }
.brand-copy { display: grid; line-height: 1.35; }
.brand-copy strong { font-size: 1.28rem; white-space: nowrap; }
.brand-copy small { color: var(--muted); font-size: .76rem; }
.menu-toggle { display: none; align-items: center; gap: 8px; min-height: 46px; padding: 0 12px; border: 1px solid var(--line); border-radius: 6px; color: var(--navy); background: #fff; font: inherit; font-weight: 800; }
/* gap 12px は実測で決めた値。14px だとハンバーガー境界の直上 1221px でナビが自分のグリッド列を
   7px はみ出す（ロゴとの間隔が13pxまで詰まる）。境界を1300pxに上げると1221〜1300pxのユーザーが
   ハンバーガーに落ちるので、gapを2px詰めて境界1220pxのまま収める */
.global-nav { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
/* CJK は字送りがウェイトに依存しないので weight 800→600 は必要幅を1pxも増やさず、太さのズレだけ直せる。
   サイズはモック値(1rem)まで上げると必要幅が約1328pxになりハンバーガー境界1220pxを突破するので
   .92rem＋gap圧縮で95%まで寄せる折衷 */
.global-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; border-radius: 6px; color: #1f2937; font-weight: 600; font-size: .92rem; white-space: nowrap; }
.global-nav a:hover, .global-nav a.is-current { color: var(--navy); background: transparent; }
/* ヘッダーCTAだけ --cta-green(#144c39)。hp1 ではヘッダーCTA(#154f3b)と2大導線の会員カード(#144c39)が
   dE=1.44＝同じ緑で、実装で別々(dE=20.6)になっていたのを揃えるための指定。
   ⚠ ここを var(--brand-soft) に戻すと全16ページのボタンが連動してしまうので、この2面だけに閉じている。
   白文字コントラスト 9.89:1 */
.header-contact { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 18px; border-radius: 6px; color: #fff; background: var(--cta-green); font-weight: 900; white-space: nowrap; box-shadow: 0 10px 22px rgba(20,76,57,.18); }

.breadcrumbs { display: flex; gap: 8px; align-items: center; margin-top: 22px; color: var(--muted); font-size: .88rem; }
.breadcrumbs a { color: var(--navy); text-decoration: underline; text-underline-offset: 4px; }
.breadcrumbs strong { color: var(--ink); }
.kicker { margin-bottom: 10px; color: var(--teal-text); font-size: .82rem; font-weight: 900; letter-spacing: .03em; }

/* === ヒーロー（トップ限定） ================================================ */
/* 旧・緑の円リング2本(::before/::after)は削除。写真の上では線だけが浮いてノイズになり、
   モックアップにも存在しないため。背景は「横ヴェール＋縦ヴェール＋写真」の3層を
   background-image 1本で重ねる（疑似要素・z-index を消費しない） */
.home-stage {
  position: relative;
  padding: 64px 0 44px;
  overflow: hidden;
  background-color: #fff; /* 写真が404/未読込でも文字が読めるフェイルセーフ */
  background-image:
    /* 下端フェード。⚠ px指定であることが重要: 要素高が小数(1440pxで815.7px)のとき Chrome は背景の
       最終1行をグラデーションの数%手前で描くため、%指定の急なランプだと最終行だけ ΔL=43 の
       ハイライン(ヘアライン)が残る。110pxの緩いフェードなら数%ずれても差が1未満に収まる（実測） */
    linear-gradient(180deg, rgba(255,255,255,0) 0, #fff 100%),
    linear-gradient(90deg,
      rgba(255,255,255,var(--veil-l)) 0,
      rgba(255,255,255,var(--veil-l)) 33%,
      rgba(255,255,255,var(--veil-m)) 55%,
      rgba(255,255,255,var(--veil-r)) 100%),
    linear-gradient(180deg,
      rgba(255,255,255,.50) 0,
      rgba(255,255,255,.28) 6%,
      rgba(255,255,255,.04) 20%,
      /* 下端は #fff に届くまで滑らかに上げきる。.48 止まりだと写真の下端と白背景の境界に
         ΔL=108 の水平線が出ていた（1440pxで右半分700pxにわたって視認）。
         前半カーブ（0/6%/20%）は変えないので h1・パネル周りの見え方は不変 */
      rgba(255,255,255,.04) 55%,
      rgba(255,255,255,.30) 84%,
      rgba(255,255,255,.72) 95%,
      rgba(255,255,255,.92) 100%),
    var(--hero-image);
  background-size: 100% 110px, cover, cover, cover;
  background-position: bottom, center, center, var(--hero-focus);
  background-repeat: no-repeat;
  /* background-attachment:fixed は iOS Safari で崩れる既知不具合があるため使わない */
}
/* ▼写真の切替はここ。index.html の <section class="home-stage" data-hero="○○"> を
   unkai / snow / bridge / sakura のいずれかに書き換えるだけ（CSS無変更＝キャッシュバスト不要）
   ⚠ 画質注意: unkai / snow / bridge は 2400×1000px だが、sakura のみ元素材が低解像度で
     1024×427px しかない。PC幅（1280px以上）では約2倍に引き伸ばされて輪郭が甘くなるため、
     sakura を採用する場合は高解像度の桜写真を別途ご用意ください。 */
/* unkai は元画像の右上（x1875以降）に構図と無関係な木の枝・葉が写り込んでおり、白ヴェール越しに
   硬い黒い染みとして出る。左1870pxで切り出した hero-unkai-crop.jpg を使う。
   1870px は描画幅2007pxに対し0.93倍なので実用上ぼけない。
   ⚠ 切り出し前の assets/hero-unkai.jpg (279KB) は HTML/CSS のどこからも参照していない意図的な残置。
     トリミングをやり直すときの元素材なので消していない。配信サイズを詰める段階で外す */
.home-stage[data-hero="unkai"]  { --hero-image: url("hero-unkai-crop.jpg"); --hero-focus: 52% 44%; --veil-m: .84; --veil-r: .17; }
.home-stage[data-hero="snow"]   { --hero-image: url("hero-snow.jpg");   --hero-focus: 62% 56%; --veil-m: .82; --veil-r: .18; }
.home-stage[data-hero="bridge"] { --hero-image: url("hero-bridge.jpg"); --hero-focus: 64% 54%; --veil-m: .88; --veil-r: .30; }
.home-stage[data-hero="sakura"] { --hero-image: url("hero-sakura.jpg"); --hero-focus: 68% 42%; --veil-m: .80; --veil-r: .14; }

/* 左下を流れる金の曲線群（CTAカードの背面を通る＝モックアップどおり） */
.hero-curves { position: absolute; left: 0; bottom: 0; z-index: 0; width: min(74%, 940px); height: auto; color: var(--gold); pointer-events: none; }

.home-hero { position: relative; z-index: 1; min-height: 470px; display: grid; grid-template-columns: minmax(0, 1fr) clamp(400px, 46%, 542px); gap: 36px; align-items: start; padding: 0 0 40px; }
/* PC表示: ファーストビューでヒーローが1画面を使い切り、次セクションのボタンが下端に覗かないようにする
   170px = ヒーロー開始位置141px + ボタンとの間隔34px - 余裕5px（実測値） */
@media (min-width: 1041px) {
  .home-hero { min-height: calc(100vh - 170px); align-content: center; }
}
.hero-copy { padding-top: 26px; }
.page-hero p:not(.kicker) { max-width: 720px; color: var(--muted); font-size: 1.08rem; }
.hero-copy > p:not(.kicker) { max-width: 610px; color: #1a1a1a; font-size: 1.15rem; line-height: 1.8; }
/* clamp の傾きは 5.3vw。4.6vw では上限 4.25rem に乗るのが 1478px 以上で、最も一般的な 1280px では
   モックアップ意図の 87% にとどまっていた。5.3vw なら 1283px で上限に到達する */
.hero-copy h1 { max-width: 640px; margin-bottom: 30px; font-size: clamp(2.35rem, 5.3vw, 4.25rem); line-height: 1.24; letter-spacing: .04em; font-weight: 600; color: var(--hero-green); }
/* kicker 左の金の縦バー。共通 .kicker(48箇所/16ページ)は触らず、ヒーロー限定で上書きする */
/* weight は 600。800 だとインク密度がモックアップ(0.373)の1.5倍になり別書体に見えていた。
   金の縦バーもモック実測（正規化 5.1 x 33px）に合わせて 5px x 1.6em にする */
.hero-copy .kicker { position: relative; margin-bottom: 30px; padding-left: 18px; color: var(--hero-green-2); font-size: 1.3rem; font-weight: 600; letter-spacing: .06em; line-height: 1.5; }
.hero-copy .kicker::before { content: ""; position: absolute; left: 0; top: .16em; width: 5px; height: 1.6em; background: var(--gold); }
/* h1 下の金の細罫＋中央の紋章（紋章は index.html のインラインSVG。外部画像を使わない） */
.hero-rule { display: flex; align-items: center; gap: 14px; width: min(424px, 100%); margin: 0 0 32px; }
.hero-rule::before, .hero-rule::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--gold); opacity: .8; }
.hero-rule svg { width: 27px; height: 27px; flex: 0 0 auto; color: #c59a45; }
.action-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 18px; border: 1px solid transparent; border-radius: 8px; font-weight: 900; }
.button-primary { color: #fff; background: var(--brand-soft); }
.button-secondary { color: var(--navy); border-color: #b8c6d3; background: #fff; }
.button-text { padding: 0 6px; color: var(--navy); border-color: transparent; background: transparent; text-decoration: underline; text-underline-offset: 4px; }
/* 2026-07-26: ヒーローの写真の上に置くパネルは半透明(.92)だと文字が読みにくいので
   不透明白・枠なし・角丸16px。（旧 .contact-panel 系のルールはHTML側に該当要素が無い
   死にコードだったため削除） */
.latest-panel { padding: 26px 30px 20px; border: 0; border-radius: 16px; background: #fff; box-shadow: 0 24px 54px rgba(0,58,40,.16); }
.latest-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 0; padding-bottom: 14px; border-bottom: 1px solid var(--gold-soft); }
.latest-head h2 { display: flex; align-items: center; gap: 10px; margin-bottom: 0; font-size: 1.38rem; color: var(--hero-green-2); }
.latest-head h2 svg { width: 22px; height: 22px; color: var(--hero-green-2); }
.latest-head a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 2px; color: #2b4b3f; font-size: .86rem; font-weight: 800; text-decoration: none; }
.latest-list { display: grid; }
/* 2026-07-26 再設計: 日付 / カテゴリ / タイトル / シェブロン の横4カラム（モックアップ準拠）。
   .latest-meta は display:contents でほどいて、time と chip を直接グリッド子にする。
   日付・カテゴリ列は px 固定をやめて rem 基準にする。中身が rem 指定なので、82px/106px 固定だと
   ブラウザの既定文字サイズを「大」にしたとき日付がチップの下に潜り込んで末尾が読めなくなっていた。
   行ごとに別グリッドなので max-content 単独だとチップ幅が行ごとにバラつく → minmax の下限で
   通常時は全行そろえ、想定より長いカテゴリ名が入った時だけその行が広がる（文字あふれを防ぐ）。
   4列目はシェブロンの実描画幅(1.1em=17.6px)に合わせて18px（12px指定だと行を6px超過していた） */
.latest-list a { display: grid; grid-template-columns: minmax(5.0rem, max-content) minmax(6.25rem, max-content) minmax(0,1fr) 18px; grid-template-rows: auto; gap: 0 10px; align-items: center; padding: 16px 0; border-top: 1px solid #eaeaea; }
.latest-list a:first-child { border-top: 0; }
.latest-meta { display: contents; }
.latest-list a > svg:last-child, .latest-list a > i[data-lucide] { grid-column: 4; grid-row: 1; color: #9aa8a2; }
.latest-list strong { grid-column: 3; font-size: .95rem; line-height: 1.55; font-weight: 700; color: #333; }
.latest-list time { color: #303030; font-size: .86rem; font-weight: 700; }
.news-chip { display: inline-flex; align-items: center; justify-content: center; min-height: 28px; padding: 0 10px; border-radius: 999px; color: #fff; background: var(--navy); font-size: .82rem; font-weight: 900; white-space: nowrap; letter-spacing: .02em; }
/* ヒーローのパネル内だけモックアップの角丸矩形チップ（緑＝お知らせ系 / 金＝セミナー系）に。
   一覧・詳細ページのカテゴリ色は現状維持（他15ページに波及させない） */
.latest-panel .news-chip { justify-self: stretch; min-height: 24px; padding: 0 4px; border-radius: 4px; font-weight: 700; letter-spacing: .01em; }
.latest-panel .chip-grant,
.latest-panel .chip-newsletter,
.latest-panel .chip-notice,
.latest-panel .chip-survey { color: #fff; background: #16533e; }
/* 金地は白文字だと2.2:1でAA不合格 → モックアップの金は活かしつつ文字を濃緑に（5.05:1） */
.latest-panel .chip-seminar { color: #143d2c; background: var(--gold); }
/* カテゴリ別チップ（nth-child依存をやめ、項目追加でも色が固定されるclass方式） */
.chip-grant { background: var(--navy); }
.chip-seminar { background: #0f766e; }
.chip-newsletter { background: #884bb7; }
.chip-notice { background: #b45309; }
.chip-survey { background: #2c72cb; }
/* 一覧・詳細ページ(.news-date/.badge)でも同じカテゴリ色に統一（全て白文字コントラストAA） */
.news-date span.chip-grant, .badge.chip-grant { color: #fff; background: var(--navy); }
.news-date span.chip-seminar, .badge.chip-seminar { color: #fff; background: #0f766e; }
.news-date span.chip-newsletter, .badge.chip-newsletter { color: #fff; background: #884bb7; }
.news-date span.chip-notice, .badge.chip-notice { color: #fff; background: #b45309; }
.news-date span.chip-survey, .badge.chip-survey { color: #fff; background: #2c72cb; }
/* 「メディア掲載」の基本色。トップの帯だけ hp2 指定のセージ/金で上書きする（後方の .media-band ルール） */
.news-chip.chip-media, .news-date span.chip-media, .badge.chip-media { color: #fff; background: #c2410c; }
/* 「白抜き極太900は小サイズで潰れる」ための 700+字間 の指定は、同一詳細度(0,1,1)で後方にある
   `.news-date span, .badge { font-weight:900 }` に順序負けして効いていなかった。
   → そのルールより後ろ（.news-date span, .badge の直後）へ移設済み。ここには置かない */
.mini-office { display: flex; justify-content: space-between; gap: 18px; padding: 14px 0; border-top: 1px solid var(--line); }
.mini-office span { color: var(--navy); font-weight: 900; }
.panel-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; color: var(--navy); font-weight: 900; }

/* 2026-07-26: 2大導線。モックアップ実測 670:686＝実質1:1、高さ162px、角丸14px。
   左はグラデーションではなくフラットな濃緑。アイコンの丸枠は廃し、代わりに縦の区切り線を入れる */
.home-primary-links { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 25px; margin-top: 34px; }
.home-route { min-height: 162px; display: grid; grid-template-columns: 48px 1px minmax(0,1fr) 50px; gap: 0 30px; align-items: center; padding: 0 33px 0 37px; border: 1px solid var(--cta-line); border-radius: 14px; background: #fff; box-shadow: 0 14px 34px rgba(0,0,0,.10); }
.home-route.route-member { color: #fff; border-color: var(--cta-green); background: var(--cta-green); }
.home-route.route-member small { color: #e6efe9; }
/* アイコンはカード内の罫線・矢印と同じ濃緑に揃える（モックアップ hp1 準拠）。
   color を直接宣言すると継承より強いので、濃緑地の左カードには白を明示し直す */
.route-icon { display: grid; place-items: center; width: 48px; height: 48px; color: var(--cta-green); }
.route-member .route-icon { color: #fff; }
.route-icon svg { width: 46px; height: 46px; stroke-width: 1.5; }
.route-divider { width: 1px; height: 67px; background: rgba(20,76,57,.4); }
.route-member .route-divider { background: rgba(255,255,255,.55); }
.route-go { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; color: #fff; background: var(--cta-green); }
.route-go svg { width: 22px; height: 22px; stroke-width: 2.4; }
.route-member .route-go { color: var(--cta-green); background: #fff; }
/* 上限 1.98rem はモック実測（正規化33.1）。ただし 1041〜1215px では「加入をお考えの方へ」(9文字)が
   2行に折れる幅があるため clamp で逃がす（実測: 1161px の使用可能幅281px に対し1.98remは296px必要）。
   1267px 以上で上限に到達し、最も一般的な 1280/1440px ではモック実測どおりの大きさになる */
.home-route strong { display: block; margin-bottom: 8px; font-family: var(--font-serif); font-size: clamp(1.8rem, 2.5vw, 1.98rem); font-weight: 600; letter-spacing: .04em; line-height: 1.3; color: #202020; }
.home-route.route-member strong { color: #fff; }
.home-route small { color: #4f5b55; font-size: .96rem; line-height: 1.6; }
/* 1041〜1160px は2カラムのままカード幅が最も詰まる帯で、右の「加入をお考えの方へ」(9文字)が
   2行に折れて左右カードの内容の高さが揃わなくなる。見出しサイズ(1.8rem=モック実測)は保ったまま、
   左右パディングと列間を詰めて1行分の幅を確保する */
@media (min-width: 1041px) and (max-width: 1160px) {
  .home-route { gap: 0 18px; padding: 0 22px 0 24px; }
  .home-route strong { letter-spacing: .02em; }
}

/* 会員にとって金銭的損失に直結する唯一の警告。hp2 はもっと強い警戒表示を意図している
   （枠 rgb(255,107,51)）。文字色まで hp2 に寄せると同背景で3.42:1のAA不合格になるので、
   枠色（#ea580c は白地4.2:1でUI部品の3:1を満たす）と字の大きさだけモック方向へ寄せる */
.grant-alert { display: grid; grid-template-columns: 56px minmax(0,1fr) auto; gap: 18px; align-items: center; min-height: 76px; margin-top: 12px; padding: 14px 18px; border: 2px solid #ea580c; border-radius: var(--radius); background: #fff9ef; }
.grant-alert > span { display: grid; place-items: center; color: var(--amber); }
.grant-alert > span svg { width: 42px; height: 42px; }
.grant-alert strong { color: #a04e00; font-size: 1.15rem; }
.grant-alert p { margin-bottom: 0; color: #77614b; font-size: .9rem; }
/* index.html は class="wrap content-section compact-section"。詳細度が同じだと後方の
   .content-section{padding:64px 0} に負けて 56px が PC で死ぬので、.content-section を併記して
   1段上げる（.compact-section は index.html 専用クラスなので他15ページへの波及はゼロ） */
.content-section.compact-section { padding-top: 56px; }
.compact-section .section-intro { margin-inline: auto; margin-bottom: 30px; text-align: center; }
/* 「よく使う情報」= 中央寄せ＋左右の金ダッシュ（hp2実測） */
.compact-section .kicker { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 12px; color: #0b4130; font-size: 1.18rem; font-weight: 800; letter-spacing: .08em; }
.compact-section .kicker::before,
.compact-section .kicker::after { content: ""; width: 34px; height: 1.5px; background: var(--gold); }
.compact-section .section-intro h2 { font-size: 2rem; color: #08302a; letter-spacing: .03em; }
/* 2026-07-26: 6枚をhp2のパステル配色に。枠線・白地・説明文・右上シェブロンを廃し、
   「大きめアイコン＋ラベル」の中央寄せ2要素だけにする（モックアップ準拠）。
   文字 #043629 は6色すべてで 9.99〜11.98:1（AAA 7:1 も合格） */
.quick-grid { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 20px; }
/* padding の左右は 4px。最長ラベル「本所・支所アクセス」の左右余白が 1221px で13.4px しかなく、
   文字サイズが1段上がるだけで2行に折り返す（6枚は同じ高さ固定なので1枚だけ2行になると崩れる）。
   ラベルは中央寄せなので padding を削っても見た目の余白は変わらない */
.quick-card { position: relative; min-height: 156px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 20px 4px; border: 0; border-radius: 12px; background: var(--qc-bg, #fff); box-shadow: 0 2px 8px rgba(0,0,0,.08); text-align: center; }
.quick-card > span { display: grid; place-items: center; color: #06402e; }
/* lucide は 24 の viewBox のうち約20しか描画しないため、76px指定でも実インクは約62px。
   これで hp2 のアイコン実寸（カード高さ比）にほぼ一致する */
.quick-card > span svg { width: 84px; height: 84px; stroke-width: 1.4; }
.quick-card strong { font-size: 1.05rem; font-weight: 800; line-height: 1.35; letter-spacing: 0; color: #043629; }
/* nth-child依存をやめ、項目追加でも色が固定されるclass方式（既存チップと同じ方針） */
.qc-grant   { --qc-bg: #daefe9; }
.qc-seminar { --qc-bg: #e7f3e0; }
.qc-doc     { --qc-bg: #fce7d5; }
.qc-news    { --qc-bg: #d6e5fa; }
.qc-survey  { --qc-bg: #fef2c7; }
.qc-office  { --qc-bg: #e7d9f4; }

.audience-section, .service-dashboard-section, .soft-band { background: var(--surface); border-block: 1px solid var(--line); }
.audience-section, .service-dashboard-section { padding: 54px 0; }
.content-section { padding: 64px 0; }
.section-intro { max-width: 760px; margin-bottom: 26px; }
.section-intro p:not(.kicker) { color: var(--muted); }
.section-line { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
.section-line .section-intro { margin-bottom: 0; }
.audience-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.audience-card { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 24px; min-height: 286px; padding: 30px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: 0 12px 30px rgba(16, 44, 69, .05); }
.audience-card.member { border-top: 5px solid var(--navy); }
.audience-card.prospective { border-top: 5px solid var(--teal); }
.audience-card h2 { font-size: 1.65rem; }
.audience-card p { color: var(--muted); }
.audience-card ul { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; align-self: start; }
.audience-card li { padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; color: #344154; background: #fbfcfd; font-weight: 800; font-size: .9rem; }
.card-cta { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 8px; color: var(--navy); font-weight: 900; }

.service-dashboard { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.dashboard-card { min-height: 172px; display: flex; flex-direction: column; gap: 10px; padding: 22px; border: 1px solid var(--line); border-top: 4px solid var(--navy); border-radius: var(--radius); background: #fff; box-shadow: 0 10px 24px rgba(16,44,69,.04); }
.dashboard-card:nth-child(4) { border-top-color: var(--teal); }
.dashboard-card span:first-child { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 8px; color: var(--navy); background: #eaf2f7; }
.dashboard-card strong { font-size: 1.06rem; line-height: 1.4; }
.dashboard-card small { color: var(--muted); font-size: .88rem; line-height: 1.65; }
.dashboard-card:hover { border-color: #9cb2c5; box-shadow: 0 12px 24px rgba(16,44,69,.07); }
.audience-compact { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 26px 0 0; }
.audience-compact a { display: grid; grid-template-columns: minmax(0,1fr) 24px; gap: 8px 14px; align-items: center; min-height: 112px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.audience-compact .kicker { margin-bottom: 0; grid-column: 1 / -1; }
.audience-compact strong { font-size: .98rem; line-height: 1.55; }
.audience-compact svg { color: var(--navy); }

.card-grid { display: grid; gap: 16px; }
.card-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.service-card { display: flex; flex-direction: column; gap: 9px; min-height: 172px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.service-card:hover, .news-row a:hover, .event-row a:hover, .download-row:hover, .archive-grid a:hover { border-color: #9cb2c5; box-shadow: 0 12px 24px rgba(16,44,69,.07); }
.card-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 8px; color: var(--navy); background: #eaf2f7; }
.service-card strong { font-size: 1.03rem; }
.service-card span:last-child { color: var(--muted); font-size: .92rem; }

.news-list { display: grid; gap: 10px; }
.news-row a { display: grid; grid-template-columns: 178px minmax(0, 1fr) 28px; gap: 18px; align-items: center; min-height: 106px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.news-row a > svg:last-child { color: #8ca49c; }
.news-date { display: grid; gap: 7px; }
time, .article-date { color: var(--muted); font-weight: 900; }
/* flex:0 0 auto と nowrap が無いと、360px幅で日付と横並びになったとき「新聞」「テレビ」が
   潰れて1文字ずつ縦積みの丸バッジになる。幅が確定しているチップ側ではなく日付/タイトル側を縮める */
.news-date span, .badge { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: fit-content; min-height: 28px; padding: 0 10px; border-radius: 999px; color: var(--navy); background: #eaf2f7; font-size: .82rem; font-weight: 900; white-space: nowrap; }
/* 白抜き文字の可読性: 極太900だと小サイズで潰れる（4倍拡大で「新聞」の門構えが黒い塊になる）ため、
   チップ類は700+字間+わずかに拡大。⚠ 直前の .news-date span,.badge と同一詳細度なので、
   必ずこの位置（後ろ）に置く。前に置くと順序負けして効かない */
.news-chip, span[class*="chip-"] { font-weight: 700; letter-spacing: .04em; font-size: .84rem; }
.badge.muted { color: #8a5b1d; background: #fff1dc; }
.news-row h3, .news-row p, .event-row h3 { margin-bottom: 0; }
.news-row p { color: var(--muted); font-size: .92rem; }

.page-hero { padding: 54px 0 46px; border-bottom: 1px solid var(--line); }
.page-hero h1 { font-size: 2.72rem; }
.two-column { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); gap: 34px; align-items: start; }
.note-card { padding: 24px; border: 1px solid #dec692; border-top: 5px solid var(--amber); border-radius: var(--radius); background: #fff7e8; }
.note-card strong { display: block; margin-bottom: 8px; color: #865716; font-size: 1.05rem; }
.note-card p { margin-bottom: 0; color: #69513a; }

.steps { margin: 0; padding: 0; display: grid; gap: 12px; list-style: none; }
.steps li { display: grid; grid-template-columns: 58px minmax(0,1fr); gap: 16px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.steps li > span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 8px; color: #fff; background: var(--brand-soft); font-weight: 900; }
.steps p { margin-bottom: 0; color: var(--muted); }

.program-grid, .office-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.program-card, .office-card { min-height: 268px; display: flex; flex-direction: column; gap: 14px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.program-card dl, .office-card dl { display: grid; gap: 8px; margin: 0; }
.program-card dl div, .office-card dl div { display: grid; grid-template-columns: 64px minmax(0,1fr); gap: 10px; }
dt { color: var(--muted); font-weight: 900; }
dd { margin: 0; }
.office-card h3 { font-size: 1.38rem; }
.program-card h2 { margin-bottom: 4px; font-size: 1.3rem; line-height: 1.45; }

.event-list, .download-list { display: grid; gap: 12px; }
.event-row a { display: grid; grid-template-columns: 138px minmax(0,1fr) 96px; gap: 18px; align-items: center; min-height: 112px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.event-row p { margin-bottom: 0; color: var(--muted); }
.chip-recept { display: inline-block; margin-bottom: 6px; padding: 2px 12px; border-radius: 999px; color: #fff; font-size: .78rem; font-weight: 700; letter-spacing: .04em; }
.chip-recept-open { background: var(--brand-soft); }
.chip-recept-closed { background: #6b7280; }
.download-row { display: grid; grid-template-columns: minmax(0,1fr) 128px; gap: 18px; align-items: center; min-height: 118px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.download-row p { margin-bottom: 0; color: var(--muted); }
.download-row a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 12px; border: 1px solid var(--line); border-radius: 6px; color: var(--navy); font-weight: 900; }
.feature-download { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 26px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.feature-download p { color: var(--muted); }
.feature-download h3 { margin-bottom: 6px; font-size: 1.3rem; }
.archive-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
.archive-grid a { display: flex; align-items: center; gap: 10px; min-height: 76px; padding: 0 18px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; font-weight: 900; }

.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.filter-btn { min-height: 48px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; color: #465366; background: #fff; font: inherit; font-weight: 900; cursor: pointer; }
.filter-btn.is-active { color: #fff; border-color: var(--brand-soft); background: var(--brand-soft); }
.article-layout { display: grid; grid-template-columns: minmax(0,1fr) 290px; gap: 34px; padding: 48px 0 72px; }
.article-main h2 { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.article-side { display: grid; align-content: start; gap: 14px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); align-self: start; }
.article-side a { display: inline-flex; align-items: center; gap: 8px; color: var(--navy); font-weight: 900; }

.survey-table { display: grid; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; }
.survey-table [role="row"] { display: grid; grid-template-columns: 1fr 1fr 120px 130px; gap: 12px; align-items: center; min-height: 64px; padding: 0 18px; border-bottom: 1px solid var(--line); }
.survey-table [role="row"]:last-child { border-bottom: 0; }
.survey-head { color: #fff; background: var(--navy); font-weight: 900; }

.site-footer { color: #dde7ef; background: var(--navy-dark); }
.footer-grid { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 30px; padding: 46px 0; }
.footer-brand { display: grid; gap: 14px; justify-items: start; }
/* 正規ロゴはフルカラー（暗色地では不可視）のため白地プレートに載せる */
.footer-logo { display: inline-block; padding: 10px 16px; border-radius: 8px; background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.footer-logo img { display: block; height: 38px; width: auto; }
.footer-brand p, .footer-office p { margin: 6px 0 0; color: #cfe0d8; font-size: .95rem; }
.footer-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.footer-links a { display: flex; align-items: center; min-height: 44px; color: #fff; font-size: .95rem; font-weight: 800; }
[hidden] { display: none !important; }

/* ヘッダー: 横ナビが収まらなくなる手前(1220px)でハンバーガー化。内容グリッドの折返し(1040px)とは分離
   (必要幅 実測≈1142px + wrap余白56px → 1198px以下であふれるため余裕を持って1220px) */
@media (max-width: 1220px) {
  .menu-toggle { display: inline-flex; justify-self: end; }
  /* top/left/right/width は同じ 1220px ブロック（後方の「ハンバーガーメニュー」節）が唯一の担当。
     ここに重ねて書くと後勝ちで必ず死ぬ宣言になるので置かない */
  .global-nav { position: absolute; display: none; flex-direction: column; align-items: stretch; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); z-index: 60; }
  .global-nav.is-open { display: flex; }
  .global-nav a { justify-content: flex-start; min-height: 52px; }
  /* 6カード横並びは1220px以下で3列に(長い日本語タイトルの2行折返し防止) */
  .quick-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1040px) {
  .home-hero, .home-primary-links, .audience-card, .two-column, .article-layout { grid-template-columns: 1fr; }
  .service-dashboard { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .audience-compact { grid-template-columns: 1fr; }
  .card-grid.four, .program-grid, .office-grid, .archive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1fr; }
  /* 1カラム化するとヒーローが縦長になり、横方向ヴェール(左に文字/右に写真)が意味を成さない。
     2026-07-27 再設計「写真バンド方式」: 縦ヴェールで写真を敷く方式は、2.4:1 のパノラマを
     0.32:1 の縦長箱に cover で嵌めるため元画像の 13% しか映らず、しかも文字を読ませるために
     ヴェールを .92〜.95 まで濃くする必要があり「写真が入っていないように見える」状態だった。
     → 写真を文字の下ではなくヘッダー直下の独立バンドに出す。写真は元画像の 9 割が入り、
        文字は純白の上に載るのでコントラストは PC と同じまま落ちない。
     ⚠ 写真の切替は data-hero 1語のまま（--hero-image / --hero-focus を参照するので構造は不変） */
  .home-stage {
    padding: 0 0 40px;
    background-image: none;
    background-color: #fff;
  }
  .home-stage::before {
    content: "";
    display: block;
    height: clamp(176px, 30vw, 312px);
    background-image:
      linear-gradient(180deg,
        rgba(255,255,255,0) 0,
        rgba(255,255,255,0) 60%,
        rgba(255,255,255,.55) 84%,
        #fff 100%),
      var(--hero-image);
    background-size: cover, cover;
    background-position: 50% 50%, var(--hero-focus);
    background-repeat: no-repeat;
  }
  .home-hero { min-height: auto; gap: 28px; padding-top: 30px; }
  .hero-copy { padding-top: 0; }
  .home-primary-links { margin-top: 24px; }
  .hero-curves { display: none; }
}

@media (max-width: 720px) {
  /* ベース文字は16pxのまま維持（高齢読者・スマホ最優先方針。15px縮小は撤廃） */
  .utility { display: none; }
  .wrap { width: min(100% - 32px, var(--max)); }
  .header-inner { min-height: 72px; gap: 12px; }
  .brand { min-width: 0; }
  /* ロゴは幅基準で可変に（高さ40px固定=実効幅230px固定だと360px端末でボタンと重なる） */
  .brand-logo { width: clamp(148px, 50vw, 230px); height: auto; }
  .brand-mark { width: 46px; height: 46px; font-size: 1.32rem; }
  .brand-copy strong { font-size: 1.06rem; }
  .brand-copy small { display: none; }
  .menu-toggle { justify-self: end; width: 46px; padding: 0; gap: 0; }
  .header-contact { width: 46px; padding: 0; gap: 0; }
  /* ラベルは視覚非表示・支援技術には読ませる(sr-only) */
  .menu-toggle span, .header-contact span { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  h1 { font-size: 2.15rem; }
  .page-hero h1 { font-size: 2rem; }
  /* ≤1040px の写真バンド方式（.home-stage::before）が担当するので、ここで背景写真を
     再定義しない。以前あった縦ヴェール指定を残すとヴェールが復活して写真が消える */
  .home-stage { padding: 0 0 30px; }
  .home-hero { min-height: auto; padding: 24px 0 24px; gap: 22px; }
  /* font-size は clamp が担う（ここで固定すると clamp を殺すので指定しない） */
  .hero-copy h1 { margin-bottom: 22px; line-height: 1.3; }
  .hero-copy .kicker { margin-bottom: 18px; font-size: 1.02rem; }
  .hero-copy > p:not(.kicker) { font-size: 1rem; }
  .hero-rule { width: min(300px, 100%); margin-bottom: 24px; }
  /* 最新情報パネル: 4カラムは360px端末に入らないので 1段目=日付+チップ / 2段目=タイトル に戻す */
  .latest-panel { padding: 20px 18px 14px; border-radius: 14px; box-shadow: 0 14px 32px rgba(0,58,40,.14); }
  .latest-head { padding-bottom: 12px; }
  .latest-head h2 { font-size: 1.12rem; }
  /* シェブロン列はPC側と同じく実描画幅(17.6px)に合わせる。14px指定だと行を3.6px超過していた */
  .latest-list a { grid-template-columns: minmax(0,1fr) 18px; grid-template-rows: auto auto; gap: 6px 10px; padding: 13px 0; }
  .latest-panel .latest-meta { display: flex; align-items: center; gap: 10px; min-width: 0; grid-column: 1; grid-row: 1; }
  .latest-panel .news-chip { justify-self: start; min-width: 88px; }
  .latest-list strong { grid-column: 1; grid-row: 2; }
  .latest-list a > svg:last-child, .latest-list a > i[data-lucide] { grid-column: 2; grid-row: 1 / span 2; }
  /* 日付の .86rem 縮小はPCの4カラムを1行に収めるための措置。ここは2段組で日付76px＋チップ88pxの
     あとに150px以上余るため縮める理由がなく、「ベース文字は縮めない」方針にも反するので戻す */
  .latest-list time { font-size: .95rem; }
  .grant-alert { grid-template-columns: 1fr; }
  /* 2大導線は横レイアウト維持（縦積みだとアイコンと矢印が孤立してカードが3倍高になる） */
  .home-primary-links { gap: 14px; margin-top: 22px; }
  .home-route { grid-template-columns: 44px 1px minmax(0,1fr) 40px; gap: 0 10px; padding: 16px 16px 16px 18px; min-height: 112px; border-radius: 12px; }
  /* 360/375px では 1.3rem 固定だと「加入をお考えの方へ」が2行に折れる。
     390px以上は従来どおりの大きさを保ちつつ、狭い端末でだけ自動で縮むよう clamp にする */
  .home-route strong { margin-bottom: 4px; font-size: clamp(1.05rem, 5vw, 1.3rem); letter-spacing: .02em; }
  .home-route small { font-size: .88rem; }
  .route-icon { width: 44px; height: 44px; }
  .route-icon svg { width: 38px; height: 38px; }
  .route-divider { height: 54px; }
  .route-go { width: 40px; height: 40px; }
  .route-go svg { width: 18px; height: 18px; }
  .action-row { display: grid; grid-template-columns: 1fr; }
  .button { width: 100%; }
  .audience-section, .service-dashboard-section, .content-section { padding: 44px 0; }
  .section-line { display: grid; align-items: start; }
  .audience-card { padding: 22px; min-height: auto; }
  .service-dashboard, .card-grid.four, .card-grid.three, .program-grid, .office-grid, .archive-grid { grid-template-columns: 1fr; }
  /* クイックカードはパステルのタイル感を活かして2列（縦積み6枚だと900px超になる） */
  .quick-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
  .quick-card { min-height: 116px; gap: 10px; padding: 16px 4px; }
  .quick-card > span svg { width: 49px; height: 49px; }
  .quick-card strong { font-size: .92rem; }
  .content-section.compact-section { padding-top: 40px; }
  .compact-section .kicker { gap: 12px; font-size: 1rem; }
  .compact-section .section-intro h2 { font-size: 1.5rem; }
  /* .media-band .media-head h2 の縮小はファイル後方の同名ルール(2rem)に負けるため、
     そちらより後ろの @media ブロック（末尾）へ移設した */
  .event-row a, .download-row { grid-template-columns: 1fr; gap: 10px; }
  /* 一覧行: シェブロンを残してタップ可能と分かるように（date横並び+2段組） */
  .news-row a { grid-template-columns: minmax(0,1fr) 20px; gap: 6px 10px; min-height: auto; padding: 16px; }
  .news-row a > .news-date { display: flex; align-items: center; gap: 10px; }
  .news-row a > svg:last-child { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .feature-download { flex-direction: column; align-items: stretch; }
  /* 業況調査表: 内容は短いので横スクロールを廃し4列を収める */
  .survey-table [role="row"] { grid-template-columns: 1.1fr 1.1fr .55fr auto; gap: 8px; min-height: 56px; padding: 0 12px; }
  .footer-links { grid-template-columns: 1fr; }
}

/* === 2026-07 修正で追加したコンポーネント === */
/* フッター: 本所＋支所の複数表記 */
.footer-office strong { display: block; margin-top: 14px; color: #eef5f1; }
.footer-office strong:first-child { margin-top: 0; }
.footer-office p { margin: 4px 0 0; }

/* prospective「相談できること」= 非クリックのイラスト付き掲示 */
.consult-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.consult-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 26px 22px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: 0 8px 20px rgba(0,75,52,.04); }
.consult-illust { display: grid; place-items: center; width: 88px; height: 88px; border-radius: 50%; color: var(--navy); background: var(--surface-strong); }
.consult-illust svg { width: 46px; height: 46px; }
.consult-card h3 { margin: 0; font-size: 1.1rem; }
.consult-card p { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.7; text-align: left; }
.consult-note { margin-top: 16px; color: var(--muted); font-size: .84rem; }
.next-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* メディア掲載（会員事業所が紹介されました） */
/* 2026-07-26: hp2 準拠でフラットな中性グレー地・区切り線なしに。kicker は濃緑の角丸バッジ */
.media-band { background: #f8f9f8; border-block: 0; }
.media-band .media-head .kicker { display: inline-flex; align-items: center; min-height: 34px; margin-bottom: 12px; padding: 0 16px; border-radius: 8px; color: #fff; background: var(--cta-line); font-size: .98rem; font-weight: 800; letter-spacing: .06em; }
/* hp2 ではこの h2 を「手続きや確認に必要な情報」(=.compact-section h2, 2rem)の約1.38倍で描いている。
   両方 2rem にすると見出しの階層が潰れるので上限 2.55rem まで上げる（1041〜1220px で
   大きくなりすぎないよう clamp）。≤720px の 1.5rem は後方のルールが引き続き担当する */
.media-band .media-head h2 { font-size: clamp(1.9rem, 3.4vw, 2.55rem); letter-spacing: .03em; color: #08302a; }
/* 「一覧を見る」は hp2 実測（正規化211x62）に寄せる。共通 .button を触ると全16ページのボタンが
   太るので、この帯の中だけにスコープを切る */
.media-head .button-secondary { min-height: 58px; padding: 0 28px; }
.media-band > .wrap { padding: 42px 0; }
/* hp2 では「一覧を見る」が h2 とほぼ同じ高さに来る（end だと説明文の下端に落ちて43px下がる） */
.media-head { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 18px; flex-wrap: wrap; }
.media-head .section-intro { margin-bottom: 0; }
/* hp2 は「新聞掲載=セージ / テレビ放送=金」の2色指定。白文字だと2.62:1でAA不合格になるため
   文字を濃緑にする（セージ地 5.01:1 / 金地 5.05:1 でAA合格）。
   金地に濃緑文字はトップの .latest-panel .chip-seminar で既に使っている流儀。
   ⚠ hp2 が2色を指定しているのはトップのこの帯だけ。セレクタを .media-band 配下に閉じないと
     news.html / media.html / media-detail.html のカテゴリチップまでセージ化し、
     高彩度のまま並ぶ他5色（補助金・セミナー・商工会だより・お知らせ・動向調査）の中で
     「メディア掲載」だけ無効バッジのように見える。一覧・詳細のチップ色は従来どおり #c2410c */
.media-band .news-date span.chip-media { color: #0f3b2a; background: #8faa9f; }
.media-band .news-date span.chip-media-tv { color: #143d2c; background: var(--gold); }
.sample-note { color: var(--muted); font-size: .8rem; font-weight: 800; }

/* hp2 の一覧行は「サムネイル｜(日付＋カテゴリ) / タイトル / 説明」。
   日付とカテゴリは縦2段ではなく同一行に並ぶ。トップの帯だけに適用し、media.html には波及させない。
   ≤720px は末尾の共通ルール(.news-row.has-thumb)が担当するので min-width:721px で囲う */
@media (min-width: 721px) {
  .media-band .news-row.has-thumb a { grid-template-columns: 200px minmax(0,1fr) 28px; grid-template-rows: auto auto; gap: 6px 18px; }
  .media-band .news-row.has-thumb a > .media-thumb { grid-column: 1; grid-row: 1 / span 2; }
  .media-band .news-row.has-thumb a > .news-date { grid-column: 2; grid-row: 1; display: flex; align-items: center; gap: 10px; }
  .media-band .news-row.has-thumb a > div:not(.news-date) { grid-column: 2; grid-row: 2; }
  .media-band .news-row.has-thumb a > svg:last-child,
  .media-band .news-row.has-thumb a > i[data-lucide] { grid-column: 3; grid-row: 1 / span 2; }
}

@media (max-width: 720px) {
  .consult-grid { grid-template-columns: 1fr; }
  .media-band > .wrap { padding: 32px 0; }
  .next-actions .button { width: 100%; }
  /* 上方の @media(max-width:720px) 内に書くと、後方の .media-band .media-head h2 { 2rem } に
     同一詳細度で上書きされて効かない。必ずそのルールより後ろのこのブロックに置くこと */
  .media-band .media-head h2 { font-size: 1.5rem; }
  /* 明朝化に伴う letter-spacing .02em が、狭い端末で下層ページの見出しを1行増やしていた
     （media-detail の h1 は390pxで3行になり3行目が「た」1文字だけになる）。
     モックアップは字間指定のある h2 側(.compact-section/.media-band)が個別に持っているので影響しない */
  h1, h2 { letter-spacing: 0; }
}

/* === 2026-07-15 追加修正 === */
/* grants: seminarsとレイアウト統一した一覧行の左ラベル(日付枠に相当) */
.event-when { font-weight: 800; color: var(--navy); }
/* 申請前の流れ(4カード化)の下に置く注意書きの間隔 */
.card-grid + .note-card { margin-top: 18px; }

/* メディア掲載: サムネイル画像付きの一覧行 */
.news-row.has-thumb a { grid-template-columns: 200px 178px minmax(0,1fr) 28px; }
.media-thumb { width: 100%; height: 125px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); background: #e8f1ed; }

@media (max-width: 720px) {
  .news-row.has-thumb a { grid-template-columns: 108px minmax(0,1fr) 20px; }
  .news-row.has-thumb a > .media-thumb { grid-column: 1; grid-row: 1 / span 2; height: 68px; }
  .news-row.has-thumb a > .news-date { grid-column: 2; grid-row: 1; }
  .news-row.has-thumb a > div:not(.news-date) { grid-column: 2; grid-row: 2; }
  .news-row.has-thumb a > svg:last-child { grid-column: 3; grid-row: 1 / span 2; }
}

/* 560px以下だけサムネイルを上に回す。390pxでは本文カラムが176pxしかなく20文字の見出しが3行に割れて
   最終行が2文字だけ残っていた（360pxでは146px）。サムネイルを上段に送ると本文が約306pxになり
   見出し2行に収まる。561〜720pxは21.5字/行で許容範囲なので上の108px横並びのまま残す。
   ⚠ .news-row.has-thumb は media.html でも使うので、両ページを390pxで確認すること */
@media (max-width: 560px) {
  .news-row.has-thumb a { grid-template-columns: minmax(0,1fr) 20px; }
  /* 全幅150pxは2.17:1。素材(8:5)を object-fit:cover で嵌めるので上下が切れる。
     中央基準だと下端の説明キャプションが半分だけ残って壊れて見えるため、やや上寄せにする */
  .news-row.has-thumb a > .media-thumb { grid-column: 1 / span 2; grid-row: 1; width: 100%; height: 150px; object-position: 50% 30%; }
  .news-row.has-thumb a > .news-date { grid-column: 1; grid-row: 2; }
  .news-row.has-thumb a > div:not(.news-date) { grid-column: 1; grid-row: 3; }
  .news-row.has-thumb a > svg:last-child { grid-column: 2; grid-row: 2 / span 2; }
}

/* === 2026-07-27 追加（統合改修） ============================================ */

/* 語中改行の抑制。Chrome 150 で確認済み。未対応ブラウザ（Safari 等）では単に無視されるだけで
   レイアウトは崩れない。露出の最も大きいヒーローのリードだけ index.html 側の
   <br class="pc-only"> と二段構えにしている */
.hero-copy p,
.latest-list strong,
.news-row h3,
.news-row p,
.home-route small,
.section-intro p { word-break: auto-phrase; }
/* ヒーローのリードの明示改行（hp1 の折り位置＝「夜久野から」の後ろ）は 1221px 以上でだけ有効にする。
   改行位置を hp1 に合わせたことで1行目は21文字＝約391px になり、以前の32文字＝588.8px のような
   ぎりぎりの帯（1221〜1235px で余裕4.3px）は無くなった。
   1220px 以下は横幅が単カラムに寄るので明示改行を外し auto-phrase に任せる */
@media (max-width: 1220px) { .pc-only { display: none; } }

/* 1041〜1220px は最新情報の見出し欄が11.9〜13.4字/行まで潰れ、5件中2〜3件が熟語の途中で改行する
   （1100pxで「経営計画作成セミナー開/催のお知らせ」）。720px以下と同じ2段組にして27.2字/行にする。
   1220px はハンバーガー境界の直下＝ノートPCで最も踏みやすい帯 */
@media (min-width: 1041px) and (max-width: 1220px) {
  .latest-list a { grid-template-columns: minmax(0,1fr) 18px; grid-template-rows: auto auto; gap: 6px 10px; }
  .latest-panel .latest-meta { display: flex; align-items: center; gap: 10px; min-width: 0; grid-column: 1; grid-row: 1; }
  .latest-panel .news-chip { justify-self: start; min-width: 88px; }
  .latest-list strong { grid-column: 1; grid-row: 2; }
  .latest-list a > svg:last-child, .latest-list a > i[data-lucide] { grid-column: 2; grid-row: 1 / span 2; }
}

/* ハンバーガーメニュー: 1201pxで開くと1145x414pxの白板の中にリンクが左端に6本並ぶだけで
   面積の9割が空白だった（＝「開いたのに何も出ていない」）。幅を絞り、行に区切り線を入れる。
   ≤720px は全幅パネル＋暗幕。暗幕・外側タップ・Escape の3通りで閉じられるようにする（main.js） */
@media (max-width: 1220px) {
  .global-nav { top: calc(100% + 4px); left: auto; right: 28px; width: min(340px, calc(100% - 56px)); }
  .global-nav a { font-size: 1rem; border-top: 1px solid var(--line); }
  .global-nav a:first-child { border-top: 0; }
  /* 暗幕。ヘッダー(76px)より下だけを覆う。position:fixed なので文書の高さには影響しない。
     ⚠ .site-header には backdrop-filter が掛かっており、これは position:fixed の包含ブロックを
        自分自身に作ってしまう（= ヘッダーの高さ76pxの中に閉じ込められて高さ0になる）。
        そのため暗幕はヘッダーではなく body::after に置く。
     ⚠ z-index は 40。ヘッダー(50)より下・本文の .home-hero / .home-primary-links(1)より上 */
  body.nav-open::after { content: ""; position: fixed; inset: 76px 0 0; background: rgba(0,0,0,.35); z-index: 40; }
}
@media (max-width: 720px) {
  .global-nav { left: 16px; right: 16px; width: auto; }
  body.nav-open::after { inset: 72px 0 0; }
}

/* ホバー／フォーカス: 今回追加した部品（6枚のパステルカード・2枚の大導線・最新情報の各行・ボタン類）
   に押せる合図が無かった。hp2 指定どおり説明文とシェブロンを削った分、色面と太字ラベルだけが
   手がかりになっている。静止画のモックに存在しない層なので、モックを変えずに補える */
.quick-card, .home-route, .button, .header-contact { transition: box-shadow .15s ease, transform .15s ease; }
.quick-card:hover { box-shadow: 0 8px 18px rgba(0,58,40,.14); transform: translateY(-2px); }
.home-route:hover { box-shadow: 0 18px 40px rgba(0,58,40,.16); }
.latest-list a:hover strong { text-decoration: underline; text-underline-offset: 3px; }
/* フォーカスリング: 金(#c9a24d)は白地2.4:1でWCAG 1.4.11(3:1)不合格のため濃緑に変更 */
:focus-visible { outline: 3px solid var(--hero-green-2); outline-offset: 2px; }

/* フッターの電話番号: スマホでタップ発信できるように（iOS の自動検出は「TEL 」接頭辞＋<br>混在だと
   不安定、Android Chrome では動作しない）。相談窓口が主目的のサイトなので確実にリンクにする */
.footer-office a[href^="tel:"] { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 720px) {
  .footer-office a[href^="tel:"] { display: inline-block; min-height: 44px; line-height: 44px; }
}