/* 1. Swiperコンテナの基本設定 */
.swiper-wrapper {
    width: 100%;
    height: max-content !important;
    padding-bottom: 0 !important; 
    -webkit-transition-timing-function: linear !important;
    transition-timing-function: linear !important;
    position: relative;
}

@media (min-width: 1024px) { /* Tailwindの lg: と同じブレークポイント */
    .lg-aspect-16-85-wrapper {
        position: relative;
        padding-bottom: 53%; 
        height: 0 !important; 
    }
}


/* 3. ナビゲーションボタンとページネーションの配置解除 */
.swiper-button-prev,
.swiper-button-next {
    position: static !important;
    margin: 0 !important;
    transform: none !important; 
    top: auto !important; 
    left: auto !important;
    right: auto !important;
}

.swiper-pagination {
    position: static !important; 
    width: auto !important;      
    text-align: center;
    bottom: auto !important;     
}

/* 4. ページネーションのドットのスタイルは維持 */
.swiper-pagination-bullet {
    background: #4f4f4f;
}
.swiper-pagination-bullet-active {
    background: #AED144 !important;
}

/* 5. 画像が親要素にフィットするように確保 */
.banner-image {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    border-radius: 1rem; 
}
/* アスペクト比ラッパー内の画像は絶対配置にして親要素全体を覆う */
@media (min-width: 1024px) {
    .lg-aspect-16-85-wrapper .banner-image {
        position: absolute;
        top: 0;
        left: 0;
    }
}