@charset "UTF-8";

/* CSS Document */
:root {
  --font-family-en: 'Roboto', sans-serif;
  --font-family-en-2: 'Arial', sans-serif;
  --font-family-en-3: 'Oswald', sans-serif;
  --font-family-M: 'メイリオ', Meiryo, 'ヒラギノ角ゴシック', 'Hiragino Sans', sans-serif;
  --font-family-J: 'Noto Sans JP', sans-serif;
  --red: #F80000;
  --orange: #FF8000;
  --blue: #39A1DD;
  --black: #000;
}


/* ミディアムデバイス (タブレット) のスタイル */
@media (max-width: 1024px) {

  .header {
    width: 100%;
    height: 80px;
    background: rgb(213, 238, 245);
    background: linear-gradient(180deg, rgba(213, 238, 245, 1) 0%, rgba(255, 255, 255, 1) 100%);
    position: relative;
    padding-top: 18px;
  }

  h3 {
    width: 100%;
    height: 44px;
    background: url("../images/h3_ranking.png") no-repeat center center;
    background-size: contain;
  }

  .contents {
    width: 400px;
    position: relative;
    padding-bottom: 40px;
  }

  #ranking_wrap {
    width: 400px;
    margin: 0 auto;
  }

  .ranking_3 table,
  .ranking_2 table {
    background: #EAEAEA;
  }
  .ranking_3 table th,
  .ranking_2 table th {
    background: #666;
    color: #fff;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 14px !important;
    font-weight: 500;
    height: 24px;
  }

  .ranking_3 table td,
  .ranking_2 table td {
    background: rgba(255, 255, 255, 1);
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 20px;
    height: 30px;
  }

  .ranking_3 table tr:nth-child(odd) td,
  .ranking_2 table tr:nth-child(odd) td {
    background: rgba(255, 255, 255, 0.7);
  }

  #ranking_wrap .mida {
    font-size: 24px;
    height: 64px;
    line-height: 120%;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    position: relative;
    background: url("../images/ranking_i.png") no-repeat 34px 5px;
    background-size: 7%;
    padding-left: 30px;
    text-align: center;
    margin: 10px auto;

  }

  #ranking_wrap .ranking_history .mida {
    background: url("../images/ranking_i.png") no-repeat 20px 5px;
    background-size: 7%;

  }

  #ranking_wrap .mida span {
    font-size: 16px;
    font-weight: 400;
    background: #FFF;
    padding: 2px 16px;
    border-radius: 12px;
  }
  #ranking_wrap .read_sub{
    font-size: 16px;
    text-align: right;
    padding-right: 10px;
}

  .ranking_3 {
    width: 400px;
    background: #EBF4FF;
    padding: 10px 0px;
  }

  .ranking_3 .col1 {
    width: 50px;
  }

  .ranking_3 .col2 {
    width: 160px;
  }

  .ranking_3 .col3 {
    width: 70px;
  }

  .ranking_3 .col4 {}

  .ranking_2 {
    width: 400px;
    background: #EBF4FF;
    padding: 10px 0px;
    margin-top: 20px;
  }

  .ranking_2 .col1 {
    width: 50px;
  }

  .ranking_2 .col2 {
    width: 160px;
  }

  .ranking_2 .col3 {
    width: 70px;
  }

  .ranking_2 .col4 {}

  .ranking_3 table,
  .ranking_2 table {
    width: 400px;
  }

  table tr td ul li {
    width: 28px;
    height: 28px;
    margin-bottom: 6px;
    float: left;
  }

  li.y_mark1 {
    width: 10px !important;
    height: 28px;
    margin: 0 4px;
    background: url(../images/y_mark1.png) no-repeat center center;
    background-size: 100%;
  }


  .ranking_3 table tr td ul {
    margin-left: 18px;
    margin-top: 6px;
  }

  .ranking_2 table tr td ul {
    margin-left: 40px;
    margin-top: 6px;
  }

  .ranking_history {
    width: 100%;
    margin-top: 20px;
    background: #EBF4FF;
    padding: 10px 0px;
  }

  .ranking_history table {
    width: 400px;
    margin: 0px auto;
  }

  .ranking_history dl dt.col1,
  .ranking_history dl dd.col1 {
    width: 50px;
  }

  .ranking_history dl dt.col2,
  .ranking_history dl dd.col2 {
    width: 113px;
  }

  .ranking_history dl dt.col3,
  .ranking_history dl dd.col3 {
    width: 147px;
  }

  .ranking_history dl dt.col4,
  .ranking_history dl dd.col4 {
    width: 80px;
  }

  .ranking_history dl dt.col5,
  .ranking_history dl dd.col5 {
    width: 113px;
    margin-top: 2px;
  }

  .ranking_history dl dt.col6,
  .ranking_history dl dd.col6 {
    width: 229px;
    margin-top: 2px;
  }

  .ranking_history dl dt.col7,
  .ranking_history dl dd.col7 {
    width: 113px;
    margin-top: 2px;
  }

  .ranking_history dl dt.col8,
  .ranking_history dl dd.col8 {
    width: 113px;
    margin-top: 2px;
  }

  .ranking_history dl dt.col9,
  .ranking_history dl dd.col9 {
    width: 114px;
    margin-top: 2px;
  }

  .ranking_history table tr td {
    background: #EAEAEA;
  }

  .ranking_history dl dt,
  .ranking_history dl dd {
    float: left !important;
    margin-left: 2px;
  }

  .ranking_history dl dt {
    background: #666;
    color: #fff;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 14px !important;
    font-weight: 500;
    height: 26px;
    padding-top: 2px;


  }

  .ranking_history dl dd {
    height: 42px !important;
    text-align: center;
    background: rgba(255, 255, 255, 1);
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 20px;
    height: 30px;
    line-height: 42px;
  }

  .ranking_history dl.odd dd {
    background: rgba(255, 255, 255, 0.5);
  }

  .ranking_history dl dt:nth-child(1),
  .ranking_history dl dd:nth-child(1) {
    margin-left: 0px;
    background: #0B6E7A;
    color: #fff;
    font-weight: 700;
    font-size: 28px;
  }

  .ranking_history dl dt.col1 {
    height: 82px;
    line-height: 80px;
  }

  .ranking_history dl dd.col1 {
    height: 130px !important;
    line-height: 126px;
  }


  table tr td ul li {
    width: 28px;
    height: 28px;
    margin-bottom: 6px;
    float: left;
  }

  

  .ranking_3 table tr td:nth-child(4),
  .ranking_2 table tr td:nth-child(4) {
    text-align: right !important;
    padding-right: 10px !important;
  }

  .ranking_history td dl dd:nth-child(2) {
    text-align: right !important;
    padding-right: 6px !important;
  }

  .ranking_history td dl dd:nth-child(7),
  .ranking_history td dl dd:nth-child(8),
  .ranking_history td dl dd:nth-child(9) {
    font-family: 'Noto Sans JP', sans-serif !important;
    font-size: 16px !important;
    line-height: 114%;
  }

  .ranking_history td dl dd:nth-child(7) span,
  .ranking_history td dl dd:nth-child(8) span,
  .ranking_history td dl dd:nth-child(9) span {
    font-family: 'Roboto', sans-serif !important;
    color: #999;
  }

  .ranking_history dd.col3 {
    font-size: 18px;
  }

  .ranking_3 table tr td ul {
    margin-left: 18px;
    margin-top: 6px;
  }

  .ranking_2 table tr td ul {
    margin-left: 40px;
    margin-top: 6px;
  }

  .ranking_history table tr td ul {
    margin-left: 54px;
    margin-top: 6px;
  }




}

/* ラージデバイス (デスクトップ) のスタイル */
@media (min-width: 1025px) {
  .contents {
    width: 94.8%;
    padding-bottom: 40px;
  }

  .header {
    width: 100%;
    height: 110px;
    background: rgb(213, 238, 245);
    background: linear-gradient(180deg, rgba(213, 238, 245, 1) 0%, rgba(255, 255, 255, 1) 100%);
    position: relative;
  }

  h3 {
    width: 100%;
    height: 110px;
    background: url("../images/h3_ranking.png") no-repeat center center;
    background-size: 308px 57px;
  }

  #ranking_wrap {
    width: 1700px;
    margin: 0 auto;
  }

  #ranking_wrap table {
    background: #EAEAEA;
  }

  .ranking_3 table th,
  .ranking_2 table th {
    background: #666;
    color: #fff;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 14px !important;
    font-weight: 500;
    height: 24px;
  }

  .ranking_3 table td,
  .ranking_2 table td {
    background: rgba(255, 255, 255, 1);
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 20px;
    height: 30px;
  }

  .ranking_3 table tr:nth-child(odd) td,
  .ranking_2 table tr:nth-child(odd) td {
    background: rgba(255, 255, 255, 0.7);
  }

  #ranking_wrap .mida {
    font-size: 22px;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    position: relative;
    background: url("../images/ranking_i.png") no-repeat 5px center;
    background-size: contain;
    padding-left: 34px;
    margin-bottom: 2px;
  }

  #ranking_wrap .mida span {
    font-size: 16px;
    position: absolute;
    right: 2px;
    bottom: 0px;
    font-weight: 400;
  }

  #ranking_wrap .read_sub{
    font-size: 16px;
    text-align: right;
}


  .ranking_3 {
    width: 840px;
    float: left;
    background: #EBF4FF;
    padding: 20px;
  }

  .ranking_3 .col1 {
    width: 50px;
  }

  .ranking_3 .col2 {
    width: 160px;
  }

  .ranking_3 .col3 {
    width: 70px;
  }

  .ranking_3 .col4 {}

  .ranking_2 {
    width: 840px;
    float: left;
    margin-left: 20px;
    background: #EBF4FF;
    padding: 20px;
  }

  .ranking_2 .col1 {
    width: 50px;
  }

  .ranking_2 .col2 {
    width: 160px;
  }

  .ranking_2 .col3 {
    width: 70px;
  }

  .ranking_2 .col4 {}

  .ranking_3 table,
  .ranking_2 table {
    width: 400px;
    float: left;
  }

  .ranking_history {
    width: 100%;
    margin-top: 20px;
    background: #EBF4FF;
    padding: 20px;
  }

  .ranking_history table {
    width: 1660px;
    margin: 0px auto;
  }

  .ranking_history dl dt.col1,
  .ranking_history dl dd.col1 {
    width: 100px;
  }

  .ranking_history dl dt.col2,
  .ranking_history dl dd.col2 {
    width: 180px;
  }

  .ranking_history dl dt.col3,
  .ranking_history dl dd.col3 {
    width: 180px;
  }

  .ranking_history dl dt.col4,
  .ranking_history dl dd.col4 {
    width: 100px;
  }

  .ranking_history dl dt.col5,
  .ranking_history dl dd.col5 {
    width: 100px;
  }

  .ranking_history dl dt.col6,
  .ranking_history dl dd.col6 {
    width: 200px;
  }

  .ranking_history dl dt.col7,
  .ranking_history dl dd.col7 {
    width: 260px;
  }

  .ranking_history dl dt.col8,
  .ranking_history dl dd.col8 {
    width: 260px;
  }

  .ranking_history dl dt.col9,
  .ranking_history dl dd.col9 {
    width: 260px;
  }

  .ranking_history table tr td {
    background: #EAEAEA;
  }

  .ranking_history dl dt,
  .ranking_history dl dd {
    float: left !important;
    margin-left: 2px;
  }

  .ranking_history dl dt {
    background: #666;
    color: #fff;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 14px !important;
    font-weight: 500;
    height: 26px;
    padding-top: 2px;


  }

  .ranking_history dl dd {
    height: 42px !important;
    text-align: center;
    background: rgba(255, 255, 255, 1);
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 20px;
    height: 30px;
    line-height: 42px;
  }

  .ranking_history dl.odd dd {
    background: rgba(255, 255, 255, 0.7);
  }

  .ranking_history dl dt:nth-child(1),
  .ranking_history dl dd:nth-child(1) {
    margin-left: 0px;
    background: #0B6E7A;
    color: #fff;
    font-weight: 700;
    font-size: 28px;
  }

  table tr td ul li {
    width: 28px;
    height: 28px;
    margin-bottom: 6px;
    float: left;
  }

  li.y_mark1 {
    width: 10px !important;
    height: 28px;
    margin: 0 4px;
    background: url(../images/y_mark1.png) no-repeat center center;
    background-size: 100%;
  }

  .ranking_3 table tr td:nth-child(4),
  .ranking_2 table tr td:nth-child(4) {
    text-align: right !important;
    padding-right: 10px !important;
  }

  .ranking_history td dl dd:nth-child(2) {
    text-align: right !important;
    padding-right: 30px !important;
  }

  .ranking_history td dl dd:nth-child(7),
  .ranking_history td dl dd:nth-child(8),
  .ranking_history td dl dd:nth-child(9) {
    text-align: left !important;
    padding-left: 40px !important;
    font-family: 'Noto Sans JP', sans-serif !important;
    font-size: 19px !important;
  }

  .ranking_history td dl dd:nth-child(7) span,
  .ranking_history td dl dd:nth-child(8) span,
  .ranking_history td dl dd:nth-child(9) span {
    font-family: 'Roboto', sans-serif !important;
    margin-right: 10px;
    font-size: 20px !important;
  }


  .ranking_3 table tr td ul {
    margin-left: 18px;
    margin-top: 6px;
  }

  .ranking_2 table tr td ul {
    margin-left: 40px;
    margin-top: 6px;
  }

  .ranking_history table tr td ul {
    margin-left: 40px;
    margin-top: 6px;
  }

}



.ranking_3 table tr td:nth-child(1),
.ranking_3 table tr th.col1,
.ranking_2 table tr td:nth-child(1),
.ranking_2 table tr th.col1 {
  background: #0B6E7A !important;
  color: #fff;
  font-weight: 700;
  font-size: 28px;
}

.ranking_3 table tr td:nth-child(4) span,
.ranking_2 table tr td:nth-child(4) span,
.ranking_history td dl dd:nth-child(2) span {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  margin-left: 2px;
}

.ranking_history td dl dd:nth-child(2) {
  font-weight: 700;
}

li.num1 {
  background: url("../images/yoso_num1.png") no-repeat center center;
  background-size: 100%;
}

li.num2 {
  background: url("../images/yoso_num2.png") no-repeat center center;
  background-size: 100%;
}

li.num3 {
  background: url("../images/yoso_num3.png") no-repeat center center;
  background-size: 100%;
}

li.num4 {
  background: url("../images/yoso_num4.png") no-repeat center center;
  background-size: 100%;
}

li.num5 {
  background: url("../images/yoso_num5.png") no-repeat center center;
  background-size: 100%;
}

li.num6 {
  background: url("../images/yoso_num6.png") no-repeat center center;
  background-size: 100%;
}

.ranking_history dd.G0 {
  background: url("../images/g_ip_2.png") #4C4F75 no-repeat center center !important;
  background-size: 50% !important;
}

.ranking_history dd.G3 {
  background: url("../images/g_g3_2.png") #149EF9 no-repeat center center !important;
  background-size: 50% !important;
}

.ranking_history dd.G2 {
  background: url("../images/g_g2_2.png") #00B892 no-repeat center center !important;
  background-size: 50% !important;
}

.ranking_history dd.G1 {
  background: url("../images/g_g1_2.png") #E86C00 no-repeat center center !important;
  background-size: 50% !important;
}

.ranking_history dd.SG {
  background: url("../images/g_sg_2.png") #C90000 no-repeat center center !important;
  background-size: 50% !important;
}