@charset "utf-8";
/* CSS Document */

 /* 3 つのサンプル共通 */
.sample {
  overflow: hidden;
  position: relative;
}

.sample img {
  display: block;
  height: auto;
  width: 100%;
}

/* 1 つ目のサンプル */
.sample-one.sample-animation img {
  animation: sample-one 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes sample-one {
  0% {
    opacity: 0;
    transform: scale(1.2) translateY(24px);
  }

  32% {
    opacity: 0;
    transform: scale(1.2) translateY(24px);
  }
}

/* 2 つ目のサンプル */
.sample-second.sample-animation {
  animation: sample-second-img 2s cubic-bezier(0.4, 0, 0.2, 1);
}

.sample-second.sample-animation::before {
  animation: sample-second-before 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  background: #F4F3EC;
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

@keyframes sample-second-img {
  0% {
    opacity: 0;
  }
}

@keyframes sample-second-before {
  100% {
    transform: translateX(100%);
  }
}

/* 3 つ目のサンプル */
.sample-third.sample-animation::before,
.sample-third.sample-animation::after {
  animation: 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  background: #fff;
  bottom: 0;
  content: '';
  pointer-events: none;
  position: absolute;
  top: 0;
  z-index: 1;
}

.sample-third.sample-animation::before {
  animation-name: sample-third-before;
  left: 0;
  right: 50%;
}

.sample-third.sample-animation::after {
  animation-name: sample-third-after;
  left: 50%;
  right: 0;
}

@keyframes sample-third-before {
  100% {
    transform: translateY(100%);
  }
}

@keyframes sample-third-after {
  100% {
    transform: translateY(-100%);
  }
}