:root {
  --sp-hero-top: 150px;
  --h-hero-poster: 793.7px;
  --h-hero-banner: 24px;
}

.hero {
  height: calc(var(--sp-hero-top) + var(--h-hero-poster) + var(--h-hero-banner));
  padding-top: var(--sp-hero-top);
  overflow: hidden;
}

.hero__poster-frame {
  width: 100%;
  height: var(--h-hero-poster);
  overflow: hidden;
  background: var(--c-bg);
}

.hero__poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__banner {
  width: 100%;
  height: var(--h-hero-banner);
}

.hero__text-layer {
  display: none;
}

@media (max-width: 1024px) {
  :root {
    --sp-hero-top: 150px;
    --h-hero-poster: 441.2px;
    --h-hero-banner: 24px;
  }
}

@media (max-width: 560px) {
  :root {
    --sp-hero-top: 150px;
    --h-hero-poster: 240px;
    --h-hero-banner: 12px;
  }

  .hero__banner {
    width: 129px;
  }

  /* Figma mobile: Hero 1 は w435.1 を左詰めで配置（右側クロップ） */
  .hero__poster {
    object-position: left center;
  }

  /* Figma mobile: ヒーロー直下・左寄せの橙ストライプ指標（斜めの帯3本） */
  .hero::after {
    content: "";
    position: absolute;
    left: 4%;
    bottom: 0;
    width: 33%;
    height: 15px;
    background: repeating-linear-gradient(
      118deg,
      var(--c-accent-mid) 0 17px,
      transparent 17px 42px
    );
  }
}