/* products-v5-hub — spec-v2 §5（担当 C、2026-09-29）。products-v5-base.css の後に読む。
   HUB の帯の位置・間隔・列だけを持つ（字の値は base）。margin の値は「出発の値」で、実測して ±4 以内で直す。 */

/* ---- HUBBOT の字の段を v5 の尺度に（hubbot-v2 の変数を差し替える） ---- */
body.pp-v5.eh-study.s55 #hub .hb { --hb-fs-1: var(--v5-fs-sub); --hb-fs-2: var(--v5-fs-h); --hb-fs-3: 16px; }

/* ---- 章 HUBBOT ---- */
body.pp-v5.eh-study.s55 #hub .pp-hb { margin-top: 89px; }   /* 実測で直した値（出発の値 88）：索引の最後のインク → 「DISCORD BOT」のインク 96（見込み 1440・1024 で 96。スマホは下の @media の 56 のまま 64） */
body.pp-v5.eh-study.s55 #hub .hb-label { margin: 0; }
body.pp-v5.eh-study.s55 #hub .hb-h3 {
  gap: var(--v5-sub-gap); margin-top: 12px;                   /* 実測で直した値（出発の値 8、+4 は上限ちょうど）：ラベル → HUBBOT の印の見える上端 16。見える端は黒い角丸の四角（#07090e、紺の地で見える）で、金の H ではない（名乗りの印と同じ基準）。見込み 16.5・16.5・16（1440・1024・390） */
  font: 600 var(--v5-fs-sub) / var(--v5-lh-sub) "Barlow Condensed", sans-serif; letter-spacing: 0.04em;
}
body.pp-v5.eh-study.s55 #hub .hb-h3 .hb-mark { width: var(--v5-sub-mark); height: var(--v5-sub-mark); }
body.pp-v5.eh-study.s55 #hub .hb .hb-fig { margin-top: 41px; }   /* 実測で直した値（出発の値 43）：HUBBOT の印の下端（黒い四角）→ 場面の題のインク 48（見込み 1440・1024 で 48。768〜1023 とスマホは下の @media の値） */
body.pp-v5.eh-study.s55 #hub .hb .dc-title { font: 700 var(--v5-fs-h) / var(--v5-lh-h) "Zen Kaku Gothic New", sans-serif; letter-spacing: 0.04em; }
body.pp-v5.eh-study.s55 #hub .hb .hb-caps { margin-top: -1.5px; }   /* 実測で直した値（出発の値 0）：場面の題 → 1 行目のインク 8（見込み 1440 で 8・7.5・7、1024 で 9・8.5・8。スマホは下の @media で 0） */
/* 1 行目（操作の流れ）は P3：16/24。2 行目（入る先）は P4：15/20 のまま */
body.pp-v5.eh-study.s55 #hub .hb-cap:not(.hb-cap--to),
body.pp-v5.eh-study.s55 #hub .hb-cap:not(.hb-cap--to) .hb-step,
body.pp-v5.eh-study.s55 #hub .hb-cap:not(.hb-cap--to) b { font-size: 16px; line-height: 24px; }
body.pp-v5.eh-study.s55 #hub .hb-cap--to,
body.pp-v5.eh-study.s55 #hub .hb-cap--to .hb-step { font-size: 15px; line-height: 20px; }

/* ---- 章 予定・日程調整：左に見出しの塊、右に凡例 → 図 2 つ → 注記 ---- */
body.pp-v5.eh-study.s55 #hub .pp-hb + .pp-flow { margin-top: 92px; }   /* 出発の値：HUB の画面の下端 → ラベルのインク 96 */
body.pp-v5.eh-study.s55 #hub .pp-flow { row-gap: 0; }
body.pp-v5.eh-study.s55 #hub .pp-flow-cap {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 32px; align-items: end; margin: 0;
}
body.pp-v5.eh-study.s55 #hub .pp-flow-cap > .pp-cap { grid-column: 1; }
body.pp-v5.eh-study.s55 #hub .pp-flow-cap > .pp-legend { grid-column: 2; align-self: end; justify-self: end; }   /* 凡例の下端 ＝ 説明の行の箱の下端 */
body.pp-v5.eh-study.s55 #hub .pp-flow > .pp-cal-fig,
body.pp-v5.eh-study.s55 #hub .pp-flow > .pp-poll { margin-top: 18.5px; }   /* 実測で直した値（出発の値 17）：説明のインク → 図の上端 24（見込み 23.6・24.4・24.1＝1440・1024・768） */
body.pp-v5.eh-study.s55 #hub .pp-flow > .pp-flow-note { margin-top: 3px; }   /* 実測で直した値（出発の値 4）：図の下端 → 注記のインク 8。注記の字が 15/24（スマホ 14/20。A の直し）になった後の値（見込み 7.5・7.8・8.1＝1440・1024・768。スマホは下の @media で 4.5） */

/* ---- 帯の最後のインク（注記）→ 帯の端 96 ---- */
body.pp-v5.eh-study.s55 #hub.pv-band { padding-bottom: 91px; }   /* 出発の値 */

/* ---- 768〜1023：日程調整 → カレンダーの順に縦に（products-page-v1.css の並びのまま） ---- */
@media (max-width: 1023px) {
  body.pp-v5.eh-study.s55 #hub .hb .hb-fig { margin-top: 39.5px; }   /* 実測で直した値：768〜1023 は印の下端 → 場面の題が 1440・1024 より 1.5 広く出るので別の値（見込み 768 で 48.5） */
  body.pp-v5.eh-study.s55 #hub .pp-flow > .pp-cal-fig { margin-top: 48px; }   /* 日程調整 → カレンダー 48（章の中） */
}

/* ---- スマホ ---- */
@media (max-width: 767px) {
  body.pp-v5.eh-study.s55 #hub .pp-hb { margin-top: 56px; }                    /* 索引 → ラベル 64 */
  body.pp-v5.eh-study.s55 #hub .hb .hb-fig { margin-top: 25px; }               /* 実測で直した値（出発の値 27）：印 → 場面の題 32（見込み 32） */
  body.pp-v5.eh-study.s55 #hub .hb .hb-caps { margin-top: 0; }                 /* スマホは題 → 1 行目が 9・8・8.5 で合っているので 0 のまま（上の −1.5 を打ち消す） */
  body.pp-v5.eh-study.s55 #hub .hb-cap:not(.hb-cap--to),
  body.pp-v5.eh-study.s55 #hub .hb-cap:not(.hb-cap--to) .hb-step,
  body.pp-v5.eh-study.s55 #hub .hb-cap:not(.hb-cap--to) b { font-size: 15px; line-height: 22px; }
  body.pp-v5.eh-study.s55 #hub .hb-cap--to,
  body.pp-v5.eh-study.s55 #hub .hb-cap--to .hb-step { font-size: 14px; line-height: 20px; }
  body.pp-v5.eh-study.s55 #hub .pp-hb + .pp-flow { margin-top: 60px; }        /* 画面 → ラベル 64 */
  body.pp-v5.eh-study.s55 #hub .pp-flow-cap { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
  body.pp-v5.eh-study.s55 #hub .pp-flow-cap > .pp-legend { grid-column: 1; justify-self: start; }
  body.pp-v5.eh-study.s55 #hub .pp-flow > .pp-poll { margin-top: 16px; }
  body.pp-v5.eh-study.s55 #hub .pp-flow > .pp-cal-fig { margin-top: 32px; }
  body.pp-v5.eh-study.s55 #hub .pp-flow > .pp-flow-note { margin-top: 4.5px; }   /* 実測で直した値：図の下端 → 注記のインク 8（注記 14/20 の後。見込み 8.8） */
  body.pp-v5.eh-study.s55 #hub.pv-band { padding-bottom: 61px; }   /* 実測で直した値（出発の値 59）：注記のインク → 帯の端 64（注記 14/20 の後。見込み 63.7〜64.2） */
}