/* 機械オペレーター・製造オペレーターの図・写真。共通CSSは変更しない。 */
#fv .fv-scope { order: 8; }
#fv .operator-hero { order: 9; min-width: 0; }
.operator-photo { min-width: 0; margin: 0; }
.operator-photo .photo-placeholder { aspect-ratio: 4 / 3; }
.operator-photo-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.operator-salary .chart-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.operator-salary .chart-row { grid-template-columns: minmax(0, 1fr); }
.operator-salary .chart-item { grid-template-columns: minmax(0, 1fr) 64px; }
.operator-ratio-rows {
  --ratio-label: 7em;
  --ratio-value: 56px;
  --ratio-gap: 8px;
  --ratio-reference: calc(var(--ratio-label) + var(--ratio-gap) + (100% - var(--ratio-label) - var(--ratio-value) - 2 * var(--ratio-gap)) / 6);
  display: grid;
  gap: 24px;
  position: relative;
  padding-top: 28px;
  padding-bottom: 8px;
  font-size: 14px;
}
.operator-ratio-row { display: grid; grid-template-columns: var(--ratio-label) minmax(0, 1fr) var(--ratio-value); gap: var(--ratio-gap); align-items: center; }
.operator-ratio-name { color: var(--color-navy); line-height: 1.65; }
.operator-ratio-reference { position: absolute; left: var(--ratio-reference); top: 26px; bottom: 0; border-left: 2px solid var(--color-navy); pointer-events: none; }
.operator-ratio-reference-label { position: absolute; top: 0; left: var(--ratio-reference); transform: translateX(-50%); color: var(--color-navy); }
.operator-ratio > .src { margin-top: var(--space-4); }
@media (min-width: 768px) {
  #fv .fv-scope { grid-column: 1 / -1; grid-row: 8; }
  #fv .operator-hero { grid-area: 4 / 2 / 6 / 3; align-self: start; }
  #fv .operator-hero .photo-placeholder { aspect-ratio: 16 / 9; }
  .operator-photo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .operator-salary .chart-row { grid-template-columns: minmax(220px, .8fr) minmax(0, 1.4fr); }
  .operator-ratio-rows { --ratio-label: 13em; --ratio-gap: 16px; }
  #flow > .operator-flow { max-width: var(--width-wide); grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-3); }
  #flow .operator-flow .step { grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--space-3); padding: 0; }
  #flow .operator-flow .step::after { top: calc(var(--size-number) / 2); bottom: auto; left: var(--size-number); right: calc(-1 * var(--space-3)); width: auto; height: 2px; }
  #flow .operator-flow .h3 { font-size: 18px; }
  #flow .operator-flow .step p { font-size: 14px; }
}
@media print {
  .operator-photo, .operator-ratio-row { break-inside: avoid; }
  .operator-salary .chart-bar, .operator-ratio .chart-bar { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}