.hero {
position: relative;
width: 100%;
overflow: hidden;
height: 100vh;
min-height: 420px;
max-height: 780px;
background: #f3f3f3;
}

.hero__slider {
position: absolute;
inset: 0;
}

.hero__slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity var(--hero-duration, 900ms) ease;
}

.hero__slide.is-active {
opacity: 1;
}

.hero__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

@media screen and (max-width: 768px) {
.hero {
height: 56vh;
min-height: 320px;
}
}

.hero {
  position: relative;
  overflow: hidden;
}

.hero__slider {
  position: relative;
  width: 100%;
  height: 100%;
}

.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--hero-duration, 900ms) ease;
}

.hero__slide.is-active {
  opacity: 1;
}

.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* HERO CAROUSEL OVERRIDE (must win) */
/* HERO CAROUSEL OVERRIDE (must win)
   他CSSで .hero__slide が複数定義されていてもフェードが死なないように強制上書き
*/
.hero .hero__slider,
.hero__slider.js-hero-carousel {
  position: relative !important;
  overflow: hidden !important;
}

.hero .hero__slide,
.hero__slider .hero__slide {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  opacity: 0 !important;
  z-index: 0 !important;
  transition: opacity var(--hero-duration, 900ms) ease !important;
}

.hero .hero__slide.is-active,
.hero__slider .hero__slide.is-active {
  opacity: 1 !important;
  z-index: 1 !important;
}