@layer pages {
  .renovation-panel {
    position: relative;
    height: 100%;

    @media (max-width: 1020px) {
      margin-top: 8px;
    }

    >.text-lead {
      font-size: 1.125rem;
      font-feature-settings: "palt" on;
      line-height: 2;
      letter-spacing: 0.08em;

      @media (max-width: 1020px) {
        font-size: 0.875rem;
      }
    }

    >.box-sticky {
      position: sticky;
      top: 0;
      padding-top: 56px;

      @media (max-width: 1020px) {
        padding-top: 23px;
      }
    }

    >.box-sticky .list-condition {
      padding: 21px 20px 18px 32px;

      @media (max-width: 1020px) {
        padding: 13px 12px;
        line-height: 1;
      }

      >span {
        position: relative;
        display: inline;
        font-size: 1rem;
        font-feature-settings: "palt" on;
        line-height: 1;
        letter-spacing: 0.08em;

        @media (max-width: 1020px) {
          font-size: 0.8125rem;
        }
      }
/**
      >span:not(:last-child)::after {
        display: inline-block;
        margin-right: 7px;
        margin-left: 7px;
        content: "／";

        @media (max-width: 1020px) {
          margin-right: 4px;
          margin-left: 4px;
        }
      }
      **/
    }
  }

  .renovation-search {
    padding-bottom: 52px;
    border-bottom: 1px solid var(--color-basic-brown);

    @media (max-width: 1020px) {
      padding-bottom: 32px;
    }

    @media (max-width: 1020px) {
      margin-top: 102px;
    }

    .inner {
      display: flex;
      flex-wrap: wrap;
      row-gap: 10px;
      justify-content: space-between;

      @media (max-width: 1020px) {
        flex-flow: column nowrap;
        row-gap: 5px;
      }
    }

    .inner>.search-count {
      font-size: 1rem;
      font-weight: 500;
      font-feature-settings: "palt" on;
      line-height: 1.6;
    }

    .inner>.search-count>.count {
      margin-left: 4px;
      font-family: var(--font-family-inter);
      font-size: 2rem;
      font-weight: 700;
      font-feature-settings: "palt" on;
      line-height: 160%;
      color: var(--color-basic-attention);
    }

    .inner>.search-count>.unit {
      margin-left: 4px;
      color: var(--color-basic-attention);
    }

    .inner>.search-filter {
      display: flex;
      flex-wrap: nowrap;
      -moz-column-gap: min(calc(64 / 1920 * 100vw), 64px);
      column-gap: min(calc(64 / 1920 * 100vw), 64px);
      margin-top: -10px;

      @media (max-width: 1020px) {
        -moz-column-gap: 20px;
        column-gap: 20px;
        margin-top: 0;
      }
    }

    .inner>.search-filter>.sort,
    .inner>.search-filter>.limit {
      display: flex;
      flex-wrap: nowrap;
      -moz-column-gap: 10px;
      column-gap: 10px;
      align-items: center;

      >label {
        font-size: 1rem;
        font-weight: 500;
        font-feature-settings: "palt" on;
        line-height: 1;
        letter-spacing: 0.08em;

        @media (max-width: 1020px) {
          font-size: 0.8125rem;
        }
      }
    }

    .inner>.search-filter>.sort>.select-01 {
      width: 114px;

      @media (max-width: 1020px) {
        width: 80px;
      }
    }

    .inner>.search-filter>.limit>.select-01 {
      width: 97px;

      @media (max-width: 1020px) {
        width: 67px;
      }
    }
  }

  .renovation-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: auto;
    gap: min(calc(80 / 1920 * 100vw), 80px) min(calc(32 / 1920 * 100vw), 32px);
    margin-top: 64px;

    @media (1021px < width <=1350px) {
      grid-template-columns: repeat(2, 1fr);
      gap: min(calc(80 / 1920 * 100vw), 80px) min(calc(32 / 1920 * 100vw), 32px);
    }

    @media (max-width: 1020px) {
      grid-template-columns: 1fr;
      gap: 40px;
      margin-top: 32px;
    }
  }

  
  .nav-pagination {
    margin-top: 64px;
  }
}