@charset "utf-8";
/* =====================
  Form
===================== */
.contact-form-wrapper {
  margin-block-end: 0;
  inline-size: 980px;
  padding-inline: 0;

  @media (width <= 768px) {
    inline-size: 100%;
    margin-block-end: 10vw;
    padding-inline: 0 0;
  }
}
.ac-b::after {
  background: white;
}

.form {
  --_red: #b61024;
  --_gray: #575757;

  /* フォーム背景 */
  --_input-bg-color: #f2f4f6;

  /* 表の枠色 */
  --_table-bd-color: #e1e1e1;

  /* Step */
  --_active-color: var(--_main-color);
}
body.contact {
  --_main-color: #074d94;
  --_inactive-color: #a9b2bc;
  --_red: #b61024;
  --_gray: #575757;

  /* フォーム背景 */
  --_input-bg-color: #f2f4f6;

  /* 表の枠色 */
  --_table-bd-color: #e1e1e1;

  /* Step */
  --_active-color: var(--_main-color);
  .form {
    & select {
      background-color: white;
      border: 1px solid #babaca;
    }
  }
}
body.entry {
  .form {
    --_main-color: #24845b;
    --_red: #b61024;
    --_inactive-color: #7c7d86;
    --_gray: #575757;

    /* フォーム背景 */
    --_input-bg-color: #f2f4f6;

    /* 表の枠色 */
    --_table-bd-color: #e1e1e1;

    /* Step */
    --_active-color: var(--_main-color);
  }
}

.form,
.form * {
  box-sizing: border-box;
}

.form {
  max-inline-size: 824px;
  margin-inline: auto;
  padding-bottom: 144px;
}

@media not all and (width >= 768px) {
  .form {
    padding-bottom: calc((100 / 750) * 108 * 1vw);
    padding-inline: calc((100 / 750) * 40 * 1vw);
  }
}

/* 文章 */
.form .form-text {
  line-height: 1.8;
  text-align: left;

  @media not all and (width >= 768px) {
    padding-inline: 0;
    font-size: calc((100 / 750) * 28 * 1vw);
  }
}

.form .form-text.tac {
  text-align: center;

  @media not all and (width >=768px) {
    text-align: left;
  }
}

.form[data-id='complete'] .form-text.tac {
  @media not all and (width >=768px) {
    text-align: center;
  }
}

/* Desktop */
@media print, screen and (width >= 768px) {
  .form .form-text br.sp {
    display: none;
  }
}

/* =====================
  h1
===================== */
.form h1 {
  margin-block-end: 16px;
  font-size: 32px;
  font-weight: bold;
  text-align: center;
}

@media not all and (width >= 768px) {
  .form h1 {
    font-size: calc((100 / 750) * 40 * 1vw);
  }
}

/* =====================
  Index
===================== */
body.entry {
  [data-id='index'] .form-text {
    text-align: center;
    padding-block-start: 40px;
    @media (width <= 768px) {
      margin-block-start: calc((100 / 750) * 0 * 1vw);
      text-align: left !important;
    }
  }
  main:has([data-id='index']) {
    padding-block-start: 110px;
  }
  [data-id='confirm'] {
    padding-block-start: 160px;
    @media (width <= 768px) {
      padding-block-start: calc((100 / 750) * 240 * 1vw);
    }
  }
  [data-id='complete'] {
    padding-block-start: 90px;
  }
}
body.contact {
  [data-id='index'] .form-text {
    margin-block-end: 52px;
    @media (width <= 768px) {
      margin-block-end: calc((100 / 750) * 120 * 1vw);
      padding-inline: calc((100 / 750) * 40 * 1vw);
    }
  }
  [data-id='confirm'] .form-text {
    margin-block-end: 64px;
    @media (width <= 768px) {
      padding-inline: calc((100 / 750) * 40 * 1vw);
      margin-block-end: calc((100 / 750) * 120 * 1vw);
    }
  }
}
@media not all and (width >= 768px) {
  [data-id='index'] .form-text {
    margin-block-start: calc((100 / 750) * 64 * 1vw);
    text-align: left;
  }
}

/* =====================
  step
===================== */
.step {
  position: relative;
  inline-size: 288px;
  block-size: 59px;
  margin-block: 51px 77px;
  margin-inline: auto;
  font-weight: bold;
  color: var(--_inactive-color);
  pointer-events: none;
  user-select: none;
}

@media not all and (width >= 768px) {
  .step {
    inline-size: calc((100 / 750) * 408 * 1vw);
    block-size: calc((100 / 750) * 87 * 1vw);
    margin-block: calc((100 / 750) * 64 * 1vw) calc((100 / 750) * 88 * 1vw);
  }
}

/* 線 */
.step::before {
  position: absolute;
  top: 24px;
  left: 50%;
  display: block;
  align-self: start;
  inline-size: 90%;
  block-size: 1px;
  content: '';
  background: currentcolor;
  translate: -50% 0;
}

@media not all and (width >= 768px) {
  .step::before {
    top: 2.4vw;
    inline-size: 80%;
  }
}

/* 点 */
.step span {
  position: absolute;
  bottom: -1px;
  display: block;
  font-size: 14px;
  line-height: 1;
}

@media not all and (width >= 768px) {
  .step span {
    font-size: calc((100 / 750) * 26 * 1vw);
  }
}

/* 円 */
.step span::before {
  position: absolute;
  top: -27px;
  left: 8px;
  display: block;
  inline-size: 11px;
  aspect-ratio: 1 / 1;
  content: '';
  background: currentcolor;
  border-radius: calc(infinity * 1px);
}

@media not all and (width >= 768px) {
  .step span::before {
    top: -7.2vw;
    inline-size: calc((100 / 750) * 18 * 1vw);
  }
}

/* 入力 */
.step span:nth-child(1) {
  left: 0;
}

.step span:nth-child(1)::after {
  content: '入力';
}

@media not all and (width >= 768px) {
  .step span:nth-child(1) {
    left: 1.5vw;
  }
}

.step span:nth-child(1)::before {
  left: 50%;
  transform: translateX(-50%);
}

/* 確認 */
.step span:nth-child(2) {
  left: 50%;
  translate: -50% 0;
}

.step span:nth-child(2)::after {
  content: '確認';
}

/* 完了 */
.step span:nth-child(3) {
  right: 0;
}

.step span:nth-child(3)::after {
  content: '完了';
}

@media not all and (width >= 768px) {
  .step span:nth-child(3) {
    right: 1.5vw;
  }
}

.step span:nth-child(3)::before {
  right: 0;
}

/* アクティブ */
[data-id='index'] .step span:nth-child(1) {
  color: var(--_active-color);
}

[data-id='index'] .step span:nth-child(1)::before {
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--_active-color) 20%, transparent 100%);
}

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

[data-id='confirm'] .step span:nth-child(2)::before {
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--_active-color) 20%, transparent 100%);
}

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

[data-id='complete'] .step span:nth-child(3)::before {
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--_active-color) 20%, transparent 100%);
}

/* =====================
  パーツ
===================== */

/* prettier-ignore */
.form :where(input:is([type='text'], [type='tel'], [type='email'], [type='url']), textarea, select) {
  position: relative;
  inline-size: 100%;
  padding-block: 1.25em;
  padding-inline: 1em;
  font-family: inherit;
  font-size: 16px;
  background: var(--_input-bg-color);
  border: none;
  border-radius: 2px;
}

@media not all and (width >= 768px) {
  /* prettier-ignore */
  .form :where(input:is([type='text'], [type='tel'], [type='email'], [type='url']), textarea, select) {
    padding-block: calc((100 / 750) * 27 * 1vw);
    font-size: calc((100 / 750) * 28 * 1vw);
  }

  .form :where(select) {
    padding-block: calc((100 / 750) * 27 * 1vw);
    padding-right: 7vw;
    font-size: clamp(16px, calc((100 / 750) * 28 * 1vw), calc((100 / 750) * 28 * 1vw));
    color: inherit;
    appearance: none;
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2223.616%22%20height%3D%2213.503%22%20viewBox%3D%220%200%2023.616%2013.503%22%3E%3Cpath%20fill%3D%22%2300698c%22%20id%3D%22Icon_ionic-ios-arrow-down%22%20d%3D%22M18%2C20.679l8.93-8.937a1.681%2C1.681%2C0%2C0%2C1%2C2.384%2C0%2C1.7%2C1.7%2C0%2C0%2C1%2C0%2C2.391L19.2%2C24.258a1.685%2C1.685%2C0%2C0%2C1-2.327.049L6.68%2C14.14a1.688%2C1.688%2C0%2C0%2C1%2C2.384-2.391Z%22%20transform%3D%22translate(-6.188%20-11.246)%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: 97% center;
    background-size: 2.2999999999500003vw 1.299999999vw;
  }
}

/* フォーム文字色 */
.form::selection {
  color: var(--_gray);
}

/* テキストエリア */
.form textarea {
  min-block-size: 256px;
  max-block-size: 50vh;
}

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

@media not all and (width >= 768px) {
  .form textarea {
    min-block-size: calc((100 / 750) * 377 * 1vw);
  }
}

/* セレクトボックス */
.form select {
  inline-size: fit-content;
  min-width: 280px;
}

@media not all and (width >= 768px) {
  .form select {
    min-width: calc((100 / 750) * 462 * 1vw);
  }
}

/* =====================
  error
===================== */

/* prettier-ignore */
.form :where(input:is([type='text'], [type='tel'], [type='email'], [type='url']), textarea, select):user-invalid {
  outline: 1px solid var(--_red);
}

/* prettier-ignore */
.form :where(input:is([type='text'], [type='tel'], [type='email'], [type='url']), textarea, select):user-invalid + .error {
  position: absolute;
  top: 50%;
  right: 2em;
  display: block !important;
  translate: 0 -50%;
}

/* prettier-ignore */
.form :where(input:is([type='text'], [type='tel'], [type='email'], [type='url']),textarea, select):focus {
  outline-color: var(--_gray);
}

/* prettier-ignore */
.form :where(input:is([type='text'], [type='tel'], [type='email'], [type='url']), textarea,select):user-invalid + .error::before {
  content: attr(data-text);
}

/* prettier-ignore */
.form :where(input:is([type='text'], [type='tel'], [type='email'], [type='url']), textarea,select):user-invalid:is([name='address']) + .error {
  top: 77%;
}

/* prettier-ignore */
.form :where(input:is([type='text'], [type='tel'], [type='email'], [type='url']), textarea,select):user-invalid:is(textarea) + .error {
  top: 13%;
}

/* prettier-ignore */
@media not all and (width >= 768px) {
  .form :where(input:is([type='text'], [type='tel'], [type='email'], [type='url']), textarea,select):user-invalid:is(textarea) + .error {
    top: 86%;
  }
}

/* ==== パーツ下部エラー ==== */
.form .error:empty {
  display: none;
}

.form .error {
  position: relative;
  display: block;
  inline-size: fit-content;
  padding-block: 5px;
  padding-inline: 11px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--_red);
  word-break: break-all;
  background: color-mix(in srgb, currentcolor 10%, transparent 100%);
  border: 1px solid currentcolor;
  border-radius: 2px;
}

@media not all and (width >= 768px) {
  .form .error {
    padding-block: calc((100 / 750) * 11 * 1vw);
    padding-inline: calc((100 / 750) * 13 * 1vw);
    font-size: calc((100 / 750) * 18 * 1vw);
  }
}

/* ==== table ==== */
.form .table {
  display: grid;
  grid-template-rows: 1fr;
  gap: 40px;
}

@media not all and (width >= 768px) {
  .form .table {
    gap: calc((100 / 750) * 56 * 1vw);
    inline-size: 100%;
  }
}

/* ==== table row ==== */
.form .table .tr {
  display: grid;
  grid-template-rows: 1fr;
  gap: 20px;
  padding-block-end: 40px;
  border-bottom: 1px solid var(--_table-bd-color);
}

@media not all and (width >= 768px) {
  .form .table .tr {
    gap: calc((100 / 750) * 24 * 1vw);
    padding-block-end: calc((100 / 750) * 56 * 1vw);
  }
}

.form .table .tr:last-child {
  /* border-bottom: 1px solid transparent; */
}

/* ==== dt ==== */
.form .table dt {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: center;
  margin-block: calc((1em - 1lh) / 2);
  font-weight: bold;
}

@media not all and (width >= 768px) {
  .form .table dt {
    font-size: calc((100 / 750) * 28 * 1vw);
  }
}

.form .table .tr:has(:where(input, textarea, select)) dt::before {
  display: grid;
  place-content: center;
  padding-block: 4px;
  padding-inline: 6px;
  font-size: 13px;
  line-height: 1;
  color: var(--_gray);
  content: '任意';
  border: 1px solid currentcolor;
}

@media not all and (width >= 768px) {
  .form .table .tr:has(:where(input, textarea, select)) dt::before {
    padding-block: calc((100 / 750) * 6 * 1vw);
    padding-inline: calc((100 / 750) * 8 * 1vw);
    font-size: calc((100 / 750) * 22 * 1vw);
  }
}

.form .table .tr:has([required], [data-required]) dt::before {
  color: var(--_red);
  content: '必須';
  border-color: currentcolor;
}

/* ==== dd ==== */
.form .table dd {
  position: relative;
  display: grid;
  grid-template-rows: 1fr;
  gap: 16px;
  line-height: 2;
  word-break: break-all;
}

@media not all and (width >= 768px) {
  .form .table dd {
    gap: calc((100 / 750) * 24 * 1vw);
  }
}

/* ==== 郵便番号、生年月日 ==== */
.form .table dd .text {
  display: grid;
  grid-template-columns: auto 280px 1fr;
  gap: 16px;
  align-items: center;
  font-size: 14px;
}

@media not all and (width >= 768px) {
  .form .table dd .text {
    grid-template-columns: auto calc((100 / 750) * 300 * 1vw) 1fr;
    gap: calc((100 / 750) * 16 * 1vw);
    font-size: calc((100 / 750) * 22 * 1vw);
  }
}

.form .table dd .text:has([name='postalcode']) > span:first-child {
  padding-inline-start: 1em;
  font-weight: bold;
}

.form .table dd .text:has([name='birth']) {
  grid-template-columns: auto 1fr;
}

@media not all and (width >= 768px) {
  .form .table dd .text:has([name='birth']) {
    grid-template-columns: auto;
  }
}

/* 縦並び */
.form .table dd .text[data-type='row'] {
  grid-template-columns: 1fr;
}

/* ==== confirm ==== */
@media print, screen and (width >= 768px) {
  .form[data-id='confirm'] .table {
    grid-template-columns: minmax(auto, 200px) 1fr;
  }

  .form[data-id='confirm'] .table .tr {
    grid-template-rows: auto;
    grid-template-columns: subgrid;
    grid-column: span 2;
    align-items: flex-start;
  }

  .form[data-id='confirm'] .table .tr:last-child {
    border-bottom: 1px solid var(--_table-bd-color);
  }

  .form[data-id='confirm'] .table .tr dt {
    margin-block-start: unset;
  }
}

/* =====================
  プライバシーポリシーチェック
===================== */
.form label[for='agree'] {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: center;
  inline-size: fit-content;
  margin-block-start: 64px;
  margin-inline: auto;
  cursor: pointer;
}

@media not all and (width >= 768px) {
  .form label[for='agree'] {
    margin-block-start: calc((100 / 750) * 90 * 1vw);
    font-size: calc((100 / 750) * 28 * 1vw);
  }
}

.form label[for='agree'] input[type='checkbox'] {
  inline-size: 24px;
  aspect-ratio: 1 / 1;
  margin: unset;
  cursor: pointer;
}

@media not all and (width >= 768px) {
  .form label[for='agree'] input[type='checkbox'] {
    inline-size: calc((100 / 750) * 50 * 1vw);
    block-size: calc((100 / 750) * 50 * 1vw);
    appearance: none;
    border: 1px solid var(--_gray);
  }

  .form label[for='agree'] input[type='checkbox']:checked {
    appearance: auto;
  }
}

.form label[for='agree'] a {
  font-weight: bold;
  color: var(--_main-color);
  text-decoration: underline;

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

/* =====================
  submit
===================== */
.form .submit {
  display: grid;
  grid-template-columns: 1fr;
  gap: 46px;
  margin-block-start: 66px;
  margin-inline: auto;
  inline-size: fit-content;
}

@media not all and (width >= 768px) {
  .form .submit {
    gap: calc((100 / 750) * 56 * 1vw);
    margin-block-start: calc((100 / 750) * 80 * 1vw);
    inline-size: fit-content;
  }
}

.form .submit button {
  appearance: none;
  cursor: pointer;
}

.form .submit button:is([form='post'], [form='submit']) {
  appearance: none;
  font-family: 'Noto Sans JP';
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 160%; /* 25.6px */
  letter-spacing: 0.48px;
}

.form .submit button:is([form='post'], [form='submit']):where([disabled]) {
  position: relative;
  pointer-events: none;
  opacity: 0.5;
}

.form .submit button:is([form='post'], [form='submit']):where([disabled])::after {
  position: absolute;
  top: 50%;
  right: 2em;
  content: '';
  translate: 0 -50%;
  animation: road 2000ms steps(2) 0ms infinite normal none running;
}

@keyframes road {
  0% {
    content: '';
  }

  33% {
    content: '.';
  }

  66% {
    content: '..';
  }

  100% {
    content: '...';
  }
}

@media not all and (width >= 768px) {
  .form .submit button:is([form='post'], [form='submit']) {
    appearance: none;
  }
}

.form .submit button[form='back'] {
  font-size: inherit;
  font-weight: 500;
  color: var(--_gray);
  text-align: center;
  text-decoration: underline;
  appearance: none;
  transition: color 250ms ease 0s;
  will-change: color;

  @media not all and (width >=768px) {
    font-size: calc((100 / 750) * 30 * 1vw);
  }

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

/* =====================
  form-anchor
===================== */
.form-anchor {
  inline-size: 272px;
  margin-block-start: 72px;
  margin-inline: auto;

  .hover-link-btn {
    text-align: center;
    inline-size: 100%;
  }

  @media not all and (width >=768px) {
    inline-size: calc((100 / 750) * 488 * 1vw);
    margin-block-start: calc((100 / 750) * 80 * 1vw);
  }
}

@media not all and (width >= 768px) {
  .form-anchor {
    margin-block-start: calc((100 / 750) * 72 * 1vw);
  }
}

/* =====================
  resume
===================== */
.form .resume .file {
  position: relative;
  display: grid;
  grid-template-columns: 246px 1fr 24px;
  gap: 16px;
  align-items: center;
  margin-block-end: 13px;
}

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

/* ファイル選択ボタン */
.form .resume .file span:first-of-type {
  display: grid;
  grid-template-columns: auto auto;
  gap: 8px;
  justify-content: center;
  inline-size: fit-content;
  min-width: 246px;
  padding-block: 24px;
  font-size: 16px;
  line-height: 1;
  color: var(--_main-color);
  text-align: center;
  cursor: pointer;
  background: var(--_input-bg-color);
  border-radius: calc(infinity * 1px);
  transition: background 250ms ease 0s;
  will-change: background;

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

@media not all and (width >= 768px) {
  .form .resume .file span:first-of-type {
    gap: calc((100 / 750) * 13 * 1vw);
    inline-size: calc((100 / 750) * 390 * 1vw);
    min-width: calc((100 / 750) * 390 * 1vw);
    padding-block: calc((100 / 750) * 40 * 1vw);
    margin-block-start: calc((100 / 750) * 17 * 1vw);
    font-size: calc((100 / 750) * 26 * 1vw);
  }
}

.form .resume .file span:first-of-type::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" inline-size="14" block-size="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 not all and (width >= 768px) {
    inline-size: calc((100 / 750) * 22 * 1vw);
  }
}

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

@media not all and (width >= 768px) {
  .form .resume .file .resume-title {
    inline-size: calc((100 / 750) * 327 * 1vw);
  }
}

/* ファイル削除ボタン */
.form .resume .file .resume-cancel {
  z-index: 2;
  display: grid;
  place-content: center;
  inline-size: 24px;
  block-size: 24px;
  margin-inline: auto 0;
  color: var(--_input-bg-color);
  cursor: pointer;
  outline: none;
  background: currentcolor;
  border: none;
  border-radius: calc(infinity * 1px);
  transition: all 250ms ease 0s;

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

.form .resume .file .resume-cancel[hidden] {
  display: none;
}

.form .resume .file .resume-cancel::after {
  inline-size: 11px;
  aspect-ratio: 1 / 1;
  content: '';
  background-color: var(--_gray);
  mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" inline-size="10" block-size="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;
}

/* モバイルはgirdシステムで表示 */
@media not all and (width >= 768px) {
  .form .resume .file {
    grid-template: auto 1fr / auto auto;
    grid-template-areas:
      'select select'
      'title button';
    gap: calc((100 / 750) * 28 * 1vw);
    margin-block-end: calc((100 / 750) * 18 * 1vw);
  }

  .form .resume .file span:first-of-type {
    grid-area: select;

    .form .resume .file {
      grid-template:
        'select select'
        'title button' / auto auto;
      gap: calc((100 / 750) * 28 * 1vw);
      margin-block-end: calc((100 / 750) * 18 * 1vw);
    }
  }

  .form .resume .file .resume-title {
    grid-area: title;
  }

  .form .resume .file button {
    grid-area: button;
  }
}

/* 注釈 */
.form .resume p {
  padding-inline-start: 1em;
  font-size: 14px;
  text-indent: -1em;
}

@media not all and (width >= 768px) {
  .form .resume p {
    font-size: calc((100 / 750) * 22 * 1vw);
  }
}

.form .resume p::before {
  content: '※';
}

/* =====================
  チェックボックス
===================== */
.form .checkbox {
  display: grid;
  grid-auto-flow: column;
  gap: 16px;
  justify-content: flex-start;
}

@media not all and (width >= 768px) {
  .form .checkbox {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: calc((100 / 750) * 28 * 1vw);
  }
}

.form .checkbox label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 5px;
  align-items: center;
  font-weight: bold;
  cursor: pointer;
}

@media not all and (width >= 768px) {
  .form .checkbox label {
    font-size: calc((100 / 750) * 28 * 1vw);
  }
}

.form .checkbox input:is([type='checkbox'], [type='radio']) {
  inline-size: 16px;
  aspect-ratio: 1 / 1;
  margin: unset;
  cursor: pointer;
}

@media not all and (width >= 768px) {
  .form .checkbox input:is([type='checkbox'], [type='radio']) {
    inline-size: calc((100 / 750) * 24 * 1vw);
    block-size: calc((100 / 750) * 24 * 1vw);
    appearance: none;
    border: 1px solid var(--_gray);
  }

  .form .checkbox input[type='checkbox']:checked {
    appearance: auto;
  }
}

/* =====================
  UIlock
===================== */
.ui-lock {
  position: relative;
  pointer-events: none;
  user-select: none;
  opacity: 0.8;
}

.ui-lock * {
  pointer-events: none;
  user-select: none;
}

.ui-lock::after {
  position: absolute;
  inset: 0;
  z-index: calc(infinity * 1px);
  display: block;
  inline-size: 100%;
  block-size: 100%;
  content: '';
  background: #ffffff05;
}