/* vi-sub.css — 下層9ページの共通ビジュアル（VISUAL-SPEC §3「下層共通」・2026-10-21）
   site-v3.css → visual.css → このファイル の順に読む。部品そのものは visual.css。 */

/* ① 見出しの帯 ---------------------------------------------------- */
/* 道は帯の地（グラデ）の上・英字の透かし（z-index:0）と中身の下 */
.pg-band.has-road > .road { z-index: -1; }
/* 人物の足元に場面の絵 160px */
.pg-band-fig--person { position: relative; }
.pg-band-fig--person > .vs-band-iso {
  position: absolute;
  width: 160px;
  max-width: none;
  left: calc(50% - 230px);
  bottom: 6px;
  max-height: none;
  z-index: 1;
}
/* 物のページ: 場面の絵 PC320 / SP200 */
.pg-band-fig--iso > img.iso { width: 320px; max-height: none; height: auto; }

/* ② 概要の欄の dt（アイコン20px＋文字） */
.v3-summary dt { display: flex; align-items: center; }
.v3-summary dt .vi--sm { margin-right: 8px; vertical-align: 0; }

/* ③ チェックの印（既存 .pg-checks の行の余白に合わせる） */
.pg-checks.check-list > li { padding-left: 40px; }
.pg-checks.check-list > li + li { margin-top: 0; }
.pg-checks.check-list > li::before { left: 2px; top: calc(18px + .85em - 11px); }

/* ④ 流れ（白い道＋番号の石＋アイコン） ----------------------------- */
.vs-flow { position: relative; }
.vs-flow > li { border-top: 0; padding: 0 32px 0 0; gap: 12px; }
.vs-flow > li::before { content: none; }
.vs-flow .v3-timeline-no.stone { letter-spacing: 0; color: var(--vi-navy); font-size: 18px; }
.vs-flow h3 { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.vs-flow h3 > span:last-child { min-width: 0; }
.vs-flow-road--h { top: 0; bottom: auto; height: 48px; }
.vs-flow-road--v { display: none; }

/* ⑤ 研修のあとの階段のアイコン（場面の絵に差し替え） */
.v3-stair-ico.iso { height: auto; }
.v3-stairs--sm .v3-stair-ico.iso { width: 72px; height: auto; }

@media (max-width: 1023px) {
  .pg-band-fig--person > .vs-band-iso { width: 128px; left: calc(50% - 190px); }
}

@media (max-width: 767px) {
  /* 帯: 物のページだけ絵を出す（人物は今のまま非表示） */
  /* SPは帯が縦長になるので、道を下半分に寄せて文字の後ろを通さない */
  .pg-band.has-road > .road { top: 64%; }
  .pg-band.has-road:has(.pg-band-fig--iso) > .road { top: 45%; }
  .pg-band-fig--iso > img.iso { width: 200px; }
  .pg-band-fig.pg-band-fig--iso { display: flex; justify-content: flex-end; margin: -48px 0 0; padding-bottom: 20px; }
  .pg-checks.check-list > li { padding-left: 36px; }
  .pg-checks.check-list > li::before { top: calc(14px + .85em - 11px); }
  /* 流れ: 縦に。石の中心（左24px）に道を通す */
  .vs-flow > li { border-left: 0; padding: 0 0 32px 64px; min-height: 48px; }
  .vs-flow > li:last-child { padding-bottom: 0; }
  .vs-flow .v3-timeline-no.stone { position: absolute; left: 0; top: 0; }
  .vs-flow h3 { margin-top: 4px; }
  .vs-flow-road--h { display: none; }
  .vs-flow-road--v { display: block; width: 48px; }
}