@charset "utf-8";
/* =====================
  Reset
===================== */
.form select {
  appearance: auto;
}

.link-btn button {
  cursor: pointer;
  border-radius: 8px;
  padding-block: 1em;
  padding-inline: 4em;
  justify-content: center;
  box-shadow: 0 4px 0 0 #d9d7d5;
  background-color: #3185f8;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  transition: all 250ms ease 0s;
}
.link-btn button:hover {
  box-shadow: 0 0px 0 0 #d9d7d5;
  translate: 0 4px;
}

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

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

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

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

.form,
.form * {
  box-sizing: border-box;
}
.form {
  max-inline-size: 824px;
  margin-inline: auto;
}
@media not all and (min-width: 768px) {
  .form {
    padding-inline: calc((100 / 750) * 40 * 1vw);
  }
}

/* 文章 */
.form .form-text {
  text-align: left;
  line-height: 1.8;
}
.form .form-text.tac {
  text-align: center;
}
/* Desktop */
@media print, screen and (min-width: 768px) {
  .form .form-text br.sp {
    display: none;
  }
}

/* =====================
  h1
===================== */
.form h1 {
  text-align: center;
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 16px;
}
@media not all and (min-width: 768px) {
  .form h1 {
    font-size: calc((100 / 750) * 40 * 1vw);
  }
}

/* =====================
  Index
===================== */
.form:where([data-id='index'], [data-id='confirm']) .form-text {
  margin-top: 48px;
}
@media not all and (min-width: 768px) {
  .form:where([data-id='index'], [data-id='confirm']) .form-text {
    margin-top: calc((100 / 750) * 64 * 1vw);
    text-align: left;
  }
}

/* =====================
  step
===================== */
.step {
  font-weight: bold;
  width: 288px;
  height: 59px;
  margin-inline: auto;
  position: relative;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  margin-top: 48px;
  margin-bottom: 64px;
  color: var(--_inactive-color);
}
@media not all and (min-width: 768px) {
  .step {
    margin-block: calc((100 / 750) * 64 * 1vw) calc((100 / 750) * 120 * 1vw);
    width: calc((100 / 750) * 408 * 1vw);
    height: calc((100 / 750) * 87 * 1vw);
  }
}

/* 線 */
.step::before {
  content: '';
  width: 90%;
  height: 1px;
  top: 24px;
  background: currentColor;
  display: block;
  position: absolute;
  left: 50%;
  translate: -50% 0;
  align-self: start;
}
@media not all and (min-width: 768px) {
  .step::before {
    width: 80%;
    top: 2.4vw;
  }
}

/* 点 */
.step span {
  display: block;
  position: absolute;
  line-height: 1;
  bottom: -1px;
  font-size: 14px;
}
@media not all and (min-width: 768px) {
  .step span {
    font-size: calc((100 / 750) * 26 * 1vw);
  }
}

/* 円 */
.step span::before {
  content: '';
  display: block;
  position: absolute;
  top: -27px;
  left: 8px;
  width: 11px;
  aspect-ratio: 1 / 1;
  background: currentColor;
  border-radius: calc(infinity * 1px);
}
@media not all and (min-width: 768px) {
  .step span::before {
    width: calc((100 / 750) * 18 * 1vw);
    top: -7.2vw;
  }
}

/* 入力 */
.step span:nth-child(1) {
  left: 0;
}
.step span:nth-child(1)::after {
  content: '入力';
}
@media not all and (min-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 (min-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%);
}
.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%);
}
.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%);
}

/* =====================
  パーツ
===================== */
/* prettier-ignore */
.form :where(input:is([type='text'], [type='tel'], [type='email'], [type='url']), textarea, select) {
  font-family: inherit;
  border-radius: 2px;
  border: none;
  background: var(--_input-bg-color);
  width: 100%;
  font-size: 16px;
  padding-block: 1.25em;
  padding-inline: 1em;
  position: relative;
}
@media not all and (min-width: 768px) {
  /* prettier-ignore */
  .form :where(input:is([type='text'], [type='tel'], [type='email'], [type='url']), textarea, select) {
    font-size: calc((100 / 750) * 28 * 1vw);
    padding-block: calc((100 / 750) * 27 * 1vw);
  }
}

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

/* テキストエリア */
.form textarea {
  field-sizing: content;
  min-block-size: 256px;
}
@media not all and (min-width: 768px) {
  .form textarea {
    min-block-size: calc((100 / 750) * 377 * 1vw);
  }
}

/* セレクトボックス */
.form select {
  width: fit-content;
  min-width: 280px;
}
@media not all and (min-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 {
  display: block !important;
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  right: 2em;
}
/* 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 (min-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;
  color: var(--_red);
  font-size: 12px;
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  border-radius: 2px;
  word-break: break-all;
  line-height: 1.5;
  padding-inline: 11px;
  padding-block: 5px;
  border: 1px solid currentColor;
  background: color-mix(in srgb, currentColor 10%, transparent 100%);
}
@media not all and (min-width: 768px) {
  .form .error {
    font-size: calc((100 / 750) * 18 * 1vw);
    padding-inline: calc((100 / 750) * 13 * 1vw);
    padding-block: calc((100 / 750) * 11 * 1vw);
  }
}

/* ==== table ==== */
.form .table {
  display: grid;
  grid-template-rows: 1fr;
  gap: 40px;
}
@media not all and (min-width: 768px) {
  .form .table {
    gap: calc((100 / 750) * 56 * 1vw);
  }
}

/* ==== table row ==== */
.form .table .tr {
  border-bottom: 1px solid var(--_table-bd-color);
  display: grid;
  grid-template-rows: 1fr;
  padding-bottom: 40px;
  gap: 20px;
}
@media not all and (min-width: 768px) {
  .form .table .tr {
    padding-bottom: calc((100 / 750) * 56 * 1vw);
    gap: calc((100 / 750) * 24 * 1vw);
  }
}
.form .table .tr:last-child {
  border-bottom: 1px solid transparent;
}

/* ==== dt ==== */
.form .table dt {
  margin-block: calc((1em - 1lh) / 2);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
  font-weight: bold;
}
@media not all and (min-width: 768px) {
  .form .table dt {
    font-size: calc((100 / 750) * 28 * 1vw);
  }
}
.form .table .tr:has(:where(input, textarea, select)) dt::before {
  content: '任意';
  display: grid;
  place-content: center;
  padding-inline: 6px;
  padding-block: 4px;
  color: var(--_gray);
  border: 1px solid currentColor;
  line-height: 1;
  font-size: 13px;
}
@media not all and (min-width: 768px) {
  .form .table .tr:has(:where(input, textarea, select)) dt::before {
    padding-inline: calc((100 / 750) * 8 * 1vw);
    padding-block: calc((100 / 750) * 6 * 1vw);
    font-size: calc((100 / 750) * 22 * 1vw);
  }
}
.form .table .tr:has([required], [data-required]) dt::before {
  content: '必須';
  color: var(--_red);
  border-color: currentColor;
}
.form .table .tr select[disabled] {
  opacity: 1;
  background: none;
  appearance: none;
  padding-block: 0;
  padding-inline: 0;
  color: inherit;
}

/* ==== dd ==== */
.form .table dd {
  word-break: break-all;
  line-height: 2;
  position: relative;
  display: grid;
  grid-template-rows: 1fr;
  gap: 16px;
}
@media not all and (min-width: 768px) {
  .form .table dd {
    gap: calc((100 / 750) * 24 * 1vw);
  }
}

/* ==== 郵便番号、生年月日 ==== */
.form .table dd .text {
  display: grid;
  grid-template-columns: auto 280px 1fr;
  align-items: center;
  gap: 16px;
  font-size: 14px;
}
@media not all and (min-width: 768px) {
  .form .table dd .text {
    gap: calc((100 / 750) * 16 * 1vw);
    font-size: calc((100 / 750) * 22 * 1vw);
    grid-template-columns: auto calc((100 / 750) * 300 * 1vw) 1fr;
  }
}
.form .table dd .text:has([name='postalcode']) > span:first-child {
  font-weight: bold;
  padding-left: 1em;
}
.form .table dd .text:has([name='birth']) {
  grid-template-columns: auto 1fr;
}
@media not all and (min-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 (min-width: 768px) {
  .form[data-id='confirm'] .table {
    grid-template-columns: minmax(auto, 200px) 1fr;
  }
  .form[data-id='confirm'] .table .tr {
    align-items: flex-start;
    grid-template-rows: auto;
    grid-template-columns: subgrid;
    grid-column: span 2;
  }
  .form[data-id='confirm'] .table .tr:last-child {
    border-bottom: 1px solid var(--_table-bd-color);
  }
  .form[data-id='confirm'] .table .tr dt {
    margin-top: unset;
  }
}

/* =====================
  プライバシーポリシーチェック
===================== */
.form label[for='agree'] {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
  width: fit-content;
  margin-inline: auto;
  margin-top: 64px;
  cursor: pointer;
}
@media not all and (min-width: 768px) {
  .form label[for='agree'] {
    font-size: calc((100 / 750) * 28 * 1vw);
    margin-top: calc((100 / 750) * 30 * 1vw);
  }
}
.form label[for='agree'] input[type='checkbox'] {
  cursor: pointer;
  width: 24px;
  aspect-ratio: 1 / 1;
  margin: unset;
}
@media not all and (min-width: 768px) {
  .form label[for='agree'] input[type='checkbox'] {
    width: calc((100 / 750) * 50 * 1vw);
    height: calc((100 / 750) * 50 * 1vw);
    appearance: none;
    border: 1px solid var(--_gray);
  }
  .form label[for='agree'] input[type='checkbox']:checked {
    appearance: checkbox;
  }
}
.form label[for='agree'] a {
  font-weight: bold;
  text-decoration: underline;
  color: var(--_main-color);
  @media (any-hover: hover) {
    &:hover {
      opacity: 0.5;
    }
  }
}

/* =====================
  submit
===================== */
.form .submit {
  margin-top: 78px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 46px;
  margin-inline: auto;
  width: fit-content;
}
@media not all and (min-width: 768px) {
  .form .submit {
    margin-top: calc((100 / 750) * 48 * 1vw);
  }
}
.form .submit button {
  appearance: none;
}
.form .submit button:is([form='post'], [form='submit']) {
  appearance: none;
}
.form .submit button:is([form='post'], [form='submit']):where([disabled]) {
  opacity: 0.5;
  pointer-events: none;
}
.form .submit button:is([form='post'], [form='submit']):where([disabled])::after {
  content: '';
  animation-name: road;
  animation-duration: 1500ms;
  animation-delay: 0ms;
  animation-timing-function: step(1);
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-play-state: running;
}
@keyframes road {
  0% {
    content: '';
  }
  33% {
    content: '.';
  }
  66% {
    content: '..';
  }
  100% {
    content: '...';
  }
}

@media not all and (min-width: 768px) {
  .form .submit button:is([form='post'], [form='submit']) {
    appearance: none;
  }
}
.form .submit button[form='back'] {
  appearance: none;
  text-align: center;
  text-decoration: underline;
  color: var(--_gray);
  transition: color 250ms ease 0s;
  will-change: color;
  @media (any-hover: hover) {
    &:hover {
      color: color-mix(in srgb, var(--_gray) 80%, transparent 100%);
    }
  }
}

/* =====================
  form-anchor
===================== */
.form-anchor {
  margin-top: 72px;
  margin-inline: auto;
  cursor: pointer;
  border-radius: 8px;
  padding-block: 1em;
  padding-inline: 4em;
  justify-content: center;
  box-shadow: 0 4px 0 0 #d9d7d5;
  background-color: #3185f8;
  font-size: 16px;
  text-align: center;
  width: fit-content;
  font-weight: bold;
  transition: all 250ms ease 0s;
}
.form-anchor a {
  color: #fff !important;
}
@media not all and (min-width: 768px) {
  .form-anchor {
    margin-top: calc((100 / 750) * 72 * 1vw);
  }
}

/* =====================
  resume
===================== */
.form .resume .file {
  margin-bottom: 13px;
  position: relative;
  display: grid;
  grid-template-columns: 246px 1fr 24px;
  gap: 16px;
  align-items: center;
}
.form .resume .file input[type='file'] {
  appearance: none;
  display: none;
}

/* ファイル選択ボタン */
.form .resume .file span:first-of-type {
  cursor: pointer;
  background: var(--_input-bg-color);
  display: grid;
  width: fit-content;
  grid-template-columns: auto auto;
  border-radius: calc(infinity * 1px);
  color: var(--_main-color);
  font-size: 16px;
  line-height: 1;
  gap: 8px;
  padding-block: 24px;
  min-width: 246px;
  justify-content: center;
  text-align: center;
  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 (min-width: 768px) {
  .form .resume .file span:first-of-type {
    margin-top: calc((100 / 750) * 17 * 1vw);
    font-size: calc((100 / 750) * 26 * 1vw);
    padding-block: calc((100 / 750) * 40 * 1vw);
    min-width: calc((100 / 750) * 390 * 1vw);
    width: calc((100 / 750) * 390 * 1vw);
    gap: calc((100 / 750) * 13 * 1vw);
  }
}
.form .resume .file span:first-of-type::before {
  content: '';
  width: 14px;
  aspect-ratio: 1 / 1;
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center;
  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>');
  background-color: currentColor;
  @media not all and (min-width: 768px) {
    width: calc((100 / 750) * 22 * 1vw);
  }
}

/* ファイル名 */
.form .resume .file .resume-title {
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 200px;
  font-size: 14px;
}
@media not all and (min-width: 768px) {
  .form .resume .file .resume-title {
    width: calc((100 / 750) * 327 * 1vw);
  }
}

/* ファイル削除ボタン */
.form .resume .file .resume-cancel {
  z-index: 2;
  border: none;
  outline: none;
  display: grid;
  cursor: pointer;
  width: 24px;
  height: 24px;
  color: var(--_input-bg-color);
  background: currentColor;
  margin-inline: auto 0;
  place-content: center;
  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 {
  content: '';
  width: 11px;
  aspect-ratio: 1 / 1;
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center;
  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>');
  background-color: var(--_gray);
}

/* モバイルはgirdシステムで表示 */
@media not all and (min-width: 768px) {
  .form .resume .file {
    grid-template-areas:
      'select select'
      'title button';
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    margin-bottom: calc((100 / 750) * 18 * 1vw);
    gap: calc((100 / 750) * 28 * 1vw);
  }
  .form .resume .file span:first-of-type {
    grid-area: select;
  }
  .form .resume .file .resume-title {
    grid-area: title;
  }
  .form .resume .file button {
    grid-area: button;
  }
}

/* 注釈 */
.form .resume p {
  text-indent: -1em;
  padding-left: 1em;
  font-size: 14px;
}
@media not all and (min-width: 768px) {
  .form .resume p {
    font-size: calc((100 / 750) * 22 * 1vw);
  }
}
.form .resume p::before {
  content: '※';
}

/* =====================
  チェックボックス
===================== */
.form .checkbox {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
@media not all and (min-width: 768px) {
  .form .checkbox {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: calc((100 / 750) * 28 * 1vw);
  }
}
.form .checkbox label {
  cursor: pointer;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 5px;
  font-weight: bold;
}
@media not all and (min-width: 768px) {
  .form .checkbox label {
    font-size: calc((100 / 750) * 28 * 1vw);
  }
}
.form .checkbox input[type='checkbox'] {
  margin: unset;
  cursor: pointer;
  width: 16px;
  aspect-ratio: 1 / 1;
}
@media not all and (min-width: 768px) {
  .form .checkbox input[type='checkbox'] {
    appearance: none;
    border: 1px solid var(--_gray);
    width: calc((100 / 750) * 24 * 1vw);
    height: calc((100 / 750) * 24 * 1vw);
  }
  .form .checkbox input[type='checkbox']:checked {
    appearance: checkbox;
  }
}

/* =====================
  UIlock
===================== */
.ui-lock {
  opacity: 0.8;
  pointer-events: none;
  position: relative;
  user-select: none;
}
.ui-lock * {
  user-select: none;
  pointer-events: none;
}
.ui-lock::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  background: #ffffff05;
  z-index: calc(infinity * 1px);
}