@charset "utf-8";

/*---------------------------------------*/
/* アニメーション */
/*---------------------------------------*/
/* フェードイン */
.fadeIn{
opacity:0;
transition: opacity 0.8s ease, transform 0.8s ease, -webkit-transform 0.8s ease
}
.animation.fadeIn{
opacity:1;
}
.fadeIn.left{
transform: translate(-20px,0);
}
.animation.fadeIn.left{
transform: translate(0,0);
}
.fadeIn.right{
transform: translate(20px,0);
}
.animation.fadeIn.right{
transform: translate(0,0);
}
.fadeIn.top{
transform: translate(0,-20px);
}
.animation.fadeIn.top{
transform: translate(0,0);
}
.fadeIn.bottom{
transform: translate(0,20px);
}
.animation.fadeIn.bottom{
transform: translate(0,0);
}
.fadeIn.top-left{
transform: translate(-20px,-20px);
}
.animation.fadeIn.top-left{
transform: translate(0,0);
}
.fadeIn.top-right{
transform: translate(20px,-20px);
}
.animation.fadeIn.top-right{
transform: translate(0,0);
}
.fadeIn.bottom-left{
transform: translate(-20px,20px);
}
.animation.fadeIn.bottom-left{
transform: translate(0,0);
}
.fadeIn.bottom-right{
transform: translate(20px,20px);
}
.animation.fadeIn.bottom-right{
transform: translate(0,0);
}
/*ズームアウト*/
.zoomout .bg{
opacity: 0;
width: 100%;
height: 100%;
transform: scale(1.2);
transition: all 1.8s ease;
}
.zoomout.animation .bg{
opacity: 1;
transform: scale(1);
}