@charset "utf-8";

/************************

左から表示

************************/

.img_left_box {
  overflow: hidden;
  position: relative;
}

.img_left_box::before {
  background:  linear-gradient(90deg,rgba(47, 166, 181, 1) 0%, rgba(151, 221, 245, 1) 100%);
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
  transform: translateX(0); /* 初期位置 */
}

.img_left_box.animate::before {
  animation: img-wrap 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes img-wrap {
  100% {
    transform: translateX(100%);
  }
}

/************************

上からフェードイン

************************/
.img_box {
  opacity: 0; /* 初期は非表示 */
  transform: translateY(-100px); /* 初期位置を上にずらす */
}

.img_box.animate {
  animation: fade-slide-in 0.5s ease-out forwards;
}

@keyframes fade-slide-in {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}