/* 採用市場診断 saiyo.css v0.2 — 自己完結（商圏ティールと差別化＝インディゴ系） */
:root{
  --sy-primary:#103070; --sy-deep:#0B2350; --sy-accent:#3050A0;
  --sy-ink:#1A2233; --sy-body:#374050; --sy-sub:#5F6B7A;
  --sy-bg:#F5F7FC; --sy-card:#fff; --sy-tint:#EAF0FB; --sy-line:#E1E7F2;
  --sy-hot:#C0392B; --sy-warm:#B8862C; --sy-mid:#103070; --sy-cool:#1F7A52; --sy-cold:#0F7A52;
}
*{box-sizing:border-box}
.sy-root{font-family:"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;color:var(--sy-body);line-height:1.8;background:var(--sy-bg)}
.sy-root strong{color:var(--sy-ink)}

/* hero */
.sy-hero{background:linear-gradient(135deg,#0B2350,#103070);color:#fff;padding:44px 18px 50px}
.sy-hero-inner{max-width:760px;margin:0 auto;text-align:center}
.sy-eyebrow{font-size:14px;opacity:.85}
.sy-title{font-size:30px;font-weight:600;margin:10px 0 12px;line-height:1.35}
.sy-sub{font-size:16px;line-height:1.85;opacity:.96}
.sy-sub strong{color:#fff;background:rgba(255,255,255,.16);padding:1px 6px;border-radius:4px}

/* form */
.sy-form-section{max-width:760px;margin:-26px auto 0;padding:0 16px 8px}
.sy-form-card{background:var(--sy-card);border:1px solid var(--sy-line);border-radius:16px;padding:22px 22px 18px;box-shadow:0 6px 22px rgba(42,63,110,.08)}
.sy-form-h2{font-size:20px;font-weight:600;color:var(--sy-ink);margin:0 0 4px}
.sy-form-lead{font-size:16px;color:var(--sy-sub);margin:0 0 16px}
.sy-form-row{display:flex;gap:14px;flex-wrap:wrap}
.sy-form-group{flex:1;min-width:200px;margin-bottom:12px}
.sy-label{display:block;font-size:16px;color:var(--sy-ink);font-weight:500;margin-bottom:6px}
.sy-req{color:#C0392B;font-size:14px;margin-left:6px;font-weight:600}
.sy-control{width:100%;height:44px;border:1px solid var(--sy-line);border-radius:10px;background:#fff;padding:0 12px;font-size:16px;color:var(--sy-ink)}
.sy-control:focus{outline:none;border-color:var(--sy-primary);box-shadow:0 0 0 3px rgba(62,92,158,.18)}
.sy-form-actions{display:flex;gap:10px;align-items:center;margin-top:4px}
.sy-submit{flex:1;background:var(--sy-primary);color:#fff;border:none;border-radius:10px;height:48px;font-size:16px;font-weight:600;cursor:pointer}
.sy-submit:hover{background:var(--sy-deep)}
.sy-submit:disabled{opacity:.6;cursor:default}
.sy-reset{background:#fff;border:1px solid var(--sy-line);border-radius:10px;height:48px;padding:0 16px;color:var(--sy-sub);font-size:16px;cursor:pointer}
.sy-form-foot{font-size:14px;color:var(--sy-sub);margin:12px 0 0}

/* results */
.sy-results{max-width:760px;margin:18px auto 0;padding:0 16px}
.sy-headline{font-size:18px;color:var(--sy-ink);margin:6px 2px 12px}
.sy-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.sy-metric{background:var(--sy-card);border:1px solid var(--sy-line);border-radius:12px;padding:13px 14px}
.sy-m-l{font-size:14px;color:var(--sy-sub)}
.sy-m-v{font-size:20px;font-weight:600;color:var(--sy-ink);margin:3px 0 2px}
.sy-m-s{font-size:14px;color:var(--sy-sub)}

.sy-verdict{display:flex;gap:16px;align-items:center;background:var(--sy-card);border:1px solid var(--sy-line);border-left:5px solid var(--sy-mid);border-radius:12px;padding:16px 18px;margin-top:14px}
.sy-verdict.tone-hot{border-left-color:var(--sy-hot)}
.sy-verdict.tone-warm{border-left-color:var(--sy-warm)}
.sy-verdict.tone-mid{border-left-color:var(--sy-mid)}
.sy-verdict.tone-cool,.sy-verdict.tone-cold{border-left-color:var(--sy-cool)}
.sy-score{flex:none;text-align:center;font-size:20px;font-weight:600;color:var(--sy-primary);line-height:1.05;min-width:84px}
.sy-score span{display:block;font-size:14px;color:var(--sy-sub);font-weight:400;margin-top:2px}
.sy-vlabel{font-size:18px;font-weight:600;color:var(--sy-ink)}
.sy-vsub{font-size:16px;color:var(--sy-sub);margin-top:4px}
.sy-minwage{display:inline-block;margin-top:6px;font-size:14px;color:var(--sy-deep);background:#FFF4E0;border-radius:6px;padding:3px 9px}

.sy-exits-block{margin-top:16px}
.sy-exits-h{font-size:18px;font-weight:600;color:var(--sy-ink);margin:0 2px 8px}
.sy-exits{display:grid;gap:10px}
.sy-exit{display:flex;align-items:center;gap:12px;background:var(--sy-card);border:1px solid var(--sy-line);border-radius:12px;padding:13px 15px;text-decoration:none}
.sy-exit:hover{border-color:var(--sy-accent);background:var(--sy-tint)}
.sy-exit-ic{font-size:22px}
.sy-exit-b{flex:1;display:flex;flex-direction:column}
.sy-exit-b strong{font-size:18px;color:var(--sy-ink);font-weight:600}
.sy-exit-b small{font-size:14px;color:var(--sy-sub)}
.sy-exit-ar{color:var(--sy-primary);font-weight:600}

.sy-note-band{background:var(--sy-tint);border-radius:12px;padding:14px 16px;margin-top:16px}
.sy-note-band strong{font-size:18px;color:var(--sy-ink)}
.sy-note-band p{font-size:16px;color:var(--sy-body);margin:6px 0 0}
.sy-disclaimer{font-size:14px !important;color:var(--sy-sub) !important;border-top:1px solid var(--sy-line);padding-top:8px;margin-top:8px !important}
.sy-report-cta{margin-top:16px;text-align:center}
.sy-rpt-btn{background:var(--sy-primary);color:#fff;border:none;border-radius:10px;padding:13px 22px;font-size:16px;font-weight:600;cursor:pointer}
.sy-rpt-btn:hover{background:var(--sy-deep)}
.sy-report-hint{font-size:14px;color:var(--sy-sub);margin-top:7px}
.sy-cfid{margin-top:16px;background:var(--sy-tint);border-radius:12px;padding:16px 18px;text-align:center}
.sy-cfid-h{font-size:18px;font-weight:600;color:var(--sy-ink)}
.sy-cfid-lead{font-size:16px;color:var(--sy-body);margin:6px 0 12px}
.sy-cfid-btn{display:inline-block;background:#fff;border:1px solid var(--sy-primary);color:var(--sy-primary);border-radius:10px;padding:9px 18px;font-size:16px;font-weight:600;text-decoration:none}
.sy-cfid-btn.sy-cfid-soon{background:#eef1f5;border-color:var(--sy-line);color:var(--sy-sub);cursor:default;font-weight:600}/* CF-ID点火まで＝準備中(非CTA)。点火時にこのクラスを外して本文/▸を戻す */
.sy-results-back{margin:14px 2px;font-size:16px}
.sy-results-back a{color:var(--sy-primary);text-decoration:none}
.sy-rpt-overlay{position:fixed;inset:0;background:rgba(20,30,55,.55);z-index:1000;display:flex;flex-direction:column}
.sy-rpt-overlay[hidden]{display:none}/* hidden属性を効かせる：display:flexがUAの[hidden]を上書きしロード時に空overlayが画面を覆っていた是正。閉じるも有効化 */
.sy-rpt-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fff;padding:10px 16px;border-bottom:1px solid var(--sy-line)}
.sy-rpt-title{font-size:18px;font-weight:600;color:var(--sy-ink)}
.sy-rpt-act{border:1px solid var(--sy-line);background:#fff;color:var(--sy-body);border-radius:8px;padding:8px 14px;font-size:16px;cursor:pointer;margin-left:8px}
.sy-rpt-act.pri{background:var(--sy-primary);border-color:var(--sy-primary);color:#fff}
.sy-rpt-frame{flex:1;width:100%;border:none;background:#9aa3a0}

/* info section */
.sy-section{padding:34px 16px}
.sy-section-alt{background:#fff;border-top:1px solid var(--sy-line)}
.sy-section-inner{max-width:760px;margin:0 auto}
.sy-h2{font-size:20px;font-weight:600;color:var(--sy-ink);text-align:center;margin:0 0 20px}
.sy-feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.sy-feat{text-align:center}
.sy-feat-ic{font-size:26px}
.sy-feat h3{font-size:18px;color:var(--sy-ink);margin:8px 0 5px}
.sy-feat p{font-size:16px;color:var(--sy-sub);margin:0}

@media(max-width:620px){
  .sy-metrics,.sy-feat-grid{grid-template-columns:1fr}
  .sy-title{font-size:25px}
  .sy-verdict{flex-direction:column;align-items:flex-start;gap:10px}
}