/* PC */
@media screen and (min-width: 749px) {
  .product-group {
    width: 1140px;
    margin: 80px auto 0;

    .product-group-list {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 22px;
    }

    .m-item {
      width: 210px;
      counter-increment: items;
      margin-bottom: 0 !important;
    }

    .m-item-icon,
    .popup-box {
      display: none !important;
    }
  }

  .product-group-heading {
    font-size: 16px;
    font-weight: bold;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid #dcdcdc;
    padding-bottom: 15px;
    margin-bottom: 30px;
  }
}

/* SP */
@media screen and (max-width: 750px) {
  .product-group-heading {
    width: calc(355 * (100vw / 375));
    font-size: 14px;
    font-weight: bold;
    line-height: 1.5;
    margin: 0 auto 10px;
  }

  .product-group-list {
    width: calc(355 * (100vw / 375)) !important;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px calc(7 * (100vw / 375));
    margin: 0 auto;

    .m-item {
      width: calc(114 * (100vw / 375));
      position: relative;
      counter-increment: items;

      .m-item-icon {
        display: none;
      }

      .m-item-brand {
        font:
          500 12px "Poppins",
          sans-serif;
        margin: 0;
        padding: 0;
      }

      .m-item-price {
        font:
          500 13px "Poppins",
          sans-serif;
        margin: 0;
      }
    }
  }
}

/* ランキングナンバー */
.product-group-list-ranking {
  .m-item {
    &::before {
      content: counter(items);
      box-sizing: border-box;
      width: 25px;
      height: 25px;
      border-radius: 50%;
      border: 1px solid rgba(203, 203, 203, 0.5);
      background: #fff;
      font:
        400 10px "Poppins",
        sans-serif;
      line-height: 24px;
      text-align: center;
      letter-spacing: normal;
      position: absolute;
      top: -12px;
      left: 10px;
      z-index: 10;
    }

    &:nth-child(1)::before,
    &:nth-child(2)::before,
    &:nth-child(3)::before {
      border: none;
      color: #fff;
      line-height: 25px;
    }

    &:nth-child(1)::before {
      background: #e7bc3a;
    }

    &:nth-child(2)::before {
      background: #9a9893;
    }

    &:nth-child(3)::before {
      background: #a0783f;
    }
  }
}
@media screen and (max-width: 750px) {
  .product-group-list-ranking {
    margin-top: 20px !important;
  }
}