/* ============================================================
   レスポンシブ調整
   ブレイクポイント: 1024px(ノートPC) / 767px(スマホ)
   ============================================================ */

/* ------------------------------------------------------------
   ノートPC・タブレット(〜1024px)
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
  .sec-title { font-size: 28px; }
  .hero-title { font-size: 36px; }

  .scene-grid { grid-template-columns: repeat(3, 1fr); }
  .flow-list { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .reason-grid { grid-template-columns: repeat(2, 1fr); }
  .steps-grid { grid-template-columns: repeat(2, 1fr); }

  /* ナビは項目が多いため1024px以下でハンバーガーに切替 */
  .menu-toggle { display: block; }

  .global-nav {
    position: fixed;
    top: 0;
    right: 0;
    width: min(320px, 84vw);
    height: 100vh;
    height: 100dvh;
    background: #fff;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 100px 32px 40px;
    box-shadow: -4px 0 24px rgba(43, 43, 51, 0.12);
    transform: translateX(100%);
    transition: transform 0.35s ease;
    overflow-y: auto;
  }

  .global-nav.is-open {
    transform: translateX(0);
  }

  .global-nav-list {
    flex-direction: column;
    gap: 0;
    width: 100%;
  }

  .global-nav-list li {
    border-bottom: 1px solid var(--color-line);
  }

  .global-nav-list a {
    display: block;
    padding: 16px 4px;
    font-size: 15px;
  }

  .global-nav-cta {
    width: 100%;
    margin-top: 24px;
  }

  .global-nav-cta .btn {
    display: block;
    width: 100%;
  }
}

/* ------------------------------------------------------------
   スマホ(〜767px)
   ------------------------------------------------------------ */
@media (max-width: 767px) {
  :root {
    --header-height: 64px;
  }

  html { scroll-padding-top: 72px; }

  .sp-only { display: inline; }

  .section { padding: 64px 0; }
  .inner { padding: 0 20px; }

  .sec-head { margin-bottom: 36px; }
  .sec-title { font-size: 24px; }

  .site-logo-en { font-size: 18px; }

  /* ヘッダー内CTAは固定バーがあるため簡略化 */
  .header-inner { gap: 16px; }

  /* ヒーロー */
  .hero { min-height: 88vh; }

  .hero-content {
    padding: 110px 0 90px;
  }

  .hero-title {
    font-size: 30px;
  }

  .hero-lead { font-size: 15px; }

  .hero-buttons .btn {
    width: 100%;
  }

  .hero-badges { flex-wrap: wrap; }

  .page-hero { padding: 56px 0; }
  .page-hero-title { font-size: 26px; }

  /* グリッドを1〜2カラムへ */
  .problem-columns { grid-template-columns: 1fr; gap: 20px; }
  .problem-card { padding: 28px 24px; }

  .steps-grid { grid-template-columns: 1fr; gap: 16px; }
  .reason-grid { grid-template-columns: 1fr; gap: 16px; }
  .digest { grid-template-columns: 1fr; gap: 32px; }
  .scene-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .usage-grid { grid-template-columns: 1fr; gap: 16px; }
  .value-grid { grid-template-columns: 1fr; gap: 14px; }
  .case-grid { grid-template-columns: 1fr; gap: 16px; }
  .flow-list { grid-template-columns: repeat(2, 1fr); gap: 12px; }

  .digest-title { font-size: 24px; }

  .price-box { padding: 36px 24px; }

  .cta-final { padding: 64px 0; }
  .cta-final-title { font-size: 26px; }

  .cta-final-buttons {
    flex-direction: column;
  }

  .cta-final-buttons .btn {
    width: 100%;
  }

  /* フッター */
  .footer-top {
    flex-direction: column;
    gap: 32px;
  }

  /* スマホでは固定CTAバーを表示し、フッターに余白を確保 */
  .fixed-cta { display: flex; }
  .site-footer { padding-bottom: 140px; }

  /* フォーム */
  .form-progress-item { padding: 8px 20px; font-size: 13px; }

  .confirm-table th,
  .confirm-table td {
    display: block;
    width: 100%;
  }

  .confirm-table th {
    padding-bottom: 8px;
    border-bottom: none;
  }

  .confirm-table td {
    padding-top: 0;
  }

  .confirm-buttons {
    flex-direction: column;
  }

  .confirm-buttons .btn { width: 100%; }

  .doc-table th,
  .doc-table td {
    display: block;
    width: 100%;
  }

  .notfound-code { font-size: 64px; }
}

/* ------------------------------------------------------------
   デスクトップ大画面(1440px〜)
   ------------------------------------------------------------ */
@media (min-width: 1440px) {
  .hero-content { max-width: 720px; }
  .hero-title { font-size: 50px; }
}