/* 対応範囲3列（PCのみ・SPはmono2.cssの1列にフォールバック） */
@media (min-width: 750px) { #scope .screens { grid-template-columns: repeat(3, 1fr); } }

/* 【23】当方が引き受ける作業・貴社にお願いすること: 中央コンテナ＋本文
   v28（2026-08-10）: 840→916px（左右32pxパディングを除いた中身が852px＝レビュー指定の
   「820〜900px」「850〜900px」の両方に収まる）／本文40em→47em（右側が空きすぎの指摘） */
.inner--narrow { max-width: 916px; }
#ours .step-d { max-width: 47em; }

/* 【26】貴社にお願いすること: 行頭を8px塗り丸に・行罫線を淡く */
#yours .oxlist li { border-top-color: rgba(11, 44, 85, .1); }
#yours .oxcard--do li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--kg-blue); left: 4px; top: 23px; }

/* ============================================================
   v23（2026-08-09 恒久方針適用）
   ORDER FLOW: STEPごとの大ブロック＋実画面の左右交互（.cols/.cols--rev）
   FEATURES: トップと同じ言語（白グループ枠1つ＋背景なし3列＋1px縦罫）
   ============================================================ */

/* --- ORDER FLOW --- */
#flow .fsteps { margin-top: 72px; display: grid; gap: 120px; }
#flow .fstep { gap: 72px; }

/* STEP番号: 薄青の大数字1つ（ゴースト）＋見出しを重ねる */
#flow .fstep-head { position: relative; padding-top: 52px; }
#flow .fstep-no { position: absolute; top: -8px; left: -4px; font-family: var(--font-num); font-size: 104px; font-weight: 700; line-height: 1; color: var(--kg-t1); user-select: none; pointer-events: none; }
#flow .fstep-t { position: relative; font-size: 27px; font-weight: 700; color: var(--kg-ink); line-height: 1.5; }
#flow .fstep-t small { font-family: var(--font-num); font-size: 12px; font-weight: 600; color: var(--kg-quiet); letter-spacing: .22em; margin-left: 14px; }

/* 機能項目: カードにせず罫線リストで */
#flow .fitems { margin-top: 30px; }
#flow .fitem { padding: 18px 0; }
#flow .fitem:first-child { padding-top: 0; }
#flow .fitem:last-child { padding-bottom: 0; }
#flow .fitem + .fitem { border-top: 1px solid var(--kg-line); }
#flow .fitem-t { font-size: 16.5px; font-weight: 700; color: var(--kg-ink); line-height: 1.8; }
#flow .fitem-d { font-size: 14.5px; margin-top: 6px; line-height: 1.95; max-width: 36em; }

/* 画面側: ブラウザ枠・発注スロット（枠のまま残す） */
#flow .col-visual .browser { margin: 0; max-width: none; width: 100%; }
#flow .col-visual img { max-width: 100%; margin: 0; }
#flow .imgslot { aspect-ratio: 16 / 9; width: 100%; min-height: 0; padding: 0; background: var(--kg-t2); border: 1px dashed var(--kg-blue2); border-radius: 12px; align-items: center; justify-content: center; }
#flow .browser + .imgslot { margin-top: 20px; }
#flow .imgslot .imgslot-id { align-self: center; background: none; padding: 0; color: var(--kg-quiet); font-size: 14px; font-weight: 700; letter-spacing: .1em; }
#flow .slot-cap { margin-top: 12px; font-size: 12px; line-height: 1.8; color: var(--kg-quiet); }
#flow .slot-cap-spec { font-weight: 700; letter-spacing: .04em; margin-right: 12px; }

@media (max-width: 1023px) {
  #flow .fsteps { gap: 96px; }
  #flow .fstep { gap: 44px; }
}
@media (max-width: 749px) {
  #flow .fsteps { margin-top: 48px; gap: 76px; }
  #flow .fstep { gap: 26px; }
  #flow .fstep-head { padding-top: 42px; }
  #flow .fstep-no { font-size: 84px; }
  #flow .fstep-t { font-size: 23px; }
}

/* --- FEATURES: 白グループ枠＋背景なし3列＋縦罫＋見出し上の短い青線 --- */
.fgroup { background: #fff; border-radius: 22px; padding: 44px 44px 48px; box-shadow: 0 10px 30px rgba(15, 79, 190, .06); margin-top: 56px; }
.fgroup .feats { margin-top: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 0; }
.fgroup .feat { padding: 2px 28px 0; border-left: 1px solid var(--kg-line); }
.fgroup .feat::before { content: none; }
.fgroup .feat:nth-child(3n+1) { padding-left: 0; border-left: none; }
.fgroup .feat:nth-child(3n) { padding-right: 0; }
.fgroup .feat-t { position: relative; padding-top: 16px; font-size: 18px; line-height: 1.7; }
.fgroup .feat-t::before { content: ""; position: absolute; top: 0; left: 0; width: 34px; height: 3px; border-radius: 99px; background: var(--kg-blue); }
.fgroup .feat-d { font-size: 14.5px; line-height: 1.95; margin-top: 10px; }
@media (max-width: 749px) {
  .fgroup { padding: 28px 24px 30px; margin-top: 40px; }
  .fgroup .feats { grid-template-columns: 1fr; gap: 0; }
  .fgroup .feat { padding: 18px 0; border-left: none; border-top: 1px solid var(--kg-line); }
  .fgroup .feat:nth-child(3n+1) { padding-left: 0; }
  .fgroup .feat:first-child { padding-top: 4px; border-top: none; }
}

/* ============================================================
   v25（2026-08-10 さき指示）: タブレット帯（750〜1023px）
   PC用の3列がそのまま縮んで窮屈だったため、2列へ落とす（追記のみ）
   ============================================================ */
@media (min-width: 750px) and (max-width: 1023px) {
  /* SCOPE 対応範囲: 3列 → 2列（見出しが3行に折れ、本文が1行10文字台になっていた）
     3枚なので最終行が半端になる。最後の1枚だけ横いっぱいに伸ばして穴を作らない */
  #scope .screens { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #scope .screen:last-child:nth-child(odd) { grid-column: 1 / -1; }

  /* FEATURES: 3列 → 2列。1px縦罫と左右パディングを2列基準に組み替える
     （既存の3n系ルールを一度2列用の既定へ戻してから、2n系で列端を決める） */
  .fgroup { padding: 34px 32px 38px; }
  .fgroup .feats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 0; }
  .fgroup .feat { padding: 2px 24px 0; border-left: 1px solid var(--kg-line); }
  .fgroup .feat:nth-child(3n+1) { padding-left: 24px; border-left: 1px solid var(--kg-line); }
  .fgroup .feat:nth-child(3n) { padding-right: 24px; }
  .fgroup .feat:nth-child(2n+1) { padding-left: 0; border-left: none; }
  .fgroup .feat:nth-child(2n) { padding-right: 0; }
}

/* v25: タブレット・SP共通（可読性とタップ領域） */
@media (max-width: 1023px) {
  /* 工程ラベル（PLAN/DATA…）が11pxで潰れていたため下限11.5pxへ */
  .step-t small { font-size: 11.5px; }
  /* テキストリンクのタップ領域を30px→38pxへ（高さ直指定は避けpaddingで確保） */
  .tlink { padding-top: 4px; padding-bottom: 4px; }
}

/* ============================================================
   v28（2026-08-10 デザインレビュー対応）
   ① 実画面を大きく（PCで画像側48%・文章側41%）＋実画面の枠を軽く
   ② STEP3・4のプレースホルダーをSTEP1・2と同じ枠に揃える（実画像の差し替え待ち）
   ③ 当方が引き受ける作業: 本文ブロックを852pxまで広げる（コンテナ .inner--narrow は916px）
   ④ 貴社にお願いすること: 白カードを852pxへ（同じコンテナに揃える）
   ※「代表的な機能」「対応範囲」はレビューで現状維持のため触らない
   ============================================================ */

/* --- ① PCの交互レイアウト比率: 文章41% / 余白11% / 画像48% --- */
@media (min-width: 1024px) {
  #flow .fstep.cols { grid-template-columns: 41% 48%; column-gap: 11%; }
  #flow .fstep.cols--rev { grid-template-columns: 48% 41%; }
}

/* --- ① 実画面の枠: 1px罫＋12px角丸＋ごく弱い影（強い影・強い角丸にしない） --- */
#flow .browser {
  border: 1px solid var(--kg-line);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(22, 90, 190, .08);
}

/* --- ② STEP3・4: 実画面が入る枠をSTEP1・2と同じ形で先に用意する
       中身は 4:3（1200×900相当）で高さを確保。装飾は足さず、枠内は淡青のベタ面のみ --- */
#flow .browser--slot .imgslot {
  aspect-ratio: 4 / 3;
  border: none;
  border-radius: 0;
  background: var(--kg-t2);
}
#flow .browser--slot .imgslot-id { color: var(--kg-quiet); }

/* --- ② STEP2の差し替え用スロット（IMG-08・本画像は上に入っている）は、
       実画面を大きくしたぶん空箱が目立つので16:9の箱をやめて細い帯にする --- */
#flow .browser + .imgslot { aspect-ratio: auto; min-height: 0; padding: 16px 20px; align-items: flex-start; }
#flow .browser + .imgslot .imgslot-id { align-self: flex-start; }

/* --- ③ 当方が引き受ける作業: タイムラインを852pxいっぱいに使う（右の空きを詰める） --- */
#ours .steps { max-width: none; }

/* --- ④ 貴社にお願いすること: 白カードを852pxへ拡大し中央に置く（上限は900px） --- */
#yours .oxcard { max-width: 900px; margin-left: auto; margin-right: auto; }