@keyframes main-visual-scale-anime {
  0% {
    transform: scale(1); }

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

@keyframes main-logo-anime {
  0% {
    opacity: 0;
    transform: translate(-50%, -170%) scale(1.08); }

  100% {
    opacity: 1;
    transform: translate(-50%, -170%) scale(1); } }

@keyframes main-enemy-anime {
  0% {
    transform: scale(1.9) translate3d(0, 0, 0); }

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

@keyframes main-chara-anime {
  0% {
    transform: scale(4.2) translate3d(0, 0, 0); }

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

@keyframes btn-entry-animation {
  0% {
    opacity: 0; }

  100% {
    opacity: 1; } }

#sound_info {
  display: block;
  z-index: 9998; }
  #sound_info.hide {
    transition: all 800ms;
    pointer-events: none;
    opacity: 0; }
  #sound_info.none {
    display: none; }

#audio-loading {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 9997;
  background: #000; }
  #audio-loading.hide {
    transition: all 800ms;
    pointer-events: none;
    opacity: 0; }
  #audio-loading.none {
    display: none; }

#wrap {
  position: relative;
  width: 100%; }
  #wrap .js-opening-fade {
    opacity: 0; }
    #wrap .js-opening-fade.anime {
      opacity: 1;
      transition: opacity 1000ms;
      transition-delay: 4900ms; }
  #wrap #main {
    position: relative;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
    transform: translate3d(0, 0, 0); }
    #wrap #main .main-container {
      position: absolute;
      width: 100%;
      height: 100%;
      min-height: 720px;
      top: 0;
      left: 0; }
      #wrap #main .main-container .bg {
        position: absolute;
        background-size: cover !important;
        background-repeat: no-repeat !important;
        background-position: center top !important;
        width: 100%;
        height: 100%;
        min-height: 720px;
        top: 0;
        left: 0; }
      #wrap #main .main-container .bg-enemy-container {
        position: absolute;
        width: 100%;
        height: 100%;
        min-height: 720px;
        top: 0;
        left: 0;
        transform: scale(1, 1); }
        #wrap #main .main-container .bg-enemy-container .bg-enemy {
          background-image: url("../images/top/bg_enemy_sp.jpg"); }
      #wrap #main .main-container .bg-chara-container {
        position: absolute;
        width: 100%;
        height: 100%;
        min-height: 720px;
        top: 0;
        left: 0;
        height: calc(100% + 22px);
        top: -20px;
        min-height: 740px; }
        #wrap #main .main-container .bg-chara-container .bg-chara {
          background-image: url("../images/top/chara_sp.png");
          height: calc(100%);
          min-height: 740px; }
          #wrap #main .main-container .bg-chara-container .bg-chara .bg-chara-effect {
            height: calc(100%);
            min-height: 740px; }
    #wrap #main .main-container .bg-enemy-container .bg-enemy {
      transform: scale(1.9) translate3d(0, 0, 0);
      transform-origin: 50% 50%; }
    #wrap #main .main-container .bg-chara-container .bg-chara {
      transform: scale(4.2) translate3d(0, 0, 0);
      transform-origin: 50% 50%; }
    @media print, screen and (min-width: 769px) {
      #wrap #main .main-container .bg-enemy-container .bg-enemy {
        transform-origin: 50% 25%; }
      #wrap #main .main-container .bg-chara-container .bg-chara {
        transform-origin: 50% 33%; } }
    #wrap #main .main-container.anime .bg-enemy-container .bg-enemy {
      animation: main-enemy-anime 1600ms;
      animation-delay: 800ms;
      animation-timing-function: cubic-bezier(1, 0.15, 0.36, 1);
      animation-fill-mode: forwards; }
    #wrap #main .main-container.anime .bg-chara-container .bg-chara {
      animation: main-chara-anime 1600ms;
      animation-delay: 800ms;
      animation-timing-function: cubic-bezier(1, 0.15, 0.36, 1);
      animation-fill-mode: forwards; }
    #wrap #main h1 {
      position: absolute;
      top: 54%;
      left: 50%;
      opacity: 0;
      transform-origin: 50% 50%;
      width: 460px; }
      #wrap #main h1.anime {
        animation: main-logo-anime 1500ms;
        animation-delay: 3500ms;
        animation-fill-mode: forwards; }
    #wrap #main h2 {
      position: absolute;
      top: 30px;
      left: 19px;
      width: 129px;
      height: 568px; }
      #wrap #main h2 .catch01,
      #wrap #main h2 .catch02 {
        position: absolute;
        opacity: 0; }
      #wrap #main h2 .catch01 {
        top: 0;
        right: -10px;
        transform: translate(0, -20px); }
      #wrap #main h2 .catch02 {
        bottom: -2px;
        left: 0;
        transform: translate(0, 20px); }
      #wrap #main h2.anime .catch01,
      #wrap #main h2.anime .catch02 {
        transition: all 1200ms;
        transform: translate(0, 0);
        transition-delay: 2700ms;
        opacity: 1; }
      #wrap #main h2.anime .catch02 {
        transition-delay: 2800ms; }
    #wrap #main .btn_scroll_position {
      cursor: pointer;
      position: absolute;
      left: 0;
      right: 0;
      bottom: 30px;
      margin: auto;
      height: 81px;
      width: 114px; }
    #wrap #main .btn_entry {
      position: absolute;
      bottom: 140px;
      left: 0;
      height: 100px;
      width: 700px;
      display: flex;
      justify-content: space-between;
      right: 0;
      margin: auto; }
      #wrap #main .btn_entry .d {
        opacity: 1 !important; }
      #wrap #main .btn_entry .btn_entry_anime {
        position: absolute;
        top: 0;
        left: 0;
        animation: btn-entry-animation 1200ms infinite;
        animation-direction: alternate-reverse; }
    #wrap #main .text_entry {
      position: absolute;
      bottom: 250px;
      left: 0;
      height: 84px;
      width: 393px;
      right: 0;
      margin: auto; }

@media print, screen and (max-width: 768px) {
  #wrap #main h1 {
    top: 720px; } }
@media print, screen and (min-width: 769px) {
  #wrap #main {
    min-height: 720px;
    height: 100vh; }
    #wrap #main .main-container .bg-enemy-container .bg-enemy {
      background-image: url("../images/top/bg_enemy.jpg"); }
    #wrap #main .main-container .bg-chara-container .bg-chara {
      background-image: url("../images/top/chara.png"); }
    #wrap #main h1 {
      top: 67%;
      width: 410px; }
    #wrap #main h2 {
      top: 77px;
      left: auto;
      right: 47px;
      width: 130px;
      height: 529px; }
      #wrap #main h2 .catch01 {
        width: 50px;
        height: auto;
        right: 0; }
      #wrap #main h2 .catch02 {
        width: 50px;
        height: auto;
        left: 32px;
        bottom: 76px; }
    #wrap #main .btn_entry {
      left: 50px;
      top: 140px;
      bottom: inherit;
      right: auto;
      display: block;
      height: auto;
      width: 210px; }
      #wrap #main .btn_entry li:last-child {
        position: absolute;
        top: 72px;
        left: 0; }
      #wrap #main .btn_entry a {
        transition: all .3s; }
        #wrap #main .btn_entry a:hover {
          opacity: .8; }
      #wrap #main .btn_entry .on_animate:hover {
        animation: none !important;
        opacity: 0; }
        #wrap #main .btn_entry .on_animate:hover + .on {
          opacity: 1 !important; }
      #wrap #main .btn_entry .on {
        transition: all 400ms;
        z-index: 3;
        pointer-events: none; }
    #wrap #main .text_entry {
      bottom: inherit;
      top: 88px;
      left: 50px;
      right: auto;
      height: 44px;
      width: 217px; }
    #wrap #main .btn_movie,
    #wrap #main .btn_movie2 {
      position: absolute;
      bottom: 0;
      left: 50px;
      height: 142px;
      width: 217px; }
    #wrap #main .btn_movie2 {
      bottom: 136px; }
    #wrap #main .btn_bnr {
      position: absolute;
      bottom: 20px;
      right: 50px;
      width: 320px; }
    #wrap #main .btn_bnr_190425 {
      position: absolute;
      bottom: 102px;
      right: 50px;
      width: 320px; }
  #wrap #main .btn_bnr_190802 {
    position: absolute;
    bottom: 184px;
    right: 50px;
    width: 320px;
  }
    #wrap #main .btn_scroll_position {
      bottom: 13px;
      height: 70px;
      width: 96px; } }
@media print, screen and (min-width: 1700px) {
  #wrap #main h1 {
    top: 37vw;
    width: 24vw; }
    #wrap #main h1 img {
      max-width: inherit;
      width: 100%; } }
@media print, screen and (max-height: 720px) and (max-width: 1699px) and (min-width: 769px) {
  #wrap #main h1 {
    top: 560px; } }