/*******************************/
/*** hero section  ***/
/*******************************/
.top-container {
height:auto;
}


.video-container video {
width: 100%; /* 幅を100%より大きくしてはみ出させる */
height: auto;
object-fit: cover;
}



/* レスポンシブ対応: 画面幅が768px以下で調整 */
@media screen and (max-width: 768px) {
    .vertical-text {
      font-size: 36px; /* 小さい画面ではフォントサイズを小さく */
      letter-spacing: 1rem;
      padding: 10px;
      margin-top: 20px; /* テキストの位置調整 */
    }
  
    .video-container video {
      left: 0; /* 小さい画面では動画を中央に */
      width: 100%;
      max-height: 50vh; /* 小さい画面では動画の高さを調整 */
    }
  }
  
  /* レスポンシブ対応: 画面幅が480px以下でさらに調整 */
  /* レスポンシブ対応: 画面幅が480px以下でさらに調整 */
@media screen and (max-width: 480px) {
  .top-container {
      flex-direction: column;
  }
  .vertical-text {
      font-size: 18px;
      letter-spacing: 0.8rem;
      position: static;
      writing-mode: initial;
      text-orientation: upright;
  }
  .text-container {
      position: static;
  }
  .video-container {
      position: static;
      width: 100%; /* 親要素の幅に合わせる */
      max-height: 100vh; /* ビューポートの高さを超えない */
      display: flex; /* 動画を中央に配置 */
      justify-content: center;
      align-items: center;
      overflow: hidden; /* はみ出し防止 */
  }
  .video-container video {
      position: static;
      width: 100%; /* コンテナの幅にフィット */
      height: auto; /* アスペクト比を維持 */
      max-height: 100vh; /* ビューポートの高さを超えない */
      object-fit: contain; /* 動画全体を表示（アスペクト比維持） */
      border-radius: 0; /* 角をリセット */
  }
}