/* ============================================================
   追加4案（F/G/H/I）の共通セクション部品
   base.css の後・各案の <letter>.css の前に読み込む。
   b.css にも同名の定義があるが、b.css は B案（root）の .hero と深緑ヘッダーを含むため
   そのままは使えない。共通部分だけをここへ切り出した。
   ⚠️ トークンは1つも足していない。角丸0・影なしの帳票様式から外れない。
   ============================================================ */

/* ---------- 開業準備中の告知帯（警備業法4条の要・4案とも必ず置く） ---------- */
.notice{background:var(--bg-alt);border-bottom:1px solid var(--line)}
.notice .wrap{display:flex;gap:12px;align-items:flex-start;padding-top:15px;padding-bottom:15px}
.notice svg{flex:none;margin-top:2px;color:var(--accent-ink)}
.notice p{font-size:13.5px;line-height:1.8;color:var(--ink-2);font-weight:500;max-width:70ch}

/* ---------- 打消しの1行（D6・勤務や業務の描写が始まる前に1回） ---------- */
.disclaim{border-bottom:1px solid var(--line);background:var(--surface)}
.disclaim p{max-width:1080px;margin:0 auto;padding:14px 22px;font-size:13px;color:var(--mut);line-height:1.85}

/* ---------- section shell ---------- */
.sec{padding:clamp(44px,7vw,88px) 0}
.sec-head{max-width:62ch}
.sec-head .h2{margin-top:10px;font-weight:700;letter-spacing:-.03em}
.sec-head .h2 b{color:var(--accent-ink)}
.sec-head .lead{margin-top:14px}

/* ---------- 対比台帳（B案のシグネチャ・D7で見出しもB案のまま維持） ---------- */
.ledger{margin-top:var(--s6);display:grid;grid-template-columns:1fr 1fr;gap:0;
  border-top:2px solid var(--ink);border-bottom:3px double var(--line-2)}
.ledger .col{padding:26px 26px 28px}
.ledger .col+.col{border-left:1px solid var(--line)}
.ledger .col.ng{background:var(--bg-alt)}
.ledger h3{font-size:15px;font-weight:700;letter-spacing:.01em;display:flex;align-items:center;gap:9px}
.ledger .col.ok h3{color:var(--accent-ink)}
.ledger .col.ng h3{color:var(--mut)}
.ledger h3 .mark{flex:none;width:20px;height:20px;border-radius:2px;display:grid;place-items:center;
  font-size:12px;font-weight:700}
.ledger .col.ok .mark{background:var(--accent);color:#fff}
.ledger .col.ng .mark{background:var(--mut);color:#fff}
.ledger ul{margin-top:16px;list-style:none;counter-reset:row}
.ledger li{font-size:14.5px;line-height:1.85;color:var(--ink-2);padding:11px 0 11px 34px;
  border-top:1px solid var(--line);position:relative;counter-increment:row}
.ledger li::before{content:counter(row,decimal-leading-zero);position:absolute;left:2px;top:14px;
  font-size:11px;font-weight:700;color:var(--faint);font-variant-numeric:tabular-nums;letter-spacing:.04em}
.ledger li:first-child{border-top:none;padding-top:4px}
.ledger li:first-child::before{top:7px}
.ledger .col.ng li{color:var(--mut)}
.ledger li small{display:block;margin-top:3px;font-size:12.5px;color:var(--mut)}
.ledger-foot{margin-top:var(--s4);font-size:13px;color:var(--mut);line-height:1.8;max-width:62ch}

/* ---------- 開始予定の業務（帳票行） ---------- */
.svclist{margin-top:var(--s6);border-top:2px solid var(--ink-2);max-width:880px}
.svclist .svcrow:last-child{border-bottom:3px double var(--line-2)}
.svcrow{display:grid;grid-template-columns:200px 1fr;gap:22px;padding:22px 4px;
  border-bottom:1px solid var(--line);align-items:start}
.svcrow dt{font-size:17px;font-weight:700;letter-spacing:-.01em;display:flex;align-items:baseline;gap:10px}
.svcrow dt .cat{font-size:11.5px;font-weight:700;color:var(--accent-ink);background:var(--accent-soft);
  border:1px solid var(--accent-line);padding:3px 9px;flex:none}
.svcrow dd{font-size:14.5px;line-height:1.9;color:var(--ink-2);text-wrap:pretty}

/* .fnote（フォーム直上の打消し）は base.css へ移した＝B案（root）でも使うため。ここには置かない。 */

/* ---------- 案の識別バッジ（検討用。本公開時に削除する） ---------- */
.planbadge{position:fixed;left:12px;bottom:12px;z-index:90;background:var(--ink);color:#fff;
  font-size:11.5px;font-weight:700;letter-spacing:.06em;padding:7px 12px;border:1px solid #57534E}
/* モバイルは左下＝固定CTAバーと重なるので右上へ逃がす。左上は写真のラベルが使う */
@media(max-width:900px){.planbadge{bottom:auto;top:76px;left:auto;right:8px;padding:5px 9px;font-size:10.5px}}

@media(max-width:900px){
  .ledger{grid-template-columns:1fr}
  .ledger .col+.col{border-left:none;border-top:1px solid var(--line-2)}
  .svcrow{grid-template-columns:1fr;gap:8px}
}