@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_bg1.png"); background-repeat: no-repeat; background-position: 50% 3876px; background-color: #fbd139; }

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

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

main { position: relative; }

#main-top { height: 1295px; background: url("../images/main-bg01.jpg") no-repeat left bottom #fff; position: relative; }
#main-top #main-authors { position: absolute; right: 0; top: 0; }
#main-top #main-catch { position: absolute; right: 0; top: 648px; }
#main-top #main-catch2 { position: absolute; right: 0; top: 965px; }
#main-top #main-book { position: absolute; left: 0; top: 965px; width: 800px; height: 330px; }
#main-top #main-book ul #wrapper-main-comic01 { position: absolute; right: 0; top: 245px; }
#main-top #main-book ul #wrapper-main-comic01 li:nth-child(1) { position: absolute; right: 22px; top: 110px; }
#main-top #main-book ul #wrapper-main-comic01 li:nth-child(2) { position: absolute; right: 22px; top: 143px; }
#main-top #main-book ul #wrapper-main-bookNew { position: absolute; left: 0; top: 0; }
#main-top #main-book ul #wrapper-main-bookNew li:nth-child(1) { position: absolute; right: 0; bottom: 50px; }
#main-top #main-book ul #wrapper-main-bookNew li:nth-child(2) { position: absolute; right: 0; bottom: 0; }

#books ul { background: url("../images/book-bg.jpg") no-repeat right bottom; font-size: 0; }
#books ul .books-list { display: inline-block; position: relative; }
#books ul .books-list ul { background: none; position: absolute; bottom: 15px; left: 55px; }
#books ul .books-list ul.book02 { left: 44px; }
#books ul .books-list ul.book03 { left: 35px; }
#books ul .books-list ul.book04 { bottom: 64px; }
#books ul .books-list ul.book05 { left: 44px; bottom: 64px; }
#books ul .books-list ul.book06 { left: 35px; bottom: 64px; }
#books #btn-kakuyomuLink { background: url("../images/btn-kuyomu-bg.jpg") no-repeat center top; padding-bottom: 20px; }

#flash { position: relative; }
#flash ul { display: flex; }
#flash #flash-character { width: 800px; height: 555px; }
#flash #flash-info { position: absolute; right: 0; bottom: 28px; }

#campaign { display: flex; flex-wrap: wrap; }

#storyAndCharacter .contents { position: relative; }
#storyAndCharacter .contents #story { background: url("../images/storyAndCharacter-bg01.jpg") no-repeat right top, url("../images/storyAndCharacter-bg02.jpg") no-repeat right 286px, url("../images/storyAndCharacter-bg03.jpg") no-repeat 320px 640px, url("../images/storyAndCharacter-bg04.jpg") no-repeat right 851px, url("../images/storyAndCharacter-bg05.jpg") no-repeat right 1062px, url("../images/storyAndCharacter-bg06.jpg") no-repeat right 1449px, url("../images/storyAndCharacter-bg07.jpg") no-repeat center 2052px; }
#storyAndCharacter .contents #story > *:nth-of-type(1) { text-align: left; }
#storyAndCharacter .contents #story > *:nth-of-type(2) { text-align: left; }
#storyAndCharacter .contents #story > *:nth-of-type(3) { text-align: left; }
#storyAndCharacter .contents #story > *:nth-of-type(4) { text-align: left; }
#storyAndCharacter .contents #story > *:nth-of-type(5) { text-align: left; }
#storyAndCharacter .contents #story > *:nth-of-type(6) { text-align: left; }
#storyAndCharacter .contents #story > *:nth-of-type(7) { text-align: left; margin: 464px 0 417px; }
#storyAndCharacter .contents #character > * { position: absolute; }
#storyAndCharacter .contents #character > *:nth-of-type(1) { left: 336px; top: 286px; }
#storyAndCharacter .contents #character > *:nth-of-type(2) { left: 336px; top: 463px; }
#storyAndCharacter .contents #character > *:nth-of-type(3) { right: 0; top: 640px; }
#storyAndCharacter .contents #character > *:nth-of-type(4) { left: 369px; top: 851px; }
#storyAndCharacter .contents #character > *:nth-of-type(5) { right: 0; top: 1262px; }
#storyAndCharacter .contents #character > *:nth-of-type(6) { left: 0; top: 1449px; }
#storyAndCharacter .contents #character > *:nth-of-type(7) { left: 0; top: 1725px; }
#storyAndCharacter .contents #character > *:nth-of-type(8) { left: 350px; top: 1769px; }

#comment .contents ul { width: 800px; background: url("../images/comment-bg.jpg") no-repeat right top, url("../images/comment2-bg.jpg") no-repeat right 522px; }

#download .contents { padding-top: 341px; background: url("../images/download-bg.jpg") no-repeat left top; position: relative; }
#download .contents #walllpaper-btns { position: absolute; left: 503px; top: 115px; }
#download .contents #walllpaper-btns > * { margin-bottom: 11px; }

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

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