@keyframes nav-bg-bounce {
    0% {
        height: 15px;
    }

    30% {
        height: 100%;
    }

    60% {
        height: 80%;
    }

    100% {
        height: 100%;
    }
}

@keyframes nav-bg-bounce-off {
    0% {
        height: 100%;
    }

    100% {
        height: 15px;
    }
}

@keyframes nav-bg-bounce-sp {
    0% {
        height: 10px;
    }

    30% {
        height: 100%;
    }

    60% {
        height: 80%;
    }

    100% {
        height: 100%;
    }
}

@keyframes nav-bg-bounce-off-sp {
    0% {
        height: 100%;
    }

    100% {
        height: 10px;
    }
}

@keyframes overlay-bounce {
    0% {
        transform: scale(0, 1);
    }

    40% {
        transform: scale(1, 1);
    }

    70% {
        transform: scale(0.87, 1);
    }

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

@keyframes overlay-child-bounce {
    0% {
        transform: scale(1, 1);
    }

    30% {
        transform: scale(0.5, 1);
    }

    40%,
  45% {
        transform: scale(0.53, 1);
    }

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

    85% {
        transform: scale(0.01, 1);
    }

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

@keyframes name-bounce {
    0% {
        transform: translate(-100%, 0) skew(-32deg);
    }

    50% {
        transform: translate(0, 0) skew(-32deg);
    }

    75% {
        transform: translate(-40px, 0) skew(-32deg);
    }

    100% {
        transform: translate(0, 0) skew(-32deg);
    }
}

@keyframes type-bounce {
    0% {
        transform: translate(-100%, 0);
    }

    50% {
        transform: translate(0, 0);
    }

    75% {
        transform: translate(-20px, 0);
    }

    100% {
        transform: translate(0, 0);
    }
}

#aircraft-lineup #lineup-container .lineup-item-list .lineup-item {
    transition: opacity 0ms;
    transition-delay: 900ms;
}

#aircraft-lineup #lineup-container .lineup-item-list .lineup-item .name-area {
    transform: translate(-100%, 0);
    transition: all 400ms;
    z-index: 3;
}

#aircraft-lineup #lineup-container .lineup-item-list .lineup-item .name-area .name-bg-line {
    transform: translate(-100%, 0) skew(-32deg);
}

#aircraft-lineup #lineup-container .lineup-item-list .lineup-item .name-area .type-container {
    transform: translate(-100%, 0);
}

#aircraft-lineup #lineup-container .lineup-item-list .lineup-item .name-area .type-container .type-bg-line {
    top: 0 !important;
}

#aircraft-lineup #lineup-container .lineup-item-list .lineup-item > .overlay {
    animation: overlay-bounce 550ms;
    animation-fill-mode: forwards;
    animation-delay: 400ms;
}

#aircraft-lineup #lineup-container .lineup-item-list .lineup-item .about-inner {
    opacity: 0;
    transition: opacity 300ms;
}

#aircraft-lineup #lineup-container .lineup-item-list .lineup-item.current {
    z-index: 1;
    opacity: 1;
}

#aircraft-lineup #lineup-container .lineup-item-list .lineup-item.current > .overlay {
    animation: none;
    transform: scale(1, 1);
}

#aircraft-lineup #lineup-container .lineup-item-list .lineup-item.current > .overlay > div {
    animation: overlay-child-bounce 600ms;
    animation-fill-mode: forwards;
    animation-delay: 1000ms;
}

#aircraft-lineup #lineup-container .lineup-item-list .lineup-item.current .name-area {
    transform: translate(0, 0);
    transition: none;
    transition-duration: 0ms;
    transition-delay: 0ms;
}

#aircraft-lineup #lineup-container .lineup-item-list .lineup-item.current .name-area.play .name-bg-line {
    animation: name-bounce 600ms;
    animation-fill-mode: forwards;
    animation-delay: 900ms;
}

#aircraft-lineup #lineup-container .lineup-item-list .lineup-item.current .name-area.play .type-container {
    animation: type-bounce 600ms;
    animation-fill-mode: forwards;
    animation-delay: 960ms;
}

#aircraft-lineup #lineup-container .lineup-item-list .lineup-item.current .name-area .name-inner .name.text-animation.anime .line p .overlay {
    overflow: visible;
    transform: scale(1, 1);
}

#aircraft-lineup #lineup-container .lineup-item-list .lineup-item.current .name-area .name-inner .name.text-animation.anime .line p .overlay:after {
    width: 100%;
    background: #fff;
    transform: translate(50%, 0);
}

#aircraft-lineup #lineup-container .lineup-item-list .lineup-item.current .name-area .name-inner .name.anime {
    opacity: 1;
}

#aircraft-lineup #lineup-container .lineup-item-list .lineup-item.current .about-inner {
    opacity: 1;
}

#aircraft-lineup #lineup-container .lineup-item-list .lineup-item.current .about-inner .bg-flame-01,
      #aircraft-lineup #lineup-container .lineup-item-list .lineup-item.current .about-inner .bg-flame-02 {
    animation-delay: 1200ms;
}

#aircraft-lineup #lineup-container .lineup-item-list .lineup-item.current .about-inner p {
    transition-delay: 1400ms;
}

#aircraft-lineup #lineup-container .navi-lineup .menu .name .text {
    transition: all 150ms;
}

#aircraft-lineup #lineup-container .navi-lineup .menu .name .label {
    transition: all 150ms;
}

#aircraft-lineup #lineup-container .navi-lineup .menu .bg {
    animation: nav-bg-bounce-off-sp 120ms;
    animation-fill-mode: forwards;
}

@media screen and (min-width: 768px) {
    #aircraft-lineup #lineup-container .navi-lineup .menu .bg {
        animation: nav-bg-bounce-off 120ms;
        animation-fill-mode: forwards;
    }
}

#aircraft-lineup #lineup-container .navi-lineup .menu.current .name .text {
    transition-delay: 400ms;
}

#aircraft-lineup #lineup-container .navi-lineup .menu.current .name .label {
    transition-delay: 400ms;
}

@media screen and (min-width: 768px) {
    #aircraft-lineup #lineup-container .navi-lineup .menu:hover .bg {
        animation: nav-bg-bounce 400ms;
        animation-fill-mode: forwards;
    }

    #aircraft-lineup #lineup-container .navi-lineup .menu:hover .img .img-white {
        opacity: 0;
    }

    #aircraft-lineup #lineup-container .navi-lineup .menu:hover .img .img-blue {
        opacity: 1;
    }
}