@charset "UTF-8";
/* 要素をフェードで表示
----------------------------*/
.fade-effect {
  opacity: 0;
  transform: translate(0, 20px);
  transition: all 1000ms;
}
.add-fade-effect { /* fade-effectを設定したら自動付与されるclass（effect.js） */
  opacity: 1;
  transform: translate(0, 0);
}
/* その場でふわっ
----------------------------*/
.fade-in-effect {
  animation-name: fadeInAnime;
  animation-duration: 2.5s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fadeInAnime {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* 要素をブラーをかけて表示
----------------------------*/
.blur {
  animation-name: blurAnime;
  animation-duration: 1.1s;
  animation-fill-mode: forwards;
}
@keyframes blurAnime {
  from {
    filter: blur(20px);
    transform: scale(1.05);
    opacity: 0;
  }
  to {
    filter: blur(0);
    transform: scale(1);
    opacity: 1;
  }
}
.blur-trigger {
  opacity: 0;
}
/* 要素をフェードで表示
----------------------------*/
.delayScroll > [class^="col"] {
  opacity: 0;
}
.fadeUpBox { /* delayScrollを設定したら子要素に自動付与されるclass（effect.js） */
  animation-name: boxfadeUpAnime;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes boxfadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* 要素を上から下に流れるように表示
----------------------------*/
/*全共通*/
.slide-in {
  overflow: hidden;
  display: inline-block;
}
.slide-in_inner {
  display: inline-block;
}
/* 上下のアニメーション*/
.upAnime {
  opacity: 0;
}
.slideAnimeDownUp {
  animation-name: slideTextY100;
  animation-duration: 1.5s;
	animation-delay: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes slideTextY100 {
  from {
    transform: translateY(100%); /* 要素を上の枠外に移動*/
    opacity: 0;
  }
  to {
    transform: translateY(0); /* 要素を元の位置に移動*/
    opacity: 1;
  }
}
.slideAnimeUpDown {
  animation-name: slideTextY-100;
  animation-duration: 1.5s;
	animation-delay: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes slideTextY-100 {
  from {
    transform: translateY(-100%); /* 要素を下の枠外に移動*/
    opacity: 0;
  }
  to {
    transform: translateY(0); /* 要素を元の位置に移動*/
    opacity: 1;
  }
}
/* 要素が下から上に滑らかに表示
----------------------------*/
span.smoothText {
  overflow: hidden;
  display: block;
}
span.smoothTextTrigger {
  transition: .8s ease-in-out;
  transform: translate3d(0, 100%, 0) skewY(12deg);
  transform-origin: left;
  display: block;
}
span.smoothTextTrigger.smoothTextAppear {
  transform: translate3d(0, 0, 0) skewY(0);
}
/* 要素を左から右にマスクをかけて表示
----------------------------*/
.animation-img-wrap {
  overflow: hidden;
  position: relative;
  height: 100%;
}
.animation-img-wrap::before {
  animation: animation-img-wrap 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  background: #fff;
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 10;
  animation-play-state: paused; /* アニメーションを一時停止 */
}
.animation-img-wrap.start-animation::before {
  animation-play-state: running; /* アニメーションを再開 */
}
@keyframes animation-img-wrap {
  100% {
    transform: translateX(100%);
  }
}