@charset "utf-8";
.movie { width:80%; margin: 40px auto 80px;  padding: 0;}
.movie h3{ text-align: center; font-size: 16px; letter-spacing: 2px; padding: 20px 0;}
.movie button { font:inherit; margin: 0; }
.movie_thumb { position:relative; display:block; width:100%; padding:0; border:0; background:none; cursor:pointer; overflow:hidden; }
.movie_thumb img { display:block; width:100%; height:auto; transition:transform 0.4s ease; }
.movie_thumb:hover img { transform:scale(1.02); }
.movie_play { position:absolute; top:50%; left:50%; display:block; width:90px; height:90px; border-radius:50%; background:rgba(0,0,0,0.55); transform:translate(-50%,-50%); transition: 0.3s ease, transform 0.3s ease; }
.movie_thumb:hover .movie_play { background:rgba(0,0,0,0.75); transform:translate(-50%,-50%) scale(1.06); }
.movie_play_icon { position:absolute; top:50%; left:50%; display:block; width:0; height:0; margin:0; border-top:14px solid transparent; border-bottom:14px solid transparent; border-left:23px solid #fff; transform:translate(-35%,-50%); }
.movie_modal { position:fixed; top:0; left:0; z-index:10000; display: flex; align-items: center; justify-content: center; width:100%; height:100%; padding:60px; box-sizing:border-box; visibility:hidden; opacity:0; transition:opacity 0.3s ease, visibility 0.3s ease; }
.movie_modal.is-open { visibility:visible; opacity:1; }
.movie_modal_bg { position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.92); cursor:pointer; }
.movie_modal_inner { position:relative; z-index:1; width:min(1200px, 90vw, calc((100vh - 120px) * 16 / 9)); }
.movie_modal_video { position:relative; width:100%; aspect-ratio:16 / 9; background:#000; overflow:hidden; }
.movie_modal_video video { display:block; width:100%; height:100%; object-fit:contain; background:#000; }
.movie_modal_close { position:absolute; top:-45px; right:0; width:34px; height:34px; padding:0; border:0; background:none; cursor:pointer; }
.movie_modal_close::before, .movie_modal_close::after { content:""; position:absolute; top:50%; left:0; width:100%; height:2px; background:#fff; }
.movie_modal_close::before { transform:rotate(45deg); }
.movie_modal_close::after { transform:rotate(-45deg); }
body.is-movie-open { overflow:hidden; }
@media screen and (max-width:767px) {
.movie { width:100%; margin: 30px auto 60px; }
.movie h3{ text-align: center; font-size: 15px; letter-spacing: 2px; padding: 20px 0;}
.page { width:calc(100% - 30px); padding:40px 0; }
.page h1 { font-size:24px; }
.lead { font-size:14px; }
.movie_modal { padding:45px 15px 20px; }
.movie_modal_inner { width:min(100%, calc((100vh - 65px) * 16 / 9)); }
.movie_play { width:64px; height:64px; }
.movie_play_icon { margin:0; border-top-width:11px; border-bottom-width:11px; border-left-width:18px; }
.movie_modal_close { top:-38px; width:28px; height:28px; }
}