@charset "UTF-8";
/* CSS Document */
/* フェードイン表示場所 */
.fade_in_box {
  opacity: 0;
}

/* フェードイン */
.fade_in {
  animation-name: fadeIn;
  animation-duration: 800ms;
  animation-fill-mode: forwards;
  animation-delay: 0s;
  opacity: 0;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/*-- トップタイトル --*/
.title__text {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

h1.title__box--large {
  overflow: hidden;
  display: inline-block;
}

h1.title span {
  display: inline-block;
}

/*　左右のアニメーション*/
.leftAnime {
  opacity: 0;
  /* 必要に応じてアニメーションを追加 */
  /* animation-name: leftSlide; */
  /* animation-duration: 0.8s; */
  /* animation-fill-mode: forwards; */
}

.slideAnimeLeftRight {
  animation-name: slideLeftToRight;
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes slideLeftToRight {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
.slideAnimeRightLeft {
  animation-name: slideRightToLeft;
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes slideRightToLeft {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
/* 遅延 */
.delay_300ms {
  animation-delay: 300ms;
}

.delay_600ms {
  animation-delay: 600ms;
}

.delay_800ms {
  animation-delay: 800ms;
}

/* アニメーションの長さ */
.duration_2s {
  animation-duration: 2s;
}

/*-- 普通のフェードイン --*/
.normal_fadein {
  animation-name: fadeInOpacity;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
  opacity: 0;
}

@keyframes fadeInOpacity {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}/*# sourceMappingURL=animation.css.map */