/* products-parts-v3 — PRODUCTS の部品（ホームの予告 v12 用）。2026-09-29。products-parts-v2.css（products-r10 の写し）の置き換え。 オーナー「後、SNSクリップ機能もタイムスタンプと一緒にPRして」。審査で勝った案C「波の上に切り出す」に、独立審査の直しをすべて入れた。 v2 から変えた所（それ以外は v2 と同じ）： ・5. 舞台に「SNSクリップの段」の行（--cl-lane）を足した。概要欄の信号線の縦と角の節点は、舞台の下からではなく上から測る （段の行を足しても、スマホで段が概要欄の下に来ても、線の長さが合うように）。 ・5b. SNSクリップの部品（波の上の切り出す範囲・段の名札・縦長の枠・枝の信号線）。 名札は 3 つ：「SNSクリップ」（帯の中の見出しの白で一段強く）・合計の行・製品の説明文（ja.ts:942 clip.openHint、原文のまま）。 枠の中の波の形は、見どころの山と同じ空色の 0.45（落ちる途中も同じ値のまま）。 ・7. SNSクリップの動き（.cl-armed → .cl-play）。スマホは枠の器を最初から置き、中身だけを出す（タイムスタンプの間に空白を残さない）。 ・動きを減らす設定の行に、SNSクリップの部品を足した。 ―― 以下、v2 の説明 ―― products-parts-v2 — PRODUCTS の部品（ホームの予告 v11 用）。2026-09-29、直し 1。既存の CSS すべての後、products-home-v11.css の前に読む。 products-parts-v1.css の置き換え（v1 は読まない）。 ・書体：和文 Zen Kaku Gothic New（500・700）、欧文と数字 Barlow Condensed 600 だけ。欧文の大文字ラベルの字間は 0.04em か 0.2em。 ・文字の大きさは 4 段：--pv-fs-1（製品名 72）・--pv-fs-2（20：場面の題・概要欄の時刻）・--pv-fs-3（16：要の文・概要欄の題）・--pv-fs-4（13）。 スマホは 40・18・15・13。 ・製品の画面の再現は、枠線なし・角 2・HUB の暗い地の窓（#0b0c0f、Discord の窓は #101218）。器の中の区切りは、窓の見出しの行と カレンダーの升の線（製品の画面そのものの線）だけ。新しく入ったものは枠ではなく地の色で示す。 ・金は焦点の 1 か所だけ：STUDIO の見どころの採用の印（製品の値）。HUB の画面には金を置かない。 ・つなぎは契約の信号線（1px、rgba(184,156,255,.32)、消灯の輪の節点）だけ。タイムスタンプの引き出し線も HUBBOT の線も同じ型。 ・架空の人名・予定名・金額・依頼者名・具体的な日付は使わない。人は名前のない丸、題は細い棒（オーナー 2026-09-28）。 */ #products { --pv-ja: "Zen Kaku Gothic New", sans-serif; --pv-en: "Barlow Condensed", "Zen Kaku Gothic New", sans-serif; --pv-fs-1: 72px; --pv-fs-2: 20px; --pv-fs-3: 16px; --pv-fs-4: 13px; --pv-screen: #0b0c0f; /* HUB のアプリの地（business-shell.css:6） */ --pv-win: #101218; /* Discord の窓：HUB の地にカードの地 rgba(20,22,29,.6) を重ねた色 */ --pv-line: rgba(255, 255, 255, 0.07); /* --hairline（globals.css:226） */ --pv-sig: rgba(184, 156, 255, 0.32); /* 契約 §2 信号の線 */ --pv-sig-ring: rgba(157, 123, 220, 0.5); /* 契約 §2 消灯の輪 */ --pv-new: rgba(139, 92, 246, 0.16); /* 新しく入ったものの地：製品の選択の色 secondary（CalendarMonth.tsx:345-355）を地に */ } @media (max-width: 767px) { #products { --pv-fs-1: 40px; --pv-fs-2: 18px; --pv-fs-3: 15px; } } /* ================= 0. 帯（採用済みの値、products-bands-v1 と同じ） ================= */ #products .pv-band { position: relative; isolation: isolate; box-sizing: border-box; width: 100%; max-width: none; margin: 0; padding: 96px var(--site-gutter, max(var(--page-pad, 24px), calc((100vw - var(--site-max, 1168px)) / 2))); word-break: auto-phrase; /* 和文を文節で折り返す（語の途中で切らない） */ line-break: strict; } #products .pv-band *, #products .pv-band *::before, #products .pv-band *::after { box-sizing: border-box; } #products .pv-band::before { content: ""; position: absolute; z-index: -1; inset: 0 auto 0 50%; width: 100vw; transform: translateX(-50%); pointer-events: none; } /* STUDIO：vapor-studio の LP の地 #09090f（tailwind.config.ts:26）に、CTA の金の洗い bg-accent-gold/[0.10]（LandingPage.tsx:622）＝ #1d1a16 */ #products .pv-band--studio::before { background: linear-gradient(rgba(212, 179, 85, 0.1), rgba(212, 179, 85, 0.1)), #09090f; } /* HUB：vapor-hub の --surface-hover #1b1e27（globals.css:46）＋ LP の青写真の格子（HomeLanding.module.css:8-18） */ #products .pv-band--hub::before { background: #1b1e27; } #products .pv-band--hub::after { content: ""; position: absolute; z-index: -1; inset: 0 auto 0 50%; width: 100vw; transform: translateX(-50%); pointer-events: none; background: linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px); background-size: 64px 64px; background-position: left max(var(--site-pad, 24px), calc((100vw - var(--site-max, 1168px)) / 2)) top 32px; -webkit-mask-image: linear-gradient(to bottom, #000, transparent 78%); mask-image: linear-gradient(to bottom, #000, transparent 78%); } @media (max-width: 767px) { #products .pv-band { padding-block: 64px; } } /* 帯の中の色（各リポジトリの値）。--pv-bg は帯の地の見た目の色（信号線の節点の中を地で抜く） */ #products .pv-band--studio { --pv-ink: #ffffff; /* 見出し text-white（LandingPage.tsx:575） */ --pv-ink-2: rgba(255, 255, 255, 0.55); /* リード white/55（:178） */ --pv-ink-3: rgba(255, 255, 255, 0.55); /* 注記：white/42 は 13px で 3.9:1 のため、リードの white/55（5.9:1）にそろえる */ --pv-bg: #1d1a16; color: var(--pv-ink); } #products .pv-band--hub { --pv-ink: #f8fafc; /* ink（HomeLanding.module.css:222） */ --pv-ink-2: #aeb6c5; /* ヒーローのリード（:237） */ --pv-ink-3: #94a3b8; /* 補助（:251） */ --pv-bg: #1b1e27; color: var(--pv-ink); } /* ================= 1. サイトの操作リンク（.u の型、契約 §4） ================= Barlow 600・13・0.2em、1px の線を文字の行の箱の 6px 下、押せる高さ 48。色は契約の控えめな紙色（製品の金にしない） */ #products .pv-u { display: inline-flex; align-items: flex-end; gap: 10px; min-height: 48px; margin: 0; padding: 0 0 6px; border: 0; border-bottom: 1px solid currentColor; border-radius: 0; background: none; color: rgba(243, 236, 220, 0.78); font: 600 13px/13px var(--pv-en); letter-spacing: 0.2em; text-decoration: none; white-space: nowrap; } #products .pv-u svg { flex: none; width: 13px; height: 13px; } #products .pv-u:hover { color: #f3ecdc; } #products .pv-u:focus-visible { outline: none; border-bottom: 2px solid #f3ecdc; padding-bottom: 5px; color: #f3ecdc; } /* 契約 §5：紙色の 2px の下線 */ /* ================= 2. 画面の部品（抽象の図） ================= */ #products .pv-screen :where(p, ul, ol, li), #products .dc :where(p, ul, ol, li) { margin: 0; padding: 0; list-style: none; } /* 題の代わりの細い棒（題 6・補助 4）。数を絞り、カードごとのボードの色 --c を控えめに混ぜ、長さを変える（products-page-v1.css「審査 p10 への対応」8 と同じ式） */ #products .pv-bar { display: inline-block; flex: 0 1 auto; width: var(--w, 64px); max-width: 100%; height: 6px; border-radius: 3px; background: rgba(226, 232, 240, 0.38); } #products .pv-bar--sub { height: 4px; border-radius: 2px; background: rgba(148, 163, 184, 0.32); } #products .pv-av { display: inline-block; flex: none; width: 20px; height: 20px; border-radius: 50%; background: #2a2f3c; } #products .pv-avs { display: inline-flex; } #products .pv-avs .pv-av { box-shadow: 0 0 0 2px var(--pv-win); } #products .pv-avs .pv-av + .pv-av { margin-left: -6px; } #products .pv-avs .pv-av:nth-child(2n + 1) { background: color-mix(in srgb, #3b82f6 40%, #1b1e27); } #products .pv-avs .pv-av:nth-child(2n + 2) { background: color-mix(in srgb, #ec4899 36%, #1b1e27); } /* ================= 3. ボードの小さなカード（KanbanBoard.tsx:586-619, 808-1035） ================= 高さ 64 = 内側 10 ＋ 題の行 20 ＋ 4 ＋ 人の行 20 ＋ 10。列の見出し 32 と間 8 で、器の高さちょうどに丸ごとのカードを収める */ #products .pv-tk { --c: #94a3b8; display: flex; flex: none; flex-direction: column; gap: 4px; min-width: 0; height: 64px; padding: 10px 10px 10px 12px; border: 0; border-left: 3px solid rgba(139, 92, 246, 0.4); /* 優先度 中 = secondary/40（:586-590） */ border-radius: 2px; background: rgba(20, 22, 29, 0.6); /* bg-surface-light/60 */ overflow: hidden; } #products .pv-tk[data-p="low"] { border-left-color: rgba(255, 255, 255, 0.08); } #products .pv-tk[data-new] { background: var(--pv-new); } /* HUBBOT が作ったカード */ #products .pv-tk-top, #products .pv-tk-row { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; height: 20px; } #products .pv-tk-title { display: flex; flex: 1; min-width: 0; } #products .pv-tk-title .pv-bar { background: color-mix(in srgb, var(--c) 40%, rgb(243 236 220 / 0.5)); } #products .pv-tk-pri { display: inline-flex; flex: none; align-items: center; justify-content: center; height: 20px; padding: 0 6px; border-radius: 2px; background: rgba(139, 92, 246, 0.15); color: #a78bfa; /* 中：secondary 15% の地に secondary-light */ font: 500 13px/1 var(--pv-ja); } #products .pv-tk[data-p="low"] .pv-tk-pri { background: rgba(255, 255, 255, 0.05); color: #94a3b8; } #products .pv-tk .pv-av { background: color-mix(in srgb, var(--c) 34%, #1b1e27); } #products .pv-tk-counts { display: flex; flex: none; gap: 8px; color: #64748b; font: 600 13px/20px var(--pv-en); } #products .pv-tk-counts span { display: inline-flex; align-items: center; gap: 2px; } #products .pv-tk-counts svg { width: 13px; height: 13px; } /* 列（KanbanBoard.tsx:90-99, 517-582）：見出しは状態の色の地と件数の札。列の中は製品と同じくスクロールする領域（見える範囲に丸ごとのカード） */ #products .pv-kb-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; overflow: hidden; } #products .pv-kb-head { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 6px; height: 32px; padding: 0 10px; border: 0; border-radius: 2px; } #products .pv-kb-head b { font: 500 13px/1 var(--pv-ja); color: #f1f5f9; white-space: nowrap; } #products .pv-kb-n { min-width: 24px; padding: 2px 8px; border-radius: 9999px; background: rgba(0, 0, 0, 0.2); color: #cbd5e1; font: 600 13px/16px var(--pv-en); text-align: center; font-variant-numeric: tabular-nums; } #products [data-status="todo"] > .pv-kb-head { background: rgba(148, 163, 184, 0.2); } #products [data-status="in_progress"] > .pv-kb-head { background: rgba(96, 165, 250, 0.2); } /* ================= 4. カレンダー（CalendarMonth.tsx:282-465） ================= 升の線は製品の月の表示の線（white/5）。予定の色はパレットの eventStyle を実行した値。締切は「締切」の語の札（CalendarView.tsx:25）。 日付の数字は出さない（具体的な日付を使わない） */ #products .pv-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: 24px repeat(2, 58px); } #products .pv-week > .pv-d--w3 { display: none; } /* 3 週目はタブレットだけ（products-home-v11.css） */ #products .pv-wd { display: flex; align-items: center; justify-content: center; border-bottom: 1px solid rgba(255, 255, 255, 0.05); background: rgba(20, 22, 29, 0.4); color: #cbd5e1; font: 500 13px/1 var(--pv-ja); } #products .pv-wd:nth-child(1) { color: #fca5a5; } /* 日 red-300 */ #products .pv-wd:nth-child(7) { color: #93c5fd; } /* 土 blue-300 */ #products .pv-d { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 4px 3px; border-right: 1px solid rgba(255, 255, 255, 0.05); } #products .pv-d:nth-child(7n) { border-right: 0; } #products .pv-d:nth-child(n + 15) { border-top: 1px solid rgba(255, 255, 255, 0.05); } #products .pv-d[data-sel] { background: rgba(139, 92, 246, 0.15); } /* 選択日（:345-355）。枠線は付けない */ #products .pv-ev { display: flex; flex: none; align-items: center; gap: 6px; min-width: 0; height: 22px; padding: 0 5px; border-radius: 2px; overflow: hidden; } #products .pv-ev .pv-bar { height: 4px; background: color-mix(in srgb, var(--acc, #f3ecdc) 50%, rgb(243 236 220 / 0.8)); } #products .pv-ev[data-c="violet"] { --acc: rgb(168, 148, 239); background: rgb(42, 34, 67); border-left: 3px solid var(--acc); } /* #8b5cf6 */ #products .pv-ev[data-c="cyan"] { --acc: rgb(14, 184, 214); background: rgb(2, 54, 64); border-left: 3px solid var(--acc); } /* #06b6d4 */ #products .pv-ev[data-c="blue"] { --acc: rgb(115, 165, 245); background: rgb(23, 41, 71); border-left: 3px solid var(--acc); } /* #3b82f6 */ #products .pv-ev[data-c="emerald"] { --acc: rgb(70, 190, 140); background: rgb(7, 55, 37); border-left: 3px solid var(--acc); } /* #10b981 */ #products .pv-ev[data-c="rose"] { --acc: rgb(227, 128, 170); background: rgb(66, 30, 46); border-left: 3px solid var(--acc); } /* #ec4899 */ /* 締切：製品は金の破線（colors.ts:265-281）。金は STUDIO の 1 か所だけにするため、破線の枠ではなく控えめな地の札にする */ #products .pv-ev[data-c="due"] { justify-content: center; padding: 0 2px; background: rgba(203, 213, 225, 0.12); } #products .pv-ev[data-c="due"] b { flex: none; color: #e2e8f0; font: 500 13px/1 var(--pv-ja); } /* ================= 5. タイムスタンプ（STUDIO の 1 段目の主役：配信の進行バーから概要欄へ） ================= 上：アーカイブ（配信の進行バーと、上に音量の面。製品は音量の時系列から見どころの候補を立てる core/candidates.ts:17-18） 印：見どころの位置（LP の見本の 4 つ、ja.ts:373）。印とそのまわりの山は、概要欄の時刻と同じ空色（LandingPage.tsx:225 sky-300/80） 線：契約の信号線。印から真下へ降り、角の節点（消灯の輪）で曲がって、左の「YouTube 概要欄」のその行に入る（交差しない入れ子） 組み：左の列 = 帯の 12 列の 4 列（1440 で 368）。進行バーは 5〜12 列。段の名前（アーカイブ・見どころ）は進行バーの左端から 16。 結果（YouTube 概要欄）の時刻は 20（--pv-fs-2）で焦点、題は 16（--pv-fs-3）。時刻は幅を決めた列に左揃え、題の左端は一本。 縦の寸法は列の倍率 u（= --site-max ÷ 1168、1440 以下は 1）で大きくし、1920 でも 1440 と同じ比の図にする。 色は製品の値だけ：進行バー 地 white/8・解析済み white/20、つまみ white/70（TimestampWorkbench.tsx:1737-1743）、 概要欄の時刻 sky-300/80・題 white/80・赤い点 red-500/80（LandingPage.tsx:217, 225）。金は採用の印 1 つだけ（LandingPage.tsx:198-203）。 */ #products .ts { --ts-gap: 32px; --ts-lw: calc((100% - 64px) / 3); /* 左の列 = 12 列の 4 列（列の間 32） */ --ts-wave: calc(var(--site-max, 1168px) * 80 / 1168); /* 音量の面の高さ（1440 以下 80） */ --ts-track: 6px; /* 進行バーの太さ：製品の h-1.5 */ --ts-mid: calc(var(--site-max, 1168px) * 40 / 1168); /* 見どころの段 */ --ts-row: calc(var(--site-max, 1168px) * 40 / 1168); /* 概要欄の 1 行 */ --ts-time-w: 56px; /* 時刻の列（「24:40」の字幅 46 ＋ 間 10 → 題は列の左から 56。題の左端は一本） */ --ts-sky: rgba(125, 211, 252, 0.8); margin: 0; min-width: 0; } /* 図の見出し：「タイムスタンプ」（札）と、製品の公式の見出し「概要欄に貼れる見どころを、自動で。」（ja.ts:368 timestampTitle）。 768 以上は舞台の左上の升（進行バーの段の左）に置く。スマホは舞台の上 */ #products .ts-head-cap { margin: 0 0 14px; } #products .ts-head-cap .ts-kicker { display: block; font: 500 13px/16px var(--pv-ja); letter-spacing: 0.04em; color: var(--pv-ink-2); } #products .ts-head-cap .ts-title { display: block; margin-top: 8px; font: 500 var(--pv-fs-3)/24px var(--pv-ja); letter-spacing: 0.04em; color: var(--pv-ink); } @media (min-width: 768px) { #products .ts { display: grid; grid-template-columns: var(--ts-lw) minmax(0, 1fr); column-gap: var(--ts-gap); } #products .ts > .ts-head-cap { grid-area: 1 / 1; align-self: start; position: relative; z-index: 1; margin: -2px 0 0; } /* 札のインク → 舞台の上端（面の頂）にそろえる */ #products .ts > .ts-stage { grid-area: 1 / 1 / 2 / 3; } #products .ts > .pc-note { grid-area: 2 / 1 / 3 / 3; } } /* 行：アーカイブ（波と進行バー）/ 見どころの段 / SNSクリップの段（案C で足した行。--cl-lane）/ YouTube 概要欄 */ #products .ts-stage { position: relative; display: grid; grid-template-columns: var(--ts-lw) minmax(0, 1fr); grid-template-rows: auto var(--ts-mid) var(--cl-lane, 0px) auto; column-gap: var(--ts-gap); min-width: 0; } #products .ts-lab { margin: 0; font: 500 13px/16px var(--pv-ja); letter-spacing: 0.04em; color: var(--pv-ink-2); white-space: nowrap; } #products .ts-lab b { font: 600 13px/16px var(--pv-en); letter-spacing: 0.04em; } /* アーカイブ：進行バーの左 16、文字の中心をバーの中心へ（行の箱 16 の中心 8 ＝ バーの中心の高さ 3 ＋ 5） */ #products .ts-lab--src { grid-area: 1 / 1; justify-self: end; align-self: end; margin: 0 calc(16px - var(--ts-gap)) calc(var(--ts-track) / 2 - 8px) 0; } /* 見どころ：印の段の左 16。採用の印（金、製品の値）を添える */ #products .ts-lab--hl { grid-area: 2 / 1; justify-self: end; align-self: center; display: flex; align-items: center; gap: 8px; margin-right: calc(16px - var(--ts-gap)); } #products .ts-check { display: flex; flex: none; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 2px; background: rgba(216, 182, 106, 0.18); } #products .ts-check::after { content: ""; width: 6px; height: 6px; border-radius: 1px; background: #ecd28a; } /* 契約の暗い地の上の金 */ #products .ts-lab--yt { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } #products .ts-lab--yt::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: rgba(239, 68, 68, 0.8); } /* アーカイブ（進行バーと音量の面） */ #products .ts-bar { grid-area: 1 / 2; position: relative; height: calc(var(--ts-wave) + var(--ts-track)); } #products .ts-layer { position: absolute; inset: 0; } #products .ts-wave { position: absolute; left: 0; top: 0; display: block; width: 100%; height: var(--ts-wave); overflow: visible; } #products .ts-wave use { fill: currentColor; } #products .ts-wave use.ts-peak { fill: url(#ts11-peaks); } /* 見どころの山（印のまわりだけ空色。横のぼかしは断片の SVG の linearGradient） */ #products .ts-track { position: absolute; left: 0; right: 0; bottom: 0; height: var(--ts-track); border-radius: calc(var(--ts-track) / 2); background: currentColor; } #products .ts-off { color: rgba(255, 255, 255, 0.08); opacity: 0; } #products .ts-on { color: rgba(255, 255, 255, 0.2); } #products .ts-head { position: absolute; inset: 0; opacity: 0; pointer-events: none; } #products .ts-head::before { content: ""; position: absolute; left: -0.5px; top: 0; bottom: calc(var(--ts-track) / 2); width: 1px; background: rgba(255, 255, 255, 0.7); } #products .ts-head::after { content: ""; position: absolute; left: -6px; bottom: calc(var(--ts-track) / 2 - 6px); width: 12px; height: 12px; border-radius: 50%; background: rgba(255, 255, 255, 0.7); } /* 見どころの印：空色の点（地で縁取って、進行バーの上で浮かせる） */ #products .ts-mark { position: absolute; left: calc(var(--f) * 100%); bottom: calc(var(--ts-track) / 2); width: 10px; height: 10px; margin: 0 0 -5px -5px; border-radius: 50%; background: rgb(125, 211, 252); box-shadow: 0 0 0 3px var(--pv-bg); } /* YouTube 概要欄（貼れる時刻の一覧）：左右の 2 列にまたがる（行の線が右の列まで伸びる） */ #products .ts-out { grid-area: 4 / 1 / 5 / 3; min-width: 0; } #products .ts-rows { margin: 0; padding: 0; list-style: none; } #products .ts-rows li { --ts-x: calc(var(--ts-lw) + var(--ts-gap) + var(--f, 0) * (100% - var(--ts-lw) - var(--ts-gap))); display: flex; align-items: center; width: var(--ts-x); height: var(--ts-row); margin: 0; padding: 0; white-space: nowrap; } #products .ts-time { flex: none; width: var(--ts-time-w); font: 600 var(--pv-fs-2)/1 var(--pv-en); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; text-align: left; color: var(--ts-sky); } #products .ts-cap { flex: none; font: 500 var(--pv-fs-3)/1 var(--pv-ja); letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.8); } /* 信号線の横：題の 16 右から、角の節点まで */ #products .ts-leg { flex: 1 1 0; min-width: 0; height: 1px; margin: 0 0 0 16px; background: var(--pv-sig); } /* 信号線の縦：印の下からその行の中央まで（舞台を包含ブロックに）。 案C：舞台の下に SNSクリップの段が来る幅（スマホ）があるので、下端からではなく上から測る。 行の中央 = 波 ＋ 進行バー ＋ 見どころの段 ＋ SNSクリップの段 ＋ 概要欄の札（16 ＋ 間 8）＋ (i ＋ 0.5) 行 */ #products .ts-stage { --ts-row0: calc(var(--ts-wave) + var(--ts-track) + var(--ts-mid) + var(--cl-lane, 0px) + 24px + var(--ts-row) / 2); } #products .ts-rows li::after { content: ""; position: absolute; left: calc(var(--ts-x) - 0.5px); top: calc(var(--ts-wave) + var(--ts-track) / 2 + 8px); height: calc(var(--ts-row0) + var(--i) * var(--ts-row) - var(--ts-wave) - var(--ts-track) / 2 - 8px); width: 1px; background: var(--pv-sig); } /* 角の節点（消灯の輪、中は帯の地で抜く） */ #products .ts-rows li::before { content: ""; position: absolute; z-index: 1; left: calc(var(--ts-x) - 3.5px); top: calc(var(--ts-row0) + var(--i) * var(--ts-row) - 3.5px); width: 7px; height: 7px; border: 1px solid var(--pv-sig-ring); border-radius: 50%; background: var(--pv-bg); } /* ================= 5b. SNSクリップ（案C「波の上に切り出す」に独立審査の直しを入れたもの） ================= オーナー「後、SNSクリップ機能もタイムスタンプと一緒にPRして」。製品の SNSクリップ（ClipEditor.tsx）は、解析の見どころから使うものを選び、 1 件ずつ「切り出す範囲」を詰め、16:9 か 9:16 を選んで、選んだ見どころを書き出し順に 1 本の MP4 につなぐ。 ・波の上：見どころ 3 件（8:12・24:40・41:05。0:00 は YouTube の章の決まりの「はじまり」なので入れない）の山の区間を「切り出す範囲」として示す。 範囲は見どころの印（章の時刻）から始まり、頂を越えて右の裾まで。左の縁は印の真上なので、切れ目の線（上へ）と信号線（下へ）が印で 1 本の軸になる。 縁の線は製品の選択の縁（左右の 2 本、globals.css:8041-8053）。色は製品の金ではなく見どころの空色（この節の金は採用の印 1 か所だけ）。 ・SNSクリップの段：同じ印から降りる信号線の右 16 に、書き出す MP4 の縦長の枠（9:16）を下げ、線から枝の信号線（節点つき）でつなぐ。 線はそのまま概要欄の行まで降りる（タイムスタンプの行と SNSクリップの枠が、同じ見どころの印でつながる）。 枠の中は抽象だけ：製品の地の紫（tailwind.config.ts:14 primary #312F6B）・その範囲の波の形（空色）・再生の印（ClipEditor.tsx:1856-1862）・書き出し順の数字。 ・段の名札（左の列、アーカイブ・見どころの札と同じく進行バーの左 16 に右揃え。スマホは左揃え）： 1 行目「SNSクリップ」（ja.ts:941）と「合計04:02.0 ・ 3件 ・ 9:16」（ja.ts:1007） 2 行目 製品の説明文「見どころを切り出して、SNS 用の MP4 を書き出します」（ja.ts:942 clip.openHint。原文のまま、文節で折る） 文字はすべて 13（帯の 4 段目）。色は帯の中の製品の値だけ：「SNSクリップ」は図の題と同じ白（--pv-ink）でほかの札（white/55）より一段強く、 説明文は概要欄の題と同じ white/80（LandingPage.tsx:225）、合計はほかの札と同じ white/55。 寸法（1440 で 1u = 1px。1440 を超えると列の倍率 u で大きくする）：枠 72u × 128u（9:16）、線 → 枠 16u、段の上 → 枠 8u、 枠の中の波 48u（下 3/8）、再生の印は枠の中央。名札の 2 行の間はインクで 8（行の箱の間 4）。 段の高さ = 84u − 24px：枠の下端 → 1 本目の枠の見どころ（8:12）の概要欄の行の線を 8u にする高さ （行の線 = 段 ＋ 概要欄の札 24px ＋ 1.5 行 60u、枠の下端 = 8u ＋ 128u）。1440 で 60。このとき名札の上下は、見どころの札 → 名札 22、名札 → 概要欄の札 22 で中央。 幅ごとの段の高さ（説明文が 2 行に折れる幅は段を足す）と、768〜1023・スマホの置き方は products-home-v12.css の 7.。 */ #products .ts { --cl-px: calc(var(--site-max, 1168px) / 1168); /* 1u */ --cl-lane: calc(var(--cl-px) * 84 - 24px); /* 枠の下端 → 8:12 の行の線 8u（上の説明） */ --cl-fw: calc(var(--cl-px) * 72); --cl-fh: calc(var(--cl-px) * 128); --cl-off: calc(var(--cl-px) * 16); --cl-top: calc(var(--cl-px) * 8); --cl-fsh: calc(var(--cl-px) * 48); /* 枠の中の波の形の高さ：枠の下 3/8（再生の印を枠の中央に置き、数字・波と離す） */ --cl-sky: rgb(125, 211, 252); /* 枠の地：製品の再生の舞台の地 surface-deep #09090f（globals.css:159・:7746）に、製品の紫 primary #312F6B（tailwind.config.ts:14）を 40%。 帯の地（#09090f に金 10%）と同じ作り方で、新しい色を作らない。見た目は深い紫 #191834 */ --cl-ground: linear-gradient(rgba(49, 47, 107, 0.4), rgba(49, 47, 107, 0.4)), #09090f; } /* 波の上の切り出す範囲 */ #products .cl-cuts { position: absolute; inset: 0; pointer-events: none; } #products .cl-cutsvg { position: absolute; left: 0; top: 0; display: block; width: 100%; height: var(--ts-wave); overflow: visible; } #products .cl-fill { fill: rgba(125, 211, 252, 0.5); } /* 見どころの山の空色（0.45）より一段濃く */ #products .cl-edge { position: absolute; left: calc(var(--x) * 100%); top: calc(var(--y) / 100 * var(--ts-wave)); width: 1px; height: calc((100 - var(--y)) / 100 * var(--ts-wave)); margin-left: -0.5px; background: var(--cl-sky); transform-origin: 50% 100%; } /* SNSクリップの段：名札（1 行目 名前と合計、2 行目 説明文。行の箱の間 4 ＝ インクの間 8） */ #products .cl { min-width: 0; } #products .cl-lab { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 16px; row-gap: 4px; } #products .cl-lab b { font: 600 13px/16px var(--pv-en); letter-spacing: 0.04em; } #products .cl-name { color: var(--pv-ink); } /* 図の題と同じ白。ほかの札（white/55）より一段強く */ #products .cl-name b { color: inherit; } #products .cl-sum b { margin: 0 2px; } #products .cl-hint { flex: 0 0 100%; min-width: 0; color: rgba(255, 255, 255, 0.8); white-space: normal; } /* 概要欄の題と同じ white/80 */ #products .cl-hint > span { display: inline-block; white-space: nowrap; } /* 文節で折る（「見どころを切り出して、」／「SNS 用の MP4 を書き出します」） */ #products .cl-lane { position: relative; min-width: 0; } #products .cl-frame { position: absolute; isolation: isolate; left: calc(var(--f) * 100% + var(--cl-off)); top: var(--cl-top); width: var(--cl-fw); height: var(--cl-fh); border-radius: 2px; overflow: hidden; transform-origin: 0 0; } #products .cl-frame::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 2px; background: var(--cl-ground); } #products .cl-fs { position: absolute; left: 0; bottom: 0; display: block; width: 100%; height: var(--cl-fsh); } /* 枠の中の波の形：見どころの山（#ts11-peaks）と同じ空色の 0.45。落ちてきたかけらが「あの空色の山」だと色でつながるように、落ちる途中も同じ値のまま */ #products .cl-fs use { fill: rgb(125, 211, 252); fill-opacity: 0.45; } #products .cl-pi { position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; fill: rgba(255, 255, 255, 0.8); } /* 枠の中央（製品のプレビューの再生の印と同じ置き方） */ #products .cl-no { position: absolute; left: 8px; top: 8px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.8); font: 600 13px/16px var(--pv-en); letter-spacing: 0.04em; text-align: center; } /* 枝の信号線：印から降りる線（x = 印）から枠の左の縁まで、枠の縦の中央で。線の上の節点は消灯の輪 */ #products .cl-stub { position: absolute; left: calc(var(--f) * 100%); top: calc(var(--cl-top) + var(--cl-fh) / 2); width: var(--cl-off); height: 1px; background: var(--pv-sig); } #products .cl-node { position: absolute; left: -3.5px; top: -3px; z-index: 1; width: 7px; height: 7px; border: 1px solid var(--pv-sig-ring); border-radius: 50%; background: var(--pv-bg); } /* 置き場所：768 以上は舞台の 3 行目（見どころの段と概要欄の間）。左の列に名札、右の列（進行バーと同じ幅）に枠。枠は下の概要欄の行の高さへはみ出す （概要欄の行の信号線は、それぞれの印の x までしか来ないので、印の右に下げた枠とは重ならない） */ @media (min-width: 768px) { #products .cl { grid-area: 3 / 1 / 4 / 3; position: relative; z-index: 1; display: grid; grid-template-columns: var(--ts-lw) minmax(0, 1fr); column-gap: var(--ts-gap); } #products .cl-lab { grid-area: 1 / 1; justify-self: end; align-self: start; justify-content: flex-end; margin: var(--cl-labt, 6px) calc(16px - var(--ts-gap)) 0 0; } #products .cl-hint { text-align: right; } #products .cl-lane { grid-area: 1 / 2; } } /* スマホ：概要欄の下の 5 行目。名札（名前と合計の 1 行 → 説明文の 1 行）→ 枠 3 枚（幅を満たす、隙間 16）。印からの線は引かない（枠が印の下にないため）。 枠の中の数字が書き出し順 */ @media (max-width: 767px) { #products .ts { --cl-lane: 0px; } #products .ts-stage { grid-template-rows: auto var(--ts-mid) 0 auto auto; } #products .cl { grid-area: 5 / 1 / 6 / 3; } #products .cl-lab { justify-content: flex-start; } #products .cl-lane { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 16px; } #products .cl-frame { position: relative; left: auto; top: auto; width: auto; height: auto; aspect-ratio: 9 / 16; } #products .cl-fs { height: 37.5%; } #products .cl-stub { display: none; } } /* ================= 6. HUBBOT（VAPOR-HUB の Discord の BOT）の 3 つの働き：HUB の帯の主役の 1 段 ================= 各場面は同じ型：題（製品の語）→ Discord の窓（見出しの行 → きっかけ → HUBBOT の返信。要の文「〜を作成しました」は 16） → 信号線 → VAPOR-HUB の画面（できたものが入る）。1024 以上は 3 つの結果の窓を 1 枚の VAPOR-HUB の画面にまとめる（.dc-hubbg）。 Discord の窓は HUB の暗い地の窓（#101218、角 2、枠線なし）で、見出しの行だけを区切る。Discord 自身の灰色・青紫は使わない。 */ #products .dc { margin: 0; min-width: 0; } #products .dc-title { margin: 0; font: 700 var(--pv-fs-2)/24px var(--pv-ja); letter-spacing: 0.04em; color: var(--pv-ink); } #products .dc-win { position: relative; display: grid; min-width: 0; padding: 0 12px 12px; border-radius: 2px; background: var(--pv-win); color: #f1f5f9; font-family: var(--pv-ja); } #products .dc-head { display: flex; align-items: center; gap: 8px; min-width: 0; height: 40px; margin: 0 -12px; padding: 0 12px; border-bottom: 1px solid var(--pv-line); } #products .dc-head > b { font: 600 var(--pv-fs-2)/1 var(--pv-en); color: #64748b; } /* # text-slate-500 */ #products .dc-head > .dc-en { margin-left: auto; color: #64748b; font: 600 13px/16px var(--pv-en); letter-spacing: 0.04em; } #products .dc-head--vc .dc-vc-ppl { margin-left: 8px; } #products .dc-tag { display: inline-flex; align-items: center; margin-left: 6px; height: 16px; padding: 0 4px; border-radius: 2px; background: #4a48a0; color: #fff; font: 600 13px/16px var(--pv-en); letter-spacing: 0.04em; } #products .dc-vc { flex: none; width: 20px; height: 20px; fill: none; stroke: #64748b; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } #products .dc-vc path:first-child { fill: #64748b; stroke: none; } #products .dc-vc-ppl { display: inline-flex; } #products .dc-vc-av { display: block; flex: none; width: 20px; height: 20px; border-radius: 50%; background: color-mix(in srgb, #3b82f6 40%, #1b1e27); box-shadow: 0 0 0 2px var(--pv-win); overflow: hidden; } #products .dc-vc-av + .dc-vc-av { margin-left: -4px; } #products .dc-vc-av:nth-child(2) { background: color-mix(in srgb, #10b981 36%, #1b1e27); } #products .dc-vc-av--bot { background: #07090e; } #products .dc-vc-av--bot img { display: block; width: 100%; height: 100%; } #products .dc-a { min-width: 0; padding-top: 12px; } #products .dc-b { position: relative; display: flex; align-items: flex-start; gap: 12px; min-width: 0; padding-top: 16px; } #products .dc-msg { display: flex; align-items: flex-start; gap: 12px; min-width: 0; } #products .dc-body { flex: 1 1 0; min-width: 0; } #products .dc-av { display: block; flex: none; width: 32px; height: 32px; border-radius: 50%; background: #2a2f3c; } #products [data-kind="ticket"] .dc-a .dc-av { background: color-mix(in srgb, #3b82f6 40%, #1b1e27); } #products [data-kind="event"] .dc-a .dc-av { background: color-mix(in srgb, #ec4899 36%, #1b1e27); } #products [data-kind="minutes"] .dc-a .dc-av { background: color-mix(in srgb, #10b981 36%, #1b1e27); } #products .dc-av--bot { position: relative; z-index: 1; overflow: hidden; background: #07090e; } #products .dc-av--bot img { display: block; width: 100%; height: 100%; } #products .dc-who { display: flex; align-items: center; height: 20px; } #products .dc-who b { font: 600 var(--pv-fs-3)/20px var(--pv-en); letter-spacing: 0.04em; color: #f1f5f9; } #products .dc-line { display: flex; align-items: center; gap: 6px; min-width: 0; height: 20px; margin-top: 2px; } #products :is(.dc-line, .dc-field, .dc-link) .pv-bar:not(:last-child) { flex-shrink: 0; } #products .dc-kw { flex: none; font: 500 13px/20px var(--pv-ja); color: #f1f5f9; } #products .dc-at { display: inline-flex; flex: none; align-items: center; gap: 2px; height: 20px; padding: 0 4px; border-radius: 2px; background: rgba(139, 92, 246, 0.22); color: #c4b5fd; font: 600 13px/20px var(--pv-en); letter-spacing: 0.04em; } #products .dc-at em { font-style: normal; } #products .dc-at .pv-bar { height: 4px; background: currentColor; opacity: 0.6; } /* 右クリックのメニューとコマンドの候補（浮いた小窓：アプリの地 #0b0c0f、角 2、影。枠線なし） */ #products .dc-menu { display: inline-block; flex: none; margin: 6px 0 0; padding: 4px; border-radius: 2px; background: var(--pv-screen); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); } #products .dc-menu li { display: flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 2px; color: #cbd5e1; font: 500 13px/1 var(--pv-ja); white-space: nowrap; } #products .dc-menu li[data-on] { background: #4a48a0; color: #ffffff; } /* --primary-light（globals.css:48） */ #products .dc-pick { margin-top: 2px; padding: 6px 8px; border-radius: 2px; background: var(--pv-screen); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); } #products .dc-pick-name { display: flex; align-items: baseline; gap: 6px; } #products .dc-pick-name b { font: 700 13px/18px var(--pv-ja); color: #f1f5f9; } #products .dc-pick-name span { font: 500 13px/18px var(--pv-ja); color: #a78bfa; } #products .dc-pick-desc { font: 500 13px/18px var(--pv-ja); color: #94a3b8; } /* HUBBOT の返信：項目（太字の項目名＋値）・ボタン・状態の行 */ #products .dc-field { display: flex; align-items: center; gap: 8px; min-width: 0; height: 20px; margin-top: 2px; } #products .dc-field b { flex: none; font: 700 13px/20px var(--pv-ja); color: #f1f5f9; } #products .dc-field > span { flex: none; font: 500 13px/20px var(--pv-ja); color: #cbd5e1; } #products .dc-field > .dc-tk { color: #94a3b8; } #products .dc-field > span.dc-en { font-family: var(--pv-en); font-weight: 600; letter-spacing: 0.04em; } /* (JST) は欧文の書体で */ #products .dc-grow { flex: 1 1 auto; width: auto; min-width: 24px; max-width: var(--w); } /* 値の棒は行の余りを満たす（上限 --w） */ #products :is([data-kind="ticket"], [data-kind="event"]) .dc-btns { display: none; } #products :is([data-kind="ticket"], [data-kind="event"]).dc-armed .dc-btns { display: flex; } #products .dc-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } #products .dc-btns span { display: inline-flex; align-items: center; height: 32px; padding: 0 10px; border-radius: 2px; background: rgba(255, 255, 255, 0.08); color: #f1f5f9; font: 500 13px/1 var(--pv-ja); white-space: nowrap; } #products .dc-btns span[data-primary] { background: #4a48a0; color: #ffffff; } /* 状態の行（原文の絵文字の代わりに HUB の状態の色の点：記録中 --status-error、録音を終了 --status-warning、作成 --status-success） */ #products .dc-stat { display: flex; align-items: center; gap: 8px; min-width: 0; height: 20px; margin-top: 2px; } #products .dc-stat > i:first-child { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #f87171; } #products .dc-stat[data-tone="wait"] > i:first-child { background: #fcd34d; } #products .dc-stat[data-tone="ok"] > i:first-child { background: #86efac; } #products .dc-stat b { font: 700 13px/20px var(--pv-ja); color: #f1f5f9; white-space: nowrap; } #products .dc-stat > .pv-bar { flex: 0 1 auto; min-width: 16px; height: 4px; background: rgba(226, 232, 240, 0.45); } /* チケットの番号（T-{yymm}-{連番}）の代わりの棒 */ #products .dc-stat .dc-en { flex: none; margin-left: 4px; color: #cbd5e1; font-size: 13px; line-height: 20px; } /* 要の文：「チケットを作成しました。」「予定を作成しました。」「AI議事録を作成しました」は一段大きく（16） */ #products :is([data-kind="ticket"], [data-kind="event"]) .dc-done { margin-top: 12px; } #products .dc-done { height: 24px; margin-top: 10px; } #products .dc-done b { font-size: var(--pv-fs-3); line-height: 24px; } #products .dc-link { display: flex; align-items: center; gap: 2px; height: 20px; margin-top: 2px; padding-left: 16px; color: #93c5fd; } /* --status-info。点の幅 8 ＋ 間 8 だけ字下げ */ #products .dc-link .pv-bar { height: 4px; background: currentColor; opacity: 0.55; } #products .dc-link .dc-en { flex: none; font-size: 13px; line-height: 20px; } #products .dc-link .pv-bar:first-child { flex: 1 1 0; width: auto; min-width: 0; max-width: none; } #products .dc-link .pv-bar:last-child { flex: none; } #products .dc-scope { display: flex; align-items: center; gap: 6px; height: 20px; margin-top: 2px; padding-left: 16px; color: #cbd5e1; font: 500 13px/20px var(--pv-ja); } #products .dc-en { font-family: var(--pv-en); font-weight: 600; letter-spacing: 0.04em; } /* 信号線（契約の型）：HUBBOT の丸の下（丸の中心の軸 = 返信の左端から 16）から、Discord の窓の下の縁（節点）を抜けて、 VAPOR-HUB の画面の上の縁（節点）まで。窓の下の内側 12 ＋ 窓と画面の間 --dc-gap が、返信の下からの長さ */ #products .dc-wire { position: absolute; left: 16px; top: 48px; /* 返信の上の余白 16 ＋ 丸 32 */ bottom: calc(-12px - var(--dc-gap, 32px)); width: 1px; margin-left: -0.5px; background: var(--pv-sig); pointer-events: none; } #products .dc-node { position: absolute; left: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border: 1px solid var(--pv-sig-ring); border-radius: 50%; background: var(--pv-bg); } #products .dc-node:nth-child(1) { top: calc(100% - var(--dc-gap, 32px)); } /* Discord の窓の下の縁 */ #products .dc-node:nth-child(2) { top: 100%; } /* VAPOR-HUB の画面の上の縁 */ /* VAPOR-HUB の画面（結果が入る先）：見出しの行「VAPOR-HUB ＋ ページの名前」（Discord の窓の「# チャンネル」と対）。 */ #products .dc-hubbg { display: none; } #products .dc-hub { display: flex; flex-direction: column; min-width: 0; padding: 0 12px 12px; border-radius: 2px; background: var(--pv-screen); color: #f1f5f9; overflow: hidden; } #products .dc-hub-head { display: flex; flex: none; align-items: center; gap: 12px; height: 40px; margin: 0 -12px 12px; padding: 0 12px; border-bottom: 1px solid var(--pv-line); } #products .dc-hub-head b { font: 600 13px/1 var(--pv-en); letter-spacing: 0.04em; color: #f1f5f9; } #products .dc-hub-head span { color: #94a3b8; font: 500 13px/1 var(--pv-ja); white-space: nowrap; } #products .dc-hub-head span[data-on] { color: #f1f5f9; } #products .dc-hub-head span.dc-en { font-family: var(--pv-en); font-weight: 600; letter-spacing: 0.04em; } #products .dc-hub-body { position: relative; flex: none; height: 176px; min-width: 0; overflow: hidden; } /* 新しく入るもの：行の高さを 0fr → 1fr に開いて、下の中身を押し下げながら入る（動きの無いときは開いたまま） */ #products .dc-slot { display: grid; grid-template-rows: 1fr; min-width: 0; } #products .dc-slot > * { min-height: 0; overflow: hidden; } /* ① ボード：未着手（新しいカードが入る）と進行中の 2 列 */ #products .dc-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 8px; } #products .dc-board .pv-kb-col { height: 100%; } #products .dc-board .dc-slot-in { padding-bottom: 8px; } /* 新しいカード → 下のカード 8（列の gap の代わり） */ #products .dc-board .pv-kb-col > .dc-slot { margin-bottom: -8px; } /* ② カレンダー（月の表示の 2 週。表示の切り替え ‹ 今日 ›・日・週・月・アジェンダ、CalendarView.tsx:463-563） */ #products .dc-calp { display: flex; flex-direction: column; } #products .dc-cal-bar { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 8px; height: 28px; margin-bottom: 8px; } #products .dc-cal-nav, #products .dc-cal-tabs { display: flex; gap: 4px; } #products .dc-cal-nav span, #products .dc-cal-tabs span { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 8px; border-radius: 2px; background: rgba(255, 255, 255, 0.04); color: #cbd5e1; font: 500 13px/1 var(--pv-ja); white-space: nowrap; } #products .dc-cal-tabs span[data-on] { background: rgba(139, 92, 246, 0.22); color: #f1f5f9; } /* 選択中：紫 22% の地 */ @media (min-width: 768px) and (max-width: 1279px) { #products .dc-cal-nav span, #products .dc-cal-tabs span { min-width: 24px; padding: 0 5px; } } /* ③ Wiki：親ページ「AI議事録」の子ページの表（WikiReaderPanel・WikiPageTable）。題は白 */ #products .dc-wk-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 24px; } #products .dc-wk-title > b { font: 700 var(--pv-fs-3)/24px var(--pv-ja); color: #ffffff; } #products .dc-wk-badge { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 6px; border-radius: 2px; background: rgba(148, 163, 184, 0.1); color: #cbd5e1; font: 600 13px/1 var(--pv-en); } #products .dc-wk-badge svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } #products .dc-wk-meta { height: 16px; margin-top: 4px; color: #94a3b8; font: 500 13px/16px var(--pv-ja); } #products .dc-wk-meta b { font-weight: 600; font-variant-numeric: tabular-nums; } #products .dc-wk-t { margin-top: 12px; } #products .dc-wk-th, #products .dc-wk-tr { display: grid; grid-template-columns: minmax(0, 1fr) 64px; align-items: center; gap: 12px; height: 30px; padding: 0 10px; border-radius: 2px; } #products .dc-wk-th { background: rgba(255, 255, 255, 0.04); color: #94a3b8; font: 500 13px/1 var(--pv-ja); } #products .dc-wk-th span:last-child { text-align: right; } #products .dc-wk-tr > span { display: flex; align-items: center; gap: 6px; min-width: 0; } #products .dc-wk-tr b { flex: none; font: 500 13px/1 var(--pv-ja); color: #e2e8f0; } /* 題の末尾「議事録」（meeting-minutes-format.ts:96） */ #products .dc-wk-tr > .pv-bar { justify-self: end; } #products .dc-wk-tr .pv-bar { background: rgba(226, 232, 240, 0.4); } #products .dc-wk-tr[data-new] { background: var(--pv-new); } /* HUBBOT が作った子ページ */ /* ================= 7. 動き（products-motion-v2.js が開始前の印を付けて、節の幕が開いてから流す） ================= JS が無い・動きを減らす設定では何も付かず、完成の状態で静止する。 行・札の出方は製品の reveal-up（下 8px から、420ms、cubic-bezier(0.22, 1, 0.36, 1)）にそろえる。 */ #products { --pv-up: cubic-bezier(0.22, 1, 0.36, 1); } @keyframes pv-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes pv-fade { from { opacity: 0; } to { opacity: 1; } } /* テンプレート：左から右へ一続きの帯で開く（768 以上は bundle 全体、767 以下は各囲み） */ #products .pv-armed.pv-tpl { clip-path: inset(0 100% 0 0); } #products .pv-play.pv-tpl { animation: pv-sweep 1100ms cubic-bezier(0.65, 0, 0.2, 1) both; } #products .pv-play.pv-tpl img { animation: pv-settle 1400ms cubic-bezier(0.2, 0.7, 0.1, 1) both; } @media (min-width: 768px) { #products .pc-tpl-bundle.pv-armed { clip-path: inset(0 100% 0 0); } #products .pc-tpl-bundle.pv-play { animation: pv-sweep 1100ms cubic-bezier(0.65, 0, 0.2, 1) both; } #products .pc-tpl-bundle.pv-play img { animation: pv-settle 1400ms cubic-bezier(0.2, 0.7, 0.1, 1) both; } #products .pc-tpl-bundle.pv-armed .pv-tpl { clip-path: none; } } @keyframes pv-sweep { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } } @keyframes pv-settle { from { transform: scale(1.06); } to { transform: none; } } /* タイムスタンプ（.ts-armed → .ts-play）： 序：再生のつまみが現れる → 破：つまみが配信を左から右へなぞり、なぞった所が解析済みの色に変わる（見どころの山は空色）。 つまみが見どころを通るたびに印が点き、信号線がそこから降りて角の節点で左へ曲がり、概要欄のその行が下から上がる → 急：つまみが終わりに着いて消え、採用の印が点く。 */ #products .ts { --ts-t0: 200ms; --ts-scan: 1500ms; --ts-ease: cubic-bezier(0.45, 0, 0.3, 1); --ts-drop: 240ms; --ts-legd: 200ms; } #products .ts-armed .ts-off { opacity: 1; } #products .ts-armed .ts-on { clip-path: inset(0 100% 0 0); } #products .ts-armed .ts-mark { opacity: 0; transform: scale(0.5); } #products .ts-armed .ts-rows li::after { clip-path: inset(0 0 100% 0); } #products .ts-armed .ts-rows li::before { opacity: 0; transform: scale(0.5); } #products .ts-armed .ts-leg { clip-path: inset(0 0 0 100%); } #products .ts-armed :is(.ts-time, .ts-cap) { opacity: 0; } #products .ts-armed .ts-check::after { transform: scale(0); } #products .ts-play .ts-off { animation: ts-wipe-off var(--ts-scan) var(--ts-ease) var(--ts-t0) both; } #products .ts-play .ts-on { animation: ts-wipe-on var(--ts-scan) var(--ts-ease) var(--ts-t0) both; } #products .ts-play .ts-head { animation: ts-head-move var(--ts-scan) var(--ts-ease) var(--ts-t0) both, ts-head-fade calc(var(--ts-t0) + var(--ts-scan) + 300ms) linear 0ms both; } #products .ts-play .ts-mark { animation: ts-mark 200ms cubic-bezier(0.2, 0.7, 0.1, 1) calc(var(--ts-t0) + var(--ts-at, 0ms)) both; } #products .ts-play .ts-rows li::after { animation: ts-drop var(--ts-drop) cubic-bezier(0.5, 0, 0.9, 0.6) calc(var(--ts-t0) + var(--ts-at, 0ms) + 60ms) both; } #products .ts-play .ts-rows li::before { animation: ts-mark 200ms cubic-bezier(0.2, 0.7, 0.1, 1) calc(var(--ts-t0) + var(--ts-at, 0ms) + 40ms + var(--ts-drop)) both; } #products .ts-play .ts-leg { animation: ts-leg var(--ts-legd) cubic-bezier(0.1, 0.4, 0.3, 1) calc(var(--ts-t0) + var(--ts-at, 0ms) + 60ms + var(--ts-drop)) both; } #products .ts-play :is(.ts-time, .ts-cap) { animation: pv-up 420ms var(--pv-up) calc(var(--ts-t0) + var(--ts-at, 0ms) + 60ms + var(--ts-drop) + var(--ts-legd) * 0.5) both; } #products .ts-play .ts-check::after { animation: ts-check 360ms var(--pv-up) calc(var(--ts-t0) + var(--ts-scan) + 120ms) both; } @keyframes ts-wipe-off { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 0 100%); } } @keyframes ts-wipe-on { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } } @keyframes ts-head-move { from { transform: translateX(0); } to { transform: translateX(100%); } } @keyframes ts-head-fade { 0% { opacity: 0; } 12% { opacity: 1; } 86% { opacity: 1; } 100% { opacity: 0; } } @keyframes ts-mark { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: none; } } @keyframes ts-drop { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } } @keyframes ts-leg { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } } @keyframes ts-check { from { transform: scale(0); } to { transform: none; } } /* SNSクリップ（.cl-armed → .cl-play。タイムスタンプの流れ（急：採用の印）が半ばまで点いた所から、同じ流れの続きとして 1 度だけ。JS が図 [data-ts] に付ける）。 名前「SNSクリップ」と説明文は最初から出ている（段の見出し。空の段を見せない）。合計の行だけが、流れの終わりに上がる： 序：波の上で、切り出す範囲の縁の線が進行バーから山の面まで立ち、範囲が空色に塗られる（左から右へ、つまみが通ったのと同じ向き）。 破：範囲の波の形が持ち上がり（16u 上へ。離れた跡の塗りは沈む）、印から降りる信号線に沿って落ちながら、縦長の枠（9:16）へ広がる。枠の地（紫）が開く。 768 以上は、JS が範囲と枠の実際の位置から --tx・--ty・--sx・--sy を入れる（枠の中の波の形が、波の上の範囲にぴったり重なる所から始める）。 急：枝の信号線が枠へ渡り、節点が点き、書き出し順の数字と再生の印が出て、名札の「合計 … ・ 3件 ・ 9:16」が上がる。 スマホは枠が印の下にないので、飛ばさない。枠の器（9:16 の地）は最初から置き、中身（範囲の波の形・数字・再生の印）だけを出す （範囲の波の形は枠の中を下から上がってくる）。タイムスタンプが流れる約 2 秒のあいだ、名札の下に空白を残さないため。 */ #products .ts { --cl-t: 140ms; /* 範囲ごとのずれ（左から右へ） */ --cl-fly: 960ms; --cl-fly0: 320ms; } #products .cl-armed .cl-fill { opacity: 0; } #products .cl-armed .cl-edge { transform: scaleY(0); } #products .cl-armed .cl-frame { opacity: 0; } #products .cl-armed .cl-stub { clip-path: inset(0 100% 0 0); } #products .cl-armed .cl-node { opacity: 0; transform: scale(0.5); } #products .cl-armed .cl-sum { opacity: 0; } #products .cl-play .cl-edge { animation: cl-edge 280ms cubic-bezier(0.2, 0.7, 0.1, 1) calc(var(--i) * var(--cl-t)) both; } /* 範囲の塗り：点く → 形が持ち上がって離れる間は沈む（切り出した跡）→ 枠が着いたら戻る。1520ms の中の割合（点く 200・離れる 260〜460・戻る 1216〜） */ #products .cl-play .cl-fill { animation: cl-fill 1520ms linear calc(var(--i) * var(--cl-t) + 60ms) both; } /* 枠は飛び始めるまで出さない（forwards。both だと待ちの間に 0% の姿で範囲の上に先に現れ、左から順に塗られる序が消える） */ #products .cl-play .cl-frame { animation: cl-fly var(--cl-fly) linear calc(var(--cl-fly0) + var(--i) * var(--cl-t)) forwards; } #products .cl-play .cl-frame::before { animation: pv-fade 280ms ease-out calc(var(--cl-fly0) + var(--i) * var(--cl-t) + var(--cl-fly) * 0.72) both; } #products .cl-play .cl-frame :is(.cl-no, .cl-pi) { animation: pv-fade 320ms ease-out calc(var(--cl-fly0) + var(--i) * var(--cl-t) + var(--cl-fly)) both; } #products .cl-play .cl-stub { animation: cl-stub 240ms cubic-bezier(0.1, 0.4, 0.3, 1) calc(var(--cl-fly0) + var(--i) * var(--cl-t) + var(--cl-fly) - 80ms) both; } #products .cl-play .cl-node { animation: ts-mark 200ms cubic-bezier(0.2, 0.7, 0.1, 1) calc(var(--cl-fly0) + var(--i) * var(--cl-t) + var(--cl-fly) - 120ms) both; } #products .cl-play .cl-sum { animation: pv-up 420ms var(--pv-up) calc(var(--cl-fly0) + 2 * var(--cl-t) + var(--cl-fly) + 120ms) both; } /* 見ないまま通り過ぎかけたとき（JS の clSettle）：開始前のまま見えていた部品を 240ms で溶かして完成の状態へ */ #products .cl-settle :is(.cl-edge, .cl-fill, .cl-frame, .cl-node, .cl-sum) { animation: pv-fade 240ms ease-out both; } /* 持ち上がる → 線に沿って落ちながら枠へ（0〜22%：上へ 16u、22〜100%：枠の位置へ）。--tx 等が無いとき（スマホ）は使わない */ @keyframes cl-fly { 0% { opacity: 1; transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(var(--sx, 1), var(--sy, 1)); animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1); } 22% { opacity: 1; transform: translate(var(--tx, 0px), calc(var(--ty, 0px) - var(--cl-px) * 16)) scale(var(--sx, 1), var(--sy, 1)); animation-timing-function: cubic-bezier(0.55, 0, 0.2, 1); } 100% { opacity: 1; transform: none; } } @keyframes cl-edge { from { transform: scaleY(0); } to { transform: none; } } @keyframes cl-fill { 0% { opacity: 0; } 13% { opacity: 1; } 17% { opacity: 1; } 30% { opacity: 0.25; } 80% { opacity: 0.25; } 100% { opacity: 1; } } @keyframes cl-stub { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } } @keyframes cl-rise { from { opacity: 0; transform: translateY(60%); } to { opacity: 1; transform: none; } } @media (max-width: 767px) { #products .cl-armed .cl-frame { opacity: 1; } #products .cl-armed .cl-frame :is(.cl-fs, .cl-no, .cl-pi) { opacity: 0; } #products .cl-play .cl-frame, #products .cl-play .cl-frame::before { animation: none; } #products .cl-play .cl-fs { animation: cl-rise 640ms var(--pv-up) calc(var(--cl-fly0) + var(--i) * 180ms) both; } #products .cl-play .cl-frame :is(.cl-no, .cl-pi) { animation-delay: calc(var(--cl-fly0) + var(--i) * 180ms + 420ms); } #products .cl-play .cl-sum { animation-delay: calc(var(--cl-fly0) + 2 * 180ms + 640ms); } /* 見ないまま通り過ぎかけたとき：器は出ているので、中身だけを溶かして出す */ #products .cl-settle .cl-frame { animation: none; } #products .cl-settle .cl-frame :is(.cl-fs, .cl-no, .cl-pi) { animation: pv-fade 240ms ease-out both; } } /* HUBBOT の 3 場面（.dc-armed → .dc-play（序破）→ .dc-land（急））。3 場面は同時に動かさず、左から順に一つの流れでつなぐ（JS）。 人の発言ときっかけ（右クリックのメニュー・メンション・コマンド）は最初から出ている（空の器を見せない）。 序破：HUBBOT の返信が上がり、項目の棒が伸び、ボタンが並び、主のボタンが押され、要の文「〜を作成しました」で締まる。 議事録は、HUBBOT が VC に加わり「記録中」→「録音を終了しました」→「作成しました」。 急：信号線が VAPOR-HUB の画面の縁まで降り、新しいカード・予定・子ページが入る（件数も変わる）。 */ #products .dc-armed .dc-b > .dc-av, #products .dc-armed .dc-b .dc-who { opacity: 0; } #products .dc-armed .dc-b .pv-bar { transform: scaleX(0); } #products .dc-armed :is(.dc-field > span, .dc-field .pv-avs, .dc-field > b, .dc-btns span, .dc-stat, .dc-link, .dc-scope) { opacity: 0; } #products .dc-armed .dc-vc-av--bot { opacity: 0; transform: scale(0.5); } #products .dc-armed .dc-wire { clip-path: inset(0 -4px 100% -4px); } #products .dc-armed .dc-slot { grid-template-rows: 0fr; } #products .dc-armed .dc-slot > * { opacity: 0; } #products .dc-armed .dc-wk-tr[data-new] { clip-path: inset(0 0 100% 0); } #products .dc-armed .pv-ev[data-new] { opacity: 0; transform: translateY(-8px); } #products .dc-armed .pv-d[data-sel] { background: transparent; } #products .dc-play .dc-b > .dc-av, #products .dc-play .dc-b .dc-who { animation: pv-up 420ms var(--pv-up) 0ms both; } #products .dc-play .dc-field > b { animation: pv-up 420ms var(--pv-up) 80ms both; } #products .dc-play .dc-b .pv-bar { transform-origin: 0 50%; animation: dc-grow 400ms cubic-bezier(0.3, 0.7, 0.1, 1) 140ms both; } #products .dc-play :is(.dc-field > span, .dc-field .pv-avs) { animation: pv-fade 320ms ease-out 180ms both; } #products .dc-play .dc-btns span { animation: pv-up 420ms var(--pv-up) calc(240ms * var(--dc-t, 1)) both; } #products .dc-play .dc-btns span + span { animation-delay: calc(280ms * var(--dc-t, 1)); } #products .dc-play .dc-btns span + span + span { animation-delay: calc(320ms * var(--dc-t, 1)); } #products .dc-play .dc-btns span[data-primary] { animation: pv-up 420ms var(--pv-up) calc(240ms * var(--dc-t, 1)) both, dc-press 240ms ease-in-out calc(520ms * var(--dc-t, 1)); } #products .dc-scene:is([data-kind="ticket"], [data-kind="event"]).dc-play .dc-btns { animation: dc-btns-out 240ms ease-in-out calc(760ms * var(--dc-t, 1)) forwards; } #products .dc-scene:is([data-kind="ticket"], [data-kind="event"]).dc-play .dc-stat.dc-done { animation: pv-up 420ms var(--pv-up) calc(760ms * var(--dc-t, 1)) both; } #products .dc-play .dc-stat.dc-done .pv-bar { animation-delay: calc(860ms * var(--dc-t, 1)); } #products [data-kind="minutes"].dc-play .dc-stat.dc-done { animation: pv-up 420ms var(--pv-up) calc(640ms * var(--dc-t, 1)) both; } /* 議事録：VC に HUBBOT が加わる → 記録中 → 録音を終了しました → 作成しました（リンクと公開範囲も） */ #products .dc-play .dc-vc-av--bot { animation: dc-join 360ms var(--pv-up) 60ms both; } #products .dc-play .dc-stat[data-tone="rec"] { animation: pv-up 420ms var(--pv-up) 140ms both; } #products .dc-play .dc-stat[data-tone="wait"] { animation: pv-up 420ms var(--pv-up) 380ms both; } #products [data-kind="minutes"].dc-play .dc-link { animation: pv-up 420ms var(--pv-up) 720ms both; } #products [data-kind="minutes"].dc-play .dc-link .pv-bar { animation-delay: 780ms; } #products :is([data-kind="ticket"], [data-kind="event"]).dc-play .dc-link { animation: pv-up 420ms var(--pv-up) calc(860ms * var(--dc-t, 1)) both; } #products :is([data-kind="ticket"], [data-kind="event"]).dc-play .dc-link .pv-bar { transform-origin: 0 50%; animation: dc-grow 400ms cubic-bezier(0.3, 0.7, 0.1, 1) calc(920ms * var(--dc-t, 1)) both; } #products .dc-land .dc-wire { animation: dc-wire calc(300ms * var(--dc-t, 1)) cubic-bezier(0.4, 0, 0.2, 1) both; } #products .dc-land .dc-slot { animation: dc-open calc(420ms * var(--dc-t, 1)) cubic-bezier(0.4, 0, 0.2, 1) calc(260ms * var(--dc-t, 1)) both; } #products .dc-land .dc-slot > * { animation: dc-land calc(460ms * var(--dc-t, 1)) var(--pv-up) calc(340ms * var(--dc-t, 1)) both; } #products .dc-land .dc-wk-tr[data-new] { animation: dc-write calc(520ms * var(--dc-t, 1)) cubic-bezier(0.45, 0, 0.2, 1) calc(420ms * var(--dc-t, 1)) both; } #products .dc-land .pv-ev[data-new] { animation: dc-land calc(460ms * var(--dc-t, 1)) var(--pv-up) calc(340ms * var(--dc-t, 1)) both; } #products .dc-land .pv-d[data-sel] { animation: dc-sel calc(400ms * var(--dc-t, 1)) ease-out calc(260ms * var(--dc-t, 1)) both; } #products .dc-settle :is(.dc-b > .dc-av, .dc-who, .dc-field > *, .dc-stat, .dc-link, .dc-slot > *, .pv-ev[data-new], .dc-wk-tr[data-new]) { animation: pv-fade 240ms ease-out both; } #products .dc-settle .dc-slot { animation: dc-open 240ms cubic-bezier(0.4, 0, 0.2, 1) both; } #products .dc-settle .pv-d[data-sel] { animation: dc-sel 240ms ease-out both; } @keyframes dc-grow { from { transform: scaleX(0); } to { transform: none; } } @keyframes dc-press { 0%, 100% { transform: none; filter: none; } 45% { transform: scale(0.94); filter: brightness(1.3); } } @keyframes dc-btns-out { to { opacity: 0; max-height: 0; margin-top: 0; overflow: hidden; } } @keyframes dc-join { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: none; } } @keyframes dc-wire { from { clip-path: inset(0 -4px 100% -4px); } to { clip-path: inset(0 -4px 0 -4px); } } @keyframes dc-open { from { grid-template-rows: 0fr; } to { grid-template-rows: 1fr; } } @keyframes dc-land { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } @keyframes dc-write { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } } @keyframes dc-sel { from { background: transparent; } to { background: rgba(139, 92, 246, 0.15); } } /* 動きを減らす設定：JS は何もしないが、念のため開始前の印が付いていても完成の状態で静止させる */ @media (prefers-reduced-motion: reduce) { #products :is(.pv-armed, .ts-armed, .dc-armed, .cl-armed), #products :is(.pv-armed, .ts-armed, .dc-armed, .cl-armed) *, #products :is(.pv-armed, .ts-armed, .dc-armed, .cl-armed) *::before, #products :is(.pv-armed, .ts-armed, .dc-armed, .cl-armed) *::after { animation: none !important; transition: none !important; clip-path: none !important; } #products .cl-armed :is(.cl-fill, .cl-frame, .cl-node, .cl-sum, .cl-fs, .cl-no, .cl-pi) { opacity: 1 !important; } #products .cl-armed :is(.cl-edge, .cl-frame, .cl-node, .cl-fs) { transform: none !important; } #products .ts-armed :is(.ts-mark, .ts-time, .ts-cap), #products .ts-armed .ts-rows li::before, #products :is([data-kind="ticket"], [data-kind="event"]) .dc-btns { display: none !important; } #products .dc-armed :is(.dc-b > .dc-av, .dc-who, .dc-field > span, .dc-field > b, .dc-field .pv-avs, .dc-btns span, .dc-stat, .dc-link, .dc-scope, .dc-slot > *, .dc-vc-av--bot, .pv-ev[data-new]) { opacity: 1 !important; transform: none !important; } #products .ts-armed .ts-off { opacity: 0 !important; } #products .dc-armed .pv-bar, #products .ts-armed .ts-check::after { transform: none !important; } #products .dc-armed .dc-slot { grid-template-rows: 1fr !important; } #products .dc-armed .pv-d[data-sel] { background: rgba(139, 92, 246, 0.15) !important; } }