/* products-home-v12 — ホームの PRODUCTS（予告）の配置。products-parts-v3.css の後、既存の CSS すべての後に読む。2026-09-29。 products-home-v11.css（products-r10 の写し）の置き換え。v11 から変えた所は末尾の「7. SNSクリップ」だけ （オーナー「後、SNSクリップ機能もタイムスタンプと一緒にPRして」。案C「波の上に切り出す」＋独立審査の直し）。 ―― 以下、v11 の説明 ―― products-home-v11 — ホームの PRODUCTS（予告）の配置。products-parts-v2.css の後、既存の CSS すべての後に読む。2026-09-29、直し 1。 オーナー 「プロダクトバナーが文字の羅列になっててメリハリがない。すごい見づらい。」 「バナーのタイムスタンプのところ、わかりづらいと思う」 「HUBはDiscordのBOTがチケットを作ったり、予定入れたり、通話の議事録を自動でつくるみたいなのも伝えたい」 「スタジオのバナーの画像の配置が悪いな。真ん中にすごい隙間ある」「HUBのほうもパーツの配置が悪すぎて隙間だらけ」 「このUIだとPRODUCTSというカテゴリがSTUDIOにしかかかってないように見える」 主指揮の裁定（2026-09-29）：HUB のホームの予告は HUBBOT の 3 場面（チケット・予定・AI議事録）を主役の 1 段にし、各場面に製品の語の題、 要の文は 13 より一段大きく。ボード・日程調整・カレンダーは 1 枚の画面にまとめ、HUBBOT の結果が入る先として場面の下に続ける。 節の高さは 1440 で v10（1848）の +10% 以内、390 で v10（3068）の +15% 以内。 → 見出し「PRODUCTS」は 2 つの帯の外（黒の地）に置き、その下に STUDIO と HUB の帯を同じ組みで続ける（案C「一場面」の骨組み）。 各帯 = 名乗り（マーク＋製品名＝帯で最大の文字、リード 1 行、EXPLORE は右ガター）→ 図。 STUDIO：1 段目 タイムスタンプの図（全幅）、2 段目 テンプレート 4 枚（高さをそろえ、縦横比に比例した幅で列を満たす）。 HUB：HUBBOT の 3 場面（1024 以上は 3 列。行は subgrid でそろえる）。場面の下に VAPOR-HUB の 1 枚の画面（3 つの結果の窓が並ぶ）。 縦の寸法（インクで測る。docs/DESIGN-DETAIL-STANDARD.md §2、契約 §7-3） LIVE の最後のインク → 見出しのインク 96 ／ 見出しのインク → STUDIO の帯の端 32（v10 と同じ） 帯の端 → 最初のインク 96（スマホ 64） 名乗り（リードのインク）→ 図の札のインク 64（スマホ：操作の下線 → 札のインク 48） 1 段目 → 2 段目 48（スマホ 32） ／ 図の見出し → 画面 16 ／ 画面 → 注記 8 最後の中身 → 帯の端 96（スマホ 64） ／ HUB の帯の端 → NEWS の見出しのインク 96（スマホ 64。NEWS の節には触れない） 列：12 列（1440 で 1 列 68、列の間 32）。1440 を超えると列は --site-max で広がり、製品名とタイムスタンプの図の縦の寸法だけが 同じ倍率で大きくなる（画面の中の文字と寸法は据え置き）。 */ /* study16.css の「.study16 #main > :not(.s14-opening) { width: min(1168px, …) }」より強く、#main の幅いっぱいにする */ #main > #products.pvh.pv11 { width: 100%; } #products.pv11 { --pv-fs-1: clamp(40px, calc(var(--site-max, 1168px) * 72 / 1168), 104px); /* 製品名：1440 以下 72、1920 で 96 */ --pc-gap: 32px; --dc-gap: 32px; /* Discord の窓 → VAPOR-HUB の画面（信号線が渡る間） */ position: relative; width: 100%; max-width: none; margin: 0; padding: 0; overflow-x: clip; background: transparent; color: #f3ecdc; scroll-margin-top: 72px; } #products.pv11 .pvh-head { display: flex; align-items: baseline; margin: -6px 0 28px; /* LIVE の最後の字面 → 見出しの字面 96、見出しの字面 → 帯の端 32（共通の枠の measure-rhythm.mjs で実測） */ padding: 0 var(--site-gutter, max(var(--page-pad, 24px), calc((100vw - var(--site-max, 1168px)) / 2))); } #products.pv11 .pvh-head h2 { margin: 0; } /* ================= 1. 名乗り（短い塊） ================= 1 行目：マーク＋製品名（左）と EXPLORE（右ガター）を基線でそろえる（NEWS の見出しと ALL NEWS と同じ組み）。2 行目：リード 1 行。 */ #products.pv11 .pc-mast { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--pc-gap); align-items: baseline; margin-top: calc(var(--pv-fs-1) * -0.18); /* 帯の端 → 製品名のインク 96（行の箱の上の余り＝文字の大きさの 0.18。実測） */ } #products.pv11 .pc-name { grid-column: 1; grid-row: 1; margin: 0; font: 600 var(--pv-fs-1)/1 var(--pv-en); letter-spacing: 0.04em; color: var(--pv-ink); white-space: nowrap; } /* マーク：72 のとき 64・間 16。中心を大文字の中心へ。左の margin は光学補正：素材の左の余白（STUDIO は viewBox 52 のうち 4、 HUB は 64 のうち 2）だけ左へ出し、インクの左端をガターにそろえる */ #products.pv11 .pc-mark { display: inline-block; width: 0.889em; height: 0.889em; margin: 0 0.222em 0 calc(-0.889em * 4 / 52); vertical-align: -0.1em; } #products.pv11 .pv-band--hub .pc-mark { width: 0.833em; height: 0.833em; margin-left: calc(-0.833em * 2 / 64); vertical-align: -0.05em; } /* 塗りの四角は重く見えるので大文字＋わずか */ #products.pv11 .pv-band--hub .pc-mast { margin-top: calc(var(--pv-fs-1) * -0.145 - 1px); } #products.pv11 .pc-u { grid-column: 2; grid-row: 1; } #products.pv11 .pc-lead { grid-column: 1 / -1; grid-row: 2; margin: 9px 0 0; /* 製品名の基線 → リードのインク 24（実測） */ font: 500 var(--pv-fs-2)/32px var(--pv-ja); letter-spacing: 0.04em; color: var(--pv-ink); } #products.pv11 .pc-lead span { display: inline; } /* ================= 2. 図の見出し・注記 ================= */ #products.pv11 .pc-fig { margin: 0; min-width: 0; } #products.pv11 .pc-label { display: block; margin: 0 0 14px; /* 札のインク → 画面の縁 16（行の箱の下の余り 2 を引く、実測） */ font: 500 13px/16px var(--pv-ja); letter-spacing: 0.04em; color: var(--pv-ink-2); } #products.pv11 .pc-label--pair { display: flex; align-items: baseline; gap: 16px; } #products.pv11 .pc-label--pair span:last-child { color: var(--pv-ink); } #products.pv11 .pc-en { font: 600 13px/16px var(--pv-en); letter-spacing: 0.04em; color: var(--pv-ink-2); } #products.pv11 .pc-note { margin: 5px 0 0; /* 画面 → 注記のインク 8（行の箱の上の余り 3 を引く、実測） */ font: 500 13px/16px var(--pv-ja); color: var(--pv-ink-3); } /* 768 以上：注記は図の右端にそろえる（左にそろえると、概要欄の 5 行目・画面の続きの行に見えるため） */ @media (min-width: 768px) { #products.pv11 .pc-note { text-align: right; } } /* ================= 3. STUDIO ================= */ #products.pv11 .pv-band--studio > .ts { margin-top: 58px; } /* リードのインク → 札のインク 64（768 以上は札を舞台の左上に置き、札の行を 2 上げているため 58。実測） */ #products.pv11 .ts > .pc-note { margin-top: calc(8px - (var(--ts-row) - 16px) / 2 - 2px); } /* 最後の題のインク → 注記のインク 8（実測） */ /* テンプレート：列の比 16 : 16 : 0 : 7.2 : 7.2（16:9 と 4:5 を同じ高さにしたときの幅の比）。隙間は 16、組の間は 0 の列を挟んで 32 */ #products.pv11 .pc-tpl-bundle { margin-top: 44px; min-width: 0; } /* 注記のインク → 札のインク 48（実測） */ #products.pv11 .pc-tpl-bundle > .pc-label { margin-bottom: 14px; } #products.pv11 .pc-tpl-watch { min-width: 0; } #products.pv11 .pc-tpl { display: grid; min-width: 0; column-gap: 16px; row-gap: 0; align-items: end; } #products.pv11 .pc-tpl img { display: block; width: 100%; height: auto; border-radius: 2px; } @media (min-width: 768px) { #products.pv11 .pc-tpl-bundle { display: grid; grid-template-columns: minmax(0, 16fr) minmax(0, 16fr) 0 minmax(0, 7.2fr) minmax(0, 7.2fr); grid-template-rows: auto auto; column-gap: 16px; row-gap: 0; align-items: end; } #products.pv11 .pc-tpl-bundle > .pc-tpl-l1 { grid-column: 1 / 3; grid-row: 1; margin-bottom: 14px; } #products.pv11 .pc-tpl-bundle > .pc-tpl-l2 { grid-column: 4 / 6; grid-row: 1; margin-bottom: 14px; } #products.pv11 .pc-tpl-bundle > .pc-tpl-watch { display: contents; } #products.pv11 .pc-tpl-bundle .pc-tpl { display: contents; } #products.pv11 .pc-s1 { grid-column: 1; grid-row: 2; } #products.pv11 .pc-s2 { grid-column: 2; grid-row: 2; } #products.pv11 .pc-s3 { grid-column: 4; grid-row: 2; } #products.pv11 .pc-s4 { grid-column: 5; grid-row: 2; } } /* ================= 4. HUB：HUBBOT の 3 場面（主役の 1 段）と VAPOR-HUB の 1 枚の画面 ================= 行：場面の題 / Discord の見出しの行 / きっかけ / HUBBOT の返信 / 窓と画面の間（信号線が渡る）/ VAPOR-HUB の画面。 3 場面の行は subgrid でそろえ、VAPOR-HUB の画面は 3 列の後ろに 1 枚の地（.dc-hubbg）を敷いて 1 枚にまとめる。 */ #products.pv11 .dc { margin-top: 58px; } /* リードのインク → 場面の題のインク 64（HUBBOT 札を窓へ移したため +4、実測） */ #products.pv11 .dc-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto auto auto var(--dc-gap) auto; column-gap: var(--pc-gap); row-gap: 0; min-width: 0; } #products.pv11 .dc-scene { display: grid; grid-row: 1 / -1; grid-template-rows: subgrid; min-width: 0; } /* 列を明示する（1 枚の画面の地が 3 列の 6 行目を先に占めるので、自動の配置だと場面が暗黙の列へ押し出される） */ #products.pv11 .dc-scene:nth-of-type(1) { grid-column: 1; } #products.pv11 .dc-scene:nth-of-type(2) { grid-column: 2; } #products.pv11 .dc-scene:nth-of-type(3) { grid-column: 3; } #products.pv11 .dc-title { grid-row: 1; margin-bottom: 13px; } /* 題のインク → 窓の縁 16（実測） */ #products.pv11 .dc-win { grid-row: 2 / 5; grid-template-rows: subgrid; } #products.pv11 .dc-hub { grid-row: 6; } /* 1 枚の画面：3 つの結果の窓の後ろに、アプリの地と見出しの行の区切り（white/7）を 1 枚で敷く。窓は透明にして、この地の上に並べる */ #products.pv11 .dc-hubbg { display: block; grid-column: 1 / -1; grid-row: 6; border-radius: 2px; background: linear-gradient(transparent 39px, var(--pv-line) 39px, var(--pv-line) 40px, transparent 40px), var(--pv-screen); } #products.pv11 .dc-hub { background: none; } #products.pv11 .dc-hub-head { border-bottom-color: transparent; } #products.pv11 .dc-scene:not(:first-of-type) .dc-hub-brand { display: none; } /* 1 枚の画面の名前は左上に 1 回 */ #products.pv11 .dc > .pc-note { margin-top: 6px; } /* 画面の下端 → 注記のインク 8（実測） */ /* 1024〜1279：返信の欄が狭いので、チケットの番号の棒を省く（要の文を 16 のまま 1 行に） */ @media (max-width: 1279px) { #products.pv11 .dc-slug { display: none; } } @media (min-width: 1441px) { #products.pv11 .dc-row { zoom: calc(var(--site-max, 1168px) / 1168px); } } /* HUB の帯の下：注記のインク → 帯の端 96（注記の行の箱の下の余り 3 を引く） */ #products.pv11 .pv-band--hub { padding-bottom: 94px; } /* HUB の帯の端 → NEWS の見出しのインク 96（スマホ 64）は、共通の枠の home-spacing-v1.css が NEWS の側で決める（契約 §6：NEWS はこの班の担当の外）。 この節は帯の端で終わり、NEWS の余白を書き換えない・打ち消さない */ /* ================= 5. タブレット（768〜1023） ================= */ @media (min-width: 768px) and (max-width: 1023px) { #products.pv11 .ts { display: block; } #products.pv11 .ts > .ts-head-cap { margin: 0 0 14px; } #products.pv11 .pc-tpl-bundle .pc-tpl { display: grid; } #products.pv11 .pc-tpl-bundle :is(.pc-s1, .pc-s2, .pc-s3, .pc-s4) { grid-row: auto; } } @media (max-width: 1023px) { #products.pv11 { --pc-gap: 24px; } #products.pv11 .ts { --ts-gap: 24px; --ts-lw: calc((100% - 48px) / 3); --ts-wave: 80px; --ts-mid: 40px; --ts-row: 40px; } /* テンプレート：左の列にサムネイル 2 枚、右の列にポスト 2 枚。各段の高さをそろえる（16:9 と 4:5 が同じ高さになる幅の比 2.2222 : 1） */ #products.pv11 .pc-tpl-bundle { display: grid; grid-template-columns: minmax(0, 2.2222fr) minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 16px; row-gap: 16px; } #products.pv11 .pc-tpl-bundle > .pc-tpl-l1 { grid-column: 1; margin-bottom: -2px; } #products.pv11 .pc-tpl-bundle > .pc-tpl-l2 { grid-column: 2; margin-bottom: -2px; } #products.pv11 .pc-tpl-bundle > .pc-tpl-watch { display: block; min-width: 0; } #products.pv11 .pc-tpl-bundle .pc-tpl { grid-template-columns: minmax(0, 1fr); row-gap: 16px; } #products.pv11 .pc-tpl-bundle > .pc-tpl-watch:first-of-type { grid-column: 1; grid-row: 2 / 4; } #products.pv11 .pc-tpl-bundle > .pc-tpl-watch:last-of-type { grid-column: 2; grid-row: 2 / 4; } #products.pv11 .pc-s1, #products.pv11 .pc-s2, #products.pv11 .pc-s3, #products.pv11 .pc-s4 { grid-column: 1; } /* HUB：場面を縦に積み、場面の中は Discord（左）→ VAPOR-HUB（右）。窓の高さは右の画面にそろえる（右の画面の中身は丸ごとの項目で下の縁ちょうど）。 信号線は HUBBOT の丸から下へ降り、窓の下の余白を右へ渡って VAPOR-HUB の画面の左の縁まで（直角の角。768 でも 300 以上の長さ） */ #products.pv11 .dc-row { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 48px; } #products.pv11 .dc-hubbg { display: none; } #products.pv11 .dc-scene:nth-of-type(n) { grid-column: auto; } #products.pv11 .dc-scene { grid-row: auto; grid-template-rows: auto auto; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: var(--dc-gap); align-items: stretch; } #products.pv11 .dc-title { grid-column: 1 / -1; grid-row: 1; } #products.pv11 .dc-win { grid-row: 2; grid-column: 1; grid-template-rows: auto auto minmax(0, 1fr); padding-bottom: 16px; } #products.pv11 .dc-hub { grid-row: 2; grid-column: 2; background: var(--pv-screen); } #products.pv11 .dc-hub-head { border-bottom-color: var(--pv-line); } #products.pv11 .dc-scene:not(:first-of-type) .dc-hub-brand { display: inline; } /* 画面の中身 248：ボード 見出し 32 ＋ 8 ＋ カード 64 × 3 ＋ 間 8 × 2 ／ カレンダー 28 ＋ 8 ＋ 曜日 24 ＋ 3 週 ／ Wiki 24 ＋ 4 ＋ 16 ＋ 12 ＋ 32 × 6 */ #products.pv11 .dc-hub-body { height: 176px; } #products.pv11 .dc-wire { top: 48px; bottom: -8px; /* 窓の下の余白 16 の中央 */ width: auto; right: calc(-12px - var(--dc-gap)); /* 窓の右の内側 12 ＋ 窓の間 → VAPOR-HUB の画面の左の縁 */ margin-left: -0.5px; background: none; border-left: 1px solid var(--pv-sig); border-bottom: 1px solid var(--pv-sig); border-radius: 0; /* 契約の信号線：直角 */ } #products.pv11 .dc-node { top: 100%; margin-top: -4px; } #products.pv11 .dc-node:nth-child(1) { top: 100%; left: calc(100% - var(--dc-gap)); } /* Discord の窓の右の縁 */ #products.pv11 .dc-node:nth-child(2) { top: 100%; left: 100%; } /* VAPOR-HUB の画面の左の縁 */ #products.pv11 .dc-armed .dc-wire { clip-path: inset(0 calc(100% - 4px) 100% -4px); } #products.pv11 .dc-land .dc-wire { animation-name: dc-wire-l; } } @keyframes dc-wire-l { 0% { clip-path: inset(0 calc(100% - 4px) 100% -4px); } 45% { clip-path: inset(0 calc(100% - 4px) -4px -4px); } 100% { clip-path: inset(0 -4px -4px -4px); } } /* ================= 6. スマホ（≤767） ================= */ @media (max-width: 767px) { #products.pv11 { --pv-fs-1: 40px; --pc-gap: 16px; --dc-gap: 32px; } #products.pv11 .pvh-head { margin: -5px 0 19.5px; } /* LIVE → 見出し 64、見出し → 帯 24（measure-rhythm.mjs で実測） */ #products.pv11 .pv-band { padding-bottom: 64px; } #products.pv11 .pc-mast { grid-template-columns: minmax(0, 1fr); margin-top: -6px; } /* 帯の端 → マークのインク 64（実測） */ #products.pv11 .pv-band--hub .pc-mast { margin-top: -7px; } /* 帯の端 → マークのインク 64（実測） */ #products.pv11 .pc-mark { width: 1em; height: 1em; margin: 0 0.3em 0 calc(-1em * 4 / 52); vertical-align: -0.17em; } #products.pv11 .pv-band--hub .pc-mark { width: 0.94em; height: 0.94em; margin-left: calc(-0.94em * 2 / 64 - 1px); vertical-align: -0.13em; } /* 小さい幅では縁の暗い角の 1px を足す（実測） */ #products.pv11 .pc-lead { margin-top: 7px; line-height: 28px; } /* 製品名の基線 → リードのインク 16（実測） */ #products.pv11 .pc-lead span { display: block; } #products.pv11 .pc-u { grid-column: 1; grid-row: 3; justify-self: start; margin-top: -11px; } /* リードのインク → 操作の字 24（押せる箱 48 は上へ伸びる） */ #products.pv11 .pv-band--studio > .ts { margin-top: 45.5px; } /* 操作の下線 → 札のインク 48 */ #products.pv11 .dc { margin-top: 47.5px; } #products.pv11 .dc-title { margin-bottom: 14px; } /* 題のインク → 窓の縁 16（実測） */ #products.pv11 .dc > .pc-note { margin-top: 5px; } /* 画面 → 注記のインク 8（実測） */ #products.pv11 .pc-tpl .pc-label.pc-tpl-l1 { margin-bottom: 7px; } /* サムネイルの札のインク → 画像 16（実測） */ #products.pv11 .ts { --ts-gap: 16px; --ts-lw: 184px; --ts-wave: 48px; --ts-mid: 32px; --ts-row: 32px; --ts-time-w: 52px; } #products.pv11 .ts > .pc-note { margin-top: -3px; } /* 最後の題のインク → 注記のインク 8（実測） */ #products.pv11 .pc-tpl-bundle { margin-top: 28px; } /* 注記のインク → 札のインク 32（実測） */ /* テンプレート：札は切り抜きの外。サムネイル 2 枚 → ポスト 2 枚を、それぞれの囲みで左から開く */ #products.pv11 .pc-tpl-bundle { display: flex; flex-direction: column; gap: 0; } #products.pv11 .pc-tpl-bundle > .pc-label { margin-bottom: 6px; } #products.pv11 .pc-tpl-bundle > .pc-tpl-l2 { margin-top: 22px; } /* サムネイルの下端 → 札のインク 32 */ #products.pv11 .pc-tpl-bundle .pc-tpl { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 8px; row-gap: 8px; } #products.pv11 .pc-tpl-bundle > .pc-tpl-watch:first-of-type { order: 1; } #products.pv11 .pc-tpl-bundle > .pc-tpl-l2 { order: 2; } #products.pv11 .pc-tpl-bundle > .pc-tpl-watch:last-of-type { order: 3; } #products.pv11 .pc-tpl-bundle .pc-s1, #products.pv11 .pc-tpl-bundle .pc-s2 { grid-column: 1 / -1; } #products.pv11 .pc-tpl-bundle .pc-s3 { grid-column: 1; } #products.pv11 .pc-tpl-bundle .pc-s4 { grid-column: 2; } /* HUBBOT：場面の中も縦に（題 → Discord → 信号線 → VAPOR-HUB）。列の幅を満たす。画面の中身は丸ごとの項目 1 つずつ */ #products.pv11 .dc-row { row-gap: 32px; } #products.pv11 .dc-scene { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto var(--dc-gap) auto; column-gap: 0; } #products.pv11 .dc-title { grid-column: 1; } #products.pv11 .dc-win { grid-row: 2; grid-column: 1; grid-template-rows: auto auto auto; padding-bottom: 12px; } #products.pv11 .dc-hub { grid-row: 4; grid-column: 1; } #products.pv11 .dc-board, #products.pv11 .dc-calp { height: 104px; } /* ボード 見出し 32 ＋ 8 ＋ カード 64 ／ カレンダー 28 ＋ 8 ＋ 24 ＋ 1 週 44 */ #products.pv11 .dc-wiki { height: 96px; } /* 直し6：行の高さの上書きを消した後の値にそろえる（verify5） */ /* 24 ＋ 12 ＋ 見出しの行 32 ＋ 子ページ 32 */ #products.pv11 .dc-calp .pv-week { grid-template-rows: 24px 44px; } #products.pv11 .dc-calp .pv-week > .pv-d--w2 { display: none; } #products.pv11 .dc-calp .pv-d .pv-ev:nth-child(n + 2) { display: none; } #products.pv11 .dc-wk-meta { display: none; } #products.pv11 .dc-wire { top: 48px; bottom: calc(-12px - var(--dc-gap)); right: auto; width: 1px; background: var(--pv-sig); border: 0; } #products.pv11 .dc-node, #products.pv11 .dc-node:nth-child(n) { left: 50%; } #products.pv11 .dc-node:nth-child(1) { top: calc(100% - var(--dc-gap)); margin-top: -3.5px; } #products.pv11 .dc-node:nth-child(2) { top: 100%; margin-top: -3.5px; } #products.pv11 .dc-armed .dc-wire { clip-path: inset(0 -4px 100% -4px); } #products.pv11 .dc-land .dc-wire { animation-name: dc-wire; } #products.pv11 .pv-band--hub { padding-bottom: 63px; } /* 注記のインク → 帯の端 64（実測） */ } /* ================= 7. SNSクリップ（案C「波の上に切り出す」＋独立審査の直し） ================= 部品は products-parts-v3.css の 5b。ここは幅ごとの寸法と余白（インクで測る。docs/DESIGN-DETAIL-STANDARD.md §2）。 768 以上：段の名札のインクの上端 ＝ 枠の上端（段の上から 8u）。名札の右端 ＝ 進行バーの左 16（アーカイブ・見どころの札と同じ）。 名札の塊は、見どころの札と「YouTube 概要欄」の札の間の中央（上下のインクの間 22 / 22）。段の高さは部品の CSS の 84u − 24px （枠の下端 → 8:12 の行の線 8u）で、説明文が 2 行に折れる幅はその 1 行 16 を足す。 スマホ：最後の題のインク → 名札のインク 32（1 段目 → 2 段目の値）／ 説明文のインク → 枠 16（図の見出し → 画面）／ 枠 → 注記のインク 8（画面 → 注記）。 */ #products.pv11 .ts { --cl-labt: calc(var(--cl-top) - 2.5px); } /* 枠の上端から、名札の行の箱の上の余り 2.5 を引く（実測。1920 でも u で揃う） */ /* 768〜1199：左の列の名札の箱（1024 で 320、1199 で 380 弱）では、説明文（1 行で 336）が収まる幅と収まらない幅が書体の描き方で揺れるので、 文節の切れ目で必ず 2 行に折る（段の高さを行の数に合わせてあるため、折り返しを成り行きにしない）。1200 以上は 1 行（名札の箱 379 以上） */ @media (min-width: 768px) and (max-width: 1199px) { #products.pv11 .cl-hint > span { display: block; } } @media (min-width: 1024px) and (max-width: 1199px) { #products.pv11 .ts { --cl-lane: calc(var(--cl-px) * 84 - 8px); } /* 説明文の 2 行目の 16 を足す（1024 で 76） */ } @media (min-width: 768px) and (max-width: 1023px) { /* 列の右端の升（最後の印 → 右の端）が 768 で 84 しかないので、枠を 63 × 112（9:16）に。 名札は縦に 4 行（名前 → 合計 → 説明文 2 行、行の箱の間 4）。段 = 名札の上 5.5 ＋ 名札 72 ＋ 名札のインク → 概要欄の札のインク 22 に合う高さ（実測） */ #products.pv11 .ts { --cl-lane: 96px; --cl-fw: 63px; --cl-fh: 112px; --cl-fsh: 42px; --cl-off: 16px; --cl-top: 8px; } #products.pv11 .cl-lab { flex-direction: column; align-items: flex-end; row-gap: 4px; } #products.pv11 .cl-hint { flex-basis: auto; } } @media (max-width: 767px) { #products.pv11 .cl { margin-top: 21px; } /* 最後の題のインク → 名札のインク 32（実測） */ #products.pv11 .cl-lane { margin-top: 14.5px; } /* 説明文のインク → 枠 16（実測） */ #products.pv11 .ts > .pc-note { margin-top: 6px; } /* 枠の下端 → 注記のインク 8（実測） */ }