@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: #fff;
  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(40px);
  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
}
.fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* 連続要素のずらし表示（fade-up と併用） */
.fade-up.delay-1 {
  transition-delay: 0.15s;
}
.fade-up.delay-2 {
  transition-delay: 0.3s;
}
.fade-up.delay-3 {
  transition-delay: 0.45s;
}
.fade-up.delay-4 {
  transition-delay: 0.6s;
}
.fade-up.delay-5 {
  transition-delay: 0.75s;
}
.fade-up.delay-6 {
  transition-delay: 0.9s;
}

/* =====================================================
  GALLERY：無限ループの横スライド（CSSのみ）
  ・.p-gallery__list を2セット並べ、1セット分（＝50%）動かして先頭に戻す
  ・アイテムの間隔は gap ではなく margin-right で取る
    （gap だと2セットの継ぎ目だけ隙間がずれて、ループ時にガタつくため）
===================================================== */
.p-gallery {
  overflow: hidden;
  padding-block: clamp(40px, 5.5556vw, 80px);
}
.p-gallery__track {
  display: flex;
  width: max-content;
  animation: gallery-loop 60s linear infinite;
}
.p-gallery__list {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}
.p-gallery__item {
  flex-shrink: 0;
  width: clamp(200px, 20.8333vw, 300px); /* 300 */
  margin-right: clamp(12px, 1.1111vw, 16px); /* 16 */
}
.p-gallery__item img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
@keyframes gallery-loop {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
/* 動きを減らす設定の端末では停止 */
@media (prefers-reduced-motion: reduce) {
  .p-gallery__track {
    animation: none;
  }
}
@media screen and (max-width: 680px) {
  .p-gallery {
    padding-block: 10.6667vw; /* 40 */
  }
  .p-gallery__item {
    width: 45.3333vw; /* 170 */
    margin-right: 3.2vw; /* 12 */
  }
}