@layer pages {

  /* .section-support */
  .section-support {
    padding: min(150px, calc(150 / 1832 * 100vw)) 20px;

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

    >.inner {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      max-width: 1792px;
      height: min(480px, calc(480 / 1832 * 100vw));
      padding-inline: min(80px, calc(80 / 1832 * 100vw));
      margin: 0 auto;
      background: url("/renovation/assets/images/img-support-pc.jpg") no-repeat left center;
      background-size: cover;

      @media (max-width: 1024px) {
        display: block;
        height: auto;
        padding: 0;
        background: none;
      }
    }

    >.inner>.image {
      display: none;

      @media (max-width: 1024px) {
        position: relative;
        display: block;
      }
    }

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

    >.inner>.image>figcaption {
      position: absolute;
      bottom: 8px;
      left: 8px;
      font-size: 0.75rem;
      line-height: 1;
      color: var(--color-white);
    }

    >.inner>.caption {
      position: absolute;
      bottom: 8px;
      left: 8px;
      z-index: 1;
      font-size: 0.75rem;
      line-height: 1;
      color: var(--color-white);

      @media (max-width: 1024px) {
        display: none;
      }
    }

    >.inner>.content {
      width: min(724px, calc(724 / 1832 * 100vw));

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

    >.inner>.content>.heading {
      font-size: min(2rem, calc(32 / 1832 * 100vw));
      font-weight: bold;
      font-feature-settings: "palt" on;
      line-height: 1.75;
      letter-spacing: 0.08em;

      @media (max-width: 1024px) {
        font-size: 1.25rem;
        line-height: 1.5;
      }
    }

    >.inner>.content>.text {
      margin-top: min(32px, calc(32 / 1832 * 100vw));
      font-size: min(1.125rem, calc(18 / 1832 * 100vw));
      font-feature-settings: "palt" on;
      line-height: 1.75;
      letter-spacing: 0.08em;

      @media (max-width: 1024px) {
        margin-top: 16px;
        font-size: 0.875rem;
        letter-spacing: normal;
      }
    }
  }

  /* .section-concern */
  .section-concern {
    padding-bottom: 150px;
    margin-top: 80px;

    @media (max-width: 1024px) {
      padding-bottom: 80px;
      margin-top: 20px;
    }

    >.inner-upper {
      display: flex;
      gap: min(17px, calc(17 / 1832 * 100vw));
      align-items: flex-end;
      width: 100%;
      max-width: min(1670px, calc(1670 / 1832 * 100vw));
      margin: 0 auto;

      @media (max-width: 1024px) {
        flex-wrap: wrap;
        gap: 0;
        align-items: center;
        justify-content: center;
      }
    }

    >.inner-upper>.image-male {
      flex-shrink: 0;
      order: 1;
      width: min(185px, calc(185 / 1832 * 100vw));

      @media (max-width: 1024px) {
        order: 2;
        width: 89px;
      }
    }

    >.inner-upper>.image-female {
      flex-shrink: 0;
      order: 3;
      width: min(154px, calc(154 / 1832 * 100vw));

      @media (max-width: 1024px) {
        order: 3;
        width: 74px;
        margin-left: 32px;
      }
    }

    >.inner-upper>.image-male>img,
    >.inner-upper>.image-female>img {
      display: block;
      width: 100%;
      height: auto;
    }

    >.inner-upper>.list {
      display: grid;
      flex: 1;
      grid-template-columns: repeat(4, 1fr);
      gap: min(20px, calc(20 / 1832 * 100vw));
      order: 2;

      @media (max-width: 1024px) {
        flex: 0 0 100%;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        order: 1;
        margin-bottom: 24px;
      }
    }

    >.inner-upper>.list>li {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: min(140px, calc(140 / 1832 * 100vw));
      font-size: min(1.25rem, calc(20 / 1832 * 100vw));
      font-weight: 500;
      font-feature-settings: "palt" on;
      line-height: 1.4;
      color: var(--color-black);
      text-align: center;
      letter-spacing: 0.08em;
      background-color: var(--color-grey-01);
      border-radius: 20px;

      @media (max-width: 1024px) {
        display: none;
      }

      &[data-sp="true"] {
        @media (max-width: 1024px) {
          display: flex;
          min-height: 74px;
          padding: 10px 0;
          font-size: 0.8125rem;
          border-radius: 12px;
        }
      }
    }

    >.inner-lower {
      width: 100%;
      max-width: 645px;
      margin: 0 auto;
      margin-top: 104px;
      font-size: 1.125rem;
      font-feature-settings: "palt" on;
      line-height: 2.4;
      color: var(--color-black);
      text-align: center;
      letter-spacing: 0.08em;

      @media (max-width: 1024px) {
        max-width: none;
        padding: 0 20px;
        margin-top: 24px;
        font-size: 0.875rem;
        line-height: 2;
      }
    }
  }

  /* .section-product */
  .section-product {
    display: grid;
    grid-template-columns: 1fr 1fr;
    box-shadow: 0 0 40px rgb(0 0 0 / 15%);

    @media (max-width: 1024px) {
      display: block;
    }

    >.item {
      padding-bottom: min(80px, calc(80 / 1920 * 100vw));
      background-color: var(--color-basic-offwhite);

      @media (max-width: 1024px) {
        padding-top: 16px;
        padding-bottom: 0;
        overflow: hidden;
      }

      &:last-child {
        background-color: var(--color-basic-offwhite-02);
        border-left: 1px solid var(--color-border-grey);

        @media (max-width: 1024px) {
          border-top: 1px solid var(--color-border-grey);
          border-left: 0;
        }
      }
    }
  }

  /* .list-services-reno-alpha */
  .list-services-reno-alpha {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding-right: min(24px, calc(24 / 1832 * 100vw));

    @media (max-width: 1024px) {
      grid-template-columns: 100%;
      gap: 10px;
      padding: 0 40px;
    }
  }

  /* .list-services-reno-alpha */
  .list-services-renoera {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding-left: min(24px, calc(24 / 1832 * 100vw));

    @media (max-width: 1024px) {
      grid-template-columns: 100%;
      gap: 10px;
      padding: 0 19px;
    }
  }

  /* .box-service */
  .box-service {
    position: relative;
    padding: min(64px, calc(64 / 1832 * 100vw)) min(40px, calc(40 / 1832 * 100vw)) min(50px, calc(50 / 1832 * 100vw));

    @media (max-width: 1024px) {
      padding: 0 0 0 17px;
    }

    &::after {
      position: absolute;
      bottom: 0;
      left: 50%;
      display: block;
      width: 20px;
      height: 10px;
      content: "";
      background: url("/renovation/assets/images/icon-arrow-down-01.svg") no-repeat;
      background-size: contain;
      transform: translateX(-50%);

      @media (max-width: 1024px) {
        top: 8px;
        bottom: auto;
        left: 0;
        width: 7px;
        height: 7px;
        background: var(--color-black);
        transform: none;
      }
    }

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

      @media (max-width: 1024px) {
        display: none;
      }
    }

    >.info {
      display: flex;
      flex-direction: column;
      gap: 4px;
      margin-top: min(40px, calc(40 / 1920 * 100vw));
      font-size: min(1.125rem, calc(18 / 1920 * 100vw));
      font-weight: 500;
      line-height: 1.4;
      color: var(--color-black);
      text-align: center;
      letter-spacing: 0.08em;

      @media (max-width: 1024px) {
        display: block;
        margin-top: 0;
        font-size: 0.75rem;
        text-align: left;
        letter-spacing: normal;
      }

      >p {
        @media (max-width: 1024px) {
          display: inline;
        }
      }

      >p>span {
        font-size: min(1.5rem, calc(24 / 1920 * 100vw));
        font-weight: bold;

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

    >.tag {
      display: flex;
      gap: min(8px, calc(8 / 1920 * 100vw));
      justify-content: center;
      margin-top: min(24px, calc(24 / 1920 * 100vw));
      font-size: min(1rem, calc(16 / 1920 * 100vw));
      font-weight: 500;
      line-height: 1.4;
      color: var(--color-grey-02);
      letter-spacing: 0.08em;
      white-space: nowrap;
      opacity: 0.65;

      @media (max-width: 1024px) {
        flex-wrap: wrap;
        gap: 8px;
        justify-content: flex-start;
        margin-top: 4px;
        font-size: 0.75rem;
        letter-spacing: normal;
        white-space: normal;
      }
    }
  }

  /* .box-brand */
  .box-brand {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: min(48px, calc(48 / 1920 * 100vw));
    align-items: center;
    max-width: min(392px, calc(392 / 1920 * 100vw));
    margin: min(80px, calc(80 / 1920 * 100vw)) auto;

    @media (max-width: 1024px) {
      gap: 16px;
      max-width: none;
      padding: 16px 20px 28px;
      margin: 16px 20px 20px;
    }

    &::before {
      position: absolute;
      top: 0;
      left: 50%;
      width: 0;
      height: 0;
      content: "";
      border-style: solid;
      border-top: 6px solid var(--color-white);
      border-right: 6px solid transparent;
      border-bottom: 0;
      border-left: 6px solid transparent;
      transform: translateX(-50%);

      @media (min-width: 1025px) {
        display: none;
      }
    }

    >.heading {
      >span {
        display: block;
        width: 100%;
        padding: min(5px, calc(5 / 1920 * 100vw)) min(20px, calc(20 / 1920 * 100vw));
        font-size: min(1.25rem, calc(20 / 1920 * 100vw));
        font-weight: bold;
        font-feature-settings:
          "palt" on,
          "kern" off;
        line-height: 1.2;
        color: var(--color-grey-02);
        text-align: center;
        letter-spacing: 0.12em;
        background-color: var(--color-grey-03);

        @media (max-width: 1024px) {
          padding: 0 5px;
          font-size: 1rem;
          line-height: 1.5;
          letter-spacing: 0.08em;
          background-color: rgb(219 216 212 / 80%);
        }
      }
    }

    >.logo-dark {
      display: block;
      width: 100%;
      height: auto;

      @media (max-width: 1024px) {
        display: none;
      }
    }

    >.logo-white {
      display: none;

      @media (max-width: 1024px) {
        display: block;
        width: auto;
        height: 56px;
        margin: 0 auto;
      }
    }

    >.button {
      display: none;

      @media (max-width: 1024px) {
        display: block;
        width: 100%;
        padding: 8px 5px;
        font-size: 1.125rem;
        font-weight: 500;
        line-height: 1.4;
        color: var(--color-white);
        text-align: center;
        background-color: var(--color-new-reno-alpha);
        border-radius: 2px;
      }

      &[aria-expanded="true"]>span::after {
        transform: rotate(180deg) translateY(50%);
      }
    }

    >.button>span {
      position: relative;
      display: inline-block;
      padding: 0 30px;

      &::after {
        position: absolute;
        top: 50%;
        right: 0;
        width: 24px;
        height: 12px;
        content: "";
        background: url("/renovation/assets/images/icon-arrow-down-02.svg") no-repeat;
        background-size: contain;
        transform: translateY(-50%);
        transition: transform 0.2s ease-out;
      }
    }

    >.caption {
      display: none;

      @media (max-width: 1024px) {
        position: absolute;
        right: 8px;
        bottom: 8px;
        z-index: 1;
        display: block;
        font-size: 0.6875rem;
        line-height: 1;
        color: var(--color-white);
      }
    }

    &[data-theme="reno-alpha"] {
      @media (min-width: 1025px) {
        max-width: min(562px, calc(562 / 1920 * 100vw));
      }

      @media (max-width: 1024px) {
        background: url("/renovation/assets/images/bg-reno-alpha-brand.jpg") center no-repeat;
        background-size: cover;
      }

      >.logo-dark,
      >.logo-white {
        @media (min-width: 1025px) {
          max-width: min(392px, calc(392 / 1920 * 100vw));
        }
      }
    }

    &[data-theme="renoera"] {
      @media (max-width: 1024px) {
        background: url("/renovation/assets/images/bg-renoera.jpg") center no-repeat;
        background-size: cover;
      }

      >.heading>span {
        background-color: var(--color-grey-04);

        @media (max-width: 1024px) {
          background-color: rgb(229 228 225 / 80%);
        }
      }

      >.button {
        background-color: var(--color-new-renoera);
      }
    }
  }

  .box-image-slogan {
    position: relative;

    @media (max-width: 1024px) {
      display: none;
    }

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

    >figcaption {
      position: absolute;
      right: 8px;
      bottom: 8px;
      z-index: 1;
      font-size: min(0.75rem, calc(12 / 1920 * 100vw));
      line-height: 1;
      color: var(--color-white);
    }
  }

  /* .box-overview */
  .box-overview {
    display: flex;
    flex-direction: column;
    gap: min(56px, calc(56 / 1920 * 100vw));
    max-width: min(680px, calc(680 / 1920 * 100vw));
    padding-top: min(80px, calc(80 / 1920 * 100vw));
    margin: 0 auto;
    text-align: center;

    @media (max-width: 1024px) {
      gap: 0;
      max-width: none;
      padding: 0;
      text-align: left;
    }

    >.item {
      overflow: hidden;

      @media (max-width: 1024px) {
        padding: 24px 20px;

        &:not(:first-child) {
          border-top: 1px solid var(--color-border-grey);
        }
      }
    }

    >.item>.heading {
      display: flex;
      gap: min(12px, calc(12 / 1920 * 100vw));
      align-items: center;
      justify-content: center;
      font-size: min(1.75rem, calc(28 / 1920 * 100vw));
      font-weight: bold;
      font-feature-settings:
        "palt" on,
        "kern" off;
      line-height: 1.5;
      letter-spacing: 0.04em;

      @media (max-width: 1024px) {
        gap: 8px;
        justify-content: flex-start;
        font-size: 0.9375rem;
      }

      &::before {
        display: block;
        width: min(24px, calc(24 / 1920 * 100vw));
        height: min(24px, calc(24 / 1920 * 100vw));
        content: "";
        background: url("/renovation/assets/images/icon-check-01.svg") no-repeat;
        background-size: contain;

        @media (max-width: 1024px) {
          width: 24px;
          height: 24px;
        }
      }
    }

    >.item>.list {
      display: flex;
      flex-direction: column;
      gap: min(8px, calc(8 / 1920 * 100vw));
      margin-top: min(24px, calc(24 / 1920 * 100vw));

      @media (max-width: 1024px) {
        gap: 8px;
        margin-top: 16px;
      }
    }

    >.item>.list>li {
      padding: min(8px, calc(8 / 1920 * 100vw));
      font-size: min(1rem, calc(16 / 1920 * 100vw));
      font-feature-settings: "palt" on;
      line-height: 1.75;
      color: var(--color-grey-02);
      background-color: rgb(76 73 72 / 15%);
      border-radius: 4px;

      @media (max-width: 1024px) {
        padding: 8px 16px;
        font-size: 0.875rem;
      }

      >small {
        display: block;
        margin-top: 4px;
        font-size: min(0.6875rem, calc(11 / 1920 * 100vw));
        font-style: normal;
        font-feature-settings: "palt" on;
        line-height: 1.75;
        letter-spacing: 0.08em;

        @media (max-width: 1024px) {
          font-size: 0.6875rem;
        }
      }
    }

    >.item>.list>li>a {
      text-decoration: underline;
    }

    >.item>.remark {
      margin-top: min(8px, calc(8 / 1920 * 100vw));
      font-size: min(0.6875rem, calc(11 / 1920 * 100vw));
      font-style: normal;
      font-feature-settings: "palt" on;
      line-height: 1.75;
      letter-spacing: 0.08em;

      @media (max-width: 1024px) {
        margin-top: 8px;
        font-size: 0.6875rem;
      }
    }

    >.item>.remark>a {
      text-decoration: underline;
    }
  }

  .box-image-total {
    display: block;
    padding: 0 min(64px, calc(64 / 1920 * 100vw));
    margin-top: min(80px, calc(80 / 1920 * 100vw));

    @media (max-width: 1024px) {
      padding: 0;
      margin-top: 40px;
    }

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

  .link-product-logo {
    display: block;
    max-width: min(528px, calc(528 / 1920 * 100vw));
    padding: min(24px, calc(24 / 1920 * 100vw));
    margin: min(80px, calc(80 / 1920 * 100vw)) auto 0;
    background-color: var(--color-new-reno-alpha);
    border-radius: 2px;
    transition: background 0.2s ease-out;

    @media (max-width: 1024px) {
      max-width: 335px;
      padding: 24px 20px;
      margin: 40px auto 80px;
    }

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

    &[data-theme="renoera"] {
      background-color: var(--color-new-renoera);

      @media (hover: hover) {
        &:hover {
          background-color: var(--color-black);
        }
      }
    }

    >.logo {
      display: block;
      width: auto;
      height: min(56px, calc(56 / 1920 * 100vw));
      margin: 0 auto;

      @media (max-width: 1024px) {
        height: 56px;
      }
    }

    >span {
      display: flex;
      gap: 4px;
      align-items: center;
      justify-content: center;
      margin-top: min(16px, calc(16 / 1920 * 100vw));
      font-size: min(1.125rem, calc(18 / 1920 * 100vw));
      font-weight: 500;
      color: var(--color-white);
      text-align: center;

      @media (max-width: 1024px) {
        margin-top: 16px;
        font-size: 1.125rem;
      }

      &::after {
        display: block;
        width: min(20px, calc(20 / 1920 * 100vw));
        height: min(20px, calc(20 / 1920 * 100vw));
        content: "";
        background: url("/renovation/assets/images/icon-new-window.svg") no-repeat;
        background-size: contain;

        @media (max-width: 1024px) {
          width: 20px;
          height: 20px;
        }
      }
    }
  }

  .box-accordion {
    @media (max-width: 1024px) {
      height: auto;
      overflow: hidden;
      transition: height 0.3s ease-out;

      &[aria-hidden="true"] {
        height: 0;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      transition: none;
    }

    @media (min-width: 1025px) {
      height: auto !important;
      overflow: visible;
    }
  }
}