.hero {
  width: 100%;
  position: relative;
  overflow: hidden;
}

.hero--slider {
  isolation: isolate;
  height: 56.25vw;
}

.hero--slider .hero__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.9s ease;
}

.hero--slider .hero__slide.is-active {
  opacity: 1;
  z-index: 1;
}

/* 共通画像スタイル */
.hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* home用（SP時） */
@media (max-width: 768px) {
  .hero {
    height: var(--size-square-sp, 100vw);
  }

  .hero--slider {
    height: var(--size-square-sp, 100vw);
  }

  .hero--slider .hero__slide.hero__slide--left-focus {
    object-position: left center;
  }
}

/* aboutページ用 */
.hero--subpage {
  height: 60vh;
}

.hero--subpage img {
  filter: blur(1px);
  transform: scale(1.05);
}

/* aboutページ用（SP） */
@media (max-width: 768px) {
  .hero--subpage {
    height: var(--size-square-sp, 100vw);
  }
}

/* about用オーバーレイ（任意だが完成形として追加） */
.hero--subpage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.2);
}