.h-screen_75 {
  height: 75vh;
  min-height: 560px;
}

.hero-visual {
  position: relative;
  width: 50%;
  height: 100%;
  /*overflow: hidden;*/
}

.spiral-stage {
  position: absolute;
  inset: 0;
  perspective: 1600px;
  transform: rotateX(-6deg) rotateY(8deg) rotateZ(6deg);
}

.spiral-ring {
  position: absolute;
  top: 35%;
  left: 35%; /* 幅・高さはJSで設定 */
  transform: translate(-50%, -50%);
  transform-style: preserve-3d;
  animation: spiral-rotate 32s linear infinite;
}

.spiral-ring img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
  backface-visibility: visible;
  transform-origin: center center;
  will-change: transform;
}

@keyframes spiral-rotate {
  from {
    transform: translate(-50%, -50%) rotateY(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotateY(-360deg);
  }
}

@media (max-width: 768px) {
  .h-screen_75 {
    height: 75vh;
    min-height: 520px;
  }

  .hero-visual {
    width: 45%;
  }

  .spiral-ring,
  .spiral-ring img {
    width: 240px;
    height: 160px;
  }

  .spiral-ring {
    left: 68%;
  }
}