@charset "UTF-8";

/* ==================================================
  アニメーション共通ベース
================================================== */

/* アニメーション対象に必須で付けるクラス */
.c-anim,
.c-anim-load { 
  opacity: 0;
}

/* スクロールなどで発火した状態 */
.c-anim.is-active,
.c-anim-load.is-active {
  opacity: 1;
}

/* ==================================================
  フェード系アニメーション
================================================== */

/* 下からフェードイン */
.c-fadeUp {
  transform: translateY(40px);
  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
}

/* 表示状態 */
.c-fadeUp.is-active {
  transform: translateY(0);
}

/* 左からフェードイン */
.c-fadeInLeft {
  transform: translateX(-40px);
  transition:
    opacity 1.1s cubic-bezier(0.74, 0, 0.24, 0.99),
    transform 1.1s cubic-bezier(0.74, 0, 0.24, 0.99);
}

/* 右からフェードイン */
.c-fadeInRight {
  transform: translateX(40px);
  transition:
    opacity 1.1s cubic-bezier(0.74, 0, 0.24, 0.99),
    transform 1.1s cubic-bezier(0.74, 0, 0.24, 0.99);
}

/* 表示状態（左右共通） */
.c-fadeInLeft.is-active,
.c-fadeInRight.is-active {
  transform: translateX(0);
}

/* ==============================
  スライド
============================== */

/* 左からスライドイン */
.c-slideInLeft {
  transform: translateX(-200px);
  transition: transform 0.8s;
}

/* 右からスライドイン */
.c-slideInRight {
  transform: translateX(200px);
  transition: transform 0.8s;
}

/* 表示状態（左右共通） */
.c-slideInLeft.is-active,
.c-slideInRight.is-active {
  transform: translateX(0);
}


/* ==================================================
  擬似要素スライドアニメーション
================================================== */

/* 擬似要素を右側に待機させる */
.c-slidePseudo::before,
.c-slidePseudo::after {
  transform: translateX(120%);
  transition:
    transform 1.1s cubic-bezier(0.74, 0, 0.24, 0.99);
}

/* 表示状態 */
.c-slidePseudo.is-active::before,
.c-slidePseudo.is-active::after {
  transform: translateX(0);
}

/* before を先に表示 */
.c-slidePseudo.is-active::before {
  transition-delay: 0s;
}

/* after を少し遅らせて表示 */
.c-slidePseudo.is-active::after {
  transition-delay: 0.25s;
}

/* 擬似要素を左側に待機させる */
.c-slidePseudoLeft::before,
.c-slidePseudoLeft::after {
  transform: translateX(-120%);
  transition:
    transform 1.1s cubic-bezier(0.74, 0, 0.24, 0.99);
}

/* 表示状態 */
.c-slidePseudoLeft.is-active::before,
.c-slidePseudoLeft.is-active::after {
  transform: translateX(0);
}

/* before を先に表示 */
.c-slidePseudoLeft.is-active::before {
  transition-delay: 0s;
}

/* after を少し遅らせて表示 */
.c-slidePseudoLeft.is-active::after {
  transition-delay: 0.25s;
}

/* ==================================================
  クリップリビール（テキストなど）
================================================== */

/* 非表示状態（右からクリップ） */
.c-clipReveal {
  overflow: hidden;
  clip-path: inset(0 100% 0 0);
  transition:
    clip-path 1.1s cubic-bezier(0.74, 0, 0.24, 0.99);
}

/* 表示状態 */
.c-clipReveal.is-active {
  clip-path: inset(0 0 0 0);
}

/* 子要素（span）も同様にクリップ */
.c-clipReveal span {
  display: block;
  clip-path: inset(0 100% 0 0);
  transition:
    clip-path 1.1s cubic-bezier(0.74, 0, 0.24, 0.99);
}

/* span を少し遅らせて表示 */
.c-clipReveal.is-active span {
  clip-path: inset(0 0 0 0);
  transition-delay: 0.15s;
}

/* ==================================================
  スケールアップアニメーション
================================================== */

/* 初期状態 */
.c-scaleUp {
  transform: scale(0.8);
  transition:
    transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55),
    opacity 0.5s ease;
}

/* 表示状態 */
.c-scaleUp.is-active {
  transform: scale(1);
}

/* バウンス風（アップして戻る） */
@keyframes scaleUpBounce {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.15); }
  80%  { transform: scale(0.98); }
  100% { transform: scale(1); }
}

.c-scaleUpBounce {
  transform: scale(1);
}

/* 表示状態でバウンスさせる */
.c-scaleUpBounce.is-active {
  animation: scaleUpBounce 0.6s cubic-bezier(0.74, 0, 0.24, 0.99) forwards;
}

/* ==================================================
  ディレイ調整用ユーティリティ
================================================== */

.c-delay-1 { transition-delay: .15s !important; }

.c-delay-2 { transition-delay: .3s !important; }

.c-delay-3 { transition-delay: .45s !important; }

.c-delay-4 { transition-delay: .6s !important; }

@media (min-width: 40em) {
  .c-delay--md-1 { transition-delay: .15s !important; }

  .c-delay--md-2 { transition-delay: .3s !important; }

  .c-delay--md-3 { transition-delay: .45s !important; }
  
  .c-delay--md-4 { transition-delay: .6s !important; }
}