/* products-entry-v1 — ホームの PRODUCTS を「入口の帯」にする。2026-09-30。
   rising-v10f-entry.html の head の最後（type-floor-v1.css・detail-fix-v1.css・products-fit-v1.css の後）で読む。セレクタは #products.pve の中だけ。
   オーナーの決定（2026-09-30）「役割を 3 つにはっきり分ける」：ホームの製品は入口の帯だけ（製品名・一言・コンセプトカラーの地・PRODUCTS への導線）。
   図は置かない（タイムスタンプ・SNSクリップ・テンプレート・HUBBOT は PRODUCTS のページ、機能の網羅は各製品の LP）。
   骨組み：v12 の名乗り .pc-mast（products-home-v12.css）をそのまま使い、帯の中身を名乗りだけにする。
     1 行目：マーク＋製品名（帯で最大の文字。1440 以下 72、1920 で 96、スマホ 40）と、右ガターの EXPLORE（製品名の基線にそろえる。NEWS の見出しと ALL NEWS と同じ組み）
     2 行目：一言（20、スマホ 18。PRODUCTS の目次と同じ製品の札）
     スマホ：EXPLORE は 3 行目（v12 と同じ）。
   2 つの帯は同じ組み。地は products-parts-v3.css の帯の地のまま（STUDIO：暖かい墨 #1d1a16、HUB：#1b1e27 と青写真の格子）。境目は線を引かず地を切り替えるだけ。
   縦の寸法（見えているインクで測る。docs/DESIGN-DETAIL-STANDARD.md §2・§3。HUB のマークの暗い四角 #07090e も見えている端として数える）
     帯の端 → 最初のインク（マークか製品名の上端）64 ／ 最後のインク → 帯の端 64（PC は一言、スマホは EXPLORE の下線）
     PC：製品名の基線 → 一言のインク 24（v12 と同じ）
     スマホ：マーク（名乗りの行でいちばん下のインク。基線の 4 下）→ 一言のインク 16 ／ 一言のインク → EXPLORE の字 24（v12 と同じ）
     帯の上下は 8 × 8u の 64。背の低い画面でも同じ（products-fit-v1 の 40 は図を 1 画面に収めるための詰めなので、入口の帯では使わない）。
     PRODUCTS の見出しの周り（LIVE → 見出し 96、見出し → 帯 32）と、HUB の帯の端 → NEWS の見出し 96（スマホ 64）は v12・共通の枠のまま。
   高さの目安：1440 で 2 つの帯の合計が画面（900）の約半分 → 実測 224 ＋ 226 ＝ 450（節全体 501。v12 は 1516）。
   実測の結果（10 幅）：上の端・下の端 64、製品名の基線 → 一言 24（スマホはマーク → 一言 16）。1920 の STUDIO だけ上の端 65（帯の上端の端数による ±1）。
   実測：research-refresh/round55/direction-reset/brand-roles/home/_ink.mjs（部品ごとのインク）・_shoot.mjs（撮影と高さ）
   仕上げ（2026-09-30、審査の直し）：§4 帯の全面を押せる（覆いのリンク .pve-hit、HTML の各帯の最初）、§5 HUB の格子の線を 1.5 倍。 */

/* ================= 1. 製品名の大きさ =================
   products-fit-v1 は 1024 以上で、図を 1 画面に収めるための画面の高さの上限（--pv-studio-u）を製品名にも掛けていた。
   入口の帯に図はないので、v12 の式（列の倍率だけ）に戻す：1440 以下 72、1920 で 96（列 1557 × 72 / 1168）。スマホは 40（v12 と同じ）。 */
#products.pv11.pve { --pv-fs-1: clamp(40px, calc(var(--site-max, 1168px) * 72 / 1168), 104px); }
@media (max-width: 767px) {
  #products.pv11.pve { --pv-fs-1: 40px; }
}

/* ================= 2. 帯 ================= */
#products.pv11.pve .pv-band {
  padding-top: 64px;
  padding-bottom: 64px;
}

/* ================= 3. 名乗り ================= */
/* 上の端：STUDIO は v12 の値のまま（製品名のインクが 64）。HUB はマークの暗い四角が大文字の上端より 2 上に出るので、
   v12 の −1px を外して四角の上端を 64 にする（v12 は帯の上 96 の組みで測った値） */
#products.pv11.pve .pv-band--hub .pc-mast { margin-top: calc(var(--pv-fs-1) * -0.145); }
/* PC：最後のインクは一言。一言の行の箱（20 / 32）の下の余り（字のインクの下端 → 行の箱の下端 6）を引き、一言のインク → 帯の端を 64 にする */
#products.pv11.pve .pc-lead { margin-bottom: -6px; }

@media (max-width: 767px) {
  /* 上の端：STUDIO はマーク（歯車）の上端、HUB はマークの暗い四角の上端（大文字の上端より 4 上）を 64 に。
     帯の上端の位置には端数があり（ヒーローの高さによる）、インクの行が ±1 動くので、0.5 刻みで 360・390・430 の実測の真ん中に置く */
  #products.pv11.pve .pc-mast { margin-top: -7.5px; }
  #products.pv11.pve .pv-band--hub .pc-mast { margin-top: -4.5px; }
  /* 名乗りの行 → 一言：2 つのマークはどちらも基線の 4 下まで出るので、マークの下端 → 一言のインクを 16 にそろえる。
     STUDIO はマーク（1em、基線の 0.17em 下まで）が行の箱を押し下げているぶん、v12 の 7 のままで 16。HUB は 2 足す */
  #products.pv11.pve .pv-band--hub .pc-lead { margin-top: 9px; }
  /* 最後のインクは EXPLORE の下線（押せる箱の下端の線）なので、一言の下の余りは引かない */
  #products.pv11.pve .pc-lead { margin-bottom: 0; }
  /* 一言のインク → EXPLORE の字 24（v12 の −11 は 23 だった。押せる箱 48 は上へ伸びる） */
  #products.pv11.pve .pc-u { margin-top: -10px; }
}

/* ================= 4. 帯全体を押せるようにする（審査 2026-09-30 の問題 1） =================
   押せるのが EXPLORE（135×48）だけだったので、帯の全面（1440 で 1440×224）を押せるようにする。
   EXPLORE の ::after は motion-system-v3.css の「描ける下線」に使われているので、覆いには使わない。
   代わりに帯の最初に、マウス用の覆いのリンク .pve-hit（EXPLORE と同じ行き先、aria-hidden・tabindex=-1）を置く。
   キーボードと読み上げは今までどおり EXPLORE の 1 つだけ（同じリンクが 2 回読まれない）。
   重なり：帯の地（::before・::after、z −1）→ 覆い（z 0）→ 名乗り（z 1、字は押せる面をふさがない pointer-events:none、EXPLORE だけ押せる）。
   帯に乗ったときの変化は 1 つだけ：地を 4% 明るくする（白 4% を字の下に重ねる）。EXPLORE そのものに乗ったときは、今までどおり下線の引き直し。 */
#products.pv11.pve .pve-hit {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  background: rgba(255, 255, 255, 0);
  transition: background-color 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
#products.pv11.pve .pv-band:hover .pve-hit { background: rgba(255, 255, 255, 0.04); }
#products.pv11.pve .pc-mast { position: relative; z-index: 1; pointer-events: none; }
#products.pv11.pve .pc-mast a { pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
  #products.pv11.pve .pve-hit { transition: none; }
}

/* ================= 5. HUB の格子を 1 段だけ見えるようにする（審査の問題 2・任意） =================
   products-parts-v3.css の線 rgba(255,255,255,0.018) を 1.5 倍の 0.027 に。格子の大きさ・位置・下へ消える覆いは同じ。STUDIO には何も足さない。 */
#products.pv11.pve .pv-band--hub::after {
  background:
    linear-gradient(rgba(255, 255, 255, 0.027) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.027) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: left max(var(--site-pad, 24px), calc((100vw - var(--site-max, 1168px)) / 2)) top 32px;
}