/* ============================================================
   質問フローモーダル（lp2-nijikango と同一の挙動・見た目。2026-10-15 追加）
   変数は lp2 の :root と同じ値。FV側の --line（罫線色）と名前が衝突するため
   モーダル内だけ --nf-line を使う。
   ============================================================ */
.nf-modal{ --primary:#FF6B8B; --primary-deep:#F2537A; --primary-soft:#FFF0F3; --primary-pale:#FDE7EC; --text:#333; --sub:#666; --border:#EFEFEF; --nf-line:#06C755; }
.nf-modal, .nf-modal *{ font-family: Arial, Helvetica, "Hiragino Sans", "Noto Sans JP", sans-serif; color: var(--text); line-height:1.5; }
.nf-modal img{display:block}
.button[data-flow]{cursor:pointer}
.nf-modal{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.5);overflow-y:auto;-webkit-overflow-scrolling:touch;padding:16px 14px calc(24px + env(safe-area-inset-bottom))}
.nf-modal[hidden]{display:none}
.nf-modal-box{max-width:430px;margin:0 auto}
.nf-modal .nf,.nf-modal .nf-done{margin-top:0}
.nf-hd{position:relative;padding-right:44px;padding-left:44px}
.nf-close{position:absolute;top:50%;right:8px;transform:translateY(-50%);width:34px;height:34px;border:0;border-radius:50%;background:rgba(255,255,255,.22);color:#fff;font-size:22px;line-height:1;font-family:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center}
.nf-close:active{background:rgba(255,255,255,.35)}
body.nf-open{overflow:hidden}

/* ---- LP完結フォーム（2026-08-20 追加）---- */
.nf{margin-top:18px;background:#fff;border:2.5px solid var(--primary);border-radius:20px;padding:0 0 18px;box-shadow:0 14px 32px rgba(242,83,122,.30);overflow:hidden}
.nf-hd{background:linear-gradient(135deg,#FF8AA3,var(--primary-deep));color:#fff;text-align:center;padding:12px;font-size:15px;font-weight:900;letter-spacing:.02em}
.nf-hd small{display:block;font-size:11px;font-weight:700;opacity:.95;margin-top:3px;letter-spacing:0}
.nf-body{padding:15px 14px 0}
.nf-prog{height:6px;background:var(--primary-pale);border-radius:99px;overflow:hidden;margin-bottom:8px}
.nf-bar{display:block;height:100%;width:20%;background:linear-gradient(90deg,#FF8AA3,var(--primary-deep));border-radius:99px;transition:width .3s ease}
.nf-meta{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--sub);font-weight:700;margin-bottom:12px}
.nf-meta b{color:var(--primary-deep);font-size:13px}
.nf-q{font-size:15.5px;font-weight:900;line-height:1.5;margin-bottom:4px}
.nf-hint{font-size:11px;color:var(--sub);margin-bottom:10px}
.nf-opts{display:flex;flex-wrap:wrap;gap:8px}
.nf-opt{flex:1 1 calc(50% - 4px);min-height:48px;border:1.5px solid var(--border);background:#fff;border-radius:12px;font-size:13.5px;font-weight:700;color:var(--text);cursor:pointer;padding:8px 10px;line-height:1.35;transition:.15s;font-family:inherit}
.nf-opt:active{transform:scale(.98)}
.nf-opt.on{border-color:var(--primary);background:var(--primary-soft);color:var(--primary-deep);box-shadow:0 0 0 2px rgba(255,107,139,.15)}
.nf-opt.wide{flex:1 1 100%}
/* 資格（複数選択）は選択済みが分かるよう右上に「選択中」バッジを出す */
#nf-qual .nf-opt{position:relative}
#nf-qual .nf-opt.on::after{content:'選択中';position:absolute;top:-8px;right:-6px;background:var(--primary-deep);color:#fff;font-size:9.5px;font-weight:800;line-height:1.4;padding:2px 7px;border-radius:999px;box-shadow:0 2px 5px rgba(0,0,0,.18);white-space:nowrap}
.nf-field{margin-bottom:12px}
.nf-label{display:block;font-size:12.5px;font-weight:800;margin-bottom:5px}
.nf-label .req{background:var(--primary);color:#fff;font-size:9.5px;border-radius:4px;padding:1px 5px;margin-left:6px;vertical-align:1px}
.nf-input,.nf-sel{width:100%;height:48px;border:1.5px solid var(--border);border-radius:10px;padding:0 12px;font-size:16px;font-family:inherit;color:var(--text);background:#fff}
.nf-input:focus,.nf-sel:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(255,107,139,.12)}
.nf-row{display:flex;gap:8px}
.nf-row>*{flex:1;min-width:0}
.nf-note{font-size:10.5px;color:#888;margin-top:4px;line-height:1.5}
.nf-btn{width:100%;height:56px;margin-top:14px;border:0;border-radius:28px;background:linear-gradient(135deg,#FF8AA3,var(--primary-deep));color:#fff;font-size:16px;font-weight:900;font-family:inherit;cursor:pointer;box-shadow:0 8px 20px rgba(255,107,139,.35)}
.nf-btn:disabled{opacity:.6;box-shadow:none}
.nf-back{display:block;width:100%;margin-top:10px;background:none;border:0;color:var(--sub);font-size:12.5px;font-weight:700;font-family:inherit;cursor:pointer;text-decoration:underline}
.nf-err{background:#FFF1F2;border:1.5px solid #FFC9D2;color:#D32F52;font-size:12.5px;font-weight:700;border-radius:10px;padding:9px 11px;margin-bottom:10px;line-height:1.5}
.nf-submit-note{font-size:11px;color:#777;line-height:1.55;margin-top:8px;text-align:center}
.nf-done{margin-top:18px;background:#fff;border:2.5px solid var(--nf-line);border-radius:20px;padding:22px 16px;text-align:center;box-shadow:0 14px 32px rgba(6,199,85,.20)}
.nf-done h3{font-size:17px;font-weight:900;margin-bottom:8px}
.nf-done p{font-size:12.5px;color:var(--sub);line-height:1.7;margin-bottom:14px}
.nf-line{display:flex;align-items:center;justify-content:center;gap:10px;height:60px;border-radius:30px;background:var(--nf-line);color:#fff;font-size:16px;font-weight:900;text-decoration:none;box-shadow:0 8px 20px rgba(6,199,85,.32)}

/* ---- 2ボタンCTA＋モーダル（lp2-nijikango: lp02と同じ「ボタン→質問フローモーダル」型。2026-09-03）---- */
.reg-cta{margin-top:18px}
.reg-cta-note{text-align:center;font-size:13px;font-weight:800;color:#444;margin-bottom:10px}
.cta-main{width:100%;border:0;font-family:inherit;cursor:pointer}
.cta-sub{display:flex;align-items:center;justify-content:center;width:100%;height:58px;margin-top:12px;border-radius:29px;background:#fff;border:2px solid #D6D6D6;color:#444;font-size:15px;font-weight:800;font-family:inherit;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.05)}
.cta-sub:active{background:#F7F7F7}
.nf-modal{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.5);overflow-y:auto;-webkit-overflow-scrolling:touch;padding:16px 14px calc(24px + env(safe-area-inset-bottom))}
.nf-modal[hidden]{display:none}
.nf-modal-box{max-width:430px;margin:0 auto}
.nf-modal .nf,.nf-modal .nf-done{margin-top:0}
.nf-hd{position:relative;padding-right:44px;padding-left:44px}
.nf-close{position:absolute;top:50%;right:8px;transform:translateY(-50%);width:34px;height:34px;border:0;border-radius:50%;background:rgba(255,255,255,.22);color:#fff;font-size:22px;line-height:1;font-family:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center}
.nf-close:active{background:rgba(255,255,255,.35)}
body.nf-open{overflow:hidden}

/* ==== lp2-nijikango 2026-10-06 ブロックを移植（2026-10-15）: モーダル縦中央＋転職時期の強調ボタン ==== */
@keyframes ctaShine{0%{left:-80%}45%{left:130%}100%{left:130%}}
/* ==== 2026-10-06 ①モーダルを縦方向の中央に配置 ②転職時期の「今すぐ」「3ヶ月以内」を強調（「未定・情報収集中」は選択肢から削除）==== */
/* flex＋margin:auto で中央寄せ。内容が画面より高いとき（STEP4など）は従来どおり上から表示してスクロールできる */
.nf-modal{display:flex;flex-direction:column}
.nf-modal-box{width:100%;margin:auto}
/* 強調ボタン: 太枠＋淡ピンク地＋矢印＋ゆるい鼓動と光の流れ。選択後は塗りつぶし */
.nf-opt.hot{position:relative;overflow:hidden;min-height:58px;font-size:16px;font-weight:900;border:2px solid var(--primary);background:linear-gradient(135deg,#FFF3F6,#FFE3EA);color:var(--primary-deep);box-shadow:0 6px 16px rgba(255,107,139,.22);animation:hotPulse 1.8s ease-in-out infinite}
.nf-opt.hot::after{content:"›";position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:24px;font-weight:900;color:var(--primary-deep);line-height:1}
.nf-opt.hot::before{content:"";position:absolute;top:0;left:-80%;width:45%;height:100%;background:linear-gradient(120deg,rgba(255,255,255,0),rgba(255,255,255,.75),rgba(255,255,255,0));transform:skewX(-20deg);animation:ctaShine 2.8s ease-in-out infinite;pointer-events:none}
.nf-opt.hot:nth-child(2){animation-delay:.35s}
.nf-opt.hot:nth-child(2)::before{animation-delay:.35s}
.nf-opt.hot:nth-child(3){animation-delay:.7s}
.nf-opt.hot:nth-child(3)::before{animation-delay:.7s}
.nf-opt.hot.on{background:linear-gradient(135deg,#FF8AA3,var(--primary-deep));color:#fff;animation:none}
.nf-opt.hot.on::after{color:#fff}
/* 強調しない選択肢は一段控えめに */
[data-single="timing"] .nf-opt:not(.hot){min-height:44px;font-size:13px;font-weight:600;color:#666;border-color:#E3E3E3}
[data-single="timing"] .nf-opt.hot + .nf-opt:not(.hot){margin-top:4px}
@keyframes hotPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}
@media (prefers-reduced-motion:reduce){.nf-opt.hot{animation:none}.nf-opt.hot::before{display:none}}

/* ===== CTAボタンの動き強化（2026-10-26）=====
   メイン（ピンク・.cta-animate）: 鼓動＋周期的なぷるっと揺れ＋光の帯＋外側に広がる波紋＋矢印
   サブ（白）: 枠線の色がゆっくり脈打つ程度に控えめ                                        */
[data-element-type="cta"].cta-animate{
  position:relative; overflow:hidden; isolation:isolate; padding-right:3em !important; padding-left:3em !important;
  animation:njkCtaBeat 2.6s ease-in-out infinite, njkCtaRing 2.6s ease-out infinite !important;
}
[data-element-type="cta"].cta-animate::before{
  content:""; position:absolute; top:0; left:-60%; width:40%; height:100%; z-index:-1; pointer-events:none;
  background:linear-gradient(110deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.65) 50%,rgba(255,255,255,0) 100%);
  transform:skewX(-20deg); animation:njkCtaShine 2.6s ease-in-out infinite;
}
[data-element-type="cta"].cta-animate::after{
  content:"›"; position:absolute; right:1.1em; top:50%; width:1.6em; height:1.6em; margin-top:-.8em;
  display:flex; align-items:center; justify-content:center; border-radius:50%;
  background:#fff; color:#ec4899; font-size:1.05em; font-weight:900; line-height:1;
  animation:njkCtaArrow 1.3s ease-in-out infinite;
}
[data-element-type="cta"]:not(.cta-animate){ animation:njkCtaBorder 2.6s ease-in-out infinite; }
[data-element-type="cta"]:active{ transform:scale(.97) !important; }
@keyframes njkCtaBeat{
  0%,100%{transform:scale(1)} 12%{transform:scale(1.045)} 24%{transform:scale(1)}
  60%{transform:scale(1) rotate(0)} 64%{transform:scale(1.03) rotate(-1.4deg)} 68%{transform:scale(1.03) rotate(1.4deg)}
  72%{transform:scale(1.03) rotate(-1deg)} 76%{transform:scale(1) rotate(0)}
}
@keyframes njkCtaRing{
  0%{box-shadow:0 8px 18px -4px rgba(236,72,153,.45),0 0 0 0 rgba(236,72,153,.5)}
  70%{box-shadow:0 8px 18px -4px rgba(236,72,153,.45),0 0 0 14px rgba(236,72,153,0)}
  100%{box-shadow:0 8px 18px -4px rgba(236,72,153,.45),0 0 0 0 rgba(236,72,153,0)}
}
@keyframes njkCtaShine{ 0%,45%{left:-60%} 75%,100%{left:130%} }
@keyframes njkCtaArrow{ 0%,100%{transform:translateX(0)} 50%{transform:translateX(5px)} }
@keyframes njkCtaBorder{ 0%,100%{border-color:#d1d5db} 50%{border-color:#f9a8d4} }
/* FVに追加したCTAの周り */
.njk-fv-cta{padding:18px 20px 6px;background:#fff}
.njk-fv-cta-inner{max-width:28rem;margin:0 auto}
.njk-fv-cta-copy{text-align:center;font-size:14px;font-weight:700;color:#374151;margin-bottom:10px}
.njk-fv-cta-copy b{color:#ec4899}
@media (prefers-reduced-motion: reduce){
  [data-element-type="cta"], [data-element-type="cta"]::before, [data-element-type="cta"]::after{animation:none !important}
}