/* ===== 共通 ===== */
.sidebar .category{
  border:1px solid #ddd; border-radius:8px; margin:14px 0; overflow:hidden;
}
.sidebar .category h3{
  margin:0; padding:10px 12px; background:#f6f6f2;  /* ←見出しの薄色背景 */
  display:flex; align-items:center; gap:8px; cursor:pointer;
}

.sidebar .category h3 .chevron{
  margin-left:auto;
  width:0; height:0; display:inline-block;
  border-top:5px solid transparent;
  border-bottom:5px solid transparent;
  border-left:6px solid #666;     /* 矢印の色 */
  transition: transform .2s ease;
}

/* 子メニューコンテナ（JSで自動生成） */
.sidebar .cat-body{ background:#fff; padding:6px 0; }

/* PCは常時展開＆見出しはクリック不可表示 */
@media (min-width:769px){
  .sidebar .category h3{ cursor:default; }
  .sidebar .category .chevron{ display:none; }
  .sidebar .cat-body{ display:block !important; max-height:none !important; overflow:visible !important; }
}

/* スマホはアコーディオン */
@media (max-width:768px){
  /* JSが効かない場合でも読めるように：デフォルトは開いたまま */
  .sidebar .cat-body{ display:block; }
  /* JSで data-open="false" を付けたときだけ畳む */
  .sidebar .category[data-open="false"] .cat-body{ display:none; }
  .sidebar .category[data-open="true"]  .chevron{ transform:rotate(90deg); }
}

/* 既存のアンカーのミニ調整（任意） */
.sidebar .menu-item{ display:block; }

/* 子メニューは常に白（PC/スマホ共通） */
#hpb-aside .sidebar .cat-body .menu-item{
  background-color:#fff !important;
}

/* PCのホバーも白のまま（枠だけで反応させたい時は下のbox-shadowを活かす） */
@media (hover:hover) and (min-width:769px){
  #hpb-aside .sidebar .cat-body .menu-item:hover{
    background-color:#fff !important;
    /* box-shadow: inset 0 0 0 2px rgba(0,0,0,.12);  ←お好みで */
  }
}

/* PC時は矢印を非表示にする */
@media (min-width:769px){
  #hpb-aside .sidebar .category .chevron{
    display: none !important;
  }
}

#hpb-aside .sidebar .menu-item.is-active{
  box-shadow: inset 2px 0 0 #46784b, inset 0 0 0 1px rgba(0,0,0,.08);
  font-weight:600;
}

/* 現在地リンクをしっかり強調（左ライン＋うすい背景＋太字） */
#hpb-aside .sidebar .menu-item.is-active{
  position: relative;
  background: #f5fbf6 !important;                /* うすい緑の面 */
  box-shadow:
    inset 4px 0 0 #46784b,                      /* 左ラインを太く濃く */
    inset 0 0 0 1px rgba(0,0,0,.15) !important; /* 輪郭を少し強めに */
  font-weight: 700;
  color:#1f1f1f;
}

/* PCのホバーで色が変わらないよう“据え置き” */
@media (hover:hover){
  #hpb-aside .sidebar .menu-item.is-active:hover{
    background:#f5fbf6 !important;
  }
}

/* 見出し側も“このカテゴリに居ます”を軽く示す（:has対応ブラウザ） */
#hpb-aside .sidebar .category:has(.menu-item.is-active) > h3{
  background:#eaf4ec;
  color:#2b5b34;
}

/* 現在地リンクをしっかり強調（PC/モバイル共通） */
#hpb-aside .sidebar .menu-item.is-active{
  position: relative;
  background: #f5fbf6 !important;
  box-shadow:
    inset 4px 0 0 #46784b,
    inset 0 0 0 1px rgba(0,0,0,.15) !important;
  font-weight: 700;
  color:#1f1f1f;
}

/* PCのホバーで色が戻らないよう据え置き */
@media (hover:hover){
  #hpb-aside .sidebar .menu-item.is-active:hover{
    background:#f5fbf6 !important;
  }
}

/* 見出し側も“このカテゴリに居ます”を軽く示す（.has-active クラス用） */
#hpb-aside .sidebar .category.has-active > h3{
  background:#eaf4ec;
  color:#2b5b34;
}