/* --------------------------------------------------------------
   ブランドカラーパレット（メインカラー 4 色）
   トップページ（v3）のトーンに全ページを合わせる：ピンク・青は v3 の
   --home-pink / --home-blue と同値にし、旧トーン（#e96bb0 / #4197cb）は使わない。
   - --color-primary      : #f0569f（ピンク）= メインアクション・主要 CTA（= --home-pink）
   - --color-info         : #4f7df9（青）    = 情報・リンク・フォーカス・セクションヘッダー（= --home-blue）
   - --color-success      : #70d44b（緑）    = 公開中・成功・ポジティブ表示
   - --color-accent       : #ffdd00（黄）    = 注目・ハイライト・警告
   それ以外の色（無彩色 / グレー）は薄い陰影として併用
   -------------------------------------------------------------- */
:root {
  --color-primary: #f0569f;
  --color-primary-hover: #d93f88;
  --color-info: #4f7df9;
  --color-info-hover: #3b63d8;
  --color-success: #70d44b;
  --color-success-hover: #5cba37;
  --color-accent: #ffdd00;
  --color-accent-hover: #e6c700;

  --color-text-primary: #2d3436;
  --color-text-secondary: #6c757d;
  --color-text-muted: #a0aec0;
  /* カード枠は v3（トップページのカード #e6e3f5）に合わせた紫寄りのグレー */
  --color-border: #e6e3f5;
  --color-bg-soft: #f7f8fa;

  /* トップページ（リニューアル版）・フッターのブランドトーン
     - ネイビー: ヘッダー / フッター / 企業特集セクションの地色
     - バイオレット〜ブルー: 見出しアクセント・グラデーションボタン
     - ピンク: 主要 CTA（ログイン / 無料登録） */
  --home-navy: #221c50;
  --home-navy-deep: #161138;
  --home-violet: #7b6cf6;
  --home-blue: #4f7df9;
  --home-pink: #f0569f;
  --home-pink-hover: #d93f88;
  --home-lavender: #f1eefb;
  --home-grad: linear-gradient(90deg, #4f7df9 0%, #8b5cf6 100%);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  /* トップページ（v3）のラベンダートーンに合わせた地色 */
  background-color: #f7f5fc;
  color: #2d3436;
  line-height: 1.6;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ボタン要素のブラウザ UA グラデ・装飾を全画面で無効化（.btn 未付与のものも含めて
   個別クラスの background-color が必ず見えるようにする） */
input[type="submit"],
input[type="reset"],
input[type="button"],
button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: none;
  font-family: inherit;
}

/* 本文幅は共通ヘッダー・トップページ（.home-container = 1120px）と揃え、
   ヘッダーと本文の左右端がずれないようにする */
.container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ===== ユーザー向け下層ページ共通（v3） ===== */

/* ヘッダー下の本文コンテナ余白（旧: 各ビューの inline style で指定していた） */
.page-main {
  padding-top: 40px;
  padding-bottom: 60px;
}

/* ページタイトル（トップページの .home-section-title と同じ v3 トーン） */
.page-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--home-navy);
  margin-bottom: 24px;
}

/* 見出し先頭の菱形飾り（トップページと同じグラデーション文字） */
.page-title__deco {
  display: inline-block;
  margin-right: 10px;
  font-size: 0.7em;
  vertical-align: 0.15em;
  background: var(--home-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* タイトル行の右側にボタンを並べるヘッダー行 */
.page-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 32px;
}

.page-header-row .page-title {
  margin-bottom: 0;
}

.btn--sm {
  padding: 6px 14px;
  font-size: 0.82rem;
}

/* フラッシュメッセージ */
/* インフォメーションパネルは画面に固定表示し、出入りで本文が上下にガタつかない
   （レイアウトシフトしない）ようにする。コンテナはクリック透過、パネル自身は操作可能。 */
#flash-container {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: max-content;
  max-width: min(90vw, 560px);
  pointer-events: none;
}

.flash {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  font-size: 0.9rem;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  animation: flash-in 0.25s ease-out;
}

/* 出現時のフェードイン（上から少しスライド） */
@keyframes flash-in {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 自動消去・手動クローズ時のフェードアウト */
.flash--leaving {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* 本文にメールアドレスが入ることがある（メンバーの招待・削除、SNS での会員登録の通知。文はコントローラーで
   組み立てるので、アドレスだけを .email-address の span で包めない）。区切りの無い長いアドレスでも枠の中で
   折り返すよう、通知の文ごとどこでも折り返せるようにする。min-width: 0 は flex の子を本文の最小幅より縮める
   ため（縮まないと、文字と × が枠の外へ出る）。日本語だけの文の折り返しは変わらない。
   word-break: break-word は .email-address と同じく、古い Safari 向けの予備 */
.flash__text {
  flex: 1;
  min-width: 0;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.flash__close {
  flex-shrink: 0;
  padding: 0 4px;
  background: none;
  border: none;
  font-size: 1.2rem;
  line-height: 1;
  color: inherit;
  opacity: 0.6;
  cursor: pointer;
}

.flash__close:hover {
  opacity: 1;
}

.flash--notice {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.flash--alert {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}


/* 件数表示 */
.results-count {
  font-size: 0.95rem;
  color: #636e72;
  margin-bottom: 16px;
}

/* 求人カード */
.job-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.job-card {
  background: #fff;
  /* v3（トップページの注目求人カード）と同じ角丸・枠色 */
  border-radius: 14px;
  padding: 20px 24px;
  border: 1px solid var(--color-border);
  transition: box-shadow 0.2s;
}

.job-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.job-card-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.job-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #221c50;
}

.job-company {
  font-size: 0.9rem;
  color: #636e72;
}

.job-description {
  font-size: 0.9rem;
  color: #636e72;
  margin-bottom: 12px;
}

.job-card-footer {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.job-meta {
  font-size: 0.85rem;
  color: var(--color-info);
  background-color: rgba(79, 125, 249, 0.10);
  padding: 4px 10px;
  border-radius: 4px;
}

/* 検索結果なし */
.no-results {
  text-align: center;
  padding: 60px 0;
  color: #636e72;
}

.no-results p + p {
  margin-top: 8px;
}

.results-section {
  padding-bottom: 48px;
}

/* 詳細リンク（検索ページ） */
.job-detail-link {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-info);
  margin-left: auto;
  transition: color 0.2s;
}

.job-detail-link:hover {
  color: var(--color-info-hover);
}

/* ===== 求人一覧ページ（/jobs）===== */

.jobs-page {
  min-height: 100vh;
}

/* 2カラムレイアウト */
/* ページ見出し（h1）。下の余白は .jobs-layout の padding-top が担う。
   上の余白はヘッダー〜見出しの間隔を他ページ（.page-main の padding-top）と揃える */
.jobs-page__title {
  margin: 40px 0 0;
}

.jobs-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 24px;
  padding: 20px 0 48px;
  align-items: start;
}

/* ---- 左サイドバー（絞り込み） ---- */
.filter-sidebar {
  background: #fff;
  border: 1px solid #e6e3f5;
  border-radius: 10px;
  padding: 20px;
}

.filter-title {
  font-size: 1rem;
  font-weight: 700;
  color: #221c50;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid #4f7df9;
}

.filter-group {
  margin-bottom: 18px;
}

.filter-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: #636e72;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.filter-input {
  width: 100%;
  padding: 8px 12px;
  font-size: 0.9rem;
  border: 1.5px solid #dfe6e9;
  border-radius: 6px;
  outline: none;
  transition: border-color 0.2s;
}

.filter-input:focus {
  border-color: var(--color-info);
}

.filter-select {
  width: 100%;
  padding: 8px 12px;
  font-size: 0.9rem;
  border: 1.5px solid #dfe6e9;
  border-radius: 6px;
  background: #fff;
  outline: none;
  cursor: pointer;
  transition: border-color 0.2s;
}

.filter-select:focus {
  border-color: var(--color-info);
}

/* 複数選択（勤務地）。listbox 表示にして複数都道府県を選べるようにする */
.filter-select--multi {
  height: auto;
  min-height: 132px;
  padding: 6px;
  cursor: default;
}

.filter-select--multi optgroup {
  font-size: 0.8rem;
  color: var(--color-text-secondary);
}

.filter-select--multi option {
  padding: 3px 6px;
}

/* ラベル横の補足（例: 複数選択可） */
.filter-label-note {
  margin-left: 6px;
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-text-muted);
}

.filter-checkboxes {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* 職種絞り込み：大分類グループとその配下の小分類チェックボックスをまとめる */
.filter-category-group {
  margin-top: 10px;
}

.filter-category-group:first-of-type {
  margin-top: 0;
}

.filter-category-group-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: #2d3436;
  margin: 0 0 6px;
  padding-left: 2px;
}

.filter-category-group .filter-checkboxes {
  padding-left: 8px;
  border-left: 2px solid #e6e3f5;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  color: #2d3436;
  cursor: pointer;
  padding: 2px 0;
}

.checkbox-label:hover {
  color: #4f7df9;
}

.filter-checkbox {
  width: 15px;
  height: 15px;
  accent-color: #4f7df9;
  cursor: pointer;
  flex-shrink: 0;
}

.filter-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #e6e3f5;
}

.filter-button {
  width: 100%;
  padding: 10px 0;
  background-color: var(--color-info);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.filter-button:hover {
  background-color: var(--color-info-hover);
}

.filter-reset-link {
  display: block;
  text-align: center;
  font-size: 0.85rem;
  color: #636e72;
  text-decoration: underline;
  transition: color 0.2s;
}

.filter-reset-link:hover {
  color: var(--color-info);
}

/* ---- 右メインコンテンツ ---- */
.jobs-main {
  min-width: 0;
}

.jobs-header {
  margin-bottom: 16px;
}

/* ---- 求人カードのタグ ---- */
.job-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.job-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.job-card-perks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.job-card-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 4px;
}

.job-title-link {
  color: #221c50;
  font-weight: 700;
  transition: color 0.2s;
}

.job-title-link:hover {
  color: #4f7df9;
}

/* タグ共通（修飾子なしはグレーのピル。--category 等の修飾子で配色を上書きする）。
   以前はマイページ側にもう 1 つ .tag が定義されており、後勝ちで --category 等の
   背景色を潰していたため、既定色ごとここへ統合した。 */
.tag {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 999px;
  background-color: #f1f3f5;
  color: #2d3436;
}

.tag--category {
  background-color: #eaf4ff;
  color: #2d7dd2;
  border: 1px solid #b8d9f5;
}

.tag--perk {
  background-color: #fff8e1;
  color: #f39c12;
  border: 1px solid #f5d78e;
}

.tag--skill {
  background-color: #f5f0ff;
  color: #8e44ad;
  border: 1px solid #d7b8f5;
}

.tag--required {
  background-color: rgba(240, 86, 159, 0.10);
  color: var(--color-primary-hover);
  border: 1px solid rgba(240, 86, 159, 0.35);
}

.tag--preferred {
  background-color: rgba(79, 125, 249, 0.10);
  color: var(--color-info-hover);
  border: 1px solid rgba(79, 125, 249, 0.35);
}

/* ---- ページネーション ---- */
.pagination {
  margin-top: 32px;
  display: flex;
  justify-content: center;
}

.pagination nav {
  display: flex;
  gap: 4px;
  align-items: center;
}

/* kaminari の構造: span.page > a（リンク）、span.page.current（テキストのみ）、span.disabled > span */
/* 共通スタイル */
.pagination nav a,
.pagination nav span.current,
.pagination nav .disabled > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  font-size: 0.9rem;
  border-radius: 999px;
  border: 1px solid #e6e3f5;
  background: #fff;
  color: #2d3436;
  transition: background-color 0.2s, color 0.2s;
}

/* ホバー */
.pagination nav a:hover {
  background-color: rgba(79, 125, 249, 0.08);
  border-color: var(--color-info);
  color: var(--color-info);
}

/* 現在のページ（span.page.current） */
.pagination nav span.current {
  background-color: var(--color-info);
  border-color: var(--color-info);
  color: #fff;
  font-weight: 700;
}

/* 無効ボタン */
.pagination nav .disabled > span {
  background: #f5f6fa;
  color: #b2bec3;
  cursor: default;
}

/* ===== 求人詳細ページ（/jobs/:id）===== */

.job-show-page {
  min-height: 100vh;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.88rem;
  color: #636e72;
  margin: 24px 0 16px;
  transition: color 0.2s;
}

.back-link:hover {
  color: #4f7df9;
}

/* 求人詳細カード */
.job-detail {
  background: #fff;
  border: 1px solid #e6e3f5;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 32px;
}

.job-detail-header {
  background: linear-gradient(135deg, #221c50 0%, #161138 100%);
  color: #fff;
  padding: 32px;
}

.job-catch-copy {
  font-size: 0.9rem;
  color: var(--color-info);
  font-weight: 600;
  margin-bottom: 8px;
  letter-spacing: 0.03em;
}

.job-detail-title {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.4;
  margin-bottom: 8px;
}

.job-detail-company {
  font-size: 1rem;
  color: #aab2c0;
  margin-bottom: 20px;
}

.job-detail-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ボタン */
/* マテリアルデザイン風ボタン
   - フラットな単色（グラデなし）
   - elevation: rest=1 / hover=2 / active=0 でシャドウのみで高低を表現
   - 日本語に合わせて font-weight 500 で軽め
   実装メモ:
   - <input type="submit"> のブラウザ UA グラデを完全に潰すため、type
     属性付きセレクタもまとめて並記して specificity を稼ぐ。
   - バリアント（primary / info / success / accent / outline / secondary
     / ghost-light / text）は CSS custom properties（--btn-bg / --btn-fg
     / --btn-border / --btn-shadow）を切り替える方式にして、
     ベースセレクタの specificity が高くてもバリアントの色が確実に効くようにする。
*/
input[type="submit"].btn,
input[type="reset"].btn,
input[type="button"].btn,
button.btn,
a.btn,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 24px;
  font-size: 0.92rem;
  /* v3（トップページ .btn-v3）の形状に合わせる: 完全ピル＋太字 */
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  text-decoration: none;
  font-family: inherit;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: none;
  background-color: var(--btn-bg, transparent);
  color: var(--btn-fg, inherit);
  border: var(--btn-border, none);
  box-shadow: var(--btn-shadow, 0 1px 2px rgba(0, 0, 0, 0.10), 0 1px 3px rgba(0, 0, 0, 0.08));
  transition: background-color 0.18s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.18s ease;
}

.btn:hover:not(:disabled) {
  background-color: var(--btn-bg-hover, var(--btn-bg, transparent));
  box-shadow: var(--btn-shadow-hover, 0 2px 4px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.10));
}

.btn:active:not(:disabled) {
  background-color: var(--btn-bg-active, var(--btn-bg-hover, var(--btn-bg, transparent)));
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

.btn:focus-visible {
  outline: 2px solid var(--color-info);
  outline-offset: 2px;
}

/* ボタン内に置く「別タブで開く」外部リンクアイコン（.btn の gap で文言の右に並ぶ） */
.btn__external-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

/* バリアント = CSS custom properties の差し替え */
.btn--primary {
  --btn-bg: var(--color-primary);
  --btn-bg-hover: var(--color-primary-hover);
  --btn-fg: #fff;
}

.btn--info {
  --btn-bg: var(--color-info);
  --btn-bg-hover: var(--color-info-hover);
  --btn-fg: #fff;
}

.btn--success {
  --btn-bg: var(--color-success);
  --btn-bg-hover: var(--color-success-hover);
  --btn-fg: #fff;
}

.btn--accent {
  --btn-bg: var(--color-accent);
  --btn-bg-hover: var(--color-accent-hover);
  --btn-fg: var(--color-text-primary);
}

/* outlined / secondary / ghost-light / text は影なし */
.btn--outline {
  --btn-bg: transparent;
  --btn-bg-hover: rgba(79, 125, 249, 0.08);
  --btn-bg-active: rgba(79, 125, 249, 0.16);
  --btn-fg: var(--color-info);
  --btn-border: 1px solid var(--color-info);
  --btn-shadow: none;
  --btn-shadow-hover: none;
}

.btn--secondary {
  --btn-bg: #fff;
  --btn-bg-hover: var(--color-bg-soft);
  --btn-bg-active: #eef0f2;
  --btn-fg: var(--color-text-primary);
  --btn-border: 1px solid var(--color-border);
  --btn-shadow: none;
  --btn-shadow-hover: none;
}

.btn--ghost-light {
  --btn-bg: transparent;
  --btn-bg-hover: rgba(255, 255, 255, 0.10);
  --btn-bg-active: rgba(255, 255, 255, 0.18);
  --btn-fg: #fff;
  --btn-border: 1px solid rgba(255, 255, 255, 0.6);
  --btn-shadow: none;
  --btn-shadow-hover: none;
}

.btn--text {
  --btn-bg: transparent;
  --btn-bg-hover: rgba(79, 125, 249, 0.08);
  --btn-fg: var(--color-info);
  --btn-shadow: none;
  --btn-shadow-hover: none;

  padding: 8px 12px;
}

.btn--disabled,
.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}

/* 詳細本文 */
.job-detail-body {
  padding: 0 32px 8px;
}

.job-detail-section {
  padding: 24px 0;
  border-bottom: 1px solid #f0f2f5;
}

.job-detail-section:last-child {
  border-bottom: none;
}

.section-title {
  font-size: 1rem;
  font-weight: 700;
  color: #221c50;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-title::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 1em;
  /* 見出しアクセントは v3 のグラデーション（青→紫） */
  background: var(--home-grad);
  border-radius: 2px;
}

/* 基本情報テーブル */
.job-info-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.job-info-table th,
.job-info-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid #f0f2f5;
  vertical-align: top;
}

.job-info-table th {
  width: 160px;
  font-weight: 600;
  color: #636e72;
  background-color: #f8f9fa;
  white-space: nowrap;
}

.job-info-table td {
  color: #2d3436;
}

/* PORTERS連携データ（admin 企業のみ表示する受信元データの確認パネル） */
.porters-source {
  background-color: #f8fafc;
  border: 1px solid #e6e3f5;
  border-radius: 8px;
  padding: 18px 20px;
}

.porters-source__note {
  font-size: 0.85rem;
  color: #64748b;
  margin-bottom: 12px;
}

.porters-source__actions {
  margin-bottom: 14px;
}

/* 小画面で比較テーブルが横溢れしてもレイアウトを崩さず横スクロールで読めるようにする。 */
.porters-source__scroll {
  overflow-x: auto;
}

.porters-source__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  background-color: #fff;
}

.porters-source__table th,
.porters-source__table td {
  padding: 9px 12px;
  text-align: left;
  border: 1px solid #e6e3f5;
  vertical-align: top;
}

.porters-source__table thead th {
  font-weight: 600;
  color: #475569;
  background-color: #f1f5f9;
  white-space: nowrap;
}

.porters-source__table tbody th {
  width: 200px;
  font-weight: 600;
  color: #636e72;
  background-color: #f8fafc;
}

.porters-source__table tbody td {
  color: #2d3436;
}

.salary-note {
  display: block;
  font-size: 0.82rem;
  color: #636e72;
  margin-top: 4px;
}

.location-detail {
  display: block;
  font-size: 0.82rem;
  color: #636e72;
  margin-top: 4px;
}

/* スキルグループ */
.skill-group {
  margin-bottom: 14px;
}

.skill-group:last-child {
  margin-bottom: 0;
}

.skill-group-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: #636e72;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

/* タググループ */
.tag-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* 企業向け求人詳細: 未入力セクションのプレースホルダ（−） */
.job-detail-empty {
  color: #768390;
  font-size: 0.92rem;
}

/* 本文テキスト */
.job-text-content {
  font-size: 0.92rem;
  color: #2d3436;
  line-height: 1.8;
}

.job-text-content p {
  margin-bottom: 0.8em;
}

.job-text-content p:last-child {
  margin-bottom: 0;
}

/* 本文中の小見出し（仕事内容の「（変更の範囲）」等） */
.job-text-subheading {
  margin: 12px 0 4px;
  font-weight: 600;
}

/* 詳細フッター */
.job-detail-footer {
  background-color: #f8f9fa;
  padding: 24px 32px;
  border-top: 1px solid #e6e3f5;
}

/* フッター内のセカンダリボタンは白背景用に上書き */
.job-detail-footer .btn--secondary {
  color: #4f7df9;
  border: 2px solid #4f7df9;
  background-color: transparent;
}

/* 掲載終了求人カード */
.job-card--unavailable {
  opacity: 0.7;
  background-color: #f8f8f8;
}

.job-title--unavailable {
  color: #888;
}

.tag--unavailable {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  background-color: #e0e0e0;
  color: #666;
  margin-left: 8px;
}

/* お気に入りボタン
   未登録 (.btn--favorite): outline で控えめに（押下前の状態）
   登録済み (.btn--favorite.btn--favorited): primary ピンク塗りつぶし（登録済みを強調表示）
*/
.btn--favorite {
  --btn-bg: #fff;
  --btn-bg-hover: rgba(240, 86, 159, 0.08);
  --btn-bg-active: rgba(240, 86, 159, 0.16);
  --btn-fg: var(--color-primary);
  --btn-border: 1.5px solid var(--color-primary);
  --btn-shadow: none;
  --btn-shadow-hover: none;
}

.btn--favorite.btn--favorited {
  --btn-bg: var(--color-primary);
  --btn-bg-hover: var(--color-primary-hover);
  --btn-bg-active: var(--color-primary-hover);
  --btn-fg: #fff;
  --btn-border: none;
  --btn-shadow: initial;
  --btn-shadow-hover: initial;
}

.btn--favorite-login {
  font-size: 0.85rem;
  color: #888;
  border-color: #ccc;
  text-decoration: none;
}

.btn--favorite-icon {
  font-size: 1.2rem;
  color: #ccc;
  text-decoration: none;
  border: none;
  background: none;
  cursor: pointer;
}

.btn--favorite-icon:hover {
  color: var(--color-primary);
}

/* 関連求人 */
.related-jobs {
  margin-bottom: 48px;
}

.related-jobs-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #221c50;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid #e6e3f5;
}

.job-list--compact .job-card {
  padding: 16px 20px;
}

/* レスポンシブ */
@media (max-width: 768px) {
  /* SP は .jobs-layout の padding も縮むため、見出し上の余白も比率を合わせて縮める */
  .jobs-page__title {
    margin-top: 20px;
  }

  .jobs-layout {
    grid-template-columns: 1fr;
    padding: 16px 0 32px;
  }

  .filter-sidebar {
    position: static;
  }

  .job-detail-header {
    padding: 24px 20px;
  }

  .job-detail-body {
    padding: 0 20px 8px;
  }

  .job-detail-footer {
    padding: 20px;
  }

  .job-info-table th {
    width: 120px;
  }
}

/* ===== 認証ページ ===== */
.auth-page {
  min-height: 100vh;
}

.auth-card {
  max-width: 520px;
  margin: 40px auto;
  background: #fff;
  border-radius: 12px;
  padding: 40px 48px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.auth-title {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 28px;
  color: #221c50;
  text-align: center;
}

.auth-description {
  font-size: 0.9rem;
  color: #636e72;
  margin-bottom: 20px;
  line-height: 1.6;
}

.auth-links {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #e6e3f5;
  text-align: center;
}

.auth-links p {
  margin-top: 10px;
  font-size: 0.9rem;
}

.auth-links a {
  color: #4f7df9;
  text-decoration: underline;
}

/* ===== 企業（採用担当者）向け認証ページ =====
   ログイン・企業アカウント登録・パスワード再設定で共通に使う（shared/_company_auth）。
   求職者向けヘッダーは出さず、ロゴだけのネイビーバー＋左に訴求パネル・右にフォームカード。 */
.company-auth__header {
  background: var(--home-navy);
  color: #fff;
}

.company-auth__header-inner {
  max-width: 1040px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.company-auth__brand {
  display: inline-flex;
  align-self: flex-start;
}

.company-auth__logo-img {
  display: block;
  max-height: 40px;
  width: auto;
}

.company-auth__logo {
  font-size: 1.25rem;
  font-weight: 800;
}

.company-auth__header-note {
  margin-left: auto;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.8);
}

.company-auth__main {
  padding: 48px 24px 64px;
}

/* 既定（タブレット以下）は 1 カラム。DOM 順（フォームカード → 訴求パネル）のまま
   縦に積むので、視覚順とタブ順・読み上げ順が一致する */
.company-auth__inner {
  max-width: 520px;
  margin: 0 auto;
  display: grid;
  gap: 24px;
}

/* PC は 2 カラム。左（訴求パネル）は可変・右（フォームカード）は固定幅にする
   （フォーム幅が広がりすぎると入力欄が間延びするため、求職者向けの .auth-card と近い幅）。
   DOM はカードが先なので、order で訴求パネルを左に置く */
@media (min-width: 901px) {
  .company-auth__inner {
    max-width: 1040px;
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: 40px;
    align-items: start;
  }

  .company-auth__intro {
    order: 1;
  }

  .company-auth__card {
    order: 2;
  }
}

.company-auth__intro {
  padding: 40px 36px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--home-navy) 0%, #3b2f86 100%);
  color: #fff;
}

.company-auth__eyebrow {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #ffb3d6;
}

.company-auth__intro-title {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.5;
  margin: 8px 0 12px;
}

.company-auth__intro-lead {
  font-size: 0.95rem;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.85);
}

.company-auth__features {
  list-style: none;
  display: grid;
  gap: 12px;
  margin: 28px 0 0;
  padding: 0;
}

.company-auth__feature {
  position: relative;
  padding-left: 30px;
  font-size: 0.95rem;
}

/* チェックの丸は装飾（項目名だけで意味が通るため読み上げには不要） */
.company-auth__feature::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0.2em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--home-pink);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
}

.company-auth__intro-cta {
  display: inline-flex;
  align-items: center;
  margin-top: 32px;
  padding: 12px 28px;
  border-radius: 999px;
  background: #fff;
  color: var(--home-navy);
  font-size: 0.95rem;
  font-weight: 700;
  transition: background-color 0.2s;
}

.company-auth__intro-cta:hover {
  background: rgba(255, 255, 255, 0.86);
}

.company-auth__card {
  background: #fff;
  border-radius: 16px;
  padding: 36px 32px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.company-auth__card-head {
  margin-bottom: 24px;
  text-align: center;
}

.company-auth__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--home-navy);
}

.company-auth__lead {
  margin-top: 8px;
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--color-text-secondary);
}

/* 入力のグループ分け（企業情報／管理者アカウント）。カードの中に枠付き fieldset を
   入れると囲みが二重になるため、枠は出さず区切り線＋見出しとして見せる */
.company-auth__fieldset {
  border: none;
  margin-bottom: 8px;
}

.company-auth__fieldset + .company-auth__fieldset {
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
}

.company-auth__legend {
  padding: 0;
  margin-bottom: 16px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--home-navy);
}

@media (max-width: 600px) {
  .company-auth__main {
    padding: 24px 16px 40px;
  }

  .company-auth__card {
    padding: 28px 20px;
  }

  .company-auth__intro {
    padding: 28px 20px;
  }

  .company-auth__intro-title {
    font-size: 1.3rem;
  }

  .company-auth__header-note {
    font-size: 0.75rem;
  }
}

/* 企業向け認証画面のフォームカード下部に置く規約・プライバシーポリシー・お問い合わせ導線。
   /company 配下は求職者向けフッターを出さないため、ここが唯一の到達手段になる。 */
.company-auth__legal {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border, #e6e9ec);
}

.company-auth__consent {
  margin: 0 0 8px;
  font-size: 0.8rem;
  line-height: 1.6;
  color: #666;
}

.company-auth__legal-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.8rem;
}

.company-auth__legal-list a {
  color: #666;
  text-decoration: none;
}

.company-auth__legal-list a:hover {
  color: var(--home-navy);
  text-decoration: underline;
}

/* 求職者の登録画面（メール・SNS）の登録ボタンの下に置く、同意の一文と規約・プライバシーポリシーへのリンク
   （shared/_registration_consent）。文字の大きさと色は企業の登録画面（.company-auth__consent）にそろえ、
   リンクは同意の対象だと分かるよう下線を付ける。 */
.auth-consent {
  margin-top: 12px;
}

.auth-consent__text {
  margin: 0 0 6px;
  font-size: 0.8rem;
  line-height: 1.6;
  color: #666;
}

.auth-consent__links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.8rem;
}

.auth-consent__links a {
  color: #666;
  text-decoration: underline;
}

.auth-consent__links a:hover {
  color: var(--home-navy);
}

/* SNS ログイン/登録ボタン（ログイン画面・新規登録画面） */
.social-login {
  margin-top: 24px;
}

.social-login__divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  color: #636e72;
  font-size: 0.8rem;
}

.social-login__divider::before,
.social-login__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #e6e3f5;
}

/* 各社ブランドガイドラインに合わせた配色（LINE=#06C755 / Google=白地+枠線） */
.social-login__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  margin-bottom: 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.social-login__icon {
  width: 20px;
  height: 20px;
}

.social-login__btn--line {
  background: #06c755;
  color: #fff;
}

.social-login__btn--line:hover {
  background: #05b34c;
}

.social-login__btn--google_oauth2 {
  background: #fff;
  color: #3c4043;
  border-color: #dadce0;
}

.social-login__btn--google_oauth2:hover {
  background: #f8f9fa;
}

.social-login__btn--apple {
  background: #000;
  color: #fff;
}

.social-login__btn--apple:hover {
  background: #1d1d1f;
}

/* アカウント設定の SNS 連携セクション */
.social-connections {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid #e6e3f5;
}

.social-connections__title {
  font-size: 0.95rem;
  font-weight: 600;
  color: #221c50;
  margin-bottom: 8px;
}

.social-connections__hint {
  font-size: 0.85rem;
  color: #636e72;
  margin-bottom: 16px;
}

.social-connections__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #f0eef9;
}

.social-connections__provider {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #221c50;
}

.social-connections__icon {
  width: 22px;
  height: 22px;
}

/* LINE / Apple のアイコンは白抜きのため、アプリアイコン風に色地に載せる */
.social-connections__icon--line {
  background: #06c755;
  border-radius: 5px;
  padding: 2px;
}

.social-connections__icon--apple {
  background: #000;
  border-radius: 5px;
  padding: 2px;
}

.social-connections__locked {
  font-size: 0.8rem;
  color: #636e72;
}

.auth-danger-zone {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid #fed7d7;
}

.danger-zone-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: #e53e3e;
  margin-bottom: 12px;
}

.btn--danger {
  --btn-bg: transparent;
  --btn-bg-hover: #fff5f5;
  --btn-bg-active: #ffe5e5;
  --btn-fg: #e53e3e;
  --btn-border: 1.5px solid #e53e3e;
}

/* フォーム共通 */
.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: inline-block;
  font-size: 0.9rem;
  font-weight: 600;
  color: #2d3436;
  margin-bottom: 6px;
}

.form-required {
  display: inline-block;
  font-size: 0.75rem;
  color: #fff;
  background-color: #4f7df9;
  padding: 1px 6px;
  border-radius: 3px;
  margin-left: 6px;
  vertical-align: middle;
}

.form-hint {
  font-size: 0.8rem;
  color: #636e72;
  margin-left: 4px;
}

.form-hint-block {
  font-size: 0.85rem;
  color: #636e72;
  background-color: #f8f9fa;
  padding: 8px 12px;
  border-radius: 6px;
  margin-bottom: 16px;
}

.form-input {
  display: block;
  width: 100%;
  padding: 10px 14px;
  font-size: 1rem;
  border: 1.5px solid #dfe6e9;
  border-radius: 8px;
  background-color: #fff;
  color: #2d3436;
  transition: border-color 0.2s, box-shadow 0.2s;
  font-family: inherit;
}

.form-input:focus {
  outline: none;
  border-color: var(--color-info);
  box-shadow: 0 0 0 3px rgba(79, 125, 249, 0.12);
}

.form-select {
  display: block;
  width: 100%;
  padding: 10px 14px;
  font-size: 1rem;
  border: 1.5px solid #dfe6e9;
  border-radius: 8px;
  background-color: #fff;
  color: #2d3436;
  transition: border-color 0.2s;
  font-family: inherit;
  cursor: pointer;
}

.form-select:focus {
  outline: none;
  border-color: var(--color-info);
  box-shadow: 0 0 0 3px rgba(79, 125, 249, 0.12);
}

/* サイトのフォームの 1 行の select（求職者・企業・お問い合わせ・検索）の「∨」。
   ブラウザ標準の矢印は枠の右端から数 px の所に描かれ、位置も padding では動かせないので、
   標準の見た目を外して独自の ∨ を枠の右端から 16px 内側に置く。padding-right は ∨ の右の余白（16px）・
   ∨ の幅（12px）・文字との間（12px）の分を取り、長い選択肢でも文字と ∨ が重ならないようにする。
   クラスを並べると、並べ忘れた select だけ標準の矢印に戻るので、1 行の select すべてに当てる
   （この CSS を読み込むのは、サイトと企業の画面のレイアウト。管理画面は読み込まない。LP は、共通ヘッダー付き
   （use_site_layout）のときだけ読み込むので、LP の本文に select を書くとこの ∨ が当たる）。
   複数選択（multiple）は矢印を持たないので外す。独自の矢印（svg）を持つ .job-attach-pager__select も外す。
   size で複数行のリスト表示にした select は今は無く、外していない（足すときは外す）。
   各クラスの padding・background の一括指定（shorthand）より強くなるよう、:not() で詳細度を (0,2,1) にしている。
   これより詳細度の高い規則で padding や background を一括指定すると、∨ や余白が消えるので書かない
   （幅の狭い select で余白を変えるときは、候補者検索の範囲の select のように同じ詳細度で後ろに書く） */
select:not([multiple]):not(.job-attach-pager__select) {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23636e72' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px 8px;
}

.form-group--checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
}

.form-checkbox {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.form-checkbox-label {
  font-size: 0.9rem;
  color: #2d3436;
  cursor: pointer;
}

.form-actions {
  margin-top: 28px;
}

/* 長いフォーム（プロフィール編集など）用。送信ボタンを画面下部に追従させ、
   保存のたびに最下部までスクロールしなくて済むようにする。
   position: sticky なのでフォーム末尾まで来ると通常位置に落ち着き、
   下の余白やページ末尾のコンテンツと重ならない。 */
.form-actions--sticky {
  position: sticky;
  bottom: 0;
  /* モーダル（z-index: 1000）より下、通常のコンテンツより上 */
  z-index: 100;
  padding: 12px 16px;
  /* iOS のホームインジケータ領域分を下に足す。
     ただし viewport meta が viewport-fit=cover のときのみ効くため、現状は 0px。
     （viewport-fit=contain ではレイアウトビューポート自体がインジケータ領域を除くので追加余白は不要） */
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  background: #fff;
  border: 1.5px solid #e6e3f5;
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  box-shadow: 0 -4px 14px rgba(45, 52, 54, 0.1);
}

.btn--full {
  width: 100%;
  padding: 12px 24px;
  font-size: 1rem;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s;
}

.form-fieldset {
  border: 1.5px solid #e6e3f5;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}

/* 枠の中の枠（プロフィール編集の語学の「その他の言語」）。枠と小見出しは同じにして、内側の余白だけ詰める。
   外側の余白と重なるので、20px のままだと SP で入力欄が狭くなりすぎる（ブラウザ既定の枠のときと同じ幅に戻す） */
.form-fieldset .form-fieldset {
  padding: 12px;
}

/* 折りたたみの見出し（.form-collapse__summary）も、見た目はこの legend と同じにする */
.form-fieldset-legend,
.form-collapse__summary {
  font-size: 0.85rem;
  font-weight: 600;
  color: #636e72;
  padding: 0 8px;
}

/* 履歴書OCRのドラッグ&ドロップ添付ゾーン */
.file-drop-zone {
  position: relative;
  border: 2px dashed var(--color-info, #4f7df9);
  border-radius: 8px;
  padding: 28px 16px;
  text-align: center;
  cursor: pointer;
  background-color: rgba(79, 125, 249, 0.04);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.file-drop-zone:hover {
  background-color: rgba(79, 125, 249, 0.08);
}

.file-drop-zone.is-dragover {
  background-color: rgba(79, 125, 249, 0.16);
  border-color: var(--color-info-hover, #3b63d8);
}

.file-drop-zone-text {
  margin: 0;
  color: var(--color-text-secondary, #6c757d);
  font-size: 0.9rem;
  pointer-events: none;
}

/* 実体の file input は隠し、ゾーン全体のクリック/ドロップに委譲する */
.file-drop-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* ネスト入力（学歴・職歴・スキルの1件分）の視覚的な区切り */
.nested-fields {
  border: 1px solid #e6e3f5;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
  background-color: #fafbfc;
}

.nested-fields-actions {
  margin-top: 8px;
  text-align: right;
}

/* Deviseエラーメッセージ */
#error_explanation {
  background-color: #fff5f5;
  border: 1.5px solid #fed7d7;
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 24px;
}

/* 履歴書 OCR パネル（my_page/resume_ocr/_panel。form-fieldset を独立フォームで流用） */
.resume-ocr-panel {
  border: 1px solid var(--color-border);
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 24px;
}

#error_explanation h2 {
  font-size: 0.9rem;
  font-weight: 600;
  color: #e53e3e;
  margin-bottom: 8px;
}

#error_explanation ul {
  list-style: disc;
  padding-left: 20px;
}

#error_explanation li {
  font-size: 0.875rem;
  color: #c53030;
  margin-top: 4px;
}

/* ===== マイページ ===== */

.mypage-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 32px;
  align-items: start;
}

/* サイドバー */
.mypage-sidebar {
  position: sticky;
  top: 20px;
}

/* スマホでは 1 列縦積みにし、サイドバーの sticky を解除する。
   sticky のままだとスクロール時にサイドバーが画面上部に張り付き続け、
   メインコンテンツに被って見える */
@media (max-width: 768px) {
  .mypage-layout {
    grid-template-columns: 1fr;
  }

  .mypage-sidebar {
    position: static;
  }
}

.mypage-user-card {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
  border: 1.5px solid #e6e3f5;
}

/* プロフィール写真（旧: ビューの inline style で指定していた） */
.mypage-avatar {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 50%;
  margin-bottom: 8px;
}

.mypage-user-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: #2d3436;
  margin-bottom: 4px;
}

.mypage-user-email {
  font-size: 0.8rem;
  color: #636e72;
  margin-bottom: 12px;
}

.mypage-status-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
}

.mypage-status-badge--active {
  background-color: #ebfbee;
  color: #2f9e44;
}

.mypage-status-badge--casual {
  background-color: #fff4e6;
  color: #e67700;
}

.mypage-status-badge--not_looking {
  background-color: #f1f3f5;
  color: #868e96;
}

.mypage-nav {
  background: #fff;
  border-radius: 12px;
  border: 1.5px solid #e6e3f5;
  overflow: hidden;
}

/* 2 つ目以降のメニューグループ（アクティビティ）は独立したカードとして間隔をあける */
.mypage-nav--stacked {
  margin-top: 16px;
}

/* メニューグループの見出し（レジュメ管理 / アクティビティ）。
   リンクと明確に区別できるようアクセント（黄）の淡いトーンで帯にする。
   文字色は帯（白地との合成で ≒ #fff8cc）に対して約 5:1 のコントラストを確保し、
   13.6px の小さな文字でも WCAG AA（4.5:1）を満たす値にしている */
.mypage-nav-heading {
  padding: 10px 16px;
  background-color: rgba(255, 221, 0, 0.20);
  border-bottom: 1px solid #f1f3f5;
  font-size: 0.85rem;
  font-weight: 700;
  color: #7a6800;
}

.mypage-nav-item {
  /* 項目名を左、未処理件数のバッジを右に寄せる */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 16px;
  font-size: 0.9rem;
  color: #2d3436;
  border-bottom: 1px solid #f1f3f5;
  transition: background-color 0.15s, color 0.15s;
}

.mypage-nav-item:last-child {
  border-bottom: none;
}

.mypage-nav-item:hover,
.mypage-nav-item--active {
  background-color: rgba(79, 125, 249, 0.08);
  color: var(--color-info);
}

/* 現在地（スクロールスパイのハイライト）はホバーと区別できるよう
   左のアクセントバー + 太字で強調する。バーの分 padding を詰めて文字位置を揃える */
.mypage-nav-item--active {
  border-left: 3px solid var(--color-info);
  padding-left: 13px;
  font-weight: 600;
}

/* 未処理件数の赤丸バッジ（未入力の必須項目数・未読の会話数）。
   0 件のときは描画しない（_nav_badge.html.erb 側で判定）。
   ホバー・現在地でリンクの文字色が変わってもバッジは赤地に白のまま保つ */
.mypage-nav-badge {
  flex: 0 0 auto;
  min-width: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background-color: #e03131;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}

/* セクション */
.mypage-section {
  background: #fff;
  border-radius: 12px;
  padding: 28px;
  margin-bottom: 24px;
  border: 1.5px solid #e6e3f5;
}

.mypage-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.mypage-section-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--home-navy);
}

.mypage-empty-text {
  font-size: 0.9rem;
  color: #a0aec0;
  padding: 20px 0;
  text-align: center;
}

/* 直後にチェックリスト等が続くときの下余白 */
.mypage-empty-text--spaced {
  margin-bottom: 12px;
}

/* 空状態の直下に置く CTA ボタン */
.mypage-empty-cta {
  margin-top: 12px;
}

/* プロフィール情報グリッド */
.profile-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

@media (max-width: 600px) {
  .profile-info-grid {
    grid-template-columns: 1fr;
  }
}

.profile-info-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.profile-info-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: #636e72;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* グリッド外で単独ブロックの見出しとして使うときの下余白 */
.profile-info-label--block {
  margin-bottom: 8px;
}

/* プロフィール表示のタグ一覧などの小ブロック（ラベル＋内容のひとかたまり） */
.profile-subblock {
  margin-top: 16px;
}

.profile-info-value {
  font-size: 0.95rem;
  color: #2d3436;
}

.profile-bio {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #f1f3f5;
}

.profile-bio-text {
  font-size: 0.95rem;
  color: #2d3436;
  margin-top: 8px;
  line-height: 1.7;
}

/* 職歴・学歴カード */
.history-card {
  border: 1.5px solid #e6e3f5;
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 12px;
  transition: border-color 0.2s;
}

.history-card:hover {
  border-color: #cbd5e0;
}

.history-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.history-card-main {
  flex: 1;
}

.history-card-company {
  font-size: 1rem;
  font-weight: 700;
  color: #2d3436;
  margin-bottom: 2px;
}

.history-card-title {
  font-size: 0.9rem;
  color: #555;
  margin-bottom: 4px;
}

.history-card-meta {
  font-size: 0.82rem;
  color: #636e72;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.history-card-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.history-card-description {
  margin-top: 12px;
  font-size: 0.88rem;
  color: #555;
  line-height: 1.7;
  border-top: 1px solid #f1f3f5;
  padding-top: 12px;
}

/* モーダル */
.modal-overlay {
  background-color: rgba(0, 0, 0, 0.4);
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.modal-content {
  background: #fff;
  border-radius: 12px;
  padding: 28px;
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.modal-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #2d3436;
  margin-bottom: 20px;
}

.modal-form {
}

.modal-form-actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

/* フォーム行並び */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* 768px 以下での 1 列化はファイル末尾の @media ブロックでまとめて指定する */

/* チェックボックスグリッド */
.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}

/* チェックボックス群を fieldset + legend でまとめるとき用。グループ名をスクリーンリーダーへ
   伝えるのが目的なので、ブラウザ既定の枠線・余白を消して通常の .form-group と同じ見た目にする */
.form-group--checkbox-group {
  border: 0;
  padding: 0;
  min-inline-size: 0; /* fieldset の既定 min-width:min-content で grid が縮まないのを防ぐ */
}

.form-group__legend {
  padding: 0;
}

.checkbox-item {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.checkbox-group {
  margin-bottom: 18px;
}

.checkbox-group:last-child {
  margin-bottom: 0;
}

/* 経験職種：チェックボックスと経験年数入力を 1 行にまとめる（UI-B） */
.experience-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.experience-item .checkbox-item {
  flex: 1 1 auto;
  min-width: 0;
}

.experience-years {
  flex: 0 0 72px;
  width: 72px;
  padding: 4px 8px;
}

.checkbox-group-title {
  font-size: 0.92rem;
  font-weight: 600;
  color: #2d3436;
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid #e9ecef;
}

/* タグリスト */
/* スキル・資格のマスタごとのタグ群（shared/_skill_master_tags）。見出し＋タグ列を縦に並べる */
.skill-master-group + .skill-master-group {
  margin-top: 12px;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* 後続ブロックと間隔を空けるとき（マイページのリンク一覧など） */
.tag-list--spaced {
  margin-bottom: 16px;
}

/* NOTE: .tag の定義は「タグ共通」（求人一覧セクション冒頭）に統合した */

/* バッジ */
.badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
}

.badge--current {
  background-color: #ebfbee;
  color: #2f9e44;
}

/* ボタンサイズ */
.btn--xs {
  padding: 4px 10px;
  font-size: 0.78rem;
}

/* フォームページ */
.form-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}

.form-page-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--home-navy);
}

.form-page-back {
  font-size: 0.875rem;
  color: #636e72;
  text-decoration: underline;
}

/* ===== ホームページ ===== */

.home-page {
  min-height: 100vh;
}

.hero-search-form {
  margin-bottom: 20px;
}

.hero-search-wrapper {
  display: flex;
  gap: 0;
  max-width: 600px;
  margin: 0 auto;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(79, 125, 249, 0.2);
  border: 1.5px solid rgba(79, 125, 249, 0.20);
}

.hero-search-input {
  flex: 1;
  padding: 16px 20px;
  font-size: 1rem;
  border: none;
  outline: none;
  color: #2d3436;
  background: #fff;
}

.hero-search-button {
  padding: 16px 28px;
  background-color: var(--color-primary);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s;
  white-space: nowrap;
}

.hero-search-button:hover {
  background-color: var(--color-primary-hover);
}

/* セクション共通 */
.home-section {
  position: relative;
  overflow: hidden;
  padding: 56px 0;
}

/* セクション左右の装飾イラスト（デザイン準拠）。本文の背面に絶対配置し、
   コンテンツ（.home-container）は前面に出す。 */
.home-section > .home-container {
  position: relative;
  z-index: 1;
}

.home-deco {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

/* 条件から探す */
.home-deco--cond-l { left: 36px; top: 50%; transform: translateY(-50%); }
.home-deco--cond-r { right: 40px; top: 50%; transform: translateY(-50%); }

/* 注目の企業特集 */
.home-deco--featco-l { left: 80px; top: 55%; transform: translateY(-50%); }
.home-deco--featco-r { right: 36px; top: 30px; }

/* 注目の求人 */
.home-deco--jobs-l { left: 0; bottom: 40px; }
.home-deco--jobs-r { right: 0; bottom: 0; }
.home-deco--jobs-r2 { right: 110px; top: 44px; }

/* AsConnect が選ばれる理由 */
.home-deco--reasons-l { left: 40px; top: 50%; transform: translateY(-50%); }
.home-deco--reasons-r { right: 0; top: 50%; transform: translateY(-50%); }

/* コラム */
.home-deco--columns-l { left: 32px; bottom: 48px; }
.home-deco--columns-r { right: 32px; bottom: 40px; }
.home-deco--columns-sparkle { right: 92px; top: 76px; }

/* 装飾は本文の背面に敷く前提のため、狭い画面ではノイズになるので出さない */
@media (max-width: 900px) {
  .home-deco {
    display: none;
  }
}

/* セクションごとの地色。いずれも admin「トップページ設定」の背景色（--hp-*）で上書きでき、
   未設定のときは既定色（var() の第2引数）で表示する。
   背景画像を設定したセクションは、この地色の上に inline style で画像が敷かれる。 */
.home-section--conditions {
  background-color: var(--hp-conditions-bg, #fff);
}

.home-section--columns {
  background-color: var(--hp-columns-bg, #fff);
}

/* 既定はネイビー地のセクション（注目の企業特集）。文字色は地色の明るさに応じて
   付く home-section--dark（下記）で切り替わる。
   直前の「条件から探す」と地色が近く一続きに見えるため、間に余白を設けて区切る */
.home-section--featured-companies {
  background-color: var(--hp-featured-companies-bg, #221c50);
  margin-top: 28px;
}

/* 濃い地色のセクション。地の上に直接載る文字（見出し・「もっと見る」リンク・紹介文）を白系にする。
   カード内の文字はカード側で色を持つため影響しない。 */
.home-section--dark {
  color: #fff;
}

.home-section--dark .home-section-title,
.home-section--dark .home-section-more {
  color: #fff;
}

/* 濃色セクションの「すべて見る」ホバー。後方の .home-section-more:hover（固定の
   --color-info-hover）が admin 設定の地色と同色になり得るため、白のまま下線で状態を示す
   （クリックできないプレースホルダ .home-section-more--pending には付けない） */
.home-section--dark .home-section-more:not(.home-section-more--pending):hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* クリックできないプレースホルダは、後方の .home-section-more:hover（固定色）を拾って
   押せるように見えないよう、ホバーでも通常時と同じ色に据え置く（淡色セクション向け。
   二重クラスで詳細度 (0,3,0) にして後方の (0,2,0) に勝たせる） */
.home-section-more.home-section-more--pending:hover {
  color: var(--color-info);
}

/* 濃色セクションのプレースホルダは白のまま据え置く（上の淡色向けと同詳細度のため後方に置く） */
.home-section--dark .home-section-more--pending:hover {
  color: #fff;
}

/* 淡いラベンダー地のセクション（AsConnect が選ばれる理由） */
.home-section--features {
  background-color: var(--hp-features-bg, #f1eefb);
}

.home-section-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--home-navy);
  margin-bottom: 28px;
  text-align: left;
}

/* 見出し先頭の小さな菱形の飾り */
.home-section-title__deco {
  display: inline-block;
  margin-right: 10px;
  font-size: 0.7em;
  vertical-align: 0.15em;
  background: var(--home-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.home-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}

.home-section-header .home-section-title {
  margin-bottom: 0;
}

.home-section-more {
  font-size: 0.9rem;
  color: var(--color-info);
  font-weight: 600;
  transition: color 0.2s;
}

/* 遷移先ページが未作成の「すべて見る」プレースホルダ（フッターの未実装リンクと同じ扱い） */
.home-section-more--pending {
  opacity: 0.55;
  cursor: default;
}

.home-section-more:hover {
  color: var(--color-info-hover);
}

.home-section-cta {
  text-align: center;
  margin-top: 36px;
}

/* 注目求人：職種タブ（すべて／大分類名のピル） */
.featured-job-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 22px;
}

.featured-job-tab {
  padding: 7px 18px;
  border: 1px solid #ddd9f2;
  border-radius: 999px;
  background: #fff;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--home-navy);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s, box-shadow 0.2s;
}

.featured-job-tab:hover {
  border-color: var(--home-violet);
  color: var(--home-violet);
}

.featured-job-tab.is-active {
  background: var(--home-grad);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 12px rgba(123, 108, 246, 0.35);
}

/* 注目求人グリッド */
.featured-job-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

/* タブ切替（tabs_controller）は panel の hidden 属性で表示を切り替える。
   display: grid が UA の [hidden] { display: none } より優先されてしまうため明示する。 */
.featured-job-grid[hidden] {
  display: none;
}

.featured-job-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e6e3f5;
  border-radius: 14px;
  padding: 18px;
  transition: box-shadow 0.2s, transform 0.15s, border-color 0.2s;
}

.featured-job-card:hover {
  border-color: rgba(123, 108, 246, 0.5);
  box-shadow: 0 8px 22px rgba(63, 47, 158, 0.12);
  transform: translateY(-2px);
}

.featured-job-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

/* 雇用形態タグ（注目の求人カード。ネイビー系の淡いピル） */
.tag--employment {
  background-color: #eef1fb;
  color: #4a4a7a;
  border: 1px solid #d4daf0;
}

.featured-job-title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 4px;
  line-height: 1.4;
}

.featured-job-title-link {
  color: var(--home-navy);
  transition: color 0.2s;
}

.featured-job-title-link:hover {
  color: var(--home-violet);
}

.featured-job-company {
  font-size: 0.85rem;
  color: #767492;
  margin-bottom: 10px;
}

.featured-job-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}

.featured-job-meta-item {
  font-size: 0.8rem;
  color: #4a4a7a;
  background-color: #f4f2fd;
  padding: 3px 9px;
  border-radius: 999px;
}

/* AsConnect が選ばれる理由（ネイビーカード 3 枚） */
.reason-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.reason-card {
  /* デザイン準拠：本文はイラスト位置で折り返さず全幅で流し、
     イラストはカード右下の「背景」として本文の背面に敷く */
  position: relative;
  /* デザイン実測: カード地 #262777・枠線 #424b9c（セクション地 #111748 より一段明るい） */
  background: #262777;
  border: 1px solid #424b9c;
  border-radius: 16px;
  padding: 20px 20px 16px;
  box-shadow: 0 12px 28px rgba(34, 28, 80, 0.28);
  /* 本文が短いカードでも右下のイラストがはみ出さない高さを確保する */
  min-height: 180px;
}

.reason-card__title {
  position: relative;
  z-index: 1;
  font-size: 1.08rem;
  font-weight: 800;
  margin-bottom: 12px;
}

/* カードごとのタイトル色（デザイン準拠：1: ブルーラベンダー / 2・3: ピンクパープル） */
.reason-card__title--1 { color: #95acf2; }
.reason-card__title--2 { color: #e58ee1; }
.reason-card__title--3 { color: #e39fe6; }

.reason-card__text {
  position: relative;
  z-index: 1;
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.75;
  /* admin の長文でイラスト（背景）に本文が重なっても読めるよう、カード地色のハローを敷く */
  text-shadow: 0 0 6px #262777, 0 0 12px #262777;
}

/* カード右下の背景イラスト（本文の背面。装飾のためクリックも拾わない） */
.reason-card__visual {
  position: absolute;
  right: 14px;
  bottom: 10px;
  width: 128px;
  pointer-events: none;
}

.reason-card__img {
  display: block;
  width: 100%;
  max-height: 128px;
  object-fit: contain;
}

/* 会員登録 CTA バナー（既定はピンク→パープルのグラデーション帯。
   左右の色・外側の地色は admin「トップページ設定」で変更できる） */
.cta-banner-section.home-section {
  padding-top: 20px;
  padding-bottom: 48px;
  background-color: var(--hp-cta-section-bg, #fff);
}

.cta-banner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  /* 幅は Figma実測（860px）に合わせてコンテナ全幅には広げず中央寄せ。
     高さはユーザー指定で Figma（100px）より細めにする（上下パディング 18px） */
  max-width: 860px;
  margin: 0 auto;
  padding: 18px 32px;
  border-radius: 999px;
  background: linear-gradient(95deg,
    var(--hp-cta-banner-start, #f0569f) 0%,
    var(--hp-cta-banner-end, #7b6cf6) 100%);
  box-shadow: 0 12px 30px rgba(167, 92, 230, 0.35);
}

/* 文字ボタン（白地・ピンク文字）。文字サイズは Figma実測 20px。
   高さはバナー同様ユーザー指定で Figma（50px）よりやや細め（約 49px）。
   SP は既存の media 内ルールが上書きする */
.cta-banner .btn-v3--white {
  padding: 10px 26px;
  font-size: 1.25rem;
  /* （簡単1分）の前の空きは全角括弧ぶんで足りるため、inline-flex の gap は使わない */
  gap: 0;
}

/* ボタン内の補足文言（（簡単1分））は Figma実測どおり本文より小さく（20px に対し 14px） */
.btn-v3__sub {
  font-size: 0.7em;
}

/* マスコットはデザインに合わせてバナー左端に重ねて少しはみ出させる。
   絶対配置で flex 上の幅を持たないため、設定時はバナー左に余白を確保する。
   余白は Figma実測の 72px で、マスコット（右端はバナー左端+82px）が 10px ほど
   本文余白に重なる前提のデザイン（透過 PNG の余白で実表示は被らない）。
   :has 非対応ブラウザでは余白なしで表示のみ劣化。 */
.cta-banner:has(.cta-banner__mascot) {
  padding-left: 72px;
}

.cta-banner__mascot {
  position: absolute;
  left: -26px;
  top: 50%;
  transform: translateY(-50%);
  width: 108px;
  height: 108px;
  object-fit: contain;
}

.cta-banner__text {
  /* WCAG の「大きい文字（太字 14pt ≒ 18.66px 以上）」基準を満たすサイズにする
     （文字色の自動判定が大きい文字の 3:1 を下限にしているため）。
     下限 1.2rem に対し Figma実測は 24px・文字間隔 -1% */
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  /* バナーの色は admin が変更できるため、文字色はグラデーション両端＋中間色に対する
     最悪コントラストから決める（既定配色では白を維持。HomepageSetting#cta_banner_text_color） */
  color: var(--hp-cta-banner-fg, #fff);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

/* admin でボタン画像を設定したときのリンク（画像そのものをボタンとして見せる）。
   横長画像でも狭い画面でバナーからはみ出さないよう、リンク自身も縮小を許可する */
.cta-banner__button {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-width: 0;
  transition: transform 0.15s, filter 0.15s;
}

.cta-banner__button:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
}

.cta-banner__button-img {
  display: block;
  /* 元画像が大きくてもバナーの高さに収まるようにする（縦横比は保つ） */
  max-height: 64px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
}

.btn--lg {
  padding: 14px 32px;
  font-size: 1rem;
}

/* ===== 応募機能（JobApplication） ===== */

/* 応募フォームページ */
.application-form-page {
  max-width: 680px;
  margin: 0 auto;
  padding: 40px 0 64px;
}

.application-form-page__title {
  font-size: 1.6rem;
  font-weight: 700;
  color: #221c50;
  margin: 20px 0 6px;
}

.application-form-page__lead {
  font-size: 0.92rem;
  color: var(--color-text-secondary, #636e72);
  margin: 0 0 28px;
}

/* 応募先の求人カード（左に主色のアクセント） */
.application-job-info {
  background: #fff;
  border: 1px solid #e6e3f5;
  border-left: 4px solid var(--color-primary);
  border-radius: 12px;
  padding: 18px 22px;
  margin-bottom: 28px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.application-job-info__label {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-primary);
  margin-bottom: 6px;
}

.application-job-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #221c50;
  margin: 0 0 4px;
}

.application-job-company {
  font-size: 0.9rem;
  color: #636e72;
  margin: 0;
}

/* 入力フォーム本体（白カード） */
.application-form__card {
  background: #fff;
  border: 1px solid #e6e3f5;
  border-radius: 12px;
  padding: 28px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  margin-bottom: 24px;
}

.application-form__card .form-group {
  margin-bottom: 0;
}

.application-form__optional {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  color: #8a94a0;
  background: #f1f3f5;
  border-radius: 4px;
  padding: 1px 7px;
  margin-left: 6px;
  vertical-align: middle;
}

.application-form__hint {
  font-size: 0.82rem;
  color: #636e72;
  margin: 6px 0 12px;
}

.application-form__textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  font-size: 0.95rem;
  line-height: 1.7;
  font-family: inherit;
  color: #2d3436;
  border: 1.5px solid #dfe6e9;
  border-radius: 8px;
  background: #fff;
  resize: vertical;
  min-height: 160px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.application-form__textarea::placeholder {
  /* 白背景でも WCAG AA を満たすコントラスト（約 4.8:1）に調整 */
  color: #6b7280;
}

.application-form__textarea:focus {
  outline: none;
  border-color: var(--color-info);
  box-shadow: 0 0 0 3px rgba(79, 125, 249, 0.12);
}

/* 同意チェック（淡い背景のボックスで一括り） */
.application-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 24px;
  padding: 14px 16px;
  background: #f8f9fb;
  border: 1px solid #e9edf2;
  border-radius: 8px;
  cursor: pointer;
}

.application-consent__checkbox {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  flex-shrink: 0;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.application-consent__text {
  font-size: 0.85rem;
  line-height: 1.6;
  color: #4a4f57;
}

/* 操作ボタン（右寄せ・送信を主役に） */
.application-form__actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
}

.alert--error {
  background: #fff0f0;
  border: 1px solid #f5c6cb;
  border-radius: 8px;
  padding: 12px 16px;
  color: #c0392b;
  margin-bottom: 24px;
}

.alert__list {
  margin: 0;
  padding-left: 18px;
}

/* スマホでは余白を詰め、ボタンは縦積み（送信を上）にして押しやすくする */
@media (max-width: 600px) {
  .application-form-page {
    padding: 24px 0 48px;
  }

  .application-form__card {
    padding: 20px;
  }

  .application-form__actions {
    /* DOM 順（キャンセル → 応募する）と視覚順・フォーカス順を一致させ、
       支援技術利用時の混乱を避ける。主ボタンは下に並びサム操作にも適する。 */
    flex-direction: column;
    align-items: stretch;
  }
}

.application-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.application-card {
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 20px 24px;
  background: #fff;
}

/* 応募取り消しボタン（ステータスバッジの下に置く） */
.application-cancel-button {
  margin-top: 12px;
}

.application-card-body {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.application-card-info {
  flex: 1;
}

.application-job-link {
  color: #1a1a1a;
  text-decoration: none;
}

.application-job-link:hover {
  color: #4f7df9;
  text-decoration: underline;
}

.application-date {
  font-size: 12px;
  color: #888;
  margin: 0;
}

.application-card-status {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
}

.application-cover-letter {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #f0f0f0;
}

.application-cover-letter-label {
  font-size: 12px;
  font-weight: 600;
  color: #888;
  margin: 0 0 8px;
}

.application-cover-letter-text {
  font-size: 13px;
  color: #444;
  margin: 0;
  line-height: 1.7;
}

.application-empty {
  text-align: center;
  padding: 60px 20px;
  color: #888;
}

.application-empty p {
  font-size: 16px;
  margin-bottom: 24px;
}

/* 応募ステータスバッジ（一覧・マイページ共通） */
.application-status-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.application-status-badge--pending   { background: rgba(79, 125, 249, 0.12); color: #3b63d8; }
.application-status-badge--reviewing { background: rgba(255, 221, 0, 0.20);  color: #8a7400; }
.application-status-badge--interview { background: rgba(79, 125, 249, 0.18); color: #3b63d8; }
.application-status-badge--offered   { background: rgba(112, 212, 75, 0.18); color: #4a9a2c; }
.application-status-badge--rejected  { background: rgba(240, 86, 159, 0.15); color: #b13883; }
.application-status-badge--withdrawn { background: #f1f3f5; color: #6c757d; }

/* マイページ 応募履歴セクション */
.mypage-application-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mypage-application-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  background: #f8f9fa;
  border-radius: 6px;
}

.mypage-application-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.mypage-application-title {
  font-size: 14px;
  font-weight: 600;
}

.mypage-application-title a {
  color: #1a1a1a;
  text-decoration: none;
}

.mypage-application-title a:hover {
  color: #4f7df9;
  text-decoration: underline;
}

.mypage-application-company {
  font-size: 12px;
  color: #666;
}

.mypage-application-date {
  font-size: 11px;
  color: #999;
}

/* ===== 企業管理画面 ===== */

.company-layout {
  background-color: #f5f6fa;
  display: flex;
  align-items: stretch;
  min-height: 100vh;
}

/* 左側の縦型サイドバー */
.company-sidebar {
  flex: 0 0 230px;
  width: 230px;
  background-color: #221c50;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 14px;
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  /* 低いビューポートや拡大表示でメニューが見切れても到達できるよう縦スクロールを許可 */
  overflow-y: auto;
}

.company-sidebar__logo {
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  padding: 8px 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  margin-bottom: 8px;
}

.company-sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.company-sidebar__link {
  display: block;
  padding: 11px 14px;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  font-size: 0.92rem;
  transition: background-color 0.15s, color 0.15s;
}

.company-sidebar__link:hover {
  background-color: rgba(255, 255, 255, 0.08);
  color: #fff;
}

/* キーボード操作時のフォーカス可視化（暗い背景なので白いリング） */
.company-sidebar__link:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -2px;
}

.company-sidebar__link.is-active {
  background-color: var(--color-info, #4f7df9);
  color: #fff;
}

/* サイドバー最下部の補助導線（admin 画面リンク＋規約類）をまとめて下端に寄せる。
   下寄せはこのラッパが担うため、中の各ブロックには margin-top: auto を持たせない。 */
.company-sidebar__foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* admin企業のみ表示する /admin ↔ /company 行き来リンク。区切り線つきで出す。 */
.company-sidebar__switch {
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* 規約・プライバシーポリシー・お問い合わせ。/company 配下は求職者向けフッターを
   出さないため、企業側からの到達手段はここになる。主導線より控えめな見た目にする。 */
.company-sidebar__legal {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 8px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  list-style: none;
}

.company-sidebar__legal-link {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.75rem;
  text-decoration: none;
}

.company-sidebar__legal-link:hover {
  color: #fff;
  text-decoration: underline;
}

/* キーボード操作時のフォーカス可視化（暗い背景なので白いリング）。
   文字だけのリンクなのでリングは外側に出す（.company-sidebar__link は内側）。 */
.company-sidebar__legal-link:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* 右側のコンテンツ領域 */
.company-content {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* 会社名・ログアウトを右上部に表示するトップバー */
.company-topbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  /* 左右余白を company-main（32px）と揃え、コンテンツの端と整列させる */
  padding: 12px 32px;
  background-color: #fff;
  border-bottom: 1px solid var(--color-border, #e6e9ec);
}

.company-topbar__name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text-primary, #2d3436);
}

.company-topbar__logout {
  font-size: 0.85rem;
  color: var(--color-info, #4f7df9);
  text-decoration: none;
}

.company-topbar__logout:hover {
  text-decoration: underline;
}

.company-topbar__user {
  font-size: 0.85rem;
  color: var(--color-text-secondary, #768390);
}

/* セクション内のサブメニュー（横型ヘッダータブ）
   アカウント行（白い topbar）とは別レベルであることが分かるよう、淡いグレー地＋
   左端の親メニュー名で「親メニューの中のタブ」という入れ子構造を示す。 */
.company-subnav {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 0;
  /* 左右余白を company-main（32px）と揃え、タブの左端をコンテンツと整列させる */
  padding: 0 32px;
  background-color: #eef1f6;
  border-bottom: 1px solid var(--color-border, #e6e9ec);
}

/* 左端に出す親メニュー名（このタブ群がどのメインメニュー配下かを示す） */
.company-subnav__parent {
  display: flex;
  align-items: center;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--color-text-primary, #2d3436);
  padding: 14px 0;
}

/* 親メニュー名とタブ群の区切り線 */
.company-subnav__divider {
  align-self: center;
  width: 1px;
  height: 18px;
  background-color: var(--color-border, #cdd3da);
  margin: 0 16px;
}

.company-subnav__tabs {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 4px 20px;
}

.company-subnav__link {
  padding: 14px 2px;
  color: var(--color-text-secondary, #6c757d);
  text-decoration: none;
  font-size: 0.9rem;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}

.company-subnav__link:hover {
  color: var(--color-text-primary, #2d3436);
}

/* キーボード操作時のフォーカス可視化（明るい背景なので info カラーのリング） */
.company-subnav__link:focus-visible {
  outline: 2px solid var(--color-info, #4f7df9);
  outline-offset: 2px;
}

.company-subnav__link.is-active {
  color: var(--color-info, #4f7df9);
  border-bottom-color: var(--color-info, #4f7df9);
  font-weight: 600;
}

.company-main {
  flex: 1 1 auto;
  /* サイドバー以外のコンテンツ領域は画面いっぱいに使う。
     以前は max-width: 1100px + margin: 0 auto で中央寄せしていたが、
     ワイドモニタで右側が大きく余るため全幅化した。各ページのテーブル・
     カードグリッド等は幅可変なので、広い分だけ情報量を増やせる。 */
  width: 100%;
  min-width: 0;
  padding: 32px 32px 60px;
}

/* 狭い画面ではサイドバーを上部の横並びに切り替える */
@media (max-width: 768px) {
  .company-layout {
    flex-direction: column;
  }

  .company-sidebar {
    flex-basis: auto;
    width: 100%;
    height: auto;
    position: static;
    padding: 12px 16px;
  }

  .company-sidebar__logo {
    padding-bottom: 12px;
    margin-bottom: 4px;
  }

  .company-sidebar__nav {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
  }

  /* サイドバーが横並びバーになると縦積みのままでは本文の上に 3 行分積まれるため、
     メニューと同じく横並びに寄せる（.company-sidebar__legal の基底は column）。
     __foot の margin-top: auto はこの並びでは余白が生まれず無効になるだけなので触らない。 */
  .company-sidebar__legal {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px 16px;
  }

  /* 狭い画面では 32px の左右余白は広すぎるので詰めて、本文の表示幅を確保する */
  .company-main {
    padding: 20px 16px 48px;
  }

  .company-topbar {
    padding: 12px 16px;
  }

  .company-subnav {
    padding: 0 16px;
  }
}

/* ダッシュボード */
.company-dashboard__title {
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 24px;
}

.company-dashboard__summary {
  display: flex;
  gap: 16px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.summary-card {
  background: #fff;
  border: 1px solid #e6e3f5;
  border-radius: 10px;
  padding: 20px 28px;
  min-width: 140px;
  text-align: center;
}

.summary-card__value {
  font-size: 2rem;
  font-weight: 700;
  color: #4f7df9;
}

.summary-card__label {
  font-size: 0.85rem;
  color: #768390;
  margin-top: 4px;
}

.company-dashboard__actions {
  display: flex;
  gap: 12px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.company-dashboard__recent h2 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 12px;
  color: #2d3436;
}

.company-dashboard__empty {
  color: #768390;
  font-size: 0.95rem;
  margin-top: 16px;
}

/* 求人一覧ヘッダー: タイトルと「新しい求人を作成」ボタン */
.company-jobs__header h1 {
  margin-bottom: 4px;
}

.company-jobs__header .btn {
  margin-top: 12px;
  margin-bottom: 20px;
}

/* 求人一覧: 総件数と表示範囲 */
.company-jobs__count {
  color: #768390;
  font-size: 0.9rem;
  margin-bottom: 8px;
}

/* 求人テーブル */
.job-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #e6e3f5;
  margin-bottom: 32px;
}

.job-table th,
.job-table td {
  padding: 12px 16px;
  text-align: left;
  font-size: 0.9rem;
  border-bottom: 1px solid #f0f2f5;
}

.job-table th {
  background-color: #f8f9fb;
  font-weight: 600;
  color: #636e72;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

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

.job-table tr:hover td {
  background-color: #fafbfc;
}

/* 操作ボタン（編集・非公開にする 等）を横並び＋間隔を空けて表示する。
   button_to が生成する form が縦積みにならないよう margin を消す。 */
.job-table__actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.job-table__actions form {
  margin: 0;
}

/* バッジ */
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.78rem;
  font-weight: 600;
}

.badge--published {
  background-color: #d4edda;
  color: #155724;
}

.badge--draft {
  background-color: #e2e3e5;
  color: #383d41;
}

.badge--expired {
  background-color: #fff3cd;
  color: #856404;
}

/* シークレット（限定公開）: スカウトで送った求職者のみ閲覧できる求人 */
.badge--secret {
  background-color: #e7dcfb;
  color: #5a34a6;
}

/* ページヘッダー */
.page-header {
  margin-bottom: 28px;
}

.page-header__nav {
  margin-bottom: 8px;
}

.page-header__title {
  font-size: 1.6rem;
  font-weight: 700;
  color: #221c50;
}

.page-header__subtitle {
  font-size: 0.9rem;
  color: #768390;
  margin-top: 4px;
}

/* アカウント管理（メンバー一覧・招待／編集フォーム） */
.member-index-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.page-lead {
  margin: -12px 0 20px;
  font-size: 0.9rem;
  color: #768390;
}

.member-form {
  max-width: 560px;
}

/* メンバー招待: 権限セレクトの下に置く、権限（ロール）ごとにできることの対応表。
   fieldset 内はページ背景（淡いグレー）が透けるため、白＋枠線でひとまとまりに見せる。
   角丸を保つため border-collapse は separate のままにし、区切り線はセル側の
   border-top / border-right で引く（collapse だと角がセルに覆われて丸まらない）。 */
.role-hints {
  width: 100%;
  margin: 8px 0 0;
  border-collapse: separate;
  border-spacing: 0;
  background-color: #fff;
  border: 1px solid #e6e3f5;
  border-radius: 6px;
  font-size: 0.8rem;
  line-height: 1.6;
  color: #636e72;
}

.role-hints th,
.role-hints td {
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
}

/* 見出し行 */
.role-hints__head {
  background-color: #f6f4fd;
  font-weight: 600;
  color: #2d3436;
}

/* 表の角丸は外枠にしか効かないため、背景を敷く見出しセルにも同じ半径を与える */
.role-hints__head:first-child {
  border-top-left-radius: 5px;
}

.role-hints__head:last-child {
  border-top-right-radius: 5px;
}

/* 行の区切り線（見出し行と本文の境目もこの線が兼ねる） */
.role-hints tbody th,
.role-hints tbody td {
  border-top: 1px solid #e6e3f5;
}

/* 権限名の列。列の区切り線を引き、薄く色を敷いて見出し列だと分かるようにする */
.role-hints__term {
  width: 6.5em;
  font-weight: 600;
  color: #2d3436;
  white-space: nowrap;
  background-color: #fbfaff;
  border-right: 1px solid #e6e3f5;
}

.role-hints__head--term {
  width: 6.5em;
  border-right: 1px solid #e6e3f5;
}

.role-hints tbody tr:last-child .role-hints__term {
  border-bottom-left-radius: 5px;
}

/* 狭い画面では 2 列のままだと説明の幅が足りなくなるので、余白を詰めて表の形は保つ */
@media (max-width: 560px) {
  .role-hints th,
  .role-hints td {
    padding: 6px 8px;
  }

  .role-hints__term,
  .role-hints__head--term {
    width: 5em;
  }
}

/* 送信ボタンとキャンセルリンクを横並びにする */
.form-actions--inline {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* 応募者一覧: 絞り込み結果のサマリー */
.applicant-summary {
  font-size: 0.9rem;
  color: #636e72;
  margin-bottom: 12px;
}

/* 応募者一覧: 応募者ごとのカード（横長・多カラム）
   PORTERS の候補者一覧を参考に、1 件を「応募求人 / プロフィール / 学歴・経験 /
   アクション」の 4 カラムに横分割し、全幅を活かして 1 件あたりの情報量を増やす。 */
.applicant-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* カードの縦積み判定を「本文領域(=このリスト)の実幅」基準で行うためのコンテナ。
     企業画面は左サイドバー(230px)＋左右余白(64px)を消費するので、ビューポート幅基準だと
     実効幅を取り違え、961〜1154px 付近で 4 カラムがはみ出す（Codex 指摘）。コンテナクエリに
     すればサイドバー有無・幅に依らず、本文が狭いときだけ確実に 1 カラム化できる。 */
  container-type: inline-size;
  container-name: applicants;
}

.applicant-card {
  display: grid;
  /* 求人 / プロフィール / 学歴・経験 / アクション。アクション列は固定寄りで右端に。 */
  grid-template-columns: minmax(240px, 1.1fr) minmax(240px, 1.2fr) minmax(220px, 1.3fr) minmax(160px, 0.55fr);
  background: #fff;
  border: 1px solid #e6e3f5;
  border-radius: 10px;
  overflow: hidden;
}

/* 未読の応募は左端にアクセントを入れて見つけやすくする */
.applicant-card.is-unread {
  box-shadow: inset 4px 0 0 var(--color-accent, #ffd400);
}

/* 各カラム。2 本目以降は左に区切り線を入れて列を視覚的に分ける */
.applicant-card__col {
  min-width: 0;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.applicant-card__col + .applicant-card__col {
  border-left: 1px solid #eef1f4;
}

/* --- 1) 応募求人列 --- */
.applicant-card__job-no {
  font-size: 0.75rem;
  color: #8a93a0;
}

.applicant-card__job-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #2d3436;
  line-height: 1.4;
}

/* 求人タイトルを求人詳細（編集）画面へのリンクにする。タイトルの太字・濃色は保ちつつ、
   ホバーで色変化＋下線を出してクリック可能であることを示す（グローバルの a は色継承・下線なしのため） */
a.applicant-card__job-link:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.applicant-card__job-facts {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 2px 0 0;
}

.applicant-card__job-facts > div {
  display: flex;
  gap: 8px;
  font-size: 0.82rem;
}

.applicant-card__job-facts dt {
  flex-shrink: 0;
  color: #8a93a0;
}

.applicant-card__job-facts dd {
  margin: 0;
  color: #495057;
}

.applicant-card__applied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 4px;
  font-size: 0.8rem;
  color: #8a93a0;
}

/* --- 2) プロフィール列 --- */
.applicant-card__profile-col {
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
}

/* 顔写真の代わりに氏名イニシャルのプレースホルダーを表示する */
.applicant-card__avatar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(79, 125, 249, 0.12);
  color: #3b63d8;
  font-weight: 700;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
}

.applicant-card__profile-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.applicant-card__name {
  color: #4f7df9;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
}

.applicant-card__name:hover {
  text-decoration: underline;
}

.applicant-card__current {
  font-size: 0.85rem;
  color: #2d3436;
}

.applicant-card__attrs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 0.82rem;
  color: #636e72;
}

.applicant-card__sub {
  font-size: 0.8rem;
  color: #768390;
}

.applicant-card__unread {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
  background: var(--color-primary);
}

/* --- 3) 学歴・経験列 --- */
.applicant-card__qual {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 0.82rem;
  line-height: 1.5;
  color: #495057;
}

/* 求職者への公開ステータスセル（一覧・詳細共通）。バッジと未反映表示・反映ボタンを縦に並べる */
.visibility-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.applicant-card__qual-icon {
  flex-shrink: 0;
  line-height: 1.4;
}

.applicant-card__qual-label {
  color: #8a93a0;
}

/* --- 4) アクション列 --- */
.applicant-card__action-col {
  /* 参考デザインに合わせ、操作領域を淡い背景で区別する */
  background: #fff8e6;
  justify-content: flex-start;
  gap: 10px;
}

.applicant-card__action-col .status-select {
  width: 100%;
}

/* 社内ステータス・求職者公開をそれぞれラベル付きの小ブロックにして区別する */
.applicant-card__status-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
}

.applicant-card__status-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: #8a93a0;
}

/* 本文領域が狭いとき（4 カラムの最小合計 ≒ 860px を下回る）は縦積みにし、
   区切りは上罫線へ切り替える。ビューポートではなくコンテナ(.applicant-cards)幅で判定する。 */
@container applicants (max-width: 960px) {
  .applicant-card {
    grid-template-columns: 1fr;
  }

  .applicant-card__col + .applicant-card__col {
    border-left: 0;
    border-top: 1px solid #eef1f4;
  }

  .applicant-card__applied {
    margin-top: 4px;
  }
}

/* 応募者詳細: 職務経歴・学歴のタイムライン風リスト */
.detail-history {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.detail-history__period {
  font-size: 0.8rem;
  color: #636e72;
}

.detail-history__title {
  font-size: 0.95rem;
  color: #2d3436;
}

.detail-history__tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 0.72rem;
  background: #f1f3f5;
  color: #6c757d;
}

.detail-history__desc {
  margin-top: 4px;
  font-size: 0.88rem;
  color: #4a4f54;
  /* 職務経歴の説明文も全幅で間延びしないよう行長を抑える */
  max-width: 760px;
}

/* ステータスバッジ（企業管理） */
.status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
}

/* メインカラー 4 色 + 無彩色（グレー）でステータスを表現する */
.status-badge--pending    { background: rgba(79, 125, 249, 0.12); color: #3b63d8; }   /* info（青） */
.status-badge--reviewing  { background: rgba(255, 221, 0, 0.20);  color: #8a7400; }   /* accent（黄） */
.status-badge--interview  { background: rgba(79, 125, 249, 0.18); color: #3b63d8; }   /* info 濃い */
.status-badge--offered    { background: rgba(112, 212, 75, 0.18); color: #4a9a2c; }   /* success（緑） */
.status-badge--rejected   { background: rgba(240, 86, 159, 0.15); color: #b13883; }  /* primary（ピンク） */
.status-badge--withdrawn  { background: #f1f3f5; color: #6c757d; }                    /* グレー */
/* Scout 用ステータス（accepted / declined） */
.status-badge--accepted   { background: rgba(112, 212, 75, 0.18); color: #4a9a2c; }   /* success（緑） */
.status-badge--declined   { background: #f1f3f5; color: #6c757d; }                    /* グレー */

/* お気に入り一覧: 1 件を「求職者属性 / 学歴・経験 / お気に入り求人」の 3 カラムに分割。
   お気に入りは応募・承諾ではないため氏名・連絡先は出さず、公開中の求職者のみ詳細へ誘導する。
   応募者カード(.applicant-card)と同じ要領で、本文領域(.favorite-cards)幅基準で縦積み判定する。 */
.favorite-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  container-type: inline-size;
  container-name: favorites;
}

.favorite-card {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(220px, 1.2fr) minmax(240px, 1.3fr);
  background: #fff;
  border: 1px solid #e6e3f5;
  border-radius: 10px;
  overflow: hidden;
}

.favorite-card__col {
  min-width: 0;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.favorite-card__col + .favorite-card__col {
  border-left: 1px solid #eef1f4;
}

.favorite-card__no {
  font-size: 0.8rem;
  font-weight: 600;
  color: #8a93a0;
}

.favorite-card__attrs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 0.85rem;
  color: #636e72;
}

.favorite-card__sub {
  font-size: 0.8rem;
  color: #768390;
}

.favorite-card__qual {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 0.82rem;
  line-height: 1.5;
  color: #495057;
}

.favorite-card__qual-icon {
  flex-shrink: 0;
  line-height: 1.4;
}

.favorite-card__job-no {
  font-size: 0.75rem;
  color: #8a93a0;
}

.favorite-card__job-title {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.4;
  color: #2d3436;
}

/* 求人タイトルを求人詳細（編集）画面へのリンクにする（応募者一覧と同じ挙動）。
   タイトルの太字・濃色は保ちつつ、ホバーで色変化＋下線を出してクリック可能であることを示す */
a.favorite-card__job-link:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.favorite-card__job-facts {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 2px 0 0;
}

.favorite-card__job-facts > div {
  display: flex;
  gap: 8px;
  font-size: 0.82rem;
}

.favorite-card__job-facts dt {
  flex-shrink: 0;
  color: #8a93a0;
}

.favorite-card__job-facts dd {
  margin: 0;
  color: #495057;
}

.favorite-card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 6px;
  font-size: 0.8rem;
  color: #8a93a0;
}

@container favorites (max-width: 820px) {
  .favorite-card {
    grid-template-columns: 1fr;
  }

  .favorite-card__col + .favorite-card__col {
    border-left: none;
    border-top: 1px solid #eef1f4;
  }
}

/* スカウト履歴 / メッセージ一覧: 絞り込み・並び替えツールバー */
/* 応募者管理 / 求人管理: 検索条件をカードで囲んでひとまとまりにし、検索ボタンで明示的に適用する */
.applicant-filter,
.job-filter {
  background: #fff;
  border: 1px solid #e6e3f5;
  border-radius: 10px;
  padding: 20px 24px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* カード内のフィールド群は scout-toolbar のレイアウトを流用しつつ、下マージンは消す
   （直後のアクション行を区切り線付きで続けるため） */
.applicant-filter .scout-toolbar,
.job-filter .scout-toolbar {
  margin-bottom: 0;
}

/* 検索ボタン・リセットを中央に配置し、フィールド群と区切り線で分ける。
   狭い画面でボタン(min-width 220px)＋リセットが 1 行に収まらないため折り返しを許可する。 */
.applicant-filter__actions,
.job-filter__actions {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid #f0f2f5;
}

.applicant-filter__submit,
.job-filter__submit {
  min-width: 220px;
}

/* モバイルではカード余白を詰め、アクションは縦積み＋全幅にして横溢れを防ぐ */
@media (max-width: 768px) {
  .applicant-filter,
  .job-filter {
    padding: 16px;
  }

  .applicant-filter__actions,
  .job-filter__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .applicant-filter__submit,
  .job-filter__submit {
    min-width: 0;
    width: 100%;
  }
}

.scout-toolbar,
.conversation-toolbar {
  display: flex;
  gap: 20px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.scout-toolbar__group,
.conversation-toolbar__group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 180px;
}

.scout-toolbar__label,
.conversation-toolbar__label {
  font-size: 0.8rem;
  font-weight: 600;
  color: #636e72;
}

/* ツールバー内の select は幅を揃えて少し小さくする。
   ドロップダウンの ∨ と右側の余白（padding-right）は、フォームの select 共通の指定（.form-select の後）に任せる
   （一括指定で右を書いても共通の指定に上書きされるので、右以外だけ書く） */
.scout-toolbar .form-select,
.conversation-toolbar .form-select {
  width: 100%;
  padding-block: 8px;
  padding-left: 12px;
  font-size: 0.9rem;
}

/* メッセージ一覧・応募者管理: 「未読のみ」を select と揃えたボーダー付きトグルにして統一感を出す。
   ラベルを持たないぶん flex-end で select のボックス下端と基準線を合わせる。 */
.conversation-toolbar__group--checkbox,
.scout-toolbar__group--checkbox {
  min-width: auto;
}

.conversation-toolbar__checkbox,
.scout-toolbar__checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 0.9rem;
  color: #2d3436;
  background: #fff;
  border: 1.5px solid #dfe6e9;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
}

/* キーボード操作時に内部の checkbox がフォーカスされたら、select(.form-select:focus)
   と同じフォーカス表現にして操作性を揃える。 */
.conversation-toolbar__checkbox:focus-within,
.scout-toolbar__checkbox:focus-within {
  outline: none;
  border-color: var(--color-info);
  box-shadow: 0 0 0 3px rgba(79, 125, 249, 0.12);
}

.conversation-toolbar__checkbox input[type="checkbox"],
.scout-toolbar__checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--color-primary);
  cursor: pointer;
}

/* 応募者管理ツールバー: キーワード入力（テキスト）を select と同じ高さ・字面に揃える。 */
.scout-toolbar .form-input {
  width: 100%;
  padding: 8px 12px;
  font-size: 0.9rem;
}

/* キーワードは入力幅を広めに取る。 */
.scout-toolbar__group--wide {
  min-width: 240px;
  flex: 1 1 240px;
}

/* 年齢・現在年収の「下限〜上限」を 1 行に並べる。 */
.scout-toolbar__range {
  display: flex;
  align-items: center;
  gap: 8px;
}

.scout-toolbar__range-sep {
  color: #636e72;
  flex-shrink: 0;
}

/* スカウト履歴: 候補者カード一覧 */
.scout-cards {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.scout-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  background: #fff;
  border: 1px solid #e6e3f5;
  border-radius: 10px;
}

.scout-card__body {
  flex: 1;
  min-width: 0;
}

.scout-card__heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.scout-card__name {
  font-size: 1rem;
  font-weight: 700;
  color: #221c50;
}

.scout-card__job {
  font-size: 0.9rem;
  color: #636e72;
  margin: 0 0 8px;
}

.scout-card__meta {
  display: flex;
  gap: 16px;
  font-size: 0.8rem;
  color: #768390;
}

.scout-card__unread {
  color: var(--color-info, #4f7df9);
  font-weight: 600;
}

.scout-card__actions {
  flex-shrink: 0;
}

/* ステータス選択ドロップダウン */
.status-select {
  padding: 6px 10px;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  font-size: 0.85rem;
  background: #fff;
  cursor: pointer;
  color: #2d3436;
}

/* 空状態 */
.empty-state {
  text-align: center;
  padding: 60px 24px;
  color: #768390;
}

.empty-state__message {
  margin-bottom: 16px;
  font-size: 1rem;
}

.empty-state__hint {
  font-size: 0.88rem;
  color: #8a94a0;
  margin: 0 0 20px;
}

/* 応募者詳細ページ */
.applicant-detail__layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 24px;
  align-items: start;
}

/* 応募者詳細サイドバー: 「メッセージを見る」ボタンと選考ステータスカードの間に余白を空ける */
.applicant-detail__message-link {
  margin-bottom: 16px;
}

.detail-section {
  background: #fff;
  border: 1px solid #e6e3f5;
  border-radius: 10px;
  padding: 20px 24px;
  margin-bottom: 16px;
}

.detail-section__title {
  font-size: 1rem;
  font-weight: 700;
  color: #221c50;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid #4f7df9;
}

.detail-section__empty {
  font-size: 0.875rem;
  color: #768390;
  margin: 0;
}

.detail-list {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 10px 16px;
  font-size: 0.9rem;
}

.detail-list dt {
  color: #768390;
  font-weight: 600;
}

.detail-list dd {
  color: #2d3436;
}

/* 応募者詳細・メッセージ画面の求人名を求人詳細（編集）画面へのリンクにする。
   グローバルの a は色継承・下線なしのため、プライマリ色＋ホバー下線でリンクと分かるようにする */
.job-detail-link {
  color: var(--color-primary);
  font-weight: 600;
}

.job-detail-link:hover {
  color: var(--color-primary-hover);
  text-decoration: underline;
}

.cover-letter {
  font-size: 0.9rem;
  line-height: 1.8;
  color: #2d3436;
  white-space: pre-wrap;
  /* 全幅レイアウトでも 1 行が長くなりすぎないよう、自由記述は読みやすい行長に収める */
  max-width: 760px;
}

.bio-text {
  font-size: 0.9rem;
  line-height: 1.8;
  color: #2d3436;
  /* 同上: 自己PR等の自由記述は読みやすい行長に収める */
  max-width: 760px;
}

/* 応募者詳細の「履歴書・職務経歴書」セクション（求職者登録のDL＋企業の応募単位添付） */
.applicant-documents {
  margin-bottom: 16px;
}

.applicant-documents:last-child {
  margin-bottom: 0;
}

.applicant-documents__subtitle {
  font-size: 0.85rem;
  font-weight: 700;
  color: #768390;
  margin-bottom: 8px;
}

.applicant-documents__list {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
}

.applicant-documents__item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid #eef1f5;
  font-size: 0.9rem;
}

.applicant-documents__item:last-child {
  border-bottom: none;
}

.applicant-documents__label {
  min-width: 96px;
  color: #768390;
  font-weight: 600;
}

.applicant-documents__link {
  color: var(--color-primary);
  font-weight: 600;
  word-break: break-all;
}

.applicant-documents__link:hover {
  text-decoration: underline;
}

.applicant-documents__size {
  color: #768390;
  font-size: 0.8rem;
}

.applicant-documents__empty {
  color: #99a3ad;
}

/* 削除ボタンを行末へ寄せ、ファイル名と視覚的に切り離す */
.applicant-documents__delete {
  margin-left: auto;
}

.applicant-documents__form {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.applicant-documents__file {
  flex: 1 1 240px;
}

/* ステータス更新カード（サイドバー） */
.status-card {
  background: #fff;
  border: 1px solid #e6e3f5;
  border-radius: 10px;
  padding: 20px 24px;
  position: sticky;
  top: 24px;
}

.status-card__title {
  font-size: 1rem;
  font-weight: 700;
  color: #221c50;
  margin-bottom: 14px;
}

.status-card__current {
  margin-bottom: 16px;
}

.status-card__form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.status-card__form .status-select {
  width: 100%;
}

.btn--full {
  width: 100%;
  text-align: center;
}

/* ========================================
   メッセージ機能
   ======================================== */

.conversation-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
}

.conversation-item {
  display: block;
  padding: 16px 20px;
  background: #fff;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--color-border);
  transition: background 0.15s;
}

.conversation-item:last-child {
  border-bottom: none;
}

.conversation-item:hover {
  background: #f8f9fa;
}

.conversation-item__header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}

.conversation-item__name {
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-text-primary);
}

.conversation-item__job {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
}

.conversation-item__preview {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.conversation-item__body {
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.conversation-item__date {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.conversation-item__empty {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin: 0;
}

/* 会話詳細: 左にプロフィールパネル、右にメッセージスレッドの2カラムレイアウト。
   左パネルはスクロール追従にしてプロフィールを参照しながら返信できるようにする。
   プロフィール情報の参照性を優先し、左右ほぼ同じ幅（メッセージ側はやや狭め）に取る。 */
.conversation-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.conversation-layout__profile {
  /* タブ化に伴い、白カード・スクロールは内側の .side-tabs / .side-tabs__panel が持つ。
     ここはスクロール追従（sticky）の位置のみ担当する。 */
  position: sticky;
  top: 20px;
  min-width: 0;
}

.conversation-layout__profile .detail-section {
  margin-bottom: 16px;
}

.conversation-layout__profile .detail-section:last-child {
  margin-bottom: 0;
}

.conversation-layout__detail-link {
  margin-top: 12px;
  margin-bottom: 0;
}

.conversation-layout__messages {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

@media (max-width: 1024px) {
  .conversation-layout {
    grid-template-columns: 1fr;
  }
  .conversation-layout__profile {
    position: static;
    max-height: none;
  }
}

/* === 会話詳細(show)をウィンドウ高さにフィットさせる ===
   メッセージ表示領域を可変（残り高さいっぱい）にし、送信フォームを最下部に固定する。
   左パネルとスレッドはそれぞれ内部スクロールにする。新規スカウト(new)には適用しない。 */
.conversation-page--full {
  display: flex;
  flex-direction: column;
  /* 企業管理レイアウト: 上部バー＋メイン余白ぶんを差し引く（おおよそ） */
  height: calc(100dvh - 112px);
  min-height: 480px;
}

.conversation-page--full .conversation-header {
  flex-shrink: 0;
}

.conversation-page--full .conversation-layout {
  flex: 1;
  min-height: 0;
  align-items: stretch;
}

.conversation-page--full .conversation-layout__profile {
  position: static;
  top: auto;
  min-height: 0;
  overflow-y: auto;
}

.conversation-page--full .conversation-layout__messages {
  min-height: 0;
}

.conversation-page--full .message-thread-wrap {
  flex: 1;
  min-height: 0;
  margin-bottom: 16px;
}

.conversation-page--full .message-thread {
  height: 100%;
  min-height: 0;
  max-height: none;
}

.conversation-page--full .message-form {
  flex-shrink: 0;
}

/* 求職者側のメッセージ詳細（公開レイアウト）。サイトヘッダーぶんを差し引く。 */
.conversation-thread-screen {
  display: flex;
  flex-direction: column;
  height: calc(100dvh - 140px);
  min-height: 460px;
  /* 旧: ビューの inline style で指定していた上下余白 */
  padding-top: 24px;
  padding-bottom: 24px;
}

/* メッセージ送信フォームのバリデーションエラー */
.conversation-thread-screen .form-error {
  margin-bottom: 8px;
  padding: 10px 14px;
  border: 1px solid #f5c6cb;
  border-radius: 10px;
  background: #fff0f0;
  color: #c0392b;
  font-size: 0.88rem;
}

.conversation-thread-screen .conversation-header {
  flex-shrink: 0;
}

.conversation-thread-screen .message-thread-wrap {
  flex: 1;
  min-height: 0;
  margin-bottom: 16px;
}

.conversation-thread-screen .message-thread {
  height: 100%;
  min-height: 0;
  max-height: none;
}

.conversation-thread-screen .message-form {
  flex-shrink: 0;
}

/* 狭い画面では高さフィットを解除し、従来どおり縦積み＋スレッドは画面の6割を上限にする */
@media (max-width: 1024px) {
  .conversation-page--full {
    height: auto;
    min-height: 0;
  }
  .conversation-page--full .conversation-layout__profile {
    overflow-y: visible;
  }
  .conversation-page--full .message-thread,
  .conversation-thread-screen .message-thread {
    height: auto;
    min-height: 300px;
    max-height: 60vh;
  }
  .conversation-thread-screen {
    height: auto;
    min-height: 0;
  }
}

/* 会話画面・左パネルのタブ（プロフィール/各履歴/共有メモ）。
   左側だけがタブ付きの独立カードだと一目で分かるようにまとまった見た目にする。 */
.side-tabs {
  background: #fff;
  border: 1px solid #e6e3f5;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.side-tabs__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 4px;
  padding: 0 12px;
  background-color: #eef1f6;
  border-bottom: 1px solid #e6e3f5;
}

.side-tabs__tab {
  appearance: none;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 12px 6px;
  font-size: 0.82rem;
  color: var(--color-text-secondary, #6c757d);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: color 0.15s, border-color 0.15s;
}

.side-tabs__tab:hover {
  color: var(--color-text-primary, #2d3436);
}

.side-tabs__tab:focus-visible {
  outline: 2px solid var(--color-info, #4f7df9);
  outline-offset: 2px;
}

.side-tabs__tab.is-active {
  color: var(--color-info, #4f7df9);
  border-bottom-color: var(--color-info, #4f7df9);
  font-weight: 600;
}

.side-tabs__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background-color: var(--color-accent, #f0932b);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
}

.side-tabs__panel {
  padding: 16px;
  max-height: calc(100vh - 260px);
  overflow-y: auto;
}

/* パネル内の detail-section は外枠（.side-tabs）と二重にならないよう間隔だけ持たせる */
.side-tabs__panel .detail-section {
  margin-bottom: 16px;
}

.side-tabs__panel .detail-section:last-child {
  margin-bottom: 0;
}

/* 左パネルの履歴テーブル（お気に入り/スカウト/応募） */
.side-history {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.side-history th,
.side-history td {
  text-align: left;
  padding: 8px 6px;
  border-bottom: 1px solid #eef1f6;
  vertical-align: top;
}

.side-history th {
  color: var(--color-text-secondary, #6c757d);
  font-weight: 600;
  white-space: nowrap;
}

.side-history__date {
  white-space: nowrap;
  color: var(--color-text-secondary, #6c757d);
}

/* 共有メモ */
.side-note__hint {
  font-size: 0.8rem;
  color: #6c757d;
  margin-bottom: 10px;
}

.side-note__input {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--color-border, #e6e3f5);
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.9rem;
  line-height: 1.6;
  resize: vertical;
  box-sizing: border-box;
}

.side-note__input:focus {
  outline: none;
  border-color: var(--color-primary, #f0569f);
  box-shadow: 0 0 0 3px rgba(123, 108, 246, 0.1);
}

.side-note__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}

.side-note__meta {
  font-size: 0.76rem;
  color: #6c757d;
}

.side-note__readonly {
  font-size: 0.9rem;
  line-height: 1.6;
}

/* 会話詳細 */
.conversation-header {
  margin-bottom: 24px;
}

.conversation-header__info {
  margin-top: 12px;
}

.conversation-header__company {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.conversation-header__job {
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  margin: 0;
}

/* NOTE: .back-link は求人詳細セクションの定義（グレー＋hover 青）に統一した
   （ここに旧ピンクの定義が残っていて全ページの「戻る」リンクを上書きしていた） */

/* メッセージスレッド */
.message-thread-wrap {
  position: relative;
  margin-bottom: 20px;
}

.message-thread {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 300px;
  max-height: 500px;
  overflow-y: auto;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
}

/* 新規スカウト作成画面など、まだメッセージが無い場面の空状態をコンパクトに表示する */
.message-thread--compact {
  min-height: auto;
  gap: 0;
  padding: 12px 16px;
}

.message-thread__empty-text--compact {
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* スクロールがあり最下部にいない場合のみ表示する「最新のメッセージ」ジャンプボタン */
.message-thread__jump {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 16px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #fff;
  background: var(--color-primary);
  border: none;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  white-space: nowrap;
  z-index: 2;
  transition: background-color 0.18s ease, opacity 0.18s ease;
}

.message-thread__jump:hover {
  background: var(--color-primary-hover);
}

/* hidden 属性での非表示を inline-flex より優先させる */
.message-thread__jump[hidden] {
  display: none;
}

/* メッセージがまだ無い場合の空状態（スレッド内に中央寄せで表示） */
.message-thread__empty {
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  color: var(--color-text-muted);
}

.message-thread__empty-icon {
  font-size: 2.4rem;
  line-height: 1;
  opacity: 0.7;
}

.message-thread__empty-text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.7;
}

.message-bubble {
  /* スレッドが全幅になっても 1 件の吹き出しが横長になりすぎないよう上限を設ける
     （70% と 680px の小さい方）。狭い画面では従来どおり 70% で振る舞う。 */
  max-width: min(70%, 680px);
  padding: 12px 16px;
  border-radius: 12px;
}

.message-bubble--mine {
  align-self: flex-end;
  background: var(--color-primary);
  color: #fff;
}

.message-bubble--theirs {
  align-self: flex-start;
  background: #fff;
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
}

.message-bubble__sender {
  font-size: 0.75rem;
  font-weight: 600;
  margin-bottom: 4px;
  opacity: 0.8;
}

.message-bubble__body {
  font-size: 0.95rem;
  line-height: 1.6;
}

.message-bubble__body p {
  margin: 0;
}

.message-bubble__time {
  font-size: 0.72rem;
  margin-top: 6px;
  opacity: 0.7;
  text-align: right;
}

/* メッセージ吹き出しに添付された求人カード。吹き出しの色（特に --mine のピンク）に
   溶けて読めなくならないよう、独立した薄色の枠として表示する。 */
.message-bubble__attachments {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.job-attach-card {
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--color-text-primary);
}

.job-attach-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.job-attach-card__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-secondary);
}

.job-attach-card__title {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 600;
}

.job-attach-card__title a {
  color: var(--color-info);
}

.job-attach-card__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-top: 12px;
}

/* button_to が生成する form の既定マージンを消し、gap で間隔を一定にする */
.job-attach-card__actions form {
  margin: 0;
}

/* 回答ボタンは押し間違えないよう十分な大きさ・最小幅を確保する */
.job-attach-card__actions .btn {
  min-width: 132px;
  justify-content: center;
}

/* スカウト辞退ダイアログ（辞退理由を入力して送信する）。
   * { margin: 0 } が dialog の既定 margin:auto を打ち消すため、明示して画面中央に表示する。 */
.decline-dialog {
  width: min(440px, 92vw);
  margin: auto;
  padding: 0;
  border: none;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  outline: none;
}

.decline-dialog::backdrop {
  background: rgba(0, 0, 0, 0.45);
}

.decline-dialog__form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
}

.decline-dialog__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.decline-dialog__title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text-primary);
}

.decline-dialog__close {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: none;
  border-radius: 8px;
  font-size: 22px;
  line-height: 1;
  color: var(--color-text-secondary);
  cursor: pointer;
}

.decline-dialog__close:hover {
  color: var(--color-text-primary);
  background: var(--color-bg-soft);
}

/* キーボード操作時のみ、ボタンの角丸に沿ったフォーカス枠を出す（開いた直後は textarea にフォーカスが当たる） */
.decline-dialog__close:focus-visible {
  outline: 2px solid var(--color-info);
  outline-offset: 2px;
}

.decline-dialog__note {
  margin: 0;
  font-size: 13px;
  color: var(--color-text-secondary);
}

.decline-dialog__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.decline-dialog__textarea {
  width: 100%;
  max-width: 100%;
  min-height: 80px;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  /* 右下のハンドルで縦横とも自由にリサイズできる（親ダイアログ幅まで） */
  resize: both;
}

.decline-dialog__textarea:focus {
  outline: none;
  border-color: var(--color-info);
  box-shadow: 0 0 0 3px rgba(79, 125, 249, 0.15);
}

.decline-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

/* 求職者の画面（マイページ・プロフィール編集）の書類のファイル名のリンク（DocumentPreviewHelper#document_link）。
   スマホではファイル名を押すのが PDF を開く唯一の方法なので、リンクと分かる色と下線にする（応募者詳細の書類のリンクと同じ色）。
   書類のファイル名だけに付ける（.profile-info-value の中のほかのリンクの見た目は変えない） */
.document-link {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-all;
}

.document-link:hover {
  text-decoration-thickness: 2px;
}

/* 書類（PDF）の「プレビュー」のボタン（PC だけ。shared/_document_preview_button・document_preview_controller.js）。
   ファイル名の横に添える控えめなボタン。ピンクで下線付きのファイル名のリンクと見分けがつくよう、灰色の小さな文字と目の
   アイコンにし、枠と背景は付けない。行の中の文字として置き（inline-block）ファイル名とベースラインをそろえ、押せる範囲は
   上下の padding で約 24px にとる（同じだけ負の margin で打ち消し、ファイル名の行の高さは変えない） */
.document-preview-button {
  display: inline-block;
  margin: -4px 0 -4px 6px;
  padding: 4px 4px;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--color-text-secondary);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  vertical-align: baseline;
  white-space: nowrap;
  cursor: pointer;
}

/* サーバーは hidden で出し、PC の条件に合うときだけ Stimulus が見せる。上の display が hidden 属性（ブラウザ既定の
   display: none）より強いので、ここで明示して隠す（無いとスマホにも出る） */
.document-preview-button[hidden] {
  display: none;
}

.document-preview-button:hover {
  color: var(--color-info);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.document-preview-button:focus-visible {
  outline: 2px solid var(--color-info);
  outline-offset: 1px;
}

/* アイコンは文字の中ほどにそろえる（ベースラインから少し下げる） */
.document-preview-button__icon {
  width: 14px;
  height: 14px;
  margin-right: 3px;
  vertical-align: -2px;
}

/* 応募者詳細の書類の行は flex の gap で間を空けるので、ボタン側の左の余白は付けない。
   行は上下の中央でそろえているが、「プレビュー」のある行はファイル名とベースラインでそろえる */
.applicant-documents__item .document-preview-button {
  margin-left: 0;
}

.applicant-documents__item:has(.document-preview-button) {
  align-items: baseline;
}

/* 書類（PDF）のプレビューのダイアログ（PC だけ）。画面の約 9 割に広げ、押した書類の PDF だけを大きく見せる。
   * { margin: 0 } が dialog の既定 margin:auto を打ち消すため、明示して画面中央に置く（.decline-dialog と同じ） */
.document-preview-dialog {
  width: min(1200px, 90vw);
  height: 90vh;
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  border: none;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  overflow: hidden;
  outline: none;
}

.document-preview-dialog[open] {
  display: flex;
  flex-direction: column;
}

.document-preview-dialog::backdrop {
  background: rgba(0, 0, 0, 0.45);
}

.document-preview-dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px 10px 20px;
  border-bottom: 1px solid var(--color-border);
}

/* 長いファイル名は 1 行で省略する（ボタンを押し出さない） */
.document-preview-dialog__title {
  min-width: 0;
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.document-preview-dialog__actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
}

.document-preview-dialog__close {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: none;
  border-radius: 8px;
  font-size: 22px;
  line-height: 1;
  color: var(--color-text-secondary);
  cursor: pointer;
}

.document-preview-dialog__close:hover {
  color: var(--color-text-primary);
  background: var(--color-bg-soft);
}

.document-preview-dialog__close:focus-visible {
  outline: 2px solid var(--color-info);
  outline-offset: 2px;
}

/* 読み込むまでの間、ブラウザの PDF 表示の地の色に近い灰色にして白く光らせない */
.document-preview-dialog__body {
  flex: 1;
  min-height: 0;
  background: #525659;
}

.document-preview-dialog__frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* メッセージ入力フォーム */
.message-form {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 16px;
  background: #fff;
}

.message-input {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 0.95rem;
  resize: vertical;
  font-family: inherit;
  line-height: 1.5;
  box-sizing: border-box;
}

.message-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(123, 108, 246, 0.1);
}

.message-form__footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 10px;
}

/* 新規スカウト作成フォーム（メッセージUIに統合した送信フォームの対象求人・テンプレ選択） */
.scout-compose__field {
  margin-bottom: 14px;
}

.scout-compose__label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: #2d3436;
  margin-bottom: 6px;
}

.scout-compose__select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 0.95rem;
  font-family: inherit;
  background: #fff;
  box-sizing: border-box;
}

.scout-compose__select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(123, 108, 246, 0.1);
}

.scout-compose__hint {
  display: block;
  font-size: 0.8rem;
  color: #636e72;
  margin-top: 6px;
  margin-bottom: 14px;
}

/* 企業管理画面用 */
.company-page {
  padding: 24px;
}

.company-page__title {
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 24px;
}

.empty-state {
  color: var(--color-text-secondary);
  text-align: center;
  padding: 40px 0;
}

/* ==============================================================
   求人入稿フォーム（/company/jobs/new, /company/jobs/:id/edit）
   2 カラムカード型レイアウト。参考: PORTERS / NextInJapan の入稿画面
   ============================================================== */
.job-form {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 8px;
}

.job-form .form-errors {
  background-color: #fff3f3;
  border: 1px solid #f5b5b5;
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 20px;
  color: #b73838;
}

.job-form .form-errors__title {
  margin: 0 0 8px;
  font-size: 0.95rem;
  font-weight: 700;
}

.job-form .form-errors ul {
  margin: 0;
  padding-left: 20px;
}

/* 必須項目の「必須」バッジ（* の代わり。赤系で目立たせる） */
.job-form .required-mark {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.4;
  color: #e03131;
  background-color: #fff0f0;
  border: 1px solid #ffc9c9;
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 6px;
  vertical-align: middle;
}

/* バリデーションエラー時の入力欄装飾。
   field_error_proc（config/initializers/field_error_proc.rb）が入力系だけを
   .field-error-wrap で包む。ラッパーは display:contents でレイアウトに影響させず、
   内側の入力を赤枠＋淡赤背景にして「どこでエラーが出ているか」を分かりやすくする。 */
.field-error-wrap {
  display: contents;
}

.job-form .field-error-wrap .form-control {
  border-color: #e03131;
  background-color: #fff5f5;
}

.job-form .field-error-wrap .form-control:focus {
  border-color: #e03131;
  box-shadow: 0 0 0 3px rgba(224, 49, 49, 0.18);
}

/* セクション = カード */
.job-form .form-section {
  background-color: #fff;
  border: 1px solid #e6e9ec;
  border-radius: 10px;
  margin-bottom: 20px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.job-form .form-section-header {
  background: var(--color-info);
  color: #fff;
  padding: 14px 20px;
  display: flex;
  align-items: center;
}

.job-form .form-section-toggle {
  background: transparent;
  border: 0;
  -webkit-appearance: none;
  appearance: none;
  color: #fff;
  font-size: 1.05rem;
  font-weight: 700;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  box-shadow: none;
  outline: none;
  font-family: inherit;
  text-decoration: none;
}

.job-form .form-section-toggle:hover,
.job-form .form-section-toggle:active,
.job-form .form-section-toggle:focus {
  background: transparent;
  outline: none;
  box-shadow: none;
  text-decoration: none;
  color: #fff;
}

/* キーボード操作時のみフォーカスリングを表示（マウスクリック時は出さない） */
.job-form .form-section-toggle:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.7);
  outline-offset: 2px;
}

.job-form .form-section-toggle::before {
  content: "▼";
  display: inline-block;
  font-size: 0.75rem;
  line-height: 1;
  color: #fff;
  transition: transform 0.15s;
  flex-shrink: 0;
}

.job-form .form-section-toggle[aria-expanded="false"]::before {
  transform: rotate(-90deg);
}

.job-form .form-section-body {
  padding: 0;
}

/* 2 カラム grid: 左ラベル / 右入力 */
.job-form .form-group {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 0;
  border-top: 1px solid #f0f2f4;
  margin: 0;
}

.job-form .form-section-body > .form-group:first-child {
  border-top: 0;
}

/* 左：ラベル列 */
.job-form .form-group > label {
  background-color: #f7f8fa;
  padding: 16px 18px;
  font-size: 0.92rem;
  font-weight: 600;
  color: #2d3436;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  border-right: 1px solid #f0f2f4;
}

/* 右：入力列 */
.job-form .form-group > .form-field {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background-color: #fff;
}

/* 入力欄を横並びに（時刻 3 つ並べるなど） */
.job-form .form-field-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.job-form .form-field-row > .form-field-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 140px;
}

.job-form .form-field-cell > .form-field-label {
  font-size: 0.82rem;
  color: #495057;
  font-weight: 500;
}

/* 入力コントロール */
.job-form .form-control {
  display: block;
  width: 100%;
  padding: 10px 14px;
  font-size: 0.95rem;
  line-height: 1.5;
  border: 1.5px solid #dfe6e9;
  border-radius: 8px;
  background-color: #fff;
  color: #2d3436;
  transition: border-color 0.15s, box-shadow 0.15s;
  font-family: inherit;
  box-sizing: border-box;
}

.job-form .form-control:focus {
  outline: none;
  border-color: var(--color-info);
  box-shadow: 0 0 0 3px rgba(79, 125, 249, 0.15);
}

.job-form textarea.form-control {
  resize: vertical;
  min-height: 80px;
}

.job-form input[type="time"].form-control,
.job-form input[type="date"].form-control,
.job-form input[type="datetime-local"].form-control,
.job-form input[type="number"].form-control {
  max-width: 240px;
}

/* ラジオ / チェックボックスの選択肢群（横折り返し。基底 .filter-checkboxes の
   flex-direction: column を上書きして横並びにする） */
.job-form .radio-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.92rem;
  cursor: pointer;
  padding: 4px 0;
}

.job-form .radio-label input[type="radio"] {
  margin: 0;
}

.job-form .filter-checkboxes {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px 18px;
}

.job-form .filter-checkboxes .checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  cursor: pointer;
  padding: 2px 0;
}

/* form-row の inline (Now ボタン等) */
.job-form .form-row-inline {
  display: flex;
  align-items: center;
  gap: 8px;
}

.job-form .form-row-inline .form-control {
  flex: 1;
}

/* hint テキスト */
.job-form .form-hint {
  font-size: 0.82rem;
  color: #6c757d;
  margin: 0;
}

/* 公開設定の説明（公開（匿名）/ シークレット / 非公開）。1 項目 1 行で、
   ラベルを太字にして「ラベル → 説明」が目で追いやすいようにする。 */
.visibility-hint {
  list-style: none;
  margin: 6px 0 0;
  padding: 8px 12px;
  background-color: #f8f9fa;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.visibility-hint li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.5;
}

.visibility-hint__label {
  font-weight: 700;
  color: #2d3436;
}

.visibility-hint__desc {
  color: #636e72;
}

/* 運営の「設定」で扱わない（オフ）給与種別の入力欄に出す注意書き（赤文字） */
.job-form .salary-disabled-note {
  font-size: 0.82rem;
  color: #c53030;
  font-weight: 600;
  margin: 4px 0 0;
}

/* セクションヘッダの色バリエーション（任意で個別指定） */
.job-form .form-section[data-tone="navy"] .form-section-header { background: #2c3e50; }
.job-form .form-section[data-tone="green"] .form-section-header { background: #2c7a5b; }

/* フォーム下部のアクション */
.job-form .form-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
  padding: 0 8px 40px;
}

.job-form .form-actions .btn {
  min-width: 180px;
}

/* 必須バッジ（label 内に "*" が入っているのを CSS で赤バッジに装飾） */
.job-form .form-group > label,
.job-form .form-row > label {
  white-space: pre-wrap;
}

/* レスポンシブ: 768px 以下は 1 カラム */
@media (max-width: 768px) {
  .job-form .form-row,
  .job-form .form-group {
    grid-template-columns: 1fr;
  }

  .job-form .form-group > label,
  .job-form .form-row > label {
    border-right: 0;
    border-bottom: 1px solid #f0f2f4;
    padding: 12px 18px;
  }

  .job-form .form-actions {
    flex-direction: column;
  }

  .job-form input[type="time"].form-control,
  .job-form input[type="date"].form-control,
  .job-form input[type="datetime-local"].form-control,
  .job-form input[type="number"].form-control {
    max-width: 100%;
  }
}

/* 文字数カウンタ */
.job-form .char-counter {
  font-size: 0.78rem;
  color: #8a93a0;
  text-align: right;
  margin: 0;
}

.job-form .char-counter.is-over {
  color: #d93838;
  font-weight: 600;
}

/* ==============================================================
   求職者検索（/company/talent_search, /company/talent_search/:id）
   jobs#new と統一感のあるカード型・紫系ヘッダーで整える
   ============================================================== */
.talent-search,
.talent-detail {
  /* 全幅化に追従。検索フィルタ・結果カードは auto-fit / auto-fill グリッドのため、
     幅が広がるほど 1 行あたりの列数が自然に増えて最適化される。 */
  width: 100%;
  padding: 0 0 40px;
}

/* ページヘッダ */
.talent-search .page-header,
.talent-detail .page-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 24px;
  padding: 24px 4px 16px;
  border-bottom: 1px solid #e6e9ec;
}

.talent-search .page-header__title,
.talent-detail .page-header__title {
  font-size: 1.6rem;
  font-weight: 700;
  color: #2d3436;
  margin: 0;
}

.talent-search .page-header__subtitle {
  color: #6c757d;
  font-size: 0.92rem;
  margin: 0;
}

/* 検索フォーム = カード。内側は淡いグレーにして、中の白いセクションカード（枠）を際立たせる */
.talent-search__form {
  background-color: #f4f6f9;
  border: 1px solid #e6e9ec;
  border-radius: 10px;
  margin-bottom: 24px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.talent-search__form-title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  background: var(--color-info);
  color: #fff;
  padding: 14px 20px;
  font-size: 1.05rem;
  font-weight: 700;
}

/* 「クリックで開閉できます」の補足。タイトルバー内で控えめに出す */
.talent-search__form-hint {
  font-size: 0.78rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85);
}

/* 検索条件の各セクション（折り畳み可能な details）。
   1 件ずつ枠（カード）を明確にして、どこからどこまでが 1 条件群か分かりやすくする。 */
.talent-search__section {
  margin: 14px 20px;
  border: 1px solid #d7dee4;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

/* セクション見出し＝クリックで開閉する summary。チェブロン＋左アクセントで枠の上端を強調する */
.talent-search__section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 12px 16px;
  font-size: 0.95rem;
  font-weight: 700;
  color: #2d3436;
  background: #eef3f8;
  border-left: 4px solid var(--color-info);
  cursor: pointer;
  user-select: none;
  list-style: none; /* Firefox の三角マーカーを消す */
  transition: background-color 0.15s;
}

/* Safari/Chrome のデフォルト開閉マーカーを消す */
.talent-search__section-title::-webkit-details-marker {
  display: none;
}

/* Firefox 等で list-style: none が効かない場合に備え、::marker も空にして三角を確実に抑制する */
.talent-search__section-title::marker {
  content: "";
}

.talent-search__section-title:hover {
  background: #e2eaf3;
}

/* 開閉インジケータ（閉=▶ / 開くと90°回転して▼風になる） */
.talent-search__section-title::before {
  content: "\25B6";
  font-size: 0.7rem;
  color: #6b7785;
  flex-shrink: 0;
  transition: transform 0.15s;
}

.talent-search__section[open] > .talent-search__section-title::before {
  transform: rotate(90deg);
}

/* 開いているセクションは見出しと本文の境を罫線で区切る */
.talent-search__section[open] > .talent-search__section-title {
  border-bottom: 1px solid #e6ebf0;
}

/* from 〜 to のレンジ入力（年齢・年収） */
.talent-search__range {
  display: flex;
  align-items: center;
  gap: 8px;
}

.talent-search__range .talent-search__select {
  flex: 1 1 0;
  min-width: 0;
}

/* 範囲の select は 2 つ並んで幅が 92px ほどまで狭くなるので、共通の ∨ の余白（右 40px）のままだと
   「下限なし」「1000万円」（約 65px）が切れる。左右の余白を詰め、∨ も一回り小さくして右端から 6px に置く
   （いちばん狭い幅でも文字を出せる幅が 66px 残る）。
   共通の指定（select:not([multiple]):not(...)）と同じ詳細度なので、後ろに書いて勝たせる */
.talent-search__range select.talent-search__select {
  padding-left: 6px;
  padding-right: 20px;
  background-position: right 6px center;
  background-size: 10px 7px;
}

.talent-search__range-sep {
  color: #6c757d;
  flex: 0 0 auto;
}

/* 複数選択セレクト（現住所・経験職種・スキルなど） */
.talent-search__select--multi {
  height: auto;
  padding: 6px 8px;
}

.talent-search__select--multi option {
  padding: 3px 4px;
}

.talent-search__hint {
  margin: 0;
  font-size: 0.78rem;
  color: #6c757d;
}

.talent-search__filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px 20px;
  padding: 20px;
}

.talent-search__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.talent-search__label {
  font-size: 0.88rem;
  font-weight: 600;
  color: #495057;
}

.talent-search__select,
.talent-search__input {
  display: block;
  width: 100%;
  padding: 10px 14px;
  font-size: 0.95rem;
  border: 1.5px solid #dfe6e9;
  border-radius: 8px;
  background-color: #fff;
  color: #2d3436;
  transition: border-color 0.15s, box-shadow 0.15s;
  font-family: inherit;
  box-sizing: border-box;
}

.talent-search__select:focus,
.talent-search__input:focus {
  outline: none;
  border-color: var(--color-info);
  box-shadow: 0 0 0 3px rgba(79, 125, 249, 0.15);
}

/* 希望職種：大分類 > 小分類のチェックボックス。grid の単一セルから幅いっぱいに広げる */
.talent-search__field--full {
  grid-column: 1 / -1;
}

.talent-search__category-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px 20px;
  padding: 12px 14px;
  border: 1.5px solid #dfe6e9;
  border-radius: 8px;
  background-color: #fff;
}

.talent-search__category-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.talent-search__category-title {
  margin: 0 0 4px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #2d3436;
}

.talent-search__category-children {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 8px;
  border-left: 2px solid #e6e3f5;
}

.talent-search__actions {
  display: flex;
  gap: 12px;
  padding: 0 20px 20px;
}

.talent-search__actions .btn {
  min-width: 140px;
}

/* 検索結果 */
.talent-search__results {
  background-color: transparent;
}

.talent-search__results-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #2d3436;
  margin-bottom: 16px;
  padding-left: 4px;
}

/* 検索結果一覧（行）。応募者管理(.applicant-card)と同じ要領で 1 件を多カラムに横分割する。
   コンテナ幅基準（サイドバー有無に依らない）で狭いときだけ縦積みにする。 */
.talent-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  container-type: inline-size;
  container-name: talents;
}

.talent-row {
  display: grid;
  /* 基本情報 / 現職・学歴・経験 / 経験職種・スキル / アクション */
  grid-template-columns: minmax(220px, 1fr) minmax(220px, 1.15fr) minmax(220px, 1.25fr) minmax(150px, 0.5fr);
  background: #fff;
  border: 1px solid #e6e3f5;
  border-radius: 10px;
  overflow: hidden;
}

.talent-row__col {
  min-width: 0;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.talent-row__col + .talent-row__col {
  border-left: 1px solid #eef1f4;
}

/* 1) 基本情報列：アバター＋本文の横並び */
.talent-row__profile-col {
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
}

.talent-row__avatar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(79, 125, 249, 0.12);
  color: #3b63d8;
  font-weight: 700;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.talent-row__profile-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.talent-row__name-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.talent-row__name {
  color: #4f7df9;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
}

.talent-row__name:hover {
  text-decoration: underline;
}

.talent-row__attrs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 0.82rem;
  color: #636e72;
}

/* 求職者カード用ステータスバッジ（既存の admin/employer 側 .status-badge と
   競合しないよう talent ページ配下に限定） */
.talent-search .status-badge,
.talent-detail .status-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  background-color: #f1f3f5;
  color: #495057;
}

.talent-search .status-badge--active,
.talent-detail .status-badge--active {
  background-color: rgba(112, 212, 75, 0.18);
  color: #4a9a2c;
}

/* search_status enum の実値（casual / not_looking）にクラス名を合わせる。
   旧名 --passive / --closed は enum と一致せず、積極(active)以外が灰色になっていた。
   .talent-detail 側は現状 show.html.erb にバッジ描画がなく未使用だが、上の .status-badge 群と
   スコープを揃えるため残す（詳細ページに転職温度感バッジを追加した際にそのまま効く）。 */
.talent-search .status-badge--casual,
.talent-detail .status-badge--casual {
  background-color: rgba(255, 221, 0, 0.22);
  color: #8a7400;
}

.talent-search .status-badge--not_looking,
.talent-detail .status-badge--not_looking {
  background-color: #f1f3f5;
  color: #6c757d;
}

.talent-row__sub {
  font-size: 0.8rem;
  color: #768390;
}

.talent-row__current {
  font-size: 0.9rem;
  font-weight: 600;
  color: #2d3436;
}

/* 現職・学歴・経験／経験職種・スキル列の各行（アイコン or ラベル ＋ 本文） */
.talent-row__fact {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 0.82rem;
  line-height: 1.5;
  color: #495057;
}

.talent-row__fact-icon {
  flex-shrink: 0;
  line-height: 1.4;
}

.talent-row__fact-label {
  flex-shrink: 0;
  color: #8a93a0;
}

.talent-row__skills {
  color: #2c5282;
}

.talent-row__bio {
  margin: 2px 0 0;
  font-size: 0.8rem;
  color: #6c757d;
  line-height: 1.55;
}

/* 4) アクション列：操作領域を淡い背景で区別（応募者管理と同じ） */
.talent-row__action-col {
  background: #fff8e6;
  justify-content: flex-start;
  gap: 8px;
}

.talent-row__no-jobs {
  font-size: 0.78rem;
  color: #8a93a0;
}

/* 本文領域が狭いときは縦積みにし、区切りを上罫線へ切り替える */
@container talents (max-width: 940px) {
  .talent-row {
    grid-template-columns: 1fr;
  }

  .talent-row__col + .talent-row__col {
    border-left: 0;
    border-top: 1px solid #eef1f4;
  }
}

/* 求職者検索/詳細ページの空状態カード（他ページの empty-state を上書きしない
   よう talent 配下にスコープする） */
.talent-search .empty-state__message,
.talent-detail .empty-state__message {
  background-color: #fff;
  border: 1px dashed #c9cdd2;
  border-radius: 10px;
  padding: 40px 20px;
  text-align: center;
  color: #6c757d;
}

/* ============== 求職者プロフィール詳細（show） ============== */
.talent-detail__section {
  background-color: #fff;
  border: 1px solid #e6e9ec;
  border-radius: 10px;
  margin-bottom: 16px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.talent-detail__section-title {
  background: var(--color-info);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  padding: 12px 20px;
  margin: 0;
}

.talent-detail__section > :not(.talent-detail__section-title) {
  padding: 16px 20px;
}

.talent-detail__list {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 0;
  margin: 0;
}

.talent-detail__list dt {
  background-color: #f7f8fa;
  padding: 12px 16px;
  font-size: 0.88rem;
  font-weight: 600;
  color: #495057;
  border-bottom: 1px solid #f0f2f4;
  border-right: 1px solid #f0f2f4;
}

.talent-detail__list dd {
  margin: 0;
  padding: 12px 16px;
  font-size: 0.92rem;
  color: #2d3436;
  border-bottom: 1px solid #f0f2f4;
  background-color: #fff;
}

.talent-detail__list dt:last-of-type,
.talent-detail__list dd:last-of-type {
  border-bottom: 0;
}

.talent-detail__bio {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid #f0f2f4;
}

.talent-detail__bio h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: #2d3436;
  margin: 0 0 8px 0;
}

.talent-detail__history {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.talent-detail__history li {
  padding: 12px 16px;
  background-color: #fafbfc;
  border: 1px solid #f0f2f4;
  border-radius: 8px;
}

.talent-detail__history-period {
  font-size: 0.82rem;
  color: #6c757d;
  margin-bottom: 4px;
}

.talent-detail__history-title {
  font-size: 0.95rem;
  color: #2d3436;
  margin-bottom: 6px;
}

.talent-detail__history-title strong {
  color: #2d3436;
  margin-right: 6px;
}

.talent-detail__history-desc {
  font-size: 0.88rem;
  color: #495057;
  line-height: 1.6;
}

.talent-detail__note {
  font-size: 0.82rem;
  color: #6c757d;
  margin-top: 8px;
}

/* レスポンシブ */
@media (max-width: 768px) {
  .talent-search__filters {
    grid-template-columns: 1fr;
  }

  .talent-search__actions {
    flex-direction: column;
  }

  .talent-detail__list {
    grid-template-columns: 1fr;
  }

  .talent-detail__list dt {
    border-right: 0;
  }
}

/* ===== スマホ全体最適化 =====
   スマホ実機表示でレイアウトが破綻していた箇所をまとめて補正する。
   既存の @media ブロックに追記すると関連スタイルから離れて分かりにくく
   なるため、横断的な補正だけここに集約する */
@media (max-width: 768px) {
  /* 横の余白が広すぎてコンテンツ幅が圧迫されていたので詰める */
  .container {
    padding: 0 12px;
  }

  /* マイページ各セクションの padding 28px は窮屈に見えるので縮小 */
  .mypage-section {
    padding: 18px 16px;
  }

  /* 編集フォームの 2 列並びを 1 列縦積みに（既存は 480 以下のみ対応） */
  .form-row {
    grid-template-columns: 1fr;
  }

  /* 企業向け応募者詳細の 1fr 300px は本文が押し潰されるので 1 列縦積み */
  .applicant-detail__layout {
    grid-template-columns: 1fr;
  }

  /* dt 140px / dd 1fr の固定カラムだと dt が改行してガタつくので
     dt と dd を縦に積んで読みやすくする */
  .detail-list {
    grid-template-columns: 1fr;
    gap: 4px 0;
  }

  .detail-list dt {
    margin-top: 8px;
  }

  .detail-list dt:first-child {
    margin-top: 0;
  }
}

/* =========================================================================
   ポートフォリオ・制作実績（UI-C）
   ========================================================================= */
.tag--muted {
  background-color: var(--color-bg-soft);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
}

.portfolio-work-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.portfolio-work-item {
  padding: 14px 16px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background-color: var(--color-bg-soft);
}

.portfolio-work-title {
  font-weight: 700;
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.portfolio-work-meta {
  margin-top: 4px;
  font-size: 0.85rem;
  color: var(--color-text-secondary);
}

.portfolio-work-award {
  margin-top: 4px;
  font-size: 0.85rem;
  color: var(--color-text-primary);
}

.portfolio-work-desc {
  margin-top: 6px;
  font-size: 0.9rem;
  color: var(--color-text-primary);
}

/* 企業向け求人詳細(show)画面。求人情報カード(.job-detail 系)は公開ページと共通スタイルを流用し、
   ヘッダーのみ employer の page-header に合わせる。 */
.job-detail-view__title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.job-detail-view__actions {
  margin-top: 12px;
}

/* シークレット求人で「求人ページを確認」ボタンに添える注釈。 */
.job-detail-view__preview-note {
  margin: 8px 0 0;
  padding: 8px 12px;
  font-size: 0.82rem;
  line-height: 1.6;
  color: #5a34a6;
  background-color: #f3eefb;
  border-radius: 6px;
}

/* キャッチコピーは公開ページでは暗背景ヘッダー内に置くため淡色だが、企業向けは白背景カード上に
   出すため視認できる色に上書きし、カードの内側余白に合わせる。 */
.job-detail-view .job-catch-copy {
  padding: 24px 32px 0;
  color: var(--color-primary);
}

/* --------------------------------------------------------------
   画面に出すメールアドレス（求職者・企業の両方の画面で使う）
   -------------------------------------------------------------- */
/* 区切りの無い長いアドレスは折り返せず、狭い画面で横にはみ出す。どこでも折り返せるようにする。
   flex や表の中でも最小幅まで縮むよう overflow-wrap: anywhere にする（break-word では最小幅が縮まず、
   はみ出したままになる）。word-break: break-word（非標準）は、anywhere に対応していない
   Safari 15.3 以前向けの予備で、新しいブラウザでの結果は変わらない */
.email-address {
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------
   求人添付ダイアログ（メッセージに自社求人を最大3件添付する）
   「求人を添付」ボタン → ダイアログで検索しながら表からチェック選択
   -------------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.job-attach {
  margin-bottom: 12px;
}

.job-attach__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.job-attach__empty {
  font-size: 13px;
  color: var(--color-text-secondary);
}

/* フォーム上の選択中求人（「求人を添付」ボタンの下に改行で縦並び表示） */
.job-attach__summary {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-top: 8px;
}

/* ダイアログ上部の選択中チップ（横並び・折り返し） */
.job-attach-dialog__selected {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-soft);
  flex-shrink: 0;
}

/* 選択中の求人を表すチップ（選択中だと分かるよう primary カラー） */
.job-attach-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 4px 12px;
  background: rgba(240, 86, 159, 0.08);
  border: 1px solid var(--color-primary);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary);
}

/* クリックで求人詳細を別タブ表示できるチップ */
.job-attach-chip--link {
  cursor: pointer;
}

.job-attach-chip--link:hover {
  background: rgba(240, 86, 159, 0.16);
  text-decoration: underline;
}

/* 「別タブで開く」ことを示す外部リンクアイコン */
.job-attach-chip__external {
  display: inline-flex;
  flex-shrink: 0;
}

/* ダイアログ上部チップの選択解除（×）ボタン */
.job-attach-chip__remove {
  flex-shrink: 0;
  margin-left: 2px;
  width: 18px;
  height: 18px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 999px;
  color: inherit;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.7;
}

.job-attach-chip__remove:hover {
  opacity: 1;
  background: rgba(240, 86, 159, 0.22);
}

.job-attach__empty-note {
  font-size: 13px;
  color: var(--color-text-muted);
}

.job-attach-dialog {
  /* 画面中央に、おおよそ画面の 80% の大きさで表示する（showModal の中央配置 + margin:auto） */
  width: 80vw;
  height: 80vh;
  max-width: 80vw;
  max-height: 80vh;
  margin: auto;
  padding: 0;
  border: none;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  overflow: hidden;
  /* showModal 時にダイアログ自体へ当たるフォーカスリング（枠線）を消す。
     内部の入力欄・ボタンには個別のフォーカススタイルがあるので可視性は保たれる。 */
  outline: none;
}

/* showModal() で開いている間は縦フレックスにし、表エリアが残りの高さを埋めてスクロールする */
.job-attach-dialog[open] {
  display: flex;
  flex-direction: column;
}

.job-attach-dialog__header,
.job-attach-dialog__toolbar,
.job-attach-dialog__footer {
  flex-shrink: 0;
}

.job-attach-dialog::backdrop {
  background: rgba(0, 0, 0, 0.45);
}

.job-attach-dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border);
}

.job-attach-dialog__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text-primary);
}

.job-attach-dialog__close {
  font-size: 22px;
  line-height: 1;
  color: var(--color-text-secondary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
}

.job-attach-dialog__close:hover {
  color: var(--color-text-primary);
}

.job-attach-dialog__toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--color-border);
}

.job-attach-dialog__search {
  flex: 1;
  padding: 8px 12px;
  font-size: 14px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
}

.job-attach-dialog__search:focus {
  outline: none;
  border-color: var(--color-info);
  box-shadow: 0 0 0 3px rgba(79, 125, 249, 0.15);
}

.job-attach-dialog__counter {
  font-size: 13px;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

/* 一覧の右上に出す「現在ページの表示範囲 / 総件数」 */
.job-attach-dialog__range {
  flex-shrink: 0;
  padding: 8px 20px 0;
  text-align: right;
  font-size: 12px;
  color: var(--color-text-secondary);
}

.job-attach-dialog__table-wrap {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

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

.job-attach-table th,
.job-attach-table td {
  padding: 10px 12px;
  font-size: 13px;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}

.job-attach-table thead th {
  position: sticky;
  top: 0;
  background: var(--color-bg-soft);
  color: var(--color-text-secondary);
  font-weight: 600;
  z-index: 1;
}

.job-attach-table__check {
  width: 44px;
  text-align: center;
}

.job-attach-table__check input {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.job-attach-table__title {
  font-weight: 600;
  color: var(--color-text-primary);
  cursor: pointer;
}

.job-attach-table__action {
  width: 116px;
  text-align: right;
  white-space: nowrap;
}

.job-attach-table__open {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--color-info);
  white-space: nowrap;
}

.job-attach-table__open:hover {
  text-decoration: underline;
}

/* 別タブで開くことを示す外部リンクアイコン（一覧の「詳細を開く」と選択中チップで共通） */
.job-attach-external-icon {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.job-attach-table__row[hidden] {
  display: none;
}

.job-attach-table__empty {
  padding: 24px;
  text-align: center;
  font-size: 13px;
  color: var(--color-text-secondary);
}

/* ページ送り（‹ / 現在ページ・総ページ + 選択 / ›）。画像のデザインに合わせた角丸ボタン。 */
.job-attach-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 20px;
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
}

.job-attach-pager[hidden] {
  display: none;
}

.job-attach-pager__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 44px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: #fff;
  color: var(--color-text-primary);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.job-attach-pager__btn:hover:not(:disabled) {
  background: var(--color-bg-soft);
}

.job-attach-pager__btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.job-attach-pager__btn svg {
  width: 18px;
  height: 18px;
}

.job-attach-pager__select-wrap {
  position: relative;
  display: inline-flex;
}

.job-attach-pager__select {
  appearance: none;
  -webkit-appearance: none;
  min-width: 124px;
  height: 44px;
  padding: 0 40px 0 24px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: #fff;
  color: var(--color-text-primary);
  font-size: 16px;
  text-align: center;
  text-align-last: center;
  cursor: pointer;
}

.job-attach-pager__select:focus {
  outline: none;
  border-color: var(--color-info);
  box-shadow: 0 0 0 3px rgba(79, 125, 249, 0.15);
}

.job-attach-pager__caret {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  pointer-events: none;
  color: var(--color-text-secondary);
}

.job-attach-dialog__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  border-top: 1px solid var(--color-border);
}

.job-attach-dialog__hint {
  font-size: 12px;
  color: var(--color-text-muted);
}

/* ==============================================================
   職種選択ダイアログ（job-category-picker）
   中央表示のモーダル（求人添付と同じ）。大分類アコーディオン＋小分類チェック。
   ============================================================== */
.jc-picker {
  display: block;
}

/* トリガーボタン（＋ 選択してください） */
.jc-picker__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border: 1px dashed var(--color-primary);
  border-radius: 8px;
  background: #fff;
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.jc-picker__trigger:hover {
  background: rgba(240, 86, 159, 0.06);
}

.jc-picker__trigger-icon {
  font-weight: 700;
  line-height: 1;
}

/* 「すべて解除」（clearable: true のときだけ出る）。トリガーの隣に控えめなテキストボタンで置く */
.jc-picker__clear {
  margin-left: 10px;
  padding: 8px 4px;
  border: 0;
  background: none;
  color: var(--color-text-muted);
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}

.jc-picker__clear:hover {
  color: var(--color-primary);
}

.jc-picker__clear:disabled {
  opacity: 0.45;
  text-decoration: none;
  cursor: default;
}

/* フォーム上に出る選択中チップ群 */
.jc-picker__summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.jc-picker__empty {
  font-size: 13px;
  color: var(--color-text-muted);
}

.jc-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 4px 10px;
  background: rgba(240, 86, 159, 0.08);
  border: 1px solid var(--color-primary);
  border-radius: 12px; /* 複数行の長い職種名でも破綻しない角丸 */
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-primary);
}

.jc-chip__label {
  min-width: 0;
  overflow-wrap: anywhere; /* 長い職種名はチップ内で折り返す */
}

.jc-chip__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 50%;
  color: inherit;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.75;
  flex-shrink: 0; /* 折り返し時も × は縮めない */
}

.jc-chip__remove:hover {
  opacity: 1;
  background: rgba(240, 86, 159, 0.22);
}

/* ダイアログ本体（中央表示。メッセージの「求人を添付」と同じ中央モーダル） */
.jc-dialog {
  margin: auto;
  width: min(640px, 92vw);
  /* iOS はアドレスバーの出入りで見える高さが変わり、vh は「バーが隠れたときの高さ」を指す。
     dvh（今見えている高さ）に対応するブラウザではそちらを使い、対応しないものは上の vh のまま */
  max-height: 85vh;
  max-height: 85dvh;
  padding: 0;
  border: none;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  outline: none;
}

.jc-dialog::backdrop {
  background: rgba(0, 0, 0, 0.45);
}

.jc-dialog[open] {
  display: flex;
  flex-direction: column;
}

.jc-dialog__header,
.jc-dialog__toolbar,
.jc-dialog__footer {
  flex-shrink: 0;
}

.jc-dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border);
}

.jc-dialog__title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text-primary);
}

.jc-dialog__limit {
  margin-left: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-muted);
}

.jc-dialog__close {
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  color: var(--color-text-secondary);
  cursor: pointer;
}

/* キーボード操作時のフォーカス可視化 */
.jc-dialog__close:focus-visible,
.jc-picker__trigger:focus-visible {
  outline: 2px solid var(--color-info);
  outline-offset: 2px;
}

.jc-dialog__toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--color-border);
}

.jc-dialog__search {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 14px;
}

.jc-dialog__search:focus {
  outline: none;
  border-color: var(--color-info);
  box-shadow: 0 0 0 3px rgba(79, 125, 249, 0.15);
}

.jc-dialog__counter {
  font-size: 13px;
  color: var(--color-text-muted);
  white-space: nowrap;
  /* 3 つのダイアログ（勤務地・職種・条件選択）共通。うち勤務地だけは件数に勤務地名を添える
     ことがあるため、狭い幅で検索欄を潰さないよう半分までに抑え、収まらない分は省略する
     （overflow を指定するとフレックスアイテムの自動最小サイズが 0 になり、nowrap のままでも
     残り幅まで縮む）。職種・条件選択の文言は「N 件選択中」「N / M 件」と短く上限には届かない */
  max-width: 50%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jc-dialog__body {
  /* 基準の高さを中身（auto）にして、はみ出す分だけ縮める。flex: 1（基準 0%）は、ダイアログの高さが
     max-height だけで決まる縦並びの中では、古い WebKit でリストの枠が高さ 0 に潰れる恐れがあるため避ける
     （今のブラウザではどちらも、ダイアログ＝中身か画面の 85% の小さい方・枠＝残りの高さ、で同じ結果になる）。
     min-height: 0 は、枠を中身より低く縮めてスクロールさせるための明示（overflow があれば既定でも 0） */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  /* 本文の端まで来たときに、後ろのページまでスクロールが伝わらないようにする */
  overscroll-behavior: contain;
}

/* 大分類アコーディオン */
.jc-group {
  border-bottom: 1px solid var(--color-border);
}

.jc-group[hidden] {
  display: none;
}

/* 絞り込みに 1 件も一致しなかったときの案内。出さないと本文が空のままで、
   選択肢が読み込めていないように見える（入力補助が勝手に語を入れた場合も同じ見た目になる） */
.jc-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 28px 20px;
  color: var(--color-text-secondary);
  font-size: 14px;
  text-align: center;
}

/* クラスの display は hidden 属性に勝つため、隠すときの指定を明示する */
.jc-empty[hidden] {
  display: none;
}

.jc-empty__text {
  /* 利用者が入れた語をそのまま出すので、長くても枠からはみ出さないようにする */
  overflow-wrap: anywhere;
}

.jc-empty__clear {
  padding: 8px 16px;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  color: var(--color-text-primary);
  font-size: 13px;
  cursor: pointer;
}

.jc-empty__clear:hover {
  background: var(--color-bg-soft);
}

.jc-group__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 20px;
  list-style: none;
  cursor: pointer;
  font-weight: 600;
  color: var(--color-text-primary);
  user-select: none;
}

.jc-group__summary::-webkit-details-marker {
  display: none;
}

.jc-group[open] > .jc-group__summary {
  background: var(--color-primary);
  color: #fff;
}

.jc-group__chevron::after {
  content: "⌄";
  font-size: 14px;
}

.jc-group[open] > .jc-group__summary .jc-group__chevron::after {
  content: "⌃";
}

.jc-group__items {
  padding: 4px 20px 12px;
}

/* 小分類 1 行 */
.jc-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 2px;
}

.jc-item[hidden] {
  display: none;
}

.jc-item__label {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  cursor: pointer;
}

.jc-item__check {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.jc-item__name {
  font-size: 14px;
}

/* 「{大分類}すべて」行（配下一括選択。上限なしの場面のみ表示） */
.jc-item--all {
  margin-bottom: 4px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--color-border);
}

.jc-item__name--all {
  font-weight: 600;
  color: var(--color-primary);
}

.jc-item__years-wrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  color: var(--color-text-secondary);
  font-size: 13px;
}

.jc-item__years {
  width: 64px;
  padding: 6px 8px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 13px;
}

.jc-item__years:disabled {
  background: var(--color-bg-soft);
  color: var(--color-text-muted);
}

.jc-dialog__footer {
  display: flex;
  justify-content: flex-end;
  padding: 14px 20px;
  border-top: 1px solid var(--color-border);
}

/* 経験年数が不正なまま閉じようとしたときの、決定ボタンのそばの案内（ブラウザの吹き出しが出ない端末でも読めるように）。
   残りの幅を使い、決定ボタンは右に置いたままにする。狭い画面では案内が折り返す */
.jc-dialog__notice {
  flex: 1;
  align-self: center;
  margin: 0 12px 0 0;
  color: #b73838;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
}

/* クラスの指定が hidden 属性に勝たないよう、隠すときの指定を明示する */
.jc-dialog__notice[hidden] {
  display: none;
}

/* フラットな選択一覧（大分類を持たない雇用形態ダイアログ用） */
.jc-group__items--flat {
  padding: 12px 20px 16px;
}

/* 詳細職種（第 3 階層）の見出しと入れ子。企業の求人登録フォーム（expand_details: true）でのみ出る。
   同名の詳細職種（「研究」「品質管理」等）が複数のグループにあるため、どのグループのものかを
   見出しで示す。 */
.jc-subgroup {
  padding: 6px 0 2px;
}

/* .jc-group / .jc-item と同じ理由で明示する（author の display 宣言が UA の [hidden] より
   優先されるため、あとから display を足しても検索フィルタが効くように） */
.jc-subgroup[hidden] {
  display: none;
}

/* グループの切れ目を破線で示す。詳細職種を持たない分類職種（.jc-item）が間に挟まっても
   崩れないよう、隣接兄弟ではなく見出しごとに上線を引き、先頭の見出しだけ消す。
   検索で隠れている見出しには線を出さない */
.jc-subgroup:not([hidden]) {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px dashed var(--color-border);
}

/* 先頭の見出しには線を出さない。JS が付ける --leading は検索で先頭が隠れたときのため、
   :first-child は JS が動く前の初期表示のため、.jc-item--all の隣は上限なしの picker で
   expand_details を使う場合のための保険（現状その組み合わせは無い）。
   .jc-subgroup:not([hidden]) と詳細度を揃えるため、いずれも要素を 2 つ以上重ねて書く。 */
.jc-group__items > .jc-subgroup:first-child,
.jc-group__items > .jc-item--all + .jc-subgroup,
.jc-group__items > .jc-subgroup--leading {
  margin-top: 0;
  padding-top: 2px;
  border-top: 0;
}

.jc-subgroup__name {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-secondary);
}

.jc-subgroup__items {
  padding-left: 10px;
  border-left: 2px solid var(--color-border);
}

/* ==============================================================
   勤務地選択ダイアログ（location-picker）の追加スタイル
   jc-* を土台に、23 区・地方の多項目をグリッドで並べ、展開を持たない
   都県（神奈川/千葉/埼玉）はアコーディオンと同じ高さの 1 行で見せる。
   ============================================================== */

/* 配下の項目数が多いグループ（東京 23 区・地方 7 区分＋海外）は複数列で並べる */
.jc-group__items--grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0 12px;
}

/* 「〇〇すべて」は列を跨いで 1 行占有する */
.jc-group__items--grid .jc-item--all {
  grid-column: 1 / -1;
}

/* 「〇〇すべて」で一括選択された配下は操作不可（送信もされない）ため、薄く見せる */
.jc-item__check:disabled {
  cursor: default;
}

.jc-item__check:disabled + .jc-item__name {
  color: var(--color-text-muted);
}

/* 展開を持たない選択肢（神奈川県 / 千葉県 / 埼玉県）の 1 行 */
.jc-group--single {
  padding: 0 20px;
}

.jc-item--single {
  padding: 14px 0;
}

.jc-item__name--single {
  font-weight: 600;
  color: var(--color-text-primary);
}

/* 「選択をすべて解除」を左、決定/検索を右に置くフッター */
.jc-dialog__footer--split {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.jc-dialog__clear {
  padding: 0;
  background: none;
  border: none;
  font-size: 13px;
  color: var(--color-text-secondary);
  text-decoration: underline;
  cursor: pointer;
}

.jc-dialog__clear:hover {
  color: var(--color-text-primary);
}

/* ==============================================================
   トップページ（リニューアル版）
   ヘッダー / ヒーロー / 検索 / ロゴ / 条件から探す / 企業特集 /
   コラム / フッター。既存の .home-section・.featured-job-* も併用する。
   ============================================================== */

/* 既存 .container（900px）より広い、トップ専用の内側コンテナ */
.home-container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ----- サイト共通ヘッダー（ネイビー 1 段バー：ロゴ＋ナビ＋アカウント。layouts/_header） ----- */
/* 背景色は admin「トップページ設定」の CSS 変数（--hp-*）で上書きできる。
   文字色（--hp-header-fg）は地色の明るさから自動で決まる（濃い地＝白 / 淡い地＝濃紺）。
   半透明の文字色は color-mix で --hp-header-fg を薄めて作る（白決め打ちにしない）。 */
.home-header {
  background: var(--hp-header-bg, var(--home-navy));
  color: var(--hp-header-fg, #fff);
}

.home-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 20px;
  padding: 12px 24px;
}

.home-header__brand {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.1;
  flex-shrink: 0;
}

/* 画像のロゴは、縦並びの flex をやめて block にする（縦に積むのは、文字のロゴ＋タグラインのときだけでよい）。
   縦並びの flex のままだと、WebKit（Safari）で次の 2 つが起きる。
   - ロゴ画像が枠の配置より後に届くと、枠の幅を決め直さず、ロゴが 0x0 のまま描かれない
     （PC 幅で、ロゴ画像を 1.5 秒遅らせると再現する。Playwright の WebKit で staging の PC 幅を開いたときにも出た）
   - SP で画面を狭めてから広げると、ロゴが縮んだまま戻らない（@media (max-width: 768px) の指定を参照）
   :has() に対応しないブラウザは、今までどおり縦並びの flex のまま */
.home-header__brand:has(.home-header__logo-img) {
  display: block;
}

.home-header__logo {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--hp-header-fg, #fff);
}

.home-header__logo-accent {
  background: linear-gradient(90deg, #9db4ff 0%, #f08fc6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 淡色ヘッダー（.home-header--light）では淡色グラデーションが地色に同化するため、
   濃色のグラデーションへ切り替える（As の部分は --hp-header-fg で追従済み）。
   NOTE: dark_background? の 2 値判定のため、#999999 のような中間トーンの地色では
   どちらのグラデーションも十分なコントラストにならないことがある
   （ブランドの色味を優先したベストエフォート。地色は白／濃紺系を想定） */
.home-header--light .home-header__logo-accent {
  background: linear-gradient(90deg, #4f7df9 0%, #c2338a 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.home-header__logo-img {
  display: block;
  max-height: 40px;
  width: auto;
}

.home-header__brand-sub {
  margin-top: 2px;
  font-size: 0.72rem;
  color: color-mix(in srgb, var(--hp-header-fg, #fff) 82%, transparent);
  letter-spacing: 0.04em;
}

.home-header__nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 22px;
}

.home-header__nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--hp-header-fg, #fff) 92%, transparent);
  padding: 4px 2px;
  transition: color 0.2s;
}

.home-header__nav-link:hover {
  /* 通常時は fg の 92% 透過なので、ホバーで不透過へ寄せつつ下線で状態を示す
     （固定色だと admin 設定の地色と同系になったとき同化するため fg に追従させる） */
  color: var(--hp-header-fg, #fff);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ナビのアイコン。素材 PNG（白の線画）をマスクにして currentColor で塗ることで、
   admin がヘッダー背景を淡色にしたときも文字色（--hp-header-fg）と一緒に追従する。
   マスク画像の URL は view 側から --nav-icon（digest 付き asset_path）で渡す。 */
.home-header__nav-icon-mask {
  display: inline-block;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  background-color: currentcolor;
  -webkit-mask: var(--nav-icon) no-repeat center / contain;
  mask: var(--nav-icon) no-repeat center / contain;
}

.home-header__account {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* ヘッダー右端のボタン（ログイン=ピンク / 無料登録=白） */
.home-header__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 20px;
  border: none;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, opacity 0.2s;
}

.home-header__btn--primary {
  background: var(--home-pink);
  color: #fff;
}

/* admin 設定の地色がボタンと同系（ピンク）でも輪郭が残るよう、白ボタンと同じ要領で
   inset shadow の輪郭を描く（ピンク地で約 4.9:1・WCAG 1.4.11 の 3:1 を満たす）。
   ピンク系の地色は dark_background? が偽＝ --light が付くためこのスコープで足り、
   既定の濃紺ヘッダーの見た目は変わらない */
.home-header--light .home-header__btn--primary {
  box-shadow: inset 0 0 0 1.5px var(--home-navy);
}

.home-header__btn--primary:hover {
  background: var(--home-pink-hover);
}

.home-header__btn--white {
  background: #fff;
  color: var(--home-navy);
}

/* 淡色ヘッダーでは白ボタンの地が背景に同化するため、輪郭を出してボタンの形を保つ。
   border だと隣のピンクボタンと寸法がずれるため inset shadow で描く。
   色は白地でも 3:1（WCAG 1.4.11 非テキストコントラスト）を満たす #8f83cc */
.home-header--light .home-header__btn--white {
  box-shadow: inset 0 0 0 1.5px #8f83cc;
}

.home-header__btn--white:hover {
  background: #ece9fb;
}

.home-header__btn--ghost {
  background: transparent;
  color: color-mix(in srgb, var(--hp-header-fg, #fff) 85%, transparent);
  border: 1px solid color-mix(in srgb, var(--hp-header-fg, #fff) 45%, transparent);
}

.home-header__btn--ghost:hover {
  background: color-mix(in srgb, var(--hp-header-fg, #fff) 12%, transparent);
}

/* SP 用ハンバーガーメニューの開閉ボタン（デザイン準拠：背景なしのバー3本）。
   PC では出さず、トップページ用レスポンシブ（768px 以下）で表示に切り替える。
   バーの色はヘッダー文字色（--hp-header-fg）に追従し、淡色ヘッダーでも視認できるようにする。 */
.home-header__menu-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.home-header__menu-bar {
  display: block;
  width: 24px;
  height: 3px;
  border-radius: 2px;
  background: var(--hp-header-fg, #fff);
}

/* ----- ヒーロー（v3）
   画像設定時（--image）: 横長の背景画像 1 枚の上にリード文・CTA・求人件数を重ねる
   （キャッチコピー・特徴バッジは画像に入れ込む想定）。
   未設定時: 単色地（admin 設定の --hp-hero-bg・既定は淡いラベンダー）に
   キャッチコピー・特徴バッジ込みのテキスト表示。 ----- */
.hero-v3 {
  position: relative;
  background: var(--hp-hero-bg, #f6f4fd);
  padding: 48px 0 40px;
  overflow: hidden;
}

/* 背景画像モード：横長 KV（1440x520・約 2.77:1）のアスペクト比に近い高さを画面幅から確保し、
   キャッチコピー（左）と特徴バッジ（右）を画像の上に重ねる。KV は左側が白っぽく
   文字が読める前提のデザインのため、スクリムは敷かない。
   **背景画像はビューが CSS カスタムプロパティで渡す**（inline style の
   `--hero-bg` / `--hero-bg-sp`。ApplicationHelper#hero_background_style）。
   SP では別素材（縦長）に差し替えるが、inline style に background-image を直接書くと
   切り替えに !important が要り、admin で差し替えた画像が SP に効かなくなるため。
   NOTE: aspect-ratio + max-height は幅が高さから逆算されて全幅にならないため使わない。 */
.hero-v3--image {
  display: flex;
  align-items: center;
  min-height: clamp(360px, 36.2vw, 560px);
  padding: 48px 0;
  background-image: var(--hero-bg);
  background-size: cover;
  background-position: center;
}

/* コピー（左）とバッジ（右下）を配置する。バッジの絶対配置の基準にする */
.hero-v3--image .hero-v3__inner {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

/* 画像の上に重ねる本文はキャッチコピー分の幅に収める（画像右側の絵柄を隠さない） */
.hero-v3--image .hero-v3__copy {
  max-width: 560px;
}

/* 背景画像モードでは KV の明るい左側に本文が載るため、地色（--hp-hero-bg）に関わらず
   文字色は既定の濃色に固定する。 */
.hero-v3--image .hero-v3__title,
.hero-v3--image .hero-v3__stats {
  color: var(--home-navy);
}

.hero-v3--image .hero-v3__title {
  /* Figma実測: 通常 36px・行間 60px */
  font-size: 2.25rem;
  line-height: 1.67;
}

.hero-v3--image .hero-v3__lead {
  /* Figma実測: 16px・Bold・黒・行間 28px・字間 -4% */
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.75;
  letter-spacing: -0.04em;
  color: #000;
}

/* 本文と同様、強調語も画像モードでは KV の明るい左側前提のデザイン色に固定する
   （地色由来の CSS 変数のままだと、濃色の hero_bg_color を併設した場合に
   明るい画像の上へ明色の強調語が載って読めなくなるため） */
.hero-v3--image .hero-v3__title-accent {
  color: #eb518d;
}

.hero-v3--image .hero-v3__title .hero-v3__title-accent:nth-of-type(2) {
  color: #4b4deb;
}

/* 幅が足りないと絵柄の上にキャッチコピーが載るため、狭い画面では表示を調整する */
@media (max-width: 1000px) {
  /* 縦積みでセクションが縦長になると cover の中央切り出しで KV の「明るい左側」が
     画面外へ消えるため、左基準へ切り替える。
     **!important は外した。** 背景画像を inline style から CSS へ移した（ビューは
     カスタムプロパティだけを渡す）ので、inline style に勝つ必要が無くなったため。
     残したままだと、より狭い SP 側（max-width: 768px）の指定まで押さえ込む
     （実際に SP 用素材の配置が効かなくなった） */
  .hero-v3--image {
    background-position: left center;
  }

  /* それでも狭い幅では絵柄の上に文字が載るため、コピーに半透明の下地を敷いて可読性を保つ */
  .hero-v3--image .hero-v3__copy {
    background: rgb(255 255 255 / 78%);
    border-radius: 14px;
    padding: 16px 18px;
  }

  .hero-v3--image .hero-v3__inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* 背景のキラキラ装飾（CSS のみ・読み上げ対象外） */
.hero-v3__deco {
  position: absolute;
  background: var(--home-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0.55;
  pointer-events: none;
}

.hero-v3__deco--1 { top: 8%; left: 4%; font-size: 1.6rem; }
.hero-v3__deco--2 { top: 62%; left: 2%; font-size: 1rem; }
.hero-v3__deco--3 { top: 14%; right: 5%; font-size: 1.2rem; }

.hero-v3__copy {
  padding: 8px 0;
  max-width: 640px;
}

/* 小見出しバッジ（admin で設定したときだけ表示） */
.hero-v3__label {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--home-violet);
  background: rgba(123, 108, 246, 0.10);
  border: 1px solid rgba(123, 108, 246, 0.35);
  padding: 4px 14px;
  border-radius: 16px;
  margin-bottom: 14px;
}

/* 地色は admin が自由に設定できるため、本文の文字色は地色の明るさから決めた
   --hp-hero-fg に追従させる（濃い地色でも読めるようにする）。 */
.hero-v3__title {
  font-size: 2.1rem;
  /* デザインの字は Bold 相当。900 だと潰れて見えるため 700 にする */
  font-weight: 700;
  line-height: 1.5;
  color: var(--hp-hero-fg, var(--home-navy));
  margin-bottom: 18px;
}

/* **囲み** で指定した強調部分（青→紫のグラデーション文字） */
/* 大見出しの **強調** 部分（1 語目ピンク・2 語目ブルーが既定）。
   admin が任意の地色を設定できるため、実際の色は地色とのコントラストを個別判定した
   CSS 変数（HomepageSetting#hero_accent_colors）で渡す。同系色の地色（例: #eb518d）では
   本文色へ落ちて同化を防ぐ。
   NOTE: 判定は 3:1（大きい文字基準）。dark 判定境界に近い中間トーンの地色では
   本文色フォールバックでも 3:1 を割ることがある（ベストエフォート） */
.hero-v3__title-accent {
  color: var(--hp-hero-accent1, #eb518d);
  /* Figma実測: 強調語 56px / 通常 36px = 1.56 倍。行送りは本文基準に保ちたいため
     line-height は 1 に固定する（そのままだと強調語の行だけ行間が広がる） */
  font-size: 1.56em;
  line-height: 1;
}

.hero-v3__title .hero-v3__title-accent:nth-of-type(2) {
  color: var(--hp-hero-accent2, #4b4deb);
}

/* 小見出しバッジは固定のバイオレット（#7b6cf6 系）のままだと同系色の濃色背景に同化するため、
   濃色地（.hero-v3--dark）では白系へ切り替える */
.hero-v3--dark .hero-v3__label {
  color: #fff;
  background: rgb(255 255 255 / 14%);
  border-color: rgb(255 255 255 / 45%);
}

.hero-v3__lead {
  font-size: 0.94rem;
  /* 見出しより少し弱いトーン（濃色地では白を少し落とした色になる） */
  color: color-mix(in srgb, var(--hp-hero-fg, #4c4966) 88%, transparent);
  line-height: 2;
  margin-bottom: 24px;
}

.hero-v3__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

/* 求人件数はデザイン準拠の白いピル型バッジで表示する。
   ピルの地が常に白のため、文字色はヒーロー背景色（--hp-hero-fg）に追従させず
   濃色固定にする（濃色背景設定時に白文字で読めなくなるのを防ぐ）。 */
.hero-v3__stats {
  display: inline-block;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--home-navy);
  background: #fff;
  border: 1px solid #eceafd;
  border-radius: 999px;
  padding: 10px 24px;
  box-shadow: 0 6px 18px rgba(34, 28, 80, 0.08);
}

.hero-v3__stats strong {
  color: var(--home-pink);
  font-size: 1.5rem;
  margin: 0 2px;
}

/* ----- トップページ共通ボタン（v3） ----- */
.btn-v3 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 30px;
  border: none;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.2s, box-shadow 0.2s, transform 0.15s, color 0.2s;
}

.btn-v3:hover {
  transform: translateY(-1px);
}

.btn-v3--pink {
  background: var(--home-pink);
  color: #fff;
  box-shadow: 0 8px 20px rgba(240, 86, 159, 0.35);
}

.btn-v3--pink:hover {
  background: var(--home-pink-hover);
}

.btn-v3--outline {
  background: #fff;
  color: var(--home-violet);
  border: 1.5px solid #cfc7f5;
}

.btn-v3--outline:hover {
  border-color: var(--home-violet);
}

.btn-v3--gradient {
  background: var(--home-grad);
  color: #fff;
  box-shadow: 0 8px 20px rgba(123, 108, 246, 0.35);
  padding: 14px 48px;
}

.btn-v3--gradient:hover {
  opacity: 0.92;
}

.btn-v3--white {
  background: #fff;
  color: var(--home-pink);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.btn-v3--white:hover {
  background: #ffeef7;
}

/* ----- キーワード検索バンド ----- */
.home-search-band {
  background: var(--hp-search-band-bg, #fff);
  padding: 20px 0;
  border-bottom: 1px solid #f0edfa;
}

.home-search-band .hero-search-wrapper {
  max-width: 720px;
}

/* 見出し（キーワードから探す）は検索ボックスの左に添えつつ、ボックス自体はページ中央に保つ
   （1fr｜ボックス｜1fr の 3 カラムで左右の余りを等分し、見出しは左カラムの右端に寄せる） */
.home-search-band__inner {
  display: grid;
  grid-template-columns: 1fr minmax(0, 720px) 1fr;
  align-items: center;
}

/* 左カラムの右端（＝ボックスの左隣）へ寄せる。justify-self: end はブロックレイアウトにも
   効く（縦積み時に右寄せが残る）ため使わず、text-align で寄せる */
.home-search-band__label {
  text-align: right;
  margin: 0 28px 0 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--home-navy);
  white-space: nowrap;
}

.home-search-band .hero-search-form {
  grid-column: 2;
  margin-bottom: 0;
}

/* 見出しと 720px のボックスが左右対称に収まらない幅では、見出し→ボックスの縦積みへ切り替える。
   1fr は minmax(auto, 1fr) のため、狭い幅では見出しのある左トラックだけが min-content
   （約 169px）まで押し広げられ、ボックスが中央から右へ寄ってしまう。
   境界は home-container の max-width: 1120px に合わせる */
@media (max-width: 1119px) {
  .home-search-band__inner {
    display: block;
  }

  .home-search-band__label {
    margin: 0 0 10px;
    text-align: center;
  }
}

/* ----- バナー掲載エリア（admin「トップページ設定」で登録。1 件も無ければ非表示） -----
   高さはバナー画像に応じて可変。横幅は各バナーの設定で 100% / 50%（2カラム） / 33%（3カラム）。
   幅の合計が 1 行に収まらない分は flex-wrap で次の行へ折り返す。 */
.home-banner-section {
  background: #fff;
  padding: 28px 0;
  border-bottom: 1px solid #f0edfa;
}

.home-banner-grid {
  --banner-gap: 16px;

  display: flex;
  flex-wrap: wrap;
  gap: var(--banner-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-banner-item--full {
  width: 100%;
}

.home-banner-item--half {
  width: calc((100% - var(--banner-gap)) / 2);
}

.home-banner-item--third {
  width: calc((100% - var(--banner-gap) * 2) / 3);
}

.home-banner-link {
  display: block;
  transition: opacity 0.15s ease;
}

.home-banner-link:hover {
  opacity: 0.85;
}

.home-banner-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

@media (max-width: 900px) {
  /* 33%（3カラム）は狭い画面では 2 列に */
  .home-banner-item--third {
    width: calc((100% - var(--banner-gap)) / 2);
  }
}

@media (max-width: 560px) {
  /* スマホではすべて 1 列（横幅いっぱい）に */
  .home-banner-item--half,
  .home-banner-item--third {
    width: 100%;
  }
}

/* ----- 掲載企業ロゴ（仮） ----- */
.logo-strip-section {
  background: var(--hp-logo-strip-bg, #fff);
  padding: 18px 0;
  border-bottom: 1px solid #eef1f4;
  overflow: hidden;
}

/* 掲載企業ロゴのマーキー（左へ自動スクロール＆無限ループ）。
   同じロゴ列を3セット複製し、1セット分（-33.333%）translateX することで
   2セット目が1セット目の位置に来て継ぎ目なくループする。 */
.logo-marquee {
  width: 100%;
  overflow: hidden;
}

.logo-track {
  display: flex;
  align-items: center;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: logo-marquee-scroll var(--logo-duration, 30s) linear infinite;
  will-change: transform;
}

/* 列間の余白は flex-gap ではなく各 chip の margin で表現する
   （translateX(-33.333%) がちょうど1セット幅になり、継ぎ目が出ないようにするため）。
   枠を外したぶん間隔を広めに取る。 */
.logo-track .logo-chip {
  margin-right: 48px;
}

@keyframes logo-marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-33.333%); }
}

/* モーション低減設定では自動スクロールを止め、1セットのみ折り返し表示する */
@media (prefers-reduced-motion: reduce) {
  .logo-track {
    animation: none;
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
  }

  .logo-track .logo-chip {
    margin-right: 0;
  }

  .logo-track .logo-chip[aria-hidden="true"] {
    display: none;
  }
}

/* 枠・背景・余白は付けず、ロゴ画像そのものを大きく見せる。
   高さを揃え、横幅はロゴの縦横比に応じて自動（横長ロゴは max-width で上限）。 */
.logo-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 88px;
}

.logo-chip__img {
  max-height: 88px;
  width: auto;
  max-width: 380px;
  object-fit: contain;
}

/* ----- セクション背景（淡色。注目の求人） ----- */
.home-section--featured-jobs {
  background-color: var(--hp-featured-jobs-bg, #f7f5fc);
}

/* ----- 条件から探す（3カード＋ダイアログ。イラストは admin で設定可） ----- */
.cond-grid {
  display: grid;
  /* カードは職種・勤務地・働き方の 3 枚で、表示設定で職種／働き方を隠すと 1〜3 枚に
     変わる（勤務地は常に出る）。固定の列数だと右端に空セルができるため、auto-fit で
     枚数に追従させて空セルを作らない。 */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}

.cond-form {
  display: block;
}

.cond-card {
  display: block;
  height: 100%;
}

.cond-card__trigger {
  position: relative;
  /* イラスト（またはアイコン）を左、ラベルを右に置く横並びカード（デザイン準拠）。
     虫眼鏡は右下の丸ボタン。 */
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  width: 100%;
  height: 100%;
  min-height: 112px;
  padding: 18px 20px 24px;
  background: #fff;
  border: 1px solid #e6e3f5;
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}

.cond-card__trigger:hover {
  border-color: rgba(123, 108, 246, 0.55);
  box-shadow: 0 10px 24px rgba(63, 47, 158, 0.12);
  transform: translateY(-2px);
}

/* キーボード操作時のフォーカス可視化（他のダイアログトリガーと体裁を揃える） */
.cond-card__trigger:focus-visible {
  outline: 2px solid var(--home-violet);
  outline-offset: 2px;
}

/* admin 設定のイラスト画像（未設定時は .cond-card__icon の SVG アイコン） */
.cond-card__visual {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
}

.cond-card__visual-img {
  max-height: 64px;
  max-width: 100%;
  object-fit: contain;
}

.cond-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 96px;
  flex-shrink: 0;
}

.cond-card__icon svg {
  width: 48px;
  height: 48px;
}

.cond-card__label {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--home-navy);
  padding-bottom: 8px;
  border-bottom: 2px solid #e6e3f5;
}

/* 虫眼鏡はカード右下の丸いグラデーションボタン風にする */
.cond-card__search {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--home-grad);
  color: #fff;
  box-shadow: 0 4px 10px rgba(123, 108, 246, 0.35);
}

.cond-card__search svg {
  width: 17px;
  height: 17px;
}

/* アクセント別：アイコン（currentColor）だけ色分けする（カード自体は白で統一） */
.cond-card--info    { color: var(--home-blue); }
.cond-card--success { color: #34b37e; }
.cond-card--primary { color: var(--home-pink); }
.cond-card--accent  { color: #e0a400; }

/* ----- 注目の企業特集（admin 登録の企業ロゴ＋リンク・カルーセル） ----- */
.company-feature-carousel {
  position: relative;
}

.company-feature-track {
  display: flex;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  /* scroll-snap / scroll-behavior:smooth はこの横スクロールコンテナでは programmatic scroll が
     開始位置へ戻る（Chromium の癖）ため使わない。矢印送りは JS から scrollTo({behavior:"smooth"})
     でスライド境界に揃えて行う（モーション低減時は behavior:"auto"）。 */
  scrollbar-width: none;
}

.company-feature-track::-webkit-scrollbar {
  display: none;
}

/* 1 画面に 4 件（gap 16px × 3 = 48px を差し引いて 4 等分）。
   スライド全体を1枚の白カードにし、ロゴ＋紹介文を内包する（デザイン準拠）。 */
.company-feature-slide {
  flex: 0 0 calc((100% - 48px) / 4);
  /* flex アイテムの自動 min-width（ロゴ画像の固有幅）で flex-basis より広がるのを防ぐ */
  min-width: 0;
  background: #fff;
  border: 1px solid #e6e9ec;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(34, 28, 80, 0.06);
}

/* カード下の紹介文（admin で設定） */
.company-feature-slide__desc {
  margin: 0;
  padding: 12px 14px 14px;
  font-size: 0.8rem;
  line-height: 1.7;
  color: var(--home-navy);
  background: #fbfaff;
  text-align: left;
}

/* 左右の矢印ボタン（端では JS で hidden にする） */
.company-feature-carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid #e6e9ec;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  color: #2d3436;
  font-size: 1.5rem;
  line-height: 1;
  /* ‹ › の字面はベースライン寄り（下寄り）に描かれるため、視覚中心に合わせて少し上げる */
  padding: 0 0 4px;
  cursor: pointer;
}

.company-feature-carousel__arrow:hover {
  background: var(--color-bg-soft);
}

.company-feature-carousel__arrow[hidden] {
  display: none;
}

.company-feature-carousel__arrow--prev {
  left: -16px;
}

.company-feature-carousel__arrow--next {
  right: -16px;
}

/* ページ位置ドット（デザインの SP 版用。featured-carousel コントローラがページ数ぶん生成する）。
   PC では矢印送りのため出さず、SP（768px 以下）の media で表示に切り替える */
.carousel-dots {
  display: none;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}

.carousel-dots[hidden] {
  display: none;
}

.carousel-dots__dot {
  position: relative;
  width: 18px;
  height: 7px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: #d3d9f7;
  cursor: pointer;
  transition: background-color 0.2s, width 0.2s;
}

/* SP では矢印を隠してドットが唯一の送り操作になるため、見た目はデザインどおりの
   細いバーのまま、擬似要素で指で押せる大きさまでタップ領域だけを広げる */
.carousel-dots__dot::before {
  content: "";
  position: absolute;
  inset: -14px -6px;
}

.carousel-dots__dot.is-active {
  width: 26px;
  background: #4b4deb;
}

.company-feature-card {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 128px;
  /* ロゴを最大化するため内側余白（マージン）は設けない。
     枠・角丸はスライド（.company-feature-slide）側で持つ。 */
  padding: 0;
  background: #fff;
  transition: box-shadow 0.2s, transform 0.15s;
}

.company-feature-card:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

/* ロゴはカードいっぱい（縦最大）まで広げる。アスペクト比は object-fit: contain で保つ。 */
.company-feature-card__logo-img {
  width: 100%;
  height: 128px;
  object-fit: contain;
}

.company-feature-card__name {
  font-size: 0.82rem;
  font-weight: 600;
  color: #2d3436;
  text-align: center;
  line-height: 1.4;
}

/* ----- フッター（v3・ネイビー＋背景イラスト＋SNS） ----- */
.site-footer-v3 {
  position: relative;
  /* デザインのフッター地色（濃紺） */
  background: #081637;
  color: #c9c5e8;
  padding: 48px 0 24px;
  overflow: hidden;
  /* 企業管理画面ではサイドバー横に描画され実効幅がビューポートより狭くなるため、
     レスポンシブはビューポートでなくフッター自身の幅（コンテナクエリ）で判定する */
  container-type: inline-size;
  container-name: site-footer;
}


/* admin 設定の背景イラスト（デザイン準拠で右端に寄せてフッターの高さいっぱいに表示する） */
.site-footer-v3__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.site-footer-v3__bg-img {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 100%;
  width: auto;
  object-fit: contain;
  object-position: right bottom;
  /* イラスト矩形の左端・上端の境目をフッター地色へなじませる */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 18%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 18%);
}

/* 文字が載る範囲（ナビ 3 列目の右端 ≒ フッター幅の 88%）までは暗色を保って可読性を守り、
   テキストが載らない右端だけ薄くしてイラストを鮮やかに見せる（1440px ではイラストが
   3 列目のリンクの背後まで届くため、右端まで一律に薄くすると文字が読めなくなる）。
   完全に白い画像まで文字の基準コントラストを保証するにはイラストが潰れるほどの不透明度が
   必要なため、admin のヒントで「暗めの画像を推奨」と案内して運用で補う。 */
.site-footer-v3__bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(8, 22, 55, 0.85) 0%,
    rgba(8, 22, 55, 0.6) 55%,
    rgba(8, 22, 55, 0.55) 88%,
    rgba(8, 22, 55, 0.12) 100%);
}

.site-footer-v3__content {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) 2fr;
  gap: 24px 40px;
}

/* ブランド枠はナビ＋CTA の 2 行ぶんに渡し、ロゴ上・SNS 下・© 最下段の縦積みにする
   （デザイン準拠：SNS は企業 CTA と同じ高さ・© は左下） */
.site-footer-v3__brand {
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
}

/* ロゴブロックはトップページへのリンク。親（PC はブランド枠・SP はフッター本体）の
   flex アイテムとして幅いっぱいに伸びるとロゴ右の余白までクリック領域になるため、
   自然幅に収めてロゴの見た目どおりの範囲だけを押せるようにする */
.site-footer-v3__logo-block {
  display: inline-flex;
  flex-direction: column;
  align-self: flex-start;
}

/* 画像のロゴは、縦並びの flex をやめて block にする（ヘッダーの .home-header__brand と同じ理由）。
   縦並びの flex のままだと、WebKit（Safari）はロゴ画像がこの枠の配置より後に届いたとき枠の幅を決め直さず、
   ロゴが 0x0 のまま描かれない（フッターが 1 列の grid になる 561〜900px で、ロゴ画像を 1.5 秒遅らせると再現する）。
   幅は align-self: flex-start のまま自然幅に収まるので、押せる範囲は変わらない。
   縦に積むのは文字のロゴ（ロゴ＋タグライン）のときだけでよい */
.site-footer-v3__logo-block:has(.site-footer-v3__logo-img) {
  display: block;
}

.site-footer-v3__logo {
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
}

.site-footer-v3__logo-img {
  display: block;
  /* デザイン実測に合わせてひと回り大きく */
  max-height: 56px;
  width: auto;
}

.site-footer-v3__tagline {
  margin-top: 8px;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.7;
}

/* SNS リンク（admin で URL 設定したものだけ表示）。デザイン準拠でブランド枠の下端へ寄せる */
.site-footer-v3__sns {
  list-style: none;
  display: flex;
  gap: 12px;
  margin: auto 0 0;
  padding: 0;
}

/* SNS 円はデザイン準拠で白地＋濃紺アイコン（PC/SP 共通） */
.site-footer-v3__sns-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  color: #081637;
  transition: background-color 0.2s, transform 0.15s;
}

.site-footer-v3__sns-link:hover {
  background: rgba(255, 255, 255, 0.8);
  transform: translateY(-2px);
}

.site-footer-v3__sns-link svg {
  width: 17px;
  height: 17px;
}

.site-footer-v3__cols {
  display: grid;
  /* デザイン準拠の3カラムナビ */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  /* 1440px 前後では 3 列目が背景イラストに重なるため、地色のハローで文字の背後だけ沈めて
     可読性を守る（イラストの無い場所では地色と同色のため見えない） */
  text-shadow: 0 0 6px #081637, 0 0 10px #081637;
}


/* 見出しは紫・リンクは白（PC/SP 共通）。Figma実測: 見出し 14px/700/#8d7ac5 */
.site-footer-v3__heading {
  font-size: 0.875rem;
  font-weight: 700;
  color: #8d7ac5;
  margin-bottom: 13px;
}

.site-footer-v3__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Figma実測: リンク 12px/500/白・行送り 20px */
.site-footer-v3__list a {
  font-size: 0.75rem;
  font-weight: 500;
  color: #fff;
  transition: color 0.2s;
}

.site-footer-v3__list a:hover {
  text-decoration: underline;
}

/* 企業向け CTA はナビ列の下に、1 列目（お仕事をお探しの方）と左端を揃えて置く
   （デザイン準拠。区切り線は敷かない） */
.site-footer-v3__bottom {
  grid-column: 2;
  display: flex;
  justify-content: flex-start;
  margin-top: 10px;
}

.site-footer-v3__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  /* Figma実測: 360×59px・枠線 2px・文言 16px/500 */
  padding: 16px 48px;
  border: 2px solid #fff;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 500;
  color: #fff;
  transition: background-color 0.2s;
}

.site-footer-v3__cta:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* CTA 内の人物アイコン（デザイン準拠の装飾） */
.site-footer-v3__cta-icon {
  width: 24px;
  height: 28px;
  object-fit: contain;
}

.site-footer-v3__copy {
  margin-top: 20px;
  font-size: 0.78rem;
  color: #c9c5e8;
}

/* ----- 選ばれる理由セクションの装飾（三角・丸・菱形） ----- */
.reasons-section {
  position: relative;
  overflow: hidden;
}

.reasons-section .home-section-title {
  text-align: center;
}

/* （旧・文字装飾 ▲●◆ は画像装飾 .home-deco--reasons-* に置き換えた） */

/* ----- トップページ レスポンシブ ----- */
@media (max-width: 1080px) {
  /* 注目の求人カードは 4 → 2 列に */
  .featured-job-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  .column-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* ---- 条件から探す：横長カードの縦並び（デザインの SP 版。左にイラスト・
         ラベル＋短い飾り線・右下に虫眼鏡） ----
     3 枚を 2 列に並べると 1 枚が余って収まりが悪く、狭い幅では 7 文字のラベル
     （勤務地から探す・働き方から探す）が右下の虫眼鏡に重なる。そのため、2 列にして
     いた幅（900px 以下）をまるごと 1 列にする（2026-09-17 オーナー判断。iPad の縦
     744〜834px も 1 列になる）。901px 以上は基底の auto-fit のまま 3 列。 */
  .cond-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    /* 広い側では 1 枚が入れ物の幅まで伸びて間延びする（900px では 852px）ため、
       カードの幅をスマホと同じ 560px で止める。左端は入れ物のまま（中央に寄せない）＝
       見出し（◆条件から探す）と、上下のセクションの見出しの縦のラインにそろえる。
       タブレットでもう少し広げたいときは、この 560px だけを変えればよい。 */
    max-width: 560px;
  }

  /* 基底と同じ横並びのまま、高さを抑えて右側に虫眼鏡（右下・32px）ぶんを空ける */
  .cond-card__trigger {
    gap: 12px;
    min-height: 84px;
    padding: 13px 48px 13px 12px;
  }

  /* イラスト枠を固定幅にせず幅の 34%（最大 120px）にしているのは、390px 以上では
     デザインどおりイラストを内側に寄せたいが、320px ではラベル（7 文字＝約 101px）が
     1 行に収まる幅を残す必要があるため。画像自体は下の max-height で 56px に収まる。
     admin で画像を未設定にしても標準画像に落ちるので、SVG アイコン側（.cond-card__icon）
     は描画されない＝ここでは面倒を見ない。 */
  .cond-card__visual {
    width: 34%;
    max-width: 120px;
    height: 56px;
  }

  .cond-card__visual-img {
    max-height: 56px;
  }

  /* ラベルは左寄せのまま、デザインの SP 版どおり短い紺色の飾り線を下に引く
     （基底の「ラベル幅いっぱいの薄い下線」は消す）。
     min-width: 0 は、長いラベルでもカードからはみ出さないための保険。 */
  .cond-card__label {
    min-width: 0;
    font-size: 0.9rem;
    padding-bottom: 0;
    border-bottom: none;
  }

  .cond-card__label::after {
    content: "";
    display: block;
    width: 24px;
    height: 2px;
    margin-top: 10px;
    /* ラベルの文字色（--home-navy）をそのまま使う */
    background: currentColor;
  }

  /* 虫眼鏡はデザイン準拠の単色ブルー（PC のグラデーションは使わない） */
  .cond-card__search {
    width: 32px;
    height: 32px;
    right: 8px;
    bottom: 8px;
    background: #5c4de7;
    box-shadow: none;
  }

  /* 枠の色は DOM の位置ではなくカードの種類で決める（職種＝青紫・勤務地＝紫・
     働き方＝ピンク）。admin の表示切替でカードが 1〜3 枚に減っても、残ったカードの
     色が変わらない。クラス 1 つの詳細度（0,1,0）にしているのは、基底の枠色には勝ち、
     hover の枠色（.cond-card__trigger:hover＝0,2,0）には譲るため。
     パーシャルは accent: "success" も受け付けるが、今のトップページの 3 枚では
     使っていないので色を置いていない（置くと淡い紫／ピンク以外の色を勝手に決める
     ことになる）。4 枚目を足すときは、デザインの色を確かめてここに 1 行足す。 */
  .cond-card--info {
    border-color: #dcdcf7;
  }

  .cond-card--primary {
    border-color: #e6d3f4;
  }

  .cond-card--accent {
    border-color: #f6d3e8;
  }

  /* 注目の企業特集カルーセルは 2 件/画面に */
  .company-feature-slide {
    flex-basis: calc((100% - 16px) / 2);
  }

  .hero-v3__title,
  /* 画像モードの 2.5rem 指定（詳細度 0,2,0）にも勝てるようセレクタを揃える */
  .hero-v3--image .hero-v3__title {
    font-size: 1.7rem;
  }

  .reason-grid {
    grid-template-columns: 1fr;
  }

  .site-footer-v3__content {
    grid-template-columns: 1fr;
  }

  /* 1 カラム化に合わせて、ブランド枠の行スパン・CTA の列指定を解除する */
  .site-footer-v3__brand {
    grid-row: auto;
  }

  .site-footer-v3__bottom {
    grid-column: auto;
  }

  .site-footer-v3__cols {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---- SP（768px 以下）：デザインの SP 版（iPhone モック）に合わせたレイアウト ---- */
@media (max-width: 768px) {
  .home-container {
    padding: 0 16px;
  }

  /* ---- ヘッダー：ナビはハンバーガーメニューへ収納し、ロゴ・ボタンを小型化 ---- */
  .home-header__inner {
    /* space-between だと（ナビ収納後に残る）3 要素が等間隔に散るため、
       ロゴの margin-right で「ロゴ左・ボタン群右」へ寄せる */
    justify-content: flex-start;
    gap: 8px;
    padding: 10px 12px 10px 16px;
  }

  .home-header__brand {
    margin-right: auto;
  }

  /* 画像のロゴは、1 行に足りない分だけ縮める（ボタンとメニューボタンは縮めない）。
     flex-wrap の折り返しは各要素の基準の幅（flex-basis）で決まるため、ロゴの基準を 0 にして
     折り返しの原因から外し、flex-grow で本来の幅（max-content）まで戻す。
     1 行に収まる幅では本来の幅で止まるので、見た目は変わらない。
     - min-width: 下限。これより狭いときは縮めずに、今までどおりメニューボタンを次の段へ回す
       （ロゴが見分けられない大きさになるのを防ぐ。280px の画面では 1 行に収まる値）
     - 枠が block なのは、幅の条件の外の .home-header__brand:has(.home-header__logo-img) による。
       縦並びの flex のままだと、WebKit が縮んだ後の画像の幅を本来の幅として扱い、
       画面を狭めてから広げたときにロゴが縮んだまま戻らない
     - 文字のロゴ（画像が無いときの分岐）は折り返せない語を含むので、画像のロゴに限る */
  .home-header__brand:has(.home-header__logo-img) {
    flex: 1 1 0;
    min-width: 56px;
    max-width: max-content;
  }

  .home-header__brand:has(.home-header__logo-img) .home-header__logo-img {
    max-width: 100%;
  }

  .home-header__logo {
    font-size: 1.2rem;
  }

  .home-header__logo-img {
    max-height: 30px;
  }

  .home-header__brand-sub {
    font-size: 0.6rem;
  }

  /* DOM 上はキーボード操作のためトグル→ナビ→アカウントの順（開いたとき Tab で
     メニュー項目へ直行できる）。見た目はデザイン通り「アカウント左・トグル右端」に
     order で並べ替える */
  .home-header__account {
    order: 2;
    gap: 6px;
  }

  .home-header__btn {
    padding: 7px 12px;
    font-size: 0.72rem;
  }

  .home-header__menu-toggle {
    display: flex;
    order: 3;
  }

  /* ナビは閉じている間は出さず、開いたらヘッダー下に全幅で縦に並べる */
  .home-header__nav {
    display: none;
    order: 10;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 4px 0 8px;
    border-top: 1px solid color-mix(in srgb, var(--hp-header-fg, #fff) 18%, transparent);
  }

  .home-header.is-menu-open .home-header__nav {
    display: flex;
  }

  .home-header__nav-link {
    padding: 11px 4px;
    font-size: 0.92rem;
  }

  /* ---- ヒーロー：デザインの SP 版（絵柄は右上だけに見せ、文字は白地の上に置く） ---- */
  .hero-v3 {
    padding: 32px 0 28px;
  }

  .hero-v3--image {
    /* 下は 28px（旧値 64px）。64px のままだと KV フレームの高さ（Figma 490px）に対して
       縦に間延びするため詰めた。旧値は下端フェード（::after・56px）にコピーが重ならない
       余白として置かれていたが、**詰めても実害が無い**: 画像は 400px（93.02vw）で終わり、
       そこから下は地色（白）なので、件数ピルは**フェードではなく地色の上**に載る
       （白の上に白へのフェードを重ねても見た目は変わらない）。加えて .hero-v3__inner は
       z-index: 1 で ::after より前面なので、いずれにせよ文字が沈むことはない */
    padding: 32px 0 28px;

    /* ---- SP ヒーローの寸法（Figma 430x490 実測。ここが唯一の定義元） ----
       すべて 430px 幅を基準にした vw。430px 以外の端末でもデザインの比率を保つ */

    /* 地色。**絵柄の左側と下側はこの色が見えている**（マスクではない。下記） */
    --hero-sp-ground: #fff;
    /* 見出しの幅。Figma 実測 191px / 430px */
    --hero-sp-text-width: 44.4vw;
    /* リード文の幅。Figma 実測 185px / 430px（見出しより 6px 狭い） */
    --hero-sp-lead-width: 43vw;
    /* 文字の白縁取り。**Figma は 4px・60%・外側**だが、そのままの数値は使えない。
       CSS の -webkit-text-stroke は**グリフの輪郭を中心に**引き、paint-order: stroke fill で
       内側半分が塗りに隠れるので、**見た目の外側は指定値の半分**になる。
       4px をそのまま入れると 20px / 16px の文字に対して太すぎて滲む。
       320 / 390 / 430 / 560 / 768px で見比べて次に決めた（不透明度は中心引きのぶんを補って 60% → 80%）:
         見出し 2px … 20px の本文と 32px の強調語。強調語は大きく太いので 2px で足りる
         リード 3px … 16px。**絵柄の不透明な部分に最も近い**ので厚めにする */
    --hero-sp-text-stroke: 2px;
    --hero-sp-lead-stroke: 3px;
    --hero-sp-stroke-color: rgb(255 255 255 / 80%);

    /* **SP は専用素材（430x400）に差し替える。** 未設定なら PC 用（--hero-bg）に落ちる。
       PC 用の横長 KV を SP でも使うと、同じ切り出し位置に暗い部分が来て文字が読めない */
    background-image: var(--hero-bg-sp, var(--hero-bg));

    /* **マスクは要らない。素材そのものが左を透明にしてある。**
       オーナー支給の素材は 430x400 で、アルファが x=148（透明）→ x=206（不透明）へ
       横方向に線形で変化する（全行で同一。実測値）。つまり「絵柄は右・左は下地が透ける」が
       画像に焼き込まれている。CSS でオーバーレイを重ねるとフェードが二重になるので置かない。
       下側も同じで、画像が 400px で終わったあとは地色（--hero-sp-ground）がそのまま出る。

       **px を決め打ちしない。** 幅いっぱいに敷き、高さは 430:400 の比率で決まるに任せる。
       こうしておくと、**高解像度版が届いてもファイルを置き換えるだけで済む**（比率が同じなら
       CSS は無変更）。#397 では Figma の箱の座標を vw に焼き直していたが、その必要も無くなった。

       **画像の下が切れ始めるのは 559px から。これは意図した選択。**
       閾値が 2 つあるので取り違えないこと:
         456px … min-height（min(114vw, 520px)）が 520px で頭打ちになる幅
         559px … 画像の高さ（93.02vw）が 520px に達する幅（= 520 / 0.9302）
       457〜558px では画像はまだヒーローより低いので、**地色の帯は出る**（狭いが）。
       559px から上で画像がヒーローより高くなり、下端が切れて**地色の帯が出なくなる**。
       なお中身（折り返した見出し等）がヒーローを 520px より高くしている間は、
       切れ始める幅はもっと後ろになる。
       代わりに画像側を頭打ちにすると「絵柄が 456px 幅で止まり、右が地色のまま残る」形になり、
       画像が左に浮いて見える（#397 で実際に試した）。切れるほうが PC のヒーローと同じ見え方で
       収まりが良いので、こちらを採っている。デザインが定義しているのは 430px の 1 点だけ。 */
    background-size: 100% auto;
    background-position: left top;
    background-repeat: no-repeat;

    /* Figma 実測: KV フレーム 430x490（430px 幅で 114vw） */
    min-height: min(114vw, 520px);
    background-color: var(--hero-sp-ground);
  }

  /* **左端の安全網。** 以前ここにあった白マスク（左と下を L 字に覆う）は、支給素材が
     アルファで同じことをしているので落とした。ただし素材は admin から差し替えられるので、
     **透過の無い素材を入れられたときに見出しが全面で絵柄に乗る**のを防ぐ一枚だけ残す。

     終端（34.4vw）は**支給素材のアルファが 0 の範囲の内側**に置いてある（実測で
     x=148/430 = 34.42vw から透け始める）。つまり**正しい素材では白の上に白を塗るだけで、
     見た目は 1px も変わらない**（フェードが二重にならない）。実際に有り／無しで
     レンダリングを突き合わせて同一であることを確認済み。
     透過の無い素材が入ったときだけ、左 34.4% が白くなって見出しが読める側に倒れる。
     モデル側でも hero_image_sp を PNG / WebP に絞ってあるが、PNG でも不透明にはできるため
     形式の検証だけでは防げない。 */
  .hero-v3--image::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to right,
      var(--hero-sp-ground) 0 34.4vw,
      rgb(255 255 255 / 0%) 34.4vw
    );
    pointer-events: none;
  }

  /* 画像の下端はデザイン同様、次のロゴ帯（白）へフェードさせる */
  .hero-v3--image::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 56px;
    /* フェード先はビュー側で渡すロゴ帯（マーキー）の地色（--hp-hero-fade） */
    background: linear-gradient(180deg, rgb(255 255 255 / 0%), var(--hp-hero-fade, #fff));
    pointer-events: none;
  }

  /* 本文は白のオーバーレイ・フェードの上に載せる */
  .hero-v3--image .hero-v3__inner {
    z-index: 1;
  }

  .hero-v3--image .hero-v3__copy {
    width: 100%;
    max-width: none;
    /* タブレット（〜1000px）用の白い下地パネルは使わず、ハロー付き文字を直接載せる */
    background: none;
    border-radius: 0;
    padding: 0;
  }

  .hero-v3__title,
  .hero-v3--image .hero-v3__title {
    /* 上限はデザイン実測相当（430px 幅で約 29px）。admin 文言の 1 行（13 文字程度）が
       折り返さずに収まるよう画面幅にも追従させる。
       ただし強調語（**囲み**）は 1.4em で表示されるため、その分の余裕は見込んでいない
       （強調の多い行は 13 文字より手前で折り返す） */
    font-size: clamp(1.5rem, 6.7vw, 1.8rem);
    line-height: 1.55;
    margin-bottom: 14px;
  }

  .hero-v3__lead {
    font-size: 0.88rem;
    line-height: 1.9;
    margin-bottom: 18px;
  }

  /* 見出し・リード文の幅。Figma 実測で**テキストブロックは 191px（430px の 44.4%）**。
     画像の左端は 150px なので、テキストの右側 41px 分は絵柄に重なる（デザインどおり）。
     % ではなく vw で指定する（親の内側幅ではなく画面幅に対する実寸で合わせるため）。 */
  .hero-v3--image .hero-v3__title,
  .hero-v3--image .hero-v3__lead {
    /* 文字の右側は絵柄に重なる（画像の可視左端 150px < テキスト右端 207px）。
       デザインは重なる部分を**白の縁取り**で読ませているので、同じ処置をする。
       paint-order を省くと縁取りが文字の内側にも乗って痩せて見える。
       text-shadow（旧実装のハロー）は使わない。にじんで細い仮名が潰れるため */
    paint-order: stroke fill;
    -webkit-text-stroke: var(--hero-sp-text-stroke) var(--hero-sp-stroke-color);
    text-shadow: none;
  }

  .hero-v3--image .hero-v3__title {
    max-width: var(--hero-sp-text-width);
  }

  .hero-v3--image .hero-v3__lead {
    max-width: var(--hero-sp-lead-width);
    -webkit-text-stroke-width: var(--hero-sp-lead-stroke);
    /* **語の途中で折り返させない**（見出しの .hero-v3__title と同じ考え方）。これが無いと
       「映／像」「キャ／リア」のように語が割れる（staging の SP 全幅・両ブラウザで実測）。
       改行してよい位置は、ヘルパー（ApplicationHelper#format_multiline_phrases）が文節の境目に置く
       <wbr> と、空白・約物の後だけになる。文節は BudouX（lib/budoux）で機械的に区切るので、
       管理画面で文章を変えても境目が付く。PC は 2 行に収まっていて割れないので、SP だけに掛ける。

       **割り切り: 1 つの文節が行に収まらないときは、break-word の緊急改行で語の途中で切る。**
       既定の文言では、320px の Chromium で「キャリアプラットフォーム」（12 文字。行に 11 文字しか入らない）が
       これに当たる。折らずにはみ出させると、長い語を入れたときにヒーローの overflow: hidden で欠けて
       読めなくなるため、割れるほうを選んでいる。 */
    word-break: keep-all;
    overflow-wrap: break-word;
  }

  /* Figma 実測（430px 幅）: 通常 20px・行送り 30px。
     旧実装は全幅に文字を置く前提で 28.8px あり、幅を絞ると 2〜3 文字で折り返してしまう。
     詳細度は上の `.hero-v3__title, .hero-v3--image .hero-v3__title`（0,2,0）と同じなので、
     後に書くことで勝たせる */
  .hero-v3--image .hero-v3__title {
    font-size: clamp(0.95rem, 4.65vw, 1.25rem);
    line-height: 1.5;
    /* **語の途中で折り返させない。** 日本語はどの仮名の間でも改行できるので、
       これが無いと「おもしろ／く」「な／る」のように語が割れる。
       改行してよい位置は、ヘルパー（ApplicationHelper#format_multiline_accent）が
       強調語と地の文の境目に置く <wbr> だけになる。<wbr> は keep-all に抑制されない。
       overflow-wrap は break-word（anywhere ではない）。anywhere は**行に収まらないときに
       任意の位置で切る**ため、keep-all を入れても結局 語の途中で割れる（実測で確認）。

       **割り切り: 強調語（`**囲み**`）が無い行には改行機会が 1 つも無い。** その行が
       テキスト幅に収まらないと、break-word の緊急改行で切られる。緊急改行には禁則が
       効かないので `、` `」` `ー` などが行頭に来得る。既定文言（「キャリアはここから」は
       320px でも 1 行に収まる）では起きないが、admin で長い行を入れると起こる。
       見出しは 120 文字まで自由入力なので完全には防げない、という前提でこの形にしている。 */
    word-break: keep-all;
    overflow-wrap: break-word;
    /* 縁取りは上の `.hero-v3__title, .hero-v3__lead` でまとめて掛けている
       （太さの根拠は --hero-sp-text-stroke のコメント）。
       #393 の時点では画像をテキストより右から出していたので縁取り無しだったが、
       SP 用素材が入って**デザインどおりテキストが絵柄に重なる**ようになったため掛けている */
  }

  /* Figma 実測: 強調語は 32px（通常 20px の 1.6 倍）。
     **字間 −6% が折り返しの鍵。** 「おもしろく」5 字は 32px なら 160px で、
     「なる」40px と合わせて 200px となりテキストブロック（191px）を超えて折り返す。
     −6% で 150.4 + 40 = 190.4px となり、ちょうど 1 行に収まる。 */
  .hero-v3--image .hero-v3__title-accent {
    font-size: 1.6em;
    letter-spacing: -0.06em;
    /* 折り返しの指定は**見出し側にまとめた**（上の .hero-v3__title）。
       ここに keep-all / overflow-wrap を個別に置くと、強調語だけ別の規則で折り返り、
       地の文（「なる」など）との境目の扱いがずれる。
       とくに overflow-wrap: anywhere は「行に収まらないときに任意の位置で切る」ため、
       keep-all を入れても語の途中で割れていた（320px で「もっとおもしろ／くなる」）。 */
  }

  /* Figma 実測: Noto Sans JP Bold 700・16px・行間 26px（= 1.625）・字間 −4%・文字色 #000。
     旧実装は絵柄の上で白抜きだったが、デザインは黒文字 + 白縁取りで載せている */
  .hero-v3--image .hero-v3__lead {
    color: #000;
    font-weight: 700;
    font-size: clamp(0.8rem, 3.72vw, 1rem);
    line-height: 1.625;
    letter-spacing: -0.04em;
  }

  /* CTA はデザイン準拠で 2 ボタン横並び（無料登録＝ピンク／ログイン＝白）。
     nowrap の文言（min-content）でトラックが 1fr の最小幅を押し広げないよう minmax(0, 1fr) にする */
  .hero-v3__actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
    margin-bottom: 18px;
  }

  .hero-v3__actions .btn-v3 {
    padding: 13px 8px;
    /* 「無料登録する（簡単1分）」が 320px 幅の端末でも 1 行で収まるように画面幅へ追従させる
       （下限 0.62rem は 320px 時のカラム幅 139px から逆算） */
    font-size: clamp(0.62rem, 3.3vw, 0.85rem);
    white-space: nowrap;
  }

  .hero-v3__actions .btn-v3--outline {
    border-color: #e8e4fb;
    box-shadow: 0 6px 16px rgb(34 28 80 / 10%);
  }

  /* 件数ピルはデザイン準拠で内容幅・中央寄せ */
  .hero-v3__stats {
    display: block;
    width: fit-content;
    margin: 0 auto;
    text-align: center;
    font-size: 0.9rem;
    padding: 9px 22px;
  }

  .hero-v3__stats strong {
    font-size: 1.3rem;
  }

  /* ---- 掲載企業ロゴ：白地に 5 社前後を大きく見せる ----
     **素材（316x220）はロゴの周りに余白を含む。** 画像の高さを 30px に抑えていたため、
     中のロゴマークは 15px 程度にしかならず、デザインより大幅に小さく見えていた
     （CSS の「ロゴ高 約26px」はマークの高さで、画像の高さではなかった）。
     マークがデザイン相当に見える画像高へ上げ、幅は 5 社前後が収まる上限にする。 */
  /* Figma 実測: 帯 430x60・白・可視 5 社・ピッチ約 83px・ロゴの実描画高 16〜20px。
     素材（316x220）の余白ぶん、画像の高さはマークの高さより大きく取る必要がある。 */
  .logo-strip-section {
    padding: 10px 0;
  }

  .logo-chip {
    height: 40px;
    /* ピッチ 83px = 幅 71px + 余白 12px。幅を固定して社ごとの横幅差で間隔がぶれないようにする */
    width: 71px;
  }

  .logo-chip__img {
    max-height: 40px;
    max-width: 71px;
  }

  /* マーキーが流れているときの 1 社ごとの間隔。停止時（prefers-reduced-motion）は
     この margin を打ち消す必要がある。打ち消しは SP ブロックの外に置いてある
     （下の @media (max-width: 768px) and (prefers-reduced-motion: reduce)）。
     7911 行の打ち消しはこの規則より前にあり、詳細度が同じ（0,2,0）ぶん負けるため */
  .logo-track .logo-chip {
    margin-right: 12px;
  }

  /* ---- キーワード検索：デザインの SP 版でも 1 行のまま、少し詰める ---- */
  .home-search-band .hero-search-input,
  .home-search-band .hero-search-button {
    font-size: 0.92rem;
  }

  .home-search-band .hero-search-input {
    padding: 13px 16px;
    min-width: 0;
  }

  .home-search-band .hero-search-button {
    padding: 13px 18px;
  }

  /* ---- セクション共通：余白・見出しを詰める ---- */
  .home-section {
    padding: 36px 0;
  }

  .home-section--featured-companies {
    margin-top: 16px;
  }

  .home-section-title {
    font-size: 1.2rem;
    margin-bottom: 20px;
  }

  .home-section-header {
    margin-bottom: 18px;
  }

  .home-section-cta {
    margin-top: 24px;
  }

  .home-section-cta .btn-v3 {
    width: 100%;
  }

  /* ---- カルーセル（企業特集・コラム）：デザインの SP 版は矢印でなくページ位置ドットで送る ---- */
  .company-feature-carousel__arrow {
    display: none;
  }

  .carousel-dots {
    display: flex;
  }

  /* ---- コラム：2 枚/画面の狭いカードでカテゴリバッジが「…」省略されないよう詰める ---- */
  .home-section--columns .column-card-body {
    padding: 12px 12px 16px;
  }

  .home-section--columns .column-card-badge {
    font-size: 0.68rem;
    padding: 3px 8px;
  }

  .home-section--columns .column-card-date {
    font-size: 0.7rem;
  }

  /* （条件から探すの SP の指定は、2 列にしていた 900px 以下のブロックへ移した） */

  /* ---- 注目の求人：タブ・カードを小さめに ---- */
  .featured-job-tabs {
    gap: 8px;
    margin-bottom: 16px;
  }

  .featured-job-tab {
    padding: 6px 14px;
    font-size: 0.8rem;
  }

  /* ---- 選ばれる理由：SP はデザインの SP 版どおり本文左・イラスト右下の 2 カラム ---- */
  .reason-card {
    display: grid;
    /* イラスト列は auto（visual 側の固定幅）。画像未設定カードでは 0 に潰れて本文が全幅になる */
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 10px 12px;
    padding: 20px 18px;
    min-height: 0;
  }

  .reason-card__title {
    grid-column: 1 / -1;
    font-size: 1rem;
    margin-bottom: 0;
  }

  .reason-card__text {
    align-self: start;
    font-size: 0.82rem;
    line-height: 1.7;
  }

  .reason-card__visual {
    position: static;
    width: 132px;
  }

  .reason-card__img {
    max-height: 120px;
  }

  /* ---- 会員登録 CTA：デザインの SP 版（PC と同じグラデ地・白文字のまま角丸カード化して小型化） ---- */
  .cta-banner {
    gap: 8px 14px;
    padding: 26px 20px;
    border-radius: 20px;
  }

  /* マスコットは重ね配置をやめて本文と横並びの通常フローに戻す */
  .cta-banner:has(.cta-banner__mascot) {
    padding-left: 20px;
  }

  /* マスコットはデザイン実測（約105px）に合わせて大きく。360px 幅でも
     文言（min-width 170px）と同じ行に収まるサイズに留める */
  .cta-banner__mascot {
    position: static;
    transform: none;
    width: 100px;
    height: 104px;
  }

  /* 文字色は PC と同じくグラデ地に対して判定済みの --hp-cta-banner-fg（基底ルール）を使う。
     基底の 1.2rem は「大きい文字（太字 14pt ≒ 18.66px 以上）」判定の前提のため下げない */
  .cta-banner__text {
    flex: 1 1 0;
    min-width: 170px;
    text-align: left;
    /* デザイン同様、改行は句読点を優先する（かな・漢字間では折り返さない）。
       句読点まで収まらない長文はカード内に収まる位置で折る（break-word） */
    word-break: keep-all;
    overflow-wrap: break-word;
  }

  /* 文字ボタン（白地・ピンク文字）はデザイン準拠で内容幅・中央寄せ（全幅にしない） */
  .cta-banner .btn-v3--white {
    margin: 12px auto 0;
    font-size: 1.05rem;
    padding: 13px 30px;
  }
}

/* SP かつモーション低減。停止したマーキーは `gap: 18px`（7908 行）で間隔を作るので、
   流れているとき用の `margin-right` を打ち消す。7911 行にも同じ打ち消しがあるが、
   SP ブロックの `.logo-track .logo-chip`（詳細度 0,2,0・同値）が**後ろにあって勝つ**ため、
   ここでもう一度打ち消さないと SP + 低減の環境だけ 18 + 12 = 30px になる */
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .logo-track .logo-chip {
    margin-right: 0;
  }
}

@media (max-width: 560px) {
  /* 注目の求人カードは 1 列に（条件カードは 900px 以下のブロックで 1 列にしている） */
  .featured-job-grid,
  .site-footer-v3__cols {
    grid-template-columns: 1fr;
  }

  /* フッターの SP 表示（@container 非対応ブラウザ向けのフォールバック。
     本命は後方の @container site-footer (max-width: 560px) ブロック） */
  .site-footer-v3__content {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .site-footer-v3__brand {
    display: contents;
  }

  .site-footer-v3__sns {
    order: 1;
    margin: 0;
  }

  .site-footer-v3__bottom {
    order: 2;
    flex-direction: column;
    align-items: stretch;
    margin-top: 0;
  }

  /* © はブランド枠の解体（display: contents）後も最後に出す */
  .site-footer-v3__copy {
    order: 3;
    margin-top: 0;
  }

  .site-footer-v3__cta {
    justify-content: center;
  }

  /* 注目の企業特集カルーセルは 2 件/画面のまま小型化（矢印は 768px 以下で非表示・ドット送り） */
  .company-feature-card,
  .company-feature-card__logo-img {
    min-height: 0;
    height: 96px;
  }

  .company-feature-slide__desc {
    font-size: 0.72rem;
    line-height: 1.6;
    padding: 10px 12px 12px;
  }
}

/* 〜400px の狭い端末では、ヘッダーの各要素をさらに詰める。
   それでも 1 行に足りない幅（320px 前後）では、768px 以下の指定で画像のロゴが足りない分だけ縮む */
@media (max-width: 400px) {
  .home-header__inner {
    gap: 6px;
    padding: 8px 8px 8px 12px;
  }

  .home-header__logo {
    font-size: 1.05rem;
  }

  .home-header__logo-img {
    max-height: 26px;
    /* :has() に対応していないブラウザでは .home-header__brand が縮まない（flex-shrink: 0）ため、
       admin が横長ロゴ（variant 上限 360px 幅）を設定しても 1 行に収まるよう幅も抑える。
       対応しているブラウザでは、768px 以下の指定でロゴ枠の幅に合わせて縮む */
    max-width: 140px;
  }

  .home-header__btn {
    padding: 6px 10px;
    font-size: 0.68rem;
  }

  .home-header__menu-toggle {
    width: 36px;
    height: 36px;
  }
}

/* デザインの SP 版では背景イラスト（footer_image）は出さない（狭い幅では絵柄がほぼ
   マスクされて文字の背後のノイズにしかならないため）。コンテナクエリ非対応ブラウザ向けに
   viewport media でも同じ指定を置く */
@media (max-width: 768px) {
  .site-footer-v3__bg {
    display: none;
  }
}

@container site-footer (max-width: 768px) {
  .site-footer-v3__bg {
    display: none;
  }
}

/* フッターの折り返し（ビューポートでなく実効幅基準）。詳細度は上がらないため、
   同詳細度の基底ルール・viewport media すべてより後方に置く（前方に置くと、
   ビューポートだけ・実効幅だけが狭いケースで後方のルールに負ける）。既存の
   applicants / favorites / talents と同じく container-name で対象を明示する。
   @container 非対応ブラウザでは上方の viewport media がフォールバックとして効く。 */
@container site-footer (max-width: 900px) {
  .site-footer-v3__content {
    grid-template-columns: 1fr;
  }

  /* 1 カラム化に合わせて、ブランド枠の行スパン・CTA の列指定を解除する */
  .site-footer-v3__brand {
    grid-row: auto;
  }

  .site-footer-v3__bottom {
    grid-column: auto;
  }

  .site-footer-v3__cols {
    grid-template-columns: repeat(2, 1fr);
  }
}

@container site-footer (max-width: 560px) {
  .site-footer-v3__cols {
    grid-template-columns: 1fr;
  }

  /* デザインの SP 版はロゴ→ナビ→SNS→下段（企業CTA）の順。ブランド枠を外して order で並べ替える */
  .site-footer-v3__content {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .site-footer-v3__brand {
    display: contents;
  }

  .site-footer-v3__sns {
    order: 1;
    margin: 0;
  }

  /* 下段は縦積みにして、企業向け CTA ボタンを全幅・中央寄せで押しやすくする */
  .site-footer-v3__bottom {
    order: 2;
    flex-direction: column;
    align-items: stretch;
    margin-top: 0;
  }

  /* © はブランド枠の解体（display: contents）後も最後に出す */
  .site-footer-v3__copy {
    order: 3;
    margin-top: 0;
  }

  .site-footer-v3__cta {
    justify-content: center;
  }
}


/* --------------------------------------------------------------
   企業プロフィール（公開ページ /companies/:id）
   -------------------------------------------------------------- */

.company-profile__header {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 28px 32px;
  margin-bottom: 24px;
}

.company-profile__name {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--home-navy);
  margin-bottom: 10px;
}

.company-profile__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.company-profile__tag {
  display: inline-block;
  font-size: 0.8rem;
  padding: 3px 12px;
  border-radius: 999px;
  background: #f4f2fd;
  color: var(--home-violet);
}

.company-profile__website {
  margin-top: 12px;
  font-size: 0.9rem;
}

.company-profile__website a {
  color: var(--color-info);
  word-break: break-all;
}

.company-profile__website a:hover {
  text-decoration: underline;
}

.company-profile__section {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 28px 32px;
  margin-bottom: 24px;
}

.company-profile__description {
  font-size: 0.95rem;
  color: var(--color-text-primary);
}

.company-profile__empty {
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

/* 掲載中の求人カード（このページ専用の簡易カード） */
.company-profile .job-card__title {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.company-profile .job-card__title a {
  color: var(--home-navy);
}

.company-profile .job-card__title a:hover {
  color: var(--color-info);
}

.company-profile .job-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* --------------------------------------------------------------
   コラム（CMS 記事）一覧・詳細
   -------------------------------------------------------------- */

/* NOTE: 本文幅は .container 自体を 1120px（トップページと同幅）へ統一したため、
   コラム専用の幅上書きは不要になった */

.columns-header {
  padding: 32px 0 8px;
}

.columns-title {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--home-navy);
}

.columns-lead {
  margin-top: 8px;
  color: var(--color-text-secondary);
}

.column-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  padding: 24px 0;
}

.column-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.column-card:hover {
  box-shadow: 0 8px 24px rgba(45, 52, 54, 0.1);
  transform: translateY(-2px);
}

.column-card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.column-card-thumb {
  aspect-ratio: 16 / 9;
  /* サムネ未設定時のプレースホルダ地は v3 のブランドグラデーション */
  background: var(--home-grad);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.column-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.column-card-thumb-placeholder {
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.08em;
  opacity: 0.85;
}

.column-card-body {
  padding: 16px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* カードのメタ行（カテゴリバッジ左＋公開日右。デザイン準拠） */
.column-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.column-card-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
  background: #4f5ed7;
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
  /* カテゴリは20文字まで入力できるため、狭いカードでは日付に重ねず省略表示する */
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.column-card-date {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  /* バッジが長くても日付は潰さない */
  flex-shrink: 0;
  white-space: nowrap;
}

/* トップページのコラムはデザイン準拠で1行5枚のコンパクト表示（リード文は出さない）。
   6件以上は企業特集と同じカルーセル（横スクロール＋左右矢印）で送る */
.home-section--columns .column-grid--carousel {
  display: flex;
  gap: 16px;
  /* overflow-x: auto のスクロールコンテナは ink overflow（hover 時のカード影）を
     クリップするため、下側にも影のぶんの余白を確保する */
  padding: 12px 0 28px;
  overflow-x: auto;
  /* スクロールバーは矢印送りの UI に合わせて隠す（company-feature-track と同様） */
  scrollbar-width: none;
}

.home-section--columns .column-grid--carousel::-webkit-scrollbar {
  display: none;
}

/* 1 画面に 5 枚（gap 16px × 4 = 64px を差し引いて 5 等分） */
.home-section--columns .column-card {
  flex: 0 0 calc((100% - 64px) / 5);
}

/* トラックの上下 padding（12px / 28px）が非対称なぶん、矢印の中心をカード中心に合わせて上げる */
.home-section--columns .company-feature-carousel__arrow {
  top: calc(50% - 8px);
}

.home-section--columns .column-card-excerpt {
  display: none;
}

.home-section--columns .column-card-title {
  font-size: 0.86rem;
}

/* 狭い画面では 1 画面あたりの枚数を減らす（900px 以下は 2 枚。
   SP もデザインの SP 版準拠で 2 枚のまま） */
@media (max-width: 900px) {
  .home-section--columns .column-card {
    flex-basis: calc((100% - 16px) / 2);
  }
}

.column-card-title {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--home-navy);
}

.column-card-excerpt {
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.columns-pagination {
  display: flex;
  justify-content: center;
  padding: 16px 0 48px;
}

.columns-empty {
  padding: 48px 0;
  text-align: center;
  color: var(--color-text-secondary);
}

/* コラム詳細 */

/* 運営の「見え方確認」（?preview=1）バナー。下書き等を閲覧中であることを明示する */
.column-preview-banner {
  background: var(--color-accent);
  color: var(--color-text-primary);
  text-align: center;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 8px 16px;
}

/* バナー内の「管理画面で編集に戻る」リンク（新規作成フローの戻り導線） */
.column-preview-banner-link {
  color: var(--color-text-primary);
  text-decoration: underline;
  margin-left: 12px;
  white-space: nowrap;
}

/* 記事本文はトップページ幅に揃えた親コンテナ（.column-show-page .container = 1120px / 左右 24px）
   いっぱいに広げる。横パディングは親コンテナが持つのでここでは付けず、縦の余白だけ確保する
   （max-width:100% なので margin:0 auto の中央寄せは不要）。 */
.column-article {
  max-width: 100%;
  padding: 24px 0 64px;
}

.column-breadcrumb {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  padding: 8px 0 16px;
}

.column-breadcrumb a {
  color: var(--color-info);
  text-decoration: none;
}

.column-breadcrumb-current {
  color: var(--color-text-muted);
}

.column-article-header {
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 16px;
  margin-bottom: 24px;
}

.column-article-date {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.column-article-title {
  margin-top: 8px;
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1.4;
  color: var(--home-navy);
}

/* アイキャッチ（カバー画像）は大きすぎたため、記事幅の 40% に縮小して中央寄せする。
   狭い画面ではこれ以上縮めると小さくなりすぎるので全幅に戻す。 */
.column-article-cover {
  max-width: 40%;
  margin: 0 auto 28px;
  border-radius: 12px;
  overflow: hidden;
}

@media (max-width: 768px) {
  .column-article-cover {
    max-width: 100%;
  }
}

.column-article-cover img {
  width: 100%;
  height: auto;
  display: block;
}

/* 本文（Action Text の .trix-content）の表示調整 —
   コラムを読み物として成立させる本文タイポグラフィ。見出し h2（大）/ h3（小）の階層、
   段落、引用、リスト、そして画像＋キャプション・画像ギャラリー（会社の雰囲気を伝える
   ビジュアル）を整える。actiontext.css の `.trix-content * { margin:0; padding:0 }` を
   上書きするため、いずれもクラスを重ねて詳細度を確保している。 */
.column-article-body .trix-content {
  font-size: 1.05rem;
  line-height: 1.9;
  color: var(--color-text-primary);
}

/* 大見出し（H2）: セクションの区切り。下線でまとまりを明確にする。 */
.column-article-body .trix-content h2 {
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.5;
  margin: 56px 0 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--color-border);
}

/* 小見出し（H3）: セクション内の項目。左のアクセントバーで区別する。 */
.column-article-body .trix-content h3 {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.5;
  margin: 36px 0 14px;
  padding-left: 12px;
  border-left: 4px solid var(--color-primary);
}

/* 旧データ互換: かつて本文に <h1> を使っていた記事は大見出し（H2）相当で表示する。 */
.column-article-body .trix-content h1 {
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.5;
  margin: 56px 0 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--color-border);
}

/* 記事冒頭（カバー画像直後）の見出しは上マージンを詰める。 */
.column-article-body .trix-content > h1:first-child,
.column-article-body .trix-content > h2:first-child,
.column-article-body .trix-content > h3:first-child {
  margin-top: 0;
}

.column-article-body .trix-content p {
  margin: 0 0 1.5em;
}

.column-article-body .trix-content strong {
  font-weight: 700;
}

.column-article-body .trix-content ul,
.column-article-body .trix-content ol {
  margin: 0 0 1.5em 1.4em;
}

.column-article-body .trix-content li {
  margin: 0 0 0.4em 1em;
}

.column-article-body .trix-content a {
  color: var(--color-info);
  text-decoration: underline;
}

.column-article-body .trix-content blockquote {
  color: var(--color-text-secondary);
  background: var(--color-bg-soft);
  border-left: 4px solid var(--color-primary);
  border-radius: 0 8px 8px 0;
  margin: 0 0 1.5em;
  padding: 16px 20px;
}

.column-article-body .trix-content blockquote p:last-child {
  margin-bottom: 0;
}

/* 本文中の画像: 角丸・中央寄せで表示する。大きな写真はコンテナ幅まで収まり（max-width）、
   ロゴ等の小さい画像は原寸のまま拡大しない（width:100% だとアップスケールでボケるため使わない）。 */
.column-article-body .trix-content img {
  border-radius: 10px;
  max-width: 100%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* 単独で置いた画像（プレビュー添付）の上下スペース。 */
.column-article-body .trix-content .attachment--preview {
  margin: 8px auto 28px;
}

/* 画像キャプション: 画像の下に控えめな説明文を中央寄せで出す。 */
.column-article-body .trix-content .attachment__caption {
  margin-top: 10px;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--color-text-secondary);
  text-align: center;
}

/* 複数画像の横並びギャラリー（「社内の雰囲気」のような見せ方）。
   横並びの間隔は Trix 既定（アイテムの padding）に任せ、上下だけ余白を足す。 */
.column-article-body .trix-content .attachment-gallery {
  margin: 12px 0 28px;
}

.column-article-body .trix-content .attachment-gallery .attachment--preview {
  margin: 0;
}

.column-article-body .trix-content .attachment-gallery .attachment__caption {
  margin-top: 6px;
}

/* 狭い画面ではギャラリーを1列に落として画像を潰さない。
   枚数クラス付きルール（--2〜--6。actiontext.css 側で後から読み込まれる）に確実に勝つよう、
   枚数クラスも明示して詳細度を上げている。 */
@media (max-width: 600px) {
  .column-article-body .trix-content .attachment-gallery > action-text-attachment,
  .column-article-body .trix-content .attachment-gallery > .attachment,
  .column-article-body .trix-content .attachment-gallery.attachment-gallery--2 > action-text-attachment,
  .column-article-body .trix-content .attachment-gallery.attachment-gallery--2 > .attachment,
  .column-article-body .trix-content .attachment-gallery.attachment-gallery--3 > action-text-attachment,
  .column-article-body .trix-content .attachment-gallery.attachment-gallery--3 > .attachment,
  .column-article-body .trix-content .attachment-gallery.attachment-gallery--4 > action-text-attachment,
  .column-article-body .trix-content .attachment-gallery.attachment-gallery--4 > .attachment,
  .column-article-body .trix-content .attachment-gallery.attachment-gallery--5 > action-text-attachment,
  .column-article-body .trix-content .attachment-gallery.attachment-gallery--5 > .attachment,
  .column-article-body .trix-content .attachment-gallery.attachment-gallery--6 > action-text-attachment,
  .column-article-body .trix-content .attachment-gallery.attachment-gallery--6 > .attachment,
  .column-article-body .trix-content .attachment-gallery.attachment-gallery--7 > action-text-attachment,
  .column-article-body .trix-content .attachment-gallery.attachment-gallery--7 > .attachment,
  .column-article-body .trix-content .attachment-gallery.attachment-gallery--8 > action-text-attachment,
  .column-article-body .trix-content .attachment-gallery.attachment-gallery--8 > .attachment {
    flex-basis: 100%;
    max-width: 100%;
  }
}

/* 記事末尾の CTA ボタン（求人ページ等への誘導）。本文と一覧リンクの間に、目立つ大きめボタンで置く。 */
.column-article-cta {
  margin: 48px 0 8px;
  text-align: center;
}

.column-article-cta-button {
  max-width: 100%;
  padding: 16px 40px;
  font-size: 1.05rem;
  font-weight: 700;
  white-space: normal; /* 長い文言でも折り返して収める */
}

/* 「コラム一覧へ戻る」は記事末尾ボタン（CTA）と近すぎて一体に見えるため、上に十分な余白を取って
   はっきり下に離す。 */
.column-article-footer {
  margin-top: 72px;
  text-align: center;
}

/* ========== メールアドレス未確認バナー（画面上部） ========== */

/* プロフィール未完了バナー（黄）と同時に出ることがあるため、より強い警告色（赤）で区別する。 */
.email-confirmation-banner {
  background: #fef2f2;
  border-bottom: 1px solid #f3b0b0;
}

/* 左右の余白は併用している .container（PC 20px / SP 12px）に任せる。
   ここで padding のショートハンドを使うとその左右余白まで打ち消してしまい、
   SP で文字が画面端に張り付くため、上下だけを指定する。 */
.email-confirmation-banner__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 10px;
  padding-bottom: 10px;
  flex-wrap: wrap;
}

/* バナーの文章に入るメールアドレスは、ビューで .email-address の span に包んで折り返す
   （長いアドレスのはみ出し対策は .email-address に 1 つにまとめている） */
.email-confirmation-banner__text {
  font-size: 0.85rem;
  color: #9b1c1c;
  line-height: 1.6;
}

/* button_to が生成する form に付く（flex コンテナの直接の子は form のため） */
.email-confirmation-banner__action {
  flex-shrink: 0;
  margin: 0;
}

/* ========== プロフィール未完了バナー（画面上部） ========== */

.profile-completion-banner {
  background: #fff7e6;
  border-bottom: 1px solid #f0c36d;
}

/* 左右の余白は併用している .container に任せる（メール未確認バナーと同じ理由） */
.profile-completion-banner__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 10px;
  padding-bottom: 10px;
  flex-wrap: wrap;
}

.profile-completion-banner__text {
  font-size: 0.85rem;
  color: #7a5b00;
  line-height: 1.6;
}

.profile-completion-banner__action {
  flex-shrink: 0;
}

/* ========== プロフィール完成度メーター ========== */

/* サイドメニュー上部（--sidebar）はメニューと同じ白カード、
   「プロフィール入力状況」セクション内（--section）は枠なしの帯として使う */
.profile-meter--sidebar {
  background: #fff;
  border: 1.5px solid var(--color-border);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}

.profile-meter--section {
  margin-bottom: 20px;
}

.profile-meter__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

/* サイドバーは幅が狭く、100%（3 桁）になるとラベルと数値が 1 行に収まらないため縦に積む */
.profile-meter--sidebar .profile-meter__head {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  margin-bottom: 6px;
}

.profile-meter__label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-text-primary);
}

.profile-meter__value {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: #6a52e8; /* --home-violet より濃く、白地で 4.5:1 以上を確保した紫 */
}

.profile-meter__unit {
  font-size: 0.9rem;
  margin-left: 1px;
}

.profile-meter__track {
  height: 10px;
  border-radius: 999px;
  background-color: #ece9f8;
  overflow: hidden;
}

/* 伸び幅はビュー側から CSS 変数 --profile-meter-value（0〜100%）で受け取る。
   描画時に 0 から伸ばして「今どこまで埋まったか」を印象づける */
.profile-meter__bar {
  display: block;
  height: 100%;
  width: var(--profile-meter-value, 0%);
  border-radius: 999px;
  background: var(--home-grad);
  animation: profile-meter-fill 0.8s ease-out both;
  /* プロフィール編集画面では入力に合わせて値が変わる（profile_completion_controller）ため、
     伸縮を滑らかにする。初回描画のアニメーション（profile-meter-fill）は JS が外してから値を変える */
  transition: width 0.3s ease;
}

@keyframes profile-meter-fill {
  from {
    width: 0;
  }

  to {
    width: var(--profile-meter-value, 0%);
  }
}

/* 動きを減らす設定では最終状態のみ表示する（入力に合わせた伸縮も止める） */
@media (prefers-reduced-motion: reduce) {
  .profile-meter__bar {
    animation: none;
    transition: none;
  }
}

.profile-meter__note {
  margin-top: 8px;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--color-text-secondary);
}

/* 残り項目数はチェックリストの未入力（--todo）と同じトーンで目を引かせる */
.profile-meter__remaining {
  font-size: 0.95rem;
  color: #b45309;
}

.profile-meter__link {
  display: inline-block;
  margin-left: 4px;
  color: var(--color-info-hover);
  text-decoration: underline;
}

/* 100% 到達時は達成感が伝わるよう緑基調に切り替える */
.profile-meter--complete .profile-meter__value {
  color: #2d8a4e;
}

.profile-meter--complete .profile-meter__bar {
  background: linear-gradient(90deg, #52b788 0%, #2d8a4e 100%);
}

/* ========== マイページのプロフィール入力状況チェックリスト ========== */

/* 必須項目／推奨項目のグループ */
.profile-checklist-group + .profile-checklist-group {
  margin-top: 18px;
}

.profile-checklist-group__heading {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 8px;
}

.profile-checklist-group__count {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-secondary);
}

.profile-checklist {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px 16px;
  padding: 0;
  margin: 0;
}

.profile-checklist__item {
  font-size: 0.9rem;
  line-height: 1.6;
}

.profile-checklist__item--done {
  color: #2d8a4e;
}

.profile-checklist__item--todo {
  color: #b45309;
  font-weight: 600;
}

/* 項目名は、プロフィール編集画面では該当の入力欄へのリンクにする（色は項目の状態色を継承） */
.profile-checklist__link {
  color: inherit;
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}

.profile-checklist__link:hover {
  text-decoration-style: solid;
}

/* ========== プロフィール編集画面（マイページと同じ 2 カラム構成） ========== */

/* サイドメニューが長い（基本プロフィール配下の小見出しを含む）ため、画面より高くなったら
   サイドバー内でスクロールできるようにする（sticky のまま下端が見えなくなるのを防ぐ） */
.mypage-sidebar--scrollable {
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  scrollbar-width: thin;
}

/* 基本プロフィール配下の小見出し（fieldset へのジャンプ）。大項目より一段小さく・浅い色で */
.mypage-nav-item--sub {
  padding: 8px 16px 8px 30px;
  font-size: 0.82rem;
  color: #636e72;
}

/* 現在地の左アクセントバー（3px）の分だけ padding を詰めて文字位置を揃える（大項目と同じ考え方） */
.mypage-nav-item--sub.mypage-nav-item--active {
  padding-left: 27px;
}

@media (max-width: 768px) {
  /* スマホは 1 列縦積み（sticky 解除済み）なのでサイドバー内スクロールも解除する */
  .mypage-sidebar--scrollable {
    max-height: none;
    overflow: visible;
  }

  /* スマホでは小見出しまで出すとメニューだけで画面が埋まるため、大項目だけにする */
  .mypage-nav-sub {
    display: none;
  }
}

/* フォーム内の大項目（マイページのセクションに対応）。サイドメニュー・マイページの「編集」からの
   アンカー先になるため、飛んだときに見出しが画面上端に貼り付かないよう少し余白を取る */
.profile-edit-section,
.profile-edit-section .form-fieldset {
  scroll-margin-top: 16px;
}

/* fieldset が 1 つだけの大項目は legend の中に h2 を置く。見た目は legend と同じにする */
.form-fieldset-legend__title {
  display: inline;
  margin: 0;
  font: inherit;
  color: inherit;
}

/* 必須・推奨の項目が無いグループ（語学・外国籍の方・スキル・資格・ポートフォリオ）は既定で折りたたむ。
   入力する項目が多く見えて負担にならないようにする（オーナー要望 2026-09-16）。
   開閉は <details>/<summary> に任せる（閉じている間の非表示はブラウザが行うので、hidden 属性や
   クラスの display で隠さない。クラスの display は hidden 属性に勝ってしまう）。
   文字の大きさ・色は、置き換え前の legend・セクション見出しのまま（legend 側の指定を共有する）。 */
.form-collapse__summary,
.section-collapse__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.form-collapse__summary::-webkit-details-marker,
.section-collapse__summary::-webkit-details-marker {
  display: none;
}

/* 指で押せる高さにする。SP ではサイドメニューの小見出しが出ないため、ここが中を開く唯一の入口になる */
.form-collapse__summary {
  padding: 12px 8px;
  min-height: 44px;
}

/* セクションの見出しは、下線を summary 側に引く（h2 の幅で切れて、開閉の目印が線の外に浮かないように） */
.section-collapse__summary {
  margin: 8px 0 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid #e6e3f5;
}

.section-collapse__summary .profile-edit-section__title {
  flex: 1;
  margin: 0;
  padding: 0;
  border-bottom: none;
}

/* 開閉の目印。職種の選択ダイアログ（.jc-group__chevron）と同じ形。
   summary は fieldset の aria-labelledby の指し先なので、読み上げに混ざらないよう span（aria-hidden）に出す */
.form-collapse__chevron::after,
.section-collapse__chevron::after {
  content: "⌄";
  font-size: 14px;
  color: #636e72;
}

details[open] > .form-collapse__summary .form-collapse__chevron::after,
details[open] > .section-collapse__summary .section-collapse__chevron::after {
  content: "⌃";
}

/* 複数の fieldset をまとめる大項目（基本プロフィール／ポートフォリオ）の見出し。
   マイページのセクション見出しと同じトーン */
.profile-edit-section__title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--home-navy);
  margin: 8px 0 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid #e6e3f5;
}

/* ========== 履歴書OCRで変わった項目の強調（プロフィール編集画面） ========== */

/* OCR で値が書き換わった入力欄。淡い琥珀色の帯＋左のアクセントで「ここが変わった」と分かるようにする。
   帯の分だけ負のマージンで外へ広げ、入力欄の幅は他の欄と揃える */
.form-group--ocr-changed {
  background-color: #fff8e6;
  border-left: 3px solid #f59e0b;
  border-radius: 6px;
  padding: 10px 12px;
  margin: 0 -12px 20px -15px;
}

/* OCR が生成した学歴・職歴の行 */
.nested-fields--ocr-changed {
  border-color: #f59e0b;
  background-color: #fffaf0;
}

.nested-fields__ocr-note {
  margin: 0 0 12px;
  font-size: 0.8rem;
  color: #92400e;
}

/* 「履歴書から読み取り」バッジ。必須バッジ（.form-required）と同じ大きさで、琥珀色で区別する。
   文字色は帯（#fde68a）に対して 7:1 以上のコントラストを確保している */
.ocr-changed-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  color: #5b3a00;
  background-color: #fde68a;
  border: 1px solid #f59e0b;
  padding: 0 6px;
  border-radius: 3px;
  margin-left: 6px;
  vertical-align: middle;
}

/* OCR 直後の凡例（フォーム冒頭）。強調された欄と同じ琥珀色にして対応が分かるようにする */
.form-hint-block--ocr {
  background-color: #fff8e6;
  color: #5b3a00;
}

/* ========== 固定ページ（フッター配下: 利用規約・プライバシーポリシー・ワークスタイル等） ========== */

/* 白帯のタイトル＋全幅グラデーション罫線のページヘッダー（Figma の固定ページ共通デザイン） */
.static-page-header {
  background: #fff;
  padding-top: 34px;
}

.static-page-header__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--home-navy);
  margin: 0 0 22px;
}

.static-page-header--center .static-page-header__title {
  font-size: 1.75rem;
  text-align: center;
}

.static-page-header__rule {
  height: 3px;
  background: linear-gradient(90deg, #4b4deb 0%, #8b5cf6 55%, #eb518d 100%);
}

/* 固定ページ群の本文カラム。Figma（1440px カンプ）は中央 約860px のカラムで組まれているため、
   .container（1120px）のままだと本文が広がりすぎ、写真や CTA が本文から浮いて見える */
.static-page .page-main {
  max-width: 908px; /* 本文 860px ＋ .container の左右 padding 24px */
  /* コンサルタント紹介のような本文の短いページでフッターの下に空白が出ないよう、
     ビューポートからヘッダー(64px)＋ページヘッダー(91px)＋フッター(約433px)を引いた
     高さを最低確保する（本文が長いページには影響しない） */
  min-height: max(320px, calc(100vh - 588px));
}

/* --- 規約系の長文ドキュメント（利用規約・プライバシーポリシー） --- */

.static-doc {
  font-size: 0.95rem;
  line-height: 1.85;
  color: #333;
}

.static-doc h2 {
  font-size: 1.05rem;
  font-weight: 700;
  color: #1f1f2e;
  margin: 2.2em 0 0.6em;
}

.static-doc p {
  margin: 0 0 1em;
}

.static-doc ol {
  margin: 0 0 1em;
  padding-left: 1.6em;
}

.static-doc li {
  margin-bottom: 0.2em;
}

/* 規約・ポリシーの箇条書きのうち、番号を持たないもの（Cookie の説明など）。
   ol と字下げを揃え、行頭記号を黒丸にする。 */
.static-doc ul {
  margin: 0 0 1em;
  padding-left: 1.6em;
  list-style-type: disc;
}

/* 条項の中の入れ子（第8条の「（1）〜（4）」）。原文が全角括弧付きの番号なので、
   list-style では表現できず counter で組む。
   **セレクタに ol を含めること。** `.static-doc__sub-list` 単体だと詳細度 (0,1,0) で、
   上の `.static-doc ol` (0,1,1) に margin / padding-left を奪われる（後に書いても勝てない）。
   counter-reset と list-style は `.static-doc ol` が指定していないので効いてしまい、
   番号だけ正しく出るぶん描画確認では気付きにくい。 */
.static-doc ol.static-doc__sub-list {
  counter-reset: static-doc-sub;
  list-style: none;
  margin: 0.4em 0 0;
  padding-left: 1.2em;
}

.static-doc ol.static-doc__sub-list > li {
  counter-increment: static-doc-sub;
  position: relative;
  padding-left: 2.6em;
}

.static-doc ol.static-doc__sub-list > li::before {
  content: "（" counter(static-doc-sub) "）";
  position: absolute;
  left: 0;
}

.static-doc__date {
  text-align: right;
  margin-top: 3em;
}

/* --- 読み物ページ共通（ワークスタイル・キャリア形成支援・コンサルタント紹介） --- */

/* ページ冒頭のリード（ネイビーの大見出し＋本文） */
.static-lead {
  margin-bottom: 40px;
}

.static-lead__title {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.5;
  color: var(--home-navy);
  margin: 0 0 18px;
}

.static-lead__text {
  font-size: 0.95rem;
  line-height: 1.9;
  color: #333;
  margin: 0;
}

.static-section {
  margin-bottom: 44px;
}

.static-section__title {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--home-navy);
  margin: 0 0 16px;
}

.static-section__subtitle {
  font-size: 0.98rem;
  font-weight: 700;
  color: #1f1f2e;
  margin: 1.6em 0 0.2em;
}

.static-section p {
  font-size: 0.95rem;
  line-height: 1.9;
  color: #333;
  margin: 0 0 1em;
}

/* 薄紫の補足ボックス（講座ラインナップ等） */
.static-note-box {
  background: #f3f0fd;
  border-radius: 8px;
  padding: 18px 28px;
  margin: 16px 0 24px;
}

.static-note-box ul {
  margin: 0;
  padding-left: 1.4em;
}

.static-note-box li {
  font-size: 0.92rem;
  line-height: 1.9;
  color: var(--home-navy);
}

/* グラデーションのピル型ボタン（求人はこちら・送信する等。Figma の青→紫グラデ） */
.static-grad-btn {
  display: inline-block;
  min-width: 260px;
  padding: 13px 34px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(90deg, #4f63e8 0%, #8b5cf6 100%);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.2s;
}

.static-grad-btn:hover {
  opacity: 0.85;
  color: #fff;
  text-decoration: none;
}

.static-cta-row {
  text-align: center;
  margin-top: 44px;
}

/* --- ワークスタイル: 本文左＋薄紫の希望カード右の 2 カラム --- */

.work-style {
  margin-bottom: 48px;
}

.work-style__title {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--home-navy);
  margin: 0 0 10px;
}

.work-style__target {
  font-size: 0.95rem;
  font-weight: 700;
  color: #1f1f2e;
  margin: 0 0 14px;
}

.work-style__row {
  display: grid;
  grid-template-columns: 1fr 390px;
  gap: 40px;
  align-items: center;
}

.work-style__body {
  font-size: 0.95rem;
  line-height: 1.9;
  color: #333;
  margin: 0;
}

.work-style__card {
  background: #f3f0fd;
  border-radius: 16px;
  padding: 26px 24px;
  text-align: center;
}

.work-style__wishes {
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.8;
  color: var(--home-navy);
  margin: 0 0 16px;
}

@media (max-width: 900px) {
  .work-style__row {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* --- お問い合わせフォーム（左ラベル＋右入力のテーブル型。Figma のデザイン準拠） --- */

.contact-intro p {
  font-size: 0.95rem;
  line-height: 1.9;
  color: #333;
  margin: 0 0 1em;
}

.contact-intro__notes {
  font-size: 0.88rem;
}

.contact-form__table {
  border: 1px solid #e6e6ee;
  border-radius: 4px;
  overflow: hidden;
  margin-top: 28px;
}

.contact-form__row {
  display: grid;
  grid-template-columns: 260px 1fr;
}

.contact-form__row + .contact-form__row {
  border-top: 1px solid #e6e6ee;
}

.contact-form__label {
  background: #ececf1;
  font-size: 0.92rem;
  font-weight: 600;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 18px 16px;
}

.contact-form__field {
  background: #f8f8fa;
  padding: 14px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 6px;
}

.contact-form__input,
.contact-form__select,
.contact-form__textarea {
  font-size: 0.92rem;
  padding: 8px 12px;
  border: 1px solid #cfcfe0;
  border-radius: 3px;
  background: #f6f4fd;
}

.contact-form__input {
  width: min(320px, 100%);
}

/* 種別の最長の文言「取材・提携・採用・ビジネスに関するお問い合わせ」（約 340px）と、右の ∨ の余白（40px）が
   収まる幅にする（フッターの企業向けの導線はこの種別を選んだ状態で開くので、欠けると目に付く）。SP は欄の幅まで */
.contact-form__select {
  width: min(400px, 100%);
}

.contact-form__textarea {
  width: 100%;
  resize: vertical;
}

.contact-form__checkbox {
  width: 18px;
  height: 18px;
  accent-color: var(--home-navy);
}

.contact-form__privacy-note {
  font-size: 0.85rem;
  line-height: 1.7;
  color: #444;
  margin: 0;
}

@media (max-width: 700px) {
  .contact-form__row {
    grid-template-columns: 1fr;
  }

  .contact-form__label {
    justify-content: flex-start;
    text-align: left;
    padding: 10px 16px;
  }

  .contact-form__row + .contact-form__row {
    border-top: none;
  }

  .contact-form__label {
    border-top: 1px solid #e6e6ee;
  }
}

/* --- 注目の企業特集（/features）: 一覧カードと詳細 --- */

.feature-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  padding: 0;
  margin: 0 0 12px;
}

.feature-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid #d9d9ee;
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  transition: box-shadow 0.2s, transform 0.2s;
}

.feature-card:hover {
  box-shadow: 0 6px 18px rgba(34, 28, 80, 0.12);
  transform: translateY(-2px);
  text-decoration: none;
}

.feature-card__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 150px;
  padding: 18px;
}

.feature-card__logo img {
  max-width: 70%;
  max-height: 120px;
  object-fit: contain;
}

.feature-card__name {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--home-navy);
}

.feature-card__caption {
  background: #eef0fb;
  padding: 14px 18px;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--home-navy);
  margin-top: auto;
}

.feature-empty {
  text-align: center;
  color: #666;
  padding: 40px 0;
}

/* ピンク系のピル型ボタン（トップページへ戻る。Figma のピンク〜紫グラデ） */
.static-pink-btn {
  display: inline-block;
  min-width: 220px;
  padding: 12px 32px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(90deg, #b45ddb 0%, #e0559d 100%);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.2s;
}

.static-pink-btn:hover {
  opacity: 0.85;
  color: #fff;
  text-decoration: none;
}

/* --- 特集詳細（本文カラム幅は .static-page .page-main の 860px に従う） --- */

.feature-detail__logo {
  text-align: center;
  margin: 16px 0 40px;
}

.feature-detail__logo img {
  max-width: min(420px, 80%);
  max-height: 200px;
  object-fit: contain;
}

.feature-section {
  margin-bottom: 44px;
}

/* 見出し（左に水色の菱形デコ＋薄い下線。Figma の特集詳細の見出しデザイン） */
.feature-section__title {
  position: relative;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--home-navy);
  padding-left: 34px;
  padding-bottom: 10px;
  border-bottom: 1px solid #d5e2f1;
  margin: 0 0 20px;
}

.feature-section__title::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0;
  width: 18px;
  height: 18px;
  background: linear-gradient(135deg, #bcd7f2 0%, #7fa8dd 100%);
  transform: rotate(-8deg) skewX(-6deg);
}

.feature-section__body {
  font-size: 0.95rem;
  line-height: 1.9;
  color: #333;
}

.feature-photos {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  padding: 0;
  margin: 0;
}

.feature-photos img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 4px;
}

/* X / LINE シェア（ネイビーの丸アイコン） */
.feature-share {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 18px;
  padding: 0;
  margin: 36px 0 0;
}

.feature-share__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--home-navy-deep);
  color: #fff;
  transition: opacity 0.2s;
}

.feature-share__link:hover {
  opacity: 0.8;
}

.feature-share__link svg {
  width: 20px;
  height: 20px;
}

@media (max-width: 900px) {
  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
}

@media (max-width: 560px) {
  .feature-grid {
    grid-template-columns: 1fr;
  }

  .feature-photos {
    grid-template-columns: 1fr;
  }
}

/* 送信ボタン（input[type="submit"]）は先頭の UA リセット（background-image: none。
   属性セレクタで詳細度が高い）にグラデーションを消されるため、詳細度を上げて再指定する */
input[type="submit"].static-grad-btn {
  background-image: linear-gradient(90deg, #4f63e8 0%, #8b5cf6 100%);
}

/* 固定ページの写真行（キャリア形成支援の面談・研修写真。390x260 ×2 を中央寄せ） */
.static-photo-row {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 390px));
  gap: 20px;
  justify-content: center;
  padding: 0;
  margin: 32px 0 8px;
}

.static-photo-row img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

@media (max-width: 700px) {
  .static-photo-row {
    grid-template-columns: minmax(0, 390px);
  }
}

/* 準備中の控えめな案内（コンサルタント紹介の個別紹介など、コンテンツ確定待ちの箇所） */
.static-coming-soon {
  margin-top: 8px;
  font-size: 0.88rem;
  color: #777;
}

/* ===== 求人フォームの PORTERS 連携（企業・営業先の選択） ===== */
.porters-picker {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 12px 14px;
  background-color: #fafafa;
}

.porters-picker__selected {
  margin: 0 0 8px;
  font-size: 0.92rem;
}

.porters-picker__selected strong {
  font-weight: 700;
}

.porters-picker__clear {
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 0.82rem;
  color: #555;
  background: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
}

.porters-picker__search {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

/* display: flex が UA の [hidden] { display: none } より優先されてしまうため明示する
   （企業を選んだあと検索欄を畳む） */
.porters-picker__search[hidden] {
  display: none;
}

.porters-picker__search .form-control {
  flex: 1 1 auto;
}

.porters-picker__list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  background-color: #fff;
}

.porters-picker__list li + li {
  border-top: 1px solid #f0f0f0;
}

.porters-picker__option {
  display: block;
  width: 100%;
  padding: 8px 12px;
  text-align: left;
  font-size: 0.92rem;
  background: none;
  border: none;
  cursor: pointer;
}

.porters-picker__option:hover {
  background-color: #f5f7ff;
}

.porters-picker__message {
  margin: 6px 0 0;
  font-size: 0.86rem;
  color: #666;
}

.porters-picker__message--error {
  color: #b73838;
}

.porters-picker__recruiter {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed #ddd;
}

.company-jobs__notice {
  margin-bottom: 16px;
  padding: 12px 16px;
  background-color: #fff8e6;
  border: 1px solid #f0d9a0;
  border-radius: 8px;
  color: #7a5a10;
  font-size: 0.92rem;
}

.company-jobs__notice p {
  margin: 0;
}

/* アカウント管理: PORTERS ユーザーID 未設定（求人を作成できない状態）の注意表示 */
.member-porters-id--missing {
  color: #b73838;
  font-size: 0.88rem;
}