@charset "UTF-8";
/*//////////PCサイズ///////////*/
/*//////////PCサイズ///////////*/
@media screen and (min-width: 768px) {}
/*//////////SPサイズ///////////*/
/*//////////SPサイズ///////////*/
@media screen and (max-width:767px) {}

/* ==============================
   描画ヒント（共通）
============================== */
.topLeft, .topRight, .topTop, .topBottom,
.leftAnime, .rightAnime, .topAnime, .bottomAnime,
.leftAnimeBig, .rightAnimeBig {
  will-change: opacity, transform;
  backface-visibility: hidden;
}

/* ==============================
   ファーストビュー（自動再生）
   ※ ページロード後に delay クラスで順番制御
============================== */

/* from left */
.topLeft {
  opacity: 0;
  transform: translate3d(-40px, 0, 0);
  animation: kf-fade-left 0.8s ease-in-out both;
}

/* from right */
.topRight {
  opacity: 0;
  transform: translate3d(40px, 0, 0);
  animation: kf-fade-right 0.8s ease-in-out both;
}

/* from top */
.topTop {
  opacity: 0;
  transform: translate3d(0, -50px, 0);
  animation: kf-fade-top 0.8s ease-in-out both;
}

/* from bottom */
.topBottom {
  opacity: 0;
  transform: translate3d(0, 50px, 0);
  animation: kf-fade-bottom 0.8s ease-in-out both;
}

/* ==============================
   スクロール発火（小移動 0.5s）
   ※ .is-inview または .scrollin が付いたら1回だけ再生
============================== */

/* 初期値 */
.leftAnime,
.rightAnime,
.topAnime,
.bottomAnime {
  opacity: 0;
}
.leftAnime   { transform: translate3d(-50px, 0, 0); }
.rightAnime  { transform: translate3d( 50px, 0, 0); }
.topAnime    { transform: translate3d( 0, -50px, 0); }
.bottomAnime { transform: translate3d( 0,  50px, 0); }

/* 発火 */
.leftAnime.is-inview,   .leftAnime.scrollin   { animation: kf-fade-left   0.5s ease-in-out both; }
.rightAnime.is-inview,  .rightAnime.scrollin  { animation: kf-fade-right  0.5s ease-in-out both; }
.topAnime.is-inview,    .topAnime.scrollin    { animation: kf-fade-top    0.5s ease-in-out both; }
.bottomAnime.is-inview, .bottomAnime.scrollin { animation: kf-fade-bottom 0.5s ease-in-out both; }

/* ==============================
   スクロール発火（左右大移動 0.8s）
============================== */
/* ==============================
   スクロール発火（左右大移動 0.8s）
   ※ 距離だけ大きい版
============================== */
.leftAnimeBig,
.rightAnimeBig {
  opacity: 0;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

/* 初期：画面外 */
.leftAnimeBig  { transform: translate3d(-110vw, 0, 0); }
.rightAnimeBig { transform: translate3d( 110vw, 0, 0); }

/* 発火（両クラス対応） */
.leftAnimeBig.is-inview,
.leftAnimeBig.scrollin {
  animation: bigInL 0.8s ease-in-out both;
}
.rightAnimeBig.is-inview,
.rightAnimeBig.scrollin {
  animation: bigInR 0.8s ease-in-out both;
}

/* キーフレーム */
@keyframes bigInL {
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes bigInR {
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
/* ==============================
   キーフレーム
============================== */
@keyframes kf-fade-left {
  from { opacity: 0; transform: translate3d(-40px, 0, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes kf-fade-right {
  from { opacity: 0; transform: translate3d(40px, 0, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes kf-fade-top {
  from { opacity: 0; transform: translate3d(0, -50px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes kf-fade-bottom {
  from { opacity: 0; transform: translate3d(0, 50px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}


/* ==============================
   遅延ユーティリティ（0.1s〜3.5s）
============================== */
.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; }
.delay21 { animation-delay: 2.1s; }
.delay22 { animation-delay: 2.2s; }
.delay23 { animation-delay: 2.3s; }
.delay24 { animation-delay: 2.4s; }
.delay25 { animation-delay: 2.5s; }
.delay26 { animation-delay: 2.6s; }
.delay27 { animation-delay: 2.7s; }
.delay28 { animation-delay: 2.8s; }
.delay29 { animation-delay: 2.9s; }
.delay30 { animation-delay: 3.5s; }