/*----------------------------
scrollup ｜下から上へ出現
----------------------------*/
.scrollup {
  transition: 0.8s ease-in-out;
  transform: translateY(30px);
  opacity: 0;
}
.scrollup.on {
  transform: translateY(0);
  opacity: 1.0;
}

/*----------------------------
scrollleft ｜左から出現
----------------------------*/
.scrollleft {
    -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;
}
.scrollleft.on {
    opacity: 1.0;
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    transform: translateX(0);
}

/*----------------------------
scrollright ｜右から出現
----------------------------*/
.scrollright {
    -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;
}
.scrollright.on {
    opacity: 1.0;
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    transform: translateX(0);
}