/* マカセルAIスコープ 共通スタイル（スマートフォン優先） */
:root {
  --bg: #f5f6f8;
  --surface: #ffffff;
  --text: #1f2430;
  --muted: #6b7280;
  --border: #dfe3ea;
  --primary: #2457c5;
  --primary-hover: #1c46a0;
  --danger: #c0392b;
  --success-bg: #e8f5ec;
  --success-text: #1e6b3a;
  --error-bg: #fdecea;
  --error-text: #9b2c22;
  --info-bg: #eaf1fd;
  --info-text: #1d4f9c;
  --warn-bg: #fff6e0;
  --warn-text: #8a5a00;
  --radius: 10px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
  font-size: 16px;
  line-height: 1.7;
}
a { color: var(--primary); }
h1 { font-size: 1.4rem; margin: 0 0 16px; }
h2 { font-size: 1.1rem; margin: 0 0 12px; }
code { background: #eef1f6; padding: 1px 6px; border-radius: 4px; font-size: .9em; }

.container { max-width: 1040px; margin: 0 auto; padding: 20px 16px 48px; }
.container.narrow { max-width: 520px; }
.brand { font-weight: 700; color: var(--primary); margin: 8px 0 20px; text-align: center; }

.topbar { background: var(--surface); border-bottom: 1px solid var(--border); }
.topbar-inner { max-width: 1040px; margin: 0 auto; padding: 10px 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.brand-link { font-weight: 700; color: var(--primary); text-decoration: none; }
.company { color: var(--muted); font-size: .9rem; }
.nav { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; font-size: .95rem; }
.nav a { text-decoration: none; }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin-bottom: 20px; }
.page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.page-head h1 { margin: 0; }

.form { display: flex; flex-direction: column; gap: 16px; }
.form h2 { margin: 8px 0 0; }
.form p { margin: 0; }
.form > .btn:not(.btn-block) { align-self: flex-start; }
.form label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: .95rem; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=url], input[type=tel], input[type=search],
input[type=date], input[type=time], input[type=datetime-local], input[type=month], select, textarea {
  font: inherit; font-weight: 400; width: 100%; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 8px; background: #fff; color: var(--text);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--primary); outline-offset: 1px; border-color: var(--primary); }
/* 日付・時刻の入力欄も、ほかの入力欄と同じ高さ・見た目にする */
input[type=date], input[type=time], input[type=datetime-local], input[type=month] { line-height: 1.7; padding-top: 9px; padding-bottom: 9px; appearance: none; -webkit-appearance: none; }
input[type=datetime-local]::-webkit-calendar-picker-indicator, input[type=date]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .65; }
.hint { font-weight: 400; font-size: .85rem; color: var(--muted); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: inherit; font-weight: 600; padding: 10px 18px; min-height: 44px;
  border-radius: 8px; border: 1px solid var(--border); background: #fff; color: var(--text);
  cursor: pointer; text-decoration: none;
}
.btn:hover { background: #f0f2f6; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-hover); }
.btn-danger { color: var(--danger); border-color: #efc4bf; }
.btn-small { padding: 4px 12px; min-height: 32px; font-size: .85rem; }
.btn-block { width: 100%; }
button.link { background: none; border: none; color: var(--primary); font: inherit; cursor: pointer; padding: 0; }
form.inline { display: inline; }

.flash { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-size: .95rem; }
.flash-success { background: var(--success-bg); color: var(--success-text); }
.flash-error { background: var(--error-bg); color: var(--error-text); }
.flash-info { background: var(--info-bg); color: var(--info-text); }
.notice { background: var(--warn-bg); color: var(--warn-text); padding: 14px 16px; border-radius: 8px; margin-bottom: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }

.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.table th, .table td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--border); vertical-align: middle; white-space: nowrap; }
.table th { color: var(--muted); font-weight: 600; font-size: .85rem; }
.actions { display: flex; gap: 6px; }

.badge { display: inline-block; font-size: .8rem; padding: 2px 10px; border-radius: 999px; background: #eef1f6; color: var(--muted); white-space: nowrap; }
.badge-warn { background: var(--warn-bg); color: var(--warn-text); }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 20px; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; }
.stat-label { color: var(--muted); font-size: .85rem; }
.stat-value { font-size: 1.6rem; font-weight: 700; }

.list { list-style: none; margin: 0; padding: 0; }
.list-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.list-item:last-child { border-bottom: none; }

/* インストーラー */
.container.install { max-width: 680px; }
.steps { list-style: none; margin: 0 0 20px; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.steps li { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; font-size: .75rem; color: var(--muted); }
.steps-num { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); background: #fff; font-weight: 700; }
.steps li.done .steps-num { background: var(--success-bg); color: var(--success-text); border-color: var(--success-bg); }
.steps li.current { color: var(--text); font-weight: 700; }
.steps li.current .steps-num { background: var(--primary); color: #fff; border-color: var(--primary); }
@media (max-width: 520px) { .steps-label { display: none; } .steps li.current .steps-label { display: block; } }
.checks { list-style: none; margin: 0 0 20px; padding: 0; }
.check { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.check-mark { width: 24px; height: 24px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; }
.check.ok .check-mark { background: var(--success-bg); color: var(--success-text); }
.check.ng .check-mark { background: var(--error-bg); color: var(--error-text); }
.check.warn .check-mark { background: var(--warn-bg); color: var(--warn-text); }
.check-detail { display: block; }
.badge-ng { background: var(--error-bg); color: var(--error-text); }
.form-actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 8px; }
.inline-check { display: flex !important; flex-direction: row !important; align-items: center; gap: 8px; font-weight: 400 !important; }
.notice-ai { background: var(--info-bg); color: var(--info-text); padding: 12px 16px; border-radius: 8px; font-size: .9rem; }
.table.summary th { width: 9em; vertical-align: top; }
.table.summary td { white-space: normal; }

.muted { color: var(--muted); }
.small { font-size: .875rem; }

/* 第2段階：テスト・受検者 */
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 720px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
.grid-2.top { align-items: start; }
.grid-2 > .card { margin-bottom: 0; }
.grid-2.top { margin-bottom: 20px; }
.actions-wrap { display: flex; flex-wrap: wrap; gap: 8px; }
.table td.wrap { white-space: normal; }
.row-error td { background: #fff7f6; }

.status-generating { background: var(--info-bg); color: var(--info-text); }
.status-review { background: var(--warn-bg); color: var(--warn-text); }
.status-published { background: var(--success-bg); color: var(--success-text); }
.status-closed { background: #eef1f6; color: var(--muted); }
.status-failed { background: var(--error-bg); color: var(--error-text); }
h1 .badge { vertical-align: middle; font-size: .8rem; }

.progress { height: 12px; background: #eef1f6; border-radius: 999px; overflow: hidden; margin: 8px 0; }
.progress-bar { height: 100%; background: var(--primary); border-radius: 999px; transition: width .4s ease; }

.questions { list-style: none; margin: 0; padding: 0; }
.question { padding: 16px 0; border-bottom: 1px solid var(--border); }
.question:last-child { border-bottom: none; }
.question-head { display: flex; align-items: flex-start; gap: 12px; }
.question-no { flex: none; width: 28px; height: 28px; border-radius: 50%; background: #eef1f6; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; }
.question-text { margin: 0; flex: 1; font-weight: 600; }
.choices { list-style: none; margin: 8px 0 0 40px; padding: 0; display: grid; gap: 4px; font-size: .95rem; }
.choice-letter { display: inline-block; width: 1.6em; font-weight: 700; color: var(--muted); }
.style-tag { display: inline-block; font-size: .75rem; padding: 0 8px; border-radius: 999px; margin-left: 6px; white-space: nowrap; }
.style-red { background: #fde8e6; color: #a02a1e; }
.style-yellow { background: #fdf3d3; color: #7a5a00; }
.style-green { background: #e3f4e8; color: #1e6b3a; }
.style-blue { background: #e4eefc; color: #1d4f9c; }

/* 第3段階：受検 */
.step-label { color: var(--primary); font-weight: 700; font-size: .85rem; margin: 0 0 4px; }
.consent-list { padding-left: 1.4em; margin: 0 0 20px; display: grid; gap: 12px; }
.consent-list .notice-ai { display: block; margin-top: 6px; }
.big-check { font-size: 1rem; padding: 12px; background: var(--bg); border-radius: 8px; }
.big-check input { width: 22px; height: 22px; }
.place-choices { display: grid; gap: 12px; margin-top: 16px; }
.place-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; font: inherit; padding: 20px; border: 2px solid var(--border); border-radius: var(--radius); background: var(--surface); cursor: pointer; min-height: 88px; }
.place-btn:hover, .place-btn:focus-visible { border-color: var(--primary); outline: none; }
.place-title { font-size: 1.15rem; font-weight: 700; }
.place-sub { color: var(--muted); font-size: .9rem; }
.intro-list { padding-left: 1.2em; display: grid; gap: 10px; margin: 0 0 24px; }
.btn-large { min-height: 56px; font-size: 1.1rem; }
.center { text-align: center; }
.done-mark { width: 64px; height: 64px; margin: 8px auto 12px; border-radius: 50%; background: var(--success-bg); color: var(--success-text); font-size: 2rem; display: flex; align-items: center; justify-content: center; }
.exam-item .btn { flex: none; }

.page-exam { background: var(--surface); }
.exam-wrap { max-width: 560px; margin: 0 auto; padding: 16px 16px 32px; min-height: 100vh; min-height: 100dvh; }
.exam-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: .85rem; color: var(--muted); }
.exam-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exam-progress { font-weight: 700; color: var(--text); font-size: 1rem; flex: none; }
.gauge { height: 10px; background: #eef1f6; border-radius: 999px; overflow: hidden; margin-top: 10px; }
.gauge-bar { height: 100%; width: 100%; background: var(--primary); border-radius: 999px; }
.gauge-bar.low { background: #d9822b; }
.exam-seconds { text-align: right; font-size: .85rem; color: var(--muted); margin: 4px 0 0; font-variant-numeric: tabular-nums; }
.exam-scenario { font-size: 1.15rem; font-weight: 700; line-height: 1.7; margin: 16px 0 20px; min-height: 5.1em; }
.exam-scenario.fade { animation: fadein .25s ease; }
@keyframes fadein { from { opacity: .2; } to { opacity: 1; } }
.exam-choices { display: grid; gap: 10px; }
.exam-choice { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 12px 14px; font: inherit; font-size: 1rem; text-align: left; color: var(--text); background: var(--surface); border: 2px solid var(--border); border-radius: 12px; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.exam-choice:not(:disabled):active { background: var(--info-bg); }
.exam-choice:disabled { cursor: default; opacity: .6; }
.exam-choice.selected { border-color: var(--primary); background: var(--info-bg); opacity: 1; }
.exam-letter { flex: none; width: 32px; height: 32px; border-radius: 50%; background: #eef1f6; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.exam-choice.selected .exam-letter { background: var(--primary); color: #fff; }
.exam-error { margin-top: 20px; padding: 16px; border-radius: 8px; background: var(--error-bg); color: var(--error-text); }
.exam-error p { margin: 0 0 12px; }
@media (prefers-reduced-motion: reduce) { .exam-scenario.fade { animation: none; } }

/* 第4段階：結果 */
h3 { font-size: 1rem; margin: 16px 0 6px; }
.reference-notice { background: var(--warn-bg); color: var(--warn-text); padding: 10px 14px; border-radius: 8px; font-size: .9rem; font-weight: 600; }
.sort a, .sort strong { margin-left: 8px; }
.primary-style { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 1.15rem; margin: 0 0 16px; }
.style-chip { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.score-bars { display: grid; gap: 10px; margin-bottom: 8px; }
.score-row { display: grid; grid-template-columns: 4.5em 1fr 2.5em; align-items: center; gap: 10px; font-size: .9rem; }
.score-label { color: var(--text); }
.score-track { height: 14px; background: #f0f2f5; border-radius: 4px; overflow: hidden; }
.score-bar { display: block; height: 100%; border-radius: 0 4px 4px 0; }
.score-value { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }
.match-big { margin: 0 0 8px; font-size: 1rem; }
.match-big strong { font-size: 2.6rem; line-height: 1; font-variant-numeric: tabular-nums; }
.plain-list { margin: 0 0 8px; padding-left: 1.2em; display: grid; gap: 4px; }
.items { margin: 0; }
.items dt { font-weight: 700; margin-top: 10px; }
.items dt:first-child { margin-top: 0; }
.items dd { margin: 2px 0 0; color: var(--text); }
.match-cell { display: inline-flex; align-items: center; gap: 8px; }
.match-mini { width: 60px; height: 6px; background: #eef1f6; border-radius: 3px; overflow: hidden; display: inline-block; }
.match-mini span { display: block; height: 100%; background: var(--primary); }
.stats.compact .stat-value { font-size: 1.2rem; }
.table.answers td:first-child { width: 3em; }

/* 運営者：利用状況（S-03）・パスワード変更 */
.card.narrow { max-width: 520px; }
.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; }
.text-danger { color: var(--danger); }
.month-picker { display: inline-flex; align-items: center; gap: 6px; }
.month-picker select { width: auto; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table.usage th.num { line-height: 1.3; }
.table.usage tfoot th, .table.usage tfoot td { font-weight: 700; border-top: 2px solid var(--border); border-bottom: none; }
.table.usage tr.is-selected td { background: var(--surface-alt, rgba(47, 98, 201, .06)); }
.stat .small { margin-top: 4px; }
.card .page-head h2 { margin: 0; }

/* 性格（ビッグファイブ）とストレス耐性 */
.trait-bars .score-row { grid-template-columns: 5.5em 1fr 2.5em; }
.trait-bar { background: #5b57a6; }
.score-track { position: relative; }
.trait-bars .score-track::after, .score-track.single::after { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: #9aa1ad; }
.score-track.single { display: block; margin: 4px 0 6px; }
.badge-level { background: #ecebf6; color: #3f3b85; font-weight: 700; vertical-align: middle; margin-left: 6px; }
.badge-stress { background: #fdeee6; color: #9a3d12; }
.items.compact dt { font-size: .95rem; }
.items.compact dt .small { font-weight: 400; }
.table.compare th { font-weight: 600; color: var(--text); }
.table.compare thead th { color: var(--muted); }
.card h3 { font-size: 1rem; margin: 18px 0 6px; }

/* 長めの問題文（制限時間25〜50秒）でも、小さいスマホで4つの選択肢が1画面に収まるようにする */
@media (max-width: 480px) {
  .exam-wrap { padding-top: 12px; padding-bottom: 16px; }
  .exam-scenario { font-size: 1.02rem; line-height: 1.6; margin: 12px 0 14px; }
  .exam-choices { gap: 8px; }
  .exam-choice { min-height: 52px; padding: 8px 12px; font-size: .95rem; line-height: 1.5; gap: 10px; }
  .exam-letter { width: 28px; height: 28px; }
}

/* 結果詳細：キャッチコピー・リード文・行動スタイルの円グラフ */
.catchcopy { margin: 6px 0 4px; font-size: 1.25rem; font-weight: 700; color: #3f3b85; line-height: 1.5; }
.catchcopy::before { content: "「"; }
.catchcopy::after { content: "」"; }
.catchcopy-mini { display: block; font-size: .8rem; color: var(--muted); white-space: normal; max-width: 16em; }
.lead { margin: -4px 0 12px; font-weight: 700; color: var(--text); line-height: 1.6; padding-left: 10px; border-left: 3px solid #5b57a6; }
.donut-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-bottom: 8px; }
.donut { flex: none; display: block; }
.donut-center-top { font-size: 30px; font-weight: 700; fill: var(--text); font-variant-numeric: tabular-nums; }
.donut-center-bottom { font-size: 15px; fill: var(--muted); }
.donut-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; flex: 1 1 12em; min-width: 12em; }
.donut-legend li { display: flex; align-items: center; gap: 8px; }
.donut-legend .legend-name { flex: 1; }
.donut-legend .legend-value { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 3em; text-align: right; }
.donut-legend li.is-primary .legend-name { font-weight: 700; }

/* 結果詳細：行動スタイル欄（キャッチコピー・人物評価・相性の例） */
.style-card .catchcopy-heading { font-size: 1.1rem; font-weight: 700; line-height: 1.5; color: #3f3b85; margin: -4px 0 10px; }
.catchcopy-heading::before { content: "「"; }
.catchcopy-heading::after { content: "」"; }
.style-main { display: grid; grid-template-columns: 1fr; gap: 12px 32px; align-items: center; }
@media (min-width: 860px) { .style-main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.style-profile h3 { margin-top: 0; }
.style-profile p { margin: 0; line-height: 1.8; }
.compat { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
@media (min-width: 720px) { .compat { grid-template-columns: 1fr 1fr; } }
.compat-item h3 { margin: 0 0 8px; display: flex; align-items: center; gap: 6px; }
.compat-mark { display: inline-flex; width: 1.6em; height: 1.6em; align-items: center; justify-content: center; border-radius: 50%; font-size: .85rem; }
.compat-good .compat-mark { background: #e3f3ea; color: #1f6b43; }
.compat-bad .compat-mark { background: #fdeee6; color: #9a3d12; }
.compat-body { display: flex; gap: 14px; align-items: center; }
.compat-body .donut { width: 120px; height: 120px; }
.compat-type { margin: 0 0 2px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.compat-pct { margin: 0 0 6px; }
.compat-reason { margin: 0; line-height: 1.7; }
@media (max-width: 420px) { .compat-body { flex-direction: column; align-items: flex-start; } }

/* 管理画面・運営画面：左の紺のメニュー（色・ボタンは今の青のまま） */
:root { --navy: #0b1b2b; --navy-2: #16283d; --navy-line: #24405c; --on-dark: #d3dae3; --on-dark-sub: #9fb0c2; --sidebar-w: 240px; }
.ico { width: 1.2em; height: 1.2em; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.skip-link { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--navy); color: #fff; padding: 8px 14px; border-radius: 8px; font-weight: 700; text-decoration: none; }
.skip-link:focus { top: 8px; }
.shell-sidebar {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 20; width: var(--sidebar-w); overflow-y: auto;
  background: var(--navy); color: var(--on-dark); display: flex; flex-direction: column; padding: 16px 12px; font-size: .95rem; line-height: 1.5;
}
.shell-name { color: #fff; font-weight: 700; text-decoration: none; font-size: 1.05rem; }
.shell-name span { font-size: .8rem; font-weight: 700; color: #8fc1f5; margin-left: 4px; }
.shell-name-side { display: block; padding: 6px 10px 14px; }
.shell-group { margin: 14px 10px 6px; font-size: .78rem; font-weight: 700; color: var(--on-dark-sub); }
.shell-nav { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 10px; border-radius: 8px; color: var(--on-dark); text-decoration: none; }
.shell-nav:hover { background: var(--navy-2); color: #fff; }
.shell-nav[aria-current="page"] { background: rgba(36, 87, 197, .45); color: #fff; font-weight: 700; box-shadow: inset 3px 0 0 #8fc1f5; }
.shell-sidebar :focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.shell-foot { margin-top: auto; border-top: 1px solid var(--navy-line); padding: 14px 10px 4px; display: flex; flex-direction: column; gap: 4px; font-size: .85rem; }
.shell-org { color: #fff; font-weight: 700; }
.shell-who { color: var(--on-dark-sub); }
.shell-foot form { margin-top: 8px; }
.shell-aside { margin: 20px 0 0; margin-top: auto; padding: 14px 12px; border: 1px solid var(--navy-line); border-radius: 10px; background: var(--navy-2); font-size: .8rem; line-height: 1.6; }
.shell-aside ~ .shell-foot { margin-top: 12px; }
/* メニューが画面に収まらないときも、ログイン中の人とログアウトは下に見えたままにする */
.shell-foot { position: sticky; bottom: -16px; margin-bottom: -16px; padding-bottom: 16px; background: var(--navy); }
.shell-aside-title { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; color: #fff; font-weight: 700; font-size: .88rem; }
.shell-aside-title .ico { color: #8fc1f5; }
.shell-aside-text { margin: 0 0 8px; color: var(--on-dark); word-break: auto-phrase; }
@media (min-width: 1024px) { .shell-nav { min-height: 40px; } .shell-group { margin-top: 12px; } }
.shell-aside-list { list-style: none; margin: 0 0 6px; padding: 0; }
.shell-aside-list li { position: relative; padding: 2px 0 2px 12px; color: #fff; font-weight: 600; line-height: 1.4; }
.shell-aside-list li::before { content: ""; position: absolute; left: 0; top: .72em; width: 5px; height: 5px; border-radius: 50%; background: #8fc1f5; }
.shell-aside-list span { display: block; font-weight: 400; font-size: .72rem; color: var(--on-dark-sub); }
.shell-aside-link { display: inline-block; color: #8fc1f5; font-weight: 700; text-underline-offset: 3px; }
.shell-aside-link:hover { color: #fff; }
.btn-on-dark { background: transparent; border-color: rgba(255, 255, 255, .7); color: #fff; }
.btn-on-dark:hover { background: #fff; color: var(--navy); }
.shell-main { margin-left: var(--sidebar-w); min-width: 0; }
.shell-topbar { display: none; }
@media (max-width: 1023px) {
  .shell-main { margin-left: 0; }
  .shell-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: sticky; top: 0; z-index: 30; min-height: 56px; padding: 6px 12px 6px 16px; background: var(--navy); }
  .shell-menu-btn { display: none; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .7); background: transparent; color: #fff; font: inherit; font-weight: 600; font-size: .9rem; cursor: pointer; }
  /* JavaScript が動かないときは、メニューを本文の上にそのまま並べる */
  .shell-sidebar { position: static; width: auto; }
  .shell-name-side { display: none; }
  .js .shell-menu-btn { display: inline-flex; }
  .js .shell-sidebar { display: none; position: fixed; top: 56px; left: 0; right: 0; bottom: 0; }
  .js.nav-open .shell-sidebar { display: flex; }
  .js.nav-open body { overflow: hidden; }
}

/* ヘルプ */
.help-lead { font-size: 1rem; line-height: 1.8; margin: 0 0 20px; }
.help-toc ol { margin: 0; padding-left: 1.6em; }
.help-toc li { margin-bottom: 6px; break-inside: avoid; }
@media (min-width: 720px) { .help-toc ol { columns: 2; column-gap: 40px; } }
.help-section { scroll-margin-top: 72px; }
.help-section h3 { margin: 20px 0 8px; }
.help-section > p { line-height: 1.8; }
.help-steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: 12px; }
.help-steps > li { counter-increment: step; position: relative; padding-left: 40px; line-height: 1.7; }
.help-steps > li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--primary); color: #fff; font-weight: 700; font-size: .85rem; display: flex; align-items: center; justify-content: center; }
.help-steps > li > span { display: block; color: var(--muted); font-size: .92rem; }
.help-points { margin: 8px 0 0; padding-left: 1.3em; display: grid; gap: 8px; line-height: 1.7; }
.help-note { background: var(--info-bg); color: var(--info-text); padding: 10px 14px; border-radius: 8px; font-size: .92rem; line-height: 1.7; }
.faq { display: grid; gap: 8px; }
.faq details { border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.faq summary { cursor: pointer; padding: 12px 40px 12px 14px; font-weight: 700; position: relative; list-style: none; min-height: 44px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "＋"; position: absolute; right: 14px; top: 11px; color: var(--muted); }
.faq details[open] summary::after { content: "−"; }
.faq details > p { margin: 0; padding: 0 14px 14px; line-height: 1.8; }

/* ---- AIの返事待ち（動く印・経過時間・流れる進捗バー） ---- */
.ai-wait-card { border-color: #cfe0fb; background: linear-gradient(180deg, #f3f8ff 0%, var(--surface) 75%); }
.ai-wait { display: flex; align-items: center; gap: 16px; }
.ai-wait-body { min-width: 0; }
.ai-wait-title { margin: 0; font-size: 1.1rem; }
.ai-wait-note { margin: 2px 0 0; color: var(--muted); font-size: .9rem; }
.ai-elapsed { display: inline-block; margin-right: .8em; color: var(--info-text); font-weight: 700; font-variant-numeric: tabular-nums; }
.ai-orb { position: relative; flex: none; width: 48px; height: 48px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #6f9ff0, var(--primary) 72%); animation: ai-pulse 2s ease-out infinite; }
.ai-orb i { position: absolute; top: 50%; left: 50%; width: 7px; height: 7px; margin: -3.5px; border-radius: 50%; background: #fff; animation: ai-orbit 1.6s linear infinite; }
.ai-orb i:nth-child(2) { animation-delay: -.53s; opacity: .8; }
.ai-orb i:nth-child(3) { animation-delay: -1.07s; opacity: .6; }
.ai-dots { display: inline-flex; gap: 3px; margin-left: 6px; vertical-align: middle; color: var(--primary); }
.ai-dots i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .25; animation: ai-bounce 1.2s ease-in-out infinite; }
.ai-dots i:nth-child(2) { animation-delay: .2s; }
.ai-dots i:nth-child(3) { animation-delay: .4s; }
.ai-wait-card .progress { margin-top: 16px; }
.progress-live .progress-bar,
.progress-indeterminate .progress-bar {
  background-image: linear-gradient(45deg, rgba(255,255,255,.25) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.25) 50%, rgba(255,255,255,.25) 75%, transparent 75%);
  background-size: 24px 24px; animation: ai-stripes 1s linear infinite;
}
.progress-live .progress-bar { min-width: 24px; }
.progress-indeterminate { position: relative; }
.progress-indeterminate .progress-bar { position: absolute; top: 0; width: 35%; animation: ai-stripes 1s linear infinite, ai-slide 1.8s ease-in-out infinite; }

/* 小さな回転の印（バッジ・ボタン） */
.spinner { display: inline-block; flex: none; width: .9em; height: .9em; margin-right: .4em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; vertical-align: -.12em; animation: ai-spin .8s linear infinite; }
.badge-busy { background: var(--info-bg); color: var(--info-text); }
.status-generating::before { content: ""; display: inline-block; width: .8em; height: .8em; margin-right: .35em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; vertical-align: -.1em; animation: ai-spin .8s linear infinite; }
.btn.is-busy { pointer-events: none; opacity: .85; }

/* 作り直し中の問題：薄くして光を流す */
.question.is-regenerating { position: relative; overflow: hidden; }
.question.is-regenerating .question-text,
.question.is-regenerating .choices { opacity: .45; }
.question.is-regenerating::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 30%, rgba(234,241,253,.9) 50%, transparent 70%); background-size: 250% 100%; animation: ai-shimmer 1.8s ease-in-out infinite; }

@keyframes ai-spin { to { transform: rotate(360deg); } }
@keyframes ai-orbit { from { transform: rotate(0deg) translateX(13px); } to { transform: rotate(360deg) translateX(13px); } }
@keyframes ai-pulse { 0% { box-shadow: 0 0 0 0 rgba(36,87,197,.35); } 70% { box-shadow: 0 0 0 14px rgba(36,87,197,0); } 100% { box-shadow: 0 0 0 0 rgba(36,87,197,0); } }
@keyframes ai-bounce { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@keyframes ai-stripes { from { background-position: 0 0; } to { background-position: 24px 0; } }
@keyframes ai-slide { 0% { left: -35%; } 100% { left: 100%; } }
@keyframes ai-shimmer { from { background-position: 125% 0; } to { background-position: -25% 0; } }

/* 動きを減らす設定の人には、回転だけをゆっくり残す */
@media (prefers-reduced-motion: reduce) {
  .ai-orb, .ai-dots i, .progress-live .progress-bar, .question.is-regenerating::after { animation: none; }
  .ai-dots i { opacity: .6; }
  .ai-orb i { animation-duration: 4s; }
  .progress-indeterminate .progress-bar { animation: none; left: 0; width: 100%; opacity: .5; }
  .spinner, .status-generating::before { animation-duration: 2.4s; }
}
.evidence-list { display: grid; gap: 12px; margin: 16px 0 20px; }
.evidence-item { border: 1px solid var(--border); border-left: 4px solid var(--primary); border-radius: 8px; padding: 12px 16px; }
.evidence-item h3 { margin: 0 0 6px; font-size: 1rem; }
.evidence-item p { margin: 0 0 8px; line-height: 1.8; }
.evidence-cite { margin: 0; padding-left: 1.2em; font-size: .82rem; color: var(--muted); line-height: 1.6; overflow-wrap: anywhere; }
.evidence-cite li + li { margin-top: 4px; }

/* ---- 組織分析（職員・チームの診断・相性） ---- */
.card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 12px; }
.card-head h2 { margin: 0; }
.inline-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.inline-form input[type="text"], .inline-form select { width: auto; min-width: 10em; flex: 1 1 10em; max-width: 22em; margin: 0; }
.table .inline-form { margin: 0; flex-wrap: nowrap; }
.section-title { font-size: 1.1rem; margin: 28px 0 12px; }
.text-bad { color: #9a3d12; }
.org-report .catchcopy-heading, .org-fit .catchcopy-heading { font-size: 1.1rem; font-weight: 700; line-height: 1.5; color: #3f3b85; margin: 0 0 6px; }

.org-overview { display: grid; gap: 16px 24px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .org-overview { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
.org-donuts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.org-donuts figure { margin: 0; text-align: center; }
.org-donuts figcaption { font-size: .82rem; color: var(--muted); margin-top: 2px; }
.org-donuts .donut-legend { flex: 1 1 14em; }
.org-figures { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5em, 1fr)); gap: 10px; }
.org-figures .stat { margin: 0; }
.stat-value small { font-size: .78rem; font-weight: 600; color: var(--muted); }
.stat-text { font-size: 1rem !important; }
.stat-sub { display: block; font-size: .78rem; color: var(--info-text); margin-top: 2px; }
.org-mini-report { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--border); line-height: 1.8; }

.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.team-card { display: flex; flex-direction: column; gap: 6px; margin: 0; color: var(--text); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.team-card:hover { border-color: var(--primary); box-shadow: 0 2px 10px rgba(36, 87, 197, .12); }
.team-card h3 { margin: 0; font-size: 1.05rem; }
.team-card p { margin: 0; }
.team-card-body { display: flex; align-items: center; gap: 14px; }
.team-card-figures { list-style: none; margin: 0; padding: 0; font-size: .85rem; display: grid; gap: 2px; }
.team-card-report { font-size: .88rem; line-height: 1.6; }
.team-card-link { margin-top: auto; color: var(--primary); font-weight: 700; font-size: .9rem; }

.act-badge { font-weight: 700; }
.act-high, .act-badge.act-high { background: #e3f3ea; color: #1f6b43; }
.act-medium, .act-badge.act-medium { background: var(--info-bg); color: var(--info-text); }
.act-low, .act-badge.act-low { background: #fdeee6; color: #9a3d12; }
.activation { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; margin: 8px 0 16px; }
.activation-mark { flex: none; display: inline-flex; width: 2em; height: 2em; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, .7); font-weight: 700; }
.activation p { margin: 0; color: var(--text); }
.activation-label { font-size: 1rem; }
.activation-reason { margin-top: 4px !important; line-height: 1.7; }
.applicant-effect { border: 1px solid #cfe0fb; background: #f5f9ff; border-radius: 10px; padding: 12px 16px; margin: 0 0 16px; }
.applicant-effect h3 { margin: 0 0 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.applicant-effect p { margin: 4px 0 0; }
.fit-fills_gap { background: #e3f3ea; color: #1f6b43; }
.fit-reinforces { background: var(--info-bg); color: var(--info-text); }
.fit-friction { background: #fdeee6; color: #9a3d12; }
.org-actions { margin: 0; padding-left: 1.4em; display: grid; gap: 6px; line-height: 1.7; }
.applicant-banner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; background: #f5f9ff; border: 1px solid #cfe0fb; border-left: 4px solid var(--primary); border-radius: 8px; padding: 10px 14px; margin-bottom: 16px; }
.applicant-banner p { margin: 0; }
.ai-wait-inline { border: 1px solid #cfe0fb; border-radius: 10px; padding: 16px; }

/* 相性の目盛り・段階 */
.compat-meter { display: inline-block; width: 4.5em; height: 8px; border-radius: 999px; background: #eef1f6; overflow: hidden; vertical-align: middle; }
.compat-meter span { display: block; height: 100%; border-radius: 999px; background: #5b57a6; }
.compat-meter.wide { display: block; width: 100%; max-width: 420px; height: 10px; margin: 6px 0 10px; }
.lv-badge.lv-good { background: #e3f3ea; color: #1f6b43; }
.lv-badge.lv-normal { background: #eef1f6; color: var(--muted); }
.lv-badge.lv-bad { background: #fdeee6; color: #9a3d12; }

.compat-matrix { border-collapse: separate; border-spacing: 2px; font-size: .82rem; margin: 4px 0 8px; }
.compat-matrix th { font-weight: 600; color: var(--muted); padding: 4px 6px; white-space: nowrap; }
.compat-matrix thead th { vertical-align: bottom; text-align: center; }
.compat-matrix thead .mx-name { display: block; max-width: 5.5em; overflow: hidden; text-overflow: ellipsis; margin: 0 auto 2px; }
.compat-matrix tbody th { text-align: left; position: sticky; left: 0; background: var(--surface); z-index: 1; }
.compat-matrix td { min-width: 3.2em; height: 2.4em; text-align: center; border-radius: 6px; padding: 0; font-variant-numeric: tabular-nums; }
.compat-matrix td a { display: flex; align-items: center; justify-content: center; height: 100%; min-height: 2.4em; color: inherit; text-decoration: none; border-radius: 6px; font-weight: 600; }
.compat-matrix td a:hover, .compat-matrix td a:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.compat-matrix td.lv-good { background: #e3f3ea; color: #1f6b43; }
.compat-matrix td.lv-normal { background: #f3f5f8; color: var(--text); }
.compat-matrix td.lv-bad { background: #fdeee6; color: #9a3d12; }
.compat-matrix td.mx-self { background: transparent; color: #c4c9d2; }
.style-dot { display: inline-block; width: .7em; height: .7em; border-radius: 50%; margin-right: .35em; vertical-align: .05em; }
.compat-matrix thead .style-dot { margin: 0; }
.matrix-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: var(--muted); }
.matrix-legend .lg { padding: 2px 8px; border-radius: 6px; font-weight: 600; }
.matrix-legend .lg.lv-good { background: #e3f3ea; color: #1f6b43; }
.matrix-legend .lg.lv-normal { background: #f3f5f8; color: var(--text); }
.matrix-legend .lg.lv-bad { background: #fdeee6; color: #9a3d12; }
.compat-list tr.lv-bad td:first-child { box-shadow: inset 3px 0 0 #e08a5e; }
.compat-list tr.lv-good td:first-child { box-shadow: inset 3px 0 0 #5bb07e; }

.pair-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pair-list a { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 8px 12px; border: 1px solid var(--border); border-left-width: 4px; border-radius: 8px; color: var(--text); text-decoration: none; }
.pair-list a:hover { border-color: var(--primary); }
.pair-list li.lv-bad a { border-left-color: #e08a5e; }
.pair-list li.lv-good a { border-left-color: #5bb07e; }
.pair-list li.lv-normal a { border-left-color: #c4c9d2; }
.pair-names { font-weight: 600; }
.pair-meta { grid-column: 1; font-size: .82rem; color: var(--muted); }
.pair-go { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--primary); font-weight: 700; font-size: .85rem; }

.pair-people { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .pair-people { grid-template-columns: 1fr 1fr; } }
.pair-person { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; }
.pair-label { margin: 0 0 8px; font-weight: 700; }
.pair-letter { display: inline-flex; width: 1.6em; height: 1.6em; align-items: center; justify-content: center; border-radius: 50%; background: var(--navy, #0b1b2b); color: #fff; font-size: .8rem; font-weight: 700; margin-right: 6px; vertical-align: .05em; }
.pair-person-body { display: flex; gap: 14px; align-items: center; }
.pair-person-body p { margin: 0 0 4px; }
.pair-type { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pair-compat { margin-top: 16px; padding: 14px 16px; border-radius: 10px; background: #f3f5f8; }
.pair-compat.lv-good { background: #eef8f2; }
.pair-compat.lv-bad { background: #fef4ef; }
.pair-compat p { margin: 0; line-height: 1.8; }
.pair-compat-main { font-size: 1.05rem; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.pair-compat-main strong { font-size: 1.6rem; }
.pair-compat-mark { font-weight: 700; }
.tips-grid { display: grid; gap: 12px; grid-template-columns: 1fr; margin: 12px 0; }
@media (min-width: 900px) { .tips-grid { grid-template-columns: repeat(3, 1fr); } }
.tips { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; }
.tips h3 { margin: 0 0 8px; font-size: .95rem; display: flex; align-items: center; }
.tips ul { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; line-height: 1.6; }
.tips-manager { background: #f5f9ff; border-color: #cfe0fb; }
.table td.wrap { min-width: 8em; }
.row-actions { display: flex; flex-wrap: wrap; gap: 6px; min-width: 8.5em; }
.row-actions form { margin: 0; }

/* ==== コピーライト（すべての画面） ==== */
.site-footer { padding: 18px 16px 24px; text-align: center; color: var(--muted); font-size: .8rem; }
.site-footer p { margin: 0; }
.has-shell .site-footer { border-top: 1px solid var(--border); margin-top: 8px; }
.page-exam .site-footer { padding: 8px 16px 16px; }

/* ==== 受検者の画面（明るく信頼感のある青） ==== */
.page-candidate, .page-simple { background: linear-gradient(180deg, #eaf1fd 0, #f3f6fb 340px, var(--bg) 100%); min-height: 100vh; display: flex; flex-direction: column; }
.page-candidate .site-footer, .page-simple .site-footer { margin-top: auto; }

.cand-topbar { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, .92); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid #dfe7f5; }
.cand-topbar-inner { max-width: 760px; margin: 0 auto; padding: 8px 16px; display: flex; align-items: center; gap: 10px 16px; min-height: 60px; }
.cand-brand { display: flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; color: var(--text); }
.cand-mark { flex: none; width: 38px; height: 38px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; font-size: 1.05rem; background: linear-gradient(135deg, #3b7be8, #2457c5); box-shadow: 0 2px 6px rgba(36, 87, 197, .3); }
.cand-brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.cand-company { font-weight: 700; font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cand-sub { font-size: .75rem; color: var(--muted); letter-spacing: .08em; }
.cand-nav { margin-left: auto; display: flex; align-items: center; gap: 4px; flex: none; }
.cand-nav-link { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 10px; border-radius: 8px; border: 0; background: transparent; color: var(--text); font: inherit; font-size: .9rem; text-decoration: none; cursor: pointer; }
.cand-nav-link:hover { background: var(--info-bg); color: var(--primary); }
.cand-nav-link .ico { color: var(--primary); }
@media (max-width: 560px) {
  .cand-nav-link span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cand-nav-link { width: 42px; justify-content: center; padding: 0; }
  .cand-nav-link .ico { width: 1.35em; height: 1.35em; }
}

.cand-main { flex: 1 0 auto; }
.cand-container { max-width: 760px; margin: 0 auto; padding: 24px 16px 40px; }

.cand-hero { position: relative; overflow: hidden; border-radius: 18px; padding: 26px 24px 24px; margin-bottom: 26px; color: #fff; background: linear-gradient(130deg, #2457c5 0%, #3b7be8 60%, #5b9bf5 100%); box-shadow: 0 10px 28px rgba(36, 87, 197, .25); }
.cand-hero::before, .cand-hero::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .1); }
.cand-hero::before { width: 220px; height: 220px; right: -60px; top: -90px; }
.cand-hero::after { width: 140px; height: 140px; right: 70px; bottom: -80px; }
.cand-hero > * { position: relative; }
.cand-hero h1 { margin: 2px 0 8px; font-size: 1.5rem; color: #fff; }
.cand-hero p { margin: 0; line-height: 1.8; color: rgba(255, 255, 255, .92); }
.cand-hero strong { color: #fff; }
.cand-hero-eyebrow { font-size: .8rem; letter-spacing: .08em; opacity: .9; }
.cand-hero-stats { list-style: none; margin: 16px 0 0; padding: 0; display: flex; gap: 10px; }
.cand-hero-stats li { background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .28); border-radius: 12px; padding: 8px 14px; font-size: .82rem; display: flex; align-items: baseline; gap: 6px; }
.cand-hero-stats span { font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.cand-section { margin-bottom: 28px; }
.cand-section-title { font-size: 1.05rem; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.cand-section-title::before { content: ""; width: 4px; height: 1.1em; border-radius: 2px; background: var(--primary); }

.test-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.test-card { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; background: var(--surface); border: 1px solid #e1e7f2; border-left: 5px solid var(--primary); border-radius: 14px; padding: 16px 18px; box-shadow: 0 2px 10px rgba(15, 40, 90, .05); }
.test-card.is-progress { border-left-color: #d9822b; }
.test-card.is-done { border-left-color: #2f8f5b; }
.test-card.is-closed { border-left-color: #c4c9d2; background: #fafbfc; }
.test-card-body { flex: 1 1 18em; min-width: 0; }
.test-card-state { margin: 0 0 6px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.state-pill { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; font-weight: 700; padding: 3px 10px 3px 8px; border-radius: 999px; background: var(--info-bg); color: var(--info-text); }
.state-pill .ico { width: 1.05em; height: 1.05em; }
.is-progress .state-pill { background: #fdf0e1; color: #9a5a12; }
.is-done .state-pill { background: #e3f3ea; color: #1f6b43; }
.is-closed .state-pill { background: #eef1f6; color: var(--muted); }
.deadline-chip { font-size: .75rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #fff6e0; color: #8a5a00; }
.test-card-title { margin: 0 0 6px; font-size: 1.1rem; line-height: 1.5; }
.test-meta { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .85rem; color: var(--muted); }
.test-meta li { display: inline-flex; align-items: center; gap: 4px; }
.test-meta .ico { width: 1.05em; height: 1.05em; color: #7d93bd; }
.test-card-note { margin: 8px 0 0; font-size: .85rem; color: var(--text); }
.test-card-action { flex: none; margin-left: auto; }
.btn-cta { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 20px; border-radius: 12px; font-weight: 700; box-shadow: 0 4px 12px rgba(36, 87, 197, .25); }
.btn-cta .ico, .btn-large .ico { width: 1.1em; height: 1.1em; }
.state-text { font-size: .85rem; color: var(--muted); }
@media (max-width: 560px) { .test-card-action { width: 100%; } .btn-cta { width: 100%; justify-content: center; } }
.cand-empty { text-align: center; background: var(--surface); border: 1px dashed #c9d5ea; border-radius: 14px; padding: 28px 16px; }
.cand-empty .ico { width: 40px; height: 40px; color: #7d93bd; }
.cand-empty p { margin: 8px 0 0; }

.flow-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; counter-reset: none; }
.flow-steps li { position: relative; background: var(--surface); border: 1px solid #e1e7f2; border-radius: 12px; padding: 14px 12px 12px; display: flex; flex-direction: column; gap: 2px; }
.flow-steps strong { font-size: .95rem; }
.flow-steps span:last-child { font-size: .8rem; color: var(--muted); line-height: 1.5; }
.flow-num { width: 26px; height: 26px; border-radius: 50%; background: var(--info-bg); color: var(--primary); font-weight: 700; font-size: .85rem; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 4px; }
.tip-grid { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.tip-grid li { display: flex; gap: 12px; align-items: flex-start; background: var(--surface); border: 1px solid #e1e7f2; border-radius: 12px; padding: 12px 14px; }
.tip-grid .ico { flex: none; width: 34px; height: 34px; padding: 7px; border-radius: 10px; background: var(--info-bg); color: var(--primary); }
.tip-grid div { display: flex; flex-direction: column; gap: 2px; }
.tip-grid strong { font-size: .92rem; }
.tip-grid span { font-size: .82rem; color: var(--muted); line-height: 1.6; }

/* 受検の手順（同意→受験場所→説明→回答） */
.step-track { list-style: none; margin: 0 0 22px; padding: 0; display: flex; }
.step-track li { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: .8rem; color: var(--muted); }
.step-track li + li::before { content: ""; position: absolute; top: 15px; right: 50%; width: 100%; height: 2px; background: #d6deec; z-index: 0; }
.step-track li.is-done::before, .step-track li.is-current::before { background: var(--primary); }
.step-dot { position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; background: var(--surface); border: 2px solid #d6deec; color: var(--muted); }
.step-dot .ico { width: 1.1em; height: 1.1em; stroke-width: 2.6; }
.step-track li.is-done .step-dot { background: var(--primary); border-color: var(--primary); color: #fff; }
.step-track li.is-current .step-dot { border-color: var(--primary); color: var(--primary); box-shadow: 0 0 0 4px rgba(36, 87, 197, .15); }
.step-track li.is-current { color: var(--primary); font-weight: 700; }

.cand-page-head { margin-bottom: 16px; }
.cand-page-head h1 { margin: 0 0 6px; font-size: 1.45rem; line-height: 1.45; }
.cand-page-head p { margin: 0; }
.cand-page-eyebrow { color: var(--primary); font-weight: 700; font-size: .82rem; margin-bottom: 4px !important; }
.cand-card { border-color: #e1e7f2; border-radius: 16px; box-shadow: 0 4px 18px rgba(15, 40, 90, .06); padding: 22px; }
.cand-card-title { font-size: 1.05rem; margin: 0 0 12px; }
.consent-list li { line-height: 1.75; }
.consent-form { margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--border); }
.big-check { border: 2px solid #d6deec; background: #f7f9fd; border-radius: 12px; }
.big-check:has(input:checked) { border-color: var(--primary); background: var(--info-bg); }

.place-choices { grid-template-columns: 1fr; }
@media (min-width: 640px) { .place-choices { grid-template-columns: 1fr 1fr; } }
.place-btn { align-items: center; text-align: center; border-radius: 16px; padding: 26px 18px; gap: 6px; border-color: #e1e7f2; box-shadow: 0 4px 14px rgba(15, 40, 90, .06); transition: border-color .15s, box-shadow .15s, transform .15s; }
.place-btn:hover, .place-btn:focus-visible { border-color: var(--primary); box-shadow: 0 6px 18px rgba(36, 87, 197, .18); transform: translateY(-2px); }
.place-icon { width: 56px; height: 56px; border-radius: 16px; background: var(--info-bg); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 6px; }
.place-icon .ico { width: 30px; height: 30px; }

.fact-tiles { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.fact-tiles li { background: var(--surface); border: 1px solid #e1e7f2; border-radius: 14px; padding: 14px 10px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px; box-shadow: 0 2px 10px rgba(15, 40, 90, .04); }
.fact-tiles .ico { width: 24px; height: 24px; color: var(--primary); margin-bottom: 2px; }
.fact-label { font-size: .75rem; color: var(--muted); }
.fact-value { font-size: 1.6rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.fact-value small { font-size: .8rem; margin-left: 2px; color: var(--muted); }
.rule-list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 14px; }
.rule-list li { display: flex; gap: 12px; align-items: flex-start; }
.rule-icon { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--primary); color: #fff; font-weight: 700; font-size: .85rem; display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; }
.rule-list div { display: flex; flex-direction: column; gap: 2px; line-height: 1.6; }
.rule-list div > span { font-size: .88rem; color: var(--muted); }
.intro-note { display: flex; gap: 10px; align-items: flex-start; background: #f7f9fd; border: 1px solid #e1e7f2; border-radius: 12px; padding: 12px 14px; margin-bottom: 18px; }
.intro-note .ico { flex: none; width: 22px; height: 22px; color: var(--primary); margin-top: 2px; }
.intro-note p { margin: 0; font-size: .88rem; line-height: 1.7; }
.btn-large { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 12px; }
.btn-start { box-shadow: 0 6px 16px rgba(36, 87, 197, .28); }

.done { text-align: center; padding: 32px 22px; }
.done h1 { margin: 6px 0 10px; }
.done-lead { font-size: 1.05rem; line-height: 1.8; margin: 0 0 18px; }
.done-badge { width: 84px; height: 84px; margin: 0 auto; }
.done-badge svg { width: 100%; height: 100%; }
.done-circle { fill: #e3f3ea; stroke: #2f8f5b; stroke-width: 2.5; stroke-dasharray: 151; stroke-dashoffset: 151; animation: done-draw .6s ease-out forwards; }
.done-check { fill: none; stroke: #2f8f5b; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: done-draw .4s .5s ease-out forwards; }
@keyframes done-draw { to { stroke-dashoffset: 0; } }
.done-info { text-align: left; display: grid; gap: 8px; background: #f7f9fd; border: 1px solid #e1e7f2; border-radius: 12px; padding: 14px 16px; margin: 0 auto 20px; max-width: 460px; }
.done-info p { margin: 0; display: flex; gap: 8px; align-items: flex-start; font-size: .9rem; line-height: 1.6; }
.done-info .ico { flex: none; width: 20px; height: 20px; color: #2f8f5b; margin-top: 2px; }
@media (prefers-reduced-motion: reduce) { .done-circle, .done-check { animation: none; stroke-dashoffset: 0; } }

/* ログイン・パスワード（受検者・管理者・運営者で共通） */
.page-simple .brand { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 1.05rem; margin: 28px 0 18px; color: var(--text); }
.brand-mark { width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: .95rem; background: linear-gradient(135deg, #3b7be8, #2457c5); }
.simple-main { flex: 1 0 auto; }
.auth-card { border-color: #e1e7f2; border-radius: 18px; box-shadow: 0 10px 30px rgba(15, 40, 90, .08); padding: 26px 24px; }
.auth-head { text-align: center; margin-bottom: 18px; }
.auth-head h1 { font-size: 1.3rem; margin: 8px 0 6px; }
.auth-head p { margin: 0; font-size: .9rem; line-height: 1.7; }
.auth-icon { width: 52px; height: 52px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; background: var(--info-bg); color: var(--primary); }
.auth-icon .ico { width: 26px; height: 26px; }
.auth-icon.is-warn { background: var(--warn-bg); color: var(--warn-text); }
.auth-links { margin-top: 14px; text-align: center; display: grid; gap: 2px; }
.auth-links p { margin: 0; }
.auth-note { display: flex; gap: 8px; align-items: flex-start; margin: 16px 0 0; padding: 10px 12px; border-radius: 10px; background: #f7f9fd; font-size: .85rem; line-height: 1.6; color: var(--muted); }
.auth-note .ico { flex: none; width: 18px; height: 18px; color: var(--primary); margin-top: 2px; }

/* 回答画面 */
.page-exam { background: linear-gradient(180deg, #eaf1fd 0, var(--bg) 280px); }
.exam-top { align-items: center; }
.exam-progress { background: var(--surface); border: 1px solid #dfe7f5; border-radius: 999px; padding: 2px 12px; font-size: .9rem; color: var(--primary); }
.exam-timer { margin-top: 8px; }
.gauge { height: 12px; background: #dfe7f5; }
.gauge-bar { background: linear-gradient(90deg, #3b7be8, #2457c5); }
.gauge-bar.low { background: linear-gradient(90deg, #f0a24d, #d9822b); }
.exam-card { background: var(--surface); border: 1px solid #e1e7f2; border-radius: 16px; padding: 16px 18px; margin: 12px 0 14px; box-shadow: 0 4px 16px rgba(15, 40, 90, .06); }
.exam-label { margin: 0 0 6px; font-size: .78rem; font-weight: 700; color: var(--primary); letter-spacing: .04em; }
.exam-card .exam-scenario { margin: 0; }
.exam-choice { border-color: #e1e7f2; border-radius: 14px; box-shadow: 0 2px 8px rgba(15, 40, 90, .04); transition: border-color .12s, background .12s; }
.exam-choice:not(:disabled):hover { border-color: #9bb8ee; }
.exam-letter { background: var(--info-bg); color: var(--primary); }

/* ==== ダッシュボード ==== */
.dash-top { display: grid; gap: 16px; grid-template-columns: 1fr; margin-bottom: 20px; }
@media (min-width: 1000px) { .dash-top { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
.dash-top .card { margin-bottom: 0; }
.dash-side { display: grid; gap: 12px; align-content: start; }
.dash-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dash-mini .stat { margin: 0; }
.dash-row { margin-bottom: 20px; }
.dash-row > .card { margin-bottom: 0; }
.badge-count { background: #fdeee6; color: #9a3d12; font-weight: 700; vertical-align: middle; }
.text-warn { color: var(--warn-text); }
.todo-clear { display: flex; align-items: center; gap: 8px; margin: 0; padding: 14px; border-radius: 10px; background: #eef8f2; color: #1f6b43; font-weight: 600; }
.todo-clear .ico { width: 22px; height: 22px; }
.todo-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.todo-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-left: 4px solid var(--primary); border-radius: 10px; }
.todo-item.todo-error { border-left-color: #c0392b; }
.todo-item.todo-warn { border-left-color: #d9822b; }
.todo-count { flex: none; min-width: 2.2em; height: 2.2em; padding: 0 6px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; background: var(--info-bg); color: var(--info-text); font-variant-numeric: tabular-nums; }
.todo-error .todo-count { background: var(--error-bg); color: var(--error-text); }
.todo-warn .todo-count { background: var(--warn-bg); color: var(--warn-text); }
.todo-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.todo-body strong { font-size: .95rem; }
.todo-body span { font-size: .82rem; color: var(--muted); line-height: 1.6; }
.todo-item .btn { flex: none; }
@media (max-width: 560px) { .todo-item { flex-wrap: wrap; align-items: flex-start; } .todo-body { flex: 1 1 calc(100% - 3.4em); } .todo-item .btn { margin-left: calc(2.2em + 12px); } }
.dash-usage h2 { margin-bottom: 6px; }
.usage-number { margin: 0 0 8px; }
.usage-number strong { font-size: 1.8rem; font-variant-numeric: tabular-nums; }
.usage-gauge { height: 10px; border-radius: 999px; background: #eef1f6; overflow: hidden; margin-bottom: 6px; }
.usage-gauge span { display: block; height: 100%; border-radius: 999px; background: var(--primary); }
.usage-gauge.is-high span { background: #d9822b; }
.usage-gauge.is-full span { background: #c0392b; }
.dash-usage p:last-child { margin-bottom: 0; }
.progress-summary { display: flex; align-items: baseline; gap: 12px; margin: 0 0 10px; color: var(--muted); }
.progress-rate { font-size: 2rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.progress-rate small { font-size: 1rem; color: var(--muted); }
.seg-bar { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: #eef1f6; gap: 2px; }
.seg-bar span { min-width: 6px; }
.seg-legend { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5em, 1fr)); gap: 6px 14px; font-size: .88rem; }
.seg-legend li { display: flex; align-items: center; gap: 6px; }
.seg-legend strong { margin-left: auto; font-variant-numeric: tabular-nums; }
.seg-legend li.is-zero { color: var(--muted); }
.trend-figures { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.trend-figures .stat { margin: 0; }
.trend-figures .stat-value { font-size: 1.4rem; }

/* ===== アイコン（管理画面・運営画面）：見出し・数値の枠・ボタン・お知らせ・空の表示 ===== */
.hico { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; margin-right: 10px; border-radius: 9px; background: var(--hico-bg); color: var(--hico-fg); vertical-align: middle; }
.hico .ico { width: 18px; height: 18px; }
.hico-blue { --hico-bg: #e7effd; --hico-fg: #2457c5; }
.hico-green { --hico-bg: #e3f3e9; --hico-fg: #1e7a46; }
.hico-amber { --hico-bg: #fdf0d8; --hico-fg: #a35f06; }
.hico-red { --hico-bg: #fce8e6; --hico-fg: #b8382b; }
.hico-purple { --hico-bg: #eeebfb; --hico-fg: #5a4cc2; }
.hico-teal { --hico-bg: #ddf2f1; --hico-fg: #0f6f6c; }
.hico-slate { --hico-bg: #edf0f5; --hico-fg: #4b5563; }
h1:has(> .hico), h2:has(> .hico), h3:has(> .hico) { display: flex; align-items: center; }
h1 > .hico { width: 42px; height: 42px; margin-right: 12px; border-radius: 12px; background: linear-gradient(135deg, #3b74e6, #1c46a0); color: #fff; box-shadow: 0 4px 12px rgba(36, 87, 197, .28); }
h1 > .hico .ico { width: 22px; height: 22px; }
h1:has(> .hico) .badge { margin-left: 10px; }
h2:has(> .hico) .badge { margin-left: 8px; }
h3 > .hico { width: 26px; height: 26px; margin-right: 8px; border-radius: 7px; }
h3 > .hico .ico { width: 15px; height: 15px; }
.section-title:has(> .hico) { margin-top: 32px; }
/* 数値の枠：右上にアイコン */
.stat:has(> .stat-ico) { position: relative; }
.stat:has(> .stat-ico) > .stat-label { padding-right: 44px; min-height: 2.2em; word-break: auto-phrase; }
.dash-mini .stat > .stat-ico, .stats.compact .stat > .stat-ico { position: static; margin-bottom: 8px; }
.stats.compact .stat > .stat-ico { width: 30px; height: 30px; border-radius: 9px; }
.stats.compact .stat > .stat-ico .ico { width: 17px; height: 17px; }
.dash-mini .stat:has(> .stat-ico) > .stat-label, .stats.compact .stat:has(> .stat-ico) > .stat-label { padding-right: 0; min-height: 0; }
.stat > .stat-ico { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; margin: 0; border-radius: 10px; }
.stat > .stat-ico .ico { width: 19px; height: 19px; }
/* ボタンの中のアイコン */
.btn .ico { width: 1.1em; height: 1.1em; }
.btn-small .ico { width: 1em; height: 1em; }
.btn-on-dark { display: inline-flex; }
/* お知らせ・注意書き：左にアイコン（CSSだけで付ける） */
.page-admin .flash, .page-admin .notice, .page-admin .notice-ai, .page-admin .reference-notice { position: relative; padding-left: 46px; }
.page-admin .flash::before, .page-admin .notice::before, .page-admin .notice-ai::before, .page-admin .reference-notice::before {
  content: ""; position: absolute; left: 16px; top: 15px; width: 20px; height: 20px; background: currentColor;
  -webkit-mask: var(--note-ico) center / contain no-repeat; mask: var(--note-ico) center / contain no-repeat;
}
.page-admin .flash-success { --note-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l2.8 2.8L16.5 9.5'/%3E%3C/svg%3E"); }
.page-admin .flash-error { --note-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 4.2L2.6 18a2 2 0 0 0 1.7 3h15.4a2 2 0 0 0 1.7-3L13.7 4.2a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9.5v4M12 17v.01'/%3E%3C/svg%3E"); }
.page-admin .flash-info { --note-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8v.01'/%3E%3C/svg%3E"); }
.page-admin .notice { --note-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4'/%3E%3Cpath d='M12 3a6 6 0 0 0-3.5 10.9c.6.5 1 1.2 1 2V16h5v-.1c0-.8.4-1.5 1-2A6 6 0 0 0 12 3z'/%3E%3C/svg%3E"); }
.page-admin .notice::before { top: 17px; }
.page-admin .notice-ai { --note-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 3l1.9 5.1L18 10l-5.1 1.9L11 17l-1.9-5.1L4 10l5.1-1.9z'/%3E%3Cpath d='M18.5 14.5l.8 2.2 2.2.8-2.2.8-.8 2.2-.8-2.2-2.2-.8 2.2-.8z'/%3E%3C/svg%3E"); }
.page-admin .notice-ai::before { top: 14px; }
.page-admin .reference-notice { --note-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 4.2L2.6 18a2 2 0 0 0 1.7 3h15.4a2 2 0 0 0 1.7-3L13.7 4.2a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9.5v4M12 17v.01'/%3E%3C/svg%3E"); }
.page-admin .reference-notice::before { top: 12px; }
/* まだ何も無いときの表示 */
.empty { display: block; text-align: center; margin: 4px 0 0; padding: 22px 16px; color: var(--muted); background: #f8f9fb; border: 1px dashed var(--border); border-radius: 10px; }
.empty::before { content: ""; display: block; width: 44px; height: 44px; margin: 0 auto 8px; border-radius: 12px; background: #edf0f5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a94a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 13l3-8h12l3 8v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpath d='M3 13h5l1.5 3h5l1.5-3h5'/%3E%3C/svg%3E") center / 22px no-repeat; }
.empty.small { padding: 14px 12px; }
.empty.small::before { width: 34px; height: 34px; background-size: 18px; margin-bottom: 6px; }
/* 左のメニューの下：ログイン中の人 */
.shell-user { display: flex; align-items: center; gap: 10px; }
.shell-avatar { flex: none; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #3b74e6, #1c46a0); color: #fff; font-weight: 700; font-size: .9rem; box-shadow: 0 0 0 2px rgba(143, 193, 245, .35); }
.shell-user-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.45; }
.shell-user-text span { overflow-wrap: anywhere; }
/* 対応が必要なこと：種類のアイコンと件数 */
.todo-ico { position: relative; width: 40px; height: 40px; margin: 0; border-radius: 11px; }
.todo-ico .ico { width: 20px; height: 20px; }
.todo-ico .todo-count { position: absolute; top: -7px; right: -9px; min-width: 22px; height: 22px; padding: 0 5px; font-size: .72rem; border: 2px solid #fff; background: var(--hico-fg); color: #fff; }
.todo-item { padding: 12px 14px; }
@media (max-width: 560px) { .todo-item .btn { margin-left: 52px; } .todo-body { flex: 1 1 calc(100% - 52px); } }
/* 組織：チームのカードの見出し */
.team-card h3 { display: flex; align-items: center; }
.team-card-link { display: inline-flex; align-items: center; gap: 4px; }
.team-card-link .ico { width: 1em; height: 1em; transition: transform .15s; }
.team-card:hover .team-card-link .ico { transform: translateX(3px); }
/* 月の切り替え（‹ ›） */
.month-picker .btn-small { padding: 4px 8px; }
.grid-2 > * { min-width: 0; }
/* スマートフォン：数値の枠のアイコンは見出しの上に置き、見出しを細切れにしない */
@media (max-width: 640px) {
  .stat > .stat-ico { position: static; width: 30px; height: 30px; margin-bottom: 8px; border-radius: 9px; }
  .stat > .stat-ico .ico { width: 17px; height: 17px; }
  .stat:has(> .stat-ico) > .stat-label { padding-right: 0; min-height: 0; }
  h1 > .hico { width: 38px; height: 38px; }
  h1 > .hico .ico { width: 20px; height: 20px; }
}

/* ロゴ（assets/img：logo.svg＝明るい地、logo-white.svg＝紺の地、mark.svg＝マーク・ファビコン） */
.shell-name { display: inline-flex; align-items: center; gap: 8px; line-height: 0; }
.shell-name span { line-height: 1; margin-left: 0; }
.shell-logo { display: block; height: 37px; width: auto; max-width: 100%; }
@media (min-width: 1024px) {
  .shell-name-side { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px 8px; padding: 4px 10px 14px; }
  .shell-name-side .shell-logo { height: 46px; }
  .shell-name-side span { margin-bottom: 4px; }
}
.page-simple .brand { flex-direction: column; gap: 4px; margin: 28px 0 18px; line-height: 0; }
.brand-logo { display: block; height: 60px; width: auto; max-width: 100%; }
.brand-sub { line-height: 1.4; font-size: .9rem; color: var(--muted); font-weight: 700; }

/* 部署・チームの兼任（職員の登録・所属の変更） */
.team-checks { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.team-checks legend { font-weight: 600; font-size: .95rem; padding: 0; margin: 0 0 6px; }
.team-check-list { display: flex; flex-wrap: wrap; gap: 2px 18px; }
.team-check-list .inline-check { min-height: 36px; }
.team-label { display: block; }
.team-edit { margin-top: 4px; }
.team-edit summary { display: inline-flex; align-items: center; min-height: 32px; cursor: pointer; color: var(--primary); font-size: .88rem; font-weight: 600; }
.team-edit summary:hover { color: var(--primary-hover); text-decoration: underline; }
.team-edit-form { gap: 10px; margin: 4px 0 6px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); min-width: 15em; white-space: normal; }
.team-edit-form select { max-width: 22em; }
.badge-sub { background: #e6f4f1; color: #1d6458; font-weight: 600; font-size: .75rem; padding: 1px 8px; margin-left: 4px; vertical-align: middle; }

/* 会社の選択・切り替え（複数の会社の管理者） */
.shell-switch { margin-top: 8px; align-self: flex-start; }
.shell-switch + form { margin-top: 6px; }
.switch-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; max-width: 720px; }
.switch-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; margin: 0; }
.switch-item.is-current { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary) inset; }
.switch-body { min-width: 0; flex: 1 1 16em; }
.switch-body p { margin: 0; }
.switch-name { display: flex; align-items: center; font-weight: 700; font-size: 1.05rem; margin-bottom: 6px !important; overflow-wrap: anywhere; }
.switch-item form { margin: 0; }