/* 住まいとお金の手続きノート — style.css
   主色ネイビー / 紙のオフホワイト / 琥珀1色（CTAと強調）。装飾は罫線と番号だけで構造を見せる。 */
:root{
  --navy:#1F2A44; --navy-deep:#16203A; --navy-soft:#3A4766;
  --ink:#22262E; --muted:#5B6270;
  --paper:#F7F6F2; --paper-2:#EFECE4; --white:#FFFFFF;
  --line:#DAD5C9; --line-2:#E8E4DB;
  --amber:#C8842B; --amber-hi:#D6923A; --amber-ink:#9A5F14; --amber-tint:#FBF1E3; --amber-line:#EFD9B8;
  --measure:720px; --wide:880px;
  --ease-out:cubic-bezier(.23,1,.32,1); --ease:cubic-bezier(.4,0,.2,1);
  --t-fast:120ms; --t-base:200ms;
  --font-head:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",system-ui,sans-serif;
  --font-body:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic Medium","Yu Gothic","Meiryo",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;interpolate-size:allow-keywords}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:17px;line-height:1.85;
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere;word-break:normal}
[hidden]{display:none!important}
[id]{scroll-margin-top:20px}
a{color:var(--navy);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;text-decoration-color:rgba(31,42,68,.4)}
a:hover{text-decoration-color:currentColor}
:focus-visible{outline:3px solid var(--navy);outline-offset:3px;border-radius:2px}
.site-footer :focus-visible,.cta-bar :focus-visible{outline-color:var(--white)}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}
.wrap.narrow{max-width:calc(var(--measure) + 40px)}
.skip{position:absolute;left:-9999px;top:0;background:var(--white);color:var(--navy);padding:8px 12px}
.skip:focus{left:8px;top:8px;z-index:100}
.label{font-family:var(--font-head);font-weight:700;font-size:.82rem;letter-spacing:.08em;color:var(--amber-ink);margin:0 0 .5em}

/* ---------- header ---------- */
.site-header{background:var(--paper);border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:14px;padding-bottom:12px}
.wordmark{display:inline-flex;flex-direction:column;text-decoration:none;color:var(--navy);font-family:var(--font-head);font-weight:700;line-height:1.2}
.wordmark .w1,.foot-brand .w1{font-size:.74rem;letter-spacing:.24em;color:var(--muted);font-weight:500}
.wordmark .w2,.foot-brand .w2{font-size:1.18rem;letter-spacing:.12em}
.site-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:2px}
.site-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 11px;font-size:.88rem;color:var(--navy);text-decoration:none;border-bottom:2px solid transparent;transition:border-color var(--t-fast) var(--ease)}
.site-nav a:hover{border-bottom-color:var(--line)}
.site-nav a[aria-current]{border-bottom-color:var(--amber);font-weight:700}
.nav-drawer{display:none;position:relative}
.nav-drawer summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 6px;font-family:var(--font-head);font-weight:700;font-size:.86rem;color:var(--navy);letter-spacing:.06em}
.nav-drawer summary::-webkit-details-marker{display:none}
.burger{display:inline-flex;flex-direction:column;justify-content:space-between;width:20px;height:14px}
.burger i{display:block;height:2px;background:var(--navy);transition:transform var(--t-base) var(--ease-out),opacity var(--t-base) var(--ease-out)}
.nav-drawer[open] .burger i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-drawer[open] .burger i:nth-child(2){opacity:0}
.nav-drawer[open] .burger i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.nav-drawer nav{position:absolute;right:0;top:calc(100% + 10px);min-width:240px;background:var(--white);border:1px solid var(--line);z-index:30;box-shadow:0 10px 28px rgba(31,42,68,.12)}
.nav-drawer[open] nav{opacity:1;transform:none;transition:opacity 160ms var(--ease-out),transform 160ms var(--ease-out)}
@starting-style{.nav-drawer[open] nav{opacity:0;transform:translateY(-4px)}}
.nav-drawer ul{list-style:none;margin:0;padding:6px 0}
.nav-drawer a{display:flex;align-items:center;min-height:46px;padding:0 18px;text-decoration:none;color:var(--navy);font-size:.95rem;border-left:3px solid transparent}
.nav-drawer a[aria-current]{border-left-color:var(--amber);font-weight:700;background:var(--amber-tint)}

/* ---------- PR bar / breadcrumb ---------- */
.pr-bar{background:var(--amber-tint);border-bottom:1px solid var(--amber-line);font-size:.8rem;color:var(--ink);line-height:1.5}
.pr-bar .wrap{padding-top:6px;padding-bottom:6px}
.crumbs{font-size:.8rem;color:var(--muted);padding:16px 0 0}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.2em .7em;align-items:center}
.crumbs li+li::before{content:"";display:inline-block;width:6px;height:6px;border-right:1px solid var(--muted);border-bottom:1px solid var(--muted);transform:rotate(-45deg);margin:0 .7em 0 0;vertical-align:middle}
.crumbs a{color:var(--muted)}
.crumbs [aria-current]{color:var(--ink)}

/* ---------- main / type ---------- */
main{padding:28px 0 80px}
h1,h2,h3{font-family:var(--font-head);font-weight:700;color:var(--navy);letter-spacing:.005em}
h1{font-size:1.72rem;line-height:1.42;margin:.5em 0 .7em}
h2{font-size:1.32rem;line-height:1.5;margin:0 0 .9em;padding:.1em 0 .1em .75em;border-left:3px solid var(--navy);display:flex;gap:.55em;align-items:baseline}
h3{font-size:1.08rem;line-height:1.55;margin:1.9em 0 .6em}
p{margin:0 0 1.2em}
ul,ol{padding-left:1.5em;margin:0 0 1.4em}
li{margin:.4em 0}
strong{color:var(--navy)}
code{font-size:.9em;background:var(--paper-2);padding:.1em .35em}
.article{counter-reset:chap}
.article>section[id]:not(#sources){margin-top:56px;counter-increment:chap}
.article>section[id]:not(#sources)>h2::before{content:counter(chap);font-size:.8em;font-weight:500;color:var(--amber-ink);letter-spacing:.04em;min-width:1.1em;flex:none}
.article>section>h2{margin-top:0}
section>h3:first-of-type{margin-top:1.4em}
.article-head{margin-bottom:1.4em}
.meta{font-size:.84rem;color:var(--muted);margin:0 0 .3em;display:flex;flex-wrap:wrap;gap:0 .55em;align-items:center}
.meta .sep{color:var(--line)}
.meta .pr{font-family:var(--font-head);font-weight:700;font-size:.72rem;letter-spacing:.1em;color:var(--amber-ink);border:1px solid var(--amber-line);background:var(--amber-tint);padding:1px 7px;line-height:1.5}
.lead{font-size:1.04rem;line-height:1.9;margin:0}
.answer{color:var(--navy);padding-bottom:1em;margin-bottom:1.2em;border-bottom:1px solid var(--line-2)}
.note{font-size:.9rem;color:var(--muted);border-top:1px dashed var(--line);padding-top:.6em}

/* 結論（要点3行）: 琥珀の細い罫だけで際立たせる余白の広い導入部 */
.tldr{margin:2.2em 0 1.8em;padding:1.2em 1.4em 1.2em 1.5em;border-left:3px solid var(--amber);background:var(--white)}
.tldr h2{margin:0 0 .7em;padding:0;border:0;display:block;font-size:.86rem;letter-spacing:.1em;color:var(--amber-ink)}
.tldr ol{margin:0;padding-left:1.5em}
.tldr li{margin:.55em 0;line-height:1.8}
.tldr li::marker{color:var(--amber-ink);font-weight:700}
.learn{margin:0 0 2.2em}
.learn ul{list-style:none;margin:0;padding:0}
.learn li{position:relative;padding-left:1.3em;margin:.3em 0;font-size:.98rem}
.learn li::before{content:"";position:absolute;left:0;top:.9em;width:.7em;height:1px;background:var(--navy)}

/* 目次 */
.toc{margin:0 0 8px;padding:1em 0 1.1em;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.toc ol{margin:0;padding-left:1.6em;font-size:.95rem;columns:2;column-gap:2.4em}
.toc li{margin:.25em 0;break-inside:avoid}
.toc li::marker{color:var(--amber-ink);font-weight:700}
.toc a{text-decoration-color:transparent;transition:color var(--t-fast) var(--ease)}
.toc a:hover{text-decoration-color:currentColor}
.toc a[aria-current]{color:var(--amber-ink);font-weight:700;text-decoration-color:currentColor}

/* ---------- 表（デスクトップ: 本文幅より広い密度の高い表 / th sticky） ---------- */
.table-wrap{--tw:min(var(--wide),100vw - 40px);width:var(--tw);margin:0 0 1.8em calc(50% - var(--tw)/2);background:var(--white);border:1px solid var(--line)}
table{border-collapse:collapse;width:100%;font-size:.92rem;line-height:1.65}
caption{text-align:left;font-family:var(--font-head);font-weight:700;color:var(--navy);padding:12px 16px;font-size:.9rem;border-bottom:1px solid var(--line);caption-side:top}
th,td{border-top:1px solid var(--line-2);padding:10px 14px;vertical-align:top;text-align:left}
thead th{position:sticky;top:0;z-index:1;background:var(--navy);color:var(--white);border-top:0;font-weight:700;font-family:var(--font-head)}
tbody th{background:var(--paper);width:10em;font-weight:700;color:var(--navy)}
tbody tr>td{transition:background-color var(--t-fast) var(--ease)}
@media (hover:hover) and (pointer:fine){tbody tr:hover>td{background:var(--amber-tint)}}
.t-plain tbody th{width:7em}

/* ---------- FAQ: details/summary（初期は open、本文は隠れない） ---------- */
.faq-item{border-top:1px solid var(--line);margin:0}
.faq-item:last-of-type{border-bottom:1px solid var(--line)}
.faq-item summary{cursor:pointer;list-style:none;position:relative;display:block;padding:.95em 2.4em .95em 0;min-height:44px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"";position:absolute;right:.6em;top:50%;width:9px;height:9px;border-right:2px solid var(--navy);border-bottom:2px solid var(--navy);transform:translateY(-70%) rotate(45deg);transition:transform var(--t-base) var(--ease-out)}
.faq-item[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq-item h3{margin:0;font-size:1.02rem}
.faq-a{padding:0 0 1.1em}
.faq-a p{margin:0}
.faq-item::details-content{height:0;overflow:clip;transition:height var(--t-base) var(--ease-out),content-visibility var(--t-base) allow-discrete}
.faq-item[open]::details-content{height:auto}

/* ---------- CTA ---------- */
.btn{display:inline-flex;align-items:center;gap:.6em;min-height:46px;background:var(--amber);color:var(--navy);text-decoration:none;font-family:var(--font-head);font-weight:700;padding:10px 22px;border:1px solid var(--amber);margin:.2em 0 1em;line-height:1.35;transition:background-color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease-out)}
.btn::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-top:2px solid currentColor;transform:rotate(45deg);flex:none}
.btn:hover{background:var(--amber-hi);border-color:var(--navy);color:var(--navy)}
.btn:active{transform:scale(.98)}
.btn-outline{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn-outline:hover{background:var(--navy);color:var(--white)}
.cta-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:1.2em 0 1.6em}
.cta-card{background:var(--white);border:1px solid var(--line);padding:24px 24px 14px;display:flex;flex-direction:column}
.cta-card h3{margin:0 0 .5em}
.cta-card p{font-size:.95rem;flex:1}
.cta-card .btn{align-self:flex-start}
.cta-final{margin-top:56px;padding-top:1.6em;border-top:1px solid var(--line)}
.cta-final h2{border-left-color:var(--amber)}
.related{margin-top:40px}
.related ul{margin:0;padding-left:1.4em}
.related li{margin:.35em 0}

/* 参考・取得日 */
.refs{margin-top:56px;font-size:.9rem;color:var(--muted)}
.refs h2{font-size:1rem;border-left-color:var(--line);color:var(--navy)}
.sources{list-style:none;padding:0;margin:0 0 1em}
.sources li{display:flex;flex-wrap:wrap;gap:.2em .8em;padding:.5em 0;border-bottom:1px solid var(--line-2);margin:0}
.sources a{color:var(--navy)}
.src-date{color:var(--muted);white-space:nowrap}

/* モバイル固定CTAバー（デスクトップでは出さない） */
.cta-bar{display:none}

/* ---------- top ---------- */
.hero{padding:22px 0 8px;border-bottom:1px solid var(--line);margin-bottom:8px}
.hero h1{font-size:1.9rem;line-height:1.4;margin:.2em 0 .6em}
.hero p{font-size:1.04rem;line-height:1.9;max-width:44em}
.first-know,.cards,.about-short{margin-top:56px}
.ledger{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.ledger li{margin:0;padding:1em 0 1em 2.2em;border-bottom:1px solid var(--line);position:relative;counter-increment:know}
.ledger li::before{content:counter(know);position:absolute;left:0;top:1.05em;font-family:var(--font-head);font-weight:500;color:var(--amber-ink);font-size:.9em}
.ledger strong{display:block;margin-bottom:.15em}
.entries{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.entries li{margin:0}
.entry{display:block;padding:1.1em 2.4em 1.1em 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);position:relative}
.entry::after{content:"";position:absolute;right:.6em;top:50%;width:9px;height:9px;border-right:2px solid var(--navy);border-top:2px solid var(--navy);transform:translateY(-50%) rotate(45deg);transition:transform var(--t-fast) var(--ease-out)}
.entry h3{margin:0 0 .3em;font-size:1.08rem;transition:color var(--t-fast) var(--ease)}
.entry p{margin:0;font-size:.93rem;color:var(--muted)}
@media (hover:hover) and (pointer:fine){.entry:hover h3{color:var(--amber-ink)} .entry:hover::after{transform:translate(3px,-50%) rotate(45deg)}}
.contact-mail{margin:1.4em 0}

/* ---------- footer ---------- */
.site-footer{background:var(--navy);color:#DFE4EE;font-size:.86rem;padding:36px 0 30px;margin-top:20px}
.foot-brand{display:flex;flex-direction:column;font-family:var(--font-head);font-weight:700;color:var(--white);margin:0 0 .8em;line-height:1.2}
.foot-brand .w1{color:#B9C2D6}
.foot-note{line-height:1.75;max-width:60em}
.foot-links{list-style:none;padding:0;margin:1.2em 0;display:flex;flex-wrap:wrap;gap:6px 22px}
.foot-links a{color:var(--white);text-decoration-color:rgba(255,255,255,.5)}
.copy{margin:0;color:#AEB8CC}

/* ---------- 読込時の短いフェード（1回・220ms・下から4px） ---------- */
@keyframes rise{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.article-head h1,.hero h1,.page-head h1{animation:rise 220ms var(--ease-out) both}
.article-head .lead,.hero p{animation:rise 220ms var(--ease-out) 60ms both}

/* ---------- mobile ---------- */
@media (max-width:760px){
  body{font-size:17px}
  .wrap{padding:0 20px}
  main{padding:18px 0 60px}
  h1{font-size:1.4rem}
  .hero h1{font-size:1.5rem}
  h2{font-size:1.18rem}
  .site-nav{display:none}
  .nav-drawer{display:block}
  .site-header .wrap{padding-top:10px;padding-bottom:8px}
  .article>section[id]:not(#sources),.first-know,.cards,.about-short,.cta-final,.refs{margin-top:56px}
  .toc ol{columns:1}
  .cta-grid{grid-template-columns:1fr}
  .cta-card{padding:20px 20px 10px}
  .cta-card .btn{align-self:stretch;justify-content:center}
  .sources li{flex-direction:column;gap:.1em}
  .src-date{white-space:normal}

  /* 表 → カード化。t-cols: 各社1カード（列ごとに縦並び）、t-rows: 各行1カード */
  .table-wrap{border:0;background:transparent;width:100%;margin-left:0}
  table.t-cols{display:grid;grid-template-columns:100%}
  table.t-cols caption,table.t-cols thead,table.t-cols tbody,table.t-cols tr{display:contents}
  table.t-cols caption{display:block;grid-row:1;border:0;padding:0 0 .7em}
  table.t-cols thead th:first-child,table.t-cols tbody th{display:none}
  table.t-cols thead th{grid-column:1;position:static;padding:11px 14px;font-size:1rem}
  table.t-cols thead th:nth-child(2){grid-row:2}
  table.t-cols thead th:nth-child(3){grid-row:var(--nb);margin-top:1.6em}
  table.t-cols td{grid-column:1;display:block;background:var(--white);border:1px solid var(--line);border-top:0;padding:9px 14px 11px}
  table.t-cols td::before{content:attr(data-label);display:block;font-family:var(--font-head);font-size:.78rem;font-weight:700;color:var(--amber-ink);letter-spacing:.04em;margin-bottom:.1em}
  table.t-cols td:nth-child(2){grid-row:var(--ra)}
  table.t-cols td:nth-child(3){grid-row:var(--rb)}
  table.t-rows,table.t-rows caption,table.t-rows tbody,table.t-rows tr,table.t-rows th,table.t-rows td{display:block}
  table.t-rows thead{display:none}
  table.t-rows caption{border:0;padding:0 0 .7em}
  table.t-rows tr{background:var(--white);border:1px solid var(--line);margin:0 0 12px}
  table.t-rows tbody th{width:auto;background:var(--navy);color:var(--white);border-top:0;font-size:1rem}
  table.t-rows td{border-top:1px solid var(--line-2)}
  table.t-rows td::before{content:attr(data-label);display:block;font-family:var(--font-head);font-size:.78rem;font-weight:700;color:var(--amber-ink);letter-spacing:.04em;margin-bottom:.1em}
  table.t-plain{display:block}
  table.t-plain tbody,table.t-plain tr,table.t-plain th,table.t-plain td{display:block}
  table.t-plain tbody th{width:auto;border-top:1px solid var(--line-2);padding-bottom:2px}
  table.t-plain td{border-top:0;padding-top:2px}

  /* 画面下の細いCTAバー（記事ページのみ） */
  body.has-ctabar{padding-bottom:calc(56px + env(safe-area-inset-bottom))}
  .cta-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--navy);padding-bottom:env(safe-area-inset-bottom);
    transform:none;transition:transform 260ms var(--ease-out) 500ms}
  @starting-style{.cta-bar{transform:translateY(100%)}}
  .cta-bar-link{flex:1;display:flex;align-items:center;justify-content:center;gap:.5em;min-height:52px;padding:0 14px;color:var(--white);text-decoration:none;font-family:var(--font-head);font-weight:700;font-size:.92rem}
  .cta-bar-link::after{content:"";width:8px;height:8px;border-right:2px solid var(--amber);border-bottom:2px solid var(--amber);transform:rotate(45deg);flex:none}
  .cta-bar-close{width:52px;border:0;border-left:1px solid rgba(255,255,255,.18);background:transparent;color:var(--white);font-size:1.5rem;line-height:1;cursor:pointer;padding:0}
}
@media (max-width:400px){
  .wrap{padding:0 20px}
  .wordmark .w2{font-size:1.05rem}
}

/* ---------- reduced motion: 全て無効 ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .cta-bar{transition:none}
  .faq-item::details-content{transition:none}
}