/* 紹介動画の枠(トップ・demo.html 共通)
 * 最初はサムネイル画像だけを出し、押したときだけ YouTube を読み込む(js/video.js)。
 * ページを開いただけでは YouTube(Google)に何も送らない・ページが重くならない。
 */
/* 説明文は句の切れ目でだけ折り返す(言葉の途中で割らない・トップの見出しと同じ考え方) */
.video-sub .ph{display:inline-block;}
.video-box{max-width:880px;margin:34px auto 0;}
.video-facade{position:relative;display:block;aspect-ratio:16/9;border-radius:16px;overflow:hidden;
  background:#19294a;box-shadow:0 26px 54px -26px rgba(25,41,74,.55);}
.video-facade img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .3s;}
.video-facade:hover img,.video-facade:focus-visible img{transform:scale(1.02);}
.video-facade:focus-visible{outline:3px solid #a06a2c;outline-offset:4px;}
/* 再生ボタンはサムネイルの文字(左側)に重ならないよう、画面写真の上に置く */
.video-facade .play{position:absolute;left:73%;top:54%;width:96px;height:96px;margin:-48px 0 0 -48px;border-radius:50%;
  background:rgba(160,106,44,.96);box-shadow:0 12px 30px rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;
  transition:transform .2s;}
.video-facade:hover .play{transform:scale(1.08);}
.video-facade .play::before{content:"";margin-left:8px;border-left:30px solid #fff;border-top:18px solid transparent;border-bottom:18px solid transparent;}
.video-facade .len{position:absolute;right:14px;bottom:12px;background:rgba(0,0,0,.72);color:#fff;font-size:13px;font-weight:700;
  padding:3px 9px;border-radius:6px;letter-spacing:.04em;}
.video-frame{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:16px;background:#000;
  box-shadow:0 26px 54px -26px rgba(25,41,74,.55);}
.video-note{font-size:13px;color:#6d7280;text-align:center;margin-top:12px;line-height:1.7;}
/* 続きの動画(YouTube の再生リスト)へのリンク。2 本目以降は埋め込まずにここから(LP を直さずに動画を足せる) */
.video-more{text-align:center;margin-top:18px;}
.video-more a{display:inline-block;padding:11px 26px;border:1.5px solid #a06a2c;border-radius:999px;color:#a06a2c;
  font-size:15px;font-weight:700;text-decoration:none;letter-spacing:.02em;transition:background .2s,color .2s;}
.video-more a::after{content:" →";}
.video-more a:hover,.video-more a:focus-visible{background:#a06a2c;color:#fff;}
.video-more a:focus-visible{outline:3px solid #a06a2c;outline-offset:3px;}
@media (max-width:640px){
  .video-box{margin-top:24px;}
  .video-facade,.video-frame{border-radius:10px;}
  .video-facade .play{width:64px;height:64px;margin:-32px 0 0 -32px;}
  .video-facade .play::before{margin-left:6px;border-left-width:20px;border-top-width:12px;border-bottom-width:12px;}
}