/*下から出現*/
.effect_box_up {
    -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;
    -webkit-transform: translateY(20px) rotate(0deg);
    -ms-transform: translateY(20px) rotate(0deg);
    transform: translateY(20px) rotate(0deg);
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
}
.effect_box_up.leff {
    opacity: 1.0;
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    -webkit-transform: translateY(0) rotate(0deg);
    -ms-transform: translateY(0) rotate(0deg);
    transform: translateY(0) rotate(0deg);
}
/*その場で出現*/
.effect_box_spot {
    -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;
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
}
.effect_box_spot.leff {
    opacity: 1.0;
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
}
/*左から出現*/
.effect_box_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;
    -webkit-transform: translateX(-20px) rotate(0deg);
    -ms-transform: translateX(-20px) rotate(0deg);
    transform: translateX(-20px) rotate(0deg);
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
}
.effect_box_left.leff {
    opacity: 1.0;
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    -webkit-transform: translateY(0) rotate(0deg);
    -ms-transform: translateY(0) rotate(0deg);
    transform: translateY(0) rotate(0deg);
}
/*右から出現*/
.effect_box_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;
    -webkit-transform: translateX(20px) rotate(0deg);
    -ms-transform: translateX(20px) rotate(0deg);
    transform: translateX(20px) rotate(0deg);
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
}
.effect_box_right.leff {
    opacity: 1.0;
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    -webkit-transform: translateY(0) rotate(0deg);
    -ms-transform: translateY(0) rotate(0deg);
    transform: translateY(0) rotate(0deg);
}

/*************************
scroll_effect
*************************/
.effbox {
    transition: 0.4s ease-in-out;
    -webkit-transform: translateY(40px);
            transform: translateY(40px);
}
.effbox.on {
    -webkit-transform: translateY(0);
            transform: translateY(0);
}