/* MEDIA-598: 転職エージェント無料相談CTA（カルーセル）
   ショートコード [cta_agent tel="..." timerex="..."] 用。ドキュメント(道上さん依頼)のデザインを忠実複製。 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700;900&display=swap');
.cta-agent *{margin:0;padding:0;box-sizing:border-box}
.cta-agent{font-family:'Noto Sans JP',sans-serif;margin:24px auto;max-width:820px}
.cta-agent .vp{overflow:hidden;border-radius:12px;box-shadow:0 3px 16px rgba(0,80,40,.14)}
.cta-agent .track{display:flex;width:500%;transition:.4s ease}
.cta-agent .slide{width:20%;flex-shrink:0}
.cta-agent .hero{background:#3dbb76;display:flex;flex-direction:column}
.cta-agent .hero-top{padding:14px 40px 12px;flex:1;display:flex;flex-direction:column;justify-content:center;gap:6px}
.cta-agent .hero-eyebrow{font-size:14px;color:rgba(255,255,255,.8);font-weight:700}
.cta-agent .hero-eyebrow em{color:#ffe135;font-style:normal}
.cta-agent .hero-h{font-size:56px;font-weight:900;color:#fff;line-height:1.05}
.cta-agent .hero-h2{font-size:56px;font-weight:900;color:#ffe135;line-height:1.05}
.cta-agent .hero-tagline{font-size:15px;color:rgba(255,255,255,.9);line-height:1.6;font-weight:500}
.cta-agent .hero-bottom{background:#2a9a5e;padding:12px 40px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.cta-agent .hero-meta{display:flex;gap:12px}
.cta-agent .hero-meta span{font-size:14px;color:#fff;font-weight:900;background:rgba(255,255,255,.2);padding:6px 14px;border-radius:6px}
.cta-agent .hero-btn{background:#ffe135;color:#1a5a30;font-size:14px;font-weight:900;padding:10px 22px;border-radius:8px;border:none;cursor:pointer;white-space:nowrap}
.cta-agent .advisor{display:flex;align-items:center;gap:12px;margin-top:8px}
.cta-agent .advisor-icon{width:62px;height:62px;border-radius:50%;overflow:hidden;border:2px solid rgba(255,255,255,.8);flex-shrink:0}
.cta-agent .advisor-icon img{width:100%;height:100%;object-fit:cover;object-position:center 5%;transform:scale(1.35);transform-origin:center 15%}
.cta-agent .advisor-name{font-size:14px;color:rgba(255,255,255,.9) !important;font-weight:700;line-height:1.5}
.cta-agent .step{background:#fff;display:grid;grid-template-columns:95px 1fr;align-items:stretch}
.cta-agent .step-left{background:#3dbb76;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px 0;gap:6px}
.cta-agent .step-num{font-size:46px;font-weight:900;color:#fff;line-height:1}
.cta-agent .step-line{width:1px;height:16px;background:rgba(255,255,255,.3)}
.cta-agent .step-tag{font-size:10px;font-weight:700;color:rgba(255,255,255,.7);letter-spacing:.1em}
.cta-agent .step-right{padding:16px 32px;display:flex;flex-direction:column;justify-content:center;gap:8px}
.cta-agent .step-h{font-size:24px;font-weight:900;color:#111;line-height:1.3}
.cta-agent .step-body{font-size:15px;color:#444;line-height:1.7}
.cta-agent .step-body strong{color:#111}
.cta-agent .step-quote{font-size:13px;color:#3dbb76;font-weight:700;border-left:3px solid #3dbb76;padding-left:10px;line-height:1.6}
.cta-agent .tags{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.cta-agent .tag{background:#111;color:#fff;font-size:13px;font-weight:700;padding:4px 13px;border-radius:4px}
.cta-agent .tag-x{color:#bbb;font-size:12px}
.cta-agent .frow{display:grid;grid-template-columns:1fr 18px 1fr 18px 1fr 18px 1fr;align-items:center;gap:5px}
.cta-agent .fb{background:#f5fdf8;border:2px solid #3dbb76;border-radius:6px;padding:10px 4px;text-align:center;font-size:12px;font-weight:700;color:#1a4a2a;line-height:1.4}
.cta-agent .fb.hl{background:#3dbb76;color:#fff}
.cta-agent .fa{color:#3dbb76;font-size:15px;text-align:center;font-weight:900}
/* ▼ STEP03 ビフォーアフター：行ごとに 相談前→相談後 の3セット */
.cta-agent .ba2{display:flex;flex-direction:column;gap:8px}
.cta-agent .ba2-head{display:grid;grid-template-columns:1fr 34px 1fr;gap:8px}
.cta-agent .ba2-head .ba-h{font-size:11px;font-weight:700;color:#999;letter-spacing:.1em;text-align:center}
.cta-agent .ba2-row{display:grid;grid-template-columns:1fr 34px 1fr;gap:8px;align-items:center}
.cta-agent .ba2-before{font-size:14px;font-weight:700;padding:9px 12px;border-radius:5px;background:#f0f0f0;color:#aaa;text-align:center}
.cta-agent .ba2-after{font-size:14px;font-weight:700;padding:9px 12px;border-radius:5px;background:#edf8f2;color:#1a5a30;text-align:center}
.cta-agent .ba2-arr{display:flex;align-items:center;justify-content:center;font-size:20px;color:#3dbb76;font-weight:900}
.cta-agent .final{background:#3dbb76;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:16px 40px;gap:0}
.cta-agent .final-h{font-size:30px;font-weight:900;color:#fff;line-height:1.3;margin-bottom:5px}
.cta-agent .final-sub{font-size:15px;color:rgba(255,255,255,.85);line-height:1.6;margin-bottom:10px}
.cta-agent .final-adv-wrap{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.cta-agent .final-adv-left{display:flex;flex-direction:column;align-items:center;gap:4px}
.cta-agent .final-adv-icon{width:62px;height:62px;border-radius:50%;overflow:hidden;border:2px solid rgba(255,255,255,.8);flex-shrink:0}
.cta-agent .final-adv-icon img{width:100%;height:100%;object-fit:cover;object-position:center 5%;transform:scale(1.35);transform-origin:center 15%}
.cta-agent .final-adv-name{font-size:12px;color:rgba(255,255,255,.85) !important;font-weight:700;white-space:nowrap}
.cta-agent .final-adv-bubble{font-size:16px;font-weight:900;color:#fff !important;line-height:1.3;text-align:left;margin-top:-25px;margin-left:-15px}
.cta-agent .final-adv-bubble .cta-bm{padding-left:0.8em;color:#fff !important;font-size:16px;font-weight:900}
.cta-agent .final-pts{display:flex;gap:10px;margin-bottom:10px}
.cta-agent .fpt{background:rgba(255,255,255,.15);border-radius:6px;padding:8px 16px;font-size:13px;font-weight:700;color:#fff}
.cta-agent .final-btn-tel{display:block;width:100%;max-width:340px;background:#ffe135;color:#1a5a30;font-size:18px;font-weight:900;padding:13px 0;border-radius:10px;text-align:center;text-decoration:none;margin-bottom:8px}
.cta-agent .final-btn-cal{display:block;width:100%;max-width:340px;background:rgba(255,255,255,.15);border:2px solid rgba(255,255,255,.6);color:#fff;font-size:15px;font-weight:700;padding:11px 0;border-radius:10px;text-align:center;text-decoration:none}
.cta-agent .nav{background:#fff;display:flex;align-items:center;justify-content:space-between;padding:9px 16px;border-top:1px solid #e0ece4}
.cta-agent .dots{display:flex;gap:6px}
.cta-agent .dot{width:7px;height:7px;border-radius:50%;background:#c0d8c8;cursor:pointer;transition:.25s}
.cta-agent .dot.on{width:20px;border-radius:3px;background:#3dbb76}
.cta-agent .nb{border:1.5px solid #c0d8c8;background:#fff;color:#555;padding:7px 16px;border-radius:7px;font-size:14px;font-weight:700;cursor:pointer}
.cta-agent .nb.p{background:#3dbb76;color:#fff;border-color:#3dbb76}
.cta-agent .nb:disabled{opacity:.3;cursor:default}
@media(max-width:599px){
  .cta-agent .hero-top{padding:18px 16px 14px;gap:7px}
  .cta-agent .hero-h,.cta-agent .hero-h2{font-size:32px}
  .cta-agent .hero-eyebrow{font-size:12px}
  .cta-agent .hero-tagline{font-size:13px}
  .cta-agent .hero-bottom{flex-direction:column;align-items:flex-start;padding:10px 16px;gap:8px}
  .cta-agent .hero-btn{width:100%;text-align:center}
  .cta-agent .advisor{margin-top:6px}
  .cta-agent .advisor-icon,.cta-agent .final-adv-icon{width:48px;height:48px}
  .cta-agent .advisor-name{font-size:12px}
  .cta-agent .step{grid-template-columns:56px 1fr}
  .cta-agent .step-num{font-size:26px}
  .cta-agent .step-right{padding:16px 14px;gap:8px}
  .cta-agent .step-h{font-size:16px}
  .cta-agent .step-body{font-size:13px}
  .cta-agent .frow{grid-template-columns:1fr 10px 1fr 10px 1fr 10px 1fr}
  .cta-agent .fb{padding:8px 2px;font-size:10px}
  .cta-agent .ba2-row,.cta-agent .ba2-head{grid-template-columns:1fr 24px 1fr;gap:6px}
  .cta-agent .ba2-before,.cta-agent .ba2-after{font-size:11px;padding:7px 6px}
  .cta-agent .ba2-arr{font-size:15px}
  .cta-agent .final{padding:18px 16px}
  .cta-agent .final-h{font-size:22px}
  .cta-agent .final-sub{font-size:13px}
  .cta-agent .final-adv-bubble,.cta-agent .final-adv-bubble .cta-bm{font-size:14px}
  .cta-agent .final-pts{flex-wrap:wrap;justify-content:center}
  .cta-agent .final-btn-tel{font-size:16px;max-width:100%}
  .cta-agent .final-btn-cal{font-size:14px;max-width:100%}
}

/* MEDIA-598: 営業時間外の通知（電話ボタンの代わりに表示。JSで出し分け） */
.cta-agent .final-notice{display:none;width:100%;max-width:340px;margin:0 auto 8px;background:rgba(255,255,255,.15);border:2px solid rgba(255,255,255,.6);color:#fff;font-size:14px;font-weight:700;padding:11px 12px;border-radius:10px;text-align:center;line-height:1.5}
/* 記事本文の * { color:#444 } が時刻spanを上書きするのを防ぎ、白文字に統一 */
.cta-agent .final-notice,.cta-agent .final-notice *{color:#fff}
.cta-agent.is-out-hours .final-btn-tel{display:none}
.cta-agent.is-out-hours .final-notice{display:block}
/* 受付時間外：TimeRex予約ボタンを黄色プライマリUI（添付画像準拠＝黄色塗り+緑枠）に昇格 */
.cta-agent.is-out-hours .final-btn-cal{background:#ffe135;border:3px solid #3dbb76;color:#1a5a30;font-size:18px;font-weight:900;padding:13px 0}
@media(max-width:599px){.cta-agent.is-out-hours .final-btn-cal{font-size:16px}}