/* ============================================================
   1. 不要な要素の完全非表示（チェックボックス・アイコン・目次）
   ============================================================ */
/* 謎のチェックボックス、三本線（ハンバーガーメニュー）、オーバーレイを消去 */
input.toggle, 
.book-menu-overlay, 
.book-toc-overlay,
.book-header {
  display: none !important;
}

/* 見出しの横に出る「#」（アンカーリンク）を消去 */
.anchor {
  display: none !important;
}

/* 右側のサイドバー（目次エリア）を物理的に消去 */
.book-toc {
  display: none !important;
}

/* 本文内（冒頭や途中）に自動挿入される目次リストを完全に消去 */
#TableOfContents,
.markdown nav#TableOfContents,
.markdown > nav,
.book-toc-content,
aside.cl-toc {
  display: none !important;
}

/* ============================================================
   2. 2カラム・レイアウト（左メニュー・右本文）の設定
   ============================================================ */
.container {
  display: flex;
  max-width: 80rem; 
  margin: 0 auto;
}

/* 左側：サイドバー（メニュー） */
.book-menu {
  flex: 0 0 16rem; 
  padding: 1rem;
  font-size: 0.9rem;
  overflow-y: auto;
  max-height: 100vh;
  position: sticky;
  top: 0;
}

/* 右側：メインコンテンツ（残りの幅をすべて使用） */
.book-page {
  flex: 1;
  min-width: 0;
  padding: 2rem;
  background: #fff;
}

/* ============================================================
   3. カテゴリーの開閉（折りたたみ）制御
   ============================================================ */
.book-menu input.toggle ~ ul {
  display: none;
  list-style: none;
  padding-left: 1rem;
}

.book-menu input.toggle:checked ~ ul {
  display: block;
}

.book-menu label {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.3rem 0;
  font-weight: bold;
}

.book-menu label::after {
  content: "▸";
  transition: transform 0.2s;
  color: #999;
}

.book-menu input.toggle:checked + label::after {
  transform: rotate(90deg);
}

/* ============================================================
   4. レスポンシブ対応（スマホ表示）
   ============================================================ */
@media screen and (max-width: 56rem) {
  .container {
    flex-direction: column;
  }
  .book-menu {
    flex: auto;
    position: static;
    max-height: none;
    border-bottom: 1px solid #eee;
  }
}