@keyframes opacityAnime {
    from {
        opacity: 0;
        transform: scale(1.1);
        filter: blur(10px);
    }

    to {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
    }
}

@keyframes opacityAnime2 {
    from {
        opacity: 0;
        transform: scale(1.2) translateY(-45%) rotateX(-90deg) perspective(80px);
        filter: blur(20px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(-50%) rotateX(0) perspective(80px);
        filter: blur(0);
    }
}

@keyframes stretchBorder2 {
    from {
        opacity: 0;
        width: 0;
    }

    to {
        opacity: 1;
        width: calc(100%);
    }
}

@keyframes stretchBorder {
    from {
        opacity: 0;
        width: 0;
    }

    to {
        opacity: 1;
        width: calc(100%);
    }
}

/* 一文字ずつ表示 */
.eachTextAnime {
    opacity: 0;
}

.appeartext {
    opacity: 1;
}

.eachTextAnime span {
    opacity: 0;
}

.eachTextAnime.appeartext span {
    animation: text_anime_on 1s ease-out forwards;
}

@keyframes text_anime_on {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes slideImg {
    from {
        opacity: 0;
        transform: translateX(-100%);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideImgReverce {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
        width: 50%;
    }
}

/* .sec-01__card {
    opacity: 0;
}

.sec-01__card-area.scrollDisplay-active .sec-01__card {
    animation-name: opacityAnime;
    animation-fill-mode: forwards;
    animation-duration: 2s;
}

.sec-01__card-area.scrollDisplay-active .sec-01__card:nth-child(1) {
    animation-delay: 0.5s;
}

.sec-01__card-area.scrollDisplay-active .sec-01__card:nth-child(2) {
    animation-delay: 1.2s;
}

.sec-01__card-area.scrollDisplay-active .sec-01__card:nth-child(3) {
    animation-delay: 1.9s;
} */