@charset "UTF-8";

.toast {
  width: initial;
}

/* .nav-bg .nav-link.active {
  background-color: #F4F8FC !important;
  border-bottom-color: #F4F8FC;
}

.nav-bg.tab-content {
  background-color: #F4F8FC;
} */

:root {
  --plyr-color-main: #888;
  --hold-duration: 3.5s;
  --switch-duration: 30s;
  /* 10色 × 3秒 */
  --step-duration: 3s;
  /* 1色ごとの表示時間 */
  --text-dark: #111111;
}

.flcs-changing {
  font-size: clamp(64px, 16vw, 180px);
  background: linear-gradient(90deg, var(--text-dark), var(--text-dark));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.flcs-changing.loaded {
  animation:
    holdBlack var(--hold-duration) steps(1, end) forwards,
    gradientSwitch var(--switch-duration) steps(1, end) infinite;
  animation-delay:
    0s,
    var(--hold-duration);
}

@keyframes holdBlack {

  0%,
  100% {
    background-image: linear-gradient(90deg, #111111, #111111);
  }
}

@keyframes gradientSwitch {
  0% {
    background-image: linear-gradient(90deg, #4338ca, #6366f1);
  }

  10% {
    background-image: linear-gradient(90deg, #0284c7, #38bdf8);
  }

  20% {
    background-image: linear-gradient(90deg, #0f766e, #2dd4bf);
  }

  30% {
    background-image: linear-gradient(90deg, #15803d, #4ade80);
  }

  40% {
    background-image: linear-gradient(90deg, #65a30d, #bef264);
  }

  50% {
    background-image: linear-gradient(90deg, #d97706, #fbbf24);
  }

  60% {
    background-image: linear-gradient(90deg, #ea580c, #fb923c);
  }

  70% {
    background-image: linear-gradient(90deg, #db2777, #f472b6);
  }

  80% {
    background-image: linear-gradient(90deg, #7e22ce, #c084fc);
  }

  90% {
    background-image: linear-gradient(90deg, #4f46e5, #818cf8);
  }

  100% {
    background-image: linear-gradient(90deg, #4338ca, #6366f1);
  }
}

.flcs-changing-wrapper.loaded {
  animation:
    bounceSteps var(--step-duration) ease-out infinite;
  animation-delay:
    var(--hold-duration),
    var(--hold-duration);
}

@keyframes waitStill {

  0%,
  100% {
    transform: translateY(0) scale(1);
  }
}

@keyframes bounceSteps {
  0% {
    transform: translateY(0) scale(1);
  }

  7% {
    transform: translateY(-0.06em) scale(1.018, 0.992);
  }

  15% {
    transform: translateY(0) scale(0.996, 1.006);
  }

  24% {
    transform: translateY(-0.018em) scale(1.004, 0.998);
  }

  34% {
    transform: translateY(0) scale(1);
  }

  50%,
  100% {
    transform: translateY(0) scale(1);
  }
}