/* 最終版：溶接の資格ページ専用。共通style.cssへの変更はありません。 */

/* このページのヘッダーは相談ボタンが1つ。空の2列目を作らない。 */
#header > .card { grid-template-columns: minmax(0, 1fr) auto; }
#header .card > div:last-child { grid-template-columns: minmax(112px, 1fr); }

/* 共通のFV配置を使いつつ、追加の注意カードも原稿の位置に置く。 */
#fv .fv-qualification-note { order: 8; }
#fv .fv-photo-group { order: 9; min-width: 0; }
#fv .photo-placeholder { aspect-ratio: 4 / 3; }
#fv .fv-photo-group .photo-note { margin-top: var(--space-2); }

/* 4列の比較表だけ、枠の中で横スクロールする（ほかの表は画面の幅に収める）。 */
#hayami .qualification-table {
  min-width: 560px;
  table-layout: fixed;
}
#hayami th:first-child { width: 88px; }
#sagyo th:first-child { width: 34%; }
#jis th:first-child { width: 22%; }
.qualification-table td { overflow-wrap: anywhere; }
.qualification-table :is(th, td) { font-variant-numeric: tabular-nums; }

/* 資格の確認カード。原稿の番号と文章をそのまま使用。 */
#check .checklist .card {
  display: grid;
  grid-template-columns: var(--size-number) minmax(0, 1fr);
  gap: var(--space-4);
}
#check .card > .num + div { margin-top: 0; }
#check .card-icon {
  float: right;
  width: 48px;
  height: 48px;
  margin: 0 0 12px 12px;
  color: var(--color-navy);
}
#check .card > div { display: flow-root; }
#check .card-icon + .h3 { margin-top: 0; }
.qualification-group {
  padding: 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-accent-bg);
}
.qualification-group-title {
  margin-bottom: 16px;
  color: var(--color-navy);
  font-weight: 700;
  font-size: 18px;
}

/* 紹介できる範囲は、原稿の見出しと枠線で区別する。 */
#range :is(.ok, .ng) {
  padding: var(--space-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-bg);
}
#range .ok { border-left: 4px solid var(--color-primary); }
#range .ng { border-left: 4px solid var(--color-navy); }
#range :is(.ok, .ng) > .strong { color: var(--color-navy); }

@media (min-width: 768px) {
  #fv .fv-qualification-note { grid-area: 8 / 1 / 9 / -1; }
  #fv .fv-photo-group {
    grid-area: 4 / 2 / 6 / 3;
    align-self: start;
  }
  #fv .photo-placeholder { aspect-ratio: 16 / 9; }
  .qualification-group { padding: 24px; }
  #flow .step {
    grid-template-columns: 1fr;
    grid-template-rows: var(--size-number) auto;
    align-content: start;
    gap: var(--space-3);
    padding-bottom: 0;
  }
  #flow > .stack { max-width: var(--width-wide); grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
  #flow .step:not(:last-child)::after {
    top: calc(var(--size-number) / 2 - 1px);
    left: var(--size-number);
    right: -16px;
    bottom: auto;
    width: auto;
    height: 2px;
  }
  #flow .step .h3 { font-size: 18px; }
  #flow .step p { font-size: 16px; }
}