/* ハジメゲート(HAJIME GATE)サイト共通スタイル v2
   方針:スマホファースト/色だけに頼らない/写真・キャラクターは使わない/アクセント色は文字に使わない */
:root {
  --bg:#f5f7fb; --card:#ffffff; --ink:#152238; --sub:#4f5b73; --line:#dfe4ee;
  --navy:#14264a; --navy2:#1d3566; --gold:#c8912a; --gold-ink:#7a5200; --goldbg:#fbf3e2;
  --link:#1f4fbf; --info-bg:#e8efff; --info-ink:#1f3f9a; --warn-bg:#fff4d6; --warn-ink:#7a4a00;
  --focus:#1f4fbf;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#0f1524; --card:#182036; --ink:#e9edf6; --sub:#a9b3c8; --line:#2a3550;
    --navy:#0b1630; --navy2:#13244a; --gold:#e0a943; --gold-ink:#f0c26a; --goldbg:#2b2413;
    --link:#8fb0ff; --info-bg:#1c2a4d; --info-ink:#a9c1ff; --warn-bg:#33290f; --warn-ink:#f2cf8a; --focus:#8fb0ff; }
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--ink);
  font:1rem/1.75 "Yu Gothic UI","Hiragino Sans","Noto Sans JP","Meiryo",system-ui,sans-serif; }
a { color:var(--link); text-underline-offset:.15em; }
:focus-visible { outline:3px solid var(--focus); outline-offset:2px; border-radius:4px; }
.skip { position:absolute; left:-9999px; top:0; background:var(--navy); color:#fff; padding:10px 16px; z-index:100; }
.skip:focus { left:8px; top:8px; }
.wrap { max-width:1040px; margin:0 auto; padding:0 16px; }
.prose { max-width:46rem; }
@media (min-width:720px) { .wrap { padding:0 24px; } }

/* PR 表記バー */
.pr { background:var(--goldbg); border-bottom:1px solid var(--line); font-size:.8125rem; color:var(--sub); padding:6px 0; }
.pr b { color:var(--gold-ink); margin-right:.5em; }

/* ヘッダー・ナビ */
header.site { background:var(--navy); color:#fff; }
header.site .wrap { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 20px; padding-top:12px; padding-bottom:12px; }
.brand { font-size:1.375rem; font-weight:800; letter-spacing:.04em; color:#fff; text-decoration:none; line-height:1.3; }
.brand { display:inline-flex; align-items:center; gap:.6rem; }
.brand .logo { width:2.25rem; height:2.25rem; flex:none; }
.brand small { display:block; font-size:.6875rem; font-weight:500; letter-spacing:0; opacity:.85; }
@media (min-width:720px) { .brand small { display:inline; margin-left:.6em; } }
nav.gnav { display:none; }
nav.gnav a { color:#e6ecfa; text-decoration:none; font-size:.875rem; margin-left:16px; padding:4px 0; border-bottom:2px solid transparent; }
nav.gnav a:hover, nav.gnav a[aria-current="page"] { color:#fff; border-bottom-color:var(--gold); }
details.menu { position:relative; }
details.menu summary { list-style:none; cursor:pointer; color:#fff; border:1px solid rgba(255,255,255,.45); border-radius:8px; padding:8px 14px; min-height:44px; display:flex; align-items:center; font-size:.9375rem; }
details.menu summary::-webkit-details-marker { display:none; }
details.menu ul { list-style:none; margin:8px 0 0; padding:8px; background:var(--card); color:var(--ink); border:1px solid var(--line); border-radius:10px; position:absolute; right:0; z-index:50; min-width:15rem; box-shadow:0 8px 24px rgba(10,20,50,.25); }
details.menu li a { display:block; padding:12px 14px; color:var(--ink); text-decoration:none; border-radius:6px; min-height:44px; }
details.menu li a:hover { background:var(--bg); }
@media (min-width:900px) { nav.gnav { display:block; } details.menu { display:none; } }

/* パンくず */
.crumbs { font-size:.8125rem; color:var(--sub); padding:14px 0 0; }
.crumbs a { color:var(--sub); }
.crumbs span[aria-hidden] { margin:0 .4em; }

/* ヒーロー */
.hero { background:linear-gradient(180deg,var(--navy),var(--navy2)); color:#fff; padding:44px 0 52px; }
.hero .eyebrow { display:inline-block; font-size:.8125rem; letter-spacing:.08em; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.3); padding:3px 12px; border-radius:99px; margin-bottom:14px; }
.hero h1 { font-size:clamp(1.625rem,5.2vw,2.5rem); line-height:1.4; margin:0 0 14px; }
.hero p { max-width:36rem; margin:0 0 22px; color:#dce5f7; }
.hero .cta { display:flex; flex-wrap:wrap; gap:12px; }
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 24px; border-radius:10px; font-weight:700; text-decoration:none; text-align:center; }
.btn-gold { background:var(--gold); color:#1a1305; }
.btn-line { border:2px solid rgba(255,255,255,.8); color:#fff; }
.btn-navy { background:var(--navy); color:#fff; }
@media (max-width:520px) { .hero .cta .btn { width:100%; } }
.hero .sub-link { display:block; margin-top:14px; color:#dce5f7; font-size:.9375rem; }
.trust { display:grid; gap:10px; grid-template-columns:1fr; margin-top:26px; }
@media (min-width:640px) { .trust { grid-template-columns:repeat(3,1fr); } }
.trust div { display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.22); border-radius:10px; padding:10px 14px; font-size:.9375rem; }
.ico { width:1.5rem; height:1.5rem; flex:none; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* セクション・カード */
section.block { padding:44px 0 4px; }
h2.sec { font-size:1.375rem; margin:0 0 6px; line-height:1.5; }
p.lead { color:var(--sub); margin:0 0 20px; }
.grid { display:grid; gap:14px; grid-template-columns:1fr; }
@media (min-width:640px) { .grid.c2 { grid-template-columns:repeat(2,1fr); } .grid.c3 { grid-template-columns:repeat(3,1fr); } .grid.c4 { grid-template-columns:repeat(4,1fr); } }
.card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px 18px; }
.card h3 { margin:0 0 6px; font-size:1.0625rem; line-height:1.5; }
.card p { margin:.4em 0; }
a.card { display:block; color:inherit; text-decoration:none; }
a.card:hover { border-color:var(--gold); }
a.card .more { color:var(--link); font-size:.9375rem; }
.cardnum { display:inline-flex; align-items:center; justify-content:center; width:2rem; height:2rem; border-radius:50%; background:var(--navy); color:#fff; font-weight:700; margin-bottom:8px; }

/* バッジ:必須/任意/該当者のみ(色だけでなく、文言と形で区別) */
.badge { display:inline-block; font-size:.75rem; font-weight:700; line-height:1.6; padding:0 .7em; border-radius:6px; border:2px solid var(--navy); vertical-align:middle; }
.b-must { background:var(--navy); color:#fff; }
.b-opt { background:transparent; color:var(--sub); border-color:var(--sub); }
.b-cond { background:var(--warn-bg); color:var(--warn-ink); border:2px dashed var(--warn-ink); }
.b-date { background:var(--info-bg); color:var(--info-ink); border-color:var(--info-ink); }

/* 記事ヘッダー・要点 */
.page-title { font-size:clamp(1.5rem,4.6vw,2rem); line-height:1.45; margin:14px 0 10px; }
.meta { display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; color:var(--sub); font-size:.875rem; margin-bottom:16px; }
.keypoints { background:var(--card); border:1px solid var(--line); border-left:6px solid var(--navy); border-radius:12px; padding:16px 18px; margin:0 0 18px; }
.keypoints h2 { font-size:1rem; margin:0 0 6px; }
.keypoints ul { margin:0; padding-left:1.2em; }
.who { display:grid; gap:10px; grid-template-columns:1fr; margin:0 0 20px; }
@media (min-width:640px) { .who { grid-template-columns:1fr 1fr; } }
.who div { border:1px solid var(--line); border-radius:12px; padding:12px 14px; background:var(--card); font-size:.9375rem; }
.who b { display:block; margin-bottom:2px; }
.toc { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px 16px; margin:0 0 24px; }
.toc summary { cursor:pointer; font-weight:700; min-height:44px; display:flex; align-items:center; }
.toc ol { margin:6px 0 4px; padding-left:1.4em; }
.toc li { margin:4px 0; }

/* 本文 */
article.doc h2 { font-size:1.3125rem; margin:36px 0 10px; padding:2px 0 2px 12px; border-left:6px solid var(--gold); line-height:1.5; }
article.doc h3 { font-size:1.125rem; margin:24px 0 8px; }
article.doc p, article.doc li { overflow-wrap:anywhere; }
.kv { display:grid; grid-template-columns:1fr; gap:8px; margin:8px 0 12px; }
@media (min-width:560px) { .kv { grid-template-columns:1fr 1fr; } }
.kv div { background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:8px 12px; font-size:.9375rem; }
.kv dt, .kv b { display:block; font-size:.75rem; color:var(--sub); font-weight:600; }
.checklist { list-style:none; padding:0; margin:8px 0; }
.checklist li { position:relative; padding:6px 0 6px 2rem; }
.checklist li::before { content:""; position:absolute; left:.2rem; top:.7rem; width:1.05rem; height:1.05rem; border:2px solid var(--navy); border-radius:4px; background:var(--card); }

/* ボックス */
.note, .info, .warn { border-radius:12px; padding:12px 16px; margin:14px 0; font-size:.9375rem; }
.note { background:var(--card); border:1px solid var(--line); color:var(--sub); }
.info { background:var(--info-bg); color:var(--info-ink); border:1px solid var(--info-ink); }
.warn { background:var(--warn-bg); color:var(--warn-ink); border:1px solid var(--warn-ink); }
.info b, .warn b { display:inline-flex; align-items:center; gap:.4em; }

/* フロー図(HTML の番号つきリスト。スマホは縦、PC は横) */
ol.flow { list-style:none; counter-reset:step; margin:14px 0; padding:0; display:grid; gap:12px; grid-template-columns:1fr; }
ol.flow > li { counter-increment:step; position:relative; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px 16px 14px 3.4rem; }
ol.flow > li::before { content:counter(step); position:absolute; left:14px; top:14px; width:2rem; height:2rem; border-radius:50%; background:var(--navy); color:#fff; font-weight:700; display:flex; align-items:center; justify-content:center; }
ol.flow > li:not(:last-child)::after { content:"↓"; position:absolute; left:20px; bottom:-15px; color:var(--gold-ink); font-weight:700; background:var(--bg); line-height:1; z-index:1; }
ol.flow > li strong { display:block; font-size:1.0625rem; line-height:1.5; }
ol.flow > li .desc { color:var(--sub); font-size:.9375rem; }
ol.flow > li.now { border:2px solid var(--gold); }
@media (min-width:900px) {
  ol.flow.h5 { grid-template-columns:repeat(5,1fr); }
  ol.flow.h5 > li { padding:52px 14px 14px; text-align:left; }
  ol.flow.h5 > li::before { left:14px; top:12px; }
  ol.flow.h5 > li:not(:last-child)::after { content:"→"; left:auto; right:-14px; top:20px; bottom:auto; }
}

/* 表:スマホでは1行を1枚のカードに変換(td に data-label を付ける) */
.tblwrap { overflow-x:auto; }
table.tbl { width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden; font-size:.9375rem; }
table.tbl caption { text-align:left; font-weight:700; padding:10px 12px; caption-side:top; }
table.tbl th, table.tbl td { text-align:left; vertical-align:top; padding:10px 12px; border-bottom:1px solid var(--line); }
table.tbl thead th { background:var(--navy); color:#fff; font-size:.8125rem; }
@media (max-width:640px) {
  table.tbl, table.tbl tbody, table.tbl tr, table.tbl td, table.tbl th { display:block; width:100%; }
  table.tbl caption { display:block; width:100%; text-align:left; }
  table.tbl thead { position:absolute; left:-9999px; }
  table.tbl tr { border-bottom:8px solid var(--bg); padding:6px 0; }
  table.tbl td { border:0; padding:6px 12px; }
  table.tbl td[data-label]::before { content:attr(data-label); display:block; font-size:.75rem; color:var(--sub); font-weight:700; }
}

/* FAQ */
details.faq { background:var(--card); border:1px solid var(--line); border-radius:12px; margin:8px 0; }
details.faq summary { cursor:pointer; padding:12px 16px; font-weight:700; min-height:44px; display:flex; align-items:center; }
details.faq .a { padding:0 16px 14px; }

/* 次のステップ・出典・更新履歴 */
.next a.card strong { display:block; margin-bottom:4px; }
.sources { font-size:.875rem; color:var(--sub); }
.sources li { margin:4px 0; overflow-wrap:anywhere; }
.updlog { font-size:.875rem; color:var(--sub); border-top:1px solid var(--line); padding-top:10px; margin-top:26px; }

/* 図(figure) */
figure.fig { margin:18px 0; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px; }
figure.fig svg { display:block; width:100%; height:auto; }
figure.fig figcaption { font-size:.8125rem; color:var(--sub); margin-top:8px; }
svg .t { fill:var(--ink); font:600 13px "Yu Gothic UI","Hiragino Sans","Meiryo",sans-serif; }
svg .ts { fill:var(--sub); font:500 11px "Yu Gothic UI","Hiragino Sans","Meiryo",sans-serif; }
svg .ln { stroke:var(--navy); stroke-width:2; fill:none; }
svg .dot { fill:var(--navy); }
svg .dotg { fill:var(--gold); }
svg .box { fill:var(--card); stroke:var(--line); stroke-width:1.5; }
svg .axis { stroke:var(--sub); stroke-width:1.5; }

/* フッター */
footer.site { margin-top:56px; padding:28px 0 44px; border-top:1px solid var(--line); color:var(--sub); font-size:.875rem; }
footer.site a { color:var(--sub); margin-right:14px; display:inline-block; padding:6px 0; }
footer.site .cols { display:grid; gap:18px; grid-template-columns:1fr; }
@media (min-width:720px) { footer.site .cols { grid-template-columns:2fr 1fr 1fr; } }
footer.site h2 { font-size:.9375rem; margin:0 0 6px; color:var(--ink); }
footer.site ul { list-style:none; margin:0; padding:0; }
footer.site li a { margin:0; }

/* 固定ページ(既存)との互換 */
article.page { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:20px; margin:24px 0; }
@media (min-width:720px) { article.page { padding:28px; } }
article.page h1 { font-size:1.625rem; margin:0 0 12px; line-height:1.5; }
article.page h2 { font-size:1.1875rem; margin:28px 0 6px; padding-left:10px; border-left:4px solid var(--gold); }
article.page table { width:100%; border-collapse:collapse; margin:10px 0; }
article.page th, article.page td { text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
article.page th { width:30%; color:var(--sub); font-weight:600; background:var(--bg); }
.tag { display:inline-block; font-size:.75rem; padding:1px 10px; border-radius:99px; background:var(--goldbg); color:var(--gold-ink); font-weight:700; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } * { transition:none !important; animation:none !important; } }
@media print { .pr, header.site, footer.site, details.menu, .skip { display:none; } body { background:#fff; color:#000; } }

/* ===== v2.1(ラウンド3の指摘への対応)===== */
h1.page-title, .hero h1, article.page h1 { text-wrap:balance; word-break:auto-phrase; }
details.toc ol { list-style:none; padding-left:0; margin:6px 0 4px; }
details.toc li a { display:inline-block; padding:.3em 0; }
.prose li a, .prose p a { padding-block:.15em; }
/* 順序を示さない図(矢印なし・番号の代わりに丸印) */
ol.flow.nolink > li::after { display:none !important; }
ol.flow.nolink > li::before { content:"●"; font-size:.9rem; color:#fff; }
/* 表カードの項目名を、少し大きく・濃く */
@media (max-width:640px) {
  table.tbl td[data-label]::before { font-size:.8125rem; color:var(--ink); opacity:.8; }
  table.tbl.compact tr { padding:2px 0; border-bottom-width:6px; }
  table.tbl.compact td { padding:3px 12px; }
  .hero .trust { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
  .hero .trust div { flex:1 1 auto; padding:7px 10px; font-size:.8125rem; }
  .pr { font-size:.75rem; }
}
/* 個人/法人の見出しバッジ(優劣を感じない中立の見た目。文字を必ず併記) */
.side-tag { display:inline-block; font-size:.8125rem; font-weight:700; padding:0 .7em; border-radius:6px; border:2px solid var(--navy); margin-right:.4em; }
.side-tag.kojin { background:transparent; color:var(--ink); }
.side-tag.houjin { background:var(--navy); color:#fff; }
/* ダークモードの番号丸 */
@media (prefers-color-scheme: dark) {
  ol.flow > li::before, .cardnum { background:#3b4f86; color:#fff; }
  .side-tag.houjin { background:#3b4f86; }
}
/* メニュー内の現在ページ */
details.menu a[aria-current="page"] { font-weight:700; border-left:3px solid var(--gold); padding-left:.7em; }
/* 用語集などの密な一覧(スマホで短く) */
dl.terms { margin:0; }
dl.terms > div { border-bottom:1px solid var(--line); padding:10px 0; }
dl.terms dt { font-weight:700; }
dl.terms dd { margin:2px 0 0; color:var(--ink); }
/* 図6:費用の棒(スマホでも比較できるコンパクト表示) */
.bars { list-style:none; margin:10px 0; padding:0; display:grid; gap:10px; }
.bars li { display:grid; gap:2px; }
.bars .lbl { font-size:.9375rem; }
.bars .bar { height:12px; background:var(--line); border-radius:99px; overflow:hidden; }
.bars .bar > i { display:block; height:100%; background:var(--navy); }
.bars .val { font-size:.8125rem; color:var(--sub); }


/* フッターの広告表記(目立たない場所)。報酬を得るリンクを掲載するページでは、記事の冒頭に .pr-inline を置く */
.footer-ad { font-size:.8125rem; margin:0 0 6px; }
.pr-inline { display:inline-block; font-size:.8125rem; font-weight:700; padding:0 .7em; border:2px solid var(--gold-ink); color:var(--gold-ink); border-radius:6px; margin-right:.5em; }