@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;

}

#policy {
    text-align: right;
    width: 810px;
    margin: 0 auto;
    padding-bottom: 10px;
    font-size: 8px;
}

#policy a {
    color: #000;
    text-decoration: none;
}


/* 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;

}