/* =====================================================================
   月謝コンパス — ランディングページ（lp.css・確定版）
   ・lp-maker（LP専門）による需要検証LP。確定版（旧 lp-v8）を正本 lp.css に集約。
     評価役 lp-reviewer のレビュー（deliverables/2026-06-26-07/lp-review.md）で出た
     「中」の指摘2点までを反映した版を確定（人間承認・2026-06-26-07）。lp.html から参照する。
     共通トークンは ../styles.css 参照のまま。

   ─────────────────────────────────────────────────────────────────────
   v8 で加えた CSS は1点だけ（指摘2のため）
   ─────────────────────────────────────────────────────────────────────
   ★指摘2（ファーストビューの安心材料を前出し）：
     ヒーローCTA直下に「メールアドレスだけ・カード登録不要」を 1チップ前出しする。
     そのための .lp-cta-chips / .lp-cta-chip を新規追加（CTA注記 .lp-cta-note の直後に置く）。
     FVを重くしすぎないよう、淡い面・小さめのチップ1つに留める。
   ★指摘1（振替の線引き）は本文の文言修正のみで、CSSの変更は不要（HTML側で対応）。

   ─────────────────────────────────────────────────────────────────────
   v9 で加えた CSS は1点だけ（MVP整合レビュー lp-review-v3.md の指摘B のため）
   ─────────────────────────────────────────────────────────────────────
   ★指摘B（教室の入金口座接続＝集金の前提ステップが導入の流れに無い）：
     導入の流れ「3ステップ」の前に「ステップ0＝最初に入金口座をつなぐ（一度きり）」の
     軽い前置きバー .lp-step-zero を新規追加（grid の3ステップは崩さない）。
     重く見せないよう淡い面・横1本バー。狭幅では縦積みに畳む。
     指摘A（資金が教室口座直通）・指摘C（事前登録はカード不要／生徒は一度登録だけ）は
     本文・チップの文言修正と既存クラスで対応（CSSの新規変更は不要）。

   ─────────────────────────────────────────────────────────────────────
   v10 で加えた CSS（CVR導線強化レビュー lp-review-v5.md の指摘1/2 のため）
   ─────────────────────────────────────────────────────────────────────
   ★指摘1/2（生徒/保護者の「払い方」を主役にした独立セクションが無い・教室主の不安先回りが弱い）：
     導入の流れ（教室側3ステップ・tint背景）の直後に「生徒・保護者がやることは、これだけ」の
     独立セクション .lpx-payer を新規追加。教室側フローと対比させるため通常背景にする。
     - 左：生徒側3ステップ .lpx-payer-steps / .lpx-pstep（リンク→一度カード登録〔mandate明示〕→以後自動）
     - 右：生徒/保護者が見るカード登録画面のイメージ .lpx-payer-visual / .lpx-pay（既存 .lp-shot を再利用）
       MVP画面C相当・Stripeホスト風。mandate（毎月27日に¥11,000を引き落とす旨）を画面に織り込む。
     - 下：教室主の不安を名指しで消すコピー .lpx-payer-relief（指摘2）
     ★横スクロール0維持：グリッドは minmax(0,1fr)、.lp-shot は既存の min-width:0/max-width:100% を踏襲。
       3幅（375/768/1280px）で崩れないよう、980pxで2列→1列、560pxで3ステップを1列に畳む。
     ★MVP §2-3 の範囲（リンク発行→Stripeホストでカード登録→以後自動・教室はカード情報を持たない）に
       正確に留め、スコープ外（保護者ポータル等）は匂わせない。

   ─────────────────────────────────────────────────────────────────────
   以下、v7 のレイアウト・横スクロール0対策（minmax(0,1fr) グリッド・
   .lp-shot の min-width:0/max-width:100%・ルートの overflow-x:clip・
   SPカードで値を確実に見せる規則 等）は一切変えずに踏襲する。
   ・トーン／世界観は v5〜v7（藍×ティール＋琥珀・Zen Kaku/BIZ UDPGothic）を完全踏襲。
   ・クラスは lp- / lpx- 接頭辞で名前空間を分け、既存3画面モックを壊さない。
   ===================================================================== */

/* ★保険（取り逃し対策）：ルートで横方向のはみ出しを止める。v7から維持。
   overflow-x:clip は position:sticky を壊さない（スクロールコンテナを作らない）。 */
html, body {
  max-width: 100%;
  overflow-x: clip;
}

/* LPはアプリ枠(.app grid)を使わないので body の流し込みをリセット */
body.lp { display: block; }

.lp-container {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 28px;
}

/* スクロールで現れる軽いフェード（控えめなマイクロインタラクション） */
.lpx-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1);
  will-change: opacity, transform;
}
.lpx-reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .lpx-reveal { opacity: 1; transform: none; transition: none; }
}

/* =========================== ヘッダー（ナビ） =========================== */
.lp-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(244, 246, 248, .82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
.lp-nav { display: flex; align-items: center; gap: 18px; height: 66px; }
.lp-brand { display: flex; align-items: center; gap: 11px; }
.lp-brand .mark {
  width: 38px; height: 38px; border-radius: 10px;
  background: linear-gradient(135deg, var(--teal-600), var(--brand-600));
  display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), 0 4px 10px rgba(16,36,56,.18);
  flex: 0 0 auto;
}
.lp-brand .mark svg { width: 22px; height: 22px; }
.lp-brand .name {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700; font-size: 18px; color: var(--brand-900); line-height: 1.15;
}
.lp-brand .name small {
  display: block; font-size: 9.5px; font-weight: 700;
  letter-spacing: .16em; color: var(--ink-mute); margin-top: 1px;
}
.lp-nav .grow { flex: 1; }
.lp-nav-links { display: flex; gap: 4px; }
.lp-nav-links a {
  font-size: 13.5px; font-weight: 700; color: var(--ink-soft);
  padding: 8px 13px; border-radius: var(--r-sm);
  transition: background .14s ease, color .14s ease;
}
.lp-nav-links a:hover { background: var(--brand-050); color: var(--brand-700); }

/* =========================== 共通ボタン =========================== */
.lp-btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: inherit; font-weight: 700; border-radius: var(--r-md);
  cursor: pointer; border: 1px solid transparent;
  transition: transform .12s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
  text-align: center;
}
.lp-btn svg { width: 18px; height: 18px; }
.lp-btn:active { transform: translateY(1px); }
.lp-btn-lg { font-size: 15.5px; padding: 14px 26px; }
.lp-btn-md { font-size: 14px; padding: 11px 20px; }
.lp-btn-amber {
  background: linear-gradient(180deg, var(--amber-500), var(--amber-600));
  color: #fff;
  box-shadow: 0 8px 20px rgba(196,127,18,.28), inset 0 1px 0 rgba(255,255,255,.25);
}
.lp-btn-amber:hover { box-shadow: 0 12px 28px rgba(196,127,18,.34), inset 0 1px 0 rgba(255,255,255,.3); transform: translateY(-1px); }
.lp-btn-ghost { background: var(--surface); border-color: var(--line); color: var(--ink-soft); }
.lp-btn-ghost:hover { border-color: var(--brand-500); color: var(--brand-700); }
.lp-btn-onnavy {
  background: linear-gradient(180deg, var(--amber-500), var(--amber-600));
  color: #fff; box-shadow: 0 10px 26px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.25);
}

/* =========================== ヒーロー =========================== */
.lp-hero { position: relative; overflow: hidden; padding: 60px 0 54px; }
.lp-hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(740px 420px at 88% -8%, rgba(29,138,138,.16), transparent 62%),
    radial-gradient(680px 480px at 6% 8%, rgba(58,114,168,.14), transparent 60%);
  pointer-events: none;
}
.lp-hero .lp-container {
  position: relative; display: grid;
  grid-template-columns: 1.05fr 1fr; gap: 52px; align-items: center;
}
.lp-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: .03em;
  color: var(--teal-600); background: var(--teal-100);
  border: 1px solid #b6e0de; border-radius: 999px; padding: 6px 14px; margin-bottom: 18px;
}
.lp-eyebrow svg { width: 15px; height: 15px; }
.lp-hero h1 {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 900; font-size: clamp(31px, 4.3vw, 48px);
  line-height: 1.2; color: var(--brand-900); letter-spacing: .002em;
}
.lp-hero h1 .accent {
  background: linear-gradient(120deg, var(--brand-700), var(--teal-600));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lp-hero h1 .hl {
  position: relative; white-space: nowrap;
}
.lp-hero h1 .hl::after {
  content: ""; position: absolute; left: -2px; right: -2px; bottom: .06em; height: .34em;
  background: linear-gradient(90deg, rgba(224,150,31,.42), rgba(224,150,31,.22));
  border-radius: 3px; z-index: -1;
}
.lp-hero .lp-lead {
  font-size: 16px; color: var(--ink-soft); line-height: 1.85;
  margin: 20px 0 12px; max-width: 31em;
}
.lp-hero .lp-lead b { color: var(--brand-700); font-weight: 700; }

/* 痛点→解決を一言で示すチェックライン（ヒーロー内・3秒理解の補助） */
.lp-hero-checks { display: flex; flex-direction: column; gap: 8px; margin: 0 0 24px; }
.lp-hero-checks li {
  display: flex; align-items: center; gap: 9px;
  font-size: 13.5px; color: var(--ink); font-weight: 700; list-style: none;
}
.lp-hero-checks .ck {
  width: 20px; height: 20px; border-radius: 6px; flex: 0 0 auto;
  background: var(--ok-bg); border: 1px solid var(--ok-line); color: var(--ok);
  display: grid; place-items: center;
}
.lp-hero-checks .ck svg { width: 12px; height: 12px; }

.lp-cta-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.lp-cta-note {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--ink-mute); margin-top: 16px;
}
.lp-cta-note svg { width: 15px; height: 15px; color: var(--ok); flex: 0 0 auto; }

/* ★v8（指摘2）：FVの安心材料を前出しする小チップ。
   申込摩擦の低さ（メールだけ・カード不要）をファーストビューで完結させる。
   重くしないよう淡い面の小チップに留める。次セクションのassureストリップと役割は重複するが、
   FV内で“いま登録だけ・お金/カード不要”の安心を3秒で渡すための前出し。
   ★v9（指摘C）：チップ文言を“事前登録はカードのご登録なしでOK”に変更（HTML側）。
   本番運用では生徒/保護者のカード登録が必要なため、“生徒もずっと不要”と誤読されないようにする。 */
.lp-cta-chips {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px;
}
.lp-cta-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700; color: var(--teal-600);
  background: var(--teal-100); border: 1px solid #bfe5e3;
  border-radius: 999px; padding: 5px 12px; line-height: 1.2;
}
.lp-cta-chip svg { width: 14px; height: 14px; flex: 0 0 auto; }

.lp-trust {
  display: flex; gap: 22px; flex-wrap: wrap;
  margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line-soft);
}
.lp-trust .item .n {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 900; font-size: 24px; color: var(--brand-700);
  font-variant-numeric: tabular-nums;
}
.lp-trust .item .l { font-size: 12px; color: var(--ink-mute); font-weight: 700; }

/* --- ヒーロー右：プロダクト画面のビジュアル ---
   ★v6: .lp-shot の min-content が SP の 1カラム化グリッドの 1fr 列を広げる
     真因だったため、min-width:0 / max-width:100% を明示。v7/v8 でも維持。 */
.lp-hero-visual { position: relative; min-width: 0; max-width: 100%; }
.lp-shot {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 30px 70px rgba(16,36,56,.22), 0 6px 18px rgba(16,36,56,.10);
  overflow: hidden;
  min-width: 0; max-width: 100%; /* 列内で縮めるように（横はみ出し根治・v6から維持） */
}
.lp-shot-bar {
  display: flex; align-items: center; gap: 8px; padding: 11px 14px;
  background: linear-gradient(180deg, #f3f6f9, #eaeff4);
  border-bottom: 1px solid var(--line);
}
.lp-shot-bar .dot { width: 11px; height: 11px; border-radius: 50%; }
.lp-shot-bar .dot.r { background: #e0817a; }
.lp-shot-bar .dot.y { background: #e3c069; }
.lp-shot-bar .dot.g { background: #84c08e; }
.lp-shot-bar .url {
  margin-left: 10px; flex: 1; font-size: 11px; color: var(--ink-mute);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; padding: 4px 12px; display: flex; align-items: center; gap: 6px;
  min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.lp-shot-bar .url svg { width: 12px; height: 12px; color: var(--ok); flex: 0 0 auto; }
.lp-shot-body { background: var(--bg); }

.lp-float {
  position: absolute; display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--shadow-pop); padding: 11px 14px;
  max-width: calc(100% - 16px); min-width: 0; /* 自身が画面幅を超えないための保険 */
}
.lp-float .ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex: 0 0 auto; color: #fff; }
.lp-float .ic svg { width: 18px; height: 18px; }
.lp-float .tx { min-width: 0; }
.lp-float .tx b { font-size: 13px; display: block; line-height: 1.2; }
.lp-float .tx small { font-size: 11px; color: var(--ink-mute); }
.lp-float.f-ok { bottom: -18px; left: -26px; }
.lp-float.f-ok .ic { background: linear-gradient(135deg, var(--ok), #3aa86c); }
.lp-float.f-alert { top: 8px; right: -22px; }
.lp-float.f-alert .ic { background: linear-gradient(135deg, var(--danger), var(--amber-500)); }

/* =========================== 安心材料ストリップ（離脱対策） =========================== */
.lpx-assure {
  background: var(--surface);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  padding: 18px 0;
}
.lpx-assure .lp-container {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: stretch;
}
.lpx-assure .a {
  display: flex; align-items: center; gap: 11px;
  padding: 6px 4px; min-width: 0;
}
.lpx-assure .a + .a { border-left: 1px solid var(--line-soft); padding-left: 18px; }
.lpx-assure .ic {
  width: 38px; height: 38px; border-radius: 10px; flex: 0 0 auto;
  background: var(--teal-100); color: var(--teal-600);
  border: 1px solid #bfe5e3; display: grid; place-items: center;
}
.lpx-assure .ic svg { width: 19px; height: 19px; }
.lpx-assure .t { font-size: 13px; font-weight: 700; color: var(--ink); line-height: 1.25; }
.lpx-assure .s { font-size: 11px; color: var(--ink-mute); margin-top: 2px; }

/* =========================== セクション共通 =========================== */
.lp-section { padding: 72px 0; }
.lp-section.tint {
  background: linear-gradient(180deg, transparent, rgba(220,232,242,.5) 14%, rgba(220,232,242,.5) 86%, transparent);
}
.lp-section-head { max-width: 40em; margin: 0 auto 48px; text-align: center; }
.lp-kicker {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .14em;
  color: var(--teal-600); margin-bottom: 12px;
}
.lp-section-head h2 {
  font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 900;
  font-size: clamp(24px, 3vw, 34px); color: var(--brand-900); line-height: 1.3;
}
.lp-section-head h2 .accent {
  background: linear-gradient(120deg, var(--brand-700), var(--teal-600));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lp-section-head p { font-size: 15px; color: var(--ink-soft); margin-top: 14px; line-height: 1.8; }

/* =========================== 痛点セクション =========================== */
.lp-pain-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.lp-pain {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 26px 24px; box-shadow: var(--shadow-1); position: relative;
  min-width: 0;
}
.lp-pain .ic {
  width: 46px; height: 46px; border-radius: 12px;
  background: var(--danger-bg); border: 1px solid var(--danger-line); color: var(--danger);
  display: grid; place-items: center; margin-bottom: 16px;
}
.lp-pain .ic svg { width: 23px; height: 23px; }
.lp-pain h3 { font-size: 17px; color: var(--ink); margin-bottom: 9px; }
.lp-pain p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.8; }
.lp-pain .cost {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 14px;
  font-size: 11.5px; font-weight: 700; color: var(--danger);
  background: var(--danger-bg); border: 1px solid var(--danger-line);
  border-radius: 999px; padding: 4px 11px;
}
.lp-pain .cost svg { width: 13px; height: 13px; }
.lp-pain .quote {
  margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line);
  font-size: 12.5px; color: var(--ink-mute); font-style: italic;
}

.lp-pain-bridge { text-align: center; margin-top: 40px; }
.lp-pain-bridge .arrow {
  width: 48px; height: 48px; margin: 0 auto 16px; border-radius: 50%;
  background: linear-gradient(135deg, var(--teal-600), var(--brand-600));
  color: #fff; display: grid; place-items: center; box-shadow: 0 10px 24px rgba(29,138,138,.3);
}
.lp-pain-bridge .arrow svg { width: 24px; height: 24px; }
.lp-pain-bridge p {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700; font-size: 19px; color: var(--brand-800);
}

/* =========================== 機能セクション =========================== */
.lp-feature {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; padding: 30px 0;
}
.lp-feature + .lp-feature { margin-top: 36px; }
.lp-feature.reverse .lp-feature-text { order: 2; }
.lp-feature-text { min-width: 0; }
.lp-feature-num {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12.5px; font-weight: 700; color: var(--teal-600); margin-bottom: 14px;
}
.lp-feature-num .b {
  width: 28px; height: 28px; border-radius: 8px; background: var(--brand-700); color: #fff;
  display: grid; place-items: center;
  font-family: "Zen Kaku Gothic New", sans-serif; font-size: 14px; font-weight: 900;
}
.lp-feature-text h3 {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 900; font-size: 25px; color: var(--brand-900); line-height: 1.34;
}
.lp-feature-text > p {
  font-size: 14.5px; color: var(--ink-soft); margin: 14px 0 20px; line-height: 1.85;
}
.lp-feature-text > p b { color: var(--brand-700); }
.lp-feature-list { display: flex; flex-direction: column; gap: 11px; }
.lp-feature-list li {
  display: flex; align-items: flex-start; gap: 11px;
  font-size: 13.5px; color: var(--ink); list-style: none;
}
.lp-feature-list .ck {
  width: 22px; height: 22px; border-radius: 7px; flex: 0 0 auto;
  background: var(--ok-bg); border: 1px solid var(--ok-line); color: var(--ok);
  display: grid; place-items: center; margin-top: 1px;
}
.lp-feature-list .ck svg { width: 13px; height: 13px; }
.lp-feature-list li b { color: var(--brand-700); }

/* ★v6: 機能ビジュアルも列内で縮めるよう min-width:0 / max-width:100% を明示。v7/v8も維持。 */
.lp-feature-visual { position: relative; min-width: 0; max-width: 100%; }
.lp-feature-visual .lp-shot { transition: transform .25s ease, box-shadow .25s ease; }
.lp-feature-visual:hover .lp-shot { transform: translateY(-4px); box-shadow: 0 36px 80px rgba(16,36,56,.24); }
.lp-shot-tag {
  position: absolute; top: -12px; left: 18px; z-index: 2;
  font-size: 11px; font-weight: 700; background: var(--brand-800); color: #fff;
  padding: 5px 12px; border-radius: 999px; box-shadow: var(--shadow-2);
  display: inline-flex; align-items: center; gap: 6px;
}
.lp-shot-tag svg { width: 13px; height: 13px; }

/* --- ミニ画面：プレビュー内の縮小UI部品（既存3画面トーンを再現） --- */
.mini { padding: 16px; font-size: 12px; }
.mini-head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.mini-head .t { font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 700; font-size: 14px; color: var(--ink); }
.mini-head .s { font-size: 10.5px; color: var(--ink-mute); }
.mini-head .grow { flex: 1; }

.mini-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-bottom: 12px; }
.mini-stat {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 9px 10px; position: relative; overflow: hidden;
  min-width: 0;
}
.mini-stat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--brand-500); }
.mini-stat.ok::before { background: var(--ok); }
.mini-stat.warn::before { background: var(--warn); }
.mini-stat .k { font-size: 9.5px; color: var(--ink-mute); font-weight: 700; }
.mini-stat .v { font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 700; font-size: 17px; margin-top: 2px; }
.mini-stat .v.money { color: var(--brand-700); font-size: 15px; }
.mini-stat .v.warn { color: var(--warn); }

/* =====================================================================
   ミニテーブル（v5の列ズレ是正を踏襲・SPはカード型。v7で値表示を根治）
   列: 生徒 / コース / 今月の出席 / 月謝 / 状況
   ===================================================================== */
.mini-table {
  /* 全行が共有する単一のグリッド定義（ここを変えれば全行が同時に変わる） */
  --mini-cols: 1.55fr .9fr .92fr .72fr 1fr;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-sm); overflow: hidden;
}
.mini-row {
  display: grid;
  grid-template-columns: var(--mini-cols);
  column-gap: 8px; align-items: center;
  padding: 9px 11px; border-bottom: 1px solid var(--line-soft);
}
.mini-row > * { min-width: 0; } /* 各セルがはみ出さず、左端が確実に揃う */
.mini-row:last-child { border-bottom: none; }
.mini-row.head { background: var(--surface-2); font-size: 9px; letter-spacing: .04em; color: var(--ink-mute); font-weight: 700; }
.mini-row.head span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-row.is-rest { opacity: .62; }

/* テキスト揃え（head とデータ行で同じ列に同じ揃えを当て、列を一直線に）。 */
.ta-c { text-align: center; }
.ta-r { text-align: right; }

.mini-stu { display: flex; align-items: center; gap: 8px; }
.mini-ava { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 10px; flex: 0 0 auto; }
.mini-nm { font-weight: 700; font-size: 11.5px; color: var(--ink); line-height: 1.2; min-width: 0; }
.mini-nm small { display: block; font-weight: 500; font-size: 9.5px; color: var(--ink-mute); }
/* PC（テーブル時）はコースを1行に収めたいので nowrap/ellipsis を維持。
   ★この nowrap/ellipsis/overflow は SPカードで必ず打ち消す（下の @media 参照）。 */
.mini-course { font-size: 10.5px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-money { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 11.5px; }
.mini-money-mute { font-size: 10px; color: var(--ink-mute); font-weight: 500; }

/* 出欠セル（今月の出席）。PCテーブル時は block＋中央寄せ。
   ★nowrap/overflow/ellipsis は PC専用。SPカードで打ち消す。 */
.mini-att {
  display: block;
  font-size: 10.5px; font-weight: 700; color: var(--ink-soft);
  font-variant-numeric: tabular-nums; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mini-att .att-val { display: inline; } /* 数値＋"/n回"＋補足を1つのインライン塊に */
.mini-att .att-n { font-family: "Zen Kaku Gothic New", sans-serif; font-size: 12.5px; font-weight: 900; color: var(--teal-600); }
.mini-att small { font-size: 8.5px; font-weight: 700; color: var(--ink-mute); margin-left: 2px; }
.mini-att.att-mute { color: var(--ink-mute); font-weight: 500; }

/* 状況セル：PCテーブル時は block。中身のバッジは text-align:center。 */
.mini-cell-badge { display: block; min-width: 0; }
.mini-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 999px;
  border: 1px solid transparent; white-space: nowrap; max-width: 100%;
  vertical-align: middle;
}
.mini-badge .led { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; }
.mini-badge.ok { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-line); }
.mini-badge.ok .led { background: var(--ok); }
.mini-badge.warn { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-line); }
.mini-badge.warn .led { background: var(--warn); }
.mini-badge.danger { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-line); }
.mini-badge.danger .led { background: var(--danger); }
.mini-badge.rest { background: var(--info-bg); color: var(--info); border-color: #c2d6e8; }
.mini-badge.rest .led { background: var(--info); }

/* ヒーロー右はやや横幅が狭いので、全体を縮小（gap/padding/font）。
   列の比率（--mini-cols）は本体と同一に保つので、列はズレない。
   ★これは PC（テーブル時）の縮小。SPカードでは下の @media が打ち消す。 */
.mini-table-hero { --mini-cols: 1.5fr .85fr .9fr .72fr 1fr; }
.mini-table-hero .mini-row { column-gap: 6px; padding: 8px 10px; }
.mini-table-hero .mini-badge { font-size: 9px; padding: 3px 6px; }
.mini-table-hero .mini-course { font-size: 10px; }

.mini-band {
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(120deg, var(--danger-bg), #fdeee6);
  border: 1px solid var(--danger-line); border-radius: var(--r-sm);
  padding: 9px 11px; margin-bottom: 11px;
}
.mini-band .ic { width: 26px; height: 26px; border-radius: 7px; background: var(--danger); color: #fff; display: grid; place-items: center; flex: 0 0 auto; }
.mini-band .ic svg { width: 15px; height: 15px; }
.mini-band .tx { font-size: 11px; color: var(--ink-soft); line-height: 1.4; min-width: 0; }
.mini-band .tx b { color: var(--danger); }
.mini-alert {
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--danger); border-radius: var(--r-sm);
  padding: 10px 12px; display: flex; align-items: center; gap: 10px; margin-bottom: 9px;
}
.mini-alert.warn { border-left-color: var(--warn); }
.mini-alert .grow { flex: 1; min-width: 0; }
.mini-alert .reason { font-size: 11px; color: var(--ink); font-weight: 700; }
.mini-alert .meta { font-size: 9.5px; color: var(--ink-mute); margin-top: 2px; }
.mini-alert .amt { font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 700; font-size: 13px; color: var(--danger); }
.mini-pill-btn {
  font-size: 9.5px; font-weight: 700; color: #fff;
  background: linear-gradient(180deg, var(--amber-500), var(--amber-600));
  border: none; border-radius: var(--r-sm); padding: 6px 10px; cursor: default;
  white-space: nowrap;
}

.mini-plan {
  background: linear-gradient(165deg, var(--brand-900), var(--brand-700));
  color: #eaf2f9; border-radius: var(--r-md); padding: 16px;
}
.mini-plan .lbl { font-size: 9.5px; letter-spacing: .14em; color: #8eb0cd; font-weight: 700; margin-bottom: 9px; }
.mini-plan .course { display: flex; align-items: center; gap: 8px; }
.mini-plan .course .sw { width: 10px; height: 10px; border-radius: 3px; background: var(--brand-500); }
.mini-plan .course h4 { font-size: 14px; color: #fff; font-family: "Zen Kaku Gothic New", sans-serif; }
.mini-plan .stu { font-size: 11px; color: #a9c6dd; margin: 2px 0 12px; }
.mini-plan .price { font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 700; font-size: 30px; color: #fff; display: flex; align-items: baseline; gap: 3px; }
.mini-plan .price .yen { font-size: 16px; }
.mini-plan .price .per { font-size: 12px; color: #9fc0d9; font-weight: 500; }
.mini-plan .div { height: 1px; background: rgba(255,255,255,.12); margin: 13px 0; }
.mini-plan .pr { display: flex; align-items: center; gap: 8px; font-size: 11.5px; padding: 4px 0; color: #cfe0ee; }
.mini-plan .pr svg { width: 14px; height: 14px; color: var(--teal-100); flex: 0 0 auto; }
.mini-plan .pr .grow { flex: 1; }
.mini-plan .pr b { color: #fff; }
.mini-plan .stripe {
  margin-top: 12px; display: flex; align-items: center; gap: 7px;
  font-size: 10px; color: #9fc0d9;
  background: rgba(255,255,255,.07); border-radius: var(--r-sm); padding: 7px 10px;
}
.mini-plan .stripe svg { width: 14px; height: 14px; flex: 0 0 auto; }

/* =========================== 途中CTAバンド（離脱前のもう一押し） =========================== */
.lpx-midcta { padding: 0 0 8px; }
.lpx-midcta .lp-container {
  position: relative; overflow: hidden;
  background:
    radial-gradient(520px 240px at 90% 10%, rgba(29,138,138,.28), transparent 60%),
    linear-gradient(135deg, var(--brand-800), var(--brand-700));
  border-radius: var(--r-lg);
  padding: 34px 40px;
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
  box-shadow: var(--shadow-pop);
}
.lpx-midcta .tx { flex: 1; min-width: 260px; }
.lpx-midcta .tx h3 {
  font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 900;
  font-size: clamp(20px, 2.4vw, 26px); color: #fff; line-height: 1.34;
}
.lpx-midcta .tx p { font-size: 13.5px; color: #b9cee0; margin-top: 9px; line-height: 1.7; }
.lpx-midcta .act { display: flex; flex-direction: column; gap: 9px; align-items: flex-start; }
.lpx-midcta .note { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: #9fc0d9; }
.lpx-midcta .note svg { width: 14px; height: 14px; color: var(--teal-100); flex: 0 0 auto; }

/* =========================== 導入の流れ =========================== */
/* ★v9（指摘B）：3ステップの前に置く「ステップ0＝最初に入金口座をつなぐ（一度きり）」の前置きバー。
   集金開始の前提（教室の入金口座接続）を、重く見せず1本バーで軽く触れる。
   淡いティール面＋点線下罫で“はじめに”感を出す。狭幅では縦積みに畳む（下の @media）。 */
.lp-step-zero {
  display: flex; align-items: center; gap: 16px;
  background: linear-gradient(135deg, var(--teal-100), rgba(220,232,242,.5));
  border: 1px solid #bfe5e3; border-radius: var(--r-lg);
  padding: 16px 22px; margin-bottom: 22px; box-shadow: var(--shadow-1);
}
.lp-step-zero .z-badge {
  flex: 0 0 auto; font-size: 11px; font-weight: 900; letter-spacing: .06em;
  color: #fff; background: var(--teal-600);
  border-radius: 999px; padding: 5px 13px;
  font-family: "Zen Kaku Gothic New", sans-serif;
}
.lp-step-zero .z-ic {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 11px;
  background: var(--surface); border: 1px solid #bfe5e3; color: var(--teal-600);
  display: grid; place-items: center;
}
.lp-step-zero .z-ic svg { width: 21px; height: 21px; }
.lp-step-zero .z-tx { min-width: 0; }
.lp-step-zero .z-tx b {
  display: block; font-size: 15px; color: var(--brand-900); line-height: 1.4;
  font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 700;
}
.lp-step-zero .z-tx span { display: block; font-size: 12.5px; color: var(--ink-soft); line-height: 1.7; margin-top: 3px; }

.lp-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; position: relative; }
.lp-step {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 28px 24px; box-shadow: var(--shadow-1); position: relative;
  min-width: 0;
}
.lp-step .n {
  width: 44px; height: 44px; border-radius: 12px;
  background: linear-gradient(135deg, var(--brand-600), var(--teal-600)); color: #fff;
  display: grid; place-items: center;
  font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 900; font-size: 20px;
  box-shadow: 0 6px 16px rgba(42,90,137,.28); margin-bottom: 16px;
}
.lp-step h3 { font-size: 17px; color: var(--ink); margin-bottom: 8px; }
.lp-step p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.8; }
.lp-step .tag {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 14px;
  font-size: 11.5px; font-weight: 700; color: var(--teal-600); background: var(--teal-100);
  border-radius: 999px; padding: 4px 11px;
}
.lp-step .tag svg { width: 13px; height: 13px; }
.lp-step.final {
  background: linear-gradient(165deg, var(--brand-800), var(--brand-700)); border-color: var(--brand-700);
}
.lp-step.final h3, .lp-step.final .n { color: #fff; }
.lp-step.final .n { background: var(--amber-500); color: #3b2a06; box-shadow: 0 6px 16px rgba(224,150,31,.4); }
.lp-step.final p { color: #c4d7e8; }
.lp-step.final .tag { background: rgba(255,255,255,.12); color: #d8eceb; }

/* =====================================================================
   生徒・保護者がやること（v10・lp-review-v5 指摘1/2）
   教室側フロー（tint）の直後に、支払う側の体験を独立3ステップ＋カード登録画面イメージで立てる。
   トーンは藍×ティール＋琥珀を踏襲。横スクロール0維持（grid は minmax(0,1fr)）。
   ===================================================================== */
.lpx-payer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 40px; align-items: center;
}

/* 左：生徒側3ステップ（縦に積む小カード列） */
.lpx-payer-steps { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.lpx-pstep {
  position: relative;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 18px 20px 18px 22px;
  box-shadow: var(--shadow-1); min-width: 0;
}
/* 左端のティールのアクセントバーで“ステップ感”と縦の繋がりを出す */
.lpx-pstep::before {
  content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px;
  border-radius: 3px; background: linear-gradient(180deg, var(--teal-600), var(--brand-600));
}
.lpx-pstep .head { display: flex; align-items: center; gap: 12px; margin-bottom: 9px; }
.lpx-pstep .n {
  width: 34px; height: 34px; border-radius: 10px; flex: 0 0 auto;
  background: linear-gradient(135deg, var(--brand-600), var(--teal-600)); color: #fff;
  display: grid; place-items: center;
  font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 900; font-size: 16px;
  box-shadow: 0 5px 13px rgba(42,90,137,.26);
}
.lpx-pstep .ic {
  width: 34px; height: 34px; border-radius: 10px; flex: 0 0 auto; margin-left: auto;
  background: var(--teal-100); border: 1px solid #bfe5e3; color: var(--teal-600);
  display: grid; place-items: center;
}
.lpx-pstep .ic svg { width: 18px; height: 18px; }
.lpx-pstep h3 {
  font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 700;
  font-size: 16px; color: var(--brand-900); margin-bottom: 5px;
}
.lpx-pstep p { font-size: 13px; color: var(--ink-soft); line-height: 1.75; }
.lpx-pstep p b { color: var(--brand-700); }
/* 3ステップめ（以後自動）は到達点として琥珀のアクセントで締める */
.lpx-pstep.final::before { background: linear-gradient(180deg, var(--amber-500), var(--amber-600)); }
.lpx-pstep.final .n { background: var(--amber-500); color: #3b2a06; box-shadow: 0 5px 13px rgba(224,150,31,.34); }
.lpx-pstep.final .ic { background: #fdf3e3; border-color: #f0d8a8; color: var(--amber-600); }

/* 右：生徒/保護者が見るカード登録画面のイメージ（MVP画面C相当・Stripeホスト風） */
.lpx-payer-visual { position: relative; min-width: 0; max-width: 100%; }
.lpx-payer-visual .lp-shot { transition: transform .25s ease, box-shadow .25s ease; }
.lpx-payer-visual:hover .lp-shot { transform: translateY(-4px); box-shadow: 0 36px 80px rgba(16,36,56,.24); }
.lpx-payer-tag {
  position: absolute; top: -12px; left: 18px; z-index: 2;
  font-size: 11px; font-weight: 700; background: var(--teal-600); color: #fff;
  padding: 5px 12px; border-radius: 999px; box-shadow: var(--shadow-2);
  display: inline-flex; align-items: center; gap: 6px;
}
.lpx-payer-tag svg { width: 13px; height: 13px; }

.lpx-pay { padding: 18px; }
.lpx-pay .pay-top { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.lpx-pay .pay-sw {
  width: 38px; height: 38px; border-radius: 10px; flex: 0 0 auto;
  background: linear-gradient(135deg, var(--teal-600), var(--brand-600));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.2);
}
.lpx-pay .pay-shop { font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 700; font-size: 14px; color: var(--ink); line-height: 1.2; }
.lpx-pay .pay-stu { font-size: 11.5px; color: var(--ink-mute); margin-top: 2px; }

/* mandate明示ブロック（いつ・いくら・停止可）を淡いティール面で目立たせる */
.lpx-pay .pay-mandate {
  background: var(--teal-100); border: 1px solid #bfe5e3;
  border-radius: var(--r-sm); padding: 12px 13px; margin-bottom: 14px;
}
.lpx-pay .pay-mandate .row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 3px 0;
}
.lpx-pay .pay-mandate .row + .row { border-top: 1px dashed #bfe5e3; padding-top: 7px; margin-top: 4px; }
.lpx-pay .pay-mandate .k { font-size: 11.5px; color: var(--ink-soft); font-weight: 700; min-width: 0; }
.lpx-pay .pay-mandate .v { font-size: 13px; color: var(--brand-900); font-weight: 700; text-align: right; }
.lpx-pay .pay-mandate .v.money {
  font-family: "Zen Kaku Gothic New", sans-serif; font-size: 17px; color: var(--brand-700);
  font-variant-numeric: tabular-nums;
}
.lpx-pay .pay-mandate .v.money small { font-size: 10.5px; font-weight: 500; color: var(--ink-mute); margin-left: 2px; }
.lpx-pay .pay-mandate .note {
  display: flex; align-items: flex-start; gap: 6px; margin-top: 9px;
  font-size: 10.5px; color: var(--teal-600); font-weight: 700; line-height: 1.5;
}
.lpx-pay .pay-mandate .note svg { width: 13px; height: 13px; flex: 0 0 auto; margin-top: 1px; }

/* カード入力欄のイメージ（実入力はしない・読み取り専用の見た目） */
.lpx-pay .pay-form { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.lpx-pay .pay-fld { min-width: 0; }
.lpx-pay .pay-fld .lbl { display: block; font-size: 10.5px; font-weight: 700; color: var(--ink-mute); margin-bottom: 5px; }
.lpx-pay .pay-fld .box {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 9px 11px; min-width: 0;
}
.lpx-pay .pay-fld .box svg { width: 16px; height: 16px; color: var(--ink-mute); flex: 0 0 auto; }
.lpx-pay .pay-fld .box .ph {
  font-size: 12.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums;
  letter-spacing: .02em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lpx-pay .pay-fld-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }

/* 「登録して支払いを開始」ボタン（画面内のイメージ・押せない見た目） */
.lpx-pay .pay-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(180deg, var(--brand-700), var(--brand-800)); color: #fff;
  border-radius: var(--r-sm); padding: 12px; font-weight: 700; font-size: 13.5px;
  box-shadow: 0 8px 18px rgba(16,36,56,.18);
}
.lpx-pay .pay-btn svg { width: 17px; height: 17px; flex: 0 0 auto; }
.lpx-pay .pay-secure {
  display: flex; align-items: flex-start; gap: 6px; margin-top: 11px;
  font-size: 10.5px; color: var(--ink-mute); line-height: 1.5;
}
.lpx-pay .pay-secure svg { width: 13px; height: 13px; color: var(--ok); flex: 0 0 auto; margin-top: 1px; }

/* 教室主の不安を名指しで消すコピー（指摘2）。淡い面の横バー1本。 */
.lpx-payer-relief {
  display: flex; align-items: flex-start; gap: 16px;
  margin-top: 40px;
  background: linear-gradient(135deg, rgba(220,232,242,.55), var(--surface));
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 22px 26px; box-shadow: var(--shadow-1);
}
.lpx-payer-relief .ic {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px;
  background: var(--brand-050); border: 1px solid var(--brand-100, #d6e3f0); color: var(--brand-700);
  display: grid; place-items: center;
}
.lpx-payer-relief .ic svg { width: 22px; height: 22px; }
.lpx-payer-relief .tx { min-width: 0; }
.lpx-payer-relief .tx h3 {
  font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 700;
  font-size: 17px; color: var(--brand-900); line-height: 1.4; margin-bottom: 6px;
}
.lpx-payer-relief .tx p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.85; }
.lpx-payer-relief .tx p b { color: var(--brand-700); }
.lpx-payer-relief .tx p a { color: var(--teal-600); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.lpx-payer-relief .tx p a:hover { color: var(--brand-700); }

/* =========================== 声（サンプルと明示・捏造しない） =========================== */
.lpx-voices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.lpx-voice {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 24px 22px; box-shadow: var(--shadow-1); position: relative;
  min-width: 0;
}
.lpx-voice .stars { display: flex; gap: 2px; color: var(--amber-500); margin-bottom: 12px; }
.lpx-voice .stars svg { width: 16px; height: 16px; }
.lpx-voice .body { font-size: 13.5px; color: var(--ink-soft); line-height: 1.85; }
.lpx-voice .body b { color: var(--brand-700); }
.lpx-voice .who { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.lpx-voice .ava { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 13px; flex: 0 0 auto; font-family: "Zen Kaku Gothic New", sans-serif; }
.lpx-voice .who .nm { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.lpx-voice .who .role { font-size: 11px; color: var(--ink-mute); }
.lpx-sample-note {
  text-align: center; margin-top: 22px;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; color: var(--ink-mute);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 14px;
}
.lpx-sample-note svg { width: 14px; height: 14px; flex: 0 0 auto; }
.lpx-voices-foot { text-align: center; margin-top: 8px; }

/* =========================== 価格 =========================== */
.lp-price-grid {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px;
  max-width: 860px; margin: 0 auto; align-items: center;
}
.lp-price-card {
  background: linear-gradient(165deg, var(--brand-900), var(--brand-700));
  border-radius: var(--r-lg); padding: 36px 34px; color: #eaf2f9;
  box-shadow: var(--shadow-pop); position: relative; overflow: hidden;
  min-width: 0;
}
.lp-price-card::after {
  content: ""; position: absolute; right: -60px; top: -60px;
  width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle, rgba(29,138,138,.4), transparent 70%);
}
.lp-price-card .ribbon {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 700; background: var(--amber-500); color: #3b2a06;
  border-radius: 999px; padding: 5px 13px; margin-bottom: 18px;
}
.lp-price-card .ribbon svg { width: 14px; height: 14px; flex: 0 0 auto; }
.lp-price-card .plan-name { font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 700; font-size: 19px; color: #fff; }
.lp-price-card .amount {
  display: flex; align-items: baseline; gap: 5px; margin: 12px 0 6px;
  font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 900;
  flex-wrap: wrap; /* 狭幅で ¥/数字/単位 が折り返せるように（はみ出し保険・v6から維持） */
}
.lp-price-card .amount .yen { font-size: 22px; color: #fff; }
.lp-price-card .amount .num { font-size: 52px; color: #fff; line-height: 1; }
.lp-price-card .amount .per { font-size: 15px; color: #9fc0d9; font-weight: 500; }
.lp-price-card .from { font-size: 12.5px; color: #9fc0d9; margin-bottom: 22px; }
.lp-price-list { display: flex; flex-direction: column; gap: 12px; position: relative; }
.lp-price-list li { display: flex; align-items: center; gap: 11px; font-size: 13.5px; color: #dce8f2; list-style: none; }
.lp-price-list .ck { width: 20px; height: 20px; border-radius: 6px; background: rgba(29,138,138,.35); color: var(--teal-100); display: grid; place-items: center; flex: 0 0 auto; }
.lp-price-list .ck svg { width: 13px; height: 13px; }
.lp-price-aside { min-width: 0; }
.lp-price-aside h3 {
  font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 900;
  font-size: 25px; color: var(--brand-900); line-height: 1.35; margin-bottom: 14px;
}
.lp-price-aside p { font-size: 14px; color: var(--ink-soft); line-height: 1.85; margin-bottom: 22px; }
.lp-price-aside p b { color: var(--brand-700); }
.lp-price-aside .note { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-mute); margin-top: 10px; }
.lp-price-aside .note svg { width: 15px; height: 15px; color: var(--ok); flex: 0 0 auto; }

/* =========================== FAQ（よくある不安への先回り） =========================== */
.lpx-faq-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.lpx-faq {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--shadow-1); overflow: hidden;
}
.lpx-faq summary {
  list-style: none; cursor: pointer; padding: 18px 22px;
  display: flex; align-items: center; gap: 14px;
  font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 700;
  font-size: 15px; color: var(--brand-900);
}
.lpx-faq summary::-webkit-details-marker { display: none; }
.lpx-faq summary .q {
  width: 26px; height: 26px; border-radius: 8px; flex: 0 0 auto;
  background: var(--brand-050); color: var(--brand-700);
  display: grid; place-items: center; font-weight: 900; font-size: 13px;
}
.lpx-faq summary .grow { flex: 1; min-width: 0; }
.lpx-faq summary .chev {
  width: 20px; height: 20px; flex: 0 0 auto; color: var(--ink-mute);
  transition: transform .22s ease;
}
.lpx-faq[open] summary .chev { transform: rotate(180deg); color: var(--brand-600); }
.lpx-faq[open] summary { color: var(--brand-700); }
.lpx-faq .a {
  padding: 0 22px 20px 62px; font-size: 13.5px; color: var(--ink-soft); line-height: 1.85;
}
.lpx-faq .a b { color: var(--brand-700); }

/* =========================== CTA + 事前登録フォーム =========================== */
.lp-signup {
  background:
    radial-gradient(600px 300px at 12% 0%, rgba(29,138,138,.14), transparent 60%),
    radial-gradient(600px 320px at 92% 100%, rgba(58,114,168,.14), transparent 60%),
    var(--brand-900);
  color: #eaf2f9;
}
.lp-signup .lp-container { display: grid; grid-template-columns: 1fr 1.05fr; gap: 52px; align-items: center; }
.lp-signup-copy { min-width: 0; }
.lp-signup-copy .lp-kicker { color: var(--teal-100); }
.lp-signup-copy h2 {
  font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 900;
  font-size: clamp(26px, 3.2vw, 36px); color: #fff; line-height: 1.32;
}
.lp-signup-copy p { font-size: 15px; color: #b9cee0; line-height: 1.85; margin-top: 16px; }
.lp-signup-copy p b { color: #fff; }
.lp-signup-bullets { margin-top: 22px; display: flex; flex-direction: column; gap: 12px; }
.lp-signup-bullets li { display: flex; align-items: center; gap: 11px; font-size: 13.5px; color: #dce8f2; list-style: none; }
.lp-signup-bullets .ck { width: 22px; height: 22px; border-radius: 7px; background: rgba(29,138,138,.4); color: var(--teal-100); display: grid; place-items: center; flex: 0 0 auto; }
.lp-signup-bullets .ck svg { width: 13px; height: 13px; }

.lp-form-card {
  background: var(--surface); border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop); padding: 30px 30px 26px; color: var(--ink);
  min-width: 0;
}
.lp-form-card h3 { font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 900; font-size: 20px; color: var(--brand-900); }
.lp-form-card .sub { font-size: 12.5px; color: var(--ink-mute); margin: 6px 0 20px; }
.lp-fld { margin-bottom: 15px; }
.lp-fld label { display: block; font-size: 12.5px; font-weight: 700; color: var(--ink-soft); margin-bottom: 7px; }
.lp-fld .opt-note { font-weight: 500; color: var(--ink-mute); font-size: 11px; }
.lp-fld .input, .lp-fld .select, .lp-fld .textarea {
  width: 100%; font-family: inherit; font-size: 14px;
  padding: 11px 13px; border: 1px solid var(--line);
  border-radius: var(--r-sm); background: var(--surface); color: var(--ink);
  transition: border-color .14s ease, box-shadow .14s ease;
}
.lp-fld .textarea { resize: vertical; min-height: 76px; line-height: 1.6; }
.lp-fld .input::placeholder, .lp-fld .textarea::placeholder { color: var(--ink-mute); }
.lp-fld .input:focus, .lp-fld .select:focus, .lp-fld .textarea:focus {
  outline: none; border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(58,114,168,.16);
}
.lp-fld-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 13px; }
.lp-seg { display: flex; gap: 8px; flex-wrap: wrap; }
.lp-seg .opt {
  flex: 1 1 auto; min-width: 0; /* ★v6: min-width:88px をやめ、狭幅でも縮める（はみ出し保険） */
  display: flex; align-items: center; justify-content: center; gap: 7px;
  font-size: 13px; font-weight: 700; color: var(--ink-soft);
  border: 1px solid var(--line); background: var(--surface-2);
  border-radius: var(--r-sm); padding: 10px 8px; cursor: pointer; transition: all .14s ease;
}
.lp-seg .opt svg { width: 15px; height: 15px; flex: 0 0 auto; }
.lp-seg .opt:hover { border-color: var(--brand-500); }
.lp-seg .opt.on { background: var(--brand-700); color: #fff; border-color: var(--brand-700); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
.lp-form-card .submit { width: 100%; justify-content: center; margin-top: 8px; }
.lp-form-card .form-foot {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  font-size: 12px; font-weight: 700; color: var(--ok); margin-top: 14px;
}
.lp-form-card .form-foot svg { width: 15px; height: 15px; flex: 0 0 auto; }
/* 規約/プライバシーのダミーリンク＋同意文は削除し、最小限の正直な一文に（v4踏襲） */
.lp-form-card .privacy-note { font-size: 11px; color: var(--ink-mute); margin-top: 10px; text-align: center; line-height: 1.6; }

.lp-form-done { display: none; text-align: center; padding: 22px 6px; }
.lp-form-done.show { display: block; }
.lp-form-done .ic {
  width: 56px; height: 56px; border-radius: 16px; margin: 0 auto 16px;
  background: var(--ok-bg); border: 1px solid var(--ok-line); color: var(--ok);
  display: grid; place-items: center;
}
.lp-form-done .ic svg { width: 30px; height: 30px; }
.lp-form-done h3 { color: var(--ok); margin-bottom: 8px; }
.lp-form-done p { font-size: 13px; color: var(--ink-soft); line-height: 1.7; }
.lp-form-done p b { color: var(--brand-700); }
.lp-form.hidden { display: none; }

/* =========================== モバイル固定CTAバー（離脱対策） =========================== */
.lpx-stickycta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: none; align-items: center; gap: 12px;
  padding: 11px 16px calc(11px + env(safe-area-inset-bottom, 0px));
  background: rgba(15,36,56,.96); backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 -8px 24px rgba(0,0,0,.22);
}
.lpx-stickycta .tx { flex: 1; min-width: 0; }
.lpx-stickycta .tx b { display: block; font-size: 13px; color: #fff; line-height: 1.2; }
.lpx-stickycta .tx small { font-size: 10.5px; color: #9fc0d9; }
.lpx-stickycta .lp-btn { padding: 11px 18px; font-size: 14px; white-space: nowrap; flex: 0 0 auto; }

/* =========================== フッター =========================== */
.lp-footer { background: var(--brand-900); color: #8eb0cd; padding: 44px 0 30px; }
.lp-footer .top { display: flex; gap: 28px; align-items: flex-start; flex-wrap: wrap; }
.lp-footer .about { max-width: 30em; min-width: 0; }
.lp-footer .lp-brand .name { color: #fff; }
.lp-footer .lp-brand .name small { color: #6d8eaa; }
.lp-footer .about p { font-size: 13px; color: #94afc8; line-height: 1.8; margin-top: 14px; }
.lp-footer .cols { display: flex; gap: 52px; margin-left: auto; flex-wrap: wrap; }
.lp-footer .col h4 { font-size: 12px; color: #b9cee0; letter-spacing: .08em; margin-bottom: 12px; }
.lp-footer .col a { display: block; font-size: 13px; color: #84a3bf; padding: 4px 0; transition: color .14s ease; }
.lp-footer .col a:hover { color: #dce8f2; }
.lp-footer .bar {
  margin-top: 32px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.08);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-size: 11.5px; color: #6d8eaa;
}
.lp-footer .bar .grow { flex: 1; }
.lp-footer .mock-note {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.06); border-radius: 999px; padding: 4px 11px;
}

/* =====================================================================
   レスポンシブ
   ★v6: SPで1カラム化する全グリッドは `minmax(0,1fr)` を使う（横スクロール根治）。
     v7/v8 でもこれを完全維持する（横スクロール0を壊さない）。
   ===================================================================== */
@media (max-width: 980px) {
  .lp-hero .lp-container,
  .lp-feature,
  .lp-price-grid,
  .lpx-payer-grid,
  .lp-signup .lp-container { grid-template-columns: minmax(0, 1fr); }
  .lp-feature.reverse .lp-feature-text { order: 0; }
  .lp-feature { gap: 32px; }
  .lp-pain-grid, .lp-steps, .lpx-voices { grid-template-columns: minmax(0, 1fr); }
  .lpx-assure .lp-container { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px 14px; }
  .lpx-assure .a + .a { border-left: none; padding-left: 4px; }
  /* ヒーロー右が1カラム全幅になるので、フローティングは内側寄りに。 */
  .lp-float.f-ok { left: 0; }
  .lp-float.f-alert { right: 0; }
  .lp-nav-links { display: none; }
  .lp-hero-visual { margin-top: 12px; }
  .lpx-midcta .lp-container { flex-direction: column; align-items: flex-start; }
  /* ★v10：生徒側セクションも1カラム化。3ステップが上、カード登録画面イメージが下。
     画面イメージにはタグの負オフセット分の余白を確保する。 */
  .lpx-payer-grid { gap: 28px; }
  .lpx-payer-visual { margin-top: 6px; }
}

/* 中間幅（タブレット〜小型ノート）：グリッドは維持しつつ列比率を少し詰める。
   まだカード化はしない（横に5列入る幅があるため）。 */
@media (max-width: 720px) and (min-width: 561px) {
  .mini-table { --mini-cols: 1.5fr .8fr .88fr .7fr 1fr; }
  .mini-table .mini-row { column-gap: 6px; }
}

/* =====================================================================
   ★SP（〜560px）：ミニテーブルを「1生徒＝1カード型」に組み替える
   （v6の組み替えを踏襲。横スクロールに頼らない縦積みカード）
   ★v7の本丸：各セルで「ラベル：値」の値を確実に見せる。
     - 値を消していた overflow:hidden / text-overflow:ellipsis / nowrap を打ち消す
     - 値側（.mini-val / .att-val / .mini-badge）を flex:1 1 auto; min-width:0;
       text-align:right で右側に確実に表示
     - ラベル ::before は flex:0 0 auto で左に固定（伸び縮みしない）
     - ヒーロー用 .mini-table-hero も同じ規則を当て、値を消す縮小上書きを残さない
   ★横スクロール0維持：値側は必ず min-width:0 を持つので、flex:1 1 auto でも
     カード幅（=container content幅）を超えない（要素を広げて再びはみ出すのを回避）。
   ===================================================================== */
@media (max-width: 560px) {
  .lp-container { padding: 0 18px; }
  .lp-fld-2 { grid-template-columns: minmax(0, 1fr); }
  .lp-section { padding: 52px 0; }
  .lpx-assure .lp-container { grid-template-columns: minmax(0, 1fr); }
  .lpx-faq summary { font-size: 14px; padding: 16px 18px; }
  .lpx-faq .a { padding: 0 18px 18px 18px; }
  .lpx-stickycta { display: flex; }
  body.lp { padding-bottom: 72px; } /* 固定CTA分の余白 */

  /* ★v9（指摘B）：ステップ0バーはSPで縦積みに畳む（バッジ＋アイコンを横、本文を下）。
     横1列だと狭幅で本文が窮屈になるため、上段にバッジ＋アイコン、下段にテキスト。 */
  .lp-step-zero { flex-wrap: wrap; gap: 10px 12px; padding: 15px 18px; }
  .lp-step-zero .z-tx { flex: 1 1 100%; }

  /* ★v10（指摘1/2）：生徒側3ステップのカード内余白を詰め、アイコンが右端に張り付いて
     窮屈にならないよう調整。カード登録画面イメージのmandate行・カード入力2列はそのまま
     （minmax(0,1fr)なので狭幅でも崩れない）。教室主の不安コピーはSPで縦積みに。 */
  .lpx-pstep { padding: 16px 16px 16px 19px; }
  .lpx-payer-relief { flex-direction: column; gap: 12px; padding: 20px 18px; }
  .lpx-pay { padding: 15px; }
  .lpx-pay .pay-mandate .v.money { font-size: 16px; }

  /* ★途中CTAバンド：SPでは左右padding(40px)が残ると内側が窮屈。22pxに詰め、
     .tx の min-width:260px も解除（狭幅で縮めるように）。 */
  .lpx-midcta .lp-container { padding: 26px 22px; }
  .lpx-midcta .tx { min-width: 0; }

  /* SPで横スクロールを根絶。ヒーロー右のフローティングバッジの負オフセットが
     画面端からはみ出していたため、SPでは画像の「内側」に重ねる位置へ寄せる
     （負値をやめ、内側の正値に固定）。v6から維持。 */
  .lp-float { left: auto; right: auto; max-width: calc(100% - 24px); }
  .lp-float.f-ok { left: 8px; right: auto; bottom: -14px; }
  .lp-float.f-alert { right: 8px; left: auto; top: 8px; }

  /* テーブル枠：カード間に余白を出すため枠線を外し背景を抜く */
  .mini-table { border: none; background: transparent; border-radius: 0; overflow: visible; }

  /* head 行は SP では不要（各セルがラベルを持つ） */
  .mini-table .mini-row.head { display: none; }

  /* データ行＝カード化（グリッドをやめ縦積み） */
  .mini-table .mini-row {
    display: block;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 11px 13px;
    margin-bottom: 9px;
    box-shadow: var(--shadow-1);
  }
  .mini-table .mini-row:last-child { margin-bottom: 0; border-bottom: 1px solid var(--line); }

  /* 生徒名はカード上段に全幅 */
  .mini-row .mini-stu {
    width: 100%;
    padding-bottom: 9px; margin-bottom: 8px;
    border-bottom: 1px dashed var(--line-soft);
  }
  .mini-row .mini-stu .mini-nm { font-size: 12.5px; }
  .mini-row .mini-stu .mini-ava { width: 26px; height: 26px; font-size: 11px; }

  /* ★残り項目は「ラベル（data-label・::before） : 値」の1行に。
     ラベル左・値右。各セルは flex コンテナ。
     ★ここで値を消していた overflow/ellipsis/nowrap を完全に打ち消す。 */
  .mini-row .mini-course,
  .mini-row .mini-att,
  .mini-row .mini-money,
  .mini-row .mini-cell-badge {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; padding: 5px 0;
    text-align: left;
    white-space: normal;            /* nowrap を打ち消す */
    overflow: visible;              /* ★overflow:hidden を打ち消す（値の clip を解除） */
    text-overflow: clip;            /* ★ellipsis を打ち消す */
    font-size: 12px;                /* SPカードで読める基本サイズ */
    color: var(--ink);
    min-width: 0;
  }
  .mini-row .mini-course + .mini-att,
  .mini-row .mini-att + .mini-money,
  .mini-row .mini-money + .mini-cell-badge { border-top: 1px solid var(--line-soft); }

  /* 各セルの前に data-label を見出しとして差し込む（左・伸び縮みしない） */
  .mini-row .mini-course::before,
  .mini-row .mini-att::before,
  .mini-row .mini-money::before,
  .mini-row .mini-cell-badge::before {
    content: attr(data-label);
    flex: 0 0 auto;                 /* ラベルは固定幅（縮まない・伸びない） */
    font-size: 10.5px; font-weight: 700; color: var(--ink-mute);
    margin-right: 12px;
    white-space: nowrap;            /* ラベル自体は1行のまま */
  }

  /* ★コース・月謝の「値」を明示要素 .mini-val で包んでいる（v7のHTML）。
     値側を右に確実に表示。flex:1 1 auto＋min-width:0 で残り幅に収まり、
     カード幅を超えない（横スクロールを増やさない）。 */
  .mini-row .mini-course .mini-val,
  .mini-row .mini-money .mini-val {
    flex: 1 1 auto; min-width: 0;
    text-align: right;
    white-space: normal;            /* 長ければ折り返す（消さない） */
    overflow: visible; text-overflow: clip;
    word-break: break-word; overflow-wrap: anywhere;
  }
  .mini-row .mini-course .mini-val { color: var(--ink); font-weight: 600; }
  .mini-row .mini-money { font-weight: 700; font-size: 12.5px; }
  .mini-row .mini-money .mini-val { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
  .mini-row .mini-money-mute .mini-val { color: var(--ink-mute); font-weight: 500; font-size: 11px; }

  /* 出席セルの値（.att-val）も右に確実に表示。 */
  .mini-row .mini-att { font-weight: 700; color: var(--ink-soft); }
  .mini-row .mini-att .att-val {
    flex: 1 1 auto; min-width: 0;
    display: inline-flex; align-items: baseline; justify-content: flex-end; gap: 2px;
    text-align: right;
    white-space: normal;            /* 念のため折り返し可（消さない） */
    overflow: visible; text-overflow: clip;
  }
  .mini-row .mini-att .att-n { font-size: 13px; }
  .mini-row .mini-att small { margin-left: 3px; }
  .mini-row .mini-att.att-mute .att-val { color: var(--ink-mute); }

  /* 状況バッジ（決済失敗/未収/入金済/休会）を右側に確実に表示。
     バッジ自体は内容幅だが、ラッパ側を右寄せにして見えるように。 */
  .mini-row .mini-cell-badge { padding-bottom: 0; }
  .mini-row .mini-cell-badge .mini-badge {
    flex: 0 1 auto; min-width: 0;
    margin-left: auto;              /* ラベルの後、右端へ寄せる */
    font-size: 10px; padding: 3px 8px;
    white-space: nowrap;            /* バッジ内の文言は1行（短いので消えない） */
    overflow: visible;
  }

  /* ★ヒーロー用テーブルもSPでは本体カードと完全に同じ規則。
     縮小フォントの上書き（.mini-table-hero .mini-course の 10px 等）が
     SPカードで値を潰さないよう、ここで値が見えるサイズに揃える。 */
  .mini-table-hero .mini-row { column-gap: 0; padding: 11px 13px; display: block; }
  .mini-table-hero .mini-course,
  .mini-table-hero .mini-att,
  .mini-table-hero .mini-money,
  .mini-table-hero .mini-cell-badge { font-size: 12px; }
  .mini-table-hero .mini-course .mini-val,
  .mini-table-hero .mini-money .mini-val { font-size: 12px; }
  .mini-table-hero .mini-att .att-n { font-size: 13px; }
  .mini-table-hero .mini-badge { font-size: 10px; padding: 3px 8px; }

  /* 休会行はSPでも薄く（カード型でも維持） */
  .mini-table .mini-row.is-rest { opacity: .7; }
}