@charset "UTF-8";
/* CSS Document */

.opa {transition: 0.5s ease; opacity: 0;}
/*アニメーションするプロパティを設定します*/
.opa.active {opacity: 1;}


.fade {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s 0s cubic-bezier(0.56, 0, 0.24, 1);
}
/*アニメーションするプロパティを設定します*/
.fade.active{opacity: 1;transform: translateY(0);}
@media screen and (max-width: 767px) {
.fade {
    opacity: 1;
    transform: translateY(40);
    transition: none;
}
}

.beside {
    opacity: 0;
    transform: translateX(-40px);
    transition: all 0.3s 0s cubic-bezier(0.56, 0, 0.24, 1);
}

@media screen and (max-width: 767px) {
.beside {
    opacity: 1;
    transform: 0;
    transition: all 0 0s cubic-bezier(0.56, 0, 0.24, 1);
}
}

.beside.active{opacity: 1;transform: translateX(0);}


.pagefade {transition:opacity 0.8s ease-in; opacity: 0;}
/*アニメーションするプロパティを設定します*/
.pagefade.active {opacity: 1;}


.mask-bg {
  color: transparent;
  display: inline-block;
  font-size: 36px;
  font-weight: bold;
  overflow: hidden;
  position: relative;
}

.mask-bg img{
      transition: all 0ms 450ms;
    opacity: 0;
}


.mask-bg::after {
  background: linear-gradient(to right, #56b5c6 0%,#4d9dc0 50%,#4a7eb4 100%);
  bottom: 0;
  content: '';
  display: block;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transform: translate(100%, 0);
}

.mask-bg.active img {
   opacity: 1;
}
.mask-bg.active::after {
  animation: mask-bg 1.2s cubic-bezier(0.8, 0, 0.170, 1);
}

@keyframes mask-bg-img {
  0% {
  }
  40%, 60% {
    visibility:visible;
  }
  100% {
    visibility:visible;
  }
}
 
@keyframes mask-bg {
  0% {
    transform: translate(-101%, 0)
  }
  40%, 60% {
    transform: translate(0, 0%);
  }
  100% {
    transform: translate(100%, 0);
  }
}