/*----------------------------
scroll_up ｜下から上へ出現
----------------------------*/
.scroll_up {
    transition: 2.0s ease-in-out;
    transform: translateY(30px);
    opacity: 0;
    visibility: hidden;
    transition: transform 2s, opacity 2s, visibility 2s;
  }
  .scroll_up.on {
    transform: translateY(0);
    opacity: 1.0;
    visibility: visible;
  }
  
  /*----------------------------
  scroll_left ｜左から出現
  ----------------------------*/
  .scroll_left {
      -webkit-transition: 0.8s ease-in-out;
      -moz-transition: 0.8s ease-in-out;
      -o-transition: 0.8s ease-in-out;
      transition: 0.8s ease-in-out;
      transform: translateX(-30px);
      opacity: 0;
      filter: alpha(opacity=0);
      -moz-opacity: 0;
  }
  .scroll_left.on {
      opacity: 1.0;
      filter: alpha(opacity=100);
      -moz-opacity: 1.0;
      transform: translateX(0);
  }
  
  /*----------------------------
  scroll_right ｜右から出現
  ----------------------------*/
  .scroll_right {
      -webkit-transition: 0.8s ease-in-out;
      -moz-transition: 0.8s ease-in-out;
      -o-transition: 0.8s ease-in-out;
      transition: 0.8s ease-in-out;
      transform: translateX(30px);
      opacity: 0;
      filter: alpha(opacity=0);
      -moz-opacity: 0;
  }
  .scroll_right.on {
      opacity: 1.0;
      filter: alpha(opacity=100);
      -moz-opacity: 1.0;
      transform: translateX(0);
  }
  /*------------------------*/
  /*------------------------*/
  /*------- layout -------*/
  ul.box {
    width: 80%;
    max-width: 300px;
    margin: 0 auto;
    padding: 10vw;
    list-style: none;
  }
  ul.box li {
    margin-bottom: 400px;
}
ul.box li img {
      max-width: 100%;
    }


  /*----------------------------
  scroll_right ｜右から出現
  ----------------------------*/
  .scroll_down {
    transition: 1s ease-in-out;
    transform: translateY(-100px);
    opacity: 0;
}
.scroll_down.on {
  transform: translateY(0);
  opacity: 1.0;
}
/*------------------------*/



/*1.フェードインアニメーションの指定*/
.scrollanime {opacity: 0;} /*一瞬表示されるのを防ぐ*/
.fadeInDown {
    animation-name: fadeInDown;
    animation-duration: 3s;
    animation-fill-mode: forwards;
}
@keyframes fadeInDown {
    0% {
        opacity: 0;         
    }
    100% {
    opacity: 1;
    transform: translate(0);
    }
}
 
/*2.上下の動きを指定*/
.updown {transform: translateY(-100px);}
.downup {transform: translateY(100px);}
 
/*3.左右の動きを指定*/
.sect02{overflow: hidden;} /*横スクロールバーを隠す*/
.slide-right {transform: translateX(200px);}
.slide-left {transform: translateX(-200px);}