@charset "UTF-8";
/**
 * page-movie.scss
 * template-single-movie.php（SAKURA STORIES）用のページ固有スタイル。
 * 旧 sakuraodistillery.com の assets/css/movie.css を FLOCSS（p-movie__*）へ移植。
 * 旧サイトの video.js 依存スタイルは廃し、YouTube iframe を 16:9 のレスポンシブ枠で表示する。
 * common.css の後にロードされる前提。画像は ../img/movie/ を参照。
 */
/* KV
============================================================ */
.p-movie__kv {
  background: #000 url(../img/movie/kv_bg.jpg) no-repeat center center/cover;
}

.p-movie__kv-inner {
  position: relative;
  height: 100vh;
  min-height: 550px;
}

.p-movie__kv-box {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  max-width: 650px;
  padding: 0 20px;
  /* 旧サイト同様、中央から下げて画面下寄りに配置する。
     タイトルと背景の人物シルエットの位置関係（SAKURA が足元の下から始まる）は
     この margin-top のみで決まる（ヘッダー分のオフセットは画像・タイトルを一緒に
     ずらすため関係しない）。旧サイトと同じ 350px に合わせる。 */
  margin-top: 350px;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
}

.p-movie__kv-title {
  margin: 0 auto 1.5em;
  max-width: 348px;
}
.p-movie__kv-title img {
  width: 100%;
}

.p-movie__kv-text {
  line-height: 2;
}

@media screen and (max-width: 811px) {
  .p-movie__kv {
    background-image: url(../img/movie/kv_bg-sp.jpg);
    background-position: top center;
  }
  .p-movie__kv-inner {
    height: 80vh;
    min-height: 100vw;
  }
  .p-movie__kv-box {
    top: 62%;
    margin-top: 50px;
    max-width: 90%;
  }
  .p-movie__kv-title {
    width: 78%;
  }
  .p-movie__kv-text {
    text-align: left;
    line-height: 1.9;
  }
}
/* エピソード（YouTube）
============================================================ */
.p-movie__intro {
  padding: 120px 0;
  color: #fff;
  background: #000;
}

.p-movie__episode {
  max-width: 650px;
  margin: 0 auto;
}
.p-movie__episode + .p-movie__episode {
  margin-top: 100px;
}

/* video.js（YouTube）カスタムスキン。
   旧 movie.css の上書きを移植し、白系のすっきりしたコントロールに揃える。
   コントロールバーは動画の下に出すため、下に余白を確保する。
   CDN の video-js 基本CSSより確実に勝たせるため .p-movie__video 配下に限定して
   詳細度を上げている（読み込み順に依存せず上書きできる）。 */
/* stylelint-disable declaration-no-important -- video.js 既定スタイルの上書きに必要 */
.p-movie__video {
  position: relative;
  background: #000;
}
.p-movie__video .video-js {
  width: 100%;
}
.p-movie__video .video-js:focus {
  outline: none !important;
}
.p-movie__video .video-js .vjs-big-play-button,
.p-movie__video .video-js .vjs-fullscreen-control {
  display: none;
}
.p-movie__video .video-js .vjs-time-control {
  position: absolute;
  top: 20px;
  right: 0;
}
.p-movie__video .video-js .vjs-load-progress {
  background: #f2f0e5;
}
.p-movie__video .video-js .vjs-load-progress div {
  background: none;
}
.p-movie__video .video-js .vjs-play-progress {
  background: #e19282;
}
.p-movie__video .video-js .vjs-control-bar {
  display: flex !important;
  visibility: visible !important;
  width: 100%;
  top: 100%;
  bottom: auto;
  margin-top: 10px;
  background: none;
  opacity: 1 !important;
}
.p-movie__video .video-js .vjs-play-control {
  position: absolute;
  top: 100%;
  left: 0;
  width: 80px;
  height: 80px;
  margin-top: 10px;
  border-radius: 50%;
  line-height: 80px;
  color: #000;
  background: #fff;
}
.p-movie__video .video-js .vjs-play-control::before {
  font-size: 225%;
  line-height: inherit;
}

/* stylelint-enable declaration-no-important */
/* 動画下に出る白い丸の再生ボタン（約130px下まで伸びる）と重ならないよう、
   旧サイト同様タイトルを十分下げる。 */
.p-movie__episode-ttl {
  margin-top: 140px;
}

.p-movie__episode-ttl dt {
  margin-bottom: 0.5em;
  font-size: 160%;
}

.p-movie__episode-label {
  display: block;
  font-size: 60%;
}

.p-movie__episode-ttl dd {
  line-height: 1.8;
}

@media screen and (max-width: 811px) {
  .p-movie__intro {
    padding: 5rem 0;
  }
  .p-movie__episode + .p-movie__episode {
    margin-top: 4rem;
  }
  .p-movie__episode-ttl dt {
    font-size: 130%;
  }
}