@charset "utf-8";
@media screen and (min-width:641px){
#teaser {height: 465px;}
#teaser .wrap {height: 465px; min-width: 1200px; position: relative; margin: 0 auto; width: 100%;}
#teaser .wrap a.moviemodal {position: absolute; right: 50%; top: 0; margin-right: -224px; width: 829px; display: block; transition: 0.8s 0.1s cubic-bezier(0.175, 0.885, 0.32, 1);}
#teaser .wrap a.moviemodal::after{content: ''; width: 198px; height: 198px; background: url(/thelastremnant/images/btn_play.png) center center no-repeat; position: absolute; left: 50%; top: 50%; margin: -99px 0 0 -99px; transition: 0.8s cubic-bezier(0.175, 0.885, 0.32, 1);}
#player01 {width: 829px;height: 465px; position: relative; z-index: -1; background: url(/thelastremnant/images/pv.jpg) no-repeat left top / 100% auto;}
#teaser h2 {position: absolute; left: 50%; top: 0; margin-left: 224px;}
#teaser h2 img{height: 465px; width: auto;}
#teaser .wrap a.moviemodal:hover {filter: brightness(1.3);}
#teaser .wrap a.moviemodal:hover::after{transform: scale(1.15); transform-origin: center center;}

}
@media screen and (min-width:1201px){
#teaser {height: 38.75vw;}
#teaser .wrap {height: 38.75vw;}
#teaser .wrap a.moviemodal {margin-right:-18.698vw; max-width: inherit; width: auto;}
#player01 {width: 68.75vw;height: 38.75vw;}
#teaser h2 {margin-left: 18.698vw;}
#teaser h2 img{height: 38.75vw; width: auto;}
}

@media screen and (max-width:640px){    
#teaser {height: 56.563vw;}
#teaser .wrap {height: 56.563vw; padding: 19.625vw 4.688vw 0;}
#teaser .wrap a.moviemodal {display: block; position: relative;}
#teaser .wrap a.moviemodal::after{content: ''; width: 100%; height: 100%; background: url(/thelastremnant/images/sp/pv.png) center center no-repeat; position: absolute; left: 0; top: 0; margin: 0; background-size: cover;}
#player01 {width:90.625vw;height: 50.938vw; position: relative; z-index: -1; background: url(/thelastremnant/images/sp/pv-bg.jpg) no-repeat left top / 100% auto;}

}