/* 板金加工の追加部品。添付の共通style.cssは変更しない。 */

/* ヘッダーは原稿にあるLINEボタン1つに合わせる。 */
#header > .card { grid-template-columns: minmax(0, 1fr) auto; }
#header .card > div:last-child { grid-template-columns: minmax(112px, 1fr); }

/* 本文中のリンクも、文字を変えずに44pxの操作領域を確保する。 */
a:not(.btn):not(.btn2) { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; max-width: 100%; vertical-align: baseline; }

/* 写真の比率を予約し、読み込みによる表示のずれを防ぐ。 */
#fv .bankin-scope { order: 8; }
#fv .bankin-photo-group { order: 9; min-width: 0; margin: 0; }
#fv .bankin-photo-group > .photo-placeholder { aspect-ratio: 4 / 3; }

/* 表はスマホの幅に収める（雇われ方と職業訓練の比較表だけ、枠の中で横スクロールする）。 */
.bankin-table-koyou, .bankin-table-mikeiken { min-width: 560px; }
.table-scroll :is(th, td) { overflow-wrap: anywhere; }
.table-scroll .n { font-variant-numeric: tabular-nums; }
.bankin-table-salary :is(th, td):not(:first-child) { white-space: nowrap; }
.bankin-table-salary td[colspan] { white-space: normal; }
/* スマホでは金額以外の欄を折り返して、6列の表を画面の幅に収める。 */
@media (max-width: 767px) {
  .bankin-table-salary thead th:not(:first-child), .bankin-table-salary td:nth-child(3), .bankin-table-salary td:nth-child(5), .bankin-table-salary td:nth-child(6) { white-space: normal; }
  .bankin-table-salary :is(th, td) { padding-inline: 4px; }
}
.bankin-table-work th:first-child { width: 30%; }
.bankin-table-step th:first-child { width: 12%; }
.bankin-table-step th:nth-child(2) { width: 29%; }
.bankin-table-mikeiken th:first-child { width: 24%; }
.bankin-table-mikeiken th:nth-child(2) { width: 37%; }

/* 原稿の番号付きカードは、番号と文章を並べて表示する。 */
:is(#safety, #check) .card {
  display: grid;
  grid-template-columns: var(--size-number) minmax(0, 1fr);
  gap: var(--space-4);
}
:is(#safety, #check) .card > .num + div { margin-top: 0; }

/* 横棒は0から同じ尺度。右端の破線が全国454万円の位置。 */
.bankin-chart-rows { display: grid; margin-top: var(--space-5); }
.bankin-chart-row {
  display: grid;
  grid-template-columns: 2em minmax(0, 1fr) 4.5em;
  gap: var(--space-2) var(--space-3);
  align-items: center;
  padding-block: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.bankin-chart-region { color: var(--color-navy); font-size: var(--font-note); font-weight: var(--font-weight-bold); }
.bankin-chart-track { position: relative; }
.bankin-chart-track::after { content: ""; position: absolute; top: -8px; bottom: -8px; right: 0; border-right: 2px dashed var(--color-navy); }
.bankin-chart-meta { grid-column: 2 / -1; color: var(--color-text-sub); font-size: var(--font-note); font-variant-numeric: tabular-nums; }
.bankin-reference-legend { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); margin-block: var(--space-3); font-size: var(--font-note); }
.bankin-dash-sample { width: 24px; border-top: 2px dashed var(--color-navy); }

/* 原稿の5つの手順に、番号と文字のない線画を添える。 */
#work > .stack { max-width: var(--width-wide); }
.bankin-process-card > :is(h3, p:not(.bankin-figure-caption)) { max-width: var(--width-text); margin-inline: auto; }
.bankin-figure-caption { margin-top: var(--space-5); color: var(--color-text-sub); font-size: var(--font-note); }
.bankin-process-flow {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-5);
  padding: 0;
  list-style: none;
}
.bankin-process-flow > li { position: relative; display: grid; grid-template-columns: var(--size-number) 1fr; gap: var(--space-3); min-width: 0; margin: 0; }
.bankin-process-flow > li + li { margin-top: 0; }
.bankin-process-flow > li:not(:last-child)::after { content: ""; position: absolute; top: calc(var(--size-number) + 8px); bottom: calc(-1 * var(--space-5) + 8px); left: calc(var(--size-number) / 2); border-left: 1px solid var(--color-border); }
.bankin-process-flow .bankin-icon { grid-column: 2; grid-row: 1; width: 56px; height: 56px; color: var(--color-navy); }
.bankin-process-title, .bankin-process-description { grid-column: 2; }
.bankin-process-title { font-weight: var(--font-weight-bold); line-height: 1.7; }
.bankin-process-description { font-size: var(--font-body); }

/* 教育との対応は、読み上げ順を左から右に保つ。 */
.bankin-safety-map { padding: var(--space-card); border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-bg); }
.bankin-safety-rows { display: grid; gap: var(--space-3); }
.bankin-safety-rows > div { display: grid; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-control); }
.bankin-safety-rows dt { font-weight: var(--font-weight-bold); color: var(--color-navy); }
.bankin-safety-rows dd { position: relative; margin: 0; padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.bankin-safety-rows dd::before { content: ""; position: absolute; top: -4px; left: 12px; width: 7px; height: 7px; transform: rotate(45deg); border-right: 1px solid var(--color-navy); border-bottom: 1px solid var(--color-navy); background: var(--color-bg); }
.bankin-safety-map > .small { margin-top: var(--space-4); }
.learning-stage p + p { margin-top: var(--space-2); }
.sheet-summary a { display: inline-flex; align-items: center; min-height: 44px; }

@media (min-width: 768px) {
  #fv .bankin-scope { grid-area: 8 / 1 / 9 / -1; }
  #fv .bankin-photo-group {
    grid-area: 4 / 2 / 6 / 3;
    align-self: start;
  }
  #fv .bankin-photo-group > .photo-placeholder { aspect-ratio: 16 / 9; }
  .bankin-chart-row { grid-template-columns: 3em minmax(0, 1fr) 5em 11em; gap: var(--space-4); }
  .bankin-chart-meta { grid-column: auto; }
  .bankin-safety-rows > div { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--space-5); }
  .bankin-safety-rows dd { padding: 0 0 0 var(--space-5); border-top: 0; border-left: 1px solid var(--color-border); }
  .bankin-safety-rows dd::before { top: 12px; left: -4px; transform: rotate(-45deg); }
}

@media (min-width: 900px) {
  .bankin-process-flow { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-4); }
  .bankin-process-flow > li { display: flex; flex-direction: column; align-items: flex-start; }
  .bankin-process-flow > li:not(:last-child)::after { top: calc(var(--size-number) / 2); bottom: auto; left: calc(var(--size-number) + 8px); right: 0; border-left: 0; border-top: 1px solid var(--color-border); }
  .bankin-process-title { min-height: 5.1em; }
  #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); align-content: start; gap: var(--space-4); padding-bottom: 0; }
  #flow .step:not(:last-child)::after { top: calc(var(--size-number) / 2); bottom: auto; left: calc(var(--size-number) + 8px); right: 0; width: auto; height: 1px; }
  #flow .step h3 { min-height: 3.5em; }
}