@keyframes loop-text-animation {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: -2117px 50%;
    }
}

@keyframes popup-overlay {
    0%,
  60% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes loading-circle {
    0% {
        opacity: 1;
        transform: scale(0, 0);
    }

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

html {
    overflow: auto !important;
}

body #wrapper_bg_video {
    z-index: -1 !important;
}

body .mbYTP_wrapper iframe {
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -56%) !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
}

body .mfp-overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    z-index: 1045;
    top: 0;
    left: 0;
    background: linear-gradient(to bottom, #02113d 0%, #1c2d5c 100%);
}

body .mfp-overlay::before {
    content: '';
    display: block;
    top: 0;
    bottom: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    background-image: linear-gradient(transparent 95%, rgba(255, 255, 255, 0.03)), linear-gradient(90deg, transparent 95%, rgba(255, 255, 255, 0.03));
    background-size: 64px 64px;
    background-repeat: repeat;
}

@media screen and (min-width: 769px) {
    body .mfp-overlay {
        width: 1060px;
        height: 777px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

body .mfp-overlay.show {
    animation: popup-overlay 600ms;
}

body .mfp-bg {
    background: linear-gradient(to bottom, #02113d 0%, #1c2d5c 100%) !important;
}

@media screen and (min-width: 769px) {
    body .mfp-bg {
        background: rgba(0, 0, 0, 0.7) !important;
    }
}

body.fixed {
    position: fixed;
    width: 100%;
    height: 100vh;
}

body a[href^='#'] * {
    pointer-events: none;
}

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

body #loading .loading-circle {
    animation: loading-circle 1600ms linear infinite;
    animation-fill-mode: forwards;
}

body #loading .loading-circle:nth-child(0) {
    animation-delay: -800ms;
}

body #loading .loading-circle:nth-child(1) {
    animation-delay: -600ms;
}

body #loading .loading-circle:nth-child(2) {
    animation-delay: -400ms;
}

body #loading .loading-circle:nth-child(3) {
    animation-delay: -200ms;
}

body #loading .loading-circle:nth-child(4) {
    animation-delay: 0ms;
}

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

body::before {
    background-size: cover;
}

@media screen and (min-width: 769px) {
    body .news_topics dl,
  body .news_topics .date,
  body .news_topics .date::after,
  body .news_topics dd::after {
        transition: all 300ms;
    }

    body #video ul li {
        transition: all 300ms;
    }

    body #parts ul li::after {
        transition: all 300ms;
    }

    body #parts ul li:hover::after {
        background: #4a7ed5;
    }
}

body header {
    opacity: 0;
    transition: opacity 400ms;
    pointer-events: none;
}

body header::before, body header::after {
    opacity: 0;
    transition: opacity 400ms;
}

@media screen and (min-width: 769px) {
    body header {
        opacity: 1;
        transform: translate(0, -120%);
        transition: transform 300ms;
    }

    body header.show {
        transform: translate(0, 0);
        pointer-events: auto;
    }
}

body header .grovalNav ul li {
    opacity: 0;
    transform: translate3d(-20px, 0, 0);
}

@media screen and (min-width: 769px) {
    body header .grovalNav ul li {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

body header .grovalNav ul li a span {
    pointer-events: none;
}

body header .grovalNav ul li.current a {
    color: #0044b6 !important;
}

body.open header {
    pointer-events: auto;
    opacity: 1;
}

body.open header::before, body.open header::after {
    opacity: 1;
}

body.open header .grovalNav ul li {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition: all 300ms;
}

body.open header .grovalNav ul li:nth-child(0) {
    transition-delay: 250ms;
}

body.open header .grovalNav ul li:nth-child(1) {
    transition-delay: 340ms;
}

body.open header .grovalNav ul li:nth-child(2) {
    transition-delay: 430ms;
}

body.open header .grovalNav ul li:nth-child(3) {
    transition-delay: 520ms;
}

body.open header .grovalNav ul li:nth-child(4) {
    transition-delay: 610ms;
}

body.open header .grovalNav ul li:nth-child(5) {
    transition-delay: 700ms;
}

body.open header .grovalNav ul li:nth-child(6) {
    transition-delay: 790ms;
}

body.open header .grovalNav ul li:nth-child(7) {
    transition-delay: 880ms;
}

body.open header .grovalNav ul li:nth-child(8) {
    transition-delay: 970ms;
}

body.open header .grovalNav ul li:nth-child(9) {
    transition-delay: 1060ms;
}

body.open header .grovalNav ul li:nth-child(10) {
    transition-delay: 1150ms;
}

body.isPc .mainContent {
    overflow-x: hidden;
}

body.isPc .mainContent #top #main_video_player {
    position: absolute;
    width: 100%;
}

body.isSp .mainContent, body.isTablet .mainContent {
    overflow: hidden;
}

body #toggle {
    transition: transform 200ms;
}

body #toggle a {
    pointer-events: none;
}

body #toggle.hide {
    transform: translate3d(0, -101%, 0);
}

body .mainContent #top {
    position: relative;
}

@media screen and (min-width: 769px) {
    body .mainContent #top {
        background-image: none;
    }

    body .mainContent #top #main_video_player {
        height: 84%;
        top: 0;
    }
}

body .mainContent .bg_chara .bg_game_system,
body .mainContent .bg_chara .bg_game_system_fixed,
body .mainContent .bg_chara .bg_game_system_foot {
    position: absolute;
    width: 100%;
    height: 100vh;
    background: url(../images/bg_system.jpg) no-repeat left top;
    background-size: cover;
    left: 0;
    top: 130px;
    pointer-events: none;
}

body .mainContent .bg_chara .bg_game_system {
    z-index: 2;
}

@media screen and (min-width: 769px) {
    body .mainContent .bg_chara .bg_game_system {
        top: 141px;
    }
}

body .mainContent .bg_chara .bg_game_system_fixed {
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 3;
}

body .mainContent .bg_chara .bg_game_system_fixed.show {
    opacity: 1;
}

@media screen and (min-width: 769px) {
    body .mainContent .bg_chara .bg_game_system_fixed.show {
        top: 95px;
    }
}

body .mainContent .bg_chara .bg_game_system_foot {
    top: auto;
    bottom: 0;
    z-index: 2;
    opacity: 0;
}

body .mainContent .bg_chara .bg_game_system_foot.show {
    opacity: 1;
}

@media screen and (min-width: 769px) {
    body .mainContent .bg_chara .bg_game_system_foot.show {
        bottom: -95px;
    }
}

body .mainContent .chara {
    position: fixed;
    opacity: 0;
    transform: translate3d(100px, 0, 0px);
    transition: all 300ms;
    pointer-events: none;
}

@media screen and (min-width: 769px) {
    body .mainContent .chara {
        bottom: 0;
        background: url(../images/chara.png) no-repeat right 115px;
    }

    body .mainContent .chara.fixed_bottom {
        background-position: right bottom;
    }
}

body .mainContent .chara.show {
    opacity: 1;
    transform: translate3d(0, 0, 0px);
    transition-duration: 400ms;
}

body .mainContent section h2 .text {
    transform: translate3d(-101%, 0, 0) translate3d(-50px, 0, 0);
    background: none;
    -webkit-background-clip: none;
    -webkit-text-fill-color: none;
    filter: none;
}

body .mainContent section h2 .text em {
    background: -webkit-linear-gradient(0deg, #ffffff, #cfd4d0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.3));
    transform: translate3d(0, 0, 0);
}

body .mainContent section h2 .bg {
    transform: skewX(-30deg) translate3d(-101%, 0, 0) translate3d(-50px, 0, 0);
}

body .mainContent section.anime .bg {
    transform: skewX(-30deg) translate3d(0, 0, 0);
}

body .mainContent section.anime .text {
    transform: translate3d(0, 0, 2px);
}

body .mainContent section.anime strong .text {
    transition: all 300ms;
    transition-delay: 400ms;
}

body .mainContent section.anime strong .bg {
    transition: all 400ms;
}

body .mainContent section.anime p .text {
    transition: all 300ms;
    transition-delay: 520ms;
}

body .mainContent section.anime p .bg {
    transition: all 400ms;
    transition-delay: 120ms;
}

body .mainContent section#about h3::before {
    transform: skewX(-25deg) translate(70px, 0) !important;
    opacity: 0;
}

body .mainContent section#about h3::after {
    transform: skewX(-25deg) translate(-70px, 0) !important;
    opacity: 0;
}

body .mainContent section#about h3 span {
    transform: scale(1.7);
    display: inline-block;
    transition-timing-function: ease-in-out;
    opacity: 0;
    transform-origin: 50% 50%;
}

@media screen and (min-width: 769px) {
    body .mainContent section#about h3::before {
        transform: skewX(-35deg) translate(100px, 0) !important;
    }

    body .mainContent section#about h3::after {
        transform: skewX(-35deg) translate(-100px, 0) !important;
    }
}

body .mainContent section#about .word_scroll .scroll {
    color: transparent;
    background: url(../images/bg_catch_text.png) repeat-x left center;
    transform: translate3d(0, 0, 0);
    animation: loop-text-animation 11000ms linear infinite;
}

body .mainContent section#game_system {
    position: relative;
    z-index: 4;
    margin: 0;
    padding: 0;
}

@media screen and (min-width: 769px) {
    body .mainContent section#game_system {
        overflow: hidden;
    }
}

body .mainContent section#game_system .gs-container {
    transform: translate3d(0, 0, 9999px);
}

@media screen and (max-width: 768px) {
    body .mainContent section#game_system .gs-container {
        transform-style: preserve-3d;
    }
}

body .mainContent section#game_system .gs-container:last-child {
    margin-bottom: 0;
}

body .mainContent section#game_system h3 span, body .mainContent section#game_system h3::before, body .mainContent section#game_system h3::after {
    opacity: 0;
    transform: translate3d(-40px, 0, 0);
}

body .mainContent section#game_system h3 span {
    transform: perspective(500px) rotateY(35deg) rotate(-2deg) translate3d(-30px, 0, 0);
}

body .mainContent section#game_system h3::before {
    transform: translate3d(-60px, 0, 0);
}

body .mainContent section#game_system h3.anime span, body .mainContent section#game_system h3.anime::before, body .mainContent section#game_system h3.anime::after {
    opacity: 1;
    transform: translate3d(0px, 0, 0);
    transition: all 140ms;
}

body .mainContent section#game_system h3.anime::before {
    transition: all 300ms;
    transition-timing-function: cubic-bezier(0.76, 0.105, 0.71, 1.56);
}

body .mainContent section#game_system h3.anime::after {
    transition-delay: 350ms;
    transition-timing-function: cubic-bezier(0.61, 0.43, 0.375, 1.345);
}

body .mainContent section#game_system h3.anime span {
    transform: perspective(500px) rotateY(35deg) rotate(-2deg) translate3d(0px, 0, 0);
    transition-delay: 350ms;
    transition-timing-function: ease-in;
}

body .mainContent section#parts {
    margin-top: -130px;
}

@media screen and (min-width: 769px) {
    body .mainContent section#parts {
        margin-top: -250px;
    }
}

body .mainContent section#custom {
    pointer-events: none;
}

body .mainContent section#custom a {
    pointer-events: auto;
}

body .mainContent section.anime#about h3::before, body .mainContent section.anime#about h3::after {
    transform: skewX(-25deg) translate(0px, 0) !important;
    opacity: 1;
    transition: all 600ms;
    transition-timing-function: cubic-bezier(0.765, 0.125, 0.025, 0.97);
}

body .mainContent section.anime#about h3 span {
    transform: scale(1);
    opacity: 1;
    transition: all 330ms;
    transition-delay: 350ms;
}

@media screen and (min-width: 769px) {
    body .mainContent section.anime#about h3::before {
        transform: skewX(-35deg) translate(0px, 0) !important;
    }

    body .mainContent section.anime#about h3::after {
        transform: skewX(-35deg) translate(0px, 0) !important;
    }
}