/* 炎上Tube速報@錆 — まとめブログ風スタイル */ /* ========================================================================== デザイントークン - 色: 青錆（緑青）アクセント + 寒色寄りグレースケール5段階 - タイポグラフィ: Major Third (1.25) のタイプスケール - スペーシング: 8pxベース（最小単位4px） ========================================================================== */ :root { /* 色: アクセント（青錆 = 藍×錆。銅の緑青） */ --color-accent: #2c6e63; --color-accent-dark: #1c4a43; --color-accent-pale: #eef3f2; /* 見出し・関連記事などの淡い背景 */ --color-accent-tint: #d3e3e0; /* カテゴリチップの背景 */ /* 色: グレースケール（5段階・寒色寄りで青錆と調和） */ --color-gray-100: #eef2f1; /* ページ背景（青錆に寄せた淡い寒色） */ --color-gray-300: #d3dad8; /* 罫線 */ --color-gray-500: #6f7a78; /* 補足テキスト */ --color-gray-700: #3c4644; /* サブテキスト */ --color-gray-900: #1b2221; /* 本文・フッター背景 */ --color-surface: #fff; /* マーカー強調色: 白背景・濃い文字のどちらにも溶けないよう、パレット非連動の蛍光イエロー固定 */ --color-marker: #ffe14d; /* タイプスケール (1.25) */ --text-sm: 0.8rem; --text-base: 1rem; --text-lg: 1.25rem; --text-xl: 1.563rem; --text-2xl: 1.953rem; /* スペーシング (8pxベース) */ --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px; --space-5: 32px; --space-6: 48px; /* ヘッダー帯（既定は藍→緑青のグラデーション） */ --color-header-start: #21465a; /* 藍（ネイビー） */ --color-header-end: #163a37; /* 深い緑青へグラデーション */ --color-header-text: #fff; /* 帯が濃色なので既定は白。淡色パレットでは濃色に上書き */ /* 角丸 */ --radius-sm: 4px; --radius: 8px; } /* ========================================================================== カラーパレット候補（比較検討用） hugo server 時のみ右下のスイッチャーで切替できる。 本番は に data-palette が付かず、上記 :root の既定「青錆」で描画される。 ========================================================================== */ /* 炎: 当初の赤。比較用に残す（本番既定ではない） */ :root[data-palette="honoo"] { --color-accent: #d83a2e; --color-accent-dark: #a02018; --color-accent-pale: #fdf0ef; --color-accent-tint: #fde8e6; --color-header-start: #d83a2e; --color-header-end: #a02018; } /* 錆: サイト名「@錆」由来。焼け跡の錆びた鉄・燻し銅 — 熱を残しつつ赤の生々しさを抑える */ :root[data-palette="sabi"] { --color-accent: #9c4b21; --color-accent-dark: #6e3415; --color-accent-pale: #f7efe8; --color-accent-tint: #efdfd0; --color-header-start: #9c4b21; --color-header-end: #5d2c12; } /* 藍: 「速報」の報道感。扇情的な題材を落ち着いた紺で見せ、信頼感を出す */ :root[data-palette="ai"] { --color-accent: #2e4e74; --color-accent-dark: #19324e; --color-accent-pale: #edf2f7; --color-accent-tint: #dbe5f0; --color-header-start: #2e4e74; --color-header-end: #14253a; } /* 青錆（緑青）は本番既定（:root）。比較用の個別ブロックは持たない。 */ /* 青錆・淡: 既定の明度を上げた軽量版。カバー（帯）を淡い緑青にし文字を濃色に。 白基調をより活かし爽やかに見せる */ :root[data-palette="seisabi-light"] { --color-accent: #3a8d7e; --color-accent-dark: #266b5f; --color-accent-pale: #eff6f4; --color-accent-tint: #d8ebe6; --color-header-start: #c4e2dd; /* 淡い緑青のカバー */ --color-header-end: #b0d8d1; --color-header-text: #1c4a43; /* 淡色帯なので文字・ロゴは濃色 */ } /* 青錆・霞: 青錆淡よりさらにカバーを薄く。ほぼ白に近い帯で軽さ最優先 */ :root[data-palette="seisabi-mist"] { --color-accent: #3a8d7e; --color-accent-dark: #266b5f; --color-accent-pale: #eff6f4; --color-accent-tint: #d8ebe6; --color-header-start: #e6f2ef; /* さらに淡いカバー */ --color-header-end: #d6ebe6; --color-header-text: #1c4a43; } /* 鈍: 墨色基調の教養誌・新書風。彩度を絞り、知的な読者層に向けた落ち着いたトーン */ :root[data-palette="nibi"] { --color-accent: #3d4f5c; --color-accent-dark: #28343d; --color-accent-pale: #f1f3f4; --color-accent-tint: #e2e8ea; --color-header-start: #2b3640; --color-header-end: #171d23; } /* 炭: 鎮火後の炭と残り火。チャコールのヘッダー＋残り火オレンジのアクセント */ :root[data-palette="sumi"] { --color-accent: #cf6a28; --color-accent-dark: #9d4e1b; --color-accent-pale: #faf1e9; --color-accent-tint: #f5e0cc; --color-header-start: #322d29; --color-header-end: #161310; } * { box-sizing: border-box; } body { font-family: system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif; background: var(--color-gray-100); margin: 0; line-height: 1.7; color: var(--color-gray-900); } /* キーボード操作時のフォーカス輪郭 */ :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .container { max-width: 860px; margin: 0 auto; padding: 0 var(--space-3); } /* ヘッダー */ .site-header { background: linear-gradient(135deg, var(--color-header-start) 0%, var(--color-header-end) 100%); color: var(--color-header-text); padding: var(--space-3) 0; margin-bottom: var(--space-4); } .site-title { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-header-text); text-decoration: none; font-size: var(--text-xl); font-weight: 700; letter-spacing: 0.02em; } .site-logo { width: 1.1em; height: 1.1em; flex-shrink: 0; } .site-desc { margin: var(--space-1) 0 0; font-size: var(--text-sm); opacity: 0.9; } /* 記事一覧 */ .page-title { font-size: var(--text-lg); border-left: 6px solid var(--color-accent); padding-left: var(--space-2); } .post-list { display: flex; flex-direction: column; gap: var(--space-3); } .post-card { background: var(--color-surface); border: 1px solid var(--color-gray-300); border-radius: var(--radius); overflow: hidden; transition: box-shadow 0.15s; } .post-card:hover { box-shadow: 0 2px 10px rgba(0,0,0,0.12); } .post-card-link { display: flex; gap: var(--space-3); color: inherit; text-decoration: none; } .post-card .thumb { width: 200px; height: 112px; object-fit: cover; flex-shrink: 0; } .post-card-body { padding: var(--space-2) var(--space-3) var(--space-2) 0; } .post-card h2 { font-size: var(--text-base); margin: 0 0 var(--space-1); color: var(--color-accent-dark); } /* 記事の要約（front matter の description）。2行で切って、どれを読むか選びやすくする */ .post-card-summary { font-size: var(--text-sm); line-height: 1.5; color: var(--color-gray-700); margin: 0 0 var(--space-1); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .post-card .thumb + .post-card-body { padding-left: 0; } .post-card-link:not(:has(.thumb)) .post-card-body { padding-left: var(--space-3); } .post-card-cats { margin: 0; padding: 0 var(--space-3) var(--space-2); } .post-card-cats .cat { margin-left: 0; margin-right: var(--space-1); } /* 炎上ランクのバッジ（一覧カード）。記事本文の .hm-grade-* と同じ配色で、 熱い順に赤→灰。読む前に注目度の高い記事を選べるようにする */ .post-card .card-rank { display: inline-block; font-size: var(--text-sm); font-weight: 700; line-height: 1.4; margin: 0 0 var(--space-1); padding: 0 var(--space-1); border-radius: var(--radius-sm); color: var(--color-gray-900); background: var(--card-rank-color, var(--color-marker)); } .post-card .card-rank-X { --card-rank-color: #ff5252; } .post-card .card-rank-S { --card-rank-color: #ff8a65; } .post-card .card-rank-A { --card-rank-color: #ffb74d; } .post-card .card-rank-B { --card-rank-color: #ffe14d; } .post-card .card-rank-C { --card-rank-color: #d7d7d7; } .meta { font-size: var(--text-sm); color: var(--color-gray-500); margin: 0; } .cat { display: inline-block; background: var(--color-accent-tint); color: var(--color-accent-dark); border-radius: var(--radius-sm); padding: 0 var(--space-1); margin-left: var(--space-1); text-decoration: none; } a.cat:hover { background: var(--color-accent-pale); } /* カテゴリ一覧（トップ・/categories/） */ .cat-nav { margin-bottom: var(--space-4); } /* 記事一覧の一番下に置くカテゴリ導線（記事カードと区切る） */ .cat-nav-bottom { margin-top: var(--space-4); margin-bottom: 0; padding-top: var(--space-4); border-top: 1px solid var(--color-gray-300); } .cat-nav-heading { font-size: var(--text-base); font-weight: 700; margin: 0 0 var(--space-2); color: var(--color-accent-dark); } .cat-nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); } .cat-chip { display: inline-flex; align-items: center; gap: var(--space-1); background: var(--color-surface); border: 1px solid var(--color-gray-300); border-radius: 999px; padding: var(--space-1) var(--space-3); color: var(--color-accent-dark); text-decoration: none; font-size: var(--text-sm); transition: background 0.15s, border-color 0.15s; } .cat-chip:hover { background: var(--color-accent-tint); border-color: var(--color-accent); } .cat-count { background: var(--color-accent-tint); color: var(--color-accent-dark); border-radius: 999px; padding: 0 var(--space-1); font-size: 0.7rem; min-width: 1.4em; text-align: center; } /* パンくず */ .crumbs { font-size: var(--text-sm); color: var(--color-gray-500); margin-bottom: var(--space-2); } .crumbs a { color: var(--color-accent-dark); text-decoration: none; } .crumbs a:hover { text-decoration: underline; } .crumbs span[aria-hidden] { margin: 0 var(--space-1); } /* 記事ページ */ .post { background: var(--color-surface); border: 1px solid var(--color-gray-300); border-radius: var(--radius); padding: var(--space-4); } .post-title { font-size: var(--text-2xl); line-height: 1.4; margin: 0 0 var(--space-1); } .post-body h2 { font-size: var(--text-lg); background: var(--color-accent-pale); border-left: 6px solid var(--color-accent); padding: var(--space-1) var(--space-2); margin-top: var(--space-5); } .video-embed { text-align: center; margin: var(--space-4) 0; } .video-embed iframe { width: 100%; max-width: 560px; aspect-ratio: 16 / 9; height: auto; border: 0; } .video-info { font-size: var(--text-sm); color: var(--color-gray-700); word-break: break-all; } /* 本文中の動画タイムスタンプ（クリックでページ内プレイヤーを該当位置から再生） */ .post-body a.ts-seek { color: var(--color-accent-dark); font-variant-numeric: tabular-nums; text-decoration: none; cursor: pointer; white-space: nowrap; } .post-body a.ts-seek::before { content: "▶ "; font-size: 0.85em; } .post-body a.ts-seek:hover { text-decoration: underline; } /* 炎上サマリー（ざっくり要点）の中身カード。見出し(h2)はカード外（single.htmlで注入）にあり、 ここは中身だけを包む。熱量メーターのカードと見た目を揃える */ .enjou-summary { background: var(--color-surface); border: 1px solid var(--color-gray-300); border-radius: var(--radius); padding: var(--space-3) var(--space-4); margin: var(--space-2) 0 var(--space-4); } .enjou-summary .es-item { padding: var(--space-1) 0; line-height: 1.6; } .enjou-summary .es-label { display: inline; font-weight: bold; color: var(--color-accent-dark); margin: 0; } .enjou-summary .es-label::after { content: "："; } .enjou-summary .es-item:nth-child(1) .es-label::before { content: "🔥 "; } .enjou-summary .es-item:nth-child(2) .es-label::before { content: "⚡ "; } .enjou-summary .es-item:nth-child(3) .es-label::before { content: "💬 "; } .enjou-summary .es-text { display: inline; margin: 0; color: var(--color-gray-900); } /* 各行で一番大事な部分だけ強調（太字＋マーカー風の背景） */ .enjou-summary .es-text strong { font-weight: bold; color: var(--color-gray-900); background: linear-gradient(transparent 50%, var(--color-marker) 50%); padding: 0 2px; } /* 炎上ポイント（論点カード）: 火種分解＋感情タグ＋代表コメント（issue #25） */ .flame-points { display: grid; gap: var(--space-3); grid-template-columns: 1fr 1fr; } @media (max-width: 560px) { .flame-points { grid-template-columns: 1fr; } } .fp-card { border: 1px solid var(--color-gray-300); border-top: 4px solid var(--color-accent); border-radius: var(--radius); padding: var(--space-3); background: var(--color-surface); } .fp-card .fp-label { font-weight: bold; color: var(--color-accent-dark); margin: 0 0 var(--space-1); font-size: 1.05rem; } .fp-card .fp-emo { display: inline-block; font-size: 0.7rem; font-weight: bold; padding: 2px var(--space-2); border-radius: 999px; background: #fde8e6; color: #a02018; margin: 0 0 var(--space-2); } .fp-card .fp-why { margin: 0 0 var(--space-2); font-size: 0.92rem; line-height: 1.55; } .fp-card .fp-voice { margin: 0 0 var(--space-1); font-size: 0.8rem; color: var(--color-accent-dark); } .fp-card blockquote { margin: 0; font-size: 0.85rem; color: var(--color-gray-700); border-left: 2px solid var(--color-gray-300); padding-left: var(--space-2); } /* ポイント強調（太字＋マーカー）: 3行まとめ以外の本文セクションにも適用する */ .post-body .overview li strong, .post-body .fp-card .fp-why strong { font-weight: bold; background: linear-gradient(transparent 50%, var(--color-marker) 50%); padding: 0 2px; } /* 熱量メーター（コメント欄の盛り上がり）: 生値＋直近記事内の相対ランク（issue #26） */ /* 熱量メーターの中身カード。見出し(h2)はカード外（記事見出し）にあり、ここは指標だけを包む */ .heat-meter { background: var(--color-surface); border: 1px solid var(--color-gray-300); border-radius: var(--radius); padding: var(--space-3) var(--space-4); margin: var(--space-2) 0 var(--space-4); } .heat-meter .hm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: var(--space-3); margin: 0; } @media (max-width: 560px) { .heat-meter .hm-stats { grid-template-columns: repeat(2, 1fr); } } .heat-meter .hm-stat { margin: 0; } .heat-meter .hm-stat dt { font-size: 0.8rem; color: var(--color-gray-700); margin: 0 0 2px; } .heat-meter .hm-stat dd { margin: 0; line-height: 1.3; } .heat-meter .hm-stat dd strong { font-size: 1.4rem; font-weight: bold; color: var(--color-accent-dark); } .heat-meter .hm-note { display: block; font-size: 0.7rem; color: var(--color-gray-700); margin-top: 2px; } .heat-meter .hm-rank-row { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px dashed var(--color-gray-300); } .heat-meter .hm-rank { margin: 0; font-size: 0.9rem; color: var(--color-gray-900); } .heat-meter .hm-rank strong { color: var(--color-accent-dark); } /* 炎上度グレード（相対ランクの五分位 X>S>A>B>C）。 太字＋マーカー（本文 strong と同じ蛍光ペン表現）で強調し、熱い順に赤→灰でマーカー色を変える */ .heat-meter .hm-grade { flex: 0 0 auto; font-size: 2.1rem; font-weight: 900; line-height: 1; padding: 0 0.12em; color: var(--color-gray-900); background: linear-gradient(transparent 55%, var(--hm-grade-mark, var(--color-marker)) 55%); } .heat-meter .hm-grade-X { --hm-grade-mark: #ff5252; } .heat-meter .hm-grade-S { --hm-grade-mark: #ff8a65; } .heat-meter .hm-grade-A { --hm-grade-mark: #ffb74d; } .heat-meter .hm-grade-B { --hm-grade-mark: #ffe14d; } .heat-meter .hm-grade-C { --hm-grade-mark: #d7d7d7; } /* コメント欄の感情の割合バー（issue #27 / いいね加重・分類集計） */ .emo-bar { display: flex; height: 32px; border-radius: var(--radius-sm); overflow: hidden; margin: var(--space-2) 0; font-size: var(--text-sm); font-weight: 700; color: #fff; } .emo-bar span { display: flex; align-items: center; justify-content: center; white-space: nowrap; overflow: hidden; min-width: 0; padding: 0 var(--space-1); } /* 感情ごとに固定色（凡例・記事間で色の意味を一定に保つ）。熱量メーターの暖色帯と整合させる */ .emo-bar .emo-anger { background: #c0392b; } .emo-bar .emo-amazed { background: #d35400; } .emo-bar .emo-anxiety { background: #8e7cc3; } .emo-bar .emo-sympathy { background: #5d83a8; } .emo-bar .emo-defense { background: #2e8b57; } .emo-bar .emo-other { background: #7f8c8d; } .emo-bar-legend { font-size: var(--text-sm); color: var(--color-gray-700); margin: var(--space-1) 0 0; line-height: 1.5; } /* 注目のコメント */ .featured-comments { background: var(--color-gray-100); border: 1px solid var(--color-gray-300); padding: var(--space-3); border-radius: var(--radius-sm); } .comment { margin-bottom: var(--space-3); } .comment p { margin: var(--space-1) 0; } .comment blockquote { margin: 0; padding: var(--space-2) var(--space-3); background: var(--color-surface); border-left: 3px solid var(--color-accent); } .comment-source { font-size: var(--text-sm); color: var(--color-gray-500); text-align: right; margin: var(--space-2) 0 0; } /* 関連記事 */ .related { background: var(--color-accent-pale); border: 1px solid var(--color-gray-300); border-radius: var(--radius); padding: var(--space-3); margin: var(--space-4) 0 var(--space-2); } .related-heading { color: var(--color-gray-900); font-size: var(--text-base); font-weight: 700; border-left: 6px solid var(--color-accent); padding-left: var(--space-2); margin: 0 0 var(--space-2); } .related-card { display: flex; align-items: center; gap: var(--space-2); background: var(--color-surface); border: 1px solid var(--color-gray-300); border-radius: var(--radius-sm); padding: var(--space-2); margin-bottom: var(--space-2); color: var(--color-gray-900); text-decoration: none; font-weight: 700; } .related-card:hover { border-color: var(--color-accent); } .related-card img { width: 120px; height: auto; border-radius: var(--radius-sm); } /* 炎上主体タグ（記事ページ・issue #37） */ .post-tags { font-size: var(--text-sm); color: var(--color-gray-500); margin: var(--space-1) 0 0; } .tag { display: inline-block; background: var(--color-surface); border: 1px solid var(--color-gray-300); border-radius: 999px; padding: 0 var(--space-2); margin-left: var(--space-1); color: var(--color-accent-dark); text-decoration: none; } a.tag:hover { background: var(--color-accent-tint); border-color: var(--color-accent); } /* 同じジャンル／同じ人物・団体の炎上（記事下部の回遊導線・issue #37 / 同一主体導線） */ .same-genre, .same-subject { background: var(--color-surface); border: 1px solid var(--color-gray-300); border-radius: var(--radius); padding: var(--space-3); margin: var(--space-4) 0 var(--space-2); } .same-genre-heading, .same-subject-heading { color: var(--color-gray-900); font-size: var(--text-base); font-weight: 700; border-left: 6px solid var(--color-accent); padding-left: var(--space-2); margin: 0 0 var(--space-2); } .same-genre-tag, .same-subject-tag { margin-left: var(--space-2); font-size: var(--text-sm); font-weight: 400; color: var(--color-accent-dark); background: var(--color-accent-tint); border-radius: var(--radius-sm); padding: 0 var(--space-1); } .same-genre-list, .same-subject-list { list-style: none; margin: 0; padding: 0; } .same-genre-list li, .same-subject-list li { margin-bottom: var(--space-1); } .same-genre-list a, .same-subject-list a { color: var(--color-gray-900); text-decoration: none; } .same-genre-list a:hover, .same-subject-list a:hover { text-decoration: underline; color: var(--color-accent-dark); } .same-genre-more, .same-subject-more { margin: var(--space-2) 0 0; font-size: var(--text-sm); } .same-genre-more a, .same-subject-more a { color: var(--color-accent-dark); text-decoration: none; } .same-genre-more a:hover, .same-subject-more a:hover { text-decoration: underline; } /* パンくずリスト */ .breadcrumb { margin: 0 0 var(--space-3); font-size: var(--text-sm); color: var(--color-gray-500); } .breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); margin: 0; padding: 0; } .breadcrumb li { display: flex; align-items: center; } .breadcrumb li + li::before { content: "›"; margin: 0 var(--space-1); color: var(--color-gray-300); } .breadcrumb a { color: var(--color-accent); text-decoration: none; } .breadcrumb a:hover { text-decoration: underline; } .breadcrumb [aria-current="page"] { color: var(--color-gray-700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 18em; } /* 前後記事ナビ */ .post-nav { display: flex; gap: var(--space-2); margin: var(--space-4) 0 var(--space-2); } .post-nav-prev, .post-nav-next { flex: 1 1 0; min-width: 0; } .post-nav-next { text-align: right; } .post-nav a { display: block; height: 100%; background: var(--color-surface); border: 1px solid var(--color-gray-300); border-radius: var(--radius-sm); padding: var(--space-2); color: var(--color-gray-900); text-decoration: none; } .post-nav a:hover { border-color: var(--color-accent); } .post-nav-label { display: block; font-size: var(--text-sm); color: var(--color-accent); font-weight: 700; margin-bottom: var(--space-1); } .post-nav-title { display: block; font-size: var(--text-sm); color: var(--color-gray-700); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* 新着記事リスト */ .recent { border: 1px solid var(--color-gray-300); border-radius: var(--radius); padding: var(--space-3); margin: var(--space-4) 0 var(--space-2); } .recent-heading { color: var(--color-gray-900); font-size: var(--text-base); font-weight: 700; border-left: 6px solid var(--color-accent); padding-left: var(--space-2); margin: 0 0 var(--space-2); } .recent-list { list-style: none; margin: 0; padding: 0; } .recent-list li + li { border-top: 1px solid var(--color-gray-300); } .recent-list a { display: flex; gap: var(--space-2); padding: var(--space-2) 0; color: var(--color-gray-900); text-decoration: none; } .recent-list a:hover { color: var(--color-accent); } .recent-list time { flex: 0 0 auto; font-size: var(--text-sm); color: var(--color-gray-500); } /* トップのアーカイブ導線 */ .archive-entry { margin: var(--space-3) 0 0; } .archive-entry a { color: var(--color-accent-dark); font-weight: 700; text-decoration: none; } .archive-entry a:hover { text-decoration: underline; } /* 記事アーカイブ（全記事の月別一覧） */ .archive-lead { color: var(--color-gray-500); margin: 0 0 var(--space-4); } .archive-month { margin-bottom: var(--space-4); } .archive-month-heading { font-size: var(--text-base); font-weight: 700; color: var(--color-gray-900); border-left: 6px solid var(--color-accent); padding-left: var(--space-2); margin: 0 0 var(--space-2); display: flex; align-items: baseline; gap: var(--space-2); } .archive-month-count { font-size: var(--text-sm); font-weight: 400; color: var(--color-gray-500); } .archive-list { list-style: none; margin: 0; padding: 0; } .archive-list li + li { border-top: 1px solid var(--color-gray-300); } .archive-list a { display: flex; gap: var(--space-2); padding: var(--space-2) 0; color: var(--color-gray-900); text-decoration: none; } .archive-list a:hover { color: var(--color-accent); } .archive-list time { flex: 0 0 auto; font-size: var(--text-sm); color: var(--color-gray-500); } /* 広告 */ .advertisement { border: 1px solid var(--color-gray-300); padding: var(--space-2); margin-top: var(--space-4); text-align: center; } /* ページネーション */ .pagination { display: flex; justify-content: center; gap: var(--space-1); padding: var(--space-4) 0; list-style: none; } .pagination .page-item a { display: block; padding: var(--space-1) var(--space-2); background: var(--color-surface); border: 1px solid var(--color-gray-300); border-radius: var(--radius-sm); color: var(--color-gray-900); text-decoration: none; } .pagination .page-item.active a { background: var(--color-accent); color: #fff; border-color: var(--color-accent); } /* フッター */ .site-footer { margin-top: var(--space-5); padding: var(--space-3) 0; background: var(--color-gray-900); color: var(--color-gray-300); font-size: var(--text-sm); } .site-footer a { color: #fff; } .footer-nav { margin-bottom: var(--space-2); } .footer-nav a { margin-right: var(--space-3); } @media (max-width: 600px) { .post-card-link { flex-direction: column; gap: 0; } .post-card .thumb { width: 100%; height: auto; } .post-card-body { padding: var(--space-2) var(--space-3) !important; } .post { padding: var(--space-3); } }