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

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

.t-show {
  
  
  
}

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

.t-show #t-view-box.t-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);
}

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

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

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

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

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

.t-show .t-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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@media screen and (max-width: 768px) {
  :root {
    --t-moveX: 2px;
  }
}