/****************************************************************************
************  アニメーション
****************************************************************************/
.scroll-fade {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s, visibility 1s, transform 1s;
}

.fade-in {
  opacity: 0;
  transition: all 1s;
  transform: translate(0);
}

.fade-top {
  opacity: 0;
  transition: all 1s;
  transform: translateY(-20px);
}

.fade-left {
  opacity: 0;
  transition: all 1s;
  transform: translateX(-20px);
}

.fade-right {
  opacity: 0;
  transition: all 1s;
  transform: translateX(20px);
}

.scroll-fade.active,
.fade-top.active,
.fade-left.active,
.fade-right.active {
  opacity: 1;
  transform: translate(0);
}

.fade-in.active {
  opacity: 0;
  transform: translate(0);
}

.hide {
  opacity: 0;
  transition: all 1s;
}

.show {
  opacity: 1;
}