/** -------------------------------
 * section | gradeRanking
 */
.section#gradeRanking {
  margin-top: 3%;
}
  .section#gradeRanking > .wrap {
    padding-bottom: 3.281%;
  }
    .section#gradeRanking .content {
      margin-top: 2.4%;
    }
      .section#gradeRanking .content > .wrap {
        position: relative;
      }
        .section#gradeRanking .swiper-container {

        }
          .section#gradeRanking .swiper-wrapper {

          }
            .section#gradeRanking .swiper-slide {
              display: block;
              width: 31.624%;
              margin-left: 2.564%;
              float: left;
            }
            .section#gradeRanking .swiper-slide:first-child {
              margin-left: 0;
            }
              .section#gradeRanking .content .item {
                position: relative;
                display: block;
                width: 100%;
                padding-top: 35.135%;
                color: #000;
              }
                .section#gradeRanking .content .item .image {
                  position: absolute;
                  left: 0;
                  top: 30px;
                  right: 0;
                  bottom: 0;
                  display: block;
                  background-repeat: no-repeat;
                  background-position: left;
                  background-size: contain;
                }
                .section#gradeRanking .content .item01 .image { background-image: url(../IMAGES/PC/gradeRanking_img01.jpg); }
                .section#gradeRanking .content .item02 .image { background-image: url(../IMAGES/PC/gradeRanking_img02.jpg); }
                .section#gradeRanking .content .item03 .image { background-image: url(../IMAGES/PC/gradeRanking_img03.jpg); }
                .section#gradeRanking .content .item .num {
                  position: absolute;
                  left: 0;
                  top: 0;
                  display: table;
                  width: 30px;
                  height: 30px;
                  background-color: #fff;
                  border: 1px solid #b4b4b4;
                }
                  .section#gradeRanking .content .item .num em {
                    display: table-cell;
                    font-size: 1.6em;
                    font-style: normal;
                    font-weight: bold;
                    color: #666;
                    line-height: 1.1;
                    text-align: center;
                    vertical-align: middle;
                  }
                .section#gradeRanking .content .item dl {
                  position: absolute;
                  left: 50%;
                  top: 6%;
                }
                .section#gradeRanking .content .item:hover {
                  /*color: #c3002c;*/
                }
                  .section#gradeRanking .content .item dt {
                    font-size: 1.2em;
                    font-weight: bold;
                    line-height: 1.5;
                  }
                  .section#gradeRanking .content .item dd {
                    margin-top: 4%;
                    font-size: 1.3em;
                    line-height: 1.5;
                  }
                    .section#gradeRanking .content .item dd b {
                      font-weight: bold;
                    }
              .section#gradeRanking .content .simulation {
                position: relative;
                display: block;
                width: 57.837%;
                margin: 0 auto;
                margin-top: 2.7%;
                padding-right: 3%;
                background-color: #eee;
                color: #000;
              }
                .section#gradeRanking .content .simulation span {
                  display: block;
                  padding: 4% 8%;
                  background-image: url(../IMAGES/arrow_red.png);
                  background-repeat: no-repeat;
                  background-position: right;
                  background-size: auto 10px;
                  font-size: 1.3em;
                  white-space: nowrap;
                }
                .section#gradeRanking .content .simulation:hover span {
                  color: #c3002c;
                }
          .section#gradeRanking .swiper-button-prev {
            display: none;
          }
          .section#gradeRanking .swiper-button-next {
            display: none;
          }
    .section#gradeRanking .link {
      clear: both;
      margin-top: 2.734%;
    }
      .section#gradeRanking .link ul {
        display: table;
        margin: 0 auto;
      }
        .section#gradeRanking .link li {
          display: table-cell;
          padding: 0 2.8%;
        }
        .section#gradeRanking .link li:first-child {
          width: 164px;
          border-right: 1px solid #c1c1c1;
        }
        .section#gradeRanking .link li:last-child {
          width: 136px;
        }
          .section#gradeRanking .link a {
            display: block;
            padding: 2% 0;
          }
            .section#gradeRanking .link span {
              display: block;
              /*padding-right: 20px;*/
              background-image: url(../IMAGES/arrow_red.png);
              background-repeat: no-repeat;
              background-position: right;
              background-size: auto 13px;
              font-size: 1.4em;
              color: #333;
              line-height: 1.1;
              white-space: nowrap;
            }
            .section#gradeRanking .link a:hover span {
              color: #c3002c;
            }
/* tablet */
@media screen and (min-width: 581px) and (max-width: 1279px) {
            .section#gradeRanking .content .item .image {
              top: 2.3437vw;
            }
            .section#gradeRanking .content .item .num {
              width: 2.3437vw;
              height: 2.3437vw;
            }
            .section#gradeRanking .content .simulation span {
              background-size: auto 0.78125vw;
            }
        .section#gradeRanking .link li:first-child {
          width: 12.8125vw;
        }
        .section#gradeRanking .link li:last-child {
          width: 10.625vw;
        }
            .section#gradeRanking .link span {
              padding-right: 1.5625vw;
              background-size: auto 1.0156vw;
            }
}


/** -------------------------------
 * detailContents
 */
#detailContents {
  clear: both;
}
  #detailContents > .wrap {
    max-width: 1280px;
    margin: 0 auto;
    margin-top: 5%;
    padding: 0 3.667%;
  }
    #detailContents .header {
      position: relative;
    }
      #detailContents .header h1 {
        display: table;
      }
        #detailContents .header span {
          display: table-cell;
          font-size: 1.8em;
          font-weight: bold;
          line-height: 1.1;
          vertical-align: middle;
        }
    #detailContents .content {
      padding-top: 1.5%;  
    }
      #detailContents .content ul {

      }
        #detailContents .content li {
          display: block;
          border-left: 1px solid #c2c2c2;
          float: left;
        }
          #detailContents .content a {
            display: table;
            height: 40px;
          }
            #detailContents .content span {
              display: table-cell;
              padding: 0 30px;
              vertical-align: middle;
            }
              #detailContents .content em {
                padding-right: 16px;
                background-image: url(../IMAGES/arrow_red.png);
                background-repeat: no-repeat;
                background-position: right;
                background-size: auto 10px;
                font-size: 1.4em;
                color: #333;
                line-height: 1.1;
              }
              #detailContents .content a:hover em {
                color: #c3002f;
              }
/* tablet */
@media screen and (min-width: 581px) and (max-width: 1279px) {
          #detailContents .content a {
            height: 3.125vw;
          }
            #detailContents .content span {
              padding: 0 2.34375vw;
            }
              #detailContents .content em {
                padding-right: 1.25vw;
                background-size: auto 0.78125vw;
              }
}