@layer components {

  /* .anchor-link-card
  ------------------------------------------------ */
  .anchor-link-card {
    position: relative;
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    gap: 20px;
    width: 100%;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--color-basic-brown);
    transition: opacity 0.2s ease-out;

    @media (max-width: 1020px) {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding-bottom: 24px;
    }

    &::after {
      position: absolute;
      right: 0;
      bottom: 16px;
      width: 24px;
      height: 24px;
      content: "";
      background-image: url("/images/renoalpha/common/icon-arrow-down-brown-01.svg");
      background-repeat: no-repeat;
      background-position: center center;
      background-size: contain;

      @media (max-width: 1020px) {
        bottom: 8px;
        width: 16px;
        height: 24px;
        background-image: url("/images/renoalpha/common/icon-arrow-down-brown-02.svg");
      }
    }

    >.title {
      font-family: var(--font-family-noto-serif);
      font-size: 1.5rem;
      font-weight: 500;
      font-feature-settings: "palt" on;
      line-height: 1.2;
      color: var(--color-basic-attention);
      letter-spacing: 0.08em;

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

    >.text {
      margin-bottom: 30px;
      font-size: 1rem;
      font-feature-settings: "palt" on;
      line-height: 1.6;
      letter-spacing: 0.04em;

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

    >.image {
      position: relative;

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

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

  /* .anchor-link-list-card
  ------------------------------------------------ */
  .anchor-link-list-card {
    ul {
      display: grid;
      grid-template-rows: auto auto auto;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px calc(32 / 1920 * 100vw);

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

    ul>li {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: span 3;

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

@layer components {

  /* .banner-service
  ------------------------------------------------ */
  .banner-service {
    padding-top: 272px;
    padding-bottom: 168px;

    @media (max-width: 1020px) {
      padding-top: 104px;
      padding-bottom: 64px;
    }

    >.container {
      max-width: 1920px;
      padding-right: 48px;
      padding-left: min(194px, calc(194 / 1920 * 100vw));
      margin-right: auto;
      margin-left: auto;

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

    >.container>.box-wrapper {
      display: flex;
      gap: min(calc(2 / 1920 * 100vw), 2px);

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

    >.container>.box-wrapper>.box-property {
      position: relative;
      flex: 0 0 min(calc(1118 / 1920 * 100vw), 1118px);
      padding: 64px min(calc(64 / 1920 * 100vw), 64px);
      background-image: url("/images/renoalpha/common/bg-banner-service-01-pc.jpg");
      background-repeat: no-repeat;
      background-position: top center;
      background-size: cover;

      @media (max-width: 1020px) {
        display: block;
        padding: 52px 20px 48px;
        background-image: url("/images/renoalpha/common/bg-banner-service-01-sp.jpg");
      }

      &::after {
        position: absolute;
        right: 0;
        bottom: 0;
        z-index: 3;
        padding: min(8px, calc(8 / 1920 * 100vw));
        font-size: min(0.75rem, calc(12 / 1920 * 100vw));
        font-weight: 400;
        font-feature-settings: "palt" on;
        line-height: 160%;
        color: var(--color-white);
        letter-spacing: 0.08em;
        content: "image photo";
        background: rgb(88 84 81 / 75%);

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

    >.container>.box-wrapper>.box-property>.inner {
      display: flex;
      gap: 10px;
      justify-content: space-between;

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

    >.container>.box-wrapper>.box-property>.inner>.detail {
      flex: 0 0 min(calc(460 / 1920 * 100vw), 460px);
      height: 100%;
      color: var(--color-basic-offwhite);
    }

    >.container>.box-wrapper>.box-property>.inner>.detail>.heading {
      margin-bottom: clamp(40px, calc(140 / 1920 * 100vw), 140px);
      font-family: var(--font-family-noto-serif);
      font-size: clamp(0.75rem, calc(32 / 1920 * 100vw), 2rem);
      font-weight: 500;
      font-feature-settings: "palt" on;
      line-height: 1.6;
      letter-spacing: 0.05em;

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

    >.container>.box-wrapper>.box-property>.inner>.detail>.text {
      padding-right: calc(20 / 1920 * 100vw);
      font-size: 1.125rem;
      font-feature-settings: "palt" on;
      line-height: 2;
      letter-spacing: 0.08em;

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

    >.container>.box-wrapper>.box-property>.inner>.banner-service-link {
      display: flex;
      flex: 0 0 min(calc(480 / 1920 * 100vw), 480px);
      flex-direction: column;
      justify-content: space-between;

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

    >.container>.box-wrapper>.box-guide {
      flex: 0 0 min(calc(558 / 1920 * 100vw), 558px);
      padding: 64px min(calc(64 / 1920 * 100vw), 64px);
      background-image: url("/images/renoalpha/common/bg-banner-service-02-pc.jpg");
      background-repeat: no-repeat;
      background-position: top center;
      background-size: cover;

      @media (max-width: 1020px) {
        display: block;
        padding: 52px 20px;
        background-image: url("/images/renoalpha/common/bg-banner-service-02-sp.jpg");
      }
    }

    >.container>.box-wrapper>.box-guide>.banner-service-link {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 100%;

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

    &[data-variant-page="after-service"] {
      padding-top: 0 !important;

      >.container>.box-wrapper>.box-property {
        background-image: url("/images/renoalpha/after-service/bg-banner-01-pc.jpg");

        @media (max-width: 1020px) {
          background-image: url("/images/renoalpha/after-service/bg-banner-01-sp.jpg");
        }
      }
    }
  }

  .section-main+.banner-service {
    padding-top: 0;

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

  /* .banner-service-link
  ------------------------------------------------ */
  .banner-service-link {
    padding: 35px min(calc(40 / 1920 * 100vw), 40px) 40px;
    color: var(--color-basic-offwhite);
    background-color: var(--color-basic-brown);
    border-radius: 2px;
    transition: background-color 0.3s ease-out;

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

    >.heading {
      display: flex;
      flex-direction: column;
      gap: 1px;

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

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

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

    >.heading>.subtitle {
      font-family: var(--font-family-noto-serif);
      font-size: 1rem;
      font-weight: 500;

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

    >.inner {
      display: flex;
      gap: min(calc(30 / 1920 * 100vw), 30px);
      min-height: 170px;

      @media (max-width: 1020px) {
        gap: 20px;
        min-height: auto;
      }
    }

    >.inner>.image {
      position: relative;
      flex: 170 0 0;
      height: -moz-fit-content;
      height: fit-content;

      @media (max-width: 1020px) {
        flex: 0 0 100px;
      }

      >img {
        display: block;
        width: 100%;
        height: auto;
        border-radius: 2px;
        clip-path: inset(0 round 2px);
        transition: clip-path 0.3s ease-out;
      }
    }

    >.inner>.image>figcaption.image-caption {
      transition:
        right 0.3s ease-out,
        bottom 0.3s ease-out;

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

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

      &:hover>.inner>.image>img {
        clip-path: inset(calc(10 / 170 * 100%) round 2px);
      }

      &:hover>.inner>.image>figcaption.image-caption {
        right: calc(10 / 170 * 100%);
        bottom: calc(10 / 170 * 100%);
      }
    }

    >.inner>.content {
      display: flex;
      flex: 200 0 0;
      flex-direction: column;
      justify-content: space-between;
      color: var(--color-basic-offwhite);

      @media (max-width: 1020px) {
        gap: 4px;
        justify-content: flex-start;
      }

      >.detail {
        /* style */
      }

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

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

      >.link {
        position: relative;
        display: flex;
        justify-content: flex-end;
        padding-top: 10px;
        padding-bottom: 10px;
        font-family: var(--font-family-noto-serif);
        font-size: 1.125rem;
        font-weight: 500;
        font-feature-settings: "palt" on;
        line-height: 1.6;
        letter-spacing: normal;

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

        >span::after {
          display: inline-block;
          width: 30px;
          height: 16px;
          margin-bottom: -2px;
          margin-left: min(calc(24 / 1920 * 100vw), 24px);
          content: "";
          background-image: url("/images/renoalpha/common/icon-arrow-right-offwhite-01.svg");
          background-repeat: no-repeat;
          background-position: center center;
          background-size: contain;

          @media (max-width: 1020px) {
            width: 22px;
            height: 12px;
            margin-left: 12px;
          }
        }
      }
    }
  }
}

@layer components {

  /* .box-condition
------------------------------------------------ */
  .box-condition {
    padding: 27px 32px;
    background-color: var(--color-basic-light-gray);
    border-top: 1px solid var(--color-basic-brown);

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

    >.inner {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    >.inner>span {
      font-size: 1.125rem;
      font-weight: 500;
      font-feature-settings: "palt" on;
      line-height: 1;
      color: var(--color-basic-brown);
      letter-spacing: 0.08em;

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

  /* .box-slider-gallery
------------------------------------------------ */
  .box-slider-gallery {
    >.slider {
      @media (max-width: 1020px) {
        position: relative;
        margin: 0 -20px;
      }

      @media (hover: hover) {
        &:hover {

          >.swiper-button-prev,
          >.swiper-button-next {
            opacity: 1;
          }
        }
      }
    }

    >.slider>.label-zoom {
      position: absolute;
      top: 10px;
      right: 8px;
      z-index: 3;
      display: flex;
      gap: 2px;
      align-items: center;
      padding: 8px;
      font-size: 0.625rem;
      font-weight: 500;
      color: var(--color-white);
      pointer-events: none;
      background: rgb(0 0 0 / 20%);
      border: 1px solid rgb(255 255 255 / 30%);
      border-radius: 999px;
      -webkit-backdrop-filter: blur(4px);
      backdrop-filter: blur(4px);

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

      &::before {
        display: block;
        width: 16px;
        height: 16px;
        content: "";
        background: url("/images/renoalpha/common/icon-zoom-02.svg") no-repeat;
        background-size: contain;
      }
    }

    >.slider>.swiper-button-prev,
    >.slider>.swiper-button-next {
      position: absolute;
      top: 50%;
      right: 0;
      z-index: 2;
      width: 64px;
      height: 64px;
      background: rgb(244 241 237 / 75%);
      opacity: 0;
      transition: opacity 0.2s ease-out;

      &::after {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 7px;
        height: 14px;
        content: "";
        background: url("/images/renoalpha/common/icon-arrow-right-brown-02.svg") no-repeat;
        transform: translate(-50%, -50%);
      }
    }

    >.slider>.swiper-button-prev {
      right: auto;
      left: 0;

      &::after {
        content: "";
        transform: rotate(180deg) translate(50%, 50%);
      }
    }

    >.info {
      display: flex;
      gap: 25px;
      align-items: center;
      justify-content: flex-start;
      padding: 8px 0;

      @media (max-width: 1020px) {
        gap: 10px;
        padding: 8px 0;
      }
    }

    >.info>.pages {
      display: flex;
      gap: 4px;
      min-width: 64px;
      font-family: var(--font-family-inter);
      font-size: 1rem;
      font-weight: 500;
      line-height: 1;

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

    >.info>.pages>span {
      display: block;
    }

    >.info>.navigation {
      display: flex;
      gap: 8px;

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

    >.info>.navigation>button {
      display: block;
      width: 80px;
      height: 48px;
      background: url("/images/renoalpha/common/icon-arrow-next-white-01-pc.svg") no-repeat;
      background-size: contain;
      transition: opacity 0.2s ease-out;

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

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

      &[data-button-prev] {
        transform: rotate(180deg);
      }
    }

    >.thumbs {
      @media (max-width: 1020px) {
        margin: 0 -20px;
        overflow: hidden;
        white-space: nowrap;
      }
    }

    >.thumbs>.thumbs-inner {
      display: grid;
      grid-template-columns: repeat(14, 1fr);
      gap: 8px;

      @media (max-width: 1020px) {
        display: flex;
        gap: 12px;
        padding: 0 20px 0 52px;
        overflow: auto hidden;
        overscroll-behavior-x: contain;
        white-space: nowrap;
        touch-action: pan-x;
        scrollbar-width: none;

        /* stylelint-disable-next-line property-no-vendor-prefix */
        &::-webkit-scrollbar {
          display: none;
        }
      }
    }

    >.thumbs>.thumbs-inner>button {
      position: relative;
      aspect-ratio: 1 / 1;
      border-radius: 2px;

      @media (max-width: 1020px) {
        flex-shrink: 0;
        width: 94px;
        opacity: 0.95;
        transform: scale(0.95);
        transition:
          transform 0.2s ease-out,
          opacity 0.2s ease-out;
      }

      &[aria-current="true"] {
        @media (max-width: 1020px) {
          opacity: 1;
          transform: scale(1);
        }

        &::after {
          position: absolute;
          top: 0;
          left: 0;
          z-index: 1;
          display: block;
          width: 100%;
          height: 100%;
          pointer-events: none;
          content: "";
          background: linear-gradient(0deg, rgb(128 104 79 / 50%), rgb(128 104 79 / 50%));
          border-radius: 2px;

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

    >.thumbs>.thumbs-inner>button>img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
      object-fit: cover;
      border-radius: 2px;
    }

    >.swiper>.swiper-wrapper>.swiper-slide>figure {
      position: relative;
      aspect-ratio: 1140 / 640;
      background-color: #e2ddd7;
      border-radius: 2px;

      &::after {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        width: 100%;
        height: 100%;
        content: "";
        background: linear-gradient(180deg, rgb(87 84 81 / 0%) 50%, rgb(87 84 81 / 58%) 100%);
      }
    }

    >.swiper>.swiper-wrapper>.swiper-slide>figure>img {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 0;
      display: block;
      width: 100%;
      height: 100%;
      -o-object-fit: contain;
      object-fit: contain;
      border-radius: 2px;

      @media (max-width: 1020px) {
        -o-object-fit: cover;
        object-fit: cover;
      }
    }

    >.swiper>.swiper-wrapper>.swiper-slide>figure>figcaption {
      position: absolute;
      right: 24px;
      bottom: 24px;
      left: 24px;
      z-index: 2;
      font-family: var(--font-family-noto-serif);
      font-size: 1.5rem;
      font-weight: 500;
      line-height: 1.2;
      color: var(--color-basic-offwhite);

      @media (max-width: 1020px) {
        right: 20px;
        bottom: 16px;
        left: 20px;
        font-size: 1rem;
      }
    }
  }

  /* .box-cms
------------------------------------------------ */
  .box-cms {
    margin-block: 64px 40px;

    @media (max-width: 1020px) {
      margin-block: 40px 20px;
    }

    &:first-child {
      margin-top: 0;
    }

    &:last-child {
      margin-bottom: 0;
    }
  }

  /* .box-data-spec
------------------------------------------------ */
  .box-data-spec {
    padding: 28px min(calc(40 / 1920 * 100vw), 40px) 36px;
    margin-top: 16px;
    background-color: var(--color-white);
    border: 1px solid rgb(87 84 81 / 20%);

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

    >.heading {
      margin-bottom: 13px;
      font-size: 1rem;
      font-weight: 500;
      font-feature-settings: "palt" on;
      line-height: 2;
      letter-spacing: 0.08em;

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

    >.list {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 17px clamp(12px, calc(32 / 1920 * 100vw), 32px);

      @media (max-width: 1020px) {
        grid-template-columns: repeat(2, 1fr);
        gap: 4px 16px;
      }
    }

    >.list>li {
      position: relative;
      padding-left: 16px;
      font-size: 1rem;
      font-feature-settings: "palt" on;
      line-height: 1.2;
      letter-spacing: 0.08em;
    }

    >.list>li::before {
      position: absolute;
      top: 10px;
      left: 0;
      display: block;
      width: 8px;
      height: 1px;
      content: "";
      background-color: var(--color-basic-brown);
    }

    >.list>li.display-none {
      @media (width <=1230px) {
        display: none;
      }

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

    >.list>li.display-none::before {
      background-color: transparent;
    }

    &[data-column="4"]>.list {
      grid-template-columns: repeat(4, 1fr);
      gap: 20px clamp(4px, calc(8 / 1920 * 100vw), 8px);

      @media (max-width: 1020px) {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px 16px;
      }
    }

    &[data-column="5"]>.list {
      grid-template-columns: repeat(5, 1fr);
      gap: 20px clamp(4px, calc(8 / 1920 * 100vw), 8px);

      @media (width <=1230px) {
        grid-template-columns: repeat(3, 1fr);
      }

      @media (max-width: 1020px) {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px 16px;
      }
    }
  }

  /* .box-quality-01
------------------------------------------------ */
  .box-quality-01 {
    display: flex;
    flex-direction: column;
    gap: 17px;
    justify-content: center;
    padding: 32px calc(40 / 1920 * 100vw) 25px;
    background-color: var(--color-white);
    border: 1px solid rgb(87 84 81 / 20%);

    @media (max-width: 1020px) {
      gap: 8px;
      justify-content: flex-start;
      padding: 16px 20px 12px;
    }

    >.heading {
      display: inline-flex;
      justify-content: center;

      @media (max-width: 1020px) {
        justify-content: flex-start;
      }
    }

    >.heading>span {
      position: relative;
      padding-left: 28px;
      font-size: 1.125rem;
      font-weight: 500;
      font-feature-settings: "palt" on;
      line-height: 1.4;
      letter-spacing: 0.08em;

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

    >.heading>span::before {
      position: absolute;
      top: 0;
      left: 0;
      width: 24px;
      min-width: 24px;
      height: 24px;
      content: "";
      background-image: url("/images/renoalpha/common/icon-checked-brown-01.svg");
      background-repeat: no-repeat;
      background-position: center center;
      background-size: contain;

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

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

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

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

  /* .box-quality-list
------------------------------------------------ */
  .box-quality-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;

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

    >.item {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 110px;
      padding: 15px;
      background-color: var(--color-white);
      border: 1px solid rgb(87 84 81 / 20%);

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

    >.item>.text {
      position: relative;
      display: inline-flex;
      gap: 4px;
      align-items: flex-start;
      font-size: 0.875rem;
      font-weight: 500;
      font-feature-settings: "palt" on;
      line-height: 1.4;
      letter-spacing: 0.08em;

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

    >.item>.text::before {
      width: 16px;
      min-width: 16px;
      height: 16px;
      margin-top: 2px;
      content: "";
      background-image: url("/images/renoalpha/common/icon-checked-brown-01.svg");
      background-repeat: no-repeat;
      background-position: center center;
      background-size: contain;

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

@layer components {
  .breadcrumb {
    padding: 40px 48px 0 194px;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;

    @media (max-width: 1020px) {
      padding: 0 20px;
      margin-top: 35px;
      overflow: auto hidden;
    }

    &[data-gradient]&::after {
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      display: block;
      width: 100%;
      height: 100px;
      content: "";
      background: linear-gradient(180deg,
          #f4f1ed 0%,
          rgb(244 241 237 / 97%) 5%,
          rgb(244 241 237 / 92%) 10%,
          rgb(244 241 237 / 86%) 15%,
          rgb(244 241 237 / 78%) 20%,
          rgb(244 241 237 / 62%) 30%,
          rgb(244 241 237 / 46%) 40%,
          rgb(244 241 237 / 33.5%) 50%,
          rgb(244 241 237 / 21%) 60%,
          rgb(244 241 237 / 12%) 70%,
          rgb(244 241 237 / 5%) 80%,
          rgb(244 241 237 / 1%) 90%,
          rgb(244 241 237 / 0%) 100%);
      -webkit-backdrop-filter: blur(0);
      backdrop-filter: blur(0);

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

    >ul {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: flex-end;

      @media (max-width: 1020px) {
        flex-wrap: nowrap;
        justify-content: flex-start;
        white-space: nowrap;
      }
    }

    >ul>li {
      display: flex;
      gap: 10px;

      @media (max-width: 1020px) {
        flex-shrink: 0;
      }

      &[aria-current="page"] {
        color: var(--color-basic-attention);
      }

      &:not(:first-child)::before {
        display: block;
        width: 12px;
        height: 12px;
        content: "";
        background: url("/images/renoalpha/common/icon-divider.svg") no-repeat;
        background-size: contain;
      }

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

    >ul>li>a {
      display: inline-block;
      color: var(--color-basic-breadcrumb);
      transition: color 0.2s ease-out;

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

      >img {
        display: none;

        @media (max-width: 1020px) {
          display: block;
          width: 14px;
          height: auto;
        }
      }

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

@layer components {

  /* ---------------------------------------------
  .btn-default
------------------------------------------------ */
  .btn-default {
    position: relative;
    display: flex;
    width: 100%;
    min-height: 64px;
    padding: 24px 60px 24px 24px;
    font-family: var(--font-family-noto-serif);
    font-size: 1.125rem;
    font-weight: 500;
    font-feature-settings: "palt" on;
    color: var(--color-basic-offwhite);
    letter-spacing: 0.08em;
    background-color: var(--color-basic-brown);
    border-radius: 2px;
    transition: background 0.2s ease-out;

    &::after {
      position: absolute;
      top: 50%;
      right: 24px;
      width: 30px;
      height: 16px;
      content: "";
      background: url("/images/renoalpha/common/icon-arrow-right-offwhite-01.svg") no-repeat;
      background-size: contain;
      transform: translateY(-50%);
    }

    &[data-state="big"] {
      min-height: 80px;
    }

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

    &[data-variant-form="submit"] {
      padding: 16px 24px;
      letter-spacing: 0.04em;
      border-radius: 8px;
    }

    &[data-variant-form="submit"]::after {
      display: none;
    }
  }

  /* ---------------------------------------------
  .btn-ghost
------------------------------------------------ */
  .btn-ghost {
    position: relative;
    display: flex;
    padding: 17px 78px 17px 24px;
    border: 1px solid var(--color-basic-attention);
    border-radius: 2px;

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

    &::after {
      position: absolute;
      top: 50%;
      right: 24px;
      width: 30px;
      height: 16px;
      content: "";
      background: url("/images/renoalpha/common/icon-arrow-right-attention-01.svg") no-repeat;
      background-size: contain;
      transform: translateY(-50%);

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

    >.text {
      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-basic-attention);
      letter-spacing: 0.08em;

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

    &:is(a)>.text {
      transition: color 0.2s ease-out;
    }

    &:is(a) {
      &::after {
        transition: background-image 0.2s ease-out;
      }

      @media (hover: hover) {
        &:hover {
          border-color: var(--color-basic-black);

          >.text {
            color: var(--color-basic-black);
          }

          &::after {
            background-image: url("/images/renoalpha/common/icon-arrow-right-black-01.svg");
          }
        }
      }
    }
  }

  /* ---------------------------------------------
  .btn-link-01
------------------------------------------------ */
  .btn-link-01 {
    position: relative;
    display: block;
    padding-block: 11px;
    padding-right: 40px;
    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-basic-brown);
    letter-spacing: 0.08em;
    transition: color 0.2s ease-out;

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

    &::before {
      position: absolute;
      bottom: 0;
      left: 0;
      display: block;
      width: 100%;
      height: 1px;
      content: "";
      background-color: var(--color-basic-brown);
      opacity: 1;
      transition: opacity 0.2s ease-out;
    }

    &::after {
      position: absolute;
      top: 50%;
      right: 0;
      display: block;
      width: 30px;
      height: 16px;
      padding: 4px 8px;
      content: "";
      background-color: var(--color-basic-brown);
      background-image: url("/images/renoalpha/common/icon-arrow-right-offwhite-02.svg");
      background-repeat: no-repeat;
      background-position: center;
      background-size: 14px 8px;
      border-radius: 2px;
      transform: translateY(-50%);
      transition: background-color 0.2s ease-out;

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

    &:focus-visible {
      outline: 2px solid var(--color-basic-brown);
      outline-offset: 2px;
      box-shadow: 0 0 0 4px var(--color-white);
    }

    @media (hover: hover) {
      &:hover {
        color: var(--color-basic-black);
        border: 0;

        &::before {
          opacity: 0;
        }

        &::after {
          background-color: var(--color-basic-black);
        }
      }
    }
  }

  /* ---------------------------------------------
  .btn-link-02
------------------------------------------------ */
  .btn-link-02 {
    position: relative;
    display: inline-flex;
    padding-block: 11px;
    padding-left: 54px;
    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-basic-brown);
    letter-spacing: 0.08em;
    transition: color 0.2s ease-out;

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

    &::before {
      position: absolute;
      bottom: 0;
      left: 0;
      display: block;
      width: 100%;
      height: 1px;
      content: "";
      background-color: var(--color-basic-brown);
      opacity: 1;
      transition: opacity 0.2s ease-out;

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

    &::after {
      position: absolute;
      top: 50%;
      left: 0;
      display: block;
      width: 30px;
      height: 16px;
      padding: 4px 8px;
      content: "";
      background-image: url("/images/renoalpha/common/icon-arrow-left-basic-01.svg");
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      transform: translateY(-50%);
      transition: background-image 0.2s ease-out;

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

    &:focus-visible {
      outline: 2px solid var(--color-basic-brown);
      outline-offset: 2px;
      box-shadow: 0 0 0 4px var(--color-white);
    }

    @media (hover: hover) {
      &:hover {
        color: var(--color-basic-black);
        border: 0;

        &::before {
          opacity: 0;
        }

        &::after {
          background-image: url("/images/renoalpha/common/icon-arrow-left-black-01.svg");
        }
      }
    }
  }

  /* ---------------------------------------------
  .btn-icon-default
------------------------------------------------ */
  .btn-icon-default {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 80px;
    padding: 24px 60px 24px 80px;
    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-basic-offwhite);
    letter-spacing: 0.08em;
    background-color: var(--color-basic-brown);
    border-radius: 2px;
    transition: background 0.2s ease-out;

    @media (max-width: 1020px) {
      min-height: 44px;
      padding: 8px 52px 8px 48px;
      font-size: 0.875rem;
      border-radius: 1px;
    }

    &::before {
      position: absolute;
      top: 50%;
      left: 24px;
      width: 32px;
      height: 32px;
      content: "";
      background: url("/images/renoalpha/common/icon-area-offwhite.svg") no-repeat;
      background-size: contain;
      transform: translateY(-50%);

      @media (max-width: 1020px) {
        left: 12px;
        width: 24px;
        height: 24px;
      }
    }

    &::after {
      position: absolute;
      top: 50%;
      right: 24px;
      width: 30px;
      height: 16px;
      content: "";
      background: url("/images/renoalpha/common/icon-arrow-right-offwhite-01.svg") no-repeat;
      background-size: contain;
      transform: translateY(-50%);

      @media (max-width: 1020px) {
        right: 12px;
        width: 22px;
        height: 12px;
      }
    }

    &[data-icon="marker"] {
      &::before {
        background-image: url("/images/renoalpha/common/icon-marker-offwhite.svg");
      }
    }

    &:focus-visible {
      outline: 2px solid var(--color-basic-brown);
      outline-offset: 2px;
      box-shadow: 0 0 0 4px var(--color-white);
    }

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

  /* ---------------------------------------------
  .btn-outline-01
------------------------------------------------ */
  .btn-outline-01 {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 64px;
    padding: 16px 24px;
    font-family: var(--font-family-base);
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--color-basic-black);
    letter-spacing: 0.04em;
    cursor: pointer;
    border: 1px solid var(--color-basic-black);
    border-radius: 8px;
    transition: opacity 0.2s ease-out;

    @media (max-width: 1020px) {
      border-radius: 4px;
    }

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

@layer components {

  /* ---------------------------------------------
  .card-estate
------------------------------------------------ */
  .card-estate {
    position: relative;
    display: flex;
    flex-direction: column;

    &:focus-visible {
      outline: 2px solid var(--color-basic-brown);
      outline-offset: 2px;
      box-shadow: 0 0 0 4px var(--color-white);
    }

    >.image {
      aspect-ratio: 383 / 255;
      overflow: hidden;

      >img {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
        transition: transform 0.3s ease-out;
      }
    }

    >.inner {
      display: flex;
      flex-direction: column;
      padding: 24px 16px 48px;

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

      @media (max-width: 767px) {
        padding: 12px 0 44px;
      }
    }

    >.inner>.tag {
      display: flex;
      flex-wrap: wrap;
      gap: 4px 8px;
      font-size: 0.75rem;
      font-weight: 500;
      line-height: 1;
      color: var(--color-basic-attention);

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

    >.inner>.heading {
      margin-top: 32px;
      font-family: var(--font-family-noto-serif);
      font-size: 1.125rem;
      font-weight: 500;
      line-height: 1.2;

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

    >.inner>.content {
      position: relative;
      display: flex;
      flex-direction: column;
      row-gap: 9px;
      padding-top: 16px;
      margin-top: 32px;

      @media (max-width: 1020px) {
        row-gap: 4px;
        padding-top: 10px;
        margin-top: 16px;
      }

      &::before {
        position: absolute;
        top: 0;
        left: 0;
        width: 24px;
        height: 1px;
        content: "";
        background-color: var(--color-basic-brown);
      }
    }

    >.inner>.content>.title {
      font-size: 1rem;
      font-weight: 500;
      line-height: 1.2;
      color: var(--color-basic-attention);

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

    >.inner>.content>.text {
      font-size: 0.875rem;
      line-height: 1.4;

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

    >.inner>.content>.property {
      display: flex;
      flex-wrap: nowrap;
      gap: 17px;

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

    >.inner>.content>.property>.price {
      position: relative;
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      padding-right: 17px;

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

      &::after {
        position: absolute;
        top: 2px;
        right: 0;
        width: 1px;
        height: calc(100% - 2px);
        content: "";
        background-color: var(--color-basic-gray);
      }
    }

    >.inner>.content>.property>.price>.number {
      font-family: var(--font-family-inter);
      font-size: 1.125rem;
      font-weight: 700;
      line-height: 1;
      color: var(--color-basic-attention);

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

    >.inner>.content>.property>.price>.unit,
    >.inner>.content>.property>.price>.tax {
      font-size: 0.75rem;
      font-weight: 500;
      font-feature-settings: "palt" on;
      line-height: 1;

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

    >.inner>.content>.property>.detail {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      align-items: baseline;

      @media (min-width: 1021px) {
        position: relative;
        top: -1px;
      }
    }

    >.inner>.content>.property>.detail>.layout {
      font-family: var(--font-family-inter);
      font-size: 1.125rem;
      font-weight: 700;
      line-height: 1;
      color: var(--color-basic-attention);

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

    >.inner>.content>.property>.detail>.area {
      font-family: var(--font-family-inter);
      font-size: 1.125rem;
      font-weight: 500;
      line-height: 1;

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

    >.inner>.content>.property>.detail>.area::before {
      display: inline-block;
      margin-right: 4px;
      font-family: var(--font-family-base);
      font-size: 1.125rem;
      font-weight: 500;
      line-height: 1;
      content: "／";

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

    >.inner>.content>.property>.detail>.area>.symbol {
      position: relative;
      margin-left: 2px;
      font-size: 0.875rem;

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

    &:is(a) {
      transition: background-color 0.2s ease-out;

      &::before {
        position: absolute;
        right: 16px;
        bottom: 16px;
        width: 30px;
        height: 16px;
        content: "";
        background: url("/images/renoalpha/common/icon-arrow-right-basic-01.svg") no-repeat;
        background-size: contain;

        @media (max-width: 1020px) {
          right: 16px;
          bottom: 16px;
          width: 22px;
          height: 12px;
        }

        @media (max-width: 767px) {
          right: 0;
          bottom: 16px;
          width: 22px;
          height: 12px;
        }
      }

      &::after {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 1px;
        content: "";
        background-color: var(--color-basic-brown);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.3s ease-out;

        @media (max-width: 1020px) {
          transform: scaleX(1);
        }
      }

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

          &::after {
            transform: scaleX(1);
          }

          >.image>img {
            transform: scale(1.1);
          }
        }
      }
    }

    &[data-card-type="new-listing"] {
      >.image {
        aspect-ratio: 395 / 268;
      }

      @media (max-width: 1020px) {
        >.inner {
          padding: 12px 16px 44px;
        }

        >.inner>.content {
          margin-top: 29px;
        }
      }
    }
  }

  /* ---------------------------------------------
  .card-gallery
------------------------------------------------ */
  .card-gallery {
    position: relative;
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid var(--color-basic-brown);

    >.image {
      aspect-ratio: 590 / 393;
      overflow: hidden;

      >img {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
        transition: transform 0.3s ease-out;
      }
    }

    >.inner {
      display: flex;
      flex: 1;
      flex-direction: column;
      padding: 24px 20px 43px;

      @media (max-width: 1020px) {
        padding: 12px 10px 44px;
      }
    }

    >.inner>.heading {
      font-family: var(--font-family-noto-serif);
      font-size: 1.125rem;
      font-weight: 500;
      line-height: 1.6;

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

    >.inner>.content {
      position: relative;
      display: flex;
      flex-direction: column;
      row-gap: 9px;
      padding-top: 16px;
      margin-top: 32px;

      @media (max-width: 1020px) {
        row-gap: 4px;
        padding-top: 10px;
        margin-top: 16px;
      }

      &::before {
        position: absolute;
        top: 0;
        left: 0;
        width: 24px;
        height: 1px;
        content: "";
        background-color: var(--color-basic-brown);
      }
    }

    >.inner>.content>.location {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 14px;
      font-size: 1rem;
      font-weight: 500;
      line-height: 1.2;
      color: var(--color-basic-brown);
      letter-spacing: 0.08em;

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

    >.inner>.content>.location>.detail {
      position: relative;
      display: flex;
      flex-flow: row-reverse wrap;
    }

    >.inner>.content>.location>.detail:not(:last-child)::before {
      position: relative;
      display: inline-block;
      width: 13px;
      height: 16px;
      margin-left: 10px;
      content: "／";

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

    &:is(a) {
      transition: background-color 0.2s ease-out;

      &::before {
        position: absolute;
        right: 20px;
        bottom: 15px;
        width: 30px;
        height: 16px;
        content: "";
        background: url("/images/renoalpha/common/icon-arrow-right-basic-01.svg") no-repeat;
        background-size: contain;

        @media (max-width: 1020px) {
          right: 10px;
          bottom: 16px;
          width: 22px;
          height: 12px;
        }
      }

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

          >.image>img {
            transform: scale(1.1);
          }
        }
      }
    }
  }

  /* ---------------------------------------------
  .card-article
------------------------------------------------ */
  .card-article {
    display: grid;
    grid-template-columns: min(calc(253 / 1920 * 100vw), 253px) 1fr;
    gap: 16px min(calc(32 / 1920 * 100vw), 32px);

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

    >.image {
      position: relative;
      display: block;
      align-self: start;

      >img {
        width: 100%;
        height: auto;

        @media (max-width: 1020px) {
          width: calc((189 / 335) * 100%);
          height: auto;
        }
      }

      @media (max-width: 1020px) {
        text-align: right;
      }
    }

    >.content {
      @media (max-width: 1020px) {
        order: -1;
      }

      >p {
        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-order-reserve] {
      grid-template-columns: 1fr min(calc(214 / 1920 * 100vw), 214px);

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

      >.image {
        order: 2;
        margin-top: 7px;

        @media (max-width: 1020px) {
          order: 1;
          margin-top: 0;
        }
      }

      >.content {
        order: 1;

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

  /* ---------------------------------------------
  .card-contact
------------------------------------------------ */
  .card-contact {
    >.inner {
      display: grid;
      grid-template-columns: 1fr min(calc(467 / 1920 * 100vw), 467px);
      gap: 32px min(calc(100 / 1920 * 100vw), 100px);

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

    >.inner>.image {
      position: relative;
      display: block;
      align-self: start;

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

    >.inner>.content {
      >.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.08em;

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

      >.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;
        }
      }

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

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

    >.link {
      display: flex;
      justify-content: flex-end;
      margin-top: 50px;

      @media (max-width: 1020px) {
        flex-direction: column;
        justify-content: flex-start;
        margin-top: 35px;
      }

      >.text {
        display: flex;
        gap: min(calc(50 / 1920 * 100vw), 50px);
        align-items: center;
        padding: 8px 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-basic-brown);
        letter-spacing: 0.08em;
        border-bottom: 1px solid var(--color-basic-brown);
        transition: opacity 0.2s ease-out;

        @media (max-width: 1020px) {
          gap: 8px;
          justify-content: space-between;
          padding: 8px 0;
          font-size: 0.875rem;
        }

        &::after {
          flex-shrink: 0;
          width: 30px;
          height: 16px;
          content: "";
          background-image: url("/images/renoalpha/common/icon-arrow-right-basic-01.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-brown-01-sp.svg");
          }
        }

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

  /* ---------------------------------------------
  .card-article-image-grid
------------------------------------------------ */
  .card-article-image-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2px;

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

    >.image {
      position: relative;
      align-self: start;
      margin: 0;
    }

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

    *+& {
      margin-top: 32px;

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

  /* ---------------------------------------------
  .card-article-concept
------------------------------------------------ */
  .card-article-concept {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: stretch;
    margin-top: 30px;

    @media (width <=1360px) {
      grid-template-columns: repeat(1, 1fr);
      margin-top: 16px;
    }

    >.image {
      position: relative;

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

    >.image>figcaption.image-caption {
      padding: 2px 4px;

      @media (width <=1360px) {
        display: none;
      }
    }

    >.list {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 2px;
      height: 100%;
    }

    >.list>.item {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: span 3;
      gap: 0;
      align-content: start;
      justify-items: center;
      min-height: 0;
      padding: 33px 5px 30px;
      background-color: var(--color-basic-brown);

      @media (width <=1660px) {
        padding: calc(33 / 1660 * 100vw) calc(10 / 1660 * 100vw) calc(30 / 1660 * 100vw);
      }

      @media (width <=1360px) {
        gap: 15px;
        padding: 16px 5px;
      }
    }

    >.list>.item>.icon {
      display: inline-block;
      width: 48px;
      height: 48px;
      text-align: center;

      @media (width <=1660px) {
        width: calc(48 / 1660 * 100vw);
        height: calc(48 / 1660 * 100vw);
      }

      @media (width <=1360px) {
        width: 48px;
        height: 48px;
      }
    }

    >.list>.item>.title {
      display: block;
      font-size: 1.25rem;
      line-height: 1.3;
      color: var(--color-basic-offwhite);
      text-align: center;

      @media (width <=1660px) {
        font-size: calc(18 / 1660 * 100vw);
      }

      @media (width <=1360px) {
        font-size: 0.9375rem;
      }
    }

    >.list>.item>.title span {
      display: block;
      font-size: 1rem;

      @media (width <=1660px) {
        font-size: calc(14 / 1660 * 100vw);
      }

      @media (width <=1360px) {
        font-size: 0.8125rem;
      }
    }

    >.list>.item>.text {
      line-height: 1.35;
      color: var(--color-basic-offwhite);
      text-align: center;

      @media (width <=1660px) {
        font-size: calc(13 / 1660 * 100vw);
      }

      @media (width <=1360px) {
        font-size: 0.8125rem;
      }
    }
  }
}

@layer components {

  /* ---------------------------------------------
  .checkbox-01
------------------------------------------------ */
  .checkbox-01 {
    position: relative;
    display: inline-flex;
    gap: 4px;
    align-items: center;
    cursor: pointer;

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

    &::before {
      display: inline-block;
      flex-shrink: 0;
      align-self: flex-start;
      width: 24px;
      height: 24px;
      content: "";
      background: url("/images/renoalpha/common/icon-checkbox-01.svg") no-repeat center / contain;
    }

    >input[type="checkbox"] {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      white-space: nowrap;
      border: 0;
      clip-path: inset(50%);
    }

    &:has(input[type="checkbox"]:checked)::before {
      background-image: url("/images/renoalpha/common/icon-checkbox-01-active.svg");
    }

    &:has(input:focus-visible) {
      outline: 2px solid var(--color-basic-brown);
      outline-offset: 2px;
      border-radius: 0;
      box-shadow: 0 0 0 4px var(--color-white);
    }

    >.label {
      margin-top: -1px;
      /* optical alignment: CJK font metrics sit slightly low */
      font-size: 1.125rem;
      font-feature-settings: "palt" on;
      line-height: 1.2;
      letter-spacing: 0.08em;

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

  /* ---------------------------------------------
  .checkbox-02
------------------------------------------------ */
  .checkbox-02 {
    position: relative;
    display: inline-flex;
    gap: 4px;
    vertical-align: top;
    cursor: pointer;
    align-items: center;

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

    &::before {
      display: block;
      flex-shrink: 0;
      width: 24px;
      height: 24px;
      content: "";
      background: url("/images/renoalpha/common/icon-checkbox-attention-01.svg") no-repeat;
      background-size: contain;
    }

    >a>.text {
      position: relative;
      display: block;
      font-size: 1.125rem;
      font-feature-settings: "palt" on;
      line-height: calc(22 / 18);
      color: var(--color-basic-brown);
      letter-spacing: 0.08em;

      @media (max-width: 1020px) {
        font-size: 0.875rem;
        line-height: calc(22 / 14);
      }
    }

    >a>.text>span {
      font-family: var(--font-family-inter);
      color: var(--color-basic-attention);
    }

    &:has(input[type="checkbox"]:checked)::before {
      background-image: url("/images/renoalpha/common/icon-checkbox-01-active.svg");
    }

    &:has(input[type="checkbox"]:disabled) {
      cursor: default;

      >.text,
      >.text>span {
        color: #b5b5b5;
      }

      &::before {
        background-image: url("/images/renoalpha/common/icon-checkbox-gray-01.svg");
        opacity: 0.7;
      }
    }

    &:has(input:focus-visible) {
      outline: 2px solid var(--color-basic-brown);
      outline-offset: 2px;
      box-shadow: 0 0 0 4px var(--color-white);
    }

    >input[type="checkbox"] {
      position: absolute;
      z-index: -1;
      opacity: 0;
    }
  }

}

@layer components {

  /* ---------------------------------------------
  .cms-detail
------------------------------------------------ */
  .cms-detail {
    position: relative;
    display: block;
    font-size: 1rem;
    color: var(--color-basic-brown);

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

    a {
      text-decoration: underline;
      text-underline-offset: 3px;
      transition: color 0.2s ease-out;

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

    a[target="_blank"] {
      color: var(--color-basic-attention);

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

    h2 {
      font-family: var(--font-family-shippori-mincho);
      font-weight: 400;
      color: var(--color-basic-brown);

      &:first-child {
        margin-top: 0;
      }

      &:last-child {
        margin-bottom: 0;
      }
    }

    h2.block-heading {
      margin-block: 64px 40px;
      font-size: 1.5rem;
      line-height: 1.5;

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

      &:first-child {
        margin-top: 0;
      }

      &:last-child {
        margin-bottom: 0;
      }
    }

    .block-text[data-variant-text-position="right"] {
      margin-top: 24px;
      text-align: right;
    }

    .block-text a {
      color: var(--color-basic-brown);
      transition: opacity 0.3s ease-out;

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

    .block-company {
      margin-top: 32px;

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

    >.block-video {
      position: relative;
      aspect-ratio: 16 / 9;

      +.block-video {
        margin-top: 32px;

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

    >.block-video>iframe,
    >.block-video>video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    >.block-floor-plan {
      position: relative;
      display: block;
      margin-top: 32px;

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

      &::after {
        position: absolute;
        right: 5px;
        bottom: 5px;
        width: 28px;
        height: 28px;
        content: "";
        background: url("/images/renoalpha/common/icon-zoom-01.svg") no-repeat;
        background-size: contain;
      }
    }

    >.block-floor-plan>img {
      display: block;
      width: 100%;
      height: auto;
    }

    >.block-detail {
      margin-block: 64px 40px;

      @media (max-width: 1020px) {
        margin-block: 40px 20px;
      }

      &:first-child {
        margin-top: 0;
      }

      &:last-child {
        margin-bottom: 0;
      }
    }

    >.block-detail>dl {
      display: grid;
      grid-template-columns: max-content 1fr;
      gap: 7px 30px;

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

    >.block-detail>dl>div>dt {
      position: relative;
      padding-left: 16px;
      font-weight: 500;
      color: rgb(69 65 62 / 75%);

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

      &::before {
        position: absolute;
        top: 12px;
        left: 0;
        width: 8px;
        height: 1px;
        content: "";
        background-color: var(--color-basic-brown);
        border-radius: 50%;

        @media (max-width: 1020px) {
          top: 10px;
          left: 5px;
        }
      }
    }

    >.block-detail>dl>div>dd {
      font-size: 1rem;
      font-feature-settings: "palt" on;
      line-height: 1.6;
      letter-spacing: 0.08em;

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

    >.block-detail>dl>div {
      display: contents;
    }

    >.block-detail>dl>.price>dt {
      align-self: center;
      padding-bottom: 15px;

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

    >.block-detail>dl>.price>dd {
      padding-bottom: 15px;

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

    >.block-detail>dl>.price>dd>span {
      padding-right: 4px;
      font-family: var(--font-family-inter);
      font-size: 2rem;
      font-weight: bold;
      line-height: 1;
      color: var(--color-basic-attention);

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

    >.block-map {
      position: relative;
      aspect-ratio: 1140 / 260;

      &:has(:focus-visible) {
        outline: 2px solid var(--color-basic-brown);
        outline-offset: 2px;
        box-shadow: 0 0 0 4px var(--color-white);
      }

      @media (max-width: 1020px) {
        aspect-ratio: 335 / 240;
      }
    }

    >.block-map>iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    >.block-travel-route {
      margin-block: 64px 40px;

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

      &:first-child {
        margin-top: 0;
      }

      &:last-child {
        margin-bottom: 0;
      }
    }

    >.block-travel-route>.inner>p,
    >.block-travel-route>.inner>ul>li {
      font-style: normal;
      font-weight: 400;
      font-feature-settings: "palt" on;
      line-height: 160%;
      color: #585451;
      letter-spacing: 0.08em;

      @media (max-width: 1020px) {
        letter-spacing: 0.04em;
      }
    }

    >.block-travel-route>.inner>ul {
      list-style: "・";
      list-style-position: inside;
    }

    >.block-travel-route>.inner>ul+p {
      margin-top: 30px;

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

      &:last-child {
        margin-top: 0;
      }
    }

    >.block-travel-route>.inner+.inner {
      margin-block: 64px 40px;

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

      &:first-child {
        margin-top: 0;
      }

      &:last-child {
        margin-bottom: 0;
      }
    }

    >.block-renovation-detail {
      padding-block: 64px 0;
      margin-block: 64px 40px;
      border-top: 1px solid var(--color-basic-attention);

      @media (max-width: 1020px) {
        padding-block: 32px 0;
        margin-block: 32px 20px;
      }

      &:first-child {
        margin-top: 0;
      }

      &:last-child {
        margin-bottom: 0;
      }
    }

    >.block-renovation-detail .block-heading {
      @media (max-width: 1020px) {
        margin-bottom: 14px;
      }
    }

    >.block-renovation-detail>dl {
      display: block;
    }

    >.block-renovation-detail>dl>div {
      display: grid;
      row-gap: 9px;
    }

    >.block-renovation-detail>dl>div+div {
      margin-top: 32px;

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

    >.block-renovation-detail>dl>div>dt {
      position: relative;
      padding-left: 16px;
      font-weight: 500;

      &::before {
        position: absolute;
        top: 12px;
        left: 0;
        width: 8px;
        height: 1px;
        content: "";
        background-color: var(--color-basic-brown);
        border-radius: 50%;
        transform: translateY(-50%);
      }
    }

    >.block-renovation-detail>dl>.price>dd {
      font-weight: 500;
    }

    >.block-summary {
      padding-top: 64px;
      margin-block: 64px 40px;
      border-top: 1px solid var(--color-basic-attention);

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

      &:first-child {
        margin-top: 0;
      }

      &:last-child {
        margin-bottom: 0;
      }
    }

    >.block-summary>dl {
      display: grid;
      grid-template-columns: repeat(2, max-content 1fr);
      border-top: 1px solid var(--color-light-gray);

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

    >.block-summary>dl>div {
      display: contents;
    }

    >.block-summary>dl>div>dt,
    >.block-summary>dl>div>dd {
      padding: 17px 16px;
      font-feature-settings: "palt" on;
      line-height: 1.6;
      letter-spacing: 0.08em;
      border-bottom: 1px solid rgb(87 84 81 / 20%);
    }

    >.block-summary>dl>div>dt {
      display: flex;
      align-items: center;
      width: min(188px, calc(188 / 1920 * 100vw));
      font-weight: 500;
      background-color: var(--color-basic-light-gray);

      @media (max-width: 1020px) {
        width: min(101px, calc(101 / 375 * 100vw));
        border-right: none;
      }
    }

    >.block-summary>dl>div:nth-child(odd)>dd {
      margin-right: min(2px, 2 / 1920 * 100vw);

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

    >.block-summary>dl>div:nth-child(even)>dt {
      margin-left: min(28px, 28 / 1920 * 100vw);

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

    >.block-summary>dl>div>dd {
      font-weight: 400;
      align-content: center;
    }

    >.block-summary>dl>div>dd>a {
      display: inline-block;
      margin-top: 4px;
      text-decoration: underline;
    }
  }
}

@layer components {

  /* .footer-contact
  ------------------------------------------------ */
  .footer-contact {
    position: relative;
    background-image: url("/images/renoalpha/common/bg-footer-contact-pc.jpg");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;

    @media (max-width: 1020px) {
      background-image: url("/images/renoalpha/common/bg-footer-contact-sp.jpg");
    }

    >.container {
      max-width: 1920px;
      padding: 220px 48px 220px min(265px, calc(265 / 1920 * 100vw));
      margin-right: auto;
      margin-left: auto;

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

    >.container>.inner {
      display: flex;
      gap: calc(1 / 1920 * 100vw);

      >.box-faq,
      >.box-contact {
        display: flex;
        flex-direction: column;
        padding-top: 40px;
        background-color: var(--color-basic-brown);
        transition: background-color 0.3s ease-out;

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

      >.box-faq {
        flex: 530 0 0;
        border-radius: 2px 0 0 2px;
      }

      >.box-faq>.card-footer-contact {
        flex-grow: 1;
      }

      >.box-contact {
        flex: 1076 0 0;
      }

      @media (max-width: 1020px) {
        flex-direction: column;
        gap: 1px;

        >.box-faq,
        >.box-contact {
          flex-basis: auto;
        }
      }

      >.box-contact>.content {
        display: grid;
        flex-grow: 1;
        grid-template-columns: 1fr 1fr;
        border-radius: 0 2px 2px 0;

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

    >.container>.inner>.box-faq>.heading,
    >.container>.inner>.box-contact>.heading {
      display: flex;
      flex-direction: column;
      padding: 0 min(calc(40 / 1920 * 100vw), 40px);
      margin-bottom: calc(min(calc(154 / 1920 * 100vw), 154px));
      color: var(--color-basic-offwhite);

      @media (max-width: 1020px) {
        padding: 0 20px;
        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 {
        font-family: var(--font-family-noto-serif);
        font-size: 1rem;
        font-weight: 500;
        line-height: 1.2;

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

  /* .card-footer-contact
  ------------------------------------------------ */
  .card-footer-contact {
    display: flex;
    flex-direction: column;
    padding: 40px min(calc(40 / 1920 * 100vw), 40px);
    background-color: var(--color-basic-brown);
    transition: background-color 0.3s ease-out;

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

    >.inner {
      display: flex;
      flex-grow: 1;
      gap: min(calc(30 / 1920 * 100vw), 30px);

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

    >.inner>.image {
      position: relative;
      flex: 170 0 0;
      align-self: flex-start;

      @media (max-width: 1020px) {
        flex: 0 0 100px;
      }

      >img {
        display: block;
        width: 100%;
        height: auto;
        border-radius: 2px;
        clip-path: inset(0 round 2px);
        transition: clip-path 0.3s ease-out;
      }
    }

    >.inner>.image>figcaption.image-caption {
      transition:
        right 0.3s ease-out,
        bottom 0.3s ease-out;

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

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

      &:hover>.inner>.image {
        >img {
          clip-path: inset(calc(10 / 170 * 100%) round 2px);
        }

        >figcaption.image-caption {
          right: calc(10 / 170 * 100%);
          bottom: calc(10 / 170 * 100%);
        }
      }
    }

    >.inner>.content {
      display: flex;
      flex: 250 0 0;
      flex-direction: column;
      justify-content: space-between;
      color: var(--color-basic-offwhite);

      >.detail {
        /* style */
      }

      >.link {
        position: relative;
        display: flex;
        justify-content: flex-end;
        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;
        letter-spacing: normal;

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

        >span::after {
          display: inline-block;
          width: 30px;
          height: 16px;
          margin-bottom: -2px;
          margin-left: min(calc(24 / 1920 * 100vw), 24px);
          content: "";
          background-image: url("/images/renoalpha/common/icon-arrow-right-offwhite-01.svg");
          background-repeat: no-repeat;
          background-position: center center;
          background-size: contain;

          @media (max-width: 1020px) {
            width: 22px;
            height: 12px;
            margin-left: 8px;
          }
        }
      }

      >.phone {
        font-family: var(--font-family-instrument-serif);
        font-size: clamp(0.875rem, calc(48 / 1920 * 100vw), 3rem);
        line-height: 1.2;

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

      >.detail>.heading {
        margin-top: -5px;
        font-family: var(--font-family-instrument-serif);
        font-size: 2rem;
        line-height: 1.2;

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

      >.detail>.heading+.text {
        margin-top: 10px;

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

      >.detail>.heading+.text-contact {
        margin-top: 4px;

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

      >.detail>.text,
      >.detail>.text-contact {
        font-size: 1rem;
        font-feature-settings: "palt" on;
        line-height: 1.6;
        letter-spacing: 0.08em;

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

      >.detail>.text-contact {
        font-weight: 500;

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

      .text-contact>.time {
        font-family: var(--font-family-inter);

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

      .text-contact>.note {
        font-family: var(--font-family-inter);
        font-size: 0.75rem;

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

  /* .box-faq is itself the <a>, so hover is driven by the whole box:
   hovering anywhere on it turns the box + card black and crops the image. */
  @media (hover: hover) {
    .footer-contact>.container>.inner>.box-faq:hover {
      background-color: var(--color-basic-black);
    }

    .footer-contact>.container>.inner>.box-faq:hover>.card-footer-contact {
      background-color: var(--color-basic-black);
    }

    .footer-contact>.container>.inner>.box-faq:hover>.card-footer-contact>.inner>.image>img {
      clip-path: inset(calc(10 / 170 * 100%) round 2px);
    }
  }

  /* .box-contact reacts only when one of its descendant card-links is hovered. */
  @media (hover: hover) {
    .footer-contact>.container>.inner>.box-contact:has(.card-footer-contact:hover) {
      background-color: var(--color-basic-black);
    }
  }

  /* Accessibility: lift the focused link above its sibling so the focus ring
   (outline + white halo defined in base.css) is not painted over by the
   adjacent card on the shared edge. Targets .box-faq (flex item) and the
   .card-footer-contact links (grid items). */
  .footer-contact>.container>.inner>.box-faq:focus-visible,
  .footer-contact>.container>.inner>.box-contact>.content>.card-footer-contact:focus-visible {
    position: relative;
    z-index: 1;
  }
}

@layer components {

  /* .footer-inquiry
------------------------------------------------ */
  .footer-inquiry {
    border-top: 1px solid var(--color-border-line-gray);
  }

  .footer-inquiry>.inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px 66px;

    @media (max-width: 1020px) {
      flex-direction: column;
      gap: 12px;
      align-items: flex-start;
      padding: 7px 14px;
    }
  }

  .footer-inquiry>.inner>.logo>a {
    display: block;
    transition: opacity 0.3s ease;

    @media (hover: hover) {
      &:hover {
        opacity: var(--opacity-hover);
      }
    }
  }

  .footer-inquiry>.inner>.logo>a>img {
    @media (max-width: 1020px) {
      width: 200px;
      height: auto;
    }
  }

  .footer-inquiry>.inner>.text>p {
    font-size: 0.75rem;
    color: var(--color-basic-gray);

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

@layer components {

  /* .footer
------------------------------------------------ */
  .footer {
    position: relative;
    padding: 168px calc(48 / 1920 * 100vw) 84px calc(194 / 1920 * 100vw);
    overflow: hidden;

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

    >.container {
      display: flex;
      gap: calc(80 / 1920 * 100vw);
      justify-content: space-between;
      max-width: 1536px;
      margin: 0 auto;

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

    >.container>.footer-logo {
      flex-shrink: 0;
      width: min(324px, 324 / 1920 * 100vw);

      @media (max-width: 1020px) {
        width: 100%;
        max-width: 204px;
        height: auto;
        margin-right: auto;
        margin-left: auto;
      }
    }

    >.container>.footer-logo>a {
      display: block;
    }

    >.container>.footer-logo>a>img {
      display: block;
      width: 100%;
      height: auto;
    }

    >.container>.footer-content {
      flex: 1;
      max-width: 1037px;
    }
  }

  /* .footer-nav-main
  ------------------------------------------------ */
  .footer-nav-main {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(12px, calc(43 / 1920 * 100vw), 43px);
    padding: 10px 0 59px;
    font-size: 1rem;
    line-height: 1.5;

    @media (max-width: 1020px) {
      gap: 24px;
      justify-content: space-between;
      padding-bottom: 31px;
      font-size: 0.8125rem;
    }

    @media (max-width: 767px) {
      flex-wrap: nowrap;
    }

    >.footer-nav-main-col {
      display: contents;

      @media (max-width: 767px) {
        display: flex;
        flex: 1;
        flex-direction: column;
        gap: 20px;
      }
    }

    .item>.item-top {
      display: inline-block;
      font-weight: 500;
      transition:
        opacity 0.2s ease-out,
        color 0.2s ease-out;

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

      &[aria-current="page"],
      &[aria-current="true"] {
        color: var(--color-basic-attention);
      }
    }

    .item>.item-top[target="_blank"] {
      &::after {
        display: inline-block;
        width: 18px;
        height: 18px;
        margin-bottom: -3px;
        margin-left: min(calc(8 / 1920 * 100vw), 8px);
        content: "";
        background-image: url("/images/renoalpha/common/icon-external-brown-01.svg");
        background-repeat: no-repeat;
        background-size: cover;
      }
    }

    .item>.item-sub {
      display: flex;
      flex-direction: column;
      gap: 13px;
      margin-top: 20px;
      font-size: 0.875rem;

      @media (max-width: 1020px) {
        gap: 10px;
        margin-top: 11px;
        font-size: 0.75rem;
      }
    }

    .item>.item-sub>li {
      position: relative;
      padding-left: 25px;

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

    .item>.item-sub>li::before {
      position: absolute;
      top: 11px;
      left: 8px;
      width: 8px;
      height: 1px;
      content: "";
      background-color: var(--color-basic-brown);

      @media (max-width: 1020px) {
        top: 9px;
        left: 1px;
      }
    }

    .item>.item-sub>li>a {
      position: relative;
      display: inline-block;
      transition:
        opacity 0.2s ease-out,
        color 0.2s ease-out;

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

      &[aria-current="page"] {
        color: var(--color-basic-attention);
      }
    }

    .item>.item-sub>li>a[target="_blank"] {
      &::after {
        display: inline-block;
        width: 18px;
        height: 18px;
        margin-bottom: -4px;
        margin-left: min(calc(8 / 1920 * 100vw), 8px);
        content: "";
        background-image: url("/images/renoalpha/common/icon-external-brown-01.svg");
        background-repeat: no-repeat;
        background-size: cover;

        @media (max-width: 767px) {
          margin-left: 4px;
        }
      }
    }

    .item>.item-sub>li>button {
      @media (hover: hover) {
        &:hover {
          opacity: 0.7;
        }
      }
    }

    .item>.item-sub[data-top] {
      gap: 11px;
      font-weight: 500;

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

      @media (max-width: 767px) {
        gap: 20px;
        margin-top: 20px;
        line-height: 1.5;
      }
    }

    .item>.item-sub[data-top]>li {
      padding-left: 0;
    }

    .item>.item-sub[data-top]>li::before {
      display: none;
    }

    @media (min-width: 1021px) {
      .item:has(> .item-sub[data-top]) {
        display: contents;
      }

      .item>.item-sub[data-top] {
        display: contents;
        font-size: 1rem;
      }

      .item>.item-sub[data-top]>li {
        display: contents;
      }
    }
  }

  /* .footer-nav-secondary
  ------------------------------------------------ */
  .footer-nav-secondary {
    padding: 56px 0;
    border-top: 1px solid var(--color-basic-gray);

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

    >ul {
      display: flex;
      flex-wrap: wrap;
      gap: 14px clamp(12px, calc(24 / 1920 * 100vw), 24px);
      font-size: 0.875rem;

      @media (max-width: 1020px) {
        flex-direction: column;
        gap: 12px;
        font-size: 0.75rem;
      }
    }

    >ul>li {
      position: relative;
      padding-left: 20px;

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

    >ul>li::before {
      position: absolute;
      top: 10px;
      left: 4px;
      width: 8px;
      height: 1px;
      content: "";
      background-color: var(--color-basic-brown);

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

    >ul>li>a {
      position: relative;
      display: inline-block;
      transition: opacity 0.2s ease-out;

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

  /* .footer-partner
  ------------------------------------------------ */
  .footer-partner {
    display: flex;
    -moz-column-gap: 20px;
    column-gap: 20px;
    justify-content: space-between;
    padding: 55px 0 58px;
    border-top: 1px solid var(--color-basic-gray);

    @media (max-width: 1020px) {
      flex-direction: column;
      gap: 26px;
      padding: 20px 0 27px;
    }

    >.image {
      >.logo {
        position: relative;
        display: block;
        transition: opacity 0.2s ease-out;

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

        >img {
          display: block;
          width: 100%;
          max-width: 240px;
          height: auto;

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

      >.logo[target="_blank"] {
        padding-right: 68px;
        margin: 10px 0 0 14px;

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

        &::after {
          position: absolute;
          top: 50%;
          right: 0;
          width: 30px;
          height: 16px;
          content: "";
          background-image: url("/images/renoalpha/common/icon-external-brown-02.svg");
          background-repeat: no-repeat;
          background-size: cover;
          transform: translateY(-50%);
        }
      }
    }

    >.content {
      padding-right: 20px;

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

    >.content>.title {
      font-family: var(--font-family-noto-serif);
      font-size: 1.25rem;
      line-height: 1.6;

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

    >.content>.text {
      margin-top: 9px;
      font-size: 0.875rem;
      line-height: 1.6;

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

    &:is(a) {
      position: relative;
      transition: opacity 0.2s ease-out;

      &[target="_blank"]::after {
        position: absolute;
        top: 50%;
        right: 0;
        width: 30px;
        height: 16px;
        content: "";
        background-image: url("/images/renoalpha/common/icon-external-brown-02.svg");
        background-repeat: no-repeat;
        background-size: cover;
        transform: translateY(-50%);

        @media (max-width: 1020px) {
          top: 41px;
          right: 0;
          width: 30px;
          height: 12px;
          background-image: url("/images/renoalpha/common/icon-external-brown-03.svg");
          transform: none;
        }
      }

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

  /* .footer-copyright
  ------------------------------------------------ */
  .footer-copyright {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
    margin-top: 28px;

    @media (max-width: 1020px) {
      flex-direction: column-reverse;
      gap: 15px;
      align-items: flex-start;
      margin-top: 40px;
    }

    >.text {
      font-family: var(--font-family-inter);
      font-size: 0.75rem;
      line-height: 1;
      color: var(--color-basic-brown);
      letter-spacing: -0.01em;

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

    >.image {
      width: 100%;
      max-width: 238px;
      height: auto;
      transition: opacity 0.2s ease-out;

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

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

@layer components {

  /* .header-inquiry
------------------------------------------------ */
  .header-inquiry {
    border-bottom: 2px solid var(--color-basic-black);
  }

  .header-inquiry>.inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1196px;
    padding: 32px 48px 5px;
    margin-inline: auto;

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

  .header-inquiry>.inner>.logo>a {
    display: inline-block;
    margin-top: 3px;
    transition: opacity 0.3s ease;

    @media (hover: hover) {
      &:hover {
        opacity: var(--opacity-hover);
      }
    }
  }

  .header-inquiry>.inner>.logo>.keyword {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-basic-black);

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

  .header-inquiry>.inner>.logo>a>img {
    display: block;
    width: 122px;
    height: 48px;

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

@layer components {
  .header-logo-sp {
    position: relative;
    display: block;
    padding-top: 74px;

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

    >.container {
      position: fixed;
      top: 0;
      left: 0;
      z-index: var(--z-index-header-logo-sp);
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 74px;
      background-color: var(--color-basic-offwhite);
    }

    >.container>img {
      display: block;
      width: 102px;
      height: auto;
    }

    &[data-page-variant="top"] {
      padding-top: 0;

      >.container {
        transform: translateY(-101%);
        transition: transform 0.3s ease-out;
      }
    }

    /* 遶ｭ�ｿｽ Top variant: reveal the bar once #header-top-logo-sp leaves the viewport */
    &[data-page-variant="top"][data-scroll-visible="true"]>.container {
      transform: translateY(0);
    }

    /* 遶ｭ�ｽ｡ Pin stop at the #footer-contact boundary (mobile, all pages) */
    &[data-logo-pinned="true"]>.container {
      position: absolute;
      top: var(--logo-pin-top, 0);
    }
  }
}

@layer components {

  /* .header
------------------------------------------------ */
  .header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--z-index-header);
    width: min(146px, calc(146 / 1920 * 100vw));
    height: 100%;
    transition:
      opacity 0.2s ease-out,
      visibility 0s;

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

    &::before {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 0;
      width: min(194px, calc(194 / 1920 * 100vw));
      height: 100%;
      content: "";
      background: rgb(255 255 255 / 1%);
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);

      /* stylelint-disable-next-line property-no-vendor-prefix */
      -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 75%, transparent 100%);
      mask-image: linear-gradient(90deg, #000 0%, #000 75%, transparent 100%);

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

    &::after {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 0;
      width: min(194px, calc(194 / 1920 * 100vw));
      height: 100%;
      pointer-events: none;
      content: "";
      background: linear-gradient(90deg,
          rgb(244 241 237 / 75%) 0%,
          rgb(244 241 237 / 75%) 75%,
          rgb(244 241 237 / 0%) 100%);
      transition: opacity 0.2s ease-out;

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

    >.header-inner {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      gap: min(32px, calc(32 / 1920 * 100vw));
      width: 100%;
      height: 100%;
      padding: 24px 0 24px min(24px, calc(24 / 1920 * 100vw));

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

    >.header-inner>.header-logo {
      flex-shrink: 0;

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

      >img {
        display: block;
        width: min(122px, calc(122 / 1920 * 100vw));
        height: auto;
      }

      .logo-modal {
        display: none;
      }
    }

    >.header-inner>.container {
      position: relative;
      display: flex;
      flex: 1;
      flex-direction: column;
      gap: min(18px, calc(18 / 1920 * 100vw));
      justify-content: space-between;
      min-height: 0;
      padding-left: min(25px, calc(25 / 1920 * 100vw));
      border-right: 1px solid var(--color-basic-gray);

      @media (max-width: 1020px) {
        flex-direction: row-reverse;
        gap: 4px;
        padding: 0;
        border: 0;
      }
    }

    >.header-inner>.container>.btn-menu {
      display: flex;
      flex-shrink: 0;
      align-items: center;
      justify-content: center;
      width: clamp(32px, calc(48 / 1920 * 100vw), 48px);
      height: auto;
      aspect-ratio: 1 / 1;
      background-color: var(--color-basic-brown);
      border-radius: 2px;
      transition: background-color 0.2s ease-out;
      will-change: background;

      @media (max-width: 1020px) {
        flex: 1;
        justify-content: flex-start;
        width: auto;
        aspect-ratio: auto;
      }

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

      &[aria-expanded="true"] {
        background-color: var(--color-basic-black);

        >.btn-menu-in>span {
          &:nth-child(1) {
            top: 50%;
            transform: rotate(45deg);
          }

          &:nth-child(2) {
            top: 50%;
            transform: rotate(-45deg);
          }
        }
      }
    }

    >.header-inner>.container>.btn-menu>.btn-menu-text {
      display: flex;
      flex: 1;
      align-items: center;
      justify-content: flex-start;
      height: 38px;
      padding-left: 24px;
      font-size: 0.75rem;
      font-weight: 500;
      color: var(--color-basic-offwhite);
      border-right: 1px solid rgb(151 149 148 / 40%);

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

      >span {
        display: none;
      }

      /* Mobile: toggle label with the button's `aria-expanded` state. */
      >[data-menu-text-open] {
        display: block;
      }

      >[data-menu-text-close] {
        display: none;
      }
    }

    >.header-inner>.container>.btn-menu[aria-expanded="true"]>.btn-menu-text {
      >[data-menu-text-open] {
        display: none;
      }

      >[data-menu-text-close] {
        display: block;
      }
    }

    >.header-inner>.container>.btn-menu>.btn-menu-in {
      position: relative;
      display: block;
      flex-shrink: 0;
      width: 10px;
      height: 4px;
      margin: 0 18px;
    }

    >.header-inner>.container>.btn-menu>.btn-menu-in>span {
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      width: 100%;
      height: 1px;
      background-color: var(--color-white);
      border-radius: 1px;

      &:nth-child(2) {
        top: 3px;
      }
    }

    /* Desktop: fade `.header` out while the mega menu is open. */
    @media (min-width: 1021px) {
      &:where(html[data-mega-menu-open="true"] .wrapper &) {
        visibility: hidden;
        pointer-events: none;
        opacity: 0;
        transition:
          opacity 0.2s ease-out,
          visibility 0s linear 0.2s;
      }
    }

    &[data-menu-contact] {
      /* Raise `.header` above the open PC contact modal (`z-index: calc(var(--z-index-header) + 1)`)
      so the hamburger, subnav, and inquiry button stay visible/interactive over the overlay.
      Toggled by `headerMenuContactPc.ts`. */
      z-index: calc(var(--z-index-header) + 2);

      &::before {
        display: none;
      }

      &::after {
        background: linear-gradient(90deg,
            rgb(244 241 237 / 35%) 0%,
            rgb(244 241 237 / 25%) 75%,
            rgb(244 241 237 / 0%) 100%);
      }

      >.header-inner>.container>.header-navigation>.list-nav>li>button,
      >.header-inner>.container>.header-navigation>.list-nav>li>a {
        color: var(--color-white);
      }

      >.header-inner>.header-logo {
        >.logo-menu {
          display: none;
        }

        >.logo-modal {
          display: block;
        }
      }

      >.header-inner>.container>.header-utils>.btn-instagram {
        background-image: url("/images/renoalpha/common/icon-instagram-white-01.svg");
      }
    }

    &[data-transparent="true"] {
      @media (min-width: 1021px) {
        &::after {
          opacity: 0;
        }

        >.header-inner>.header-logo>.logo-menu {
          display: none;
        }

        >.header-inner>.header-logo>.logo-modal {
          display: block;
        }

        >.header-inner>.container>.btn-menu {
          background-color: var(--color-basic-black);
        }

        .header-navigation>.list-nav>li>a,
        .header-navigation>.list-nav>li>button {
          color: var(--color-white);
        }

        .header-navigation>.list-nav>li>button::after {
          background-color: var(--color-white);
        }

        .header-utils>.btn-instagram {
          background-image: url("/images/renoalpha/common/icon-instagram-white-01.svg");
        }
      }
    }
  }

  /* .header-utils
------------------------------------------------ */
  .header-utils {
    flex-shrink: 0;

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

    >.btn-inquiry {
      position: relative;
      display: block;
      padding: 12px min(17px, calc(17 / 1920 * 100vw));
      font-size: 0.875rem;
      font-weight: 500;
      line-height: 1;
      color: var(--color-white);
      background-color: var(--color-basic-attention);
      border-radius: 2px;
      writing-mode: vertical-lr;
      transition: background-color 0.2s ease-out;

      @media (max-width: 1020px) {
        width: 48px;
        height: 48px;
        padding: 0;
        background: url("/images/renoalpha/common/icon-contact-white-01.svg") center no-repeat;
        background-color: var(--color-basic-brown);
        background-size: 30px;
        border-radius: 1px;

        >span {
          display: none;
        }
      }

      >[data-menu-text-open] {
        @media (min-width: 1021px) {
          display: block;
        }
      }

      >[data-menu-text-close] {
        @media (min-width: 1021px) {
          display: none;
        }
      }

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

      &[aria-expanded="true"] {
        background-color: var(--color-basic-black);

        @media (min-width: 1021px) {
          padding: 35px min(17px, calc(17 / 1920 * 100vw));
        }

        @media (max-width: 1020px) {
          display: inline-block;
          content: "";
          background-image: url("/images/renoalpha/common/icon-contact-close-white-01.svg");
          background-repeat: no-repeat;
          background-position: center;
          background-size: 9px 8px;
        }

        >[data-menu-text-open] {
          @media (min-width: 1021px) {
            display: none;
          }
        }

        >[data-menu-text-close] {
          @media (min-width: 1021px) {
            display: block;
          }
        }
      }

      &[aria-expanded="true"]>[data-menu-text-close] {
        position: relative;
        padding-bottom: 17px;

        &::after {
          position: absolute;
          bottom: 0;
          left: 50%;
          width: 8px;
          height: 7px;
          content: "";
          background-image: url("/images/renoalpha/common/icon-contact-close-white-01.svg");
          background-repeat: no-repeat;
          background-position: center;
          background-size: 9px 8px;
          transform: translateX(-50%);
        }
      }
    }

    >.btn-instagram {
      display: block;
      width: clamp(20px, calc(28 / 1920 * 100vw), 28px);
      height: clamp(20px, calc(28 / 1920 * 100vw), 28px);
      margin-top: min(15px, calc(15 / 1920 * 100vw));
      margin-left: min(10px, calc(10 / 1920 * 100vw));
      background: url("/images/renoalpha/common/icon-instagram-black-01.svg") center no-repeat;
      background-size: contain;

      @media (max-width: 1020px) {
        width: 48px;
        height: 48px;
        margin: 0;
        background-color: var(--color-basic-brown);
        background-image: url("/images/renoalpha/common/icon-instagram-white-01.svg");
        background-size: 24px;
        border-radius: 1px;
      }
    }
  }

  /* .header-navigation
------------------------------------------------ */
  .header-navigation {
    flex: 1;
    overflow: auto;
    scrollbar-width: none;

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

    /* stylelint-disable-next-line property-no-vendor-prefix */
    &::-webkit-scrollbar {
      display: none;
    }

    >.list-nav {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 100%;
      max-height: 100%;
    }

    >.list-nav>li>a,
    >.list-nav>li>button {
      position: relative;
      display: block;
      width: 100%;
      padding: 10px min(70px, calc(70 / 1920 * 100vw)) 10px min(16px, calc(16 / 1920 * 100vw));
      font-size: 0.875rem;
      font-weight: 500;
      line-height: 1;
      color: #404245;
      letter-spacing: -0.005em;
      white-space: nowrap;
      cursor: default;
      writing-mode: vertical-lr;
      transition: color 0.2s ease-out;

      &:focus-visible {
        outline: none;
        box-shadow: none;

        >span {
          outline: 2px solid var(--color-basic-brown);
          outline-offset: 2px;
          box-shadow: 0 0 0 4px var(--color-white);
        }
      }

      &::after {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 1;
        width: 3px;
        height: 100%;
        pointer-events: none;
        content: "";
        background-color: var(--color-basic-black);
        opacity: 0;
        transition:
          opacity 0.2s ease-out,
          background-color 0.2s ease-out;
      }

      &:focus-visible::after,
      &[aria-expanded="true"]::after {
        opacity: 1;
      }

      @media (hover: hover) {
        &:hover::after {
          opacity: 1;
        }
      }
    }

    >.list-nav>li>a {
      cursor: pointer;

      &[aria-current="page"]::after {
        opacity: 1;
      }
    }

    >.list-nav>li>button[aria-current="true"]::after {
      opacity: 1;
    }

    >.list-nav>li>.box-nav-sub {
      position: absolute;
      top: 0;
      bottom: -24px;
      left: 100%;
      visibility: hidden;
      width: min(114px, calc(114 / 1920 * 100vw));
      height: auto;
      overflow: hidden;
      background: rgb(34 34 34 / 75%);
      opacity: 0;
      transition:
        opacity 0.2s ease-out,
        visibility 0s linear 0.2s;

      &[aria-hidden="false"] {
        visibility: visible;
        opacity: 1;
        transition:
          opacity 0.2s ease-out,
          visibility 0s;
      }
    }

    >.list-nav>li>.box-nav-sub>.list-nav-sub {
      display: flex;
      flex-direction: column;
      gap: min(32px, calc(32 / 1920 * 100vw));
      align-items: center;
      padding-top: min(72px, calc(72 / 1920 * 100vw));
    }

    >.list-nav>li>.box-nav-sub>.list-nav-sub>li {
      display: flex;
      justify-content: center;
    }

    >.list-nav>li>.box-nav-sub>.list-nav-sub>li>a,
    >.list-nav>li>.box-nav-sub>.list-nav-sub>li>button {
      display: block;
      font-size: 0.875rem;
      font-weight: 500;
      line-height: 1;
      color: var(--color-white);
      white-space: nowrap;
      writing-mode: vertical-lr;
      text-orientation: upright;
      transition: color 0.2s ease-out;

      @media (hover: hover) {
        &:hover {
          color: #dfc4a7;
        }
      }
    }
  }

  /* .header-drop-filter
------------------------------------------------ */
  .header-drop-filter {
    position: fixed;
    top: 0;
    left: 0;
    z-index: calc(var(--z-index-header) - 1);
    visibility: hidden;
    width: 0;
    height: 0;
    pointer-events: none;
    opacity: 0;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transition:
      opacity 0.2s ease-out,
      visibility 0s linear 0.2s;

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

    &[data-active="true"] {
      visibility: visible;
      opacity: 1;
      transition:
        opacity 0.2s ease-out,
        visibility 0s;
    }
  }

  /* .header-mega-menu
------------------------------------------------ */
  .header-mega-menu {
    position: fixed;
    top: 0;
    left: 0;
    z-index: calc(var(--z-index-header) - 1);
    display: block;
    visibility: hidden;
    width: 100%;
    height: 100%;
    background-color: rgb(87 84 81 / 70%);
    opacity: 0;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transition:
      opacity 0.2s ease-out,
      visibility 0s linear 0.2s;

    &[aria-hidden="false"] {
      visibility: visible;
      opacity: 1;
      transition:
        opacity 0.2s ease-out,
        visibility 0s;
    }

    >.side {
      position: absolute;
      top: 35px;
      bottom: 35px;
      left: 0;
      z-index: 1;
      display: flex;
      flex-direction: column;
      gap: 20px;
      width: min(146px, 146 / 1920 * 100vw);
      padding-top: min(70px, calc(70 / 1920 * 100vw));
      border-right: 1px solid var(--color-basic-gray);

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

    >.side>.btn-close {
      position: relative;
      top: -3px;
      display: flex;
      flex-shrink: 0;
      align-items: center;
      justify-content: center;
      width: clamp(32px, calc(48 / 1920 * 100vw), 48px);
      height: auto;
      aspect-ratio: 1 / 1;
      margin: 0 auto;
      background-color: var(--color-basic-black);
      border-radius: 2px;
    }

    >.side>.btn-close>.btn-close-in {
      position: relative;
      display: block;
      flex-shrink: 0;
      width: 10px;
      height: 4px;
      margin: 0 18px;

      >span {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 1px;
        background-color: var(--color-white);
        border-radius: 1px;

        &:nth-child(1) {
          top: 50%;
          transform: rotate(45deg);
        }

        &:nth-child(2) {
          top: 50%;
          transform: rotate(-45deg);
        }
      }
    }

    >.side>.text {
      display: flex;
      flex: 1;
      align-items: center;
      justify-content: center;
      padding-bottom: clamp(52px, calc(68 / 1920 * 100vw), 68px);
      overflow: hidden;
      font-size: 0.75rem;
      font-weight: 500;
      line-height: 1;
      color: var(--color-white);
      text-align: center;
      writing-mode: vertical-lr;
    }

    >.container {
      display: flex;
      align-items: safe center;
      height: 100%;
      padding: min(48px, 48 / 1920 * 100vw) min(48px, 48 / 1920 * 100vw) min(48px, 48 / 1920 * 100vw) min(220px, 220 / 1920 * 100vw);
      overflow: auto;

      @media (max-width: 1020px) {
        display: block;
        padding: 64px 20px 100px;
      }
    }

    >.container>.container-inner {
      display: flex;
      gap: min(40px, 40 / 1920 * 100vw);
      max-width: 1506px;
      margin: 0 auto;

      @media (max-width: 1020px) {
        flex-direction: column;
        gap: 66px;
        max-width: none;
      }
    }

    >.container>.container-inner>.box-mega-menu-nav {
      display: flex;
      flex-direction: column;
      gap: min(40px, 40 / 1920 * 100vw);
      justify-content: space-between;
      width: min(397px, 397 / 1920 * 100vw);

      @media (max-width: 1020px) {
        flex-direction: column-reverse;
        gap: 64px;
        justify-content: flex-start;
        width: 100%;
      }
    }

    >.container>.container-inner>.box-mega-menu-nav>.logo {
      display: block;
      width: 100%;
      max-width: min(260px, 260 / 1920 * 100vw);

      @media (max-width: 1020px) {
        width: 189px;
        max-width: none;
        margin: 0 auto;
      }

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

    >.container>.container-inner>.box-mega-menu-nav>.list-mega-menu-nav {
      display: flex;
      flex-direction: column;
      gap: 29px;

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

    >.container>.container-inner>.box-mega-menu-nav>.list-mega-menu-nav>li>a,
    >.container>.container-inner>.box-mega-menu-nav>.list-mega-menu-nav>li>span {
      font-size: 1.125rem;
      font-weight: 500;
      line-height: 1.2;
      color: var(--color-basic-light-gray);
      transition: color 0.2s ease-out;
    }

    >.container>.container-inner>.box-mega-menu-nav>.list-mega-menu-nav>li>a {
      @media (hover: hover) {
        &:hover {
          color: #dfc4a7;
        }
      }

      &[aria-current="page"] {
        color: #dfc4a7;
      }

      &[target="_blank"]::after {
        position: relative;
        top: 2px;
        display: inline-block;
        width: 18px;
        height: 18px;
        margin-left: min(8px, calc(8 / 1920 * 100vw));
        content: "";
        background: url("/images/renoalpha/common/icon-external-white-01.svg") no-repeat center;
        background-size: contain;

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

  /* .header-mega-menu-nav-sub
------------------------------------------------ */
  .header-mega-menu-nav-sub {
    margin-top: 10px;

    >.list-mega-menu-nav-sub {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    >.list-mega-menu-nav-sub>li {
      position: relative;
      padding-left: 20px;

      &::after {
        position: absolute;
        top: 13px;
        left: 4px;
        width: 8px;
        height: 1px;
        content: "";
        background-color: var(--color-basic-light-gray);
      }
    }

    >.list-mega-menu-nav-sub>li>a,
    >.list-mega-menu-nav-sub>li>button {
      font-size: 0.875rem;
      line-height: 1.2;
      color: var(--color-basic-light-gray);
      transition: color 0.2s ease-out;

      @media (hover: hover) {
        &:hover {
          color: #dfc4a7;
        }
      }
    }

    >.list-mega-menu-nav-sub>li>a[aria-current="page"] {
      color: #dfc4a7;
    }
  }

  .list-mega-menu-nav>li>span[aria-current="true"] {
    color: #dfc4a7;
  }

  /* .header-mega-menu-content
------------------------------------------------ */
  .header-mega-menu-content {
    display: grid;
    flex: 1;
    grid-template: "form phone" 1fr "instagram instagram" 1fr / 1fr 1fr;
    gap: 1px;

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

    >.card {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: min(40px, calc(40 / 1920 * 100vw));
      background-color: var(--color-basic-brown);
      transition: background 0.2s ease-out;

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

      &[data-card-instagram] {
        grid-area: instagram;
        border-radius: 0 0 6px 6px;

        @media (max-width: 1020px) {
          padding: 20px;
          border-radius: 1px 1px 0 0;
        }
      }

      &[data-card-form] {
        grid-area: form;
        border-top-left-radius: 6px;

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

      &[data-card-phone] {
        grid-area: phone;
        border-top-right-radius: 6px;

        @media (max-width: 1020px) {
          padding: 20px;
          border-radius: 0 0 1px 1px;
        }
      }
    }

    >.card>.heading {
      margin-bottom: min(48px, calc(48 / 1920 * 100vw));
      font-family: var(--font-family-instrument-serif);
      font-size: 3rem;
      line-height: 1;
      color: var(--color-basic-offwhite);

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

      >span {
        display: block;
        margin-top: 8px;
        font-family: var(--font-family-noto-serif);
        font-size: 1rem;
        font-weight: 500;

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

    >.card>.detail {
      display: flex;
      gap: min(30px, calc(30 / 1920 * 100vw));

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

    >.card>.detail>figure {
      position: relative;
      flex-shrink: 0;

      /* Size to the image, not the flex row. The default `align-items: stretch`
       on .detail would make the figure taller than the image when .info is
       taller, detaching the absolutely-positioned figcaption from the image.
       flex-start keeps the figure == image height so the caption stays glued
       to the image corner regardless of the card height. */
      align-self: flex-start;
      width: min(170px, calc(170 / 1920 * 100vw));

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

      >figcaption.image-caption {
        /* Match the image's clip-path timing so the caption follows it on hover. */
        transition:
          right 0.3s ease-out,
          bottom 0.3s ease-out;

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

      >img {
        display: block;
        width: 100%;
        height: auto;
        border-radius: 2px;
        clip-path: inset(0 round 2px);
        transition: clip-path 0.3s ease-out;
      }
    }

    /* Hover: shrink the figure image inside the linked card (PC only),
     mirroring the effect on .card-footer-contact .image.
     Shift the figcaption by the same inset so it sticks to the shrunk image. */
    @media (hover: hover) {
      >.card:hover>.detail>figure {
        >img {
          clip-path: inset(calc(10 / 170 * 100%) round 2px);
        }

        >figcaption.image-caption {
          right: calc(10 / 170 * 100%);
          bottom: calc(10 / 170 * 100%);
        }
      }
    }

    >.card>.detail>.info {
      display: flex;
      flex: 1;
      flex-direction: column;
      justify-content: space-between;
      font-size: 1rem;
      font-feature-settings: "palt" on;
      line-height: 1.6;
      color: var(--color-basic-offwhite);
      letter-spacing: 0.08em;

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

    >.card>.detail>.info>.phone {
      display: flex;
      flex-direction: column;
      gap: 4px;
      font-weight: 500;

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

    >.card>.detail>.info>.phone>.time {
      font-family: var(--font-family-inter);

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

    >.card>.detail>.info>.phone>.date {
      font-size: 0.75rem;

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

    >.card>.detail>.info>.link {
      display: flex;
      justify-content: flex-end;
      padding: 16px 0;
      font-family: var(--font-family-noto-serif);
      font-size: 1.125rem;
      font-feature-settings: "palt" on;
      line-height: 1.2;
      letter-spacing: 0.08em;

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

      >span::after {
        position: relative;
        top: 2px;
        display: inline-block;
        width: 30px;
        height: 16px;
        margin-left: 24px;
        content: "";
        background: url("/images/renoalpha/common/icon-arrow-right-offwhite-01.svg") no-repeat;
        background-size: contain;

        @media (max-width: 1020px) {
          width: 22px;
          height: 12px;
          margin-left: 8px;
        }
      }
    }

    >.card[target="_blank"]>.detail>.info>.link {
      letter-spacing: normal;

      >span::after {
        background-image: url("/images/renoalpha/common/icon-external-white-02.svg");
      }
    }

    >.card>.detail>.info>.tel {
      margin-top: min(20px, calc(20 / 1920 * 100vw));
      font-family: var(--font-family-instrument-serif);
      font-size: min(3rem, calc(48 / 1920 * 100vw));
      line-height: 1;

      @media (max-width: 1020px) {
        margin-top: 8px;
        font-size: 2.125rem;
        letter-spacing: normal;
      }
    }
  }

  /* .header-menu-search
------------------------------------------------ */
  .header-menu-search {
    position: fixed;
    top: 0;
    left: 0;
    z-index: calc(var(--z-index-header) + 1);
    display: flex;
    visibility: hidden;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: rgb(87 84 81 / 70%);
    opacity: 0;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transition:
      opacity 0.2s ease-out,
      visibility 0s linear 0.2s;

    &[aria-hidden="false"] {
      visibility: visible;
      opacity: 1;
      transition:
        opacity 0.2s ease-out,
        visibility 0s;
    }

    .inner {
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: 100%;
      height: 100%;
      padding: 0 20px;
    }

    .inner>.search-heading {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 32px;
      color: var(--color-basic-offwhite);
    }

    .inner>.search-heading>.content {
      display: flex;
      flex-direction: column;
    }

    .inner>.search-heading>.content>.title {
      font-family: var(--font-family-instrument-serif);
      font-size: 1.5rem;
      line-height: 1.2;
    }

    .inner>.search-heading>.content>.subtitle {
      font-family: var(--font-family-noto-serif);
      font-size: 0.8125rem;
      font-weight: 500;
      line-height: 1.2;
    }

    .inner>.search-heading>.btn-close {
      position: relative;
      display: flex;
      align-items: center;
      height: 24px;
      padding-right: 28px;
      font-size: 0.75rem;
      font-weight: 500;
      line-height: 1.2;
      color: var(--color-basic-offwhite);

      &::after {
        position: absolute;
        top: 50%;
        right: 0;
        width: 24px;
        height: 24px;
        content: "";
        background-image: url("/images/renoalpha/common/icon-close-white-01.svg");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        transform: translateY(-50%);
      }
    }

    .inner>.search-detail {
      /* style */
    }

    .inner>.search-detail .box-search {
      >.container {
        display: flex;
        align-items: center;
        min-height: 48px;
        padding: 8px 12px;
        background-color: var(--color-basic-offwhite);
        border-radius: 999px;
        transition: box-shadow 0.2s ease-in-out;
      }

      >.container:has(:focus-visible) {
        outline: 2px solid var(--color-basic-brown);
        outline-offset: 2px;
        box-shadow: 0 0 0 4px var(--color-white);
      }

      >.container>.search-btn {
        width: 32px;
        min-width: 32px;
        height: 32px;
        padding: 0;
        margin-right: 12px;
        cursor: pointer;
        outline: none;
        background-color: transparent;
        background-image: url("/images/renoalpha/common/icon-search-brown.svg");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        border: none;
      }

      >.container>.search-input {
        flex-grow: 1;
        font-family: var(--font-family-noto-serif);
        font-size: 0.875rem;
        font-weight: 500;
        font-feature-settings: "palt" on;
        line-height: 1.6;
        color: var(--color-basic-brown);
        letter-spacing: 0.08em;
        outline: none;
        background: transparent;
        border: none;
      }
    }

    .inner>.search-detail>.box-tag {
      margin-top: 16px;

      >.heading {
        margin-bottom: 8px;
        font-size: 0.875rem;
        font-weight: 500;
        line-height: 1.2;
        color: var(--color-white);
      }

      >.list-tag {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
      }

      >.list-tag>.tag {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 20px;
        padding: 2px 8px;
        font-size: 0.8125rem;
        font-weight: 500;
        line-height: 1.2;
        color: var(--color-basic-brown);
        background-color: var(--color-white);
        border-radius: 999px;
        transition: opacity 0.2s ease-out;

        &:focus-visible {
          outline: 2px solid var(--color-basic-brown);
          outline-offset: 2px;
          box-shadow: 0 0 0 4px var(--color-white);
        }

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

    &:not([data-view-pc]) {
      @media (min-width: 1021px) {
        display: none;
      }
    }

    &[data-view-pc] {
      padding-right: 48px;
      padding-left: 48px;

      >.inner {
        max-width: 1360px;
        padding: 0;
        margin: 0 auto;
      }

      >.inner>.search-heading {
        margin-bottom: 64px;
      }

      >.inner>.search-heading>.content>.title {
        font-size: 3rem;
      }

      >.inner>.search-heading>.content>.subtitle {
        font-size: 1rem;
      }

      >.inner>.search-detail .box-search>.container {
        min-height: 64px;
        padding: 16px 24px;
      }

      >.inner>.search-detail .box-search>.container>.search-input {
        font-size: 1.125rem;
      }

      >.inner>.search-detail>.box-tag>.heading {
        margin-bottom: 17px;
        font-size: 1.125rem;
      }

      >.inner>.search-detail>.box-tag {
        margin-top: 32px;
      }

      >.inner>.search-detail>.box-tag>.list-tag {
        gap: 8px;
      }

      >.inner>.search-detail>.box-tag>.list-tag>.tag {
        min-height: 27px;
        padding: 4px 16px;
        font-size: 1rem;
      }

      >.inner>.search-heading>.btn-close {
        font-size: 0.875rem;
        transition: opacity 0.2s ease-out;

        &:hover {
          opacity: 0.7;
        }
      }

      >.inner>.search-detail .box-search>.container>.search-btn {
        margin-right: 22px;
      }
    }
  }

  /* .header-menu-contact
------------------------------------------------ */
  .header-menu-contact {
    position: fixed;
    top: 0;
    left: 0;
    z-index: calc(var(--z-index-header) - 1);
    display: flex;
    visibility: hidden;
    align-items: safe center;
    width: 100%;
    height: 100%;
    padding: 0 20px;
    overflow: auto;
    background-color: rgb(87 84 81 / 70%);
    opacity: 0;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transition:
      opacity 0.2s ease-out,
      visibility 0s linear 0.2s;

    &[aria-hidden="false"] {
      visibility: visible;
      opacity: 1;
      transition:
        opacity 0.2s ease-out,
        visibility 0s;
    }

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

    >.inner {
      display: block;
      width: 100%;
      padding-top: 59px;
      padding-bottom: 100px;
    }

    >.inner>.header-mega-menu-content {
      display: flex;
      flex-direction: column;
      gap: 1px;
    }

    >.header-mega-menu-content>a[data-card-form] {
      border-radius: 1px 1px 0 0;
    }
  }

  /* .header-menu-contact-pc
------------------------------------------------ */
  .header-menu-contact-pc {
    position: fixed;
    top: 0;
    left: 0;
    z-index: calc(var(--z-index-header) + 1);
    display: flex;
    visibility: hidden;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: rgb(87 84 81 / 70%);
    opacity: 0;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transition:
      opacity 0.2s ease-out,
      visibility 0s linear 0.2s;

    &[aria-hidden="false"] {
      visibility: visible;
      opacity: 1;
      transition:
        opacity 0.2s ease-out,
        visibility 0s;
    }

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

    >.container {
      display: flex;
      align-items: safe center;
      width: 100%;
      height: 100%;
      padding: min(48px, 48 / 1920 * 100vw) min(48px, 48 / 1920 * 100vw) min(48px, 48 / 1920 * 100vw) min(260px, 260 / 1920 * 100vw);
      overflow: auto;
    }

    >.container>.container-inner {
      display: flex;
      gap: min(40px, 40 / 1920 * 100vw);
      width: 100%;
      max-width: 1389px;
      margin-left: min(calc(75 / 1920 * 100vw), 75px);

      @media (min-width: 1921px) {
        margin: 0 auto;
      }
    }

    >.container>.container-inner>.contact-content {
      display: grid;
      flex: 1;
      grid-template-columns: 1fr 1fr;
      gap: 1px;
    }

    >.container>.container-inner>.contact-content>.card {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: min(40px, calc(40 / 1920 * 100vw));
      background-color: var(--color-basic-brown);
      transition: background 0.2s ease-out;

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

      &[data-card-form] {
        border-top-left-radius: 2px;
        border-bottom-left-radius: 2px;
      }

      &[data-card-phone] {
        border-top-right-radius: 2px;
        border-bottom-right-radius: 2px;
      }
    }

    >.container>.container-inner>.contact-content>.card>.heading {
      margin-bottom: min(140px, calc(140 / 1920 * 100vw));
      font-family: var(--font-family-instrument-serif);
      font-size: 3rem;
      line-height: 1;
      color: var(--color-basic-offwhite);

      >span {
        display: block;
        margin-top: 8px;
        font-family: var(--font-family-noto-serif);
        font-size: 1rem;
        font-weight: 500;

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

    >.container>.container-inner>.contact-content>.card>.detail {
      display: flex;
      gap: min(30px, calc(30 / 1920 * 100vw));

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

    >.container>.container-inner>.contact-content>.card>.detail>figure {
      position: relative;
      flex-shrink: 0;
      align-self: flex-start;
      width: min(170px, calc(170 / 1920 * 100vw));

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

      >figcaption.image-caption {
        /* Match the image's clip-path timing so the caption follows it on hover. */
        transition:
          right 0.3s ease-out,
          bottom 0.3s ease-out;

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

      >img {
        display: block;
        width: 100%;
        height: auto;
        border-radius: 2px;
        clip-path: inset(0 round 2px);
        transition: clip-path 0.3s ease-out;
      }
    }

    @media (hover: hover) {
      >.container>.container-inner>.contact-content>.card:hover>.detail>figure {
        >img {
          clip-path: inset(calc(10 / 170 * 100%) round 2px);
        }

        >figcaption.image-caption {
          right: calc(10 / 170 * 100%);
          bottom: calc(10 / 170 * 100%);
        }
      }
    }

    >.container>.container-inner>.contact-content>.card>.detail>.info {
      display: flex;
      flex: 1;
      flex-direction: column;
      justify-content: space-between;
      font-size: 1rem;
      font-feature-settings: "palt" on;
      line-height: 1.6;
      color: var(--color-basic-offwhite);
      letter-spacing: 0.08em;

      @media (max-width: 1020px) {
        display: block;
        margin-top: -2px;
        font-size: 0.8125rem;
      }
    }

    >.container>.container-inner>.contact-content>.card>.detail>.info>.phone {
      display: flex;
      flex-direction: column;
      gap: 4px;
      font-weight: 500;

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

    >.container>.container-inner>.contact-content>.card>.detail>.info>.phone>.time {
      font-family: var(--font-family-inter);

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

    >.container>.container-inner>.contact-content>.card>.detail>.info>.phone>.date {
      font-size: 0.75rem;

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

    >.container>.container-inner>.contact-content>.card>.detail>.info>.link {
      display: flex;
      justify-content: flex-end;
      padding: 16px 0;
      font-family: var(--font-family-noto-serif);
      font-size: 1.125rem;
      line-height: 1.2;

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

      >span::after {
        position: relative;
        top: 2px;
        display: inline-block;
        width: 30px;
        height: 16px;
        margin-left: 24px;
        content: "";
        background: url("/images/renoalpha/common/icon-arrow-right-offwhite-01.svg") no-repeat;
        background-size: contain;

        @media (max-width: 1020px) {
          width: 22px;
          height: 12px;
          margin-left: 8px;
        }
      }
    }

    >.container>.container-inner>.contact-content>.card[target="_blank"]>.detail>.info>.link {
      >span::after {
        background-image: url("/images/renoalpha/common/icon-external-white-02.svg");
      }
    }

    >.container>.container-inner>.contact-content>.card>.detail>.info>.tel {
      margin-top: min(20px, calc(20 / 1920 * 100vw));
      font-family: var(--font-family-instrument-serif);
      font-size: min(3rem, calc(48 / 1920 * 100vw));
      line-height: 1;

      @media (max-width: 1020px) {
        margin-top: 8px;
        font-size: 2.125rem;
        letter-spacing: normal;
      }
    }
  }
}

@layer components {

  /* ---------------------------------------------
  .heading-page-01
------------------------------------------------ */
  .heading-page-01 {
    margin-bottom: 104px;

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

    &[data-variant-position="center"] {
      text-align: center;

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

    &:has(.link) {
      display: flex;
      gap: 20px;
      align-items: flex-end;
      justify-content: space-between;

      @media (max-width: 1020px) {
        flex-direction: column;
        gap: 20px;
        align-items: normal;
      }
    }

    >h1,
    >h2 {
      display: flex;
      flex-direction: column;
      gap: 16px;
      font-family: var(--font-family-noto-serif);
      font-size: 1.125rem;
      font-weight: 500;
      line-height: 1;

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

      &[data-no-gap] {
        gap: 0;
      }

      &[data-no-gap-sp] {
        @media (max-width: 1020px) {
          gap: 0;
        }
      }
    }

    >h1>span,
    >h2>span {
      display: block;
    }

    >h1>.title-en,
    >h2>.title-en {
      font-family: var(--font-family-instrument-serif);
      font-size: 5rem;

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

    >.link {
      display: inline-flex;
      flex-shrink: 0;
      gap: 24px;
      align-items: center;
      margin: 16px 0;
      font-family: var(--font-family-noto-serif);
      font-size: 1.125rem;
      font-weight: 500;
      line-height: 1.6;
      transition: opacity 0.2s ease-out;

      @media (max-width: 1020px) {
        gap: 4px;
        align-self: flex-end;
        margin: 8px 0;
        font-size: 0.875rem;
      }

      &::after {
        display: block;
        width: 30px;
        height: 16px;
        content: "";
        background: url("/images/renoalpha/common/icon-arrow-right-brown-01.svg") no-repeat;
        background-size: contain;

        @media (max-width: 1020px) {
          width: 22px;
          height: 12px;
          margin-left: 8px;
        }
      }

      @media (hover: hover) {
        &:hover {
          opacity: var(--opacity-hover);
        }
      }
    }

    >.link>img {
      display: block;
      width: 32px;
      height: 32px;

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

    &[data-position-sticky] {
      position: sticky;
      top: 56px;

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

  /* ---------------------------------------------
  .heading-detail-01
------------------------------------------------ */
  .heading-detail-01 {
    margin-bottom: 104px;

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

    >h1 {
      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) {
        font-size: 1.25rem;
      }
    }

    >.description {
      display: flex;
      gap: 20px;
      justify-content: space-between;
      margin-top: 30px;
      font-family: var(--font-family-noto-serif);
      font-size: 1.5rem;
      font-weight: 500;
      line-height: 1.4;

      @media (max-width: 1020px) {
        flex-direction: column;
        gap: 32px;
        justify-content: flex-start;
        margin-top: 16px;
        font-size: 1rem;
      }
    }

    >.description>.tag {
      display: flex;
      flex-shrink: 0;
      gap: 16px;
      align-self: flex-end;
      font-family: var(--font-family-base);

      @media (max-width: 1020px) {
        gap: 8px;
        align-self: normal;
      }
    }

    >.description>.tag>li {
      font-size: 0.875rem;
      font-weight: 500;
      line-height: 1;
      color: var(--color-basic-attention);
    }
  }
}

@layer components {
  .image-caption {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 3;
    padding: 4px 8px;
    font-size: clamp(0.5rem, calc(12 / 1920 * 100vw), 0.75rem);
    font-weight: 400;
    font-feature-settings: "palt" on;
    line-height: 1.6;
    color: var(--color-white);
    letter-spacing: 0.08em;

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

    &[data-variant-image-caption="background"] {
      background: rgb(88 84 81 / 75%);
    }

    &[data-variant-image-caption="shadow"] {
      text-shadow: 0 0 4px rgb(0 0 0 / 50%);
    }
  }
}

@layer components {
  .input-text-01 {
    display: block;
    width: 100%;
    height: 40px;
    padding: 5px 16px;
    font-family: inherit;
    font-size: 1.125rem;
    background-color: var(--color-white);
    border-radius: 3px;

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

    &::-moz-placeholder {
      color: var(--color-input-placeholder);
    }

    &::placeholder {
      color: var(--color-input-placeholder);
    }

    &:focus-visible {
      outline: 2px solid var(--color-basic-brown);
      outline-offset: 2px;
      box-shadow: 0 0 0 4px var(--color-white);
    }
  }
}

@layer components {

  /* ---------------------------------------------
  .note-01
------------------------------------------------ */
  .note-01 {
    >li {
      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;
        letter-spacing: 0.07em;
      }
    }
  }

  /* ---------------------------------------------
  .list-info-01
------------------------------------------------ */
  .list-info-01 {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px calc(86 / 1920 * 100vw);
    font-size: 1rem;
    line-height: 1.5;

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

    dt {
      position: relative;
      padding-left: 16px;
      font-weight: 500;
      color: rgb(69 65 62 / 75%);
      letter-spacing: 0.03em;

      @media (max-width: 1020px) {
        padding-left: 12px;
        font-size: 0.8125rem;
        letter-spacing: 0.04em;
      }

      &::before {
        position: absolute;
        top: 12px;
        left: 0;
        width: 8px;
        height: 1px;
        content: "";
        background-color: rgb(87 84 81 / 75%);

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

    dd {
      letter-spacing: 0.08em;
    }
  }

  /* ---------------------------------------------
  .list-after-service-01
------------------------------------------------ */
  .list-after-service-01 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, calc(300 / 1920 * 100vw)), 1fr));
    -moz-column-gap: 1px;
    column-gap: 1px;

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

    &[data-variant-style="icon"]>.item {
      padding-bottom: min(64px, calc(64 / 1920 * 100vw));

      @media (max-width: 1020px) {
        min-height: 155px;
        padding-bottom: 20px;
      }
    }

    &[data-variant-style="icon"]>.item>.heading {
      @media (max-width: 1020px) {
        margin-top: 44px;
      }
    }

    &[data-variant-style="icon"]>.item:last-child>.heading {
      @media (max-width: 1020px) {
        margin-top: 30px;
      }
    }

    &[data-variant-style="icon"]>.item:last-child>.heading>p {
      @media (max-width: 1020px) {
        display: block;
        line-height: 1.85;
      }
    }

    &[data-variant-style="icon"]>.item:last-child>.heading>picture {
      @media (max-width: 1020px) {
        margin-top: 16px;
      }
    }

    >.item {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: span 3;
      padding: min(32px, calc(32 / 1920 * 100vw));
      font-size: 1rem;
      line-height: 1.5;
      letter-spacing: 0.08em;
      background-color: var(--color-basic-brown);

      @media (max-width: 1020px) {
        display: block;
        padding: 12px 16px 20px;
        font-size: 0.875rem;
        letter-spacing: 0.07em;
      }
    }

    >.item>.point {
      position: relative;
      display: inline-block;
      width: -moz-fit-content;
      width: fit-content;
      padding-bottom: 17px;
      font-family: var(--font-family-instrument-serif);
      font-size: 1.25rem;
      font-weight: 400;
      font-feature-settings: "palt" on;
      line-height: 100%;
      color: var(--color-basic-offwhite);
      letter-spacing: 0.04em;

      @media (max-width: 1020px) {
        padding-bottom: 9px;
        font-size: 0.9375rem;
        letter-spacing: 0.03em;
      }

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

    >.item>.heading {
      display: flex;
      flex-wrap: wrap;
      -moz-column-gap: min(16px, calc(16 / 1920 * 100vw));
      column-gap: min(16px, calc(16 / 1920 * 100vw));
      margin-top: 24px;
      font-family: var(--font-family-noto-serif);
      font-size: 1.25rem;
      font-weight: 500;
      font-feature-settings: "palt" on;
      line-height: 160%;
      color: var(--color-basic-offwhite);

      @media (max-width: 1020px) {
        -moz-column-gap: 8px;
        column-gap: 8px;
        margin-top: 32px;
        font-size: 0.9375rem;
        letter-spacing: 0.03em;
      }
    }

    >.item>.heading>p {
      flex: 1;
      line-height: 1.6;

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

    >.item>.heading>p>.small {
      display: block;
      font-family: var(--font-family-base);
      font-size: 0.875rem;
      font-weight: 400;

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

    >.item>.heading>p>.medium {
      display: block;
      font-size: 1.125rem;
      font-weight: 500;
      letter-spacing: 0.04em;

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

    >.item>.heading .icon {
      width: min(48px, calc(48 / 1920 * 100vw));
      height: min(48px, calc(48 / 1920 * 100vw));

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

    >.item>.heading+.note {
      margin-top: 70px;

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

    >.item>.note {
      font-size: 0.75rem;
      font-style: normal;
      font-weight: 400;
      font-feature-settings: "palt" on;
      line-height: 160%;
      color: var(--color-basic-offwhite);

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

  /* ---------------------------------------------
  .list-note-01
------------------------------------------------ */
  .list-note-01 {
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 400;
    font-feature-settings: "palt" on;
    line-height: 2;
    letter-spacing: 0.08em;

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

@layer components {

  /* main[data-mainvisual-lower]
--------------------------------------------- */
  main[data-mainvisual-lower] {
    position: relative;

    >.breadcrumb {
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      z-index: 12;
      width: 100%;

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

      >ul>li>a {
        
        color: rgb(255 255 255 / 75%);
        transition: color 0.2s ease-out;
  
        @media (hover: hover) {
          &:hover {
            color: var(--color-white);
          }
        }
      }
    }

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

    >.section-main {
      padding-top: 0;
      padding-right: 0;

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

  /* .mainvisual-lowerpage
--------------------------------------------- */
  .mainvisual-lowerpage {
    @media (max-width: 1020px) {
      margin-top: 32px;
    }

    >.inner {
      display: grid;
      grid-template-columns: min(610px, calc(610 / 1920 * 100vw)) 1fr;
      -moz-column-gap: min(calc(104 / 1920 * 100vw), 104px);
      column-gap: min(calc(104 / 1920 * 100vw), 104px);

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

    >.inner>.col:nth-child(1) {
      display: flex;
      flex-direction: column;
      margin-top: min(270px, calc(270 / 1920 * 100vw));

      @media (max-width: 1020px) {
        order: 2;
        padding-inline: 20px;
        margin-top: 0;
      }
    }

    >.inner>.col:nth-child(1)>.heading-page-01 {
      margin-bottom: min(104px, calc(104 / 1920 * 100vw));
    }

    >.inner>.col:nth-child(1)>.sub-heading {
      margin-top: min(140px, calc(140 / 1920 * 100vw));
      font-family: var(--font-family-noto-serif);
      font-size: min(2rem, calc(32 / 1920 * 100vw));
      font-style: normal;
      font-weight: 500;
      font-feature-settings: "palt" on;
      line-height: 1.6;
      letter-spacing: 0.08em;

      @media (max-width: 1020px) {
        margin-top: 86px;
        font-size: 1.25rem;
        line-height: 1.6;
      }
    }

    >.inner>.col:nth-child(1)>.text {
      margin-top: 40px;
      font-size: min(1.125rem, calc(18 / 1920 * 100vw));
      font-weight: 400;
      font-feature-settings: "palt" on;
      line-height: 2;
      letter-spacing: 0.08em;

      @media (max-width: 1020px) {
        padding-bottom: 60px;
        margin-top: 24px;
        font-size: 0.875rem;
        border-bottom: 1px solid var(--color-basic-gray);
      }
    }

    >.inner>.col:nth-child(2) {
      position: relative;
      height: 100dvh;

      @media (max-width: 1020px) {
        order: 1;
        height: auto;
        padding-top: calc(242 / 375 * 100%);
      }
    }

    >.inner>.col:nth-child(2)>.logo {
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 10;
      transform: translate(-50%, -50%);
    }

    >.inner>.col:nth-child(2)>.logo>img {
      @media (max-width: 1020px) {
        width: min(204px, calc(204 / 375 * 100vw));
        height: auto;
        -o-object-fit: contain;
        object-fit: contain;
      }
    }

    >.inner>.col:nth-child(2)>.image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    >.inner>.col:nth-child(2)>.image>picture {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    >.inner>.col:nth-child(2)>.image>picture source,
    >.inner>.col:nth-child(2)>.image>picture img {
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
      object-fit: cover;

      @media (max-width: 1020px) {
        -o-object-position: center 0;
        object-position: center 0;
      }
    }
  }
}

@layer components {

  /* .modal-gallery
------------------------------------------------ */
  .modal-gallery {
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--z-index-modal);
    display: none;
    width: 100%;
    height: 100%;
    background-color: rgb(0 0 0 / 90%);

    /* Mobile-only: keep the modal in the layout so it can fade via opacity/visibility. */
    @media (max-width: 1020px) {
      display: block;
      visibility: hidden;
      opacity: 0;
      transition:
        opacity 0.2s ease-out,
        visibility 0.2s ease-out;

      &[aria-hidden="false"] {
        visibility: visible;
        opacity: 1;
      }
    }

    >.container {
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    >.container>.head {
      display: flex;
      flex-shrink: 0;
      gap: 20px;
      align-items: center;
      justify-content: space-between;
      padding: 14px;
    }

    >.container>.head>h2 {
      flex: 1;
      font-size: 1rem;
      color: var(--color-white);
    }

    >.container>.head>.btn-close {
      display: block;
      flex-shrink: 0;
      width: 42px;
      height: 42px;
      font-family: var(--font-family-inter);
      color: var(--color-white);
      text-align: center;
      cursor: pointer;
      background: rgb(255 255 255 / 6%);
      border: 1px solid var(--line);
      border-radius: 999px;
    }

    >.container>.body {
      position: relative;
      display: flex;
      flex: 1;
      overflow: auto;
    }

    >.container>.body>figure {
      padding: 20px;
    }

    >.container>.body>figure>img {
      display: block;
      width: auto;
      height: auto;
      max-height: 100%;
      margin: auto;
      border-radius: 18px;
    }
  }

  /* .modal-floor-plan
------------------------------------------------ */
  .modal-floor-plan {
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--z-index-modal);
    visibility: hidden;
    width: 100%;
    height: 100%;
    background-color: rgb(0 0 0 / 90%);
    opacity: 0;
    transition:
      opacity 0.2s ease-out,
      visibility 0.2s ease-out;

    &[aria-hidden="false"] {
      visibility: visible;
      opacity: 1;
    }

    >.container {
      height: 100%;
      padding: 120px 66px;
      overflow: auto;
    }

    >.container>.image {
      position: relative;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      max-width: 700px;
      margin: 0 auto;
    }

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

      &[data-variant-modal-floor-plan="01"] {
        width: auto;
        height: 660px;

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

    >.container>.image>.btn-close {
      position: absolute;
      top: 0;
      left: calc(100% + 16px);
      z-index: 1;
      display: block;
      width: 48px;
      height: 48px;
      background: url("/images/renoalpha/common/icon-close-01.svg") no-repeat;
      background-size: contain;
      transition: opacity 0.2s ease-out;

      @media (max-width: 1020px) {
        top: -58px;
        left: calc(100% + (-48px));
      }

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

  /* .modal-after-service
------------------------------------------------ */
  .modal-after-service {
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--z-index-modal);
    visibility: hidden;
    width: 100%;
    height: 100%;
    background-color: rgb(0 0 0 / 90%);
    opacity: 0;
    transition:
      opacity 0.2s ease-out,
      visibility 0.2s ease-out;

    &[aria-hidden="false"] {
      visibility: visible;
      opacity: 1;
    }

    >.container {
      height: 100%;
      padding: 120px 66px;
      overflow: auto;
    }

    >.container>.image {
      position: relative;
      max-width: 700px;
      margin: 0 auto;
    }

    >.container>.image>img {
      display: block;
      width: auto;
      max-width: 100%;
      height: auto;
    }

    >.container>.image>.btn-close {
      position: absolute;
      top: 0;
      left: calc(100% + 16px);
      z-index: 1;
      display: block;
      width: 48px;
      height: 48px;
      background: url("/images/renoalpha/common/icon-close-01.svg") no-repeat;
      background-size: contain;
      transition: opacity 0.2s ease-out;

      @media (max-width: 1020px) {
        top: -58px;
        left: calc(100% + (-48px));
      }

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

  /* .modal-concept
------------------------------------------------ */
  .modal-concept {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    visibility: hidden;
    width: 100%;
    height: 100dvh;
    padding-inline: 50px;
    background-color: rgb(88 84 81 / 30%);
    opacity: 0;
    -webkit-backdrop-filter: blur(32px);
    backdrop-filter: blur(32px);
    transition: all 0.2s ease-out;

    &[aria-hidden="false"] {
      visibility: visible;
      opacity: 1;
    }

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

    >.btn-close {
      position: absolute;
      top: min(120px, calc(120 / 1920 * 100vw));
      left: calc(50% + min(368px, calc(368 / 1440 * 100vw)));
      z-index: 4;
      display: block;
      width: 48px;
      height: 48px;
      cursor: pointer;
      background: url("/images/renoalpha/common/icon-close-01.svg") no-repeat;
      background-size: contain;
      transition: all 0.2s ease-out;

      @media (max-width: 1020px) {
        top: 20px;
        right: 20px;
        left: auto;
        left: initial;
        width: 32px;
        height: 32px;
      }

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

    >.inner {
      position: relative;
      z-index: 3;
      box-sizing: border-box;
      width: min(700px, calc(700 / 1440 * 100vw));
      height: 100dvh;
      padding-block: min(120px, calc(120 / 1920 * 100vw));
      margin: 0 auto;
      overflow-y: auto;
      overscroll-behavior: contain;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
      -ms-overflow-style: none;

      &::-webkit-scrollbar {
        display: none;
      }

      &:focus-visible {
        outline: 2px solid var(--color-basic-brown);
        outline-offset: -2px;
      }

      @media (max-width: 1020px) {
        width: 100%;
        height: 85dvh;
        padding-block: 0;
      }
    }

    >.inner>.body {
      position: relative;
      width: 100%;
      max-width: 700px;
      padding: min(40px, calc(40 / 1920 * 100vw)) min(40px, calc(40 / 1920 * 100vw)) min(64px, calc(64 / 1920 * 100vw));
      margin: 0 auto;
      background-color: var(--color-basic-offwhite);

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

    >.inner>.body>.image {
      width: 100%;
    }

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

    >.inner>.body>.box-heading {
      padding-bottom: min(69px, calc(69 / 1440 * 100vw));
      margin: min(26px, calc(26 / 1440 * 100vw)) 0 min(69px, calc(69 / 1440 * 100vw));
      border-bottom: 1px solid var(--color-basic-gray);

      @media (max-width: 1020px) {
        padding-bottom: 34px;
        margin: 26px 0 34px;
      }
    }

    >.inner>.body>.box-heading>.heading {
      margin-bottom: min(22px, calc(22 / 1440 * 100vw));
      font-family: var(--font-family-noto-serif);
      font-size: min(1.5rem, calc(24 / 1440 * 100vw));
      font-weight: 500;
      line-height: 1.6;
      color: var(--color-basic-brown);
      letter-spacing: 0.02em;

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

    >.inner>.body>.box-heading>.sub {
      display: flex;
      gap: 40px;
      align-items: baseline;
    }

    >.inner>.body>.box-heading>.sub>.promise {
      position: relative;
      font-family: var(--font-family-instrument-serif);
      font-size: min(1.25rem, calc(20 / 1440 * 100vw));
      line-height: 1.6;
      color: var(--color-basic-brown);
      letter-spacing: 0.08em;

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

    >.inner>.body>.box-heading>.sub>.promise::after {
      position: absolute;
      top: 50%;
      right: -32px;
      display: block;
      width: 24px;
      height: 1px;
      content: "";
      background-color: var(--color-basic-brown);
      transform: translateY(-50%);
    }

    >.inner>.body>.box-heading>.sub>.caption {
      font-size: min(1rem, calc(16 / 1440 * 100vw));
      line-height: 2;
      color: var(--color-basic-brown);

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

    >.inner>.body>.content>.title {
      margin-bottom: min(19px, calc(19 / 1440 * 100vw));
      font-family: var(--font-family-noto-serif);
      font-size: min(1.5rem, calc(24 / 1440 * 100vw));
      font-weight: 500;
      line-height: 1.6;
      color: var(--color-basic-brown);

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

    >.inner>.body>.content>.title+* {
      margin-top: 0 !important;
    }

    >.inner>.body>.content>.title:not(:first-child) {
      margin-top: min(69px, calc(69 / 1440 * 100vw));

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

    >.inner>.body>.content>.text,
    >.inner>.body>.content>.list-text {
      margin-top: min(30px, calc(30 / 1440 * 100vw));
      font-size: min(1rem, calc(16 / 1440 * 100vw));
      line-height: 2;
      color: var(--color-basic-brown);

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

    >.inner>.body>.content>.list-text {
      margin-left: 16px;

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

    >.inner>.body>.content>.list-text>li {
      position: relative;
      display: flex;
      padding-left: 10px;
    }

    >.inner>.body>.content>.list-text>li::before {
      position: absolute;
      top: 0;
      left: -3px;
      display: block;
      content: "・";
    }

    >.inner>.body>.content .image {
      width: 100%;
    }

    >.inner>.body>.content .image:not(:first-child) {
      margin-top: 33px;
    }

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

@layer components {

  /* ---------------------------------------------
  .nav-pagination
------------------------------------------------ */
  .nav-pagination {
    display: flex;
    flex-direction: column;
    align-items: center;

    >.pagination {
      display: inline-flex;
      flex-wrap: nowrap;
      gap: 16px;

      >li {
        font-family: var(--font-family-inter);
        font-size: 1.125rem;
        line-height: 1;

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

      >li>.ellipsis {
        position: relative;
        top: 4px;

        @media (min-width: 1021px) {
          top: 3px;
        }
      }

      >li>*:first-child:not(.ellipsis) {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        color: var(--color-basic-black);
        border-radius: 2px;
        transition: background-color 0.2s ease-out;
      }

      >li.prev>*:first-child:not(.ellipsis) {
        width: 40px;
      }

      >li.next>*:first-child:not(.ellipsis) {
        width: 40px;
      }


      >li>*:first-child.active {
        color: var(--color-white);
        background-color: var(--color-basic-attention);
      }

      >li>*:first-child:is(a) {
        @media (hover: hover) {
          &:not(.active):hover {
            color: var(--color-white);
            background-color: var(--color-basic-attention);
          }
        }
      }
    }
  }
}

@layer components {

  /* .panel-link
------------------------------------------------ */
  .panel-link {
    padding: min(40px, calc(40 / 1920 * 100vw)) min(38px, calc(38 / 1920 * 100vw)) min(50px, calc(50 / 1920 * 100vw));
    color: var(--color-basic-offwhite);
    background-color: var(--color-basic-brown);
    transition: background-color 0.3s ease-in-out;

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

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

    >.head {
      display: flex;
      flex-direction: column;
      gap: 8px;
      text-align: left;

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

    >.head>.heading {
      font-family: var(--font-family-instrument-serif);
      font-size: 3rem;
      font-style: normal;
      font-weight: 400;
      line-height: 1;

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

    >.head>.lead-text {
      font-family: var(--font-family-noto-serif);
      font-size: 1rem;
      font-weight: 500;

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

    >.body {
      text-align: left;
    }

    >.body>.text {
      padding-block: min(75px, calc(75 / 1920 * 100vw)) min(32px, calc(32 / 1920 * 100vw));
      font-size: 1rem;
      font-weight: 400;
      line-height: 1.6;

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

    >.body>.link {
      position: relative;
      padding-right: 40px;
      font-family: var(--font-family-noto-serif);
      font-size: 1.125rem;
      font-weight: 500;

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

      &::after {
        position: absolute;
        top: 6px;
        right: 0;
        display: inline-block;
        width: 30px;
        height: 16px;
        margin-bottom: -2px;
        margin-left: min(calc(10 / 1920 * 100vw), 10px);
        content: "";
        background-image: url("/images/renoalpha/common/icon-arrow-right-offwhite-01.svg");
        background-repeat: no-repeat;
        background-position: center center;
        background-size: contain;

        @media (max-width: 1020px) {
          top: 3px;
          width: 22px;
          height: 14px;
          margin-left: 10px;
        }
      }
    }
  }

  /* .panel-list
------------------------------------------------ */
  .panel-list {
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-columns: repeat(5, 1fr);
    gap: 1px;

    @media (max-width: 1020px) {
      display: flex;
      flex-direction: column;
      grid-template-rows: initial;
      grid-template-columns: initial;
    }

    &:not(:first-child) {
      margin-top: 168px;

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

    >.item {
      position: relative;
      display: grid;
      grid-template-rows: subgrid;
      grid-row: span 3;

      @media (max-width: 1020px) {
        display: block;
        grid-row: auto;
      }
    }

    >.item>.panel-link {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: span 3;

      @media (max-width: 1020px) {
        display: block;
        grid-row: auto;
      }
    }

    >.item>.panel-link>.head {
      grid-row: 1;
    }

    >.item>.panel-link>.body {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: 2 / span 2;

      @media (max-width: 1020px) {
        display: block;
        grid-row: auto;
      }
    }

    >.item>.panel-link>.body>.text {
      grid-row: 1;
    }

    >.item>.panel-link>.body>.link {
      display: flex;
      grid-row: 2;
      justify-content: flex-end;
    }
  }

  /* .panel-ink-flow
------------------------------------------------ */
  .panel-link-flow {
    position: relative;
    display: block;
    color: var(--color-basic-offwhite);

    @media (hover: hover) {
      &:hover>.content {
        background-color: var(--color-basic-black);
      }
    }

    >.image {
      position: relative;
      width: 100%;
      height: auto;
      overflow: hidden;
    }

    >.image>figcaption.image-caption[data-variant-image-caption="shadow"] {
      @media (max-width: 1020px) {
        right: min(24px, calc(24 / 375 * 100vw));
        bottom: min(12px, calc(12 / 375 * 100vw));
      }
    }

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

    >.content {
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 3;
      display: grid;
      grid-template-columns: 1fr;
      row-gap: min(60px, calc(60 / 1920 * 100vw));
      justify-content: space-between;
      width: calc((100% - calc(128 / 1920 * 100vw)));
      height: -moz-fit-content;
      height: fit-content;
      padding: min(40px, calc(40 / 1920 * 100vw));
      background-color: var(--color-basic-brown);
      transform: translate(-50%, -50%);
      transition: background-color 0.3s ease-in-out;

      @media (max-width: 1020px) {
        display: block;
        width: 292px;
        min-height: 151px;
        padding: 20px;
      }
    }

    >.content>.heading {
      padding-block: min(26px, calc(26 / 1920 * 100vw));
      font-family: var(--font-family-noto-serif);
      font-size: min(1.5rem, calc(24 / 1920 * 100vw));
      font-weight: 500;
      font-feature-settings: "palt" on;
      line-height: 120%;
      letter-spacing: 0.08em;

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

    >.content>.readmore {
      position: relative;
      top: -10px;
      display: flex;
      flex-wrap: wrap;
      justify-self: flex-end;
      width: -moz-fit-content;
      width: fit-content;
      padding-right: min(40px, calc(40 / 1920 * 100vw));
      font-family: var(--font-family-noto-serif);
      font-size: min(1.125rem, calc(18 / 1920 * 100vw));
      font-weight: 500;
      font-feature-settings: "palt" on;
      line-height: 160%;

      @media (max-width: 1020px) {
        top: auto;
        padding-right: 32px;
        margin-top: 20px;
        font-size: 0.875rem;
      }

      &::after {
        position: absolute;
        top: min(5px, calc(5 / 1920 * 100vw));
        right: 0;
        display: inline-block;
        width: min(30px, calc(30 / 1920 * 100vw));
        height: min(16px, calc(16 / 1920 * 100vw));
        margin-bottom: min(-2px, calc(-2 / 1920 * 100vw));
        content: "";
        background-image: url("/images/renoalpha/common/icon-arrow-right-offwhite-01.svg");
        background-repeat: no-repeat;
        background-position: center center;
        background-size: contain;

        @media (max-width: 1020px) {
          top: 5px;
          width: 22px;
          height: 14px;
          margin-bottom: -2px;
        }
      }
    }
  }
}

@layer components {
  .radio-01 {
    position: relative;
    display: inline-flex;
    gap: 2px;
    vertical-align: top;
    cursor: pointer;

    &:focus-visible {
      outline: none;
    }

    &::before {
      display: block;
      flex-shrink: 0;
      width: 24px;
      height: 24px;
      content: "";
      background: url("/images/renoalpha/common/icon-radio-attention-01.svg") no-repeat;
      background-size: contain;
    }

    &:has(input[type="radio"]:checked)::before {
      background-image: url("/images/renoalpha/common/icon-radio-attention-01-active.svg");
    }

    >span {
      position: relative;
      display: block;
      font-size: 1.125rem;
      font-feature-settings: "palt" on;
      line-height: calc(22 / 18);
      color: var(--color-basic-brown);
      letter-spacing: 0.08em;

      @media (max-width: 1020px) {
        font-size: 0.875rem;
        line-height: calc(22 / 14);
      }
    }
  }
}

@layer components {
  .select-01 {
    position: relative;
    width: 100%;
    height: 40px;
    background-color: var(--color-white);
    border-radius: 3px;

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

    &::after {
      position: absolute;
      top: 50%;
      right: 4px;
      z-index: 1;
      width: 24px;
      height: 24px;
      content: "";
      background: url("/images/renoalpha/common/icon-pulldown-01.svg") no-repeat;
      background-size: contain;
      transform: translateY(-50%);
    }

    >select {
      width: 100%;
      height: 100%;
      padding: 0 30px 0 16px;
      font-family: inherit;
      font-size: 1.125rem;

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

      &:focus-visible {
        outline: 2px solid var(--color-basic-brown);
        outline-offset: 2px;
        box-shadow: 0 0 0 4px var(--color-white);
      }
    }
  }
}

@layer components {
  .wrapper {
    background-color: var(--color-basic-offwhite);
  }
}