@charset "UTF-8";
/* CSS Document */
/* ====================================================================

★ Reset

==================================================================== */
/* 
html5doctor.com Reset Stylesheet v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }

body { line-height: 1; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

nav ul { list-style: none; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }

a { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; }

/* change colours to suit your needs */
ins { background-color: #ff9; color: #000; text-decoration: none; }

/* change colours to suit your needs */
mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }

del { text-decoration: line-through; }

abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }

table { border-collapse: collapse; border-spacing: 0; }

/* change border colour to suit your needs */
hr { display: block; height: 1px; border: 0; border-top: 1px solid #cccccc; margin: 1em 0; padding: 0; }

input, select { vertical-align: middle; }

/* ====================================================================

★ style

==================================================================== */
img { vertical-align: top; }

ul, li { list-style-type: none; }

area { border: none; outline: none; }

html, body { background: #b8d0df; }

header, main, footer { display: block; width: 800px; margin: 0 auto; }

header { position: relative; }
header #sns { position: absolute; right: 136px; top: 10px; display: inline-block; }
header #sns > * { margin-left: 1em; }

main { position: relative; }

#main-top { height: 1279px; position: relative; background: url("../images/main-bg.jpg") no-repeat left top; }
#main-top #main-title { position: absolute; right: 0; top: 0; }
#main-top #main-authors { position: absolute; left: 464px; top: 555px; }
#main-top #main-catch { position: absolute; left: 0; top: 0; }
#main-top #main-catch2 { position: absolute; right: 0; top: 710px; }
#main-top #main-book { position: absolute; left: 0; top: 694px; }
#main-top #main-book #title-buy1 { position: absolute; left: 40px; top: 37px; }
#main-top #main-book #title-buy2 { position: absolute; left: 40px; top: 195px; }
#main-top #main-book #book-btns { position: absolute; left: 40px; top: 109px; }
#main-top #main-book #book-btns li:first-child { position: absolute; left: 0; top: 0; }
#main-top #main-book #book-btns li:last-child { position: absolute; left: 253px; top: 0; }
#main-top #main-book #book-btns2 { position: absolute; left: 40px; top: 267px; }
#main-top #main-book #book-btns2 li:first-child { position: absolute; left: 0; top: 0; }
#main-top #main-book #book-btns2 li:last-child { position: absolute; left: 253px; top: 0; }
#main-top #comic-book { position: absolute; left: 0; bottom: 0; }
#main-top #comic-book #comic-catch { position: absolute; left: 0; bottom: 0; }
#main-top #comic-book #tiral01 img { position: absolute; left: 73px; bottom: 35px; }

#story .contents { position: relative; background: url("../images/story-img1.jpg") no-repeat right 144px, url("../images/story-img2.jpg") no-repeat left 404px; }
#story .contents > *:nth-child(even) { position: relative; text-align: left; }
#story .contents > *:nth-child(odd) { position: relative; text-align: right; }

#character .contents { position: relative; height: 1530px; background: url("../images/character-img1.jpg") no-repeat left top, url("../images/character-img2.jpg") no-repeat right top, url("../images/character-img3.jpg") no-repeat left 432px, url("../images/character-img4.jpg") no-repeat 295px 632px, url("../images/character-img5.jpg") no-repeat right 432px, url("../images/character-img6.jpg") no-repeat left 1011px, url("../images/character-img7.jpg") no-repeat 162px 1175px, url("../images/character-img8.jpg") no-repeat right 1011px; }
#character .contents h4 { position: absolute; left: 0; top: 340px; }
#character .contents ul:nth-of-type(1) > li { position: absolute; }
#character .contents ul:nth-of-type(1) > li:nth-of-type(1) { left: 206px; top: 0; }
#character .contents ul:nth-of-type(2) > li { position: absolute; }
#character .contents ul:nth-of-type(2) > li:nth-of-type(1) { left: 238px; top: 432px; }
#character .contents ul:nth-of-type(2) > li:nth-of-type(2) { left: 0; top: 632px; }
#character .contents ul:nth-of-type(2) > li:nth-of-type(3) { left: 500px; top: 632px; }
#character .contents ul:nth-of-type(3) > li { position: absolute; }
#character .contents ul:nth-of-type(3) > li:nth-of-type(1) { left: 162px; top: 1011px; }
#character .contents ul:nth-of-type(3) > li:nth-of-type(2) { left: 162px; top: 1319px; }
#character .contents ul:nth-of-type(3) > li:nth-of-type(3) { right: 0; top: 1269px; text-align: right; }

#interview .contents { position: relative; background: url("../images/interview-img.jpg") no-repeat right top; text-align: left; }

#download .contents { position: relative; }
#download .contents .wp1Area { position: relative; top: 0; left: 0; height: 315px; background: url("../images/download-bg.jpg") no-repeat right top; }
#download .contents .wp2Area { position: relative; height: 317px; top: 0; left: 0; background: url("../images/download2-bg.jpg") no-repeat right top; text-align: left; }
#download .contents #walllpaper-btns { position: absolute; left: 499px; top: 103px; }
#download .contents #walllpaper-btns li { margin-bottom: 13px; }

/* ====================================================================

★ colorbox

==================================================================== */
/* Colorbox Core Style: The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper { position: absolute; top: 0; left: 0; z-index: 9999; overflow: hidden; }

#cboxWrapper { max-width: none; }

#cboxOverlay { position: fixed; width: 100%; height: 100%; }

#cboxMiddleLeft, #cboxBottomLeft { clear: left; }

#cboxContent { position: relative; }

#cboxLoadedContent { overflow: auto; -webkit-overflow-scrolling: touch; }

#cboxTitle { margin: 0; }

#cboxLoadingOverlay, #cboxLoadingGraphic { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow { cursor: pointer; }

.cboxPhoto { float: left; margin: auto; border: 0; display: block; max-width: none; -ms-interpolation-mode: bicubic; }

.cboxIframe { width: 100%; height: 100%; display: block; border: 0; padding: 0; margin: 0; }

#colorbox, #cboxContent, #cboxLoadedContent { box-sizing: content-box; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; }

/*  User Style: Change the following styles to modify the appearance of Colorbox.  They are ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay { background-color: #000; opacity: 0.8; filter: alpha(opacity=80); }

/*#cboxContent{margin-top:32px; overflow:visible;}*/
#cboxError { padding: 50px; border: 1px solid #ccc; }

#cboxLoadedContent { background: none; padding: 1px; }

#cboxLoadingGraphic { background: url(../js/colorbox/images/loading.gif) no-repeat center center; }

#cboxLoadingOverlay { background: #000; }

#cboxTitle { position: absolute; top: -22px; left: 0; color: #000; }

#cboxCurrent { position: absolute; top: -22px; right: 205px; text-indent: -9999px; }

/*#cboxSlideshow, #cboxPrevious, #cboxNext, #cboxClose{text-indent:-9999px; width:20px; height:20px; position:absolute; top:-20px; background:url(images/controls.png) no-repeat 0 0;}
#cboxPrevious{ background-position:-25px 0px; right:25px;}
#cboxPrevious.hover{background-position:-25px -25px;}
#cboxNext{ background-position:0px 0px;right:50px;}
#cboxNext.hover{background-position:0px -25px;}
#cboxClose{background-position:-50px 0px; right:0px;}
#cboxClose.hover{background-position:-50px -25px;}*/
.cboxSlideshow_on #cboxPrevious, .cboxSlideshow_off #cboxPrevious { right: 66px; }

.cboxSlideshow_on #cboxSlideshow { background-position: -75px -25px; right: 44px; }

.cboxSlideshow_on #cboxSlideshow.hover { background-position: -100px -25px; }

.cboxSlideshow_off #cboxSlideshow { background-position: -100px 0px; right: 44px; }

.cboxSlideshow_off #cboxSlideshow.hover { background-position: -75px -25px; }

#cboxContent { margin-top: 50px; overflow: visible; }

/* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose { border: 0; padding: 0; margin: 0; overflow: visible; width: auto; background: none; }

/* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active { outline: 0; }

#cboxPrevious, #cboxNext, #cboxClose { text-indent: -9999px; width: 50px; height: 50px; position: absolute; top: -50px; outline: 0; }

#cboxPrevious { background: url(../js/colorbox/images/control03.jpg) no-repeat left top; right: 100px; }

#cboxPrevious:hover { background-position: left bottom; }

#cboxNext { background: url(../js/colorbox/images/control02.jpg) no-repeat left top; right: 200px; }

#cboxNext:hover { background-position: left bottom; }

#cboxClose { background: url(../js/colorbox/images/control01.jpg) no-repeat left top; right: 0px; }

#cboxClose:hover { background-position: left bottom; }

/* The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill when an alpha filter (opacity change) is set on the element or ancestor element.  This style is not applied to or needed in IE9. See: http://jacklmoore.com/notes/ie-transparency-problems/
*/
.cboxIE #cboxTopLeft, .cboxIE #cboxTopCenter, .cboxIE #cboxTopRight, .cboxIE #cboxBottomLeft, .cboxIE #cboxBottomCenter, .cboxIE #cboxBottomRight, .cboxIE #cboxMiddleLeft, .cboxIE #cboxMiddleRight { filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF); }