@charset "UTF-8";

/* --- fvエリア --- */
.fv-section {
  position: relative;
  width: 100%;
  height: calc((760vw / 1366) * 100);
  overflow: hidden;
  background: #000;
}

@media screen and (max-width: 768px) {
  .fv-section {
    height: 170vw;
  }
}

/* --- 動画コンテナ（ここが重要） --- */
.fv-video-wrapper {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* 全てのiframe共通：object-fit:coverのような挙動を作る */
.fv-bg-video {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border: none;
}

/* PC表示：横長（16:9）を維持しつつカバー */
@media screen and (min-width: 769px) {
  .fv-bg-video {
    width: 105%;
    /* height: 56.25vw; */
    height: 105%;
    min-height: 105vh;
    min-width: 105vw;
    /* min-width: 177.77vh; */
    object-fit: cover;
  }
  .fv-bg-video {
    width: 105vw;
    height: 105%;
  } 
}

/* スマホ表示：縦長を維持しつつカバー */
@media screen and (max-width: 768px) {
  .fv-bg-video {
    width: 100%;
    height: 100%;
    /* 縦長動画が隙間なく埋まるように強制調整 */
    object-fit: cover; 
    min-width: 105vw;
    min-height: 105%;
  }
  /* iframe内の動画自体をカバーさせるための補正（Vimeo用） */
  /* .fv-video-sp {
    width: 177.77vh;
    height: 100vh;
  } */
  .fv-bg-video {
    width: 105vw;
    height: 105vh;
  } 
}

/* --- SKIP後の画像 --- */
.fv-image-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 5;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease, visibility 0.8s;
}
.fv-image-overlay_img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.15);
  transition: transform 2s ease-out;
}
.fv-image-overlay.is-active { opacity: 1; visibility: visible; }
.fv-image-overlay.is-active .fv-image-overlay_img { 
  transform: scale(1.0);
  margin-top: -5.5vw;
}

.kv_scene03_logo {
  opacity: 0;
  transition: 1.5s;
}
.fv-image-overlay.is-active .kv_scene03_logo {
  opacity: 1;
}

/* --- ボタン --- */
.fv-controls {
  position: absolute;
  bottom: 30px;
  left: 30px;
  z-index: 10;
}
.fv-btn {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  color: #fff;
  border: 1px solid #fff;
  padding: 12px 30px;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
}
#js-fv-replay-btn { display: none; }

@media screen and (max-width: 768px) {
  .fv-controls {
    bottom: 3vw;
    left: 3vw;
  }
  .fv-btn {
    font-size: 2.5vw;
    padding: 1.5vw 2.5vw;
  }
}

.fv-section .c-caption {
  color: #fff;
  z-index: 11;
}

@media screen and (max-width: 768px) {
  .fv-section .kv_info {
    padding: calc(var(--vw)*134) 0  calc(var(--vw)*55) 0;
  }
}