/* ==================================================== */
/* 告知用バナーセクション (banner.css)                  */
/* ==================================================== */

.banner-section {
    max-width: 1200px;
    margin: 20px auto 0; /* メインビジュアルとの余白を調整 */
    padding: 0 20px;
}

.banner-inner {
    width: 100%;
}

.banner-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* バナー間の隙間 */
    justify-content: center;
}

.banner-item {
    width: 100%;
    margin: 0 auto;   /* 中央寄せにする */
}

.banner-item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px; /* お好みで角丸 */
}

/* レスポンシブ対応（スマホ表示） */
@media (max-width: 768px) {
    .banner-section {
        margin-top: 24px;
        padding: 0 16px;
    }
    
    .banner-list {
        gap: 15px;
    }
}