.mv-top {
 position: relative;
 width: 100%;
 height: auto;
 overflow: hidden;
 background: #fff;
}

.intro-video-wrapper {
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
 z-index: 5;
 /* 静止画より上 */
 background: #fff;
 transition: opacity 1.2s ease-out;
}

.intro-video {
position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  opacity: 0;
  transition: opacity 1.0s ease;
}

/* --- JSでクラスがついた時の状態 --- */

/* 動画が準備できたら透明度を上げて前面へ */
.intro-video.loaded {
  opacity: 1;
  z-index: 3;
}

/* サムネイルを消す */
#thumbnail.fadeout {
  opacity: 0;
}

/* 静止画コンテナ：最初隠す */
#mv-static {
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
 opacity: 0;
 transition: opacity 1.5s ease-in;
 z-index: 1;
}

.mv__image figure img {
 width: 100%;
 height: auto;
 object-fit: cover;
}

/* ヘッダーは常に上（fixed想定） */
.header {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 z-index: 100;
 /* 動画より上 */
}

/* モバイル：動画非表示で静止画 */
@media (max-width: 768px) {
 .intro-video-wrapper {
  display: none;
 }

 #mv-static {
  opacity: 1 !important;
 }
}