@layer pages {
  #brand-quality .section-main {
    @media (max-width: 1020px) {
      padding-bottom: 104px;
    }
  }

  #brand-quality .section-main>.container {
    max-width: 1726px;
    padding-right: 48px;

    @media (max-width: 1020px) {
      padding-right: 20px;
      padding-left: 20px;
    }
  }

  #brand-quality .section-main>.container>.anchor-link-list-card {
    margin-top: 168px;

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

  #brand-quality .mainvisual-lowerpage {
    >.inner>.col:nth-child(1)>.sub-heading {
      margin-top: min(120px, calc(140 / 1920 * 100vw));

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

  #brand-quality .heading-page-01 {
    >h1 {
      @media (max-width: 1020px) {
        gap: 0;
      }
    }
  }

  /* .section-panel-quality
  ------------------------------------------------ */
  .section-panel-quality {
    position: relative;
    display: grid;
    grid-template-columns: clamp(200px, calc(253 / 1920 * 100vw), 253px) 1fr;
    gap: min(103px, calc(103 / 1920 * 100vw));

    @media (width < 1400px) {
      gap: min(70px, calc(60 / 1400 * 100vw));
    }

    @media (max-width: 1020px) {
      grid-template-columns: 100%;
      gap: 0;
    }

    >aside {
      @media (max-width: 1020px) {
        display: none;
      }
    }
  }

  .anchor-link-list-card+.section-panel-quality {
    margin-top: 338px;

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

  /* .panel-quality
  --------------------------------------------- */
  .panel-quality {
    position: relative;
    height: 100%;

    @media (max-width: 1020px) {
      position: static;
      display: none;
      height: auto;
    }

    >.box-sticky {
      position: sticky;
      top: var(--sticky-top, 120px);

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

    >.box-sticky>.nav {
      display: flex;
      flex-direction: column;
      gap: 0;

      @media (max-width: 1020px) {
        flex-direction: row;
        gap: 2px;
      }
    }

    >.box-sticky>.nav>li {
      flex: 1;
    }

    >.box-sticky>.nav>li>a {
      position: relative;
      display: block;
      padding: 21px 0;
      font-size: 1rem;
      font-weight: 500;
      font-feature-settings: "palt" on;
      color: var(--color-basic-gray);
      letter-spacing: 0.08em;
      transition: color 0.2s ease-out;

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

      &::before,
      &::after {
        position: absolute;
        bottom: -3px;
        left: 0;
        z-index: 1;
        width: 100%;
        height: 1px;
        content: "";
        background-color: var(--color-basic-gray);
      }

      &::before {
        width: 0;
        height: 3px;
        background-color: var(--color-basic-brown);
        transition: width 0.2s ease-out;
      }

      &[aria-current="true"] {
        color: var(--color-basic-brown);

        &::before {
          width: 100%;
        }
      }

      @media (hover: hover) {
        &:hover {
          color: var(--color-basic-brown);
        }
      }
    }
  }

  /* .section-content-quality
  ------------------------------------------------ */
  .section-content-quality {
    *+& {
      margin-top: 161px;

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

    >.inner {
      padding-left: clamp(22px, calc(72 / 1920 * 100vw), 72px);

      @media (max-width: 1020px) {
        padding-left: 0;
      }
    }

    >.inner>.heading {
      display: flex;
      flex-wrap: nowrap;
      gap: clamp(10px, calc(20 / 1920 * 100vw), 20px);
      justify-content: space-between;
      padding-bottom: 57px;
      margin-bottom: 64px;
      line-height: 1.2;
      border-bottom: 1px solid var(--color-basic-brown);

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

      >.title {
        font-family: var(--font-family-instrument-serif);
        font-size: 3rem;
        line-height: 1.2;

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

      >.subtitle {
        padding-top: 15px;
        font-family: var(--font-family-noto-serif);
        font-size: 1.125rem;
        color: var(--color-basic-attention);

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

    >.inner>.container {
      display: grid;
      grid-template-columns: clamp(200px, calc(466 / 1920 * 100vw), 466px) 1fr;
      gap: min(104px, calc(103 / 1920 * 100vw));

      @media (width < 1400px) {
        gap: min(70px, calc(60 / 1400 * 100vw));
      }

      @media (max-width: 1020px) {
        grid-template-columns: 100%;
        gap: 52px;
      }

      &+& {
        margin-top: 104px;

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

    >.inner>.container>.box-sticky {
      position: sticky;
      top: var(--sticky-top, 120px);
      align-self: start;

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

    >.inner>.container>.box-sticky>.heading {
      margin-bottom: 32px;
      font-family: var(--font-family-noto-serif);
      font-size: 2rem;
      font-weight: 500;
      font-feature-settings: "palt" on;
      line-height: 1.6;
      letter-spacing: 0.04em;

      @media (max-width: 1020px) {
        margin-bottom: 16px;
        font-size: 1.25rem;
      }
    }

    >.inner>.container>.box-sticky>.subheading {
      font-family: var(--font-family-noto-serif);
      font-size: 1.25rem;
      font-weight: 500;
      font-feature-settings: "palt" on;
      line-height: 2;
      letter-spacing: 0.08em;

      @media (max-width: 1020px) {
        font-size: 0.9375rem;
        line-height: 1.75;
      }
    }
  }

  /* .article-quality
    ------------------------------------------------ */
  .article-quality {
    &+& {
      margin-top: 104px;

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

    >.heading {
      margin-bottom: 17px;
      font-family: var(--font-family-noto-serif);
      font-size: 2rem;
      font-weight: 500;
      font-feature-settings: "palt" on;
      line-height: 1.6;
      letter-spacing: 0.08em;

      @media (max-width: 1020px) {
        margin-bottom: 8px;
        font-size: 1.25rem;
      }
    }

    >.subheading {
      margin-bottom: 14px;
      font-family: var(--font-family-noto-serif);
      font-size: 1.5rem;
      font-weight: 500;
      font-feature-settings: "palt" on;
      line-height: 1.6;
      letter-spacing: 0.08em;

      @media (max-width: 1020px) {
        margin-bottom: 8px;
        font-size: 1rem;
      }
    }

    >*:is(:not(.heading))+.subheading {
      margin-top: 64px;

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

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

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

      &[data-size-small] {
        font-size: 1rem;

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

      *+& {
        margin-top: 8px;
      }

      &+.box-data-spec {
        margin-top: 25px;

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

    >.image {
      position: relative;
      display: block;

      >img {
        display: block;
        width: 100%;
        height: auto;
      }
    }

    >*+.image {
      margin-top: 32px;

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

    >.note {
      margin-top: 24px;
      font-size: 0.75rem;
      font-feature-settings: "palt" on;
      line-height: 2;
      letter-spacing: 0.08em;

      @media (max-width: 1020px) {
        margin-top: 12px;
        font-size: 0.625rem;
      }
    }

    .box-quality-01+.note {
      margin-top: 8px;
    }

    >.note-list {
      margin-top: 24px;
      font-size: 0.75rem;
      font-feature-settings: "palt" on;
      line-height: 1.6;
      letter-spacing: 0.08em;

      @media (max-width: 1020px) {
        margin-top: 12px;
        font-size: 0.625rem;
      }

      >li {
        position: relative;
      }

      >li+li {
        margin-top: 6px;
      }

      >li::before {
        display: inline-block;
        content: "●";
      }
    }

    >.heading-standard {
      margin-bottom: 24px;
      line-height: 1.6;
      color: var(--color-basic-brown);

      @media (max-width: 1020px) {
        margin-bottom: 12px;
      }

      >.lead {
        position: relative;
        top: -2px;
        padding: 3px 16px;
        margin-right: min(calc(16 / 1920 * 100vw), 16px);
        font-size: 1rem;
        font-weight: 500;
        line-height: 1;
        color: var(--color-white);
        background: var(--color-basic-attention);
        border-radius: 999px;

        @media (max-width: 1020px) {
          top: 0;
          display: inline-block;
          padding: 3px 8px;
          margin-bottom: 8px;
          font-size: 0.8125rem;
        }
      }

      >.text {
        font-family: var(--font-family-noto-serif);
        font-size: 1.5rem;
        font-weight: 500;
        font-feature-settings: "palt" on;
        letter-spacing: 0.08em;

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

    >*+.heading-standard {
      margin-top: 48px;

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

    >.heading-line {
      padding: 6px 0;
      margin-bottom: 24px;
      font-size: 1.125rem;
      font-weight: 500;
      line-height: 1.6;
      text-align: center;
      letter-spacing: 0.08em;
      border-top: 1px solid rgb(87 84 81 / 20%);
      border-bottom: 1px solid rgb(87 84 81 / 20%);

      @media (max-width: 1020px) {
        padding: 3px 0;
        margin-bottom: 12px;
        font-size: 0.875rem;
      }
    }

    >*+.heading-line {
      margin-top: 48px;

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

    >.text-caption {
      font-size: 0.75rem;
      font-feature-settings: "palt" on;
      line-height: 1.6;
      color: var(--color-basic-brown);
      text-align: right;
      letter-spacing: 0.08em;
    }
  }

  /* .article-certification
    ------------------------------------------------ */
  .article-certification {
    padding: 32px clamp(20px, calc(40 / 1920 * 100vw), 40px);
    background-color: var(--color-white);
    border: 1px solid rgb(87 84 81 / 20%);

    @media (max-width: 1020px) {
      padding: 16px 20px;
    }

    *+& {
      margin-top: 48px;

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

    >.heading {
      display: grid;
      grid-template-columns: 102px 1fr;
      -moz-column-gap: clamp(16px, 32 / 1920 * 100vw, 32px);
      column-gap: clamp(16px, 32 / 1920 * 100vw, 32px);
      align-items: center;
      margin-bottom: 22px;

      @media (max-width: 1020px) {
        grid-template-columns: 1fr;
        gap: 8px 0;
        margin-bottom: 12px;
      }

      >.image {
        display: block;

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

      >.image>img {
        display: block;
        width: 100%;
        height: auto;

        @media (max-width: 1020px) {
          width: auto;
          max-height: 32px;
        }
      }

      >.content {
        display: flex;
        flex-direction: column;
        gap: 8px;

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

        >.title {
          font-size: 1.125rem;
          font-weight: 500;
          font-feature-settings: "palt" on;
          line-height: 1.6;
          letter-spacing: 0.08em;

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

        >.note {
          font-size: 0.75rem;
          font-feature-settings: "palt" on;
          line-height: 1.6;
          letter-spacing: 0.08em;

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

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

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

    >.heading-line {
      padding: 8px 0;
      margin-top: 24px;
      margin-bottom: 24px;
      font-size: 1.125rem;
      font-weight: 500;
      line-height: 1.6;
      text-align: center;
      letter-spacing: 0.08em;
      border-top: 1px solid rgb(87 84 81 / 20%);
      border-bottom: 1px solid rgb(87 84 81 / 20%);

      @media (max-width: 1020px) {
        padding: 3px 0;
        margin-top: 14px;
        margin-bottom: 12px;
        font-size: 0.875rem;
      }
    }

    .card {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2px;

      @media (max-width: 1020px) {
        grid-template-columns: 1fr;
      }

      >li {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 3;
        padding: 32px clamp(12px, calc(32 / 1920 * 100vw), 32px) 28px;
        color: var(--color-basic-offwhite);
        background-color: var(--color-basic-brown);

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

      >li>.heading {
        position: relative;
        padding-bottom: 20px;
        font-family: var(--font-family-noto-serif);
        font-size: 1.25rem;
        font-weight: 500;
        font-feature-settings: "palt" on;
        line-height: 1.2;
        letter-spacing: 0.08em;

        @media (max-width: 1020px) {
          padding-bottom: 10px;
          font-size: 0.9375rem;
        }
      }

      >li>.heading::after {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 24px;
        height: 1px;
        content: "";
        background-color: var(--color-basic-offwhite);
      }

      >li>.content {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 2;
        padding-top: 15px;

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

      >li>.content>.title {
        margin-bottom: 15px;
        font-size: 1rem;
        font-weight: 500;
        font-feature-settings: "palt" on;
        line-height: 1.6;
        letter-spacing: 0.08em;

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

      >li>.content>.text {
        font-size: 0.875rem;
        font-feature-settings: "palt" on;
        line-height: 1.6;
        letter-spacing: 0.08em;

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

  /* .article-banner-quality
    ------------------------------------------------ */
  .article-banner-quality {
    position: relative;
    width: calc(100% + 48px);
    padding: 181px min(48px, calc(48 / 1920 * 100vw)) 166px min(72px, calc(72 / 1920 * 100vw));
    margin-top: 168px;
    margin-right: -48px;
    background-image: url("/images/renoalpha/quality/bg-banner-article-01-pc.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;

    @media (max-width: 1020px) {
      width: calc(100% + 40px);
      padding: 52px 20px 74px;
      margin-top: 64px;
      margin-right: -20px;
      margin-left: -20px;
      background-image: url("/images/renoalpha/quality/bg-banner-article-01-sp.jpg");
    }

    >.caption {
      position: absolute;
      right: 0;
      bottom: 0;
      padding: 8px;
      font-size: 0.75rem;
      font-feature-settings: "palt" on;
      line-height: 1.6;
      color: var(--color-white);
      letter-spacing: 0.08em;

      @media (max-width: 1020px) {
        padding: 4px 8px;
        font-size: 0.625rem;
      }
    }

    >.container {
      display: grid;
      grid-template-columns: min(calc(570 / 1920 * 100vw), 570px) min(calc(680 / 1920 * 100vw), 680px);

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

    >.container>.detail {
      display: flex;
      flex-direction: column;
      padding-right: clamp(20px, calc(80 / 1920 * 100vw), 80px);
      color: var(--color-basic-offwhite);

      @media (max-width: 1020px) {
        padding-right: 0;
      }
    }

    >.container>.detail>.heading {
      margin-bottom: 48px;
      font-family: var(--font-family-noto-serif);
      font-size: 2rem;
      font-weight: 500;
      font-feature-settings: "palt" on;
      line-height: 1.6;
      letter-spacing: 0.08em;

      @media (max-width: 1020px) {
        margin-bottom: 24px;
        font-size: 1.25rem;
      }
    }

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

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

    >.container>.detail>.note {
      margin-top: 24px;
      font-size: 0.75rem;
      font-feature-settings: "palt" on;
      line-height: 2;
      letter-spacing: 0.08em;

      @media (max-width: 1020px) {
        margin-top: 12px;
        font-size: 0.625rem;
      }
    }

    >.container>.detail>.text+.note {
      margin-top: 16px;
    }

    >.container>.award {
      width: 100%;
    }

    >.container>.award>.inner {
      display: flex;
      flex-direction: column;
      gap: min(4px, calc(24 / 1920 * 100vw));
      padding: 40px clamp(10px, calc(40 / 1920 * 100vw), 40px);
      background-color: var(--color-basic-offwhite);

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

    >.container>.award>.inner>.content>.logo {
      display: block;
      margin-bottom: 14px;

      >img {
        width: auto;
        height: 33px;
      }
    }

    >.container>.award>.inner>.content>.heading {
      font-family: var(--font-family-noto-serif);
      font-size: 1.5rem;
      font-weight: 500;
      font-feature-settings: "palt" on;
      line-height: 1.6;
      letter-spacing: 0.08em;

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

      *+& {
        margin-bottom: 16px;

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

    >.container>.award>.inner>.content>.text {
      font-size: 1rem;
      font-feature-settings: "palt" on;
      line-height: 2;
      letter-spacing: 0.08em;

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

    >.container>.award>.inner>.image {
      position: relative;
      align-self: start;
      margin: 0;

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

      >img,
      >picture>img {
        display: block;
        width: 100%;
        height: auto;
        -o-object-fit: cover;
        object-fit: cover;
      }
    }

    >.container>.award>.inner>.image>figcaption.image-caption {
      @media (max-width: 1020px) {
        display: none;
      }
    }

    >.link {
      position: absolute;
      right: min(48px, calc(48 / 1920 * 100vw));
      bottom: 75px;
      display: flex;
      justify-content: flex-end;
      margin-top: 48px;

      @media (max-width: 1020px) {
        position: static;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        margin-top: 32px;
      }

      >.text {
        display: flex;
        gap: min(calc(24 / 1920 * 100vw), 24px);
        align-items: center;
        padding: 16px 0;
        font-family: var(--font-family-noto-serif);
        font-size: 1.125rem;
        font-weight: 500;
        font-feature-settings: "palt" on;
        line-height: 1.6;
        color: var(--color-white);
        letter-spacing: 0.08em;
        border-bottom: 1px solid var(--color-basic-offwhite);
        transition: opacity 0.2s ease-out;

        @media (max-width: 1020px) {
          display: inline-flex;
          gap: 8px;
          padding: 10px 0;
          font-size: 0.875rem;
        }

        &::after {
          flex-shrink: 0;
          width: 30px;
          height: 16px;
          content: "";
          background-image: url("/images/renoalpha/common/icon-arrow-right-white-01-pc.svg");
          background-repeat: no-repeat;
          background-position: center center;
          background-size: contain;

          @media (max-width: 1020px) {
            width: 22px;
            height: 12px;
            background-image: url("/images/renoalpha/common/icon-arrow-right-white-01-sp.svg");
          }
        }

        @media (hover: hover) {
          &:hover {
            opacity: 0.7;
          }
        }
      }
    }
  }

  .subheading+.card-article {
    margin-top: 32px;

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