@charset "UTF-8";
/* ==========================================================================
   共通コンポーネント: YouTube動画埋め込み(クリックまでiframeを読み込まない)
   本数がいくつあっても、HTML側は data-video-id を変えるだけで使い回せる。

   <div class="youtube-facade" data-video-id="動画ID">
     <img src="https://i.ytimg.com/vi/動画ID/hqdefault.jpg" alt="" loading="lazy" class="youtube-facade__thumb">
     <button type="button" class="youtube-facade__play" aria-label="動画を再生"></button>
   </div>
   ========================================================================== */
.youtube-facade {
  position: relative;
  aspect-ratio: 16/9;
  cursor: pointer;
  overflow: hidden;
  border-radius: 4px;
  background-color: #EEEEEE;
}
.youtube-facade__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.youtube-facade__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 48px;
  border: none;
  border-radius: 8px;
  background-color: rgba(0, 0, 0, 0.7);
  cursor: pointer;
}
.youtube-facade__play::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 55%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent #ffffff;
}
@media (any-hover: hover) {
  .youtube-facade__play {
    transition: opacity 0.3s;
  }
  .youtube-facade__play:hover {
    opacity: 0.8;
  }
}
@media only screen and (max-width: 767px) {
  .youtube-facade__play {
    width: 52px;
    height: 36px;
  }
  .youtube-facade__play::before {
    border-width: 9px 0 9px 15px;
  }
}
.youtube-facade iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}/*# sourceMappingURL=youtube-facade.css.map */