@charset "utf-8";

/* =====================
  Reset
===================== */
body[data-page='entry'] .u-inner:has([data-id='index']) {
  @media only screen and (width <= 768px) {
    padding-block: 36.3vw 16.8vw;
  }
}

body[data-page='entry'] .u-inner:has([data-id='complete']) {
  @media (width > 768px) {
    padding-block: 202px 113px;
  }

  @media only screen and (width <= 768px) {
    padding-block: 40.3vw 20.8vw;
  }
}

.u-inner {
  padding-block: 212px 119px;

  @media only screen and (width <= 768px) {
    padding-block: calc((100 / 390) * 156 * 1vw) calc((100 / 390) * 77 * 1vw);
    padding-inline: calc((100 / 390) * 20 * 1vw);

    &:has([data-id='complete']) {
      padding-block: calc((100 / 390) * 140 * 1vw) calc((100 / 390) * 64 * 1vw);
    }

    &:has([data-id='complete']) {
      .u-hgroup {
        margin-block-end: 10vw;
      }
    }
  }

  .u-hgroup {
    margin-block-end: 65px;
    margin-inline: auto;

    &::before {
      inset-inline-start: 60px;
    }

    @media only screen and (width <= 768px) {
      &::before {
        inset-inline-start: calc((100 / 390) * 35 * 1vw);
      }
    }

    @media only screen and (width <= 768px) {
      margin-block-end: calc((100 / 390) * 32 * 1vw);
    }
  }

  & button:is([form='submit'], [form='post']) {
    font-size: 18px;

    @media only screen and (width <= 768px) {
      font-size: calc((100 / 390) * 15 * 1vw);
    }
  }
}

/* =====================
  Form
===================== */
.form {
  --_primary: #44bade;
  --_form-input: #f0f3f7;
  --_form-required: #b61024;
  --_form-optional: #575757;
  --_form-border: #b7b7b7;
  --_form-input-placeholder: #bababa;
  --_form-font-normal: 400;
  --_form-font-bold: 700;
  --_agree-link: #44bade;
}

/* =====================
  Reset
===================== */

/* ==== all ==== */
.form :where(*) {
  box-sizing: border-box;
  min-inline-size: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: var(--_form-font-normal);
  color: inherit;
  text-decoration: none;
}

.form *::before,
.form *::after {
  box-sizing: border-box;
  min-inline-size: 0;
  padding: unset;
  margin: unset;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  border-width: 0;
}

/* ==== dl ==== */
.form dl {
  padding: unset;
  margin: unset;

  & dt {
    margin-block: calc((1em - 1lh) / 2);
    font-weight: normal;
    text-align: left;
  }
}

/* =====================
  Parts
===================== */
.form {
  /* ==== Form parts ==== */
  & :where(input:is([type='text'], [type='tel'], [type='email'], [type='url']), textarea, select) {
    position: relative;
    inline-size: 100%;
    padding: unset;
    margin: unset;
    font-family: inherit;
    font-size: inherit;
    text-align: unset;
    touch-action: manipulation;
    user-select: auto;
    border: none;

    @media only screen and (width <= 768px) {
      font-size: calc((100 / 390) * 16 * 1vw);
    }
  }

  & :where(input:is([type='text'], [type='tel'], [type='email'], [type='url']), textarea) {
    padding-block: 18.5px;
    padding-inline: 16px;
    background: var(--_form-input);
    border-radius: 0;

    @media only screen and (width <= 768px) {
      padding-block: calc((100 / 390) * 15 * 1vw);
      padding-inline: calc((100 / 390) * 15 * 1vw);
    }
  }

  & :where(input:is([type='text'], [type='tel'], [type='email'], [type='url']), textarea)::placeholder {
    color: var(--_form-input-placeholder);
  }

  & :where(button, label[for], select, [role='tab'], [role='button']),
  ::file-selector-button {
    cursor: pointer;
  }

  /* ==== select ==== */
  & select {
    inline-size: fit-content;
    min-inline-size: 280px;
    padding-block: 16.9px;
    padding-inline: 14px;
    border: 1px solid var(--_form-border);

    @media only screen and (width <= 768px) {
      min-inline-size: calc((100 / 390) * 256 * 1vw);
      padding-block: calc((100 / 390) * 13.7 * 1vw) calc((100 / 390) * 15.3 * 1vw);
      padding-inline: calc((100 / 390) * 14.2 * 1vw) calc((100 / 390) * 23 * 1vw);
      color: inherit;
      appearance: none;
      background-color: white;
      background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2023.6%2013.5%22%3E%20%3Cpath%20d%3D%22M11.8%209.4%2020.7.5c.7-.7%201.7-.7%202.4%200s.7%201.7%200%202.4L13%2013c-.6.6-1.7.7-2.3%200L.5%202.9C-.2%202.2-.2%201.2.5.5s1.7-.7%202.4%200z%22%20style%3D%22fill%3A%20currentColor%3B%22%20%2F%3E%3C%2Fsvg%3E');
      background-repeat: no-repeat;
      background-position: 97% center;
      background-size: 2.3vw 1.3vw;
    }
  }

  /* ==== textarea ==== */
  & textarea {
    min-block-size: 264px;
    max-block-size: 50vh;
    line-height: 1.8;
    word-break: break-all;
    white-space: revert;
    resize: block;

    @supports (field-sizing: content) {
      field-sizing: content;
    }

    @media only screen and (width <= 768px) {
      min-block-size: calc((100 / 390) * 180.3 * 1vw);
    }
  }

  /* ==== button ==== */
  & button {
    font-family: inherit;
    text-align: center;
    text-decoration: unset;
    appearance: none;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-tap-highlight-color: color-mix(in srgb, black 10%, transparent 100%);
  }

  /* ==== .checkbox ==== */
  .checkbox {
    display: block flex;
    flex-wrap: wrap;
    gap: 18.2px;
    align-items: center;
    margin-block: 1.7px;

    @media only screen and (width <= 768px) {
      gap: calc((100 / 390) * 3.9 * 1vw) calc((100 / 390) * 17 * 1vw);
      margin-block: calc((100 / 390) * 0.3 * 1vw) calc((100 / 390) * 2.7 * 1vw);
    }

    /* ==== label ==== */
    & label {
      display: block flex;
      gap: 9px;
      cursor: pointer;

      @media only screen and (width <= 768px) {
        gap: calc((100 / 390) * 9 * 1vw);
        align-items: center;
        font-size: calc((100 / 390) * 15 * 1vw);
        font-weight: 500;
        letter-spacing: calc((100 / 390) * 0.45 * 1vw);
      }

      & span {
        font-weight: var(--_form-font-bold);
        letter-spacing: 0.48px;

        @media only screen and (width <= 768px) {
          letter-spacing: calc((100 / 390) * 0.45 * 1vw);
        }
      }
    }

    /* ==== checkbox ==== */
    & input[type='checkbox'] {
      flex-shrink: 0;
      inline-size: 14px;
      aspect-ratio: 1 / 1;
      accent-color: var(--_primary);

      @media only screen and (width <= 768px) {
        inline-size: calc((100 / 390) * 16 * 1vw);
      }
    }

    /* ==== radio ==== */
    & input[type='radio'] {
      flex-shrink: 0;
      inline-size: 16px;
      aspect-ratio: 1 / 1;
      accent-color: var(--_primary);

      @media only screen and (width <= 768px) {
        inline-size: calc((100 / 390) * 16 * 1vw);
      }
    }
  }
}

/* =====================
  Table
===================== */
.form {
  max-inline-size: 824px;
  margin-inline: auto;
  font-size: 16px;

  @media only screen and (width <= 768px) {
    padding-inline: calc((100 / 390) * 0 * 1vw);
    font-size: calc((100 / 390) * 15 * 1vw);
  }

  /* ==== table ==== */
  .table {
    display: grid;
    grid-template-rows: 1fr;
    gap: 46.2px;
    margin-block-start: 107.4px;

    @media only screen and (width <= 768px) {
      gap: calc((100 / 390) * 29.2 * 1vw);
      margin-block-start: calc((100 / 390) * 58.7 * 1vw);
    }

    /* ==== tr ==== */
    .tr {
      display: grid;
      grid-template-rows: 1fr;
      gap: 17.1px;
      padding-block-end: 37.3px;
      border-block-end: 1px solid var(--_form-border);

      @media only screen and (width <= 768px) {
        gap: calc((100 / 390) * 14 * 1vw);
        padding-block-end: calc((100 / 390) * 23.3 * 1vw);
      }

      &:last-child {
        border-block-end-color: transparent;
      }

      /* ==== label ==== */
      &:has(:where(input, textarea, select)) dt::before {
        padding-block: 3px;
        padding-inline: 5px;
        margin-block: calc((1em - 1lh) / 2);
        font-size: 13px;
        font-weight: var(--_form-font-bold);
        line-height: 1;
        color: var(--_form-optional);
        content: '任意';
        border: 1px solid currentcolor;
        translate: 0 1px;

        @media only screen and (width <= 768px) {
          padding-block: calc((100 / 390) * 2.8 * 1vw);
          padding-inline: calc((100 / 390) * 4.7 * 1vw);
          font-size: calc((100 / 390) * 12 * 1vw);
          translate: unset;
        }
      }

      &:has([required], [data-required]) dt::before {
        color: var(--_form-required);
        letter-spacing: unset;
        content: '必須';
        border-color: currentcolor;
      }
    }

    /* ==== dt ==== */
    & dt {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 6px;
      align-items: center;
      font-weight: var(--_form-font-bold);
      letter-spacing: 0.48px;

      @media only screen and (width <= 768px) {
        gap: calc((100 / 390) * 7.2 * 1vw);
        letter-spacing: calc((100 / 390) * 0.45 * 1vw);
      }

      & label {
        font-weight: inherit;
      }
    }

    /* ==== dd ==== */
    & dd {
      position: relative;
      display: grid;
      grid-template-rows: 1fr;
      word-break: break-all;

      /* ==== text ==== */
      .text {
        position: relative;
        display: block grid;
        gap: 16px;
        align-items: center;

        @media only screen and (width <= 768px) {
          gap: calc((100 / 390) * 10 * 1vw);
        }

        /* ==== postalcode ==== */
        &:has([name='postalcode']) {
          grid-template-columns: auto 280px 1fr;
          gap: 16px;
          margin-block-end: 16px;

          @media only screen and (width <= 768px) {
            grid-template-columns: auto calc((100 / 408) * 206 * 1vw) 1fr;
            gap: calc((100 / 390) * 7.7 * 1vw);
            margin-block-end: calc((100 / 390) * 10 * 1vw);
          }

          & span:first-child {
            padding-inline-start: 16px;
            font-size: 16px;

            @media only screen and (width <= 768px) {
              padding-inline-start: calc((100 / 390) * 8 * 1vw);
              font-size: calc((100 / 390) * 15 * 1vw);
            }
          }

          & span:last-child {
            font-size: 13px;

            @media only screen and (width <= 768px) {
              padding-inline-start: 1em;
              font-size: calc((100 / 390) * 12 * 1vw);
              text-indent: -1em;
            }
          }
        }

        /* ==== tel ==== */
        &:has([name='tel']) {
          grid-template-columns: 280px 1fr;

          @media only screen and (width <= 768px) {
            grid-template-rows: repeat(2, auto);
            grid-template-columns: auto;
            gap: calc((100 / 390) * 11 * 1vw);
          }

          & span {
            padding-inline-start: 1em;
            font-size: 13px;
            text-indent: -1em;

            @media only screen and (width <= 768px) {
              font-size: calc((100 / 390) * 12 * 1vw);
            }
          }
        }

        /* ==== birth ==== */
        &:has([name='birth']) {
          grid-template-columns: 280px 1fr;

          @media only screen and (width <= 768px) {
            grid-template-rows: repeat(2, auto);
            grid-template-columns: auto;
            gap: calc((100 / 390) * 8 * 1vw);
          }

          & span {
            padding-inline-start: 1em;
            font-size: 13px;
            line-height: 1.6;
            text-indent: -1em;

            @media only screen and (width <= 768px) {
              font-size: calc((100 / 390) * 12 * 1vw);
            }
          }
        }

        /* ==== row ==== */
        &[data-type='row'] {
          display: block flex;
          flex-direction: column;
        }
      }
    }
  }
}

/* =====================
  text
===================== */
.form-text {
  margin-block-end: 73px;
  line-height: 1.8;
  color: var(--black);
  text-align: center;

  @media only screen and (width <= 768px) {
    margin-block-end: calc((100 / 390) * 39 * 1vw);
    font-size: calc((100 / 390) * 15 * 1vw);
    text-align: left;
  }

  & br.sp {
    @media (width > 768px) {
      display: none;
    }
  }
}

/* =====================
  title
===================== */
.form-title {
  margin-block: 63px 22px;
  font-size: 32px;
  font-weight: bold;
  text-align: center;
  letter-spacing: 0.96px;

  @media only screen and (width <= 768px) {
    margin-block: calc((100 / 390) * 32 * 1vw) calc((100 / 390) * 14 * 1vw);
    font-size: calc((100 / 390) * 26 * 1vw);
    line-height: 1.8;
    letter-spacing: calc((100 / 390) * 0.78 * 1vw);
  }

  & br.sp {
    @media (width > 768px) {
      display: none;
    }
  }
}

/* =====================
  form-anchor
===================== */
.form-anchor {
  inline-size: fit-content;
  margin-block-start: 48px;
  margin-inline: auto;

  & a {
    grid-template-columns: 1fr auto;
    padding-inline: 33px;
    font-size: 18px;

    @media only screen and (width <= 768px) {
      grid-template-columns: 1fr calc((100 / 390) * 26 * 1vw);
      justify-content: center;
      justify-content: space-between;
      padding-inline: 8.4vw 6.4vw;
      font-size: calc((100 / 390) * 15 * 1vw);
    }
  }

  @media only screen and (width <= 768px) {
    margin-block-start: calc((100 / 390) * 40 * 1vw);
  }
}

/* =====================
  agree
===================== */
.form label[for='agree'] {
  display: block flex;
  gap: 7px;
  align-items: center;
  justify-content: center;
  inline-size: fit-content;
  margin-block-start: 42px;
  margin-inline: auto;
  font-size: 16px;
  letter-spacing: 0.48px;

  @media only screen and (width <= 768px) {
    gap: 7px;
    margin-block-start: calc((100 / 390) * 27 * 1vw);
    font-size: calc((100 / 390) * 15 * 1vw);
    letter-spacing: calc((100 / 390) * 0.45 * 1vw);
  }

  & span {
    font-weight: var(--_form-font-bold);
  }

  & a {
    font-weight: var(--_form-font-bold);
    color: var(--_agree-link);
    text-decoration: underline;
    transition: opacity 250ms ease 0s;
    will-change: opacity;

    @media (any-hover: hover) {
      &:hover {
        text-decoration: none;
        opacity: 0.8;
      }
    }
  }

  & input[type='checkbox'] {
    inline-size: 14px;
    aspect-ratio: 1 / 1;
    accent-color: var(--_primary);
    cursor: pointer;

    @media only screen and (width <= 768px) {
      inline-size: calc((100 / 390) * 18 * 1vw);
    }
  }
}

/* =====================
  submit
===================== */
.form {
  position: relative;

  .submit {
    display: grid;
    grid-template-columns: 1fr;
    gap: 35px;
    justify-content: center;
    inline-size: fit-content;
    margin-block-start: 48px;
    margin-inline: auto;

    @media only screen and (width <= 768px) {
      gap: calc((100 / 390) * 26.7 * 1vw);
      margin-block-start: calc((100 / 390) * 39 * 1vw);
    }

    & button {
      &[disabled] {
        pointer-events: none;
        opacity: 0.5;
        filter: grayscale(100%);
      }

      &[form='back'] {
        font-size: 16px;
        font-weight: var(--_form-font-bold);
        color: var(--_form-optional);
        letter-spacing: 0.48px;
        text-decoration: underline;
        transition: color 250ms ease 0s;
        will-change: color;

        @media (any-hover: hover) {
          &:hover {
            color: color-mix(in srgb, var(--_form-optional) 80%, transparent 100%);
          }
        }

        @media only screen and (width <= 768px) {
          font-size: calc((100 / 390) * 15 * 1vw);
          letter-spacing: calc((100 / 390) * 0.45 * 1vw);
        }
      }
    }
  }
}

/* =====================
  resume
===================== */
.form {
  /* ==== file ==== */
  .resume {
    & input[type='file'] {
      display: none;
      appearance: none;
    }
  }

  .file {
    position: relative;
    display: block grid;
    grid-template-columns: 246px 192px 24px;
    gap: 16px;
    align-items: center;
    margin-block-end: 17px;

    @media only screen and (width <= 768px) {
      grid-template-columns: auto 1fr;
      gap: calc((100 / 390) * 16 * 1vw);
      margin-block-end: calc((100 / 390) * 15.3 * 1vw);
    }

    /* ==== +ファイルを選択 ==== */
    & span:first-of-type {
      display: grid;
      grid-template-columns: auto auto;
      gap: 8px;
      justify-content: center;
      inline-size: fit-content;
      min-inline-size: 246px;
      padding-block: 21.5px;
      font-size: 16px;
      font-weight: var(--_form-font-bold);
      line-height: 1;
      color: var(--_primary);
      text-align: center;
      letter-spacing: 0.48px;
      cursor: pointer;
      border: 1px solid var(--_form-border);
      border-radius: calc(infinity * 1px);
      transition: background 250ms ease 0s;
      will-change: background;

      @media (any-hover: hover) {
        &:hover {
          background: color-mix(in srgb, currentcolor 20%, transparent);
        }
      }

      @media only screen and (width <= 768px) {
        grid-area: 1 / 1 / 2 / 2;
        gap: calc((100 / 390) * 7 * 1vw);
        min-inline-size: calc((100 / 390) * 224 * 1vw);
        padding-block: calc((100 / 390) * 18.4 * 1vw);
        font-size: calc((100 / 390) * 15 * 1vw);
        letter-spacing: calc((100 / 390) * 0.45 * 1vw);
      }

      &::before {
        inline-size: 14px;
        aspect-ratio: 1 / 1;
        content: '';
        background-color: currentcolor;
        mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M6 8H0V6H6V0H8V6H14V8H8V14H6V8Z" fill="currentColor"/></svg>');
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: contain;
      }

      @media only screen and (width <= 768px) {
        &::before {
          inline-size: calc((100 / 390) * 14 * 1vw);
        }
      }
    }

    /* ==== ファイル名 ==== */
    .resume-title {
      inline-size: 192px;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 14px;
      white-space: nowrap;
      cursor: pointer;

      @media only screen and (width <= 768px) {
        grid-area: 2 / 1 / 3 / 2;
        inline-size: calc((100 / 390) * 232 * 1vw);
        font-size: calc((100 / 390) * 14 * 1vw);
      }
    }

    /* ==== キャンセル ==== */
    .resume-cancel {
      z-index: 2;
      display: block grid;
      place-content: center;
      inline-size: 24px;
      aspect-ratio: 1 / 1;
      margin-inline: auto 0;
      cursor: pointer;
      background: var(--_form-input);
      border-radius: calc(infinity * 1px);
      transition: all 250ms ease 0s;

      @media (any-hover: hover) {
        &:hover {
          background: color-mix(in srgb, currentcolor 20%, transparent);
        }
      }

      &[hidden] {
        display: none;
      }

      @media only screen and (width <= 768px) {
        grid-area: 2 / 2 / 3 / 3;
        inline-size: calc((100 / 390) * 24 * 1vw);
        margin-inline: 0 auto;
      }

      &::after {
        inline-size: 11px;
        aspect-ratio: 1 / 1;
        content: '';
        background-color: var(--_form-optional);
        mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M5.00002 6.13568L1.59299 9.5427L0.457319 8.40703L3.86434 5L0.457319 1.59297L1.59299 0.457299L5.00002 3.86432L8.40705 0.457299L9.54272 1.59297L6.1357 5L9.54272 8.40703L8.40705 9.5427L5.00002 6.13568Z" fill="currentColor"/></svg>');
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: contain;
      }

      @media only screen and (width <= 768px) {
        &::after {
          inline-size: calc((100 / 390) * 11 * 1vw);
        }
      }
    }
  }

  /* ==== テキスト ==== */
  .resume-text {
    padding-inline-start: 1em;
    font-size: 13px;
    line-height: 1.6;
    text-indent: -1em;

    @media only screen and (width <= 768px) {
      font-size: calc((100 / 390) * 12 * 1vw);
    }

    & + .resume-text {
      @media only screen and (width <= 768px) {
        margin-block-start: 1vw;
      }
    }
  }
}

/* =====================
  step
===================== */
.form {
  position: relative;
  color: var(--black);

  /* ==== step ==== */
  .step {
    --_box-shadow: 0 0 0 8px color-mix(in srgb, var(--_primary) 20%, transparent 100%);

    @media only screen and (width <= 768px) {
      --_box-shadow: 0 0 0 calc((100 / 390) * 7 * 1vw) color-mix(in srgb, var(--_primary) 20%, transparent 100%);
    }

    position: relative;
    display: block flex;
    justify-content: space-between;
    inline-size: 288px;
    margin-inline: auto;
    font-size: 14px;
    pointer-events: none;
    user-select: none;

    @media only screen and (width <= 768px) {
      inline-size: calc((100 / 390) * 227 * 1vw);
      font-size: calc((100 / 390) * 13 * 1vw);
    }

    &::before {
      position: absolute;
      inset-block-start: 5px;
      inset-inline: 0;
      display: block flow;
      inline-size: calc(100% - ((27px - 11px) / 2) - (27px / 2));
      block-size: 1px;
      margin-inline: auto;
      content: '';
      background: var(--_form-input-placeholder);
    }

    @media only screen and (width <= 768px) {
      &::before {
        inset-block-start: calc((100 / 390) * 5 * 1vw);
        block-size: calc((100 / 390) * 1 * 1vw);
        min-block-size: 1px;
      }
    }

    /* ==== 文字 ==== */
    & span {
      position: relative;
      z-index: 2;
      display: block grid;
      gap: 10px;
      justify-content: center;
      font-weight: var(--_form-font-bold);
      color: var(--_form-input-placeholder);

      @media only screen and (width <= 768px) {
        gap: calc((100 / 390) * 9 * 1vw);
      }

      &::before {
        display: block flow;
        justify-self: center;
        inline-size: 11px;
        aspect-ratio: 1 / 1;
        content: '';
        background: currentcolor;
        border-radius: calc(infinity * 1px);
      }

      @media only screen and (width <= 768px) {
        &::before {
          inline-size: calc((100 / 390) * 10 * 1vw);
        }
      }

      &::after {
        display: block flow;
        content: '';
      }
    }

    /* ==== 入力 ==== */
    & span:nth-child(1) {
      &::after {
        content: '入力';
      }
    }

    /* ==== 確認 ==== */
    & span:nth-child(2) {
      &::after {
        content: '確認';
      }
    }

    /* ==== 完了 ==== */
    & span:nth-child(3) {
      &::after {
        content: '完了';
      }
    }
  }

  /* ==== Active ==== */
  &[data-id='index'] .step span:nth-child(1) {
    color: var(--_primary);

    &::before {
      box-shadow: var(--_box-shadow);
    }
  }

  &[data-id='confirm'] .step span:nth-child(2) {
    color: var(--_primary);

    &::before {
      box-shadow: var(--_box-shadow);
    }
  }

  &[data-id='complete'] .step span:nth-child(3) {
    color: var(--_primary);

    &::before {
      box-shadow: var(--_box-shadow);
    }
  }
}

/* =====================
  error
===================== */
.form {
  position: relative;

  /* ==== invalid ==== */
  .error {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: 11px;
    display: block flow;
    inline-size: fit-content;
    padding-block: 5px;
    padding-inline: 7px;
    margin-block: calc((1em - 1lh) / 2);
    font-size: 12px;
    line-height: 1;
    color: var(--_form-required);
    word-break: break-all;
    background: color-mix(in srgb, currentcolor 10%, transparent 100%);
    border: 1px solid currentcolor;
    translate: 0 -50%;

    &:empty {
      display: none;
    }

    @media only screen and (width <= 768px) {
      position: unset;
      inset: unset;
      padding-block: calc((100 / 390) * 4 * 1vw);
      padding-inline: calc((100 / 390) * 9 * 1vw);
      margin-block-start: calc((100 / 390) * 18 * 1vw);
      font-size: calc((100 / 390) * 12 * 1vw);
      translate: unset;
    }
  }

  .tr:has([name='address']) .error {
    inset-block-start: 77%;
  }

  .tr:has([name='email']) .error {
    inset-block-start: 22%;
  }

  .tr:has([name='body']) .error {
    inset-block-start: 12%;
  }

  .tr:has(:where(input:is([type='text'], [type='tel'], [type='email'], [type='url'], [type='checkbox'], [type='radio']), textarea, select):user-invalid) {
    .error {
      display: block flow !important;

      &::before {
        content: attr(data-text);
      }
    }
  }

  & :where(input:is([type='text'], [type='tel'], [type='email'], [type='url']), textarea, select):user-invalid {
    outline: 1px solid var(--_form-required);

    &:focus {
      outline: auto;
    }
  }
}

/* =====================
  index
===================== */
.form[data-id='index'] {
  position: relative;
}

/* =====================
  confirm
===================== */
.form[data-id='confirm'] {
  position: relative;

  /* ==== table ==== */
  .table {
    margin-block-start: 106px;

    @media (width > 768px) {
      grid-template-columns: minmax(auto, 200px) 1fr;
      gap: 38px 15px;
    }

    @media only screen and (width <= 768px) {
      gap: calc((100 / 390) * 30 * 1vw);
      margin-block-start: calc((100 / 390) * 106 * 1vw);
    }

    .tr {
      @media (width > 768px) {
        grid-template-rows: auto;
        grid-template-columns: subgrid;
        grid-column: span 2;
        align-items: flex-start;
        padding-block-end: 39px;
      }

      @media only screen and (width <= 768px) {
        gap: calc((100 / 390) * 20.4 * 1vw);
        padding-block-end: calc((100 / 390) * 29.6 * 1vw);
      }

      &:last-child {
        border-block-end: 1px solid var(--_form-border);
      }

      & dd {
        margin-block: calc((1em - 1lh) / 2);
        line-height: 1.8;
      }
    }

    @media only screen and (width <= 768px) {
      margin-block-start: calc((100 / 390) * 64 * 1vw);
    }
  }
}

/* =====================
  complete
===================== */
.form[data-id='complete'] {
  position: relative;

  /* ==== step ==== */
  .step {
    margin-block-start: 74px;

    @media only screen and (width <= 768px) {
      margin-block-start: calc((100 / 390) * 7 * 1vw);
    }
  }

  /* ==== form-text ==== */
  .form-text {
    margin-block-end: 0;

    @media only screen and (width <= 768px) {
      text-align: center;
    }
  }
}