@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-color: #46006a; background-image: -moz-linear-gradient(45deg, transparent 0, transparent 28px, #640078 28px, #640078 30px, transparent 50%, transparent 100%), -moz-linear-gradient(135deg, transparent 0, transparent 28px, #640078 28px, #640078 30px, transparent 50%, transparent 100%); background-image: -webkit-linear-gradient(45deg, transparent 0, transparent 28px, #640078 28px, #640078 30px, transparent 50%, transparent 100%), -webkit-linear-gradient(135deg, transparent 0, transparent 28px, #640078 28px, #640078 30px, transparent 50%, transparent 100%); background-image: linear-gradient(45deg, transparent 0, transparent 28px, #640078 28px, #640078 30px, transparent 50%, transparent 100%), linear-gradient(-45deg, transparent 0, transparent 28px, #640078 28px, #640078 30px, transparent 50%, transparent 100%); background-size: 41px 41px; }

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: 0.5em; }

main { position: relative; }

#main-top { height: 1125px; position: relative; background: url("../images/main-bg.jpg") no-repeat left top; }
#main-top #main-title { position: absolute; right: 0; top: 227px; }
#main-top #main-authors { position: absolute; left: 0; top: 0; }
#main-top #main-catch { position: absolute; left: 0; bottom: 79px; }
#main-top #main-book { position: absolute; right: 0; bottom: 0; width: 800px; }
#main-top #main-book p { position: absolute; right: 0; bottom: 0; }
#main-top #main-book #main-btn { position: absolute; left: 24px; bottom: 17px; width: 500px; display: -webkit-flex; display: -ms-flexbox; display: -webkit-box; display: flex; }

#story { position: relative; }
#story .contents { background: url("../images/story-bg01.jpg") no-repeat right 210px, url("../images/story-bg02.jpg") no-repeat left 410px, url("../images/story-bg03.jpg") no-repeat right 410px; }
#story .contents > *:nth-of-type(3) { margin-left: 260px; }

#chara { position: relative; }
#chara .contents { background: url("../images/chara-bg.jpg") no-repeat left 240px; display: -webkit-flex; display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; }
#chara .contents dl:nth-of-type(3), #chara .contents dl:nth-of-type(4) { margin-top: 460px; }

#comment { position: relative; }
#comment .contents { background: url("../images/comment-bg.jpg") no-repeat right top; }

#download { position: relative; }
#download .contents { padding-top: 336px; background: url("../images/download-bg.jpg") no-repeat left top; position: relative; }
#download .contents #walllpaper-btns { position: absolute; right: 50px; top: 99px; }

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

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