@charset "UTF-8";
/* CSS INFORMATION -====================================================
File name : chart.css
Description : 相関図ページCSS
===================================================================== */
/*width*/
/*tan-3.1*/
/*margin top*/
/*color*/
@media screen and (max-width: 699px) {
  #main {
    /* =====================================================================
    *    相関図
    * =================================================================== */
    /* =====================================================================
    *    キャラクター一覧
    * =================================================================== */
  }
  #main .mainInner {}
  #main .h1_tit {
    background: url(../images/chart/sp/h1_tit_sp.png) no-repeat center center;
    background-size: cover;
    margin: 0 auto;
    width: 22.1875%;
    padding-top: 13%;
    height: 0;
    text-indent: -9999px;
    overflow: hidden;
  }
  #main .inner{
    padding-top: 4.6875%;
  }
  #main #chartImg {}
  #main #chartImg .chart {
    text-align: center;
  }
  #main #chartImg .chart img {
    width: 95.3125%;
    height: auto;
  }
  #main #charaList .chara_list {
    margin: 0 auto;
    padding-top: 5%;
    width: 95.3125%;
  }
  #main #charaList .chara_list .chara {
    margin-bottom: 2.34375%;
    overflow: hidden;
    *zoom: 1;
  }
  #main #charaList .chara_list .chara:last-of-type{
    margin-bottom: 0;
  }
  #main #charaList .chara_list .chara.female {
    background: #e50065;
  }
  #main #charaList .chara_list .chara.male {
    background: #2ea6dd;
  }
  #main #charaList .chara_list .chara .photo {
    width: 39.84375%;
    text-align: center;
    float: left;
  }
  #main #charaList .chara_list .chara#chara01 .photo{
    width: 50%;
  }
  #main #charaList .chara_list .chara .photo img {
    width: 100%;
    height: auto;
  }
  #main #charaList .chara_list .chara h2 {
    margin-left: 39.84375%;
    padding-top: 3.125%;
  }
  #main #charaList .chara_list .chara h2 img {
    width: 60%;
    height: auto;
  }
  #main #charaList .chara_list .chara p {
    margin: 0 3.125%;
    padding: 2.5% 0 3.125%;
    clear: both;
    font-size: 16px;
    line-height: 1.8em;
    color: #fff;
  }
  #main #charaList .chara_list .chara#chara03 h2 img {
    width: 65%;
  }
  #main #charaList .chara_list .chara#chara04 h2 img {
    width: 70%;
  }
  #main #charaList .chara_list .chara#chara07 h2 img {
    width: 85%;
  }
  #main #charaList .chara_list .chara#chara09 h2 img {
    width: 48%;
  }
}
@media screen and (min-width: 700px) {
  #main {
    /* =====================================================================
    *    相関図
    * =================================================================== */
    /* =====================================================================
    *    キャラクター一覧
    * =================================================================== */
  }
  #main .mainInner {
    padding: 84px 0 88px;
    background: url(../images/top/main_bg.png);
  }
  #main .h1_tit {
    background: url(../images/chart/h1_tit.png) no-repeat center center;
    background-size: cover;
    margin: 0 auto 30px;
    width: 131px;
    height: 77px;
    text-indent: -9999px;
    overflow: hidden;
  }
  #main .inner .img_sp {
    display: none;
  }
  #main #chartImg {
    background: url(../images/chart/chart_img.png) no-repeat center center;
    background-size: 1100px 1040px;
    background-position: center;
  }
  #main #chartImg .chart {
    margin: 0 auto;
    width: 1100px;
    height: 1040px;
  }
  #main #charaList .chara_list {
    margin: 0 auto;
    padding-top: 45px;
    width: 1000px;
  }
  #main #charaList .chara_list .chara {
    margin-bottom: 35px;
    overflow: hidden;
    *zoom: 1;
  }
  #main #charaList .chara_list .chara:last-of-type{
    margin-bottom: 0;
  }
  #main #charaList .chara_list .chara.male{
    background: #2ea6dd;
  }
  #main #charaList .chara_list .chara.female{
    background: #e50065;
  }
  #main #charaList .chara_list .chara .photo {
    height: 279px;
    width: 220px;
    float: left;
  }
  #main #charaList .chara_list .chara h2, #main #charaList .chara_list .chara p {
    margin-left: 255px;
  }
  #main #charaList .chara_list .chara h2 {
    padding: 30px 0 15px;
    height: 27px;
  }
  #main #charaList .chara_list .chara p {
    font-size: 18px;
    line-height: 1.5em;
    padding-right: 45px;
    color: #fff;
  }
  #main #charaList .chara_list .chara#chara01 .photo {
    width: 380px;
    background: url(../images/chart/img_01.png) no-repeat center top;
  }
  #main #charaList .chara_list .chara#chara01 h2 {
    background: url(../images/chart/name_01.png) no-repeat 0px 30px;
    margin-left: 410px;
  }
  #main #charaList .chara_list .chara#chara01 p{
    margin-left: 410px;
  }
  #main #charaList .chara_list .chara#chara02 .photo {
    background: url(../images/chart/img_02.png) no-repeat center top;
  }
  #main #charaList .chara_list .chara#chara02 h2 {
    background: url(../images/chart/name_02.png) no-repeat 0px 30px;
  }
  #main #charaList .chara_list .chara#chara03 .photo {
    background: url(../images/chart/img_03.png) no-repeat center top;
  }
  #main #charaList .chara_list .chara#chara03 h2 {
    background: url(../images/chart/name_03.png) no-repeat 0px 30px;
  }
  #main #charaList .chara_list .chara#chara04 .photo {
    background: url(../images/chart/img_04.png) no-repeat center top;
  }
  #main #charaList .chara_list .chara#chara04 h2 {
    background: url(../images/chart/name_04.png) no-repeat 0px 30px;
  }
  #main #charaList .chara_list .chara#chara05 .photo {
    background: url(../images/chart/img_05.png) no-repeat center top;
  }
  #main #charaList .chara_list .chara#chara05 h2 {
    background: url(../images/chart/name_05.png) no-repeat 0px 30px;
  }
  #main #charaList .chara_list .chara#chara06 .photo {
    background: url(../images/chart/img_06.png) no-repeat center top;
  }
  #main #charaList .chara_list .chara#chara06 h2 {
    background: url(../images/chart/name_06.png) no-repeat 0px 30px;
  }
  #main #charaList .chara_list .chara#chara07 .photo {
    background: url(../images/chart/img_07.png) no-repeat center top;
  }
  #main #charaList .chara_list .chara#chara07 h2 {
    background: url(../images/chart/name_07.png) no-repeat 0px 30px;
  }
  #main #charaList .chara_list .chara#chara08 .photo {
    background: url(../images/chart/img_08.png) no-repeat center top;
  }
  #main #charaList .chara_list .chara#chara08 h2 {
    background: url(../images/chart/name_08.png) no-repeat 0px 30px;
  }
  #main #charaList .chara_list .chara#chara09 .photo {
    background: url(../images/chart/img_09.png) no-repeat center top;
  }
  #main #charaList .chara_list .chara#chara09 h2 {
    background: url(../images/chart/name_09.png) no-repeat 0px 30px;
  }
  #main #charaList .chara_list .chara#chara10 .photo {
    background: url(../images/chart/img_10.png) no-repeat center top;
  }
  #main #charaList .chara_list .chara#chara10 h2 {
    background: url(../images/chart/name_10.png) no-repeat 0px 30px;
  }
  #main #charaList .chara_list .chara#chara11 .photo {
    background: url(../images/chart/img_11.png) no-repeat center top;
  }
  #main #charaList .chara_list .chara#chara11 h2 {
    background: url(../images/chart/name_11.png) no-repeat 0px 30px;
  }
}