/*
 * viewer.html 専用スタイル
 */

/* ----------------------------------------
   Body
   固定ヘッダーの高さ分だけコンテンツを下げる
   ---------------------------------------- */
body {
  padding-top: var(--header-height);
}

/* iPad Air以下 (≤820px): ヘッダー高さ 60px に合わせる */
@media (max-width: 1024px) {
  body {
    padding-top: 60px;
  }
}

/* ----------------------------------------
   サイドナビ トグルボタン — 位置・カラー変更
   ---------------------------------------- */
.manual-sidenav-toggle {
  top: var(--header-height);  /* ヘッダー直下（ロゴの下）に配置 */
  bottom: auto;
  background-color: var(--color-primary);
}

@media (max-width: 1024px) {
  .manual-sidenav-toggle {
    top: 60px;
  }
}

.manual-sidenav-toggle:hover {
  background-color: var(--color-hover-bg);
  color: var(--color-hover-text);
}

/* ----------------------------------------
   モーダル無効ページ: 画像カーソルをデフォルトに戻す
   ---------------------------------------- */
body.no-img-modal .slide-container img {
  cursor: default;
}

/* ----------------------------------------
   help_startup テーブル: PC表示サイズのままスクロール
   ---------------------------------------- */
.table-scroll-wrap {
  overflow-x: auto;
  margin-bottom: 1rem;
}

.table-scroll-wrap .feature-table,
.table-scroll-wrap .visual-table,
.table-scroll-wrap .function-table {
  width: auto;
  min-width: 560px;
}

@media (max-width: 820px) {
  /* モバイルでもフォント・パディングをPC値で維持 */
  .table-scroll-wrap .feature-table,
  .table-scroll-wrap .visual-table,
  .table-scroll-wrap .function-table {
    font-size: 12px;
  }

  .table-scroll-wrap .feature-table th,
  .table-scroll-wrap .visual-table thead th,
  .table-scroll-wrap .function-table th {
    font-size: 12px;
    padding: 6px 8px;
  }

  .table-scroll-wrap .feature-table td,
  .table-scroll-wrap .visual-table tbody td,
  .table-scroll-wrap .function-table td {
    font-size: 12px;
    padding: 6px 8px;
  }
}

/* ----------------------------------------
   フッター競合修正
   manual/waymark-note.css の .footer { position: absolute } が
   グローバルフッターに誤適用されるのを防ぐ
   ---------------------------------------- */
#footer-placeholder .footer {
  position: static;
  color: var(--color-white);
  font-size: var(--font-size-base);
  left: auto;
  bottom: auto;
}