/*
YUI 3.17.1 (build 0eb5a52)
Copyright 2014 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/
html { color: #000; background: #FFF; }

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td { margin: 0; padding: 0; }

table { border-collapse: collapse; border-spacing: 0; }

fieldset, img { border: 0; }

address, caption, cite, code, dfn, em, strong, th, var { font-style: normal; font-weight: normal; }

ol, ul { list-style: none; }

caption, th { text-align: left; }

h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; }

q:before, q:after { content: ''; }

abbr, acronym { border: 0; font-variant: normal; }

sup { vertical-align: text-top; }

sub { vertical-align: text-bottom; }

input, textarea, select { font-family: inherit; font-size: inherit; font-weight: inherit; *font-size: 100%; }

legend { color: #000; }

#yui3-css-stamp.cssreset { display: none; }

.clearfix:before, .clearfix:after { content: " "; /* 1 */ display: table; /* 2 */ }

.clearfix:after { clear: both; }

#characterWrap { position: relative; min-width: 980px; height: 2730px; overflow: hidden; }
#characterWrap .bg { position: absolute; z-index: -1; width: 100%; height: 100%; }
#characterWrap .bg1 { background: url(../img/common/bg/bg_h.png); }
#characterWrap .bg2 { background: url(../img/common/bg/bg_w.png); }
#characterWrap .bg3 { background: url(../img/common/bg/bg_cross.png); }
#characterWrap .bg4 { background: url(../img/common/bg/bg_grid.png) no-repeat center 0; top: 0; height: 0; }
#characterWrap .bg4 img { position: absolute; top: 0; }
#characterWrap #mainImage { text-align: center; position: relative; }
#characterWrap #mainImage .name { position: fixed; z-index: -1; left: 50%; margin-left: -1000px; top: 200px; opacity: 0; filter: alpha(opacity=0); }
#characterWrap #mainImage .chara { position: relative; width: 980px; margin: auto; z-index: 10; opacity: 0; filter: alpha(opacity=0); }
#characterWrap #mainImage .chara p { position: absolute; top: 0; left: 0; }
#characterWrap #mainImage .charaOver { position: absolute; top: 0; left: 50%; margin-left: -490px; display: none; z-index: 0; }
#characterWrap #mainImage .mouseover { width: 560px; margin: auto; height: 100%; left: 50%; margin-left: -260px; position: absolute; z-index: 1000; top: 0; }
#characterWrap .over { cursor: pointer; display: none; position: absolute; z-index: 1300; width: 180px; height: 180px; top: 0; left: 0; }
#characterWrap .over p { position: absolute; top: 0; }
#characterWrap #slideGuide { position: absolute; z-index: -1; top: 0; width: 100%; height: 5px; background: #EFF0F2; opacity: 0; filter: alpha(opacity=0); }
#characterWrap #slideGuide p { display: block; height: 5px; background: #b4e500; width: 0; }
#characterWrap .close { position: absolute; z-index: 100; top: 35px; right: 32px; cursor: pointer; opacity: 0; filter: alpha(opacity=0); width: 65px; height: 65px; }
#characterWrap .close p { position: absolute; top: 30px; }
#characterWrap .close p.line1 { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); width: 100%; height: 3px; background: #b4e500; }
#characterWrap .close p.line2 { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); width: 100%; height: 3px; background: #b4e500; }
#characterWrap #pageTopChara { opacity: 0; filter: alpha(opacity=0); position: fixed; z-index: 500; bottom: 30px; right: 40px; cursor: pointer; width: 42px; height: 42px; }
#characterWrap #pageTopChara p { position: absolute; top: 0; }
#characterWrap #pageTopChara p.l { -webkit-transform: rotate(27deg); -moz-transform: rotate(27deg); -ms-transform: rotate(27deg); -o-transform: rotate(27deg); transform: rotate(27deg); left: 10px; height: 44px; width: 3px; background: #b4e500; }
#characterWrap #pageTopChara p.r { -webkit-transform: rotate(-27deg); -moz-transform: rotate(-27deg); -ms-transform: rotate(-27deg); -o-transform: rotate(-27deg); transform: rotate(-27deg); right: 10px; height: 44px; width: 3px; background: #b4e500; }

#wrapper { width: 980px; height: 100%; left: 50%; margin-left: -490px; position: absolute; top: 0; z-index: 50; }
#wrapper .chatch { position: absolute; top: 116px; right: 0; }
#wrapper .chatch div { position: relative; float: right; width: 70px; top: 0; opacity: 0; filter: alpha(opacity=0); }
#wrapper .chatch div .L, #wrapper .chatch div .R { position: absolute; top: 0; left: 0; }
#wrapper .charaNavi { position: absolute; top: 190px; left: 0; opacity: 0; filter: alpha(opacity=0); }
#wrapper .charaNavi ul li { float: left; margin-right: 35px; cursor: pointer; position: relative; width: 42px; height: 40px; }
#wrapper .charaNavi ul li.prev .t { position: absolute; top: 10px; width: 46px; height: 3px; background: #b4e500; -webkit-transform: rotate(-24deg); -moz-transform: rotate(-24deg); -ms-transform: rotate(-24deg); -o-transform: rotate(-24deg); transform: rotate(-24deg); }
#wrapper .charaNavi ul li.prev .d { position: absolute; top: 28px; width: 46px; height: 3px; background: #b4e500; -webkit-transform: rotate(24deg); -moz-transform: rotate(24deg); -ms-transform: rotate(24deg); -o-transform: rotate(24deg); transform: rotate(24deg); }
#wrapper .charaNavi ul li.next .t { position: absolute; top: 10px; width: 46px; height: 3px; background: #b4e500; -webkit-transform: rotate(24deg); -moz-transform: rotate(24deg); -ms-transform: rotate(24deg); -o-transform: rotate(24deg); transform: rotate(24deg); }
#wrapper .charaNavi ul li.next .d { position: absolute; top: 28px; width: 46px; height: 3px; background: #b4e500; -webkit-transform: rotate(-24deg); -moz-transform: rotate(-24deg); -ms-transform: rotate(-24deg); -o-transform: rotate(-24deg); transform: rotate(-24deg); }
#wrapper .profile p { position: absolute; opacity: 0; filter: alpha(opacity=0); }
#wrapper .profile p.name { top: 400px; }
#wrapper .profile p.prof { top: 570px; }
#wrapper .profile p.text { right: 0; top: 1200px; }
#wrapper .images { position: absolute; z-index: 1600; top: 1090px; }
#wrapper .images p { opacity: 0; filter: alpha(opacity=0); margin-bottom: 18px; cursor: pointer; }
#wrapper .copyright { bottom: 0; position: absolute; left: 50%; margin-left: -70px; padding-bottom: 50px; }

#floatCharaDitail { position: fixed; background: #FFF; background: rgba(255, 255, 255, 0.9); width: 100%; height: 100%; z-index: -1; display: none; opacity: 0; filter: alpha(opacity=0); }
#floatCharaDitail .imageSD { position: absolute; left: 50%; margin-left: -245px; top: 50%; margin-top: -162px; opacity: 0; filter: alpha(opacity=0); }
#floatCharaDitail .imageAnime { position: absolute; left: 50%; margin-left: -245px; top: 50%; margin-top: -137px; opacity: 0; filter: alpha(opacity=0); }
#floatCharaDitail .closeFloat { position: absolute; z-index: 100; top: 35px; right: 32px; cursor: pointer; width: 65px; height: 65px; }
#floatCharaDitail .closeFloat p { position: absolute; top: 30px; }
#floatCharaDitail .closeFloat p.line1 { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); width: 100%; height: 3px; background: #b4e500; }
#floatCharaDitail .closeFloat p.line2 { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); width: 100%; height: 3px; background: #b4e500; }