/* ===============================
   サイドバー UI（見た目）
   =============================== */
   .sidebar-box {
    background-color: #f7f7f7; /* 薄いグレーの背景 */
    border: 1px solid #ddd;    /* 枠線（薄いグレー） */
    padding: 16px;
    border-radius: 4px;        /* 角を丸く */
  }
  
  /* タイトル（区切り線付き） */
  .sidebar-title {
    font-size: 18px;
    margin-bottom: 12px;       /* タイトル下の余白 */
    border-bottom: 2px solid #ccc;
    padding-bottom: 4px;
  }
  
  /* リスト全体（初期リスト用） */
  .sidebar-list {
    list-style: none; /* マーカー削除 */
    padding: 0;
    margin: 0;
  }
  
  /* リストの各項目 */
  .sidebar-list li {
    margin-bottom: 8px;
  }
  
  /* リンク（テキストのみの場合） */
  .sidebar-list a {
    text-decoration: none;
    color: #333;
  }
  
  .sidebar-list a:hover {
    text-decoration: underline;
  }
  
  /* ===============================
     変数（必要に応じて幅・間隔を調整）
     =============================== */
  :root {
    --sidebar-w: 260px; /* サイドバーの幅 */
    --gap: 5px;         /* サイドバーとメインコンテンツの間隔 */
  }
  
  /* ===============================
     レイアウト：コンテナを基準にサイドバーを
     左外側へ「はみ出し」配置（absolute）
     → メインは絶対に押し出されない
     =============================== */
  .l-two-col {
    position: relative; /* 基準位置 */
    overflow: visible;  /* はみ出しを非表示にしない */
  }
  
  /* ★ PC幅(>=1024px)で左余白（サイドバー分）を常に確保 */
  @media (min-width: 1024px) {
    .l-two-col {
      /* サイドバーの幅 + 間隔ぶん、内側余白を用意して
         絶対配置のサイドバーが画面内に収まるようにする */
      padding-left: calc(var(--sidebar-w) + var(--gap));
    }
  }
  
  /* スライダー直下の位置から表示（top:0） */
  .sidebar-abs {
    position: absolute;
    top: 0;
    /* 幅＋間隔分だけ左に移動（※ノートPC幅での見え方に合わせて -0.15 を維持） */
    left: calc(-0.15 * (var(--sidebar-w) + var(--gap)));
    width: var(--sidebar-w);
    z-index: 3;
  }
  
  /* メインコンテンツは元の位置を維持 */
  .main {
    min-width: 0; /* 長い内容の折返し不具合防止 */
  }
  
  /* （任意）ユーティリティ：PC/SP切替をクラスでも制御したい場合 */
  .pc-only { display: block; }
  
  /* ===============================
     表示制御：PCのみサイドバー表示
     - 1023.98px 以下（タブレット/モバイル）はサイドバーを非表示
     - 1024px 以上（PC）は表示
     =============================== */
  @media (max-width: 1023.98px) {
    .sidebar-abs { display: none !important; }                /* サイドバー非表示 */
    .l-two-col { position: static; padding-left: 0; }          /* PC未満では基準・余白不要 */
    .pc-only { display: none !important; }                     /* PC専用要素の保険 */
  }
  

  /* ===============================
     サイドバー カテゴリーリスト（アイコン＋テキスト）
     =============================== */
  
  /* 縦並び＋項目間の間隔 */
  .sidebar-list {
    display: flex;
    flex-direction: column;
    gap: 8px; /* 項目間の余白 */
  }
  
  /* gapを使用するため個別marginは削除 */
  .sidebar-list .sb-item {
    margin: 0;
  }
  
  /* 各リンクのデザイン（1行レイアウト） */
  .sidebar-list .sb-link {
    display: flex;
    align-items: center;
    gap: 12px; /* アイコンとテキストの間隔 */
    padding: 10px 12px;
    border-radius: 8px;
    text-decoration: none;
    color: #333;
    transition: background-color .2s ease, transform .05s ease;
  }
  
  /* ホバー・フォーカス時 */
  .sidebar-list .sb-link:hover,
  .sidebar-list .sb-link:focus {
    background-color: #f0f4ff; /* 背景を薄く強調 */
  }
  
  /* アイコン枠（全て同じサイズに統一） */
  .sidebar-list .sb-img {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;     /* 角丸 */
    background: #fff;       /* 白背景 */
    border: 1px solid #eee; /* 薄い枠線 */
    overflow: hidden;       /* はみ出しカット */
  }
  
  /* アイコン画像（縦横比を保持してフィット） */
  .sidebar-list .sb-img img {
    width: 70%;
    height: 70%;
    object-fit: contain; /* アスペクト比を保持して収める */
    display: block;
  }
  
  /* テキスト部分 */
  .sidebar-list .sb-name {
    flex: 1 1 auto;
    font-size: 14px;
    line-height: 1.4;
    color: #333;
    white-space: nowrap;       /* 1行表示 */
    overflow: hidden;          /* はみ出し非表示 */
    text-overflow: ellipsis;   /* 省略記号… */
  }
  
  /* ===============================
     複数タイトル間の余白設定
     =============================== */
  .sidebar-title {
    font-size: 18px;
    margin: 20px 0 12px; /* 上20px, 左右0, 下12px */
    border-bottom: 2px solid #ccc;
    padding-bottom: 4px;
  }
  
  .sidebar-title:first-child {
    margin-top: 0; /* 最初のタイトルは上余白なし */
  }
  

  /* ===============================
  KMC_20250812 start
  =============================== */

  /* コンテナ */
.cat-details {
  border: 0px solid #e0e0e0;
  border-radius: 6px;
  padding: 0.5rem;
  background: #f7f7f7;
  width: 220px; /* サイドバー幅に合わせる */
}
 
/* summary共通 */
.cat-details summary {
  list-style: none;
  cursor: pointer;
  color: #0066cc;
  font-size: 14px;
  padding: 0.25rem 0;
}
.cat-details summary::-webkit-details-marker {
  display: none;
}
 
/* 閉じるリンクは初期は非表示、open時のみ表示 */
.cat-close {
  display: none;
}
.cat-details[open] .cat-close {
  display: inline-block;
}
 
/* 「さらに表示する」リンクはopen時は非表示 */
.cat-details[open] .cat-open {
  display: none;
}
 
/* カテゴリリスト */
.cat-list {
  margin: 0.5rem 0;
  padding: 0 0 0 1rem;
}
.cat-list li {
  padding: 0.25rem 0;
}
 
  /* ===============================
  KMC_20250812 end
  =============================== */