.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);
}