.ranking-wrap {
  padding: 24px 8px; }
  .ranking-wrap .ranking-ttl-wrap {
    margin-bottom: 8px; }
    .ranking-wrap .ranking-ttl-wrap .ranking-ttl {
      text-align: center; }
      .ranking-wrap .ranking-ttl-wrap .ranking-ttl > img {
        max-width: 114px;
        vertical-align: baseline; }
    .ranking-wrap .ranking-ttl-wrap .ranking-ttl-sub {
      display: block;
      font-size: 9px;
      font-weight: normal; }
  .ranking-wrap .ranking-tab {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    border: 1px solid #424242;
    border-radius: 5px;
    margin-bottom: 8px; }
    .ranking-wrap .ranking-tab li {
      width: calc(100% / 3);
      text-align: center;
      font-size: 11px;
      padding: 16px 0;
      line-height: 1;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      -webkit-transition: all .2s linear;
      transition: all .2s linear; }
      .ranking-wrap .ranking-tab li:nth-child(2) {
        border-left: 1px solid #424242;
        border-right: 1px solid #424242; }
      .ranking-wrap .ranking-tab li.active {
        background-color: #424242;
        color: #fff; }
    .ranking-wrap .ranking-tab::after {
      content: none; }
  .ranking-wrap .ranking-box {
    display: none; }
    .ranking-wrap .ranking-box.show {
      display: block; }
    .ranking-wrap .ranking-box .ranking-box-ttl {
      margin-bottom: 8px;
      font-size: 12px;
      font-weight: normal; }
    .ranking-wrap .ranking-box .ranking-box-contents {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between; }
      .ranking-wrap .ranking-box .ranking-box-contents > li {
        width: calc((100% - 8px) / 3);
        position: relative;
        margin-bottom: 8px; }
        .ranking-wrap .ranking-box .ranking-box-contents > li > a {
          display: block;
          text-decoration: none;
          color: #424242;
          font-weight: normal; }
        .ranking-wrap .ranking-box .ranking-box-contents > li::before {
          content: '';
          display: block;
          width: 18px;
          height: 18px;
          position: absolute;
          top: 0;
          left: 0;
          background-color: #F7A6AD;
          font-size: 10px;
          font-weight: bold;
          text-align: center;
          line-height: 18px;
          color: #fff; }
        .ranking-wrap .ranking-box .ranking-box-contents > li:nth-of-type(1)::before {
          background: url(../img/index/ranking/ranking-gold.svg) center center no-repeat;
          background-size: contain; }
        .ranking-wrap .ranking-box .ranking-box-contents > li:nth-of-type(2)::before {
          background: url(../img/index/ranking/ranking-silver.svg) center center no-repeat;
          background-size: contain; }
        .ranking-wrap .ranking-box .ranking-box-contents > li:nth-of-type(3)::before {
          background: url(../img/index/ranking/ranking-bronze.svg) center center no-repeat;
          background-size: contain; }
        .ranking-wrap .ranking-box .ranking-box-contents > li:nth-of-type(4)::before {
          content: '04'; }
        .ranking-wrap .ranking-box .ranking-box-contents > li:nth-of-type(5)::before {
          content: '05'; }
        .ranking-wrap .ranking-box .ranking-box-contents > li:nth-of-type(6)::before {
          content: '06'; }
        .ranking-wrap .ranking-box .ranking-box-contents > li:nth-of-type(7)::before {
          content: '07'; }
        .ranking-wrap .ranking-box .ranking-box-contents > li:nth-of-type(8)::before {
          content: '08'; }
        .ranking-wrap .ranking-box .ranking-box-contents > li:nth-of-type(9)::before {
          content: '09'; }
        .ranking-wrap .ranking-box .ranking-box-contents > li:nth-of-type(10)::before {
          content: '10'; }
        .ranking-wrap .ranking-box .ranking-box-contents > li:nth-of-type(11)::before {
          content: '11'; }
        .ranking-wrap .ranking-box .ranking-box-contents > li:nth-of-type(12)::before {
          content: '12'; }
        .ranking-wrap .ranking-box .ranking-box-contents > li.spacer {
          height: 0; }
          .ranking-wrap .ranking-box .ranking-box-contents > li.spacer::before {
            content: none; }
      .ranking-wrap .ranking-box .ranking-box-contents .ranking-box-contents-img01 {
        margin-bottom: 4px; }
      .ranking-wrap .ranking-box .ranking-box-contents .ranking-box-contents-spec {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex; }
        .ranking-wrap .ranking-box .ranking-box-contents .ranking-box-contents-spec > span {
          width: 50%;
          text-align: center;
          font-size: 6px;
          padding: 2px; }
          .ranking-wrap .ranking-box .ranking-box-contents .ranking-box-contents-spec > span.txt-size {
            background-color: #EEEEEE; }
          .ranking-wrap .ranking-box .ranking-box-contents .ranking-box-contents-spec > span.txt-period {
            background-color: #F7D7DB; }
          .ranking-wrap .ranking-box .ranking-box-contents .ranking-box-contents-spec > span.txt-sales-promotion {
            background-color: #F7D7DB;
            width: 100%; }
      .ranking-wrap .ranking-box .ranking-box-contents .ranking-box-contents-discription {
        font-size: 7px;
        margin-top: 2px; }
      .ranking-wrap .ranking-box .ranking-box-contents .ranking-box-contents-price {
        font-size: 9px;
        margin-top: 2px; }
    .ranking-wrap .ranking-box.ranking-box02 .ranking-box-contents > li::before {
      background-color: #A6CEF4; }
    .ranking-wrap .ranking-box.ranking-box02 .ranking-box-contents .ranking-box-contents-spec > span.txt-period {
      background-color: #D7E7F4; }
    .ranking-wrap .ranking-box.ranking-box02 .ranking-box-contents .ranking-box-contents-spec > span.txt-sales-promotion {
      background-color: #D7E7F4; }
    .ranking-wrap .ranking-box.ranking-box03 .ranking-box-contents > li::before {
      background-color: #DBC482; }
    .ranking-wrap .ranking-box.ranking-box03 .ranking-box-contents .ranking-box-contents-spec > span.txt-period {
      background-color: #F2E8D7; }
    .ranking-wrap .ranking-box.ranking-box03 .ranking-box-contents .ranking-box-contents-spec > span.txt-sales-promotion {
      background-color: #F2E8D7; }
  .ranking-wrap img {
    max-width: 100%;
    height: auto; }