.fadeIn {
  opacity: 0;
  transition: 2s;
}
.fadeIn.is-show {
  opacity: 1;
}


/*下からフェードイン*/
.fadeIn_up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fadeIn_up.is-show {
  opacity: 1;
  transform: translateY(0);
}

/* 左からフェードイン */
.fadeIn_left {
  opacity: 0;
  transform: translateX(-50px); /* 初期位置を左に50pxずらす */
  transition: transform 2s ease, opacity 2s ease;
}
.fadeIn_left.is-show {
  transform: translateX(0); /* 初期位置をリセット */
  opacity: 1; /* フェードイン */
}

/* 右からフェードイン */
.fadeIn_right {
  opacity: 0;
  transform: translateX(50px); /* 初期位置を右に50pxずらす */
  transition: transform 2s ease, opacity 2s ease;
}
.fadeIn_right.is-show {
  transform: translateX(0); /* 初期位置をリセット */
  opacity: 1; /* フェードイン */
}


/*スライドアップ*/
.slideUp {
  opacity: 1;
}
.slideUp.show {
  opacity: 0.2;
  display: none;
  transform: translate(0, -100%);
}

#fadeInLeftbtm ,
#fadeInLeft {
  opacity: 0;
  transform: translate(-50%, 0);
  transition: 2s;
}
#fadeInLeftbtm.show ,
#fadeInLeft.show {
  transform: translate(0, 0);
  opacity: 1;
}
#fadeInscroll ,
#fadeInTxtbtm {
  opacity: 0;
  transform: translate(0, 50%);
  transition: 2s;
}
#fadeInscroll.show ,
#fadeInTxtbtm.show {
  transform: translate(0, 0);
  opacity: 1;
}