@charset "UTF-8";

.down-to-top {
	opacity: 0;
	transform: translateY(20px);
	transition: all 2s;
  transition-delay: .5s;
}
.down-to-top.inview {
	opacity: 1;
	transform: translate(0);
}
.down-to-top_parent .down-to-top_child {
  opacity: 0;
  transform: translateY(20px);
  transition: all 2s;
}
.down-to-top_parent.inview .down-to-top_child {
  opacity: 1;
  transform: translate(0);
}
.down-to-top_parent .down-to-top_child:first-child {
  transition-delay: .5s;
}
.down-to-top_parent .down-to-top_child:nth-child(2) {
  transition-delay: .8s;
}
.down-to-top_parent .down-to-top_child:nth-child(3) {
  transition-delay: .10s;
}
.down-to-top_parent .down-to-top_child:nth-child(4) {
  transition-delay: 1.2s;
}

.left-to-right {
	opacity: 0;
	transform: translateX(-20px);
	transition: all 2s;
  transition-delay: .5s;
}
.left-to-right.inview {
	opacity: 1;
	transform: translate(0);
}
.left-to-right_parent .left-to-right_child {
  opacity: 0;
  transform: translateX(-20px);
  transition: all 2s;
}
.left-to-right_parent.inview .left-to-right_child {
  opacity: 1;
  transform: translate(0);
}
.left-to-right_parent .left-to-right_child:first-child {
  transition-delay: .5s;
}
.left-to-right_parent .left-to-right_child:nth-child(2) {
  transition-delay: .7s;
}
.left-to-right_parent .left-to-right_child:nth-child(3) {
  transition-delay: .9s;
}
.left-to-right_parent .left-to-right_child:nth-child(4) {
  transition-delay: 1.1s;
}

.right-to-left {
	opacity: 0;
	transform: translateX(20px);
	transition: all 2s;
  transition-delay: .5s;
}
.right-to-left.inview {
	opacity: 1;
	transform: translate(0);
}
.left-to-right-curtain {
  -webkit-transition: all .4s ease;
  transition: all .4s ease;
  -webkit-clip-path: inset(0 100% 0 0);
  clip-path: inset(0 100% 0 0);
}
.left-to-right-curtain.inview {
  -webkit-animation: curtain_anim_left 1s cubic-bezier(0.7, 0, 0.17, 1) 0.2s 1 normal both running;
  animation: curtain_anim_left 1s cubic-bezier(0.7, 0, 0.17, 1) 0.2s 1 normal both running;
}
@keyframes curtain_anim_left {
  0% {
    -webkit-clip-path: inset(0 100% 0 0);
    clip-path: inset(0 100% 0 0)
  }
  to {
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0)
  }
}
.right-to-left-curtain {
  -webkit-transition: all .4s ease;
  transition: all .4s ease;
  -webkit-clip-path: inset(0 100% 0 0);
  clip-path: inset(0 100% 0 0);
}
.right-to-left-curtain.inview {
  -webkit-animation: curtain_anim_right 1s cubic-bezier(0.7, 0, 0.17, 1) 0.2s 1 normal both running;
  animation: curtain_anim_right 1s cubic-bezier(0.7, 0, 0.17, 1) 0.2s 1 normal both running;
}
@keyframes curtain_anim_right {
	0% {
		-webkit-clip-path: inset(0 0 0 100%);
		clip-path: inset(0 0 0 100%)
	}
	to {
		-webkit-clip-path: inset(0 0 0 0);
		clip-path: inset(0 0 0 0)
	}
}


/*フェードイン*/
.fade-in {
  opacity: 0;
  transition: all 2s;
  transition-delay: .5s;
}
.fade-in.inview {
  opacity: 1;
}
.fade-in_parent .fade-in_child {
  opacity: 0;
  transition: all 2s;
  transition-delay: .5s;
}
.fade-in_parent.inview .fade-in_child {
  opacity: 1;
}
.fade-in_parent .fade-in_child:first-child {
  transition-delay: .3s;
}
.fade-in_parent .fade-in_child:nth-child(2) {
  transition-delay: .5s;
}
.fade-in_parent .fade-in_child:nth-child(3) {
  transition-delay: .7s;
}
.fade-in_parent .fade-in_child:nth-child(4) {
  transition-delay: .9s;
}

/* グレースケール */
.grayscale {
  filter: grayscale(100%);
  transition: filter 1.0s ease;
  transition-delay: 1.0s;
}

.grayscale.inview {
  filter: grayscale(0%);
}