/* マシニングセンタ・フライス盤：共通部品を補うページ固有の表示。 */

#header > .card { grid-template-columns: minmax(0, 1fr) auto; }
#header .card > div:last-child { display: block; }

/* 比率は画像を読み込む前から確保する。 */
.work-photo { min-width: 0; margin: 0; }
.work-photo .photo-placeholder { aspect-ratio: 4 / 3; }
#fv .fv-photo { order: 8; }
#fv .fv-photo .photo-placeholder { aspect-ratio: 4 / 3; }
.work-photo .photo-note { margin-bottom: 0; }

.table-scroll td.n { white-space: nowrap; }
/* 年収の表は5列。スマホでは平均年齢・労働者数の欄だけ折り返して、画面の幅に収める。 */
@media (max-width: 767px) { #salary td.n:nth-child(3), #salary td.n:nth-child(5) { white-space: normal; } }
/* 職業訓練の比較表だけ、枠の中で横スクロールする（ほかの表は画面の幅に収める）。 */

/* 全国値を各行で同じ位置に破線表示する。値はHTMLから指定する。 */
.machining-chart .chart-item { grid-template-columns: minmax(0, 1fr) 68px; }
.machining-chart .chart-row { grid-template-columns: 40px minmax(0, 1fr); }
.machining-chart .chart-track { position: relative; }
.machining-chart .chart-track::after {
  content: "";
  position: absolute;
  top: -5px;
  bottom: -5px;
  left: var(--national-size);
  border-left: 2px dashed var(--color-text);
}
.national-key {
  display: inline-block;
  width: 28px;
  margin-right: 8px;
  border-top: 2px dashed var(--color-text);
  vertical-align: middle;
}
.machining-chart .chart-legend { display: block; }
.machining-chart .chart-caution { margin-top: 4px; }

/* 元の手順の番号・見出し・本文を、そのまま流れ図として表示する。 */
#flow .flow-note { max-width: 100%; }

@media (min-width: 768px) {
  #fv .fv-photo { grid-area: 4 / 2 / 6 / 3; align-self: start; }
  #fv .fv-photo .photo-placeholder { aspect-ratio: 16 / 9; }
}

@media (min-width: 1024px) {
  #flow > .stack {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
  }
  #flow .step { display: flex; flex-direction: column; gap: 16px; padding-bottom: 0; }
  #flow .step > .num { align-self: center; }
  #flow .step > div { width: 100%; }
  #flow .step .h3 { padding-top: 0; font-size: 18px; line-height: 1.65; }
  #flow .step p { font-size: 16px; line-height: 1.8; }
  #flow .step:not(:last-child)::after {
    top: calc(var(--size-number) / 2 - 1px);
    bottom: auto;
    left: calc(50% + var(--size-number) / 2);
    width: calc(100% + 16px - var(--size-number));
    height: 2px;
  }
  #flow .step .flow-note { padding: 12px; font-size: 14px; }
}

@media print {
  .machining-chart .chart-track::after { border-color: black; }
  .work-photo { break-inside: avoid; }
  #sheet-preview .preview-list > div { grid-template-columns: 40mm minmax(0, 1fr); }
}