/* ==========================================================================
   Banexco Traders Inc. — css/nihongo.css
   Page-local styles for nihongo.html (§4.9). Linked AFTER css/main.css.
   Additive only: tokens only, no token redefinition, no color literals.
   Scoped to .page-jp (= <main>) so the shared chrome keeps its own type.
   ========================================================================== */

/* All page content in --font-jp (§1). Chrome outside <main> is untouched. */
.page-jp,
.page-jp .btn,
.page-jp .spec-table th[scope="row"] {
  font-family: var(--font-jp);
}

/* Headings on nihongo.html: letter-spacing +0.05em — never negative (§1). */
.page-jp h1,
.page-jp h2,
.page-jp h3 {
  font-family: var(--font-jp);
  letter-spacing: 0.05em;
}

/* --------------------------------------------------------------------------
   Page intro
   -------------------------------------------------------------------------- */
.page-intro {
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.page-intro-sub {
  font-size: 1.125rem;
  max-width: 38rem;
  margin-bottom: 1.6rem;
}
.jp-intro,
.jp-body {
  max-width: 44rem;
}

/* --------------------------------------------------------------------------
   沿革 timeline — mirrors about.html's timeline classes, self-contained
   (no dependency on about.css)
   -------------------------------------------------------------------------- */
.timeline {
  margin: 0;
  max-width: 44rem;
}
.timeline-row {
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: 1rem;
  padding-block: 0.9rem;
  border-top: 1px solid var(--sage);
}
.timeline-row:last-child {
  border-bottom: 1px solid var(--sage);
}
.timeline dt {
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.timeline dd {
  margin: 0;
  color: var(--ink-soft);
}
@media (max-width: 480px) {
  .timeline-row {
    grid-template-columns: 4.5rem 1fr;
  }
}

/* --------------------------------------------------------------------------
   お問い合わせ
   -------------------------------------------------------------------------- */
.jp-contact .btn {
  margin-top: 0.75rem;
}