@charset "utf-8";

/*------------------------------------------------------------------------------
  reset
------------------------------------------------------------------------------*/



/* 背景色が消えてから表示されるテキスト */
.mask-bg {
  color: transparent;
  display: inline-block;
  font-size: 36px;
  font-weight: bold;
  overflow: hidden;
  position: relative;
  transition: color 0ms 450ms;
}
.mask-bg::after {
  background: linear-gradient(to right, #362ae0 0%,#3b79cc 50%,#42d3ed 100%);
  bottom: 0;
  content: '';
  display: block;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transform: translate(0, 100%);
}

.mask-bg.is-animated {
  color: #362ae0;
}
.mask-bg.is-animated::after {
  animation: mask-bg 0.6s cubic-bezier(0.8, 0, 0.170, 1);
}

@keyframes mask-bg {
  0% {
    transform: translate(-101%, 0%); 
  }
  40%, 60% {
    transform: translate(0, 0%);
  }
  100% {
    transform: translate(100%, 0%); 
  }
}

.mask-bg img {opacity:0;}
.is-animated img {animation: fades 1.5s forwards; }

@keyframes fades{
  0% {opacity: 0;  }
  30% {opacity: 0;  }
  100% {opacity: 1;   }
}




/*------------------------------------------------------------------------------
  clearfix
------------------------------------------------------------------------------*/