.heroSlider{
  width: min(1200px, 100%);
  margin: 0 auto;
  padding: 20px 0px;
}

.heroSlider__viewport{
  border-radius: 14px;
  overflow: hidden;
  background: #eee;
}

/* 横スライドの肝 */
.heroSlider__track{
  display: flex;
  transition: transform .4s ease;
  will-change: transform;
}

.heroSlider__slide{
  flex: 0 0 100%;
}

.heroSlider__slide img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 500; /* 画像が揃ってなくても高さが安定 */
  object-fit: cover;
}

/* ドット */
.heroSlider__dots{
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 30px 0 0;
}

.heroSlider__dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 0;
  padding: 0;
  background: rgb(91 169 182);
  cursor: pointer;
}

.heroSlider__dot.is-active{
  background: rgb(0 62 111);
}

.heroSlider__dot:focus-visible{
  outline: 2px solid rgba(0,0,0,.35);
  outline-offset: 3px;
}

@media (max-width: 769px){
.heroSlider__slide img {
    aspect-ratio: 4 / 3;
}

}