/* =========================
   TOP page styles (top.css)
   ========================= */

/* =========================
   Hero
   ========================= */
.hero{
  position: relative;
  min-height: 50vh;           /* SP */
  overflow: hidden;
  background:#ffffff;            /* 読み込み中の色 */
}
@media (min-width: 992px){
  .hero{ min-height: 80vh; }  /* PC */
}

/* 背景動画を全面フィット */
.hero__video{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* テキストレイヤー */
.hero__overlay{
  position: relative; z-index: 2;
  padding-top: 15vh;
  padding-bottom: 6vh;
  color: #009F44;
}

/* タイトル（SP基準 → PCで上書き） */
.hero__ttl-ja{
  color:#fff;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.8;
  margin: 0;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
}
.hero__ttl-en{
  color:#fff;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.9;
  margin: 0;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
}
@media (min-width: 992px){
  .hero__ttl-ja{ font-size: 46px;  font-weight: 600;}
  .hero__ttl-en{ font-size: 18px; }
}

/* JS無効時のフォールバック画像（任意） */
.hero__poster{
  width:100%; height:100%; object-fit:cover; display:block;
}
/* 黒の被せレイヤー */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2); /* ← 濃さはここで調整（0.3〜0.6くらい） */
  z-index: 1; /* 動画より上、テキストより下 */
}