<!-- start Simple Custom CSS and JS -->
<style type="text/css">
media (hover: hover) {
  .project-anim__item:hover {
    box-shadow: 0 1vh 3vh rgba(0, 0, 0, 0.35);
  }
}

.project-anim-container {
  position: absolute;
  left: 0;
  right: 0;
  width: 100vw !important;
  max-width: 100vw !important;
  height: 30vh; /* 高さでスケールを決定 */
  /* 左右フェード */
  /* -webkit-mask-image: linear-gradient(to right, transparent 0, black 8%, black 92%, transparent 100%);
                mask-image: linear-gradient(to right, transparent 0, black 8%, black 92%, transparent 100%); */
}

.project-anim-container,
.project-anim__track {
  --scroll-duration: 40s; /* 速度 */
  --gap: 16px; /* 要素間の余白 */
  --radius: 0; /* 角丸 */
}

/* アニメの土台（JS が @keyframes 名と delay を付与） */
.project-anim__track {
  display: flex;
  align-items: center;
  width: max-content;
  height: 100%;
  column-gap: var(--gap);
  will-change: transform;
}

/* カードを並べる */
.project-anim__run {
  display: flex;
  column-gap: var(--gap);
  height: 100%;
}

/* 1枚分のカード（幅は JS が動的に設定） */
.project-anim__item {
  flex: 0 0 auto;
  height: 100%;
  width: auto; /* 幅は JS が px 指定で上書き */
  overflow: hidden;
  border-radius: var(--radius);
  background: transparent;
  box-shadow: 0 0 0 transparent;
  transition: box-shadow 0.4s;
}

.project-anim__item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
</style>
<!-- end Simple Custom CSS and JS -->
