@charset "UTF-8";

/* 下から上 */
.parabox {
    opacity: 0;
    -webkit-transform: translate(0, 100px);
    transform: translate(0, 100px);
    -webkit-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
  }
  .parabox.fade {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }


  /* 左右のアニメーション */
  .animationLR {
    visibility: hidden;
  }
  .fadeInDownLR {
    display: block;
    animation-fill-mode: both;
    animation-duration: 0.7s;
    animation-name: fadeInDownR;
    visibility: visible !important;
  }
  .fadeInDownLR:nth-child(even){
    animation-name: fadeInDownL;
  }
  @keyframes fadeInDownR {
    0% {
      opacity: 0;
      transform: translateX(-80px);
    }
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }
  @-webkit-keyframes fadeInDownR {
    0% {
      opacity: 0;
      -webkit-transform: translateX(-80px);
              transform: translateX(-80px);
    }
    100% {
      opacity: 1;
      -webkit-transform: translateX(0);
              transform: translateX(0);
    }
  }
  
  @keyframes fadeInDownL {
    0% {
      opacity: 0;
      transform: translateX(100px);
    }
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }
  @-webkit-keyframes fadeInDownL {
    0% {
      opacity: 0;
      -webkit-transform: translateX(80px);
              transform: translateX(80px);
    }
    100% {
      opacity: 1;
      -webkit-transform: translateX(0);
              transform: translateX(0);
    }
  }



/* 左から右 */
.animation1 {
  visibility: hidden;
}
.fadeInDown1 {
  display: block;
  animation-fill-mode: both;
  animation-duration: 0.7s;
  animation-name: fadeInDown1;
  visibility: visible !important;
}
@keyframes fadeInDown1 {
  0% {
    opacity: 0;
    transform: translateX(-80px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@-webkit-keyframes fadeInDown1 {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-80px);
            transform: translateX(-80px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}



/* 右から左 */
.animation2 {
  visibility: hidden;
}
.fadeInDown2 {
  display: block;
  animation-fill-mode: both;
  animation-duration: 0.7s;
  animation-name: fadeInDown2;
  visibility: visible !important;
}
@keyframes fadeInDown2 {
  0% {
    opacity: 0;
    transform: translateX(80px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@-webkit-keyframes fadeInDown2 {
  0% {
    opacity: 0;
    -webkit-transform: translateX(80px);
            transform: translateX(80px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}


/*下から順番に上へフェードイン*/
.delay-show1 .show, .delay-show2 .show, .delay-show3 .show {
  position: relative;
  top: 60px;
  opacity: 0;
}