:root {
  color-scheme: light;
  font-family: "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
  color: #16364a;
  background: #e9faff;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  --blue: #38afd0;
  --deep-blue: #147d9f;
}
* { box-sizing: border-box; }
body { min-width: 320px; min-height: 100vh; margin: 0; background: radial-gradient(ellipse at 12% 7%, rgba(255,255,255,.95) 0, rgba(255,255,255,0) 35%), radial-gradient(ellipse at 90% 95%, rgba(163,232,247,.48) 0, rgba(163,232,247,0) 32%), linear-gradient(145deg, #e9faff 0%, #d9f4fb 52%, #effcff 100%); }
.page-shell { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 44px 20px 24px; }
.survey-card { width: min(100%, 640px); padding: clamp(28px, 6vw, 56px) clamp(22px, 7vw, 66px) 36px; border: 1px solid rgba(255,255,255,.92); border-radius: 28px; background: rgba(255,255,255,.88); box-shadow: 0 22px 70px rgba(59,151,177,.14), 0 3px 12px rgba(27,102,128,.05); backdrop-filter: blur(12px); }
.brand-mark { display: flex; justify-content: center; gap: 7px; margin-bottom: 21px; color: #85d9eb; font-size: 10px; }
.brand-mark span:nth-child(2) { color: #48bad5; }
.brand-mark span:nth-child(3) { color: #b5eaf4; }
.eyebrow { margin: 0 0 15px; color: #368ba6; text-align: center; font-size: 12px; font-weight: 700; letter-spacing: .16em; }
h1 { margin: 0; color: #173b50; text-align: center; font-size: clamp(21px,4.5vw,27px); font-weight: 600; line-height: 1.85; letter-spacing: .025em; }
.divider { width: 42px; height: 3px; margin: 25px auto 23px; border-radius: 9px; background: linear-gradient(90deg,#82d9e9,#36accb); }
.instruction { margin: 0 0 20px; color: #446779; text-align: center; font-size: clamp(16px,3.8vw,18px); font-weight: 500; line-height: 1.8; }
.choices { display: grid; gap: 13px; margin: 0; padding: 0; border: 0; }
.choice { position: relative; display: flex; min-height: 68px; align-items: center; gap: 15px; padding: 14px 18px; border: 1.5px solid #d5edf3; border-radius: 15px; background: #f8fdff; cursor: pointer; transition: border-color .18s ease,background .18s ease,box-shadow .18s ease,transform .18s ease; }
.choice:hover { border-color: #84d5e7; background: #f1fbfe; transform: translateY(-1px); }
.choice:has(input:checked) { border-color: #47b8d3; background: #ecfaff; box-shadow: 0 0 0 3px rgba(71,184,211,.13); }
.choice input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.choice input:focus-visible + .radio-mark { outline: 3px solid rgba(20,125,159,.35); outline-offset: 3px; }
.radio-mark { display: grid; width: 23px; height: 23px; flex: 0 0 23px; place-items: center; border: 2px solid #a9d5e0; border-radius: 50%; background: #fff; }
.radio-mark::after { width: 11px; height: 11px; border-radius: 50%; background: var(--blue); content: ""; opacity: 0; transform: scale(.6); transition: .18s ease; }
.choice input:checked + .radio-mark { border-color: var(--blue); }
.choice input:checked + .radio-mark::after { opacity: 1; transform: scale(1); }
.choice-text { color: #24485a; font-size: clamp(16px,4vw,18px); font-weight: 500; line-height: 1.6; }
.form-message { min-height: 25px; margin: 9px 0 3px; color: #b34848; text-align: center; font-size: 14px; }
.form-message.success { color: #25839d; }
.vote-button { display: flex; width: 100%; min-height: 60px; align-items: center; justify-content: center; gap: 13px; border: 0; border-radius: 15px; background: linear-gradient(105deg,#43b8d4,#299fc0); box-shadow: 0 8px 18px rgba(42,162,192,.23); color: #fff; cursor: pointer; font: inherit; font-size: 18px; font-weight: 700; letter-spacing: .08em; transition: filter .18s ease,transform .18s ease; }
.vote-button:hover { filter: brightness(1.04); transform: translateY(-1px); }
.vote-button:focus-visible { outline: 3px solid rgba(20,125,159,.35); outline-offset: 4px; }
.vote-button:disabled { cursor: wait; filter: saturate(.7); opacity: .75; }
.button-arrow { font-size: 20px; font-weight: 400; }
.privacy-note { margin: 22px 0 0; color: #7897a4; text-align: center; font-size: 12px; line-height: 1.7; }
.privacy-note span { padding-right: 5px; color: #62c3d9; }
footer { padding-top: 24px; color: #78a1af; font-size: 12px; letter-spacing: .08em; }
@media (max-width:480px) { .page-shell { justify-content: flex-start; padding: 30px 15px 20px; } .survey-card { padding: 29px 21px 27px; border-radius: 23px; } h1 { line-height: 1.75; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior: auto !important; transition-duration: .01ms !important; } }