目次 枠線 ホバー
/* ─────────────── 目次ボックス全体（中央配置＋左揃え内容） ──────────────── */ .toc, .toc-box { background: #f9f9fb; border: 2px solid #308d9b; border-radius: 10px; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08); padding: 1.5em 2em; margin: 2em auto; /* ←中央寄せ */ max-width: 600px; /* 横幅を適度に制限 */ text-align: left; /* 中身は左寄せ */ transition: all 0.3s ease; } /* ホバー時の浮き上がり効果 */ .toc:hover { box-shadow: 0 4px 12px rgba(48, 141, 155, 0.25); transform: translateY(-2px); } /* ─────────────── 目次タイトル（中央寄せ） ──────────────── */ .toc-title { font-weight: bold; font-size: 1.2em; color: #308d9b; border-bottom: 2px solid #308d9b; padding-bottom: 0.4em; margin-bottom: 1em; text-align: center; /* ←タイトル中央寄せ */ } .toc-title::before { content: “📘 “; } /* ─────────────── リスト（黒丸なし・左寄せ） ──────────────── */ .toc-content ul { list-style: none; padding-left: 0; margin-left: 0; } /* ─────────────── リスト項目（余白・行間） ──────────────── */ .toc-content li { margin: 0.4em 0; line-height: 1.7; } /* ─────────────── リンク装飾 ──────────────── */ .toc-content li a { text-decoration: none; color: #333; display: block; padding: 0.3em 0.4em; border-left: 3px solid transparent; transition: all 0.25s ease; } .toc-content li a:hover { color: #308d9b; background: rgba(48, 141, 155, 0.05); border-left: 3px solid #308d9b; border-radius: 4px; padding-left: 0.7em; } /* ─────────────── スマホ対応 ──────────────── */ @media (max-width: 767px) { .toc, .toc-box { padding: 1.2em; max-width: 95%; } .toc-title { font-size: 1.1em; } }カスタムCSS
