/* 紹介動画の軽い埋め込み（共通部品）2026-10-24。MEOページ・サイネージ運用代行ページで共用。
   押すまでは画像と再生ボタンだけ。押したら dp-video.js が youtube-nocookie の iframe に差し替える。 */
.dp-video { margin: 2em auto 2.4em; max-width: 960px; }
.dp-video .dp-video-btn { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; margin: 0; padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: #0b1b2b; cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,.14); }
.dp-video .dp-video-btn img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dp-video .dp-video-play { position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; background: rgba(255,255,255,.95); box-shadow: 0 4px 14px rgba(0,0,0,.3); transition: transform .2s ease; }
.dp-video .dp-video-play::before { content: ""; position: absolute; left: 50%; top: 50%; margin: -15px 0 0 -9px; border-style: solid; border-width: 15px 0 15px 26px; border-color: transparent transparent transparent #51ba97; }
.dp-video .dp-video-btn:hover .dp-video-play { transform: scale(1.08); }
.dp-video .dp-video-btn:focus-visible { outline: 3px solid #0a86ac; outline-offset: 4px; }
.dp-video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: 10px; background: #000; }
.dp-video .dp-video-cap { margin: .8em 0 0; text-align: center; color: #555; font-size: 1.4rem; line-height: 1.6; }
.dp-video .dp-video-nojs { margin: .6em 0 0; text-align: center; }
@media screen and (max-width: 799px) {
  .dp-video { margin: 1.6em 0 2em; }
  .dp-video .dp-video-play { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
  .dp-video .dp-video-play::before { margin: -12px 0 0 -7px; border-width: 12px 0 12px 20px; }
  .dp-video .dp-video-cap { font-size: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) { .dp-video .dp-video-play { transition: none; } }
@media print { .dp-video { display: none !important; } }