/* ===============================================
# アニメーション
=============================================== */

.js-fade-up {
  --fade-up-duration: 0.5s;
  --fade-up-easing: ease-in-out;
  --fade-up-translate-y: 30px;
    opacity: 0;
    translate: 0 var(--fade-up-translate-y);
    transition: opacity var(--fade-up-duration) var(--fade-up-easing),
      translate var(--fade-up-duration) var(--fade-up-easing);

  &.is-active {
    opacity: 1;
    translate: 0 0;
  }
}

@media (min-width: 768px) {
  .js-fade-up-pc {
    --fade-up-duration: 0.5s;
    --fade-up-easing: ease-in-out;
    --fade-up-translate-y: 30px;
      opacity: 0;
      translate: 0 var(--fade-up-translate-y);
      transition: opacity var(--fade-up-duration) var(--fade-up-easing),
        translate var(--fade-up-duration) var(--fade-up-easing);
    &.is-active {
      opacity: 1;
      translate: 0 0;
    }
  }
}

.js-slide-left {
  --slide-duration: 0.8s;
  --slide-easing: cubic-bezier(.06,.09,.43,.98);
  --slide-translate-x: -100%;
  overflow: hidden;

  & > * {
    translate: var(--slide-translate-x) 0;
    transition: translate var(--slide-duration) var(--slide-easing);
  }

  &.is-active > * {
    translate: 0 0;
  }
}

.js-slide-right {
  --slide-duration: 0.8s;
  --slide-easing: cubic-bezier(.06,.09,.43,.98);
  --slide-translate-x: 100%;
  overflow: hidden;

  & > * {
    translate: var(--slide-translate-x) 0;
    transition: translate var(--slide-duration) var(--slide-easing);
  }

  &.is-active > * {
    translate: 0 0;
  }
}

@media (max-width: 767px) {
  .js-slide-right {
    --slide-translate-x: -100%;
  }
}


@media (min-width: 768px) {
  .js-case-cards {
    --case-cards-duration: 0.5s;
    --case-cards-delay-step: 0.15s;
    --case-cards-easing: ease-in-out;
    --case-cards-translate-y: 50px;
  
    & > * {
      opacity: 0;
      translate: 0 var(--case-cards-translate-y);
      transition: opacity var(--case-cards-duration) var(--case-cards-easing),
        translate var(--case-cards-duration) var(--case-cards-easing);
    }
  
    & > *:nth-child(2) {
      transition-delay: var(--case-cards-delay-step);
    }
  
    & > *:nth-child(3) {
      transition-delay: calc(var(--case-cards-delay-step) * 2);
    }
  
    &.is-active > * {
      opacity: 1;
      translate: 0 0;
    }
  }
}

.top-recode__header.js-slide-right {
  --slide-duration: 0.65s;
  width: fit-content;
}

.top-rebirth__header.js-slide-left {
  --slide-duration: 0.75s;
}