@charset "utf-8";

/*---------------------------------------------------------------------------
/* inview animation
 --------------------------------------------------------------------------*/
/*----- フェードイン -----*/
.inviewfadeIn {
    opacity: 0;
    transition: 1s;
}
.fadeIn {
    opacity: 1.0;
}
/*----- フェードインしながら右へスライド -----*/
.inviewfadeInRight {
    opacity: 0;
    transform: translate(-60px, 0);
    -webkit-transform: translate(-60px, 0);
    transition: 1s;
}
.fadeInRight {
    opacity: 1.0;
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
}
/*----- フェードインしながら左へスライド -----*/
.inviewfadeInLeft {
    opacity: 0;
    transform: translate(60px, 0);
    -webkit-transform: translate(60px, 0);
    transition: 1s;
}
.fadeInLeft {
    opacity: 1.0;
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
}
/*----- フェードインしながら上へスライド -----*/
.inviewfadeInUp {
    opacity: 0;
    transform: translate(0, 60px);
    -webkit-transform: translate(0, 60px);
    transition: 1s;
}
.fadeInUp {
    opacity: 1.0;
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
}
/*特定の要素を遅延させたい場合*/
.delay01{transition-delay: 100ms;}
.delay02{transition-delay: 200ms;}
.delay03{transition-delay: 300ms;}
.delay04{transition-delay: 300ms;}

/*----- 背景をフェードイン -----*/
.inviewfadeIn_bg:before{
    opacity: 0;
    transition: 1s;
}
.fadeIn_bg:before{
    opacity: 1.0;
}
/*----- 背景をフェードインしながら右へスライド -----*/
.inviewfadeInRight_bg:before {
    opacity: 0;
    transform: translate(-60px, 0);
    -webkit-transform: translate(-60px, 0);
    transition: 1s;
}
.fadeInRight_bg:before {
    opacity: 1.0;
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
}
/*----- 背景をフェードインしながら左へスライド -----*/
.inviewfadeInLeft_bg:before {
    opacity: 0;
    transform: translate(60px, 0);
    -webkit-transform: translate(60px, 0);
    transition: 1s;
}
.fadeInLeft_bg:before {
    opacity: 1.0;
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
}
/*----- 背景をフェードインしながら上へスライド -----*/
.inviewfadeInUp_bg:before {
    opacity: 0;
    transform: translate(0, 60px);
    -webkit-transform: translate(0, 60px);
    transition: 1s;
}
.fadeInUp_bg:before {
    opacity: 1.0;
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
}

/*
.inviewDelay ul li とすれば連続して遅延できる（jsで処理）
*/