/* --- サイドメニュー全体の基本設定 --- */
#side-menu {
  position: fixed;
  top: var(--header-h);
  right: -300px;
  width: 300px;
  height: calc(100vh - var(--header-h));
  background: rgba(255, 255, 255, 0.93
  );
  z-index: 1100;
  transition: right 0.3s ease;
  overflow-y: auto;
  box-shadow: 50px 10px 20px rgba(0, 0, 0, 0.1);

  /* ==============================================
     調整ノブ：ここを書き換えるだけで見た目をコントロールする
     ルール：
     - まずはノブだけ触る
     - 無理なら “適用側” を触る（ただし #side-menu スコープ内のみ）
  ============================================== */

  /* =================================================
     1) セクション間隔（Bio / Contact / Works / Sort など “塊”）
     - 基本は --menu-section-gap
     - 必要なら特例で News直後 / Contact直後 を別ノブで扱う
  ================================================= */
  --menu-section-gap: 30px;
  --menu-gap-after-news: 18px;     /* Bio/News セクション下の特例 */
  --menu-gap-after-contact: 26px;  /* Contact セクション下の特例 */

  /* =================================================
     2) メニュー内パディング（全体の詰まり）
  ================================================= */
  --menu-padding: 20px;

  /* =================================================
     3) Headings（h2/h3）
     - Contact / Works など “セクション見出し” 用
     - Sort by は h3（この下の sort ノブ群が本体）
  ================================================= */
  --menu-h2-size: 14px;
  --menu-h2-gap: 10px;

--menu-h2-weight: 500;                 /* 全体デフォルト */
--menu-contact-h2-weight: var(--menu-h2-weight); /* Contactはデフォルト追従（必要ならここだけ数字に） */
--menu-works-h2-weight:   var(--menu-h2-weight); /* Worksもデフォルト追従（必要ならここだけ数字に） */

  --menu-h3-size: 14px;
  --menu-h3-gap: 10px;
  --menu-h3-weight: 400;           /* ★追加：h3（Sort by の見出し） */

  /* =================================================
     4) Top links（Bio / News）
     - フォント・行間・パディング・色
  ================================================= */
  --top-link-font-size: 14px;
  --top-link-line-height: 1.2;
  --top-link-font-weight: 500;     /* ★追加：Bio/News の weight */
  --top-link-padding-y: 4px;
  --top-link-padding-x: 0px;
  --top-link-color: rgba(0, 0, 0, 0.78);
  --top-link-hover-color: #111;

  /* =================================================
     5) Works（親/子 共通フォーマット）
     使い方：
     - “共通の軸” は works-item-*（親/子とも同じ意味で調整できる）
     - “親だけ” は works-parent-*
     - “子だけ” は works-child-*
  ================================================= */

  /* --- 共通（親/子で共通の“基本軸”） --- */
  --works-item-padding-y: 0px;   /* 親/子リンクの “行の詰まり” */
  --works-item-padding-x: 0px;

  /* --- 親（カテゴリタイトル）専用 --- */
  --works-parent-font-size: 14px;
  --works-parent-line-height: 1.5;
  --works-parent-font-weight: 400; /* ★追加：親カテゴリ weight */
  --works-parent-color: var(--text);

  /* 親カテゴリ“塊”の間隔（閉じている時の 親↔親） */
  --works-parent-block-gap: 3px;    /* ← ここが 1px でもあると “隙間” になる */

  /* 親カテゴリの「末尾だけ」下余白（最後の親＝All が last-child になった時に効く）
     - デフォルトは block-gap と同じ＝All も他と同じ行間に揃う
     - 末尾だけ詰めたいなら 0px にする
  */
  --works-parent-last-gap: var(--works-parent-block-gap);

  /* 親タイトル ↔ 子リスト開始 の間隔（開いた時だけ効く） */
  --works-parent-to-child-gap: 3px;

  /* 親タイトルの + / -（開閉記号） */
  --works-parent-toggle-size: 15px;
  --works-parent-toggle-color: rgba(0,0,0,0.6);

  /* ★ Worksカテゴリ横の「・」（markerではなく prefix で出す）
     - 表示：'・'
     - 非表示：''（空）
     - サイズ/太さ/色/位置（上下）はノブで調整　*/
  --works-parent-prefix: '・';
  --works-parent-prefix-gap: 6px;
  --works-parent-prefix-color: rgba(0,0,0,0.35);
  --works-parent-prefix-size: 12px;
  --works-parent-prefix-weight: 400;
  --works-parent-prefix-y: 0px; /* 上下微調整（+で下へ） */

  /* --- 子（サブカテゴリリンク）専用 --- */
  --works-child-font-size: 12px;
  --works-child-line-height: 1.0;
  --works-child-font-weight: 400;  /* ★追加：子カテゴリ weight */

  /* ★子リンク色（未定義だと子の見た目が崩れるのでノブとして明示） */
  --works-child-color: rgba(0, 0, 0, 0.62);
  --works-child-hover-color: rgba(0, 0, 0, 0.85);

  /* 子リストの字下げ */
  --works-child-indent: 30px;

  /* 子同士の縦間隔（子↔子） */
  --works-child-item-gap: 4px;

  /* 子リスト終端 ↔ 次の親タイトル（開いている時の “親間隔”） */
  --works-child-end-gap: 12px;

  /* =================================================
     6) Sort options（ソートUI）— Sort by 専用ラベルを持つ
     対象：
     - Sort by ラベル（h3） ← ★ここは汎用h3から独立
     - Title/Time/Category/Order（リンク群）
     - 昇降順矢印（リンク）
  ================================================= */

  /* Sortセクション内の全体余白（必要なら） */
  --sort-block-padding-y: 0px;
  --sort-block-padding-x: 0px;

  /* ★ Sort by 専用ラベル（h3） */
  --sort-label-font-size: 12px;
  --sort-label-line-height: 1.2;
  --sort-label-letter-spacing: 0.02em;
  --sort-label-font-weight: 400;
  --sort-label-color: rgba(0,0,0,0.55);
  --sort-label-margin-bottom: 10px;

  /* Sortリンク（Title/Time/Category/Order） */
  --sort-item-font-size: 13px;
  --sort-item-line-height: 1.2;
  --sort-item-padding-y: 2px;
  --sort-item-padding-x: 0px;
  --sort-item-color: rgba(0,0,0,0.72);
  --sort-item-hover-color: #111;
  --sort-item-active-color: #111;
  --sort-item-active-weight: 700;

  /* Sortリンク群の並び（行間・列間） */
  --sort-item-gap-x: 14px;
  --sort-item-gap-y: 6px;

  /* 昇降順（矢印） */
  --sort-arrow-font-size: 18px;
  --sort-arrow-padding-y: 0px;
  --sort-arrow-padding-x: 6px;
  --sort-arrow-color: rgba(0,0,0,0.65);
  --sort-arrow-hover-color: #111;
  --sort-arrow-active-color: #111;

  /* Sortリンク群 ↔ 矢印ブロックの距離 */
  --sort-direction-gap-y: 10px;
}

#side-menu.active { right: 0; }
#side-menu .menu-container { padding: var(--menu-padding); }

/* --- セクション間隔の適用（直下だけ） --- */
#side-menu .menu-container > .menu-section { margin-bottom: var(--menu-section-gap); }
#side-menu .menu-container > .menu-section:first-child { margin-bottom: var(--menu-gap-after-news); }

/* ===== Side menu: Section headings (H2) =====
   目的：
   - h2 の weight を “ノブ” で制御できるようにする
   - デフォルト（全体）→ Contact専用 → Works専用 の優先順で上書き
============================================ */

/* [共通] サイドメニュー内の見出し（Bio/News/Contact/Works のうち h2 を使うもの） */
#side-menu .menu-section h2 {
  font-size: var(--menu-h2-size);
  margin: 0 0 var(--menu-h2-gap) 0;
  font-weight: var(--menu-h2-weight);  /* ★ノブ：デフォルト weight */
  line-height: 1.2;

  /* ここは“見出しの基本見た目”を揃える場所（必要ならあなたが触る）
     letter-spacing: ...
     color: ...
  */
}

/* [上書き] Contact セクション見出し（index.html で 2番目の .menu-section が Contact の前提） */
#side-menu .menu-container > .menu-section:nth-of-type(2) h2 {
  font-weight: var(--menu-contact-h2-weight); /* ★ノブ：Contact 専用 weight */
}

/* [上書き] Works セクション見出し */
#side-menu .menu-section.works-menu h2 {
  font-weight: var(--menu-works-h2-weight); /* ★ノブ：Works 専用 weight */
}

/* ===== /Side menu: Section headings (H2) ===== */

/* --- Bio / News リンク（先頭セクション） --- */
#side-menu .menu-container > .menu-section:first-child ul li a,
#side-menu .menu-container > .menu-section:first-child ul li span[aria-current="page"] {
  display: block;

  /* タイポ（ノブ） */
  font-size: var(--top-link-font-size);
  line-height: var(--top-link-line-height);
  font-weight: var(--top-link-font-weight);

  /* 余白（ノブ） */
  padding: var(--top-link-padding-y) var(--top-link-padding-x);

  /* 色（ノブ） */
  color: var(--top-link-color);

  text-decoration: none;
}

#side-menu .menu-container > .menu-section:first-child ul li a:hover {
  color: var(--top-link-hover-color);
  opacity: 0.75;
}

/* --- Works menu（カテゴリ/サブカテゴリ） --- */

/* 目的：li のデフォルト ::marker（「・」）を完全に無効化 */
#side-menu .menu-section.works-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#side-menu .menu-section.works-menu li {
  list-style: none;
  padding: 0;
}
#side-menu .menu-section.works-menu li::marker {
  content: "";
}

/* 親カテゴリ1塊ごとの下余白（親↔親） */
#side-menu .menu-section.works-menu li.category-item {
  margin-bottom: var(--works-parent-block-gap);
}

/* 末尾（最後の親カテゴリ＝All がここに来ることが多い）の下余白だけは別ノブで制御する
   - ここを 0 固定にすると、All だけ必ず詰まる（今回の症状）
*/
#side-menu .menu-section.works-menu li.category-item:last-child {
  margin-bottom: var(--works-parent-last-gap);
}

/* 親カテゴリ（クリックできるタイトル）
   目的：::before（・）を入れてもテキストが中央寄りにならないようにする
   - 左側： 「・ + テキスト」を左詰め
   - 右側： + / - は ::after を margin-left:auto で右端固定
*/
#side-menu .menu-section.works-menu .category-title {
  font-size: var(--works-parent-font-size);
  line-height: var(--works-parent-line-height);
  color: var(--works-parent-color);

  /* “共通フォーマット” に寄せる（親もリンクとして扱う） */
  padding: var(--works-item-padding-y) var(--works-item-padding-x);

  cursor: pointer;
  display: flex;
  align-items: center;

  /* ★ space-between をやめる（これが中央寄りの原因） */
  justify-content: flex-start;

  /* ★ ・ と文字の間隔（好みでノブ化してもOK） */
  gap: 0px;

  text-decoration: none;
}

/* ★ “・” はここで出す（markerではなく prefix） */
#side-menu .menu-section.works-menu .category-title::before {
  content: var(--works-parent-prefix);
  display: inline-block;

  margin-right: var(--works-parent-prefix-gap);
  color: var(--works-parent-prefix-color);

  font-size: var(--works-parent-prefix-size);
  font-weight: var(--works-parent-prefix-weight);

  /* 上下位置の微調整 */
  transform: translateY(var(--works-parent-prefix-y));
}

/* 開閉アイコン（+ / -）：右端固定 */
#side-menu .menu-section.works-menu .category-title::after {
  content: "+";
  font-size: var(--works-parent-toggle-size);
  color: var(--works-parent-toggle-color);

  /* ★右端へ押し出す（::before があっても崩れない） */
  margin-left: auto;
}

/* All は開閉しない：トグル記号（+/-）を無効化 */
#side-menu .menu-section.works-menu .category-title.category-all::after {
  content: none;
}

/* 子リスト（親↔子の距離） */
#side-menu .menu-section.works-menu .subcategory-list {
  display: none;
  padding-left: var(--works-child-indent);
  margin-top: var(--works-parent-to-child-gap);
}
#side-menu .menu-section.works-menu .subcategory-list.visible {
  display: block;
}

/* 子同士の縦間隔（子↔子） */
#side-menu .menu-section.works-menu .subcategory-list li {
  margin-bottom: var(--works-child-item-gap);
}

/* 子リスト終端 ↔ 次の親タイトル（開いている時の “親間隔”）
   - ここが --works-child-end-gap の「受け口」
   - 0 にすると「子の最後 ↔ 次の親」が詰まる
*/
#side-menu .menu-section.works-menu .subcategory-list li:last-child {
  margin-bottom: var(--works-child-end-gap);
}

/* 子リンク */
#side-menu .menu-section.works-menu .subcategory-list a {
  font-size: var(--works-child-font-size);
  line-height: var(--works-child-line-height);
  color: var(--works-child-color);

  padding: var(--works-item-padding-y) var(--works-item-padding-x);

  text-decoration: none;
  display: inline-block;
}
#side-menu .menu-section.works-menu .subcategory-list a:hover {
  color: var(--works-child-hover-color);
}

/* --- Sort options（ノブ追従・スコープ固定） --- */

/* Sortセクション内の全体余白（必要なら） */
#side-menu .menu-section.sort-options {
  padding: var(--sort-block-padding-y) var(--sort-block-padding-x);
}

/* ★ Sort by 専用ラベル（h3） */
#side-menu .menu-section.sort-options h3 {
  font-size: var(--sort-label-font-size);
  line-height: var(--sort-label-line-height);
  letter-spacing: var(--sort-label-letter-spacing);
  font-weight: var(--sort-label-font-weight);
  color: var(--sort-label-color);
  margin: 0 0 var(--sort-label-margin-bottom) 0;
}

/* Title/Time/Category/Order の並び */
#side-menu .sort-options ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sort-item-gap-y) var(--sort-item-gap-x); /* 縦/横を分離 */
  margin: 0;
  padding: 0;
  list-style: none;
}

#side-menu .sort-options ul li {
  margin: 0;
}

/* Sortリンク（Title/Time/Category/Order） */
#side-menu .sort-options ul li a {
  display: inline-block;
  font-size: var(--sort-item-font-size);
  line-height: var(--sort-item-line-height);
  padding: var(--sort-item-padding-y) var(--sort-item-padding-x);
  color: var(--sort-item-color);
  text-decoration: none;
}

#side-menu .sort-options ul li a:hover {
  color: var(--sort-item-hover-color);
  opacity: 0.8;
}

/* active（現在のソートキー） */
#side-menu .sort-options a.active {
  color: var(--sort-item-active-color);
  font-weight: var(--sort-item-active-weight);
}

/* 昇降順ブロック（矢印） */
#side-menu .sort-direction {
  margin-top: var(--sort-direction-gap-y);
}

#side-menu .sort-direction a {
  font-size: var(--sort-arrow-font-size);
  padding: var(--sort-arrow-padding-y) var(--sort-arrow-padding-x);
  color: var(--sort-arrow-color);
  text-decoration: none;
  display: inline-block;
}

#side-menu .sort-direction a:hover {
  color: var(--sort-arrow-hover-color);
  opacity: 0.85;
}

#side-menu .sort-direction a.active {
  color: var(--sort-arrow-active-color);
}