/* --- 全体・色の定義 --- */
:root {
  --brand-orange: #FF921D; /* 公式サイトのオレンジ */
  --brand-cyan: #019ac6;   /* 公式サイトのシアン */
  --bg-beige: #fff9e5;     /* システム画面の薄いベージュ */
}

/* --- ヘッダー（トップバー）の背景色を画像の色に変更 --- */
.md-header {
  background-color: #404040 !important; /* 添付画像から抽出したダークグレー */
  color: white;
}

/* タブ表示（navigation.tabs）を有効にしている場合の背景色も合わせる */
.md-tabs {
  background-color: #404040 !important;
  color: white;
}

.md-tabs__item--active {
  color: var(--brand-orange);
  font-weight: bold;
}

/* 検索窓をヘッダー内の独立した入力領域として強調 */
.md-search__form {
  background-color: #fff;
  border: 4px solid var(--brand-orange);
  border-radius: 4px;
}

.md-search__input {
  color: #333;
}

.md-search__input::placeholder {
  color: #666;
  font-weight: 700;
  opacity: 1;
}

.md-search__form:focus-within {
  box-shadow: 0 0 0 3px rgba(255, 146, 29, 0.3);
}

.md-search-result__meta {
  font-size: 1.1rem !important;
  font-weight: 700;
}

@media screen and (min-width: 60em) {
  .md-search {
    width: min(20rem, 30vw);
    margin-left: 0.5rem;
    margin-right: 0.5rem;
  }
}

/* --- 見出しの階層化（ここが重要） --- */

/* H1: ページタイトル - 最も大きく、ブランドカラーで強調 */
article h1 {
  font-size: 1.8em;
  font-weight: 700;
  color: #333;
  padding-bottom: 0.5em;
  border-bottom: 4px solid var(--brand-orange); /* 下線で区切りを明確に */
  margin-top: 1em;
  margin-bottom: 1em;
}

/* H2: 大見出し - セクションの区切り */
article h2 {
  font-size: 1.5em;
  font-weight: 700;
  color: #444;
  padding: 0.5em 0.8em;
  background-color: #f8f8f8; /* 非常に薄いグレーの背景 */
  border-left: 6px solid var(--brand-orange); /* 左側の太い線 */
  margin-top: 2em;
}

/* H3: 中見出し - 手順や小項目の区切り */
article h3 {
  font-size: 1.2em;
  font-weight: 700;
  color: #555;
  border-left: 4px solid var(--brand-cyan); /* 水色の細い線に変えて差別化 */
  padding-left: 12px;
  background-color: transparent; /* 背景を消してH2より軽くする */
  margin-top: 1.5em;
  border-bottom: 1px solid #eee; /* 下に細い線を引いて読みやすく */
  padding-bottom: 5px;
}

/* --- 画像のデザイン（視認性アップ） --- */
article img {
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 3px 3px 3px #888888;
  margin: 1.5em 0;
  background-color: #fff; /* 画像の周りに余白がある場合を考慮 */
}

.img-xs {
  width: 10%;
}

.img-sm {
  width: 50%;
}

.img-md {
  width: 70%;
}

.img-lg {
  width: 100%;
}

.youtube-video {
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 1.5rem auto 2rem;
}

.youtube-video iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* --- サイドバーの微調整 --- */
.md-nav__link--active {
  color: var(--brand-orange) !important; /* 現在のページをオレンジに */
  font-weight: bold;
}

/* --- サイドバーの階層表現（PC表示） ---
   第1階層（タブ名）→ 第2階層（機能名）→ 第3階層（操作手順／よくある質問）→ ページ
   の順に、第2階層の機能名を最も目立たせて現在位置を把握しやすくする。 */
@media screen and (min-width: 76.25em) {

  /* 第1階層: タブ名（例: 機能別ガイド）。第2階層より控えめにして区切り線でまとめる */
  .md-nav--primary > .md-nav__list > .md-nav__item--nested > .md-nav__link {
    color: #9a9a9a;
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    padding-bottom: 0.35rem;
    border-bottom: 0.05rem solid #e5e5e5;
  }

  /* 第2階層: 機能名（例: ICカード、ピットタッチ打刻）。帯とオレンジの縦線で強調 */
  .md-nav--primary .md-nav[data-md-level="1"] > .md-nav__list > .md-nav__item--nested {
    margin: 1.4em 0 0.5em;
  }

  .md-nav--primary .md-nav[data-md-level="1"] > .md-nav__list > .md-nav__item--nested > .md-nav__link {
    align-items: center;
    gap: 0.3rem;
    /* 左へ少しはみ出させて帯を作る（右端はデフォルトの余白に合わせる） */
    margin: 0 0.4rem 0.35em -0.4rem;
    padding: 0.3rem 0.4rem;
    background-color: #fff3e2;
    border-left: 0.15rem solid var(--brand-orange);
    border-radius: 0 0.15rem 0.15rem 0;
    color: #333;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.4;
  }

  /* 機能名のアイコンをブランドカラーにして視線の起点にする */
  .md-nav--primary .md-nav[data-md-level="1"] > .md-nav__list > .md-nav__item--nested > .md-nav__link .nav-material-icon {
    width: 1.2em;
    height: 1.2em;
    margin-right: 0;
  }

  .md-nav--primary .md-nav[data-md-level="1"] > .md-nav__list > .md-nav__item--nested > .md-nav__link .nav-material-icon svg {
    fill: var(--brand-orange);
  }

  /* 第3階層: 操作手順／よくある質問。小さめのラベル扱いにして機能名を引き立てる */
  .md-nav--primary .md-nav[data-md-level="2"] > .md-nav__list > .md-nav__item--nested > .md-nav__link {
    margin-top: 0.6em;
    color: #8c8c8c;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.02em;
  }
}

/* 文中のアイコン（Emoji/Material Icons）を垂直方向の中央に揃える */
.md-typeset .twemoji {
  vertical-align: middle;
  /* 文字との隙間を微調整したい場合は以下を有効にしてください */
  margin: 0em 0.25em 0em 0.25em;
}

/* リンク用アイコンのサイズや位置を微調整 */
.md-typeset a .twemoji {
  vertical-align: middle;
}

/* ナビゲーションタイトルに埋め込む Material Icons */
.md-nav__link .nav-material-icon,
.md-nav__title .nav-material-icon,
.md-tabs__link .nav-material-icon {
  display: inline-flex;
  width: 1.125em;
  height: 1.125em;
  margin-right: 0.35em;
  vertical-align: -0.2em;
}

.md-tabs__link .nav-material-icon {
  width: 1em;
  height: 1em;
  margin-right: 0em;
  vertical-align: -0.15em;
  font-size: 1.7em;
}

.md-nav__link .nav-material-icon svg,
.md-nav__title .nav-material-icon svg,
.md-tabs__link .nav-material-icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

/* アイコンに対してスクリプトで自動付与するコピー用テキストを画面上だけ隠す設定 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- 「トップに戻る」ボタン（navigation.top）を画面右下に固定表示 --- */
.md-top {
  top: auto !important;
  left: auto !important;
  right: 1.2rem;
  bottom: 1.2rem;
  margin: 0 !important;
  transform: none !important;
}

/* 非表示時もスライドさせず、フェードのみで切り替える */
.md-top[hidden] {
  transform: none !important;
}