/* ===================================================== Life Tools Lab — Blog Styles ライト/ダーク両対応。CSS変数で全テーマを制御。 data-theme="dark" を に付与するとダークモードに切替。 ====================================================== */ /* ===== 1. Custom Properties（テーマ変数） ===== */ :root { /* ブランドカラー（共通） */ --primary: #00adb5; --primary-dark: #008c96; --primary-light: #e0f7f8; /* カテゴリカラー */ --cat-default: #00adb5; --cat-tools: #2ecc71; --cat-work: #3498db; --cat-web: #9b59b6; --cat-lifehack: #e67e22; /* ライトモード */ --bg: #f4f6f8; --surface: #ffffff; --surface-2: #f0f4f8; --surface-3: #e8edf3; --border: #dde3ea; --text: #1e293b; --text-muted: #64748b; --text-xs: #94a3b8; --heading: #0f172a; --link: #007a80; --link-hover: #005f65; --code-bg: #f1f5f9; --code-text: #334155; --blockquote-bg: #f8fafc; --blockquote-border: #00adb5; --shadow-sm: 0 1px 2px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.08); --shadow: 0 2px 8px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.06); --shadow-md: 0 4px 16px rgba(0,0,0,0.1), 0 2px 6px rgba(0,0,0,0.06); --header-bg: #ffffff; --header-border: #e8edf3; --footer-bg: #1e293b; --footer-text: #94a3b8; --footer-link: #cbd5e1; --toggle-track: #e2e8f0; --toggle-thumb: #64748b; } [data-theme="dark"] { --bg: #111827; --surface: #1e2535; --surface-2: #252f42; --surface-3: #2d3a52; --border: #2d3a52; --text: #e2e8f0; --text-muted: #94a3b8; --text-xs: #64748b; --heading: #f1f5f9; --link: #2dd4bf; --link-hover: #5eead4; --code-bg: #1a2234; --code-text: #cbd5e1; --blockquote-bg: #1e2535; --blockquote-border: #00adb5; --shadow-sm: 0 1px 2px rgba(0,0,0,0.3); --shadow: 0 2px 8px rgba(0,0,0,0.3); --shadow-md: 0 4px 16px rgba(0,0,0,0.4); --header-bg: #161d2e; --header-border: #2d3a52; --footer-bg: #0f1623; --footer-text: #64748b; --footer-link: #94a3b8; --toggle-track: #374151; --toggle-thumb: #e2e8f0; --primary-light: #003338; } /* ===== 2. Base reset ===== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; background-color: var(--bg); color: var(--text); line-height: 1.7; -webkit-font-smoothing: antialiased; transition: background-color 0.2s, color 0.2s; } a { color: var(--link); text-decoration: none; transition: color 0.15s; } a:hover { color: var(--link-hover); } img { max-width: 100%; height: auto; display: block; } /* ===== 3. 全体ラッパー ===== */ .blog-wrapper { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; } .blog-main { flex: 1; } .container { max-width: 1100px; margin: 0 auto; padding: 0 24px; } /* ===== 4. ヘッダー ===== */ .blog-header { position: sticky; top: 0; z-index: 100; background-color: var(--header-bg); border-bottom: 1px solid var(--header-border); box-shadow: var(--shadow-sm); transition: background-color 0.2s, border-color 0.2s; } .blog-header-inner { max-width: 1100px; margin: 0 auto; padding: 0 24px; height: 60px; display: flex; align-items: center; gap: 24px; } .blog-logo { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--heading); font-weight: 700; font-size: 1rem; white-space: nowrap; flex-shrink: 0; transition: opacity 0.15s; } .blog-logo:hover { opacity: 0.75; color: var(--heading); } .blog-logo-icon { font-size: 1.1rem; color: var(--primary); } .blog-logo-text { letter-spacing: -0.01em; } /* ===== 5. ナビゲーション ===== */ .blog-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; } .blog-nav-link { padding: 6px 14px; border-radius: 6px; font-size: 0.875rem; font-weight: 500; color: var(--text-muted); text-decoration: none; transition: background-color 0.15s, color 0.15s; white-space: nowrap; } .blog-nav-link:hover { background-color: var(--surface-2); color: var(--text); } .blog-nav-link.active { color: var(--primary); background-color: var(--primary-light); } /* ===== 6. ダークモードトグル ===== */ .theme-toggle { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--border); border-radius: 8px; background-color: var(--surface); color: var(--text-muted); cursor: pointer; transition: background-color 0.15s, border-color 0.15s, color 0.15s; margin-left: 8px; } .theme-toggle:hover { background-color: var(--surface-2); color: var(--text); border-color: var(--primary); } /* ライトモード: 月アイコンを表示（→ダークに切替する）、ダークモード: 太陽アイコンを表示 */ .theme-toggle-sun { display: none; } .theme-toggle-moon { display: flex; } [data-theme="dark"] .theme-toggle-sun { display: flex; } [data-theme="dark"] .theme-toggle-moon { display: none; } /* ===== 7. ヒーローセクション（ブログトップ） ===== */ .blog-hero { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); padding: 56px 24px; text-align: center; position: relative; overflow: hidden; } .blog-hero::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 20% 50%, rgba(255,255,255,0.08) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(255,255,255,0.06) 0%, transparent 40%); } .blog-hero-inner { position: relative; max-width: 600px; margin: 0 auto; } .blog-hero-title { font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 800; color: #ffffff; letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 12px; } .blog-hero-desc { font-size: 0.95rem; color: rgba(255,255,255,0.85); line-height: 1.6; } /* ===== 8. カテゴリチップ一覧 ===== */ .category-section { padding: 32px 0 0; } .category-section-title { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-xs); margin-bottom: 12px; } .category-chips { display: flex; flex-wrap: wrap; gap: 8px; } .category-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 20px; font-size: 0.825rem; font-weight: 500; text-decoration: none; background-color: var(--surface); border: 1.5px solid var(--border); color: var(--text-muted); transition: border-color 0.15s, color 0.15s, background-color 0.15s; } .category-chip:hover { border-color: var(--chip-color, var(--primary)); color: var(--chip-color, var(--primary)); background-color: var(--surface-2); } .category-chip.active { border-color: var(--chip-color, var(--primary)); color: var(--chip-color, var(--primary)); background-color: var(--primary-light); } .category-chip-count { font-size: 0.75rem; color: var(--text-xs); background-color: var(--surface-2); padding: 1px 7px; border-radius: 10px; transition: background-color 0.15s; } .category-chip:hover .category-chip-count, .category-chip.active .category-chip-count { background-color: rgba(0,0,0,0.07); } /* ===== 9. セクション共通 ===== */ .section { padding: 40px 0; } .section-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 24px; } .section-title { font-size: 1.1rem; font-weight: 700; color: var(--heading); display: flex; align-items: center; gap: 8px; } .section-title::before { content: ''; display: inline-block; width: 4px; height: 1.1em; background-color: var(--primary); border-radius: 2px; flex-shrink: 0; } .section-more { font-size: 0.825rem; color: var(--primary); text-decoration: none; font-weight: 500; white-space: nowrap; transition: color 0.15s; } .section-more:hover { color: var(--primary-dark); } /* ===== 10. 記事カードグリッド ===== */ .posts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } /* ===== 11. 記事カード ===== */ .blog-card { background-color: var(--surface); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; text-decoration: none; color: inherit; border: 1px solid var(--border); transition: transform 0.2s, box-shadow 0.2s; } .blog-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); color: inherit; } .blog-card-banner { height: 110px; background: linear-gradient( 135deg, var(--banner-color, #00adb5) 0%, color-mix(in srgb, var(--banner-color, #00adb5) 60%, #001a20) 100% ); position: relative; overflow: hidden; flex-shrink: 0; } /* 装飾パターン */ .blog-card-banner::after { content: ''; position: absolute; right: -20px; bottom: -30px; width: 100px; height: 100px; border-radius: 50%; background: rgba(255,255,255,0.08); } .blog-card-banner::before { content: ''; position: absolute; right: 20px; top: -20px; width: 60px; height: 60px; border-radius: 50%; background: rgba(255,255,255,0.06); } .blog-card-featured-badge { position: absolute; top: 12px; left: 12px; background-color: rgba(255,255,255,0.2); backdrop-filter: blur(4px); color: #fff; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; padding: 3px 10px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.3); } .blog-card-body { padding: 18px 18px 20px; display: flex; flex-direction: column; flex: 1; gap: 8px; } .blog-card-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .blog-card-category { font-size: 0.725rem; font-weight: 600; letter-spacing: 0.03em; color: var(--cat-color, var(--primary)); text-decoration: none; padding: 2px 8px; border-radius: 4px; background-color: color-mix(in srgb, var(--cat-color, var(--primary)) 12%, transparent); transition: background-color 0.15s; } .blog-card-category:hover { background-color: color-mix(in srgb, var(--cat-color, var(--primary)) 20%, transparent); } .blog-card-date { font-size: 0.75rem; color: var(--text-xs); } .blog-card-title { font-size: 0.975rem; font-weight: 700; color: var(--heading); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .blog-card-excerpt { font-size: 0.825rem; color: var(--text-muted); line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; flex: 1; } .blog-card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--border); } .blog-card-readtime { font-size: 0.725rem; color: var(--text-xs); } .blog-card-arrow { font-size: 0.8rem; color: var(--primary); font-weight: 700; transition: transform 0.15s; } .blog-card:hover .blog-card-arrow { transform: translateX(3px); } /* フィーチャーカード（大きめ表示） */ .blog-card.featured { grid-column: 1 / -1; flex-direction: row; } .blog-card.featured .blog-card-banner { width: 280px; min-width: 280px; height: auto; min-height: 180px; border-radius: 0; } .blog-card.featured .blog-card-title { font-size: 1.15rem; } .blog-card.featured .blog-card-excerpt { -webkit-line-clamp: 4; } /* ===== 11b. トップページ：ツールカード ===== */ .tools-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; } .tool-card { background-color: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); padding: 24px; display: flex; flex-direction: column; gap: 14px; text-decoration: none; color: inherit; transition: transform 0.2s, box-shadow 0.2s; } .tool-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); color: inherit; } .tool-card-icon { width: 56px; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.7rem; flex-shrink: 0; background-color: color-mix(in srgb, var(--banner-color, var(--primary)) 15%, transparent); } .tool-card-body { display: flex; flex-direction: column; gap: 6px; flex: 1; } .tool-card-title { font-size: 1.05rem; font-weight: 700; color: var(--heading); } .tool-card-desc { font-size: 0.875rem; color: var(--text-muted); line-height: 1.65; flex: 1; } .tool-card-cta { display: flex; align-items: center; gap: 4px; font-size: 0.825rem; font-weight: 600; color: var(--primary); margin-top: 4px; } .tool-card:hover .tool-card-cta .blog-card-arrow { transform: translateX(3px); } /* ===== 12. 空の状態 ===== */ .posts-empty { text-align: center; padding: 64px 24px; color: var(--text-muted); font-size: 0.9rem; } /* ===== 13. パンくずリスト ===== */ .breadcrumb { padding: 16px 0 0; font-size: 0.8rem; color: var(--text-xs); display: flex; flex-wrap: wrap; gap: 4px; align-items: center; } .breadcrumb a { color: var(--text-xs); text-decoration: none; transition: color 0.15s; } .breadcrumb a:hover { color: var(--primary); } .breadcrumb-sep { color: var(--border); } /* ===== 14. 記事ページ ===== */ .article-wrapper { max-width: 740px; margin: 0 auto; padding: 0 24px; } .article-header { padding: 32px 0 28px; border-bottom: 1px solid var(--border); margin-bottom: 36px; } .article-category-link { display: inline-flex; align-items: center; font-size: 0.775rem; font-weight: 600; color: var(--cat-color, var(--primary)); text-decoration: none; padding: 3px 10px; border-radius: 5px; background-color: color-mix(in srgb, var(--cat-color, var(--primary)) 12%, transparent); margin-bottom: 14px; transition: background-color 0.15s; } .article-category-link:hover { background-color: color-mix(in srgb, var(--cat-color, var(--primary)) 22%, transparent); } .article-title { font-size: clamp(1.4rem, 3.5vw, 1.85rem); font-weight: 800; color: var(--heading); line-height: 1.35; letter-spacing: -0.02em; margin-bottom: 18px; } .article-meta { display: flex; flex-wrap: wrap; gap: 16px; font-size: 0.8rem; color: var(--text-xs); } .article-meta-item { display: flex; align-items: center; gap: 5px; } /* ===== 15. 記事本文タイポグラフィ ===== */ .article-body { font-size: 1rem; line-height: 1.85; color: var(--text); padding-bottom: 48px; } .article-body h2 { font-size: 1.35rem; font-weight: 800; color: var(--heading); margin: 2.5em 0 0.8em; padding-bottom: 0.4em; border-bottom: 2px solid var(--border); letter-spacing: -0.01em; line-height: 1.35; } .article-body h2:first-child { margin-top: 0; } .article-body h3 { font-size: 1.1rem; font-weight: 700; color: var(--heading); margin: 2em 0 0.6em; padding-left: 12px; border-left: 3px solid var(--primary); line-height: 1.4; } .article-body h4 { font-size: 1rem; font-weight: 700; color: var(--heading); margin: 1.5em 0 0.5em; } .article-body p { margin-bottom: 1.4em; } .article-body ul, .article-body ol { margin: 0 0 1.4em 1.4em; } .article-body li { margin-bottom: 0.4em; } .article-body li > ul, .article-body li > ol { margin-top: 0.3em; margin-bottom: 0.3em; } .article-body a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color 0.15s; } .article-body a:hover { color: var(--link-hover); } .article-body strong { font-weight: 700; color: var(--heading); } .article-body em { font-style: italic; color: var(--text-muted); } .article-body blockquote { margin: 1.5em 0; padding: 16px 20px; background-color: var(--blockquote-bg); border-left: 4px solid var(--blockquote-border); border-radius: 0 8px 8px 0; color: var(--text-muted); font-style: italic; } .article-body blockquote p { margin-bottom: 0; } .article-body code { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; font-size: 0.875em; background-color: var(--code-bg); color: var(--code-text); padding: 2px 6px; border-radius: 4px; border: 1px solid var(--border); } .article-body pre { margin: 1.5em 0; padding: 20px; background-color: var(--code-bg); color: var(--code-text); border-radius: 10px; overflow-x: auto; border: 1px solid var(--border); font-size: 0.875rem; line-height: 1.6; } .article-body pre code { background: none; border: none; padding: 0; font-size: inherit; color: inherit; } /* Astro(Shiki) のインライン色をサイトのライト/ダークに合わせる */ .article-body pre.astro-code { background-color: var(--code-bg) !important; color: var(--code-text) !important; } .article-body pre.astro-code code, .article-body pre.astro-code span { color: inherit !important; background-color: transparent !important; } .article-body table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: 0.9rem; } .article-body th { background-color: var(--surface-2); font-weight: 700; text-align: left; padding: 10px 14px; border: 1px solid var(--border); color: var(--heading); } .article-body td { padding: 9px 14px; border: 1px solid var(--border); vertical-align: top; } .article-body tr:nth-child(even) td { background-color: var(--surface-2); } .article-body img { display: block; border-radius: 8px; /* 直前の文に寄せ、次の文との間を広げて「どの説明の図か」を分かりやすくする */ margin: 0.35em auto 2.4em; box-shadow: var(--shadow); } .article-body hr { border: none; border-top: 2px solid var(--border); margin: 2em 0; } /* ===== 16. 記事タグ ===== */ .article-tags { display: flex; flex-wrap: wrap; gap: 8px; padding: 24px 0; border-top: 1px solid var(--border); margin-bottom: 40px; } .article-tag { font-size: 0.775rem; color: var(--text-muted); background-color: var(--surface-2); border: 1px solid var(--border); border-radius: 4px; padding: 4px 10px; text-decoration: none; transition: border-color 0.15s, color 0.15s; } .article-tag:hover { border-color: var(--primary); color: var(--primary); } /* ===== 17. 記事ナビゲーション（前後） ===== */ .article-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 48px; padding-top: 8px; } .article-nav-link { display: flex; flex-direction: column; gap: 4px; padding: 16px; background-color: var(--surface); border: 1px solid var(--border); border-radius: 10px; text-decoration: none; color: inherit; transition: border-color 0.15s, box-shadow 0.15s; } .article-nav-link:hover { border-color: var(--primary); box-shadow: var(--shadow); color: inherit; } .article-nav-label { font-size: 0.725rem; color: var(--text-xs); font-weight: 600; letter-spacing: 0.04em; } .article-nav-title { font-size: 0.875rem; color: var(--heading); font-weight: 600; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .article-nav-link.prev { align-items: flex-start; } .article-nav-link.next { align-items: flex-end; text-align: right; } /* ===== 18. 関連記事 ===== */ .related-posts { padding: 32px 0 48px; border-top: 1px solid var(--border); } .related-posts-title { font-size: 1.05rem; font-weight: 700; color: var(--heading); margin-bottom: 20px; display: flex; align-items: center; gap: 8px; } .related-posts-title::before { content: ''; display: inline-block; width: 4px; height: 1em; background-color: var(--primary); border-radius: 2px; } .related-posts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } /* ===== 19. カテゴリページ ===== */ .category-page-header { padding: 36px 0 28px; border-bottom: 1px solid var(--border); margin-bottom: 32px; } .category-page-label { font-size: 0.775rem; font-weight: 600; letter-spacing: 0.06em; color: var(--text-xs); text-transform: uppercase; margin-bottom: 8px; } .category-page-title { font-size: clamp(1.4rem, 3vw, 1.8rem); font-weight: 800; color: var(--heading); letter-spacing: -0.02em; display: flex; align-items: center; gap: 12px; } .category-page-badge { display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 600; color: #fff; background-color: var(--cat-color, var(--primary)); padding: 3px 12px; border-radius: 12px; } .category-page-count { font-size: 0.875rem; color: var(--text-muted); font-weight: 400; margin-top: 8px; } /* ===== 20. フッター ===== */ .blog-footer { background-color: var(--footer-bg); color: var(--footer-text); padding: 32px 0; margin-top: auto; } .blog-footer-inner { max-width: 1100px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .blog-footer-copy { font-size: 0.825rem; color: var(--footer-text); } .blog-footer-nav { display: flex; gap: 20px; } .blog-footer-nav a { font-size: 0.825rem; color: var(--footer-link); text-decoration: none; transition: color 0.15s; } .blog-footer-nav a:hover { color: var(--primary); } /* ===== 21. 区切り線 / ユーティリティ ===== */ .divider { border: none; border-top: 1px solid var(--border); margin: 0; } .back-link { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--text-muted); text-decoration: none; padding: 8px 0; margin-bottom: 8px; transition: color 0.15s; } .back-link:hover { color: var(--primary); } /* ===== 22. レスポンシブ ===== */ @media (max-width: 900px) { .posts-grid { grid-template-columns: repeat(2, 1fr); } .related-posts-grid { grid-template-columns: repeat(2, 1fr); } .blog-card.featured { flex-direction: column; } .blog-card.featured .blog-card-banner { width: 100%; min-width: 0; height: 140px; } } @media (max-width: 600px) { .blog-header-inner { padding: 0 16px; height: 54px; gap: 12px; } .blog-logo-text { display: none; } .blog-nav { gap: 2px; } .blog-nav-link { padding: 6px 10px; font-size: 0.825rem; } .container { padding: 0 16px; } .posts-grid { grid-template-columns: 1fr; } .related-posts-grid { grid-template-columns: 1fr; } .blog-hero { padding: 40px 16px; } .article-wrapper { padding: 0 16px; } .article-nav { grid-template-columns: 1fr; } .blog-footer-inner { flex-direction: column; align-items: flex-start; gap: 12px; } .blog-footer-nav { flex-wrap: wrap; gap: 12px; } } /* ===== 23. アクセシビリティ ===== */ :focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 4px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } html { scroll-behavior: auto; } }