/* SP画像を3秒ごとに切り替えるアニメーション */
.u-mv__top__img--sp {
    position: relative;
    display: inline-block;
    width: 100%;
}

.u-mv__top__img--sp img {
    display: block;
    width: 100%;
    height: calc(100vh - 55px);
    overflow: hidden;
    object-fit: cover;
}

/* 2つの画像を重ねて配置 */
.u-mv__top__img--sp img:nth-child(1) {
    position: relative;
    animation: fadeInOut1 10s ease-in-out infinite;
}

.u-mv__top__img--sp img:nth-child(2) {
    position: absolute;
    top: 0;
    left: 0;
    animation: fadeInOut2 10s ease-in-out infinite;
}

/* 画像1のアニメーション: 0-3秒表示、3-6秒非表示 */
@keyframes fadeInOut1 {
    0%,
    45% {
        opacity: 1;
        z-index: 2;
    }
    50%,
    100% {
        opacity: 0;
        z-index: 1;
    }
}

/* 画像2のアニメーション: 0-3秒非表示、3-6秒表示 */
@keyframes fadeInOut2 {
    0%,
    45% {
        opacity: 0;
        z-index: 1;
    }
    50%,
    95% {
        opacity: 1;
        z-index: 2;
    }
    100% {
        opacity: 0;
        z-index: 1;
    }
}