@charset "UTF-8";

/* 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;
    }
}