<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width,initial-scale=1"/>
  <title>太洋モータース タクシードライバー適職診断</title>
</head>
<body>

<div id="taxi-diagnosis">
  <style>
    /* ========== カラー変数（#03a9f4ベース） ========== */
    #taxi-diagnosis {
      --primary: #03a9f4;
      --primary-dark: #0288d1;
      --primary-light: #4fc3f7;
      --border: #e0e0e0;
      --muted: #666666;
      --bg: #f9fafb;
      --card: #fff;
      --shadow: 0 4px 12px rgba(3, 169, 244, 0.15);
    }

    #taxi-diagnosis .wrap { max-width: 920px; margin: 24px auto; padding: 0 16px 80px; } /* footer固定分だけ下に余白 */
    #taxi-diagnosis .header { background: var(--card); border: 2px solid var(--border); border-radius: 16px; padding: 24px; box-shadow: var(--shadow); }
    #taxi-diagnosis .lead { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }

    /* ロゴ */
    #taxi-diagnosis .logo { max-width: 220px; height: auto; display: inline-block; }

    /* ========== ステップバー ========== */
    #taxi-diagnosis .stepbar { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
    #taxi-diagnosis .pill {
      font-size: 12px; font-weight: 600;
      padding: 7px 14px; border-radius: 20px;
      border: 2px solid var(--border); background: #fff; color: #999;
      transition: all 0.3s ease;
    }
    #taxi-diagnosis .pill.active {
      background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
      color: #fff; border-color: var(--primary);
      box-shadow: 0 2px 8px rgba(3, 169, 244, 0.3);
    }

    /* ========== カード ========== */
    #taxi-diagnosis .card {
      background: var(--card); border: 2px solid var(--border);
      border-radius: 16px; padding: 24px; margin-top: 20px;
      box-shadow: var(--shadow);
    }
    #taxi-diagnosis .row { display: grid; grid-template-columns: 1fr; gap: 16px; }
    @media (min-width: 760px) { #taxi-diagnosis .row.two { grid-template-columns: 1fr 1fr; } }
    #taxi-diagnosis .q { font-weight: 700; font-size: 17px; margin: 0 0 14px; color: #333; }
    #taxi-diagnosis .sub { margin: 0 0 14px; color: var(--muted); font-size: 13px; line-height: 1.7; }

    /* ========== 選択肢 ========== */
    #taxi-diagnosis .opt {
      display: flex; gap: 12px; align-items: flex-start;
      border: 2px solid var(--border); border-radius: 12px;
      padding: 12px 14px; cursor: pointer; background: #fff;
      transition: all 0.3s ease;
    }
    #taxi-diagnosis .opt:hover {
      border-color: var(--primary);
      background: rgba(3, 169, 244, 0.03);
      box-shadow: 0 2px 8px rgba(3, 169, 244, 0.1);
    }
    #taxi-diagnosis .opt input { margin-top: 3px; accent-color: var(--primary); cursor: pointer; }
    #taxi-diagnosis .opt .t { font-size: 14px; line-height: 1.6; color: #333; }
    #taxi-diagnosis .grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
    @media (min-width: 760px) { #taxi-diagnosis .grid { grid-template-columns: 1fr 1fr; } }

    /* ========== セレクトボックス ========== */
    #taxi-diagnosis select {
      width: 100%; padding: 12px 14px; border-radius: 10px;
      border: 2px solid var(--border); font-size: 15px; background: #fff;
      color: #333; cursor: pointer; transition: all 0.3s ease;
    }
    #taxi-diagnosis select:hover,
    #taxi-diagnosis select:focus {
      border-color: var(--primary);
      outline: none;
      box-shadow: 0 0 0 3px rgba(3, 169, 244, 0.1);
    }

    /* ========== アクション ========== */
    #taxi-diagnosis .actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }

    /* ========== ボタン ========== */
    #taxi-diagnosis button {
      border: 2px solid var(--border); background: #fff;
      padding: 16px 36px; border-radius: 12px; cursor: pointer;
      font-weight: 700; font-size: 16px; color: #555;
      transition: all 0.3s ease;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    }
    #taxi-diagnosis button:hover {
      background: #f8f8f8; border-color: #bbb;
      transform: translateY(-2px);
      box-shadow: 0 6px 12px rgba(0,0,0,0.15);
    }
    #taxi-diagnosis button.primary {
      background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
      border-color: var(--primary); color: #fff;
      box-shadow: 0 4px 14px rgba(3, 169, 244, 0.4);
      font-size: 18px; padding: 18px 42px;
    }
    #taxi-diagnosis button:disabled { opacity: .6; cursor: not-allowed; transform:none; }

    /* ========== リンクボタン ========== */
    #taxi-diagnosis a.btnlink {
      display: inline-block; text-decoration: none;
      border: 2px solid var(--border); padding: 16px 36px;
      border-radius: 12px; font-weight: 700; font-size: 16px;
      color: #555; background: #fff;
      transition: all 0.3s ease; box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    }
    #taxi-diagnosis a.btnlink:hover {
      background:#f8f8f8; border-color:#bbb; transform: translateY(-2px);
      box-shadow: 0 6px 12px rgba(0,0,0,0.15);
    }
    #taxi-diagnosis a.btnlink.primary {
      background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
      border-color: var(--primary); color: #fff;
      box-shadow: 0 4px 14px rgba(3, 169, 244, 0.4);
      font-size: 18px; padding: 18px 42px;
    }

    #taxi-diagnosis .note { font-size: 12px; color: var(--muted); margin-top: 12px; line-height: 1.6; }
    #taxi-diagnosis .hidden { display: none !important; }

    /* ========== 結果画面 ========== */
    #taxi-diagnosis .resultTitle { font-size: 19px; font-weight: 700; margin: 0 0 12px; color: #333; }
    #taxi-diagnosis .badge {
      display: inline-block; font-size: 12px; font-weight: 600;
      padding: 6px 14px; border-radius: 20px;
      background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%);
      color: #fff; margin-right: 8px; margin-bottom: 8px;
      box-shadow: 0 2px 6px rgba(3, 169, 244, 0.3);
    }
    #taxi-diagnosis .reason { line-height: 1.8; margin: 14px 0 0; color: #333; font-size: 15px; }
    #taxi-diagnosis .sectionH { margin: 28px 0 14px; font-size: 17px; font-weight: 700; color: #333; }
    #taxi-diagnosis .anxCard {
      border: 2px solid var(--border); border-radius: 12px;
      padding: 16px; background: #fff; transition: all 0.3s ease;
    }
    #taxi-diagnosis .ctaBox {
      border: 2px dashed var(--primary);
      background: linear-gradient(135deg, rgba(3, 169, 244, 0.03) 0%, rgba(3, 169, 244, 0.08) 100%);
      border-radius: 16px; padding: 24px; margin-top: 28px;
    }

    /* ========== メインバナー ========== */
    .main-banner { width: 100%; max-width: 960px; margin: 0 auto; padding: 0; overflow: hidden; }
    .main-banner img { width: 100%; height: auto; display: block; border-radius: 0; }

    /* ========== 応募フォーム ========== */
    #taxi-diagnosis .formRow { margin-top: 12px; }
    #taxi-diagnosis .formRow label { display:block; font-weight:700; font-size:13px; margin-bottom:6px; color:#333; }
    #taxi-diagnosis .formRow input,
    #taxi-diagnosis .formRow textarea {
      width: 100%;
      padding: 12px 14px;
      border-radius: 10px;
      border: 2px solid var(--border);
      font-size: 15px;
      background: #fff;
      color: #333;
      transition: all .2s ease;
      box-sizing: border-box;
    }
    #taxi-diagnosis .formRow input:focus,
    #taxi-diagnosis .formRow textarea:focus {
      border-color: var(--primary);
      outline: none;
      box-shadow: 0 0 0 3px rgba(3,169,244,.1);
    }
    #taxi-diagnosis .formRow textarea { min-height: 120px; resize: vertical; }

    /* ========== footer（指定CSS + 下固定） ========== */
    .site-footer {
      --copyright_padding-top: 18px;
      --copyright_padding-bottom: 16px;
      --copyright_bg_color: #282a2b;
      --copyright_border_size: 1px;
      --copyright_border_color: #4b4c4d;
      --copyright_link_color_hover: #ffffff;

      position: fixed;
      left: 0;
      bottom: 0;
      width: 100%;
      z-index: 9999;
    }
    .site-footer .copyright {
      padding-top: var(--copyright_padding-top);
      padding-bottom: var(--copyright_padding-bottom);
      background-color: var(--copyright_bg_color);
      border-top: var(--copyright_border_size) solid var(--copyright_border_color);
      text-align: center;
      font-size: 13px;
      color: #cfcfcf;
      line-height: 1.6;
    }
    .site-footer .copyright a {
      color: #cfcfcf;
      text-decoration: none;
      transition: color 0.2s ease;
    }
    .site-footer .copyright a:hover { color: var(--copyright_link_color_hover); }

    @media (max-width: 600px) {
      #taxi-diagnosis .wrap { padding: 16px 12px 90px; }
      #taxi-diagnosis .header { padding: 18px; }
      #taxi-diagnosis .card { padding: 18px; }
      #taxi-diagnosis button { padding: 14px 28px; font-size: 15px; }
      #taxi-diagnosis button.primary { padding: 16px 32px; font-size: 16px; }
      #taxi-diagnosis a.btnlink { padding: 14px 28px; font-size: 15px; }
      #taxi-diagnosis a.btnlink.primary { padding: 16px 32px; font-size: 16px; }
    }
#td_startBtn {
  display: block;
  margin: 0 auto;
}
  </style>

  <div class="wrap">
    <div class="header">
      <div style="text-align:center;">
        <a href="https://www.taiyomotors-taxi.co.jp/saiyo-2" rel="noopener">
          <img src="https://www.taiyomotors-taxi.co.jp/wp-content/uploads/logo-1.jpg" alt="太洋モータース株式会社" class="logo">
        </a>
      </div>

      <div class="main-banner" id="mainBanner" style="margin-top:12px;">
        <picture>
          <source media="(min-width: 769px)" srcset="/wp-content/uploads/wIVjcJcx-2.jpg">
          <source media="(max-width: 768px)" srcset="/wp-content/uploads/wIVjcJcx-2.jpg">
          <img src="/wp-content/uploads/wIVjcJcx-2.jpg" alt="タクシードライバーAI適職診断" />
        </picture>
      </div>

      <p class="lead" style="margin-top:10px;">
        いくつかの質問に答えるだけで、あなたに合う働き方を1つ提案します。
      </p>
      <div class="stepbar" id="td_stepbar"></div>
    </div>

    <!-- STEP0 -->
    <div class="card" data-td-step="0">
      <div class="actions">
        <button type="button" class="primary" id="td_startBtn">適職診断をはじめる</button>
      </div>
    </div>

    <!-- STEP1 -->
    <div class="card hidden" data-td-step="1">
      <p class="q">STEP1：タクシードライバー経験はありますか？（1つ選択）</p>
      <div class="grid">
        <label class="opt">
          <input type="radio" name="td_exp" value="new" />
          <span class="t"><b>未経験</b><br><span style="color:var(--muted);font-size:12px;">不安解消を重視して提案します</span></span>
        </label>
        <label class="opt">
          <input type="radio" name="td_exp" value="experienced" />
          <span class="t"><b>経験者</b><br><span style="color:var(--muted);font-size:12px;">条件・収入最適化を重視して提案します</span></span>
        </label>
      </div>
      <div class="actions">
        <button type="button" data-td-prev>戻る</button>
        <button type="button" class="primary" data-td-next>次へ</button>
      </div>
      <div class="note">※未経験の場合のみ、STEP4で「未経験者向け不安」も表示されます。</div>
    </div>

    <!-- STEP2 -->
    <div class="card hidden" data-td-step="2">
      <p class="q">STEP2：基本属性（分岐なし）</p>
      <div class="row two">
        <div>
          <p class="sub" style="margin-bottom:6px;">性別（1つ選択）</p>
          <div class="grid">
            <label class="opt"><input type="radio" name="td_gender" value="male" /><span class="t">男性</span></label>
            <label class="opt"><input type="radio" name="td_gender" value="female" /><span class="t">女性</span></label>
          </div>
        </div>
        <div>
          <p class="sub" style="margin-bottom:6px;">年代（1つ選択）</p>
          <select id="td_age">
            <option value="">選択してください</option>
            <option>20代</option><option>30代</option><option>40代</option><option>50代</option><option>60代</option><option>70代</option>
          </select>
        </div>
      </div>
      <div class="actions">
        <button type="button" data-td-prev>戻る</button>
        <button type="button" class="primary" data-td-next>次へ</button>
      </div>
    </div>

    <!-- STEP3 -->
    <div class="card hidden" data-td-step="3">
      <p class="q">STEP3：仕事で最も重視したいのは？（1つ選択）</p>
      <div class="grid">
        <label class="opt"><input type="radio" name="td_motivation" value="earn" /><span class="t"><b>しっかり稼ぎたい</b></span></label>
        <label class="opt"><input type="radio" name="td_motivation" value="pace" /><span class="t"><b>自分のペースで仕事したい</b></span></label>
        <label class="opt"><input type="radio" name="td_motivation" value="help" /><span class="t"><b>お客様・地域の役に立ちたい</b></span></label>
      </div>
      <div class="actions">
        <button type="button" data-td-prev>戻る</button>
        <button type="button" class="primary" data-td-next>次へ</button>
      </div>
    </div>

    <!-- STEP4 -->
    <div class="card hidden" data-td-step="4">
      <p class="q">STEP4：不安・疑問はありますか？（複数選択可）</p>
      <p class="sub">選んだ項目に応じて、結果画面で安心材料をご紹介します。</p>

      <div class="grid">
        <label class="opt"><input type="checkbox" name="td_anx" value="fit" /><span class="t">やっていけるか不安</span></label>
        <label class="opt"><input type="checkbox" name="td_anx" value="earn" /><span class="t">思った金額が稼げるか不安</span></label>
        <label class="opt"><input type="checkbox" name="td_anx" value="commission" /><span class="t">歩合制で収入が不安定</span></label>
        <label class="opt"><input type="checkbox" name="td_anx" value="culture" /><span class="t">会社の雰囲気が合うか</span></label>
        <label class="opt"><input type="checkbox" name="td_anx" value="relations" /><span class="t">人間関係がうまくいくか</span></label>
      </div>

      <div id="td_anx_newonly" class="hidden" style="margin-top:12px;">
        <div class="grid">
          <label class="opt"><input type="checkbox" name="td_anx" value="geo" /><span class="t">都内の地理が不安</span></label>
          <label class="opt"><input type="checkbox" name="td_anx" value="service" /><span class="t">接客が不安</span></label>
          <label class="opt"><input type="checkbox" name="td_anx" value="foreign" /><span class="t">外国人対応が不安</span></label>
          <label class="opt"><input type="checkbox" name="td_anx" value="long" /><span class="t">長時間労働が不安</span></label>
        </div>
      </div>

      <div class="actions">
        <button type="button" data-td-prev>戻る</button>
        <button type="button" class="primary" data-td-next>次へ</button>
      </div>
    </div>

    <!-- STEP5 -->
    <div class="card hidden" data-td-step="5">
      <p class="q">STEP5：タクシーの仕事で魅力的な点は？（1つ以上選択）</p>
      <div class="grid">
        <label class="opt"><input type="checkbox" name="td_val5" value="incomeBySales" /><span class="t">売上に応じて収入が決まる</span></label>
        <label class="opt"><input type="checkbox" name="td_val5" value="selfStrategy" /><span class="t">自分で営業方針を決められる</span></label>
        <label class="opt"><input type="checkbox" name="td_val5" value="appSales" /><span class="t">配車アプリで未経験でも売上が作れる</span></label>
        <label class="opt"><input type="checkbox" name="td_val5" value="navSafe" /><span class="t">カーナビがあるので地理不安も安心</span></label>
        <label class="opt"><input type="checkbox" name="td_val5" value="bonus" /><span class="t">年3回の賞与</span></label>
        <label class="opt"><input type="checkbox" name="td_val5" value="none5" /><span class="t"><b>特になし</b></span></label>
      </div>
      <div class="actions">
        <button type="button" data-td-prev>戻る</button>
        <button type="button" class="primary" data-td-next>次へ</button>
      </div>
      <div class="note">※「特になし」を選ぶと、他の項目は自動的に外れます。</div>
    </div>

    <!-- STEP6 -->
    <div class="card hidden" data-td-step="6">
      <p class="q">STEP6：太洋モータースで魅力に感じる点は？（1つ以上選択）</p>
      <div class="grid">
        <label class="opt"><input type="checkbox" name="td_val6" value="training" /><span class="t">未経験者への教育制度が充実</span></label>
        <label class="opt"><input type="checkbox" name="td_val6" value="chooseShift" /><span class="t">希望の働き方（日勤・隔日勤務）が選べる</span></label>
        <label class="opt"><input type="checkbox" name="td_val6" value="balance" /><span class="t">仕事と子育て・介護との両立ができる</span></label>
        <label class="opt"><input type="checkbox" name="td_val6" value="thanks" /><span class="t">地域のお客様に感謝される仕事</span></label>
        <label class="opt"><input type="checkbox" name="td_val6" value="friendly" /><span class="t">アットホームな社風で社員同士仲が良い</span></label>
        <label class="opt"><input type="checkbox" name="td_val6" value="goodOps" /><span class="t">運行管理者との関係がよい</span></label>
        <label class="opt"><input type="checkbox" name="td_val6" value="none6" /><span class="t"><b>特になし</b></span></label>
      </div>
      <div class="actions">
        <button type="button" data-td-prev>戻る</button>
        <button type="button" class="primary" id="td_toResultBtn">結果を見る</button>
      </div>
      <div class="note">※「特になし」を選ぶと、他の項目は自動的に外れます。</div>
    </div>

    <!-- RESULT -->
    <div class="card hidden" data-td-step="7" id="td_resultCard">
      <div id="td_resultTop"></div>

      <div class="sectionH">🔍あなたの不安も、しっかり解消できます</div>
      <p class="sub" style="margin-top:-4px;">選択した不安に合わせて、安心材料をご紹介します。</p>
      <div class="grid" id="td_anxList"></div>

      <div class="ctaBox">
        <p>
          この診断結果は「向いている働き方」の提案です。<br/>
          実際には会社説明会で話を聞いてから検討ください。。
        </p>
        <div class="actions">
          <a class="btnlink primary" id="td_applyBtn" href="#">説明会に応募する</a>
          <a class="btnlink" id="td_talkBtn" href="#" target="_blank" rel="noopener">募集要項を見る</a>
          <button type="button" id="td_restartBtn">もう一度診断する</button>
        </div>

        <!-- 応募フォーム -->
        <div id="td_applyForm" class="card" style="display:none; margin-top:18px;">
          <p class="q">説明会申込フォーム</p>

          <div class="formRow">
            <label for="td_f_job">職種</label>
            <input id="td_f_job" type="text" placeholder="職種" readonly>
          </div>

          <div class="formRow">
            <label for="td_f_name">名前</label>
            <input id="td_f_name" type="text" placeholder="例）山田 太郎">
          </div>

          <div class="formRow">
            <label for="td_f_address">住所</label>
            <input id="td_f_address" type="text" placeholder="例）東京都○○区">
          </div>

          <div class="formRow">
            <label for="td_f_age">年齢</label>
            <input id="td_f_age" type="text" placeholder="例）30代">
          </div>

          <div class="formRow">
            <label for="td_f_email">メールアドレス</label>
            <input id="td_f_email" type="email" placeholder="example@example.com">
          </div>

          <div class="formRow">
            <label for="td_f_tel">電話</label>
            <input id="td_f_tel" type="tel" placeholder="例）090-1234-5678">
          </div>

          <!-- ★応募コメント：一番下 -->
          <div class="formRow">
            <label for="td_f_comment">コメント</label>
            <textarea id="td_f_comment" placeholder="ご質問やご希望などがあればご記入ください"></textarea>
          </div>

          <div class="actions" style="margin-top:14px;">
            <button type="button" class="primary" id="td_applySubmitBtn">送信する</button>
          </div>
          <div class="note"></div>
        </div>

        <!-- 応募完了メッセージ -->
        <div id="td_applyComplete" style="display:none; margin-top:20px; padding:18px; border-radius:12px; background:#e3f2fd; border:1px solid #90caf9;">
          <strong>この度は、説明会へご応募頂きありがとうございます。</strong><br>
          追って担当者よりご連絡させていただきます。<br>
          <br>
          太洋モータース株式会社<br>
          〒145-0076 東京都大田区田園調布南12番14号<br>
          TEL 03-6715-5881<br>
          採用担当　黒崎<br>
        </div>
      </div>
    </div>
  </div>

  <footer class="site-footer">
    <div class="copyright">
      Copyright © 太洋モータース株式会社 All Rights Reserved
    </div>
  </footer>

  <script>
  (function(){
    function onReady(fn){
      if(document.readyState === "loading") document.addEventListener("DOMContentLoaded", fn);
      else fn();
    }

    onReady(function(){
      const root = document.getElementById("taxi-diagnosis");
      if(!root) return;

      // ===== 設定（要件）=====
      const APPLY_ENDPOINT = "https://www.taiyomotors-taxi.co.jp/apply.php"; // apply.phpのURL

      const TALK_URL_BY_JOB = {
        p1: "https://www.taiyomotors-taxi.co.jp/about/taxidriver",
        p2: "https://www.taiyomotors-taxi.co.jp/about/taxidriver-2",
        p3: "https://www.taiyomotors-taxi.co.jp/about/area_attendant"
      };

      const JOB_LABEL = {
        p1: "【しっかり稼ぐ】隔日勤務タクシードライバー",
        p2: "【ちょうど良く稼ぐ】深夜なし隔日勤務ドライバー",
        p3: "【人の役に立ちたい】地域アテンダントドライバー"
      };

      const steps = [
        { id: 0, label: "開始" },
        { id: 1, label: "STEP1" },
        { id: 2, label: "STEP2" },
        { id: 3, label: "STEP3" },
        { id: 4, label: "STEP4" },
        { id: 5, label: "STEP5" },
        { id: 6, label: "STEP6" },
        { id: 7, label: "結果" },
      ];

      function q(sel){ return root.querySelector(sel); }
      const stepbar = q("#td_stepbar");
      const stepCards = [...root.querySelectorAll("[data-td-step]")];

      function renderStepbar(activeId) {
        if(!stepbar) return;
        stepbar.innerHTML = "";
        for (const s of steps) {
          const el = document.createElement("div");
          el.className = "pill" + (s.id === activeId ? " active" : "");
          el.textContent = s.label;
          stepbar.appendChild(el);
        }
      }

      function showStep(id) {
        stepCards.forEach(c => c.classList.toggle("hidden", Number(c.dataset.tdStep) !== id));
        renderStepbar(id);
        window.scrollTo({ top: 0, behavior: "smooth" });
      }

      const state = {
        exp:null, gender:null, age:null, motivation:null,
        anx:new Set(),
        val:new Set(),
        val5:new Set(),
        val6:new Set(),
      };

           const ANX_COPY = {
        fit: { title: "😥 やっていけるか不安", body: "未経験の方向けの研修がしっかりあるので大丈夫です。基本から順番に覚えられます。" },
        earn: { title: "💰 思った金額が稼げるか不安", body: "現役ドライバーがマンツーマンで教えます。入社後6か月を目安に売上を作れるようになります。" },
        commission: { title: "📉 歩合制で収入が不安定", body: "稼ぎ方を一から教えるので安心です。6か月ほどで安定した売上を作れるようになります。" },
        culture: { title: "🏢 会社の雰囲気が合うか不安", body: "上下関係が強くなく、年齢に関係なく話しやすい雰囲気です。" },
        relations: { title: "🤝 人間関係がうまくいくか不安", body: "ギスギスした雰囲気がなく、助け合う社風です。年齢の壁もありません。" },
        geo: { title: "🗺 都内の地理が不安", body: "道が分からなくても大丈夫です。カーナビと配車アプリが目的地まで案内してくれます。" },
        service: { title: "🧑‍💼 接客が不安", body: "車内に防犯カメラがあるので安心です。トラブル防止にもなります。" },
        foreign: { title: "🌍 外国人対応が不安", body: "希望者は、接客で使える英語研修を受けられます。" },
        long: { title: "⏰ 長時間労働が不安", body: "隔日勤務なので、1日働いたあとはしっかり休めます。休みをまとめて取れる働き方です。" },
      };
      const ANX_PRIORITY = ["earn","fit","geo","commission","relations","culture","service","long","foreign"];

      const SCORE_MAP = {
        incomeBySales:{p1:2,p2:0,p3:0},
        selfStrategy:{p1:2,p2:0,p3:0},
        bonus:{p1:1,p2:0,p3:0},
        appSales:{p1:0,p2:2,p3:0},
        navSafe:{p1:0,p2:2,p3:0},
        chooseShift:{p1:0,p2:1,p3:0},
        balance:{p1:0,p2:1,p3:0},
        training:{p1:0,p2:1,p3:0},
        thanks:{p1:0,p2:0,p3:2},
        friendly:{p1:0,p2:0,p3:1},
        goodOps:{p1:0,p2:0,p3:1},
      };

      const VAL_LABEL = {
        training: "未経験者への教育制度が充実",
        chooseShift: "希望の働き方が選べる",
        balance: "子育て・介護と両立できる",
        thanks: "地域のお客様に感謝される",
        friendly: "アットホームな社風",
        goodOps: "運行管理者との関係が良い",
      };

      const COMPANY_REASON_MAP = {
        p1: {
          training: "しっかりした研修があるので、未経験からでも高収入を目指せます。",
          chooseShift: "働き方を調整しながら、収入アップを目指せます。",
          friendly: "個人プレー中心なので、程よい距離感で働けます。"
        },
        p2: {
          training: "未経験でも安心してスタートできる環境です。",
          chooseShift: "生活リズムに合わせた働き方ができます。",
          balance: "無理のない勤務で、家庭との両立もしやすいです。"
        },
        p3: {
          thanks: "顔なじみのお客様に感謝される働き方ができます。",
          friendly: "社内外ともに、人との関係を大切にできる環境です。",
          goodOps: "運行管理者と相談しながら、安心して働けます。"
        }
      };

      const CTA_LABEL_MAP = {
        p1: { apply: "高収入を目指して会社説明会に参加する", talk: "しっかり稼ぐ隔日勤務ドライバー募集要項" },
        p2: { apply: "会社説明会に参加する", talk: "ちょうどよく稼ぐ隔日勤務ドライバー募集要項" },
        p3: { apply: "会社説明会に参加する", talk: "地域アテンダントドライバー募集要項" }
      };

      function escapeHtml(s){
        return String(s)
          .replaceAll("&","&amp;")
          .replaceAll("<","&lt;")
          .replaceAll(">","&gt;")
          .replaceAll('"',"&quot;")
          .replaceAll("'","&#039;");
      }

      function buildCompanyValueLine() {
        const picked = [...state.val].filter(v => VAL_LABEL[v]);
        if (!picked.length) return "";
        return `あなたが魅力に感じた点：${picked.slice(0, 3).map(v => VAL_LABEL[v]).join("／")}`;
      }

      function buildCompanyReasonByProposal(proposalKey) {
        const map = COMPANY_REASON_MAP[proposalKey];
        if (!map) return "";
        for (const v of state.val) {
          if (map[v]) return map[v];
        }
        return "";
      }

      function buildProposal(key){
        const genderTxt = state.gender === "female" ? "女性" : (state.gender === "male" ? "男性" : "—");
        const ageTxt = state.age || "—";

        if(key==="p1") return {
          title:"【しっかり稼ぐ】隔日勤務タクシードライバー",
          badges:["高収入志向", `性別：${genderTxt}`, `年代：${ageTxt}`],
          reason:[
            "あなたは「収入アップ」への意欲が高く、成果が数字で返ってくる働き方が向いています。",
            "隔日勤務は勤務時間が長めですが、その分高収入を目指しやすい働き方です。",
            "研修や仕組みが整っているため、未経験からでも売上を作りやすい環境です。"
          ].join("<br/>"),
          applyParam:"p1"
        };

        if(key==="p2") return {
          title:"【ちょうど良く稼ぐ】深夜なし隔日勤務ドライバー",
          badges:["無理なくスタート", `性別：${genderTxt}`, `年代：${ageTxt}`],
          reason:[
            "あなたは「無理なく自分のペースで働きたい」タイプです。",
            "深夜なし隔日勤務は、体力や生活リズムにゆとりを持って始められる働き方です。",
            "慣れたら「しっかり稼ぐ隔日勤務」へ変更もでき、“お試し→本格”でステップアップできます。"
          ].join("<br/>"),
          applyParam:"p2"
        };

        return {
          title:"【人の役に立ちたい】地域アテンダントドライバー",
          badges:["地域貢献", `性別：${genderTxt}`, `年代：${ageTxt}`],
          reason:[
            "あなたは「人の役に立つこと」「感謝されること」にやりがいを感じるタイプです。",
            "予約中心・地域密着の働き方で、安心して続けやすいのが特徴です。",
            "流し営業が少なく、顔なじみのお客様中心のため、落ち着いて働けます。"
          ].join("<br/>"),
          applyParam:"p3"
        };
      }

      function decideProposal(){
        let base="p2";
        if(state.motivation==="earn") base="p1";
        if(state.motivation==="pace") base="p2";
        if(state.motivation==="help") base="p3";

        let score={p1:0,p2:0,p3:0};
        for(const v of state.val){
          const m=SCORE_MAP[v]; if(!m) continue;
          score.p1 += m.p1||0; score.p2 += m.p2||0; score.p3 += m.p3||0;
        }

        if(state.exp==="new" && state.anx.size>=3 && base!=="p3") score.p2 += 2;
        if(state.exp==="experienced" && state.motivation==="earn") score.p1 += 2;

        if(state.motivation==="help"){
          score.p3 += 2;
          if(state.gender==="female") score.p3 += 1;
          if(state.val.has("thanks")) score.p3 += 2;
        }

        score[base] += 1;
        const sorted=Object.entries(score).sort((a,b)=>b[1]-a[1]);
        if(sorted[0][1] === sorted[1]?.[1]) return base;
        return sorted[0][0];
      }

      function setupNoneExclusive(groupName, noneValue) {
        root.querySelectorAll(`input[name="${groupName}"]`).forEach(inp => {
          inp.addEventListener("change", () => {
            const inputs = [...root.querySelectorAll(`input[name="${groupName}"]`)];
            const none = inputs.find(i => i.value === noneValue);
            if (!none) return;

            if (inp.value === noneValue && inp.checked) {
              inputs.forEach(i => { if (i.value !== noneValue) i.checked = false; });
            } else if (inp.value !== noneValue && inp.checked) {
              none.checked = false;
            }
          });
        });
      }

      function syncState(){
        state.exp = root.querySelector('input[name="td_exp"]:checked')?.value || null;
        state.gender = root.querySelector('input[name="td_gender"]:checked')?.value || null;
        state.age = root.querySelector("#td_age")?.value || null;
        state.motivation = root.querySelector('input[name="td_motivation"]:checked')?.value || null;

        state.anx = new Set([...root.querySelectorAll('input[name="td_anx"]:checked')].map(i=>i.value));
        state.val5 = new Set([...root.querySelectorAll('input[name="td_val5"]:checked')].map(i=>i.value));
        state.val6 = new Set([...root.querySelectorAll('input[name="td_val6"]:checked')].map(i=>i.value));
        state.val  = new Set([...state.val5, ...state.val6].filter(v => v !== "none5" && v !== "none6"));

        const newOnly = root.querySelector("#td_anx_newonly");
        if(newOnly){
          if(state.exp === "new") newOnly.classList.remove("hidden");
          else newOnly.classList.add("hidden");
        }
      }

      function canGoNext(step){
        syncState();
        if(step===1) return !!state.exp;
        if(step===2) return !!state.gender && !!state.age;
        if(step===3) return !!state.motivation;
        if(step===5) return state.val5.size >= 1;
        if(step===6) return state.val6.size >= 1;
        return true;
      }

      function showApplyForm(){
        const form = q("#td_applyForm");
        const complete = q("#td_applyComplete");
        if(form) form.style.display = "block";
        if(complete) complete.style.display = "none";
        if(form) form.scrollIntoView({behavior:"smooth", block:"start"});
      }

      function showApplyComplete(){
        const form = q("#td_applyForm");
        const complete = q("#td_applyComplete");
        if(form) form.style.display = "none";
        if(complete) complete.style.display = "block";
        if(complete) complete.scrollIntoView({behavior:"smooth", block:"start"});
      }

      function fillApplyForm(p){
        const jobInput = q("#td_f_job");
        if(jobInput) jobInput.value = JOB_LABEL[p.applyParam] || p.title || "";
        const ageInput = q("#td_f_age");
        if(ageInput) ageInput.value = state.age || "";
        // ★応募コメントには診断結果を入れない（要望どおり）
      }

      function validateApply(){
        const job = (q("#td_f_job")?.value || "").trim();
        const name = (q("#td_f_name")?.value || "").trim();
        const addr = (q("#td_f_address")?.value || "").trim();
        const age  = (q("#td_f_age")?.value || "").trim();
        const email = (q("#td_f_email")?.value || "").trim();
        const tel = (q("#td_f_tel")?.value || "").trim();

        if(!job) return "職種が未選択です。";
        if(!name) return "名前を入力してください。";
        if(!addr) return "住所を入力してください。";
        if(!age) return "年齢（年代）を入力してください。";
        if(!email) return "メールアドレスを入力してください。";
        if(!tel) return "電話番号を入力してください。";
        return "";
      }

      async function submitApply(p){
        const err = validateApply();
        if(err){ alert(err); return; }

        const payload = {
          token: "driver-apply",
          applicant: {
            jobLabel: q("#td_f_job")?.value || "",
            name: q("#td_f_name")?.value || "",
            address: q("#td_f_address")?.value || "",
            age: q("#td_f_age")?.value || "",
            email: q("#td_f_email")?.value || "",
            tel: q("#td_f_tel")?.value || "",
            comment: q("#td_f_comment")?.value || "" // ★最後
          },
          diagnosis: { // ★サーバー側で「管理者メール」にだけ記載される
            proposalKey: p.applyParam,
            proposalTitle: p.title,
            exp: state.exp,
            gender: state.gender,
            age: state.age,
            motivation: state.motivation,
            anx: Array.from(state.anx || []),
            val5: Array.from(state.val5 || []),
            val6: Array.from(state.val6 || [])
          }
        };

        const btn = q("#td_applySubmitBtn");
        if(btn){ btn.disabled = true; btn.textContent = "送信中…"; }

        // ===== 失敗原因を“一発で特定”するログ =====
        console.group("[APPLY] submit");
        console.log("endpoint:", APPLY_ENDPOINT);
        console.log("payload:", payload);

        try{
          const res = await fetch(APPLY_ENDPOINT, {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify(payload)
          });

          console.log("http status:", res.status, res.statusText);

          const text = await res.text();      // まず生（JSON以外も見える）
          console.log("raw response:", text);

          let json = {};
          try { json = JSON.parse(text || "{}"); } catch(_) {}
          console.log("json:", json);

          if(!res.ok || json.ok !== true) {
            throw new Error(`send failed: HTTP=${res.status} ok=${json.ok}`);
          }

          showApplyComplete();
          if(btn){ btn.disabled = false; btn.textContent = "送信する"; }
          console.groupEnd();
        }catch(e){
          console.error("submit error:", e);
          console.groupEnd();
          alert("送信に失敗しました。時間をおいて再度お試しください。");
          if(btn){ btn.disabled = false; btn.textContent = "送信する"; }
        }
      }

      function renderResult(){
        syncState();

        const key = decideProposal();
        const p = buildProposal(key);

        const top = q("#td_resultTop");
        const badges = (p.badges||[]).map(b=>`<span class="badge">${escapeHtml(b)}</span>`).join("");
        const companyLine = buildCompanyValueLine();
        const companyReason = buildCompanyReasonByProposal(key);

        if(top){
          top.innerHTML = `
            <div class="resultTitle">診断結果：あなたにおすすめの働き方は…</div>
            <div style="margin:8px 0 6px;">${badges}</div>
            <div style="font-size:16px;font-weight:900; margin-top: 8px;">${escapeHtml(p.title)}</div>
            ${companyLine ? `<p class="sub" style="margin-top:10px;"><b>✅ ${escapeHtml(companyLine)}</b></p>` : ""}
            ${companyReason ? `<p class="sub" style="margin-top:6px;">${escapeHtml(companyReason)}</p>` : ""}
            <p class="reason">${p.reason}</p>
          `;
        }

        const anxWrap = q("#td_anxList");
        const selected = [...state.anx].filter(k=>{
          const isNewOnly=["geo","service","foreign","long"].includes(k);
          return !(isNewOnly && state.exp!=="new");
        });
        const ordered = ANX_PRIORITY.filter(k => selected.includes(k));

        if(anxWrap){
          anxWrap.innerHTML = ordered.length
            ? ordered.map(k=>`
                <div class="anxCard">
                  <h4>${escapeHtml(ANX_COPY[k].title)}</h4>
                  <p>${escapeHtml(ANX_COPY[k].body)}</p>
                </div>
              `).join("")
            : `<div class="anxCard"><h4>✅ 不安が少ない状態です</h4><p>気になる点があれば、面談で気軽に相談できます。</p></div>`;
        }

        // CTA（募集要項リンク & 表示テキスト）
        const talkBtn = q("#td_talkBtn");
        const applyBtn = q("#td_applyBtn");

        if(talkBtn) talkBtn.href = TALK_URL_BY_JOB[p.applyParam] || "#";

        const cta = CTA_LABEL_MAP[key];
        if(cta){
          if(applyBtn) applyBtn.textContent = cta.apply;
          if(talkBtn)  talkBtn.textContent  = cta.talk;
        }

        // 応募フォーム/完了を初期化
        const form = q("#td_applyForm");
        const complete = q("#td_applyComplete");
        if(form) form.style.display = "none";
        if(complete) complete.style.display = "none";

        showStep(7);
      }

      // ===== init =====
      let current = 0;
      setupNoneExclusive("td_val5", "none5");
      setupNoneExclusive("td_val6", "none6");
      renderStepbar(0);
      showStep(0);

      // Start
      const startBtn = q("#td_startBtn");
      if(startBtn){
        startBtn.addEventListener("click", function(){
          current = 1;
          showStep(current);
        });
      }

      // exp変更で未経験不安欄切替
      root.addEventListener("change", function(e){
        const t = e.target;
        if(t && t.name === "td_exp") syncState();
      });

      // Prev/Next
      root.addEventListener("click", function(e){
        const prev = e.target.closest("[data-td-prev]");
        const next = e.target.closest("[data-td-next]");

        if(prev){
          syncState();
          current = Math.max(0, current - 1);
          showStep(current);
          return;
        }

        if(next){
          if(!canGoNext(current)){
            if(current===5 || current===6) alert("1つ以上選択してください。（「特になし」でもOK）");
            else alert("選択が必要な項目があります。");
            return;
          }
          current = Math.min(6, current + 1);
          showStep(current);
          return;
        }
      });

      // 結果へ
      const toResultBtn = q("#td_toResultBtn");
      if(toResultBtn){
        toResultBtn.addEventListener("click", function(){
          if(!canGoNext(6)){
            alert("STEP6は1つ以上選択してください。（「特になし」でもOK）");
            return;
          }
          syncState();
          if(!state.exp || !state.gender || !state.age || !state.motivation){
            alert("STEP1〜STEP3の必須項目が未入力です。戻って入力してください。");
            return;
          }
          renderResult();
        });
      }

      // リスタート
      const restartBtn = q("#td_restartBtn");
      if(restartBtn){
        restartBtn.addEventListener("click", function(){
          root.querySelectorAll('input[type="radio"], input[type="checkbox"]').forEach(i=>i.checked=false);
          const ageSel = q("#td_age");
          if(ageSel) ageSel.value = "";

          state.exp=state.gender=state.age=state.motivation=null;
          state.anx=new Set(); state.val=new Set(); state.val5=new Set(); state.val6=new Set();

          const newOnly = q("#td_anx_newonly");
          if(newOnly) newOnly.classList.add("hidden");

          // フォーム初期化
          const form = q("#td_applyForm");
          const complete = q("#td_applyComplete");
          if(form) form.style.display = "none";
          if(complete) complete.style.display = "none";

          current = 0;
          showStep(0);
        });
      }

      // 応募フォームを開く（結果画面の「この職種で応募する」）
      const applyOpenBtn = q("#td_applyBtn");
      if(applyOpenBtn){
        applyOpenBtn.addEventListener("click", function(e){
          e.preventDefault();
          syncState();
          const key = decideProposal();
          const p = buildProposal(key);
          fillApplyForm(p);
          showApplyForm();
        });
      }

      // 応募フォーム送信
      const submitBtn = q("#td_applySubmitBtn");
      if(submitBtn){
        submitBtn.addEventListener("click", function(){
          syncState();
          const key = decideProposal();
          const p = buildProposal(key);
          submitApply(p);
        });
      }
    });
  })();
  </script>
</div>

</body>
</html>