/* CSS Document */
.nav-sprite {
  background-image: url('../img/nav-sb453f8a35d.png');
  background-repeat: no-repeat;
}

#contents {
  min-height: 1080px;
}

#contents_in {
  width: 769px;
  min-height: 400px;
  margin: 0 auto;
  padding: 0 38px 40px 0;
  position: relative;
}

.character {
  background: url(../img/bgChara.png) no-repeat;
}

nav {
  /*display: none;*/
}

.select_character {
  position: absolute;
  left: -88px;
  top: 38px;
  width: 88px;
}

.character_list {
  width: 88px;
  height: 52px;
  cursor: pointer;
  transition: all .3s ease;
  margin-left: 14px;
  opacity: .6;
}
.character_list:hover {
  margin-left: 4px;
}
.character_list.current {
  opacity: 1;
  margin-left: 4px;
  cursor: default;
}

.character_area {
  width: 720px;
  height: 636px;
  padding: 10px 8px 13px;
}

#pageflip {
  position: absolute;
  z-index: 100;
}

#pages, .page {
  width: 722px;
  height: 633px;
}

.page {
  position: absolute;
  overflow: hidden;
  z-index: 1;
  display: none;
}
.page.active {
  z-index: 3;
}
.page.next {
  z-index: 2;
}

.chara_nav {
  width: 276px;
  margin: 50px auto 0;
}

.btnNav {
  width: 130px;
  height: 37px;
  display: inline-block;
  cursor: pointer;
}
.btnNav.prev {
  background-position: 0 -74px;
  margin-right: 10px;
}
.btnNav.prev:not(.off):hover {
  background-position: 0 -111px;
}
.btnNav.next {
  background-position: 0 0;
}
.btnNav.next:not(.off):hover {
  background-position: 0 -37px;
}
.btnNav.off {
  cursor: default;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
  opacity: 0.6;
}

.character_box {
  position: relative;
}

.character_scene, .character_pic {
  position: absolute;
  top: 0;
  left: 0;
}

.character_pic {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
}

.chara_changeScene {
  position: absolute;
  right: 130px;
  top: 20px;
  z-index: 99999;
}

.chara_sceneList {
  width: 34px;
  height: 34px;
  float: left;
  margin-left: 5px;
  cursor: pointer;
}
.chara_sceneList:first-child {
  margin-left: 0;
}

.scene_one {
  background: url(../img/btn1.png) no-repeat;
}
.scene_one.current {
  background: url(../img/btn1_o.png) no-repeat;
}
.scene_one:hover {
  background: url(../img/btn1_o.png) no-repeat;
}

.scene_two {
  background: url(../img/btn2.png) no-repeat;
}
.scene_two.current {
  background: url(../img/btn2_o.png) no-repeat;
}
.scene_two:hover {
  background: url(../img/btn2_o.png) no-repeat;
}