/* 基本・ヘッダー・レイアウトは変更なし */
body { font-family: sans-serif; line-height: 1.5; color: #333; margin: 0; padding-top: 42px; background-color: #f8f9fa; }
.container { max-width: 1000px; margin: 0 auto; padding: 0 20px; }
.sticky-header { position: fixed; top: 0; left: 0; width: 100%; height: 40px; background: #fff; border-bottom: 2px solid #008d40; z-index: 9999; display: flex; align-items: center; }
.header-container { width: 100%; max-width: 1000px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; }
.header-container h1 { font-size: 0.95rem; margin: 0; }
.header-container h1 a { color: #008d40; text-decoration: none; font-weight: bold; }

/* リスト全体のスタイル */
nav ul {
    list-style: none;         /* 点（・）を消す */
    margin: 0;
    padding: 0;
    display: flex;            /* 横並びにする */
    background-color: #333;   /* 背景色（濃いグレー） */
}

/* 各メニュー項目のスタイル */
nav ul li {
    border-right: 1px solid #fff; /* 項目間の区切り線 */
}

/* リンク自体のスタイル */
nav ul li a {
    display: block;           /* クリック範囲を広げる */
    color: white;             /* 文字色 */
    padding: 15px 25px;       /* 上下左右の余白 */
    text-decoration: none;    /* 下線を消す */
}

/* マウスを乗せた時の動き */
nav ul li a:hover {
    background-color: #555;   /* 少し明るくする */
}

/* メインレイアウト */
.main-layout { display: flex; gap: 20px; margin-top: 15px; }
.sidebar { flex: 1; min-width: 180px; }
.sticky-sidebar { position: sticky; top: 55px; }
.content-area { flex: 3; }

/* 記事カード：ぬるっと動く */
.post-card {
    background: #fff; margin-bottom: 8px; border: 1px solid #e0e0e0; border-left: 4px solid #008d40;
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.3s ease;
    will-change: transform;
}
.post-card:hover { transform: translateX(6px); box-shadow: 4px 4px 12px rgba(0,0,0,0.08); background-color: #fcfdfc; }
.post-link { display: block; text-decoration: none; color: inherit; padding: 10px 15px; }
.post-content-wrapper { display: flex; gap: 12px; }
.post-thumb { flex: 0 0 100px; height: 65px; background: #eee; border-radius: 2px; }
.post-header h2 { font-size: 1.05rem; margin: 0; color: #333; }
.date { font-size: 0.75rem; color: #888; }
.post-lead { font-size: 0.85rem; color: #555; margin: 2px 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.read-more { font-size: 0.75rem; color: #008d40; font-weight: bold; }

/* サイドバー：淡い緑 */
.widget { background: #fff; padding: 10px; border: 1px solid #e0e0e0; }
.widget h3 { font-size: 0.85rem; margin: 0 0 5px 0; border-bottom: 1px solid #008d40; padding-bottom: 3px; }
.category-list { list-style: none; padding: 0; margin: 0; }
.category-list li a { display: block; padding: 6px 10px; font-size: 0.8rem; color: #333; text-decoration: none; border-bottom: 1px dashed #eee; transition: 0.2s; }
.category-list li a:hover { background-color: #e6f4ea; color: #008d40; border-radius: 4px; font-weight: bold; }

/* 個別ページ用 */
.post-detail-content { background: #fff; padding: 30px; border: 1px solid #e0e0e0; border-radius: 4px; }
.post-detail-content h1 { font-size: 1.5rem; margin: 10px 0 20px; color: #333; }
.entry-body { line-height: 1.8; font-size: 1rem; }

footer { text-align: center; padding: 10px; background: #333; color: #fff; font-size: 0.7rem; margin-top: 30px; }

@media (max-width: 768px) {
    .main-layout { flex-direction: column; }
    .post-card:hover { transform: none; }
}