/* support.bosai.ne.jp の style。色・文字・余白の値は bosai.ne.jp の style (デジタル庁デザインシステム
   準拠) と同じトークンを使い、見た目を揃える。このサイトは読み物中心の2画面だけなので、
   bosai.ne.jp にある12列のグリッドやタブのメニューは持ち込まず、積み上げの1列だけにしてある。
   外部のファイル (Web フォント・画像) は読み込まない。 */

:root{
  --fs-body:1rem;     /* 16px 本文 */
  --fs-lk:1.125rem;   /* 18px 強調 */
  --fs-h2:1.25rem;    /* 20px 節の見出し */
  --fs-h1:2rem;       /* 32px 題名 */
  --lh-body:1.6;
  --lh-head:1.4;

  --s1:8px;
  --s2:16px;
  --s3:24px;
  --s5:40px;
  --s8:64px;
  --tap:44px;

  --wmax:680px;   /* 読み物の1列なので、bosai.ne.jp の --wmax (1100px・12列用) より狭くしてある */
  --r:4px;

  --bg:#ffffff;
  --fg:#1a1a1c;
  --fg2:#5a5d61;
  --link:#14459c;
  --rule:#c6c9cd;
  --rule-s:#1a1a1c;
  --th:#eef0f2;
  --band:#e7eaee;
}
@media(prefers-color-scheme:dark){
  :root{--bg:#16181b;--fg:#e8eaed;--fg2:#a9aeb4;--link:#9cc0f0;
        --rule:#3a3e44;--rule-s:#e8eaed;--th:#262a2f;--band:#2f343a}
}

*{box-sizing:border-box}
html{background:var(--bg)}
body{
  margin:0;padding:var(--s2) var(--s2) var(--s5);
  background:var(--bg);color:var(--fg);
  font-family:"Noto Sans JP","BIZ UDPGothic",Meiryo,sans-serif;
  font-size:var(--fs-body);line-height:var(--lh-body);
}
.w{max-width:var(--wmax);margin:0 auto}

a{color:var(--link)}
a:focus-visible{outline:3px solid var(--fg);outline-offset:2px;border-radius:2px}

p{margin:var(--s1) 0}
p+p{margin-top:var(--s5)}

/* ======== 画面の先頭 (bosai.ne.jp の .hd と同じ形) ======== */
.hd{margin:0;padding:0 0 var(--s2);border-bottom:2px solid var(--rule-s)}
h1{font-size:var(--fs-h1);line-height:var(--lh-head);font-weight:700;margin:0}
.lead{color:var(--fg2);margin:var(--s2) 0 0}

h2{font-size:var(--fs-h2);line-height:var(--lh-head);font-weight:700;
 margin:var(--s5) 0 var(--s2);padding:0 0 var(--s1);border-bottom:2px solid var(--rule-s)}

/* ======== 支援の金額 (bosai.ne.jp の案内リンク .lk のカードと同じ見た目) ======== */
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--s2);margin:var(--s2) 0}
.tier{border:1px solid var(--rule);border-radius:var(--r);padding:var(--s2);text-align:center}
.tier .amount{font-size:var(--fs-h1);font-weight:700;margin:0}
.tier .period{color:var(--fg2);margin:0 0 var(--s2)}
.tier a,.one a{display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap);
 padding:0 var(--s2);font-size:var(--fs-lk);font-weight:700;text-decoration:none}
.tier a:hover,.one a:hover{text-decoration:underline}
.one{border:1px solid var(--rule);border-radius:var(--r);padding:var(--s2);text-align:center;margin:var(--s2) 0}

/* 特定商取引法の表: ラベルが長い行 (「受付金額以外の必要料金」など) があるので、
   幅 768px 未満は th を固定幅にせず、ラベル・値を1行ずつ積む (bosai.ne.jp の table.st と同じ考え方)。
   768px 以上で普通の2列の表に戻す (下の @media)。 */
table{border-collapse:collapse;width:100%;margin:0 0 var(--s1)}
table,tbody,tr,th,td{display:block}
tr{padding:var(--s2) 0;border-bottom:1px solid var(--rule)}
th,td{border:0;padding:0;text-align:left;white-space:normal}
th{background:none;font-weight:700;margin:0 0 var(--s1);width:auto}

/* 事業所外観写真。幅は容器いっぱい (td の幅) に合わせ、360px を超えない。
   width:360px のような固定値を img に直接付けると、表の列の幅の計算に影響することがあるため、
   必ず「幅いっぱい・上限 360px」の形で書く */
.office{display:block;width:100%;max-width:360px;height:auto;margin-top:var(--s1);
 border:1px solid var(--rule);border-radius:var(--r)}

/* ======== 出典・脚注 (bosai.ne.jp の hr + p.ft と同じ形) ======== */
hr{border:0;border-top:1px solid var(--rule);margin:var(--s8) 0 var(--s3)}
.ft{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);margin:0;color:var(--fg2)}
.ft a{color:var(--link)}

/* ======== 幅の切り替え (bosai.ne.jp と同じく、幅を見る @media はここ1か所だけ) ======== */
@media(min-width:768px){
  table{display:table}
  tbody{display:table-row-group}
  tr{display:table-row;padding:0;border-bottom:0}
  th,td{display:table-cell;border-bottom:1px solid var(--rule);padding:var(--s1) var(--s2);vertical-align:top}
  th{background:var(--th);white-space:nowrap;width:9em;margin:0}
}