@charset "utf-8";

/* フェードイン */
.fadeIn{
opacity:0;
transition: opacity 3s ease .5s;
}
.animation.fadeIn{
opacity:1;
}
.fadeIn.left{
transform: translate(-50px,0);
}
.animation.fadeIn.left{
transform: translate(0,0);
}
.fadeIn.right{
transform: translate(50px,0);
}
.animation.fadeIn.right{
transform: translate(0,0);
}
.fadeIn.top{
transform: translate(0,-50px);
}
.animation.fadeIn.top{
transform: translate(0,0);
}
.fadeIn.bottom{
transform: translate(0,50px);
}
.animation.fadeIn.bottom{
transform: translate(0,0);
}
.fadeIn.top-left{
transform: translate(-50px,-50px);
}
.animation.fadeIn.top-left{
transform: translate(0,0);
}
.fadeIn.top-right{
transform: translate(50px,-50px);
}
.animation.fadeIn.top-right{
transform: translate(0,0);
}
.fadeIn.bottom-left{
transform: translate(-50px,50px);
}
.animation.fadeIn.bottom-left{
transform: translate(0,0);
}
.fadeIn.bottom-right{
transform: translate(50px,50px);
}
.animation.fadeIn.bottom-right{
transform: translate(0,0);
}

.fadeInRight{
opacity: 0;
}
.fadeInRight.animation{
animation: fadeInRight 1.2s ease-out .25s forwards;
}
.fadeInRight.late.animation{
animation: fadeInRight 1.2s ease-out .35s forwards;
}
.fadeInRight:after{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255,255,255,1);
transform: skew(-5deg); 
transform-origin: top left;
}
.fadeInRight.noBg:after{
display: none;
}
.fadeInRight.animation:after{
animation: fadeInRightBg 1.2s ease-out .25s forwards;
}
.fadeInRight.late.animation:after{
animation: fadeInRightBg 1.2s ease-out .35s forwards;
}
@keyframes fadeInRight {
0% {
transform: translateX(1.2rem);
opacity: 0;
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes fadeInRightBg {
0% {
left: 0;
opacity: 1;
}
to {
left: 100%;
opacity: 0;
}
}
.blur{
filter: blur(6px);
opacity: 0;
transition: all 1.2s ease-out .25s;
}
.blur1{
transition: all 1.2s ease-out .55s;
}
.blur2{
transition: all 1.2s ease-out .65s;
}
.blur3{
transition: all 1.2s ease-out .75s;
}
.blur.animation{
filter: blur(0px);
opacity: 1;
}