:root {
  --brown: #5f5953;
  --brown-soft: #625d57;
  --ink: #403b37;
  --rose-deep: #a64f7a;
  --line: rgba(64, 59, 55, 0.16);
  --content: 1080px;
}

body {
  color: var(--brown-soft);
  font-family: "Noto Sans JP", "Yu Gothic", "Yu Gothic UI", "Hiragino Sans", Meiryo, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.015em;
}

.nav,
.breadcrumb,
.eyebrow,
.section-label,
.button,
.chip,
.tag,
.tile-cta {
  font-family: "Noto Sans JP", "Yu Gothic", "Yu Gothic UI", "Hiragino Sans", Meiryo, sans-serif;
}

.brand-name,
h1,
h2,
h3,
.card h3,
.step h3,
.faq-item h3 {
  font-family: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
}

.nav {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.035em;
}

.breadcrumb,
.eyebrow,
.section-label {
  font-weight: 700;
}

.page-hero h1 {
  max-width: 760px;
  font-size: clamp(44px, 5vw, 64px);
  font-weight: 700;
  line-height: 1.34;
  letter-spacing: 0.025em;
}

.page-hero h1 .title-line {
  display: block;
  white-space: nowrap;
}

.page-hero .eyebrow,
.section-label {
  letter-spacing: 0.08em;
}

h2,
.cta-band h2 {
  font-size: clamp(32px, 3.5vw, 42px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

.section-text,
.card p,
.card li,
.step p,
.faq-item p,
.cta-band p {
  color: var(--brown-soft);
  line-height: 1.8;
}

.card h3,
.step h3,
.faq-item h3 {
  color: var(--ink);
  font-family: "Noto Sans JP", "Yu Gothic", "Yu Gothic UI", "Hiragino Sans", Meiryo, sans-serif;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.02em;
}

.card p,
.card li,
.step p,
.faq-item p {
  font-size: 14px;
}

@media (max-width: 920px) {
  .site-header .nav {
    font-size: 13px;
    letter-spacing: 0.035em;
  }

  .site-header .nav a {
    min-height: 42px;
  }
}

@media (max-width: 640px) {
  body {
    font-size: 16px;
    line-height: 1.78;
  }

  .page-hero-inner {
    padding: 50px 0 62px;
  }

  .breadcrumb {
    margin-bottom: 24px;
    font-size: 12px;
  }

  .page-hero h1 {
    max-width: 100%;
    font-size: clamp(30px, 8.6vw, 38px);
    line-height: 1.38;
    letter-spacing: 0.02em;
  }

  h2,
  .cta-band h2 {
    font-size: clamp(27px, 7.2vw, 32px);
    line-height: 1.45;
  }

  .section-label,
  .page-hero .eyebrow {
    font-size: 11px;
    letter-spacing: 0.07em;
  }

  .section-text {
    font-size: 15px;
    line-height: 1.85;
  }

  .card h3,
  .step h3,
  .faq-item h3 {
    font-size: 18px;
    line-height: 1.6;
  }

  .card p,
  .card li,
  .step p,
  .faq-item p {
    font-size: 15px;
    line-height: 1.8;
  }
}