@charset "utf-8";

/* =====================================================================
   色の定義（色を変えたいときは、ここだけ直せば全ページに反映される）
   ・用途を限定しない名前にしてある（使い道はコメントを参照）
   ・ツール系ページの専用CSS（page-common.css の後に読み込むもの）からも使う
   ===================================================================== */
:root {
  /* ブランド（primary青系） */
  --c-brand-dark: #1a365d;
  /* dark-navy, h3・h4 の文字色, 目次の現在位置 */
  --c-brand: #2b5b84;
  /* muted-dark-blue, h2 の塗り, h5・th の文字色 */
  --c-brand-light: #3182ce;
  /* medium blue, h3 の左線, h4 の下線, フォーカス枠 */
  --c-brand-vivid: #007aff;
  /* vivid-blue, button */

  /* ブランド（secondary薄青系。番号が大きいほど濃い） */
  --c-brand2-1: #f0f4f8;
  /* 一番薄い。h3 の背景, inline-gray, hover */
  --c-brand2-2: #e8f4fc;
  /* th の背景, 左ナビの現在地 */
  --c-brand2-3: #d0e7f5;
  /* 表の罫線, h5 の下線, 上部バーの下線 */

  /* アクセント（オレンジ系） */
  --c-accent-dark: #7a4a00;
  /* dark-brown */
  --c-accent: #f57c00;
  /* orange, mdc-warn-box の左線, ボタン */
  --c-accent-light: #fff3e0;
  /* creamy-orange, mdc-warn-box の背景 */

  /* アクセント2（グリーン系） */
  --c-accent2-dark: #155724;
  /* dark-green */
  --c-accent2: #34c759;
  /* fresh-green */
  --c-accent2-light: #e8f5e9;
  /* honeydew, mdc-info-box bg */

  /* 文字（濃い→薄い順） */
  --c-text: #333333;
  /* main */
  --c-text-sub: #666666;
  /* medium-gray, blockquote の文字色, 補足テキスト */
  --c-text-weak: #999999;
  /* medium-light-gray */

  /* 面・線（薄い→濃い順） */
  --c-bg: #ffffff;
  /* white */
  --c-bg-subtle: #f5f5f5;
  /* mdc-note-box, inline-code の背景 */
  --c-border: #dddddd;
  /* light-gray, blockquote の左線, 区切り線 */

  /* 強調（黄色系）。inline-mark は長文にも使うので、塗りは柔らかめ。
     inline-marker は下半分だけの線なので、塗りより少し濃くして見えやすくする */
  --c-mark: #fff59d;
  --c-marker: #ffe97a;

  /* ブロック同士の間隔（ul/ol の下、画像、表、mdc-* ボックス、blockquote で共通） */
  --space-block: 1.5em;

  /* 派生色（hoverなど）。black を white にすると「少し明るく」に変わる */
  --c-brand-vivid-hover: color-mix(in srgb, var(--c-brand-vivid) 85%, black);
  --c-accent-hover: color-mix(in srgb, var(--c-accent) 85%, black);

  /* フォント。差し替えたいときは、ここだけ直せば全ページに反映される。
     本文: Macのシステム欧文 → Windowsの欧文 → 日本語の端末フォント → 汎用。
     Webフォントに移行するときは、先頭に "Noto Sans JP" などを足す。
     ヒラギノは ProN を先にする（Chrome で "Hiragino Sans" を先にすると W4 が当たり、他より太く見えたため。ProN は W3）。 */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", "Noto Sans JP", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol";
  /* コード: 等幅の端末フォント */
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Courier New", monospace;
}

/* すべての要素でサイズ計算を正確にする */
* {
  box-sizing: border-box;
}

body {
  font-family: var(--font-sans);
  /* 和文と英数字の間に、ブラウザが小さなスペースを自動で入れる（非対応のブラウザは無視するだけ） */
  text-autospace: normal;
  /* 文字色：真っ黒より少しだけ優しい黒 */
  color: var(--c-text);
  /* 行間（日本語の長文を読みやすくする）。表・見出し・コードなど、別の値が合うものは個別に指定する */
  line-height: 1.8;

  max-width: 900px;
  margin: 0 auto;
  padding: 0 1.5rem;
}


/* アニメーションを減らす設定の人には、なめらかスクロールを使わない */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* コード用フォント。フォント名を指定すると、ブラウザ既定の「等幅は少し小さく表示」が効かなくなるため、大きさをここで合わせる */
pre,
code,
kbd,
samp {
  font-family: var(--font-mono);
  font-size: 0.85em;
}

pre code {
  font-size: 1em;
  /* pre の中の code は二重に小さくしない */
}

/* コードブロック（3カラム以外のページも含む）。
   <pre><code>…</code></pre> でも <blockquote><pre>…</pre></blockquote> でも同じ。
   幅を超える分は枠の中でスクロールさせる */
pre {
  max-width: 100%;
  overflow-x: auto;
  line-height: 1.5;
}

/* 長いインラインコード（code タグ）が本文を突き抜けないように。span.inline-code は下で指定 */
:not(pre)>code {
  overflow-wrap: anywhere;
}


/* pとul,olをひとかたまりで見せたいとき用 */
/* ul,olのすぐ上にある pの下余白を詰める */
p:has(+ ul),
p:has(+ ol) {
  margin-bottom: 0.4em;
  /* 下のulに引き寄せる */
}

/* 前の段落とは開ける。見出しの直後などは見出し側の余白に任せたいので、p の直後（p+p）のときだけ */
p+p:has(+ ul),
p+p:has(+ ol) {
  margin-top: 1.6em;
}

/* その直後の ul,olの上余白もゼロにする */
p+ul,
p+ol {
  margin-top: 0;
}


/* リストの下に余白を多めに取る */
ul,
ol {
  margin-bottom: var(--space-block);
}

/* 入れ子のリストは、外側のリストの一部として余白なし */
li>ul,
li>ol {
  margin-top: 0;
  margin-bottom: 0;
}

/* li 同士の余白。最初の li には付かない（2つ目以降の上だけ）。
   行間 1.8 で折り返し行は広めなので、「次の項目に移った」ことが分かる程度の差にしてある */
li+li {
  margin-top: 0.4em;
}

/* 入れ子の中の li は半分 */
li li+li {
  margin-top: 0.2em;
}


/* 見出しは折り返したときに間延びしないよう、本文より詰める */
h1,
h2,
h3,
h4,
h5 {
  line-height: 1.4;
}

h1 {
  /* margin-top: 0; */
  margin-bottom: 0.8em;
}

h2 {
  font-size: 1.75em;
  color: var(--c-bg);
  /* 濃い塗りに白文字（白は --c-bg と同じ） */
  background-color: var(--c-brand);
  padding: 0.45em 0.8em;
  border-radius: 4px;
  margin-top: 3.0em;
  margin-bottom: 0.6em;
}

h3 {
  font-size: 1.5em;
  color: var(--c-brand-dark);
  border-left: 4px solid var(--c-brand-light);
  /* 中太左線、少し明るい青、うすい背景色つき */
  background-color: var(--c-brand2-1);
  padding: 0.3em 0.6em;
  margin-top: 2.5em;
  margin-bottom: 0.4em;
}

/* h2 の直後に h3 が来るとき: h3 の上余白(2.5em)が h2 の下余白に勝って広く空くので、
   h2 → 本文 の間隔(約 17px)に近づける（0.7em × h3 の文字サイズ 24px ≒ 17px） */
h2+h3 {
  margin-top: 0.7em;
}

h4 {
  font-size: 1.2em;
  color: var(--c-brand-dark);
  border-bottom: 2px solid var(--c-brand-light);
  /* 下線型。h3（左線＋背景）と形を変える */
  padding: 0 0 0.25em;
  margin-top: 2em;
  margin-bottom: 0.4em;
}

/* h5: 用語などの小見出し。目次には出ない */
h5 {
  font-size: 1.1em;
  font-weight: bold;
  color: var(--c-brand);
  border-bottom: 1px solid var(--c-brand2-3);
  /* h4 より細く薄い下線 */
  padding: 0 0 0.15em;
  margin-top: 1.6em;
  margin-bottom: 0.3em;
}


/* 画像が親要素を突き抜けないように */
img {
  max-width: 100%;
  height: auto;
  display: block;
  /* ブロック要素にして中央寄せを効きやすくする */
  margin: var(--space-block) auto;
  /* 上下は --space-block、左右は自動で中央配置 */
}

#footer {
  width: 100%;
  font-size: 0.85em;
  text-align: center;
  margin-top: 2rem;
  padding: 1rem 0;
  border-top: 1px solid var(--c-border);
  clear: both;
}




/* 引用。mdc-note-box（灰色の面）と区別するため、面ではなく「字下げ＋左線」で引用らしく見せる。
   上下に padding は付けない（中の p や pre の margin が外側に畳まれ、左線は中身の高さになる） */
blockquote {
  margin: var(--space-block) 0 var(--space-block) 2em;
  padding: 0 0 0 1em;
  border-left: 4px solid var(--c-border);
  background-color: var(--c-bg);
  color: var(--c-text-sub);
}


/* 注釈用:文字色とフォントサイズだけ */
.note-text {
  color: var(--c-text-sub);
  font-size: 0.9em;
}



/* inline-* に共通の設定
   ・複数行にまたがっても、各行の端に padding と角丸が付くようにする（clone）
   ・padding は、text-autospace（和文と英数字の間の自動スペース）を入れた表示に合わせて整えるためのもの。
     行間 1.8 で行が離れているので、上下の padding は隣の行にぶつからない範囲で付けられる */
.inline-code,
.inline-mark,
.inline-marker,
.inline-pink,
.inline-gray {
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.inline-code,
.inline-mark,
.inline-pink,
.inline-gray {
  border-radius: 0.3em;
}

/* インラインコード用（<span class="inline-code">）。
   code タグではないので、等幅フォントと大きさ（pre, code と同じ 0.85em）、折り返しはここで指定する */
.inline-code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background-color: var(--c-bg-subtle);
  /* ほんのりグレー */
  color: #9b2c2c;
  /* 赤系の色 */
  padding: 0.15em 0.4em;
  overflow-wrap: anywhere;
}

.inline-mark {
  background-color: var(--c-mark);
  color: #1a1a1a;
  /* 本文の #333 よりほんの少しだけ濃いダークグレー */
  /* font-size: 0.9em; */
  padding: 0.1em 0.1em;
}

/* ポイント・弱: 蛍光ペン風の下線 */
.inline-marker {
  background: linear-gradient(transparent 55%, var(--c-marker) 55%);
  /* font-weight: bold; */
  padding: 0 0.1em;
}


/* markよりも目立たせたいとき用、だがあまり使わないかも */
.inline-pink {
  background-color: #fce4ec;
  color: #c2185b;
  /* font-size: 0.9em; */
  /* font-weight: bold; */
  padding: 0.1em 0.25em;
}

/* 注釈用のインライン版 */
.inline-gray {
  background-color: var(--c-brand2-1);
  /* ほんのり青みのあるうすいグレー */
  color: #374151;
  /* ダークグレー（黒すぎない上品な色） */
  font-size: 0.9em;
  padding: 0.15em 0.4em;
}


/* 装飾ボックス（中には p, ul, ol などが入る）
   ・上下の margin は --space-block。隣り合うブロックの margin は大きい方に畳まれるので、連続しても二重にならない
   ・中身の最初と最後の要素の margin は 0 にして、内側の余白は padding だけで決める
     （p:has(+ ul) などの余白で、ボックスの上だけ広くならないようにする） */
.mdc-info-box,
.mdc-warn-box,
.mdc-alert-box,
.mdc-note-box {
  margin: var(--space-block) 0;
  padding: 0.7em 1em;
  border-radius: 4px;
}

:is(.mdc-info-box, .mdc-warn-box, .mdc-alert-box, .mdc-note-box)>:first-child {
  margin-top: 0;
}

:is(.mdc-info-box, .mdc-warn-box, .mdc-alert-box, .mdc-note-box)>:last-child {
  margin-bottom: 0;
}

/* info は warn ほど目立たせない用途なので、左線なし */
.mdc-info-box {
  background-color: var(--c-accent2-light);
  /* border-left: 5px solid var(--c-accent2); */
}

.mdc-warn-box {
  background-color: var(--c-accent-light);
  border-left: 5px solid var(--c-accent);
}

.mdc-alert-box {
  background-color: #ffebee;
  border-left: 5px solid #f44336;
}

/* 注釈用のボックス版。左右に margin を取って、本文より一段引っ込める */
.mdc-note-box {
  background-color: var(--c-bg-subtle);
  margin-inline: 1.5em;
  font-size: 0.9em;
}


/* table装飾 */
/* テーブルを爽やかな薄い水色デザインにする */
table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-block) 0;
  line-height: 1.6;
  border: 1px solid var(--c-brand2-3);
  /* 表の外枠 */
}

th,
td {
  border: 1px solid var(--c-brand2-3);
  /* 縦線と横線（すべて同じ薄い水色） */
}

th {
  padding: 0.75em 0.5em;
  font-weight: bold;
  text-align: left;
  background-color: var(--c-brand2-2);
  /* ヘッダーの薄い水色 */
  color: var(--c-brand);
  /* ヘッダーの文字色（少し濃いめの紺色にして読みやすく） */
  /* white-space: nowrap; */
  /* 見出しの文字が途中で折り返されなくなる */
}

td {
  padding: 1em 0.5em;
  text-align: left;
  vertical-align: top;
}


/* details装飾 */
details {
  margin: var(--space-block) 0;
  padding: 0 1em;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  font-size: 0.9em;
}

summary {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin: 0 -1em;
  /* 枠いっぱいに広げる（ホバー用） */
  padding: 0.6em 1em;
  list-style: none;
  cursor: pointer;
  /* font-weight: bold; */
  color: var(--c-text-sub);
  border-radius: 5px;
}

summary::-webkit-details-marker {
  display: none;
}

summary::before {
  content: "▶";
  font-size: 0.85em;
  transition: transform 0.2s;
}

summary:hover {
  background: var(--c-bg-subtle);
  /* ホバーの時だけうっすら色づく */
}

summary:focus-visible {
  outline: 2px solid var(--c-brand-light);
  outline-offset: 2px;
}

details[open] {
  padding-bottom: 1em;
}

details[open]>summary {
  margin-bottom: 0.8em;
  border-bottom: 1px dashed var(--c-border);
  border-radius: 5px 5px 0 0;
}

details[open]>summary::before {
  transform: rotate(90deg);
}

/* 中身: 先頭と末尾の余白だけ整える */
details>summary+* {
  margin-top: 0;
}

details> :last-child {
  margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
  summary::before {
    transition: none;
  }
}










/* 日付エリア全体（控えめな薄いグレー＆小ぶりなフォント） */
.entry-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.875rem;
  /* 約14px（少し小さめ） */
  color: var(--c-text-sub);
  /* 主張しすぎないグレー */
  margin-bottom: 1.5rem;
  /* 本文との間の余白 */
}

/* 個々の要素 */
.meta-item {
  display: inline-flex;
  align-items: center;
}

/* 絵文字アイコンの大きさと余白 */
.meta-icon {
  margin-right: 0.25em;
  font-size: 0.9em;
}

/* 区切り線のスラッシュ */
.meta-divider {
  color: var(--c-border);
  margin: 0 2px;
}

/* timeタグ内の数字 */
.entry-meta time {
  font-family: inherit;
}


.references p {
  font-size: 0.9em;
  line-height: 1.4;
  margin-bottom: 0.8em;
}

.reference-label {
  font-weight: bold;
}


/* =====================================================================
   レイアウト（<body class="layout-3col"> のページだけに適用）
   左: ページ一覧 / 中央: 本文 / 右: 目次（追随）

   ■ 4つの型（body のクラスと、右カラムの有無の組み合わせで決まる）
       ┌──────────────┬───────────────────────────┬───────────────────────────┐
       │              │ 目次あり                  │ 目次なし                  │
       ├──────────────┼───────────────────────────┼───────────────────────────┤
       │ 標準         │ A: layout-3col            │ B: layout-3col            │
       │ （左右常設） │   #page-toc と #btn-right │   #page-toc と #btn-right │
       │              │   を置く                  │   を置かない              │
       ├──────────────┼───────────────────────────┼───────────────────────────┤
       │ ドロワー型   │ C: layout-3col l3-drawer  │ D: layout-3col l3-drawer  │
       │ （左右は     │   #page-toc と #btn-right │   #page-toc と #btn-right │
       │  重ねて開く）│   を置く                  │   を置かない              │
       └──────────────┴───────────────────────────┴───────────────────────────┘
     ・「目次あり/なし」はクラスではなく、HTML に #page-toc があるかどうかで決まる（CSS は :has() で判定）。
     ・標準（A/B）: 1150px以上で左右を常設。左右を閉じても本文の幅と位置は変わらない（閉じた側は空白）。
       B は右カラムが空白のまま残るので、本文は画面の中央に来る。
     ・ドロワー型（C/D）: 画面幅に関係なく、左右は閉じた状態から、ボタンで本文に重ねて開く。
       メイン幅が足りない／画面幅いっぱい使いたいページ向け。本文の上限は既定 960px。
       変えたいページは <style> で .layout-3col { --l3-content-max: ... } を上書きする。
     ・1150px未満: 標準もドロワーとして動く。

   ■ 本文の幅（標準）
     ・--l3-content-max … 中央カラムの外枠（左線・左右の余白を含む）の上限
     ・--l3-content-pad … 中央カラムの左右の余白（画面幅に応じて 1.25rem〜2.5rem）
     ・文字の幅 ＝ --l3-content-max − --l3-content-pad × 2 − 1px（左線）
       → 既定は 780px − 40px × 2 − 1px ≒ 700px（16px で約43字）

   ※ブレークポイント(1150px)は page-layout.js の WIDE_QUERY と揃えること。
     目安 = 中央の最低幅 + (側幅 + 余白)×2 + 端の余白(2rem) + スクロールバー(約17) + 余裕
   ===================================================================== */

.layout-3col {
  --l3-topbar-h: 44px;
  --l3-content-max: 780px;
  /* 中央カラムの外枠の上限幅 */
  --l3-content-pad: clamp(1.25rem, 3vw, 2.5rem);
  /* 中央カラムの左右の余白 */
  --l3-side-w: 210px;
  /* 左右カラムの幅 */
  --l3-gap: 1rem;
  /* 左右カラムと中央の間隔 */

  /* 各カラムが取る幅。閉じても変えない（閉じた側は空白になり、本文は動かない） */
  --l3-left-w: calc(var(--l3-side-w) + var(--l3-gap));
  --l3-right-w: calc(var(--l3-side-w) + var(--l3-gap));

  /* 全体の最大幅（超えた分は両端の余白になる） */
  --l3-layout-max: calc(var(--l3-content-max) + 2 * (var(--l3-side-w) + var(--l3-gap)) + 2rem);

  /* 共通の body 設定（max-width 900px / 左右padding）を打ち消す */
  max-width: none;
  margin: 0;
  padding: 0;
}

/* ドロワー型の既定。:where() で詳細度を 0 にしてあるので、ページ側の <style> の
   .layout-3col { --l3-content-max: ... } で上書きできる。 */
.layout-3col:where(.l3-drawer) {
  --l3-content-max: 960px;
  --l3-content-pad: 0px;
}


/* ---------- 上部バー（基本形: 画面全幅。狭い画面ではこのまま使う） ---------- */

.layout-3col .topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  height: var(--l3-topbar-h);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 0.8rem;
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-brand2-3);
}

/* 開閉ボタン（中身のSVGアイコンは page-layout.js が入れる） */
.layout-3col .topbar-btn {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 32px;
  padding: 0;
  font: inherit;
  color: var(--c-brand);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0.4em;
  cursor: pointer;
}

.layout-3col .topbar-btn svg {
  display: block;
  width: 20px;
  height: 20px;
}

/* 2. ホバー: ほんのり背景を出して、押せると分かるようにする */
.layout-3col .topbar-btn:hover {
  background: var(--c-brand2-1);
  color: var(--c-brand);
}

/* 3. 開いているとき: 背景と青い枠はやめて、アイコンの色だけ濃くする */
.layout-3col .topbar-btn[aria-expanded="true"] {
  background: transparent;
  border-color: transparent;
  color: var(--c-brand);
}

.layout-3col .topbar-btn:focus-visible,
.layout-3col .side a:focus-visible {
  outline: 2px solid var(--c-brand-light);
  outline-offset: 2px;
}

/* ツールチップ（標準の title は表示が遅いので自前で出す） */
.layout-3col .topbar-btn::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 50;
  padding: 0.25em 0.6em;
  font-size: 0.75rem;
  line-height: 1.4;
  white-space: nowrap;
  color: var(--c-bg);
  background: var(--c-text);
  border-radius: 0.3em;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.12s;
}

.layout-3col #btn-right::after {
  left: auto;
  right: 0;
}

/* タッチ端末ではタップ後にホバーが残るため、マウスのあるときだけ出す */
@media (hover: hover) {
  .layout-3col .topbar-btn:hover::after {
    opacity: 1;
    visibility: visible;
  }
}

.layout-3col .topbar-btn:focus-visible::after {
  opacity: 1;
  visibility: visible;
}

/* 上部バー中央の文字: 目次ありのページは「いま読んでいる章の名前」、目次なしのページは「ページ名」（表示の切り替えは下のブロック） */
.layout-3col .topbar-title {
  flex: 1;
  min-width: 0;
  text-align: center;
  font-size: 0.85rem;
  color: var(--c-text-sub);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 目次（#page-toc）がないページ: ページ名は、本文の h1 が上部バーの下に隠れたときだけ表示する（page-layout.js が .is-visible を付ける）。
   ・display ではなく opacity/visibility で切り替えるので、バーの高さは変わらない。
   ・目次があるページは、章名を常に表示する（切り替えなし）。 */
.layout-3col:where(:not(:has(#page-toc))) .topbar-title {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s, visibility 0.15s;
}

.layout-3col:where(:not(:has(#page-toc))) .topbar-title.is-visible {
  opacity: 1;
  visibility: visible;
}

/* 右ボタンがないページ（flex の上部バー）: 左ボタン(36px)+gap(0.75rem)と同じ幅を右に空けて、文字を中央にそろえる。
   広い画面の標準（grid）では、下の広い画面ブロックで 0 に戻す。 */
.layout-3col:where(:not(:has(#btn-right))) .topbar-title {
  margin-right: calc(36px + 0.75rem);
}


/* ---------- ドロワー（基本形） ----------
   左右カラムは、閉じた状態から、ボタンで本文に重ねて開く。
   ・1150px未満の全ページと、ドロワー型（C/D）の全画面幅で使う。
   ・標準（A/B）の広い画面だけは、下の「広い画面」ブロックでこれを打ち消して常設にする。 */

.layout-3col .layout {
  display: block;
  padding: 0 1rem;
}

.layout-3col #content {
  max-width: var(--l3-content-max);
  margin: 0 auto;
}

/* 標準の狭い画面: 左右の余白ぶんを引いて、広い画面と文字の幅をそろえる */
.layout-3col:where(:not(.l3-drawer)) #content {
  max-width: calc(var(--l3-content-max) - 2 * var(--l3-content-pad));
}

.layout-3col .side {
  position: fixed;
  top: var(--l3-topbar-h);
  bottom: 0;
  z-index: 40;
  width: min(300px, 85vw);
  max-height: none;
  align-self: stretch;
  /* 広い画面用の align-self:start が残ると、縦が中身の高さに縮んでしまう */
  margin: 0;
  padding: 1rem;
  font-size: 0.9rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--c-bg);
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.18);
  /* 閉じている間はフォーカスも受けないようにする */
  visibility: hidden;
  transition: transform 0.2s ease, visibility 0s linear 0.2s;
}

.layout-3col .side-left {
  left: 0;
  transform: translateX(-102%);
}

.layout-3col .side-right {
  right: 0;
  transform: translateX(102%);
}

html.left-open .layout-3col .side-left,
html.right-open .layout-3col .side-right {
  transform: none;
  visibility: visible;
  transition: transform 0.2s ease, visibility 0s;
}

.layout-3col .side-backdrop {
  display: none;
  position: fixed;
  top: var(--l3-topbar-h);
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 35;
  background: rgba(0, 0, 0, 0.25);
}

html.left-open .layout-3col .side-backdrop,
html.right-open .layout-3col .side-backdrop {
  display: block;
}


/* ---------- 広い画面（1150px以上）: 標準（A/B）は左右を並べる ---------- */

@media (min-width: 1150px) {

  /* 閉じた側は非表示にするだけで、列の幅は残す（本文の幅と位置が変わらないようにする） */
  html.left-closed .layout-3col:where(:not(.l3-drawer)) .side-left,
  html.right-closed .layout-3col:where(:not(.l3-drawer)) .side-right {
    display: none;
  }

  .layout-3col:where(:not(.l3-drawer)) .layout,
  .layout-3col:where(:not(.l3-drawer)) .topbar {
    display: grid;
    grid-template-columns: var(--l3-left-w) minmax(0, 1fr) var(--l3-right-w);
    width: 100%;
    max-width: var(--l3-layout-max);
    margin: 0 auto;
    padding: 0 1rem;
  }

  /* 上部バー: 全体幅のうち、中央カラムの範囲だけに背景と下線を引き、ボタンを左右端に置く */
  .layout-3col:where(:not(.l3-drawer)) .topbar {
    grid-template-rows: var(--l3-topbar-h);
    gap: 0;
    background: none;
    border-bottom: 0;
    pointer-events: none;
    /* 左右カラムの上はクリックを素通しさせる */
  }

  .layout-3col:where(:not(.l3-drawer)) .topbar::before {
    content: "";
    grid-column: 2;
    grid-row: 1;
    align-self: stretch;
    /* 基本形の align-items:center が効くと、線がバーの真ん中に来てしまう */
    background: var(--c-bg);
    border-bottom: 1px solid var(--c-brand2-3);
  }

  .layout-3col:where(:not(.l3-drawer)) .topbar>* {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    pointer-events: auto;
  }

  /* ボタンは、本文の文字の端にアイコンの線をそろえる（ボタン内のアイコンの余白は左右 8px、左線は 1px） */
  .layout-3col:where(:not(.l3-drawer)) #btn-left {
    justify-self: start;
    margin-left: calc(var(--l3-content-pad) - 7px);
  }

  .layout-3col:where(:not(.l3-drawer)) #btn-right {
    justify-self: end;
    margin-right: calc(var(--l3-content-pad) - 8px);
  }

  .layout-3col:where(:not(.l3-drawer)) .topbar-title {
    justify-self: center;
    margin-right: 0;
    /* grid では中央にそろうので、右ボタンがなくても補正しない */
    max-width: calc(100% - 2 * (var(--l3-content-pad) + 40px));
  }

  /* 本文: 左右に余白を取る。左線は常に 1px 確保して、色だけ切り替える（開閉で幅がずれない） */
  .layout-3col:where(:not(.l3-drawer)) #content {
    grid-column: 2;
    min-width: 0;
    max-width: none;
    margin: 0;
    padding-inline: var(--l3-content-pad);
    border-left: 1px solid transparent;
  }

  /* 左カラムが開いているとき: 本文の左端に薄い線を引く（本文と同じ高さまで続く） */
  html:not(.left-closed) .layout-3col:where(:not(.l3-drawer)) #content {
    border-left-color: var(--c-border);
  }

  /* 左右カラム: スクロールに追随（ドロワー基本形を打ち消す） */
  .layout-3col:where(:not(.l3-drawer)) .side {
    position: sticky;
    top: 1rem;
    bottom: auto;
    left: auto;
    right: auto;
    z-index: auto;
    align-self: start;
    width: var(--l3-side-w);
    max-height: calc(100vh - var(--l3-topbar-h) - 2rem);
    margin: 1rem 0 0;
    padding: 0;
    background: none;
    box-shadow: none;
    transform: none;
    visibility: visible;
    transition: none;
  }

  .layout-3col:where(:not(.l3-drawer)) .side-left {
    grid-column: 1;
    justify-self: start;
  }

  .layout-3col:where(:not(.l3-drawer)) .side-right {
    grid-column: 3;
    justify-self: end;
    border-left: 1px solid var(--c-border);
    padding-left: 0.4rem;
  }
}

@media (prefers-reduced-motion: reduce) {

  .layout-3col .side,
  html.left-open .layout-3col .side-left,
  html.right-open .layout-3col .side-right,
  .layout-3col .topbar-title {
    transition: none;
  }
}


/* ---------- 左: ページ一覧 ---------- */

.layout-3col .side-title {
  margin: 0 0 0.4rem 0.6rem;
  font-size: 0.8rem;
  font-weight: bold;
  color: var(--c-text-sub);
}

.layout-3col .site-nav-group+.site-nav-group {
  margin-top: 1.2rem;
}

.layout-3col .site-nav-group:first-child {
  margin-bottom: 1.2rem;
}

.layout-3col .site-nav-group a {
  display: block;
  padding: 0.35em 0.6em;
  border-radius: 0.3em;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--c-text);
  text-decoration: none;
}

.layout-3col .site-nav-group a:hover {
  background: var(--c-brand2-1);
}

.layout-3col .site-nav-group a.current {
  background: var(--c-brand2-2);
  color: var(--c-brand-dark);
  font-weight: bold;
}

/* 別サイトへのリンクは印を付ける */
.layout-3col .site-nav-group a.external::after {
  content: " ↗";
  font-size: 0.8em;
  color: var(--c-text-weak);
}


/* ---------- 右: 目次 ---------- */

.layout-3col .page-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.layout-3col .page-toc-list a {
  display: block;
  padding: 0.25em 0.6em;
  border-left: 3px solid transparent;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--c-text-sub);
  text-decoration: none;
}

.layout-3col .page-toc-list li.lv3 a {
  padding-left: 1.5em;
  font-size: 0.8rem;
}

.layout-3col .page-toc-list a:hover {
  background: var(--c-brand2-1);
}

.layout-3col .page-toc-list a.active {
  border-left-color: var(--c-brand-light);
  background: var(--c-brand2-1);
  color: var(--c-brand-dark);
  font-weight: bold;
}


/* ---------- 本文まわり ---------- */

/* 上部バーに見出しが隠れないようにする。
   目次に出る見出し（page-layout.js の TOC_SELECTOR = h1, h2, h3）と揃えてある。
   h4 以下に直リンクを張るページがあれば、ここに足す */
.layout-3col #header,
.layout-3col #content :is(h1, h2, h3) {
  scroll-margin-top: calc(var(--l3-topbar-h) + 1rem);
}

/* 表は、本文幅からはみ出す分を枠の中でスクロールさせる（コードブロックは上の共通設定 pre） */
.layout-3col .table-scroll {
  max-width: 100%;
  overflow-x: auto;
}


@media print {

  /* h2 は「濃い塗り＋白文字」。背景を印刷しない設定だと文字が消えるので、印刷では線に変える */
  h2 {
    color: var(--c-brand);
    background: none;
    border-bottom: 2px solid var(--c-brand);
    border-radius: 0;
    padding: 0.2em 0 0.3em;
  }

  /* 薄い背景で区別している要素は、背景も印刷する */
  h3,
  th,
  .inline-code,
  .inline-mark,
  .inline-marker,
  .inline-pink,
  .inline-gray,
  .mdc-info-box,
  .mdc-warn-box,
  .mdc-alert-box,
  .mdc-note-box {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .layout-3col .topbar,
  .layout-3col .side,
  .layout-3col .side-backdrop {
    display: none;
  }

  .layout-3col .layout {
    display: block;
    padding: 0;
  }

  .layout-3col #content {
    border-left: 0;
    padding-inline: 0;
  }
}