/*---------------------------
アニメーション用CSS
-----------------------------*/
#mv .mv_conte .mv_img{
  transform: scale(1.2);
  -webkit-transform: scale(1.2);
  transition: transform 3s cubic-bezier(0.17, 0.17, 0.86, 1);
  -webkit-transition: transform 3s cubic-bezier(0.17, 0.17, 0.86, 1);
}
#mv .mv_conte .mv_img.active{
  transform: scale(1);
  -webkit-transform: scale(1);
}

#mv .mv_conte .mv_ttl span {
  display: inline-block;
  opacity: 0;
  transform: rotateY(90deg);
  -webkit-transform: rotateY(90deg);
  transition: transform 2s ease-out, opacity 2s ease-out; 
  -webkit-transition: -webkit-transform 2s ease-out, opacity 2s ease-out;
}
#mv .mv_conte .mv_ttl span.space{
  width: .5vw;
}
#mv .mv_conte .mv_ttl span:nth-child(1) { transition-delay: 0s; }
#mv .mv_conte .mv_ttl span:nth-child(2) { transition-delay: 0.1s; }
#mv .mv_conte .mv_ttl span:nth-child(3) { transition-delay: 0.2s; }
#mv .mv_conte .mv_ttl span:nth-child(4) { transition-delay: 0.3s; }
#mv .mv_conte .mv_ttl span:nth-child(5) { transition-delay: 0.4s; }
#mv .mv_conte .mv_ttl span:nth-child(6) { transition-delay: 0.5s; }
#mv .mv_conte .mv_ttl span:nth-child(7) { transition-delay: 0.6s; }
#mv .mv_conte .mv_ttl span:nth-child(8) { transition-delay: 0.7s; }
#mv .mv_conte .mv_ttl span:nth-child(9) { transition-delay: 0.8s; }
#mv .mv_conte .mv_ttl span:nth-child(10) { transition-delay: 0.9s; }
#mv .mv_conte .mv_ttl span:nth-child(11) { transition-delay: 1.0s; }
#mv .mv_conte .mv_ttl span:nth-child(12) { transition-delay: 1.1s; }
#mv .mv_conte .mv_ttl span:nth-child(13) { transition-delay: 1.2s; }

.filterBlur{
  opacity: 0;
  filter: blur(6px);
  transition: 1.2s ease;
  -webkit-transition: 1.2s ease;
  -webkit-filter: blur(6px);
}
.filterBlur.active{
  opacity: 1;
  filter: blur(0);
  -webkit-filter: blur(0);
}

.filterBlur-02{
  filter: blur(6px);
  transition: 1.2s ease;
  -webkit-transition: 1.2s ease;
  -webkit-filter: blur(6px);
}
.filterBlur-02.active{
  filter: blur(0);
  -webkit-filter: blur(0);
}

.clipPath{
  clip-path: inset(0 0 100% 0);
  -webkit-clip-path: inset(0 0 100% 0);
  transition: 3s ease;
  -webkit-transition: 3s ease;
}
.clipPath.delay{
  transition-delay: 1s;
  -webkit-transition-delay: 1s;
}
.clipPath.active{
  clip-path: inset(0 0 0 0);
  -webkit-clip-path: inset(0 0 0 0);
}
.clipPath.left-to-right {
  clip-path: inset(0 100% 0 0);
  -webkit-clip-path: inset(0 100% 0 0);
  transition: 2s ease-out;
  -webkit-transition: 2s ease-out;
}
.clipPath.left-to-right.active{
  clip-path: inset(0 0 0 0);
  -webkit-clip-path: inset(0 0 0 0);
}
.clipPath.right-to-left {
  clip-path: inset(0 0 0 100%);
  -webkit-clip-path: inset(0 0 0 100%);
  transition: 2s ease-out;
  -webkit-transition: 2s ease-out;
}
.clipPath.right-to-left.active{
  clip-path: inset(0 0 0 0);
  -webkit-clip-path: inset(0 0 0 0);
}

.overflowHidden{
  overflow: hidden;
}
.scaleDown{
  transform: scale(1.2);
  -webkit-transform: scale(1.2);
  transition: 2s ease;
  -webkit-transition: 2s ease;
}
.scaleDown.slow{
  transform: scale(1.5);
  -webkit-transform: scale(1.5);
  transition: 3s ease;
  -webkit-transition: 3s ease;
}
.scaleDown.active{
  transform: scale(1);
  -webkit-transform: scale(1);
}

.scaleUp{
  transform: scale(.5);
  -webkit-transform: scale(.5);
  transition: 3s ease-out;
  -webkit-transition: 3s ease-out;
}
.scaleUp.active{
  transform: scale(1);
  -webkit-transform: scale(1);
}

.blurUp{
  filter: blur(6px);
  -webkit-filter: blur(6px);
  transform: translate(0px, 10px);
  -webkit-transform: translate(0px, 10px);
  transition: 3s ease;
  -webkit-transition: 3s ease;
}
.blurUp.active{
  filter: blur(0);
  -webkit-filter: blur(0);
  transform: translate(0px, 0px);
  -webkit-transform: translate(0px, 0px);
}

.translateUp{
  transform: translate(0px, 20px);
  -webkit-transform: translate(0px, 20px);
  opacity: 0;
  transition: 1s ease;
  -webkit-transition: 1s ease;
}
.translateUp.active{
  opacity: 1;
  transform: translate(0px, 0px);
  -webkit-transform: translate(0px, 0px);
}

.translateLeft{
  position: relative;
  display: block;
  transform: translate(20px, 0px);
  -webkit-transform: translate(20px, 0px);
  opacity: 0;
  transition: 1s ease;
  -webkit-transition: 1s ease;
}
.translateLeft.active{
  opacity: 1;
  transform: translate(0px, 0px);
  -webkit-transform: translate(0px, 0px);
}

.translateLeftFirst{
  position: relative;
  display: block;
  transform: translate(20px, 0px);
  -webkit-transform: translate(20px, 0px);
  opacity: 0;
  transition: 1s ease;
  -webkit-transition: 1s ease;
}
.translateLeftFirst.active{
  opacity: 1;
  transform: translate(0px, 0px);
  -webkit-transform: translate(0px, 0px);
}

.translateUpEx{
  transform: translate(-50%, 20px) !important;
  opacity: 0;
  transition: 1s ease;
  -webkit-transition: 1s ease;
}
.translateUpEx.active{
  opacity: 1;
  transform: translate(-50%, 0px) !important;
}

.translateUpExFirst{
  transform: translate(-50%, 10%) !important;
  opacity: 0;
  transition: 1s ease;
  -webkit-transition: 1s ease;
}
.translateUpExFirst.active{
  opacity: 1;
  transform: translate(-50%, 0) !important;
}

.rotateTxt span{
  display: inline-block;
  opacity: 0;
  transform: rotateY(90deg);
  -webkit-transform: rotateY(90deg);
  transition: transform 2s ease-out, opacity 2s ease-out;
  -webkit-transition: transform 2s ease-out, opacity 2s ease-out;
}
.rotateTxt span.space{
  width: .5vw;
}
.rotateTxt.active span:nth-child(1) { transition-delay: 0s; transform: rotateY(0); -webkit-transform: rotateY(0); opacity: 1;}
.rotateTxt.active span:nth-child(2) { transition-delay: 0.1s; transform: rotateY(0); -webkit-transform: rotateY(0); opacity: 1;}
.rotateTxt.active span:nth-child(3) { transition-delay: 0.2s; transform: rotateY(0); -webkit-transform: rotateY(0); opacity: 1;}
.rotateTxt.active span:nth-child(4) { transition-delay: 0.3s; transform: rotateY(0); -webkit-transform: rotateY(0); opacity: 1;}
.rotateTxt.active span:nth-child(5) { transition-delay: 0.4s; transform: rotateY(0); -webkit-transform: rotateY(0); opacity: 1;}
.rotateTxt.active span:nth-child(6) { transition-delay: 0.5s; transform: rotateY(0); -webkit-transform: rotateY(0); opacity: 1;}
.rotateTxt.active span:nth-child(7) { transition-delay: 0.6s; transform: rotateY(0); -webkit-transform: rotateY(0); opacity: 1;}
.rotateTxt.active span:nth-child(8) { transition-delay: 0.7s; transform: rotateY(0); -webkit-transform: rotateY(0); opacity: 1;}
.rotateTxt.active span:nth-child(9) { transition-delay: 0.8s; transform: rotateY(0); -webkit-transform: rotateY(0); opacity: 1;}
.rotateTxt.active span:nth-child(10) { transition-delay: 0.9s; transform: rotateY(0); -webkit-transform: rotateY(0); opacity: 1;}
.rotateTxt.active span:nth-child(11) { transition-delay: 1.0s; transform: rotateY(0); -webkit-transform: rotateY(0); opacity: 1;}
.rotateTxt.active span:nth-child(12) { transition-delay: 1.1s; transform: rotateY(0); -webkit-transform: rotateY(0); opacity: 1;}
.rotateTxt.active span:nth-child(13) { transition-delay: 1.2s; transform: rotateY(0); -webkit-transform: rotateY(0); opacity: 1;}

.transform-accelerate {
  transform: translate3d(0, 0, 0);
}