@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);
}

/*----- フェードインしながら左へスライドし消える -----*/
.inviewfadeInLeftDawn {
    opacity: 1;
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transition: 0.3s;
}

.fadeInLeftDawn {
    opacity: 1;
    transform: translate(100%, 0);
    -webkit-transform: translate(100%, 0);
    transition-delay: 0.5s;
    transition-timing-function:ease-in-out;
}


/*----- フェードインしながら上へスライド -----*/
.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);
}


/*----- ズームインしながら3D回転 -----*/
.inviewRotate {
    opacity: 0;
    transform: scale(0, 0) rotateY(180deg);
    -webkit-transform: scale(0, 0) rotateY(180deg);
    transition: 1.2s;
}

.Rotate {
    opacity: 1.0;
    transform: scale(1, 1) rotateY(360deg);
    -webkit-transform: scale(1, 1) rotateY(360deg);
}