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

html, body { background: #dcf0c8; }

ul { list-style-type: none; }

a, area { border: none; outline: none; }

header, footer { background-color: #000; }

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

main { background: url(../images/global-bg-right.jpg) no-repeat right 112px #fff; position: relative; }
main #global-title { padding-top: 890px; }
main #global-catch01 { position: absolute; left: 0; top: 705px; }
main #global-catch02 { position: absolute; left: 0; top: 775px; }
main #global-book { position: absolute; right: 0; top: 2156px; z-index: 2; }
main #global-book #sns { position: absolute; left: 15px; top: 258px; }
main #global-ballons { position: absolute; top: 0; overflow: hidden; }
main #global-ballons * { float: left; }
main #global-ballons #global-ballon04 { padding-bottom: 508px; background: url("../images/global-bg-left.jpg") no-repeat left bottom; }
main #comic { overflow: hidden; }
main #comic > * { width: 400px; float: left; }
main #comic .contents-header { padding-bottom: 392px; background: url("../images/comic-bg.jpg") no-repeat left bottom; }
main #game .contents #game-contents { padding-top: 227px; background: url("../images/game-bg.jpg") no-repeat left top; }
main #story { position: relative; z-index: 1; background: url("../images/story-bg.jpg") no-repeat right bottom; }
main #character-monster .contents #character { position: relative; }
main #character-monster .contents #character .contents ul li#character01 { padding-top: 444px; background: url("../images/character-chara01-bg.jpg") no-repeat left top; }
main #character-monster .contents #character .contents ul li#character02 { padding-top: 230px; background: url("../images/character-chara02-bg.jpg") no-repeat left top; position: absolute; left: 274px; top: 0; }
main #character-monster .contents #character .contents ul li#character03 { padding-top: 225px; background: url("../images/character-chara03-bg.jpg") no-repeat left top; position: absolute; right: 0; top: 0; }
main #character-monster .contents #character .contents ul li#character04 { padding-top: 224px; background: url("../images/character-chara04-bg.jpg") no-repeat left top; position: absolute; left: 274px; top: 331px; }
main #character-monster .contents #character .contents ul li#character05 { padding-top: 228px; background: url("../images/character-chara05-bg.jpg") no-repeat left top; position: absolute; right: 0; top: 331px; }
main #character-monster .contents #monster { position: relative; }
main #character-monster .contents #monster .contents-header { padding-bottom: 334px; background: url("../images/monster-bg.jpg") no-repeat left bottom; }
main #character-monster .contents #monster .contents ul li#monster01 { position: absolute; left: 274px; top: 0; }
main #character-monster .contents #monster .contents ul li#monster01 .name { padding-bottom: 205px; background: url("../images/monster-monster01-bg.jpg") no-repeat left bottom; }
main #character-monster .contents #monster .contents ul li#monster02 { position: absolute; right: 0; top: 0; }
main #character-monster .contents #monster .contents ul li#monster02 .name { padding-bottom: 179px; background: url("../images/monster-monster02-bg.jpg") no-repeat left bottom; }
main #character-monster .contents #monster .contents ul li#monster03 .name { padding-bottom: 210px; background: url("../images/monster-monster03-bg.jpg") no-repeat left bottom; }
main #character-monster .contents #monster .contents ul li#monster04 { position: absolute; left: 274px; top: 408px; }
main #character-monster .contents #monster .contents ul li#monster04 .name { padding-bottom: 211px; background: url("../images/monster-monster04-bg.jpg") no-repeat left bottom; }
main #character-monster .contents #monster .contents ul li#monster05 { position: absolute; right: 0; top: 408px; }
main #character-monster .contents #monster .contents ul li#monster05 .name { padding-bottom: 182px; background: url("../images/monster-monster05-bg.jpg") no-repeat left bottom; }
main #character-monster .contents #monster .contents ul li#monster06 .name { padding-bottom: 213px; background: url("../images/monster-monster06-bg.jpg") no-repeat left bottom; }
main #character-monster .contents #monster .contents ul li#monster07 { position: absolute; left: 274px; top: 862px; }
main #character-monster .contents #monster .contents ul li#monster07 .name { padding-bottom: 255px; background: url("../images/monster-monster07-bg.jpg") no-repeat left bottom; }
main #character-monster .contents #monster .contents ul li#monster08 { position: absolute; right: 0; top: 862px; }
main #character-monster .contents #monster .contents ul li#monster08 .name { padding-bottom: 216px; background: url("../images/monster-monster08-bg.jpg") no-repeat left bottom; }
main #review .contents { background: url("../images/review-bg01.jpg") no-repeat right top, url("../images/review-bg02.jpg") no-repeat right 355px, url("../images/review-bg03.jpg") no-repeat left 753px, url("../images/review-bg04.jpg") no-repeat left bottom; }
main #review .contents #review05, main #review .contents #review06, main #review .contents #review07, main #review .contents #review08 { text-align: right; }