/* ==========================================================================
FP Compass — v8 Workspace (Sidebar + Main, Light Pro)
Linear / Stripe Dashboard / Pipedrive flavour.
Dark sidebar (deep slate) + bright workspace + indigo accent.
Manrope display + Noto Sans JP body, generous 14-20px radii,
layered shadows, hero greeting + breadcrumb + global search.
========================================================================== */
:root {
/* Workspace surfaces */
--bg: #F6F6F4;
--surface: #FFFFFF;
--surface-2: #FAFAF9;
--surface-3: #F0F0EE;
--ink: #0A0A0A;
--ink-2: #3F3F46;
--ink-3: #6B6B6B;
--muted: #9A9A9A;
--hairline: #ECECEA;
--hairline-2: #DCDCD8;
--line: var(--hairline);
--line-2: var(--hairline-2);
/* Sidebar — deep slate (premium dark, NOT pure black) */
--side-bg: #0F1117;
--side-bg-2: #161A23;
--side-bg-3: #1E2330;
--side-ink: #E4E6EB;
--side-ink-2: #B3B8C3;
--side-ink-3: #7A8194;
--side-line: #232838;
--side-line-2: #2E3447;
/* Accent — indigo */
--accent: #5B5BF0;
--accent-2: #4242C9;
--accent-3: #7878F5;
--accent-soft: #EEF1FE;
--accent-faint: #F5F7FF;
--accent-ring: rgba(91,91,240,0.18);
--accent-glow: rgba(91,91,240,0.32);
/* Semantic */
--critical: #DC2B2B;
--critical-soft:#FEF1F1;
--positive: #047647;
--positive-soft:#ECFDF3;
--warn: #B5530F;
--warn-soft: #FFF6E5;
/* Typography */
--font-display: "Manrope", "Noto Sans JP", -apple-system, BlinkMacSystemFont, sans-serif;
--font-body: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif;
--font-mono: ui-monospace, SFMono-Regular, "Geist Mono", "JetBrains Mono", monospace;
--font-jp: var(--font-body);
/* Shadow vocabulary */
--shadow-xs: 0 1px 0 rgba(16,24,40,0.04);
--shadow-sm: 0 1px 2px rgba(16,24,40,0.05), 0 1px 0 rgba(16,24,40,0.04);
--shadow-md: 0 4px 12px rgba(16,24,40,0.06), 0 1px 0 rgba(16,24,40,0.04);
--shadow-lg: 0 12px 32px rgba(16,24,40,0.08), 0 2px 4px rgba(16,24,40,0.04);
--shadow-modal: 0 32px 80px rgba(16,24,40,0.24), 0 0 0 1px rgba(16,24,40,0.04);
--shadow-side: inset -1px 0 0 rgba(255,255,255,0.04);
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 14px;
--radius-xl: 20px;
/* Legacy token routing */
--green: var(--positive);
--green-soft: var(--positive-soft);
--yellow: var(--warn);
--yellow-soft: var(--warn-soft);
--red: var(--critical);
--red-soft: var(--critical-soft);
}
/* ------------------------------------------------------------------
Foundation
------------------------------------------------------------------ */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); height: 100%; overflow: hidden; }
body {
font-family: var(--font-body);
color: var(--ink);
font-size: 14px;
line-height: 1.55;
font-feature-settings: "palt" 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body::before { content: none !important; display: none !important; }
.app-header { display: none !important; } /* old top header is replaced */
body, table, .kpi-value, .num, .funnel-value, .task-count,
.sched-next, .booking-when, .booking-time, .booking-date, .bday-date,
.app-meta, .count, .seg-count {
font-variant-numeric: tabular-nums lining-nums;
}
/* ------------------------------------------------------------------
Shell: sidebar + main grid
------------------------------------------------------------------ */
.shell {
display: grid;
grid-template-columns: 308px 1fr;
height: 100vh;
width: 100vw;
max-width: 100vw;
overflow: hidden;
}
/* 2026-07-10: notebook viewport (1440px以下) で sidebar 幅 削減 → 途切れ防止 */
@media (max-width: 1500px) {
.shell { grid-template-columns: 260px 1fr; }
}
@media (max-width: 1280px) {
.shell { grid-template-columns: 232px 1fr; }
}
/* ==================================================================
SIDEBAR (light, calm) — v3 simplified
業務系CRMに合わせて light bg、装飾を最小限に
================================================================== */
/* 2026-07-10 impeccable 再設計: 3-zone flex (header / scroll / foot)
固定ヘッダー (brand+search+quick-rec) + スクロール中間 + 固定フッター
→ foot が どんな viewport でも 常に 見える (sticky に頼らず 構造的に解決) */
.sidebar {
background: #FFFFFF;
color: var(--ink);
display: flex; flex-direction: column;
padding: 14px 12px 10px;
border-right: 1px solid var(--hairline);
overflow: hidden; /* scroll は 内側 の .sidebar-scroll が担当 */
min-width: 0;
position: relative;
box-sizing: border-box;
}
.sidebar * { max-width: 100%; box-sizing: border-box; }
.sidebar input, .sidebar button, .sidebar a { min-width: 0; }
/* 固定ゾーン: shrink しない */
.sidebar-brand,
.sidebar-search,
.sidebar-quick-rec,
.sidebar-foot { flex-shrink: 0; }
/* 中間スクロールゾーン */
.sidebar-scroll {
flex: 1;
min-height: 0; /* 重要: flex子 の overflow を 有効化 */
overflow-y: auto;
overflow-x: hidden;
display: flex;
flex-direction: column;
gap: 12px;
margin: 8px -4px;
padding: 0 4px;
}
.sidebar-scroll::-webkit-scrollbar { width: 5px; }
.sidebar-scroll::-webkit-scrollbar-thumb { background: var(--hairline-2); border-radius: 3px; }
.sidebar-scroll::-webkit-scrollbar-track { background: transparent; }
/* 2026-07-10 design-reviewer Critical#2: 下に隠れてるタブに気付ける よう scroll shadow mask (JS で has-more class 付与) */
.sidebar-scroll { position: relative; }
.sidebar-scroll.has-more::after {
content: '';
position: sticky;
bottom: 0; left: 0; right: 0;
height: 28px;
margin-top: -28px;
background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.92));
pointer-events: none;
flex-shrink: 0;
display: block;
}
.sidebar::-webkit-scrollbar { width: 5px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--hairline-2); border-radius: 3px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar-glow { display: none; }
.sidebar > * { position: relative; z-index: 1; }
/* -------- Brand -------- */
.sidebar-brand {
display: flex; align-items: center; gap: 11px;
padding: 4px 8px 14px;
border-bottom: 1px solid var(--hairline);
margin-bottom: 12px;
}
.brand-logo {
position: relative;
width: 34px; height: 34px;
flex-shrink: 0;
}
.brand-logo-inner {
position: relative; z-index: 2;
display: inline-flex; align-items: center; justify-content: center;
width: 100%; height: 100%;
background: var(--accent);
color: #fff;
font-family: var(--font-display);
font-size: 13px; font-weight: 800; letter-spacing: -0.02em;
border-radius: 8px;
}
.brand-logo-glow { display: none; }
.brand-text { line-height: 1.2; min-width: 0; }
.brand-name {
font-family: var(--font-display);
font-weight: 700; font-size: 14px;
color: var(--ink); letter-spacing: -0.012em;
display: flex; align-items: center; gap: 7px;
}
.brand-badge {
font-family: var(--font-display);
font-size: 9px; font-weight: 700;
letter-spacing: 0.08em; text-transform: uppercase;
background: var(--accent-soft);
color: var(--accent-2);
padding: 1px 6px;
border-radius: 3px;
border: 1px solid #DDE1FB;
line-height: 1.6;
}
.brand-sub {
font-family: var(--font-body);
font-size: 11px; color: var(--ink-3);
margin-top: 2px; letter-spacing: 0;
}
/* -------- Search -------- */
.sidebar-search {
display: flex; align-items: center; gap: 8px;
background: var(--surface-2);
border: 1px solid var(--hairline);
border-radius: 8px;
padding: 8px 10px;
margin: 0 0 12px;
transition: border-color .12s, box-shadow .12s;
}
/* -------- Sidebar Quick Recording Button -------- */
/* どこからでも 1クリックで対面録画開始できる action ボタン (nav tab ではない) */
/* 2026-07-13 v11 elite critic 修正: 紫グラデ + pulse → 紺ベタ 業務感 (Vercel Deploy風 削除) */
.sidebar-quick-rec {
display: flex; align-items: center; gap: 10px;
width: 100%;
background: #1E3A5F;
color: #fff;
border: none;
border-radius: 8px;
padding: 11px 14px;
margin: 0 0 18px;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 700;
font-size: 13px;
letter-spacing: 0.02em;
cursor: pointer;
box-shadow: 0 1px 3px rgba(26,33,56,0.10);
transition: background .15s;
}
.sidebar-quick-rec:hover {
background: #152B48;
}
.sidebar-quick-rec:active {
background: #0F2038;
}
.sidebar-quick-rec-dot {
width: 8px; height: 8px;
background: #DC2626;
border-radius: 50%;
flex-shrink: 0;
}
/* pulse animation は elite critic の 指摘 で 撤廃 */
@keyframes sidebar-quick-rec-pulse {
0%, 100% { opacity: 1; }
}
.sidebar-quick-rec-label {
flex: 1;
text-align: left;
}
.sidebar-quick-rec-pill {
background: rgba(255, 255, 255, 0.18);
font-size: 9.5px;
font-weight: 800;
padding: 2px 7px;
border-radius: 4px;
letter-spacing: 0.06em;
flex-shrink: 0;
}
/* 2026-07-10 qa-reviewer FAIL#1 fix: 1280px以下 で 「急遽 面談スタート」 ボタン が 2行折り返し → pill 消して label ellipsis */
@media (max-width: 1280px) {
.sidebar-quick-rec-pill { display: none; }
.sidebar-quick-rec { padding: 10px 12px; gap: 8px; }
.sidebar-quick-rec-label { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* 2026-07-10 design-reviewer Critical#1: 11タブ が 232px sidebar に収まる ように 高さ 圧縮
base rule に !important 付いてる ので override も !important 必要 */
.sidebar-nav .tab {
padding: 6px 10px !important;
font-size: 12.5px !important;
min-height: 34px !important;
gap: 10px !important;
}
.sidebar-nav .tab i[data-lucide], .sidebar-nav .tab svg.lucide {
width: 15px !important; height: 15px !important;
}
.sidebar-label { margin-top: 6px; margin-bottom: 4px; font-size: 10px; padding: 4px 12px 4px; }
.sidebar-group { margin-bottom: 8px; }
.sidebar-scroll { gap: 6px; }
}
.sidebar-search:focus-within {
border-color: var(--accent);
background: var(--surface);
box-shadow: 0 0 0 3px var(--accent-ring);
}
.sidebar-search i[data-lucide], .sidebar-search svg.lucide {
width: 14px !important; height: 14px !important;
color: var(--ink-3); flex-shrink: 0;
}
.sidebar-search input {
flex: 1; background: transparent; border: none; outline: none;
color: var(--ink); font-family: var(--font-body); font-size: 12.5px;
min-width: 0;
}
.sidebar-search input::placeholder { color: var(--muted); }
.kbd {
font-family: var(--font-mono);
font-size: 10px;
color: var(--ink-3);
background: var(--surface);
border: 1px solid var(--hairline-2);
padding: 2px 6px;
border-radius: 3px;
flex-shrink: 0;
}
/* -------- Group + label -------- */
.sidebar-group { margin-bottom: 18px; }
.sidebar-label {
display: flex; align-items: center; gap: 7px;
font-family: var(--font-display);
font-size: 11.5px; font-weight: 700;
letter-spacing: 0.08em; text-transform: uppercase;
color: var(--ink-3);
padding: 8px 14px 8px;
margin-bottom: 4px;
margin-top: 6px;
}
.sidebar-label i[data-lucide], .sidebar-label svg.lucide {
width: 12px !important; height: 12px !important;
color: var(--ink-3);
}
/* -------- Nav -------- */
.sidebar-nav {
display: flex; flex-direction: column; gap: 1px;
padding: 0;
background: transparent;
border: none;
}
.sidebar-nav .tab {
display: flex !important; align-items: center !important; gap: 12px !important;
padding: 11px 14px !important;
border-radius: 10px !important;
background: transparent !important;
color: var(--ink-2) !important;
font-family: var(--font-body) !important;
font-size: 14.5px !important; font-weight: 500 !important;
letter-spacing: 0 !important; text-transform: none !important;
cursor: pointer;
transition: background .12s, color .12s, transform .12s;
border: none !important;
margin: 0 !important;
position: relative;
min-height: 44px;
}
.sidebar-nav .tab span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-nav .tab::after { content: none !important; display: none !important; }
.sidebar-nav .tab::before { content: none !important; display: none !important; }
.sidebar-nav .tab:hover {
background: var(--surface-2) !important;
color: var(--ink) !important;
}
.sidebar-nav .tab.active {
background: var(--accent-soft) !important;
color: var(--accent-2) !important;
font-weight: 600 !important;
box-shadow: none !important;
border: none !important;
}
.sidebar-nav .tab i[data-lucide], .sidebar-nav .tab svg.lucide {
width: 18px !important; height: 18px !important;
color: var(--ink-3);
flex-shrink: 0;
transition: color .12s;
}
.sidebar-nav .tab.active i[data-lucide],
.sidebar-nav .tab.active svg.lucide {
color: var(--accent) !important;
filter: none !important;
}
/* counts — clean unified pill */
.nav-count {
font-family: var(--font-mono);
font-size: 11px; font-weight: 600;
background: transparent;
color: var(--ink-3);
padding: 0 6px;
min-width: 22px;
height: 20px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 10px;
border: none;
line-height: 1;
flex-shrink: 0;
}
.nav-count:empty { display: none; }
.nav-count.nav-count-alert {
background: #FEE2E2;
color: var(--critical);
border: 1px solid #FCA5A5;
font-weight: 700;
padding: 0 7px;
min-width: 22px;
}
.sidebar-nav .tab.active .nav-count {
background: var(--accent-soft);
color: var(--accent);
}
.sidebar-nav .tab.active .nav-count.nav-count-alert {
background: #FEE2E2;
color: var(--critical);
border-color: #FCA5A5;
}
.sidebar-nav .tab.active .nav-count { color: var(--accent-2); }
.sidebar-nav .tab.active .nav-count.nav-count-alert {
background: var(--critical);
color: #fff;
}
.nav-dot {
display: inline-block;
width: 6px !important;
height: 6px !important;
min-width: 6px;
border-radius: 50%;
background: var(--accent);
flex-shrink: 0;
padding: 0;
}
/* -------- Sidebar foot -------- */
/* 2026-07-10 impeccable 再設計: sticky 廃止 → 3-zone flex で 構造的に foot 固定
sidebar-foot は 常に flex column の 最下段 (flex-shrink:0 + margin-top:auto の fallback) */
.sidebar-foot {
margin-top: auto; /* fallback: scroll 空でも 下に押し出し */
padding: 10px 0 4px;
border-top: 1px solid var(--hairline);
display: flex;
flex-direction: column;
gap: 6px;
}
/* Short viewport (< 720px) — foot 密度化 (削除せず 圧縮) */
@media (max-height: 720px) {
.sidebar-foot { gap: 4px; padding-top: 8px; }
.upgrade-mini { padding: 6px 10px; }
.upgrade-mini-text { font-size: 11px; line-height: 1.35; }
.upgrade-mini-title { font-size: 10.5px; }
.real-mode-toggle { padding: 6px 10px; font-size: 11.5px; }
.sidebar-user { padding: 6px 8px; margin-top: 0; }
.user-avatar { width: 28px; height: 28px; font-size: 11px; }
.user-name { font-size: 12.5px; }
.user-role { font-size: 10.5px; }
}
/* Even shorter (< 600px) — real-mode label と upgrade bar を hide */
@media (max-height: 600px) {
.real-mode-label { display: none; }
.real-mode-toggle { justify-content: center; }
.upgrade-mini-bar { display: none; }
.upgrade-mini-text { display: flex; align-items: center; gap: 6px; }
}
/* Real mode toggle (デモ⇄実モード) */
.real-mode-toggle {
display: flex !important; align-items: center !important; gap: 8px !important;
width: 100%;
background: var(--warn-soft) !important;
border: 1px solid #F7D8AE !important;
padding: 8px 10px !important;
margin: 0 0 8px;
border-radius: 8px !important;
cursor: pointer;
font-family: var(--font-body);
transition: background .12s, border-color .12s;
}
.real-mode-toggle:hover {
background: #FFE8C3 !important;
border-color: var(--warn) !important;
}
.real-mode-toggle.real-mode-on {
background: var(--positive-soft) !important;
border-color: #ABEFC6 !important;
}
.real-mode-toggle i[data-lucide], .real-mode-toggle svg.lucide {
width: 14px !important; height: 14px !important;
color: var(--warn);
flex-shrink: 0;
}
.real-mode-toggle.real-mode-on i[data-lucide],
.real-mode-toggle.real-mode-on svg.lucide {
color: var(--positive);
}
.real-mode-label {
flex: 1;
font-size: 11.5px;
font-weight: 700;
color: var(--warn);
text-align: left;
}
.real-mode-toggle.real-mode-on .real-mode-label {
color: var(--positive);
}
.real-mode-switch {
width: 26px; height: 14px;
background: var(--hairline-2);
border-radius: 100px;
position: relative;
transition: background .15s;
}
.real-mode-toggle.real-mode-on .real-mode-switch {
background: var(--positive);
}
.real-mode-switch-knob {
position: absolute; top: 1px; left: 1px;
width: 12px; height: 12px;
background: #fff;
border-radius: 50%;
transition: left .15s;
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.real-mode-toggle.real-mode-on .real-mode-switch-knob {
left: 13px;
}
/* Real mode dialog */
.realmode-dialog {
background: var(--surface);
border-radius: 14px;
overflow: hidden;
max-width: 540px;
}
.realmode-head {
display: flex; align-items: center; justify-content: space-between;
padding: 18px 22px;
border-bottom: 1px solid var(--hairline);
}
.realmode-head h2 {
font-family: var(--font-display);
font-weight: 800; font-size: 18px;
letter-spacing: -0.018em;
color: var(--ink);
margin: 0;
}
.realmode-close {
background: transparent !important;
border: 1px solid var(--hairline-2) !important;
color: var(--ink-3) !important;
font-size: 20px !important;
width: 32px; height: 32px;
border-radius: 8px;
padding: 0 !important;
}
.realmode-body { padding: 18px 22px 24px; }
.realmode-toggle-row {
display: flex; align-items: flex-start; gap: 12px;
padding: 14px 16px;
background: var(--accent-faint);
border: 1px solid #DDE1FB;
border-radius: 10px;
margin-bottom: 22px;
cursor: pointer;
}
.realmode-toggle-row input[type="checkbox"] {
width: 18px; height: 18px;
margin-top: 2px;
accent-color: var(--accent);
flex-shrink: 0;
}
.realmode-toggle-label {
font-family: var(--font-body);
font-size: 13px; color: var(--ink-2);
line-height: 1.55;
}
.realmode-toggle-label strong { color: var(--ink); font-weight: 700; }
.realmode-section-title {
font-family: var(--font-display);
font-size: 12px; font-weight: 700;
letter-spacing: 0.06em; text-transform: uppercase;
color: var(--ink-3);
margin: 18px 0 8px;
}
.realmode-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.realmode-row {
display: flex; align-items: center; gap: 10px;
background: var(--surface-2);
border: 1px solid var(--hairline);
border-radius: 8px;
padding: 10px 14px;
}
.realmode-row-info { flex: 1; }
.realmode-row-name {
font-family: var(--font-display);
font-weight: 700; font-size: 14px;
color: var(--ink);
}
.realmode-row-meta {
font-family: var(--font-mono);
font-size: 11px; color: var(--ink-3);
margin-top: 2px;
}
.realmode-row-del {
background: transparent !important;
border: 1px solid transparent !important;
color: var(--ink-3) !important;
padding: 6px 8px !important;
border-radius: 6px;
}
.realmode-row-del:hover {
background: var(--critical-soft) !important;
color: var(--critical) !important;
}
.realmode-row-del i[data-lucide] { width: 14px !important; height: 14px !important; }
.realmode-empty {
font-family: var(--font-body);
font-size: 13px; color: var(--muted);
text-align: center;
padding: 16px;
background: var(--surface-2);
border: 1px dashed var(--hairline-2);
border-radius: 8px;
}
.realmode-form {
display: grid; gap: 10px;
}
.realmode-form label {
display: flex; flex-direction: column; gap: 4px;
font-family: var(--font-body);
font-size: 12px; font-weight: 600;
color: var(--ink-3);
}
.realmode-form label small {
font-weight: 400;
color: var(--muted);
margin-left: 4px;
}
.realmode-form input[type="text"],
.realmode-form input[type="number"] {
font-family: var(--font-body);
font-size: 14px;
padding: 10px 12px;
border: 1px solid var(--hairline-2);
border-radius: 8px;
background: var(--surface);
color: var(--ink);
}
.realmode-form input:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-ring);
}
.realmode-add-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
margin-top: 10px;
padding: 12px 18px !important;
background: var(--accent) !important;
background-image: linear-gradient(180deg, var(--accent-3), var(--accent)) !important;
color: #fff !important;
border: 1px solid var(--accent-2) !important;
border-radius: 10px !important;
font-family: var(--font-display);
font-weight: 700; font-size: 14px;
}
.realmode-add-btn:hover {
background-image: linear-gradient(180deg, var(--accent), var(--accent-2)) !important;
transform: translateY(-1px);
}
/* Mini upgrade button — collapsed by default */
.upgrade-mini {
display: flex !important; align-items: center !important; gap: 9px !important;
width: 100%;
background: transparent !important;
border: 1px solid transparent !important;
padding: 8px 10px !important;
margin: 4px 0 0;
border-radius: 8px !important;
cursor: pointer;
transition: background .12s, border-color .12s;
}
.upgrade-mini:hover {
background: var(--accent-faint) !important;
border-color: #DDE1FB !important;
}
.upgrade-mini-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 24px; height: 24px;
background: var(--accent);
border-radius: 6px;
flex-shrink: 0;
}
.upgrade-mini-icon i[data-lucide], .upgrade-mini-icon svg.lucide {
width: 13px !important; height: 13px !important;
color: #fff;
}
.upgrade-mini-text {
flex: 1; min-width: 0;
display: flex; flex-direction: column; gap: 4px;
}
.upgrade-mini-title {
font-family: var(--font-display);
font-weight: 600; font-size: 11.5px;
color: var(--ink); letter-spacing: -0.005em;
text-align: left;
}
.upgrade-mini-bar {
display: block;
height: 3px;
background: var(--hairline);
border-radius: 100px;
overflow: hidden;
}
.upgrade-mini-bar-fill {
display: block;
height: 100%;
background: var(--accent);
border-radius: 100px;
}
.upgrade-mini-chev {
width: 13px !important; height: 13px !important;
color: var(--ink-3); flex-shrink: 0;
}
/* Upgrade card — light, calm (kept for legacy) */
.upgrade-card { display: none; }
.upgrade-card-legacy {
position: relative;
background: var(--accent-faint);
border: 1px solid #DDE1FB;
border-radius: 10px;
padding: 12px 14px;
margin-bottom: 8px;
overflow: hidden;
}
.upgrade-shine { display: none; }
.upgrade-head {
display: flex; align-items: center; gap: 9px;
margin-bottom: 10px;
}
.upgrade-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 24px; height: 24px;
background: var(--accent);
border-radius: 6px;
flex-shrink: 0;
}
.upgrade-icon i[data-lucide], .upgrade-icon svg.lucide {
width: 13px !important; height: 13px !important;
color: #fff;
}
.upgrade-text { line-height: 1.2; min-width: 0; }
.upgrade-title {
font-family: var(--font-display);
font-weight: 700; font-size: 12.5px;
color: var(--ink);
letter-spacing: -0.005em;
}
.upgrade-sub {
font-family: var(--font-body);
font-size: 10.5px; color: var(--ink-3);
margin-top: 1px;
}
.upgrade-progress {
height: 4px;
background: var(--surface-2);
border-radius: 100px;
overflow: hidden;
margin-bottom: 8px;
}
.upgrade-progress-bar {
height: 100%;
background: var(--accent);
border-radius: 100px;
}
.upgrade-meta {
display: flex; justify-content: space-between; gap: 6px;
font-family: var(--font-body);
font-size: 10.5px; color: var(--ink-3);
margin-bottom: 10px;
}
.upgrade-btn {
display: flex; align-items: center; justify-content: center; gap: 5px;
font-family: var(--font-body);
font-size: 12px; font-weight: 500;
width: 100%;
background: var(--surface) !important;
color: var(--accent-2) !important;
border: 1px solid #DDE1FB !important;
padding: 6px 10px !important;
border-radius: 6px !important;
cursor: pointer;
transition: background .12s, color .12s;
}
.upgrade-btn i[data-lucide], .upgrade-btn svg.lucide {
width: 12px !important; height: 12px !important;
}
.upgrade-btn:hover {
background: var(--accent) !important;
color: #fff !important;
border-color: var(--accent) !important;
}
.upgrade-btn:hover i[data-lucide], .upgrade-btn:hover svg.lucide { color: #fff !important; }
/* User row */
.sidebar-user {
display: flex; align-items: center; gap: 10px;
padding: 8px 10px;
margin-top: 4px;
cursor: pointer;
border-radius: 8px;
transition: background .12s;
}
.sidebar-user:hover { background: var(--surface-2); }
.user-avatar-wrap { position: relative; flex-shrink: 0; }
.user-avatar {
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px;
background: var(--accent);
color: #fff;
font-family: var(--font-display);
font-weight: 700; font-size: 12px;
letter-spacing: -0.02em;
border-radius: 50%;
}
.user-status-dot {
position: absolute;
bottom: -1px; right: -1px;
width: 9px; height: 9px;
background: #22C55E;
border-radius: 50%;
border: 2px solid var(--surface);
}
.user-text { flex: 1; line-height: 1.2; min-width: 0; }
.user-name {
font-family: var(--font-display);
font-weight: 600; font-size: 13px;
color: var(--ink); letter-spacing: -0.005em;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 2026-07-10 design-reviewer Important#1: WCAG AA 対応 (11px + ink-3=3.2:1 → 11.5px + 70%不透明=4.6:1) */
.user-role {
display: flex; align-items: center; gap: 4px;
font-size: 11.5px; color: rgba(0, 0, 0, 0.7);
margin-top: 1px;
}
.user-role i[data-lucide], .user-role svg.lucide {
width: 11px !important; height: 11px !important;
color: var(--ink-3);
}
.user-chevron {
width: 14px !important; height: 14px !important;
color: var(--ink-3);
}
/* ------------------------------------------------------------------
Main + Topbar
------------------------------------------------------------------ */
.main {
display: flex; flex-direction: column;
height: 100vh;
overflow: hidden;
background: var(--bg);
}
.topbar {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 28px;
background: var(--surface);
border-bottom: 1px solid var(--hairline);
box-shadow: var(--shadow-xs);
flex-shrink: 0;
height: 56px;
}
.breadcrumb {
display: flex; align-items: center; gap: 8px;
font-family: var(--font-body);
font-size: 13px;
}
.crumb { color: var(--ink-3); }
.crumb.crumb-current {
color: var(--ink); font-weight: 600;
font-family: var(--font-display);
letter-spacing: -0.005em;
}
.breadcrumb i[data-lucide], .breadcrumb svg.lucide {
width: 14px !important; height: 14px !important;
color: var(--ink-3);
}
.topbar-right {
display: flex; align-items: center; gap: 8px;
}
.app-meta {
font-family: var(--font-mono);
font-size: 11.5px;
color: var(--ink-3);
background: var(--surface-2);
border: 1px solid var(--hairline);
padding: 5px 10px;
border-radius: var(--radius-sm);
}
.icon-btn {
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px;
background: transparent !important;
border: 1px solid transparent !important;
color: var(--ink-3) !important;
border-radius: var(--radius-md) !important;
padding: 0 !important;
cursor: pointer;
}
.icon-btn:hover {
background: var(--surface-2) !important;
border-color: var(--hairline) !important;
color: var(--ink) !important;
}
.icon-btn i[data-lucide], .icon-btn svg.lucide {
width: 16px !important; height: 16px !important;
}
.workspace {
flex: 1;
overflow-y: auto;
background: var(--bg);
}
.container {
padding: 24px 28px 56px;
max-width: 1400px;
margin: 0 auto;
}
/* ------------------------------------------------------------------
Hero / Focus block
------------------------------------------------------------------ */
.hero {
display: flex; align-items: flex-end; justify-content: space-between;
gap: 24px;
background-image:
linear-gradient(135deg, rgba(91,91,240,0.06) 0%, rgba(91,91,240,0.0) 50%),
linear-gradient(180deg, var(--surface) 0%, var(--surface) 100%);
border: 1px solid var(--hairline);
border-radius: var(--radius-xl);
padding: 28px 32px;
margin-bottom: 28px;
box-shadow: var(--shadow-sm);
position: relative;
overflow: hidden;
}
.hero::before {
content: ""; position: absolute; right: -120px; top: -120px;
width: 320px; height: 320px;
background-image: radial-gradient(circle, rgba(91,91,240,0.13) 0%, transparent 70%);
pointer-events: none;
}
.hero-text { flex: 1; min-width: 0; position: relative; }
.hero-eyebrow {
display: inline-block;
font-family: var(--font-display);
font-size: 11px; font-weight: 700;
letter-spacing: 0.12em; text-transform: uppercase;
color: var(--accent);
background: var(--accent-soft);
padding: 4px 10px;
border-radius: var(--radius-sm);
margin-bottom: 12px;
}
.hero-title {
font-family: var(--font-display);
font-weight: 800; font-size: 32px;
letter-spacing: -0.03em;
color: var(--ink);
margin: 0 0 6px;
line-height: 1.1;
}
.hero-sub {
font-family: var(--font-body);
font-size: 14px; color: var(--ink-3);
margin: 0; max-width: 60ch;
line-height: 1.55;
}
.hero-sub strong { color: var(--ink); font-weight: 600; }
.hero-actions {
display: flex; gap: 10px; flex-shrink: 0; position: relative;
}
.hero-actions .primary,
.hero-actions .ghost-btn,
.hero-actions button {
display: inline-flex !important; align-items: center !important; gap: 8px !important;
}
/* page-head (used on non-dashboard views) */
.page-head {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 24px; margin-bottom: 22px;
padding-bottom: 20px;
border-bottom: 1px solid var(--hairline);
}
.page-head .hero-title { font-size: 26px; }
.page-head .hero-sub { font-size: 13.5px; }
/* ------------------------------------------------------------------
Section titles
------------------------------------------------------------------ */
.container > .view.active { counter-reset: none; }
.section-title {
font-family: var(--font-display);
font-size: 18px; font-weight: 700;
letter-spacing: -0.018em;
color: var(--ink);
margin: 32px 0 4px;
padding: 0; border: none;
}
.section-title::after { content: none !important; display: none !important; }
.section-title[data-eyebrow]::before {
content: attr(data-eyebrow);
display: block;
font-family: var(--font-display);
font-size: 10.5px; font-weight: 700;
letter-spacing: 0.1em; text-transform: uppercase;
color: var(--accent);
margin-bottom: 6px;
}
.section-sub {
font-family: var(--font-body);
font-size: 13px; color: var(--ink-3);
margin: 0 0 18px; padding: 0;
max-width: 72ch; line-height: 1.55;
}
.hub-section-title {
font-family: var(--font-display);
font-weight: 700; font-size: 15px;
letter-spacing: -0.012em;
color: var(--ink);
border-bottom: 1px solid var(--hairline);
padding: 0 0 10px;
margin: 26px 0 14px;
}
.hub-section-title::before { content: none !important; }
.footnote {
font-family: var(--font-body) !important;
color: var(--muted);
border-top: 1px solid var(--hairline);
padding-top: 14px;
margin-top: 36px;
font-size: 12px;
}
.view > div[style*="font-size:11.5px"] {
font-family: var(--font-body) !important;
font-style: normal !important;
color: var(--muted) !important;
border-top: 1px solid var(--hairline);
padding-top: 14px;
margin-top: 32px !important;
font-size: 12px !important;
}
/* ------------------------------------------------------------------
KPI row
------------------------------------------------------------------ */
.kpi-row {
display: grid !important;
grid-template-columns: repeat(4, 1fr);
gap: 12px !important;
padding: 0; border: none;
margin: 0 0 8px 0;
}
.kpi-row > .kpi, .kpi-row > * {
background: var(--surface) !important;
border: 1px solid var(--hairline) !important;
border-radius: var(--radius-lg) !important;
padding: 18px 20px !important;
box-shadow: var(--shadow-xs) !important;
position: relative; overflow: hidden;
transition: box-shadow .15s, transform .15s, border-color .15s;
}
.kpi-row > *:hover {
border-color: var(--hairline-2) !important;
box-shadow: var(--shadow-sm) !important;
transform: translateY(-1px);
}
.kpi-row .kpi-label {
font-family: var(--font-body) !important;
font-size: 12px !important; font-weight: 500 !important;
letter-spacing: 0 !important; text-transform: none !important;
color: var(--ink-3) !important;
margin-bottom: 10px !important;
display: flex !important; align-items: center !important; gap: 6px !important;
}
.kpi-row .kpi-label svg.lucide,
.kpi-row .kpi-label i[data-lucide],
.kpi-row .kpi-icon {
width: 14px !important; height: 14px !important;
color: var(--ink-3) !important;
}
.kpi-row .kpi-value, .kpi-row .num {
font-family: var(--font-display) !important;
font-weight: 800 !important; font-size: 30px !important;
letter-spacing: -0.028em !important;
color: var(--ink) !important; line-height: 1.05 !important;
}
.kpi-row .kpi-sub {
font-family: var(--font-body) !important;
font-size: 12px !important;
color: var(--ink-3) !important;
margin-top: 6px !important;
}
.kpi.warn .kpi-value { color: var(--warn) !important; }
.kpi.warn { background: var(--warn-soft) !important; border-color: #F7D8AE !important; }
.kpi.good .kpi-value { color: var(--positive) !important; }
.kpi.good { background: var(--positive-soft) !important; border-color: #B3E4C9 !important; }
/* ------------------------------------------------------------------
Action list
------------------------------------------------------------------ */
.action-list {
background: var(--surface);
border: 1px solid var(--hairline);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-xs);
}
.action-list > .action-item, .action-list > * {
background: var(--surface) !important;
border: none !important;
border-bottom: 1px solid var(--hairline) !important;
border-radius: 0 !important;
padding: 18px 22px !important;
cursor: pointer !important;
position: relative !important;
transition: background .12s ease;
}
.action-list > *:last-child { border-bottom: none !important; }
.action-list > *::before, .action-list > *::after { content: none !important; display: none !important; }
.action-list > *:hover { background: var(--surface-2) !important; }
.action-list > *:first-child {
box-shadow: inset 3px 0 0 var(--accent);
background: linear-gradient(90deg, var(--accent-faint) 0%, var(--surface) 50%) !important;
}
/* ------------------------------------------------------------------
Pills
------------------------------------------------------------------ */
.status-pill, .pill, .badge, .btn-hint,
[class*="status-pill"] {
font-family: var(--font-body);
font-weight: 500; font-size: 11px;
letter-spacing: 0; text-transform: none;
padding: 3px 8px;
border-radius: var(--radius-sm);
border: 1px solid var(--hairline-2);
background: var(--surface-2);
color: var(--ink-2);
display: inline-flex; align-items: center; line-height: 1.4;
}
.status-pill.important {
background: var(--vv-red) !important;
color: #fff !important;
border-color: transparent !important;
font-weight: 800 !important; animation: none !important;
}
.status-pill.active {
background: var(--surface-2) !important;
color: var(--ink-2) !important;
border-color: var(--hairline-2) !important;
}
.status-pill.new {
background: #4338CA !important;
color: #FFFFFF !important;
border-color: #3730A3 !important;
font-weight: 700 !important;
}
.status-pill[class*="dormant"], .status-pill.dormant {
background: transparent !important;
color: var(--muted) !important;
border-color: var(--hairline-2) !important;
}
/* ------------------------------------------------------------------
Tables
------------------------------------------------------------------ */
table.clients {
border-collapse: separate; border-spacing: 0;
width: 100%; background: var(--surface);
border: 1px solid var(--hairline);
border-radius: var(--radius-lg);
overflow: hidden; margin-top: 12px;
box-shadow: var(--shadow-xs);
}
table.clients thead th {
background: var(--surface-2) !important;
font-family: var(--font-body) !important;
font-weight: 500 !important; font-size: 12px !important;
letter-spacing: 0 !important; text-transform: none !important;
color: var(--ink-3) !important;
border-bottom: 1px solid var(--hairline) !important;
padding: 12px 16px !important;
text-align: left;
}
table.clients tbody tr { cursor: pointer; transition: background .12s; }
table.clients tbody td {
border-bottom: 1px solid var(--hairline) !important;
padding: 18px 16px !important;
font-family: var(--font-body); font-size: 14.5px;
color: var(--ink); vertical-align: middle;
line-height: 1.5;
}
table.clients thead th {
font-size: 13px !important;
padding: 14px 16px !important;
}
table.clients tbody tr:last-child td { border-bottom: none !important; }
table.clients tbody tr:hover td { background: var(--surface-2) !important; }
/* ------------------------------------------------------------------
Toolbar
------------------------------------------------------------------ */
.client-toolbar {
background: transparent; border: none;
padding: 0 0 14px;
display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.client-toolbar input[type="search"],
.client-toolbar select {
background: var(--surface);
border: 1px solid var(--hairline-2);
border-radius: var(--radius-md);
font-family: var(--font-body); font-size: 13px;
padding: 9px 12px; color: var(--ink);
transition: border-color .12s, box-shadow .12s;
}
.client-toolbar input[type="search"] { min-width: 280px; }
.client-toolbar input[type="search"]:focus,
.client-toolbar select:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 4px var(--accent-ring);
}
.client-toolbar .count {
font-size: 12px; color: var(--muted);
letter-spacing: 0; text-transform: none;
font-family: var(--font-body);
}
/* ------------------------------------------------------------------
Buttons
------------------------------------------------------------------ */
button, .btn-mini {
font-family: var(--font-body);
font-size: 13px; font-weight: 500;
letter-spacing: 0; text-transform: none;
border: 1px solid var(--hairline-2);
background: var(--surface);
color: var(--ink);
padding: 9px 14px;
border-radius: var(--radius-md);
cursor: pointer;
transition: background .12s, border-color .12s, color .12s, box-shadow .12s, transform .12s;
}
button:hover {
background: var(--surface-2);
border-color: var(--ink-3);
color: var(--ink);
transform: none;
box-shadow: var(--shadow-xs);
}
/* ★ 2026-06-22 roundE: 既存 .primary を 新 CTA gold gradient で 一括 upgrade
個別 .btn-cta-primary に置換しなくても自動でゴールド化 */
button.primary {
background: linear-gradient(135deg, #C19A3A 0%, #9A5A18 100%) !important;
background-image: linear-gradient(135deg, #C19A3A 0%, #9A5A18 100%) !important;
color: #fff !important;
border: none !important;
border-radius: 99px !important;
padding: 12px 22px !important;
font-family: 'Hiragino Sans', 'Noto Sans JP', sans-serif !important;
font-size: 13.5px !important;
font-weight: 800 !important;
letter-spacing: 0.04em !important;
box-shadow:
0 6px 16px rgba(193,154,58,0.32),
inset 0 1px 0 rgba(255,255,255,0.22) !important;
transition: transform .15s, box-shadow .18s, filter .15s !important;
}
button.primary::after { content: none !important; }
button.primary:hover {
background-image: linear-gradient(135deg, #C19A3A 0%, #9A5A18 100%) !important;
color: #fff !important;
border: none !important;
transform: translateY(-2px) !important;
filter: brightness(1.05) !important;
box-shadow:
0 10px 26px rgba(193,154,58,0.42),
inset 0 1px 0 rgba(255,255,255,0.3) !important;
}
button.primary:active { transform: translateY(0) !important; }
button.primary:disabled {
opacity: 0.55 !important;
cursor: not-allowed !important;
transform: none !important;
filter: grayscale(0.4) !important;
}
/* ★ 2026-06-22 roundE: ghost / btn-mini を 下線アンダーラインスタイル に upgrade */
button.ghost, button.btn-mini {
background: transparent !important;
color: #6B7280 !important;
border: none !important;
border-bottom: 1.5px solid transparent !important;
border-radius: 0 !important;
padding: 8px 12px !important;
font-family: 'Hiragino Sans', sans-serif !important;
font-weight: 600 !important;
font-size: 13px !important;
transition: color .12s, border-color .12s !important;
}
button.ghost:hover, button.btn-mini:hover {
color: #1F2A3F !important;
background: transparent !important;
border-bottom-color: #C19A3A !important;
}
/* ★ 2026-06-22 roundE: .btn-rec-start (録画開始) は紫 → ゴールド統一 (急遽録画は紫キープ) */
button.btn-rec-start:not([data-rec-mode="inperson"]) {
background: linear-gradient(135deg, #C19A3A 0%, #9A5A18 100%) !important;
color: #fff !important;
border: none !important;
border-radius: 99px !important;
padding: 12px 22px !important;
font-family: 'Hiragino Sans', sans-serif !important;
font-weight: 800 !important;
font-size: 13.5px !important;
letter-spacing: 0.04em !important;
box-shadow: 0 6px 16px rgba(193,154,58,0.32), inset 0 1px 0 rgba(255,255,255,0.22) !important;
cursor: pointer !important;
transition: transform .15s, box-shadow .18s !important;
}
button.btn-rec-start:not([data-rec-mode="inperson"]):hover {
transform: translateY(-2px) !important;
box-shadow: 0 10px 26px rgba(193,154,58,0.42), inset 0 1px 0 rgba(255,255,255,0.3) !important;
}
#modal-draft-btn {
background: var(--accent) !important;
background-image: linear-gradient(180deg, var(--accent-3) 0%, var(--accent) 100%) !important;
color: #fff !important;
border: 1px solid var(--accent-2) !important;
box-shadow:
0 1px 0 rgba(255,255,255,0.18) inset,
0 4px 12px var(--accent-glow) !important;
font-family: var(--font-body) !important;
font-weight: 600 !important;
padding: 10px 18px !important;
}
/* ------------------------------------------------------------------
Howto banner — collapsed by default + dismissable
------------------------------------------------------------------ */
.howto-banner {
background: linear-gradient(135deg, #0F172A, #1E293B) !important;
border: 1px solid #1E293B !important;
border-radius: 10px !important;
padding: 0 !important;
margin-bottom: 16px;
box-shadow: 0 4px 16px rgba(15,23,42,0.18) !important;
position: relative;
overflow: hidden;
transition: border-color .15s, background .15s;
}
.howto-banner:hover { border-color: #334155 !important; }
.howto-banner::before { content: none !important; display: none !important; }
/* Collapsed (default) — only header visible, click to expand */
.howto-banner-head {
display: flex !important;
align-items: center !important;
gap: 10px !important;
padding: 10px 14px !important;
margin: 0 !important;
cursor: pointer;
flex-wrap: nowrap !important;
font-size: 12.5px;
position: relative;
}
.howto-banner-head::after {
content: "";
width: 14px; height: 14px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
margin-left: auto;
transition: transform .2s;
flex-shrink: 0;
}
.howto-banner.is-open .howto-banner-head::after { transform: rotate(180deg); }
.howto-banner-title {
font-family: var(--font-body);
font-weight: 800;
font-size: 13.5px;
letter-spacing: 0.02em;
color: #fff !important;
display: inline-flex; align-items: center; gap: 6px;
}
.howto-banner-title i[data-lucide], .howto-banner-title svg.lucide {
width: 13px !important; height: 13px !important;
color: #FFE9A8;
}
.howto-banner-subtitle {
font-family: var(--font-body);
color: rgba(255,255,255,0.78) !important; font-size: 11.5px;
}
.howto-banner-head::after {
background-image: url("data:image/svg+xml;utf8,") !important;
}
/* Steps — hidden by default */
.howto-steps {
display: none;
flex-direction: column;
gap: 8px;
padding: 4px 14px 14px;
}
.howto-banner.is-open .howto-steps { display: flex; }
.howto-step {
display: flex; align-items: flex-start; gap: 10px;
font-family: var(--font-body);
font-size: 12.5px; color: var(--ink-2); line-height: 1.55;
}
.howto-step strong { color: var(--ink); font-weight: 600; }
.howto-step-no {
background: var(--accent-soft) !important;
color: var(--accent-2) !important;
border: none !important;
font-family: var(--font-display) !important;
font-weight: 700 !important;
border-radius: 50% !important;
min-width: 18px !important; height: 18px !important;
display: inline-flex !important; align-items: center !important; justify-content: center !important;
font-size: 10px !important;
flex-shrink: 0; margin-top: 1px;
box-shadow: none !important;
}
/* Dismiss button (X) on the right of header */
.howto-banner-dismiss {
position: absolute;
top: 8px; right: 36px;
width: 22px; height: 22px;
background: transparent;
border: none;
padding: 0;
color: var(--ink-3);
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 4px;
font-size: 0;
}
.howto-banner-dismiss::before {
content: "✕";
font-size: 12px;
line-height: 1;
}
.howto-banner-dismiss:hover {
background: var(--surface-2);
color: var(--ink);
}
.howto-banner.is-dismissed { display: none !important; }
/* ------------------------------------------------------------------
Avatars
------------------------------------------------------------------ */
.action-list [class*="avatar"],
table.clients [class*="avatar"],
.action-list span[class*="initial"] {
background: var(--accent-soft) !important;
color: var(--accent) !important;
font-family: var(--font-display) !important;
font-weight: 700 !important;
border: none !important;
}
/* ------------------------------------------------------------------
LINE funnel
------------------------------------------------------------------ */
.funnel-grid {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 0 !important;
background: var(--surface);
border: 1px solid var(--hairline);
border-radius: var(--radius-lg);
overflow: hidden;
margin: 14px 0 22px;
box-shadow: var(--shadow-xs);
}
.funnel-step {
background: transparent !important;
border: none !important;
border-right: 1px solid var(--hairline) !important;
padding: 22px 18px !important;
text-align: left;
transition: background .12s;
position: relative;
}
.funnel-step:last-child { border-right: none !important; }
.funnel-step:hover { background: var(--surface-2); }
.funnel-step.highlight {
background: var(--accent-faint) !important;
box-shadow: inset 0 -3px 0 var(--accent);
}
.funnel-icon { font-size: 16px; color: var(--ink-3); margin-bottom: 4px; }
.funnel-label {
font-family: var(--font-body) !important;
font-size: 12px !important;
color: var(--ink-3) !important;
font-weight: 500 !important; margin-bottom: 8px !important;
}
.funnel-value {
font-family: var(--font-display) !important;
font-weight: 800 !important; font-size: 30px !important;
color: var(--ink) !important;
letter-spacing: -0.028em !important; line-height: 1.05;
}
.funnel-conv {
font-family: var(--font-body) !important;
font-size: 11.5px !important;
color: var(--positive) !important; font-weight: 600 !important;
}
.funnel-arrow { color: var(--hairline-2) !important; font-size: 14px; }
/* ------------------------------------------------------------------
Task board
------------------------------------------------------------------ */
.task-board {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 12px !important;
margin: 16px 0 24px;
}
.task-card {
background: var(--surface) !important;
border: 1px solid var(--hairline) !important;
border-radius: var(--radius-lg) !important;
padding: 20px !important;
position: relative;
cursor: pointer;
transition: box-shadow .15s, border-color .15s, transform .15s;
box-shadow: var(--shadow-xs) !important;
text-decoration: none;
}
.task-card:hover {
border-color: var(--hairline-2) !important;
box-shadow: var(--shadow-md) !important;
transform: translateY(-2px) !important;
}
.task-card.urgent {
background: var(--critical-soft) !important;
border-color: #F9C7C0 !important;
}
.task-card.urgent::before { content: none !important; }
.task-card.action {
background: var(--accent-faint) !important;
border-color: #DDE1FB !important;
}
.task-card.action::before { content: none !important; }
.task-card.muted {
background: var(--surface-2) !important;
color: var(--ink-3) !important; opacity: 1;
}
.task-icon {
font-size: 18px; color: var(--ink-3);
margin-bottom: 6px;
display: inline-flex; align-items: center; justify-content: center;
}
.task-icon svg.lucide, .task-icon i[data-lucide] {
width: 22px !important; height: 22px !important;
stroke-width: 1.6;
}
.task-card.urgent .task-icon, .task-card.urgent .task-icon svg.lucide { color: var(--critical) !important; }
.task-card.action .task-icon, .task-card.action .task-icon svg.lucide { color: var(--accent) !important; }
.task-card.muted .task-icon, .task-card.muted .task-icon svg.lucide { color: var(--muted) !important; }
.task-count {
font-family: var(--font-display) !important;
font-weight: 800 !important; font-size: 28px !important;
color: var(--ink) !important;
letter-spacing: -0.028em !important; line-height: 1.05;
}
.task-card.urgent .task-count { color: var(--critical) !important; }
.task-card.action .task-count { color: var(--accent-2) !important; }
.task-label {
font-family: var(--font-body) !important;
font-size: 11.5px !important;
color: var(--ink-3) !important;
font-weight: 500 !important;
}
.task-title {
font-family: var(--font-body) !important;
font-size: 13px !important; font-weight: 600 !important;
color: var(--ink-2) !important; margin-top: 6px;
}
.task-desc {
font-family: var(--font-body) !important;
color: var(--ink-3); font-size: 12.5px;
line-height: 1.5; margin-top: 2px;
}
/* ------------------------------------------------------------------
Segment grid
------------------------------------------------------------------ */
.segment-grid {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 12px;
}
.segment-card {
background: var(--surface) !important;
border: 1px solid var(--hairline) !important;
border-radius: var(--radius-lg) !important;
padding: 18px 20px !important;
cursor: pointer;
transition: box-shadow .15s, border-color .15s, transform .15s;
box-shadow: var(--shadow-xs) !important;
}
.segment-card:hover {
border-color: var(--hairline-2) !important;
box-shadow: var(--shadow-md) !important;
transform: translateY(-1px) !important;
}
.seg-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.seg-icon { font-size: 16px; color: var(--ink-3); }
.seg-name {
font-family: var(--font-display) !important;
font-weight: 700 !important; font-size: 14.5px !important;
color: var(--ink) !important; letter-spacing: -0.005em;
}
.seg-count {
margin-left: auto;
font-family: var(--font-display) !important;
font-size: 14px !important; font-weight: 700 !important;
color: var(--accent) !important;
background: var(--accent-soft);
padding: 2px 8px; border-radius: var(--radius-sm);
border: none;
}
.seg-desc {
font-family: var(--font-body) !important;
font-size: 12.5px; color: var(--ink-3); margin-bottom: 8px;
}
.seg-members { font-size: 11.5px; color: var(--muted); }
.seg-chip {
display: inline-block;
font-family: var(--font-body);
font-size: 11px; font-weight: 500;
background: var(--surface-2); color: var(--ink-2);
padding: 2px 8px; margin: 2px 2px 0 0;
border-radius: var(--radius-sm);
border: 1px solid var(--hairline);
}
.seg-chip.more { background: transparent; color: var(--ink-3); }
/* ------------------------------------------------------------------
Schedule / booking / birthday rows + board-section
------------------------------------------------------------------ */
.sched-table, .board-section {
background: var(--surface) !important;
border: 1px solid var(--hairline) !important;
border-radius: var(--radius-lg) !important;
overflow: hidden;
box-shadow: var(--shadow-xs) !important;
margin-bottom: 18px;
}
.board-section { padding: 0 !important; }
.board-section h2 {
display: flex !important; align-items: center !important; gap: 10px !important;
font-family: var(--font-display) !important;
font-size: 15px !important; font-weight: 700 !important;
color: var(--ink) !important;
margin: 0 !important;
padding: 14px 20px !important;
background: var(--surface-2) !important;
border-bottom: 1px solid var(--hairline) !important;
letter-spacing: -0.005em;
}
.board-section h2 svg.lucide, .board-section h2 i[data-lucide] {
width: 18px !important; height: 18px !important;
color: var(--accent);
}
.board-section > *:not(h2) { padding: 0 20px 20px !important; }
.sched-row, .booking-row, .bday-row, .step-row, .booking-rec-row {
background: transparent !important;
border-bottom: 1px solid var(--hairline) !important;
padding: 14px 0 !important;
cursor: pointer;
transition: background .12s, padding-left .12s;
box-shadow: none !important;
}
.sched-row:last-child, .booking-row:last-child,
.bday-row:last-child, .step-row:last-child { border-bottom: none !important; }
.sched-row:hover, .booking-row:hover, .bday-row:hover, .step-row:hover {
background: var(--surface-2) !important;
padding-left: 8px !important;
}
.sched-name, .booking-name {
font-family: var(--font-display) !important;
font-weight: 600 !important; font-size: 14px !important;
color: var(--ink) !important;
}
.sched-meta, .booking-meta {
font-family: var(--font-body) !important;
color: var(--ink-3); font-size: 12.5px;
}
.sched-next, .booking-when, .booking-time, .booking-date, .bday-date {
font-family: var(--font-body) !important;
font-size: 12.5px; color: var(--ink-2);
}
.bday-rel-tag, .booking-want {
background: var(--accent-soft);
color: var(--accent);
font-family: var(--font-body);
font-size: 11px; font-weight: 600;
padding: 2px 8px; border-radius: var(--radius-sm);
border: 1px solid #C7CDF5;
}
/* ------------------------------------------------------------------
line-card, line-status-pill, rec-pill
------------------------------------------------------------------ */
.line-card {
background: var(--surface) !important;
border: 1px solid var(--hairline) !important;
border-radius: var(--radius-lg) !important;
padding: 22px !important;
box-shadow: var(--shadow-xs) !important;
}
.line-card.empty {
background: var(--surface-2) !important;
border: 1px dashed var(--hairline-2) !important;
color: var(--muted);
font-family: var(--font-body) !important;
}
.line-status-pill {
font-family: var(--font-body);
font-size: 11px; font-weight: 500;
border: 1px solid var(--hairline-2);
background: var(--surface-2);
color: var(--ink-3);
padding: 3px 8px; border-radius: var(--radius-sm);
}
.line-status-pill.on {
background: var(--positive-soft) !important;
color: var(--positive) !important;
border-color: #ABEFC6 !important;
}
.rec-pill.recording {
background: var(--critical-soft) !important;
color: var(--critical) !important;
border: 1px solid #F9C7C0 !important;
padding: 3px 8px;
font-family: var(--font-body);
font-size: 11px; font-weight: 500;
border-radius: var(--radius-sm);
animation: none !important;
}
.rec-pill.saved {
background: var(--positive-soft) !important;
color: var(--positive) !important;
border: 1px solid #ABEFC6 !important;
padding: 3px 8px;
font-family: var(--font-body);
font-size: 11px; font-weight: 500;
border-radius: var(--radius-sm);
}
/* ------------------------------------------------------------------
Step rows
------------------------------------------------------------------ */
.step-head { display: flex; align-items: center; gap: 12px; }
.step-no {
background: var(--accent) !important;
color: #fff !important;
font-family: var(--font-display) !important;
font-weight: 700 !important;
width: 26px; height: 26px;
border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
font-size: 12px; border: none !important;
box-shadow: 0 2px 6px var(--accent-glow);
}
.step-title {
font-family: var(--font-display) !important;
font-weight: 600 !important; font-size: 14px !important;
color: var(--ink);
}
.step-day, .step-time {
font-family: var(--font-body);
font-size: 11.5px; color: var(--ink-3);
}
/* ------------------------------------------------------------------
Form rows
------------------------------------------------------------------ */
.q-row, .form-row { border-bottom: 1px solid var(--hairline); padding: 14px 0; }
.q-no, .q-label {
font-family: var(--font-body) !important;
font-size: 12px !important; color: var(--ink-3);
}
.q-main {
font-family: var(--font-display) !important;
font-weight: 700 !important; font-size: 14.5px !important;
color: var(--ink); letter-spacing: -0.005em;
}
/* ------------------------------------------------------------------
MODAL
------------------------------------------------------------------ */
.modal-overlay {
position: fixed !important;
inset: 0 !important;
display: none;
align-items: flex-start !important;
justify-content: center !important;
z-index: 1000 !important;
background: rgba(15, 23, 42, 0.55) !important;
/* 2026-07-28 design-reviewer Round 2: blur 撤廃 (BtoB admin に glassmorphism 不要) */
padding: 28px 16px !important;
overflow-y: auto;
}
.modal-overlay[style*="flex"] { display: flex !important; }
.modal {
background: var(--surface);
border: 1px solid var(--hairline-2);
border-radius: 16px;
box-shadow:
0 32px 80px rgba(15,23,42,0.30),
0 0 0 1px rgba(15,23,42,0.04);
max-width: 1320px;
width: 100%;
overflow: hidden;
}
/* ==================================================================
CLIENT DETAIL MODAL — premium 2-column layout
================================================================== */
.cd-modal {
display: grid;
grid-template-columns: 360px 1fr;
grid-template-rows: 100%; /* 2026-07-31 fix: 明示 rows で child が 親 高さ に 制約 (auto rows だと 中身 サイズ に 膨らんで overflow:auto 無効化) */
min-height: min(720px, 100vh - 40px);
height: calc(100vh - 40px); /* max-height だけ だと grid track が content に 膨らむ → 明示 height で 制約 */
max-height: calc(100vh - 40px);
overflow: hidden; /* 内部 は cd-left / cd-right が 独自 scroll */
position: relative;
}
@media (max-width: 900px) {
/* 2026-07-31 fix: 769-899px 中間 viewport で modal max-height=860px & 中身 scrollHeight=2227px、
overflow=visible の まま で 中身 が 切られて 底部 の 削除 button が 絶対 見えない bug 恒久 fix。
modal 自身 を 内部 scroll させ、 cd-left は 独自 scroll 解除 (二重ネスト 排除)。 */
.cd-modal {
grid-template-columns: 1fr;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
}
.cd-modal > .cd-left,
.cd-modal > .cd-right {
overflow: visible !important;
height: auto !important;
max-height: none !important;
min-height: 0 !important;
}
}
.cd-close {
position: absolute;
top: 14px; right: 14px;
width: 32px; height: 32px;
background: rgba(255,255,255,0.92) !important;
border: 1px solid var(--hairline) !important;
color: var(--ink-2) !important;
padding: 0 !important;
border-radius: 8px;
display: inline-flex; align-items: center; justify-content: center;
z-index: 10;
}
.cd-close:hover { background: var(--surface-2) !important; color: var(--ink) !important; border-color: var(--hairline-2) !important; }
.cd-close i[data-lucide], .cd-close svg.lucide { width: 16px !important; height: 16px !important; }
/* -------- LEFT (profile) -------- */
.cd-left {
background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
border-right: 1px solid var(--hairline);
padding: 32px 24px 24px;
overflow-y: auto;
display: flex;
flex-direction: column;
/* 2026-07-31 fix: grid 子要素 で overflow-y:auto が 効か なかった bug 恒久 fix。
min-height:0 が 無い と grid child が 内容 サイズ に 膨らみ、 スクロール しない → 底部 の 削除 button が 見え ない。 */
min-height: 0;
max-height: 100%;
}
.cd-profile-head { text-align: center; margin-bottom: 20px; }
.cd-profile-avatar {
width: 76px; height: 76px;
display: inline-flex; align-items: center; justify-content: center;
background-image: linear-gradient(135deg, var(--accent-3) 0%, var(--accent-2) 100%);
color: #fff;
font-family: var(--font-display);
font-weight: 800; font-size: 30px;
letter-spacing: -0.025em;
border-radius: 50%;
margin: 0 auto 14px;
box-shadow:
0 8px 24px rgba(91,91,240,0.40),
inset 0 1px 0 rgba(255,255,255,0.28);
}
.cd-profile-name {
font-family: var(--font-display);
font-weight: 800; font-size: 20px;
letter-spacing: -0.025em;
color: var(--ink); line-height: 1.2;
}
.cd-profile-honor {
font-family: var(--font-body);
font-weight: 500; font-size: 14px;
color: var(--ink-3);
}
.cd-profile-kana {
font-family: var(--font-body);
font-size: 12px;
color: var(--ink-3);
margin-top: 4px;
}
.cd-profile-pills {
display: flex; gap: 6px; justify-content: center;
margin-top: 12px; flex-wrap: wrap;
}
.cd-line-pill {
display: inline-flex; align-items: center; gap: 4px;
font-family: var(--font-body);
font-size: 11px; font-weight: 600;
background: #DCFCE7;
color: #047647;
border: 1px solid #ABEFC6;
padding: 3px 9px;
border-radius: 100px;
}
.cd-line-pill i[data-lucide] { width: 11px !important; height: 11px !important; }
/* Collapsed quick-actions (secondary contact channels) */
.cd-qa-collapse {
background: var(--surface);
border: 1px solid var(--hairline);
border-radius: 10px;
margin: 18px 0 22px;
overflow: hidden;
}
.cd-qa-summary {
display: flex; align-items: center; gap: 8px;
padding: 10px 14px;
cursor: pointer;
font-family: var(--font-body);
font-size: 12.5px; font-weight: 600;
color: var(--ink-2);
list-style: none;
}
.cd-qa-summary::-webkit-details-marker { display: none; }
.cd-qa-summary i[data-lucide], .cd-qa-summary svg.lucide {
width: 14px !important; height: 14px !important;
color: var(--ink-3);
}
.cd-qa-chev { margin-left: auto; transition: transform .2s; }
.cd-qa-collapse[open] .cd-qa-chev { transform: rotate(180deg); }
.cd-qa-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
padding: 0 12px 12px;
}
/* ★ 2026-06-22 roundI: 顧客モーダル クイックアクション (LINE/電話/Zoom/メール) を gold ghost capsule */
.cd-qa-btn {
display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important;
font-family: 'Hiragino Sans','Noto Sans JP',sans-serif !important;
font-size: 12.5px !important; font-weight: 700 !important;
background: #fff !important;
border: 1.5px solid #C19A3A !important;
color: #1F2A3F !important;
padding: 10px 14px !important;
border-radius: 99px !important;
cursor: pointer;
letter-spacing: 0.02em;
transition: background .12s, border-color .12s, color .12s, transform .12s !important;
box-shadow: 0 2px 6px rgba(193,154,58,0.12);
}
.cd-qa-btn:hover {
background: #FBF5E3 !important;
border-color: #9A5A18 !important;
color: #9A5A18 !important;
transform: translateY(-1px);
}
.cd-qa-btn i[data-lucide], .cd-qa-btn svg.lucide {
width: 14px !important; height: 14px !important;
color: #9A5A18 !important;
}
.cd-qa-btn:hover i[data-lucide], .cd-qa-btn:hover svg.lucide { color: #9A5A18 !important; }
.cd-qa-primary {
background: var(--accent) !important;
background-image: linear-gradient(180deg, var(--accent-3), var(--accent)) !important;
border-color: var(--accent-2) !important;
color: #fff !important;
box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 4px 10px rgba(91,91,240,0.30);
}
.cd-qa-primary i[data-lucide], .cd-qa-primary svg.lucide { color: #fff !important; }
.cd-qa-primary:hover {
background-image: linear-gradient(180deg, var(--accent), var(--accent-2)) !important;
border-color: var(--accent-2) !important;
}
.cd-profile-stats {
display: grid;
grid-template-columns: 1fr;
gap: 0;
background: var(--surface);
border: 1px solid var(--hairline);
border-radius: 10px;
overflow: hidden;
margin-bottom: 22px;
}
.cd-stat {
padding: 12px 14px;
border-bottom: 1px solid var(--hairline);
}
.cd-stat:last-child { border-bottom: none; }
.cd-stat-label {
font-family: var(--font-display);
font-size: 10.5px; font-weight: 600;
letter-spacing: 0.08em; text-transform: uppercase;
color: var(--ink-3);
margin-bottom: 4px;
}
.cd-stat-value {
font-family: var(--font-display);
font-weight: 800; font-size: 20px;
letter-spacing: -0.025em;
color: var(--ink); line-height: 1.05;
}
.cd-stat-unit {
font-family: var(--font-body);
font-size: 11.5px; font-weight: 500;
color: var(--ink-3); margin-left: 3px;
}
.cd-stat-sub {
font-family: var(--font-body);
font-size: 11px; color: var(--ink-3);
margin-top: 3px;
}
.cd-profile-section { margin-bottom: 20px; }
.cd-section-label {
font-family: var(--font-display);
font-size: 10.5px; font-weight: 700;
letter-spacing: 0.1em; text-transform: uppercase;
color: var(--ink-3);
margin-bottom: 8px;
}
.cd-dl {
margin: 0;
display: grid;
grid-template-columns: 70px 1fr;
row-gap: 6px; column-gap: 10px;
}
.cd-dl dt {
font-family: var(--font-body);
font-size: 11.5px; font-weight: 500;
color: var(--ink-3);
margin: 0; padding: 0;
}
.cd-dl dd {
font-family: var(--font-body);
font-size: 12.5px; color: var(--ink);
margin: 0; padding: 0;
}
.cd-family-list { display: flex; flex-direction: column; gap: 8px; }
.cd-family-row {
display: flex; align-items: center; gap: 10px;
background: var(--surface);
border: 1px solid var(--hairline);
border-radius: 8px;
padding: 8px 12px;
}
.cd-family-avatar {
width: 30px; height: 30px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--accent-soft);
color: var(--accent);
font-family: var(--font-display);
font-weight: 700; font-size: 12px;
border-radius: 50%;
}
.cd-family-body { line-height: 1.25; }
.cd-family-name {
font-family: var(--font-display);
font-weight: 600; font-size: 13px;
color: var(--ink); letter-spacing: -0.005em;
}
.cd-family-meta {
font-family: var(--font-body);
font-size: 11px; color: var(--ink-3);
margin-top: 1px;
}
.cd-note {
background: var(--surface-2);
border: 1px solid var(--hairline);
border-left: 3px solid var(--accent-3);
border-radius: 6px;
padding: 10px 12px;
font-family: var(--font-body);
font-size: 12.5px; color: var(--ink-2);
line-height: 1.55; font-style: italic;
}
/* Cancellation history (warning tone) */
.cd-section-label-warn {
display: flex; align-items: center; gap: 5px;
color: var(--warn) !important;
}
.cd-section-label-warn i[data-lucide], .cd-section-label-warn svg.lucide {
width: 13px !important; height: 13px !important;
color: var(--warn);
}
.cd-cancel-list {
display: flex; flex-direction: column; gap: 6px;
}
.cd-cancel-row {
background: var(--warn-soft);
border: 1px solid #F7D8AE;
border-left: 3px solid var(--warn);
border-radius: 8px;
padding: 9px 12px;
}
.cd-cancel-date {
font-family: var(--font-display);
font-weight: 700; font-size: 12px;
color: var(--warn);
display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
}
.cd-cancel-rel {
font-family: var(--font-body);
font-size: 10.5px; font-weight: 500;
color: var(--ink-3);
}
.cd-cancel-slot {
font-family: var(--font-body);
font-size: 11px;
color: var(--ink-2);
margin-top: 2px;
}
.cd-cancel-reason {
display: flex; align-items: center; gap: 5px;
font-family: var(--font-body);
font-size: 11px;
color: var(--ink-3);
margin-top: 4px;
font-style: italic;
}
.cd-cancel-reason i[data-lucide], .cd-cancel-reason svg.lucide {
width: 11px !important; height: 11px !important;
color: var(--warn);
}
.cd-empty {
color: var(--muted);
font-family: var(--font-body);
font-size: 12.5px;
padding: 14px 0;
text-align: center;
}
/* -------- RIGHT (activity) -------- */
.cd-right {
padding: 32px 32px 60px; /* 2026-07-11 v8: bottom padding UP so 最後 の div (empty state hint 等) が 切れない */
overflow-y: auto;
max-height: calc(100vh - 40px);
-webkit-overflow-scrolling: touch;
scrollbar-gutter: stable;
position: relative;
/* mask で 下端 に 「まだ 続く」 を 視覚 化 (scrollTop で JS で 有効化) */
}
.cd-right.has-more-below::after {
content: "";
position: sticky;
bottom: 0; left: 0; right: 0;
display: block;
height: 32px;
margin-top: -32px;
background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.96));
pointer-events: none;
z-index: 5;
}
/* ========== AI Flow: 3-step guided action (replaces .cd-nba) ==========
* 2026-07-31 v20260731Q owner NG「クソみたい / 見えねえ」対応:
* 旧 紫 グラデ base (0F1117→1A1F2E) は PC 幅 で 生き残っており contrast 破壊 の 元凶。
* 全 幅 で 白 background に 統一、 border + subtle shadow で card 感 を 出す。
* mobile 用 の line 9334 白 override は そのまま (重複 無害) */
.cd-flow {
position: relative;
background: #FFFFFF;
color: #0F1729;
border: 1px solid #E5E7EB;
border-radius: 16px;
padding: 22px 24px;
margin-bottom: 22px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(15,23,41,0.05);
}
.cd-flow::before { display: none; }
.cd-flow-eyebrow {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
margin-bottom: 12px;
position: relative;
}
.cd-flow-eyebrow-pill {
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--font-display);
font-size: 10.5px; font-weight: 800;
letter-spacing: 0.12em; text-transform: uppercase;
color: #FFFFFF;
background: linear-gradient(135deg, #C19A3A, #A0822E);
border: none;
padding: 4px 10px;
border-radius: 100px;
}
.cd-flow-eyebrow-pill i[data-lucide] { width: 12px !important; height: 12px !important; }
.cd-flow-eyebrow-pri {
font-family: var(--font-display);
font-size: 10.5px; font-weight: 800;
letter-spacing: 0.1em; text-transform: uppercase;
background: #FEE2E2;
color: #991B1B;
border: none;
padding: 3px 9px;
border-radius: 4px;
}
.cd-flow-title {
font-family: var(--font-display);
font-weight: 900; font-size: 22px;
letter-spacing: -0.028em;
margin-bottom: 6px;
position: relative;
color: #0F1729;
}
.cd-flow-reason {
font-family: var(--font-body);
font-size: 13px;
color: #4B5563;
line-height: 1.55;
margin-bottom: 20px;
position: relative;
font-weight: 500;
}
/* 3-step flow */
.cd-flow-steps {
display: grid;
grid-template-columns: 1fr 16px 1fr 16px 1fr;
align-items: stretch;
gap: 4px;
position: relative;
margin-bottom: 14px;
}
.cd-flow-step {
display: flex; align-items: center; gap: 10px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.10);
border-radius: 12px;
padding: 12px 14px;
text-align: left;
font-family: var(--font-body);
cursor: default;
transition: background .15s, border-color .15s, transform .15s;
min-width: 0;
}
.cd-flow-step-active {
background-image: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
border-color: var(--accent-3);
cursor: pointer;
box-shadow:
0 8px 22px rgba(91,91,240,0.45),
inset 0 1px 0 rgba(255,255,255,0.18);
}
.cd-flow-step-active:hover {
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(91,91,240,0.55), inset 0 1px 0 rgba(255,255,255,0.2);
}
.cd-flow-step-next { background: rgba(255,255,255,0.10) !important; border: 1px solid rgba(255,255,255,0.22) !important; }
.cd-flow-step-next .cd-flow-step-label { color: rgba(255,255,255,0.95) !important; }
.cd-flow-step-next .cd-flow-step-sub { color: rgba(255,255,255,0.72) !important; }
.cd-flow-step-next .cd-flow-step-no { background: rgba(255,255,255,0.22) !important; color: #fff !important; }
.cd-flow-step-no {
display: inline-flex; align-items: center; justify-content: center;
width: 28px; height: 28px;
background: rgba(255,255,255,0.15);
border-radius: 50%;
font-family: var(--font-display);
font-weight: 800; font-size: 13px;
color: #fff;
flex-shrink: 0;
}
.cd-flow-step-active .cd-flow-step-no {
background: #fff;
color: var(--accent);
}
.cd-flow-step-no i[data-lucide], .cd-flow-step-no svg.lucide {
width: 13px !important; height: 13px !important;
}
.cd-flow-step-body {
display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1;
}
.cd-flow-step-label {
font-family: var(--font-display);
font-weight: 700; font-size: 13px;
color: #fff;
letter-spacing: -0.005em;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cd-flow-step-sub {
font-family: var(--font-body);
font-size: 11px;
color: rgba(255,255,255,0.65);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cd-flow-step-icon {
width: 16px !important; height: 16px !important;
color: rgba(255,255,255,0.85);
flex-shrink: 0;
}
.cd-flow-arrow {
width: 16px !important; height: 16px !important;
color: rgba(255,255,255,0.30);
align-self: center;
}
.cd-flow-edit {
margin-top: 4px;
background: rgba(255,255,255,0.06) !important;
color: #fff !important;
border: 1px solid rgba(255,255,255,0.12) !important;
display: inline-flex !important; align-items: center !important; gap: 6px !important;
padding: 8px 14px !important;
font-size: 12px !important;
}
.cd-flow-edit:hover {
background: rgba(255,255,255,0.12) !important;
border-color: rgba(255,255,255,0.20) !important;
}
.cd-flow-edit i[data-lucide], .cd-flow-edit svg.lucide {
width: 13px !important; height: 13px !important;
}
.cd-flow-empty .cd-flow-title { font-size: 16px; color: #B3B8C3; font-weight: 600; }
.cd-flow-empty .cd-flow-steps { grid-template-columns: 1fr; }
@media (max-width: 800px) {
.cd-flow-steps {
grid-template-columns: 1fr;
gap: 6px;
}
.cd-flow-arrow { display: none; }
}
/* Legacy .cd-nba (kept harmless) */
.cd-nba {
position: relative;
background-image: linear-gradient(135deg, #0F1117 0%, #1A1F2E 100%);
color: #fff;
border: 1px solid #232838;
border-radius: 16px;
padding: 20px 24px;
margin-bottom: 22px;
overflow: hidden;
box-shadow: 0 12px 32px rgba(15,17,23,0.18);
}
.cd-nba::before {
content: ""; position: absolute;
right: -60px; top: -60px;
width: 200px; height: 200px;
background: radial-gradient(circle, rgba(91,91,240,0.30) 0%, transparent 65%);
pointer-events: none;
}
.cd-nba-head {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
margin-bottom: 12px;
position: relative;
}
.cd-nba-rank {
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--font-display);
font-size: 10.5px; font-weight: 700;
letter-spacing: 0.12em; text-transform: uppercase;
color: #A78BFA;
background: rgba(167,139,250,0.18);
border: 1px solid rgba(167,139,250,0.32);
padding: 4px 10px;
border-radius: 100px;
}
.cd-nba-rank i[data-lucide], .cd-nba-rank svg.lucide {
width: 12px !important; height: 12px !important;
}
.cd-nba-pri {
font-family: var(--font-display);
font-size: 10.5px; font-weight: 700;
letter-spacing: 0.1em; text-transform: uppercase;
background: rgba(248,113,113,0.18);
color: #FCA5A5;
border: 1px solid rgba(248,113,113,0.32);
padding: 3px 9px;
border-radius: 4px;
}
.cd-nba-title {
font-family: var(--font-display);
font-weight: 800; font-size: 22px;
letter-spacing: -0.028em;
margin-bottom: 8px;
position: relative;
color: #fff;
}
.cd-nba-reason {
display: flex; align-items: flex-start; gap: 6px;
font-family: var(--font-body);
font-size: 12.5px; color: #B3B8C3;
line-height: 1.5;
margin-bottom: 16px;
position: relative;
}
.cd-nba-reason i[data-lucide], .cd-nba-reason svg.lucide {
width: 14px !important; height: 14px !important;
color: #A78BFA; flex-shrink: 0; margin-top: 1px;
}
.cd-nba-cta {
display: flex; gap: 10px; flex-wrap: wrap;
position: relative;
}
.cd-nba-cta .primary,
.cd-nba-cta .ghost-btn {
display: inline-flex !important; align-items: center !important; gap: 7px !important;
}
.cd-nba-cta .primary i[data-lucide],
.cd-nba-cta .ghost-btn i[data-lucide] {
width: 14px !important; height: 14px !important;
}
.cd-nba-cta .ghost-btn {
background: rgba(255,255,255,0.08) !important;
color: #fff !important;
border: 1px solid rgba(255,255,255,0.15) !important;
}
.cd-nba-cta .ghost-btn:hover {
background: rgba(255,255,255,0.15) !important;
border-color: rgba(255,255,255,0.25) !important;
}
.cd-nba-empty .cd-nba-title { font-size: 16px; color: #B3B8C3; font-weight: 600; }
/* Tabs */
.cd-tabs {
display: flex; gap: 4px;
border-bottom: 1px solid var(--hairline);
margin-bottom: 18px;
}
.cd-tab {
font-family: var(--font-body) !important;
font-size: 13px !important;
font-weight: 500 !important;
background: transparent !important;
border: none !important;
color: var(--ink-3) !important;
padding: 10px 14px !important;
border-radius: 0 !important;
cursor: pointer;
border-bottom: 2px solid transparent !important;
margin-bottom: -1px;
transition: color .12s, border-color .12s;
}
.cd-tab:hover { color: var(--ink) !important; background: transparent !important; }
.cd-tab.cd-tab-active {
color: var(--ink) !important;
font-weight: 700 !important;
border-bottom-color: var(--accent) !important;
}
.cd-tab-count {
background: var(--surface-2);
color: var(--ink-3);
font-family: var(--font-mono);
font-size: 11px;
padding: 1px 6px;
border-radius: 100px;
margin-left: 4px;
border: 1px solid var(--hairline);
}
.cd-tab.cd-tab-active .cd-tab-count {
background: var(--accent-soft);
color: var(--accent-2);
border-color: #C7CDF5;
}
/* Tab panels */
.cd-tabpanels { }
.cd-overview-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 12px;
}
@media (max-width: 700px) {
.cd-overview-grid { grid-template-columns: 1fr; }
}
.cd-card {
background: var(--surface);
border: 1px solid var(--hairline);
border-radius: 12px;
overflow: hidden;
margin-bottom: 12px;
box-shadow: var(--shadow-xs);
}
.cd-card-head {
display: flex; align-items: center; gap: 8px;
background: var(--surface-2);
border-bottom: 1px solid var(--hairline);
padding: 11px 16px;
font-family: var(--font-display);
font-size: 13px; font-weight: 700;
letter-spacing: -0.005em;
color: var(--ink);
}
.cd-card-head i[data-lucide], .cd-card-head svg.lucide {
width: 14px !important; height: 14px !important;
color: var(--accent);
}
.cd-card-badge {
margin-left: auto;
background: var(--accent-soft);
color: var(--accent-2);
font-family: var(--font-mono);
font-size: 10.5px; font-weight: 600;
padding: 1px 7px;
border-radius: 100px;
border: 1px solid #C7CDF5;
}
.cd-card-body { padding: 12px 16px; }
/* Actions */
.cd-action-row {
display: grid;
grid-template-columns: 8px 1fr auto;
gap: 10px;
align-items: flex-start;
padding: 10px 0;
border-bottom: 1px solid var(--hairline);
}
.cd-action-row:last-child { border-bottom: none; }
.cd-action-bullet {
width: 6px; height: 6px;
background: var(--accent);
border-radius: 50%;
margin-top: 6px;
}
.cd-action-text {
font-family: var(--font-display);
font-weight: 600; font-size: 13px;
color: var(--ink); letter-spacing: -0.005em;
margin-bottom: 2px;
}
.cd-action-reason {
font-family: var(--font-body);
font-size: 11.5px;
color: var(--ink-3); line-height: 1.45;
}
.cd-action-pri {
font-family: var(--font-display);
font-size: 10px; font-weight: 700;
letter-spacing: 0.08em; text-transform: uppercase;
background: var(--accent-soft);
color: var(--accent-2);
border: 1px solid #C7CDF5;
padding: 2px 7px;
border-radius: 4px;
white-space: nowrap;
}
/* Next event card */
.cd-next-ev {
padding: 10px 0;
border-bottom: 1px solid var(--hairline);
}
.cd-next-ev:last-child { border-bottom: none; }
.cd-next-ev-rel {
font-family: var(--font-display);
font-weight: 800; font-size: 18px;
letter-spacing: -0.025em;
color: var(--accent);
}
.cd-next-ev-label {
font-family: var(--font-display);
font-weight: 600; font-size: 13px;
color: var(--ink); margin-top: 3px;
}
.cd-next-ev-meta {
font-family: var(--font-body);
font-size: 11.5px;
color: var(--ink-3); margin-top: 3px;
}
.cd-next-ev-mini {
display: flex; gap: 10px; align-items: center;
padding: 6px 0;
font-size: 12px;
}
.cd-next-ev-mini-rel {
font-family: var(--font-display);
font-weight: 700; color: var(--accent-2);
min-width: 64px;
}
.cd-next-ev-mini-label { color: var(--ink-2); }
/* Category chips */
.cd-cat-summary { display: flex; flex-wrap: wrap; gap: 6px; }
.cd-cat-chip {
display: inline-flex; align-items: center; gap: 6px;
background: var(--surface-2);
border: 1px solid var(--hairline);
border-radius: 100px;
padding: 4px 10px;
font-family: var(--font-body);
font-size: 12px;
}
.cd-cat-dot {
width: 7px; height: 7px;
border-radius: 50%;
background: var(--accent);
}
.cd-cat-education .cd-cat-dot { background: #4F46E5; }
.cd-cat-retirement .cd-cat-dot { background: #3730A3; }
.cd-cat-pension .cd-cat-dot { background: #7C84E8; }
.cd-cat-mortgage .cd-cat-dot { background: #A5ADEF; }
.cd-cat-inheritance .cd-cat-dot { background: #C7CDF5; }
.cd-cat-elder .cd-cat-dot { background: #DEE2F8; }
.cd-cat-name {
font-weight: 600; color: var(--ink); font-family: var(--font-display);
}
.cd-cat-count {
font-family: var(--font-mono);
font-size: 11px; color: var(--ink-3);
}
/* Timeline list */
.cd-tl-list { display: flex; flex-direction: column; }
.cd-tl-row {
display: grid;
grid-template-columns: 16px 92px 1fr auto auto;
gap: 12px;
align-items: center;
padding: 10px 4px;
border-bottom: 1px solid var(--hairline);
}
.cd-tl-row:last-child { border-bottom: none; }
.cd-tl-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--accent);
margin: 0 auto;
}
.cd-tl-dot.cd-cat-education { background: #4F46E5; }
.cd-tl-dot.cd-cat-retirement { background: #3730A3; }
.cd-tl-dot.cd-cat-pension { background: #7C84E8; }
.cd-tl-dot.cd-cat-mortgage { background: #A5ADEF; }
.cd-tl-dot.cd-cat-inheritance { background: #C7CDF5; }
.cd-tl-dot.major { box-shadow: 0 0 0 3px var(--accent-soft); }
.cd-tl-date {
font-family: var(--font-mono);
font-size: 11.5px;
color: var(--ink-3);
}
.cd-tl-label {
font-family: var(--font-display);
font-weight: 600; font-size: 13px;
color: var(--ink); letter-spacing: -0.005em;
}
.cd-tl-who {
font-family: var(--font-body);
font-size: 11.5px;
color: var(--ink-3);
}
.cd-tl-rel {
font-family: var(--font-display);
font-size: 11.5px; font-weight: 600;
color: var(--accent-2);
background: var(--accent-soft);
padding: 2px 8px;
border-radius: 100px;
border: 1px solid #C7CDF5;
}
.cd-tl-more {
font-family: var(--font-body);
font-size: 12px; color: var(--muted);
text-align: center; padding: 12px 0;
}
/* Proposals */
.cd-prop-list { display: flex; flex-direction: column; }
.cd-prop-row {
display: grid;
grid-template-columns: 92px 1fr auto;
gap: 12px;
padding: 12px 4px;
align-items: center;
border-bottom: 1px solid var(--hairline);
}
.cd-prop-row:last-child { border-bottom: none; }
.cd-prop-date {
font-family: var(--font-mono);
font-size: 11.5px;
color: var(--ink-3);
}
.cd-prop-title {
font-family: var(--font-display);
font-weight: 600; font-size: 13.5px;
color: var(--ink); letter-spacing: -0.005em;
}
.cd-prop-result {
font-family: var(--font-display);
font-size: 10.5px; font-weight: 700;
letter-spacing: 0.08em; text-transform: uppercase;
padding: 3px 9px;
border-radius: 4px;
border: 1px solid currentColor;
}
.cd-prop-result-成約 { background: var(--positive-soft); color: var(--positive); border-color: #ABEFC6; }
.cd-prop-result-検討中 { background: var(--warn-soft); color: var(--warn); border-color: #F7D8AE; }
.cd-prop-result-見送り, .cd-prop-result-断り { background: var(--surface-2); color: var(--ink-3); border-color: var(--hairline-2); }
/* ==================================================================
LINE history (chat-style)
================================================================== */
.cd-line-head {
display: flex; align-items: center; gap: 14px;
background: var(--surface);
border: 1px solid var(--hairline);
border-radius: 12px;
padding: 12px 16px;
margin-bottom: 12px;
flex-wrap: wrap;
}
.cd-line-stats {
display: flex; align-items: center; gap: 14px;
flex: 1;
}
.cd-line-stat {
display: inline-flex; align-items: center; gap: 5px;
font-family: var(--font-body);
font-size: 12px; color: var(--ink-3);
}
.cd-line-stat strong {
font-family: var(--font-display);
font-weight: 700;
color: var(--ink);
font-size: 13.5px;
}
.cd-line-stat i[data-lucide] {
width: 13px !important; height: 13px !important;
color: var(--ink-3);
}
.cd-line-new {
display: inline-flex !important; align-items: center !important; gap: 5px !important;
font-family: var(--font-body) !important;
font-size: 12px !important; font-weight: 600 !important;
background: var(--accent) !important;
background-image: linear-gradient(180deg, var(--accent-3), var(--accent)) !important;
color: #fff !important;
border: 1px solid var(--accent-2) !important;
padding: 6px 12px !important;
border-radius: 8px !important;
box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 2px 6px rgba(91,91,240,.25);
}
.cd-line-new i[data-lucide] { width: 13px !important; height: 13px !important; }
.cd-line-new:hover {
background-image: linear-gradient(180deg, var(--accent), var(--accent-2)) !important;
transform: translateY(-1px);
}
.cd-line-chat {
background: #7FB8E1;
background-image: linear-gradient(180deg, #7FB8E1 0%, #9AC8E8 100%);
border-radius: 12px;
padding: 18px 14px;
display: flex; flex-direction: column; gap: 14px;
max-height: 540px;
overflow-y: auto;
border: 1px solid #5A99C4;
}
.cd-line-chat::-webkit-scrollbar { width: 6px; }
.cd-line-chat::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.4); border-radius: 3px; }
.cd-line-msg {
display: flex; flex-direction: column;
max-width: 78%;
position: relative;
}
.cd-line-in { align-self: flex-start; }
.cd-line-out { align-self: flex-end; align-items: flex-end; }
.cd-line-label {
font-family: var(--font-display);
font-size: 10px; font-weight: 700;
letter-spacing: 0.08em; text-transform: uppercase;
background: rgba(15,23,42,0.65);
color: #fff;
padding: 2px 7px;
border-radius: 4px;
margin-bottom: 4px;
align-self: flex-start;
}
.cd-line-out .cd-line-label { align-self: flex-end; }
.cd-line-bubble {
background: #fff;
color: var(--ink);
font-family: 'Noto Sans JP', sans-serif;
font-size: 13.5px;
line-height: 1.6;
padding: 11px 14px;
border-radius: 4px 18px 18px 18px;
box-shadow: 0 1px 2px rgba(0,0,0,0.10);
word-wrap: break-word;
white-space: pre-wrap;
}
.cd-line-out .cd-line-bubble {
background: #B5E281;
background-image: linear-gradient(180deg, #C1E893, #A4D86E);
color: #1A2A14;
border-radius: 18px 4px 18px 18px;
}
.cd-line-ts {
font-family: var(--font-mono);
font-size: 10.5px;
color: rgba(15, 23, 42, 0.6);
margin-top: 4px;
}
.cd-line-out .cd-line-ts { color: rgba(15, 23, 42, 0.65); }
.cd-line-empty {
text-align: center;
color: rgba(15, 23, 42, 0.55);
font-family: var(--font-body);
font-size: 12.5px;
padding: 24px 0;
align-self: stretch;
}
/* Composer (送信フォーム) — オーナーfb 2026-06-25: 入力欄を目立たせる */
.cd-line-composer {
margin-top: 14px;
background: linear-gradient(180deg, #FFFBF1 0%, #FBF5E3 100%);
border: 2px solid #C19A3A;
border-radius: 14px;
padding: 14px;
box-shadow: 0 4px 14px rgba(193,154,58,0.18), inset 0 1px 0 rgba(255,255,255,0.6);
}
.cd-line-composer::before {
content: '✉ メッセージ送信';
display: block;
font-family: var(--font-display, 'Noto Sans JP', sans-serif);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.16em;
color: #8B6F26;
margin-bottom: 8px;
text-transform: uppercase;
}
.cd-line-composer textarea {
width: 100%;
min-height: 110px;
font-family: var(--font-body);
font-size: 15px;
line-height: 1.6;
padding: 14px 16px;
border: 2px solid #E8D9A8;
border-radius: 10px;
background: #fff;
color: var(--ink);
resize: vertical;
outline: none;
transition: border-color .15s, box-shadow .15s;
box-shadow: inset 0 1px 3px rgba(31,42,63,0.04);
}
.cd-line-composer textarea::placeholder {
color: #B79866;
font-weight: 500;
}
.cd-line-composer textarea:focus {
border-color: #C19A3A;
background: #fff;
box-shadow: 0 0 0 4px rgba(193,154,58,0.18), inset 0 1px 3px rgba(31,42,63,0.04);
}
.cd-line-composer-foot {
display: flex; align-items: center; justify-content: space-between;
margin-top: 8px;
gap: 10px;
}
.cd-line-composer-meta {
font-family: var(--font-body);
font-size: 11.5px;
color: var(--ink-3);
}
/* ★ 2026-06-22 roundI: 顧客モーダル内 LINE送信ボタンを gold CTA 統一 */
.cd-line-send-btn {
display: inline-flex; align-items: center; gap: 8px;
font-family: 'Hiragino Sans','Noto Sans JP',sans-serif !important;
font-size: 13px; font-weight: 800;
letter-spacing: 0.04em;
background: linear-gradient(135deg, #C19A3A 0%, #9A5A18 100%) !important;
background-image: linear-gradient(135deg, #C19A3A 0%, #9A5A18 100%) !important;
color: #fff !important;
border: none !important;
padding: 10px 22px !important;
border-radius: 99px !important;
cursor: pointer;
box-shadow: 0 6px 16px rgba(193,154,58,0.32), inset 0 1px 0 rgba(255,255,255,0.22);
transition: transform .15s, box-shadow .18s, filter .15s;
}
.cd-line-send-btn:hover:not(:disabled) {
transform: translateY(-2px);
filter: brightness(1.05);
box-shadow: 0 10px 26px rgba(193,154,58,0.42), inset 0 1px 0 rgba(255,255,255,0.3);
}
.cd-line-send-btn:disabled {
background: #E5E7EB !important;
background-image: none !important;
border: none !important;
cursor: not-allowed;
box-shadow: none;
opacity: 0.55;
color: #9CA3AF !important;
}
.cd-line-send-btn i[data-lucide] {
width: 13px !important; height: 13px !important;
}
.cd-line-msg-status {
margin-top: 8px;
font-family: var(--font-body);
font-size: 12px;
color: var(--ink-3);
min-height: 16px;
text-align: center;
}
/* ==================================================================
Home section header (デカ目)
================================================================== */
.section-header {
display: flex; align-items: flex-end; justify-content: space-between;
gap: 20px;
margin: 32px 0 18px;
padding-bottom: 14px;
border-bottom: 2px solid var(--accent);
}
.section-eyebrow-pill {
display: inline-block;
font-family: var(--font-display);
font-size: 10.5px; font-weight: 800;
letter-spacing: 0.18em; text-transform: uppercase;
background: var(--accent);
color: #fff;
padding: 4px 12px;
border-radius: 100px;
margin-bottom: 10px;
}
.section-big-title {
font-family: var(--font-display);
font-weight: 800; font-size: 28px;
letter-spacing: -0.025em;
color: var(--ink);
margin: 0 0 6px;
line-height: 1.2;
}
.section-big-sub {
font-family: var(--font-body);
font-size: 14px;
color: var(--ink-3);
margin: 0;
line-height: 1.55;
}
.section-header-aside { flex-shrink: 0; }
.section-counter {
display: inline-block;
font-family: var(--font-display);
font-weight: 800; font-size: 22px;
letter-spacing: -0.025em;
color: var(--accent);
background: var(--accent-soft);
padding: 8px 16px;
border-radius: 100px;
border: 1px solid #C7CDF5;
}
/* ==================================================================
Home collapsible (折り畳み式セクション)
================================================================== */
.home-collapsible {
background: var(--surface);
border: 1px solid var(--hairline);
border-radius: 14px;
margin: 18px 0;
overflow: hidden;
box-shadow: var(--shadow-xs);
}
.home-collapsible-summary {
display: flex; align-items: center; gap: 10px;
padding: 16px 20px;
cursor: pointer;
list-style: none;
font-family: var(--font-display);
font-weight: 700; font-size: 16px;
letter-spacing: -0.012em;
color: var(--ink);
background: var(--surface);
transition: background .12s;
}
.home-collapsible-summary::-webkit-details-marker { display: none; }
.home-collapsible-summary:hover { background: var(--surface-2); }
.home-collapsible-summary i[data-lucide]:first-child {
width: 18px !important; height: 18px !important;
color: var(--accent);
}
.home-collapsible-chev {
margin-left: auto;
width: 16px !important; height: 16px !important;
color: var(--ink-3);
transition: transform .2s;
}
.home-collapsible[open] .home-collapsible-chev { transform: rotate(180deg); }
.home-collapsible[open] .home-collapsible-summary {
border-bottom: 1px solid var(--hairline);
}
.home-collapsible-body {
padding: 18px 20px 20px;
}
/* ==================================================================
Senior-friendly client cards (50代対応・大型・直感的)
================================================================== */
.senior-stack {
display: flex; flex-direction: column;
gap: 16px;
}
.senior-card {
background: var(--surface);
border: 1px solid var(--hairline);
border-radius: 16px;
padding: 22px 24px 20px;
box-shadow: var(--shadow-sm);
position: relative;
cursor: pointer;
transition: box-shadow .15s, border-color .15s, transform .15s;
}
.senior-card:hover {
border-color: var(--accent);
box-shadow: var(--shadow-md);
transform: translateY(-1px);
}
.senior-card-top {
background-image: linear-gradient(135deg, var(--accent-faint) 0%, var(--surface) 60%);
border-color: var(--accent);
border-width: 2px;
}
.senior-card-rank {
position: absolute;
top: 18px; right: 22px;
width: 32px; height: 32px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--accent);
color: #fff;
font-family: var(--font-display);
font-weight: 800; font-size: 14px;
border-radius: 50%;
box-shadow: 0 2px 6px rgba(91,91,240,0.30);
}
.senior-card-top .senior-card-rank {
width: 38px; height: 38px;
font-size: 16px;
}
.senior-card-head {
display: flex; align-items: center; gap: 14px;
margin-bottom: 18px;
padding-right: 50px;
}
.senior-card-avatar {
width: 56px; height: 56px;
display: inline-flex; align-items: center; justify-content: center;
background-image: linear-gradient(135deg, var(--accent-3), var(--accent-2));
color: #fff;
font-family: var(--font-display);
font-weight: 800; font-size: 22px;
letter-spacing: -0.02em;
border-radius: 50%;
flex-shrink: 0;
}
.senior-card-id { flex: 1; min-width: 0; }
.senior-card-name {
font-family: var(--font-display);
font-weight: 800; font-size: 22px;
letter-spacing: -0.018em;
color: var(--ink);
line-height: 1.2;
}
.senior-card-honor {
font-family: var(--font-body);
font-weight: 500; font-size: 17px;
color: var(--ink-2);
margin-left: 4px;
}
.senior-card-sub {
font-family: var(--font-body);
font-size: 14px;
color: var(--ink-3);
margin-top: 6px;
line-height: 1.5;
}
/* KPI section */
.senior-card-kpi {
margin-bottom: 16px;
padding: 12px 14px;
background: var(--surface-2);
border: 1px solid var(--hairline);
border-radius: 12px;
}
.senior-kpi-label {
font-family: var(--font-display);
font-size: 12px; font-weight: 700;
letter-spacing: 0.04em;
color: var(--ink-3);
margin-bottom: 8px;
}
.senior-kpi-badges {
display: flex; flex-wrap: wrap; gap: 6px;
}
.senior-kpi-badge {
display: inline-flex; align-items: center; gap: 5px;
padding: 6px 12px;
font-family: var(--font-display);
font-weight: 700; font-size: 13px;
border-radius: 100px;
letter-spacing: -0.005em;
}
.senior-kpi-badge i[data-lucide], .senior-kpi-badge svg.lucide {
width: 13px !important; height: 13px !important;
}
.senior-kpi-critical {
background: var(--critical-soft);
color: var(--critical);
border: 1px solid #F9C7C0;
}
.senior-kpi-warn {
background: var(--warn-soft);
color: var(--warn);
border: 1px solid #F7D8AE;
}
.senior-kpi-good {
background: var(--positive-soft);
color: var(--positive);
border: 1px solid #ABEFC6;
}
.senior-kpi-info {
background: var(--accent-soft);
color: var(--accent-2);
border: 1px solid #C7CDF5;
}
/* Action section */
.senior-card-action {
margin-bottom: 18px;
}
.senior-action-label {
font-family: var(--font-display);
font-size: 12px; font-weight: 700;
letter-spacing: 0.04em;
color: var(--ink-3);
margin-bottom: 6px;
}
.senior-action-text {
font-family: var(--font-display);
font-weight: 700; font-size: 18px;
letter-spacing: -0.012em;
color: var(--ink);
line-height: 1.4;
margin-bottom: 8px;
}
.senior-action-reason {
font-family: var(--font-body);
font-size: 14px;
color: var(--ink-2);
line-height: 1.55;
margin-bottom: 10px;
}
.senior-action-event, .senior-action-contact {
font-family: var(--font-body);
font-size: 13.5px;
color: var(--ink-3);
line-height: 1.6;
}
.senior-action-event strong, .senior-action-contact strong {
color: var(--ink);
font-weight: 700;
}
/* Buttons (50代対応・大型) */
.senior-card-buttons {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.senior-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
padding: 14px 18px;
font-family: var(--font-display);
font-weight: 700; font-size: 15px;
letter-spacing: -0.005em;
border-radius: 12px;
cursor: pointer;
transition: transform .12s, box-shadow .12s, background .12s;
border: 1px solid transparent;
min-height: 52px;
}
.senior-btn i[data-lucide], .senior-btn svg.lucide {
width: 17px !important; height: 17px !important;
}
.senior-btn-primary {
background: var(--accent) !important;
background-image: linear-gradient(180deg, var(--accent-3), var(--accent)) !important;
color: #fff !important;
border-color: var(--accent-2) !important;
box-shadow: 0 4px 12px rgba(91,91,240,0.30);
}
.senior-btn-primary:hover {
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(91,91,240,0.40);
}
.senior-btn-secondary {
background: var(--surface) !important;
color: var(--ink) !important;
border-color: var(--hairline-2) !important;
}
.senior-btn-secondary:hover {
background: var(--surface-2) !important;
border-color: var(--ink-3) !important;
}
/* Client modal: KPI section in left column */
.cd-kpi-section {
margin: 18px 0 22px;
padding: 14px 16px;
background: var(--surface);
border: 1px solid var(--hairline);
border-radius: 12px;
box-shadow: var(--shadow-xs);
}
.cd-kpi-label {
font-family: var(--font-display);
font-size: 11px; font-weight: 700;
letter-spacing: 0.08em; text-transform: uppercase;
color: var(--ink-3);
margin-bottom: 10px;
}
.cd-kpi-badges {
display: flex; flex-wrap: wrap; gap: 6px;
}
@media (max-width: 700px) {
.senior-card { padding: 18px 16px; }
.senior-card-name { font-size: 20px; }
.senior-action-text { font-size: 16px; }
.senior-card-buttons { grid-template-columns: 1fr; }
}
/* ==================================================================
KPI Board (業務 KPI / タスク管理)
================================================================== */
#kpi-board { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 1100px) { #kpi-board { grid-template-columns: 1fr 1fr; } }
.kpi-card {
background: var(--surface);
border: 1px solid var(--hairline);
border-radius: var(--radius-lg);
padding: 22px 22px 18px;
box-shadow: var(--shadow-sm);
position: relative;
overflow: hidden;
}
.kpi-card::before {
content: ""; position: absolute;
left: 0; top: 0; bottom: 0;
width: 4px;
background: var(--accent);
}
.kpi-tone-good::before { background: var(--positive); }
.kpi-tone-warn::before { background: var(--warn); }
.kpi-tone-critical::before { background: var(--critical); }
.kpi-card-head {
display: flex; align-items: flex-start; gap: 14px;
margin-bottom: 14px;
}
.kpi-card-icon {
width: 44px; height: 44px;
display: inline-flex; align-items: center; justify-content: center;
background-image: linear-gradient(135deg, var(--accent-3), var(--accent-2));
color: #fff;
border-radius: 12px;
flex-shrink: 0;
box-shadow: 0 6px 16px rgba(91,91,240,0.30);
}
.kpi-tone-good .kpi-card-icon { background-image: linear-gradient(135deg, #4ADE80, #047647); box-shadow: 0 6px 16px rgba(4,118,71,0.30); }
.kpi-tone-warn .kpi-card-icon { background-image: linear-gradient(135deg, #FBBF24, #B5530F); box-shadow: 0 6px 16px rgba(181,83,15,0.30); }
.kpi-tone-critical .kpi-card-icon { background-image: linear-gradient(135deg, #F87171, #DC2B2B); box-shadow: 0 6px 16px rgba(220,43,43,0.30); }
.kpi-card-icon i[data-lucide], .kpi-card-icon svg.lucide {
width: 22px !important; height: 22px !important;
color: #fff;
}
.kpi-card-meta { flex: 1; min-width: 0; }
.kpi-card-title {
font-family: var(--font-display);
font-weight: 800; font-size: 17px;
letter-spacing: -0.02em;
color: var(--ink);
line-height: 1.25;
}
.kpi-card-goal {
font-family: var(--font-body);
font-size: 12.5px;
color: var(--ink-3);
margin-top: 4px;
}
.kpi-card-stats {
text-align: right;
flex-shrink: 0;
}
.kpi-stat-num {
font-family: var(--font-display);
font-weight: 800; font-size: 30px;
letter-spacing: -0.028em;
color: var(--ink);
line-height: 1;
}
.kpi-tone-warn .kpi-stat-num { color: var(--warn); }
.kpi-tone-critical .kpi-stat-num { color: var(--critical); }
.kpi-tone-good .kpi-stat-num { color: var(--positive); }
.kpi-stat-unit {
font-family: var(--font-body);
font-size: 12px; font-weight: 500;
color: var(--ink-3);
margin-left: 3px;
}
.kpi-stat-label {
font-family: var(--font-display);
font-size: 10.5px; font-weight: 700;
letter-spacing: 0.08em; text-transform: uppercase;
color: var(--ink-3);
margin-top: 2px;
}
.kpi-card-progress { margin-bottom: 14px; }
.kpi-progress-bar {
height: 6px;
background: var(--surface-3);
border-radius: 100px;
overflow: hidden;
}
.kpi-progress-fill {
height: 100%;
background-image: linear-gradient(90deg, var(--accent-3), var(--accent));
border-radius: 100px;
}
.kpi-tone-good .kpi-progress-fill { background-image: linear-gradient(90deg, #4ADE80, var(--positive)); }
.kpi-tone-warn .kpi-progress-fill { background-image: linear-gradient(90deg, #FBBF24, var(--warn)); }
.kpi-tone-critical .kpi-progress-fill { background-image: linear-gradient(90deg, #F87171, var(--critical)); }
.kpi-progress-meta {
font-family: var(--font-body);
font-size: 11.5px;
color: var(--ink-3);
margin-top: 6px;
}
.kpi-progress-meta strong { color: var(--ink); font-weight: 700; }
.kpi-card-intent {
display: flex; align-items: center; gap: 8px;
background: var(--accent-faint);
border: 1px solid #DDE1FB;
border-radius: 8px;
padding: 10px 12px;
font-family: var(--font-body);
font-size: 12px;
color: var(--accent-2);
margin-bottom: 14px;
line-height: 1.5;
}
.kpi-card-intent i[data-lucide] {
width: 14px !important; height: 14px !important;
color: var(--accent); flex-shrink: 0;
}
.kpi-task-list {
display: flex; flex-direction: column; gap: 8px;
}
.kpi-task {
display: flex; align-items: center; gap: 12px;
background: var(--surface-2);
border: 1px solid var(--hairline);
border-radius: 10px;
padding: 10px 14px;
cursor: pointer;
transition: background .12s, border-color .12s;
}
.kpi-task:hover { background: var(--surface); border-color: var(--hairline-2); }
.kpi-task-avatar {
width: 32px; height: 32px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--accent-soft);
color: var(--accent);
font-family: var(--font-display);
font-weight: 700; font-size: 13px;
border-radius: 50%;
flex-shrink: 0;
}
.kpi-task-body { flex: 1; min-width: 0; }
.kpi-task-name {
font-family: var(--font-display);
font-weight: 700; font-size: 13.5px;
color: var(--ink);
letter-spacing: -0.005em;
display: flex; align-items: center; gap: 8px;
flex-wrap: wrap;
}
.kpi-task-meta {
font-family: var(--font-body);
font-size: 11.5px;
color: var(--ink-3);
margin-top: 2px;
}
.kpi-task-btn {
display: inline-flex !important; align-items: center !important; gap: 5px !important;
font-size: 11.5px !important;
padding: 7px 11px !important;
}
.kpi-task-btn i[data-lucide] { width: 13px !important; height: 13px !important; }
.kpi-empty {
display: flex; align-items: center; justify-content: center; gap: 8px;
background: var(--positive-soft);
border: 1px solid #ABEFC6;
border-radius: 10px;
padding: 14px;
font-family: var(--font-body);
font-size: 13px;
color: var(--positive);
}
.kpi-empty i[data-lucide] {
width: 16px !important; height: 16px !important;
}
/* ==================================================================
AI ACTION BRIEF MODAL — guided 3-step flow per client
================================================================== */
.aib-modal {
background: var(--surface);
border-radius: 16px;
overflow: hidden;
position: relative;
}
.aib-header {
display: flex; align-items: center; justify-content: space-between; gap: 24px;
background-image: linear-gradient(135deg, #0F1117 0%, #1A1F2E 100%);
color: #fff;
padding: 28px 32px;
position: relative;
overflow: hidden;
}
.aib-header::before {
content: ""; position: absolute;
right: -80px; top: -80px;
width: 320px; height: 320px;
background: radial-gradient(circle, rgba(91,91,240,0.32) 0%, transparent 65%);
pointer-events: none;
}
.aib-header-left { position: relative; min-width: 0; flex: 1; }
.aib-eyebrow {
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--font-display);
font-size: 10.5px; font-weight: 700;
letter-spacing: 0.14em; text-transform: uppercase;
color: #A78BFA;
background: rgba(167,139,250,0.18);
border: 1px solid rgba(167,139,250,0.32);
padding: 4px 11px;
border-radius: 100px;
margin-bottom: 12px;
}
.aib-eyebrow i[data-lucide] { width: 12px !important; height: 12px !important; }
.aib-title {
font-family: var(--font-display);
font-weight: 800; font-size: 26px;
letter-spacing: -0.028em;
color: #fff;
margin: 0 0 6px;
line-height: 1.15;
}
.aib-sub {
font-family: var(--font-body);
font-size: 13px;
color: #B3B8C3;
line-height: 1.55;
}
.aib-client-chip {
display: flex; align-items: center; gap: 10px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 12px;
padding: 10px 14px;
flex-shrink: 0;
position: relative;
}
.aib-client-avatar {
display: inline-flex; align-items: center; justify-content: center;
width: 36px; height: 36px;
background-image: linear-gradient(135deg, var(--accent-3), var(--accent-2));
color: #fff;
font-family: var(--font-display);
font-weight: 800; font-size: 14px;
border-radius: 50%;
}
.aib-client-name {
font-family: var(--font-display);
font-weight: 700; font-size: 14px;
color: #fff;
}
.aib-client-meta {
font-family: var(--font-body);
font-size: 11.5px;
color: rgba(255,255,255,0.65);
margin-top: 2px;
}
.aib-body {
padding: 28px 32px 32px;
display: flex; flex-direction: column; gap: 18px;
}
@media (max-width: 700px) {
.aib-header { flex-direction: column; align-items: flex-start; padding: 22px; }
.aib-body { padding: 20px 22px 22px; }
.aib-title { font-size: 22px; }
}
/* Steps */
.aib-step {
background: var(--surface);
border: 1px solid var(--hairline);
border-radius: 14px;
overflow: hidden;
box-shadow: var(--shadow-xs);
}
.aib-step-final {
background-image: linear-gradient(180deg, var(--accent-faint) 0%, var(--surface) 100%);
border-color: #C7CDF5;
}
.aib-step-head {
display: flex; align-items: center; gap: 14px;
padding: 16px 20px;
border-bottom: 1px solid var(--hairline);
background: var(--surface);
}
.aib-step-final .aib-step-head { background: transparent; border-bottom-color: #DDE1FB; }
.aib-step-no {
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px;
background: var(--accent);
color: #fff;
font-family: var(--font-display);
font-weight: 800; font-size: 14px;
border-radius: 50%;
flex-shrink: 0;
box-shadow: 0 4px 10px var(--accent-glow);
}
.aib-step-head > div:nth-child(2) { flex: 1; min-width: 0; }
.aib-step-title {
font-family: var(--font-display);
font-weight: 700; font-size: 15px;
letter-spacing: -0.012em;
color: var(--ink);
}
.aib-step-sub {
font-family: var(--font-body);
font-size: 12px;
color: var(--ink-3);
margin-top: 2px;
}
.aib-step-status {
display: inline-flex; align-items: center; gap: 4px;
font-family: var(--font-display);
font-size: 10.5px; font-weight: 700;
letter-spacing: 0.08em; text-transform: uppercase;
padding: 4px 9px;
border-radius: 100px;
flex-shrink: 0;
}
.aib-step-status i[data-lucide] { width: 12px !important; height: 12px !important; }
.aib-step-done {
background: var(--positive-soft);
color: var(--positive);
border: 1px solid #ABEFC6;
}
.aib-step-ready {
background: var(--accent);
color: #fff;
border: 1px solid var(--accent-2);
animation: aib-pulse 1.8s ease-in-out infinite;
}
@keyframes aib-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(91,91,240,0.4); }
50% { box-shadow: 0 0 0 6px rgba(91,91,240,0); }
}
.aib-step-body { padding: 18px 20px; }
/* Verdict block (STEP 1) */
.aib-verdict {
background: var(--accent-faint);
border: 1px solid #DDE1FB;
border-left: 3px solid var(--accent);
border-radius: 10px;
padding: 14px 18px;
margin-bottom: 14px;
}
.aib-verdict-label {
font-family: var(--font-display);
font-size: 10.5px; font-weight: 700;
letter-spacing: 0.1em; text-transform: uppercase;
color: var(--accent-2);
margin-bottom: 6px;
}
.aib-verdict-action {
font-family: var(--font-display);
font-weight: 800; font-size: 18px;
letter-spacing: -0.02em;
color: var(--ink);
margin-bottom: 8px;
}
.aib-verdict-reason {
display: flex; align-items: flex-start; gap: 6px;
font-family: var(--font-body);
font-size: 12.5px;
color: var(--ink-2);
line-height: 1.55;
}
.aib-verdict-reason i[data-lucide] {
width: 14px !important; height: 14px !important;
color: var(--accent); flex-shrink: 0; margin-top: 2px;
}
.aib-context {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
list-style: none;
margin: 0; padding: 0;
}
@media (max-width: 700px) { .aib-context { grid-template-columns: 1fr; } }
.aib-context li {
display: flex; align-items: center; gap: 8px;
font-family: var(--font-body);
font-size: 12.5px;
color: var(--ink-2);
padding: 8px 10px;
background: var(--surface-2);
border-radius: 8px;
border: 1px solid var(--hairline);
}
.aib-context li strong { color: var(--ink); font-weight: 700; }
.aib-context li i[data-lucide] {
width: 14px !important; height: 14px !important;
color: var(--ink-3); flex-shrink: 0;
}
/* Draft (STEP 2) */
.aib-draft-meta {
display: flex; align-items: center; gap: 10px;
margin-bottom: 10px;
flex-wrap: wrap;
}
.aib-intent {
font-family: var(--font-display);
font-size: 11px; font-weight: 700;
letter-spacing: 0.08em; text-transform: uppercase;
background: var(--warn-soft);
color: var(--warn);
border: 1px solid #F7D8AE;
padding: 3px 9px;
border-radius: 4px;
}
.aib-tone-label {
font-family: var(--font-body);
font-size: 11.5px;
color: var(--ink-3);
}
.aib-tone-btn {
margin-left: auto !important;
display: inline-flex !important; align-items: center !important; gap: 5px !important;
font-family: var(--font-body);
font-size: 11.5px !important; font-weight: 500;
background: var(--surface-2) !important;
border: 1px solid var(--hairline) !important;
color: var(--ink-2) !important;
padding: 5px 10px !important;
border-radius: 6px !important;
}
.aib-tone-btn i[data-lucide] { width: 12px !important; height: 12px !important; }
.aib-tone-btn:hover { background: var(--surface) !important; border-color: var(--ink-3) !important; }
.aib-textarea-wrap {
background: #FAFAF9;
border: 1px solid var(--hairline);
border-radius: 10px;
overflow: hidden;
margin-bottom: 14px;
}
.aib-textarea {
width: 100%;
min-height: 200px;
font-family: 'Noto Sans JP', sans-serif;
font-size: 13.5px;
line-height: 1.85;
padding: 16px 18px;
border: none;
background: transparent;
resize: vertical;
color: var(--ink);
outline: none;
}
.aib-textarea:focus { background: #fff; }
.aib-attach {
display: flex; flex-direction: column; gap: 6px;
}
.aib-attach-item {
display: flex; align-items: center; gap: 8px;
font-family: var(--font-body);
font-size: 12.5px;
color: var(--ink-2);
padding: 8px 12px;
background: var(--surface-2);
border: 1px solid var(--hairline);
border-radius: 8px;
cursor: pointer;
transition: border-color .12s, background .12s;
}
.aib-attach-item:hover { border-color: var(--hairline-2); }
.aib-attach-item input[type="checkbox"] {
width: 14px; height: 14px;
accent-color: var(--accent);
flex-shrink: 0;
}
.aib-attach-item i[data-lucide] {
width: 13px !important; height: 13px !important;
color: var(--ink-3);
}
.aib-attach-item input[type="checkbox"]:checked + i[data-lucide] {
color: var(--accent);
}
.aib-preview-note {
display: flex; align-items: center; gap: 6px;
font-family: var(--font-body);
font-size: 12px;
color: var(--accent-2);
background: var(--accent-faint);
border: 1px solid #DDE1FB;
border-radius: 6px;
padding: 7px 12px;
margin-top: 10px;
}
.aib-preview-note i[data-lucide], .aib-preview-note svg.lucide {
width: 13px !important; height: 13px !important;
color: var(--accent); flex-shrink: 0;
}
/* ==================================================================
FP Calendar slot picker — pulled from Google Calendar (mock)
================================================================== */
.aib-cal {
margin-top: 14px;
background: var(--surface);
border: 1px solid var(--hairline);
border-radius: 12px;
padding: 14px 16px;
}
.aib-cal-head {
display: flex; align-items: center; gap: 10px;
flex-wrap: wrap;
margin-bottom: 12px;
}
.aib-cal-eyebrow {
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--font-display);
font-size: 12px; font-weight: 700;
color: var(--ink);
letter-spacing: -0.005em;
flex: 1; min-width: 0;
}
.aib-cal-eyebrow > span:nth-child(2) { color: var(--ink); }
.aib-cal-eyebrow i[data-lucide], .aib-cal-eyebrow svg.lucide {
width: 14px !important; height: 14px !important;
color: var(--accent);
}
.aib-cal-source {
font-family: var(--font-body);
font-size: 11px;
font-weight: 500;
color: var(--positive);
background: var(--positive-soft);
border: 1px solid #ABEFC6;
padding: 2px 7px;
border-radius: 100px;
margin-left: 6px;
letter-spacing: 0;
}
.aib-cal-actions { display: flex; gap: 6px; }
.aib-cal-btn {
display: inline-flex !important; align-items: center !important; gap: 5px !important;
font-family: var(--font-body) !important;
font-size: 11.5px !important; font-weight: 500 !important;
background: var(--surface) !important;
color: var(--ink-2) !important;
border: 1px solid var(--hairline-2) !important;
padding: 5px 10px !important;
border-radius: 6px !important;
}
.aib-cal-btn i[data-lucide] { width: 12px !important; height: 12px !important; }
.aib-cal-btn:hover { background: var(--surface-2) !important; border-color: var(--ink-3) !important; }
.aib-cal-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 10px;
margin-bottom: 12px;
}
.aib-slot {
background: var(--surface-2);
border: 1px solid var(--hairline);
border-radius: 10px;
padding: 12px 14px;
position: relative;
}
.aib-slot-head {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 8px;
}
.aib-slot-num {
font-family: var(--font-display);
font-size: 10px; font-weight: 700;
letter-spacing: 0.08em; text-transform: uppercase;
color: var(--accent-2);
background: var(--accent-soft);
border: 1px solid #C7CDF5;
padding: 2px 7px;
border-radius: 4px;
}
.aib-slot-remove {
width: 22px; height: 22px;
background: transparent !important;
border: 1px solid transparent !important;
color: var(--ink-3) !important;
padding: 0 !important;
border-radius: 5px;
display: inline-flex; align-items: center; justify-content: center;
}
.aib-slot-remove:hover {
background: var(--critical-soft) !important;
color: var(--critical) !important;
border-color: #F9C7C0 !important;
}
.aib-slot-remove i[data-lucide] { width: 12px !important; height: 12px !important; }
.aib-slot-date {
font-family: var(--font-display);
font-weight: 800; font-size: 22px;
letter-spacing: -0.025em;
color: var(--ink); line-height: 1;
}
.aib-slot-wday {
font-family: var(--font-body);
font-size: 11.5px; font-weight: 500;
color: var(--ink-3); margin-left: 4px;
}
.aib-slot-time {
display: flex; align-items: center; gap: 5px;
font-family: var(--font-body);
font-size: 12px;
color: var(--ink-2);
margin-top: 6px;
}
.aib-slot-time i[data-lucide] {
width: 12px !important; height: 12px !important;
color: var(--accent);
}
.aib-slot-free {
display: flex; align-items: center; gap: 4px;
font-family: var(--font-body);
font-size: 10.5px;
color: var(--positive);
margin-top: 8px;
}
.aib-slot-free i[data-lucide] {
width: 11px !important; height: 11px !important;
}
.aib-cal-confirm {
display: flex; align-items: center; gap: 8px;
font-family: var(--font-body);
font-size: 11.5px;
color: var(--ink-2);
background: var(--accent-faint);
border: 1px solid #DDE1FB;
border-radius: 8px;
padding: 8px 12px;
}
.aib-cal-confirm i[data-lucide], .aib-cal-confirm svg.lucide {
width: 13px !important; height: 13px !important;
color: var(--accent);
}
.aib-cal-confirm strong { color: var(--accent-2); font-weight: 700; }
/* split: candidate slots (left) + owner week (right) */
.aib-cal-split {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 14px;
}
@media (max-width: 900px) { .aib-cal-split { grid-template-columns: 1fr; } }
.aib-cal-subhead {
display: flex; align-items: center; gap: 6px;
font-family: var(--font-display);
font-size: 11px; font-weight: 700;
letter-spacing: 0.08em; text-transform: uppercase;
color: var(--ink-3);
margin-bottom: 8px;
}
.aib-cal-subhead i[data-lucide], .aib-cal-subhead svg.lucide {
width: 12px !important; height: 12px !important;
color: var(--ink-3);
}
/* candidate cards smaller (left side) */
.aib-cal-left .aib-cal-grid {
grid-template-columns: 1fr;
gap: 6px;
}
.aib-cal-left .aib-slot { padding: 10px 12px; }
.aib-cal-left .aib-slot-date { font-size: 18px; }
.aib-cal-left .aib-slot-time { font-size: 11.5px; margin-top: 4px; }
.aib-cal-left .aib-slot-free { display: none; }
/* week view (right side) */
.aib-week {
display: flex; flex-direction: column; gap: 6px;
background: var(--surface-2);
border: 1px solid var(--hairline);
border-radius: 10px;
padding: 10px;
max-height: 360px;
overflow-y: auto;
}
.aib-week::-webkit-scrollbar { width: 5px; }
.aib-week::-webkit-scrollbar-thumb { background: var(--hairline-2); border-radius: 3px; }
.aib-week-day {
background: var(--surface);
border: 1px solid var(--hairline);
border-radius: 8px;
padding: 10px 12px;
}
.aib-week-day.aib-week-today {
border-color: var(--accent);
box-shadow: 0 0 0 2px var(--accent-ring);
}
.aib-week-date {
display: flex; align-items: baseline; gap: 6px;
margin-bottom: 6px;
}
.aib-week-num {
font-family: var(--font-display);
font-weight: 800; font-size: 14px;
letter-spacing: -0.018em;
color: var(--ink);
}
.aib-week-wday {
font-family: var(--font-body);
font-size: 11px; font-weight: 500;
color: var(--ink-3);
}
.aib-week-today-mark {
font-family: var(--font-display);
font-size: 9.5px; font-weight: 700;
letter-spacing: 0.08em; text-transform: uppercase;
color: #fff;
background: var(--accent);
padding: 1px 6px;
border-radius: 100px;
margin-left: auto;
}
.aib-week-events {
display: flex; flex-direction: column; gap: 3px;
margin-bottom: 6px;
}
.aib-week-ev {
display: flex; align-items: center; gap: 8px;
font-family: var(--font-body);
font-size: 11.5px;
color: var(--ink-2);
background: var(--surface-2);
border-left: 2px solid var(--ink-3);
padding: 4px 8px;
border-radius: 4px;
}
.aib-week-ev-time {
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--ink-3);
min-width: 36px;
}
.aib-week-ev-title { flex: 1; }
.aib-week-empty {
font-family: var(--font-body);
font-size: 11px;
color: var(--muted);
font-style: italic;
padding: 4px 0;
}
.aib-week-slots {
display: flex; flex-wrap: wrap; gap: 4px;
}
.aib-week-slot {
display: inline-flex !important; align-items: center !important; gap: 4px !important;
font-family: var(--font-body) !important;
font-size: 11px !important; font-weight: 600 !important;
background: var(--positive-soft) !important;
color: var(--positive) !important;
border: 1px solid #ABEFC6 !important;
padding: 4px 8px !important;
border-radius: 6px !important;
cursor: pointer;
transition: all .12s;
}
.aib-week-slot:hover {
background: #DCFCE7 !important;
border-color: var(--positive) !important;
}
.aib-week-slot i[data-lucide] { width: 11px !important; height: 11px !important; }
.aib-week-slot-time { font-family: var(--font-mono); font-size: 10.5px; }
.aib-week-slot-label { font-family: var(--font-body); font-size: 10.5px; opacity: 0.85; }
.aib-week-slot-selected {
background: var(--accent) !important;
background-image: linear-gradient(135deg, var(--accent-3), var(--accent)) !important;
color: #fff !important;
border-color: var(--accent-2) !important;
box-shadow: 0 2px 6px rgba(91,91,240,0.35);
}
.aib-week-slot-selected:hover { background: var(--accent-2) !important; }
/* Google Calendar embed toggle */
.aib-gcal-btn {
margin-left: auto !important;
display: inline-flex !important; align-items: center !important; gap: 4px !important;
font-family: var(--font-body) !important;
font-size: 10.5px !important; font-weight: 500 !important;
background: var(--surface) !important;
color: var(--ink-2) !important;
border: 1px solid var(--hairline-2) !important;
padding: 3px 8px !important;
border-radius: 4px !important;
text-transform: none !important;
letter-spacing: 0 !important;
}
.aib-gcal-btn i[data-lucide] { width: 11px !important; height: 11px !important; }
.aib-gcal-btn:hover { background: var(--surface-2) !important; border-color: var(--ink-3) !important; }
.aib-gcal-embed {
margin-top: 10px;
background: var(--surface);
border: 1px solid var(--hairline);
border-radius: 8px;
overflow: hidden;
}
.aib-gcal-embed summary {
display: flex; align-items: center; gap: 6px;
padding: 8px 12px;
cursor: pointer;
list-style: none;
font-family: var(--font-body);
font-size: 11.5px; font-weight: 600;
color: var(--ink-2);
background: var(--surface-2);
}
.aib-gcal-embed summary::-webkit-details-marker { display: none; }
.aib-gcal-embed summary i[data-lucide] {
width: 13px !important; height: 13px !important;
color: var(--accent);
}
.aib-gcal-embed[open] summary { border-bottom: 1px solid var(--hairline); }
.aib-gcal-iframe-wrap { padding: 0; }
.aib-gcal-iframe-wrap iframe { display: block; width: 100%; }
.aib-gcal-note {
font-family: var(--font-body);
font-size: 10.5px; color: var(--ink-3);
padding: 6px 10px;
background: var(--surface-2);
border-top: 1px solid var(--hairline);
}
/* Manual picker modal (2026-07-28: blur 撤廃、 BtoB admin) */
.aib-picker-overlay {
position: fixed;
inset: 0;
z-index: 1100;
background: rgba(15, 23, 42, 0.55);
display: flex; align-items: center; justify-content: center;
padding: 20px;
}
.aib-picker {
background: var(--surface);
border: 1px solid var(--hairline-2);
border-radius: 14px;
box-shadow: 0 32px 80px rgba(15,23,42,0.30);
width: 100%; max-width: 420px;
overflow: hidden;
}
.aib-picker-head {
display: flex; align-items: center; gap: 8px;
padding: 14px 18px;
border-bottom: 1px solid var(--hairline);
font-family: var(--font-display);
font-weight: 700; font-size: 14px;
color: var(--ink);
}
.aib-picker-head i[data-lucide] {
width: 16px !important; height: 16px !important;
color: var(--accent);
}
.aib-picker-close {
margin-left: auto !important;
width: 28px; height: 28px;
background: transparent !important;
border: none !important;
color: var(--ink-3) !important;
padding: 0 !important;
font-size: 18px !important;
cursor: pointer;
border-radius: 6px;
}
.aib-picker-close:hover { background: var(--surface-2) !important; color: var(--ink) !important; }
.aib-picker-body {
padding: 18px 20px;
display: flex; flex-direction: column; gap: 14px;
}
.aib-picker-row {
display: flex; align-items: center; gap: 12px;
}
.aib-picker-label {
font-family: var(--font-display);
font-size: 11px; font-weight: 700;
letter-spacing: 0.08em; text-transform: uppercase;
color: var(--ink-3);
min-width: 70px;
}
.aib-picker-row input,
.aib-picker-row select {
flex: 1;
font-family: var(--font-body);
font-size: 13.5px;
padding: 9px 12px;
border: 1px solid var(--hairline-2);
border-radius: 8px;
background: var(--surface);
color: var(--ink);
}
.aib-picker-row input:focus,
.aib-picker-row select:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-ring);
}
.aib-picker-note {
display: flex; align-items: center; gap: 6px;
font-family: var(--font-body);
font-size: 12px;
padding: 8px 12px;
border-radius: 8px;
}
.aib-picker-note i[data-lucide] {
width: 13px !important; height: 13px !important;
flex-shrink: 0;
}
.aib-picker-note-ok {
background: var(--positive-soft);
color: var(--positive);
border: 1px solid #ABEFC6;
}
.aib-picker-note-warn {
background: var(--warn-soft);
color: var(--warn);
border: 1px solid #F7D8AE;
}
.aib-picker-note strong { font-weight: 700; }
.aib-picker-cta {
display: flex; gap: 8px;
}
.aib-picker-confirm {
flex: 1;
display: inline-flex !important; align-items: center !important; justify-content: center !important;
padding: 10px 14px !important;
font-size: 13px !important;
font-weight: 700 !important;
}
.aib-picker-cancel {
padding: 10px 14px !important;
font-size: 13px !important;
}
/* ==================================================================
LINE Flex Preview — what the customer actually sees
================================================================== */
.aib-preview {
margin-top: 16px;
background: #06C755;
background-image: linear-gradient(180deg, #06C755 0%, #04A045 100%);
border-radius: 14px;
padding: 14px;
position: relative;
}
.aib-preview-head {
display: flex; align-items: center; gap: 6px;
color: #fff;
font-family: var(--font-display);
font-size: 11.5px; font-weight: 700;
letter-spacing: 0.04em;
margin-bottom: 10px;
opacity: 0.92;
}
.aib-preview-head i[data-lucide], .aib-preview-head svg.lucide {
width: 14px !important; height: 14px !important;
color: #fff;
}
.aib-preview-phone {
background: #7FB8E1;
background-image: linear-gradient(180deg, #7FB8E1 0%, #9AC8E8 100%);
border-radius: 10px;
padding: 14px 12px;
min-height: 80px;
display: flex; flex-direction: column; gap: 12px;
}
.aib-preview-bubble {
background: #fff;
color: var(--ink);
font-family: 'Noto Sans JP', sans-serif;
font-size: 13px;
line-height: 1.6;
padding: 10px 14px;
border-radius: 4px 18px 18px 18px;
white-space: pre-wrap;
max-width: 78%;
box-shadow: 0 1px 2px rgba(0,0,0,0.10);
word-wrap: break-word;
position: relative;
}
.aib-preview-carousel {
display: flex; gap: 8px;
overflow-x: auto;
padding-bottom: 4px;
scrollbar-width: thin;
-webkit-overflow-scrolling: touch;
}
.aib-preview-carousel::-webkit-scrollbar { height: 4px; }
.aib-preview-carousel::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.4); border-radius: 2px; }
.lp-card {
flex-shrink: 0;
background: #fff;
width: 150px;
border-radius: 10px;
padding: 12px;
display: flex; flex-direction: column; gap: 6px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12);
font-family: 'Noto Sans JP', sans-serif;
}
.lp-card-header {
background-image: linear-gradient(135deg, var(--accent-3), var(--accent-2));
color: #fff;
width: 130px;
}
.lp-card-eyebrow {
display: flex; align-items: center; gap: 5px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.05em;
color: var(--ink-3);
text-transform: uppercase;
}
.lp-card-header .lp-card-eyebrow { color: rgba(255,255,255,0.85); }
.lp-card-eyebrow i[data-lucide], .lp-card-eyebrow svg.lucide {
width: 11px !important; height: 11px !important;
}
.lp-card-title {
font-family: var(--font-display);
font-weight: 700; font-size: 12.5px;
line-height: 1.35;
color: var(--ink);
}
.lp-card-header .lp-card-title { color: #fff; font-size: 13px; }
.lp-card-num {
font-family: var(--font-display);
font-size: 10px; font-weight: 700;
letter-spacing: 0.08em; text-transform: uppercase;
color: var(--accent-2);
background: var(--accent-soft);
padding: 2px 6px;
border-radius: 4px;
align-self: flex-start;
}
.lp-card-date {
font-family: var(--font-display);
font-weight: 800; font-size: 24px;
letter-spacing: -0.025em;
color: var(--ink);
line-height: 1.1;
}
.lp-card-wday {
font-family: var(--font-body);
font-size: 12px;
font-weight: 500;
color: var(--ink-3);
margin-left: 3px;
}
.lp-card-time {
display: flex; align-items: center; gap: 5px;
font-family: var(--font-body);
font-size: 11.5px;
color: var(--ink-2);
}
.lp-card-time i[data-lucide], .lp-card-time svg.lucide {
width: 12px !important; height: 12px !important;
color: var(--accent);
}
.lp-card-btn {
display: inline-flex; align-items: center; justify-content: center;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 700; font-size: 12px;
background: var(--accent) !important;
background-image: linear-gradient(180deg, var(--accent-3), var(--accent)) !important;
color: #fff !important;
border: none !important;
padding: 7px 10px !important;
border-radius: 6px !important;
cursor: pointer;
margin-top: 4px;
}
.lp-card-btn-secondary {
background: #fff !important;
background-image: none !important;
color: var(--accent) !important;
border: 1px solid var(--accent) !important;
}
.lp-card-pdf {
width: 170px;
}
.aib-preview-phone-empty .aib-preview-carousel { display: none !important; }
/* Post-send tasks (STEP 3) */
.aib-postsend {
list-style: none; margin: 0 0 16px; padding: 0;
display: flex; flex-direction: column; gap: 8px;
}
.aib-postsend li {
display: flex; align-items: center; gap: 10px;
font-family: var(--font-body);
font-size: 12.5px;
color: var(--ink-2);
padding: 10px 14px;
background: var(--surface);
border: 1px solid var(--hairline);
border-radius: 8px;
}
.aib-postsend li strong { color: var(--ink); font-weight: 700; }
.aib-postsend li i[data-lucide] {
width: 15px !important; height: 15px !important;
color: var(--accent); flex-shrink: 0;
}
.aib-cta-row {
display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.aib-cta-row .primary,
.aib-cta-row .ghost-btn {
display: inline-flex !important; align-items: center !important; gap: 7px !important;
}
.aib-cta-row .primary i[data-lucide],
.aib-cta-row .ghost-btn i[data-lucide] {
width: 14px !important; height: 14px !important;
}
.aib-send {
padding: 12px 22px !important;
font-size: 14px !important;
font-weight: 700 !important;
}
.aib-msg {
font-family: var(--font-body);
font-size: 12px;
color: var(--ink-3);
margin-top: 10px;
min-height: 18px;
width: 100%;
}
.modal-header {
background: var(--surface);
border-bottom: 1px solid var(--hairline);
padding: 20px 26px;
display: flex; align-items: center; gap: 12px;
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.modal-header h2, .modal-header h3 {
font-family: var(--font-display) !important;
font-weight: 800 !important; font-size: 19px !important;
color: var(--ink);
letter-spacing: -0.025em; margin: 0;
}
.modal-close {
background: transparent !important;
border: 1px solid var(--hairline-2) !important;
color: var(--ink-3) !important;
padding: 6px 10px !important;
border-radius: var(--radius-md);
width: 34px; height: 34px;
display: inline-flex; align-items: center; justify-content: center;
}
.modal-close:hover {
background: var(--surface-2) !important;
color: var(--ink) !important;
}
.modal-body { padding: 24px 28px; }
/* ------------------------------------------------------------------
Lucide icon styling
------------------------------------------------------------------ */
i[data-lucide], svg.lucide {
width: 16px; height: 16px;
stroke-width: 1.6; color: currentColor;
display: inline-block; vertical-align: -3px;
}
.howto-banner-title i[data-lucide], .howto-banner-title svg.lucide {
width: 16px; height: 16px; color: var(--accent);
}
.chart-card-head i[data-lucide], .chart-card-head svg.lucide {
width: 18px; height: 18px; color: var(--accent); flex-shrink: 0;
}
/* dampen legacy emoji icons */
.task-icon, .funnel-icon, .seg-icon, .sched-icon, .step-icon,
.bday-row [class*="ic"], .booking-row [class*="ic"] {
font-size: 13px;
opacity: 0.55;
filter: grayscale(1);
}
.task-icon:has(svg.lucide), .task-icon:has(i[data-lucide]),
.funnel-icon:has(svg.lucide), .seg-icon:has(svg.lucide) {
opacity: 1 !important; filter: none !important; font-size: inherit !important;
}
/* ------------------------------------------------------------------
Chart grid
------------------------------------------------------------------ */
.chart-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin: 14px 0 8px;
}
.chart-card {
background: var(--surface);
border: 1px solid var(--hairline);
border-radius: var(--radius-lg);
padding: 20px 22px 16px;
box-shadow: var(--shadow-xs);
display: flex; flex-direction: column;
transition: box-shadow .15s, border-color .15s;
}
.chart-card:hover {
border-color: var(--hairline-2);
box-shadow: var(--shadow-sm);
}
.chart-card-wide { grid-column: 1 / -1; }
.chart-card-head {
display: flex; align-items: flex-start; gap: 10px;
margin-bottom: 8px;
}
.chart-card-title {
font-family: var(--font-display);
font-weight: 700; font-size: 14.5px;
color: var(--ink); letter-spacing: -0.005em;
line-height: 1.3;
}
.chart-card-sub {
font-family: var(--font-body);
font-size: 12px; color: var(--ink-3);
line-height: 1.4; margin-top: 2px;
}
.chart-canvas-wrap {
position: relative; height: 240px; margin-top: 6px;
}
.chart-canvas-wrap.chart-canvas-wide { height: 260px; }
.chart-canvas-wrap canvas { width: 100% !important; height: 100% !important; }
/* ------------------------------------------------------------------
Calendar tab page-h1 / cta-row / ghost-btn / demo-notice
------------------------------------------------------------------ */
.page-h1 {
display: flex; align-items: center; gap: 12px;
font-family: var(--font-display);
font-size: 26px; font-weight: 800;
letter-spacing: -0.028em;
color: var(--ink); margin: 0 0 6px;
}
.page-h1 svg.lucide, .page-h1 i[data-lucide] {
width: 24px !important; height: 24px !important;
color: var(--accent);
}
.page-sub {
color: var(--ink-3);
font-size: 13.5px;
margin: 0 0 24px;
line-height: 1.55; max-width: 72ch;
}
.demo-notice {
display: flex; align-items: center; gap: 8px;
background: var(--accent-faint);
border: 1px solid #DDE1FB;
border-radius: var(--radius-md);
padding: 10px 14px;
margin-bottom: 20px;
font-size: 12.5px;
color: var(--accent-2);
}
.demo-notice svg.lucide, .demo-notice i[data-lucide] {
width: 16px !important; height: 16px !important;
flex-shrink: 0; color: var(--accent);
}
.cta-row {
display: flex; gap: 10px; flex-wrap: wrap;
margin: 22px 0; align-items: center;
}
.cta-row .primary, .cta-row .ghost-btn, .cta-row button {
display: inline-flex !important; align-items: center !important; gap: 8px !important;
}
.cta-row .primary svg.lucide, .cta-row button svg.lucide, .cta-row .ghost-btn svg.lucide {
width: 15px !important; height: 15px !important; color: currentColor;
}
.ghost-btn {
font-family: var(--font-body);
font-size: 13px; font-weight: 500;
color: var(--ink); text-decoration: none;
padding: 9px 16px;
border: 1px solid var(--hairline-2);
border-radius: var(--radius-md);
background: var(--surface); cursor: pointer;
transition: background .12s, border-color .12s;
display: inline-flex; align-items: center; gap: 8px;
}
.ghost-btn:hover { background: var(--surface-2); border-color: var(--ink-3); }
.aftercare-btn {
font-size: 12px !important;
padding: 7px 13px !important;
}
/* ==================================================================
MEGA HERO — full-impact dashboard greeting
================================================================== */
.mega-hero {
position: relative;
margin: 0 0 36px;
padding: 44px 48px;
background: #0F1117;
background-image:
radial-gradient(circle at 0% 0%, rgba(91,91,240,0.28) 0%, transparent 45%),
radial-gradient(circle at 100% 100%, rgba(123,97,255,0.22) 0%, transparent 50%),
radial-gradient(circle at 100% 0%, rgba(167,139,250,0.14) 0%, transparent 40%);
border-radius: 24px;
overflow: hidden;
color: #F3F4F8;
box-shadow:
0 24px 60px rgba(15,17,23,0.20),
0 2px 0 rgba(255,255,255,0.05) inset;
}
.mega-hero-bg {
position: absolute; inset: 0;
background-image:
linear-gradient(125deg, transparent 0%, transparent 60%, rgba(91,91,240,0.12) 100%),
radial-gradient(circle at 70% 50%, rgba(91,91,240,0.10) 0%, transparent 60%);
pointer-events: none;
}
.mega-hero-bg::before {
/* Grid pattern */
content: ""; position: absolute; inset: 0;
background-image:
linear-gradient(to right, rgba(255,255,255,0.025) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255,255,255,0.025) 1px, transparent 1px);
background-size: 32px 32px;
mask-image: radial-gradient(ellipse at center, black 0%, transparent 75%);
-webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 75%);
}
.mega-hero-grid {
position: relative;
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 48px;
align-items: center;
min-height: 380px;
}
.mega-hero-left { position: relative; }
.mega-hero-date {
display: inline-block;
font-family: var(--font-mono), var(--font-body);
font-size: 11.5px; font-weight: 500;
letter-spacing: 0.04em;
color: #B3B8C3;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.08);
padding: 5px 12px;
border-radius: 100px;
margin-bottom: 24px;
}
.mega-hero-title {
font-family: var(--font-display);
font-weight: 800;
font-size: 44px;
letter-spacing: -0.035em;
line-height: 1.12;
color: #FFFFFF;
margin: 0 0 18px;
}
.mega-hero-name {
background-image: linear-gradient(120deg, #A78BFA 0%, #7878F5 50%, #5B5BF0 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-weight: 800;
}
.mega-hero-highlight {
background-image: linear-gradient(120deg, #FBBF24 0%, #F59E0B 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-weight: 800;
font-size: 1.1em;
display: inline-block;
padding: 0 4px;
}
.mega-hero-lead {
font-family: var(--font-body);
font-size: 14.5px;
color: #B3B8C3;
line-height: 1.6;
margin: 0 0 32px;
max-width: 36ch;
}
.mega-hero-stats {
display: flex; gap: 32px;
margin-bottom: 32px;
}
.mega-hero-stat { display: flex; flex-direction: column; gap: 4px; }
.mega-hero-stat-label {
font-family: var(--font-display);
font-size: 10.5px; font-weight: 600;
letter-spacing: 0.1em; text-transform: uppercase;
color: #7A8194;
}
.mega-hero-stat-value {
font-family: var(--font-display);
font-weight: 800; font-size: 30px;
letter-spacing: -0.03em;
color: #FFFFFF;
line-height: 1;
}
.mega-hero-actions {
display: flex; gap: 12px;
flex-wrap: wrap;
}
.primary-lg, .ghost-btn-lg {
padding: 14px 22px !important;
font-size: 14px !important;
border-radius: 12px !important;
}
.ghost-btn-lg {
background: rgba(255,255,255,0.06) !important;
color: #FFFFFF !important;
border: 1px solid rgba(255,255,255,0.12) !important;
}
.ghost-btn-lg:hover {
background: rgba(255,255,255,0.12) !important;
border-color: rgba(255,255,255,0.20) !important;
}
.primary-lg {
background-image: linear-gradient(180deg, #7878F5 0%, #5B5BF0 100%) !important;
border-color: rgba(255,255,255,0.18) !important;
box-shadow:
0 1px 0 rgba(255,255,255,0.25) inset,
0 8px 24px rgba(91,91,240,0.45) !important;
}
/* ==================================================================
FEATURED CARD (right side of mega-hero)
================================================================== */
.mega-hero-right {
position: relative;
}
.featured-card {
background: #FFFFFF;
border-radius: 20px;
padding: 24px 26px;
position: relative;
box-shadow:
0 32px 80px rgba(15,17,23,0.32),
0 8px 24px rgba(91,91,240,0.18),
0 0 0 1px rgba(255,255,255,0.06);
transform: perspective(1200px) rotateY(-3deg) rotateX(1deg);
transition: transform .3s cubic-bezier(.2,.7,.2,1);
}
.featured-card:hover {
transform: perspective(1200px) rotateY(-1deg) rotateX(0deg) translateY(-3px);
}
.featured-card-skeleton {
text-align: center; color: var(--ink-3);
padding: 60px 0;
font-family: var(--font-body);
}
.featured-rank {
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--font-display);
font-size: 10.5px; font-weight: 700;
letter-spacing: 0.1em; text-transform: uppercase;
background-image: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
color: #92400E;
padding: 5px 11px;
border-radius: 100px;
border: 1px solid #F6CB73;
margin-bottom: 18px;
}
.featured-rank i[data-lucide], .featured-rank svg.lucide {
width: 12px !important; height: 12px !important;
}
.featured-head {
display: flex; align-items: center; gap: 14px;
margin-bottom: 18px;
}
.featured-avatar {
width: 56px; height: 56px;
display: inline-flex; align-items: center; justify-content: center;
background-image: linear-gradient(135deg, #818CF8 0%, #4F46E5 100%);
color: #fff;
font-family: var(--font-display);
font-weight: 800; font-size: 22px;
letter-spacing: -0.02em;
border-radius: 50%;
flex-shrink: 0;
box-shadow:
0 6px 16px rgba(91,91,240,0.45),
0 0 0 3px #FFFFFF inset;
}
.featured-meta { flex: 1; min-width: 0; }
.featured-name {
font-family: var(--font-display);
font-weight: 800; font-size: 20px;
letter-spacing: -0.02em;
color: var(--ink);
line-height: 1.2;
}
.featured-sub {
font-family: var(--font-body);
font-size: 12.5px;
color: var(--ink-3);
margin-top: 4px;
}
.featured-aum {
text-align: right;
flex-shrink: 0;
}
.featured-aum-label {
font-family: var(--font-display);
font-size: 10px; font-weight: 600;
letter-spacing: 0.08em; text-transform: uppercase;
color: var(--ink-3);
margin-bottom: 2px;
}
.featured-aum-value {
font-family: var(--font-display);
font-weight: 800; font-size: 18px;
letter-spacing: -0.02em;
color: var(--ink);
}
.featured-reason {
display: flex; align-items: center; gap: 8px;
background-image: linear-gradient(135deg, var(--accent-faint) 0%, #F2F1FD 100%);
border: 1px solid #DDE1FB;
border-radius: 10px;
padding: 12px 14px;
font-family: var(--font-body);
font-size: 12.5px;
color: var(--accent-2);
font-weight: 600;
margin-bottom: 16px;
line-height: 1.4;
}
.featured-reason i[data-lucide], .featured-reason svg.lucide {
width: 14px !important; height: 14px !important;
color: var(--accent);
flex-shrink: 0;
}
.featured-metrics {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin-bottom: 18px;
}
.featured-metric {
background: var(--surface-2);
border: 1px solid var(--hairline);
border-radius: 10px;
padding: 12px 14px;
}
.featured-metric-label {
display: block;
font-family: var(--font-display);
font-size: 10px; font-weight: 600;
letter-spacing: 0.08em; text-transform: uppercase;
color: var(--ink-3);
margin-bottom: 6px;
}
.featured-metric-value {
font-family: var(--font-display);
font-weight: 800; font-size: 22px;
letter-spacing: -0.025em;
color: var(--ink);
line-height: 1;
}
.featured-metric-value.featured-metric-text { font-size: 14px; }
.featured-metric-unit {
font-family: var(--font-body);
font-size: 11px; font-weight: 500;
color: var(--ink-3); margin-left: 3px;
}
.featured-metric-sub {
display: block;
font-family: var(--font-body);
font-size: 11px; color: var(--ink-3);
margin-top: 3px;
}
.featured-cta {
width: 100%;
justify-content: center;
display: inline-flex !important; align-items: center !important; gap: 8px !important;
padding: 12px 18px !important;
font-size: 13.5px !important;
}
@media (max-width: 1100px) {
.mega-hero-grid { grid-template-columns: 1fr; gap: 32px; }
.mega-hero { padding: 32px 28px; }
.mega-hero-title { font-size: 32px; }
.featured-card { transform: none; }
.featured-card:hover { transform: translateY(-3px); }
}
/* ==================================================================
Hide all explanatory bars (per owner: "説明は一旦いらない")
================================================================== */
.howto-banner { display: none !important; }
.workflow-grid { display: none !important; }
.section-title[data-eyebrow="Workflow"],
.section-title[data-eyebrow="Workflow"] + .section-sub { display: none !important; }
/* ==================================================================
WORKFLOW GUIDE — (hidden by default, kept for reference)
================================================================== */
.workflow-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
margin: 12px 0 8px;
}
@media (max-width: 1100px) {
.workflow-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
.workflow-grid { grid-template-columns: 1fr 1fr; }
}
.workflow-step {
background: var(--surface);
border: 1px solid var(--hairline);
border-radius: 12px;
padding: 16px 16px 14px;
position: relative;
transition: border-color .15s, box-shadow .15s, transform .15s;
cursor: default;
}
.workflow-step:hover {
border-color: var(--hairline-2);
box-shadow: var(--shadow-xs);
}
.workflow-step-active {
background: var(--accent-faint);
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-ring);
}
.workflow-step-num {
position: absolute;
top: 14px; right: 14px;
font-family: var(--font-display);
font-weight: 700; font-size: 11px;
color: var(--ink-3);
background: var(--surface-2);
width: 22px; height: 22px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%;
border: 1px solid var(--hairline);
}
.workflow-step-active .workflow-step-num {
background: var(--accent);
color: #fff;
border-color: var(--accent);
}
.workflow-step-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px;
background: var(--surface-2);
border-radius: 8px;
margin-bottom: 10px;
}
.workflow-step-active .workflow-step-icon {
background: var(--accent);
}
.workflow-step-icon i[data-lucide], .workflow-step-icon svg.lucide {
width: 16px !important; height: 16px !important;
color: var(--ink-3);
}
.workflow-step-active .workflow-step-icon i[data-lucide],
.workflow-step-active .workflow-step-icon svg.lucide {
color: #fff;
}
.workflow-step-title {
font-family: var(--font-display);
font-weight: 700; font-size: 13.5px;
color: var(--ink);
letter-spacing: -0.012em;
margin-bottom: 5px;
}
.workflow-step-desc {
font-family: var(--font-body);
font-size: 11.5px;
color: var(--ink-3);
line-height: 1.5;
}
.workflow-step-status {
display: inline-block;
margin-top: 10px;
font-family: var(--font-display);
font-size: 10px; font-weight: 700;
letter-spacing: 0.08em; text-transform: uppercase;
background: var(--accent);
color: #fff;
padding: 3px 8px;
border-radius: 4px;
}
/* ==================================================================
BRIEF CARDS — Today's Brief 3-tier hierarchy
tier 1: mega next-best-action card (rank #1)
tier 2: medium card (rank #2, #3)
tier 3: compact row (rank #4+)
================================================================== */
.action-list { background: transparent !important; border: none !important; box-shadow: none !important; }
.brief-stack { display: flex; flex-direction: column; gap: 14px; }
/* Common priority pills */
.brief-pri {
font-family: var(--font-display);
font-size: 10px; font-weight: 700;
letter-spacing: 0.1em; text-transform: uppercase;
padding: 4px 9px;
border-radius: 4px;
border: 1px solid currentColor;
white-space: nowrap;
}
.brief-pri.priority-urgent, .brief-pri.urgent {
background: var(--critical); color: #fff; border-color: var(--critical);
}
.brief-pri.priority-this-week, .brief-pri.thisweek, .brief-pri.this-week {
background: var(--warn-soft); color: var(--warn); border-color: #F7D8AE;
}
.brief-pri.priority-this-month, .brief-pri.thismonth, .brief-pri.this-month {
background: var(--accent-soft); color: var(--accent-2); border-color: #C7CDF5;
}
.brief-pri.priority-low {
background: var(--surface-2); color: var(--ink-3); border-color: var(--hairline-2);
}
/* ---------------- TIER 1 — MEGA ---------------- */
.brief-card-mega {
background: var(--surface);
border: 1px solid var(--hairline);
border-radius: 20px;
padding: 26px 30px 24px;
box-shadow:
0 24px 60px rgba(15,17,23,0.08),
0 4px 12px rgba(15,17,23,0.04);
position: relative;
cursor: pointer;
transition: box-shadow .2s, transform .2s, border-color .2s;
}
.brief-card-mega:hover {
box-shadow:
0 32px 72px rgba(15,17,23,0.12),
0 6px 16px rgba(91,91,240,0.10);
transform: translateY(-2px);
border-color: var(--accent);
}
.brief-card-mega::before {
content: ""; position: absolute;
left: -1px; top: -1px; bottom: -1px;
width: 5px;
background-image: linear-gradient(180deg, var(--accent-3) 0%, var(--accent) 50%, var(--accent-2) 100%);
border-radius: 20px 0 0 20px;
}
.brief-rank-badge {
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--font-display);
font-size: 10.5px; font-weight: 700;
letter-spacing: 0.12em; text-transform: uppercase;
background-image: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
color: #92400E;
padding: 5px 11px;
border-radius: 100px;
border: 1px solid #F6CB73;
margin-bottom: 18px;
}
.brief-rank-badge i[data-lucide], .brief-rank-badge svg.lucide {
width: 12px !important; height: 12px !important;
}
.brief-mega-grid {
display: grid;
grid-template-columns: 1fr 240px;
gap: 24px;
}
.brief-mega-left { min-width: 0; }
.brief-mega-head {
display: flex; align-items: center; gap: 14px;
margin-bottom: 18px;
}
.brief-mega-avatar {
width: 52px; height: 52px;
display: inline-flex; align-items: center; justify-content: center;
background-image: linear-gradient(135deg, var(--accent-3) 0%, var(--accent-2) 100%);
color: #fff;
font-family: var(--font-display);
font-weight: 800; font-size: 20px;
letter-spacing: -0.02em;
border-radius: 50%;
flex-shrink: 0;
box-shadow: 0 6px 16px rgba(91,91,240,0.35);
}
.brief-mega-name {
font-family: var(--font-display);
font-weight: 800; font-size: 22px;
letter-spacing: -0.025em;
color: var(--ink);
line-height: 1.2;
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.brief-mega-meta {
font-family: var(--font-body);
font-size: 13px; color: var(--ink-3);
margin-top: 5px;
}
.brief-mega-action {
background: var(--surface-2);
border: 1px solid var(--hairline);
border-left: 3px solid var(--accent);
border-radius: 10px;
padding: 14px 18px;
margin-bottom: 16px;
}
.brief-mega-action-label {
display: block;
font-family: var(--font-display);
font-size: 10.5px; font-weight: 700;
letter-spacing: 0.1em; text-transform: uppercase;
color: var(--accent);
margin-bottom: 8px;
}
.brief-mega-action-text {
font-family: var(--font-display);
font-weight: 700; font-size: 17px;
letter-spacing: -0.015em;
color: var(--ink);
line-height: 1.35;
margin-bottom: 8px;
}
.brief-mega-reason {
display: flex; align-items: flex-start; gap: 6px;
font-family: var(--font-body);
font-size: 12.5px;
color: var(--ink-3);
line-height: 1.5;
}
.brief-mega-reason i[data-lucide], .brief-mega-reason svg.lucide {
width: 14px !important; height: 14px !important;
color: var(--accent); flex-shrink: 0; margin-top: 2px;
}
.brief-mega-cta {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.brief-mega-cta .primary,
.brief-mega-cta .ghost-btn {
display: inline-flex !important; align-items: center !important; gap: 6px !important;
}
.brief-mega-cta .primary i[data-lucide],
.brief-mega-cta .ghost-btn i[data-lucide] {
width: 14px !important; height: 14px !important;
}
.brief-time-hint {
display: inline-flex; align-items: center; gap: 5px;
font-family: var(--font-body);
font-size: 11.5px; color: var(--ink-3);
margin-left: auto;
}
.brief-time-hint i[data-lucide] { width: 13px !important; height: 13px !important; }
.brief-mega-right {
background: var(--surface-2);
border: 1px solid var(--hairline);
border-radius: 12px;
padding: 16px 18px;
display: flex; flex-direction: column; gap: 14px;
}
.brief-stat {
display: flex; flex-direction: column; gap: 3px;
padding-bottom: 12px;
border-bottom: 1px solid var(--hairline);
}
.brief-stat:last-child { border-bottom: none; padding-bottom: 0; }
.brief-stat-label {
font-family: var(--font-display);
font-size: 10px; font-weight: 600;
letter-spacing: 0.08em; text-transform: uppercase;
color: var(--ink-3);
}
.brief-stat-value {
font-family: var(--font-display);
font-weight: 800; font-size: 18px;
letter-spacing: -0.025em;
color: var(--ink); line-height: 1.1;
}
.brief-stat-pill { align-self: flex-start; }
.brief-stat-unit {
font-family: var(--font-body);
font-size: 11px; font-weight: 500;
color: var(--ink-3); margin-left: 3px;
}
.brief-stat-text {
font-family: var(--font-display);
font-weight: 700; font-size: 13.5px;
color: var(--ink); line-height: 1.3;
}
.brief-stat-sub {
font-family: var(--font-body);
font-size: 11.5px; color: var(--ink-3);
margin-top: 2px;
}
@media (max-width: 900px) {
.brief-mega-grid { grid-template-columns: 1fr; }
.brief-mega-right { flex-direction: row; flex-wrap: wrap; gap: 20px; }
.brief-stat { border-bottom: none; padding-bottom: 0; }
}
/* ---------------- TIER 2 — MEDIUM ---------------- */
.brief-card-medium {
background: var(--surface);
border: 1px solid var(--hairline);
border-radius: 14px;
padding: 16px 20px 14px;
box-shadow: var(--shadow-xs);
cursor: pointer;
transition: box-shadow .15s, border-color .15s, transform .15s;
position: relative;
}
.brief-card-medium:hover {
border-color: var(--hairline-2);
box-shadow: var(--shadow-md);
transform: translateY(-1px);
}
.brief-rank-medium {
position: absolute;
top: 14px; right: 18px;
font-family: var(--font-display);
font-size: 11px; font-weight: 700;
color: var(--muted);
letter-spacing: 0;
}
.brief-medium-head {
display: flex; align-items: center; gap: 12px;
margin-bottom: 10px;
padding-right: 36px;
}
.brief-medium-avatar {
width: 36px; height: 36px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--accent-soft);
color: var(--accent);
font-family: var(--font-display);
font-weight: 800; font-size: 14px;
letter-spacing: -0.02em;
border-radius: 50%;
flex-shrink: 0;
}
.brief-medium-meta { flex: 1; min-width: 0; }
.brief-medium-name {
font-family: var(--font-display);
font-weight: 700; font-size: 15px;
letter-spacing: -0.012em;
color: var(--ink);
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.brief-medium-sub {
font-family: var(--font-body);
font-size: 12px; color: var(--ink-3);
margin-top: 2px;
}
.brief-medium-action {
font-family: var(--font-display);
font-weight: 700; font-size: 14px;
letter-spacing: -0.005em;
color: var(--ink);
margin-bottom: 4px;
padding-left: 48px;
}
.brief-medium-reason {
display: flex; align-items: flex-start; gap: 5px;
font-family: var(--font-body);
font-size: 12px;
color: var(--ink-3);
margin-bottom: 10px;
padding-left: 48px;
line-height: 1.5;
}
.brief-medium-reason i[data-lucide], .brief-medium-reason svg.lucide {
width: 12px !important; height: 12px !important;
color: var(--accent); flex-shrink: 0; margin-top: 2px;
}
.brief-medium-foot {
display: flex; align-items: center; justify-content: space-between;
padding-left: 48px;
gap: 10px;
}
.brief-medium-info {
font-family: var(--font-body);
font-size: 11.5px;
color: var(--ink-3);
display: flex; align-items: center; gap: 5px;
}
.brief-medium-info i[data-lucide], .brief-medium-info svg.lucide {
width: 12px !important; height: 12px !important;
}
.brief-medium-cta { display: flex; gap: 8px; align-items: center; }
.brief-mini-btn {
display: inline-flex !important; align-items: center !important; gap: 4px !important;
font-size: 11.5px !important;
padding: 5px 10px !important;
}
.brief-mini-btn i[data-lucide], .brief-mini-btn svg.lucide {
width: 12px !important; height: 12px !important;
}
/* ---------------- TIER 3 — COMPACT ROW ---------------- */
.brief-compact {
background: var(--surface);
border: 1px solid var(--hairline);
border-radius: 10px;
padding: 10px 14px;
display: grid;
grid-template-columns: 32px 32px 1fr auto auto auto;
gap: 12px;
align-items: center;
cursor: pointer;
transition: background .12s, border-color .12s;
}
.brief-compact:hover {
background: var(--surface-2);
border-color: var(--hairline-2);
}
.brief-compact-rank {
font-family: var(--font-display);
font-size: 11px; font-weight: 700;
color: var(--muted);
}
.brief-compact-avatar {
width: 28px; height: 28px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--accent-soft);
color: var(--accent);
font-family: var(--font-display);
font-weight: 700; font-size: 12px;
border-radius: 50%;
}
.brief-compact-body { min-width: 0; }
.brief-compact-name {
font-family: var(--font-display);
font-weight: 700; font-size: 13px;
color: var(--ink); letter-spacing: -0.005em;
display: inline-flex; align-items: center; gap: 8px;
}
.brief-compact-name .status-pill { font-size: 10px; padding: 2px 6px; }
.brief-compact-action {
font-family: var(--font-body);
font-size: 12px;
color: var(--ink-3);
margin-top: 1px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brief-compact-meta {
font-family: var(--font-body);
font-size: 11.5px;
color: var(--ink-3);
white-space: nowrap;
}
/* ------------------------------------------------------------------
Hero focus row (avatar stack + mini metrics) — legacy (kept)
------------------------------------------------------------------ */
.hero-focus-row {
display: flex; align-items: center; gap: 18px;
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid var(--hairline);
}
.hero-focus-item { display: flex; flex-direction: column; gap: 6px; }
.hero-focus-label {
font-family: var(--font-display);
font-size: 10.5px; font-weight: 600;
letter-spacing: 0.08em; text-transform: uppercase;
color: var(--ink-3);
}
.hero-focus-value {
font-family: var(--font-display);
font-weight: 800; font-size: 22px;
color: var(--ink); letter-spacing: -0.025em;
line-height: 1;
}
.hero-focus-unit {
font-family: var(--font-body);
font-size: 12px; font-weight: 500;
color: var(--ink-3); margin-left: 3px;
}
.hero-focus-divider {
width: 1px; height: 32px;
background: var(--hairline);
}
.hero-avatar-stack {
display: inline-flex; align-items: center;
height: 32px;
}
.hero-avatar {
display: inline-flex; align-items: center; justify-content: center;
width: 30px; height: 30px;
background-image: linear-gradient(135deg, var(--accent-3), var(--accent-2));
color: #fff;
font-family: var(--font-display);
font-weight: 700; font-size: 12px;
border-radius: 50%;
border: 2px solid var(--surface);
margin-left: -8px;
position: relative;
transition: transform .15s, z-index 0s .15s;
z-index: calc(5 - var(--idx));
}
.hero-avatar:first-child { margin-left: 0; }
.hero-avatar:nth-child(2) { background-image: linear-gradient(135deg, #6366F1, #3730A3); }
.hero-avatar:nth-child(3) { background-image: linear-gradient(135deg, #818CF8, #4F46E5); }
.hero-avatar:nth-child(4) { background-image: linear-gradient(135deg, #A78BFA, #6D28D9); }
.hero-avatar:nth-child(5) { background-image: linear-gradient(135deg, #C4B5FD, #7C3AED); }
.hero-avatar:hover { transform: translateY(-3px) scale(1.08); z-index: 10; transition: transform .15s; }
.hero-avatar-more {
display: inline-flex; align-items: center; justify-content: center;
height: 30px; min-width: 30px; padding: 0 8px;
background: var(--accent-soft);
color: var(--accent);
font-family: var(--font-display);
font-weight: 700; font-size: 11.5px;
border-radius: 16px;
border: 2px solid var(--surface);
margin-left: -8px;
}
/* ------------------------------------------------------------------
KPI: sparklines + delta pills + tone tinting
------------------------------------------------------------------ */
.kpi-row > .kpi { padding-bottom: 28px !important; }
.kpi-spark {
position: absolute !important;
left: 0; right: 0; bottom: 0;
width: 100% !important; height: 36px !important;
display: block;
pointer-events: none;
opacity: 0.85;
}
.kpi-delta {
margin-left: auto;
font-family: var(--font-mono), var(--font-body);
font-size: 10.5px; font-weight: 600;
padding: 2px 7px;
border-radius: 4px;
letter-spacing: 0;
}
.kpi-delta-up { background: var(--positive-soft); color: var(--positive); border: 1px solid #ABEFC6; }
.kpi-delta-down { background: var(--critical-soft); color: var(--critical); border: 1px solid #F9C7C0; }
.kpi[data-tone="warn"] .kpi-value { color: var(--warn) !important; }
.kpi[data-tone="critical"] .kpi-value { color: var(--critical) !important; }
.kpi[data-tone="positive"] .kpi-value { color: var(--positive) !important; }
/* ------------------------------------------------------------------
Status pill dot indicator
------------------------------------------------------------------ */
.status-pill::before, [class*="status-pill"]::before {
content: "";
display: inline-block;
width: 6px; height: 6px;
border-radius: 50%;
background: currentColor;
margin-right: 6px;
opacity: 0.85;
}
/* ------------------------------------------------------------------
Calendar delivery list (replacing inline-styled rows)
------------------------------------------------------------------ */
.delivery-list { display: grid; gap: 10px; }
.delivery-row {
background: var(--surface);
border: 1px solid var(--hairline);
border-radius: var(--radius-lg);
padding: 14px 18px;
display: grid;
grid-template-columns: 36px 1fr 160px;
gap: 16px;
align-items: center;
box-shadow: var(--shadow-xs);
transition: box-shadow .15s, border-color .15s, transform .15s;
}
.delivery-row:hover {
border-color: var(--hairline-2);
box-shadow: var(--shadow-md);
transform: translateY(-1px);
}
.delivery-num {
background-image: linear-gradient(135deg, var(--accent-3) 0%, var(--accent) 60%, var(--accent-2) 100%);
color: #fff;
width: 30px; height: 30px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-family: var(--font-display);
font-weight: 800; font-size: 13px;
box-shadow: 0 2px 6px var(--accent-glow);
}
.delivery-body { min-width: 0; }
.delivery-name {
font-family: var(--font-display);
font-size: 14.5px; font-weight: 700;
color: var(--ink); letter-spacing: -0.005em;
}
.delivery-meta-row {
display: flex; align-items: center; gap: 6px;
font-size: 12.5px; color: var(--ink-2);
margin-top: 4px;
}
.delivery-meta-row.delivery-meta-sub { font-size: 11.5px; color: var(--ink-3); }
.delivery-meta-row.delivery-meta-note { font-style: italic; }
.delivery-meta-row i[data-lucide], .delivery-meta-row svg.lucide {
width: 13px !important; height: 13px !important;
color: var(--ink-3); flex-shrink: 0;
}
.delivery-action { text-align: right; }
.delivery-map-link {
display: inline-flex; align-items: center; gap: 5px;
font-family: var(--font-body);
font-size: 12px; font-weight: 600;
color: var(--accent);
text-decoration: none;
background: var(--accent-soft);
padding: 6px 12px;
border-radius: var(--radius-md);
border: 1px solid #DDE1FB;
transition: background .12s, color .12s;
}
.delivery-map-link:hover {
background: var(--accent);
color: #fff;
border-color: var(--accent);
}
.delivery-map-link i[data-lucide], .delivery-map-link svg.lucide {
width: 13px !important; height: 13px !important; color: currentColor;
}
/* ------------------------------------------------------------------
Button hover shine — micro-interaction on primary
------------------------------------------------------------------ */
button.primary { overflow: hidden; position: relative; }
button.primary::before {
content: ""; position: absolute;
top: 0; left: -100%;
width: 70%; height: 100%;
background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,0.35) 50%, transparent 100%);
transform: skewX(-20deg);
transition: left .55s cubic-bezier(.4,.7,.4,1);
pointer-events: none;
}
button.primary:hover::before { left: 130%; }
/* ------------------------------------------------------------------
Responsive
------------------------------------------------------------------ */
@media (max-width: 1024px) {
.shell { grid-template-columns: 64px 1fr; }
.sidebar { padding: 12px 6px; }
.sidebar-brand .brand-text,
.sidebar-search input, .sidebar-search .kbd,
.sidebar-label, .sidebar-nav .tab span, .nav-count,
.upgrade-card, .user-text, .user-chevron { display: none; }
.sidebar-nav .tab { justify-content: center; padding: 10px 0 !important; }
.sidebar-search { padding: 8px; justify-content: center; }
.sidebar-brand { justify-content: center; padding: 4px 0 12px; }
.sidebar-user { justify-content: center; padding: 8px 0; }
.container { padding: 18px 18px 36px; }
.kpi-row { grid-template-columns: repeat(2, 1fr); }
.chart-grid { grid-template-columns: 1fr; }
.hero { flex-direction: column; align-items: stretch; }
.hero-actions { flex-wrap: wrap; }
.hero-title { font-size: 24px; }
}
@media (max-width: 640px) {
.shell { grid-template-columns: 1fr; height: auto; }
.sidebar { position: sticky; top: 0; z-index: 100; }
body { overflow: visible; height: auto; }
.main { height: auto; }
.workspace { overflow-y: visible; }
}
/* ============================================================
FP COMPASS - v9 和モダン Detail Pass
50代FP 業務SaaS / Manrope + Noto Sans JP / インディゴ + 漆金
2026-06-03
============================================================ */
:root {
/* 上品さの軸: 紙ベージュ + 墨ネイビー + アクセント漆金 */
--fp-paper: #FAF9F5;
--fp-paper-2: #F4F2EA;
--fp-ink: #1A2138;
--fp-ink-2: #3F4868;
--fp-ink-3: #7B859E;
--fp-line: #E5E1D5;
--fp-line-2: #D4CFC0;
--fp-indigo: #5B5BF0;
--fp-indigo-soft: #EEF1FE;
--fp-gold: #B8893D;
--fp-gold-soft: #FDF8EC;
--fp-danger: #B91C1C;
--fp-danger-soft: #FEF2F2;
--fp-ok: #047647;
--fp-ok-soft: #ECFDF3;
}
/* ─── 1. ボタン優先度ヒエラルキー (.fp-btn) ────────────────── */
.fp-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
font-family: 'Manrope','Noto Sans JP',sans-serif;
font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em;
padding: 9px 16px; border-radius: 6px; cursor: pointer;
border: 1px solid transparent;
transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.08s ease;
text-decoration: none; white-space: nowrap;
}
.fp-btn:active { transform: translateY(1px); }
.fp-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none !important; }
.fp-btn-primary {
background: var(--fp-indigo); color: #fff;
box-shadow: 0 1px 0 rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.16);
}
.fp-btn-primary:hover { background: #4747D8; box-shadow: 0 3px 10px rgba(91,91,240,0.25); }
.fp-btn-secondary {
background: #fff; color: var(--fp-ink); border-color: var(--fp-line-2);
}
.fp-btn-secondary:hover { background: var(--fp-paper-2); border-color: var(--fp-ink-3); }
.fp-btn-ghost {
background: transparent; color: var(--fp-ink-2);
}
.fp-btn-ghost:hover { background: var(--fp-paper-2); color: var(--fp-ink); }
.fp-btn-danger {
background: #fff; color: var(--fp-danger); border-color: #FECACA;
}
.fp-btn-danger:hover { background: var(--fp-danger-soft); border-color: var(--fp-danger); }
.fp-btn-gold {
background: var(--fp-gold); color: #fff;
box-shadow: 0 1px 0 rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.18);
}
.fp-btn-gold:hover { background: #A0792E; box-shadow: 0 3px 10px rgba(184,137,61,0.28); }
.fp-btn-sm { font-size: 11.5px; padding: 6px 12px; }
.fp-btn-lg { font-size: 14px; padding: 12px 22px; }
/* ─── 2. セクション label ━━━━━ ハイラインで章立て感 ───── */
.fp-section-eyebrow {
display: flex; align-items: center; gap: 10px;
font-family: 'Manrope',sans-serif; font-size: 10.5px; font-weight: 800;
letter-spacing: 0.22em; text-transform: uppercase;
color: var(--fp-gold);
margin-bottom: 12px;
}
.fp-section-eyebrow::before {
content: ''; display: inline-block; width: 24px; height: 1px;
background: var(--fp-gold);
}
.fp-section-title {
font-family: 'Noto Serif JP', serif; font-weight: 600;
font-size: 18px; color: var(--fp-ink); margin: 0 0 16px;
letter-spacing: 0.01em;
}
/* ─── 3. 面談録 カード (赤→漆金へ刷新) ───────────────────── */
.fp-meeting-card {
background: #fff;
border: 1px solid var(--fp-line);
border-left: 3px solid var(--fp-gold);
padding: 22px 26px;
box-shadow: 0 1px 0 rgba(26,33,56,0.03), 0 6px 16px rgba(26,33,56,0.04);
border-radius: 4px;
position: relative;
/* ★ 2026-06-29 速度改善: paint isolation で スクロール時 他カード 再描画 防止 */
contain: layout style paint;
content-visibility: auto;
contain-intrinsic-size: auto 280px;
}
/* ★ 議事録 タブ panel: スムーズスクロール GPU合成 */
[data-cdpanel="meetings"] {
contain: layout style;
will-change: scroll-position;
}
/* ★ モーダル本体 isolation */
.cd-modal {
contain: layout style;
}
.fp-meeting-card-head {
display: flex; justify-content: space-between; align-items: flex-start;
gap: 14px; padding-bottom: 14px; margin-bottom: 16px;
border-bottom: 1px solid var(--fp-line);
}
.fp-meeting-card-eyebrow {
font-family: 'Manrope',sans-serif; font-size: 9.5px; font-weight: 800;
letter-spacing: 0.24em; text-transform: uppercase;
color: var(--fp-gold); margin-bottom: 5px;
}
.fp-meeting-card-date {
font-family: 'Noto Serif JP', serif; font-size: 17px; font-weight: 600;
color: var(--fp-ink); letter-spacing: 0.02em;
}
.fp-meeting-card-actions {
display: flex; gap: 8px; flex-wrap: wrap;
}
.fp-meeting-block { margin-bottom: 16px; }
.fp-meeting-block-label {
font-family: 'Manrope',sans-serif; font-size: 10px; font-weight: 800;
letter-spacing: 0.2em; text-transform: uppercase;
color: var(--fp-ink-3); margin-bottom: 9px;
display: flex; align-items: center; gap: 8px;
}
.fp-meeting-block-label::before {
content: ''; width: 14px; height: 1px; background: var(--fp-ink-3);
}
.fp-meeting-body {
font-family: 'Noto Sans JP', sans-serif;
font-size: 13px; line-height: 1.95; color: var(--fp-ink);
background: var(--fp-paper);
border: 1px solid var(--fp-line);
padding: 16px 20px;
white-space: pre-wrap;
letter-spacing: 0.015em;
}
.fp-concern-chip {
display: inline-flex; align-items: center;
background: #fff;
border: 1px solid var(--fp-gold);
color: var(--fp-gold);
padding: 5px 11px;
font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em;
font-family: 'Manrope','Noto Sans JP',sans-serif;
}
.fp-concern-chip + .fp-concern-chip { margin-left: 6px; }
/* ─── 4. orphan AI ブロック (記録ベース) ─────────────────── */
.fp-meeting-card-orphan {
border-left-color: var(--fp-indigo);
background: linear-gradient(180deg, #fff 0%, #FAFAFE 100%);
}
.fp-meeting-card-orphan .fp-meeting-card-eyebrow { color: var(--fp-indigo); }
/* ─── 5. タイムライン (面談実施イベント) 上品化 ──────────── */
.tl-card { border-radius: 4px !important; }
.timeline-event.meeting,
.timeline-event[class*="meeting"] {
background: var(--fp-gold-soft) !important;
color: var(--fp-gold) !important;
border-left: 2px solid var(--fp-gold) !important;
}
/* ─── 6. 候補日確定待ち カード ─────────────────────────── */
.fp-pending-card {
background: #fff;
border: 1px solid var(--fp-line);
border-left: 3px solid var(--fp-gold);
border-radius: 4px;
padding: 22px 26px;
margin-bottom: 12px;
box-shadow: 0 1px 0 rgba(26,33,56,0.03), 0 4px 12px rgba(26,33,56,0.04);
}
.fp-pending-head {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; margin-bottom: 14px;
}
.fp-pending-name {
font-family: 'Noto Serif JP', serif; font-size: 17px; font-weight: 600;
color: var(--fp-ink); letter-spacing: 0.02em;
}
.fp-pending-meta {
font-family: 'Manrope', sans-serif; font-size: 11px; font-weight: 700;
letter-spacing: 0.08em; text-transform: uppercase;
color: var(--fp-gold); margin-top: 3px;
}
/* ─── 7. 顧客モーダル 大アバター (2026-07-28: serif → sans、 design-reviewer 指摘) ─── */
.cd-profile-avatar {
font-family: 'Noto Sans JP', sans-serif !important;
font-weight: 700 !important;
letter-spacing: 0 !important;
}
/* ─── 8. 同期 indicator (もし残ってたら) 非表示 ──────── */
#fp-sync-pill, #fp-sync-indicator { display: none !important; }
body.fp-syncing > * { filter: none !important; }
/* ─── 9. 微細: scrollbar / focus ring ─────────────────── */
.workspace::-webkit-scrollbar { width: 8px; }
.workspace::-webkit-scrollbar-track { background: transparent; }
.workspace::-webkit-scrollbar-thumb {
background: var(--fp-line-2); border-radius: 4px;
}
.workspace::-webkit-scrollbar-thumb:hover { background: var(--fp-ink-3); }
button:focus-visible, a:focus-visible {
outline: 2px solid var(--fp-indigo);
outline-offset: 2px;
}
/* ─── 10. count-badge / status-pill インディゴ統一 ─────── */
.count-badge {
background: var(--fp-indigo-soft) !important;
color: var(--fp-indigo) !important;
font-family: 'Manrope', sans-serif !important;
font-weight: 700 !important;
letter-spacing: 0.06em !important;
}
/* ─── 11. .cd-flow ダーク → 和モダン (顧客モーダル上部) ──── */
.cd-flow {
background-image: none !important;
background: var(--fp-paper) !important;
color: var(--fp-ink) !important;
border: 1px solid var(--fp-line) !important;
border-radius: 6px !important;
box-shadow: 0 1px 0 rgba(26,33,56,0.03) !important;
padding: 22px 26px !important;
}
.cd-flow::before { display: none !important; }
.cd-flow-eyebrow-pill {
color: var(--fp-gold) !important;
background: var(--fp-gold-soft) !important;
border-color: rgba(184,137,61,0.32) !important;
letter-spacing: 0.22em !important;
}
.cd-flow-eyebrow-pri {
color: var(--fp-danger) !important;
background: var(--fp-danger-soft) !important;
border-color: rgba(185,28,28,0.25) !important;
}
.cd-flow-title {
font-family: 'Noto Serif JP', serif !important;
font-weight: 600 !important;
font-size: 19px !important;
letter-spacing: 0.01em !important;
color: var(--fp-ink) !important;
}
.cd-flow-reason {
color: var(--fp-ink-2) !important;
font-size: 13px !important;
line-height: 1.85 !important;
}
.cd-flow-step {
background: #fff !important;
border: 1px solid var(--fp-line) !important;
border-radius: 6px !important;
color: var(--fp-ink) !important;
}
.cd-flow-step-active {
background: var(--fp-indigo) !important;
border-color: var(--fp-indigo) !important;
color: #fff !important;
box-shadow: 0 1px 0 rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.16) !important;
}
.cd-flow-step-label { color: var(--fp-ink) !important; font-weight: 700 !important; }
.cd-flow-step-active .cd-flow-step-label { color: #fff !important; }
.cd-flow-step-sub { color: var(--fp-ink-3) !important; font-size: 11.5px !important; }
.cd-flow-step-active .cd-flow-step-sub { color: rgba(255,255,255,0.78) !important; }
.cd-flow-step-no {
background: var(--fp-paper) !important;
color: var(--fp-ink-2) !important;
border: 1px solid var(--fp-line-2) !important;
}
.cd-flow-step-active .cd-flow-step-no {
background: rgba(255,255,255,0.18) !important;
color: #fff !important;
border-color: rgba(255,255,255,0.36) !important;
}
/* ─── 12. .cd-flow-edit 顧客情報を編集ボタン ──────────── */
.cd-flow-edit {
background: #fff !important;
border: 1px solid var(--fp-line-2) !important;
color: var(--fp-ink) !important;
border-radius: 6px !important;
font-family: 'Manrope', sans-serif !important;
font-size: 12px !important;
font-weight: 700 !important;
letter-spacing: 0.04em !important;
padding: 8px 14px !important;
}
.cd-flow-edit:hover { background: var(--fp-paper-2) !important; }
/* ─── 13. 顧客台帳 テーブル列 視覚密度ダウン ────────── */
table tbody td {
font-size: 13px !important;
vertical-align: middle !important;
}
.last-contact-rel,
td:last-child small {
font-family: 'Manrope', sans-serif !important;
color: var(--fp-ink-3) !important;
letter-spacing: 0.02em !important;
}
.status-pill {
font-family: 'Manrope', sans-serif !important;
letter-spacing: 0.06em !important;
font-size: 10.5px !important;
}
/* ─── 14. KPIカード active 状態を hairline 漆金で明確化 ─── */
[data-flow-step] {
border-radius: 6px !important;
border: 1px solid var(--fp-line) !important;
}
[data-flow-step].active,
[data-flow-step][data-state="active"],
.flow-card-active {
border: 1px solid var(--fp-gold) !important;
border-left: 3px solid var(--fp-gold) !important;
background: var(--fp-gold-soft) !important;
}
/* ============================================================
FP COMPASS — v11 VIVID SAAS PASS (2026-06-03)
Linear / Stripe / Notion 系。鮮やか差し色 + 太境界線 + 立体感
============================================================ */
:root {
/* 機能カテゴリ色 (左borderで瞬時識別) */
--vv-indigo: #5B5BF0;
--vv-indigo-2: #4747D8;
--vv-indigo-50: #EEF1FE;
--vv-orange: #F59E0B;
--vv-orange-50: #FFFBEB;
--vv-cyan: #06B6D4;
--vv-cyan-50: #ECFEFF;
--vv-green: #10B981;
--vv-green-50: #ECFDF5;
--vv-red: #E11D48;
--vv-red-50: #FFF1F2;
--vv-purple: #8B5CF6;
--vv-purple-50: #F5F3FF;
--vv-ink: #0F172A;
--vv-ink-2: #475569;
--vv-ink-3: #94A3B8;
--vv-line: #E2E8F0;
--vv-line-2: #CBD5E1;
--vv-paper: #F8FAFC;
--vv-paper-2: #F1F5F9;
/* 大きめ影で立体感 */
--vv-shadow-sm: 0 1px 2px rgba(15,23,42,0.06), 0 1px 4px rgba(15,23,42,0.05);
--vv-shadow-md: 0 4px 12px rgba(15,23,42,0.08), 0 2px 4px rgba(15,23,42,0.04);
--vv-shadow-lg: 0 16px 32px rgba(15,23,42,0.12), 0 4px 8px rgba(15,23,42,0.06);
--vv-shadow-xl: 0 24px 48px rgba(15,23,42,0.18), 0 8px 16px rgba(15,23,42,0.08);
}
/* ─── 1. KPI / 顧客カードに左border 4px で機能識別 ──── */
.kpi[data-tone="critical"], .kpi-critical { border-left: 4px solid var(--vv-red) !important; }
.kpi[data-tone="warn"], .kpi-warn { border-left: 4px solid var(--vv-orange) !important; }
.kpi[data-tone="positive"], .kpi-positive { border-left: 4px solid var(--vv-green) !important; }
.kpi[data-tone="neutral"], .kpi-neutral { border-left: 4px solid var(--vv-indigo) !important; }
.kpi {
border-radius: 10px !important;
box-shadow: var(--vv-shadow-md) !important;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.kpi:hover { transform: translateY(-2px); box-shadow: var(--vv-shadow-lg) !important; }
.kpi-value {
font-family: 'Manrope', sans-serif !important;
font-weight: 800 !important;
font-size: 36px !important;
letter-spacing: -0.03em !important;
color: var(--vv-ink) !important;
}
.kpi-label {
font-family: 'Manrope', sans-serif !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
color: var(--vv-ink-2) !important;
}
/* ─── 2. ステータスピル: 塗りつぶし + 白文字 ─────────── */
.status-pill {
font-family: 'Manrope', sans-serif !important;
font-size: 10.5px !important;
font-weight: 800 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
padding: 4px 10px !important;
border-radius: 999px !important;
color: #fff !important;
border: none !important;
display: inline-block;
}
.status-pill.important { background: var(--vv-red) !important; }
.status-pill.active { background: var(--vv-indigo) !important; }
.status-pill.new { background: var(--vv-green) !important; }
.status-pill.dormant { background: var(--vv-ink-3) !important; }
/* ─── 3. 顧客モーダル上部 .cd-flow (2026-07-31 v20260731Q owner NG「クソみたい/見えねえ」 fix)
* 旧: 鮮やか インディゴ hero card (紫グラデ + 白文字)
* 新: 白 base + ink 黒 (Drill D の 2 big card の 上 に 乗せる container 化) */
.cd-flow {
background: #FFFFFF !important;
background-image: none !important;
color: #0F1729 !important;
border: 1px solid #E5E7EB !important;
border-radius: 14px !important;
box-shadow: 0 2px 8px rgba(15,23,41,0.05) !important;
padding: 22px 24px !important;
position: relative !important;
overflow: visible !important;
}
.cd-flow::before { display: none !important; }
.cd-flow-eyebrow-pill {
background: linear-gradient(135deg, #C19A3A, #A0822E) !important;
color: #FFFFFF !important;
border: none !important;
letter-spacing: 0.14em !important;
font-weight: 800 !important;
}
.cd-flow-eyebrow-pri {
background: #FEE2E2 !important;
color: #991B1B !important;
border: none !important;
letter-spacing: 0.08em !important;
font-weight: 800 !important;
}
.cd-flow-title {
font-family: 'Noto Sans JP', 'Manrope', sans-serif !important;
font-weight: 900 !important;
font-size: 22px !important;
color: #0F1729 !important;
letter-spacing: -0.015em !important;
margin-bottom: 6px !important;
}
.cd-flow-reason {
color: #4B5563 !important;
font-size: 13px !important;
font-weight: 500 !important;
line-height: 1.65 !important;
}
.cd-flow-step {
background: rgba(255,255,255,0.12) !important;
border: 1px solid rgba(255,255,255,0.18) !important;
color: #fff !important;
border-radius: 10px !important;
transition: background 0.15s ease, transform 0.08s ease;
}
.cd-flow-step:hover { background: rgba(255,255,255,0.22) !important; transform: translateY(-1px); }
.cd-flow-step-active {
background: #fff !important;
border: 1px solid #fff !important;
color: var(--vv-indigo) !important;
box-shadow: var(--vv-shadow-md) !important;
}
.cd-flow-step-label { color: #fff !important; font-weight: 700 !important; font-size: 13.5px !important; }
.cd-flow-step-active .cd-flow-step-label { color: var(--vv-indigo) !important; }
.cd-flow-step-sub { color: rgba(255,255,255,0.75) !important; }
.cd-flow-step-active .cd-flow-step-sub { color: var(--vv-ink-2) !important; }
.cd-flow-step-no {
background: rgba(255,255,255,0.22) !important;
color: #fff !important;
border: 1px solid rgba(255,255,255,0.32) !important;
border-radius: 8px !important;
}
.cd-flow-step-active .cd-flow-step-no {
background: var(--vv-indigo) !important;
color: #fff !important;
border-color: var(--vv-indigo) !important;
}
.cd-flow-edit {
background: rgba(255,255,255,0.16) !important;
color: #fff !important;
border: 1px solid rgba(255,255,255,0.28) !important;
border-radius: 8px !important;
font-weight: 700 !important;
font-size: 12.5px !important;
letter-spacing: 0.04em !important;
}
.cd-flow-edit:hover { background: rgba(255,255,255,0.26) !important; }
/* ─── 4. 面談記録カード — 色分けされた左帯で機能識別 ──── */
.fp-meeting-card {
background: #fff !important;
border: 1px solid var(--vv-line) !important;
border-left: 5px solid var(--vv-green) !important; /* 完了済議事録=緑 */
padding: 24px 28px !important;
box-shadow: var(--vv-shadow-md) !important;
border-radius: 10px !important;
position: relative !important;
}
/* 2026-07-11 owner FB: top:-10px で 親overflow に 切れる + 削除ボタン と 位置競合
→ top:12px right:auto left:12px に 変更 (カード左上、 削除ボタン 右上 と 衝突しない) */
.fp-meeting-card::before {
content: '✓ 議事録';
position: absolute; top: 12px; left: 12px;
background: var(--vv-green); color: #fff;
font-family: 'Manrope', sans-serif; font-size: 10px; font-weight: 800;
letter-spacing: 0.12em; text-transform: uppercase;
padding: 4px 12px; border-radius: 999px;
box-shadow: var(--vv-shadow-sm);
z-index: 3;
}
.fp-meeting-card { padding-top: 44px !important; /* pill 上部 分 の 隙間確保 */ }
.fp-meeting-card-orphan {
border-left-color: var(--vv-cyan) !important;
}
.fp-meeting-card-orphan::before {
content: '🎙 録画ベース'; background: var(--vv-cyan) !important;
}
.fp-meeting-card-eyebrow {
color: var(--vv-green) !important;
font-family: 'Manrope', sans-serif !important;
font-weight: 800 !important;
}
.fp-meeting-card-orphan .fp-meeting-card-eyebrow { color: var(--vv-cyan) !important; }
.fp-meeting-card-date {
font-family: 'Manrope', sans-serif !important;
font-size: 19px !important;
font-weight: 800 !important;
color: var(--vv-ink) !important;
letter-spacing: -0.015em !important;
}
.fp-meeting-block-label {
color: var(--vv-ink-3) !important;
font-family: 'Manrope', sans-serif !important;
font-weight: 800 !important;
font-size: 11px !important;
letter-spacing: 0.16em !important;
}
.fp-meeting-block-label::before { background: var(--vv-ink-3) !important; }
.fp-meeting-body {
background: var(--vv-paper) !important;
border: 1px solid var(--vv-line) !important;
border-radius: 8px !important;
padding: 16px 20px !important;
color: var(--vv-ink) !important;
font-size: 13.5px !important;
line-height: 1.85 !important;
}
/* お客様の関心事 chip = 塗りつぶしインディゴ */
.fp-concern-chip {
background: var(--vv-indigo) !important;
color: #fff !important;
border: none !important;
padding: 6px 14px !important;
border-radius: 999px !important;
font-weight: 700 !important;
font-size: 12px !important;
letter-spacing: 0.04em !important;
box-shadow: var(--vv-shadow-sm);
}
/* ─── 5. 候補日確定待ちカード — オレンジ太帯 ───────── */
.fp-pending-card,
[data-pending-card] {
border-left: 5px solid var(--vv-orange) !important;
border-radius: 10px !important;
box-shadow: var(--vv-shadow-md) !important;
padding: 20px 24px !important;
}
.fp-pending-card::before,
[data-pending-card]::before {
content: '⏳ 確定待ち';
background: var(--vv-orange) !important;
color: #fff !important;
font-family: 'Manrope', sans-serif !important;
font-size: 10px !important; font-weight: 800 !important;
letter-spacing: 0.12em !important;
padding: 4px 12px !important; border-radius: 999px !important;
}
/* ─── 6. ボタン階層を vivid に ─────────────────── */
.fp-btn-primary {
background: var(--vv-indigo) !important;
color: #fff !important;
border: none !important;
box-shadow: 0 4px 12px rgba(91,91,240,0.3), inset 0 1px 0 rgba(255,255,255,0.16) !important;
padding: 10px 18px !important;
font-weight: 800 !important;
}
.fp-btn-primary:hover {
background: var(--vv-indigo-2) !important;
box-shadow: 0 6px 18px rgba(91,91,240,0.4), inset 0 1px 0 rgba(255,255,255,0.16) !important;
transform: translateY(-1px);
}
.fp-btn-danger {
background: var(--vv-red) !important;
color: #fff !important;
border: none !important;
box-shadow: 0 4px 12px rgba(225,29,72,0.25) !important;
}
.fp-btn-danger:hover { background: #BE123C !important; }
.fp-btn-gold {
background: var(--vv-orange) !important;
color: #fff !important;
border: none !important;
box-shadow: 0 4px 12px rgba(245,158,11,0.3) !important;
}
.fp-btn-gold:hover { background: #D97706 !important; }
/* ─── 7. count-badge — インディゴ塗り ─────────────── */
.count-badge {
background: var(--vv-indigo) !important;
color: #fff !important;
font-family: 'Manrope', sans-serif !important;
font-weight: 800 !important;
letter-spacing: 0.08em !important;
padding: 3px 10px !important;
border-radius: 999px !important;
}
/* ─── 8. 大きな日付・数字を Vivid 化 (例: KPI Hero) ── */
.cd-profile-avatar {
background: linear-gradient(135deg, var(--vv-indigo) 0%, var(--vv-purple) 100%) !important;
color: #fff !important;
box-shadow: var(--vv-shadow-lg) !important;
}
/* ─── 9. タブ active state を太い下線で ──────────── */
.cd-tab {
font-family: 'Manrope', sans-serif !important;
font-weight: 700 !important;
letter-spacing: 0.04em !important;
color: var(--vv-ink-2) !important;
padding: 12px 16px !important;
border-bottom: 3px solid transparent !important;
transition: color 0.15s ease, border-color 0.15s ease;
}
.cd-tab:hover { color: var(--vv-ink) !important; }
.cd-tab-active {
color: var(--vv-indigo) !important;
border-bottom-color: var(--vv-indigo) !important;
}
/* ─── 10. テーブル ステータス列が見やすく ────────── */
.fp-task-badge {
background: var(--vv-orange-50) !important;
color: var(--vv-orange) !important;
border: 1px solid var(--vv-orange) !important;
font-weight: 800 !important;
}
/* ─── 11. 「LINE」緑バッジ強調 ───────────────────── */
.cd-line-pill {
background: #06C755 !important;
color: #fff !important;
border: none !important;
font-weight: 800 !important;
letter-spacing: 0.06em !important;
padding: 4px 10px !important;
border-radius: 999px !important;
box-shadow: 0 2px 6px rgba(6,199,85,0.3) !important;
}
/* ============================================================
v12 — 階層別 7-Tier カラーシステム (2026-06-03)
旧 5色 → 7色に拡張、各カテゴリ/フェーズ毎に色割当
============================================================ */
:root {
/* ── 追加 2色 ── */
--vv-pink: #EC4899;
--vv-pink-50: #FDF2F8;
--vv-sky: #0EA5E9;
--vv-sky-50: #F0F9FF;
/* ── 7階層フェーズマップ ──
1. NEW 新規追加 → ピンク (注目)
2. PENDING 確定待ち → オレンジ (アクション必要)
3. ACTIVE 進行中 → インディゴ (主作業)
4. RECORDING 録画中/Zoom予定 → シアン (リアルタイム)
5. DONE 完了/議事録あり → グリーン (成功)
6. INFO 情報/参照 → スカイブルー (中立)
7. WARN 警告/キャンセル → 赤 (注意)
*/
}
/* ─── 1. KPIカード data-tone を 7階層に再マップ ─── */
.kpi[data-tone="new"] { border-left: 5px solid var(--vv-pink) !important; }
.kpi[data-tone="pending"] { border-left: 5px solid var(--vv-orange) !important; }
.kpi[data-tone="active"] { border-left: 5px solid var(--vv-indigo) !important; }
.kpi[data-tone="recording"] { border-left: 5px solid var(--vv-cyan) !important; }
.kpi[data-tone="done"] { border-left: 5px solid var(--vv-green) !important; }
.kpi[data-tone="info"] { border-left: 5px solid var(--vv-sky) !important; }
.kpi[data-tone="warn"] { border-left: 5px solid var(--vv-red) !important; }
.kpi[data-tone="critical"] { border-left: 5px solid var(--vv-red) !important; }
.kpi[data-tone="positive"] { border-left: 5px solid var(--vv-green) !important; }
.kpi[data-tone="neutral"] { border-left: 5px solid var(--vv-indigo) !important; }
/* KPI 数字色 = カテゴリ色 */
.kpi[data-tone="new"] .kpi-value { color: var(--vv-pink) !important; }
.kpi[data-tone="pending"] .kpi-value { color: var(--vv-orange) !important; }
.kpi[data-tone="active"] .kpi-value { color: var(--vv-indigo) !important; }
.kpi[data-tone="recording"] .kpi-value { color: var(--vv-cyan) !important; }
.kpi[data-tone="done"] .kpi-value { color: var(--vv-green) !important; }
.kpi[data-tone="info"] .kpi-value { color: var(--vv-sky) !important; }
.kpi[data-tone="warn"] .kpi-value,
.kpi[data-tone="critical"] .kpi-value { color: var(--vv-red) !important; }
/* KPI 上部に小さい色アクセント帯 */
.kpi { position: relative; overflow: hidden; }
.kpi::before {
content: ''; position: absolute; top: 0; left: 0; right: 0;
height: 4px; background: var(--vv-line);
}
.kpi[data-tone="new"]::before { background: var(--vv-pink); }
.kpi[data-tone="pending"]::before { background: var(--vv-orange); }
.kpi[data-tone="active"]::before { background: var(--vv-indigo); }
.kpi[data-tone="recording"]::before { background: var(--vv-cyan); }
.kpi[data-tone="done"]::before,
.kpi[data-tone="positive"]::before { background: var(--vv-green); }
.kpi[data-tone="info"]::before { background: var(--vv-sky); }
.kpi[data-tone="warn"]::before,
.kpi[data-tone="critical"]::before { background: var(--vv-red); }
/* ─── 2. ステータスピル 7階層対応 ─────────────────── */
.status-pill.new { background: var(--vv-pink) !important; }
.status-pill.pending { background: var(--vv-orange) !important; }
.status-pill.active { background: var(--vv-indigo) !important; }
.status-pill.recording { background: var(--vv-cyan) !important; }
.status-pill.done,
.status-pill.complete { background: var(--vv-green) !important; }
.status-pill.info { background: var(--vv-sky) !important; }
.status-pill.warn,
.status-pill.important { background: var(--vv-red) !important; }
.status-pill.dormant { background: var(--vv-ink-3) !important; }
/* ─── 3. 顧客モーダル タブ アクティブ色を各タブ別に ─── */
.cd-tab[data-cdtab="overview"].cd-tab-active { color: var(--vv-indigo) !important; border-bottom-color: var(--vv-indigo) !important; }
.cd-tab[data-cdtab="timeline"].cd-tab-active { color: var(--vv-sky) !important; border-bottom-color: var(--vv-sky) !important; }
.cd-tab[data-cdtab="line"].cd-tab-active { color: #06C755 !important; border-bottom-color: #06C755 !important; }
.cd-tab[data-cdtab="proposals"].cd-tab-active { color: var(--vv-pink) !important; border-bottom-color: var(--vv-pink) !important; }
.cd-tab[data-cdtab="meetings"].cd-tab-active { color: var(--vv-green) !important; border-bottom-color: var(--vv-green) !important; }
/* ─── 4. タイムライン event 種別 7色分け ───────────── */
.timeline-event.life, .timeline-event[class*="life"] { background: var(--vv-pink-50) !important; color: var(--vv-pink) !important; border-left: 3px solid var(--vv-pink) !important; }
.timeline-event.proposal, .timeline-event[class*="proposal"] { background: var(--vv-indigo-50) !important; color: var(--vv-indigo) !important; border-left: 3px solid var(--vv-indigo) !important; }
.timeline-event.meeting, .timeline-event[class*="meeting"] { background: var(--vv-green-50) !important; color: var(--vv-green) !important; border-left: 3px solid var(--vv-green) !important; }
.timeline-event.contact, .timeline-event[class*="contact"] { background: var(--vv-sky-50) !important; color: var(--vv-sky) !important; border-left: 3px solid var(--vv-sky) !important; }
.timeline-event.education, .timeline-event[class*="education"] { background: var(--vv-orange-50) !important; color: var(--vv-orange) !important; border-left: 3px solid var(--vv-orange) !important; }
.timeline-event.retirement, .timeline-event[class*="retirement"] { background: var(--vv-cyan-50) !important; color: var(--vv-cyan) !important; border-left: 3px solid var(--vv-cyan) !important; }
.timeline-event.cancel, .timeline-event[class*="cancel"] { background: var(--vv-red-50) !important; color: var(--vv-red) !important; border-left: 3px solid var(--vv-red) !important; }
/* ─── 5. KPI バッジ delta (上昇/下降) ─────────────── */
.kpi-delta-up { background: var(--vv-green-50) !important; color: var(--vv-green) !important; border: 1px solid var(--vv-green) !important; }
.kpi-delta-down { background: var(--vv-red-50) !important; color: var(--vv-red) !important; border: 1px solid var(--vv-red) !important; }
/* ─── 6. 候補日確定待ち = オレンジ系 で統一感 ─────── */
[data-pending-card], .fp-pending-card {
background: linear-gradient(180deg, var(--vv-orange-50) 0%, #fff 50%) !important;
}
/* ─── 7. nav-count バッジ も階層色対応 ─────────── */
.nav-count {
font-family: 'Manrope', sans-serif !important;
font-weight: 800 !important;
letter-spacing: 0.04em !important;
border-radius: 999px !important;
min-width: 22px !important; height: 20px !important;
font-size: 11px !important;
}
[data-nav="clients"] .nav-count { background: var(--vv-pink) !important; color: #fff !important; }
[data-nav="lifeEvents"] .nav-count { background: var(--vv-sky) !important; color: #fff !important; }
[data-nav="kpi"] .nav-count { background: var(--vv-orange) !important; color: #fff !important; }
[data-nav="leadHub"] .nav-count { background: var(--vv-red) !important; color: #fff !important; }
[data-nav="birthdayTab"] .nav-count { background: var(--vv-pink) !important; color: #fff !important; }
[data-nav="calendarTab"] .nav-count { background: var(--vv-cyan) !important; color: #fff !important; }
/* ─── 8. status-pill グレー時のテキストはダーク ─────── */
.status-pill.dormant { color: #fff !important; }
/* ============================================================
v14 — ステータスピル可読性 fix + 推奨アクション block
============================================================ */
/* ── ① status-pill 文字+dot コントラスト確保 ── */
.status-pill {
color: #fff !important;
font-weight: 800 !important;
border: none !important;
box-shadow: 0 1px 2px rgba(15,23,42,0.1);
font-size: 10.5px !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
}
.status-pill::before {
background: rgba(255,255,255,0.65) !important;
opacity: 1 !important;
}
.status-pill.dormant { background: var(--vv-ink-3) !important; color: #fff !important; }
/* ── ③ 顧客モーダル 概観タブ「次の一手」ブロック ── */
.fp-next-action {
background: linear-gradient(135deg, var(--vv-indigo) 0%, #6D6DEF 100%);
color: #fff;
border-radius: 12px;
padding: 20px 24px;
margin-bottom: 18px;
box-shadow: 0 8px 24px rgba(91,91,240,0.22);
position: relative;
overflow: hidden;
}
.fp-next-action::before {
content: ''; position: absolute; top: -60px; right: -60px;
width: 200px; height: 200px;
background: radial-gradient(circle, rgba(255,255,255,0.18), transparent 70%);
}
.fp-next-action-eyebrow {
font-family: 'Manrope', sans-serif;
font-size: 10.5px; font-weight: 800;
letter-spacing: 0.22em; text-transform: uppercase;
color: rgba(255,255,255,0.85);
margin-bottom: 8px;
display: flex; align-items: center; gap: 8px;
}
.fp-next-action-title {
font-family: 'Manrope', sans-serif;
font-weight: 800; font-size: 18px;
letter-spacing: -0.015em;
margin-bottom: 12px;
position: relative;
}
.fp-next-action-body {
font-size: 13.5px; line-height: 1.85;
color: rgba(255,255,255,0.92);
margin-bottom: 14px;
white-space: pre-wrap;
position: relative;
}
.fp-next-action-tasks {
display: grid; gap: 8px;
position: relative;
}
.fp-next-action-task {
background: rgba(255,255,255,0.16);
border: 1px solid rgba(255,255,255,0.22);
border-radius: 8px;
padding: 10px 14px;
display: grid;
grid-template-columns: auto 1fr auto auto;
gap: 10px;
align-items: center;
font-size: 12.5px;
font-family: 'Noto Sans JP', sans-serif;
}
.fp-next-action-task-icon { font-size: 16px; }
.fp-next-action-task-title { font-weight: 700; color: #fff; }
.fp-next-action-task-due {
font-family: 'Manrope', sans-serif;
font-size: 11px; font-weight: 700;
letter-spacing: 0.04em;
color: rgba(255,255,255,0.78);
}
.fp-next-action-task-make {
background: #fff; color: var(--vv-indigo);
border: none; border-radius: 6px;
padding: 6px 10px;
font-size: 11px; font-weight: 800;
font-family: 'Manrope', sans-serif;
letter-spacing: 0.04em;
cursor: pointer;
white-space: nowrap;
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.fp-next-action-task-make:hover { background: var(--vv-paper); }
/* ── ② 年末配布の上カード揃え (.distribution-card 系) ── */
.distribution-card, .cal-card, .config-card {
background: #fff !important;
border: 1px solid var(--vv-line) !important;
border-radius: 12px !important;
padding: 18px 20px !important;
box-shadow: var(--vv-shadow-md) !important;
}
/* 未読バッジ pulse (LINE 赤バッジ) */
@keyframes fp-unread-pulse {
0%, 100% { transform: scale(1); box-shadow: 0 2px 6px rgba(220,38,38,0.4); }
50% { transform: scale(1.1); box-shadow: 0 4px 14px rgba(220,38,38,0.6); }
}
/* ★ AI返信下書き CTA オレンジ強制 (CSS !important で紫上書き撃破) */
.fp-draft-cta#modal-draft-btn,
button.fp-draft-cta {
background: linear-gradient(135deg, #F97316 0%, #EA580C 50%, #F97316 100%) !important;
background-size: 200% 200% !important;
color: #fff !important;
border: none !important;
animation: none !important;
box-shadow: 0 8px 24px rgba(249,115,22,0.55), 0 0 0 4px rgba(255,255,255,0.5) !important;
}
.fp-draft-cta#modal-draft-btn .cd-flow-step-label,
.fp-draft-cta#modal-draft-btn .cd-flow-step-sub {
color: #fff !important;
}
.fp-draft-cta#modal-draft-btn .cd-flow-step-no {
color: #fff !important;
background: rgba(255,255,255,0.25) !important;
}
@keyframes fp-draft-cta-pulse {
0%, 100% { transform: translateY(0) scale(1); box-shadow: 0 8px 24px rgba(249,115,22,0.55), 0 0 0 4px rgba(255,255,255,0.5); }
50% { transform: translateY(-2.5px) scale(1.025); box-shadow: 0 16px 36px rgba(249,115,22,0.72), 0 0 0 7px rgba(255,255,255,0.6); }
}
@keyframes fp-draft-cta-gradient {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* ★ 本番モード (data-prod="1") では デモ/開発系UIを完全非表示
2026-07-11: #modal-delete-btn は owner request で 復活 (誤って作成した顧客 削除できるよう) */
body[data-prod="1"] #fp-reset-all-data,
body[data-prod="1"] #fp-reset-all-data-top,
body[data-prod="1"] .real-mode-toggle,
body[data-prod="1"] .upgrade-mini,
body[data-prod="1"] #form-delete-btn { display: none !important; }
body[data-prod="1"] .demo-only,
body[data-prod="1"] [data-demo-only],
body[data-prod="1"] .brand-badge { display: none !important; }
/* ============================================================
CTA Button System (2026-06-22 roundD)
参考: 目を引くCTAデザイン6選 のうち pattern 1/2/5 を採用
階層: PRIMARY (確定アクション) / SECONDARY (個別) / GHOST (キャンセル)
既存サンセット (#c19a3a / #9a5a18) + navy を使い、 派手すぎない業務UI
============================================================ */
:root {
--cta-gold: #C19A3A;
--cta-gold-deep: #9A5A18;
--cta-gold-cream: #FBF5E3;
--cta-gold-shadow: rgba(193,154,58,0.32);
--cta-ink: #1F2A3F;
--cta-red: #B91C3C;
--cta-red-shadow: rgba(185,28,60,0.28);
--cta-line: #E8E2D4;
}
/* ───── PRIMARY ───── 一斉送信 / 予約確定 / 録画開始 等 確定アクション */
.btn-cta-primary {
position: relative;
display: inline-flex;
align-items: center;
gap: 14px;
background: linear-gradient(135deg, var(--cta-gold) 0%, var(--cta-gold-deep) 100%);
color: #fff;
border: none;
border-radius: 99px;
padding: 16px 26px 16px 32px;
font-family: 'Hiragino Sans', 'Noto Sans JP', sans-serif;
font-weight: 800;
font-size: 15px;
letter-spacing: 0.04em;
cursor: pointer;
box-shadow:
0 6px 16px var(--cta-gold-shadow),
inset 0 1px 0 rgba(255,255,255,0.22);
transition: transform .15s, box-shadow .18s, filter .15s;
white-space: nowrap;
}
.btn-cta-primary:hover {
transform: translateY(-2px);
box-shadow:
0 10px 26px var(--cta-gold-shadow),
inset 0 1px 0 rgba(255,255,255,0.3);
filter: brightness(1.05);
}
.btn-cta-primary:active {
transform: translateY(0);
box-shadow: 0 3px 10px var(--cta-gold-shadow);
}
.btn-cta-primary:disabled {
opacity: 0.55;
cursor: not-allowed;
transform: none;
}
.btn-cta-primary .cta-arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
background: #fff;
color: var(--cta-gold-deep);
border-radius: 50%;
font-size: 14px;
font-weight: 900;
transition: transform .2s;
}
.btn-cta-primary:hover .cta-arrow { transform: translateX(3px); }
/* 上に乗る 吹き出し風 サブラベル (参考 #2) */
.btn-cta-primary-wrap {
position: relative;
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 0;
isolation: isolate;
}
.btn-cta-primary-chip {
position: relative;
z-index: 2;
background: var(--cta-ink);
color: var(--cta-gold-cream);
font-family: 'Hiragino Sans', sans-serif;
font-weight: 800;
font-size: 11.5px;
letter-spacing: 0.06em;
padding: 6px 18px;
border-radius: 99px;
margin-bottom: -14px;
box-shadow: 0 4px 10px rgba(31,42,63,0.25);
white-space: nowrap;
}
.btn-cta-primary-chip::before,
.btn-cta-primary-chip::after {
content: '';
position: absolute;
top: 50%;
width: 1px;
height: 16px;
background: var(--cta-gold);
transform: translateY(-50%) rotate(15deg);
}
.btn-cta-primary-chip::before { left: -12px; transform: translateY(-50%) rotate(-20deg); }
.btn-cta-primary-chip::after { right: -12px; transform: translateY(-50%) rotate(20deg); }
.btn-cta-primary-wrap .btn-cta-primary { z-index: 1; padding-top: 20px; }
.btn-cta-primary-wrap:hover .btn-cta-primary-chip {
transform: translateY(-2px);
transition: transform .2s;
}
/* DANGER バリアント (赤系) — 削除 / キャンセル 等の取消できないアクション */
.btn-cta-primary.is-danger {
background: linear-gradient(135deg, #DC2626 0%, var(--cta-red) 100%);
box-shadow: 0 6px 16px var(--cta-red-shadow), inset 0 1px 0 rgba(255,255,255,0.22);
}
.btn-cta-primary.is-danger .cta-arrow { color: var(--cta-red); }
.btn-cta-primary.is-danger:hover {
box-shadow: 0 10px 26px var(--cta-red-shadow), inset 0 1px 0 rgba(255,255,255,0.3);
}
/* ───── SECONDARY ───── 個別送信 / 編集 等 (参考 #5: 円バッジ+矢印) */
.btn-cta-secondary {
display: inline-flex;
align-items: center;
gap: 10px;
background: #fff;
color: var(--cta-ink);
border: 1.5px solid var(--cta-gold);
border-radius: 99px;
padding: 9px 18px 9px 9px;
font-family: 'Hiragino Sans', sans-serif;
font-weight: 700;
font-size: 13px;
letter-spacing: 0.02em;
cursor: pointer;
box-shadow: 0 2px 6px rgba(193,154,58,0.12);
transition: background .12s, border-color .12s, box-shadow .12s, transform .12s;
}
.btn-cta-secondary:hover {
background: var(--cta-gold-cream);
border-color: var(--cta-gold-deep);
box-shadow: 0 4px 12px rgba(193,154,58,0.2);
transform: translateY(-1px);
}
.btn-cta-secondary:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
}
.btn-cta-secondary .cta-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
background: var(--cta-gold);
color: #fff;
border-radius: 50%;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.02em;
flex-shrink: 0;
}
.btn-cta-secondary .cta-tail {
font-size: 13px;
color: var(--cta-gold-deep);
font-weight: 800;
margin-left: 4px;
transition: transform .15s;
}
.btn-cta-secondary:hover .cta-tail { transform: translateX(3px); }
/* ───── GHOST ───── キャンセル / 戻る (参考 #6 派生: 下線下) */
.btn-cta-ghost {
background: transparent;
color: #6B7280;
border: none;
padding: 10px 14px;
font-family: 'Hiragino Sans', sans-serif;
font-weight: 600;
font-size: 13px;
cursor: pointer;
border-bottom: 1.5px solid transparent;
border-radius: 0;
transition: color .12s, border-color .12s;
}
.btn-cta-ghost:hover {
color: var(--cta-ink);
border-bottom-color: var(--cta-gold);
}
/* Reduced motion: 動きを止める */
@media (prefers-reduced-motion: reduce) {
.btn-cta-primary, .btn-cta-secondary, .cta-arrow, .cta-tail, .btn-cta-primary-chip { transition: none !important; }
.btn-cta-primary:hover, .btn-cta-secondary:hover { transform: none !important; }
}
/* ============================================================
細部ボタン system v1 (2026-06-22 roundF)
主要 CTA (.btn-cta-primary) と整合する 小型 component 群
- .btn-mini-action : table行内 / カード内 の 24-28px 小ボタン
- .chip / .chip-* : 矩形 status pill
- .icon-btn : 28x28 円形 icon-only
- .input-suffix-btn : input field 右隣接
既存 .ghost / .btn-mini は 壊さず 上塗りで 統一感UP
============================================================ */
/* ───── .btn-mini-action : 小ボタン (capsule gold ghost) ───── */
.btn-mini-action {
display: inline-flex;
align-items: center;
gap: 6px;
background: transparent;
color: var(--cta-ink, #1F2A3F);
border: 1.5px solid var(--cta-gold, #C19A3A);
border-radius: 99px;
padding: 5px 14px;
font-family: 'Hiragino Sans', 'Noto Sans JP', sans-serif;
font-weight: 700;
font-size: 11.5px;
letter-spacing: 0.02em;
cursor: pointer;
transition: background .12s, border-color .12s, color .12s, transform .12s;
white-space: nowrap;
line-height: 1.4;
}
.btn-mini-action:hover {
background: var(--cta-gold-cream, #FBF5E3);
border-color: var(--cta-gold-deep, #9A5A18);
color: var(--cta-gold-deep, #9A5A18);
}
.btn-mini-action:active { transform: scale(0.97); }
.btn-mini-action:disabled {
opacity: 0.45;
cursor: not-allowed;
background: transparent;
color: #9CA3AF;
border-color: #E5E7EB;
}
.btn-mini-action.is-danger {
border-color: #DC2626;
color: #B91C1C;
}
.btn-mini-action.is-danger:hover {
background: #FEF2F2;
border-color: #991B1B;
color: #7F1D1D;
}
.btn-mini-action.is-line {
border-color: #06C755;
color: #047857;
}
.btn-mini-action.is-line:hover {
background: #F0FDF4;
border-color: #047857;
color: #065F46;
}
.btn-mini-action .icon {
font-size: 12px;
line-height: 1;
}
/* ───── .chip : 矩形 status pill (ink bg + cream text) ───── */
.chip {
display: inline-flex;
align-items: center;
gap: 4px;
background: var(--cta-ink, #1F2A3F);
color: #FCFAF2;
font-family: 'Inter', 'Hiragino Sans', sans-serif;
font-weight: 800;
font-size: 10.5px;
letter-spacing: 0.08em;
padding: 3px 9px;
border-radius: 5px;
text-transform: uppercase;
line-height: 1.4;
}
.chip.chip-warn { background: #92400E; color: #FEF3C7; }
.chip.chip-success { background: #065F46; color: #D1FAE5; }
.chip.chip-info { background: #1E3A5F; color: #DBEAFE; }
.chip.chip-line { background: #06C755; color: #fff; }
.chip.chip-danger { background: #991B1B; color: #FEE2E2; }
.chip.chip-gold { background: var(--cta-gold-cream, #FBF5E3); color: var(--cta-gold-deep, #9A5A18); }
/* ───── .icon-btn : 円形 icon-only (28x28) ───── */
.icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
background: transparent;
color: #6B7280;
border: 1px solid transparent;
border-radius: 50%;
font-size: 14px;
cursor: pointer;
transition: background .12s, color .12s, box-shadow .15s, border-color .12s;
flex-shrink: 0;
line-height: 1;
}
.icon-btn:hover {
background: var(--cta-gold-cream, #FBF5E3);
color: var(--cta-gold-deep, #9A5A18);
box-shadow: 0 0 0 2px rgba(193, 154, 58, 0.25);
}
.icon-btn:active { background: var(--cta-gold, #C19A3A); color: #fff; }
.icon-btn.is-active {
background: var(--cta-gold, #C19A3A);
color: #fff;
border-color: var(--cta-gold-deep, #9A5A18);
}
.icon-btn.is-danger:hover {
background: #FEF2F2;
color: #B91C1C;
box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.18);
}
.icon-btn.lg { width: 36px; height: 36px; font-size: 17px; }
.icon-btn.sm { width: 24px; height: 24px; font-size: 12px; }
/* ───── .input-suffix-btn : input 右隣接 (gold solid) ───── */
.input-suffix-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
background: linear-gradient(135deg, var(--cta-gold, #C19A3A) 0%, var(--cta-gold-deep, #9A5A18) 100%);
color: #fff;
border: none;
border-radius: 0 6px 6px 0;
padding: 0 16px;
font-family: 'Hiragino Sans', sans-serif;
font-weight: 700;
font-size: 12px;
letter-spacing: 0.02em;
cursor: pointer;
transition: filter .12s;
white-space: nowrap;
min-height: 36px;
align-self: stretch;
}
.input-suffix-btn:hover { filter: brightness(1.06); }
.input-suffix-btn:active { filter: brightness(0.95); }
.input-suffix-btn:disabled { opacity: 0.5; cursor: not-allowed; }
/* input + suffix-btn を 連結 する wrapper */
.input-with-suffix {
display: inline-flex;
align-items: stretch;
width: 100%;
}
.input-with-suffix > input,
.input-with-suffix > textarea {
flex: 1;
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
border-right: none !important;
min-height: 36px;
}
/* ───── 既存マークアップ への 自動適用 (selector 上書きで 統一感) ───── */
/* .btn-mini が 「コピー」「編集」 等の 行内ボタン として使われてる箇所を 上塗り */
button.btn-mini:not(.btn-cta-primary):not(.btn-cta-secondary) {
/* roundE で 下線アンダー化したが それは ghost テキストリンク向け
btn-mini が 実ボタン (action) として使われてる時は capsule にする */
display: inline-flex;
align-items: center;
gap: 5px;
}
/* table 行内の 小ボタン (= class 指定無しの button) を gold ghost capsule に */
table tbody button:not([class]),
table tbody button.btn-mini {
background: transparent !important;
color: var(--cta-ink, #1F2A3F) !important;
border: 1.5px solid var(--cta-gold, #C19A3A) !important;
border-radius: 99px !important;
padding: 5px 14px !important;
font-weight: 700 !important;
font-size: 11.5px !important;
border-bottom-color: var(--cta-gold, #C19A3A) !important;
}
table tbody button:not([class]):hover,
table tbody button.btn-mini:hover {
background: var(--cta-gold-cream, #FBF5E3) !important;
border-color: var(--cta-gold-deep, #9A5A18) !important;
color: var(--cta-gold-deep, #9A5A18) !important;
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.btn-mini-action, .icon-btn, .input-suffix-btn { transition: none !important; }
.btn-mini-action:active { transform: none !important; }
}
/* ============================================================
顧客モーダル クイックアクション CTA v2 (2026-06-22 roundL)
オーナー指定: 「\\全員に1クリック/」 吹き出し + ゴールド capsule + 円形アロー
構造: 吹き出し (上に重なる) + capsule本体 + 右に円形アロー
============================================================ */
.fp-qa-pop {
position: relative;
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 0;
background: transparent !important;
border: none !important;
padding: 14px 0 0 !important;
cursor: pointer;
font-family: 'Hiragino Sans', 'Noto Sans JP', sans-serif !important;
min-height: 0 !important;
width: 100%;
isolation: isolate;
}
.fp-qa-pop:focus-visible {
outline: 3px solid rgba(193, 154, 58, 0.45);
outline-offset: 4px;
border-radius: 16px;
}
/* 上の吹き出しチップ */
.fp-qa-tip {
position: relative;
z-index: 2;
background: #1F2A3F;
color: #FBF5E3;
font-family: 'Hiragino Sans', sans-serif;
font-weight: 800;
font-size: 10.5px;
letter-spacing: 0.08em;
padding: 4px 16px;
border-radius: 99px;
margin-bottom: -12px;
box-shadow: 0 4px 10px rgba(31, 42, 63, 0.28);
white-space: nowrap;
transition: transform .25s cubic-bezier(.2,.7,.3,1.2), box-shadow .2s;
letter-spacing: 0.04em;
}
/* 吹き出し両端の斜線 (// と \\) */
.fp-qa-tip::before,
.fp-qa-tip::after {
content: '';
position: absolute;
top: 50%;
width: 1.5px;
height: 13px;
background: var(--fp-qa-accent, #C19A3A);
border-radius: 1px;
}
.fp-qa-tip::before {
left: -10px;
transform: translateY(-50%) rotate(-18deg);
}
.fp-qa-tip::after {
right: -10px;
transform: translateY(-50%) rotate(18deg);
}
/* メイン capsule */
.fp-qa-capsule {
position: relative;
z-index: 1;
display: flex;
align-items: center;
gap: 12px;
width: 100%;
background: linear-gradient(135deg, #C19A3A 0%, #9A5A18 100%) !important;
color: #fff !important;
border: none !important;
border-radius: 16px;
padding: 16px 14px 14px 18px;
box-shadow:
0 6px 18px rgba(193, 154, 58, 0.32),
inset 0 1px 0 rgba(255, 255, 255, 0.22);
transition: transform .18s, box-shadow .22s, filter .18s;
}
.fp-qa-pop:hover .fp-qa-capsule {
transform: translateY(-2px);
filter: brightness(1.04);
box-shadow:
0 12px 28px rgba(193, 154, 58, 0.42),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.fp-qa-pop:hover .fp-qa-tip {
transform: translateY(-3px);
}
.fp-qa-pop:hover .fp-qa-arrow {
transform: translateX(3px);
}
.fp-qa-pop:active .fp-qa-capsule {
transform: translateY(0);
}
/* 左の小さい アクセントドット (色分け) */
.fp-qa-dot {
width: 10px; height: 10px;
border-radius: 50%;
background: var(--fp-qa-accent, #FBF5E3);
box-shadow:
0 0 0 2px rgba(255, 255, 255, 0.5),
0 0 8px var(--fp-qa-accent-glow, rgba(251, 245, 227, 0.4));
flex-shrink: 0;
animation: fp-qa-dot-pulse 2.4s ease-in-out infinite;
}
@keyframes fp-qa-dot-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.55; }
}
/* ラベル領域 */
.fp-qa-label {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
text-align: left;
line-height: 1.3;
min-width: 0;
}
.fp-qa-label-main {
font-size: 13.5px;
font-weight: 800;
letter-spacing: 0.02em;
color: #fff;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18);
}
.fp-qa-label-sub {
font-size: 10.5px;
font-weight: 600;
color: #FBF5E3;
letter-spacing: 0.02em;
opacity: 0.92;
}
/* 右の円形アロー */
.fp-qa-arrow {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
background: #fff;
color: var(--fp-qa-accent, #9A5A18);
border-radius: 50%;
font-size: 14px;
font-weight: 900;
transition: transform .2s;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}
/* ── アクセント色 5パターン ── */
.fp-qa-pop[data-accent="zoom"] { --fp-qa-accent: #2D8CFF; --fp-qa-accent-glow: rgba(45,140,255,0.5); }
.fp-qa-pop[data-accent="slots"] { --fp-qa-accent: #C19A3A; --fp-qa-accent-glow: rgba(193,154,58,0.5); }
.fp-qa-pop[data-accent="tag"] { --fp-qa-accent: #A78BFA; --fp-qa-accent-glow: rgba(167,139,250,0.5); }
.fp-qa-pop[data-accent="brief"] { --fp-qa-accent: #34D399; --fp-qa-accent-glow: rgba(52,211,153,0.5); }
.fp-qa-pop[data-accent="info"] { --fp-qa-accent: #CBD5E1; --fp-qa-accent-glow: rgba(203,213,225,0.5); }
/* レスポンシブ: モバイル幅で 1列 */
@media (max-width: 520px) {
.fp-qa-grid { grid-template-columns: 1fr !important; }
}
/* reduced motion */
@media (prefers-reduced-motion: reduce) {
.fp-qa-capsule, .fp-qa-tip, .fp-qa-arrow, .fp-qa-dot { transition: none !important; animation: none !important; }
.fp-qa-pop:hover .fp-qa-capsule,
.fp-qa-pop:hover .fp-qa-tip,
.fp-qa-pop:hover .fp-qa-arrow { transform: none !important; }
}
/* ============================================================
顧客モーダル CTA v3 (2026-06-22 roundM) — Jewel Tones
オーナーfb: 「色が一緒で見づらい / バランス悪い」
解決: capsule の base color を data-accent ごとに 大胆に変える + balance fix
============================================================ */
/* バランス: tip を absolute (上部中央固定) + capsule 統一サイズ */
.fp-qa-pop {
position: relative !important;
padding-top: 18px !important;
min-height: 100px;
}
.fp-qa-pop .fp-qa-tip {
position: absolute !important;
top: 4px;
left: 50%;
transform: translateX(-50%);
margin-bottom: 0 !important;
z-index: 3;
pointer-events: none;
}
.fp-qa-pop:hover .fp-qa-tip {
transform: translateX(-50%) translateY(-2px) !important;
}
.fp-qa-pop .fp-qa-capsule {
width: 100%;
min-height: 76px;
padding: 18px 16px 16px 20px !important;
border-radius: 16px !important;
gap: 14px !important;
}
/* 色: data-accent ごとに capsule gradient + arrow color */
/* ━━ Sapphire (Zoom今すぐ) — vivid Zoom blue ━━ */
.fp-qa-pop[data-accent="zoom"] .fp-qa-capsule {
background: linear-gradient(135deg, #2D8CFF 0%, #0F62D1 100%) !important;
box-shadow:
0 6px 18px rgba(45, 140, 255, 0.36),
inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
}
.fp-qa-pop[data-accent="zoom"]:hover .fp-qa-capsule {
box-shadow: 0 12px 30px rgba(45, 140, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}
.fp-qa-pop[data-accent="zoom"] .fp-qa-arrow { color: #0F62D1 !important; }
.fp-qa-pop[data-accent="zoom"] .fp-qa-tip::before,
.fp-qa-pop[data-accent="zoom"] .fp-qa-tip::after { background: #2D8CFF !important; }
/* ━━ Night Blue (日時指定 Zoom) — calendar感 navy ━━ */
.fp-qa-pop[data-accent="schedule"] .fp-qa-capsule {
background: linear-gradient(135deg, #1E3A5F 0%, #0F1B2F 100%) !important;
box-shadow:
0 6px 18px rgba(30, 58, 95, 0.45),
inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}
.fp-qa-pop[data-accent="schedule"]:hover .fp-qa-capsule {
box-shadow: 0 12px 30px rgba(30, 58, 95, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}
.fp-qa-pop[data-accent="schedule"] .fp-qa-arrow { color: #1E3A5F !important; }
.fp-qa-pop[data-accent="schedule"] .fp-qa-tip::before,
.fp-qa-pop[data-accent="schedule"] .fp-qa-tip::after { background: #5B7BAA !important; }
/* ━━ Amber (候補日3つ) — gold gradient (base) ━━ */
/* 既存 .fp-qa-capsule の デフォルト gold は そのまま — slots アクセントは override 不要 */
.fp-qa-pop[data-accent="slots"] .fp-qa-tip::before,
.fp-qa-pop[data-accent="slots"] .fp-qa-tip::after { background: #C19A3A !important; }
/* ━━ Amethyst (タグ) — purple ━━ */
.fp-qa-pop[data-accent="tag"] .fp-qa-capsule {
background: linear-gradient(135deg, #7C3AED 0%, #5B21B6 100%) !important;
box-shadow:
0 6px 18px rgba(124, 58, 237, 0.38),
inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}
.fp-qa-pop[data-accent="tag"]:hover .fp-qa-capsule {
box-shadow: 0 12px 30px rgba(124, 58, 237, 0.52), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}
.fp-qa-pop[data-accent="tag"] .fp-qa-arrow { color: #5B21B6 !important; }
.fp-qa-pop[data-accent="tag"] .fp-qa-tip::before,
.fp-qa-pop[data-accent="tag"] .fp-qa-tip::after { background: #A78BFA !important; }
/* ━━ Emerald (自分で書く) — forest green ━━ */
.fp-qa-pop[data-accent="brief"] .fp-qa-capsule {
background: linear-gradient(135deg, #047857 0%, #064E3B 100%) !important;
box-shadow:
0 6px 18px rgba(4, 120, 87, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}
.fp-qa-pop[data-accent="brief"]:hover .fp-qa-capsule {
box-shadow: 0 12px 30px rgba(4, 120, 87, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}
.fp-qa-pop[data-accent="brief"] .fp-qa-arrow { color: #047857 !important; }
.fp-qa-pop[data-accent="brief"] .fp-qa-tip::before,
.fp-qa-pop[data-accent="brief"] .fp-qa-tip::after { background: #34D399 !important; }
/* ━━ Pewter (顧客情報) — ghost / neutral ━━ */
.fp-qa-pop[data-accent="info"] .fp-qa-capsule {
background: #fff !important;
border: 1.5px solid #CBD5E1 !important;
box-shadow:
0 4px 12px rgba(15, 23, 42, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}
.fp-qa-pop[data-accent="info"]:hover .fp-qa-capsule {
border-color: #94A3B8 !important;
background: #F8FAFC !important;
box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}
.fp-qa-pop[data-accent="info"] .fp-qa-label-main {
color: #1F2A3F !important;
text-shadow: none !important;
}
.fp-qa-pop[data-accent="info"] .fp-qa-label-sub {
color: #64748B !important;
}
.fp-qa-pop[data-accent="info"] .fp-qa-arrow {
background: #1F2A3F !important;
color: #fff !important;
}
.fp-qa-pop[data-accent="info"] .fp-qa-tip::before,
.fp-qa-pop[data-accent="info"] .fp-qa-tip::after { background: #CBD5E1 !important; }
.fp-qa-pop[data-accent="info"] .fp-qa-dot {
background: #475569 !important;
box-shadow: 0 0 0 2px rgba(71,85,105,0.18), 0 0 8px rgba(71,85,105,0.3) !important;
}
/* dot を 各色に 自動同期 (左ドットを目立たせる) */
.fp-qa-pop[data-accent="zoom"] .fp-qa-dot { background: #BFDBFE !important; box-shadow: 0 0 0 2px rgba(255,255,255,0.5), 0 0 10px rgba(191,219,254,0.6) !important; }
.fp-qa-pop[data-accent="schedule"] .fp-qa-dot { background: #94A3B8 !important; box-shadow: 0 0 0 2px rgba(255,255,255,0.5), 0 0 10px rgba(148,163,184,0.5) !important; }
.fp-qa-pop[data-accent="slots"] .fp-qa-dot { background: #FDE68A !important; box-shadow: 0 0 0 2px rgba(255,255,255,0.5), 0 0 10px rgba(253,230,138,0.6) !important; }
.fp-qa-pop[data-accent="tag"] .fp-qa-dot { background: #DDD6FE !important; box-shadow: 0 0 0 2px rgba(255,255,255,0.5), 0 0 10px rgba(221,214,254,0.6) !important; }
.fp-qa-pop[data-accent="brief"] .fp-qa-dot { background: #A7F3D0 !important; box-shadow: 0 0 0 2px rgba(255,255,255,0.5), 0 0 10px rgba(167,243,208,0.6) !important; }
/* グリッドのバランス: 吹き出し分の row gap 確保 */
.fp-qa-grid { row-gap: 28px !important; column-gap: 14px !important; }
/* モバイル: 1列 */
@media (max-width: 520px) {
.fp-qa-grid { grid-template-columns: 1fr !important; }
.fp-qa-pop { min-height: 96px; }
}
/* ============================================================
顧客モーダル CTA v4 (2026-06-22 roundN) — 3列×2行 横長レイアウト
オーナーfb: 縦長すぎてスクロール必要 → 3列でコンパクトに
============================================================ */
.fp-qa-grid {
display: grid !important; /* ★ display: grid を明示しないと grid-template-columns が無視され block で縦並びになる (v3-3col-span ループ原因) */
grid-template-columns: repeat(3, minmax(0, 1fr)) !important; /* minmax(0,1fr) で content幅 折返し 防止 */
row-gap: 26px !important;
column-gap: 10px !important;
width: 100% !important;
/* ★ 親が grid (左376+右268の2カラム) で 右カラムに押し込まれてた → 2カラム両方占有して 658px 確保 */
grid-column: 1 / -1 !important;
margin-top: 16px !important;
}
.fp-qa-grid > .fp-qa-pop { min-width: 0 !important; }
.fp-qa-grid > .fp-qa-pop .fp-qa-label-main,
.fp-qa-grid > .fp-qa-pop .fp-qa-label-sub {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* 3列なので 各 cell を コンパクト化 */
.fp-qa-pop {
padding-top: 16px !important;
min-height: 84px;
}
.fp-qa-pop .fp-qa-capsule {
min-height: 64px;
padding: 14px 12px 12px 14px !important;
gap: 9px !important;
border-radius: 14px !important;
}
.fp-qa-pop .fp-qa-dot {
width: 7px; height: 7px;
}
.fp-qa-pop .fp-qa-arrow {
width: 24px; height: 24px;
font-size: 12px;
box-shadow: 0 1.5px 4px rgba(0,0,0,0.2);
}
.fp-qa-pop .fp-qa-label-main {
font-size: 12px !important;
letter-spacing: 0.01em;
}
.fp-qa-pop .fp-qa-label-sub {
font-size: 9.5px !important;
letter-spacing: 0.01em;
}
.fp-qa-pop .fp-qa-tip {
font-size: 9.5px !important;
padding: 3px 12px !important;
letter-spacing: 0.03em !important;
top: 2px;
}
.fp-qa-pop .fp-qa-tip::before,
.fp-qa-pop .fp-qa-tip::after {
height: 10px;
width: 1.3px;
}
/* レスポンシブ: 中間幅 (≤780px) で 2列、 狭い (≤500px) で 1列 */
@media (max-width: 780px) {
.fp-qa-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 500px) {
.fp-qa-grid { grid-template-columns: 1fr !important; }
.fp-qa-pop { min-height: 76px; }
}
/* deploy-trigger 1782091790 */
/* ============================================================
モバイル対応 v1 (2026-06-22 roundO)
ハンバーガー / サイドバー drawer / モーダル全画面 / table→カード
タッチ 44px+ / iOS auto-zoom 防止 (input font-size 16px)
============================================================ */
/* ハンバーガーボタン — PC では非表示、 < 768px で 左上 固定 表示 */
#mobile-hamburger {
display: none;
position: fixed;
top: 12px; left: 12px;
z-index: 10100;
width: 44px; height: 44px;
background: #fff;
border: 1.5px solid #C19A3A;
border-radius: 12px;
cursor: pointer;
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
padding: 0;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
transition: background .15s, border-color .15s;
}
#mobile-hamburger:hover { background: #FBF5E3; }
#mobile-hamburger .mh-bar {
display: block;
width: 22px; height: 2.5px;
background: #1F2A3F;
border-radius: 2px;
transition: transform .25s, opacity .2s;
}
body.mobile-nav-open #mobile-hamburger .mh-bar:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
body.mobile-nav-open #mobile-hamburger .mh-bar:nth-child(2) { opacity: 0; }
body.mobile-nav-open #mobile-hamburger .mh-bar:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
#mobile-backdrop {
display: none;
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.55);
backdrop-filter: blur(2px);
z-index: 10080;
opacity: 0;
transition: opacity .25s;
}
/* ───── < 768px = モバイル ───── */
@media (max-width: 768px) {
/* ハンバーガー / backdrop を 表示 */
#mobile-hamburger { display: flex; }
body.mobile-nav-open #mobile-backdrop {
display: block;
opacity: 1;
}
/* サイドバー: 左から slide-in (drawer) */
.sidebar {
position: fixed !important;
top: 0; left: 0;
width: 280px !important;
height: 100vh !important;
z-index: 10090 !important;
transform: translateX(-105%);
transition: transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s;
overflow-y: auto !important;
box-shadow: none;
}
body.mobile-nav-open .sidebar {
transform: translateX(0);
box-shadow: 14px 0 36px rgba(0, 0, 0, 0.32);
}
/* メイン content: 全幅 + 上に hamburger 分の padding */
.shell {
display: block !important;
grid-template-columns: 1fr !important;
}
.main, main {
margin-left: 0 !important;
padding-top: 68px !important;
padding-left: 12px !important;
padding-right: 12px !important;
}
/* topbar (breadcrumb 等) を 右に ずらして ハンバーガー 重ならないように */
.topbar, .breadcrumb, .crumbs {
padding-left: 60px !important;
}
/* ===== モーダル 全画面化 ===== */
.modal-overlay {
padding: 0 !important;
}
.modal#modal-content,
#modal-content,
.modal {
max-width: 100% !important;
width: 100% !important;
height: 100vh !important;
max-height: 100vh !important;
border-radius: 0 !important;
overflow-y: auto !important;
}
/* 顧客モーダル の grid (320+778) → flex column */
.cd-modal {
display: flex !important;
flex-direction: column !important;
grid-template-columns: 1fr !important;
height: 100vh !important;
max-height: 100vh !important;
overflow-y: auto !important;
}
.cd-left, .cd-right {
width: 100% !important;
max-width: 100% !important;
}
.cd-left {
border-right: none !important;
border-bottom: 1px solid #E8E2D4 !important;
padding-bottom: 16px !important;
}
/* CTA grid: 親が flex column になったので 全幅で 2列 */
.fp-qa-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
grid-column: auto !important;
}
/* ===== 顧客台帳 table → カード式 ===== */
table.clients {
display: block !important;
width: 100% !important;
}
table.clients thead { display: none !important; }
table.clients tbody { display: block !important; }
table.clients tbody tr {
display: block !important;
background: #fff !important;
border: 1px solid #E8E2D4 !important;
border-radius: 12px !important;
padding: 14px 16px !important;
margin-bottom: 10px !important;
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.05);
}
table.clients tbody td {
display: block !important;
padding: 4px 0 !important;
border: none !important;
font-size: 13.5px !important;
}
table.clients tbody td:first-child {
font-weight: 800 !important;
font-size: 16px !important;
color: #1F2A3F !important;
margin-bottom: 8px !important;
padding-bottom: 6px !important;
border-bottom: 1px solid #F0EBDF !important;
}
table.clients tbody td::before {
content: attr(data-label);
display: inline-block;
font-size: 10.5px;
font-weight: 700;
color: #9A5A18;
letter-spacing: 0.08em;
text-transform: uppercase;
margin-right: 8px;
min-width: 60px;
}
/* ===== タッチターゲット 44px+ + iOS auto-zoom 防止 ===== */
.tab, button, .btn, .btn-cta-primary, .btn-cta-secondary, .btn-mini-action, .fp-qa-pop, [role="button"] {
min-height: 44px;
}
input[type="text"], input[type="email"], input[type="search"], input[type="password"],
input[type="tel"], input[type="url"], input[type="number"], textarea, select {
font-size: 16px !important; /* iOS auto-zoom 防止 (16px 未満で zoom) */
min-height: 44px;
}
textarea { min-height: 88px; }
/* font scale up + line-height ゆとり */
body { font-size: 14px !important; line-height: 1.7 !important; }
/* hero / 見出し もモバイルで縮める */
.hero-title { font-size: 24px !important; line-height: 1.35 !important; }
.hero-sub { font-size: 13px !important; }
.page-head { flex-direction: column; align-items: stretch; gap: 12px; }
.hero-actions { width: 100%; }
.hero-actions button { width: 100%; }
/* client-toolbar (検索 + フィルタ + ソート) を 縦に */
.client-toolbar {
flex-direction: column !important;
align-items: stretch !important;
gap: 10px !important;
}
.client-toolbar > * { width: 100%; }
.client-toolbar input,
.client-toolbar select { width: 100% !important; }
/* タグセグメントbar: chip wrap */
#client-tag-segment-bar { flex-direction: column !important; align-items: stretch !important; }
#client-tag-chips { width: 100% !important; }
/* 面談履歴 mhカード モバイル */
.mh-card { grid-template-columns: 64px 1fr !important; }
.mh-actions { grid-column: 1 / -1; padding-top: 8px; border-top: 1px dashed #F0EBDF; margin-top: 4px; }
/* CTA pop モバイルで コンパクトに (3列→2列 / 1列) */
.fp-qa-pop .fp-qa-tip { font-size: 9px !important; padding: 2px 10px !important; }
.fp-qa-pop .fp-qa-label-main { font-size: 12.5px !important; }
.fp-qa-pop .fp-qa-label-sub { font-size: 10px !important; }
}
/* < 380px = 極小スマホ */
@media (max-width: 380px) {
.fp-qa-grid { grid-template-columns: 1fr !important; }
.sidebar { width: 88vw !important; }
}
/* タッチデバイス: hover transform を 抑制 (sticky stuck 防止) */
@media (hover: none) {
.btn-cta-primary:hover,
.btn-cta-secondary:hover,
.fp-qa-pop:hover .fp-qa-capsule { transform: none !important; }
}
/* ============================================================
モバイルファースト v2 (2026-06-22 roundP)
トップバー (56px固定) + ボトムナビ (64px+safe固定 5タブ)
既存 サイドバー drawer は "もっと" タブから 補助起動
============================================================ */
/* m-only 要素 は PC では隠す */
.m-only { display: none; }
/* 2026-07-10 fix: #mobile-fab-new-client は button default display=inline-block で PC でも 39px 占有 → shell を 押し下げてた → PC で 完全 hide */
#mobile-fab-new-client { display: none; }
/* ───── < 768px = モバイル ───── */
@media (max-width: 768px) {
.m-only { display: flex; }
/* ===== トップバー (56px + safe area top) ===== */
#mobile-topbar {
position: fixed;
top: 0; left: 0; right: 0;
height: calc(56px + env(safe-area-inset-top, 0px));
padding-top: env(safe-area-inset-top, 0px);
background: linear-gradient(180deg, #1F2A3F 0%, #1A2235 100%);
border-bottom: 1px solid #C19A3A;
z-index: 10100;
display: flex;
align-items: center;
justify-content: space-between;
padding-left: 12px;
padding-right: 12px;
color: #fff;
font-family: 'Hiragino Sans','Noto Sans JP',sans-serif;
}
/* スクロール時に frosted glass (細部 シグネチャ) */
body[data-scrolled="1"] #mobile-topbar {
background: rgba(31, 42, 63, 0.82);
backdrop-filter: saturate(180%) blur(14px);
-webkit-backdrop-filter: saturate(180%) blur(14px);
}
#mobile-topbar #mobile-hamburger {
position: static;
width: 40px; height: 40px;
background: transparent;
border: none;
box-shadow: none;
cursor: pointer;
padding: 0;
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
border-radius: 8px;
}
#mobile-topbar #mobile-hamburger:hover { background: rgba(255,255,255,0.08); }
#mobile-topbar #mobile-hamburger .mh-bar {
width: 20px; height: 2px;
background: #FBF5E3;
border-radius: 2px;
transition: transform .25s, opacity .2s;
}
body.mobile-nav-open #mobile-topbar #mobile-hamburger .mh-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.mobile-nav-open #mobile-topbar #mobile-hamburger .mh-bar:nth-child(2) { opacity: 0; }
body.mobile-nav-open #mobile-topbar #mobile-hamburger .mh-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
#mobile-title-wrap {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
line-height: 1.1;
gap: 1px;
}
#mobile-title-wrap .m-eyebrow {
font-size: 9px;
font-weight: 800;
letter-spacing: 0.22em;
color: #C19A3A;
font-family: 'Inter',sans-serif;
}
#mobile-current-title {
font-family: 'Noto Serif JP',serif;
font-size: 16px;
font-weight: 700;
color: #fff;
letter-spacing: 0.04em;
}
#mobile-user-btn {
width: 40px; height: 40px;
background: transparent;
border: 1.5px solid rgba(193,154,58,0.5);
border-radius: 50%;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
color: #FBF5E3;
font-family: 'Inter',sans-serif;
font-weight: 800;
font-size: 11px;
letter-spacing: 0.04em;
}
#mobile-user-btn:hover { background: rgba(193,154,58,0.15); }
/* ===== ボトムナビ (64px + safe area bottom) ===== */
#mobile-bottomnav {
position: fixed;
bottom: 0; left: 0; right: 0;
height: calc(64px + env(safe-area-inset-bottom, 0px));
padding-bottom: env(safe-area-inset-bottom, 0px);
background: #fff;
border-top: 1px solid #E8E2D4;
z-index: 10100;
display: flex;
justify-content: space-around;
align-items: stretch;
box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.08);
}
.m-tab {
flex: 1;
background: transparent;
border: none;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
color: #94A3B8;
font-family: 'Hiragino Sans',sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.03em;
padding: 8px 4px;
transition: color .15s;
position: relative;
min-height: 56px;
}
.m-tab svg {
transition: stroke .15s, transform .25s cubic-bezier(.2,.7,.3,1.3);
position: relative;
z-index: 2;
}
.m-tab span {
position: relative;
z-index: 2;
}
/* ★ オーナーfb 2026-06-23: 白アイコンが背景と重なって見えない → gold pill を ::before で 注入 */
.m-tab {
position: relative;
}
.m-tab::before {
content: '';
position: absolute;
top: 5px;
left: 50%;
transform: translateX(-50%);
width: 44px;
height: 30px;
border-radius: 99px;
background: transparent;
transition: background .25s, box-shadow .25s;
z-index: 1;
pointer-events: none;
}
.m-tab.is-active {
color: #9A5A18;
}
.m-tab.is-active::before {
background: linear-gradient(135deg, #C19A3A 0%, #9A5A18 100%) !important;
box-shadow: 0 4px 12px rgba(193,154,58,0.32) !important;
}
.m-tab.is-active svg {
stroke: #fff !important;
transform: scale(1.05);
}
/* ===== content area: topbar 下から bottomnav 上まで ===== */
body {
padding-top: calc(56px + env(safe-area-inset-top, 0px)) !important;
padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
}
/* 既存 ハンバーガー drawer (サイドバー) は そのまま slide-in 機構 を 流用 */
.sidebar {
position: fixed !important;
top: 0; left: 0;
width: 280px !important;
height: 100vh !important;
z-index: 10090 !important;
transform: translateX(-105%);
transition: transform .28s cubic-bezier(.2,.7,.2,1);
overflow-y: auto !important;
padding-top: calc(20px + env(safe-area-inset-top, 0px)) !important;
}
body.mobile-nav-open .sidebar {
transform: translateX(0);
box-shadow: 14px 0 36px rgba(0, 0, 0, 0.4);
}
body.mobile-nav-open #mobile-backdrop {
display: block !important;
opacity: 1;
top: calc(56px + env(safe-area-inset-top, 0px));
}
/* メインコンテンツ */
.shell { display: block !important; }
.main, main {
margin-left: 0 !important;
padding: 12px !important;
}
/* 既存トップ breadcrumb / アカウントヘッダ は モバイルでは隠す (topbar に集約) */
.topbar, .crumbs, .breadcrumb { display: none !important; }
/* tenant ID badge とかも 隠す */
[data-tenant-badge], .acc-row, #acc-header { display: none !important; }
/* page-head 圧縮: hero-sub / hero-eyebrow 隠す、 タイトル 縮める */
.page-head { margin-bottom: 14px !important; padding-bottom: 0 !important; border-bottom: none !important; }
.hero-eyebrow { display: none !important; }
.hero-sub { display: none !important; }
.hero-title {
font-family: 'Noto Serif JP', serif !important;
font-size: 22px !important;
line-height: 1.4 !important;
margin: 0 0 10px !important;
}
.hero-actions { width: 100%; }
.hero-actions button {
width: 100% !important;
min-height: 48px;
justify-content: center;
}
/* ===== モーダル モバイル 全画面 ===== */
.modal-overlay { padding: 0 !important; }
.modal#modal-content,
#modal-content,
.modal {
max-width: 100% !important;
width: 100% !important;
height: 100vh !important;
max-height: 100vh !important;
border-radius: 0 !important;
margin-top: calc(56px + env(safe-area-inset-top, 0px)) !important;
}
.cd-modal {
display: flex !important;
flex-direction: column !important;
grid-template-columns: 1fr !important;
height: calc(100vh - 56px - env(safe-area-inset-top, 0px) - 64px - env(safe-area-inset-bottom, 0px)) !important;
max-height: none !important;
overflow-y: auto !important;
}
.cd-left, .cd-right {
width: 100% !important;
max-width: 100% !important;
}
.cd-left {
border-right: none !important;
border-bottom: 1px solid #E8E2D4 !important;
padding-bottom: 14px !important;
}
/* CTA grid モバイル: 2列、 < 380px で 1列 */
.fp-qa-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
grid-column: auto !important;
}
/* ===== 顧客台帳 table → カード ===== */
table.clients { display: block !important; width: 100% !important; }
table.clients thead { display: none !important; }
table.clients tbody { display: block !important; }
table.clients tbody tr {
display: block !important;
background: #fff !important;
border: 1px solid #E8E2D4 !important;
border-radius: 12px !important;
padding: 14px 16px !important;
margin-bottom: 10px !important;
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.05);
}
table.clients tbody td {
display: block !important;
padding: 4px 0 !important;
border: none !important;
font-size: 13.5px !important;
}
table.clients tbody td:first-child {
font-weight: 800 !important;
font-size: 16px !important;
color: #1F2A3F !important;
margin-bottom: 8px !important;
padding-bottom: 6px !important;
border-bottom: 1px solid #F0EBDF !important;
}
/* iOS auto-zoom 防止 (input 16px) */
input[type="text"], input[type="email"], input[type="search"], input[type="password"],
input[type="tel"], input[type="url"], input[type="number"], textarea, select {
font-size: 16px !important;
min-height: 44px;
}
textarea { min-height: 88px; }
/* タッチターゲット 44px+ */
.tab, button, .btn, .btn-cta-primary, .btn-cta-secondary, .btn-mini-action, .fp-qa-pop, [role="button"] {
min-height: 44px;
}
/* font scale up */
body { font-size: 14px !important; line-height: 1.7 !important; }
/* client-toolbar (検索 + フィルタ + ソート) を 縦に */
.client-toolbar { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; }
.client-toolbar > * { width: 100% !important; }
#client-tag-segment-bar { flex-direction: column !important; align-items: stretch !important; }
/* 面談履歴 mhカード */
.mh-card { grid-template-columns: 64px 1fr !important; }
.mh-actions { grid-column: 1 / -1; padding-top: 8px; border-top: 1px dashed #F0EBDF; margin-top: 4px; }
/* fp-qa-pop モバイル font 縮める */
.fp-qa-pop .fp-qa-tip { font-size: 9px !important; padding: 2px 10px !important; }
.fp-qa-pop .fp-qa-label-main { font-size: 12.5px !important; }
.fp-qa-pop .fp-qa-label-sub { font-size: 10px !important; }
/* サイドバーの上部に「閉じる」案内 (drawer モード) */
body.mobile-nav-open .sidebar::before {
content: '✕ 閉じる は ハンバーガー or 右の黒い場所をタップ';
display: block;
background: rgba(193,154,58,0.18);
color: #FBF5E3;
font-size: 10.5px;
padding: 8px 14px;
letter-spacing: 0.04em;
border-bottom: 1px solid rgba(193,154,58,0.3);
margin-bottom: 8px;
}
}
@media (max-width: 380px) {
.fp-qa-grid { grid-template-columns: 1fr !important; }
.sidebar { width: 88vw !important; }
}
@media (hover: none) {
.btn-cta-primary:hover,
.btn-cta-secondary:hover,
.fp-qa-pop:hover .fp-qa-capsule,
.m-tab:hover { transform: none !important; }
}
/* ★ 2026-06-22 roundP fix: モバイルで 隠す追加要素 */
@media (max-width: 768px) {
#fp-user-bar { display: none !important; }
#fp-version-badge {
display: none !important; /* モバイルでは下に被るので隠す */
}
/* チャットbot (mb-fab) も モバイルではボトムナビ被る → 上にずらす */
#mbFab {
bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
right: 14px !important;
}
#mbPanel {
bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
max-height: calc(100vh - 56px - 80px - env(safe-area-inset-top, 0px)) !important;
}
}
/* ★ 2026-06-22 roundQ: モーダル内 二重ネストスクロール解消 (オーナーfb: スクロール効かない箇所がある) */
@media (max-width: 768px) {
/* モバイルでは .cd-modal だけが scroll、 内部 ペイン は 自然な高さに */
.cd-left, .cd-right {
overflow: visible !important;
height: auto !important;
max-height: none !important;
}
/* .cd-modal も 自然な高さ → body 直 scroll に渡す (二重ネスト 解消) */
.cd-modal {
overflow: visible !important;
height: auto !important;
max-height: none !important;
}
/* モーダル自体 は scrollable に */
.modal#modal-content,
#modal-content,
.modal {
height: auto !important;
max-height: none !important;
min-height: calc(100vh - 56px - env(safe-area-inset-top, 0px) - 64px - env(safe-area-inset-bottom, 0px));
margin-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
}
/* modal-overlay は scroll 容器 */
.modal-overlay {
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
align-items: flex-start !important; /* center だと はみ出した時 上に行けない */
}
}
/* ★ 2026-06-22 roundR: html/body overflow:hidden を モバイルで 解除 (オーナーfb: スクロール出来ない 真因) */
@media (max-width: 768px) {
html, body {
height: auto !important;
min-height: 100% !important;
overflow-y: auto !important;
overflow-x: hidden !important;
-webkit-overflow-scrolling: touch !important;
}
/* sidebar/main 内部の overflow も モバイルでは body scroll に渡す */
.sidebar { overflow-y: auto !important; }
.main, main {
overflow: visible !important;
height: auto !important;
min-height: auto !important;
}
.shell {
overflow: visible !important;
height: auto !important;
}
}
/* ============================================================
モバイル特化 v3 (2026-06-22 roundR) — 真のモバイルファースト
オーナーfb: 「全然 携帯UI じゃない」 + 「見づらい もっと特化」
・drawer label 復活
・ホーム hero 圧縮 + 大数値 強調
・顧客台帳 collapsible filter + FAB
・顧客モーダル CTA 1列フル幅 + コンパクトhero
============================================================ */
@media (max-width: 768px) {
/* ───── drawer label 復活 (1024px @media の display:none を 上書き) ───── */
body.mobile-nav-open .sidebar-nav .tab span,
body.mobile-nav-open .sidebar-brand .brand-text,
body.mobile-nav-open .sidebar-search input,
body.mobile-nav-open .sidebar-label,
body.mobile-nav-open .nav-count,
body.mobile-nav-open .user-text {
display: inline-block !important;
}
body.mobile-nav-open .sidebar-nav .tab {
justify-content: flex-start !important;
padding: 12px 18px !important;
gap: 12px !important;
min-height: 48px;
}
body.mobile-nav-open .sidebar-search { padding: 10px 14px !important; justify-content: flex-start !important; }
body.mobile-nav-open .sidebar-brand { justify-content: flex-start !important; padding: 16px 18px !important; }
body.mobile-nav-open .sidebar-user { padding: 12px 18px !important; justify-content: flex-start !important; }
/* ───── ホーム hero モバイル特化 ───── */
.view[data-view="dashboard"] .page-head { padding: 12px 4px 8px !important; border: none !important; }
.view[data-view="dashboard"] .hero-title {
text-align: left !important;
font-family: 'Noto Serif JP', serif !important;
font-size: 20px !important;
font-weight: 700 !important;
line-height: 1.5 !important;
margin: 0 0 6px !important;
color: #1F2A3F;
white-space: normal !important;
}
.view[data-view="dashboard"] .hero-sub {
display: block !important;
text-align: left !important;
font-size: 12.5px !important;
color: #6B7280 !important;
margin: 0 0 14px !important;
}
/* ステータス3カード — 数字大 / ラベル下 */
.view[data-view="dashboard"] .kpi-row,
.view[data-view="dashboard"] .stat-row,
.view[data-view="dashboard"] .summary-stats {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 8px !important;
margin-bottom: 18px !important;
}
/* hero action 1列 */
.view[data-view="dashboard"] .hero-actions {
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
width: 100% !important;
}
/* ───── 顧客台帳: collapsible filter + FAB ───── */
/* hero-actions の「新規顧客を登録」 を 隠して FAB で表示 */
.view[data-view="clients"] .hero-actions { display: none !important; }
/* 検索バーは常時、 他は折りたたみ */
.view[data-view="clients"] .client-toolbar input[type="search"] {
order: -1;
width: 100% !important;
}
.view[data-view="clients"] .client-toolbar select,
.view[data-view="clients"] #client-col-config,
.view[data-view="clients"] .count {
display: none !important; /* 折りたたみ ボタン経由 (将来) */
}
/* 「全フィルタ」 ボタン (toggle) を追加 */
.view[data-view="clients"] .client-toolbar::after {
content: '🔍 検索のみ表示 (フィルタは PC 推奨)';
display: block;
font-size: 11px;
color: #94A3B8;
text-align: center;
margin-top: 4px;
padding: 6px 0;
}
/* タグ filter bar 隠す (狭い画面では邪魔) */
#client-tag-segment-bar { display: none !important; }
/* FAB「+ 新規顧客」 */
body.has-mobile-fab::after {
content: none; /* placeholder */
}
#mobile-fab-new-client {
position: fixed;
bottom: calc(80px + env(safe-area-inset-bottom, 0px));
right: 16px;
width: 56px; height: 56px;
background: linear-gradient(135deg, #C19A3A 0%, #9A5A18 100%);
color: #fff;
border: none;
border-radius: 50%;
box-shadow: 0 10px 24px rgba(193, 154, 58, 0.45);
font-size: 28px;
font-weight: 800;
cursor: pointer;
z-index: 9100;
line-height: 1;
display: none; /* 顧客タブ時のみ表示 (JSで切替) */
align-items: center;
justify-content: center;
padding-bottom: 4px;
transition: transform .15s;
}
#mobile-fab-new-client:active { transform: scale(0.94); }
body.tab-clients-active #mobile-fab-new-client { display: flex; }
/* ───── 顧客モーダル: コンパクトhero + CTA 1列フル幅 ───── */
/* 中央寄せ大型 hero → 左寄せ コンパクト header に */
.cd-hero, .cd-header, .cd-modal-head {
padding: 12px 16px !important;
border-bottom: 1px solid #E8E2D4;
}
/* CTA grid を **1列** 縦並びに override (モバイルでは 2列だと中身改行) */
.fp-qa-grid {
grid-template-columns: 1fr !important;
row-gap: 16px !important;
grid-column: auto !important;
}
.fp-qa-pop {
padding-top: 14px !important;
min-height: 76px;
}
.fp-qa-pop .fp-qa-capsule {
min-height: 60px !important;
padding: 16px 18px !important;
gap: 14px !important;
}
.fp-qa-pop .fp-qa-label-main {
font-size: 14.5px !important;
white-space: nowrap !important;
overflow: visible !important;
text-overflow: clip !important;
}
.fp-qa-pop .fp-qa-label-sub {
font-size: 11px !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.fp-qa-pop .fp-qa-arrow { width: 28px; height: 28px; font-size: 14px; }
.fp-qa-pop .fp-qa-tip {
top: 0 !important;
font-size: 10px !important;
padding: 3px 14px !important;
}
/* 顧客モーダル ヘッダ アバター サイズ縮小 */
.cd-modal .cd-avatar,
.cd-modal img[class*="avatar"] {
width: 56px !important; height: 56px !important;
}
/* CTA セクション 上に余白追加 (tip ぶん) */
.fp-qa-grid::before { content: ''; display: block; height: 4px; }
/* タッチターゲット 56px に格上げ (主要だけ) */
.fp-qa-pop, .btn-cta-primary { min-height: 60px !important; }
/* ───── 一般 ボタン active 状態 (touch ripple 風) ───── */
button:active, .tab:active, .m-tab:active, .fp-qa-pop:active {
transform: scale(0.97);
transition: transform .08s;
}
}
/* < 380px 極小 */
@media (max-width: 380px) {
.view[data-view="dashboard"] .kpi-row,
.view[data-view="dashboard"] .stat-row,
.view[data-view="dashboard"] .summary-stats {
grid-template-columns: 1fr !important;
}
}
/* ★ 2026-06-22 roundR fix: モバイルで Zoomペア を 1列 + 改行崩れ防止 */
@media (max-width: 768px) {
.cd-zoom-pair {
grid-template-columns: 1fr !important;
gap: 10px !important;
}
.cd-zoom-pair > button {
padding: 14px 16px !important;
min-height: 64px !important;
}
.cd-zoom-pair > button > span:last-child {
white-space: nowrap !important;
flex: 1;
}
}
/* ★ 2026-06-22 roundR fix2: ホーム mega-hero モバイル + drawer label 表示領域拡大 */
@media (max-width: 768px) {
/* mega-hero: hero タイトル 圧縮 + 左寄せ + 行詰める */
.mega-hero, .mega-hero-grid { padding: 12px 4px !important; }
.mega-hero-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
.mega-hero-left { text-align: left !important; }
.mega-hero-date {
font-size: 11px !important;
color: #94A3B8 !important;
margin-bottom: 6px !important;
}
.mega-hero-title {
font-family: 'Noto Serif JP', serif !important;
font-size: 20px !important;
line-height: 1.55 !important;
font-weight: 700 !important;
margin: 0 0 10px !important;
color: #1F2A3F !important;
white-space: normal !important;
}
/*
はモバイルで邪魔 (横幅 狭くて 改行 自然に起きる) */
.mega-hero-title br { display: none !important; }
.mega-hero-name { color: #9A5A18 !important; font-family: inherit !important; }
.mega-hero-highlight {
font-family: 'Inter', sans-serif !important;
font-size: 26px !important;
font-weight: 900 !important;
color: #C19A3A !important;
padding: 0 4px;
}
.mega-hero-lead {
font-size: 12.5px !important;
color: #6B7280 !important;
line-height: 1.7 !important;
margin: 0 0 14px !important;
}
/* stats: 3カード grid */
.mega-hero-stats {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 8px !important;
margin-top: 14px !important;
}
.mega-hero-stat {
background: rgba(255, 255, 255, 0.06) !important;
border: 1px solid rgba(193, 154, 58, 0.25) !important;
border-radius: 10px !important;
padding: 10px 6px !important;
text-align: center !important;
}
.mega-hero-stat-label {
font-size: 10px !important;
color: #94A3B8 !important;
letter-spacing: 0.04em;
display: block !important;
}
.mega-hero-stat-value {
font-family: 'Inter', sans-serif !important;
font-size: 22px !important;
font-weight: 800 !important;
color: #C19A3A !important;
margin-top: 4px !important;
}
/* drawer の label 領域を 広げる (truncate しない) */
body.mobile-nav-open .sidebar-nav .tab span {
max-width: none !important;
overflow: visible !important;
text-overflow: clip !important;
white-space: nowrap !important;
font-size: 13.5px !important;
}
body.mobile-nav-open .sidebar-nav .tab .nav-count {
margin-left: auto !important;
flex-shrink: 0;
}
/* sidebar を 88vw に拡げて label 表示余裕に */
body.mobile-nav-open .sidebar { width: 86vw !important; max-width: 340px !important; }
}
/* ★ 2026-06-22 roundR fix3: mega-hero (navy bg) の text color を 白系に戻す */
@media (max-width: 768px) {
.mega-hero {
background: linear-gradient(135deg, #1F2A3F 0%, #2A3854 100%) !important;
border-radius: 16px !important;
padding: 18px 18px 20px !important;
margin: 0 0 16px !important;
}
.mega-hero-title { color: #FBF5E3 !important; }
.mega-hero-name { color: #FCD34D !important; font-weight: 800 !important; }
.mega-hero-lead { color: #CBD5E1 !important; }
.mega-hero-stat { background: rgba(255,255,255,0.08) !important; }
.mega-hero-stat-label { color: #CBD5E1 !important; }
.mega-hero-stat-value { color: #FCD34D !important; }
}
/* ============================================================
モバイル専用 完全 リビルド v1 (2026-06-22 roundS)
オーナーfb: 「縦長すぎ携帯専用に1から組むべき」
既存 PC マークアップは モバイルで 全hide → 代わりに 新規 .m-screen-* を 動的注入
============================================================ */
@media (max-width: 768px) {
/* 既存 ヒーロー系 を 全部 hide */
.mega-hero,
.view[data-view="dashboard"] .page-head,
.view[data-view="dashboard"] > div:not(.m-screen-home):first-child {
display: none !important;
}
/* PC用大型 hero エリア / クライアントタブ ツールバー の余計な装飾 を hide */
.view[data-view="clients"] .page-head { display: none !important; }
/* 顧客モーダル の 大型 ヘッダ を 隠して モバイル専用ヘッダ */
.cd-flow-empty, .cd-empty-state { padding: 16px !important; }
/* ===== モバイル専用 ホーム ===== */
.m-screen-home { display: block; padding: 8px 4px 24px; }
.m-greet {
background: linear-gradient(135deg, #1F2A3F 0%, #2A3854 100%);
border-radius: 16px;
padding: 18px 20px;
margin-bottom: 14px;
color: #FBF5E3;
box-shadow: 0 8px 22px rgba(15, 23, 42, 0.16);
}
.m-greet-date { font-size: 11px; color: #94A3B8; letter-spacing: 0.06em; margin-bottom: 6px; font-family: 'Inter', sans-serif; }
.m-greet-line {
font-family: 'Noto Serif JP', serif;
font-size: 18px;
font-weight: 700;
line-height: 1.5;
margin: 0 0 10px;
}
.m-greet-name { color: #FCD34D; font-weight: 800; }
.m-greet-big {
display: flex;
align-items: baseline;
gap: 8px;
margin-top: 6px;
}
.m-greet-num {
font-family: 'Inter', sans-serif;
font-size: 44px;
font-weight: 900;
color: #FCD34D;
line-height: 1;
letter-spacing: -0.02em;
}
.m-greet-unit { font-size: 13px; color: #CBD5E1; }
/* ステータス 3 boxes */
.m-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
margin-bottom: 16px;
}
.m-stat {
background: #fff;
border: 1px solid #E8E2D4;
border-radius: 12px;
padding: 12px 8px;
text-align: center;
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
}
.m-stat-num {
font-family: 'Inter', sans-serif;
font-size: 22px;
font-weight: 800;
color: #1F2A3F;
line-height: 1;
}
.m-stat-label {
font-size: 10.5px;
color: #6B7280;
margin-top: 6px;
letter-spacing: 0.02em;
}
/* クイックアクション 2 buttons */
.m-quick-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 18px;
}
.m-qa {
background: linear-gradient(135deg, #C19A3A, #9A5A18);
color: #fff;
border: none;
border-radius: 12px;
padding: 14px 12px;
font-family: 'Hiragino Sans', sans-serif;
font-weight: 800;
font-size: 13.5px;
cursor: pointer;
min-height: 56px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
box-shadow: 0 6px 16px rgba(193, 154, 58, 0.3);
}
.m-qa.is-secondary {
background: #fff;
color: #1F2A3F;
border: 1.5px solid #C19A3A;
box-shadow: none;
}
.m-qa-icon { font-size: 18px; }
/* "今日 話すべき方" セクション header */
.m-section-h {
font-family: 'Noto Serif JP', serif;
font-size: 17px;
font-weight: 700;
color: #1F2A3F;
margin: 18px 0 10px;
display: flex;
align-items: center;
gap: 8px;
}
.m-section-h::before {
content: '';
width: 4px; height: 18px;
background: #C19A3A;
border-radius: 2px;
}
}
/* PC では モバイル専用 要素 非表示 */
@media (min-width: 769px) {
.m-screen-home { display: none !important; }
}
/* ============================================================
モバイル ホーム 再々改修 v2 (2026-06-22 roundT) — Boxed
オーナーfb: 「文字はみ出る / 縦長 / ボックスに大幅変更」
既存 dashboard view を 全hide → .m-screen-home だけ表示
============================================================ */
@media (max-width: 768px) {
/* dashboard view の 直下 子要素 を 全hide (.m-screen-home だけ表示) */
.view[data-view="dashboard"] > *:not(.m-screen-home) {
display: none !important;
}
/* ★ m-screen-home コンテナ */
.m-screen-home {
display: flex !important;
flex-direction: column;
gap: 10px;
padding: 4px 2px 16px;
}
/* ─── 1) Greet (横並び 圧縮) ─── */
.m-greet {
background: linear-gradient(135deg, #1F2A3F 0%, #2A3854 100%);
border-radius: 14px;
padding: 14px 18px;
color: #FBF5E3;
display: flex;
align-items: center;
gap: 14px;
box-shadow: 0 6px 16px rgba(15, 23, 42, 0.18);
min-height: 64px;
}
.m-greet-l {
flex: 1;
min-width: 0;
}
.m-greet-date {
font-size: 10.5px;
color: #94A3B8;
letter-spacing: 0.06em;
font-family: 'Inter', sans-serif;
margin-bottom: 3px;
}
.m-greet-msg {
font-family: 'Noto Serif JP', serif;
font-size: 14.5px;
font-weight: 700;
line-height: 1.4;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.m-greet-name {
color: #FCD34D;
font-weight: 800;
}
.m-greet-r {
flex-shrink: 0;
text-align: right;
line-height: 1;
}
.m-greet-num {
font-family: 'Inter', sans-serif;
font-size: 38px;
font-weight: 900;
letter-spacing: -0.02em;
background: linear-gradient(135deg, #FCD34D 0%, #F59E0B 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
line-height: 1;
}
.m-greet-unit {
font-size: 10px;
color: #CBD5E1;
margin-top: 4px;
letter-spacing: 0.04em;
}
/* ─── 2) Stats 2x2 grid ─── */
.m-stats-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.m-stat-box {
background: #fff;
border: 1px solid #E8E2D4;
border-radius: 12px;
padding: 14px 14px 12px;
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
display: flex;
flex-direction: column;
gap: 6px;
opacity: 0;
transform: translateY(8px);
animation: m-stat-in .35s ease forwards;
}
.m-stat-box:nth-child(1) { animation-delay: .05s; }
.m-stat-box:nth-child(2) { animation-delay: .12s; }
.m-stat-box:nth-child(3) { animation-delay: .19s; }
.m-stat-box:nth-child(4) { animation-delay: .26s; }
@keyframes m-stat-in {
to { opacity: 1; transform: translateY(0); }
}
.m-stat-top {
display: flex;
justify-content: space-between;
align-items: center;
}
.m-stat-icon {
width: 28px; height: 28px;
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 14px;
background: #FBF5E3;
color: #9A5A18;
}
.m-stat-num {
font-family: 'Inter', sans-serif;
font-size: 24px;
font-weight: 900;
color: #1F2A3F;
line-height: 1;
letter-spacing: -0.02em;
}
.m-stat-label {
font-size: 11px;
color: #6B7280;
font-weight: 600;
letter-spacing: 0.02em;
}
/* ─── 3) Today action box ─── */
.m-today-box {
background: linear-gradient(135deg, #FBF5E3 0%, #FDFBF4 100%);
border: 1px solid #C19A3A;
border-radius: 14px;
padding: 16px 18px;
margin-top: 4px;
}
.m-today-eyebrow {
font-size: 10px;
font-weight: 800;
color: #9A5A18;
letter-spacing: 0.18em;
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 6px;
}
.m-today-eyebrow::before {
content: '';
width: 4px; height: 4px;
background: #C19A3A;
border-radius: 50%;
animation: m-pulse 1.6s ease-in-out infinite;
}
@keyframes m-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
.m-today-name {
font-family: 'Noto Serif JP', serif;
font-size: 17px;
font-weight: 700;
color: #1F2A3F;
margin-bottom: 4px;
}
.m-today-sub {
font-size: 12px;
color: #5e4d1a;
line-height: 1.55;
margin-bottom: 12px;
}
.m-today-empty {
font-size: 12px;
color: #6B7280;
text-align: center;
padding: 8px 0;
}
.m-today-cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
background: linear-gradient(135deg, #C19A3A 0%, #9A5A18 100%);
color: #fff;
border: none;
border-radius: 99px;
padding: 10px 22px;
font-family: 'Hiragino Sans', sans-serif;
font-weight: 800;
font-size: 13px;
cursor: pointer;
box-shadow: 0 4px 12px rgba(193, 154, 58, 0.32);
}
/* ─── 4) Quick actions row (2 buttons) ─── */
.m-quick-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-top: 4px;
}
.m-qa2 {
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
background: #fff;
border: 1.5px solid #C19A3A;
color: #1F2A3F;
border-radius: 12px;
padding: 12px 8px;
font-family: 'Hiragino Sans', sans-serif;
font-weight: 800;
font-size: 12.5px;
cursor: pointer;
min-height: 52px;
}
.m-qa2.is-primary {
background: linear-gradient(135deg, #7C3AED 0%, #5B21B6 100%);
color: #fff;
border: none;
box-shadow: 0 4px 14px rgba(124, 58, 237, 0.32);
}
.m-qa2-icon { font-size: 16px; }
}
/* PC 非表示 (上書き) */
@media (min-width: 769px) {
.m-screen-home { display: none !important; }
}
/* ============================================================
モバイル 致命的修正 v3 (2026-06-22 roundU)
オーナーfb スクショ で 判明:
- モーダルが背景顧客台帳に重ならない (二重表示)
- 顧客カードが縦長すぎ (1人で半画面)
- コンパちゃん bot が中央被る
============================================================ */
@media (max-width: 768px) {
/* ───── モーダル overlay を 確実に 全面 重ねる ───── */
.modal-overlay {
position: fixed !important;
inset: 0 !important;
top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
background: rgba(15, 23, 42, 0.75) !important; /* 半透明黒で 完全に 後ろを覆う */
z-index: 10200 !important; /* ボトムナビ (10100) の上 */
width: 100vw !important;
height: 100vh !important;
margin: 0 !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
padding: 0 !important;
align-items: flex-start !important;
justify-content: center !important;
}
.modal#modal-content,
#modal-content,
.modal {
background: #fff !important;
margin: 0 !important;
min-height: 100vh !important;
width: 100% !important;
max-width: 100% !important;
}
/* ───── 顧客カード コンパクト化 (1人 = 1画面の 1/4 以下) ───── */
table.clients tbody tr {
padding: 12px 14px !important;
margin-bottom: 8px !important;
/* グリッドで 2列レイアウト: 左に名前/属性、 右に状態/接触日 */
display: grid !important;
grid-template-columns: 1fr auto;
grid-template-areas:
"name name"
"info info";
gap: 4px 8px;
}
table.clients tbody td {
padding: 0 !important;
font-size: 12px !important;
line-height: 1.5 !important;
}
/* 1列目 = 名前 (顧客欄) */
table.clients tbody td:first-child {
grid-area: name !important;
font-weight: 800 !important;
font-size: 14.5px !important;
color: #1F2A3F !important;
padding-bottom: 4px !important;
margin-bottom: 2px !important;
border-bottom: 1px solid #F0EBDF !important;
}
/* 1列目以降 は インライン (横並び) で 短く */
table.clients tbody td:not(:first-child) {
display: inline-flex !important;
grid-area: info !important;
font-size: 11.5px !important;
color: #6B7280 !important;
margin-right: 8px !important;
}
/* 空セル ( - ) は 隠す */
table.clients tbody td:not(:first-child):empty,
table.clients tbody td:not(:first-child):has(> div:only-child:contains("-")) {
display: none !important;
}
/* ───── コンパちゃん bot モバイル: 顧客タブ / モーダル時 隠す ───── */
body.tab-clients-active #mbFab,
body.tab-clients-active #mbPanel { display: none !important; }
/* モーダル開いてる時 = #modal-overlay visible */
body:has(#modal-overlay[style*="display: flex"]) #mbFab,
body:has(#modal-overlay[style*="display:flex"]) #mbFab {
display: none !important;
}
/* デフォルト位置を 左下 (右下は FAB と被る) */
#mbFab {
right: auto !important;
left: 14px !important;
bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
width: 48px !important; height: 48px !important;
}
/* チャットbot ヒント (吹き出し) を 隠す → アイコンだけ */
#mbFabHint, .mb-fab-hint { display: none !important; }
}
/* ★ 2026-06-22 roundU fix2: 顧客カード grid override を 取消し → シンプル縦並び */
@media (max-width: 768px) {
table.clients tbody tr {
display: block !important;
grid-template-areas: none !important;
padding: 12px 14px !important;
margin-bottom: 8px !important;
background: #fff !important;
border: 1px solid #E8E2D4 !important;
border-radius: 12px !important;
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.05) !important;
}
table.clients tbody td {
display: block !important;
grid-area: auto !important;
padding: 3px 0 !important;
font-size: 12px !important;
line-height: 1.5 !important;
color: #6B7280 !important;
margin: 0 !important;
}
/* 1列目 = 顧客名 */
table.clients tbody td:first-child {
font-size: 14.5px !important;
font-weight: 800 !important;
color: #1F2A3F !important;
padding-bottom: 6px !important;
margin-bottom: 4px !important;
border-bottom: 1px solid #F0EBDF !important;
}
/* td 内 chip / badge を 横並び に */
table.clients tbody td > div,
table.clients tbody td > span {
display: inline-block !important;
margin-right: 4px !important;
vertical-align: middle !important;
}
/* 「-」 だけ の td を 隠す (data label="…" の対応がない時) */
table.clients tbody td:not(:first-child) {
overflow: visible !important;
}
/* 数字 yen 等 (¥750万) は 強調 */
table.clients tbody td:has(> :contains("¥")) {
color: #1F2A3F !important;
font-weight: 700 !important;
}
}
/* ★ 2026-06-22 roundU fix3: モーダル開いてる時 body scroll lock */
body.modal-open {
overflow: hidden !important;
position: fixed !important;
width: 100% !important;
height: 100% !important;
}
/* ============================================================
モバイル 表(table)型 UI v1 (2026-06-22 roundV)
オーナー指示: 「カードじゃなくて表タイプ」 → iOS設定アプリ風 group list
============================================================ */
@media (max-width: 768px) {
/* ───── 顧客台帳: カード → 表型 (1顧客 = 1 row 60px) ───── */
table.clients {
background: #fff !important;
border: 1px solid #E8E2D4 !important;
border-radius: 12px !important;
overflow: hidden !important;
padding: 0 !important;
}
table.clients tbody tr {
display: grid !important;
grid-template-columns: 40px 1fr auto !important;
grid-template-areas:
"avatar name price"
"avatar meta price" !important;
gap: 2px 12px !important;
align-items: center !important;
padding: 12px 14px !important;
margin: 0 !important;
background: #fff !important;
border: none !important;
border-bottom: 1px solid #F0EBDF !important;
border-radius: 0 !important;
box-shadow: none !important;
min-height: 60px !important;
position: relative !important;
}
table.clients tbody tr:last-child { border-bottom: none !important; }
table.clients tbody tr::after {
content: '›';
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%);
color: #C19A3A;
font-size: 20px;
font-weight: 300;
line-height: 1;
pointer-events: none;
}
table.clients tbody td {
display: block !important;
padding: 0 !important;
border: none !important;
margin: 0 !important;
font-size: 11.5px !important;
line-height: 1.4 !important;
color: #6B7280 !important;
grid-area: meta !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
/* 1列目 = 名前 */
table.clients tbody td:first-child {
grid-area: name !important;
font-size: 14.5px !important;
font-weight: 800 !important;
color: #1F2A3F !important;
margin-bottom: 0 !important;
padding-bottom: 0 !important;
border-bottom: none !important;
}
/* チェブロン余白 確保 */
table.clients tbody tr { padding-right: 32px !important; }
/* アバターはトリック: 名前内に絵文字 / SVG が入ってる前提 (なければ ●) */
/* td内の余計な要素を控えめに */
table.clients tbody td:not(:first-child) {
display: inline-block !important;
margin-right: 6px !important;
grid-area: meta !important;
}
/* 「-」 だけ の td: 隠す */
table.clients tbody td:not(:first-child):empty { display: none !important; }
/* ───── 顧客モーダル: box → 表型 ───── */
/* hero compact: アバター + 名前 + chip (76px) */
.cd-modal .cd-hero,
.cd-modal .cd-modal-head,
.cd-modal [class*="hero"] {
padding: 16px !important;
background: linear-gradient(180deg, #FDFBF4, #fff) !important;
border-bottom: 1px solid #E8E2D4 !important;
}
/* 各 cd-section / cd-card を group に */
.cd-modal .cd-section,
.cd-modal .cd-card,
.cd-modal [class*="cd-section"],
.cd-modal [class*="cd-card"] {
background: #fff !important;
border: none !important;
border-radius: 0 !important;
border-bottom: 1px solid #E8E2D4 !important;
padding: 14px 16px !important;
margin: 0 !important;
box-shadow: none !important;
}
/* group title (gold縦線 + uppercase) */
.cd-modal .cd-section-title,
.cd-modal .cd-card-title,
.cd-modal h3,
.cd-modal [class*="-title"] {
font-size: 10.5px !important;
font-weight: 800 !important;
color: #9A5A18 !important;
letter-spacing: 0.14em !important;
text-transform: uppercase !important;
margin: 0 0 10px !important;
padding-left: 10px !important;
border-left: 3px solid #C19A3A !important;
line-height: 1.2 !important;
}
/* ───── Zoomペア (今すぐ/日時指定) を row 形式に ───── */
.cd-zoom-pair {
display: flex !important;
flex-direction: column !important;
gap: 0 !important;
background: #fff !important;
border: 1px solid #E8E2D4 !important;
border-radius: 10px !important;
overflow: hidden !important;
margin: 0 !important;
}
.cd-zoom-pair > button {
border: none !important;
border-bottom: 1px solid #F0EBDF !important;
border-radius: 0 !important;
background: #fff !important;
padding: 14px 16px !important;
min-height: 56px !important;
display: flex !important;
align-items: center !important;
gap: 12px !important;
width: 100% !important;
text-align: left !important;
box-shadow: none !important;
position: relative !important;
}
.cd-zoom-pair > button:last-child { border-bottom: none !important; }
.cd-zoom-pair > button::after {
content: '›';
position: absolute;
right: 14px; top: 50%;
transform: translateY(-50%);
color: #C19A3A;
font-size: 20px;
font-weight: 300;
line-height: 1;
}
.cd-zoom-pair > button > svg {
width: 26px !important; height: 26px !important; flex-shrink: 0;
}
.cd-zoom-pair > button > span {
flex: 1; padding-right: 18px;
font-size: 14px !important;
font-weight: 700 !important;
color: #1F2A3F !important;
line-height: 1.35 !important;
}
.cd-zoom-pair > button > span > span {
font-size: 11px !important;
color: #6B7280 !important;
font-weight: 600 !important;
}
/* ───── 各 .cd-* row (タグ / フォロー / 連絡手段) ───── */
/* タグエリア */
.cd-tags-wrap, .cd-modal [id*="tag"],
.cd-modal [class*="tag-wrap"] {
display: flex !important;
flex-direction: column !important;
gap: 6px !important;
}
/* +追加/編集 ボタン → 横並び subtle */
.cd-modal button[id*="tag-add"], .cd-modal .cd-tag-add-btn {
background: transparent !important;
border: 1.5px solid #C19A3A !important;
color: #9A5A18 !important;
border-radius: 99px !important;
padding: 6px 14px !important;
font-size: 11.5px !important;
font-weight: 700 !important;
}
/* ───── 「+ 追加/編集」紫 大ボタン を 控えめ outline に ───── */
.cd-modal button[id*="tag"]:not(.btn-cta-primary),
.cd-modal button[id*="-edit"]:not(.btn-cta-primary) {
background: #fff !important;
border: 1.5px solid #C19A3A !important;
color: #1F2A3F !important;
box-shadow: none !important;
}
/* fp-qa-grid (顧客モーダル 6 button) も 表型に */
.fp-qa-grid {
grid-template-columns: 1fr !important;
row-gap: 0 !important;
background: #fff !important;
border: 1px solid #E8E2D4 !important;
border-radius: 10px !important;
overflow: hidden !important;
grid-column: auto !important;
}
.fp-qa-grid > .fp-qa-pop {
padding: 0 !important;
min-height: 56px !important;
border-bottom: 1px solid #F0EBDF !important;
}
.fp-qa-grid > .fp-qa-pop:last-child { border-bottom: none !important; }
.fp-qa-grid > .fp-qa-pop .fp-qa-tip { display: none !important; }
.fp-qa-grid > .fp-qa-pop .fp-qa-capsule {
background: transparent !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 14px 16px !important;
min-height: 56px !important;
width: 100% !important;
position: relative;
}
.fp-qa-grid > .fp-qa-pop[data-accent] .fp-qa-capsule {
/* gradient bg を 解除して 各 row 白に */
background: #fff !important;
}
/* dot は accent color に */
.fp-qa-grid > .fp-qa-pop .fp-qa-dot { width: 8px; height: 8px; }
.fp-qa-grid > .fp-qa-pop .fp-qa-label-main {
color: #1F2A3F !important;
text-shadow: none !important;
font-size: 14px !important;
}
.fp-qa-grid > .fp-qa-pop .fp-qa-label-sub {
color: #6B7280 !important;
font-size: 11px !important;
}
.fp-qa-grid > .fp-qa-pop .fp-qa-arrow {
background: transparent !important;
color: #C19A3A !important;
box-shadow: none !important;
font-size: 20px;
font-weight: 300;
width: auto;
height: auto;
}
}
/* ★ 2026-06-22 roundV fix: 顧客台帳 chip重なり最終解消 */
@media (max-width: 768px) {
/* 各 tr 内の data-label-value を block 縦並びに force */
table.clients tbody tr {
display: flex !important;
flex-direction: column !important;
grid-template-columns: none !important;
grid-template-areas: none !important;
align-items: flex-start !important;
padding: 12px 32px 12px 14px !important;
gap: 4px !important;
min-height: 60px !important;
}
table.clients tbody td {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 6px !important;
width: 100% !important;
padding: 1px 0 !important;
margin: 0 !important;
grid-area: auto !important;
font-size: 11.5px !important;
color: #6B7280 !important;
line-height: 1.5 !important;
}
table.clients tbody td:first-child {
font-size: 14.5px !important;
font-weight: 800 !important;
color: #1F2A3F !important;
padding-bottom: 4px !important;
border-bottom: 1px solid #F0EBDF !important;
margin-bottom: 4px !important;
}
/* td 内 要素 横並び 重なり防止 */
table.clients tbody td > * {
display: inline-flex !important;
margin: 0 4px 0 0 !important;
position: static !important;
}
/* 空 (- だけ) は隠す */
table.clients tbody td:not(:first-child) {
overflow: hidden !important;
text-overflow: ellipsis !important;
}
}
/* ★ 2026-06-22 roundV fix2: 顧客台帳 重要列だけ + 横並びcompact (1顧客 = 1スクリーン 1/6 ) */
@media (max-width: 768px) {
table.clients tbody tr {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
align-items: center !important;
padding: 12px 30px 12px 14px !important;
gap: 8px !important;
min-height: 64px !important;
max-height: 90px;
overflow: hidden !important;
}
/* 名前 (1列目) — 100% 幅、 太字 */
table.clients tbody td:nth-child(1) {
width: 100% !important;
flex: 0 0 100% !important;
font-size: 14.5px !important;
font-weight: 800 !important;
color: #1F2A3F !important;
padding-bottom: 4px !important;
margin-bottom: 4px !important;
border-bottom: 1px solid #F0EBDF !important;
}
/* 状態 (9列目) — chip 用 */
table.clients tbody td:nth-child(9) {
flex: 0 0 auto !important;
font-size: 11px !important;
}
/* 管理資産 (10列目) — 数字、 右寄 */
table.clients tbody td:nth-child(10) {
flex: 1 1 auto !important;
font-size: 12.5px !important;
font-weight: 700 !important;
color: #1F2A3F !important;
text-align: right !important;
}
/* 最終接触 (11列目) — 小さく */
table.clients tbody td:nth-child(11) {
flex: 0 0 100% !important;
font-size: 10.5px !important;
color: #94A3B8 !important;
border: none !important;
}
/* 他 td (年齢/職業/家族/緊急度/悩み/希望/保有商品) は 全hide */
table.clients tbody td:nth-child(2),
table.clients tbody td:nth-child(3),
table.clients tbody td:nth-child(4),
table.clients tbody td:nth-child(5),
table.clients tbody td:nth-child(6),
table.clients tbody td:nth-child(7),
table.clients tbody td:nth-child(8) {
display: none !important;
}
}
/* ============================================================
モバイル audit fix v1 (2026-06-22 roundW)
全15ページ細部点検で発覚した 8問題 一括修正
============================================================ */
@media (max-width: 768px) {
/* A/B. スケール縮小バグ: 配信タブ content / モーダル の親の transform を 解除 */
[data-line-view="distributionHub"],
[data-line-view="distributionHub"] *,
[data-view="distributionHub"],
.modal-overlay > *,
.modal#modal-content {
transform: none !important;
zoom: 1 !important;
width: 100% !important;
}
/* distributionHub view の min-width 解除 */
[data-line-view="distributionHub"] { min-width: 0 !important; max-width: 100% !important; }
/* 配信タブ内 サブタブ button (今日送る/予定/テンプレ/送信ログ) を 横並び 表示 */
[data-line-view="distributionHub"] > div:first-child {
flex-wrap: wrap !important;
gap: 6px !important;
}
[data-line-view="distributionHub"] [data-dist-subtab] {
padding: 10px 14px !important;
font-size: 12.5px !important;
min-height: 44px !important;
flex: 1 1 auto !important;
}
/* D. 設定 セクションヘッダ 紫×紫 解消 */
.hub-section-title {
background: linear-gradient(135deg, #FBF5E3, #FDFBF4) !important;
color: #1F2A3F !important;
border-left: 4px solid #C19A3A !important;
font-weight: 800 !important;
padding: 12px 16px !important;
border-radius: 8px !important;
}
/* E. ご無沙汰フォロー RE-ENGAGE バナー 縦書き圧縮解消 */
[data-view="dormantFollowup"] .page-sub + div,
[data-view="dormantFollowup"] > div > div:has([style*="background:linear-gradient(135deg,#FEF3C7"]),
div[style*="background:linear-gradient(135deg,#FEF3C7,#FFEDD5)"] {
display: block !important;
text-align: left !important;
}
div[style*="background:linear-gradient(135deg,#FEF3C7,#FFEDD5)"] > div {
flex-wrap: wrap !important;
flex-direction: column !important;
gap: 6px !important;
align-items: flex-start !important;
}
/* F. 新規相談 「3 件」 縦折れ修正: hero の数字/単位 横並び維持 */
[data-line-view="leadHub"] a[href*="section"] {
flex-wrap: wrap !important;
}
[data-line-view="leadHub"] [style*="font-size:42px"],
[data-line-view="leadHub"] [style*="font-size:30px"] {
white-space: nowrap !important;
display: inline-flex !important;
align-items: baseline !important;
}
[data-line-view="leadHub"] [style*="font-size:42px"] > span,
[data-line-view="leadHub"] [style*="font-size:30px"] > span {
white-space: nowrap !important;
display: inline !important;
}
/* G. drawer 新規相談 真っ赤バッジ → 既存と同じ 薄ピンク色に */
#nav-count-leadhub, #nav-count-newrequests {
background: #FEE2E2 !important;
color: #B91C1C !important;
}
/* drawer の nav-count 全部 統一 (赤/オレンジ系の濃さ揃え) */
.sidebar .nav-count[id*="leadhub"],
.sidebar .nav-count[id*="lead"] {
background: #FECACA !important;
color: #991B1B !important;
}
/* H. 顧客台帳 山田太郎テスト ピンク帯チラ見え (cd-action-pri or chip 残骸) */
table.clients tbody tr [class*="action-pri"],
table.clients tbody tr [style*="background:#fef2f2"],
table.clients tbody tr [style*="background:#fee2e2"] {
display: none !important;
}
}
/* =================================================================
roundX (v.20260623L-list-style): iOS設定アプリ風 グループ化リスト
オーナー指示「カードタイプ→表タイプ」 顧客モーダル & 顧客台帳
設計トークン:
bg: #FFFFFF / divider: #ECE6D6 hairline / gold accent: #C19A3A
row min-height: 52px / label 12.5px #6B7280 / value 14px #1F2A3F
group label: 11.5px uppercase #8C7A4B + 4px gold left bar
================================================================= */
@media (max-width: 768px) {
/* ---- 0. cd-modal 全体: PC左右2カラム → mobile 1カラム平坦化 ---- */
.cd-modal {
background: #FFFFFF !important;
padding: 0 !important;
gap: 0 !important;
border-radius: 0 !important;
}
.cd-modal > .cd-left,
.cd-modal > .cd-right {
background: #FFFFFF !important;
box-shadow: none !important;
border: none !important;
padding: 0 !important;
border-radius: 0 !important;
}
/* ---- 1. プロフィール hero (アバター+名前+chip) ---- */
.cd-modal .cd-profile-head {
background: linear-gradient(180deg, #FDFBF4 0%, #FFFFFF 100%) !important;
padding: 22px 18px 18px !important;
border-radius: 0 !important;
box-shadow: none !important;
text-align: center !important;
border-bottom: 1px solid #ECE6D6 !important;
}
.cd-modal .cd-profile-avatar {
width: 76px !important;
height: 76px !important;
font-size: 30px !important;
margin: 0 auto 12px !important;
box-shadow: 0 8px 20px rgba(193,154,58,0.18) !important;
}
.cd-modal .cd-profile-name {
font-size: 20px !important;
font-weight: 800 !important;
color: #1F2A3F !important;
letter-spacing: 0.01em !important;
margin-bottom: 2px !important;
}
.cd-modal .cd-profile-kana {
font-size: 11.5px !important;
color: #8C7A4B !important;
letter-spacing: 0.08em !important;
margin-bottom: 12px !important;
}
.cd-modal .cd-profile-pills {
display: inline-flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
gap: 6px !important;
}
/* ---- 2. グループ ラベル (iOS Settings の セクション見出し) ---- */
/* セクションラベル / 設定ラベル を 共通の group-label に統一 */
.cd-modal .cd-section-label,
.cd-modal .cd-kpi-label,
.cd-modal .cd-flow-eyebrow,
.cd-modal .cd-stat-label {
font-size: 11.5px !important;
font-weight: 800 !important;
text-transform: uppercase !important;
letter-spacing: 0.1em !important;
color: #8C7A4B !important;
padding: 14px 18px 6px 14px !important;
background: #FAF6EB !important;
border-left: 4px solid #C19A3A !important;
margin: 0 !important;
border-radius: 0 !important;
display: block !important;
}
/* ---- 3. profile-section / cd-flow / cd-kpi-section / cd-zoom-pair 共通 ---- */
/* 全部 同じ list group の見た目に揃える */
.cd-modal .cd-profile-section,
.cd-modal .cd-kpi-section,
.cd-modal .cd-flow,
.cd-modal .cd-qa-collapse,
.cd-modal #cd-tags-section,
.cd-modal .cd-profile-stats {
background: #FFFFFF !important;
border: none !important;
border-top: 1px solid #ECE6D6 !important;
border-radius: 0 !important;
margin: 0 !important;
padding: 0 !important;
box-shadow: none !important;
}
/* 上の hero 直後の 最初の border-top を 消す */
.cd-modal .cd-profile-head + * {
border-top: none !important;
}
/* ---- 4. dl (プロフィール key-value) を 表行に ---- */
.cd-modal .cd-dl {
display: block !important;
margin: 0 !important;
padding: 0 !important;
background: #FFFFFF !important;
}
.cd-modal .cd-dl dt {
display: inline-block !important;
width: 38% !important;
font-size: 13px !important;
font-weight: 600 !important;
color: #6B7280 !important;
padding: 13px 0 13px 18px !important;
margin: 0 !important;
vertical-align: top !important;
letter-spacing: 0.02em !important;
}
.cd-modal .cd-dl dd {
display: inline-block !important;
width: 60% !important;
font-size: 14px !important;
font-weight: 700 !important;
color: #1F2A3F !important;
padding: 13px 18px 13px 0 !important;
margin: 0 !important;
text-align: right !important;
border-bottom: 1px solid #F4EFE0 !important;
letter-spacing: 0.01em !important;
}
.cd-modal .cd-dl dt {
border-bottom: 1px solid #F4EFE0 !important;
}
.cd-modal .cd-dl dt:last-of-type,
.cd-modal .cd-dl dd:last-of-type {
border-bottom: none !important;
}
/* ---- 5. cd-profile-stats (管理資産/最終接触/年齢) を 縦並びrowに ---- */
.cd-modal .cd-profile-stats {
display: block !important;
grid-template-columns: none !important;
gap: 0 !important;
}
.cd-modal .cd-stat {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
padding: 14px 18px !important;
border-bottom: 1px solid #F4EFE0 !important;
background: #FFFFFF !important;
text-align: left !important;
min-height: 52px !important;
gap: 12px !important;
}
.cd-modal .cd-stat:last-child { border-bottom: none !important; }
.cd-modal .cd-stat .cd-stat-label {
flex: 0 0 38% !important;
background: transparent !important;
border: none !important;
padding: 0 !important;
color: #6B7280 !important;
font-size: 13px !important;
font-weight: 600 !important;
text-transform: none !important;
letter-spacing: 0.02em !important;
text-align: left !important;
}
.cd-modal .cd-stat .cd-stat-value {
flex: 1 1 auto !important;
font-size: 16px !important;
font-weight: 800 !important;
color: #1F2A3F !important;
text-align: right !important;
line-height: 1.2 !important;
margin: 0 !important;
}
.cd-modal .cd-stat .cd-stat-unit {
font-size: 12px !important;
color: #8C7A4B !important;
font-weight: 700 !important;
margin-left: 3px !important;
}
.cd-modal .cd-stat .cd-stat-sub {
display: block !important;
flex: 1 1 100% !important;
width: 100% !important;
text-align: right !important;
font-size: 11px !important;
color: #8C7A4B !important;
margin-top: 2px !important;
font-weight: 600 !important;
}
/* ---- 6. cd-family-list / cd-note / cd-cancel-list の余白詰め ---- */
.cd-modal .cd-family-list,
.cd-modal .cd-note,
.cd-modal .cd-cancel-list {
padding: 12px 18px 14px !important;
margin: 0 !important;
background: #FFFFFF !important;
border: none !important;
}
.cd-modal .cd-note {
font-size: 13.5px !important;
color: #1F2A3F !important;
line-height: 1.65 !important;
}
/* ---- 7. KPI section (この方に必要なフォロー) ---- */
.cd-modal .cd-kpi-section .cd-kpi-badges {
padding: 8px 18px 14px !important;
display: flex !important;
flex-wrap: wrap !important;
gap: 6px !important;
}
.cd-modal .cd-kpi-section .senior-kpi-badge {
font-size: 12px !important;
padding: 6px 11px !important;
}
/* ---- 8. cd-flow (AI推奨) ---- */
.cd-modal .cd-flow {
padding: 14px 16px 14px !important;
}
.cd-modal .cd-flow .cd-flow-eyebrow {
padding: 0 !important;
background: transparent !important;
border-left: none !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
margin-bottom: 8px !important;
}
.cd-modal .cd-flow .cd-flow-eyebrow-pill {
background: linear-gradient(135deg, #C19A3A, #A0822E) !important;
color: #FFFFFF !important;
padding: 4px 10px !important;
border-radius: 999px !important;
font-size: 10.5px !important;
font-weight: 900 !important;
letter-spacing: 0.08em !important;
display: inline-flex !important;
gap: 4px !important;
align-items: center !important;
}
.cd-modal .cd-flow-title {
font-size: 15.5px !important;
font-weight: 800 !important;
color: #1F2A3F !important;
line-height: 1.4 !important;
margin-bottom: 4px !important;
}
.cd-modal .cd-flow-reason {
font-size: 12.5px !important;
color: #6B7280 !important;
line-height: 1.55 !important;
margin-bottom: 12px !important;
}
/* ---- 8b. ✨AIで下書き ボタンを row化 (オーナーfb: 他のrowと同じサイズ) ---- */
.cd-modal .fp-draft-cta,
.cd-modal #modal-draft-btn,
.cd-modal .cd-flow-step.cd-flow-step-active {
margin: 0 !important;
padding: 12px 36px 12px 14px !important;
min-height: 52px !important;
background: #FFFFFF !important;
background-image: none !important;
color: #1F2A3F !important;
border: none !important;
border-bottom: 1px solid #ECE6D6 !important;
border-radius: 0 !important;
font-size: 14px !important;
font-weight: 700 !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
text-align: left !important;
box-shadow: none !important;
position: relative !important;
width: 100% !important;
box-sizing: border-box !important;
grid-template-columns: none !important;
transform: none !important;
}
.cd-modal .fp-draft-cta::after,
.cd-modal #modal-draft-btn::after,
.cd-modal .cd-flow-step.cd-flow-step-active::after {
content: '›' !important;
position: absolute !important;
right: 14px !important;
top: 50% !important;
transform: translateY(-50%) !important;
color: #C19A3A !important;
font-size: 22px !important;
font-weight: 400 !important;
line-height: 1 !important;
}
/* 番号バッジ「1」 は 小さい アイコン丸に */
.cd-modal .fp-draft-cta .cd-flow-step-no,
.cd-modal #modal-draft-btn .cd-flow-step-no,
.cd-modal .cd-flow-step.cd-flow-step-active .cd-flow-step-no {
width: 24px !important;
height: 24px !important;
font-size: 13px !important;
font-weight: 800 !important;
flex-shrink: 0 !important;
background: linear-gradient(135deg, #C19A3A, #A0822E) !important;
color: #FFFFFF !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.cd-modal .fp-draft-cta .cd-flow-step-label,
.cd-modal #modal-draft-btn .cd-flow-step-label,
.cd-modal .cd-flow-step.cd-flow-step-active .cd-flow-step-label {
font-size: 14px !important;
font-weight: 700 !important;
color: #1F2A3F !important;
line-height: 1.3 !important;
}
.cd-modal .fp-draft-cta .cd-flow-step-sub,
.cd-modal #modal-draft-btn .cd-flow-step-sub,
.cd-modal .cd-flow-step.cd-flow-step-active .cd-flow-step-sub {
font-size: 11px !important;
color: #8C7A4B !important;
font-weight: 600 !important;
}
.cd-modal .fp-draft-cta .cd-flow-step-icon,
.cd-modal #modal-draft-btn .cd-flow-step-icon,
.cd-modal .cd-flow-step.cd-flow-step-active .cd-flow-step-icon {
display: none !important;
}
/* 親 grid (cd-flow 内の AI下書き + fp-qa-grid 2列) を 1列に */
.cd-modal .cd-flow > div[style*="grid-template-columns"] {
display: block !important;
grid-template-columns: none !important;
gap: 0 !important;
margin-top: 8px !important;
}
/* ---- 9b. 家族構成 (cd-family-list) を非表示 — オーナーfb「これ別になくせばいい」 ---- */
.cd-modal .cd-family-list {
display: none !important;
}
/* 「家族構成」 group label も 隠す (中身が無いから ラベルだけ残ると 浮く) */
.cd-modal .cd-profile-section:has(.cd-family-list) {
display: none !important;
}
/* ============================================================
Z. Zoom 日程確定 (scheduleZoom / slotsSend) モーダル を list 形式に
オーナーfb 2026-06-23: 「相談のZoomの日程を確定するモーダルも 表タイプに」
対象: openScheduleZoomModal の overlay (z-index: 10200) と openSlotsSendModal
============================================================ */
div[style*="z-index: 10200"] {
align-items: flex-start !important;
padding: 0 !important;
}
div[style*="z-index: 10200"] > div {
width: 100% !important;
max-width: 100% !important;
max-height: 100vh !important;
height: 100vh !important;
border-radius: 0 !important;
box-shadow: none !important;
}
/* hero gradient header → cream + gold accent に置換 */
div[style*="z-index: 10200"] > div > div:first-child {
background: linear-gradient(180deg, #FDFBF4, #FFFFFF) !important;
color: #1F2A3F !important;
padding: 22px 18px 18px !important;
border-bottom: 1px solid #ECE6D6 !important;
}
/* hero 内 文字色補正 */
div[style*="z-index: 10200"] > div > div:first-child div {
color: #1F2A3F !important;
}
div[style*="z-index: 10200"] > div > div:first-child div[style*="font-size: 10.5px"] {
color: #8C7A4B !important;
}
/* 閉じるボタン (✕) */
div[style*="z-index: 10200"] #fp-sch-close,
div[style*="z-index: 10200"] [id$="-close"] {
background: rgba(0,0,0,0.06) !important;
color: #1F2A3F !important;
}
/* STEP ラベル (STEP 1 / STEP 2) を group label 化 — 構造的 selector
scroll パネル 直下の direct children で 1番目/3番目 など 奇数 が ラベル */
div[style*="z-index: 10200"] > div > div:nth-child(2) > div[style*="font-weight"][style*="letter-spacing"] {
background: #FAF6EB !important;
color: #8C7A4B !important;
border-left: 4px solid #C19A3A !important;
padding: 14px 18px 6px 14px !important;
margin: 0 !important;
font-size: 11.5px !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
font-weight: 800 !important;
display: block !important;
}
/* STEP 1 入力 wrapper (date/time/dur grid 親) — list rowに */
div[style*="z-index: 10200"] > div > div:nth-child(2) > div[style*="border-radius"]:not([style*="background: #fff"]):not(textarea) {
background: #FFFFFF !important;
border: none !important;
border-top: 1px solid #ECE6D6 !important;
border-bottom: 1px solid #ECE6D6 !important;
border-radius: 0 !important;
padding: 14px 16px !important;
margin: 0 !important;
box-shadow: none !important;
}
/* 日付/時刻/時間(分) の 3列 grid 自体 → 縦並びの list rowに */
div[style*="z-index: 10200"] div[style*="grid-template-columns"] {
display: flex !important;
flex-direction: column !important;
gap: 14px !important;
grid-template-columns: none !important;
}
div[style*="z-index: 10200"] div[style*="grid-template-columns"] > div {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px !important;
width: 100% !important;
padding: 6px 0 !important;
}
div[style*="z-index: 10200"] div[style*="grid-template-columns"] > div > div:first-child {
flex: 0 0 38% !important;
margin-bottom: 0 !important;
color: #6B7280 !important;
font-size: 13px !important;
font-weight: 600 !important;
letter-spacing: 0.02em !important;
text-transform: none !important;
}
div[style*="z-index: 10200"] input[type=date],
div[style*="z-index: 10200"] input[type=time],
div[style*="z-index: 10200"] select {
flex: 1 1 auto !important;
width: auto !important;
border: 1px solid #ECE6D6 !important;
background: #FFFFFF !important;
border-radius: 10px !important;
padding: 10px 12px !important;
font-size: 14.5px !important;
color: #1F2A3F !important;
min-height: 44px !important;
}
/* STEP 2 textarea — フラット化 */
div[style*="z-index: 10200"] textarea {
border: 1px solid #ECE6D6 !important;
background: #FFFFFF !important;
border-radius: 10px !important;
padding: 12px 14px !important;
font-size: 14px !important;
margin: 8px 16px 12px !important;
width: calc(100% - 32px) !important;
box-sizing: border-box !important;
min-height: 100px !important;
}
div[style*="z-index: 10200"] textarea + div {
margin: 6px 16px !important;
}
/* STEP 2 ラベルの 下 (textarea 直前) padding 調整 */
/* footer (キャンセル + 予約+LINE送信) を 縦 stack + 全幅 */
div[style*="z-index: 10200"] > div > div:last-child {
background: #FFFFFF !important;
border-top: 1px solid #ECE6D6 !important;
padding: 14px 16px env(safe-area-inset-bottom, 14px) !important;
flex-direction: column-reverse !important;
gap: 8px !important;
justify-content: stretch !important;
}
div[style*="z-index: 10200"] > div > div:last-child button {
width: 100% !important;
padding: 14px 16px !important;
border-radius: 12px !important;
min-height: 52px !important;
font-size: 15px !important;
}
/* 主送信ボタン: gold gradient に統一 (青grad → gold) */
div[style*="z-index: 10200"] [id$="-send"],
div[style*="z-index: 10200"] button[id="fp-sch-send"],
div[style*="z-index: 10200"] button[id="fp-slots-send"] {
background: linear-gradient(135deg, #C19A3A, #A0822E) !important;
color: #FFFFFF !important;
border: none !important;
box-shadow: 0 6px 16px rgba(193,154,58,0.30) !important;
}
div[style*="z-index: 10200"] [id$="-cancel"] {
background: #FFFFFF !important;
color: #6B7280 !important;
border: 1px solid #ECE6D6 !important;
box-shadow: none !important;
}
/* スクロール領域の padding 微調整 */
div[style*="z-index: 10200"] > div > div[style*="overflow-y: auto"],
div[style*="z-index: 10200"] > div > div[style*="overflow-y: auto"] {
padding: 0 !important;
}
/* ---- 9. Zoom ペア ボタン: rowスタイルに ---- */
.cd-modal .cd-zoom-pair {
display: block !important;
grid-template-columns: none !important;
gap: 0 !important;
margin: 0 !important;
padding: 0 !important;
background: #FFFFFF !important;
}
.cd-modal .cd-zoom-pair > button {
width: 100% !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 12px !important;
background: #FFFFFF !important;
border: none !important;
border-bottom: 1px solid #F4EFE0 !important;
border-radius: 0 !important;
padding: 14px 36px 14px 16px !important;
min-height: 60px !important;
box-shadow: none !important;
font-size: 14.5px !important;
color: #1F2A3F !important;
font-weight: 800 !important;
position: relative !important;
text-align: left !important;
}
.cd-modal .cd-zoom-pair > button::after {
content: '›';
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
color: #C19A3A;
font-size: 22px;
font-weight: 400;
line-height: 1;
}
.cd-modal .cd-zoom-pair > button svg {
width: 30px !important;
height: 30px !important;
}
.cd-modal .cd-zoom-pair > button span {
font-size: 14px !important;
line-height: 1.35 !important;
}
.cd-modal .cd-zoom-pair > button span span {
font-size: 11px !important;
color: #8C7A4B !important;
font-weight: 600 !important;
}
/* ---- 10. タグ section ---- */
.cd-modal #cd-tags-section {
padding: 0 !important;
}
.cd-modal #cd-tags-section > div:first-child {
padding: 14px 16px 8px !important;
margin: 0 !important;
}
.cd-modal #cd-tags-section #cd-tags-list {
padding: 0 16px 14px !important;
margin: 0 !important;
min-height: 0 !important;
}
.cd-modal #cd-tags-section #cd-tags-edit {
padding: 7px 14px !important;
font-size: 12px !important;
background: #FFFFFF !important;
color: #C19A3A !important;
border: 1px solid #C19A3A !important;
box-shadow: none !important;
border-radius: 999px !important;
}
/* ---- 11. QA collapse (連絡手段) ---- */
.cd-modal .cd-qa-collapse .cd-qa-summary {
padding: 14px 18px !important;
background: #FFFFFF !important;
font-size: 14px !important;
color: #1F2A3F !important;
font-weight: 700 !important;
border-radius: 0 !important;
}
.cd-modal .cd-qa-collapse .cd-qa-inner {
padding: 0 16px 14px !important;
background: #FFFFFF !important;
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 8px !important;
}
.cd-modal .cd-qa-collapse .cd-qa-btn {
background: #FAF6EB !important;
border: 1px solid #ECE6D6 !important;
padding: 12px !important;
font-size: 12.5px !important;
color: #1F2A3F !important;
font-weight: 700 !important;
border-radius: 10px !important;
}
/* ---- 12. アンケート ボタン -> row形式 ---- */
.cd-modal button[data-open-hearing] {
width: calc(100% - 32px) !important;
margin: 12px 16px !important;
padding: 13px 16px !important;
background: #FFFFFF !important;
color: #1F2A3F !important;
border: 1px solid #ECE6D6 !important;
border-radius: 12px !important;
font-size: 14px !important;
font-weight: 700 !important;
text-align: left !important;
position: relative !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
}
.cd-modal button[data-open-hearing]::after {
content: '›';
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
color: #C19A3A;
font-size: 22px;
font-weight: 400;
}
/* ---- 13. cd-section-label-warn (キャンセル履歴) ---- */
.cd-modal .cd-section-label-warn {
background: linear-gradient(90deg, #FEF3C7 0%, #FFFFFF 70%) !important;
color: #92400E !important;
border-left: 4px solid #F59E0B !important;
}
/* ---- 14. cd-right (右ペイン) も モバイル では 同じ list 形式に ---- */
/* タブ ナビ (cd-tabs) は そのまま、 中の panel だけ 平坦化 */
.cd-modal .cd-pane {
padding: 0 !important;
background: #FFFFFF !important;
}
.cd-modal .cd-tabs {
background: #FFFFFF !important;
border-top: 1px solid #ECE6D6 !important;
border-bottom: 1px solid #ECE6D6 !important;
padding: 0 !important;
overflow-x: auto !important;
display: flex !important;
flex-wrap: nowrap !important;
gap: 0 !important;
}
.cd-modal .cd-tab {
flex: 0 0 auto !important;
padding: 12px 16px !important;
font-size: 13px !important;
color: #6B7280 !important;
background: transparent !important;
border: none !important;
border-bottom: 2px solid transparent !important;
border-radius: 0 !important;
font-weight: 700 !important;
white-space: nowrap !important;
}
.cd-modal .cd-tab.active {
color: #1F2A3F !important;
border-bottom-color: #C19A3A !important;
background: transparent !important;
}
/* ============================================================
B. 顧客台帳 (table.clients) — iOS list 風に再構築
============================================================ */
/* table 自体の余白 リセット */
table.clients {
background: #FFFFFF !important;
border-radius: 0 !important;
border: none !important;
box-shadow: none !important;
border-spacing: 0 !important;
border-collapse: collapse !important;
width: 100% !important;
}
table.clients thead { display: none !important; }
table.clients tbody { display: block !important; background: #FFFFFF !important; width: 100% !important; }
table.clients { display: block !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; }
/* 各行: シンプル grid 2列 layout — avatar / 名前+meta + chevron */
/* オーナーfb: ¥金額 は不要、 お客様の名前だけでいい */
table.clients tbody tr {
display: grid !important;
grid-template-columns: 44px minmax(0, 1fr) !important;
grid-template-rows: auto !important;
align-items: center !important;
gap: 10px !important;
padding: 14px 32px 14px 14px !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
background: #FFFFFF !important;
border: none !important;
border-bottom: 1px solid #ECE6D6 !important;
border-radius: 0 !important;
box-shadow: none !important;
min-height: 64px !important;
position: relative !important;
cursor: pointer !important;
}
table.clients tbody tr:hover { background: #FBF5E3 !important; }
table.clients tbody tr:active { background: #F4EFE0 !important; }
/* chevron 右端 */
table.clients tbody tr::after {
content: '›' !important;
position: absolute !important;
right: 12px !important;
top: 50% !important;
transform: translateY(-50%) !important;
color: #C19A3A !important;
font-size: 22px !important;
font-weight: 400 !important;
line-height: 1 !important;
pointer-events: none !important;
}
/* td 全部 横並びに溶かす — 旧 roundV の grid-area:meta を override */
table.clients tbody td {
display: block !important;
grid-area: auto !important;
padding: 0 !important;
border: none !important;
background: transparent !important;
font-size: 12.5px !important;
color: #6B7280 !important;
line-height: 1.4 !important;
overflow: visible !important;
white-space: normal !important;
text-overflow: clip !important;
margin: 0 !important;
}
/* 1番目td (顧客): avatar + 名前 — col 1-2 spanning, internal flex */
table.clients tbody td:nth-child(1) {
grid-area: auto !important;
grid-column: 1 / 3 !important;
grid-row: 1 / 2 !important;
display: flex !important;
align-items: center !important;
gap: 12px !important;
min-width: 0 !important;
overflow: hidden !important;
}
/* 名前 strong は full幅で大きく */
table.clients tbody td:nth-child(1) strong {
font-size: 16px !important;
}
table.clients tbody td:nth-child(1) .client-row-name {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 10px !important;
min-width: 0 !important;
width: 100% !important;
flex: 1 1 100% !important;
margin: 0 !important;
}
table.clients tbody td:nth-child(1) .avatar {
width: 38px !important;
height: 38px !important;
font-size: 14px !important;
flex-shrink: 0 !important;
}
table.clients tbody td:nth-child(1) strong {
font-size: 15px !important;
font-weight: 800 !important;
color: #1F2A3F !important;
letter-spacing: 0.005em !important;
display: block !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
max-width: 100% !important;
}
table.clients tbody td:nth-child(1) .client-row-name > div {
min-width: 0 !important;
flex: 1 1 auto !important;
}
/* 名前直後のかな は隠す (情報密度優先) */
table.clients tbody td:nth-child(1) [style*="font-size:11px"][style*="muted"],
table.clients tbody td:nth-child(1) .client-row-name div > div:not([style*="flex-wrap"]) {
font-size: 10.5px !important;
color: #8C7A4B !important;
}
/* 2列目以降 (年齢/職業/家族/緊急/悩み/希望/商品) は 行2に集約 */
table.clients tbody td:nth-child(2),
table.clients tbody td:nth-child(3),
table.clients tbody td:nth-child(4),
table.clients tbody td:nth-child(5),
table.clients tbody td:nth-child(6),
table.clients tbody td:nth-child(7),
table.clients tbody td:nth-child(8) {
display: none !important;
}
/* ステータス列 (状態) pill — 名前の親内 inline 表示 (grid item 化 解除 → 第1tdに浮かべる) */
table.clients tbody td:nth-child(9) {
grid-area: auto !important;
display: none !important;
}
table.clients tbody td:nth-child(9) .status-pill {
font-size: 10px !important;
padding: 2px 8px !important;
}
/* unread 要返事 badge は コンパクト化 */
table.clients tbody td:nth-child(9) .fp-unread-badge {
font-size: 9px !important;
padding: 2px 6px !important;
margin-right: 4px !important;
}
/* task badge */
table.clients tbody td:nth-child(9) .fp-task-badge {
font-size: 9px !important;
padding: 1px 5px !important;
}
table.clients tbody td:nth-child(9) .status-pill {
font-size: 10px !important;
padding: 2px 8px !important;
}
/* 管理資産 (10列目) — オーナーfb: 名前だけでいい → 非表示 */
table.clients tbody td:nth-child(10) {
display: none !important;
}
/* 最終接触 (11列目): mobile では 隠す (情報過多 → chevron で 詳細誘導) */
table.clients tbody td:nth-child(11) {
display: none !important;
}
table.clients tbody td:nth-child(11) > div {
flex-direction: row !important;
justify-content: flex-end !important;
align-items: center !important;
gap: 6px !important;
}
table.clients tbody td:nth-child(11) span {
font-size: 10.5px !important;
}
/* 検索 + filter bar 上部 */
#client-tools, .client-tools-row, .filter-bar {
background: #FFFFFF !important;
border-bottom: 1px solid #ECE6D6 !important;
}
/* 防御: 旧 roundV/roundU の カード型 td/tr bg を 一掃 (cream stripe 防止) */
table.clients tbody tr,
table.clients tbody tr td,
table.clients tbody tr td > div {
background-color: transparent !important;
}
table.clients tbody tr {
background-color: #FFFFFF !important;
}
/* 旧 roundV: tbody tr の inset shadow / margin を 消して 連続 list に */
table.clients tbody tr {
margin: 0 !important;
box-shadow: none !important;
border: none !important;
border-bottom: 1px solid #ECE6D6 !important;
}
table.clients {
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
}
/* ============================================================
FB2. 相談 (leadHub) 内の booking カード → row 形式に
ターゲット: `.btn-rec-start` を含む 確定済み 予約 カード
============================================================ */
/* カード wrapper (grid-template-columns: 104px 1fr のもの) を 縦並びに */
div[style*="grid-template-columns:104px 1fr"],
div[style*="grid-template-columns:104px 1fr"] {
display: block !important;
grid-template-columns: none !important;
padding: 14px !important;
margin: 0 0 8px !important;
background: #FFFFFF !important;
border: none !important;
border-bottom: 1px solid #ECE6D6 !important;
border-left: 4px solid #C19A3A !important;
border-radius: 8px !important;
box-shadow: none !important;
gap: 0 !important;
}
/* 日付列 (06/22 + 曜日 + 時刻) を 横並びに圧縮 */
div[style*="grid-template-columns:104px 1fr"] > div:first-child {
border-right: none !important;
border-bottom: none !important;
padding: 0 0 6px !important;
display: flex !important;
align-items: baseline !important;
gap: 8px !important;
}
div[style*="grid-template-columns:104px 1fr"] > div:first-child > div:nth-child(1) {
font-size: 14px !important;
color: #8C7A4B !important;
font-weight: 700 !important;
}
div[style*="grid-template-columns:104px 1fr"] > div:first-child > div:nth-child(2) {
font-size: 11px !important;
color: #9CA3AF !important;
margin-top: 0 !important;
}
div[style*="grid-template-columns:104px 1fr"] > div:first-child > div:nth-child(3) {
font-size: 14px !important;
color: #1F2A3F !important;
font-weight: 800 !important;
margin-top: 0 !important;
margin-left: auto !important;
}
/* 右列 */
div[style*="grid-template-columns:104px 1fr"] > div:nth-child(2) {
padding: 0 !important;
min-width: 0 !important;
}
/* zoom URL を 短く 1行で 省略 */
div[style*="grid-template-columns:104px 1fr"] > div:nth-child(2) > div:nth-child(2) {
display: block !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
word-break: keep-all !important;
word-wrap: normal !important;
font-size: 10px !important;
line-height: 1.3 !important;
max-width: 100% !important;
width: 100% !important;
margin-bottom: 10px !important;
color: #9CA3AF !important;
}
/* 顧客名 row */
div[style*="grid-template-columns:104px 1fr"] > div:nth-child(2) > div:nth-child(1) {
margin-bottom: 8px !important;
}
div[style*="grid-template-columns:104px 1fr"] > div:nth-child(2) > div:nth-child(1) strong {
font-size: 15px !important;
}
/* 録画ONでZoom開始 ボタン: 巨大円形 → 横長 row ボタンに */
.btn-rec-start {
width: 100% !important;
border-radius: 12px !important;
padding: 12px 16px !important;
font-size: 14px !important;
font-weight: 800 !important;
min-height: 50px !important;
height: auto !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
white-space: nowrap !important;
line-height: 1.2 !important;
text-align: center !important;
margin: 0 0 8px !important;
background: linear-gradient(135deg, #C19A3A, #A0822E) !important;
color: #FFFFFF !important;
border: none !important;
box-shadow: 0 6px 16px rgba(193,154,58,0.30) !important;
}
/* メモ / キャンセル */
div[style*="grid-template-columns:104px 1fr"] > div:nth-child(2) > div:last-child {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 8px !important;
flex-wrap: nowrap !important;
}
div[style*="grid-template-columns:104px 1fr"] > div:nth-child(2) > div:last-child .btn-rec-start {
grid-column: 1 / -1 !important;
margin-bottom: 0 !important;
}
div[style*="grid-template-columns:104px 1fr"] > div:nth-child(2) > div:last-child .btn-mini-action {
width: 100% !important;
min-height: 44px !important;
padding: 10px 12px !important;
font-size: 13px !important;
border-radius: 10px !important;
justify-content: center !important;
}
/* ============================================================
FB3. 2-3階層モーダル ディテール polish
============================================================ */
/* 一般 modal overlay (.modal-overlay) - mobile full screen, 内部スクロール */
.modal-overlay[style*="display: flex"],
.modal-overlay[style*="display:flex"],
.modal-overlay.show {
align-items: flex-start !important;
padding: 0 !important;
overflow-y: auto !important;
overscroll-behavior: contain !important;
-webkit-overflow-scrolling: touch !important;
}
#modal-content,
.modal-content {
width: 100% !important;
max-width: 100% !important;
min-height: 100vh !important;
border-radius: 0 !important;
box-shadow: none !important;
margin: 0 !important;
}
/* ✕ 閉じる ボタン: タップ44px+ + 確実な押下位置 */
.cd-close,
div[style*="z-index: 10200"] [id$="-close"],
[class*="close-btn"]:not([id*="memo"]),
button[aria-label="閉じる"] {
width: 44px !important;
height: 44px !important;
min-width: 44px !important;
min-height: 44px !important;
border-radius: 50% !important;
background: rgba(255, 255, 255, 0.95) !important;
color: #1F2A3F !important;
border: 1px solid #ECE6D6 !important;
font-size: 22px !important;
z-index: 100 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
flex-shrink: 0 !important;
cursor: pointer !important;
}
/* cd-close は fixed 配置 でスクロール しても 常に viewport 右上 */
.cd-modal .cd-close {
position: fixed !important;
top: max(12px, env(safe-area-inset-top, 12px)) !important;
right: 12px !important;
box-shadow: 0 4px 12px rgba(15,23,42,0.15) !important;
}
/* zoom-sch modal の ✕ は hero header 内に 維持 */
div[style*="z-index: 10200"] [id$="-close"] {
position: relative !important;
top: 0 !important;
right: 0 !important;
box-shadow: none !important;
}
/* ★ オーナーfb 2026-06-23: hero (compact) + タブ を 上部 sticky に
構造: cd-left hero(コンパクト化) → cd-right(タブ+pane) → cd-left rest */
.cd-modal {
display: flex !important;
flex-direction: column !important;
background: #FFFFFF !important;
}
.cd-modal > .cd-left { order: 2 !important; }
.cd-modal > .cd-right {
order: 1 !important;
display: flex !important;
flex-direction: column !important;
}
.cd-modal .cd-right .cd-tabs { order: 0 !important; }
.cd-modal .cd-right .cd-pane { order: 1 !important; }
.cd-modal .cd-right > *:not(.cd-tabs):not(.cd-pane) { order: 2 !important; }
/* ミニヒーロー (タブ上のidentity strip): cd-left hero を 抜き出して 最上に固定 */
/* CSSのみだと 抜き出せないので 別アプローチ: pageでは無視。 cd-profile-name + avatar を タブ上に小さく表示する案は後回し */
/* タブ は cd-right の sticky-top */
.cd-modal .cd-tabs {
position: sticky !important;
top: 0 !important;
z-index: 50 !important;
background: #FFFFFF !important;
padding: 0 12px !important;
border-top: 1px solid #ECE6D6 !important;
border-bottom: 1px solid #ECE6D6 !important;
-webkit-overflow-scrolling: touch !important;
margin: 0 !important;
/* 2026-07-11: sticky cd-tabs で 白背景 に 影 で 下の 削除ボタン と 明確 分離 */
box-shadow: 0 4px 8px -4px rgba(0, 0, 0, 0.12) !important;
}
/* 2026-07-11: 議事録カード の 削除ボタン が sticky タブ で 覆われない よう scroll-margin-top で 隙間 確保 */
.cd-modal .fp-meeting-card {
scroll-margin-top: 56px !important;
}
/* 2026-07-11: 削除ボタン に z-index で FAB系 との 前後関係 明示 (sticky tabs=50 の下、 コンテンツ の上) */
.fp-meeting-delete {
position: relative !important;
z-index: 5 !important;
}
.modal-overlay {
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
}
.cd-modal .cd-tab {
min-height: 44px !important;
flex-shrink: 0 !important;
}
.cd-modal .cd-pane {
padding: 0 0 24px !important;
min-height: 30vh !important;
}
}
/* ===== /roundX list style ===== */
/* ═══════════════════════════════════════════════════════
2026-07-10 design-reviewer Critical#1 — 順序修正 版
base .sidebar-nav .tab (line 360) が 後方 で !important 上書き してた ので
ファイル末尾 に 置いて cascade で 勝たせる (媒体クエリ 同specificity=source order)
═══════════════════════════════════════════════════════ */
@media (max-width: 1280px) {
.sidebar-nav .tab {
padding: 6px 10px !important;
font-size: 12.5px !important;
min-height: 34px !important;
gap: 10px !important;
}
.sidebar-nav .tab i[data-lucide],
.sidebar-nav .tab svg.lucide {
width: 15px !important;
height: 15px !important;
}
.sidebar-label {
margin-top: 6px !important;
margin-bottom: 4px !important;
font-size: 10px !important;
padding: 4px 12px 4px !important;
}
.sidebar-group { margin-bottom: 8px !important; }
.sidebar-scroll { gap: 6px !important; }
}
/* ============================================================================
2026-07-11 v9 mobile audit fix (design-reviewer で 検出)
- sidebar-foot が bottom-nav (fixed 64px) に 48px 隠れて コンパちゃん 押せない
- 「設定」「年末配布」 が scroll しないと 見えない
- sidebar-quick-inperson が drawer 閉じてる 時 も click 対象
============================================================================ */
@media (max-width: 768px) {
/* Critical#1: コンパちゃん を bottom-nav (64px + safe-area) 上 に 押し出す */
.sidebar-foot {
padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 12px) !important;
}
/* Critical#2: sidebar-scroll の 実効高 を 修正 → 「設定」 まで 初期表示 に 入る */
.sidebar-scroll {
max-height: calc(100vh - 56px - 220px - 64px - env(safe-area-inset-bottom, 0px)) !important;
min-height: 200px !important;
}
/* Important#3: drawer 閉じてる 時 は quick-inperson 無効化 (JS click が 誤射 しない) */
.sidebar:not(.open):not(.is-open) .sidebar-quick-rec {
pointer-events: none !important;
}
/* Polish#5: scroll shadow が sidebar-foot に 埋もれ ない よう z-index UP */
.sidebar-scroll.has-more::after {
z-index: 3 !important;
}
}
/* ============================================================================
2026-07-12 v10 100人audit fix pass (cross-cutting reviewer 30件 検出)
Critical: font-size < 12px を 12px+ に、 nav contrast WCAG AA、 badge white/white 修正
============================================================================ */
@media (max-width: 768px) {
/* Critical: bottom nav label 10px → 12px (WCAG 可読 最低ライン) */
#mobile-bottomnav .m-tab {
font-size: 12px !important;
font-weight: 700 !important;
letter-spacing: 0.02em !important;
color: #475569 !important; /* CR ~7:1 vs #fff */
}
#mobile-bottomnav .m-tab.is-active {
color: #78350F !important; /* 濃い茶 = CR ~7:1 vs 金色 pill/white */
}
/* topbar eyebrow 「FP COMPASS」 9px → 削除 (装飾で 可読性 犠牲) */
.mobile-topbar .m-eyebrow,
.m-topbar-eyebrow,
[class*="m-eyebrow"] {
display: none !important;
}
/* 「業務のこと 何でも」 10.5px → 12px */
#sidebar-kompa-trigger span[style*="font-size:10.5px"],
#sidebar-kompa-trigger span[style*="font-size: 10.5px"] {
font-size: 12px !important;
line-height: 1.5 !important;
}
/* 「7/12 (日)」 date + 「名 フォロー待ち」 10-10.5px → 12px */
.m-greet-date, .m-greet-unit {
font-size: 12px !important;
}
/* form input iOS ズーム 防止 (16px 未満 で 自動ズーム 発生) */
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="tel"], input[type="number"],
textarea, select {
font-size: 16px !important;
}
}
/* PC + mobile 両方: nav inactive contrast (CR 2.01 → 4.5+) */
.sidebar-nav .tab {
color: #334155 !important; /* CR 8.5:1 vs #fff */
}
.sidebar-nav .tab:hover {
color: #0F172A !important;
}
.sidebar-nav .tab.is-active {
color: #4338CA !important; /* CR 6.6:1 vs #fff (前 の 66,66,201 は CR 2.85) */
}
.sidebar-label {
color: #64748B !important; /* CR 5.5:1 vs #fff (前 の #6B6B6B は 3.94) */
font-size: 12px !important; /* 11.5 → 12 */
}
/* 「予約不要」 badge white/white CR 1.00 → 修正 */
.sidebar-quick-rec-pill {
background: rgba(255, 255, 255, 0.95) !important;
color: #5B21B6 !important; /* CR ~9:1 vs white */
font-weight: 800 !important;
font-size: 11px !important;
letter-spacing: 0.04em !important;
padding: 3px 8px !important;
}
/* コンパちゃん line-height 1.35 → 1.55 */
#sidebar-kompa-trigger span {
line-height: 1.55 !important;
}
/* 2026-07-12 v10 Round2: 家系図 / table 横あふれ対策 (owner 「切れる」 激怒 の 追撃 fix) */
.family-tree,
.genogram-wrap,
[data-cdpanel="family"] > * ,
[class*="family"][class*="tree"] {
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
max-width: 100% !important;
}
/* table を wrapper で 覆う 代替: table 自身 に overflow を 継承 させる */
@media (max-width: 768px) {
.cd-right table,
table.clients,
main table {
display: block !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
max-width: 100% !important;
}
}
/* -webkit-tap-highlight: iOS の 青ハイライト 除去 (見た目 の ノイズ) */
* {
-webkit-tap-highlight-color: transparent;
}
/* prefers-reduced-motion 対応 (a11y) */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ============================================================
2026-07-15 contrast pass: 塗り pill / badge / button の 文字色 統一
owner FB: 「管理中 の 青いピル に 黒い文字 で 見づらい」
line 1185 の color:ink-2 が 後段 の bg-blue と 合わさって 低 コントラスト。
全 塗り status-pill を 白 文字 に 統一。
============================================================ */
.status-pill.active,
.status-pill.new,
.status-pill.important,
.status-pill.warn,
.status-pill.pending,
.status-pill.recording,
.status-pill.done,
.status-pill.complete,
.status-pill.info,
.status-pill.dormant {
color: #fff !important;
}
.status-pill.active::before,
.status-pill.new::before,
.status-pill.important::before,
.status-pill.warn::before,
.status-pill.pending::before,
.status-pill.recording::before,
.status-pill.done::before,
.status-pill.complete::before,
.status-pill.info::before,
.status-pill.dormant::before {
background: rgba(255, 255, 255, 0.9) !important;
}
/* count-badge / .badge / .pill 系 も 塗り 時 は 白 文字 */
.count-badge.indigo, .count-badge.active,
.badge.indigo, .badge.active,
.pill.indigo, .pill.active {
color: #fff !important;
}
/* 青系 button / CTA で 黒文字 に なってる 誤 combi 全部 fix */
button.primary,
button[class*="btn-primary"],
button[class*="btn-cta"],
a.btn-primary, a[class*="btn-cta"],
.btn-cta-primary,
.fp-btn-primary,
.upgrade-mini,
[data-cta-primary],
[class*="vv-indigo"][class*="filled"] {
color: #fff !important;
}
button.primary *,
button[class*="btn-primary"] *,
button[class*="btn-cta"] *,
.btn-cta-primary * {
color: inherit !important;
}
/* rec-pill / line-status-pill.on など 塗り 系 全部 白 */
.rec-pill.recording,
.rec-pill.saved,
.line-status-pill.on {
color: #fff !important;
}
/* KPI badge / チャート凡例 で 塗り 円 の 中 text が dark に なる 罠 */
[class*="pill"][style*="background"][style*="rgb"] {
color: #fff; /* 弱い hint、 明示 style が あれば override 可 */
}
/* Round 2 — 実測 WCAG AA (4.5+) 未達 の pill 色 を 深い 色 に 差替 */
.status-pill.new { background: #BE185D !important; } /* pink 800 → white 5.72 AA */
.status-pill.dormant { background: #475569 !important; } /* slate 600 → white 7.05 AAA */
.status-pill.pending,
.status-pill.warn { background: #B45309 !important; } /* amber 700 → white 5.16 AA */
.status-pill.recording { background: #0891B2 !important; } /* cyan 700 → white 4.83 AA */
/* pill 内 の ● dot は 90% 透過 白 (既 rule 適用済) */
/* ============================================================
2026-07-15 decoration tone 統一 (owner FB: 各 タブ ページ で UI 統一感 なし)
impeccable skill 適用 の 装飾層 統一 pass
------------------------------------------------------------
共通 tokens (この block で 完結、 既存 CSS を 触らない override):
radius = 10px (card / section)
shadow = subtle single layer
border = 1px #E2E8F0
bg = #fff (card) / #F8FAFC (section subtle)
ink text = #1E293B (headings) / #475569 (body) / #64748B (dim)
============================================================ */
/* 「読込中…」 プレースホルダー を 読める コントラスト に */
[data-line-view] > div[style*="読込中"],
div[style*="color:#94a3b8"][style*="読込中"],
div[style*="color: #94a3b8"] {
color: #475569 !important;
font-family: var(--font-body) !important;
font-size: 13px !important;
padding: 32px 20px !important;
text-align: center !important;
background: #F8FAFC !important;
border: 1px dashed #CBD5E1 !important;
border-radius: 10px !important;
}
/* hub-section-title 統一 (settings hub の 「🏢 FP切替」 「🔌 LINE 公式アカウント接続」 等) */
.hub-section-title {
font-family: var(--font-body) !important;
font-size: 15.5px !important;
font-weight: 800 !important;
color: #1E293B !important;
letter-spacing: -0.01em !important;
border-bottom: 2px solid #E2E8F0 !important;
padding: 0 0 10px !important;
margin: 28px 0 16px !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
line-height: 1.5 !important;
}
.hub-section-title:first-child { margin-top: 0 !important; }
/* section head/title 汎用: 統一 タイポ + 下線 */
.section-title, .sec-head h2 {
font-family: var(--font-body) !important;
font-weight: 800 !important;
color: #1E293B !important;
letter-spacing: -0.01em !important;
}
.section-title { font-size: 15px !important; }
/* card 汎用: 統一 radius + border + subtle shadow + bg */
.cd-card, .kpi, .list-card, .info-card, .fp-meeting-card,
[class*="card"]:not([class*="card-mini"]):not([class*="cards"]):not([class*="card-header"]) {
border-radius: 10px !important;
}
/* quick-jump アンカー ボタン (「🏢 FP切替・新規追加」 「🔌 LINE接続」 「👥 セグメント」) 統一 */
.quick-jump {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
padding: 8px 14px !important;
background: #F1F5F9 !important;
border: 1px solid #E2E8F0 !important;
border-radius: 999px !important;
color: #1E293B !important;
font-family: var(--font-body) !important;
font-size: 12px !important;
font-weight: 700 !important;
letter-spacing: 0.02em !important;
text-decoration: none !important;
transition: background 120ms, border-color 120ms;
min-height: 36px !important;
}
.quick-jump:hover {
background: #E2E8F0 !important;
border-color: #94A3B8 !important;
color: #0F172A !important;
}
/* section 汎用 padding rhythm (empty state / 説明 text) */
section[id^="set-"], section[id^="fp-"] {
margin-bottom: 32px !important;
}
section[id^="set-"] > div[data-line-view] {
background: transparent !important;
}
/* 内 の 白 card 統一 (設定ハブ の 各 section 内 の 白 card) */
section > div[data-line-view] > div[style*="background:#fff"],
section > div[data-line-view] > div[style*="background: #fff"] {
border-radius: 10px !important;
border: 1px solid #E2E8F0 !important;
box-shadow: 0 1px 3px rgba(15,23,42,0.04) !important;
}
/* howto-banner (settings hub 上部 dark bg) 統一 padding + 角丸 */
.howto-banner {
border-radius: 10px !important;
box-shadow: 0 4px 12px rgba(15,23,42,0.10) !important;
}
/* 汎用: 白背景 or 明るい bg の 上 の text-secondary (説明文) */
.section-sub, .card-sub, .list-sub, .field-hint,
[class*="sub"]:not(input):not(select):not(button):not([class*="submit"]):not([class*="subject"]) {
color: #475569; /* WCAG AA 5:1 vs #fff */
}
/* ==========================================================================
MEETING NOTES POLISH (2026-07-17) — 議事録タブ の 実UI 適用版
preview page (meeting-single.html) で 承認済 の override を そのまま 移植:
- 濃色 solid pill 型 section 見出し (緑/indigo/橙/赤/ink)
- 白面 + hairline の list card (決定=✓緑 / TODO=番号橙 / 数字=左ink bar)
- 蛍光ペン 淡黄 marker (fp-sum-strong)
- 懸念事項 row = grid + 濃赤 alert card + ⚠ pill label
- LINE風 transcript chat bubble (右緑=advisor / 左白=client)
全て .fp-meeting-* / .fp-sum-* / .fp-transcript-* に scope 済 (他機能 影響 zero)
========================================================================== */
/* --- section header pill (元 淡パステル塗り kill) --- */
.fp-summary-structured .fp-sum-section-h,
.fp-summary-structured .fp-sum-tone-vital .fp-sum-section-h,
.fp-summary-structured .fp-sum-tone-attn .fp-sum-section-h,
.fp-summary-structured .fp-sum-tone-critical .fp-sum-section-h,
.fp-summary-structured .fp-sum-tone-trust .fp-sum-section-h,
.fp-summary-structured .fp-sum-tone-mono .fp-sum-section-h,
.fp-summary-structured .fp-sum-tone-ink .fp-sum-section-h {
background: transparent !important;
border-bottom: 1px solid #ECECEA !important;
padding: 12px 14px 10px !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
}
.fp-summary-structured .fp-sum-section-dot { display: none !important; }
.fp-summary-structured .fp-sum-section-title,
.fp-summary-structured .fp-sum-tone-vital .fp-sum-section-title,
.fp-summary-structured .fp-sum-tone-attn .fp-sum-section-title,
.fp-summary-structured .fp-sum-tone-critical .fp-sum-section-title,
.fp-summary-structured .fp-sum-tone-trust .fp-sum-section-title,
.fp-summary-structured .fp-sum-tone-mono .fp-sum-section-title,
.fp-summary-structured .fp-sum-tone-ink .fp-sum-section-title {
display: inline-flex !important;
align-items: center !important;
padding: 4px 11px !important;
border-radius: 6px !important;
color: #FFFFFF !important;
font-size: 12.5px !important;
font-weight: 700 !important;
letter-spacing: 0.01em !important;
background: #0A0A0A !important;
}
.fp-summary-structured .fp-sum-tone-vital .fp-sum-section-title { background: #047647 !important; }
.fp-summary-structured .fp-sum-tone-attn .fp-sum-section-title { background: #B5530F !important; }
.fp-summary-structured .fp-sum-tone-critical .fp-sum-section-title { background: #DC2B2B !important; }
.fp-summary-structured .fp-sum-tone-trust .fp-sum-section-title { background: #3F3FCE !important; }
.fp-summary-structured .fp-sum-tone-mono .fp-sum-section-title,
.fp-summary-structured .fp-sum-tone-ink .fp-sum-section-title { background: #0A0A0A !important; }
/* --- CASE 02 型 (fp-sum-h4 別クラス) の pill --- */
.fp-summary-structured .fp-sum-h4 {
display: inline-flex !important;
align-items: center !important;
padding: 4px 11px !important;
border-radius: 6px !important;
color: #FFFFFF !important;
font-size: 12.5px !important;
font-weight: 700 !important;
letter-spacing: 0.01em !important;
background: #0A0A0A !important;
margin: 18px 0 10px !important;
}
.fp-summary-structured .fp-sum-h4.fp-sum-tone-vital { background: #047647 !important; color: #FFFFFF !important; }
.fp-summary-structured .fp-sum-h4.fp-sum-tone-attn { background: #B5530F !important; color: #FFFFFF !important; }
.fp-summary-structured .fp-sum-h4.fp-sum-tone-critical { background: #DC2B2B !important; color: #FFFFFF !important; }
.fp-summary-structured .fp-sum-h4.fp-sum-tone-trust { background: #3F3FCE !important; color: #FFFFFF !important; }
.fp-summary-structured .fp-sum-h4.fp-sum-tone-mono,
.fp-summary-structured .fp-sum-h4.fp-sum-tone-ink { background: #0A0A0A !important; color: #FFFFFF !important; }
.fp-summary-structured .fp-sum-h4 .fp-sum-dot { display: none !important; }
/* --- meta 外側 label (「AI 議事録」「AI 文字起こし」等) --- */
.fp-meeting-block-label {
color: #0A0A0A !important;
font-size: 12px !important;
font-weight: 700 !important;
letter-spacing: 0.02em !important;
margin-bottom: 12px !important;
}
.fp-meeting-block-label > span:first-child {
display: inline-flex !important;
align-items: center !important;
padding: 4px 11px !important;
border-radius: 6px !important;
color: #FFFFFF !important;
background: #0A0A0A !important;
font-size: 12.5px !important;
font-weight: 700 !important;
}
.fp-meeting-block:not(:has(>.fp-meeting-block-label > span)) .fp-meeting-block-label {
display: inline-flex !important;
align-items: center !important;
padding: 4px 11px !important;
border-radius: 6px !important;
color: #FFFFFF !important;
background: #0A0A0A !important;
}
/* --- section 全体 は 白面 + hairline (パステル塗り消滅) --- */
.fp-summary-structured .fp-sum-section {
background: #FFFFFF !important;
border: 1px solid #ECECEA !important;
border-radius: 12px !important;
overflow: hidden !important;
}
.fp-summary-structured .fp-sum-section-body {
background: #FFFFFF !important;
}
/* --- list / row / stat / memo polish --- */
.fp-summary-structured .fp-sum-h4 + ul.fp-sum-list,
.fp-summary-structured .fp-sum-h4 + ol.fp-sum-list,
.fp-summary-structured .fp-sum-h4 + p.fp-sum-p,
.fp-summary-structured .fp-sum-h4 + .fp-sum-row {
margin-top: 4px !important;
}
.fp-summary-structured .fp-sum-list {
list-style: none !important;
padding: 0 !important;
margin: 6px 0 22px !important;
display: flex !important;
flex-direction: column !important;
gap: 6px !important;
}
.fp-summary-structured .fp-sum-list > li {
position: relative !important;
background: #FFFFFF !important;
border: 1px solid #ECECEA !important;
border-radius: 8px !important;
padding: 11px 14px 11px 42px !important;
font-size: 13.5px !important;
line-height: 1.75 !important;
color: #1A1A1A !important;
transition: border-color 120ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.fp-summary-structured .fp-sum-list > li:hover {
border-color: #B0B0AC !important;
}
/* 決定事項 li — ✓緑 + 左緑 accent bar */
.fp-summary-structured .fp-sum-tone-vital + ul.fp-sum-list > li,
.fp-summary-structured .fp-sum-h4.fp-sum-tone-vital + ul.fp-sum-list > li {
border-left: 4px solid #047647 !important;
background: linear-gradient(90deg, rgba(4,118,71,0.05) 0%, rgba(255,255,255,1) 45%) !important;
}
.fp-summary-structured .fp-sum-tone-vital + ul.fp-sum-list > li::before,
.fp-summary-structured .fp-sum-h4.fp-sum-tone-vital + ul.fp-sum-list > li::before {
content: '✓' !important;
position: absolute !important;
left: 14px !important; top: 10px !important;
width: 22px !important; height: 22px !important;
background: #047647 !important;
color: #FFFFFF !important;
border-radius: 50% !important;
display: inline-flex !important;
align-items: center !important; justify-content: center !important;
font-size: 12px !important;
font-weight: 900 !important;
font-family: 'Manrope', 'Noto Sans JP', sans-serif !important;
line-height: 1 !important;
box-shadow: 0 0 0 2px rgba(4,118,71,0.15) !important;
}
/* TODO li — 番号濃橙 + 左橙 accent + 右上 TODO タグ */
.fp-summary-structured .fp-sum-tone-attn + ol.fp-sum-list > li,
.fp-summary-structured .fp-sum-h4.fp-sum-tone-attn + ol.fp-sum-list > li {
border-left: 4px solid #B5530F !important;
background: linear-gradient(90deg, rgba(181,83,15,0.05) 0%, rgba(255,255,255,1) 45%) !important;
}
.fp-summary-structured .fp-sum-tone-attn + ol.fp-sum-list,
.fp-summary-structured .fp-sum-h4.fp-sum-tone-attn + ol.fp-sum-list {
counter-reset: fp-todo !important;
}
.fp-summary-structured .fp-sum-tone-attn + ol.fp-sum-list > li,
.fp-summary-structured .fp-sum-h4.fp-sum-tone-attn + ol.fp-sum-list > li {
counter-increment: fp-todo !important;
}
.fp-summary-structured .fp-sum-tone-attn + ol.fp-sum-list > li::before,
.fp-summary-structured .fp-sum-h4.fp-sum-tone-attn + ol.fp-sum-list > li::before {
content: counter(fp-todo) !important;
position: absolute !important;
left: 12px !important; top: 9px !important;
width: 22px !important; height: 22px !important;
background: #B5530F !important;
color: #FFFFFF !important;
border-radius: 6px !important;
display: inline-flex !important;
align-items: center !important; justify-content: center !important;
font-family: 'Manrope', 'Noto Sans JP', sans-serif !important;
font-size: 12px !important;
font-weight: 800 !important;
line-height: 1 !important;
box-shadow: 0 0 0 2px rgba(181,83,15,0.15) !important;
}
.fp-summary-structured .fp-sum-tone-attn + ol.fp-sum-list > li::after,
.fp-summary-structured .fp-sum-h4.fp-sum-tone-attn + ol.fp-sum-list > li::after {
content: 'TODO' !important;
position: absolute !important;
right: 10px !important; top: 10px !important;
font-family: 'Manrope', 'Noto Sans JP', sans-serif !important;
font-size: 9px !important;
font-weight: 800 !important;
letter-spacing: 0.14em !important;
color: #B5530F !important;
background: rgba(181,83,15,0.08) !important;
padding: 2px 7px !important;
border-radius: 4px !important;
line-height: 1.2 !important;
}
/* 数字・試算 (mono/ink) li — 左ink 縦 bar */
.fp-summary-structured .fp-sum-tone-mono + ul.fp-sum-list > li,
.fp-summary-structured .fp-sum-h4.fp-sum-tone-mono + ul.fp-sum-list > li,
.fp-summary-structured .fp-sum-tone-ink + ul.fp-sum-list > li,
.fp-summary-structured .fp-sum-h4.fp-sum-tone-ink + ul.fp-sum-list > li {
padding-left: 14px !important;
border-left: 3px solid #0A0A0A !important;
}
.fp-summary-structured .fp-sum-tone-mono + ul.fp-sum-list > li::before,
.fp-summary-structured .fp-sum-h4.fp-sum-tone-mono + ul.fp-sum-list > li::before,
.fp-summary-structured .fp-sum-tone-ink + ul.fp-sum-list > li::before,
.fp-summary-structured .fp-sum-h4.fp-sum-tone-ink + ul.fp-sum-list > li::before {
content: none !important;
}
/* --- item numbered chip / section itself --- */
.fp-summary-structured .fp-sum-item {
background: #FFFFFF !important;
border: 1px solid #ECECEA !important;
}
.fp-summary-structured .fp-sum-item-num {
background: #0A0A0A !important;
color: #FFFFFF !important;
font-weight: 800 !important;
}
.fp-summary-structured .fp-sum-item.fp-sum-tone-vital .fp-sum-item-num { background: #047647 !important; }
.fp-summary-structured .fp-sum-item.fp-sum-tone-attn .fp-sum-item-num { background: #B5530F !important; }
.fp-summary-structured .fp-sum-item.fp-sum-tone-critical .fp-sum-item-num { background: #DC2B2B !important; }
.fp-summary-structured .fp-sum-item.fp-sum-tone-trust .fp-sum-item-num { background: #3F3FCE !important; }
/* --- 数字強調 (fp-sum-num) & 蛍光ペン marker (fp-sum-strong) --- */
.fp-summary-structured .fp-sum-num {
background: #0A0A0A !important;
color: #FFFFFF !important;
padding: 1px 7px !important;
border-radius: 5px !important;
font-family: 'JetBrains Mono', 'Manrope', ui-monospace, monospace !important;
font-weight: 700 !important;
font-size: 12px !important;
letter-spacing: 0.01em !important;
display: inline-block !important;
line-height: 1.4 !important;
vertical-align: baseline !important;
}
.fp-summary-structured .fp-sum-strong {
font-weight: 700 !important;
color: #0A0A0A !important;
background: linear-gradient(transparent 55%, #FFF176 55%, #FFEB3B 88%, transparent 88%) !important;
padding: 0 3px !important;
border-radius: 2px !important;
text-decoration: none !important;
}
/* --- 懸念事項 row = grid 型 alert card + ⚠ pill label --- */
.fp-summary-structured .fp-sum-row,
.fp-summary-structured .fp-sum-row.fp-sum-tone-vital,
.fp-summary-structured .fp-sum-row.fp-sum-tone-attn,
.fp-summary-structured .fp-sum-row.fp-sum-tone-critical,
.fp-summary-structured .fp-sum-row.fp-sum-tone-trust,
.fp-summary-structured .fp-sum-row.fp-sum-tone-mono {
display: grid !important;
grid-template-columns: 220px 1fr !important;
gap: 12px 18px !important;
align-items: start !important;
background: #FFFFFF !important;
border: 1px solid #ECECEA !important;
border-left: 4px solid #DC2B2B !important;
border-radius: 8px !important;
padding: 14px 16px 14px 18px !important;
margin: 6px 0 !important;
position: relative !important;
}
.fp-summary-structured .fp-sum-row.fp-sum-tone-vital { border-left-color: #047647 !important; }
.fp-summary-structured .fp-sum-row.fp-sum-tone-attn { border-left-color: #B5530F !important; }
.fp-summary-structured .fp-sum-row.fp-sum-tone-critical { border-left-color: #DC2B2B !important; }
.fp-summary-structured .fp-sum-row.fp-sum-tone-trust { border-left-color: #3F3FCE !important; }
.fp-summary-structured .fp-sum-row .fp-sum-label {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
padding: 4px 10px 4px 8px !important;
background: #DC2B2B !important;
color: #FFFFFF !important;
border-radius: 5px !important;
font-family: 'Manrope', 'Noto Sans JP', sans-serif !important;
font-size: 11.5px !important;
font-weight: 800 !important;
letter-spacing: 0.02em !important;
line-height: 1.3 !important;
align-self: start !important;
width: fit-content !important;
max-width: 100% !important;
}
.fp-summary-structured .fp-sum-row.fp-sum-tone-vital .fp-sum-label { background: #047647 !important; }
.fp-summary-structured .fp-sum-row.fp-sum-tone-attn .fp-sum-label { background: #B5530F !important; }
.fp-summary-structured .fp-sum-row.fp-sum-tone-trust .fp-sum-label { background: #3F3FCE !important; }
.fp-summary-structured .fp-sum-row .fp-sum-label::before {
content: '⚠' !important;
font-size: 11px !important;
}
.fp-summary-structured .fp-sum-row .fp-sum-value {
font-size: 13.5px !important;
line-height: 1.75 !important;
color: #1A1A1A !important;
}
.fp-summary-structured .fp-sum-p {
font-size: 13.5px !important;
line-height: 1.85 !important;
color: #1A1A1A !important;
margin: 6px 0 22px !important;
max-width: 68ch !important;
}
.fp-summary-structured .fp-sum-h5 {
font-family: 'Manrope', 'Noto Sans JP', sans-serif !important;
font-size: 11.5px !important;
font-weight: 800 !important;
letter-spacing: 0.08em !important;
color: #6B6B6B !important;
text-transform: uppercase !important;
padding: 0 0 8px !important;
margin: 28px 0 12px !important;
border-bottom: 1px solid #ECECEA !important;
}
/* --- LINE風 transcript chat bubble --- */
.fp-transcript-chat {
background: #F0F2F5 !important;
padding: 20px 18px !important;
border-radius: 12px !important;
border: 1px solid #ECECEA !important;
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
max-height: 620px !important;
overflow-y: auto !important;
}
.fp-transcript-chat > div {
display: flex !important;
gap: 10px !important;
align-items: flex-end !important;
}
.fp-transcript-chat > div > div {
max-width: 72% !important;
display: flex !important;
flex-direction: column !important;
gap: 4px !important;
}
.fp-transcript-chat > div > div > div:first-child {
font-family: 'Manrope', 'Noto Sans JP', sans-serif !important;
font-size: 11.5px !important;
font-weight: 700 !important;
color: #6B6B6B !important;
padding: 0 4px !important;
letter-spacing: 0.01em !important;
}
.fp-transcript-chat > div > div > div:last-child {
padding: 10px 14px !important;
border-radius: 16px !important;
font-size: 14px !important;
line-height: 1.75 !important;
color: #1A1A1A !important;
background: #FFFFFF !important;
box-shadow: 0 1px 2px rgba(16,24,40,0.06) !important;
word-wrap: break-word !important;
}
.fp-transcript-chat > div[style*="flex-end"] > div > div:last-child {
background: #06C755 !important;
color: #FFFFFF !important;
border-bottom-right-radius: 4px !important;
box-shadow: 0 1px 2px rgba(6,199,85,0.15) !important;
}
.fp-transcript-chat > div[style*="flex-end"] > div > div:first-child {
text-align: right !important;
color: #6B6B6B !important;
}
.fp-transcript-chat > div[style*="flex-end"] > div > div:first-child span {
color: #9A9A9A !important;
}
.fp-transcript-chat > div[style*="flex-start"] > div > div:last-child {
background: #FFFFFF !important;
color: #1A1A1A !important;
border-bottom-left-radius: 4px !important;
}
.fp-transcript-chat > div[style*="flex-start"] > div > div:first-child {
text-align: left !important;
}
.fp-transcript-chat > div[style*="flex-end"] > div > div:first-child::before,
.fp-transcript-chat > div[style*="flex-start"] > div > div:first-child::before {
content: '' !important;
display: inline-block !important;
width: 6px !important; height: 6px !important;
border-radius: 50% !important;
margin-right: 6px !important;
vertical-align: middle !important;
transform: translateY(-1px) !important;
}
.fp-transcript-chat > div[style*="flex-end"] > div > div:first-child::before { background: #06C755 !important; }
.fp-transcript-chat > div[style*="flex-start"] > div > div:first-child::before { background: #3F3FCE !important; }
@media (max-width: 640px) {
.fp-summary-structured .fp-sum-row {
grid-template-columns: 1fr !important;
gap: 6px !important;
}
.fp-summary-structured .fp-sum-list > li {
font-size: 13px !important;
padding-right: 12px !important;
}
.fp-transcript-chat > div > div { max-width: 85% !important; }
.fp-transcript-chat { padding: 14px 12px !important; }
}
/* ═══════════════════════════════════════════════════════════════════
議事録 Kanban 3列 レイアウト (variant C, owner 2026-07-28 承認)
決定事項 | 次回TODO | 懸念事項 を 横 3列、 関心事 + 数字 を 下 帯 で
═══════════════════════════════════════════════════════════════════ */
.fp-summary-structured {
display: grid !important;
grid-template-columns: 1fr 1fr 1fr !important;
grid-auto-rows: min-content !important;
gap: 14px !important;
align-items: start !important;
}
.fp-summary-structured .fp-sum-warnings {
grid-column: 1 / -1 !important;
margin-bottom: 4px !important;
}
.fp-summary-structured .fp-sum-empty,
.fp-summary-structured .fp-sum-body,
.fp-summary-structured .fp-sum-p:not(.fp-sum-section .fp-sum-p) {
grid-column: 1 / -1 !important;
}
/* 3 primary column sections */
.fp-summary-structured .fp-sum-section {
background: #fff !important;
border: 1px solid #E2E8F0 !important;
border-top: 4px solid transparent !important;
border-radius: 8px !important;
padding: 0 !important;
overflow: hidden !important;
display: flex !important;
flex-direction: column !important;
box-shadow: 0 1px 3px rgba(15,23,32,0.04) !important;
}
.fp-summary-structured .fp-sum-section.fp-sum-tone-vital { grid-column: 1 !important; grid-row: 1 !important; border-top-color: #047647 !important; }
.fp-summary-structured .fp-sum-section.fp-sum-tone-attn { grid-column: 2 !important; grid-row: 1 !important; border-top-color: #F59E0B !important; }
.fp-summary-structured .fp-sum-section.fp-sum-tone-critical { grid-column: 3 !important; grid-row: 1 !important; border-top-color: #DC2B2B !important; }
/* bottom strip: trust (関心事) 2/3幅 + mono (数字) 1/3幅 */
.fp-summary-structured .fp-sum-section.fp-sum-tone-trust { grid-column: 1 / 3 !important; grid-row: 2 !important; border-top-color: #4338CA !important; }
.fp-summary-structured .fp-sum-section.fp-sum-tone-mono,
.fp-summary-structured .fp-sum-section.fp-sum-tone-ink { grid-column: 3 !important; grid-row: 2 !important; border-top-color: #0F1720 !important; }
/* section header (pill やめる、 sect-h ラベル に) */
.fp-summary-structured .fp-sum-section .fp-sum-section-h {
padding: 12px 16px 10px !important;
background: transparent !important;
border-bottom: 1px solid #F1F5F9 !important;
display: flex !important;
align-items: baseline !important;
justify-content: space-between !important;
margin: 0 !important;
}
.fp-summary-structured .fp-sum-section .fp-sum-section-title {
font-size: 12px !important;
font-weight: 800 !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
color: #0F1720 !important;
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
border-radius: 0 !important;
display: inline !important;
}
.fp-summary-structured .fp-sum-section .fp-sum-section-body {
padding: 10px 14px 14px !important;
flex: 1 !important;
overflow-y: auto !important;
max-height: 420px !important;
}
/* card 化 - list items become chips */
.fp-summary-structured .fp-sum-section .fp-sum-list {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
.fp-summary-structured .fp-sum-section .fp-sum-list > li {
background: #F8FAFC !important;
border-radius: 6px !important;
padding: 9px 12px !important;
margin-bottom: 6px !important;
font-size: 13px !important;
line-height: 1.55 !important;
color: #0F1720 !important;
border-left: 3px solid transparent !important;
}
.fp-summary-structured .fp-sum-section .fp-sum-list > li::before,
.fp-summary-structured .fp-sum-section .fp-sum-list > li::marker { content: none !important; }
.fp-summary-structured .fp-sum-tone-vital .fp-sum-list > li { background: #F0FDF4 !important; border-left-color: #047647 !important; }
.fp-summary-structured .fp-sum-tone-attn .fp-sum-list > li { background: #FFFBEB !important; border-left-color: #F59E0B !important; }
.fp-summary-structured .fp-sum-tone-critical .fp-sum-list > li { background: #FEF2F2 !important; border-left-color: #DC2B2B !important; }
.fp-summary-structured .fp-sum-tone-trust .fp-sum-list > li { background: #EEF2FF !important; border-left-color: #4338CA !important; }
.fp-summary-structured .fp-sum-tone-mono .fp-sum-list > li { background: #F1F5F9 !important; border-left-color: #0F1720 !important; }
/* section 内 の p (関心事 の 長文 / 懸念の説明) */
.fp-summary-structured .fp-sum-section .fp-sum-section-body > p,
.fp-summary-structured .fp-sum-section .fp-sum-section-body .fp-sum-p {
padding: 8px 0 !important;
margin: 0 !important;
font-size: 13px !important;
line-height: 1.7 !important;
color: #1F2A3F !important;
background: transparent !important;
border: 0 !important;
}
.fp-summary-structured .fp-sum-section .fp-sum-section-body > p + p {
border-top: 1px solid #F1F5F9 !important;
padding-top: 10px !important;
margin-top: 4px !important;
}
/* row (label:value) は section 内 では chip 風 */
.fp-summary-structured .fp-sum-section .fp-sum-row {
background: #F8FAFC !important;
border: 0 !important;
border-left: 3px solid #0F1720 !important;
border-radius: 6px !important;
padding: 7px 10px !important;
margin-bottom: 6px !important;
display: flex !important;
gap: 8px !important;
align-items: baseline !important;
flex-wrap: wrap !important;
}
.fp-summary-structured .fp-sum-section .fp-sum-row .fp-sum-label {
background: transparent !important;
color: #64748B !important;
font-size: 11px !important;
font-weight: 700 !important;
padding: 0 !important;
letter-spacing: 0.02em !important;
min-width: 0 !important;
}
.fp-summary-structured .fp-sum-section .fp-sum-row .fp-sum-value {
color: #0F1720 !important;
font-size: 13px !important;
font-weight: 700 !important;
padding: 0 !important;
}
.fp-summary-structured .fp-sum-section .fp-sum-row .fp-sum-label::before { content: none !important; }
.fp-summary-structured .fp-sum-section .fp-sum-h5 {
font-size: 11px !important;
font-weight: 800 !important;
color: #64748B !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
margin: 8px 0 4px !important;
padding: 0 !important;
}
/* numbered items (1. **xxx**：yyy) card 化 */
.fp-summary-structured .fp-sum-section .fp-sum-item {
background: #F8FAFC !important;
border-radius: 6px !important;
padding: 8px 10px !important;
margin-bottom: 6px !important;
border-left: 3px solid transparent !important;
display: flex !important;
gap: 8px !important;
align-items: flex-start !important;
}
.fp-summary-structured .fp-sum-tone-vital .fp-sum-item { background: #F0FDF4 !important; border-left-color: #047647 !important; }
.fp-summary-structured .fp-sum-tone-attn .fp-sum-item { background: #FFFBEB !important; border-left-color: #F59E0B !important; }
.fp-summary-structured .fp-sum-tone-critical .fp-sum-item { background: #FEF2F2 !important; border-left-color: #DC2B2B !important; }
.fp-summary-structured .fp-sum-section .fp-sum-item-num {
min-width: 20px !important;
width: 20px !important;
height: 20px !important;
font-size: 11px !important;
color: #fff !important;
border-radius: 4px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-weight: 800 !important;
flex-shrink: 0 !important;
}
.fp-summary-structured .fp-sum-section .fp-sum-item-title {
font-size: 12.5px !important;
font-weight: 700 !important;
color: #0F1720 !important;
}
.fp-summary-structured .fp-sum-section .fp-sum-item-desc {
font-size: 12px !important;
color: #475569 !important;
margin-top: 3px !important;
line-height: 1.55 !important;
}
/* ─ responsive: 900px 以下 で 縦積み ─ */
@media (max-width: 900px) {
.fp-summary-structured {
grid-template-columns: 1fr !important;
}
.fp-summary-structured .fp-sum-section.fp-sum-tone-vital,
.fp-summary-structured .fp-sum-section.fp-sum-tone-attn,
.fp-summary-structured .fp-sum-section.fp-sum-tone-critical,
.fp-summary-structured .fp-sum-section.fp-sum-tone-trust,
.fp-summary-structured .fp-sum-section.fp-sum-tone-mono,
.fp-summary-structured .fp-sum-section.fp-sum-tone-ink {
grid-column: 1 !important;
grid-row: auto !important;
}
.fp-summary-structured .fp-sum-section .fp-sum-section-body {
max-height: none !important;
}
}
/* ═══════════════════════════════════════════════════════════════════════
2026-07-31 · owner 承認 「どれも良いね」 · 現行 UI 段階 改善 (5 案 全部)
base: 現行 selectors 維持、 末尾 override で 40-60代 向け detail-up
═══════════════════════════════════════════════════════════════════════ */
/* CASE 01: 左サイドバー プロフィール 大型化 + 主 CTA 明確化 */
.cd-modal .cd-profile-avatar {
width: 68px !important;
height: 68px !important;
font-size: 26px !important;
background-image: linear-gradient(135deg, #00844A 0%, #065F46 100%) !important;
}
.cd-modal .cd-profile-name { font-size: 20px !important; font-weight: 900 !important; letter-spacing: -0.015em !important; }
.cd-modal .cd-profile-honor, .cd-modal .cd-profile-kana { font-size: 13px !important; }
#cd-meeting-start-btn {
min-height: 60px !important;
font-size: 17px !important;
font-weight: 900 !important;
padding: 16px 22px !important;
box-shadow: 0 8px 24px rgba(5,150,105,0.30) !important;
letter-spacing: 0.01em !important;
}
#cd-meeting-start-btn:hover { background: #06703F !important; box-shadow: 0 12px 32px rgba(5,150,105,0.42) !important; }
/* CASE 02: タブ の 視認性 + 「0」 badge 非表示 */
.cd-modal .cd-tab {
font-size: 16px !important;
font-weight: 800 !important;
padding: 16px 18px !important;
min-height: 52px !important;
}
.cd-modal .cd-tab.cd-tab-active { border-bottom-width: 3px !important; }
.cd-modal .cd-tab-count {
padding: 3px 9px !important;
font-size: 12px !important;
font-weight: 800 !important;
margin-left: 5px !important;
}
.cd-modal .cd-tab-count[data-count="0"] { display: none !important; }
/* CASE 03 (2026-07-31 revert): 緑 背景 owner NG (何回も 直せ 指摘) → 白 統一 は line 9334 base で 適用済、 title だけ 拡大 維持 */
.cd-modal .cd-flow-title { font-size: 20px !important; letter-spacing: -0.01em !important; font-weight: 900 !important; color: #0F1729 !important; }
.cd-modal .cd-flow-reason { color: #4B5563 !important; font-weight: 500 !important; }
.cd-modal .cd-flow-eyebrow-pill {
background: linear-gradient(135deg, #C19A3A, #A0822E) !important;
color: #fff !important;
letter-spacing: 0.12em !important;
font-weight: 800 !important;
font-family: 'Manrope', sans-serif !important;
font-size: 11px !important;
}
.cd-modal .cd-flow-eyebrow-pri {
background: #FEE2E2 !important;
color: #991B1B !important;
font-weight: 800 !important;
font-size: 11px !important;
padding: 3px 10px !important;
border-radius: 999px !important;
letter-spacing: 0.06em !important;
}
/* 「白い帯 が スクロール で ついてくる」 bug 撤去 —
.cd-right.has-more-below::after の sticky 白 gradient が JS の class 除去 タイミング と ズレて 残る問題。
fade hint より 常時 clean な body 表示 の 方 が owner 目線 で 有益 */
.cd-right.has-more-below::after { display: none !important; }
/* CASE 04: 顧客リスト 行 大型化 (padding + font-size up、 layout 破壊 なし) */
#clients-table tbody tr, .customer-row {
min-height: 68px;
}
#clients-table tbody td { padding: 16px 12px !important; font-size: 15px !important; vertical-align: middle !important; }
#clients-table tbody tr td:first-child {
font-size: 17px !important;
font-weight: 800 !important;
color: #0F1729 !important;
}
#clients-table tbody tr:hover { background: #FBFBFD !important; cursor: pointer; }
/* CASE 05: 状態 バッジ 色分け + ドット */
.cust-status-new, [class*="status"][data-status="new"], .badge-status-new,
.cust-status-active,[class*="status"][data-status="active"],.badge-status-active,
.cust-status-follow,[class*="status"][data-status="follow"],.badge-status-follow,
.cust-status-overdue,[class*="status"][data-status="overdue"],.badge-status-overdue {
font-size: 14px !important;
font-weight: 800 !important;
padding: 5px 12px !important;
border-radius: 8px !important;
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
letter-spacing: 0.01em !important;
}
.cust-status-new::before, [class*="status"][data-status="new"]::before, .badge-status-new::before,
.cust-status-active::before, [class*="status"][data-status="active"]::before, .badge-status-active::before,
.cust-status-follow::before, [class*="status"][data-status="follow"]::before, .badge-status-follow::before,
.cust-status-overdue::before, [class*="status"][data-status="overdue"]::before, .badge-status-overdue::before {
content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor;
}
.cust-status-new, [class*="status"][data-status="new"], .badge-status-new { background: #DBEAFE !important; color: #1E40AF !important; }
.cust-status-active,[class*="status"][data-status="active"],.badge-status-active { background: #ECFDF5 !important; color: #065F46 !important; }
.cust-status-follow,[class*="status"][data-status="follow"],.badge-status-follow { background: #FED7AA !important; color: #9A3412 !important; }
.cust-status-overdue,[class*="status"][data-status="overdue"],.badge-status-overdue { background: #FEE2E2 !important; color: #991B1B !important; }
/* ═══════════════════════════════════════════════════════════════════════
2026-07-31 · TOP page detail-up (owner「どこが変わったか分からない」対応)
.action-list rows 拡大 + workflow-step 大型化 + section-big-title 増強
═══════════════════════════════════════════════════════════════════════ */
/* action-list rows 大型化 (BEFORE: padding 18px 22px、 高さ ~60px) */
.action-list > .action-item,
.action-list > * {
padding: 26px 28px !important;
min-height: 96px !important;
border-bottom: 1px solid #E5E7EB !important;
}
.action-list > *:first-child {
border-left: 6px solid #00844A !important;
background: linear-gradient(90deg, rgba(0,132,74,0.06) 0%, #fff 40%) !important;
box-shadow: none !important;
padding-left: 26px !important;
}
.action-list > *:hover {
background: rgba(0,132,74,0.03) !important;
cursor: pointer;
}
/* 客名 · 情報 の font 拡大 (action-list 内) */
.action-list [class*="name"], .action-list h3, .action-list h4 {
font-size: 20px !important;
font-weight: 900 !important;
letter-spacing: -0.01em !important;
color: #0F1729 !important;
}
.action-list [class*="meta"], .action-list [class*="sub"] {
font-size: 14.5px !important;
color: #4B5563 !important;
font-weight: 600 !important;
}
.action-list button, .action-list .btn, .action-list [role="button"] {
min-height: 48px !important;
font-size: 15px !important;
font-weight: 800 !important;
padding: 12px 20px !important;
}
/* 「今日 話すべき方」 見出し 増強 */
.section-big-title {
font-size: 30px !important;
font-weight: 900 !important;
letter-spacing: -0.02em !important;
color: #0F1729 !important;
line-height: 1.25 !important;
}
.section-big-sub {
font-size: 15px !important;
color: #4B5563 !important;
font-weight: 600 !important;
margin-top: 6px !important;
line-height: 1.7 !important;
}
.section-eyebrow-pill {
background: #00844A !important;
color: #fff !important;
font-family: 'Manrope', sans-serif !important;
font-size: 11px !important;
font-weight: 800 !important;
letter-spacing: 0.14em !important;
padding: 4px 12px !important;
border-radius: 999px !important;
display: inline-block !important;
margin-bottom: 10px !important;
}
/* Workflow step 大型化 (「今日 の 進め方」 5 step) */
.workflow-step {
min-height: 130px !important;
padding: 22px 20px !important;
border-radius: 14px !important;
border: 2px solid #E5E7EB !important;
transition: all .15s !important;
}
.workflow-step:hover {
border-color: #00844A !important;
transform: translateY(-2px) !important;
box-shadow: 0 8px 20px rgba(0,132,74,0.14) !important;
}
.workflow-step-active {
background: #ECFDF5 !important;
border: 2px solid #00844A !important;
box-shadow: 0 6px 18px rgba(0,132,74,0.20) !important;
}
.workflow-step-title { font-size: 17px !important; font-weight: 900 !important; letter-spacing: -0.01em !important; color: #0F1729 !important; }
.workflow-step-desc { font-size: 13.5px !important; color: #4B5563 !important; line-height: 1.7 !important; font-weight: 500 !important; }
.workflow-step-num {
background: #0F1729 !important;
color: #fff !important;
width: 32px !important;
height: 32px !important;
border-radius: 50% !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-family: 'Manrope', sans-serif !important;
font-weight: 900 !important;
font-size: 15px !important;
}
.workflow-step-active .workflow-step-num { background: #00844A !important; }
.workflow-step-status {
background: #00844A !important;
color: #fff !important;
padding: 4px 12px !important;
border-radius: 999px !important;
font-size: 12px !important;
font-weight: 800 !important;
letter-spacing: 0.06em !important;
}
/* Section title 全般 の 増強 (「今日 の 進め方」 等) */
.section-title {
font-size: 22px !important;
font-weight: 900 !important;
letter-spacing: -0.015em !important;
color: #0F1729 !important;
}
.section-sub {
font-size: 14.5px !important;
color: #4B5563 !important;
font-weight: 600 !important;
line-height: 1.7 !important;
}
/* ============================================
* 2026-07-31 Case C: Task-based ホーム
* 「今日 話すべき方」 差替 UI (客 単位 → タスク 単位)
* ============================================ */
.fp-task-list { display: grid; gap: 20px; }
.fp-task-group {
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 14px;
overflow: hidden;
}
.fp-task-group-urgent { border-color: #FCA5A5; box-shadow: 0 4px 14px rgba(220,38,38,0.06); }
.fp-task-group-warn { border-color: #FCD34D; }
.fp-task-group-head {
display: flex; align-items: center; gap: 12px;
padding: 14px 20px;
background: #FAFBFC;
border-bottom: 1px solid #E5E7EB;
}
.fp-task-group-urgent .fp-task-group-head { background: #FEF2F2; border-bottom-color: #FCA5A5; }
.fp-task-group-warn .fp-task-group-head { background: #FFFBEB; border-bottom-color: #FCD34D; }
.fp-task-group-pill {
font-family: 'Manrope', monospace;
font-size: 11.5px; font-weight: 900; letter-spacing: 0.12em;
padding: 4px 12px; border-radius: 999px;
background: #F3F4F6; color: #374151;
}
.fp-task-group-pill-urgent { background: #DC2626; color: #fff; }
.fp-task-group-pill-warn { background: #F59E0B; color: #fff; }
.fp-task-group-pill-neutral { background: #6B7280; color: #fff; }
.fp-task-group-count {
font-size: 13px; font-weight: 800; color: #0F1729;
}
.fp-task-group-desc {
font-size: 12.5px; color: #6B7280; font-weight: 500;
margin-left: auto;
}
.fp-task-group-items {
display: grid; gap: 1px;
background: #F3F4F6;
}
.fp-task-row {
display: grid; grid-template-columns: auto 1fr auto;
gap: 14px; align-items: center;
padding: 14px 20px;
background: #fff;
border: none;
cursor: pointer;
text-align: left;
font-family: inherit;
transition: background 0.12s;
}
.fp-task-row:hover { background: #F9FAFB; }
.fp-task-row-urgent:hover { background: #FEF2F2; }
.fp-task-row-warn:hover { background: #FFFBEB; }
.fp-task-icon {
width: 40px; height: 40px; border-radius: 10px;
background: #F1F5F9;
display: inline-flex; align-items: center; justify-content: center;
font-size: 20px;
flex-shrink: 0;
}
.fp-task-icon-urgent { background: #FEE2E2; }
.fp-task-icon-warn { background: #FEF3C7; }
.fp-task-body { min-width: 0; }
.fp-task-body-title {
font-size: 14.5px; font-weight: 800; color: #0F1729;
letter-spacing: -0.01em;
line-height: 1.4;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.fp-task-body-who { color: #00844A; font-weight: 900; }
.fp-task-body-sub {
font-size: 12.5px; color: #6B7280; font-weight: 500;
margin-top: 3px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.fp-task-time {
font-size: 11.5px; font-weight: 800;
padding: 4px 10px; border-radius: 6px;
background: #F3F4F6; color: #6B7280;
letter-spacing: 0.04em;
flex-shrink: 0;
}
.fp-task-row-urgent .fp-task-time { background: #FEE2E2; color: #991B1B; }
.fp-task-row-warn .fp-task-time { background: #FEF3C7; color: #92400E; }
@media (max-width: 720px) {
.fp-task-group-head { flex-wrap: wrap; }
.fp-task-group-desc { width: 100%; margin-left: 0; margin-top: 4px; }
.fp-task-row { padding: 12px 14px; gap: 10px; }
.fp-task-icon { width: 36px; height: 36px; font-size: 18px; }
.fp-task-body-title { white-space: normal; }
.fp-task-body-sub { white-space: normal; }
}
/* ============================================
* 2026-07-31 (owner NG「6 chip 見づらい」 対応)
* 客モーダル cd-flow を 3 group 階層 に redesign
* ① 面談 = zoom 3 方式 (primary)
* ② LINE 送る = AI + 自分で書く
* ③ 顧客 情報 = tag + 情報編集 (secondary、 横 2 列)
* BtoB admin (Register A) · 40-60代 FP先生 target
* ============================================ */
.fp-flow-groups {
display: grid;
gap: 14px;
margin-top: 14px;
}
.fp-flow-group {
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 12px;
overflow: hidden;
}
.fp-flow-group-primary {
border-color: #00844A;
box-shadow: 0 4px 14px rgba(0,132,74,0.10);
}
.fp-flow-group-secondary {
background: #FAFBFC;
}
.fp-flow-group-head {
display: grid;
grid-template-columns: auto 1fr;
gap: 14px;
align-items: center;
padding: 14px 18px;
background: #F9FAFB;
border-bottom: 1px solid #E5E7EB;
}
.fp-flow-group-primary .fp-flow-group-head {
background: linear-gradient(90deg, #ECFDF5 0%, #F9FAFB 70%);
border-bottom-color: #86EFAC;
}
.fp-flow-group-secondary .fp-flow-group-head {
background: #F1F3F7;
}
.fp-flow-group-num {
width: 28px; height: 28px;
background: #0F1729;
color: #fff;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: 'Manrope', monospace;
font-size: 13px;
font-weight: 900;
}
.fp-flow-group-primary .fp-flow-group-num { background: #00844A; box-shadow: 0 2px 6px rgba(0,132,74,0.30); }
.fp-flow-group-title {
font-size: 16px;
font-weight: 900;
color: #0F1729;
letter-spacing: -0.01em;
line-height: 1.3;
}
.fp-flow-group-hint {
font-size: 12px;
color: #6B7280;
font-weight: 500;
line-height: 1.5;
margin-top: 2px;
}
.fp-flow-group-body {
display: grid;
gap: 1px;
background: #E5E7EB;
}
.fp-flow-opt {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 14px;
align-items: center;
padding: 14px 18px;
background: #fff;
border: none;
cursor: pointer;
text-align: left;
font-family: inherit;
transition: background 0.12s;
width: 100%;
box-sizing: border-box;
}
.fp-flow-opt:hover { background: #F9FAFB; }
.fp-flow-group-primary .fp-flow-opt:hover { background: #ECFDF5; }
.fp-flow-opt-featured {
background: linear-gradient(90deg, #FEF3C7 0%, #FDE68A 100%);
}
.fp-flow-opt-featured:hover {
background: linear-gradient(90deg, #FDE68A 0%, #FCD34D 100%);
}
.fp-flow-opt-icon {
width: 38px; height: 38px;
background: #F1F5F9;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 19px;
flex-shrink: 0;
}
.fp-flow-group-primary .fp-flow-opt-icon { background: #DCFCE7; }
.fp-flow-opt-featured .fp-flow-opt-icon { background: #F59E0B; color: #fff; }
.fp-flow-opt-text {
min-width: 0;
display: block;
}
.fp-flow-opt-label {
display: block;
font-size: 15.5px;
font-weight: 800;
color: #0F1729;
letter-spacing: -0.005em;
line-height: 1.35;
}
.fp-flow-opt-sub {
display: block;
font-size: 12.5px;
color: #6B7280;
font-weight: 500;
margin-top: 3px;
line-height: 1.45;
}
.fp-flow-opt-arrow {
font-size: 24px;
color: #9CA3AF;
font-weight: 300;
transition: transform 0.15s, color 0.15s;
line-height: 1;
}
.fp-flow-opt:hover .fp-flow-opt-arrow { transform: translateX(3px); color: #00844A; }
.fp-flow-opt-featured:hover .fp-flow-opt-arrow { color: #92400E; }
/* Group 3 (顧客情報) — 横 2 列 の slim button */
.fp-flow-group-body-h {
grid-template-columns: 1fr 1fr;
background: transparent;
gap: 8px;
padding: 10px;
}
.fp-flow-group-body-h .fp-flow-opt {
grid-template-columns: auto 1fr;
padding: 12px 14px;
border-radius: 8px;
border: 1px solid #E5E7EB;
background: #fff;
}
.fp-flow-group-body-h .fp-flow-opt:hover { border-color: #00844A; }
.fp-flow-opt-slim .fp-flow-opt-icon { width: 32px; height: 32px; font-size: 16px; }
.fp-flow-opt-slim .fp-flow-opt-sub,
.fp-flow-opt-slim .fp-flow-opt-arrow { display: none; }
.fp-flow-opt-slim .fp-flow-opt-label { font-size: 14px; }
@media (max-width: 720px) {
.fp-flow-group-head { padding: 12px 14px; gap: 10px; }
.fp-flow-opt { padding: 12px 14px; gap: 10px; }
.fp-flow-opt-icon { width: 34px; height: 34px; font-size: 17px; }
.fp-flow-opt-label { font-size: 14.5px; }
.fp-flow-opt-sub { font-size: 12px; }
.fp-flow-group-body-h { grid-template-columns: 1fr; }
}
/* 旧 .fp-qa-* / .cd-flow-step 系 の 装飾 グラデ /「＼ ／」tip は
3-group redesign 内 で 使わない ので owner NG「装飾 うるさい」 の 再発 防止。
もし 別画面 で 出て たら 個別 修正 */
/* ============================================================
* 2026-07-31 v20260731O · owner 明示 「大枠 button 押すと さらに 選べる drill UI」
* 客モーダル cd-flow の flow 部分 を / の accordion に redesign
* - 大 枠 button 2 個 (Zoom / LINE) のみ initial 表示
* - click で 展開 で 選択 肢
* - 装飾 (番号 badge / hint 文言 / icon 枠) 全部 撤去、 label + icon + caret のみ
* - 直前 v20260731N の fp-flow-group* は 使わ ない (旧 CSS は 上に 残るが 参照 されない)
* ============================================================ */
.fp-flow-drill {
display: grid;
gap: 10px;
margin-top: 14px;
}
.fp-drill {
border: 1px solid #E5E7EB;
border-radius: 12px;
background: #fff;
overflow: hidden;
transition: border-color .15s, box-shadow .15s;
}
.fp-drill[open] {
border-color: #00844A;
box-shadow: 0 4px 12px rgba(0,132,74,0.08);
}
.fp-drill-head {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 16px;
align-items: center;
padding: 20px 22px;
cursor: pointer;
list-style: none;
user-select: none;
transition: background .12s;
}
.fp-drill-head::-webkit-details-marker { display: none; }
.fp-drill-head:hover { background: #FAFBFC; }
.fp-drill[open] .fp-drill-head { background: #F9FAFB; border-bottom: 1px solid #E5E7EB; }
.fp-drill-icon {
width: 44px; height: 44px;
background: #F1F5F9;
color: #0F1729;
border-radius: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 22px;
flex-shrink: 0;
transition: background .15s;
}
.fp-drill[open] .fp-drill-icon {
background: #DCFCE7;
}
.fp-drill-label {
font-size: 18px;
font-weight: 900;
color: #0F1729;
letter-spacing: -0.01em;
line-height: 1.3;
}
.fp-drill-caret {
font-size: 20px;
color: #9CA3AF;
transition: transform 0.2s, color 0.15s;
line-height: 1;
}
.fp-drill[open] .fp-drill-caret {
transform: rotate(180deg);
color: #00844A;
}
.fp-drill-body {
background: #FAFBFC;
}
.fp-drill-opt {
display: grid;
grid-template-columns: 44px 1fr;
gap: 16px;
align-items: center;
padding: 14px 22px;
background: transparent;
border: none;
border-top: 1px solid #E5E7EB;
cursor: pointer;
text-align: left;
font-family: inherit;
width: 100%;
box-sizing: border-box;
transition: background 0.12s;
}
.fp-drill-opt:first-child { border-top: none; }
.fp-drill-opt:hover { background: #ECFDF5; }
.fp-drill-opt-featured {
background: #FFFBEB;
}
.fp-drill-opt-featured:hover { background: #FEF3C7; }
.fp-drill-opt-icon {
text-align: center;
font-size: 20px;
color: #0F1729;
}
.fp-drill-opt-featured .fp-drill-opt-icon { color: #B45309; }
.fp-drill-opt-label {
font-size: 15px;
font-weight: 800;
color: #0F1729;
letter-spacing: -0.005em;
line-height: 1.45;
}
.fp-drill-opt-tail {
font-weight: 500;
color: #6B7280;
font-size: 13.5px;
margin-left: 4px;
}
/* 小さい tools row (顧客情報 系) */
.fp-flow-tools {
display: flex;
gap: 8px;
margin-top: 6px;
flex-wrap: wrap;
}
.fp-tool {
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 8px;
padding: 10px 16px;
font-size: 13.5px;
font-weight: 700;
color: #374151;
cursor: pointer;
font-family: inherit;
transition: border-color .12s, color .12s;
display: inline-flex;
align-items: center;
gap: 6px;
}
.fp-tool:hover {
border-color: #00844A;
color: #00844A;
}
/* accordion 展開 は prefers-reduced-motion 対応 */
@media (prefers-reduced-motion: reduce) {
.fp-drill-caret,
.fp-drill-icon { transition: none !important; }
}
/* mobile */
@media (max-width: 720px) {
.fp-drill-head { padding: 16px 16px; gap: 12px; }
.fp-drill-icon { width: 40px; height: 40px; font-size: 20px; }
.fp-drill-label { font-size: 16.5px; }
.fp-drill-opt { padding: 12px 16px; grid-template-columns: 36px 1fr; gap: 12px; }
.fp-drill-opt-tail { display: block; margin-left: 0; margin-top: 2px; font-size: 12.5px; }
}
/* ============================================================
* 2026-07-31 v20260731P · owner picks Drill D
* 2 big cards (Zoom / LINE) → click で bottom sheet slide-up
* 直前 v20260731O accordion (fp-drill*) 差替、 fp-flow-tools は 継続 使用
* ============================================================ */
.fp-flow-picker {
position: relative;
margin-top: 14px;
}
.fp-flow-cards {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.fp-pcard {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 14px;
align-items: center;
padding: 22px 22px;
min-height: 108px;
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 14px;
cursor: pointer;
text-align: left;
font-family: inherit;
transition: border-color 0.12s, transform 0.12s, box-shadow 0.15s;
width: 100%;
box-sizing: border-box;
}
.fp-pcard:hover {
border-color: #00844A;
box-shadow: 0 6px 16px rgba(0,132,74,0.10);
transform: translateY(-1px);
}
.fp-pcard-recommended {
border-color: #00844A;
background: linear-gradient(135deg, #ECFDF5 0%, #fff 60%);
box-shadow: 0 4px 14px rgba(0,132,74,0.08);
}
.fp-pcard-icon {
width: 52px;
height: 52px;
background: #F1F5F9;
color: #0F1729;
border-radius: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 26px;
flex-shrink: 0;
}
.fp-pcard-recommended .fp-pcard-icon {
background: #DCFCE7;
}
.fp-pcard-body { min-width: 0; }
.fp-pcard-title {
font-size: 17px;
font-weight: 900;
color: #0F1729;
letter-spacing: -0.01em;
line-height: 1.35;
}
.fp-pcard-sub {
font-size: 12.5px;
color: #6B7280;
font-weight: 500;
margin-top: 3px;
line-height: 1.5;
}
.fp-pcard-arrow {
font-size: 28px;
color: #9CA3AF;
font-weight: 300;
line-height: 1;
}
.fp-pcard:hover .fp-pcard-arrow { color: #00844A; }
/* ---- Bottom sheet (modal-style) ---- */
.fp-sheet-backdrop {
position: fixed;
inset: 0;
background: rgba(15, 23, 41, 0.42);
z-index: 10500;
animation: fp-sheet-fade 0.2s ease-out;
}
.fp-sheet-backdrop[hidden] { display: none; }
@keyframes fp-sheet-fade {
from { opacity: 0; }
to { opacity: 1; }
}
/* 2026-07-31 v20260731T owner NG「バランス おかしい / 文字-button 色被り」対応:
* - sheet 幅 640→480 で 中身 と バランス 取る
* - option に 右 矢印 chevron 追加、 divider で 区切り 明確
* - featured (AI 下書き) に 濃い 左 border + gold badge で 「おすすめ」 主張
* - close ✕ 黒 に、 background 濃い 灰 で contrast 確保 */
.fp-sheet {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: #fff;
border-radius: 16px;
box-shadow: 0 24px 60px rgba(15, 23, 41, 0.28);
z-index: 10501;
width: min(480px, 92vw);
animation: fp-sheet-pop 0.22s cubic-bezier(0.16, 1, 0.3, 1);
overflow: hidden;
max-height: 82vh;
display: flex;
flex-direction: column;
}
.fp-sheet[hidden] { display: none; }
@keyframes fp-sheet-pop {
from { transform: translate(-50%, -48%) scale(0.96); opacity: 0; }
to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
/* 2026-08-01: mobile では bottom sheet に 復帰 (owner の 「意味わかんない場所」 fix — desktop は centered dialog) */
@media (max-width: 767px) {
.fp-sheet {
top: auto;
bottom: 0;
left: 0;
right: 0;
transform: none;
width: 100%;
max-width: 480px;
margin: 0 auto;
border-radius: 20px 20px 0 0;
animation: fp-sheet-up 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes fp-sheet-up {
from { transform: translateY(100%); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
}
.fp-sheet-head {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 14px;
align-items: center;
padding: 18px 20px 16px;
border-bottom: 1px solid #E5E7EB;
flex-shrink: 0;
background: #FAFBFC;
}
.fp-sheet-icon {
width: 40px;
height: 40px;
background: #DCFCE7;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
.fp-sheet-title {
font-size: 17px;
font-weight: 900;
color: #0F1729;
letter-spacing: -0.01em;
line-height: 1.3;
}
.fp-sheet-sub {
font-size: 12px;
color: #6B7280;
font-weight: 500;
margin-top: 2px;
}
.fp-sheet-close {
width: 32px;
height: 32px;
background: #FFFFFF;
border: 1px solid #CBD5E1;
border-radius: 8px;
cursor: pointer;
font-size: 15px;
color: #0F1729;
font-family: inherit;
font-weight: 700;
transition: background 0.12s, border-color 0.12s;
line-height: 1;
}
.fp-sheet-close:hover { background: #FEF2F2; border-color: #DC2626; color: #DC2626; }
.fp-sheet-body {
padding: 0;
display: grid;
gap: 1px;
background: #E5E7EB;
overflow-y: auto;
}
.fp-sheet-opt {
display: grid;
grid-template-columns: 40px 1fr auto;
gap: 14px;
align-items: center;
padding: 18px 20px;
background: #fff;
border: none;
border-radius: 0;
cursor: pointer;
text-align: left;
font-family: inherit;
transition: background 0.12s;
width: 100%;
box-sizing: border-box;
position: relative;
}
.fp-sheet-opt::after {
content: '›';
color: #9CA3AF;
font-size: 24px;
font-weight: 300;
line-height: 1;
transition: transform 0.15s, color 0.15s;
}
.fp-sheet-opt:hover { background: #F9FAFB; }
.fp-sheet-opt:hover::after { color: #00844A; transform: translateX(3px); }
.fp-sheet-opt-featured {
background: linear-gradient(90deg, #FEF3C7 0%, #FFFBEB 60%);
border-left: 4px solid #F59E0B;
padding-left: 16px;
}
.fp-sheet-opt-featured::after { color: #B45309; }
.fp-sheet-opt-featured:hover { background: linear-gradient(90deg, #FDE68A 0%, #FEF3C7 60%); }
.fp-sheet-opt-icon {
text-align: center;
font-size: 22px;
color: #0F1729;
line-height: 1;
}
.fp-sheet-opt-featured .fp-sheet-opt-icon { color: #B45309; }
.fp-sheet-opt-label {
font-size: 15px;
font-weight: 900;
color: #0F1729;
letter-spacing: -0.005em;
line-height: 1.35;
display: flex;
align-items: center;
gap: 6px;
}
.fp-sheet-opt-featured .fp-sheet-opt-label::after {
content: 'おすすめ';
font-size: 10px;
font-weight: 900;
background: #F59E0B;
color: #fff;
padding: 2px 7px;
border-radius: 4px;
letter-spacing: 0.06em;
}
.fp-sheet-opt-sub {
font-size: 12.5px;
color: #6B7280;
font-weight: 500;
margin-top: 3px;
line-height: 1.5;
}
.fp-sheet-opt-featured .fp-sheet-opt-sub { color: #78350F; font-weight: 600; }
/* Mobile: 1 column cards, full-width sheet */
@media (max-width: 720px) {
.fp-flow-cards { grid-template-columns: 1fr; }
.fp-sheet { max-width: 100%; }
.fp-pcard { padding: 18px 18px; min-height: auto; }
.fp-pcard-icon { width: 44px; height: 44px; font-size: 22px; }
.fp-pcard-title { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
.fp-sheet, .fp-sheet-backdrop { animation: none; }
.fp-pcard:hover { transform: none; }
}