@charset "utf-8";
/*-------anime------*/
.js-split span {
  opacity: 0;
  display: inline-block;
  transform: translateY(20px);
}

.js-split.is-active span {
  animation: fadeUp 0.6s forwards;
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.a-ct {
  position: relative;
  z-index: 2;
  overflow: hidden;
}
.a-ct::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  display: inline-block;
  background: var(--c-black);
  top: 0;
  z-index: 5;
  transition: 0.8s;
  transition-delay: 0.4s;
}
.a-left::after {
  left: 0;
}
.a-left.is-visible::after {
  left: -100vw;
}
.a-right::after {
  right: 0;
}
.a-right.is-visible::after {
  right: -100vw;
}
.fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.8s ease-out,
    transform 0.8s ease-out;
  will-change: opacity, transform;
}
.fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* 横並びの要素を少しずつ遅らせる */
.a-delay1 {
  transition-delay: 0.12s;
}
.a-delay2 {
  transition-delay: 0.24s;
}
.a-delay3 {
  transition-delay: 0.36s;
}
/* 動きを抑える設定の人には、動かさずそのまま見せる */
@media (prefers-reduced-motion: reduce) {
  .fade-up,
  .fade-up.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .js-split span {
    opacity: 1;
    transform: none;
    animation: none !important;
  }
  .a-ct::after {
    display: none;
  }
}

/*-------背景の星のきらめき------*/
/* レイヤーごとに違うリズムで明滅させ、粒が個別に瞬いて見えるようにする */
@keyframes twinkle-s {
  0%,
  100% {
    opacity: 0.35;
  }
  40% {
    opacity: 1;
  }
  70% {
    opacity: 0.55;
  }
}
@keyframes twinkle-m {
  0%,
  100% {
    opacity: 0.9;
  }
  35% {
    opacity: 0.3;
  }
  65% {
    opacity: 1;
  }
}
@keyframes twinkle-l {
  0%,
  100% {
    opacity: 0.5;
  }
  25% {
    opacity: 1;
  }
  60% {
    opacity: 0.25;
  }
  85% {
    opacity: 0.95;
  }
}
@media (prefers-reduced-motion: reduce) {
  .l-bg-stars__layer {
    animation: none;
    opacity: 0.8;
  }
}

/*-------実績紹介の無限ループ（マーキー）------*/
/* 同じ並びを2セット並べ、1セットぶん（-50%）流して先頭に戻す＝継ぎ目なし。
   gap ではなく margin-right を使うのは、-50% がちょうど1セットぶんになるようにするため。 */
.c-marquee {
  display: flex;
  width: max-content;
  animation: marquee calc(var(--marquee-items, 4) * 9s) linear infinite;
}
.c-marquee:hover {
  /* リンクを押しやすいようホバー中は止める */
  animation-play-state: paused;
}
.c-marquee__item {
  flex: 0 0 auto;
  width: clamp(180px, var(--px-330), 330px);
  margin-right: clamp(16px, var(--px-40), 40px);
}
@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .c-marquee {
    animation: none;
  }
}

/*-------ヘッダー固定時のスライドダウン------*/
@keyframes slideDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}