/* 自動車部品メーカー：共通部品を補う表示。 */

#header > .card { grid-template-columns: minmax(0, 1fr) auto; }
#header .card > div:last-child { display: block; }
#header .card > div:last-child > a { min-width: 80px; padding-inline: 12px; }

#fv .fv-scope-note { order: 8; max-width: var(--width-text); }
#fv .fv-visual { order: 9; }
.work-photo { min-width: 0; margin: 0; }
.work-photo .photo-placeholder { aspect-ratio: 4 / 3; }
#fv .fv-visual .photo-placeholder { aspect-ratio: 4 / 3; }
.work-photo .photo-note { margin-bottom: 0; }

.table-scroll td.n { white-space: nowrap; }
/* 表はスマホの幅に収める（雇われ方の比較表だけ、枠の中で横スクロールする）。年収の表は、平均年齢・人数の欄を折り返す。 */
@media (max-width: 767px) { #salary td.n:nth-child(4), #salary td.n:nth-child(5) { white-space: normal; } }

/* 棒の全体は出荷額、濃い部分はその県の輸送用機械の構成比。 */
.shipment-chart .chart-legend { gap: 12px; }
.shipment-chart .legend-item { margin: 0; gap: 8px; align-items: flex-start; }
.shipment-chart .legend-key { margin-top: 7px; }
.shipment-total-key,
.shipment-total {
  background-color: var(--color-accent-bg);
  background-image: repeating-linear-gradient(135deg, transparent, transparent 5px, rgb(11 87 208 / .15) 5px, rgb(11 87 208 / .15) 7px);
  outline: 1px solid var(--color-primary);
}
.shipment-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
  padding-block: 20px;
  border-top: 1px solid var(--color-border);
}
.shipment-region { color: var(--color-navy); font-size: 14px; font-weight: 700; }
.shipment-values { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; font-variant-numeric: tabular-nums; }
.shipment-amount { font-weight: 700; }
.shipment-percent { color: var(--color-text-sub); white-space: nowrap; }
.shipment-track { height: 18px; margin-top: 12px; }
.shipment-total { display: block; width: var(--total-size); height: 100%; border-radius: 2px; overflow: hidden; }
.shipment-share { display: block; width: var(--transport-share); height: 100%; background: var(--color-navy); }
.shipment-chart .shipment-caution { margin-top: 16px; }

.person-figure { display: grid; place-items: center; min-height: 104px; }
.person-icon { display: block; width: 80px; height: 80px; color: var(--color-navy); }

@media (min-width: 768px) {
  #fv .fv-scope-note { grid-area: 8 / 1 / 9 / -1; }
  #fv .fv-visual { grid-area: 4 / 2 / 6 / 3; align-self: start; }
  #fv .fv-visual .photo-placeholder { aspect-ratio: 16 / 9; }
  .shipment-row { grid-template-columns: 56px minmax(0, 1fr); gap: 24px; }
}

/* 原稿の6手順を並べ替えず、見た目を横の流れ図にする。 */
@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 {
  .work-photo, .shipment-row { break-inside: avoid; }
}

/* 本文中の出典・関連リンクも44pxの操作領域を確保する。 */
a:not(.btn, .btn2) {
  display: inline-flex;
  align-items: center;
  min-width: var(--size-target);
  min-height: var(--size-target);
  max-width: 100%;
  vertical-align: middle;
}
.caption-accessible {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}