/* ===== テーマカラー =====
   ヘッダー／フッターはダークネイビー、アクセントは GaitForce イエロー。
   Material の既定パレットに該当色がないため primary: custom として定義する。
   色を変えたい場合は下の --md-primary-fg-color 系を書き換える。 */
:root {
  --gf-yellow: #ffc60b;
  --gf-navy: #1b2a4a;
  --gf-navy-light: #33477a;
  --gf-navy-dark: #101b33;
}

[data-md-color-primary="custom"] {
  --md-primary-fg-color: var(--gf-navy);
  --md-primary-fg-color--light: var(--gf-navy-light);
  --md-primary-fg-color--dark: var(--gf-navy-dark);
  /* primary 上に乗る文字・アイコンの色 */
  --md-primary-bg-color: #fff;
  --md-primary-bg-color--light: hsla(0, 0%, 100%, 0.7);
}

/* フッターの背景色は primary に連動しない別変数のため、ヘッダーと揃える */
[data-md-color-scheme="default"],
[data-md-color-scheme="slate"] {
  --md-footer-bg-color: var(--gf-navy);
  --md-footer-bg-color--dark: var(--gf-navy-dark);
}

[data-md-color-accent="amber"] {
  --md-accent-fg-color: var(--gf-yellow);
  --md-accent-fg-color--transparent: hsla(46, 100%, 52%, 0.1);
}

/* Material はリンクのホバー色にアクセント色を使うが、イエローは白背景では
   コントラストが不足する。ライトモードのみ濃紺に差し替える
   （ダークモードは背景が暗いためイエローのままで可読）。 */
[data-md-color-scheme="default"] .md-typeset a:focus,
[data-md-color-scheme="default"] .md-typeset a:hover {
  color: var(--gf-navy-light);
}

/* ヘッダーロゴを見やすいサイズに。
   ヘッダーの高さは 2.4rem。既定の padding(.4rem)+margin(.2rem) では
   ロゴの表示領域が 1.2rem しか残らないため、余白を詰めて拡大する。
   大きさの調整は下の height を変更する（上限の目安: 2rem）。 */
.md-header__button.md-logo {
  padding: 0.2rem 0.4rem;
  margin: 0;
}

.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 1.8rem;
  width: auto;
}

/* 本文中の画像を中央寄せし、枠線で紙面と区別する */
.md-typeset img {
  display: block;
  margin-inline: auto;
  max-width: 100%;
  border-radius: 4px;
}

.md-typeset figure img {
  border: 1px solid var(--md-default-fg-color--lightest);
}

.md-typeset figcaption {
  margin-top: 0.4em;
  font-size: 0.75rem;
  color: var(--md-default-fg-color--light);
}

/* 画像のライト/ダーク出し分け
   Markdown 側で `![alt](path.png#only-light)` / `#only-dark` と指定すると、
   配色に応じて片方だけを表示する。Material 本体には同梱されていないため定義する。 */
[data-md-color-scheme="default"] img[src$="#only-dark"],
[data-md-color-scheme="slate"] img[src$="#only-light"] {
  display: none;
}

/* ロゴ画像には枠線を付けない */
.md-typeset .no-border img,
.md-typeset img.no-border {
  border: none;
}

/* 表を読みやすく */
.md-typeset table:not([class]) th {
  background-color: var(--md-default-fg-color--lightest);
}

/* 手順番号（①②③）を強調 */
.md-typeset .step {
  font-weight: 700;
}