:root { --ink:#1a1a1a; --ink-soft:#555; --muted:#888; --paper:#fff; --border:1.5px solid var(--ink); --ai-yellow:#facc15; --ai-yellow-soft:#fff5b3; --danger:#e0483e; --success:#1f9d55; }
* { box-sizing:border-box; }
html { background:var(--paper); overflow-x:hidden; }
body { min-width:0; margin:0; color:var(--ink); background:var(--paper); font-family:"Noto Sans JP",system-ui,sans-serif; overflow-x:hidden; }
button,a { font:inherit; } button { cursor:pointer; } .diagnosis-app { width:min(100%,720px); min-height:calc(100svh - 101px); margin:0 auto; padding:24px 20px 52px; }
.screen { display:none; position:relative; min-width:0; animation:screen-in .35s ease both; } .screen.is-active { display:block; } @keyframes screen-in { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.eyebrow { margin:0 0 10px; color:var(--ink-soft); font-size:11px; font-weight:800; letter-spacing:.13em; } .title-rule { display:flex; align-items:center; gap:10px; margin-bottom:20px; } .title-rule span { width:54px; height:6px; background:var(--ai-yellow); border:var(--border); } .title-rule b { font-size:11px; letter-spacing:.12em; }
h1,h2,h3,p { overflow-wrap:anywhere; } h1 { max-width:580px; margin:0; font-size:clamp(42px,12vw,68px); line-height:1.14; letter-spacing:-.055em; } h1 em { font-style:normal; background:linear-gradient(transparent 60%,var(--ai-yellow) 0); } h2 { margin:0; font-size:clamp(26px,7vw,38px); line-height:1.45; letter-spacing:-.035em; } .intro-lead { max-width:590px; margin:28px 0 24px; color:var(--ink-soft); font-size:15px; line-height:2; }
.chips { display:flex; flex-wrap:wrap; gap:8px; max-width:600px; padding:0; margin:0; list-style:none; } .chips li { padding:7px 10px; background:var(--ai-yellow-soft); border:var(--border); border-radius:999px; font-size:12px; font-weight:700; white-space:nowrap; } .free-note { margin:25px 0 12px; font-size:13px; font-weight:700; } .cat { position:absolute; display:block; width:90px; max-width:24vw; pointer-events:none; } .cat-intro { right:0; bottom:66px; transform:rotate(3deg); } .cat-profile { position:static; margin:18px 0 0 auto; transform:rotate(-5deg); }
.button { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:54px; padding:13px 18px; border:var(--border); border-radius:0; color:var(--ink); font-weight:800; line-height:1.35; text-decoration:none; transition:transform .15s, box-shadow .15s, background .15s; } .button:hover { transform:translate(-2px,-2px); box-shadow:4px 4px 0 var(--ink); } .button:focus-visible,.option:focus-visible,.text-button:focus-visible,.review-toggle:focus-visible { outline:3px solid #4b8cf7; outline-offset:3px; } .button-primary { background:var(--ai-yellow); } .button-outline { width:100%; background:var(--paper); } .button:disabled { cursor:not-allowed; opacity:.45; transform:none; box-shadow:none; } .button-arrow { width:9px; height:9px; border-top:2px solid currentColor; border-right:2px solid currentColor; transform:rotate(45deg); }
.screen-top,.question-meta,.timer-row { display:flex; align-items:center; justify-content:space-between; gap:12px; } .screen-top { margin-bottom:10px; } .screen-top .eyebrow { margin:0; } #profile-progress { color:var(--muted); font-size:12px; font-weight:700; } .profile-kicker { margin:0 0 10px; color:var(--ink-soft); font-size:13px; } .profile-options,.question-options { display:grid; gap:10px; margin-top:26px; } .option { width:100%; padding:15px 14px; color:var(--ink); background:var(--paper); border:var(--border); text-align:left; font-size:14px; font-weight:600; line-height:1.65; transition:background .15s,transform .15s,box-shadow .15s; } .option:hover:not(:disabled) { background:var(--ai-yellow-soft); transform:translate(-2px,-2px); box-shadow:3px 3px 0 var(--ink); } .option.is-selected { background:var(--ai-yellow); box-shadow:3px 3px 0 var(--ink); } .profile-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:28px; } .text-button { padding:8px 2px; color:var(--ink-soft); background:none; border:0; border-bottom:1px solid currentColor; font-size:13px; }
.question-header { position:sticky; z-index:3; top:0; margin:-24px -20px 0; padding:18px 20px 12px; background:rgba(255,255,255,.96); border-bottom:1px solid #eee; backdrop-filter:blur(6px); } .question-meta strong { font-size:14px; letter-spacing:.04em; } #live-score { color:var(--ink-soft); font-size:12px; font-weight:700; } .progress-track { height:8px; margin-top:12px; overflow:hidden; background:#efefef; border:1px solid var(--ink); } #progress-bar { display:block; width:0; height:100%; background:var(--ai-yellow); transition:width .25s ease; } .timer-row { margin:22px 0 14px; color:var(--ink-soft); font-size:13px; font-weight:700; } .timer-wrap { width:44px; height:44px; padding:3px; border-radius:50%; background:conic-gradient(var(--ai-yellow) 360deg,#eee 0); } .timer-ring { display:grid; width:100%; height:100%; place-items:center; border-radius:50%; background:var(--paper); } .timer-ring b { font-size:13px; } .category-label { display:inline-block; margin:0 0 10px; padding:5px 8px; background:var(--ai-yellow-soft); border-left:4px solid var(--ai-yellow); font-size:12px; font-weight:800; }
.question-options .option { position:relative; padding-left:49px; } .question-options .option::before { content:attr(data-letter); position:absolute; top:50%; left:14px; display:grid; width:23px; height:23px; place-items:center; border:1px solid var(--ink); transform:translateY(-50%); font-size:11px; font-weight:800; } .question-options .option:disabled { cursor:default; } .question-options .option.is-correct { color:#0a572e; background:#dff5e7; border-color:var(--success); } .question-options .option.is-wrong { color:#832720; background:#fde7e5; border-color:var(--danger); } .question-options .option.is-timeout { background:#f5f5f5; } .answer-panel { margin-top:20px; } .answer-status { margin:0 0 12px; font-size:16px; font-weight:800; } .answer-status.is-correct { color:var(--success); } .answer-status.is-wrong { color:var(--danger); } .explanation { padding:18px; background:#fafafa; border:var(--border); } .explanation h3 { margin:0 0 8px; font-size:15px; } .explanation p { margin:0; color:var(--ink-soft); font-size:13px; line-height:1.85; } .explanation .source { margin-top:14px; padding-top:12px; border-top:1px solid #ddd; font-size:12px; } .source b { margin-right:8px; color:var(--ink); } #next-question { width:100%; margin-top:14px; }
.result-rank { margin:0 0 4px; color:var(--ink-soft); font-size:14px; font-weight:800; letter-spacing:.08em; } .result-score { display:flex; align-items:baseline; gap:9px; margin:12px 0 0; } .result-score strong { font-size:clamp(64px,20vw,100px); line-height:1; letter-spacing:-.075em; } .result-score span { font-size:15px; font-weight:700; } .pass-message { margin:14px 0 0; padding:12px; background:var(--ai-yellow-soft); border-left:5px solid var(--ai-yellow); font-size:14px; font-weight:700; } .result-section { margin-top:32px; } .result-section h3 { margin:0 0 12px; font-size:18px; } .category-breakdown { display:grid; gap:8px; } .category-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 12px; padding:12px; border:var(--border); } .category-row b { font-size:13px; } .category-row span { font-size:12px; font-weight:700; } .category-bar { grid-column:1/-1; height:6px; overflow:hidden; background:#eee; } .category-bar i { display:block; height:100%; background:var(--ai-yellow); }
.review-toggle { display:flex; width:100%; align-items:center; justify-content:space-between; margin-top:26px; padding:15px 0; color:var(--ink); background:var(--paper); border:0; border-top:var(--border); border-bottom:var(--border); text-align:left; font-weight:800; } .chevron { width:10px; height:10px; border-right:2px solid; border-bottom:2px solid; transform:rotate(45deg) translateY(-3px); transition:transform .2s; } .review-toggle[aria-expanded="true"] .chevron { transform:rotate(225deg) translate(-3px,0); } .review-list { display:grid; gap:12px; margin-top:16px; } .review-list[hidden] { display:none; } .review-item { padding:15px; border:var(--border); } .review-item h3 { margin:0 0 10px; font-size:14px; line-height:1.55; } .review-item p { margin:8px 0 0; color:var(--ink-soft); font-size:12px; line-height:1.75; } .review-item .review-correct { color:var(--success); font-weight:800; } .review-item .review-wrong { color:var(--danger); font-weight:800; } .result-actions { margin:26px 0; } .cta-section { margin:28px 0 18px; padding:22px 18px; background:var(--ink); color:var(--paper); } .cta-section p { margin:0; font-size:13px; line-height:1.8; } .cta-section h3 { margin:8px 0; font-size:20px; } .cta-section a { display:flex; width:fit-content; align-items:center; gap:10px; margin-top:16px; padding-bottom:3px; color:var(--paper); border-bottom:1px solid var(--ai-yellow); font-size:14px; font-weight:800; text-decoration:none; } .cta-section .small-link { margin-top:20px; color:#ddd; border-color:#777; font-size:12px; }
.site-footer { display:flex; width:min(100%,720px); align-items:flex-start; gap:13px; margin:0 auto; padding:20px; border-top:var(--border); } .site-footer img { width:28px; height:auto; } .site-footer p { margin:0; color:var(--muted); font-size:10px; line-height:1.7; }
@media (min-width:600px) { .diagnosis-app { padding:48px 42px 68px; } .question-header { margin:-48px -42px 0; padding:20px 42px 14px; } .cat { width:120px; } .option { font-size:15px; } }
@media (max-width:374px) { .diagnosis-app { padding-inline:16px; } .question-header { margin-inline:-16px; padding-inline:16px; } h1 { font-size:40px; } .chips { gap:6px; } .chips li { padding:6px 8px; font-size:11px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; transition-duration:.01ms!important; } }

/* 追加演出：実力証明ライセンス、解説、結果導線 */
.explanation-stage { margin:0; color:var(--ink-soft); font-size:13px; line-height:1.85; } .explanation-stage + .explanation-stage { margin-top:9px; } .explanation-stage b { color:var(--ink); }
.license-card { position:relative; margin-top:20px; padding:28px 22px 22px; overflow:hidden; background:var(--ai-yellow-soft); border:var(--border); box-shadow:6px 6px 0 var(--ink); } .license-card::before { content:""; position:absolute; inset:8px; border:1px solid var(--ink); pointer-events:none; } .license-card > * { position:relative; } .license-corner { position:absolute; z-index:1; width:22px; height:22px; border-color:var(--ink); border-style:solid; } .license-corner-tl { top:15px; left:15px; border-width:3px 0 0 3px; } .license-corner-tr { top:15px; right:15px; border-width:3px 3px 0 0; } .license-corner-bl { bottom:15px; left:15px; border-width:0 0 3px 3px; } .license-corner-br { right:15px; bottom:15px; border-width:0 3px 3px 0; } .license-label { margin:0; font-size:10px; font-weight:800; letter-spacing:.12em; text-align:center; } .license-meta { display:flex; justify-content:space-between; gap:10px; margin-top:17px; font-family:ui-monospace,SFMono-Regular,monospace; font-size:10px; font-weight:700; letter-spacing:.04em; } .license-card .result-rank { margin:22px 0 4px; } .license-card .pass-message { background:rgba(255,255,255,.62); } .diagnostic-stat { margin:14px 0 0; color:var(--ink-soft); font-size:12px; font-weight:700; text-align:center; }
.review-explanation { margin-top:10px; padding-top:10px; border-top:1px solid #ddd; } .review-explanation .explanation-stage { font-size:12px; }
.result-actions { margin-bottom:16px; } .share-preview { margin-top:18px; padding:17px; background:#fafafa; border:var(--border); } .share-preview h3 { margin:0 0 12px; font-size:15px; } .share-post-card { padding:14px; background:var(--paper); border:1px solid var(--ink); } .share-site-name { margin:0; color:var(--muted); font-size:11px; font-weight:700; } .share-preview-rank { margin:9px 0 2px; font-size:20px; font-weight:800; letter-spacing:.05em; } .share-preview-message { margin:0; color:var(--ink-soft); font-size:13px; font-weight:700; } .share-copy-row { display:grid; gap:10px; margin-top:12px; } .share-copy-text { padding:11px; color:var(--ink-soft); background:var(--paper); border:1px solid #ddd; font-size:12px; line-height:1.7; white-space:pre-wrap; } .share-copy-row .text-button { width:fit-content; }
.weakness-guide { margin:32px 0 20px; padding:22px 18px; border:var(--border); } .weakness-guide .eyebrow { margin-bottom:8px; } .weakness-guide h3 { margin:0; font-size:20px; line-height:1.5; } .weakness-category { display:inline-block; margin:14px 0 9px; padding:5px 8px; background:var(--ai-yellow-soft); border-left:4px solid var(--ai-yellow); font-size:12px; font-weight:800; } .weakness-copy { margin:0; color:var(--ink-soft); font-size:14px; line-height:2; transition:filter .25s ease; } .weakness-guide:not(.is-unlocked) .weakness-copy { filter:blur(6px); user-select:none; } .guide-unlock-actions { margin-top:18px; text-align:center; } .guide-unlock-actions .button { width:100%; } .unlock-note,.guide-note { margin:8px 0 0; color:var(--muted); font-size:11px; line-height:1.7; } .guide-note { margin-top:14px; } .weakness-guide.is-unlocked .guide-unlock-actions { display:none; }