/* 溶接ページの図・写真。共通style.cssは変更しない。 */
.yosetsu-hero { min-width: 0; margin: 0; }
#fv .yosetsu-hero { order: 8; }
.yosetsu-icon { width: 64px; height: 64px; color: var(--color-navy); }
.yosetsu-check-card { display: flex; flex-direction: column; align-items: flex-start; }
.yosetsu-check-card .h3 { margin-top: var(--space-4); }
.yosetsu-check-label { margin-top: auto; padding-top: var(--space-4); color: var(--color-navy); }
.yosetsu-salary { --region-width: 40px; --value-width: 64px; --chart-gap: 12px; }
.yosetsu-salary .chart-row { grid-template-columns: var(--region-width) minmax(0, 1fr) var(--value-width); gap: 8px var(--chart-gap); align-items: center; }
.yosetsu-salary .chart-region { padding-top: 0; }
.yosetsu-salary .chart-track { min-width: 0; }
.yosetsu-salary .chart-caution { grid-column: 2 / -1; background: var(--color-bg); position: relative; z-index: 2; }
.yosetsu-reference-label { display: flex; gap: var(--space-2); margin-block: var(--space-4); align-items: center; }
.yosetsu-reference-label::before { content: ''; width: 28px; border-top: 2px dashed var(--color-primary); }
.yosetsu-salary-rows { position: relative; }
.yosetsu-national-reference { position: absolute; z-index: 1; top: 0; bottom: 0; left: calc(var(--region-width) + var(--chart-gap) + (100% - var(--region-width) - var(--value-width) - 2 * var(--chart-gap)) * var(--national-reference-ratio)); border-left: 2px dashed var(--color-primary); pointer-events: none; }
.yosetsu-welding-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.yosetsu-welding-type { display: grid; justify-items: center; align-content: start; gap: var(--space-4); padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-bg); text-align: center; font-size: var(--font-note); }
.yosetsu-welding-icon { width: 80px; height: 80px; color: var(--color-navy); }
@media (min-width: 768px) {
  #fv .yosetsu-hero { grid-area: 4 / 2 / 6 / 3; align-self: start; }
  .yosetsu-salary { --region-width: 56px; --chart-gap: 24px; }
  .yosetsu-welding-types { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #flow > .yosetsu-flow { max-width: var(--width-wide); grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-3); }
  #flow .yosetsu-flow .step { grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--space-3); padding: 0; }
  #flow .yosetsu-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 .yosetsu-flow .h3 { font-size: 18px; }
  #flow .yosetsu-flow .step p { font-size: 14px; }
}
@media print {
  .yosetsu-salary .chart-bar { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}