@charset "utf-8";

/* animate_fadeInUp
------------------------------------*/

.animation_scale{
    opacity: 0;
}

.animation_scale.is-inview{
    opacity: 1;
    animation-name:animation_start_scale;	/* アニメーション名の指定 */
    animation-delay:0s;		/* アニメーションの開始時間指定 */
    animation-duration: 4s;	/* アニメーション動作時間の指定 */
    animation-timing-function: ease-in-out;
    /* アニメーションの動き（徐々に早く徐々に遅く）*/
    animation-iteration-count: 1; /* アニメーションをループさせる */
}

@keyframes animation_start_scale {
    0% {
        transform: scale(1);
    }

    40% {
        transform: scale(0.8);
    }

    45% {
        transform: scale(0.9);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

/* h2 animation_border
------------------------------------*/

.border{
  position: relative;
}

.animation_border{
    opacity: 0;
}

.animation_border.is-inview{
    opacity: 1;
}

.animation_border.is-inview:before{
	content: '';
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 0;
	border-bottom: solid 2px #f4f4f7;
	transform: translateX(-50%);
	animation: border_anim 3s linear forwards;
}

@keyframes border_anim {
	0%{
		width: 0%;
	}
	100%{
		width: 100%;
	}
}

/* animation_fadeInUp
------------------------------------*/
.animation_fadeInUp,.animation_fadeInUp2,.animation_fadeInUp3 {
  opacity: 0;
  -webkit-transform: translateY(30px);
  transform: translateY(30px);
  transition: opacity .8s, transform .8s;
}

.animation_fadeInUp.is-inview {
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0);
  transition-delay: .5s;
}
.animation_fadeInUp2.is-inview {
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0);
  transition-delay: .8s;
}
.animation_fadeInUp3.is-inview {
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0);
  transition-delay: 1.1s;
}

/* animate_fadeInLeft
------------------------------------*/

.animation_fadeInLeft {
  opacity: 0;
  -webkit-transform: translateX(-30px);
  transform: translateX(-30px);
  transition: opacity .10s, transform .8s;
}

.animation_fadeInLeft.is-inview {
  opacity: 1;
  -webkit-transform: translateX(0);
  transform: translateX(0);
  transition-delay: .10s;
}

/* .animation_fadeInRight
------------------------------------*/

.animation_fadeInRight {
  opacity: 0;
  -webkit-transform: translateX(30px);
  transform: translateX(30px);
  transition: opacity .10s, transform .8s;
}

.animation_fadeInRight.is-inview {
  opacity: 1;
  -webkit-transform: translateX(0);
  transform: translateX(0);
  transition-delay: .10s;
}

/* animation_fadeInUp
------------------------------------*/

.bgappearTrigger,
.bgDUextendTrigger {
  opacity: 0;
}

.bgextend {
  animation-name: bgextendAnimeBase;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  position: relative;
  overflow: hidden;
  opacity: 0;
}

@keyframes bgextendAnimeBase {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.bgappear {
  animation-name: bgextendAnimeSecond;
  animation-duration: 1s;
  animation-delay: 0.6s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes bgextendAnimeSecond {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.bgDUextend::before {
  animation-name: bgDUextendAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #645EA0;
}

@keyframes bgDUextendAnime {
  0% {
    transform-origin: bottom;
    transform: scaleY(0);
  }

  50% {
    transform-origin: bottom;
    transform: scaleY(1);
  }

  50.001% {
    transform-origin: top;
  }

  100% {
    transform-origin: top;
    transform: scaleY(0);
  }
}

/* fadeIn_softly
------------------------------------*/

.fadeIn_softly {
  animation-name: fadeIn_softly-anime;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-delay: 0.3s;
  animation-timing-function: ease-in;
  opacity: 0;
}

@keyframes fadeIn_softly-anime {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn_softly2 {
  animation-name: fadeIn_softly-anime2;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-delay: 0.9s;
  animation-timing-function: ease-in;
  opacity: 0;
}

@keyframes fadeIn_softly-anime2 {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn_softly3 {
  animation-name: fadeIn_softly-anime3;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-delay: 1.5s;
  animation-timing-function: ease-in;
  opacity: 0;
}

@keyframes fadeIn_softly-anime3 {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}