@charset "UTF-8";


.top_to_top {
  transform: translate3d(0, 50px, 0);
  opacity: 0;
}
.top_to_top_fadeIn {
  transform: translate3d(0, 0, 0);
  transition: 1s ease-in-out .5s;
  opacity: 1;
}

.top_to_bottom {
  transform: translate3d(0, -50px, 0);
  opacity: 0;
}
.top_to_bottom_fadeIn {
  transform: translate3d(0, 0, 0);
  transition: 1s ease-in-out .5s;
  opacity: 1;
}

.left_to_right {
  transform: translate3d(-50px, 0, 0);
  opacity: 0;
}
.left_to_right_fadeIn {
  transform: translate3d(0, 0, 0);
  transition: 1s ease-in-out .5s;
  opacity: 1;
}

.right_to_left {
  transform: translate3d(50px, 0, 0);
  opacity: 0;
}
.right_to_left_fadeIn {
  transform: translate3d(0, 0, 0);
  transition: 1s ease-in-out .5s;
  opacity: 1;
}


#fadeInBox {
  height: 300px;/* 画像表示領域の高さ確保 */
}
#fadeInBox .item {
  padding: 5px;/* 画像間の隙間 */
  display: none;/* 最初は非表示に */
}