@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 {
    padding-bottom: 10%;
  }
  #main .h1_tit {
    background: url(../images/chart/sp/h1_tit_sp.png) no-repeat center center;
    background-size: contain;
    margin: 0 auto;
    width: 87.5%;
    padding-top: 15%;
    text-indent: -9999px;
    overflow: hidden;
  }
  #main #chartImg {
    background: #000 url(../images/chart/bg.gif) repeat;
    padding: 6.25% 0;
  }
  #main #chartImg .chart {
    text-align: center;
  }
  #main #chartImg .chart img {
    width: 93.75%;
    height: auto;
  }
  #main #charaList .chara_list {
    margin: 0 auto;
    padding-top: 8.5%;
    width: 87.5%;
  }
  #main #charaList .chara_list .chara {
    margin-bottom: 30px;
    border: 1px solid #a90000;
    overflow: hidden;
    *zoom: 1;
  }
  #main #charaList .chara_list .chara .photo {
    padding: 3% 0;
    width: 53%;
    text-align: center;
    float: left;
  }
  #main #charaList .chara_list .chara .photo img {
    width: 83%;
    height: auto;
  }
  #main #charaList .chara_list .chara h2 {
    margin-left: 54%;
    padding-top: 16%;
  }
  #main #charaList .chara_list .chara h2 img {
    height: auto;
  }
  #main #charaList .chara_list .chara p {
    margin: 0 3.5%;
    padding: 3.5% 0;
    border-top: 1px dotted #000;
    clear: both;
    font-family: Georgia,游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;
    font-size: 16px;
    line-height: 1.8em;
  }
  #main #charaList .chara_list .chara#chara01 h2 img {
    width: 82.31%;
  }
  #main #charaList .chara_list .chara#chara02 h2 img {
    width: 80.38%;
  }
  #main #charaList .chara_list .chara#chara03 h2 img {
    width: 81.53%;
  }
  #main #charaList .chara_list .chara#chara04 h2 img {
    width: 79.23%;
  }
  #main #charaList .chara_list .chara#chara05 h2 img {
    width: 89.61%;
  }
  #main #charaList .chara_list .chara#chara06 h2 img {
    width: 82.69%;
  }
  #main #charaList .chara_list .chara#chara07 h2 img {
    width: 81.92%;
  }
  #main #charaList .chara_list .chara#chara08 h2 img {
    width: 81.92%;
  }
  #main #charaList .chara_list .chara#chara09 h2 img {
    width: 69.61%;
  }
  #main #charaList .chara_list .chara#chara10 h2 img {
    width: 92.69%;
  }
  #main #charaList .chara_list .chara#chara11 h2 img {
    width: 53.07%;
  }
}
@media screen and (min-width: 700px) {
  #main {
    /* =====================================================================
    *    相関図
    * =================================================================== */
    /* =====================================================================
    *    キャラクター一覧
    * =================================================================== */
  }
  #main .mainInner {
    padding-top: 90px;
    padding-bottom: 50px;
  }
  #main .h1_tit {
    background: url(../images/chart/h1_tit.png) no-repeat center center;
    margin: 0 auto 50px;
    width: 960px;
    height: 46px;
    text-indent: -9999px;
    overflow: hidden;
  }
  #main .inner .img_sp {
    display: none;
  }
  #main #chartImg {
    background: #000 url(../images/chart/bg.gif) repeat;
  }
  #main #chartImg .chart {
    background: url(../images/chart/chart_img0222.png) no-repeat center center;
    margin: 0 auto;
    width: 960px;
    height: 1250px;
  }
  #main #charaList .chara_list {
    margin: 0 auto;
    padding-top: 50px;
    width: 960px;
  }
  #main #charaList .chara_list .chara {
    margin-bottom: 30px;
    border: 1px solid #a90000;
    overflow: hidden;
    *zoom: 1;
  }
  #main #charaList .chara_list .chara .photo {
    height: 298px;
    width: 244px;
    float: left;
  }
  #main #charaList .chara_list .chara h2, #main #charaList .chara_list .chara p {
    margin-left: 274px;
    margin-right: 30px;
  }
  #main #charaList .chara_list .chara h2 {
    padding: 30px 0 15px;
    height: 28px;
    border-bottom: 1px dotted #000;
  }
  #main #charaList .chara_list .chara p {
    padding: 15px 0;
    font-family: Georgia,游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;
    font-size: 18px;
    line-height: 1.8em;
  }
  #main #charaList .chara_list .chara#chara01 .photo {
    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 left center;
  }
  #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 left center;
  }
  #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 left center;
  }
  #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 left center;
  }
  #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 left center;
  }
  #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 left center;
  }
  #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 left center;
  }
  #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 left center;
  }
  #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 left center;
  }
  #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 left center;
  }
  #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 left center;
  }
}