/* アニメーション */
.page-ability-head-title-btn {
    opacity: 0;
}

.animation-btn {
    animation: fadeInBackground 4.6s ease-in-out 0s forwards;
}

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

    20% {
        opacity: 0;
    }

    40% {
        opacity: 1;
    }

    75% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.page-ability-head-title-img {
    opacity: 0;
    width: 100%;
}

.animation-img {

    animation: fadeInCharacter 4.6s ease-in-out 0s forwards;
}

@keyframes fadeInCharacter {
    0% {
        opacity: 0;
        transform: translate3d(30px, 0, 0)
    }

    10% {
        opacity: 0;
    }

    20% {
        opacity: 1;
        transform: translate3d(0, 0, 0)
    }

    65% {
        opacity: 1;
        transform: translate3d(0, 0, 0)
    }

    90% {
        opacity: 0;
        transform: translate3d(-20px, 0, 0)
    }

    100% {
        opacity: 0;
    }
}