:root {
  --font-display: "Avenir Next", "Helvetica Neue", "Hiragino Sans", "Yu Gothic", sans-serif;
  --font-body: "Hiragino Sans", "Yu Gothic", "Noto Sans JP", "Helvetica Neue", sans-serif;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: 0.035em;
  font-feature-settings: "palt" 1;
}

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

.wordmark,
.nav,
.header-contact,
.label,
.service-en,
.visual-index,
.hero-visual p,
.numbers strong,
.case-grid span {
  font-family: var(--font-display);
}

.wordmark {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.035em;
}

.nav,
.header-contact {
  font-weight: 500;
  letter-spacing: 0.14em;
}

.label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3em;
}

.hero h1,
.statement h2,
.section-head h2,
.approach h2,
.contact h2,
.service h3,
.case-grid h3 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.035em;
}

.hero h1 {
  line-height: 1.2;
}

.hero h1 > span,
.hero h1 > em,
.hero-lead > span {
  display: block;
}

.hero h1 > span,
.hero h1 > em,
.statement h2,
.section-head h2,
.approach h2,
.contact h2,
.service h3,
.case-grid h3 {
  text-wrap: balance;
  word-break: keep-all;
}

.statement-grid p,
.service-copy > p:not(.service-en),
.case-grid p,
.approach div > p,
.contact > p:not(.label) {
  overflow-wrap: break-word;
  word-break: auto-phrase;
}

.hero h1 em {
  font-weight: 400;
}

.hero-lead,
.statement-grid,
.service-copy > p:not(.service-en),
.approach div > p,
.contact > p:not(.label) {
  font-weight: 400;
  letter-spacing: 0.04em;
}

.arrow-link,
.service li {
  font-weight: 500;
  letter-spacing: 0.075em;
}

.numbers strong {
  font-weight: 500;
  letter-spacing: -0.045em;
}

.numbers span,
.case-grid p,
.case-note,
.numbers-note,
footer p,
footer small {
  letter-spacing: 0.055em;
}

@media (max-width: 560px) {
  body {
    letter-spacing: 0.02em;
  }

  .hero h1 {
    font-size: 40px;
    line-height: 1.24;
  }
}