@charset "UTF-8";
/* ==========================================================
  BASE
========================================================== */
body {
  min-width: 1000px;
}

#wrapper {
  background: url(../images/common/bg-contents-body.gif) repeat center -3px;
}

.main {
  overflow: hidden;
  position: relative;
  width: 100%;
}

.inner {
  margin: 0 auto;
  width: 1000px;
}

/* ==========================================================
  HEADER
========================================================== */
.global-navi {
  background: url(../images/common/bg-header-in.png) repeat-x center -31px;
  height: 158px;
  padding: 0 0 10px;
}
.global-navi h1 {
  left: 50%;
  margin: 0 0 0 -511px;
  position: absolute;
  top: 43px;
  width: 132px;
  z-index: 10;
}
.global-navi h1 img {
  height: auto;
  width: 100%;
}
.global-navi ul {
  background: url(../images/common/bg-navi-in.png) no-repeat center 0;
  box-sizing: border-box;
  height: 142px;
  left: 50%;
  margin: 0 0 0 -560px;
  padding: 68px 0 0 83px;
  position: absolute;
  top: 40px;
  width: 1120px;
}
.global-navi ul li {
  float: left;
  margin: 0 5px 0 0;
}
.global-navi ul li:last-child {
  margin: 0;
}

/* CURRENT ---------------------------------------------------------- */
#news .global-navi ul .li-news a {
  background: url(../images/common/navi-news_on.png) no-repeat 0 0;
  display: block;
  height: 60px;
  text-indent: -9999px;
  width: 140px;
}

#introduction .global-navi ul .li-introduction a {
  background: url(../images/common/navi-introduction_on.png) no-repeat 0 0;
  display: block;
  height: 60px;
  text-indent: -9999px;
  width: 135px;
}

#character .global-navi ul .li-character a {
  background: url(../images/common/navi-character_on.png) no-repeat 0 0;
  display: block;
  height: 60px;
  text-indent: -9999px;
  width: 165px;
}

#story .global-navi ul .li-story a {
  background: url(../images/common/navi-story_on.png) no-repeat 0 0;
  display: block;
  height: 60px;
  text-indent: -9999px;
  width: 135px;
}


#episode .global-navi ul .li-story a {
  background: url(../images/common/navi-story_on.png) no-repeat 0 0;
  display: block;
  height: 60px;
  text-indent: -9999px;
  width: 135px;
}

#goods .global-navi ul .li-goods a {
  background: url(../images/common/navi-goods_on.png) no-repeat 0 0;
  display: block;
  height: 60px;
  text-indent: -9999px;
  width: 120px;
}

#keyword .global-navi ul .li-keyword a {
  background: url(../images/common/navi-keyword_on.png) no-repeat 0 0;
  display: block;
  height: 60px;
  text-indent: -9999px;
  width: 150px;
}

#movie .global-navi ul .li-movie a {
  background: url(../images/common/navi-movie_on.png) no-repeat 0 0;
  display: block;
  height: 60px;
  text-indent: -9999px;
  width: 130px;
}

/* ページタイトル ---------------------------------------------------------- */
.title {
  background: url(../images/common/bg-title.jpg) no-repeat center 0 #0090e6;
  height: 334px;
  text-align: center;
}

/* ==========================================================
  CONTENTS
========================================================== */
.contents {
  background: url(../images/common/bg-contents-head.png) repeat-x center 0;
  margin: -78px 0 0;
  padding: 78px 0 0;
  position: relative;
}

.contents-inner {
  padding: 0 0 30px;
}

/* ==========================================================
  FOOTER
========================================================== */
footer {
  background: url(../images/common/bg-footer.png) repeat-x center 0 #333a43;
  padding: 15px 0 30px;
}

.pagetop {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 999;
}
.pagetop a:hover {
  opacity: 0.8;
}

.bnr {
  margin: 0 0 8px;
}
.bnr li {
  float: left;
  margin: 0 5px 0 0;
}
.bnr li:first-child {
  margin: 10px 5px 0 0;
}
.bnr li:last-child {
  margin: 0;
}

.copyright {
  font-size: 12px;
  text-align: center;
}

/*** PC Style ========================================================== ***/
@media print, screen and (min-width: 641px) {
  .pc-none {
    display: none;
  }
}
/*** SP Style ========================================================== ***/
@media print, screen and (max-width: 640px) {
  /* ==========================================================
    SP BASE
  ========================================================== */
  body {
    font-size: 24px;
    min-width: 640px;
  }

  .sp-none {
    display: none;
  }

  .header_wrap {
    display: none;
  }

  img {
    height: auto;
    max-width: 100%;
  }

  iframe {
    height: 250px;
    max-width: 100%;
  }

  .inner {
    margin: 0 2%;
    width: inherit;
  }

  /* ==========================================================
    SP HEADER
  ========================================================== */
  header {
    background: url(../images/common/bg-sp-menu.gif) no-repeat center 0;
    background-size: 100% auto;
    display: block;
  }
  header .header-inner {
    overflow: hidden;
  }
  header h1 {
    float: left;
    padding: 9px 0 0 20px;
  }
  header .btn-menu {
    float: right;
    padding: 4px 10px 4px 0;
  }

  .global-navi-sp {
    clear: both;
    display: none;
  }
  .global-navi-sp ul {
    width: 100%;
  }
  .global-navi-sp li {
    background: #000085;
    border-bottom: solid 1px #0000b5;
  }
  .global-navi-sp li a {
    color: #fff;
    text-decoration: none;
    display: block;
    padding: 15px 20px;
  }
  .global-navi-sp li ul li {
    background: #00006c;
  }
  .global-navi-sp li ul li:last-child {
    border-bottom: none;
  }
  .global-navi-sp li ul li a {
    padding: 15px 20px 15px 35px;
  }
  .global-navi-sp li ul .soon {
    padding: 15px 20px 15px 35px;
  }
  .global-navi-sp .soon {
    padding: 15px 20px;
  }

  /* ==========================================================
    SP CONTENTS
  ========================================================== */
  .contents {
    background-size: 100px 79px;
    margin: -79px 0 0;
    padding: 79px 0 0;
  }

  /* ==========================================================
    SP FOOTER
  ========================================================== */
  .bnr {
    margin: 0 20px 8px;
  }
  .bnr li {
    margin: 0 0 5px;
    width: 49%;
  }
  .bnr li img {
    width: 100%;
  }
  .bnr li:first-child {
    margin: 8px 0 5px;
  }
  .bnr li:last-child {
    margin: 0 0 5px;
  }
  .bnr li:nth-child(2n) {
    float: right;
  }
  .bnr li:nth-child(2n+1) {
    clear: both;
  }
  
 .spNone{display:none;} 
  
}