/* Page-identifying H1 text is visible and does not depend on JavaScript. */
.hero h1 .hero-heading-context {
  display: block;
  margin-bottom: 20px;
  max-width: 100%;
  color: var(--paper, #f4f1ec);
  font-family: var(--sans, 'Noto Sans JP', sans-serif);
  font-size: clamp(12px, 1.2vw, 17px);
  font-weight: 600;
  line-height: 1.9;
  letter-spacing: .04em;
  white-space: normal;
  overflow-wrap: anywhere;
}

.hero h1 .hero-heading-roles {
  display: block;
  font-size: .85em;
  font-weight: 500;
  letter-spacing: .03em;
}

.salon-hero h1 .salon-heading-context {
  display: block;
  max-width: 100%;
  margin-top: 20px;
  color: var(--salon-ink, #252420);
  font-family: var(--salon-sans, 'Noto Sans JP', sans-serif);
  font-size: clamp(12px, 1.15vw, 17px);
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: .04em;
  white-space: normal;
  overflow-wrap: anywhere;
}

@media (max-width: 680px) {
  .hero h1 .hero-heading-context {
    margin-bottom: 16px;
    font-size: 12px;
    letter-spacing: .02em;
  }

  .salon-hero h1 .salon-heading-context {
    margin-top: 16px;
    font-size: 12px;
    letter-spacing: .02em;
  }
}