@charset "UTF-8";


/* アニメーション: パララックス用 */
.parallax_up {
  transition: transform 0.2s ease;
}


/* アニメーション: テキスト反射用 */
.js-txt-shine-clip{
  background: var(--main-color);
  -webkit-background-clip: text;
  color: transparent;
  background-image: linear-gradient(90deg, #32333d 0%, #0046e2 33%, #24b0e7 45%, #2c337f 55%, #32333d 70%, #32333d 100%);
  background-size: 200% 100%; 
  background-position: 300% 50%;
  
}
.js-txt-shine-clip.color1{
  background-image: linear-gradient(90deg, #32333d 0%, #0046e2 33%, #24b0e7 45%, #2c337f 55%, #32333d 70%, #32333d 100%);
}
.js-txt-shine-clip.color2{
  background-color: #92d5f1;
  background-image: linear-gradient(90deg, #92d5f1 0%, #0046e2 33%, #24b0e7 45%, #92d5f1 55%, #92d5f1 70%, #92d5f1 100%);
}
.js-txt-shine-clip.color3{
  background-color: #92d5f1;
  background-image: linear-gradient(90deg, #92d5f1 0%, #0046e2 33%, #24b0e7 45%, #92d5f1 55%, #92d5f1 70%, #92d5f1 100%);

}

.js-txt-shine-clip.isShine{
  animation: gradientMove 5s ease forwards;
}

@keyframes gradientMove {
  0% {
    background-position: 300% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-size: 0;
  }
}