@charset "UTF-8";

/*
font-size list (base: 12px)
 67% =  8px
 75% =  9px
 83% = 10px
 92% = 11px        175% = 21px
100% = 12px        184% = 22px
108% = 13px        192% = 23px
117% = 14px        200% = 24px
125% = 15px        209% = 25px
133% = 16px        217% = 26px
142% = 17px
150% = 18px
159% = 19px
167% = 20px
*/

.contentBg {
  position: relative;
  width: 670px;
  height: 940px;
  background: url(/character/img/mainImg.jpg) no-repeat left 30px;
}
h4 { margin: 50px 0 0 30px; }
.charaSummary {
  position: absolute;
  cursor: pointer;
  -webkit-transition: 0.1s ease-out;
  -moz-transition: 0.1s ease-out;
  -ms-transition: 0.1s ease-out;
  -o-transition: 0.1s ease-out;
  transition: 0.1s ease-out;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 0 0;
  z-index: 10;
}
.haruka {
  top: 400px; left: 290px;
  width: 100px; height: 100px;
}
  .haruka:hover {
    width: 300px; height: 350px;
    left: 190px;
    background-position: center bottom;
    background-size: contain;
    background-image: url(/character/img/detail/haruka.png);
  }
.miki {
  top: 350px; left: 190px;
  width: 80px; height: 80px;
}
  .miki:hover {
    width: 300px; height: 370px;
    left: 30px;
    background-position: center bottom;
    background-size: contain;
    background-image: url(/character/img/detail/miki.png);
  }
.chihaya {
  top: 330px; left: 400px;
  width: 80px; height: 80px;
}
  .chihaya:hover {
    width: 300px; height: 400px;
    left: 340px;
    background-position: left bottom;
    background-size: contain;
    background-image: url(/character/img/detail/chihaya.png);
  }
.yayoi {
  top: 130px; left: 350px;
  width: 100px; height: 100px;
}
  .yayoi:hover {
    width: 360px; height: 250px;
    left: 40px;
    top: -20px;
    background-position: center bottom;
    background-size: contain;
    background-image: url(/character/img/detail/yayoi.png);
  }
.yukiho {
  top: 300px; left: 60px;
  width: 80px; height: 80px;
}
  .yukiho:hover {
    width: 302px; height: 380px;
    top: -10px; left: 60px;
    background-position: center top;
    background-size: contain;
    background-image: url(/character/img/detail/yukiho.png);
  }
.makoto {
  top: 300px; left: 550px;
  width: 50px; height: 50px;
}
  .makoto:hover {
    width: 450px; height: 260px;
    top: 100px; left: 190px;
    background-position: left 0;
    background-size: contain;
    background-image: url(/character/img/detail/makoto.png);
  }
.amimami {
  top: 150px; left: 160px;
  width: 150px; height: 90px;
}
  .amimami:hover {
    width: 600px; height: 430px;
    left: 30px;
    background-position: center bottom;
    background-size: contain;
    background-image: url(/character/img/detail/amimami.png);
  }
.iori {
  top: 240px; left: 310px;
  width: 80px; height: 80px;
}
  .iori:hover {
    width: 380px; height: 400px;
    left: 30px;
    background-position: left bottom;
    background-size: 300px 319px;
    background-image: url(/character/img/detail/iori.png);
  }
.azusa {
  top: 60px; left: 430px;
  width: 80px; height: 80px;
}
  .azusa:hover {
    width: 440px; height: 260px;
    left: 80px;
    background-position: left bottom;
    background-size: contain;
    background-image: url(/character/img/detail/azusa.png);
  }
.takane {
  top: 120px; left: 530px;
  width: 80px; height: 80px;
}
  .takane:hover {
    width: 400px; height: 260px;
    left: 190px;
    background-position: left bottom;
    background-size: contain;
    background-image: url(/character/img/detail/takane.png);
  }
.hibiki {
  top: 240px; left: 440px;
  width: 80px; height: 80px;
}
  .hibiki:hover {
    width: 440px; height: 260px;
    top: 140px; left: 100px;
    background-position: left 0;
    background-size: contain;
    background-image: url(/character/img/detail/hibiki.png);
  }
.ritsuko {
  top: 90px; left: 80px;
  width: 80px; height: 80px;
}
  .ritsuko:hover {
    height: 260px; width: 430px;
    left: 80px;
    background-position: right bottom;
    background-size: contain;
    background-image: url(/character/img/detail/ritsuko.png);
  }
.producer {
  top: 25px; left: 180px;
  width: 130px; height: 100px;
}
  .producer:hover {
    top: -30px;
    width: 450px; height: 169px;
    left: 190px;
    background-position: right 0;
    background-size: contain;
    background-image: url(/character/img/detail/producer.png);
  }