@charset "utf-8";
.moviePage{position:relative; overflow:hidden; min-height:100vh; background:#eef7fb; color:#101848; font-family:"Noto Sans JP",sans-serif;}
.movieInner{position:relative; z-index:2; width:min(73.33vw,1100px); margin:0 auto; padding:min(2.67vw,40px) 0 min(2.67vw,40px);}
.movieLead{text-align:center;}
.movieLead .movieLogo{width:min(12.67vw,190px); margin:0 auto min(1.33vw,20px);}
.movieLead .movieLogo img{display:block; width:100%; height:auto;}
.movieLead h1{margin:0; font-size:min(2.6vw,39px); line-height:1.4; letter-spacing:.08em; font-weight:700;}
.movieLead > p:not(.movieLogo){margin:min(.67vw,10px) 0 0; font-size:min(1vw,15px); line-height:1.7; letter-spacing:.04em;}

.movieSec{margin-top:min(3.33vw,50px);}
.movieSec h2{position:relative; display:flex; align-items:center; gap:0; margin:0 0 min(1.33vw,20px); font-size:min(1.2vw,18px); line-height:1; letter-spacing:.06em; font-weight:700;}
.movieSec h2::after{content:""; flex:1; height:1px; background:currentColor; opacity:.45;}
.movieSec h2 span{display:inline-flex; align-items:center; justify-content:center; gap:min(.8vw,12px); height:min(2.67vw,40px); padding:0 min(1.6vw,24px); border-radius:999px; color:#fff;}
.movieSec h2 span em{font-style:normal; font-size:min(.93vw,14px); font-weight:500;}
.movieSec.is-blue h2{color:#58a1ff;}
.movieSec.is-blue h2 span{background:linear-gradient(90deg,#578ffd 0%,#7bdef1 100%);}
.movieSec.is-pink h2{color:#f3b3b8;}
.movieSec.is-pink h2 span{background:linear-gradient(90deg,#f7a6c8 0%,#ffd9c9 100%);}
.movieSec.is-green h2{color:#62d89d;}
.movieSec.is-green h2 span{background:linear-gradient(90deg,#56cfe8 0%,#61d989 100%);}

.movieList{display:grid; grid-template-columns:repeat(3,1fr); align-items:stretch; gap:min(3.33vw,50px) min(4vw,60px); margin:0; padding:0; list-style:none;}
.movieList li{display:flex; min-width:0;}
.movieCard{position:relative; display:grid; grid-template-columns:1fr auto; grid-template-rows:auto 1fr; align-items:start; width:100%; height:100%; min-width:0; padding:0; border:0; border-radius:min(.93vw,14px); background:#fff; box-shadow:0 min(.27vw,4px) min(.8vw,12px) rgba(16,24,72,.22); text-align:left; color:#101848; font:inherit; text-decoration:none; cursor:pointer; overflow:hidden; transition:transform .25s ease, box-shadow .25s ease; appearance:none;}
.movieCard:hover{transform:translateY(-4px); box-shadow:0 min(.53vw,8px) min(1.33vw,20px) rgba(16,24,72,.28);}

.movieThumb{position:relative; grid-column:1/3; grid-row:1/2; display:block; width:100%; aspect-ratio:16/7.4; background:#bdbdbd; overflow:hidden;}
.movieThumb img{display:block; width:100%; height:100%; object-fit:cover;}
.movieThumb::before{content:""; position:absolute; top:50%; left:50%; z-index:2; width:min(3.07vw,46px); height:min(3.07vw,46px); border:min(.2vw,3px) solid #fff; border-radius:50%; transform:translate(-50%,-50%); box-sizing:border-box;}
.movieThumb::after{content:""; position:absolute; top:50%; left:50%; z-index:3; width:0; height:0; border-top:min(.47vw,7px) solid transparent; border-bottom:min(.47vw,7px) solid transparent; border-left:min(.73vw,11px) solid #fff; transform:translate(-35%,-50%);}
.movieThumb.is-empty{background:#bfbfbf;}

.movieTitle{display:block; grid-column:1/2; grid-row:2/3; align-self:start; min-height:min(2.71vw,41px); padding:min(.87vw,13px) min(.67vw,10px) min(.93vw,14px) min(1.33vw,20px); font-size:min(.93vw,14px); line-height:1.45; letter-spacing:.02em; font-weight:600;}
.movieIcon{position:static; grid-column:2/3; grid-row:2/3; align-self:end; display:block; width:min(2vw,30px); margin:0 min(.87vw,13px) min(.8vw,12px) 0; flex-shrink:0;}
.movieIcon img{display:block; width:100%; height:auto;}

.movieCopy{margin:min(6.67vw,100px) 0 0; text-align:center; font-size:min(.87vw,13px); letter-spacing:.04em; color:#333;}

.movieBgText{position:absolute; z-index:1; color:#dfeaf7; opacity:.5; font-size:min(5.33vw,80px); line-height:1; font-style:italic; font-weight:500; letter-spacing:-.04em; pointer-events:none; white-space:nowrap;}
.movieBgText01{top:min(4vw,60px); left:min(1.33vw,20px);}
.movieBgText02{top:min(32vw,480px); right:min(3.33vw,50px);}
.movieBgText03{top:min(38vw,570px); left:min(1.33vw,20px);}
.movieBgText04{right:min(2vw,30px); bottom:min(10vw,150px);}

.movieCurve{position:absolute; z-index:1; display:block; background-repeat:no-repeat; background-position:center; background-size:contain; pointer-events:none;}
.movieCurve01{top:0; right:0; width:min(28.93vw,434px); aspect-ratio:434/187; background-image:url("../img/movie/movieCurve01.svg");}
.movieCurve02{top:min(14vw,210px); left:0; width:min(12.67vw,190px); aspect-ratio:190/1037; background-image:url("../img/movie/movieCurve02.svg");}
.movieCurve03{right:0; bottom:min(10vw,150px); width:min(23.8vw,357px); aspect-ratio:357/757; background-image:url("../img/movie/movieCurve03.svg");}

.mfp-fade.mfp-bg{opacity:0; transition:opacity .2s ease-out;}
.mfp-fade.mfp-bg.mfp-ready{opacity:.8;}
.mfp-fade.mfp-bg.mfp-removing{opacity:0;}
.mfp-fade.mfp-wrap .mfp-content{opacity:0; transform:translateY(10px); transition:opacity .2s ease-out, transform .2s ease-out;}
.mfp-fade.mfp-wrap.mfp-ready .mfp-content{opacity:1; transform:translateY(0);}
.mfp-fade.mfp-wrap.mfp-removing .mfp-content{opacity:0; transform:translateY(10px);}

.br-pc-only{display: block;}
.br-sp-only{display: none;}



@media screen and (max-width:767px){
  .movieInner{width:87.2vw; padding:8vw 0 10vw;}
  .movieLead .movieLogo{width:40vw; margin-bottom:5.33vw;}
  .movieLead h1{font-size:6.13vw; line-height:1.45;}
  .movieLead > p:not(.movieLogo){margin-top:2.67vw; font-size:3.47vw;}
  .movieSec{margin-top:10.67vw;}
  .movieSec h2{gap:0; margin-bottom:4vw; font-size:4vw;}
  .movieSec h2 span{gap:2.67vw; height:9.6vw; padding:0 4.8vw;}
  .movieSec h2 span em{font-size:3.2vw;}
  .movieList{grid-template-columns:1fr; gap:6.4vw;}
  .movieCard{height:100%; border-radius:3.2vw;}
  .movieThumb::before{width:11.73vw; height:11.73vw; border-width:.8vw;}
  .movieThumb::after{border-top-width:1.87vw; border-bottom-width:1.87vw; border-left-width:2.93vw;}
  .movieTitle{min-height:10.82vw; padding:3.47vw 2.67vw 4vw 4.27vw; font-size:3.73vw;}
  .movieIcon{width:8vw; margin:0 3.73vw 3.47vw 0;}
  .movieCopy{margin-top:16vw; font-size:3.2vw;}
  .movieBgText{font-size:13.33vw;}
  .movieBgText01{top:8vw; left:2vw;}
  .movieBgText02{top:60vw; right:2vw;}
  .movieBgText03{top:265vw; left:2vw;}
  .movieBgText04{right:2vw; bottom:20vw;}
  .movieCurve01{top:0; right:-18vw; width:70vw;}
  .movieCurve02{top:38vw; left:-18vw; width:30vw;}
  .movieCurve03{right:-28vw; bottom:18vw; width:58vw;}
.br-pc-only{display: none;}
.br-sp-only{display: block;}
}