/*=====================================================
  Hero Section Styles
=====================================================*/

/* 親コンテナ / 初期表示制御 */
.hero-section {
  position: relative;
  overflow: hidden;
}

.hero-slider {
  opacity: 0;
  height: 620px;
  overflow: hidden;
  transition: opacity 0.3s linear, max-height 0.3s ease-in-out;
  border-radius: 24px;
}

.hero-slider.slick-initialized {
  opacity: 1;
}

/* オーバーレイ & テキスト */
.hero-overlay-content {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
}
.hero-title {
  padding-left: 5rem;
}

/* テキスト縦位置調整（スマホ） */

@media (max-width: 994px) {
  .hero-title {
    padding-left: 2rem;
  }
}
@media (max-width: 575.98px) {
  .hero-title {
    transform: translateY(130px);
    padding-left: 1rem;
  }
}


/*=====================================================
  スライド共通設定
=====================================================*/
.hero-slide {
  width: 100%;
  height: 620px;
  position: relative;
  border-radius: 24px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

@keyframes zoomUp {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.15); /* 拡大率 */
  }
}
.add-animation {
  animation: zoomUp 14s linear 0s normal both;
}

/*=====================================================
  PC：Retina対応背景画像
=====================================================*/
.hero-slide.slide1 {
  /* Safari 用プレフィックス付き */
  background-image: -webkit-image-set(
    url('../images/hero/hero-bg.jpg') 1x,
    url('../images/hero/hero-bg@2x.jpg') 2x
  );
  /* 標準 image-set */
  background-image: image-set(
    url('../images/hero/hero-bg.jpg') 1x,
    url('../images/hero/hero-bg@2x.jpg') 2x
  );
}

.hero-slide.slide2 {
  background-image: -webkit-image-set(
    url('../images/hero/hero-bg2.jpg') 1x,
    url('../images/hero/hero-bg2@2x.jpg') 2x
  );
  background-image: image-set(
    url('../images/hero/hero-bg2.jpg') 1x,
    url('../images/hero/hero-bg2@2x.jpg') 2x
  );
}

/*=====================================================
  モバイル：Retina対応背景画像
=====================================================*/
@media (max-width: 575.98px) {
  .hero-slide.slide1 {
    background-image: -webkit-image-set(
      url('../images/hero/hero-bg-sp.jpg') 1x,
      url('../images/hero/hero-bg-sp@2x.jpg') 2x
    );
    background-image: image-set(
      url('../images/hero/hero-bg-sp.jpg') 1x,
      url('../images/hero/hero-bg-sp@2x.jpg') 2x
    );
  }

  .hero-slide.slide2 {
    background-image: -webkit-image-set(
      url('../images/hero/hero-bg2-sp.jpg') 1x,
      url('../images/hero/hero-bg2-sp@2x.jpg') 2x
    );
    background-image: image-set(
      url('../images/hero/hero-bg2-sp.jpg') 1x,
      url('../images/hero/hero-bg2-sp@2x.jpg') 2x
    );
  }

}