@charset "utf-8";
/* =====================
  override
===================== */
.sub_mv {
  background-image: url('/recruit/assets/img/entry/mv.webp');

  @media (width <= 768px) {
    background-image: url('/recruit/assets/img/entry/mv_sp.webp');
  }
}

/* =====================
  Form
===================== */
.form {
  /* サイトメインカラー */
  --_main-color: #65bc45;
  --_red: #b61024;
  --_gray: #575757;

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

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

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

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

.form {
  max-inline-size: 824px;
  padding-block-end: 104px;
  margin-inline: auto;
}

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

/* 文章 */
.form .form-text {
  font-weight: 500;
  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 {
  font-weight: 500;
  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
===================== */
[data-id='index'] .form-text {
  margin-block-start: 104px;
  text-align: center;
}

[data-id='confirm'] .form-text {
  margin-block-start: 104px;
}

[data-id='complete'] .form-text {
  margin-block-start: 52px;
  text-align: center;
}

@media not all and (width >= 768px) {
  [data-id='index'] .form-text {
    margin-block-start: calc((100 / 750) * 63.1 * 1vw);
    text-align: left;
  }
}

/* =====================
  step
===================== */
.step {
  position: relative;
  inline-size: 288px;
  block-size: 59px;
  margin-block: 52px 74px;
  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) * 427 * 1vw);
    block-size: calc((100 / 750) * 87 * 1vw);
    margin-block: calc((100 / 750) * 114 * 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 {
    bottom: 2vw;
    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: -4.9vw;
    inline-size: calc((100 / 750) * 18 * 1vw);
  }
}

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

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

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

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

.form[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%);

  @media not all and (width >=768px) {
    box-shadow: 0 0 0 1.4vw color-mix(in srgb, var(--_active-color) 20%, transparent 100%);
  }
}

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

.form[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%);

  @media not all and (width >=768px) {
    box-shadow: 0 0 0 1.4vw color-mix(in srgb, var(--_active-color) 20%, transparent 100%);
  }
}

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

.form[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%);

  @media not all and (width >=768px) {
    box-shadow: 0 0 0 1.4vw 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;
  font-weight: 500;
  color: var(--black);
  background-color: 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%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;
  }
}

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

  @media print, screen and (width >=768px) {
    &[data-row='1'] {
      --_block-size: 2.7lh;
    }

    &[data-row='2'] {
      --_block-size: 4lh;
    }
  }

  @media not all and (width >=768px) {
    &[data-row='1'] {
      --_block-size: calc((100 / 750) * 247 * 1vw);
    }

    &[data-row='2'] {
      --_block-size: calc((100 / 750) * 252 * 1vw);
    }
  }

  &[data-row] {
    min-block-size: var(--_block-size);
    max-block-size: var(--_block-size);
    resize: none;
  }
}

@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;
  appearance: auto;
}

@media not all and (width >= 768px) {
  .form select {
    min-width: calc((100 / 750) * 462 * 1vw);
    font: inherit;
    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%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-size: 2.3vw 1.3vw;
    background-repeat: no-repeat;
    background-position: 97% center;
    padding-right: 7vw;
  }
}

/* =====================
  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: 37px;
}

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

::placeholder {
  color: #7c7d86;
}

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

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

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

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

@media not all and (width >= 768px) {
  .form .table dt {
    gap: 2vw;
    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) * 6.3 * 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;
  font-weight: 500;
  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: 12px;
  margin-inline: auto;
  font-weight: 700;
  cursor: pointer;
  @media (width <= 768px) {
    font-size: calc((100 / 750) * 28 * 1vw);
    line-height: 1.8;
  }
}

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

.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) * 31 * 1vw);
    block-size: calc((100 / 750) * 31 * 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;
  inline-size: 304px;
  margin-block-start: 57px;
  margin-inline: auto;
}

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

.form .submit button {
  grid-template-columns: auto auto;
  margin-inline: auto;
  appearance: none;
  cursor: pointer;

  @media not all and (width >=768px) {
    grid-template-columns: auto auto;
    inline-size: 100%;
  }
}

.form .submit button:is([form='post'], [form='submit']) {
  appearance: none;
  border-block-end-color: var(--black);
}

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

@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;
  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) * 26 * 1vw);
  }

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

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

  & a {
    margin-inline: auto;
  }

  @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: #65bc45;
  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(--blue);
  cursor: pointer;
  outline: none;
  background: var(--_input-bg-color);
  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: 23px;
  justify-content: flex-start;
}
.text-label {
  color: #b61024;
  font-weight: bold;
}

@media not all and (width >= 768px) {
  .form .checkbox {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-auto-flow: row;
    gap: calc((100 / 750) * 10 * 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 (width > 768px) {
  }
}

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

/* =====================
  gakureki
===================== */
.gakureki {
  display: block flex;
  padding-left: 16px;
  gap: 30px;
  @media (width <= 768px) {
    gap: calc((100 / 750) * 16 * 1vw);
    padding-left: calc((100 / 750) * 16 * 1vw);
  }

  .unit[data-id='1'] {
    padding-block: 16px;
    font-weight: bold;
    flex-shrink: 0;
    @media (width <= 768px) {
      padding-block: calc((100 / 750) * 29 * 1vw);
    }
  }
  .unit[data-id='2'] {
    @media (width > 768px) {
      & input[type='text'] {
        inline-size: 280px;
      }
    }
    @media (width <= 768px) {
      & input[type='text'] {
        inline-size: calc((100 / 750) * 300 * 1vw);
      }
    }
    flex-grow: 1;
    display: block flex;
    flex-direction: column;
    gap: 16px;

    @media (width <= 768px) {
      gap: calc((100 / 750) * 16 * 1vw);
    }

    .item[data-id='2'] {
      display: block flex;
      align-items: center;
      inline-size: 100%;
      gap: 16px;
      @media (width <= 768px) {
        flex-direction: column;
        gap: calc((100 / 750) * 16 * 1vw);
        justify-content: flex-start;
        align-items: flex-start;
      }

      .parts {
        gap: 16px;
        display: block flex;

        align-items: center;
        @media (width <= 768px) {
          gap: calc((100 / 750) * 16 * 1vw);
        }

        & span {
          display: block flow;
        }
      }
    }
  }
}

/* =====================
  syokureki
===================== */
.syokureki {
  display: block grid;
  gap: 16px;
  grid-template-columns: auto 1fr;

  @media (width <= 768px) {
    gap: calc((100 / 750) * 16 * 1vw);
  }
  .unit {
    padding-inline-start: 16px;
    display: block grid;
    grid-template-rows: auto;
    grid-template-columns: subgrid;
    grid-column: span 2;
    gap: 16px;
    @media (width <= 768px) {
      padding-inline-start: calc((100 / 750) * 16 * 1vw);
      gap: calc((100 / 750) * 16 * 1vw);
    }

    & input[type='text'] {
      inline-size: 280px;
    }
    @media (width <= 768px) {
      & input[type='text'] {
        inline-size: calc((100 / 750) * 300 * 1vw);
      }
    }

    & textarea {
      block-size: 170px;
      min-block-size: 170px;
      @media (width <= 768px) {
        block-size: calc((100 / 750) * 320 * 1vw);
        min-block-size: calc((100 / 750) * 320 * 1vw);
      }
    }

    .title {
      padding-block: 20px;
      @media (width <= 768px) {
        padding-block: calc((100 / 750) * 29 * 1vw);
      }
    }

    .body {
      display: block flex;
      flex-direction: column;
      gap: 16px;
      @media (width <= 768px) {
        flex-direction: column;
        gap: calc((100 / 750) * 16 * 1vw);
        align-items: flex-start;
      }
    }
    .item {
      display: block flex;
      gap: 16px;
      align-items: center;
      inline-size: 100%;
      font-weight: bold;
      @media (width <= 768px) {
        gap: calc((100 / 750) * 16 * 1vw);
        flex-wrap: wrap;
      }

      .parts {
        display: block flow;
        gap: 16px;
        align-items: center;
        @media (width <= 768px) {
          gap: calc((100 / 750) * 16 * 1vw);
        }
      }
    }
  }
}

.agree-box {
  margin-block-start: 60px;
  margin-block-end: 24px;
  @media (width <= 768px) {
    margin-block-start: calc((100 / 750) * 28 * 1vw);
    margin-block-end: calc((100 / 750) * 84 * 1vw);
  }
  .head {
    background: #535353;
    color: white;
    font-weight: bold;
    text-align: center;
    padding-block: 21.3px;
    @media (width <= 768px) {
      font-size: calc((100 / 750) * 28 * 1vw);
      padding-block: calc((100 / 750) * 30 * 1vw);
    }
  }

  .body {
    block-size: 240px;
    overflow-y: auto;
    padding: 17.5px 16px;
    font-size: 16px;
    line-height: 1.8;
    background: #f2f4f6;
    @media (width <= 768px) {
      block-size: calc((100 / 750) * 370 * 1vw);
      padding: calc((100 / 750) * 17 * 1vw) calc((100 / 750) * 16 * 1vw);
      font-size: calc((100 / 750) * 28 * 1vw);
    }
  }
}

.site-seal {
  display: block flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  margin-block-end: 36px;
  @media (width <= 768px) {
    gap: calc((100 / 750) * 28 * 1vw);
    font-size: calc((100 / 750) * 20 * 1vw);

    & p {
      line-height: 1.6;
    }
  }

  & > div {
    flex-shrink: 0;
  }
  & img {
    inline-size: 130px;
    block-size: auto;
    @media (width <= 768px) {
      inline-size: calc((100 / 750) * 210 * 1vw);
    }
  }
}

.site-caution {
  font-weight: 500;
  font-size: 14px;
  text-align: center;
  @media (width <= 768px) {
    line-height: 1.6;
    font-size: calc((100 / 750) * 28 * 1vw);
    text-align: left;
  }
}

.u-anchor {
  display: block flow;
  position: relative;
  & span:not([aria-hidden='true']) {
    background: #65bc45;
    color: white;
    font-weight: 500;
    min-inline-size: 261px;
    gap: 10px;
    letter-spacing: 0.8px;
    line-height: 1;
    place-content: center;
    padding-block: 25px;
    border-radius: 5px;
    justify-content: center;
    display: block flex;
    position: relative;
    align-items: center;
    transition: all 250ms ease 0s;

    @media (width <= 768px) {
      padding-block: calc((100 / 750) * 48 * 1vw);
      min-inline-size: calc((100 / 750) * 378 * 1vw);
      border-radius: calc((100 / 750) * 10 * 1vw);
      gap: calc((100 / 750) * 17 * 1vw);
      letter-spacing: calc((100 / 750) * 1.3 * 1vw);
      font-size: calc((100 / 750) * 26 * 1vw);
    }

    @media (any-hover: hover) {
      &:hover {
        translate: 8px 8px;
      }
    }

    &::before {
      content: '';
      inline-size: 17px;
      block-size: 20px;
      mask-repeat: no-repeat;
      z-index: 2;
      display: block flow;
      position: relative;
      mask-size: contain;
      mask-position: center;
      mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">  <path d="M2.45934 0.616015C1.79268 0.231114 0.959343 0.712238 0.959343 1.48204L0.959346 17.9365C0.959346 18.7063 1.79268 19.1874 2.45934 18.8025L16.7093 10.5753C17.376 10.1904 17.376 9.22816 16.7093 8.84326L2.45934 0.616015Z" fill="white"/></svg>');
      background-color: white;
    }
    @media (width <= 768px) {
      &::before {
        display: block flow;
        inline-size: calc((100 / 750) * 21 * 1vw);
        block-size: calc((100 / 750) * 19 * 1vw);
      }
    }
  }

  & [aria-hidden='true'] {
    position: absolute;
    inset-block-start: 8px;
    inset-inline-end: -8px;
    display: block flow;
    border-radius: 5px;
    inline-size: 100%;
    block-size: 100%;
    content: '';
    border: 2px solid #65bc45;
    pointer-events: none;
    z-index: -1;

    @media (width <= 768px) {
      border: 2px solid #65bc45;
      inset-block-start: calc((100 / 750) * 11 * 1vw);
      inset-inline-end: calc((100 / 750) * 11 * -1 * 1vw);
      border-radius: calc((100 / 750) * 10 * 1vw);
    }
  }
}