.swiper-container-wrapper {
    position: relative; 
    width: 100%; 
    margin: 0 auto;
    padding-bottom: 40px; /* ページネーションが下に出るように余白を追加 */
}

.swiper {
    width: 100%;
    overflow: hidden;
}
.swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    box-sizing: border-box; 
}

/* ページネーションのスタイル調整 */
.swiper-pagination {
    position: absolute; 
    bottom: 0; 
    left: 50%!important; 
    transform: translateX(-50%);
    width: auto; 
}

/* ページネーションの各ドットのスタイル調整 */
.swiper-pagination-bullet {
    background-color: #999;
    opacity: 1;
    margin: 0 4px; /* ドット間の横方向の余白 */
}

.swiper-pagination-bullet-active {
    background-color: #007aff; /* アクティブなドットの色 */
}

/* ナビゲーションボタンのスタイル*/
.swiper-button-prev,
.swiper-button-next {
    color: #FFFFFF; /* 矢印の色 */
    background: #333333;
    height: 20px;
    width: 20px;
    border-radius: 20px;
}

.swiper-button-prev::after,
.swiper-button-next::after {
    font-size: 12px;
    font-weight: 900;
}