/* products-v5-base — spec-v2 §3。products-hub-hubbot-v3.css の後に読む */

/* 字の尺度（§2.1）と間隔（§2.3）の変数 */
body.pp-v5 {
  --v5-fs-name: 72px; --v5-lh-name: 72px; --v5-mark: 56px; --v5-mark-gap: 24px;
  --v5-fs-lead: 24px; --v5-lh-lead: 36px;
  --v5-fs-h: 24px;    --v5-lh-h: 32px;
  --v5-fs-sub: 32px;  --v5-lh-sub: 40px; --v5-sub-mark: 40px; --v5-sub-gap: 12px;
  --v5-fs-p: 16px;    --v5-lh-p: 28px;
  --v5-fs-note: 15px; --v5-lh-note: 24px;
  --v5-fs-idx: 16px;  --v5-lh-idx: 24px;
  --v5-gap-chapter: 96px; --v5-gap-cap: 24px;
}
@media (max-width: 767px) {
  body.pp-v5 {
    --v5-fs-name: 40px; --v5-lh-name: 40px; --v5-mark: 40px; --v5-mark-gap: 12px;
    --v5-fs-lead: 20px; --v5-lh-lead: 32px;
    --v5-fs-h: 20px;    --v5-lh-h: 28px;
    --v5-fs-sub: 24px;  --v5-lh-sub: 32px; --v5-sub-mark: 32px; --v5-sub-gap: 8px;
    --v5-fs-p: 15px;    --v5-lh-p: 26px;
    --v5-fs-note: 14px; --v5-lh-note: 20px;
    --v5-fs-idx: 15px;  --v5-lh-idx: 24px;
    --v5-gap-chapter: 64px; --v5-gap-cap: 16px;
  }
}

/* ---- 冒頭の目次：2 行に積み、各行は「操作リンク ＋ 一言」 ---- */
/* 審査の直し（主指揮 2026-09-29）：2 行の一言の左端をそろえるため、目次を「操作リンク｜一言」の 2 列の格子にする */
body.pp-v5.eh-study.s55 .sp-opener .pp-index { display: grid; justify-items: start; row-gap: 0; grid-template-columns: max-content max-content; column-gap: 24px; align-items: baseline; }
body.pp-v5.eh-study.s55 .sp-opener .pp-idx { display: contents; }
body.pp-v5.eh-study.s55 .sp-opener .pp-what {
  font: 500 15px/24px "Zen Kaku Gothic New", sans-serif; letter-spacing: 0.02em;
  color: rgba(243, 236, 220, 0.78); white-space: nowrap;
}
@media (max-width: 767px) {
  body.pp-v5.eh-study.s55 .sp-opener .pp-index { column-gap: 16px; }
  body.pp-v5.eh-study.s55 .sp-opener .pp-what { font-size: 14px; line-height: 20px; }
}
/* .pp-index の margin-top（題字 → 目次 24／スマホ 16）と .pp-u は今の値のまま。
   行の間隔は .pp-u の押せる高さ（48／スマホ 44）がそのまま字の間隔になる。 */

/* ---- 両帯の格子：行の間を 0 にし、各章の間隔は B・C が margin で持つ ---- */
body.pp-v5.eh-study.s55 .pv-band .pp-grid { row-gap: 0; }

/* ---- 両帯の名乗り（.pv-id）：全幅。1 行目＝印と製品名／右端に操作、2 行目＝リード ---- */
body.pp-v5.eh-study.s55 .pv-band .pv-id {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 32px; align-items: end;
  margin: 0; padding: 0;
}
body.pp-v5.eh-study.s55 .pv-band .pv-id .pv-name {
  grid-column: 1; grid-row: 1;
  gap: var(--v5-mark-gap);
  margin: -13px 0 0;                /* 実測で直した値（出発の値 −8）：帯の端 → 最初のインク 96。STUDIO の印の SVG は内側に余白がある（56 で上 5）ので、箱ではなく見える端で合わせた（細部基準 §3 光学補正）。見込み STUDIO 96.0（HUB は下の規則で −10） */
  font: 600 var(--v5-fs-name) / var(--v5-lh-name) "Barlow Condensed", sans-serif; letter-spacing: 0.04em;
}
body.pp-v5.eh-study.s55 .pv-band .pv-id .pv-name img { width: var(--v5-mark); height: var(--v5-mark); }
/* オーナー 2026-09-30「PRODUCT画面のアイコン、タイトルとサイズあってないよ、小さい」：STUDIO の歯車は SVG の内側の余白のため、見える高さが枠の 83%（56 で 45）しかなく、題字の大文字（51）より小さかった。
   見える高さを HUB の印（枠いっぱい 56）とそろえるため枠を 1.2 倍にし、行の高さと題字の位置を動かさないよう、上下と右の余白を打ち消す。題字の大文字の中心に合わせて下へ寄せる（主指揮、画素で実測） */
body.pp-v5.eh-study.s55 #studio.pv-band .pv-id .pv-name img {
  width: calc(var(--v5-mark) * 1.248); height: calc(var(--v5-mark) * 1.2);
  margin: calc(var(--v5-mark) * -0.1) calc(var(--v5-mark) * -0.248) calc(var(--v5-mark) * -0.1) 0;
  transform: translateY(calc(var(--v5-mark) * 0.0625));
}
/* 歯車を大きくして見える上端が 2px 上がった分、帯の端 → 最初のインクを 96（スマホ 64）に戻す（実測 94・62 → 96・64） */
body.pp-v5.eh-study.s55 #studio.pv-band .pv-id .pv-name { margin-top: -11px; }
@media (max-width: 767px) {
  body.pp-v5.eh-study.s55 #studio.pv-band .pv-id .pv-name { margin-top: -2px; }
}
/* 実測で直した値：HUB の印は黒い角丸の四角（#07090e、56 で内側の余白 1.75）で、紺の地の上で見える。見える端は四角の上端なので、字ではなく四角で合わせる。
   帯の上端が小数の位置に来る（上の STUDIO の帯の高さが小数）ため、±0.5 の揺れの真ん中に置く（−9.5 では A・B・C の直しの後に 1440 96.4・1024 96.6・768 96.8 と下に寄ったので −10。見込み 96.4・95.6・95.8）。スマホは下の @media の値が勝つよう、ここは 768 以上に限る */
@media (min-width: 768px) {
  body.pp-v5.eh-study.s55 #hub.pv-band .pv-id .pv-name { margin-top: -10px; }
}
body.pp-v5.eh-study.s55 .pv-band .pv-id .pv-u {
  grid-column: 2; grid-row: 1; align-self: end; justify-self: end;
  margin: 0 0 -2px;                 /* 出発の値：操作の字のインクの下端 ＝ 製品名のインクの下端（±1） */
}
body.pp-v5.eh-study.s55 .pv-band .pv-id .pv-lead {
  grid-column: 1 / -1; grid-row: 2;
  margin: 10px 0 0;                 /* 実測で直した値（出発の値 9）：製品名のインクの下端 → リードのインクの上端 24（1440 の見込み STUDIO 23.5・HUB 24.0） */
  font: 700 var(--v5-fs-lead) / var(--v5-lh-lead) "Zen Kaku Gothic New", sans-serif; letter-spacing: 0.02em;
  color: var(--pv-ink);
}
body.pp-v5.eh-study.s55 .pv-band .pv-id .pv-lead span { display: inline; }   /* ≥768 は 1 行 */

/* ---- 両帯の索引（ol.pp-feats）：名前だけ、1 行に 4 つ ---- */
body.pp-v5.eh-study.s55 .pv-band .pp-feats {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; gap: 16px 48px;
  margin: 22px 0 0;                 /* 実測で直した値（出発の値 20）：リードのインク → ラベルのインク 32（1440 の見込み 31.5） */
  padding: 0; list-style: none;
}
body.pp-v5.eh-study.s55 .pv-band .pp-feats li { display: grid; grid-template-columns: auto minmax(0, 1fr); justify-content: start; column-gap: 8px; margin: 0; }   /* 実測で直した値：auto auto では、下の名前が番号とラベルより広いとき余りが 2 列に割り振られ、番号 → ラベルが 8〜39 と不揃いになった。2 列目を 1fr にして 8 にそろえる */
body.pp-v5.eh-study.s55 .pv-band .pp-feats .pp-no,
body.pp-v5.eh-study.s55 .pv-band .pp-feats .pp-en { font: 600 13px/16px "Barlow Condensed", sans-serif; letter-spacing: 0.04em; color: var(--pv-kicker); }
body.pp-v5.eh-study.s55 .pv-band .pp-feats b {
  grid-column: 1 / -1; margin: 0;   /* ラベル → 名前のインク 8（13/16 と 16/24 の余りで 8 になる） */
  font: 700 var(--v5-fs-idx) / var(--v5-lh-idx) "Zen Kaku Gothic New", sans-serif; letter-spacing: 0.04em; color: var(--pv-ink);
}

/* ---- 章の文の共通の型（B・C が使う。B・C は字の値を上書きしない） ---- */
body.pp-v5.eh-study.s55 .pv-band .pp-label { display: flex; gap: 16px; margin: 0; font: 600 13px/16px "Barlow Condensed", sans-serif; letter-spacing: 0.04em; color: var(--pv-kicker); }
body.pp-v5.eh-study.s55 .pv-band .pp-label .pv-en { font: inherit; letter-spacing: inherit; color: inherit; }
body.pp-v5.eh-study.s55 .pv-band .pp-fname {
  display: block; margin: 8px 0 0;  /* 出発の値：ラベル → 題のインク 16 */
  font: 700 var(--v5-fs-h) / var(--v5-lh-h) "Zen Kaku Gothic New", sans-serif; letter-spacing: 0.04em; color: var(--pv-ink);
}
body.pp-v5.eh-study.s55 .pv-band .pp-fdesc {
  display: block; margin: -3.5px 0 0; /* 実測で直した値（出発の値 −5）：題 → 説明のインク 8 */
  font: 500 var(--v5-fs-p) / var(--v5-lh-p) "Zen Kaku Gothic New", sans-serif; color: var(--pv-ink-2);
}
/* 実測で直した値：.pv-band では詳細度 (0,5,1) で、後から読まれる type-floor-v1.css の :is(#products, .pv-band) .pv-note（(1,3,1)）に負け、HUB の .pp-flow-note が 16/27.2（スマホ 15/25.5）になった。帯の id にして (1,4,1) で勝たせる */
body.pp-v5.eh-study.s55 :is(#studio, #hub) .pp-fnote,
body.pp-v5.eh-study.s55 :is(#studio, #hub) .pv-note,
body.pp-v5.eh-study.s55 :is(#studio, #hub) .pp-flow-note {
  font: 500 var(--v5-fs-note) / var(--v5-lh-note) "Zen Kaku Gothic New", sans-serif; color: var(--pv-ink-3);
}
body.pp-v5.eh-study.s55 .pv-band .pp-cap { display: block; margin: 0; }

/* ---- スマホの名乗り：1 列。製品名 → リード（2 行）→ 操作 → 索引 2×2 ---- */
@media (max-width: 767px) {
  body.pp-v5.eh-study.s55 .pv-band .pv-id { grid-template-columns: minmax(0, 1fr); }
  body.pp-v5.eh-study.s55 .pv-band .pv-id .pv-name { margin-top: -4px; }       /* 実測で直した値（出発の値 0）：帯の端 → 最初のインク 64。STUDIO は印の上端（SVG の内側の余白 40 で上 3.5）が先に来る（見込み 63.5） */
  body.pp-v5.eh-study.s55 #hub.pv-band .pv-id .pv-name { margin-top: -1px; }   /* HUB の印は黒い角丸の四角（40 で内側の余白 1.25）。見える端は四角の上端（見込み 63.7） */
  body.pp-v5.eh-study.s55 #hub.pv-band .pv-id .pv-lead { margin-top: 8px; }    /* HUB は四角の下端が字の下端より 2.5 低いので、四角の下端 → リードのインク 16 にする（見込み 16.0） */
  body.pp-v5.eh-study.s55 .pv-band .pv-id .pv-lead { margin-top: 6px; }        /* 出発の値：製品名 → リード 16 */
  body.pp-v5.eh-study.s55 .pv-band .pv-id .pv-lead span { display: block; }
  body.pp-v5.eh-study.s55 .pv-band .pp-fdesc { margin-top: -2.5px; }   /* スマホ：題 20/28 → 説明 15/26 のインク 8 */
  body.pp-v5.eh-study.s55 .pv-band .pv-id .pv-u { grid-column: 1; grid-row: 3; justify-self: start; margin: -12px 0 0; }  /* 実測で直した値（出発の値 −8）：リードのインクの下端 → 操作の字のインクの上端 24（見込み 24.0） */
  body.pp-v5.eh-study.s55 .pv-band .pp-feats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 16px; margin-top: 28px; }   /* 出発の値：操作の下線 → ラベル 32 */
}