/* 登場アニメーション */
.bottom-up {
    opacity: 0;
    transform: translate3d(0, 50px, 0);
    transition: opacity 1s, transform 1s;
}

.right-in {
    opacity: 0;
    transform: translate3d(50px, 0, 0);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.left-in {
    opacity: 0;
    transform: translate3d(-50px, 0, 0);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.kaiten {
    opacity: 0;
}
.kaiten.is-animated {
    animation: kaiten 2.1s both;
    opacity: 1;
}

.bounce-down, .bounce-right {
    opacity: 0;
}

.bounce-down.is-animated {
    animation: bounce-down 1s steps(40, end), step-end infinite;
    opacity: 1;
}
.bounce-right.is-animated {
    animation: bounce-right 1s steps(40, end), step-end infinite;
    opacity: 1;
}

.up-wrapper.is-animated 
.up-1 {
    animation: 0.5s ease 0.5s up both;
    opacity: 0;
}.up-wrapper.is-animated 
.up-2 {
    animation: 0.8s ease 0.8s up both;
    opacity: 0;
}.up-wrapper.is-animated 
.up-3 {
    animation: 1.1s ease 1.1s up both;
    opacity: 0;
}.up-wrapper.is-animated 
.up-4 {
    animation: 1.4s ease 1.4s up both;
    opacity: 0;
}.up-wrapper.is-animated 
.up-5 {
    animation: 1.7s ease 1.7s up both;
    opacity: 0;
}.up-wrapper.is-animated 
.up-6 {
    animation: 2.0s ease 2.0s up both;
    opacity: 0;
}.up-wrapper.is-animated 
.up-7 {
    animation: 2.3s ease 2.3s up both;
    opacity: 0;
}.up-wrapper.is-animated 
.up-8 {
    animation: 2.6s ease 2.6s up both;
    opacity: 0;
}.up-wrapper.is-animated 
.up-9 {
    animation: 2.9s ease 2.9s up both;
    opacity: 0;
}
.up-wrapper.is-animated .up-10 {
    animation: 3.2s ease 3.2s up both;
    opacity: 0;
}
.up-wrapper.is-animated .up-11 {
    animation: 3.5s ease 3.5s up both;
    opacity: 0;
}
.up-wrapper.is-animated .up-12 {
    animation: 3.8s ease 3.8s up both;
    opacity: 0;
}
.up-wrapper.is-animated .up-13 {
    animation: 4.1s ease 4.1s up both;
    opacity: 0;
}
.up-wrapper.is-animated .up-14 {
    animation: 4.4s ease 4.4s up both;
    opacity: 0;
}
.up-wrapper.is-animated .up-15 {
    animation: 4.7s ease 4.7s up both;
    opacity: 0;
}
.up-wrapper.is-animated .up-16 {
    animation: 1.0s ease 1.0s up both;
    opacity: 0;
}
.up-wrapper.is-animated .up-17 {
    animation: 5.0s ease 5.0s up both;
    opacity: 0;
}
.up-wrapper.is-animated .up-18 {
    animation: 5.3s ease 5.3s up both;
    opacity: 0;
}
.up-wrapper.is-animated .up-19 {
    animation: 5.6s ease 5.6s up both;
    opacity: 0;
}
.up-wrapper.is-animated .up-20 {
    animation: 5.9s ease 5.9s up both;
    opacity: 0;
}


.left-slide {
    transform: scale(0, 1);
}

.left-slide.is-animated {
    transform-origin: left;
    transition: transform 0.3s cubic-bezier(0.9, 0, 0.1, 1);
    transform: scale(1, 1);
}

.bottom-up.is-animated, .right-in.is-animated, .left-in.is-animated  {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.boshuu__txt li {
    display: inline-block;
    will-change: filter;
    white-space: nowrap;
    animation: infinite-flow 20s -10s linear infinite;
}

.footer__img > img {
    animation: infinite-dance 2s ease-in-out infinite;
}

.side-scroll {
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: 15px;
    width: fit-content;
}

.side-scroll > p {
    color: #E46105;
    font-size: 16px;
    position: relative;
    top: 5px;
    letter-spacing: 0.1em;
    font-weight: 900;
}

.side-scroll > img {
    width: 80px;
    animation: infinite-arrow 2s ease-in-out infinite;
}

@keyframes infinite-arrow {
    0%, 100% {
        transform: translateX(10px);
    }
    50% {
        transform: translateX(0);
    }
}


@keyframes infinite-dance {
    0%, 100% {
        transform: rotate(3deg);
    }
    50% {
        transform: rotate(-3deg);
    }
}

@keyframes infinite-flow {
    0% {
        transform: translateX(100%);
    }
    
    100% {
        transform: translateX(-100%);
    }
}

@keyframes kaiten {
    from {
        transform: perspective(410px) rotate3d(1, 0, 0, 90deg);
        animation-timing-function: ease-in;
        opacity: 0;
        }
        40% {
        transform: perspective(410px) rotate3d(1, 0, 0, -15deg);
        animation-timing-function: ease-in;
        }
        60% {
        transform: perspective(410px) rotate3d(1, 0, 0, 5deg);
        opacity: 1;
        }
        80% {
        transform: perspective(410px) rotate3d(1, 0, 0, -5deg);
        }
        to {
        transform: perspective(340px);
        }
    }


@keyframes up {
    0% {
        transform: translate3d(0, 100%, 0);
        opacity: 0;
    }
    100% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

@keyframes bounce-down {
    0%, 60%, 75%, 90%, 100% {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
        transform: translate3d(0, -3000px, 0);
        opacity: 0;
    }
    60% {
        transform: translate3d(0, 25px, 0);
        opacity: 1;
    }
    75% {
        transform: translate3d(0, -10px, 0);
    }
    90% {
        transform: translate3d(0, 5px, 0);
    }
    100% {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes bounce-right {
    0%, 60%, 75%, 90%, 100% {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
        transform: translate3d(3000px, 0, 0);
        opacity: 0;
    }
    60% {
        transform: translate3d(-25px, 0, 0);
        opacity: 1;
    }
    75% {
        transform: translate3d(10px, 0, 0);
    }
    90% {
        transform: translate3d(-5px, 0, 0);
    }
    100% {
        transform: translate3d(0, 0, 0);
    }
}