:root { --ink:#0A0A0A; --ink-soft:#555; --muted:#777; --paper:#fff; --beige:#F5F3EC; --border:1.5px solid var(--ink); --ai-yellow:#FFD60A; --ai-yellow-soft:#fff7bd; --danger:#a9382b; --danger-bg:#fff0ed; }
* { 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 20px; color:var(--ink-soft); font-size:15px; line-height:2; }
.exam-guide { max-width:590px; padding:16px; margin:0 0 24px; background:var(--beige); border:var(--border); } .exam-guide .guide-title { margin:0 0 10px; font-size:11px; font-weight:800; letter-spacing:.1em; } .exam-guide > p:last-child { margin:14px 0 0; color:var(--ink-soft); font-size:12px; line-height:1.85; }
.chips { display:flex; flex-wrap:wrap; gap:8px; 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; }
.cat { display:block; pointer-events:none; } .cat-intro { width:130px; max-width:30vw; margin:18px 0 -18px auto; transform:rotate(3deg); } .cat-result { width:130px; max-width:35vw; margin:18px 0 0 auto; transform:rotate(-3deg); } .cat-loading { width:96px; max-width:24vw; margin:16px auto 6px; transition:transform .4s cubic-bezier(.34,1.56,.64,1); }
.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 { outline:3px solid #4b8cf7; outline-offset:3px; } .button-primary { background:var(--ai-yellow); } .button-primary:disabled { color:#777; background:#e6e6e6; border-color:#aaa; opacity:1; } .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); }
.url-form { max-width:590px; margin-top:8px; } .url-form label { display:block; margin-bottom:10px; font-size:13px; font-weight:800; } .url-input-row { display:flex; flex-wrap:wrap; gap:10px; } .url-input-row input { flex:1 1 240px; min-width:0; height:54px; padding:0 14px; color:var(--ink); background:var(--paper); border:var(--border); font-size:16px; } .url-input-row input:focus-visible { outline:3px solid #4b8cf7; outline-offset:2px; } .url-input-row .button { flex:0 0 auto; } .url-error { margin:10px 0 0; color:var(--danger); font-size:13px; font-weight:700; } .url-error[hidden] { display:none; }
.loading-progress { max-width:420px; height:8px; margin-top:28px; overflow:hidden; background:#e1e0dc; border:1px solid var(--ink); } .loading-progress span { display:block; width:0; height:100%; background:var(--ai-yellow); transition:width .2s linear; } .loading-counter { margin:10px 0 0; color:var(--muted); font-size:11px; font-weight:800; letter-spacing:.05em; } .loading-current { min-height:20px; margin:4px 0 0; color:var(--ink); font-size:14px; font-weight:800; }
.loading-log { display:grid; grid-template-columns:1fr 1fr; gap:8px; max-width:640px; margin:18px 0 0; padding:0; list-style:none; } .loading-log li { position:relative; overflow:hidden; display:flex; align-items:flex-start; min-width:0; gap:8px; min-height:36px; padding:9px 10px; color:var(--muted); background:var(--paper); border:var(--border); font-size:11px; line-height:1.4; font-weight:700; animation:loading-log-in .25s ease both; } .loading-log li::before { content:""; position:absolute; inset:0; width:0%; background:var(--ai-yellow); transition:width .45s ease; } .loading-log li.is-filling::before { width:100%; } .loading-log li .mark,.loading-log li span:last-child { position:relative; z-index:1; min-width:0; } .loading-log li span:last-child { overflow-wrap:anywhere; } .loading-log li .mark { display:grid; flex:0 0 auto; place-items:center; width:17px; height:17px; margin-top:1px; color:var(--ink); background:transparent; border:1.5px solid currentColor; border-radius:50%; font-size:9px; font-weight:800; opacity:0; transform:scale(.55); transition:opacity .2s ease .12s,transform .2s ease .12s; } .loading-log li.is-done { color:var(--ink); } .loading-log li.is-done .mark { opacity:1; transform:scale(1); color:var(--paper); background:var(--ink); border-color:var(--ink); } @keyframes loading-log-in { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
@media (max-width:374px) { .loading-log { gap:6px; } .loading-log li { padding:8px; font-size:10px; } }
.error-message { max-width:560px; margin:20px 0 28px; color:var(--ink-soft); font-size:14px; line-height:1.9; }
.result-license { position:relative; margin-top:8px; padding:23px 20px 18px; background:var(--ai-yellow); border:var(--border); overflow:hidden; } .result-license::before { position:absolute; top:6px; left:8px; color:var(--ink); font-family:monospace; font-size:34px; font-weight:800; line-height:1; content:"⌐"; } .license-label { margin:0 84px 18px 0; font-size:10px; font-weight:800; letter-spacing:.12em; } .cat-license { position:absolute; top:12px; right:14px; width:56px; max-width:16vw; transform:rotate(-4deg); } .result-rank { margin:0 0 4px; color:var(--ink-soft); font-size:13px; font-weight:800; letter-spacing:.02em; overflow-wrap:anywhere; } .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:21px; font-weight:800; letter-spacing:-.02em; } .pass-message { margin:14px 0 0; padding:12px; background:var(--paper); border-left:5px solid var(--ink); font-size:14px; font-weight:700; line-height:1.75; }
.score-bars { display:grid; gap:22px; margin-top:22px; } .score-group { position:relative; z-index:1; } .score-bar-row { position:relative; z-index:1; } .score-bar-head { display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-bottom:6px; } .score-bar-row b { font-size:12px; font-weight:800; } .score-bar-row .score-bar-num { font-size:12px; font-weight:800; white-space:nowrap; font-variant-numeric:tabular-nums; } .score-bar-track { height:9px; overflow:hidden; background:var(--paper); border:1.5px solid var(--ink); } .score-bar-track i { display:block; height:100%; background:var(--ink); }
.score-bar-row.is-main .score-bar-head { flex-direction:column; align-items:flex-start; gap:2px; margin-bottom:8px; } .score-bar-row.is-main b { font-size:17px; line-height:1.35; letter-spacing:-.02em; word-break:keep-all; overflow-wrap:anywhere; } .score-bar-row.is-main .score-bar-num { font-size:22px; letter-spacing:-.03em; line-height:1.1; } .score-bar-row.is-main .score-bar-track { height:14px; }
.score-subs { display:grid; gap:11px; margin-top:12px; margin-left:7px; padding-left:15px; border-left:2.5px solid var(--ink); } .score-bar-row.is-sub b { font-size:12.5px; font-weight:700; } .score-bar-row.is-sub .score-bar-num { font-size:14px; font-weight:800; } .score-bar-row.is-sub .score-bar-track { height:7px; } .score-bar-row.is-sub::before { content:""; position:absolute; top:9px; left:-15px; width:9px; height:2.5px; background:var(--ink); }
.score-bar-row.is-weak .score-bar-num { color:var(--danger); } .score-bar-row.is-weak .score-bar-track i { background:var(--danger); }
.license-meta { position:relative; z-index:1; display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 16px; margin-top:20px; padding-top:10px; border-top:1px solid var(--ink); font-family:monospace; font-size:11px; font-weight:800; letter-spacing:.04em; } .result-stats { margin:14px 0 0; color:var(--ink-soft); font-size:12px; font-weight:700; text-align:center; }
.comic-frame { margin:26px auto 0; padding:0; max-width:min(100%,360px); border:var(--border); background:var(--paper); } .comic-frame[hidden] { display:none!important; } .comic-grid { display:grid; grid-template-columns:1fr 1fr; } .comic-cell { display:block; aspect-ratio:1/1; padding:0; background-color:transparent; background-repeat:no-repeat; background-size:100% 400%; border:.75px solid var(--ink); cursor:pointer; -webkit-tap-highlight-color:transparent; } .comic-hint { margin:8px 0 0; color:var(--muted); font-size:11px; font-weight:800; letter-spacing:.04em; text-align:center; }
.comic-lightbox { position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(10,10,10,.92); }
.comic-lightbox[hidden] { display:none!important; }
.comic-lightbox-cell { width:min(88vw,420px); aspect-ratio:1/1; background-repeat:no-repeat; background-size:100% 400%; border:2px solid var(--paper); }
.comic-lightbox-close { position:absolute; top:14px; right:14px; width:40px; height:40px; color:var(--paper); background:transparent; border:1.5px solid var(--paper); font-size:22px; line-height:1; }
.comic-lightbox-nav { position:absolute; top:50%; width:44px; height:44px; color:var(--ink); background:var(--ai-yellow); border:var(--border); font-size:24px; font-weight:800; line-height:1; transform:translateY(-50%); }
.comic-lightbox-prev { left:8px; }
.comic-lightbox-next { right:8px; }
.comic-lightbox-count { position:absolute; bottom:18px; left:50%; margin:0; padding:4px 12px; color:var(--paper); background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.4); font-size:11px; font-weight:800; letter-spacing:.06em; transform:translateX(-50%); }
@media (min-width:600px) { .comic-lightbox-nav { width:52px; height:52px; font-size:28px; } }
.risk-warning { margin-top:24px; padding:18px; color:var(--danger); background:var(--danger-bg); border:2px solid currentColor; } .risk-warning p { margin:0 0 6px; font-size:11px; font-weight:800; letter-spacing:.1em; } .risk-warning h3 { margin:0 0 10px; font-size:18px; } .risk-warning span { font-size:13px; line-height:1.8; }
.result-section { margin-top:32px; } .result-section h3,.result-section h4 { margin:0 0 12px; font-size:18px; } .result-section h4 { font-size:14px; }
.review-toggle { display:flex; width:100%; align-items:center; justify-content:space-between; margin-top:22px; 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); }
.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.is-fail { background:#fff0ed; box-shadow:3px 3px 0 var(--danger); } .category-row b { font-size:13px; } .category-row .check-mark { font-size:12px; font-weight:800; } .category-row.is-fail .check-mark { color:var(--danger); } .category-row p { grid-column:1/-1; margin:0; color:var(--ink-soft); font-size:12px; line-height:1.7; }
.diagnosis-disclaimer { margin:20px 0 0; color:var(--muted); font-size:11px; line-height:1.8; }
.line-next-step-kicker { margin:0 0 10px; color:var(--ink-soft); font-size:11px; font-weight:800; letter-spacing:.1em; } .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; } .line-next-step { margin:28px 0 18px; padding:20px 18px; border:var(--border); } .line-next-step h3 { margin:0 0 14px; font-size:20px; line-height:1.55; } .line-next-step-body { margin:0; color:var(--ink-soft); font-size:13px; line-height:1.9; transition:filter .3s ease; } .line-next-step:not(.is-unlocked) .line-next-step-body { filter:blur(6px); user-select:none; } .line-next-step .button { width:100%; margin-top:18px; } .line-next-step.is-unlocked #line-unlock-button,.line-next-step.is-unlocked .line-unlock-note { display:none; } .line-unlock-note { margin:7px 0 0; color:var(--muted); font-size:11px; text-align:center; } .line-guidance { margin:14px 0 0; color:var(--muted); font-size:10px; line-height:1.7; text-align:center; }
#restart-button { width:100%; margin-top: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; } .cat-intro,.cat-result { width:160px; } }
@media (max-width:374px) { .diagnosis-app { 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; } }