@keyframes scaleY {
    100% {
      transform: scaleY(1);
    }
  }
  @keyframes notScaleY {
    100% {
      transform: scaleY(0);
    }
  }
  .fade-in-word {
    font-size: 10px;
  }
  .fade-in-word__vertical {
    font-size: 4em;
    line-height: 1.1em;
	  opacity: 1!important;
  }
  .fade-in-word__vertical span {
    position: relative;
    display: inline-block;
    transform: scaleY(0);
  }
  .fade-in-word__vertical span:before {
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    background-color: #262626;
    position: absolute;
    top: 0;
    left: 0;
  }
  .fade-in-word__vertical span:nth-of-type(1) {
    transform-origin: top;
  }
  .fade-in-word__vertical span:nth-of-type(1):before {
    transform-origin: top;
  }
  .fade-in-word__vertical span:nth-of-type(1) {
    animation: scaleY 0.36s cubic-bezier(0.84, 0.01, 0.78, 0.13) 0.1s forwards;
  }
  .fade-in-word__vertical span:nth-of-type(1):before {
    animation: notScaleY 0.3s cubic-bezier(0.11, 1.05, 0.32, 1.03) 0.45s forwards;
  }
  .fade-in-word__vertical span:nth-of-type(2) {
    transform-origin: bottom;
  }
  .fade-in-word__vertical span:nth-of-type(2):before {
    transform-origin: bottom;
  }
  .fade-in-word__vertical span:nth-of-type(2) {
    animation: scaleY 0.36s cubic-bezier(0.84, 0.01, 0.78, 0.13) 0.2s forwards;
  }
  .fade-in-word__vertical span:nth-of-type(2):before {
    animation: notScaleY 0.3s cubic-bezier(0.11, 1.05, 0.32, 1.03) 0.55s forwards;
  }
  .fade-in-word__vertical span:nth-of-type(3) {
    transform-origin: top;
  }
  .fade-in-word__vertical span:nth-of-type(3):before {
    transform-origin: top;
  }
  .fade-in-word__vertical span:nth-of-type(3) {
    animation: scaleY 0.36s cubic-bezier(0.84, 0.01, 0.78, 0.13) 0.3s forwards;
  }
  .fade-in-word__vertical span:nth-of-type(3):before {
    animation: notScaleY 0.3s cubic-bezier(0.11, 1.05, 0.32, 1.03) 0.65s forwards;
  }
  .fade-in-word__vertical span:nth-of-type(4) {
    transform-origin: bottom;
  }
  .fade-in-word__vertical span:nth-of-type(4):before {
    transform-origin: bottom;
  }
  .fade-in-word__vertical span:nth-of-type(4) {
    animation: scaleY 0.36s cubic-bezier(0.84, 0.01, 0.78, 0.13) 0.4s forwards;
  }
  .fade-in-word__vertical span:nth-of-type(4):before {
    animation: notScaleY 0.3s cubic-bezier(0.11, 1.05, 0.32, 1.03) 0.75s forwards;
  }
  .fade-in-word__vertical span:nth-of-type(5) {
    transform-origin: top;
  }
  .fade-in-word__vertical span:nth-of-type(5):before {
    transform-origin: top;
  }
  .fade-in-word__vertical span:nth-of-type(5) {
    animation: scaleY 0.36s cubic-bezier(0.84, 0.01, 0.78, 0.13) 0.5s forwards;
  }
  .fade-in-word__vertical span:nth-of-type(5):before {
    animation: notScaleY 0.3s cubic-bezier(0.11, 1.05, 0.32, 1.03) 0.85s forwards;
  }
  .fade-in-word__vertical span:nth-of-type(6) {
    transform-origin: bottom;
  }
  .fade-in-word__vertical span:nth-of-type(6):before {
    transform-origin: bottom;
  }
  .fade-in-word__vertical span:nth-of-type(6) {
    animation: scaleY 0.36s cubic-bezier(0.84, 0.01, 0.78, 0.13) 0.6s forwards;
  }
  .fade-in-word__vertical span:nth-of-type(6):before {
    animation: notScaleY 0.3s cubic-bezier(0.11, 1.05, 0.32, 1.03) 0.95s forwards;
  }
  .fade-in-word__vertical span:nth-of-type(7) {
    transform-origin: top;
  }
  .fade-in-word__vertical span:nth-of-type(7):before {
    transform-origin: top;
  }
  .fade-in-word__vertical span:nth-of-type(7) {
    animation: scaleY 0.36s cubic-bezier(0.84, 0.01, 0.78, 0.13) 0.7s forwards;
  }
  .fade-in-word__vertical span:nth-of-type(7):before {
    animation: notScaleY 0.3s cubic-bezier(0.11, 1.05, 0.32, 1.03) 1.05s forwards;
  }
  .fade-in-word__vertical span:nth-of-type(8) {
    transform-origin: bottom;
  }
  .fade-in-word__vertical span:nth-of-type(8):before {
    transform-origin: bottom;
  }
  .fade-in-word__vertical span:nth-of-type(8) {
    animation: scaleY 0.36s cubic-bezier(0.84, 0.01, 0.78, 0.13) 0.8s forwards;
  }
  .fade-in-word__vertical span:nth-of-type(8):before {
    animation: notScaleY 0.3s cubic-bezier(0.11, 1.05, 0.32, 1.03) 1.15s forwards;
  }
  .fade-in-word__vertical span:nth-of-type(9) {
    transform-origin: top;
  }
  .fade-in-word__vertical span:nth-of-type(9):before {
    transform-origin: top;
  }
  .fade-in-word__vertical span:nth-of-type(9) {
    animation: scaleY 0.36s cubic-bezier(0.84, 0.01, 0.78, 0.13) 0.9s forwards;
  }
  .fade-in-word__vertical span:nth-of-type(9):before {
    animation: notScaleY 0.3s cubic-bezier(0.11, 1.05, 0.32, 1.03) 1.25s forwards;
  }
  .fade-in-word__vertical span:nth-of-type(10) {
    transform-origin: bottom;
  }
  .fade-in-word__vertical span:nth-of-type(10):before {
    transform-origin: bottom;
  }
  .fade-in-word__vertical span:nth-of-type(10) {
    animation: scaleY 0.36s cubic-bezier(0.84, 0.01, 0.78, 0.13) 1s forwards;
  }
  .fade-in-word__vertical span:nth-of-type(10):before {
    animation: notScaleY 0.3s cubic-bezier(0.11, 1.05, 0.32, 1.03) 1.35s forwards;
  }
  .fade-in-word__vertical span:nth-of-type(11) {
    transform-origin: top;
  }
  .fade-in-word__vertical span:nth-of-type(11):before {
    transform-origin: top;
  }
  .fade-in-word__vertical span:nth-of-type(11) {
    animation: scaleY 0.36s cubic-bezier(0.84, 0.01, 0.78, 0.13) 1.1s forwards;
  }
  .fade-in-word__vertical span:nth-of-type(11):before {
    animation: notScaleY 0.3s cubic-bezier(0.11, 1.05, 0.32, 1.03) 1.45s forwards;
  }
  .fade-in-word__vertical span:nth-of-type(12) {
    transform-origin: top;
  }
  .fade-in-word__vertical span:nth-of-type(12):before {
    transform-origin: top;
  }
  .fade-in-word__vertical span:nth-of-type(12) {
    animation: scaleY 0.36s cubic-bezier(0.84, 0.01, 0.78, 0.13) 1.2s forwards;
  }
  .fade-in-word__vertical span:nth-of-type(12):before {
    animation: notScaleY 0.3s cubic-bezier(0.11, 1.05, 0.32, 1.03) 1.55s forwards;
  }
  .fade-in-word__vertical span:nth-of-type(13) {
    transform-origin: top;
  }
  .fade-in-word__vertical span:nth-of-type(13):before {
    transform-origin: top;
  }
  .fade-in-word__vertical span:nth-of-type(13) {
    animation: scaleY 0.36s cubic-bezier(0.84, 0.01, 0.78, 0.13) 1.3s forwards;
  }
  .fade-in-word__vertical span:nth-of-type(13):before {
    animation: notScaleY 0.3s cubic-bezier(0.11, 1.05, 0.32, 1.03) 1.65s forwards;
  }
  .fade-in-word__vertical span:nth-of-type(14) {
    transform-origin: top;
  }
  .fade-in-word__vertical span:nth-of-type(14):before {
    transform-origin: top;
  }
  .fade-in-word__vertical span:nth-of-type(14) {
    animation: scaleY 0.36s cubic-bezier(0.84, 0.01, 0.78, 0.13) 1.4s forwards;
  }
  .fade-in-word__vertical span:nth-of-type(14):before {
    animation: notScaleY 0.3s cubic-bezier(0.11, 1.05, 0.32, 1.03) 1.75s forwards;
  }
  .fade-in-word__vertical span:nth-of-type(15) {
    transform-origin: top;
  }
  .fade-in-word__vertical span:nth-of-type(15):before {
    transform-origin: top;
  }
  .fade-in-word__vertical span:nth-of-type(15) {
    animation: scaleY 0.36s cubic-bezier(0.84, 0.01, 0.78, 0.13) 1.5s forwards;
  }
  .fade-in-word__vertical span:nth-of-type(15):before {
    animation: notScaleY 0.3s cubic-bezier(0.11, 1.05, 0.32, 1.03) 1.85s forwards;
  }
  .fade-in-word__vertical span:nth-of-type(16) {
    transform-origin: top;
  }
  .fade-in-word__vertical span:nth-of-type(16):before {
    transform-origin: top;
  }
  .fade-in-word__vertical span:nth-of-type(16) {
    animation: scaleY 0.36s cubic-bezier(0.84, 0.01, 0.78, 0.13) 1.6s forwards;
  }
  .fade-in-word__vertical span:nth-of-type(16):before {
    animation: notScaleY 0.3s cubic-bezier(0.11, 1.05, 0.32, 1.03) 1.95s forwards;
  }
  .fade-in-word__vertical span:nth-of-type(17) {
    transform-origin: top;
  }
  .fade-in-word__vertical span:nth-of-type(17):before {
    transform-origin: top;
  }
  .fade-in-word__vertical span:nth-of-type(17) {
    animation: scaleY 0.36s cubic-bezier(0.84, 0.01, 0.78, 0.13) 1.7s forwards;
  }
  .fade-in-word__vertical span:nth-of-type(17):before {
    animation: notScaleY 0.3s cubic-bezier(0.11, 1.05, 0.32, 1.03) 2.05s forwards;
  }

/*文字アニメーション*/
.animate-title {
  opacity: 0;
}

.animate-title.inview,.animate-title.inview .gr_bg {
  opacity: 1;
}

.animate-title.inview .char,.animate-title.inview .gr_bg {
  display: inline-block;
  -webkit-animation-name: kf-animate-chars;
          animation-name: kf-animate-chars;
  -webkit-animation-duration: 0.5s;
          animation-duration: 0.5s;
  -webkit-animation-timing-function: cubic-bezier(0.39, 1.57, 0.58, 1);
          animation-timing-function: cubic-bezier(0.39, 1.57, 0.58, 1);
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-direction: normal;
          animation-direction: normal;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

.animate-title.inview .char01 {
  -webkit-animation-delay: 0.04s;
          animation-delay: 0.04s;
}

.animate-title.inview .char02 {
  -webkit-animation-delay: 0.08s;
          animation-delay: 0.08s;
}

.animate-title.inview .char03 {
  -webkit-animation-delay: 0.12s;
          animation-delay: 0.12s;
}

.animate-title.inview .char04 {
  -webkit-animation-delay: 0.16s;
          animation-delay: 0.16s;
}

.animate-title.inview .char05 {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}

.animate-title.inview .char06 {
  -webkit-animation-delay: 0.24s;
          animation-delay: 0.24s;
}

.animate-title.inview .char07 {
  -webkit-animation-delay: 0.28s;
          animation-delay: 0.28s;
}

.animate-title.inview .char08 {
  -webkit-animation-delay: 0.32s;
          animation-delay: 0.32s;
}

.animate-title.inview .char09 {
  -webkit-animation-delay: 0.36s;
          animation-delay: 0.36s;
}
.animate-title.inview .char10 {
  -webkit-animation-delay: 0.40s;
          animation-delay: 0.40s;
}
.animate-title.inview .char11 {
  -webkit-animation-delay: 0.44s;
          animation-delay: 0.44s;
}
.animate-title.inview .char12 {
  -webkit-animation-delay: 0.48s;
          animation-delay: 0.48s;
}
.animate-title.inview .char13 {
  -webkit-animation-delay: 0.52s;
          animation-delay: 0.52s;
}
.animate-title.inview .char14 {
  -webkit-animation-delay: 0.56s;
          animation-delay: 0.56s;
}
.animate-title.inview .char15 {
  -webkit-animation-delay: 0.60s;
          animation-delay: 0.60s;
}
.animate-title.inview .char16 {
  -webkit-animation-delay: 0.64s;
          animation-delay: 0.64s;
}
.animate-title.inview .char17 {
  -webkit-animation-delay: 0.68s;
          animation-delay: 0.68s;
}
.animate-title.inview .char18 {
  -webkit-animation-delay: 0.72s;
          animation-delay: 0.72s;
}

@-webkit-keyframes kf-animate-chars {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20%);
            transform: translateY(-20%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes kf-animate-chars {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20%);
            transform: translateY(-20%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

/*下からフェード*/
.pop_title {
	-webkit-transform: scale(1.2) translate3d(0,60px,0);
    transform: scale(1.2) translate3d(0,60px,0);
    opacity: 0;
}
.is-invasion .pop_title {
	-webkit-transform: scale(1) translate3d(0,0,0);
    transform: scale(1) translate3d(0,0,0);
    opacity: 1;
	-webkit-transition: opacity .7s .2s,-webkit-transform 2s cubic-bezier(.08,.92,.35,1);
    transition: opacity .7s .2s,-webkit-transform 2s cubic-bezier(.08,.92,.35,1);
    transition: transform 2s cubic-bezier(.08,.92,.35,1),opacity .7s .2s;
    transition: transform 2s cubic-bezier(.08,.92,.35,1),opacity .7s .2s,-webkit-transform 2s cubic-bezier(.08,.92,.35,1),opacity .7s .2s;
}