@charset "utf-8";

#mv { position: relative; width: 100%; height:700px;}
#mv #set1 { position: absolute; background: url("../img/top/mv_bg3.jpg") no-repeat; background-size: cover; width: 100%; height:700px;}
#mv #set2 { position: absolute; background: url("../img/top/mv_bg2.png") no-repeat; background-size: cover; width: 100%; height:700px; display: none}
#mv #set3 { position: absolute; background: url("../img/top/mv_bg.png") no-repeat; background-size: cover; width: 100%; height:700px; display: none}

#mv .logo { position: absolute; left: 50%; top:385px; margin-left: -300px}
#mv .info { position: absolute; left: 50%; top:50px; margin-left: 150px}
#mv .cast { position: absolute; left: 50%; top:13px; margin-left: -520px}
#mv .neko { position: absolute; left: 50%; top:525px; margin-left: 310px; z-index: 100}

#introduction {position: relative; background: url("../img/top/bg_1.png"); height:600px; overflow: hidden;}
#introduction .ac { position: absolute; left: 50%; top:-15px; margin-left: -350px}
#introduction .txt { position: absolute; left: 50%; top:100px; margin-left: -400px}
#introduction .p1 { position: absolute; left: 50%; top:80px; margin-left: 300px;}
#introduction .p2 { position: absolute; left: 50%; top:220px; margin-left: 140px;}
#introduction .p3 { position: absolute; left: 50%; top:80px; margin-left: 300px}
#introduction .p4 { position: absolute; left: 50%; top:220px; margin-left: 140px}
#introduction .p5 { position: absolute; left: 50%; top:80px; margin-left: 300px}
#introduction .p6 { position: absolute; left: 50%; top:220px; margin-left: 140px}

#introduction .btn a{ display: block; background-color: #FFF; width: 240px; height: 60px; text-align: center; line-height: 60px; color: #c4556a; font-size: 18px; font-weight: bold; position: absolute; left: 50%; bottom:80px; margin-left: -370px; text-decoration: none; border-radius: 30px;}
#introduction .btn2 a{ margin-left: -120px;}
#introduction .btn3 a{ margin-left: 130px;}

#info {display: flex;}

#news {background: url("../img/top/bg_2.png"); width: 50%; text-align: center; padding-bottom: 80px;}

#news .news_ttl{margin-top:80px;}

#news ul{ width: 76%; margin: 20px auto 0; text-align: left; font-size: 16px; font-weight: bold; line-height: 28px;}

#news ul a{color: #FFF; text-decoration: none;}

#news li{border-bottom: 1px solid #FFF; padding: 20px 20px 20px 0; background: url("../img/top/news_arrow.png") no-repeat right}
#news li a{display: block; }

#news .btn a{ display: block; background-color: #FFF; width: 240px; height: 60px; line-height: 60px; color: #3264a0; font-size: 18px; font-weight: bold; margin: 60px auto 0; text-decoration: none; border-radius: 30px;}

#twitter{background: url("../img/top/bg_3.png"); overflow: hidden; float: right; width: 50%; text-align: center;}

#twitter .twitter_ttl{margin-top:80px;}

#twitter #timeline{ width: 76%; margin: 50px auto 80px;}


#movie{position: relative; background: url("../img/top/bg_4.png"); overflow: hidden; width: 100%; text-align: center;  padding-bottom: 80px;}

#movie .movie_ttl{margin-top:80px;}
#movie #trailerInn, #movie #trailerInn2, #movie #trailerInn3{width:800px; height:450px; margin: 60px auto 30px}

#movie ul {width:810px; margin: 0 auto;}

#movie li a{ display: block; background-color: #FFF; width: 260px; height: 80px; line-height: 80px; color: #98c53b; font-size: 18px; font-weight: bold; margin: 10px 5px 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: 240px; height: 60px; line-height: 60px; color: #98c53b; font-size: 18px; font-weight: bold; margin: 80px auto 0; text-decoration: none; border-radius: 30px;}