/* =========================
   Hero (base)
========================= */
.hero{
  position: relative;
  overflow: hidden;
  padding: 0;
}

.hero__bg{
  position:absolute;
  inset:0;
  z-index:0;
}
.hero__bg img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform: scale(1.02);
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,.05),
    rgba(0,0,0,.15) 15%,
    rgba(0,0,0,.05)
  );
}

.hero__inner{
  position: relative;
  z-index:2;
}

.wrap--hero{
  width: 100%;
  max-width: none;
  height: 500px;
  margin: 0;
  padding: 1vw 6vw;
}

.hero__copy{
  text-align:left;
  max-width:560px;
  margin:0;
  padding-left:6px;
}

.hero__kicker{
  margin:0;
  font-weight:1000;
  font-size:32px;
  line-height:1.1;
  color:#fff;
  letter-spacing:.02em;
}
.hero__sub{
  margin:14px 0 0;
  font-weight:900;
  color: rgba(255,255,255,.92);
}
.hero__title{
  margin:6px 0 12px;
  font-weight:1000;
  font-size:46px;
  letter-spacing:.04em;
  color:#fff;
}
.hero__lead{
  margin:0;
  font-weight:800;
  color: rgba(255,255,255,.92);
}
@media (max-width: 640px){
  .hero__title{
    margin:6px 0 12px;
    font-weight:1000;
    font-size:30px;
    letter-spacing:.04em;
    color:#fff;
  }
  .hero__kicker{
    margin:0;
    font-weight:1000;
    font-size:20px;
    line-height:1.1;
    color:#fff;
    letter-spacing:.02em;
  }
}

/* =========================
   HERO variants
========================= */
.hero.hero--home{
  height: 78vh;
  min-height: 520px;
  display:flex;
  align-items:flex-end;
}
.hero.hero--home .hero__inner{
  padding: 0 0 64px;
}

.hero.hero--page{
  height: 500px;
  min-height: 500px;
  display:grid;
  place-items:center;
}
.hero.hero--page::before{
  background: linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.18));
}
.hero.hero--page .hero__inner{
  height:100%;
  padding:0;
  display:grid;
  place-items:center;
}
.hero.hero--page .hero__copy{ padding-left:0; }

.hero__centerTitle{
  width:100%;
  text-align:center;
  padding:0 6vw;
}
.hero__pageTitle{
  margin:0;
  color:#fff;
  font-weight:1000;
  letter-spacing:.04em;
  line-height:1.15;
  font-size: clamp(26px, 4.2vw, 52px);
  text-shadow: 0 10px 30px rgba(0,0,0,.35);
}
/* 背景画像の表示基準を固定（HOMEだけ左下に寄せる） */
.hero--home .hero__bg img{
  object-fit: cover;
  object-position: center center; /* ← ここが重要 */
}

@media (max-width: 360px){
  .hero__kicker{ font-size: 28px; }
  .hero__title{ font-size: 48px; }
}

@media (max-width: 640px){
  .hero.hero--page{
    height: 320px;
    min-height: 320px;
  }
  .hero__pageTitle{ font-size: 28px; }
}


/* 共通 */
.hero{
  position: relative;
  overflow: hidden;
}

/* HOME：下寄せ */
.hero.hero--home{
  height: 100vh;
  min-height: 520px;
  display: flex;
  align-items: flex-end;
}

.hero.hero--home .hero__inner{
  padding: 0 10px 30px; /* 下に余白＝文字が下がる */
  height: auto;
  display: block;    /* ← 下層用gridが混ざってたら潰す */
}

/* 下層：中央寄せ */
.hero.hero--page{
  height: 500px;
  min-height: 500px;
  display: grid;
  place-items: center;
}

.hero.hero--page .hero__inner{
  height: 100%;
  padding: 0;
  display: grid;
  place-items: center;
}
/* SPは背景画像を中央基準でトリミング */
@media (max-width: 640px){

  /* HOME：下寄せ */
  .hero.hero--home{
    height: 60vh;
    min-height: 520px;
    display: flex;
    align-items: flex-end;
  }
  .hero__bg img{
    object-position: center center;
  }

  /* HOMEだけ個別指定している left bottom を打ち消す */
  .hero--home .hero__bg img{
    object-position: center center;
  }
}

/* =========================
   HERO：HOME以外は中央寄せ（contents/contact/blog/info/page など全部）
========================= */

/* HOME以外（= ページ系HERO） */
.hero:not(.hero--home){
  height: 500px;
  min-height: 500px;
  display: grid;
  place-items: center;
}

/* ページ系の暗幕 */
.hero:not(.hero--home)::before{
  background: linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.18));
}

/* 文字コンテナを確実にど真ん中へ */
.hero:not(.hero--home) .hero__inner{
  height: 100%;
  padding: 0;              /* wrap--hero の padding を殺す */
  display: grid;
  place-items: center;
}

/* タイトルの横余白だけ確保 */
.hero:not(.hero--home) .hero__centerTitle{
  padding: 0 6vw;
}

/* SP */
@media (max-width: 640px){
  .hero:not(.hero--home){
    height: 320px;
    min-height: 320px;
  }
}