body{
	width: 100%;
	height: 100%;
	min-height: 100%;
	margin: 0 auto;
	text-align: center;
	background: black;
	}
	
a{
    overflow: hidden;
    outline: none;
    text-decoration: none;
	}
	
#loader {
    width:245px;
    height:245px;
    display: none;
    position: fixed;
    _position: absolute; /* IE6対策 */
    top: 50%;
    left: 50%;
    margin-top: -122px; /* heightの半分のマイナス値 */
    margin-left: -122px; /* widthの半分のマイナス値 */
    z-index: 100;
	}
 
#fade {
    width: 100%;
    height: 100%;
    display: none;
    background-color: black;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 50;
	}		
	
#wrapper{
	width: 100%;
	margin: 0 auto;
	text-align: center;
	}
	
#contArea{
	position: relative;
	width: 980px;
	height: 2085px;
	margin: 0 auto;
	}
	
.star {
	position: absolute;
	width:100%;
	min-width: 980px;
	height: 4350px;
	height: 3600px\9;
	z-index:-3;
}
	
.star01{ background:url(../images/img_star01.png) repeat 0 0; }
.star02{ background:url(../images/img_star02.png) repeat 0 0; }
.star03{ background:url(../images/img_star03.png) repeat 0 0; }

a.btnPage {
	position: absolute;
	width: 92px;
	height: 50px;
	display: block;
	overflow: hidden;
	}
	
a.btnPage:hover{ background-position:left bottom; }

a.btnPagePrev{
	background: url(../images/btn_pagePrev.png);
	top:97px;
	right: -30px;
	}
a.btnPageNext{
	background: url(../images/btn_pageNext.png);
	top:172px;
	right: -30px;
	}
	
a.chara_btnPagePrev{
	background: url(../images/btn_pagePrev.png);
	top:97px;
	right: -30px;
	z-index: 905;
	}
	
a.chara_btnPageNext{
	background: url(../images/btn_pageNext.png);
	top:172px;
	right: -30px;
	z-index: 905;
	}	

/* オープニングエリア
------------------------------------------- */
#openingArea{
	width: 100%;
	height: 100%;
	background: black;
	z-index: 999;
	}
	
/* トップエリア
------------------------------------------- */
#topArea{
	width: 100%;
	min-width: 980px;
	text-align: center;
	margin: 0 auto;
	position: relative;
	}
	
video{
	position: relative;
	width: 95%;
	min-width: 980px;
	margin: 0 auto;
	opacity: 0.6;
	z-index: -2;
	}
	
	
#topChara{
	width: 100%;
	min-width: 980px;
	position: relative;
	margin: 0 auto;
	}
	
@media screen and (max-width: 800px) {
#topArea{
	width: 980px;
	height: 551px;
	text-align: center;
	margin: 0 auto;
	position: relative;
	}
	
#topImg{
	width: 980px;
	height: 551px;
	margin: 0 auto;
	}
	
	
#topChara{
	position: relative;
	margin: 0 auto;
	}

}
/* メディアクエリend	 */
	
#topChara01{
	width: 26%;
	height: 93%;
	position: absolute;
	left:7%;
	bottom:0;
	background: url(../images/img_chara01.png) no-repeat;
	background-size:contain;
	opacity: 0.9;
	display: none;
	}
	
#topChara02{
	width: 20%;
	height: 72%;
	position: absolute;
	left:30%; 
	bottom: 0;
	background: url(../images/img_chara02.png) no-repeat;
	background-size:contain;
	opacity: 0.9;
	display: none;
	}
	
#topChara03{
	width: 22%;
	height: 78%;
	position: absolute;
	left:50%; 
	bottom: 0;
	background: url(../images/img_chara03.png) no-repeat;
	background-size:contain;
	opacity: 0.9;
	display: none;
	}

#topChara04{
	width: 26%;
	height: 93%;
	position: absolute;
	left:67%; 
	bottom: 0;
	background: url(../images/img_chara04.png) no-repeat;
	background-size:contain;
	opacity: 0.9;
	display: none;
	}

#mahoujin{
	width: 65%;
	height: 111%;
	position: absolute;
	left:17%; 
	top:0;
	background: url(../images/img_mahoujin.png) no-repeat;
	background-size:contain;
	display: none;
	}
	
#toplogoLight{
	width: 14%;
	height: 48%;
	position: absolute;
	left:43%; 
	top: 10%;
	background: url(../images/img_logo_light.png) no-repeat;
	background-size:contain;
	display: none;
	}
	
#toplogo{
	width: 14%;
	height: 48%;
	position: absolute;
	left:43%; 
	top: 10%;
	background: url(../images/img_logo.png) no-repeat;
	background-size:contain;
	display: none;
	}
	
#youtube{
	width: 5%;
	height: 4%;
	position: absolute;
	right:0; 
	top: 10%;
	background: url(../images/ico_youtube.png) no-repeat;
	background-size:contain;
	z-index: 2;
	}
	
#gradation01{
	position: absolute;
	left: -2%;
	top:-3%;
	width: 30%;
	height:111%;
	background:url(../images/img_back_left.png);
	background-size:contain;
	opacity: 0.9;
	z-index:1;
	}
	
#gradation02{
	position: absolute;
	right: -2%;
	top:-3%;
	width: 31%;
	height:111%;
	background:url(../images/img_back_right.png);
	background-size:contain;
	opacity: 0.9;
	z-index:1;
	}
		
	
/*menuArea
----------------------------------------------------------- */
#menuBack{
	position: fixed;
	width: 100%;
	min-width: 1370px;
	height: 70px;
	margin: 0 auto;
	background: black;
	z-index: 990;
	opacity: 0.7;
	display: none;
	}

#menuArea{
	position: fixed;
	top:0;
	left: 50%;
	height: 70px;
	width: 830px;
	z-index: 999;
	margin: 0 0 0 -415px;
	display: none;
	}

a.btnTop{
	position: absolute;
	top:5px;
	left: 12px;
	width: 70px;
	height: 60px;
	background: url(../images/btn_top_roll.png);
	display: block;
	overflow: hidden;
	z-index: 910;
	}
	
a.btnTop:hover{
	background-position:left bottom;
	}
	
a.btnStory{
	position: absolute;
	top:5px;
	left: 113px;
	width: 100px;
	height: 60px;
	background: url(../images/btn_story_roll.png);
	display: block;
	overflow: hidden;
	z-index: 910;
	}
	
a.btnStory:hover{
	background-position:left bottom;
	}
	
a.btnChara{
	position: absolute;
	top:5px;
	left: 249px;
	width: 140px;
	height: 60px;
	background: url(../images/btn_chara_roll.png);
	display: block;
	overflow: hidden;
	z-index: 910;
	}
	
a.btnChara:hover{
	background-position:left bottom;
	}
	
a.btnBooks{
	position: absolute;
	top:5px;
	left: 429px;
	width: 100px;
	height: 60px;
	background: url(../images/btn_books_roll.png);
	display: block;
	overflow: hidden;
	z-index: 910;
	}
	
a.btnBooks:hover{
	background-position:left bottom;
	}
	
a.btnSpecial{
	position: absolute;
	top:5px;
	left: 565px;
	width: 120px;
	height: 60px;
	background: url(../images/btn_special_roll.png);
	display: block;
	overflow: hidden;
	z-index: 910;
	}
	
a.btnSpecial:hover{
	background-position:left bottom;
	}			
	
.twitter-share-button{
	position: absolute;
	top:13px;
	left: 735px;
	width: 46px;
	height: 46px;
	background: url(../images/ico_tweet.png);
	display: block;
	overflow: hidden;
	}
	
a.twitter-share-button:hover{
	background-position:left bottom;
	}	
	
.fb-like{
	position: absolute;
	top:13px;
	left: 790px;
	width: 26px;
	height: 46px;
	background: url(../images/ico_fb.png);
	display: block;
	overflow: hidden;
	}
	
a.fb-like:hover{
	background-position:left bottom;
	}
	
/* ニュースエリア
------------------------------------------- */
#newsArea{
	width: 425px;
	height: 310px;
	position: absolute;
	bottom: 13px;
	left: 50%;
	margin: 0 0 0 -212px;
	font-size: 11px;
	line-height: 17px;
	text-align: left;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	background: url(../images/img_news_back.png);
	display: none;
	}
	
	
#newsArea li{
	list-style: none;
	}	
	
#icoNews{
	position: absolute;
	top:13px;
	left: 149px;
	opacity: 0.5;
	}
	
#icoNewsL{
	position: absolute;
	top:31px;
	left: 167px;
	}
	
#newsTxt{
	position: absolute;
	top:41px;
	left: 169px;
	}

/* スライド設定 */	
#billboard{
	width: 290px;
	height: 136px;
	position: relative;
	top:121px;
	left:76px;
	overflow:hidden;
	}
	
.newsLine{
	width: 290px;
	display: block;
	padding: 8px 0 8px 0;
	border-top:1px solid #464646;
	position: relative;
	}
	
.newsLine02{
	width: 290px;
	display: block;
	padding: 8px 0 8px 0;
	border-top:1px solid #464646;
	position: relative;
	}	
	
.newsLine:hover{
	background: rgba(255,0,0,0.5);
	text-decoration: underline;
	color: red;
	}
	
.newsLine a{
	color: red;
	}	
	
.day{
	font-family: arial,helvetica,sans-serif;
	font-size: 11px;
	color: red;
	float: left;
	}	
	
.newsHead{
	width: 220px;
	font-size: 11px;
	line-height: 17px;
	text-align: justify;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	overflow: hidden;
	position: relative;
	left:10px;
	}
	
.red{
	color: red;
	}
	
.white{
	color: white;
	}				

/*story
----------------------------------------------------------- */
#story{
	position: absolute;
	top:100px;
	width: 980px;
	height: 750px;
	}

#storyTxt{
	position: absolute;
	top:263px;
	left:97px;
	}
	
#icoStory{
	position: absolute;
	top:50px;
	left:392px;
	}
	
#icoStory img{
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="ico_story.png", sizingMethod="scale");
	}
	
	
#icoStoryL{
	position: absolute;
	top:50px;
	left:392px;
	}
	
#icoStoryL img{
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="ico_story_l.png", sizingMethod="scale");
	}	
	
#icoStxt{
	position: absolute;
	top:120px;
	left:444px;
	}

.light{
	position: absolute;
	top:187px;
	left:7px;
	}
	
.light02{
	position: absolute;
	top:360px;
	left:-100px;
	}
	
.light03{
	position: absolute;
	top:400px;
	left:130px;
	}
	
.light04{
	position: absolute;
	top:260px;
	left:720px;
	}
	
.light05{
	position: absolute;
	top:200px;
	left:850px;
	}		
	

/*character
----------------------------------------------------------- */
#character{
	width: 980px;
	position: absolute;
	top:1000px;
	height: 750px;
	}

#icoChara{
	position: absolute;
	top:70px;
	left:392px;
	}
	
#icoChara img{
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="ico_character.png", sizingMethod="scale");
	}	
	
#icoCharaL{
	position: absolute;
	top:70px;
	left:392px;
	}
	
#icoCharaL img{
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="ico_character_l.png", sizingMethod="scale");
	}	
	
#icoCtxt{
	position: absolute;
	top:143px;
	left:425px;
	}

.charaOff{
	z-index: 901;
	}
	
.charaOn{
	z-index: 902;
	display: none;
	}
	
.charaOver{
	z-index: 903;
	display: none;
	}
	
.takeshi {
	position: absolute;
	left:693px;
	bottom:0px;
}
#txtTakeshi{
	position: absolute;
	left:500px;
	top:411px;
	z-index: 904;
	display: none;
	}	

#bgTakeshi02{
	position: absolute;
	left:581px;
	top:6px;
	display: none;
	}
	
.kurumi {
	position: absolute;
	left:472px;
	bottom:0px;
	}
	
#bgKurumi02{
	position: absolute;
	left:314px;
	top:5px;
	display: none;
	}
	
#txtKurumi{
	position: absolute;
	left:237px;
	top:357px;
	z-index: 904;
	display: none;
	}
	
.riku {
	position: absolute;
	left:232px;
	bottom:0px;
	}		

#bgRiku02{
	position: absolute;
	left:79px;
	top:37px;
	display: none;
	}
	
#txtRiku{
	position: absolute;
	left:435px;
	top:418px;
	z-index: 904;
	display: none;
	}
	
.kazumi {
	position: absolute;
	left:-46px;
	bottom:0px;
	}
	
#txtKazumi{
	position: absolute;
	left:224px;
	top:418px;
	z-index: 904;
	display: none;
	}
	
#bgKazumi02{
	position: absolute;
	left:-177px;
	top:-2px;
	display: none;
	}
	

/*books
----------------------------------------------------------- */
#books{	
	width: 980px;
	position: absolute;
	top:1900px;
	height: 860px;
	background: url(../images/bg_contBack02.png);
	}

#icoBooks{
	position: absolute;
	top:50px;
	left:392px;
	}
	
#icoBooks img{
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="ico_books.png", sizingMethod="scale");
	}	
	
#icoBooksL{
	position: absolute;
	top:50px;
	left:392px;
	}
	
#icoBooksL img{
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="ico_books_l.png", sizingMethod="scale");
	}	
	
#icoBtxt{
	position: absolute;
	top:118px;
	left:439px;
	}
	
a.linkBooks {
	position: absolute;
	top:11px;
	left: 18px;
	width: 282px;
	height: 406px;
	display: block;
	overflow: hidden;
}
	
a.linkBooks:hover{
	background-position:left bottom;
	}
	
a.linkBooks01{
	background: url(../images/img_shosei_01.png);
	}
	
	
a.linkBooks02{
	background: url(../images/img_shosei_02.png);
	}
	
a.linkBooks03{
	background: url(../images/img_shosei_03.png);
	}
	
a.linkBooks04{
	background: url(../images/img_shoei_04.png);
	}
	
a.linkBooks05{
	background: url(../images/img_shoei_05.png);
	}
	
a.linkBooks06{
	background: url(../images/img_shosei_06.png);
	}
	
a.linkBooks07{
	background: url(../images/img_shosei_07.png);
	}
	
a.linkBooks08{
	background: url(../images/img_shosei_08.png);
	}
	
a.linkBooks09{
	background: url(../images/img_shosei_09.png);
	}

a.linkBooks10{
	background: url(../images/img_shosei_10.png);
	}

a.linkBooks11{
	background: url(../images/img_shosei_11.png);
	}

a.linkBooks12{
	background: url(../images/img_shosei_12.png);
	}
	
a.linkBooksC01{
	background: url(../images/img_shoei_c01.png) no-repeat;
	}
	
a.linkBooksC02{
	background: url(../images/img_shoei_c02.png) no-repeat;
	}
	
a.linkBooksC03{
	background: url(../images/img_shoei_c03.png) no-repeat;
	}
	
a.linkBooksC04{
	background: url(../images/img_shoei_c04.png) no-repeat;
	}
	
a.linkBooksC05{
	background: url(../images/img_shoei_c05.png) no-repeat;
	}	

a.linkBooksC06{
	background: url(../images/img_shoei_c06.png) no-repeat;
	}	
	
a.sampleRead{
	position: absolute;
	bottom:32px;
	left: 57px;
	width: 220px;
	height: 35px;
	background: url(../images/btn_tachiyomi_roll.png);
	display: block;
	overflow: hidden;
	}
	
a.sampleRead:hover{
	background-position:left bottom;
	}
	
a.linkBooksC_logo{
	position: absolute;
	bottom:59px;
	left: 528px;
	}
	
a.linkBooksC_logo:hover{
	opacity: 0.7;
	}	

	
/*slider
----------------------------------------------------------- */
.slide_switch {
	width:321px;
	height:69px;
	background: url(../images/switch_kakomi.png);
	margin:245px auto -245px;
	position:relative;
}

.slider-view {
    position: relative;
	top:229px;
	left:137px;
    width: 700px; /* スライダーで表示するエリアの大きさ */
    height: 500px;
    overflow: hidden; /* 必須 */
	}

/* width は js で指定するのでここでは書かない */
.slider-container {
    position: absolute;
    top: 0;
    left: 0;
	}
	
/* スライドするコンテンツ部分 */
.slider-container div {
    position: relative; /* ループ処理に使う */
    float: left;
    width: 700px; /* view と同じ大きさに */
    height: 500px;
	}
		
/* やじるし */
#slide-prev{
    position: absolute;
    top: 430px;
    left: 0px;
	z-index:920;
	cursor:pointer;
	}

a.slide-prev{
	width: 95px;
	height: 185px;
    position: absolute;
    top: 430px;
    left: 0px;
	background: url(../images/ico_back_roll.png);
	display: block;
	overflow: hidden;
	z-index: 920;
	}
	
a.slide-prev:hover{
	background-position:left bottom;
	}	
	
#slide-next{
    position: absolute;
    top: 430px;
    left: 885px;
	z-index:920;
	cursor:pointer;
	}
	
a.slide-next{
	width: 95px;
	height: 185px;
	position: absolute;
    top: 430px;
    left: 885px;
	z-index:920;
	background: url(../images/ico_next_roll.png);
	display: block;
	overflow: hidden;
	}
	
a.slide-next:hover{
	background-position:left bottom;
	}	
	
/* コミックスジャンプボタン */
.comics-pagination {
	background: url(../images/switch_comics.png) top left;
	width:101px;
	height:68px;
	overflow:hidden;
    position: absolute;
    top: 0px;
    left: 182px;
	cursor:pointer;
}

.novels-pagination {
	background: url(../images/switch_novels.png) bottom left;
	width:101px;
	height:68px;
	overflow:hidden;
    position: absolute;
    top: 0px;
    left: 37px;
	cursor:pointer;
}
	
/*special
----------------------------------------------------------- */
#special{
	width: 980px;
	position: absolute;
	top:2800px;
	height: 750px;
	background: url(../images/bg_contBack02.png);
	}

#icoSpecial{
	position: absolute;
	top:50px; left:392px;
	}
	
#icoSpecial img{
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="ico_special.png", sizingMethod="scale");
	}	
	
#icoSpecialL{
	position: absolute;
	top:50px; left:392px;
	}

#icoSpecialL img{
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="ico_special_l.png", sizingMethod="scale");
	}
	
#icoSCtxt{
	position: absolute;
	top:110px; left:430px;
	}
	
#txtGraphic{
	position: absolute;
	top:231px; left:10px;
	}

#line1{
	width: 900px;
	border: 1px solid #969696;
	position: absolute;
	top:273px; left:25px;
	}

#txtMovie{
	position: absolute;
	top:425px; left:17px;
	}
	
#line2{
	width: 900px;
	border: 1px solid #969696;
	position: absolute;
	top:468px; left:25px;
	}
	
.movie {
	position: absolute;
	top:468px;
	width: 220px;
	height: 132px;
	display: block;
	overflow: hidden;
	z-index: 906;
	}
	
.movie01{
	left: 17px;
	background: url(../images/ico_movie01_roll.png);
	}
	
.movie02{
	left: 237px;
	background: url(../images/ico_movie02_roll.png);
	}
	
a.movie:hover{
	background-position:left bottom;
	}
	
#icoGraphic{
	position: absolute;
	top:272px;
	left:17px;
	z-index: 905;
	}
	
a.kuchie {
	position: absolute;
	width: 70px;
	height: 70px;
	display: block;
	overflow: hidden;
	z-index: 906;
	}

a.mordal:hover{
	background-position:left bottom;
	}	
	
a.kuchie01{
	top:0px;
	left: 0px;
	background: url(../images/ico_kuchie01_roll.png);
	}
	
a.kuchie02{
	top:0px;
	left: 60px;
	background: url(../images/ico_kuchie02_roll.png);
	}
	
a.kuchie03{
	top:0px;
	left: 120px;
	background: url(../images/ico_kuchie03_roll.png);
	}
	
a.kuchie04{
	top:0px;
	left: 180px;
	background: url(../images/ico_kuchie04_roll.png);
	}
	
a.kuchie05{
	top:0px;
	left: 240px;
	background: url(../images/ico_kuchie05_roll.png);
	}
	
a.kuchie06{
	top:0px;
	left: 300px;
	background: url(../images/ico_kuchie06_roll.png);
	}
	
a.kuchie07{
	top:0px;
	left: 360px;
	background: url(../images/ico_kuchie07_roll.png);
	}
	
a.kuchie08{
	top:0px;
	left: 420px;
	background: url(../images/ico_kuchie08_roll.png);
	}
	
a.kuchie09{
	top:0px;
	left: 480px;
	background: url(../images/ico_kuchie09_roll.png);
	}
	
a.kuchie10{
	top:0px;
	left: 540px;
	background: url(../images/ico_kuchie10_roll.png);
	}
	
a.kuchie11{
	top:0px;
	left: 600px;
	background: url(../images/ico_kuchie11_roll.png);
	}
	
a.kuchie12{
	top:0px;
	left: 660px;
	background: url(../images/ico_kuchie12_roll.png);
	}
	
a.kuchie13{
	top:0px;
	left: 720px;
	background: url(../images/ico_kuchie13_roll.png);
	}
	
a.kuchie14{
	top:0px;
	left: 780px;
	background: url(../images/ico_kuchie14_roll.png);
	}	
	
a.kuchie15{
	top:60px;
	left: 0;
	background: url(../images/ico_kuchie15_roll.png);
	}
	
a.kuchie16{
	top:60px;
	left: 60px;
	background: url(../images/ico_kuchie16_roll.png);
	}
	
a.kuchie17{
	top:60px;
	left: 120px;
	background: url(../images/ico_kuchie17_roll.png);
	}
	
a.kuchie18{
	top:60px;
	left: 180px;
	background: url(../images/ico_kuchie18_roll.png);
	}

a.kuchie19{
	top:60px;
	left: 240px;
	background: url(../images/ico_kuchie19_roll.png);
	}

a.kuchie20{
	top:60px;
	left: 300px;
	background: url(../images/ico_kuchie20_roll.png);
	}		

a.kuchie21{
	top:60px;
	left: 240px;
	background: url(../images/ico_kuchie23_roll.png);
	}

a.kuchie22{
	top:60px;
	left: 300px;
	background: url(../images/ico_kuchie24_roll.png);
	}	

/*footerArea
----------------------------------------------------------- */
#footerArea{
	width: 100%;
	position: absolute;
	top: 745px;
	height: 140px;
	}
	
#fotterBack{
	width: 100%;
	position: absolute;
	top: 0px;
	height: 140px;
	background: black;
	opacity: 0.7;
	}	


#banner01{
	position: absolute;
	top:23px;
	left:272px;
	z-index: 905;
	}
	
#banner02{
	position: absolute;
	top:20px;
	left:460px;
	z-index: 905;
	}
	
#banner03{
	position: absolute;
	top:15px;
	left:578px;
	z-index: 905;
	}
	
	
#copy{
	position: absolute;
	top:83px;
	left:446px;
	z-index: 905;
	font-family: sans-serif;
	font-size: 10px;
	font-weight: bold;
	line-height: 15px;
	color: white;
	}
	
.banner:hover{
	opacity: 0.7;
	}
	
.copyBig{
	font-size: 16px;
	font-weight: normal;
	position: relative;
	top: 2px;
	}