/* リセット・ベース */

body {
 opacity: 0;
 transition: opacity 0.5s ease-in-out; /* 0.5秒でフェード */
}
main[role="main"] {
 padding-top: unset;
}
.hero {
 position: relative;
 overflow: hidden;
 padding: var(--section-padding-vertical) 0;
 padding-top: 80px;
 padding-right: 0;
 padding-bottom: 80px; /* ←ここで下パディングを指定 */
 padding-left: 0;
 height: 100vh;
 background: #fbf151;
}

.hero__video {
 position: absolute;
 inset: 0; /* top/right/bottom/left: 0 の省略 */
 width: 100%;
 height: 100%;
 object-fit: cover;
 object-position: 50% 50%; /* ← ここが肝 */
}

.hero__bg {
 position: absolute;
 top: 80px;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: #fbf151;
 overflow: hidden;
}

.hero__overlay {
 position: absolute; /* 絶対配置 */
 top: 50%; /* セクションの縦中央 */
 left: 50%; /* セクションの横中央 */
 transform: translate(-50%, -50%);
 width: 100%; /* 横幅いっぱいにして text-align で中寄せ */
 text-align: center;
 pointer-events: none;
 max-height: 100vh;
}

.hero__img {
 position: absolute;
 top: 0;
 left: 0;
 max-width: 90%;
 min-height: 100%;
 object-fit: cover;
 object-position: top left;
}

.hero__title {
 font-size: 72px;
 color: white;
 text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.hashtag {
 color: #ff478b;
}

/* １）アニメーション後に使う画像用スタイル */
.hero__title-image {
 position: absolute;
 /* 最初は中央配置しておく */
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 /* 大きさの固定は外す */
 width: 350px;
 height: auto;
 opacity: 0;
}

/* ２）最終的にフェードインさせるための初期状態 */
.hero__title-image--visible {
 opacity: 1;
 transition: opacity 0.5s ease-in;
}

/* 既存の .hero__bg に overflow: hidden; がある前提 */

@media screen and (max-width: 1210px) {
 .hero {
  margin-top: 0;
 }

 .hero__video {
  width: auto;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  object-fit: cover;
  object-position: center center;
  max-width: none;
  min-height: none;
 }

 .hero__img {
  /* 横幅ではなく高さでフィットさせる */
  width: auto; /* アスペクト比を維持 */
  height: 100%; /* セクションの高さに合わせる */
  /* 中央寄せ */
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  /* 切り抜き設定 */
  object-fit: cover;
  object-position: center center;
  /* 不要な制約をリセット */
  max-width: none;
  min-height: none;
 }

 .hero__title-image {
  position: absolute;
  /* 最初は中央配置しておく */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 大きさの固定は外す */
  width: 250px;
  height: auto;
  opacity: 0;
 }

 img.hero__title {
  width: 300px; /* お好みの横幅 */
  height: auto;
  max-width: 80%; /* 画面幅に応じてリキッドにしたいなら */
 }
}

@media (max-width: 768px) {
 .hero__bg {
  top: 0;
 }
}

@media (max-width: 600px) {
 .hero {
  height: 100svh;
 }
}