/**
 * GMS ヒーローカルーセル
 */

.gms-hero-carousel {
  margin: 0;
  position: relative;
  width: 100%;
}

.gms-hero-carousel--desktop {
  display: block;
}

@media screen and (max-width: 840px) {
  .gms-hero-carousel--desktop {
    display: none;
  }
}

.gms-hero-carousel--mobile {
  display: none;
}

@media screen and (max-width: 840px) {
  .gms-hero-carousel--mobile {
    display: block;
  }
}

.gms-hero-carousel__nav {
  display: none;
}

.gms-hero-carousel__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
}

.gms-hero-carousel__viewport::-webkit-scrollbar {
  display: none;
}

.gms-hero-carousel__track {
  --gms-carousel-side-padding: clamp(18px, 8vw, 120px);
  display: flex;
  gap: clamp(12px, 1.8vw, 28px);
  padding: 0 var(--gms-carousel-side-padding);
}

.gms-hero-carousel__slide {
  flex: 0 0 min(40vw, 560px);
  max-width: min(40vw, 560px);
  scroll-snap-align: center;
}

@media screen and (max-width: 991px) {
  .gms-hero-carousel__slide {
    flex-basis: min(70vw, 560px);
    max-width: min(70vw, 560px);
  }
}

.gms-hero-carousel--mobile .gms-hero-carousel__slide {
  flex-basis: min(50vw, 360px);
  max-width: min(50vw, 360px);
}

@media screen and (max-width: 991px) {
  .gms-hero-carousel--mobile .gms-hero-carousel__slide {
    flex-basis: min(70vw, 420px);
    max-width: min(70vw, 420px);
  }
}

@media screen and (max-width: 540px) {
  .gms-hero-carousel--mobile .gms-hero-carousel__slide {
    flex-basis: min(88vw, 360px);
    max-width: min(88vw, 360px);
  }
}

.gms-hero-carousel__slide:focus {
  outline: none;
}

.gms-hero-carousel__slide:focus-visible .gms-hero-carousel__img {
  outline: 2px solid var(--gms-color-tag-text);
  outline-offset: 4px;
}

.gms-hero-carousel__link {
  display: block;
  /*
   * STUDIO 側はカードの上下左右に十分な breathing room があり、その中で控えめな shadow が見える構成だった。
   * ローカル側は余白を削ったぶん shadow の切れ方が不自然になりやすいので、ここは元の見え方に寄せておく。
   */
  padding: 20px;
  text-decoration: none;
  transition: transform 0.25s ease;
}

.gms-hero-carousel__link:hover {
  transform: translateY(-10px);
}

.gms-hero-carousel__img {
  background: var(--s-color-8ba294d6, #fff);
  border: 0;
  border-radius: 24px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
  display: block;
  height: auto;
  width: 100%;
}

.gms-hero-carousel.is-static .gms-hero-carousel__nav-btn {
  opacity: 0.35;
  pointer-events: none;
}

@media screen and (max-width: 540px) {
  .gms-hero-carousel__track {
    padding-top: 8px;
    padding-bottom: 18px;
  }

  .gms-hero-carousel__link {
    padding: 20px 10px;
  }
}