/* doc.css — プライバシーポリシー / サポートの共通スタイル
   LP（index.html）とトークンを揃えてあるが、こちらは読み物なので
   ヒーローや仕掛けは持たない。見出しの階層と行間だけで組む。 */

:root{
  --ink:#08090A;
  --surface:#16181D;
  --raised:#1F232A;
  --line:rgba(255,255,255,.10);
  --line-strong:rgba(255,255,255,.20);
  --fg:#F7F8FA;
  --fg-2:#C2C8D2;
  --fg-3:#8D94A1;
  --lime:#B8FF3D;
  --on-lime:#10130A;
  --sans:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",Meiryo,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --pad:clamp(20px,5vw,40px);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink);color:var(--fg);
  font-family:var(--sans);font-size:17px;line-height:1.95;letter-spacing:.008em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:var(--lime)}
a:hover{color:#C9FF63}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:3px}

.wrap{max-width:720px;margin:0 auto;padding-inline:var(--pad)}

/* ── ヘッダー ────────────────────────────────────── */
.top{border-bottom:1px solid var(--line)}
.top-in{
  max-width:720px;margin:0 auto;padding-inline:var(--pad);padding-block:16px;
  display:flex;align-items:center;gap:16px;
}
.mark{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--fg)}
.mark svg{width:20px;height:20px;flex:none}
.mark b{font-size:14px;font-weight:800;letter-spacing:.16em}
.mark b i{font-style:normal;color:var(--lime)}
.top .back{margin-left:auto;font-size:14px;text-decoration:none;color:var(--fg-2)}
.top .back:hover{color:var(--fg)}

/* ── 本文 ────────────────────────────────────────── */
main{padding-block:clamp(44px,7vw,76px) clamp(56px,8vw,96px)}
h1{margin:0 0 12px;font-size:clamp(28px,5vw,40px);line-height:1.35;letter-spacing:-.02em;font-weight:800}
.updated{margin:0 0 clamp(32px,5vw,48px);font-size:14px;color:var(--fg-3)}

h2{
  margin:clamp(40px,5vw,56px) 0 16px;
  font-size:clamp(19px,2.4vw,22px);line-height:1.55;font-weight:800;letter-spacing:-.01em;
  padding-top:clamp(24px,3vw,32px);border-top:1px solid var(--line);
}
h2:first-of-type{border-top:0;padding-top:0;margin-top:0}
h3{margin:28px 0 10px;font-size:17px;font-weight:700}
p{margin:0 0 18px;color:var(--fg-2)}
p.lead{color:var(--fg);font-size:18.5px}
strong{color:var(--fg);font-weight:700}

ul,ol{margin:0 0 18px;padding-left:1.3em;color:var(--fg-2)}
li{margin-bottom:9px}
li::marker{color:var(--fg-3)}

/* 一番言いたいこと。枠で囲わず、罫線1本で示す */
.key{
  margin:0 0 clamp(32px,4vw,44px);padding:20px 0 20px 22px;
  border-left:2px solid var(--lime);
}
.key p{margin:0;color:var(--fg);font-size:18px;font-weight:700;line-height:1.85}
.key p + p{margin-top:12px;font-weight:400;font-size:16.5px;color:var(--fg-2)}

/* 権限の表。横に溢れるときはこの中だけスクロールさせる */
.table-scroll{overflow-x:auto;margin:0 0 20px}
table{border-collapse:collapse;width:100%;min-width:440px;font-size:15.5px}
th,td{text-align:left;padding:13px 14px;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--fg);font-weight:700;border-bottom-color:var(--line-strong);white-space:nowrap}
td{color:var(--fg-2)}
td:first-child{color:var(--fg);font-weight:700;white-space:nowrap}

/* 未検証・進行中のことわり */
.note{
  margin:0 0 18px;padding:14px 16px;border:1px solid var(--line);border-radius:8px;
  background:var(--surface);color:var(--fg-2);font-size:15.5px;line-height:1.85;
}
.note b{color:var(--fg)}

/* 公開前に差し替える箇所。事故で出ても一目で分かるようにする */
.todo{
  display:inline-block;padding:2px 10px;border-radius:6px;
  border:1px dashed var(--lime);color:var(--lime);
  font-family:var(--mono);font-size:14px;
}
.todo::before{content:"要差し替え: "}

footer{border-top:1px solid var(--line);padding-block:32px 56px}
.foot{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;font-size:14px}
.foot a{color:var(--fg-2);text-decoration:none}
.foot a:hover{color:var(--fg)}
.foot .meta{margin-left:auto;color:var(--fg-3);font-size:13px}
@media(max-width:520px){.foot .meta{margin-left:0;width:100%}}