@charset "utf-8";

/*==================================================
    ■ fv_move start
==================================================*/
/* ファーストビューでの動き */
.fv_move {
    animation-name:fadeUpAnime;
    animation-duration:3s;
    animation-fill-mode:forwards;
    opacity: 0;
}
@keyframes fadeUpAnime{
  from {
    opacity: 0;
    transform: translate(-100px, -100px);
  }
  to {
    opacity: 1;
    transform: translateY(-10px);
  }
}

/*==================================================
    ■ obj start
==================================================*/

/* =============================
   初期状態
============================= */
.obj {
    opacity: 0;
}

/* =====================================================
   共通アニメーション基本設定
===================================================== */
.obj.is-obj-show {
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

/* =====================================================
   右から（フェードイン）
===================================================== */
.obj_right01 { transform: translateX(10px); }
.obj_right02 { transform: translateX(20px); }
.obj_right03 { transform: translateX(30px); }
.obj_right04 { transform: translateX(40px); }
.obj_right05 { transform: translateX(50px); }
.obj_right06 { transform: translateX(60px); }
.obj_right07 { transform: translateX(70px); }
.obj_right08 { transform: translateX(80px); }
.obj_right09 { transform: translateX(90px); }
.obj_right10 { transform: translateX(100px); }

.obj_right01.is-obj-show,
.obj_right02.is-obj-show,
.obj_right03.is-obj-show,
.obj_right04.is-obj-show,
.obj_right05.is-obj-show,
.obj_right06.is-obj-show,
.obj_right07.is-obj-show,
.obj_right08.is-obj-show,
.obj_right09.is-obj-show,
.obj_right10.is-obj-show {
  animation-name: fadeRight;
}

@keyframes fadeRight {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* =====================================================
   左から（フェードイン）
===================================================== */
.obj_left01 { transform: translateX(-10px); }
.obj_left02 { transform: translateX(-20px); }
.obj_left03 { transform: translateX(-30px); }
.obj_left04 { transform: translateX(-40px); }
.obj_left05 { transform: translateX(-50px); }
.obj_left06 { transform: translateX(-60px); }
.obj_left07 { transform: translateX(-70px); }
.obj_left08 { transform: translateX(-80px); }
.obj_left09 { transform: translateX(-90px); }
.obj_left10 { transform: translateX(-100px); }

.obj_left01.is-obj-show,
.obj_left02.is-obj-show,
.obj_left03.is-obj-show,
.obj_left04.is-obj-show,
.obj_left05.is-obj-show,
.obj_left06.is-obj-show,
.obj_left07.is-obj-show,
.obj_left08.is-obj-show,
.obj_left09.is-obj-show,
.obj_left10.is-obj-show {
  animation-name: fadeLeft;
}

@keyframes fadeLeft {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* =====================================================
   下から（フェードイン）
===================================================== */
.obj_up01 { transform: translateY(10px); }
.obj_up02 { transform: translateY(20px); }
.obj_up03 { transform: translateY(30px); }
.obj_up04 { transform: translateY(40px); }
.obj_up05 { transform: translateY(50px); }
.obj_up06 { transform: translateY(60px); }
.obj_up07 { transform: translateY(70px); }
.obj_up08 { transform: translateY(80px); }
.obj_up09 { transform: translateY(90px); }
.obj_up10 { transform: translateY(100px); }

.obj_up01.is-obj-show,
.obj_up02.is-obj-show,
.obj_up03.is-obj-show,
.obj_up04.is-obj-show,
.obj_up05.is-obj-show,
.obj_up06.is-obj-show,
.obj_up07.is-obj-show,
.obj_up08.is-obj-show,
.obj_up09.is-obj-show,
.obj_up10.is-obj-show {
  animation-name: fadeUp;
}

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

/* =====================================================
   上から（フェードイン）
===================================================== */
.obj_down01 { transform: translateY(-10px); }
.obj_down02 { transform: translateY(-20px); }
.obj_down03 { transform: translateY(-30px); }
.obj_down04 { transform: translateY(-40px); }
.obj_down05 { transform: translateY(-50px); }
.obj_down06 { transform: translateY(-60px); }
.obj_down07 { transform: translateY(-70px); }
.obj_down08 { transform: translateY(-80px); }
.obj_down09 { transform: translateY(-90px); }
.obj_down10 { transform: translateY(-100px); }

.obj_down01.is-obj-show,
.obj_down02.is-obj-show,
.obj_down03.is-obj-show,
.obj_down04.is-obj-show,
.obj_down05.is-obj-show,
.obj_down06.is-obj-show,
.obj_down07.is-obj-show,
.obj_down08.is-obj-show,
.obj_down09.is-obj-show,
.obj_down10.is-obj-show {
  animation-name: fadeDown;
}

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

/* =====================================================
   バウンド
===================================================== */
.obj_bond01,
.obj_bond02,
.obj_bond03 {
    opacity: 1;
    transform: scale(0);
}

.obj_bond01.is-obj-show {
  animation-name: bounceScale01;
  animation-duration: 0.45s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

.obj_bond02.is-obj-show {
  animation-name: bounceScale02;
  animation-duration: 0.55s;
  animation-timing-function: cubic-bezier(.34,1.4,.64,1);
  animation-fill-mode: forwards;
}

.obj_bond03.is-obj-show {
  animation-name: bounceScale03;
  animation-duration: 0.6s;
  animation-timing-function: cubic-bezier(.34,1.8,.64,1);
  animation-fill-mode: forwards;
}


/* =============================
   バウンド keyframes
============================= */

/* 控えめ */
@keyframes bounceScale01 {
  0% {
    transform: scale(0);
  }
  70% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

/* 標準 */
@keyframes bounceScale02 {
  0% {
    transform: scale(0);
  }
  60% {
    transform: scale(1.15);
  }
  80% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}

/* 強め */
@keyframes bounceScale03 {
  0% {
    transform: scale(0);
  }
  55% {
    transform: scale(1.25);
  }
  75% {
    transform: scale(0.9);
  }
  90% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

/* =====================================================
   遅延クラス（0.1〜2.0秒）
===================================================== */
.delay01 { animation-delay: 0.1s; }
.delay02 { animation-delay: 0.2s; }
.delay03 { animation-delay: 0.3s; }
.delay04 { animation-delay: 0.4s; }
.delay05 { animation-delay: 0.5s; }
.delay06 { animation-delay: 0.6s; }
.delay07 { animation-delay: 0.7s; }
.delay08 { animation-delay: 0.8s; }
.delay09 { animation-delay: 0.9s; }
.delay10 { animation-delay: 1.0s; }
.delay11 { animation-delay: 1.1s; }
.delay12 { animation-delay: 1.2s; }
.delay13 { animation-delay: 1.3s; }
.delay14 { animation-delay: 1.4s; }
.delay15 { animation-delay: 1.5s; }
.delay16 { animation-delay: 1.6s; }
.delay17 { animation-delay: 1.7s; }
.delay18 { animation-delay: 1.8s; }
.delay19 { animation-delay: 1.9s; }
.delay20 { animation-delay: 2.0s; }