/* 親要素にスクロールバーと横並びの制約をかける */
.scroll-container {
    width: 100%; /* バナーを表示する幅を制限 */
    overflow-x: auto; /* 横スクロールを可能にする */
    white-space: nowrap; /* コンテンツを折り返さない */
    border: 1px solid #ccc; /* バナー領域の確認用 */
}

/* 子要素（バナーアイテム）のスタイル */
.scroll-content {
    display: flex; /* アイテムを横並びにする */
}

.banner-item {
    flex-shrink: 0; /* アイテムが縮むのを防ぐ */
    width: 212px; /* バナーアイテムの固定幅 */
    height: 300px; /* バナーアイテムの高さ */
    background-color: lightblue;
    margin: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
}

.banner-item a {
    text-decoration: none;
    color: #333;
}