/* ▼ 共通：カテゴリBOXの基本スタイル */
.bosai-category-box {
  float: left;          /* 左に寄せる（PC用） */
  width: 220px;         /* サイドバーの幅 */
  margin-top: 20px;
  margin-right: 20px;
  box-sizing: border-box;
}

.bosai-category-title {
  font-weight: bold;
  margin-bottom: 8px;
  font-size: 15px;
}

/* pc/sp 切替用クラス（デフォルトはPC想定） */
.pc-only { display: block; }
.sp-only { display: none; }

.bosai-category-box ul {
  list-style: disc;
  padding-left: 18px;
}

@media screen and (max-width: 1023px) {
  .bosai-category-box ul {
    padding-left: 30px;
  }
}

.bosai-category-box .bosai-category-list li a {
  font-size: 12px !important;  /* 好みのサイズに */
  line-height: 1.6;
}

/* fs-l-pageMain 全体でフロートをクリア＋右側を左の幅ぶんずらす（PCベース） */
.fs-body-search .fs-l-pageMain,
.fs-body-category .fs-l-pageMain  {
  overflow: hidden;  /* float解除 */
}

/* カテゴリBOX以外（見出し・並び替え・商品一覧など）を右に寄せる（PC用） */
.fs-body-search .fs-l-pageMain > *:not(.bosai-category-box),
.fs-body-category .fs-l-pageMain > *:not(.bosai-category-box) {
  margin-left: 240px;   /* サイドバー幅 + 余白 */
}

/* PC表示：商品一覧を4列にする（ここは元のまま） */
@media screen and (min-width: 768px) {

  .fs-c-productListItem,
  .itemList__unit {
    width: 100% !important;   
    margin: 0 0.5% 30px -26.5% !important;
  }

  .fs-c-productListItem__image__image,
  .itemImg {
    max-width: 100% !important;
    height: auto;
  }

  .fs-c-productName__name,
  .itemName {
    font-size: 14px !important;
    line-height: 1.5;
  }

  .fs-c-productPrices,
  .itemPrice {
    font-size: 14px !important;
  }
}

/* PCレイアウト：カテゴリを左に固定配置 */
@media screen and (min-width: 1024px) {
  .fs-l-main {
    position: relative; /* 基準にする親 */
  }

  .bosai-category-box {
    position: absolute;
    top: 84px;   /* ← 商品一覧の見出しと高さが合う位置に調整 */
    left: -33px;   /* 左からの位置も好みで調整 */
    width: 156px; /* カテゴリの幅（お好みで） */
  }

  /* PCではh3を表示・ボタン非表示・リストは常に表示 */
  .pc-only { display: block; }
  .sp-only { display: none; }

  .bosai-category-list {
    display: block;
  }
}

/* ホバー色（PC・SP共通） */
.bosai-category-box .bosai-category-list li:nth-child(-n+4) a:hover {
  color: #0097DE !important;   /* 好きな青に変更可能 */
  /* text-decoration: underline;*/  /* 必要なら */
}

/* ▼ スマホではカテゴリを下＋ドロップダウンにする */
@media screen and (max-width: 1023px) {

  /* PC用レイアウト解除して縦並びに */
  .fs-body-search .fs-l-pageMain,
  .fs-body-category .fs-l-pageMain {
    display: flex;
    flex-direction: column;
    overflow: visible;
  }

  .fs-body-search .fs-l-pageMain > *,
  .fs-body-category .fs-l-pageMain > * {
    margin-left: 0 !important;
  }

  /* カテゴリBOXを一番下に移動＋横幅100%に */
  .bosai-category-box {
    order: 2;
    position: static;
    float: none;
    width: 100%;
    margin: 12px 0 0;
  }

  /* PC用タイトルは消して、SPボタンを表示 */
  .pc-only { display: none; }
  .sp-only { display: inline-flex; }

  .bosai-category-toggle {
    width: 100%;
    background: transparent;        /* グレー背景やめる */
    border: none;                   /* 枠線も消す */
    padding: 4px 0 6px;
    font-size: 14px;
    font-weight: normal;
    color: #333;
    display: flex;
    justify-content: flex-start;      /* 左寄せにしてスッキリ */
    align-items: center;
    gap: 4px;
    cursor: pointer;
    border-bottom: 1px solid #e0e0e0; /* 下だけ細いライン */
  }

  /* 左側に小さくラベルを付けたい場合（お好みで） */
  .bosai-category-toggle::before { 
    content: "カテゴリで絞り込む";
    font-size: 13px;
  } 

  /* ▼ をCSSで制御（回転アニメーション） */
  .bosai-category-toggle::after {
    content: "▼";
    font-size: 10px;
    transform-origin: center;
    transition: transform 0.2s ease;
  }

  .bosai-category-toggle.is-open::after {
    transform: rotate(180deg);      /* 開いたら▲っぽく */
  }

  /* リストはカード風に */
  .bosai-category-list {
    display: none;
    margin-top: 6px;
    padding: 10px 14px;
    background: #fff;
    border-radius: 4px;
    border: 1px solid #eee;
  }

  .bosai-category-list.open {
    display: block;
  }
}