@layer sections {
      #faq {
        position: relative;
        padding: clamp(110px, 18vh, 200px) 0 clamp(90px, 14vh, 160px);
      }

      #faq .fq-h {
        margin-bottom: clamp(48px, 9vh, 96px);
      }

      #faq .fq-list {
        margin: 0 var(--space-1) 0 calc(var(--space-3) + var(--space-4));
      }

      #faq .fq-item {
        position: relative;
      }

      #faq .fq-line {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: var(--color-2);
        transform-origin: 0 50%;
      }

      #faq .fq-q {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 24px;
        padding: 20px 0 22px;
        cursor: pointer;
        list-style: none;
      }

      #faq .fq-q::-webkit-details-marker {
        display: none;
      }

      #faq .fq-icon {
        position: relative;
        flex: none;
        width: 18px;
        height: 18px;
        margin-top: 4px;
      }

      #faq .fq-icon::before,
      #faq .fq-icon::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: calc(50% - 1px);
        height: 2px;
        background: var(--color-2);
        transition: transform 0.35s cubic-bezier(0.7, 0, 0.2, 1);
      }

      #faq .fq-icon::after {
        transform: rotate(90deg);
      }

      #faq details[open] .fq-icon::after {
        transform: rotate(0deg);
      }

      #faq .fq-a {
        max-width: 58ch;
        padding: 0 0 26px;
      }

      @media (max-width: 700px) {
        #faq .fq-list {
          margin-left: var(--space-1);
        }
      }
    }