.mv_tomica_smoke img {
    width: 36% !important;
}

.smoke-after,
.smoke-after2 {
    position: absolute;
    left: 72%;
    bottom: 28%;
    z-index: 1;
    width: 100%;
    opacity: 0;
    /* transform: rotate(-15deg); */
    animation: smokeFloatAnimation 2s ease-out infinite;
    animation-delay: 1.2s;
}

.smoke-after2 {
    animation: smokeFloatAnimation2 2s ease-out infinite;
    animation-delay: 2.2s;
}

.smoke-front,
.smoke-front2 {
    position: absolute;
    left: 52%;
    bottom: 7%;
    z-index: 1;
    width: 100%;
    opacity: 0;
    /* transform: rotate(-15deg); */
    animation: smokeFloatAnimation 1.5s ease-out infinite;
    animation-delay: 1.2s;
}

.smoke-front2 {
    /* transform: rotate(-15deg); */
    animation: smokeFloatAnimation 1.5s ease-out infinite;
    animation-delay: 1.95s;
}

.smoke-front2-1,
.smoke-front2-2 {
    position: absolute;
    left: 62%;
    bottom: 23%;
    z-index: 1;
    width: 100%;
    opacity: 0;
    /* transform: rotate(-15deg); */
    animation: smokeFloatAnimation 1.5s ease-out infinite;
    animation-delay: 1.5s;
}

.smoke-front2-2 {
    /* transform: rotate(-15deg); */
    animation: smokeFloatAnimation2 1.5s ease-out infinite;
    animation-delay: 2.2s;
}

@keyframes smokeFloatAnimation {
    0% {
        transform: translate(0, 0);
        width: 60%;
        opacity: 0;
    }

    50% {
        opacity: 1;
        filter: blur(4px);
    }

    100% {
        transform: translate(25px, -20px);
        width: 100%;
        opacity: 0;
    }
}

@keyframes smokeFloatAnimation2 {
    0% {
        transform: translate(0, 0);
        width: 50%;
        opacity: 0;
    }

    50% {
        opacity: 1;
        filter: blur(4px);
    }

    100% {
        transform: translate(32px, -20px);
        width: 100%;
        opacity: 0;
    }
}

/* Swiper関連のスタイル */
.section4_body {
    overflow: hidden;
    width: 100%;
    position: relative;
    margin-bottom: 20px;
    min-height: 120px; /* スライダーの最小高さを確保 */
}

.swiper-slide {
    text-align: center;
    width: auto !important; /* 画像サイズに合わせて自動的に幅を調整 */
    max-width: 20%; /* 最大幅を設定 */
    flex-shrink: 0;
    transition-property: transform;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    max-width: 100%;
}


.swiper1 .swiper-wrapper,
.swiper2 .swiper-wrapper {
    flex-direction: row;
    transition-timing-function: linear !important;
    flex-wrap: nowrap !important;
}

/* Swiperコンテナのスタイル強化 */
.swiper-container {
    overflow: hidden;
    position: relative;
    z-index: 1;
    width: 100%;
    margin-top: 20px;
}


/* モバイル対応 */
@media screen and (max-width: 767px) {
    .swiper-slide {
        max-width: 33.333% !important; /* モバイルでは幅を広めに */
    }
}