:root{--brand:#0b6cff;--muted:#f3f4f6;--ink:#111827}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;color:var(--ink);background:#eaf6ff;background-image:url('images/background.jpg');background-size:cover;background-position:center;background-attachment:fixed}

/* scope */
.diagnoser .wrap{max-width:900px;margin:48px auto;padding:0 16px}
.diagnoser h1{font-size:26px;font-weight:700;text-align:center;margin:24px 0 8px}
.diagnoser .subtitle{font-size:18px;text-align:center;color:#334155;margin:0 0 12px}
.diagnoser .card{background:transparent;border:0;border-radius:0;padding:20px;position:relative;min-height:420px;box-shadow:none}
.diagnoser .actions{display:flex;gap:12px;margin-top:24px;justify-content:center}
.diagnoser button{cursor:pointer;border:0;border-radius:999px;padding:14px 28px;background:#0b6cff;color:#fff;font-weight:700;box-shadow:0 6px 16px rgba(11,108,255,.2);transition:transform .12s ease, box-shadow .12s ease, filter .12s ease}
.diagnoser button.ghost{background:#eef2ff;color:#1e40af}
.diagnoser button[disabled]{opacity:.5;cursor:not-allowed}
.diagnoser button:hover{filter:brightness(.95);transform:translateY(1px);box-shadow:0 4px 12px rgba(11,108,255,.2)}
.diagnoser button:active{transform:translateY(2px);box-shadow:0 2px 8px rgba(11,108,255,.25)}
.diagnoser .q{margin:8px 0 12px}
.diagnoser .q legend{font-weight:600;margin-bottom:8px}
/* question heading (legend) size and center */
.diagnoser legend.q{font-size:40px;line-height:1.3;font-weight:800;text-align:center;margin:18px 0 16px}
.diagnoser .intro-text{max-width:720px;margin:0 auto 8px;font-size:1.1rem;line-height:1.9;text-align:center;color:#334155;background:transparent}
.diagnoser .intro-visual{display:flex;justify-content:center;margin:8px 0 16px}
.diagnoser .intro-visual img{max-width:450px;width:100%;height:auto;border-radius:16px;box-shadow:0 8px 22px rgba(0,0,0,.08)}
.diagnoser .opt{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:18px auto;padding:28px 28px;border:0;border-radius:16px;background:#fff;box-shadow:0 6px 18px rgba(0,0,0,.06);flex-direction:row-reverse;max-width:720px;font-size:1.125rem;line-height:1.6;transition:transform .12s ease, box-shadow .12s ease}
.diagnoser .opt:active{transform:translateY(2px);box-shadow:0 2px 8px rgba(0,0,0,.08)}
/* 選択済みの視認性を上げる（枠線は使わず発光） */
.diagnoser .opt:has(input[type="radio"]:checked){box-shadow:0 0 0 4px rgba(11,108,255,.12), 0 10px 22px rgba(11,108,255,.16)}
.diagnoser .opt:hover{border-color:#93c5fd}
.diagnoser .opt input[type="radio"]{appearance:none;width:26px;height:26px;border:2px solid #94a3b8;border-radius:50%;display:inline-block;position:relative;background:#fff;flex:0 0 auto}
.diagnoser .opt input[type="radio"]:checked{border-color:#0b6cff}
.diagnoser .opt input[type="radio"]:checked::after{content:"";position:absolute;inset:4px;background:#0b6cff;border-radius:50%}
.diagnoser .pill{display:inline-block;padding:4px 10px;border-radius:999px;background:#e6f4ff;color:#075985;font-size:.85rem}
.diagnoser .result h2{margin:12px 0 8px}
.diagnoser .note{font-size:.9rem;color:#4b5563;text-align:right;margin-top:36px}
.diagnoser .only-text{white-space:pre-wrap;line-height:1.7}
.diagnoser .hidden{display:none!important}
.diagnoser .progress{height:8px;background:#dbeafe;border-radius:999px;overflow:hidden;margin:12px 0 24px}
.diagnoser .bar{height:100%;width:0;background:linear-gradient(90deg,#0b6cff,#45a3ff);transition:width .25s ease}

/* step transition: use opacity+transform instead of display switching */
.diagnoser .step{position:absolute;inset:0;opacity:0;transform:translateY(8px);transition:opacity .25s ease,transform .25s ease;pointer-events:none;display:block}
.diagnoser .step.active{opacity:1;transform:translateY(0);pointer-events:auto}

/* result CTA */
.diagnoser .cta-block{margin:20px 0 8px;text-align:center}
.diagnoser .cta-block .cta-sub{color:#cb0000;margin:0 0 14px;font-size: 14px;font-weight: bold;}
.diagnoser .btn.cta{display:inline-block;background:#ff8a3d;color:#fff;padding:16px 28px;border-radius:14px;font-weight:700;text-decoration:none;box-shadow:0 10px 24px rgba(255,138,61,.25);transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;font-size: 20px}
.diagnoser .btn.cta:hover{filter:brightness(1.06);transform:translateY(1px);box-shadow:0 8px 18px rgba(255,138,61,.25)}
.diagnoser .btn.cta:active{transform:translateY(2px);box-shadow:0 6px 12px rgba(255,138,61,.3)}

/* remove default fieldset border */
.diagnoser fieldset{border:0;margin:0;padding:0}

/* restart link */
.diagnoser .restart-link{color:#0b6cff;text-decoration:underline;font-weight:700}
.diagnoser .restart-link:hover{filter:brightness(.9)}

@media (prefers-reduced-motion: reduce){
  .diagnoser .step{transition:none;transform:none}
  .diagnoser .bar{transition:none}
}

/* pill variations */
.diagnoser .pill--E{background:#e7f0ff;color:#0b4bff}
.diagnoser .pill--B{background:#e9fbef;color:#0d8b47}
.diagnoser .pill--M{background:#fff5e6;color:#b45309}

/* result layout (desktop first) */
.diagnoser .result-grid{display:flex;align-items:stretch;gap:24px;margin:12px 0 8px}
.diagnoser .result-box{background:#fff;border-radius:16px;padding:20px;box-shadow:0 8px 24px rgba(0,0,0,.08);min-width:0;flex:1 1 60%}
.diagnoser .result-visual{flex:1 1 40%;display:flex;align-items:center;justify-content:center}
.diagnoser .result-visual img{max-width:100%;height:auto;border-radius:12px;display:block}

/* mobile adjustments */
@media (max-width: 640px){
  .diagnoser h1{font-size:20px}
  .diagnoser legend.q{font-size:26px}
  .diagnoser .opt{padding:18px 20px}
  .diagnoser .result-grid{display:flex;flex-direction:column-reverse}
}