/* =====================================================
   Bonanet Nav Carousel - Gap Fix + Center Flex + Stable Responsive
   ===================================================== */

/* サムネの行：Flex + 折返し + 常に中央 */
.bonanet-nav-carousel .bnc-thumbs-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;

  /* gap 強制 */
  gap: var(--bnc-gap, 8px) !important;

  /* gap が無視された場合のフォールバック */
  margin-left: calc(var(--bnc-gap, 8px) * -0.5);
  margin-right: calc(var(--bnc-gap, 8px) * -0.5);
}

/* 各サムネに余白（フォールバック） */
.bonanet-nav-carousel .bnc-thumb {
  box-sizing: border-box;
  padding-left: calc(var(--bnc-gap, 8px) * 0.5);
  padding-right: calc(var(--bnc-gap, 8px) * 0.5);
  padding-bottom: var(--bnc-gap, 8px);

  flex: 0 1 calc((100% - (5 - 1) * var(--bnc-gap, 8px)) / 5);
  max-width: 240px;
  text-align: center;
}

/* PCで thumbWidth 指定時 → 幅固定 & 中央寄せ */
.bonanet-nav-carousel.bnc-has-item-width .bnc-thumb {
  flex: 0 0 var(--bnc-item-w);
  max-width: none;
}

/* Tablet：4列 */
@media (max-width: 1023.98px) {
  .bonanet-nav-carousel .bnc-thumb,
  .bonanet-nav-carousel.bnc-has-item-width .bnc-thumb {
    flex: 0 1 calc((100% - (4 - 1) * var(--bnc-gap, 8px)) / 4);
    max-width: none;
  }
}

/* Mobile：3列 ─ 5枚なら「3 + 2」で中央寄せ */
@media (max-width: 639.98px) {
  .bonanet-nav-carousel .bnc-thumb,
  .bonanet-nav-carousel.bnc-has-item-width .bnc-thumb {
    flex: 0 1 calc((100% - (3 - 1) * var(--bnc-gap, 8px)) / 3);
  }
}

/* サムネ画像 */
.bonanet-nav-carousel .bnc-thumb img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* ラベル */
.bonanet-nav-carousel .bnc-thumb__label {
  font-size: 0.9rem;
  margin-top: 6px;
}

/* アンダーバー */
.bonanet-nav-carousel .bnc-thumb::after {
  content: "";
  display: block;
  height: 2px;
  width: 100%;
  background: #cbd5e1;
  opacity: 0.6;
  margin-top: 14px;
  transition: opacity 0.2s, background-color 0.2s;
}
.bonanet-nav-carousel .bnc-thumb.is-active::after {
  background: #a8977b;
  opacity: 1;
}

/* カルーセル本体：残像防止 + ドット余白 */
.bonanet-nav-carousel .bnc-swiper {
  margin-top: 16px;
  overflow: hidden;
  padding-bottom: var(--bnc-pagi-gap, 20px);
  position: relative;
}

/* ドット */
.bonanet-nav-carousel .swiper-pagination-bullet {
  background: #000 !important;
  opacity: 0.3;
}
.bonanet-nav-carousel .swiper-pagination-bullet-active {
  opacity: 1;
}

/* 矢印（PCはホバー時のみ） */
.bonanet-nav-carousel .swiper-button-prev,
.bonanet-nav-carousel .swiper-button-next {
  color: #000 !important;
  background: none !important;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}
.bonanet-nav-carousel:hover .swiper-button-prev,
.bonanet-nav-carousel:hover .swiper-button-next {
  opacity: 0.8;
  pointer-events: auto;
}
@media (hover: none) {
  .bonanet-nav-carousel .swiper-button-prev,
  .bonanet-nav-carousel .swiper-button-next {
    opacity: 0.8 !important;
    pointer-events: auto !important;
  }
}

/* ===============================
   ▼ スマホ時：矢印サイズを小さく
   =============================== */
@media (max-width: 639.98px) {
  .bonanet-nav-carousel .swiper-button-prev::after,
  .bonanet-nav-carousel .swiper-button-next::after {
    font-size: 18px !important;   /* ← デフォルトより小さく（元は約27px） */
  }

  /* 必要なら位置も微調整 */
  .bonanet-nav-carousel .swiper-button-prev,
  .bonanet-nav-carousel .swiper-button-next {
    width: 24px;
    height: 24px;
  }
}