@charset "utf-8";
/* =====================
  Reset
===================== */

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

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

  /* 表の枠色 */
  --_table-bd-color: var(--border-gray);

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

.form,
.form * {
  box-sizing: border-box;
}
.form {
  max-inline-size: 824rem;
  margin-inline: auto;
}

::placeholder {
  color: #b7b7b7;
}

/* 文章 */
.form .form-text {
  text-align: left;
}
.form .form-text.tac {
  text-align: center;
}
@media not all and (min-width: 768px) {
  .form[date-id='index'] .form-text.tac {
    text-align: left;
  }
}
/* Desktop */
@media print, screen and (min-width: 768px) {
  .form .form-text br.sp {
    display: none;
  }
}

:where(.form[data-id='index'], .form[data-id='confirm']) .form-text {
  margin-bottom: 64rem;
}
@media not all and (min-width: 768px) {
  :where(.form[data-id='index'], .form[data-id='confirm']) .form-text {
    margin-bottom: 32rem;
  }
}

/* =====================
  テキスト
===================== */
/* .form[data-id='complete'] h2 {
  font-size: 32rem;
  font-weight: bold;
  line-height: 1.6;
  letter-spacing: 0.03em;
  margin-bottom: 40rem;
}
@media not all and (min-width: 768px) {
  .form[data-id='complete'] h2 {
    font-size: 48rem;
  }
} */

/* =====================
  Index
===================== */
@media not all and (min-width: 768px) {
  .form[data-id='index'] .form-text {
    text-align: left;
  }
}

/* =====================
  step
===================== */
.step {
  font-weight: bold;
  width: 288rem;
  height: 59rem;
  margin-inline: auto;
  position: relative;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  margin-block-end: 64rem;
  color: var(--_inactive-color);
}
@media not all and (min-width: 768px) {
  .step {
    width: 266rem;
    height: 46rem;
    margin-block-end: 32rem;
  }
}

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

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

/* 円 */
.step span::before {
  --size: 11rem;
  content: '';
  display: block;
  position: absolute;
  top: -27rem;
  left: calc(50% - var(--size) / 2);
  width: var(--size);
  aspect-ratio: 1 / 1;
  background: currentColor;
  border-radius: calc(infinity * 1px);
}
@media not all and (min-width: 768px) {
  .step span::before {
    top: -26rem;
  }
}

/* 入力 */
.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: 2rem;
  }
} */
.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%);
}

/* =====================
  パーツ
===================== */
.form :where(input, textarea, select) {
  color: var(--color-text-primary);
}
/* prettier-ignore */
.form :where(input:is([type='text'], [type='tel'], [type='email'], [type='url']), textarea, select) {
  font-family: inherit;
  border-radius: 2rem;
  border: none;
  background: var(--_input-bg-color);
  width: 100%;
  font-size: 16rem;
  line-height: 1.8;
  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: 15rem;
    padding-block: 15rem;
  }
}

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

/* テキストエリア */
.form textarea {
  min-block-size: 256rem;
  max-block-size: 50vh;
}
@supports (field-sizing: content) {
  .form textarea {
    field-sizing: content;
  }
}

@media not all and (min-width: 768px) {
  .form textarea {
    min-block-size: 216rem;
  }
}

/* セレクトボックス */
.form select {
  width: fit-content;
  min-width: 280rem;
}
@media not all and (min-width: 768px) {
  .form select {
    min-width: 240rem;
  }
}

/* =====================
  error
===================== */
/* prettier-ignore */
.form :where(input:is([type='text'], [type='tel'], [type='email'], [type='url']), textarea, select):user-invalid {
  outline: var(--border) var(--_red);
}
/* prettier-ignore */
.form div:has(:where(input:is([type='text'], [type='tel'], [type='email'], [type='url']), textarea, select):user-invalid) + .error,
.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(--color-primary-pale);
}
/* prettier-ignore */
.form :where(input:is([type='text'], [type='tel'], [type='email'], [type='url']), textarea,select):user-invalid + .error::before,
.form div:has(: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,
.form div:has(:where(input:is([type='text'], [type='tel'], [type='email'], [type='url']), textarea, select):user-invalid:is([name='email'])) + .error {
  top: 77%;
}
@media not all and (min-width: 768px) {
  .form :where(input:is([type='text'], [type='tel'], [type='email'], [type='url']), textarea, select):user-invalid:is([name='address']) + .error {
    top: 77%;
  }
  .form div:has(input:is([name='tel']):user-invalid) + .error {
    top: 32%;
  }
  .form div:has(:where(input:is([type='text'], [type='tel'], [type='email'], [type='url']), textarea, select):user-invalid:is([name='email'])) + .error {
    top: 24%;
  }
}
/* 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: 12rem;
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  border-radius: 2rem;
  word-break: break-all;
  line-height: 1.5;
  padding-inline: 11rem;
  padding-block: 5rem;
  border: var(--border) currentColor;
  background: color-mix(in srgb, currentColor 10%, transparent 100%);
}
@media not all and (min-width: 768px) {
  .form .error {
    font-size: 10rem;
    padding-inline: 0.8em;
    padding-block: 0.5em;
  }
}

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

/* ==== table row ==== */
.form .table .tr {
  border-bottom: var(--border) var(--_table-bd-color);
  display: grid;
  grid-template-rows: 1fr;
  padding-block: 40rem;
  gap: 16rem;
}
@media not all and (min-width: 768px) {
  .form .table .tr {
    padding-block: 32rem;
    row-gap: 8rem;
  }
}
.form[data-id='index'] .table .tr:last-child {
  border-bottom-color: transparent;
}
.form[data-id='confirm'] .table .tr {
  padding-block: 20rem;
  row-gap: 4rem;
}
/* ==== dt ==== */
.form .table dt {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8rem;
  font-weight: bold;
}
@media not all and (min-width: 768px) {
  .form .table dt {
    font-size: 15rem;
  }
}
.form .table .tr:has(:where(input, textarea, select)) dt::before {
  content: '任意';
  display: grid;
  place-content: center;
  padding-inline: 6rem;
  padding-block: 4rem;
  color: var(--_gray);
  border: var(--border) currentColor;
  line-height: 1;
  font-size: 13rem;
}
@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;
}

/* ==== dd ==== */
.form .table dd {
  word-break: break-all;
  position: relative;
  display: grid;
  grid-template-rows: 1fr;
  gap: 16rem;
}
@media not all and (min-width: 768px) {
  .form .table dd {
    gap: 10rem;
  }
}

/* ==== 郵便番号、生年月日 ==== */
.form .table dd .text {
  display: grid;
  grid-template-columns: auto 280rem 1fr;
  align-items: center;
  gap: 16rem;
  font-size: 14rem;
}
@media not all and (min-width: 768px) {
  .form .table dd .text {
    gap: 8rem;
    font-size: 12rem;
    grid-template-columns: auto 188rem 1fr;
  }
}
.form .table dd .text:has([name='postalcode']) > span:first-child {
  font-weight: bold;
  font-size: 16rem;
  padding-left: 1em;
}
@media not all and (min-width: 768px) {
  .form .table dd .text:has([name='postalcode']) > span:first-child {
    padding-left: 0;
    font-size: 15rem;
  }
}

.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, 200rem) 1fr;
  }
  .form[data-id='confirm'] .table .tr {
    align-items: flex-start;
    grid-template-rows: auto;
    grid-template-columns: subgrid;
    grid-column: span 2;
    padding-block: 32rem;
  }
  .form[data-id='confirm'] .table .tr:last-child {
    border-bottom: var(--border) 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: 8rem;
  width: fit-content;
  margin-inline: auto;
  margin-top: 40rem;
  cursor: pointer;
}
@media not all and (min-width: 768px) {
  .form label[for='agree'] {
    gap: 8rem;
    margin-top: 16rem;
  }
}
.form label[for='agree'] input[type='checkbox'] {
  cursor: pointer;
  width: 24rem;
  aspect-ratio: 1 / 1;
  margin: unset;
  border-radius: 2rem;
}
@media not all and (min-width: 768px) {
  .form label[for='agree'] input[type='checkbox'] {
    width: 18rem;
    height: 18rem;
    appearance: none;
    border: var(--border) var(--_gray);
  }
  .form label[for='agree'] input[type='checkbox']:checked {
    appearance: checkbox;
  }
}
.form label[for='agree'] a {
  font-weight: bold;
  text-decoration: underline;
  @media (any-hover: hover) {
    &:hover {
      opacity: 0.5;
    }
  }
}

/* =====================
  submit
===================== */
.form .submit {
  display: grid;
  grid-template-columns: 1fr;
  margin-inline: auto;
  width: fit-content;
  row-gap: 48rem;
}
.form .submit button[form='back'] {
  appearance: none;
  cursor: pointer;
  font-size: 16rem;
  line-height: 1.8;
}
@media not all and (min-width: 768px) {
  .form .submit button[form='back'] {
    font-size: 15rem;
  }
}
.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: 72rem;
  margin-inline: auto;
}

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

/* ファイル選択ボタン */
.form .resume .file span:first-of-type {
  cursor: pointer;
  background: #fff;
  display: grid;
  width: fit-content;
  grid-template-columns: auto auto;
  border: var(--border) var(--border-gray);
  border-radius: calc(infinity * 1px);
  color: var(--_main-color);
  font-size: 16rem;
  font-weight: bold;
  line-height: 1;
  gap: 8rem;
  padding-block: 24rem;
  min-width: 246rem;
  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 20%, 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: 14rem;
  aspect-ratio: 1 / 1;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-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-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: 200rem;
  font-size: 14rem;
}
@media not all and (min-width: 768px) {
  .form .resume .file .resume-title {
    width: 100%;
    font-size: 14rem;
  }
}

/* ファイル削除ボタン */
.form .resume .file .resume-cancel {
  z-index: 2;
  border: none;
  outline: none;
  display: grid;
  cursor: pointer;
  width: 24rem;
  height: 24rem;
  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: 11rem;
  aspect-ratio: 1 / 1;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-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-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: 14rem;
}
@media not all and (min-width: 768px) {
  .form .resume p {
    font-size: 12rem;
  }
}
.form .resume p::before {
  content: '※';
}

/* =====================
  チェックボックス
===================== */
.form .checkbox {
  display: grid;
  grid-auto-flow: column;
  justify-content: flex-start;
  gap: 16rem;
}
@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: 5rem;
  font-weight: bold;
}
@media not all and (min-width: 768px) {
  .form .checkbox label {
    font-size: 15rem;
  }
}
.form .checkbox input:is([type='checkbox'], [type='radio']) {
  margin: unset;
  cursor: pointer;
  width: 16rem;
  aspect-ratio: 1 / 1;
}
@media not all and (min-width: 768px) {
  .form .checkbox input:is([type='checkbox'], [type='radio']) {
    border: var(--border) var(--_gray);
    width: calc((100 / 750) * 24 * 1vw);
    height: calc((100 / 750) * 24 * 1vw);
  }
  .form .checkbox input[type='checkbox'] {
    appearance: none;
  }
  .form .checkbox input[type='checkbox']:checked {
    appearance: checkbox;
  }
}
.form .checkbox input[type='radio'] {
  accent-color: var(--_active-color);
}

/* =====================
  UIlock
===================== */
.ui-lock {
  opacity: 0.8;
  pointer-events: none;
  position: relative;
  -webkit-user-select: none;
  user-select: none;
}
.ui-lock * {
  -webkit-user-select: none;
  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);
}

.post-mark {
  font-size: 16rem;
}
@media not all and (min-width: 768px) {
  .post-mark {
    font-size: 15rem;
  }
}
.form :is(input[name='tel'], input[name='birth']) {
  width: 280rem;
}
@media not all and (min-width: 768px) {
  .form .table dd .text:has(input[name='tel']) {
    grid-template-columns: 1fr;
  }
  .form :is(input[name='tel'], input[name='birth']) {
    width: 100%;
  }
}

.form p + p {
  margin-top: 0;
}