/* =====================================================================
   スマホ表示の是正(2026-09-20 hyde「PCはいい感じ、携帯から見るとちょっと適正じゃない」)
   実測(iPhone 14 幅 390 / Playwright): 固定ヘッダーが高さ 348px = 画面の 41% を常に占有、
   タブ 9 個が右側に縦積み・右端が切れる、h2(1文字ずつ span の見出し)が折り返せず横はみ出し(452px > 390px)。
   🔴 index.html の <style> を触らず、この 1 ファイルを最後に読み込んで上書きする(Codex と同時編集中のため衝突面を1行に絞る)。
   ===================================================================== */

/* --- ヘッダー: ブランド行 + 横スクロールするタブ行 の2段(計 ~90px) --- */
@media (max-width: 980px) {
  .topbar .nav { flex-wrap: wrap; min-height: 0; padding: 8px 0 0; gap: 4px 12px; }
  .topbar .brand { font-size: 14px; }
  .topbar .brand-mark { width: 44px; }
  .nav-links.lp-tabs {
    display: flex; flex-wrap: nowrap; align-items: center; gap: 0;
    order: 3; width: calc(100% + 2 * 14px); margin: 0 -14px; padding: 0 14px 6px;
    overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
  }
  .nav-links.lp-tabs::-webkit-scrollbar { display: none; }
  .lp-tab { flex: 0 0 auto; padding: 9px 10px; font-size: 12.5px; letter-spacing: .02em; scroll-snap-align: start; }
  .lp-tab[data-lp-tab="booking"] { padding: 7px 13px; margin-left: 8px; margin-right: 4px; }
}

/* --- 横はみ出しの根 --- */
@media (max-width: 640px) {
  /* 1文字ずつ span に分けた見出し(assets/heading-anim.js)は white-space:pre で 1 行に固定される → 折り返しを許す */
  /* heading-anim.js は自分の <style> を head の末尾に足すので、後勝ちにならない → !important で上書き */
  .ha-split { white-space: normal !important; max-width: 100%; }
  /* grid の子は min-width:auto で中身の幅まで広がる → 親幅で止める */
  .demo-caption { grid-template-columns: minmax(0, 1fr); }
  .demo-caption > *, .mentor-strip > *, .hero-grid > *, .section-head > *, .offer > *, .apply-wrap > *, .who-grid > *, .pain-layout > * { min-width: 0; max-width: 100%; }
  /* 料金カードの中の nowrap ボタン(講座メニューから選ぶ)が min-content を押し広げていた */
  .offer { grid-template-columns: minmax(0, 1fr); }
  .offer .btn, .offer a[style*="nowrap"] { white-space: normal !important; }
  .mentor-strip { grid-template-columns: 1fr; }
  /* 本文の長い英単語・URL が枠を押し広げないように */
  main p, main li, main figcaption { overflow-wrap: anywhere; }
  /* 横スクロール表(講座メニュー・比較表)は表自体をスクロールさせ、ページ全体を横に動かさない */
  .table-scroll, .menu-scroll, .roi-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* 🔴 2026-09-22 hyde「ヘッダータブ固定できない？」: html と body の両方に overflow-x:hidden を置くと
     body がスクロール容器になり、.topbar の position:sticky が効かなくなる(実測: 1025px スクロール後 top=-1025)。
     html だけに置く(viewport へ伝播するので横はみ出し防止はそのまま)。 */
  html { overflow-x: hidden; }
  body { overflow-x: visible; }

  /* 料金目安(PRICE GUIDE)の表: min-width:460px で横スクロールになり「やさしめ」しか見えていなかった
     (hyde 2026-09-22「初めての人見てもスライド出来ることわからへんで」)。幅 390 に 4 列とも収める。 */
  .price-guide table { min-width: 0 !important; font-size: 12px !important; table-layout: auto; }
  .price-guide th, .price-guide td { padding-left: 4px !important; padding-right: 4px !important; }
  .price-guide td:first-child, .price-guide th:first-child { padding-left: 0 !important; }
  .price-guide td:last-child, .price-guide th:last-child { padding-right: 0 !important; }
  .price-guide td:first-child { min-width: 7em; }
  .price-guide td:first-child span { display: block; font-size: 11px !important; line-height: 1.5; }
  .price-guide table, .price-guide table * { -webkit-text-size-adjust: 100%; }
}

/* --- 右下「hyde に聞く」: スマホでは幅 150px がボタン(申し込む)に被る → 小さく --- */
@media (max-width: 620px) {
  /* 本文中の <style> が後に来るので詳細度で勝つ */
  body #hydebot-btn { right: 12px; bottom: 14px; gap: 7px; padding: 6px 12px 6px 6px; font-size: 12px; }
  body #hydebot-btn img { width: 30px; height: 30px; }
}

/* --- タップ対象とフッター --- */
@media (max-width: 620px) {
  .footer-inner a { display: inline-block; min-height: 32px; line-height: 32px; }
  .try-embed iframe { height: min(70vh, 560px); }
}