@keyframes logo-animation {
    0% {
        opacity: 1;
    }

    90% {
        opacity: 0;
    }
}

@keyframes engage-text {
    0% {
        opacity: 1;
    }

    99% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

#loading {
    display: block;
}

#loading .logo {
    animation: logo-animation 2300ms infinite;
    animation-fill-mode: forwards;
}

#loading .progress-bar {
    transition: all 100ms;
    transform: translate(-100%, 0);
    transform-origin: 0 50%;
}

#loading .img-engage {
    opacity: 0;
}

#loading .img-engage img {
    opacity: 0;
}

#loading .img-engage img.img-engage01 {
    opacity: 1;
}

#loading .img-engage.show {
    opacity: 1;
    transition: opacity 300ms;
}

#loading.loaded {
    transition: all 600ms;
    transition-delay: 400ms;
    pointer-events: none;
    opacity: 0;
}

#loading.loaded .logo {
    opacity: 0 !important;
    animation: none;
}

#loading.loaded .progress-bar {
    transform: translate(100%, 0) !important;
    transition-duration: 400ms;
}

#loading.loaded .img-engage img.img-engage01 {
    transform: translate3d(0, 0, 0);
    opacity: 0;
}

#loading.loaded .img-engage img.img-engage02 {
    animation: engage-text 50ms;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
    animation-delay: 200ms;
}

#loading.loaded .img-engage img.img-engage03 {
    animation: engage-text 50ms;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
    animation-delay: 160ms;
}

#loading.loaded .img-engage img.img-engage04 {
    animation: engage-text 50ms;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
    animation-delay: 120ms;
}

#loading.loaded .img-engage img.img-engage05 {
    animation: engage-text 50ms;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
    animation-delay: 80ms;
}

#loading.loaded .img-engage img.img-engage06 {
    animation: engage-text 50ms;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
    animation-delay: 40ms;
}

#loading.loaded .img-engage img.img-engage07 {
    animation: engage-text 50ms;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
    animation-delay: 0ms;
}

body:not(#top) #foot-utility {
    opacity: 1 !important;
    pointer-events: auto !important;
}

#wrap {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

#wrap header .inner {
    transition: all 250ms;
    transition-timing-function: ease-in-out;
}

#wrap header .inner #btn-navi span {
    position: absolute;
    left: 1px;
    width: 23px;
    height: 2px;
    background: #5683d5;
    border-radius: 10px;
    transition: all 330ms;
}

#wrap header .inner #btn-navi span:nth-child(1) {
    top: 2px;
}

#wrap header .inner #btn-navi span:nth-child(2) {
    top: 9px;
}

#wrap header .inner #btn-navi span:nth-child(3) {
    top: 16px;
}

#wrap header .inner #btn-navi.open span:nth-child(1) {
    transform: translate(0px, 7px) rotate(-45deg);
}

#wrap header .inner #btn-navi.open span:nth-child(2) {
    opacity: 0;
}

#wrap header .inner #btn-navi.open span:nth-child(3) {
    transform: translate(0px, -7px) rotate(-135deg);
}

@keyframes text-subtitle {
    0% {
        transform: translate(150px, 0);
        opacity: 0;
    }

    5% {
        opacity: 1;
    }

    55% {
        transform: translate(-25px, 0);
    }

    80% {
        transform: translate(10px, 0);
    }

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

@keyframes text-overlap-front {
    0% {
        transform: translate(100vw, 0);
    }

    12% {
        transform: translate(1.5vw, 0);
    }

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

@keyframes text-overlap-bg {
    0% {
        transform: translate(-100%, 0);
    }

    12% {
        transform: translate(-5%, 0);
    }

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

@keyframes border-overlap01 {
    0% {
        transform: translate(0, 0);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

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

    40.01% {
        transform: translate(45px, 0);
        opacity: 0;
    }

    50%, 60% {
        opacity: 1;
    }

    85% {
        transform: translate(80px, 0);
        opacity: 0;
    }

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

@keyframes border-overlap02 {
    0% {
        transform: translate(0, 0);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    60% {
        transform: translate(-30px, 0);
        opacity: 0;
    }

    60.01% {
        transform: translate(-25px, 0);
        opacity: 0;
    }

    70%,
  85% {
        opacity: 1;
    }

    100% {
        transform: translate(-60px, 0);
        opacity: 0;
    }
}

@keyframes border-overlap03 {
    0% {
        transform: translate(0, 0);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    60% {
        transform: translate(-100px, 0);
        opacity: 0;
    }

    60.01% {
        transform: translate(-50px, 0);
        opacity: 0;
    }

    70%,
  85% {
        opacity: 1;
    }

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

@keyframes flame-text-window {
    0% {
        transform: scale(0.001, 0.001);
    }

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

    8% {
        transform: scale(0.001, 0.001);
    }

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

#wrap section {
    position: relative;
}

#wrap section .switching-img > * {
    opacity: 1;
    transition: opacity 1800ms;
}

#wrap section .switching-img > *.hide {
    opacity: 0;
}

#wrap .section-contents {
    position: relative;
    background: #171717;
}

#wrap .head-covered {
    transform: scale(0, 1);
    transform-origin: 0% 50%;
}

#wrap .head-covered .img-heading-cover {
    transform: translate(50%, 0);
}

#wrap .sub-title {
    transform: scale(0, 0);
    transform-origin: 0 0;
}

#wrap .sub-title .text-sub-title {
    transform: translate(150px, 0);
    opacity: 0;
}

#wrap .sub-title .parts-sub-title {
    transform: scale(1, 0);
    transform-origin: 50% 0;
}

#wrap .overlap-bg-text {
    transform: translate(-100vw, 0);
    opacity: 0;
}

#wrap .overlap-front-text {
    position: relative;
}

#wrap .overlap-front-text span {
    transform: translate(100vw, 0);
}

#wrap .border-container {
    height: 100%;
    bottom: 0;
    transform: translate(100px, 0);
    opacity: 0;
}

#wrap .border-container .border {
    width: 70px;
}

#wrap .border-container .border:nth-child(1) {
    z-index: 1;
}

#wrap .border-container .border:nth-child(2) {
    width: 35px;
}

#wrap .border-container .border:nth-child(3) {
    width: 35px;
}

#wrap .fade-text {
    opacity: 0;
}

#wrap .scroll-anime.common-slide-vertical {
    transition: all 600ms !important;
    opacity: 0;
    transform: translate(0, 100px);
}

#wrap .scroll-anime.common-slide-vertical02 {
    transition: all 600ms !important;
    opacity: 0;
    transform: translate(0, 50px);
}

#wrap .scroll-anime.common-fade {
    opacity: 0;
    transition: opacity 1400ms !important;
}

#wrap .scroll-anime.anime.common-slide-vertical {
    opacity: 1;
    transform: translate(0, 0);
}

#wrap .scroll-anime.anime.common-slide-vertical02 {
    opacity: 1;
    transform: translate(0, 0);
}

#wrap .scroll-anime.anime.common-fade {
    opacity: 1;
}

#wrap .anime .head-covered {
    transition: all 350ms;
    transform: scale(1, 1);
}

#wrap .anime .head-covered .img-heading-cover {
    transform: translate(0%, 0);
    transition: all 380ms;
    transition-delay: 200ms;
    transition-timing-function: cubic-bezier(0.435, 0.225, 0.665, 1.425);
}

#wrap .anime .sub-title {
    transform: scale(1, 1);
    transition: all 300ms;
}

#wrap .anime .sub-title .parts-sub-title {
    transform: scale(1, 1);
    transition: all 200ms;
    transition-delay: 270ms;
    transition-timing-function: cubic-bezier(0.4, 0.245, 0.6, 1.635);
}

#wrap .anime .sub-title .text-sub-title {
    animation: text-subtitle 400ms;
    animation-fill-mode: forwards;
    animation-delay: 350ms;
    animation-timing-function: cubic-bezier(0.38, 0.32, 0.485, 1.65);
}

#wrap .anime .overlap-bg-text {
    animation: text-overlap-bg 1700ms;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
    opacity: 1;
}

#wrap .anime .overlap-front-text span {
    animation: text-overlap-front 1700ms;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
}

#wrap .anime .fade-text {
    opacity: 1;
    transition: opacity 800ms;
    transition-delay: 400ms;
}

#wrap .anime .border-container {
    opacity: 1;
    transform: translate(0, 0);
    transition: all 1100ms;
}

#wrap .anime .border-container .border:nth-child(1) {
    z-index: 1;
}

#wrap .anime .border-container .border:nth-child(2) {
    left: 35px;
    opacity: 0;
    animation: border-overlap01 7000ms infinite;
    animation-fill-mode: forwards;
}

#wrap .anime .border-container .border:nth-child(3) {
    left: 140px;
    opacity: 0;
    animation: border-overlap02 9000ms infinite;
    animation-delay: 1000ms;
    animation-fill-mode: forwards;
}

#wrap .anime .border-container .border.animation-overlap3 {
    left: 100px;
    animation-name: border-overlap03;
}

#wrap .anime .border-container .border.border-reverse {
    animation-direction: reverse;
}

#wrap .anime .border-container .border.border-alternate-reverse {
    animation-direction: alternate-reverse;
}

#wrap .parts-square.anime > .effects > div {
    transition: transform 160ms;
}

#wrap .parts-square.anime > .effects > div:nth-child(1) {
    transform: translate(0, 0);
    transition-delay: 400ms;
}

#wrap .parts-square.anime > .effects > div:nth-child(2) {
    transform: translate(0, 0);
    transition-delay: 560ms;
}

#wrap .parts-square.anime > .effects > div:nth-child(3) {
    transform: translate(0, 0);
    transition-delay: 720ms;
}

#wrap .parts-square.anime > .effects > div:nth-child(4) {
    transform: translate(0, 0);
    transition-delay: 880ms;
}

#wrap .flame-text p {
    opacity: 0;
}

#wrap .flame-text .bg-flame-01,
  #wrap .flame-text .bg-flame-02 {
    transform: scale(0.001, 0.001);
}

#wrap .flame-text.anime .bg-flame-01,
  #wrap .flame-text.anime .bg-flame-02 {
    animation: flame-text-window 600ms;
    animation-fill-mode: forwards;
}

#wrap .flame-text.anime p {
    opacity: 1;
    transition: opacity 300ms;
    transition-delay: 250ms;
}

#wrap .main-head .head-video-container {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

#wrap .main-head .head-covered {
    display: block;
}

#wrap .head-video-container .mbYTP_wrapper,
  #wrap .main-video-container .mbYTP_wrapper {
    transition-duration: 200ms !important;
}

#wrap .head-video-container .main-video,
  #wrap .main-video-container .main-video {
    padding-top: 66.66%;
}

#wrap .head-video-container .hide,
  #wrap .main-video-container .hide {
    opacity: 0 !important;
}

#wrap .head-video-container iframe,
  #wrap .main-video-container iframe {
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
    margin-top: 0 !important;
    min-width: 1610px !important;
    min-height: 83px !important;
    transition-duration: 200ms !important;
    margin: 0 !important;
}

#wrap .head-video-container.fix,
  #wrap .main-video-container.fix {
    padding-top: 66.66%;
}

#wrap .head-video-container.fix .main-video,
    #wrap .main-video-container.fix .main-video {
    position: fixed;
    width: 100%;
    top: 50px;
}

#wrap .head-video-container.open.fix .main-video,
  #wrap .main-video-container.open.fix .main-video {
    position: fixed;
    top: 78px;
}

@media screen and (min-width: 768px) {
    #wrap .head-video-container iframe,
    #wrap .main-video-container iframe {
        min-height: 855px !important;
    }

    #wrap .head-video-container.fix,
    #wrap .main-video-container.fix {
        padding-top: 0;
    }

    #wrap .head-video-container.fix .main-video,
      #wrap .main-video-container.fix .main-video {
        position: fixed !important;
        top: 66px;
    }
}

#wrap .main-video-container {
    position: relative;
    overflow: hidden;
}

#wrap .main-video-container.fix {
    padding-top: 66.66%;
}

@media screen and (min-width: 768px) {
    #wrap .main-video-container {
        background-color: #171717;
        height: 583px;
    }

    #wrap .main-video-container .main-video {
        display: block;
        padding-top: 0px;
    }

    #wrap .main-video-container.fix {
        padding-top: 0;
    }
}

#wrap #foot-utility {
    opacity: 0;
    transition: opacity 400ms;
    transition-timing-function: ease-in-out;
    pointer-events: none;
}

#wrap #foot-utility.show {
    opacity: 1;
    pointer-events: auto;
}

#wrap #foot-utility .menu-bar li {
    cursor: pointer;
}

#wrap #foot-utility .menu-bar li p {
    transition: opacity 300ms;
}

#wrap #foot-utility .menu-bar li.current {
    cursor: auto;
}

#wrap .text-animation02 {
    position: relative;
}

#wrap .text-animation02 p {
    z-index: 1;
}

#wrap .text-animation02 p.dummy {
    opacity: 0;
}

#wrap .text-animation02 p.dummy.anime {
    opacity: 1;
    transition: opacity 400ms;
    transition-delay: 400ms;
}

#wrap .text-animation02 p.text {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: inline;
}

#wrap .text-animation {
    overflow: hidden;
}

#wrap .text-animation .line {
    overflow: hidden;
    display: inline;
    position: relative;
    opacity: 0;
}

#wrap .text-animation .line .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
    transform: translate(-100%, 0);
    transition: transform 300ms;
}

#wrap .text-animation .line p {
    position: relative;
    opacity: 0;
    display: inline;
    z-index: 1;
    will-change: opacity;
}

#wrap .text-animation .line p span {
    transition: all 0ms;
}

#wrap .text-animation .line p .overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 3;
    opacity: 0;
}

#wrap .text-animation .line p .overlay:after {
    position: absolute;
    left: 50%;
    bottom: 1px;
    width: 50%;
    height: 1px;
    content: "";
    background: #fff;
    transform: translate(200%, 0);
}

@keyframes overlay-text {
    0%,
  99.9% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes bg-text {
    0% {
        transform: translate(-100%, 0);
    }

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

#wrap .text-animation.anime .line {
    opacity: 1;
}

#wrap .text-animation.anime .line .bg {
    animation: bg-text 100ms linear;
    animation-fill-mode: forwards;
    transform: translate(-100%, 0);
}

#wrap .text-animation.anime .line p {
    opacity: 1;
}

#wrap .text-animation.anime .line p span {
    opacity: 1;
}

#wrap .text-animation.anime .line p .overlay {
    opacity: 1;
    animation: overlay-text 100ms linear;
    animation-fill-mode: forwards;
}

#world #chara .switching-img2 > * {
    opacity: 1;
    transition: opacity 1800ms;
}

#world #chara .switching-img2 > *.hide {
    opacity: 0;
}