:root { --blue:#2563eb; --blue-dark:#1d4ed8; --text:#222; --muted:#666; --line:#e5e7eb; --bg:#fff; --radius:16px; --shadow:0 3px 12px rgba(34,34,34,.08); }
* { box-sizing:border-box; }
html { background:var(--bg); scroll-behavior:smooth; }
body { margin:0; overflow-x:hidden; color:var(--text); background:var(--bg); font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo,sans-serif; font-size:16px; line-height:1.7; }
button,input,textarea { font:inherit; }
button { cursor:pointer; }
a { color:inherit; text-decoration:none; }
.app-shell { min-height:100svh; display:flex; flex-direction:column; }
.site-header,.site-footer,main { width:min(720px, calc(100% - 48px)); margin-inline:auto; }
.site-header { min-height:72px; display:flex; align-items:center; }.brand { color:var(--text); font-weight:700; font-size:17px; }
main { flex:1; display:flex; align-items:center; }
.screen { display:none; width:100%; padding:24px 0 40px; animation:appear .3s ease-out; }.screen.is-active { display:block; }
.screen:target { display:block; }.screen:has(~ .screen:target), .screen.is-active:has(~ .screen:target) { display:none; }
h1,h2,p { margin-top:0; } h1 { font-size:clamp(28px,8vw,40px); line-height:1.42; letter-spacing:.01em; margin-bottom:14px; } h2 { font-size:20px; line-height:1.5; margin-bottom:16px; }
.eyebrow,.question-number { color:var(--blue); font-weight:700; font-size:16px; margin-bottom:8px; }.lead { color:var(--muted); font-size:18px; margin:0; }.top-content { min-height:calc(100svh - 240px); display:flex; flex-direction:column; justify-content:center; }.description { color:var(--muted); margin-bottom:30px; }
.introduction { padding-bottom:56px; }.introduction-header { margin-bottom:34px; }.introduction-header p { margin:0 0 14px; color:var(--muted); }.introduction-header p:first-of-type { color:var(--text); }.notice-card { padding:24px; margin:18px 0; background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }.notice-card h2 { font-size:19px; }.notice-card p { margin:0 0 14px; color:var(--muted); }.notice-card p:last-child { margin-bottom:0; }.notice-card ul { padding-left:1.3em; margin:0; color:var(--muted); }.notice-card li { margin:0 0 16px; }.notice-card li:last-child { margin-bottom:0; }.start-panel { margin-top:32px; padding:24px; border:1px solid #bfdbfe; border-radius:var(--radius); background:#f8fbff; }.start-panel h2 { margin-bottom:8px; }.start-panel p { margin-bottom:20px; color:var(--muted); }.agreement { display:flex; gap:10px; align-items:flex-start; margin:20px 0; font-weight:700; cursor:pointer; }.agreement input { width:20px; height:20px; margin:3px 0 0; accent-color:var(--blue); }.button:disabled { cursor:not-allowed; background:#9ca3af; border-color:#9ca3af; color:#fff; }.button:disabled:hover { background:#9ca3af; border-color:#9ca3af; }.introduction-back { display:block; margin-top:18px; text-align:center; }
.button { display:inline-flex; align-items:center; justify-content:center; width:100%; min-height:48px; padding:10px 16px; border:1px solid var(--blue); border-radius:12px; background:var(--blue); color:#fff; font-weight:700; text-align:center; transition:background-color .15s; }.button:hover { background:var(--blue-dark); border-color:var(--blue-dark); }.button:focus-visible,.choice:focus-visible,textarea:focus-visible { outline:3px solid rgba(37,99,235,.3); outline-offset:2px; }
.button-secondary { background:#fff; color:var(--blue); }.button-secondary:hover { background:#eff6ff; color:var(--blue-dark); }.button-quiet { margin-top:24px; background:#fff; color:var(--muted); border-color:var(--line); }.button-quiet:hover { background:#f9fafb; color:var(--text); border-color:#d1d5db; }
.field-group { margin-bottom:24px; }.field-group label { display:block; font-weight:700; margin-bottom:9px; }.field-group textarea { display:block; width:100%; padding:12px; color:var(--text); resize:vertical; border:1px solid #b9bec8; border-radius:12px; }.field-group textarea::placeholder { color:#888; }.button-row { display:flex; gap:12px; margin-top:32px; }.two-actions > * { flex:1; }
.form-error { margin:18px 0 -14px; color:#b91c1c; font-weight:700; }.has-error { border-color:#dc2626 !important; }.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.progress-heading { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; }.progress-heading p { font-weight:700; margin:0; }.progress-heading strong { color:var(--blue); }.progress-bar { height:8px; overflow:hidden; border-radius:999px; background:#e5e7eb; margin-bottom:42px; }.progress-bar span { display:block; width:12.5%; height:100%; background:var(--blue); }.choice-list { display:grid; grid-template-columns:1fr; gap:10px; }.choice { min-height:48px; padding:10px 16px; color:var(--text); text-align:left; background:#fff; border:1px solid #c8ccd4; border-radius:12px; }.choice:hover { border-color:var(--blue); background:#f8faff; }
.question-input { display:block; width:100%; min-height:48px; padding:12px; color:var(--text); resize:vertical; border:1px solid #b9bec8; border-radius:12px; }.question-input::placeholder { color:#888; }
.processing { min-height:calc(100svh - 144px); flex-direction:column; justify-content:center; align-items:center; text-align:center; }.screen.processing:target { display:flex; }.loader { width:42px; height:42px; margin-bottom:28px; border:4px solid #dbeafe; border-top-color:var(--blue); border-radius:50%; animation:spin 1s linear infinite; }.processing .button { max-width:200px; }
.result h1 { margin-bottom:8px; }.card { padding:24px; margin:18px 0; border:1px solid var(--line); border-radius:var(--radius); background:#fff; box-shadow:var(--shadow); }.card p { color:var(--muted); }.consultation-sheet { margin:0; }.consultation-sheet div { display:grid; grid-template-columns:132px 1fr; gap:10px; padding:11px 0; border-bottom:1px solid var(--line); }.consultation-sheet div:last-child { border:0; }.consultation-sheet dt { font-weight:700; }.consultation-sheet dd { margin:0; color:var(--muted); }.insight-card { border-color:#bfdbfe; background:#f8fbff; }.insight-card .disclaimer { margin:18px 0 0; font-size:14px; }.check-list { padding:0; margin:0; list-style:none; }.check-list li { position:relative; padding-left:28px; margin:10px 0; }.check-list li::before { position:absolute; left:0; color:var(--blue); content:"✓"; font-weight:800; }.next-actions { display:grid; grid-template-columns:1fr; gap:10px; }
.choice.is-selected { color:var(--blue); background:#eff6ff; border-color:var(--blue); font-weight:700; }.generated-text { max-height:260px; overflow:auto; margin:0 0 18px; padding:14px; white-space:pre-wrap; color:var(--text); background:#f9fafb; border-radius:10px; font-family:inherit; font-size:14px; line-height:1.7; }.toast { position:fixed; right:24px; bottom:24px; z-index:10; padding:12px 18px; color:#fff; background:var(--text); border-radius:10px; box-shadow:var(--shadow); opacity:0; pointer-events:none; transform:translateY(8px); transition:opacity .2s,transform .2s; }.toast.is-visible { opacity:1; transform:translateY(0); }
.site-footer { padding:24px 0; color:var(--muted); font-size:14px; text-align:center; }
@keyframes spin { to { transform:rotate(360deg); } } @keyframes appear { from { opacity:0; } to { opacity:1; } }
@media (min-width:600px) { .screen { padding:36px 0 56px; }.top-content { min-height:420px; }.next-actions { grid-template-columns:repeat(2,1fr); }.next-actions .button:last-child { grid-column:1 / -1; } }
@media (max-width:374px) { .site-header,.site-footer,main { width:calc(100% - 32px); }.screen { padding-top:16px; }.card { padding:18px; }.consultation-sheet div { grid-template-columns:1fr; gap:2px; } }