@charset 'utf-8';

/* z-index */
/*
#bgs: 300
#header: 3000
コンテンツ: 1000~
#credit: 2000
#navs: 5000
*/




/*--------------------------------------*/
/* [Loading] */

div#loading{
    position: fixed;
    left:0; top:0;
    width:100%; height: 100%;
    background: #000;
}

div#loading h1{
    position: absolute;
    width: 40%;
    left:50%; top: 55%;
}

div#loading h1 img{
    width:100%; height: auto;
    margin-left: -50%;
    margin-top: -50%;
}


div#loading #progress{
    position: absolute;
    left:50%; top: 60%;
    margin-left: -12px; margin-top: -12px;
}


div#loading #se{
    position: absolute;
    left:50%; top: 65%;
    margin-left: -93px; margin-top: -11px;
}




/*--------------------------------------*/
/* [TOP] */

div#top{
    position: relative;
    left:0; top:0;
	width:100%; /*height:100%;*/
    
    opacity: 0;
	filter: alpha(opacity=0);
	-ms-filter: "alpha(opacity=0)";
	-moz-opacity: 0;
}


div#top h1{
    position: absolute;
    width: 35%;
    left:50%; bottom: 150px;
}


div#top h1 img{
    width:100%; height: auto;
    margin-left: -50%;
}


div#bnrdTV{
    position: absolute;
    left:15px; bottom:65px;
}

div#bnrdTV a:hover img{
    opacity: 0.75;
	filter: alpha(opacity=75);
	-ms-filter: "alpha(opacity=75)";
	-moz-opacity: 0.75;
}


#btnRanking{
    position: absolute;
    left:15px; bottom:65px;
}

#btnRanking a:hover img{
    opacity: 0.75;
	filter: alpha(opacity=75);
	-ms-filter: "alpha(opacity=75)";
	-moz-opacity: 0.75;
}


div#top p#copyright{
    position: absolute;
    right:30px; bottom: 15px;
}


div#top #tickerwrapper{
    position: absolute;
    left:30px; bottom:20px;
    width: 870px;
    overflow: hidden;
}


div#top p.scrolldown{
	position: absolute;
	left:50%; bottom: 50px;
	margin-left: -30px;
}


div#top p.scrolldown a:hover img{
	opacity: 0.75;
	filter: alpha(opacity=75);
	-ms-filter: "alpha(opacity=75)";
	-moz-opacity: 0.75;
}



.updown{
    animation: updown 1s infinite ease;
        -webkit-animation: updown 1s infinite ease;
        -moz-animation: updown 1s infinite ease;
}

@keyframes updown{
	0% {-webkit-transform:translate(0, 0);}
	50% {-webkit-transform:translate(0, -5px);}
	100% {-webkit-transform:translate(0, 0);}
}
@-webkit-keyframes updown{
	0% {-webkit-transform:translate(0, 0);}
	50% {-webkit-transform:translate(0, -5px);}
	100% {-webkit-transform:translate(0, 0);}
}
@-moz-keyframes updown{
	0% {-moz-transform:translate(0, 0);}
	50% {-moz-transform:translate(0, -5px);}
	100% {-moz-transform:translate(0, 0);}
}





/*--------------------------------------*/
/* [INTRO] */

div#intro{
    position: relative;
    background: url('../img/intro/bg.png') no-repeat center top;
    background-size: contain;
}


div#intro div.inner{
    width:100%;
    padding:110px auto 0 auto;
    /*background: url('../common/img/bg_black.gif') repeat-x left bottom;*/
}


div#intro div.main{
    width:750px;
    margin: 0 auto;
    padding-bottom:70px;
}


div#intro h3{
    margin: 110px 0 0 0;
}


div#intro p{
    margin-top: 90px;
}




/*--------------------------------------*/
/* [STORY] */

div#story{
    position: relative;
    background: url('../img/story/box01_bg.png') no-repeat center top;
    background-size: contain;
}


div#story h2{
    
}


div#story div.storyboxSuper{
    width:100%;
    padding: 0 0 75px 0;
}

div#story div.storyboxSuper div.inner{
    width:876px;
    margin:0 auto;
    padding-top: 75px;
}

div#story div.storyHero{
    position:relative;
    height:288px;
}

div#story div.storyHero div{
    position: absolute;
    left:68px;
}


div#story div.storyHero h3{
    position: absolute;
    bottom:15px;
    z-index: 1;
}

div#story div.storyboxSuper p{
    margin:45px 0 0 68px;
}


div#story div#storybox2{
    background: url('../img/story/box02_bg.png') no-repeat center top;
    background-size: cover;
}

div#story div#storybox2 div.inner{
    padding-top: 0;
}


div#story div#storybox3{
    /*background:#000;*/
}

div#story div#storybox3 div.storyHero{
    height:315px;
}

div#story div#storybox3 h3{
    bottom:0;
}



div#story div#storybox4{
    /*background:#000;*/
}


div#story div#storybox4 div.storyHero{
    height:565px;
}

div#story div#storybox4 div.storyHero div{
    left:auto; right:0;
}


div#story div#storybox4 p{
    margin-left:0 !important;
}




/*--------------------------------------*/
/* [CAST] */

div#cast{
    position: relative;
    /*background: url('../img/cast/bg.png') repeat-x left top;*/
}


div#cast div.inner{
    width:750px;
    margin:0 auto;
    padding: 45px 0 75px 0;
}


div#cast ul#castThumb{
    width: 750px;
    overflow: hidden;
}


div#cast ul#castThumb li{
    float:left;
    margin: 10px 10px 0 0;
}


div#cast ul#castThumb a{
    display: block;
}

div#cast .cast1{background: url('../img/cast/thum_01_on.jpg') no-repeat;}
div#cast .cast2{background: url('../img/cast/thum_02_on.jpg') no-repeat;}
div#cast .cast3{background: url('../img/cast/thum_03_on.jpg') no-repeat;}
div#cast .cast4{background: url('../img/cast/thum_04_on.jpg') no-repeat;}
div#cast .cast5{background: url('../img/cast/thum_05_on.jpg') no-repeat;}
div#cast .cast6{background: url('../img/cast/thum_06_on.jpg') no-repeat;}
div#cast .cast7{background: url('../img/cast/thum_07_on.jpg') no-repeat;}
div#cast .cast8{background: url('../img/cast/thum_08_on.jpg') no-repeat;}
div#cast .cast9{background: url('../img/cast/thum_09_on.jpg') no-repeat;}
div#cast .cast10{background: url('../img/cast/thum_10_on.jpg') no-repeat;}
div#cast .cast11{background: url('../img/cast/thum_11_on.jpg') no-repeat;}
div#cast .cast12{background: url('../img/cast/thum_12_on.jpg') no-repeat;}
div#cast .cast13{background: url('../img/cast/thum_13_on.jpg') no-repeat;}
div#cast .cast14{background: url('../img/cast/thum_14_on.jpg') no-repeat;}
div#cast .cast15{background: url('../img/cast/thum_15_on.jpg') no-repeat;}
div#cast .cast16{background: url('../img/cast/thum_16_on.jpg') no-repeat;}
div#cast .cast17{background: url('../img/cast/thum_17_on.jpg') no-repeat;}
div#cast .cast18{background: url('../img/cast/thum_18_on.jpg') no-repeat;}

.fadeout{  
    opacity: 1;
	filter: alpha(opacity=100);
	-ms-filter: "alpha(opacity=100)";
	-moz-opacity: 1;
    
    -webkit-transition: 0.6s ease-out;  
       -moz-transition: 0.6s ease-out;  
         -o-transition: 0.6s ease-out;  
            transition: 0.6s ease-out;  
}

.fadeout:hover{  
    opacity: 0;
	filter: alpha(opacity=0);
	-ms-filter: "alpha(opacity=0)";
	-moz-opacity: 0;
}





/*--------------------------------------*/
/* [CAST DETAIL] */

#castDetails{
    width:100%; height: 100%;
	overflow: hidden;
	position: fixed;
    left:100%; top: 0;
	z-index:30000;
    background: #000;
    display:none;
}


#castDetails div#castMain{
    position: relative;
    height: 100%;
}


div.castBoxSuper{
    position: absolute;
    width:100%; height: 100%;
    top:0;
    background-size: cover;
}


div#castDetails div.prev{
    position: absolute;
    left:410px; top:50%;
    z-index: 20;
    margin-top:-23px;
}

div#castDetails div.next{
    position: absolute;
    right:20px; top:50%;
    z-index: 21;
    margin-top: -23px;
}



div.castBoxSuper div.mesh{
    position: absolute;
    left:0; top:0;
    width: 100%; height: 100%;
    background: url('../common/img/bg_mesh.png');
    
    opacity: 0.5;
	filter: alpha(opacity=50);
	-ms-filter: "alpha(opacity=50)";
	-moz-opacity: 0.5;
}


div.castBoxSuper div.inner{
    position: relative;
    width:100%; height: 100%;
    background: url('../img/cast/bg_black.gif') repeat-y;
}


div.castBoxSuper div.txts{
    width:300px;
    position: absolute;
    left:45px; bottom: 45px;
}


div.castBoxSuper h3{
    padding-top: 40px;
}


div.castBoxSuper p{
    padding-top: 20px;
    font-size:12px;
    font-size:1.2rem;
    line-height: 2;
    color:#FFF;
}


div.castBoxSuper.cast1{background: url('../img/cast/cast01_img.jpg') no-repeat center top;}
div.castBoxSuper.cast2{background: url('../img/cast/cast02_img.jpg') no-repeat center top;}
div.castBoxSuper.cast3{background: url('../img/cast/cast03_img.jpg') no-repeat center top;}
div.castBoxSuper.cast4{background: url('../img/cast/cast04_img.jpg') no-repeat center top;}
div.castBoxSuper.cast5{background: url('../img/cast/cast05_img.jpg') no-repeat center top;}
div.castBoxSuper.cast6{background: url('../img/cast/cast06_img.jpg') no-repeat center top;}
div.castBoxSuper.cast7{background: url('../img/cast/cast07_img.jpg') no-repeat center top;}
div.castBoxSuper.cast8{background: url('../img/cast/cast08_img.jpg') no-repeat center top;}
div.castBoxSuper.cast9{background: url('../img/cast/cast09_img.jpg') no-repeat center top;}
div.castBoxSuper.cast10{background: url('../img/cast/cast10_img.jpg') no-repeat center top;}
div.castBoxSuper.cast11{background: url('../img/cast/cast11_img.jpg') no-repeat center top;}
div.castBoxSuper.cast12{background: url('../img/cast/cast12_img.jpg') no-repeat center top;}
div.castBoxSuper.cast13{background: url('../img/cast/cast13_img.jpg') no-repeat center top;}
div.castBoxSuper.cast14{background: url('../img/cast/cast14_img.jpg') no-repeat center top;}
div.castBoxSuper.cast15{background: url('../img/cast/cast15_img.jpg') no-repeat center top;}
div.castBoxSuper.cast16{background: url('../img/cast/cast16_img.jpg') no-repeat center top;}
div.castBoxSuper.cast17{background: url('../img/cast/cast17_img.jpg') no-repeat center top;}
div.castBoxSuper.cast18{background: url('../img/cast/cast18_img.jpg') no-repeat center top;}

div.castBoxSuper.cast15 div.txts, div.castBoxSuper.cast16 div.txts, 
div.castBoxSuper.cast17 div.txts, div.castBoxSuper.cast18 div.txts{
    width: 92%;
}


div.castBoxSuper.cast18 div#books{
    width:100%;
    padding-top: 40px;
    overflow: hidden;
}


div.castBoxSuper.cast18 div#books div.le{
    width: 100px;
    float:left;
}


div.castBoxSuper.cast18 div#books div.ri{
    width:100%;
    float:right;
    margin-left:-100px;
}

div.castBoxSuper.cast18 div#books div.ri p{
    margin-left: 100px;
}




/*--------------------------------------*/
/* [MUSIC] */

#music{
    position: relative;
    background: #d90000;
}


#music div.inner{
    width:960px;
    margin:0 auto;
    padding: 45px 0 75px 0;
}


#music div.main{
    width:960px;
    padding-top: 50px;
    overflow: hidden;
}


#music div.le{
    width: 515px;
    float: left;
}


#music div.ri{
    width:445px;
    float: left;
}


#music div.main p{
    width: 445px;
    margin-top:20px;
    font-size:12px;
    font-size:1.2rem;
    color:#FFF;
    line-height: 2;
}




/*--------------------------------------*/
/* [FOOTER] */

div#footer{
    height:770px;
    background: url('../img/footer/bg.jpg') no-repeat center top;
    background-size:cover;
    text-align: center;
}


div#footer h2{
    padding-top: 400px;
}


div#footer p#footerCopyright{
    padding-top: 50px;
}


div#footer p.pageup{
    position:static !important;
    padding-top: 25px;
}




/*--------------------------------------*/
/* [NEWS] */

#news{
    width:100%; height: 100%;
	overflow: hidden;
	position: fixed;
    left:100%; top: 0;
	z-index:30000;
	display: none;
}

#news .inner{
    position: relative;
    padding-bottom: 100px;
    z-index: 200;
}


#news .pageBg{
    position: fixed;
    left:100%; top:0;
    z-index: 100;
    width: 0; height: 100%;
    background: url('../img/news/bg_main.jpg') no-repeat center top;
    background-size:cover;
}


#news canvas{
    position: fixed;
    top:0; left:0;
    z-index: 100;
    display: block;
    width: 100%; height: 100%;
}


#news #newsBoxWrapper{
    width:800px;
    margin: 0 auto;
}


#news div.newsBoxSuper{
    margin-top:60px;
}


#news div.newsBoxSuper .newsTitle{
    padding-top: 20px;
    background: url('../img/news/line_red.png') repeat-x;
}

#news h2{
	position: fixed;
	left:90px; top:70px;
}


#news div.newsBoxSuper h3{
    padding-bottom: 20px;
    background: url('../img/news/line_red.png') repeat-x left bottom;
    font-size:22px;
    font-size:2.2rem;
    color:#FFF;
}


#news div.newsBoxSuper h3 span{
    padding-right: 15px;
    color:#e60012;
}


#news div.newsBoxSuper h4{
    font-size:18px;
    font-size:1.8rem;
    color:#FFF;
}


#news div.newsBoxSuper p{
    margin-top: 35px;
    font-size:14px;
    font-size:1.4rem;
    line-height: 2;
    color:#FFF;
}


#news div.newsBoxSuper bold{
    font-weight: bold;
}


#news div.newsBoxSuper .img{
    margin-top: 35px;
}


#news div.newsBoxSuper a{
    color:#FFF;
}


#news div.newsBoxSuper a:hover{
    text-decoration: none;
}




/*--------------------------------------*/
/*[TRAILER]*/

#trailer{
    width:0; height: 100%;
    min-width: 1200px; min-height: 620px;
    overflow: hidden;
    position: fixed;
    left:100%; top: 0;
    z-index:30000;
    background: #000;
}


/* BEGIN[player setting] */
#trailer .youtubeWrap {
    padding-bottom: 56.25%;
    margin-top: -40px;
}

#trailer .youtubeWrap iframe {
    position: absolute;
    left: 0px;
    width: 100%; height: 100%;
    top: 50%;
    -webkit-transform: translate(0px, -50%);
    -moz-transform: translate(0px, -50%);
    -ms-transform: translate(0px, -50%);
    transform: translate(0px, -50%);
}
/* END[player setting] */


#trailer ul{
    position: absolute;
    left:50%; bottom:8%;
    margin-left: -574px;
}

#trailer li{
    width: 287px;
    float:left;
}


#trailer p.btnClose{
    position: absolute;
    right:13px; top:10px;
}


#trailer p.btnClose a:hover img{
    opacity: 0.6;
	filter: alpha(opacity=60);
	-ms-filter: "alpha(opacity=60)";
	-moz-opacity: 0.6;
}




/*--------------------------------------*/
/* [THEATER] */

div#theater{
	width:100%; height: 100%;
	overflow: hidden;
	position: fixed;
    left:100%; top: 0;
	z-index:30000;
	display: none;
}

div#theater .pageBg{
    position: fixed;
    left:100%;top:0;
    z-index: 100;
    width: 100%; height: 100%;
    background: url('../img/theater/bg_main.jpg') no-repeat center top;
    background-size:cover;
}


div#theater canvas{
    position: fixed;
    top:0; left:0;
    z-index: 100;
    display: block;
    width: 100%; height: 100%;
}


div#theater .inner{
    position: relative;
    padding-bottom: 100px;
    z-index: 200;
}


div#theater h2{
	position: fixed;
	left:90px; top:70px;
}


div#theater #theaterSideNav{
	position: fixed;
	left:90px; top:130px;
}


div#theater #theaterSideNav li{
    padding-bottom: 10px;
}


div#theater table{
    position: relative;
    width:740px;
    margin: 45px auto 0 auto;
    border-collapse:separate;
    border-spacing:2px;
}

div#theater table td{
    padding: 5px 20px;
    font-size:14px;
    font-size:1.4rem;
    color:#FFF;
    background: url('../img/theater/bg_cell.png');
    text-align: center;
}

div#theater table td.theaterName{
    width: 400px;
    text-align: left;
}

div#theater .t11{
	font-size:11px;
}

div#theater table a{color:#FFF;}
div#theater table a:hover{text-decoration: none;}



div#news table{
    position: relative;
    width:700px;
    margin: 45px auto 0 auto;
    border-collapse:separate;
    border-spacing:2px;
}

div#news table td{
    padding: 5px 20px;
    font-size:14px;
    font-size:1.4rem;
    color:#FFF;
    background: url('../img/theater/bg_cell.png');
    text-align: center;
	border:1px dotted #570000;
}

div#news table td.theaterName{
    width: 150px;
    text-align: left;
}

div#news .t11{
	font-size:11px;
}

div#news table a{color:#FFF;}
div#news table a:hover{text-decoration: none;}



div#theater div.image{
    width:740px;
    margin: 45px auto 0 auto;
}



#imgJK .imgL {
	width:300px;
	float:left;
}

#imgJK .imgR {
	width:480px;
	float:left;
	margin:0 0 0 20px;	
}

.t18 {
	font-size:18px;
	color:#D80003;
	font-weight:bold;
}

.t16 {
	font-size:16px;
	color:#fff;
	font-weight:bold;
}


#theater #maeuri{
    width:740px;
    margin:70px auto 0 auto;
}

#maeuriInner{
    padding: 15px 30px;
    background: #000;
}

#maeuriInner li{
    font-size:12px;
    font-size:1.2rem;
    line-height: 2;
    color:#FFF;
}

#maeuriInner li strong{
    font-size:18px;
    font-size:1.8rem;
    color:#ff0015;
}

#maeuriInner li a{
    color:#ff0015;
    font-weight: bold;
    text-decoration: underline;
}

#maeuriInner li a:hover{
    text-decoration: none;
}




/*--------------------------------------*/
/* [THEATER] */

div#media{
	width:100%; height: 100%;
	overflow: hidden;
	position: fixed;
    left:100%; top: 0;
	z-index:30000;
	display: none;
}

div#media .pageBg{
    position: fixed;
    left:100%;top:0;
    z-index: 100;
    width: 100%; height: 100%;
    background: url('../img/theater/bg_main.jpg') no-repeat center top;
    background-size:cover;
}

div#media .inner{
    position: relative;
    padding-bottom: 100px;
    z-index: 200;
}


div#media h2{
	position: fixed;
	left:90px; top:70px;
}


div#media #mediaSideNav{
	position: fixed;
	left:90px; top:130px;
}


div#media #mediaSideNav li{
    padding-bottom: 10px;
}


div#media h3{
    width:700px;
    margin: 45px auto 0 auto;
	font-size:16px;
	color:#FFFD00;
	font-weight:bold;
}

div#media table{
    position: relative;
    width:740px;
    margin: 10px auto 0 auto;
    border-collapse:separate;
    border-spacing:2px;
}

div#media table td{
    padding: 5px 20px;
    font-size:14px;
    font-size:1.4rem;
    color:#FFF;
    background: url('../img/theater/bg_cell.png');
    text-align: center;
	vertical-align:center;
}

div#media table td.mediaName{
    width: 180px;
    text-align: center;
}

div#media table td.mediaColor{
	color:#FFFD00;
	text-align:left;
}

div#media .t11{
	font-size:11px;
}

div#media .c3{
	 width: 80px;
}

div#media .title{
	color:#FFFD00;
}

div#media table a{color:#FFF;}
div#media table a:hover{text-decoration: none;}





/*--------------------------------------*/
/* [CREDIT] */

div#credit{
    width:100%; height: 0;
	min-width: 1200px;
    overflow: hidden;
    position: fixed;
    left:0; bottom: 0;
    z-index:2000;
    background: #000;
}


div#credit p{
    width:1015px; height: 167px;
    overflow: hidden;
    margin: 75px auto 0 auto;
}


div#credit div{
    position: absolute;
    right:25px; top:25px;
}


div#credit div a:hover img{
    opacity: 0.6;
	filter: alpha(opacity=60);
	-ms-filter: "alpha(opacity=60)";
	-moz-opacity: 0.6;
}




/*--------------------------------------*/
/* [RANKING] */

div#ranking{
    width:100%; /*height: 0;*/
	min-width: 1200px;
    overflow: hidden;
    position: fixed;
    left:0; bottom: 0;
    z-index:2000;
    background: #000;
}

div#ranking .inner{
    width: 666px;
    margin: 0 auto;
    padding: 25px 0;
    overflow: hidden;
}

div#ranking .le{
    width: 384px;
    padding-top: 25px;
    float:left;
}

div#ranking .ri{
    float:left;
    padding-top: 25px;
}


div#ranking .le li{
    padding: 0 0 2px 35px;
    font-size: 10px;
    font-weight: bold;
    color:#fff;
}

div#ranking .le li.head{
    font-size: 18px;
    color:#ffd800;
	font-weight:bold;
	border:2px solid #ffd800;
	text-align:center;
	padding:4px;
	width:350px;
	margin:0 0 5px;
}


div#ranking .le li.rank1{
    font-size: 24px;
    color:#ffd800;
    background: url('../img/ranking/icon_rank1.png') no-repeat 0 0.4em;
}

div#ranking .le p{
    padding-left: 35px;
    font-size: 12px;
    font-size: 1.2rem;
    font-weight: bold;
    color:#fff;
}



div#ranking .ri div{
    padding-bottom: 20px;
    background: url('../common/img/line_pink.png') repeat-x left bottom;
}

div#ranking .ri p{
    margin-top: 16px;
}

div#ranking .ri a:hover img{
    opacity: 0.6;
	filter: alpha(opacity=60);
	-ms-filter: "alpha(opacity=60)";
	-moz-opacity: 0.6;
}


div#ranking .btnClose{
    position: absolute;
    right:25px; top:25px;
}


div#ranking .btnClose a:hover img{
    opacity: 0.6;
	filter: alpha(opacity=60);
	-ms-filter: "alpha(opacity=60)";
	-moz-opacity: 0.6;
}



div#ranking a{
    color:#FFF;
    text-decoration: underline;
}

div#ranking a:hover{
    text-decoration: none;
}