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

/* 電験三種・最終版。今回の共通CSSに対するページ固有の補足。 */

/* 原稿の冒頭には注意書きが複数あるため、本文の順序で読める1列にする。 */
#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; }

/* このページのヘッダーはLINEボタン1個。 */
#header .card > div:last-child { grid-template-columns: minmax(0, 1fr); }

/* 新しい作業写真と担当者写真の仮枠。共通の写真部品を使う。 */
.denken-work-photo { width: 100%; }
#fv .denken-work-photo .photo-placeholder { aspect-ratio: 4 / 3; }

/* 原稿の8枚をチェックリストとして表示し、1〜3をまとまりにする。 */
#check .check-priority {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-card);
  background: var(--color-accent-bg);
}
#check .check-priority > .h3 { margin: 0; color: var(--color-navy); }
#check .card > .num { border-radius: var(--radius-control); }
#check .card-icon { width: 48px; height: 48px; }

/* 表はスマホの幅に収める（職業訓練の比較表だけ、枠の中で横スクロールする）。 */
.denken-data-table .n { white-space: nowrap; font-variant-numeric: tabular-nums; }
#kunren table { min-width: 560px; }
@media (max-width: 767px) { .denken-salary-table td.n:nth-child(3), .denken-salary-table td.n:nth-child(5) { white-space: normal; } }

@media (min-width: 768px) {
  #fv .denken-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 {
    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 {
  .denken-data-table, .denken-salary-table, #kunren table { min-width: 0; }
}