/* /visitor/css/search_top.css
   企画検索TOP（search/top.php）専用。
   デザインは Figma「デザインあ」
     スマホ ………… iPhone 17 - 1（一覧）/ iPhone 17 - 2（絞り込みシート）
     PC（1024px〜）… MacBook Air - 2（左のサイドバー）
   カード本体は search/assets/card.css。ここではカードの並べ方だけを決める。
   フォントは Kiwi Maru（数字・見出し）と Zen Kaku Gothic New（それ以外）だけを使う。 */

:root {
  --sf-blue: #0d6082;       /* 枠・文字 */
  --sf-deep: #0c5f81;       /* 塗りのボタン */
  --sf-pale: #e6f1f4;       /* 薄い水色の面 */
  --sf-line: #80aabb;       /* チップ・ボタンの枠 */
  --sf-text: #3e3a39;       /* 本文 */
  --sf-bg: #f4f5f5;         /* 背景（--themewhite と同じ） */
  --sf-font: "Zen Kaku Gothic New", sans-serif;
  --sf-font-num: "Kiwi Maru", serif;
}
/* 枠線は 1px より細くしない（Figma は 0.5px）。iPhone は線を画面の画素に合わせて丸めるので、
   1px 未満だと辺によって消えたり細くなったりして、枠が途切れて見える */

/* フォーム部品はフォントを継承しないので明示する */
.search-form button,
.search-form input,
.search-form select {
  font-family: var(--sf-font);
}
/* ★ページ番号はボタン（.pager__num）も Kiwi Maru。ここで .pager button にまとめて Zen Kaku を当てると、
   今のページ（span）だけ Kiwi Maru で、選んでいない番号が Zen Kaku になる */

.pc_only { display: none; }


/* 共通の main は overflow: hidden で、そのままだと検索窓の sticky が効かない。
   はみ出しを切るのは同じで sticky を止めない clip にする（未対応の古いブラウザは hidden のまま） */
main {
  overflow: clip;
  min-height: calc(100vh - 60px);   /* 企画が少ない・0件でも、フッターが最初の画面に入らないように */
  min-height: calc(100dvh - 60px);
  margin-bottom: 32px;   /* フッターの上の余白（共通は PC で 150px）。ページ送りの下の余白と重なって大きいほうになる */
}

/* ---------- 見出し帯「search 企画検索」 ----------
   部品は共通（component/pagetitle.php・common_general.css）。このページだけ縦幅を詰める */
.pagetitle {
  padding-top: 12px;
  padding-bottom: 4px;
}


/* ---------- ヘッダー ----------
   共通のヘッダーは背景が透明。このページは検索窓をヘッダーのすぐ下に残すので、
   そのままだとスクロールしたカードがロゴの周りに透けて見える。スマホ・タブレットだけ背景を塗る
   （PC はヘッダーの下にサイドバーが来るので要らない） */
@media (max-width: 1023px) {
  header { background: var(--sf-bg); }
  /* 右のロゴ「一橋祭」は header の外にあって header より下（2999）。背景を塗った header の裏に隠れ、
     iPhone で強くスクロールして上で弾んだときだけ下からはみ出して見えていた。header より上に出す */
  .iks_logo_right {
    z-index: 3001;
    transition: z-index 0s linear .8s;   /* メニューを閉じるときは、メニューが消え終わるまで下にいる（common_header.css の #header_ham の transition と同じ長さ） */
  }
  /* ハンバーガーのメニューを開いている間は header の下（共通の 2999）に戻す。上のままだと、メニューの左上の
     ロゴ（.iks_logo_left_ham）とこのロゴが重なって見えた（このページだけ） */
  body:has(#header_ham.panelactive) .iks_logo_right {
    z-index: 2999;
    transition-delay: 0s;
  }
}


/* =====================================================================
   検索フォーム全体
   ===================================================================== */
/* スマホ・タブレットでは、スクロールしても検索窓をヘッダー（高さ 60px・固定）のすぐ下に残す */
#searchForm.search-form {
  position: sticky;
  top: 60px;
  z-index: 100;           /* カードより上、ヘッダー（3000）より下 */
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 28px 0 0;       /* 見出し帯から検索窓まで 36px（下の padding と合わせて） */
  padding: 8px 0;
  background: var(--sf-bg);
  transition: z-index 0s linear .3s;   /* 閉じるときは、シートが下へ引っ込み終わるまで重なり順を上のままにする */
}
/* シートを開いている間は、中の背景・シートをカードや PAGE TOP（2000）より上、ヘッダー（3000）より下に置く。
   ヘッダーはシートの上に残し、ハンバーガーを × にしてシートを閉じるボタンにする（下の「絞り込み」の節） */
body.is-filter-open #searchForm.search-form {
  z-index: 2500;
  transition-delay: 0s;
}


/* ---------- 検索窓（虫めがね・入力欄・×・絞り込みボタン） ---------- */
.fw-row {
  display: flex;
  justify-content: center;
  width: min(304px, calc(100% - 32px));
}

.search-input-wrapper {
  position: relative;
  width: 100%;
}

.q-input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 40px;
  margin: 0;
  padding: 0 136px 0 44px;   /* 右は × と絞り込みボタンのぶん */
  background: var(--sf-pale);
  border: 1px solid var(--sf-blue);
  border-radius: 20px;
  color: var(--sf-blue);
  font-size: 16px;   /* ★16px 未満にしない。iPhone の Safari は、文字が 16px 未満の入力欄に触れると画面を拡大する */
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.q-input::placeholder {
  color: var(--sf-blue);
  opacity: 1;
}
.q-input:focus-visible {
  box-shadow: 0 0 0 3px rgba(13, 96, 130, .2);
}

/* 虫めがね。円と柄は Figma の素材（img/icon/search/）を重ねている */
.search-icon {
  position: absolute;
  left: 16px;
  top: 9px;
  z-index: 1;
  width: 20px;
  height: 22px;
  pointer-events: none;
}
.search-icon img {
  position: absolute;
}
.search-icon__circle {
  left: 0;
  top: 0;
}
.search-icon__handle {   /* Figma では (13,15) にある 7×7 の枠の中心で 45° 回した線 */
  left: 11.55px;
  top: 17.5px;
  transform: rotate(45deg);
}
.search-icon .search-icon--pc { display: none; }

/* × （入力を消す） */
.search-reset-btn {
  position: absolute;
  right: 108px;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  background: none;
  border: none;
  border-radius: 50%;
  color: var(--sf-line);
  cursor: pointer;
  transform: translateY(-50%);
}
.search-reset-btn:focus-visible {
  outline: 2px solid var(--sf-blue);
  outline-offset: 2px;
}

/* 絞り込みボタン（シートを開く） */
.filter-toggle-btn {
  position: absolute;
  right: 5px;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  height: 32px;
  margin: 0;
  padding: 0 14px 0 12px;
  background: var(--sf-deep);
  border: 1px solid var(--sf-blue);
  border-radius: 16px;
  color: var(--sf-bg);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transform: translateY(-50%);
}
.filter-toggle-btn img {
  display: block;
  flex: none;
  width: 14px;
  height: auto;
}
.filter-toggle-btn:focus-visible {
  outline: 2px solid var(--sf-blue);
  outline-offset: 2px;
}


/* ---------- 選択中の条件（スマホは検索窓の下。何も無ければ出さない） ---------- */
.active-filters-container {
  box-sizing: border-box;
  display: flex;
  width: min(304px, calc(100% - 32px));
  margin: 8px auto 0;
}
.active-filters-container:has(.active-filters:empty) {
  display: none;
}
.active-filters-label {
  display: none;
  color: var(--sf-text);
  font-size: 10px;
  font-weight: 500;
  white-space: nowrap;
}
.active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
/* スマホ・タブレットは1行だけにして、はみ出した分は横にスクロールさせる
   （折り返すと、条件を多く選んだときに画面の上の方が条件で埋まってしまう） */
@media (max-width: 1023px) {
  .active-filters {
    flex-wrap: nowrap;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .active-filters::-webkit-scrollbar { display: none; }
  .active-chip { flex: none; }
}
.active-chip {
  display: inline-flex;
  flex-direction: row-reverse;     /* 「× 主食」の並び */
  align-items: center;
  gap: 4px;
  padding: 1px 9px;
  background: var(--sf-pale);
  border: 1px solid var(--sf-blue);
  border-radius: 9px;
  color: var(--sf-blue);
  font-size: 11px;
  font-weight: 500;
  line-height: 17px;
  white-space: nowrap;
  cursor: pointer;   /* 札のどこを押しても外れる（top.js の renderSelectedChips） */
}
.active-chip .chip-remove {
  padding: 0;
  background: transparent;
  border: 0;
  color: inherit;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}


/* =====================================================================
   絞り込み（スマホ・タブレット：下から出るシート）
   ===================================================================== */
.filter-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, .3);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility 0s linear .3s;
}
.filter-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity .3s ease;
}

body.is-filter-open { overflow: hidden; }

.filter-panel {
  display: flex;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10001;
  flex-direction: column;
  height: calc(100vh - 60px);    /* ヘッダー（高さ 60px）のすぐ下まで引き延ばす */
  height: calc(100dvh - 60px);   /* スマホのアドレスバーの出入りに合わせる */
  background: var(--sf-bg);
  border-top: 1px solid var(--sf-pale);
  overflow: hidden;
  /* 閉じている間は画面の下に隠しておき、開くと下からせり上がる。
     visibility は閉じ終わってから hidden にする（中のボタンにタブで入れないように） */
  transform: translateY(100%);
  visibility: hidden;
  transition: transform .3s cubic-bezier(.32, .72, 0, 1), visibility 0s linear .3s;
}
.filter-panel.is-open {
  transform: none;
  visibility: visible;
  transition: transform .3s cubic-bezier(.32, .72, 0, 1);
}
@media (prefers-reduced-motion: reduce) {
  #searchForm.search-form,
  .filter-overlay,
  .filter-overlay.is-open,
  .filter-panel,
  .filter-panel.is-open { transition: none; }
}

/* 開いている間は、ヘッダーのハンバーガーを × にする（押すとシートを閉じる。top.php の JS）。
   形はメニューを開いたとき（common_header.css の .hamburger-fade.active）と同じ */
body.is-filter-open .hamburger-fade .hamburger-fade__line:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
  width: 60%;
}
body.is-filter-open .hamburger-fade .hamburger-fade__line:nth-child(2) {
  opacity: 0;
  transform: translateX(20px);
}
body.is-filter-open .hamburger-fade .hamburger-fade__line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
  width: 60%;
}

/* 見出し「絞り込み検索」と ×。閉じるのはヘッダーの × が受け持つので出さない
   （ヘッダーの裏に隠れて押せなかった。シートの見出しの名前としては aria-labelledby から読まれる） */
.filter-panel__head {
  position: relative;
  flex: none;
  display: none;
  align-items: center;
  justify-content: center;
  height: 49px;
  background: var(--sf-pale);
  border-bottom: 1px solid var(--sf-blue);
}
.filter-panel__title {
  margin: 0;
  color: var(--sf-blue);
  font-size: 14px;
  font-weight: 500;
}
.filter-panel__close {
  position: absolute;
  right: 22px;
  top: 50%;
  width: 26px;
  height: 26px;
  margin-top: -13px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.filter-panel__close::before,
.filter-panel__close::after {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 25.7px;
  height: 2px;
  background: var(--sf-blue);
}
.filter-panel__close::before { transform: rotate(45deg); }
.filter-panel__close::after  { transform: rotate(-45deg); }

/* 中身。タブは止めておき、その下の条件（.tab-content）だけをスクロールさせる。
   スマホのシートも PC のサイドバーも同じ作り */
.filter-panel__body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.filter-panel .search-tabs {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* タブ（ジャンル / 日時・場所） */
.tab-buttons {
  flex: none;
  box-sizing: border-box;
  display: flex;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 16px max(20px, calc(50% - 150px)) 12px;   /* 下の条件と同じ幅 300px にそろえる */
  background: var(--sf-bg);
}
.tab-button {
  box-sizing: border-box;
  width: 50%;
  height: 36px;   /* Figma は 29px。スマホで押しにくかったので高くした */
  padding: 0;
  background: var(--sf-pale);
  border: 1px solid var(--sf-blue);
  border-radius: 11px;
  color: var(--sf-blue);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}
.tab-button.active {
  background: var(--sf-blue);
  color: var(--sf-bg);
}

.tab-content {
  display: none;
  flex: 1;
  min-height: 0;
  box-sizing: border-box;
  width: 100%;
  padding: 11px max(20px, calc(50% - 150px)) 24px;   /* 中身は幅 300px で中央 */
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--sf-deep) transparent;
}
.tab-content.active { display: block; }
.tab-content::-webkit-scrollbar { width: 3px; }
.tab-content::-webkit-scrollbar-thumb {
  background: var(--sf-deep);
  border-radius: 3px;
}

/* 条件のまとまり（飲食・物販… / 日程・時間・場所） */
.genre-group {
  margin-bottom: 20px;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--sf-blue);
}
.genre-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 11px;
}
.genre-title {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0;
  padding: 0;
  color: var(--sf-blue);
  font-family: var(--sf-font);
  font-size: 15px;
  font-weight: 500;
}
.genre-title::before {   /* サイト共通の h3（common_general.css）の五角形を消す */
  content: none;
}
.genre-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}
.genre-empty {
  color: var(--sf-text);
  font-size: 13px;
}
.genre-subs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
}

/* チップ（チェックボックス） */
.chip {
  position: relative;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  height: 22px;
  padding: 0 8px;
  background: var(--sf-bg);
  border: 1px solid var(--sf-line);
  border-radius: 8px;
  color: var(--sf-blue);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  user-select: none;
}
.chip-input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.chip span { pointer-events: none; }
/* 日程の「23日(月・祝)」の「・」。全角の中黒は左右に余白を持つので、その分を詰める（css/detail.css と同じ） */
.chip .date_dot { margin: 0 -.25em; }
.chip:has(.chip-input:checked),
.chip.selected {
  background: var(--sf-blue);
  border-color: var(--sf-blue);
  color: #fff;
}
.chip:has(.chip-input:focus-visible) {
  outline: 2px solid var(--sf-blue);
  outline-offset: 2px;
}

/* 全て選択（全て解除） */
.select-all-btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 22px;
  padding: 0;
  line-height: 1;
  background: var(--sf-bg);
  border: 1px solid var(--sf-blue);
  border-radius: 8px;
  color: var(--sf-blue);
  font-size: 14px;
  cursor: pointer;
}
.select-all-btn.is-active {
  background: var(--sf-blue);
  color: #fff;
}

/* 開始・終了時間（「開始 〜 終了」を1行に並べ、終日開催のボタンはその下） */
.time-input-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 8px;
}
.time-sep {
  color: var(--sf-blue);
  font-size: 14px;
}
.time-input-container .all-day-btn {
  flex-basis: 100%;
  max-width: max-content;
}
.time-select {
  min-width: 104px;
  height: 30px;
  padding: 0 10px;
  background: var(--sf-pale);
  border: 1px solid var(--sf-line);
  border-radius: 8px;
  color: var(--sf-blue);
  font-size: 16px;   /* ★16px 未満にしない（上の .q-input と同じ理由） */
  cursor: pointer;
}
.time-select:focus-visible {
  outline: 2px solid var(--sf-blue);
  outline-offset: 2px;
}
.time-select option:disabled {
  color: #bbb;
}

/* 終日開催も表示 */
.all-day-btn {
  height: 26px;
  padding: 0 10px;
  background: var(--sf-bg);
  border: 1px solid var(--sf-blue);
  border-radius: 8px;
  color: var(--sf-blue);
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
}
.all-day-btn.active {
  background: var(--sf-blue);
  color: #fff;
}

/* MAP検索への誘導（ボタンの見た目はサイト共通の .btn） */
.map-promotion {
  margin: 20px auto 0;
  text-align: center;
}
.map-promotion .btn { display: inline-block; }

/* リセット / この条件で検索（シートの下に固定） */
.action-row {
  flex: none;
  box-sizing: border-box;
  display: flex;
  gap: 12px;
  width: 100%;
  max-width: 380px;   /* タブレットで横に伸びすぎないように */
  margin: 0 auto;
  padding: 12px 16px max(24px, env(safe-area-inset-bottom));   /* iPhone の下のバーに重ならないように */
  background: var(--sf-bg);
  border-top: 1px solid var(--sf-pale);
}
.btn-primary,
.btn-secondary {
  box-sizing: border-box;
  height: 44px;
  padding: 0;
  border-radius: 41.5px;
  font-size: 18px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: filter .2s ease;
}
.btn-secondary {
  flex: 0 0 110px;
  background: #cee6ef;
  border: 1px solid var(--sf-line);
  color: var(--sf-blue);
}
.btn-primary {
  flex: 1;
  background: var(--sf-deep);
  border: 0;
  color: var(--sf-bg);
}
.btn-primary:focus-visible,
.btn-secondary:focus-visible {
  outline: 2px solid var(--sf-blue);
  outline-offset: 2px;
}
.search-btn-label-pc { display: none; }
.action-count { display: none; }   /* PC だけ（スマホは「この条件で検索（30件）」のボタンに件数が出る） */
/* 件数の全角かっこ「）」は右に字の空きがあるので、そのぶん詰めて文字の塊を中央に見せる */
#searchCount:not(:empty) { margin-right: -.5em; }


/* =====================================================================
   検索結果
   ===================================================================== */
/* 件数と「お気に入りだけ表示」の行 */
.result-bar {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: min(310px, calc(100% - 32px));
  margin: 16px auto 10px;
}
#result-meta {
  white-space: nowrap;
  color: var(--sf-text);
  font-size: 13px;
}
.fav-only-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 10px;
  background: var(--sf-bg);
  border: 1px solid var(--sf-line);
  border-radius: 13px;
  color: var(--sf-blue);
  font-family: var(--sf-font);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}
.fav-only-btn img { display: block; }
.fav-only-btn.is-active {
  background: var(--sf-blue);
  border-color: var(--sf-blue);
  color: #fff;
}
.fav-only-btn:focus-visible {
  outline: 2px solid var(--sf-blue);
  outline-offset: 2px;
}
.search-suggest-head a { color: var(--sf-blue); }

/* 「終日開催の企画も含めると ○件」と、含めるボタン（時間で絞って終日を除いているときだけ。top.js の renderAllDayHint()） */
.all-day-hint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 10px;
  width: min(310px, calc(100% - 32px));
  margin: -2px auto 14px;
  color: var(--sf-text);
  font-size: 13px;
}
.all-day-hint[hidden] { display: none; }
.all-day-hint__btn {
  height: 26px;
  padding: 0 10px;
  background: var(--sf-bg);
  border: 1px solid var(--sf-blue);
  border-radius: 8px;
  color: var(--sf-blue);
  font-family: var(--sf-font);
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
}
.all-day-hint__btn:focus-visible {
  outline: 2px solid var(--sf-blue);
  outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
  .all-day-hint__btn:hover { background: #d6e9ef; }
}
@media (min-width: 1024px) {
  .all-day-hint { width: auto; margin: -6px 5% 18px; font-size: 14px; }
}

/* カードの並び（カード本体は search/assets/card.css） */
.cards.event-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  padding: 0 16px 8px;   /* 下はカードの影（下に 4px＋ぼかし 4px）のぶん。ページ送りが無いと main の下端で影が切れる */
}
#cards { position: relative; }

/* 読み込み中 */
.cards-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 180px;
  color: var(--sf-text);
  font-size: 13px;
}
.cards-loading .spinner {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(13, 96, 130, .15);
  border-top-color: var(--sf-blue);
  border-radius: 50%;
  animation: cards-spin .8s linear infinite;
}
@keyframes cards-spin { to { transform: rotate(360deg); } }

/* 検索0件のときの「近い企画はこちら」（カードの並びの中で1行ぶん使う） */
.search-suggest-head {
  flex-basis: 100%;
  margin: 0 0 8px;
  color: var(--sf-text);
  font-size: 14px;
  text-align: center;
}

/* 誘導ボタン（模擬店の詳細検索・おすすめ企画。見た目はサイト共通の .btn） */
#contest-promotion-container {
  width: 100%;
  margin-bottom: 20px;
  text-align: center;
}
.contest-promotion,
.recommendation-promotion {
  flex-basis: 100%;
  margin: 0 auto 20px;
  text-align: center;
}
.contest-promotion .btn,
.recommendation-promotion .btn {
  display: inline-block;
}


/* ---------- ページ送り「‹ 1 2 3 4 ›」（スマホ・PC 共通。大きさは PC の節で上書き） ----------
   スマホは「‹ 1 … 4 5 6 … 12 ›」（最大で数字・… が7つ）が幅 343px（375px の画面）に収まる大きさ */
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 36px auto 32px;
  padding: 0 16px;
}
.pager[hidden] { display: none; }

/* スマホは数字を 16px・円を 30px にする（校正の指摘。19px・34px では大きかった）。
   ★Kiwi Maru の数字は字の枠の中で下に寄っている（字の上が枠の上から約 0.21em、下が約 0.04em）ので、
   そのまま中央に置くと円の中で約 0.09em 下がって見える。下に 0.17em の padding を足して持ち上げる */
.pager__num,
.pager__gap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 30px;
  height: 30px;
  padding: 0 0 .17em;
  color: var(--sf-blue);
  font-family: var(--sf-font-num);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
}
.pager__num {
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.pager__num.is-current {
  background: var(--sf-blue);
  color: var(--sf-bg);
  box-shadow: 0 0 3px rgba(13, 96, 130, .6);   /* Figma の少しぼかした円 */
}
.pager__gap {
  width: 20px;
  padding: 0;   /* 「…」は数字と違って下に寄っていない */
  font-size: 14px;
}

/* 前へ / 次へ（細い山形） */
.pager__arrow {
  position: relative;
  width: 28px;
  height: 38px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.pager__arrow::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  border-top: 1px solid var(--sf-blue);
  border-left: 1px solid var(--sf-blue);
}
.pager__arrow--prev::before { transform: translate(-30%, -50%) rotate(-45deg); }
.pager__arrow--next::before { transform: translate(-70%, -50%) rotate(135deg); }
.pager__arrow:disabled {
  opacity: .3;
  cursor: default;
}
.pager__num:focus-visible,
.pager__arrow:focus-visible {
  outline: 2px solid var(--sf-blue);
  outline-offset: 2px;
}


/* =====================================================================
   マウス操作の環境だけのホバー（スマホでホバーが残る問題を避ける）
   ===================================================================== */
@media (hover: hover) and (pointer: fine) {
  .search-reset-btn:hover { color: var(--sf-blue); }
  .filter-toggle-btn:hover,
  .btn-primary:hover,
  .btn-secondary:hover { filter: brightness(.94); }
  .tab-button:not(.active):hover,
  .chip:not(.selected):not(:has(.chip-input:checked)):hover,
  .select-all-btn:not(.is-active):hover,
  .fav-only-btn:not(.is-active):hover,
  .all-day-btn:not(.active):hover {
    background: #d6e9ef;
  }
  .pager__num:not(.is-current):hover { background: var(--sf-pale); }
}


/* =====================================================================
   PC（1024px 以上）：絞り込みを左のサイドバーに常に出す
   ===================================================================== */
@media (min-width: 1024px) {
  .pc_only { display: block; }

  /* 見出し帯を詰める（共通は上下 20px＋18px） */
  .pagetitle { padding-top: 8px; padding-bottom: 4px; }
  .pagetitle_text { padding: 6px 0; }

  /* ★幅は auto（左の余白の残りを自動で使う。共通の 100% を打ち消す）。前の calc(100vw - 361px) は、
     100vw が縦のスクロールバーの幅を含むので、スクロールバーが場所を取るブラウザ（Windows の Chrome など）では
     その分だけ右にはみ出し、フッターの右端が切れていた（Mac の Brave などスクロールバーが重なるブラウザでは起きない） */
  body {
    width: auto;
    margin-left: 361px;
    overflow-x: hidden;
  }

  /* サイドバー（幅 351px ＋ 右の水色の帯 10px） */
  #searchForm.search-form {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;
    box-sizing: border-box;
    width: 361px;
    height: 100vh;
    margin: 0;
    padding: 104px 0 0;
    background: var(--sf-bg);
    border-right: 10px solid var(--sf-pale);
    overflow: hidden;   /* サイドバー全体は動かさず、条件（.tab-content）だけをスクロールさせる */
  }
  #searchForm.search-form > * { flex-shrink: 0; }   /* 高さ 100vh の縦並びの中で潰されないように */
  #searchForm.search-form > .filter-panel {         /* 残りの高さを全部使う */
    flex: 1 1 0;
    min-height: 0;
  }

  /* 検索窓 */
  .fw-row { width: 300px; }   /* サイドバーの中身は幅 300px にそろえる */
  /* 検索履歴の一覧（search/assets/search_history.css）を、下の条件の欄より上に出す。
     ★ 条件の欄（.filter-panel）は z-index: 10001 のままサイドバーの flex の子になっていて、
       position が static でも重なり順が効く。同じ flex の子の .fw-row をそれより上にする */
  #searchForm.search-form > .fw-row { z-index: 10002; }
  .q-input {
    height: 43px;
    padding: 0 40px 0 50px;
    border-radius: 21.5px;
    font-size: 20px;
  }
  .search-icon {
    left: 14px;
    top: 9px;
  }
  .search-icon .search-icon__circle,
  .search-icon .search-icon__handle { display: none; }
  .search-icon .search-icon--pc { display: block; }
  .search-icon .search-icon__handle.search-icon--pc {
    left: 13px;
    top: 21px;
    transform: rotate(50.87deg);
  }
  .search-reset-btn { right: 12px; }
  .filter-toggle-btn { display: none; }

  /* 選択中の条件（見出しは常に出す）。見出しとチップを同じ行に並べ、下の条件の欄を広く取る（校正の指摘）。
     チップが多ければ見出しの右で折り返す */
  .active-filters-container,
  .active-filters-container:has(.active-filters:empty) {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 6px;
    width: 300px;
    margin: 10px auto 0;
  }
  .active-filters-label { display: block; font-size: 12px; line-height: 21px; }
  .active-filters {
    flex: 1;
    min-width: 0;
    min-height: 21px;   /* 条件チップ1行ぶん。最初の1つを選んだときに下の中身がずれないように */
  }

  /* シートにはしない */
  .filter-overlay,
  .filter-overlay.is-open,
  .filter-panel__head { display: none; }
  body.is-filter-open { overflow: visible; }
  .filter-panel,
  .filter-panel.is-open {
    position: static;
    display: flex;
    width: 100%;
    height: auto;
    background: none;
    border-radius: 0;
    transform: none;
    visibility: visible;
    transition: none;
  }

  /* リセット / 検索（件数）。PC では条件の上に置く */
  .action-row {
    order: -1;
    justify-content: space-between;
    width: 300px;
    margin: 24px auto 0;
    padding: 0;
    background: none;
    border-top: 0;
  }
  .btn-primary,
  .btn-secondary {
    height: 35px;
    border-radius: 35px;
    font-size: 14px;
  }
  .btn-secondary {
    flex: 0 0 108px;
    background: var(--sf-bg);
    color: var(--sf-deep);
  }
  /* 件数「該当 30件 ｜ 全270件」（検索ボタンのあった場所。top.js の renderActionCount()）。
     リセットと同じ高さ・丸みの薄い水色の面にして並びをそろえる。押すものではないので枠線と影は付けず、
     ボタン（リセット）と見分けがつくようにする */
  .action-count {
    display: flex;
    flex: 1;
    align-items: baseline;
    justify-content: center;
    box-sizing: border-box;
    height: 35px;
    margin: 0;
    padding: 0 14px;
    background: var(--sf-pale);
    border-radius: 35px;
    color: var(--sf-deep);
    font-size: 13px;
    font-weight: 500;
    line-height: 35px;
    white-space: nowrap;
  }
  .action-count__label {
    margin-right: 6px;
    color: var(--sf-text);
    font-size: 12px;
  }
  .action-count__num {
    display: inline-block;
    font-family: var(--sf-font-num);
    font-size: 20px;
    letter-spacing: .02em;
  }
  .action-count__unit {
    margin-left: 1px;
    font-size: 13px;
  }
  /* 全体の件数。縦の細線で区切って、小さく灰色に */
  .action-count__all {
    position: relative;
    margin-left: 10px;
    padding-left: 11px;
    color: #6f6b6a;   /* --sf-text を薄めた灰色（水色の面の上で 4.5:1 以上） */
    font-size: 12px;
  }
  .action-count__all::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 1px;
    height: 14px;
    background: var(--sf-line);
    transform: translateY(-50%);
  }
  /* 0件のときは数字を薄く（「該当なし」と分かるように） */
  .action-count.is-zero .action-count__num { color: var(--sf-line); }
  /* 件数が変わったときに数字を小さく弾ませる */
  .action-count__num.is-bump { animation: action-count-bump .32s ease-out; }
  @keyframes action-count-bump {
    0%   { transform: translateY(0) scale(1); }
    40%  { transform: translateY(-2px) scale(1.12); }
    100% { transform: translateY(0) scale(1); }
  }
  @media (prefers-reduced-motion: reduce) {
    .action-count__num.is-bump { animation: none; }
  }
  /* 「検索」ボタンは PC では出さない。条件を押す・文字を打つとその場で右の一覧が変わり、件数も一覧の上に出るので、
     押しても何も起きなかった（校正の指摘）。スマホはシートを閉じて一覧へ戻るボタンなので残す。
     Enter での検索は検索窓の keydown（top.js）が受け持つ */
  .btn-primary { display: none; }
  .search-btn-label-sp { display: none; }
  .search-btn-label-pc { display: inline; }

  /* タブ */
  .tab-buttons {
    position: static;
    gap: 12px;
    width: 300px;
    margin: 20px auto 0;
    padding: 0 0 8px;
    background: none;
  }
  .tab-button {
    height: 28px;
    border-radius: 14px;
  }

  /* 中身を幅 300px で検索窓・ボタンと左右をそろえる。右の padding はスクロールバーに任せる
     （スクロールバーの幅はブラウザで違う。両側に padding を取ると、その分だけ右端が内側にずれる） */
  .tab-content {
    padding: 16px 0 40px calc(50% - 150px);
  }
  .tab-content > div { width: 300px; }
  .genre-group {
    margin-bottom: 22px;
    padding-bottom: 14px;
  }
  .genre-subs { gap: 8px 8px; }

  /* 検索結果 */
  .result-bar {
    justify-content: center;
    gap: 16px;
    width: auto;
    margin: 24px 5% 16px;
  }
  #result-meta { font-size: 14px; }
  .fav-only-btn { height: 28px; font-size: 13px; }
  .cards.event-cards {
    gap: 30px 26px;   /* Figma：横 26px・縦 30px */
    padding: 0 5% 8px;
  }
  main { margin-bottom: 56px; }
  .pager { margin: 45px auto 56px; }
  .pager__num,
  .pager__gap {
    width: 42px;
    height: 42px;
    font-size: 22.5px;
  }
  .pager { gap: 10px; }
}

/* ===== 「いま」の札（本祭の当日だけ top.php が出す） =====
   いま開催中・まもなく始まる企画に絞る。色（--live-*）と点の脈打ちは search/assets/card.css */
.live-row {
  display: flex;
  justify-content: center;
  width: min(304px, calc(100% - 32px));
  margin-top: 8px;
}
.live-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  min-height: 32px;
  padding: 4px 14px 4px 12px;
  background: var(--live-soon-pale);   /* 差し色のクリーム。押すと濃い青（下の :checked） */
  border: 1px solid var(--live-now);
  border-radius: 16px;
  color: var(--live-now);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
}
.live-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.live-toggle:has(input:focus-visible) {
  outline: 2px solid var(--live-now);
  outline-offset: 2px;
}
.live-toggle:has(input:checked) {
  background: var(--live-now);
  color: #fff;
}
/* 押している間は、点を差し色（クリーム）にする */
.live-toggle:has(input:checked) .live-toggle__dot {
  background: var(--live-soon-pale);
}
.live-toggle__sub {
  font-size: 11px;
  font-weight: 500;
}
.live-toggle:has(input:checked) .live-toggle__sub { display: none; }
/* 右端の印（10px 四方）。押す前は「→」（横の線と、右上・右下の2本の短い線）、押している間は「×」。
   字ではなく線で描く（.live-allday-btn__mark と同じ。字だとフォントで幅が変わるため） */
.live-toggle__mark {
  position: relative;
  flex: none;
  width: 10px;
  height: 10px;
}
.live-toggle__mark::before,
.live-toggle__mark::after {
  content: "";
  position: absolute;
  background: currentColor;
  border-radius: 1px;
}
.live-toggle__mark::before { left: 0; top: 4px; width: 10px; height: 2px; }
.live-toggle__mark::after {
  right: 1px; top: 2px; width: 6px; height: 6px;
  background: none;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  box-sizing: border-box;
  transform: rotate(45deg);
}
.live-toggle:has(input:checked) .live-toggle__mark::before,
.live-toggle:has(input:checked) .live-toggle__mark::after {
  left: -1px; right: auto; top: 4px; width: 12px; height: 2px;
  background: currentColor;
  border: 0;
}
.live-toggle:has(input:checked) .live-toggle__mark::before { transform: rotate(45deg); }
.live-toggle:has(input:checked) .live-toggle__mark::after  { transform: rotate(-45deg); }
/* 「現在開催中」の札の横の「＋終日開催」（終日の企画も含める）。札と同じ高さ・色の小さな札。
   押していないときは白地に「＋」、押している間は札と同じ濃い青の地に「✓」（top.js が is-active・aria-pressed を付ける）。
   印は字ではなく線で描く（字だとフォントで幅が変わり、押すたびに札の幅が動くため） */
.live-row { gap: 8px; }
.live-allday-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  box-sizing: border-box;
  min-height: 32px;
  padding: 4px 12px 4px 10px;
  background: var(--sf-bg);
  border: 1px solid var(--live-now);
  border-radius: 16px;
  color: var(--live-now);
  font-family: var(--sf-font);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}
.live-allday-btn[hidden] { display: none; }   /* 「現在開催中」で絞っている間だけ出す（top.js） */
.live-allday-btn.is-active {
  background: var(--live-now);
  color: #fff;
}
/* 印（10px 四方）。押していないときは「＋」（縦横の2本の線） */
.live-allday-btn__mark {
  position: relative;
  flex: none;
  width: 10px;
  height: 10px;
}
.live-allday-btn__mark::before,
.live-allday-btn__mark::after {
  content: "";
  position: absolute;
  background: currentColor;
  border-radius: 1px;
}
.live-allday-btn__mark::before { left: 0; top: 4px; width: 10px; height: 2px; }
.live-allday-btn__mark::after  { left: 4px; top: 0; width: 2px; height: 10px; }
/* 押している間は「✓」（短い線と長い線を、左下で折った形に回す） */
.live-allday-btn.is-active .live-allday-btn__mark::before {
  left: 0; top: 5px; width: 4px; height: 2px;
  transform: rotate(45deg);
}
.live-allday-btn.is-active .live-allday-btn__mark::after {
  left: 5px; top: 0; width: 2px; height: 9px;
  transform: rotate(45deg);
}
.live-allday-btn:focus-visible {
  outline: 2px solid var(--live-now);
  outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
  .live-allday-btn:not(.is-active):hover { background: #d6e9ef; }
}

@media (min-width: 1024px) {
  .live-row {
    width: 300px;
    margin: 12px auto 0;
  }
  .live-toggle { flex: 1; min-width: 0; justify-content: center; }   /* 横の「＋終日開催」のぶんを残して広げる */
}
/* 「いま」で絞ったときの件数の行（「13:05 時点で開催中・まもなく始まる企画 2件」）。
   長くて「お気に入りのみ」と並ばないので、このときだけ折り返す（top.js が is-live を付ける） */
#result-meta.is-live {
  min-width: 0;
  white-space: normal;
  line-height: 1.5;
}