/* P2・P3-1・P4 共通：コンパクトヒーロー＋sec-sub */

.hero-wrap { position: relative; }

.hero {
  position: relative; width: 100%;
  aspect-ratio: 21/5; min-height: 180px; max-height: 36vh;
  overflow: hidden;
}
.hero-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 45% 50%;
  transform: scale(1.12); transform-origin: 45% 50%;
}
.hero::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(0,0,0,.25) 0%, rgba(0,0,0,.02) 45%, rgba(0,0,0,.55) 100%);
}
.hero-content-wrap {
  position: absolute; inset: 0; z-index: 2; display: flex; align-items: flex-end;
}
.hero-content {
  max-width: var(--content-w); width: 100%;
  margin: 0 auto; padding: 0 40px 30px; color: #fff;
}
.hero-eyebrow { font-size: 14px; letter-spacing: .2em; color: rgba(255,255,255,.65); margin-bottom: 8px; font-weight: 300; }
.hero-catch { font-family: 'Noto Serif JP', serif; font-size: 34px; font-weight: 500; line-height: 1.55; letter-spacing: .06em; }

.sec-sub { font-size: 14px; color: var(--mid); margin-bottom: 28px; }

@media (max-width: 767px) {
  .hero { aspect-ratio: 3/2; min-height: 200px; max-height: none; }
  .hero-catch { font-size: 22px; }
  .hero-eyebrow { font-size: 13px; margin-bottom: 5px; }
  .hero-content { padding: 0 20px 20px; }
}