#top_wrap .sec_02 .l_box .category-btn::before { content: "▼"; }
.bx-wrapper .bx-viewport { background: #F1F1F1 !important; }
.nav-top .main_fl_wrap { display:block; margin:0; width:100%; max-width:100%; }
.nav-top .main_l_box { display:none; }
.nav-top .main_r_box { width:100%; margin:0; }

/* =========================================
   PC（861px以上）：前後の画像をはみ出させて見せる
   ========================================= */
@media screen and (min-width: 861px) {
  /* 画面全体に横スクロールバーが出ないようにする */
  .sec_01 {
    overflow: hidden !important;
  }

  /* 本来見えない「前後の画像」をあえて表示させる */
  .sec_01 .bx-viewport {
    overflow: visible !important;
  }

  /* センター画像と同じ幅を指定して、全体を中央寄せする */
  .sec_01 .bx-wrapper {
    width: 800px !important; /* JSのslideWidthと同じ数値にしてください */
    margin: 0 auto !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
  }
}
/* =========================================
   段落ち（4枚目が下に表示される）を防ぐ強制措置
   ========================================= */
/* スライダーの動くトラック部分を強制的に横並びにする */
.sec_01 .bx-viewport > * {
  display: flex !important;
  flex-wrap: nowrap !important;
  max-width: none !important; /* テーマ側にある最大幅の制限を解除 */
}

/* 中の各スライド（リストやDIV）の設定をリセット */
.sec_01 .bx-viewport > * > * {
  float: none !important; /* flexを使っているので不要なfloatを解除 */
  box-sizing: border-box !important; /* 余白による幅の計算ズレを防ぐ */
}

/* =========================================
   スマホ（860px以下）：1枚だけを綺麗に表示
   ========================================= */
@media screen and (max-width: 860px) {
  .sec_01 .bx-viewport {
    overflow: hidden !important; /* スマホでは前後の画像を隠す */
  }
  .sec_01 .bx-wrapper {
    width: 100% !important;
    margin: 0 auto !important;
    border: none !important;
    box-shadow: none !important;
  }
}

/* --- 画像の基本設定（共通） --- */
.slider img {
  width: 100%;
  height: auto;
  display: block;
}