@charset "utf-8";

@media screen and (min-width:641px){

#siteheader nav ul li:nth-child(6) a:after {background-position: -888px -185px; opacity: 1;}

main {background: url(../images/movie/bg.jpg) center top no-repeat fixed; color: #502555; padding-bottom: 120px;}

main .wrap {padding: 96px 0 10px;}
main .wrap ul {text-align: center; margin: 16px 0 0;}
main .wrap ul li {display: inline-block; vertical-align: top; width: 549px; padding: 0 20px 0 0; position: relative;}
main .wrap ul li.new::after{content: ''; width: 127px; height: 127px; background: url(../images/common/new.png) left top no-repeat; position: absolute; left: -54px; top: -32px; z-index: 100;}
main .wrap ul li:nth-child(even) {padding: 0 0 0 12px;}
main .wrap ul li:nth-child(n+3) {margin-top: 50px;}
main .wrap ul li a{position: relative; display: block; transition: 0.5s;}
main .wrap ul li a::after{content: ''; width: 104px; height: 104px; background: url(../images/movie/icon-play.png) center center no-repeat; position: absolute; left: 50%; top: 50%; margin: -52px 0 0 -52px;}
main .wrap ul li a:hover{ opacity: 0.7;}
main .wrap ul li img {width: 100%; height: auto;}
main .wrap ul li span {display: block; font-size: 17px; line-height: 20px;}


}
@media screen and (min-width:1401px){}
@media screen and (min-width:1920px){main {background-size: 100% auto;}}




@media screen and (max-width:640px){

main { color: #502555; padding-bottom: 5.5rem;}
main:before {content: ''; width: 100%; height: 100%; background: url(../images/movie/sp/bg.jpg) center -1.2rem no-repeat ; background-size: 100% auto; position: fixed; left: 0; top: 0; z-index: -1;}

main .wrap {padding: 2rem 0 1.5rem;}
main .wrap ul {text-align: center; padding: 0.6rem 0 0;}
main .wrap ul li {padding: 0 0.9rem 0 0.7rem; position: relative;}
main .wrap ul li + li {margin-top: 2.8rem;}
main .wrap ul li.new:after{content: ''; width: 6.35rem; height: 6.35rem; background: url(../images/common/new.png) left top no-repeat; position: absolute; left: -1.1rem; top: -1.3rem; z-index: 10; background-size: 100% auto;}

main .wrap ul li a{position: relative; display: block;}
main .wrap ul li a::after{content: ''; width: 5.2rem; height: 5.2rem; background: url(../images/movie/icon-play.png) center center no-repeat; position: absolute; left: 50%; top: 50%; margin: -2.6rem 0 0 -2.6rem; background-size: 100% auto;}
main .wrap ul li img {width: 100%; height: auto;}
main .wrap ul li span {display: block; font-size: 1.15rem; line-height: 1.75rem; margin-top: 0.45rem;}


}