/* バナーコンテナ（共通） */
.blog-ranking-banner-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin: 20px 0;
    padding: 0;
}

/* 横並び */
.blog-ranking-banner-container.brb-horizontal {
    flex-direction: row;
}

/* 縦並び */
.blog-ranking-banner-container.brb-vertical {
    flex-direction: column;
}

/* バナーアイテム */
.banner-item {
    flex: 0 1 auto;
    text-align: center;
}

.banner-item img {
    max-width: 100%;
    height: auto;
}

/* レスポンシブ: 横並びもスマホでは縦に */
@media screen and (max-width: 768px) {
    .blog-ranking-banner-container.brb-horizontal {
        flex-direction: column;
        gap: 15px;
    }
}