@charset "utf-8";

.horizontal-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 30px;
}

/* 左のボタンはグリッド2列 */
.circular2 {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 10px 20px;
  margin-bottom: 10px; 
}

.category-filter {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
  gap: 15px;
  margin-top: -10px; /* ← ここで上に寄せる（必要に応じて数値調整） */
}

/* 説明文とセレクトボックスを縦方向に */
.filter-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

/* 説明文の余白 */
.filter-description {
  margin-bottom: 20px; /* ← ここを広げる */
  font-size: 16px;
}

.select-group {
  margin-top: 10px;
  display: flex;
  gap: 15px;
  justify-content: flex-end;  /* ← 横並び + 右寄せ */
  width: 100%;                /* ← 横幅いっぱいにして右寄せが効くように */
}
@media screen and (max-width: 768px) {
  .horizontal-container {
    flex-direction: column;  /* 縦並びに変更 */
    gap: 20px;                /* セクション間の余白 */
  }

  .circular2 {
    grid-template-columns: 1fr; /* ボタンを1列にする */
    gap: 10px;
  }

  .filter-wrap {
    align-items: flex-start;
  }

  .select-group {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 10px;
  }

  select.form-control {
    width: 100%;
    font-size: 16px;
  }

  .button_wrap button {
    width: 100%;
    font-size: 16px;
  }
}