@charset "utf-8";


body{background-image:none !important;}

/*common*/
#wrap{
	position:relative;
	width:100%;
	height:100%;
	
	background:url(../img/common/bg.jpg) 50% 0 no-repeat #000;
	background-attachment:fixed;
	
}


#pc #wrap{
	
	background:url(../img/common/bg.jpg) 50% 0 no-repeat #000;
	background-attachment:fixed;
}

#wrap:before{
	position:absolute;
	width:100%;
	height:100%;
	content:"";
	display:block;
	top:0;
	left:0;
	background:url(../img/common/bgdot.png);
	
	
}


.season_3 #wrap{
	position:relative;
	width:100%;
	height:100%;
	
	background:url(../img/common/bg_season_3.jpg) 50% 0 no-repeat #000;
	background-attachment:fixed;
	
}


#pc .season_3 #wrap{
	
	background:url(../img/common/bg_season_3.jpg) 50% 0 no-repeat #000;
	background-attachment:fixed;
}

.season_3 #wrap:before{
	position:absolute;
	width:100%;
	height:100%;
	content:"";
	display:none !important;
	top:0;
	left:0;
	background:none;
	
	
}

.season_3 #container{ height:auto !important;}




.headersp #wrap{ background-image:none !important; background-color:transparent !important;}

#bodyBG2{
	z-index                 : -1;
    background-color        : #05072e;
    background:url(../img/common/bg.jpg) 50% 0 no-repeat #000;
	background-position:center top;
    background-repeat       : no-repeat;
    background-size         : cover;
    position                : fixed;
    top                     : 0;
    left                    : 0;
    right                   : 0;
    bottom                  : 0;
	display:none;
}

.headersp #bodyBG2{ display:block;}





#contentsHeader{ position:relative;}

/*contents*/



#bgEffect{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:0;
}
canvas{
	position:absolute;
	left:0;
	top:0;
}

.wide #mainVisual{
	
	/*min-height:1030px;*/
	
}


.middle #mainVisual{
	
	/*min-height:687px;*/
	
}


















/*  custom      */



body#animation #grid-content-entry .box{ 
	/*background:url(../img/common/black_60.png);*/
	box-shadow: 0 0 4px #000;  
	-moz-box-shadow: 0 0 4px #000;  
	-webkit-box-shadow: 0 0 4px #000;

}


body#animation #grid-content .box{ 
	/*background:url(../img/common/black_60.png);*/
	box-shadow: 0 0 4px #000;  
	-moz-box-shadow: 0 0 4px #000;  
	-webkit-box-shadow: 0 0 4px #000;

}



body#animation #grid-content .box .innerBox{
	border:solid 0px #ccc; 
	padding:10px;
	width: 217px;
	height:367px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	overflow:hidden;
}


body#animation #grid-content a,
body#animation #grid-content-entry a{ color:#ee2a7b !important;}

body#animation #pageInclude{ overflow:visible; position:relative;}


.animationNavi{ border:dotted 1px #ee2a7b; border-width:0 0 1px 0; height:auto; margin:0px 30px 20px 30px; padding-top:30px; position:relative;}

.headersp .animationNavi{ margin:0px 20px 20px 20px;}

	.page_footer .animationNavi{  border-width:1px 0 0 0; height:auto; margin:20px 30px 20px 30px; position:relative; padding:30px 0 10px 0;}

	.headersp .page_footer .animationNavi{ margin:0px 20px 20px 20px;}


.animationNavi h3.crystalLogo{ background:url(../img/common/logo_crystal.png) center center no-repeat; background-size:contain; width:200px; height:108px; position:absolute; top:40px; left:0;}
	
	.animationNavi.season_3 h3.crystalLogo{ background:url(../img/common/logo_crystal_3.png) center center no-repeat; background-size:contain; }
	
	
	.mini .animationNavi h3.crystalLogo{ width:297px; height:160px;}

	.page_footer .animationNavi h3.crystalLogo{ top:40px;}
	
.animationNavi .menuArea{ padding-left:215px;}

	.tab .animationNavi .menuArea{ padding:130px 0 0 0;}
	.mini .animationNavi .menuArea{ padding:200px 0 0 0;}
	
	
.animationNavi .menuArea ul{ padding-top:5px; margin-bottom:30px; max-width:500px; margin-left:0;}
.animationNavi .menuArea ul li{ width:150px; height:20px; float:left; margin:0 1px 10px 0; }


.animationNavi .menuArea ul li.list9{ clear:both;}


.animationNavi .menuArea ul li a{ display:block; height:20px; text-indent:-999px; overflow:hidden;background:url(../img/common/animation_navi.png) no-repeat 0 0;}


.animationNavi .menuArea ul li.list1 a{ background-position:0 0;}
.animationNavi .menuArea ul li.list1 a:hover{ background-position:-150px 0;}
.animationNavi .menuArea ul li.list1 a.active,
.animationNavi .menuArea ul li.list1 a.active:hover{ background-position:-300px 0;}

.animationNavi .menuArea ul li.list2 a{ background-position:0 -30px;}
.animationNavi .menuArea ul li.list2 a:hover{ background-position:-150px -30px;}
.animationNavi .menuArea ul li.list2 a.active,
.animationNavi .menuArea ul li.list2 a.active:hover{ background-position:-300px -30px;}

.animationNavi .menuArea ul li.list3 a{ background-position:0 -60px;}
/*.animationNavi .menuArea ul li.list3 a:hover{ background-position:-150px -60px;}*/
.animationNavi .menuArea ul li.list3 a.active,
.animationNavi .menuArea ul li.list3 a.active:hover{ background-position:-300px -60px;}

.animationNavi .menuArea ul li.list4 a{ background-position:0 -90px;}
.animationNavi .menuArea ul li.list4 a:hover{ background-position:-150px -90px;}
.animationNavi .menuArea ul li.list4 a.active,
.animationNavi .menuArea ul li.list4 a.active:hover{ background-position:-300px -90px;}

.animationNavi .menuArea ul li.list5 a{ background-position:0 -120px;}
.animationNavi .menuArea ul li.list5 a:hover{ background-position:-150px -120px;}
.animationNavi .menuArea ul li.list5 a.active,
.animationNavi .menuArea ul li.list5 a.active:hover{ background-position:-300px -120px;}

.animationNavi .menuArea ul li.list6 a{ background-position:0 -150px;}
/*.animationNavi .menuArea ul li.list6 a:hover{ background-position:-150px -150px;}*/
.animationNavi .menuArea ul li.list6 a.active,
.animationNavi .menuArea ul li.list6 a.active:hover{ background-position:-300px -150px;}

.animationNavi .menuArea ul li.list7 a{ background-position:0 -180px;}
.animationNavi .menuArea ul li.list7 a:hover{ background-position:-150px -180px;}
.animationNavi .menuArea ul li.list7 a.active,
.animationNavi .menuArea ul li.list7 a.active:hover{ background-position:-300px -180px;}

.animationNavi .menuArea ul li.list8 a{ background-position:0 -210px;}
.animationNavi .menuArea ul li.list8 a:hover{ background-position:-150px -210px;}
.animationNavi .menuArea ul li.list8 a.active,
.animationNavi .menuArea ul li.list8 a.active:hover{ background-position:-300px -210px;}

.animationNavi .menuArea ul li.list9 a{ background-position:0 -240px;}
.animationNavi .menuArea ul li.list9 a:hover{ background-position:-150px -240px;}
.animationNavi .menuArea ul li.list9 a.active,
.animationNavi .menuArea ul li.list9 a.active:hover{ background-position:-300px -240px;}

.animationNavi .menuArea ul li.list10 a{ background-position:0 -270px;}
.animationNavi .menuArea ul li.list10 a:hover{ background-position:-150px -270px;}
.animationNavi .menuArea ul li.list10 a.active,
.animationNavi .menuArea ul li.list10 a.active:hover{ background-position:-300px -270px;}

.animationNavi .menuArea ul li.list11 a{ background-position:0 -300px;}
.animationNavi .menuArea ul li.list11 a:hover{ background-position:-150px -300px;}
.animationNavi .menuArea ul li.list11 a.active,
.animationNavi .menuArea ul li.list11 a.active:hover{ background-position:-300px -300px;}






/* season_3 */
	
	.animationNavi.season_3 .menuArea ul{ padding-top:5px; margin-bottom:30px; max-width:500px; margin-left:0; }
	.animationNavi.season_3 .menuArea ul li{ width:170px; height:29px; float:left; margin:0 1px 10px 0; }
	
	
	.animationNavi.season_3 .menuArea ul li.list1,
	.animationNavi.season_3 .menuArea ul li.list3,
	.animationNavi.season_3 .menuArea ul li.list5,
	.animationNavi.season_3 .menuArea ul li.list7{ clear:both; width:125px;}
	.animationNavi.season_3 .menuArea ul li.top{ width:150px; float:right; margin-top:-40px;}
	
	
	@media screen and (max-width: 1024px) {
			.animationNavi.season_3 .menuArea ul li.top{ float:left; margin-top:0;}
	}
	
	
	.animationNavi.season_3 .menuArea ul li a{ display:block; height:29px; text-indent:-999px; overflow:hidden;background:url(../img/common/animation_navi_3.png) no-repeat 0 0;}
	
	
	.animationNavi.season_3 .menuArea ul li.list1 a{ background-position:0 0;}
	.animationNavi.season_3 .menuArea ul li.list1 a:hover{ background-position:-170px 0;}
	.animationNavi.season_3 .menuArea ul li.list1 a.active,
	.animationNavi.season_3 .menuArea ul li.list1 a.active:hover{ background-position:-340px 0;}
	
	.animationNavi.season_3 .menuArea ul li.list2 a{ background-position:0 -116px;}
	.animationNavi.season_3 .menuArea ul li.list2 a:hover{ background-position:-170px -116px;}
	.animationNavi.season_3 .menuArea ul li.list2 a.active,
	.animationNavi.season_3 .menuArea ul li.list2 a.active:hover{ background-position:-340px -116px;}
	
	.animationNavi.season_3 .menuArea ul li.list3 a{ background-position:0 -29px;}
	.animationNavi.season_3 .menuArea ul li.list3 a:hover{ background-position:-170px -29px;}
	.animationNavi.season_3 .menuArea ul li.list3 a.active,
	.animationNavi.season_3 .menuArea ul li.list4 a.active:hover{ background-position:-340px -29px;}
	
	.animationNavi.season_3 .menuArea ul li.list4 a{ background-position:0 -145px;}
	.animationNavi.season_3 .menuArea ul li.list4 a:hover{ background-position:-170px -145px;}
	.animationNavi.season_3 .menuArea ul li.list4 a.active,
	.animationNavi.season_3 .menuArea ul li.list4 a.active:hover{ background-position:-340px -145px;}
	
	.animationNavi.season_3 .menuArea ul li.list5 a{ background-position:0 -58px;}
	.animationNavi.season_3 .menuArea ul li.list5 a:hover{ background-position:0px -58px;}
	.animationNavi.season_3 .menuArea ul li.list5 a.active,
	.animationNavi.season_3 .menuArea ul li.list5 a.active:hover{ background-position:-340px -58px;}
	
	.animationNavi.season_3 .menuArea ul li.list6 a{ background-position:0 -174px;}
	.animationNavi.season_3 .menuArea ul li.list6 a:hover{ background-position:0px -174px;}
	.animationNavi.season_3 .menuArea ul li.list6 a.active,
	.animationNavi.season_3 .menuArea ul li.list6 a.active:hover{ background-position:-340px -174px;}
	
	
	.animationNavi.season_3 .menuArea ul li.list7 a{ background-position:0 -87px;}
	.animationNavi.season_3 .menuArea ul li.list7 a:hover{ background-position:0px -87px;}
	.animationNavi.season_3 .menuArea ul li.list7 a.active,
	.animationNavi.season_3 .menuArea ul li.list7 a.active:hover{ background-position:-340px -87px;}
	
	.animationNavi.season_3 .menuArea ul li.list8 a{ background-position:0 -203px;}
	.animationNavi.season_3 .menuArea ul li.list8 a:hover{ background-position:0px -203px;}
	.animationNavi.season_3 .menuArea ul li.list8 a.active,
	.animationNavi.season_3 .menuArea ul li.list8 a.active:hover{ background-position:-340px -203px;}
	
	
	.animationNavi.season_3 .menuArea ul li.top{ }
	.animationNavi.season_3 .menuArea ul li.top a{ background-position:0 -232px;}
	.animationNavi.season_3 .menuArea ul li.top a:hover{ background-position:-170px -232px;}
	.animationNavi.season_3 .menuArea ul li.top a.active,
	.animationNavi.season_3 .menuArea ul li.top a.active:hover{ background-position:-340px -232px;}



.box .shareArea{ width:auto; position:relative !important; top:0px !important; left:0 !important;  margin-bottom:10px !important; }
.box .shareArea ul{ position:absolute; right:30px;}
.box .shareArea ul li{}

.season_3_top .box .shareArea{ width:170px; position:absolute !important; top:30px !important; right:20px; left:auto !important;  margin-bottom:10px !important; }

.middle .season_3_top .box .shareArea,
.headersp .season_3_top .box .shareArea{ top:5px !important}

.season_3_top .box .shareArea ul{ position:absolute; right:0px;}

div.read{ margin-bottom:20px;}


.animationBox{ width:95%; background:none !important; border:0 !important; box-shadow:0 0 0 !important;  
										-moz-box-shadow: 0 0 0 !important;  
										-webkit-box-shadow: 0 0 0 !important;  
height:auto !important;
}



body#animation #grid-content .animationWrap{
	/*background:url(../img/common/black_60.png);*/
	background-color: #ffffff;
	width:100%;
	position:relative;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	
	box-shadow: 0 0 4px #333;  
	-moz-box-shadow: 0 0 4px #333;  
	-webkit-box-shadow: 0 0 4px #333;  
										
}

body#animation #grid-content .animationWrap .animationNavi{ float:none; border:0 !important; margin-bottom:0;}


body#animation #grid-content .animationBox .shareArea ul{ position:absolute; top:10px !important; right:0px !important;}

body#animation #grid-content-entry .animationTitle{
	margin:0 0px 20px 0px; width:auto; height:100px; position:relative;
	/*display: none;*/
}

.mini .animationTitle,
.tab .animationTitle{ background-size:contain !important; background-position:20px 0 !important;}


body#animation #grid-content,
body#animation #grid-content-entry{
	/*color:#fff;*/
}

body#animation #grid-content a,
body#animation #grid-content-entry a{ color:#ee2a7b;}





body#animation #grid-content-entry .entryHeader{ border:0; padding:30px 30px 10px 30px}
body#animation #grid-content-entry .shareEntry,
body#animation #grid-content-entry .entryHeader .category{ display:none;}



/* news 
------------------------------------------------------*/
body#animation.news .animationTitle{ background:url(../img/news/title_news.png) no-repeat;width:100%; height:90px;}
body#animation.news #grid-content-entry .animationTitle{ margin-bottom:0; background:url(../img/news/title_news.png) 0 10px no-repeat;}

body#animation.newsinformation .animationTitle{ background:url(../img/news/title_news.png) no-repeat;width:100%; height:90px;}
body#animation.newsinformation #grid-content-entry .animationTitle{ margin-bottom:0; background:url(../img/news/title_news.png) 0 10px no-repeat;}


.mini body#animation.news #grid-content-entry .animationTitle,
.tab body#animation.news #grid-content-entry .animationTitle{ height:60px !important;}

body#animation.news #grid-content .animationBox .shareArea ul{  position:absolute; top:40px !important; right:0px !important;}

body#animation.news #grid-content .dataArea .category{ display:none;}


/* characters 
------------------------------------------------------*/

body#animation.characters .animationTitle{ background:url(../img/character/title_characters.png) no-repeat;width:100%;}



body#animation.characters .charaList{ margin:0 30px 10px 30px;}

.headersp body#animation.characters .charaList{ margin:0 0px 10px 20px;}


	body#animation.characters .charaList ul{ margin-bottom:35px;}
	body#animation.characters .charaList ul li{ width:60px; height:63px; margin:0 10px 8px 0; float:left;}
	body#animation.characters .charaList ul li a{ display:block; height:60px;}
	
	body#animation.characters .charaList ul li a span{ height:60px; background-color:#000; opacity:0.5; display:none;}
	
	body#animation.characters .charaList ul li a:hover span,
	body#animation.characters .charaList ul li.active a span{ display:block;}
	body#animation.characters .charaList ul li.active{ border-bottom:solid 1px #ee2a7b;height:62px;}
	
	body#animation.characters .charaList ul li.list1 a{ background:url(../img/character_icon/moon.jpg) no-repeat;}
	body#animation.characters .charaList ul li.list2 a{ background:url(../img/character_icon/mercury.jpg) no-repeat;}
	body#animation.characters .charaList ul li.list3 a{ background:url(../img/character_icon/marz.jpg) no-repeat;}
	body#animation.characters .charaList ul li.list4 a{ background:url(../img/character_icon/jupiter.jpg) no-repeat;}
	body#animation.characters .charaList ul li.list5 a{ background:url(../img/character_icon/venus.jpg) no-repeat;}
	body#animation.characters .charaList ul li.list6 a{ background:url(../img/character_icon/chibi.jpg) no-repeat;}
	body#animation.characters .charaList ul li.list7 a{ background:url(../img/character_icon/pluto.jpg) no-repeat;}
	


body#animation.characters .entryNavi{ height:80px; position:relative;}


body#animation.characters .charaImage{ position:relative; height:1200px;}

body#animation.characters .charaImage img.text{ position:absolute; top:0; left:0; z-index:5002; width:110%;}


body#animation.characters .charaSlide{ position:relative;}
body#animation.characters .charaSlide img.front{ position:absolute; top:0; left:0; z-index:5001; width:110% !important; height:auto; }
body#animation.characters .charaSlide img.back{ position:absolute; top:0; left:0; z-index:5000; width:110% !important; height:auto;}

body#animation #side{ position:absolute; z-index:1 !important;}

.mini body#animation #side{ position:relative; z-index:auto;}


ul.entryNaviPager{ width:98px; height:52px; position:absolute; top:17px; right:30px;}
ul.entryNaviPager li{ width:30px; height:52px;}
ul.entryNaviPager li a{ display:block; height:52px; text-indent:-999px; overflow:hidden;}
ul.entryNaviPager li.next{background:url(../img/common/btn_next.png) right center no-repeat; float:right;}
ul.entryNaviPager li.prev{background:url(../img/common/btn_prev.png) left center no-repeat; float:left;}



.middle body#animation #grid-content-entry .animationTitle{ height:180px;}
.middle body#animation #grid-content-entry ul.entryNaviPager{width:100px; left:50%; margin-left:-50px;}
.middle body#animation #grid-content-entry .animationTitle ul.entryNaviPager{ top:100px;width:100px; left:50%; margin-left:-50px;}

.tab body#animation #grid-content-entry .animationTitle{ height:120px;}
.tab body#animation #grid-content-entry ul.entryNaviPager{width:100px; left:50%; margin-left:-50px;}
.tab body#animation #grid-content-entry .animationTitle ul.entryNaviPager{ top:60px;width:100px; left:50%; margin-left:-50px;}

.mini body#animation #grid-content-entry .animationTitle{ height:120px;}
.mini body#animation #grid-content-entry ul.entryNaviPager{width:100px; left:50%; margin-left:-50px;}
.mini body#animation #grid-content-entry .animationTitle ul.entryNaviPager{ top:60px;width:100px; left:50%; margin-left:-50px;}




/* introduction 
------------------------------------------------------*/
body#animation.introduction .animationTitle{ background:url(../img/introduction/title_introduction.png) no-repeat;width:100%;}

.mini body#animation.introduction #grid-content-entry .animationTitle,
.tab body#animation.introduction #grid-content-entry .animationTitle{ height:60px !important; }


body#animation.introduction .entryBody{ padding-top:0;}



/* story 
------------------------------------------------------*/
body#animation.staffcast .animationTitle{ background:url(../img/staffcast/title_staffcast.png) no-repeat;width:100%;}


.mini body#animation.staffcast #grid-content-entry .animationTitle,
.tab body#animation.staffcast #grid-content-entry .animationTitle{ height:60px !important;}


body#animation.staffcast .entryBody{ padding-top:0;}


/* story 
------------------------------------------------------*/
body#animation.story .animationTitle{ background:url(../img/story/title_story.png) no-repeat;width:100%;}

.mini body#animation.story #grid-content-entry .animationTitle,
.tab body#animation.story #grid-content-entry .animationTitle{ height:60px !important;}



body#animation.story .entryBody{ padding-top:0;}



/* onair 
------------------------------------------------------*/
body#animation.onair .animationTitle{ background:url(../img/onair/title_onair.png) no-repeat;width:100%;}

.mini body#animation.onair #grid-content-entry .animationTitle,
.tab body#animation.onair #grid-content-entry .animationTitle{ height:60px !important;}

body#animation.onair .entryBody{ padding-top:0;}


body#animation.onair ul.onairBtn{ list-style:none !important; padding:0;}

body#animation.onair ul.onairBtn li.list1{ width:100%; clear:both; float:none; margin-bottom:10px;}

body#animation.onair ul.onairBtn li.list2{ width:49%; float:left;}
body#animation.onair ul.onairBtn li.list3{ width:49%; float:right;}

.mini body#animation.onair ul.onairBtn li.list2{ width:100% !important; float:none;}
.mini body#animation.onair ul.onairBtn li.list3{ width:100% !important; float:none;}

.tab body#animation.onair ul.onairBtn li.list2{ width:100% !important; float:none;}
.tab body#animation.onair ul.onairBtn li.list3{ width:100% !important; float:none;}



body#animation.onair .onairBtn{ list-style:none !important; padding:0;}

body#animation.onair .onairBtn div.list1{ width:100%; clear:both; float:none; margin-bottom:10px;}

body#animation.onair .onairBtn div.list2{ width:49%; float:left;}
body#animation.onair .onairBtn div.list3{ width:49%; float:right;}


.mini body#animation.onair .onairBtn .list2{ width:100% !important; float:none;}
.mini body#animation.onair .onairBtn .list3{ width:100% !important; float:none;}

.tab body#animation.onair .onairBtn .list2{ width:100% !important; float:none;}
.tab body#animation.onair .onairBtn .list3{ width:100% !important; float:none;}




/* episodes 
------------------------------------------------------*/
body#animation.episodes .animationTitle{ background:url(../img/episodes/title_episodes.png) no-repeat;width:100%; height:90px;}
body#animation.episodes #grid-content-entry .animationTitle{ margin-bottom:0; background:url(../img/episodes/title_episodes.png) 0 10px no-repeat;}

.mini body#animation.episodes #grid-content-entry .animationTitle,
.tab body#animation.episodes #grid-content-entry .animationTitle{ height:60px !important;}




body#animation.episodes #grid-content .animationBox .shareArea ul{  position:absolute; top:40px !important; right:0px !important;}

body#animation.episodes #grid-content .dataArea .category{ display:none;}

body#animation.episodes .entryNavi{ height:80px; position:relative;}









body#animation table.data 				{
							width:100%;
							/*border-top:solid 1px #818181 ;*/
							/*border-left:solid 1px #818181 ;*/
							border-collapse:collapse;
							border-spacing:0;
							/*background-color:#000 !important;*/
							empty-cells:show;
						}
						
body#animation table.data tr.first th { border-top: #be1309 0px solid;}
body#animation table.data th 			{
							/*border-bottom:solid 1px #818181 ;*/
							/*border-right:solid 1px #818181 ;*/
							width:110px;
							text-align:center;
							padding: 10px;
							font-weight: normal;
							/*background-color:#333 !important;*/
						}
						
body#animation table.data tr.first td 	{ border-top: #818181 0px solid;}
body#animation table.data td 			{
							/*border-bottom:solid 1px #818181 ;*/
							/*border-right:solid 1px #818181 ;*/
							text-align: left;
							padding: 10px;
							/*color:#fff !important;*/
						}
body#animation table.data tr:hover {}


#grid-content-entry .entryBody h4{ padding-top:20px; font-size:120%; margin-bottom:5px;}


#grid-content-entry .entryBody ul{ list-style:disc; padding-left:20px;}
#grid-content-entry .entryBody ul li{ margin-bottom:10px;}