/* ============================================================ ページタイプ: database — データ可視化ページ用途: 転職データベース・年収データ・業界統計・KPIダッシュボードで適用 ============================================================ */ /* ── 追加トークン ── */ :root { --data-green: #16a34a; --data-red: #dc2626; --data-amber: #d97706; --data-purple: #7c3aed; --chart-line: #2563eb; --chart-area: rgba(37,99,235,0.08); --chart-grid: #e5e7eb; --kpi-bg: #f0f5ff; } /* ── ページコンテナ ── */ .data-page { max-width: var(--max-width, 860px); margin: 0 auto; padding: 16px 16px 80px; } .data-page--top { max-width: 1080px; } @media (min-width: 768px) { .data-page { padding: 24px 24px 40px; } } /* ── ページ見出し ── */ .data-page h1 { font-size: 1.4rem; font-weight: 700; margin-bottom: 4px; } .data-page h1 + p { color: var(--text-secondary); font-size: 0.85rem; margin-bottom: 24px; } .data-page--top h1 { font-size: 1.5rem; text-align: center; } .data-page--top h1 + p { text-align: center; margin-bottom: 32px; } /* ── セクション ── */ .data-section { margin-bottom: 40px; } .data-section__heading { font-size: 1.05rem; font-weight: 700; color: var(--text-primary); border-bottom: 2px solid var(--accent); padding-bottom: 8px; margin-bottom: 20px; } @media (min-width: 768px) { .data-section__heading { font-size: 1.15rem; } } .data-section__desc { font-size: 0.88rem; color: var(--text-secondary); line-height: 1.7; margin-bottom: 16px; } /* ── ヒーロー ── */ .data-hero-row { display: flex; flex-direction: column; gap: 16px; margin-bottom: 40px; } @media (min-width: 768px) { .data-hero-row { flex-direction: row; gap: 24px; align-items: stretch; } .data-hero-row > .data-chart-card { flex: 1; } } .data-hero-kpi { background: linear-gradient(135deg, #1e40af, #2563eb); color: #ffffff; border-radius: 16px; padding: 32px 24px; text-align: center; } .data-hero-kpi__value { font-size: 2.25rem; font-weight: 700; line-height: 1.2; margin-bottom: 4px; } .data-hero-kpi__unit { font-size: 1rem; font-weight: 400; margin-left: 4px; } .data-hero-kpi__delta { font-size: 0.875rem; font-weight: 600; margin-top: 8px; } .data-hero-kpi__delta--up { color: #86efac; } .data-hero-kpi__delta--down { color: #fca5a5; } .data-hero-kpi__source { font-size: 0.75rem; opacity: 0.7; margin-top: 12px; } @media (min-width: 768px) { .data-hero-kpi { padding: 40px 32px; text-align: left; flex: 0 0 280px; } .data-hero-kpi__value { font-size: 2.75rem; } } /* ── グラフカード ── */ .data-chart-card { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 16px; padding: 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); } .data-chart-card__title { font-size: 1rem; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; } .data-chart-card__source { font-size: 0.72rem; color: var(--text-muted); margin-bottom: 16px; } .data-chart-card svg { width: 100%; height: auto; display: block; margin-bottom: 12px; } .data-chart-card__comment { background: #eff6ff; border-left: 4px solid var(--accent); border-radius: 0 8px 8px 0; padding: 12px 16px; font-size: 0.88rem; color: #1e40af; line-height: 1.6; } /* ── KPI 5大指標グリッド ── */ .data-kpi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 32px; } .data-kpi-grid__item:last-child:nth-child(odd) { grid-column: 1 / -1; } @media (min-width: 768px) { .data-kpi-grid { grid-template-columns: repeat(5, 1fr); gap: 16px; } .data-kpi-grid__item:last-child:nth-child(odd) { grid-column: auto; } } .data-kpi-card { background: var(--kpi-bg); border: 1px solid var(--accent-light); border-radius: 12px; padding: 16px; text-align: center; } .data-kpi-card__icon { font-size: 1.25rem; margin-bottom: 4px; } .data-kpi-card__label { font-size: 0.75rem; font-weight: 500; color: var(--text-secondary); margin-bottom: 4px; } .data-kpi-card__value { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); line-height: 1.2; } .data-kpi-card__unit { font-size: 0.8rem; font-weight: 400; color: var(--text-secondary); } .data-kpi-card__delta { font-size: 0.72rem; margin-top: 6px; font-weight: 600; } .data-kpi-card__delta--up { color: var(--data-green); } .data-kpi-card__delta--down { color: var(--data-red); } @media (min-width: 768px) { .data-kpi-card { padding: 20px 16px; } .data-kpi-card__value { font-size: 1.75rem; } } /* ── 業界/職種カード一覧 ── */ .data-card-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 32px; } @media (min-width: 768px) { .data-card-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } } .data-card { display: block; text-decoration: none; color: inherit; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 20px; transition: transform 0.2s, box-shadow 0.2s; } .data-card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.08); color: inherit; } .data-card__name { font-size: 1.05rem; font-weight: 700; color: var(--text-primary); margin-bottom: 12px; } .data-card__badges { display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; margin-bottom: 12px; } .data-card__badges::-webkit-scrollbar { display: none; } .data-card__more { font-size: 0.82rem; color: var(--accent); font-weight: 600; text-align: right; display: block; } /* ── ミニバッジ ── */ .data-badge { flex-shrink: 0; background: var(--bg-tertiary); border-radius: 8px; padding: 8px 12px; text-align: center; min-width: 80px; } .data-badge__label { font-size: 0.65rem; color: var(--text-muted); font-weight: 500; display: block; margin-bottom: 2px; } .data-badge__value { font-size: 0.9rem; font-weight: 700; color: var(--text-primary); } /* ── ランキング横バー ── */ .data-ranking-bar { margin-bottom: 12px; } .data-ranking-bar__row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .data-ranking-bar__rank { font-size: 0.78rem; font-weight: 700; color: var(--text-secondary); width: 24px; flex-shrink: 0; text-align: right; } .data-ranking-bar__name { font-size: 0.82rem; font-weight: 500; color: var(--text-primary); width: 100px; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .data-ranking-bar__bar-wrap { flex: 1; height: 24px; background: var(--bg-tertiary); border-radius: 6px; overflow: hidden; } .data-ranking-bar__bar { height: 100%; border-radius: 6px; background: var(--accent-light); transition: width 0.6s ease; } .data-ranking-bar__bar--highlight { background: linear-gradient(90deg, var(--accent), var(--accent-hover)); } .data-ranking-bar__val { font-size: 0.78rem; font-weight: 700; color: var(--text-primary); width: 60px; flex-shrink: 0; text-align: right; } /* ── 5軸レーダーチャート ── */ .data-radar { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-bottom: 32px; } .data-radar svg { width: 280px; height: 280px; display: block; } .data-radar__scores { width: 100%; } .data-radar__score-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--bg-tertiary); font-size: 0.85rem; } .data-radar__score-label { color: var(--text-secondary); font-weight: 500; } .data-radar__score-value { font-weight: 700; color: var(--text-primary); } @media (min-width: 768px) { .data-radar { flex-direction: row; align-items: flex-start; gap: 32px; } .data-radar svg { width: 320px; height: 320px; flex-shrink: 0; } .data-radar__scores { flex: 1; } } /* ── 転職しやすさスコア ── */ .data-score { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 16px; padding: 24px; margin-bottom: 32px; } .data-score__header { display: flex; align-items: baseline; gap: 12px; margin-bottom: 20px; } .data-score__stars { font-size: 1.5rem; color: #f59e0b; letter-spacing: 2px; } .data-score__number { font-size: 1.75rem; font-weight: 700; color: var(--text-primary); } .data-score__max { font-size: 0.85rem; color: var(--text-muted); } .data-score__bar-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } .data-score__bar-label { font-size: 0.82rem; color: var(--text-secondary); width: 90px; flex-shrink: 0; } .data-score__bar-wrap { flex: 1; height: 10px; background: var(--bg-tertiary, #f1f5f9); border-radius: 5px; overflow: hidden; position: relative; } .data-score__bar { position: absolute; top: 0; left: 0; height: 100%; background: var(--accent, #2563eb); border-radius: 5px; transition: width 0.6s ease; } .data-score__bar-val { font-size: 0.78rem; font-weight: 700; color: var(--text-primary); width: 30px; text-align: right; flex-shrink: 0; } /* ── 離職理由リスト ── */ .data-reason-list { list-style: none; padding: 0; margin: 0; } .data-reason-list li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--bg-tertiary); font-size: 0.88rem; } .data-reason-list__rank { width: 28px; height: 28px; border-radius: 50%; background: var(--accent-light); color: var(--accent); font-size: 0.78rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .data-reason-list__pct { margin-left: auto; font-weight: 700; color: var(--text-primary); } /* ── クロスデータ表 ── */ .data-cross-table { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 16px; } .data-cross-table table { width: 100%; border-collapse: collapse; font-size: 0.88rem; } .data-cross-table th, .data-cross-table td { padding: 10px 16px; border-bottom: 1px solid #e5e7eb; text-align: left; white-space: nowrap; } .data-cross-table th { background: var(--accent-dark); color: #ffffff; font-size: 0.82rem; font-weight: 600; } .data-cross-table td { font-variant-numeric: tabular-nums; } .data-cross-table__highlight { background: #eff6ff; font-weight: 700; } /* ── 関連リンクカード ── */ .data-link-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 32px; } @media (min-width: 480px) { .data-link-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 768px) { .data-link-grid { grid-template-columns: repeat(4, 1fr); } } .data-link-card { display: block; text-decoration: none; color: inherit; background: var(--bg-secondary); border: 1px solid #e5e7eb; border-radius: 10px; padding: 16px; text-align: center; transition: background 0.2s, transform 0.2s; } .data-link-card:hover { background: var(--accent-light); transform: translateY(-2px); color: inherit; } .data-link-card__name { font-size: 0.88rem; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; } .data-link-card__sub, .data-link-card__meta { font-size: 0.75rem; color: var(--text-secondary); margin-bottom: 8px; display: block; } .data-link-card__arrow, .data-link-card__more { font-size: 0.78rem; color: var(--accent); font-weight: 600; display: block; } /* ── 2カラムレイアウト（PC） ── */ .data-two-col { display: flex; flex-direction: column; gap: 16px; } @media (min-width: 768px) { .data-two-col { flex-direction: row; gap: 24px; } .data-two-col > * { flex: 1; } } /* ── 入職率/離職率カード ── */ .data-flow-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 20px; } @media (min-width: 768px) { .data-flow-grid { grid-template-columns: repeat(2, 1fr) 2fr; } } .data-flow-card { background: var(--kpi-bg); border: 1px solid var(--accent-light); border-radius: 12px; padding: 16px; text-align: center; } .data-flow-card__label { font-size: 0.75rem; font-weight: 500; color: var(--text-secondary); margin-bottom: 4px; } .data-flow-card__value { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); } /* ── 出典表記 ── */ .data-source-note { font-size: 0.72rem; color: var(--text-muted); margin-top: 8px; line-height: 1.5; }