/*! Writen  by SCSS */
.mainvisual {
  overflow: hidden;
  position: relative;
  background: #000; }
  .mainvisual:after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    z-index: 100;
    pointer-events: none;
    background: #000;
    transition: 0.5s opacity linear 0s; }
  .mainvisual .mainvisual_in {
    overflow: hidden;
    position: relative;
    padding-bottom: 58.625%; }
    @media screen and (max-width: 768px) {
      .mainvisual .mainvisual_in {
        padding-bottom: 134.765625%; } }
    .mainvisual .mainvisual_in .main_image {
      position: absolute;
      inset: 0;
      height: 115%; }
      .mainvisual .mainvisual_in .main_image img {
        width: 100%;
        opacity: 0;
        transition: 1.5s opacity ease-in-out 0s,7s transform ease-in-out 0s; }
      .mainvisual .mainvisual_in .main_image.mv01 {
        top: auto; }
    .mainvisual .mainvisual_in .img-caps {
      opacity: 0;
      transition: 1.5s opacity ease-in-out 0s;
      bottom: clamp(16.8rem, 9.244rem + 9.826vw, 23rem); }
      @media only screen and (max-width: 768px) {
        .mainvisual .mainvisual_in .img-caps {
          bottom: 4px; } }
    .mainvisual .mainvisual_in .mv_title,
    .mainvisual .mainvisual_in .mv_title02 {
      position: absolute;
      inset: 0;
      right: auto;
      left: 7.29%;
      margin: auto;
      height: max-content;
      font-size: clamp(3.8rem, -2.537rem + 8.241vw, 9rem);
      letter-spacing: 0.05em;
      line-height: 1.7;
      color: #fff;
      text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3), 0px 0px 10px rgba(0, 0, 0, 0.3), 0px 0px 10px rgba(0, 0, 0, 0.3), 0px 0px 10px rgba(0, 0, 0, 0.3), 0px 0px 10px rgba(0, 0, 0, 0.3), 0px 0px 10px rgba(0, 0, 0, 0.3), 0px 0px 10px rgba(0, 0, 0, 0.3), 0px 0px 10px rgba(0, 0, 0, 0.3), 0px 0px 10px rgba(0, 0, 0, 0.3); }
      @media only screen and (max-width: 768px) {
        .mainvisual .mainvisual_in .mv_title,
        .mainvisual .mainvisual_in .mv_title02 {
          right: 0;
          left: 0;
          bottom: auto;
          top: 45%;
          font-size: 13vw;
          line-height: 1.4;
          text-align: center; } }
      .mainvisual .mainvisual_in .mv_title span,
      .mainvisual .mainvisual_in .mv_title02 span {
        display: inline-block;
        transition: 3s all ease-in-out 0s;
        opacity: 0;
        position: relative;
        filter: blur(10px); }
        .mainvisual .mainvisual_in .mv_title span .anime_txt,
        .mainvisual .mainvisual_in .mv_title02 span .anime_txt {
          position: absolute;
          left: 0;
          top: 0;
          font-style: normal;
          opacity: 0; }
  .mainvisual .main_ui {
    position: absolute;
    top: 120px;
    right: 10px;
    overflow: hidden;
    z-index: 3; }
    @media only screen and (max-width: 1050px) {
      .mainvisual .main_ui {
        top: 90px; } }
    .mainvisual .main_ui .skip_replay {
      float: left;
      width: 80px;
      text-align: center;
      font-size: 14px;
      color: #FFF;
      padding: 5px 0 7px;
      line-height: 1;
      background: rgba(0, 0, 0, 0.7);
      transition: all 0.5s ease-in-out 0s;
      cursor: pointer; }
      @media only screen and (max-width: 768px) {
        .mainvisual .main_ui .skip_replay {
          font-size: 12px; } }
      @media only screen and (max-width: 480px) {
        .mainvisual .main_ui .skip_replay {
          padding: 5px 0; } }

.mainvisual:not(.main_end) .main_ui .skip_replay .replay {
  display: none; }

.mainvisual.main_end .main_ui .skip_replay .skip {
  display: none; }

.mainvisual.moving *,
.mainvisual.moving *:before,
.mainvisual.moving *:after {
  transition: 0s all ease-in-out 0.5s !important;
  animation: none; }

.mainvisual.moving:after {
  opacity: 1 !important;
  transition: 0.5s all ease-in-out 0s; }

#mainvisual.s1 .mainvisual_in .main_image.mv01 img {
  opacity: 1;
  transform: translateY(13%); }
#mainvisual.s1 .mainvisual_in .img-caps.first {
  opacity: 1; }
#mainvisual.s2 .mainvisual_in .mv_title span {
  opacity: 1;
  filter: blur(0); }
#mainvisual.s3 .mainvisual_in .mv_title .anime_txt {
  animation: 1.5s big_fadeout ease-in-out alternate; }

@keyframes big_fadeout {
  0% {
    transform: scale(1);
    opacity: 0; }
  30% {
    opacity: 1; }
  100% {
    transform: scale(1.3);
    opacity: 0; } }

/*# sourceMappingURL=mainvisual.css.map */