/* ============================================
   ひすい歯科 採用サイト — 募集要項ページ専用スタイル
   recruit.css
   ※ .page-main / .breadcrumb / .page-title / アニメーションは common.css で定義
   モバイルファースト（ブレイクポイント: 751px）
   ============================================ */

/* ----------------------------------------
   キャッチコピー・リード文エリア
   ---------------------------------------- */

.recruit-catch {
  padding: 12vw 0 10vw;
  background-color: var(--color-white);
}

.recruit-catch__copy {
  font-family: 'Klee One', serif;
  font-size: var(--fs-h2-big-sp);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  line-height: 1.4;
  margin-bottom: 5vw;
  position: relative;
  /* 左端の縦アクセントライン（::before）から本文までの距離。
     カード左ボーダーと本文の関係（.sv-voice 等）と同じ値に揃える */
  padding-left: var(--pad-card-sp);
}

.recruit-catch__copy::before {
  content: '';
  display: block;
  width: 4px;
  height: 100%;
  background: linear-gradient(to bottom, var(--main-color), var(--main-color-hover));
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 2px;
}

.recruit-catch__lead {
  font-size: var(--fs-body-sp);
  color: var(--color-dark-gray);
  line-height: 1.9;
}

/* ----------------------------------------
   給与モデル（年収の見える化）
   ---------------------------------------- */

.salary-section {
  padding: 12vw 0 10vw;
  background-color: var(--color-bg);
}

/* テーブル全体ラッパー（横スクロール対応） */
.salary-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 4vw;
  border-radius: 8px;
  border: 1px solid var(--main-color);
  background-color: var(--color-white);
}

.salary-table {
  width: 100%;
  border-collapse: collapse;
}

.salary-table thead th {
  background-color: var(--main-color-pale);
  padding: 3vw;
  font-size: var(--fs-table-sp);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  text-align: left;
  border-bottom: 1px solid var(--color-gray);
}

.salary-table thead th:not(:last-child) {
  border-right: 1px solid var(--color-gray);
}

.salary-table tbody tr + tr {
  border-top: 1px solid var(--color-gray);
}

.salary-table tbody td {
  padding: 3.5vw 3vw;
  font-size: var(--fs-table-sp);
  color: var(--color-dark-gray);
  line-height: 1.6;
  vertical-align: middle;
}

.salary-table tbody td:not(:last-child) {
  border-right: 1px solid var(--color-gray);
}

/* 想定年収列 — 強調数字 */
.salary-table__num {
  font-size: var(--fs-h2-small-sp);
  font-weight: var(--fw-bold);
  color: var(--main-color);
  white-space: nowrap;
}

.salary-note {
  font-size: var(--fs-xs-sp);
  color: var(--color-light-brown);
  line-height: 1.8;
}

/* ----------------------------------------
   募集要項テーブル（仕様書 5章 .table / dt スタイル準拠）
   ---------------------------------------- */

.req-section {
  padding: 12vw 0 10vw;
  background-color: var(--color-white);
}

/* 外枠: メインカラーボーダー + 角丸8px + padding: 2px（仕様書 5章） */
.req-table {
  border: 1px solid var(--main-color);
  border-radius: 8px;
  padding: 2px;
  background-color: var(--main-color); /* ボーダー代わりに行間を色で埋める */
  overflow: hidden;
}

.req-table__row {
  background-color: var(--color-white);
  display: flex;
  flex-direction: column;
}

.req-table__row + .req-table__row {
  margin-top: 1px; /* 行区切り線 */
}

/* テーブルヘッダー dt: #DBF8F3 背景 + 角丸5px 上部（仕様書 5章） */
.req-table__label {
  background-color: var(--main-color-pale);
  padding: 2.5vw 4%;
  font-size: var(--fs-table-sp);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  line-height: 1.5;
  border-radius: 5px 5px 0 0;
}

.req-table__value {
  background-color: var(--color-white);
  padding: 3vw 4%;
  font-size: var(--fs-table-sp);
  color: var(--color-dark-gray);
  line-height: 1.75;
  border-radius: 0 0 5px 5px;
}

/* ----------------------------------------
   アクセスエリア
   ---------------------------------------- */

.access-section {
  padding: 12vw 0 10vw;
  background-color: var(--color-bg);
}

/* Googleマップ埋め込みエリア */
.access-map {
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 6vw;
  border: 1px solid var(--color-gray);
}

.access-map__iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  border: 0;
}

/* 駅からの道のり写真 */
.access-photo-grid {
  display: flex;
  flex-direction: column;
  gap: 4vw;
  margin-bottom: 6vw;
}

.access-photo-wrap {
  border-radius: 8px;
  overflow: hidden;
}

.access-photo {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  border-radius: 8px;
  transition: transform var(--transition-base);
}

.access-photo:hover {
  transform: scale(1.02);
}

.access-photo__caption {
  margin-top: 1.5vw;
  font-size: var(--fs-xs-sp);
  color: var(--color-light-brown);
  line-height: 1.6;
  display: flex;
  align-items: flex-start;
  gap: 0.4em;
}

.access-photo__caption .material-icons-round {
  font-size: 1.1em;
  color: var(--main-color);
  flex-shrink: 0;
  margin-top: 0.1em;
}

/* アクセス情報テキスト */
.access-info {
  background-color: var(--color-white);
  border-radius: 8px;
  padding: 5vw var(--pad-card-sp);
  border-left: 4px solid var(--main-color);
}

.access-info__item {
  display: flex;
  align-items: flex-start;
  gap: 2.5vw;
  font-size: var(--fs-body-sp);
  color: var(--color-dark-gray);
  line-height: 1.7;
}

.access-info__item + .access-info__item {
  margin-top: 3vw;
  padding-top: 3vw;
  border-top: 1px solid var(--color-gray);
}

.access-info__item .material-icons-round {
  font-size: 5.5vw;
  color: var(--main-color);
  flex-shrink: 0;
  margin-top: 0.1em;
}

/* ----------------------------------------
   選考プロセス（仕様書 5章 ol.flow li スタイル準拠）
   ---------------------------------------- */

.flow-section {
  padding: 12vw 0 10vw;
  background-color: var(--color-white);
}

.flow-section__lead {
  font-size: var(--fs-body-sp);
  color: var(--color-dark-gray);
  line-height: 1.9;
  margin-bottom: 8vw;
}

/* フロー本体（仕様書: ol.flow li — メインカラーボーダー + 角丸8px + 白背景 + 矢印装飾） */
.recruit-step {
  display: flex;
  flex-direction: column;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
}

.recruit-step__item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 4vw;
  background-color: var(--color-white);
  border: 1px solid var(--main-color);
  border-radius: 8px;
  padding: 5vw var(--pad-card-sp);
}

/* 矢印（最後の要素以外）*/
.recruit-step__item:not(:last-child) {
  margin-bottom: 10vw;
}

.recruit-step__item:not(:last-child)::after {
  content: 'arrow_downward';
  font-family: 'Material Icons Round';
  font-size: 6vw;
  color: var(--main-color);
  position: absolute;
  bottom: calc(-10vw / 2 - 0.5em);
  left: 50%;
  transform: translateX(-50%);
  line-height: 1;
}

/* ステップ番号バッジ */
.recruit-step__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 12vw;
  height: 12vw;
  min-width: 12vw;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--main-color), var(--main-color-hover));
  color: var(--color-white);
  font-family: var(--font-gothic);
  font-size: var(--fs-table-sp);
  font-weight: var(--fw-bold);
  letter-spacing: 0.03em;
  flex-shrink: 0;
}

.recruit-step__body {
  flex: 1;
}

.recruit-step__title {
  font-size: var(--fs-h3b-sp);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  margin-bottom: 1.5vw;
  line-height: 1.4;
}

.recruit-step__text {
  font-size: var(--fs-table-sp);
  color: var(--color-dark-gray);
  line-height: 1.8;
}

/* ゴールバッジ（内定ステップ） */
.recruit-step__item--goal {
  background: linear-gradient(135deg, var(--main-color-pale) 0%, var(--color-white) 100%);
  border-width: 2px;
}

.recruit-step__item--goal .recruit-step__num {
  background: linear-gradient(135deg, var(--color-brown), var(--color-light-brown));
}

/* フローの補足テキスト */
.flow-section__note {
  margin-top: 8vw;
  padding: 4vw var(--pad-card-sp);
  background-color: var(--main-color-pale);
  border-radius: 8px;
  text-align: center;
  font-size: var(--fs-body-sp);
  color: var(--color-text);
  line-height: 1.85;
}

.flow-section__note p + p {
  margin-top: 1em;
}

/* ----------------------------------------
   CTA（最終コンバージョン）
   ---------------------------------------- */

.recruit-cta {
  padding: 16vw 0;
  background: linear-gradient(150deg, var(--color-deep-green) 0%, var(--color-deep-green-dark) 100%);
  position: relative;
  overflow: hidden;
}

/* 装飾円 */
.recruit-cta::before,
.recruit-cta::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.recruit-cta::before {
  width: 60vw;
  height: 60vw;
  background-color: rgba(16, 208, 171, 0.08);
  top: -20%;
  right: -20%;
}

.recruit-cta::after {
  width: 40vw;
  height: 40vw;
  background-color: rgba(16, 208, 171, 0.05);
  bottom: -10%;
  left: -10%;
}

.recruit-cta__inner {
  position: relative;
  z-index: 1;
}

/* CTAキッカー。かつて Caveat では 12px → 20px の拡大が必要で、直下 .recruit-cta__copy
   （PC 26px）との比が 0.46 → 0.77 に動きコピーと競合したため差し戻していた。
   EB Garamond は拡大幅が小さく、PC 16px で比 0.62（SP 3.2/6.15vw = 0.52）に収まる。
   .guide-panel__en-label が 16/22px = 0.73 で許容済みのため安全側。 */
.recruit-cta__en {
  display: block;
  font-family: var(--font-en);
  /* --font-en はイタリックで使う。指定を落とすとロゴのローマン体と競合する */
  font-style: italic;
  font-weight: 500;
  font-size: 3.2vw;
  /* 深緑地の装飾キッカー。#10D0AB は 2.90:1、#16EDC3 で 4.06:1
     （→ variables.css の --color-deep-green） */
  color: var(--main-color-hover);
  letter-spacing: 0.06em;
  text-transform: none;
  margin-bottom: 3vw;
}

.recruit-cta__copy {
  font-family: 'Klee One', serif;
  font-size: var(--fs-h2-small-sp);
  color: var(--color-white);
  line-height: 1.7;
  margin-bottom: 5vw;
}

.recruit-cta__sub {
  font-size: var(--fs-body-sp);
  /* .75 は深緑地（L* 41）で 4.26:1 と AA を割る。.85 で 4.96:1 */
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.9;
  margin-bottom: 8vw;
}

.recruit-cta__sub strong {
  background: none;
}

/* ボタンラッパー */
.recruit-cta__btn-wrap {
  margin-bottom: 5vw;
}

/* CTA内の .btn.type-a は白背景 + メインカラーボーダーをそのまま利用 */

.recruit-cta__note {
  font-size: var(--fs-xs-sp);
  /* .5 は深緑地（L* 41）で 2.90:1。AA に必要な .8（4.58:1）まで上げる。
     .recruit-cta__sub（.85）との差は不透明度ではなくサイズ（--fs-xs-sp / --fs-body-sp）で作る */
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.8;
  text-align: left;
}

/* ----------------------------------------
   PC（751px 以上）
   ---------------------------------------- */

@media (min-width: 751px) {

  /* キャッチ */
  .recruit-catch {
    padding: 80px 0 60px;
  }

  .recruit-catch__copy {
    font-size: 2.5rem;
    margin-bottom: 28px;
    padding-left: 28px;
  }

  .recruit-catch__lead {
    font-size: var(--fs-body);
    max-width: 700px;
  }

  /* 給与モデル */
  .salary-section {
    padding: 80px 0;
  }

  .salary-table-wrap {
    margin-bottom: 16px;
  }

  .salary-table thead th {
    padding: 14px 24px;
    font-size: var(--fs-table);
  }

  .salary-table tbody td {
    padding: 16px 24px;
    font-size: var(--fs-table);
  }

  .salary-table__num {
    font-size: var(--fs-h2-small);
  }

  .salary-note {
    font-size: var(--fs-xs);
  }

  /* 募集要項 */
  .req-section {
    padding: 80px 0;
  }

  /* PC: dt と dd を横並びに */
  .req-table__row {
    flex-direction: row;
    align-items: stretch;
  }

  .req-table__label {
    width: 220px;
    flex-shrink: 0;
    padding: 16px 20px;
    border-radius: 0; /* 横並びは角丸不要 */
    border-right: 1px solid var(--main-color);
    display: flex;
    align-items: center;
  }

  /* 最初の行の dt 上部のみ角丸 */
  .req-table__row:first-child .req-table__label {
    border-radius: 5px 0 0 0;
  }

  /* 最後の行の dt 下部のみ角丸 */
  .req-table__row:last-child .req-table__label {
    border-radius: 0 0 0 5px;
  }

  .req-table__value {
    flex: 1;
    padding: 16px 24px;
    border-radius: 0;
    display: flex;
    align-items: center;
  }

  .req-table__label,
  .req-table__value {
    font-size: var(--fs-table);
  }

  /* アクセス */
  .access-section {
    padding: 80px 0;
  }

  .access-map {
    margin-bottom: 40px;
  }

  .access-map__iframe {
    aspect-ratio: 16 / 5;
  }

  .access-photo-grid {
    flex-direction: row;
    gap: 24px;
    margin-bottom: 40px;
  }

  .access-photo-wrap {
    flex: 1;
  }

  .access-photo {
    aspect-ratio: 4 / 3;
  }

  .access-photo__caption {
    margin-top: 10px;
    font-size: var(--fs-xs);
  }

  .access-info {
    padding: 28px var(--pad-card-pc);
  }

  .access-info__item {
    gap: 12px;
    font-size: var(--fs-body);
  }

  .access-info__item + .access-info__item {
    margin-top: 16px;
    padding-top: 16px;
  }

  .access-info__item .material-icons-round {
    font-size: 1.3rem;
  }

  /* 選考フロー */
  .flow-section {
    padding: 80px 0;
  }

  .flow-section__lead {
    font-size: var(--fs-body);
    margin-bottom: 50px;
  }

  /* PC: 4ステップを横並びに */
  .recruit-step {
    flex-direction: row;
    align-items: stretch;
    gap: 0;
  }

  .recruit-step__item {
    flex: 1;
    flex-direction: column;
    gap: 20px;
    padding: 28px var(--pad-card-pc);
  }

  .recruit-step__item:not(:last-child) {
    margin-bottom: 0;
    margin-right: 36px;
  }

  /* PC: 矢印を右向きに */
  .recruit-step__item:not(:last-child)::after {
    content: 'arrow_forward';
    font-size: 1.4rem;
    bottom: auto;
    top: 50%;
    left: auto;
    right: calc(-36px / 2 - 0.5em);
    transform: translateY(-50%);
  }

  .recruit-step__num {
    width: 52px;
    height: 52px;
    min-width: 52px;
    font-size: var(--fs-table);
  }

  .recruit-step__title {
    font-size: var(--fs-h3b);
    margin-bottom: 8px;
  }

  .recruit-step__text {
    font-size: var(--fs-table);
  }

  .flow-section__note {
    margin-top: 40px;
    padding: 24px var(--pad-card-pc);
    font-size: var(--fs-body);
  }

  /* CTA */
  .recruit-cta {
    padding: 120px 0;
  }

  .recruit-cta::before {
    width: 500px;
    height: 500px;
    top: -150px;
    right: -150px;
  }

  .recruit-cta::after {
    width: 320px;
    height: 320px;
    bottom: -80px;
    left: -80px;
  }

  .recruit-cta__en {
    /* 直下 .recruit-cta__copy（1.625rem = 26px）との比 0.62 */
    font-size: 1rem;
    margin-bottom: 14px;
  }

  .recruit-cta__copy {
    font-size: 1.625rem;
    margin-bottom: 20px;
  }

  .recruit-cta__sub {
    font-size: var(--fs-body);
    margin-bottom: 40px;
    max-width: 600px;
  }

  .recruit-cta__btn-wrap {
    margin-bottom: 20px;
  }

  .recruit-cta__note {
    font-size: var(--fs-xs);
  }
}

/* .font-klee 上書き（common.css より後に読み込まれるため詳細度で競合回避） */
.recruit-catch__copy.font-klee {
  font-family: 'Klee One', serif;
}