@charset "utf-8";
/*-------anime------*/
/* 速度・イージング・振れ幅・カーテン色は :root の --a-* で案件ごとに調整する
   （未定義でもフォールバック値で動く） */

.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(--a-curtain, #fff);
  top: 0;
  z-index: 5;
  transition: var(--a-curtain-dur, 0.8s) var(--a-ease, ease);
  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(var(--a-shift, 15%));
  transition:
    opacity var(--a-dur, 0.3s) var(--a-ease, ease),
    transform var(--a-dur, 0.3s) var(--a-ease, ease);
}
.fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/*-------無限に横へ流れる帯（文字でもカードでも使える）------*/
/* 同じ並びを2セット入れておき、1セットぶん（＝トラック幅の50%）ずらすと繋ぎ目なくループする。
   アイテム同士の間隔は gap ではなく padding-right で取る。
   gap だと「最後と最初の隙間」だけ半分ずれて、繋ぎ目で飛ぶため。
   速さは --mq-dur、間隔は --mq-gap で調整する。 */
.c-marquee {
  width: 100%;
  overflow: hidden;
}
.c-marquee__track {
  display: flex;
  align-items: flex-start;
  width: max-content;
  animation: marquee-left var(--mq-dur, 40s) linear infinite;
}
.c-marquee__item {
  flex-shrink: 0;
  padding-right: var(--mq-gap, 0.4em);
}
@keyframes marquee-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
/* 読みたいときは止められるように */
.c-marquee:hover .c-marquee__track {
  animation-play-state: paused;
}

/*-------遅延（続けて出したいときに付ける）------*/
.a-d1 {
  transition-delay: 0.12s;
}
.a-d2 {
  transition-delay: 0.24s;
}
.a-d3 {
  transition-delay: 0.36s;
}
.a-d4 {
  transition-delay: 0.48s;
}

/*-------動きを減らす設定の環境では出現だけさせる------*/
@media (prefers-reduced-motion: reduce) {
  .fade-up,
  .fade-up.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .js-split span,
  .js-split.is-active span {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .a-ct::after {
    display: none;
  }
  .c-marquee__track {
    animation: none;
  }
}