body {
    overflow-x: hidden;
    background: #000;
}

body #loading {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 9999;
    background: #000;
    overflow: hidden;
}

@keyframes rumble {
    0% {
        transform: translate(0, 0);
    }

    12.5% {
        transform: translate(1.5px, -1.5px);
    }

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

    37.5% {
        transform: translate(-1.5px, 0);
    }

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

    62.5% {
        transform: translate(1.5px, 0);
    }

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

    87.5% {
        transform: translate(-1.5px, -1.5px);
    }

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

body #loading .logo {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 5;
    animation: rumble 160ms infinite;
}

body #loading .logo .logo-img {
    position: absolute;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-repeat: no-repeat !important;
    background-position: center !important;
    width: 70%;
    max-width: 819px;
    background-size: 100% auto !important;
}

body #loading .bg-container {
    position: absolute;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-repeat: no-repeat !important;
    background-position: center !important;
    width: 100%;
}

body #loading .bg-container .bg {
    position: absolute;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-repeat: no-repeat !important;
    background-position: center !important;
    width: 100%;
    max-width: 796px;
    background-size: cover !important;
}

body #loading .bg-container .bg.bg01 {
    z-index: 4;
}

body #loading .bg-container .bg.bg02 {
    z-index: 3;
}

body #loading .bg-container .bg.bg03 {
    z-index: 2;
}

body #loading .bg-container .bg.bg04 {
    z-index: 1;
}

body #loading.anime .logo {
    opacity: 0;
    transition: opacity 200ms;
    transition-delay: 1000ms;
}

body #loading.anime .bg-container {
    opacity: 0;
    transition: opacity 600ms;
    transition-delay: 1700ms;
}

body #loading.anime .bg-container .bg.bg01 {
    opacity: 0;
    transition: 400ms;
    transition-delay: 1000ms;
}

body #loading.anime .bg-container .bg.bg02 {
    opacity: 0;
    transition: 400ms;
    transition-delay: 1500ms;
}

body #loading.anime .bg-container .bg.bg03, body #loading.anime .bg-container .bg.bg04 {
    transition: 260ms;
    transition-delay: 1700ms;
    transform: translate(-50%, -50%) scale(3);
    transform-origin: 50% 73%;
}

body #loading.anime .bg-container .bg.bg03 {
    opacity: 0;
}

body #loading.hide {
    opacity: 0;
    pointer-events: none;
    transition: all 800ms;
}

body h1.logo {
    opacity: 0;
}

@keyframes top-bg-flash {
    0% {
        opacity: 0;
    }

    10%,
  13% {
        opacity: 1;
    }

    23%,
  27% {
        opacity: 0.2;
    }

    37%,
  42% {
        opacity: 0.8;
    }

    52% {
        opacity: 0;
    }

    62% {
        opacity: 0.7;
    }

    65%,
  69% {
        opacity: 0;
    }

    70.2% {
        opacity: 1;
    }

    70.4% {
        opacity: 0;
    }

    70.6% {
        opacity: 1;
    }

    70.8%,
  75.8% {
        opacity: 0;
    }

    76.3% {
        opacity: 1;
    }

    76.5% {
        opacity: 0;
    }

    76.7% {
        opacity: 1;
    }

    80%,
  85% {
        opacity: 0;
    }

    90%,
  93% {
        opacity: 0.7;
    }

    99%,
  100% {
        opacity: 0;
    }
}

@keyframes zombieSprite {
    0% {
        transform: translate(0%, 0%);
    }

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

@keyframes zombieSprite-sp {
    0% {
        transform: translate(0%, 0%);
    }

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

body .mv {
    max-width: 1700px;
    margin: 0 auto;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

body .mv .catch {
    opacity: 0;
}

body .mv .mv-inner {
    transform: translate3d(0, 0, 0) scale(2, 2);
    transform-origin: 50% 15%;
}

body .mv .mv-inner .top-bg-container {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

body .mv .mv-inner .top-bg-container .top-bg02 {
    display: block;
    opacity: 0;
}

body .mv .mv-inner .zombie-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9;
    transform: translate3d(0, 0, 0) scale(2, 2);
    transform-origin: 50% 85%;
}

body .mv .mv-inner .chara04 {
    transform: translate3d(0, 0, 0) scale(1.4, 1.4);
    transform-origin: 50% 80%;
}

body .mv .mv-inner .chara01,
      body .mv .mv-inner .chara02,
      body .mv .mv-inner .chara03 {
    transform: translate3d(0, 0, 0) scale(1.2, 1.2);
    transform-origin: 50% 78%;
}

body .mv .mv-inner .smoke01,
      body .mv .mv-inner .smoke02 {
    width: 100%;
    bottom: 0;
    top: auto;
    background-repeat: repeat-x;
    background-position: 0px center;
}

body .mv .mv-inner .smoke02 {
    z-index: 99;
    background-position: -50px center;
}

body .mv .mv-inner .zombie-container .zombie-inner {
    transform: translate(0%, 0px);
}

body .mv .mv-inner .zombie-container .zombie-inner.anime01 {
    animation: zombieSprite 200ms;
    animation-timing-function: steps(7);
}

body .mv .mv-inner .zombie-container .zombie-inner.anime02 {
    animation: zombieSprite 200ms;
    animation-timing-function: steps(7);
    animation-iteration-count: 2;
}

@media screen and (max-width: 750px) {
    body .mv .mv-inner .zombie-container .zombie-inner.anime01 {
        animation: zombieSprite-sp 200ms;
        animation-delay: 0ms;
        animation-timing-function: steps(7);
    }

    body .mv .mv-inner .zombie-container .zombie-inner.anime02 {
        animation: zombieSprite-sp 200ms;
        animation-delay: 0ms;
        animation-timing-function: steps(7);
        animation-iteration-count: 2;
    }
}

body.anime .logo,
  body.anime .catch {
    opacity: 1;
    transition: opacity 1200ms;
    transition-delay: 3300ms;
}

body.anime .mv .mv-inner {
    transform: translate3d(0, 0, 0) scale(1, 1);
    transition: all 2600ms;
    transition-timing-function: cubic-bezier(1, 0.005, 0.1, 1);
    transition-delay: 300ms;
}

body.anime .mv .mv-inner .chara01,
    body.anime .mv .mv-inner .chara02,
    body.anime .mv .mv-inner .chara03,
    body.anime .mv .mv-inner .chara04,
    body.anime .mv .mv-inner .zombie-container {
    transform: translate3d(0, 0, 0) scale(1, 1);
    transition: all 2600ms;
    transition-timing-function: cubic-bezier(1, 0.005, 0.1, 1);
    transition-delay: 300ms;
}

body.end .mv-inner,
  body.end .chara01,
  body.end .chara02,
  body.end .chara03,
  body.end .chara04,
  body.end .zombie-container {
    transition: none !important;
    transition-duration: 0ms !important;
}

body.end .mv .mv-inner .top-bg-container .top-bg02 {
    animation: top-bg-flash 25000ms ease infinite;
}