/* ======================================================
   event_search.css — 完全版
   - フィルターUI（#bunkasai-filter）
   - モバイル時は 1行目=地域 / 2行目=開催月 / 3行目=左:件数 右:解除
   - ラベル幅を統一し、プルダウン左位置と幅を揃える
   - プルダウン内テキストと解除ボタンの文字色は常に黒
   - 「他の説明会・イベント一覧」は常時表示（ULはflex・gap=0）
   - 終了イベントのアコーデオンはテキスト矢印（閉:▼ 開:▲）
   ====================================================== */

/* ====== 絞り込みUI（#bunkasai-filter） ====== */
#bunkasai-filter.filter-box {
  margin: 16px 0 40px;
  padding: 20px 26px;
  background: #f7f7f7;
  border: 1px solid #e3e3e3;
  border-radius: 6px;
  box-sizing: border-box;
}

#bunkasai-filter .filter-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* ラベルと入力 */
#bunkasai-filter .filter-label {
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  white-space: nowrap; /* 折り返し防止（PC時） */
}

/* 入力（select / button） */
#bunkasai-filter .filter-control {
  font-size: clamp(16px, 2.2vw, 18px);
  line-height: 1.4;
  padding: 10px 12px;
  min-height: 44px;
  border: 1px solid #cfcfcf;
  border-radius: 8px;
  background: #fff;
  color: #111;                 /* 常に黒 */
  box-sizing: border-box;
}

/* セレクト幅（PC時は過度に広がらない） */
#bunkasai-filter select.filter-control {
  max-width: 260px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 8px;
  padding-right: 32px; /* 矢印分 */
  /* 右側▼（#666）のSVG */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* 旧Edge/IEの矢印を非表示 */
#bunkasai-filter select.filter-control::-ms-expand { display: none; }

/* フォーカス */
#bunkasai-filter .filter-control:focus {
  outline: 2px solid #9ecbff;
  outline-offset: 2px;
}

/* 解除ボタン */
#bunkasai-filter .btn-reset {
  cursor: pointer;
  color: #111 !important;          /* リンク色にしない */
  background: #fff;
  border: 1px solid #cfcfcf;
  border-radius: 8px;
  padding: 10px 12px;
  text-decoration: none;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
#bunkasai-filter .btn-reset:hover,
#bunkasai-filter .btn-reset:focus,
#bunkasai-filter .btn-reset:link,
#bunkasai-filter .btn-reset:visited {
  color: #111;                     /* 常に黒 */
  background: #f5f5f5;
}

/* 件数は右側に寄せる（PC時） */
#bunkasai-filter .filter-count {
  margin-left: auto;
  font-size: 1.20em;
  color: #666;
}

/* ====== ダークテーマ考慮（任意） ====== */
@media (prefers-color-scheme: dark){
  #bunkasai-filter.filter-box {
    background: #161616;
    border-color: #2a2a2a;
  }
  #bunkasai-filter .filter-control {
    background: #0f0f0f;
    border-color: #333;
    color: #eee;
  }
  #bunkasai-filter select.filter-control{
    background-color: #0f0f0f;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23bbb' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  }
  #bunkasai-filter .btn-reset { background:#0f0f0f; border-color:#333; color:#eee !important; }
  #bunkasai-filter .btn-reset:hover,
  #bunkasai-filter .btn-reset:focus{ background:#1a1a1a; color:#eee; }
  #bunkasai-filter .filter-count { color:#aaa; }
}

/* ====== モバイル（レスポンシブ）3行レイアウト ======
   1行目：地域の選択（ラベル＋セレクト）
   2行目：開催月の選択（ラベル＋セレクト）
   3行目：左＝件数、右＝絞り込み解除
   ラベル幅を同一にして、プルダウン左位置＆幅を揃える
===================================================== */
@media (max-width: 768px) {
  /* ラベル固定幅（必要に応じて調整） */
  #bunkasai-filter { --label-w: 6.5em; }

  #bunkasai-filter .filter-row{
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "area  area"
      "month month"
      "count reset";
    row-gap: 10px;
    column-gap: 12px;
    align-items: center;
  }

  /* 1行目=地域, 2行目=開催月 */
  #bunkasai-filter .filter-row label:has(#filter-area){  grid-area: area;  }
  #bunkasai-filter .filter-row label:has(#filter-month){ grid-area: month; }

  /* 3行目 左=件数／右=解除 */
  #bunkasai-filter .filter-count{ grid-area: count; justify-self: start; margin-left: 0; }
  #bunkasai-filter .btn-reset{    grid-area: reset; justify-self: end; }

  /* ラベルは「固定幅＋可変」の2カラム構成にして左位置を揃える */
  #bunkasai-filter .filter-label{
    display: grid !important;
    grid-template-columns: var(--label-w) 1fr;
    align-items: center;
    column-gap: 8px;
    white-space: nowrap; /* ラベルの折り返し防止 */
  }
  #bunkasai-filter .filter-label > select.filter-control{
    grid-column: 2 / 3;
    width: 100%;
    max-width: none; /* PC時のmax-widthを解除して幅統一 */
  }

  /* プルダウンの“見た目サイズ”を2段階アップ（選択肢含む） */
  #bunkasai-filter .filter-control{
    font-size: 20px !important;   /* 16px基準 +4px 程度 */
    min-height: 46px;
    padding: 10px 12px;
    color: #111 !important;       /* 常に黒 */
  }
  #bunkasai-filter select.filter-control option{
    font-size: 20px;
    color: #111;
  }
}

/* ====== 「他の説明会・イベント一覧」を常時表示・揃え ====== */
.event_cate.keep-visible-cate{
  display: block !important;
}
.event_cate_list.keep-visible-cate{
  display: flex !important;
  flex-wrap: wrap;
  gap: 0 !important; /* 余白ゼロで横並び */
}

/* ====== 終了イベントのアコーデオン（li 版） ====== */
.done-accordion-li { margin: 8px 0 16px; }
.done-accordion-li[hidden] { display: none !important; }

.done-toggle{
  width: 100%;
  display: flex; align-items: center; gap: 8px;
  padding: 14px 12px;
  background: #f4f4f4; border: 1px solid #e1e1e1; border-radius: 6px;
  color: #111;                 /* 常に黒 */
  cursor: pointer;
  font-size: 1.2em;
}
.done-toggle .txt { font-weight: 700; }
.done-toggle .cnt { margin-left: auto; color:#666; }

/* テキスト矢印（閉:▼ / 開:▲） */
.done-toggle .caret{ display:inline-block; }
.done-toggle .caret::before{
  content: "▼";
  display: inline-block;
  line-height: 1;
  font-size: 0.9em;
}
.done-accordion-li.is-open .done-toggle .caret::before{
  content: "▲";
}

/* ====== 保険：もし他CSSで display:none が当たっても
   keep-visible-cate は強制的に見えるようにする ====== */
.event_cate.keep-visible-cate,
.event_cate_list.keep-visible-cate {
  visibility: visible;
  opacity: 1;
}

/* ====== アクセシビリティ（キーボード操作） ====== */
#bunkasai-filter .btn-reset:focus,
.done-toggle:focus {
  outline: 2px solid #9ecbff;
  outline-offset: 2px;
}