/*------------------------------------
メインビジュアル
----------------------------------------------------------*/
.wrap_box {
  overflow: hidden;
}
.main_v_box {
  width: 100%;
  position: relative;
  overflow: hidden;
}
.main_v_box-back {/* グラデーション要素3秒後上へ移動 */
  width: 100vw;
  height: 100%;
  display: block;
  position: absolute;
  z-index: -2;
  top: 0;
  left: 0;
  -webkit-animation: main_backanime 5s forwards;
  animation: main_backanime 5s forwards;
  animation-delay: 3s;
}
@keyframes main_backanime {
  from {
    bottom: -100vh;
  }

  to {
    bottom: 0;
  }
}
.main_v_box-back::before {/* top白グラデーション8秒後削除 */
  content: "";
  width: 100vw;
  height: 100%;
  display: block;
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  background-image: linear-gradient(#ffffff, transparent);
  -webkit-animation: main_backanime2 3s forwards;
  animation: main_backanime2 3s forwards;
  animation-delay: 8s;
}
@keyframes main_backanime2 {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.main_v_box-back::after {/* ループグラデーション */
  content: "";
  width: 100vw;
  height: 100%;
  display: block;
  background: #ffffff;
  background-image: repeating-linear-gradient(to bottom,
      #dfebf9,
      #f6faff,
      #f6faff,
      #f6faff,
      #dfebf9,
      #dfebf9,
      #dfebf9 50%);
  background-size: 250% 250%;
  animation: colorRotation 120s linear 0s infinite;
}

@keyframes colorRotation {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 500% 500%;
  }
}



.main_v_box_inner {
  width: 96%;
  margin: 0 auto;
  text-align: center;
}

.main_v_symbolmark {
  max-width: 60px;
  display: block;
  margin: 0 auto 10px;
  opacity: 0;
  -webkit-animation: symbolmarkSp 3s forwards;
  animation: symbolmarkSp 3s forwards;
  animation-delay: 2.5s;
}
@keyframes symbolmarkSp {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
.main_v_logo-text {
  width: 100%;
  max-width: 300px;
  z-index: 30;
  margin: -70px auto 15px;
}
.main_v_logo {
  -webkit-animation: slideLogoSp 1.7s forwards;
  animation: slideLogoSp 1.7s forwards;
  animation-delay: 1.3s;
  opacity: 0;
}

@keyframes slideLogoSp {
  0% {
    opacity: 0;
    -webkit-transform: translate(200px, 0);
    transform: translate(200px, 10px);
  }

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

.main_v_poster {
  width: 70%;
  opacity: 0;
  -webkit-animation: slidePosterSp 1s forwards;
  animation: slidePosterSp 1.5s forwards;
  z-index: 25;
  margin: 0 0 25px;
  display: block;
  margin: auto;
}
.main_v_poster-box {
  flex-grow: 2;
  max-width: 431px;
  margin: auto;
}
@keyframes slidePosterSp {
  0% {
    opacity: 0;
    -webkit-transform: translate(200px, -100vh);
    transform: translate(200px, -100vh);
  }

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

/* タブレット */
@media screen and (min-width: 600px) and (max-width: 1239px) {
  .main_v_box_inner {
    width: 100%;
    margin: auto;
    max-width: 640px;
    padding: 10px 2% 20px;
    box-sizing: border-box;
  }

  .main_v_box_inner2 {
    width: 160vw;
    max-width: 160vw;
    bottom: -30%;
    transform: translateX(-8%);
  }

  .main_v_text {
    max-width: 100%;
    width: 66vh;
  }

  .main_v_poster {
    -webkit-animation: slidePosterTb 1.7s forwards;
    animation: slidePosterTb 1.7s forwards;
    width: 39vh;
    max-width: 380px;
  }
  .main_v_symbolmark {
    max-width: 100px;
    width: 10vh;
    display: block;
    margin: 0 auto 10px;
    opacity: 0;
    -webkit-animation: symbolmarkPc 3s forwards;
    animation: symbolmarkPc 3s forwards;
    animation-delay: 2s;
  }

  .main_v_logo-text {
    margin: 10px auto;
    width: 66vh;
    max-width: 100%;
  }
  .main_v_logo {
    -webkit-animation: slideLogoTb 1.7s forwards;
    animation: slideLogoTb 1.7s forwards;
    animation-delay: 1.5s;
    margin-bottom: 10px;
  }
  @keyframes slideLogoTb {
    0% {
      opacity: 0;
      -webkit-transform: translate(200px, 0);
      transform: translate(200px, 0);
    }

    100% {
      opacity: 1;
      -webkit-transform: translate(0, 0);
      transform: translate(0, 0);
    }
  }
  @keyframes symbolmarkPc {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }
  @keyframes slidePosterTb {
    0% {
      opacity: 0;
      -webkit-transform: translate(50vw, -100vh);
      transform: translate(50vw, -100vh);
    }

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

/* PC */
@media screen and (min-width: 1240px) {
  .main_v_box {
    max-height: 584px;
    padding: 20px 0;
  }

  .main_v_box_inner {
    width: 100%;
    min-width: 100vh;
    max-width: 1000px;
    height: auto;
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }

  .main_v_poster {
    -webkit-animation: slidePosterPc 1.5s forwards;
    animation: slidePosterPc 1.5s forwards;
    height: calc(100vh - 156px);
    width: auto;
    max-height: 584px;
    margin: 0 0 0 auto;
  }
  .main_v_poster-box {
    margin: 0;
  }

  .main_v_symbolmark {
    max-width: 156px;
    opacity: 0;
    -webkit-animation: symbolmarkPc 3.5s forwards;
    animation: symbolmarkPc 3.5s forwards;
    animation-delay: 2.3s;
    z-index: 30;
    margin: 0 auto 10px;
    width: 15vh;
    max-width: 170px;
  }

  .main_v_logo-text {
    margin-left: -17vh;
    width: 82vh;
    max-width: 715px;
  }
  .main_v_logo {
    -webkit-animation: slideLogoPc 1.5s forwards;
    animation: slideLogoPc 1.5s forwards;
    animation-delay: 1s;
    margin-bottom: 10px;
  }
  @keyframes slideLogoPc {
    0% {
      opacity: 0;
      -webkit-transform: translate(100vw, 0);
      transform: translate(100vw, 0);
    }

    100% {
      opacity: 1;
      -webkit-transform: translate(0, 0);
      transform: translate(0, 0);
    }
  }
  @keyframes symbolmarkPc {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }
  @keyframes slidePosterPc {
    0% {
      opacity: 0;
      -webkit-transform: translate(30vw, -100vh);
      transform: translate(30vw, -100vh);
    }

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

@media screen and (min-width: 1938px) {
  .main_v_symbolmark {
    right: 30%;
  }
}