/* ─────────────────────────────────────
   レスポンシブ対応
   ブレークポイント: 768px 以下をモバイル扱い
   ───────────────────────────────────── */

html, body { overflow-x: hidden; }

/* ステージは既に max-width 1100 + width 100% で対応 */
.site-stage > div {
  /* 各バリアントは固定幅で書かれているが、コンテナを 100% にして縮小 */
  max-width: 100%;
}

/* 各 variant のルート div は inline style で width:1100px を持つ。
   これを 100% に上書きして縮小 */
.site-stage > div > div[style*="1100px"],
.site-stage > div > div[style*="width: 1100"] {
  width: 100% !important;
  max-width: 1100px;
}

/* ─────────────────────────────────────
   タブレット〜スマホ共通の流動化
   1100px より狭い時は max-width で素直に縮小
   ───────────────────────────────────── */
@media (max-width: 1100px) {
  /* セクションの内側パディングを段階的に縮める */
  .site-stage section,
  .site-stage header,
  .site-stage footer {
    padding-left: clamp(16px, 4vw, 48px) !important;
    padding-right: clamp(16px, 4vw, 48px) !important;
  }
}

/* ─────────────────────────────────────
   モバイル（768px以下）— 1カラムに
   ───────────────────────────────────── */
@media (max-width: 768px) {

  /* すべての 2〜3カラムグリッドを 1カラムに */
  .site-stage [style*="gridTemplateColumns"],
  .site-stage [style*="grid-template-columns"] {
    /* JS で書かれた inline style は CSS で上書き必要 */
  }

  /* data-属性やクラス指定がない inline grid を強制 1 カラム化 */
  .site-stage div[style*="grid-template-columns"]:not([data-keep-grid]) {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* ヒーローの巨大見出しを clamp で縮める */
  .site-stage h1 {
    font-size: clamp(34px, 9vw, 48px) !important;
    line-height: 1.4 !important;
  }
  .site-stage h2 {
    font-size: clamp(20px, 5vw, 28px) !important;
    line-height: 1.4 !important;
  }
  .site-stage h3 {
    font-size: clamp(16px, 4vw, 20px) !important;
  }

  /* PC専用の <br data-pc-only> はモバイルで無効化（h1 改行は他は維持） */
  .site-stage br[data-pc-only] {
    display: none !important;
  }
  /* h1/h2 内の絶対配置のアンダーライン装飾はモバイルで非表示（折り返しで浮いて見えるため） */
  .site-stage h1 svg[style*="absolute"],
  .site-stage h2 svg[style*="absolute"] {
    display: none !important;
  }

  /* モバイルで明示的に隠したい要素（鍵盤フレーム・写真など）*/
  .site-stage [data-mobile-hide] {
    display: none !important;
  }

  /* kids/adults では写真コンテナを非表示にし、音符装飾は data-hero-visual 内に残す */
  .site-stage [data-hero-visual] {
    min-height: 0 !important;
  }

  /* セクションの上下パディングを縮小 */
  .site-stage section {
    padding-top: clamp(40px, 10vw, 80px) !important;
    padding-bottom: clamp(40px, 10vw, 80px) !important;
  }

  /* ヘッダーのナビは非表示にしてハンバーガーを表示 */
  .site-stage [data-nav-desktop] {
    display: none !important;
  }
  .site-stage [data-nav-mobile] {
    display: flex !important;
  }

  /* ヘッダー余白縮小・ロゴが改行されないようにする */
  .site-stage header {
    padding: 14px 16px !important;
    gap: 8px !important;
  }
  .site-stage header > div:first-child {
    flex-shrink: 0 !important;
  }
  .site-stage header [style*="Quicksand"] {
    white-space: nowrap !important;
    font-size: 18px !important;
  }

  /* ヘッダーの体験レッスンボタンはモバイルで非表示（ハンバーガー内に同等リンクあり） */
  .site-stage header > a[href*="lin.ee"] {
    display: none !important;
  }

  /* 大きい絶対配置の装飾シェイプを縮小 */
  .site-stage [data-decor-blob] {
    transform: scale(0.5) !important;
    transform-origin: top right !important;
    opacity: 0.5 !important;
  }

  /* 講師紹介の固定320px列をなくす（=1fr化は上のルールで対応済み） */
  .site-stage [data-instructor-photo] {
    max-width: 280px;
    margin: 0 auto;
  }

  /* テスティモニアルの回転を弱める */
  .site-stage [data-testimonial] {
    transform: none !important;
  }

  /* フッター3カラム → 縦積み */
  .site-stage .footer-cols {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .site-stage footer {
    padding: 32px 20px 20px !important;
  }
  .site-stage footer > div:last-child {
    flex-direction: column !important;
    gap: 8px !important;
    text-align: center !important;
  }

  /* h1 内の <br> 後の長い1行が画面幅を超えないように */
  .site-stage h1,
  .site-stage h2,
  .site-stage h3 {
    word-break: keep-all;
    overflow-wrap: anywhere;
  }

  /* width: max-content で書かれた見出しを 100% に強制 */
  .site-stage h1[style*="max-content"],
  .site-stage h2[style*="max-content"] {
    width: 100% !important;
    max-width: 100% !important;
  }
  /* white-space: nowrap で1行強制されている spanを許容 */
  .site-stage h1 span[style*="nowrap"] {
    white-space: normal !important;
  }

  /* HandUnderline などの h1/h2 内の絶対配置 SVG: 文字幅に追従させる */
  .site-stage h1 svg,
  .site-stage h2 svg {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
  }
  /* span 直下に絶対配置されたアンダーラインは、span 幅に追従させる */
  .site-stage h1 span > svg[style*="absolute"],
  .site-stage h2 span > svg[style*="absolute"] {
    width: 100% !important;
    left: 0 !important;
  }

  /* HEROの装飾 blob（絶対配置の大きい円）— モバイルでも残し、世界観を維持
     ただし大きすぎてはみ出す場合は scale を抑える */
  .site-stage [data-hero] > div[style*="absolute"][style*="border-radius"],
  .site-stage [data-hero] > div[style*="absolute"][style*="borderRadius"] {
    transform: scale(0.85) !important;
    transform-origin: top right !important;
    opacity: 0.55 !important;
  }

  /* HEROの最小高さを解除 — section 直下のあらゆる min-height をリセット */
  .site-stage section,
  .site-stage section > div,
  .site-stage section > div > div {
    min-height: 0 !important;
  }

  /* HERO 内のグリッドアイテムは全体幅を超えない */
  .site-stage section > div > div {
    min-width: 0 !important;
    max-width: 100%;
  }

  /* HEROの右側ビジュアル（鍵盤・写真）はモバイルで中央寄せ・最大幅を絞る */
  .site-stage section img,
  .site-stage section svg {
    max-width: 100%;
    height: auto;
  }

  /* ヒーローのアンダーライン SVG など、絶対配置で右にはみ出すものを抑える */
  .site-stage h1 svg[style*="absolute"],
  .site-stage h2 svg[style*="absolute"] {
    max-width: 80%;
  }

  /* iframe / 画像が画面幅を超えないように */
  .site-stage img,
  .site-stage svg {
    max-width: 100%;
  }

  /* Tweaks パネルはスマホで非表示 */
  .twk-panel,
  [data-tweaks-toggle],
  [data-tweaks-fab] {
    display: none !important;
  }
}

/* ─────────────────────────────────────
   ハンバーガーメニュー（PC では非表示）
   ───────────────────────────────────── */
.menu-toggle {
  display: none;
  background: none;
  border: 1.5px solid currentColor;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: #2D3E50;
  flex-shrink: 0;
}
.menu-toggle .bar {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  margin: 3px 0;
  border-radius: 2px;
  transition: transform 0.2s, opacity 0.2s;
}
.menu-toggle[aria-expanded="true"] .bar:nth-child(1) {
  transform: translateY(5px) rotate(45deg);
}
.menu-toggle[aria-expanded="true"] .bar:nth-child(2) {
  opacity: 0;
}
.menu-toggle[aria-expanded="true"] .bar:nth-child(3) {
  transform: translateY(-5px) rotate(-45deg);
}

@media (max-width: 768px) {
  .menu-toggle {
    display: flex;
  }
}

/* ハンバーガーで開くオーバーレイメニュー */
.mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(45, 62, 80, 0.96);
  z-index: 9000;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  font-family: "Zen Maru Gothic", sans-serif;
}
.mobile-menu.open {
  display: flex;
}
.mobile-menu a {
  color: #FBF6EC;
  font-size: 24px;
  text-decoration: none;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: 18px 22px 18px 24px;
  transition: background 0.2s;
}
.mobile-menu a:hover,
.mobile-menu a.active {
  background: rgba(214, 188, 138, 0.2);
}
.mobile-menu .close {
  position: absolute;
  top: 24px;
  right: 24px;
  background: none;
  border: 1.5px solid #FBF6EC;
  color: #FBF6EC;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}