@charset "utf-8";
/* =====================
  セカンドページ共通
===================== */
/* =====================
  ヘッダー
===================== */
.header {
  position: relative;
  height: 100px;
  z-index: 50;
}
.header .picture[data-id='1'] {
  display: none;
}
.header .picture[data-id='2'] {
  display: block;
}
.header .hnav .t-menu {
  color: #000;
}
/* =====================
  MV
===================== */
.mv {
  position: relative;
  padding-top: 64px;
}
.mv::before {
  content: '';
  display: block;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  min-width: 1180px;
  width: calc((100% - 1060px) / 2 + 1060px);
  min-height: 300px;
  position: absolute;
  top: 64px;
  right: 0;
}
.mv .inner {
  min-height: 300px;
  position: relative;
}
.mv .inner .scroll {
  width: 21px;
  height: 41px;
  border: 1px solid #000;
  border-radius: 50rem;
  position: relative;
  left: -71px;
  top: -8px;
}
.mv .inner .scroll::before {
  content: '';
  display: block;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url('/assets/image/common/scroll_down.png');
  width: 11px;
  height: 91px;
  position: absolute;
  top: -108px;
  left: 50%;
  transform: translateX(-50%);
}
.mv .inner .scroll::after {
  content: '';
  width: 5px;
  height: 5px;
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #000;
  border-radius: 50%;
  opacity: 1;
  animation: wheel 2s infinite;
  -webkit-animation: wheel 2s infinite;
}
@keyframes wheel {
  to {
    opacity: 0;
    top: 30px;
  }
}
@-webkit-keyframes wheel {
  to {
    opacity: 0;
    top: 30px;
  }
}
/* ==== H1 ==== */
.mv .inner .h1-title span {
  display: inline-block;
  font-size: 72px;
  line-height: 1;
  font-weight: 900;
  background-color: #fff;
  padding: 32px;
}
.mv .inner .h1-title h1 {
  display: block;
  width: fit-content;
  font-size: 24px;
  line-height: 1;
  background-color: var(--orange);
  padding: 16px 32px;
}
/* ==== ブレッド ==== */
.bread {
  position: relative;
}
.bread ul {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.5em;
}
.bread ul li {
  display: flex;
  align-items: center;
  gap: 1.5em;
}
.bread ul li:first-child {
  margin-bottom: 1em;
}
.bread ul li + li::before {
  content: '';
  display: inline-block;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url('/assets/image/common/icon_bread_arrow.png');
  width: 4px;
  height: 7px;
}
/* =====================
  背景付き
===================== */
.bg {
  position: relative;
}
.bg .inner {
  position: relative;
  z-index: 3;
}
.bg::before {
  content: '';
  display: block;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-image: url('/assets/image/common/bg.png');
  width: 100%;
  height: 923px;
  position: absolute;
  top: 0;
  right: 0;
  pointer-events: none;
}

/* =====================
  グレーバックのテーブル
===================== */
.table-back {
  margin-top: 32px;
  padding: 64px;
  background-color: #f5f5f5;
}
.table-back .table table {
  width: 100%;
}
.table-back .table table tbody tr {
  border-bottom: 1px solid #fff;
}
.table-back .table table tbody tr th {
  width: 176px;
  font-weight: bold;
}
.table-back .table table tbody tr td {
  width: 756px;
}
.table-back .table table tbody tr th,
.table-back .table table tbody tr td {
  padding-block: 32px;
}
.table-back .table table tbody tr:first-child th,
.table-back .table table tbody tr:first-child td {
  padding-block: 0px 32px;
}
/* =====================
フォーム
===================== */
/* ==== ステップフロー ==== */
.step {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 288px;
  height: 59px;
  margin-inline: auto;
  margin-top: 48px;
}
.form .step {
  background-image: url('/assets/image/contact/step01.png');
  margin-top: 64px;
}
.confirm .step {
  background-image: url('/assets/image/contact/step02.png');
}
.comp .step {
  background-image: url('/assets/image/contact/step03.png');
}
/* ==== プラポリリンク ==== */
.link {
  color: #f93;
  text-decoration: underline;
}
/* ==== フォーム全体の設定 ==== */
.form-table {
  width: 600px;
  margin-inline: auto;
}
.form-table .eg {
  font-size: 13px;
}
.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 {
  display: block;
  padding-block: 30px;
  border-bottom: 1px solid #e6e6e6;
}
/* 確認画面の幅 */
.confirm .form-table tr {
  padding-top: 32px;
  padding-bottom: 8px;
}
.form-table th {
  vertical-align: middle;
  font-weight: bold;
}
.form-table td {
  margin-top: 16px;
}
/* 確認画面の幅 */
.confirm .form-table td {
  margin-top: 8px;
}
.form-table td input,
.form-table td select,
.form-table td textarea {
  padding: 1em;
  background-color: #f0f0f0;
}
.form-table th,
.form-table td {
  display: block;
  word-break: break-all;
}
.form-table textarea {
  width: 100%;
  min-height: 264px;
}
/* ==== メールアドレス ==== */
.form-table .email-2 {
  margin-top: 1em;
}
/* 郵便番号エリア */
.form-table .post .post1 {
  width: 223px;
}
.form-table .post .eg {
  margin-left: 1.2em;
}
/* 電話番号エリア */
.form-table .tel .u-form-unit {
  display: flex;
  align-items: center;
}
.form-table .tel .tel1 {
  width: 223px;
}
.form-table .tel .eg {
  margin-left: 1.2em;
}
/* 生年月日エリア */
.form-table .birth .birth1 {
  width: 223px;
}
.form-table .birth .eg {
  margin-left: 1.2em;
}

/* ==== 履歴書 ==== */
main td label[for='resume'] {
  display: flex;
  position: relative;
  align-items: center;
  gap: 1em;
}
.resume-btn {
  width: 223px;
  border-radius: 50rem;
  display: inline-block;
  position: relative;
  background-color: #f0f0f0;
  cursor: pointer;
  padding-block: 0.9em;
  color: #f93;
  text-align: center;
}
.resume_tmp_title {
  white-space: nowrap;
  line-height: 1;
  width: 180px;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.resume_cancel {
  opacity: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  aspect-ratio: 1 / 1;
  right: 0;
  z-index: 2;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%2210%22%20fill%3D%22%23F0F0F0%22%2F%3E%3Cpath%20d%3D%22M13.5%207L7%2013.5M7%207L13.5%2013.5%22%20stroke%3D%22%23FF9933%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
  transition: all 300ms ease 0s;
}
.resume_cancel.on {
  opacity: 1;
}
.resume input[type='file'] {
  display: none;
}

.resume .eg {
  margin-top: 16px;
}
/* ==== 必須・任意の表示 ==== */
.form .form-table th::before {
  content: '任意';
  color: #fff;
  font-size: 14px;
  background-color: #bdbdbd;
  padding-block: 7px;
  padding-inline: 10px;
  margin-right: 0.8em;
}
.form .form-table .must th::before {
  content: '必須';
  color: var(--white);
  background-color: #f93;
}
/* ==== プラポリチェック ==== */
.check {
  width: fit-content;
  margin-top: 48px;
  margin-inline: auto;
}
.check label {
  cursor: pointer;
  padding-left: 1em;
}
input[type='checkbox'] {
  appearance: checkbox;
}
.check .link {
  display: block;
  padding-left: 2.1em;
}
/* ==== 戻るボタン ==== */
.return {
  color: #989898;
  width: fit-content;
  margin-top: 72px;
  margin-inline: auto;
}
.return span {
  text-decoration: underline;
}