:root {
  --animation-delay: 0;
  --duration: 800ms;
  --iterations: 1;
}
/* code by webdevtrick ( https://webdevtrick.com) */


.reveal,
.reveal::after {
          animation-delay: 0;
          animation-delay: var(--animation-delay, 2s);
          animation-iteration-count: 1;
          animation-iteration-count: var(--iterations, 1);
          animation-duration: 800ms;
          animation-duration: var(--duration, 800ms);
          animation-fill-mode: both;
          animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
}

.reveal {
  position: relative;
  font-size: 2.5vw;
  animation-name: text;
  color: #FFF;
  /*white-space: nowrap;*/
  cursor: default;
  text-transform: uppercase;
  
}

.reveal::after {
    content: "";
    position: absolute;
    z-index: 999;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #76849E;
            transform: scaleX(0);
            transform-origin: 0 50%;
    pointer-events: none;
            animation-name: revealer;
  }



@keyframes text {
  from {
            clip-path: inset(0 100% 0 0);
  }
  to {
            clip-path: inset(0 0 0 0);
  }
}




@keyframes revealer {
  
  0%, 50% {
            transform-origin: 0 50%;
  }
  
  60%, 100% {
            transform-origin: 100% 50%;   
  }

  
  60% {
            transform: scaleX(1);
  }
  
  100% {
            transform: scaleX(0);
  }
}

/*　スマホ適用　*/
@media screen and (max-width:480px) {
.reveal {
  font-size: 1.4em;
}
}