/* 食品工場・最終版。共通style.cssは変更せず、原稿固有の構造だけ補う。 */

/* ヘッダーの原稿にはLINEボタンが1つだけある。 */
#header .card > div:last-child {
  grid-template-columns: minmax(0, 1fr);
}

/* この段階では原稿順の表示を維持。長い導入文と注記が重ならないようにする。 */
#fv > .stack {
  grid-template-columns: minmax(0, 1fr);
}
#fv > .stack > * {
  grid-area: auto;
  order: initial;
}
.fv-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* 表はスマホの幅に収める（雇われ方の比較表だけ、枠の中で横スクロールする）。金額・倍率は折り返さない。 */
.table-scroll td.n { white-space: nowrap; }
@media (max-width: 767px) { #salary td.n:nth-child(3), #salary td.n:nth-child(5), #keiken td.n { white-space: normal; } }
.table-scroll .n {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.work-photo { margin: 0; min-width: 0; }
.work-photo img {
  width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius-card); background: var(--color-bg-alt);
}
.hero-photo { max-width: 760px; }
.work-photos { display: grid; gap: var(--space-5); }
.food-chart-rows { display: grid; margin-top: var(--space-4); }
.food-chart-row {
  display: grid; grid-template-columns: 2.5em minmax(0,1fr) 4.5em;
  gap: 4px 10px; align-items: center; padding-block: 16px;
  border-top: 1px solid var(--color-border);
}
.food-chart-track { position: relative; height: 18px; background: var(--color-bg-alt); }
.food-chart-track::after {
  content: ""; position: absolute; left: var(--national-position); top: -16px;
  bottom: -34px; border-left: 2px dashed var(--color-text-sub);
}
.food-chart-row:last-child .food-chart-track::after { bottom: -16px; }
.food-chart-bar { display: block; height: 100%; background: var(--color-primary); border-radius: 2px; }
.food-chart-age { grid-column: 2 / -1; font-size: 13px; color: var(--color-text-sub); }
.national-key { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 14px; }
.national-key::before { content: ""; width: 28px; border-top: 2px dashed var(--color-text-sub); }
.food-salary-chart > .src { margin-top: 20px; }
.food-salary-chart .chart-region { padding: 0; }
.food-salary-chart .chart-value { background: white; }
.food-flow .step { min-width: 0; }
.food-flow .step .flow-note { font-size: 14px; }
#staff .photo-placeholder { border-radius: var(--radius-card); }
[data-complete-title]:focus-visible { outline: 3px solid var(--color-primary); }
@media (min-width: 768px) {
  .hero-photo img { aspect-ratio: 16 / 9; }
  .work-photos { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .food-chart-row { grid-template-columns: 3em minmax(0,1fr) 5em 5em; gap: 16px; }
  .food-chart-age { grid-column: auto; }
  .food-chart-track::after { bottom: -17px; }
  #flow > .food-flow { max-width: var(--width-wide); grid-template-columns: repeat(6,minmax(0,1fr)); gap: 16px; }
  .food-flow .step { display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
  .food-flow .step > .num { align-self: center; }
  .food-flow .step:not(:last-child)::after {
    top: 20px; left: calc(50% + 20px); width: calc(100% - 24px); height: 2px; bottom: auto;
  }
  .food-flow .step .h3 { font-size: 17px; line-height: 1.7; }
  .food-flow .step p { font-size: 15px; line-height: 1.85; }
}
@media print {
  .food-chart-track, .food-chart-bar { print-color-adjust: exact; }
  .food-flow .step { break-inside: avoid; }
}