/*! Veriquest — legal pages.
    Shared by /legal/privacy/, /legal/apps/privacy/, /legal/logica/privacy/ and
    the /legal/terms/* pages. These documents are read, not browsed: one column,
    generous leading, and no canvas layer at all. A legal notice should look
    like a legal notice, and two of these are linked from app store listings,
    so they have to stay legible on a phone with no JavaScript.

    Depends on vq.css for tokens and for the nav/footer chrome. */

:root{
  /* 本文の列の幅：PC の 16px の字で1行およそ53字（2026-10-16。ユーザー「この幅で折り返す必要がある？」
     →609px＝約38字にしたあと「横幅がまだ狭い」）。大手のプライバシーポリシーの本文の幅を測った値
     （SmartHR 776px・Stripe 810px・サイボウズ 860px・freee 1,068px。1行 45〜67字）の中ほど。
     表・目次・冒頭の文も、この右端にそろえる */
  --col:860px;
  --acc:#8FA3BF;
  --acc-line:rgba(143,163,191,.42);
  --paper:#C8CFDA;          /* body copy: calmer than --ink-mid at this length */
}

/* ── Masthead ──────────────────────────────────────────────────────── */
.mast{
  padding:clamp(36px,4.4vh,56px) var(--pad) clamp(22px,2.6vh,32px);
  border-bottom:1px solid var(--line);
}
.crumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 24px;
  font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-dim);
}
.crumb a{color:var(--ink-dim);transition:color .2s}
.crumb a:hover{color:var(--ink)}
.crumb span{color:var(--acc)}
.mast h1{
  margin:0 0 16px;
  font-family:'Schibsted Grotesk','Zen Kaku Gothic New',sans-serif;
  font-weight:700;font-size:clamp(26px,3.8vw,46px);line-height:1.25;
  letter-spacing:-.022em;color:var(--ink);line-break:strict;
}
.mast h1 small{display:block;margin-top:10px;font-size:.44em;font-weight:500;
  letter-spacing:0;color:var(--ink-dim)}
.mast p{margin:0;max-width:var(--col);font-size:clamp(14px,1.45vw,16px);
  line-height:1.95;color:var(--paper)}
.mast .dates{
  margin:clamp(22px,3vh,32px) 0 0;padding:0;list-style:none;
  display:flex;flex-wrap:wrap;gap:8px 24px;
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-dim);
}

/* Scope banner. Most arrivals on the app policies come from a store listing
   looking for a specific title, so say up front which document this is. */
.scope{
  margin:clamp(24px,3vh,34px) 0 0;max-width:var(--col);padding:18px 22px;
  border:1px solid var(--line);border-left:2px solid var(--acc-line);
  border-radius:0 12px 12px 0;background:rgba(255,255,255,.025);
  font-size:13.5px;line-height:1.95;color:var(--ink-mid);
}
.scope a{color:var(--acc);border-bottom:1px solid var(--acc-line)}
.scope a:hover{border-bottom-color:var(--acc)}
.scope ul{margin:.7em 0 0;padding:0;list-style:none}
.scope li{position:relative;padding-left:18px;margin-bottom:.35em}
.scope li::before{content:"";position:absolute;left:0;top:.92em;width:7px;height:1px;background:var(--acc)}

/* ── Contents ──────────────────────────────────────────────────────── */
.toc{padding:clamp(20px,2.6vw,32px) var(--pad);border-bottom:1px solid var(--line)}
.toc ol{margin:0;padding:0;list-style:none;max-width:var(--col);counter-reset:t;column-gap:44px}
.toc li{counter-increment:t;border-bottom:1px solid rgba(255,255,255,.055)}
.toc a{display:flex;align-items:baseline;gap:14px;padding:8px 2px;
  font-size:14px;line-height:1.6;color:var(--ink-mid);transition:color .2s}
.toc a::before{content:counter(t);flex:none;min-width:1.4em;
  font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--acc)}
.toc a:hover{color:var(--ink)}
@media (min-width:760px){.toc ol{columns:2}.toc li{break-inside:avoid}}

/* ── Clauses ───────────────────────────────────────────────────────── */
.doc{padding:clamp(36px,4vw,56px) var(--pad) 0}
.doc:last-of-type{padding-bottom:clamp(44px,5vw,72px)}
/* ページ内リンクで着いた見出しが、固定のヘッダー（下端は 375 幅で 89px、1440 幅で 58px）に隠れないようにする */
.doc{scroll-margin-top:52px}
.doc h3[id]{scroll-margin-top:104px}
.doc h2{
  margin:0 0 clamp(14px,1.6vw,20px);
  font-family:'Schibsted Grotesk','Zen Kaku Gothic New',sans-serif;
  font-weight:700;font-size:clamp(18px,2.1vw,25px);line-height:1.45;
  letter-spacing:-.014em;color:var(--ink);line-break:strict;
}
.doc h2 .n{margin-right:.7em;font-family:'IBM Plex Mono',monospace;
  font-size:.62em;font-weight:400;letter-spacing:.12em;color:var(--acc)}
.doc h3{margin:1.6em 0 .7em;max-width:var(--col);
  font-size:15px;font-weight:700;line-height:1.7;color:var(--ink);line-break:strict}
.doc h2 + h3{margin-top:0}
.doc p,.doc li{max-width:var(--col);font-size:14.5px;line-height:1.8;color:var(--paper)}
/* 和文だけ字の間を少し詰める（欧文は詰めると読みにくい） */
html[lang="ja"] .doc :is(p,li){letter-spacing:-.02em}
.doc p{margin:0 0 1.1em}
.doc strong{color:var(--ink);font-weight:700}
.doc ul{margin:0 0 1.2em;padding:0;list-style:none;max-width:var(--col)}
.doc ul li{position:relative;margin-bottom:.55em;padding-left:20px}
.doc ul li::before{content:"";position:absolute;left:0;top:.86em;width:7px;height:1px;background:var(--acc)}
.doc ol{margin:0 0 1.2em;padding-left:1.5em;max-width:var(--col)}
.doc ol li{margin-bottom:.55em;padding-left:.2em}
.doc a.inline{color:var(--acc);border-bottom:1px solid var(--acc-line)}
.doc a.inline:hover{border-bottom-color:var(--acc)}
.doc + .doc .shell{border-top:1px solid rgba(255,255,255,.07);padding-top:clamp(36px,4vw,56px)}
.doc + .doc{padding-top:0}

/* Fact tables — who the operator is, what is collected, how long it is kept. */
.tbl{width:100%;max-width:var(--col);border-collapse:collapse;margin:0 0 1.4em;
  font-size:13.5px;line-height:1.8}
.tbl th,.tbl td{text-align:left;vertical-align:top;padding:11px 16px 11px 0;
  border-bottom:1px solid rgba(255,255,255,.08)}
.tbl th{width:11em;font-weight:700;color:var(--ink);font-size:13px;letter-spacing:.01em}
.tbl td{color:var(--paper)}
.tbl thead th{border-bottom-color:rgba(255,255,255,.18);
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-dim);font-weight:400}
.tbl-wrap{overflow-x:auto}
/* 2-1 のフォーム表（必須・任意の2列を持つ）。見出し行の td も見出しの見た目にそろえ、
   スマホでは1フォーム1ブロックに畳む（3列のままだと 375px で語が途中で折れた） */
.tbl--forms thead td{border-bottom-color:rgba(255,255,255,.18);
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-dim)}
.tbl--forms tbody td::before{display:none}
@media (max-width:620px){
  .tbl--forms thead{display:none}
  .tbl--forms tr{display:block;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.08)}
  .tbl--forms th,.tbl--forms td{display:block;width:auto;padding:0;border:0}
  .tbl--forms th{margin-bottom:6px}
  .tbl--forms tbody td{display:flex;gap:12px;padding:2px 0}
  .tbl--forms tbody td::before{display:block;content:attr(data-label);flex:none;width:4.6em;
    font-family:'IBM Plex Mono',monospace;font-size:11px;line-height:2.2;letter-spacing:.06em;color:var(--ink-dim)}
}

/* Facts that cannot exist before registration / domain purchase. Loud on
   purpose: none of these may survive to launch. */
.tbd{
  display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:11px;
  letter-spacing:.12em;color:#F0B429;border:1px dashed rgba(240,180,41,.55);
  border-radius:6px;padding:3px 10px;background:rgba(240,180,41,.07);
}

.colophon{padding:clamp(40px,5vw,68px) var(--pad);border-top:1px solid var(--line)}
.colophon p{max-width:var(--col);margin:0;font-size:12.5px;line-height:1.95;color:var(--ink-dim)}
.colophon a{color:var(--acc);border-bottom:1px solid var(--acc-line)}

/* ── /legal/ index ─────────────────────────────────────────────────── */
.docs{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  max-width:60em}
.docs a{
  display:flex;align-items:center;gap:14px;
  border:1px solid var(--line);border-radius:14px;padding:18px 20px;
  background:rgba(255,255,255,.025);
  transition:border-color .3s,background-color .3s,transform .3s;
}
.docs a:hover{border-color:var(--acc-line);background:rgba(255,255,255,.045);transform:translateY(-3px)}
.docs b{display:block;font-size:14.5px;font-weight:700;line-height:1.5;color:var(--ink)}
.docs i{display:block;font-style:normal;font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;letter-spacing:.1em;color:var(--ink-faint);margin-top:4px}
.docs span.go{margin-left:auto;color:var(--acc);font-size:15px}

/* ── PC：目次を右の列に固定する（2026-10-16。ユーザー「この幅で文を折り返す必要がある？」） ──
   本文の列は約42字のまま左（見出し・ロゴと同じ左端）に置き、そのすぐ隣に目次を立てる（本文と目次のあいだに空きを作らない）。
   読み進めても目次がいつも見え、上にあった目次の帯のぶん縦も縮む。目次の無い /legal/ の索引には効かない。
   左右の外枠はほかのページと同じ（.shell の最大幅と --pad）。1200px 未満とスマホは前のまま（目次は本文の上）。 */
@media (min-width:1200px){
  main:has(> .toc){
    --gut:max(var(--pad), calc((100% - var(--shell)) / 2));
    display:grid;
    grid-template-columns:var(--gut) minmax(0,calc(var(--col) + clamp(32px,3vw,48px))) 300px minmax(var(--gut),1fr);
  }
  main:has(> .toc) > .mast{grid-column:1 / -1;grid-row:1}
  main:has(> .toc) > .doc{grid-column:2;padding-left:0;padding-right:clamp(32px,3vw,48px)}
  main:has(> .toc) > .doc .shell{max-width:var(--col);margin-left:0}
  main:has(> .toc) > .toc{
    grid-column:3;grid-row:2 / span 40;align-self:start;
    position:sticky;top:82px;max-height:calc(100vh - 100px);overflow-y:auto;
    margin-top:clamp(36px,4vw,56px);padding:0 0 0 24px;
    border-bottom:0;border-left:1px solid var(--line);
  }
  main:has(> .toc) > .toc ol{max-width:none;columns:1}
  main:has(> .toc) > .toc li:last-child{border-bottom:0}
  main:has(> .toc) > .toc a{padding:7px 2px;font-size:13px;gap:12px}
}