/* テンプレート46: ニュース/ブログ風タイムライン */
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&family=Noto+Sans+JP:wght@400;500;700&display=swap');
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Noto Sans JP', sans-serif; font-size: 16px; line-height: 1.9; color: #2d3748; background: #f7fafc; min-height: 100vh; }

/* トップバー */
.top-bar { background: #1a202c; padding: 8px 30px; display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; }
.top-bar-date { color: #a0aec0; }
.top-bar-social a { color: #a0aec0; text-decoration: none; margin-left: 15px; }
.top-bar-social a:hover { color: #fff; }

/* メインヘッダー */
.site-header { background: #fff; padding: 25px 30px; border-bottom: 1px solid #e2e8f0; }
.header-inner { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; }
.logo { font-family: 'Merriweather', serif; font-size: 1.8rem; font-weight: 700; color: #1a202c; }
.logo span { color: #e53e3e; }

.main-nav ul { list-style: none; display: flex; gap: 30px; }
.main-nav a { color: #4a5568; text-decoration: none; font-weight: 500; position: relative; transition: color 0.3s; }
.main-nav a:hover { color: #e53e3e; }
.main-nav a::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 2px; background: #e53e3e; transition: width 0.3s; }
.main-nav a:hover::after { width: 100%; }

.hamburger { display: none; width: 28px; height: 22px; position: relative; cursor: pointer; }
.hamburger span { display: block; position: absolute; width: 100%; height: 2px; background: #1a202c; transition: all 0.3s; }
.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 10px; }
.hamburger span:nth-child(3) { top: 20px; }
.hamburger.active span:nth-child(1) { transform: rotate(45deg); top: 10px; }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: rotate(-45deg); top: 10px; }

.mobile-nav { display: none; position: fixed; top: 0; right: -100%; width: 280px; height: 100vh; background: #1a202c; padding: 80px 30px; transition: right 0.4s; z-index: 999; }
.mobile-nav.open { right: 0; }
.mobile-nav ul { list-style: none; }
.mobile-nav a { display: block; padding: 15px 0; color: #fff; text-decoration: none; border-bottom: 1px solid #2d3748; }

/* レイアウト */
.layout-wrapper { max-width: 1200px; margin: 0 auto; padding: 40px 30px; display: grid; grid-template-columns: 1fr 350px; gap: 50px; }

/* メインコンテンツ */
.main-content h1 { font-family: 'Merriweather', serif; font-size: 2rem; color: #1a202c; margin-bottom: 30px; padding-bottom: 15px; border-bottom: 3px solid #e53e3e; }

/* タイムライン */
.timeline { position: relative; padding-left: 30px; }
.timeline::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, #e53e3e, #ed8936, #ecc94b); border-radius: 3px; }

.timeline-item { position: relative; margin-bottom: 40px; padding-left: 30px; }
.timeline-item::before { content: ''; position: absolute; left: -33px; top: 5px; width: 12px; height: 12px; background: #e53e3e; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 3px #e53e3e; }

.timeline-date { font-size: 0.85rem; color: #e53e3e; font-weight: 600; margin-bottom: 8px; }

.timeline-card { background: #fff; border-radius: 12px; padding: 25px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); transition: all 0.3s; }
.timeline-card:hover { transform: translateX(10px); box-shadow: 0 8px 25px rgba(0,0,0,0.1); }

.timeline-card h2 { font-size: 1.3rem; color: #1a202c; margin-bottom: 12px; }
.timeline-card p { color: #718096; font-size: 0.95rem; }

.timeline-image { margin: 15px 0; border-radius: 8px; overflow: hidden; }
.timeline-image img { width: 100%; height: 180px; object-fit: cover; transition: transform 0.5s; }
.timeline-card:hover .timeline-image img { transform: scale(1.05); }

.read-more { display: inline-block; margin-top: 15px; color: #e53e3e; text-decoration: none; font-weight: 500; font-size: 0.9rem; }
.read-more:hover { text-decoration: underline; }

/* サイドバー */
.sidebar { position: sticky; top: 30px; height: fit-content; }

.sidebar-widget { background: #fff; border-radius: 12px; padding: 25px; margin-bottom: 25px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
.widget-title { font-size: 1.1rem; font-weight: 700; color: #1a202c; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 2px solid #e2e8f0; }

.category-list { list-style: none; }
.category-list li { margin-bottom: 12px; }
.category-list a { color: #4a5568; text-decoration: none; display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #f7fafc; transition: all 0.3s; }
.category-list a:hover { color: #e53e3e; padding-left: 10px; }
.category-list span { background: #edf2f7; color: #718096; padding: 2px 10px; border-radius: 10px; font-size: 0.8rem; }

.popular-post { display: flex; gap: 15px; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid #f7fafc; }
.popular-post:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.popular-post img { width: 80px; height: 60px; object-fit: cover; border-radius: 6px; }
.popular-post-title { font-size: 0.9rem; color: #2d3748; line-height: 1.5; }
.popular-post-title:hover { color: #e53e3e; }

/* フッター */
.site-footer { background: #1a202c; color: #a0aec0; padding: 50px 30px; margin-top: 50px; }
.footer-inner { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; }
.footer-nav a { color: #a0aec0; text-decoration: none; margin: 0 15px; }
.footer-nav a:hover { color: #fff; }

/* トップへ戻る */
.back-to-top { display: none; position: fixed; bottom: 30px; right: 30px; width: 50px; height: 50px; background: #e53e3e; color: #fff; border: none; border-radius: 50%; cursor: pointer; font-size: 1.2rem; box-shadow: 0 5px 20px rgba(229, 62, 62, 0.3); transition: all 0.3s; z-index: 998; }
.back-to-top:hover { transform: translateY(-5px); background: #c53030; }

/* フェードイン */
.fade-in { opacity: 0; transform: translateY(30px); transition: all 0.6s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }

/* サイトマップ */
.sitemap-list { list-style: none; }
.sitemap-list li { margin-bottom: 12px; padding-left: 20px; position: relative; }
.sitemap-list li::before { content: '📰'; position: absolute; left: 0; font-size: 0.8rem; }
.sitemap-list a { color: #e53e3e; text-decoration: none; }
.sitemap-list a:hover { text-decoration: underline; }

@media (max-width: 900px) {
    .layout-wrapper { grid-template-columns: 1fr; }
    .sidebar { position: static; }
    .main-nav { display: none; }
    .hamburger { display: block; }
    .mobile-nav { display: block; }
    .top-bar { display: none; }
}