/* ============================================================
アポジェネPRO デザインシステム v5 — ApoGene 統一スタイル
Noto Sans JP 一本 / gene-navy + apo-red / font-weight 900
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap');
:root {
/* ===== Font stack (ApoGene と完全一致: Noto Sans JP 一本) ===== */
--pro-font-display: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
--pro-font-body: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
--pro-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
/* ===== Brand (v5 — ApoGene と完全互換) ===== */
/* === Primary = gene-navy (#1A365D) === */
--pro-primary: #1A365D; /* gene-navy */
--pro-primary-light: #2c4878;
--pro-primary-dark: #122845;
--pro-primary-deep: #0c1c30; /* deeper navy */
/* === Blue secondary (gene-blue #2980B9) === */
--pro-blue: #2980B9;
--pro-blue-light: #4fa3d8;
--pro-blue-soft: #ebf4fa; /* very soft blue tint */
--pro-blue-dark: #1f6694;
/* === Red (apo-red #D72621) — primary CTA === */
--pro-red: #D72621;
--pro-red-light: #ea3e39;
--pro-red-dark: #a91d18;
--pro-red-soft: #fde6e5;
/* === Orange (apo-orange #F36923) — accent === */
--pro-orange: #F36923;
--pro-orange-light: #f88846;
--pro-orange-dark: #c4521c;
--pro-orange-soft: #feeadb;
/* === Gold (gold-rec #FFD166) — soft accent === */
--pro-accent: #FFD166; /* soft gold (gold-rec) */
--pro-accent-light: #ffe09a;
--pro-accent-soft: #fff8e6;
--pro-accent-cream: #fffdf5;
--pro-accent-dark: #b8861e; /* darker gold for WCAG */
--pro-accent-deep: #7a5915;
/* === Legacy crimson keeps existing references working === */
--pro-crimson: var(--pro-red);
--pro-crimson-light: var(--pro-red-light);
--pro-crimson-dark: var(--pro-red-dark);
--pro-crimson-soft: var(--pro-red-soft);
/* ===== Neutrals (ApoGene base) ===== */
--pro-bg: #f8fafc; /* ApoGene body bg */
--pro-bg-soft: #fafbfd;
--pro-bg-card: #ffffff;
--pro-bg-dark: #0f1729;
--pro-text: #333333; /* ApoGene body color */
--pro-text-mute: #6b7280;
--pro-text-soft: #9ca3af;
--pro-border: #e5e7eb;
--pro-border-strong: #d1d5db;
/* ===== Status ===== */
--pro-success: #10b981;
--pro-success-bg: #d1fae5;
--pro-success-fg: #065f46;
--pro-danger: #ef4444;
--pro-danger-bg: #fee2e2;
--pro-danger-fg: #991b1b;
--pro-warning: #f59e0b;
--pro-warning-bg: #fef3c7;
--pro-warning-fg: #92400e;
--pro-info: #3b82f6;
--pro-info-bg: #dbeafe;
--pro-info-fg: #1e40af;
/* ===== Radius ===== */
--pro-radius-sm: 6px;
--pro-radius: 10px;
--pro-radius-lg: 16px;
--pro-radius-xl: 24px;
/* ===== Shadow tints (blue-tinted, light theme) ===== */
--pro-shadow-tint: rgba(30, 58, 138, 0.06);
--pro-shadow-tint-strong: rgba(30, 58, 138, 0.12);
--pro-shadow-tint-gold: rgba(199, 154, 60, 0.20);
--pro-shadow-tint-crimson:rgba(185, 28, 77, 0.16);
/* ===== Shadow scale (2-layer for High-end depth) ===== */
--pro-shadow-sm:
0 1px 2px var(--pro-shadow-tint),
0 0 0 1px var(--pro-shadow-tint);
--pro-shadow:
0 1px 2px var(--pro-shadow-tint),
0 8px 16px -4px var(--pro-shadow-tint-strong);
--pro-shadow-lg:
0 1px 2px var(--pro-shadow-tint),
0 20px 40px -8px var(--pro-shadow-tint-strong);
--pro-shadow-xl:
0 2px 4px var(--pro-shadow-tint),
0 40px 80px -16px rgba(14, 19, 32, 0.24);
--pro-shadow-gold:
0 8px 24px -4px var(--pro-shadow-tint-gold),
inset 0 1px 0 rgba(255, 255, 255, 0.20);
--pro-shadow-hero:
0 4px 8px rgba(0, 0, 0, 0.04),
0 60px 120px -24px rgba(30, 58, 138, 0.22);
/* ===== Transitions ===== */
--pro-tr: cubic-bezier(0.4, 0, 0.2, 1);
--pro-tr-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
/* ===== Spacing scale (extended for High-end whitespace) ===== */
--pro-space-1: 4px;
--pro-space-2: 8px;
--pro-space-3: 12px;
--pro-space-4: 16px;
--pro-space-6: 24px;
--pro-space-8: 32px;
--pro-space-12: 48px;
--pro-space-16: 64px;
--pro-space-20: 80px;
--pro-space-24: 96px;
--pro-space-32: 128px;
/* ===== Typography scale (fluid, 8 levels) ===== */
--pro-text-display: clamp(40px, 7vw, 72px);
--pro-text-h1: clamp(32px, 5vw, 52px);
--pro-text-h2: clamp(28px, 3.5vw, 40px);
--pro-text-h3: clamp(20px, 2vw, 24px);
--pro-text-h4: 18px;
--pro-text-body: 15px;
--pro-text-body-lg: 16px;
--pro-text-small: 13px;
--pro-text-eyebrow: 12px;
}
@media (min-width: 768px) {
:root {
--pro-text-body: 16px;
}
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body {
margin: 0; padding: 0;
background: var(--pro-bg);
color: var(--pro-text);
font-family: var(--pro-font-body);
font-size: var(--pro-text-body);
line-height: 1.65;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: "palt";
}
h1, h2 {
font-weight: 900; /* ApoGene: font-black */
letter-spacing: -0.01em;
color: var(--pro-primary);
line-height: 1.25;
text-wrap: balance;
font-family: var(--pro-font-display);
}
h3 {
font-weight: 700; /* font-bold */
letter-spacing: -0.005em;
color: var(--pro-primary);
line-height: 1.35;
text-wrap: balance;
}
h4 {
font-weight: 700;
color: var(--pro-primary);
line-height: 1.4;
}
p, .lead, .lp-sub, .lp-feature p, .lp-step p, .lp-testimonial p, .lp-faq__a {
text-wrap: pretty; /* 本文の最終行短行回避 */
}
/* ===== Focus-visible (WCAG keyboard a11y) ===== */
.pro-btn:focus-visible,
a:focus-visible,
.pro-input:focus-visible,
.pro-textarea:focus-visible,
.pro-select:focus-visible,
.lp-faq__q:focus-visible,
summary:focus-visible {
outline: 2px solid var(--pro-accent);
outline-offset: 3px;
border-radius: var(--pro-radius-sm);
}
a {
color: var(--pro-primary);
text-decoration: none;
transition: color 0.15s var(--pro-tr);
}
a:hover { color: var(--pro-primary-light); text-decoration: underline; }
code {
font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
background: var(--pro-bg);
padding: 2px 6px;
border-radius: 4px;
font-size: 0.9em;
}
/* ============================================================
Layout / Container
============================================================ */
.pro-container {
max-width: 1180px;
margin: 0 auto;
padding: var(--pro-space-8) var(--pro-space-6) var(--pro-space-16);
}
.pro-narrow { max-width: 680px; }
.pro-wide { max-width: 1280px; }
/* ============================================================
Header / Navigation
============================================================ */
.pro-header {
background: rgba(255, 255, 255, 0.94);
backdrop-filter: saturate(180%) blur(12px);
-webkit-backdrop-filter: saturate(180%) blur(12px);
color: var(--pro-text);
padding: 10px 28px;
display: flex; align-items: center; justify-content: space-between;
border-bottom: 1px solid var(--pro-border);
position: sticky; top: 0; z-index: 100;
}
.pro-header__brand {
display: flex; align-items: center; gap: 14px;
font-weight: 700; font-size: 16px; letter-spacing: -0.01em;
}
.pro-header__brand-link {
display: inline-flex;
align-items: center;
}
.pro-header__tagline {
display: inline-block;
padding-left: 14px;
border-left: 1px solid var(--pro-border);
font-family: var(--pro-font-body);
font-size: 12px;
font-weight: 700;
color: var(--pro-primary);
line-height: 1.35;
letter-spacing: 0.02em;
white-space: nowrap;
}
@media (max-width: 900px) {
.pro-header__tagline {
font-size: 11px;
padding-left: 10px;
}
}
@media (max-width: 640px) {
.pro-header__tagline {
display: none; /* モバイルではタグラインを隠してロゴと CTA だけに */
}
}
.pro-header__brand img,
.pro-header__logo {
height: 56px; /* 新ロゴが派手で内容多めなので大きめに */
width: auto;
display: block;
object-fit: contain;
}
.pro-header__brand a {
color: var(--pro-primary);
display: flex; align-items: center; gap: 10px;
text-decoration: none;
}
.pro-header__nav {
display: flex; gap: 6px; align-items: center;
font-size: 14px;
}
.pro-header__nav a {
color: var(--pro-text-mute);
padding: 8px 14px;
border-radius: var(--pro-radius-sm);
text-decoration: none;
transition: all 0.15s var(--pro-tr);
}
.pro-header__nav a:hover {
color: var(--pro-primary);
background: var(--pro-bg);
text-decoration: none;
}
/* ============================================================
Card
============================================================ */
.pro-card {
background: var(--pro-bg-card);
border: 1px solid var(--pro-border);
border-radius: var(--pro-radius);
padding: var(--pro-space-6);
box-shadow: var(--pro-shadow-sm);
margin-bottom: var(--pro-space-4);
transition: box-shadow 0.2s var(--pro-tr);
}
.pro-card:hover { box-shadow: var(--pro-shadow); }
.pro-card h2 { margin-top: 0; margin-bottom: var(--pro-space-3); font-size: 20px; }
.pro-card h3 { margin-top: 0; margin-bottom: var(--pro-space-2); font-size: 16px; }
.pro-card--feature {
padding: var(--pro-space-8);
border-radius: var(--pro-radius-lg);
}
.pro-card--gradient {
background: linear-gradient(135deg, #fff 0%, #f9faff 100%);
border-color: transparent;
box-shadow: var(--pro-shadow);
}
/* ============================================================
Stepper (3ステップウィザード用)
============================================================ */
.pro-stepper {
display: flex; align-items: center; gap: 6px;
margin: 0 0 var(--pro-space-8);
padding: var(--pro-space-2) 0;
}
.pro-stepper__item {
display: flex; align-items: center; gap: 10px;
padding: 10px 18px;
border-radius: 999px;
background: #fff;
border: 1px solid var(--pro-border);
font-size: 13px;
color: var(--pro-text-mute);
font-weight: 500;
transition: all 0.2s var(--pro-tr);
}
.pro-stepper__item.is-active {
background: var(--pro-primary);
color: #fff;
border-color: var(--pro-primary);
font-weight: 600;
box-shadow: var(--pro-shadow);
}
.pro-stepper__item.is-done {
background: var(--pro-success-bg);
color: var(--pro-success-fg);
border-color: var(--pro-success);
}
.pro-stepper__num {
display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px; border-radius: 50%;
background: rgba(255, 255, 255, 0.25);
font-weight: 700; font-size: 12px;
}
.pro-stepper__item:not(.is-active) .pro-stepper__num {
background: var(--pro-bg);
}
.pro-stepper__arrow { color: var(--pro-text-soft); font-weight: 400; }
/* ============================================================
Form
============================================================ */
.pro-form-row { margin-bottom: var(--pro-space-4); }
.pro-label {
display: block;
font-size: 13px;
color: var(--pro-text);
margin-bottom: 6px;
font-weight: 600;
}
.pro-label__req::after { content: " *"; color: var(--pro-danger); }
.pro-input, .pro-textarea, .pro-select {
width: 100%;
padding: 11px 14px;
border: 1px solid var(--pro-border);
border-radius: var(--pro-radius-sm);
font-size: 14px;
font-family: inherit;
background: #fff;
color: var(--pro-text);
transition: border-color 0.15s var(--pro-tr), box-shadow 0.15s var(--pro-tr);
}
.pro-input:hover, .pro-textarea:hover, .pro-select:hover {
border-color: var(--pro-border-strong);
}
.pro-input:focus, .pro-textarea:focus, .pro-select:focus {
outline: none;
border-color: var(--pro-primary);
box-shadow: 0 0 0 4px rgba(26, 50, 99, 0.10);
}
.pro-textarea { min-height: 180px; resize: vertical; line-height: 1.6; }
/* textarea は枠内で「上下のみ」リサイズ可（.pro-input の textarea が既定 resize:both で横にドラッグして枠を飛び越えるのを防ぐ） */
textarea.pro-input { resize: vertical; max-width: 100%; }
.pro-help {
font-size: 12px;
color: var(--pro-text-mute);
margin-top: 5px;
line-height: 1.5;
}
.pro-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pro-space-3); }
.pro-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--pro-space-3); }
.pro-row-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: var(--pro-space-3); }
/* チップ（選択タグ） */
.pro-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pro-chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 7px 14px;
border-radius: 999px;
border: 1px solid var(--pro-border);
font-size: 13px; cursor: pointer; user-select: none;
background: #fff;
color: var(--pro-text);
font-weight: 500;
transition: all 0.15s var(--pro-tr);
}
.pro-chip:hover { border-color: var(--pro-primary-light); }
.pro-chip input { display: none; }
.pro-chip.is-on {
background: var(--pro-primary);
color: #fff;
border-color: var(--pro-primary);
}
/* タブ */
.pro-tabs {
display: flex; gap: 4px; border-bottom: 1px solid var(--pro-border);
margin-bottom: var(--pro-space-6);
flex-wrap: wrap;
}
.pro-tab {
padding: 12px 20px;
border: none;
background: transparent;
color: var(--pro-text-mute);
font-size: 14px;
font-weight: 500;
cursor: pointer;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
transition: all 0.15s var(--pro-tr);
font-family: inherit;
}
.pro-tab:hover { color: var(--pro-primary); }
.pro-tab.is-active {
color: var(--pro-primary);
border-bottom-color: var(--pro-primary);
font-weight: 600;
}
/* ============================================================
Buttons
============================================================ */
.pro-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
padding: 10px 20px;
border-radius: var(--pro-radius-sm);
border: 1px solid transparent;
font-size: 14px; font-weight: 600; cursor: pointer;
font-family: inherit;
transition: all 0.15s var(--pro-tr);
white-space: nowrap;
}
.pro-btn:active { transform: translateY(1px); }
.pro-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.pro-btn--primary {
background: var(--pro-primary); color: #fff;
box-shadow: var(--pro-shadow-sm);
}
.pro-btn--primary:hover:not(:disabled) {
background: var(--pro-primary-light);
box-shadow: var(--pro-shadow);
}
.pro-btn--ghost {
background: #fff;
color: var(--pro-primary);
border-color: var(--pro-border);
}
.pro-btn--ghost:hover:not(:disabled) {
background: var(--pro-bg);
border-color: var(--pro-border-strong);
}
/* ApoGene btn-buy 互換: red gradient + soft lift */
.pro-btn--accent {
background: linear-gradient(135deg, var(--pro-orange) 0%, var(--pro-red) 100%);
color: #fff;
box-shadow: 0 4px 15px rgba(215, 38, 33, 0.30);
transition: all 0.3s ease;
}
.pro-btn--accent:hover:not(:disabled) {
box-shadow: 0 8px 25px rgba(215, 38, 33, 0.50);
transform: translateY(-3px);
}
.pro-btn--danger {
background: var(--pro-danger); color: #fff;
}
.pro-btn--danger:hover:not(:disabled) { background: #dc2626; }
.pro-btn--lg { padding: 14px 28px; font-size: 15px; }
.pro-btn--sm { padding: 6px 12px; font-size: 12px; }
/* === 資料DL 用 outline button (Sales Marker 風: 二択 CTA で並列展開) === */
.pro-btn--doc {
background: #ffffff;
color: var(--pro-primary);
border: 2px solid var(--pro-primary);
font-weight: 700;
}
.pro-btn--doc:hover:not(:disabled) {
background: var(--pro-primary);
color: #ffffff;
transform: translateY(-2px);
box-shadow: 0 6px 18px -4px var(--pro-shadow-tint-strong);
}
/* dark BG 用バリエ */
.lp-hero .pro-btn--doc {
background: rgba(255, 255, 255, 0.95);
border-color: var(--pro-primary);
}
.lp-cta .pro-btn--doc {
background: rgba(255, 255, 255, 0.10);
color: #ffffff;
border-color: rgba(255, 255, 255, 0.50);
backdrop-filter: blur(6px);
}
.lp-cta .pro-btn--doc:hover:not(:disabled) {
background: #ffffff;
color: var(--pro-primary);
border-color: #ffffff;
}
.pro-btn-row {
display: flex; gap: 10px;
margin-top: var(--pro-space-6);
justify-content: space-between;
flex-wrap: wrap;
}
/* ============================================================
Table
============================================================ */
.pro-table {
width: 100%; border-collapse: collapse;
background: #fff;
border-radius: var(--pro-radius);
overflow: hidden;
box-shadow: var(--pro-shadow-sm);
}
.pro-table th, .pro-table td {
padding: 12px 16px;
text-align: left;
font-size: 14px;
border-bottom: 1px solid var(--pro-border);
}
.pro-table th {
background: var(--pro-bg);
color: var(--pro-text-mute);
font-weight: 600;
font-size: 12px;
letter-spacing: 0.03em;
text-transform: uppercase;
}
.pro-table tr:last-child td { border-bottom: none; }
.pro-table tr:hover td { background: var(--pro-bg-soft); }
/* ============================================================
Badges
============================================================ */
.pro-badge {
display: inline-flex; align-items: center; gap: 4px;
padding: 3px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.02em;
text-transform: uppercase;
}
.pro-badge--queued { background: var(--pro-info-bg); color: var(--pro-info-fg); }
.pro-badge--claimed { background: var(--pro-warning-bg); color: var(--pro-warning-fg); }
.pro-badge--sending { background: var(--pro-info-bg); color: var(--pro-info-fg); }
.pro-badge--sent { background: var(--pro-success-bg); color: var(--pro-success-fg); }
.pro-badge--failed { background: var(--pro-danger-bg); color: var(--pro-danger-fg); }
.pro-badge--skipped { background: #f3f4f6; color: #4b5563; }
.pro-badge--running { background: var(--pro-info-bg); color: var(--pro-info-fg); }
.pro-badge--pending { background: #f3f4f6; color: #4b5563; }
.pro-badge--paused { background: var(--pro-warning-bg); color: var(--pro-warning-fg); }
.pro-badge--completed { background: var(--pro-success-bg); color: var(--pro-success-fg); }
.pro-badge--canceled { background: var(--pro-danger-bg); color: var(--pro-danger-fg); }
.pro-badge--ng { background: #fce7f3; color: #9f1239; }
.pro-badge--clicked { background: var(--pro-accent-soft); color: var(--pro-primary); }
/* ============================================================
Progress bar
============================================================ */
.pro-progress {
width: 100%;
height: 10px;
background: var(--pro-border);
border-radius: 999px;
overflow: hidden;
position: relative;
}
.pro-progress__bar {
height: 100%;
width: 100%;
background: linear-gradient(90deg, var(--pro-primary), var(--pro-accent));
transform-origin: left center;
transform: scaleX(0); /* JS で scaleX(0..1) を更新する想定 */
transition: transform 0.25s var(--pro-tr); /* compositor-only, in-range */
}
.pro-progress__label {
font-size: 12px;
color: var(--pro-text-mute);
margin-top: 6px;
}
/* ============================================================
KPI Card (ダッシュボード統計表示)
============================================================ */
.pro-kpi-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: var(--pro-space-3);
margin-bottom: var(--pro-space-6);
}
.pro-kpi {
background: #fff;
border: 1px solid var(--pro-border);
border-radius: var(--pro-radius);
padding: 20px;
box-shadow: var(--pro-shadow-sm);
position: relative;
overflow: hidden;
transition: transform 0.15s var(--pro-tr), box-shadow 0.15s var(--pro-tr);
}
.pro-kpi:hover {
transform: translateY(-2px);
box-shadow: var(--pro-shadow);
}
.pro-kpi__label {
font-size: 11px;
color: var(--pro-text-mute);
letter-spacing: 0.06em;
text-transform: uppercase;
font-weight: 600;
margin-bottom: 8px;
}
.pro-kpi__value {
font-size: 30px;
font-weight: 800;
color: var(--pro-text);
letter-spacing: -0.02em;
font-family: var(--pro-font-display);
font-variant-numeric: tabular-nums;
line-height: 1.2;
}
.pro-kpi__sub {
font-size: 12px;
color: var(--pro-text-mute);
margin-top: 4px;
}
.pro-kpi--success { border-top: 3px solid var(--pro-success); }
.pro-kpi--danger { border-top: 3px solid var(--pro-danger); }
.pro-kpi--info { border-top: 3px solid var(--pro-info); }
.pro-kpi--accent { border-top: 3px solid var(--pro-accent); }
/* ============================================================
Alerts
============================================================ */
.pro-alert {
padding: 14px 18px;
border-radius: var(--pro-radius-sm);
margin-bottom: var(--pro-space-4);
font-size: 14px;
border: 1px solid;
display: flex;
align-items: flex-start;
gap: 10px;
}
.pro-alert__icon { font-size: 18px; flex-shrink: 0; line-height: 1.4; }
.pro-alert--info { background: var(--pro-info-bg); color: var(--pro-info-fg); border-color: #bfdbfe; }
.pro-alert--success { background: var(--pro-success-bg); color: var(--pro-success-fg); border-color: #a7f3d0; }
.pro-alert--warn { background: var(--pro-warning-bg); color: var(--pro-warning-fg); border-color: #fde68a; }
.pro-alert--error { background: var(--pro-danger-bg); color: var(--pro-danger-fg); border-color: #fecaca; }
/* ============================================================
Trial / Billing Banner（shell.js が描画する全ページ共通バナー）
============================================================ */
.pro-trial-banner {
display: flex;
align-items: center;
gap: 16px;
padding: 14px 18px;
border-radius: var(--pro-radius-sm);
margin: 0 0 16px;
border: 1px solid;
background: #fff;
position: relative;
}
.pro-trial-banner__icon {
width: 40px; height: 40px;
display: flex; align-items: center; justify-content: center;
font-size: 20px;
border-radius: 50%;
flex-shrink: 0;
background: rgba(0,0,0,0.04);
}
.pro-trial-banner__body { flex: 1; min-width: 0; }
.pro-trial-banner__title {
font-weight: 700;
font-size: 15px;
margin-bottom: 2px;
color: var(--pro-primary);
}
.pro-trial-banner__msg {
font-size: 13px;
color: var(--pro-text-mute);
}
.pro-trial-banner__cta {
flex-shrink: 0;
white-space: nowrap;
}
.pro-trial-banner--info {
background: linear-gradient(90deg, #f0f5ff 0%, #fff 100%);
border-color: #c7d2fe;
}
.pro-trial-banner--info .pro-trial-banner__icon { background: rgba(99,102,241,0.12); color: #4338ca; }
.pro-trial-banner--warn {
background: linear-gradient(90deg, #fffbeb 0%, #fff 100%);
border-color: #fde68a;
}
.pro-trial-banner--warn .pro-trial-banner__icon { background: rgba(245,158,11,0.18); color: #92400e; }
.pro-trial-banner--warn .pro-trial-banner__title { color: #92400e; }
.pro-trial-banner--error {
background: linear-gradient(90deg, #fef2f2 0%, #fff 100%);
border-color: #fecaca;
}
.pro-trial-banner--error .pro-trial-banner__icon { background: rgba(220,38,38,0.18); color: #991b1b; }
.pro-trial-banner--error .pro-trial-banner__title { color: #991b1b; }
.pro-trial-banner--success {
background: linear-gradient(90deg, #ecfdf5 0%, #fff 100%);
border-color: #a7f3d0;
}
.pro-trial-banner--success .pro-trial-banner__icon { background: rgba(16,185,129,0.18); color: #065f46; }
@media (max-width: 800px) {
.pro-trial-banner { flex-wrap: wrap; }
.pro-trial-banner__cta { width: 100%; margin-top: 6px; }
}
/* ============================================================
Trial Pill（topbar用コンパクト表示）— v8.1
============================================================ */
.pro-trial-pill {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 12px 6px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
cursor: pointer;
transition: all 0.15s var(--pro-tr);
border: 1px solid;
white-space: nowrap;
margin-right: 12px;
font-family: inherit;
}
.pro-trial-pill:hover {
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.pro-trial-pill__icon { font-size: 14px; line-height: 1; }
.pro-trial-pill__sub {
font-size: 10px;
font-weight: 500;
opacity: 0.7;
margin-left: 2px;
}
.pro-trial-pill--info {
background: linear-gradient(135deg, #dbeafe 0%, #fff 100%);
color: #1e40af;
border-color: #c7d2fe;
}
.pro-trial-pill--warn {
background: linear-gradient(135deg, #fef3c7 0%, #fff 100%);
color: #92400e;
border-color: #fde68a;
}
.pro-trial-pill--error {
background: linear-gradient(135deg, #fee2e2 0%, #fff 100%);
color: #991b1b;
border-color: #fecaca;
animation: pro-pill-attention 1.6s ease-in-out infinite;
}
.pro-trial-pill--success {
background: linear-gradient(135deg, #d1fae5 0%, #fff 100%);
color: #065f46;
border-color: #a7f3d0;
}
@keyframes pro-pill-attention {
0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.3); }
50% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
}
/* ============================================================
Empty state
============================================================ */
.pro-empty {
text-align: center;
padding: var(--pro-space-12) var(--pro-space-6);
color: var(--pro-text-mute);
}
.pro-empty__icon {
font-size: 48px;
margin-bottom: var(--pro-space-3);
opacity: 0.4;
}
.pro-empty__title {
font-size: 16px; font-weight: 600;
color: var(--pro-text);
margin-bottom: 8px;
}
/* ============================================================
Modal
============================================================ */
.pro-modal-overlay {
position: fixed; inset: 0;
background: rgba(15, 23, 41, 0.5);
backdrop-filter: blur(4px);
z-index: 200;
display: none;
align-items: center;
justify-content: center;
padding: var(--pro-space-6);
animation: fadeIn 0.15s ease-out;
}
.pro-modal-overlay.is-open { display: flex; }
.pro-modal {
background: #fff;
border-radius: var(--pro-radius-lg);
box-shadow: var(--pro-shadow-xl);
max-width: 600px;
width: 100%;
max-height: 90vh;
overflow: auto;
animation: slideUp 0.2s ease-out;
}
.pro-modal__header {
padding: var(--pro-space-4) var(--pro-space-6);
border-bottom: 1px solid var(--pro-border);
display: flex; align-items: center; justify-content: space-between;
}
.pro-modal__title { margin: 0; font-size: 17px; }
.pro-modal__close {
background: none; border: none;
font-size: 22px;
color: var(--pro-text-mute);
cursor: pointer; padding: 0; line-height: 1;
}
.pro-modal__body { padding: var(--pro-space-6); }
.pro-modal__footer {
padding: var(--pro-space-4) var(--pro-space-6);
border-top: 1px solid var(--pro-border);
display: flex; justify-content: flex-end; gap: 10px;
}
/* ============================================================
LP Section blocks
============================================================ */
.lp-hero {
/* v9.8: フォールバック先に書き、image-set で WebP 対応ブラウザに優先供給 */
background:
linear-gradient(180deg,
rgba(26, 54, 93, 0.92) 0%,
rgba(26, 54, 93, 0.55) 40%,
rgba(26, 54, 93, 0.40) 70%,
rgba(26, 54, 93, 0.78) 100%
),
url("hero-bg.jpg");
background:
linear-gradient(180deg,
rgba(26, 54, 93, 0.92) 0%,
rgba(26, 54, 93, 0.55) 40%,
rgba(26, 54, 93, 0.40) 70%,
rgba(26, 54, 93, 0.78) 100%
),
image-set(
url("hero-bg.webp") type("image/webp"),
url("hero-bg.jpg") type("image/jpeg")
);
background-size: cover;
background-position: center bottom;
background-repeat: no-repeat;
color: #ffffff;
padding: clamp(80px, 12vw, 128px) 24px clamp(64px, 10vw, 96px);
text-align: center;
position: relative;
overflow: hidden;
min-height: 720px;
}
.lp-hero::before {
/* グリッド線を削除(背景画像をクリーンに表示) */
content: none;
}
.lp-hero > * { position: relative; z-index: 1; }
.lp-hero h1 {
color: #ffffff;
font-family: var(--pro-font-display);
font-size: var(--pro-text-display);
margin: 0 0 24px;
line-height: 1.1;
font-weight: 900;
letter-spacing: -0.025em;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
.lp-hero h1 strong { color: var(--pro-accent-light); font-weight: 800; }
.lp-hero p.lead {
font-size: clamp(15px, 1.8vw, 19px);
max-width: 760px;
margin: 0 auto var(--pro-space-8);
color: rgba(255, 255, 255, 0.92);
line-height: 1.7;
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}
.lp-hero .lead strong {
color: #ffffff !important;
background: none !important;
font-weight: 700;
padding: 0;
}
.lp-hero__badges {
display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
margin-top: var(--pro-space-6);
font-size: 13px;
color: #ffffff;
}
.lp-hero__badge {
display: inline-flex; align-items: center; gap: 6px;
padding: 7px 16px;
background: rgba(255, 255, 255, 0.14);
border: 1px solid rgba(255, 255, 255, 0.28);
border-radius: 999px;
color: #ffffff;
font-weight: 600;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.lp-section { padding: var(--pro-space-24) 0 calc(var(--pro-space-20) + 16px); }
@media (max-width: 800px) {
.lp-section { padding: var(--pro-space-16) 0 calc(var(--pro-space-12) + 8px); }
}
.lp-section--bg { background: #fff; }
.lp-section--dark {
background: var(--pro-bg-dark);
color: #fff;
}
.lp-section--dark h2 { color: #fff; }
.lp-eyebrow {
text-align: center;
text-transform: uppercase;
font-size: var(--pro-text-eyebrow);
font-weight: 700;
color: var(--pro-accent-dark); /* WCAG AA 5.4:1 on white */
letter-spacing: 0.18em;
margin: 0 0 16px;
font-family: var(--pro-font-body);
}
.lp-h2 {
font-size: clamp(24px, 3.5vw, 36px);
text-align: center;
margin: 0 0 16px;
line-height: 1.25;
letter-spacing: -0.02em;
}
.lp-sub {
text-align: center;
color: var(--pro-text-mute);
max-width: 680px;
margin: 0 auto var(--pro-space-12);
font-size: 16px;
line-height: 1.7;
}
.lp-section--dark .lp-sub { color: rgba(255, 255, 255, 0.72); }
/* ステップカード（LP用） */
.lp-steps {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: var(--pro-space-6);
max-width: 1040px; margin: 0 auto;
}
.lp-step {
background: #fff;
border: 1px solid var(--pro-border);
border-radius: var(--pro-radius-lg);
padding: 32px 26px 30px;
box-shadow: var(--pro-shadow-sm);
position: relative;
transition: transform 0.2s var(--pro-tr), box-shadow 0.2s var(--pro-tr);
}
.lp-step:hover {
transform: translateY(-4px);
box-shadow: var(--pro-shadow-lg);
}
.lp-step__num {
position: absolute; top: -20px; left: 26px;
width: 44px; height: 44px; border-radius: 50%;
background: linear-gradient(135deg, var(--pro-primary) 0%, var(--pro-primary-light) 100%);
color: #fff;
display: flex; align-items: center; justify-content: center;
font-weight: 800; font-size: 18px;
box-shadow: var(--pro-shadow);
}
.lp-step__icon {
width: 56px;
height: 56px;
margin: var(--pro-space-3) 0 var(--pro-space-4);
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--pro-accent-soft) 0%, #fff 100%);
border: 1px solid rgba(184, 134, 44, 0.08);
border-radius: var(--pro-radius-sm);
color: var(--pro-primary);
transition: all 0.2s var(--pro-tr);
}
.lp-step:hover .lp-step__icon {
color: var(--pro-accent-dark);
transform: scale(1.05);
}
.lp-step h3 { margin: 0 0 10px; font-size: 18px; }
.lp-step p { margin: 0; color: var(--pro-text-mute); font-size: 14px; line-height: 1.7; }
/* 特徴 Bento (asymmetric, v3) */
.lp-features {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: var(--pro-space-3);
max-width: 1180px;
margin: 0 auto;
}
.lp-feature {
background: #fff;
border-radius: var(--pro-radius);
padding: var(--pro-space-6);
border: 1px solid var(--pro-border);
box-shadow: var(--pro-shadow-sm);
transition: all 0.2s var(--pro-tr);
position: relative;
overflow: hidden;
display: flex; flex-direction: column;
grid-column: span 2; /* default: 2 cols (medium) */
}
.lp-feature--lg {
grid-column: span 3; /* large feature (top row) */
padding: var(--pro-space-8);
}
.lp-feature--full {
grid-column: span 6; /* full-width featured */
padding: var(--pro-space-8);
border-left: 4px solid var(--pro-accent);
background:
linear-gradient(135deg, var(--pro-accent-soft) 0%, transparent 60%),
#fff;
}
.lp-feature:hover {
border-color: var(--pro-primary-light);
box-shadow: var(--pro-shadow);
transform: translateY(-2px);
}
.lp-feature--full:hover {
border-left-color: var(--pro-accent-light);
border-color: var(--pro-accent);
}
.lp-feature__icon {
width: 48px; height: 48px;
border-radius: var(--pro-radius-sm);
background: linear-gradient(135deg, var(--pro-accent-soft) 0%, #fff 100%);
border: 1px solid rgba(184, 134, 44, 0.08);
display: flex; align-items: center; justify-content: center;
margin-bottom: var(--pro-space-4);
color: var(--pro-primary);
transition: all 0.2s var(--pro-tr);
}
.lp-feature:hover .lp-feature__icon {
color: var(--pro-accent-dark);
transform: scale(1.05);
}
.lp-feature--full .lp-feature__icon {
width: 56px; height: 56px;
}
.lp-feature h3 {
margin: 0 0 8px;
font-size: var(--pro-text-h4);
font-family: var(--pro-font-body);
font-weight: 700;
color: var(--pro-primary);
}
.lp-feature--lg h3,
.lp-feature--full h3 {
font-size: var(--pro-text-h3);
font-family: var(--pro-font-display);
}
.lp-feature p {
margin: 0;
color: var(--pro-text-mute);
font-size: 14px;
line-height: 1.7;
}
.lp-feature--full p {
font-size: 15px;
max-width: 720px;
}
@media (max-width: 1024px) {
.lp-features { grid-template-columns: repeat(2, 1fr); }
.lp-feature,
.lp-feature--lg { grid-column: span 1; }
.lp-feature--full { grid-column: span 2; }
}
@media (max-width: 600px) {
.lp-features { grid-template-columns: 1fr; }
.lp-feature,
.lp-feature--lg,
.lp-feature--full { grid-column: span 1; }
}
/* 比較表 */
.lp-vs {
max-width: 880px; margin: 0 auto;
background: #fff;
border-radius: var(--pro-radius-lg);
overflow: hidden;
box-shadow: var(--pro-shadow);
border: 1px solid var(--pro-border);
}
.lp-vs table { width: 100%; border-collapse: collapse; }
.lp-vs th { background: var(--pro-bg); padding: 16px; font-weight: 600; font-size: 13px; }
.lp-vs th:first-child { text-align: left; }
.lp-vs td { padding: 14px 16px; border-top: 1px solid var(--pro-border); font-size: 14px; text-align: center; }
.lp-vs td:first-child { text-align: left; font-weight: 500; }
.lp-vs th.pro-col {
background: var(--pro-primary);
color: #fff;
position: relative;
}
.lp-vs th.pro-col::before {
content: "推奨";
position: absolute; top: 8px; right: 10px;
background: var(--pro-accent); color: #fff;
font-size: 10px; padding: 3px 10px; border-radius: 999px;
font-weight: 700;
letter-spacing: 0.06em;
box-shadow: 0 2px 4px rgba(184, 134, 44, 0.30);
}
.lp-vs .yes { color: var(--pro-success); font-weight: 700; }
.lp-vs .no { color: var(--pro-text-mute); } /* WCAG AA 4.83:1 on white */
.lp-vs .pro-col-cell { background: rgba(26, 50, 99, 0.03); font-weight: 600; color: var(--pro-primary); }
/* 価格カード (v3) */
.lp-pricing {
display: grid; grid-template-columns: 1fr 1fr;
gap: var(--pro-space-6);
max-width: 920px;
margin: 0 auto;
align-items: stretch;
}
.lp-price-card {
background: #fff;
border: 1px solid var(--pro-border);
border-radius: var(--pro-radius-lg);
padding: var(--pro-space-12) var(--pro-space-8);
text-align: center;
position: relative;
transition: all 0.25s var(--pro-tr);
display: flex;
flex-direction: column;
box-shadow: var(--pro-shadow-sm);
}
.lp-price-card:hover {
border-color: var(--pro-primary-light);
box-shadow: var(--pro-shadow-lg);
transform: translateY(-3px);
}
.lp-price-card--featured {
border: 2px solid var(--pro-primary);
background:
radial-gradient(ellipse at top, var(--pro-accent-soft) 0%, transparent 60%),
linear-gradient(180deg, #fff 0%, var(--pro-bg-soft) 100%);
box-shadow: var(--pro-shadow-lg);
transform: scale(1.03);
z-index: 1;
}
.lp-price-card--featured:hover {
transform: scale(1.03) translateY(-3px);
box-shadow: var(--pro-shadow-xl);
}
@media (max-width: 700px) {
.lp-price-card--featured { transform: none; }
.lp-price-card--featured:hover { transform: translateY(-3px); }
}
.lp-price-card--featured::before {
content: "おすすめ";
position: absolute; top: -14px; left: 50%;
transform: translateX(-50%);
background: linear-gradient(135deg, var(--pro-crimson) 0%, var(--pro-crimson-dark) 100%);
color: #fff;
padding: 6px 20px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
box-shadow:
0 4px 12px -2px var(--pro-shadow-tint-crimson),
inset 0 1px 0 rgba(255, 255, 255, 0.20);
}
.lp-price-card__label {
color: var(--pro-accent-dark);
font-family: var(--pro-font-body);
font-size: var(--pro-text-eyebrow);
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 700;
margin-bottom: var(--pro-space-3);
}
.lp-price-card__price {
font-family: var(--pro-font-display);
font-size: clamp(48px, 6vw, 64px);
font-weight: 800;
color: var(--pro-primary);
letter-spacing: -0.03em;
line-height: 1;
font-variant-numeric: tabular-nums lining-nums;
margin-bottom: var(--pro-space-2);
}
.lp-price-card__price small {
font-family: var(--pro-font-body);
font-size: 18px;
color: var(--pro-text-mute);
font-weight: 500;
margin-left: 2px;
font-variant-numeric: normal;
}
.lp-price-card ul {
text-align: left;
max-width: 320px;
margin: var(--pro-space-6) auto var(--pro-space-6);
padding: 0;
list-style: none;
font-size: 14px;
flex-grow: 1;
}
.lp-price-card li {
padding: 10px 0 10px 30px;
position: relative;
color: var(--pro-text);
line-height: 1.5;
}
.lp-price-card li::before {
content: "";
position: absolute; left: 0; top: 11px;
width: 20px; height: 20px;
background: var(--pro-accent-soft);
border-radius: 50%;
/* SVG check via background-image (gold #b8862c, stroke 1.8) */
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
background-size: 12px;
}
.lp-price-card li strong { color: var(--pro-primary); font-weight: 700; }
.lp-price-card__cta {
width: 100%;
justify-content: center;
font-size: 15px;
}
.lp-price-card__foot {
font-size: 12px;
color: var(--pro-text-mute);
margin-top: var(--pro-space-3);
line-height: 1.5;
}
/* お客様の声 — Masonry wall (CSS columns) */
.lp-testimonials {
column-count: 3;
column-gap: var(--pro-space-4);
max-width: 1180px;
margin: 0 auto;
}
@media (max-width: 900px) {
.lp-testimonials { column-count: 2; }
}
@media (max-width: 600px) {
.lp-testimonials { column-count: 1; }
}
.lp-testimonial {
background: #fff;
border-radius: var(--pro-radius);
padding: 28px 24px 20px;
border: 1px solid var(--pro-border);
box-shadow: var(--pro-shadow-sm);
font-size: 14px;
line-height: 1.75;
position: relative;
break-inside: avoid;
display: inline-block; /* CSS columns 内で正しく break */
width: 100%;
margin-bottom: var(--pro-space-4);
transition: all 0.2s var(--pro-tr);
}
.lp-testimonial:hover {
box-shadow: var(--pro-shadow);
transform: translateY(-2px);
}
/* ============================================================
Featured card — navy 反転 + 純白文字(視認性最優先)
============================================================ */
.lp-testimonial--dark {
background: linear-gradient(180deg, var(--pro-primary) 0%, var(--pro-primary-dark) 100%);
border: 1px solid var(--pro-primary-dark);
color: #ffffff;
}
.lp-testimonial--dark p {
color: #ffffff !important;
font-weight: 500;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.lp-testimonial--dark::before {
color: var(--pro-accent-light);
opacity: 0.75;
}
.lp-testimonial--dark .lp-testimonial__author {
border-top-color: rgba(255, 255, 255, 0.25) !important;
color: rgba(255, 255, 255, 0.85) !important;
}
.lp-testimonial--dark .lp-testimonial__name {
color: #ffffff !important;
}
.lp-testimonial--dark .lp-testimonial__company {
color: rgba(255, 255, 255, 0.82) !important;
}
.lp-testimonial--dark .lp-testimonial__logo {
background: rgba(228, 190, 99, 0.22) !important;
color: var(--pro-accent-light) !important;
}
.lp-testimonial--dark .lp-testimonial__avatar {
box-shadow:
0 2px 8px rgba(0, 0, 0, 0.30),
0 0 0 2px rgba(228, 190, 99, 0.36) !important;
}
.lp-testimonial--dark:hover {
border-color: var(--pro-primary-light);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.20),
0 24px 48px -8px rgba(12, 25, 66, 0.50);
}
.lp-testimonial::before {
content: '"';
position: absolute; top: -14px; left: 16px;
font-size: 88px;
color: var(--pro-accent);
opacity: 0.4;
font-family: var(--pro-font-display);
font-weight: 700;
line-height: 1;
}
.lp-testimonial p { margin: 0 0 16px; color: var(--pro-text); }
.lp-testimonial__author {
display: flex; align-items: center; gap: 10px;
font-size: 13px;
color: var(--pro-text-mute);
padding-top: 14px;
border-top: 1px solid var(--pro-border);
}
.lp-testimonial__avatar {
width: 52px; height: 52px;
border-radius: 10px; /* rounded square (High-end agency) */
overflow: hidden;
flex-shrink: 0;
background: linear-gradient(135deg, var(--pro-primary) 0%, var(--pro-accent) 100%);
color: #fff;
display: flex; align-items: center; justify-content: center;
font-weight: 700;
font-size: 16px;
box-shadow: 0 2px 6px rgba(23, 37, 84, 0.18);
}
.lp-testimonial__avatar img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
/* === 会社ロゴ monogram (SVG container) === */
.lp-testimonial__company {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 4px;
font-size: 11px;
font-weight: 600;
color: var(--pro-text-mute);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.lp-testimonial__logo {
width: 16px; height: 16px;
flex-shrink: 0;
border-radius: 3px;
background: var(--pro-accent-soft);
color: var(--pro-accent-dark);
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 9px;
font-family: var(--pro-font-display);
letter-spacing: -0.02em;
}
/* navy 反転 card 用の .lp-testimonial--dark .lp-testimonial__avatar/company/logo は
上部の Featured card セクションで一括定義済(!important で確実に勝つ) */
/* Author row width 拡張 */
.lp-testimonial__author { gap: 14px; align-items: flex-start; }
.lp-testimonial__name { color: var(--pro-text); font-weight: 600; }
/* ============================================================
資料DL セクション (Sales Marker 風 リード獲得)
============================================================ */
.lp-docdl {
background: linear-gradient(135deg, var(--pro-blue-soft) 0%, #ffffff 100%);
padding: var(--pro-space-20) var(--pro-space-6);
position: relative;
overflow: hidden;
}
.lp-docdl::before {
content: ""; position: absolute; inset: 0;
background-image:
radial-gradient(ellipse at 90% 10%, rgba(41, 128, 185, 0.10), transparent 50%),
radial-gradient(ellipse at 10% 90%, rgba(255, 209, 102, 0.10), transparent 50%);
pointer-events: none;
}
.lp-docdl__inner {
max-width: 1180px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--pro-space-12);
align-items: center;
position: relative;
z-index: 1;
}
@media (max-width: 900px) {
.lp-docdl__inner { grid-template-columns: 1fr; gap: var(--pro-space-8); }
}
.lp-docdl__copy { text-align: left; }
.lp-docdl__eyebrow {
display: inline-block;
font-size: 13px;
font-weight: 700;
color: var(--pro-blue);
letter-spacing: 0.06em;
margin: 0 0 var(--pro-space-3);
}
.lp-docdl__title {
font-family: var(--pro-font-display);
font-size: clamp(24px, 3.2vw, 38px);
font-weight: 900;
color: var(--pro-primary);
letter-spacing: -0.02em;
line-height: 1.3;
margin: 0 0 var(--pro-space-4);
}
.lp-docdl__title strong {
background: linear-gradient(180deg, transparent 60%, var(--pro-accent-soft) 60%);
padding: 0 4px;
}
.lp-docdl__lead {
color: var(--pro-text-mute);
font-size: var(--pro-text-body-lg);
line-height: 1.8;
margin: 0 0 var(--pro-space-6);
}
.lp-docdl__features {
display: flex;
flex-direction: column;
gap: 10px;
margin: 0 0 var(--pro-space-6);
}
.lp-docdl__feature {
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
color: var(--pro-text);
font-weight: 500;
}
.lp-docdl__feature::before {
content: "";
width: 22px; height: 22px;
background: var(--pro-blue);
border-radius: 50%;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
background-size: 13px;
flex-shrink: 0;
}
.lp-docdl__cta {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 16px 32px;
background: linear-gradient(135deg, var(--pro-primary) 0%, var(--pro-blue) 100%);
color: #ffffff;
border-radius: var(--pro-radius-sm);
font-weight: 700;
font-size: 16px;
text-decoration: none;
box-shadow: 0 6px 20px -4px var(--pro-shadow-tint-strong);
transition: all 0.3s ease;
}
.lp-docdl__cta:hover {
transform: translateY(-3px);
box-shadow: 0 12px 28px -4px var(--pro-shadow-tint-strong);
color: #ffffff;
text-decoration: none;
}
.lp-docdl__cta svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 2; fill: none; }
.lp-docdl__small {
display: block;
margin-top: var(--pro-space-3);
font-size: 12px;
color: var(--pro-text-mute);
}
/* 資料イメージ(右側) */
.lp-docdl__visual {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.lp-docdl__cover {
background: #ffffff;
border: 1px solid var(--pro-border);
border-radius: var(--pro-radius-lg);
padding: var(--pro-space-8) var(--pro-space-6);
width: 320px;
max-width: 100%;
box-shadow: 0 30px 60px -16px var(--pro-shadow-tint-strong);
transform: perspective(1200px) rotateY(-6deg);
transition: transform 0.4s var(--pro-tr-spring);
text-align: center;
}
.lp-docdl__cover:hover { transform: perspective(1200px) rotateY(-3deg) translateY(-4px); }
.lp-docdl__cover-tag {
display: inline-block;
background: var(--pro-red);
color: #ffffff;
font-size: 11px;
font-weight: 700;
padding: 4px 10px;
border-radius: 999px;
margin-bottom: var(--pro-space-4);
letter-spacing: 0.06em;
}
.lp-docdl__cover-title {
font-family: var(--pro-font-display);
font-size: 22px;
font-weight: 900;
color: var(--pro-primary);
line-height: 1.4;
margin: 0 0 var(--pro-space-4);
letter-spacing: -0.02em;
}
.lp-docdl__cover-subtitle {
font-size: 13px;
color: var(--pro-text-mute);
margin: 0 0 var(--pro-space-6);
line-height: 1.7;
}
.lp-docdl__cover-items {
display: flex;
flex-direction: column;
gap: 8px;
text-align: left;
font-size: 13px;
color: var(--pro-text);
margin: 0 0 var(--pro-space-6);
padding: 0;
list-style: none;
}
.lp-docdl__cover-items li {
display: flex;
align-items: center;
gap: 8px;
}
.lp-docdl__cover-items li::before {
content: "›";
color: var(--pro-blue);
font-weight: 700;
}
.lp-docdl__cover-foot {
font-size: 11px;
color: var(--pro-text-soft);
letter-spacing: 0.04em;
border-top: 1px solid var(--pro-border);
padding-top: var(--pro-space-3);
}
/* FAQ (v3 — SVG icon + gold hover) */
.lp-faq {
max-width: 760px; margin: 0 auto;
}
.lp-faq__item {
border-bottom: 1px solid var(--pro-border);
padding: var(--pro-space-4) 0;
/* transition removed: padding animation triggers reflow */
}
.lp-faq__item:first-child { border-top: 1px solid var(--pro-border); }
.lp-faq__q {
cursor: pointer;
display: flex; justify-content: space-between; align-items: center;
gap: var(--pro-space-4);
font-family: var(--pro-font-body);
font-weight: 600;
color: var(--pro-primary);
font-size: var(--pro-text-body-lg);
list-style: none;
padding: 6px 0;
transition: color 0.2s var(--pro-tr);
}
.lp-faq__q:hover { color: var(--pro-accent-dark); }
.lp-faq__q::-webkit-details-marker { display: none; }
.lp-faq__icon {
flex-shrink: 0;
width: 32px; height: 32px;
border-radius: 50%;
background: var(--pro-bg-soft);
border: 1px solid var(--pro-border);
display: inline-flex; align-items: center; justify-content: center;
color: var(--pro-text-mute);
transition: all 0.25s var(--pro-tr-spring);
}
.lp-faq__icon svg {
width: 14px; height: 14px;
stroke: currentColor;
stroke-width: 2;
fill: none;
stroke-linecap: round;
transition: transform 0.25s var(--pro-tr);
}
.lp-faq__q:hover .lp-faq__icon {
color: var(--pro-accent-dark);
border-color: var(--pro-accent-light);
background: var(--pro-accent-soft);
}
details[open] .lp-faq__icon {
background: var(--pro-primary);
border-color: var(--pro-primary);
color: #fff;
}
details[open] .lp-faq__icon svg {
transform: rotate(45deg); /* + → × */
}
details[open] .lp-faq__q { color: var(--pro-primary); }
.lp-faq__a {
padding: var(--pro-space-3) 0 var(--pro-space-2) 0;
color: var(--pro-text-mute);
line-height: 1.75;
font-size: 14px;
max-width: 660px;
}
/* CTA Band — closing moment (ApoGene 風: navy → blue gradient) */
.lp-cta {
background: linear-gradient(135deg, var(--pro-primary) 0%, var(--pro-blue) 100%);
color: #ffffff;
padding: var(--pro-space-24) 24px;
text-align: center;
position: relative;
overflow: hidden;
}
.lp-cta::before {
content: ""; position: absolute; inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
background-size: 32px 32px;
pointer-events: none;
}
.lp-cta > * { position: relative; z-index: 1; }
.lp-cta h2 {
color: #ffffff;
font-family: var(--pro-font-display);
font-size: clamp(32px, 4.5vw, 56px);
font-weight: 900;
letter-spacing: -0.025em;
line-height: 1.2;
}
.lp-cta p { color: rgba(255,255,255,0.88); margin: 16px 0 32px; font-size: var(--pro-text-body-lg); }
.lp-cta__buttons {
display: inline-flex;
gap: var(--pro-space-3);
flex-wrap: wrap;
justify-content: center;
}
.lp-cta__signin { color: rgba(255,255,255,0.75); margin-top: var(--pro-space-6); }
.lp-cta__signin a { color: var(--pro-accent); font-weight: 600; }
.lp-cta__signin a:hover { color: #ffffff; }
/* ============================================================
Mega Footer (v4 — ApoGene 統一スタイル)
============================================================ */
.lp-footer {
background: linear-gradient(180deg, var(--pro-primary-deep) 0%, #0a163a 100%);
color: rgba(255, 255, 255, 0.7);
font-family: var(--pro-font-body);
font-size: 13px;
padding: var(--pro-space-16) var(--pro-space-6) var(--pro-space-6);
position: relative;
}
.lp-footer__inner {
max-width: 1280px;
margin: 0 auto;
}
.lp-footer__grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1.3fr 1.3fr;
gap: var(--pro-space-12);
margin-bottom: var(--pro-space-12);
}
@media (max-width: 1024px) {
.lp-footer__grid {
grid-template-columns: 1fr 1fr;
gap: var(--pro-space-8);
}
}
@media (max-width: 600px) {
.lp-footer__grid {
grid-template-columns: 1fr;
gap: var(--pro-space-8);
}
}
/* === Column heading === */
.lp-footer__col-title {
font-family: var(--pro-font-body);
font-size: 13px;
font-weight: 700;
color: #ffffff;
letter-spacing: 0.04em;
margin: 0 0 var(--pro-space-4);
}
.lp-footer__col-title:not(:first-child) {
margin-top: var(--pro-space-6);
}
/* === Brand column === */
.lp-footer__brand {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: var(--pro-space-4);
}
.lp-footer__brand a { display: inline-flex; align-items: center; gap: 12px; }
.lp-footer__logo {
height: 56px;
width: auto;
opacity: 1;
vertical-align: middle;
transition: opacity 0.2s var(--pro-tr);
object-fit: contain;
}
.lp-footer__logo:hover { opacity: 0.85; }
.lp-footer__brand-name {
font-family: var(--pro-font-display);
font-size: 22px;
font-weight: 800;
color: #ffffff;
letter-spacing: -0.02em;
line-height: 1;
}
.lp-footer__desc {
margin: 0 0 var(--pro-space-6);
font-size: 13px;
color: rgba(255, 255, 255, 0.7);
line-height: 1.7;
max-width: 280px;
}
.lp-footer__meta {
display: flex;
flex-direction: column;
gap: 4px;
font-size: 12px;
color: rgba(255, 255, 255, 0.6);
}
.lp-footer__meta-item {
display: inline-flex;
align-items: center;
gap: 8px;
}
.lp-footer__meta-icon {
width: 14px; height: 14px;
flex-shrink: 0;
stroke: currentColor;
stroke-width: 1.6;
fill: none;
}
/* === Links list === */
.lp-footer__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--pro-space-2);
}
.lp-footer__list a,
.lp-footer__list-item {
color: rgba(255, 255, 255, 0.78);
font-size: 13px;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
transition: color 0.2s var(--pro-tr);
line-height: 1.5;
}
.lp-footer__list a:hover {
color: var(--pro-accent-light);
text-decoration: none;
}
.lp-footer__list a::before {
content: "›";
color: var(--pro-accent);
font-size: 14px;
margin-right: 0;
transition: transform 0.2s var(--pro-tr);
}
.lp-footer__list a:hover::before {
transform: translateX(2px);
}
.lp-footer__list-item__icon {
width: 16px; height: 16px;
flex-shrink: 0;
stroke: var(--pro-accent);
stroke-width: 1.6;
fill: none;
}
/* === Contact highlight box === */
.lp-footer__contact {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: var(--pro-radius);
padding: var(--pro-space-4) var(--pro-space-4) var(--pro-space-4);
margin-top: var(--pro-space-6);
}
.lp-footer__contact-title {
font-size: 13px;
font-weight: 700;
color: #ffffff;
display: inline-flex;
align-items: center;
gap: 6px;
margin: 0 0 var(--pro-space-2);
}
.lp-footer__contact-title::before {
content: "✉";
color: var(--pro-accent-light);
font-size: 14px;
}
.lp-footer__contact-text {
margin: 0;
font-size: 12px;
color: rgba(255, 255, 255, 0.7);
line-height: 1.6;
}
.lp-footer__contact-text a {
color: var(--pro-accent-light);
font-weight: 600;
text-decoration: none;
transition: color 0.2s var(--pro-tr);
}
.lp-footer__contact-text a:hover {
color: #ffffff;
text-decoration: underline;
}
/* === Keywords row (SEO) === */
.lp-footer__keywords {
padding: var(--pro-space-6) 0;
border-top: 1px solid rgba(255, 255, 255, 0.08);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
font-size: 11px;
color: rgba(255, 255, 255, 0.5);
line-height: 1.8;
}
.lp-footer__keywords-label {
font-weight: 700;
color: rgba(255, 255, 255, 0.75);
margin-right: 12px;
}
.lp-footer__keywords-list {
color: rgba(255, 255, 255, 0.55);
}
.lp-footer__keywords-list a {
color: inherit;
text-decoration: none;
transition: color 0.15s var(--pro-tr);
}
.lp-footer__keywords-list a:hover {
color: var(--pro-accent-light);
}
/* === Bottom strip === */
.lp-footer__bottom {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: var(--pro-space-3);
padding-top: var(--pro-space-6);
font-size: 12px;
color: rgba(255, 255, 255, 0.5);
}
.lp-footer__copy {
margin: 0;
font-size: 12px;
color: rgba(255, 255, 255, 0.55);
font-family: var(--pro-font-body);
}
.lp-footer__tagline {
font-size: 12px;
color: rgba(255, 255, 255, 0.45);
}
.lp-footer__tagline a {
color: rgba(255, 255, 255, 0.65);
text-decoration: none;
}
.lp-footer__tagline a:hover {
color: var(--pro-accent-light);
}
/* === Hero strong emphasis === */
.lp-hero .lead strong {
color: var(--pro-primary);
font-weight: 700;
background: linear-gradient(180deg, transparent 62%, var(--pro-accent-soft) 62%);
padding: 0 2px;
}
.lp-text-white { color: var(--pro-primary); } /* legacy, kept for compat */
/* === CTA section sign-in row === */
.lp-cta__signin {
margin-top: var(--pro-space-4);
opacity: 0.75;
font-size: 13px;
}
.lp-cta__signin a {
color: var(--pro-accent-light);
text-decoration: underline;
font-weight: 500;
}
.lp-cta__signin a:hover {
color: #fff;
}
/* === Numbers wrap (no extra top padding) === */
.lp-numbers-wrap {
padding-top: 0 !important;
}
/* === Header CTA button (compact) === */
.pro-btn--nav {
padding: 8px 18px;
font-size: 13px;
}
/* === SVG triangle (play / arrow forward) === */
.icon--triangle {
fill: currentColor;
stroke: none;
}
/* === Skip-to-content (a11y) === */
.skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 9999;
padding: 10px 16px;
background: var(--pro-primary);
color: #fff;
font-family: var(--pro-font-body);
font-weight: 600;
text-decoration: none;
border-radius: 0 0 var(--pro-radius-sm) 0;
}
.skip-link:focus {
left: 0;
outline: 2px solid var(--pro-accent);
outline-offset: 2px;
}
/* ============================================================
3カラム App レイアウト（細サイドバー + フィルター + メイン）
============================================================ */
.pro-app {
display: grid;
grid-template-columns: 72px 320px 1fr;
min-height: 100dvh;
background: var(--pro-bg);
}
/* ===== 細サイドバー（アイコン縦並び） ===== */
.pro-sidenav {
background: linear-gradient(180deg, var(--pro-primary-dark) 0%, var(--pro-primary) 100%);
color: rgba(255, 255, 255, 0.85);
display: flex; flex-direction: column;
align-items: stretch;
padding: 14px 0;
position: sticky; top: 0;
height: 100dvh;
overflow-y: auto;
z-index: 50;
}
.pro-sidenav__brand {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 6px 0 18px;
border-bottom: 1px solid rgba(255,255,255,0.08);
margin-bottom: 10px;
text-decoration: none;
}
.pro-sidenav__brand img {
width: 36px; height: 36px;
border-radius: 8px;
background: #fff;
padding: 4px;
}
.pro-sidenav__brand span {
font-size: 9px;
color: rgba(255,255,255,0.6);
letter-spacing: 0.06em;
text-transform: uppercase;
margin-top: 6px;
font-weight: 700;
}
.pro-sidenav__list {
list-style: none;
margin: 0; padding: 0;
display: flex; flex-direction: column;
gap: 2px;
}
.pro-sidenav__item {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
width: 100%; /* v9.6: button 要素も a と同じ幅に揃えて中央寄せ */
box-sizing: border-box;
min-height: 64px;
padding: 10px 6px;
color: rgba(255,255,255,0.7);
font-size: 10px;
font-weight: 600;
cursor: pointer;
text-decoration: none;
border: none;
background: transparent;
font-family: inherit;
transition: color 0.15s var(--pro-tr), background 0.15s var(--pro-tr);
line-height: 1.1;
text-align: center;
letter-spacing: 0.02em;
}
.pro-sidenav__item:hover {
color: #fff;
background: rgba(255, 255, 255, 0.06);
text-decoration: none;
}
.pro-sidenav__item:focus-visible {
outline: 2px solid var(--pro-accent);
outline-offset: -2px;
color: #fff;
}
.pro-sidenav__item.is-active {
color: #fff;
background: rgba(255, 255, 255, 0.1);
}
.pro-sidenav__item.is-active::before {
content: ""; position: absolute; left: 0; top: 12px; bottom: 12px;
width: 3px;
background: var(--pro-accent);
border-radius: 0 3px 3px 0;
}
.pro-sidenav__icon {
width: 22px; height: 22px;
stroke: currentColor; stroke-width: 1.8;
fill: none;
}
.pro-sidenav__spacer { flex: 1; }
.pro-sidenav__divider {
height: 1px;
background: rgba(255,255,255,0.08);
margin: 6px 14px;
}
/* ===== フィルターパネル（中サイドバー） ===== */
.pro-filterpane {
background: #fff;
border-right: 1px solid var(--pro-border);
height: 100dvh;
overflow-y: auto;
position: sticky; top: 0;
z-index: 40;
}
.pro-filterpane__header {
padding: 18px 20px 12px;
border-bottom: 1px solid var(--pro-border);
position: sticky; top: 0;
background: rgba(255,255,255,0.96);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
z-index: 1;
}
.pro-filterpane__title {
margin: 0;
font-size: 13px;
font-weight: 700;
color: var(--pro-primary);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.pro-filterpane__body {
padding: 16px 20px 80px;
}
.pro-filter-group {
margin-bottom: 18px;
}
.pro-filter-group__label {
display: flex; align-items: center; justify-content: space-between;
font-size: 11px;
font-weight: 700;
color: var(--pro-text-mute);
letter-spacing: 0.06em;
text-transform: uppercase;
margin-bottom: 6px;
}
.pro-filter-group__count {
font-size: 10px;
color: var(--pro-text-soft);
background: var(--pro-bg);
padding: 1px 6px;
border-radius: 999px;
}
/* タブ（ソース切替） */
.pro-source-tabs {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 6px;
margin-bottom: 4px;
}
.pro-source-tab {
padding: 10px 6px;
border: 1px solid var(--pro-border);
border-radius: var(--pro-radius-sm);
background: #fff;
font-size: 11px;
font-weight: 600;
color: var(--pro-text-mute);
cursor: pointer;
text-align: center;
font-family: inherit;
transition: all 0.15s var(--pro-tr);
display: flex; flex-direction: column; align-items: center; gap: 4px;
min-height: 56px;
justify-content: center;
}
.pro-source-tab:hover {
border-color: var(--pro-primary-light);
color: var(--pro-primary);
}
.pro-source-tab.is-active {
border-color: var(--pro-primary);
background: linear-gradient(180deg, #fff 0%, #f1f5fc 100%);
color: var(--pro-primary);
box-shadow: 0 1px 3px rgba(26,50,99,0.08);
}
.pro-source-tab__icon { font-size: 18px; line-height: 1; }
.pro-source-tab__label { font-size: 11px; font-weight: 600; }
/* ===== メインパネル ===== */
.pro-mainpane {
display: flex; flex-direction: column;
min-height: 100dvh;
overflow: hidden;
}
.pro-mainpane__topbar {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 24px;
background: rgba(255,255,255,0.92);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid var(--pro-border);
position: sticky; top: 0; z-index: 30;
gap: 16px;
}
.pro-mainpane__title {
margin: 0;
font-size: 14px;
font-weight: 700;
color: var(--pro-primary);
}
.pro-mainpane__user {
display: flex; align-items: center; gap: 12px;
font-size: 13px;
color: var(--pro-text-mute);
}
.pro-mainpane__user-avatar {
width: 32px; height: 32px;
border-radius: 50%;
background: linear-gradient(135deg, var(--pro-primary), var(--pro-accent));
color: #fff;
display: flex; align-items: center; justify-content: center;
font-weight: 700;
font-size: 13px;
}
.pro-mainpane__body {
flex: 1;
display: flex; flex-direction: column;
padding: 20px 24px 90px; /* 下部バー分の padding */
overflow-y: auto;
}
/* ===== 件数表示（巨大） ===== */
.pro-result-count {
font-size: 32px;
font-weight: 800;
color: var(--pro-text);
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
display: flex; align-items: baseline; gap: 8px;
}
.pro-result-count__unit {
font-size: 14px;
font-weight: 600;
color: var(--pro-text-mute);
}
.pro-result-count__sub {
font-size: 12px;
color: var(--pro-text-mute);
font-weight: 500;
margin-left: 12px;
}
/* ===== ツールバー（検索結果上部） ===== */
.pro-result-toolbar {
display: flex; align-items: center; gap: 10px;
padding: 12px 0;
flex-wrap: wrap;
border-bottom: 1px solid var(--pro-border);
margin-bottom: 12px;
}
/* ===== 高密度テーブル ===== */
.pro-data-table {
width: 100%;
border-collapse: collapse;
background: #fff;
border-radius: var(--pro-radius);
overflow: hidden;
border: 1px solid var(--pro-border);
}
.pro-data-table thead th {
background: var(--pro-bg);
color: var(--pro-text-mute);
font-weight: 600;
font-size: 11px;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 10px 12px;
text-align: left;
border-bottom: 1px solid var(--pro-border);
position: sticky; top: 0;
white-space: nowrap;
}
.pro-data-table tbody td {
padding: 9px 12px;
font-size: 13px;
border-bottom: 1px solid var(--pro-border);
vertical-align: middle;
}
.pro-data-table tbody tr {
cursor: pointer;
transition: background 0.15s var(--pro-tr);
}
.pro-data-table tbody tr:hover td {
background: rgba(26, 50, 99, 0.03);
}
.pro-data-table tbody tr.is-selected td {
background: rgba(200, 157, 63, 0.06);
}
.pro-data-table__check {
width: 32px;
padding-left: 16px !important;
}
.pro-data-table__company-name {
font-weight: 600;
color: var(--pro-text);
}
.pro-data-table__company-loc {
font-size: 11px;
color: var(--pro-text-mute);
margin-top: 1px;
}
.pro-data-table__num {
font-variant-numeric: tabular-nums;
text-align: right;
}
/* チェックボックス（カスタム） */
.pro-checkbox {
width: 18px; height: 18px;
border: 1.5px solid var(--pro-border-strong);
border-radius: 4px;
background: #fff;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
display: inline-flex; align-items: center; justify-content: center;
position: relative;
transition: all 0.15s var(--pro-tr);
flex-shrink: 0;
}
.pro-checkbox:hover { border-color: var(--pro-primary); }
.pro-checkbox:focus-visible {
outline: 3px solid rgba(26,50,99,0.18);
border-color: var(--pro-primary);
}
.pro-checkbox:checked {
background: var(--pro-primary);
border-color: var(--pro-primary);
}
.pro-checkbox:checked::after {
content: ""; position: absolute;
width: 10px; height: 5px;
border-left: 2px solid #fff;
border-bottom: 2px solid #fff;
transform: rotate(-45deg) translateY(-1px);
}
.pro-checkbox:indeterminate {
background: var(--pro-primary);
border-color: var(--pro-primary);
}
.pro-checkbox:indeterminate::after {
content: ""; position: absolute;
width: 10px; height: 2px;
background: #fff;
border-radius: 1px;
}
/* ===== 下部選択操作バー ===== */
.pro-bulk-bar {
position: fixed;
left: 392px; /* 72 + 320 */
right: 0;
bottom: 0;
background: rgba(255,255,255,0.96);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-top: 1px solid var(--pro-border);
padding: 12px 24px;
display: flex; align-items: center; gap: 14px;
flex-wrap: wrap;
z-index: 35;
box-shadow: 0 -2px 12px rgba(20,30,60,0.04);
}
.pro-bulk-bar__count {
font-size: 14px;
font-weight: 600;
color: var(--pro-primary);
font-variant-numeric: tabular-nums;
}
.pro-bulk-bar__divider {
width: 1px; height: 22px;
background: var(--pro-border);
}
.pro-bulk-bar__quick {
display: flex; gap: 4px;
}
.pro-bulk-bar__chip {
padding: 6px 10px;
border: 1px solid var(--pro-border);
background: #fff;
border-radius: 999px;
font-size: 12px;
cursor: pointer;
font-family: inherit;
color: var(--pro-text);
transition: all 0.15s var(--pro-tr);
}
.pro-bulk-bar__chip:hover {
border-color: var(--pro-primary);
color: var(--pro-primary);
}
.pro-bulk-bar__chip.is-active {
background: var(--pro-primary);
color: #fff;
border-color: var(--pro-primary);
}
.pro-bulk-bar__spacer { flex: 1; }
/* ===== ローディングスピナー（リアルタイム検索用） ===== */
.pro-spinner {
display: inline-block;
width: 14px; height: 14px;
border: 2px solid var(--pro-border);
border-top-color: var(--pro-primary);
border-radius: 50%;
animation: spin 0.7s linear infinite;
vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }
.pro-loading-text {
display: inline-flex; align-items: center; gap: 6px;
color: var(--pro-text-mute);
font-size: 12px;
}
/* ===== レスポンシブ：800px 以下では細サイドバーを下部に ===== */
@media (max-width: 1100px) {
.pro-app {
grid-template-columns: 1fr;
grid-template-rows: auto auto 1fr;
}
.pro-sidenav {
flex-direction: row;
height: auto;
min-height: 56px;
padding: 0 8px;
overflow-x: auto;
overflow-y: hidden;
position: sticky; top: 0;
}
.pro-sidenav__brand {
padding: 8px 12px;
border-bottom: none;
border-right: 1px solid rgba(255,255,255,0.08);
margin-right: 8px;
margin-bottom: 0;
flex-direction: row;
gap: 8px;
}
.pro-sidenav__brand span { margin-top: 0; }
.pro-sidenav__list {
flex-direction: row;
}
.pro-sidenav__item {
flex-direction: row;
gap: 6px;
padding: 8px 14px;
font-size: 12px;
min-height: 44px;
white-space: nowrap;
}
.pro-sidenav__item.is-active::before {
left: 8px; right: 8px; top: auto; bottom: 0;
height: 3px; width: auto;
border-radius: 3px 3px 0 0;
}
.pro-sidenav__divider, .pro-sidenav__spacer { display: none; }
.pro-filterpane {
height: auto;
max-height: 50vh;
border-right: none;
border-bottom: 1px solid var(--pro-border);
position: relative;
}
.pro-bulk-bar { left: 0; }
}
/* ============================================================
ページ遷移フェード（shell.js が制御）
- サイドバーは固定 / メインだけ薄くフェードして遷移感を抑える
============================================================ */
.pro-mainpane,
.pro-filterpane {
transition: opacity 0.16s ease-out;
}
.pro-app-shell-leaving .pro-mainpane,
.pro-app-shell-leaving .pro-filterpane {
opacity: 0.4;
}
.pro-app-shell-leaving .pro-mainpane__body {
transform: translateY(2px);
transition: transform 0.16s ease-out;
}
/* View Transitions API（モダンブラウザ用）— サイドバーは引き継ぎ */
@view-transition { navigation: auto; }
::view-transition-group(pro-sidenav) {
animation-duration: 0s; /* サイドバーはアニメさせない */
}
.pro-sidenav { view-transition-name: pro-sidenav; }
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 160ms;
animation-timing-function: ease-out;
}
/* prefers-reduced-motion (強化版 — 全アニメ抑止) */
@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;
}
.pro-pulse,
.lp-hero__mockup-status::before { animation: none !important; }
.lp-hero__mockup { transform: none !important; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0s !important; }
}
/* backdrop-filter モバイルフォールバック (GPU 負荷軽減) */
@media (max-width: 800px) {
.pro-header,
.pro-modal-overlay,
.pro-filterpane__header,
.pro-mainpane__topbar,
.pro-bulk-bar,
.lp-hero .pro-btn--ghost {
backdrop-filter: none;
-webkit-backdrop-filter: none;
background: rgba(255, 255, 255, 0.96);
}
.lp-hero .pro-btn--ghost {
background: rgba(255, 255, 255, 0.14); /* ghost button on dark hero */
}
.pro-modal-overlay {
background: rgba(15, 23, 41, 0.7); /* darker scrim instead of blur */
}
}
/* ============================================================
Animations
============================================================ */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideUp {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
@keyframes fadeUp {
from { opacity: 0; transform: translate3d(0, 32px, 0); }
to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes fadeRight {
from { opacity: 0; transform: translate3d(-32px, 0, 0); }
to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes scaleIn {
from { opacity: 0; transform: scale3d(0.92, 0.92, 1); }
to { opacity: 1; transform: scale3d(1, 1, 1); }
}
@keyframes drawCircle {
from { stroke-dashoffset: 100; }
to { stroke-dashoffset: 0; }
}
@keyframes shimmer {
0% { transform: translate3d(-100%, 0, 0); }
100% { transform: translate3d(200%, 0, 0); }
}
@keyframes goldGlow {
0%, 100% { box-shadow: 0 8px 24px -4px var(--pro-shadow-tint-gold), inset 0 1px 0 rgba(255,255,255,0.18); }
50% { box-shadow: 0 12px 32px -4px rgba(184,134,44,0.36), inset 0 1px 0 rgba(255,255,255,0.22); }
}
.pro-pulse { animation: pulse 1.5s ease-in-out infinite; }
/* === Scroll-driven reveal (IntersectionObserver-driven) === */
[data-reveal] {
opacity: 0;
transform: translate3d(0, 32px, 0);
transition:
opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
will-change: opacity, transform;
}
[data-reveal="right"] { transform: translate3d(-32px, 0, 0); }
[data-reveal="scale"] { transform: scale3d(0.94, 0.94, 1); }
[data-reveal].is-revealed {
opacity: 1;
transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
}
/* Staggered children (parent has data-reveal-stagger) */
[data-reveal-stagger] > * {
opacity: 0;
transform: translate3d(0, 24px, 0);
transition:
opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-reveal-stagger].is-revealed > * {
opacity: 1;
transform: translate3d(0, 0, 0);
}
[data-reveal-stagger].is-revealed > *:nth-child(1) { transition-delay: 0.00s; }
[data-reveal-stagger].is-revealed > *:nth-child(2) { transition-delay: 0.06s; }
[data-reveal-stagger].is-revealed > *:nth-child(3) { transition-delay: 0.12s; }
[data-reveal-stagger].is-revealed > *:nth-child(4) { transition-delay: 0.18s; }
[data-reveal-stagger].is-revealed > *:nth-child(5) { transition-delay: 0.24s; }
[data-reveal-stagger].is-revealed > *:nth-child(6) { transition-delay: 0.30s; }
[data-reveal-stagger].is-revealed > *:nth-child(7) { transition-delay: 0.36s; }
[data-reveal-stagger].is-revealed > *:nth-child(8) { transition-delay: 0.42s; }
[data-reveal-stagger].is-revealed > *:nth-child(9) { transition-delay: 0.48s; }
/* === Hover sheen (card shimmer — 内側だけ動く実装) ===
IMPORTANT: card 自体は overflow:visible のまま(.lp-step__num / おすすめ badge が
外に飛び出すデザインを維持)。shimmer は card 内部に絶対配置した shimmer 専用 layer
`.lp-shimmer` に閉じ込め、その layer の overflow:hidden で内側にだけ光が走る。
*/
.lp-feature,
.lp-step,
.lp-price-card,
.lp-testimonial {
position: relative;
}
.lp-feature::after,
.lp-step::after,
.lp-price-card::after,
.lp-testimonial::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(
100deg,
transparent 0%,
rgba(255, 255, 255, 0.20) 50%,
transparent 100%
);
background-size: 50% 100%;
background-repeat: no-repeat;
background-position: -50% 0;
pointer-events: none;
opacity: 0;
transition: opacity 0.4s var(--pro-tr), background-position 0.9s ease-out;
}
.lp-feature:hover::after,
.lp-step:hover::after,
.lp-price-card:hover::after,
.lp-testimonial:hover::after {
opacity: 1;
background-position: 150% 0;
}
.lp-testimonial--dark::after {
background: linear-gradient(
100deg,
transparent 0%,
rgba(212, 166, 72, 0.15) 50%,
transparent 100%
);
background-size: 50% 100%;
background-repeat: no-repeat;
background-position: -50% 0;
}
.lp-testimonial--dark:hover::after {
background-position: 150% 0;
}
/* === CTA button micro-bounce + gold glow === */
.pro-btn--accent {
position: relative;
overflow: hidden;
}
.pro-btn--accent::before {
content: "";
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background: linear-gradient(
100deg,
transparent 0%,
rgba(255, 255, 255, 0.28) 50%,
transparent 100%
);
transform: translate3d(-100%, 0, 0);
pointer-events: none;
}
.pro-btn--accent:hover:not(:disabled)::before {
animation: shimmer 0.7s ease-out;
}
/* === Hero h1 strong subtle pulse === */
.lp-hero h1 strong {
background-size: 100% 200%;
background-position: 0% 0%;
animation: heroGoldShift 6s ease-in-out infinite;
}
@keyframes heroGoldShift {
0%, 100% { background-position: 0% 0%; }
50% { background-position: 0% 100%; }
}
/* === Numbers count-up hover === */
.lp-number-item {
transition: background 0.3s var(--pro-tr);
}
.lp-number-item:hover {
background: linear-gradient(
135deg,
rgba(253, 246, 227, 0.5) 0%,
transparent 100%
);
}
.lp-number-item__value {
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.lp-number-item:hover .lp-number-item__value {
transform: scale(1.05);
}
/* === Donut chart draw-in animation === */
.lp-hero__mockup-donut .donut-primary,
.lp-hero__mockup-donut .donut-accent {
pathLength: 100;
animation: donutDraw 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.4s both;
transform-origin: center;
}
.lp-hero__mockup-donut .donut-accent {
animation-delay: 0.8s;
}
@keyframes donutDraw {
from { stroke-dashoffset: 100; }
}
/* === Hero progress bar fill animation === */
.lp-hero__mockup-progress__bar > div {
animation: progressFill 1.6s cubic-bezier(0.22, 1, 0.36, 1) 1.0s both;
transform-origin: left center;
width: 72%;
}
@keyframes progressFill {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
/* === Hero mockup floating loop (subtle) === */
.lp-hero__mockup {
animation: heroFloat 8s ease-in-out infinite;
}
@keyframes heroFloat {
0%, 100% { transform: perspective(1600px) rotateY(-2deg) rotateX(2deg) translate3d(0, 0, 0); }
50% { transform: perspective(1600px) rotateY(-2deg) rotateX(2deg) translate3d(0, -8px, 0); }
}
@media (max-width: 800px) {
.lp-hero__mockup { animation: none; }
}
/* === Gold underline animation for nav links === */
.pro-header__nav a:not(.pro-btn) {
position: relative;
}
.pro-header__nav a:not(.pro-btn)::after {
content: "";
position: absolute;
left: 14px; right: 14px;
bottom: 4px;
height: 2px;
background: var(--pro-accent);
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.3s var(--pro-tr);
}
.pro-header__nav a:not(.pro-btn):hover::after {
transform: scaleX(1);
}
/* ============================================================
Utility
============================================================ */
.pro-text-center { text-align: center; }
.pro-text-right { text-align: right; }
.pro-mt-0 { margin-top: 0 !important; }
.pro-mt-2 { margin-top: 8px; }
.pro-mt-4 { margin-top: 16px; }
.pro-mt-6 { margin-top: 24px; }
.pro-mt-8 { margin-top: 32px; }
.pro-mb-0 { margin-bottom: 0 !important; }
.pro-mb-2 { margin-bottom: 8px; }
.pro-mb-4 { margin-bottom: 16px; }
.pro-mb-6 { margin-bottom: 24px; }
.pro-flex { display: flex; gap: 8px; align-items: center; }
.pro-flex-between { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.pro-grow { flex-grow: 1; }
.pro-hide-mobile { }
/* ============================================================
Responsive
============================================================ */
@media (max-width: 800px) {
.pro-container { padding: 20px 16px 64px; }
.pro-row-2, .pro-row-3, .pro-row-4 { grid-template-columns: 1fr; }
.lp-steps, .lp-features, .lp-testimonials, .lp-pricing { grid-template-columns: 1fr; }
.lp-hero { padding: 64px 20px 56px; }
.pro-stepper { flex-wrap: wrap; gap: 4px; }
.pro-stepper__arrow { display: none; }
.pro-header { padding: 12px 16px; }
.pro-header__nav { gap: 2px; }
.pro-hide-mobile { display: none !important; }
.pro-kpi__value { font-size: 24px; }
}
/* ============================================================
Problem セクション(営業の辛さ 3 共感)— PASONA: Problem + Agitation
============================================================ */
.lp-problem {
background: #ffffff;
padding: var(--pro-space-20) var(--pro-space-6);
border-top: 1px solid var(--pro-border);
}
.lp-problem__inner {
max-width: 1180px;
margin: 0 auto;
}
.lp-problem__head {
text-align: center;
margin-bottom: var(--pro-space-12);
}
.lp-problem__eyebrow {
display: inline-block;
font-size: 13px;
font-weight: 700;
color: var(--pro-red);
letter-spacing: 0.06em;
margin: 0 0 var(--pro-space-3);
}
.lp-problem__eyebrow::before {
content: "▼";
margin-right: 6px;
font-size: 10px;
}
.lp-problem__title {
font-family: var(--pro-font-display);
font-size: clamp(24px, 3.5vw, 40px);
font-weight: 900;
color: var(--pro-primary);
letter-spacing: -0.02em;
line-height: 1.35;
margin: 0 0 var(--pro-space-3);
text-wrap: balance;
}
.lp-problem__title strong {
background: linear-gradient(180deg, transparent 60%, var(--pro-red-soft) 60%);
padding: 0 4px;
font-weight: 900;
}
.lp-problem__sub {
color: var(--pro-text-mute);
font-size: var(--pro-text-body-lg);
max-width: 720px;
margin: 0 auto;
line-height: 1.8;
}
.lp-problem__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--pro-space-6);
}
@media (max-width: 900px) {
.lp-problem__grid { grid-template-columns: 1fr; gap: var(--pro-space-4); }
}
.lp-problem__card {
background: var(--pro-bg);
border: 1px solid var(--pro-border);
border-radius: var(--pro-radius-lg);
padding: var(--pro-space-8) var(--pro-space-6);
position: relative;
transition: all 0.25s var(--pro-tr);
}
.lp-problem__card:hover {
background: #ffffff;
border-color: var(--pro-red);
transform: translateY(-3px);
box-shadow: 0 12px 30px -4px rgba(215, 38, 33, 0.10);
}
.lp-problem__icon {
width: 56px; height: 56px;
background: var(--pro-red-soft);
color: var(--pro-red);
border-radius: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: var(--pro-space-4);
}
.lp-problem__icon svg {
width: 28px; height: 28px;
stroke: currentColor;
stroke-width: 1.8;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
.lp-problem__quote {
font-size: 17px;
font-weight: 700;
color: var(--pro-primary);
line-height: 1.5;
margin: 0 0 var(--pro-space-3);
letter-spacing: -0.01em;
}
.lp-problem__desc {
font-size: 14px;
color: var(--pro-text-mute);
line-height: 1.75;
margin: 0;
}
.lp-problem__solve {
margin-top: var(--pro-space-12);
text-align: center;
}
.lp-problem__solve-arrow {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: var(--pro-space-3);
}
.lp-problem__solve-arrow svg {
width: 32px; height: 32px;
stroke: var(--pro-red);
stroke-width: 2;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
animation: bounce-y 2s ease-in-out infinite;
}
@keyframes bounce-y {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(6px); }
}
.lp-problem__solve-text {
margin: var(--pro-space-3) 0 0;
font-family: var(--pro-font-display);
font-size: clamp(20px, 2.5vw, 28px);
font-weight: 900;
color: var(--pro-primary);
line-height: 1.4;
letter-spacing: -0.01em;
text-wrap: balance;
}
.lp-problem__solve-text strong {
background: linear-gradient(135deg, var(--pro-orange) 0%, var(--pro-red) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* ============================================================
シンプル訴求 (Hero 下、5 項目)
============================================================ */
.lp-promise {
max-width: 1180px;
margin: var(--pro-space-12) auto var(--pro-space-8);
padding: 0 var(--pro-space-6);
}
.lp-promise__title {
text-align: center;
font-family: var(--pro-font-display);
font-size: clamp(22px, 3vw, 32px);
font-weight: 700;
color: var(--pro-primary);
letter-spacing: -0.02em;
line-height: 1.3;
margin: 0 0 var(--pro-space-3);
}
.lp-promise__lead {
text-align: center;
font-size: var(--pro-text-body-lg);
color: var(--pro-text-mute);
max-width: 720px;
margin: 0 auto var(--pro-space-8);
line-height: 1.7;
}
.lp-promise__lead strong {
color: var(--pro-primary);
font-weight: 700;
background: linear-gradient(180deg, transparent 62%, var(--pro-accent-soft) 62%);
padding: 0 2px;
}
.lp-promise__grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: var(--pro-space-4);
align-items: start;
}
@media (max-width: 900px) {
.lp-promise__grid { grid-template-columns: repeat(2, 1fr); gap: var(--pro-space-6); }
}
@media (max-width: 480px) {
.lp-promise__grid { grid-template-columns: 1fr; }
}
.lp-promise__item {
text-align: center;
padding: var(--pro-space-3);
}
.lp-promise__icon {
width: 64px; height: 64px;
margin: 0 auto var(--pro-space-3);
border-radius: 50%;
background:
radial-gradient(circle at 30% 30%, var(--pro-accent-soft) 0%, #fff 70%),
linear-gradient(135deg, var(--pro-accent-soft) 0%, #fff 100%);
border: 1px solid rgba(184, 134, 44, 0.16);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--pro-primary);
box-shadow:
0 4px 12px -2px var(--pro-shadow-tint-gold),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
transition: transform 0.3s var(--pro-tr-spring), color 0.2s var(--pro-tr);
}
.lp-promise__item:hover .lp-promise__icon {
transform: translateY(-3px) scale(1.05);
color: var(--pro-accent-dark);
}
.lp-promise__label {
font-family: var(--pro-font-body);
font-size: 15px;
font-weight: 700;
color: var(--pro-primary);
line-height: 1.4;
margin: 0 0 6px;
}
.lp-promise__sub {
font-size: 12px;
color: var(--pro-text-mute);
line-height: 1.6;
margin: 0;
}
/* ============================================================
ListGene 拡張検索UI（v5）
============================================================ */
.lg-ai-search-box {
background: linear-gradient(135deg, #f0f5ff 0%, #fff 100%);
border: 1px solid #c7d2fe;
border-radius: var(--pro-radius);
padding: 14px;
margin-bottom: 14px;
}
.lg-ai-search-box__label {
display: flex; align-items: center; gap: 6px;
font-size: 13px;
color: var(--pro-primary);
margin-bottom: 8px;
}
.lg-ai-textarea {
resize: vertical;
min-height: 50px;
font-size: 13px;
}
.lg-ai-quick-tags {
display: flex; flex-wrap: wrap; gap: 4px;
margin-top: 10px;
}
.lg-ai-conditions {
margin-top: 10px;
padding: 8px 10px;
background: rgba(99,102,241,0.08);
border-left: 3px solid #6366f1;
border-radius: 4px;
font-size: 11px;
color: #4338ca;
line-height: 1.5;
}
.lg-ai-source-company {
margin-top: 6px;
padding: 8px 10px;
background: rgba(16,185,129,0.08);
border-left: 3px solid #10b981;
border-radius: 4px;
font-size: 11px;
color: #065f46;
}
.lg-filter-section {
border: 1px solid var(--pro-border);
border-radius: 8px;
padding: 0;
margin-bottom: 10px;
background: #fff;
}
.lg-filter-section > summary {
list-style: none;
cursor: pointer;
padding: 10px 14px;
font-size: 13px;
font-weight: 700;
color: var(--pro-primary);
user-select: none;
position: relative;
border-radius: 8px;
}
.lg-filter-section > summary::-webkit-details-marker { display: none; }
.lg-filter-section > summary::after {
content: "▼";
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%) rotate(-90deg);
font-size: 9px;
color: var(--pro-text-mute);
transition: transform 0.15s;
}
.lg-filter-section[open] > summary::after {
transform: translateY(-50%) rotate(0deg);
}
.lg-filter-section[open] > summary {
border-bottom: 1px solid var(--pro-border);
background: var(--pro-bg-soft);
}
.lg-filter-section > *:not(summary) {
margin: 8px 14px 14px;
}
.lg-filter-section > *:not(summary):first-of-type {
margin-top: 12px;
}
.pro-filter-group__sublabel {
font-size: 11px;
font-weight: 600;
color: var(--pro-text-mute);
margin-bottom: 4px;
letter-spacing: 0.03em;
}
.lg-quick-tags-row {
display: flex; flex-wrap: wrap; gap: 4px;
margin-top: 8px;
}
.lg-quick-tag {
padding: 3px 9px;
background: #fff;
border: 1px solid var(--pro-border);
border-radius: 999px;
font-size: 11px;
cursor: pointer;
color: var(--pro-text);
transition: all 0.15s;
}
.lg-quick-tag:hover {
background: var(--pro-primary);
color: #fff;
border-color: var(--pro-primary);
}
.lg-area-chips {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 4px;
}
.lg-area-chips button {
padding: 5px 8px;
background: #fff;
border: 1px solid var(--pro-border);
border-radius: 5px;
font-size: 11px;
cursor: pointer;
transition: all 0.15s;
}
.lg-area-chips button:hover {
background: var(--pro-bg-soft);
border-color: var(--pro-primary-light);
}
.lg-area-chips button.is-on {
background: var(--pro-primary);
color: #fff;
border-color: var(--pro-primary);
}
.lg-radio-row {
display: flex; gap: 12px; flex-wrap: wrap;
font-size: 12px;
}
.lg-radio-row label {
cursor: pointer;
display: flex; align-items: center; gap: 3px;
}
.lg-chip-row {
display: flex; flex-wrap: wrap; gap: 4px;
}
.lg-chip {
padding: 4px 10px;
background: #fff;
border: 1px solid var(--pro-border);
border-radius: 999px;
font-size: 11px;
cursor: pointer;
transition: all 0.15s;
}
.lg-chip:hover {
background: var(--pro-bg-soft);
border-color: var(--pro-primary-light);
}
.lg-chip.is-on {
background: var(--pro-primary);
color: #fff;
border-color: var(--pro-primary);
}
.lg-rank-chips {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 4px;
}
.lg-rank-chip {
padding: 8px 4px;
border: 2px solid var(--pro-border);
background: #fff;
border-radius: 6px;
font-weight: 800;
font-size: 14px;
cursor: pointer;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
transition: all 0.15s;
}
.lg-rank-chip small {
font-size: 9px;
font-weight: 500;
opacity: 0.7;
}
.lg-rank-S { color: #b8862c; }
.lg-rank-A { color: #4338ca; }
.lg-rank-B { color: #065f46; }
.lg-rank-C { color: #6b7280; }
.lg-rank-D { color: #9ca3af; }
.lg-rank-chip.is-on { background: var(--pro-primary); color: #fff; border-color: var(--pro-primary); }
.lg-rank-chip.is-on small { color: #fff; opacity: 0.85; }
.lg-checkbox-row {
display: flex; align-items: center; gap: 6px;
font-size: 12px;
padding: 5px 0;
cursor: pointer;
}
.lg-year-row {
display: flex; align-items: center; gap: 6px;
}
.lg-year-row input { font-size: 12px; padding: 6px 8px; }
.lg-year-row span { color: var(--pro-text-mute); }
/* リスジェネ結果テーブルの拡張カラム表示 */
.lg-rank-badge {
display: inline-block;
width: 22px; height: 22px; line-height: 22px;
border-radius: 4px;
font-weight: 800;
font-size: 11px;
text-align: center;
color: #fff;
}
.lg-rank-badge--S { background: linear-gradient(135deg, #b8862c, #f5d076); }
.lg-rank-badge--A { background: linear-gradient(135deg, #4338ca, #818cf8); }
.lg-rank-badge--B { background: linear-gradient(135deg, #065f46, #10b981); }
.lg-rank-badge--C { background: linear-gradient(135deg, #6b7280, #9ca3af); }
.lg-rank-badge--D { background: linear-gradient(135deg, #9ca3af, #d1d5db); color: #4b5563; }
.lg-dx-mini {
display: inline-block;
font-size: 10px;
padding: 1px 5px;
border-radius: 3px;
background: var(--pro-bg-soft);
color: var(--pro-text-mute);
margin-left: 3px;
}
/* 企業詳細モーダル */
.lg-detail-grid {
display: grid;
grid-template-columns: 130px 1fr;
gap: 8px 14px;
font-size: 13px;
align-items: start;
}
.lg-detail-grid dt {
font-weight: 700;
color: var(--pro-text-mute);
text-align: right;
padding: 6px 0;
}
.lg-detail-grid dd {
margin: 0;
padding: 6px 0;
color: var(--pro-text);
border-bottom: 1px dashed var(--pro-border);
}
.lg-detail-section-title {
font-size: 13px;
font-weight: 800;
color: var(--pro-primary);
margin: 16px 0 8px;
padding-bottom: 4px;
border-bottom: 2px solid var(--pro-accent);
}
/* ============================================================
UX強化機能（v6: 8セット）
============================================================ */
/* 1. アクティブフィルタチップ */
.lg-active-filters {
display: flex; flex-wrap: wrap; gap: 6px;
padding: 10px 0;
margin-bottom: 10px;
border-bottom: 1px dashed var(--pro-border);
}
.lg-active-filter-chip {
display: inline-flex; align-items: center; gap: 4px;
padding: 4px 10px 4px 12px;
background: linear-gradient(135deg, #f0f5ff, #fff);
border: 1px solid #c7d2fe;
border-radius: 999px;
font-size: 12px;
color: var(--pro-primary);
font-weight: 600;
cursor: default;
}
.lg-active-filter-chip__remove {
width: 16px; height: 16px;
border-radius: 50%;
background: rgba(0,0,0,0.08);
border: none;
color: var(--pro-text);
font-size: 10px;
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
margin-left: 2px;
}
.lg-active-filter-chip__remove:hover {
background: var(--pro-danger);
color: #fff;
}
.lg-active-filters-clear {
margin-left: auto;
font-size: 12px;
color: var(--pro-text-mute);
background: none;
border: none;
cursor: pointer;
text-decoration: underline;
}
/* 2. AIマッチ度入力 */
.lg-ai-match-box {
background: linear-gradient(135deg, #fffbeb 0%, #fff 100%);
border: 1px solid #fde68a;
border-radius: var(--pro-radius);
padding: 14px;
margin-bottom: 14px;
}
.lg-ai-match-box__title {
display: flex; align-items: center; gap: 6px;
font-size: 13px;
font-weight: 700;
color: #92400e;
margin-bottom: 6px;
}
.lg-ai-match-row {
display: flex; gap: 6px; align-items: stretch;
}
.lg-ai-match-row textarea {
flex: 1;
min-height: 38px;
resize: vertical;
}
.lg-ai-match-row button {
white-space: nowrap;
}
.lg-match-score {
display: inline-flex; align-items: center; justify-content: center;
width: 38px; height: 38px;
border-radius: 50%;
font-weight: 800;
font-size: 13px;
color: #fff;
position: relative;
}
.lg-match-score--high { background: linear-gradient(135deg, #10b981, #34d399); }
.lg-match-score--mid { background: linear-gradient(135deg, #f59e0b, #fbbf24); }
.lg-match-score--low { background: linear-gradient(135deg, #6b7280, #9ca3af); }
.lg-match-score--none { background: var(--pro-bg-soft); color: var(--pro-text-mute); border: 1px dashed var(--pro-border); }
.lg-match-reason {
font-size: 10px;
color: var(--pro-text-mute);
line-height: 1.4;
margin-top: 2px;
max-width: 120px;
}
/* 3. マイ検索 */
.lg-saved-searches {
display: flex; flex-wrap: wrap; gap: 4px;
margin-top: 8px;
}
.lg-saved-search-chip {
display: inline-flex; align-items: center; gap: 4px;
padding: 5px 10px;
background: #fff;
border: 1px solid var(--pro-border);
border-radius: 6px;
font-size: 11px;
cursor: pointer;
transition: all 0.15s;
position: relative;
}
.lg-saved-search-chip:hover {
border-color: var(--pro-primary);
background: var(--pro-bg-soft);
}
.lg-saved-search-chip__pin {
color: var(--pro-accent);
font-size: 9px;
}
.lg-saved-search-chip__count {
background: var(--pro-bg-soft);
color: var(--pro-text-mute);
padding: 1px 5px;
border-radius: 999px;
font-size: 9px;
margin-left: 2px;
}
.lg-saved-search-add {
background: var(--pro-primary);
color: #fff;
border: none;
padding: 5px 10px;
border-radius: 6px;
cursor: pointer;
font-size: 11px;
font-weight: 600;
}
/* 4. 重複マーキング */
.lg-dup-badges {
display: inline-flex; gap: 3px; flex-wrap: wrap;
margin-top: 2px;
}
.lg-dup-badge {
display: inline-block;
padding: 1px 6px;
border-radius: 3px;
font-size: 9px;
font-weight: 700;
}
.lg-dup-badge--saved { background: #dbeafe; color: #1e40af; }
.lg-dup-badge--sent { background: #fee2e2; color: #991b1b; }
.lg-dup-badge--ng { background: #f3f4f6; color: #6b7280; }
/* 6. 充実度メーター */
.lg-density-meter {
display: inline-block;
width: 60px; height: 6px;
background: var(--pro-bg-soft);
border-radius: 3px;
overflow: hidden;
vertical-align: middle;
margin-left: 4px;
}
.lg-density-meter__bar {
height: 100%;
background: linear-gradient(90deg, #10b981, #34d399);
transition: width 0.3s;
}
.lg-density-meter__bar--mid { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.lg-density-meter__bar--low { background: linear-gradient(90deg, #ef4444, #f87171); }
/* 7. ソート切替 */
.lg-sort-row {
display: flex; align-items: center; gap: 8px;
font-size: 12px;
color: var(--pro-text-mute);
}
.lg-sort-row select {
padding: 4px 8px;
font-size: 12px;
border: 1px solid var(--pro-border);
border-radius: 4px;
background: #fff;
}
/* 8. 除外フィルタ */
.lg-exclude-section {
background: #fef2f2;
border-color: #fecaca !important;
}
.lg-exclude-section > summary {
color: #991b1b !important;
}
/* ============================================================
Phase 6.7: 控えめな「？」ヒントマーカー
ユーザーが悩みそうな場所にさり気なく配置する説明ヘルパー
- .pro-q: ホバーで title 属性が表示される軽量版（短文向け）
- .pro-q-details: クリックで展開する詳細ポップアップ版（長文向け）
============================================================ */
.pro-q {
display: inline-flex;
align-items: center;
justify-content: center;
width: 15px; height: 15px;
border-radius: 50%;
background: transparent;
border: 1px solid var(--pro-border-strong);
color: var(--pro-text-soft);
font-size: 9px;
font-weight: 700;
cursor: pointer; /* v9.6: クリックでも吹き出し出すのでカーソルを pointer に */
margin-left: 5px;
vertical-align: middle;
transition: all 0.15s var(--pro-tr);
text-decoration: none;
font-family: inherit;
line-height: 1;
user-select: none;
flex-shrink: 0;
}
.pro-q:hover {
background: var(--pro-primary);
color: #fff;
border-color: var(--pro-primary);
}
.pro-q::after { content: "?"; }
/* v9.6: .pro-q クリックで動的生成される吹き出し（.pro-q-details__body スタイルを共有） */
.pro-q-bubble {
/* .pro-q-details__body と同じ position:fixed / z-index:9999 / 影 / 角丸 */
}
/* ----- クリック展開式（長文向け） ----- */
.pro-q-details {
display: inline-block;
vertical-align: middle;
margin-left: 5px;
position: relative;
}
.pro-q-details > summary {
list-style: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 15px; height: 15px;
border-radius: 50%;
background: transparent;
border: 1px solid var(--pro-border-strong);
color: var(--pro-text-soft);
font-size: 9px;
font-weight: 700;
cursor: pointer;
transition: all 0.15s var(--pro-tr);
user-select: none;
line-height: 1;
}
.pro-q-details > summary::-webkit-details-marker { display: none; }
.pro-q-details > summary::marker { content: ""; }
.pro-q-details > summary::after { content: "?"; }
.pro-q-details > summary:hover {
background: var(--pro-primary);
color: #fff;
border-color: var(--pro-primary);
}
.pro-q-details[open] > summary {
background: var(--pro-primary);
color: #fff;
border-color: var(--pro-primary);
}
.pro-q-details__body {
/* v9.5: position:fixed で他要素の overflow:hidden や transform 祖先に影響されず常に最前面 */
position: fixed;
z-index: 9999;
top: 0; /* JS が toggle 時に getBoundingClientRect で再計算 */
left: 0; /* 同上 */
background: #fff;
border: 1px solid var(--pro-border);
border-radius: 10px;
padding: 14px 16px;
font-size: 12px;
line-height: 1.75;
color: var(--pro-text);
box-shadow:
0 1px 2px var(--pro-shadow-tint),
0 18px 48px -8px rgba(14, 19, 32, 0.30),
0 8px 24px -6px var(--pro-shadow-tint-strong);
width: min(360px, 90vw);
max-width: 360px;
font-weight: 400;
text-align: left;
white-space: normal;
/* JS 計算前のチラ見え防止 */
visibility: hidden;
}
.pro-q-details[open] > .pro-q-details__body {
visibility: visible;
}
/* 吹き出し三角は fixed 配置になると summary と離れた位置に出る可能性が高いため隠す */
.pro-q-details__body::before { display: none; }
.pro-q-details__body strong {
color: var(--pro-primary);
font-weight: 700;
}
.pro-q-details__body code {
background: var(--pro-bg-soft);
padding: 1px 5px;
border-radius: 3px;
font-size: 11px;
color: var(--pro-primary);
border: 1px solid var(--pro-border);
}
.pro-q-details__body p { margin: 0 0 8px; }
.pro-q-details__body p:last-child { margin-bottom: 0; }
.pro-q-details__body ul,
.pro-q-details__body ol {
margin: 0 0 8px;
padding-left: 18px;
line-height: 1.7;
}
.pro-q-details__body li { margin-bottom: 3px; }
/* 右寄せ・左寄せバリエーション（画面端で切れないように） */
.pro-q-details--right .pro-q-details__body {
left: auto; right: 0; transform: none;
}
.pro-q-details--right .pro-q-details__body::before {
left: auto; right: 6px; transform: rotate(45deg);
}
.pro-q-details--left .pro-q-details__body {
left: 0; transform: none;
}
.pro-q-details--left .pro-q-details__body::before {
left: 6px; transform: rotate(45deg);
}
/* ============================================================
Phase 5: High-end Admin Utilities
管理画面に LP と同レベルの「high-end agency」感を持ち込むための
追加ユーティリティ群。LP の lp-hero / lp-feature 等を参考にしつつ、
ツール用途に最適化（過度な装飾はせずデータの可読性を最優先）。
============================================================ */
/* ----- Live status pulse (LP の hero-mockup-status と同思想) ----- */
.pro-livedot {
display: inline-flex; align-items: center; gap: 8px;
font-size: 12px; font-weight: 600;
color: var(--pro-text-mute);
letter-spacing: 0.04em;
}
.pro-livedot::before {
content: "";
width: 8px; height: 8px;
border-radius: 50%;
background: var(--pro-success);
box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.16);
animation: pro-pulse 1.8s ease-in-out infinite;
flex-shrink: 0;
}
.pro-livedot--idle::before {
background: var(--pro-text-soft);
box-shadow: 0 0 0 4px rgba(156, 163, 175, 0.16);
animation: none;
}
.pro-livedot--warn::before {
background: var(--pro-warning);
box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.18);
}
.pro-livedot--danger::before {
background: var(--pro-danger);
box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.16);
}
@keyframes pro-pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.35); opacity: 0.6; }
}
/* ----- Eyebrow (LP の lp-eyebrow の管理画面版) ----- */
.pro-eyebrow {
display: inline-flex; align-items: center; gap: 6px;
font-size: 11px;
font-weight: 700;
color: var(--pro-accent-dark);
letter-spacing: 0.18em;
text-transform: uppercase;
font-family: var(--pro-font-body);
}
.pro-eyebrow::before {
content: "";
width: 18px; height: 1px;
background: var(--pro-accent-dark);
opacity: 0.6;
}
.pro-eyebrow--mute { color: var(--pro-text-mute); }
.pro-eyebrow--mute::before { background: var(--pro-text-mute); }
.pro-eyebrow--primary { color: var(--pro-primary); }
.pro-eyebrow--primary::before { background: var(--pro-primary); }
/* ----- Display number (LP hero h1 風の巨大数字) ----- */
.pro-display {
font-family: var(--pro-font-display);
font-weight: 900;
color: var(--pro-primary);
letter-spacing: -0.02em;
line-height: 1;
font-variant-numeric: tabular-nums;
}
.pro-display--xl { font-size: clamp(40px, 5vw, 56px); }
.pro-display--lg { font-size: clamp(32px, 4vw, 44px); }
.pro-display--md { font-size: clamp(24px, 3vw, 32px); }
/* ----- Premium hero card (管理画面トップに置く大型KPIカード) ----- */
.pro-hero-card {
position: relative;
background: linear-gradient(135deg, #ffffff 0%, #f7f9ff 65%, #fff8e6 130%);
border: 1px solid var(--pro-border);
border-radius: var(--pro-radius-lg);
padding: clamp(20px, 3vw, 32px) clamp(20px, 3vw, 36px);
margin-bottom: var(--pro-space-6);
box-shadow:
0 1px 2px var(--pro-shadow-tint),
0 20px 50px -16px rgba(30, 58, 138, 0.12);
overflow: hidden;
}
.pro-hero-card::before {
content: "";
position: absolute;
top: -120px; right: -80px;
width: 360px; height: 360px;
background: radial-gradient(circle, rgba(255, 209, 102, 0.22), transparent 70%);
pointer-events: none;
}
.pro-hero-card::after {
content: "";
position: absolute;
bottom: -80px; left: -40px;
width: 240px; height: 240px;
background: radial-gradient(circle, rgba(41, 128, 185, 0.10), transparent 70%);
pointer-events: none;
}
.pro-hero-card__inner {
position: relative; z-index: 1;
}
.pro-hero-card__head {
display: flex; align-items: flex-start;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
margin-bottom: 16px;
}
.pro-hero-card__title {
font-family: var(--pro-font-display);
font-size: clamp(22px, 3vw, 30px);
font-weight: 900;
color: var(--pro-primary);
letter-spacing: -0.015em;
margin: 8px 0 6px;
line-height: 1.2;
}
.pro-hero-card__lead {
font-size: 14px;
color: var(--pro-text-mute);
margin: 0;
max-width: 640px;
line-height: 1.7;
}
.pro-hero-card__actions {
display: flex; gap: 10px;
flex-wrap: wrap;
flex-shrink: 0;
}
/* ----- KPI tile (hero-card 内部 or 単独で並べる) ----- */
.pro-tile-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 12px;
margin-top: 12px;
}
.pro-tile {
position: relative;
background: rgba(255, 255, 255, 0.85);
border: 1px solid rgba(229, 231, 235, 0.7);
border-radius: var(--pro-radius);
padding: 14px 16px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
transition: all 0.2s var(--pro-tr);
}
.pro-tile:hover {
border-color: var(--pro-primary-light);
transform: translateY(-2px);
box-shadow: var(--pro-shadow);
}
.pro-tile__label {
font-size: 11px;
color: var(--pro-text-mute);
letter-spacing: 0.08em;
text-transform: uppercase;
font-weight: 600;
display: flex; align-items: center; gap: 6px;
}
.pro-tile__icon {
display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px;
border-radius: 6px;
background: var(--pro-bg-soft);
font-size: 12px;
}
.pro-tile__value {
font-family: var(--pro-font-display);
font-size: 26px;
font-weight: 900;
color: var(--pro-primary);
letter-spacing: -0.02em;
margin-top: 6px;
font-variant-numeric: tabular-nums;
line-height: 1.1;
}
.pro-tile__value small {
font-size: 12px;
color: var(--pro-text-mute);
font-weight: 500;
margin-left: 3px;
font-family: var(--pro-font-body);
}
.pro-tile__delta {
display: inline-flex; align-items: center; gap: 4px;
font-size: 11px;
font-weight: 700;
padding: 2px 7px;
border-radius: 999px;
margin-top: 6px;
}
.pro-tile__delta--up { color: var(--pro-success-fg); background: var(--pro-success-bg); }
.pro-tile__delta--down { color: var(--pro-danger-fg); background: var(--pro-danger-bg); }
.pro-tile__delta--flat { color: var(--pro-text-mute); background: #f3f4f6; }
.pro-tile--success { border-top: 3px solid var(--pro-success); }
.pro-tile--info { border-top: 3px solid var(--pro-info); }
.pro-tile--accent { border-top: 3px solid var(--pro-accent); }
.pro-tile--danger { border-top: 3px solid var(--pro-danger); }
/* ----- Reveal animation (scroll fade-in, IntersectionObserver で .is-revealed 付与) ----- */
.pro-reveal {
opacity: 0;
transform: translateY(16px);
transition: opacity 0.6s var(--pro-tr), transform 0.6s var(--pro-tr);
}
.pro-reveal.is-revealed,
.pro-reveal--shown {
opacity: 1;
transform: translateY(0);
}
.pro-stagger > * {
opacity: 0;
transform: translateY(12px);
animation: pro-stagger-in 0.55s var(--pro-tr) forwards;
}
.pro-stagger > *:nth-child(1) { animation-delay: 0.04s; }
.pro-stagger > *:nth-child(2) { animation-delay: 0.10s; }
.pro-stagger > *:nth-child(3) { animation-delay: 0.16s; }
.pro-stagger > *:nth-child(4) { animation-delay: 0.22s; }
.pro-stagger > *:nth-child(5) { animation-delay: 0.28s; }
.pro-stagger > *:nth-child(6) { animation-delay: 0.34s; }
.pro-stagger > *:nth-child(7) { animation-delay: 0.40s; }
.pro-stagger > *:nth-child(8) { animation-delay: 0.46s; }
@keyframes pro-stagger-in {
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.pro-reveal { opacity: 1; transform: none; transition: none; }
.pro-stagger > * { opacity: 1; transform: none; animation: none; }
.pro-livedot::before { animation: none; }
}
/* ----- Shimmer (loading skeleton + progress) ----- */
.pro-shimmer {
position: relative;
overflow: hidden;
background: linear-gradient(90deg, var(--pro-bg-soft) 0%, #f0f3f8 50%, var(--pro-bg-soft) 100%);
background-size: 200% 100%;
animation: pro-shimmer 1.4s linear infinite;
border-radius: var(--pro-radius-sm);
}
@keyframes pro-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* ----- Glow border (アクション CTA を強調) ----- */
.pro-glow {
position: relative;
isolation: isolate;
}
.pro-glow::before {
content: "";
position: absolute;
inset: -2px;
border-radius: inherit;
background: linear-gradient(135deg, var(--pro-primary), var(--pro-accent), var(--pro-red));
z-index: -1;
opacity: 0.0;
transition: opacity 0.3s ease;
filter: blur(8px);
}
.pro-glow:hover::before { opacity: 0.7; }
/* ----- Aurora background (ヒーロー領域用の柔らかいグラデ) ----- */
.pro-aurora {
position: relative;
background:
radial-gradient(ellipse 80% 50% at 20% 0%, rgba(41, 128, 185, 0.10), transparent 60%),
radial-gradient(ellipse 60% 50% at 80% 100%, rgba(255, 209, 102, 0.14), transparent 60%),
linear-gradient(180deg, #ffffff 0%, var(--pro-bg) 100%);
}
/* ----- Premium card frame ----- */
.pro-card--premium {
position: relative;
background: linear-gradient(135deg, #ffffff 0%, #fafbff 100%);
border: 1px solid transparent;
background-clip: padding-box;
box-shadow:
0 1px 2px var(--pro-shadow-tint),
0 30px 60px -16px rgba(30, 58, 138, 0.15);
}
.pro-card--premium::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: linear-gradient(135deg, var(--pro-primary), var(--pro-accent) 50%, var(--pro-primary));
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
/* ----- Empty state plus (SVG イラスト枠 + リッチ表現) ----- */
.pro-empty--rich {
text-align: center;
padding: clamp(40px, 6vw, 80px) clamp(24px, 4vw, 56px);
background: linear-gradient(180deg, #ffffff 0%, #fafbff 100%);
border: 1px dashed var(--pro-border-strong);
border-radius: var(--pro-radius-lg);
}
.pro-empty--rich__art {
width: clamp(120px, 14vw, 180px);
height: clamp(120px, 14vw, 180px);
margin: 0 auto 20px;
display: block;
opacity: 0.92;
}
.pro-empty--rich__title {
font-family: var(--pro-font-display);
font-size: clamp(20px, 2.5vw, 26px);
font-weight: 800;
color: var(--pro-primary);
letter-spacing: -0.015em;
margin: 0 0 8px;
}
.pro-empty--rich__lead {
font-size: 14px;
color: var(--pro-text-mute);
line-height: 1.7;
max-width: 480px;
margin: 0 auto 20px;
}
.pro-empty--rich__actions {
display: inline-flex; gap: 10px;
flex-wrap: wrap;
justify-content: center;
}
/* ----- Premium topbar (mainpane の上部を派手に) ----- */
.pro-mainpane__topbar--rich {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
padding: 18px 28px 14px;
border-bottom: 1px solid var(--pro-border);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.72));
backdrop-filter: saturate(150%) blur(10px);
-webkit-backdrop-filter: saturate(150%) blur(10px);
position: sticky; top: 0; z-index: 8;
}
.pro-mainpane__topbar--rich .pro-mainpane__title {
font-family: var(--pro-font-display);
font-weight: 900;
font-size: 22px;
color: var(--pro-primary);
letter-spacing: -0.01em;
margin: 0;
line-height: 1.25;
}
.pro-mainpane__topbar--rich .pro-mainpane__subtitle {
font-size: 12px;
color: var(--pro-text-mute);
margin-top: 4px;
letter-spacing: 0.01em;
}
.pro-topbar-meta {
display: inline-flex; align-items: center; gap: 8px;
font-size: 12px;
color: var(--pro-text-mute);
margin-top: 6px;
}
.pro-topbar-meta__sep {
width: 4px; height: 4px;
border-radius: 50%;
background: var(--pro-text-soft);
display: inline-block;
}
.pro-topbar-actions {
display: flex; align-items: center; gap: 10px;
flex-shrink: 0;
}
/* ----- Hero counter (KPI 用 — テキスト + 数字 横並び) ----- */
.pro-hero-counter {
display: flex; align-items: baseline; gap: 8px;
}
.pro-hero-counter__num {
font-family: var(--pro-font-display);
font-size: clamp(32px, 4vw, 44px);
font-weight: 900;
color: var(--pro-primary);
letter-spacing: -0.02em;
line-height: 1;
font-variant-numeric: tabular-nums;
}
.pro-hero-counter__unit {
font-size: 13px;
color: var(--pro-text-mute);
font-weight: 600;
}
/* ----- Pill badges (小型ピル) ----- */
.pro-pill {
display: inline-flex; align-items: center; gap: 4px;
padding: 4px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.02em;
background: var(--pro-bg-soft);
color: var(--pro-text-mute);
border: 1px solid var(--pro-border);
}
.pro-pill--primary { background: rgba(26, 50, 99, 0.08); color: var(--pro-primary); border-color: rgba(26, 50, 99, 0.18); }
.pro-pill--success { background: var(--pro-success-bg); color: var(--pro-success-fg); border-color: rgba(16, 185, 129, 0.25); }
.pro-pill--warn { background: var(--pro-warning-bg); color: var(--pro-warning-fg); border-color: rgba(245, 158, 11, 0.30); }
.pro-pill--danger { background: var(--pro-danger-bg); color: var(--pro-danger-fg); border-color: rgba(239, 68, 68, 0.25); }
.pro-pill--gold { background: var(--pro-accent-soft); color: var(--pro-accent-dark); border-color: rgba(255, 209, 102, 0.55); }
/* ----- Action row (大型アクションボタン) ----- */
.pro-action-row {
display: flex; gap: 10px;
flex-wrap: wrap;
align-items: center;
margin-top: var(--pro-space-4);
}
/* ----- Pro hero mini-mockup (login や lists で「動いてる感」を演出) ----- */
.pro-mini-mockup {
background: rgba(255, 255, 255, 0.96);
border-radius: var(--pro-radius-lg);
overflow: hidden;
box-shadow:
0 4px 8px rgba(0, 0, 0, 0.06),
0 30px 60px -16px rgba(30, 58, 138, 0.20);
border: 1px solid rgba(229, 231, 235, 0.6);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.pro-mini-mockup__head {
display: flex; align-items: center; justify-content: space-between;
padding: 12px 18px;
background: var(--pro-bg-soft);
border-bottom: 1px solid var(--pro-border);
}
.pro-mini-mockup__head-tag {
font-size: 10px;
font-weight: 700;
color: var(--pro-accent-dark);
letter-spacing: 0.18em;
text-transform: uppercase;
}
.pro-mini-mockup__body {
padding: 20px 22px;
}
.pro-mini-mockup__row {
display: flex; align-items: center; justify-content: space-between;
padding: 10px 12px;
border-radius: 8px;
margin-bottom: 6px;
font-size: 12px;
background: var(--pro-bg-soft);
transition: background 0.2s ease;
}
.pro-mini-mockup__row:hover { background: #eef2fa; }
.pro-mini-mockup__row strong {
font-weight: 700;
color: var(--pro-text);
font-size: 12px;
}
.pro-mini-mockup__row .pro-badge { font-size: 10px; padding: 2px 6px; }
/* ----- Live ticker (流れる文字のリスト) ----- */
.pro-ticker {
position: relative;
height: 30px;
overflow: hidden;
border-top: 1px solid var(--pro-border);
padding-top: 8px;
margin-top: 12px;
}
.pro-ticker__inner {
display: flex; flex-direction: column;
animation: pro-ticker 9s linear infinite;
}
.pro-ticker__item {
display: flex; align-items: center; gap: 8px;
height: 30px;
font-size: 12px;
color: var(--pro-text-mute);
}
.pro-ticker__item strong {
color: var(--pro-primary);
font-weight: 600;
font-size: 12px;
}
@keyframes pro-ticker {
0% { transform: translateY(0); }
100% { transform: translateY(-100%); }
}
/* ----- Section eyebrow + heading 用ヘルパー ----- */
.pro-section-head {
display: flex; flex-direction: column;
gap: 6px;
margin-bottom: var(--pro-space-6);
}
.pro-section-head__title {
font-family: var(--pro-font-display);
font-weight: 900;
font-size: clamp(20px, 2.6vw, 26px);
color: var(--pro-primary);
letter-spacing: -0.01em;
line-height: 1.3;
margin: 0;
}
.pro-section-head__sub {
font-size: 13px;
color: var(--pro-text-mute);
margin: 0;
line-height: 1.65;
max-width: 720px;
}
/* ----- Compact stat chip ----- */
.pro-stat-chip {
display: inline-flex; align-items: baseline; gap: 6px;
padding: 6px 12px;
background: rgba(255, 255, 255, 0.85);
border: 1px solid var(--pro-border);
border-radius: 999px;
font-size: 12px;
}
.pro-stat-chip strong {
font-family: var(--pro-font-display);
font-weight: 800;
color: var(--pro-primary);
font-size: 14px;
font-variant-numeric: tabular-nums;
}
.pro-stat-chip small {
color: var(--pro-text-mute);
font-weight: 500;
}
/* ----- Polish: subtle row hover for data tables ----- */
.pro-data-table tbody tr {
transition: background 0.15s ease;
}
.pro-data-table tbody tr:hover {
background: linear-gradient(90deg, transparent, var(--pro-bg-soft), transparent);
}
/* ----- Polish: filterpane / sidenav の影を強化 ----- */
.pro-filterpane {
box-shadow:
1px 0 0 var(--pro-border),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
/* ----- Polish: マウスホバー時の card lift を追加 ----- */
.pro-card.pro-lift {
transition: transform 0.25s var(--pro-tr), box-shadow 0.25s var(--pro-tr);
}
.pro-card.pro-lift:hover {
transform: translateY(-3px);
box-shadow: var(--pro-shadow-lg);
}
/* ----- Hero CTA (resp 用 large CTA ボタン) ----- */
.pro-cta-large {
display: inline-flex; align-items: center; gap: 10px;
padding: 14px 28px;
background: linear-gradient(135deg, var(--pro-orange), var(--pro-red));
color: #fff;
border-radius: var(--pro-radius);
font-weight: 700;
font-size: 15px;
box-shadow: 0 8px 25px rgba(215, 38, 33, 0.30);
transition: all 0.3s ease;
text-decoration: none;
}
.pro-cta-large:hover {
transform: translateY(-3px);
box-shadow: 0 14px 35px rgba(215, 38, 33, 0.45);
color: #fff;
}
.pro-cta-large svg {
width: 18px; height: 18px;
stroke: currentColor;
stroke-width: 2;
fill: none;
}
/* ----- Brand showcase split (login や setup-guide で「左ヒーロー＋右フォーム」レイアウト) ----- */
.pro-split {
display: grid;
grid-template-columns: 1.05fr 0.95fr;
gap: clamp(24px, 4vw, 60px);
align-items: stretch;
min-height: calc(100vh - 80px);
padding: clamp(24px, 4vw, 48px);
}
.pro-split__hero {
position: relative;
border-radius: var(--pro-radius-xl);
padding: clamp(28px, 4vw, 48px);
background:
radial-gradient(ellipse 80% 50% at 80% 20%, rgba(255, 209, 102, 0.18), transparent 60%),
radial-gradient(ellipse 60% 50% at 20% 80%, rgba(41, 128, 185, 0.16), transparent 60%),
linear-gradient(160deg, var(--pro-primary) 0%, var(--pro-primary-deep) 100%);
color: #fff;
display: flex; flex-direction: column;
justify-content: space-between;
overflow: hidden;
}
.pro-split__hero::before {
content: "";
position: absolute;
top: -50%; left: -30%;
width: 80%; height: 100%;
background: radial-gradient(circle, rgba(255, 209, 102, 0.10), transparent 50%);
pointer-events: none;
animation: pro-aurora-drift 22s ease-in-out infinite alternate;
}
@keyframes pro-aurora-drift {
0% { transform: translate(0, 0) rotate(0deg); }
100% { transform: translate(15%, -10%) rotate(20deg); }
}
.pro-split__hero > * { position: relative; z-index: 1; }
.pro-split__brand {
display: flex; align-items: center; gap: 12px;
margin-bottom: clamp(20px, 3vw, 32px);
}
.pro-split__brand img { height: 36px; width: auto; filter: brightness(0) invert(1); opacity: 0.95; }
.pro-split__brand-name {
font-family: var(--pro-font-display);
font-weight: 900; font-size: 17px;
letter-spacing: -0.005em;
}
.pro-split__copy {
flex: 1;
display: flex; flex-direction: column;
justify-content: center;
}
.pro-split__eyebrow {
display: inline-flex; align-items: center; gap: 8px;
font-size: 11px;
font-weight: 700;
color: var(--pro-accent);
letter-spacing: 0.2em;
text-transform: uppercase;
margin-bottom: 14px;
}
.pro-split__eyebrow::before {
content: "";
width: 22px; height: 1px;
background: var(--pro-accent);
}
.pro-split__title {
font-family: var(--pro-font-display);
font-weight: 900;
font-size: clamp(28px, 4vw, 42px);
line-height: 1.18;
letter-spacing: -0.02em;
color: #fff;
margin: 0 0 16px;
text-wrap: balance;
}
.pro-split__title strong {
color: var(--pro-accent);
font-weight: 900;
}
.pro-split__lead {
font-size: 15px;
line-height: 1.75;
color: rgba(255, 255, 255, 0.82);
margin: 0 0 28px;
max-width: 480px;
}
.pro-split__highlights {
list-style: none;
padding: 0; margin: 0 0 28px;
display: grid;
grid-template-columns: 1fr;
gap: 8px;
}
.pro-split__highlight {
display: flex; align-items: center; gap: 12px;
padding: 10px 14px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: 12px;
font-size: 13px;
color: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.pro-split__highlight::before {
content: "✓";
width: 22px; height: 22px;
border-radius: 50%;
background: rgba(255, 209, 102, 0.20);
color: var(--pro-accent);
display: inline-flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 700;
flex-shrink: 0;
}
.pro-split__foot {
display: flex; align-items: center; gap: 16px;
font-size: 11px;
color: rgba(255, 255, 255, 0.55);
letter-spacing: 0.04em;
}
.pro-split__foot a { color: rgba(255, 255, 255, 0.85); text-decoration: underline; }
.pro-split__form {
display: flex; flex-direction: column;
justify-content: center;
padding: clamp(20px, 3vw, 40px) clamp(20px, 4vw, 48px);
background: #fff;
border-radius: var(--pro-radius-xl);
border: 1px solid var(--pro-border);
box-shadow:
0 1px 2px var(--pro-shadow-tint),
0 30px 60px -20px rgba(30, 58, 138, 0.18);
}
@media (max-width: 960px) {
.pro-split {
grid-template-columns: 1fr;
padding: 16px;
min-height: auto;
}
.pro-split__hero {
border-radius: var(--pro-radius-lg);
padding: 28px 24px;
}
}
/* ----- Polish: pro-source-tab を more clickable に ----- */
.pro-source-tabs {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
padding: 6px;
background: var(--pro-bg-soft);
border-radius: var(--pro-radius);
border: 1px solid var(--pro-border);
}
.pro-source-tab {
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: 4px;
padding: 10px 8px;
border: 1px solid transparent;
border-radius: var(--pro-radius-sm);
background: transparent;
color: var(--pro-text-mute);
font-size: 11px;
font-family: inherit;
font-weight: 600;
cursor: pointer;
transition: all 0.18s var(--pro-tr);
}
.pro-source-tab:hover {
background: rgba(255, 255, 255, 0.7);
color: var(--pro-primary);
}
.pro-source-tab.is-active {
background: #fff;
color: var(--pro-primary);
border-color: var(--pro-primary-light);
box-shadow: 0 2px 6px rgba(26, 50, 99, 0.08);
}
.pro-source-tab__icon {
font-size: 18px;
line-height: 1;
}
.pro-source-tab__label { line-height: 1.3; text-align: center; }
/* v13.1 (2026-05-25): CSV/Excel タブは 3 つ目で 1 列だけ余って空白が出るため、
全幅 (2 列分) を占有させて内部レイアウトを横並び (アイコン左・ラベル右) に変更。 */
.pro-source-tabs > .pro-source-tab[data-source="csv"] {
grid-column: 1 / -1;
flex-direction: row;
gap: 10px;
padding: 8px 14px;
}
.pro-source-tabs > .pro-source-tab[data-source="csv"] .pro-source-tab__label {
text-align: left;
}
/* ==========================================================================
v9.13: モバイル完全レスポンシブ強化 (2026-05-23)
- 全画面共通：360px〜768px の完全レイアウト
- 3カラム → 縦並び1カラム
- フィルタペインを折り畳み（クリックで展開）
- 大きな KPI/カード を 1列化
- テーブル横スクロール対応
- モーダル全画面化
- iOS の autozoom 防止（input font-size: 16px）
========================================================================== */
@media (max-width: 768px) {
/* ----- 3カラム App レイアウト → 縦並び ----- */
.pro-app {
grid-template-columns: 1fr;
grid-template-rows: auto auto 1fr;
}
/* サイドナビ：横スクロールバーで全項目アクセス可 */
.pro-sidenav {
height: auto;
min-height: 56px;
padding: 4px 8px;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
flex-direction: row;
position: sticky; top: 0;
z-index: 80;
}
.pro-sidenav::-webkit-scrollbar { height: 0; display: none; }
.pro-sidenav__brand img { width: 28px; height: 28px; padding: 3px; }
.pro-sidenav__brand span { font-size: 8px; }
/* フィルタペイン：折りたたみ式（クリックで開閉 / shell.js が is-open を制御） */
.pro-filterpane {
position: relative;
height: auto;
max-height: 56px;
overflow: hidden;
border-right: none;
border-bottom: 1px solid var(--pro-border);
transition: max-height 0.3s ease;
}
.pro-filterpane.is-open {
max-height: 75vh;
overflow-y: auto;
}
.pro-filterpane__header {
cursor: pointer;
user-select: none;
position: relative;
padding-right: 36px;
}
.pro-filterpane__header::after {
content: "▾";
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%);
font-size: 14px;
color: var(--pro-text-mute);
transition: transform 0.2s ease;
}
.pro-filterpane.is-open .pro-filterpane__header::after {
transform: translateY(-50%) rotate(180deg);
}
/* メインペイン：全幅・コンパクト */
.pro-mainpane { width: 100%; min-width: 0; }
.pro-mainpane__topbar {
padding: 10px 14px;
gap: 8px;
flex-wrap: wrap;
}
.pro-mainpane__title { font-size: 15px; }
.pro-mainpane__body { padding: 14px 12px; }
/* ----- KPI / グリッド: 1 列化 ----- */
.pro-row-2,
.pro-row-3,
.pro-row-4,
.pro-kpi-grid,
.pro-kpi-row {
grid-template-columns: 1fr !important;
}
.pro-kpi__value { font-size: 22px; }
.pro-kpi { padding: 14px; }
.pro-card { padding: 14px; }
/* ----- テーブル：横スクロール ----- */
.pro-table-wrap, .pro-scroll-x {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
max-width: 100%;
}
.pro-mainpane__body table {
font-size: 12px;
min-width: 0;
}
.pro-mainpane__body table th,
.pro-mainpane__body table td {
padding: 8px 10px;
white-space: nowrap;
}
/* ----- モーダル：全画面化 ----- */
.pro-modal-overlay { padding: 0; align-items: stretch; }
.pro-modal {
max-width: 100% !important;
width: 100% !important;
height: 100dvh;
max-height: 100dvh;
border-radius: 0;
margin: 0;
}
.pro-modal__body {
max-height: calc(100dvh - 132px);
overflow-y: auto;
padding: 16px;
}
.pro-modal__header { padding: 12px 16px; }
.pro-modal__footer { padding: 12px 16px; flex-wrap: wrap; gap: 8px; }
.pro-modal__footer .pro-btn { flex: 1 1 calc(50% - 4px); min-width: 0; }
/* ----- ボタン / 入力：タッチターゲット拡大 + iOS autozoom 防止 ----- */
.pro-btn { min-height: 44px; padding: 10px 16px; }
.pro-btn--sm { min-height: 36px; padding: 8px 12px; font-size: 12px; }
.pro-input,
.pro-textarea,
.pro-select,
input[type="text"],
input[type="email"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="password"],
textarea,
select {
font-size: 16px;
min-height: 44px;
}
/* ----- ヘッダー：折り返し ----- */
.pro-header {
padding: 10px 12px;
flex-wrap: wrap;
gap: 6px;
}
.pro-header__nav { gap: 2px; flex-wrap: wrap; }
.pro-header__nav a { padding: 6px 8px; font-size: 12px; }
.pro-header__logo img { height: 28px; }
/* ----- Trial banner ----- */
.pro-trial-banner {
flex-direction: column;
align-items: stretch;
gap: 8px;
padding: 12px;
}
.pro-trial-banner__cta { width: 100%; }
.pro-trial-banner__body { min-width: 0; word-break: break-word; }
/* ----- 3 ステップ ウィザード ----- */
.pro-stepper {
flex-direction: column;
align-items: stretch;
gap: 6px;
}
.pro-stepper__arrow { display: none; }
.pro-stepper__step { width: 100%; }
/* ----- LP（landing.html）モバイル最適化 ----- */
.lp-hero { padding: 56px 16px 48px; }
.lp-hero__title { font-size: clamp(28px, 8vw, 40px); }
.lp-hero__sub, .lp-sub { font-size: 14px; }
.lp-section { padding: 56px 16px; }
.lp-h2 { font-size: clamp(22px, 6vw, 30px); }
.lp-features, .lp-testimonials, .lp-pricing, .lp-steps {
grid-template-columns: 1fr !important;
}
.lp-feature--lg, .lp-feature--full {
grid-column: span 1 !important;
}
.lp-pricing__plan { padding: 24px 18px; }
.lp-footer { padding: 40px 16px 24px; }
.lp-footer__inner {
grid-template-columns: 1fr !important;
gap: 24px;
}
/* ----- ログイン Split ----- */
.pro-split {
grid-template-columns: 1fr;
padding: 12px;
gap: 16px;
min-height: auto;
}
.pro-split__title { font-size: 24px; line-height: 1.35; }
.pro-split__lead { font-size: 13px; }
.pro-split__hero { padding: 28px 22px; border-radius: var(--pro-radius-lg); }
.pro-split__form { padding: 28px 22px; }
.login-mock { display: none; } /* スマホでは「LIVE 直近のジョブ」モックは非表示でファーストビューを軽く */
/* ----- バルクバー（リスト一括操作） ----- */
.pro-bulk-bar {
left: 0 !important;
right: 0;
flex-direction: column;
align-items: stretch;
padding: 10px 12px;
gap: 8px;
}
.pro-bulk-bar__actions {
width: 100%;
flex-wrap: wrap;
}
/* ----- フォーム ペア（横並びを縦並びに） ----- */
.pro-form-row {
grid-template-columns: 1fr !important;
gap: 12px;
}
/* ----- リスト企業カード（横長を縦並びに） ----- */
.pro-company-row,
.pro-list-item {
grid-template-columns: 1fr !important;
padding: 12px;
}
/* ----- pro-source-tabs（リスジェネ検索/CSV切替）コンパクト化 ----- */
.pro-source-tabs { grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; }
.pro-source-tab { padding: 8px 6px; font-size: 10px; }
.pro-source-tab__icon { font-size: 16px; }
}
/* ----- 480px 以下 ミニ画面 ----- */
@media (max-width: 480px) {
.pro-mainpane__body { padding: 12px 10px; }
.pro-sidenav__item {
padding: 8px 10px;
font-size: 11px;
min-height: 40px;
}
.pro-sidenav__item svg,
.pro-sidenav__item i {
width: 18px; height: 18px;
}
.pro-card { padding: 12px; }
.pro-h1, .lp-hero__title { font-size: 22px; }
.pro-h2, .lp-h2 { font-size: 18px; }
.pro-split__title { font-size: 20px; }
.pro-split__hero, .pro-split__form { padding: 22px 16px; }
.login-form-title { font-size: 20px; }
/* タブ系を 2列 → 横スクロール */
.pro-tabs {
display: flex;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
gap: 4px;
}
.pro-tab { flex: 0 0 auto; white-space: nowrap; }
}
/* ----- 横向き対応 ----- */
@media (max-width: 900px) and (orientation: landscape) {
.pro-split__hero { padding: 20px 24px; }
.login-mock { display: none; }
}
/* ============================================================
Dashboard UX v10 — ユーザーファースト追加ユーティリティ
（非エンジニアの営業担当者向けに「次の一手」を明快に。
既存クラスを壊さず additive のみ。dashboard.html で使用）
============================================================ */
/* ----- 無料お試し 残数メーター（dashboard 上部 / 空状態 共通） ----- */
.pro-trial-meter {
display: flex;
align-items: center;
gap: 16px;
padding: 14px 18px;
border-radius: var(--pro-radius);
border: 1px solid var(--pro-border);
background: linear-gradient(135deg, #f0f5ff 0%, #ffffff 70%);
margin-bottom: 16px;
}
.pro-trial-meter--warn {
background: linear-gradient(135deg, #fffbeb 0%, #ffffff 70%);
border-color: #fde68a;
}
.pro-trial-meter--done {
background: linear-gradient(135deg, #fef2f2 0%, #ffffff 70%);
border-color: #fecaca;
}
.pro-trial-meter--paid {
background: linear-gradient(135deg, #ecfdf5 0%, #ffffff 70%);
border-color: #a7f3d0;
}
.pro-trial-meter__icon {
width: 44px; height: 44px;
display: flex; align-items: center; justify-content: center;
font-size: 22px;
border-radius: 12px;
background: rgba(26, 50, 99, 0.06);
flex-shrink: 0;
}
.pro-trial-meter--warn .pro-trial-meter__icon { background: rgba(245, 158, 11, 0.16); }
.pro-trial-meter--done .pro-trial-meter__icon { background: rgba(220, 38, 38, 0.14); }
.pro-trial-meter--paid .pro-trial-meter__icon { background: rgba(16, 185, 129, 0.16); }
.pro-trial-meter__body { flex: 1; min-width: 0; }
.pro-trial-meter__top {
display: flex; align-items: baseline; justify-content: space-between;
gap: 10px; flex-wrap: wrap;
margin-bottom: 7px;
}
.pro-trial-meter__title {
font-weight: 700;
font-size: 14px;
color: var(--pro-primary);
}
.pro-trial-meter__count {
font-family: var(--pro-font-display);
font-variant-numeric: tabular-nums;
font-weight: 800;
font-size: 15px;
color: var(--pro-primary);
}
.pro-trial-meter__count b { font-size: 19px; }
.pro-trial-meter__count small { font-size: 12px; color: var(--pro-text-mute); font-weight: 600; }
.pro-trial-meter__track {
height: 9px;
background: var(--pro-border);
border-radius: 999px;
overflow: hidden;
}
.pro-trial-meter__fill {
height: 100%;
width: 0%;
border-radius: 999px;
background: linear-gradient(90deg, var(--pro-primary), var(--pro-blue));
transition: width 0.4s var(--pro-tr);
}
.pro-trial-meter--warn .pro-trial-meter__fill { background: linear-gradient(90deg, var(--pro-warning), #fbbf24); }
.pro-trial-meter--done .pro-trial-meter__fill { background: linear-gradient(90deg, var(--pro-danger), #f87171); }
.pro-trial-meter__note {
font-size: 12px;
color: var(--pro-text-mute);
margin-top: 6px;
line-height: 1.5;
}
.pro-trial-meter__cta { flex-shrink: 0; white-space: nowrap; }
@media (max-width: 700px) {
.pro-trial-meter { flex-wrap: wrap; }
.pro-trial-meter__cta { width: 100%; justify-content: center; }
}
/* ----- 「次の3ステップ」オンボーディング導線（空状態で使用） ----- */
.pro-steps-guide {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
max-width: 720px;
margin: 8px auto 24px;
text-align: left;
}
@media (max-width: 640px) {
.pro-steps-guide { grid-template-columns: 1fr; gap: 10px; }
}
.pro-step-card {
position: relative;
display: block;
padding: 18px 16px 16px;
border: 1px solid var(--pro-border);
border-radius: var(--pro-radius);
background: #fff;
text-decoration: none;
color: inherit;
transition: transform 0.15s var(--pro-tr), box-shadow 0.15s var(--pro-tr), border-color 0.15s var(--pro-tr);
}
.pro-step-card:hover {
transform: translateY(-3px);
border-color: var(--pro-primary-light);
box-shadow: var(--pro-shadow);
text-decoration: none;
}
.pro-step-card__num {
display: inline-flex; align-items: center; justify-content: center;
width: 30px; height: 30px;
border-radius: 50%;
background: linear-gradient(135deg, var(--pro-primary), var(--pro-primary-light));
color: #fff;
font-weight: 800;
font-size: 14px;
margin-bottom: 10px;
box-shadow: var(--pro-shadow-sm);
}
.pro-step-card__title {
font-weight: 700;
font-size: 14px;
color: var(--pro-primary);
margin-bottom: 4px;
}
.pro-step-card__desc {
font-size: 12px;
color: var(--pro-text-mute);
line-height: 1.6;
}
.pro-step-card__go {
margin-top: 10px;
font-size: 12px;
font-weight: 700;
color: var(--pro-blue);
}
.pro-step-card:hover .pro-step-card__go { color: var(--pro-blue-dark); }
/* ----- セクション見出しのインフォ補足（営業担当向けの一言） ----- */
.pro-section-head__sub--tip {
display: inline-flex;
align-items: center;
gap: 6px;
}
.pro-section-head__sub--tip::before {
content: "💡";
font-size: 13px;
}
/* ----- 録画リンクを「成果の証拠」と分かるように装飾 ----- */
.pro-rec-link {
display: inline-flex; align-items: center; gap: 4px;
background: var(--pro-primary);
color: #fff !important;
text-decoration: none;
padding: 5px 11px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
white-space: nowrap;
transition: background 0.15s var(--pro-tr), transform 0.15s var(--pro-tr);
}
.pro-rec-link:hover {
background: var(--pro-primary-light);
transform: translateY(-1px);
text-decoration: none;
color: #fff !important;
}
/* ----- 結果テーブル上部の凡例（ステータスの意味を一目で） ----- */
.pro-legend {
display: flex; flex-wrap: wrap;
align-items: center; gap: 14px;
font-size: 12px;
color: var(--pro-text-mute);
}
.pro-legend__item { display: inline-flex; align-items: center; gap: 6px; }
.pro-legend__dot {
width: 10px; height: 10px;
border-radius: 50%;
flex-shrink: 0;
}
.pro-legend__dot--sent { background: var(--pro-success); }
.pro-legend__dot--failed { background: var(--pro-danger); }
.pro-legend__dot--queued { background: var(--pro-border-strong); }
.pro-legend__dot--click { background: var(--pro-accent-dark); }
/* ===== 証拠スクショ モーダル + 誤判定/返金 報告(2026-06-06) ===== */
/* button に .pro-rec-link / .pro-statuschip を流用するためのリセット（見た目は a と同じに） */
button.pro-rec-link,
button.pro-statuschip { border: none; font: inherit; cursor: pointer; line-height: 1.2; }
/* 報告ヘッダー（モーダル上部の「これは成功ではない」帯） */
.pro-evidence-report { margin-bottom: 18px; }
.pro-evidence-report__row {
display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
padding: 14px 16px; background: var(--pro-bg-soft);
border: 1px solid var(--pro-border); border-radius: 10px;
}
.pro-evidence-report__row .pro-help { flex: 1 1 240px; font-size: 13px; line-height: 1.65; }
/* スクショ本体（四角い枠つき） */
.pro-evidence-shots { display: flex; flex-direction: column; gap: 20px; }
.pro-evidence-shot {
margin: 0; border: 1px solid var(--pro-border);
border-radius: 12px; overflow: hidden; background: #fff;
box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
}
.pro-evidence-shot figcaption {
display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
padding: 11px 15px; background: var(--pro-bg-soft);
border-bottom: 1px solid var(--pro-border); font-size: 14px; font-weight: 700;
}
.pro-evidence-shot figcaption .pro-help { font-size: 12px; font-weight: 400; }
.pro-evidence-shot img {
display: block; width: 100%; height: auto; cursor: zoom-in;
transition: filter 0.15s var(--pro-tr);
}
.pro-evidence-shot img:hover { filter: brightness(0.96); }
/* 拡大ズーム（フルスクリーン・クリックで閉じる） */
.pro-zoom-overlay {
position: fixed; inset: 0; z-index: 1200; display: none;
align-items: center; justify-content: center; padding: 24px;
background: rgba(15, 23, 42, 0.88); cursor: zoom-out;
}
.pro-zoom-overlay.is-open { display: flex; }
.pro-zoom-overlay img {
max-width: 100%; max-height: 100%;
border-radius: 8px; box-shadow: 0 16px 56px rgba(0, 0, 0, 0.5);
}