:root {
  --rule: 1px solid color-mix(
    in srgb,
    var(--color-accent) 30%,
    transparent
  );
}

html:lang(ja) {
  line-break: strict;
  word-break: normal;
  overflow-wrap: anywhere;
}

body {
  font-size: 16px;
  line-height: 1.9;
}

p,
li,
dd {
  text-wrap: pretty;
}

.nb {
  white-space: nowrap;
}

main {
  max-width: 820px;
  margin: 0 auto;
  padding:
    clamp(120px, 14vh, 150px)
    clamp(20px, 4vw, 56px)
    clamp(80px, 12vh, 120px);
}

main h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.3;
  letter-spacing: 0.06em;
  color: var(--color-text-heading);
}

.lead {
  margin-top: clamp(20px, 3vw, 32px);
  color: var(--color-text-body);
}

main section {
  margin-top: clamp(36px, 5vw, 56px);
  padding-top: clamp(24px, 3vw, 32px);
  border-top: var(--rule);
}

main h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(18px, 2.2vw, 22px);
  letter-spacing: 0.04em;
  color: var(--color-text-heading);
  margin-bottom: 14px;
}

main section p + p,
main section ul,
main section ol {
  margin-top: 12px;
}

main ul,
main ol {
  padding-left: 1.4em;
}

main li {
  margin-top: 6px;
}

main dl {
  margin-top: 12px;
}

main dl div {
  display: grid;
  grid-template-columns: 8em minmax(0, 1fr);
  gap: 8px 20px;
  padding: 10px 0;
  border-bottom: 1px solid color-mix(
    in srgb,
    var(--color-accent) 16%,
    transparent
  );
}

main dt {
  color: var(--color-text-muted);
  font-size: 14px;
}

.revised {
  margin-top: clamp(36px, 5vw, 56px);
  font-size: 14px;
  color: var(--color-text-muted);
}

@media (max-width: 640px) {
  main dl div {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}