ul {
  list-style: none;
}

img {
  border: none;
  vertical-align: bottom;
}

a {
  outline: none;
}

#gaCol {
  height: 0;
  overflow: hidden;
}

footer {
  padding-bottom: 5px;
}
footer #logo-bne {
  padding: 10px 0;
}
footer .bne_footer a {
  color: #333 !important;
}

.hoverOpa {
  -webkit-transition: all .3s;
  transition: all .3s;
}
.hoverOpa:hover {
  filter: alpha(opacity=50);
  -moz-opacity: 0.5;
  opacity: 0.5;
}

body {
  background: url("../images/story_characters/bg_story_characters.jpg") top center no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

#story #wrapCol {
  background: -moz-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.4) 30%, black 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.4) 30%, black 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.4) 30%, black 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#00000000',GradientType=0 );
  /* IE6-9 */
}
#story #wrapCol #mainCol {
  background: url(../images/story_characters/story/bg.jpg) top center no-repeat rgba(0, 0, 0, 0.8);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  height: 1400px;
}
#story #wrapCol .intro {
  margin-bottom: 70px;
}
#story #wrapCol .intro img {
  margin-bottom: 30px;
}

#glossary #wrapCol {
  background: rgba(0, 0, 0, 0.4);
}
#glossary #wrapCol .description {
  padding-bottom: 50px;
}
#glossary #wrapCol .description ul li {
  margin-bottom: 50px;
}

#history #wrapCol {
  background: rgba(0, 0, 0, 0.2);
}
#history #wrapCol #mainCol {
  background: rgba(0, 0, 0, 0.8);
  /*.mainCol-inner {
    width: auto;
    margin-bottom: 120px;
    padding: 27px 0;
    background: 
      url(../images/story_characters/history/bg_history01_02.png) bottom left no-repeat,
      url(../images/story_characters/history/bg_history01_01.png) top right no-repeat;
    background-size: 100% auto, 100% auto;
    .description {
      padding-top: 10px;
      width: 1000px;
      margin: 0 auto;
    }
  }*/
}
#history #wrapCol #mainCol .mainCol-inner {
  margin-bottom: 70px;
}
#history #wrapCol #mainCol .mainCol-inner .description {
  background: url(../images/story_characters/history/bg.png) center 45px no-repeat;
}
#history #wrapCol #mainCol .mainCol-inner .description ul {
  position: relative;
  height: 2035px;
}
#history #wrapCol #mainCol .mainCol-inner .description ul li {
  position: absolute;
}
#history #wrapCol #mainCol .mainCol-inner .description ul li:nth-child(1) {
  top: 0;
  right: 1px;
}
#history #wrapCol #mainCol .mainCol-inner .description ul li:nth-child(2) {
  top: 80px;
  left: 0;
}
#history #wrapCol #mainCol .mainCol-inner .description ul li:nth-child(3) {
  top: 220px;
  right: 1px;
}
#history #wrapCol #mainCol .mainCol-inner .description ul li:nth-child(4) {
  top: 554px;
  left: 0;
}
#history #wrapCol #mainCol .mainCol-inner .description ul li:nth-child(5) {
  bottom: 185px;
  right: 1px;
}
#history #wrapCol #mainCol .mainCol-inner .description ul li:nth-child(6) {
  bottom: 22px;
  left: 1px;
}
#history #wrapCol #mainCol .mainCol-inner .description ul li:nth-child(7) {
  bottom: 0;
  bottom: 0;
  right: 273px;
}

#characters #mainCol ul {
  margin-bottom: 105px;
  /*a.custom{
    width: 265px;
    margin-top: 8px;
    display: block;
  }
  a.style{
    width: 181px;
    margin-top: 8px;
    display: block;
  }*/
}
#characters #mainCol ul li {
  position: relative;
  width: 100%;
  max-width: 2000px;
  height: 100%;
  margin: 0 auto;
}
#characters #mainCol ul li .inner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: left;
  width: 1000px;
  margin: 0 auto;
}
#characters #mainCol ul li .inner > div {
  position: absolute;
}
#characters #mainCol ul li .inner > div ul {
  position: relative;
  margin-top: 8px;
  z-index: 10;
}
#characters #mainCol ul li .inner > div ul li {
  width: auto;
  max-width: none;
  height: auto;
  margin: 0 2px;
  display: inline-block;
}
#characters #mainCol .bx-wrapper .bx-pager.bx-default-pager a {
  background: #808080;
}
#characters #mainCol .bx-wrapper .bx-pager.bx-default-pager a:hover, #characters #mainCol .bx-wrapper .bx-pager.bx-default-pager a.active {
  background: #800000;
}
#characters #mainCol .bx-wrapper {
  margin-bottom: 40px;
}
#characters #mainCol .bx-pager {
  padding-top: 10px;
}
#characters #mainCol .popTxt {
  margin-top: -10px !important;
}
#characters #mainCol .main {
  margin-bottom: 0;
}
#characters #mainCol .main #mainInner {
  padding: 170px 0 120px;
  background: url("../images/story_characters/characters/main/bg_chara01.png") top center no-repeat;
}
#characters #mainCol .main #mainInner .inner {
  position: static;
  text-align: center;
  /*.ability {
    text-align: left;
    .abilityInner {
      position: relative;
      padding-bottom: 35px;
      background: rgba(0,0,0,0.6);
      border: 1px solid rgba(255,255,255,0.5);
      border-top: none;
      p {
        margin: 0 0 0 40px;
      }
      ul {
        text-align: center;
        margin: 25px 0 15px;
        li {
          margin: 0 5px;
        }
      }
      &:nth-child(2) {
        border-bottom: none;
      }
      .item {
        position: absolute;
        top: -17px;
        right: 48px;
      }
    }
  }*/
}
#characters #mainCol .main #mainInner .inner div {
  position: static;
}
#characters #mainCol .main #mainInner .inner div ul {
  margin-bottom: 75px;
}
#characters #mainCol .main #mainInner #abilityCol {
  background: rgba(0, 0, 0, 0.6);
  width: 1000px;
  margin: 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-top: none;
  box-sizing: border-box;
}
#characters #mainCol .main #mainInner #popCol1, #characters #mainCol .main #mainInner #popCol2 {
  zoom: 1;
  display: block;
  width: 920px;
  margin: 0 auto;
}
#characters #mainCol .main #mainInner #popCol1:before, #characters #mainCol .main #mainInner #popCol1:after, #characters #mainCol .main #mainInner #popCol2:before, #characters #mainCol .main #mainInner #popCol2:after {
  content: "";
  display: table;
}
#characters #mainCol .main #mainInner #popCol1:after, #characters #mainCol .main #mainInner #popCol2:after {
  clear: both;
}
#characters #mainCol .main #mainInner #popCol1 li, #characters #mainCol .main #mainInner #popCol2 li {
  float: left;
  overflow: hidden;
}
#characters #mainCol .main #mainInner #popCol1 li img, #characters #mainCol .main #mainInner #popCol2 li img {
  -webkit-transition: all .3s;
  transition: all .3s;
}
#characters #mainCol .main #mainInner #popCol1 li:hover img, #characters #mainCol .main #mainInner #popCol2 li:hover img {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);
}
#characters #mainCol .main #mainInner #popCol1 li {
  width: 450px;
}
#characters #mainCol .main #mainInner #popCol1 li:nth-child(n+2) {
  margin-left: 20px;
}
#characters #mainCol .main #mainInner #popCol1 li img {
  width: 450px;
}
#characters #mainCol .main #mainInner #popCol2 li {
  width: 300px;
}
#characters #mainCol .main #mainInner #popCol2 li:nth-child(n+2) {
  margin-left: 10px;
}
#characters #mainCol .main #mainInner #popCol2 li img {
  width: 300px;
}
#characters #mainCol h4 {
  margin: -30px 0 0;
}
#characters #mainCol #buddyNav {
  -webkit-display: flex;
  -ms-display: flex;
  display: flex;
  -webkit-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
  min-width: 1200px;
  margin-bottom: 0;
}
#characters #mainCol #buddyNav li {
  width: 200px;
  margin: 0;
  cursor: pointer;
  -webkit-transition: all .3s;
  transition: all .3s;
}
#characters #mainCol #buddyNav li:nth-child(2n) {
  margin-top: 60px;
}
#characters #mainCol #buddyNav li:hover {
  filter: alpha(opacity=50);
  -moz-opacity: 0.5;
  opacity: 0.5;
}
#characters #mainCol .buddy {
  padding-top: 5%;
}
#characters #mainCol .buddy .bx-wrapper .bx-viewport {
  height: auto !important;
}
#characters #mainCol .buddy .bx-wrapper .bx-viewport li {
  width: 400px !important;
  margin: 0;
}
#characters #mainCol .buddy .notes {
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.5;
  margin-bottom: 10px;
}
#characters #mainCol .buddy li:nth-child(2n+1) .bx-wrapper {
  margin: 15px auto 40px 0;
}
#characters #mainCol .buddy li:nth-child(2n+1) .notes {
  text-align: left;
}
#characters #mainCol .buddy li:nth-child(2n) .inner:first-child {
  text-align: right;
}
#characters #mainCol .buddy li:nth-child(2n) .bx-wrapper {
  margin: 15px 0 40px auto;
}
#characters #mainCol .buddy li:nth-child(2n) .notes {
  text-align: right;
}
#characters #mainCol .buddy .inner {
  position: relative;
  display: block;
  margin: 0 auto;
}
#characters #mainCol .buddy .inner > div {
  position: static;
  padding-top: calc(100px + calc(calc(100vw - 1610px) * 0.435));
}
@media screen and (max-width: 1600px) {
  #characters #mainCol .buddy .inner > div {
    padding-top: 100px;
  }
}
@media screen and (min-width: 2000px) {
  #characters #mainCol .buddy .inner > div {
    padding-top: 274px;
  }
}
#characters #mainCol .buddy .inner + .inner {
  padding: 20px calc(50% - 500px) 0;
  margin-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}
#characters #mainCol .buddy .inner + .inner > div {
  padding-top: 0;
}
#characters #mainCol .buddy a {
  display: block;
  overflow: hidden;
}
#characters #mainCol .buddy a img {
  -webkit-transition: all .3s;
  transition: all .3s;
}
#characters #mainCol .buddy a:hover img {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);
}
#characters #mainCol .buddy .battleCol h4 {
  position: relative;
  margin-top: 10px;
  z-index: 15;
}
#characters #mainCol .buddy .battleCol h4 img {
  display: block;
  margin: 0 auto;
}
#characters #mainCol .buddy .battleCol h4 + img {
  position: relative;
  z-index: 15;
}
#characters #mainCol .buddy .battleCol li {
  width: 450px;
}
#characters #mainCol .buddy .battleCol li img {
  width: 100%;
}
#characters #mainCol .buddy .battleCol > ul {
  position: relative;
  width: 100%;
  height: 524px;
  padding: 28px 0 48px;
  margin: 0;
}
#characters #mainCol .buddy .battleCol > ul li {
  display: block;
  margin: 0 0 0 auto;
}
#characters #mainCol .buddy .battleCol > ul li.imgChara {
  position: absolute;
  z-index: 0;
}
#characters #mainCol .buddy .battleCol > ul li.imgChara img {
  width: auto;
  height: auto;
}
#characters #mainCol .buddy .battleCol > ul li:nth-child(n+3) {
  margin-top: 20px;
}
#characters #mainCol .buddy .battleCol .abilityCol {
  background: rgba(0, 0, 0, 0.6);
  width: 1000px;
  margin: 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-top: none;
  box-sizing: border-box;
  padding: 5px 35px 35px 35px;
  font-size: 0;
}
#characters #mainCol .buddy .battleCol .abilityCol img {
  margin: 5px 0;
}
#characters #mainCol .buddy .battleCol .abilityCol > img {
  margin-left: -12px;
}
#characters #mainCol .buddy .battleCol .abilityCol > img.imgLine {
  margin-left: 0;
}
#characters #mainCol .buddy .battleCol .abilityCol ul {
  margin: 0;
}
#characters #mainCol .buddy .battleCol .abilityCol ul li img {
  margin: 0;
}
#characters #mainCol .buddy .battleCol .abilityCol ul li:nth-child(2n) {
  margin-left: 14px;
}
#characters #mainCol .buddy #chara01 {
  background: url("../images/story_characters/characters/buddy/bg_chara01.png") no-repeat;
}
#characters #mainCol .buddy #chara01 .inner + .inner {
  background: url(../images/story_characters/characters/buddy/bg_battle_chara01.png) center top no-repeat;
}
#characters #mainCol .buddy #chara01 .inner + .inner .imgChara {
  top: 10px;
  left: -160px;
}
#characters #mainCol .buddy #chara02 {
  background: url("../images/story_characters/characters/buddy/bg_chara02.png") no-repeat;
}
#characters #mainCol .buddy #chara02 .inner + .inner {
  background: url(../images/story_characters/characters/buddy/bg_battle_chara02.png) center top no-repeat;
}
#characters #mainCol .buddy #chara02 .inner + .inner .imgChara {
  top: -100px;
  left: -360px;
}
#characters #mainCol .buddy #chara02 .bx-wrapper + p + img + .bx-wrapper {
  margin: 15px 0 -240px auto;
}
#characters #mainCol .buddy #chara02 .bx-wrapper + p + img + .bx-wrapper + img {
  margin-bottom: 90px;
  margin-right: 425px;
}
#characters #mainCol .buddy #chara03 {
  background: url("../images/story_characters/characters/buddy/bg_chara03.png") no-repeat;
}
#characters #mainCol .buddy #chara03 .inner + .inner {
  background: url(../images/story_characters/characters/buddy/bg_battle_chara03.png) center top no-repeat;
}
#characters #mainCol .buddy #chara03 .inner + .inner .imgChara {
  top: -105px;
  left: 35px;
}
#characters #mainCol .buddy #chara04 {
  margin-top: -10px;
  background: url("../images/story_characters/characters/buddy/bg_chara04.png") no-repeat;
}
#characters #mainCol .buddy #chara04 .clearfix {
  zoom: 1;
  margin-top: 180px;
}
#characters #mainCol .buddy #chara04 .clearfix:before, #characters #mainCol .buddy #chara04 .clearfix:after {
  content: "";
  display: table;
}
#characters #mainCol .buddy #chara04 .clearfix:after {
  clear: both;
}
#characters #mainCol .buddy #chara04 .clearfix img {
  float: left;
}
#characters #mainCol .buddy #chara04 .clearfix img + img {
  float: right;
}
#characters #mainCol .buddy #chara04 .bx-wrapper {
  margin: 15px 0 -240px auto;
}
#characters #mainCol .buddy #chara04 .bx-wrapper + img {
  margin-bottom: 30px;
}
#characters #mainCol .buddy #chara04 .bx-wrapper + .bx-wrapper {
  margin: 8px auto 55px 0;
}
#characters #mainCol .buddy #chara04 .inner + .inner {
  background: url(../images/story_characters/characters/buddy/bg_battle_chara04.png) center top no-repeat, url(../images/story_characters/characters/buddy/bg_battle_chara05.png) center 1650px no-repeat;
  background-size: 100% auto,100% auto !important;
}
#characters #mainCol .buddy #chara04 .inner + .inner .imgChara {
  top: -130px;
  left: -290px;
}
#characters #mainCol .buddy #chara04 .inner + .inner .battleCol + .battleCol {
  padding-top: 30px;
}
#characters #mainCol .buddy #chara04 .inner + .inner .battleCol + .battleCol .imgChara {
  top: -5px;
  left: 0px;
}
#characters #mainCol .buddy #chara06 {
  background: url("../images/story_characters/characters/buddy/bg_chara06.png") no-repeat;
}
#characters #mainCol .buddy #chara06 .inner + .inner {
  background: url(../images/story_characters/characters/buddy/bg_battle_chara06.png) center top no-repeat;
}
#characters #mainCol .buddy #chara06 .inner + .inner .imgChara {
  top: -150px;
  left: -170px;
}
#characters #mainCol .buddy > li {
  position: relative;
  display: none;
  background-position: top right !important;
  background-size: 100% auto !important;
  margin-top: -5%;
}
@media screen and (max-width: 1600px) {
  #characters #mainCol .buddy > li {
    background-position: center top !important;
    background-size: 1600px auto !important;
  }
}
#characters #mainCol .buddy > li .inner + .inner {
  background-size: 100% auto !important;
  border-top: 1px solid rgba(255, 255, 255, 0.5);
}
#characters #mainCol .linkOther {
  display: block;
  background: rgba(0, 0, 0, 0.7);
  padding: 25px 0;
  margin: -60px 0 140px;
}
#characters #mainCol .other #chara01 {
  background: url("../images/story_characters/characters/other/bg_chara01.png?ver=2") top right no-repeat;
  background-size: 100% auto;
  padding-top: 35%;
}
#characters #mainCol .other #chara01 .inner div {
  top: 33%;
  left: 0;
}
#characters #mainCol .other #chara02 {
  background: url("../images/story_characters/characters/other/bg_chara02.png") top left no-repeat;
  background-size: 100% auto;
  padding-top: 42.7%;
  margin-top: -5%;
}
#characters #mainCol .other #chara02 .inner div {
  top: 31%;
  right: 0;
  text-align: right;
}
#characters #mainCol .other #chara03 {
  background: url("../images/story_characters/characters/other/bg_chara03.png") top right no-repeat;
  background-size: 100% auto;
  padding-top: 39.5%;
  margin-top: -2.5%;
}
#characters #mainCol .other #chara03 .inner div {
  top: 20%;
  right: 0;
}
#characters #mainCol .other #chara04 {
  background: url("../images/story_characters/characters/other/bg_chara04.png") top left no-repeat;
  background-size: 100% auto;
  padding-top: 41.5%;
  margin-top: -4.3%;
}
#characters #mainCol .other #chara04 .inner div {
  top: 25%;
  left: 0;
  text-align: right;
}
#characters #mainCol .other #chara05 {
  background: url("../images/story_characters/characters/other/bg_chara05.png") top right no-repeat;
  background-size: 100% auto;
  padding-top: 42%;
  margin-top: -5.5%;
}
#characters #mainCol .other #chara05 .inner div {
  top: 23%;
  right: 0;
  text-align: right;
}
#characters #mainCol .other #chara06 {
  background: url("../images/story_characters/characters/other/bg_chara06.png") top left no-repeat;
  background-size: 100% auto;
  padding-top: 42%;
  margin-top: -3.4%;
}
#characters #mainCol .other #chara06 .inner div {
  top: 28%;
  left: 0;
}
#characters #mainCol .other #chara07 {
  background: url("../images/story_characters/characters/other/bg_chara07.png") top right no-repeat;
  background-size: 100% auto;
  padding-top: 41%;
  margin-top: -6%;
}
#characters #mainCol .other #chara07 .inner div {
  top: 30%;
  right: 0;
}
#characters #mainCol .other #chara08 {
  background: url("../images/story_characters/characters/other/bg_chara08.png?ver02") top left no-repeat;
  background-size: 100% auto;
  padding-top: 41%;
  margin-top: -3.0%;
}
#characters #mainCol .other #chara08 .inner div {
  top: 30%;
  left: 0;
}
#characters #mainCol .other #chara09 {
  background: url("../images/story_characters/characters/other/bg_chara09.png") top left no-repeat;
  background-size: 100% auto;
  padding-top: 41%;
  margin-top: -4.7%;
}
#characters #mainCol .other #chara09 .inner div {
  top: 31%;
  right: 0;
  text-align: right;
}
#characters #mainCol .other #chara10 {
  background: url("../images/story_characters/characters/other/bg_chara10.png") top left no-repeat;
  background-size: 100% auto;
  padding-top: 41%;
  margin-top: -3.1%;
}
#characters #mainCol .other #chara10 .inner div {
  top: 11%;
  left: 0;
}
#characters #mainCol .successor #chara01 {
  background: url("../images/story_characters/successor/bg_chara01.png") top right no-repeat;
  background-size: 100% auto;
  padding-top: 31.4%;
}
#characters #mainCol .successor #chara01 .inner div {
  top: 35%;
  left: 0;
}
#characters #mainCol .successor #chara02 {
  background: url("../images/story_characters/successor/bg_chara02.png") top left no-repeat;
  background-size: 100% auto;
  padding-top: 42.7%;
  margin-top: -4.5%;
}
#characters #mainCol .successor #chara02 .inner div {
  top: 30%;
  right: 0;
  text-align: right;
}
#characters #mainCol .successor #chara03 {
  background: url("../images/story_characters/successor/bg_chara03.png") top left no-repeat;
  background-size: 100% auto;
  padding-top: 37%;
  margin-top: -4.0%;
}
#characters #mainCol .successor #chara03 .inner div {
  top: 30%;
  left: 0;
}
#characters #mainCol p {
  width: 1000px;
  margin: 30px auto 40px;
  text-align: left;
}