.is-pc {
  display: none;
}

@media screen and (min-width: 768px) {
  .is-pc {
    display: block;
  }
}

.is-sp {
  display: block;
}

@media screen and (min-width: 768px) {
  .is-sp {
    display: none;
  }
}

.is-fadeIn {
  opacity: 0;
  transition: opacity 0.6s ease-out;
}

.is-fadeIn.is-active {
  opacity: 1;
}

.is-fadeUp {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.is-fadeUp.is-active {
  opacity: 1;
  transform: translateY(0);
}

.is-fadeRight {
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.is-fadeRight.is-active {
  opacity: 1;
  transform: translateX(0);
}

.is-fadeLeft {
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.is-fadeLeft.is-active {
  opacity: 1;
  transform: translateX(0);
}

.is-fadeDown {
  opacity: 0;
  transform: translateY(-24px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.is-fadeDown.is-active {
  opacity: 1;
  transform: translateY(0);
}

.is-scaleIn {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.is-scaleIn.is-active {
  opacity: 1;
  transform: scale(1);
}

.is-scrub {
  --scrub-progress: 0;
  opacity: var(--scrub-progress);
  transition: none;
}

.is-scrub[data-anim=fadeUp] {
  transform: translateY(calc(24px * (1 - var(--scrub-progress))));
}

.is-scrub[data-anim=fadeDown] {
  transform: translateY(calc(-24px * (1 - var(--scrub-progress))));
}

.is-scrub[data-anim=fadeRight] {
  transform: translateX(calc(-24px * (1 - var(--scrub-progress))));
}

.is-scrub[data-anim=fadeLeft] {
  transform: translateX(calc(24px * (1 - var(--scrub-progress))));
}

.is-scrub[data-anim=scaleIn] {
  transform: scale(calc(0.9 + 0.1 * var(--scrub-progress)));
}