@charset "utf-8";

#mv { position: relative; width: 640px; height:900px; overflow: hidden;}

#mv #set1{ position: absolute; background: url("../img/top/sp_mv_bg3.png") no-repeat top center; background-size: cover; width: 640px; height:900px;}

#mv #set2{ position: absolute; background: url("../img/top/sp_mv_bg2.png") no-repeat top center; background-size: cover; width: 640px; height:900px; display: none}

#mv #set3{ position: absolute; background: url("../img/top/sp_mv_bg.png") no-repeat top center; background-size: cover; width: 640px; height:900px; display: none}

.logo { position: absolute; left: 0; bottom:40px;}
.cast { position: absolute; left: 0; top:8px;}
.neko { position: absolute; left: 30px; bottom:335px}

#share{text-align:center; padding: 50px;}
#share ul{width:330px; margin: 40px auto 0;  overflow: hidden;}
#share li{float: left; margin: 0 15px;}

#introduction {position: relative; background: url("../../../assets/img/top/bg_1.png"); height:1100px; overflow: hidden;}
#introduction .ac { position: absolute; left: 25px; top:40px;}
#introduction .txt { position: absolute; left: 40px; top:80px;}
#introduction .p1 { position: absolute; left: 475px; top:340px;}
#introduction .p2 { position: absolute; left: 355px; top:490px;}
#introduction .p3 { position: absolute; left: 475px; top:340px;}
#introduction .p4 { position: absolute; left: 355px; top:490px;}
#introduction .p5 { position: absolute; left: 475px; top:340px;}
#introduction .p6 { position: absolute; left: 355px; top:490px;}
#introduction .btn a{ display: block; background-color: #FFF; width: 400px; height: 80px; text-align: center; line-height: 80px; color: #c4556a; font-size: 28px; font-weight: bold; position: absolute; left: 50%; bottom:280px; margin-left: -200px; text-decoration: none; border-radius: 40px;}
#introduction .btn2 a{ bottom:180px;}
#introduction .btn3 a{ bottom:80px;}

#news{background: url("../../../assets/img/top/bg_2.png"); padding: 80px 30px;text-align: center; }
#news ul{ margin: 60px auto; text-align: left; font-size: 28px; font-weight: bold; line-height: 1.6em;}
#news ul a{color: #FFF; text-decoration: none;}
#news li{border-bottom: 2px solid #FFF; padding: 40px 40px 40px 0; background: url("../img/top/sp_news_arrow.png") no-repeat right}
#news li a{display: block; }
#news .btn a{ display: block; background-color: #FFF; width: 400px; height: 80px; line-height: 80px; color: #3264a0; font-size: 28px; font-weight: bold; margin: 60px auto 0; text-decoration: none; border-radius: 40px;}

#twitter{position: relative; background: url("../../../assets/img/top/bg_3.png"); padding: 80px 0; text-align: 
center}
#twitter #timeline{ width:580px; margin: 60px auto 0;}


#movie{background: url("../../../assets/img/top/bg_4.png"); overflow: hidden; width: 100%; text-align: center;  padding: 182px 0 80px; margin-top: -102px;}
#movie #trailerInn,#movie #trailerInn2,#movie #trailerInn3{width:580px; height:326px; margin: 60px auto 0}
#movie ul {width:600px; margin: 0 auto;}
#movie li a{ display: block; background-color: #FFF; width: 280px; height: 100px; line-height: 100px; color: #98c53b; font-size: 24px; font-weight: bold; margin: 20px 10px 0; text-decoration: none; border-radius: 10px; float: left}
#movie .trailer-selected a {opacity: 0.6}
#movie .btn a{ display: block; background-color: #FFF; width: 400px; height: 80px; line-height: 80px; color: #98c53b; font-size: 28px; font-weight: bold; margin: 80px auto 0; text-decoration: none; border-radius: 40px;}