/* ーーーーーーーーーー出現用CSSーーーーーーーーーーー */
.sa {
    opacity: 0;
    transition: all .5s ease;
}

.sa.show {
    opacity: 1;
    transform: none;
}

.sa.show:nth-child(1){
    transition-delay: 0.3s;
}
.sa.show:nth-child(2){
    transition-delay: 0.9s;
}
.sa.show:nth-child(3){
    transition-delay: 1.5s;
}

.sa--lr {
    transform: translate(-200pt, 0);
}

.sa--rl {
    transform: translate(200pt, 0);
}
.sa--up {
    transform: translate(0, 100pt);
}
.sa--down {
    transform: translate(0, -100pt);
}

.sa--scaleUp {
    transform: scale(.5);
}

.sa--scaleDown {
    transform: scale(1.5);
}

.sa--rotateL {
    transform: rotate(180deg);
}

.sa--rotateR {
    transform: rotate(-180deg);
}

/* ーーーーーーーーーー出現用CSSーーーーーーーーーーー */
.sa2 {
    opacity: 0;
    transition: all .5s ease;
}

.sa2.show2 {
    opacity: 1;
    transform: none;
}

.sa2.show2:nth-child(1){
    transition-delay: 0.3s;
}
.sa2.show2:nth-child(2){
    transition-delay: 0.9s;
}
.sa2.show2:nth-child(3){
    transition-delay: 1.5s;
}

.sa2--lr {
    transform: translate(-200pt, 0);
}

.sa2--rl {
    transform: translate(200pt, 0);
}
.sa2--up {
    transform: translate(0, 100pt);
}
.sa2--down {
    transform: translate(0, -100pt);
}

.sa2--scaleUp {
    transform: scale(.5);
}

.sa2--scaleDown {
    transform: scale(1.5);
}

.sa2--rotateL {
    transform: rotate(180deg);
}

.sa2--rotateR {
    transform: rotate(-180deg);
}