/* =========================================================================
   MOVE LP — フロー縦断レイアウト専用（2026-08-26 追加）
   index.html を「価格改定のフローを縦に長く見せ、横に課題→MOVEの答えを置く」
   構成に組み替えた際に追加した。lp.css の後に読む（トークンは全部そちら）。
   ★組み替え前の見た目は index-voices.html にそのまま残してある。
   ========================================================================= */

/* ---- 縦のタイムライン ----
   左端に1本の線。工程ごとに朱の点を打ち、線が下へ続いていく。
   レイアウトは 左=工程名の柱（スクロール中も貼り付く） / 右=課題とMOVEの答え */
.fl-list {
  list-style: none; margin: 0; padding: 0;
}
.fl-item {
  position: relative;
  display: grid; grid-template-columns: 264px 1fr;
  gap: var(--space-16);
  padding: var(--space-16) 0 var(--space-16) 56px;
  scroll-margin-top: 64px;   /* 全体像の帯から #stN へ飛ぶ。sticky nav の下に潜らせない */
}
/* 線。項目の全高を貫く（padding分も含めて途切れさせない） */
.fl-item::before {
  content: ""; position: absolute; left: 11px; top: 0; bottom: 0;
  width: 1px; background: var(--border-subtle);
}
/* 最初は点から始まり、最後は点で止まる */
.fl-item:first-child::before { top: 70px; }
.fl-item:last-child::before { bottom: auto; height: 70px; }
/* 工程の点。工程名の1行目に合わせる */
.fl-item::after {
  content: ""; position: absolute; left: 6px; top: 65px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(231, 76, 50, 0.16);
}

/* ---- 左の柱（工程名） ----
   右の課題＋答え＋実画面は縦に長い。読んでいる間も
   「いまどの工程の話か」が消えないよう、柱は貼り付かせる */
.fl-rail-inner { position: sticky; top: 92px; }
.fl-num {
  display: block; margin-bottom: var(--space-3);
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.18em;
  color: var(--accent-text); font-variant-numeric: tabular-nums;
}
.fl-name {
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem);
  line-height: 1.3;
}
.fl-name i {
  display: block; margin-top: var(--space-2);
  font-family: var(--font-mono); font-style: normal; font-size: 0.625rem;
  letter-spacing: 0.16em; color: var(--text-dim); text-transform: uppercase;
}
/* 誰の工程か（名札） */
.fl-roles { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-6); }
.fl-roles span {
  display: inline-block; padding: 3px 12px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-full);
  font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.16em;
  color: var(--text-dim); white-space: nowrap;
}
/* 役割ごとの分担がある工程（実行報告・資材レポート）は、柱に小さく分担表を置く */
.fl-duty { list-style: none; margin: var(--space-6) 0 0; padding: 0; }
.fl-duty li {
  display: grid; grid-template-columns: 64px 1fr; gap: var(--space-3);
  padding: var(--space-2) 0; border-top: 1px solid var(--border-subtle);
  font-size: 0.8125rem; color: var(--text-secondary);
}
.fl-duty li:last-child { border-bottom: 1px solid var(--border-subtle); }
.fl-duty b {
  font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.12em;
  color: var(--text-dim); font-weight: 500; padding-top: 0.3em; white-space: nowrap;
}

/* ---- 右側：これまでの面倒 ---- */
.fl-pain {
  padding-left: var(--space-6);
  border-left: 2px solid var(--border-strong);
}
.fl-label {
  display: block; margin-bottom: var(--space-4);
  font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.18em;
  color: var(--text-dim); text-transform: uppercase;
}
.fl-pain ul { list-style: none; margin: 0; padding: 0; }
.fl-pain li {
  display: grid; grid-template-columns: 18px 1fr; gap: var(--space-3);
  font-family: var(--font-serif);
  font-size: clamp(1rem, 0.92rem + 0.4vw, 1.1875rem);
  line-height: 1.7; letter-spacing: 0.02em;
  color: var(--text-secondary);
  font-feature-settings: "palt" 1;
}
.fl-pain li + li { margin-top: var(--space-3); }
.fl-pain li::before {
  content: "✕"; font-family: var(--font-sans);
  font-size: 0.75rem; color: var(--text-dim); padding-top: 0.45em;
}

/* ---- 右側：MOVEの答え ---- */
.fl-move { margin-top: var(--space-8); }
.fl-move .fl-label { color: var(--accent-text); display: flex; align-items: center; gap: var(--space-3); }
.fl-move .fl-label::before { content: ""; width: 24px; height: 1px; background: var(--accent); }
.fl-move h4 {
  font-size: clamp(1.25rem, 1rem + 0.9vw, 1.75rem);
  margin-bottom: var(--space-4);
}
.fl-move p { color: var(--text-secondary); max-width: 36em; }
.fl-move strong { color: var(--text-primary); font-weight: 600; }

/* ---- 実画面。答えの証拠。qa-shot と違い引き戻しは無し（右カラムの幅いっぱい） ----
   ★img には必ず width/height 属性を書く（lazy画像の高さを予約する）。
     無いと #stN アンカーへ飛んだあと上の画像が読み込まれて位置がズレる（実測） */
.fl-shot { margin: var(--space-8) 0 0; }
.fl-shot + .fl-shot { margin-top: var(--space-6); }
.fl-shot img {
  display: block; width: 100%; height: auto; cursor: zoom-in;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  background: var(--bg-elevated);
}
.fl-shot figcaption {
  margin-top: var(--space-3);
  font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.14em;
  color: var(--text-dim);
}

/* ---- 全体像の帯（.flow を流用）。押すとその工程へ飛ぶ ----
   flexのままだと9枚目（覚書）だけ折り返して全幅に間延びする → 9等分のグリッドで固定 */
.flow-9 { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: var(--space-2); margin-bottom: 0; }
.flow-9 .flow-step { min-width: 0; padding: var(--space-6) var(--space-2); }
a.flow-step { text-decoration: none; color: inherit; transition: border-color var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard); }
a.flow-step:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.flow-plus {
  margin-top: var(--space-3);
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.14em;
  color: var(--text-dim);
}
.flow-plus b { color: var(--accent-text); font-weight: 500; }

/* ---- 並行レーン ----
   工程の脇でずっと回っているもの。線を破線に、点を白抜きにして
   「本線ではなく並走」だと分かるようにする */
.fl-para .fl-item::before {
  background: none;
  background-image: linear-gradient(to bottom, var(--border-strong) 55%, transparent 55%);
  background-size: 1px 10px;
}
.fl-para .fl-item::after {
  background: var(--bg-base);   /* 白抜きの点。並行レーンは素地の章に置く */
  border: 2px solid var(--accent);
  width: 9px; height: 9px;
  box-shadow: none;
}
/* 並行レーンは本線より1件を軽く */
.fl-para .fl-item { padding-top: var(--space-12); padding-bottom: var(--space-12); }
.fl-para .fl-item:first-child::before { top: 70px; }
.fl-para .fl-item:last-child::before { bottom: auto; height: 70px; }

/* ---- RESPONSIVE ---- */
@media (max-width: 1280px) {
  .fl-item { grid-template-columns: 224px 1fr; gap: var(--space-12); }
}
@media (max-width: 968px) {
  /* 全体像は3列×3行に畳む */
  .flow-9 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* 柱と本文を縦に積む。線は残す（縦断の背骨なので消さない） */
  .fl-item { grid-template-columns: 1fr; gap: var(--space-8); padding: var(--space-12) 0 var(--space-12) 40px; }
  .fl-item::before { left: 8px; }
  .fl-item::after { left: 3px; top: 58px; }
  .fl-item:first-child::before { top: 62px; }
  .fl-item:last-child::before { height: 62px; }
  .fl-para .fl-item:first-child::before { top: 62px; }
  .fl-para .fl-item:last-child::before { height: 62px; }
  .fl-rail-inner { position: static; }
}
@media (max-width: 480px) {
  .fl-item { padding-left: 28px; }
  .fl-item::before { left: 5px; }
  .fl-item::after { left: 0; }
  .fl-pain { padding-left: var(--space-4); }
}

@media print {
  .fl-rail-inner { position: static; }
  .fl-item { page-break-inside: avoid; }
  .fl-shot img { max-height: 60vh; object-fit: contain; }
}