@charset "utf-8";


/************************************************************
                動き
************************************************************/


/*==============menu===============*/
.animate {
  opacity: 0;
  flex: 0 1 30%;
  transform: translateY(10px);
  transition: all 1.5s;
}
.animate.show {
  opacity: 1;
  transform: translateY(0);
}
.animate.show:nth-of-type(1) {
  transition-delay: 0s;
}
.animate.show:nth-of-type(2) {
  transition-delay: 0.2s;
}
.animate.show:nth-of-type(3) {
  transition-delay: 0.3s;
}
.animate.show:nth-of-type(4) {
  transition-delay: 0.4s;
}
.animate.show:nth-of-type(5) {
  transition-delay: 0.5s;
}

/*==============動きa==============*/
.mv_a1{
	opacity: 0;
	transition: 1s 0s;
	-moz-transform: scale(1) translate(-40px,0px);
    -webkit-transform: scale(1) translate(-40px,0px);
    -o-transform: scale(1) translate(-40px,0px);
    -ms-transform: scale(1) translate(-40px,0px);
	transform: scale(1) translate(-40px,0px);
}
.mv_a2{
	opacity: 0;
	transition: 1s 0.4s;
	-moz-transform: scale(1) translate(-40px,0px);
    -webkit-transform: scale(1) translate(-40px,0px);
    -o-transform: scale(1) translate(-40px,0px);
    -ms-transform: scale(1) translate(-40px,0px);
	transform: scale(1) translate(-40px,0px);
}
.mv_a3{
	opacity: 0;
	transition: 0.8s 0.6s;
	-moz-transform: scale(1) translate(-30px,0px);
    -webkit-transform: scale(1) translate(-30px,0px);
    -o-transform: scale(1) translate(-30px,0px);
    -ms-transform: scale(1) translate(-30px,0px);
	transform: scale(1) translate(-30px,0px);
}
.mv_a4{
	opacity: 0;
	transition: 0.8s 0.9s;
	-moz-transform: scale(1) translate(-30px,0px);
    -webkit-transform: scale(1) translate(-30px,0px);
    -o-transform: scale(1) translate(-30px,0px);
    -ms-transform: scale(1) translate(-30px,0px);
	transform: scale(1) translate(-30px,0px);
}
.ac_a{
	opacity: 1.0;
	-moz-transform: scale(1) translate(0);
    -webkit-transform: scale(1) translate(0);
    -o-transform: scale(1) translate(0);
    -ms-transform: scale(1) translate(0);
	transform: scale(1) translate(0);
}
.mv_b1{
	opacity: 0;
	transition: 1s 0s;
	-moz-transform: scale(1) translate(30px,0px);
    -webkit-transform: scale(1) translate(30px,0px);
    -o-transform: scale(1) translate(30px,0px);
    -ms-transform: scale(1) translate(30px,0px);
	transform: scale(1) translate(30px,0px);
}
.mv_b2{
	opacity: 0;
	transition: 1s 0.5s;
	-moz-transform: scale(1) translate(30px,0px);
    -webkit-transform: scale(1) translate(30px,0px);
    -o-transform: scale(1) translate(30px,0px);
    -ms-transform: scale(1) translate(30px,0px);
	transform: scale(1) translate(30px,0px);
}
.ac_b{
	opacity: 1.0;
	-moz-transform: scale(1) translate(0);
    -webkit-transform: scale(1) translate(0);
    -o-transform: scale(1) translate(0);
    -ms-transform: scale(1) translate(0);
	transform: scale(1) translate(0);
}
/*==============動きup==============*/

.mv_up1 {
	opacity: 0;
    transition: 1s 0.1s;
	-moz-transform: scale(1) translate(0,40px);
    -webkit-transform: scale(1) translate(0,40px);
    -o-transform: scale(1) translate(0,40px);
    -ms-transform: scale(1) translate(0,40px);
	transform: scale(1) translate(0,40px);
    text-align: center;
}
.mv_up2 {
	opacity: 0;
    transition: 0.8s 0.4s;
	-moz-transform: scale(1) translate(0,40px);
    -webkit-transform: scale(1) translate(0,40px);
    -o-transform: scale(1) translate(0,40px);
    -ms-transform: scale(1) translate(0,40px);
	transform: scale(1) translate(0,40px);
    text-align: center;
}
.mv_up3 {
	opacity: 0;
    transition: 0.8s 0.8s;
	-moz-transform: scale(1) translate(0,40px);
    -webkit-transform: scale(1) translate(0,40px);
    -o-transform: scale(1) translate(0,40px);
    -ms-transform: scale(1) translate(0,40px);
	transform: scale(1) translate(0,40px);
    text-align: center;
}
.ac_up{
	opacity: 1.0;
	-moz-transform: scale(1) translate(0);
    -webkit-transform: scale(1) translate(0);
    -o-transform: scale(1) translate(0);
    -ms-transform: scale(1) translate(0);
	transform: scale(1) translate(0);
}

.mv_fade1 {
	opacity: 0;
	transition: 1s 0.2s;
}
.mv_fade2 {
	opacity: 0;
	transition: 1s 0.4s;
}
.mv_fade3 {
	opacity: 0;
	transition: 1s 0.6s;
}
.ac_fade{
	opacity: 1.0;
	-moz-transform: scale(1) translate(0);
    -webkit-transform: scale(1) translate(0);
    -o-transform: scale(1) translate(0);
    -ms-transform: scale(1) translate(0);
	transform: scale(1) translate(0);
}


/*========= 流れるテキスト ===============*/

/*全共通*/

.slide-in {
	overflow: hidden;
    display: inline-block;
}

.slide-in_inner {
	display: inline-block;

}

/*左右のアニメーション*/
.leftAnime{
    opacity: 0;/*事前に透過0にして消しておく*/
}

.slideAnimeLeftRight {
	animation-name:slideTextX100;
	animation-duration:0.8s;
	animation-fill-mode:forwards;
    opacity: 0;
}

@keyframes slideTextX100 {
  from {
	transform: translateX(-100%); /*要素を左の枠外に移動*/
        opacity: 0;
  }

  to {
	transform: translateX(0);/*要素を元の位置に移動*/
    opacity: 1;
  }
}

.slideAnimeRightLeft {
	animation-name:slideTextX-100;
	animation-duration:0.8s;
	animation-fill-mode:forwards;
    opacity: 0;
}


@keyframes slideTextX-100 {
  from {
	transform: translateX(100%);/*要素を右の枠外に移動*/
    opacity: 0;
  }

  to {
	transform: translateX(0);/*要素を元の位置に移動*/
    opacity: 1;
  }
}


/*=============画像動き================*/
.img-animation {
  animation: img-opacity 1s cubic-bezier(.4, 0, .2, 1);
  overflow: hidden;
  position: relative;
}

.img-animation:before {
  animation: img-animation 1s cubic-bezier(.4, 0, .2, 1) forwards;
  background:#f4f4f4;
  bottom: 0;
  content: '';
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 5;

}

@keyframes img-opacity {
  100% {
    opacity: 1;
  }
}

@keyframes img-animation {
  100% {
    transform: translateX(100%);
  }
}