/* 製造業求人ナビ・職種LP 共通スタイル。属性・部品の使い方は markup-rules.md を参照。 */
:root {
  color-scheme: light;
  --color-text: #1F2328;
  --color-text-sub: #4B5563;
  --color-primary: #0B57D0;
  --color-primary-dark: #083F99;
  --color-navy: #1B2E4B;
  --color-bg: #FFFFFF;
  --color-bg-alt: #F4F6F9;
  --color-border: #D5DBE3;
  --color-control-border: #6B7280;
  --color-honest-bg: #FFF8E1;
  --color-honest-border: #1F2328;
  --color-accent-bg: #E8F0FE;
  --color-error: #B3261E;
  --color-error-bg: #FFF4F2;
  --color-focus: #0B57D0;

  --font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  --font-weight-normal: 400;
  --font-weight-bold: 700;
  --font-body: 16px;
  --font-lead: 17px;
  --font-h1: 22px;
  --font-h2: 22px;
  --font-h3: 18px;
  --font-catch: 26px;
  --font-note: 14px;
  --font-source: 13px;
  --font-table: 14px;
  --font-label: 13px;
  --font-control: 16px;
  --font-header: 14px;
  --font-header-sub: 10px;
  --font-header-button: 11px;
  --line-body: 1.85;
  --line-heading: 1.55;
  --line-catch: 1.65;
  --line-control: 1.6;
  --line-header-sub: 1.3;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 48px;
  --space-section: 52px;
  --space-page: 20px;
  --space-card: 20px;
  --width-text: 760px;
  --width-wide: 960px;
  --radius-card: 12px;
  --radius-control: 8px;
  --radius-pill: 999px;
  --size-number: 40px;
  --size-button: 48px;
  --size-target: 44px;
  --header-offset: 88px;
  --fixed-reserve: 88px;
  --focus-width: 3px;
  --focus-offset: 3px;
  --duration: 160ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-family);
  font-size: var(--font-body);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-body);
  overflow-wrap: anywhere;
  padding-bottom: calc(var(--fixed-reserve) + env(safe-area-inset-bottom, 0px));
}
[hidden] { display: none !important; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input, textarea { font: inherit; color: inherit; }
button, input[type="checkbox"], input[type="radio"] { cursor: pointer; }
button { -webkit-appearance: none; appearance: none; }
input, textarea { max-width: 100%; }
textarea { resize: vertical; }
p, ul, ol, dl, figure { margin: 0; }
p + p { margin-top: var(--space-3); }
h1, h2, h3 { margin: 0; font-weight: var(--font-weight-bold); line-height: var(--line-heading); }
h1, .h1 { font-size: var(--font-h1); }
h2, .h2 { font-size: var(--font-h2); color: var(--color-navy); }
h3, .h3 { font-size: var(--font-h3); }
.h2 { padding-top: var(--space-4); border-top: 3px solid var(--color-navy); }
.h3 + :is(p, ul, ol) { margin-top: var(--space-3); }
a { color: var(--color-primary); text-underline-offset: .22em; text-decoration-thickness: 1px; }
a:hover { color: var(--color-primary-dark); text-decoration-thickness: 2px; }
a:active { color: var(--color-primary-dark); }
:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
:is(a, button, input, textarea, summary) { -webkit-tap-highlight-color: transparent; }
[id] { scroll-margin-top: var(--header-offset); }
.strong, b, strong { font-weight: var(--font-weight-bold); }
.catch { font-size: var(--font-catch); font-weight: var(--font-weight-bold); line-height: var(--line-catch); color: var(--color-navy); }
.lead { font-size: var(--font-lead); }
.small { color: var(--color-text-sub); font-size: var(--font-note); }
.src { color: var(--color-text-sub); font-size: var(--font-source); line-height: 1.85; }
.small a, .src a { font-size: inherit; }

/* 原稿のセクションidをそのまま使い、本文幅だけを揃える。 */
main > section {
  padding: var(--space-section) var(--space-page);
}
main > section > * { width: 100%; max-width: var(--width-text); margin-inline: auto; }
main > section > * + * { margin-top: var(--space-5); }
main > section > :is(.table-scroll, .figure-wide, .grid2) { max-width: var(--width-wide); }
.stack { display: grid; gap: var(--space-4); }
.stack > * { min-width: 0; margin-top: 0; }
.grid2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.grid2 > * { min-width: 0; }
.card { min-width: 0; padding: var(--space-card); border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-bg); }
.card.grey { background: var(--color-bg-alt); }
.card > * + * { margin-top: var(--space-4); }
.card > .num + div { margin-top: var(--space-4); }
.num {
  display: inline-flex; flex: 0 0 var(--size-number); align-items: center; justify-content: center;
  width: var(--size-number); height: var(--size-number); border-radius: 50%;
  color: var(--color-navy); background: var(--color-accent-bg); font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.list { padding-left: 1.35em; list-style-type: disc; }
.list li { padding-left: .2em; }
.list li + li { margin-top: var(--space-3); }
.list li::marker { color: var(--color-navy); font-size: .75em; }
.honest { padding: var(--space-card); border: 2px solid var(--color-honest-border); border-radius: var(--radius-card); background: var(--color-honest-bg); }
.honest .strong { line-height: 1.6; }
.badge {
  display: inline-block; margin: var(--space-1) var(--space-1) var(--space-1) 0; padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border); border-radius: var(--radius-pill); color: var(--color-navy);
  background: var(--color-bg); font-size: var(--font-note); line-height: 1.7;
}
.cta { display: flex; flex-direction: column; gap: var(--space-3); align-items: stretch; }
.btn, .btn2 {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-width: var(--size-target); min-height: var(--size-button); padding: var(--space-3) var(--space-5);
  border: 2px solid var(--color-primary); border-radius: var(--radius-pill); background: var(--color-primary);
  color: var(--color-bg); font-size: var(--font-control); font-weight: var(--font-weight-bold); line-height: var(--line-control);
  text-align: center; text-decoration: none; white-space: normal; cursor: pointer;
  transition: background-color var(--duration), border-color var(--duration), color var(--duration);
}
.btn2 { background: var(--color-bg); color: var(--color-primary); }
.btn:hover { color: var(--color-bg); background: var(--color-primary-dark); border-color: var(--color-primary-dark); text-decoration: none; }
.btn2:hover { color: var(--color-primary-dark); background: var(--color-accent-bg); border-color: var(--color-primary-dark); text-decoration: none; }
:is(.btn, .btn2):active { border-color: var(--color-primary-dark); }
:is(.btn, .btn2):disabled { color: var(--color-text-sub); border-color: var(--color-control-border); background: var(--color-bg-alt); cursor: default; }
.crumb { display: flex; align-items: center; flex-wrap: wrap; gap: 0 var(--space-1); color: var(--color-text-sub); font-size: var(--font-note); }
.crumb a { display: inline-flex; align-items: center; min-height: var(--size-target); }

/* ヘッダーは長い文言を省略せず、狭い幅では自然に改行する。 */
#header { position: sticky; top: 0; z-index: 30; background: var(--color-navy); color: var(--color-bg); }
#header > .card {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--space-2); align-items: center;
  max-width: calc(var(--width-wide) + var(--space-page) * 2); margin-inline: auto; padding: var(--space-2) var(--space-3);
  border: 0; border-radius: 0; background: transparent;
}
#header .card > div { min-width: 0; margin: 0; }
#header .strong { font-size: var(--font-header); line-height: 1.5; }
#header .small { margin-top: 0; font-size: var(--font-header-sub); color: var(--color-bg); line-height: var(--line-header-sub); }
#header .card > div:last-child { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); gap: var(--space-1); }
#header :is(.btn, .btn2) { min-height: var(--size-button); padding: var(--space-1) var(--space-1); font-size: var(--font-header-button); line-height: 1.5; }
#header .btn { border-color: var(--color-bg); background: var(--color-bg); color: var(--color-primary); }
#header .btn:hover { background: var(--color-accent-bg); border-color: var(--color-accent-bg); }
#header .btn2 { color: var(--color-bg); border-color: var(--color-bg); background: transparent; }
#header .btn2:hover { background: var(--color-bg); color: var(--color-navy); }
#header :focus-visible { outline-color: var(--color-bg); }
.benefits .card { display: grid; grid-template-columns: var(--size-number) minmax(0, 1fr); gap: var(--space-4); }
.benefits .card > .num + div { margin-top: 0; }

/* 表は意味と列構造を維持し、枠の中だけをスクロールする。 */
.table-scroll { overflow-x: auto; overscroll-behavior-inline: contain; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-bg); scrollbar-color: var(--color-control-border) var(--color-bg-alt); scrollbar-width: auto; }
table { width: 100%; min-width: 640px; border-collapse: separate; border-spacing: 0; font-size: var(--font-table); line-height: 1.8; }
caption { padding: var(--space-4); text-align: left; color: var(--color-text-sub); }
th, td { padding: var(--space-4); border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: top; }
th + th, th + td, td + td { border-left: 1px solid var(--color-border); }
thead th { background: var(--color-navy); color: var(--color-bg); font-weight: var(--font-weight-bold); }
tbody th { background: var(--color-bg-alt); font-weight: var(--font-weight-bold); }
tbody tr:last-child > * { border-bottom: 0; }
table :is(.small, .src) { font-size: var(--font-table); }
.n { text-align: right; font-variant-numeric: tabular-nums; }
.table-wide { min-width: 880px; }

/* FAQは回答をHTMLに含めた静的表示。 */
.q { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.q + .q { margin-top: var(--space-4); }
.qm, .am { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; font-size: var(--font-note); font-weight: var(--font-weight-bold); line-height: 1; }
.qm { color: var(--color-bg); background: var(--color-navy); }
.am { color: var(--color-navy); background: var(--color-accent-bg); }
.q .h3 { margin: 0; }

.step { display: grid; grid-template-columns: var(--size-number) minmax(0, 1fr); gap: var(--space-4); position: relative; padding-bottom: var(--space-5); }
.step > div { min-width: 0; }
.step > .num { position: relative; z-index: 1; background: var(--color-navy); color: var(--color-bg); }
.step:not(:last-child)::after { content: ""; position: absolute; top: var(--size-number); bottom: calc(-1 * var(--space-4)); left: calc(var(--size-number) / 2 - 1px); width: 2px; background: var(--color-border); }
.step:last-child { padding-bottom: 0; }
.step .h3 { padding-top: var(--space-1); }
.step .flow-note { margin-top: var(--space-3); padding: var(--space-3) var(--space-4); border-left: 3px solid var(--color-primary); border-radius: 0 var(--radius-control) var(--radius-control) 0; background: var(--color-accent-bg); font-size: var(--font-note); }

/* フォームはネイティブのラジオ・チェックの印を残す。 */
form { margin: 0; }
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
legend { max-width: 100%; padding: 0; font-weight: var(--font-weight-bold); }
.field { min-width: 0; }
.field > * + * { margin-top: var(--space-3); }
fieldset > .opts { margin-top: var(--space-3); }
#sheet fieldset { padding: var(--space-card); border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-bg); }
#sheet legend { padding-inline: var(--space-2); }
.t { display: block; font-weight: var(--font-weight-bold); }
.in {
  display: block; width: 100%; min-height: var(--size-button); padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-control-border); border-radius: var(--radius-control); background: var(--color-bg);
  color: var(--color-text); font-size: var(--font-control); line-height: var(--line-control);
}
.in::placeholder { color: var(--color-text-sub); opacity: 1; }
.in:hover { border-color: var(--color-navy); }
.in:focus { border-color: var(--color-primary); }
textarea.in { min-height: 144px; }
.opts { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.opt {
  display: inline-flex; align-items: flex-start; gap: var(--space-2); min-width: var(--size-target); min-height: var(--size-target);
  padding: 9px var(--space-3); border: 1px solid var(--color-control-border); border-radius: var(--radius-control);
  color: var(--color-text); background: var(--color-bg); font-size: var(--font-control); line-height: 1.6; cursor: pointer;
}
.opt input { flex: 0 0 20px; width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--color-primary); }
.opt > span:not(.req, .opt-t) { min-width: 0; }
.opt .req, .opt .opt-t { flex: 0 0 auto; margin-left: 0; }
.opt:hover { border-color: var(--color-primary); background: var(--color-bg-alt); }
.opt:has(input:checked) { border-color: var(--color-primary); background: var(--color-accent-bg); }
.opt:has(input:focus-visible) { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
.req, .opt-t { display: inline-block; margin-left: var(--space-2); padding: 1px var(--space-2); border: 1px solid var(--color-navy); border-radius: var(--space-1); font-size: var(--font-label); font-weight: var(--font-weight-bold); line-height: 1.7; vertical-align: middle; }
.req { background: var(--color-navy); color: var(--color-bg); }
.opt-t { border-color: var(--color-control-border); background: var(--color-bg); color: var(--color-text-sub); }
.field .small { margin-top: var(--space-2); }
.field .field { margin-top: var(--space-5); }
form.card { gap: var(--space-5); }
form.card > * { margin-top: 0; }
form.card > div > .btn { width: 100%; }
.stepbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.stepbar > :is(span, a, button) { display: flex; align-items: center; justify-content: center; min-height: var(--size-button); padding: var(--space-3); border: 1px solid var(--color-control-border); border-radius: var(--radius-control); color: var(--color-text-sub); background: var(--color-bg); font-size: var(--font-note); font-weight: var(--font-weight-bold); line-height: 1.7; text-align: center; text-decoration: none; }
.stepbar > .on { color: var(--color-bg); background: var(--color-navy); border-color: var(--color-navy); }
.stepbar a:hover { color: var(--color-primary); border-color: var(--color-primary); background: var(--color-accent-bg); }
[aria-invalid="true"].in { border: 2px solid var(--color-error); background: var(--color-error-bg); }
.field-error, .error-summary { color: var(--color-error); font-size: var(--font-note); font-weight: var(--font-weight-bold); }
.field-error { margin-top: var(--space-2); }
.error-summary { padding: var(--space-4); border: 2px solid var(--color-error); border-radius: var(--radius-control); background: var(--color-error-bg); }
.field:has(input[aria-invalid="true"]) > .opts .opt { border-color: var(--color-error); }
.sheet-preview { padding: var(--space-card); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-card); }
.sheet-preview > * + * { margin-top: var(--space-4); }

.info { display: grid; grid-template-columns: minmax(0, 1fr); }
.info dt { padding-top: var(--space-4); font-size: var(--font-note); font-weight: var(--font-weight-bold); }
.info dt:first-child { padding-top: 0; }
.info dd { margin: 0; padding: var(--space-2) 0 var(--space-4); border-bottom: 1px solid var(--color-border); }
.info dd:last-child { padding-bottom: 0; border-bottom: 0; }
.photo-placeholder { display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3; margin: 0; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-bg-alt); color: var(--color-text-sub); font-size: var(--font-note); }
.photo-pair { display: grid; gap: var(--space-4); }
.staff .photo-placeholder { max-width: 160px; aspect-ratio: 1; border-radius: 50%; margin-inline: auto; }

#footer { background: var(--color-navy); }
.foot { max-width: calc(var(--width-text) + var(--space-page) * 2); margin-inline: auto; padding: var(--space-8) var(--space-page); background: var(--color-navy); color: var(--color-bg); }
.foot > * + * { margin-top: var(--space-5); }
.foot .small, .foot a { color: var(--color-bg); }
.foot a:hover { color: var(--color-bg); }
.foot nav { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--space-5); }
.foot nav a { display: flex; align-items: center; min-height: var(--size-target); padding-block: var(--space-2); font-size: var(--font-note); }
.foot :focus-visible { outline-color: var(--color-bg); }
.foot .list li::marker { color: var(--color-bg); }
.fix {
  display: none; position: fixed; z-index: 40; inset: auto 0 0;
  padding: var(--space-2) var(--space-3) calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
  gap: var(--space-2); grid-template-columns: minmax(0, 1fr) 72px;
  border-top: 1px solid var(--color-border); background: var(--color-bg);
}
.fix.is-visible { display: grid; }
.fix :is(.btn, .btn2) { min-height: var(--size-button); padding: var(--space-2) var(--space-1); font-size: var(--font-note); }

/* LINEのボタンを一時的に外している間（URLが決まるまで）も、空いた枠を残さない。 */
.fix > :only-child { grid-column: 1 / -1; }
#header .card > div:last-child:not(:has(a, button)) { display: none; }
.cta:not(:has(a, button)) { display: none; }

/* 375pxを基準にし、狭い端末でも省略や横はみ出しを避ける。 */
@media (max-width: 359px) {
  :root { --space-page: 16px; --space-card: 16px; --font-header: 13px; }
  #header > .card { grid-template-columns: minmax(0, 1fr); }
  #header .card > div:last-child { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :root { --header-offset: 144px; }
  .field > .opt { flex-wrap: wrap; }
}
@media (min-width: 768px) {
  :root {
    --font-body: 17px;
    --font-lead: 18px;
    --font-h1: 28px;
    --font-h2: 28px;
    --font-h3: 20px;
    --font-catch: 36px;
    --font-header: 18px;
    --font-header-sub: 12px;
    --font-header-button: 14px;
    --space-page: 40px;
    --space-card: 28px;
    --space-section: 88px;
    --header-offset: 104px;
  }
  body { padding-bottom: 0; }
  .grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
  .cta { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .cta > * { max-width: 100%; }
  #header > .card { display: flex; justify-content: space-between; padding: var(--space-3) var(--space-page); gap: var(--space-5); }
  #header .card > div:last-child { display: flex; gap: var(--space-3); }
  #header :is(.btn, .btn2) { padding-inline: var(--space-4); }
  .info { grid-template-columns: 180px minmax(0, 1fr); }
  .info dt, .info dt:first-child { padding: var(--space-4) var(--space-4) var(--space-4) 0; border-bottom: 1px solid var(--color-border); }
  .info dd { padding: var(--space-4) 0; }
  .info dt:nth-last-child(2), .info dd:last-child { border-bottom: 0; padding-bottom: var(--space-4); }
  .foot nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .photo-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #fv .photo-placeholder { aspect-ratio: 16 / 9; }
  .staff > .card { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: var(--space-5); align-items: start; }
  .staff > .card > * { margin-top: 0; }
  .fix, .fix.is-visible { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  .btn, .btn2, .opt, .num, .qm, .am, .req, .stepbar > .on { border: 1px solid ButtonText; }
  .opt:has(input:checked) { outline: 2px solid Highlight; }
  [aria-invalid="true"].in { outline: 2px solid Mark; }
}
@media print {
  :root { --font-body: 12pt; --font-h2: 18pt; --font-h3: 14pt; }
  html { scroll-behavior: auto; }
  body { padding: 0; background: white; color: black; }
  #header, #footer, .fix { display: none !important; }
  main > section { padding: 12pt 0; background: white; }
  .card, .honest { break-inside: avoid; }
  .table-scroll { overflow: visible; }
  table { min-width: 0; }
}

/* 図・写真の仮枠とページ全体の仕上げ。 */
:root {
  --color-chart-a: var(--color-navy);
  --color-chart-b: var(--color-primary);
  --line-fv-heading: 1.4;
  --line-fv-catch: 1.4;
  --size-icon: 64px;
}

/* 背景を交互にし、見出し以外でも節の境目が分かるようにする。 */
main > section[id] { background: var(--color-bg); }
main > section[id]:nth-of-type(even) { background: var(--color-bg-alt); }
main > section[id] + section { border-top: 1px solid var(--color-border); }
.card.grey { border-color: var(--color-border); }

/* 本文のDOM順序は変えず、スマホの冒頭だけCTAを先に表示する。 */
#fv { padding-top: var(--space-2); }
#fv > .crumb { margin-bottom: var(--space-2); }
#fv > .stack { gap: var(--space-3); margin-top: 0; }
#fv .h1 { order: 1; line-height: var(--line-fv-heading); }
#fv .catch { order: 2; line-height: var(--line-fv-catch); }
#fv .cta { order: 3; gap: var(--space-2); }
#fv .fv-audience { order: 4; margin-top: var(--space-4); }
#fv .lead { order: 5; }
#fv .fv-badges { order: 6; }
#fv .honest { order: 7; }
#fv .photo-placeholder { order: 8; }
#fv .cta :is(.btn,.btn2) { padding-block: 9px; }
.photo-placeholder { overflow: hidden; }
.photo-placeholder > span { padding: var(--space-3); }
.work .photo-pair { max-width: var(--width-wide); }
.staff .photo-placeholder { border: 1px solid var(--color-border); }

/* 線画は補助的な飾り。意味を持つ文章と番号は原稿のまま。 */
.benefits .card-icon { float: right; width: var(--size-icon); height: var(--size-icon); margin: 0 0 var(--space-3) var(--space-4); color: var(--color-navy); }
.benefits .card > div > .card-icon + .h3 { margin-top: 0; }
.benefits .card > div { display: flow-root; }

/* 区分ごとの色と模様を同じにし、色だけに頼らず対応を示す。 */
.salary-chart { padding: var(--space-card); border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-bg); }
.chart-title { color: var(--color-navy); font-size: var(--font-h3); font-weight: var(--font-weight-bold); line-height: 1.65; }
.chart-legend { display: grid; gap: var(--space-3); margin-block: var(--space-5); }
.legend-item { display: flex; align-items: baseline; gap: var(--space-2); font-size: var(--font-note); }
.legend-key { flex: 0 0 28px; width: 28px; height: 10px; border-radius: 2px; }
.series-0 { background: var(--color-chart-a); }
.series-1 { background-color: var(--color-chart-b); background-image: repeating-linear-gradient(135deg, transparent, transparent 5px, rgb(255 255 255 / .45) 5px, rgb(255 255 255 / .45) 7px); }
.chart-rows { display: grid; }
.chart-row { display: grid; grid-template-columns: 40px minmax(0,1fr); gap: var(--space-3); padding-block: var(--space-4); border-top: 1px solid var(--color-border); }
.chart-region { padding-top: var(--space-1); color: var(--color-navy); font-weight: var(--font-weight-bold); font-size: var(--font-note); }
.chart-pair { display: grid; gap: var(--space-2); }
.chart-item { display: grid; grid-template-columns: minmax(0,1fr) 56px; gap: var(--space-1) var(--space-2); align-items: center; }
.chart-track { height: 12px; background: var(--color-bg-alt); border-radius: 2px; }
.chart-bar { display: block; width: var(--bar-size); height: 100%; border-radius: 2px; }
.chart-value { font-size: var(--font-note); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.chart-caution { grid-column: 1 / -1; color: var(--color-text-sub); font-size: var(--font-source); }
.salary-chart > .src { padding-top: var(--space-3); border-top: 1px solid var(--color-border); }

/* 階段は文字をHTMLで保持。狭い画面では段差を横方向のずれで表す。 */
.learning-figure { padding: var(--space-card); border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-bg); }
.learning-caption { color: var(--color-text-sub); font-size: var(--font-note); }
.learning-stairs { display: grid; gap: var(--space-3); margin: var(--space-5) 0 0; padding: 0; list-style: none; }
.learning-stage { --step-inset: 0px; margin-left: var(--step-inset); padding: var(--space-4); border-bottom: 3px solid var(--color-navy); border-radius: var(--radius-control) var(--radius-control) 0 0; background: var(--color-accent-bg); }
.learning-stage:nth-child(2) { --step-inset: 12px; }
.learning-stage:nth-child(3) { --step-inset: 24px; }
.learning-stage:nth-child(4) { --step-inset: 36px; }
.learning-number { display: block; margin-bottom: var(--space-2); color: var(--color-navy); font-size: 24px; font-weight: var(--font-weight-bold); line-height: 1.3; }
.learning-stage p { font-size: var(--font-control); }

/* 原稿のステップを縦の線でつなぐ。 */
.flow > .stack { gap: var(--space-5); }
.flow .step { padding-bottom: var(--space-3); }
.flow .step:not(:last-child)::after { bottom: calc(-1 * var(--space-5)); }
.flow .step:last-child { padding-bottom: 0; }
.flow .step .flow-note { position: relative; margin-top: var(--space-4); border: 1px solid var(--color-primary); border-left-width: 3px; border-radius: var(--radius-control); color: var(--color-navy); background: var(--color-accent-bg); }
.flow .flow-note::before { content: ""; position: absolute; top: -7px; left: 18px; width: 12px; height: 12px; transform: rotate(45deg); border-top: 1px solid var(--color-primary); border-left: 1px solid var(--color-primary); background: var(--color-accent-bg); }

@media (min-width: 768px) {
  #fv { padding-top: var(--space-5); }
  #fv > .crumb { max-width: var(--width-wide); margin-bottom: var(--space-5); }
  #fv > .stack { max-width: var(--width-wide); grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); gap: var(--space-5); }
  #fv :is(.fv-audience,.h1,.catch,.honest) { max-width: var(--width-text); }
  #fv .fv-audience { grid-area: 1 / 1 / 2 / -1; order: initial; margin-top: 0; }
  #fv .h1 { grid-area: 2 / 1 / 3 / -1; line-height: var(--line-heading); }
  #fv .catch { grid-area: 3 / 1 / 4 / -1; line-height: var(--line-catch); }
  #fv .lead { grid-area: 4 / 1 / 5 / 2; }
  #fv .photo-placeholder { grid-area: 4 / 2 / 6 / 3; align-self: start; }
  #fv .fv-badges { grid-area: 5 / 1 / 6 / 2; }
  #fv .cta { grid-area: 6 / 1 / 7 / -1; gap: var(--space-3); }
  #fv .cta :is(.btn,.btn2) { padding-block: var(--space-3); }
  #fv .honest { grid-area: 7 / 1 / 8 / -1; }
  .chart-legend { grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); gap: var(--space-5); }
  .chart-row { grid-template-columns: 56px minmax(0,1fr); gap: var(--space-5); }
  .chart-item { grid-template-columns: minmax(0,1fr) 64px 100px; gap: var(--space-3); }
  .chart-caution { grid-column: 3; }
  .chart-track { height: 16px; }
  .learning-stairs { grid-template-columns: repeat(4,minmax(0,1fr)); align-items: end; gap: var(--space-2); }
  .learning-stage { margin: 0; min-height: 200px; }
  .learning-stage:nth-child(2) { min-height: 248px; }
  .learning-stage:nth-child(3) { min-height: 296px; }
  .learning-stage:nth-child(4) { min-height: 344px; }
}

@media print {
  .chart-row, .learning-stage, .flow .step { break-inside: avoid; }
}

/* 棒の比率はHTMLの style="--bar-size: …%" で指定する。 */

/* 選択件数、送信完了、プレビューと印刷。 */
.sheet-summary { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: center; font-size: var(--font-note); }
.sheet-summary p { font-weight: var(--font-weight-bold); color: var(--color-navy); }
.sheet-summary a { display: inline-flex; align-items: center; min-height: var(--size-target); }
.submission-result > * + * { margin-top: var(--space-5); }
.submission-result .h2 { padding-top: 0; border-top: 0; }
.submission-result .btn { width: 100%; }
.sheet-preview { background: var(--color-bg-alt); }
.preview-list { display: grid; }
.preview-list > div { padding-block: var(--space-4); border-bottom: 1px solid var(--color-border); }
.preview-list > div:last-child { border-bottom: 0; padding-bottom: 0; }
.preview-list dt { font-size: var(--font-note); font-weight: var(--font-weight-bold); color: var(--color-navy); }
.preview-list dd { margin: var(--space-2) 0 0; }
.preview-list ul { padding-left: 1.3em; }
.preview-list li + li { margin-top: var(--space-1); }
.preview-actions .btn2 { width: 100%; }
.opt:has(input:disabled) { cursor: default; }
.opt:has(input:disabled):hover { border-color: var(--color-control-border); background: var(--color-bg); }
.opt:has(input:disabled:checked) { border-color: var(--color-primary); background: var(--color-accent-bg); }

@media (min-width: 768px) {
  .preview-list > div { display: grid; grid-template-columns: 140px minmax(0,1fr); gap: var(--space-4); }
  .preview-list dd { margin-top: 0; }
  .submission-result .btn, .preview-actions .btn2 { width: auto; }
}

@media print {
  @page { size: A4; margin: 16mm; }
  body:has(.submission-result:not([hidden])) *:not(.sheet-preview):not(.sheet-preview *):not(:has(.sheet-preview)) { display: none !important; }
  body:has(.submission-result:not([hidden])) :is(main,#form,.submission-result) { display: block; width: auto; max-width: none; margin: 0; padding: 0; border: 0; background: white; }
  body:has(.submission-result:not([hidden])) .sheet-preview { display: block; position: static; width: 100%; max-width: none; margin: 0; padding: 0; border: 0; background: white; color: black; break-inside: auto; }
  .sheet-preview .h3 { color: black; font-size: 18pt; }
  .sheet-preview dt, .sheet-preview dd { color: black; font-size: 12pt; }
  .preview-list > div { display: grid; grid-template-columns: 32mm minmax(0,1fr); gap: 4mm; padding-block: 3mm; break-inside: avoid; }
  .preview-list dd { margin: 0; }
  .sheet-preview.is-dense .preview-list { display: block; columns: 2; column-gap: 8mm; }
  .sheet-preview.is-dense .preview-list > div { display: block; padding-block: 2mm; }
  .sheet-preview.is-dense .preview-list dt,
  .sheet-preview.is-dense .preview-list dd { font-size: 10pt; line-height: 1.45; }
  .sheet-preview.is-dense .preview-list dd { margin-top: 2mm; }
  .sheet-preview.is-dense .preview-list li + li { margin-top: 0; }
}

/* 本文・出典のリンクもタップ領域を確保する。文言やhrefは変えない。 */
a {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  min-width: var(--size-target);
  min-height: var(--size-target);
  max-width: 100%;
  vertical-align: middle;
}
a.btn, a.btn2 { justify-content: center; }
/* ボタンの枠線によって外形が変わっても、選択・フォーカスでレイアウトを動かさない。 */
.table-scroll:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
.in:focus-visible, button:focus-visible, a:focus-visible { outline-width: var(--focus-width); outline-style: solid; }
@media print {
  a { display: inline; min-width: 0; min-height: 0; }
}

/* 既存見出しを参照するcaption。空の余白を作らない。 */
.caption-reference { padding: 0; }
.submission-result [role="heading"] { margin: 0; font-weight: var(--font-weight-bold); line-height: var(--line-heading); }

/* AI生成の作業イメージ。比率付きの既存枠に収め、レイアウトのずれを防ぐ。 */
.photo-placeholder.has-photo { position: relative; }
.photo-placeholder.has-photo > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* 写真の注記と、スマホの表 */
.photo-note { margin-top: var(--space-2); color: var(--color-text-sub); font-size: 13px; }
@media (max-width: 767px) {
  table { min-width: 0; }
  .table-wide { min-width: 560px; }
  .n { text-align: left; }
  th { overflow-wrap: anywhere; }
  td { overflow-wrap: normal; }
  caption { word-break: break-word; }
  thead th:first-child, tbody th[scope="row"] { min-width: 4.5em; }
  th, td { padding: var(--space-2) 6px; }
}