/* 企業・団体 参加申込（STEP1）の見た目 v0.1.0
 *
 * ★ヒアリング（STEP2）は /trial/ の骨格をそのままコピーして使っています。
 *   こちらは**縦に積むだけの申込書**で、あちらの2段組とは形が違うため、
 *   同じ骨格を借りずに、必要な分だけ自前で持ちます。
 *   ★ただし色と丸みは合わせます（企業の方が続けて見るため）。
 */
#zqca-root {
    --ca-ink: #1b2838;
    --ca-sub: #6b7e92;
    --ca-line: #dbe5f0;
    --ca-sky: #48a8ee;
    --ca-sky-l: #bfe0f7;
    --ca-sky-bg: #f2f9ff;
    --ca-r: 14px;
    font-family: "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
    color: var(--ca-ink);
    display: block;
    max-width: 860px;
    margin: 0 auto;
    padding: 0 14px 60px;
}
#zqca-root * { box-sizing: border-box; }

#zqca-root .zqca-hd {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 4px; flex-wrap: wrap;
}
#zqca-root .zqca-badge {
    background: linear-gradient(135deg, #48a8ee, #2b6df0);
    color: #fff; border-radius: 999px; padding: 5px 14px;
    font-size: 12.5px; font-weight: 900;
}
#zqca-root .zqca-hd b { font-size: 16px; }
#zqca-root .zqca-mx { margin-left: auto; font-size: 11px; color: var(--ca-sub); letter-spacing: .18em; }

#zqca-root .zqca-card {
    background: #fff; border: 1px solid var(--ca-line);
    border-radius: var(--ca-r); padding: 18px 18px 20px; margin-bottom: 14px;
}
#zqca-root .zqca-h2 { margin: 0 0 8px; font-size: 16px; font-weight: 900; }
#zqca-root .zqca-lead { margin: 0 0 12px; font-size: 13px; line-height: 1.9; color: #35506b; }
#zqca-root .zqca-note { margin: 5px 0 12px; font-size: 11.5px; line-height: 1.8; color: var(--ca-sub); }
#zqca-root .zqca-err {
    margin: 10px 0; font-size: 12.5px; line-height: 1.8; color: #b3261e;
    background: #fff5f5; border: 1px solid #f3d2d0; border-radius: 10px; padding: 9px 12px;
}
#zqca-root .zqca-warn {
    margin: 0 0 12px; font-size: 12.5px; line-height: 1.8; color: #8a5a00;
    background: #fff8e8; border: 1px solid #f0dcae; border-radius: 10px; padding: 9px 12px;
}
#zqca-root .zqca-ok { margin: 0 0 12px; font-size: 13px; color: #0e8f5f; font-weight: 700; }

#zqca-root .zqca-lb {
    display: block; margin: 12px 0 5px; font-size: 12.5px; font-weight: 800;
}
#zqca-root .zqca-lb i {
    font-style: normal; font-size: 10.5px; font-weight: 700;
    margin-left: 7px; padding: 2px 7px; border-radius: 999px;
    background: #ffe9e9; color: #b3261e;
}
#zqca-root .zqca-lb i.zqca-any { background: #eef2f8; color: var(--ca-sub); }

#zqca-root .zqca-in {
    width: 100%; border: 1px solid var(--ca-line); border-radius: 10px;
    padding: 11px 12px; font-size: 16px;   /* ★16px 未満だと iOS が勝手に拡大する */
    font-family: inherit; color: var(--ca-ink); background: #fff;
}
#zqca-root .zqca-in:focus { outline: none; border-color: var(--ca-sky); background: var(--ca-sky-bg); }
#zqca-root .zqca-in:disabled { background: #f4f7fb; color: var(--ca-sub); }
#zqca-root .zqca-ta { line-height: 1.8; resize: vertical; }
#zqca-root .zqca-code { letter-spacing: .5em; text-align: center; font-size: 22px; font-weight: 900; }
#zqca-root .zqca-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#zqca-root .zqca-sub {
    border-left: 3px solid var(--ca-sky-l); padding-left: 13px; margin: 6px 0 14px;
}

#zqca-root .zqca-btn {
    appearance: none; border: 0; border-radius: 12px;
    padding: 12px 22px; margin-top: 12px;
    background: linear-gradient(135deg, #48a8ee, #2b6df0);
    color: #fff; font-size: 14px; font-weight: 900; font-family: inherit;
    cursor: pointer; box-shadow: 0 4px 14px rgba(43, 109, 240, .3);
    display: inline-block; text-decoration: none; text-align: center;
}
#zqca-root .zqca-btn:disabled { background: #dde4ee; box-shadow: none; cursor: default; }
#zqca-root .zqca-btn.zqca-sm { padding: 9px 16px; font-size: 12.5px; margin-top: 0; }
#zqca-root .zqca-btn.zqca-done { background: #0e8f5f; box-shadow: none; }
#zqca-root .zqca-btn.zqca-big { width: 100%; padding: 15px; font-size: 15px; }
#zqca-root .zqca-link {
    display: inline-block; margin: 10px 14px 0 0;
    background: none; border: 0; padding: 0;
    color: #1b7fbf; font-size: 12.5px; font-family: inherit; cursor: pointer;
    text-decoration: underline;
}

/* ★★2026-10-10・Ryu「選択がしにくい」「Appleとかの注文サイトを参考にして」
 *
 *   もとは丸いボタンを横に並べていました。指で狙う的が**文字の幅しかなく**、
 *   選んだかどうかも色の差だけでした。
 *
 *   ★Apple の注文画面の形にそろえます。
 *     ・行まるごとが的（label が input を包む）。端まで押せる
 *     ・左にラジオ、真ん中に名前と**一行の説明**、右に金額や印
 *     ・選ぶと枠が濃くなり、右端にチェックが出る（★色だけに頼らない）
 *     ・本物の radio なので、キーボードと読み上げがそのまま効く
 */
#zqca-root .zqca-choices {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-bottom: 4px;
}
#zqca-root .zqca-choice {
    position: relative;
    display: flex;
    align-items: center;
    gap: 13px;
    border: 1.5px solid var(--ca-line);
    border-radius: 12px;
    padding: 14px 44px 14px 15px;
    cursor: pointer;
    background: #fff;
    transition: border-color .12s, background .12s;
}
#zqca-root .zqca-choice:hover { border-color: var(--ca-sky-l); background: #fbfdff; }
#zqca-root .zqca-choice input[type="radio"] {
    width: 20px; height: 20px; margin: 0; flex: 0 0 auto; accent-color: #2b6df0;
}
#zqca-root .zqca-choiceBody { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#zqca-root .zqca-choiceBody b { font-size: 14px; font-weight: 800; }
#zqca-root .zqca-choiceBody small {
    font-size: 11.5px; line-height: 1.7; color: var(--ca-sub);
}
#zqca-root .zqca-price {
    margin-left: auto; font-size: 13px; font-weight: 800; color: #35506b; white-space: nowrap;
}
/* 選んだときの印。★枠の色だけで伝えない */
#zqca-root .zqca-tick {
    position: absolute; right: 15px; top: 50%; width: 17px; height: 17px;
    margin-top: -9px; opacity: 0;
}
#zqca-root .zqca-tick::before {
    content: ""; position: absolute; left: 4px; top: 0;
    width: 6px; height: 12px; border: solid #2b6df0;
    border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}
#zqca-root .zqca-choice.zqca-on {
    border-color: #2b6df0;
    background: var(--ca-sky-bg);
    box-shadow: 0 0 0 1px #2b6df0 inset;
}
#zqca-root .zqca-choice.zqca-on .zqca-tick { opacity: 1; }
#zqca-root .zqca-choice.zqca-on .zqca-price { color: #1b6fc0; }
/* ★キーボードで来たときに、どこに居るか分かるように */
#zqca-root .zqca-choice:focus-within { border-color: #2b6df0; outline: 2px solid var(--ca-sky-l); outline-offset: 2px; }

#zqca-root .zqca-pdf {
    border: 1px solid var(--ca-line); border-radius: 12px; overflow: hidden;
    background: #f4f7fb; height: 56vh; min-height: 320px;
}
#zqca-root .zqca-pdf iframe { width: 100%; height: 100%; border: 0; display: block; }
#zqca-root .zqca-pdfRow {
    display: flex; align-items: center; gap: 14px; margin-top: 10px; flex-wrap: wrap;
}

#zqca-root .zqca-term {
    border-top: 1px solid var(--ca-line); padding: 11px 0;
}
#zqca-root .zqca-tLine { display: flex; align-items: center; gap: 9px; font-size: 13.5px; cursor: pointer; }
#zqca-root .zqca-tLine input { width: 19px; height: 19px; }
#zqca-root .zqca-term details { margin: 6px 0 0 28px; }
#zqca-root .zqca-term summary {
    cursor: pointer; font-size: 12px; color: #1b7fbf; list-style: none;
}
#zqca-root .zqca-term summary::-webkit-details-marker { display: none; }
#zqca-root .zqca-term summary::before { content: "▸ "; }
#zqca-root .zqca-term details[open] summary::before { content: "▾ "; }
#zqca-root .zqca-term ul { margin: 7px 0 0; padding-left: 18px; }
#zqca-root .zqca-term li { font-size: 12px; line-height: 1.9; color: #35506b; margin-bottom: 3px; }

#zqca-root .zqca-sendBox { text-align: center; }
#zqca-root .zqca-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

#zqca-root .zqca-doneCard { text-align: center; padding: 30px 20px; }
#zqca-root .zqca-cid { margin: 0 0 16px; font-size: 15px; }
#zqca-root .zqca-cid b { font-size: 20px; letter-spacing: .06em; }
#zqca-root .zqca-next {
    margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--ca-line);
}
#zqca-root .zqca-nextT { margin: 0 0 10px; font-size: 12.5px; color: var(--ca-sub); }
#zqca-root .zqca-due {
    font-size: 12.5px; line-height: 1.9; color: #35506b;
    background: var(--ca-sky-bg); border-radius: 10px; padding: 11px 13px; margin: 0 0 14px;
}

/* ★狭い画面。企業の方はスマートフォンからも入力されます */
@media (max-width: 700px) {
    #zqca-root .zqca-2 { grid-template-columns: 1fr; }
    #zqca-root .zqca-plans { grid-template-columns: repeat(2, 1fr); }
    #zqca-root .zqca-pdf { height: 46vh; }
}

/* ★説明書を同意の段の中に置く（Ryu 指示 2026-10-10）
   「いきなりPDFでなくて、確認と同意欄に埋め込んで」
   ★畳んでおく。開いた人だけが読む形にして、画面の最初を軽くする。 */
#zqca-root .zqca-brief {
    border: 1px solid var(--ca-sky-l);
    background: var(--ca-sky-bg);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 14px;
}
#zqca-root .zqca-brief > summary {
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 900;
    color: #1b6fc0;
    list-style: none;
}
#zqca-root .zqca-brief > summary::-webkit-details-marker { display: none; }
#zqca-root .zqca-brief > summary::before { content: "▸ "; }
#zqca-root .zqca-brief[open] > summary::before { content: "▾ "; }
#zqca-root .zqca-agreeTo {
    margin: 0 0 6px;
    font-size: 13.5px;
    font-weight: 800;
}

/* ★★2026-10-10 本番の画面で見つけた：
     「次へ進む」ボタンに「コードをもう一度送る」が**重なっていました。**
     ボタンは行の流れの中に居るのに、リンクを横に並べたためです。
     ＝ボタンは1行占め、リンクはその下に並べる。 */
#zqca-root .zqca-btn { display: block; }
#zqca-root .zqca-btn.zqca-sm { display: inline-block; }
#zqca-root .zqca-links { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 4px; }

/* ★最初の画面の御礼（Ryu 指示 2026-10-10「最初にしっかりお礼をかかないと」）
   ★手続きの前に、まず御礼と見通しを出す。
     「何分かかるのか」が分からないまま始まるのが、いちばん不安なためです。 */
#zqca-root .zqca-welcome {
    border-color: var(--ca-sky-l);
    background: linear-gradient(180deg, #f7fbff, #fff 60%);
}
#zqca-root .zqca-steps {
    display: flex; gap: 10px; margin: 14px 0 12px; flex-wrap: wrap;
}
#zqca-root .zqca-step {
    flex: 1 1 170px;
    display: flex; align-items: center; gap: 9px;
    border: 1px solid var(--ca-line); border-radius: 12px;
    padding: 10px 12px; background: #fff;
}
#zqca-root .zqca-step b {
    flex: 0 0 auto; width: 23px; height: 23px; border-radius: 50%;
    background: linear-gradient(135deg, #48a8ee, #2b6df0); color: #fff;
    font-size: 12px; display: flex; align-items: center; justify-content: center;
}
#zqca-root .zqca-step span { font-size: 12.5px; font-weight: 700; }
#zqca-root .zqca-step i {
    margin-left: auto; font-style: normal; font-size: 11px; color: var(--ca-sub); white-space: nowrap;
}

/* ★足りないところの知らせ（Ryu 指摘 2026-10-10「赤字の注意書きがおかしい」）
   ★1行に詰め込まず、見出し＋箇条書きにする。
     項目名の中に中黒が入るので、中黒で区切ると切れ目が分かりません。 */
#zqca-root .zqca-need {
    text-align: left;
    background: #fff5f5;
    border: 1px solid #f3d2d0;
    border-radius: 12px;
    padding: 13px 15px;
    margin-bottom: 14px;
}
#zqca-root .zqca-needT {
    margin: 0 0 7px;
    font-size: 13px;
    font-weight: 800;
    color: #b3261e;
}
#zqca-root .zqca-need ul { margin: 0; padding-left: 20px; }
#zqca-root .zqca-need li {
    font-size: 12.5px;
    line-height: 1.9;
    color: #8a2f2a;
}

/* ★オンラインでのお申し込みが難しい企業向けの逃げ道（Ryu 指示 2026-10-10）
   ★目立たせすぎない。ただし、困った方が探さずに見つけられる位置に。 */
#zqca-root .zqca-paper {
    border: 1px dashed var(--ca-line);
    background: #fafcff;
    border-radius: 12px;
    padding: 13px 15px;
    margin-bottom: 14px;
}
#zqca-root .zqca-paperT {
    margin: 0 0 5px;
    font-size: 12.5px;
    font-weight: 800;
    color: #35506b;
}
#zqca-root .zqca-paperL {
    margin: 0 0 4px;
    font-size: 12px;
    line-height: 1.9;
    color: var(--ca-sub);
}
#zqca-root .zqca-paperL b { color: #35506b; }
#zqca-root .zqca-paperL .zqca-link { margin: 0 16px 0 0; }

/* ★止めはしないが、お伝えしたいこと（Ryu 決定 B・2026-10-10）
   ★赤にしない。咎めているのではなく、おすすめを伝えているだけなので。 */
#zqca-root .zqca-soft {
    margin: 0 0 12px;
    font-size: 12px;
    line-height: 1.8;
    color: #35506b;
    background: var(--ca-sky-bg);
    border: 1px solid var(--ca-sky-l);
    border-radius: 10px;
    padding: 9px 12px;
}

/* ★スマホでは説明書を別画面で開いていただく（v0.25.0・Ryu 2026-10-11）
   iPhone の Safari は iframe の中の PDF を指で送れないため */
#zqca-root .zqca-pdfPhone {
    border: 1px solid var(--zqca-sky, #bfe2f8); background: #f4fbff; border-radius: 12px;
    padding: 14px 16px; margin: 10px 0 2px; text-align: center;
}
#zqca-root .zqca-pdfPhone p { margin: 0 0 8px; }
#zqca-root .zqca-pdfOpen { display: inline-block; margin: 4px 0 8px; text-decoration: none; }