.kaiju-appear {
    animation: kaiju-rise-shake 2s ease-out forwards;
    transform: translateY(100%);
    opacity: 1;
    width: 100%;
    margin-top: -30px;

}

@media (max-width: 479px) {
    .kaiju-appear {
        margin-top: 30px;
    }
}

@media (max-width: 379px) {
    .kaiju-appear {
        margin-top: 50px;
    }
}

@media (max-width: 336px) {
    .kaiju-appear {
        margin-top: 90px;
    }
}


.kaiju-appear img {
    width: 68%;

}

@keyframes kaiju-rise-shake {
    0% {
        transform: translateY(100%) translateX(0);
        opacity: 0;
        /* width: 0%; */
    }

    5% {
        transform: translateY(95%) translateX(-2px);
    }

    10% {
        transform: translateY(90%) translateX(2px);
    }

    15% {
        transform: translateY(85%) translateX(-2px);
    }

    20% {
        transform: translateY(80%) translateX(2px);
    }

    25% {
        transform: translateY(75%) translateX(-2px);
        opacity: 0;
    }

    30% {
        transform: translateY(70%) translateX(2px);
    }

    35% {
        transform: translateY(65%) translateX(-2px);
    }

    40% {
        transform: translateY(60%) translateX(2px);
    }

    45% {
        transform: translateY(55%) translateX(-2px);
    }

    50% {
        transform: translateY(50%) translateX(2px);
    }

    55% {
        transform: translateY(45%) translateX(-2px);
    }

    60% {
        transform: translateY(40%) translateX(2px);
    }

    65% {
        transform: translateY(35%) translateX(-2px);
    }

    70% {
        transform: translateY(30%) translateX(2px);
    }

    75% {
        transform: translateY(25%) translateX(-2px);
    }

    80% {
        transform: translateY(20%) translateX(2px);
    }

    85% {
        transform: translateY(15%) translateX(-2px);
    }

    90% {
        transform: translateY(10%) translateX(2px);
    }

    95% {
        transform: translateY(5%) translateX(-2px);
    }

    100% {
        transform: translateY(0%) translateX(0);
    }
}


.title_animation {

    animation: scaleUp 10s steps(5, end) forwards;
}

@keyframes scaleUp {
    0% {
        transform: scale(0.5);
    }

    100% {
        transform: scale(1);
    }
}

.show_anime_1 {
    animation: show_anime_1 1s ease-out forwards;

}

@keyframes show_anime_1 {
    0% {
        opacity: 0;
        transform: translateY(100%);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.show_anime_2 {
    animation: show_anime_2 2s ease-out forwards;
}

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

    50% {
        transform: translateX(10%);
    }

    100% {
        opacity: 1;
        transform: translateX(0%);
    }
}

.show_anime_3 {
    animation: show_anime_3 4s ease-out forwards;
}


@keyframes show_anime_3 {

    10% {
        transform: rotate(5deg);
    }


    25% {
        transform: rotate(-5deg);
    }



    40% {
        transform: rotate(5deg);
    }



    55% {
        transform: rotate(-5deg);
    }



    70% {
        transform: rotate(5deg);
    }



    85% {
        transform: rotate(-5deg);
    }



    100% {

        transform: rotate(0deg);
    }
}


.show_anime_4 {
    animation: show_anime_4 1s ease-out forwards;
}

@keyframes show_anime_4 {
    0% {
        transform: scale(1);
    }

    25% {
        transform: scale(1.2);
    }

    /* 50% {
        transform: scale(0.8);
    }

    75% {
        transform: scale(1.2);
    } */

    100% {
        transform: scale(1);
    }
}