/*-------------------------
 * inview-effect
 * 2015-12-19
 * satella web designer
 *-------------------------*/
 
 /*----------------------------------
 　フェード
----------------------------------*/
.FadeIn.play{-webkit-animation-name:Fade;animation-name:Fade;}
@-webkit-keyframes Fade{
0%{opacity:0;}
100%{opacity:1;}
}
@keyframes Fade{
0%{opacity:0;}
100%{opacity:1;}
}


/*----------------------------------
 　Y軸回転
----------------------------------*/
.flipInY.play{-webkit-animation-name:flipInY;animation-name:flipInY; }

@-webkit-keyframes flipInY{
0%{-webkit-transform:perspective(400px)rotateY(90deg);transform:perspective(400px)rotateY(90deg);opacity:0;}
40%{-webkit-transform:perspective(400px)rotateY(-10deg);transform:perspective(400px)rotateY(-10deg);}
70%{-webkit-transform:perspective(400px)rotateY(10deg);transform:perspective(400px)rotateY(10deg);}
100%{-webkit-transform:perspective(400px)rotateY(0);transform:perspective(400px)rotateY(0);opacity:1;}
}

@keyframes flipInY{
0%{-webkit-transform:perspective(400px)rotateY(90deg);-ms-transform:perspective(400px)rotateY(90deg);transform:perspective(400px)rotateY(90deg);opacity:0;}
40%{-webkit-transform:perspective(400px)rotateY(-10deg);-ms-transform:perspective(400px)rotateY(-10deg);transform:perspective(400px)rotateY(-10deg)}
70%{-webkit-transform:perspective(400px)rotateY(10deg);-ms-transform:perspective(400px)rotateY(10deg);transform:perspective(400px)rotateY(10deg)}
100%{-webkit-transform:perspective(400px)rotateY(0);-ms-transform:perspective(400px)rotateY(0);transform:perspective(400px)rotateY(0);opacity:1;}
}


/*----------------------------------
 　X軸回転
----------------------------------*/
.flipInX.play{-webkit-animation-name:flipInX;animation-name:flipInX;}

@-webkit-keyframes flipInX{
0%{-webkit-transform:perspective(400px)rotateX(90deg);transform:perspective(400px)rotateX(90deg);opacity:0;}
40%{-webkit-transform:perspective(400px)rotateX(-10deg);transform:perspective(400px)rotateX(-10deg);}
70%{-webkit-transform:perspective(400px)rotateX(10deg);transform:perspective(400px)rotateX(10deg);}
100%{-webkit-transform:perspective(400px)rotateX(0);transform:perspective(400px)rotateX(0);opacity:1;}
}
@keyframes flipInX{
0%{-webkit-transform:perspective(400px)rotateX(90deg);-ms-transform:perspective(400px)rotateX(90deg);transform:perspective(400px)rotateX(90deg);opacity:0;}
40%{-webkit-transform:perspective(400px)rotateX(-10deg);-ms-transform:perspective(400px)rotateX(-10deg);transform:perspective(400px)rotateX(-10deg);}
70%{-webkit-transform:perspective(400px)rotateX(10deg);-ms-transform:perspective(400px)rotateX(10deg);transform:perspective(400px)rotateX(10deg);}
100%{-webkit-transform:perspective(400px)rotateX(0);-ms-transform:perspective(400px)rotateX(0);transform:perspective(400px)rotateX(0);opacity:1;}
}


/*----------------------------------
 　左からバウンス
----------------------------------*/
 .bounceInLeft.play {animation: bounceInLeft; -webkit-animation: bounceInLeft ;}
 
@-webkit-keyframes bounceInLeft{
0%{-webkit-transform:translateX(-500px);transform:translateX(-500px);opacity:0;}
60%{-webkit-transform:translateX(30px);transform:translateX(30px);}
80%{-webkit-transform:translateX(-10px);transform:translateX(-10px);}
100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1;}
}
@keyframes bounceInLeft{
0%{-webkit-transform:translateX(-500px);-ms-transform:translateX(-500px);transform:translateX(-500px);opacity:0;}
60%{-webkit-transform:translateX(30px);-ms-transform:translateX(30px);transform:translateX(30px);}
80%{-webkit-transform:translateX(-10px);-ms-transform:translateX(-10px);transform:translateX(-10px);}
100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);opacity:1;}
}
/*----------------------------------
 　右からバウンス
----------------------------------*/
.bounceInRight.play {animation: bounceInRight; -webkit-animation: bounceInRight;}
@-webkit-keyframes bounceInRight{
0%{-webkit-transform:translateX(500px);transform:translateX(500px);opacity:0;}
60%{-webkit-transform:translateX(-30px);transform:translateX-(-30px);}
80%{-webkit-transform:translateX(10px);transform:translateX(10px);}
100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1;}
}
@keyframes bounceInRight{
0%{-webkit-transform:translateX(500px);-ms-transform:translateX(500px);transform:translateX(500px);opacity:0;}
60%{-webkit-transform:translateX(-30px);-ms-transform:translateX(-30px);transform:translateX(-30px);}
80%{-webkit-transform:translateX(10px);-ms-transform:translateX(10px);transform:translateX(10px);}
100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);opacity:1;}
}
/*----------------------------------
 　左からフェード
----------------------------------*/
 .FadeInLeft.play {animation: FadeInLeft; -webkit-animation: FadeInLeft ;}
 
@-webkit-keyframes FadeInLeft{
0%{-webkit-transform:translateX(-500px);transform:translateX(-500px);opacity:0;}
100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1;}
}
@keyframes FadeInLeft{
0%{-webkit-transform:translateX(-500px);-ms-transform:translateX(-500px);transform:translateX(-500px);opacity:0;}
100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);opacity:1;}
}
/*----------------------------------
 　右からフェード
----------------------------------*/
.FadeInRight.play {animation: FadeInRight; -webkit-animation: FadeInRight;}
@-webkit-keyframes FadeInRight{
0%{-webkit-transform:translateX(500px);transform:translateX(500px);opacity:0;}
100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1;}
}
@keyframes FadeInRight{
0%{-webkit-transform:translateX(500px);-ms-transform:translateX(500px);transform:translateX(500px);opacity:0;}
100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);opacity:1;}
}

/*----------------------------------
 　上からバウンス
----------------------------------*/
.bounceInTop.play {animation: bounceInTop; -webkit-animation: bounceInTop;}
@-webkit-keyframes bounceInTop{
0%{-webkit-transform:translateY(-500px);transform:translateY(-500px);opacity:0;}
60%{-webkit-transform:translateY(30px);transform:translateY-(30px);}
80%{-webkit-transform:translateY(-10px);transform:translateY(-10px);}
100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1;}
}
@keyframes bounceInTop{
0%{-webkit-transform:translateY(-500px);-ms-transform:translateY(-500px);transform:translateY(-500px);opacity:0;}
60%{-webkit-transform:translateY(30px);-ms-transform:translateY(30px);transform:translateY(30px);}
80%{-webkit-transform:translateY(-10px);-ms-transform:translateY(-10px);transform:translateY(-10px);}
100%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);opacity:1;}
}
/*----------------------------------
 　下からバウンス
----------------------------------*/
.bounceInBottom.play {animation: bounceInBottom; -webkit-animation: bounceInBottom;}
@-webkit-keyframes bounceInBottom{
0%{-webkit-transform:translateY(500px);transform:translateY(500px);opacity:0;}
60%{-webkit-transform:translateY(-30px);transform:translateY-(-30px);}
80%{-webkit-transform:translateY(10px);transform:translateY(10px);}
100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1;}
}
@keyframes bounceInBottom{
0%{-webkit-transform:translateY(500px);-ms-transform:translateY(500px);transform:translateY(500px);opacity:0;}
60%{-webkit-transform:translateY(-30px);-ms-transform:translateY(-30px);transform:translateY(-30px);}
80%{-webkit-transform:translateY(10px);-ms-transform:translateY(10px);transform:translateY(10px);}
100%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);opacity:1;}
}
/*----------------------------------
 　下からフェード
----------------------------------*/
.fadeInUp.play{-webkit-animation-name:fadeInUp;animation-name:fadeInUp;}
@-webkit-keyframes fadeInUp{
0%{opacity:0;-webkit-transform:translateY(20px);transform:translateY(20px);}
100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0);}
}
@keyframes fadeInUp{
0%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px);}
100%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}
}

/*----------------------------------
 　下からフェード
----------------------------------*/
.fadeInDown.play{-webkit-animation-name:fadeInDown;animation-name:fadeInDown;}
@-webkit-keyframes fadeInDown{
0%{opacity:0;-webkit-transform:translateY(-20px);transform:translateY(-20px);}
100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0);}
}
@keyframes fadeInDown{
0%{opacity:0;-webkit-transform:translateY(-20px);-ms-transform:translateY(-20px);transform:translateY(-20px);}
100%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}
}


/*----------------------------------
 　膨張バウンス
----------------------------------*/
.ScaleBounce.play{-webkit-animation-name:ScaleBounce;animation-name:ScaleBounce;}
@-webkit-keyframes ScaleBounce {
  0%, 20%, 40%, 60%, 80%, 100% {-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);}
  0%,100% {-webkit-transform: scale3d(1, 1, 1);}
  20% {-webkit-transform: scale3d(1.15, 1.15, 1.15);}
  40% {-webkit-transform: scale3d(0.9, 0.9, 0.9);}
  60% {-webkit-transform: scale3d(1.03, 1.03, 1.03);}
  80% {-webkit-transform: scale3d(0.97, 0.97, 0.97);}
  100%{opacity:1;}
}
@keyframes ScaleBounce {
  0%, 20%, 40%, 60%, 80%, 100% {transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);}
  0%,100% {transform: scale3d(1, 1, 1);}
  20% {transform: scale3d(1.15, 1.15, 1.15);}
  40% {transform: scale3d(0.9, 0.9, 0.9);}
  60% {transform: scale3d(1.03, 1.03, 1.03);}
  80% {transform: scale3d(0.97, 0.97, 0.97);}
  100%{opacity:1;}
}

/*----------------------------------
 　膨張
----------------------------------*/
.Scale.play{-webkit-animation-name:Scale;animation-name:Scale;}
@-webkit-keyframes Scale{
0%{-webkit-transform:scale(1);transform:scale(1)}
50%{-webkit-transform:scale(1.1);transform:scale(1.1)}
100%{-webkit-transform:scale(1);transform:scale(1);opacity:1;}
}
@keyframes Scale{
0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}
50%{-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)}
100%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);opacity:1;}
}



/*----------------------------------
 　ベース
 ----------------------------------*/
.inview{opacity:0.00;filter: alpha(opacity=00);-ms-filter: "alpha( opacity=00 )";}
.ie .inview{opacity:1.00;filter: alpha(opacity=100);-ms-filter: "alpha( opacity=100 )";}
.ie11 .inview{opacity:0.00;filter: alpha(opacity=00);-ms-filter: "alpha( opacity=00 )";}
.inview.play{animation-fill-mode: forwards;-webkit-animation-fill-mode: forwards;
-moz-animation-delay:0.3s;-webkit-animation-delay:0.3s;-o-animation-delay:0.3s;-ms-animation-delay:0.3s;animation-delay:0.3s;
-webkit-animation-iteration-count: 1;-moz-animation-iteration-count: 1;}
/*速さ - 早い*/
.inview.play.fast{-moz-animation-duration:0.6s;-webkit-animation-duration:0.6s;-o-animation-duration:0.6s;-ms-animation-duration:0.6s;animation-duration: 0.6s;}
/*速さ - 遅い*/
.inview.play.slow{-moz-animation-duration:1.5s;-webkit-animation-duration:1.5s;-o-animation-duration:1.5s;-ms-animation-duration:1.5s;animation-duration:1.5s;}

/*時差*/
.time1{-moz-transition-delay:0.3s;-webkit-transition-delay:0.3s;-o-transition-delay:0.3s;-ms-transition-delay:0.3s;transition-delay:0.3s;}
.time2{-moz-transition-delay:0.5s;-webkit-transition-delay:0.5s;-o-transition-delay:0.5s;-ms-transition-delay:0.5s;transition-delay:0.5s;}
.time3{-moz-transition-delay:0.7s;-webkit-transition-delay:0.7s;-o-transition-delay:0.7s;-ms-transition-delay:0.7s;transition-delay:0.7s;}
.time4{-moz-transition-delay:0.9s;-webkit-transition-delay:0.9s;-o-transition-delay:0.9s;-ms-transition-delay:0.9s;transition-delay:0.9s;}
 .time1.play{-moz-animation-delay:0.3s;-webkit-animation-delay:0.3s;-o-animation-delay:0.3s;-ms-animation-delay:0.3s;animation-delay:0.3s;}
 .time2.play{-moz-animation-delay:0.5s;-webkit-animation-delay:0.5s;-o-animation-delay:0.5s;-ms-animation-delay:0.5s;animation-delay:0.5s;}
 .time3.play{-moz-animation-delay:0.7s;-webkit-animation-delay:0.7s;-o-animation-delay:0.7s;-ms-animation-delay:0.7s;animation-delay:0.7s;}
 .time4.play{-moz-animation-delay:0.9s;-webkit-animation-delay:0.9s;-o-animation-delay:0.9s;-ms-animation-delay:0.9s;animation-delay:0.9s;}