@charset "utf-8";
/* ============================================================
   採用サイト（/recruit/ 配下）共通スタイル

   ・支給された4ファイル（top/talent/data/faq）に同一内容で重複していたCSSを1本に集約したもの。
   ・配色・書体・ボタン・リンク挙動は駅探コーポレートサイトのVI（css/common.css）に合わせてある。
     支給ファイル側の値からの読み替えは下の「VI対応表」を参照。
   ・ヘッダー・フッター・ロゴは header.php / footer.php（コーポレート共通）を使うため、
     支給ファイルにあった .site-header / footer.site-footer / .brand / .skip-link は移植していない。
   ・ダークモード指定（prefers-color-scheme: dark）はコーポレートサイトが非対応のため除去した。
   ・common.css の `* { margin:0; padding:0 }` によりブラウザ既定マージンが消えるため、
     支給ファイルが既定マージンに依存していた p / h3 等は本ファイルで明示的に補っている（§2）。

   VI対応表（支給ファイル → コーポレート）
     --primary       #1F5DCA → #236BAC   コーポレート主色
     --primary-dark  #12336B → #17507F   主色の暗色（CTA帯の背景）
     --accent        #FF6B4A → #0098DB   コーポレート副色（橙は駅探VIに存在しないため置換）
     --text          #1B2333 → #3E3B39   common.css body の文字色
     --muted         #5B6472 → #6E6A67
     --bg-soft       #F4F7FE → #F2F7FB
     --border        #E3E8F2 → #DCE3E9
     --amber-*       橙系の注意ボックス → 副色 #0098DB 系に置換
     書体            Noto Sans JP 等 → "Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo
     コンテンツ幅    1080px → 1000px（common.css の .inner_wrap に統一）
     ボタン角丸      999px → 5px（common.css の .btn に統一）
     カード角丸      16px  → 8px
   ============================================================ */

/* ------------------------------------------------------------
   §1 デザイントークン
   .recruitPage にスコープし、サイト全体へ影響させない
   ------------------------------------------------------------ */
.recruitPage {
  --primary: #236BAC;
  --primary-dark: #17507F;
  --accent: #0098DB;
  --bg: #FFFFFF;
  --bg-soft: #F2F7FB;
  --text: #3E3B39;
  --muted: #6E6A67;
  --border: #DCE3E9;
  --amber-bg: #EFF7FC;
  --amber-border: #7FC4E5;
  --amber-text: #14567A;

  /* FAQの開閉にかかる時間。中身の高さ・「＋」マークの回転・枠色を
     ここ1箇所で揃える。バラバラだと各パーツが別々に動いて見える。 */
  --faq-duration: 0.28s;

  color: var(--text);
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  line-height: 1.75;

  /* 日本語の折り返し制御。
     common.css の body に `word-wrap: break-word` があり、そのままだと
     「29.9億円」「1,000万UU」のような英数字混じりの語が途中で割れる。
     ここで打ち消したうえで、句読点・小書き文字の禁則を厳格側に寄せる。 */
  word-break: normal;
  overflow-wrap: normal;
  line-break: strict;
}

/* ------------------------------------------------------------
   §2 既定マージンの補完
   common.css の `*{margin:0;padding:0}` で消える分を、支給ファイルの
   見え方に合わせて戻す。ここを外すと段落間が詰まって表示が崩れる。
   ------------------------------------------------------------ */
.recruitPage p {
  font-size: 15.5px;
  line-height: 1.9;
  letter-spacing: 0;
  text-indent: 0; /* .mainContent p の字下げ規則を持ち込まないため明示 */
  margin: 0 0 1em;
  text-wrap: pretty; /* 最終行が1文字だけ残るのを避ける（対応ブラウザのみ） */
}
.recruitPage p:last-child { margin-bottom: 0; }
.recruitPage h1,
.recruitPage h2,
.recruitPage h3,
.recruitPage h4 {
  line-height: 1.45;
  text-wrap: balance; /* 折り返し時に各行の長さを均す。見出しの尻切れ1行を防ぐ */
}
.recruitPage a { color: inherit; text-decoration: none; transition: 0.3s; }
.recruitPage a:hover { opacity: 0.8; } /* common.css のリンク挙動に統一 */
/* 本文中の文中リンク（class を持たない a）はリンクと分かるように主色＋下線にする。
   支給ファイルは色も下線も付けない指定だったが、2026-06-01 のIR株主総会カードPDFリンク
   改善と同じ理由（周囲の文字と区別が付かない）で、駅探サイトの作法に合わせて付けている。
   ボタン（.cta-btn）やナビはクラスを持つため対象外。 */
.recruitPage section a:not([class]) { color: #236BAC; text-decoration: underline; }
.recruitPage img { max-width: 100%; display: block; }
.recruitPage ul { list-style: none; }
.recruitPage * { box-sizing: border-box; }

.recruitPage .wrap {
  max-width: 1000px; /* common.css の .inner_wrap と同幅 */
  margin-inline: auto;
  padding-inline: 20px;
}

/* 本文の左右にゆとりを持たせる量。2cm＝75.6px（CSSの1cm＝96px÷2.54＝37.8px）。
   画面が狭いときは箱幅の8%まで自動で縮むので、スマートフォンでも本文が痩せない。
   使うのは「枠と背景を持つ箱」の内側だけ（下の .quote）。§2-2 の方針を参照。

   min() 非対応の古いブラウザ対策で、既定値は素の30px（2026-07-28版と同じ）にしておく。
   padding: 36px var(--text-gutter) の形で使うため、var() の展開結果が不正になると
   padding の宣言ごと無効（＝余白ゼロ）に落ちてしまう。前の行に保険の padding を
   書いても上書きされて効かないので、変数側を @supports で切り替える。 */
.recruitPage { --text-gutter: 30px; }
@supports (width: min(2cm, 8%)) {
  .recruitPage { --text-gutter: min(2cm, 8%); }
}

/* ------------------------------------------------------------
   §2-2 幅の方針（2026-07-29 変更）
   以前は本文 780px / 引用箱 820px と max-width で箱ごと縮めて左寄せにしていたが、
   全幅（960px）のカードと右端が揃わず、ページの端がバラバラに見えていた。

   ・裸のテキスト（見出し・リード・段落・リスト）は 960px の全幅にそろえる。
     コーポレートの common.css も .inner_wrap（内側960px）に対して
     .mainContent p に max-width を持たせておらず、本文は全幅で流している。
     採用サイトだけ 780px に縮めていたのがサイトの作法から外れていた。
   ・左右に余白を入れるのは「枠と背景を持つ箱」の内側だけにする（= .quote）。
     箱があれば内側の余白は意味を持つが、裸のテキストに余白を入れると
     見出しと段落の左端がずれ、位置がずれているようにしか見えない。
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   §3 アクセシビリティ・演出
   ------------------------------------------------------------ */
.recruitPage a:focus-visible,
.recruitPage button:focus-visible,
.recruitPage summary:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
.recruitPage .visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
/* スクロールに応じたフェードイン。js/recruit-site.js が is-visible を付与する */
.recruitPage .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  /* JSが動かなかったときの保険。
     初期状態が opacity:0 なので、js/recruit-site.js が読み込めない（404・エラー・
     ブロック）と本文が透明のまま残り、中身のないページになってしまう。
     JSが動くと <html> に recruit-js が付いてこの保険は無効になるため、
     付かなかったときだけ3秒後に必ず表示する。 */
  animation: recruitRevealSafety 0.4s ease 3s forwards;
}
html.recruit-js .recruitPage .reveal { animation: none; }
.recruitPage .reveal.is-visible { opacity: 1; transform: translateY(0); }
@keyframes recruitRevealSafety {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes recruitFloatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.recruitPage .float-badge { animation: recruitFloatY 3.2s ease-in-out infinite; }
/* 動きを減らす設定の打ち消しは、このファイルの末尾（§12）にまとめてある。
   メディアクエリは詳細度を上げないため、打ち消したい指定より後ろに書く必要がある。 */

/* ------------------------------------------------------------
   §4 採用サイト内ナビゲーション
   コーポレートのヘッダーナビ（hover時 #236BAC・下線なし）の作法に合わせた
   セクションタブ。外部リンクには common.css と同じ ico_outlink.png を付ける。
   ------------------------------------------------------------ */
/* パンくず。ページタイトル帯を使わないぶん、上下に余白を持たせる */
.recruitPage > nav.breadcrumb { padding-block: 18px 12px; }

.recruitNav {
  border-block-end: 1px solid #DCE3E9;
  background: #FFF;
}
.recruitNav ul {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  list-style: none;
}
/* 通常項目＝タブ。現在のページには WordPress が aria-current="page" を付ける */
.recruitNav ul li a {
  display: block;
  padding: 16px 18px;
  font-size: 14px;
  font-weight: bold;
  color: #3E3B39;
  border-block-end: 3px solid transparent;
  white-space: nowrap;
  transition: 0.3s;
}
.recruitNav ul li a:hover { color: #236BAC; opacity: 1; }
.recruitNav ul li a[aria-current="page"],
.recruitNav ul li.current-menu-item a {
  color: #236BAC;
  border-block-end-color: #236BAC;
}
/* メニュー項目に CSS クラス recruitNav-cta を付けた項目だけボタン体裁にし、右端へ寄せる */
.recruitNav ul li.recruitNav-cta { margin-inline-start: auto; }
.recruitNav ul li.recruitNav-cta a {
  padding: 10px 20px;
  border: 2px solid #236BAC;
  border-radius: 5px;
  background-color: #236BAC;
  color: #FFF;
  transition: 0.5s;
}
.recruitNav ul li.recruitNav-cta a:hover {
  background-color: #FFF;
  color: #236BAC;
  opacity: 1;
}
.recruitNav ul li.recruitNav-cta a:after {
  display: inline-block;
  content: "";
  margin-left: 6px;
  width: 17px;
  height: 12px;
  background-image: url("../images/common/ico_outlink_wh.png");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 17px 12px;
}
.recruitNav ul li.recruitNav-cta a:hover:after {
  background-image: url("../images/common/ico_outlink.png");
}

/* ------------------------------------------------------------
   §5 ヒーロー・セクション見出し
   ------------------------------------------------------------ */
.recruitPage .hero {
  padding-block: 64px 56px;
  background: linear-gradient(180deg, var(--bg-soft), var(--bg) 85%);
}
.recruitPage .kicker {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--primary);
  background: #E6EEF6;
  padding: 5px 14px;
  border-radius: 999px;
  margin-block-end: 18px;
}
.recruitPage .hero h1 {
  font-size: clamp(28px, 4.4vw, 44px);
  line-height: 1.35;
  margin: 0 0 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.recruitPage .hero p.lead {
  font-size: 16.5px;
  color: var(--muted);
  margin: 0;
  /* max-width は持たせない。h1 と右端をそろえるため（§2-2） */
}
.recruitPage section {
  padding-block: 52px;
  border-block-end: 1px solid var(--border);
}
.recruitPage section:last-of-type { border-block-end: none; }
.recruitPage section.soft { background: var(--bg-soft); }
.recruitPage h2.h2 {
  font-size: clamp(20px, 2.6vw, 28px);
  font-weight: 800;
  margin: 0 0 8px;
  color: var(--text);
}
.recruitPage p.sub {
  color: var(--muted);
  font-size: 15.5px;
  margin: 0 0 28px;
}

/* ------------------------------------------------------------
   §6 カード・グリッド
   ------------------------------------------------------------ */
/* 列数は固定せず auto-fit にする。列を固定すると中間の画面幅でカードが痩せ、
   「2003年1月15日」のような値が不自然な位置で折り返すため。
   1000px幅では従来どおり cols-3=3列 / cols-4=4列になり、狭くなると自動で段数が減る。 */
.recruitPage .grid { display: grid; gap: 18px; }
.recruitPage .grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.recruitPage .grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.recruitPage .grid.cols-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
/* 4列グリッドの直後に置かれた3列グリッド（データで見る駅探の下段）は、
   上段とカード幅が揃わないとガタついて見えるので同じ列幅にする。
   auto-fit だと余った1列が潰れてカードが広がってしまうため auto-fill を使う。 */
.recruitPage .grid.cols-4 + .grid.cols-3 {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.recruitPage .card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 24px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.recruitPage .card.hoverable:hover,
.recruitPage a:hover .card {
  transform: translateY(-4px);
  box-shadow: 0 16px 28px -12px rgba(35, 107, 172, 0.22);
  border-color: #A7C3DC;
}
.recruitPage .card .num {
  /* 支給ファイルは inline-size:30px の固定幅だったが、中身は「01」〜「05」だけでなく
     「STEP 1」も入るため、固定幅だと箱の中で "STEP" と "1" に折り返してしまっていた。
     最小30px（＝「01」なら正方形）を保ちつつ、長い中身では横に伸びるようにする。 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 30px;
  block-size: 30px;
  padding-inline: 8px;
  box-sizing: border-box;
  white-space: nowrap;
  border-radius: 9px;
  background: #E6EEF6;
  color: var(--primary);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.02em;
  margin-block-end: 12px;
}
.recruitPage .card h3 { font-size: 16px; margin: 0 0 8px; font-weight: 800; color: var(--text); }
/* 見出しだけを持つカード（トップの「事業の広がり」）は、最長の
   「社会インフラ・公共ソリューション事業」が全角換算 18em。
   3列時のカード内側 約258px に収めるには 258÷18 ≒ 14.3px が上限なので 14px とする。 */
.recruitPage .card > h3:only-child { font-size: 14px; margin: 0; }
.recruitPage .card p { font-size: 15px; color: var(--muted); margin: 0; }

/* 数値表示（データで見る駅探） */
.recruitPage .stat {
  text-align: start;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
.recruitPage .card.stat { padding: 22px 15px; } /* 値・ラベルを1行に収めるため左右を詰める */
.recruitPage .stat .val {
  /* 支給ファイルは clamp(24px,3vw,34px) だったが、カード内側幅（4列時 約190px）に対して
     大きすぎ、値が途中で折り返していた。
     このページで最も長い値は「男性67％・女性33％」で全角換算 9.0em。
     4列時のカード内側 約190px に収めるには 190 ÷ 9.0 ≒ 21px が上限なので 20px とする。
     値の文字数を増やす場合はこの計算をやり直すこと。 */
  font-size: 20px;
  font-weight: 800;
  color: var(--primary);
  line-height: 1.4;
  letter-spacing: -0.01em;
  word-break: keep-all;      /* 「男性67％・女性33％」を語の途中で折らない */
  overflow-wrap: break-word; /* それでも収まらない極端な幅のときだけ折る（はみ出し防止） */
}
.recruitPage .stat .lbl {
  /* 最長のラベル「（2026年3月末・グループ連結）」が全角換算 14.5em。
     カード内側 約196px に収めるには 196 ÷ 14.5 ≒ 13.5px が上限なので 13px とする。 */
  font-size: 13px;
  color: var(--muted);
  margin-block-start: 8px;
  line-height: 1.65;
  text-wrap: balance; /* それでも折り返す場合は行長を均す */
}

/* ------------------------------------------------------------
   §7 引用・タグ・注意書き・リスト
   ------------------------------------------------------------ */
.recruitPage .quote {
  /* 罫の太さはコーポレートの見出し（common.css の div.mainContent h2 の
     border-left: 5px solid #236BAC）に合わせる */
  border-inline-start: 5px solid var(--primary);
  background: var(--bg-soft);
  /* 箱は全幅（960px）のまま、中の文字を左右2cm内側に置く（§2-2）。
     左右だけ75.6pxにして上下が26pxのままだと箱が横長に潰れて見えるため、
     上下も36pxに広げて釣り合わせている（比率2.9倍→2.1倍）。 */
  padding: 36px var(--text-gutter);
  border-radius: 0 8px 8px 0;
  /* この指定が効くのはビジョン（箱の直下に文字を置いている方）だけ。
     代表メッセージの本文は下の .quote p が16pxを持つため影響しない。
     ビジョンは1文のステートメントなので、本文より一段大きく置く。 */
  font-size: 18px;
}
/* 代表メッセージのように長文が入る場合。支給ファイルでは段落が <br><br> で
   表現され、文と文の間の改行がブラウザ上で半角スペースとして出ていたため、
   本文を <p> に組み直してある（文字は変えていない）。 */
.recruitPage .quote p {
  font-size: 16px;
  line-height: 2;
  margin: 0 0 1.1em;
}
.recruitPage .quote p:last-child { margin-bottom: 0; }
.recruitPage .quote .sign {
  margin-block-start: 1.6em;
  text-align: right;
  font-size: 15px;
  font-weight: bold;
  color: var(--primary);
}
.recruitPage .tag {
  display: inline-block;
  background: var(--bg-soft);
  color: var(--text);
  border: 1px solid var(--border);
  font-size: 12.5px;
  font-weight: 700;
  padding: 6px 13px;
  border-radius: 999px;
  margin: 0 6px 6px 0;
}
.recruitPage .callout {
  background: var(--amber-bg);
  border: 1.5px dashed var(--amber-border);
  border-radius: 8px;
  padding: 22px 26px;
}
.recruitPage .callout .badge {
  display: inline-block;
  background: var(--amber-border);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 999px;
  margin-block-end: 10px;
}
.recruitPage .callout p,
.recruitPage .callout li { color: var(--amber-text); }
.recruitPage ul.list { margin: 0; padding-inline-start: 0; list-style: none; }
.recruitPage ul.list li {
  position: relative;
  padding-inline-start: 22px;
  margin-block-end: 10px;
  font-size: 15.5px;
  line-height: 1.8;
  text-wrap: pretty;
}
.recruitPage ul.list li::before {
  content: "\25B8";
  position: absolute;
  inset-inline-start: 0;
  color: var(--primary);
  font-weight: 700;
}

/* ------------------------------------------------------------
   §8 ステップ・タイムライン・グラフ
   ------------------------------------------------------------ */
.recruitPage .funnel {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  margin-block: 28px;
}
.recruitPage .funnel .step {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 13.5px;
  color: var(--muted);
}
.recruitPage .funnel .step .n {
  inline-size: 26px;
  block-size: 26px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}
.recruitPage .funnel .arrow { color: var(--border); font-weight: 400; }
.recruitPage .timeline { display: flex; flex-direction: column; gap: 0; }
.recruitPage .timeline .item {
  display: flex;
  gap: 18px;
  padding-block: 14px;
  border-block-end: 1px solid var(--border);
}
.recruitPage .timeline .item:last-child { border-block-end: none; }
.recruitPage .timeline .date {
  inline-size: 130px;
  flex: none;
  font-weight: 800;
  color: var(--primary);
  font-size: 13.5px;
}
.recruitPage .timeline .desc { font-size: 15px; }
.recruitPage .chart {
  display: flex;
  align-items: flex-end;
  gap: 28px;
  block-size: 220px;
  padding-block-start: 20px;
}
.recruitPage .chart .bar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1;
}
.recruitPage .chart .bar {
  inline-size: 100%;
  max-inline-size: 64px;
  background: linear-gradient(180deg, var(--primary), #6FA3CC);
  border-radius: 8px 8px 0 0;
}
.recruitPage .chart .val { font-size: 12.5px; font-weight: 800; color: var(--primary); }
.recruitPage .chart .yr { font-size: 12px; color: var(--muted); }

/* ------------------------------------------------------------
   §9 アコーディオン（FAQ）
   ------------------------------------------------------------ */
.recruitPage details.faq {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 22px;
  margin-block-end: 14px;
  /* 開いたときの枠色（下の [open]）を、中身が開く動きと同じ時間でなじませる */
  transition: border-color var(--faq-duration) ease;
  /* ::details-content の高さを 0 ↔ auto で遷移させるために、
     キーワード値（auto）の補間を許可する。これがないと高さが瞬間で切り替わる。
     継承する性質なので、擬似要素側ではなくここで指定する。 */
  interpolate-size: allow-keywords;
}
.recruitPage details.faq[open] { border-color: var(--primary); }
/* 開閉のアニメーション。
   ::details-content は details の中身（summary 以外）を指す擬似要素。
   未対応のブラウザではこのブロックが丸ごと無視され、従来どおり瞬時に開く。
   表示自体は壊れないので、対応環境だけが動きを受け取る形にしている。 */
.recruitPage details.faq::details-content {
  block-size: 0;
  /* 閉じている間の中身を隠す。hidden ではなく clip にして、開いた状態で
     回答内リンクのフォーカス枠（outline 3px + offset 2px）が切れないよう
     4px だけ描画のはみ出しを許す。未対応環境では hidden と同じ挙動になる。 */
  overflow: clip;
  overflow-clip-margin: 4px;
  /* content-visibility は途中の値を持たない（離散値）ので allow-discrete を付ける。
     これがないと閉じる瞬間に中身が消え、閉じる動きが出ない。 */
  transition: block-size var(--faq-duration) ease,
              content-visibility var(--faq-duration) allow-discrete;
}
.recruitPage details.faq[open]::details-content { block-size: auto; }
.recruitPage details.faq summary {
  cursor: pointer;
  padding-block: 16px;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.6;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  text-wrap: pretty;
}
.recruitPage details.faq summary::-webkit-details-marker { display: none; }
.recruitPage details.faq summary::after {
  content: "+";
  font-size: 20px;
  color: var(--primary);
  font-weight: 400;
  /* 中身が開く時間と揃える。以前は 0.2s で、中身が瞬時に開くのに
     マークだけ遅れて回っていた */
  transition: transform var(--faq-duration) ease;
  flex: none;
}
.recruitPage details.faq[open] summary::after { transform: rotate(45deg); }
.recruitPage details.faq .a {
  padding-block-end: 18px;
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.9; /* 回答は長文になるため本文の p と行間を揃える */
  text-wrap: pretty;
}
.recruitPage details.faq.tbd summary,
.recruitPage details.faq.tbd .a { color: var(--amber-text); }

/* ------------------------------------------------------------
   §10 ページ末CTA
   ------------------------------------------------------------ */
.recruitPage .pagefoot-cta {
  background: var(--primary-dark);
  border-radius: 8px;
  padding: 44px;
  text-align: center;
  color: #fff;
}
.recruitPage .pagefoot-cta h2 { color: #fff; }
.recruitPage .pagefoot-cta p { color: #D3E3EF; }
.recruitPage .cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 2px solid #FFF;
  border-radius: 5px;
  background: transparent;
  color: #fff !important;
  font-weight: bold;
  font-size: 14px;
  padding: 14px 28px;
  transition: 0.5s;
}
.recruitPage .cta-btn:hover {
  background: #FFF;
  color: var(--primary-dark) !important;
  opacity: 1;
}
.recruitPage .cta-btn.large { font-size: 16px; padding: 16px 34px; }
/* CTA帯の外に置かれた場合はコーポレートの .btn と同じ塗りボタンにする */
.recruitPage .cta-btn.ghost {
  background: #236BAC;
  border-color: #236BAC;
  color: #FFF !important;
}
.recruitPage .cta-btn.ghost:hover { background: #FFF; color: #236BAC !important; }

/* ------------------------------------------------------------
   §11 レスポンシブ
   ナビの折り返しは common.css のヘッダー切替と同じ 640px、
   カードグリッドの段組解除は支給ファイルどおり 860px を維持する。
   ------------------------------------------------------------ */
@media screen and (max-width: 860px) {
  /* cols-3 / cols-4 は auto-fit が段数を自動調整するため、ここでは触らない */
  .recruitPage .grid.cols-2 { grid-template-columns: 1fr; }
  .recruitPage .funnel { flex-direction: column; align-items: flex-start; gap: 10px; }
  .recruitPage .funnel .arrow { display: none; }
  .recruitPage .hero { padding-block: 44px 36px; }
  .recruitPage section { padding-block: 38px; }
}
@media screen and (max-width: 640px) {
  /* 1〜2列になりカードが広がるので、値を大きく戻す */
  .recruitPage .stat .val { font-size: 24px; }
  .recruitNav ul { flex-wrap: wrap; }
  .recruitNav ul li a { padding: 12px 12px; font-size: 13px; }
  /* CTAは行を分けて全幅に。タブは折り返して2段になる */
  .recruitNav ul li.recruitNav-cta {
    flex-basis: 100%;
    margin-inline-start: 0;
    margin-block: 4px 10px;
  }
  .recruitNav ul li.recruitNav-cta a {
    display: block;
    text-align: center;
    padding: 12px 20px;
  }
  .recruitPage .pagefoot-cta { padding: 32px 22px; }
  .recruitPage .cta-btn.large { width: 100%; font-size: 14px; padding: 14px 22px; }
}
@media screen and (max-width: 480px) {
  .recruitPage .card { padding: 20px; }
  /* 左右は --text-gutter が8%まで縮むので触らない。上下だけ詰める */
  .recruitPage .quote { padding: 22px var(--text-gutter); font-size: 16.5px; }
  .recruitPage .quote p { font-size: 15.5px; line-height: 1.95; }
}

/* ------------------------------------------------------------
   §12 動きを減らす設定（prefers-reduced-motion: reduce）
   OS側で「視差効果を減らす／アニメーションを減らす」を有効にしている環境では、
   このページの動きをすべて止める。

   **必ずファイルの末尾に置くこと。**
   メディアクエリは詳細度を上げないため、同じ詳細度の指定どうしでは
   後に書いた方が勝つ。2026-07-28版はこのブロックが §3 にあり、
   その後ろの .float-badge のアニメーション本体（§3末尾）と
   .card のトランジション（§6）を打ち消せていなかった。
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  /* フェードイン。JSが動かなかったときの保険（recruitRevealSafety）も止める */
  .recruitPage .reveal {
    opacity: 1;
    transform: none;
    transition: none;
    animation: none;
  }
  .recruitPage .float-badge { animation: none; }
  /* カードの浮き上がり */
  .recruitPage .card,
  .recruitPage .card.hoverable:hover,
  .recruitPage a:hover .card { transform: none; transition: none; }
  /* FAQの開閉（中身の高さ・枠色・「＋」マークの回転）。
     動きは止まるが、開閉そのものは従来どおり動く */
  .recruitPage details.faq,
  .recruitPage details.faq::details-content,
  .recruitPage details.faq summary::after { transition: none; }
  /* リンク・ボタンの色変化 */
  .recruitPage a,
  .recruitPage .cta-btn,
  .recruitNav ul li a,
  .recruitNav ul li.recruitNav-cta a { transition: none; }
}