/* products-entry-cols-v1 — ホームの PRODUCTS の 2 つの帯（入口の帯、products-entry-v1.css）を、左右 2 列の 1 つの面にする。2026-11-08。
   オーナー決定「空いた所を詰める」：STUDIO と HUB の帯が同じ形で、題が左・EXPLORE が右、真ん中が約 700px 空いていた。
   2 つの案（帯ごとに 名乗り｜機能｜EXPLORE の 3 列／左右 2 列の 1 つの面）から、オーナーが左右 2 列を選んだ（2026-11-08）。
   - 1024 以上：左 STUDIO・右 HUB。それぞれの地は今の色のまま（STUDIO #1d1a16・HUB #1b1e27 と格子）、境目は線を引かず地を切り替えるだけ。
     列の中は 製品名 → 一言 → 主な機能 → EXPLORE の順に縦に積む。
   - 帯の中に「主な機能（3 つ）」を足す。文言は PRODUCTS のページの索引（.pp-feats）の先頭 3 つのまま（和文を新しく作らない）。
     短い説明は今の一言（.pc-lead）をそのまま使う。
   - 1023 以下は帯を縦に積む今の形のまま、一言の下に機能を足す（768〜1023 は EXPLORE が今の右上、767 以下は機能の下）。
   守ること：帯の端 → 最初のインク 64・最後のインク → 帯の端 64、PRODUCTS の見出しと前後の節の 96。
   色はブランドの色表だけ（機能の名前は紙 #f3ecdc、番号は控えめな紙 0.55）。 */

#products.pve .pve-feats { margin: 0; padding: 0; list-style: none; }
#products.pve .pve-feats li { display: flex; align-items: baseline; gap: 12px; margin: 0; }
#products.pve .pve-no {
  flex: none;
  font: 600 13px/1 var(--pv-en, "Barlow Condensed", sans-serif);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: rgba(243, 236, 220, 0.55);
}
#products.pve .pve-feats b {
  font: 700 16px/28px var(--pv-ja, "Zen Kaku Gothic New", sans-serif);
  letter-spacing: 0.04em;
  color: #f3ecdc;
  white-space: nowrap;
}
#products.pve .pve-feats li + li { margin-top: 4px; }

/* ================= 1024 以上：左右 2 列の 1 つの面 ================= */
@media (min-width: 1024px) {
  #products.pv11.pve {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  #products.pv11.pve > .pvh-head { grid-column: 1 / -1; }
  /* 帯の横の余白：外側はガター、内側（2 つの地の境目の側）は 32。地の境目は画面の真ん中。
     ガター（site-width-v2.css の --site-gutter = max(--site-pad, (100% − --site-max) ÷ 2)）は節の幅で決まる値なので、
     半分の幅の列の中では 100% − --site-max ÷ 2 と書く（列の幅 ＝ 節の幅 ÷ 2） */
  #products.pv11.pve > .pv-band--studio { padding-left: max(var(--site-pad, 24px), calc(100% - var(--site-max, 1168px) / 2)); padding-right: 32px; }
  #products.pv11.pve > .pv-band--hub { padding-left: 32px; padding-right: max(var(--site-pad, 24px), calc(100% - var(--site-max, 1168px) / 2)); }
  /* 地は自分の列だけを塗る（帯は画面の幅いっぱい 100vw だった） */
  #products.pv11.pve > .pv-band::before,
  #products.pv11.pve > .pv-band::after { inset: 0; width: auto; transform: none; }
  #products.pv11.pve > .pv-band--hub::after { background-position: left 0 top 32px; }
  #products.pv11.pve .pc-mast { grid-template-columns: minmax(0, 1fr); }
  #products.pv11.pve .pc-name { grid-column: 1; grid-row: 1; }
  #products.pv11.pve .pc-lead { grid-column: 1; grid-row: 2; margin-bottom: 0; }
  #products.pv11.pve .pve-feats { grid-column: 1; grid-row: 3; margin-top: 18.5px; } /* 一言のインク → 機能のインク 32（実測） */
  /* EXPLORE は列の下。機能の最後のインク → 操作の字 24（押せる箱 48 は上へ伸びる）。最後のインク（操作の下線）→ 帯の端 64 */
  #products.pv11.pve .pc-u { grid-column: 1; grid-row: 4; justify-self: start; margin-top: -10.5px; }
  #products.pv11.pve > .pv-band { padding-bottom: 64px; }   /* HUB の EXPLORE の下線（2 つの列で最も下のインク）→ 帯の端 64（実測） */
}

/* ================= 1023 以下：帯は縦に積んだまま、機能は一言の下（768〜1023 は EXPLORE が今の右上のまま） ================= */
@media (min-width: 768px) and (max-width: 1023px) {
  #products.pve .pc-lead { margin-bottom: 0; }
  #products.pve .pve-feats { grid-column: 1 / -1; grid-row: 3; margin-top: 16.5px; } /* 一言のインク → 機能のインク 24（実測） */
  #products.pv11.pve .pv-band { padding-bottom: 58.5px; }                             /* 機能の最後のインク → 帯の端 64（実測） */
}
@media (max-width: 767px) {
  #products.pve .pve-feats { grid-column: 1; grid-row: 3; margin-top: 13.5px; }      /* 一言のインク → 機能のインク 24（実測） */
  #products.pve .pc-u { grid-row: 4; margin-top: -10px; }                            /* 機能の最後のインク → 操作の字 24（実測） */
  #products.pve .pve-feats b { font-size: 15px; line-height: 26px; }
}