/* =========================================================
   responsive.css — ブレークポイント設計
   - ~1200px : コンテナを画面幅に追従
   - ~1024px : タブレット。グローバルナビ→ハンバーガーへ集約
   - ~768px  : SP。1カラム化・ドロワー・CTAをドロワーへ
   - ~480px  : 小型SP。1カラム徹底
   ========================================================= */

/* ===== ワイド〜中間：コンテナ追従 ===== */
@media (max-width: 1180px) {
  :root { --container: 100%; }
  .sk-layout { gap: 32px; }
}

/* ===== タブレット ===== */
@media (max-width: 1024px) {
  :root { --sidebar-w: 220px; --header-h: 72px; }

  .sk-gnav { display: none; }              /* PCナビは隠してドロワーへ集約 */
  .sk-hamburger { display: block; }
  .sk-header__logo img { width: 168px; }

  .sk-cards--4 { grid-template-columns: repeat(2, 1fr); }
  .sk-sitemap__list { grid-template-columns: repeat(2, 1fr); }
  .sk-sec__title { font-size: 1.35rem; }
  .sk-hero__title { font-size: 1.7rem; }
}

/* ===== SP ===== */
@media (max-width: 768px) {
  .sk-header__cta { display: none; }       /* ヘッダーCTAはドロワー内に移動 */
  .sk-header__inner { gap: 12px; padding: 0 16px; }

  /* 1カラム化：本文を上、サイドバーを下へ */
  .sk-layout { grid-template-columns: 1fr; gap: 24px; padding: 24px 16px; }
  .sk-sidebar { position: static; order: 2; }
  .sk-main { order: 1; }

  /* セクション内の段組みを縦積みに */
  .sk-hero__copy { padding: 24px 16px; }
  .sk-hero__title { font-size: 1.4rem; }
  .sk-media, .sk-media--reverse .sk-media__img { grid-template-columns: 1fr; order: 0; }
  .sk-troubles__list,
  .sk-cards--3, .sk-cards--4 { grid-template-columns: 1fr; }
  .sk-flow__item { grid-template-columns: 1fr; }
  .sk-sec--soft { margin: 0 -16px; padding: 32px 16px; border-radius: 0; }

  .sk-footer__inner { grid-template-columns: 1fr 1fr; gap: 20px; padding: 32px 16px; }
  .sk-sitemap__list { grid-template-columns: 1fr; }
  .sk-pagehead__inner { padding: 20px 16px; }
  .sk-pagehead__title { font-size: 1.4rem; }

  /* ── ハンバーガードロワー ── */
  .sk-drawer {
    display: block; position: fixed; inset: var(--header-h) 0 0 auto;
    width: min(82%, 320px); max-height: calc(100vh - var(--header-h));
    background: #fff; box-shadow: -4px 0 16px rgba(0,0,0,.15);
    transform: translateX(100%); transition: transform .25s ease;
    overflow-y: auto; z-index: 200;
  }
  .sk-drawer.is-open { transform: translateX(0); }
  .sk-drawer[hidden] { display: block; }   /* hidden属性はJSで外すが保険 */
  .sk-drawer__list li a { display: block; padding: 14px 20px; border-bottom: 1px solid var(--c-line); }

  /* 背景オーバーレイ */
  .sk-drawer__backdrop {
    display: block; position: fixed; inset: var(--header-h) 0 0 0;
    background: rgba(0,0,0,.4); opacity: 0; visibility: hidden;
    transition: opacity .25s, visibility .25s; z-index: 150;
  }
  .sk-drawer__backdrop.is-open { opacity: 1; visibility: visible; }
  .sk-drawer__backdrop[hidden] { display: block; }

  body.sk-drawer-open { overflow: hidden; }
}

/* ===== 小型SP ===== */
@media (max-width: 480px) {
  .sk-troubles__list { grid-template-columns: 1fr; }
  .sk-footer__inner { grid-template-columns: 1fr; }
  .sk-hero__cta { flex-direction: column; }
  .sk-hero__cta .sk-btn { width: 100%; }
  .sk-symptom__cta { flex-direction: column; }
  .sk-symptom__cta .sk-btn { width: 100%; }
  .sk-access__table th { width: 90px; }
  .sk-pricetable th, .sk-pricetable td { padding: 10px; }
}