*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--fs-m);
    line-height: var(--lh-body);
    color: var(--ink);
    background: var(--paper);
    font-feature-settings: "palt";
}
img { max-width: 100%; height: auto; }
a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration: none; }
h1, h2, h3 { line-height: var(--lh-tight); letter-spacing: 0.01em; margin: 0 0 var(--sp-2); }
ul, ol { padding-left: 1.4em; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--sp-3) var(--sp-6); }
.wrap--narrow { max-width: var(--wrap-narrow); margin: 0 auto; padding: 0 var(--sp-3) var(--sp-6); }
.num { font-variant-numeric: tabular-nums; text-align: right; }
.strong { color: var(--accent); font-weight: 700; }

/* header: 帳簿の表紙のように、紺の下罫1本で締める */
.site-head { background: var(--white); border-bottom: 2px solid var(--brand); }
.site-head__inner { max-width: var(--wrap); margin: 0 auto; padding: var(--sp-2) var(--sp-3);
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.site-head__brand { text-decoration: none; display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; }
.site-head__logo { font-size: var(--fs-l); font-weight: 700; color: var(--brand); letter-spacing: 0.06em; }
.site-head__tag { font-size: var(--fs-xs); color: var(--ink-weak); }
.gnav { list-style: none; display: flex; gap: var(--sp-3); margin: 0; padding: 0; }
.gnav a { font-size: var(--fs-s); text-decoration: none; color: var(--ink); }
.gnav a:hover { color: var(--brand); text-decoration: underline; }

/* footer */
.site-foot { border-top: 1px solid var(--rule); margin-top: var(--sp-6); background: var(--white); }
.site-foot__inner { max-width: var(--wrap); margin: 0 auto; padding: var(--sp-4) var(--sp-3); }
.site-foot__note { font-size: var(--fs-xs); color: var(--ink-weak); max-width: 40em; }
.fnav { list-style: none; display: flex; gap: var(--sp-3); margin: var(--sp-2) 0 0; padding: 0; flex-wrap: wrap; }
.fnav a { font-size: var(--fs-xs); color: var(--ink-weak); }
.site-foot__copy { font-size: var(--fs-xs); color: var(--ink-weak); margin-top: var(--sp-3); }