@charset "utf-8";

html{height:100%; background: #000;  }
body{height:auto; background-image:url(../images/bg_body.jpg); }
.fadein{   display:none}
a img:hover{  opacity: 0.6;   filter: alpha(opacity=60);   -moz-opacity: 0.6;}
#wrapper{ width:100%; height:auto; background:none; margin:0; padding:0;}
#loading {
	width: 96px; /* gif画像の幅 */
	height: 96px; /* gif画像の高さ */
	margin: -68px 0 0 -68px; /* gif画像を画面中央に */
	padding: 20px; /* gif画像を大きく */
	background: #BABABA; /* gif画像の背景色 */
	opacity: 0.5; /* 透過させる */
	border-radius: 15px; /* 丸角 */
	position: fixed; /* gif画像をスクロールさせない */
	left: 50%; /* gif画像を画面横中央へ */
	top: 50%; /* gif画像を画面縦中央へ */
}

#menu img{display:none;}

.img{width:100%;}

.clear{ clear:both;}
.pc{display:none;}
.officialTwitter{ display:none}
.sp{display:block;}
.center{ margin:0 auto; text-align:center;}

#header{ height: 40px; background-color:#000;}
#header img{ margin:2px;}

#header #logo{float:left; width:50%;}
#header #logo img{ height:30px;}

#header #sp-menu{ display:block; float:right}
#header #sp-menu a img{height:26px; margin:5px 2px;}

#pc_main{display:none;}
#sp_main{display:block; width:100%;}
#sp_main img{width:100%; margin:0; padding:0; display:block;}

#update{ background-image:url(../images/update_bg.jpg); background-repeat:repeat; height:50px; margin:0; padding:0;}

#update ul{height:50px;}
#update ul li{ float:left; height:50px;}
#update ul li:first-child{ width:15%; background-image:url(../images/update_img.png); background-position:center; background-size:cover;}
#update ul li:nth-child(2),#update ul li:nth-child(2) a{width:85%; font-size:13px; padding-top:0.3em; color:#fffae5; }

#info{width:100%; background-image:url(../images/bg_paper.jpg); background-size:50%; padding-bottom:20px;}
#info .line{margin-top:1%; margin-bottom:1%; width:100%; }
/*#info #bnn{margin-top:2%;}*/
.bnnUpdate {display:block; width:26px; height:26px; position:relative; margin:0 0 -26px 0; padding:0; z-index:999; }

#spec{background-image:url(../images/top_spec_bg.jpg); background-position:right bottom; background-repeat:no-repeat;}


#info ul li{width:50%; float:left;}
#info ul li img{margin:0%; width:49%; border:1px solid #851413;float:left;}
#info ul li img.bnnUpdate{ width:26px;}
#spec{color:#614733; border:2px solid #614733; }
#spec p{ font-weight:normal; color:#614733; margin:4%; line-height:150%;}

#spec .cero { position:relative; width:10%; margin-left:7%; margin-bottom:0.5em;}
#spec .yoyaku { position:relative; width:60%; margin-left:20%;margin-bottom:0.5em;}


/*#footer{width:100%; bottom:0; position:relative; }
#footer img{width:100%;}
#footer.center{ display:block; width:100%; text-align:center; font-size:80%; background-color:#000; }
*/

#footer{ width:100%; background-color:#000; }
#footer img{width:100%; margin:auto;}

.subcopy1{width:62%;}
.subcopy2{width:100%;}


/* ーーーーーーーーーーーーーーーーーーー

　　　　　各コンテンツページ

 ーーーーーーーーーーーーーーーーーーー*/
#tbox{background-image:url(../images/bg_paper.jpg); width:100%; margin:0 auto;  } 
#tbox .title{ width:100%; margin:2% auto 1% auto; }

#tbox ul.tboxLineup{ width:90%; margin-left:5%;color:#330; text-shadow:1px -1px 0px rgba(255,255,255,0.5);}
#tbox ul.tboxLineup li:nth-child(even){ margin-left:6%; margin-bottom:3%; color:#6C2B55;}
#tbox ul.tboxLineup li:nth-child(odd){background:url(../images/marker.png) left no-repeat; margin-bottom:1%;background-size:6%; text-indent:6%; font-size:120%;line-height:120%; font-weight:500;}


.yoyakuLineup img{float:left; width:48%; margin-left:1%; margin-bottom:1%; }

#leftSide,#rightSide{margin-top:2%; margin-bottom:2%; }

#leftSide {float:left; width:15%; margin-right:2%;}
#leftSide.chara {float:left; width:16.5%; margin-right:0.5%;}

#leftSide .chara, .story, .keyword ,.gallery ,interview{width:100%; height:auto; margin:0; padding:0;}
#leftSide.chara img{ display:block;width:100%; height:auto; margin:0; padding:0;}
#leftSide.gallery img.half{ display:block;width:50%;height:auto; float:left; margin:0; padding:0; cursor: pointer;}

#leftSide.chara .bnnUpdate{display:block; width:26px; height:26px; position:relative; margin:0 0 -28px 0; padding:0; z-index:999;}
#leftSide.story img{ display:block;width:100%; height:auto; margin:0; padding:0;}

#leftSide.keyword img{ display:block;width:100%; height:auto; margin:0; padding:0;}

#leftSide.chara a{ display:block;padding-top:10%; padding-bottom:10%; background-image:url(../images/chara_menu_bg.png); background-repeat:repeat; background-size:contain;}
.heading{ margin:0 auto; width:40%; height:auto;}

.gallery .bnnUpdate{display:block; width:26px; height:26px; position:relative; margin:0 0 -28px 0; padding:0; z-index:999;}
#leftSide.gallery img{ display:block;width:100%; height:auto; margin-bottom:5%; padding:0; cursor: pointer;}
#leftSide.gallery img.bnnUpdate,#rightSide.gallery img.bnnUpdate,#leftSide.story img.bnnUpdate,#leftSide.keyword img.bnnUpdate, #bnn .bnnUpdate{width:12%; height:auto; margin:0 0 -12% 0; padding:0}

#leftSide.gallery img:nth-last-child(n+2):hover{  opacity: 0.6;   filter: alpha(opacity=60);   -moz-opacity: 0.6;}
#ss{display:none;}
ul.ss {
	/*display:none;*/
	margin: 0 5%;
	width: 100%;
	
}

ul.ss li {
	margin:0.5%;
	width:45%;
	color:#fff;
	text-align: left;
	float: left;
	/*display:none;*/
	overflow: hidden;
}
ul.ss li img{width:100%;}

ul.ss:after {
	content: ".";
	height: 0;
	clear: both;
	display: block;
	visibility: hidden;
}

ul.ss{
	display: inline-block;
	overflow: hidden;
}

#rightSide{float:left; width:83%;}

#rightSide.story{ background-image:url(../images/story_bg.jpg); background-position:center bottom; background-size:100% auto; background-repeat:no-repeat;background-color: #5d3b6e;}
#rightSide.story .text{ margin:1%; padding:1%; border:1px solid #fbf2c6; text-align:left; line-height:120%; color:#fffae5; text-shadow:1px 1px #000000;}
#rightSide.story .text .strong{color:#fffae5;  font-size:130%;  text-shadow:1px 1px #000000;}

#rightSide.keyword{ background-image:url(../images/keyword_bg.jpg); }
#rightSide.interview{ background-image:url(../images/interview_bg.jpg); }

#rightSide.keyword .text{ margin:1%; padding:1%; border:1px solid #fbf2c6; text-align:left; line-height:120%; color:#fffae5; text-shadow:1px 1px #000000;}
#rightSide.keyword .text p{ margin:1%; padding:1%;text-align:left; font-weight:normal; color:#fffae5; text-shadow:1px 1px #000000;}
/*#rightSide.keyword .text img{padding-top:3%;padding-bottom:0%; overflow:hidden; }*/
#rightSide.keyword .text .line{ width:100%; padding:0; margin:0; }

#rightSide.interview .title{ width:100%;}
#rightSide.interview .text{ margin:1%; padding:1%; border:1px solid #000; text-align:left; line-height:120%; color:#000; text-shadow:none;}
#rightSide.interview .text a{color:#fff; text-shadow:none; }
#rightSide.interview .text:first-child{background-color:#000; color:#F8ECB3;}
#rightSide.interview .text p{ margin:1%; padding:1%;text-align:left; font-weight:normal; color:#000; text-shadow:none;}
/*#rightSide.keyword .text img{padding-top:3%;padding-bottom:0%; overflow:hidden; }*/
#rightSide.interview .text .line{ width:100%; padding:0; margin:0; }
#rightSide.interview .photo{ display:block;margin:0 auto; }
#rightSide.interview .q1,#rightSide.interview .q2{ display:block; width:73%; }
#rightSide.interview .q3,#rightSide.interview .q4,#rightSide.interview .q5{ display:block; width:100%; }



#rightSide.world{ background-image:url(../images/world_bg.jpg); background-position: center bottom; background-repeat:no-repeat; background-size:contain; background-color:#000; }
#rightSide.world .sample{float:left;width:100%; margin-top:1%;}
#rightSide.world .sample img{width:100%;}
#rightSide.world .sample_text{float:left; width:100%;; font-size:90%;}
#rightSide.world .sample_img{float:left; width:100%; font-size:90%;}
#rightSide.world .text{ margin:1%; padding:1%; border:1px solid #fbf2c6; text-align:left; line-height:120%; color:#fffae5; text-shadow:1px 1px #000000;}
#rightSide.world .text p{ margin:1%; padding:1%;text-align:left; font-weight:normal; color:#fffae5; text-shadow:1px 1px #000000;}
/*#rightSide.keyword .text img{padding-top:3%;padding-bottom:0%; overflow:hidden; }*/
#rightSide.world .text .line{ width:100%; padding:0; margin:0; }
#rightSide.world .world_img{ width:100%; margin:0.5em 0; }
#rightSide.world .world_cap{ width:100%; }



#rightSide.chara{ background-color:#000; }
#rightSide.chara #charaMain img{ width:100%; }
#rightSide.chara .text{ margin:1%; padding:1%; text-align:left; line-height:150%; color:#fffae5; text-shadow:1px 1px #000000;}
#rightSide.chara .chara_btn{ height:2.2em; margin:2% 2% 2% 0; display:block; float:left;}
.charadeza img{ display:block;width:22%;}
.jp_container_1{ width:0;}
.jp-jplayer{display:block; float:left;width:30%; }


#rightSide.gallery{ width:80%;background-image:url(../images/bg_paper_dark.jpg); border:2px solid black; }
#rightSide.gallery #galleryMain img{ width:90%; margin: 2% 15% 0 5%;}
#rightSide.gallery .text { background-size:contain; background-position:right bottom; background-repeat:no-repeat; padding:2% 5% 0 5%;line-height:150%;  text-shadow:1px -1px 1px rgba(255,255,255,0.3); }
#rightSide.gallery .text p{}

#rightSide.gallery #ss{margin:1%; padding:1%;}

rb{ font-size:120%;}
rp { display: none; }
rt { top: -1em; left: 0; font-size: 50%; line-height: 1em white-space: nowrap; text-indent: 0; }

.txtAzusa{ color:#902836;}
.txtArima{ color:#28389e;}
.txtDarius{color:#3e7aa4;}
.txtKohaku{ color:#b61b0b;}
.txtShuhei{ color:#625e20;}
.txtRood{color:#009148;}
.txtTora{ color:#03624d;}
.txtKudan{color:#683b65}
.txtMurasame{ color:#2b3a6d;}

.txtMob{ color:#555;}


ul.bnn {
	margin: 0 auto;
	width: auto;
	text-align: left;
	
}

ul.bnn li {
	margin:0.5%;
	color:#fff;
	text-align: left;
	float: left;
	display: none;
	overflow: hidden;
}

/* =======================================
	ClearFixElements
======================================= */
ul.bnn:after {
	content: ".";
	height: 0;
	clear: both;
	display: block;
	visibility: hidden;
}

ul.bnn{
	display: inline-block;
	overflow: hidden;
}

.bnn a{ cursor:default;}
.bnn a img:hover{ opacity: 1;   filter: alpha(opacity=100);   -moz-opacity: 1;}

ul.playmov {
	/*display:none;*/
	margin: 0 5%;
	width: 100%;
	
}

ul.playmov li {
	
	margin:0.5%;
	width:45%;
	color:#fff;
	text-align: left;
	float: left;
	/*display:none;*/
	overflow: hidden;
}

ul.playmov li img.movbtn{width:100%;}
ul.playmov li img.movbtn2 { width:35.7%;}
	


/* ーーーーーーーーーーーーーーーーーーー

　　　　　PC用

 ーーーーーーーーーーーーーーーーーーー*/
 
 
@media screen and (min-width: 640px) {
	
.img{width:auto;}
	
	
body{ background-image:url(../images/bg_pc.jpg); background-size:auto; background-position:center top; background-repeat:repeat-x; background-attachment:fixed; background-color:#a590af;}

#headerPC{width:100%; background-color:#000;}
#header{width:1000px; margin:0 auto;}
#header #logo{width:780px; margin:0 auto;}
#header #sns{width:220px; margin:0 auto; float:left;}
#header #logo img{margin:3px;}
#header #sp-menu{ display:none;}
#wrapper{ width:1040px; height:auto; background-color:none; margin:0 auto;background-image:url(../images/bg_edge.png); background-position:center; background-size:contain; background-repeat:repeat-y; }
 
#contents{width:1000px; margin:0 auto; }
#main{
height:auto;
}
#pc_main{display:block; margin-top:15px; width:1000px; height:667px; overflow:hidden; background-color:#000; position:relative;}
/*#pc_main ul{width:1000px; height:563px; display:block;position:absolute; top:0; }
#pc_main ul li{display:block;position:absolute; top:0;}
#pc_main ul li img{position:absolute; top:0px;}*/
#pc_main .anime1,#pc_main .anime2,#pc_main .anime3{ display:block;position:absolute; top:0; left:0; margin:0; }

#pc_main .anime1{ margin-top:-40px;}
#pc_main ul li.anime3{width:1200px; opacity:1; margin-left:10px; margin-top:50px}
#pc_main ul li img:not(".bnnUpdate"){width:100%;}

#pc_main .copy{ display:block;position:absolute;top:32px; left:754px; z-index:3000;}
#pc_main .logo{ display:block;position:absolute;top:405px; left:521px; z-index:3000;}
#pc_main .date{ display:block;position:absolute;top:492px; left:556px; z-index:3100;}
#pc_main .ps{ display:block;position:absolute;top:615px; left:712px; z-index:3100;}

#pc_main .niconama{ display:block;position:absolute;top:574px; left:10px; z-index:3100;}
#pc_main .famitsu{ display:block;position:absolute;top:554px; left:535px; z-index:3100;}

#sp_main{display:none;}

.pc{display:block;}
.sp{display:none;}

#movie_btn{display:block; background-image:url(../images/top_mov_sub.jpg); width:1000px; height:82px;}
ul#movie_btn li{margin:0; width:80px; height:59px;}
#movie_btn .mov1{ display:block; float:left; position:relative; left:358px; top:12px; z-index:3100;}
#movie_btn .mov2{ display:block; float:left; position:relative; left:358px; top:12px; z-index:3100;}
#movie_btn .mov3{ display:block; float:left; position:relative; left:358px; top:12px; z-index:3100;}
#movie_btn .mov4{ display:block; float:left; position:relative; left:358px; top:12px; z-index:3100;}
#movie_btn .mov5{ display:block; float:left; position:relative; left:358px; top:12px; z-index:3100;}
#movie_btn .mov6{ display:block; float:left; position:relative; left:358px; top:12px; z-index:3100;}
#movie_btn .mov7{ display:block; float:left; position:relative; left:358px; top:12px; z-index:3100;}
#movie_btn .mov8{ display:block; float:left; position:relative; left:358px; top:12px; z-index:3100;}



#menu{width:1000px; height:50px; background-image:url(../images/nav.png); background-position:bottom;}
#menu img{display:block}
#menu ul{ width:910px; height:50px;  margin:0 auto;}
#menu ul li{ width:151px; height:50px; float:left;}
#menu ul li { display:block;width:151px; height:50px;background-image:url(../images/nav.png); text-indent:-9999px;}
#menu ul li a{ display:block;width:151px; height:50px;background-image:url(../images/nav.png);}
#menu ul li.top a{background-position:-45px bottom; }
#menu ul li.story a{background-position:-196px bottom; }
#menu ul li.chara a{background-position:-347px bottom; }
#menu ul li.gallery a{ background-position:-498px bottom; }
#menu ul li.system a{ background-position:-649px bottom; }
#menu ul li.special a{ background-position:-800px bottom; }

#menu ul li.top a:hover{background-position:-45px top; }
#menu ul li.story a:hover{background-position:-196px top; }
#menu ul li.chara a:hover{background-position:-347px top; }

#menu ul li.top {background-position:-45px top; }
#menu ul li.story {background-position:-196px top; }
#menu ul li.chara {background-position:-347px top; }
#menu ul li.gallery { background-position:-498px bottom; }
#menu ul li.system { background-position:-649px bottom; }
#menu ul li.special { background-position:-800px bottom; }

#menu ul li img{display:none;}/*updateマーク隠す*/

#update a:hover{ text-decoration:none;}
#update ul li:first-child{ width:12%;}
#update ul li:nth-child(2){padding-top:1.4em; margin-left:1em; }


#info{margin-top:10px;}

#info ul li{width:50%; float:left;}
#info ul li img{margin:0; width:100%; border:none;}
#info #bnn img{width:50%; float:left;}
#info #bnn .bnnUpdate {display:block; width:26px; height:26px; position:relative; margin:0 0 -26px 0; padding:0;}

#bnn{width:490px; margin-right:20px; float:left; }
#bnn img{margin:0; padding:0;}
#spec{width:486px; float:left; height:266px;}
#spec .cero { position:relative; left:245px; width:auto; margin:0;  }
#spec .yoyaku { position:relative; left:240px; height:60px;width:auto; margin:0; }




#platform{ display:block; width:30%; margin:1em auto 1em 1em; float:left; }
#update-list{	max-width:100%;	margin:0 auto;	height:auto; color:#fff; z-index:9999; padding-left:1%;	padding-right:0;}

/*#footer{ width:100%; min-height:200px; position:relative; bo margin-top:0; background-color:#000; }*/
#footer{ width:100%; height:200px; position:relative; margin-top:0; background-color:#000; }

#footer img{width:1000px; margin:0 auto; position:relative; }

.flameLeft{ background:none; display:none;}
#pc_copy{ display:block; position:relative; width:55%; margin-top:3%; float:left; margin-left:2%;}
.movie { top:0; background-color:#336;width:40%; margin:0;}

.movie img { display:block; float:right;  width:100%; position:relative; z-index:10; margin-right:2%;}

#pagetop{ position: fixed;bottom: 0;right: 0; z-index:9999; margin:0; padding:0;}

.subcopy1{width:auto;}
.subcopy2{width:auto;}

/* ーーーーーーーーーーーーーーーーーーー

　　　　PC　各コンテンツページ

 ーーーーーーーーーーーーーーーーーーー*/
 
#tbox{width:83%; margin:0 auto; } 

#tbox ul.tboxLineup{ width:80%; margin-left:10%;color:#330;}
#tbox ul.tboxLineup li:nth-child(even){ margin-left:6%; margin-bottom:3%;}
#tbox ul.tboxLineup li:nth-child(odd){background:url(../images/marker.png) left no-repeat; margin-bottom:1%;background-size:contain; text-indent:6%; font-size:140%; line-height:150%;}

rb{ font-size:140%;}
rp { display: none; }
rt { top: -1em; left: 0; font-size: 50%; line-height: 1em white-space: nowrap; text-indent: 0; }

#leftSide,#rightSide{margin-top:15px; margin-bottom:15px; }

#leftSide.chara {float:left; width:15%; margin-right:2%;}

#leftSide.chara a{ display:block;padding:0; background-image:none;}

.jp-jplayer{display:block; height:auto; float:left;width:30%;display:block; float:left; }

#rightSide.story .text{margin:1%; padding:2% 2% 2%  2% ; border:2px solid #fbf2c6; text-align:left; line-height:250%; color:#fffae5; text-shadow:1px 1px #000000;}
#rightSide.story .text .strong{color:#fffae5; font-size:170%; line-height:300%; text-shadow:1px 1px #000000;}

#rightSide.keyword .text p{ padding:2% 2% 2%  2% ;}

#rightSide.keyword .text{ margin:1%; padding:1%; border:2px solid #fbf2c6; text-align:left; line-height:150%; color:#fffae5; text-shadow:1px 1px #000000;}
#rightSide.keyword .text p{ margin:1%; padding:1%;text-align:left; font-weight:normal; color:#fffae5; text-shadow:1px 1px #000000;}
#rightSide.keyword .text img{padding-top:1%;overflow:hidden; }
#rightSide.keyword .text .line{ width:100%; padding:0; margin:0; }

#rightSide.world .sample_text{float:left; width:60%; font-size:90%;}
#rightSide.world .sample_img{float:left; width:55%; font-size:90%;}
#rightSide.world .sample{float:left;width:35%; margin-top:8%;}

#rightSide.interview .photo{ float:right; padding:1em;}
#rightSide.interview .q1,#rightSide.interview .q2{ display:block; width:auto; margin-bottom:1em; }
#rightSide.interview .q3,#rightSide.interview .q4,#rightSide.interview .q5{ display:block; width:auto;margin-bottom:1em; }

#rightSide.chara .text{ min-width:520px; background-color:rgba(0,0,0,0.6); position:absolute; top:560px; margin:20px; padding:5px}
#rightSide.chara .chara_btn{ width:auto; margin:5% 1px 0 1px; height:auto; float:left; }

#rightSide.gallery{ width:82%;background-image:url(../images/bg_paper_dark.jpg); border:2px solid black; }
#leftSide.gallery img.bnnUpdate,#leftSide.story img.bnnUpdate,#leftSide.keyword img.bnnUpdate{width:auto; margin-bottom:-26px;}
#leftSide.gallery img.half{ display:block;width:70px;height:70px; float:left; margin:0 0 5% 0; padding:0; cursor: pointer;}
#leftSide.gallery img.half.right{margin-left:10px; }
#rightSide.gallery .text{ background-position:right bottom; background-repeat:no-repeat;padding:2% 5% 0 5%;line-height:150%;  text-shadow:1px -1px 1px rgba(255,255,255,0.3); }

ul.ss {margin:0 5%;width: 90%;}
ul.ss li {width:24%;}
.guide_txt{ float:left;width:65%;}
.guide_img{ float:left;width:24%;}

ul.playmov{ width:668px; margin:10px auto; }
ul.playmov li img.movbtn2 { width:324px;}
ul.playmov li{width:324px; height:182px; float:left; margin:0 10px 10px 0;}

ul.playmov li img.rollOverImg { width:100%;}
	
.yoyakuLineup img{width:285px;margin:1px;}

.officialTwitter{ display:inline-block;}
/*
img.heading{ display:block;margin:0; padding:0; width:auto; height:auto;}
*/
}

/*
#character{
	width:100%;	
}	

/*
@media screen and (max-width: 640px) {
#story, #character{ width:100%;}
	
.pc{display:none;}
.smart{display:block;}

#main{width:100%; height:auto;}


}

@media screen and (max-width: 460px) {
#wrapper{background-position:center top;}
#main{width:100%; height:100%;
background-image:url(../images/sp_bg.jpg); background-position:center top; background-size:100% auto; background-repeat:no-repeat; background-color:#000; }
#platform{ display:block; width:60%; margin:0.3em auto 1em 0.3em}
#logo{ width:100%;}




#bslog{ display:block;width:100%; margin:1em auto; }




}
	*/