/* ============================================================ ページタイプ: comparison — 比較・ランキングページ用途: サービス/商品比較・証券会社比較・転職エージェント比較等で適用 ============================================================ */ /* ── ページレイアウト ───────────────────────────────────────── */ .static-page { max-width: var(--max-width-narrow, 860px); margin: 0 auto; padding: 20px var(--container-pad, 24px) 80px; } .page-updated { font-size: 0.78rem; color: var(--text-muted); margin: -6px 0 24px; } .author-tag { background: var(--accent-light-bg, rgba(59,130,246,0.1)); color: var(--accent); padding: 2px 10px; border-radius: 4px; font-size: 0.75rem; font-weight: 600; } /* ── 比較テーブル（拡張版） ─────────────────────────────────── */ .comparison-wrap { overflow-x: auto; border-radius: var(--radius, 12px); box-shadow: 0 4px 24px var(--shadow-md, rgba(0,0,0,0.12)); margin: 28px 0; } .comparison-table { min-width: 600px; /* 横スクロール基準 */ } .comparison-table th:first-child, .comparison-table td:first-child { position: sticky; left: 0; background: var(--bg-secondary, var(--bg-primary)); z-index: 1; min-width: 120px; font-weight: 600; } .comparison-table th:first-child { background: var(--table-header-bg, var(--accent)); } /* おすすめ強調行 */ .highlight-row td:first-child::after { content: '★ おすすめ'; display: block; font-size: 0.6rem; font-weight: 700; color: var(--accent); margin-top: 2px; } /* ── ランキングカード（拡張） ───────────────────────────────── */ .ranking-section { margin-bottom: 48px; } .ranking-note { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 18px; padding: 10px 14px; background: var(--surface, rgba(255,255,255,0.04)); border-radius: 8px; } .ranking-card { display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: start; } .ranking-card-left { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 60px; } .rank-num { font-size: 2rem; font-weight: 700; line-height: 1; color: var(--text-muted); } .rank-1 .rank-num { color: #f5a623; } .rank-2 .rank-num { color: #adb5bd; } .rank-3 .rank-num { color: #cd7f32; } .ranking-card-body { flex: 1; } .ranking-card-cta { flex-shrink: 0; align-self: center; } .ranking-name { font-size: 1.15rem; font-weight: 700; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .ranking-best-badge { font-size: 0.65rem; font-weight: 700; background: var(--accent); color: #fff; padding: 2px 10px; border-radius: 20px; letter-spacing: 0.04em; } .ranking-desc { font-size: 0.88rem; color: var(--text-secondary); line-height: 1.7; margin-bottom: 14px; } .ranking-pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; } .pros-block, .cons-block { background: var(--surface, rgba(255,255,255,0.03)); border-radius: 8px; padding: 10px 14px; font-size: 0.82rem; } .pros-label { color: #16a34a; font-weight: 700; font-size: 0.72rem; margin-bottom: 4px; } .cons-label { color: #dc2626; font-weight: 700; font-size: 0.72rem; margin-bottom: 4px; } /* ── おすすめ用途タグ ───────────────────────────────────────── */ .for-who-tag { display: inline-flex; align-items: center; gap: 4px; background: var(--accent-light-bg, rgba(59,130,246,0.08)); color: var(--accent); border: 1px solid var(--accent-border, rgba(59,130,246,0.15)); padding: 4px 12px; border-radius: 20px; font-size: 0.74rem; font-weight: 600; } .for-who-tag::before { content: '✓ '; } /* ── CTAブロック（比較ページ用） ────────────────────────────── */ .compare-cta-block { background: var(--cta-block-bg, linear-gradient(135deg, var(--accent-fade, rgba(59,130,246,0.08)), transparent)); border: 1px solid var(--accent-border, rgba(59,130,246,0.15)); border-radius: var(--radius, 14px); padding: 28px 32px; text-align: center; margin: 32px 0; } .compare-cta-title { font-size: 1.05rem; font-weight: 700; margin-bottom: 8px; } .compare-cta-desc { font-size: 0.88rem; color: var(--text-secondary); margin-bottom: 20px; } /* ── 積立シミュレーショングラフ ─────────────────────────────── */ .sim-graph { background: var(--bg-secondary, rgba(255,255,255,0.03)); border: 1px solid var(--border-color, rgba(255,255,255,0.08)); border-radius: var(--radius, 12px); padding: 20px 24px 16px; margin: 28px 0; } /* モバイルSVGスクロールラッパー */ .sim-svg-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 8px; } .sim-svg-scroll svg { min-width: 400px; width: 100%; height: auto; display: block; } .sim-graph h3 { font-size: 1rem; font-weight: 700; color: var(--text-primary, #e2e8f0); margin-bottom: 4px; } .sim-note { font-size: 0.78rem; color: var(--text-muted, #64748b); margin-bottom: 12px; } .sim-legend { display: flex; gap: 20px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border-color, rgba(255,255,255,0.08)); } .sim-legend span { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--text-secondary, #94a3b8); } .legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .sim-miku-wrap { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-color, rgba(255,255,255,0.06)); } .sim-miku-avatar img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(0,212,170,.3); flex-shrink: 0; } .sim-miku-comment { font-size: 0.85rem; line-height: 1.7; color: var(--text-secondary, #94a3b8); } /* ── 記事ヘッダー (compare-hero) ─────────────────────────────── */ .compare-hero { margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.08)); } .compare-hero h1 { font-size: clamp(1.3rem, 3.5vw, 1.8rem); font-weight: 700; line-height: 1.35; color: var(--text-primary, #1e293b); margin-bottom: 12px; } .compare-hero .meta { font-size: 0.76rem; color: var(--text-muted, #64748b); margin-bottom: 14px; display: block; } .compare-hero .lead { background: var(--surface, rgba(255,255,255,0.04)); border: 1px solid var(--border-color, rgba(255,255,255,0.08)); border-left: 4px solid var(--accent, #3b82f6); border-radius: 0 8px 8px 0; padding: 14px 18px; font-size: 0.9rem; line-height: 1.85; color: var(--text-secondary, #475569); } /* ── レビュー対話カード ─────────────────────────────────────── */ .review-dialogue { background: var(--surface, rgba(255,255,255,0.03)); border: 1px solid var(--border-color, rgba(255,255,255,0.08)); border-radius: 12px; padding: 20px; margin-bottom: 12px; overflow: hidden; } .review-user { margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.06)); } .review-name { font-weight: 700; font-size: 0.88rem; color: var(--text-primary, #1e293b); display: block; margin-bottom: 4px; } .review-stars { color: #f5a623; font-size: 1rem; letter-spacing: 2px; margin-bottom: 8px; } .review-user p { font-size: 0.88rem; line-height: 1.8; color: var(--text-secondary, #475569); font-style: italic; border-left: 3px solid var(--border-color, rgba(255,255,255,0.1)); padding-left: 10px; margin: 0; } .review-miku { display: flex; gap: 10px; align-items: flex-start; } .review-miku::before { content: '💬'; font-size: 1.1rem; flex-shrink: 0; margin-top: 2px; } .review-miku .review-name { color: #00d4aa; font-size: 0.8rem; } .review-miku p { font-size: 0.86rem; line-height: 1.75; color: var(--text-secondary, #475569); margin: 0; } /* ── 書籍カード ─────────────────────────────────────────────── */ .book-rec-section { margin: 40px 0; padding-top: 32px; border-top: 2px solid var(--border-color, rgba(255,255,255,0.08)); } .section-heading { font-size: 1.1rem; font-weight: 700; color: var(--text-primary, #1e293b); margin-bottom: 8px; } .book-rec-lead { font-size: 0.88rem; color: var(--text-secondary, #64748b); line-height: 1.7; margin-bottom: 6px; } .amazon-rec-note { font-size: 0.72rem; color: var(--text-muted, #94a3b8); margin-bottom: 16px; } .book-card-grid { display: flex; flex-direction: column; gap: 12px; margin: 0; } .book-card { background: var(--surface, rgba(255,255,255,0.03)); border: 1px solid var(--border-color, rgba(255,255,255,0.08)); border-radius: 10px; padding: 16px 18px; position: relative; } .book-card--pick { border-color: rgba(251,191,36,0.35); background: rgba(251,191,36,0.04); } .book-pick-badge { display: inline-flex; align-items: center; gap: 4px; background: #fbbf24; color: #78350f; font-size: 0.68rem; font-weight: 700; padding: 3px 10px; border-radius: 20px; margin-bottom: 10px; } .book-card-inner { display: flex; gap: 14px; align-items: flex-start; } .book-card-text { flex: 1; } .book-level-badge { display: inline-block; background: rgba(59,130,246,0.15); color: #60a5fa; font-size: 0.65rem; font-weight: 600; padding: 2px 8px; border-radius: 4px; margin-bottom: 5px; } .book-title { font-size: 0.95rem; font-weight: 700; color: var(--text-primary, #1e293b); margin-bottom: 2px; } .book-author { font-size: 0.76rem; color: var(--text-muted, #64748b); margin-bottom: 6px; } .book-comment { font-size: 0.84rem; line-height: 1.75; color: var(--text-secondary, #475569); margin-bottom: 10px; } .book-btn { display: inline-flex; align-items: center; gap: 4px; background: #ff9900; color: #1a0a00; padding: 8px 14px; border-radius: 6px; font-size: 0.82rem; font-weight: 700; text-decoration: none; transition: background 0.2s; white-space: nowrap; align-self: flex-start; } .book-btn:hover { background: #e68900; color: #1a0a00; } /* section[id^="section-"] は components.css に移動（全ページタイプ共通化） */ /* ── モバイル ───────────────────────────────────────────────── */ @media (max-width: 640px) { .static-page { padding: 12px 16px 60px; } .ranking-card { grid-template-columns: 1fr; } .ranking-card-cta { width: 100%; } .ranking-card-cta .cta-btn { width: 100%; justify-content: center; } .ranking-pros-cons { grid-template-columns: 1fr; } }