.dual-slider-section {
    width: 100%;
    overflow: hidden;
margin:80px 0 50px;
}

.swiper-top,
.swiper-bottom {
    width: 100%;
    overflow: hidden;
}

.swiper-top .swiper-wrapper,
.swiper-bottom .swiper-wrapper {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    gap: 20px;
}

.swiper-top .swiper-slide,
.swiper-bottom .swiper-slide {
    width: 420px;
    height: 280px;
    flex-shrink: 0;
}

.swiper-top .swiper-slide img,
.swiper-bottom .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
border-radius:10px;
}

.swiper-top {
    margin-bottom: 20px;
}

/* 上下ともに移動距離は --slide-total-width の1セット分のみ */
@keyframes slideForward {
    from { transform: translateX(var(--slide-offset)); }
    to   { transform: translateX(calc(var(--slide-offset) - var(--slide-total-width))); }
}

@keyframes slideReverse {
    from { transform: translateX(var(--slide-offset)); }
    to   { transform: translateX(calc(var(--slide-offset) + var(--slide-total-width))); }
}

.slide-forward {
    animation: slideForward 1ms linear infinite;
    /* duration は JS で上書きされる */
}

.slide-reverse {
    animation: slideReverse 1ms linear infinite;
    /* duration は JS で上書きされる */
}


/* 750px以下から 1カラム表示
------------------------------------------------------------*/
@media only screen and (max-width: 749px){
.dual-slider-section {
    width: 100%;
    overflow: hidden;
margin:50px 0 50px;
}
.swiper-top .swiper-slide,
.swiper-bottom .swiper-slide {
    width: 150px;
    height: 100px;
    flex-shrink: 0;
}
.swiper-top .swiper-wrapper,
.swiper-bottom .swiper-wrapper {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    gap: 10px;
}
.swiper-top {
    margin-bottom: 10px;
}
}