@charset "UTF-8";

/* ------------------------------------------------------------
   Timeline tokens
------------------------------------------------------------ */
:root {
  --fade-duration: 1s;
  --fade-ease: cubic-bezier(0.37, 0, 0.63, 1); /* sine in-out */
  --still: url(../images/top/mv04-pc.webp); /* 動画終了後に見せる静止画(このCSSからの相対パス) */
}

/* ------------------------------------------------------------
   Hero movie
------------------------------------------------------------ */
.heroMovie {
  position:relative;
  width:100%;
  min-width:960px;
}

/* 最背面 = 静止画 */
.heroMovieStage {
  position:relative;
  background:var(--still) no-repeat center top;
  background-size:100% auto; /* 幅いっぱい・比率維持(トリミングなし) */
}

/* 前面 = 動画(再生中は16:9、終了時に静止画の比率へ広げつつフェードアウト) */
.heroMovieVideo {
  position:relative;
  width:100%;
  padding-bottom:56.25%; /* 動画 1920x1080 = 16:9 */
  background:#000;
  opacity:1;
  transition:
    opacity var(--fade-duration) var(--fade-ease),
    padding-bottom var(--fade-duration) var(--fade-ease);
}
.heroMovieVideo video {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.heroMovieStage.video-end .heroMovieVideo {
  padding-bottom:79.09%; /* 静止画 3200x2531 の比率(2531/3200) */
  opacity:0;
  pointer-events:none;
}

/* SKIP / REPLAY(標準コントロールは使わない) */
.heroMovieButton {
  display:none;
  position:absolute;
  z-index:1;
  top:10px;
  right:40px;
  width:80px;
  padding:.5rem 0;
  font:inherit;
  font-size:10.5px;
  line-height:normal;
  text-align:center;
  color:#fff;
  border:1px solid rgba(255,255,255,.5);
  background:rgba(0,0,0,.5);
  cursor:pointer;
}
.heroMovieButton:focus-visible {
  outline:2px solid #fff;
  outline-offset:2px;
}
.heroMovieStage.video-playing .heroMovieSkip,
.heroMovieStage.video-end .heroMovieReplay {
  display:block;
}

@media screen and (max-width:640px) {
  .heroMovie { 
    min-width:inherit;
  }
  .heroMovieButton {
    top:auto;
    right:10px;
    bottom:10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --fade-duration: 0s;
  }
}