/* カテゴリトップ共通Motion。JSが .gv-motion と各data属性を付与した場合だけ初期非表示にする。 */
.gv-motion .gv-motion-char {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: .06em;
  margin-bottom: -.06em;
}

.gv-motion .gv-motion-char > i {
  display: inline-block;
  font-style: normal;
  transform: translate3d(0, 112%, 0) rotate(8deg);
  transform-origin: left bottom;
  transition: transform var(--gv-motion-char-duration) var(--gv-ease-expressive);
  transition-delay: calc(var(--motion-index) * var(--gv-motion-char-stagger));
}

.gv-motion [data-motion-split].is-in .gv-motion-char > i {
  transform: none;
}

.gv-motion [data-motion-fade] {
  opacity: 0;
  transform: translateY(var(--gv-motion-fade-distance));
  transition:
    opacity var(--gv-motion-fade-duration) var(--gv-ease-expressive) calc(var(--gv-motion-fade-delay) + var(--motion-delay, 0s)),
    transform var(--gv-motion-lift-duration) var(--gv-ease-expressive) calc(var(--gv-motion-fade-delay) + var(--motion-delay, 0s));
}

.gv-motion [data-motion-fade].is-in {
  opacity: 1;
  transform: none;
}

.gv-motion [data-parallax] {
  will-change: translate;
}

@media (prefers-reduced-motion: reduce) {
  .gv-motion .gv-motion-char > i,
  .gv-motion [data-motion-fade] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .gv-motion [data-parallax] {
    translate: none !important;
  }
}


.gv-surface-motion{will-change:clip-path}
@media(prefers-reduced-motion:reduce){.gv-surface-motion{clip-path:none!important;will-change:auto}}