/* ============================================
   スライドショー共通
   ============================================ */
.content {
  width: auto;
  height: 500px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.content img {
  width: auto !important;
  height: 500px !important;
  max-width: none !important;
  object-fit: contain;
  display: block;
}

/* スライドレールの枠 */
.wrap {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  height: 500px;
  margin: 0;
}

.wrap-top {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  height: 60vh;
  margin: 0;
}

.wrap-top .content {
  height: 60vh;
}

.wrap-top .content img {
  height: 60vh !important;
  width: auto !important;
  object-fit: cover;
}

/* PC画面時は80vhに変更 */
@media (min-width: 821px) {
  .wrap-top {
    height: 80vh;
  }

  .wrap-top .content {
    height: 80vh;
  }

  .wrap-top .content img {
    height: 80vh !important;
  }
}

/* content4つをまとめたスライドブロック */
.slideshow-top {
  display: flex;
  height: 60vh;
  gap: 29px;
  animation: loop-slide-top 120s infinite linear 1s both;
  opacity: 0;
  transform: translateY(50px);
}

/* スマホ画面時はアニメーション速度を早く */
@media (max-width: 600px) {
  .slideshow-top {
    animation-duration: 60s;
    gap: 10px;
  }
}

/* PC画面時は80vhに変更 */
@media (min-width: 821px) {
  .slideshow-top {
    height: 80vh;
  }
}

.slideshow {
  display: flex;
  height: 500px;
  animation: loop-slide-hero 75s infinite linear 1s both;
  opacity: 0;
  transform: translateY(50px);
}

/* slideshow2用のスライドブロック */
.slideshow2 {
  display: flex;
  height: 500px;
  animation: loop-slide 170s infinite linear 1s both;
  opacity: 0;
  transform: translateY(50px) translateX(-33.333%);
}

/* slideshow3用のスライドブロック */
.slideshow3 {
  display: flex;
  height: 500px;
  gap: 20px;
  animation: loop-slide 110s infinite linear 1s both;
  opacity: 0;
  transform: translateY(50px);
}

/* slideshow4用のスライドブロック */
.slideshow4 {
  display: flex;
  height: 500px;
  animation: loop-slide-4 120s infinite linear 1s both;
  opacity: 0;
  transform: translateY(50px) translateX(-28.5714%);
}

/* 画面外の時はアニメーションを一時停止 */
.slideshow,
.slideshow-top,
.slideshow2,
.slideshow3,
.slideshow4 {
  animation-play-state: paused;
}

/* 画面内に表示されている時はアニメーションを再生 */
.slideshow.is-visible,
.slideshow-top.is-visible,
.slideshow2.is-visible,
.slideshow3.is-visible,
.slideshow4.is-visible {
  animation-play-state: running;
}

@-webkit-keyframes loop-slide {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-33.333%);
  }
}

@keyframes loop-slide {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-33.333%);
  }
}

@-webkit-keyframes loop-slide-reverse {
  0% {
    transform: translateX(-33.333%);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes loop-slide-reverse {
  0% {
    transform: translateX(-33.333%);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes loop-slide-top {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-20%);
  }
}

@keyframes loop-slide-hero {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-25%);
  }
}

@keyframes loop-slide-4 {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-28.5714%);
  }
}

/* ============================================
   Hero2 Content（スタジオ・ガーヤ）
   ============================================ */
.hero2-content {
  position: absolute;
  top: 0;
  left: clamp(20px, 25vw, 400px);
  width: clamp(200px, 25vw, 350px);
  height: 500px;
  background-color: white;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: clamp(0.5rem, 1.5vw, 1rem);
  padding: clamp(1rem, 2vw, 2rem);
  opacity: 0.9;
  font-family: 'Shippori Mincho', serif;
}

/* Slide2 Wrap */
.wrap.slide2 {
  position: relative;
}

/* ============================================
   Menu Content（クラス紹介）
   ============================================ */
.menu-content {
  position: absolute;
  top: 0;
  left: clamp(20px, 10vw, 150px);
  width: clamp(180px, 20vw, 300px);
  height: 500px;
  background-color: white;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: clamp(0.5rem, 1.5vw, 1rem);
  padding: clamp(1rem, 2vw, 2rem);
  opacity: 0.9;
  font-family: 'Shippori Mincho', serif;
}

.menu-content h2 {
  font-size: clamp(1rem, 1.5vw, 1.6rem);
  font-weight: 400;
  text-align: center;
  margin: 0;
  line-height: 1.3;
}

.menu-content h3 {
  font-size: clamp(1rem, 1.4vw, 1.4rem);
  font-weight: 400;
  text-align: center;
  margin: 0;
  line-height: 1.4;
}

.price-content {
  position: absolute;
  top: 0;
  left: clamp(20px, 10vw, 150px);
  width: clamp(180px, 20vw, 300px);
  height: 500px;
  background-color: white;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: clamp(0.5rem, 1.5vw, 1rem);
  padding: clamp(1rem, 2vw, 2rem);
  opacity: 0.9;
  font-family: 'Shippori Mincho', serif;
}

.price-content h2 {
  font-size: clamp(1rem, 1.5vw, 1.6rem);
  font-weight: 400;
  text-align: center;
  margin: 0;
  line-height: 1.8;
}

.hero2-content h2 {
  font-size: clamp(1rem, 1.5vw, 1.6rem);
  font-weight: 400;
  text-align: center;
  margin: 0;
  line-height: 1.3;
}

.hero2-content h3 {
  font-size: clamp(1rem, 1.4vw, 1.4rem);
  font-weight: 400;
  text-align: center;
  margin: 0;
  line-height: 1.4;
  white-space: nowrap;
}

/* ============================================
   レスポンシブ対応（タブレット・スマホ）
   ============================================ */
@media (max-width: 820px) {
  .content {
    height: clamp(200px, 40vh, 500px);
  }

  .content img {
    height: clamp(200px, 40vh, 500px) !important;
  }

  .wrap {
    height: clamp(200px, 40vh, 500px);
  }

  /* slideshow-topは全画面表示 */
  .wrap-top {
    height: 60vh;
  }

  .wrap-top .content {
    height: 60vh;
    width: 100vw;
  }

  .wrap-top .content img {
    height: 60vh !important;
    width: 100vw !important;
    object-fit: cover;
  }

  .slideshow-top {
    height: 60vh;
  }

  .slideshow {
    height: clamp(200px, 40vh, 500px);
  }

  .slideshow2 {
    height: clamp(200px, 40vh, 500px);
  }

  .slideshow3 {
    height: clamp(200px, 40vh, 500px);
  }

  .slideshow4 {
    height: clamp(200px, 40vh, 500px);
  }

  .hero2-content {
    left: auto;
    right: clamp(40px, 8vw, 400px);
    width: clamp(150px, 45vw, 280px);
    height: clamp(200px, 40vh, 500px);
  }

  .hero2-content h2 {
    font-size: clamp(1rem, 4vw, 1.5rem);
  }

  .hero2-content h3 {
    font-size: clamp(1rem, 3.5vw, 1.3rem);
  }

  .menu-content {
    left: clamp(50px, 7vw, 150px);
    width: clamp(130px, 40vw, 250px);
    height: clamp(200px, 40vh, 500px);
  }

  .menu-content h2 {
    font-size: clamp(1rem, 4vw, 1.5rem);
  }

  .menu-content h3 {
    font-size: clamp(1rem, 3.5vw, 1.3rem);
  }

  .price-content {
    left: clamp(50px, 7vw, 150px);
    width: clamp(130px, 40vw, 250px);
    height: clamp(200px, 40vh, 500px);
  }

  .price-content h2 {
    font-size: clamp(1rem, 4vw, 1.5rem);
  }
}

/* スマホ画面時は70vhに変更 */
@media (max-width: 600px) {
  .wrap-top {
    height: 70vh;
  }

  .wrap-top .content {
    height: 70vh;
  }

  .wrap-top .content img {
    height: 70vh !important;
  }

  .slideshow-top {
    height: 70vh;
  }
}