/*------------------------------------
メインビジュアル
----------------------------------------------------------*/
.main_v_box {
  width: 100%;
  position: relative;
  overflow: hidden;
  background: #ffffff;
  background-image: repeating-linear-gradient(to bottom right,
      #fffaeb,
      #ffffff,
      #ffffff,
      #ffffff,
      #ffffff,
      #ffffff,
      #fff9e8 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;
  padding: 0 2%;
}

.main_v_logo {
  width: 95%;
  opacity: 0;
  -webkit-animation: slideLogoSp 1.7s forwards;
  animation: slideLogoSp 1.7s forwards;
  animation-delay: 0.8s;
  z-index: 30;
  margin: 15px 0;
}

.main_v_text {
  margin: 0 0 20px;
}

@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: 90%;
  opacity: 0;
  -webkit-animation: slidePosterSp 1.7s forwards;
  animation: slidePosterSp 1.7s forwards;
  z-index: 25;
  margin: 0 0 25px;
}

@keyframes slidePosterSp {
  0% {
    opacity: 0;
    -webkit-transform: translate(200px, 0);
    transform: translate(200px, 0);
  }

  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: 450px;
  }

  .main_v_box_inner2 {
    width: 160vw;
    max-width: 160vw;
    bottom: -30%;
    transform: translateX(-8%);
  }

  .main_v_text {
    transform: translateY(-10px);
    margin: 0;
  }

  .main_v_poster {
    -webkit-animation: slidePosterTb 1.7s forwards;
    animation: slidePosterTb 1.7s forwards;
    margin: 0;
    width: 74%;
  }

  .main_v_logo {
    -webkit-animation: slideLogoTb 1.7s forwards;
    animation: slideLogoTb 1.7s forwards;
    animation-delay: 0.8s;
    margin: 0;
    width: 90%;
  }

  @keyframes slideLogoTb {
    0% {
      opacity: 0;
      -webkit-transform: translate(-200px, 10px);
      transform: translate(-200px, 10px);
    }

    100% {
      opacity: 1;
      -webkit-transform: translate(0, 10px);
      transform: translate(0, 10px);
    }
  }

  @keyframes slidePosterTb {
    0% {
      opacity: 0;
      -webkit-transform: translate(200px, -30px);
      transform: translate(200px, -30px);
    }

    100% {
      opacity: 1;
      -webkit-transform: translate(0, -30px);
      transform: translate(0, -30px);
    }
  }
}

/* PC */
@media screen and (min-width: 1240px) {
  .main_v_box {
    height: calc(100vh - 126px);
    min-height: 600px;
    margin: 0 auto;
    width: 100%;
  }

  .main_v_box_inner {
    position: absolute;
    width: 95vh;
    height: auto;
    z-index: 4;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .main_v_text {
    padding: 0 5%;
    width: 90%;
    transform: translateY(-10px);
    margin: 0;
  }

  .main_v_poster {
    -webkit-animation: slidePosterPc 1.7s forwards;
    animation: slidePosterPc 1.7s forwards;
    margin: 0;
    width: 74%;
  }

  .main_v_logo {
    -webkit-animation: slideLogoPc 1.7s forwards;
    animation: slideLogoPc 1.7s forwards;
    animation-delay: 0.8s;
    margin: 0;
    width: 90%;
  }

  @keyframes slideLogoPc {
    0% {
      opacity: 0;
      -webkit-transform: translate(-200px, 30px);
      transform: translate(-200px, 30px);
    }

    100% {
      opacity: 1;
      -webkit-transform: translate(0, 30px);
      transform: translate(0, 30px);
    }
  }

  @keyframes slidePosterPc {
    0% {
      opacity: 0;
      -webkit-transform: translate(200px, -30px);
      transform: translate(200px, -30px);
    }

    100% {
      opacity: 1;
      -webkit-transform: translate(0, -30px);
      transform: translate(0, -30px);
    }
  }
}