/* 寝具祭の紹介動画（東京ショールーム・イベント詳細。parts/event-video.php）
   移植ページは現行のCSSで組まれているので、クラス名は hs-video で始めて衝突させない */
/* イベント詳細：直前の「寝心地を比べて選べるチャンス」と続けて読めるよう、.sec の上の余白（90px）を詰める。
   下は次の会場写真・セクションとくっつかないよう、上（説明文から添え書きまで：PC 約90px／SP 約78px）とほぼそろえる。
   会場写真の側にも20px前後の余白があるため、写真がある会場とない会場の中間の値にしている */
.hs-video-sec.sec{padding-top:20px;padding-bottom:80px}
.hs-video{max-width:880px;margin:40px auto 0}
.hs-video__lead{margin:0 0 16px;font-size:15px;line-height:1.9;text-align:center}
.hs-video__frame{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#111;border-radius:4px;box-shadow:0 10px 30px rgba(0,0,0,.12)}
.hs-video__frame img{display:block;width:100%;height:100%;object-fit:cover;opacity:.88;transition:transform .6s ease}
a.hs-video__frame:hover img{transform:scale(1.03)}
.hs-video__play{position:absolute;inset:0;display:grid;place-items:center}
.hs-video__play span{width:80px;height:80px;border-radius:50%;background:rgba(183,28,28,.92);display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.3);transition:transform .3s ease}
a.hs-video__frame:hover .hs-video__play span{transform:scale(1.08)}
.hs-video__play span::before{content:'';border-left:18px solid #fff;border-top:12px solid transparent;border-bottom:12px solid transparent;margin-left:5px}
.hs-video__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
a.hs-video__frame:focus-visible{outline:3px solid #B71C1C;outline-offset:3px}
@media screen and (max-width:768px){
  .hs-video-sec.sec{padding-bottom:68px}
  .hs-video{margin-top:28px}
  .hs-video__lead{font-size:14px}
  .hs-video__play span{width:64px;height:64px}
}