@charset "UTF-8";
/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/
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; }

ins { background-color: #ff9; color: #000; text-decoration: none; }

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

hr { display: block; height: 1px; border: 0; border-top: 1px solid #cccccc; margin: 1em 0; padding: 0; }

input, select { vertical-align: middle; }

.clearfix:before, .clearfix:after { content: " "; display: table; }

.clearfix:after { clear: both; }

img { vertical-align: bottom; }

li { list-style: none; }

body { font-family: Verdana, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; font-weight: 500; background: #000; }

a { text-decoration: none; }

#wrapper { min-width: 1200px; }

#menu_wrap { width: 320px; float: left; position: relative; }
#menu_wrap h1 { padding-top: 45px; margin-left: 20px; margin-bottom: 10px; }
#menu_wrap h1:hover { -webkit-animation: hover_flash 0.1s linear 2; -moz-animation: hover_flash 0.1s linear 2; -o-animation: hover_flash 0.1s linear 2; animation: hover_flash 0.1s linear 2; }
#menu_wrap h2 { text-align: center; margin-bottom: 35px; }
#menu_wrap h2:hover { -webkit-animation: hover_flash 0.1s linear 2; -moz-animation: hover_flash 0.1s linear 2; -o-animation: hover_flash 0.1s linear 2; animation: hover_flash 0.1s linear 2; }
#menu_wrap .menes { height: 320px; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin-bottom: 43px; }
#menu_wrap .menes .grand_top { height: 27px; overflow: hidden; position: absolute; top: 10px; left: 20px; }
#menu_wrap .menes .grand_top:hover { -webkit-animation: hover_flash 0.1s linear 2; -moz-animation: hover_flash 0.1s linear 2; -o-animation: hover_flash 0.1s linear 2; animation: hover_flash 0.1s linear 2; }
#menu_wrap .menes .grand_top:hover img { margin-top: -27px; }
#menu_wrap .menes li a:hover { background-position: bottom; -webkit-animation: hover_flash 0.1s linear 2; -moz-animation: hover_flash 0.1s linear 2; -o-animation: hover_flash 0.1s linear 2; animation: hover_flash 0.1s linear 2; }
#menu_wrap .menes .sns { position: absolute; left: 20px; bottom: -18px; letter-spacing: -.4em; }
#menu_wrap .menes .sns li { display: inline-block; height: 13px; }
#menu_wrap .menes .sns li img { vertical-align: top; }
#menu_wrap .menes .sns li a { display: block; background: no-repeat center top; width: 100%; height: 100%; }
#menu_wrap .menes .sns li a:hover { background-position: bottom; }
#menu_wrap .menes .sns .tw, #menu_wrap .menes .sns .fb { width: 16px; height: 13px; }
#menu_wrap .menes .sns .tw.tw, #menu_wrap .menes .sns .fb.tw { background: url("../img/left_common/share/slash.png") no-repeat right center; padding-right: 15px; margin: 0 10px 0 15px; }
#menu_wrap .menes .sns .tw.tw a, #menu_wrap .menes .sns .fb.tw a { background-image: url("../img/left_common/share/twitter.png"); }
#menu_wrap .menes .sns .tw.fb a, #menu_wrap .menes .sns .fb.fb a { background-image: url("../img/left_common/share/facebook.png"); }
#menu_wrap .series { float: left; margin-left: 20px; padding-top: 45px; }
#menu_wrap .series li { height: 20px; margin-bottom: 8px; }
#menu_wrap .series li a { display: block; height: 100%; width: 150px; background: no-repeat; }
#menu_wrap .series li.current a { background-position: bottom; }
#menu_wrap .series .s1 a { background-image: url("../img/left_common/menu_vol/aincrad.png"); }
#menu_wrap .series .s2 a { background-image: url("../img/left_common/menu_vol/fairydance.png"); }
#menu_wrap .series .s3 a { background-image: url("../img/left_common/menu_vol/extraedition.png"); }
#menu_wrap .series .s4 a { background-image: url("../img/left_common/menu_vol/phantombullet.png"); }
#menu_wrap .series .s5 a { background-image: url("../img/left_common/menu_vol/culibur.png"); }
#menu_wrap .series .s6 a { background-image: url("../img/left_common/menu_vol/mother.png"); }
#menu_wrap .series .s7 a { background-image: url("../img/left_common/menu_vol/movie.png"); }
#menu_wrap .series .s8 a { background-image: url("../img/left_common/menu_vol/alicization.png"); }
#menu_wrap .series .s9 a { background-image: url("../img/left_common/menu_vol/progressive.png"); }
#menu_wrap .navigation { margin-left: 204px; padding-top: 20px; }
#menu_wrap .navigation li { height: 10px; margin-bottom: 15px; }
#menu_wrap .navigation li a { display: block; height: 100%; }
#menu_wrap .navigation li a:hover { background-position: bottom; }
#menu_wrap .series_bnr { width: 320px; position: relative; height: 569px; margin-bottom: 40px; }
#menu_wrap .series_bnr li { position: absolute; top: 0; width: 100%; }
#menu_wrap .series_bnr li:after { content: ''; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; opacity: 0; }
#menu_wrap .series_bnr li a { display: block; height: 51px; width: 380px; position: absolute; -webkit-transform: skewY(-17.5deg); -moz-transform: skewY(-17.5deg); -ms-transform: skewY(-17.5deg); -o-transform: skewY(-17.5deg); transform: skewY(-17.5deg); -webkit-transform-origin: right top; -moz-transform-origin: right top; -ms-transform-origin: right top; -o-transform-origin: right top; transform-origin: right top; top: 0; right: 0; z-index: 10; }
#menu_wrap .series_bnr li.s1 a { top: 416px; }
#menu_wrap .series_bnr li.s2 a { top: 364px; }
#menu_wrap .series_bnr li.s3 a { top: 312px; }
#menu_wrap .series_bnr li.s4 a { top: 260px; }
#menu_wrap .series_bnr li.s5 a { top: 208px; }
#menu_wrap .series_bnr li.s6 a { top: 156px; }
#menu_wrap .series_bnr li.s7 a { top: 104px; }
#menu_wrap .series_bnr li.s8 a { top: 52px; }
#menu_wrap .series_bnr li.s9 a { top: 0; }
#menu_wrap .copy { margin-left: 20px; padding-bottom: 45px; }

@-webkit-keyframes hover_flash { 0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; } }
@keyframes hover_flash { 0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; } }
#mainContents { margin-left: 320px; position: relative; border-left: 1px solid #393939; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; opacity: 0; }
#mainContents h2 { position: absolute; top: 45px; left: 20px; }