@layer components {
  /* skip-link */
  .skip-link {
    position: absolute;
    inset-inline-start: 1rem;
    inset-block-start: 1rem;
    padding: 0.5rem 1rem;
    background: var(--color-brand);
    color: var(--color-white);
    border-radius: var(--radius-sm);
    font-weight: 700;
    transform: translateY(-200%);
    transition: transform 0.2s;
    z-index: 9999;
  }

  .skip-link:focus-visible {
    transform: translateY(0);
  }

  /* ---- Buttons ---- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem; /* 10px */
    padding-inline: var(--space-5);
    padding-block: 0.625rem;
    border-radius: var(--radius-full);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: opacity 0.2s;
  }

  @media (prefers-reduced-motion: no-preference) {
    .btn {
      transition: opacity 0.2s, transform 0.2s;
    }

    .btn:hover {
      opacity: 0.85;
      transform: translateY(-1px);
    }
  }

  .btn--line {
    background-color: var(--color-line);
    color: var(--color-white);
  }

  .btn--mail {
    background-color: var(--color-brand);
    color: var(--color-white);
  }

  .btn--tel {
    background-color: var(--color-brand-mid);
    color: var(--color-white);
  }

  .btn--lg {
    font-size: 1rem;
    padding-inline: var(--space-7);
    padding-block: 0.875rem;
    min-width: 14.5rem; /* 232px */
  }

  /* ---- Section heading ---- */
  .section-head {
    text-align: center;
  }

  .section-head__en {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--font-serif);
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--color-brand-mid);
    margin-block-end: 0.75rem;
  }

  .section-head__ja {
    font-family: var(--font-sans);
    font-size: var(--text-3xl);
    font-weight: 900;
    line-height: 1;
    color: var(--color-brand);
  }
}
