/* ===== SORACOM ドキュメント風のデザイン =====
   - ヘッダー：濃いチャコール（ほぼ黒）＋白文字
   - アクセント：ティール（青緑）— ヘッダー直下の帯／リンク／選択中ナビ／右目次のインジケータ
   - 3カラム（左メニュー・本文・右目次）はテーマ既定のまま

   色を調整したいときは、下の変数（--doc-teal / --doc-teal-bright / --doc-header）だけ変えれば全体に反映されます。 */

:root {
  /* アクセント色のスロット（変数名は歴史的に teal だが、実際の色はここで自由に差し替え可）。
     現在のパレット: ブルー系（テーマ調整パネルで選定）。 */
  --doc-teal: #0070c0;          /* リンク・選択中ナビ・TOC等のアクセント（ブルー）。 */
  --doc-teal-bright: #d1dbe9;   /* タイトル帯の背景＋ダークモードのリンク色（ごく淡いブルーグレー）。 */
  --doc-header: #232b30;        /* チャコールのヘッダー背景 */
  --doc-banner-text: #0e3038;   /* タイトル帯の文字色（帯の背景上で読みやすい濃色） */
  --toc-width: 9rem;            /* 右目次（セカンダリ）の幅。既定 12.1rem より狭め。
                                   タイトル帯の右端合わせ(margin-right)もこの値に連動する。 */
}

/* ---- 配色（ライト／ダーク共通でダークヘッダー＋ティール） ---- */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: var(--doc-header);   /* ヘッダー背景 */
  --md-typeset-a-color: var(--doc-teal);      /* 本文リンク・アクティブなナビ項目 */
  --md-accent-fg-color: var(--doc-teal);      /* ホバー・コンテンツタブのインジケータ等 */
  --md-typeset-color: rgba(0, 0, 0, 0.78);    /* 本文の文字色を少し柔らかく（SORACOM/SDPF 寄り） */
  /* 左メニューの選択中行の塗り。白地では薄めでも十分に分かるため 12%。 */
  --doc-nav-active-fill: color-mix(in srgb, var(--doc-teal) 12%, transparent);
  /* 選択中行の左バー。ライトは白地でバーのコントラストが稼げない（淡色だと約1.4）ため、
     バーは出さず 12% の塗りだけで示す。 */
  --doc-nav-active-bar: transparent;
}

/* 本文の文字サイズを SORACOM/SDPF に寄せて少し小さく（既定 17.6px → 約 15px） */
.md-typeset {
  font-size: 0.7rem;
}

/* 同一ページ内の表の横幅を統一（内容依存でバラつくのを防ぎ、本文幅いっぱいに揃える）。
   Material は表を inline-block のラッパー（内容幅）で囲むため、ラッパーと表の
   両方を全幅にしないと揃わない。 */
.md-typeset .md-typeset__table {
  display: block;
  width: 100%;
}
.md-typeset table:not([class]) {
  display: table;
  width: 100%;
}

/* 表の見た目を SDPF 風に：薄いグレーのヘッダー背景＋行の下ボーダー（縦線なし）。 */
.md-typeset table:not([class]) {
  border: none;
}
.md-typeset table:not([class]) th,
.md-typeset table:not([class]) td {
  border: none;
  border-bottom: 1px solid color-mix(in srgb, var(--md-default-fg-color) 12%, transparent);
  padding: 0.5rem 0.9rem;
  vertical-align: top;
}
.md-typeset table:not([class]) th {
  background: color-mix(in srgb, var(--md-default-fg-color) 4%, transparent);
  font-weight: 700;
}

/* 用語集（.glossary でくくった表）は、全表で「用語」列・「説明」列の幅を統一する。
   table-layout: fixed ＋ 1列目の固定幅で、表ごとのバラつきをなくす。 */
.md-typeset .glossary table:not([class]) {
  table-layout: fixed;
}
.md-typeset .glossary table:not([class]) th:first-child,
.md-typeset .glossary table:not([class]) td:first-child {
  width: 20%;
}

/* 設定項目リファレンス（コンテンツタブ内の表）の列幅を統一する。
   全表 3 列（項目 / 種別 / 説明）= 20% / 10% / 70%。
   コンテンツタブ内に表があるのは現状このページのみのため、.tabbed-content table でスコープ。 */
.md-typeset .tabbed-content table:not([class]) {
  table-layout: fixed;
}
.md-typeset .tabbed-content table:not([class]) th:nth-child(1),
.md-typeset .tabbed-content table:not([class]) td:nth-child(1) { width: 20%; }  /* 項目 */
.md-typeset .tabbed-content table:not([class]) th:nth-child(2),
.md-typeset .tabbed-content table:not([class]) td:nth-child(2) { width: 10%; }  /* 種別 */
.md-typeset .tabbed-content table:not([class]) th:nth-child(3),
.md-typeset .tabbed-content table:not([class]) td:nth-child(3) { width: 70%; }  /* 説明 */

/* ===== FAQ（page-faq）：折りたたみ式アコーディオン =====
   色付きボックスではなく、区切り線でつながったクリーンなアコーディオンにする。 */
.page-faq .md-typeset details {
  /* 種類別の色（question の緑など）を解除し、地味な薄いグレーで統一 */
  background: color-mix(in srgb, var(--md-default-fg-color) 4%, transparent) !important;
  border: none;
  border-radius: 6px;
  box-shadow: none;
  margin: 0 0 0.4rem;                       /* 項目間に少し間隔 */
  padding: 0 0.9rem;                        /* 左右に余白（質問文・回答ともこの余白に揃う） */
}
.page-faq .md-typeset details > summary {
  background: transparent;                  /* ボックスのグレーを一様に見せる */
  font-weight: 600;
  margin: 0;                                /* Material の負の左マージンを打ち消す（左余白が効かない原因） */
  padding: 0.7rem 1.5rem 0.7rem 0;          /* 左はボックスの余白(0.9rem)で確保、右は chevron 分 */
  cursor: pointer;
}
/* 種類アイコン（? など）を隠し、質問文をボックスの左余白から表示。chevron（::after）は残す */
.page-faq .md-typeset details > summary::before {
  display: none;
}
/* chevron（＞）の色を、種類の緑から馴染むグレーに変更し、垂直中央に配置 */
.page-faq .md-typeset details > summary::after {
  background-color: var(--md-default-fg-color--light);
  top: 50%;
  margin-top: -0.5rem;   /* チェベロン高さ(約1rem)の半分ぶん上げて中央に（折り返し時も中央を維持） */
}
.page-faq .md-typeset details > summary:hover,
.page-faq .md-typeset details[open] > summary {
  color: var(--md-accent-fg-color);          /* ホバー・展開中の質問をティールで強調 */
}
/* フォーカス時に出る緑のハロー（box-shadow）を解除。
   キーボード操作時のみ、控えめなティールの枠でアクセシビリティを確保。 */
.page-faq .md-typeset details:focus-within {
  box-shadow: none;
}
.page-faq .md-typeset details > summary:focus-visible {
  outline: 2px solid var(--md-accent-fg-color);
  outline-offset: 2px;
}
.page-faq .md-typeset details[open] {
  padding-bottom: 0.6rem;                    /* 回答の下に余白 */
}

/* 画面ガイド（page-screens を JS で body に付与）の表は、1 列目 30% / 2 列目 70% に統一。 */
.page-screens .md-typeset table:not([class]) {
  table-layout: fixed;
}
.page-screens .md-typeset table:not([class]) th:first-child,
.page-screens .md-typeset table:not([class]) td:first-child { width: 20%; }

/* 「ヒント(tip)」のアイコンを、炎から控えめな電球（アウトライン）に変更 */
:root {
  --md-admonition-icon--tip: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12,2A7,7,0,0,1,19,9C19,11.38,17.81,13.47,16,14.74V17A1,1,0,0,1,15,18H9A1,1,0,0,1,8,17V14.74C6.19,13.47,5,11.38,5,9A7,7,0,0,1,12,2M9,21V20H15V21A1,1,0,0,1,14,22H10A1,1,0,0,1,9,21M12,4A5,5,0,0,0,7,9C7,11.05,8.23,12.81,10,13.58V16H14V13.58C15.77,12.81,17,11.05,17,9A5,5,0,0,0,12,4Z"/></svg>');
}

/* ===== Admonition（!!! ボックス）を「枠線・影なし＋全体に薄い背景色」に =====
   既定は「左の色帯＋白い本文＋タイトル帯だけ色付き」。これを、枠線と影を消し、
   ボックス全体を種類ごとの薄い背景色で一様に塗る見た目へ変更する。
   色は Material の各タイプ色を低不透明度で使用（ドキュメントサイト固有のスタイル）。 */
.md-typeset .admonition,
.md-typeset details {
  border: none;
  box-shadow: none;
  border-radius: 6px;
}
/* タイトル帯の背景を消し、ボックス全体を一様な色に見せる */
.md-typeset .admonition > .admonition-title,
.md-typeset details > summary {
  background-color: transparent;
}
/* 種類ごとの薄い背景色（既定は note 相当）。--doc-adm に種別アクセント色(RGB)を持たせ、
   薄い背景色と、内部インラインコードの「チップ色」の両方に流用する。 */
.md-typeset .admonition { --doc-adm: 68, 138, 255; background-color: rgba(var(--doc-adm), 0.10); }
.md-typeset .admonition.note,
.md-typeset details.note { --doc-adm: 68, 138, 255; background-color: rgba(var(--doc-adm), 0.10); }
.md-typeset .admonition.info,
.md-typeset details.info,
.md-typeset .admonition.todo,
.md-typeset details.todo { --doc-adm: 0, 184, 212; background-color: rgba(var(--doc-adm), 0.10); }
.md-typeset .admonition.tip,
.md-typeset details.tip,
.md-typeset .admonition.hint,
.md-typeset details.hint,
.md-typeset .admonition.important,
.md-typeset details.important { --doc-adm: 0, 191, 165; background-color: rgba(var(--doc-adm), 0.10); }
.md-typeset .admonition.warning,
.md-typeset details.warning,
.md-typeset .admonition.caution,
.md-typeset details.caution,
.md-typeset .admonition.attention,
.md-typeset details.attention { --doc-adm: 255, 145, 0; background-color: rgba(var(--doc-adm), 0.12); }
.md-typeset .admonition.success,
.md-typeset details.success,
.md-typeset .admonition.check,
.md-typeset details.check { --doc-adm: 0, 200, 83; background-color: rgba(var(--doc-adm), 0.10); }
.md-typeset .admonition.danger,
.md-typeset details.danger,
.md-typeset .admonition.error,
.md-typeset details.error { --doc-adm: 255, 23, 68; background-color: rgba(var(--doc-adm), 0.10); }
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: var(--doc-header);
  --md-typeset-a-color: var(--doc-teal-bright);
  --md-accent-fg-color: var(--doc-teal-bright);
  /* 左メニューの選択中行の塗り。暗い地では沈みやすいので、アクセント（淡いブルーグレー）ではなく
     ブルー(--doc-teal)を濃いめ(22%)に敷く。 */
  --doc-nav-active-fill: color-mix(in srgb, var(--doc-teal) 22%, transparent);
  /* 選択中行の左バー。ダークはブルー。 */
  --doc-nav-active-bar: var(--doc-teal);
}

/* ---- 画面幅いっぱいのレイアウト（SORACOM 風・サイドメニューを左端へ） ----
   Material 既定の中央寄せ（max-width: 61rem）を解除し、全幅で使う。
   これにより左サイドメニューが画面左端に寄り、本文・右目次も広く使える。 */
.md-grid {
  max-width: 100%;
}

/* メイン領域の上マージンと、コンテンツ上部のスペーサーを除去。
   これでタイトルバナーがヘッダー直下に密着し、上の白余白が消える。 */
.md-main__inner {
  margin-top: 0;
}
.md-content__inner {
  padding-top: 0;
}
.md-content__inner::before {
  display: none;
}

/* ---- ヘッダーは影なしフラットに ---- */
/* palette: primary:black は Material がヘッダー色を直接固定するため、--doc-header（および
   --md-primary-fg-color）が効かない。ここで明示的に var(--doc-header) を適用し、
   ヘッダー背景も変数1つで制御できるようにする（!important で primary:black の指定に勝つ）。 */
.md-header {
  box-shadow: none;
  background-color: var(--doc-header) !important;
}

/* ---- 選択中ページのタイトル(H1)をティールのバナーに（SORACOM 風） ----
   独立した帯ではなく、ページ見出しそのものの背景をティールにし、
   コンテンツ領域の上端・左右いっぱいまで広げる。 */
.md-content__inner > h1 {
  display: flex;
  align-items: center;
  min-height: 5.5rem;                /* 帯の高さを一定にし、右目次の下げ量と揃える */
  /* モバイル/タブレット（1カラム）用の既定：本文の左右パディング(0.8rem)ぶんだけ外へ広げ、
     帯を画面幅いっぱいにする（横にはみ出さない）。デスクトップの3カラム用の全幅化は
     下の @media(min-width:76.25em) で上書きする。 */
  margin: 0 -0.8rem 1.2rem -0.8rem;
  padding: 0 1.35rem;
  background: var(--doc-teal-bright); /* 帯の背景（アクセントの明るい色） */
  color: var(--doc-banner-text);      /* 帯の文字色（背景上で読みやすい濃色） */
}

/* ダークモード：明るい単色のタイトル帯は暗いページ上で「浮いて」見えるため、半透明の
   地にしてページになじませ（透過）、文字色も明色に切り替える。
   色味は青寄りに（ティールより青いアクセント #4a90d9）、透過は 22%。
   色味/濃さはこの色と数値で調整可能。 */
[data-md-color-scheme="slate"] .md-content__inner > h1 {
  background: color-mix(in srgb, #4a90d9 22%, transparent);   /* 青のアクセント（ダーク帯専用の一回きりの色） */
  color: var(--md-typeset-color);
}

/* デスクトップ（右目次が出る幅）では、タイトル帯を目次の上まで全幅に伸ばし、
   右目次を帯の下へ配置する（SORACOM 風）。狭い画面では目次が無いため適用しない。 */
@media screen and (min-width: 76.25em) {
  /* タイトル帯を本文領域の右端（＝スクロールバーの左）まで全幅に伸ばす。
     以前は「目次幅+24px」の固定量で右端に合わせていたが、ブラウザのズーム倍率で
     スクロールバー幅などが端数になると数px の隙間が出ていた。
     そこで固定量に頼らず、帯を大きめ(-50vw)に伸ばし、本文コンテナ(.md-main__inner)の
     右端で clip する。どのズームでも隙間なく端まで届き、横スクロールも出ない。 */
  .md-main__inner {
    overflow-x: clip;
  }
  .md-content,
  .md-content__inner {
    overflow-x: visible;   /* 帯が clip コンテナ(.md-main__inner)まで溢れられるように */
  }
  .md-content__inner > h1 {
    margin-left: -1.2rem;   /* content__inner の左マージン(1.2rem)を相殺し、帯の左端を区切り線に合わせる */
    margin-right: -50vw;    /* 大きめに伸ばし、.md-main__inner の右端で clip される */
  }
  .md-sidebar--secondary {
    width: var(--toc-width);         /* 既定 12.1rem より狭める */
    margin-top: 5.5rem;              /* タイトル帯の高さ分だけ目次を下げ、帯の下に配置 */
  }
}

/* ---- 左サイドメニュー（SORACOM 風） ----
   (0)〜(8) の装飾は「左メニューが列で表示される幅」＝ 60em 以上に適用する。
   ・≥76.25em … 3カラム（本文＋右目次）
   ・60〜76.25em … 案Bで左メニューを列表示（右目次なし）
   どちらも同じ SORACOM 風装飾（グレー地・区切り線・フラット寄せ）で揃える。
   <60em は Material 標準のドロワー表示に任せる（装飾を適用しない）。 */
@media screen and (min-width: 60em) {

/* (0) サイドメニュー右側の区切り線。
   注意: .md-sidebar--primary 要素自体は高さ約40pxしかなく（実スクロール内容は scrollwrap が保持）、
   ここに border を置くと上部40pxだけの「短い縦線」になる。全高の scrollwrap 側に置く（下部参照）。 */
.md-sidebar--primary {
  padding-top: 0.8rem;   /* 既定 1.2rem は上が空きすぎるので詰める（スイッチャー下の余白と揃える） */
  /* sticky で作られるサイドバーの重なり階層を、区切り線(.md-container::before, z-index:1)より
     前面に上げる。これをしないと、サイドバー内の製品切替プルダウン(z-index:100)がこの階層に
     閉じ込められ、区切り線がプルダウンより前面に出てしまう。 */
  z-index: 2;
}
/* 右側のスクロールバー用ガター（余白）を詰めて、メニュー項目を右端（境界線）まで届かせる。
   Material 側の指定に勝つため !important で右側の margin / padding をまとめて 0 にする。 */
.md-sidebar--primary .md-sidebar__scrollwrap,
.md-sidebar--primary .md-sidebar__inner,
.md-sidebar--primary .md-nav--primary,
.md-sidebar--primary .md-nav--primary > .md-nav__list {
  margin-right: 0 !important;
  padding-right: 0 !important;   /* .md-sidebar__inner の右パディング(約8px)が残っていたのが白帯の正体。ここで除去 */
}
/* スクロールバーが幅（約8px）を取ると、その分グレー行が右端まで届かず白く残る。
   スクロールバーを非表示にして、グレー行を右端（ティール帯）まで届かせる。
   スクロール自体はホイール／トラックパッドで引き続き可能。 */
.md-sidebar--primary .md-sidebar__scrollwrap {
  scrollbar-gutter: auto !important;
  scrollbar-width: none;                                            /* Firefox 等：非表示 */
}
/* サイドバー右の区切り線。
   .md-sidebar--primary(約40px) や scrollwrap(内容依存) に border を置くと「短い線」になり、
   全高にしようと min-height を足すとページスクロールが増えてしまう。
   そこで、ヘッダー下で常にビューポート全高を占める .md-container 上に、サイドバー右端
   (= 12.1rem / 242px) の位置で縦線を引く。絶対配置だが親(.md-container)の高さに収まるため
   スクロールは増えない（この節全体が上の min-width:76.25em 内なので media 指定は不要）。 */
  .md-container {
    position: relative;
  }
  .md-container::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 12.1rem;                /* = .md-sidebar--primary の幅(242px) */
    width: 1px;
    background: color-mix(in srgb, var(--md-default-fg-color) 20%, transparent);
    pointer-events: none;
    z-index: 1;
  }
.md-sidebar--primary .md-sidebar__scrollwrap::-webkit-scrollbar {
  width: 0;                                                         /* Chrome/Edge/Safari：非表示 */
}

/* (1) 項目ごとに点線の区切り線 — SORACOM の最も特徴的な見た目。
   Material のドロワー既定は項目に「上ボーダー(1px solid)」を付ける（<76.25em で有効）。
   これが点線の下ボーダーと二重になるので border-top: none で消し、点線1本に統一する。 */
.md-sidebar--primary .md-nav__list .md-nav__item {
  border-top: none;
  border-bottom: 1px dotted var(--md-default-fg-color--lightest);
}
.md-sidebar--primary .md-nav__list .md-nav__item:last-child {
  border-bottom: none;
}

/* (2) 各行をゆったりさせる（上下の余白＋文字の左に余白） */
.md-sidebar--primary .md-nav__link {
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
  padding-left: 0.7rem;   /* 選択中ハイライトの塗り左端と文字の間に余白を作る */
  padding-right: 0.6rem;
}

/* (3) セクション見出し（最上位項目）を太字に */
.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link {
  font-weight: 700;
}

/* (4) 選択中ページのハイライト。
   注意: 最上位項目には (7) で 6% のグレー背景が付いている。以前はここが 12% だったため、
   ダークモードではアクセント色(--doc-teal-bright = 淡いブルーグレー)との差が
   実質 6% ほどしかなく、どこが選択中か判別できなかった。
   塗り（--doc-nav-active-fill：ライト12% / ダーク22%、いずれもブルー）を敷いたうえで、
   左端にアクセントバーを足して確実に見分けられるようにする。 */
.md-sidebar--primary .md-nav__link--active,
.md-sidebar--primary .md-nav__link[aria-current="page"] {
  background: var(--doc-nav-active-fill) !important;
  color: var(--md-default-fg-color);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--doc-nav-active-bar);
}

/* (5) ネスト見出し（詳細情報・チュートリアル）の行は「ラベル + 展開トグル」の
   2要素で、既定の flex gap が背景表示時に「白い縦線」に見える。
   gap を 0 にして 1 行に一体化し、内側要素の二重パディングも打ち消す。 */
.md-sidebar--primary .md-nav__container {
  gap: 0;
}
.md-sidebar--primary .md-nav__container > .md-nav__link {
  padding-left: 0;       /* 外側コンテナのパディングを使うので内側は 0（葉項目と文字位置を揃える） */
}
/* 選択中（セクションの index ページ表示時）は、内側個別ではなく行全体を塗る */
.md-sidebar--primary .md-nav__container:has(> .md-nav__link--active) {
  background: var(--doc-nav-active-fill) !important;
  box-shadow: inset 3px 0 0 var(--doc-nav-active-bar);
}
.md-sidebar--primary .md-nav__container > .md-nav__link--active {
  background: transparent !important;   /* 行全体（コンテナ）の1層だけで塗る。内側にも塗るとティールが二重に重なってムラになる */
  box-shadow: none;                     /* アクセントバーもコンテナ側の1本だけにする（二重線の防止） */
}

/* (6) 階層インデントを廃止し、全項目を左揃えにする。
   各階層のリスト／項目の左余白を 0 にし、リンクの左パディングを統一する。
   Material 側の指定に勝つため !important を使用。 */
.md-sidebar--primary .md-nav,
.md-sidebar--primary .md-nav__list,
.md-sidebar--primary .md-nav__item {
  padding-left: 0 !important;
  padding-right: 0 !important;   /* 右の余白も除去し、グレー行を右端（境界線）まで届かせる */
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.md-sidebar--primary .md-nav__link {
  padding-left: 0.7rem !important;   /* 全階層のリンクを同じ左パディングに統一 */
  margin: 0 !important;              /* 既定の上マージン(9.6px)・右マージン(8.8px)を除去し、グレー行を隙間なく連続させる（区切りは点線のみ） */
}
.md-sidebar--primary .md-nav__container > .md-nav__link {
  padding-left: 0 !important;        /* 見出し行はコンテナ側の 0.7rem を使う（二重防止） */
}

/* (7) 子項目以外（最上位の項目）に薄いグレー背景（SORACOM 風）。
   ルート直下の項目（単独ページ＋セクション見出し）だけを対象にし、子項目には付けない。
   アクティブ時のティールは上の active ルール（!important）が優先される。 */
.md-sidebar--primary .md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link,
.md-sidebar--primary .md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__container {
  background: color-mix(in srgb, var(--md-default-fg-color) 6%, transparent);
}

/* (8) セクション見出し（コンテナ）の既定マージン（上 9.6px・右 8.8px）を除去。
   これがグレー行の「上の白い隙間」と「右の白い余白」になっていた。
   グレー行を隙間なく連続させ、区切りは点線だけにする（SORACOM 風）。
   さらに、コンテナ自身が持つ上下パディング(0.55rem×2)を 0 にする。これが内側リンクの
   パディングと二重になり、セクション見出し(詳細情報・チュートリアル)の行だけ
   高さが 62px(他は 40px)に膨らむ原因だった。高さは内側リンクの padding で保たれる。 */
.md-sidebar--primary .md-nav__container {
  margin-top: 0 !important;
  margin-right: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* (9) 行の高さを全項目で統一する。
   60〜76.25em では Material のドロワー既定フォント(16px/行1.5=24px)が効いて行が高くなり、
   さらにセクション見出し(詳細情報・チュートリアル)の内側リンクは上下パディングが 0 になって
   高さがバラつく（見出しだけ詰まって見える）。デスクトップと同じ 14px/行18.2px・上下0.55rem
   に統一して、全項目の高さを揃える（≥76.25em は元々この値なので影響なし）。 */
.md-sidebar--primary .md-nav__item,
.md-sidebar--primary .md-nav__link {
  font-size: 0.7rem;      /* 14px */
  line-height: 1.3;        /* 14px × 1.3 = 18.2px */
}
.md-sidebar--primary .md-nav__container > a.md-nav__link {
  padding-top: 0.55rem;    /* 見出しのテキストリンク(a)にだけ通常行と同じ上下パディングを付与。
                              トグル(label＝⌄アイコン)には付けない（付けると 24+22=46px に膨らむ）。 */
  padding-bottom: 0.55rem;
}

} /* end @media (min-width: 60em) — 左サイドメニュー装飾（列表示の幅すべて） */

/* ---- 右目次：アクティブ見出しのインジケータをティールに ---- */
.md-nav--secondary .md-nav__link--active {
  color: var(--doc-teal);
}

/* ---- 右目次（ページ内 TOC）を控えめに ＋ 階層差をつける ---- */
/* 第1階層（H2）の基準サイズ。本文より小さくして軽い印象に（rem で絶対指定） */
.md-nav--secondary .md-nav__link {
  font-size: 0.6rem;
}
/* 第1階層（H2 見出し）は太字で強調 */
.md-nav--secondary > .md-nav__list > .md-nav__item > .md-nav__link {
  font-weight: 600;
}
/* 第2階層以下（H3 など）は小さく・薄めにして階層を区別（アクティブ時のティールは維持）。
   Material は入れ子に独自のフォントサイズを持つため、em ではなく rem で確実に小さくする。 */
.md-nav--secondary .md-nav .md-nav__link {
  font-size: 0.54rem;
}
.md-nav--secondary .md-nav .md-nav__link:not(.md-nav__link--active) {
  color: var(--md-default-fg-color--light);
}

/* ---- スクロールバー等のアクセントをティールに ---- */
:root {
  --md-scrollbar-color: var(--doc-teal);
}

/* ===== 製品ドキュメント切り替え（サイドメニュー最上部） ===== */

/* スイッチャー(タイトル)の box-shadow を除去。
   Material 既定では「背景色のシャドウ(ぼかし)」でスクロール内容を隠すが、
   これが直下の「概要」ハイライト（ティール）の上端に白いフェードとして被さり、
   グラデーションのように見えていた。 */
.md-sidebar--primary .md-nav__title {
  box-shadow: none;
  padding-bottom: 0.8rem;   /* Gateway Manager の下に余白を入れ、概要との間隔を上側と揃える */
}

/* ドロワー表示（ハンバーガーが出る幅）では、Material 既定のタイトルバー装飾
   （薄グレー地・大きな上余白・固定高さ・下線）が製品切替UIに被さって崩れて見える。
   その装飾を打ち消し、デスクトップ同様のすっきりした見た目に揃える。
   ※ 対象は最上部の切替UI（ルートの md-nav__title）だけに限定する。入れ子セクションの
     見出し（詳細情報・チュートリアル）は Material 標準のまま＝「‹ 戻る」ボタンの配置を壊さない。 */
@media screen and (max-width: 76.2394em) {
  .md-sidebar--primary .md-nav--primary > .md-nav__title {
    height: auto;
    min-height: 0;
    padding: 0.9rem 0.8rem 0.6rem;
    line-height: 1.4;
    white-space: normal;
    background-color: transparent;
    border-bottom: none;
  }

}

/* ドロワー幅（<60em）のみ：ヘッダーを常時最前面に固定し、ドロワー（左メニュー）と暗幕を
   ヘッダーの下から始める。60〜76.25em は左メニューを「列」として残すため（下の案Bブロック）、
   ここには含めない。2.4rem = ヘッダー高さ(48px)。 */
@media screen and (max-width: 59.9375em) {
  .md-header {
    z-index: 6;   /* ドロワー/暗幕(5)より前面に */
  }
  .md-sidebar--primary,
  .md-overlay {
    top: 2.4rem;
    height: calc(100% - 2.4rem);
  }
}

/* ===== 案B：中間幅（60em〜76.25em / iPad横など）は左メニューを「列」で残し、右目次を省く =====
   Material は max-width:76.234375em で左メニューをドロワー化するが、この範囲ではそれを打ち消して
   デスクトップ同様の「sticky 列 ＋ 縦展開ツリー」に戻す。右目次(TOC)は非表示にする。
   （デスクトップ ≥76.25em の 3 カラム装飾は別途 min-width:76.25em で適用済み。ここは Material
   標準の列表示 ＋ 必要最小限の上書きにとどめる。） */
@media screen and (min-width: 60em) and (max-width: 76.234375em) {
  /* ハンバーガーを隠し、右目次(TOC)を省く */
  .md-header__button[for="__drawer"] { display: none; }
  .md-sidebar--secondary { display: none !important; }
  /* ヘッダーのロゴ(iot-mos)を表示する。Material は <76.25em で非表示にするため、
     デスクトップと同じ block 表示に戻して見た目を揃える。 */
  .md-header__button.md-logo { display: block; }
  /* 本文に左メニュー分の余白（Material デスクトップと同じ 1.2rem） */
  [dir="ltr"] .md-sidebar--primary:not([hidden]) ~ .md-content > .md-content__inner {
    margin-left: 1.2rem;
  }
  /* タイトル帯の左端を区切り線（サイドバー右端）まで寄せる。既定(-0.8rem)だと区切り線と帯の
     間に約8pxの白い隙間ができるため、デスクトップ同様 -1.2rem にして密着させる。 */
  .md-content__inner > h1 {
    margin-left: -1.2rem;
  }

  /* 左メニュー：ドロワー(position:fixed, 画面外, translateX)をやめ、ベースの sticky 列へ戻す */
  .md-sidebar--primary {
    position: sticky;
    top: 2.4rem;
    left: auto;
    height: auto;
    transform: none !important;
    background-color: transparent;
    box-shadow: none !important;
    z-index: 2;   /* 区切り線(z-index:1)より前面に。プルダウンがサイドバー階層に閉じ込められて
                     区切り線の背面に隠れるのを防ぐ（上の (0) と同じ理由）。 */
  }
  .md-sidebar--primary .md-sidebar__scrollwrap {
    position: static;
    inset: auto;
    margin: 0;
    overflow: visible;
  }

  /* ドロワー用にルート/入れ子ナビが position:absolute; top:0; z-index:1; 白背景で重ねられて
     いるのを解除。position を戻さないと子項目がサイドバー上端に重なり、z-index:1 と白背景の
     リストが残ると -8px マージンで重なった入れ子リストがチュートリアルのグレーを覆う
     （＝用語集とチュートリアルの間に白帯が出る）。透明化＋z-index解除で下のグレーを見せる。 */
  .md-nav--primary,
  .md-nav--primary .md-nav,
  .md-nav--primary .md-nav__list {
    position: static;
    height: auto;
    background-color: transparent;
    z-index: auto;
  }
  /* 入れ子ナビのリストに付くドロワー用の白背景＋内側シャドウを消す。
     Material は .md-nav__title~.md-nav__list(詳細度0,3,0) に白背景を付けており、これが
     -8px マージンで重なってチュートリアルのグレーを白く覆っていた（＝白帯の正体）。 */
  .md-nav--primary .md-nav__title ~ .md-nav__list {
    background-color: transparent;
    box-shadow: none;
  }

  /* 入れ子ナビ下の間隔をデスクトップと揃える。デスクトップは list に padding-bottom:.4rem があり、
     nav の margin-bottom:-.4rem(-8px) を相殺して次セクションとの間にきれいな隙間ができる。
     案Bにはこの padding が無く -8px の margin だけ効いて、次セクション(チュートリアル等)が
     上に食い込んで詰まって見えていた。 */
  .md-nav--primary .md-nav__list {
    padding-bottom: 0.4rem;
  }

  /* ナビ：ドロワーの横スライドから、デスクトップの縦展開ツリーへ */
  .md-nav--primary .md-nav__title .md-nav__icon { display: none; }        /* 「戻る」矢印を隠す */
  .md-nav__item--nested > .md-nav > .md-nav__title { display: none; }      /* 入れ子セクション見出しを隠す */
  .md-nav__toggle ~ .md-nav {
    display: grid;
    grid-template-rows: minmax(0.4rem, 0fr);
    opacity: 0;
    visibility: collapse;
    transform: none;
    transition: grid-template-rows 0.25s, opacity 0.25s, visibility 0ms 0.25s;
  }
  .md-nav__toggle ~ .md-nav > .md-nav__list { overflow: hidden; }
  .md-nav__toggle:checked ~ .md-nav,
  .md-nav__toggle.md-toggle--indeterminate ~ .md-nav {
    grid-template-rows: minmax(0.4rem, 1fr);
    opacity: 1;
    visibility: visible;
  }
  /* 展開時に開閉アイコンを回転（デスクトップと同じ挙動） */
  .md-nav__item--nested .md-nav__toggle:checked ~ .md-nav__link .md-nav__icon:after {
    transform: rotate(90deg);
  }

  /* 切替UI(ルート見出し)の上余白をデスクトップと揃える。
     ドロワー用の見出し整形(max-width:76.2394em)が付ける上パディング0.9remを打ち消し、
     上余白はサイドバー側の padding-top(0.8rem) に任せる（切替UIが 18px 下がるのを防ぐ）。 */
  .md-sidebar--primary .md-nav--primary > .md-nav__title {
    padding-top: 0;
  }

  /* セクション見出しの開閉アイコン(⌄)を、デスクトップと同じ 0.9rem・行の中央に揃える。
     ドロワー既定ではアイコン1.2rem・トグルが上寄せ(高さ24px)になり、大きく上にずれて見える。
     アイコンを0.9remにし、トグル(label)に通常行と同じ上下パディングを与えて高さ40px＝中央寄せに。 */
  .md-sidebar--primary .md-nav__link .md-nav__icon {
    height: 0.9rem;
    width: 0.9rem;
    font-size: 0.9rem;
  }
  .md-sidebar--primary .md-nav__container > label.md-nav__link {
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
  }
}

.ps {
  position: relative;
}
.ps__brand {
  font-size: 0.64rem;
  letter-spacing: 0.02em;
  /* iot-mos は常に小文字。uppercase を付けると「IOT-MOS」になるため使わない。 */
  text-transform: none;
  font-weight: 600;
  color: var(--md-default-fg-color--light);
}
.ps__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  width: 100%;
  margin-top: 0.15rem;
  padding: 0.2rem 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--md-default-fg-color);
}
.ps__chevron {
  flex: 0 0 auto;
  color: var(--md-default-fg-color--light);
  transition: transform 0.15s ease;
}
.ps__toggle[aria-expanded="true"] .ps__chevron {
  transform: rotate(180deg);
}
/* ドロップダウン本体（position: fixed でサイドバーの overflow に隠れないようにする。
   表示位置は JS が toggle の真下に合わせて設定する） */
.ps__menu {
  position: fixed;
  z-index: 100;
  max-width: 320px;
  padding: 0.3rem;
  /* 背景がページ/サイドバーと同色(--md-default-bg-color)だと境界が溶けて「透過」して見えるため、
     境界線と影を強めて明確に「浮いたパネル」に見せる。 */
  background: var(--md-default-bg-color);
  border: 1px solid var(--md-default-fg-color--lighter);
  border-radius: 6px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
}
/* ダークモードは背景がページと同じ暗色で特に溶けるので、少し明るい面色にして浮かせる。 */
[data-md-color-scheme="slate"] .ps__menu {
  background: color-mix(in srgb, var(--md-default-bg-color), #ffffff 7%);
}
.ps__item {
  display: block;
  padding: 0.5rem 0.6rem;
  border-radius: 4px;
  text-decoration: none;
  color: var(--md-default-fg-color);
}
/* ホバーは押せる項目だけに（未公開の「準備中」項目には付けない） */
.ps__item:not(.ps__item--soon):hover {
  background: color-mix(in srgb, var(--md-default-fg-color) 6%, transparent);
}
.ps__item.is-current {
  background: color-mix(in srgb, var(--md-accent-fg-color) 12%, transparent);
}
/* ドキュメント未公開の製品：クリック不可・ホバー無し。薄い文字＋「準備中」バッジで明示。 */
.ps__item--soon {
  cursor: default;
  color: var(--md-default-fg-color--light);
}
.ps__item--soon .ps__item-name {
  color: var(--md-default-fg-color--light);
}
.ps__item-soon {
  display: inline-block;
  margin-left: 0.3rem;
  vertical-align: middle;
  font-size: 0.5rem;
  padding: 0.02rem 0.35rem;
  border-radius: 999px;
  color: var(--md-default-fg-color--light);
  background: color-mix(in srgb, var(--md-default-fg-color) 8%, transparent);
}
.ps__item-name {
  display: block;
  font-size: 0.72rem;
  font-weight: 400;   /* 太字をやめて控えめに */
}
.ps__item.is-current .ps__item-name {
  color: var(--md-accent-fg-color);
}
.ps__item-sub {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.5rem;
  line-height: 1.45;
  color: var(--md-default-fg-color--lighter);   /* より薄い色で控えめに */
}

/* ---- 表：行ホバーのハイライトを無効化 ---- */
/* 表はクリックできないのに Material 既定は行をホバーで強調するため紛らわしい。打ち消す。 */
.md-typeset table:not([class]) tbody tr:hover {
  background-color: transparent;
  box-shadow: none;
}

/* ---- カード（.grid.cards）：カード全体をクリック可能に ---- */
/* タイトルだけがリンクだと本体を押しても飛べず、ホバーだけあって紛らわしい。
   タイトルのリンクを疑似要素でカード全面に広げ、カードのどこを押しても遷移できるようにする。
   （カード内のリンクはタイトル1つ想定。本文にもリンクを置く場合はこの疑似要素を見直す。） */
.md-typeset .grid.cards > ul > li {
  position: relative;
}
.md-typeset .grid.cards > ul > li > p:first-child a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;   /* カード本文より前面に出し、カードのどこを押してもリンクが当たるように */
}

/* ---- 注釈ボックス／折りたたみ内のインラインコード ---- */
/* Material 既定の不透明グレー背景(#f5f5f5)だと色付きの admonition から浮いて「グレーの
   マーカー」に見え、逆に薄すぎると見にくい。地より少し明るい/暗い半透明の「チップ」にして、
   はっきり浮かせつつ地の色も少し透けてなじませる。境界も薄く縁取って読みやすくする。
   ライト＝明るいチップ（濃い文字）／ダーク＝暗いチップ（明るい文字）。 */
.md-typeset .admonition code,
.md-typeset details code {
  /* その admonition の種別色(--doc-adm)を濃いめ(22%)に敷いた「色味のあるチップ」。
     色でコードと分かるので縁取りは不要。ライト/ダーク共通で成立する。
     種別色が無い場所(FAQ 等)は中立色にフォールバック。 */
  background-color: rgba(var(--doc-adm, 120, 130, 150), 0.22);
  box-shadow: none;
}

/* ===== グリッドカードの見出し（アイコンと文字を上下中央で揃える） ===== */
/* Material 既定ではアイコン(.twemoji)が vertical-align: text-top のため、
   文字の中心より約 2px 上にずれて見える。見出し行を flex にして中央で揃える。
   flex 化するとアイコンと文字の間にある空白テキストノードが flex アイテムにならず
   消えてしまうため、gap で元の間隔(≒3px)を補う。 */
.md-typeset .grid.cards > ul > li > p:first-child {
  display: flex;
  align-items: center;
  gap: 0.22em;
}

/* ===== 見出しの階層（太さの逆転を解消） ===== */
/* Material の既定は h2:300 / h3:400。h2 の方が大きい(21.9px vs 17.5px)のに太さだけ逆転し、
   下位の h3 が親の h2 より太く見えてしまう。h2 を h3 と同じ 400 に上げ、
   「サイズが大きい方が強い」という素直な階層に戻す（h3 は既定の 400 のまま）。 */
.md-typeset h2 {
  font-weight: 400;
}

/* ===== マルチプロダクト構成（ハブ＋製品別サイト）向けの追加 ===== */

/* ブランド「iot-mos」はハブ（ドキュメント一覧）へのリンクになった（旧: 単なる <div>）。
   見た目はテキストのまま、ホバーで少し濃くして「押せる」ことだけ示す。 */
a.ps__brand {
  display: block;
  text-decoration: none;
  color: var(--md-default-fg-color--light);
}
a.ps__brand:hover {
  color: var(--md-default-fg-color);
}

/* ポータル（ドキュメント一覧）の「準備中」製品カード。
   リンクを持たないカードは全面クリックが効かないため、ホバーで枠が強調される
   Material 既定を打ち消し、「押せそうなのに押せない」状態を作らない
   （切替メニューの .ps__item--soon と同方針）。文字も薄くして状態を示す。 */
.md-typeset .grid.cards > ul > li:has(.doc-soon-badge) {
  color: var(--md-default-fg-color--light);
}
.md-typeset .grid.cards > ul > li:has(.doc-soon-badge):hover {
  border-color: var(--md-default-fg-color--lightest);
  box-shadow: none;
}
/* 「準備中」バッジ（切替メニューの .ps__item-soon と同じ見た目のピル） */
.doc-soon-badge {
  display: inline-block;
  vertical-align: middle;
  font-size: 0.55rem;
  font-weight: 400;
  padding: 0.02rem 0.35rem;
  border-radius: 999px;
  color: var(--md-default-fg-color--light);
  background: color-mix(in srgb, var(--md-default-fg-color) 8%, transparent);
}

/* サイドメニューを持たないページ（ポータルなど、front matter の hide: navigation）への対応。
   経緯:
   - 区切り線（.md-container::before）はサイドバーの有無と無関係に引かれるため、
     ポータルでは「何も無い場所に縦線だけが浮く」状態になっていた。線ごと消す。
   - 60〜76.25em の案B ブロックはドロワー既定（translateX で画面外）を打ち消すため、
     Material がドロワー用に当てる display:block が [hidden] の UA 既定（display:none）に
     勝ってしまい、隠したはずのサイドバーが中間幅でだけ復活していた。
     [hidden] をどの幅でも最優先にして常に非表示を保つ。 */
.md-container:has(.md-sidebar--primary[hidden])::before {
  content: none;
}
.md-sidebar--primary[hidden] {
  display: none !important;
}