/* クラスバナーセクション */
.class-banners-section {
    padding: 30px 0;
}

.class-banners-content-bg {
    background-color: #ffffff;
}

.class-banners-container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0;
}

/* PC/タブレット版のみ - 子要素にpadding適用 */
.class-banners-column-gap-default > .class-banners-column > .class-banners-element-populated {
    padding: 0 10px;
}

/* .class-banners-column-gap-narrow {
    gap: 15px;
} */

/* 2カラムレイアウト */
.class-banners-inner-section .class-banners-container {
    display: flex;
    flex-wrap: wrap;
}

.class-banners-col-50 {
    flex: 0 0 50%;
    max-width: 50%;
}

.class-banners-image-wrap {
    padding: 5px;
}

.class-banners-widget-image img {
    height: auto;
    display: block;
}

.class-banners-widget-image a {
    display: block;
    transition: opacity 0.3s;
}

.class-banners-widget-image a:hover {
    opacity: 0.8;
}

/* レスポンシブ - モバイル */
@media (max-width: 767px) {
    /* モバイルでは子要素のpaddingを削除 */
    .class-banners-column-gap-default > .class-banners-column > .class-banners-element-populated {
        padding: 0;
    }
    
    .class-banners-top-section {
        padding: 10px 0;
    }
    
    .class-banners-top-section > .class-banners-container {
        padding: 0 10px;
    }
}