/* ============================================================
   ソラヒカリ 補助金ページの束（css\hj-main.css）
   - 読むのは <main class="hj-main"> を持つページだけ。
     いまは /hojokin/ と /hojokin/tokyo/ の2枚（都県や市区町村を足しても本数は増えない）。
     トップページは読まない。**1画面目の重さの枠を食わないため**
     （design.md 第6-3節の上限 135KB は index.html ＋ CSS ＋ JS で数える。
      style.css に入れるとトップページの枠を食ってしまう）。
   - 読む順番は「共通 → 束」。<head> で /css/style.css を先に、これを後に置く。
     @import は使わない（2本が直列になる）。!important も使わない
     （上書きは .hj-main を頭に付けた規則で行う）。design.md 第6-11節。
   - 広い画面（768px 以上）の上書きは、このファイルが自分で持つ
     （共通の「広い画面」の節に束の部品を書かない。design.md 第6-11節）。
   2026-09-19
   ============================================================ */

/* ---- 1. 本文の器（design.md 第4節・8-13(4)）----------------------------- */
/* 表が本文より広いページ（補助金ページ）の器。design.md 第4節・8-13(4)。
   節の器を 880px にし、中の文章だけ 620px に絞って左に寄せる ―― どの節でも
   「本文の左端と表の左端がそろう」（表を中央そろえにしない）。--w-page の内側 */
.hj-main .wrap { max-width: calc(var(--w-tbl) + var(--pad-side) * 2); }
.hj-main .narrow { margin-left: 0; margin-right: 0; }

/* 本文の中の文字リンクの当たり判定は、共通の style.css の「床」が持つ（design.md 12-2）。
   ここに器ごとの規則を書かない ―― 器を持たないページに当たらないため。2026-09-19 に消した */

/* ---- 2. 表（design.md 8-13）―― 補助金ページの主役 --------------------
   767px 以下は表をやめて「1行＝1枚のカード」に積む（横スクロールを出さない）。
   役は HTML に3幅ぜんぶ書いてある（8-13(2)）。thead は display:none にせず
   .visually-hidden と同じ中身で隠すだけ（列見出しが読み上げから消える。第12節の12） */
.tbl-wrap { margin: 0 0 var(--s-6); }
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; }
/* caption は C2版で本文と同じ大きさから見出し3の大きさに上げた（2026-09-19）。
   表が5つ続くページで、どの表かの手がかりが caption しか無い */
.tbl caption {
  caption-side: top; text-align: left;
  font-size: var(--fs-h3); font-weight: 700; color: var(--c-head);
  line-height: 1.55; margin-bottom: var(--s-3);
}
/* ラベルは HTML に実体として置く（::before の content で作らない。8-13(1)）。
   広い画面は列見出しが見えているので出さない */
.tbl__lab { display: none; }

@media (max-width: 767px) {
  /* 箱の中に箱で二重の枠にしない（カード1枚1枚が箱） */
  .tbl-wrap { border: 0; border-radius: 0; }
  .tbl, .tbl caption, .tbl tbody, .tbl tr, .tbl th, .tbl td { display: block; }
  .tbl colgroup, .tbl col { display: none; }
  .tbl thead {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip: rect(0 0 0 0); clip-path: inset(50%);
    overflow: hidden; white-space: nowrap;
  }
  /* A-昼5（第A5-12-2）: カードの地は白・枠は飾りの線 --c-line、題の地は #EFE5D1 */
  .tbl tbody tr {
    background: #FFFFFF;
    border: 1px solid var(--c-line);
    border-radius: var(--r-m);
    overflow: hidden;              /* 題の地（空色）を角に沿って切る */
  }
  .tbl tbody tr + tr { margin-top: var(--s-3); }
  /* 行見出し＝カードの題。列見出しが見えないぶん、題が「これは何の行か」を1人で言う */
  .tbl tbody th {
    text-align: left;
    background: #EFE5D1; color: var(--c-head);
    font-size: var(--fs-h3); font-weight: 700; line-height: 1.55;
    padding: var(--s-3) var(--s-4);
    border-bottom: 1px solid var(--c-line);
  }
  /* カードの中に横罫を引かない。区切りはラベルと 8px の空きだけ。
     上の余白は C2版で 12 → 8px（ラベルと値を近づける。2026-09-19）。
     箱の内側の 16px（左右と最後の行の下）は触っていない */
  .tbl tbody td {
    font-size: var(--fs-body); font-weight: 500; color: var(--c-text);
    line-height: var(--lh-body);
    padding: var(--s-2) var(--s-4) 0;
  }
  .tbl tbody td:last-child { padding-bottom: var(--s-4); }
  .tbl__lab {
    display: block;
    font-size: var(--fs-note); font-weight: 500; line-height: var(--lh-note);
    color: var(--c-text-weak);
  }
}

/* ---- 3. 受付状況の印（design.md 8-14）--------------------------------
   印は2つだけ。--c-alert は使わない（受付終了はエラーではない）。
   色だけに頼らず「塗り方・濃さ・丸の形」を同時に変える（丸は HTML の 12px の SVG） */
.stat {
  display: inline-flex; align-items: center; gap: var(--s-1);
  min-height: 24px; padding: 0 var(--s-2);
  border-radius: var(--r-s);
  font-size: 14px;            /* 広い画面でも 14px。印は文字ではなく札なので大きくしない */
  font-weight: 700; line-height: 1.4;
  white-space: nowrap;
}
.stat svg { flex: 0 0 auto; }
/* 受付中: ベタ塗り＋白文字（紙の上の --c-main #1F4B82 で 8.80:1。2026-10-15 案B。第A5-12-2） */
.stat--open   { background: var(--c-main); color: var(--c-text-on-dark); border: 1px solid var(--c-main); }
/* 受付終了: 枠だけ＋弱い文字色（白の上で 6.77:1）。枠の太さを合わせて印の大きさを2つでそろえる */
.stat--closed { background: #FFFFFF; color: var(--c-text-weak); border: 1px solid var(--c-line-strong); }

/* ---- 4. 確認日のバッジ（design.md 8-15）------------------------------
   h1 のすぐ下・ページに1つ。全幅の帯にしない。1行目は本文と同じ 16px/700
   ―― 14px にした瞬間に注釈になる。暦や時計の絵は付けない。
   A-昼5（第A5-12-2）: 地は --c-bg-soft、左に手元の灯り（紙の上は 2px の --c-main のベタ）。
   C2版の四方の枠と左 4px の藍は外した（線は手元の灯りの1種類） */
.asof {
  display: inline-block; max-width: 100%;
  background: var(--c-bg-soft);
  border-left: 2px solid var(--c-main);
  border-radius: var(--r-m);
  padding: var(--s-3) var(--s-4);
  margin: 0 0 var(--s-5);
}
.asof p { margin: 0; }
.asof .asof-main { font-size: var(--fs-body); font-weight: 700; color: var(--c-head); line-height: 1.5; }
.asof .asof-sub  { font-size: var(--fs-note); font-weight: 500; color: var(--c-text-weak); line-height: var(--lh-note); margin-top: var(--s-1); }

/* ---- 5. 出どころの一覧（seo.md 3-4 の #8。制度ごとに1行）--------------
   リンクは同じタブで開く（design.md 8-15。target も rel も付けない）。
   行の頭で独立して立つので inline-block にして 44px を作り、間を16px あける（12-2） */
.src-list { list-style: none; margin: 0 0 var(--s-5); padding: 0; }
.src-list > li { margin-bottom: var(--s-4); }
.src-list > li:last-child { margin-bottom: 0; }
.src-list .src-name { display: block; color: var(--c-head); font-weight: 700; }
.src-list a { display: inline-block; }

/* ---- 5-2. 申込の順番の図（design.md 5-7）。px で固定しない ------------------
   2026-09-23 に css\style.css から移した（/hojokin/ だけが使う。design.md 第6-11節・第A5-8節）。
   図の中の色は図の正本のまま（第A5-10節）。紙の上に置く。
   下の3段。番号の丸は .flow を使い回す */
.fig-order {
  display: block;
  width: 100%; height: auto;
  margin: var(--s-6) 0 var(--s-5);
}
.fig-order-steps { margin-bottom: var(--s-6); }

/* ---- 6. 広い画面（768px 以上）。共通の style.css 第15節から移した塊 ---------------- */
@media (min-width: 768px) {
  /* 表（design.md 8-13(4)）。箱（枠・角丸・切り取り）は .tbl-wrap が持つ。
     縦罫と縞は引かない。全部左そろえ（数字と日本語が混ざるため） */
  .tbl-wrap {
    max-width: var(--w-tbl); margin-inline: 0;   /* 中央そろえにしない（8-13(4)） */
    border: 1px solid var(--c-line);
    border-radius: var(--r-m);
    overflow: hidden;
  }
  .fig-order { max-width: 520px; }
  .tbl { table-layout: fixed; }
  .tbl th, .tbl td {
    text-align: left; vertical-align: top;
    padding: var(--s-3) var(--s-4);
  }
  /* A-昼5（第A5-12-2）: 見出しの行と行見出しの地は #EFE5D1・字は --c-head 700、
     中身の地は白。行の線は飾りの --c-line（C2版の --c-line-strong から替えた） */
  .tbl thead th {
    background: #EFE5D1; color: var(--c-head);
    font-size: var(--fs-body); font-weight: 700; line-height: 1.55;
  }
  .tbl tbody th { background: #EFE5D1; color: var(--c-head); font-weight: 700; }
  .tbl tbody td { background: #FFFFFF; color: var(--c-text); }
  .tbl tbody tr > * { border-top: 1px solid var(--c-line); }
}

/* 節の頭の大きな絵（design.md 第A5-18節。いまは #7b 島しょ地域の1枚だけ）。
   トップの .sec-art と同じ役。スマホは画面の端から端まで、768px〜 は本文の幅（620px）で左そろえ */
.hj-main .sec-art { display: block; width: calc(100% + var(--pad-side) * 2); max-width: none; height: auto; margin: 0 calc(var(--pad-side) * -1) 24px; }
.hj-main .sec-art + h2 { margin-top: 0; }
@media (min-width: 768px) { .hj-main .sec-art { width: 100%; max-width: var(--w-text); margin: 0 0 32px; } }
/* いくら出るかの例（2026-10-29。トップの補助金の入口の行き先 #rei）。紙の面に、1行ずつ「何に・どう計算して・いくら」 */
.rei { margin: 32px 0 8px; padding: 24px 20px; border: 3px solid var(--c-cta); border-radius: 20px; background: var(--c-paper); color: #1F3349; }
.rei .rei-head { margin: 0 0 8px; color: #0A192B; font-size: 24px; line-height: 1.4; }
.rei .rei-case { margin: 0 0 16px; color: #1F3349; }
.rei-calc { margin: 0; }
.rei-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; padding: 12px 0; border-bottom: 1px dashed #A4B8CC; }
.rei-row dt { font-weight: 700; color: #0A192B; }
.rei-row dd { margin: 0 0 0 auto; display: flex; align-items: baseline; gap: 12px; }
.rei-how { font-size: 14px; color: #456170; }
.rei-yen { font-family: var(--f-mincho); font-size: 18px; font-weight: 700; color: #0A192B; white-space: nowrap; }
.rei-yen strong { font-size: 32px; }
.rei-sum { border-bottom: 0; margin-top: 8px; padding: 14px 12px; border-radius: 12px; background: rgba(240,180,41,.22); }
.rei-sum .rei-yen strong { font-size: 44px; background: linear-gradient(transparent 62%, rgba(240,180,41,.6) 62%); padding: 0 4px; }
.rei .rei-notes { margin: 16px 0 0; padding-left: 1.2em; font-size: 14px; line-height: 1.7; color: #1F3349; }
.rei .rei-notes li + li { margin-top: 4px; }
.rei .rei-asof { margin: 12px 0 0; font-size: 13px; color: #456170; }
@media (min-width: 768px) { .rei { padding: 32px 36px; } .rei .rei-head { font-size: 28px; } }