/* 1. 基本設定（最新のシンプルな記述） */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif; line-height: 1.6; color: #333; background: #f0f0f0; }

#container { width: 1000px; margin: 0 auto; background: #ffffff; position: relative; }

/* 2. ヘッダー */
header { background: #2c5e6b; color: #ffffff; padding: 30px; }
header h1 { font-size: 24px; }

/* 3. コンテンツエリア（Flexboxの魔法） */
.flex-wrapper {
    display: flex; /* これだけで子要素が横並びになります */
    flex-direction: row; /* 横並びを指定（デフォルト） */
}

/* 4. ナビゲーション（Flexアイテム：左） */
nav { width: 300px; padding: 20px; background: #e2e2e2; min-height: 400px; }
nav ul { list-style: none; }
nav ul li { padding: 10px; border-bottom: 1px solid #ccc; }

/* 5. メインコンテンツ（Flexアイテム：右） */
main { width: 700px; padding: 20px; background: #f0fff0; min-height: 400px; }
main h2 { color: #2c5e6b; border-bottom: 2px solid #2c5e6b; margin-bottom: 15px; }

dl.news-list dt { font-weight: bold; color: #e67e22; margin-top: 10px; }
dl.news-list dd { margin-left: 0; padding-bottom: 10px; border-bottom: 1px dashed #ccc; }

/* 6. フッター */
footer { background: #333; color: #fff; text-align: center; padding: 20px; }

/* 7. ハンバーガーボタン（初期状態） */
.menu-btn { display: none; }

/* --- レスポンシブ設定 --- */
@media screen and (max-width: 1000px) {
    #container { width: 100%; }

    /* Flexboxなら並び替えも一瞬 */
    .flex-wrapper { flex-direction: column; } /* 縦並びに変更 */

    nav {
        display: none;
        width: 100%; min-height: auto; background: #ddd;
    }
    main { width: 100%; }

    .menu-btn {
        display: block; position: absolute; top: 20px; right: 20px;
        width: 44px; height: 44px; background: #fff; border: 2px solid #2c5e6b;
        cursor: pointer; text-align: center; line-height: 40px; font-size: 24px;
        color: #2c5e6b; z-index: 100;
    }

    nav.active { display: block; }
}