@charset "utf-8";
/* ============================================================
 *  /flow/ 特注品のご相談から納品までの流れ（縦レイアウト）
 *  トップ「製作の流れ」と統一トーン（ライト・計測器調）
 *  すべて .flow-page 配下にスコープ
 * ============================================================ */
.flow-page {
  --navy:#164a84; --blue:#1d61ae; --blue2:#5383c3; --ink:#16233a; --sub:#5a6a80;
  --line:#e2e6ec; --paper:#ffffff; --paper2:#f5f7fa; --accent:#1d61ae;
  background:var(--paper); color:var(--ink); line-height:1.8;
  padding: clamp(5.5em, 12vh, 8em) 1.2rem clamp(4rem,10vh,7rem);
}
.flow-page .mono { font-family:ui-monospace,"SF Mono","Menlo","Consolas","Roboto Mono",monospace; font-variant-numeric:tabular-nums; }
.flow-page .serif { font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif; }
.flow-page .fp-wrap { max-width:60em; margin:0 auto; }

/* 見出し（他セクションと統一） */
.fp-head { text-align:center; margin-bottom:1rem; }
.fp-head .en { display:block; font-size:.8rem; letter-spacing:.24em; font-weight:700; color:var(--blue); }
.fp-head .ja { display:block; font-size:clamp(1.8rem,4.5vw,2.6rem); font-weight:600; color:var(--navy); margin-top:.25em; letter-spacing:.05em; line-height:1.3; }
.fp-head .ja::after { content:""; display:block; width:2.4em; height:3px; margin:.6em auto 0; border-radius:3px; background:linear-gradient(90deg,var(--blue),var(--blue2)); }
.fp-lead { text-align:center; color:var(--sub); max-width:52ch; margin:0 auto 3.5rem; font-size:1rem; }

/* サブ見出し */
.fp-subhead { text-align:center; font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif; font-size:1.4rem; font-weight:600; color:var(--navy); margin-bottom:.4rem; letter-spacing:.03em; }
.fp-subhead .en { display:block; font-family:ui-monospace,"SF Mono","Consolas",monospace; font-size:.7rem; letter-spacing:.22em; color:var(--blue); font-weight:700; margin-bottom:.3rem; }
.fp-sublead { text-align:center; color:var(--sub); font-size:.92rem; margin-bottom:2rem; }

/* ==== 縦タイムライン（工程）：ステップ列ごと中央に寄せる ==== */
.ftl { position:relative; width:100%; max-width:500px; margin:0 auto; }
.ftl::before { content:""; position:absolute; left:17px; top:.6em; bottom:1.2em; width:2px; background:linear-gradient(var(--navy),var(--blue2)); }

/* ==== 量産・追加発注（2回目以降）の続きルート ==== */
.ftl-branch { width:100%; max-width:500px; margin:2.6rem auto 4.5rem; }
.branch-note { text-align:center; font-size:.86rem; color:var(--sub); margin:0 0 1.6rem; }
.branch-note::before { content:"↓"; display:block; color:var(--blue2); font-size:1.3rem; line-height:1; margin-bottom:.5rem; }
.branch-note b { color:var(--navy); }
.ftl-repeat::before { background:none; width:0; border-left:2px dashed var(--blue2); left:16px; }
.ftl-repeat .ftl-step { padding-bottom:2rem; }
.ftl-repeat .node { background:#fff; border:2px solid var(--blue); box-shadow:none; }
.ftl-repeat .st-title { color:var(--blue); font-size:1.05rem; }
.loop { font-size:.72rem; color:var(--blue); border:1px dashed var(--blue2); border-radius:999px; padding:.18em .8em; margin-left:.2rem; white-space:nowrap; }
.ftl-step { position:relative; padding:0 0 2.4rem 3.4rem; }
.ftl-step:last-child { padding-bottom:0; }
.ftl-step .node { position:absolute; left:0; top:-2px; width:36px; height:36px; border-radius:50%; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; font-size:.82rem; font-weight:700; box-shadow:0 4px 12px rgba(22,74,132,.25); z-index:1; }
.ftl-step .st-head { display:flex; align-items:baseline; gap:.9rem 1.1rem; flex-wrap:wrap; }
.ftl-step .st-title { font-weight:700; font-size:1.2rem; color:var(--navy); letter-spacing:.02em; }
.ftl-step .st-term { font-size:.78rem; color:var(--blue); border:1px solid var(--line); background:var(--paper2); border-radius:999px; padding:.25em .9em; white-space:nowrap; }
.ftl-step .st-term b { color:var(--navy); }
.ftl-step .st-desc { color:var(--sub); margin-top:.5rem; font-size:.94rem; max-width:46ch; }

/* ==== 対応可能仕様範囲 ==== */
.fp-spec .grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.fp-spec .cell { background:var(--paper); padding:1.5rem 1.6rem; }
.fp-spec .k { font-size:.72rem; letter-spacing:.14em; color:var(--sub); text-transform:uppercase; }
.fp-spec .v { font-size:1.35rem; font-weight:600; color:var(--navy); margin-top:.35rem; letter-spacing:-.01em; }
.fp-spec .v small { font-size:.6em; color:var(--sub); font-weight:400; margin-left:.15em; }

.fp-note { margin-top:1.2rem; font-size:.8rem; color:#b25b00; background:#fff5e9; border:1px solid #ffe0b8; border-radius:6px; padding:.5em .9em; display:inline-block; }

.fp-cta { text-align:center; margin-top:3.5rem; }
.fp-cta a { display:inline-flex; align-items:center; gap:.6rem; background:var(--navy); color:#fff; text-decoration:none; padding:.9em 3em; border-radius:6px; font-weight:700; font-size:1rem; transition:opacity .2s,transform .2s; }
.fp-cta a:hover { opacity:.9; transform:translateY(-1px); }

@media (max-width:640px) {
  .ftl-step .node { width:30px; height:30px; font-size:.72rem; }
  .ftl-step { padding-left:2.8rem; }
  .ftl::before { left:14px; }
  .fp-spec .v { font-size:1.15rem; }
}