/* 設備保全ページの図と写真。共通CSSは変更しない。 */
.hozen-hero { min-width: 0; margin: 0; }
#fv .hozen-hero { order: 8; }
.hozen-salary { --region-width: 32px; --value-width: 64px; --overtime-width: 48px; --chart-gap: 8px; }
.hozen-chart-head { display: grid; grid-template-columns: minmax(0, 1fr) var(--overtime-width); align-items: end; gap: var(--chart-gap); margin-block: var(--space-4); }
.hozen-reference-label { display: flex; flex-wrap: wrap; gap: 0 var(--space-2); align-items: center; }
.hozen-reference-label::before { content: ''; width: 28px; border-top: 2px dashed var(--color-primary); }
.hozen-overtime-heading { text-align: right; margin-top: 0; font-size: 13px; }
.hozen-salary-rows { position: relative; }
.hozen-salary .chart-row { grid-template-columns: var(--region-width) minmax(0, 1fr) var(--value-width) var(--overtime-width); gap: var(--chart-gap); align-items: center; }
.hozen-salary .chart-region { padding-top: 0; }
.hozen-overtime { font-size: 14px; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hozen-national-line { position: absolute; z-index: 1; top: 0; bottom: 0; left: calc(var(--region-width) + var(--chart-gap) + (100% - var(--region-width) - var(--value-width) - var(--overtime-width) - 3 * var(--chart-gap)) * var(--national-ratio)); border-left: 2px dashed var(--color-primary); pointer-events: none; }
.hozen-check-card { display: grid; align-content: start; }
.hozen-check-heading { display: grid; grid-template-columns: 44px minmax(0, 1fr) 24px; gap: var(--space-3); align-items: center; }
.hozen-check-icon { width: 44px; height: 44px; color: var(--color-navy); }
.hozen-check-title { font-size: 18px; font-weight: var(--font-weight-bold); line-height: 1.6; margin: 0; }
.hozen-check-title .cnum { display: inline-flex; justify-content: center; align-items: center; min-width: 24px; min-height: 24px; margin-right: 8px; color: var(--color-navy); background: var(--color-accent-bg); border-radius: 50%; font-size: 14px; }
.hozen-empty-check { width: 24px; height: 24px; border: 2px solid var(--color-control-border); border-radius: 3px; background: var(--color-bg); }
.hozen-scope, .hozen-timeline { padding: var(--space-card); border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-bg); }
.hozen-scope-map { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); position: relative; }
.hozen-scope-links { display: none; }
.hozen-scope-center { grid-column: 1 / -1; justify-self: center; display: grid; place-items: center; width: 112px; min-height: 80px; border: 2px solid var(--color-navy); border-radius: var(--radius-card); color: var(--color-bg); background: var(--color-navy); font-size: 22px; font-weight: var(--font-weight-bold); }
.hozen-scope-task { min-width: 0; padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-bg); font-size: 16px; }
.hozen-task-5 { grid-column: 1 / -1; }
.hozen-scope-types { display: grid; gap: var(--space-4); margin-top: var(--space-5); }
.hozen-scope-types .list { margin-top: var(--space-3); }
.hozen-grade-open { display: inline-block; margin-block: var(--space-5) var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-control); background: var(--color-accent-bg); color: var(--color-navy); }
.hozen-timeline-rail { position: relative; height: 124px; margin: var(--space-4) 8px 0; }
.hozen-timeline-rail::before { content: ''; position: absolute; top: 32px; left: 0; right: 0; border-top: 2px solid var(--color-navy); }
.hozen-year { position: absolute; left: var(--year-position); top: 32px; }
.hozen-year-dot { position: absolute; left: -7px; top: -6px; width: 14px; height: 14px; border: 2px solid var(--color-navy); border-radius: 50%; background: var(--color-bg); }
.hozen-year p { position: absolute; top: 20px; left: -64px; width: 128px; color: var(--color-navy); font-size: 14px; font-weight: var(--font-weight-bold); text-align: center; }
.hozen-year-1 p { top: -32px; left: -32px; width: 80px; text-align: left; }
.hozen-year-7 p { left: -128px; text-align: right; }
.hozen-experience-note { padding: var(--space-4); border-left: 3px solid var(--color-primary); background: var(--color-accent-bg); }
@media (min-width: 768px) {
  #fv .hozen-hero { grid-area: 4 / 2 / 6 / 3; align-self: start; }
  .hozen-salary { --region-width: 56px; --overtime-width: 88px; --chart-gap: 24px; }
  .hozen-overtime-heading { font-size: 14px; }
  .hozen-checklist .hozen-check-card:last-child { grid-column: 1 / -1; }
  .hozen-scope-map { display: block; min-height: 660px; }
  .hozen-scope-links { display: block; position: absolute; inset: 0; width: 100%; height: 100%; color: var(--color-border); }
  .hozen-scope-center { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); min-height: 112px; }
  .hozen-scope-task { position: absolute; width: 30%; }
  .hozen-task-1 { top: 0; left: 35%; }
  .hozen-task-2 { top: 25%; left: 0; }
  .hozen-task-3 { top: 25%; right: 0; }
  .hozen-task-4 { bottom: 10%; left: 0; }
  .hozen-task-5 { bottom: 0; right: 0; width: 38%; }
  .hozen-scope-types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #flow > .hozen-flow { max-width: var(--width-wide); grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-3); }
  #flow .hozen-flow .step { grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--space-3); padding: 0; }
  #flow .hozen-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 .hozen-flow .h3 { font-size: 18px; }
  #flow .hozen-flow .step p { font-size: 14px; }
}
@media print {
  .hozen-salary .chart-bar { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}