@charset "utf-8";

.mv{
  position: relative;
  width: 100%;
  padding-top: 65%;
  background:#000;
  overflow:hidden;
}
.mv span{
  position: absolute;
  bottom: 10px;
  right: 20px;
  padding: 5px;
  background-color: rgba(0,0,0,.7);
  font-size: clamp(10px,1.2vw,14px);
  line-height: 1;
  color: #fff;
  transition: .3s;
  opacity: 0;
}
.mv span.on{
  opacity: 1;
}
@media screen and (max-width: 767px) {
  .mv{
    padding-top: 133%;
  }
  .mv span{
    right: 10px;
  }
}

.mv .txt{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transition: .6s;
  opacity: 0;
}
.mv .plate{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transition: .6s;
  z-index: 10;
  opacity: 0;
}
.mv .txt.on,
.mv .plate.p01.on,
.mv .plate.p02.on,
.mv .plate.p03.on{
  opacity: 1;
}

.reveal-bg{
  position:absolute;
  inset:0;
  background:url('../img/top/mv2605/bg.jpg') center/cover no-repeat;
  /* 初期サイズ */
  --mask-size: 0px;
  /* ぼかし付き円形マスク */
  -webkit-mask-image: radial-gradient(
    circle at center,
    rgba(0,0,0,1) 40%,
    rgba(0,0,0,0.6) 55%,
    rgba(0,0,0,0) 70%
  );
  mask-image: radial-gradient(
    circle at center,
    rgba(0,0,0,1) 40%,
    rgba(0,0,0,0.6) 55%,
    rgba(0,0,0,0) 70%
  );
  -webkit-mask-size: var(--mask-size) var(--mask-size);
  mask-size: var(--mask-size) var(--mask-size);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
@media screen and (max-width: 767px) {
  .reveal-bg{
    background-image: url('../img/top/mv2605/bg_sp.jpg');
  }
}



.mv2608{
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 56.25%;
  overflow: hidden;
}
.mv2608 .movie{
  position: absolute;
  top: -.5%;
  left: -.5%;
  width: 101%;
  height: 101%;
  transition: .1s;
  opacity: 0;
  pointer-events: none;
}
.mv2608 .movie.move{
  opacity: 1;
}
.mv2608 .movie span,
.mv2608 .mv-fix span{
  position: absolute;
  bottom: 10px;
  right: 10px;
  font-size: clamp(10px,1.2vw,14px);
  line-height: 1;
  text-align: right;
}
.mv2608 .vjs-big-play-button{
  display: none!important;
}
/* MV自動再生用のみ非表示（intro .movie の操作を妨げない） */
.mv2608 .video-js .vjs-control-bar {
  display: none;
}
.mv2608 .mv-fix{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: 2s;
  opacity: 0;
  z-index: 1;
}
.mv2608 .mv-fix.move{
  opacity: 1;
}
@media screen and (max-width: 767px) {
  .mv2608{
    padding-top: 100%;
  }
  .mv2608 .movie{
    left: 50%;
    transform: translateX(-50%);
    width: 101%;
  }
  .mv2608 .movie{
  }
  .mv2608 .movie .video-js.vjs-16-9{
    padding-top: 100%;
  }
}

.mv2608 video{
  width: 100%;
}
@media screen and (max-width: 767px) {
  .mv2608 video{
    width: 100%;
  }
}