/* HIBIKIBA 使い方ページ */
:root{
  --bg:#121417; --panel:#1b1e22; --panel2:#24282d; --rule:#353b42;
  --ink:#f3f3ef; --sub:#a4aab1; --mute:#767d85;
  --accent:#ffd23f; --accent-ink:#16181b;
  --pa:#2f9be6; --voice:#ef5a2f; --large:#3fb46e; --closed:#a06ad8;
  --font:"Inter", "Zen Kaku Gothic New", system-ui, -apple-system, "Hiragino Sans", sans-serif;
  color-scheme:dark;
}
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-behavior:smooth; }
body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--font); font-size:15.5px; line-height:1.85; -webkit-font-smoothing:antialiased; }
a{ color:var(--accent); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
svg{ display:block; }

.masthead{ max-width:960px; margin:0 auto; padding:16px 20px 0; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.brand{ display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; }
.brand-mark{ width:30px; height:30px; }
.brand-name{ font-weight:800; letter-spacing:.08em; font-size:17px; }
.brand-kana{ font-size:12px; color:var(--sub); letter-spacing:.1em; }
.mast-link{ color:var(--accent-ink); background:var(--accent); font-size:13px; font-weight:700; text-decoration:none; border-radius:99px; padding:5px 16px; }

.wrap{ max-width:960px; margin:0 auto; padding:0 20px; }
.hero{ padding:44px 0 30px; }
.kicker{ margin:0 0 14px; display:flex; align-items:center; gap:10px; color:var(--sub); font-size:13px; letter-spacing:.06em; }
.kicker .num{ background:#fff; color:#16181b; border:3px solid var(--pa); border-radius:8px; padding:0 7px; font-weight:800; font-size:13px; letter-spacing:.02em; }
.hero h1{ margin:0; font-size:clamp(26px, 4.6vw, 42px); line-height:1.35; letter-spacing:.01em; text-wrap:balance; }
.br-sp{ display:none; }
.lede{ margin:18px 0 0; color:var(--sub); max-width:44em; }
.facts{ list-style:none; margin:26px 0 0; padding:0; display:grid; grid-template-columns:repeat(4, 1fr); border:1px solid var(--rule); border-radius:12px; overflow:hidden; }
.facts li{ padding:12px 14px; display:flex; flex-direction:column; }
.facts li + li{ border-left:1px solid var(--rule); }
.facts b{ font-size:22px; line-height:1.3; font-variant-numeric:tabular-nums; }
.facts span{ font-size:12px; color:var(--sub); }
.cta{ margin:26px 0 0; display:flex; flex-wrap:wrap; gap:10px; }
.btn{ display:inline-flex; align-items:center; min-height:46px; padding:0 24px; border-radius:10px; background:var(--accent); color:var(--accent-ink); font-weight:700; text-decoration:none; }
.btn.ghost{ background:transparent; color:var(--ink); border:1px solid var(--rule); }
.btn:hover{ filter:brightness(1.06); }

.toc{ display:flex; flex-wrap:wrap; gap:8px; padding:16px 0 6px; border-top:1px solid var(--rule); }
.toc a{ color:var(--sub); text-decoration:none; font-size:13px; border:1px solid var(--rule); border-radius:99px; padding:4px 14px; }
.toc a:hover{ color:var(--ink); border-color:var(--sub); }

section{ padding:44px 0 8px; scroll-margin-top:16px; }
section h2{ margin:0 0 18px; font-size:26px; line-height:1.4; }
section h3{ font-size:18px; margin:28px 0 8px; }
.lead{ color:var(--sub); margin:-6px 0 20px; }
p{ margin:0 0 14px; }

.steps{ list-style:none; margin:0; padding:0; counter-reset:st; display:grid; gap:12px; }
.steps li{ counter-increment:st; position:relative; background:var(--panel); border:1px solid var(--rule); border-radius:14px; padding:18px 20px 6px 64px; }
.steps li::before{ content:counter(st); position:absolute; left:18px; top:18px; width:30px; height:30px; border-radius:50%; background:var(--accent); color:var(--accent-ink); font-weight:800; display:grid; place-items:center; }
.steps h3{ margin:2px 0 6px; font-size:17px; }
.steps p{ color:var(--sub); font-size:14.5px; }
.note{ font-size:13.5px !important; border-top:1px dashed var(--rule); padding-top:10px; }
.ctl{ margin:4px 0 14px; display:grid; gap:10px; }
.ctl div{ display:grid; grid-template-columns:9.5em 1fr; gap:12px; }
.ctl dt{ font-weight:700; font-size:14px; }
.ctl dd{ margin:0; color:var(--sub); font-size:14px; }

.table-wrap{ overflow-x:auto; border:1px solid var(--rule); border-radius:12px; }
.vt{ width:100%; border-collapse:collapse; font-size:14px; min-width:620px; }
.vt th, .vt td{ padding:10px 12px; text-align:left; border-bottom:1px solid var(--rule); vertical-align:top; }
.vt thead th{ font-size:12px; color:var(--mute); font-weight:600; background:var(--panel); }
.vt tbody tr:last-child th, .vt tbody tr:last-child td{ border-bottom:0; }
.vt tbody th{ font-weight:700; white-space:nowrap; }
.vt td:nth-child(3), .vt td:nth-child(4){ white-space:nowrap; font-variant-numeric:tabular-nums; }
.vt td:last-child{ color:var(--sub); }
.vt .no{ font-size:11px; font-weight:800; border:1.5px solid currentColor; border-radius:4px; padding:0 4px; }
.vt .pa .no{ color:var(--pa); } .vt .voice .no{ color:var(--voice); } .vt .large .no{ color:var(--large); } .vt .closed .no{ color:var(--closed); }

.tips{ display:grid; gap:12px; grid-template-columns:repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
.tips article{ background:var(--panel); border:1px solid var(--rule); border-radius:14px; padding:18px 20px 6px; }
.tips h3{ margin:0 0 8px; font-size:17px; }
.tips p{ color:var(--sub); font-size:14.5px; }

figure{ margin:8px 0 22px; background:var(--panel); border:1px solid var(--rule); border-radius:14px; padding:16px; }
figure svg{ width:100%; height:auto; }
.ir-fig .ax{ stroke:var(--rule); stroke-width:1.5; }
.ir-fig .d{ fill:var(--accent); }
.ir-fig .e rect{ fill:var(--pa); }
.ir-fig .r{ fill:rgba(160,106,216,.55); }
.ir-fig .bk{ stroke:var(--sub); stroke-width:1.5; fill:none; }
.t-l{ fill:var(--ink); font-size:14px; font-weight:700; font-family:var(--font); }
.t-s, .t-ax{ fill:var(--sub); font-size:12px; font-family:var(--font); }
.spk-fig .ceil{ stroke:var(--rule); stroke-width:3; }
.spk-fig .spk rect{ fill:#fff; }
.spk-fig .ray line{ stroke:var(--accent); stroke-width:2.5; stroke-linecap:round; }
.spk-fig .ray .far{ stroke-opacity:.6; stroke-dasharray:6 5; }
.spk-fig .ray .farther{ stroke-opacity:.35; stroke-dasharray:3 6; }
.spk-fig .you{ fill:var(--accent); stroke:#16181b; stroke-width:3; }

.terms{ display:grid; gap:10px; margin:0 0 10px; }
.terms div{ display:grid; grid-template-columns:7em 1fr; gap:12px; padding:12px 0; border-bottom:1px solid var(--rule); }
.terms dt{ font-weight:700; }
.terms dd{ margin:0; color:var(--sub); font-size:14.5px; }
#how p{ color:#d6d9dc; }

#faq details{ border-bottom:1px solid var(--rule); }
#faq summary{ cursor:pointer; padding:14px 30px 14px 0; font-weight:700; list-style:none; position:relative; }
#faq summary::-webkit-details-marker{ display:none; }
#faq summary::after{ content:"+"; position:absolute; right:4px; top:12px; color:var(--accent); font-size:20px; font-weight:400; line-height:1.2; }
#faq details[open] summary::after{ content:"−"; }
#faq details p{ color:var(--sub); font-size:14.5px; }

.final{ margin:40px 0 0; padding:34px 28px 24px; background:var(--panel); border:1px solid var(--rule); border-top:6px solid var(--accent); border-radius:14px; }
.final h2{ font-size:22px; margin-bottom:8px; }
.final p{ color:var(--sub); }

.site-footer{ max-width:960px; margin:50px auto 0; padding:22px 20px 34px; border-top:1px solid var(--rule); }
.footer-links{ display:flex; flex-wrap:wrap; gap:6px 10px; font-size:12.5px; color:var(--mute); }
.footer-links a{ color:var(--sub); text-decoration:none; }
.footer-links a:hover{ color:var(--ink); text-decoration:underline; }

@media (max-width:620px){
  body{ font-size:15px; }
  .masthead{ padding:12px 16px 0; }
  .wrap{ padding:0 16px; }
  .hero{ padding:30px 0 22px; }
  .br-sp{ display:inline; }
  .facts{ grid-template-columns:repeat(2, 1fr); }
  .facts li:nth-child(3){ border-left:0; }
  .facts li:nth-child(n+3){ border-top:1px solid var(--rule); }
  section h2{ font-size:22px; }
  .steps li{ padding:16px 16px 4px 56px; }
  .steps li::before{ left:14px; top:16px; }
  .ctl div, .terms div{ grid-template-columns:1fr; gap:2px; }
  figure{ padding:10px; }
  .final{ padding:26px 18px 18px; }
}
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

/* ライセンスページ */
.license section{ padding:20px 22px 8px; margin-top:14px; background:var(--panel); border:1px solid var(--rule); border-radius:14px; }
.license section h2{ font-size:17px; margin-bottom:8px; }
.license section p{ color:var(--sub); font-size:14.5px; }
.license .meta{ font-size:12px; color:var(--mute); }
.license .hero{ padding-bottom:6px; }