@charset "UTF-8";

.scroll-box {
  width: 310px; /* 横幅を固定 */
  height: 80px; /* 高さを固定 */
  overflow-y: auto; /* 縦方向のみスクロールバーを表示（あふれた場合） */
  border: 0px solid #ccc;
  padding: 5px;
}
/* Chrome, Safari, Edge用 */
.scroll-box::-webkit-scrollbar {
  width: 4px; /* 縦スクロールバーの太さ */
}
.scroll-box::-webkit-scrollbar-track {
  background: #f1f1f1; /* スクロールバーの背景色 */
}
.scroll-box::-webkit-scrollbar-thumb {
  background: #67CCE2; /* スクロールバーのつまみの色 */
  border-radius: 4px; /* つまみの角を丸くする */
}
.scroll-box::-webkit-scrollbar-thumb:hover {
  background: #555; /* マウスホバー時のつまみの色 */
}

/* Firefox用 */
.scroll-box {
  scrollbar-width: thin; /* 細いスクロールバーにする */
  scrollbar-color: #888 #f1f1f1; /* つまみの色 背景色 */
}
/* スクロールバーの太さ（縦）と幅（横） */
.custom-scroll::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

/* スクロールバーの背景色 */
.custom-scroll::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 0px;
}

/* スクロールバーのつまみの色 */
.custom-scroll::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

/* スクロールバーのつまみのホバー時の色 */
.custom-scroll::-webkit-scrollbar-thumb:hover {
  background: #67CCE2;
}