@charset "UTF-8";
/*下からアニメーション*/
.fadein-bottom{
  -webkit-transition: all .5s linear;
  -o-transition: all .5s linear;
  transition: all .5s linear;
  -webkit-transform: translateY(100%);
  -moz-transform: translateY(100%);
  -ms-transform: translateY(100%);
  transform: translateY(100%);
  opacity: 0;
}

.fadein-bottom2{
  -webkit-transition: all .9s linear;
  -o-transition: all .9s linear;
  transition: all .9s linear;
  -webkit-transform: translateY(100%);
  -moz-transform: translateY(100%);
  -ms-transform: translateY(100%);
  transform: translateY(100%);
  opacity: 0;
}


.fadein-bottom.active{
  -webkit-transform: translateY(0%);
  -moz-transform: translateY(0%);
  -ms-transform: translateY(0%);
  transform: translateY(0%);
  opacity: 7;
}

.fadein-bottom2.active{
  -webkit-transform: translateY(0%);
  -moz-transform: translateY(0%);
  -ms-transform: translateY(0%);
  transform: translateY(0%);
  opacity: 7;
}


/*フェードイン左から */

.fadein-left{
  -webkit-transition: all .9s linear;
  -o-transition: all .9s linear;
  transition: all .9s linear;
  -webkit-transform: translateX(-100px);
  -moz-transform: translateX(-100px);
  -ms-transform: translateX(-100px);
  transform: translateX(-100px);
  opacity: 0;
}
.fadein-left.active{
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  opacity: 1;
}
/*フェードイン右から */

.fadein-right{
  -webkit-transition: all .9s linear;
  -o-transition: all .9s linear;
  transition: all .9s linear;
  -webkit-transform: translateX(100px);
  -moz-transform: translateX(100px);
  -ms-transform: translateX(100px);
  transform: translateX(100px);
  opacity: 0;
}
.fadein-right.active{
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  opacity: 1;
}




/*フェードイン透明 */

.fadein-in{
  -webkit-transition: all 3s ease-in;
  -o-transition: all 3s ease-in;
  transition: all 3s ease-in;

  opacity: 0;
}
.fadein-in.active{
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  opacity: 1;
}


/*最初の開いた時のフェードイン */
.logo {
  font-size: 20px;
  font-weight: bold;
  animation-name: fadein;
  animation-duration: 1.5s;

}
@keyframes fadein {
from {
  opacity: 0;
  transform: translateY(50px);
}
to {
  opacity: 1;
  transform: translateY(0);
}
}