/* 品質管理・最終版。共通CSSは変更せず、図と原稿固有の配置を補う。 */

/* 共通FVのorder/grid-areaをこの原稿では解除し、原稿の順序を保つ。 */
#fv > .stack {
  grid-template-columns: minmax(0, 1fr);
  max-width: var(--width-text);
}
#fv > .stack > * {
  order: initial;
  grid-area: auto;
  min-width: 0;
}
#fv .fv-audience { margin-top: 0; }
.quality-definitions .def { display: grid; gap: var(--space-3); }
.quality-definitions .def p { margin: 0; }

.quality-work-photo { margin: 0; }
.quality-photo-frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-bg-alt);
}
.quality-photo-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* 工程図。帯・箱・矢印を独立したHTML要素で構成する。 */
.quality-process, .quality-path {
  padding: var(--space-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-bg);
}
.quality-process-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-3) var(--space-2);
  position: relative;
  align-items: stretch;
}
.quality-process-grid p { margin: 0; }
.quality-process-box {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 88px;
  padding: var(--space-2) 6px;
  border: 1px solid var(--color-navy);
  border-radius: var(--radius-control);
  font-size: 14px;
  font-weight: var(--font-weight-bold);
  line-height: 1.65;
  text-align: center;
  color: var(--color-navy);
}
.quality-process-box.process-1 { grid-area: 2 / 1; }
.quality-process-box.process-2 { grid-area: 2 / 2; }
.quality-process-box.process-3 { grid-area: 2 / 3; }
.quality-process-box.process-4 { grid-area: 2 / 4; }
.quality-process-qc {
  grid-area: 1 / 2;
  padding: var(--space-3) var(--space-2);
  border-radius: var(--radius-control);
  background: var(--color-navy);
  color: white;
  font-size: 14px;
  font-weight: var(--font-weight-bold);
  line-height: 1.75;
}
.quality-process-inspect, .quality-process-assurance {
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--color-navy);
  background: var(--color-accent-bg);
  color: var(--color-navy);
  font-size: 14px;
  text-align: center;
}
.quality-process-inspect.inspect-incoming { grid-area: 3 / 1; }
.quality-process-inspect.inspect-final { grid-area: 3 / 3; }
.quality-process-assurance { grid-area: 4 / 1 / 5 / -1; }
.quality-process-arrow {
  z-index: 1;
  align-self: center;
  justify-self: end;
  width: 8px;
  height: 8px;
  margin-right: -7px;
  border-top: 2px solid var(--color-navy);
  border-right: 2px solid var(--color-navy);
  transform: rotate(45deg);
}
.quality-process-arrow.arrow-1 { grid-area: 2 / 1; }
.quality-process-arrow.arrow-2 { grid-area: 2 / 2; }
.quality-process-arrow.arrow-3 { grid-area: 2 / 3; }
.quality-process > figcaption { margin-top: var(--space-4); }

/* 3つの箱は同じ重さで見せ、それぞれの入口を下に示す。 */
.quality-path-grid { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
.quality-path-box {
  padding: var(--space-4);
  border: 1px solid var(--color-navy);
  border-radius: var(--radius-control);
  background: var(--color-accent-bg);
  color: var(--color-navy);
}
.quality-path-box > p { margin: 0; }
.quality-path-box .quality-path-entry {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-navy);
  color: var(--color-navy);
}
.quality-path-arrow {
  justify-self: center;
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--color-navy);
  border-bottom: 2px solid var(--color-navy);
  transform: rotate(45deg);
}

/* 横棒の1.0倍は全行で同じ位置。数値と長さは原稿の表から生成する。 */
.quality-ratio-rows { display: grid; margin-top: var(--space-5); }
.quality-ratio-row { padding-block: var(--space-4); border-top: 1px solid var(--color-border); }
.quality-ratio-label { font-size: var(--font-note); font-weight: var(--font-weight-bold); }
.quality-ratio-plot { display: grid; grid-template-columns: minmax(0, 1fr) 64px; gap: var(--space-3); align-items: center; margin-top: var(--space-2); }
.quality-ratio-plot .chart-track { position: relative; height: 16px; }
.quality-reference-line { position: absolute; left: var(--reference-position); top: -8px; bottom: -8px; border-left: 2px dotted var(--color-text); }
.quality-ratio-row .chart-caution { margin-top: var(--space-3); }
.quality-ratio-chart > .src { margin-top: var(--space-3); }

/* 統計表はスマホの幅に収める。倍率・金額は折り返さない。 */
.hinkan-stat-table td.n { white-space: nowrap; }
#nenshu td.n > span {
  display: block;
  margin-top: var(--space-1);
  color: var(--color-text-sub);
  font-size: var(--font-table);
  font-weight: var(--font-weight-normal);
  white-space: normal;
}
.hinkan-stat-table .n { font-variant-numeric: tabular-nums; }

/* 原稿中の例文は省略せず、淡い背景で区切る。 */
#faq .ex {
  padding: var(--space-4);
  border-left: 3px solid var(--color-navy);
  border-radius: 0 var(--radius-control) var(--radius-control) 0;
  background: var(--color-bg-alt);
}

/* 原稿のヘッダーはLINEボタン1個。共通の2個用グリッドを補正する。 */
#header .card > div:last-child { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 768px) {
  .quality-photo-frame { aspect-ratio: 16 / 9; }
  .quality-process-grid { gap: var(--space-4) var(--space-5); }
  .quality-process-box { min-height: 96px; padding: var(--space-4); font-size: 16px; }
  .quality-process-qc { padding: var(--space-4); font-size: 16px; }
  .quality-process-arrow { width: 12px; height: 12px; margin-right: -17px; }
  .quality-path-grid { grid-template-columns: minmax(0,1fr) 16px minmax(0,1fr) 16px minmax(0,1fr); align-items: stretch; }
  .quality-path-box { display: flex; flex-direction: column; }
  .quality-path-box .quality-path-entry { margin-top: auto; }
  .quality-path-box > .strong { padding-bottom: var(--space-4); }
  .quality-path-arrow { align-self: center; transform: rotate(-45deg); }

  /* 既存の6手順そのものを横並びにし、文章を複製・短縮しない。 */
  #flow > .stack { max-width: var(--width-wide); grid-template-columns: repeat(6, minmax(0,1fr)); gap: var(--space-4); }
  #flow .step { display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: var(--size-number) 1fr; gap: var(--space-4); padding-bottom: 0; }
  #flow .step > .num { margin-inline: auto; }
  #flow .step:not(:last-child)::after { top: 19px; bottom: auto; left: calc(50% + 20px); width: calc(100% + var(--space-4) - 40px); height: 2px; }
  #flow .step .h3 { padding: 0; font-size: 18px; }
  #flow .step p:not(.flow-note) { font-size: 16px; }
  #flow .step .flow-note { padding: var(--space-3); }
}
@media print {
  .hinkan-stat-table { min-width: 0; }
  .quality-process, .quality-path, .quality-ratio-row { break-inside: avoid; }
}