:root { --navy:#061b85; --blue:#087bc8; --cyan:#00a9dd; --pale:#daf3ff; --orange:#ff6840; --ink:#002b67; }
* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; font-family:"Noto Sans JP",sans-serif; color:var(--ink); background:#eef7fb; }
button, input, select { font:inherit; }
.page-shell { width:min(100%, 800px); min-height:100vh; margin:auto; background:#fff; box-shadow:0 0 28px rgba(0,40,90,.12); }
.brand { height:92px; display:flex; align-items:center; justify-content:center; position:relative; gap:7px; color:#050505; }
.brand-mark { width:31px; height:31px; background:var(--navy); transform:skew(-10deg); position:relative; }
.brand-mark::after { content:""; position:absolute; right:-6px; top:2px; width:13px; height:19px; background:#ef202f; border:5px solid #fff; }
.brand-mark i { position:absolute; left:10px; bottom:4px; width:18px; height:5px; background:#00a4d9; }
.brand-name { font-size:31px; font-weight:900; letter-spacing:-.08em; }
.brand-name.long { font-size:25px; letter-spacing:-.07em; }
.brand small { position:absolute; top:66px; font-size:7px; letter-spacing:.08em; color:#555; }
.hero { height:400px; position:relative; overflow:hidden; }
.hero>img { width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.hero-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(255,255,255,.35),transparent 58%); }
.hero-copy { position:absolute; left:0; top:145px; font-weight:800; }
.hero-copy p { display:inline-block; margin:0 0 14px; padding:11px 24px; background:var(--orange); color:#fff; font-size:24px; clip-path:polygon(0 0,94% 0,100% 100%,0 100%); }
.hero-copy p small { font-size:15px; }
.hero-copy h1 { margin:0; padding:12px 34px 14px 20px; width:max-content; max-width:580px; background:rgba(255,255,255,.92); color:#0063bb; font-size:35px; line-height:1.35; clip-path:polygon(0 0,94% 0,100% 100%,0 100%); }
.form-area { min-height:515px; background:var(--pale); }
.progress-row { height:94px; display:flex; align-items:center; background:linear-gradient(100deg,var(--navy),var(--blue) 62%,var(--cyan)); color:#fff; padding:0 36px; }
.progress-row>b { font-size:22px; letter-spacing:.08em; }
.chevron { width:34px; height:55px; margin:0 48px 0 26px; border-right:1px solid rgba(255,255,255,.35); transform:skew(-25deg); }
#progress { display:flex; align-items:center; gap:0; list-style:none; margin:0; padding:0; flex:1; }
#progress li { width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.38); color:#fff; font-weight:800; font-size:22px; position:relative; }
#progress li+li { margin-left:42px; }
#progress li+li::before { content:""; width:42px; height:5px; position:absolute; right:44px; background:rgba(255,255,255,.4); }
#progress li.active { background:#fff; color:var(--navy); }
#progress li.done { background:#6ec7ee; }
.step-panel { padding:35px 32px 28px; animation:fade .2s ease-out; }
@keyframes fade { from{opacity:.4; transform:translateY(4px)} }
.question { width:100%; margin:0 auto 28px; padding:17px 22px; border-radius:36px; background:#bfe7f9; text-align:center; font-weight:800; font-size:25px; position:relative; }
.question::after { content:""; position:absolute; bottom:-12px; left:58%; border:13px solid transparent; border-top-color:#bfe7f9; border-bottom:0; }
.options { display:grid; grid-template-columns:1fr 1fr; gap:16px 25px; }
.option { min-height:75px; border:2px solid transparent; border-radius:10px; background:#fff; color:var(--ink); display:flex; align-items:center; padding:12px 24px; cursor:pointer; font-size:19px; font-weight:600; text-align:left; transition:.16s; }
.option:hover { border-color:#66c6ee; }
.option.selected { border-color:#087bc8; background:#f6fcff; box-shadow:0 0 0 2px rgba(8,123,200,.1); }
.radio { flex:0 0 auto; width:27px; height:27px; border:2px solid #222; border-radius:50%; margin-right:17px; position:relative; }
.selected .radio::after { content:""; position:absolute; inset:5px; border-radius:50%; background:#087bc8; }
.actions { display:flex; gap:14px; margin-top:25px; }
.next, .back { min-height:76px; border:0; border-radius:10px; font-weight:800; font-size:23px; cursor:pointer; }
.next { flex:1; color:#fff; background:linear-gradient(90deg,#086ed2,#00b5df); box-shadow:0 5px 12px rgba(0,105,190,.22); }
.next:disabled { cursor:not-allowed; background:#b8cce9; box-shadow:none; }
.back { width:115px; background:#fff; color:#506b87; border:1px solid #bdd0df; }
.fields { display:grid; gap:14px; }
.field label { display:block; margin:0 0 7px 4px; font-weight:700; }
.field input { width:100%; height:61px; border:1px solid #aac8dc; border-radius:9px; background:#fff; padding:0 16px; font-size:18px; outline:none; }
.field input:focus { border-color:#087bc8; box-shadow:0 0 0 3px rgba(8,123,200,.12); }
.privacy { margin:13px 0 0; font-size:12px; text-align:center; color:#52697a; }
.complete { text-align:center; padding:50px 20px; }
.complete-icon { width:68px; height:68px; margin:auto; border-radius:50%; display:grid; place-items:center; background:#00a9dd; color:#fff; font-size:38px; font-weight:900; }
.complete h2 { font-size:27px; margin:18px 0 8px; }
.switcher { position:fixed; right:18px; bottom:18px; padding:10px 12px; border-radius:12px; background:rgba(255,255,255,.95); box-shadow:0 5px 25px rgba(0,30,80,.2); z-index:10; }
.switcher label { display:block; font-size:11px; margin-bottom:4px; color:#52697a; }
.switcher select { max-width:190px; border:1px solid #9db8ca; border-radius:6px; padding:7px; background:#fff; }
@media(max-width:600px){
  .page-shell{width:100%; box-shadow:none}.brand{height:59px}.brand-mark{width:20px;height:23px}.brand-name{font-size:21px}.brand-name.long{font-size:16px;letter-spacing:-.08em}.brand small{top:40px;font-size:5px}
  .hero{height:201px}.hero-copy{top:75px}.hero-copy p{font-size:17px;padding:8px 14px;margin-bottom:8px}.hero-copy p small{font-size:11px}.hero-copy h1{font-size:20px;padding:7px 26px 9px 10px;max-width:330px}
  .form-area{min-height:584px}.progress-row{height:61px;padding:0 18px}.progress-row>b{font-size:15px}.chevron{width:23px;height:38px;margin:0 38px 0 20px}#progress li{width:25px;height:25px;font-size:14px}#progress li+li{margin-left:19px}#progress li+li::before{width:19px;height:3px;right:25px}
  .step-panel{padding:15px 16px 28px}.question{font-size:18px;padding:16px 10px;margin-bottom:24px}.options{gap:15px 16px}.option{min-height:53px;padding:8px 15px;font-size:14px}.radio{width:20px;height:20px;margin-right:11px}.selected .radio::after{inset:4px}.actions{margin-top:18px}.next,.back{min-height:65px;font-size:20px}.back{width:82px}.field input{height:55px;font-size:16px}.switcher{right:8px;bottom:8px;padding:7px}.switcher select{max-width:145px;font-size:12px}
}