@charset "UTF-8";
/* ---------------------------------------------------------------------------
  ★ロードアニメーション
--------------------------------------------------------------------------- */
.fade-in {
  opacity: 0;
  /* 初期状態では透明にする */
  transform: translateY(-20px);
  /* 下から100%上昇させる */
  transition: opacity 0.6s ease, transform 0.6s ease;
  /* アニメーションのプロパティとタイミングを設定 */
}

.fade-in.active {
  opacity: 1;
  /* フェードイン時に不透明にする */
  transform: translateY(0);
  /* 上昇を停止して表示 */
}

.d0 {
  transition-delay: 0.1s;
}

.d01 {
  transition-delay: 0.2s;
}

.d02 {
  transition-delay: 0.4s;
}

.d03 {
  transition-delay: 0.6s;
}

.d04 {
  transition-delay: 0.8s;
}

.d05 {
  transition-delay: 1s;
}

.d06 {
  transition-delay: 1.2s;
}

.d07 {
  transition-delay: 1.4s;
}

.d08 {
  transition-delay: 1.5s;
}

.d09 {
  transition-delay: 1.6s;
}

.d10 {
  transition-delay: 1.7s;
}

.d11 {
  transition-delay: 1.8s;
}

.d12 {
  transition-delay: 1.9s;
}

/* ---------------------------------------------------------------------------
    ★スクロールアニメーション
  --------------------------------------------------------------------------- */
.elem {
  position: relative;
}

.f01,
.f02,
.f03,
.f04,
.f05,
.f06,
.f07,
.f08,
.f09,
.f010,
.f011,
.f012,
.f013,
.f014,
.f015,
.f016,
.f_b01,
.f_b02,
.f_b03 {
  opacity: 0;
}

.isAnimate .f01,
.isAnimate .f02,
.isAnimate .f03,
.isAnimate .f04,
.isAnimate .f05,
.isAnimate .f06,
.isAnimate .f07,
.isAnimate .f08,
.isAnimate .f09,
.isAnimate .f010,
.isAnimate .f011,
.isAnimate .f012,
.isAnimate .f013,
.isAnimate .f014,
.isAnimate .f015,
.isAnimate .f016 {
  animation: fadeDown 0.6s cubic-bezier(0.43, 0.05, 0.47, 1.03) forwards;
}

.isAnimate .f_b01,
.isAnimate .f_b02,
.isAnimate .f_b03 {
  animation: fadeUp 0.2s cubic-bezier(0.43, 0.05, 0.47, 1.03) forwards;
}

.isAnimate .f_b01 {
  animation-delay: 1s;
}

.isAnimate .f_b02 {
  animation-delay: 0.1s;
}

.isAnimate .f_b03 {
  animation-delay: 0.5s;
}

.isAnimate .f01 {
  animation-delay: 0.1s;
}

.isAnimate .f02 {
  animation-delay: 0.2s;
}

.isAnimate .f03 {
  animation-delay: 0.3s;
}

.isAnimate .f04 {
  animation-delay: 0.4s;
}

.isAnimate .f05 {
  animation-delay: 0.5s;
}

.isAnimate .f06 {
  animation-delay: 0.6s;
}

.isAnimate .f07 {
  animation-delay: 0.7s;
}

.isAnimate .f08 {
  animation-delay: 0.8s;
}

.isAnimate .f09 {
  animation-delay: 0.9s;
}

.isAnimate .f010 {
  animation-delay: 1s;
}

.isAnimate .f011 {
  animation-delay: 1.1s;
}

.isAnimate .f012 {
  animation-delay: 1.2s;
}

.isAnimate .f013 {
  animation-delay: 1.3s;
}

.isAnimate .f014 {
  animation-delay: 1.4s;
}

.isAnimate .f015 {
  animation-delay: 1.5s;
}

.isAnimate .f016 {
  animation-delay: 1.6s;
}

@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translate(0px, 40px);
  }
  100% {
    opacity: 1;
    transform: translate(0px, 0px);
  }
}
@keyframes fadeDown {
  0% {
    opacity: 0;
    transform: translate(0px, -40px);
  }
  100% {
    opacity: 1;
    transform: translate(0px, 0px);
  }
}
/* ---------------------------------------------------------------------------
  ★画像が左から右に現れる
--------------------------------------------------------------------------- */
.img-wrap {
  overflow: hidden;
  position: relative;
}

.img-wrap::before {
  animation: img-wrap 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  animation-fill-mode: both;
  background: #fff;
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

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