.loading {
  transition: 400ms 1200ms;
}

.loading .bar {
  transition: 1000ms cubic-bezier(0.895, 0.03, 0.685, 0.22);
}

.loading.animate {
  opacity: 0;
  pointer-events: none;
}

.loading.animate .bar {
  width: 100% !important;
}

@media only screen and (min-width: 768px) {
  .site-header {
    -webkit-transform: translateY(-50px);
            transform: translateY(-50px);
    opacity: 0;
    transition: 500ms 2400ms cubic-bezier(0.165, 0.84, 0.44, 1);
    height: 146px;
  }
  .site-header.animate {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
    opacity: 1;
  }
}








.moveing:hover{
  transition: 500ms;
  transform: scale(1.1, 1.1);
}

/* .section-hero .inview.main-logo {
  -webkit-transform: translate(-50%, -25%) scale(1);
          transform: translate(-50%, -25%) scale(1);
  opacity: 0;
} */

/* .section-hero .inview.main-logo.animate {
  -webkit-animation: mainLogo 400ms forwards 3200ms;
          animation: mainLogo 400ms forwards 3200ms;
} */

.section-hero .inview.movie {
  transition: 500ms;
}
.section-hero .inview.movie.animate {
  opacity: 1;
}

.section-hero .inview.chara_chohi {
  transition: 500ms cubic-bezier(0.165, 0.84, 0.44, 1) 2000ms;
  -webkit-transform: translateX(-50px);
          transform: translateX(-50px);
}

.section-hero .inview.chara_chohi.animate {
  opacity: 1;
  -webkit-transform: translateX(0px);
          transform: translateX(0px);
}



.section-hero .inview.chara_sonsaku {
  animation: bounce-in-fwd 0.2s cubic-bezier(0.165, 0.840, 0.440, 1.000) both;
  animation-delay: 2.2s;
}
@keyframes bounce-in-fwd {
  0% {
    transform: scale(0);
    animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    transform: scale(1);
    animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    transform: scale(0.7);
    animation-timing-function: ease-in;
  }
  72% {
    transform: scale(1);
    animation-timing-function: ease-out;
  }
  81% {
    transform: scale(0.84);
    animation-timing-function: ease-in;
  }
  89% {
    transform: scale(1);
    animation-timing-function: ease-out;
  }
  95% {
    transform: scale(0.95);
    animation-timing-function: ease-in;
  }
  100% {
    transform: scale(1);
    animation-timing-function: ease-out;
    opacity: 1;
  }
}

.section-hero .inview.chara_chibi_ka {
  transition: 500ms 3800ms cubic-bezier(0.165, 0.84, 0.44, 1);
  -webkit-transform: translateX(50px);
          transform: translateX(50px);
}
.section-hero .inview.chara_chibi_ka.animate {
  opacity: 1;
  -webkit-transform: translateY(0px);
          transform: translateY(0px);
}


.section-hero .inview.chara_chibi_da {
  transition: 500ms 3400ms cubic-bezier(0.165, 0.84, 0.44, 1);
  -webkit-transform: translateX(50px);
          transform: translateX(50px);
}

.section-hero .inview.chara_chibi_da.animate {
  opacity: 1;
  -webkit-transform: translateX(0px);
          transform: translateX(0px);
}



.section-hero .inview.chara_chibi_ih {
  transition: 300ms 3000ms cubic-bezier(0.165, 0.84, 0.44, 1);
  -webkit-transform: translateY(50px);
          transform: translateY(50px);
}

.section-hero .inview.chara_chibi_ih.animate {
  opacity: 1;
  -webkit-transform: translateY(0px);
          transform: translateY(0px);
}

.section-hero .inview.chara_chibi_on {
  transition: 300ms 3200ms cubic-bezier(0.165, 0.84, 0.44, 1);
  -webkit-transform: translateY(50px);
          transform: translateY(50px);
}

.section-hero .inview.chara_chibi_on.animate {
  opacity: 1;
  -webkit-transform: translateY(0px);
          transform: translateY(0px);
}

.section-hero .inview.chara_chibi_wh {
  transition: 300ms 3300ms cubic-bezier(0.165, 0.84, 0.44, 1);
  -webkit-transform: translateX(-50px);
          transform: translateX(-50px);
}

.section-hero .inview.chara_chibi_wh.animate {
  opacity: 1;
  -webkit-transform: translateX(0px);
          transform: translateX(0px);
}


.section-hero .inview.chara_chibi_za {
  transition: 300ms 3600ms cubic-bezier(0.165, 0.84, 0.44, 1);
  -webkit-transform: translateY(50px);
          transform: translateY(50px);
}

.section-hero .inview.chara_chibi_za.animate {
  opacity: 1;
  -webkit-transform: translateY(0px);
          transform: translateY(0px);
}


.section-hero .inview.chara_txt {
  animation: scale-in-ver-top 0.1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation-delay: 4s;
/*transition: 500ms 4000ms cubic-bezier(0.165, 0.84, 0.44, 1);
  -webkit-transform: translateY(50px);
          transform: translateY(50px);*/ 
}

.section-hero .inview.chara_txt.animate {
  opacity: 1;
  -webkit-transform: translateY(0px);
          transform: translateY(0px);
}
@keyframes scale-in-ver-top {
  0% {
    transform: scaleY(0);
    transform-origin: 100% 0%;
    opacity: 1;
  }
  100% {
    transform: scaleY(1);
    transform-origin: 100% 0%;
    opacity: 1;
  }
}

/* .section-hero .inview.main-logo {
  animation: slide-in-elliptic-bottom-bck 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation-delay: 3s;
}
@keyframes slide-in-elliptic-bottom-bck {
  0% {
    transform: translateY(600px) rotateX(-30deg) scale(6.5);
    transform-origin: 50% -100%;
    opacity: 0;
  }
  100% {
    transform: translateY(0) rotateX(0) scale(1);
    transform-origin: 50% 500px;
    opacity: 1;
  }
} */


.section-hero .inview.hero-bg {
  animation: fadein 10s ease both;
  animation-delay: 2.6s;
}
@keyframes fadein {
  0% {
    transform: translateY(0) rotateX(0) scale(1);
    transform-origin: 50% -100%;
    opacity: 0;
  }
  100% {
    transform: translateY(0) rotateX(0) scale(1);
    transform-origin: 50% 500px;
    opacity: 1;
  }
}

.zoomOut{
	animation-name:zoomOutAnime;
	animation-duration:300ms;
	animation-fill-mode:forwards;
  animation-delay: 3800ms;
}
@keyframes zoomOutAnime{
  from {
	transform: scale(1);
  }

  to {
    opacity: 1;
      transform:scale(1);
  }
}