/* 需要テストの紹介ページの見た目の決まり。色・大きさはこの先頭の変数にだけ書く */
:root {
  color-scheme: light dark;
  --ink: #1f1f1c;
  --muted: #5f5e5a;
  --bg: #fbfaf7;
  --surface: #ffffff;
  --border: #e3e1da;
  --notice-bg: #faeeda;
  --notice-ink: #633806;
  --pain: #993c1d;
  --can: #0f6e56;
  --cannot: #5f5e5a;
  --price: #185fa5;
  --accent: #534ab7;
  --accent-soft: #eeedfe;
  --accent-ink: #26215c;
  --on-accent: #ffffff;
  --radius: 14px;
  --gap: 1rem;
  --font: system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Noto Sans JP", sans-serif;
}

.t-violet { --accent: #534ab7; --accent-soft: #eeedfe; --accent-ink: #26215c; }
.t-pink { --accent: #993556; --accent-soft: #fbeaf0; --accent-ink: #4b1528; }
.t-blue { --accent: #185fa5; --accent-soft: #e6f1fb; --accent-ink: #042c53; }
.t-green { --accent: #3b6d11; --accent-soft: #eaf3de; --accent-ink: #173404; }
.t-coral { --accent: #993c1d; --accent-soft: #faece7; --accent-ink: #4a1b0c; }
.t-amber { --accent: #854f0b; --accent-soft: #faeeda; --accent-ink: #412402; }

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #ecebe6;
    --muted: #b4b2a9;
    --bg: #1b1b19;
    --surface: #242422;
    --border: #3a3a37;
    --notice-bg: #412402;
    --notice-ink: #fac775;
    --pain: #f0997b;
    --can: #5dcaa5;
    --cannot: #b4b2a9;
    --price: #85b7eb;
    --on-accent: #1b1b19;
  }
  .t-violet, :root { --accent: #afa9ec; --accent-soft: #3c3489; --accent-ink: #eeedfe; }
  .t-pink { --accent: #ed93b1; --accent-soft: #72243e; --accent-ink: #fbeaf0; }
  .t-blue { --accent: #85b7eb; --accent-soft: #0c447c; --accent-ink: #e6f1fb; }
  .t-green { --accent: #97c459; --accent-soft: #27500a; --accent-ink: #eaf3de; }
  .t-coral { --accent: #f0997b; --accent-soft: #712b13; --accent-ink: #faece7; }
  .t-amber { --accent: #ef9f27; --accent-soft: #633806; --accent-ink: #faeeda; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.75; }
a { color: var(--accent); }
a:focus-visible, .button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
main { max-width: 60rem; margin: 0 auto; padding: 0 16px 2rem; }

.top { border-bottom: 1px solid var(--border); background: var(--surface); }
.brand { display: flex; align-items: center; gap: 10px; max-width: 60rem; margin: 0 auto; padding: 10px 16px; color: var(--ink); text-decoration: none; font-size: 14px; }

.notice { margin: 1rem 0 0; padding: 8px 12px; border-radius: 10px; background: var(--notice-bg); color: var(--notice-ink); font-size: 14px; }

.hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 1.5rem; align-items: center; margin: 1.5rem 0; }
.eyebrow { margin: 0; color: var(--accent); font-size: 14px; font-weight: 600; }
h1 { margin: 0.25rem 0 0.75rem; font-size: clamp(1.6rem, 4vw, 2.3rem); line-height: 1.35; }
h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 0.5rem; font-size: 1.05rem; }
.lede { margin: 0 0 0.75rem; font-size: 1.05rem; }
.diff { margin: 0; padding: 8px 12px; border-left: 4px solid var(--accent); background: var(--accent-soft); color: var(--accent-ink); }

.ill { width: 100%; height: auto; }
.ill.small { max-width: 200px; display: block; margin: 0 auto 0.5rem; }
.ill text { font: 600 15px var(--font); }
.i-soft { fill: var(--accent-soft); }
.i-main { fill: var(--accent); }
.i-paper { fill: var(--surface); }
.i-edge { stroke: var(--border); stroke-width: 2; }
.i-line { fill: none; stroke: var(--accent-ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.i-paper.i-line { fill: var(--surface); }
.i-dash { stroke-dasharray: 6 6; }
.i-ink { fill: var(--accent-ink); }
.i-on { fill: var(--on-accent); }
.i-on-line { fill: none; stroke: var(--on-accent); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }

.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.25rem; }
.card.wide { margin-top: var(--gap); }
.mark { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.m-pain { background: var(--pain); }
.m-can { background: var(--can); }
.m-cannot { background: var(--cannot); }
.m-price { background: var(--price); }
.list { margin: 0; padding-left: 1.2rem; }
.list li { margin: 0.2rem 0; }
.check li::marker { content: "✓  "; color: var(--can); font-weight: 700; }
.cross li::marker { content: "×  "; color: var(--cannot); font-weight: 700; }
.price { margin: 0; font-size: 1.1rem; font-weight: 600; color: var(--price); }

.cta { margin: 1.5rem 0 0.5rem; text-align: center; }
.button { display: inline-block; max-width: 100%; padding: 14px 28px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 1.05rem; font-weight: 700; text-decoration: none; }
.button:hover { filter: brightness(1.08); }
.cta-note { margin: 0.6rem auto 0; max-width: 36rem; color: var(--muted); font-size: 13px; }

.faq { margin: 0; }
.faq dt { margin-top: 0.75rem; font-weight: 600; }
.faq dd { margin: 0.1rem 0 0; color: var(--muted); }

.thanks { text-align: center; margin-top: 2rem; }

.foot { border-top: 1px solid var(--border); padding: 1rem 16px 2rem; text-align: center; color: var(--muted); font-size: 13px; }
.foot p { margin: 0.2rem 0; }

@media (max-width: 640px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .ill { max-width: 320px; margin: 0 auto; display: block; }
  .grid { grid-template-columns: minmax(0, 1fr); }
  .button { padding: 14px 18px; }
}