@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: url("../images/body_bg.gif") repeat; }

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: 1126px; position: relative; background: url("../images/main-bg.jpg") no-repeat left top; }
#main-top #main-title { position: absolute; left: 0; top: 0; }
#main-top #main-authors { position: absolute; left: 0; top: 701px; }
#main-top #main-subcatch { position: absolute; left: 299px; top: 0; }
#main-top #main-catch { position: absolute; left: 0; top: 179px; }
#main-top #main-book { position: absolute; left: 0; top: 735px; }
#main-top #main-book #link-btn { position: absolute; left: 0; top: 206px; }
#main-top #main-book #link-notes { position: absolute; left: 0; top: 271px; }
#main-top #main-book #book-btns { position: absolute; left: 0; top: 303px; font-size: 0; letter-spacing: -1em; }
#main-top #main-book #book-btns li { display: inline-block; vertical-align: top; letter-spacing: 0; font-size: 12px; }

#story .contents { position: relative; background: url("../images/story-img1.jpg") no-repeat right top, url("../images/story-img2.jpg") no-repeat left 420px, url("../images/story-img3.jpg") no-repeat right 884px; }
#story .contents > * { position: relative; }
#story .contents > *:nth-of-type(1) { text-align: left; }
#story .contents > *:nth-of-type(2) { text-align: right; }
#story .contents > *:nth-of-type(3) { text-align: left; }

#character .contents { position: relative; }
#character .contents ul { position: relative; background: url("../images/character-img-chara1.jpg") no-repeat left top, url("../images/character-img-chara2.jpg") no-repeat 272px top, url("../images/character-img-chara3.jpg") no-repeat 528px top, url("../images/character-img-chara4.jpg") no-repeat left 641px, url("../images/character-img-chara5.jpg") no-repeat 272px 641px, url("../images/character-img-chara6.jpg") no-repeat 528px 641px; font-size: 0; letter-spacing: -1em; }
#character .contents ul > * { display: inline-block; vertical-align: top; letter-spacing: 0; font-size: 12px; }
#character .contents ul > li:nth-of-type(1), #character .contents ul li:nth-of-type(2), #character .contents ul li:nth-of-type(3) { padding-top: 439px; }
#character .contents ul > li:nth-of-type(4), #character .contents ul li:nth-of-type(5), #character .contents ul li:nth-of-type(6) { padding-top: 420px; }

#download .contents { padding-top: 346px; background: url("../images/download-bg.jpg") no-repeat left top; position: relative; }
#download .contents #walllpaper-btns { position: absolute; left: 499px; top: 124px; }
#download .contents #walllpaper-btns li { margin-bottom: 17px; }

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

★ 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); }

#colorbox { outline: 0; }

#cboxContent { background: none; overflow: auto; }

.cboxIframe { background: none; }

#cboxError { padding: 50px; border: 1px solid #ccc; }

#cboxLoadedContent { margin: 21px 22px; }

#cboxTitle { position: absolute; bottom: 4px; left: 0; text-align: center; width: 100%; color: #949494; }

#cboxCurrent { position: absolute; bottom: 4px; left: 58px; color: #949494; }

#cboxLoadingOverlay { background: url(../js/colorbox/images/loading_background.png) no-repeat center center; }

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

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

#cboxSlideshow { position: absolute; bottom: 4px; right: 30px; color: #0092ef; }

#cboxPrevious { position: absolute; bottom: 0; left: 0; background: url(../js/colorbox/images/controls.png) no-repeat -75px 0; width: 25px; height: 25px; text-indent: -9999px; }

#cboxPrevious:hover { background-position: -75px -25px; }

#cboxNext { position: absolute; bottom: 0; left: 27px; background: url(../js/colorbox/images/controls.png) no-repeat -50px 0; width: 25px; height: 25px; text-indent: -9999px; }

#cboxNext:hover { background-position: -50px -25px; }

#cboxClose { position: absolute; top: 5px; right: 5px; background: url(../js/colorbox/images/controls.png) no-repeat 0 0; width: 25px; height: 25px; text-indent: -9999px; }

#cboxClose:hover { background-position: 0 -25px; }

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