
/* Hallmark · genre: editorial · macrostructure: Long Document · theme: custom
 * vibe: 和紙・官報・藍墨・生成り · paper oklch(97% 0.008 85) · accent oklch(42% 0.10 262) indigo
 * display: Shippori Mincho · body: Noto Sans JP · enrichment: none · nav: N1a · footer: Ft4 colophon
 * axes: light / classical-serif / cool · audience: 55-70歳 相続当事者(スマホ・低中リテラシー)
 * Hallmark · pre-emit critique: P4 H4 E4 S4 R5 V4 */
:root {
  --color-paper:   oklch(97% 0.008 85);
  --color-paper-2: oklch(94% 0.010 85);
  --color-rule:    oklch(84% 0.010 85);
  --color-neutral: oklch(48% 0.010 85);
  --color-muted:   oklch(40% 0.010 80);
  --color-ink:     oklch(22% 0.012 80);
  --color-accent:  oklch(42% 0.10 262);
  --color-accent-wash: oklch(94% 0.018 262);
  --color-focus:   oklch(50% 0.14 262);
  --color-alert:   oklch(46% 0.15 30);
  --color-warn:    oklch(50% 0.12 70);
  --color-ok:      oklch(45% 0.09 155);
  --color-ondark:  oklch(97% 0.005 85);
  --font-display: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-body: "Noto Sans JP", -apple-system, "Hiragino Sans", sans-serif;
  --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px;
  --space-xl: 36px; --space-2xl: 56px; --space-3xl: 84px;
  --text-body: 1.0625rem; --text-sm: .875rem; --text-lg: 1.25rem;
  --text-h1: clamp(1.55rem, 4.6vw, 2rem); --text-h2: 1.3rem;
  --rule: 1px solid var(--color-rule);
  --ease-out: cubic-bezier(.22,.61,.36,1); --dur: 160ms;
}
* { box-sizing:border-box; margin:0; padding:0; }
html, body { overflow-x:clip; }
body { font-family:var(--font-body); font-size:var(--text-body); line-height:1.9;
       color:var(--color-ink); background:var(--color-paper);
       -webkit-font-smoothing:antialiased; }
header { background:var(--color-paper); border-bottom:var(--rule); padding:14px 18px; }
.hwrap { max-width:760px; margin:0 auto; display:flex; justify-content:space-between;
       align-items:center; gap:var(--space-md); }
.brand { font-family:var(--font-display); font-weight:700; font-size:1.15rem;
       color:var(--color-ink); text-decoration:none; letter-spacing:.04em; }
.brand::before { content:""; display:inline-block; width:.6em; height:.6em;
       background:var(--color-accent); margin-right:.55em; }
.hcta { font-size:.95rem; font-weight:700; color:var(--color-accent);
       border:1.5px solid var(--color-accent); padding:9px 16px; text-decoration:none;
       white-space:nowrap; transition:background var(--dur) var(--ease-out); }
.hcta:hover { background:var(--color-accent-wash); }
main { max-width:760px; margin:0 auto; padding:var(--space-xl) 18px var(--space-3xl); }
h1 { font-family:var(--font-display); font-weight:700; font-style:normal;
     font-size:var(--text-h1); line-height:1.6; letter-spacing:.02em;
     margin:var(--space-md) 0; overflow-wrap:anywhere; min-width:0; }
h2 { font-family:var(--font-display); font-weight:700; font-style:normal;
     font-size:var(--text-h2); line-height:1.6; margin:var(--space-2xl) 0 var(--space-md); }
h2::before { content:""; display:inline-block; width:.5em; height:.5em;
     background:var(--color-accent); margin-right:.5em; vertical-align:.08em; }
p { margin:var(--space-md) 0; }
ul,ol { margin:var(--space-md) 0 var(--space-md) 1.5em; }
li { margin:var(--space-sm) 0; }
li::marker { color:var(--color-neutral); }
a { color:var(--color-accent); text-decoration:underline;
    text-underline-offset:.2em; text-decoration-thickness:1px; }
a:hover { text-decoration-thickness:2px; }
strong { font-weight:700; }
.lede { color:var(--color-muted); }
.card { background:var(--color-paper); border:var(--rule); border-top:2px solid var(--color-ink);
        padding:var(--space-lg); margin:var(--space-lg) 0; }
.tool { background:var(--color-paper); border:1.5px solid var(--color-ink);
        padding:var(--space-lg); margin:var(--space-xl) 0; position:relative; }
.tool::before { content:"確認票"; position:absolute; top:-0.85em; left:var(--space-lg);
        background:var(--color-paper); padding:0 .6em; font-size:var(--text-sm);
        letter-spacing:.35em; color:var(--color-neutral); }
.tool label, form label { display:block; font-weight:700; margin:var(--space-lg) 0 var(--space-xs);
        font-size:var(--text-body); }
.tool input[type=month], .tool select, form input[type=text], form input[type=email],
form input[type=tel], form select, form textarea {
       width:100%; padding:13px 14px; border:var(--rule); border-radius:0;
       font-size:var(--text-body); font-family:inherit; background:var(--color-paper);
       color:var(--color-ink); min-height:50px; }
form textarea { min-height:96px; }
.tool select, form select { appearance:none; -webkit-appearance:none;
       background-image:linear-gradient(45deg, transparent 50%, var(--color-neutral) 50%),
                        linear-gradient(135deg, var(--color-neutral) 50%, transparent 50%);
       background-position:calc(100% - 20px) 50%, calc(100% - 14px) 50%;
       background-size:6px 6px; background-repeat:no-repeat; }
input:focus-visible, select:focus-visible, textarea:focus-visible,
.btn:focus-visible, a:focus-visible {
       outline:2px solid var(--color-focus); outline-offset:2px; }
.btn { display:inline-block; background:var(--color-ink); color:var(--color-ondark);
       padding:15px 28px; min-height:52px; text-decoration:none; font-weight:700;
       border:1.5px solid var(--color-ink); font-size:var(--text-body);
       font-family:inherit; cursor:pointer; border-radius:0;
       transition:background var(--dur) var(--ease-out); }
.btn:hover { background:var(--color-muted); }
.btn:active { transform:translateY(1px); }
.btn:disabled { opacity:.45; cursor:not-allowed; }
.btn.second { background:var(--color-paper); color:var(--color-accent);
       border:1.5px solid var(--color-accent); }
.btn.second:hover { background:var(--color-accent-wash); }
.result { display:none; margin-top:var(--space-lg); border-top:var(--rule);
       padding-top:var(--space-md); }
.badge { display:inline-block; padding:5px 16px; font-size:.95rem; font-weight:700;
       color:var(--color-ondark); border-radius:0; }
.badge.alert { background:var(--color-alert); } .badge.warn { background:var(--color-warn); }
.badge.ok { background:var(--color-ok); }
.bignum { font-family:var(--font-display); font-size:1.7rem; font-weight:700; }
.cta { background:var(--color-paper-2); border-left:3px solid var(--color-accent);
       padding:var(--space-lg); margin:var(--space-xl) 0; }
.cta .btn { margin-top:var(--space-sm); }
.note { font-size:var(--text-sm); color:var(--color-neutral); line-height:1.8; }
footer { border-top:2px solid var(--color-ink); margin-top:var(--space-3xl);
       padding:var(--space-lg) 20px var(--space-2xl); font-size:var(--text-sm);
       color:var(--color-neutral); max-width:760px; margin-left:auto; margin-right:auto; }
footer nav { margin-bottom:var(--space-md); display:flex; flex-wrap:wrap;
       gap:var(--space-xs) var(--space-lg); }
footer nav a { color:var(--color-muted); }
.articlelist { list-style:none; margin:0; }
.articlelist li { border-bottom:var(--rule); padding:var(--space-md) 0; margin:0; }
.articlelist li:first-child { border-top:var(--rule); }
.articlelist a { font-family:var(--font-display); font-weight:700;
       font-size:var(--text-lg); color:var(--color-ink); text-decoration:none; line-height:1.6; }
.articlelist a:hover { color:var(--color-accent); text-decoration:underline; }
.articlelist p { margin:var(--space-xs) 0 0; font-size:var(--text-sm);
       color:var(--color-neutral); }
article h2 { margin-top:var(--space-2xl); }
.grid2 { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
       gap:0 var(--space-md); }
dl dt { font-weight:700; margin-top:var(--space-md); }
dl dd { margin:0 0 var(--space-sm); }
@media (max-width:600px){ .grid2 { grid-template-columns:minmax(0,1fr); } }
@media (prefers-reduced-motion: reduce){ * { transition:none !important; } }
