﻿/*@charaset "utf-8";*/

html *{
	margin:0;
	padding:0;
}
html{
	min-height: 100%;
	background:url("../images/back.jpg") no-repeat 50% 50% fixed;
    background-size:cover;
}
body{
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
	font-size: 13px;
	line-height: 1.6em;
	font-weight: normal;
	text-align:center;
}
article,aside,canvas,details,figcaption,figure,header,footer,hgroup,menu,nav,section,summary {
	display: block;
}
img{
	border:none;
	vertical-align:bottom;
}
a{
	color:#009fe6;
	text-decoration:none;
}
a:hover{
	color:#9c9c9c;
	text-decoration:underline;
}

::selection {
	background: #22aae7;
	color:#fff;
}
::-moz-selection {
	background: #22aae7;
	color:#fff;

}

div{
	text-align:left;
}
p{
    font-size: 13px;
	line-height: 1.5em;
	text-align:left;
}
ul{
	list-style-type: none;
}
li{
    font-size: 13px;
	text-align:left;
}
th{
	font-size: 13px;
	text-align:left;
}
td{
    font-size: 13px;
	text-align:left;
}

/*共通*/
#wrapper{
	width:1210px;
	position:relative;
	overflow:hidden;
	margin:0px auto;
	min-height:1035px;
}
#top_frame{
	height:826px;
	position:relative;
	overflow:hidden;
	border: 3px solid #009fe6;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	/*margin:80px 5px 0;*/
	margin:0 5px 0;
}
#anime_bn{
	position:relative;
	margin-top:10px;
	text-align:right;
	z-index:200;
}

/*#anime_link{
	display:block;
	width:450px;
	height:70px;
	z-index:200;
}*/
#contents_frame{
	position:relative;
	overflow:hidden;
	border: 3px solid #009fe6;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	margin:80px 5px 0;
}
#contents_frame2{
	position:relative;
	overflow:hidden;
	border: 3px solid #009fe6;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	margin:0 5px 0;
}
#contents_left{
	position:relative;
	overflow:hidden;
	width:360px;
	margin:0 4px 0 10px;
	float:left;
}
#contents_right{
	position:relative;
	overflow:hidden;
	width:820px;
	float:left;
}
#contents_right_nakami{
	position:relative;
	overflow:hidden;
	padding:22px 35px 35px 17px;
}
#contents_right_nakami_s{
	position:relative;
	overflow:auto;
	height:743px;
	padding:22px 35px 35px 17px;
}
#nav_btn_frame{
	position:absolute;
	overflow:hidden;
	background:url("../images/nav_back.png") no-repeat;
	width:360px;
	height:420px;
	margin:0 0 0 0;
	z-index:100;
}
#nav_btn_frame_chara{
	position:absolute;
	overflow:hidden;
	background:url("../images/nav_back_chara.png") no-repeat;
	width:360px;
	height:420px;
	top:10px;
	z-index:100;
}
#nav_btn_frame_story{
	position:absolute;
	overflow:hidden;
	background:url("../images/nav_back_story.png") no-repeat;
	width:360px;
	height:420px;
	top:10px;
	z-index:100;
}
#nav_btn_frame_book{
	position:absolute;
	overflow:hidden;
	background:url("../images/nav_back_book.png") no-repeat;
	width:360px;
	height:420px;
	top:10px;
	z-index:100;
}
#nav_btn_frame_link{
	position:absolute;
	overflow:hidden;
	background:url("../images/nav_back_link.png") no-repeat;
	width:360px;
	height:420px;
	top:10px;
	z-index:100;
}
#nav_btn_frame_sp{
	position:absolute;
	overflow:hidden;
	background:url("../images/nav_back_sp.png") no-repeat;
	width:360px;
	height:420px;
	top:10px;
	z-index:100;
}

#contents_right_back{
	position:relative;
	overflow:hidden;
	width:820px;
	height:795px;
	margin-top:5px;
	background:url("../images/chara/chara_back.png") no-repeat;
}
#contents_left_back{
	position:relative;
	overflow:hidden;
	width:352px;
	height:347px;
	background:url("../images/side_back.png") no-repeat;
}
#book_side{
	margin:10px 0 0 8px;
	width:325px;
	height:315px;
	overflow:auto;
	position:relative;
}


/*TOP*/
#main_nav_frame{
	position:absolute;
	top:0px;
	overflow:hidden;
	background:url("../images/main_back.png") no-repeat;
	width:880px;
	height:1035px;
	z-index:100;
}

#top_right{
	position:relative;
	overflow:hidden;
	width:435px;
	float:right;
}
#top_nav{
	position:relative;
	overflow:hidden;
	margin-left:105px;
}
#whats_new{
	position:relative;
	overflow:hidden;
	width:435px;
	height:250px;
	/*background:url("../images/whats_back.png") no-repeat;*/
	margin:7px 0 15px 0;
}
#whats_new_top{
	width:435px;
	height:20px;
	position:relative;
	overflow:hidden;
	background:url("../images/whats_back_top.png") no-repeat;
}
#whats_new_bottom{
	width:435px;
	height:30px;
	position:relative;
	overflow:hidden;
	background:url("../images/whats_back_bottom.png") no-repeat;
}
#whats_nakami_waku{
	width:435px;
	position:relative;
	overflow:hidden;
	background:url("../images/whats_back_mid.png");
}
#whats_nakami{
	width:380px;
	height:185px;
	position:relative;
	overflow:hidden;
	margin:0 0 0 27px;
}
#whats_list{
	position:relative;
	overflow:auto;
	width:380px;
	height:150px;
}
#whats_list li{
	margin-bottom:10px;
	text-align:right;
	color:#009fe6;
}
#bunko_bn{
	position:relative;
	overflow:hidden;
	width:55px;
	height:55px;
	float:left;
	margin-top:10px;
	z-index:200;
}
#top_bn{
	position:relative;
	overflow:hidden;
	margin:30px 5px 10px 0;
	text-align:right;
}
#top_footer{
	position:relative;
	overflow:hidden;
	margin-top:5px;
}

.top_footer_bn{
	width:250px;
	position:relative;
	overflow:hidden;
	float:right;
	margin-right:5px;
}

#footer{
	position:relative;
	overflow:hidden;

}
.footer_bn_a{
	width:214px;
	position:relative;
	overflow:hidden;
	float:left;
	margin-right:10px;
}
.footer_bn_c{
	width:255px;
	position:relative;
	overflow:hidden;
	float:left;
}

/*chara*/
#chara_nakami{
	position:relative;
	overflow:hidden;
}

#chara_icon{
	position:relative;
	overflow:hidden;
	margin:440px 0 0 0;
}
#chara_icon li{
	float:left;
	width:86px;
	height:86px;
}
#chara_frame{
	position:relative;
	overflow:hidden;
	height:913px;
}
#chara_back{
	position:relative;
	overflow:hidden;
	width:820px;
	height:795px;
	margin-top:5px;
	background:url("../images/chara/chara_back.png") no-repeat;
}
#chara_img_p{
	position:absolute;
	top:70px;
	right:8px;
	z-index:100;
	overflow:hidden;
}
#chara_img_b{
	position:absolute;
	top:0px;
	left:150px;
}
#c001{
	position:absolute;
	top:86px;
	right:26px;
	z-index:100;
}
#c002{
	position:absolute;
	top:80px;
	right:26px;
	z-index:100;
}
#c003{
	position:absolute;
	top:-21px;
	right:26px;
	z-index:100;
}
#c004{
	position:absolute;
	top:80px;
	right:-8px;
	z-index:100;
}
#c005{
	position:absolute;
	top:78px;
	right:5px;
	z-index:100;
}
#c006{
	position:absolute;
	top:74px;
	right:26px;
	z-index:100;
}
#c007{
	position:absolute;
	top:78px;
	right:26px;
	z-index:100;
}
#c008{
	position:absolute;
	top:74px;
	right:26px;
	z-index:100;
}
.tab_chara{
	width:836px;
	height:900px;
}

/*story*/
#story_back{
	margin:6px 0 0 6px;
}
#story01t{
	position:absolute;
	top:210px;
	left:487px;
	z-index:100;
	width:203px;
	height:51px;
}
#story02t{
	position:absolute;
	top:350px;
	left:230px;
	z-index:100;
	width:156px;
	height:51px;
}
#story03t{
	position:absolute;
	top:410px;
	left:47px;
	z-index:100;
	width:87px;
	height:51px;
}
#story04t{
	position:absolute;
	top:410px;
	left:255px;
	z-index:100;
	width:126px;
	height:51px;
}
#story05t{
	position:absolute;
	top:410px;
	left:432px;
	z-index:100;
	width:120px;
	height:51px;
}
#story06t{
	position:absolute;
	top:470px;
	left:100px;
	z-index:100;
	width:164px;
	height:51px;
}
#story_img{
	margin:8px 0 0 8px;
}

.story_text{
	cursor: pointer;
}

/*BOOK*/
#book_side{
	position:relative;
	overflow:hidden;
}
#book_side li{
	width:75px;
	height:111px;
	float:left;
}
.book_img{
	margin:6px 0 0 -1px;
}
.b_btn01{
	position:absolute;
	top:490px;
	right:40px;
	background:url("../images/book/b_btn01_on.png") no-repeat;
}
.b_btn02{
	position:absolute;
	top:520px;
	right:40px;
	background:url("../images/book/b_btn02_on.png") no-repeat;
}
.b_btn01_h{
	position:absolute;
	top:490px;
	right:160px;
	background:url("../images/book/b_btn01_on.png") no-repeat;
}
.b_btn02_h{
	position:absolute;
	top:490px;
	right:40px;
	background:url("../images/book/b_btn02_on.png") no-repeat;
}
.b_btn01_l{
	position:absolute;
	top:490px;
	left:20px;
	background:url("../images/book/b_btn01_on.png") no-repeat;
}
.b_btn02_l{
	position:absolute;
	top:520px;
	left:20px;
	background:url("../images/book/b_btn02_on.png") no-repeat;
}
.b_btn01_lh{
	position:absolute;
	top:490px;
	left:20px;
	background:url("../images/book/b_btn01_on.png") no-repeat;
}
.b_btn02_lh{
	position:absolute;
	top:490px;
	left:140px;
	background:url("../images/book/b_btn02_on.png") no-repeat;
}


/*link*/
.link_waku{
	width:700px;
	height:100px;
	margin:20px auto 20px;
	position:relative;
	overflow:hidden;
	background-color:#00a0e8;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;

}
.link_waku_l{
	width:700px;
	margin:20px auto 20px;
	padding:20px 0;
	position:relative;
	overflow:hidden;
	background-color:#00a0e8;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;

}
.link_waku_left{
	position:relative;
	overflow:hidden;
	width:430px;
	float:left;
}
.link_waku_right{
	position:relative;
	overflow:hidden;
	width:250px;
	float:left;
}
.link_text{
	margin:38px 0 0 50px;
}
.link_text2{
	margin:25px 0 0 50px;
}
.link_bn{
	margin:30px 0 0 0;
}


/*sp*/
#sp_main{
	position:absolute;
	top:52px;
	right:26px;
	z-index:100;
}
#sp_side{
	margin:5px 0 0 12px;
	width:321px;
	height:260px;
	overflow:auto;
	position:relative;
}
#sp_side li{
	margin-bottom:5px;
}
/*
.jp-play{
	display:block;
	width:300px;
	height:80px;
	margin:0 auto;
	background:url("../images/sp/cdbtn_off.png") no-repeat;
}
.jp-pause{
	display:block;
	width:300px;
	height:80px;
	margin:0 auto;
	background:url("../images/sp/cdbtn_on.png") no-repeat;
}
*/

/*使いまわし*/

.hidden{
	display:none;
}
.bold{
	font-weight:bold;
}
.big{
	font-size:15px;
}
.big2{
	font-size:18px;
}
.small{
	font-size:11px;
}
.relative{
	position:relative;
	overflow:hidden;
}
.t_center{
	text-align:center;
}
.t_right{
	text-align:right;
}
.float_l{
	float:left;
}
.margin_t5px{
	margin-top:5px;
}
.margin_t10px{
	margin-top:10px;
}
.margin_b10px{
	margin-bottom:10px;
}
.margin_r10px{
	margin-right:10px;
}
.margin_r15px{
	margin-right:15px;
}
.margin_l10px{
	margin-left:10px;
}
.margin_t15px{
	margin-top:15px;
}
.margin_t1em{
	margin-top:1em;
}
.margin_t2em{
	margin-top:2em;
}
.margin_t20px{
	margin-top:20px;
}
.margin_t30px{
	margin-top:30px;
}
.margin_t40px{
	margin-top:40px;
}
.margin_t50px{
	margin-top:50px;
}
.margin_t60px{
	margin-top:60px;
}
.margin_t80px{
	margin-top:80px;
}
.pink{
	color:#d50080;
}


