/* ==========================================================================
   responsive.css - タブレット / スマートフォン対応
   ブレークポイント: 1100px(メニュー) / 1024px(タブレット) / 640px(スマホ)
   ========================================================================== */

/* ===== ハンバーガーメニューへの切替 (〜1100px) =====
   メニュー項目が多いため、横並びが窮屈になる幅で早めにメニュー化します。 */
@media (max-width: 1100px) {
  .nav-toggle { display: block; }
  .nav {
    position: fixed;
    inset: 0;
    flex-direction: column;
    justify-content: center;
    gap: 2.5rem;
    /* 半透明＋背景ぼかし。背面のコンテンツが見えつつ、文字は読みやすく
       （透け具合は下の 0.63 の数値で調整してください。
         小さくすると背景がよく見え、大きくすると濃くなります） */
    background-color: rgba(10, 13, 12, 0.63);
    backdrop-filter: blur(13px) saturate(120%);
    -webkit-backdrop-filter: blur(13px) saturate(120%);
    transform: translateX(100%);
    transition: transform 0.5s var(--ease);
    padding: 2rem;
    overflow-y: auto;
  }
  /* backdrop-filter 非対応ブラウザでは不透明度を上げて可読性を確保 */
  @supports not (backdrop-filter: blur(1px)) {
    .nav { background-color: rgba(10, 13, 12, 0.93); }
  }
  .theme-light .nav { background-color: rgba(247, 248, 246, 0.71); }

  /* 背景が透けるぶん、文字は影を強めにして可読性を確保 */
  .nav__link {
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9), 0 0 14px rgba(0, 0, 0, 0.6);
  }
  .theme-light .nav__link {
    text-shadow: 0 1px 4px rgba(255, 255, 255, 0.9), 0 0 14px rgba(255, 255, 255, 0.6);
  }

  /* 閉じる(×)ボタンの視認性を確保：背後に暗い円を敷き、線にも影を付ける */
  .nav-toggle.is-open::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    background-color: rgba(10, 13, 12, 0.7);
    z-index: -1;
  }
  .nav-toggle.is-open span {
    background-color: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
  }
  .nav.is-open { transform: translateX(0); }
  .nav__list {
    flex-direction: column;
    gap: 1.4rem;
    text-align: center;
  }
  .nav__link { font-size: 1.1rem; }
  .nav .btn { width: auto; }
}

/* ===== タブレット (〜1024px) ===== */
@media (max-width: 1024px) {
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .case-grid     { grid-template-columns: repeat(2, 1fr); }

  .flow { grid-template-columns: repeat(2, 1fr); }
  .flow-step:nth-child(2)::after { display: none; }

  .concept__grid { grid-template-columns: 1fr; }
  .concept__figure { aspect-ratio: 16 / 10; max-height: 460px; }

  .service-main  { grid-template-columns: 1fr; }
  .contact__grid { grid-template-columns: 1fr; }
}

/* ===== スマートフォン (〜640px) ===== */
@media (max-width: 640px) {
  :root { --header-h: 66px; --logo-h: 30px; }

  .nav__list { gap: 1.2rem; }
  .nav__link { font-size: 1.05rem; }

  /* --- セクション共通 --- */
  .features-grid,
  .case-grid,
  .scene-cards,
  .pricing-grid,
  .flow { grid-template-columns: 1fr; }

  .flow-step::after { display: none !important; }

  .footer__top { grid-template-columns: 1fr; gap: 1.8rem; }

  .form__row--split { grid-template-columns: 1fr; }
  .stats { gap: 0.5rem; }

  /* CTAボタンを横幅いっぱいに */
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }
  .sample-cta .btn,
  .page-hero .btn { width: 100%; max-width: 360px; }

  .breadcrumb { font-size: 0.72rem; }
}

/* ===== 小型スマホ (〜380px) ===== */
@media (max-width: 380px) {
  .spec-table th { width: 40%; white-space: normal; }
}