@layer base {
  :root {
    --fontweight-regular: 400;
    --fontweight-medium: 500;
    --fontweight-bold: 700;
    --fontweight-black: 900;
    --section-space-start: 3.2rem;
    --color-form-surface: oklch(95.21308% 0 0);
    --color-form-border: oklch(89.87673% 0.00254 165.06882);
    --color-form-placeholder: oklch(73.1595% 0 0);

    @media (width > 768px) {
      --section-space-start: 8.2rem;
    }
  }
}

@layer components {
  .l-contact-hero {
    position: relative;
    min-block-size: 28rem;
    overflow: hidden;


    @media (width > 768px) {
      min-block-size: 59rem;
      margin-block-start: min(1.6rem, 0.8333vi)
    }
  }

  .l-contact-hero__mark {
    position: absolute;
    inset: 6rem auto auto 0;
    inline-size: min(65.4534vi, 28.0141rem);
    block-size: auto;
    max-inline-size: none;

    @media (width > 768px) {
      inset-block-start: 10.3rem;
      inline-size: min(43.4968vi, 69.5949rem);
    }
  }

  .l-contact-hero__title {
    position: absolute;
    inset: 16rem 1.7rem auto auto;
    display: grid;
    justify-items: end;
    margin: 0;
    text-align: right;

    > p {
      --clamp-min: 22;
      --clamp-max: 70;
      margin: 0;
      color: var(--color-blue);
      font-weight: var(--fontweight-black);
      letter-spacing: 0.05em;
      line-height: 3.4rem;
    }

    > h1 {
      --clamp-min: 13;
      --clamp-max: 30;
      margin: 0.2rem 0 0;
      font-weight: var(--fontweight-bold);
      letter-spacing: 0.1em;
      line-height: 3.4rem;

      @media (width > 768px) {
        margin-block-start: 4.9rem;
        letter-spacing: 0.05em;
      }
    }

    @media (width > 768px) {
      inset: 38.1rem max(5.4rem, 5.4vi) auto auto;
    }
  }

  .l-contact-hero .m-breadcrumb {
    inset: 24.5rem auto auto 0.9rem;
    font-weight: var(--fontweight-bold);

    @media (width > 768px) {
      inset: 53.1rem auto auto max(8.6rem, calc((100% - var(--content-max)) / 2));
    }
  }

  .l-contact-page {
    padding-block: var(--section-space-start) 10.6rem;

    @media (width > 768px) {
      padding-block-end: 14.2rem;
    }
  }

  .l-contact-page__inner {
    inline-size: min(calc(100% - 5.3rem), 101.9rem);
    margin-inline: auto;

    @media (width > 768px) {
      inline-size: min(calc(100% - 12.4rem), var(--content-max));
    }
  }

  .l-contact-page__heading {
    > p {
      --clamp-min: 28;
      --clamp-max: 40;
      margin: 0;
      font-weight: var(--fontweight-black);
      letter-spacing: 0.05em;
      line-height: 3.4rem;
    }

    > h2 {
      --clamp-min: 16;
      --clamp-max: 18;
      display: flex;
      align-items: center;
      gap: 0.9rem;
      margin: 0.7rem 0 0;
      font-weight: var(--fontweight-bold);
      letter-spacing: 0.1em;
      line-height: 3.4rem;

      &::before {
        inline-size: 1.7rem;
        block-size: 0.3rem;
        flex: none;
        background-color: var(--color-text);
        content: "";

        @media (width > 768px) {
          inline-size: 2rem;
        }
      }

      @media (width > 768px) {
        gap: 1.3rem;
        margin-block-start: 2.5rem;
      }
    }
  }

  .l-contact-page__intro {
    --clamp-min: 12;
    --clamp-max: 16;
    margin: 0.1rem 0 0;
    font-weight: var(--fontweight-regular);
    letter-spacing: 0.1em;
    line-height: 2.5rem;

    @media (width > 768px) {
      margin-block-start: 2.7rem;
      line-height: 4rem;
    }
  }

  .l-contact-form {
    margin-block-start: 4.3rem;

    @media (width > 768px) {
      margin-block-start: 6.6rem;
    }
  }

  .l-contact-form__fields {
    display: grid;
    gap: 2.5rem;

    @media (width > 768px) {
      gap: 3.8rem;
    }
  }

  .l-contact-form__subject {
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;

    > legend {
      display: block;
      padding: 0;

      @media (width > 768px) {
        margin-block-end: 1.3rem;
      }
    }
  }

  .l-contact-form__field {
    min-inline-size: 0;

    &.-message {
      @media (width > 768px) {
        margin-block-start: 1.2rem;
      }
    }

    &.-attachment {
      margin-block-start: 3.1rem;

      @media (width > 768px) {
        margin-block-start: 2.4rem;
      }
    }
  }

  .l-contact-form__label {
    --clamp-min: 14;
    --clamp-max: 18;
    display: block;
    margin: 0;
    font-weight: var(--fontweight-bold);
    letter-spacing: 0.2em;
    line-height: 2rem;

    @media (width > 768px) {
      line-height: 2.4rem;
    }
  }

  .l-contact-form__required {
    --clamp-min: 12;
    --clamp-max: 14;
    display: inline-block;
    margin-inline-start: 1.4rem;
    color: var(--color-orange);
    font-weight: var(--fontweight-medium);
  }

  .l-contact-form__choices {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.2rem 3.2rem;
    min-block-size: 6rem;
    padding: 1.4rem 1.6rem;
    background-color: var(--color-form-surface);

    @media (width > 768px) {
      column-gap: 3.4rem;
      min-block-size: 7rem;
      padding: 1.9rem 3rem;
    }
  }

  .l-contact-form__choice {
    --clamp-min: 12;
    --clamp-max: 18;
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    max-inline-size: 100%;
    font-weight: var(--fontweight-regular);
    letter-spacing: 0.1em;
    line-height: 2.5rem;
    cursor: pointer;

    > input {
      display: grid;
      place-items: center;
      flex: none;
      box-sizing: border-box;
      inline-size: 3rem;
      block-size: 3rem;
      margin: 0;
      border: 0.2rem solid var(--color-form-border);
      border-radius: 50%;
      appearance: none;
      background-color: var(--color-white);
      cursor: pointer;

      &::before {
        inline-size: 1.4rem;
        block-size: 1.4rem;
        border-radius: 50%;
        background-color: var(--color-blue);
        visibility: hidden;
        content: "";
      }

      &:checked::before {
        visibility: visible;
      }

      &:focus-visible {
        outline: 0.2rem solid var(--color-blue);
        outline-offset: 0.3rem;
      }

      @media (width > 768px) {
        inline-size: 3.2rem;
        block-size: 3.2rem;
      }
    }

    @media (width > 768px) {
      gap: 1.4rem;
      line-height: 3.2rem;
    }
  }

  .l-contact-form__input {
    --clamp-min: 11;
    --clamp-max: 18;
    display: block;
    box-sizing: border-box;
    inline-size: 100%;
    min-inline-size: 0;
    block-size: 6rem;
    margin-block-start: 1rem;
    padding: 1.2rem 1.6rem;
    border: 0;
    border-radius: 0;
    color: inherit;
    background-color: var(--color-form-surface);
    font-family: inherit;
    font-weight: var(--fontweight-regular);
    letter-spacing: 0.2em;
    line-height: 1.7;

    &::placeholder {
      color: var(--color-form-placeholder);
      opacity: 1;
    }

    &:focus-visible {
      outline: 0.2rem solid var(--color-blue);
      outline-offset: 0.3rem;
    }

    &.-textarea {
      block-size: 30rem;
      min-block-size: 30rem;
      resize: vertical;
    }

    &.-file {
      margin-block-start: 0;
      padding: 1.1rem 1.9rem;
      overflow: hidden;
      letter-spacing: 0.1em;
      line-height: 3.8rem;
      cursor: pointer;

      &::file-selector-button {
        box-sizing: border-box;
        inline-size: 15rem;
        block-size: 3.8rem;
        margin: 0 1.9rem 0 0;
        padding: 0;
        border: 0.2rem solid var(--color-form-border);
        border-radius: 1rem;
        color: inherit;
        background-color: var(--color-white);
        font-family: inherit;
        font-size: inherit;
        font-weight: inherit;
        letter-spacing: inherit;
        line-height: 1;
        vertical-align: top;
        cursor: pointer;

        @media (width > 768px) {
          inline-size: 17rem;
          block-size: 4.5rem;
          margin-inline-end: 2.2rem;
        }
      }

      @media (width > 768px) {
        margin-block-start: 1.3rem;
        padding: 1.25rem 3.2rem;
        line-height: 4.5rem;
      }
    }

    @media (width > 768px) {
      block-size: 7rem;
      margin-block-start: 1.6rem;
      padding-inline: 3.4rem;
    }
  }

  .l-contact-form__help {
    --clamp-min: 12;
    --clamp-max: 16;
    margin: 1.9rem 0 0;
    font-weight: var(--fontweight-regular);
    letter-spacing: 0.1em;
    line-height: 2.5rem;

    @media (width > 768px) {
      margin-block-start: 1.7rem;
      line-height: 3rem;
    }
  }

  .l-contact-form__confirm {
    --clamp-min: 14;
    --clamp-max: 14;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    inline-size: min(100%, 28.9rem);
    min-block-size: 6rem;
    margin: 5rem auto 0;
    padding: 1.2rem 2rem;
    border: 0;
    border-radius: 0;
    color: var(--color-white);
    background-color: var(--color-green);
    font-family: inherit;
    font-weight: var(--fontweight-black);
    letter-spacing: 0.1em;
    line-height: 1.4;
    cursor: pointer;

    &:focus-visible {
      outline: 0.2rem solid var(--color-blue);
      outline-offset: 0.3rem;
    }

    @media (width > 768px) {
      margin-block-start: 9.4rem;
    }
  }

  .l-contact-form__arrow {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 2.4rem;
    block-size: 2.4rem;
    border-radius: 50%;
    background-color: var(--color-white);

    &::before {
      inline-size: 0;
      block-size: 0;
      margin-inline-start: 0.2rem;
      border-block: 0.45rem solid transparent;
      border-inline-start: 0.7rem solid var(--color-green);
      content: "";
    }
  }

  .l-contact-page__meeting {
    margin-block-start: 5.6rem;

    > p {
      --clamp-min: 14;
      --clamp-max: 18;
      margin: 0;
      font-weight: var(--fontweight-bold);
      letter-spacing: 0.2em;
      line-height: 3rem;

      @media (width > 768px) {
        letter-spacing: 0.1em;
        line-height: 4rem;
      }
    }

    @media (width > 768px) {
      margin-block-start: 11.2rem;
    }
  }

  .l-contact-page__tel {
    --clamp-min: 30;
    --clamp-max: 40;
    display: block;
    inline-size: fit-content;
    max-inline-size: 100%;
    margin-block-start: 2.6rem;
    color: var(--color-orange);
    font-weight: var(--fontweight-black);
    letter-spacing: 0.1em;
    line-height: 3.4rem;
    text-decoration: none;

    > span {
      --clamp-min: 14;
      --clamp-max: 20;
    }

    &:focus-visible {
      outline: 0.2rem solid var(--color-blue);
      outline-offset: 0.3rem;
    }
  }
}