/* 動画サムネイルの共通スタイル。
   タップすると codex-video-facade-2.js が画面中央に動画を浮かせて再生する。 */

/* position はページ側の指定を上書きしないよう、ここでは触らない。
   トップページの講師カードの動画は絶対配置されており、
   ここで position:relative を指定するとカードの外へずれる。 */
.sf-e-media-poster {
  display: block;
  padding: 0;
  cursor: pointer;
}

/* 講師一覧の動画だけは元の指定に position が無いため、ここで補う。 */
.sf-instructor-youtube {
  position: relative;
}

.sf-e-media-poster img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sf-e-media-play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  padding-left: 5px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #202020;
  color: #fff;
  font-size: 1.35rem;
  transform: translate(-50%, -50%);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.28);
}

@media (max-width: 760px) {
  .sf-e-media-play {
    width: 54px;
    height: 54px;
    font-size: 1.1rem;
  }
}

/* 既存の枠の中いっぱいに敷くサムネイル（講師個別ページの作品欄など） */
.sf-media-fill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* 講師カードの動画は枠が16:9ではないため、埋め込み時と同じく上下に余白を出す。
   枠が小さいので再生ボタンも小さくする。 */
.sf-e-instructor-youtube img,
.sf-instructor-youtube img {
  object-fit: contain;
}

.sf-e-instructor-youtube .sf-e-media-play,
.sf-instructor-youtube .sf-e-media-play {
  width: 44px;
  height: 44px;
  padding-left: 3px;
  border-width: 2px;
  font-size: 0.9rem;
}

/* 講師個別ページの作品一覧は枠が小さいので再生ボタンも小さくする */
.sf-ip-work-item .sf-e-media-play {
  width: 52px;
  height: 52px;
  padding-left: 4px;
  font-size: 1.1rem;
}

@media (max-width: 760px) {
  .sf-ip-work-item .sf-e-media-play {
    width: 46px;
    height: 46px;
    font-size: 0.95rem;
  }
}