

.fade-up {
 
  /*width: fit-content;*/
  opacity: 0;
  -webkit-mask-image: linear-gradient(
  to bottom,
  #000 0%,
  #000 60%,
  transparent 70%,
  transparent 100%
);

mask-image: linear-gradient(
  to bottom,
  #000 0%,
  #000 60%,
  transparent 70%,
  transparent 100%
);
  -webkit-mask-size: 100% 300%;
  mask-size: 100% 300%;
  -webkit-mask-position: 0 100%;
  mask-position: 0 100%;
  transform: translateY(30px) scale(1.0);
  transition: all 1.75s ease-out;
  will-change: opacity, transform, mask-position;
}

.fade-up.is-visible {
  opacity: 1;
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
  transform: translateY(0) scale(1);
}


/*左上から右下*/
.fade-diagonal {
  /*width: fit-content;*/
  opacity: 0;
  -webkit-mask-image: linear-gradient(
  170deg,
  #000 0%,
  #000 60%,
  transparent 70%,
  transparent 100%
);

mask-image: linear-gradient(
  170deg,
  #000 0%,
  #000 60%,
  transparent 70%,
  transparent 100%
);
  -webkit-mask-size: 100% 300%;
  mask-size: 100% 300%;
  -webkit-mask-position: 0 100%;
  mask-position: 0 100%;
  transform: translateY(0px) scale(1.0);
  transition: all 1.75s ease-out;
  will-change: opacity, transform, mask-position;
}

.fade-diagonal.is-visible {
  opacity: 1;
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
  transform: translateY(0) scale(1);
}


/*文字を1文字ずつ表示*/
.fade-text .char{
	display: inline-block;
	opacity: 0;
	transform: translateY(20px);
}

.fade-text.show .char{
	animation: fadeUp 1s forwards;
}



.fade-text .txt-img{
	display: inline-block;
	vertical-align: middle;
}

.fade-text .txt-img img{
	display: block;
}

/*時間差*/
.fade-up-list li{
	opacity: 0;
	transform: translateY(20px);
}

.fade-up-list.is-visible li{
	animation: fadeUp .6s ease forwards;
}

.fade-up-list.is-visible li:nth-child(1){ animation-delay: 1.1s; }
.fade-up-list.is-visible li:nth-child(2){ animation-delay: 1.3s; }
.fade-up-list.is-visible li:nth-child(3){ animation-delay: 1.5s; }
.fade-up-list.is-visible li:nth-child(4){ animation-delay: 1.7s; }




@keyframes fadeUp{
	to{
		opacity: 1;
		transform: translateY(0);
	}
}