/* 導入ガイド（docs/onboarding/）専用のスタイル。
   overrides/main.html で、導入ガイドのページだけに読み込んでいる。
   色は FutureVuls のカラーガイドに合わせる。
   配色バランス：ベース（白）70%、プライマリ（紺）25%、アクセント（金）5%。
   金は強調したい部分に限定して使う。 */

:root {
  /* プライマリ：#101649 はロゴと同じ色。グラデーションは #101649 → #132D7F */
  --onb-navy: #101649;
  --onb-blue: #132d7f;
  --onb-navy-grad: linear-gradient(90deg, #101649 0%, #132d7f 100%);
  /* アクセント：#CE9449 はロゴと同じ色。グラデーションは #CE9449 → #FCCC77 */
  --onb-gold: #ce9449;
  --onb-gold-light: #fccc77;
  --onb-gold-grad: linear-gradient(90deg, #ce9449 0%, #fccc77 100%);
  --onb-gold-soft: #fbf3e6;
  --onb-card-bg: #ffffff;
  --onb-card-border: #e3e7ee;
  --onb-muted: #5b6575;
}

[data-md-color-scheme="slate"] {
  --onb-gold-soft: #2c2715;
  --onb-card-bg: #1f2533;
  --onb-card-border: #333c4f;
  --onb-muted: #a9b1c0;
}

/* パンくずリスト */
.md-path {
  font-size: 0.68rem;
  color: var(--onb-muted);
  margin-bottom: 0.4rem;
}

/* ページタイトル：金色の短い下線を付ける */
.md-typeset h1 {
  font-weight: 700;
  margin-bottom: 1rem;
}
.md-typeset h1::after {
  content: "";
  display: block;
  width: 3rem;
  height: 4px;
  margin-top: 0.6rem;
  border-radius: 2px;
  background: var(--onb-gold);
}

/* 見出し2：下線をやめ、左に色の帯を付ける */
.md-typeset h2 {
  border-bottom: none !important;
  padding-bottom: 0 !important;
  padding-left: 0.7rem;
  border-left: 5px solid var(--onb-blue);
  line-height: 1.4;
}
[data-md-color-scheme="slate"] .md-typeset h2 {
  border-left-color: var(--onb-gold);
}

/* ページ冒頭の大きな帯 */
.md-typeset .onb-hero {
  margin: 0 0 1.6rem;
  padding: 1.6rem 1.8rem;
  border-radius: 14px;
  color: #fff;
  background: var(--onb-navy-grad);
  box-shadow: 0 6px 20px rgba(16, 22, 73, 0.18);
}
.md-typeset .onb-hero p {
  margin: 0.4rem 0;
  font-size: 0.86rem;
  line-height: 1.8;
}
.md-typeset .onb-hero .onb-hero__label {
  display: inline-block;
  margin: 0 0 0.4rem;
  padding: 0.1rem 0.7rem;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--onb-navy);
  background: var(--onb-gold-grad);
}
.md-typeset .onb-hero a {
  color: #fff;
}

/* カード：角を丸め、上に色の帯、マウスを乗せると浮く */
.md-typeset .grid.cards > ul > li,
.md-typeset .grid > .card {
  border: 1px solid var(--onb-card-border);
  border-top: 4px solid var(--onb-blue);
  border-radius: 12px;
  background: var(--onb-card-bg);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.md-typeset .grid.cards > ul > li:hover,
.md-typeset .grid > .card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(16, 22, 73, 0.12);
  border-color: var(--onb-card-border);
  border-top-color: var(--onb-blue);
}
.md-typeset .grid.cards .lg {
  color: var(--onb-blue);
}
[data-md-color-scheme="slate"] .md-typeset .grid.cards .lg {
  color: var(--onb-gold);
}

/* 色付きの枠：角を丸める */
.md-typeset .admonition,
.md-typeset details {
  border-radius: 10px;
  font-size: 0.78rem;
}

/* ボタン：カラーガイドのボタン展開例に合わせる
   主ボタン = 紺のグラデーション、ふつうのボタン = 紺の線、帯の上のボタン = 金のグラデーション */
.md-typeset .md-button {
  border-radius: 999px;
  padding: 0.55em 1.8em;
  font-weight: 700;
  color: var(--onb-navy);
  border: 1px solid var(--onb-navy);
  background: #fff;
}
.md-typeset .md-button:hover,
.md-typeset .md-button:focus {
  color: #fff;
  background: var(--onb-navy);
  border-color: var(--onb-navy);
}
.md-typeset .md-button--primary {
  color: #fff;
  border: none;
  background: var(--onb-navy-grad);
}
.md-typeset .md-button--primary:hover,
.md-typeset .md-button--primary:focus {
  color: #fff;
  background: var(--onb-navy);
}
.md-typeset .onb-hero .md-button {
  color: var(--onb-navy);
  border: none;
  background: var(--onb-gold-grad);
}
.md-typeset .onb-hero .md-button:hover,
.md-typeset .onb-hero .md-button:focus {
  color: #fff;
  background: var(--onb-gold);
}
[data-md-color-scheme="slate"] .md-typeset .md-button:not(.md-button--primary) {
  color: var(--onb-gold-light);
  border-color: var(--onb-gold);
  background: transparent;
}

/* 表：見出し行に色を付け、角を丸める */
.md-typeset table:not([class]) {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--onb-card-border);
}
.md-typeset table:not([class]) th {
  background: var(--onb-navy);
  color: #fff;
}

/* 「完了の目安」などの強調ブロック */
.md-typeset .onb-goal {
  padding: 0.9rem 1.2rem;
  border-radius: 10px;
  background: var(--onb-gold-soft);
  border-left: 5px solid var(--onb-gold);
}

/* ダークモードでも、帯の上のボタンは金のグラデーションのままにする */
[data-md-color-scheme="slate"] .md-typeset .onb-hero .md-button {
  color: var(--onb-navy);
  border: none;
  background: var(--onb-gold-grad);
}

/* ===== 左のメニュー（ナビゲーション） =====
   サイト共通の extra.css でメニューの文字色が黒に固定され、選択中のページが分からないため、
   導入ガイドのページだけ見分けがつくようにする。 */

/* 選択中のページ：薄い金の背景、金の縦線、紺の太字（ページ内の見出しは除く） */
.md-sidebar .md-nav__link.md-nav__link--active:not(.md-nav--secondary .md-nav__link) {
  color: var(--onb-navy);
  font-weight: 700;
  background: var(--onb-gold-soft);
  border-left: 3px solid var(--onb-gold);
  border-radius: 0 6px 6px 0;
  padding: 0.25em 0.5em;
  margin-left: -0.6em;
}

/* 区切りの名前（はじめに・準備・日々の運用など）を紺の太字に */
.md-sidebar .md-nav--primary .md-nav__item--section > .md-nav__link {
  color: var(--onb-navy);
  font-weight: 700;
}

/* ページ内の見出し：小さく薄くする */
.md-sidebar .md-nav--secondary {
  margin: 0.3em 0 0.6em 0.2em;
  padding-left: 0.5em;
  border-left: 2px solid var(--onb-card-border);
}
.md-sidebar .md-nav--secondary .md-nav__link {
  font-size: 0.62rem;
  color: var(--onb-muted);
}
.md-sidebar .md-nav--secondary .md-nav__link:hover,
.md-sidebar .md-nav--secondary .md-nav__link--active {
  color: var(--onb-navy);
}

/* ダークモード */
[data-md-color-scheme="slate"] .md-sidebar .md-nav__link.md-nav__link--active:not(.md-nav--secondary .md-nav__link) {
  color: var(--onb-gold-light);
  background: rgba(206, 148, 73, 0.16);
}
[data-md-color-scheme="slate"] .md-sidebar .md-nav--primary .md-nav__item--section > .md-nav__link {
  color: #fff;
}
[data-md-color-scheme="slate"] .md-sidebar .md-nav--secondary .md-nav__link {
  color: var(--onb-muted);
}
[data-md-color-scheme="slate"] .md-sidebar .md-nav--secondary .md-nav__link:hover,
[data-md-color-scheme="slate"] .md-sidebar .md-nav--secondary .md-nav__link--active {
  color: var(--onb-gold-light);
}

/* ===== 左のサイドバーの背景 =====
   ブランドの紺をごく薄くした色を敷き、メニューと本文の境目をはっきりさせる */
:root {
  --onb-sidebar-bg: #f4f5fa;
  --onb-sidebar-line: #e2e5f0;
}
[data-md-color-scheme="slate"] {
  --onb-sidebar-bg: #1a1f2e;
  --onb-sidebar-line: #2a3145;
}
@media screen and (min-width: 76.25em) {
  .md-sidebar--primary {
    /* テーマ本体はサイドバー内の各所に「基本の背景色」（白）を指定しているため、
       サイドバーの中だけ、その変数自体を薄い紺に置き換える */
    --md-default-bg-color: var(--onb-sidebar-bg);
    /* 広い画面では、この外枠の高さは 0（上下の余白だけ）。上の余白にも色を付けて内枠とつなげる */
    background: var(--onb-sidebar-bg);
  }
  /* 実際にページの高さまで伸びているのは内枠（scrollwrap）なので、ここに色を敷く */
  .md-sidebar--primary .md-sidebar__scrollwrap {
    margin: 0;
    background: var(--onb-sidebar-bg);
    border-right: 1px solid var(--onb-sidebar-line);
  }
  /* テーマ本体がメニュー部分に白い背景を付けているので、透明にしてサイドバーの色を見せる */
  .md-sidebar--primary .md-nav--primary,
  .md-sidebar--primary .md-nav--primary .md-nav,
  .md-sidebar--primary .md-nav--primary .md-nav__title,
  .md-sidebar--primary .md-nav--primary .md-nav__title ~ .md-nav__list {
    background: transparent;
    box-shadow: none;
  }
  .md-sidebar--primary .md-nav__link.md-nav__link--active:not(.md-nav--secondary .md-nav__link) {
    background: #fff;
    box-shadow: 0 1px 3px rgba(16, 22, 73, 0.08);
  }
  [data-md-color-scheme="slate"] .md-sidebar--primary .md-nav__link.md-nav__link--active:not(.md-nav--secondary .md-nav__link) {
    background: rgba(206, 148, 73, 0.16);
    box-shadow: none;
  }
}

/* ===== 5. 読むタイミングの印 ===== */
.md-typeset .onb-badge {
  display: inline-block;
  margin: -0.4rem 0 0.6rem;
  padding: 0.15rem 0.8rem;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border: 1px solid transparent;
}
.md-typeset .onb-badge--first {
  color: var(--onb-navy);
  background: var(--onb-gold-grad);
}
.md-typeset .onb-badge--must {
  color: #fff;
  background: var(--onb-navy);
}
.md-typeset .onb-badge--choose,
.md-typeset .onb-badge--poc {
  color: var(--onb-navy);
  border-color: var(--onb-navy);
  background: #fff;
}
.md-typeset .onb-badge--later,
.md-typeset .onb-badge--help {
  color: var(--onb-muted);
  border-color: var(--onb-card-border);
  background: #fff;
}
[data-md-color-scheme="slate"] .md-typeset .onb-badge--must {
  background: var(--onb-blue);
}
[data-md-color-scheme="slate"] .md-typeset .onb-badge--choose,
[data-md-color-scheme="slate"] .md-typeset .onb-badge--poc,
[data-md-color-scheme="slate"] .md-typeset .onb-badge--later,
[data-md-color-scheme="slate"] .md-typeset .onb-badge--help {
  background: transparent;
}
[data-md-color-scheme="slate"] .md-typeset .onb-badge--choose,
[data-md-color-scheme="slate"] .md-typeset .onb-badge--poc {
  color: #fff;
  border-color: #fff;
}

/* ===== 4. ページ冒頭のカード（旧：項目・内容の表）を小さめに ===== */
.md-typeset .grid.cards.onb-meta {
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 0.5rem;
  margin-bottom: 1.6rem;
}
.md-typeset .grid.cards.onb-meta > ul > li {
  padding: 0.6rem 0.8rem;
  border-top-width: 3px;
  font-size: 0.72rem;
}
.md-typeset .grid.cards.onb-meta > ul > li p {
  margin: 0.2em 0;
}
.md-typeset .grid.cards.onb-meta > ul > li:hover {
  transform: none;
  box-shadow: none;
  border-top-color: var(--onb-blue);
}
/* 冒頭のカードは情報の一覧なので、色は付けず白に細い線だけ */
.md-typeset .grid.cards.onb-meta > ul > li,
.md-typeset .grid.cards.onb-meta > ul > li:last-child {
  border: 1px solid var(--onb-card-border);
  border-top: 3px solid var(--onb-navy);
  background: var(--onb-card-bg);
}
.md-typeset .grid.cards.onb-meta .twemoji {
  color: var(--onb-navy);
}

/* 選ぶためのカード（役割・スキャン方法）は文字を少し小さく */
.md-typeset .grid.cards.onb-choose > ul > li,
.md-typeset .grid.cards.onb-roles > ul > li {
  font-size: 0.74rem;
}
.md-typeset .grid.cards.onb-choose > ul > li p {
  margin: 0.35em 0;
}

/* ===== 6. お困りですか？の枠 ===== */
.md-typeset .admonition.onb-help {
  border: none;
  border-left: 4px solid var(--onb-navy);
  background: var(--onb-sidebar-bg);
  box-shadow: none;
}
.md-typeset .admonition.onb-help > .admonition-title {
  background: transparent;
  color: var(--onb-navy);
  font-weight: 700;
}
.md-typeset .admonition.onb-help > .admonition-title::before {
  background-color: var(--onb-navy);
}
[data-md-color-scheme="slate"] .md-typeset .admonition.onb-help > .admonition-title {
  color: #fff;
}
[data-md-color-scheme="slate"] .md-typeset .admonition.onb-help {
  border-left-color: var(--onb-gold);
}

/* 撮影予定のキャプチャ枠は控えめに */
.md-typeset details.example {
  border-color: var(--onb-card-border);
  box-shadow: none;
}
.md-typeset details.example > summary {
  background: transparent;
  color: var(--onb-muted);
  font-weight: 400;
}


/* ===== 色の整理（カラーガイドに合わせて、紺・白・金の3色に絞る） =====
   ・枠の種類は色ではなくアイコンで見分ける。枠の色は紺の系統にそろえる
   ・注意（warning）だけ、強調の金を使う
   ・リンクやタブの色も、テーマ既定の青紫からブランドの紺にそろえる */
.md-content {
  --md-typeset-a-color: var(--onb-blue);
  --md-accent-fg-color: var(--onb-navy);
  --md-accent-fg-color--transparent: rgba(19, 45, 127, 0.08);
}
[data-md-color-scheme="slate"] .md-content {
  --md-typeset-a-color: #89c4ff;
  --md-accent-fg-color: var(--onb-gold-light);
}

/* 成功・情報・質問・例など：紺の線、タイトルはごく薄い紺、アイコンは紺 */
.md-typeset :is(.admonition, details):is(.note, .abstract, .info, .tip, .success, .question, .example, .quote) {
  border: 1px solid var(--onb-card-border);
  border-left: 4px solid var(--onb-blue);
  box-shadow: none;
}
.md-typeset :is(.admonition, details):is(.note, .abstract, .info, .tip, .success, .question, .example, .quote) > :is(.admonition-title, summary) {
  background-color: var(--onb-sidebar-bg);
}
.md-typeset :is(.admonition, details):is(.note, .abstract, .info, .tip, .success, .question, .example, .quote) > :is(.admonition-title, summary)::before,
.md-typeset details > summary::after {
  background-color: var(--onb-blue);
}

/* 折りたたみ（よくあるつまずき・キャプチャ）は、閉じているときは白で控えめに */
.md-typeset details:is(.question, .example, .info):not([open]) > summary {
  background-color: var(--onb-card-bg);
}
.md-typeset details.example {
  border-left-color: var(--onb-card-border);
}
.md-typeset details.example > summary::before {
  background-color: var(--onb-muted);
}

/* 注意：強調の金 */
.md-typeset :is(.admonition, details).warning {
  border: 1px solid var(--onb-card-border);
  border-left: 4px solid var(--onb-gold);
  box-shadow: none;
}
.md-typeset :is(.admonition, details).warning > :is(.admonition-title, summary) {
  background-color: var(--onb-card-bg);
}
.md-typeset :is(.admonition, details).warning > :is(.admonition-title, summary)::before {
  background-color: var(--onb-gold);
}

/* ダークモード：タイトルの背景はサイドバーと同じ暗い紺、線とアイコンは明るめ */
[data-md-color-scheme="slate"] .md-typeset :is(.admonition, details):is(.note, .abstract, .info, .tip, .success, .question, .example, .quote) {
  border-left-color: var(--onb-gold);
}
[data-md-color-scheme="slate"] .md-typeset :is(.admonition, details):is(.note, .abstract, .info, .tip, .success, .question, .example, .quote) > :is(.admonition-title, summary)::before,
[data-md-color-scheme="slate"] .md-typeset details > summary::after {
  background-color: var(--onb-gold-light);
}

/* ===== 左のパネルから外す見出し =====
   各ページ共通の5つの見出しは、本文には残し、左のパネルの目次には出さない。
   同じ見出しが2回出るページでは ID の末尾に _1 などが付くため、前方一致で指定する。 */
.md-sidebar .md-nav--secondary .md-nav__item:has(> .md-nav__link[href^="#よくあるつまずき"]),
.md-sidebar .md-nav--secondary .md-nav__item:has(> .md-nav__link[href^="#解決しないとき"]),
.md-sidebar .md-nav--secondary .md-nav__item:has(> .md-nav__link[href^="#さらに詳しく知りたいとき"]),
.md-sidebar .md-nav--secondary .md-nav__item:has(> .md-nav__link[href^="#次に読むページ"]),
.md-sidebar .md-nav--secondary .md-nav__item:has(> .md-nav__link[href^="#つまずいたとき"]) {
  display: none;
}

/* ===== スクロールバーの色 =====
   テーマ本体はアクセント色（カラーガイドにない青）を使うため、カラーガイドの紺に揃える。 */
:root {
  --onb-scroll: var(--onb-blue);
  --onb-scroll-hover: var(--onb-navy);
}
[data-md-color-scheme="slate"] {
  --onb-scroll: var(--onb-gold);
  --onb-scroll-hover: var(--onb-gold-light);
}
.md-sidebar__scrollwrap,
.md-search__scrollwrap,
.md-typeset pre > code,
.md-typeset__scrollwrap {
  scrollbar-color: var(--onb-scroll) transparent;
}
.md-sidebar__scrollwrap:focus-within::-webkit-scrollbar-thumb,
.md-sidebar__scrollwrap:hover::-webkit-scrollbar-thumb,
.md-search__scrollwrap::-webkit-scrollbar-thumb,
.md-typeset pre > code::-webkit-scrollbar-thumb {
  background-color: var(--onb-scroll);
}
.md-sidebar__scrollwrap:focus-within::-webkit-scrollbar-thumb:hover,
.md-sidebar__scrollwrap:hover::-webkit-scrollbar-thumb:hover,
.md-search__scrollwrap::-webkit-scrollbar-thumb:hover,
.md-typeset pre > code::-webkit-scrollbar-thumb:hover {
  background-color: var(--onb-scroll-hover);
}

/* ===== 左のメニューのジャンプ率 =====
   区切りの名前（はじめに・準備・仕上げなど）とページ名の差を大きくする。
   区切りは大きく太く、上に余白と細い線を入れる。ページ名は少し小さくする。 */
.md-sidebar--primary .md-nav--primary .md-nav__item--section > .md-nav__link {
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  margin-top: 1.1em;
  padding-top: 0.7em;
  border-top: 1px solid var(--onb-sidebar-line);
}
.md-sidebar--primary .md-nav--primary .md-nav__item--section:first-child > .md-nav__link {
  margin-top: 0.2em;
  padding-top: 0;
  border-top: none;
}
.md-sidebar--primary .md-nav--primary .md-nav__item--section .md-nav__item:not(.md-nav__item--section) > .md-nav__link {
  font-size: 0.66rem;
}

/* ===== 左のメニューの「よくある質問」 =====
   ガイドのメニューの最後の項目。ほかのページ名と区別できるよう、紺の枠のボタン風にする。
   金は「今いるページ」の目印に使っているため、ここでは紺で目立たせる。 */
.md-sidebar--primary .md-nav--primary > .md-nav__list > .md-nav__item--active > .md-nav > .md-nav__list > .md-nav__item:last-child,
.md-sidebar--primary .md-nav__item:has(> .md-nav__link[href$="faq/"]) {
  margin-top: 1.4em;
}
.md-sidebar--primary .md-nav--primary > .md-nav__list > .md-nav__item--active > .md-nav > .md-nav__list > .md-nav__item:last-child > .md-nav__link,
.md-sidebar--primary .md-nav__link[href$="faq/"] {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-left: 0;
  padding: 0.5em 0.8em;
  border: 1px solid var(--onb-navy);
  border-radius: 8px;
  background: #fff;
  color: var(--onb-navy);
  font-size: 0.7rem;
  font-weight: 700;
}
.md-sidebar--primary .md-nav--primary > .md-nav__list > .md-nav__item--active > .md-nav > .md-nav__list > .md-nav__item:last-child > .md-nav__link::before,
.md-sidebar--primary .md-nav__link[href$="faq/"]::before {
  content: "?";
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.3em;
  height: 1.3em;
  border-radius: 50%;
  background: var(--onb-navy);
  color: #fff;
  font-size: 0.85em;
  font-weight: 800;
}
.md-sidebar--primary .md-nav--primary > .md-nav__list > .md-nav__item--active > .md-nav > .md-nav__list > .md-nav__item:last-child > .md-nav__link:hover,
.md-sidebar--primary .md-nav__link[href$="faq/"]:hover {
  background: var(--onb-navy);
  color: #fff;
}
.md-sidebar--primary .md-nav--primary > .md-nav__list > .md-nav__item--active > .md-nav > .md-nav__list > .md-nav__item:last-child > .md-nav__link:hover::before,
.md-sidebar--primary .md-nav__link[href$="faq/"]:hover::before {
  background: #fff;
  color: var(--onb-navy);
}
[data-md-color-scheme="slate"] .md-sidebar--primary .md-nav--primary > .md-nav__list > .md-nav__item--active > .md-nav > .md-nav__list > .md-nav__item:last-child > .md-nav__link,
[data-md-color-scheme="slate"] .md-sidebar--primary .md-nav__link[href$="faq/"] {
  background: transparent;
  border-color: var(--onb-gold);
  color: var(--onb-gold-light);
}
[data-md-color-scheme="slate"] .md-sidebar--primary .md-nav--primary > .md-nav__list > .md-nav__item--active > .md-nav > .md-nav__list > .md-nav__item:last-child > .md-nav__link::before,
[data-md-color-scheme="slate"] .md-sidebar--primary .md-nav__link[href$="faq/"]::before {
  background: var(--onb-gold);
  color: var(--onb-navy);
}

/* ===== 左のメニュー：マウスを乗せたとき =====
   サイト共通の extra.css で文字色が黒に固定され、テーマ本体のマウスオーバーの色が効かないため、
   導入ガイドのページだけ、薄い紺の背景と左の紺の線で、指している項目がわかるようにする。
   背景の余白で項目の位置がずれないよう、余白はすべてのページ名にあらかじめ付けておく。 */
.md-sidebar--primary .md-nav--primary a.md-nav__link {
  padding: 0.25em 0.5em;
  margin-left: -0.6em;
  border-radius: 0 6px 6px 0;
  transition: background-color 0.12s ease, box-shadow 0.12s ease, color 0.12s ease;
}
.md-sidebar--primary .md-nav--primary a.md-nav__link:not(.md-nav__link--active):hover,
.md-sidebar--primary .md-nav--primary a.md-nav__link:not(.md-nav__link--active):focus-visible {
  color: var(--onb-navy);
  background: rgba(19, 45, 127, 0.09);
  box-shadow: inset 3px 0 0 var(--onb-blue);
}
[data-md-color-scheme="slate"] .md-sidebar--primary .md-nav--primary a.md-nav__link:not(.md-nav__link--active):hover,
[data-md-color-scheme="slate"] .md-sidebar--primary .md-nav--primary a.md-nav__link:not(.md-nav__link--active):focus-visible {
  color: var(--onb-gold-light);
  background: rgba(206, 148, 73, 0.12);
  box-shadow: inset 3px 0 0 var(--onb-gold);
}

/* ===== 表の文字の大きさ =====
   テーマ本体は表の文字を本文より小さく（0.64rem）している。導入ガイドでは読みやすさを優先し、
   本文（0.8rem）に近い大きさにする。表の中のコードも同じ割合で大きくなる。 */
.md-typeset table:not([class]) {
  font-size: 0.74rem;
}
.md-typeset table:not([class]) th,
.md-typeset table:not([class]) td {
  padding: 0.75em 1em;
  line-height: 1.6;
}

/* ===== テーマのアクセント色をカラーガイドの色に置き換える =====
   テーマ本体は、スクロールバーやリンクにマウスを乗せたときの色に、アクセント色（カラーガイドにない青）を使う。
   スクロールバーは「マウスを乗せたとき」の指定が別にあり、個別の上書きでは消えないため、
   導入ガイドのページだけ、アクセント色そのものをカラーガイドの紺（ダークモードでは金）に置き換える。 */
body[data-md-color-accent],
[data-md-color-accent] {
  --md-accent-fg-color: #132d7f;
  --md-accent-fg-color--transparent: rgba(19, 45, 127, 0.1);
  --md-accent-bg-color: #fff;
  --md-accent-bg-color--light: rgba(255, 255, 255, 0.7);
}
[data-md-color-scheme="slate"][data-md-color-accent] {
  --md-accent-fg-color: #ce9449;
  --md-accent-fg-color--transparent: rgba(206, 148, 73, 0.12);
  --md-accent-bg-color: #101649;
  --md-accent-bg-color--light: rgba(16, 22, 73, 0.7);
}

/* ===== 左のメニュー：構成の見直し（計画する・FutureVuls を設定する） ===== */

/* 一番上の「導入ガイド」（タブ名）には区切りの線を付けない */
.md-sidebar--primary .md-nav--primary > .md-nav__list > .md-nav__item--section > .md-nav__link {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* クイックスタート：まず手を動かしてほしいページなので、金の枠のボタン風にして目立たせる。
   よくある質問（紺）と区別するため、カラーガイドのアクセントの金を使う。
   リンク先は quickstart/（本番）と quickstart.html（プレビュー）の両方に対応する。
   クイックスタートを開いているときはリンクが「今いるページ」になるため、main.html が html に onb-current-quickstart を付けて見分ける。 */
.md-sidebar--primary .md-nav__item:has(> .md-nav__link[href$="quickstart/"]),
.md-sidebar--primary .md-nav__item:has(> .md-nav__link[href$="quickstart.html"]),
.onb-current-quickstart .md-sidebar--primary .md-nav__item--active:not(.md-nav__item--nested) {
  margin: 0.5em 0 0.3em;
}
.md-sidebar--primary .md-nav__link[href$="quickstart/"],
.md-sidebar--primary .md-nav__link[href$="quickstart.html"],
.onb-current-quickstart .md-sidebar--primary .md-nav__item--active:not(.md-nav__item--nested) > .md-nav__link {
  /* display は指定しない。開いているページでは、画面の幅に応じて MkDocs Material が「ページ名のリンク」と「目次を開くボタン」のどちらか一方だけを表示するため */
  align-items: center;
  gap: 0.5em;
  margin-left: 0;
  padding: 0.5em 0.8em;
  border: 1px solid var(--onb-gold);
  border-radius: 8px;
  background: var(--onb-gold-soft);
  color: var(--onb-navy);
  font-size: 0.7rem;
  font-weight: 700;
}
.md-sidebar--primary .md-nav__link[href$="quickstart/"]::before,
.md-sidebar--primary .md-nav__link[href$="quickstart.html"]::before,
.onb-current-quickstart .md-sidebar--primary .md-nav__item--active:not(.md-nav__item--nested) > .md-nav__link::before {
  content: "▶";
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.3em;
  height: 1.3em;
  border-radius: 50%;
  background: var(--onb-gold-grad);
  color: var(--onb-navy);
  font-size: 0.7em;
}
.md-sidebar--primary .md-nav__link[href$="quickstart/"]:hover,
.md-sidebar--primary .md-nav__link[href$="quickstart.html"]:hover,
.onb-current-quickstart .md-sidebar--primary .md-nav__item--active:not(.md-nav__item--nested) > .md-nav__link:hover {
  /* マウスを乗せても、押したあと（ページを開いたとき）と同じ見た目のままにする */
  background: var(--onb-gold-soft);
  color: var(--onb-navy);
  box-shadow: none;
}
/* メニューの名前を「クイックスタート：」と「まず1台で見てみる」の2行に分ける。
   幅を9文字分にして、「：」のあとで折り返させる（どちらの行も9文字以内） */
.md-sidebar--primary .md-nav__link[href$="quickstart/"] .md-ellipsis,
.md-sidebar--primary .md-nav__link[href$="quickstart.html"] .md-ellipsis,
.onb-current-quickstart .md-sidebar--primary .md-nav__item--active:not(.md-nav__item--nested) > .md-nav__link .md-ellipsis {
  display: inline-block;
  max-width: 9.3em;
}
[data-md-color-scheme="slate"] .md-sidebar--primary .md-nav__link[href$="quickstart/"],
[data-md-color-scheme="slate"] .md-sidebar--primary .md-nav__link[href$="quickstart.html"],
.onb-current-quickstart [data-md-color-scheme="slate"] .md-sidebar--primary .md-nav__item--active:not(.md-nav__item--nested) > .md-nav__link {
  background: rgba(206, 148, 73, 0.16);
  color: var(--onb-gold-light);
}



/* 区切りの名前は、押すとその区切りの最初のページを開く（onboarding.js）。押せることがわかるようにする */
.md-sidebar--primary label.md-nav__link.onb-section-link {
  pointer-events: auto;
  cursor: pointer;
}
.md-sidebar--primary label.md-nav__link.onb-section-link:hover {
  color: var(--onb-gold-dark, #a8742f);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* クイックスタートの枠は、開く前も開いたあとも同じ角丸にする。
   開いたあとは「今いるページ」の見た目（左だけ太い線、左の角が四角）が重なるため、ここで上書きする */
.md-sidebar--primary .md-nav__link[href$="quickstart/"],
.md-sidebar--primary .md-nav__link[href$="quickstart.html"],
.onb-current-quickstart .md-sidebar--primary .md-nav__item--active:not(.md-nav__item--nested) > .md-nav__link {
  border-radius: 8px !important;
  border-left-width: 1px !important;
  margin-left: 0 !important;
}

/* ===== 色の役割 =====
   金 = 押して何かをするもの（次のページへ進む、ダウンロード、クイックスタート）
   紺 = 場所を示すもの（今いるページ、よくある質問の枠）、ページの目印 */

/* ボタンはすべて金。主ボタン（次のページへ進む）は金のグラデーション、ふつうのボタン（ダウンロードなど）は金の線 */
.md-typeset .md-button {
  color: var(--onb-navy);
  border-color: var(--onb-gold);
  background: var(--onb-gold-soft);
}
.md-typeset .md-button:hover,
.md-typeset .md-button:focus {
  color: var(--onb-navy);
  border-color: var(--onb-gold);
  background: var(--onb-gold);
}
.md-typeset .md-button--primary {
  color: var(--onb-navy);
  border: none;
  background: var(--onb-gold-grad);
}
.md-typeset .md-button--primary:hover,
.md-typeset .md-button--primary:focus {
  color: var(--onb-navy);
  background: var(--onb-gold);
}

/* ページの目印「最初に読む」は金をやめて紺にする（金はボタンだけに使う） */
.md-typeset .onb-badge--first {
  color: #fff;
  background: var(--onb-navy);
}

/* 左のメニューの今いるページ：紺の背景に白の文字で、はっきり見せる（クイックスタートは金の枠のまま） */
html:not(.onb-current-quickstart) .md-sidebar--primary .md-nav--primary .md-nav__link.md-nav__link--active:not(.md-nav--secondary .md-nav__link) {
  color: #fff;
  background: var(--onb-navy);
  border-left: 3px solid var(--onb-navy);
  border-radius: 6px;
  box-shadow: none;
}
html:not(.onb-current-quickstart) [data-md-color-scheme="slate"] .md-sidebar--primary .md-nav--primary .md-nav__link.md-nav__link--active:not(.md-nav--secondary .md-nav__link) {
  color: #fff;
  background: var(--onb-blue);
  border-left-color: var(--onb-blue);
}

/* ===== 左のメニューの区切りの開け閉め（onboarding.js） ===== */
.md-sidebar--primary .md-nav__item.onb-collapsed > .md-nav {
  display: none !important;
}
.md-sidebar--primary .onb-toggle {
  margin-left: auto;
  padding: 0 0.3em;
  border: none;
  background: transparent;
  color: var(--onb-muted);
  font-size: 0.8em;
  line-height: 1;
  cursor: pointer;
  transform: rotate(90deg);
  transition: transform 0.15s ease;
}
.md-sidebar--primary .md-nav__item.onb-collapsed > label .onb-toggle {
  transform: rotate(0deg);
}
.md-sidebar--primary .onb-toggle:hover,
.md-sidebar--primary .onb-toggle:focus-visible {
  color: var(--onb-navy);
}
[data-md-color-scheme="slate"] .md-sidebar--primary .onb-toggle:hover,
[data-md-color-scheme="slate"] .md-sidebar--primary .onb-toggle:focus-visible {
  color: var(--onb-gold-light);
}

/* ===== 運用開始チェックリストのチェック欄（onboarding.js で押せるようにしている） =====
   テーマ本体のチェック欄は、チェック前の印がとても薄く、欄があることに気づきにくい。
   チェック前は紺の枠の四角、チェック後は紺の地に白いチェックにする */
.md-typeset .task-list-control .task-list-indicator::before {
  background-color: #fff;
  -webkit-mask-image: none;
  mask-image: none;
  border: 2px solid var(--onb-blue);
  border-radius: 4px;
  width: 1.1em;
  height: 1.1em;
  box-sizing: border-box;
  cursor: pointer;
}
.md-typeset .task-list-control [type=checkbox]:checked + .task-list-indicator::before {
  background-color: var(--onb-blue);
  -webkit-mask-image: none;
  mask-image: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
  background-size: 90%;
  background-position: center;
  background-repeat: no-repeat;
}
.md-typeset .task-list-control [type=checkbox]:focus-visible + .task-list-indicator::before {
  outline: 2px solid var(--onb-gold);
  outline-offset: 2px;
}
[data-md-color-scheme="slate"] .md-typeset .task-list-control .task-list-indicator::before {
  background-color: transparent;
  border-color: #fff;
}
/* チェックの進み具合 */
.md-typeset .onb-progress {
  display: inline-block;
  margin: 0.4em 0 0.8em;
  padding: 0.35em 0.9em;
  border: 1px solid var(--onb-card-border);
  border-radius: 999px;
  font-weight: 700;
  color: var(--onb-navy);
  background: var(--onb-card-bg);
}
.md-typeset .onb-progress--done {
  border-color: var(--onb-gold);
  background: var(--onb-gold-soft);
}
/* 暗い配色（slate）では紺の文字が背景に沈むため、白（すべて済んだら薄い金）にする */
[data-md-color-scheme="slate"] .md-typeset .onb-progress {
  color: #fff;
}
[data-md-color-scheme="slate"] .md-typeset .onb-progress--done {
  color: var(--onb-gold-light);
}

/* サイト共通の左サイドバーの現在地の強調（extra.css。#526）の色を、導入ガイドの中ではガイドの配色にする。
   今いるページの見た目は上の導入ガイド独自の指定を使い、親の区切りと本文で読んでいる見出しの色だけをここでそろえる。
   extra.css のほうが後に読み込まれるため、html を付けて指定を強くしている */
html .md-sidebar--primary {
  --fv-parent-fg: var(--onb-navy);
  --fv-current-fg: var(--onb-navy);
  --fv-current-bg: var(--onb-gold-soft);
  --fv-current-line: var(--onb-gold);
}
html [data-md-color-scheme="slate"] .md-sidebar--primary,
html[data-md-color-scheme="slate"] .md-sidebar--primary {
  --fv-parent-fg: #fff;
  --fv-current-fg: var(--onb-gold-light);
  --fv-current-bg: rgba(206, 148, 73, 0.16);
  --fv-current-line: var(--onb-gold);
}

/* 「よくある質問」は、個別のページを nav に載せている（個別のページでもガイドのメニューとパンくずを出すため）。
   メニューには個別のページを出さず、「よくある質問」の枠だけを見せる。
   区切りの名前として付く上の線と余白は打ち消す */
.md-sidebar--primary .md-nav__item.onb-faq-section > .md-nav,
.md-sidebar--primary .md-nav--primary > .md-nav__list > .md-nav__item--active > .md-nav > .md-nav__list > .md-nav__item--section:last-child > .md-nav {
  display: none;
}
.md-sidebar--primary .md-nav--primary .md-nav__item--section.onb-faq-section > .md-nav__link,
.md-sidebar--primary .md-nav--primary > .md-nav__list > .md-nav__item--active > .md-nav > .md-nav__list > .md-nav__item--section:last-child > .md-nav__link {
  margin-top: 0;
  border-top: 1px solid var(--onb-navy);
  letter-spacing: normal;
  cursor: pointer;
}
[data-md-color-scheme="slate"] .md-sidebar--primary .md-nav--primary > .md-nav__list > .md-nav__item--active > .md-nav > .md-nav__list > .md-nav__item--section:last-child > .md-nav__link {
  border-top-color: var(--onb-gold);
}

/* パンくずリストの最後の「今いるページ」（onboarding.js が足す）。リンクではないので、少し濃くして区別する */
.md-path .onb-path-current {
  color: var(--md-default-fg-color--light);
  font-weight: 700;
  cursor: default;
}