.hero { background: var(--ink); }
.hero::before, .hero::after { display: none; }
.hero-visual { min-height: 620px; margin: 0; overflow: hidden; }
.hero-visual::before, .hero-visual::after { display: none; }
.hero-visual img { display: block; width: 100%; height: 100%; max-height: none; object-fit: cover; object-position: 67% center; transform: none; filter: none; }
.intro-visual { position: relative; overflow: hidden; padding: 0; background: #d7c4a5; }
.intro-visual img { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; object-fit: cover; object-position: center 43%; filter: none; }

@media (max-width: 820px) {
  .hero-visual { min-height: 520px; }
}

@media (max-width: 620px) {
  .hero-visual { min-height: 0; height: 330px; }
  .hero-visual img { width: 100%; height: 100%; max-height: none; object-position: 69% center; transform: none; }
  .intro-visual { min-height: 390px; }
  .intro-visual img { max-height: none; }
}