/* サイト共通の意匠。public/terms.html の <style> から逐語で写したもの。
   既存ページはこれをインラインで持っているので、意匠を変えるときは両方を直す */
:root{
  --paper:#FFFFF6; --canvas:#EEEEE3; --sunken:#E1E1D8;
  --line-soft:#CDCDCB; --line:#B2B6B5; --line-strong:#818987;
  --muted:#606B69; --display:#586461; --body:#41504D; --strong:#2A3835; --ink:#16221F;
  --action:#BFC7C4; --action-hover:#AFB9B6;
  --film:#3E4442; /* 本編の地。実測値。動画の縁がページに溶けるようにここだけ使う */
  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --serif-jp:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0; background:var(--canvas); color:var(--body); font-family:var(--sans);
  font-size:16px; line-height:1.75; font-weight:400; -webkit-font-smoothing:antialiased; overflow-x:hidden}
img,video{max-width:100%}
a{color:inherit}
.wrap{max-width:1000px; margin:0 auto; padding:0 32px; position:relative; z-index:1}
.jp,.jp-h1,.sub-jp,.lead-jp{word-break:auto-phrase; line-break:strict}
.jp{font-size:14px; color:var(--muted); line-height:1.9}
h1,h2,h3{text-wrap:balance; margin:0}
h1{font-family:var(--serif); font-weight:400; font-size:60px; line-height:1.12; letter-spacing:-.005em; color:var(--display)}
h2{font-family:var(--serif); font-weight:400; font-size:38px; line-height:1.28; color:var(--display)}
h3{font-family:var(--serif); font-weight:500; font-size:23px; line-height:1.35; color:var(--display)}
.ext{font-size:.82em; margin-left:.4em; opacity:.75; vertical-align:.04em}

/* ---------- header ---------- */
header.top{display:flex; align-items:center; justify-content:space-between; gap:24px;
  max-width:1000px; margin:0 auto; padding:26px 32px; position:relative; z-index:5}
header.top .logo{height:38px; width:auto; display:block; color:var(--display)}
a.home{display:block; color:inherit; text-decoration:none; line-height:0}
a.home:focus-visible{outline:2px solid var(--strong); outline-offset:4px; border-radius:4px}
header.top nav{display:flex; align-items:center; gap:26px}
header.top nav a{font-size:14px; color:var(--strong); text-decoration:none}
header.top nav a:hover{text-decoration:underline; text-underline-offset:4px}
.top-cta{font-size:13.5px !important; color:var(--strong); text-decoration:none !important;
  border:1px solid var(--line-strong); border-radius:999px; padding:8px 18px; transition:border-color .2s, background .2s}
.top-cta:hover{border-color:var(--strong); background:var(--paper)}

/* ---------- buttons ---------- */
.ctas{display:flex; gap:12px; flex-wrap:wrap; margin:40px 0 0}
.btn{display:inline-flex; align-items:center; gap:.55em; text-decoration:none; font:inherit; font-size:15px; line-height:1.2;
  padding:14px 28px; border:1px solid transparent; border-radius:999px; cursor:pointer;
  transition:transform .15s, background .2s, border-color .2s, color .2s}
.btn:hover{transform:translateY(-1px)}
.btn:focus-visible,.top-cta:focus-visible,header.top nav a:focus-visible{outline:2px solid var(--strong); outline-offset:3px}
.btn-p{background:var(--action); color:var(--strong); border-color:var(--line-strong)}
.btn-p:hover{background:var(--action-hover); border-color:var(--strong)}
.btn-s{background:transparent; color:var(--strong); border-color:var(--line-strong)}
.btn-s:hover{border-color:var(--strong)}
.btn .dur{font-family:var(--mono); font-size:12.5px; color:var(--muted); letter-spacing:.02em}
.btn .play{width:.7em; height:.8em; display:inline-block; background:currentColor;
  clip-path:polygon(0 0,100% 50%,0 100%)}
/* 暗い面の上のボタン */
.on-dark .btn-p{background:var(--paper); color:var(--strong); border-color:var(--paper)}
.on-dark .btn-p:hover{background:var(--canvas); border-color:var(--canvas)}
.on-dark .btn-s{color:var(--paper); border-color:rgba(255,255,246,.6)}
.on-dark .btn-s:hover{border-color:var(--paper); background:rgba(255,255,246,.08)}
.on-dark .btn .dur{color:rgba(255,255,246,.7)}
.on-dark .btn:focus-visible{outline-color:var(--paper)}

/* ---------- hero (shared text) ---------- */
.hero{position:relative; overflow:hidden}
.hero .jp-h1{margin:18px 0 0; font-size:16px; color:var(--muted); letter-spacing:.03em}
.hero p.sub{margin:28px 0 0; max-width:58ch; font-size:16.5px; color:var(--body)}
.hero p.sub-jp{margin:12px 0 0; max-width:56ch; font-size:14px; color:var(--muted); line-height:1.9}

/* ---------- sections ---------- */
section.sec{position:relative; overflow:hidden; padding:96px 0; border-top:1px solid var(--line-soft)}
.sec-label{display:inline-flex; align-items:flex-end; gap:6px; margin:0 0 22px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; color:var(--muted)}
/* 鳥はラベル文字の右端に止まる。足元率 0.770 × 40px = 30.8px が足の位置なので、
   ラベルの下端に足が来るよう 9px 沈める */
.sec-label .bird{width:40px; height:40px; margin-bottom:-9px; color:var(--line-strong); flex:none}
.sec-label .bird svg{display:block; width:100%; height:100%}
.h2-jp{margin:12px 0 0}
.lead{margin:26px 0 0; max-width:62ch; font-size:16.5px; color:var(--body)}
.lead-jp{margin:10px 0 0; max-width:62ch; font-size:14px; color:var(--muted); line-height:1.9}

/* 背景の大きい六角形。パララックスはこれだけが担当する（brand.md） */
.bghex{position:absolute; pointer-events:none; z-index:0; will-change:transform; color:var(--line)}
.bghex svg{width:100%; height:100%; display:block}
.bg-a{width:1120px; height:1120px; right:-460px; top:-300px; opacity:.28}
.bg-b{width:760px; height:760px; left:-330px; top:-120px; opacity:.24}
.bg-c{width:520px; height:520px; right:-160px; bottom:-200px; opacity:.22; color:var(--line-strong)}
@media (prefers-reduced-motion:reduce){.bghex{transform:none !important}}

/* ---------- why: before / after ---------- */
.ba{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:44px}
.ba figure{margin:0}
.ba img{display:block; width:100%; height:auto; border-radius:12px; border:1px solid var(--line-soft); background:var(--paper)}
.ba figcaption{margin:14px 4px 0}
.ba figcaption .en{display:block; font-size:14.5px; color:var(--strong); line-height:1.6}
.ba figcaption .jp{display:block; font-size:12.5px; margin-top:4px}

/* ---------- what you get ---------- */
/* 本編に出る Subako の箱。ロゴ、5つの六角形。名前は六角形の下に置き、中には線アイコンだけ */
.box{margin:44px 0 0; background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:38px 40px 34px;
  box-shadow:0 24px 60px -44px rgba(22,34,31,.35)}
.box .box-logo{height:34px; width:auto; display:block; color:var(--display); margin:0 auto 30px}
.hxrow{display:flex; justify-content:center; gap:26px; flex-wrap:wrap}
.hxw{display:flex; flex-direction:column; align-items:center; gap:10px; width:104px}
.hxm{position:relative; width:96px; height:96px; color:var(--line-strong); filter:drop-shadow(0 8px 14px rgba(22,34,31,.14))}
.hxm svg{width:100%; height:100%; display:block}
.hxm .ic{position:absolute; inset:0; display:grid; place-items:center; color:var(--strong)}
.hxm .ic svg{width:28px; height:28px}
.hxw code{font:400 13px/1 var(--mono); color:var(--strong); letter-spacing:.02em}
.dl{display:grid; grid-template-columns:repeat(5,1fr); gap:0 26px; margin:36px 0 0; border-top:1px solid var(--line-soft)}
.dl > div{padding:22px 0 0}
.dl code{display:block; font-family:var(--mono); font-size:14px; color:var(--strong)}
.dl .name{display:block; font-size:14px; color:var(--display); margin:2px 0 12px}
.dl .en{display:block; font-size:14px; color:var(--body); line-height:1.65}
.dl .jp{display:block; font-size:12.5px; margin-top:8px}

/* ---------- one sdk: code ---------- */
.code-wrap{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:40px 0 0}
.code{position:relative; min-width:0; max-width:100%; background:var(--ink); color:#E6E8E0; border-radius:12px; padding:38px 26px 24px; overflow:auto}
.code pre{margin:0; font:400 12.8px/1.7 var(--mono); tab-size:2; white-space:pre}
.code .c{color:#8C9491}
.code .k{color:#C9CFC6}
.code .s{color:#DDE3D2}
.code .lbl{position:absolute; top:12px; right:16px; font:400 11px/1 var(--mono); letter-spacing:.12em; color:#8C9491}
.sdk-points{display:grid; grid-template-columns:repeat(3,1fr); gap:0 26px; margin:34px 0 0; border-top:1px solid var(--line-soft)}
.sdk-points > div{padding:20px 0 0}
.sdk-points .en{display:block; font-size:14.5px; color:var(--strong); line-height:1.6}
.sdk-points .jp{display:block; font-size:12.5px; margin-top:6px}
.sdk-meta{margin:34px 0 0; font-size:15px; color:var(--body)}
.sdk-meta a{color:var(--strong); text-underline-offset:4px}
.sdk-meta .jp{display:block; margin-top:4px; font-size:13px}

/* ---------- security ---------- */
.four{display:grid; grid-template-columns:1fr 1fr; gap:0 40px; margin:40px 0 0}
.four > div{padding:26px 0 30px; border-top:1px solid var(--line-soft)}
.four h3{font-size:22px}
.four .en{margin:12px 0 0; font-size:15px; color:var(--body); line-height:1.7}
.four .jp{margin:8px 0 0; font-size:13px}

/* ---------- any model ---------- */
.chips{display:flex; flex-wrap:wrap; gap:10px; margin:36px 0 0}
.chips span{display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:10px; background:var(--sunken);
  font:400 13.5px/1 var(--mono); color:var(--strong)}
.chips span i{width:6px; height:6px; border-radius:50%; background:var(--line-strong)}
.std{display:grid; grid-template-columns:repeat(4,1fr); gap:0 24px; margin:38px 0 0; border-top:1px solid var(--line-soft)}
.std > div{padding:20px 0 0}
.std code{display:block; font-family:var(--mono); font-size:14px; color:var(--strong)}
.std .role{display:block; font-size:13px; color:var(--muted); margin:2px 0 10px}
.std .en{display:block; font-size:14px; color:var(--body); line-height:1.65}
.std .jp{display:block; font-size:12.5px; margin-top:6px}

/* ---------- deployment ---------- */
.forms{display:grid; grid-template-columns:repeat(3,1fr); gap:0 28px; margin:40px 0 0}
.forms > div{padding:26px 0 0; border-top:1px solid var(--line-soft)}
.forms .en{margin:12px 0 0; font-size:15px; color:var(--body); line-height:1.7}
.forms .jp{margin:8px 0 0; font-size:13px}

/* ---------- closing ---------- */
.closing{padding:110px 0 100px; text-align:center; position:relative; overflow:hidden; border-top:1px solid var(--line-soft)}
.roost{position:relative; display:block; width:176px; height:176px; margin:0 auto; color:var(--line-strong); text-decoration:none;
  transition:color .25s}
.roost:hover{color:var(--muted)}
.roost:focus-visible{outline:2px solid var(--strong); outline-offset:6px; border-radius:12px}
.roost svg{width:100%; height:100%; display:block}
.roost .bird{position:absolute; top:8px; left:50%; transform:translateX(-50%); width:41px; height:41px; will-change:transform;
  transition:transform .45s cubic-bezier(.22,.61,.36,1)}
.closing h2{margin:26px auto 0; max-width:20ch}
.closing .jp{margin:12px 0 0}
.closing .ctas{justify-content:center}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line-soft); padding:40px 0 64px}
.foot{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:18px}
.foot .logo{height:34px; width:auto; display:block; color:var(--display)}
.foot nav{display:flex; gap:22px; flex-wrap:wrap}
.foot nav a{font-size:13.5px; color:var(--body); text-decoration:none}
.foot nav a:hover{text-decoration:underline; text-underline-offset:4px}
.foot p{margin:0; font-size:12.5px; color:var(--muted); font-family:var(--mono); letter-spacing:.03em; width:100%}

/* ---------- film player (inline) ---------- */
.player{position:relative; aspect-ratio:16/9; border-radius:14px; overflow:hidden; background:var(--film);
  border:1px solid var(--line); box-shadow:0 30px 80px -40px rgba(22,34,31,.45)}
.player img,.player iframe,.player video{position:absolute; inset:0; width:100%; height:100%; display:block; border:0; background:var(--film)}
.player img{object-fit:cover}
.player .go{position:absolute; inset:0; width:100%; height:100%; border:0; background:transparent; cursor:pointer;
  display:flex; align-items:flex-end; justify-content:flex-start; padding:22px}
.player .go > span{display:inline-flex; align-items:center; gap:14px; padding:12px 22px 12px 14px; border-radius:999px;
  background:var(--paper); color:var(--strong); font:400 15px/1 var(--sans); border:1px solid var(--paper);
  transition:background .2s, transform .15s}
.player .go:hover span{background:var(--canvas); transform:translateY(-1px)}
.player .go:focus-visible{outline:2px solid var(--paper); outline-offset:-6px}
.player .go .disc{width:38px; height:38px; border-radius:50%; background:var(--strong); display:grid; place-items:center; color:var(--paper)}
.player .go .disc i{width:11px; height:13px; background:currentColor; clip-path:polygon(0 0,100% 50%,0 100%); margin-left:3px}
.player .go .dur{font-family:var(--mono); font-size:12.5px; color:var(--muted)}
.player-cap{margin:14px 4px 0; font:400 12.5px/1.6 var(--mono); color:var(--muted); letter-spacing:.02em}

/* ---------- film lightbox ---------- */
dialog.film{border:0; padding:0; background:transparent; width:min(1120px, 94vw); max-width:none; overflow:visible}
dialog.film::backdrop{background:rgba(22,34,31,.88)}
dialog.film .frame{position:relative; aspect-ratio:16/9; border-radius:12px; overflow:hidden; background:var(--film)}
dialog.film iframe,dialog.film video{position:absolute; inset:0; width:100%; height:100%; border:0; background:var(--film)}
dialog.film .close{position:absolute; right:0; top:-52px; font:400 13.5px/1 var(--sans); color:var(--paper);
  background:transparent; border:1px solid rgba(255,255,246,.6); border-radius:999px; padding:10px 18px; cursor:pointer}
dialog.film .close:hover{border-color:var(--paper); background:rgba(255,255,246,.08)}
dialog.film .close:focus-visible{outline:2px solid var(--paper); outline-offset:3px}
body.has-dialog{overflow:hidden}

/* 図版だけ本文カラム（1000px）の外へ出す */
.wide{width:min(1200px, calc(100vw - 64px)); margin-left:calc(50% - min(600px, 50vw - 32px))}
/* 章の目次（右端・1320px 以上で表示）と版面が重ならないよう、1560px までは右に余白を残す */
@media (min-width:1320px) and (max-width:1640px){.wide{width:calc(100vw - 340px); margin-left:calc(50% - (50vw - 170px))}}

/* ---------- 言語切替 ----------
   既定は英語（/）。html[data-lang="ja"]（/ja）では、見出し・ラベル・ボタンは英語のまま、
   説明の本文だけを日本語にする（.en の本文を消し、.jp を主の文字に昇格させる） */
.jp-only,.ja-link{display:none !important}   /* .dl .name / .std .role の display:block に負けないよう !important */
/* 英語ページ（/）は英語だけ。日本語の添え書きは出さない（オーナー決定 2026-09-09） */
[data-lang="en"] .jp,[data-lang="en"] .jp-h1,[data-lang="en"] .sub-jp,[data-lang="en"] .lead-jp,[data-lang="en"] .h2-jp{display:none !important}
.lang{font-family:var(--mono) !important; font-size:12.5px !important; letter-spacing:.06em}
[data-lang="ja"] .en{display:none !important}
[data-lang="ja"] header .en,[data-lang="ja"] footer .en,[data-lang="ja"] .btn .en,[data-lang="ja"] .sec-label .en,
[data-lang="ja"] .name.en,[data-lang="ja"] .role.en,[data-lang="ja"] .sdk-meta a .en,[data-lang="ja"] .player .en{display:inline !important}
[data-lang="ja"] h2.en,[data-lang="ja"] h3.en{display:block !important}
[data-lang="ja"] .ja-link{display:inline !important}
[data-lang="ja"] .en-link{display:none}
[data-lang="ja"] .lead-jp{margin-top:26px; font-size:16px; line-height:1.95; color:var(--body)}
[data-lang="ja"] .hero p.sub-jp{margin-top:28px; font-size:16px; line-height:1.95; color:var(--body)}
[data-lang="ja"] .ba figcaption .jp{font-size:14.5px; color:var(--strong); margin-top:0; line-height:1.7}
[data-lang="ja"] .dl .jp{font-size:14px; color:var(--body); margin-top:0; line-height:1.85}
[data-lang="ja"] .sdk-points .jp{font-size:14.5px; color:var(--strong); margin-top:0; line-height:1.8}
[data-lang="ja"] .sdk-meta .jp-only{display:inline !important; font-size:15px; color:var(--body)}
[data-lang="ja"] .four .jp,[data-lang="ja"] .forms .jp{font-size:15px; color:var(--body); margin-top:12px; line-height:1.9}
[data-lang="ja"] .std .jp{font-size:14px; color:var(--body); margin-top:0; line-height:1.85}
[data-lang="ja"] .player-cap .jp-only{display:inline !important}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .dl{grid-template-columns:1fr 1fr 1fr}
  .std{grid-template-columns:1fr 1fr}
  .code-wrap{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:820px){
  h1{font-size:44px} h2{font-size:29px} h3{font-size:20px}
  .wrap,header.top{padding-left:22px; padding-right:22px}
  header.top{padding-top:20px; padding-bottom:20px}
  header.top nav a:not(.top-cta):not(.lang){display:none}
  section.sec{padding:66px 0}
  .wide{width:auto; margin-left:0}
  .ba{grid-template-columns:1fr}
  .hxrow{gap:14px}
  .hxw{width:88px}
  .hxm{width:80px; height:80px}
  .hxm .ic svg{width:24px; height:24px}
  .box{padding:26px 18px 22px}
  .box .box-logo{height:28px; margin-bottom:22px}
  .dl{grid-template-columns:1fr 1fr}
  .sdk-points{grid-template-columns:1fr}
  .four{grid-template-columns:1fr}
  .forms{grid-template-columns:1fr}
  .bg-a{width:620px; height:620px; right:-340px; top:-160px}
  .bg-b{width:520px; height:520px; left:-290px; top:-70px}
  .bg-c{display:none}
  .roost{width:132px; height:132px}
  .roost .bird{top:6px; width:31px; height:31px}
  .closing{padding:80px 0 72px}
}
@media (max-width:480px){
  h1{font-size:36px}
  .player .go{padding:14px}
  .hero p.sub{font-size:15.5px}
  .ctas{gap:10px}
  .ctas .btn{width:100%; justify-content:center}
  .dl{grid-template-columns:1fr}
  .std{grid-template-columns:1fr}
  .hxw{width:84px}
  .hxw code{font-size:12px}
  dialog.film .close{top:-46px}
}

.doc{padding:40px 0 110px}
.doc .wrap{max-width:820px}
.doc h1{font-size:40px; margin:0}
.doc .doc-en{margin:10px 0 0; font-family:var(--mono); font-size:12px; letter-spacing:.12em; color:var(--muted)}
.doc .doc-body{margin:44px 0 0; border-top:1px solid var(--line-soft); padding-top:34px}
.doc .doc-body h2{font-size:24px; margin:44px 0 14px}
.doc .doc-body h3{font-family:var(--sans); font-weight:500; font-size:16px; color:var(--strong); margin:30px 0 8px}
.doc .doc-body p{margin:0 0 12px; font-size:15px; line-height:1.9; color:var(--body); word-break:auto-phrase; line-break:strict}
.doc .doc-body h2:first-child,.doc .doc-body h3:first-child{margin-top:0}
.doc .doc-body p.cl{margin:0 0 12px 2.6em; text-indent:-2.6em}
.doc .doc-body p.it{margin:0 0 10px 4.4em; text-indent:-1.8em}
.doc .doc-body .no{display:inline-block; min-width:1.8em; margin-right:.8em; text-indent:0; font-family:var(--mono); font-size:13px; color:var(--muted)}
.doc .doc-body p.cl .no{min-width:2.6em; margin-right:0}
.doc .doc-body table{width:100%; border-collapse:collapse; margin:8px 0 18px; font-size:14px}
.doc .doc-body td{padding:10px 12px; border-top:1px solid var(--line-soft); vertical-align:top; line-height:1.7}
.doc .doc-body tr:last-child td{border-bottom:1px solid var(--line-soft)}
.doc .doc-body td:last-child{color:var(--muted); white-space:nowrap}
@media (max-width:820px){.doc .doc-body td:last-child{white-space:normal}}
@media (max-width:820px){.doc h1{font-size:30px} .doc .doc-body h2{font-size:21px}}


/* ---------- blog ---------- */
.doc .doc-meta{margin:14px 0 0; font-family:var(--mono); font-size:12.5px; letter-spacing:.06em; color:var(--muted)}
.doc .doc-body ul,.doc .doc-body ol{margin:0 0 14px; padding-left:1.5em}
.doc .doc-body li{font-size:15px; line-height:1.9; margin:0 0 6px}
.doc .doc-body a{color:var(--strong); text-underline-offset:3px}
.doc .doc-body blockquote{margin:18px 0; padding:2px 0 2px 18px; border-left:2px solid var(--line-soft); color:var(--muted)}
.doc .doc-body hr{border:0; border-top:1px solid var(--line-soft); margin:34px 0}
/* height:auto は必須。ビルドが width/height を書くので、これがないと縮むとき歪む */
.doc .doc-body img{display:block; height:auto; margin:24px 0}
/* 図版。![alt](x.png "キャプション") の引用符の中が figcaption になる */
.doc .doc-body figure{margin:30px 0}
.doc .doc-body figure img{margin:0}
.doc .doc-body figcaption{margin:12px 0 0; font-size:13px; line-height:1.85; color:var(--muted);
  word-break:auto-phrase; line-break:strict}
.doc .doc-body figcaption a{color:var(--strong); text-underline-offset:3px}
/* 利用規約の表は最終列が日付なので nowrap だが、記事の表には文が入る。
   同じ詞列を後ろで上書きする——逐語で写した 3-300 行には手を入れない */
.doc .doc-body td:last-child{white-space:normal}
.doc .doc-body th,.doc .doc-body td{word-break:auto-phrase; line-break:strict}
.doc .doc-body th{text-align:left; font-weight:500; color:var(--strong); padding:0 12px 10px}

/* 動画。ランディングの .player と同じ 16:9 の器だが、本文では枠と影を落とす */
.doc .doc-body .video{position:relative; aspect-ratio:16/9; background:var(--film)}
.doc .doc-body .video iframe{position:absolute; inset:0; width:100%; height:100%; display:block; border:0}
.doc .doc-body code{font-family:var(--mono); font-size:13.5px; background:var(--sunken); padding:.15em .4em; border-radius:3px}
.doc .doc-body pre{margin:18px 0; padding:18px 20px; border:1px solid var(--line-soft); border-radius:4px; overflow-x:auto}
.doc .doc-body pre code{background:none; padding:0; font-size:13px; line-height:1.7}
/* shiki は pre に背景色をインラインで書くので、紙の色に寄せる */
.doc .doc-body .shiki{background:var(--sunken) !important}

/* 記事の前後送り */
.doc .doc-nav{display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap;
  margin:56px 0 0; padding-top:26px; border-top:1px solid var(--line-soft)}
.doc .doc-nav a{font-size:14px; color:var(--strong); text-decoration:none; max-width:48%}
.doc .doc-nav a:hover{text-decoration:underline; text-underline-offset:4px}
.doc .doc-nav .dir{display:block; font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; color:var(--muted); margin-bottom:6px}
.doc .doc-nav .next{text-align:right; margin-left:auto}

/* 一覧 */
.doc .list{margin:44px 0 0; border-top:1px solid var(--line-soft)}
.doc .list a{display:block; padding:26px 0; border-bottom:1px solid var(--line-soft); text-decoration:none; color:inherit}
.doc .list a:hover h2{text-decoration:underline; text-underline-offset:5px}
.doc .list time{font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:var(--muted)}
.doc .list h2{font-size:26px; margin:8px 0 0; color:var(--display)}
.doc .list p{margin:8px 0 0; font-size:14.5px; line-height:1.85; color:var(--body); word-break:auto-phrase; line-break:strict}
.doc .list .empty{padding:26px 0; font-size:15px; color:var(--muted)}
@media (max-width:820px){.doc .list h2{font-size:21px} .doc .doc-nav a{max-width:100%}}