.custom-scrollbar {
  /* スクロールを有効にするための基本設定 */
  overflow: auto;
}

/* Webkit系 (Chrome, Safari, Edge) の設定 */
.custom-scrollbar::-webkit-scrollbar {
  width: 4px;  /* 縦スクロールバーの幅 */
  height: 4px; /* 横スクロールバーの高さ */
}

/* スクロールバーの上下矢印ボタンを非表示 */
.custom-scrollbar::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

/* スクロールバーのつまみ部分 */
.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: #616A7A;
  border-radius: 8px;
}

/* スクロールバーの通り道（背景） */
.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 8px;
  margin: 8px 0;
}

/* オプション：マウスホバー時に少し色を濃くする場合 */
/* .custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: #5B5F66;
} */

/* 矢印ボタンを完全に非表示にする */
.custom-scrollbar::-webkit-scrollbar-button {
  display: none;
}