@charset "UTF-8";


/*========= ブラー ===============*/
.blur{
animation-name:blurAnime;
animation-duration:1s;
animation-fill-mode:forwards;
}

.blurTrigger{
opacity: 0;
}


@keyframes blurAnime{
0% {
filter: blur(30px);
transform: scale(1.4);
opacity: 0;
}
100% {
filter: blur(0);
transform: scale(1);
opacity: 1;
}
}


.blur1{
animation-name:blurAnime1;
animation-duration:2s;
animation-fill-mode:forwards;
}

.blurTrigger1{
opacity: 0;
}

@keyframes blurAnime1{
0% {
filter: blur(30px);
transform: scale(1.4);
opacity: 0;
}
100% {
filter: blur(0);
transform: scale(1);
opacity: 1;
}
}

.blur2{
animation-name:blurAnime2;
animation-duration:1s;
animation-fill-mode:forwards;
}

.blurTrigger2{
opacity: 0;
}

@keyframes blurAnime2{
0% {
filter: blur(20px);
transform: scale(1.2);
opacity: 0;
}
100% {
filter: blur(0);
transform: scale(1);
opacity: 1;
}
}




/*========= 流れるテキスト ===============*/

/*全共通*/

.slide-in {
overflow: hidden;
display: inline-block;
}

.slide-in_inner {
display: inline-block;

}

/*左右のアニメーション*/
.leftAnime{
opacity: 0;/*事前に透過0にして消しておく*/
}

.slideAnimeLeftRight {
animation-name:slideTextX100;
animation-duration:0.8s;
animation-fill-mode:forwards;
opacity: 0;
}

@keyframes slideTextX100 {
from {
transform: translateX(-100%); /*要素を左の枠外に移動*/
opacity: 0;
}

to {
transform: translateX(0);/*要素を元の位置に移動*/
opacity: 1;
}
}

.slideAnimeRightLeft {
animation-name:slideTextX-100;
animation-duration:0.8s;
animation-fill-mode:forwards;
opacity: 0;
}


@keyframes slideTextX-100 {
from {
transform: translateX(100%);/*要素を右の枠外に移動*/
opacity: 0;
}

to {
transform: translateX(0);/*要素を元の位置に移動*/
opacity: 1;
}
}