/* base.css — リセットと文字の基本。装飾(縁取り・光彩・強い影)は使わない */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-base);
  font-weight: var(--fw-medium);
  font-size: var(--fs-body);
  line-height: 1.9;
  color: var(--c-text);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { color: var(--c-charcoal); line-height: 1.4; margin: 0 0 calc(var(--space) * 2); text-align: left; }
p, ul, ol, table { margin: 0 0 calc(var(--space) * 2); }
ul, ol { padding-left: 1.4em; }
button { font-family: inherit; }
:focus-visible { outline: 2px solid var(--c-charcoal); outline-offset: 2px; }

/* 見出しは「太く、大きく、短く」 */
.c-heading-page { font-size: var(--fs-h1); font-weight: var(--fw-black); }
.c-heading-lg   { font-size: var(--fs-h2); font-weight: var(--fw-black); }
.c-heading-md   { font-size: var(--fs-h3); font-weight: var(--fw-bold); }
.c-heading-sm   { font-size: var(--fs-body); font-weight: var(--fw-bold); }
.c-lead { font-size: 16px; max-width: 40em; }
.c-note { font-size: var(--fs-small); color: var(--c-text); }
.c-prose h2 { font-size: var(--fs-h3); margin-top: calc(var(--space) * 5); }
.c-prose a { text-decoration: underline; }