/* ============================================================
   スマホ最適化（v3.2・幅720px未満のみ。PCの見た目は変えない）
   方針：申込までの「探す・迷う・入力でつまずく」を減らす
   ============================================================ */

/* 下固定の申込バー（assets/js/mobile-bar.js が生成） */
.sp-bar { display: none; }
@media (max-width: 719.98px) {
  .sp-bar {
    display: flex; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(8px);
    box-shadow: 0 -4px 18px rgba(20, 40, 60, 0.12);
    transition: transform .25s ease;
  }
  .sp-bar.is-hidden, .sp-bar.is-near-target, .sp-bar.is-dup { transform: translateY(110%); }
  .sp-bar a { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; border-radius: 14px; text-decoration: none; font-weight: 800; }
  .sp-bar-tel { flex: 0 0 76px; flex-direction: column; gap: 2px; font-size: 12px; color: var(--wb-cyan-700); background: var(--wb-cyan-50); border: 1.5px solid var(--wb-cyan-100, #cdeef7); }
  .sp-bar-main { flex: 1; flex-direction: column; background: var(--wb-sun-400); color: var(--wb-ink-900); box-shadow: var(--wb-shadow-sm); line-height: 1.25; }
  .sp-bar-main strong { font-size: 16px; }
  .sp-bar-main small { font-size: 11.5px; font-weight: 700; opacity: .8; }
  body.has-sp-bar { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  /* 右下の丸いボタンはバーと重複するのでスマホでは出さない */
  body.has-sp-bar .floating-cta { display: none !important; }

  /* iPhone で入力欄をタップしたときの自動ズームを防ぐ（16px未満で拡大される） */
  input, select, textarea { font-size: 16px !important; }

  /* 指で押しやすく（最低 44px の高さを確保） */
  .reason-card .more, .more, .hero-channels a, .contact-channel a, .tf-remove, .pqw-back, .pqw-restart, .wbev-more {
    min-height: 44px; display: inline-flex; align-items: center;
  }
  .tf-opt { min-height: 44px; padding: 10px 14px; }

  /* ---- トップ：最初の画面に「見出し＋申込ボタン」を入れる ---- */
  .hero .blob { aspect-ratio: 16 / 10; max-height: 34vh; }
  .hero .visual { padding-bottom: 8px; }
  .hero .stat-card { display: none; }
  .hero .inner { padding-top: 16px; gap: 14px; }
  .hero .inner > div:first-child { display: flex; flex-direction: column; }
  .hero .inner > div:first-child .cta-row { order: 3; margin-top: 18px; }
  .hero .inner > div:first-child .trust-row { order: 4; margin-top: 12px; gap: 10px 14px; }
  .hero .inner > div:first-child .tagline { order: 5; }
  .hero .inner > div:first-child .lead { order: 6; font-size: 15.5px; }
  .hero .inner > div:first-child .hero-channels { order: 7; }
  .hero .cta-row .wb-btn { flex: 1 1 100%; }
  .hero .cta-row .link-pricing { flex: 1 1 100%; display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 16px; }
  .campaign-bar { padding-top: 6px; padding-bottom: 6px; }

  /* ---- 料金：表を画面幅に収める ---- */
  .fee-table { min-width: 0 !important; font-size: 14px; }
  .fee-table th, .fee-table td { padding: 10px 8px; }
  .fee-reco { display: block; width: max-content; margin: 4px 0 0; }

  /* ---- 無料体験ページ：フォームまでの距離を縮める ---- */
  .sp-only { display: block; }
  .tf-card { padding: 20px 16px; }
}
@media (min-width: 720px) { .sp-only { display: none !important; } }

/* ============================================================
   v3.2b スマホのスクロール量を減らす
   縦に積み重なるカード群を「横スワイプ」に（次のカードを少しのぞかせ、下に位置の点を表示）
   ============================================================ */
@media (max-width: 719.98px) {
  .section { padding-top: 48px; padding-bottom: 48px; }
  .section-head-center { margin-bottom: 20px !important; }
  .section-sub { font-size: 14.5px; }

  .reasons-grid, .teachers-grid, .voices-grid, .events-grid, .pricing-grid, .ig-embed-grid, .access-grid, .jt-join {
    display: flex !important; grid-template-columns: none !important;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    gap: 12px; margin-left: -20px !important; margin-right: -20px !important;
    padding: 16px 20px 6px !important; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    align-items: stretch !important;
  }
  .reasons-grid::-webkit-scrollbar, .teachers-grid::-webkit-scrollbar, .voices-grid::-webkit-scrollbar,
  .events-grid::-webkit-scrollbar, .pricing-grid::-webkit-scrollbar, .ig-embed-grid::-webkit-scrollbar,
  .access-grid::-webkit-scrollbar, .jt-join::-webkit-scrollbar { display: none; }
  .reasons-grid > *, .teachers-grid > *, .voices-grid > *, .events-grid > *, .pricing-grid > *,
  .ig-embed-grid > *, .access-grid > *, .jt-join > * {
    flex: 0 0 84%; max-width: 84%; scroll-snap-align: center; margin: 0 !important; transform: none !important;
  }
  .ig-embed-grid > * { flex-basis: 88%; max-width: 88%; }

  /* スワイプ位置の点（assets/js/mobile-bar.js が生成） */
  .sw-dots { display: flex; justify-content: center; gap: 6px; margin: 6px 0 0; }
  .sw-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--wb-ink-200); transition: width .2s, background .2s; }
  .sw-dots span.on { width: 18px; border-radius: 4px; background: var(--wb-primary); }

  /* カードの中身も少し詰める */
  .reason-card { padding: 22px 18px 18px; }
  .reason-card .reason-icon { width: 52px; height: 52px; margin-top: 10px; }
  .teacher-card .photo { height: 220px; }
  .voice-card { padding: 20px; }
  .voice-card .q-mark { font-size: 34px; }
  .voice-card blockquote { font-size: 15px; line-height: 1.8; }
  .event-card .photo img { aspect-ratio: 16 / 9; object-fit: cover; }

  /* 7段階レベル：1段を1行（数字・名前・年齢・英検）にまとめる */
  .levels-row { gap: 6px; }
  .level-card { display: grid; grid-template-columns: 34px 1fr auto; grid-template-areas: "dot name note" "dot age note"; align-items: center; column-gap: 10px; row-gap: 0; padding: 10px 12px !important; text-align: left; }
  .level-card .level-dot { grid-area: dot; width: 34px; height: 34px; font-size: 15px; margin: 0; }
  .level-card .level-name { grid-area: name; font-size: 16px; margin: 0; }
  .level-card .level-age { grid-area: age; font-size: 12.5px; margin: 0; }
  .level-card .level-note { grid-area: note; font-size: 12.5px; margin: 0; }
  .level-card::after { display: none; }
  /* 「詳しく見る」は右端の › に置き換え（カード全体がタップ対象） */
  .level-card .level-action { display: none !important; }
  .level-card .level-note { padding-right: 18px; position: relative; }
  .level-card .level-note::after { content: "›"; position: absolute; right: 0; top: 50%; transform: translateY(-52%); font-size: 20px; color: var(--wb-ink-400); }
  .level-card.active .level-note::after { transform: translateY(-52%) rotate(90deg); }
  .level-spectrum { display: none; }
  .level-mobile-detail:not(.is-open) { display: none; }

  /* 年間イベント（季節ごと）の余白を詰める */
  .season-block { margin-top: 24px !important; }
  .season-block h3 { font-size: 18px !important; margin-bottom: 4px !important; }
}
@media (max-width: 719.98px) {
  /* 長い説明ブロックは「続きを読む」で開く（assets/js/mobile-bar.js） */
  .sp-collapsed { max-height: 320px; overflow: hidden; position: relative; }
  .sp-collapsed::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; background: linear-gradient(rgba(255,255,255,0), var(--wb-surface, #fff)); pointer-events: none; }
  .sp-more-btn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 44px; margin: 8px 0 18px; background: none; border: 1.5px solid var(--wb-ink-200); border-radius: 999px; font: inherit; font-size: 14px; font-weight: 800; color: var(--wb-cyan-700); cursor: pointer; }
  /* 料金ページ「月謝に含まれるもの」を詰める */
  .included-list { gap: 8px; }
  .included-list li { padding: 12px 14px; font-size: 14px; }
  .included-list .vs { font-size: 12.5px; }
}