:root {
  --bg: #fff9f0;
  --surface: #fffefa;
  --text: #263941;
  --muted: #61737b;
  --blue: #c9e9f6;
  --blue-soft: #eaf7fc;
  --blue-line: #8ccae3;
  --blue-ink: #236d92;
  --peach: #f7d5c5;
  --yellow: #f5dc91;
  --lavender: #dedbf4;
  --line: #e7dfd3;
  --shadow: 0 16px 50px rgba(64, 91, 103, .08);
  font-family: "Hiragino Maru Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", "Yu Gothic", Meiryo, sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; }
body { margin: 0; color: var(--text); background: var(--bg); min-height: 100vh; }
button { font: inherit; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid #f2bb5c; outline-offset: 3px; }
.shell { width: min(100%, 700px); margin: 0 auto; padding: 18px 18px 42px; min-height: 100vh; position: relative; overflow: hidden; }
.shell::before,.shell::after { content:""; position:fixed; border-radius:50%; pointer-events:none; filter:blur(1px); opacity:.52; z-index:-1; }
.shell::before { width:240px;height:240px;background:#e4f5fb;right:-100px;top:-80px; }
.shell::after { width:190px;height:190px;background:#fff0ca;left:-90px;bottom:-80px; }
.brand { display:flex; align-items:center; gap:10px; font-size:17px; line-height:1.2; font-weight:900; letter-spacing:.02em; color:#0d5064; margin-bottom:18px; }
.brand small { font-size:13px; font-weight:800; }
.brand-mark { width:42px;height:42px;display:grid;place-items:center;flex:0 0 auto; }
.brand-mark svg { width:100%;height:100%; }
.screen { animation: rise .35s ease both; }
@keyframes rise { from { opacity:0; transform:translateY(8px) } }
.hero { text-align:center; padding:6px 0 12px; }
.hero-kicker { display:inline-flex; align-items:center; gap:7px; margin:2px 0 8px; padding:10px 17px; border:1px solid #acd8ea; border-radius:999px; background:var(--blue-soft); color:var(--blue-ink); font-size:17px; font-weight:800; letter-spacing:.01em; }
.hero-kicker span { width:25px; height:25px; display:grid; place-items:center; border-radius:50%; background:var(--blue); font-size:16px; }
.hero-start { padding-top:0; }
.hero-badge { display:inline-flex; align-items:baseline; margin:0 0 12px; padding:8px 22px 10px; border-radius:999px 999px 999px 12px; background:linear-gradient(135deg,#ffe987,#ffdc62); color:#0c5267; font-size:20px; line-height:1; font-weight:900; box-shadow:0 7px 18px rgba(226,184,62,.16); }
.hero-badge strong { margin-right:3px; font-size:42px; line-height:.9; }
.hero-title { margin:4px auto 8px; color:#074d62; font-size:clamp(34px,8.2vw,55px); line-height:1.3; font-weight:900; letter-spacing:.01em; }
.hero-title span { position:relative; z-index:0; white-space:nowrap; }
.hero-title span::after { content:""; position:absolute; z-index:-1; left:-3px; right:-3px; bottom:2px; height:12px; border-radius:999px; background:#ffe369; opacity:.9; }
.hero-start .art { width:min(100%,620px); margin:1px auto 8px; }
.hero-lead { color:#174f62; font-size:15px; line-height:1.85; margin-bottom:17px; }
.hero-lead strong { font-size:17px; letter-spacing:.04em; }
.hero-button { min-height:68px; width:min(100%,470px); margin:0 auto; background:linear-gradient(135deg,#bfe8f7,#d9f2fb); border-color:#91cee4; color:#155d7d; font-size:20px; box-shadow:0 11px 26px rgba(66,145,179,.19); }
.hero-button:hover { background:linear-gradient(135deg,#afe1f3,#cdeefa); }
.activity-teasers { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:14px 0 0; }
.activity-teasers span { min-width:105px; padding:9px 16px; border-radius:999px; color:#184f62; font-size:14px; font-weight:800; }
.activity-teasers span:nth-child(1) { background:#dff3fc; }
.activity-teasers span:nth-child(2) { background:#fff0a9; }
.activity-teasers span:nth-child(3) { background:#fde2df; }
.eyebrow { display:inline-flex; align-items:center; gap:7px; padding:7px 13px; border-radius:999px; background:#fff0e8; color:#6d5860; font-size:13px; font-weight:700; }
h1,h2,h3,p { margin-top:0; }
h1 { font-size:clamp(29px,7vw,42px); line-height:1.46; letter-spacing:.01em; margin:24px auto 15px; max-width:620px; }
h2 { font-size:clamp(25px,6.2vw,34px); line-height:1.48; margin-bottom:10px; }
h3 { font-size:20px; line-height:1.45; }
.accent { color:var(--blue-ink); }
.lead { color:var(--muted); line-height:1.85; font-size:15px; }
.art { margin:10px auto 18px; width:min(100%,480px); }
.art svg { display:block; width:100%; height:auto; }
.button { width:100%; border:1px solid var(--blue-line); background:var(--blue); color:#245e7b; font-weight:800; font-size:17px; min-height:60px; border-radius:999px; padding:14px 25px; cursor:pointer; display:flex;align-items:center;justify-content:center;gap:10px; transition:.2s ease; }
.button:hover { background:#b9e1f2; transform:translateY(-1px); box-shadow:0 8px 22px rgba(74,151,188,.13); }
.button.secondary { background:rgba(255,255,255,.72); border-color:#cfc8bf; color:#51636b; }
.button:disabled { opacity:.55; cursor:not-allowed; transform:none; box-shadow:none; }
.note { text-align:center; font-size:12px; color:#738187; margin:12px 0 0; }
.activity-grid { display:grid; grid-template-columns:1fr 1fr; gap:11px; margin:23px 0 26px; }
.activity { border:1px solid var(--line); background:rgba(255,254,250,.9); border-radius:21px; padding:15px 10px; min-height:118px; color:var(--text); cursor:pointer; text-align:center; position:relative; transition:.2s ease; }
.activity:hover { transform:translateY(-2px); border-color:var(--blue-line); box-shadow:var(--shadow); }
.activity.selected { background:var(--blue-soft); border:2px solid var(--blue-line); }
.activity-icon { width:54px;height:54px;margin:0 auto 8px;border-radius:20px;display:grid;place-items:center;font-size:27px;background:#fff5dc; }
.activity:nth-child(3n+2) .activity-icon { background:#eef0ff; }
.activity:nth-child(3n) .activity-icon { background:#fff0e9; }
.activity-label { font-weight:800; line-height:1.35; font-size:14px; }
.question-top { display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:15px; }
.progress-label { color:var(--blue-ink);font-weight:800;white-space:nowrap; }
.progress { height:8px;flex:1;background:#eee8df;border-radius:999px;overflow:hidden; }
.progress span { height:100%;display:block;background:var(--blue-line);border-radius:inherit;transition:width .25s; }
.question-art { display:grid;grid-template-columns:118px 1fr;align-items:center;gap:18px;margin:18px 0 22px; }
.mini-art { width:118px;height:108px;border-radius:34px;background:#fff3d9;display:grid;place-items:center;position:relative;color:#3b738c; }
.mini-art svg { width:84px;height:84px; }
.question-copy p { margin:0;color:var(--muted);font-size:14px;line-height:1.65; }
.choices { display:grid;gap:11px;margin:12px 0 28px; }
.choice { display:flex;align-items:center;gap:13px;width:100%;min-height:62px;border:1px solid var(--line);background:rgba(255,255,255,.78);border-radius:20px;padding:14px 17px;text-align:left;color:var(--text);cursor:pointer;font-weight:700; }
.choice:hover { border-color:var(--blue-line); }
.choice.selected { background:var(--blue-soft);border:2px solid var(--blue-line); }
.radio { width:26px;height:26px;border:2px solid #bbb6ae;border-radius:50%;flex:0 0 auto;display:grid;place-items:center; }
.selected .radio { border-color:#5ba8ca; }
.selected .radio::after { content:"";width:13px;height:13px;border-radius:50%;background:#5ba8ca; }
.wish-copy small { display:block;color:var(--muted);font-weight:500;margin-top:4px;line-height:1.5; }
.nav { display:grid;grid-template-columns:1fr 1.3fr;gap:12px; }
.result-head { text-align:center;padding:4px 0 12px; }
.result-visual { width:220px;margin:12px auto 15px; }
.card { background:rgba(255,254,250,.94);border:1px solid var(--line);border-radius:26px;padding:22px 20px;margin:15px 0;box-shadow:0 10px 35px rgba(67,87,97,.05); }
.card h3 { color:#326f8d;display:flex;align-items:center;gap:9px;margin-bottom:15px; }
.benefits { list-style:none;padding:0;margin:0;display:grid;gap:13px; }
.benefits li { display:flex;gap:11px;line-height:1.65; }
.benefits li::before { content:"✓";width:27px;height:27px;border-radius:50%;background:#fff2c8;color:#826c30;display:grid;place-items:center;flex:0 0 auto;font-weight:900; }
.first-step { background:linear-gradient(135deg,#f2faff,#fff9e9);border-color:#cee7f1; }
.consult { background:#f6edff;border-color:#ded8ee; }
.consult.quiet { background:#f5f2ed; }
.status { text-align:center;color:#765e56;font-size:13px;margin:10px 0 0; }
.message { white-space:pre-line;background:#fff;border:1px solid var(--line);border-radius:16px;padding:15px;line-height:1.7;font-size:14px;user-select:text; }
details { border-top:1px solid var(--line);padding-top:15px;margin-top:18px; }
summary { cursor:pointer;font-weight:800;color:#465d67; }
.answer-list { display:grid;gap:8px;margin:14px 0 0;padding:0;list-style:none;color:var(--muted);font-size:14px; }
.footer-actions { display:grid;gap:10px;margin-top:25px; }
.disclaimer { text-align:center;color:#758187;font-size:12px;line-height:1.7;margin:18px 0; }
.toast { position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:#273f49;color:#fff;padding:12px 18px;border-radius:999px;font-weight:700;box-shadow:var(--shadow);z-index:10; }
@media (min-width:600px) { .shell{padding:26px 32px 60px}.activity-grid{grid-template-columns:repeat(3,1fr)}.activity:last-child{grid-column:2}.card{padding:27px 28px} }
@media (max-width:480px) { .brand{font-size:15px}.brand small{font-size:11px}.brand-mark{width:36px;height:36px}.hero-badge{font-size:16px;padding:7px 17px 9px}.hero-badge strong{font-size:34px}.hero-title{font-size:clamp(30px,9vw,42px)}.hero-title span::after{height:9px}.hero-lead{font-size:13px}.hero-lead strong{font-size:15px}.hero-button{font-size:18px;min-height:62px}.activity-teasers span{min-width:88px;padding:8px 12px;font-size:13px} }
@media (max-width:360px) { .shell{padding:14px 13px 35px}h1{font-size:27px}.hero-title{font-size:28px}.activity{min-height:108px}.question-art{grid-template-columns:90px 1fr}.mini-art{width:90px;height:90px}.mini-art svg{width:68px}.nav{grid-template-columns:.9fr 1.2fr}.button{font-size:15px;padding:12px 14px}.activity-teasers{gap:6px}.activity-teasers span{min-width:82px} }
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}