@charset "UTF-8";
.registration {
  background: #FBFBFB url(../img/bg.webp) no-repeat top left/contain;
}

.pageTtl {
  background: none;
}

/* 基本設定 */
:root {
  --brand-red: #c60309;
  --text-main: #121212;
  --text-muted: #707070;
  --bg-page: #fbfbfb;
  --bg-cell: #f7f7f7;
  --border: #d8d8d8;
  /* 共通レイアウト変数 */
  --w-sub-label: 22%;     /* 入れ子の左列（共通の割合） */
  --cell-padding-x: 24px; /* セル左右パディング（PC基準） */
}

.job_description.wrap {
  padding-top: 0;
  padding-bottom: 130px;
}
@media screen and (max-width: 1200px) {
  .job_description.wrap {
    padding-top: 0;
  }
}
@media screen and (max-width: 750px) {
  .job_description.wrap {
    padding-top: 0;
    padding-bottom: 90px;
  }
}

/* タブパネルのスタイル */
.job_description .tabs__panel {
  margin: 48px 0 0;
}
@media screen and (max-width: 750px) {
  .job_description .tabs__btn:not(.is-active) {
    background-color: #E8E8E8;
    color: #888888;
  }
  .job_description .tabs__panel {
    margin-top: 16px;
  }
}

/* タブパネル内のフォーム部分 */
.tabs__panel .form_wrap {
  margin-top: 100px;
}
@media screen and (max-width: 750px) {
  .tabs__panel .form_wrap {
    margin-top: 80px;
  }
}

/* 準備中メッセージ */
.preparation-message {
  text-align: center;
  padding: 80px 20px;
  background-color: #F7F7F7;
  border-radius: 8px;
  margin: 48px 0 0;
}
.preparation-message p {
  font-size: 18px;
  color: #707070;
  margin: 0;
}
@media screen and (max-width: 750px) {
  .preparation-message {
    padding: 60px 20px;
    margin: 16px 0 0;
  }
  .preparation-message p {
    font-size: 16px;
  }
}

.muted { color: var(--text-muted); }
.small { font-size: 13px; }
.stack { display: grid; gap: 4px; }

/* 表スタイル（共通） */
table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

th, td {
  padding: 16px 24px;
  vertical-align: middle;
  background: var(--bg-cell);
  border-bottom: 1px solid var(--border);
}

/* 左見出しセル（赤） */
.requirements-table th[scope="row"] {
  background: var(--brand-red);
  color: #fff;
  text-align: center;
  font-weight: 700;
}

/* デスクトップ版レイアウト */

/* 内部の入れ子表 */
.inner-table th[scope="row"],
.inner-table tr > th {
  width: var(--w-sub-label);
  background: var(--bg-cell);
  color: var(--text-main);
  text-align: left;
  font-weight: 600;
}
.inner-table td { background: var(--bg-cell); }

/* 3カラムの内側表（割増賃金） */

/* モバイル版カード風表（未使用のため削除） */

td.td-no-padding, th.td-no-padding { padding: 0 !important; }
.inner-table--divider tr > th,
.inner-table--divider tr > td:not(:last-child) { border-right: 1px solid var(--border); }

.note {
  margin: 16px 0 0;
  color: var(--text-muted);
  font-size: 14px;
}

/* 注意書きの箇条書き */
ul.note {
  list-style: disc;
  padding-left: 1.2em;
}

/* PC向け: 幅固定＋table-layout:fixed でカラム幅を安定化 */
@media (min-width: 751px) {
  :root {
    --w-label: 22%;     /* 左ラベル（赤） */
    --w-content: 78%;   /* 右グレー（Figma幅） */
    --w-sub-label: 22%;  /* 入れ子の左列（PC割合） */
  }
  .requirements-table {
    width: 100%;
    margin: 0 auto;
    table-layout: fixed;
  }
  .requirements-table col.col-label { width: var(--w-label); }
  .requirements-table col.col-content { width: var(--w-content); }

  .inner-table {
    width: 100%;
    table-layout: fixed;
  }
  .inner-table col.col-sub-label { width: var(--w-sub-label); }

  .requirements-table th, .requirements-table td,
  .inner-table th, .inner-table td {
    overflow-wrap: anywhere;
  }
}

/* ----------------------------------------
   750px以下：表をカード型に縦積みにする
---------------------------------------- */
@media (max-width: 750px) {

  /* tableの行を「縦に並べる」レイアウトに変更 */
  .requirements-table tr {
    display: block;
    background: #fff;
  }

  /* th（赤）をブロック化 → 上にくる（外側のみ） */
  .requirements-table > tbody > tr > th[scope="row"] {
    display: block;
    text-align: left;
    border-bottom: 1px solid var(--border);
    background: var(--brand-red);
    color: #fff;
    padding: 12px 16px;
  }
  /* 入れ子テーブルのthは通常色（白にしない） */
  .requirements-table .inner-table th[scope="row"] {
    width: 30%;
    background: var(--bg-cell);
    color: var(--text-main);
  }
  .td-no-padding .inner-table--divider tr > td {
    width: 70%;
  }
  /* td（内容）を下に配置、背景グレーに */
  .requirements-table td {
    display: block;
    background: var(--bg-cell);
    padding: 16px;
  }

  /* colgroup の幅指定を無効化 */
  .requirements-table colgroup,
  .requirements-table col {
    display: none;
  }

  /* 入れ子テーブルの横幅崩れを防ぐ */
  .inner-table {
    width: 100%;
  }

  /* 入れ子テーブル内のth/tdも縦積みへ */
  .inner-table tr {
    display: block;
    border-bottom: 1px solid var(--border);
  }
  .inner-table th,
  .inner-table td {
    display: block;
    width: 100%;
    padding: 12px 16px;
    text-align: left;
    background: var(--bg-cell);
  }

  /* 注意書きrow-note（未使用のため削除） */

  /* td-no-padding 内の入れ子テーブルはPC同様の横並びに戻す */
  .td-no-padding .inner-table {
    width: 100%;
    table-layout: fixed;
  }
  .td-no-padding .inner-table tr {
    display: table-row;
    border-bottom: 1px solid var(--border);
  }
  .td-no-padding .inner-table th,
  .td-no-padding .inner-table td {
    display: table-cell;
    width: auto;
    text-align: left;
    background: var(--bg-cell);
  }
  /* 比率指定（スマホ時: th 30% / td 70%） */
  /* 縦罫線を復活 */
  .td-no-padding .inner-table--divider tr > th,
  .td-no-padding .inner-table--divider tr > td:not(:last-child) {
    border-right: 1px solid var(--border);
  }
  .td-no-padding .inner-table--divider tr > td { border-top: none; }
  /* 注意行はスマホでは1セル表示に（縦線なし・左詰め余白のみ） */
  /* row-note（未使用のため削除） */

}