/* ============================================================ ページタイプ: guide — ガイド・ハウツーページ用途: 口座開設手順・サービス利用ガイド・初心者向けHowTo で適用 ============================================================ */ /* ── ページレイアウト ───────────────────────────────────────── */ .static-page { max-width: var(--max-width-narrow, 860px); margin: 0 auto; padding: 20px var(--container-pad, 24px) 80px; } /* ── 記事ヘッダー ───────────────────────────────────────────── */ .guide-header { margin-bottom: 32px; } .guide-label { display: inline-flex; align-items: center; gap: 6px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; color: var(--accent); background: var(--accent-light-bg, rgba(59,130,246,0.08)); padding: 4px 12px; border-radius: 20px; margin-bottom: 12px; text-transform: uppercase; } .guide-title { font-size: clamp(1.3rem, 4vw, 1.7rem); font-weight: 700; line-height: 1.35; margin-bottom: 12px; } .guide-meta { display: flex; align-items: center; gap: 16px; font-size: 0.78rem; color: var(--text-muted); flex-wrap: wrap; } /* ── セクション区切り ───────────────────────────────────────── */ .guide-section { margin: 40px 0; } .guide-section-title { font-size: 1.15rem; font-weight: 700; margin-bottom: 18px; padding-left: 14px; border-left: 4px solid var(--accent); line-height: 1.4; color: var(--text-primary); } .guide-section-body { font-size: 0.9rem; line-height: 1.9; color: var(--text-secondary); } .guide-section-body p { margin-bottom: 14px; } .guide-section-body strong { color: var(--text-primary); font-weight: 700; } /* section[id^="section-"] は components.css に移動（全ページタイプ共通化） */ /* ── 比較表セクション ── */ .static-page .comparison-section { margin-top: 40px; padding-top: 32px; border-top: 2px solid var(--border-color); } .static-page .comparison-section h2 { font-size: 1.2rem; font-weight: 700; margin-bottom: 4px; color: var(--text-primary); } /* ── ランキングリスト (ul.ranking-list / .rank-card) ── */ .static-page ul.ranking-list { padding: 0; list-style: none; } .static-page .ranking-card, .static-page .rank-card { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 10px; padding: 20px; margin-bottom: 16px; box-shadow: 0 1px 4px var(--shadow-sm); } .static-page .ranking-card h3, .static-page .rank-card .rank-name { font-size: 1rem; font-weight: 700; margin-bottom: 8px; color: var(--text-primary); } /* ── 情報ボックス ───────────────────────────────────────────── */ .info-box { background: var(--accent-light-bg, rgba(59,130,246,0.06)); border: 1px solid var(--accent-border, rgba(59,130,246,0.15)); border-radius: var(--radius, 10px); padding: 16px 20px; margin: 20px 0; font-size: 0.86rem; line-height: 1.7; } .info-box-title { font-weight: 700; color: var(--accent); margin-bottom: 6px; font-size: 0.82rem; } .warn-box { background: rgba(245,158,11,0.06); border: 1px solid rgba(245,158,11,0.2); border-radius: var(--radius, 10px); padding: 16px 20px; margin: 20px 0; font-size: 0.86rem; line-height: 1.7; } .warn-box-title { font-weight: 700; color: #d97706; margin-bottom: 6px; font-size: 0.82rem; } /* ── ステップガイド（拡張） ─────────────────────────────────── */ .step-guide-wrap { margin: 32px 0; } .step-guide-title { font-size: 1rem; font-weight: 700; margin-bottom: 20px; display: flex; align-items: center; gap: 8px; } /* step-guide / step-item は components.css で定義済み */ /* ── チェックリスト ─────────────────────────────────────────── */ .checklist { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 16px 0; } .checklist li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.88rem; line-height: 1.5; } .checklist li::before { content: '□'; color: var(--accent); font-size: 1.1rem; flex-shrink: 0; line-height: 1.2; } .checklist.done li::before { content: '☑'; } /* ── 関連ガイドリンク ───────────────────────────────────────── */ .related-guides { background: var(--surface, rgba(255,255,255,0.03)); border-radius: var(--radius, 12px); padding: 24px; margin: 40px 0 20px; } .related-guides-title { font-size: 0.9rem; font-weight: 700; margin-bottom: 16px; color: var(--text-muted); } .related-guide-list { list-style: none; display: flex; flex-direction: column; gap: 8px; } .related-guide-list li a { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; padding: 8px 0; border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.06)); color: var(--text-secondary); transition: color 0.2s, padding-left 0.2s; } .related-guide-list li:last-child a { border-bottom: none; } .related-guide-list li a:hover { color: var(--accent); padding-left: 4px; } .related-guide-list li a::before { content: '→'; color: var(--accent); flex-shrink: 0; } /* ── モバイル ───────────────────────────────────────────────── */ @media (max-width: 640px) { .static-page { padding: 12px 16px 60px; } .guide-section-title { font-size: 1.05rem; } }