@charset "UTF-8";
/*import*/
/* コンパスの機能を全部インポート 基本的にはこれだけでOKだと思います。 */
/**/
/**/
/**/
/*----------------------------------------------------
container
----------------------------------------------------*/
#container {
  width: 100%;
  height: 1180px;
}

/*----------------------------------------------------
top
----------------------------------------------------*/
#top {
  /**/
  /**/
}
#top h2 {
  position: absolute;
  top: 14px;
  right: 160px;
}
#top #topBg {
  width: 100%;
  height: 949px;
  position: absolute;
  top: 0;
  left: 0;
  min-width: 1050px;
  background: url(/hsd/images/top/character.png) no-repeat top center;
}
#top #newsArea {
  position: absolute;
  top: 758px;
  left: 25px;
  width: 330px;
  height: 166px;
  background: url(/hsd/images/top/newsBg.png) no-repeat;
}
#top #newsArea #newsChara {
  position: absolute;
  top: -4px;
  right: 30px;
}
#top #newsArea #newsParent {
  padding: 50px 30px 0 35px;
}
#top #newsArea #newsParent #newsSlider {
  position: relative;
  height: 105px;
  margin: 0;
  overflow: hidden;
}
#top #newsArea #newsParent #newsSlider dl {
  text-align: left;
  margin: 0px 0 8px 0;
}
#top #newsArea #newsParent #newsSlider dl dt {
  font-size: 12px;
  font-size: 1.2rem;
  line-height: 18px;
  line-height: 1.8rem;
}
#top #newsArea #newsParent #newsSlider dl dd {
  font-size: 12px;
  font-size: 1.2rem;
  line-height: 18px;
  line-height: 1.8rem;
  margin-right: 20px;
  color: #ff3366;
}
#top #cdArea {
  position: absolute;
  top: 865px;
  left: 345px;
  width: 630px;
  height: 63px;
}
#top #movieBtn {
  position: absolute;
  /* top: 610px;
  right: 54px; */
  top: 620px;
  left: 1005px;
  cursor: pointer;
}
#top #movieBtn #movieIcn {
  position: relative;
  margin-top: 45px;
}
#top #movieBtn #movieChara {
  position: relative;
  margin-left: -28px;
  top: 50px;
}
#top #bannerArea {
  position: absolute;
  top: 676px;
  left: 843px;
  overflow: hidden;
}
#top #bannerArea a {
  display: block;
  text-align: left;
  text-decoration: none;
  position: relative;
  margin-bottom: 7px;
}
#top #bannerArea a img {
  cursor: pointer;
}
#top #bannerArea a span {
  display: block;
  position: absolute;
  top: 7px;
  right: 0px;
}
#top #cdArea a#bannerLink2 {
    display: inline-table;   
}
#top #cdArea a#bannerLink3 {
    display: inline-table;
    padding-left: 5px;
}
#top #cdArea a#bannerLink4 {
    display: inline-table;
    padding-left: 5px;
}
#top #bannerArea a#rMusic {
    margin-left: 140px;
    margin-top: 95px;
}
#top #bannerArea a#bannerMusic {
    margin-left: 140px;   
}
#top #bannerArea a#rMusic img:hover {
  opacity: 0.7;
  filter: alpha(opacity=70);
  /* ie lt 8 */
  -ms-filter: "alpha(opacity=$opacityIE)";
  /* ie 8 */
  zoom: 1;
}
#top #bannerArea a#bannerLink img:hover {
  opacity: 0.7;
  filter: alpha(opacity=70);
  /* ie lt 8 */
  -ms-filter: "alpha(opacity=$opacityIE)";
  /* ie 8 */
  zoom: 1;
}
#top #bannerArea a#bannerLink4 img:hover {
  opacity: 0.7;
  filter: alpha(opacity=70);
  /* ie lt 8 */
  -ms-filter: "alpha(opacity=$opacityIE)";
  /* ie 8 */
  zoom: 1;
}
#top #bannerArea a#bannerLink4 img:hover {
  opacity: 0.7;
  filter: alpha(opacity=70);
  /* ie lt 8 */
  -ms-filter: "alpha(opacity=$opacityIE)";
  /* ie 8 */
  zoom: 1;
}
#top #bannerArea a#bannerLink3 img:hover {
  opacity: 0.7;
  filter: alpha(opacity=70);
  /* ie lt 8 */
  -ms-filter: "alpha(opacity=$opacityIE)";
  /* ie 8 */
  zoom: 1;
}
#top #bannerArea a#bannerLink3 img:hover {
  opacity: 0.7;
  filter: alpha(opacity=70);
  /* ie lt 8 */
  -ms-filter: "alpha(opacity=$opacityIE)";
  /* ie 8 */
  zoom: 1;
}
#top #bannerArea a#bannerLink2 img:hover {
  opacity: 0.7;
  filter: alpha(opacity=70);
  /* ie lt 8 */
  -ms-filter: "alpha(opacity=$opacityIE)";
  /* ie 8 */
  zoom: 1;
}
#top #bannerArea a#bannerLink2 img:hover {
  opacity: 0.7;
  filter: alpha(opacity=70);
  /* ie lt 8 */
  -ms-filter: "alpha(opacity=$opacityIE)";
  /* ie 8 */
  zoom: 1;
}
#top #countdown {
  position: absolute;
  /* top: 634px;
  right: 418px; */
  top: 520px;
  left: 836px;
}
#top #countdown div {
  position: absolute;
  top: 0;
  left: 0;
}
#top #countdown div img {
  display: none;
}
#top #countdown #countTxt {
  top: 33px;
  left: 8px;
}
#top #countdown #countChara {
  top: 5px;
  left: 106px;
}
#top #countdown #countBtn {
  cursor: pointer;
  top: 96px;
  left: 39px;
}
#top #movieArea {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  cursor: pointer;
  z-index: 100;
  display: none;
}
#top #movieArea #movieInner {
  position: relative;
  width: 1050px;
  margin: 0 auto;
  text-align: center;
  top: 300px;
}
#top #movieArea #movie_close {
  position: absolute;
  top: -35px;
  left: 850px;
}
#top #movieArea #movie_close img {
  cursor: pointer;
}

/*----------------------------------------------------
second
----------------------------------------------------*/
.second .secBox {
  position: absolute;
  top: 54px;
  right: 100px;
  background: url(/hsd/images/common/frameBg.png) no-repeat;
  width: 680px;
  height: 1226px;
  color: #221815;
}
.second .secBox h2 {
  text-align: left;
  margin: 26px 8px;
}
.second .secBox > p {
  font-size: 12px;
  font-size: 1.2rem;
  margin-top: 25px;
}
.second .secBox section {
  text-align: left;
  margin: 30px 76px 20px 76px;
}
.second .secBox section .sectionInner {
  clear: both;
  margin: 5px 41px;
  overflow: hidden;
}
.second .secBox section .sectionInner ul {
  margin-top: 8px;
  overflow: hidden;
}
.second .secBox section .sectionInner ul#bnr0 li {
  float: left;
  margin: 0 13px 0 2px;
}
.second .secBox section .sectionInner ul#bnr1 li {
  float: left;
  margin: 0 13px 13px 2px;
}
.second .secBox section .sectionInner ul#bnr1 li.mb0 {
  margin-bottom: 0;
}
.second .secBox section .sectionInner ul#bnr2 li {
  float: left;
  margin: 0 13px 0 2px;
}
.second .secBox section .sectionInner ul#bnr3 li {
  float: left;
  margin: 0 12px 0 2px;
}
.second .secBox section .sectionInner .wallpaper {
  float: left;
  margin: 10px 23px 0 2px;
}
.second .secBox section .sectionInner .wallpaper li {
  margin-bottom: 4px;
}
.second .secBox section .sectionInner p {
  font-size: 15px;
  font-size: 1.5rem;
  color: #14a9d0;
  margin-top: 16px;
}
.second .secBox section .sectionInner p.shop_p {
  margin-top: 10px;
  line-height: 22px;
  line-height: 2.2rem;
}
.second .secBox section .sectionInner dl {
  text-align: left;
  margin: 10px 0 20px 0;
}
.second .secBox section .sectionInner dl dt {
  position: relative;
  width: 198px;
  height: 36px;
  line-height: 36px;
  line-height: 3.6rem;
  background: url(/hsd/images/shop/al_bg.png) no-repeat left center;
  padding-left: 20px;
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 38px;
  line-height: 3.8rem;
  font-weight: bold;
}
.second .secBox section .sectionInner dl dt a {
  display: block;
  color: #000;
  text-decoration: none;
  width: 198px !important;
}
.second .secBox section .sectionInner dl dd {
  clear: both;
  font-size: 15px;
  font-size: 1.5rem;
  line-height: 22px;
  line-height: 2.2rem;
  color: #14a9d0;
  margin-top: 7px;
}
.second .secBox section .sectionInner dl dd p {
  margin: 0;
  padding: 0;
  margin-bottom: 5px;
  font-size: 12px;
  font-size: 1.2rem;
  line-height: 18px;
  line-height: 1.8rem;
  color: #000000;
}
.second .secBox section .sectionInner .shopBlock {
  clear: both;
  overflow: hidden;
}
.second .secBox section .sectionInner .shopBlock dl {
  width: 200px;
  float: left;
  margin: 9px 0 6px 45px;
}
.second .secBox section .sectionInner .shopBlock dl:first-child {
  margin-left: 0;
}
.second .secBox section .sectionInner span {
  display: block;
  font-size: 12px;
  font-size: 1.2rem;
  line-height: 16px;
  line-height: 1.6rem;
  color: #221815;
}
.second #charaBoard {
  position: absolute;
  top: 54px;
  right: 60px;
  background: url(/hsd/images/chara/board.png) no-repeat;
  width: 840px;
  height: 837px;
  color: #221815;
}
.second #charaBoard .charaBox {
  position: absolute;
  top: 0;
  left: 0;
}
.second #charaBoard .charaBox div, .second #charaBoard .charaBox p, .second #charaBoard .charaBox h3 {
  position: absolute;
}
.second #charaBoard .charaBox .chBtn {
  cursor: pointer;
}
.second #charaBoard .charaBox .chBtn:hover {
  -webkit-animation-name: charaBoxHover;
  -moz-animation-name: charaBoxHover;
  -ms-animation-name: charaBoxHover;
  -o-animation-name: charaBoxHover;
  animation-name: charaBoxHover;
  -webkit-animation-duration: 1.5s;
  -moz-animation-duration: 1.5s;
  -ms-animation-duration: 1.5s;
  -o-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
  -ms-animation-timing-function: linear;
  -o-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  -ms-animation-iteration-count: 1;
  -o-animation-iteration-count: 1;
  animation-iteration-count: 1;
}
.second #charaBoard .charaBox#cBox1 .chBg {
  top: 48px;
  left: 41px;
}
.second #charaBoard .charaBox#cBox1 .chBtn {
  top: 49px;
  left: 44px;
}
.second #charaBoard .charaBox#cBox1 .chBtn:hover {
  -moz-transform-origin: 90px 20px;
  -ms-transform-origin: 90px 20px;
  -webkit-transform-origin: 90px 20px;
  transform-origin: 90px 20px;
}
.second #charaBoard .charaBox#cBox1 .chPin {
  top: 21px;
  left: 127px;
}
.second #charaBoard .charaBox#cBox2 .chBg {
  top: 69px;
  left: 274px;
}
.second #charaBoard .charaBox#cBox2 .chBtn {
  top: 70px;
  left: 280px;
}
.second #charaBoard .charaBox#cBox2 .chBtn:hover {
  -moz-transform-origin: 102px 12px;
  -ms-transform-origin: 102px 12px;
  -webkit-transform-origin: 102px 12px;
  transform-origin: 102px 12px;
}
.second #charaBoard .charaBox#cBox2 .chPin {
  top: 40px;
  left: 351px;
}
.second #charaBoard .charaBox#cBox3 .chBg {
  top: 41px;
  left: 538px;
}
.second #charaBoard .charaBox#cBox3 .chBtn {
  top: 49px;
  left: 532px;
}
.second #charaBoard .charaBox#cBox3 .chBtn:hover {
  -moz-transform-origin: 127px 18px;
  -ms-transform-origin: 127px 18px;
  -webkit-transform-origin: 127px 18px;
  transform-origin: 127px 18px;
}
.second #charaBoard .charaBox#cBox3 .chPin {
  top: 22px;
  left: 639px;
}
.second #charaBoard .charaBox#cBox4 .chBg {
  top: 386px;
  left: 128px;
}
.second #charaBoard .charaBox#cBox4 .chBtn {
  top: 383px;
  left: 39px;
}
.second #charaBoard .charaBox#cBox4 .chBtn:hover {
  -moz-transform-origin: 190px 14px;
  -ms-transform-origin: 190px 14px;
  -webkit-transform-origin: 190px 14px;
  transform-origin: 190px 14px;
}
.second #charaBoard .charaBox#cBox4 .chPin {
  top: 352px;
  left: 214px;
}
.second #charaBoard .charaBox#cBox5 .chBg {
  top: 370px;
  left: 370px;
}
.second #charaBoard .charaBox#cBox5 .chBtn {
  top: 360px;
  left: 341px;
}
.second #charaBoard .charaBox#cBox5 .chBtn:hover {
  -moz-transform-origin: 118px 20px;
  -ms-transform-origin: 118px 20px;
  -webkit-transform-origin: 118px 20px;
  transform-origin: 118px 20px;
}
.second #charaBoard .charaBox#cBox5 .chPin {
  top: 337px;
  left: 450px;
}
.second #charaBoard .charaBox#cBox6 .chBg {
  top: 395px;
  left: 604px;
}
.second #charaBoard .charaBox#cBox6 .chBtn {
  top: 387px;
  left: 537px;
}
.second #charaBoard .charaBox#cBox6 .chBtn:hover {
  -moz-transform-origin: 176px 20px;
  -ms-transform-origin: 176px 20px;
  -webkit-transform-origin: 176px 20px;
  transform-origin: 176px 20px;
}
.second #charaBoard .charaBox#cBox6 .chPin {
  top: 361px;
  left: 692px;
}

@keyframes charaBoxHover {
  0% {
    transform: rotate(0deg);
  }
  7% {
    transform: rotate(3deg);
  }
  14% {
    transform: rotate(0deg);
  }
  21% {
    transform: rotate(-3deg);
  }
  28% {
    transform: rotate(0deg);
  }
  35% {
    transform: rotate(2deg);
  }
  42% {
    transform: rotate(0deg);
  }
  49% {
    transform: rotate(-2deg);
  }
  56% {
    transform: rotate(0deg);
  }
  63% {
    transform: rotate(1deg);
  }
  70% {
    transform: rotate(0deg);
  }
  75% {
    transform: rotate(-1deg);
  }
  80% {
    transform: rotate(0deg);
  }
  85% {
    transform: rotate(0.5deg);
  }
  90% {
    transform: rotate(0deg);
  }
  95% {
    transform: rotate(-0.5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@-moz-keyframes charaBoxHover {
  0% {
    -moz-transform: rotate(0deg);
  }
  7% {
    -moz-transform: rotate(3deg);
  }
  14% {
    -moz-transform: rotate(0deg);
  }
  21% {
    -moz-transform: rotate(-3deg);
  }
  28% {
    -moz-transform: rotate(0deg);
  }
  35% {
    -moz-transform: rotate(2deg);
  }
  42% {
    -moz-transform: rotate(0deg);
  }
  49% {
    -moz-transform: rotate(-2deg);
  }
  56% {
    -moz-transform: rotate(0deg);
  }
  63% {
    -moz-transform: rotate(1deg);
  }
  70% {
    -moz-transform: rotate(0deg);
  }
  75% {
    -moz-transform: rotate(-1deg);
  }
  80% {
    -moz-transform: rotate(0deg);
  }
  85% {
    -moz-transform: rotate(0.5deg);
  }
  90% {
    -moz-transform: rotate(0deg);
  }
  95% {
    -moz-transform: rotate(-0.5deg);
  }
  100% {
    -moz-transform: rotate(0deg);
  }
}
@-webkit-keyframes charaBoxHover {
  0% {
    -webkit-transform: rotate(0deg);
  }
  7% {
    -webkit-transform: rotate(3deg);
  }
  14% {
    -webkit-transform: rotate(0deg);
  }
  21% {
    -webkit-transform: rotate(-3deg);
  }
  28% {
    -webkit-transform: rotate(0deg);
  }
  35% {
    -webkit-transform: rotate(2deg);
  }
  42% {
    -webkit-transform: rotate(0deg);
  }
  49% {
    -webkit-transform: rotate(-2deg);
  }
  56% {
    -webkit-transform: rotate(0deg);
  }
  63% {
    -webkit-transform: rotate(1deg);
  }
  70% {
    -webkit-transform: rotate(0deg);
  }
  75% {
    -webkit-transform: rotate(-1deg);
  }
  80% {
    -webkit-transform: rotate(0deg);
  }
  85% {
    -webkit-transform: rotate(0.5deg);
  }
  90% {
    -webkit-transform: rotate(0deg);
  }
  95% {
    -webkit-transform: rotate(-0.5deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
  }
}
@-o-keyframes charaBoxHover {
  0% {
    -o-transform: rotate(0deg);
  }
  7% {
    -o-transform: rotate(3deg);
  }
  14% {
    -o-transform: rotate(0deg);
  }
  21% {
    -o-transform: rotate(-3deg);
  }
  28% {
    -o-transform: rotate(0deg);
  }
  35% {
    -o-transform: rotate(2deg);
  }
  42% {
    -o-transform: rotate(0deg);
  }
  49% {
    -o-transform: rotate(-2deg);
  }
  56% {
    -o-transform: rotate(0deg);
  }
  63% {
    -o-transform: rotate(1deg);
  }
  70% {
    -o-transform: rotate(0deg);
  }
  75% {
    -o-transform: rotate(-1deg);
  }
  80% {
    -o-transform: rotate(0deg);
  }
  85% {
    -o-transform: rotate(0.5deg);
  }
  90% {
    -o-transform: rotate(0deg);
  }
  95% {
    -o-transform: rotate(-0.5deg);
  }
  100% {
    -o-transform: rotate(0deg);
  }
}
@-ms-keyframes charaBoxHover {
  0% {
    -ms-transform: rotate(0deg);
  }
  7% {
    -ms-transform: rotate(3deg);
  }
  14% {
    -ms-transform: rotate(0deg);
  }
  21% {
    -ms-transform: rotate(-3deg);
  }
  28% {
    -ms-transform: rotate(0deg);
  }
  35% {
    -ms-transform: rotate(2deg);
  }
  42% {
    -ms-transform: rotate(0deg);
  }
  49% {
    -ms-transform: rotate(-2deg);
  }
  56% {
    -ms-transform: rotate(0deg);
  }
  63% {
    -ms-transform: rotate(1deg);
  }
  70% {
    -ms-transform: rotate(0deg);
  }
  75% {
    -ms-transform: rotate(-1deg);
  }
  80% {
    -ms-transform: rotate(0deg);
  }
  85% {
    -ms-transform: rotate(0.5deg);
  }
  90% {
    -ms-transform: rotate(0deg);
  }
  95% {
    -ms-transform: rotate(-0.5deg);
  }
  100% {
    -ms-transform: rotate(0deg);
  }
}
.pageTop {
  position: absolute;
  bottom: -4px;
  right: 32px;
}

/*----------------------------------------------------
story
----------------------------------------------------*/
#story .secBox {
  background: url(/hsd/images/common/frameBg2.png) no-repeat;
  width: 680px;
  height: 988px;
}
#story .secBox h2 {
  margin: 26px 8px;
}
#story .secBox section#storySection {
  margin-left: 87px;
}
#story .secBox section#storySection h3 {
  padding-top: 0;
  margin-top: -3px;
  margin-bottom: 8px;
}
#story .secBox section#storySection div {
  margin-left: -12px;
  margin-bottom: 16px;
}
#story .secBox section#storySection p {
  margin-top: 44px;
}

/*----------------------------------------------------
shop
----------------------------------------------------*/
#shop {
  /*modal*/
}
#shop .secBox {
  background: url(/hsd/images/common/frameBg3.png) no-repeat;
  width: 680px;
  height: 1660px;
}
#shop .secBox a.shopBtn {
  cursor: pointer;
}
#shop #shopModal {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.01);
  z-index: 100;
  display: none;
}
#shop #shopModal #shopInner {
  position: relative;
  width: 600px;
  height: 420px;
  background: url(/hsd/images/shop/board.png) no-repeat;
  margin: 0 auto;
  text-align: center;
  top: 260px;
}
#shop #shopModal #shopInner p {
  position: absolute;
  top: 35px;
  left: 33px;
  display: none;
}
#shop #shopModal #shopInner #shop_close {
  position: absolute;
  top: 30px;
  right: 39px;
}
#shop #shopModal #shopInner #shop_close img {
  cursor: pointer;
}

/*----------------------------------------------------
chara
----------------------------------------------------*/
.chara .charaBg {
  width: 100%;
  height: 1230px;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  min-width: 1050px;
}
.chara .charaBg#bg1 {
  background: url(/hsd/images/chara/chara1/charaBg.png) no-repeat top center;
}
.chara .charaBg#bg2 {
  background: url(/hsd/images/chara/chara2/charaBg.png) no-repeat top center;
}
.chara .charaBg#bg3 {
  background: url(/hsd/images/chara/chara3/charaBg.png) no-repeat top center;
}
.chara .charaBg#bg4 {
  background: url(/hsd/images/chara/chara4/charaBg.png) no-repeat top center;
}
.chara .charaBg#bg5 {
  background: url(/hsd/images/chara/chara5/charaBg.png) no-repeat top center;
}
.chara .charaBg#bg6 {
  background: url(/hsd/images/chara/chara6/charaBg.png) no-repeat top center;
}
.chara .secBox {
  right: 155px;
  background: none;
  height: 1180px !important;
  text-align: left;
}
.chara .secBox #charaTi {
  position: relative;
  margin-top: 110px;
  margin-left: 5px;
  text-align: left;
}
.chara .secBox #charaTi h3 {
  margin: 0 32px;
  padding-top: 16px;
  position: relative;
  z-index: 1;
}
.chara .secBox section#charaMain {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  text-align: left;
}
.chara .secBox section#charaMain h2 {
  position: absolute;
  top: 88px;
  right: -125px;
}
.chara .secBox section#charaMain .charaImg {
  position: relative;
  top: 0;
  right: 0;
}
.chara .secBox section#charaMain .charaImg img {
  position: absolute;
}
.chara .secBox section#charaMain .charaImg img#imgAf {
  display: none;
}
.chara .secBox section#charaMain #charaBtn {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 20;
}
.chara .secBox section#charaMain #charaBtn img {
  cursor: pointer;
}
.chara .secBox section#charaMain.chImg1 {
  position: absolute;
  top: 0;
  right: 0;
}
.chara .secBox section#charaMain.chImg1 .charaImg {
  top: -15px;
  right: 311px;
}
.chara .secBox section#charaMain.chImg1 #charaBtn {
  top: 306px;
  right: 182px;
}
.chara .secBox section#charaMain.chImg2 {
  position: absolute;
  top: 0;
  right: 0;
}
.chara .secBox section#charaMain.chImg2 .charaImg {
  top: 55px;
  right: 345px;
}
.chara .secBox section#charaMain.chImg2 #charaBtn {
  top: 293px;
  right: 240px;
}
.chara .secBox section#charaMain.chImg3 {
  position: absolute;
  top: 0;
  right: 0;
}
.chara .secBox section#charaMain.chImg3 .charaImg {
  top: -15px;
  right: 303px;
}
.chara .secBox section#charaMain.chImg3 #charaBtn {
  top: 286px;
  right: 222px;
}
.chara .secBox section#charaMain.chImg4 {
  position: absolute;
  top: 0;
  right: 0;
}
.chara .secBox section#charaMain.chImg4 .charaImg {
  top: 18px;
  right: 324px;
}
.chara .secBox section#charaMain.chImg4 #charaBtn {
  top: 263px;
  right: 278px;
}
.chara .secBox section#charaMain.chImg5 {
  position: absolute;
  top: 0;
  right: 0;
}
.chara .secBox section#charaMain.chImg5 .charaImg {
  top: -13px;
  right: 344px;
}
.chara .secBox section#charaMain.chImg5 #charaBtn {
  top: 324px;
  right: 270px;
}
.chara .secBox section#charaMain.chImg6 {
  position: absolute;
  top: 0;
  right: 0;
}
.chara .secBox section#charaMain.chImg6 .charaImg {
  top: -13px;
  right: 385px;
}
.chara .secBox section#charaMain.chImg6 #charaBtn {
  top: 254px;
  right: 255px;
}
.chara .secBox section#charaMain.chImg6 h2 {
  right: -158px;
}
.chara .secBox #charaTxt {
  position: relative;
  text-align: left;
  margin: 20px 40px 14px 40px;
}
.chara .secBox #cdArea {
  text-align: left;
  margin: 30px 41px;
  overflow: hidden;
}
.chara .secBox #cdArea #cdLeft {
  float: left;
}
.chara .secBox #cdArea #cdRight {
  position: relative;
  float: left;
  margin-left: 5px;
  height: 163px;
}
.chara .secBox #cdArea #cdRight a {
  display: block;
  margin-bottom: 2px;
  text-decoration: none;
}
.chara .secBox #cdArea #cdRight .voicePlay {
  cursor: pointer;
}
.chara .secBox #cdArea #cdRight #buyBtn {
  position: absolute;
  bottom: -8px;
  left: -1px;
}
.chara .secBox #cdArea > p {
  clear: both;
  padding-top: 7px;
}
.chara .secBox #profileArea {
  position: relative;
  margin: 30px 41px;
}
.chara .secBox #profileArea p {
  text-align: left;
}
.chara .secBox #profileArea div {
  position: absolute;
}
.chara .secBox #profileArea div#charaDf1 {
  top: -40px;
  left: 248px;
}
.chara .secBox #profileArea div#charaDf2 {
  top: -34px;
  left: 240px;
}
.chara .secBox #profileArea div#charaDf3 {
  top: -40px;
  left: 247px;
}
.chara .secBox #profileArea div#charaDf4 {
  top: -36px;
  left: 250px;
}
.chara .secBox #profileArea div#charaDf5 {
  top: -42px;
  left: 213px;
}
.chara .secBox #profileArea div#charaDf6 {
  top: -20px;
  left: 195px;
}
.chara .secBox #charaNav {
  position: absolute;
  bottom: 30px;
  left: -180px;
}
.chara .secBox #charaNav ul {
  overflow: hidden;
}
.chara .secBox #charaNav ul li {
  position: relative;
  float: left;
  cursor: pointer;
}
.chara .secBox #charaNav ul li.ac {
  cursor: default;
}
.chara .secBox #charaNav div {
  position: absolute;
  top: 50px;
  left: 725px;
}
.chara .secBox #charaNav div a {
  cursor: pointer;
}
.chara .secBox #charaNav div img:hover {
  opacity: 0.7;
  filter: alpha(opacity=70);
  /* ie lt 8 */
  -ms-filter: "alpha(opacity=$opacityIE)";
  /* ie 8 */
  zoom: 1;
}