/* フクシルベ 共通スタイル。
   方針: アイコンに頼らずタイポグラフィで組む。装飾は線と余白だけ。
        ダークモード対応。スマホ幅で横スクロールを出さない（現場で使うため）。 */
:root{
  --ink:#1a1a1a; --ink-2:#555; --ink-3:#888;
  --line:#e2e0dc; --bg:#faf9f7; --card:#fff;
  --accent:#2f6f5e; --accent-weak:#eef4f2;
  --warn:#8a5a00; --warn-bg:#fdf6e6;
  --measure:760px;
}
@media (prefers-color-scheme: dark){
  :root{
    --ink:#e9e7e3; --ink-2:#b3afa8; --ink-3:#8b8781;
    --line:#33312d; --bg:#191817; --card:#211f1e;
    --accent:#7fc0ab; --accent-weak:#1f2b27;
    --warn:#e0b464; --warn-bg:#2a2115;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif;
  line-height:1.8; font-feature-settings:"palt" 1;
}
img{max-width:100%; height:auto}
.wrap{max-width:var(--measure); margin:0 auto; padding:0 20px}

/* ── ヘッダ / フッタ ───────────────────────────── */
.site-head{border-bottom:1px solid var(--line); background:var(--card)}
.site-head .wrap{display:flex; align-items:baseline; gap:18px; flex-wrap:wrap; padding-top:14px; padding-bottom:14px}
.brand{font-size:1.15rem; font-weight:700; letter-spacing:.06em; margin:0}
.brand a{color:var(--ink); text-decoration:none}
.brand .sub{display:block; font-size:.72rem; font-weight:400; color:var(--ink-3); letter-spacing:.02em; margin-top:2px}
.site-nav{margin-left:auto; display:flex; gap:16px; font-size:.86rem}
.site-nav a{color:var(--ink-2); text-decoration:none}
.site-nav a:hover, .site-nav a[aria-current]{color:var(--accent)}
.site-foot{margin-top:64px; border-top:1px solid var(--line); background:var(--card)}
.site-foot .wrap{padding-top:24px; padding-bottom:40px; font-size:.8rem; color:var(--ink-3)}
.site-foot a{color:var(--ink-2)}
.site-foot .cols{display:flex; gap:32px; flex-wrap:wrap; margin-bottom:16px}
.site-foot h3{font-size:.78rem; color:var(--ink-2); margin:0 0 6px}
.site-foot ul{list-style:none; margin:0; padding:0}

main{padding-top:32px}
h1{font-size:1.6rem; line-height:1.5; margin:0 0 8px}
h2{font-size:1.15rem; margin:36px 0 12px; padding-bottom:6px; border-bottom:1px solid var(--line)}
h3{font-size:1rem; margin:24px 0 8px}
.lede{color:var(--ink-2); margin:0 0 8px}
.crumbs{font-size:.78rem; color:var(--ink-3); margin:0 0 16px}
.crumbs a{color:var(--ink-3)}
.updated{font-size:.78rem; color:var(--ink-3)}

/* ── 文書リスト（手続きページの本体） ─────────────── */
ol.docs{list-style:none; margin:0; padding:0}
ol.docs li{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:14px 16px; margin-bottom:10px}
.doc-title{font-weight:700; line-height:1.6}
.doc-title a{color:var(--ink); text-decoration:none; border-bottom:1px solid var(--accent)}
.doc-title a:hover{color:var(--accent)}
.doc-note{font-size:.88rem; color:var(--ink-2); margin-top:6px}
.meta{color:var(--ink-3); font-size:.78rem; margin-top:6px; display:flex; flex-wrap:wrap; gap:10px}
.tag{display:inline-block; font-size:.72rem; padding:2px 8px; border-radius:999px; background:var(--accent-weak); color:var(--accent); white-space:nowrap}
.tag.old{background:var(--warn-bg); color:var(--warn)}
.attr{color:var(--ink-3); font-size:.74rem; margin-top:6px}

/* 出典（引用）のカード。docs と同じ見た目に揃える。 */
ol.cites{list-style:none; margin:0; padding:0}
ol.cites li{background:var(--card); border:1px solid var(--line); border-radius:10px;
     padding:14px 16px; margin-bottom:10px}
.cite-title{font-weight:700; line-height:1.6}
.cite-title a{color:var(--ink); text-decoration:none; border-bottom:1px solid var(--accent)}
.cite-title a:hover{color:var(--accent)}
.lede-sm{color:var(--ink-2); font-size:.84rem; margin:0 0 10px}

/* 出典のダウンロード導線。事業者が最後に欲しいのは「記入して提出するファイル」なので、
   押せば落ちることが一目で分かる形にする（リンク先は配布元の原本＝再ホストしない）。 */
.tag.form{background:var(--accent); color:#fff}
.cites li.is-form{border-color:var(--accent)}
a.dl{display:inline-block; margin-top:10px; padding:8px 14px; border-radius:8px;
     background:var(--accent); color:#fff; font-size:.84rem; font-weight:700;
     text-decoration:none; border:0}
a.dl:hover{filter:brightness(1.08)}
a.dl:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.cites li:not(.is-form) a.dl{background:transparent; color:var(--accent);
     border:1px solid var(--accent); font-weight:600}

/* ── カード一覧（手続き一覧 / コラム一覧） ────────── */
.cards{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.cards li{background:var(--card); border:1px solid var(--line); border-radius:10px}
.cards a{display:block; padding:14px 16px; color:var(--ink); text-decoration:none}
.cards a:hover{border-color:var(--accent)}
.cards .t{font-weight:700}
.cards .d{font-size:.82rem; color:var(--ink-3); margin-top:4px}
.section-label{font-size:.76rem; letter-spacing:.08em; color:var(--ink-3); margin:28px 0 8px; font-weight:700}

/* ── 注意 / 免責 ──────────────────────────────── */
.notice{background:var(--warn-bg); color:var(--warn); border-radius:10px; padding:12px 16px; font-size:.86rem}
.disclaimer{margin-top:32px; padding:14px 16px; border:1px solid var(--line); border-radius:10px; color:var(--ink-3); font-size:.8rem; background:var(--card)}

/* ── 本文（コラム） ───────────────────────────── */
.prose p{margin:1em 0}
.prose ul,.prose ol{padding-left:1.4em}
.prose li{margin:.3em 0}
.prose a{color:var(--accent)}
.prose code{background:var(--accent-weak); padding:.1em .4em; border-radius:4px; font-size:.9em}
.prose blockquote{margin:1.2em 0; padding:.2em 0 .2em 1em; border-left:3px solid var(--line); color:var(--ink-2)}
.prose hr{border:0; border-top:1px solid var(--line); margin:2em 0}
.table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
table{border-collapse:collapse; width:100%; font-size:.9rem}
th,td{border:1px solid var(--line); padding:8px 10px; text-align:left; vertical-align:top}
th{background:var(--accent-weak); color:var(--ink); font-weight:700; white-space:nowrap}

/* ── 検索フォーム（トップ） ───────────────────── */
form.search{margin:20px 0 6px}
form.search textarea{
  width:100%; min-height:84px; resize:vertical; padding:14px 16px;
  font:inherit; line-height:1.6; color:var(--ink); background:var(--card);
  border:1px solid var(--line); border-radius:10px;
}
form.search textarea:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:transparent}
.row{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:10px}
button.primary{font:inherit; font-weight:700; color:#fff; background:var(--accent); border:0; border-radius:10px; padding:11px 22px; cursor:pointer}
button.primary:disabled{opacity:.5; cursor:progress}
.hint{color:var(--ink-3); font-size:.82rem}
.examples{margin:14px 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:8px}
.examples button{background:transparent; color:var(--accent); border:1px solid var(--line); font:inherit; font-size:.84rem; padding:6px 12px; border-radius:999px; cursor:pointer}
.answer{background:var(--card); border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:10px; padding:18px 20px; white-space:pre-wrap}
h2.eyebrow{font-size:.78rem; letter-spacing:.1em; color:var(--ink-3); font-weight:700; margin:28px 0 10px; border:0; padding:0}
details summary{cursor:pointer; color:var(--ink-2); font-size:.86rem}
ul.cands{list-style:none; margin:10px 0 0; padding:0; font-size:.88rem}
ul.cands li{padding:7px 0; border-bottom:1px dashed var(--line)}
ul.cands a{color:var(--ink); text-decoration:none}
ul.cands a:hover{color:var(--accent)}
ul.cands .d{color:var(--ink-3); font-variant-numeric:tabular-nums; margin-right:10px; font-size:.8rem}
.index-state{color:var(--ink-3); font-size:.78rem; margin-top:6px}
.empty{color:var(--ink-2)}
[hidden]{display:none !important}
.spin{display:inline-block; width:.9em; height:.9em; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:s .7s linear infinite; vertical-align:-.1em}
@keyframes s{to{transform:rotate(360deg)}}