@charset "UTF-8";
/* 動きに関する CSS */
/*----------------------------------------------------------
 単品
----------------------------------------------------------*/
/* 1文字ずつ文字が出現 */
.eachTextAnime span {
    opacity: 0;
}
.eachTextAnime.appeartext span {
    animation: text_anime_on 1s ease-out forwards;
}
@keyframes text_anime_on {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
/* じわっと出現 */
.blur {
    animation-name: blurAnime;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}
@keyframes blurAnime {
    from {
        filter: blur(10px);
        transform: scale(1.02);
        opacity: 0;
    }
    to {
        filter: blur(0);
        transform: scale(1);
        opacity: 1;
    }
}
.blurTrigger {
    opacity: 0;
}
/*----------------------------------------------------------
スクロールで表示させる発火トリガー 全体要素
----------------------------------------------------------*/
.sa { /* */
    opacity: 0;
    transition: all .5s ease;
}
.sa.show {
    opacity: 1;
    transform: none;
}
.sa--lr { /* 左から右にフェードイン */
    transform: translate(-100px, 0);
}
.sa--rl { /* 右から左にフェードイン */
    transform: translate(100px, 0);
}
.sa--up { /* 下から上にフェードイン */
    transform: translate(0, 100px);
}
.sa--down { /* 上から下にフェードイン */
    transform: translate(0, -100px);
}
.sa--scaleUp { /* 縮小した状態から拡大しながらフェードイン */
    transform: scale(.5);
}
.sa--scaleDown { /* 拡大した状態から縮小しながらフェードイン */
    transform: scale(1.5);
}
.sa--rotateL { /* 左に回転しながらフェードイン */
    transform: rotate(180deg);
}
.sa--rotateR { /* 右に回転しながらフェードイン */
    transform: rotate(-180deg);
}