@charset "UTF-8";

/*/////////////////////////////////////////////////////////////

css : fractale
Date : 2010.11.22

[Main] 
	0. Base Layout
	1. Header
	2. Nav
	3. Footer
	4. Content
	5. Top
	6. Introduction
	7. Episode
	8. Character
	9. Cast & Staff
	10. Products
	11. Link
	12. Special
	98. Text
	99. Modules

//////////////////////////////////////////////////////////////*/

/* ------------------------------------------------------------
	0. Base Layout
------------------------------------------------------------ */

html,
body{
	width: 100%;
	background: #FFF;
	min-width: 820px;
}
#loading {
	position: absolute;
	z-index: 100;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	display: none;
}
#root #loading {
	position: absolute;
	z-index: 100;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	background: #FFF url(../images/common/header/header_title.png) no-repeat center 50px;
}
#loading img{
	position: absolute;
	top: 250px;
	left: 50%;
	margin: 0 0 0 -42px;
}
#root #loading img{
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -25px 0 0 -25px;
}
#wrapper {
	margin: 0;
	padding: 0;
	width: 100%;
	text-align: center;
}

#header {
	position: relative;
	z-index: 50;
	margin: 0 auto;
	padding: 0;
	width: 810px;
	overflow: hidden;
	background: url(../images/common/content/content_bg_middle.png) repeat-y center;
}
#content {
	margin: 0 auto 20px;
	padding: 0;
	width: 810px;
	overflow: hidden;
	background: url(../images/common/content/content_bg_middle.png) repeat-y center;
}

#footer {
	margin: 0;
	padding: 0 0 30px 0;
	width: 100%;
	overflow: hidden;
	background: url(../images/common/footer/footer_bg.png) repeat-x bottom;
}

#noscriptMessage {
	position: relative;
	top: 0;
	left: 0;
	z-index: 1000;
	padding: 10px 0;
	width: 100%;
	border-bottom: 1px solid #CCC;
	background: #000;
}

/* ------------------------------------------------------------
	1. Header
------------------------------------------------------------ */

/* Title */
#header #headerBody{
	margin: 0 auto;
	padding: 0;
	width: 810px;
	overflow: hidden;
	background: url(../images/common/header/header_title_inner.png) no-repeat center 0;
	text-align: center;
}
#root #header #headerBody{
	background: none;
}

#header #title{
	display: none;
}

#header #header_toplink{
	display: block;
	margin: 0 auto;
	width: 800px;
	height: 100px;
	overflow: hidden;
}
#header #header_toplink img{
	display: none;
}
#root #header #header_toplink{
	margin: 0 5px 0 0;
	width: 300px;
	height: 110px;
	float: right;
	display: inline;
}
#root #header #header_toplink img{
	display: block;
}

#header .headerEnd{
	margin: 0;
	padding: 0;
	overflow: hidden;
	display: inline;
}
#header .headerEnd hr{
	display: none;
}


/* ------------------------------------------------------------
	2. Nav
------------------------------------------------------------ */

#nav{
	margin: 0 auto;
	width: 800px;
	height: 40px;
	overflow: hidden;
}
#nav ul{
	width: 800px;
	overflow: hidden;
	list-style: none;
}
#nav li{
	float: left;
	background-position: 0 bottom;
}
#nav li,
#nav li a,
#nav li span{
	height: 40px;
	background-repeat: no-repeat;
}
#nav li a{
	display: block;
	background-position: 0 top;
}
#nav li span{
	display: block;
	background-position: 0 bottom;
}
#nav li a span{
	display: none;
}
#nav li a.nav_btn:hover{
	background-position: 0 bottom;
}
#nav li span{
	overflow: hidden;
	text-indent: -9999px;
	text-align: left;
}
#nav li#nav_news a,
#nav li#nav_news span{
	width: 72px;
	background-image: url(../images/common/nav/nav_news.png);
}
#nav li#nav_introduction a,
#nav li#nav_introduction span{
	width: 140px;
	background-image: url(../images/common/nav/nav_introduction.png);
}
#nav li#nav_episode a,
#nav li#nav_episode span{
	width: 101px;
	background-image: url(../images/common/nav/nav_episode.png);
}
#nav li#nav_character a,
#nav li#nav_character span{
	width: 113px;
	background-image: url(../images/common/nav/nav_character.png);
}
#nav li#nav_caststaff a,
#nav li#nav_caststaff span{
	width: 114px;
	background-image: url(../images/common/nav/nav_caststaff.png);
}
#nav li#nav_products a,
#nav li#nav_products span{
	width: 106px;
	background-image: url(../images/common/nav/nav_products.png);
}
#nav li#nav_link a,
#nav li#nav_link span{
	width: 67px;
	background-image: url(../images/common/nav/nav_link.png);
}
#nav li#nav_special a,
#nav li#nav_special span{
	width: 87px;
	background-image: url(../images/common/nav/nav_special.png);
}

/* ------------------------------------------------------------
	3. Footer
------------------------------------------------------------ */

#footerBody {
	margin: 0 auto;
	padding: 0;
	width: 810px;
	overflow: hidden;
}
#footer_caststaff,
#footer_btn_gangan,
#footer_novel{
	display: none;
}

#footer_tweet{
	margin: 0 0 20px 0;
	float: right;
	clear: right;
	display: block;
}
#root #footer_tweet{
	margin: 0 0 20px 0;
	width: 230px;
	float: left;
	clear: none;
	display: block;
}
#root #footer_tweet h4{
	margin: 0 0 10px 0;
}
#root #footer_caststaff{
	margin: 0 0 10px 0;
	width: 565px;
	float: right;
	clear: right;
	display: block;
	overflow: hidden;
}
#root #footer_btn_gangan{
	margin: 0 0 10px 0;
	width: 565px;
	float: right;
	clear: right;
	display: block;
	overflow: hidden;
}
#root #footer_novel{
	margin: 0 0 10px 0;
	width: 565px;
	float: right;
	clear: right;
	display: block;
	overflow: hidden;
}

#footer_copy{
	margin: 0 0 10px 0;
	float: right;
	clear: right;
}
#footer_noitamina{
	margin: 0 0 10px 0;
	float: right;
	clear: right;
}

/* tweet */
.tweet ul.tweet_list,
.query ul.tweet_list {
	margin: 0;
	overflow: hidden;
	list-style: none;
}

.tweet .tweet_list li,
.query .tweet_list li {
	margin: 0 0 2px;
	padding: 0;
	overflow-y: auto;
	overflow-x: hidden;
}
.tweet .tweet_list .tweet_even,
.query .tweet_list .tweet_even {
}

.tweet .tweet_list .tweet_avatar,
.query .tweet_list .tweet_avatar {
	float: left;
	margin: 0 10px 0 0;
}

.tweet .tweet_list .tweet_avatar img,
.query .tweet_list .tweet_avatar img {
	margin-top: .3em;
}

#twitter span {
	text-transform: inherit;
}

/* ------------------------------------------------------------
	4. Content
------------------------------------------------------------ */

/* 1c & common */

#contentBody {
	margin: 0;
	padding: 0 0 5px 0;
	overflow: hidden;
	background: url(../images/common/content/content_bg_bottom.png) no-repeat center bottom;
}

.articles {
	margin: 10px auto 0;
	padding: 0;
	width: 800px;
	overflow: hidden;
}
.articleTitle {
	margin: 0 0 20px 0;
	width: 800px;
	overflow: hidden;
}
.articleBody {
	margin: 0 0 10px 0;
	width: 800px;
	overflow: hidden;
}
.articleBody h3{
	margin: 0 0 10px 0;
}
.articleImage {
	margin: 0 0 10px 0;
}

#content .contentEnd{
	margin: 0;
	padding: 0;
	overflow: hidden;
	display: inline;
}
#content .contentEnd hr{
	display: none;
}

/* 2c */
#main2c {
	margin: 0;
	padding: 0;
	overflow: hidden;
	float: right;
}
#sub2c {
	margin: 0;
	padding: 0;
	overflow: hidden;
	width: 200px;
	float: left;
}

/* ------------------------------------------------------------
	5. Top
------------------------------------------------------------ */

#root #content {
	/* ie6 */_overflow: visible;
}
#root #contentBody {
	height: 785px;
}

#keyvis{
	position: absolute;
	top: 0;
	/* ie6 */_top: -150px;
	width: 810px;
	height: 935px;
	display: block;
	margin: 0 0 0 5px;
}
#keyvis img{
	position: absolute;
	z-index: 0;
}
#keyillustrator{
	position: relative;
	height: 665px;
	/* ie7 */* height: 662px;
	/* ie6 */_height: 665px;
	margin: 0 5px 5px 0;
	overflow: hidden;
	background: url(../images/top/keyillustrator.png) no-repeat right bottom;
	display: block;
}
#keyillustrator img{
	display: none;
}

#recentNews{
	position: relative;
	/* ie6 */_position: static;
	margin: 0 auto;
	width: 800px;
	height: 115px;
	overflow: hidden;
	background: url(../images/top/top_bg_news.png);
	display: block;
}
#recentNews ul {
	margin: 10px auto 0;
	width: 780px;
	height: 95px;
	overflow: auto;
	list-style: none;
	/* ie */scrollbar-base-color:#FFF;
	/* ie */scrollbar-face-color:#000;
	/* ie */scrollbar-arrow-color:#FFF;
	/* ie */scrollbar-3dlight-color:#000;
	/* ie */scrollbar-shadow-color:#000;
	/* ie */scrollbar-darkshadow-color:#000;
	/* ie */scrollbar-highlight-color:#000;
	/* ie */scrollbar-track-color:#FFF;
}
#recentNews ul li {
	margin: 0 0 5px;
	overflow: hidden;
	display: block;
}
#recentNews span{
	margin: 0 10px 0 0;
	float: left;
}
#recentNews h2{
	float: left;
}

/* ------------------------------------------------------------
	6. Introduction
------------------------------------------------------------ */
#page_introduction{
}
#content_intro{
}
#content_story{
}

/* ------------------------------------------------------------
	7. Episode
------------------------------------------------------------ */
#page_episode{
}
#episode{
}

#episode .articleImage{
	width: 800px;
	overflow: hidden;
}
#episode .content_ep_image{
}
#episode .content_ep_inner{
	width: 800px;
	overflow: hidden;
}
#episode .content_ep_inner .articleImage{
	width: 70px;
	float: left;
}
#episode .content_ep_inner .content_ep_text{
	width: 720px;
	float: right;
}
#episode .episodeEnd{
	margin: 10px 0;
	padding: 0;
	width: 800px;
	height: 5px;
	overflow: hidden;
	display: block;
	background: url(../images/episode/episode_line.png) no-repeat;
}
#episode .episodeEnd hr{
	display: none;
}

/* ------------------------------------------------------------
	8. Character
------------------------------------------------------------ */
#page_character{
}
#page_character #main2c{
	width:544px;
}
#page_character #main2c .articleBody{
	width: 500px;
	margin: 0 0 0 22px;
}
#page_character #sub2c {
	width:200px;
}
#character_nav{
	margin: 0 0 20px;
	width: 200px;
	overflow: hidden;
}
#character_nav ul{
	padding: 2px 0 0 0;
	width: 200px;
	overflow: hidden;
	list-style: none;
	background-image: url(../images/character/nav/character_line.png);
	background-position: 0 top;
	background-repeat: no-repeat;
}
#character_nav li{
	background-position: 0 bottom;
	margin: 0 15px 0 0;
	padding: 5px 0 7px 0;
	background-image: url(../images/character/nav/character_line.png);
}
#character_nav li,
#character_nav li a,
#character_nav li span{
	width: 175px;
	height: 15px;
	background-repeat: no-repeat;
}
#character_nav li a{
	display: block;
	background-position: 0 top;
}
#character_nav li span{
	display: block;
	background-position: 0 bottom;
}
#character_nav li a span{
	display: none;
}
#character_nav li a.nav_btn:hover{
	background-position: 0 bottom;
}
#character_nav li span{
	overflow: hidden;
	text-indent: -9999px;
	text-align: left;
}
#character_nav li#nav_chara1 a,
#character_nav li#nav_chara1 span{
	background-image: url(../images/character/nav/character_clain.png);
}
#character_nav li#nav_chara2 a,
#character_nav li#nav_chara2 span{
	background-image: url(../images/character/nav/character_phryne.png);
}
#character_nav li#nav_chara3 a,
#character_nav li#nav_chara3 span{
	background-image: url(../images/character/nav/character_nessa.png);
}
#character_nav li#nav_chara4 a,
#character_nav li#nav_chara4 span{
	background-image: url(../images/character/nav/character_enri.png);
}
#character_nav li#nav_chara5 a,
#character_nav li#nav_chara5 span{
	background-image: url(../images/character/nav/character_sunda.png);
}
#character_nav li#nav_chara6 a,
#character_nav li#nav_chara6 span{
	background-image: url(../images/character/nav/character_barrot.png);
}
#character_nav li#nav_chara7 a,
#character_nav li#nav_chara7 span{
	background-image: url(../images/character/nav/character_moeran.png);
}

#character_ctrl{
	position: relative;
	top: 250px;
	z-index: 40;
	display: none;
}
#character_btnleft{
	position: absolute;
	right: 0;
}
#character_btnright{
	position: absolute;
	left: 0;
}

/* ------------------------------------------------------------
	9. Cast & Staff
------------------------------------------------------------ */
#page_caststaff{
}
#content_cast{
}
#content_staff{
}
#content_cast ul,
#content_staff ul{
	list-style: none;
}
#content_cast ul li,
#content_staff ul li{
	margin: 0 0 10px 0;
}

/* ------------------------------------------------------------
	10. Products
------------------------------------------------------------ */

#page_products{
}
#page_products .articleBody{
	background: #FFF;
}

.content_products{
	width: 800px;
	overflow: hidden;
	margin: 0 0 10px;
}
#products .articleImage{
	width: 390px;
	overflow: hidden;
	float: left;
}
#products .content_products_text{
	width: 400px;
	float: right;
}
#products .productsLine{
	margin: 10px 0;
	padding: 0;
	width: 400px;
	height: 5px;
	overflow: hidden;
	display: block;
	background: url(../images/products/products_line.png) no-repeat;
}
#products .productsLine hr{
	display: none;
}

#products_nav{
	margin: 0 auto 20px;
	width: 800px;
	height: 15px;
	overflow: hidden;
}
#products_nav ul{
	width: 800px;
	overflow: hidden;
	list-style: none;
}
#products_nav li{
	float: left;
	background-position: 0 bottom;
	margin: 0 15px 0 0;
}
#products_nav li,
#products_nav li a,
#products_nav li span{
	height: 15px;
	background-repeat: no-repeat;
}
#products_nav li a{
	display: block;
	background-position: 0 top;
}
#products_nav li span{
	display: block;
	background-position: 0 bottom;
}
#products_nav li a span{
	display: none;
}
#products_nav li a.nav_btn:hover{
	background-position: 0 bottom;
}
#products_nav li span{
	overflow: hidden;
	text-indent: -9999px;
	text-align: left;
}
#products_nav li#nav_brdvd a,
#products_nav li#nav_brdvd span{
	width: 99px;
	background-image: url(../images/products/nav/products_nav_brdvd.png);
}
#products_nav li#nav_comic a,
#products_nav li#nav_comic span{
	width: 52px;
	background-image: url(../images/products/nav/products_nav_comic.png);
}
#products_nav li#nav_music a,
#products_nav li#nav_music span{
	width: 49px;
	background-image: url(../images/products/nav/products_nav_music.png);
}
#products_nav li#nav_etc a,
#products_nav li#nav_etc span{
	width: 32px;
	background-image: url(../images/products/nav/products_nav_etc.png);
}



/* ------------------------------------------------------------
	11. Link
------------------------------------------------------------ */
#page_link{
}
#content_link{
}
#content_banner{
}

#content_link img,
#content_link a{
	margin: 0 0 5px 0;
}
#content_link p,
#content_banner p{
	margin: 0 0 10px 0;
}
/* ------------------------------------------------------------
	12. Special
------------------------------------------------------------ */
#page_special{
}
#page_special .articleBody{
	background: #FFF;
}

#special_nav{
	margin: 0 auto 20px;
	width: 800px;
	height: 15px;
	overflow: hidden;
}
#special_nav ul{
	width: 800px;
	overflow: hidden;
	list-style: none;
}
#special_nav li{
	float: left;
	background-position: 0 bottom;
	margin: 0 15px 0 0;
}
#special_nav li,
#special_nav li a,
#special_nav li span{
	height: 15px;
	background-repeat: no-repeat;
}
#special_nav li a{
	display: block;
	background-position: 0 top;
}
#special_nav li span{
	display: block;
	background-position: 0 bottom;
}
#special_nav li a span{
	display: none;
}
#special_nav li a.nav_btn:hover{
	background-position: 0 bottom;
}
#special_nav li span{
	overflow: hidden;
	text-indent: -9999px;
	text-align: left;
}
#special_nav li#nav_message a,
#special_nav li#nav_message span{
	width: 65px;
	background-image: url(../images/special/nav/special_nav_message.png);
}
#special_nav li#nav_trailer a,
#special_nav li#nav_trailer span{
	width: 52px;
	background-image: url(../images/special/nav/special_nav_trailer.png);
}
#special_nav li#nav_words a,
#special_nav li#nav_words span{
	width: 52px;
	background-image: url(../images/special/nav/special_nav_words.png);
}
#special_nav li#nav_comic a,
#special_nav li#nav_comic span{
	width: 73px;
	background-image: url(../images/special/nav/special_nav_comic.png);
}
#special_nav li#nav_wallpaper a,
#special_nav li#nav_wallpaper span{
	width: 40px;
	background-image: url(../images/special/nav/special_nav_wallpaper.png);
}
#special_nav li#nav_novel a,
#special_nav li#nav_novel span{
	width: 55px;
	background-image: url(../images/special/nav/special_nav_novel.png);
}
#special_nav li#nav_twicon a,
#special_nav li#nav_twicon span{
	width: 115px;
	background-image: url(../images/special/nav/special_nav_twicon.png);
}

#content_message{
	text-align: center;
}
#content_message .articleImage{
	margin: 0 auto;
}

#content_comic{
}
#content_comic .content_comic_inner{
	margin: 0;
	width: 425px;
	float: right;
	overflow: hidden;
}
#content_comic1{
	width: 800px;
	overflow: hidden;
}
#content_comic1 .articleImage{
	float: left;
}
#content_comic1 h3{
	margin: 0 0 10px 0;
}
#content_comic1 a{
	margin: 0 0 5px 0;
	display: block;
}

#content_comic1 a.comic_btn_gangan{
	height: 20px;
	width: 130px;
}
#content_comic1 a.comic_btn_products{
	height: 20px;
	width: 150px;
}

#content_novel1{
	width: 800px;
	overflow: hidden;
}
#content_novel1 .articleImage{
	float: left;
}
#content_novel1 h3{
	float: right;
}
#content_novel1 a{
	float:left;
	margin: 0 0 0 10px;
}

#content_words{
	width: 800px;
	overflow: hidden;
}
#content_words .content_wordsBody{
	overflow: hidden;
	margin: 0 0 20px 0;
}

#content_words .articleImage{
	width: 80px;
	float: left;
	overflow: hidden;
	text-align: left;
}
#content_words .content_words_inner{
	margin: 0;
	width: 710px;
	float: right;
	overflow: hidden;
}
#content_words .content_words_inner .articleImage{
	width: 318px;
	float: left;
	overflow: hidden;
}
#content_words .content_words_inner .content_words_text{
	margin: 0 0 10px 0; 
	width: 380px;
	float: right;
	overflow: hidden;
}
#content_words .wordsEnd{
	margin: 10px 0;
	padding: 0;
	width: 800px;
	height: 5px;
	overflow: hidden;
	display: block;
	background: url(../images/special/special_line.png) no-repeat;
}
#content_words .wordsEnd hr{
	display: none;
}

#content_movie{
	text-align: center;
}
#content_movie1,
#content_movie2,
#content_movie3{
	width: 640px;
	height: 368px;
	overflow: hidden;
	margin: 0 auto 20px;
}

#content_wp{
	text-align: center;
}
#content_wp_inner{
	width: 660px;
	text-align: center;
	margin: 0 auto;
}
#content_wp1,
#content_wp2,
#content_wp3,
#content_wp4{
	width: 320px;
	overflow: hidden;
	margin: 0 0 30px 0;
}
#content_wp1,
#content_wp3{
	margin-right: 20px;
	float: left;
}
#content_wp2,
#content_wp4{
	float: right;
}
#content_wp .content_wp_btn{
	margin: 0 auto;
	width: 320px;
	height: 26px;
	overflow: hidden;
	line-height: none;
}
#content_wp .content_wp_btn1,
#content_wp .content_wp_btn2,
#content_wp .content_wp_btn3{
	width: 90px;
	overflow: hidden;
}
#content_wp .content_wp_btn1,
#content_wp .content_wp_btn2{
	margin: 0 25px 0 0;
	float: left;
}
#content_wp .content_wp_btn3{
	float: right;
}

#wallpaper_parag {
	margin: 20px auto;
	width: 940px;
	overflow: hidden;
}
#wallpaper_parag1,
#wallpaper_parag2,
#wallpaper_parag3{
	width: 300px;
	overflow: hidden;
	line-height: 150%;
}
#wallpaper_parag1,
#wallpaper_parag2{
	margin: 0 20px 0 0;
	float:left;
}
#wallpaper_parag3{
	float:right;
}

#wallpaper_parag1 span,
#wallpaper_parag2 span,
#wallpaper_parag3 span{
	font-weight: bold;
}

#content_twicon{
	text-align: left;
}
#content_twicon .content_twicon_img{
	overflow: hidden;
	margin: 0 0 10px;
	list-style: none;
}
#content_twicon .content_twicon_img li{
	width: 64px;
	height: 64px;
	overflow: hidden;
	float: left;
	margin: 0 10px 0 0;
}
#content_twicon .articleImage{
	width: 125px;
	margin: 0 0 10px;
	overflow: hidden;
}


/* ------------------------------------------------------------
	98. Text
------------------------------------------------------------ */

#wrapper{
	font-size: 0.7em;
}
h1,h2,h3,h4,h5,h6,p,a,span,li{
	line-height: 150%;
}
p{
	color: #000;
}
#noscriptMessage p{
	color: #CCC;
	font-size: 0.7em;
	text-indent: 1em;
}
a,
a:active,
a:visited {
	color: #999;
	text-decoration: underline;
}
a:hover {
	color: #F90;
	text-decoration: none;
}

/* Top */
#recentNews span,
#recentNews h2,
#recentNews a{
	color: #FFF;
}

/* ------------------------------------------------------------
	99. Modules
------------------------------------------------------------ */

.layoutBox{
	overflow: hidden;
}
.floatLeft{
	float:left;
}
.floatRight{
	float:right;
}
.marginRight{
	margin-right: 10px;
}
.marginLeft{
	margin-left: 10px;
}
.marginBottom{
	margin-bottom: 10px;
}
.marginTop{
	margin-top: 10px;
}
.sizeSmall{
	font-size: x-small;
}
.sizeLarge{
	font-size: large;
}
.colorBlack{
	color: #000;
}
.colorWhite{
	color: #FFF;
}
.colorRed{
	color: #F00;
}
.weightBold{
	font-weight: bold;
}
.textHide{
	text-indent: -9999px;
	font-size: 0;
}
.visibleFalse{
	visibility: hidden;
}
.displayFalse{
	display: none;
}
.displayBlock{
	display: block;
}
.displayInline{
	display: inline;
}