.product_filter_result_wrapper {
  box-sizing: border-box;
  overflow: hidden;
  margin: 20px 0;

  & * {
    box-sizing: border-box;
  }

  & a {
    &:link {
      text-decoration: none;
      color: unset;
    }
  }

  .big-arrow {
    position: relative;
    display: flex;
    justify-content: center;
    height: 58px;
    margin-bottom: 15px;

    &::before,
    &::after {
      content: "";
      position: absolute;
      display: block;
      width: 34px;
      height: 34px;
      transform: rotate(-45deg);
      border: 10px solid;
    }
    &::before {
      top: -27px;
      border-color: transparent transparent #86c46b #86c46b;
    }
    &::after {
      top: -6px;
      border-color: transparent transparent var(--dekiruGreen) var(--dekiruGreen);
    }
  }

  .total_records {
    .num {
      font-size: 30px;
      font-weight: bold;
      line-height: 30px;
      margin: 0 5px;
    }
  }

  .sort_area {
    display: flex;
    justify-content: end;
    gap: 6px;

    .sort_orderBlock {
      font-size: 13px;
      color: #4181f2;
      background: #fff;
      padding: 5px 10px;
      border: 1px solid #4181f2;
      border-radius: 2px;

      &.sorting_active {
        color: #fff;
        background-color: #4181f2;
      }
    }
  }

  .un_search_shareArea {
    display: flex;
    gap: 6px;

    .un_search_shareArea__link {
      position: relative;
      padding: 9px 12px 7px 36px;
      border: 1px solid #bbb;
      border-radius: 2px;
      color: #222;
      font-size: 13px;
      text-decoration: unset;
      cursor: pointer;

      &::before {
        content: "";
        position: absolute;
      }
      &.lineLink {
        padding: 8px 16px 8px 40px;
      }
      &.copyLink {
        &::before {
          background: url(/common/img/logo/sns/copy/copy_icon.png) no-repeat center / contain;
          width: 20px;
          height: 20px;
          top: 8px;
          left: 7px;
        }
      }
      &.lineLink {
        &::before {
          background: url(/common/img/logo/sns/line/line_icon.png) no-repeat center / contain;
          width: 26px;
          height: 26px;
          top: 5px;
          left: 5px;
        }
      }
    }
  }

  .product_filter_head {
    position: relative;
    display: flex;
    align-items: end;
    justify-content: space-between;
    margin: 5px 0;
  }

  .product_filter_result_cardBox {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 10px 5px;

    @media screen and (max-width: 640px) {
      padding: 10px;
    }
  }

  .product_filter_result_item {
    display: flex;
    flex-direction: column;
    border: 4px solid #bbb;
    width: 100%;
    padding: 0;
  }

  .product_filter_result_item_ttlArea {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background-color: #ececec;
    font-size: 18px;
    font-weight: bold;
    line-height: 1;
    width: 100%;
    padding: 15px;
  }

  .product_filter_result_item_text {
    display: flex;
    gap: 10px;
    margin-left: auto;
  }

  .product_filter_result_item_text_stock {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    color: var(--emphasisRed);
    border: 1px solid var(--emphasisRed);
    font-size: 16px;
    line-height: normal;
    padding: 6px;
  }

  .product_filetr_result_detail {
    display: flex;
    flex-flow: unset;
    justify-content: space-between;
    gap: 20px;
    padding: 15px 10px 10px;
  }

  .product_filetr_result_detail_inner {
    display: flex;
    flex-direction: column;
    gap: 10px;

    &.product_filetr_result_detail_inner__main {
      justify-content: flex-start;
      gap: 25px;
      width: 100%;
    }

    &.product_filetr_result_detail_inner__flex {
      flex-direction: row;
      align-items: center;
      gap: 50px;
    }
  }

  .product_filter_result_item_text_subsidy {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    background-color: #fd4813;
    color: #fff;
    font-size: 16px;
    line-height: normal;
    padding: 6px 16px;
  }

  .product_filter_result_item_details {
    flex-wrap: wrap;
    justify-content: flex-start;
    margin: 0;
    gap: 5px;
    padding-top: 0;
    border-top: unset;
  }

  .product_filetr_result_detail_campaign {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    color: #fd4813;
    border: 1px solid #fd4813;
    border-radius: 3px;
    width: fit-content;
    padding: 1px 6px;
  }

  .product_filetr_result_detail_campaign_num {
    font-size: 17px;
  }

  .product_filter_result_item_img,
  .product_filter_result_item_image {
    width: 334px;
    height: auto;

    & img {
      width: 100%;
      height: auto;
    }
  }

  .product_filter_result_item_buttonArea {
    display: flex;
    align-items: center;
    gap: 20px;
    border-top: unset;
    padding: 7.5px 0;
    margin: auto 0 0 5px;

    &:has(.product_filter_result_item_buttonArea_detailLink) {
      justify-content: flex-end;
      padding: 0;
    }

    .btn_favorite_static {
      margin: 0 !important;
      padding: 0;
    }

    .favo_txt {
      display: inline-block;
      line-height: 1;
      padding: 8px 8px 8px 32px;

      &::before {
        position: absolute;
        content: "";
        background: url(/img/default/icon/heart.png) no-repeat center / contain;
        width: 20px;
        height: 20px;
        top: 50%;
        right: unset;
        left: 6px;
        transform: translateY(-50%);
      }
      @media screen and (-webkit-min-device-pixel-ratio: 0) {
        :root &::before {
          top: 50%;
        }
      }
    }

    .product_filter_result_item_buttonArea_input {
      .product_filter_result_item_buttonArea_input_label {
        display: flex;
        align-items: center;
        font-size: 16px;
        cursor: pointer;
      }
  
      .un_compare_check {
        display: none;
        &:checked + .check {
          &::before {
            content: "";
            position: absolute;
            top: -2px;
            left: -2px;
            width: 24px;
            height: 24px;
            background: #CD4747;
          }
          &::after {
            content: "";
            position: absolute;
            top: 1px;
            left: 6px;
            width: 6px;
            height: 12px;
            border: solid #fff;
            border-width: 0 3px 3px 0;
            transform: rotate(45deg);
          }
        }
      }
  
      .check {
        position: relative;
        border: 2px solid #CD4747;
        width: 25px;
        height: 25px;
        margin-right: 8px;
      }
    }
  
    .product_filter_result_item_buttonArea_favo {
      .btn_favorite_static {
        .favo_listLink,
        .tooltipText,
        .favoritePartition {
          display: none !important;
        }
        .deleteFavoriteBtn {
          padding-left: 0;
          margin: 0;

          .favo_txt {
            border: 1px solid transparent;
            &::before {
              background: url(/img/default/icon/heart_green.png) no-repeat center / contain;
            }
          }
        }
      }  
    }
  }

  .product_filter_result_item_buttonArea_inner {
    display: contents;
  }

  .product_filter_result_item_name {
    font-size: 18px;
    font-weight: bold;
    line-height: 1;
    overflow-wrap: anywhere;
    text-align: left;
    margin-bottom: 12px;
  }

  .product_filter_result_itemWrapper {
    display: flex;
    justify-content: flex-start;
    gap: 5px;
    flex-wrap: wrap;
  }

  .product_filter_result_itemTag {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #777;
    color: #777;
    font-size: 13px;
    white-space: nowrap;
    width: fit-content;
    padding: 5px;
  }

  .product_filter_result_item_priceArea {
    margin-top: auto;
  }

  .product_filter_result_priceBlock {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    gap: 5px;
    margin-top: 25px;

    .review-wrap {
      display: flex;
      align-items: center;
      gap: 5px;

      .noReview {
        color: #909090;
        font-size: 13px;
      }
    }

    .review-average {
      font-weight: bold;
      color: #666;
    }

    .review-average_num {
      font-size: 18px;
    }

    .review-summary-container {
      background-color: #fff;
    }

    .starRating {
      padding: 0 !important;
    }

    .reviewNumber {
      font-size: 18px !important;
    }

  }
  
  .product_filter_result_item_price {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 15px;
  }

  .product_filter_result_item_price_after {
    .off {
      font-size: 16px;
      font-weight: bold;
      color: var(--emphasisRed);
      margin-right: 10px;
    }
  }

  .product_filter_result_item_combined {
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1;
    margin-top: 5px;

    .num {
      font-size: 26px;
      line-height: 1;
    }
  }

  .product_filter_result_item_combined_label {
    font-weight: bold;
  }

  .product_filter_result_item_combined_txt {
    font-size: 15px;
    font-weight: bold;
    line-height: 1;
    color: var(--emphasisRed);
  }

  .product_filter_result_item_buttonArea_detailLink {
    & a {
      background-color: var(--dekiruGreen);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      border-radius: 3px;
      font-size: 16px;
      padding: 10px 0;
      width: 304px;
      margin-left: auto;
      cursor: pointer;
    }

    .product_filter_result_item_buttonArea_detailLink_arrow {
      margin-left: 10px;
    }
  }

  .pagination {
    & a {
      color: #03c;
    }

    & a.active {
      color: #fff;
    }
  }
}


/*========== SP ==========*/
.product_filter_result_wrapper {
  @media screen and (max-width: 640px) {
    margin: 20px 0;

    .product_filter_head { 
      flex-flow: column-reverse;
      margin: 5px 10px;
      padding: 0;
    }

    .sort_area {
      gap: 5px;
      
      .sort_orderBlock {
        font-size: 12px;
        padding: 7px;
      }
    }

    .un_search_shareArea {
      width: 100%;
      gap: 10px;
      margin-bottom: 20px;
      
      .un_search_shareArea__link {
        width: 50%;
        text-align: center;
        display: flex;
        align-items: center;
        padding: 8px 12px 8px 36px;
        &.copyLink {
          &::before {
            top: 8px;
            left: 30px;
          }
        }
        &.lineLink {
          &::before {
            top: 5px;
            left: 28px;
          }
        }
        .un_search_shareArea__link_txt {
          margin-left: 25px;
        }
        
      }
    }
  }

  .product_filter_result_item {
    &.product_filter_result_item__responsive {

      .product_filter_result_item_ttlArea {
        padding: 10px;
        min-height: 54px;
      }

      .product_filter_result_item_text_stock {
        font-size: 14px;
        border-radius: 3px;
        padding: 5px;
      }

      .product_filetr_result_detail {
        flex-direction: column;
        gap: 15px;
        padding: 10px;
      }

      .product_filetr_result_detail_inner {
        gap: 15px;

        &.product_filetr_result_detail_inner__main {
          width: auto;
        }
      }

      .product_filter_result_item_img,
      .product_filter_result_item_image {
        width: 265px;
        margin: 0 auto;

        @media screen and (hover: none) and (pointer: coarse) and (min-width: 641px) {
          width: 306px;
        }
        @media screen and (max-width: 640px) {
          width: 265px;
        }

        & img {
          width: 100%;
          height: auto;
        }
      }

      .product_filter_result_item_text {
        gap: 4px;

        &.product_filter_result_item_text__spL {
          margin-left: unset;
        }
      }

      .product_filter_result_item_text_subsidy {
        font-size: 12px;
        padding: 2px 4px;
      }

      .product_filetr_result_detail_campaign {
        font-size: 12px;
        padding: 2px 4px;
      }

      .product_filetr_result_detail_campaign_num {
        font-size: 13px;
      }

      .product_filter_result_item_name {
        text-align: center;
        margin-bottom: 15px;
      }

      .product_filter_result_itemTag {
        line-height: 1.3;
      }

      .product_filter_result_item_priceArea {
        margin-top: 5px;
      }

      .product_filter_result_priceBlock {
        margin: 0 5px;

        .review-average {
          font-size: 14px;
        }

        .review-average_num {
          font-size: 15px;
        }

        .reviewNumber {
          font-size: 16px !important;
        }

        .starRating {
          & span:last-child {
            margin-right: 0;
          }
          & span {
            & + span {
              margin-left: 1px;
            }
          }
        }

      }

      .product_filter_result_item_price {
        margin-top: 5px;
      }

      .product_filter_result_item_combined {
        margin-top: 0;

        .num {
          font-size: 24px;
        }
      }

      .product_filter_result_item_buttonArea {
        flex-direction: column;
        gap: 0;
        border-top: 1px solid #bbb;
        padding: 0;
        margin: 0;
      }

      .product_filter_result_item_buttonArea_inner {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 50px;
        margin: 12px 0;
      }

      .product_filter_result_item_buttonArea {

        .favoriteTooltip {
          position: relative;
          display: inline-block;
          cursor: pointer;
        }

        & a {
          text-decoration: none;
          color: #222;
        }

        .favo_txt {
          background-color: #fff;
          color: #222;
          text-align: right;
          border-radius: 4px;
          border: 1px solid #bbb;
        }
      }

      .product_filter_result_item_buttonArea_detailLink {
        width: 100%;
        & a {
          color: #fff;
          width: 100%;
          margin: 0 auto;
        }
      }
    } 
  }
}