/* Frontier Talent アプリの見た目。トップページ（frontier-talent/site/index.html）のトークンと部品に合わせる。 */

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

:root {
  --ink:        #1E3A8A;
  --ink-deep:   #14225C;
  --ink-light:  #2C50B0;
  --ink-pale:   #E8EEFB;
  --black:      #0A0A0A;
  --body:       #1A1A1A;
  --muted:      #6B7280;
  --mutedlight: #9CA3AF;
  --rule:       #E5E7EB;
  --rule-soft:  #F0F0F0;
  --white:      #FFFFFF;
  --off:        #F7F7F5;
  --ok:         #166534;
  --ok-pale:    #E9F5EC;
  --warn:       #92400E;
  --warn-pale:  #FDF3E2;
  --danger:     #9F1239;
  --danger-pale:#FCEBEF;

  --serif-en:  'Playfair Display', Georgia, serif;
  --serif-jp:  'Noto Serif JP', 'Hiragino Mincho ProN', '游明朝', serif;
  --sans-en:   'Inter', -apple-system, sans-serif;
  --sans-jp:   'Noto Sans JP', 'Hiragino Sans', sans-serif;

  --gutter: 40px;
  --max:    1080px;
  --reading: 720px;
  --form:   640px;
  --header-h: 68px;
}

html { scroll-padding-top: 110px;
  -webkit-text-size-adjust: 100%;
  color-scheme: light only;
  background: var(--white);
}

body {
  background: var(--white);
  color: var(--body);
  font-family: var(--sans-jp);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.8;
  font-feature-settings: "palt";
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--ink-deep); }
img { max-width: 100%; display: block; }
::selection { background: var(--ink-pale); color: var(--ink-deep); }

.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: var(--form); margin: 0 auto; }
.reading { max-width: var(--reading); margin: 0 auto; }
main { flex: 1; padding-top: var(--header-h); }

/* ===== ヘッダー ===== */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: var(--header-h);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--rule);
}
.site-header .row { height: 100%; display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.brand { font-family: var(--serif-en); font-weight: 400; font-size: 22px; letter-spacing: -0.005em; color: var(--black); line-height: 1; white-space: nowrap; }
.brand:hover { color: var(--ink); }
.brand small { font-family: var(--sans-jp); font-size: 11px; color: var(--muted); margin-left: 10px; letter-spacing: 0.06em; }
.nav { display: flex; gap: 28px; align-items: center; }
.nav a, .nav button.linklike {
  font-family: var(--sans-jp); font-size: 13px; color: var(--body); letter-spacing: 0.02em;
  position: relative; padding-bottom: 2px; background: none; border: 0; cursor: pointer;
}
.nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform 280ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.nav a:hover, .nav a.current { color: var(--ink); }
.nav a:hover::after, .nav a.current::after { transform: scaleX(1); }
.nav .count { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 9px; background: var(--ink); color: var(--white); font-size: 11px; line-height: 18px; text-align: center; }
.nav form { display: inline; }
.nav a, .nav button.linklike { white-space: nowrap; }
/* 運営のようにメニューが多いときは間を詰め、横に並びきらない幅ではスマホと同じ「メニュー」にする（2026-10-29） */
.dense .nav { gap: 18px; }
/* 運営のメニューは項目が多く、1366px 未満では1行に収まらずログアウトが切れていた（2026-11-09 点検） */
@media (min-width: 861px) and (max-width: 1365px) {
  .dense .menu-toggle { display: inline-block; background: none; border: 1px solid var(--rule); padding: 6px 12px; font-size: 13px; color: var(--body); cursor: pointer; }
  .dense .nav { display: none; position: absolute; top: var(--header-h); left: 0; right: 0; background: var(--white); border-bottom: 1px solid var(--rule); flex-direction: column; align-items: stretch; gap: 0; padding: 8px 40px 16px; box-shadow: 0 12px 24px rgba(0,0,0,0.06); }
  .dense .nav.open { display: flex; }
  .dense .nav a, .dense .nav button.linklike { padding: 10px 4px; border-bottom: 1px solid var(--rule-soft); font-size: 14px; text-align: left; }
  .dense .nav a::after { display: none; }
}
.menu-toggle { display: none; }

/* ===== ページの頭 ===== */
.page-head { padding: 56px 0 32px; position: relative; overflow: hidden; }
.page-head::before {
  content: ''; position: absolute; top: -260px; left: 50%; transform: translateX(-50%);
  width: 1400px; height: 600px;
  background: radial-gradient(ellipse, #DCE4F7 0%, #ECF0FB 35%, transparent 70%);
  opacity: 0.55; pointer-events: none; z-index: 0;
}
.page-head > .container { position: relative; z-index: 1; }
.page-index { font-family: var(--serif-en); font-style: italic; font-size: 13px; letter-spacing: 0.06em; color: var(--ink); margin-bottom: 8px; display: inline-block; }
.page-title { font-family: var(--serif-jp); font-weight: 500; font-size: clamp(24px, 3.2vw, 32px); letter-spacing: 0.02em; color: var(--black); line-height: 1.45; }
.page-sub { color: var(--muted); font-size: 14px; margin-top: 8px; }
.page-actions { margin-top: 16px; display: flex; gap: 12px; flex-wrap: wrap; }
.page-body { padding: 8px 0 96px; }

/* ===== 見出しと区切り ===== */
.section { margin-top: 40px; }
.section:first-child { margin-top: 0; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.section-head h2 { font-family: var(--serif-jp); font-weight: 500; font-size: 19px; color: var(--ink-deep); letter-spacing: 0.02em; }
/* 節の見出しは薄い青の帯と左の青の線にし、節の区切りを分かりやすくする。帯の下に線を引かないので、続く表や一覧の線と二重にならない（2026-11-09 岩崎） */
.section-head, .form-section-title { background: var(--ink-pale); border-left: 4px solid var(--ink); padding: 10px 14px; }
.section-head .more { font-size: 13px; }
h3.sub { font-family: var(--serif-jp); font-weight: 500; font-size: 16px; color: var(--black); margin: 24px 0 10px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.tiny { font-size: 12px; }
.nowrap { white-space: nowrap; }
.pre { white-space: pre-wrap; word-break: break-word; }
.right { text-align: right; }
.center { text-align: center; }
.mt { margin-top: 16px; }
.mt-l { margin-top: 32px; }
.stack > * + * { margin-top: 12px; }

/* ===== 知らせ ===== */
.flash-wrap { padding-top: 20px; }
.flash, .notice { padding: 14px 18px; border-left: 3px solid var(--ink); background: var(--ink-pale); color: var(--ink-deep); font-size: 14px; margin-bottom: 24px; }
/* 案内（色の指定の無い知らせ）は、節の見出しの青い帯と見分けられるよう、白地に青の枠にする（2026-11-09 岩崎「見出しでない告知みたいなのは別のデザインにして」） */
.flash:not(.error):not(.warn):not(.ok), .notice:not(.error):not(.warn):not(.ok) { border: 1px solid var(--ink-light); border-radius: 6px; background: var(--white); color: var(--body); }
.flash.error, .notice.error { border-left-color: var(--danger); background: var(--danger-pale); color: var(--danger); }
.notice.warn { border-left-color: var(--warn); background: var(--warn-pale); color: var(--warn); }
.notice.ok { border-left-color: var(--ok); background: var(--ok-pale); color: var(--ok); }
.notice p + p { margin-top: 6px; }
.notice .actions { margin-top: 10px; display: flex; gap: 10px; flex-wrap: wrap; }

/* ===== カードと一覧 ===== */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.card { border: 1px solid var(--rule); background: var(--white); padding: 20px 22px; }
.card.link { display: block; color: inherit; transition: border-color 200ms ease; }
.card.link:hover { border-color: var(--ink); }
.card h3 { font-family: var(--serif-jp); font-weight: 500; font-size: 16px; color: var(--black); line-height: 1.6; }
.card .meta { font-size: 12px; color: var(--muted); margin-top: 4px; }
.card p { font-size: 14px; margin-top: 8px; }
/* 求人のカード（AIの案内、検索、保存）。項目は表のように並べ、理由は3行で切り、下に詳細のボタンを置く（2026-10-29 岩崎） */
.job-cards { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
.job-card { display: flex; flex-direction: column; }
.job-card h3 a { color: inherit; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.job-card h3 a:hover { color: var(--ink); }
.job-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 12px; margin-top: 14px; font-size: 13px; }
.job-facts dt { color: var(--muted); }
.job-facts.wide { grid-template-columns: max-content minmax(0, 1fr); }
.job-card.unread { border-left: 3px solid var(--ink); }
.job-facts dd { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.job-reason { margin-top: 14px; padding: 10px 12px; background: var(--off); font-size: 13px; }
.job-reason span { display: block; font-size: 11px; color: var(--muted); letter-spacing: 0.04em; }
.job-reason .reason-list { margin-top: 4px; font-size: 13px; line-height: 1.7; }
/* 推薦の理由の箇条（2026-11-09 岩崎「箇条書きにしたい」）。全文を出し、行頭をそろえる */
.reason-list ul { margin: 4px 0 0; padding-left: 1.2em; list-style: disc; }
.reason-list li { margin: 2px 0; line-height: 1.7; }
.job-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 16px; }
.stat { border: 1px solid var(--rule); padding: 16px 18px; }
.stat .label { font-size: 12px; color: var(--muted); letter-spacing: 0.06em; }
.stat .value { font-family: var(--serif-en); font-size: 28px; color: var(--black); line-height: 1.3; }
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }

.list { border-top: 1px solid var(--rule); }
.list-item { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.list-item .main { flex: 1; min-width: 0; }
.list-item .title { font-weight: 500; color: var(--black); }
.list-item a.title:hover { color: var(--ink); }
.list-item .meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.list-item .side { flex-shrink: 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.list-item.unread .title::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); margin-right: 8px; vertical-align: middle; }

.empty { padding: 28px; border: 1px dashed var(--rule); color: var(--muted); font-size: 14px; text-align: center; }

/* ===== 表 ===== */
.table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.table { width: 100%; border-collapse: collapse; font-size: 13px; }
table.table th { text-align: left; font-weight: 500; color: var(--muted); font-size: 12px; letter-spacing: 0.04em; padding: 10px 12px; border-bottom: 1px solid var(--rule); white-space: nowrap; background: var(--off); }
table.table td { padding: 10px 12px; border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
table.table tr:hover td { background: #FAFBFE; }
table.table td.num, table.table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.dl-table { display: grid; grid-template-columns: 200px 1fr; margin: 0 0 8px; }
.dl-table dt, .dl-table dd { padding: 12px 0; border-top: 1px solid var(--rule); }
.dl-table dt { font-size: 12px; letter-spacing: 0.08em; color: var(--muted); font-weight: 500; padding-right: 20px; }
.dl-table dd { font-size: 14px; line-height: 1.8; color: var(--body); white-space: pre-wrap; word-break: break-word; }
.dl-table dt:last-of-type, .dl-table dd:last-of-type { border-bottom: 1px solid var(--rule); }

/* ===== 印 ===== */
.badge { display: inline-block; font-size: 11px; letter-spacing: 0.04em; padding: 2px 8px; border: 1px solid var(--rule); color: var(--muted); background: var(--white); white-space: nowrap; line-height: 1.6; }
.badge.ink { border-color: var(--ink); color: var(--ink); background: var(--ink-pale); }
.badge.ok { border-color: #B7DCC2; color: var(--ok); background: var(--ok-pale); }
.badge.warn { border-color: #F2D29B; color: var(--warn); background: var(--warn-pale); }
.badge.danger { border-color: #F4B9C6; color: var(--danger); background: var(--danger-pale); }

/* ===== フォーム ===== */
.form { display: grid; gap: 24px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 28px; }
.form-grid .full { grid-column: 1 / -1; }
.form-grid > .work-group { display: contents; }
.form-grid > .work-group[hidden] { display: none; }
.field { display: grid; gap: 6px; align-content: start; }
.field > label, .field > .label { font-size: 12px; letter-spacing: 0.08em; color: var(--muted); font-weight: 500; }
.field .required { color: var(--ink); margin-left: 6px; font-size: 12px; }
.field input[type="text"], .field input[type="email"], .field input[type="url"], .field input[type="tel"],
.field input[type="number"], .field input[type="date"], .field input[type="month"], .field input[type="datetime-local"],
.field input[type="search"], .field textarea, .field select {
  font-family: var(--sans-jp); font-size: 15px; color: var(--body);
  background: transparent; border: none; border-bottom: 1px solid var(--rule);
  padding: 10px 0; width: 100%; outline: none; border-radius: 0;
  -webkit-appearance: none; appearance: none; transition: border-bottom-color 200ms ease;
}
.field select { background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 12px) 55%, calc(100% - 7px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 24px; }
.field input:focus, .field textarea:focus, .field select:focus { border-bottom-color: var(--ink); }
.field textarea { resize: vertical; min-height: 110px; line-height: 1.7; }
.field input[type="file"] { font-size: 14px; padding: 8px 0; }
/* ファイルの選択のボタンを、他のボタンと同じ見た目にする（2026-11-02 スマホの点検） */
input[type="file"]::file-selector-button { font: inherit; font-size: 13px; color: var(--ink); background: var(--white); border: 1px solid var(--ink); padding: 8px 14px; margin-right: 10px; cursor: pointer; }
.field-note { font-size: 12px; color: var(--mutedlight); line-height: 1.6; }
.field-error { font-size: 12px; color: var(--danger); }
/* 入力の誤り（2026-11-04 石さんのFB「何が間違っているかを教えて欲しい」） */
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--danger); background: var(--danger-pale); }
.error-summary { border: 1px solid var(--danger); background: var(--danger-pale); color: var(--danger); padding: 14px 18px; margin: 0 0 28px; font-size: 14px; }
.error-summary-title { font-weight: 600; margin: 0 0 6px; }
.error-summary ul { margin: 0; padding-left: 1.2em; }
.error-summary a { color: var(--danger); text-decoration: underline; }
/* プロフィールの区切り（基本情報・経歴・スキル・希望条件。2026-11-04 石さんのFB） */
.form-section { margin: 0 0 40px; }
.form-section-title { font-family: var(--serif-jp); font-weight: 500; font-size: 18px; color: var(--ink-deep); margin: 0 0 20px; }
.checks { display: flex; flex-wrap: wrap; gap: 8px 20px; padding-top: 4px; }
.checks label, .check-row label { font-size: 14px; color: var(--body); letter-spacing: 0.01em; display: inline-flex; gap: 8px; align-items: flex-start; cursor: pointer; }
.checks input, .check-row input { width: 16px; height: 16px; accent-color: var(--ink); margin-top: 4px; flex-shrink: 0; }
.check-row { display: flex; gap: 10px; align-items: flex-start; }
/* スマホでは、チェックボックスと選択の丸を20px角以上にして押しやすくする（2026-11-07 点検 K10） */
@media (max-width: 860px) {
  .checks input, .check-row input { width: 20px; height: 20px; margin-top: 2px; }
  input[type="checkbox"], input[type="radio"] { min-width: 20px; min-height: 20px; }
}
.form-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.form-actions.center { justify-content: center; }
fieldset { border: 1px solid var(--rule); padding: 18px 20px 20px; }
fieldset legend { padding: 0 8px; font-size: 13px; color: var(--muted); }

/* ===== ボタン ===== */
.btn {
  display: inline-block; font-family: var(--sans-jp); font-size: 14px; font-weight: 500; letter-spacing: 0.08em;
  color: var(--white); background: var(--ink); padding: 14px 36px; border: 1px solid var(--ink); border-radius: 0;
  cursor: pointer; transition: background 260ms ease, color 260ms ease; text-align: center; line-height: 1.5;
}
.btn:hover { background: var(--ink-deep); border-color: var(--ink-deep); color: var(--white); }
.btn.arrow::after { content: '→'; margin-left: 12px; display: inline-block; transition: transform 260ms ease; }
.btn.arrow:hover::after { transform: translateX(4px); }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--white); }
.btn-danger { background: transparent; color: var(--danger); border: 1px solid var(--danger); }
.btn-danger:hover { background: var(--danger); color: var(--white); border-color: var(--danger); }
.btn-sm { padding: 7px 16px; font-size: 13px; letter-spacing: 0.04em; }
.btn-block { display: block; width: 100%; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.inline-form { display: inline; }
.linklike { background: none; border: 0; padding: 0; color: var(--ink); cursor: pointer; font: inherit; }
.linklike:hover { color: var(--ink-deep); text-decoration: underline; }

/* ===== ログインの選択肢 ===== */
.auth-box { max-width: 460px; margin: 0 auto; }
/* 年収などの幅の入力（下限〜上限を1行に並べる。2026-11-02） */
.range-row { display: flex; align-items: center; gap: 10px; }
.range-row input { flex: 1; min-width: 0; }
.range-sep { color: var(--muted); flex: none; }
/* トップ兼ログイン（2026-11-02 A案: 左に紺の面、右にログイン。スマホは紺の面を上の帯にする） */
.auth-split { padding: 56px 0 96px; position: relative; overflow: hidden; }
.auth-split::before { content: ''; position: absolute; top: -260px; left: 50%; transform: translateX(-50%); width: 1400px; height: 600px; background: radial-gradient(ellipse, #DCE4F7 0%, #ECF0FB 35%, transparent 70%); opacity: 0.55; pointer-events: none; }
.auth-grid { position: relative; display: grid; grid-template-columns: 5fr 6fr; max-width: 980px; width: calc(100% - var(--gutter) * 2); margin: 0 auto; background: var(--white); border: 1px solid var(--rule); box-shadow: 0 16px 48px rgba(20, 34, 92, 0.08); }
.auth-brand { background: linear-gradient(160deg, var(--ink-deep) 0%, var(--ink) 100%); color: var(--white); padding: 56px 48px; display: flex; flex-direction: column; }
.auth-brand-name { font-family: var(--serif-en); font-size: 34px; letter-spacing: 0.01em; line-height: 1.2; }
.auth-brand-sub { color: rgba(255, 255, 255, 0.78); font-size: 13px; margin-top: 12px; line-height: 1.8; }
.auth-brand-for { margin-top: 40px; font-size: 12px; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.6); }
.auth-points { list-style: none; counter-reset: pt; margin: 16px 0 0; padding: 0; display: grid; gap: 20px; }
.auth-points li { counter-increment: pt; position: relative; padding-left: 34px; font-size: 14px; line-height: 1.85; }
.auth-points li::before { content: counter(pt, lower-roman) '.'; position: absolute; left: 0; top: 0; font-family: var(--serif-en); font-style: italic; color: rgba(255, 255, 255, 0.6); }
.auth-brand-note { margin-top: 24px; font-size: 13px; color: rgba(255, 255, 255, 0.72); }
.auth-mode { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--rule); margin: 0 0 28px; }
.auth-mode a { text-align: center; padding: 10px 0; font-size: 14px; color: var(--muted); }
.auth-mode a + a { border-left: 1px solid var(--rule); }
.auth-mode a.current { background: var(--ink); color: var(--white); }
.auth-mode a:not(.current):hover { color: var(--ink); }
.auth-brand-foot { margin-top: auto; padding-top: 48px; font-size: 13px; }
.auth-brand-foot a { color: var(--white); border-bottom: 1px solid rgba(255, 255, 255, 0.5); }
.auth-brand-foot a::after { content: ' →'; }
.auth-brand-foot a:hover { border-bottom-color: var(--white); }
.auth-panel { padding: 48px 48px 40px; }
.auth-site-link { display: none; }
/* スマホの候補者の新規登録の画面だけに出す、何の登録かの1行（2026-11-10 点検 文言14。PCは左の訴求の面に同じ内容がある） */
.auth-lead-mobile { display: none; }
.auth-title { font-family: var(--serif-jp); font-weight: 500; font-size: 24px; color: var(--black); margin: 0 0 20px; }
/* 画面には出さず、読み上げと見出しの一覧にだけ出す（新規登録とログインの画面の h1。2026-11-07 点検 K10） */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 860px) {
  .auth-split { padding: 0 0 72px; }
  .auth-split::before { display: none; }
  .auth-grid { grid-template-columns: 1fr; width: 100%; border: 0; box-shadow: none; }
  /* スマホでは訴求の面を出さず、最初からログイン・登録の画面にする（2026-11-04 岩崎） */
  .auth-brand { display: none; }
  .auth-panel { padding: 28px var(--gutter) 0; }
  .auth-site-link { display: block; margin: 28px 0 0; text-align: center; font-size: 14px; }
  .auth-site-link a { display: inline-block; padding: 10px 4px; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
  .auth-site-link a::after { content: ' →'; }
  .auth-lead-mobile { display: block; margin: 0 0 20px; font-size: 14px; line-height: 1.75; color: var(--body); }
}
.oauth { display: grid; gap: 10px; }
.oauth a, .oauth button { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 16px; border: 1px solid var(--rule); color: var(--body); background: var(--white); font-size: 14px; cursor: pointer; transition: border-color 200ms ease; }
.oauth a:hover, .oauth button:hover { border-color: var(--ink); color: var(--ink); }
.or { display: flex; align-items: center; gap: 14px; color: var(--mutedlight); font-size: 12px; margin: 24px 0; }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--rule); }
.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--rule); margin-bottom: 24px; }
.tabs a { padding: 10px 18px; font-size: 14px; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a.current { color: var(--ink); border-bottom-color: var(--ink); }
.tabs { overflow-x: auto; }
.tabs a { white-space: nowrap; }
.tabs a .count { margin-left: 6px; font-size: 12px; color: var(--mutedlight); font-variant-numeric: tabular-nums; }
.filterbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; margin: 24px 0; }
.tabs + .filterbar { margin-top: -8px; }
/* 入力欄の既定の幅はブラウザで違う。欄が見出しの枠より広いと右の欄に重なるため、枠の幅を超えないようにする（2026-10-29） */
.filterbar label { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; min-width: 0; }
.filterbar label span { font-size: 12px; color: var(--muted); }
.filterbar select { font: inherit; font-size: 14px; color: var(--body); background: var(--white); border: 1px solid var(--rule); padding: 7px 10px; max-width: 100%; }
.filterbar select:focus { outline: none; border-color: var(--ink); }
.filterbar input { font: inherit; font-size: 14px; color: var(--body); background: var(--white); border: 1px solid var(--rule); padding: 7px 10px; max-width: 100%; }
.filterbar input[type=number] { width: 9em; }
.filterbar input:focus { outline: none; border-color: var(--ink); }
.filterbar label.grow { flex: 1 1 220px; }
.filterbar label.grow input { width: 100%; }
.filterbar .btn { align-self: flex-end; }

/* ===== 文章（規約など） ===== */
.prose { font-family: var(--serif-jp); font-size: 15px; line-height: 2; color: var(--body); letter-spacing: 0.02em; }
.prose p { margin-bottom: 1.2em; }
.prose h1 { font-size: 24px; font-weight: 500; color: var(--black); margin-bottom: 24px; line-height: 1.5; }
.prose h2 { font-weight: 500; font-size: 19px; color: var(--black); margin: 48px 0 18px; padding-bottom: 10px; border-bottom: 1px solid var(--rule); line-height: 1.5; }
.prose h3 { font-weight: 500; font-size: 16px; color: var(--black); margin: 28px 0 10px; }
.prose ul, .prose ol { margin: 0.8em 0 1.2em; padding-left: 1.4em; }
.prose li { margin-bottom: 0.4em; }
.prose table { border-collapse: collapse; width: 100%; margin: 1em 0 1.5em; font-family: var(--sans-jp); font-size: 14px; }
.prose th, .prose td { border: 1px solid var(--rule); padding: 8px 12px; text-align: left; vertical-align: top; }
.prose th { background: var(--off); font-weight: 500; }
.prose a { border-bottom: 1px solid var(--ink-pale); }
.prose strong { font-weight: 600; color: var(--black); }
.prose blockquote { border-left: 3px solid var(--rule); padding-left: 16px; color: var(--muted); }

/* ===== チャット（企業と候補者） ===== */
.chat { border: 1px solid var(--rule); display: flex; flex-direction: column; max-height: 640px; }
.chat-log { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 12px; background: var(--off); min-height: 200px; }
.msg { max-width: 82%; padding: 10px 14px; background: var(--white); border: 1px solid var(--rule); font-size: 14px; line-height: 1.7; white-space: pre-wrap; word-break: break-word; }
.msg.mine { align-self: flex-end; background: var(--ink-pale); border-color: #CBD7F3; }
.msg.system, .msg.ai { align-self: center; max-width: 92%; background: var(--white); border-style: dashed; color: var(--muted); font-size: 13px; }
.msg .who { font-size: 12px; color: var(--muted); margin-bottom: 4px; white-space: normal; }
.msg .files { margin-top: 6px; font-size: 13px; }
.chat-form { border-top: 1px solid var(--rule); padding: 12px; display: grid; gap: 8px; background: var(--white); }
.chat-form textarea { width: 100%; min-height: 64px; border: 1px solid var(--rule); padding: 10px; font: inherit; font-size: 14px; resize: vertical; outline: none; }
.chat-form textarea:focus { border-color: var(--ink); }
.chat-form .row { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; }

/* ===== AI のアシスタント（使わなくてもよい。横に置く） ===== */
.assist-dock { position: fixed; right: 24px; bottom: 24px; z-index: 60; }
.assist-open {
  display: block;
  background: var(--ink); color: var(--white); border: 0; padding: 14px 20px; font-size: 14px; letter-spacing: 0.04em;
  cursor: pointer; box-shadow: 0 8px 24px rgba(20, 34, 92, 0.22);
}
.assist-open:hover { background: var(--ink-deep); }
/* ボタンの右上の「?」と、AIアシスタントにできることの吹き出し（2026-11-04 岩崎） */
.assist-help {
  position: absolute; top: -9px; right: -9px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--white); color: var(--ink); border: 1px solid var(--ink); font-size: 12px; font-weight: 700; line-height: 18px;
  text-align: center; cursor: help; box-shadow: 0 2px 6px rgba(20, 34, 92, 0.18); user-select: none;
}
.assist-help:hover, .assist-help:focus { background: var(--ink); color: var(--white); outline: none; }
.assist-tip {
  position: absolute; right: 0; bottom: calc(100% + 14px); width: 300px; max-width: calc(100vw - 32px);
  background: var(--white); color: var(--black); border: 1px solid var(--rule); box-shadow: 0 12px 32px rgba(20, 34, 92, 0.18);
  padding: 14px 16px; font-size: 13px; line-height: 1.7; visibility: hidden; opacity: 0; transition: opacity 150ms ease; pointer-events: none;
}
.assist-tip strong { display: block; font-size: 14px; margin-bottom: 6px; color: var(--ink); }
.assist-tip ul { margin: 0 0 8px 1.2em; padding: 0; }
.assist-tip p { margin: 0; font-size: 12px; color: var(--muted); }
.assist-help:hover + .assist-tip, .assist-help:focus + .assist-tip { visibility: visible; opacity: 1; }
.assist-open .short { display: none; }
.assist {
  position: fixed; right: 24px; bottom: 24px; z-index: 70; width: 400px; max-width: calc(100vw - 32px);
  height: min(640px, calc(100vh - 120px)); background: var(--white); border: 1px solid var(--rule);
  box-shadow: 0 16px 48px rgba(20, 34, 92, 0.18); display: none; flex-direction: column;
}
.assist.open { display: flex; }
.assist-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--rule); }
.assist-head strong { font-family: var(--serif-jp); font-weight: 500; font-size: 15px; color: var(--black); }
.assist-head .note { font-size: 11px; color: var(--muted); }
.assist-close { background: none; border: 0; font-size: 22px; line-height: 1; color: var(--muted); cursor: pointer; padding: 4px 8px; }
.assist-log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: var(--off); }
.assist-log .msg { max-width: 90%; }
.assist-log .msg.ai { align-self: flex-start; border-style: solid; color: var(--body); font-size: 14px; }
.assist-log .tool { align-self: flex-start; font-size: 12px; color: var(--muted); }
.assist-form { border-top: 1px solid var(--rule); padding: 10px; display: flex; gap: 8px; align-items: flex-end; }
.assist-form textarea { flex: 1; min-height: 44px; max-height: 160px; border: 1px solid var(--rule); padding: 10px; font: inherit; font-size: 14px; resize: none; outline: none; }
.assist-form textarea:focus { border-color: var(--ink); }
.assist-form button { flex-shrink: 0; }
.assist-limit { font-size: 11px; color: var(--muted); padding: 0 12px 8px; }
/* アシスタントの書き換えの提案（変更前と変更後、反映する・取り消すのボタン。2026-11-01） */
.assist-log .proposal { align-self: stretch; background: var(--white); border: 1px solid var(--ink-light); padding: 10px 12px; font-size: 13px; }
.assist-log .proposal-title { font-weight: 600; color: var(--ink-deep); margin-bottom: 6px; }
.assist-log .proposal-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.assist-log .proposal-table th, .assist-log .proposal-table td { border-top: 1px solid var(--rule); padding: 4px 6px; text-align: left; vertical-align: top; white-space: pre-wrap; word-break: break-word; }
.assist-log .proposal-table th { font-weight: 500; color: var(--muted); font-size: 12px; }
.assist-log .proposal-table .before { color: var(--muted); }
.assist-log .proposal-state { margin-top: 8px; font-size: 12px; color: var(--muted); }
.assist-log .proposal-state.done { color: var(--ok); }
.assist-log .proposal-state.error { color: var(--danger); }
.assist-log .proposal-actions { display: flex; gap: 8px; margin-top: 8px; }
/* 閉じた提案（反映済み、取り消し、期限切れ、内容が変わった）はボタンを隠す。display: flex が hidden を打ち消していた（2026-11-10 点検 B-5） */
.assist-log .proposal-actions[hidden] { display: none; }

/* ===== フッター ===== */
footer.site-footer { background: var(--ink-deep); color: var(--white); padding: 48px 0 32px; margin-top: auto; }
.footer-row { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: flex-start; }
.footer-brand { font-family: var(--serif-en); font-size: 22px; line-height: 1; margin-bottom: 12px; color: var(--white); }
.footer-tag { font-size: 12px; color: rgba(255,255,255,0.7); line-height: 1.9; }
.footer-links { list-style: none; display: flex; gap: 8px 24px; flex-wrap: wrap; }
.footer-links a { font-size: 13px; color: rgba(255,255,255,0.85); }
.footer-links a:hover { color: var(--white); }
.footer-meta { border-top: 1px solid rgba(255,255,255,0.12); margin-top: 28px; padding-top: 20px; font-size: 12px; color: rgba(255,255,255,0.55); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* ===== 経過 ===== */
.timeline { list-style: none; border-left: 1px solid var(--rule); padding-left: 18px; }
.timeline li { position: relative; padding: 4px 0 12px; font-size: 13px; }
.timeline li::before { content: ''; position: absolute; left: -22px; top: 12px; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }
.timeline .when { color: var(--muted); font-size: 12px; }

.two-col { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 32px; align-items: start; }
/* 選考のページの右の段（幅が約320px）では、見出しの列が200pxあると値が数文字ずつ折り返す。見出しと値を縦に積む（2026-11-10 点検 contract-flow C-4） */
.two-col > :last-child .dl-table { grid-template-columns: 1fr; }
.two-col > :last-child .dl-table dt { padding: 12px 0 2px; padding-right: 0; }
.two-col > :last-child .dl-table dd { padding: 0 0 12px; border-top: none; }
.two-col > :last-child .dl-table dt:last-of-type { border-bottom: none; }
.slots { display: grid; gap: 8px; }
.slot { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--rule); }
.slot input { accent-color: var(--ink); }
details.box { border: 1px solid var(--rule); padding: 12px 16px; }
details.box summary { cursor: pointer; font-size: 14px; color: var(--ink); }
details.box[open] summary { margin-bottom: 12px; }
.pager { display: flex; gap: 12px; justify-content: center; margin-top: 24px; font-size: 14px; }
.filters { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 20px; }
.filters .field { min-width: 160px; }
.kv { display: flex; gap: 8px; flex-wrap: wrap; }

/* ===== スマホ ===== */
@media (max-width: 860px) {
  .job-cards { grid-template-columns: 1fr; }
  :root { --gutter: 16px; --header-h: 60px; }
  body { font-size: 15px; }
  /* ロゴのリンクは押せる高さを44px取る（2026-11-07 点検 K10） */
  .brand { font-size: 19px; display: inline-flex; align-items: center; min-height: 44px; }
  .brand small { display: none; }
  .menu-toggle { display: inline-block; background: none; border: 1px solid var(--rule); padding: 6px 12px; font-size: 13px; color: var(--body); cursor: pointer; }
  .nav { display: none; position: absolute; top: var(--header-h); left: 0; right: 0; background: var(--white); border-bottom: 1px solid var(--rule); flex-direction: column; align-items: stretch; gap: 0; padding: 8px 16px 16px; box-shadow: 0 12px 24px rgba(0,0,0,0.06); }
  .nav.open { display: flex; }
  .nav a, .nav button.linklike { padding: 12px 4px; border-bottom: 1px solid var(--rule-soft); font-size: 15px; text-align: left; }
  .nav a::after { display: none; }
  .page-head { padding: 32px 0 20px; }
  .page-body { padding-bottom: 72px; }
  /* スマホでは、アシスタントのボタンを小さくして中身に重なる面を減らし、表は潰さずに横に動かす（2026-10-24） */
  /* 表は、行ごとのカードにして縦に並べる。見出しの名前は app.js が各セルの data-label に写す（2026-10-29） */
  table.table, table.table tbody, table.table tr, table.table td, table.table tbody th { display: block; width: 100%; }
  table.table thead { display: none; }
  table.table tr { border: 1px solid var(--rule); padding: 8px 14px; margin-bottom: 10px; }
  table.table tr:hover td { background: none; }
  table.table td, table.table tbody th { border: 0; padding: 5px 0; text-align: left; white-space: normal; overflow-wrap: anywhere; background: none; }
  table.table td[data-label] { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 10px; }
  table.table td[data-label]::before { content: attr(data-label); color: var(--muted); font-size: 12px; padding-top: 1px; }
  table.table td.num { text-align: left; white-space: normal; }
  .table-wrap { overflow-x: visible; }
  .prose table { display: block; max-width: 100%; overflow-x: auto; }
  .prose td, .prose th { overflow-wrap: anywhere; }
  /* 絞り込みは2列にそろえる */
  .filterbar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
  .filterbar label.grow, .filterbar .btn, .filterbar .check { grid-column: 1 / -1; }
  .filterbar select, .filterbar input, .filterbar input[type=number] { width: 100%; font-size: 16px; }
  .filterbar .btn { justify-self: start; }
  .tabs a { padding: 10px 14px; }
  .form-grid { grid-template-columns: 1fr; }
  .two-col { grid-template-columns: 1fr; }
  .dl-table { grid-template-columns: 1fr; }
  .dl-table dt { padding: 12px 0 2px; }
  .dl-table dd { padding: 0 0 12px; border-top: none; }
  .dl-table dt:last-of-type { border-bottom: none; }
  .list-item { flex-direction: column; gap: 10px; }
  .list-item .side { justify-content: flex-start; }
  .btn { padding: 13px 28px; }
  .field input, .field textarea, .field select { font-size: 16px; }
  /* アシスタントのボタンは丸く小さくして、中身に重なる面を減らす。フッターの末尾は隠れないように空ける */
  .assist-dock { right: 12px; bottom: 12px; }
  .assist-open { width: 56px; height: 56px; padding: 0; border-radius: 50%; font-size: 12px; line-height: 1.3; letter-spacing: 0; }
  .assist-open .long { display: none; }
  .assist-open .short { display: inline; }
  footer.site-footer { padding-bottom: 88px; }
  .assist { right: 0; bottom: 0; width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border: 0; }
  .msg { max-width: 92%; }
  .chat { max-height: none; }
  .footer-meta { flex-direction: column; }
}

/* 登録直後の画面の「これからの流れ」 */
.steps { counter-reset: step; list-style: none; margin-top: 12px; }
.steps li { counter-increment: step; position: relative; padding: 10px 0 10px 36px; border-bottom: 1px solid var(--rule); font-size: 14px; }
.steps li::before { content: counter(step); position: absolute; left: 0; top: 10px; width: 24px; height: 24px; border-radius: 50%; background: var(--ink-deep); color: #fff; font-size: 12px; line-height: 24px; text-align: center; }
/* アカウントの画面のログインの方法 */
.row-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.row-actions .inline-form { margin: 0; }
.mt-xs { margin-top: 4px; }

/* 企業からのメッセージ（スカウト） */
.quote { margin: 12px 0; padding: 12px 16px; border-left: 3px solid var(--ink); background: var(--white); }
.quote strong { display: block; font-size: 13px; margin-bottom: 4px; }

/* 複数選択の絞り込み（2026-10-29 岩崎） */
.multipick-field { display: grid; gap: 4px; min-width: 0; position: relative; }
.multipick-label { font-size: 12px; color: var(--muted); }
.multipick > summary { list-style: none; cursor: pointer; font-size: 14px; color: var(--body); background: var(--white); border: 1px solid var(--rule); padding: 7px 30px 7px 10px; min-width: 9em; max-width: 16em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; }
.multipick > summary::-webkit-details-marker { display: none; }
.multipick > summary::after { content: '▾'; position: absolute; right: 10px; color: var(--muted); }
.multipick[open] > summary { border-color: var(--ink); }
.multipick-panel { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; background: var(--white); border: 1px solid var(--rule); box-shadow: 0 8px 24px rgba(10, 10, 10, 0.08); padding: 12px 14px; width: min(560px, 90vw); max-height: 380px; overflow-y: auto; }
.multipick-panel.to-left { left: auto; right: 0; }
.multipick-group + .multipick-group { margin-top: 10px; }
.multipick-group-name { font-size: 11px; color: var(--muted); letter-spacing: 0.04em; margin-bottom: 4px; }
.multipick-group { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 2px 14px; }
.multipick-group-name { grid-column: 1 / -1; }
.filterbar .multipick-item, .multipick-item { display: flex; align-items: center; gap: 8px; padding: 4px 0; cursor: pointer; }
.filterbar .multipick-item span, .multipick-item span { font-size: 13px; color: var(--body); }
.filterbar .multipick-item input, .multipick-item input { accent-color: var(--ink); width: 15px; height: 15px; padding: 0; border: 0; margin: 0; flex: none; }
@media (max-width: 860px) {
  .filterbar .multipick-field { grid-column: 1 / -1; }
  .multipick > summary { max-width: none; font-size: 16px; }
  .multipick-panel { position: static; width: auto; max-width: none; box-shadow: none; margin-top: 4px; }
}

/* 2段階認証（2026-10-30） */
.qr { width: 200px; height: 200px; margin: 16px 0; background: #fff; }
.qr svg { width: 100%; height: 100%; display: block; }
.backup-codes { list-style: none; padding: 0; margin: 16px 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; max-width: 360px; }
.backup-codes code { font-size: 16px; letter-spacing: 0.05em; }
.steps-list { padding-left: 1.4em; line-height: 1.8; }

/* 選考の段階ごとの表示（2026-10-30） */
.layout-toggle { display: inline-flex; border: 1px solid var(--rule); margin: 0 0 16px; }
.layout-toggle a { padding: 6px 16px; font-size: 13px; color: var(--muted); }
.layout-toggle a.current { background: var(--ink); color: #fff; }
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 8px; }
.kanban-col { background: #f6f7f9; padding: 12px; min-height: 160px; }
.kanban-col h3 { font-size: 13px; font-weight: 600; margin: 0 0 10px; display: flex; justify-content: space-between; color: var(--body); }
.kanban-col h3 .count { color: var(--muted); font-weight: 400; }
.kanban-card { display: block; background: #fff; border: 1px solid var(--rule); padding: 10px 12px; margin-bottom: 8px; color: var(--body); text-decoration: none; }
.kanban-card:hover { border-color: var(--ink); }
.kanban-card.unread { border-left: 3px solid var(--ink); }
.kanban-card .name { font-weight: 600; font-size: 14px; }
.kanban-card .job { font-size: 12px; color: var(--muted); margin-top: 2px; }
.kanban-card .meta { font-size: 12px; color: var(--muted); margin-top: 6px; }
.kanban-card .badges { margin-top: 6px; display: flex; gap: 4px; flex-wrap: wrap; }
@media (max-width: 860px) { .kanban { grid-auto-columns: 78%; } }
/* スマホでは、候補者のいない段階の列を出さない（2026-11-07 レビュー12） */
@media (max-width: 860px) { .kanban-col.empty { display: none; } }
.kanban-card .turn-badge { margin-top: 6px; }
/* 企業のホームの、回答期限の近い推薦の一覧と、1行にした「ご利用の準備」（2026-11-07 レビュー15・18） */
.notice ul.plain-list { margin: 8px 0 0; padding-left: 1.2em; }
.notice ul.plain-list li + li { margin-top: 4px; }
.setup-line { margin: 16px 0; }
.table tr.total td { font-weight: 600; border-top: 2px solid var(--rule); }

/* 大分類の見出しのチェック（押すとその分類を全部選ぶ） */
.filterbar .group-all-label, .group-all-label { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 4px 0; }
.filterbar .group-all-label span, .group-all-label span { font-size: 12px; font-weight: 600; color: var(--body); letter-spacing: 0.04em; }
.filterbar .group-all-label input, .group-all-label input { accent-color: var(--ink); width: 15px; height: 15px; padding: 0; border: 0; margin: 0; flex: none; }
.grouped-checks .multipick-group + .multipick-group { margin-top: 12px; }
/* 大分類の折りたたみ（2026-11-04 岩崎） */
details.pick-group { display: block; border-bottom: 1px solid var(--rule); }
.multipick-group + details.pick-group, details.pick-group + details.pick-group, .grouped-checks details.pick-group + details.pick-group { margin-top: 0; }
summary.pick-group-head { list-style: none; display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 10px 2px; }
summary.pick-group-head::-webkit-details-marker { display: none; }
summary.pick-group-head::after { content: '＋'; margin-left: auto; color: var(--muted); font-size: 13px; }
details.pick-group[open] > summary.pick-group-head::after { content: '－'; }
summary.pick-group-head input.group-all { accent-color: var(--ink); width: 15px; height: 15px; padding: 0; border: 0; margin: 0; flex: none; }
.pick-group-name { font-size: 13px; font-weight: 600; color: var(--body); letter-spacing: 0.04em; }
.pick-group-count { font-size: 12px; color: var(--ink); }
.pick-group-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 2px 14px; padding: 0 0 10px 23px; }
/* スマホでは、職種と領域の選択のチェックも20px角にし、字下げをそろえる（2026-11-07 点検 K10） */
@media (max-width: 860px) {
  .filterbar .multipick-item input, .multipick-item input, .filterbar .group-all-label input, .group-all-label input, summary.pick-group-head input.group-all { width: 20px; height: 20px; }
  .pick-group-items { padding-left: 28px; }
}
/* 求人の内容の下にも、応募・保存のボタンを置く（2026-11-01） */
.job-actions-bottom { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--rule); }

/* 次にやること（2026-11-01 岩崎） */
.next-step { display: flex; gap: 14px; align-items: center; padding: 14px 18px; margin-bottom: 24px; border: 1px solid var(--rule); border-left: 3px solid var(--mutedlight); background: var(--white); font-size: 14px; }
.next-step p { margin: 0; }
.next-step.turn-me { border: 1px solid var(--ink-light); border-radius: 6px; background: var(--white); color: var(--body); }
.next-step.turn-me .next-step-label { background: var(--ink); color: var(--white); padding: 2px 8px; border-radius: 3px; }
.next-step-label { flex-shrink: 0; font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.progress-list a.progress-item { color: inherit; text-decoration: none; }
.progress-list a.progress-item:hover .title { color: var(--ink); }
.progress-item .meta { font-size: 13px; color: var(--body); }
.progress-item.turn-other .meta, .progress-item.turn-none .meta { color: var(--muted); }
.progress-item .meta.idle { color: var(--warn); font-size: 12px; }
.turn-badge { display: inline-block; font-size: 12px; padding: 3px 8px; border: 1px solid var(--rule); color: var(--muted); white-space: nowrap; }
.turn-badge.turn-me { border-color: var(--ink); background: var(--ink); color: var(--white); }

/* 状態が決まったときのお祝い */
dialog.celebrate { position: fixed; inset: 0; margin: auto; height: fit-content; max-height: calc(100vh - 32px); overflow-y: auto; width: min(480px, calc(100vw - 32px)); padding: 40px 32px 28px; border: 0; border-top: 4px solid var(--ink); background: var(--white); color: var(--body); text-align: left; overflow-x: hidden; }
dialog.celebrate::backdrop { background: rgba(10, 10, 10, .45); }
dialog.celebrate h2 { position: relative; margin: 0 0 8px; font-family: var(--serif-jp); font-size: 24px; color: var(--black); text-align: center; }
dialog.celebrate .lead { position: relative; margin: 0 0 20px; text-align: center; color: var(--muted); font-size: 14px; }
dialog.celebrate .steps-head { position: relative; margin: 0 0 8px; font-size: 12px; font-weight: 700; color: var(--ink); }
dialog.celebrate .steps { position: relative; margin: 0 0 24px; padding-left: 1.4em; font-size: 14px; line-height: 1.8; }
dialog.celebrate .form-actions { position: relative; justify-content: center; }
.confetti { position: absolute; inset: 0; pointer-events: none; }
.confetti i { position: absolute; top: -12px; left: var(--x); width: 7px; height: 12px; background: var(--ink); opacity: 0; transform: rotate(var(--r)); animation: confetti-fall 1.8s ease-in var(--d) 1 forwards; }
.confetti i:nth-child(3n) { background: #C9A227; }
.confetti i:nth-child(3n+1) { background: var(--ink-light); }
/* 紙吹雪の位置。CSP（style-src）がインラインの style 属性を止めるため、ここで指定する（2026-11-01 点検） */
.confetti i:nth-child(1) { --x: 0%; --d: 0s; --r: 0deg; }
.confetti i:nth-child(2) { --x: 37%; --d: 0.15s; --r: 53deg; }
.confetti i:nth-child(3) { --x: 74%; --d: 0.3s; --r: 106deg; }
.confetti i:nth-child(4) { --x: 11%; --d: 0.45s; --r: 159deg; }
.confetti i:nth-child(5) { --x: 48%; --d: 0.6s; --r: 212deg; }
.confetti i:nth-child(6) { --x: 85%; --d: 0.75s; --r: 265deg; }
.confetti i:nth-child(7) { --x: 22%; --d: 0s; --r: 318deg; }
.confetti i:nth-child(8) { --x: 59%; --d: 0.15s; --r: 11deg; }
.confetti i:nth-child(9) { --x: 96%; --d: 0.3s; --r: 64deg; }
.confetti i:nth-child(10) { --x: 33%; --d: 0.45s; --r: 117deg; }
.confetti i:nth-child(11) { --x: 70%; --d: 0.6s; --r: 170deg; }
.confetti i:nth-child(12) { --x: 7%; --d: 0.75s; --r: 223deg; }
.confetti i:nth-child(13) { --x: 44%; --d: 0s; --r: 276deg; }
.confetti i:nth-child(14) { --x: 81%; --d: 0.15s; --r: 329deg; }
.confetti i:nth-child(15) { --x: 18%; --d: 0.3s; --r: 22deg; }
.confetti i:nth-child(16) { --x: 55%; --d: 0.45s; --r: 75deg; }
.confetti i:nth-child(17) { --x: 92%; --d: 0.6s; --r: 128deg; }
.confetti i:nth-child(18) { --x: 29%; --d: 0.75s; --r: 181deg; }
.confetti i:nth-child(19) { --x: 66%; --d: 0s; --r: 234deg; }
.confetti i:nth-child(20) { --x: 3%; --d: 0.15s; --r: 287deg; }
.confetti i:nth-child(21) { --x: 40%; --d: 0.3s; --r: 340deg; }
.confetti i:nth-child(22) { --x: 77%; --d: 0.45s; --r: 33deg; }
.confetti i:nth-child(23) { --x: 14%; --d: 0.6s; --r: 86deg; }
.confetti i:nth-child(24) { --x: 51%; --d: 0.75s; --r: 139deg; }
@keyframes confetti-fall { 0% { opacity: 1; transform: translateY(0) rotate(var(--r)); } 100% { opacity: 0; transform: translateY(420px) rotate(calc(var(--r) + 540deg)); } }
@media (prefers-reduced-motion: reduce) { .confetti { display: none; } }
@media (max-width: 640px) { .next-step { flex-direction: column; gap: 4px; } dialog.celebrate { padding: 32px 20px 24px; } dialog.celebrate h2 { font-size: 20px; } }

/* AI が作ったもの（2026-11-01 岩崎） */
.ai-tag { display: inline-block; font-family: var(--sans-en); font-size: 11px; font-weight: 700; letter-spacing: .06em; padding: 2px 6px; background: var(--ink); color: var(--white); vertical-align: middle; }
.ai-box { border: 1px solid var(--rule); border-left: 3px solid var(--ink); background: var(--white); padding: 16px 18px; margin-bottom: 24px; font-size: 14px; }
.ai-box-head { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; cursor: default; }
details.ai-box > summary.ai-box-head { cursor: pointer; list-style: none; }
details.ai-box > summary.ai-box-head::-webkit-details-marker { display: none; }
.ai-sub { margin: 12px 0 4px; font-size: 12px; font-weight: 700; color: var(--ink); }
.ai-list { margin: 0; padding-left: 1.3em; line-height: 1.8; }
.ai-list li + li { margin-top: 2px; }
.ai-draft-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: -4px 0 12px; }

/* 改行をそのまま表示する本文（メンテナンスの文、お知らせメールのプレビューなど）。CSP のためインラインの style を使わない */
.pre-wrap { white-space: pre-wrap; overflow-wrap: anywhere; }

/* コーポレートの手続きの1行（手続きの名前、完了日、ボタンを1行にまとめ、行ごとに区切る。2026-11-01 点検） */
.step-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.step-row:last-child { border-bottom: 0; }
.step-row .step-name { flex: 1 1 220px; }

/* ===== スマホの使いやすさ（2026-11-02 岩崎「スマホ画面もつかいやすくしたい」。scripts/mobile-audit の点検に基づく） ===== */
@media (max-width: 860px) {
  /* 入力欄の文字が16px未満だと、iPhoneでは入力のたびに画面が拡大される */
  input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]), select, textarea { font-size: 16px !important; }
  /* メニューのボタンを押しやすい大きさにする */
  .menu-toggle { min-height: 40px; padding: 8px 14px; font-size: 14px; }
  /* 画面の説明文は3行で切り、押すと全文を出す（app.js） */
  .page-sub.clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .page-sub-more { background: none; border: 0; padding: 4px 0 0; color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; }
  /* 画面の上のボタンは、横幅を分け合って並べる */
  .page-actions { gap: 10px; }
  .page-actions .btn { flex: 1 1 auto; padding-left: 16px; padding-right: 16px; }
  /* 絞り込みの条件は、キーワード以外を畳む（app.js） */
  .filterbar.folded > :not(.keep):not(.filter-toggle):not(.btn):not(input[type=hidden]) { display: none; }
  .filter-toggle { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; width: 100%; background: var(--white); border: 1px solid var(--rule); padding: 12px 14px; font: inherit; font-size: 14px; color: var(--body); cursor: pointer; }
  .filter-toggle::after { content: '＋'; color: var(--ink); }
  .filterbar:not(.folded) .filter-toggle::after { content: '−'; }
  .filterbar select { min-height: 44px; }
  /* 求人の数字の表は、項目を2列に並べて縦に長くしない */
  table.table.metrics tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 20px; }
  table.table.metrics td:nth-child(-n+2) { grid-column: 1 / -1; }
  table.table.metrics td.num[data-label] { grid-template-columns: minmax(0, 1fr) auto; border-bottom: 1px solid var(--rule-soft); }
  table.table.metrics td.num[data-label] > div { text-align: right; font-variant-numeric: tabular-nums; }
  /* 長い入力の画面は、保存のボタンを画面の下に留める */
  .form.sticky-actions > .form-actions:last-child, form.sticky-actions > .form-actions:last-child { position: sticky; bottom: 0; z-index: 5; background: #fff; padding: 12px 0; margin-bottom: 0; border-top: 1px solid transparent; }
  .form.sticky-actions > .form-actions:last-child { display: flex; flex-wrap: nowrap; gap: 8px; }
  /* 文字の量に合わせて幅を分け、375pxで「下書きを保存／する」のように1字だけ折り返さないようにする（2026-11-10 最終点検 C-1） */
  .form.sticky-actions > .form-actions:last-child .btn { flex: 1 1 auto; padding: 12px 4px; font-size: 13px; letter-spacing: 0; }
  .form.sticky-actions > .form-actions:last-child .tiny { display: none; }
  .form.sticky-actions > .form-actions:last-child .btn-ghost { background: #fff; }
  /* 下のアシスタントのボタンと重ならないよう、ページの下を空ける */
  .page-body { padding-bottom: 96px; }
  .assist-dock { transition: transform 200ms ease, opacity 200ms ease; }
  .assist-dock.hide-on-scroll { transform: translateY(90px); opacity: 0; pointer-events: none; }
  .page-sub-more { padding: 8px 0; }
}

/* AIの推薦をその場で受け取るボタン（2026-11-02） */
.manual-match { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 16px; }
.manual-match .small { line-height: 1.6; }

/* 相手からの見え方のプレビュー（2026-11-04）。相手の画面であることが分かるよう、枠とラベルで囲む */
.preview-frame { border: 1px solid var(--rule); border-radius: 6px; padding: 24px 20px 8px; margin: 40px 0 32px; position: relative; background: var(--white); }
.preview-label { position: absolute; top: -11px; left: 14px; background: var(--ink); color: var(--white); font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 3px; }
.preview-title { font-size: 20px; margin: 6px 0 4px; }

/* ログイン後のオンボーディング（2026-11-04。同日、岩崎「この画面ださすぎる」で、できることを3枚のカード、入力の方法を選ぶカードに組み直した） */
.ob-steps { margin: 0 0 20px; }
.ob-steps-text { font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.ob-bar { display: block; width: 100%; height: 6px; margin: 8px 0 4px; border: 0; border-radius: 3px; overflow: hidden; background: var(--rule-soft); -webkit-appearance: none; appearance: none; }
.ob-bar::-webkit-progress-bar { background: var(--rule-soft); border-radius: 3px; }
.ob-bar::-webkit-progress-value { background: var(--ink); border-radius: 3px; }
.ob-bar::-moz-progress-bar { background: var(--ink); border-radius: 3px; }
.ob-value { margin: 0 0 40px; }
.ob-value h2, .ob-h2 { font-size: 18px; font-weight: 700; margin: 0 0 16px; color: var(--black); }
/* 完成の画面で、在留カードの提出などのボタンのすぐ下に見出しが詰まって付いていた（2026-11-10 点検 C-4） */
.actions + .ob-h2 { margin-top: 32px; }
.ob-value-list, .ob-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; counter-reset: ob; }
.ob-value-list li, .ob-flow li { counter-increment: ob; background: var(--ink-pale); border-radius: 8px; padding: 20px 20px 18px; display: flex; flex-direction: column; gap: 8px; }
.ob-value-list li::before, .ob-flow li::before { content: counter(ob, decimal-leading-zero); font-family: var(--serif-en); font-size: 22px; line-height: 1; color: var(--ink); }
.ob-value-list li strong, .ob-flow li strong { display: block; font-weight: 700; font-size: 15px; line-height: 1.6; color: var(--ink-deep); }
.ob-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-bottom: 20px; }
.ob-choice { position: relative; display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--rule); border-radius: 8px; padding: 22px 22px 18px; background: var(--white); color: var(--body); text-decoration: none; transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease; }
.ob-choice:hover { border-color: var(--ink); box-shadow: 0 6px 20px rgba(20, 34, 92, 0.08); transform: translateY(-1px); }
.ob-choice.primary { border: 2px solid var(--ink); }
.ob-badge { position: absolute; top: -11px; left: 18px; background: var(--ink); color: var(--white); font-size: 11px; font-weight: 700; padding: 2px 10px; border-radius: 10px; }
.ob-choice-title { font-weight: 700; font-size: 16px; color: var(--ink-deep); }
.ob-choice p { margin: 0; flex: 1; color: var(--muted); }
.ob-choice-go { font-size: 13px; font-weight: 700; color: var(--ink); margin-top: 6px; }
.ob-actions { display: flex; gap: 12px; justify-content: space-between; }
.ob-check { border: 2px solid var(--ink); border-radius: 8px; padding: 20px 22px; background: var(--white); margin-bottom: 28px; }
.ob-check h2 { font-size: 17px; margin: 0 0 10px; }
.ob-check-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ob-check-count { font-size: 13px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.ob-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.ob-list li { display: flex; gap: 12px; align-items: flex-start; }
.ob-mark { flex: none; width: 22px; height: 22px; border: 1.5px solid var(--rule); border-radius: 50%; display: grid; place-items: center; font-size: 12px; color: var(--white); margin-top: 1px; }
.ob-list li.done .ob-mark { background: var(--ok); border-color: var(--ok); }
.ob-list li.done .ob-item a { color: var(--muted); text-decoration: line-through; }
.ob-item a { font-weight: 700; }
.ob-check-more { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--rule); }
.ob-opt { font-size: 11px; color: var(--muted); border: 1px solid var(--rule); border-radius: 3px; padding: 0 5px; margin-left: 6px; }
@media (max-width: 760px) {
  .ob-value-list, .ob-flow { grid-template-columns: 1fr; gap: 10px; }
  .ob-value-list li, .ob-flow li { padding: 16px 18px; gap: 6px; }
  .ob-value-list li::before, .ob-flow li::before { font-size: 18px; }
}

/* 長い入力の画面は、PCでも保存のボタンを画面の下に留める（2026-11-04 石さんのFB「保存するボタンが推薦を希望しない企業の下にあるのみ」） */
@media (min-width: 761px) {
  form.sticky-actions > .form-actions:last-child { position: sticky; bottom: 0; z-index: 5; background: #fff; padding: 14px 0; margin-bottom: 0; border-top: 1px solid transparent; }
}

/* 経歴の入力が完了したときの演出（2026-11-04 畝地のFB） */
/* プロフィール完成の演出（div）だけに当てる。選考のお祝い（dialog.celebrate）に当たると、横並びになって崩れる（2026-11-07 点検 K1） */
div.celebrate { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(15, 23, 42, 0.18); animation: celebrate-in .25s ease-out both; cursor: pointer; }
div.celebrate.is-leaving { animation: celebrate-out .35s ease-in both; }
.celebrate-card { position: relative; background: #fff; border: 1px solid var(--rule); box-shadow: 0 18px 48px rgba(15, 23, 42, 0.18); padding: 28px 32px 24px; max-width: 360px; width: 100%; text-align: center; animation: celebrate-pop .5s cubic-bezier(.2, 1.4, .4, 1) both; }
.celebrate-big .celebrate-card { max-width: 420px; padding: 36px 36px 30px; }
.celebrate-check { width: 64px; height: 64px; display: block; margin: 0 auto 14px; }
.celebrate-big .celebrate-check { width: 84px; height: 84px; }
.celebrate-check circle { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-dasharray: 151; stroke-dashoffset: 151; animation: celebrate-draw .6s .15s ease-out forwards; }
.celebrate-check path { fill: none; stroke: var(--ink); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: celebrate-draw .35s .65s ease-out forwards; }
.celebrate-title { font-family: var(--serif-jp); font-size: 20px; color: var(--black); margin: 0 0 6px; }
.celebrate-big .celebrate-title { font-size: 23px; }
.celebrate-sub { font-size: 13px; color: var(--muted); line-height: 1.7; margin: 0; }
.celebrate-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.celebrate-confetti span { position: absolute; top: -16px; left: var(--x); width: calc(8px * var(--s)); height: calc(12px * var(--s)); background: var(--c); transform: rotate(var(--r)); opacity: 0; animation: celebrate-fall 2.4s var(--d) cubic-bezier(.25, .6, .4, 1) forwards; }
.celebrate-confetti span:nth-child(1) { --x:0%; --d:0.00s; --r:0deg; --c:#1E3A8A; --s:0.90; }
.celebrate-confetti span:nth-child(2) { --x:38%; --d:0.08s; --r:53deg; --c:#2563EB; --s:1.15; }
.celebrate-confetti span:nth-child(3) { --x:76%; --d:0.16s; --r:106deg; --c:#93C5FD; --s:1.40; }
.celebrate-confetti span:nth-child(4) { --x:11%; --d:0.24s; --r:159deg; --c:#C9A227; --s:1.65; }
.celebrate-confetti span:nth-child(5) { --x:49%; --d:0.32s; --r:212deg; --c:#CBD5E1; --s:0.90; }
.celebrate-confetti span:nth-child(6) { --x:87%; --d:0.40s; --r:265deg; --c:#1E3A8A; --s:1.15; }
.celebrate-confetti span:nth-child(7) { --x:22%; --d:0.48s; --r:318deg; --c:#2563EB; --s:1.40; }
.celebrate-confetti span:nth-child(8) { --x:60%; --d:0.00s; --r:11deg; --c:#93C5FD; --s:1.65; }
.celebrate-confetti span:nth-child(9) { --x:98%; --d:0.08s; --r:64deg; --c:#C9A227; --s:0.90; }
.celebrate-confetti span:nth-child(10) { --x:33%; --d:0.16s; --r:117deg; --c:#CBD5E1; --s:1.15; }
.celebrate-confetti span:nth-child(11) { --x:71%; --d:0.24s; --r:170deg; --c:#1E3A8A; --s:1.40; }
.celebrate-confetti span:nth-child(12) { --x:9%; --d:0.32s; --r:223deg; --c:#2563EB; --s:1.65; }
.celebrate-confetti span:nth-child(13) { --x:44%; --d:0.40s; --r:276deg; --c:#93C5FD; --s:0.90; }
.celebrate-confetti span:nth-child(14) { --x:82%; --d:0.48s; --r:329deg; --c:#C9A227; --s:1.15; }
.celebrate-confetti span:nth-child(15) { --x:20%; --d:0.00s; --r:22deg; --c:#CBD5E1; --s:1.40; }
.celebrate-confetti span:nth-child(16) { --x:55%; --d:0.08s; --r:75deg; --c:#1E3A8A; --s:1.65; }
.celebrate-confetti span:nth-child(17) { --x:93%; --d:0.16s; --r:128deg; --c:#2563EB; --s:0.90; }
.celebrate-confetti span:nth-child(18) { --x:31%; --d:0.24s; --r:181deg; --c:#93C5FD; --s:1.15; }
.celebrate-confetti span:nth-child(19) { --x:66%; --d:0.32s; --r:234deg; --c:#C9A227; --s:1.40; }
.celebrate-confetti span:nth-child(20) { --x:4%; --d:0.40s; --r:287deg; --c:#CBD5E1; --s:1.65; }
.celebrate-confetti span:nth-child(21) { --x:42%; --d:0.48s; --r:340deg; --c:#1E3A8A; --s:0.90; }
.celebrate-confetti span:nth-child(22) { --x:77%; --d:0.00s; --r:33deg; --c:#2563EB; --s:1.15; }
.celebrate-confetti span:nth-child(23) { --x:15%; --d:0.08s; --r:86deg; --c:#93C5FD; --s:1.40; }
.celebrate-confetti span:nth-child(24) { --x:53%; --d:0.16s; --r:139deg; --c:#C9A227; --s:1.65; }
.celebrate-confetti span:nth-child(25) { --x:88%; --d:0.24s; --r:192deg; --c:#CBD5E1; --s:0.90; }
.celebrate-confetti span:nth-child(26) { --x:26%; --d:0.32s; --r:245deg; --c:#1E3A8A; --s:1.15; }
.celebrate-confetti span:nth-child(27) { --x:64%; --d:0.40s; --r:298deg; --c:#2563EB; --s:1.40; }
.celebrate-confetti span:nth-child(28) { --x:99%; --d:0.48s; --r:351deg; --c:#93C5FD; --s:1.65; }
.celebrate-confetti span:nth-child(29) { --x:37%; --d:0.00s; --r:44deg; --c:#C9A227; --s:0.90; }
.celebrate-confetti span:nth-child(30) { --x:75%; --d:0.08s; --r:97deg; --c:#CBD5E1; --s:1.15; }
.celebrate-confetti span:nth-child(31) { --x:10%; --d:0.16s; --r:150deg; --c:#1E3A8A; --s:1.40; }
.celebrate-confetti span:nth-child(32) { --x:48%; --d:0.24s; --r:203deg; --c:#2563EB; --s:1.65; }
.celebrate-confetti span:nth-child(33) { --x:86%; --d:0.32s; --r:256deg; --c:#93C5FD; --s:0.90; }
.celebrate-confetti span:nth-child(34) { --x:21%; --d:0.40s; --r:309deg; --c:#C9A227; --s:1.15; }
.celebrate-confetti span:nth-child(35) { --x:59%; --d:0.48s; --r:2deg; --c:#CBD5E1; --s:1.40; }
.celebrate-confetti span:nth-child(36) { --x:97%; --d:0.00s; --r:55deg; --c:#1E3A8A; --s:1.65; }
@keyframes celebrate-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes celebrate-out { to { opacity: 0; } }
@keyframes celebrate-pop { from { opacity: 0; transform: scale(.85) translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes celebrate-draw { to { stroke-dashoffset: 0; } }
@keyframes celebrate-fall { 0% { opacity: 1; transform: translateY(0) rotate(var(--r)); } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(105vh) rotate(calc(var(--r) + 540deg)); } }
@media (prefers-reduced-motion: reduce) {
  .celebrate-confetti { display: none; }
  div.celebrate, .celebrate-card, .celebrate-check circle, .celebrate-check path { animation-duration: .01s; animation-delay: 0s; }
}

/* 求人探しの進み具合（2026-11-04 畝地のFB） */
.match-progress { margin-bottom: 16px; }
.match-progress-title { display: flex; align-items: center; gap: 10px; font-weight: 600; margin: 0 0 10px; }
.match-spinner { width: 16px; height: 16px; border: 2px solid var(--ink-pale); border-top-color: var(--ink); border-radius: 50%; animation: match-spin .9s linear infinite; flex: none; }
@keyframes match-spin { to { transform: rotate(360deg); } }
.match-steps { list-style: none; display: flex; gap: 6px; padding: 0; margin: 0 0 8px; counter-reset: step; flex-wrap: wrap; }
.match-steps li { counter-increment: step; font-size: 13px; color: var(--mutedlight); padding: 4px 12px 4px 8px; border: 1px solid var(--rule); background: #fff; }
.match-steps li::before { content: counter(step); display: inline-block; width: 18px; height: 18px; line-height: 18px; text-align: center; border-radius: 50%; background: var(--rule); color: #fff; font-size: 11px; margin-right: 6px; }
.match-steps li.is-done { color: var(--ink); }
.match-steps li.is-done::before { content: '✓'; background: var(--ink); }
.match-steps li.is-now { color: var(--ink); border-color: var(--ink); font-weight: 600; }
.match-steps li.is-now::before { background: var(--ink); }
@media (prefers-reduced-motion: reduce) { .match-spinner { animation-duration: 2.5s; } }
.draft-discard { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--rule); text-align: right; }
.draft-discard .btn { background: none; border: 0; padding: 0; width: auto; min-height: 0; color: var(--muted); font-size: 13px; font-weight: 400; letter-spacing: 0; text-decoration: underline; }
.draft-discard .btn:hover { color: var(--danger); background: none; }

/* スキルを1つずつ追加する入力（2026-11-04） */
.skill-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; padding: 0; }
.skill-tags:empty { display: none; }
.skill-tag { display: inline-flex; align-items: center; gap: 4px; background: var(--off); border: 1px solid var(--rule); border-radius: 999px; padding: 4px 6px 4px 12px; font-size: 13px; line-height: 1.5; }
.skill-remove { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 15px; line-height: 1; padding: 2px 6px; border-radius: 50%; }
.skill-remove:hover { color: var(--ink); background: var(--white); }
.skill-add { display: flex; gap: 8px; }
.skill-add input { flex: 1; min-width: 0; }
.skill-hint { margin-top: 6px; }
.skill-dict-table input { width: 100%; min-width: 120px; }
[data-skill-pick] [hidden] { display: none !important; }
.skill-dict-table td.nowrap { display: flex; gap: 6px; align-items: center; white-space: nowrap; }
.skill-dict-table td.nowrap form { margin: 0; }

/* ===== スマホの見直し（2026-11-04 岩崎「スマホになると体験悪くなるのおおいきがする、全部のスマホ画面チェックして」）。
   143画面をスマホの幅で撮影して点検し、共通の問題をここでまとめて直す ===== */
/* どの幅でも当てるもの */
.ob-opt { white-space: nowrap; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
/* 短いボタンを並べる列は、ボタンの中で折り返さず、ボタンごと次の行へ送る（2026-11-10 点検 C-4。375pxで「PDFでダウンロー／ド」と1文字だけ折り返していた） */
.actions-nowrap .btn { white-space: nowrap; }
/* 見出しの罫線と表の最初の罫線が二重にならないようにする */
.section-head + .dl-table > dt:first-of-type, .section-head + .dl-table > dt:first-of-type + dd { border-top: 0; }
/* 見出しの帯の直後の一覧には上の線を引かない（線が二重に見えるため。2026-11-09 岩崎） */
.section-head + .list { border-top: 0; }
/* 英字の書体の数字は「0」が「o」に見えるため、高さのそろった数字にする */
.stat .value { font-variant-numeric: lining-nums tabular-nums; }
/* 推薦の詳細の、経歴の後に置く判断のボタン */
.decide-again { margin: 32px 0 8px; padding: 18px 20px; border: 1px solid var(--rule); background: var(--off); }
.decide-again p { margin: 0 0 12px; font-size: 14px; }
/* タブが画面の幅に収まらないときは、横にずらさず2列のボタンに並べる（app.js が tabs-grid を付ける） */
.tabs.tabs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; border-bottom: 0; overflow: visible; }
.tabs.tabs-grid a { border: 1px solid var(--rule); margin: 0; padding: 10px 8px; text-align: center; white-space: normal; line-height: 1.5; }
.tabs.tabs-grid a.current { border-color: var(--ink); background: var(--ink-pale); color: var(--ink); font-weight: 500; }
/* ファイルを選ぶボタンを、アプリのボタンの見た目にそろえる */
input[type="file"]::file-selector-button { font: inherit; font-size: 14px; color: var(--ink); background: var(--white); border: 1px solid var(--ink); padding: 9px 16px; margin-right: 12px; cursor: pointer; }

@media (max-width: 860px) {
  /* 画面の下に留めたボタンの列がある画面では、AIアシスタントのボタンをその上に置く */
  body:has(form.sticky-actions) .assist-dock { bottom: 84px; }
  /* 右上の「?」が画面の端に接しないよう、少し内側に置く */
  .assist-dock { right: 16px; }
  /* メニュー: 開いている間は後ろを暗くし、AIアシスタントのボタンを隠す。項目の多い運営のメニューは2列にする */
  body.nav-open::after { content: ''; position: fixed; left: 0; right: 0; bottom: 0; top: var(--header-h); background: rgba(15, 23, 42, 0.35); z-index: 40; }
  body.nav-open .assist-dock { display: none; }
  .nav.open { max-height: calc(100dvh - var(--header-h)); overflow-y: auto; }
  .dense .nav.open { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; }
  .dense .nav a, .dense .nav button.linklike { font-size: 14px; }

  /* 見出し: 語の途中や小さい「ャ」の前で改行しにくくし、行の長さをそろえる */
  .page-title { font-size: 22px; }
  .page-title, .section-head h2, .prose h1, .prose h2, .card h3, .ob-h2 { text-wrap: balance; line-break: strict; word-break: auto-phrase; }
  .section-head { flex-wrap: wrap; row-gap: 4px; }

  /* ボタン: 1つだけのボタンは全幅にし、並ぶボタンは幅を分け合う。説明文との間を空ける */
  .section > form.inline-form { display: block; margin-top: 14px; }
  .section > form.inline-form > .btn { width: 100%; }
  .form-actions > .btn, .form-actions > .inline-form { flex: 1 1 100%; }
  .form-actions > .inline-form .btn { width: 100%; }
  .actions > .btn, .actions > .inline-form { flex: 1 1 140px; }
  .actions > .btn, .actions > .inline-form .btn { width: 100%; }
  /* 並ぶボタンは左右の余白を詰め、「話を聞きた／い」のように1字だけ折り返さないようにする（2026-11-10 最終点検 C-1） */
  .actions > .btn, .actions > .inline-form .btn { padding-left: 10px; padding-right: 10px; letter-spacing: 0.02em; }
  .page-actions > * { flex: 1 1 140px; }
  .page-actions .btn { width: 100%; }
  /* 求人の画面では「募集を終了する」を最後に置く */
  .page-actions > form[action$="/close"] { order: 9; }
  .list-item .side { width: 100%; }
  .row-actions { width: 100%; gap: 8px; }
  .row-actions > * { flex: 1 1 120px; }
  .row-actions .btn { width: 100%; }
  .row-actions > form[action$="/match-now"], .row-actions > button[disabled] { flex-basis: 100%; }
  .row-actions > form[action$="/delete"] .btn-ghost { color: var(--danger); border-color: var(--danger); }
  /* 縦に積む。折り返しを許すと、幅いっぱいの指定で2列目に回り、画面の外へはみ出す（2026-11-05） */
  .ob-actions { flex-direction: column; flex-wrap: nowrap; }
  .ob-actions > .btn { flex: 0 0 auto; width: 100%; }
  .ob-actions > .btn-ghost { order: 2; }

  /* 入力欄: 下線だけだと空欄が余白に見えるため、薄い背景を敷き、下線を濃くする */
  .field input[type="text"], .field input[type="email"], .field input[type="url"], .field input[type="tel"],
  .field input[type="number"], .field input[type="date"], .field input[type="month"], .field input[type="datetime-local"],
  .field input[type="search"], .field textarea, .field select { background-color: var(--off); border-bottom-color: var(--mutedlight); padding: 11px 12px; }
  .field select { padding-right: 32px; background-position: calc(100% - 17px) 55%, calc(100% - 12px) 55%; }
  .field.has-error input[type], .field.has-error select, .field.has-error textarea { background-color: var(--danger-pale); border-bottom-color: var(--danger); }
  .field textarea { min-height: 96px; }
  .field-note { color: var(--muted); font-size: 13px; }
  /* チェックボックスは2列にそろえ、行ごと押せる高さにする */
  .checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
  .checks label { min-height: 40px; align-items: center; }
  .checks input { margin-top: 0; width: 20px; height: 20px; }

  /* 小さすぎる文字と、押しにくい小さいボタン */
  .badge, .ob-opt, .assist-limit, .assist-head .note { font-size: 12px; }
  .assist-close { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0; color: var(--body); }
  .assist-form textarea { min-height: 64px; }
  .skill-tag { padding: 2px 4px 2px 12px; }
  .skill-remove { min-width: 32px; min-height: 32px; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
  details > summary.small, details.box > summary { padding-top: 10px; padding-bottom: 10px; }

  /* カード: 項目は1行で切らずに2行まで折り返し、詳細のボタンは全幅にする */
  .job-facts dd { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .job-card-foot { flex-wrap: wrap; }
  .job-card-foot > span:empty { display: none; }
  .job-card-foot > .btn { flex: 1 1 100%; }

  /* 絞り込み: 欄の幅と見た目をそろえる。運営の画面の絞り込みも、キーワード以外を畳む（app.js） */
  .filterbar > label { grid-column: 1 / -1; }
  .filterbar select { -webkit-appearance: none; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 17px) 55%, calc(100% - 12px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 32px; }
  .filters { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .filters .field { min-width: 0; margin: 0; }
  .filters.folded > :not(.keep):not(.filter-toggle):not(.btn):not(input[type=hidden]) { display: none; }
  .filters > .btn { width: 100%; }

  /* 中身が空のときの文は、左にそろえて読みやすくする */
  .empty { text-align: left; padding: 20px; }
  /* 規約などの表は、項目の列を狭くしすぎない */
  .prose th:first-child, .prose td:first-child { min-width: 7em; }
}

/* 社内メモの入力欄（2026-11-04）。.field の外にあり、ブラウザの既定の枠のままだったため、チャットの入力欄と同じ枠にする */
.note-form textarea { width: 100%; min-height: 110px; border: 1px solid var(--rule); padding: 10px 12px; font: inherit; font-size: 14px; line-height: 1.7; resize: vertical; outline: none; background: var(--white); }
.note-form textarea:focus { border-color: var(--ink); }
/* 候補者カードの「求人名｜段階」。スマホでは段階を次の行に置き、区切りの「｜」が行頭に来ないようにする */
@media (max-width: 860px) {
  .sub-stage { display: block; }
  .sub-sep { display: none; }
}
/* 表の中の入力欄（運営のスキル辞書・設定の行の編集）。ブラウザの既定の見た目で高さ22pxしかなく、押しにくかったため枠と高さを付ける（2026-11-04） */
.table input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]) { font: inherit; font-size: 14px; border: 1px solid var(--rule); background: var(--white); padding: 6px 8px; min-height: 36px; outline: none; }
.table input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]):focus { border-color: var(--ink); }
@media (max-width: 860px) {
  .table input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]) { min-height: 40px; }
}

/* 登録直後の画面の「次の機能をご利用いただけます」（2026-11-05 岩崎「最初の1-3で画面おおいすぎてる。サイズを3分の1とかに小さくして、プロフィールの入力方法を決める画面がすぐ見えるようにして」）。スマホでは番号と見出しの1行ずつに縮め、補足の文は出さない */
@media (max-width: 860px) {
  .ob-value { margin: 0 0 24px; }
  .ob-value h2 { font-size: 14px; line-height: 1.6; margin: 0 0 8px; }
  .ob-value-list { gap: 6px; }
  .ob-value-list li { display: grid; grid-template-columns: 26px 1fr; align-items: baseline; gap: 0 6px; padding: 9px 12px; border-radius: 6px; }
  .ob-value-list li::before { font-size: 15px; }
  .ob-value-list li strong { font-size: 13px; line-height: 1.55; }
  .ob-value-list li > span { display: none; }
}

/* スキルの候補の一覧（2026-11-05。iPhoneのSafariは datalist を入力欄の下に出さないため、自前で出す） */
.skill-add { position: relative; }
.skill-suggest { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30; list-style: none; margin: 0; padding: 4px 0; background: var(--white); border: 1px solid var(--rule); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12); max-height: 320px; overflow-y: auto; }
.skill-suggest li { padding: 10px 14px; font-size: 15px; line-height: 1.5; cursor: pointer; }
.skill-suggest li:hover, .skill-suggest li.is-active { background: var(--ink-pale); color: var(--ink-deep); }
@media (max-width: 860px) {
  .skill-suggest li { padding: 12px 14px; min-height: 44px; }
}

/* AIの推薦の設定の欄：太字の見出しと、何をする欄かの一文（2026-11-06 岩崎） */
.field.ai-setting { margin-top: 8px; }
.field > label.ai-setting-title { font-size: 16px; font-weight: 700; letter-spacing: 0.02em; color: var(--black); }
.ai-setting-desc { font-size: 13px; line-height: 1.7; color: var(--body); margin: 2px 0 8px; }

/* 保存などの結果の知らせ：画面の上に重ねて出す（2026-11-06 岩崎） */
.toast { position: fixed; top: calc(var(--header-h, 64px) + 8px); left: 50%; transform: translateX(-50%); z-index: 1000; width: max-content; max-width: min(560px, calc(100% - 32px)); display: flex; align-items: flex-start; gap: 10px; padding: 14px 14px 14px 16px; background: var(--white); color: var(--body); border: 1px solid var(--rule); border-left: 4px solid var(--ok); box-shadow: 0 8px 24px rgba(10, 10, 10, 0.12); font-size: 14px; line-height: 1.6; animation: toast-in 0.25s ease-out; transition: opacity 0.3s, transform 0.3s; }
.toast.ok::before { content: '✓'; color: var(--ok); font-weight: 700; }
.toast.error { border-left-color: var(--danger); }
.toast.error::before { content: '!'; color: var(--danger); font-weight: 700; }
/* 受け付けたが確かめてほしいことが残る知らせ（選考状況の相違など。2026-11-10 点検）。閉じるまで残す */
.toast.warn { border-left-color: var(--warn); }
.toast.warn::before { content: '!'; color: var(--warn); font-weight: 700; }
.toast-msg { flex: 1; }
.toast-close { background: none; border: 0; color: var(--muted); font-size: 18px; line-height: 1; padding: 0 2px; cursor: pointer; }
.toast.hide { opacity: 0; transform: translate(-50%, -12px); pointer-events: none; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, -12px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; transition: none; } }

/* 生年月日の年・月・日の選択欄（2026-11-06） */
.date-select { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.date-select select { width: 100%; min-width: 0; }

/* 登録のリンクを開いた画面で、入力方法の選択肢をボタンにしたとき（2026-11-06） */
button.ob-choice { font: inherit; text-align: left; width: 100%; cursor: pointer; }
.link-button { font: inherit; color: var(--ink); background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }

/* スマホの画面下のタブ（2026-11-06）。パソコンの幅では出さず、上のメニューを使う */
.tabbar { display: none; }
@media (max-width: 860px) {
  .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--white); border-top: 1px solid var(--rule); padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -2px 10px rgba(20, 34, 92, 0.05); }
  .tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px; padding: 6px 0 5px; color: var(--muted); text-decoration: none; font-size: 12px; line-height: 1.2; }
  .tabbar a.current { color: var(--ink); font-weight: 700; }
  .tabbar a.current .tabbar-icon svg { stroke-width: 2.1; }
  .tabbar-icon { position: relative; display: inline-flex; }
  .tabbar-count { position: absolute; top: -4px; left: 14px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--danger, #c0392b); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; }
  .tabbar-label { white-space: nowrap; }
  body.has-tabbar { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
  body.has-tabbar .assist-dock { bottom: calc(72px + env(safe-area-inset-bottom)); }
  /* 下に保存のボタンが固定される入力の画面では、ボタンと重なるため出さない */
  body.has-tabbar:has(form.sticky-actions) { padding-bottom: 0; }
  body.has-tabbar:has(form.sticky-actions) .tabbar { display: none; }
  body.has-tabbar:has(form.sticky-actions) .assist-dock { bottom: 84px; }
}

/* 押すと開くやり方の案内（2026-11-06） */
.howto { margin: 4px 0 20px; font-size: 14px; }
.howto summary { cursor: pointer; list-style: none; color: var(--body); }
.howto summary::-webkit-details-marker { display: none; }
.howto-link { margin-left: 6px; color: var(--ink); text-decoration: underline; font-weight: 500; }
.howto-link::after { content: ' ▾'; font-size: 11px; }
.howto[open] .howto-link::after { content: ' ▴'; }
.howto ol { margin: 8px 0 0; padding: 12px 12px 12px 32px; background: var(--off, #f6f6f4); }
.howto ol li + li { margin-top: 4px; }
.howto-strong summary { font-weight: 700; }

/* AIアシスタントを開いている間、スマホでは後ろのページを動かさない（2026-11-06） */
@media (max-width: 860px) {
  body.assist-locked { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }
  body.assist-locked .assist-dock { display: none; }
  /* 下のタブは開いている間も使える（2026-11-07）。入力中だけ隠す */
  body.assist-locked.typing .tabbar { display: none; }
  body.assist-locked.has-tabbar:not(.typing) .assist.open { height: calc(100dvh - 56px - env(safe-area-inset-bottom)); max-height: calc(100dvh - 56px - env(safe-area-inset-bottom)); }
  /* 下に保存のボタンを固定する画面ではタブを出さないため、パネルで画面全体を覆い、保存のボタンも隠す（誤って公開しないように。2026-11-09 点検） */
  body.assist-locked.has-tabbar:has(form.sticky-actions):not(.typing) .assist.open { height: 100dvh; max-height: 100dvh; }
  body.assist-locked form.sticky-actions > .form-actions:last-child { display: none; }
  .assist.open { top: 0; }
}

/* スマホでは、保存のボタンの列をフォームの中に留めず、画面の下に固定する（2026-11-06 岩崎「一番下までついてこない、途中で真ん中にくる」）。
   フォームの後に職歴などが続く画面では、フォームの終わりでボタンが止まり、画面の途中に浮いて見えていた。
   フォームを過ぎて別のフォーム（職歴、AIの推薦の設定）に入ったら、違うフォームを保存するボタンに見えないよう隠す（app.js が form-past を付ける）。
   横向きのiPhone（幅860pxまで）も同じ扱いにする */
@media (max-width: 860px) {
  .form.sticky-actions > .form-actions:last-child, form.sticky-actions > .form-actions:last-child {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; margin: 0;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--rule); box-shadow: 0 -2px 10px rgba(20, 34, 92, 0.06);
  }
  body:has(form.sticky-actions) main { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  body:has(form.sticky-actions) .assist-dock { bottom: calc(84px + env(safe-area-inset-bottom)); }
  /* キーボードを開いて入力している間は、ボタンの列が入力欄に重ならないよう隠す（app.js が付ける） */
  body.typing form.sticky-actions > .form-actions:last-child, form.sticky-actions.form-past > .form-actions:last-child { display: none; }
  body:has(form.sticky-actions) .page-body { padding-bottom: 24px; }
  /* メニューを開いている間は、下のタブを隠す（暗くした面の上に出て押せてしまうため） */
  body.nav-open .tabbar { display: none; }
  /* 保存の結果の知らせは、ヘッダーのロゴとメニューに重ねない（PCも同じにした。2026-11-10 点検 C-4。上の .toast の既定の位置） */
  .toast { top: calc(var(--header-h, 64px) + 8px); }
  /* AIアシスタントの入力欄は、案内の文が2行でも切れない高さにする */
  .assist-form textarea { min-height: 84px; }
}

/* 指で押しにくい小さなボタンを、押せる大きさにする（2026-11-06 点検） */
@media (max-width: 860px) {
  .skill-remove { min-width: 40px; min-height: 40px; }
  .page-sub-more { min-height: 44px; }
  button.linklike.small { min-height: 44px; padding: 8px 0; }
}

/* ご紹介の状態の1行（2026-11-07 岩崎のレビュー13）。止まっているときは注意の色で、理由と本人ができることを並べる */
.intro-state { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 14px; margin-bottom: 16px; border: 1px solid var(--rule); border-left: 3px solid var(--ok); background: var(--white); font-size: 14px; }
.intro-state-label { flex: none; font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--muted); }
.intro-state-text { flex: 1 1 240px; min-width: 0; }
.intro-state.is-blocked { border-left-color: var(--warn); background: var(--warn-pale); }
.intro-state.is-blocked .intro-state-text { color: var(--warn); }
.intro-state .inline-form, .intro-state > .btn { flex: none; }

/* ホームの選考の行に置くボタン（内定への回答、選考状況の確定。2026-11-07 岩崎のレビュー12・17） */
.progress-item.has-actions .title { display: inline-block; color: var(--black); text-decoration: none; }
.progress-item.has-actions a.title:hover { color: var(--ink); }
.progress-item.has-actions .actions { margin-top: 10px; }
.progress-item .row-note { color: var(--ink); font-size: 12px; margin-top: 2px; }
.next-step-body { flex: 1; min-width: 0; }
.next-step .offer-actions { margin-top: 10px; }

/* 必須の項目が済んだ後のプロフィールの1行（2026-11-07 岩崎のレビュー18） */
.profile-line { margin-top: 24px; padding-top: 12px; border-top: 1px solid var(--rule); color: var(--muted); }
.profile-line strong { color: var(--body); font-weight: 600; margin-right: 4px; }
.profile-line a { margin-left: 8px; }

@media (max-width: 640px) {
  .intro-state > .btn, .intro-state .inline-form { flex: 1 1 100%; }
  .intro-state > .btn, .intro-state .inline-form .btn { width: 100%; }
}

/* 運営の「広告の成果」：キャンペーンごとの説明と、広告の画像・条件・文 */
.ad-campaign + .ad-campaign { margin-top: 28px; }
.ad-about { display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; margin: 0 0 10px; }
.ad-about dt { color: var(--muted); }
.ad-about dd { margin: 0; }
.ad-cell { display: flex; gap: 10px; align-items: flex-start; min-width: 280px; max-width: 420px; }
.ad-thumb { width: 72px; height: auto; border: 1px solid var(--rule); flex: none; }
.ad-tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }

/* 面接の候補日（日付・時・分を別々に選ぶ。2026-11-09 岩崎） */
.slot-parts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.slot-parts input[type=date] { flex: 1 1 160px; min-width: 0; }
.slot-parts select { flex: 0 0 auto; width: auto; min-width: 84px; }
/* スマホの幅では「日付＋時」と「分」が別の行に割れ、どの分がどの日付の行か分からなかった（2026-11-10 点検 C1）。
   日付を1行目に全幅で置き、時と分を2行目に並べ、候補日の行どうしを罫線で区切る */
@media (max-width: 500px) {
  .slot-parts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .slot-parts input[type=date] { grid-column: 1 / -1; width: 100%; }
  .slot-parts select { width: 100%; min-width: 0; }
  #slot-list .slot-input + .slot-input { border-top: 1px solid var(--rule); padding-top: 12px; }
}

/* 保存のボタンの上の線は、本文の上に重なって留まっているときだけ出す（2026-11-09 岩崎「この線、意味ないならけして」） */
form.sticky-actions > .form-actions.is-stuck { border-top-color: var(--rule); }

/* 職種を1つ選ぶ欄（求人の作成。2026-11-09） */
.catpick-field { display: grid; gap: 8px; position: relative; min-width: 0; }
.catpick > summary { max-width: 28em; min-width: 16em; }
.catpick-other { border-top: 1px solid var(--rule); padding-top: 8px; margin-top: 8px; }
.catpick-other-input input { max-width: 28em; width: 100%; }
@media (max-width: 640px) { .catpick > summary { min-width: 0; max-width: none; } }
.form-grid > .form-heading { margin-top: 28px; }
.form-grid > .form-heading:first-of-type, .form-grid > .form-heading:first-child { margin-top: 0; }
.form-heading .form-section-title { margin-bottom: 4px; }
.work-group > .form-heading { margin-top: 28px; }

/* 設定の画面の「自分のAIとの接続」（2026-11-09） */
.ai-h { font-size: 15px; font-weight: 600; color: var(--ink-deep); margin: 24px 0 8px; }
.ai-url { display: flex; gap: 8px; align-items: center; margin: 8px 0 16px; }
.ai-url input { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; padding: 8px 10px; border: 1px solid var(--rule); background: var(--white); }
.ai-steps { border: 1px solid var(--rule); padding: 10px 14px; margin: 0 0 10px; }
.ai-steps summary { cursor: pointer; font-weight: 600; }
.ai-steps ol { margin: 10px 0 6px; padding-left: 1.4em; }
.ai-steps li { margin: 4px 0; }