.tables {
  width: 100%;
}
  .tables-tab {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: calc(100% - 2px);
    margin-top: 10px;
  }
  .tables-tab.tbl-2 {
    grid-template-columns: repeat(2, 1fr);
  }
    .tables-tab__item {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 3.0em;
      background: #fff;
      border: solid 1px #D0CECE;
      box-shadow: 1px 0px 2px #aaa;
      font-size: 12px;
      cursor: pointer;
    }
      .tables-tab__item:last-of-type {
        border-right: solid 1px #D0CECE;
      }
      .tables-tab__item.selected {
        position: relative;
        background: #F1F1F1;
        box-shadow: 2px -1px 4px #555;
        font-weight: bold;
        color: #000;
      }
  .tables__wrapper {
    overflow: auto;
  }
  .tables-item {
    width: max-content;
    text-align: center;
  }
    .tables-item__head {
      background: #f1f1f1;
    }
    .tables-item__body {
      position: relative;
      background: #fff;
      font-size: 11px;
    }
    .tables-item.table-1 tr.tables-item__body.row-body-0 td,
    .tables-item.table-1 tr.tables-item__body.row-body-1 td,
    .tables-item.table-1 tr.tables-item__body.row-body-3 td,
    .tables-item.table-1 tr.tables-item__body.row-body-5 td {
      position: sticky;
    }
    .tables-item.table-1 tr.tables-item__body.row-body-0 .tables-item__td--lefty.show-after {
      padding-top: 42px;
    }

    .tables-item.table-1 tr.tables-item__body.row-body-0 .tables-item__td--lefty.show-after > a,
    .tables-item.table-1 tr.tables-item__body.row-body-0 .tables-item__td--lefty.not-show > a,
    .tables-item.table-1 tr.tables-item__body.row-body-1 .tables-item__td--lefty.show-after > a,
    .tables-item.table-1 tr.tables-item__body.row-body-1 .tables-item__td--lefty.not-show > a,
    .tables-item.table-1 tr.tables-item__body.row-body-1 .tables-item__td--lefty.show-after .tables-item__logo,
    .tables-item.table-1 tr.tables-item__body.row-body-3 .tables-item__td--lefty.show-after > a,
    .tables-item.table-1 tr.tables-item__body.row-body-3 .tables-item__td--lefty.not-show > a,
    .tables-item.table-1 tr.tables-item__body.row-body-3 .tables-item__td--lefty.show-after .tables-item__logo,
    .tables-item.table-1 tr.tables-item__body.row-body-5 .tables-item__td--lefty.show-after > a,
    .tables-item.table-1 tr.tables-item__body.row-body-5 .tables-item__td--lefty.not-show > a,
    .tables-item.table-1 tr.tables-item__body.row-body-5 .tables-item__td--lefty.show-after .tables-item__logo {
      position: relative;
      z-index: 3;
    }
    .tables-item.table-1 tr.tables-item__body.row-body-0 .tables-item__td--lefty.show-after::before {
      content: '当サイトイチ押し！';
      position: absolute;
      top: 5px;
      left: 15px;
      right: 15px;
      z-index: 2;
      padding: 5px;
      font-weight: bold;
      border: 1px solid black;
      background-color: white;
    }
    .tables-item.table-1 tr.tables-item__body.row-body-0 td:not(.tables-item__td--score)::after,
    .tables-item.table-1 tr.tables-item__body.row-body-1 td:not(.tables-item__td--score)::after,
    .tables-item.table-1 tr.tables-item__body.row-body-3 td:not(.tables-item__td--score)::after,
    .tables-item.table-1 tr.tables-item__body.row-body-5 td:not(.tables-item__td--score)::after {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 1;
      background: #fff7e191;
    }

    .tables-item.table-1 tr.tables-item__body.row-body-3 td:not(.tables-item__td--score)::after,
    .tables-item.table-1 tr.tables-item__body.row-body-5 td:not(.tables-item__td--score)::after {
      background: #f5f5f5 !important;
    }

    .tables-item.table-1 tr.tables-item__body.row-body-0 td.tables-item__td--score,
    .tables-item.table-1 tr.tables-item__body.row-body-1 td.tables-item__td--score {
      background: #FFF2CD !important;
    }
    .tables-item.table-1 tr.tables-item__body.row-body-0 .tables-item__td .text-td,
    .tables-item.table-1 tr.tables-item__body.row-body-0 .tables-item__td img:not(.tables-item__logo),
    .tables-item.table-1 tr.tables-item__body.row-body-1 .tables-item__td .text-td,
    .tables-item.table-1 tr.tables-item__body.row-body-1 .tables-item__td img:not(.tables-item__logo),
    .tables-item.table-1 tr.tables-item__body.row-body-3 .tables-item__td .text-td,
    .tables-item.table-1 tr.tables-item__body.row-body-3 .tables-item__td img:not(.tables-item__logo),
    .tables-item.table-1 tr.tables-item__body.row-body-5 .tables-item__td .text-td,
    .tables-item.table-1 tr.tables-item__body.row-body-5 .tables-item__td img:not(.tables-item__logo) {
      position: relative;
      z-index: 2;
    }

      .text-td .fz-9 {
        font-size: 9px;
        font-weight: bold;
      }
      .tables-item__th,
      .tables-item__td {
        border: solid 1px #dedede; 
      }
        .tables-item__td {
          height: 67px;
        }
        .tables-item__td>img {
          display: block;
          max-width: 30%;
          max-height: 95%;
          margin: auto; 
        }
        .tables-item__th--lefty,
        .tables-item__td--lefty {
          position: sticky;
          left: 0;
        }
        .tables-item__th--lefty {
          background: #f1f1f1;
        }
        .tables-item__td--lefty {
          background: #fff;
        }
        .tables-item__td--score {
          background: #FFF2CD;
        }
          .tables-item__td--score>span {
            font-size: 22px;
            font-weight: bold;
          }
          .tables-item__sort {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-content: flex-end;
            align-items: center;
            width: 100%;
            height: 4.5em;
            color: #333;
            font-size: 11px;
            text-decoration: none;
            cursor: pointer;
          }
          .tables-item__sort.h-auto {
            height: 80px;
          }
            .tables-item__sort>span {
              display: block;
              width: 80%;
              color: #FF7200;
            }
            .tables-item__sort.selected {
              background: #ff7200;
              color: #fff;
            }
            .tables-item__sort.selected>span {
              color: #fff;
            }
          .tables-item__logo {
            /*
            display: block;
            */
            width: 100%;
          }
          .tables-item__logo.top {
            margin: 0;
          }
          .tables-item__button {
            display: block;
            width: 90%;
            margin: 3px auto;
            padding: 8px 3px;
            border-radius: 5px;
            background: #03b403;
            box-shadow:0 3px 0 #008000;
            text-align: center;
            color: #fff;
            font-size: 14px;
            font-weight: bold;
            text-decoration: none;
          }
            .tables-item__button--sub {
              margin: 5px auto;
              padding: 1px 0;
              background: #999;
              box-shadow: 0 2px 0 rgba(81,81,81,1);
              color: #fff;
              font-size: 12px;
              text-decoration: none;
            }

@media screen and (min-width: 768px) {
  .tables-tab__item {
    font-size: 16px;
  }
  .tables-item {
    width: 100%;
  }
    .tables-item__td {
      height: auto;
      font-size: 14px;
    }
    .tables-item__th--lefty,
    .tables-item__td--lefty {
      width: 25%;
    }
      .tables-item__sort {
        font-size: 13px;
      }
}

.th-f {
  width: 60px;
}
.th-s {

}
.th-m {
  width: 60px;
}
.th-l {
  width: 100px;
}
@media screen and (min-width: 768px) {
  .th-f {
    width: 7%;
  }
  .th-s {
    width: 7.5%;
  }
  .th-m {
    width: 10%;
  }
  .th-l {
    width: 25%;
  }
}

.table-1 {
  width: 671px;
}
.table-2,
.table-3 {
  width: 701px;
}
@media screen and (min-width: 768px) {
  .table-1,
  .table-2,
  .table-3 {
    width: auto;
  }
}

@media screen and (max-width: 767px) {
  .tables-item__td>img {
    max-width: 50%;
  }
  .tables-item.table-1 tr.tables-item__body.row-body-0 .tables-item__td--lefty,
  .tables-item.table-1 tr.tables-item__body.row-body-1 .tables-item__td--lefty,
  .tables-item.table-1 tr.tables-item__body.row-body-3 .tables-item__td--lefty,
  .tables-item.table-1 tr.tables-item__body.row-body-5 .tables-item__td--lefty {
    z-index: 2;
  }

  .tables-item.table-1 tr.tables-item__body.row-body-0 .tables-item__td--lefty.show-after {
    padding-top: 30px;
  }

  .tables-item.table-1 tr.tables-item__body.row-body-0 .tables-item__td--lefty.show-after::before {
    top: 3px;
    left: 1px;
    right: 1px;
    padding: 3px 0;
    font-size: 10px;
  }

  .tables-item__td--score>span {
    font-size: 21px;
    font-weight: bold;
  }

}