.development-container {
  flex: 1; /* 余ったスペースを全て埋める */
  /* 既存の設定は維持 */
  background: #020405;
  display: flex;
  flex-direction: row;
  /* min-height: 600px; <-- これは削除または auto にしてもOK */
}





/* サイドバー */
.developments-sidebar {
  padding-top: 80px;
  width: 300px;
  flex-shrink: 0;
  order: 0;
}





/* --- タグリリスト --- */
.developments-sidebar-tags {
  /* ★ 変更: ダークテーマのカードスタイルを適用 */
  border: 1px solid rgba(0, 255, 0, 0.5); 
  border-radius: 8px;
  box-shadow: 0 0 60px rgba(0, 255, 128, 0.16);
  padding: 20px;
  color: #f0f0f0;
  /* margin-bottom は削除 (親の padding で管理) */
}

.taglist-label {
  text-align: center;
  display: block;
  font-weight: bold;
  font-size: 16px;
  cursor: pointer;
  padding: 8px;
  background-color: #444;
  color: #fff;
  border-radius: 4px;
}

.tags-collapsible-list {
  list-style: none;
  margin: 10px 0;
  max-height: 1000px;
  overflow: hidden;
  transition: max-height 0.4s ease-out, margin 0.4s ease-out;
}

.tags-collapsible-list.collapsed {
  margin: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-in, margin 0.4s ease-in;
}

.tag-search-container {
  text-align: center;
}

.tag-search-button {
  align-items: center;
  background: rgb(0, 255, 0);
  cursor: pointer;
  width: 200px;
  height: 30px;
}

.tags-collapsible-list strong {
  display: block;
  font-size: 18px;
  margin-top: 10px;
  margin-left: 10px;
  font-weight: bold;
  color: rgb(0, 255, 0);
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  /* はみ出した要素を折りたたむ */
  gap: 8px;
  padding: 4px 20px 30px;
}

.tag {
  cursor: pointer;
}

.tag input[type="checkbox"] {
  display: none;
}

.tag input[type="checkbox"]:checked+span {
  background-color: rgb(0, 255, 0);
  border-color: #000000;
  color: rgb(0, 0, 0);
}

.tag span {
  display: inline-block;
  padding: 4px 8px;
  border: 1px solid #ccc;
  border-radius: 10px;
  background: #222;
  color: white;
  transition: background-color 0.4s, border-color 0.4s;
}













/* 中央エリア：セキュリティ実験リスト */
.developments-postslist-section {
  overflow-y: auto;
  flex: 5;
  flex: 1;
  /* ★ 削除: height: calc(100vh - 80px); */
  /* ★ 削除: overflow-y: auto; */
  order: 1;
  margin-top: 0;
}


.developments-postslist-container {
  padding-top: 40px;
  padding-bottom: 40px;
  background: #020405;
  min-height: 600px;
  max-width: 1200px;
  width: 100%;
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  flex-grow: 1;
}

/* 各投稿ボックス */
.developments-post {
  background: #a1a1a1;
  height: 100px;
  border: 1px solid red;
  margin: 20px;
}
































/* development.css の末尾に追加 */

/* =======================================
   レスポンシブ対応 (メディアクエリ)
   ======================================= */

/* --- タブレット・スマホサイズ (1024px 以下) --- */
@media (max-width: 1024px) {

  /* body の overflow: hidden を解除 (スクロール可能にする) */
  body.development {
    overflow: auto;
  }

 
  .development-container {
    display: flex;
    flex-direction: column;
    height: auto; 
    flex: 1; /* ここでも flex: 1 を維持 */
  }

  /* サイドバー */
  .developments-sidebar {
    width: 100%;
    /* 幅を100%に */
    height: auto;
    /* 高さは自動 */
    overflow-y: visible;
    /* スクロールバーを非表示 */
    padding: 15px;
    /* 余白調整 */
    box-sizing: border-box;
    /* padding を含める */

    /* ★ 重要: メインコンテンツより上に表示 */
    order: -1;
  }

  /* メインコンテンツ */
  .developments-postslist-section {
    width: 100%;
    /* 幅を100%に */
    height: auto;
    /* 高さは自動 */
    overflow-y: visible;
    /* スクロールバーを非表示 */

    /* ★ 重要: サイドバーより下に表示 */
    order: 0;
  }

  /* (元の .development-container の高さ計算は不要になる) */
  .development-container {
    height: auto;
    /* 高さを自動に */
    /* display: flex; は .responsive-wrapper で指定 */
  }

  /* サイドバー内のリストが開いた時の高さを制限 (任意) */
  .tags-collapsible-list {
    max-height: 300px;
    /* 開いた時の最大高さを制限 */
    overflow-y: auto;
    /* 必要ならスクロールバー表示 */
  }

  .tags-collapsible-list.collapsed {
    max-height: 0;
    /* 閉じた状態は維持 */
    overflow: hidden;
  }
}


/* --- スマートフォンサイズ (767px 以下) --- */
@media (max-width: 767px) {
  .developments-sidebar {
    padding: 10px;
    /* スマホ用にさらに余白調整 */
  }

  /* 必要に応じてフォントサイズなどを調整 */
  .taglist-label {
    font-size: 1em;
  }

  .tag span {
    font-size: 0.9em;
    padding: 3px 6px;
  }

  .tags-collapsible-list strong {
    font-size: 1em;
  }
}