@charset "utf-8";
/* CSS Document */

/* コントロール＋pagerをまとめるコンテナ */
.custom-controls-pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;           /* ボタンとpagerの間隔 */
width:fit-content;
margin:0 auto 50px;;
}

/* 前へ・次へボタン（見た目を自由に） */
.prev-btn, .next-btn {width:64px;}
.prev-btn img, .next-btn img {width:100%;}
/* pager全体 */
.bx-pager {
  margin: 0 !important;
  padding: 0;
background:#fff;
border-radius:50px;
padding:10px 10px 10px;
display:flex;align-items:center;
box-shadow:0 2px 8px rgba(0,0,0,0.12);
}

/* pagerの各アイテム（丸いやつ） */
.bx-pager-item {
  margin: 0 4px;
}

.bx-pager a {
  /* 必要に応じてサイズ・色変更 */
}
/* 各pagerアイテム（aタグ） */
.bx-pager-item {
  display: inline-block;
  margin: 0 5px; /* ドット同士の間隔 */
}

/* 数字を隠す */
.bx-pager a {
  display: block;
  width: 50px;
  height: 6px;
  background: #ccc;      /* 非アクティブ時の色 */
  text-indent: -9999px;  /* 数字を画面外へ飛ばす（重要！） */
  overflow: hidden;
}

/* アクティブ（現在選択中）のドット */
.bx-pager a.active,
.bx-pager a:hover {
  background: #e67135;      /* アクティブ時の色（お好みで） */
}

@media only screen and (max-width: 749px){
.custom-controls-pager{width:90%;}
.bx-pager a {
  display: block;
  width: 15px;
  height: 4px;
  background: #ccc;      /* 非アクティブ時の色 */
  text-indent: -9999px;  /* 数字を画面外へ飛ばす（重要！） */
  overflow: hidden;
}
.prev-btn, .next-btn {width:50px;}
.bx-pager {padding:8px 10px 8px;}

.bx-pager-item {
  display: inline-block;
  margin: 0 2px; /* ドット同士の間隔 */
}
}