/* ヨミコミ：漫画誌の誌面をモチーフにしたデザイン
   紙（白）× 墨（黒）× 特色1色（蛍光イエロー）。角丸なし、コマ枠の太線、網点トーン。
   特定作品の絵柄・ロゴには寄せない（どの漫画にも共通する表現だけを使う） */
:root{
  color-scheme: light;
  --paper:#FBFBF8; --white:#FFFFFF;
  --ink:#141414; --ink-2:#3C3C3C; --ink-3:#6E6E6E;
  --line:#141414; --rule:#D9D9D3;
  --tone:#E9E9E3;
  --spot:#FFE01A; --spot-d:#F2C200;
  --ok:#0B7A45; --ng:#D0021B;
  --frame:3px;
  --display:"Dela Gothic One","Zen Kaku Gothic New",sans-serif;
  --body:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:hidden;-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-weight:500;line-height:1.85;font-size:16px;font-feature-settings:"palt" 1;line-break:strict;overflow-wrap:anywhere}
h1,.q-text,.qcard .t,.shin-banner .t,.type-hero .catch{word-break:auto-phrase}
/* 漫画の台詞の組み方（漢字はゴシック、かなは明朝＝アンチック体） */
.antique{font-family:"Zen Old Mincho","Zen Kaku Gothic New",sans-serif;font-weight:700}
a{color:var(--ink);text-decoration-thickness:1px;text-underline-offset:3px}
img,svg{max-width:100%}
.wrap{max-width:720px;margin:0 auto;padding-inline:16px}
button,a{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 6px var(--spot)}

/* 網点トーン（背景用） */
.tone{background-image:radial-gradient(var(--ink) 0.9px,transparent 1.1px);background-size:6px 6px}

/* ---------- header ---------- */
.site-h{background:var(--white);border-bottom:var(--frame) solid var(--line)}
.site-h .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;height:54px}
.logo{display:flex;align-items:baseline;gap:10px;text-decoration:none;white-space:nowrap}
.logo b{font-family:var(--display);font-weight:400;font-size:22px;letter-spacing:.06em;background:linear-gradient(transparent 58%,var(--spot) 58%);padding:0 2px}
.logo small{font-size:11px;color:var(--ink-3);letter-spacing:.04em}
.site-h nav{display:flex;gap:16px}
.site-h nav a{font-size:13px;font-weight:700;text-decoration:none;white-space:nowrap}
.site-h nav a:hover{text-decoration:underline}
@media (max-width:520px){.logo small{display:none}.site-h nav{gap:12px}}

/* ---------- footer ---------- */
.site-f{margin-top:72px;border-top:var(--frame) solid var(--line);background:var(--white);padding-block:28px 44px;font-size:12px;color:var(--ink-2)}
.site-f p{margin-bottom:10px;max-width:62ch}
.site-f nav{display:flex;flex-wrap:wrap;gap:6px 16px}
.site-f nav a{color:var(--ink-2)}

/* ---------- type ---------- */
.crumb{font-size:12px;color:var(--ink-3);margin-top:16px}
.crumb a{color:var(--ink-3)}
.kicker{display:inline-flex;align-items:center;gap:8px;margin-top:20px;font-size:12px;font-weight:700;letter-spacing:.08em}
.kicker .work{background:var(--ink);color:var(--white);padding:1px 8px}
h1{font-family:var(--display);font-weight:400;font-size:clamp(26px,7.4vw,40px);line-height:1.3;letter-spacing:.02em;margin:10px 0 12px;text-wrap:balance}
h2.sec{display:table;font-family:var(--display);font-weight:400;font-size:18px;letter-spacing:.06em;line-height:1.5;margin:52px 0 16px;background:var(--ink);color:var(--white);padding:3px 12px 2px}
.lead{color:var(--ink-2);font-size:15px;max-width:60ch}
.meta{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:12px;font-size:13px;font-weight:700}
.meta span+span::before{content:"／";margin-right:10px;color:var(--ink-3);font-weight:500}
.spoiler{margin-top:12px;font-size:12px;color:var(--ink-2);border:1px dashed var(--ink-3);padding:6px 10px}
.stars{letter-spacing:.1em;font-size:13px}
.level{display:inline-block;font-weight:900;font-size:12px;border:2px solid var(--ink);padding:0 7px;line-height:1.6;background:var(--white)}
.level.l1{background:var(--white)}
.level.l2{background:var(--spot)}
.level.l3{background:var(--ink);color:var(--spot)}

/* ---------- buttons ---------- */
.btn{appearance:none;cursor:pointer;font:inherit;font-weight:900;font-size:17px;letter-spacing:.04em;border:var(--frame) solid var(--ink);border-radius:0;padding:14px 20px;background:var(--spot);color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:transform .06s,box-shadow .06s}
.btn.main{box-shadow:4px 4px 0 var(--ink)}
.btn.main:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--ink)}
.btn.plain{background:var(--white);border-width:2px}
.btn.dark{background:var(--ink);color:var(--white)}
.btn.block{width:100%}
.btn.sm{font-size:14px;padding:10px 12px}

/* ---------- panels（コマ） ---------- */
.panel{background:var(--white);border:var(--frame) solid var(--line);padding:22px 20px}

/* hero：集中線 */
.hero{position:relative;margin-top:20px;border:var(--frame) solid var(--line);background:var(--white);overflow:hidden;padding:30px 44px 26px 18px;text-align:center}
.hero .work{display:inline-block;background:var(--ink);color:var(--white);font-size:13px;font-weight:900;padding:2px 10px;margin-bottom:12px}
.hero .hashira{position:absolute;top:14px;right:10px;z-index:2;writing-mode:vertical-rl;font-size:11px;font-weight:900;letter-spacing:.2em;background:var(--ink);color:var(--white);padding:8px 3px}
.hero::before{content:"";position:absolute;inset:-50%;background:repeating-conic-gradient(from 0deg at 50% 50%,var(--ink) 0deg 0.7deg,transparent 0.7deg 6deg);opacity:.13;pointer-events:none}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 52% 46% at 50% 50%,var(--white) 62%,transparent 100%);pointer-events:none}
.hero>*{position:relative;z-index:1}
.hero h1{margin:0 0 12px;font-size:clamp(28px,8.6vw,46px);line-height:1.25}
.hero h1 em{font-style:normal;background:linear-gradient(transparent 60%,var(--spot) 60%)}
.hero p.sub{font-size:15px;color:var(--ink-2);max-width:21em;margin:0 auto;text-align:left}
.hero .btn{margin-top:20px}

/* ---------- quiz list ---------- */
.qlist{display:grid;gap:14px}
.qcard{position:relative;display:grid;grid-template-columns:1fr;gap:4px 12px;align-items:center;text-decoration:none;color:var(--ink);background:var(--white);border:var(--frame) solid var(--line);padding:14px 16px;transition:transform .08s,box-shadow .08s}
.qcard .t{font-weight:900;font-size:17px;line-height:1.45;display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.qcard .d{grid-column:1;font-size:13px;color:var(--ink-2);line-height:1.7}

/* 段位ステップ（初級→中級→上級） */
.steps{display:grid;grid-template-columns:repeat(3,1fr);border:var(--frame) solid var(--line);background:var(--white)}
.step{display:flex;flex-direction:column;gap:2px;padding:14px 12px 12px;text-decoration:none;color:var(--ink);border-left:var(--frame) solid var(--line);min-width:0}
.step:first-child{border-left:0}
.step .lv{font-family:var(--display);font-size:22px;line-height:1.2}
.step .s{font-size:12px;color:var(--ink-3)}
.step .n{font-size:12px;font-weight:700;margin-top:4px}
.step.l2{background:var(--spot)}
.step.l3{background:var(--ink);color:var(--white)}
.step.l3 .s{color:#BDBDBD}
.step.soon{pointer-events:none;background:var(--white);color:var(--ink-3)}
.step.soon .s{color:var(--ink-3)}
.step.soon .n{align-self:flex-start;border:2px solid var(--ink-3);padding:0 6px;line-height:1.5;transform:rotate(-4deg)}
@media (max-width:420px){.step{padding:12px 8px}.step .lv{font-size:19px}}

/* 診断バナー */
.shin-banner{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;text-decoration:none;color:var(--ink);border:var(--frame) solid var(--line);background:var(--spot);padding:16px 18px;box-shadow:5px 5px 0 var(--ink)}
.shin-banner .t{font-family:var(--display);font-size:20px;line-height:1.35}
.shin-banner .d{font-size:13px;margin-top:4px}
.shin-banner .go{font-family:var(--display);font-size:26px}

/* ---------- quiz stage ---------- */
.stage{margin-top:22px;scroll-margin-top:12px}
.start{text-align:center}
.start p{font-size:14px;color:var(--ink-2);margin-bottom:16px}
.progress{display:flex;align-items:center;gap:12px;font-weight:900;font-size:14px;margin-bottom:14px;font-variant-numeric:tabular-nums}
.bar{flex:1;height:12px;border:2px solid var(--ink);background:var(--white)}
.bar i{display:block;height:100%;background:var(--ink);width:0;transition:width .25s}
.q-num{font-family:var(--display);font-size:15px;letter-spacing:.06em}
.q-text{font-weight:900;font-size:19px;line-height:1.6;margin:6px 0 18px}
.choices{list-style:none;display:grid;gap:10px}
.choice{width:100%;min-height:56px;text-align:left;appearance:none;font:inherit;font-weight:700;font-size:16px;line-height:1.5;cursor:pointer;background:var(--white);color:var(--ink);border:2px solid var(--ink);border-radius:0;padding:10px 12px;display:flex;gap:12px;align-items:center;transition:background .1s}
.choice:active:not(:disabled){background:var(--tone)}
.choice .k{flex:none;width:30px;height:30px;border:2px solid var(--ink);display:grid;place-items:center;font-family:var(--display);font-size:14px}
.choice:disabled{cursor:default}
.choice.is-ok{background:var(--spot);border-width:3px}
.choice.is-ok .k{background:var(--ink);color:var(--spot)}
.choice.is-ng{background:var(--white);color:var(--ink-3)}
.choice.is-ng span:last-child{text-decoration:line-through;text-decoration-thickness:2px}
.choice.is-ng .k{border-color:var(--ng);color:var(--ng)}

/* 吹き出し */
.feedback{position:relative;margin-top:22px;border:var(--frame) solid var(--ink);border-radius:26px;background:var(--white);padding:16px 18px;font-size:15px}
.feedback::before{content:"";position:absolute;top:-17px;left:36px;border:14px solid transparent;border-bottom:16px solid var(--ink);border-top:0}
.feedback::after{content:"";position:absolute;top:-11px;left:39px;border:11px solid transparent;border-bottom:13px solid var(--white);border-top:0}
.feedback .v{font-family:"Zen Old Mincho","Zen Kaku Gothic New",sans-serif;font-weight:900;font-size:24px;line-height:1.35;margin-bottom:6px;letter-spacing:.02em}
.feedback.ok .v{color:var(--ink)}
.feedback.ok .v::before{content:"";display:inline-block;width:.8em;height:.8em;border:4px solid var(--ok);border-radius:50%;margin-right:8px;vertical-align:-.05em}
.feedback.ng .v{color:var(--ng)}
.feedback.ng .v::before{content:"✕";margin-right:6px}
.next{margin-top:18px}

/* 解説・登場回 */
.exp p+p,.exp p+.ep{margin-top:8px}
.ep{margin-top:12px;border-top:1px dashed var(--ink-3);padding-top:10px;font-size:14px;color:var(--ink-2)}
.ep-h{font-weight:900;font-size:12px;color:var(--ink);letter-spacing:.04em}
.ep-h::before{content:"";display:inline-block;width:10px;height:10px;background:var(--ink);margin-right:6px;vertical-align:0}
.ep details summary{cursor:pointer;font-size:13px;font-weight:700;margin-top:4px;text-decoration:underline;text-underline-offset:3px}
.ep details p{margin-top:6px}
.feedback,.ep{line-height:1.8}

/* ---------- result ---------- */
.result{text-align:center;padding-top:28px}
.result .label{font-size:13px;font-weight:700;color:var(--ink-2)}
.score{font-family:var(--display);font-size:84px;line-height:1.1;margin:6px 0 2px;font-variant-numeric:tabular-nums}
.score small{font-size:30px;margin-left:4px;color:var(--ink-3)}
.rank{display:inline-block;font-family:var(--display);font-size:22px;background:var(--spot);border:var(--frame) solid var(--ink);padding:2px 16px;transform:rotate(-2deg)}
.rank-msg{color:var(--ink-2);font-size:14px;margin:14px auto 20px;max-width:30em}
.nextlv{margin:14px 0 0}
.nextlv .btn{background:var(--white);border-width:2px;font-size:15px}
.sub-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 20px;margin-top:14px;font-size:14px;font-weight:700}
.sub-actions button,.sub-actions a{background:none;border:0;font:inherit;color:var(--ink);text-decoration:underline;text-underline-offset:4px;cursor:pointer;padding:4px 0}
.share{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.share .btn{font-size:16px;padding:12px;box-shadow:3px 3px 0 var(--ink)}
.share .wide{grid-column:1/-1}
.btn.x{background:var(--ink);color:var(--white)}
.btn.line{background:#06C755;color:var(--white)}
.review{text-align:left;margin-top:28px}
.review h3{font-weight:900;font-size:16px;margin-bottom:10px}
.review details{border:2px solid var(--ink);padding:10px 14px;margin-bottom:10px;background:var(--white)}
.review summary{cursor:pointer;font-weight:700;font-size:14px}
.review .exp{font-size:14px;margin-top:8px}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--white);padding:8px 16px;font-size:13px;font-weight:700;opacity:0;transition:opacity .2s;pointer-events:none}
.toast.on{opacity:1}

/* ---------- 答え一覧（検索エンジン・JSなし用） ---------- */
.answers{margin-top:44px;border-top:2px solid var(--ink);padding-top:14px}
.answers>summary{cursor:pointer;font-weight:900;font-size:14px}
.answers ol{margin:14px 0 0 1.4em}
.answers li{margin-bottom:20px}
.answers .qt{font-weight:900}
.answers ul{margin:4px 0 4px 1.2em;font-size:14px;color:var(--ink-2)}
.answers .exp,.answers .ans{font-size:14px}
.src{font-size:12px;color:var(--ink-3);margin-top:24px}

/* ---------- 診断 ---------- */
.shin-q .opts{list-style:none;display:grid;gap:10px}
.type-hero{margin-top:20px;border:var(--frame) solid var(--ink);background:var(--white);position:relative;overflow:hidden;text-align:center;padding:34px 18px 28px}
.type-hero .tone-band{position:absolute;inset:auto 0 0 0;height:38%;opacity:.12}
.type-hero>*{position:relative}
.type-hero .you{font-size:13px;font-weight:900;letter-spacing:.1em}
.type-hero .tname{font-family:var(--display);font-size:clamp(48px,16vw,76px);line-height:1.15;margin:4px 0}
.type-hero .tname span{background:linear-gradient(transparent 62%,var(--spot) 62%)}
.type-hero .catch{font-weight:900;font-size:16px}
.facts{display:grid;grid-template-columns:repeat(2,1fr);border:var(--frame) solid var(--ink);background:var(--white);margin-top:16px}
.facts div{padding:12px 14px;border-top:2px solid var(--ink)}
.facts div:nth-child(-n+2){border-top:0}
.facts div:nth-child(even){border-left:2px solid var(--ink)}
.facts dt{font-size:12px;font-weight:900;color:var(--ink-3)}
.facts dd{font-weight:700;font-size:15px}
@media (max-width:420px){.facts{grid-template-columns:1fr}.facts div{border-left:0!important;border-top:2px solid var(--ink)!important}.facts div:first-child{border-top:0!important}}
.types6{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.types6 a{border:2px solid var(--ink);background:var(--white);text-align:center;padding:10px 4px;text-decoration:none;font-weight:900;font-size:14px}
.types6 a.me{background:var(--spot)}

/* ---------- prose ---------- */
.prose{max-width:62ch}
.prose h2{font-weight:900;font-size:18px;margin:32px 0 10px;border-bottom:2px solid var(--ink);padding-bottom:4px}
.prose p,.prose ul{margin-bottom:14px}
.prose ul{padding-left:1.3em}
.note{font-size:13px;color:var(--ink-3)}
.hidden{display:none!important}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

@media (hover:hover){
  .btn:hover{background:var(--spot-d)} .btn.plain:hover,.btn.dark:hover{background:var(--tone);color:var(--ink)}
  .qcard:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--ink)}
  .choice:hover:not(:disabled){background:var(--tone)}
  .step:hover,.types6 a:hover{background:var(--tone)} .step.l2:hover{background:var(--spot-d)} .step.l3:hover{background:#2A2A2A}
}

/* 広告枠（導入時に使用。高さを先に確保してレイアウトのずれ＝誤クリックを防ぐ） */
.ad{position:relative;margin:48px auto;max-width:336px;min-height:280px;padding-top:20px;border-top:1px solid var(--rule);text-align:center}
.ad::before{content:"広告";position:absolute;top:2px;left:0;font-size:11px;letter-spacing:.1em;color:var(--ink-3)}

@media (max-width:480px){
  .lead{font-size:14px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .meta{font-size:12px;margin-top:8px}
  .spoiler{font-size:11px;padding:4px 8px;margin-top:8px}
  .stage .panel{padding:16px 12px}
  .q-text{font-size:18px;margin:4px 0 14px}
  .feedback{padding:14px;border-radius:18px}.feedback::before{left:24px}.feedback::after{left:27px}
  h1{margin:6px 0 8px}
}

/* 「その世界にいたら、〇〇に言われている」吹き出し（セリフは当サイトの創作） */
.voice{margin-top:18px;text-align:center}
.voice-h{font-size:13px;font-weight:900;letter-spacing:.06em}
.balloon{position:relative;display:inline-block;max-width:100%;margin:12px 0 6px;border:var(--frame) solid var(--ink);border-radius:50%/42%;background:var(--white);padding:22px 30px 20px;font-size:19px;line-height:1.6;text-align:left}
.balloon::after{content:"";position:absolute;bottom:-18px;left:24%;border:10px solid transparent;border-top:18px solid var(--ink);border-bottom:0;transform:skewX(-20deg)}
.balloon .who{position:absolute;top:-14px;left:18%;background:var(--ink);color:var(--white);font-family:var(--body);font-size:12px;font-weight:900;padding:1px 8px;letter-spacing:.04em}
.voice-t{font-size:14px;font-weight:700;margin-top:10px}
.voice-note{font-size:11px;color:var(--ink-3);margin-top:4px}
@media (max-width:480px){.balloon{font-size:17px;padding:20px 22px 18px}}

/* 購入リンクカード（楽天・もしも等の公式ツールのHTMLをそのまま入れる。画像は切り抜かない） */
.bookcard{position:relative;margin-top:10px;border:1px solid var(--rule);background:var(--white);padding:18px 10px 10px;font-size:13px}
.bookcard .pr{position:absolute;top:0;left:0;font-size:10px;font-weight:900;letter-spacing:.08em;background:var(--ink-3);color:var(--white);padding:0 6px}
.bookcard img{max-width:100%;height:auto}
.pr-note{margin-top:8px;font-size:11px;color:var(--ink-3)}