/* styles.css の最後、または既存CSSの直後に読み込んでください。 */

html,
body {
  max-width: 100%;
  overflow-x: clip;
}

img,
svg {
  max-width: 100%;
}

@media (max-width: 760px) {
  /* `min(100% - 32px, ...)` は無効なCSSなので calc() を使う。 */
  .container,
  .narrow {
    width: calc(100% - 32px);
    min-width: 0;
  }

  .header-inner {
    width: calc(100% - 32px);
    min-width: 0;
  }

  .hero-grid,
  .steps-grid,
  .feature-grid,
  .footer-main {
    min-width: 0;
  }

  .hero-copy,
  .hero-visual,
  .section-heading,
  .feature-card,
  .cta-inner,
  .footer-main > * {
    min-width: 0;
  }

  .hero h1,
  .page-hero h1,
  .section-heading h2,
  .steps-section h2,
  .cta h2,
  .hero-text,
  .section-intro,
  .feature-card p,
  .cta p {
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .primary-nav {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .dashboard-card {
    right: 0;
    width: calc(100% - 14px);
    max-width: calc(100% - 14px);
  }

  .hero-actions {
    align-items: flex-start;
  }

  .hero-actions .button,
  .text-link {
    max-width: 100%;
    white-space: normal;
  }
}

@media (max-width: 430px) {
  .container,
  .narrow,
  .header-inner {
    width: calc(100% - 24px);
  }

  .hero h1,
  .page-hero h1 {
    font-size: clamp(32px, 9vw, 38px);
    letter-spacing: -1.5px;
  }

  .hero-actions .button {
    width: 100%;
  }

  .hero-visual {
    width: 100%;
    overflow: hidden;
  }
}