@charset "UTF-8";
/* ==========================================================================
   kpiee 新TOP デモコンポーネント CSS（差し替え版）
   各 .html の <style> をコンポーネント単位にスコープして取り込んだもの
   home-newtop.css の後、newtop-custom.css の前に読み込む
   ========================================================================== */


/* ----------------------------------------------------------------
   KV キービジュアル（kpiee-showcase-final-v11.html）
   ---------------------------------------------------------------- */
.kpiee-kv3 { -webkit-font-smoothing: antialiased; color: #18181b; font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic UI", "Noto Sans JP", system-ui, sans-serif; line-height: 1.6; }
.kpiee-kv3 { --background: #ffffff;
    --foreground: #18181b;
    --card: #ffffff;
    --border: #e5e7eb;
    --muted: #f4f4f5;
    --muted-foreground: #71717a;
    --brand: #D72A44;
    /* 実画面由来のカラー */
    --sheet-border: #d9e1ec;
    --sheet-head: #e7eefa;
    --num-blue: #2563eb;
    --num-red: #e11d48;
    /* チャートは2色運用：青＋赤 */
    --chart-blue: #4285F4;
    --chart-red: #E73F58; }
.kpiee-kv3 * { box-sizing: border-box; margin: 0; padding: 0; }
.kpiee-kv3 { font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic UI", "Noto Sans JP", system-ui, sans-serif; color: var(--foreground); -webkit-font-smoothing: antialiased; }
.kpiee-kv3 .wrap { max-width: 1152px; margin: 0 auto; }
/* ===== ブラウザ風フレーム ===== */
.kpiee-kv3 .browser { overflow: hidden; border-radius: 12px; border: 1px solid var(--border); background: var(--card);
    box-shadow: 0 1px 0 0 rgba(0,0,0,0.02), 0 24px 60px -24px rgba(0,0,0,0.28); }
.kpiee-kv3 .browser-bar { display: flex; align-items: center; gap: 12px;
    border-bottom: 1px solid var(--border); background: rgba(244,244,245,0.4); padding: 10px 16px; }
.kpiee-kv3 .dots { display: flex; gap: 6px; }
.kpiee-kv3 .dot { width: 12px; height: 12px; border-radius: 9999px; background: var(--border); }
.kpiee-kv3 .url-pill { margin: 0 auto; display: flex; align-items: center; gap: 8px;
    border-radius: 6px; background: var(--background); padding: 4px 12px; font-size: 12px; color: var(--muted-foreground); }
.kpiee-kv3 .url-pill .brand-dot { width: 6px; height: 6px; border-radius: 9999px; background: var(--brand); }
.kpiee-kv3 .bar-spacer { width: 40px; }
.kpiee-kv3 .app-grid { display: grid; grid-template-columns: 190px 1fr; }
/* --- 左サイドバー --- */
.kpiee-kv3 .sidebar { border-right: 1px solid var(--border); background: rgba(244,244,245,0.3); padding: 12px; }
.kpiee-kv3 .logo { display: flex; align-items: center; padding: 0 10px; margin-bottom: 16px; }
.kpiee-kv3 .logo img { height: 22px; width: auto; display: block; }
.kpiee-kv3 .nav { display: flex; flex-direction: column; gap: 2px; }
.kpiee-kv3 .nav-sec { margin: 12px 10px 4px; font-size: 10px; font-weight: 500; color: var(--muted-foreground); letter-spacing: .02em; }
.kpiee-kv3 .nav-sec:first-child { margin-top: 2px; }
.kpiee-kv3 .nav-item { display: flex; align-items: center; gap: 10px; border-radius: 6px; padding: 8px 10px;
    font-size: 13px; text-align: left; border: none; background: transparent; cursor: pointer;
    color: var(--muted-foreground); font-family: inherit; transition: color .2s, background-color .2s; }
.kpiee-kv3 .nav-item:hover { color: var(--foreground); }
.kpiee-kv3 .nav-item.active { background: rgba(231,63,88,0.08); color: var(--brand); font-weight: 500; }
.kpiee-kv3 .nav-item svg { width: 16px; height: 16px; flex-shrink: 0; }
/* --- 中央メイン --- */
.kpiee-kv3 .main { position: relative; height: 500px; overflow: hidden; background: var(--card); }
.kpiee-kv3 .scene { position: absolute; inset: 0; display: flex; flex-direction: column; opacity: 0; pointer-events: none; }
.kpiee-kv3 .scene.active { opacity: 1; pointer-events: auto; animation: kv3_sceneIn 0.425s cubic-bezier(.22,1,.36,1); }
@keyframes kv3_sceneIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.kpiee-kv3 .main-header { display: flex; align-items: center; justify-content: space-between;
    border-bottom: 1px solid var(--border); padding: 14px 24px; }
.kpiee-kv3 .main-title { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; }
.kpiee-kv3 .main-title svg { width: 12px; height: 12px; color: var(--muted-foreground); }
.kpiee-kv3 .breadcrumb { font-size: 12px; color: var(--muted-foreground); }
.kpiee-kv3 .main-body { flex: 1; display: flex; flex-direction: column; padding: 20px 24px; min-height: 0; }
/* 共通：段階表示 */
.kpiee-kv3 .stagger { opacity: 0; }
.kpiee-kv3 .active .stagger { animation: kv3_fadeUp 0.383s cubic-bezier(.22,1,.36,1) forwards; animation-delay: var(--d, 0s); }
@keyframes kv3_fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* ========================================================= シーン0: ダッシュボード（実画面のKPIカード＋チャート） ========================================================= */
.kpiee-kv3 .kcard-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
/* 2カラム：左＝KPIカード＋チャート、右＝会議メモ */
.kpiee-kv3 .dash-layout { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.45fr 1fr; gap: 10px; }
.kpiee-kv3 .dash-left { display: flex; flex-direction: column; min-height: 0; }
.kpiee-kv3 .memo { border: 1px solid var(--sheet-border); border-radius: 8px; padding: 12px 14px;
    font-size: 10.5px; line-height: 1.75; overflow: hidden; }
.kpiee-kv3 .memo .m-title { font-weight: 700; font-size: 11.5px; }
.kpiee-kv3 .memo .m-sec { margin-top: 8px; font-weight: 700; }
.kpiee-kv3 .memo .m-li { padding-left: 12px; position: relative; }
.kpiee-kv3 .memo .m-li::before { content: "・"; position: absolute; left: 0; }
.kpiee-kv3 .memo .m-num { padding-left: 14px; position: relative; }
.kpiee-kv3 .memo b.red { color: var(--num-red); font-weight: 700; }
.kpiee-kv3 .memo b.blue { color: var(--num-blue); font-weight: 700; }
.kpiee-kv3 .kcard { border: 1px solid var(--sheet-border); border-radius: 8px; overflow: hidden; font-size: 11px; }
.kpiee-kv3 .kcard-head { background: var(--sheet-head); padding: 6px 10px; font-weight: 600; text-align: center; font-size: 11.5px; }
.kpiee-kv3 .kcard-date { text-align: center; padding: 4px 0; font-weight: 600; border-bottom: 1px solid var(--sheet-border); }
.kpiee-kv3 .kcard-row { display: flex; justify-content: space-between; align-items: baseline;
    padding: 6px 10px; border-bottom: 1px solid #eef2f8; background: #f7fafd; }
.kpiee-kv3 .kcard-row:last-child { border-bottom: none; }
.kpiee-kv3 .kcard-row .l { color: var(--muted-foreground); font-size: 10.5px; }
.kpiee-kv3 .kcard-row .v { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 13px; }
.kpiee-kv3 .kcard-row .v.blue { color: var(--num-blue); }
.kpiee-kv3 .kcard-row .v.red { color: var(--num-red); }
.kpiee-kv3 .dash-split { margin-top: 12px; flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kpiee-kv3 .dash-chart { min-height: 0; border: 1px solid var(--sheet-border); border-radius: 8px; padding: 12px 14px; display: flex; flex-direction: column; }
.kpiee-kv3 .dash-chart .label { font-size: 11.5px; font-weight: 600; text-align: center; }
.kpiee-kv3 .dash-legend { display: flex; justify-content: center; gap: 12px; margin-top: 4px; font-size: 9.5px; color: var(--muted-foreground); }
.kpiee-kv3 .dash-legend span { display: inline-flex; align-items: center; gap: 3px; }
.kpiee-kv3 .dash-legend i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.kpiee-kv3 .dash-bars { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 16px; padding-top: 8px; min-height: 0; }
.kpiee-kv3 .dash-bar { display: flex; flex-direction: column; align-items: center; gap: 3px; height: 100%; justify-content: flex-end; width: 24px; }
.kpiee-kv3 .dash-bar .val { font-size: 8.5px; color: var(--muted-foreground); font-variant-numeric: tabular-nums; opacity: 0; white-space: nowrap; }
.kpiee-kv3 .active .dash-bar .val { animation: kv3_fadeUp 0.255s ease forwards; animation-delay: calc(var(--d) + .35s); }
.kpiee-kv3 .dash-bar .col { width: 100%; border-radius: 3px 3px 0 0; background: var(--chart-blue); transform-origin: bottom; transform: scaleY(0); }
.kpiee-kv3 .active .dash-bar .col { animation: kv3_growBar 0.51s cubic-bezier(.22,1,.36,1) forwards; animation-delay: var(--d, 0s); }
@keyframes kv3_growBar { to { transform: scaleY(1); } }
.kpiee-kv3 .dash-bar .name { font-size: 9.5px; color: var(--muted-foreground); }
/* 折れ線チャート（ドットはHTML要素で真円を保証） */
.kpiee-kv3 .dash-line { flex: 1; min-height: 0; margin-top: 8px; position: relative; }
.kpiee-kv3 .dash-line svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.kpiee-kv3 .dline { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.kpiee-kv3 .active .dline { animation: kv3_drawLine 1.02s linear forwards; animation-delay: var(--ld, .5s); }
@keyframes kv3_drawLine { to { stroke-dashoffset: 0; } }
.kpiee-kv3 .ddot { position: absolute; width: 7px; height: 7px; border-radius: 50%;
    background: var(--background); border: 2px solid var(--chart-red);
    opacity: 0; transform: translate(-50%, -50%) scale(.3); }
.kpiee-kv3 .active .ddot { animation: kv3_dotIn 0.212s cubic-bezier(.34,1.56,.64,1) forwards; animation-delay: var(--d, .8s); }
@keyframes kv3_dotIn { to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
/* ========================================================= シーン1: 損益計算書（PLサマリ表・スプレッドシート風） ========================================================= */
.kpiee-kv3 .sheet { border: 1px solid var(--sheet-border); border-radius: 6px; overflow: hidden; font-size: 11.5px; }
.kpiee-kv3 .sheet-title { text-align: center; font-size: 12px; font-weight: 600; padding: 7px; border-bottom: 1px solid var(--sheet-border); }
.kpiee-kv3 .sheet-band { display: grid; grid-template-columns: 30px 1.6fr 1fr 1fr 1fr .8fr; background: var(--sheet-head); border-bottom: 1px solid var(--sheet-border); }
.kpiee-kv3 .sheet-band .cell { padding: 5px 8px; text-align: right; font-weight: 600; }
.kpiee-kv3 .sheet-band .cell:first-child, .kpiee-kv3 .sheet-band .cell:nth-child(2) { text-align: left; }
.kpiee-kv3 .sheet-row { display: grid; grid-template-columns: 30px 1.6fr 1fr 1fr 1fr .8fr; border-bottom: 1px solid #eef2f8; background: var(--card); }
.kpiee-kv3 .sheet-row:last-child { border-bottom: none; }
.kpiee-kv3 .sheet-row .cell { padding: 6px 8px; text-align: right; font-variant-numeric: tabular-nums; }
.kpiee-kv3 .sheet-row .rownum { text-align: center; color: #9aa6b8; background: #f4f7fb; border-right: 1px solid var(--sheet-border); font-size: 10px; }
.kpiee-kv3 .sheet-row .name { text-align: left; font-weight: 600; }
.kpiee-kv3 .sheet-row .name.lv1 { padding-left: 22px; font-weight: 400; }
.kpiee-kv3 .sheet-row .name.lv2 { padding-left: 38px; font-weight: 400; color: var(--muted-foreground); }
.kpiee-kv3 .sheet-row .blue { color: var(--num-blue); font-weight: 600; }
.kpiee-kv3 .sheet-row .red { color: var(--num-red); font-weight: 600; }
.kpiee-kv3 .sheet-row.total { background: #f7fafd; }
.kpiee-kv3 .sheet-row.total .name { font-weight: 700; }
/* PL推移表（実画面準拠） */
.kpiee-kv3 .pl2 { border: 1px solid var(--sheet-border); border-radius: 6px; overflow: hidden; font-size: 10px; }
.kpiee-kv3 .pl2 .r { display: grid; grid-template-columns: 24px minmax(0, 1.7fr) 26px repeat(8, minmax(0, .6fr)); height: 26px; border-bottom: 1px solid #eef2f8; background: var(--card); align-items: center; }
.kpiee-kv3 .pl2 .r:last-child { border-bottom: none; }
.kpiee-kv3 .pl2 .c { padding: 0 7px; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; }
.kpiee-kv3 .pl2 .rn { text-align: center; color: #9aa6b8; background: #f4f7fb; border-right: 1px solid var(--sheet-border); font-size: 9px; padding: 0 2px; align-self: stretch; display: flex; align-items: center; justify-content: center; }
.kpiee-kv3 .pl2 .nm { text-align: left; font-weight: 700; }
.kpiee-kv3 .pl2 .nm.link { color: var(--num-blue); text-decoration: underline; text-underline-offset: 2px; }
.kpiee-kv3 .pl2 .nm.lv1 { padding-left: 22px; font-weight: 400; }
.kpiee-kv3 .pl2 .unit { text-align: center; color: var(--muted-foreground); }
.kpiee-kv3 .pl2 .diff { font-style: italic; font-weight: 600; }
.kpiee-kv3 .pl2 .good { color: var(--num-blue); }
.kpiee-kv3 .pl2 .bad { color: var(--num-red); }
.kpiee-kv3 .pl2 .sep { border-left: 1px solid var(--sheet-border); }
.kpiee-kv3 .pl2 .r.band1 .c { background: #dce8f8; text-align: center; font-weight: 700; font-size: 10.5px; align-self: stretch; display: flex; align-items: center; justify-content: center; }
.kpiee-kv3 .pl2 .r.band1 .rn, .kpiee-kv3 .pl2 .r.band2 .rn { background: #f4f7fb; }
.kpiee-kv3 .pl2 .r.band2 .c { background: var(--sheet-head); font-weight: 600; align-self: stretch; display: flex; align-items: center; justify-content: flex-end; }
.kpiee-kv3 .pl2 .r.sub { background: #eef4fc; }
.kpiee-kv3 .pl2 .r.dots { height: 14px; }
.kpiee-kv3 .pl2 .r.dots .c { text-align: center; color: #9aa6b8; padding: 0; line-height: 1; justify-content: center; }
/* ========================================================= シーン1=2: PL → ドリルダウン（同一画面・フェーズ切替 .p2） ========================================================= */
.kpiee-kv3 .pl2 .nm.lv2 { padding-left: 38px; font-weight: 400; }
.kpiee-kv3 .pl2 .nm.lv3 { padding-left: 52px; font-weight: 400; }
/* 表本体：バンド固定＋データ行はパン可能 */
.kpiee-kv3 .pl2.pannable { display: flex; flex-direction: column; flex: none; }
.kpiee-kv3 .pl-scroll { height: 248px; flex: none; overflow: hidden; }
.kpiee-kv3 .p2 .pl-rows { animation: kv3_panUp 0.552s cubic-bezier(.4,0,.2,1) forwards; animation-delay: 0.07s; }
@keyframes kv3_panUp { to { transform: translateY(-130px); } }
/* 展開される行（ドリルダウンフェーズで開く） */
.kpiee-kv3 .pl2 .r.xrow { max-height: 0; opacity: 0; overflow: hidden; border-bottom-width: 0; }
.kpiee-kv3 .p2 .pl2 .r.xrow { animation: kv3_rowExpand 0.383s cubic-bezier(.22,1,.36,1) forwards; animation-delay: var(--xd, 1.4s); }
@keyframes kv3_rowExpand { to { max-height: 26px; opacity: 1; border-bottom-width: 1px; } }
/* クリック演出：枠フラッシュ＋波紋＋ポインタ（すべて自動で消える） */
.kpiee-kv3 .tap { position: relative; }
.kpiee-kv3 .tap::before { content: ""; position: absolute; inset: 1px; border-radius: 4px;
    box-shadow: 0 0 0 2px var(--brand); opacity: 0; pointer-events: none; }
.kpiee-kv3 .p2 .tap::before { animation: kv3_flashRing 0.935s ease forwards; animation-delay: var(--cd, 1s); }
@keyframes kv3_flashRing {
    0% { opacity: 0; }
    15% { opacity: 1; }
    65% { opacity: 1; }
    100% { opacity: 0; }
  }
.kpiee-kv3 .tap::after { content: ""; position: absolute; inset: 1px; border-radius: 4px;
    box-shadow: 0 0 0 0 rgba(231,63,88,.45); opacity: 0; pointer-events: none; }
.kpiee-kv3 .p2 .tap::after { animation: kv3_ripple 0.595s ease-out forwards; animation-delay: calc(var(--cd, 1s) + .1s); }
@keyframes kv3_ripple {
    0% { opacity: 1; box-shadow: 0 0 0 0 rgba(231,63,88,.45); }
    100% { opacity: 0; box-shadow: 0 0 0 14px rgba(231,63,88,0); }
  }
.kpiee-kv3 .tap .ping { width: 13px; height: 13px; color: var(--brand); opacity: 0; vertical-align: -2px; margin-left: 5px; display: inline-block; }
.kpiee-kv3 .p2 .tap .ping { animation: kv3_pingLife 1.02s ease forwards; animation-delay: var(--cd, 1s); }
@keyframes kv3_pingLife {
    0% { opacity: 0; transform: scale(.8); }
    15% { opacity: 1; transform: scale(1.1); }
    30% { transform: scale(.9); }   /* 押し込み */
    45% { transform: scale(1); }
    75% { opacity: 1; }
    100% { opacity: 0; transform: scale(1); }
  }
/* フェーズで切り替わるパンくず・注記 */
.kpiee-kv3 .bc-dd, .kpiee-kv3 .note-dd { display: none; }
.kpiee-kv3 .p2 .bc-pl, .kpiee-kv3 .p2 .note-pl { display: none; }
.kpiee-kv3 .p2 .bc-dd { display: inline; }
.kpiee-kv3 .p2 .note-dd { display: block; opacity: 0; animation: kv3_fadeUp 0.34s ease forwards; animation-delay: 2.52s; }
.kpiee-kv3 .dd-note { margin-top: 12px; font-size: 12px; color: var(--muted-foreground); }
/* ========================================================= シーン: AIグラフ作成（チャット → グラフ生成） ========================================================= */
.kpiee-kv3 .gc-answer { align-self: flex-start; width: 100%;
    border: 1px solid var(--border); border-radius: 12px; border-bottom-left-radius: 6px;
    padding: 12px 14px; font-size: 12px; opacity: 0; }
.kpiee-kv3 .active .gc-answer { animation: kv3_fadeUp 0.425s cubic-bezier(.22,1,.36,1) forwards; animation-delay: calc(2.03s + var(--o, 0s)); }
.kpiee-kv3 .gc-msg { font-weight: 700; font-size: 12.5px; }
.kpiee-kv3 .gc-body { margin-top: 10px; display: grid; grid-template-columns: 1fr 122px; gap: 10px; }
.kpiee-kv3 .gc-chart { border: 1px solid var(--sheet-border); border-radius: 8px; padding: 10px 10px 6px; display: flex; flex-direction: column; }
.kpiee-kv3 .gc-legend { display: flex; gap: 12px; font-size: 9.5px; color: var(--muted-foreground); }
.kpiee-kv3 .gc-legend span { display: inline-flex; align-items: center; gap: 3px; }
.kpiee-kv3 .gc-legend i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.kpiee-kv3 .gc-bars { display: flex; align-items: flex-end; gap: 7px; height: 148px; margin-top: 8px; }
.kpiee-kv3 .gc-month { flex: 1; display: flex; flex-direction: column; height: 100%; }
.kpiee-kv3 .gc-month .b3 { flex: 1; display: flex; align-items: flex-end; gap: 1.5px; }
.kpiee-kv3 .gc-month .b3 i { flex: 1; border-radius: 2px 2px 0 0; transform-origin: bottom; transform: scaleY(0); display: block; }
.kpiee-kv3 .active .gc-month .b3 i { animation: kv3_growBar 0.468s cubic-bezier(.22,1,.36,1) forwards; animation-delay: calc(var(--d, 3.1s) + var(--o, 0s)); }
.kpiee-kv3 .gc-month .m { font-size: 7.5px; color: var(--muted-foreground); text-align: center; margin-top: 3px; white-space: nowrap; }
.kpiee-kv3 .gc-totals { display: flex; flex-direction: column; gap: 8px; }
.kpiee-kv3 .gc-total { background: rgba(244,244,245,.55); border-radius: 8px; padding: 9px 11px; opacity: 0; }
.kpiee-kv3 .active .gc-total { animation: kv3_fadeUp 0.34s ease forwards; animation-delay: calc(var(--d, 3.9s) + var(--o, 0s)); }
.kpiee-kv3 .gc-total .tl { font-size: 9.5px; color: var(--muted-foreground); }
.kpiee-kv3 .gc-total .tv { font-size: 14px; font-weight: 700; margin-top: 2px; font-variant-numeric: tabular-nums; }
/* ========================================================= シーン3: AI分析（質問 → 分析結果） ========================================================= */
.kpiee-kv3 .chat-main { flex: 1; display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.kpiee-kv3 .cm-user { align-self: flex-end; max-width: 70%;
    border-radius: 12px; border-bottom-right-radius: 4px;
    background: #e8f0fb; color: var(--foreground);
    padding: 8px 14px; font-size: 12.5px; line-height: 1.8;
    opacity: 0; }
.kpiee-kv3 .active .cm-user { animation: kv3_fadeUp 0.34s ease forwards; animation-delay: calc(0.28s + var(--o, 0s)); }
.kpiee-kv3 .cm-typing { display: flex; align-items: center; gap: 6px; align-self: flex-start;
    border-radius: 16px; border-bottom-left-radius: 6px;
    border: 1px solid var(--border); padding: 10px 12px; opacity: 0; }
.kpiee-kv3 .active .cm-typing { animation: kv3_typingLife 1.615s ease forwards; animation-delay: 0.63s; }
@keyframes kv3_typingLife { 0% { opacity: 0; } 12% { opacity: 1; } 78% { opacity: 1; } 100% { opacity: 0; } }
.kpiee-kv3 .cm-typing span { width: 6px; height: 6px; border-radius: 9999px; background: var(--muted-foreground); animation: kv3_typing 1.02s infinite ease-in-out; }
.kpiee-kv3 .cm-typing span:nth-child(2) { animation-delay: 0.1s; }
.kpiee-kv3 .cm-typing span:nth-child(3) { animation-delay: 0.21s; }
@keyframes kv3_typing { 0%,60%,100% { opacity: .4; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } }
.kpiee-kv3 .cm-answer { align-self: flex-start; width: 92%;
    border: 1px solid var(--border); border-radius: 12px; border-bottom-left-radius: 6px;
    padding: 14px 16px; font-size: 12px; opacity: 0; }
.kpiee-kv3 .active .cm-answer { animation: kv3_fadeUp 0.425s cubic-bezier(.22,1,.36,1) forwards; animation-delay: 2.03s; }
.kpiee-kv3 .cm-answer .ttl { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 12.5px; }
.kpiee-kv3 .cm-answer .ttl svg { width: 13px; height: 13px; color: var(--brand); }
.kpiee-kv3 .cm-answer .ttl .period { margin-left: auto; font-size: 10px; font-weight: 500; color: var(--muted-foreground); border: 1px solid var(--border); border-radius: 9999px; padding: 2px 9px; }
/* ヒーロー数値＋スパークライン */
.kpiee-kv3 .ans-hero { margin-top: 10px; display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center;
    background: rgba(231,63,88,.05); border-left: 3px solid var(--brand); border-radius: 8px; padding: 10px 14px; }
.kpiee-kv3 .ans-hero .lbl { font-size: 10.5px; color: var(--muted-foreground); }
.kpiee-kv3 .ans-hero .num { font-size: 30px; font-weight: 800; line-height: 1.15; color: var(--num-red); font-variant-numeric: tabular-nums; opacity: 0; }
.kpiee-kv3 .active .ans-hero .num { animation: kv3_numPop 0.383s cubic-bezier(.34,1.56,.64,1) forwards; animation-delay: 2.24s; }
@keyframes kv3_numPop { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: scale(1); } }
.kpiee-kv3 .spark { display: flex; align-items: flex-end; gap: 5px; height: 52px; justify-self: end; }
.kpiee-kv3 .spark i { width: 14px; border-radius: 2px 2px 0 0; background: var(--chart-blue); transform-origin: bottom; transform: scaleY(0); display: block; }
.kpiee-kv3 .spark i.last { background: var(--chart-red); }
.kpiee-kv3 .active .spark i { animation: kv3_growBar 0.425s cubic-bezier(.22,1,.36,1) forwards; animation-delay: var(--d, 3.3s); }
/* 増加要因バー */
.kpiee-kv3 .ans-factors { margin-top: 12px; }
.kpiee-kv3 .ans-factors .sec { font-size: 10.5px; font-weight: 600; color: var(--muted-foreground); }
.kpiee-kv3 .ans-bars { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.kpiee-kv3 .ans-bar { display: grid; grid-template-columns: 76px 1fr 48px; align-items: center; gap: 10px; font-size: 11px; }
.kpiee-kv3 .ans-bar .nm { font-weight: 600; }
.kpiee-kv3 .ans-bar .tr { height: 12px; border-radius: 4px; background: var(--muted); overflow: hidden; }
.kpiee-kv3 .ans-bar .fl { height: 100%; border-radius: 4px; background: var(--chart-blue); transform-origin: left; transform: scaleX(0); }
.kpiee-kv3 .ans-bar.top .fl { background: var(--chart-red); }
.kpiee-kv3 .active .ans-bar .fl { animation: kv3_growX 0.51s cubic-bezier(.22,1,.36,1) forwards; animation-delay: var(--d, 3.6s); }
@keyframes kv3_growX { to { transform: scaleX(1); } }
.kpiee-kv3 .ans-bar .pc { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--muted-foreground); }
.kpiee-kv3 .ans-bar.top .pc { color: var(--num-red); }
.kpiee-kv3 .ans-note { margin-top: 10px; font-size: 11px; color: var(--muted-foreground); opacity: 0; }
.kpiee-kv3 .active .ans-note { animation: kv3_fadeUp 0.34s ease forwards; animation-delay: 3.01s; }
/* ========================================================= シーン: AI分析（左PL＋右kpiee AIサイドパネル） ========================================================= */
.kpiee-kv3 .ai-layout { flex: 1; min-height: 0; display: flex; justify-content: center; }
/* 右：kpiee AI パネル */
.kpiee-kv3 .aip { flex: 1; border: 1px solid var(--border); border-radius: 10px; background: var(--background); display: flex; flex-direction: column; min-height: 0; overflow: hidden; opacity: 0; }
.kpiee-kv3 .active .aip { animation: kv3_fadeUp 0.383s cubic-bezier(.22,1,.36,1) forwards; animation-delay: 0.17s; }
.kpiee-kv3 .aip-head { display: flex; align-items: center; gap: 6px; padding: 9px 14px; border-bottom: 1px solid var(--border); font-size: 13px; font-weight: 700; }
.kpiee-kv3 .aip-head svg { width: 14px; height: 14px; color: var(--brand); }
.kpiee-kv3 .aip-head .ops { margin-left: auto; display: flex; gap: 8px; color: var(--muted-foreground); font-size: 11px; }
.kpiee-kv3 .aip-title { display: flex; align-items: center; padding: 8px 14px; border-bottom: 1px solid var(--border); font-size: 11.5px; color: var(--foreground); }
.kpiee-kv3 .aip-title .ops { margin-left: auto; color: var(--muted-foreground); }
/* AIグラフ作成の .chat-main と同じ配置（本文幅いっぱい・右端揃え） */
.kpiee-kv3 .aip-chat { width: 100%; min-height: 0; overflow: hidden; padding: 0; display: flex; flex-direction: column; gap: 12px; font-size: 12.5px; line-height: 1.8; }
.kpiee-kv3 .aiq { align-self: flex-end; max-width: 70%;
    background: #e8f0fb; border-radius: 12px; border-bottom-right-radius: 4px;
    padding: 8px 14px; }
.kpiee-kv3 .aia { align-self: flex-start; max-width: 94%; display: flex; gap: 9px; }
.kpiee-kv3 .aia .av { flex-shrink: 0; width: 24px; height: 24px; border-radius: 9999px;
    background: rgba(231,63,88,.1); border: 1px solid rgba(231,63,88,.25);
    display: grid; place-items: center; margin-top: 2px; }
.kpiee-kv3 .aia .av svg { width: 13px; height: 13px; color: var(--brand); }
.kpiee-kv3 .aia .bd { flex: 1; min-width: 0; }
.kpiee-kv3 .aia b.red { color: var(--num-red); }
.kpiee-kv3 .aia b.blue { color: var(--num-blue); }
.kpiee-kv3 .aia b { font-weight: 700; }
.kpiee-kv3 .aia .li { padding-left: 10px; position: relative; }
.kpiee-kv3 .aia .li::before { content: "・"; position: absolute; left: 0; }
/* 回答内ミニ表 */
.kpiee-kv3 .aitbl { margin-top: 8px; font-size: 11.5px; border-top: 1px solid var(--sheet-border); min-width: 440px; }
.kpiee-kv3 .aitbl .tr { display: grid; grid-template-columns: 1fr .9fr .9fr .9fr; border-bottom: 1px solid #eef2f8; }
.kpiee-kv3 .aitbl .tr > span { padding: 5px 8px; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; }
.kpiee-kv3 .aitbl .tr > span:first-child { text-align: left; }
.kpiee-kv3 .aitbl .tr.hd > span { font-weight: 700; }
.kpiee-kv3 .aip-input { border-top: 1px solid var(--border); padding: 8px 14px 7px; }
.kpiee-kv3 .aip-input .pill { display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--border); border-radius: 9999px; background: rgba(244,244,245,.4); padding: 7px 12px; font-size: 11px; color: var(--muted-foreground); }
.kpiee-kv3 .aip-input .pill svg { width: 12px; height: 12px; }
.kpiee-kv3 .aip-input .warn { margin-top: 5px; font-size: 9.5px; color: var(--muted-foreground); }
/* ===== 下部タブ（タイマー） ===== */
.kpiee-kv3 .tabs { margin: 52px auto 0; max-width: 1024px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.kpiee-kv3 .tab { display: flex; flex-direction: column; gap: 8px; text-align: left; border: none; background: transparent; cursor: pointer; padding: 0; font-family: inherit; }
.kpiee-kv3 .track { position: relative; display: block; height: 2px; width: 100%; overflow: hidden; border-radius: 9999px; background: var(--border); }
.kpiee-kv3 .progress { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); border-radius: 9999px; background: var(--foreground); }
.kpiee-kv3 .tab-title { font-size: 13px; font-weight: 500; line-height: 1.3; color: var(--muted-foreground); transition: color .2s; }
.kpiee-kv3 .tab:hover .tab-title { color: var(--foreground); }
.kpiee-kv3 .tab.active .tab-title { color: var(--foreground); }
.kpiee-kv3 .tab-desc { font-size: 12px; color: var(--muted-foreground); }
@media (prefers-reduced-motion: reduce) {
.kpiee-kv3 .scene.active, .kpiee-kv3 .active .stagger, .kpiee-kv3 .active .dash-bar .col, .kpiee-kv3 .active .dash-bar .val, .kpiee-kv3 .active .dline, .kpiee-kv3 .active .ddot, .kpiee-kv3 .p2 .pl2 .r.xrow, .kpiee-kv3 .p2 .tap .ping, .kpiee-kv3 .p2 .tap::before, .kpiee-kv3 .p2 .tap::after, .kpiee-kv3 .p2 .pl-rows, .kpiee-kv3 .p2 .note-dd, .kpiee-kv3 .active .cm-user, .kpiee-kv3 .active .cm-typing, .kpiee-kv3 .active .cm-answer, .kpiee-kv3 .active .ans-bar .fl, .kpiee-kv3 .active .gc-answer, .kpiee-kv3 .active .gc-month .b3 i, .kpiee-kv3 .active .gc-total, .kpiee-kv3 .active .aip, .kpiee-kv3 .active .ans-hero .num, .kpiee-kv3 .active .spark i, .kpiee-kv3 .active .ans-note {animation-duration: .01s !important; animation-delay: 0s !important;}
}
/* ===== PL：表を本文いっぱいに（下部の余白を埋める） ===== */
.kpiee-kv3 .pl2.pannable { flex: 1; min-height: 0; }
.kpiee-kv3 .pl-scroll { flex: 1; height: auto; }
.kpiee-kv3 .pl2 .r { height: 27px; }
/* ===== ドリルダウン：セルのクリック → 明細表示モーダル ===== */
.kpiee-kv3 .p2 .cell-tap { animation: kv3_cellSel .25s ease forwards; animation-delay: calc(var(--cd, 2.8s) + .15s); }
@keyframes kv3_cellSel { to { color: var(--num-red); font-weight: 700; background: rgba(231,63,88,.07); } }
.kpiee-kv3 .dd-modal { position: absolute; inset: 0; background: rgba(30,36,48,.32); display: none; align-items: center; justify-content: center; z-index: 30; }
.kpiee-kv3 .p2 .dd-modal { display: flex; opacity: 0; animation: kv3_fadeIn .3s ease forwards 3.35s, kv3_fadeOut .3s ease forwards 5.0s; }
@keyframes kv3_fadeOut { to { opacity: 0; visibility: hidden; } }
.kpiee-kv3 .dd-close .tap::before, .kpiee-kv3 .dd-close .tap::after { border-radius: 6px; inset: -2px; }
@keyframes kv3_fadeIn { to { opacity: 1; } }
.kpiee-kv3 .dd-dialog { width: 88%; max-height: 92%; background: #fff; border-radius: 12px; padding: 12px 16px 12px; box-shadow: 0 24px 60px -20px rgba(20,30,60,.45); font-size: 10px; transform: translateY(10px) scale(.98); display: flex; flex-direction: column; gap: 6px; }
.kpiee-kv3 .p2 .dd-dialog { animation: kv3_dlgIn .38s cubic-bezier(.22,1,.36,1) forwards; animation-delay: 3.35s; }
@keyframes kv3_dlgIn { to { transform: none; } }
.kpiee-kv3 .dd-mt { text-align: center; font-size: 12.5px; font-weight: 700; margin-bottom: 2px; }
.kpiee-kv3 .dd-lbl { font-size: 9.5px; color: var(--muted-foreground); }
.kpiee-kv3 .dd-opts { display: flex; gap: 8px; border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; background: #fafbfc; }
.kpiee-kv3 .dd-opts .opt { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--border); border-radius: 5px; padding: 4px 8px; background: #fff; font-size: 10px; }
.kpiee-kv3 .dd-opts .opt .h { font-style: normal; color: #9aa6b8; }
.kpiee-kv3 .dd-opts .opt .cb { width: 10px; height: 10px; border: 1px solid #b6bfce; border-radius: 2px; display: inline-block; }
.kpiee-kv3 .dd-opts .opt.on { color: var(--brand); font-weight: 700; }
.kpiee-kv3 .dd-opts .opt.on .cb { border-color: var(--brand); background: var(--brand) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7'/></svg>") no-repeat center / 8px; }
.kpiee-kv3 .dd-note2 { font-size: 9px; color: var(--muted-foreground); }
.kpiee-kv3 .dd-note2 i { font-style: normal; }
.kpiee-kv3 .dd-col { display: flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 6px; padding: 5px 8px; font-size: 9.5px; }
.kpiee-kv3 .dd-col .box { border: 1px solid var(--border); border-radius: 4px; padding: 2px 8px; background: #fafbfc; }
.kpiee-kv3 .dd-sel { border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px; font-size: 9px; color: #9aa6b8; }
.kpiee-kv3 .dd-sheet { border: 1px solid var(--sheet-border); border-radius: 6px; overflow: hidden; }
.kpiee-kv3 .dd-sheet .dr { display: grid; grid-template-columns: 22px 1.15fr .9fr .8fr .8fr .9fr .8fr 1.5fr .9fr; height: 19px; align-items: center; border-bottom: 1px solid #eef2f8; font-size: 9px; }
.kpiee-kv3 .dd-sheet .dr > span { padding: 0 6px; text-align: center; white-space: nowrap; overflow: hidden; border-right: 1px solid #eef2f8; height: 100%; display: flex; align-items: center; justify-content: center; }
.kpiee-kv3 .dd-sheet .dr > span:first-child { background: #f4f7fb; color: #9aa6b8; font-size: 8px; }
.kpiee-kv3 .dd-sheet .dr > span:last-child { justify-content: flex-end; font-variant-numeric: tabular-nums; }
.kpiee-kv3 .dd-sheet .dr.letters > span { background: #f4f7fb; color: #9aa6b8; font-size: 8px; height: 100%; }
.kpiee-kv3 .dd-sheet .dr.letters { height: 15px; }
.kpiee-kv3 .dd-sheet .dr.hd > span { background: #dce8f8; font-weight: 700; }
.kpiee-kv3 .dd-sheet .dr.foot { height: 20px; border-bottom: none; }
.kpiee-kv3 .dd-sheet .dr.foot > span { justify-content: flex-end; border-right: none; }
.kpiee-kv3 .dd-close { display: flex; justify-content: center; margin-top: 2px; }
.kpiee-kv3 .dd-close span { border: 1px solid var(--border); border-radius: 5px; padding: 4px 22px; font-size: 10px; color: var(--muted-foreground); background: #fff; }
/* ===== AIシーン：背景＝カスタムレポート（PL）、右75%＝kpiee AIパネル ===== */
.kpiee-kv3 .ai-scene .bgpl .r.band1 .c, .kpiee-kv3 .ai-scene .bgpl .r.band2 .c {  }
.kpiee-kv3 .ap { position: absolute; top: 0; right: 0; bottom: 0; width: 75%;
    background: #fff; border-left: 1px solid var(--border);
    box-shadow: -14px 0 36px -18px rgba(20,30,60,.22);
    display: flex; flex-direction: column; min-height: 0; z-index: 5;
    opacity: 0; transform: translateX(18px); }
.kpiee-kv3 .active .ap { animation: kv3_apIn .42s cubic-bezier(.22,1,.36,1) forwards; animation-delay: .12s; }
@keyframes kv3_apIn { to { opacity: 1; transform: none; } }
.kpiee-kv3 .ap-head { display: flex; align-items: center; gap: 7px; padding: 11px 16px; border-bottom: 1px solid var(--border); font-size: 13px; font-weight: 700; }
.kpiee-kv3 .ap-head > svg { width: 17px; height: 17px; color: #4a5568; }
.kpiee-kv3 .ap .ops { margin-left: auto; display: flex; gap: 14px; color: #6b7386; }
.kpiee-kv3 .ap .ops svg { width: 14px; height: 14px; }
.kpiee-kv3 .ap-title { display: flex; align-items: center; padding: 9px 16px; border-bottom: 1px solid var(--border); font-size: 11.5px; color: #3a4354; }
.kpiee-kv3 .ap-body { flex: 1; min-height: 0; margin: 10px 14px 8px; background: #f4f6fa; border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.kpiee-kv3 .ap-input { padding: 0 14px 9px; }
.kpiee-kv3 .ap-input .row { display: flex; align-items: center; gap: 10px; }
.kpiee-kv3 .ap-input .pill { flex: 1; border: 1px solid var(--border); border-radius: 8px; padding: 7px 12px; font-size: 11px; color: #9aa6b8; background: #fff; }
.kpiee-kv3 .ap-input .row > svg { width: 15px; height: 15px; color: #6b7386; }
.kpiee-kv3 .ap-input .warn { margin-top: 5px; font-size: 9px; color: #9aa6b8; }
/* パネル内のチャット要素（グレー地の上で白い回答カード） */
.kpiee-kv3 .ap .cm-user, .kpiee-kv3 .ap .aiq { font-size: 12px; line-height: 1.7; max-width: 78%; }
.kpiee-kv3 .ap .gc-answer { background: #fff; border: none; border-radius: 12px; }
.kpiee-kv3 .ap .cm-typing { background: #fff; }
.kpiee-kv3 .ap .gc-bars { height: 188px; }
/* パネル内の余白を埋める */
.kpiee-kv3 .ap .aia { max-width: 100%; }
.kpiee-kv3 .ap .aia .bd { background: #fff; border-radius: 12px; border-top-left-radius: 4px; padding: 6px 11px; font-size: 11.5px; line-height: 1.6; }
.kpiee-kv3 .ap .aip-chat { gap: 7px; }
.kpiee-kv3 .ap .aitbl { margin-top: 5px; }
.kpiee-kv3 .ap .aitbl .tr > span { padding: 3px 8px; }
.kpiee-kv3 .ans-slot { display: grid; align-self: stretch; }
.kpiee-kv3 .ans-slot > * { grid-area: 1 / 1; }
.kpiee-kv3 .ans-slot .cm-typing { justify-self: start; align-self: start; }
.kpiee-kv3 .ap .aitbl { min-width: 0; font-size: 11px; }
/* ---- AIパネル：空状態はグレーの枠、質問後は白背景（実UI準拠） ---- */
.kpiee-kv3 .ai-scene.sc3 .ap { --o: .62s; }
.kpiee-kv3 .ap-body { position: relative; }
.kpiee-kv3 .active .ap-body { animation: kv3_bodyWhite .01s linear forwards; animation-delay: var(--t-user, .9s); }
@keyframes kv3_bodyWhite { to { background: transparent; border-radius: 0; padding: 8px 14px; margin: 4px 0 8px; } }
.kpiee-kv3 .ap-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #9aa6b8; font-size: 11.5px; }
.kpiee-kv3 .ap-empty svg { width: 26px; height: 26px; }
.kpiee-kv3 .active .ap-empty { animation: kv3_hideNow .01s linear forwards; animation-delay: var(--t-user, .9s); }
@keyframes kv3_hideNow { to { opacity: 0; visibility: hidden; } }
.kpiee-kv3 .ap .cm-typing { display: none; }
.kpiee-kv3 .ap .aia .bd { background: transparent; border-radius: 0; padding: 0; }
.kpiee-kv3 .ap .cm-user, .kpiee-kv3 .ap .aiq { background: #e8f0fb; }
.kpiee-kv3 .ap-prep { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #3a4354; opacity: 0; justify-self: start; align-self: start; }
.kpiee-kv3 .ap-prep i { width: 18px; height: 18px; border-radius: 9999px; background: var(--brand); color: #fff; display: grid; place-items: center; }
.kpiee-kv3 .ap-prep i svg { width: 12px; height: 12px; }
.kpiee-kv3 .ap-prep span { animation: kv3_prepPulse 1.2s ease-in-out infinite; }
@keyframes kv3_prepPulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.kpiee-kv3 .active .ap-prep { animation: kv3_prepLife var(--pd, 1.4s) linear forwards; animation-delay: var(--ps, 1.2s); }
@keyframes kv3_prepLife { 0% { opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
.kpiee-kv3 .ap-sendwrap { position: relative; display: inline-grid; place-items: center; }
.kpiee-kv3 .ap-sendwrap > svg { width: 15px; height: 15px; color: #6b7386; }
.kpiee-kv3 .ap-stop { position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; border-radius: 9999px; background: var(--brand); opacity: 0; }
.kpiee-kv3 .ap-stop::after { content: ""; position: absolute; inset: 5px; background: #fff; border-radius: 2px; }
.kpiee-kv3 .active .ap-stop { animation: kv3_stopLife var(--sd, 2s) linear forwards; animation-delay: var(--ss, 1s); }
@keyframes kv3_stopLife { 0% { opacity: 0; } 2% { opacity: 1; } 98% { opacity: 1; } 100% { opacity: 0; } }

/* ----------------------------------------------------------------
   02 リアルタイム可視化（kpiee-dashboard-v9.html）
   ---------------------------------------------------------------- */
.kpiee-dg2 {--border: #e5e7eb; --muted-fg: #71717a; --brand: #E73F58; --num-red: #e11d48; --num-blue: #2563eb; --card-head: #e7eefa;}
.kpiee-dg2 *,
.kpiee-dg2 {box-sizing: border-box; margin: 0; padding: 0;}
.kpiee-dg2 {font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic UI", "Noto Sans JP", system-ui, sans-serif; -webkit-font-smoothing: antialiased; color: #1c2430;}
.kpiee-dg2 /* 添付画像の見え方：左上に角丸、右と下は画面外へ抜けて見切れる */
  .stage {overflow: visible; transform: scale(.893); transform-origin: top left; width: 118%;}
.kpiee-dg2 /* .85 → .893（約5%拡大） */   /* 中身を他の動画と同じくらいの大きさに */
  .frame {width: 860px; height: 592px; margin: 0;   /* 表示 ≒ 768×529px（ext ai・チャットは 592×528） */
    display: grid; grid-template-columns: 200px 1fr; grid-template-rows: minmax(0, 1fr);
    border-radius: 18px 0 0 0;
    background: #fff;
    box-shadow: -14px 0 32px -16px rgba(20,30,60,.12), 0 -14px 32px -16px rgba(20,30,60,.12);  /* 影は上・左だけ */
    clip-path: inset(-80px 0 0 -80px);
    position: relative;
    overflow: hidden;}
.kpiee-dg2 /* 右端・下端：背景の白へ溶かす（他の動画と同じ値） */
  .fade-r,
.kpiee-dg2 .fade-b {position: absolute; pointer-events: none; z-index: 60;}
.kpiee-dg2 .fade-r {top: 0; right: 0; bottom: 0; width: 70px; background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.7) 70%, #fff 100%);}
.kpiee-dg2 .fade-b {left: 0; right: 0; bottom: 0; height: 60px; background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.7) 70%, #fff 100%);}
.kpiee-dg2 /* ===== サイドバー ===== */
  .side {background: #fff; border-right: 1px solid var(--border); padding: 18px 14px; font-size: 12px; overflow: hidden;}
.kpiee-dg2 .side .logo {display: flex; align-items: center; gap: 7px; font-size: 17px; font-weight: 800; letter-spacing: -0.01em; padding: 0 6px 18px;}
.kpiee-dg2 .side .logo svg {width: 80px; height: 40px;}
.kpiee-dg2 .side .item {display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 8px; color: #3a4354; margin-bottom: 2px;}
.kpiee-dg2 .side .item.active {background: #fdeef0; color: var(--brand); font-weight: 700;}
.kpiee-dg2 .side .item svg {width: 14px; height: 14px; flex-shrink: 0;}
.kpiee-dg2 .side .sub {padding: 6px 10px 6px 30px; color: #3a4354; border-radius: 8px;}
.kpiee-dg2 .side .sub.active {background: #fdeef0; color: var(--brand);}
.kpiee-dg2 .side .item,
.kpiee-dg2 .side .sub {transition: background .18s ease, color .18s ease;}
.kpiee-dg2 .side .chip {display: inline-block; margin: 10px 0 4px 6px; padding: 2px 9px; border-radius: 9999px; background: #eef1f6; color: var(--muted-fg); font-size: 10px;}
.kpiee-dg2 .side .lv2 {padding-left: 44px; color: #3a4354; padding-top: 5px; padding-bottom: 5px;}
.kpiee-dg2 /* ===== メイン ===== */
  .main {display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #f2f4f8; position: relative;}
.kpiee-dg2 .topbar {display: flex; align-items: center; gap: 8px; background: #fff; border-bottom: 1px solid var(--border); padding: 12px 20px; font-size: 13px; font-weight: 600;}
.kpiee-dg2 .topbar svg {width: 13px; height: 13px; color: var(--muted-fg);}
.kpiee-dg2 .viewport {flex: 1; min-height: 0; overflow: hidden; position: relative;}
.kpiee-dg2 /* フレームの下端まで使う（データが白グラデの中で切れる） */
  .scroll {padding: 20px 22px 28px; will-change: transform;}
.kpiee-dg2 /* KPIカード */
  .kpis {display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;}
.kpiee-dg2 .card {background: #fff; border-radius: 10px; box-shadow: 0 1px 2px rgba(20,30,60,.06);}
.kpiee-dg2 .kpi .head {background: var(--card-head); border-radius: 10px 10px 0 0; text-align: center; font-size: 12px; font-weight: 700; padding: 6px;}
.kpiee-dg2 .kpi .date {text-align: center; font-size: 11px; font-weight: 700; padding: 5px 0 2px;}
.kpiee-dg2 .kpi .row {display: flex; justify-content: space-between; align-items: baseline; gap: 4px; margin: 6px 7px; background: #f6f9fd; border-radius: 6px; padding: 6px 7px;}
.kpiee-dg2 .kpi .row .l {font-size: 9.5px; color: var(--muted-fg); white-space: nowrap;}
.kpiee-dg2 .kpi .row .v {font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap;}
.kpiee-dg2 .kpi .row .v small {font-size: 9px; font-weight: 400;}
.kpiee-dg2 .kpi .row .v.red {color: var(--num-red);}
.kpiee-dg2 .kpi .row .v.blue {color: var(--num-blue);}
.kpiee-dg2 /* セクション */
  /* 行：列比率は行ごとに指定（style属性）。横並びのカードは高さを揃える（stretch） */
  .row {display: grid; gap: 12px; align-items: stretch; margin-top: 12px;}
.kpiee-dg2 .chart-card {padding: 12px 14px 8px; display: flex; flex-direction: column; justify-content: center;}
.kpiee-dg2 .chart-card svg {flex: 0 0 auto;}
.kpiee-dg2 .chart-title {text-align: center; font-size: 12px; font-weight: 700; margin-bottom: 2px;}
.kpiee-dg2 /* SVGは高さ固定＋余白は左右に逃がす → 隣のカードと高さが揃う */
  .chart-card svg {width: 100%; height: 196px; display: block;}
.kpiee-dg2 .chart-card.wide svg {height: 180px;}
.kpiee-dg2 .row.tri .chart-card svg {height: 150px;}
.kpiee-dg2 /* 3列並びは小さく描かれるので高さを詰める */

  /* ===== メモパネル（会議メモ） ===== */
  .memo {padding: 16px 20px 14px; display: flex; flex-direction: column; color: #1c2430;}
.kpiee-dg2 .memo .mt {font-size: 13px; font-weight: 800; margin-bottom: 8px;}
.kpiee-dg2 .memo .mh {font-size: 11.5px; font-weight: 800; margin: 8px 0 4px;}
.kpiee-dg2 .memo ul,
.kpiee-dg2 .memo ol {padding-left: 18px; font-size: 9.5px; line-height: 1.7; color: #1c2430;}
.kpiee-dg2 .memo li {margin: 1px 0;}
.kpiee-dg2 .memo b {font-weight: 700;}
.kpiee-dg2 .memo b.rd {color: var(--num-red);}
.kpiee-dg2 .memo b.bl {color: var(--num-blue);}
.kpiee-dg2 /* ===== 表パネル（全体総括） ===== */
  .tbl {padding: 12px 0 0; overflow: hidden; position: relative; height: 296px;}
.kpiee-dg2 /* 全幅・高さ固定。表は下で切れる */
  .tbl .chart-title {margin-bottom: 8px;}
.kpiee-dg2 .tbl-wrap {position: absolute; left: 0; right: 0; top: 36px; bottom: 0; overflow: hidden; border-top: 1px solid var(--border);}
.kpiee-dg2 .tbl table {border-collapse: collapse; font-size: 9.5px; white-space: nowrap; table-layout: fixed; min-width: 100%;}
.kpiee-dg2 .tbl td {border-right: 1px solid #eceff4; border-bottom: 1px solid #eceff4; padding: 0 7px; height: 19px;}
.kpiee-dg2 .tbl thead td {background: #f4f6fa; text-align: center; color: #6b7386; font-size: 8.5px;}
.kpiee-dg2 .tbl tr.h1 td,
.kpiee-dg2 .tbl tr.h2 td {background: var(--card-head); color: #1c2430; font-weight: 700; font-size: 10px;}
.kpiee-dg2 .tbl tr.h1 td[colspan] {text-align: left; padding-left: 12px; border-left: 1.5px solid #b7c3d8;}
.kpiee-dg2 .tbl tr.h2 td:nth-child(4n+3) {border-left: 1.5px solid #b7c3d8;}
.kpiee-dg2 .tbl tbody td.n:nth-child(4n+3) {border-left: 1.5px solid #b7c3d8;}
.kpiee-dg2 .tbl td.rn {width: 42px; min-width: 42px; text-align: left; color: #8a93a6; background: #f7f8fb; font-size: 8.5px; padding-left: 6px;}
.kpiee-dg2 .tbl td.rn i {display: inline-block; width: 10px; font-style: normal; color: #4a5568; font-weight: 700;}
.kpiee-dg2 .tbl td.lb {width: 168px; min-width: 168px; background: #fff; border-right: 1.5px solid #b7c3d8;}
.kpiee-dg2 .tbl td.lb .colL {display: inline-block; width: 34px; text-align: center;}
.kpiee-dg2 .tbl td.lb .colL:nth-child(4) {width: 50px;}
.kpiee-dg2 .tbl td.n {width: 54px; min-width: 54px; text-align: right; font-variant-numeric: tabular-nums;}
.kpiee-dg2 .tbl tr.lv0 td.lb,
.kpiee-dg2 .tbl tr.lv0 td.n {font-weight: 700; font-size: 10.5px;}
.kpiee-dg2 .tbl tr.lv1 td.lb,
.kpiee-dg2 .tbl tr.lv1 td.n {font-weight: 700;}
.kpiee-dg2 .tbl tr.lv0 td.lb {background: #f7f8fb;}
.kpiee-dg2 .tbl tr.lv1 td.lb span {padding-left: 30px;}
.kpiee-dg2 .tbl tr.lv2 td.lb span {padding-left: 60px;}
.kpiee-dg2 .tbl tr.lv3 td.lb span {padding-left: 90px;}
.kpiee-dg2 .tbl td.red {color: var(--num-red);}
.kpiee-dg2 .tbl td.blue {color: var(--num-blue);}
.kpiee-dg2 .tbl tr.lv2 td.red,
.kpiee-dg2 .tbl tr.lv3 td.red {color: #e0596f;}
.kpiee-dg2 /* ===== カーソル演出 ===== */
  .viewport {position: relative;}
.kpiee-dg2 .chart-card {position: relative; transition: box-shadow .18s ease;}
.kpiee-dg2 /* 実UIと同じ：ホバー中はブランド色の枠線＋右上に操作アイコン */
  .chart-card.hov {box-shadow: 0 0 0 1.5px var(--brand), 0 1px 2px rgba(20,30,60,.06);}
.kpiee-dg2 .chart-card .acts {position: absolute; top: 9px; right: 12px; display: flex; gap: 10px; opacity: 0; transition: opacity .18s ease;}
.kpiee-dg2 .chart-card.hov .acts {opacity: 1;}
.kpiee-dg2 .chart-card .acts svg {width: 13px; height: 13px; color: #6b7386;}
.kpiee-dg2 .cursor {position: absolute; left: 0; top: 0; z-index: 70; pointer-events: none; width: 23.1px; height: 27.3px; filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.35));}
.kpiee-dg2 .cursor svg {position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: none;}
.kpiee-dg2 .cursor[data-shape="arrow"] svg.arrow {display: block;}
.kpiee-dg2 .cursor[data-shape="hand"] svg.hand {display: block;}
.kpiee-dg2 .cursor svg {transition: transform .09s ease; transform-origin: 15% 10%;}
.kpiee-dg2 .cursor.press svg {transform: scale(.86);}
.kpiee-dg2 .tip {position: absolute; z-index: 69; pointer-events: none;
    background: #fff; border-radius: 6px; padding: 7px 11px 6px;
    box-shadow: 0 6px 20px -6px rgba(20,30,60,.35), 0 0 0 1px rgba(20,30,60,.05);
    font-size: 10px; line-height: 1.35; color: #3a4354; white-space: nowrap;
    opacity: 0; transform: translateY(4px); transition: opacity .16s ease, transform .16s ease;}
.kpiee-dg2 .tip.show {opacity: 1; transform: none;}
.kpiee-dg2 .tip .lb {color: #6b7386;}
.kpiee-dg2 .tip .vl {display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; color: #1c2430; margin: 1px 0;}
.kpiee-dg2 .tip .vl i {width: 9px; height: 9px; border-radius: 2px; display: inline-block;}
.kpiee-dg2 .tip .dt {color: #6b7386;}
.kpiee-dg2 /* ===== 出現アニメーション（カード・数値・チャート） ===== */
  .rv {opacity: 0; transform: translateY(10px);}
.kpiee-dg2 .rv.in {animation: dg2_rise .55s cubic-bezier(.22,1,.36,1) forwards; animation-delay: var(--d, 0s);}
@keyframes dg2_rise { to { opacity: 1; transform: none; } }@keyframes dg2_fadeIn { to { opacity: 1; } }@keyframes dg2_growY { to { transform: scaleY(1); } }@keyframes dg2_growX { to { transform: scaleX(1); } }@keyframes dg2_draw  { to { stroke-dashoffset: 0; } }@keyframes dg2_popPt { 0% { transform: scale(0); } 70% { transform: scale(1.35); } 100% { transform: scale(1); } }.kpiee-dg2 /* 棒：下から伸びる（マイナスは0線から下へ） */
  .chart-card svg .bar {transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0);}
.kpiee-dg2 .chart-card svg .bar.neg {transform-origin: 50% 0;}
.kpiee-dg2 .chart-card svg .hbar {transform-box: fill-box; transform-origin: 0 50%; transform: scaleX(0);}
.kpiee-dg2 .chart-card.grow svg .bar {animation: dg2_growY .6s cubic-bezier(.22,1,.36,1) forwards; animation-delay: var(--d, 0s);}
.kpiee-dg2 .chart-card.grow svg .hbar {animation: dg2_growX .7s cubic-bezier(.22,1,.36,1) forwards; animation-delay: var(--d, 0s);}
.kpiee-dg2 /* 数値ラベル：あとから浮かぶ */
  .chart-card svg .lbl {opacity: 0;}
.kpiee-dg2 .chart-card.grow svg .lbl {animation: dg2_fadeIn .35s ease forwards; animation-delay: var(--d, 0s);}
.kpiee-dg2 /* 折れ線：左から描かれる／点：ポップ */
  .chart-card svg .ln {stroke-dasharray: var(--len); stroke-dashoffset: var(--len);}
.kpiee-dg2 .chart-card.grow svg .ln {animation: dg2_draw var(--dur, 1s) cubic-bezier(.4,0,.2,1) forwards; animation-delay: var(--d, 0s);}
.kpiee-dg2 .chart-card svg .pt {transform-box: fill-box; transform-origin: 50% 50%; transform: scale(0);}
.kpiee-dg2 .chart-card.grow svg .pt {animation: dg2_popPt .4s ease forwards; animation-delay: var(--d, 0s);}
.kpiee-dg2 /* 面グラフの塗り */
  .chart-card svg .area {opacity: 0;}
@keyframes dg2_fadeArea { to { opacity: var(--op, .14); } }.kpiee-dg2 .chart-card.grow svg .area {animation: dg2_fadeArea .7s ease forwards; animation-delay: var(--d, 0s);}
.kpiee-dg2 /* ドーナツ：回りながら埋まる（マスクの円弧を伸ばす） */
  .chart-card svg .dmask {stroke-dasharray: var(--len); stroke-dashoffset: var(--len);}
.kpiee-dg2 .chart-card.grow svg .dmask {animation: dg2_draw .9s cubic-bezier(.4,0,.2,1) forwards; animation-delay: .1s;}
.kpiee-dg2 /* =====================================================================
     カスタムレポート（PL 推移表）：ダッシュボードの上に被せる画面
     ===================================================================== */
  .pl {position: absolute; inset: 0; z-index: 10; background: #fff; display: flex; flex-direction: column; font-size: 10px; color: #1c2430;}
.kpiee-dg2 .pl.hide {display: none;}
.kpiee-dg2 .pl-head {display: flex; align-items: center; gap: 10px; padding: 0 18px; height: 38px; border-bottom: 1px solid var(--border); font-size: 13px; font-weight: 600; flex: none;}
.kpiee-dg2 .pl-head svg {width: 13px; height: 13px; color: #3a4354;}
.kpiee-dg2 .pl-head .chip {font-size: 10px; font-weight: 500; background: #eef1f6; color: #3a4354; border-radius: 9999px; padding: 3px 10px; margin-left: 4px;}
.kpiee-dg2 .pl-head .sp {flex: 1;}
.kpiee-dg2 .pl-head .last {font-size: 10px; font-weight: 400; color: #3a4354; display: flex; align-items: center; gap: 6px;}
.kpiee-dg2 .pl-head .last b {font-weight: 600; border: 1px solid var(--border); border-radius: 5px; padding: 3px 8px; background: #f7f8fb;}
.kpiee-dg2 .pl-head .done {font-size: 10px; font-weight: 700; color: #1a8a4a; background: #e3f6ea; border-radius: 5px; padding: 4px 8px;}
.kpiee-dg2 .pl-menu {display: flex; align-items: center; gap: 14px; padding: 0 18px; height: 26px; font-size: 10.5px; color: #1c2430; flex: none; border-bottom: 1px solid #f0f2f6;}
.kpiee-dg2 .pl-menu .sp {flex: 1;}
.kpiee-dg2 .pl-menu .ic {display: flex; gap: 12px; align-items: center; color: #3a4354;}
.kpiee-dg2 .pl-menu .ic svg {width: 12px; height: 12px;}
.kpiee-dg2 .pl-menu .zoom {border: 1px solid var(--border); border-radius: 5px; padding: 2px 8px; font-size: 10px;}
.kpiee-dg2 .pl-fx {display: flex; align-items: center; gap: 8px; padding: 0 18px; height: 30px; flex: none;}
.kpiee-dg2 .pl-fx .ref {display: flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 6px; height: 22px; padding: 0 10px; width: 420px; font-size: 10px;}
.kpiee-dg2 .pl-fx .ref .cellref {min-width: 20px; font-weight: 600;}
.kpiee-dg2 .pl-fx .ref .cellval {color: #3a4354; border-left: 1px solid var(--border); padding-left: 8px;}
.kpiee-dg2 .pl-fx .tool {display: flex; align-items: center; gap: 5px; border-radius: 6px; padding: 3px 8px; font-size: 10px; color: #3a4354; background: #f4f6fa; white-space: nowrap;}
.kpiee-dg2 .pl-fx .tool svg {width: 11px; height: 11px;}
.kpiee-dg2 .pl-fx .sq {width: 22px; height: 22px; border: 1px solid var(--border); border-radius: 6px; display: flex; align-items: center; justify-content: center;}
.kpiee-dg2 .pl-fx .sq svg {width: 12px; height: 12px; color: #3a4354;}
.kpiee-dg2 /* グリッド */
  .grid {flex: 1; min-height: 0; overflow: hidden; position: relative; border-top: 1px solid var(--border);}
.kpiee-dg2 .grid .r {display: grid; grid-template-columns: 36px 156px 26px repeat(16, 49px); height: 24px; align-items: stretch; border-bottom: 1px solid #eceff4; background: #fff;}
.kpiee-dg2 .grid .r > span {display: flex; align-items: center; justify-content: flex-end; padding: 0 4px; white-space: nowrap; overflow: hidden; border-right: 1px solid #eceff4; font-variant-numeric: tabular-nums;}
.kpiee-dg2 .grid .r > span.n:nth-child(4n) {border-left: 1.5px solid #b7c3d8;}
.kpiee-dg2 .grid .rn {justify-content: flex-start !important; background: #f7f8fb; color: #8a93a6; font-size: 8.5px; padding-left: 5px !important; gap: 3px;}
.kpiee-dg2 .grid .rn i {display: inline-block; width: 9px; font-style: normal; font-weight: 700; color: var(--brand); font-size: 10px; text-align: center;}
.kpiee-dg2 .grid .lb {justify-content: flex-start !important; padding-left: 8px !important;}
.kpiee-dg2 .grid .lb span {display: inline-block;}
.kpiee-dg2 .grid .u {justify-content: center !important; color: #6b7386; font-size: 9px;}
.kpiee-dg2 .grid .x {display: none;}
.kpiee-dg2 .grid .x.open {display: grid; animation: dg2_rowIn .28s cubic-bezier(.22,1,.36,1) both;}
@keyframes dg2_rowIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }.kpiee-dg2 /* ヘッダ行 */
  .grid .r.cols {height: 18px; background: #f7f8fb;}
.kpiee-dg2 .grid .r.cols > span {justify-content: center; color: #8a93a6; font-size: 8.5px; padding: 0;}
.kpiee-dg2 .grid .r.cols .lb {display: grid !important; grid-template-columns: repeat(6, 1fr); padding: 0 !important;}
.kpiee-dg2 .grid .r.cols .lb b {font-weight: 400; text-align: center; border-right: 1px solid #eceff4; line-height: 18px;}
.kpiee-dg2 .grid .r.cols .lb b:last-child {border-right: 0;}
.kpiee-dg2 .grid .r.cols .lb b.sel,
.kpiee-dg2 .grid .r.cols span.sel {background: #fde3e7; color: var(--brand);}
.kpiee-dg2 .grid .r.band1 > span,
.kpiee-dg2 .grid .r.band2 > span {background: #e7eefa; color: #1c2430;}
.kpiee-dg2 .grid .r.band1 .rn,
.kpiee-dg2 .grid .r.band2 .rn {background: #f7f8fb;}
.kpiee-dg2 .grid .r.band1 {height: 26px;}
.kpiee-dg2 .grid .r.band1 .lb,
.kpiee-dg2 .grid .r.band2 .lb {background: #eef4fc;}
.kpiee-dg2 .grid .r.band1 .m {grid-column: span 4; justify-content: center; font-weight: 700; font-size: 11px; border-left: 1.5px solid #b7c3d8;}
.kpiee-dg2 .grid .r.band2 > span.n {justify-content: center; font-weight: 700; font-size: 10px;}
.kpiee-dg2 .grid .r.band2 .u {font-weight: 400; font-size: 8.5px;}
.kpiee-dg2 .grid .r.cols .rn,
.kpiee-dg2 .grid .r.band1 .rn,
.kpiee-dg2 .grid .r.band2 .rn {justify-content: center !important; padding: 0 !important;}
.kpiee-dg2 .grid .rn em {font-style: normal;}
.kpiee-dg2 .grid .r.band1 .lb.a1 {position: relative;}
.kpiee-dg2 .grid .r.band1 .lb.a1::after {content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 28px; box-shadow: inset 0 0 0 1.5px var(--brand);}
.kpiee-dg2 .grid .r.band1 .lb.a1.off::after {display: none;}
.kpiee-dg2 /* 階層ごとの見た目 */
  .grid .r.lv0 {background: #eef4fc;}
.kpiee-dg2 .grid .r.lv0 .lb {color: var(--num-blue); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; font-size: 11px;}
.kpiee-dg2 .grid .r.lv0 .n {font-weight: 700; font-size: 10px; letter-spacing: -.02em;}
.kpiee-dg2 .grid .r.lv1 .lb {font-weight: 700; padding-left: 32px !important;}
.kpiee-dg2 .grid .r.lv1 .n {font-weight: 700; font-size: 10px; letter-spacing: -.01em;}
.kpiee-dg2 .grid .r.lv2 .lb {padding-left: 58px !important; font-size: 9.5px;}
.kpiee-dg2 .grid .r.lv2 .n {font-size: 9px;}
.kpiee-dg2 .grid .pct {font-style: italic;}
.kpiee-dg2 .grid .red {color: var(--num-red);}
.kpiee-dg2 .grid .blue {color: var(--num-blue);}
.kpiee-dg2 .grid .r.lv2 .red {color: #e0596f;}
.kpiee-dg2 /* 選択セル（実UIの赤枠＋右下ドット） */
  .grid span.selcell {position: relative; box-shadow: inset 0 0 0 1.5px var(--brand);}
.kpiee-dg2 .grid span.selcell::after {content: ""; position: absolute; right: -2px; bottom: -2px; width: 5px; height: 5px; border-radius: 50%; background: var(--brand); border: 1px solid #fff;}
.kpiee-dg2 .grid .r > span.hl {background: #fff4f6;}
.kpiee-dg2 /* 右クリックメニュー */
  .ctx {position: absolute; z-index: 40; background: #fff; border-radius: 6px; min-width: 128px; padding: 4px 0; font-size: 10.5px;
         box-shadow: 0 8px 24px -8px rgba(20,30,60,.35), 0 0 0 1px rgba(20,30,60,.06); opacity: 0; transform: translateY(3px); pointer-events: none; transition: opacity .14s ease, transform .14s ease;}
.kpiee-dg2 .ctx.show {opacity: 1; transform: none;}
.kpiee-dg2 .ctx div {padding: 7px 14px; color: #1c2430;}
.kpiee-dg2 .ctx div.hov {background: #f0f2f6;}
.kpiee-dg2 /* 明細モーダル */
  .mo-bg {position: absolute; inset: 0; z-index: 30; background: rgba(20,30,60,.28); opacity: 0; pointer-events: none; transition: opacity .18s ease;}
.kpiee-dg2 .mo-bg.show {opacity: 1;}
.kpiee-dg2 .mo {position: absolute; z-index: 31; left: 18px; right: 18px; top: 14px; bottom: 30px; background: #fff; border-radius: 8px; box-shadow: 0 18px 50px -14px rgba(20,30,60,.45);
        display: flex; flex-direction: column; padding: 14px 16px 12px; opacity: 0; transform: translateY(10px) scale(.985); pointer-events: none; transition: opacity .2s ease, transform .22s cubic-bezier(.22,1,.36,1);}
.kpiee-dg2 .mo.show {opacity: 1; transform: none;}
.kpiee-dg2 .mo .t {text-align: center; font-size: 12px; font-weight: 700; margin-bottom: 10px;}
.kpiee-dg2 .mo .box {border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px;}
.kpiee-dg2 .mo .box .cap {font-size: 9.5px; color: #3a4354; margin-bottom: 6px;}
.kpiee-dg2 .mo .chips {display: flex; gap: 8px;}
.kpiee-dg2 .mo .chip {display: flex; align-items: center; gap: 6px; border: 1px solid var(--border); border-radius: 5px; padding: 6px 10px; font-size: 10px; background: #fff;}
.kpiee-dg2 .mo .chip i {width: 11px; height: 11px; border: 1px solid #b7c3d8; border-radius: 2px; display: inline-block;}
.kpiee-dg2 .mo .chip.on {border-color: #f3b7c1; color: var(--brand); font-weight: 700;}
.kpiee-dg2 .mo .chip.on i {border-color: var(--brand); background: linear-gradient(#fff,#fff) padding-box; position: relative;}
.kpiee-dg2 .mo .chip.on i::after {content: ""; position: absolute; left: 3px; top: 0px; width: 3px; height: 6px; border: solid var(--brand); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);}
.kpiee-dg2 .mo .chip .h {color: #8a93a6; font-size: 9px;}
.kpiee-dg2 .mo .note {font-size: 9px; color: #3a4354; margin: 8px 0;}
.kpiee-dg2 .mo .panels {display: flex; gap: 10px; flex: 1; min-height: 0; margin-top: 6px;}
.kpiee-dg2 .mo .pn {flex: 1; min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px 6px; animation: dg2_pnIn .32s cubic-bezier(.22,1,.36,1) both;}
@keyframes dg2_pnIn { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }.kpiee-dg2 .mo .col {display: flex; align-items: center; gap: 8px; font-size: 9.5px; padding: 2px 0 6px;}
.kpiee-dg2 .mo .col b {font-weight: 400; border: 1px solid var(--border); border-radius: 4px; padding: 3px 8px; background: #f7f8fb; min-width: 70px;}
.kpiee-dg2 .mo .col .sp {flex: 1;}
.kpiee-dg2 .mo .sel {border: 1px solid var(--border); border-radius: 5px; padding: 5px 10px; font-size: 9.5px; color: #a3acbd; margin-bottom: 6px;}
.kpiee-dg2 .mo .tbl2 {flex: 1; min-height: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 4px; position: relative;}
.kpiee-dg2 .mo table {border-collapse: collapse; font-size: 9.5px; table-layout: fixed;}
.kpiee-dg2 .mo td,
.kpiee-dg2 .mo th {border-right: 1px solid #eceff4; border-bottom: 1px solid #eceff4; height: 22px; text-align: center; white-space: nowrap; overflow: hidden; font-weight: 400;}
.kpiee-dg2 .mo thead tr.l td {background: #f7f8fb; color: #8a93a6; font-size: 8.5px; height: 16px;}
.kpiee-dg2 .mo thead tr.h th {background: #dbe6f7; color: #1c2430;}
.kpiee-dg2 .mo thead tr.h th::after {content: "\25BC"; font-size: 6px; color: #8a93a6; margin-left: 10px;}
.kpiee-dg2 .mo tbody tr {opacity: 0;}
.kpiee-dg2 .mo .pn.loaded tbody tr {animation: dg2_fadeIn .25s ease forwards; animation-delay: calc(var(--i) * 45ms);}
.kpiee-dg2 .mo .spin {position: absolute; left: 50%; top: 52%; width: 16px; height: 16px; margin: -8px; border-radius: 50%; border: 2px solid #f3b7c1; border-top-color: var(--brand); animation: dg2_spin .8s linear infinite;}
.kpiee-dg2 .mo .pn.loaded .spin {display: none;}
@keyframes dg2_spin { to { transform: rotate(360deg); } }.kpiee-dg2 .mo .foot {text-align: right; font-size: 9.5px; color: #3a4354; padding: 6px 4px 0;}
.kpiee-dg2 .mo .foot b {font-weight: 700; margin-left: 3px; margin-right: 8px;}
.kpiee-dg2 .mo .chip {transition: border-color .15s ease, color .15s ease, background .15s ease;}
.kpiee-dg2 .mo .chip.hov {background: #f7f8fb;}
.kpiee-dg2 .mo .close {align-self: center; margin-top: 8px; border: 1px solid var(--border); border-radius: 5px; padding: 5px 24px; font-size: 10px; background: #fff; transition: background .15s ease;}
.kpiee-dg2 .mo .close.hov {background: #f0f2f6;}

/* 02：スクロールで見えてから1回だけ再生、縮小は .v2-fit 側で行う */
.kpiee-dg2 .stage { transform: none; width: auto; overflow: visible; }
/* ----------------------------------------------------------------
   03 AI活用（kpiee-ai-chat-v6.html）
   ---------------------------------------------------------------- */
.kpiee-ac2 { -webkit-font-smoothing: antialiased; color: #18181b; font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic UI", "Noto Sans JP", system-ui, sans-serif; line-height: 1.6; }
.kpiee-ac2 { --border: #e5e7eb; --muted-fg: #71717a; --brand: #E73F58;
    --num-red: #e11d48; --num-blue: #2563eb; --bubble: #e8f0fb; }
.kpiee-ac2 * { box-sizing: border-box; margin: 0; padding: 0; }
.kpiee-ac2 { font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic UI", "Noto Sans JP", system-ui, sans-serif; color: #1c2430; -webkit-font-smoothing: antialiased; }
/* 全体縮小（大きさはここで調整） */
.kpiee-ac2 .stage { position: relative; width: 790px; height: 700px; transform: scale(.75); transform-origin: top left; }
/* ===== 背面：PLシート（右下へ見切れる） ===== */
/* 画角：画面の右上を切り取った見た目。右上だけ角丸、上・右に影、左・下は白グラデで背景に溶かす */
.kpiee-ac2 .frame { position: absolute; left: 0; top: 0; width: 790px; height: 700px;
    background: #fff; border-radius: 0 18px 0 0;
    box-shadow: 14px 0 32px -16px rgba(20,30,60,.12), 0 -14px 32px -16px rgba(20,30,60,.12);
    clip-path: inset(-80px -80px 0 0);
    overflow: hidden; }
.kpiee-ac2 .fade-l, .kpiee-ac2 .fade-b { position: absolute; pointer-events: none; z-index: 60; }
.kpiee-ac2 .fade-l { top: 0; left: 0; bottom: 0; width: 44px; background: linear-gradient(to left, rgba(255,255,255,0) 0%, rgba(255,255,255,.6) 70%, #fff 100%); }
.kpiee-ac2 .fade-b { left: 0; right: 0; bottom: 0; height: 40px; background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.6) 70%, #fff 100%); }
.kpiee-ac2 .toolbar { position: absolute; left: 0; right: 0; top: 28px; display: flex; align-items: center; gap: 10px;
    padding: 0 12px; font-size: 12px; color: #3a4354; }
.kpiee-ac2 .toolbar .pill { display: flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; background: #fff; white-space: nowrap; }
.kpiee-ac2 .toolbar .pill.icon { padding: 6px 8px; color: var(--muted-fg); }
.kpiee-ac2 .toolbar .ico { width: 12px; height: 12px; color: var(--muted-fg); }
.kpiee-ac2 .sheet { position: absolute; left: 0; top: 82px; width: 1300px; font-size: 12.5px; background: #fff; }
.kpiee-ac2 .pr { display: grid; grid-template-columns: 44px 300px 60px repeat(8, 110px); height: 35px; align-items: center; border-bottom: 1px solid #eef1f6; background: #fff; }
.kpiee-ac2 .pr > span { padding: 0 12px; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 700; }
.kpiee-ac2 .pr .rn { text-align: center; color: #9aa6b8; font-size: 10.5px; font-weight: 400; background: #f4f7fb; height: 100%; display: flex; align-items: center; justify-content: center; border-right: 1px solid var(--border); }
.kpiee-ac2 .pr .nm { text-align: left; }
.kpiee-ac2 .pr .nm.link { color: var(--num-blue); text-decoration: underline; text-underline-offset: 3px; }
.kpiee-ac2 .pr .nm.lv1 { padding-left: 76px; font-weight: 400; }
.kpiee-ac2 .pr .unit { text-align: center; color: var(--muted-fg); font-weight: 400; }
.kpiee-ac2 .pr .d { font-style: italic; }
.kpiee-ac2 .pr .b { color: var(--num-blue); }
.kpiee-ac2 .pr .r { color: var(--num-red); }
.kpiee-ac2 .pr .sep { border-left: 1px solid var(--border); }
.kpiee-ac2 .pr.sub { background: #f5f8fd; }
.kpiee-ac2 .pr.col { height: 20px; border-bottom: 1px solid var(--border); }
.kpiee-ac2 .pr.col > span { color: #9aa6b8; font-size: 10.5px; font-weight: 400; text-align: center; }
.kpiee-ac2 .pr.b1 > span { background: #e7eefa; height: 100%; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.kpiee-ac2 .pr.b2 > span { background: #eef4fc; height: 100%; display: flex; align-items: center; justify-content: flex-end; font-weight: 700; }
.kpiee-ac2 .pr.b1 > .rn, .kpiee-ac2 .pr.b2 > .rn { background: #f4f7fb; }
/* ===== kpiee AI パネル ===== */
.kpiee-ac2 .panel { position: absolute; right: 0; top: 0; width: 640px; bottom: 0;   /* ヘッダー（ツールバー）まで覆う */
    border-radius: 0 18px 0 0; overflow: hidden;
    background: #fff; border-left: 1px solid var(--border); display: flex; flex-direction: column;
    box-shadow: -8px 0 30px -18px rgba(20,30,60,.25);
    clip-path: inset(0 0 0 -60px);   /* 影は左側だけ。下・右には出さない */ }
.kpiee-ac2 .p-head { display: flex; align-items: center; gap: 8px; padding: 22px 20px; border-bottom: 1px solid var(--border); font-size: 14px; font-weight: 700; }
.kpiee-ac2 .p-head .ic { width: 22px; height: 22px; display: grid; place-items: center; }
.kpiee-ac2 .p-head .ic svg { width: 20px; height: 20px; color: #4a5568; }
.kpiee-ac2 .p-head .ops { margin-left: auto; display: flex; gap: 14px; }
.kpiee-ac2 .p-head .ops svg { width: 16px; height: 16px; color: #3a4354; }
.kpiee-ac2 .p-title { display: flex; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--border); font-size: 13px; color: #3a4354; }
.kpiee-ac2 .p-title .ops { margin-left: auto; display: flex; gap: 14px; }
.kpiee-ac2 .p-title .ops svg { width: 16px; height: 16px; color: #3a4354; }
/* 会話エリア：開始時はグレーの角丸、質問が出た瞬間に白背景へ */
.kpiee-ac2 .chat { position: relative; flex: 1; min-height: 0; overflow: hidden; margin: 14px 20px 10px; background: #f4f6fa; border-radius: 12px; padding: 18px 22px 10px; display: flex; flex-direction: column; gap: 16px; font-size: 14px; line-height: 1.8; }
.kpiee-ac2 .chat.started { background: transparent; border-radius: 0; margin: 4px 0 8px; padding: 14px 26px 10px; }
.kpiee-ac2 .empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #9aa6b8; font-size: 12.5px; }
.kpiee-ac2 .empty svg { width: 32px; height: 32px; }
.kpiee-ac2 .chat.started .empty { display: none; }
/* 回答を準備中です */
.kpiee-ac2 .prep { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #3a4354; opacity: 0; transition: opacity .25s; }
.kpiee-ac2 .prep.show { opacity: 1; }
.kpiee-ac2 .prep i { width: 22px; height: 22px; border-radius: 9999px; background: var(--brand); color: #fff; display: grid; place-items: center; flex-shrink: 0; }
.kpiee-ac2 .prep i svg { width: 14px; height: 14px; }
.kpiee-ac2 .prep span { animation: ac2_prepPulse 1.2s ease-in-out infinite; }
@keyframes ac2_prepPulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
/* 送信 → 停止（赤丸） */
.kpiee-ac2 .p-input .box .sendwrap { position: relative; display: inline-grid; place-items: center; flex-shrink: 0; }
.kpiee-ac2 .p-input .box .stop { position: absolute; inset: 0; margin: auto; width: 20px; height: 20px; border-radius: 9999px; background: var(--brand); opacity: 0; transition: opacity .2s; }
.kpiee-ac2 .p-input .box .stop::after { content: ""; position: absolute; inset: 6px; background: #fff; border-radius: 2px; }
.kpiee-ac2 .p-input .box.busy .stop { opacity: 1; }
.kpiee-ac2 .q { align-self: flex-end; max-width: 82%; background: #e8f0fb; border-radius: 12px; padding: 10px 26px; opacity: 0; transform: translateY(8px); transition: opacity .4s ease, transform .4s cubic-bezier(.22,1,.36,1); }
.kpiee-ac2 .q.show { opacity: 1; transform: none; }
.kpiee-ac2 .a { align-self: flex-start; max-width: 94%; color: #1c2430;   /* 吹き出しなしのプレーンテキスト */
    padding: 0 2px;
    opacity: 0; transform: translateY(10px);
    transition: opacity .45s ease, transform .45s cubic-bezier(.22,1,.36,1); }
.kpiee-ac2 .a.show { opacity: 1; transform: none; }
.kpiee-ac2 .a b { font-weight: 700; }
.kpiee-ac2 .typing { display: inline-flex; gap: 5px; align-items: center; padding: 10px 4px; opacity: 0; transition: opacity .25s; }
.kpiee-ac2 .typing.show { opacity: 1; }
.kpiee-ac2 .typing i { width: 7px; height: 7px; border-radius: 9999px; background: #9aa6b8; animation: ac2_tdot 1.1s infinite ease-in-out; }
.kpiee-ac2 .typing i:nth-child(2) { animation-delay: .15s; }
.kpiee-ac2 .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes ac2_tdot { 0%,60%,100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
@keyframes ac2_blink { 50% { opacity: 0; } }
.kpiee-ac2 .tbl { margin-top: 10px; font-size: 11.5px; border-top: 1px solid #d9e1ec; }
.kpiee-ac2 .tbl .tr { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1fr; border-bottom: 1px solid #eef2f8; opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s; }
.kpiee-ac2 .tbl .tr.show { opacity: 1; transform: none; }
.kpiee-ac2 .tbl .tr span { padding: 11px 9px; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kpiee-ac2 .tbl .tr span:first-child { text-align: left; }
.kpiee-ac2 .tbl .tr.hd span { font-weight: 700; }
.kpiee-ac2 .p-input { border-top: 1px solid var(--border); padding: 14px 20px 10px; }
.kpiee-ac2 .p-input .box { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; font-size: 13px; color: #1c2430; min-height: 48px; transition: border-color .2s, box-shadow .2s; }
.kpiee-ac2 .p-input .box.focus { border-color: #9dbdf0; box-shadow: 0 0 0 3px rgba(66,133,244,.12); }
.kpiee-ac2 .p-input .box .txt { flex: 1; min-width: 0; line-height: 1.5; }
.kpiee-ac2 .p-input .box .ph { color: #9aa6b8; }
.kpiee-ac2 .p-input .box .cur { display: inline-block; width: 1.5px; height: 1.05em; background: #1c2430; vertical-align: -2px; animation: ac2_blink .9s steps(1) infinite; }
.kpiee-ac2 .p-input .box svg.send { width: 20px; height: 20px; color: #c3cbd8; flex-shrink: 0; transition: color .2s, transform .15s; }
.kpiee-ac2 .p-input .box.ready svg.send { color: var(--brand); }
.kpiee-ac2 .p-input .box.sent svg.send { transform: translateX(3px) scale(.86); }
.kpiee-ac2 .p-input .warn { margin-top: 8px; font-size: 10.5px; color: #b0b8c6; }

/* ----------------------------------------------------------------
   04 外部AI連携（kpiee-ext-ai__2_.html）
   ---------------------------------------------------------------- */
.kpiee-ext { -webkit-font-smoothing: antialiased; color: #18181b; font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic UI", "Noto Sans JP", system-ui, sans-serif; line-height: 1.6; }
.kpiee-ext { --fg: #1c2430; --muted: #6b7386; --line: #e6e8ee; --soft: #f4f4f5;
    --bubble: #eef0f4; --blue: #4285F4; --brand: #E73F58; }
.kpiee-ext * { box-sizing: border-box; margin: 0; padding: 0; }
.kpiee-ext { font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic UI", "Noto Sans JP", system-ui, sans-serif; color: var(--fg); -webkit-font-smoothing: antialiased; }
/* ===== ステージ：画面の一部を切り取ったような見た目 ===== */
.kpiee-ext .stage { position: relative; width: 740px; height: 660px; transform: scale(.8); transform-origin: top left; }
/* 表示幅 ≒ 592px（チャット動画と同じ） */
.kpiee-ext .frame { position: absolute; inset: 0; background: #fff; border-radius: 18px 0 0 0; overflow: hidden;
    box-shadow: -14px 0 32px -16px rgba(20,30,60,.12), 0 -14px 32px -16px rgba(20,30,60,.12);  /* 上・左だけ影 */
    clip-path: inset(-80px 0 0 -80px); }
/* 右端・下端：背景の白へ溶かす */
.kpiee-ext .fade-r, .kpiee-ext .fade-b { position: absolute; pointer-events: none; z-index: 60; }
.kpiee-ext .fade-r { top: 0; right: 0; bottom: 0; width: 44px; background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.6) 70%, #fff 100%); }
.kpiee-ext .fade-b { left: 0; right: 0; bottom: 0; height: 40px; background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.6) 70%, #fff 100%); }
/* ===== 画面構成（汎用的なAIチャット） ===== */
.kpiee-ext .topbar { height: 46px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; }
.kpiee-ext .topbar .ttl { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; opacity: 0; transition: opacity .3s; }
.kpiee-ext .topbar .ttl svg { width: 12px; height: 12px; color: var(--muted); }
.kpiee-ext .topbar .share { border: 1px solid var(--line); border-radius: 8px; padding: 5px 12px; font-size: 12px; color: var(--fg); background: #fff; }
.kpiee-ext .inner { position: absolute; top: 46px; left: 0; right: 0; bottom: 0; }
/* --- 初期画面：挨拶＋入力ボックス --- */
.kpiee-ext .home { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-bottom: 60px; transition: opacity .3s; }
.kpiee-ext .home.off { opacity: 0; pointer-events: none; }
.kpiee-ext .greet { display: flex; align-items: center; gap: 10px; font-size: 24px; font-weight: 500; letter-spacing: .01em; margin-bottom: 18px; }
.kpiee-ext .greet i { width: 22px; height: 22px; border-radius: 9999px; background: conic-gradient(from 0deg, #4285F4, #9bbcf7, #E73F58, #4285F4); display: inline-block; mask: radial-gradient(circle, transparent 38%, #000 40%); -webkit-mask: radial-gradient(circle, transparent 38%, #000 40%); }
.kpiee-ext .composer { width: 560px; border: 1px solid var(--line); border-radius: 16px; background: #fff;
    box-shadow: 0 4px 18px -8px rgba(20,30,60,.18); padding: 14px 16px 12px; }
.kpiee-ext .composer .text { font-size: 14px; min-height: 22px; color: var(--fg); }
.kpiee-ext .composer .text.ph { color: #9aa6b8; }
.kpiee-ext .composer .text .caret { display: inline-block; width: 1px; height: 15px; background: var(--fg); vertical-align: -2px; margin-left: 1px; animation: ext_blink 1s steps(2) infinite; }
@keyframes ext_blink { 50% { opacity: 0; } }
.kpiee-ext .composer .tools { display: flex; align-items: center; margin-top: 12px; }
.kpiee-ext .composer .plus { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; color: var(--muted); }
.kpiee-ext .composer .plus svg, .kpiee-ext .composer .mic svg { width: 15px; height: 15px; }
.kpiee-ext .composer .seg { margin-left: 8px; display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; font-size: 11.5px; }
.kpiee-ext .composer .seg span { padding: 4px 10px; color: var(--muted); }
.kpiee-ext .composer .seg span.on { background: var(--fg); color: #fff; }
.kpiee-ext .composer .mic { margin-left: auto; color: var(--muted); display: grid; place-items: center; width: 26px; height: 26px; }
.kpiee-ext .composer .send { margin-left: 6px; width: 28px; height: 28px; border-radius: 8px; background: var(--fg); color: #fff;
    display: grid; place-items: center; transition: transform .12s, background .2s; }
.kpiee-ext .composer .send.idle { background: #c9ced8; }
.kpiee-ext .composer .send svg { width: 14px; height: 14px; }
.kpiee-ext .composer .send.press { transform: scale(.88); }
.kpiee-ext .model { width: 560px; text-align: right; font-size: 11px; color: var(--muted); margin-top: 8px; }
/* --- 会話画面 --- */
.kpiee-ext .conv { position: absolute; inset: 0; opacity: 0; transition: opacity .3s; }
.kpiee-ext .conv.on { opacity: 1; }
/* ループの巻き戻し中はすべてのトランジション／アニメーションを止めて瞬時に切り替える */
.kpiee-ext.noanim, .kpiee-ext.noanim * { transition: none !important; animation: none !important; }
.kpiee-ext .thread { position: absolute; top: 0; left: 0; right: 0; bottom: 118px; overflow: hidden; }
.kpiee-ext .thread-inner { width: 620px; margin: 0 auto; padding: 12px 0 0; display: flex; flex-direction: column; gap: 14px; transition: transform .6s cubic-bezier(.4,0,.2,1); }
.kpiee-ext .msg { opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .35s; }
.kpiee-ext .msg.in { opacity: 1; transform: none; }
.kpiee-ext .u { align-self: flex-end; max-width: 78%; background: var(--bubble); border-radius: 12px; padding: 9px 14px; font-size: 13.5px; }
.kpiee-ext .tool { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.kpiee-ext .tool svg { width: 12px; height: 12px; }
.kpiee-ext .tool .chip { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); border-radius: 6px; padding: 2px 8px; color: var(--fg); background: #fff; }
.kpiee-ext .tool .chip b { color: var(--brand); font-weight: 700; }
/* 思考中「・・・」 */
.kpiee-ext .think { font-size: 26px; font-weight: 700; letter-spacing: -.05em; color: #8a93a6; height: 26px; line-height: 1; display: flex; align-items: center; }
.kpiee-ext .think span { animation: ext_dotPulse 1.1s ease-in-out infinite; }
.kpiee-ext .think span:nth-child(2) { animation-delay: .18s; }
.kpiee-ext .think span:nth-child(3) { animation-delay: .36s; }
@keyframes ext_dotPulse { 0%,100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }
.kpiee-ext .think.done { display: none; }
.kpiee-ext .ans { font-size: 13.5px; line-height: 1.8; }
.kpiee-ext .ans code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; background: var(--soft); border-radius: 4px; padding: 1px 6px; }
.kpiee-ext .ans ul { padding-left: 20px; margin: 4px 0; }
.kpiee-ext .ans li { margin: 1px 0; }
.kpiee-ext .ans b.red { color: var(--brand); font-weight: 700; }
.kpiee-ext .ans b.blue { color: var(--blue); font-weight: 700; }
/* グラフカード */
.kpiee-ext .card { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px 10px; background: #fff; }
.kpiee-ext .card .ch { display: flex; align-items: flex-start; justify-content: space-between; }
.kpiee-ext .card .ct { font-size: 13px; font-weight: 700; }
.kpiee-ext .card .cs { font-size: 11px; color: var(--muted); margin-top: 2px; }
.kpiee-ext .card .views { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.kpiee-ext .card .views span { width: 26px; height: 22px; display: grid; place-items: center; color: var(--muted); }
.kpiee-ext .card .views span.on { background: var(--soft); color: var(--fg); }
.kpiee-ext .card .views svg { width: 13px; height: 13px; }
.kpiee-ext .plot { position: relative; margin: 14px 0 0 34px; height: 190px; }
.kpiee-ext .plot .grid { position: absolute; inset: 0; }
.kpiee-ext .plot .grid div { position: absolute; left: 0; right: 0; border-top: 1px solid #eceff4; }
.kpiee-ext .plot .grid div:last-child { border-top-color: #b6bfce; }
.kpiee-ext .plot .ylab { position: absolute; right: 100%; margin-right: 8px; font-size: 10px; color: var(--muted); transform: translateY(-50%); font-variant-numeric: tabular-nums; }
.kpiee-ext .plot .bars { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 0; padding: 0 6px; }
.kpiee-ext .plot .bar { flex: 1; display: flex; justify-content: center; align-items: flex-end; height: 100%; }
.kpiee-ext .plot .bar i { width: 60%; max-width: 22px; background: var(--blue); border-radius: 3px 3px 0 0; transform-origin: bottom; transform: scaleY(0); transition: transform .5s cubic-bezier(.22,1,.36,1); display: block; }
.kpiee-ext .plot.grow .bar i { transform: scaleY(1); }
.kpiee-ext .xlab { display: flex; margin: 6px 0 0 34px; padding: 0 6px; }
.kpiee-ext .xlab span { flex: 1; text-align: center; font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }
.kpiee-ext .acts { display: flex; gap: 14px; color: #9aa6b8; }
.kpiee-ext .acts svg { width: 14px; height: 14px; }
/* 下部の入力欄 */
.kpiee-ext .bottom { position: absolute; left: 0; right: 0; bottom: 0; height: 118px; background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 22%); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 16px; }
.kpiee-ext .bottom .box { width: 620px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 4px 18px -10px rgba(20,30,60,.2); padding: 11px 14px; display: flex; align-items: center; gap: 12px; font-size: 13.5px; color: #9aa6b8; }
.kpiee-ext .bottom .box svg { width: 15px; height: 15px; color: var(--muted); flex-shrink: 0; }
.kpiee-ext .bottom .box .sp { flex: 1; }
.kpiee-ext .bottom .note { width: 620px; display: flex; justify-content: space-between; font-size: 11px; color: #9aa6b8; margin-top: 8px; }

/* ----------------------------------------------------------------
   01 DWHで一元管理（kpiee-dataflow-v25.html）
   ---------------------------------------------------------------- */
.kpiee-df2 {--ink: #1c1c1c; --brand: #E73F58; --line: #e4e4e6; --ic: #837E76; --lpanel: #EEF0F5; --lhead: #E4E8F1; --ppanel: #ffffff;}
.kpiee-df2 *,
.kpiee-df2 {box-sizing: border-box; margin: 0; padding: 0;}
.kpiee-df2 {font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic UI", "Noto Sans JP", "Noto Sans CJK JP", system-ui, sans-serif; color: var(--ink); -webkit-font-smoothing: antialiased;}
.kpiee-df2 .wrap {width: 900px; transform-origin: top center;}
.kpiee-df2 .flow {display: grid; grid-template-columns: 270px 130px 1fr; align-items: start; gap: 0;}
.kpiee-df2 /* ===== 見出し帯 ===== */
  .hd {height: 44px; border-radius: 6px; font-weight: 700; font-size: 18px; letter-spacing: .06em; display: grid; place-items: center;}
.kpiee-df2 .src .hd {background: var(--lhead); color: var(--ink);}
.kpiee-df2 .dwh .hd {background: #1f1f22; color: #fff;}
.kpiee-df2 /* ===== 左：保持データ ===== */
  .src .panel {background: transparent; padding: 0; margin-top: 14px;}
.kpiee-df2 .src .list {display: flex; flex-direction: column; gap: 10px;}
.kpiee-df2 .src .row {display: flex; align-items: center; gap: 16px; height: 58px; background: #fff; border-radius: 10px; padding: 0 12px;}
.kpiee-df2 .src .row img {width: 30px; height: 30px; object-fit: contain; flex: none;}
.kpiee-df2 .folders .fd .ficon {position: relative; width: 88px; height: 74px;}
.kpiee-df2 .folders .fd .ficon svg {position: absolute; inset: 0; width: 100%; height: 100%;}
.kpiee-df2 .folders .fd .ficon img {position: absolute; left: 50%; top: 61.7%; transform: translate(-50%,-50%); width: 22px; height: 22px; object-fit: contain;}
.kpiee-df2 .src .row .nm {font-size: 18px; font-weight: 700; letter-spacing: .04em; white-space: nowrap;}
.kpiee-df2 /* ===== 中央：接続線＋矢印（SVGをJSで描画。動くのは矢印だけ） ===== */
  .mid {position: relative; align-self: stretch; z-index: 2;}
.kpiee-df2 .mid svg {position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;}
.kpiee-df2 /* 線＋矢印を一体で、左→右のワイプで表示（縦線・矢じりも同じワイプで現れる） */
  .mid svg {clip-path: inset(-20px 100% -20px 0);}
.kpiee-df2 .mid.play svg {animation: df2_wipe var(--dur, 1.1s) cubic-bezier(.25,.1,.25,1) forwards;}
@keyframes df2_wipe { to { clip-path: inset(-20px -20px -20px 0); } }.kpiee-df2 /* ===== 右：DWH ===== */
  .dwh {position: relative;}
.kpiee-df2 .dwh .hd {font-size: 20px;}
.kpiee-df2 .base {position: relative; margin: 10px 55px 0; height: 148px; z-index: 3;}
.kpiee-df2 .base .cyl-backer {position: absolute; left: 50%; top: 60%; transform: translate(-50%,-50%); width: 100.8%; aspect-ratio: 1602 / 539; background: var(--ppanel);}
.kpiee-df2 .base .cyl-img {position: absolute; left: 50%; top: 60%; transform: translate(-50%,-50%); width: 100.8%; max-width: none; display: block;}
.kpiee-df2 .fpanel {position: relative; z-index: 1; background: var(--ppanel); border: 2.5px solid var(--brand); border-radius: 10px;
    margin: -62px 0 0; padding: 82px 14px 14px; box-shadow: 0 6px 20px rgba(120,120,120,0.18);}
.kpiee-df2 .folders {display: grid; grid-template-columns: repeat(3, 1fr); gap: 0px; opacity: 0;}
@keyframes df2_foldersFade { to { opacity: 1; } }
.kpiee-df2 #mid.play ~ .dwh .folders {animation: df2_foldersFade .5s ease 0.6s both;}
.kpiee-df2 .folders .fd {display: flex; flex-direction: column; align-items: center; gap: 2px; background: #fff; border-radius: 10px; padding: 12px 8px 10px;}
.kpiee-df2 .folders .fd svg {width: 88px; height: 74px;}
.kpiee-df2 .folders .fd .nm {font-size: 14px; font-weight: 700; color: #2b2b2f; text-align: center; line-height: 1.25;}
.kpiee-df2 .etc {text-align: right; font-size: 16px; font-weight: 700; color: #8F8F8F; margin-top: 10px; padding-right: 4px;}
/* 保持データのetc...は各行のテキスト開始位置（アイコン＋ギャップ分）から左揃え */
.kpiee-df2 .src .etc {text-align: right; padding-right: 14px; margin-top: 0;}
@media (prefers-reduced-motion: reduce) {.kpiee-df2 .mid svg {clip-path: none; animation: none;} .kpiee-df2 .folders {opacity: 1; animation: none;}
}
/* 01：スクロールで見えてから1回だけ再生（矢印は表示されたまま止める） */
.kpiee-df2 .arrow-main svg {
  animation-iteration-count: 1;
  animation-fill-mode: none;
  animation-play-state: paused;
  opacity: 1;
}
.kpiee-df2.play .arrow-main svg { animation-play-state: running; }
/* ----------------------------------------------------------------
   ページ組み込み用の調整（単体HTML用の指定を打ち消す）
   ---------------------------------------------------------------- */
/* 単体HTMLでの縮小指定は .v2-fit 側で行うため無効化 */
.kpiee-dg2 .stage { transform: none; width: auto; overflow: visible; }
.kpiee-ac2 .stage { transform: none; }
.kpiee-ext .stage { transform: none; }
/* 01：中央の矢印はCSSアニメーションのみ。見えてから1回だけ動かす
   （終了後は素の状態＝矢印が表示されたままになるよう fill-mode は none） */
.kpiee-df2 .arrow-main svg {
  animation-iteration-count: 1;
  animation-fill-mode: none;
  animation-play-state: paused;
}
.kpiee-df2.play .arrow-main svg { animation-play-state: running; }
/* 再生後（fill-mode:none で素の状態に戻る）も矢印は見えたままにする */
.kpiee-df2 .arrow-main svg { opacity: 1; }
.kpiee-df2 .wrap { margin: 0 auto; }

/* KV：SPでは横スクロールさせずに縮小表示（旧実装と同じ挙動） */
.kpiee-kv3 .wrap { max-width: none; }
.kpiee-kv3 .browser-scroll { transform-origin: top center; }
@media (max-width: 640px) {
  .kpiee-kv3 .browser-scroll { overflow: hidden; width: min(372px, 100%); height: 269px; margin: 0 auto; }
  .kpiee-kv3 .browser-scroll .browser { width: 760px; transform: scale(0.49); transform-origin: top left; }
  .kpiee-kv3 .tabs { margin: 22px auto 0; max-width: 372px; width: 100%; gap: 4px; }
  .kpiee-kv3 .tab { align-items: center; text-align: center; gap: 5px; }
  .kpiee-kv3 .tab-title { font-size: 8.5px; line-height: 1.25; white-space: normal; word-break: keep-all; overflow-wrap: anywhere; text-align: center; }
  .kpiee-kv3 .tab-desc { display: none; }
}



/* ===========================================================================
   01 DWHで一元管理（kpiee_mdp_animation_v21.html）— 245回目
   パネルが順に登場 → 弧を描いて kpiee MDP の円柱に吸い込まれる（Web Animations API）。
   .stage → .kpiee-mdp。1750×1172 の固定サイズで置き、縮小は .v2-fit 側が行う
   =========================================================================== */
.kpiee-mdp {
  --bg: #ffffff; --panel: #ffffff; --ink: #1c2130; --bar: #c9ccd3; --bar-dark: #9498a3;
  --hl: #fde0e2; --red: #F32F4C; --blue: #1e90ff;
  width: 1750px; height: 1172px; position: relative;
  font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", "Meiryo", sans-serif;
}
.kpiee-mdp svg { width: 100%; height: 100%; display: block; overflow: visible; }
.kpiee-mdp .panel { transform-box: fill-box; transform-origin: center;
  /* 266回目：CSS の drop-shadow は iOS Safari で SVG の g（transform付き）に効かないため SVG フィルタに変更 */
  filter: url(#mdpShadow); -webkit-filter: url(#mdpShadow); }
.kpiee-mdp .panel-wrap { transform-box: fill-box; transform-origin: center; }
.kpiee-mdp .title { font-size: 30px; font-weight: 700; fill: var(--ink); letter-spacing: .5px; }
.kpiee-mdp .cyl { transform-box: fill-box; transform-origin: 50% 100%; }
.kpiee-mdp .band-text { font-size: 101px; font-weight: 700; fill: var(--red); letter-spacing: -.5px;
  font-family: "Poppins", "Montserrat", "Helvetica Neue", Arial, sans-serif; }