@font-face {
  font-family: "Noto Sans JP";
  src: url("../fonts/noto-sans-jp-subset.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

/* 生産技術・最終版。共通CSSを変更せず、写真と流れ図を補う。 */

/* 原稿の順序を保ち、「3つの仕事」のカードを本文の流れに置く。 */
#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; }
.fv-overview ol {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding-left: 1.5em;
}
.fv-overview li { padding-left: var(--space-1); }
.fv-overview li::marker {
  color: var(--color-navy);
  font-weight: var(--font-weight-bold);
}

.seigi-work-photo { width: 100%; }
#fv .seigi-work-photo .photo-placeholder { aspect-ratio: 4 / 3; }
.submission-result [data-complete-title] { scroll-margin-top: var(--header-offset); }

/* 統計表はスマホの幅に収める。金額・倍率は折り返さない。 */
.seigi-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;
}
.seigi-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個。 */
#header .card > div:last-child { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 768px) {
  #fv .seigi-work-photo .photo-placeholder { aspect-ratio: 16 / 9; }
  #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 {
  .seigi-stat-table { min-width: 0; }
}