@charset "UTF-8";

/* =====================
フォーム
===================== */
.form-table td select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
  border: 0;
  margin: 0;
  padding: 0;
  background: none transparent;
  vertical-align: middle;
  font-size: inherit;
  color: inherit;
  box-sizing: content-box;
}

/* ==== ステップフロー ==== */
.step {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url('/assets/img/common/step01_2x.png');
  width: 51.2vw;
  height: 9.733333333333333vw;
  margin-top: 9.2vw;
  margin-inline: auto;
}

.confirm .step {
  background-image: url('/assets/img/common/step02_2x.png');
  margin-top: 9.4vw;
}

.comp .step {
  background-image: url('/assets/img/common/step03_2x.png');
  margin-top: 1.6vw;
}

/* ==== フォーム全体の設定 ==== */
.form-table {
  width: 100%;
  margin-inline: auto;
  margin-top: 8vw;
}

/* ==== テーブルリセット ==== */
.form-table tr,
.form-table th,
.form-table td {
  display: block;
}

.form-table .eg {
  font-size: 2.933333333333333vw;
  font-weight: 500;
}

.form-table input[type='text'],
.form-table input[type='tel'],
.form-table input[type='url'],
.form-table input[type='email'] {
  width: 100%;
}

.form-table tr {
  padding-block: 5.8vw 8vw;
  border-bottom: 1px solid #e6e6e6;
}

.form-table tr:last-child {
  border-bottom: none;
}

.form-table th {
  font-weight: bold;
}

.form-table td {
  margin-top: 3.2vw;
}

.form-table td + td {
  margin-top: 2.1333333333333333vw;
}

.form-table td input,
.form-table td select,
.form-table td textarea {
  padding: 1.02em 0.9em;
  background-color: #f0f0f0;
}

.form-table textarea {
  width: 100%;
  min-height: 49.333333333333336vw;
}

/* ==== 郵便番号エリア ==== */
.form-table .post {
  display: flex;
  align-items: center;
  gap: 2.1333333333333333vw;
}

.form-table .post input {
  width: 43.333333333333336vw;
}

.form-table .p-postal-code {
  display: flex;
  align-items: center;
}

/* ==== （ふりがな）の位置 ==== */
.contact .thbr label > span {
  padding-left: 66px;
}

/* ==== 電話番号 ==== */
.form-table .tel-no {
  display: flex;
  align-items: center;
  gap: 16px;
}

.form-table .tel-no input {
  width: 55.4vw;
}

/* ==== メールアドレス ==== */
.form-table #email_confirm {
  margin-top: 1em;
}

/* ==== 生年月日 ==== */
.form-table .birth .eg {
  margin-top: 2vw;
}

.form-table .birth input {
  width: 47.46666666666667vw;
}

/* ==== 履歴書 ==== */
.resume-btn {
  width: 58.13333333333333vw;
  height: 15.733333333333333vw;
  border-radius: 50rem;
  display: inline-block;
  position: relative;
  background-color: #f0f0f0;
  cursor: pointer;
  padding-block: 1.1em;
  font-weight: bold;
  color: #002a87;
}

.resume-btn span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
}

.resume-btn span::before {
  content: '';
  display: block;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url('/assets/img/common/icon_add_2x.png');
  width: 2.8vw;
  height: 2.933333333333333vw;
}

.resume label > span {
  display: block;
  font-size: 3.466666666666667vw;
  margin-top: 3.4vw;
}

.resume_tmp_title {
  white-space: nowrap;
  text-align: center;
  width: 100%;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.resume input[type='file'] {
  opacity: 0;
  position: absolute;
  top: 0;
}

.resume .eg {
  font-size: 2.933333333333333vw;
  margin-top: 5.8vw;
}

/* ==== 必須・任意の表示 ==== */
.form-table th label::before {
  content: '任意';
  color: #5d5f64;
  font-size: 3.2vw;
  line-height: 2;
  padding-block: 0.2vw;
  padding-inline: 0.9333333333333333vw;
  margin-right: 0.6em;
  border: solid 1px #5d5f64;
}

.form-table .must th label::before {
  content: '必須';
  color: #b40000;
  border: solid 1px #b40000;
}

.confirm .form-table th label::before {
  display: none;
}

/* ==== プラポリチェック ==== */
.check {
  width: fit-content;
  margin-top: 4.2vw;
  margin-inline: auto;
}

.check label {
  font-weight: bold;
  letter-spacing: 0.03em;
}

input[type='checkbox'] {
  appearance: checkbox;
  appearance: checkbox;
  accent-color: var(--blue);
  display: inline-block;
  vertical-align: -2px;
  width: calc((100 / 750) * 28 * 1vw);
  aspect-ratio: 1 / 1;
}

.check .link {
  text-decoration: underline;
}

/* ==== 送信ボタン ==== */
.link-btn2 {
  margin-inline: auto;
  margin-top: 9.5vw;
}

/* ==== 戻るボタン ==== */
.return {
  line-height: 1;
  border-bottom: 1px solid #5d5f64;
  width: fit-content;
  color: #5d5f64;
  margin-top: 11.6vw;
  margin-inline: auto;
}

/* =====================
  変数定義
===================== */
:root {
  /* 現在のステップ 色 */
  --active-color: var(--blue);
  /* 現在のステップ 円の影色 */
  --active-shadow-color: #0064c663;
  /* 非活性ステップの色 */
  --inactive-color: #989898;
  /* フォーム下線 */
  --form-border: #e6e6e6;
  /* フォームパーツ背景 */
  --input-bgcolor: #f0f0f0;
}
[for='resume'] {
  position: relative;
  align-items: center;
}
#resumeTmpTitle {
  text-align: left;
  display: block;
  padding-left: 1em;
  white-space: nowrap;
  line-height: 1;
  width: 48vw;
  font-size: 3.466666666666667vw;
  overflow: hidden;
  text-overflow: ellipsis;
}
.resume-cancel {
  position: absolute;
  top: 90%;
  transform: translateY(-50%);
  width: 24px;
  aspect-ratio: 1 / 1;
  right: 0;
  background-color: var(--input-bgcolor);
  border-radius: calc(infinity * 1px);
  z-index: 2;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transition: all 300ms ease 0s;
}
.resume-cancel::before,
.resume-cancel::after {
  content: '';
  display: block;
  width: 12px;
  height: 2px;
  background: var(--active-color);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: 0 0;
}
.resume-cancel::before {
  rotate: 0 0 1 45deg;
}
.resume-cancel::after {
  rotate: 0 0 1 -45deg;
}