/* Page: About — サービス紹介LP */

function getMonthEnd() {
  const now = new Date();
  return new Date(now.getFullYear(), now.getMonth() + 1, 0, 23, 59, 59, 999);
}

function calcRemaining() {
  const diff = Math.max(0, getMonthEnd().getTime() - Date.now());
  if (diff === 0) return { days: 0, hms: '00:00:00' };
  const days = Math.floor(diff / 86400000);
  const h = Math.floor((diff % 86400000) / 3600000);
  const m = Math.floor((diff % 3600000) / 60000);
  const s = Math.floor((diff % 60000) / 1000);
  const pad = n => String(n).padStart(2, '0');
  return { days, hms: `${pad(h)}:${pad(m)}:${pad(s)}` };
}



// ── メインLP ────────────────────────────────────────────────────
function About({ nav }) {
  const [rem, setRem] = React.useState(calcRemaining);
  const [formData, setFormData] = React.useState({
    name: '', email: '', phone: '', age: '',
    investment_experience: '', investment_style: '', annual_income: '', total_assets: '',
  });
  const [formErrors, setFormErrors] = React.useState({});
  const [formSubmitted, setFormSubmitted] = React.useState(false);
  const [formSubmitError, setFormSubmitError] = React.useState('');
  const [formSubmitting, setFormSubmitting] = React.useState(false);

  const handleFormChange = (field, val) => {
    setFormData(prev => ({ ...prev, [field]: val }));
    if (formErrors[field]) setFormErrors(prev => ({ ...prev, [field]: '' }));
  };
  const handleFormSubmit = async (e) => {
    e.preventDefault();
    const errors = {};
    if (!formData.name.trim())  errors.name  = 'お名前は必須です';
    if (!formData.email.trim()) errors.email = 'メールアドレスは必須です';
    else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) errors.email = 'メールアドレスの形式が正しくありません';
    if (Object.keys(errors).length > 0) { setFormErrors(errors); return; }
    setFormSubmitting(true);
    setFormSubmitError('');
    try {
      const res = await fetch('/api/roadmap-request', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          name:                 formData.name.trim(),
          email:                formData.email.trim(),
          phone:                formData.phone.trim() || null,
          age:                  formData.age || null,
          investment_experience: formData.investment_experience || null,
          investment_style:     formData.investment_style || null,
          annual_income:        formData.annual_income || null,
          total_assets:         formData.total_assets || null,
        }),
      });
      if (!res.ok) {
        const d = await res.json().catch(() => ({}));
        setFormSubmitError(d.error || '送信に失敗しました。もう一度お試しください');
        setFormSubmitting(false);
        return;
      }
    } catch (_) {
      setFormSubmitError('送信に失敗しました。もう一度お試しください');
      setFormSubmitting(false);
      return;
    }
    localStorage.setItem('kabujiro_registered', 'true');
    window.open('https://lin.ee/TzlOu02', '_blank');
    setFormSubmitted(true);
    setFormSubmitting(false);
  };

  React.useEffect(() => {
    const id = setInterval(() => setRem(calcRemaining()), 1000);
    return () => clearInterval(id);
  }, []);

  const rmSteps = [
    { n: 1, title: '投資の“地図”を手に入れる',      desc: 'なぜ今、お金に働いてもらうのか。全体像がスッとわかって、「自分にもできそう」に変わる入口です。', free: true  },
    { n: 2, title: 'ゴールと作戦を決める',                    desc: 'いくらを、いつまでに。あなたに合った“増やし方の方針”を決めて、ブレない軸をつくります。',      free: false },
    { n: 3, title: '株のしくみを、基礎からインストール',       desc: '口座の開き方から注文・チャートの読み方まで。知識ゼロでも“自分で動かせる”状態になります。', free: false },
    { n: 4, title: '“伸びる株”を見抜く目を養う',    desc: '値動きと業績、2つの分析でチャンスを絞り込む。“なんとなく”から、根拠を持って狙える自分へ。', free: false },
  ];

  return (
    <main className="ab-page">

      {/* ── カウントダウンバナー ── */}
      <div className="ab-cd">
        ⏰ 今だけ！億り人ロードマップ配布終了まで　<b>あと{rem.days}日</b>（{rem.hms}）
      </div>

      {/* ── サブヘッダー帯 ── */}
      <div className="ab-subbanner">毎日5分から、無理なく投資を学ぼう</div>

      {/* ── ヒーロー ── */}
      <section className="ab-hero">
        {/* 装飾ドット（aria-hidden） */}
        <span className="ab-dot ab-dot-1" aria-hidden="true" />
        <span className="ab-dot ab-dot-2" aria-hidden="true" />
        <span className="ab-dot ab-dot-3" aria-hidden="true" />
        <div className="ab-nisa-chip">🆕 NISA章 & 始め方ガイドを無料公開中</div>
        <span className="ab-tag">投資初心者のための株式学習</span>
        <h1 className="ab-h1">本格的な株の学びを、<br /><span className="ab-hl-mk">誰でも手の届く価格</span>で。</h1>
        <p className="ab-sub">
          <strong className="ab-sub-em">「ちゃんと学びたい。でも、どこも高い…」</strong><br />
          そんな悩みにこたえる、株次郎の会話形式レッスン。小中学生でもわかる言葉で、本気の内容を。
        </p>
        <button className="ab-cta ab-pri" onClick={() => nav.goHome()}>
          無料登録ですぐ始める
          <span className="ab-mini">NISAも、はじめ方も。メール登録だけでOK。</span>
        </button>
        {!window.currentUser && (
          <div style={{ width: '100%', marginTop: 12 }}>
            <p style={{ fontSize: 12, color: '#7E8A9A', margin: '0 0 6px', textAlign: 'center' }}>すでにアカウントをお持ちの方</p>
            <a
              href="/login"
              style={{
                display: 'block',
                width: '100%',
                boxSizing: 'border-box',
                textAlign: 'center',
                fontSize: 14,
                fontWeight: 700,
                color: '#13294B',
                border: '1.5px solid #13294B',
                borderRadius: 10,
                padding: '12px 0',
                textDecoration: 'none',
              }}
            >
              ログイン
            </a>
          </div>
        )}
        <button className="ab-cta ab-sec" onClick={() => document.getElementById('signup-form')?.scrollIntoView({ behavior: 'smooth' })}>「今だけ！」億り人ロードマップを受け取る</button>
      </section>

      {/* ── 悩み提起 ── */}
      <section className="ab-sec ab-white">
        <div className="ab-eyebrow">こんな悩み、ありませんか？</div>
        <div className="ab-pain-heading-row">
          <h2 className="ab-h2" style={{ margin: 0, flex: 1 }}>投資、気になるけど一歩が出ない。</h2>
          <img src="/characters/student_a.png" alt="悩む生徒キャラクター" className="ab-pain-char" />
        </div>
        <div className="ab-painwrap" style={{ marginTop: 16 }}>
          <div className="ab-mini-char ab-mini-s">
            <img src="assets/student_aicon.jpg" alt="悩む生徒" className="ab-mini-img" />
            生徒
          </div>
          <div style={{ flex: 1 }}>
            <div className="ab-pain"><span className="ab-q">Q.</span>何から始めればいいか、わからない</div>
            <div className="ab-pain"><span className="ab-q">Q.</span>調べても、結局よくわからない</div>
            <div className="ab-pain"><span className="ab-q">Q.</span>学びたいけど、スクールは数十万円…</div>
          </div>
        </div>
      </section>

      {/* ── 特徴3枚 ── */}
      <section className="ab-sec">
        <div className="ab-eyebrow">株次郎が解決します</div>
        <div className="ab-feat-heading-row">
          <div style={{ flex: 1 }}>
            <h2 className="ab-h2" style={{ margin: '0 0 4px' }}>むずかしい株を、会話でやさしく。</h2>
          </div>
          {/* kabujiro-cast.png 入荷後に src を差し替えてください */}
          <img src="/characters/kabujiro-cast.png" alt="株次郎と生徒たちのキャラクター集合" className="ab-feat-cast" onError={e => { e.currentTarget.style.display = 'none'; }} />
        </div>
        <div className="ab-feat">
          <div className="ab-ic">💬</div>
          <h3 className="ab-feat-h">会話形式だから、つまずかない</h3>
          <p className="ab-feat-p">難しい言葉は株次郎が全部かみ砕く。読むだけで自然に身につく。</p>
        </div>
        <div className="ab-feat">
          <div className="ab-ic">🗺️</div>
          <h3 className="ab-feat-h">ゼロから実践まで、体系的に</h3>
          <p className="ab-feat-p">はじめに→基礎→テクニカル→ファンダ。迷わず進める学習ロードマップ。</p>
        </div>
        <div className="ab-feat">
          <div className="ab-ic">📊</div>
          <h3 className="ab-feat-h">安いのに、本格的</h3>
          <p className="ab-feat-p">実際のチャートや決算の読み方まで。図解とミニテストで「使える」知識に。</p>
        </div>
      </section>

      {/* ── 2倍株データ ── */}
      <section className="ab-sec ab-white">
        <div className="ab-eyebrow">チャンスは、毎年ある</div>
        <h2 className="ab-h2">「2倍株」は、夢物語じゃない。</h2>
        <p className="ab-body-text">
          1年で株価が2倍以上になる銘柄は、実は毎年たくさん生まれています。2018〜2023年で見ると、毎年およそ数十〜150銘柄、平均すると年90銘柄ほど。やみくもでは当たりませんが、社会のトレンドを読み、業績が伸びる会社を分析して絞り込めば——"狙える"。その分析力を、株次郎は会話形式でゼロから教えます。
        </p>
        <img
          src="/chart-images/intro/double-bagger-data.svg"
          alt="2倍株データ：年間2倍超え銘柄数の推移"
          style={{ width: '100%', maxWidth: 640, borderRadius: 12, display: 'block', margin: '16px auto 20px' }}
        />
        <button className="ab-cta ab-pri" onClick={() => nav.goHome()}>
          だから、まずは無料登録して学んでみませんか？
          <span className="ab-mini">メール登録だけ・クレカ不要</span>
        </button>
      </section>

      {/* ── 会話サンプル ── */}
      <section className="ab-sec ab-white">
        <div className="ab-eyebrow">レッスンのイメージ</div>
        <h2 className="ab-h2">こんな感じで進みます</h2>
        <div className="ab-chat">
          <div className="ab-msg">
            <div className="ab-av ab-av-s" />
            <div className="ab-bubble">先生、「PER」ってよく聞くけど何ですか…？</div>
          </div>
          <div className="ab-msg ab-msg-r">
            <div className="ab-av ab-av-k" />
            <div className="ab-bubble ab-bub-k">いい質問！PERは「人気のものさし」。株価が利益の何倍まで買われてるか、を表すんだ。</div>
          </div>
          <div className="ab-msg">
            <div className="ab-av ab-av-s" />
            <div className="ab-bubble">なるほど！それなら覚えられそう！</div>
          </div>
        </div>
      </section>

      {/* ── まずは無料 ── */}
      <section className="ab-sec">
        <div className="ab-value">
          <div className="ab-val-big">まずは<em className="ab-em-blue">無料</em>で試せる。</div>
          <p className="ab-val-p">無料登録すると、「はじめに」セクター1〜3とNISA章が読めます。雰囲気を見てから、ゆっくり決めてOK。</p>
          <button className="ab-cta ab-green" style={{ marginTop: 16 }} onClick={() => nav.goHome()}>無料登録ですぐ始める</button>
        </div>
      </section>

      {/* ── 学習ロードマップ（リデザイン） ── */}
      <section className="ab-sec ab-white">
        <div className="ab-eyebrow">学習の流れ</div>
        <h2 className="ab-h2">この順番で、「なんとなく」が「狙える」に変わる</h2>
        <div className="ab-rm-list">

          {rmSteps.map(({ n, title, desc, free }) => (
            <div key={n} className="ab-rm-item">
              <div className="ab-rm-left">
                <div className="ab-rm-num">{n}</div>
                <div className="ab-rm-line" />
              </div>
              <div className="ab-rm-card">
                <div className="ab-rm-step-label">STEP {n}</div>
                <h3 className="ab-rm-title">{title}</h3>
                <p className="ab-rm-desc">{desc}</p>
                {free && <span className="ab-rm-free-tag">✓ 無料で試せる</span>}
              </div>
            </div>
          ))}

          {/* GOAL */}
          <div className="ab-rm-item">
            <div className="ab-rm-left">
              <div className="ab-rm-num ab-rm-num-goal">★</div>
            </div>
            <div className="ab-rm-card ab-rm-goal-card">
              <div className="ab-rm-step-label ab-rm-goal-label">GOAL</div>
              <h3 className="ab-rm-title ab-rm-goal-title">
                自分の頭で分析して、<em className="ab-rm-accent">2倍株も"狙える"</em>投資家へ。
              </h3>
              <button className="ab-cta ab-pri ab-rm-goal-btn" onClick={() => nav.goHome()}>
                無料登録ではじめる
                <span className="ab-mini">メール登録だけ・クレカ不要</span>
              </button>
              <p className="ab-rm-goal-note">※ 無料登録で、基礎コース前半とNISA章が読めます。</p>
            </div>
          </div>

        </div>
      </section>

      {/* ── 2コース設計 ── */}
      <section className="ab-sec ab-white">
        <div className="ab-eyebrow">2つのコースで、着実に</div>
        <h2 className="ab-h2">
          基礎で<span className="ab-tc-g">"土台"</span>を固めて、<br />
          応用で<span className="ab-tc-b">"実践"</span>へ。
        </h2>
        <p className="ab-tc-lead">
          株次郎は、2段階で実力がつく設計です。順番に進むだけで、"なんとなく"から"自分で根拠を持って動ける"へ。
        </p>

        {/* STEP1：基礎コース */}
        <div className="ab-tc-card ab-tc-c1">
          <span className="ab-tc-tag ab-tc-tag-free">一部 無料</span>
          <div className="ab-tc-step ab-tc-step-green">STEP 1</div>
          <div className="ab-tc-title ab-tc-dark">基礎コース</div>
          <span className="ab-tc-role ab-tc-role-green">土台づくり</span>
          <ul className="ab-tc-list">
            <li className="ab-tc-li ab-tc-li-dark">投資の全体像・目標設定・株のしくみ</li>
            <li className="ab-tc-li ab-tc-li-dark">チャートの読み方・企業分析の基本</li>
            <li className="ab-tc-li ab-tc-li-dark">自分に合う分析スタイルを決める</li>
          </ul>
          <div className="ab-tc-arrow ab-tc-arrow-green">→ 「自分で考えて投資できる」状態へ</div>
        </div>

        {/* コネクタ */}
        <div className="ab-tc-connector">
          <div className="ab-tc-vline" />
          <span className="ab-tc-clbl">基礎を修了したら</span>
          <div className="ab-tc-vline" />
        </div>

        {/* STEP2：応用コース */}
        <div className="ab-tc-card ab-tc-c2">
          <span className="ab-tc-tag ab-tc-tag-locked">🔒 修了後に解放</span>
          <div className="ab-tc-step ab-tc-step-blue">STEP 2</div>
          <div className="ab-tc-title ab-tc-white">応用コース</div>
          <span className="ab-tc-role ab-tc-role-navy">実践</span>
          <ul className="ab-tc-list">
            <li className="ab-tc-li ab-tc-li-light">テクニカル・ファンダの実践的な投資手法</li>
            <li className="ab-tc-li ab-tc-li-light">いくつもの手法を、深く・具体的に</li>
            <li className="ab-tc-li ab-tc-li-light">実際のトレードに直結する知識へ</li>
          </ul>
          <div className="ab-tc-arrow ab-tc-arrow-blue">→ 「実際のトレードで使える」レベルへ</div>
        </div>

        <button className="ab-cta ab-pri" style={{ marginTop: 20 }} onClick={() => nav.goHome()}>
          無料登録して基礎から始める
        </button>
      </section>

      {/* ── 競合比較表 ── */}
      <section className="ab-sec ab-cmp-sec">
        <div className="ab-cmp-header">
          <img
            src="/characters/kabujiro_main.png"
            alt="株次郎キャラクター"
            className="ab-cmp-char"
            onError={e => { e.currentTarget.style.display = 'none'; }}
          />
          <span className="ab-cmp-badge">他の投資スクールと比べてみると</span>
          <h2 className="ab-h2 ab-cmp-h2">
            『学ぶのに数十万円』が当たり前だった<br />投資教育を、誰にでも手が届く価格で。
          </h2>
          <div className="ab-cmp-bubble">
            中身は本格派。基礎から実践の手法まで、クイズで確かめながら着実に。それで月1,480円だよ。
          </div>
        </div>
        <p className="ab-cmp-scrollhint">← 横にスクロールできます →</p>
        <div className="ab-cmp-scroll">
          <table className="ab-cmp-table">
            <thead>
              <tr>
                <th className="ab-cmp-th ab-cmp-th-row">比較項目</th>
                <th className="ab-cmp-th ab-cmp-th-a">A社</th>
                <th className="ab-cmp-th ab-cmp-th-b">B社</th>
                <th className="ab-cmp-th ab-cmp-th-c">C社</th>
                <th className="ab-cmp-th ab-cmp-th-kj">株次郎</th>
              </tr>
            </thead>
            <tbody>
              {[
                ['料金', '約40万円/一括', '約30万円/一括', '1,200円/月', <><span className="ab-cmp-o">◎</span> 1,480円/月<br/><small>初期費用0円</small></>],
                ['初期費用', '数万円', 'あり', <span className="ab-cmp-o">○</span>, <span className="ab-cmp-o">○</span>],
                ['いつでも解約', <span className="ab-cmp-x">✕</span>, <span className="ab-cmp-x">✕</span>, <span className="ab-cmp-o">○</span>, <span className="ab-cmp-o">○</span>],
                ['体系的なカリキュラム', <span className="ab-cmp-o">○</span>, <span className="ab-cmp-o">○</span>, <><span className="ab-cmp-t">△</span><br/><small>動画が中心</small></>, <><span className="ab-cmp-o">◎</span><br/><small>基礎→応用の段階式</small></>],
                ['実践的な手法まで', <span className="ab-cmp-o">○</span>, <span className="ab-cmp-o">○</span>, <span className="ab-cmp-t">△</span>, <><span className="ab-cmp-o">◎</span><br/><small>テクニカル・ファンダの実践6手法</small></>],
                ['理解度クイズ', <span className="ab-cmp-t">△</span>, <span className="ab-cmp-x">✕</span>, <span className="ab-cmp-x">✕</span>, <><span className="ab-cmp-o">◎</span><br/><small>全セクター＋総合テスト</small></>],
                ['進捗の見える化', <span className="ab-cmp-t">△</span>, <span className="ab-cmp-t">△</span>, <span className="ab-cmp-x">✕</span>, <><span className="ab-cmp-o">◎</span><br/><small>進捗バー・達成バッジ</small></>],
                ['初心者へのわかりやすさ', <span className="ab-cmp-o">○</span>, <><span className="ab-cmp-t">△</span><br/><small>専門用語が多め</small></>, <span className="ab-cmp-t">△</span>, <><span className="ab-cmp-o">◎</span><br/><small>先生と生徒の会話形式 図解つき</small></>],
                ['スマホで学べる', <span className="ab-cmp-t">△</span>, <span className="ab-cmp-o">○</span>, <span className="ab-cmp-o">○</span>, <><span className="ab-cmp-o">◎</span><br/><small>スキマ時間に1セクター</small></>],
                ['相場ニュース解説', <><span className="ab-cmp-t">△</span><br/><small>一部のみ</small></>, <span className="ab-cmp-x">✕</span>, <span className="ab-cmp-x">✕</span>, <><span className="ab-cmp-o">◎</span><br/><small>ニュースを解説し投資判断の考え方まで</small></>],
                ['まずは無料で試せる', <><small>体験セミナー</small></>, <><small>無料動画</small></>, <span className="ab-cmp-x">✕</span>, <><span className="ab-cmp-o">◎</span><br/><small>メール登録だけで無料体験 クレカ登録なし</small></>],
                ['無料登録の特典', <span className="ab-cmp-x">✕</span>, <span className="ab-cmp-t">△</span>, <span className="ab-cmp-x">✕</span>, <><span className="ab-cmp-o">◎</span><br/><small>「億り人ロードマップ」PDFプレゼント</small></>],
              ].map(([label, a, b, c, kj], i) => (
                <tr key={i}>
                  <td className="ab-cmp-td ab-cmp-td-row">{label}</td>
                  <td className="ab-cmp-td">{a}</td>
                  <td className="ab-cmp-td">{b}</td>
                  <td className="ab-cmp-td">{c}</td>
                  <td className="ab-cmp-td ab-cmp-td-kj">{kj}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <p className="ab-cmp-note">※ 表の比較情報は当社調査によるものです（2026年7月時点）。最新情報は各サービスの公式サイトをご確認ください。</p>
        <button className="ab-cta ab-cmp-cta" onClick={() => nav.goHome()}>無料登録ではじめてみる</button>
        <p className="ab-cmp-cta-sub">メールアドレスの登録だけ・クレジットカード不要</p>
      </section>

      {/* ── 料金プラン ── */}
      <section className="ab-sec">
        <div className="ab-eyebrow">料金プラン</div>
        <h2 className="ab-h2">シンプルな1プランだけ</h2>
        <div className="ab-price-card">
          <div className="ab-price-badge">全コンテンツ利用可</div>
          <div className="ab-price-num">
            <span className="ab-price-currency">¥</span>
            <span className="ab-price-big">1,480</span>
            <span className="ab-price-unit">円（税込）/ 月</span>
          </div>
          <p className="ab-price-copy">全チャプター見放題＋総合テストつき。着実に理解しながら進められる。</p>
          <ul className="ab-price-list">
            <li>全6チャプター・全セクター閲覧可能</li>
            <li>図解・ミニテスト・コラム完全収録</li>
            <li>いつでも解約可能</li>
          </ul>
          <div className="ab-price-note">無料登録で「はじめに」1〜3セクターとNISA章が読めます！</div>
          <button className="ab-cta ab-pri" onClick={() => nav.goHome()}>無料登録して始める</button>
        </div>
      </section>

      {/* ── 億り人ロードマップ ── */}
      <section className="ab-sec">
        <div className="ab-lm">
          <span className="ab-now">⏰ 配布終了まであと{rem.days}日</span>
          <div className="ab-pdf">📘</div>
          <h3 className="ab-lm-h">最短で「億り人ロードマップ」</h3>
          <p className="ab-lm-p">初心者のための、ゼロから資産を育てる道のりを1冊に。期間限定で無料プレゼント中。</p>
          <div className="ab-disc-inline">※ 本資料は投資の参考情報です。特定の銘柄・手法を推奨するものではありません。投資はご自身の判断と責任で行ってください。</div>
          <button className="ab-cta ab-pri" onClick={() => document.getElementById('signup-form')?.scrollIntoView({ behavior: 'smooth' })}>「今だけ！！最短で億り人ロードマップ」を受け取る</button>
        </div>
      </section>

      {/* ── 始め方・準備 ── */}
      <section className="ab-sec ab-white">
        <div className="ab-prep">
          <h3 className="ab-prep-h">🧭 まだ口座がない方へ</h3>
          <p className="ab-prep-p">証券口座の開き方や、少額（単元未満株）からの始め方は、無料の記事で解説しています。</p>
          <button className="ab-cta ab-green" onClick={() => nav.goGuide()}>始め方・準備はこちら！</button>
        </div>
      </section>

      {/* ── NISA無料アピール ── */}
      <section className="ab-sec ab-nisa-sec">
        <div className="ab-eyebrow ab-eyebrow-green">話題のNISAも、無料</div>
        <h2 className="ab-h2">「NISAって結局なに？」が、スッと分かる。</h2>
        <p className="ab-body-text">
          税金ゼロで増やせる国の制度・NISA。気になってるけど難しそうで後回し…そんな人のために、NISAの基本を1章まるごと無料で公開しています。2つの枠の違い、いくらまで・いつまで非課税か、口座の開き方まで——株次郎と生徒の会話で、つまずかず最後まで。総合テストつきで、ちゃんと身につきます。
        </p>
        <ul className="ab-nisa-checklist">
          <li><span className="ab-nisa-check">✓</span>NISAってなに？ 税金ゼロのしくみ</li>
          <li><span className="ab-nisa-check">✓</span>つみたて投資枠 と 成長投資枠 の使い分け</li>
          <li><span className="ab-nisa-check">✓</span>生涯1,800万円・非課税は無期限</li>
          <li><span className="ab-nisa-check">✓</span>口座開設〜最初の積立までの手順</li>
        </ul>
        <button className="ab-cta ab-green" onClick={() => nav.goHome()}>無料登録してNISAを学ぶ</button>
      </section>

      {/* ── ファイナルCTA ── */}
      <section className="ab-final">
        <h2 className="ab-final-h">今日から、株の学びを。</h2>
        <p className="ab-final-p">安いからって、適当じゃない。<br />本気のあなたを、株次郎が最後まで案内します。</p>
        <button className="ab-cta ab-pri" onClick={() => nav.goHome()}>無料登録ですぐ始める</button>
        <button className="ab-cta ab-sec" onClick={() => document.getElementById('signup-form')?.scrollIntoView({ behavior: 'smooth' })}>億り人ロードマップを受け取る</button>
      </section>

      {/* ── 申込フォーム ── */}
      <section id="signup-form" className="ab-sec ab-white">
        <div className="ab-eyebrow">億り人ロードマップを受け取る</div>
        <h2 className="ab-h2">まずは登録してみよう</h2>
        <p className="ab-lead">記入後、LINE友だち追加ページへご案内します。</p>

        {formSubmitted ? (
          <div className="ab-form-done">
            <div className="ab-form-done-icon">🎉</div>
            <h3 className="ab-form-done-h">送信完了しました！</h3>
            <p className="ab-form-done-p">LINEの友だち追加もお忘れなく。<br />追加後、自動でロードマップをお送りします。</p>
            <a className="ab-cta ab-line-btn"
              href={window.KABUJIRO_CONFIG && window.KABUJIRO_CONFIG.LINE_ADD_URL || 'https://lin.ee/TzlOu02'}
              target="_blank" rel="noopener noreferrer">
              <span className="ab-line-ico">LINE</span>
              株次郎を友だち追加する
            </a>
            <p className="ab-form-done-note">※ LINEを追加後、自動メッセージが届きます</p>
          </div>
        ) : (
          <form className="ab-form" onSubmit={handleFormSubmit} noValidate>

            {/* お名前 */}
            <div className="ab-form-row">
              <label className="ab-form-label">お名前 <span className="ab-req">必須</span></label>
              <input className={`ab-form-input ${formErrors.name ? 'ab-input-err' : ''}`}
                type="text" placeholder="山田 太郎"
                value={formData.name}
                onChange={e => handleFormChange('name', e.target.value)} />
              {formErrors.name && <span className="ab-form-err">{formErrors.name}</span>}
            </div>

            {/* メールアドレス */}
            <div className="ab-form-row">
              <label className="ab-form-label">メールアドレス <span className="ab-req">必須</span></label>
              <input className={`ab-form-input ${formErrors.email ? 'ab-input-err' : ''}`}
                type="email" placeholder="example@mail.com"
                value={formData.email}
                onChange={e => handleFormChange('email', e.target.value)} />
              {formErrors.email && <span className="ab-form-err">{formErrors.email}</span>}
            </div>

            {/* 電話番号 */}
            <div className="ab-form-row">
              <label className="ab-form-label">電話番号 <span className="ab-opt">任意</span></label>
              <input className="ab-form-input" type="tel" placeholder="090-0000-0000"
                value={formData.phone}
                onChange={e => handleFormChange('phone', e.target.value)} />
            </div>

            {/* 年齢・経験（横並び） */}
            <div className="ab-form-row-2col">
              <div className="ab-form-row">
                <label className="ab-form-label">年齢 <span className="ab-opt">任意</span></label>
                <select className="ab-form-select"
                  value={formData.age}
                  onChange={e => handleFormChange('age', e.target.value)}>
                  <option value="">選択してください</option>
                  <option>〜19歳</option>
                  <option>20代</option>
                  <option>30代</option>
                  <option>40代</option>
                  <option>50代〜</option>
                </select>
              </div>
              <div className="ab-form-row">
                <label className="ab-form-label">株の投資経験 <span className="ab-opt">任意</span></label>
                <select className="ab-form-select"
                  value={formData.investment_experience}
                  onChange={e => handleFormChange('investment_experience', e.target.value)}>
                  <option value="">選択してください</option>
                  <option>あり</option>
                  <option>なし</option>
                </select>
              </div>
            </div>

            {/* 投資意欲 */}
            <div className="ab-form-row">
              <label className="ab-form-label">投資をどのくらいやりたい？ <span className="ab-opt">任意</span></label>
              <div className="ab-radio-group">
                {[
                  '①まずはお試し・少額から',
                  '②将来のために着実に',
                  '③本格的に大きく狙いたい',
                ].map(opt => (
                  <label key={opt} className={`ab-radio ${formData.investment_style === opt ? 'ab-radio-on' : ''}`}>
                    <input type="radio" name="investment_style" value={opt}
                      checked={formData.investment_style === opt}
                      onChange={() => handleFormChange('investment_style', opt)} />
                    {opt}
                  </label>
                ))}
              </div>
            </div>

            {/* 年収・保有資産（横並び） */}
            <div className="ab-form-row-2col">
              <div className="ab-form-row">
                <label className="ab-form-label">年収 <span className="ab-opt">任意</span></label>
                <select className="ab-form-select"
                  value={formData.annual_income}
                  onChange={e => handleFormChange('annual_income', e.target.value)}>
                  <option value="">選択してください</option>
                  <option>〜300万円</option>
                  <option>300〜500万円</option>
                  <option>500〜800万円</option>
                  <option>800〜1,000万円</option>
                  <option>1,000万円〜</option>
                </select>
              </div>
              <div className="ab-form-row">
                <label className="ab-form-label">保有資産 <span className="ab-opt">任意</span></label>
                <select className="ab-form-select"
                  value={formData.total_assets}
                  onChange={e => handleFormChange('total_assets', e.target.value)}>
                  <option value="">選択してください</option>
                  <option>〜100万円</option>
                  <option>100〜500万円</option>
                  <option>500〜1,000万円</option>
                  <option>1,000〜3,000万円</option>
                  <option>3,000万円〜</option>
                </select>
              </div>
            </div>

            {formSubmitError && (
              <p style={{ color: '#DC2626', fontSize: 13, margin: '0 0 8px', background: '#FEF2F2', padding: '10px 14px', borderRadius: 8 }}>
                {formSubmitError}
              </p>
            )}
            <button type="submit" className="ab-cta ab-pri" style={{ marginTop: 8 }} disabled={formSubmitting}>
              {formSubmitting ? '送信中…' : 'ロードマップを受け取る'}
            </button>
            <p className="ab-form-privacy">送信後、LINEページへご案内します。個人情報は厳重に管理し、第三者に提供しません。</p>
          </form>
        )}
      </section>

      {/* ── 免責事項 ── */}
      <section className="ab-disc-sec">
        <b className="ab-disc-ttl">ご利用にあたっての注意</b>
        株次郎は株式投資の学習を目的とした教育サービスです。特定の銘柄・金融商品の売買や、特定の投資手法を推奨・勧誘するものではありません。投資に関する最終的な判断は、必ずご自身の責任と判断において行ってください。本サービスで提供する情報に基づく投資結果について、運営者は一切の責任を負いません。投資には元本割れ等のリスクがあります。
      </section>

      {/* ── フッター ── */}
      <footer className="ab-footer">
        <div className="ab-flogo">
          <div className="ab-fbadge">株</div>
          <b style={{ color: '#fff' }}>株次郎</b>
        </div>
        <div className="ab-flinks">
          <a className="ab-flink" href="/legal/tokushoho">特定商取引法に基づく表記</a>
          <a className="ab-flink" href="/legal/privacy">プライバシーポリシー</a>
          <a className="ab-flink" href="/legal/terms">利用規約</a>
          <a className="ab-flink" href="https://mirai-finance.com" target="_blank" rel="noopener noreferrer">運営会社</a>
        </div>
        <div className="ab-contact"><a className="ab-contact-link" href="/contact">お問い合わせフォーム</a></div>
        <div className="ab-contact" style={{ marginBottom: 2 }}>メール：info@mirai-finance.com</div>
        <div className="ab-copy">© 2026 MIRAI合同会社</div>
      </footer>

      <AboutStyles />
    </main>
  );
}

function AboutStyles() {
  return <style>{`
    /* ── ページ外枠 ── */
    .ab-page {
      width: 100%;
      padding: 0 0 80px;
      overflow-x: hidden;
    }

    /* ── カウントダウンバナー ── */
    .ab-cd {
      background: linear-gradient(90deg, #E0413C, #C9302C);
      color: #fff;
      text-align: center;
      padding: 10px 20px;
      font-size: 13px;
      font-weight: 800;
      line-height: 1.6;
    }
    .ab-cd b { font-size: 15px; }

    /* ── ヒーロー ── */
    .ab-hero {
      padding: 32px 36px 36px;
      background:
        radial-gradient(ellipse at 92% 0%, rgba(46,111,214,.13) 0%, transparent 54%),
        linear-gradient(180deg, #E8F1FC 0%, var(--bg) 100%);
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      position: relative;
      overflow: hidden;
    }
    .ab-tag {
      display: inline-block;
      font-size: 11px; font-weight: 800;
      color: var(--navy-800);
      background: var(--navy-100);
      padding: 5px 14px; border-radius: 20px;
      margin-bottom: 16px;
    }
    .ab-h1 { font-size: 42px; font-weight: 900; line-height: 1.28; color: var(--ink-900); margin: 0; }
    .ab-hl { color: var(--navy-800); }
    .ab-hl-mk {
      display: inline; color: #2E6FD6;
      background: linear-gradient(transparent 62%, rgba(46,111,214,.18) 62%);
      padding-bottom: 2px;
    }
    .ab-sub { font-size: 16.5px; color: var(--ink-500); margin-top: 18px; line-height: 2.1; }
    .ab-sub-em { color: var(--ink-900); font-weight: 800; }
    .ab-subbanner {
      background: linear-gradient(90deg, #1a3a5c 0%, #13294B 100%);
      color: rgba(255,255,255,0.88);
      font-size: 13px; font-weight: 600;
      letter-spacing: 0.1em;
      padding: 10px 20px;
      text-align: center;
      width: 100%; box-sizing: border-box;
    }
    .ab-nisa-chip {
      display: inline-flex; align-items: center; gap: 4px;
      font-size: 11px; font-weight: 700;
      color: var(--green-600, #16a34a); background: rgba(31,111,92,.07);
      border: 1.5px solid rgba(31,111,92,.22);
      padding: 4px 12px; border-radius: 99px; margin-bottom: 12px;
    }
    /* ── NISA セクション ── */
    .ab-nisa-sec {
      background: linear-gradient(140deg, #f0f7ff 0%, #ebf5eb 100%);
      border-color: rgba(31,111,92,.20);
    }
    .ab-eyebrow-green { color: var(--green-600, #16a34a); }
    .ab-nisa-checklist {
      list-style: none; padding: 0; margin: 16px 0 20px;
      display: flex; flex-direction: column; gap: 10px;
    }
    .ab-nisa-checklist li {
      display: flex; align-items: flex-start; gap: 9px;
      font-size: 13.5px; font-weight: 600; color: var(--ink-700); line-height: 1.55;
    }
    .ab-nisa-check {
      display: inline-flex; align-items: center; justify-content: center;
      width: 20px; height: 20px; border-radius: 50%;
      background: var(--green-600, #16a34a); color: #fff;
      font-size: 11px; font-weight: 900; flex: none; margin-top: 1px;
    }
    /* 装飾ドット */
    .ab-dot { position: absolute; border-radius: 50%; pointer-events: none; }
    .ab-dot-1 { width: 10px; height: 10px; background: rgba(46,111,214,.42); top: 14px; right: 20px; }
    .ab-dot-2 { width:  7px; height:  7px; background: rgba(224,153,43,.52); top: 36px; right: 44px; }
    .ab-dot-3 { width:  8px; height:  8px; background: rgba(31,111,92,.38);  top: 10px; right: 58px; }
    .ab-scene {
      display: flex; align-items: flex-end; gap: 16px;
      margin: 24px 0 8px;
    }
    .ab-char {
      border-radius: 18px;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      font-size: 11px; font-weight: 700; text-align: center;
      padding: 12px 8px;
    }
    .ab-char small { display: block; margin-top: 6px; }
    .ab-char-s {
      width: 96px; height: 108px;
      border: 2px dashed #9AABB8; background: #EEF2F6; color: #5B6B7A;
    }
    .ab-char-k {
      width: 118px; height: 128px;
      border: 2px dashed var(--navy-700); background: var(--navy-100); color: var(--navy-800);
    }
    .ab-kbj-img {
      width: 60px; height: 60px; border-radius: 50%; object-fit: cover;
      border: 2px solid var(--navy-700);
    }
    .ab-stu-img {
      width: 60px; height: 60px; border-radius: 50%; object-fit: cover;
      border: 2px solid #9AABB8;
    }
    .ab-em { font-size: 36px; line-height: 1; }

    /* ── キャラクター共通 ── */
    .ab-hero-chars {
      display: flex; align-items: flex-end; justify-content: center;
      gap: 8px; margin: 20px 0 4px;
    }
    .ab-hero-kbj {
      height: 170px; width: auto; object-fit: contain;
      filter: drop-shadow(0 6px 14px rgba(19,41,75,.18));
    }
    .ab-hero-stu {
      height: 130px; width: auto; object-fit: contain;
      filter: drop-shadow(0 4px 10px rgba(0,0,0,.10));
    }
    .ab-pain-heading-row {
      display: flex; align-items: flex-end; gap: 10px; margin-bottom: 0;
    }
    .ab-pain-char {
      height: 84px; width: auto; object-fit: contain; flex: none;
      filter: drop-shadow(0 2px 6px rgba(0,0,0,.09));
    }
    .ab-feat-heading-row {
      display: flex; align-items: center; gap: 12px; margin-bottom: 18px;
    }
    .ab-feat-cast {
      height: 100px; width: auto; object-fit: contain; flex: none;
      filter: drop-shadow(0 3px 8px rgba(0,0,0,.10));
    }
    @media (max-width: 480px) {
      .ab-hero-kbj  { height: 130px; }
      .ab-hero-stu  { height: 100px; }
      .ab-pain-char { display: none; }
      .ab-feat-cast { display: none; }
    }

    /* ── CTA ボタン ── */
    .ab-cta {
      display: block; width: 100%; text-align: center;
      padding: 15px 20px; border-radius: 14px;
      font-weight: 800; font-size: 14px; font-family: var(--font-jp);
      cursor: pointer; border: none;
      transition: opacity .15s, transform .1s;
      margin-top: 12px;
    }
    .ab-cta:hover { opacity: .9; transform: translateY(-1px); }
    .ab-cta:active { transform: translateY(1px); opacity: 1; }
    .ab-pri { background: var(--navy-800); color: #fff; box-shadow: 0 8px 18px rgba(30,58,138,.28); }
    .ab-sec { background: #fff; color: var(--ink-900); border: 2px solid var(--ink-200); }
    .ab-green { background: var(--green-600); color: #fff; box-shadow: 0 8px 18px rgba(5,150,105,.22); }
    .ab-mini { display: block; font-size: 11px; font-weight: 600; opacity: .82; margin-top: 3px; }

    /* ── セクション共通 ── */
    .ab-sec { padding: 30px 36px; }
    .ab-white { background: #fff; }
    .ab-eyebrow {
      font-size: 11px; font-weight: 800; letter-spacing: .08em;
      color: var(--navy-800); margin-bottom: 8px;
      text-transform: uppercase; font-family: var(--font-en);
    }
    .ab-h2 { font-size: 22px; font-weight: 900; line-height: 1.4; margin-bottom: 6px; }
    .ab-lead { font-size: 13px; color: var(--ink-500); margin-bottom: 16px; }
    .ab-body-text { font-size: 13.5px; color: var(--ink-700); line-height: 1.9; margin: 0 0 18px; font-weight: 500; }

    /* ── 悩みリスト ── */
    .ab-painwrap { display: flex; gap: 14px; align-items: flex-start; }
    .ab-mini-char {
      width: 62px; flex: none; border-radius: 14px;
      font-size: 10px; font-weight: 700; text-align: center;
      padding: 8px 4px;
      display: flex; flex-direction: column; align-items: center; gap: 4px;
    }
    .ab-mini-s { border: 2px dashed #9AABB8; background: #EEF2F6; color: #5B6B7A; }
    .ab-mini-k { border: 2px dashed var(--navy-700); background: var(--navy-100); color: var(--navy-800); }
    .ab-mini-img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
    .ab-pain {
      background: var(--ink-50); border: 1px solid var(--ink-100); border-radius: 12px;
      padding: 12px 14px; margin-bottom: 8px;
      font-size: 13px; font-weight: 600;
      display: flex; gap: 8px; align-items: flex-start;
    }
    .ab-white .ab-pain { background: var(--bg); }
    .ab-q { color: var(--navy-800); font-weight: 900; flex: none; }

    /* ── 特徴カード ── */
    .ab-feat {
      background: #fff; border: 1px solid var(--ink-100);
      border-radius: 16px; padding: 18px; margin-bottom: 12px;
      box-shadow: var(--shadow-sm);
    }
    .ab-ic {
      width: 42px; height: 42px; border-radius: 12px;
      background: var(--green-100); color: var(--green-600);
      display: flex; align-items: center; justify-content: center;
      font-size: 22px; margin-bottom: 10px;
    }
    .ab-feat-h { font-size: 16px; font-weight: 800; margin: 0 0 5px; }
    .ab-feat-p { font-size: 13px; color: var(--ink-500); margin: 0; }

    /* ── 会話サンプル ── */
    .ab-chat {
      background: var(--ink-50); border: 1px solid var(--ink-100);
      border-radius: 16px; padding: 18px;
      box-shadow: var(--shadow-sm);
    }
    .ab-msg { display: flex; gap: 9px; margin-bottom: 12px; align-items: flex-start; }
    .ab-msg:last-child { margin-bottom: 0; }
    .ab-msg-r { flex-direction: row-reverse; }
    .ab-av {
      width: 44px; height: 44px; border-radius: 50%; flex: none;
      background-size: cover; background-position: center;
      background-repeat: no-repeat;
    }
    .ab-av-s {
      background-color: var(--green-100, #dcfce7);
      background-image: url("assets/student_aicon.jpg");
    }
    .ab-av-k {
      background-color: var(--navy-100);
      background-image: url("assets/kabujiro_mainicon.jpg");
    }
    .ab-bubble {
      background: #fff; border-radius: 12px; padding: 10px 14px;
      font-size: 13px; font-weight: 600; line-height: 1.7;
      box-shadow: var(--shadow-sm);
    }
    .ab-bub-k { background: var(--green-100); }

    /* ── まずは無料 ── */
    .ab-value {
      background: var(--navy-900); color: #fff;
      border-radius: 18px; padding: 26px 22px; text-align: center;
    }
    .ab-val-big { font-size: 20px; font-weight: 900; line-height: 1.5; margin-bottom: 8px; }
    .ab-em-blue { color: #8FC2FF; font-style: normal; }
    .ab-val-p { font-size: 13px; color: #B9C6D8; margin: 0; line-height: 1.8; }

    /* ── 学習ロードマップ（リデザイン） ── */
    .ab-rm-list { display: flex; flex-direction: column; }
    .ab-rm-item { display: flex; gap: 14px; align-items: stretch; padding-bottom: 6px; }
    .ab-rm-item:last-child { padding-bottom: 0; }
    .ab-rm-left {
      display: flex; flex-direction: column; align-items: center;
      flex: none; width: 36px;
    }
    .ab-rm-num {
      width: 34px; height: 34px; border-radius: 50%; flex: none;
      background: #13294B; color: #fff;
      font-size: 14px; font-weight: 900; font-family: var(--font-en);
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 2px 8px rgba(19,41,75,.25);
    }
    .ab-rm-num-goal {
      background: #1F6F5C; font-size: 16px;
    }
    .ab-rm-line {
      flex: 1; width: 2px; min-height: 12px;
      background: linear-gradient(to bottom, rgba(19,41,75,.3), rgba(19,41,75,.06));
      margin-top: 5px; border-radius: 1px;
    }
    .ab-rm-card {
      flex: 1; background: #fff;
      border: 1px solid var(--ink-100); border-radius: 16px;
      padding: 14px 16px; margin-bottom: 6px;
      box-shadow: var(--shadow-sm);
    }
    .ab-rm-step-label {
      font-size: 10px; font-weight: 900; letter-spacing: .06em;
      color: #2E6FD6; font-family: var(--font-en);
      margin-bottom: 5px;
    }
    .ab-rm-title { font-size: 14px; font-weight: 800; margin: 0 0 6px; color: var(--ink-900); line-height: 1.4; }
    .ab-rm-desc { font-size: 12.5px; color: var(--ink-500); margin: 0; line-height: 1.8; }
    .ab-rm-free-tag {
      display: inline-block; margin-top: 8px;
      font-size: 11px; font-weight: 800;
      color: var(--green-600); background: var(--green-100);
      padding: 3px 10px; border-radius: 20px;
    }
    .ab-rm-goal-label { color: #5FC9A8; }
    .ab-rm-goal-card {
      background: #13294B; border-color: transparent;
      box-shadow: 0 8px 24px rgba(19,41,75,.3);
    }
    .ab-rm-goal-title { color: #fff; font-size: 15px; margin-bottom: 16px; }
    .ab-rm-accent { color: #8FC2FF; font-style: normal; }
    .ab-rm-goal-btn { margin-top: 0; }
    .ab-rm-goal-note {
      font-size: 11px; color: rgba(255,255,255,.5);
      text-align: center; margin-top: 8px; line-height: 1.6;
    }

    /* ── 2コース設計 ── */
    .ab-tc-g { color: #1F6F5C; }
    .ab-tc-b { color: #2E6FD6; }
    .ab-tc-lead { font-size: 13.5px; color: var(--ink-500); line-height: 1.8; margin: 0 0 22px; }

    .ab-tc-card {
      border-radius: 18px; padding: 20px 20px 22px; position: relative;
    }
    .ab-tc-c1 { background: #E7F3EE; border: 1px solid #CFE6DC; }
    .ab-tc-c2 { background: #13294B; }

    .ab-tc-step {
      font-size: 12px; font-weight: 800; letter-spacing: .06em;
      margin-bottom: 2px; font-family: var(--font-en);
    }
    .ab-tc-step-green { color: #1F6F5C; }
    .ab-tc-step-blue  { color: #7FC6FF; }

    .ab-tc-title { font-size: 20px; font-weight: 800; margin: 4px 0 2px; }
    .ab-tc-dark  { color: #13294B; }
    .ab-tc-white { color: #fff; }

    .ab-tc-role {
      font-size: 12.5px; font-weight: 700;
      display: inline-block; padding: 3px 10px; border-radius: 999px;
      margin-bottom: 14px; margin-top: 2px;
    }
    .ab-tc-role-green { background: #fff; color: #1F6F5C; border: 1px solid #CFE6DC; }
    .ab-tc-role-navy  { background: rgba(255,255,255,.12); color: #CFE0F5; }

    .ab-tc-tag {
      position: absolute; top: 18px; right: 18px;
      font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px;
    }
    .ab-tc-tag-free   { background: #1F6F5C; color: #fff; }
    .ab-tc-tag-locked { background: rgba(255,255,255,.14); color: #fff; }

    .ab-tc-list { margin: 0 0 14px; padding: 0; list-style: none; }
    .ab-tc-li {
      font-size: 13.5px; line-height: 1.6;
      padding-left: 22px; position: relative; margin-bottom: 6px;
    }
    .ab-tc-li::before { content: "✓"; position: absolute; left: 0; font-weight: 800; }
    .ab-tc-li-dark::before  { color: #1F6F5C; }
    .ab-tc-li-dark  { color: #2C3E4B; }
    .ab-tc-li-light { color: #D5E0F0; }
    .ab-tc-li-light::before { color: #7FC6FF; }

    .ab-tc-arrow { font-size: 13px; font-weight: 700; }
    .ab-tc-arrow-green { color: #1F6F5C; }
    .ab-tc-arrow-blue  { color: #8FE3C8; }

    .ab-tc-connector { text-align: center; padding: 10px 0; display: flex; flex-direction: column; align-items: center; }
    .ab-tc-vline { width: 2px; height: 18px; background: #C9D3E0; }
    .ab-tc-clbl {
      display: inline-block;
      font-size: 12px; font-weight: 700; color: var(--ink-500);
      background: #fff; border: 1px solid var(--ink-100);
      border-radius: 999px; padding: 5px 14px; margin: 6px 0;
    }

    /* ── 料金カード ── */
    .ab-price-card {
      background: #fff; border: 2px solid var(--navy-700);
      border-radius: 20px; padding: 28px 24px; text-align: center;
      box-shadow: 0 8px 24px rgba(30,58,138,.12);
    }
    .ab-price-badge {
      display: inline-block;
      background: var(--navy-100); color: var(--navy-800);
      font-size: 11px; font-weight: 800;
      padding: 4px 14px; border-radius: 20px; margin-bottom: 18px;
    }
    .ab-price-num {
      display: flex; align-items: baseline; justify-content: center; gap: 2px;
      margin-bottom: 20px; line-height: 1;
    }
    .ab-price-currency { font-size: 22px; font-weight: 800; color: var(--navy-800); font-family: var(--font-en); }
    .ab-price-big { font-size: 54px; font-weight: 900; color: var(--navy-800); font-family: var(--font-en); letter-spacing: -.02em; }
    .ab-price-unit { font-size: 13px; font-weight: 700; color: var(--ink-500); margin-left: 4px; }
    .ab-price-list {
      list-style: none; padding: 0; margin: 0 0 18px;
      text-align: left; display: flex; flex-direction: column; gap: 10px;
    }
    .ab-price-list li {
      font-size: 13px; font-weight: 600; color: var(--ink-700);
      display: flex; align-items: center; gap: 8px;
    }
    .ab-price-list li::before {
      content: "✓"; color: var(--green-600);
      font-weight: 900; flex: none;
    }
    .ab-price-copy {
      font-size: 13px; color: var(--ink-700); font-weight: 600;
      line-height: 1.7; margin: 0 0 18px; text-align: center;
    }
    .ab-price-note {
      font-size: 12px; color: var(--ink-500); margin-bottom: 4px;
      font-weight: 600;
    }

    /* ── 億り人ロードマップ ── */
    .ab-lm {
      background: linear-gradient(135deg, #EAF1FB, var(--navy-100));
      border: 2px solid var(--navy-700);
      border-radius: 18px; padding: 24px 22px; text-align: center;
    }
    .ab-now {
      display: inline-block;
      background: #E0413C; color: #fff;
      font-size: 11px; font-weight: 800;
      padding: 4px 12px; border-radius: 20px; margin-bottom: 14px;
    }
    .ab-pdf {
      width: 74px; height: 90px; background: #fff;
      border-radius: 10px; margin: 0 auto 14px;
      box-shadow: var(--shadow-md);
      display: flex; align-items: center; justify-content: center;
      font-size: 32px;
    }
    .ab-lm-h { font-size: 18px; font-weight: 900; margin: 0 0 6px; }
    .ab-lm-p { font-size: 12px; color: var(--ink-500); margin: 0 0 10px; line-height: 1.8; }
    .ab-disc-inline {
      font-size: 10px; color: var(--ink-500); line-height: 1.7;
      margin-bottom: 14px; text-align: left; padding: 8px 10px;
      background: rgba(255,255,255,.6); border-radius: 8px;
    }

    /* ── 始め方・準備 ── */
    .ab-prep {
      background: var(--green-100); border-radius: 16px;
      padding: 22px; text-align: center;
    }
    .ab-prep-h { font-size: 16px; font-weight: 800; margin: 0 0 6px; }
    .ab-prep-p { font-size: 12px; color: var(--ink-500); margin: 0 0 14px; line-height: 1.8; }

    /* ── ファイナルCTA ── */
    .ab-final {
      padding: 38px 36px 34px; text-align: center;
      background: linear-gradient(180deg, var(--bg), #EAF1FB);
    }
    .ab-final-h { font-size: 24px; font-weight: 900; margin: 0 0 8px; }
    .ab-final-p { font-size: 13px; color: var(--ink-500); margin: 0 0 18px; line-height: 1.9; }

    /* ── 申込フォーム ── */
    .ab-form { display: flex; flex-direction: column; gap: 0; }
    .ab-form-row { display: flex; flex-direction: column; gap: 5px; margin-bottom: 16px; }
    .ab-form-row-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .ab-form-label {
      font-size: 13px; font-weight: 700; color: var(--ink-900);
      display: flex; align-items: center; gap: 6px;
    }
    .ab-req { background: #FEE2E2; color: #DC2626; font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 4px; }
    .ab-opt { background: var(--ink-100); color: var(--ink-500); font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 4px; }
    .ab-form-input, .ab-form-select {
      width: 100%; padding: 11px 14px;
      border: 1.5px solid var(--ink-200); border-radius: 10px;
      font-size: 14px; font-family: var(--font-jp); color: var(--ink-900);
      background: #fff;
      transition: border-color .15s, box-shadow .15s;
      -webkit-appearance: none; appearance: none;
    }
    .ab-form-input:focus, .ab-form-select:focus {
      outline: none; border-color: var(--navy-700);
      box-shadow: 0 0 0 3px rgba(45,79,184,.12);
    }
    .ab-input-err { border-color: #DC2626 !important; }
    .ab-form-err { font-size: 12px; color: #DC2626; font-weight: 700; margin-top: -2px; }
    .ab-form-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B7593' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; cursor: pointer; }
    .ab-radio-group { display: flex; flex-direction: column; gap: 8px; }
    .ab-radio {
      display: flex; align-items: center; gap: 10px;
      padding: 11px 14px; border-radius: 10px;
      border: 1.5px solid var(--ink-200); background: #fff;
      font-size: 13px; font-weight: 600; color: var(--ink-700);
      cursor: pointer; transition: border-color .15s, background .15s;
    }
    .ab-radio input[type=radio] { accent-color: var(--navy-800); width: 16px; height: 16px; flex: none; cursor: pointer; }
    .ab-radio-on { border-color: var(--navy-700); background: var(--navy-50); color: var(--navy-800); }
    .ab-form-privacy { font-size: 11px; color: var(--ink-500); text-align: center; margin-top: 10px; line-height: 1.7; }

    /* フォーム送信後 */
    .ab-form-done { text-align: center; padding: 20px 0; }
    .ab-form-done-icon { font-size: 48px; margin-bottom: 12px; }
    .ab-form-done-h { font-size: 20px; font-weight: 900; margin: 0 0 8px; }
    .ab-form-done-p { font-size: 14px; color: var(--ink-500); line-height: 1.8; margin: 0 0 18px; }
    .ab-form-done-note { font-size: 11px; color: var(--ink-500); margin-top: 10px; }
    .ab-line-btn {
      display: flex; align-items: center; justify-content: center; gap: 10px;
      width: 100%; padding: 16px 20px; border-radius: 14px;
      background: #06C755; color: #fff;
      font-weight: 800; font-size: 15px; font-family: var(--font-jp);
      border: none; cursor: pointer; text-decoration: none;
      box-shadow: 0 8px 18px rgba(6,199,85,.3);
      transition: opacity .15s, transform .1s; margin-top: 12px;
    }
    .ab-line-btn:hover { opacity: .9; transform: translateY(-1px); }
    .ab-line-ico {
      background: #fff; color: #06C755;
      font-size: 11px; font-weight: 900;
      padding: 2px 7px; border-radius: 5px;
      font-family: var(--font-en); letter-spacing: .05em;
    }

    @media (max-width: 600px) {
      .ab-form-row-2col { grid-template-columns: 1fr; gap: 0; }
    }

    /* ── 免責事項 ── */
    .ab-disc-sec {
      background: #EEF1F5; padding: 18px 36px;
      font-size: 11px; color: #6B7585; line-height: 1.8;
    }
    .ab-disc-ttl {
      color: var(--ink-900); display: block;
      margin-bottom: 6px; font-size: 12px; font-weight: 800;
    }

    /* ── フッター ── */
    .ab-footer { background: var(--navy-900); color: #C3CBD4; padding: 26px 36px 36px; }
    .ab-flogo { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; }
    .ab-fbadge {
      width: 30px; height: 30px; border-radius: 8px;
      background: #fff; color: var(--navy-900);
      font-weight: 900; font-size: 14px;
      display: flex; align-items: center; justify-content: center;
    }
    .ab-flinks { display: flex; flex-direction: column; margin-bottom: 18px; }
    .ab-flink {
      color: #DCE3EC; font-size: 13px; font-weight: 600; font-family: var(--font-jp);
      background: none; border: none; border-bottom: 1px solid rgba(255,255,255,.08);
      padding: 10px 0; text-align: left; cursor: pointer;
      text-decoration: none; display: block;
      transition: color .15s;
    }
    .ab-flink:hover { color: #fff; }
    .ab-flink:last-child { border-bottom: none; }
    .ab-contact { font-size: 11px; color: #7E8A9A; margin-bottom: 6px; }
    .ab-contact-link { color: #A0AEC0; text-decoration: underline; text-underline-offset: 2px; }
    .ab-copy { font-size: 10px; color: #7E8A9A; }

    /* ── レスポンシブ ── */
    @media (max-width: 768px) {
      .ab-hero  { padding: 24px 16px 28px; }
      .ab-sec   { padding: 24px 16px; }
      .ab-h1    { font-size: 35px; }
      .ab-h2    { font-size: 18px; }
      .ab-final { padding: 28px 16px 24px; }
      .ab-final-h { font-size: 20px; }
      .ab-disc-sec { padding: 16px; }
      .ab-footer { padding: 22px 16px 30px; }
    }
    @media (max-width: 480px) {
      .ab-h1  { font-size: 31px; line-height: 1.32; }
      .ab-sub { font-size: 15px; }
      .ab-dot { display: none; }
      .ab-scene { gap: 10px; }
      .ab-char-s { width: 80px; height: 92px; }
      .ab-char-k { width: 96px; height: 108px; }
    }

    /* ── 競合比較表 ── */
    .ab-cmp-sec { background: #F7FBF9; }
    .ab-cmp-header {
      position: relative;
      display: flex; flex-direction: column; align-items: flex-start;
      gap: 10px; margin-bottom: 16px;
    }
    .ab-cmp-char {
      width: 88px; height: auto;
      mix-blend-mode: multiply;
      position: absolute; right: 0; top: -8px;
    }
    .ab-cmp-badge {
      display: inline-block;
      font-size: 11px; font-weight: 800;
      color: #fff; background: #1F6F5C;
      padding: 4px 12px; border-radius: 20px;
      letter-spacing: .04em;
    }
    .ab-cmp-h2 { margin-right: 96px !important; }
    .ab-cmp-bubble {
      position: relative;
      background: #fff;
      border: 1.5px solid #1F6F5C;
      border-radius: 14px;
      padding: 13px 15px;
      font-size: 13px; font-weight: 600; color: #1A4037; line-height: 1.75;
    }
    .ab-cmp-bubble::before {
      content: '';
      position: absolute;
      left: 22px; top: -9px;
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      border-bottom: 9px solid #1F6F5C;
    }
    .ab-cmp-bubble::after {
      content: '';
      position: absolute;
      left: 23px; top: -7px;
      border-left: 7px solid transparent;
      border-right: 7px solid transparent;
      border-bottom: 8px solid #fff;
    }
    .ab-cmp-scrollhint {
      font-size: 11px; color: var(--ink-400, #9CA3AF);
      text-align: center; margin: 0 0 8px; display: none;
    }
    .ab-cmp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .ab-cmp-table {
      width: 100%; min-width: 720px;
      border-collapse: collapse; font-size: 13px;
    }
    .ab-cmp-th {
      padding: 12px 10px; text-align: center;
      font-weight: 800; font-size: 13px;
    }
    .ab-cmp-th-row {
      text-align: left !important;
      background: #ECEFF3; color: var(--ink-700);
      border-bottom: 2px solid var(--ink-100);
      min-width: 130px;
    }
    .ab-cmp-th-a { background: #FBF1DD; }
    .ab-cmp-th-b { background: #EAF1FB; }
    .ab-cmp-th-c { background: #F3ECF9; }
    .ab-cmp-th-kj { background: #1F6F5C; color: #fff; }
    .ab-cmp-td {
      padding: 11px 10px; text-align: center;
      border-bottom: 1px solid var(--ink-100);
      color: var(--ink-600); vertical-align: middle; line-height: 1.55;
    }
    .ab-cmp-td-row {
      text-align: left; font-weight: 700; color: var(--ink-800);
      background: #F4F6F9;
    }
    .ab-cmp-td-kj {
      background: #EAF5F0 !important;
      box-shadow: inset 3px 0 0 #1F6F5C, inset -3px 0 0 #1F6F5C;
      color: var(--ink-800); font-weight: 700;
    }
    .ab-cmp-table tbody tr:nth-child(even) td { background: #F9FAFB; }
    .ab-cmp-table tbody tr:nth-child(even) td.ab-cmp-td-kj { background: #D8EDE5 !important; }
    .ab-cmp-o { color: #1F6F5C; font-weight: 900; font-size: 15px; }
    .ab-cmp-x { color: #C8C8C8; font-weight: 900; font-size: 15px; }
    .ab-cmp-t { color: #C9731A; font-weight: 900; font-size: 15px; }
    .ab-cmp-note {
      font-size: 10.5px; color: var(--ink-400, #9CA3AF);
      line-height: 1.7; margin: 10px 0 0;
    }
    .ab-cmp-cta {
      background: #C9731A; color: #fff;
      box-shadow: 0 8px 18px rgba(201,115,26,.28);
      margin-top: 16px;
    }
    .ab-cmp-cta-sub {
      font-size: 11px; color: var(--ink-400, #9CA3AF);
      text-align: center; margin-top: 6px;
    }
    @media (max-width: 600px) {
      .ab-cmp-scrollhint { display: block; }
      .ab-cmp-char { width: 70px; }
    }
  `}</style>;
}

window.About = About;