/*
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; }

body { line-height: 0; font-family: Verdana,'Lucida Grande','Hiragino Kaku Gothic ProN', Meiryo, sans-serif; width: 100%; }
body.noscroll { position: fixed; }
body.noscroll #allWrap { overflow-y: scroll; }
body.noscroll #allWrap div, body.noscroll #allWrap p { overflow: hidden; }
body.flash { width: 100%; height: 100%; }
body.flash #flashArea { width: 100%; height: 100%; }
body .legacy { display: none; }

#allWrap { display: none; position: relative; min-width: 980px; overflow: hidden; }
#allWrap .bg { position: absolute; z-index: -1; width: 100%; height: 100%; }
#allWrap .bg1 { background: url(../img/common/bg/bg_h.png); }
#allWrap .bg2 { background: url(../img/common/bg/bg_w.png); }
#allWrap .bg3 { background: url(../img/common/bg/bg_cross.png); }
#allWrap .bg4 { background: url(../img/common/bg/bg_grid.png) repeat-y center top; height: 0; z-index: 12; }

#share { position: fixed; z-index: 500; top: 50px; right: 15px; opacity: 0; filter: alpha(opacity=0); }

#navigation { position: fixed; z-index: 500; top: 50%; margin-top: -70px; left: 35px; }
#navigation ul li { opacity: 0; filter: alpha(opacity=0); height: 20px; width: 109px; background-position: left top; background-repeat: no-repeat; cursor: pointer; }
#navigation ul li span { display: none; }
#navigation ul li a { display: block; width: 100%; height: 20px; }
#navigation ul li a:hover { background-position: left -20px; }
#navigation ul li.top { background-image: url(../img/common/menu_black/menu_top.png); }
#navigation ul li.story { background-image: url(../img/common/menu_black/menu_story.png); }
#navigation ul li.chara { background-image: url(../img/common/menu_black/menu_chara.png); }
#navigation ul li.cast { background-image: url(../img/common/menu_black/menu_cast-staff.png); }
#navigation ul li.release { background-image: url(../img/common/menu_black/menu_release.png); }
#navigation ul li.gallery { background-image: url(../img/common/menu_black/menu_gallery.png); }
#navigation ul li.live { background-image: url(../img/common/menu_black/menu_live.png); }
#navigation ul li.news { background-image: url(../img/common/menu_black/menu_news.png); }
#navigation ul li.goods { background-image: url("../img/common/menu_black/menu_goods.png"); }

#pageTop { opacity: 0; filter: alpha(opacity=0); position: fixed; z-index: 500; bottom: 30px; right: 40px; cursor: pointer; width: 42px; height: 42px; }
#pageTop p { position: absolute; top: 0; }
#pageTop p.l { height: 44px; width: 3px; background: #b4e500; -webkit-transform: rotate(27deg); -moz-transform: rotate(27deg); -ms-transform: rotate(27deg); -o-transform: rotate(27deg); transform: rotate(27deg); left: 10px; }
#pageTop p.r { height: 44px; width: 3px; background: #b4e500; -webkit-transform: rotate(-27deg); -moz-transform: rotate(-27deg); -ms-transform: rotate(-27deg); -o-transform: rotate(-27deg); transform: rotate(-27deg); right: 10px; }

.mainContents { position: relative; opacity: 0; filter: alpha(opacity=0); }
.mainContents .mainBG p { position: absolute; left: 50%; margin-left: -750px; z-index: 0; }

#header { opacity: 0; filter: alpha(opacity=0); width: 980px; margin: auto; height: 168px; position: relative; z-index: 15; }
#header h1 { padding-top: 50px; float: left; margin-right: 70px; }
#header .topics { margin-top: 48px; float: left; width: 350px; background: url(../img/top/line_news.png) no-repeat left top; position: relative; height: 115px; }
#header .topics dl { margin-bottom: 10px; display: none; }
#header .topics dl dd { line-height: 1.4em; font-size: 12px; padding-top: 15px; padding-bottom: 8px; padding-right: 20px; background: url(../img/top/icon_arrow.png) no-repeat right bottom; }
#header .topics dl dd a { color: #000; text-decoration: none; }
#header .topics dl dd a:hover { text-decoration: underline; color: #7ea800; }
#header .topics dl dt { line-height: 1em; font-size: 10px; }
#header .topics .banner { background: url(../img/top/icon_arrow.png) no-repeat right center; }
#header .topics .banner a { display: block; background: url(../img/top/btn_fes.png) no-repeat; background-position: left top; width: 100%; height: 30px; padding-right: 30px; }
#header .topics .banner a:hover { background-position: left bottom; }
#header .topics .banner a span { display: none; }
#header .movie { float: right; background: url(../img/top/line_movie.png) no-repeat left top; padding-top: 5px; margin-top: 45px; position: relative; cursor: pointer; }
#header .movie .playover { width: 210px; height: 118px; position: absolute; top: 5px; left: 0; cursor: pointer; }
#header .movie .play { position: absolute; width: 82px; left: 50%; margin-left: -41px; top: 50%; margin-top: -41px; }
#header .movie .play p { position: absolute; top: 0; left: 0; }

#mainArea { position: relative; z-index: 12; width: 100%; overflow: hidden; }
#mainArea .mainImage { top: 0; left: 50%; margin-left: -750px; position: relative; top: 4px; overflow: hidden; }
#mainArea .links { position: absolute; z-index: 500; top: 50%; margin-top: -70px; right: -800px; opacity: 0; filter: alpha(opacity=0); }
#mainArea .links .tab { float: left; cursor: pointer; }
#mainArea .links .banners { float: left; background: url(../img/common/banner/bg_banner.png); height: 80px; padding: 30px 30px 30px 20px; }
#mainArea .links .banners p { float: left; margin-left: 10px; }

#storyArea { height: 700px; overflow: hidden; z-index: 10; }
#storyArea .mainBG .bgOver { background: url(../img/story/bg_photo_cover.png); width: 100%; height: 700px; position: absolute; z-index: 1; }
#storyArea .storyContents { position: relative; z-index: 20; width: 680px; margin: auto; padding-top: 100px; }
#storyArea .storyContents h2 { margin-bottom: 70px; }
#storyArea .storyContents p { margin-top: 20px; opacity: 0; filter: alpha(opacity=0); }

#characterArea { height: 1120px; background: url(../img/chara/bg_chara.png) repeat-x left bottom; }
#characterArea .charaContents { position: relative; width: 980px; margin: auto; }
#characterArea .charaContents h2 { text-align: center; padding-top: 70px; }
#characterArea .charaContents .charaList { height: 930px; }
#characterArea .charaContents .charaList ul { position: relative; }
#characterArea .charaContents .charaList ul li { position: absolute; z-index: 20; height: 880px; }
#characterArea .charaContents .charaList ul li p { display: none; }
#characterArea .charaContents .charaList ul li.uran { background: url(../img/chara/btn_chara03.png); top: 0; left: 0; width: 261px; }
#characterArea .charaContents .charaList ul li.kal { background: url(../img/chara/btn_chara02.png); top: 50px; left: 220px; width: 255px; }
#characterArea .charaContents .charaList ul li.ned { background: url(../img/chara/btn_chara01.png); top: 50px; right: 247px; width: 270px; z-index: 20; }
#characterArea .charaContents .charaList ul li.meisa { background: url(../img/chara/btn_chara04.png); right: 0; width: 298px; z-index: 19; }
#characterArea .charaContents .charaList .over { position: absolute; z-index: 21; display: none; }
#characterArea .charaContents .charaList .over p { position: absolute; top: 0; left: 0; }

#castArea { height: 630px; position: relative; z-index: 15; }
#castArea p { text-align: center; padding-top: 70px; }

#releaseArea { height: 630px; overflow: hidden; }
#releaseArea .mainBG .bgOver { background: url(../img/release/bg_photo_cover.png); width: 100%; height: 630px; position: absolute; z-index: 1; }
#releaseArea .releaseContents { position: relative; z-index: 20; width: 680px; margin: auto; }
#releaseArea .releaseContents h2 { padding-top: 100px; margin-bottom: 70px; }
#releaseArea .releaseContents dl { background: url(../img/release/line_release_l.png) no-repeat left top; padding-top: 7px; width: 490px; margin: auto; }
#releaseArea .releaseContents dl dd { position: relative; }
#releaseArea .releaseContents dl dd .cover { position: absolute; display: none; top: 0; left: 0; width: 100%; height: 100%; background: url(../img/release/thumb_on_cover.png); }
#releaseArea .releaseContents dl dd .play { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none; }
#releaseArea .releaseContents dl dd .play p { position: absolute; top: 0; left: 0; left: 50%; margin-top: -45px; top: 50%; margin-left: -45px; }
#releaseArea .releaseContents dl dt { font-size: 13px; text-align: center; line-height: 16px; padding-top: 5px; }
#releaseArea .releaseContents dl.movie { cursor: pointer; }
#releaseArea .releaseContents dl.sound, #releaseArea .releaseContents dl.soundClose { float: right; margin: 0 25px 0 0; }
#releaseArea .releaseContents dl.sound dd, #releaseArea .releaseContents dl.soundClose dd { background: url(../img/release/thumb_sound.png); height: 172px; }

#galleryArea { background: url(../img/gallery/bg.png); }
#galleryArea .galleryContents { width: 1000px; margin: auto; text-align: center; padding-bottom: 100px; position: relative; z-index: 15; }
#galleryArea .galleryContents h2 { padding-top: 100px; margin-bottom: 70px; }
#galleryArea .galleryContents ul li { display: inline-block; width: 306px; margin-right: 18px; }
#galleryArea .galleryContents ul li.right { margin-right: 0; }
#galleryArea .galleryContents ul li dl { width: 306px; background: url(../img/gallery/line_gallery.png) no-repeat left top; padding-top: 7px; cursor: pointer; }
#galleryArea .galleryContents ul li dl dd { position: relative; }
#galleryArea .galleryContents ul li dl dd .cover { position: absolute; background: url(../img/gallery/thumb_on_cover.png); width: 306px; height: 172px; top: 0; left: 0; display: none; }
#galleryArea .galleryContents ul li dl dd .play { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none; }
#galleryArea .galleryContents ul li dl dd .play p { position: absolute; top: 0; left: 0; left: 50%; margin-top: -45px; top: 50%; margin-left: -45px; }
#galleryArea .galleryContents ul li dl dt { font-size: 13px; text-align: center; line-height: 16px; padding-top: 5px; margin-bottom: 20px; }

#galleryFloat { position: fixed; background: #FFF; background: rgba(255, 255, 255, 0.9); text-align: center; width: 100%; height: 100%; top: 0; left: 0; z-index: -1; display: none; }
#galleryFloat .image { position: absolute; left: 50%; top: 50%; }
#galleryFloat .close { position: absolute; display: none; z-index: 5100; top: 35px; right: 32px; cursor: pointer; width: 65px; height: 65px; }
#galleryFloat .close p { position: absolute; top: 30px; }
#galleryFloat .close p.l1 { width: 100%; height: 3px; background: #b4e500; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }
#galleryFloat .close p.l2 { width: 100%; height: 3px; background: #b4e500; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); }

#liveArea { position: relative; z-index: 15; }
#liveArea .liveContents { width: 710px; margin: auto; text-align: center; }
#liveArea .liveContents h2 { padding-top: 70px; margin-bottom: 70px; }
#liveArea .liveContents .liveBanner { width: 651px; height: 172px; margin: auto; margin-bottom: 120px; }
#liveArea .liveContents .liveBanner .fes { float: left; margin-top: 30px; }
#liveArea .liveContents .liveBanner div { float: left; padding-top: 30px; }
#liveArea .liveContents .liveBanner div p { margin-bottom: 20px; }

#goodsArea { line-height: 1; position: relative; z-index: 15; background: url(../img/gallery/bg.png); padding-bottom: 15px; margin-bottom: 75px; }
#goodsArea .goodsContents { width: 750px; margin: auto; }
#goodsArea .goodsContents h2 { text-align: center; padding-top: 34px; margin-bottom: 70px; }
#goodsArea .goodsContents .copy { text-align: center; margin-bottom: 72px; }
#goodsArea .goodsContents .copy p { margin-bottom: 23px; }
#goodsArea .goodsContents .dvd .jacket { float: left; width: 245px; }
#goodsArea .goodsContents .dvd .jacket p { margin-bottom: 20px; }
#goodsArea .goodsContents .dvd .text { font-size: 12px; float: right; width: 475px; }
#goodsArea .goodsContents .dvd .text h3 { margin-bottom: 25px; }
#goodsArea .goodsContents .dvd .text .detail { line-height: 1.6; padding-top: 12px; }
#goodsArea .goodsContents .dvd .text dl { margin-top: 25px; }
#goodsArea .goodsContents .dvd .text dl dt { margin-bottom: 20px; }
#goodsArea .goodsContents .dvd .text dl dd { line-height: 1.6; margin-bottom: 20px; }
#goodsArea .goodsContents .dvd .text dl dd p { padding-top: 5px; }
#goodsArea .goodsContents .dvd .text dl dd p span { color: #9ace00; }
#goodsArea .goodsContents .dvd .text dl dd .note { font-size: 10px; }
#goodsArea .goodsContents .dvd .text dl dd li { background: url("../img/goods/icon_dot.png") no-repeat left center; padding-left: 12px; }
#goodsArea .goodsContents .dvd .text dl.price dt { margin-bottom: 0; display: inline-block; }
#goodsArea .goodsContents .dvd .text dl.price dt:after { content: "/"; margin-left: 8px; margin-right: 4px; }
#goodsArea .goodsContents .dvd .text dl.price dd { display: inline-block; }
#goodsArea .shopList { margin-top: 24px; margin-bottom: 70px; }
#goodsArea .shopList h3 { margin-bottom: 21px; }
#goodsArea .shopList ul { margin-bottom: 24px; }
#goodsArea .shopList ul li { float: left; margin-right: 12px; height: 85px; margin-bottom: 12px; }
#goodsArea .shopList ul li img { vertical-align: bottom; }
#goodsArea .shopList ul li:nth-child(3n) { margin-right: 0; }
#goodsArea .shopList p { text-align: center; }
#goodsArea .alphaBtn { cursor: pointer; }

#linkArea { position: relative; z-index: 15; }
#linkArea ul { text-align: center; }
#linkArea ul li { display: inline-block; margin-left: 8px; }

#footer { padding-top: 140px; text-align: center; padding-bottom: 50px; }

#changeOver { width: 100%; height: 100%; position: fixed; z-index: 2000; display: none; }
#changeOver p { position: absolute; }
#changeOver .up { top: 0; background: #fff; opacity: 0; filter: alpha(opacity=0); width: 100%; }
#changeOver .down { bottom: 0; background: #fff; width: 100%; opacity: 0; filter: alpha(opacity=0); }

#movieOver { position: fixed; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; background: #FFF; background: rgba(255, 255, 255, 0.9); display: none; }
#movieOver .youtube { position: relative; left: 50%; margin-left: -320px; top: 50%; margin-top: -180px; }
#movieOver .close { position: absolute; z-index: 5100; display: none; opacity: 0; filter: alpha(opacity=0); top: 35px; right: 32px; cursor: pointer; width: 65px; height: 65px; }
#movieOver .close p { position: absolute; top: 30px; }
#movieOver .close p.l1 { width: 100%; height: 3px; background: #b4e500; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }
#movieOver .close p.l2 { width: 100%; height: 3px; background: #b4e500; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); }

#goodsDVDFloat { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #FFF; background: rgba(255, 255, 255, 0.9); opacity: 0; filter: alpha(opacity=0); display: none; }
#goodsDVDFloat .goordWrap { width: 100%; height: 100%; position: absolute; }
#goodsDVDFloat .close { position: absolute; display: none; opacity: 0; filter: alpha(opacity=0); top: 35px; right: 32px; cursor: pointer; width: 65px; height: 65px; z-index: 5100; }
#goodsDVDFloat .close p { position: absolute; top: 30px; }
#goodsDVDFloat .close p.l1 { width: 100%; height: 3px; background: #b4e500; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }
#goodsDVDFloat .close p.l2 { width: 100%; height: 3px; background: #b4e500; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); }
#goodsDVDFloat .order { background: url("../img/goods/order/bg.png"); width: 980px; height: 550px; position: relative; margin: auto; top: 50%; margin-top: -275px; display: none; }
#goodsDVDFloat .order h1 { text-align: center; padding-top: 40px; margin-bottom: 40px; }
#goodsDVDFloat .order dl { width: 818px; margin: 0 auto 40px; }
#goodsDVDFloat .order dl dt { float: left; }
#goodsDVDFloat .order dl dd { margin-left: 270px; }
#goodsDVDFloat .shop { background: url("../img/goods/shop/bg.png"); width: 980px; height: 600px; position: relative; margin: auto; top: 50%; margin-top: -300px; display: none; }
#goodsDVDFloat .shop h1 { text-align: center; padding-top: 40px; margin-bottom: 40px; }
#goodsDVDFloat .shop div { margin: 0 38px 0 25px; }
#goodsDVDFloat .shop div p { float: left; width: 320px; height: 420px; overflow: hidden; }
#goodsDVDFloat .shop div p:hover img { margin-top: -420px; }
#goodsDVDFloat .shop div ul { float: right; }
#goodsDVDFloat .shop div ul li { margin-bottom: 19px; }
#goodsDVDFloat .shop div ul li img { vertical-align: bottom; }

#audio { display: none; width: 1px; height: 1px; }

#noflash { width: 100%; height: 100%; background: #000; text-align: center; }
#noflash .text { background: #000; padding-top: 100px; }
#noflash .text p { margin-bottom: 80px; }
