/* ============================================================
   ページ内ナビゲーション
   ------------------------------------------------------------
   対象
     .toc
     .download-toc
     .sales-nav
     .help-nav

   共通クラス
     .page-nav
============================================================ */



/* ============================================================
   v30.6.1 hidden属性を最優先
   ------------------------------------------------------------
   .toc の display:flex が HTML の hidden 属性を上書きすると、
   TOC未登録ページに空のナビ枠だけが表示されるため抑止する。
============================================================ */
#app .toc[hidden],
.page-nav[hidden] {
  display: none !important;
}

/* ============================================================
   ナビ本体
============================================================ */

#app .toc,
.page-nav {

  position: sticky;

  top: 101px;

  z-index: 20;

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 8px;

  width: 100%;

  margin-bottom: 28px;

  padding: 12px;

  background:
    rgba(255, 255, 255, 0.96);

  border:
    1px solid var(--border);

  border-top:
    3px solid var(--primary);

  border-radius:
    14px;

  box-shadow:
    0 3px 12px rgba(0, 0, 0, 0.05);

  backdrop-filter:
    blur(8px);

}

/* ============================================================
   ラベル
============================================================ */

.toc-label {

  display:
    flex;

  align-items:
    center;

  padding:
    6px 10px;

  color:
    var(--primary);

  font-size:
    11px;

  font-weight:
    700;

  letter-spacing:
    .08em;

}

/* ============================================================
   TOC リンク領域
============================================================ */

#app .toc-links {

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 8px;

  flex: 1;

  min-width: 0;

}


/* ============================================================
   新しい共通ナビ
   リンクを左側にまとめる
============================================================ */

.page-nav > a {

  flex:
    0 0 auto;

}


/* ============================================================
   最小化ボタン
============================================================ */

.page-nav .nav-minimize,
#app .toc .toc-minimize {

  flex:
    0 0 auto;

  margin-left:
    auto;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  height:
    36px;

  padding:
    0 14px;

  border:
    1px solid var(--green);

  border-radius:
    999px;

  color:
    var(--white);

  background:
    var(--green);

  font-family:
    inherit;

  font-size:
    12px;

  font-weight:
    600;

  line-height:
    1;

  white-space:
    nowrap;

  cursor:
    pointer;

  appearance:
    none;

  -webkit-appearance:
    none;

  transition:
    background-color .2s ease,
    color .2s ease,
    border-color .2s ease,
    transform .2s ease;

}


/* ============================================================
   最小化ボタン hover
============================================================ */

.page-nav .nav-minimize:hover,
#app .toc .toc-minimize:hover {

  color:
    var(--white);

  background:
    var(--green-dark);

  border-color:
    var(--green-dark);

  transform:
    translateY(-1px);

}

/* ============================================================
   復元ボタン
   ------------------------------------------------------------
   通常時は必ず非表示
============================================================ */

.page-nav .nav-restore,
#app .toc .toc-restore {

  display:
    none !important;

  align-items:
    center;

  justify-content:
    center;

  flex:
    0 0 auto;

  width:
    44px;

  height:
    44px;

  min-width:
    44px;

  min-height:
    44px;

  margin:
    0;

  padding:
    0;

  border:
    1px solid var(--green);

  border-radius:
    50%;

  color:
    var(--white);

/*  background:
    rgba(255, 255, 255, 0.96);  */

  background:
    var(--green);


  font-family:
    inherit;

  font-size:
    20px;

  font-weight:
    700;

  line-height:
    1;

  cursor:
    pointer;

  appearance:
    none;

  -webkit-appearance:
    none;

  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.10);

  transition:
    background-color .2s ease,
    color .2s ease,
    transform .2s ease;

}


/* ============================================================
   復元ボタン hover
============================================================ */

.page-nav .nav-restore:hover,
#app .toc .toc-restore:hover {

  color:
    var(--white);

  background:
    var(--green-dark);

  border-color:
    var(--green-dark);

  transform:
    translateY(-2px);

}


/* ============================================================
   最小化状態
============================================================ */

.page-nav.is-minimized,
#app .toc.is-minimized {

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  width:
    54px;

  height:
    54px;

  min-width:
    54px;

  min-height:
    54px;

  margin-left:
    auto;

  margin-bottom:
    20px;

  padding:
    5px;

  border:
    1px solid var(--green);

  border-top:
    3px solid var(--green);

  border-radius:
    50%;

  background:
    rgba(255, 255, 255, 0.96);

  box-shadow:
    0 5px 18px rgba(0, 0, 0, 0.10);

}



/* ============================================================
   TOCリンク
============================================================ */

#app .toc a {

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  margin:
    0;

  padding:
    0 14px;

  height:
    36px;

  min-height:
    36px;

  border:
    1px solid var(--toc-fukugen);

  border-radius:
    999px;

  color:
    var(--white);

  background:
    var(--primary);

  text-decoration:
    none;

  font-size:
    12px;

  font-weight:
    600;

  line-height:
    1;

  white-space:
    nowrap;

  vertical-align:
    middle;

  transition:
    background-color .2s ease,
    color .2s ease,
    border-color .2s ease,
    transform .2s ease;

}


/* ============================================================
   TOCリンク hover
============================================================ */

#app .toc a:hover {

  color:
    var(--primary);

  background:
    var(--primary-pale);

  border-color:
    var(--primary);

  transform:
    translateY(-1px);

}

/* ============================================================
   最小化時
   ナビリンクを完全非表示
============================================================ */

.page-nav.is-minimized > a,
.page-nav.is-minimized > span,
.page-nav.is-minimized .toc-links,
#app .toc.is-minimized .toc-links,
#app .toc.is-minimized .toc-links a {

  display:
    none !important;

}


/* ============================================================
   最小化時
   ラベルを非表示
============================================================ */

.page-nav.is-minimized .toc-label,
.page-nav.is-minimized .download-toc-label,
#app .toc.is-minimized .toc-label,
#app .toc.is-minimized .download-toc-label {

  display:
    none !important;

}


/* ============================================================
   最小化時
   最小化ボタンを非表示
============================================================ */

.page-nav.is-minimized .nav-minimize,
#app .toc.is-minimized .toc-minimize {

  display:
    none !important;

}


/* ============================================================
   最小化時
   復元ボタンだけ表示
============================================================ */

.page-nav.is-minimized .nav-restore,
#app .toc.is-minimized .toc-restore {

  display:
    inline-flex !important;

}
/* ============================================================
   v31.5.5 最小化ナビを「トップへ戻る」と右位置統一
   ------------------------------------------------------------
   ・通常の展開ナビには影響させない
   ・最小化時だけ画面右下へ固定
============================================================ */

.page-nav.is-minimized,
#app .toc.is-minimized {
  position: fixed !important;
  right: 25px !important;
  bottom: 88px !important;
  margin: 0 !important;
  z-index: 1999 !important;
}

@media screen and (max-width: 640px) {
  .page-nav.is-minimized,
  #app .toc.is-minimized {
    right: 15px !important;
    bottom: 72px !important;
  }
}

@media print {
  .page-nav.is-minimized,
  #app .toc.is-minimized {
    display: none !important;
  }
}

/* ============================================================
   v31.7.28 ページ内ナビ配色調整
   ------------------------------------------------------------
   ・リンク hover：薄青背景 + 濃紺文字 + 濃紺2px枠
   ・ナビ内「最小化」：赤背景 + 白文字
   ・最小化時の丸ボタン：赤背景 + 白文字
============================================================ */

#app .toc a:hover {
  color: var(--primary) !important;
  background: var(--primary-pale) !important;
  border: 2px solid var(--primary) !important;
}

.page-nav .nav-minimize,
#app .toc .toc-minimize {
  color: var(--white) !important;
  background: var(--red) !important;
  border-color: var(--red) !important;
}

.page-nav .nav-minimize:hover,
#app .toc .toc-minimize:hover {
  color: var(--white) !important;
  background: var(--red-dark) !important;
  border-color: var(--red-dark) !important;
}

.page-nav.is-minimized,
#app .toc.is-minimized {
  background: var(--red) !important;
  border-color: var(--red) !important;
  border-top-color: var(--red) !important;
}

.page-nav .nav-restore,
#app .toc .toc-restore {
  color: var(--white) !important;
  background: var(--red) !important;
  border-color: var(--red) !important;
}

.page-nav .nav-restore:hover,
#app .toc .toc-restore:hover {
  color: var(--white) !important;
  background: var(--red-dark) !important;
  border-color: var(--red-dark) !important;
}