@charset "utf-8";

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

/*body{background:url(../images/movie/bg.jpg) center top no-repeat fixed;}*/

#wrapper{padding-top:113px;}
#wrapper::before{content:''; position:fixed; top:0; left:0; width:100%; height:100%; background:url(../images/movie/bg-top.png) no-repeat center top;}
main{padding-bottom:82px;}

main h1{height:87px; margin-bottom:54px; background:url(../images/movie/title.png) no-repeat center top;}
main section ul{display:flex; flex-wrap:wrap; justify-content:center; width:1250px; margin:0 auto; transition:width 0.3s;}
main section ul li{width:575px; margin:0 25px 50px; transition:width 0.3s;}
main section ul li a{display:block; margin-bottom:17px; box-shadow:0px 0px 30px #6a5e3cb8;}
main section ul li a.moviemodal:before{transition:transform 0.3s, width 0.3s, height 0.3s;}
main section ul li a img{width:100%; height:auto;}
main section ul li span{display:block; height:49px; margin:0 12px; font-size:19px; line-height:49px; text-align:center; color:#6a5e3c; background:url(../images/movie/movie-title-small.png) no-repeat center top / 100% auto;}

main section ul.top{margin-bottom:58px;}
main section ul.top li{width:720px;}
main section ul.top li span{font-size:20px; background:url(../images/movie/movie-title-large.png) no-repeat center top;}

/*NEWアイコン*/
main section ul li.new{position:relative;}
main section ul li.new::before{content:''; position:absolute; top:-20px; left:-20px; width:80px; height:76px; background:url(../images/common/icon-new.png) no-repeat left top / 100% auto; z-index:10;}


/*アニメーション*/
main section{opacity:0; transform:translate(0,50px); transition:filter 3s cubic-bezier(0.215, 0.61, 0.355, 1),opacity 1.6s cubic-bezier(0.39, 0.575, 0.565, 1),transform 2s cubic-bezier(0.23, 1, 0.32, 1);}
main section.animated{opacity:1; filter: brightness(1); transform: translateY(0);}

}


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

#wrapper::before{background-size:cover;}

}


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

/*main section ul li a.moviemodal:before{width:140px; height:140px;}
main section ul{width:1210px;}
main section ul li{width:555px;}*/
main section ul.top{width:1540px; flex-wrap:wrap;}
/*main section ul.top li{width:600px;}*/

}


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

/*

		SP site

*******************************************************************************************/

#wrapper{padding-top:13.75vw;}
#wrapper::before{content:''; position:fixed; top:0; left:0; width:100%; height:100%; background:url(../images/characters/sp/bg-top.png) no-repeat center top / 100% auto;}
main{padding-bottom:13.594vw;}

main h1{width:34.219vw; height:13.594vw; margin:0 auto 7.813vw; background:url(../images/movie/title.png) no-repeat left top / 100% auto;}
main section ul{width:100%!important;}
main section ul.top{margin-bottom:9.063vw;}
main section ul li{width:100%!important;}
main section ul li + li{margin-top:9.063vw;}
main section ul li a{display:block; width:87.5vw!important; margin:0 auto 2.656vw; box-shadow:0px 4px 14px 4px rgba(106,94,60,0.35);}
main section ul li a img{width:100%; height:auto;}
main section ul li a.moviemodal::before{width:17.188vw; height:17.188vw;}
main section ul li span{display:block; width:91.25vw; height:7.656vw; margin:0 auto; font-size:3.125vw; line-height:7.656vw; text-align:center; color:#6a5e3c; background:url(../images/movie/movie-title-sp.png) no-repeat left top / 100% auto;}

/*NEWアイコン*/
main section ul li.new{position:relative;}
main section ul li.new::before{content:''; position:absolute; top:-3.594vw; left:2.344vw; width:12.5vw; height:11.875vw; background:url(../images/common/icon-new.png) no-repeat left top / 100% auto; z-index:10;}


/*アニメーション*/
main section{opacity:0; transform:translate(0,35vw); transition:opacity 1.6s cubic-bezier(0.39, 0.575, 0.565, 1),transform 1.6s cubic-bezier(0.23, 1, 0.32, 1);}
main section.animated{opacity:1; transform:translate(0);}

}