/* ==========================================================
   hero.css — 下層ページ共通ヒーローバナー（<img>オーバーレイ方式）
   ACFフィールド：hero_title / hero_text / hero_image で編集可能
   ========================================================== */
.page-hero{
  position:relative;
  height:260px;
  background-color:var(--cream);
  overflow:hidden;
  display:flex;align-items:center;
}

.page-hero{
  position:relative;
  height:260px;
  background-color:var(--cream);
  background-image:var(--hero-bg);
  background-size:cover;
  background-position:center 40%;
  background-repeat:no-repeat;
  overflow:hidden;
  display:flex;align-items:center;
}
.page-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    90deg,
    rgba(247,244,238,.94) 0%,
    rgba(247,244,238,.80) 30%,
    rgba(247,244,238,.30) 60%,
    rgba(247,244,238,0) 85%
  );
  z-index:0;
}

.page-hero img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 40%;z-index:0;
}
.page-hero .fallback-label{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:rgba(27,43,75,.35);font-size:13px;letter-spacing:.05em;pointer-events:none;z-index:0;
}
.hero-text{
  position:relative;z-index:1;
  color:var(--navy);padding:0 5.5% 0 8%;
  max-width:560px;
}
.hero-text h1{font-size:clamp(24px,3.6vw,34px);font-weight:700;letter-spacing:.04em;margin-bottom:12px;color:var(--navy);}
.hero-text p{font-size:clamp(11px,1.1vw,13px);line-height:1.8;font-weight:700;color:var(--navy);}
@media (max-width:820px){
  .page-hero{
    height:auto;
    min-height:260px;
    background-image:var(--hero-bg-mobile);
  }
  .hero-text{padding:36px 6%;}
  .hero-text h1{
  text-shadow:
    0 0 4px rgba(247,244,238,1),
    0 0 8px rgba(247,244,238,1),
    0 0 12px rgba(247,244,238,.9),
    0 0 16px rgba(247,244,238,.8);
}
.hero-text p{
	width: 60%;
  text-shadow:
    0 0 4px rgba(247,244,238,1),
    0 0 7px rgba(247,244,238,1),
    0 0 10px rgba(247,244,238,.85);
}
}

/* TOPページ用ヒーロー（買取品目バナーと同型、ACF: home_hero_* フィールド） */
.top-hero{ height:300px; }