

/** -------------------------------
 * section | gradeRanking
 */
.section#gradeRanking {
  margin-top: 12%;
  /*display: none;*/
}
  .section#gradeRanking > .wrap {}
    .section#gradeRanking .content {
      margin-top: 0.333vw;
    }
      .section#gradeRanking .content > .wrap {

      }
        .section#gradeRanking .swiper-container {

        }
          .section#gradeRanking .swiper-wrapper {

          }
            .section#gradeRanking .swiper-slide {
              width: 100%;
              /*margin-top: 4vw;*/
            }
              .section#gradeRanking .content .item {
                position: relative;
                display: block;
                width: 80vw;
                margin: 0 auto;
                padding-top: 30%;
                color: #000;
              }
                .section#gradeRanking .content .item .image {
                  position: absolute;
                  left: 0;
                  top: 6.933vw;
                  right: 0;
                  display: block;
                  height: 24vw;
                  background-repeat: no-repeat;
                  background-position: left top;
                  background-size: contain;
                }
                .section#gradeRanking .content .item01 .image { background-image: url(../IMAGES/SP/gradeRanking_img01.jpg); }
                .section#gradeRanking .content .item02 .image { background-image: url(../IMAGES/SP/gradeRanking_img02.jpg); }
                .section#gradeRanking .content .item03 .image { background-image: url(../IMAGES/SP/gradeRanking_img03.jpg); }
                .section#gradeRanking .content .item .num {
                  position: absolute;
                  left: 0;
                  top: 0;
                  display: table;
                  width: 6.933vw;
                  height: 6.933vw;
                  background-color: #fff;
                  border: 1px solid #b4b4b4;
                }
                  .section#gradeRanking .content .item .num em {
                    display: table-cell;
                    font-size: 16px;
                    font-size: 4.266vw;
                    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 dt {
                    font-size: 12px;
                    font-size: 3.2vw;
                    font-weight: bold;
                    line-height: 1.5;
                  }
                  .section#gradeRanking .content .item dd {
                    margin-top: 4%;
                    font-size: 13px;
                    font-size: 3.466vw;
                    line-height: 1.5;
                  }
                    .section#gradeRanking .content .item dd b {
                      font-weight: bold;
                    }
              .section#gradeRanking .content .simulation {
                position: relative;
                display: block;
                width: 40.667%;
                margin-left: 50%;
                margin-top: 2.7%;
                padding-right: 3%;
                background-color: #eee;
                color: #000;
              }
                .section#gradeRanking .content .simulation span {
                  display: block;
                  padding: 6% 8%;
                  background-image: url(../IMAGES/arrow_red.png);
                  background-repeat: no-repeat;
                  background-position: right;
                  background-size: auto 2.4vw;
                  font-size: 10px;
                  font-size: 2.666vw;
                }
/*          .section#gradeRanking .swiper-button-prev,
          .section#gradeRanking .swiper-button-next,
          .section#gradeRanking .swiper-pagination {
            display: none;
          }*/
          .section#gradeRanking .swiper-button-prev {
            left: 2.4vw;
            top: 13vw;
            width: 3.2vw;
            height: 4.666vw;
            margin-top: 0;
            background-image: url(../IMAGES/swiper_prev_red.png);
            background-size: contain;
          }
          .section#gradeRanking .swiper-button-prev.swiper-button-disabled {
            background-image: url(../IMAGES/swiper_prev_gray.png);
            opacity: 0.25;
          }
          .section#gradeRanking .swiper-button-next {
            right: 2.4vw;
            top: 13vw;
            width: 3.2vw;
            height: 4.666vw;
            margin-top: 0;
            background-image: url(../IMAGES/swiper_next_red.png);
            background-size: contain;
          }
          .section#gradeRanking .swiper-button-next.swiper-button-disabled {
            background-image: url(../IMAGES/swiper_next_gray.png);
            opacity: 0.25;
          }
    .section#gradeRanking .link {
      clear: both;
      margin-top: 10%;
    }
      .section#gradeRanking .link ul {
        display: table;
        margin: 0 auto;
      }
        .section#gradeRanking .link li {
          display: table-cell;
          padding: 0 5.3vw;
        }
        .section#gradeRanking .link li:first-child {
          border-right: 1px solid #c1c1c1;
        }
          .section#gradeRanking .link a {
            display: block;
            padding: 0.5vw 0;
          }
            .section#gradeRanking .link span {
              display: block;
              padding-right: 4.8vw;
              background-image: url(../IMAGES/arrow_red.png);
              background-repeat: no-repeat;
              background-position: right;
              background-size: auto 3.066vw;
              font-size: 13px;
              font-size: 3.466vw;
              color: #333;
              line-height: 1.1;
              white-space: nowrap;
            }


/** -------------------------------
 * detailContents
 */
#detailContents {
  clear: both;
  margin-top: 11.7%;
}
  #detailContents > .wrap {
    padding: 0 4%;
    padding-bottom: 10.4%;
  }
    #detailContents .header {

    }
      #detailContents .header h1 {

      }
        #detailContents .header span {
          font-size: 14px;
          font-size: 3.733vw;
          font-weight: bold;
          line-height: 1.1;
          vertical-align: middle;
        }
    #detailContents .content {
      padding-top: 4.5vw;
    }
      #detailContents .content ul {
        border-top: 1px solid #ccc;
      }
        #detailContents .content li {
          display: block;
          border-bottom: 1px solid #ccc;
        }
          #detailContents .content a {
            display: table;
            width: 100%;
            height: 10.666vw;
          }
            #detailContents .content span {
              display: table-cell;
              padding-right: 3.6%;
              vertical-align: middle;
            }
              #detailContents .content em {
                display: block;
                background-image: url(../IMAGES/arrow_red.png);
                background-repeat: no-repeat;
                background-position: right;
                background-size: auto 2.666vw;
                font-size: 14px;
                font-size: 3.733vw;
                color: #333;
                line-height: 1.1;
              }




