@charset "UTF-8";
@-webkit-keyframes blink_animation {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes blink_animation {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

:root {
  --character-time: 1.1s;
  --character-easing: cubic-bezier(.6, .5, .4, 1.15);
  --character-delay: calc(var(--character-time) / 10);
  --second-row-delay: .11s;
  --third-row-delay: calc(var(--second-row-delay) * 2);
  --move-time: 2.8s;
  --move-delay: .95s;
  --moveX: 3px;
  --move-max: 300;
}

.show {
  /* ------------ 『and』のアニメーション ------------ */
  /* ------------ 1文字ごとのアニメーション ------------ */
  /* --------------------- hover ---------------------- */
}

.show svg.mv {
  display: block;
  width: 100%;
  height: 100%;
}

.show #view-box.sp {
  transform-box: fill-box;
  -webkit-transform-origin: 186.19px 186.19px;
      -ms-transform-origin: 186.19px 186.19px;
          transform-origin: 186.19px 186.19px;
  -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg);
}

.show .row {
  transform-box: fill-box;
  -webkit-transform: translateX(600px);
      -ms-transform: translateX(600px);
          transform: translateX(600px);
}

.show .first-row {
  -webkit-animation: row var(--character-time) ease-out forwards;
          animation: row var(--character-time) ease-out forwards;
}

.show .second-row {
  -webkit-animation: row var(--character-time) ease-out var(--second-row-delay) forwards;
          animation: row var(--character-time) ease-out var(--second-row-delay) forwards;
}

.show .third-row {
  -webkit-animation: row var(--character-time) ease-out var(--third-row-delay) forwards;
          animation: row var(--character-time) ease-out var(--third-row-delay) forwards;
}

.show .and {
  transform-box: fill-box;
  -webkit-transform-origin: 15% 70%;
      -ms-transform-origin: 15% 70%;
          transform-origin: 15% 70%;
  opacity: 0;
  -webkit-animation: and 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) calc(var(--move-time) + var(--move-delay)) forwards;
          animation: and 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) calc(var(--move-time) + var(--move-delay)) forwards;
}

.show .character {
  transform-box: fill-box;
  -webkit-transform-origin: left;
      -ms-transform-origin: left;
          transform-origin: left;
  -webkit-transform: rotateY(-180deg) translateX(260px) scale(0.5);
          transform: rotateY(-180deg) translateX(260px) scale(0.5);
  opacity: 0;
}

.show .first-row .character {
  -webkit-animation: character var(--character-time) var(--character-easing) calc(var(--character-delay) * var(--index)) forwards;
          animation: character var(--character-time) var(--character-easing) calc(var(--character-delay) * var(--index)) forwards;
}

.show .second-row .character {
  -webkit-animation: character var(--character-time) var(--character-easing) calc(var(--character-delay) * var(--index) + var(--second-row-delay)) forwards;
          animation: character var(--character-time) var(--character-easing) calc(var(--character-delay) * var(--index) + var(--second-row-delay)) forwards;
}

.show .third-row .character {
  -webkit-animation: character var(--character-time) var(--character-easing) calc(var(--character-delay) * var(--index) + var(--third-row-delay)) forwards;
          animation: character var(--character-time) var(--character-easing) calc(var(--character-delay) * var(--index) + var(--third-row-delay)) forwards;
}

.show .move-characters {
  transform-box: fill-box;
  -webkit-transform-origin: left;
      -ms-transform-origin: left;
          transform-origin: left;
}

.show .first-anim.move-characters {
  -webkit-animation: move-text var(--move-time) cubic-bezier(0.65, 0.05, 0.36, 1) calc(var(--move-delay) + .1s + .03s * var(--move-index));
          animation: move-text var(--move-time) cubic-bezier(0.65, 0.05, 0.36, 1) calc(var(--move-delay) + .1s + .03s * var(--move-index));
}

.show .mouseover.move-characters {
  -webkit-animation: move-text var(--move-time) cubic-bezier(0.65, 0.05, 0.36, 1) calc(.1s + .03s * var(--move-index));
          animation: move-text var(--move-time) cubic-bezier(0.65, 0.05, 0.36, 1) calc(.1s + .03s * var(--move-index));
}

.show .gradation {
  transform-box: fill-box;
  -webkit-transform-origin: center;
      -ms-transform-origin: center;
          transform-origin: center;
}

.show .circles > .first-anim.gradation {
  opacity: 0;
  -webkit-animation: gradation var(--move-time) cubic-bezier(0.65, 0.05, 0.36, 1) var(--move-delay), hide 0s steps(2) var(--move-delay) forwards;
          animation: gradation var(--move-time) cubic-bezier(0.65, 0.05, 0.36, 1) var(--move-delay), hide 0s steps(2) var(--move-delay) forwards;
}

.show .character > .first-anim.gradation {
  opacity: 1;
  -webkit-animation: gradation var(--move-time) cubic-bezier(0.65, 0.05, 0.36, 1) var(--move-delay);
          animation: gradation var(--move-time) cubic-bezier(0.65, 0.05, 0.36, 1) var(--move-delay);
}

.show .mouseover.gradation {
  -webkit-animation: gradation var(--move-time) cubic-bezier(0.65, 0.05, 0.36, 1);
          animation: gradation var(--move-time) cubic-bezier(0.65, 0.05, 0.36, 1);
}

@-webkit-keyframes character {
  20% {
    opacity: 0;
  }
  to {
    -webkit-transform: rotateY(0deg) translateX(0) scale(1);
            transform: rotateY(0deg) translateX(0) scale(1);
    opacity: 1;
  }
}

@keyframes character {
  20% {
    opacity: 0;
  }
  to {
    -webkit-transform: rotateY(0deg) translateX(0) scale(1);
            transform: rotateY(0deg) translateX(0) scale(1);
    opacity: 1;
  }
}

@-webkit-keyframes row {
  to {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

@keyframes row {
  to {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

@-webkit-keyframes and {
  0% {
    -webkit-transform: scale(2.5);
            transform: scale(2.5);
    opacity: 0;
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}

@keyframes and {
  0% {
    -webkit-transform: scale(2.5);
            transform: scale(2.5);
    opacity: 0;
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}

@-webkit-keyframes move-text {
  35% {
    -webkit-transform: translateX(calc(var(--moveX) * var(--move-max)));
            transform: translateX(calc(var(--moveX) * var(--move-max)));
  }
  40% {
    -webkit-transform: translateX(calc(var(--moveX) * var(--move-max)));
            transform: translateX(calc(var(--moveX) * var(--move-max)));
  }
  58% {
    -webkit-transform: translateX(calc(-.2px * var(--move-max)));
            transform: translateX(calc(-.2px * var(--move-max)));
  }
  64% {
    -webkit-transform: translateX(calc(0.1312px * var(--move-max)));
            transform: translateX(calc(0.1312px * var(--move-max)));
  }
  72% {
    -webkit-transform: translateX(calc(-0.0463px * var(--move-max)));
            transform: translateX(calc(-0.0463px * var(--move-max)));
  }
  79.5% {
    -webkit-transform: translateX(calc(0.0164px * var(--move-max)));
            transform: translateX(calc(0.0164px * var(--move-max)));
  }
  86.5% {
    -webkit-transform: translateX(calc(-0.0058px * var(--move-max)));
            transform: translateX(calc(-0.0058px * var(--move-max)));
  }
  94% {
    -webkit-transform: translateX(calc(0.002px * var(--move-max)));
            transform: translateX(calc(0.002px * var(--move-max)));
  }
}

@keyframes move-text {
  35% {
    -webkit-transform: translateX(calc(var(--moveX) * var(--move-max)));
            transform: translateX(calc(var(--moveX) * var(--move-max)));
  }
  40% {
    -webkit-transform: translateX(calc(var(--moveX) * var(--move-max)));
            transform: translateX(calc(var(--moveX) * var(--move-max)));
  }
  58% {
    -webkit-transform: translateX(calc(-.2px * var(--move-max)));
            transform: translateX(calc(-.2px * var(--move-max)));
  }
  64% {
    -webkit-transform: translateX(calc(0.1312px * var(--move-max)));
            transform: translateX(calc(0.1312px * var(--move-max)));
  }
  72% {
    -webkit-transform: translateX(calc(-0.0463px * var(--move-max)));
            transform: translateX(calc(-0.0463px * var(--move-max)));
  }
  79.5% {
    -webkit-transform: translateX(calc(0.0164px * var(--move-max)));
            transform: translateX(calc(0.0164px * var(--move-max)));
  }
  86.5% {
    -webkit-transform: translateX(calc(-0.0058px * var(--move-max)));
            transform: translateX(calc(-0.0058px * var(--move-max)));
  }
  94% {
    -webkit-transform: translateX(calc(0.002px * var(--move-max)));
            transform: translateX(calc(0.002px * var(--move-max)));
  }
}

@-webkit-keyframes hide {
  to {
    opacity: 1;
  }
}

@keyframes hide {
  to {
    opacity: 1;
  }
}

@-webkit-keyframes gradation {
  35% {
    -webkit-transform: translateX(calc(var(--moveX) * var(--index)));
            transform: translateX(calc(var(--moveX) * var(--index)));
  }
  40% {
    -webkit-transform: translateX(calc(var(--moveX) * var(--index)));
            transform: translateX(calc(var(--moveX) * var(--index)));
  }
  58% {
    -webkit-transform: translateX(calc(-.2px * var(--index)));
            transform: translateX(calc(-.2px * var(--index)));
  }
  64% {
    -webkit-transform: translateX(calc(0.1312px * var(--index)));
            transform: translateX(calc(0.1312px * var(--index)));
  }
  72% {
    -webkit-transform: translateX(calc(-0.0463px * var(--index)));
            transform: translateX(calc(-0.0463px * var(--index)));
  }
  79.5% {
    -webkit-transform: translateX(calc(0.0164px * var(--index)));
            transform: translateX(calc(0.0164px * var(--index)));
  }
  86.5% {
    -webkit-transform: translateX(calc(-0.0058px * var(--index)));
            transform: translateX(calc(-0.0058px * var(--index)));
  }
  94% {
    -webkit-transform: translateX(calc(0.002px * var(--index)));
            transform: translateX(calc(0.002px * var(--index)));
  }
}

@keyframes gradation {
  35% {
    -webkit-transform: translateX(calc(var(--moveX) * var(--index)));
            transform: translateX(calc(var(--moveX) * var(--index)));
  }
  40% {
    -webkit-transform: translateX(calc(var(--moveX) * var(--index)));
            transform: translateX(calc(var(--moveX) * var(--index)));
  }
  58% {
    -webkit-transform: translateX(calc(-.2px * var(--index)));
            transform: translateX(calc(-.2px * var(--index)));
  }
  64% {
    -webkit-transform: translateX(calc(0.1312px * var(--index)));
            transform: translateX(calc(0.1312px * var(--index)));
  }
  72% {
    -webkit-transform: translateX(calc(-0.0463px * var(--index)));
            transform: translateX(calc(-0.0463px * var(--index)));
  }
  79.5% {
    -webkit-transform: translateX(calc(0.0164px * var(--index)));
            transform: translateX(calc(0.0164px * var(--index)));
  }
  86.5% {
    -webkit-transform: translateX(calc(-0.0058px * var(--index)));
            transform: translateX(calc(-0.0058px * var(--index)));
  }
  94% {
    -webkit-transform: translateX(calc(0.002px * var(--index)));
            transform: translateX(calc(0.002px * var(--index)));
  }
}

@media screen and (max-width: 768px) {
  :root {
    --moveX: 2px;
  }
}
/*# sourceMappingURL=mv.css.map */