.mySwiper {
    position: relative;
    width: 100%;
    height: 500px;
    /* ここは必要に応じて */
}

.lightning_swiper {
    position: relative;
    width: 100%;
    height: 500px
    /* ここは必要に応じて */
}

/* 画像をスライダー領域いっぱいに（任意） */
.mySwiper .swiper-slide img,.lightning_swiper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.swiper-area {
    position: relative;
    margin-bottom: 50px;
}

.swiper-area .swiper-pagination {
    position: absolute;
    left: -20px !important;
    /* 外に出す */
    bottom: -35px !important;
    top: auto !important;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* バレットの見た目（任意） */
.mySwiper .swiper-pagination-bullet,.lightning_swiper .swiper-pagination-bullet {
    opacity: .5;
}

.mySwiper .swiper-pagination-bullet-active,.lightning_swiper .swiper-pagination-bullet-active {
    opacity: 1;
}

/* バレットの見た目（任意） */
.mySwiper .swiper-pagination-bullet,.lightning_swiper .swiper-pagination-bullet {
    opacity: .5;
}

.mySwiper .swiper-pagination-bullet-active,.lightning_swiper .swiper-pagination-bullet-active {
    opacity: 1;
}

.mySwiper,.lightning_swiper {
    position: relative;
}


/* Swiper初期化が終わるまで非表示 */
.swiper-area .swiper-pagination {
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
}

/* 初期化後に表示 */
.swiper-area.is-swiper-ready .swiper-pagination {
    opacity: 1;
    pointer-events: auto;
}