/* スクロール可能なコンテナ全体のスタイル */
.custom-scrollable-menu-container { /* 新しいコンテナ */
  display: flex;
  justify-content: center; /* 水平方向中央揃え */
  width: 100%; /* 親要素の幅いっぱいに広げる */
  margin-bottom: 20px; /* 下の要素との間隔（お好みで） */
}

.custom-scrollable-menu {
  width: 500px; /* 幅を大きくする（例：500px）。お好みの幅に調整してください */
  height: 300px; /* 高さも必要に応じて調整してください */
  overflow-y: auto;
  border: 2px solid #333;
  padding: 10px;
  box-sizing: border-box;
  background-color: #f9f9f9; /* コンテナの背景色（お好みで） */
}

/* UL要素のスタイル */
.custom-scrollable-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 各リストアイテム（LI要素）のスタイル */
.custom-scrollable-menu li {
  margin-bottom: 5px;
  padding: 8px;
  border-left: 5px solid;
  background-color: #fff; /* 各項目の背景色（見やすくするため） */
}

/* 各リンク（A要素）のスタイル */
.custom-scrollable-menu li a {
  text-decoration: none;
  color: #333;
  display: block;
}

/* カラフルな線の色を順番に指定 (変更なし) */
.custom-scrollable-menu li:nth-child(1) {
  border-left-color: #FF0000;
}
.custom-scrollable-menu li:nth-child(2) {
  border-left-color: #00FF00;
}
.custom-scrollable-menu li:nth-child(3) {
  border-left-color: #0000FF;
}
.custom-scrollable-menu li:nth-child(4) {
  border-left-color: #FFFF00;
}
.custom-scrollable-menu li:nth-child(5) {
  border-left-color: #FF00FF;
}
.custom-scrollable-menu li:nth-child(6) {
  border-left-color: #00FFFF;
}
.custom-scrollable-menu li:nth-child(7) {
  border-left-color: #FFA500;
}
.custom-scrollable-menu li:nth-child(8) {
  border-left-color: #800080;
}

/* マウスオーバー時のスタイル（お好みで） */
.custom-scrollable-menu li:hover {
  background-color: #eee;
}

.custom-scrollable-menu li:hover a {
  color: #007bff;
}