/* 画面外にいる状態 */

.fade-in {
    opacity : 0;
    transform : translate(0, 100px);
    transition : all 2s;
    }

    .fade-in-design {
        opacity : 0;
        transform : translate(0, 100px);
        transition : all 4s;
        }

/* 画面内に入った状態 */
.scrollin {
    opacity : 1;
    transform : translate(0, 0);
    }

.r-in {
        opacity : 0;
        transform : translate(100px, 0px);
        transition : all 2s;
  }

  .r-in-design {
          opacity : 0;
          transform : translate(100px, 0px);
          transition : all 4s;
    }

  .l-in {
          opacity : 0;
          transform : translate(-100px, 0px);
          transition : all 2s;
    }

    .l-in-design {
            opacity : 0;
            transform : translate(-100px, 0px);
            transition : all 4s;
      }


.r_in_scroll{
  opacity:1;/* 表示させる */
  transform:translateX(0); /* 位置を最初の位置に戻す */
}

.l_in_scroll{
  opacity:1;/* 表示させる */
  transform:translateX(0); /* 位置を最初の位置に戻す */
}

.delay img {
    position: relative;
    top: 120px;
    opacity: 0;
}
.delay img:first-child {
    transition: all 2.0s;
}
.delay img:nth-child(2n) {
    transition: all 4.0s;
}
.delay img:nth-child(3n) {
    transition: all 6.0s;
}
.delay img .move {
    opacity: 1;
    top: 0;
}



 .grid li.active {
    opacity: 1;
}