@charset "UTF-8";
/* =====================================
  Scroll Animation
===================================== */

/* 帯で隠してから表示 */
.mask-reveal {
  position: relative;
  overflow: hidden;
}

.mask-reveal__content {
  display: block;
  opacity: 0;
  transform: translateY(18px);
}

.mask-reveal::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: var(--bg-black);
  transform: translateX(0);
  pointer-events: none;
}
.ph.mask-reveal::before {
    background: var(--bg-main);
}

.mask-reveal.mask-green::before {
  background: var(--bg-main);
}

.mask-reveal.mask-white::before {
  background: var(--bg-white);
}

.mask-reveal.is-active::before {
  animation: fcMaskOut 0.85s cubic-bezier(.77, 0, .175, 1) forwards;
}

.mask-reveal.is-active .mask-reveal__content {
  animation: fcContentIn 0.55s ease forwards;
  animation-delay: 0.38s;
}

@keyframes fcMaskOut {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(105%);
  }
}

@keyframes fcContentIn {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}


/* 下からフェードアップ */
.js-scroll-fade {
  opacity: 0;
  transform: translateY(28px);
}

.js-scroll-fade.is-active {
  animation: fcFadeUp 0.75s cubic-bezier(.22, 1, .36, 1) forwards;
}

@keyframes fcFadeUp {
  0% {
    opacity: 0;
    transform: translateY(28px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}


/* アイコン向け：ポップ表示 */
.js-scroll-pop {
  opacity: 0;
  transform: translateY(18px) scale(.86);
}

.js-scroll-pop.is-active {
  animation: fcPopIn 0.65s cubic-bezier(.18, 1.25, .4, 1) forwards;
}

@keyframes fcPopIn {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(.86);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}


/* 複数要素を順番に表示 */
.js-scroll-stagger .js-stagger-item {
  opacity: 0;
  transform: translateY(1rem);
}

.js-scroll-stagger.is-active .js-stagger-item {
  animation: fcFadeUp 1s cubic-bezier(.22, 1, .36, 1) forwards;
}

.js-scroll-stagger.is-active .js-stagger-item:nth-child(1) {
  animation-delay: 0s;
}

.js-scroll-stagger.is-active .js-stagger-item:nth-child(2) {
  animation-delay: .2s;
}

.js-scroll-stagger.is-active .js-stagger-item:nth-child(3) {
  animation-delay: .4s;
}

.js-scroll-stagger.is-active .js-stagger-item:nth-child(4) {
  animation-delay: .6s;
}

.js-scroll-stagger.is-active .js-stagger-item:nth-child(5) {
  animation-delay: .8s;
}


/* 動きを苦手にする人向け */
@media (prefers-reduced-motion: reduce) {
  .mask-reveal::before {
    display: none;
  }

  .mask-reveal__content,
  .js-scroll-fade,
  .js-scroll-pop,
  .js-scroll-stagger .js-stagger-item {
    opacity: 1;
    transform: none;
    animation: none !important;
  }
}







@media screen and (max-width: 1179px) {






}
@media screen and (max-width: 1023px) {





}
@media screen and (max-width: 767px) {





}
@media screen and (max-width: 460px) {





}