@charset "UTF-8";

/* ------------------------------------------------------
     reset styles
------------------------------------------------------ */

body, div, h1, h2, h3, h4, h5, h6, p, blockquote, pre, address, ul, ol, li, dl, dt, dd, table, th, td, form, fieldset {
  margin: 0;
  padding: 0;
  color: #eee;
  list-style-type: none;
}

fieldset, img {
  border: 0;
}


/* ------------------------------------------------------
     layout
------------------------------------------------------ */

html, body {
  height: 100%;
}

body {
  background: #4c506d;
  font: 88%/1.6 "繝｡繧､繝ｪ繧ｪ", Meiryo, "繝偵Λ繧ｮ繝手ｧ偵ざ Pro W3", "Hiragino Kaku Gothic Pro", "・ｭ・ｳ ・ｰ繧ｴ繧ｷ繝・け", sans-serif;
  color: #444;
}

#loading{
  position:absolute;
  left:50%;
  top:50%;
  margin-top: -40px;
  margin-left: -40px;
}

#wrapper {
  display: none;
  position: relative;
  width: 100%;
  /*min-height: 200%;*/
}

.clearfix:after {
  content: ".";
  display: block;
  visibility: hidden;
  height: 0.1px;
  font-size: 0.1em;
  line-height: 0;
  clear: both;
}

a img {
  opacity: 1;
  filter: alpha(opacity=100); /* IE6 7 */
  -ms-filter: "alpha(opacity=1)"; /* IE8 */
}

a:hover img {
  opacity: 0.9;
  filter: alpha(opacity=90); /* IE6 7 */
  -ms-filter: "alpha(opacity=0.9)"; /* IE8 */
}

a:focus {
  outline: none;
}

#bgImage {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -30;
  width: 100%;
  height: 100%;
  background: url(../../images/bg.jpg) no-repeat center top;
  background-size: 100% auto;
  opacity: 0;
  filter: alpha(opacity=0); /* IE6 7 */
  -ms-filter: "alpha(opacity=0)"; /* IE8 */
}

#bgAura {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -20;
  width: 100%;
  height: 100%;
  background: url(../../images/bg_aura.png) no-repeat center top;
  background-size: 100% auto;
  opacity: 0;
  filter: alpha(opacity=0); /* IE6 7 */
  -ms-filter: "alpha(opacity=0)"; /* IE8 */
}

#bgFlare {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: -10;
  width: 100%;
  height: 100%;
  background: url(../../images/bg_flare.png) no-repeat center bottom;
  background-size: 100% auto;
  opacity: 0;
  filter: alpha(opacity=0); /* IE6 7 */
  -ms-filter: "alpha(opacity=0)"; /* IE8 */
}

.imgCharacterL {
  display: block;
  position: fixed;
}

#imgAkkoL {
  top: -290%;
  z-index: +380;
  width: 60%;
  left: 11%;
}

#imgAmandaL {
  top: -320%;
  z-index: +360;
  width: 34%;
  left: 65%;
}

#imgDianaL {
  top: -238%;
  z-index: +350;
  width: 36%;
  left: 48%;
}

#imgUrsulaL {
  top: -180%;
  z-index: +340;
  width: 25%;
  left: 48%;
}

#imgConsL {
  top: -293%;
  z-index: +320;
  width: 24%;
  left: 3%;
}

#imgYasuminL {
  top: -258%;
  z-index: +330;
  width: 24%;
  left: 1%;
}

.imgCharacter {
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  opacity: 0;
  filter: alpha(opacity=0); /* IE6 7 */
  -ms-filter: "alpha(opacity=0)"; /* IE8 */
}

#imgAkko {
  z-index: +80;
}

#imgSpirit {
  z-index: +10;
}

#imgAmanda {
  z-index: +60;
}

#imgDiana {
  z-index: +50;
}

#imgUrsula {
  z-index: +40;
}

#imgCons {
  z-index: +30;
}

#imgYasumin {
  z-index: +20;
}

#imgModoki {
  z-index: +10;
}

#imgHandFlare {
  display: block;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: +10;
  opacity: 0;
  filter: alpha(opacity=0); /* IE6 7 */
  -ms-filter: "alpha(opacity=0)"; /* IE8 */
}

#imgHand {
  display: block;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 0;
  opacity: 0;
  filter: alpha(opacity=0); /* IE6 7 */
  -ms-filter: "alpha(opacity=0)"; /* IE8 */
}

.imgCharacterL img,
.imgCharacter img,
#imgHandFlare img,
#imgHand img {
  width: 100%;
}

#btnPagetop {
  position: fixed;
  right: 20px;
  z-index: +300;
}


/* ------------------------------------------------------
     updateInfo
------------------------------------------------------ */

#updateInfo {
  position: fixed;
  bottom: 40px;
  left: 0;
  z-index: +400;
  width: 100%;
  height: 24px;
  background: url(../../images/bg_update_info.png) repeat left top;
}

#updateInfo .ttlUpdateInfo {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
}


/* liScroll styles */
.tickercontainer { /* the outer div with the black border */
  height: 24px;
  margin: 0;
  padding: 0 20px 0 90px;
  overflow: hidden;
}

.tickercontainer .mask { /* that serves as a mask. so you get a sort of padding both left and right */
  position: relative;
  width: 100%;
  overflow: hidden;
}

ul.newsticker { /* that's your list */
  position: relative;
  left: 99%;
  margin: 0;
  padding: 0;
}

ul.newsticker li {
  float: left; /* important: display inline gives incorrect results when you check for elem's width */
  margin: 0 100px 0 0;
  padding: 0;
  font-size: 86%;
  line-height: 24px;
  color: #fff;
}

ul.newsticker a {
  white-space: nowrap;
  padding: 0;
  margin: 0;
  color: #eee;
  text-decoration: none;
}

ul.newsticker span {
  margin: 0 10px 0 0;
}


/* ------------------------------------------------------
     footer
------------------------------------------------------ */

#footer {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: +400;
  width: 100%;
  background: #000;
}

#bnCompany {
  width: 408px;
  height: 40px;
}

#bnCompany li {
  float: left;
  height: 40px;
}

#bnCompany a:hover img {
  opacity: 1;
  filter: alpha(opacity=100); /* IE6 7 */
  -ms-filter: "alpha(opacity=1)"; /* IE8 */
}

#sns {
  width: 242px;
  height: 40px;
  margin: 0 auto;
}

#sns li {
  display: block;
  float: left;
  height: 20px;
  margin: 10px 5px 10px 0;
}

#sns .btnFacebook {
  width: 58px;
}

#sns .btnTwitter {
  width: 67px;
}

#sns .btnGoogle {
  width: 32px;
}

#sns .btnMixi {
  width: 70px;
  margin-right: 0;
}

#copyright {
  width: 267px;
  height: 40px;
  margin: 0 auto;
}

#copyright img {
  margin: 10px;
}


/* ------------------------------------------------------
     top
------------------------------------------------------ */

#logo {
  position: absolute;
  left: 0;
  top: 0;
  z-index: +200;
  opacity: 0;
  filter: alpha(opacity=0); /* IE6 7 */
  -ms-filter: "alpha(opacity=0)"; /* IE8 */
}

#logo img {
  width: 100%;
}

#navi {
  position: absolute;
  left: 0;
  top: 0;
  z-index: +200;
  opacity: 0;
  filter: alpha(opacity=0); /* IE6 7 */
  -ms-filter: "alpha(opacity=0)"; /* IE8 */
}

#naviInner {
  position: relative;
  width: 100%;
}

#naviInner .bgNavi {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: +200;
}

#naviInner .naviIntro {
  position: absolute;
  top: 18%;
  left: 7.2%;
  width: 30.4%;
  z-index: +210;
}

#naviInner .naviStory {
  position: absolute;
  top: 18%;
  left: 39%;
  width: 18.2%;
  z-index: +210;
}

#naviInner .naviBluray {
  position: absolute;
  top: 18%;
  left: 58.4%;
  width: 33.5%;
  z-index: +210;
}

#naviInner .naviStaffCast {
  position: absolute;
  top: 41%;
  left: 7.2%;
  width: 30.4%;
  z-index: +210;
}

#naviInner .naviCharacter {
  position: absolute;
  top: 41%;
  left: 39%;
  width: 27.7%;
  z-index: +210;
}

#naviInner .naviSpecial {
  position: absolute;
  top: 41%;
  left: 67.8%;
  width: 23.5%;
  z-index: +210;
}

#naviInner .naviNews {
  position: absolute;
  top: 67%;
  left: 14%;
  width: 20%;
  z-index: +210;
}

#naviInner .naviTheater {
  position: absolute;
  top: 67%;
  left: 39%;
  width: 20%;
  z-index: +210;
}

#naviInner .naviTrailer {
  position: absolute;
  top: 67%;
  left: 66%;
  width: 20%;
  z-index: +210;
}


#logoFb {
  position: absolute;
  left: 0;
  top: 0;
  z-index: +200;
  opacity: 0;
  filter: alpha(opacity=0); /* IE6 7 */
  -ms-filter: "alpha(opacity=0)"; /* IE8 */
}

#logoFb img {
  width: 100%;
}

#logoTw {
  position: absolute;
  left: 0;
  top: 0;
  z-index: +200;
  opacity: 0;
  filter: alpha(opacity=0); /* IE6 7 */
  -ms-filter: "alpha(opacity=0)"; /* IE8 */
}

#logoTw img {
  width: 100%;
}

#btnAnime {
  position: absolute;
  right: 0;
  top: 0;
  z-index: +200;
  opacity: 0;
  filter: alpha(opacity=0); /* IE6 7 */
  -ms-filter: "alpha(opacity=0)"; /* IE8 */
}

#btnAnime img {
  width: 100%;
}

a:hover #btnAnime img {
  opacity: 0.98;
  filter: alpha(opacity=98); /* IE6 7 */
  -ms-filter: "alpha(opacity=0.98)"; /* IE8 */
}

#bnThemeSong {
  position: absolute;
  left: 0;
  top: 0;
  z-index: +200;
  opacity: 0;
  filter: alpha(opacity=0); /* IE6 7 */
  -ms-filter: "alpha(opacity=0)"; /* IE8 */
}

#bnThemeSong img {
  width: 100%;
}

a:hover #bnThemeSong img {
  opacity: 0.80;
  filter: alpha(opacity=80); /* IE6 7 */
  -ms-filter: "alpha(opacity=0.80)"; /* IE8 */
}