:root {
  /* ピンの大きさの倍率。地図のズームに応じて map.js が書き換える(SPEC.md §4.1)。
     固定サイズだと縮小したときに地図に対してピンが大きくなりすぎるため。
     Mapboxがマーカーの位置決めに transform を使うので、マーカー自身に transform は
     かけられない。代わりに幅・高さ・文字サイズをこの倍率から計算する。 */
  --pin-scale: 1;

  /* 地図の上に置くものの基準の大きさ。--pin-scale と掛けて使う。
     ★ 模擬店は隣と 2.8m しか離れていない。寄りきっても画面上では十数pxしか
       開かないので、ピンを大きくするほど重なって押せなくなる。
       「大きくて押しやすい」ではなく「小さくて隣と分かれる」を優先する。
       1つずつ確実に選ぶ道は、区画をタップしたときに出る一覧のほうが本筋。 */
  /* 一覧カードの正方形画像。文字側（企画名2行・団体・最下行）もこの高さに収める。
     ★ これ以上は減らせない（72px だと企画名が2行の企画が収まらない）。変えるときは .project-list-item も見る。 */
  --card-thumb: 76px;

  /*
   * ピンの見た目の大きさ（スマホも同じ）。押しやすさは当たり判定（.pin-marker::before）が決めるので、
   * 丸を大きくしても隣に食い込むだけ。22px は寄りきったとき隣と重ならずに並べられる上限。
   */
  --pin-size: 22px;
  /* 当たり判定を丸より広げる幅（片側）。★ 大きくしすぎない（地図を滑らせたつもりで近くのピンが開く）。 */
  --pin-hit-margin: 3px;
  /*
   * 建物・ステージの名前ボタンの当たり判定を広げる幅（片側。30px → 42px）。
   * ピンより広くてよい（数が少なく隣と食い合わない）。44px には届かせない。
   */
  --location-hit-margin: 6px;
  /* 丸の内側は 22 − 枠2px×2 = 18px。15px はその 83%。
     ★ 素材(food.svg など)は絵の周りに余白を持っているので、
       ここを小さくすると絵そのものはさらに小さく見える。 */
  --pin-icon-size: 15px;
  --facility-size: 19px;
  --facility-icon-size: 13px;
  --indoor-pin-size: 21px;
  /* 番号が3桁以上の教室ピン（講義棟の 201 など）の大きさ。.indoor-pin-anchor.is-long */
  --indoor-pin-size-long: 27px;

  /* ボトムシートの高さ。ドラッグ操作に応じて map.js が px 値で上書きする(SPEC.md §5.0) */
  --sheet-height: 40vh;
  /* シートの箱そのものの高さ（＝開ける上限）と、そのうち画面の下に隠れている分。
     どちらも map/sheet-snap.js の setSheetHeight が px で入れる（#bottom-sheet の注） */
  --sheet-max-height: 85vh;
  --sheet-hidden: 0px;
  /* 広い画面(PC・タブレット)で左側から出てくるパネルの幅(SPEC.md §5.0)。
     ★ lib/map-viewport.js の PANEL_WIDTH と同じ値にすること。
     360px では、カードの文字の欄が 144px しか取れず、形式の右隣の日時
     （「講演会 24日 13:00~15:00」で約 201px 要る）が次の行に回っていた。
     420px で文字の欄が約 204px になり、1行に収まる。 */
  --sheet-panel-width: 420px;

  /* --- 配色 -------------------------------------------------------
     テーマの色（common/common_header.css の --themeocean など）は別名を付けず直接使い、予備の値も書かない。
     エリアの色（下の .o_*。地図の絵と対応）と、選択中の赤・現在地の青はテーマに寄せない。 */
  /* 見出しの下線。--themeocean を白で薄めた色（テーマ色から作るので、色の値は持たない） */
  --c-accent-soft: color-mix(in srgb, var(--themeocean) 85%, #fff);
  /* コンパスの北の針（北＝赤で方位磁針だと分かるように。サイトの素材と同じ落ち着いた赤）。 */
  --c-compass-north: #ae3923;
  /* 現在地の青。★ テーマ色に寄せない（地図の建物の青に沈んで見つけられなくなる）。 */
  --c-locate: #1a73e8;

  /* いま詳細を開いている企画のピン。エリアの色(下の .o_*)とは重ならない赤にして、
     どのエリアの企画を選んでも「選ばれている」ことが色で分かるようにする。 */
  --c-pin-selected: #e23b3b;

  --c-card: #ffffff;         /* シートの中のカード */
  --c-chip: #fbf7f9;         /* 地図上のチップの地。デザイン案の温かい白 */
  /*
   * 企画検索TOP（css/search_top.css・search/assets/card.css）と同じ色。テーマの色（--theme*）には無い。
   *   --c-sheet-text … ボトムシートの本文（地図の上の文字とヘルプは --themeblack）
   *   --c-text-sub   … ボトムシートの補足（団体名など）
   *   --c-pale-blue  … 検索欄・絞り込みの見出しの水色の地
   *   --c-line-blue  … チップ・カード・画像の水色がかった青の枠
   */
  --c-sheet-text: #3e3a39;
  --c-text-sub: #6b6461;
  --c-pale-blue: #e6f1f4;
  --c-line-blue: #80aabb;
  --c-line: #e2e2e2;

  /* 見出しの書体。サイト本体の h2 / h3 と同じ Kiwi Maru にそろえる。
     ★ 太さは 500 まで。common_head.php が読み込んでいるのは 400 と 500 だけで、
       bold(700) を指定すると太字が合成されて字がつぶれる。 */
  --font-heading: "Kiwi Maru", sans-serif;
}

/* 狭い画面では教室ピンだけ一回り小さくする。
   ★ 企画ピンと施設ピンは小さくしない（中の絵が読めなくなる）。 */
@media (max-width: 767px) {
  :root {
    --indoor-pin-size: 19px;
    --indoor-pin-size-long: 25px;
  }
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  /* サイト本体(common/common_general.css)と同じ組み合わせにする。
     フォント自体は common_head.php が読み込んでいる（MAP検索は
     common_general.css を読まないので、ここで指定する）。
     webフォントが落ちても崩れないよう、端末の書体を後ろに残す。 */
  font-family: "Zen Kaku Gothic New", -apple-system, BlinkMacSystemFont,
    "Hiragino Sans", "Yu Gothic", sans-serif;
}

/* ★ フォームの部品は font-family を継承しない（ブラウザ既定のまま）。
   これが無いと、建物ボタン・日付タブ・検索欄だけ Arial などで出て、
   日本語はさらに端末任せの書体に落ちる。 */
button, input, select, textarea {
  font-family: inherit;
}

#map {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* ★ この z-index を消さないこと（重ね合わせの文脈を作る役目。中に何を作っても、上のUIを越えない）。 */
  z-index: 0;
  overflow: hidden;
  /* 絵の紙と同じ白にする。可動範囲(lib/map-viewport.js の ROAMABLE)は
     画像より少し外まで許してあるので、地の色が違うとそこが切れ目に見える。
     絵の余白の実測値は 249〜255 なので、白で繋がる。 */
  background: #fff;
  /*
   * 地図の上のもの（見取り図・ピン・札・パネル）を、ブラウザの選択（青い反転）や
   * 長押しメニュー・タップの網掛けの対象にしない。地図はダブルクリック・長押し・ドラッグで操作するため。
   */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

/*
 * 地図の外のボタンを連打しても、ページが拡大されないようにする（iOS は user-scalable=no を無視する）。
 * manipulation はダブルタップ拡大だけ止める（none だとボタンの上から地図を払えない）。地図の中は自前で none。
 */
button {
  touch-action: manipulation;
}

/* --- 地図の器（Mapbox を外したあとの中身） -------------------------
   拡大・移動・回転は .map-stage に掛ける transform ひとつで済ませる。
   画像もピンも区画もこの中にあるので、まとめて動く。 */

/* 地図を掴む所。touch-action: none を必ず指定する（無いと払ったときにページごと動く）。
   PC では掴める手のカーソルにする。 */
.map-canvas {
  touch-action: none;
  cursor: grab;
}

/* 掴んでいる間。中のピンや枠より強く効かせたいので、子孫まで指定する
   （.map-canvas.is-grabbing * は .map-zone-fill などより詳細度が高い）。
   クラスの付け外しは map/map-transform.js が行う。 */
.map-canvas.is-grabbing,
.map-canvas.is-grabbing * {
  cursor: grabbing;
}

/* 屋内マップの操作パネルは地図の上に乗っているが掴めない
   （map/map-transform.js の pointerdown が除外している）ので、
   掴める手を出さない。中のボタンは各自 pointer にしている。
   掴んでいる間は上の .is-grabbing が勝つが、そのときは地図を掴んで
   動かしている最中なので grabbing で正しい。 */
#indoor-panel {
  cursor: default;
}

.map-stage {
  height: 100%;
  width: 100%;
  /* JS が渡す translate/scale/rotate は、この左上を中心に掛かる前提で
     計算してある(lib/map-viewport.js)。原点を動かさないこと。 */
  transform-origin: 0 0;
  /* ★ ふだんは will-change: transform を付けないこと。
     付けるとブラウザがこの層を一度ラスタライズしたまま使い回すので、
     拡大したときに古い（粗い）絵が引き伸ばされて出る。
     動かしている間も付けない（下の .is-moving の注）。 */
}

/* ★ 動かしている間（.map-stage.is-moving。map.js の markStageMoving）にも will-change: transform を付けないこと。
   スマホ（とくに iPhone）は地図のような大きな層を低い解像度で描いて使い回すので、指で動かしている間ずっとぼやける。 */

/* 画像の比率そのままの箱。0〜1 座標の基準はここ1つに限る。
   aspect-ratio は map.js が CAMPUS_ASPECT から入れる。 */
.map-layers {
  position: relative;
  height: 100%;
}

/* 全体図（横3000px）。寄ったときの細かさは、上に重ねる切れ端（.map-tile）が受け持つ。 */
.map-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  -webkit-user-drag: none;
}

/* 寄ったときに全体図の上へ重ねる切れ端(map/map-tiles.js)。
   箱の大きさは元の絵の px（13063×8459）、それを JS が scale で地図の箱へ縮める。
   切れ端の位置と大きさも元の絵の px で入る（% だと拡大前の丸めが寄ったときにずれになる） */
.map-tiles {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  pointer-events: none;
  /* ★ z-index: 0 を消さないこと。切れ端は段階ごとに z-index を持つ(細かい段階を上に)。
     この箱で重ね合わせを閉じないと、その z-index が隣の .map-overlay より上に効き、
     見取り図・教室ピン・企画ピンが切れ端の下に隠れる（実際そうなった）。 */
  z-index: 0;
}

.map-tile {
  position: absolute;
  display: block;
  max-width: none;
  pointer-events: none;
  -webkit-user-drag: none;
}

/* ★ ここに will-change: transform を足さないこと（スマホでボトムシートが透けて地図が見えた）。
   戻すなら、実機でシートが透けないことを確かめてから。 */


/* ピン・区画を入れる箱。画像と **同じ矩形**に重ねる。
   画像と同じ箱に描くと、描き直しのたびに画像ごと消えてしまう。 */
.map-overlay {
  position: absolute;
  inset: 0;
  /* 中のピン・札が地図と一緒に拡大・回転しないよう、打ち消す値を
     map/map-layers.js が毎フレーム入れる */
  --map-inv-scale: 1;
  --map-inv-rotation: 0deg;
}

/* 区画のポリゴン。viewBox は「画像の高さを100、幅はその CAMPUS_ASPECT 倍」で、
   引き伸ばさない(preserveAspectRatio は既定のまま)。
   輪郭の太さは non-scaling-stroke で画面基準にしてある。 */
.map-zones {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.map-zone {
  pointer-events: none;
}

/* 押せるまとまりだけ当たり判定を持たせる。
   四角は塗りを持つので、面のどこを押しても開く。 */
.map-zone-fill {
  pointer-events: all;
  cursor: pointer;
}

/* 見た目を変えずに当たり判定だけ広げる、透明な太い輪郭。
   1件だけの区画は 4.4m 四方しかなく、引いた状態では指で狙えないため。 */
.map-zone-hit {
  pointer-events: stroke;
  cursor: pointer;
}

/*
 * 絵に描かれた枠の面（旧門衛所前広場）。押すと名前ボタンと同じく開く。ふだんは透明（絵の枠と二重にしない）。
 * セレクタを重ねてあるのは、.map-zone-fill:hover に勝たせるため。
 */
.map-zone-fill.map-location-area {
  fill: var(--themeocean);
  fill-opacity: 0;
  transition: fill-opacity 0.12s ease;
}

.map-zone-fill.map-location-area:hover {
  fill-opacity: 0.12;
}

.map-zone-fill.map-location-area:active {
  fill-opacity: 0.3;
}

/* 開いている間。名前ボタンの塗りつぶしと対になる */
.map-zone-fill.map-location-area.is-selected {
  fill-opacity: 0.2;
}

/* 押せることを手応えでも伝える */
.map-zone-fill:hover {
  fill-opacity: 0.65;
}

.map-zone-fill:active {
  fill-opacity: 0.75;
}

/* グラウンドの枠（白）は、上の濃さだと中のピンが白に埋もれるので控えめにする */
.map-zone-fill.is-whole-area:hover {
  fill-opacity: 0.4;
}

.map-zone-fill.is-whole-area:active {
  fill-opacity: 0.5;
}

/* 屋内マップの見取り図と教室ピン。ピンの箱とは分けてある
   （ピンの箱は描き直しのたびに空にするため）。 */
.map-indoor {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* 地図の絵の建物を隠す白塗り（map/indoor-map.js の createFootprintMask）。
   見取り図より下に置く。白の線で輪郭の滲み（アンチエイリアス）も隠す。
   ★ 線は輪郭の外へ元画像で約1px だけ出る。太くすると、隣の建物や道の線に白くかぶる（図書館の北の建物など）。 */
.indoor-footprint {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
/* 色は地図の絵の中庭の白（#fefefe）。真っ白だと、絵の建物の形が薄く浮いて見える */
.indoor-footprint-fill {
  fill: #fefefe;
}
/* 縁取り（絵の建物の縁の線を残さないため） */
.indoor-footprint-edge {
  fill: none;
  stroke: #fefefe;
  /* 元画像の約2px（viewBox の高さ100 = 元画像 8459px） */
  stroke-width: 0.024;
  stroke-linejoin: miter;
}

/* 1つの階の見取り図と教室ピンをまとめた箱（map/indoor-map.js の showIndoorFloor）。
   階を切り替えたら箱ごと入れ替え、前の階と重ねてふわっと入れ替える
   （本館の2F・3Fは同じ見取り図なので、切り替わったと分かるように）。 */
.indoor-floor {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* 次の階の見取り図を読み込んでいる間の前の階。薄くする（押しても何もしないのは indoor-map.js 側）。
   ★ pointer-events: none にしないこと。下の地図に届いて「何もない所を押した」扱いになり、屋内マップが閉じる */
.indoor-floor.is-waiting {
  opacity: 0.45;
}

.indoor-floor.is-waiting .indoor-pin-anchor {
  cursor: default;
}

/*
 * 見取り図（白塗り・階の箱）と操作パネルの出し入れ。長さは indoor-map.js の INDOOR_FADE_MS と合わせる。
 * ★ opacity だけを動かす。#indoor-panel は transform で置いているので、transform を動かすとずれる。
 * ★ 消えていく見取り図は、見取り図の箱のすぐ下の別の箱に移してから薄くする（indoor-map.js の fadeOutIndoor）。
 */
.map-indoor > .is-entering,
#indoor-panel.is-entering {
  animation: indoor-fade-in 0.25s ease-out both;
}

.map-indoor > .is-leaving,
#indoor-panel.is-leaving {
  animation: indoor-fade-out 0.25s ease-in both;
  pointer-events: none;
}

/* 消えていく階の教室ピンは押せないようにする（教室ピンは pointer-events: auto を持っている） */
.map-indoor > .is-leaving * {
  pointer-events: none !important;
}

@keyframes indoor-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes indoor-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* 動きを減らす設定では、ふわっとさせずに入れ替えるだけにする */
@media (prefers-reduced-motion: reduce) {
  .map-indoor > .is-entering,
  .map-indoor > .is-leaving,
  #indoor-panel.is-entering,
  #indoor-panel.is-leaving {
    animation: none;
  }
  .map-indoor > .is-leaving {
    display: none;
  }
}

/* 見取り図は建物の上にぴったり重なるので、そのままだと地図の絵に溶け込む。
   薄い影で1枚めくれているように見せ、「いま建物の中を見ている」ことを示す。 */
.indoor-image {
  position: absolute;
  pointer-events: none;
  -webkit-user-drag: none;
  /* ★ 影（filter: drop-shadow）は付けない。指で動かして新しく見えた所を描くたびに、大きく拡大した見取り図全体で
     影を計算し直すので、スマホで屋内マップを動かすと重かった。box-shadow も、背景が透明な見取り図の
     四角に影が浮くので使わない。 */
}

.map-pins {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* ★★ 地図の上に置くものの重なり順（下ほど広い「場所」、上ほど「企画」。広いものが上だと中の狭いものを押せない）。
   (1) 箱の前後（map-layers.js の initMapLayers の並び）: 区画 .map-zones → 見取り図 .map-indoor → .map-pins → 現在地 .map-user
   (2) .map-pins の中の z-index:
       1 施設・道の名前・入り口（押せない目印） / 2 建物の名前ボタン・お知らせの札 / 3 企画ピン /
       4 施設の検索中の施設 / 5 選んでいる企画ピン・吹き出しを出している案内所
       （現在地 .user-location は 6。押せないので、下のものはそのまま押せる）
   ★ 足すものが増えたら、この表と README.md の同じ表にも足すこと。 */
.map-pins > .facility-marker,
.map-pins > .facility-label,
.map-pins > .road-label,
.map-pins > .entrance-marker { z-index: 1; }

.entrance-marker[hidden] {
  display: none;
}
.map-pins > .location-btn,
.map-pins > .map-note       { z-index: 2; }
.map-pins > .pin-marker     { z-index: 3; }

/* 施設の検索中（「休憩所」など）は、当たった施設を建物ボタン・企画ピンより上に出す（隠れて見つからないため） */
.map-pins.is-facility-search > .facility-marker { z-index: 4; }
/* 吹き出しを出している案内所は、建物ボタンや企画ピンに吹き出しが隠れないように上へ */
.map-pins > .facility-marker.is-bubble-open { z-index: 5; }

/* 押せない目印（施設の記号・本部や門の札）は、指もマウスも下の地図へ通す。
   カーソルも地図と同じ（掴む手）のまま変わらない。押せる施設（.is-tappable）だけは受ける */
.map-pins > .facility-marker:not(.is-tappable),
.map-pins > .facility-label {
  pointer-events: none;
}

/* ピン・札の共通の置き方。
   left/top は画像内の割合で入り、transform で地図の拡大と回転を打ち消す。
   打ち消さないと、寄るほどピンが大きくなり、回すと札が傾く。 */
.map-pins > *,
.map-indoor .indoor-pin-anchor {
  position: absolute;
  pointer-events: auto;
  transform-origin: 50% 100%;
  transform:
    translate(-50%, -100%)
    scale(var(--map-inv-scale))
    rotate(var(--map-inv-rotation));
}

/* 教室ピンは、涙型の先端を教室の点（教室の四角の真ん中）に合わせる。
   涙型は一辺 --indoor-pin-size の四角を -45° 回したもので、先端は上端から 一辺 × (1 + √2) / 2 */
.map-indoor .indoor-pin-anchor {
  transform-origin: 50% calc(var(--indoor-pin-size) * var(--pin-scale) * 1.2071);
  transform:
    translate(-50%, calc(var(--indoor-pin-size) * var(--pin-scale) * -1.2071))
    scale(var(--map-inv-scale))
    rotate(var(--map-inv-rotation));
}

/* 名前ボタンの真ん中を点に合わせる場所（CENTERED_LOCATION_LABELS。法人本部棟前ステージ） */
.map-pins > .location-btn.is-centered {
  transform-origin: 50% 50%;
  transform:
    translate(-50%, -50%)
    scale(var(--map-inv-scale))
    rotate(var(--map-inv-rotation));
}

/* 企画ピンは丸の中心を座標に合わせる。
   ★ 件数ピン（.is-location-result）は下端のまま（建物ボタンの上に持ち上げる作りのため）。 */
.map-pins > .pin-marker:not(.is-location-result) {
  transform-origin: 50% 50%;
  transform:
    translate(-50%, -50%)
    scale(var(--map-inv-scale))
    rotate(var(--map-inv-rotation));
}

/* 現在地は中心で合わせる（下端ではない）。
   建物の名前ボタンやピンより上に出す（Google マップと同じ。z-index は上の表の 5 より上）。
   ★ 押せないようにしておく（丸の下のボタン・ピンを押せるように）。 */
.map-user > .user-location {
  z-index: 6;
  pointer-events: none;
  transform-origin: 50% 50%;
  transform:
    translate(-50%, -50%)
    scale(var(--map-inv-scale))
    rotate(var(--map-inv-rotation));
}

/* 上部バー */
/* 上部バー。左右のアイコンは縦に積み、中央の検索ボタンは上端に揃える。
   バー自体は地図の操作を邪魔しないよう、当たり判定を子要素だけに限る。 */
#top-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  /*
   * アイコンと検索欄の高さは、狭い画面でも 40px（指で押せる大きさ）。
   * ★ 高さを変えるときは .search-bar の height も一緒に動かすこと（上端・高さをそろえる約束）。
   */
  padding: 15px;
  pointer-events: none;
}

#top-bar > * {
  pointer-events: auto;
}

/* 左右のアイコン列 */
.top-bar-side {
  display: flex;
  flex-direction: column;
  /* 左に寄せる */
  align-items: flex-start;
  gap: 5px;
  flex-shrink: 0;
}

/* ★ 大きさは #top-bar 側で上書きする（下の「上部バーのアイコン」）。
   ここの 30px が効くのは右下の拡大・縮小(#map-zoom)だけ。 */
.icon-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 2px solid var(--themeocean);
  background: #fff;
  color: var(--themeocean);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: bold;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
  cursor: pointer;
}

/* 中の絵は width/height 属性で 22px と書いてあるので、ここで詰める
   (30pxの丸に枠2pxぶんを引くと26pxしか残らない) */
.icon-btn svg {
  width: 18px;
  height: 18px;
}

/* 検索欄。左に虫眼鏡、入力欄、右端に「絞り込み」ボタン、という並び。
   枠はこの箱が持ち、中の入力欄とボタンは枠を持たない。 */
/* --- 上部バーのアイコンと検索欄（狭い・広い共通で 40px）---
   指で押せる大きさにそろえてある。経緯は #top-bar のコメント。 */
#top-bar .icon-btn {
  width: 40px;
  height: 40px;
  font-size: 20px;
}

#top-bar .icon-btn svg {
  width: 24px;
  height: 24px;
}

/* トップページへ戻るボタンのロゴマーク（ほかのアイコンと同じ 40px の丸に、高さ 24px で収める）。 */
#top-bar .btn-home-logo img {
  display: block;
  width: auto;
  height: 24px;
  /* 絵を掴んで引きずれないように（ボタンとして押すだけ） */
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

/*
 * 検索欄。見た目は企画検索TOP のスマホ版（css/search_top.css の .q-input など）と同じ。
 * 違うのは、高さが 40px（左右のアイコンとそろえる。#top-bar）なのと、地図と見分ける薄い影だけ。
 */
.search-bar {
  flex: 1;
  min-width: 0;
  position: relative;   /* 検索履歴の一覧（search/assets/search_history.css）を真下に出す */
  /* 左のアイコン(40px)と上端・高さをそろえる（#top-bar のコメント参照） */
  height: 40px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding-right: 9px;
  border-radius: 20px;
  border: 1px solid var(--themeocean);
  background: var(--c-pale-blue);
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}

/* 文字を打っている間は薄い輪で囲む */
.search-bar:focus-within {
  box-shadow: 0 0 0 3px rgba(12, 95, 129, .2), 0 1px 3px rgba(0,0,0,0.12);
}

/* 虫めがね（押すと検索）。円と、45° 回した柄の素材を重ねる。当たり判定は検索欄の高さいっぱい */
.search-bar .search-icon {
  position: relative;
  flex: 0 0 44px;
  align-self: stretch;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.search-bar .search-icon img {
  position: absolute;
  pointer-events: none;
}

.search-bar .search-icon__circle {
  left: 16px;
  top: 9px;
}

.search-bar .search-icon__handle {
  left: 27.55px;
  top: 26.5px;
  transform: rotate(45deg);
}

/* 入力欄。★ iOS は 16px 未満の入力欄に触れると画面を拡大するので、文字は 16px にする。
   狭い画面では案内文(placeholder)が入りきらないので、そちらだけ小さくする。 */
.search-keyword {
  flex: 1;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0 0 0 2px;
  border: none;
  outline: none;
  background: transparent;
  font-size: 16px;
  color: var(--themeocean);
  /* 入りきらない案内文は「…」で切る（右の「絞り込み」に字が掛からないように） */
  text-overflow: ellipsis;
  -webkit-appearance: none;
  appearance: none;
}

.search-keyword::placeholder {
  font-size: 14px;
  color: var(--themeocean);
  opacity: 1;
}

/* type="search" が自前で出す×は消す（隣の .search-reset-btn と二重になる） */
.search-keyword::-webkit-search-cancel-button {
  -webkit-appearance: none;
  display: none;
}

/* ×（入力を消す）。文字があるときだけ出す（hidden 属性。map-filters.js の syncSearchClearButton） */
.search-reset-btn {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 4px;
  padding: 4px;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--c-line-blue);
  cursor: pointer;
}

.search-reset-btn[hidden] {
  display: none;
}

/* 右端の「絞り込み」。押すとジャンルの絞り込みパネルが開く */
.search-filter-btn {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  height: 26px;
  /* 左は入力欄の字との間をあける */
  margin: 0 0 0 6px;
  padding: 0 12px 0 10px;
  border: .6px solid var(--themeocean);
  border-radius: 13px;
  background: var(--themeocean);
  color: var(--themewhite);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

.search-filter-btn img {
  display: block;
  flex: none;
  width: 12px;
  height: auto;
}

/* 絞り込み中は、ボタンの右上に赤い点を付ける（ボタンはいつも塗ってあり、色では見分けられないため） */
.search-filter-btn.is-applied::after {
  content: "";
  position: absolute;
  top: -3px;
  right: -2px;
  width: 8px;
  height: 8px;
  border: 1.5px solid #fff;
  border-radius: 50%;
  background: var(--c-compass-north);
}

.search-reset-btn:focus-visible,
.search-filter-btn:focus-visible {
  outline: 2px solid var(--themeocean);
  outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .search-reset-btn:hover { color: var(--themeocean); }
  .search-filter-btn:hover { filter: brightness(.94); }
}

/* 拡大・縮小ボタン（右下）。狭い画面では出さない（つまめば寄れるうえ、画面を削るだけなので）。
   広い画面には残す（キーボードだけで操作する人の唯一の寄せ方）。 */
#map-zoom {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 12;
  display: none;
  flex-direction: column;
  gap: 6px;
}

/* ＋と－（全角の文字）。アイコンより一回り大きくし、細い「－」に合わせて -webkit-text-stroke で太らせる。 */
#map-zoom .icon-btn {
  font-size: 18px;
  line-height: 1;
  font-weight: bold;
  -webkit-text-stroke: 0.6px currentColor;
}

/* 広い画面ではシートが左パネルになり、下端をふさがない */
@media (min-width: 768px) {
  #map-zoom {
    display: flex;
  }
}

/* --- 現在地（SPEC.md §4.0）。ピンと同じく地図の拡大・回転を打ち消す --- */
.user-location {
  width: 0;
  height: 0;
}

.user-dot {
  position: absolute;
  left: 0;
  top: 0;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border-radius: 50%;
  background: var(--c-locate);
  border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.35);
}

/* 誤差の円（Google マップと同じ薄い青）。半径は誤差（m）× 1m の画面上の px（map-layers.js の --px-per-m）。
   丸より小さいときは丸に隠れる。 */
.user-accuracy {
  /* ★ 半径は画面上で 100px まで。大きいと地図を覆い隠し、誤差が1km あれば直径8000px になって
       地図を動かすたびの描き直しでスマホの指の操作も重くなる */
  --user-accuracy-px: min(calc(var(--user-accuracy-m) * var(--px-per-m, 0.1) * 1px), 100px);
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--user-accuracy-px) * 2);
  height: calc(var(--user-accuracy-px) * 2);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(26, 115, 232, 0.15);
  background: color-mix(in srgb, var(--c-locate) 15%, transparent);
  border: 1px solid rgba(26, 115, 232, 0.3);
  border: 1px solid color-mix(in srgb, var(--c-locate) 30%, transparent);
  pointer-events: none;
}

/* 向きが取れているときだけ出す扇。丸の後ろに敷く。
   丸(16px)から外へ十分はみ出す大きさにしないと、向きが読み取れない。 */
/* 誤差の円・扇は、取れていないときは hidden（map-layers.js の setUserLocation） */
.user-location > [hidden] {
  display: none;
}

.user-heading {
  position: absolute;
  left: 0;
  top: 0;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  border-radius: 50%;

  /*
   * 扇の向き。★ 地図の回転を足すこと（現在地は回転を打ち消してあるので、この中では上＝画面の上。
   * --user-heading は真北基準なので、地図が回っていればそのぶんずらす）。
   */
  transform: rotate(calc(var(--user-heading) - var(--map-inv-rotation)));

  /* 真上を中心に約70度の扇。2つあるのは color-mix が使えない環境向け
     （1つ目が残る）。1つ目は --c-locate と同じ値を数値で書いたもの。 */
  background: conic-gradient(
    from -35deg,
    rgba(26, 115, 232, 0.7) 0deg,
    rgba(26, 115, 232, 0.7) 70deg,
    transparent 70deg
  );
  background: conic-gradient(
    from -35deg,
    color-mix(in srgb, var(--c-locate) 70%, transparent) 0deg,
    color-mix(in srgb, var(--c-locate) 70%, transparent) 70deg,
    transparent 70deg
  );

  /* 外へ向かって薄れさせる。縁で切ると扇が板に見えて、丸との関係が読めない。
     ★ 濃さは「扇の色 × ここの不透明度」で決まる。薄くしすぎると地図の
       建物の色に負けて、向きが読み取れなくなる。 */
  -webkit-mask-image: radial-gradient(circle, #000 30%, rgba(0,0,0,0.85) 60%, transparent 95%);
  mask-image: radial-gradient(circle, #000 30%, rgba(0,0,0,0.85) 60%, transparent 95%);
}

/* 現在地ボタン（Google マップと同じ見た目）。白い丸に影、枠なし。
   絵は灰色、地図が現在地を追っている間（data-state="follow"）だけ地図の丸と同じ青。
   絵の出し分けは data-state（map.js の setLocateState）。 */
#top-bar #btn-locate {
  border-color: #fff;
  background: #fff;
  color: #5f6368;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

#top-bar #btn-locate[data-state="follow"] {
  color: var(--c-locate);
}

#btn-locate .locate-icon { display: none; }
#btn-locate[data-state="located"] .locate-icon--on,
#btn-locate[data-state="follow"] .locate-icon--on,
#btn-locate[data-state="searching"] .locate-icon--searching,
#btn-locate[data-state="denied"] .locate-icon--denied { display: block; }

/* 位置が取れるまでは、照準をゆっくり点滅させる（取りに行っている最中だと分かるように） */
#btn-locate[data-state="searching"] .locate-icon--searching {
  animation: locate-searching 1.2s ease-in-out infinite alternate;
}

@keyframes locate-searching {
  from { opacity: 1; }
  to { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
  #btn-locate[data-state="searching"] .locate-icon--searching { animation: none; }
}

/* 会場の外で現在地ボタンを押したときの案内（map.js の showLocateNotice） */
#locate-notice {
  position: fixed;
  left: 50%;
  top: 72px;
  z-index: 10001;
  max-width: calc(100vw - 32px);
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(32, 33, 36, 0.9);
  color: #fff;
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
  transform: translate(-50%, -8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
}

#locate-notice.is-shown {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* コンパス。針は map.js が毎フレーム回す。
   ★ transition を付けないこと（毎回補間が始まって、遅れて追いかけたまま最後にカクッと止まる）。 */

/* MAP検索の使い方(SPEC.md §4.0) */
#help-overlay {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0,0,0,0.45);
  transition: background 0.32s ease;
}

#help-overlay.hidden {
  display: none;
}

/* 閉じるときは背景を先に消し、ダイアログを「?」アイコンへ吸い込ませる */
#help-overlay.closing {
  background: rgba(0,0,0,0);
}

#help-dialog {
  /* 見出しの sticky がこの値を打ち消すので、変えるときは1か所で済ませる */
  --help-pad: 16px;
  --help-radius: 14px;
  width: 100%;
  max-width: 420px;
  max-height: 80%;
  overflow-y: auto;
  background: #fff;
  border-radius: var(--help-radius);
  padding: var(--help-pad);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  transform-origin: center;
}

/* PC は横長にする（施設の凡例が1行に多く並び、縦に短くなる）。幅の境目は sheet-snap.js の WIDE_SCREEN_QUERY と同じ */
@media (min-width: 768px) {
  #help-dialog {
    max-width: 640px;
  }
}

/* 「×」で閉じると「?」アイコンに吸い込まれる（SPEC.md §4.0）。少し膨らんでから飛び、着地寸前で消える。
   移動量と縮小率（--help-dx / --help-dy / --help-scale）は help-dialog.js が測って渡す。 */
@keyframes help-suck-into-icon {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  20% {
    transform: translate(0, 0) scale(1.06);
  }
  85% {
    opacity: 0.92;
  }
  100% {
    transform: translate(var(--help-dx, 0), var(--help-dy, 0)) scale(var(--help-scale, 0.1));
    opacity: 0;
  }
}

#help-overlay.closing #help-dialog {
  animation: help-suck-into-icon 520ms cubic-bezier(0.5, 0, 0.75, 0.1) forwards;
  box-shadow: none;
}

/* 吸い込んだ瞬間に「?」アイコンが弾む */
@keyframes help-icon-catch {
  0% { transform: scale(1); }
  40% { transform: scale(1.4); }
  100% { transform: scale(1); }
}

/* 「?」の字は書体の上下の余白が違い、真ん中に置くと約1.5px 下に見えるので持ち上げる */
#top-bar #btn-help {
  padding: 0 0 3px;
}

#btn-help.catching {
  animation: help-icon-catch 280ms ease-out;
}

/* 見出しと「×」は、スクロールしても上に残す（下まで読んだとき閉じられなくなるので）。
   ★ top: 0 にしないこと（sticky は padding の内側に貼り付くので、上に隙間ができて本文が覗く）。
     負のマージンで padding を打ち消し、枠の上端・左右いっぱいの白い帯にする。上の角だけ丸める。 */
.help-header {
  position: sticky;
  top: calc(var(--help-pad) * -1);
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: calc(var(--help-pad) * -1) calc(var(--help-pad) * -1) 8px;
  padding: var(--help-pad) var(--help-pad) 8px;
  border-radius: var(--help-radius) var(--help-radius) 0 0;
  background: #fff;
}

#help-title {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 500;
  color: var(--themeocean);
  margin: 0;
}

.help-list {
  margin: 0;
  padding-left: 1.2em;
}

.help-list li {
  font-size: 13px;
  line-height: 1.7;
  color: var(--themeblack);
}

/*
 * 絞り込みパネル。見た目は企画検索TOP のスマホ版の絞り込みシート（.filter-panel）と同じで、
 * 下から出て画面の上まで使う。タブは無い（地図はジャンルだけで絞る）。
 * 広い画面では検索欄の真下につなげて出す（下の @media）。
 * z-index はヘルプ（30）より上で、上部バー・ボトムシートも覆う。
 */
#genre-panel {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: flex-end;
  background: rgba(0, 0, 0, .3);
}

#genre-panel.hidden {
  display: none;
}

.genre-sheet {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;    /* 画面の上まで引き延ばす */
  height: 100dvh;   /* スマホのアドレスバーの出入りに合わせる */
  background: var(--themewhite);
  border-radius: 28px 28px 0 0;
  overflow: hidden;
}

/* 見出し「絞り込み検索」と × */
.genre-sheet-head {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 49px;
  background: var(--c-pale-blue);
  border-bottom: 1px solid var(--themeocean);
}

.genre-sheet-title {
  margin: 0;
  color: var(--themeocean);
  font-size: 14px;
  font-weight: 500;
}

/* ×は2本の線で描く */
.genre-sheet-close {
  position: absolute;
  right: 22px;
  top: 50%;
  width: 26px;
  height: 26px;
  margin-top: -13px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.genre-sheet-close::before,
.genre-sheet-close::after {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 25.7px;
  height: 2px;
  background: var(--themeocean);
}

.genre-sheet-close::before { transform: rotate(45deg); }
.genre-sheet-close::after  { transform: rotate(-45deg); }

/* 条件の並び。ここだけスクロールする。中身は幅 300px で中央、大分類は1列に積む */
#genre-list {
  flex: 1;
  min-height: 0;
  box-sizing: border-box;
  padding: 27px max(20px, calc(50% - 150px)) 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* ブラウザのスクロールバーは隠し、常に見える #genre-scrollbar を重ねる */
  scrollbar-width: none;
}

#genre-list::-webkit-scrollbar {
  display: none;
}

/* 絞り込みのスクロールバー。位置と大きさは map.js の initGenreScrollbar が #genre-list に合わせて入れる */
.genre-sheet {
  position: relative;
}

.genre-scrollbar {
  position: absolute;
  right: 6px;
  width: 4px;
  border-radius: 2px;
  background: var(--c-pale-blue);
  touch-action: none;
}

.genre-scrollbar[hidden] {
  display: none;
}

.genre-scrollbar-thumb {
  position: relative;
  width: 100%;
  border-radius: 2px;
  background: var(--themeocean);
  cursor: grab;
}

/* 指やマウスで掴みやすいよう、当たり判定だけ左右に広げる */
.genre-scrollbar-thumb::before {
  content: '';
  position: absolute;
  inset: 0 -8px;
}

/* 大分類のまとまり（飲食・物販…）。下線で区切る */
.genre-category {
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--themeocean);
}

/* 大分類の見出し行(絵と名称 + 「全て選択」) */
.genre-category-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 11px;
}

.genre-category-title {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0;
  padding: 0;
  color: var(--themeocean);
  font-size: 15px;
  font-weight: 500;
}

.genre-category-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

/* 「日時」の見出しの時計（img/clock.svg）。素材は灰色なので、形だけ使ってジャンルの絵と同じ色で塗る */
.icon-clock {
  background-color: var(--themeocean);
  -webkit-mask: url('img/clock.svg') center / contain no-repeat;
          mask: url('img/clock.svg') center / contain no-repeat;
}

.genre-category-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
}

/* チップ */
.genre-chip {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  height: 22px;
  padding: 0 8px;
  border: .5px solid var(--c-line-blue);
  border-radius: 8px;
  background: var(--themewhite);
  color: var(--themeocean);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

/* 日付のチップは幅をそろえて、px の整数にする。字の幅なりだと端数が出て（21日(土) は 66.17px）、
   0.5px の枠線の右端が画素の境目にかかって薄くかすれて見えた。3つ（90×3＋間14×2）で列の幅 300px に収まり、
   いちばん長い「23日(月・祝)」も入る */
.genre-chip[data-day] {
  width: 90px;
  padding: 0 4px;
}

.genre-chip.selected {
  background: var(--themeocean);
  border-color: var(--themeocean);
  color: #fff;
}

/* 日時の「開始 〜 終了」 */
.when-time {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.when-time-select {
  flex: 1;
  min-width: 0;
  height: 30px;
  padding: 0 6px;
  border: .5px solid var(--c-line-blue);
  border-radius: 8px;
  background: var(--themewhite);
  color: var(--themeocean);
  font-size: 16px;   /* 16px 未満だと iOS が選ぶときに画面を拡大する */
}

.when-time-sep {
  color: var(--themeocean);
}

.when-all-day {
  margin-top: 10px;
}

.when-all-day[hidden] {
  display: none;
}

/* 全て選択 */
.btn-select-all {
  flex: none;
  box-sizing: border-box;
  min-width: 76px;
  height: 22px;
  padding: 0 6px;
  border: .5px solid var(--themeocean);
  border-radius: 8px;
  background: var(--themewhite);
  color: var(--themeocean);
  font-size: 14px;
  white-space: nowrap;
  cursor: pointer;
}

/* 全部選び終わって「選択を解除」になっているとき（文字は syncGenreChips が替える） */
.btn-select-all.is-clear {
  background: var(--themeocean);
  color: #fff;
}

.genre-chip:focus-visible,
.btn-select-all:focus-visible,
.genre-sheet-close:focus-visible {
  outline: 2px solid var(--themeocean);
  outline-offset: 2px;
}

/* リセット / この条件で検索（シートの下に固定） */
.genre-sheet-actions {
  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(--themewhite);
  border-top: 1px solid var(--c-pale-blue);
}

.genre-btn-reset,
.genre-btn-search {
  box-sizing: border-box;
  height: 44px;
  padding: 0;
  border-radius: 41.5px;
  font-size: 18px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}

.genre-btn-reset {
  flex: 0 0 110px;
  border: 1px solid var(--c-line-blue);
  background: #cee6ef;
  color: var(--themeocean);
}

.genre-btn-search {
  flex: 1;
  border: 0;
  background: var(--themeocean);
  color: var(--themewhite);
}

.genre-btn-reset:focus-visible,
.genre-btn-search:focus-visible {
  outline: 2px solid var(--themeocean);
  outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .genre-chip:not(.selected):hover,
  .btn-select-all:not(.is-clear):hover {
    background: #d6e9ef;
  }
  .genre-btn-reset:hover,
  .genre-btn-search:hover {
    filter: brightness(.94);
  }
}

/*
 * 広い画面では、検索欄の真下に同じ幅でつなげて出す。
 * 位置と幅は map.js の placeGenreSheet が測って --gp-* に入れる（検索欄の幅は画面で変わる）。
 * つながって見せるため、検索欄を暗い地より上に出し、検索欄の下の角と枠を消す。
 * シートの見出しの帯は検索欄と同じ水色なので、1つの箱に見える。
 */
@media (min-width: 768px) {
  #genre-panel {
    display: block;
  }

  .genre-sheet {
    position: absolute;
    /* 予備の値（JS が測る前）は、幅 440px を画面の真ん中に置く位置 */
    left: var(--gp-left, calc(50% - 220px));
    top: var(--gp-top, 70px);
    box-sizing: border-box;
    width: var(--gp-width, 440px);
    height: auto;
    max-height: calc(100vh - var(--gp-top, 70px) - 24px);
    border: 1px solid var(--themeocean);
    border-top: 0;
    border-radius: 0 0 20px 20px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  }

  /* 高さは中身に合わせる（基本の flex: 1 のままだと 0 に潰れる）。多ければ一覧だけスクロール */
  .genre-sheet #genre-list {
    flex: 1 1 auto;
    /* 中身はシートの幅いっぱいに広げる（狭い画面の幅 300px の列のままだと中央に寄りすぎる） */
    padding: 24px 32px;
  }

  /* リセット / この条件で検索も、シートの幅に合わせて右寄せ */
  .genre-sheet-actions {
    max-width: none;
    justify-content: flex-end;
    padding: 12px 32px 16px;
  }

  .genre-btn-search {
    flex: 0 0 260px;
  }

  /* 開いている間は、検索欄を暗い地より上に出す（#genre-panel は z-index 40） */
  #top-bar:has(#btn-search-toggle[aria-expanded="true"]) {
    z-index: 41;
  }

  /* 検索欄の左右のボタン（ホーム・使い方・コンパス・現在地）は、ほかの背景と同じく押せなくして暗くする */
  #top-bar:has(#btn-search-toggle[aria-expanded="true"]) .top-bar-side {
    pointer-events: none;
    filter: brightness(0.7);
  }

  #top-bar:has(#btn-search-toggle[aria-expanded="true"]) .search-bar,
  #top-bar:has(#btn-search-toggle[aria-expanded="true"]) .search-bar:focus-within {
    border-bottom-color: transparent;
    border-radius: 20px 20px 0 0;
    box-shadow: none;
  }
}

/* 施設で検索したときの、種類ごとの件数 */
.facility-result-list {
  margin: 8px 0 0;
  padding-left: 1.2em;
  font-size: 14px;
  line-height: 1.8;
  color: var(--c-sheet-text);
}

.btn-primary, .btn-secondary {
  flex: 1;
  padding: 10px;
  border-radius: 8px;
  border: none;
  font-size: 14px;
}

.btn-primary {
  background: var(--themeocean);
  color: #fff;
}

.btn-secondary {
  background: #fff;
  color: var(--themeocean);
  border: 2px solid var(--themeocean);
}

/* 屋内マップのフロア切替(SPEC.md §4.2.1)
   屋内マップの上をスワイプして階を切り替え、その下にインジケーターを出す。
   どちらも建物の位置に合わせるため、map.js がMapboxのキャンバスコンテナ内に生成し
   位置を毎フレーム更新する。 */

/* スワイプ領域。教室ピンより前(DOM順で先)に挿入するため、ピンのタップを妨げない。
   touch-action: none で、スワイプ中にブラウザ側のスクロールが割り込まないようにする。 */
/* 屋内マップの操作パネル(SPEC.md §4.2.1)。
   **建物の脇**に置く（位置は map/indoor-map.js が建物の画面上の位置から決める）。
   見た目は地図の操作ボタン(拡大・縮小・コンパス)に揃え、
   大きさは寄り引きしても変えない。 */
#indoor-panel {
  /* 建物の色（indoor-map.js が .o_* から読んで入れる。無ければテーマ色）。★ ここに色を直接書かない。 */
  --c-indoor: var(--themeocean);
  /* 選んでいる階ボタンの色。建物名の帯（--c-indoor）より少し薄くする（color-mix の無いブラウザは同じ色） */
  --c-indoor-selected: var(--c-indoor);
  position: absolute;
  /*
   * 建物の脇の地図上の1点に留める（left/top は indoor-map.js）。地図の拡大と回転だけ打ち消す。
   * ★ transform の順番を変えないこと（右端の translate を先に掛けて、画面の px でずらす）。
   */
  transform-origin: 0 0;
  transform:
    scale(var(--map-inv-scale))
    rotate(var(--map-inv-rotation))
    translate(var(--indoor-panel-dx, 10px), -50%);
  pointer-events: auto;
  z-index: 12;
  width: 40px;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 2px solid var(--c-indoor);
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
  overflow: hidden;
}

@supports (color: color-mix(in srgb, red 50%, #fff)) {
  #indoor-panel { --c-indoor-selected: color-mix(in srgb, var(--c-indoor) 65%, #fff); }
}

/* 屋内マップのパネルの建物名。 */
.indoor-panel-name {
  padding: 4px 0 3px;
  background: var(--c-indoor);
  /*
   * 文字は黒。建物の色は本館 #dabf63・講義棟 #7aaa9e・図書館 #c77171 と明るく、
   * 白字では読めない(本館で 1.9:1)。黒字なら 5〜8.7:1 になる。
   */
  color: var(--themeblack);
  font-size: 10px;
  font-weight: bold;
  line-height: 1.2;
  text-align: center;
  letter-spacing: -0.02em;
}

.indoor-panel-floors {
  display: flex;
  flex-direction: column;
}

/* 階ボタン。上が上階(エレベーターの階数表示と同じ並び) */
.floor-btn {
  height: 36px;
  padding: 0;
  border: none;
  background: none;
  /* 選んでいない階は白地なので、建物の色では薄すぎる。文字は黒のまま */
  color: var(--themeblack);
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.floor-btn + .floor-btn {
  border-top: 1px solid #e6e6e6;
}

.floor-btn.selected {
  background: var(--c-indoor-selected);
  color: var(--themeblack);
}

/* 階を切り替えた直後に一瞬だけ光らせ、今どの階を見ているかへ目を向けさせる。
   2Fと3Fは間取りが似ているため、画像の変化だけでは気づきにくい。 */
@keyframes floor-btn-flash {
  0%   { background: var(--c-indoor-selected); }
  30%  { background: #fff; }
  100% { background: var(--c-indoor-selected); }
}

.floor-btn.selected.changed {
  animation: floor-btn-flash 0.6s ease;
}

@media (prefers-reduced-motion: reduce) {
  .floor-btn.selected.changed { animation: none; }
}

.indoor-panel-close {
  height: 28px;
  padding: 0;
  border: none;
  border-top: 1px solid #e6e6e6;
  background: none;
  color: #888;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

/* 屋内マップの教室ピン(画像内のイラストピンと同じ涙型デザイン)
   外側(indoor-pin-anchor)は座標に合わせて位置決めする土台で、回転しない。
   内側(indoor-pin)を回転させた涙型にする。座標に来るのは涙型の先端（上の .map-indoor .indoor-pin-anchor）。 */
.indoor-pin-anchor {
  /* Mapboxはマーカーを position: absolute + transform で座標に合わせる。
     ここで relative にすると通常フローの位置が基準になってしまい、
     ズームしても解消されないズレが残る(=拡大縮小でピンが動いて見える)ため absolute にする。 */
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--indoor-pin-size) * var(--pin-scale));
  height: calc((var(--indoor-pin-size) + 5px) * var(--pin-scale));
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
}

.indoor-pin {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--indoor-pin-size) * var(--pin-scale));
  height: calc(var(--indoor-pin-size) * var(--pin-scale));
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  /* 既定は本館の金色。INDOOR_MAPS の pinAreaColor が true の建物（講義棟）は、
     map/indoor-map.js がその建物のエリアの色を --indoor-pin-color に入れる */
  background: var(--indoor-pin-color, #d9ae4e);
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}

.indoor-pin-label {
  transform: rotate(45deg);
  color: #fff;
  font-size: calc(11px * var(--pin-scale));
  font-weight: bold;
  /* 地の色（本館の金・講義棟の緑）はどれも明るく、白い文字だけでは読みにくい。
     薄い影で文字の縁を締める */
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.45);
}

/* 番号が3桁の教室ピン（講義棟）。2桁用の大きさでは数字がはみ出して読めないので、このピンだけ大きくする。 */
.indoor-pin-anchor.is-long {
  --indoor-pin-size: var(--indoor-pin-size-long);
}

/* 教室ピンの下に添える記号（21教室の休憩所。INDOOR_MAPS の rooms の icon）。大きさは施設の記号と同じ */
.indoor-pin-icon {
  position: absolute;
  top: calc(100% + 2px * var(--pin-scale));
  left: 50%;
  transform: translateX(-50%);
  width: calc(var(--facility-size) * var(--pin-scale));
  height: calc(var(--facility-size) * var(--pin-scale));
  display: block;
}

.indoor-pin-anchor.is-long .indoor-pin-label {
  font-size: calc(10.5px * var(--pin-scale));
  letter-spacing: -0.03em;
}

/* 文字の無い教室ピン（本館1F・図書館）。img/pin.png のように、真ん中に地の色より濃い円を描く。
   円は半透明の黒を重ねて作るので、絞り込みの赤・選んだときの赤でもその色の濃い円になる */
.indoor-pin-anchor.is-blank .indoor-pin::after {
  content: '';
  width: 48%;
  height: 48%;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.22);
}

/* エリアコード(map_area)ごとの企画ピンの色(SPEC.md §4.1)。
   マップデザイン上の建物の色と対応させる。装飾企画は地理的なエリアではなく
   o_deco という専用コードを持つ。
   map.js の getComputedDotColor() がここから色を読むので、
   色の定義はこの1か所だけにしてある。 */
.o_honkan { background: #dabf63; }
.o_lecture { background: #7aaa9e; }
.o_library { background: #c77171; }
.o_westplaza { background: #8fb3bd; }
.o_ground { background: #bca17d; }
.o_stage { background: #446d83; }
.o_deco { background: #ff7bac; }   /* 装飾。地理的なエリアを持たない専用コード */

/* 色を読み出すためだけの見えない要素 */
.area-color-probe {
  position: absolute;
  width: 0;
  height: 0;
}

/* 「?」の中に置くピン形状の凡例 */
.help-section-title {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 500;
  color: var(--themeocean);
  margin: 18px 0 8px;
  padding-bottom: 3px;
  border-bottom: 2px solid var(--c-accent-soft);
}

.help-pin-legend {
  display: flex;
  /* 折り返したときの行の間。ピンの見本（26px）が大きいので、施設の凡例（8px）より詰める */
  gap: 3px 18px;
  flex-wrap: wrap;
}

.help-pin-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}

.help-note {
  font-size: 11px;
  color: #777;
  margin: 8px 0 0;
}

/* 凡例用のピン見本。実際のピンと同じ見た目にする(中身のアイコンは map.js が入れる) */

/* 装飾だけは、地図でも場所によらずピンクなので見本もピンクにする。
   形は他と同じ丸のままにすること(下の .pin-sample を上書きしない) */
.pin-sample.is-deco {
  background: #ff7bac;
}

/* 影は付けない。地図の上のピンは絵から浮かせるために影を持つが、
   凡例は白い紙の上に並ぶ一覧なので、浮かせる理由が無い */
.pin-sample {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: #9e9e9e;
  color: #fff;
  flex-shrink: 0;
}

/* ボトムシート。ハンドルは固定、内容だけスクロールする。
   ★★ 高さではなく位置（transform）で出し入れする（height を変えると毎回一覧を並べ直して、スマホでカクつく）。
     箱の高さは上限（--sheet-max-height）で固定し、見えている高さ（--sheet-height）のぶんだけせり上げる。
   ★ 画面の外に出ている部分（--sheet-hidden）を一覧の下の余白に足す（最後まで読めるように。ドラッグ中は変えない）。
   ★ position は fixed（absolute だと、はみ出た部分のぶんページがスクロールできてしまう）。 */
#bottom-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  height: var(--sheet-max-height);
  transform: translate3d(0, calc(var(--sheet-max-height) - var(--sheet-height)), 0);
  will-change: transform;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--themewhite);
  /* 角の丸みは絞り込みシートと同じ 28px */
  border-radius: 28px 28px 0 0;
  box-shadow: 0 -4px 12px rgba(0,0,0,0.15);
  /* 出し入れの動き（終わりがゆっくり止まる曲線。値は --sheet-ease / --sheet-duration。広い画面のパネルも同じ）。 */
  transition: transform var(--sheet-duration) var(--sheet-ease);
  color: var(--c-sheet-text);
}

/* シートの出し入れの曲線と長さ。スマホのシート（縦）・広い画面のパネル（横に出し入れ）の両方で使う。
   ★ --sheet-duration を変えたら map.js の PANEL_TOGGLE_MS も同じ長さにすること（パネルと一緒に地図を動かす長さ） */
:root {
  --sheet-ease: cubic-bezier(0.32, 0.72, 0, 1);
  --sheet-duration: 0.38s;
}

/* ドラッグ中は指の動きに追従させたいので、高さに関わるトランジションをすべて切る */
:root.sheet-dragging #bottom-sheet {
  transition: none;
}

/* 見た目は細いバーだが、指で掴みやすいよう当たり判定は幅いっぱい・高さ26pxとる。
   touch-action: none でドラッグ中にブラウザ側のスクロールが割り込まないようにする。 */
#bottom-sheet-handle {
  flex: 0 0 auto;
  position: relative;
  height: 26px;
  touch-action: none;
  cursor: grab;
}

:root.sheet-dragging #bottom-sheet-handle {
  cursor: grabbing;
}

#bottom-sheet-handle::before {
  content: '';
  position: absolute;
  top: 11px;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 5px;
  background: #c9c9c9;
  border-radius: 3px;
}

#bottom-sheet-content {
  flex: 1 1 auto;
  overflow-y: auto;
  /* 一覧が短くてスクロールバーが消えても、カードの幅が変わらないように場所を取っておく（PC） */
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
  touch-action: pan-y;
  /* 下の余白は、画面の外に隠れているぶんだけ（#bottom-sheet の注）。最後のカードの下はカードの margin-bottom で空く */
  padding: 0 16px var(--sheet-hidden);
}

.placeholder-text {
  color: var(--c-sheet-text);
  font-size: 13px;
  text-align: center;
  padding: 20px 0;
}

/* 「現在実施中の企画はありません」。下の一覧が最初の高さのシートでも見えるよう、上下を詰める */
/* 押せる施設（案内所・ガラポン）のシート。記号と名前を横に並べる */
.facility-detail {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 12px;
}

.facility-detail-icon {
  flex: none;
  width: 40px;
  height: 40px;
}

.facility-detail .project-detail-name {
  margin: 0;
}

.facility-detail-text {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--c-sheet-text);
}

.placeholder-text.is-compact {
  padding: 8px 0;
}

/* 当日用 Home で、実施中の企画が無い場所の「次に実施予定の企画」。左揃えで、下のカードに近づけて置く */
.next-program-label {
  font-size: 13px;
  color: var(--c-sheet-text);
  margin: 0 0 4px;
}

.project-detail-name {
  /* 企画名・建物名。シートの見出しにあたるので Kiwi Maru。
     bold は読み込んでいないので 500 で出す */
  font-family: var(--font-heading);
  font-size: 18px;
  line-height: 1.35;
  font-weight: 500;
  color: var(--c-sheet-text);
  margin: 0;
}

.project-detail-info {
  flex: 1;
  min-width: 0;
  cursor: pointer;
}

/* 場所シートの見出しなど、カード以外で使う補足行 */
.project-detail-org {
  font-size: 12px;
  color: var(--c-text-sub);
  margin: 0 0 8px;
}

.project-detail-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  margin-bottom: 22px;
  background: var(--c-card);
}


/* ハートは文字ではなくSVG(map.jsのheartIconSvg)。塗りの有無だけが変わるので、
   登録前後で大きさは変わらない。 */
.heart-btn {
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  line-height: 0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/*
 * ハートの絵（色は素材が持っている）。未登録はグレー（heart_gray.svg）、登録済みは赤（heart_red.svg）。
 * 企画検索・ピックアップのお気に入りボタンと同じ素材にそろえてある。
 */
.heart-icon {
  display: block;
  width: 22px;
  height: 22px;
  background: url('/visitor/img/icon/heart_gray.svg') no-repeat center / contain;
}

.heart-btn.active .heart-icon {
  background-image: url('/visitor/img/icon/heart_red.svg');
}

.bottom-sheet-section {
  margin-bottom: 22px;
}

/* シートの一番上に出す見出し(「Home」など)。下の節見出しより大きくして段を分ける。 */
.sheet-title {
  font-family: var(--font-heading);
  font-size: 18px;
  line-height: 1.2;
  font-weight: 500;
  color: var(--themeocean);
  margin: 4px 0 14px;
}

/* 節見出し。下線1本だけ（細線・飾りは付けない） */
.bottom-sheet-section-title {
  font-family: var(--font-heading);
  font-size: 15px;
  color: var(--themeocean);
  margin: 0 0 14px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--c-accent-soft);
}

/* 一覧の1件は、灰色の地に白いカードとして置く(デザイン案)。
   罫線で区切るより1件のまとまりが分かりやすく、
   企画名・団体・日時・形式と情報が増えても読み分けられる。 */
.project-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  /* カードどうしの間（下の影がかからない広さ） */
  margin-bottom: 14px;
  background: var(--c-card);
  /* 枠・角丸・影は下の「一覧のカードと企画詳細のカード」でまとめて付ける */
}

/*
 * カードの中の並び。画像・文字・ハートは上端にそろえ、ハートだけ画像の下端に合わせる
 * （カードが伸びても、ハートの下端 ＝ 画像の下端）。
 */
.project-list-item,
.project-detail-row {
  align-items: flex-start;
}

.project-list-item > .heart-btn,
.project-detail-row > .heart-btn {
  margin-top: calc(var(--card-thumb) - 34px);
  align-items: flex-end;
}

/* 一覧のカードと企画詳細のカード（どちらも押すと詳細が開く）。
   枠・角丸・影は企画検索TOP のカード（search/assets/card.css の .event-card）と同じ。中の並びは地図のもの。 */
.project-list-item,
.project-detail-row {
  border: 1.5px solid var(--c-line-blue);
  border-radius: 15px;
  box-shadow: 2px 2px 2px 0 rgba(128, 170, 187, .67);
  cursor: pointer;
  transition: box-shadow 0.12s ease, transform 0.12s ease;
}

.project-list-item:hover,
.project-detail-row:hover {
  box-shadow: 2px 4px 4px 0 rgba(128, 170, 187, .67);
}

.project-list-item:active,
.project-detail-row:active {
  transform: translateY(1px);
  box-shadow: 1px 2px 2px 0 rgba(128, 170, 187, .67);
}

/*
 * シートの詳細のカードの「詳細を見る ›」（project-sheet.js の addDetailHint）。ハートの下に、右端をハートの絵にそろえて置く。
 * ★ 浮かせて置く（並びに入れない）。画像・文字・ハートの位置は変えず、字が入る分だけカードの下の余白を広げる。
 *   ★ ハートの真下（top）に固定しないこと。企画名が長く本文が画像より下まで伸びると、本文に重なる。
 *   下の余白 26 ＝ 間 4 + 字 12 + 下 10。本文が短ければハートとの間がちょうど 4px になる。
 *   ハートの絵は 34px の枠の真ん中にあり、左右 6px ずつ空く（right の + 6px）。
 */
.project-detail-row.has-detail-hint {
  position: relative;
  padding-bottom: 26px;
}

.card-detail-hint {
  position: absolute;
  bottom: 10px;
  right: calc(12px + 6px);
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  line-height: 1;
  color: var(--themeocean);
  white-space: nowrap;
}

.card-detail-hint svg {
  display: block;
  width: 6px;
  height: 10px;
}

/* カードの中のハートは別の操作なので、カードの押した感じを引き継がない */
.project-list-item .heart-btn:active,
.project-detail-row .heart-btn:active {
  transform: none;
}

/* キーボード操作でも、どのカードにいるか分かるようにする。
   枠は細い水色なので、紺の輪郭を outline で重ねる */
.project-list-item:focus-within,
.project-detail-row:focus-within {
  outline: 2px solid var(--themeocean);
  outline-offset: -2px;
}

/* Home の「すべてのお気に入り企画を見る」(SPEC.md §5.1)。
   デザイン案では枠のあるボタンではなく、一覧の右下に置く文字のリンクになっている。
   一覧そのものより目立たせない扱いにしたいので、それに合わせる。
   ★ 戻すほうのボタンはここには無い。お気に入りだけの一覧は別のシート
     (renderFavoritesSheet)になっていて、検索結果と同じ見出しの「×」で解く。 */
.btn-show-all {
  display: block;
  margin: 2px 0 0 auto;
  padding: 4px 0;
  border: none;
  background: none;
  font-size: 12px;
  color: var(--c-sheet-text);
  text-decoration: underline;
  text-decoration-color: var(--c-accent-soft);
  text-underline-offset: 3px;
  cursor: pointer;
}

/* リンクの中で「お気に入り企画」だけ色を変え、何の一覧が開くのかを一目で分かるようにする */
.btn-show-all .accent {
  color: var(--themeocean);
}

/* 検索結果のシートの条件のチップと件数。見た目は企画検索TOP の「選択中の条件」と件数と同じ */
.active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
}

.active-chip {
  display: inline-flex;
  flex-direction: row-reverse;     /* 「× 主食」の並び */
  align-items: center;
  gap: 4px;
  padding: 1px 9px;
  background: var(--c-pale-blue);
  border: .5px solid var(--themeocean);
  border-radius: 9px;
  color: var(--themeocean);
  font-size: 11px;
  font-weight: 500;
  line-height: 17px;
  white-space: nowrap;
}

.active-chip .chip-remove {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}

.result-meta {
  margin: 0 0 12px;
  color: #3e3a39;
  font-size: 13px;
}

/* 見出しの下に置く、いま何で絞り込んでいるかを示す行。
   検索結果（ジャンル・入力欄）と、お気に入りだけの一覧が使う */
.search-condition {
  font-size: 11px;
  color: var(--c-text-sub);
  margin: 0 0 10px;
}

.project-list-item .name {
  min-width: 0;
  font-size: 15px;
  line-height: 1.3;
  color: var(--c-sheet-text);
  /* ★ flex: 1 を付けないこと。付けると企画名が余りを全部取り、
     団体・日時・形式が画像の高さから押し出される */
  flex: 0 0 auto;
  /* 2行で打ち切る（高さで切る）。
     ★ -webkit-line-clamp に戻さないこと。iPhone の Safari で速くスクロールすると企画名だけ描かれずに消える */
  max-height: calc(1.3em * 2);
  overflow: hidden;
  text-align: left;
}

/* カードの本文（企画名・団体・最下行）。高さはふつう画像にそろい、日時が折り返したときだけ伸びる。 */
.item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.item-org {
  font-size: 11px;
  color: var(--c-text-sub);
}

/* 日時は一覧の中で探す手がかりになるので、団体名より一段大きくする */
.item-when {
  font-size: 13px;
  color: var(--c-sheet-text);
}

/*
 * 一覧カードの文字の欄（企画名2行・団体・最下行で、画像の高さ 76px に収まる）。
 * ★ height ではなく min-height。overflow: hidden も付けない（日時が折り返したとき切れないように）。
 */
.project-list-item .item-body {
  gap: 3px;
  min-height: var(--card-thumb);
}

.project-list-item .item-org,
.project-list-item .item-food,
.project-list-item .item-when,
.project-list-item .item-format {
  line-height: 1.25;
}

/* 模擬店の品目(「焼きそば・フランクフルト」など)。最下行(.item-format-row)に
   形式の代わりとして置く。日時があればその左隣に並ぶ。
   右隣に日時が来るので、文字は日時(.item-when)と同じ 13px にそろえる
   （.item-format に 13px を入れてあるのと同じ理由）。 */
.item-food {
  font-size: 13px;
  color: var(--c-sheet-text);
  overflow-wrap: anywhere;
  /* flex の子として縮めるため。これが無いと 1行省略が効かない */
  min-width: 0;
}

/* 品名の前のフォークとナイフ(map/project-sheet.js の foodItemHtml)。
   ★ .item-food を flex にしないこと。この欄は1行省略(text-overflow: ellipsis)を
     持っていて、flex にすると省略が効かなくなる。絵は inline-block のまま
     文字と一緒に流す。大きさは .item-format の 17px より少し小さくして、
     13px の文字と釣り合わせている。 */
.item-food .format-icon {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-right: 4px;
  /* 文字のベースラインに対して少し下げ、字の高さの中で釣り合わせる */
  vertical-align: -3px;
}

/* 一覧カードでは1行で「…」にして、カードの高さをそろえる(企画名の2行打ち切りと同じ考え方) */
.project-list-item .item-food {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*
 * 本文の行を、画像の上端と下端に振り分ける（最下行が画像の下端に来る）。
 * 企画名の1行目は行間の上半分ぶん下がって見えるので、2px 引き上げる。画像が無い企画には掛けない。
 */
.project-thumb:not(.is-missing) + .item-body {
  justify-content: space-between;
}

.project-thumb:not(.is-missing) + .item-body > :first-child {
  margin-top: -2px;
}

/* 企画詳細の文。一覧と同じく画像の上端と下端にそろえるが、企画名・団体名は省略しない（長ければ下へ伸びる）。 */
.project-detail-row .item-body {
  min-height: var(--card-thumb);
  gap: 3px;
}

/* 企画詳細の企画名も、一覧カードの企画名(.project-list-item .name)と同じ見た目にする。
   .project-detail-name は検索結果・エリア名の見出しでも使っているので、カードの中だけ上書きする。 */
.project-detail-row .project-detail-name {
  font-family: inherit;
  font-size: 15px;
  font-weight: normal;
  line-height: 1.3;
  flex: 0 0 auto;
  overflow-wrap: anywhere;
}

.project-detail-row .item-org,
.project-detail-row .item-food,
.project-detail-row .item-when,
.project-detail-row .item-format {
  line-height: 1.25;
}

/* 団体名は省略せず折り返す（英数字の長い名前も、どこでも折り返せるように）。 */
.project-detail-row .item-org {
  flex-shrink: 0;
  overflow-wrap: anywhere;
}

/* カード(一覧・企画詳細)の最下行。企画形式(模擬店なら品目)の右隣に日時を並べる。
   幅が足りないときは日時が次の行へ回る（どちらも省略しない）。
   形式と日時はどちらも 15px。アイコンの高さと揃えるため中央で揃える。 */
.item-format-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 10px;
  row-gap: 2px;
  flex-shrink: 0;
}

/* 一覧カードでは最下行を必ず1行にする（折り返すと、時刻の入る企画だけ日時が次の行に落ちて、カードごとに形がばらつく）。
   入りきらないときは、品目・ジャンル名のほうを「…」で切る。日時は最後まで出す */
.project-list-item .item-format-row {
  flex-wrap: nowrap;
}

.project-list-item .item-format {
  min-width: 0;
}

.project-list-item .item-format-text {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 品目と日時が並ぶとき、縮むのは品目側だけにする（日時は最後まで読めるように）。
   一覧カードでは品目を1行で「…」にしてあるので、余りは品目が引き受ける */
.item-format-row .item-when {
  flex-shrink: 0;
  /* 日時は文字の欄（.item-body）の右端にそろえる。次の行へ回ったときも右端 */
  margin-left: auto;
}

/* 同じ企画の回が何日もあるとき、最下行の下に1日1行で並べる日時（map/project-sheet.js の whenBlockHtml） */
.item-when-list {
  display: flex;
  flex-direction: column;
  /* 1日1行の日時も、文字の欄（.item-body）の右端にそろえる */
  align-self: flex-end;
  align-items: flex-end;
  gap: 1px;
  flex-shrink: 0;
}

.item-when-list .item-when {
  line-height: 1.3;
}

/* 1日1行の日時。日付の右に時刻を並べ、入りきらない時刻は日付の右の列で次の行へ回す */
.item-when-line {
  display: flex;
  column-gap: 6px;
}

.when-day {
  flex: none;
}

.when-times {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  column-gap: 10px;
  min-width: 0;
}

/* 時刻は途中（「~」の前後）で折り返さない */
.when-time {
  white-space: nowrap;
}

/* 最下行のジャンル（企画形式）。右隣の日時と同じ大きさにそろえる。 */
.item-format {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: var(--c-sheet-text);
}

.item-format .format-icon {
  display: block;
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  color: var(--c-sheet-text);
}

/* Home の場所の見出しと「地図で見る」 */
.current-place {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  scroll-margin-top: 8px;
}

.current-place .room-label {
  flex: 1;
  min-width: 0;
}

.btn-map-place {
  flex: none;
  padding: 3px 10px;
  border: 1px solid var(--themeocean);
  border-radius: 999px;
  background: #fff;
  color: var(--themeocean);
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}

/* エリアのシートの一覧の下の「〇〇の中を見る」 */
.area-building-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 4px 0 16px;
}

.btn-map-place.is-large {
  padding: 8px 24px;
  font-size: 14px;
}

/* 日別おすすめ企画の日付（建物のシートの日付タブと同じ見た目） */
/* .date-tabs の margin-bottom: 0（あとに書いてある）より強くする */
.date-tabs.home-day-tabs {
  margin-bottom: 14px;
}

@media (hover: hover) and (pointer: fine) {
  .btn-map-place:hover {
    background: var(--themeocean);
    color: #fff;
  }
}

/* 「本館3F 31教室」のような場所の見出し。
   カードの外に出して、どの部屋の企画かをひとまとめに見せる(デザイン案) */
.room-label {
  display: flex;
  /* 「学生会館1F 演劇練習室」のような長い場所名は折り返す。center のままだと
     2行になったときに名札のアイコンが行間に浮くので、上端で揃える */
  align-items: flex-start;
  gap: 7px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--themeocean);
  margin: 0 0 8px;
  overflow-wrap: anywhere;
}

/* 本体サイトの h3 と同じ素材・同じ置き方(common/common_general.css の h3::before)。
   素材が #0c5f81 を持っているので色の指定は要らない。
   ★ 場所の名札だけでなく「日付で絞り込む」の見出しでも使うので、
     .room-label の中に限定しないこと。 */
.room-icon {
  display: block;
  width: 35px;
  height: 35px;
  flex: 0 0 auto;
  background: url('/visitor/img/common/h3_pentagon.svg') no-repeat center / contain;
}

.room-label .room-icon {
  /* 字（14px）に対して 35px は大きいので小さくする。中心を1行目の文字の中心に合わせ、
     上下にはみ出させる（行の高さ 19.6px は変えない。(26 - 19.6) ÷ 2）。 */
  width: 26px;
  height: 26px;
  margin-block: -3.2px;
}

/* 絞り込み結果のシートの教室名。建物のシートの見出し（「本館」。.project-detail-name）と同じ 18px にする */
.room-label.is-large {
  font-size: 18px;
}

/* 記号も字に合わせて大きく（行の高さ 25.2px。(30 - 25.2) ÷ 2） */
.room-label.is-large .room-icon {
  width: 30px;
  height: 30px;
  margin-block: -2.4px;
}

/* 場所の見出しに入らなかった補足(「※集合場所は…」
   「中日に法ステでも企画を実施する。」)。場所名そのものではないので、
   見出しより一段小さく・地の文の色で置く。 */
.place-note {
  font-size: 12px;
  line-height: 1.5;
  color: var(--c-text-sub);
  margin: -4px 0 8px;
  padding-left: 42px; /* 名札アイコン(35px)と隙間(7px)ぶん下げて、場所の見出しにぶら下げる */
}

/* 一覧項目はタップで企画詳細を開くのでボタンにしてある(キーボードでも操作できる)。
   見た目は本文のままにしたいので、ボタンの既定のスタイルを打ち消す。 */
button.name {
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

button.name:focus-visible {
  outline: 2px solid var(--themeocean);
  outline-offset: 2px;
  border-radius: 3px;
}

/* 広報用画像（SPEC.md §9.5。正方形）。読めなければ企画形式の色の正方形、それも無ければ枠ごと隠す
   （project-sheet.js の bindThumbFallback）。 */
.project-thumb {
  flex: 0 0 auto;
  /* カードの高さはこれで決まる（--card-thumb） */
  width: var(--card-thumb);
  height: var(--card-thumb);
  /* 枠は企画検索TOP のカードの写真と同じ。border-box なので外の大きさは変わらない */
  box-sizing: border-box;
  border: 1.5px solid var(--c-line-blue);
  border-radius: 4px;
  overflow: hidden;
  background: #ececec;
}

.project-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-thumb.is-missing {
  display: none;
}

/* 一覧項目に添える時刻などの補足 */
.item-sub {
  display: block;
  font-size: 11px;
  color: #777;
  margin-top: 2px;
}

/* 企画詳細の開催日 */
.project-detail-date {
  font-size: 14px;
  color: var(--c-sheet-text);
  margin: 0 0 8px;
}

/* 建物名・ステージ名ボタン(マップ上のマーカー)。
   デザイン案(img/tent.png)では、地図のイラストに白い名札を置く形なので、
   塗りつぶしの濃い色ではなく「明るい地 + 細い輪郭」にしている。 */
/*
 * 建物・ステージの名前ボタン。枠の色だけエリアの色（--loc-color。無ければ --themeocean）。
 * ★★ ホバー・押した・開いているときの色は、どの建物でも同じ（エリアの色にすると、同じ色の建物と重なって読みにくい）。
 */
.location-btn {
  padding: 5px 11px;
  border-radius: 8px;
  border: 2px solid var(--loc-color, var(--themeocean));
  background: var(--c-chip);
  color: var(--themeblack);
  font-size: 12px;
  font-weight: bold;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0,0,0,0.22);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}

/* 押した手応え。
   ★ **transform を書かないこと。** 位置決めに transform を使っている
     (.map-pins > * で translate/scale/rotate を掛けている)ので、ここで
     上書きすると地図の上の別の場所へ飛ぶ。沈み込みは影を消して見せる。 */
/*
 * 名前ボタンの当たり判定（見た目は変えずに広げる。.pin-marker::before と同じ考え方）。
 * ★ position: relative を足さないこと（.map-pins > * の absolute が効かなくなり、札が左上に寄る）。
 */
.location-btn::before {
  content: '';
  position: absolute;
  inset: calc(var(--location-hit-margin) * -1);
  /* 角も一緒に広げる。四角いままだと角だけ反応する範囲ができる */
  border-radius: calc(8px + var(--location-hit-margin));
}

/* ホバーは、アクセント色をごく薄く敷く（押せることの合図） */
.location-btn:hover {
  background: color-mix(in srgb, var(--themeocean) 12%, #fff);
}

/* 塗りは淡い --themeskyblue、枠は --themeocean にそろえる
   （エリアの色の枠が残ると、建物ごとに見た目が変わる）。文字はふだんのまま。 */
.location-btn:active {
  background: var(--themeskyblue);
  border-color: var(--themeocean);
  box-shadow: none;
}

/* いま開いている建物・ステージ。
   タップは一瞬なので :active だけでは何も伝わらない ── 押したものが
   開いている間ずっと分かるようにする。塗りつぶしで示すのは、日付タブや
   現在地ボタンと同じ考え方。 */
/* 開いている建物・ステージ。白い縁を残す（枠の青が、ステージまわりの青い建物に溶けないように）。 */
.location-btn.is-selected {
  background: var(--themeskyblue);
  border-color: var(--themeocean);
  box-shadow: 0 0 0 2px #fff, 0 1px 4px rgba(0, 0, 0, 0.3);
}

/*
 * シルエットつきの名前ボタン（名前が上・シルエットが下で、左右の中心をそろえる）。
 * ★ ここで transform を書かないこと（位置は .map-pins > * の transform で決まっている）。
 */
.location-btn.has-silhouette {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding-bottom: 2px;
}

.location-silhouette {
  display: block;
  pointer-events: none;
  -webkit-user-drag: none;
}

/* エリア分けボタン(縮小表示)。
   枠の色はそのエリアの色(下の .o_*)を map.js が入れる。
   どのボタンがどの色の区画に対応するのかを、地図を見なくても分かるようにするため。 */
.area-btn {
  padding: 7px 14px;
  font-size: 13px;
}

/* 建物・ステージ選択時のボトムシート */
/* 見出しと×を1行に並べるシート(検索結果・エリア・建物・ステージ)の見出し行。
   閉じるボタンは右上に重ねる。 */
.location-sheet-header {
  position: relative;
  margin-bottom: 18px;
}

/* ×は重ねて置いているので、長い名前(教室名など)が下に潜らないよう右を空ける */
.location-sheet-header .project-detail-name {
  padding-right: 32px;
}

/* 建物名・ステージ名の見出し(renderLocationSheet)。テーマの色で下線を引く。
   検索結果・エリア名の見出しは同じ .project-detail-name なので、こちらだけに掛ける。 */
/* 建物・ステージのシートの見出し（どの建物でも --themeocean）。 */
.location-sheet-title {
  color: var(--themeocean);
  text-decoration: underline;
  text-decoration-color: var(--themeocean);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.location-sheet-header .btn-close {
  position: absolute;
  /* 見出しの1行目（18px × 1.35 ≒ 24px）の上下の真ん中 */
  top: 3px;
  right: 0;
}

/*
 * シートの見出し（×・「‹ 本館に戻る」・建物名など）は、一覧をスクロールしても上に留める。
 * 留める箱は、シートの直下の見出しの行（.location-sheet-header / .detail-close-row）か、
 * 戻るボタンの行と見出しの行をまとめた .sheet-head。
 * 左右の余白（#bottom-sheet-content の 16px）まで地の色で塗り、下を通るカードが脇から見えないようにする。
 * 下の空きは margin ではなく padding で取る（margin は透けて、下を通るカードが見えるため）。
 * flow-root で、中の見出しの上の margin も箱の中に収める（はみ出すと見出しの上が透ける）。
 */
#bottom-sheet-content > .sheet-head,
#bottom-sheet-content > .location-sheet-header,
#bottom-sheet-content > .detail-close-row {
  display: flow-root;
  position: sticky;
  top: 0;
  z-index: 3;
  margin: 0 -16px;
  padding: 0 16px;
  background: var(--themewhite);
}

/*
 * 見出しの下の空き（もとの margin-bottom 18px）。塗るのは 14px までにして、残り 4px は透かす。
 * 「タイムテーブル」（.filter-head .btn-tt）は行の高さをそろえるため上へ 2px はみ出しているので、
 * 全部を塗ると見出しの白にボタンの上の端が隠れる。
 */
#bottom-sheet-content > .sheet-head,
#bottom-sheet-content > .location-sheet-header {
  padding-bottom: 14px;
  margin-bottom: 4px;
}

.sheet-head > .location-sheet-header {
  margin-bottom: 0;
}

/*
 * 詳細の×の行の下の空き（もとの margin-bottom 2px）。行の白塗りを下から 4px 縮め、その分を透かした margin にする
 * （中のボタンは margin-bottom: -4px なので、見た目の位置は変わらない）。
 * すぐ下の場所の名札の五角形（.room-label .room-icon）が上へ 3.2px はみ出しているので、塗ると上の端が隠れる。
 */
#bottom-sheet-content > .detail-close-row {
  display: flex;
  padding-bottom: 0;
  margin-bottom: 6px;
}

#bottom-sheet-content > .detail-close-row > * {
  margin-bottom: -4px;
}

/* 留めた見出しの行は左右に 16px の余白を持つので、重ねて置いた×もそのぶん内へ */
#bottom-sheet-content > .location-sheet-header .btn-close {
  right: 16px;
}

/* ピンから開いた企画詳細の閉じるボタン。見出しを置かないので、
   ×だけを右上に出す（他のシートでは見出しの行に入っている）。 */
.detail-close-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 2px;
}

/*
 * 屋内マップの教室ピンから開いたシートの「‹ 本館に戻る」(map/project-sheet.js の
 * sheetBackButtonHtml)。詳細では×と同じ行の左端、一覧・検索結果では見出しの上の行に出す。
 * 字だけのボタンだが、指で押せるよう高さは×と同じくらい取る。
 */
.detail-close-row .btn-sheet-back {
  margin-right: auto;
}

.sheet-back-row {
  margin-bottom: 6px;
}

.btn-sheet-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: none;
  background: none;
  padding: 8px 8px 8px 0;
  min-height: 36px;
  font-size: 14px;
  font-weight: bold;
  color: var(--themeocean);
  cursor: pointer;
}

/* 「‹」（線で描いた SVG）。高さは「本館に戻る」の字と同じくらい。ボタンが上下の真ん中に並べる */
.btn-sheet-back-mark {
  display: block;
  flex: none;
  width: 7px;
  height: 12px;
  /* 字の形の中心は行の真ん中より少し下にあるので、そこへ合わせる */
  transform: translateY(0.6px);
}

/* 雨天時の案内のシート（map/project-sheet.js の renderRainNoticeSheet）。
   文の下に「雨天時の対応について」のボタン（サイトのテンプレートのボタン。下の .btn）を置く */
.rain-notice {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--c-sheet-text);
}

/*
 * サイトのテンプレートのボタン（.btn .btn_red）。common_general.css は読んでいない（読むと地図の画面にかかる）ので、
 * ボタンの分だけを写してある。★ あちらの見た目を変えたら、ここも写し直す。
 */
#bottom-sheet-content .btn,
.map-note .btn {
  text-align: center;
  margin: 20px 0 30px 0;
  position: relative;
}

#bottom-sheet-content .btn a,
.map-note .btn a {
  display: inline-block;
  font-weight: bold;
  font-size: 12px;
  padding: 0.6em 3.5em;
  position: relative;
  transition: all 0.3s;
  text-decoration: none;
}

#bottom-sheet-content .btn span,
.map-note .btn span {
  display: inline-block;
  width: 40px;
  height: 1.5px;
  position: absolute;
  top: 50%;
  right: -13px;
  transition: all 0.3s;
}

#bottom-sheet-content .btn span::after,
.map-note .btn span::after {
  content: "";
  position: absolute;
  height: 1.5px;
  width: 7px;
  transform: rotate(35deg);
  right: -1px;
  top: -2px;
}

#bottom-sheet-content .btn a:hover span,
.map-note .btn a:hover span {
  right: -26px;
}

/* 札の中では、押したときも矢印を伸ばさない（スマホは押した後もホバーのまま残り、矢印が枠の外へ出る） */
.map-note .btn a:hover span {
  right: -13px;
}

#bottom-sheet-content .btn_red a,
.map-note .btn_red a {
  color: var(--themeocean);
  border: 1.5px solid var(--themeocean);
}

#bottom-sheet-content .btn_red span,
#bottom-sheet-content .btn_red span::after,
.map-note .btn_red span,
.map-note .btn_red span::after {
  background: var(--themeocean);
}

#bottom-sheet-content .btn_red a:hover,
.map-note .btn_red a:hover {
  background: var(--themeocean);
  color: var(--themewhite);
}

/* 「タイムテーブル」だけの行。ふつうは絞り込みの見出しの行に入るので、どちらの絞り込みも無い場所だけ使う。 */
.sheet-tt-row {
  display: flex;
  justify-content: flex-end;
  margin: 12px 0 16px;
}

/* 絞り込みの見出しの行（左に見出し、右に「タイムテーブル」）。縦は中央でそろえる。 */
.filter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 8px;
}

/* 見出しの行の高さを見出しの字で決める（「タイムテーブル」のある階の行だけ、日付の行より高くならないように） */
.filter-head .btn-tt {
  margin-block: -2px;
}

.btn-tt {
  /* .btn-secondary が flex:1 を持つので、ここで伸びないようにする */
  flex: 0 0 auto;
  /* 枠は日付・階のボタンと同じ 1px（.btn-secondary の 2px だと、横に並ぶピルより重く見える） */
  border-width: 1px;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

/* 押せることが分かるよう、マウスを乗せたら塗る */
@media (hover: hover) and (pointer: fine) {
  .btn-tt:hover {
    background: var(--themeocean);
    color: #fff;
  }
}

.btn-tt:active {
  background: var(--themeocean);
  color: #fff;
}

/* 日付の絞り込みと階の絞り込み。見出しは場所の名札と同じ五角形を添える。
   ★ 2つは見た目をそろえてある。シートの中で同じ「ピルを並べて選ぶ」操作なので、
     片方だけ変えないこと。 */
.date-filter,
.floor-filter {
  margin-bottom: 14px;
}

.date-filter-title,
.floor-filter-title {
  display: flex;
  align-items: center;
  gap: 5px;
  /* ピルとの間は .filter-head が持つ */
  margin: 0;
  /* 右のボタンに押されて折り返さない */
  white-space: nowrap;
  font-family: var(--font-heading);
  font-size: 17px;
  color: var(--themeocean);
}

.date-filter-title .room-icon,
.floor-filter-title .room-icon {
  /* 文字（17px）に合わせて小さくする。行の高さ（24.5px）に収まるので、はみ出させない */
  width: 22px;
  height: 22px;
}

/*
 * 「×」。絞り込みシートの×と同じ、紺の2本線（18px 角の対角線）を背景で描く。
 * 中の「×」の字は見せない（読み上げは aria-label）。
 * ★ ::before は当たり判定に使っているので、線を描かないこと。
 */
.btn-close {
  /* ::before で当たり判定を広げるための基準。位置は動かさない */
  position: relative;
  flex: none;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  background:
    linear-gradient(45deg, transparent calc(50% - 1px), var(--themeocean) calc(50% - 1px),
      var(--themeocean) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(-45deg, transparent calc(50% - 1px), var(--themeocean) calc(50% - 1px),
      var(--themeocean) calc(50% + 1px), transparent calc(50% + 1px));
  font-size: 0;
  line-height: 0;
  color: transparent;
  cursor: pointer;
}

/*
 * 「×」の当たり判定を広げる（字だけだと 22px しかなく、押し外す）。
 * ★ padding と負のマージンで広げないこと（シートの overflow: hidden で切られる）。右側だけ控えめ。
 */
.btn-close::before {
  content: '';
  position: absolute;
  inset: -10px -4px -10px -10px;
}

/* 日付・階のボタン。デザイン案では丸いピルを左から並べる（全幅に割らない） */
.date-tabs,
.floor-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 0;
}

.date-tab,
.floor-tab {
  /* 大きさは56回の MAP検索の日付・階のボタン（幅50px・高さ20px・枠1px）に合わせる。
     幅は最小幅にして、「21日(土)」のように長い文字は伸ばす */
  min-width: 50px;
  height: 20px;
  line-height: 18px;
  text-align: center;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid var(--themeocean);
  background: #fff;
  color: var(--themeocean);
  font-size: 12px;
  letter-spacing: 0.04em;
  cursor: pointer;
}

/*
 * 当たり判定だけ上下に広げる（見た目の高さ 20px は56回に合わせたまま。指では低くて押し外す）。
 * 行の間（.date-tabs の gap 10px）の半分までにして、上下の行のボタンと取り合わないようにする。
 */
.date-tab,
.floor-tab {
  position: relative;
}

.date-tab::before,
.floor-tab::before {
  content: '';
  position: absolute;
  inset: -5px 0;
}

.date-tab.selected,
.floor-tab.selected {
  background: var(--themeocean);
  color: #fff;
  border-color: var(--themeocean);
}

/* 企画ピン(SPEC.md §4.1)。
   形はすべて丸で統一し、丸の中に入れるピクトグラムで企画形式を区別する
   (模擬店=フォークとナイフ / フィールド=ストレッチする人)。
   色はジャンル大分類を表す。 */
.pin-marker {
  /* button なので、ブラウザ既定の余白・書体を消しておく */
  padding: 0;
  font: inherit;
  width: calc(var(--pin-size) * var(--pin-scale));
  height: calc(var(--pin-size) * var(--pin-scale));
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

/* --- 絞り込みの結果・選んでいる企画（形は丸のまま、色だけ赤） ---------
 *   結果（.is-result）… 赤く塗る / 選んでいる企画（.is-selected）… 赤く塗って外側にリング
 * ★ 地の色は !important で上書きする（エリアの色は createPin がインラインで入れている）。
 * ★ リングは box-shadow で描く（transform は回転・拡大の打ち消しに使っているので触らない）。
 */
.pin-marker.is-result {
  background: var(--c-pin-selected) !important;
  z-index: 4;
}

.pin-marker.is-selected {
  background: var(--c-pin-selected) !important;
  box-shadow: 0 0 0 4px rgba(226, 59, 59, 0.35), 0 2px 8px rgba(0,0,0,0.45);
  z-index: 5;
}

/*
 * 建物・ステージの中の結果をまとめた、件数入りの赤い丸。
 * 大きさは企画1つの赤いピンと同じ（2桁まで入るよう数字を小さくしてある）。
 */
.pin-marker.is-location-result {
  --pin-result-width: var(--pin-circle);
  width: var(--pin-result-width);
  height: var(--pin-result-width);
  z-index: 4;
}

.pin-count {
  display: block;
  /* この書体の数字は文字の箱の下寄りに描かれる（約0.08文字ぶん）ので、その分上げて丸の真ん中に置く */
  position: relative;
  top: -0.08em;
  line-height: 1;
  font-size: calc(13px * var(--pin-scale));
  font-weight: bold;
  color: #fff;
}

/*
 * 寄った表示では同じ場所に建物ボタンがあるので、丸の下に透明な余白を足してボタンの上へ持ち上げる。
 * ★ margin で持ち上げない（地図の拡大と一緒に伸び縮みする）。丸は ::before に描く（楕円にならないように）。
 */
.pin-marker.is-location-result.is-above-button {
  box-sizing: content-box;
  padding-bottom: 28px;
  background: none !important;
  border: none;
  box-shadow: none;
  /* 下の透明な余白は建物ボタンに重なっている。そこを押したらボタンに届くよう、
     本体は押せなくして、丸の範囲(::before)だけを当たり判定にする */
  pointer-events: none;
}

/* 名前ボタンの真ん中が点に来る場所（CENTERED_LOCATION_LABELS）では、ボタン（高さ 32px）の上端は点の 16px 上。
   ふつうの 28px と同じく、丸がボタンの上端に 4px 掛かる高さにする */
.pin-marker.is-location-result.is-above-button.is-above-centered {
  padding-bottom: 12px;
}

/* 件数ピンの当たり判定は丸そのもの（中心を基準にした .pin-marker::before を置き換える）。
   持ち上げているときは要素のほうが縦に長いので、上端に寄せる必要がある */
.pin-marker.is-location-result::before {
  top: 0;
  left: 0;
  width: var(--pin-result-width);
  height: var(--pin-result-width);
  transform: none;
  pointer-events: auto;
}

/* 持ち上げているときは、この ::before が赤い丸そのものになる（上の注を参照）。
   数字(.pin-count)の後ろへ回すため z-index を下げる。親は z-index を持っていて
   重なりの箱になっているので、地図の他のものの下には潜らない。 */
.pin-marker.is-location-result.is-above-button::before {
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--c-pin-selected);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
  z-index: -1;
}

/* 屋内マップの教室ピン。絞り込み中は結果のある教室だけを赤で出す(indoor-map.js の applyIndoorResults) */
.indoor-pin-anchor[hidden] {
  display: none;
}

.indoor-pin-anchor.is-result .indoor-pin {
  background: #E64437;
}

/*
 * 押した教室のピン（形も大きさも変えず、赤く塗ってリング）。
 * ★ .is-result より後に書くこと（詳細度が同じなので、前だと絞り込みの赤が勝つ）。
 */
.indoor-pin-anchor.is-selected .indoor-pin {
  background: var(--c-pin-selected);
  box-shadow: 0 0 0 4px rgba(226, 59, 59, 0.35), 0 2px 8px rgba(0,0,0,0.45);
}

/* リングのぶん隣の教室ピンに重なるので、上に出す */
.indoor-pin-anchor.is-selected {
  z-index: 1;
}

.pin-icon {
  display: block;
  width: 15px;
  height: 15px;
}

/*
 * ピンの当たり判定（見た目は変えず、透明な四角を丸のまわり --pin-hit-margin ぶん広げる）。
 * 隣のピンまでの距離（--pin-nearest-m × --px-per-m。map-layers.js が入れる）で頭打ち。
 * ★ 44px まで広げないこと（地図を滑らせたつもりで近くのピンが開く）。
 */
.pin-marker::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--pin-hit);
  height: var(--pin-hit);
  transform: translate(-50%, -50%);
}

.pin-marker {
  --pin-circle: calc(var(--pin-size) * var(--pin-scale));
  --pin-hit: max(
    var(--pin-circle),
    min(
      calc(var(--pin-circle) + var(--pin-hit-margin) * 2),
      calc(var(--pin-nearest-m, 999) * var(--px-per-m, 0.1) * 1px)
    )
  );
}

/*
 * 素材の絵（ジャンル・ピンの企画形式）を mask で描く。塗りは currentColor
 * （ピンでは白、一覧では文字色）。★ background-image にしないこと（素材の色のままになる）。
 */
.icon-food,
.icon-goods,
.icon-performance,
.icon-join,
.icon-academic,
.icon-gallery,
.icon-deco {
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

.icon-food {
  -webkit-mask-image: url('/visitor/img/icon/genre/food.svg');
          mask-image: url('/visitor/img/icon/genre/food.svg');
}

.icon-goods {
  -webkit-mask-image: url('/visitor/img/icon/genre/goods.svg');
          mask-image: url('/visitor/img/icon/genre/goods.svg');
}

.icon-performance {
  -webkit-mask-image: url('/visitor/img/icon/genre/performance.svg');
          mask-image: url('/visitor/img/icon/genre/performance.svg');
}

.icon-join {
  -webkit-mask-image: url('/visitor/img/icon/genre/join.svg');
          mask-image: url('/visitor/img/icon/genre/join.svg');
}

.icon-academic {
  -webkit-mask-image: url('/visitor/img/icon/genre/academic.svg');
          mask-image: url('/visitor/img/icon/genre/academic.svg');
}

.icon-gallery {
  -webkit-mask-image: url('/visitor/img/icon/genre/gallery.svg');
          mask-image: url('/visitor/img/icon/genre/gallery.svg');
}

.icon-deco {
  -webkit-mask-image: url('/visitor/img/icon/genre/decoration.svg');
          mask-image: url('/visitor/img/icon/genre/decoration.svg');
}

/* 施設・設備のピン(SPEC.md §4.1)。
   企画ピンと役割が違うことが一目で分かるよう、丸ではなく白い角丸の札にする。
   大きさは企画ピンと同じく --pin-scale でズームに追従させる。 */
/* 施設・設備の目印（押せない）。建物ボタンのような浮いた板に見せない（影は付けず、下地は薄く）。 */
.facility-marker {
  width: calc(var(--facility-size) * var(--pin-scale));
  height: calc(var(--facility-size) * var(--pin-scale));
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #dcdcdc;
  color: #555;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 屋内マップの見取り図の上に出す施設（講義棟の休憩所・ごみ箱。hideNearbyFacilities の shrinkLabels）。
   見取り図の壁や部屋を隠しすぎないよう小さくする */
.facility-marker.is-over-indoor {
  width: calc(var(--facility-size) * var(--pin-scale) * 0.75);
  height: calc(var(--facility-size) * var(--pin-scale) * 0.75);
}

/* 押せる施設（案内所・ガラポン） */
.facility-marker.is-tappable {
  padding: 0;
  cursor: pointer;
}

/* 案内所を押すと出る名前の吹き出し。字は本部・門の札（.facility-label）と同じ。記号の真上に出し、下に三角を付ける */
.facility-bubble {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px * var(--pin-scale));
  transform: translateX(-50%);
  padding: calc(2px * var(--pin-scale)) calc(6px * var(--pin-scale));
  border-radius: 3px;
  background: #fff;
  color: #555;
  font-family: inherit;
  font-size: calc(11px * var(--pin-scale));
  font-weight: bold;
  line-height: 1.5;
  white-space: nowrap;
  /* 白い地の上でも形が分かるように、三角ごと薄い影を付ける */
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
  pointer-events: none;
}

.facility-bubble::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: calc(5px * var(--pin-scale)) solid transparent;
  border-top-color: #fff;
  border-bottom: 0;
}

.facility-icon {
  display: block;
  width: 15px;
  height: 15px;
}

.facility-marker .facility-icon {
  width: calc(var(--facility-icon-size) * var(--pin-scale));
  height: calc(var(--facility-icon-size) * var(--pin-scale));
}

/* 素材のSVG(img/toilet.svg など)を使うとき。
   素材は標識としてすでに白い枠まで描かれているので、ピン側の下地・枠は敷かない。
   影も付けない（上と同じ理由。押せる物と見分けが付かなくなる）。 */
.facility-marker.has-image {
  background: none;
  border: none;
  box-shadow: none;
}

.facility-marker.has-image img {
  display: block;
  width: 100%;
  height: 100%;
}

/* 建物の入り口の三角形（押せない）。
   ★ 地図の回転を打ち消さない（向きを持つ目印なので）。大きさだけ一定。位置合わせは中心。 */
/* 入り口の方向にとがった三角形（頂角 約72度）。幅と高さの比で角度が決まる */
.entrance-marker {
  width: calc(16px * var(--pin-scale));
  height: calc(11px * var(--pin-scale));
  background: var(--themeocean);
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  transform-origin: 50% 50%;
  transform:
    translate(-50%, -50%)
    scale(var(--map-inv-scale))
    rotate(var(--entrance-bearing, 0deg));
  /* 目印なので、指の操作を邪魔しない（地図をそのまま滑らせられる） */
  pointer-events: none;
}

/* 道・門の名前の札。
   ★ 回転を打ち消さない（道に沿っていることに意味がある）。--road-angle で道の傾きに合わせる。
   向き（--road-rotate）と縦書き・横書きは map-layers.js の applyRoadLabelOrientation が決める。
   既定は縦書き（側道は狭く、横書きだとはみ出す）。text-orientation: upright で字を寝かせない。 */
.road-label {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: calc(11px * var(--pin-scale));
  letter-spacing: calc(1px * var(--pin-scale));
  font-weight: bold;
  /* 本部・正門の札と同じ色。地図に刷った文字の扱いなので、テーマ色は使わない */
  color: #555;
  white-space: nowrap;
  /* 下地を敷くと道が途切れて見えるので、細い白縁で浮かせる */
  text-shadow:
    0 0 2px #fff, 0 0 2px #fff, 1px 0 1px #fff, -1px 0 1px #fff,
    0 1px 1px #fff, 0 -1px 1px #fff;
  transform-origin: 50% 50%;
  transform:
    translate(-50%, -50%)
    scale(var(--map-inv-scale))
    rotate(var(--road-rotate, 0deg));
  /* 目印なので指の操作を邪魔しない（地図をそのまま滑らせられる） */
  pointer-events: none;
}

/* 道が画面で横向きに近いときは横書きにする。
   縦書きのまま回すと字が90度寝るが、こちらに切り替えれば45度以下で済む。 */
.road-label.is-horizontal {
  writing-mode: horizontal-tb;
  letter-spacing: normal;
}

/* --- 駅・門の札の矢印（道の先の向き。縦書きなら上か下、横書きなら左か右） ---
 * どれを出すかは applyRoadLabelOrientation が is-arrow-up / -down / -left / -right で切り替える。
 * ★ 字と同じ太さ（1.5px）の線で描く（太いと札だけ書体が違って見える）。
 * ★ 白フチと色（#555。.road-label の color と同じ）は絵の中に焼き込んである。片方だけ変えないこと。
 *   filter: drop-shadow ではフチが付かない（clip-path / mask より先に掛かる）。
 * ★ top / bottom で物理的な上下に置く（縦書き・横書きどちらでも同じ所に出る）。
 */
.road-label.is-arrow-up::before,
.road-label.is-arrow-down::after {
  content: '';
  position: absolute;
  left: 50%;
  width: calc(12px * var(--pin-scale));
  height: calc(15px * var(--pin-scale));
  transform: translateX(-50%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.road-label.is-arrow-up::before {
  bottom: 100%;
  /* 字と字の間（letter-spacing 1px）より狭くしない。詰まると1画に見える */
  margin-bottom: calc(1px * var(--pin-scale));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 15'%3E%3Cg fill='none' stroke-linecap='butt' stroke-linejoin='miter'%3E%3Cg stroke='%23fff' stroke-width='4'%3E%3Cpath d='M6 13.8V3.4'/%3E%3Cpath d='M2.2 7.2 6 3.4 9.8 7.2'/%3E%3C/g%3E%3Cg stroke='%23555' stroke-width='1.5'%3E%3Cpath d='M6 13.8V3.4'/%3E%3Cpath d='M2.2 7.2 6 3.4 9.8 7.2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.road-label.is-arrow-down::after {
  top: 100%;
  margin-top: calc(1px * var(--pin-scale));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 15'%3E%3Cg fill='none' stroke-linecap='butt' stroke-linejoin='miter'%3E%3Cg stroke='%23fff' stroke-width='4'%3E%3Cpath d='M6 1.2v10.4'/%3E%3Cpath d='M2.2 7.8 6 11.6 9.8 7.8'/%3E%3C/g%3E%3Cg stroke='%23555' stroke-width='1.5'%3E%3Cpath d='M6 1.2v10.4'/%3E%3Cpath d='M2.2 7.8 6 11.6 9.8 7.8'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* 横書きの札の左右。上下の矢印を90度回した絵（15×12）。
   ★ `left` / `right` も書字方向によらず物理的な左右を指す。 */
.road-label.is-arrow-left::before,
.road-label.is-arrow-right::after {
  content: '';
  position: absolute;
  top: 50%;
  width: calc(15px * var(--pin-scale));
  height: calc(12px * var(--pin-scale));
  transform: translateY(-50%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.road-label.is-arrow-left::before {
  right: 100%;
  margin-right: calc(1px * var(--pin-scale));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 12'%3E%3Cg fill='none' stroke-linecap='butt' stroke-linejoin='miter'%3E%3Cg stroke='%23fff' stroke-width='4'%3E%3Cpath d='M13.8 6H3.4'/%3E%3Cpath d='M7.2 2.2 3.4 6 7.2 9.8'/%3E%3C/g%3E%3Cg stroke='%23555' stroke-width='1.5'%3E%3Cpath d='M13.8 6H3.4'/%3E%3Cpath d='M7.2 2.2 3.4 6 7.2 9.8'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.road-label.is-arrow-right::after {
  left: 100%;
  margin-left: calc(1px * var(--pin-scale));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 12'%3E%3Cg fill='none' stroke-linecap='butt' stroke-linejoin='miter'%3E%3Cg stroke='%23fff' stroke-width='4'%3E%3Cpath d='M1.2 6h10.4'/%3E%3Cpath d='M7.8 2.2 11.6 6 7.8 9.8'/%3E%3C/g%3E%3Cg stroke='%23555' stroke-width='1.5'%3E%3Cpath d='M1.2 6h10.4'/%3E%3Cpath d='M7.8 2.2 11.6 6 7.8 9.8'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* 本部・正門は名前をそのまま出す（押せない。建物ボタンと紛らわしいので枠と影は付けない）。 */
.facility-label {
  padding: calc(2px * var(--pin-scale)) calc(6px * var(--pin-scale));
  border-radius: 3px;
  /* 透かすと下の道や建物の線が文字に重なって読みにくいので、真っ白にする */
  background: #fff;
  color: #555;
  font-size: calc(11px * var(--pin-scale));
  font-weight: bold;
  white-space: nowrap;
}

/* 門の札（GATE_LABELS）。字の前に、門へ続く道の向きを指す矢印を置く */
/* 道の外の点から道と反対側へ出す門の札（GATE_LABELS の side）。点が札の辺（斜めなら角）に来るように、
   中心から --gate-kx/ky（map-layers.js が地図の向きから入れる）× 札の半分 ＋ すき間 だけずらす。
   ★ 最後の translate は地図の拡大・回転を打ち消した後に掛かるので、画面の px と札の大きさの % で効く */
.map-pins > .gate-label.is-beside {
  transform-origin: 50% 50%;
  transform:
    translate(-50%, -50%)
    scale(var(--map-inv-scale))
    rotate(var(--map-inv-rotation))
    translate(
      calc(var(--gate-kx, 0) * (50% + 3px * var(--pin-scale))),
      calc(var(--gate-ky, 0) * (50% + 3px * var(--pin-scale))));
}

.gate-label {
  display: inline-flex;
  align-items: center;
  gap: calc(3px * var(--pin-scale));
}

.gate-arrow {
  display: block;
  flex: none;
  width: calc(10px * var(--pin-scale));
  height: calc(12px * var(--pin-scale));
  transform: rotate(var(--gate-arrow-rotate, 0deg));
}

.gate-arrow svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* 本部も正門と同じ札で出す（本部だけ別の見た目に戻さないこと）。 */

/*
 * 地図の上のお知らせの札（MAP_NOTES）。文とサイトのボタン。
 * ★ 置く点は札の中心（ほかの札は下端）。transform の translate だけ -50% にしている。
 */
.map-pins > .map-note {
  transform-origin: 50% 50%;
  transform:
    translate(-50%, -50%)
    scale(var(--map-inv-scale))
    rotate(var(--map-inv-rotation));
}

.map-note {
  padding: 8px 14px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
  text-align: center;
  white-space: nowrap;
  cursor: default;
  /* 長押しでリンクのメニュー（iOS のプレビュー）や文字の選択が出ると、地図の操作が止まる */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.map-note-text {
  margin: 0;
  font-size: 12px;
  font-weight: bold;
  line-height: 1.5;
  color: var(--themeocean);
}

/* テンプレートのボタンの上下の余白（20px / 30px）は本文の中で使う値なので、札の中では詰める。
   右の矢印は a の右端から外へ出る（押すと -26px まで）ので、札の左右の余白はその分とってある */
.map-note .btn {
  margin: 6px 0 0;
}

/*
 * ホームカミングデーの札（theme: 'hcd'）。案内先のページの赤（css/hcd.css の値を写したもの）とパズルのピース。
 * ★ ピースは ::before / ::after。position を書き足さないこと（.map-pins > * の absolute で置かれている）。
 */
.map-note-hcd {
  --hcd-red: #b42a20;
  --hcd-red-dark: #81221f;
  /* 地図の主役（企画のピン・建物のボタン）より目立たないよう、枠・影・文字は控えめ。地は透かさない。 */
  /* 左右はボタンの矢印（a の右端から 11px 外へ出る）が枠の線に掛からず収まる分 */
  padding: 5px 20px 7px;
  border: 1px solid color-mix(in srgb, var(--hcd-red) 45%, #fff);
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.map-note-hcd::before,
.map-note-hcd::after {
  content: '';
  position: absolute;
  background: center / contain no-repeat;
  pointer-events: none;
}

/* パズルのピース（左上と右下に少しはみ出させる） */
.map-note-hcd::before {
  top: -10px;
  left: -10px;
  width: 21px;
  height: 21px;
  background-image: url('/visitor/img/hcd/piece2_red.svg');
  transform: rotate(-15deg);
}

.map-note-hcd::after {
  right: -7px;
  bottom: -7px;
  width: 16px;
  height: 16px;
  background-image: url('/visitor/img/hcd/piece_pink.svg');
  transform: rotate(20deg);
}

.map-note-hcd .map-note-text {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--hcd-red);
}

.map-note-hcd .btn {
  margin-top: 4px;
}

/* 左右の余白はテンプレートと同じ 3.5em（≒ 37px）。矢印は右から内側へ 27px 入り込むので、
   これより詰めると矢印が「こちら」にかかる */
.map-note-hcd .btn a {
  font-size: 10.5px;
  padding: 0.4em 3.5em;
}

.map-note-hcd .btn_red a {
  color: var(--hcd-red);
  border-width: 1px;
  border-color: color-mix(in srgb, var(--hcd-red) 60%, #fff);
}

.map-note-hcd .btn_red span,
.map-note-hcd .btn_red span::after {
  background: var(--hcd-red);
}

.map-note-hcd .btn_red a:hover {
  background: var(--hcd-red);
  color: #fff;
}

/* 凡例（施設・ピン）はアイコンの見本なので、ブラウザの選択（青い反転）の対象にしない。
   説明文（.help-note・.help-list）は読み物なので選択できるまま残す。 */
.help-facility-legend,
.help-pin-legend {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* 「?」の中に並べる施設の凡例 */
.help-facility-legend {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px 12px;
}

.help-facility-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

/* 押すとその施設で絞り込む凡例（button）。見た目は文字の並びのまま、押せることだけ下線で示す */
.help-facility-item.is-filter {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 12px;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: var(--c-line-blue);
  text-underline-offset: 3px;
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
  .help-facility-item.is-filter:hover {
    color: var(--themeocean);
    text-decoration-color: var(--themeocean);
  }
}

.help-facility-item.is-filter:focus-visible {
  outline: 2px solid var(--themeocean);
  outline-offset: 2px;
}

/* 凡例の中の入り口の三角。地図のものと同じ形・同じ色にする */
.entrance-sample {
  display: inline-block;
  width: 16px;
  height: 11px;
  background: var(--themeocean);
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  flex-shrink: 0;
}

/* 凡例の中の「本部」「正門」。地図の .facility-label と同じ見え方にする。
   白い紙の上では下地が消えてしまうので、そこだけ薄い灰色に置き換える
   （枠は付けない ── 付けると地図の側と食い違い、押せる物に見える）。 */
.facility-label-sample {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 7px;
  border-radius: 3px;
  background: #efefef;
  color: #555;
  font-size: 10px;
  font-weight: bold;
  white-space: nowrap;
  flex-shrink: 0;
}

/* 凡例の中の施設アイコン。地図の .facility-marker と同じ見え方にそろえる
   （枠の色まで合わせる。片方だけ濃いと別のものに見える） */
.facility-sample {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: #fff;
  border: 1px solid #dcdcdc;
  color: #555;
  flex-shrink: 0;
}

/* 凡例で素材のSVGを使うとき。地図のピンと同じ見え方にそろえる */
.facility-sample.has-image {
  background: none;
  border: none;
  box-shadow: none;
}

.facility-sample.has-image img {
  display: block;
  width: 100%;
  height: 100%;
}

/* 地図上のピンの中のアイコンだけ、ピンの大きさに合わせて拡縮する
   (凡例や「?」のピン見本は固定サイズのまま) */
.pin-marker .pin-icon {
  width: calc(var(--pin-icon-size) * var(--pin-scale));
  height: calc(var(--pin-icon-size) * var(--pin-scale));
}

/* 広い画面(PC・タブレット)向け(SPEC.md §5.0)
   スマートフォン版が優先のため、ここでは下からのボトムシートを
   左側から出てくる固定パネルに置き換えるだけにとどめる。
   高さのドラッグ操作はこの表示では無効(map.js の isWideScreen() で判定)。 */
/* 「一覧をしまう」ボタンは広い画面だけ。狭い画面はハンドルを引けばよい */
#btn-panel-toggle {
  display: none;
}

@media (min-width: 768px) {
  #bottom-sheet {
    top: 0;
    bottom: 0;
    left: 0;
    right: auto;
    width: var(--sheet-panel-width);
    height: auto;
    /* スマホ用のせり上げ（#bottom-sheet の注）は使わない。しまうときだけ横へずらす（下の .panel-collapsed） */
    transform: none;
    border-radius: 0 28px 28px 0;
    box-shadow: 4px 0 12px rgba(0,0,0,0.15);
    transition: transform var(--sheet-duration) var(--sheet-ease);
  }

  #bottom-sheet-handle {
    display: none;
  }

  #bottom-sheet-content {
    padding-top: 12px;
    /* パネルは画面の高さいっぱいで、隠れている部分が無い。最後のカードの下はカードの margin-bottom で空く */
    padding-bottom: 0;
  }

  /* 留めた見出しを、上の余白（12px）ごとパネルの上端に付ける（余白のぶん上が透けて、下を通るカードが見えないように） */
  #bottom-sheet-content > .sheet-head,
  #bottom-sheet-content > .location-sheet-header,
  #bottom-sheet-content > .detail-close-row {
    top: -12px;
    margin-top: -12px;
    padding-top: 12px;
  }

  /* 重ねて置いた×も、足した上の余白のぶん下げる（.location-sheet-header .btn-close の top: 3px に 12px） */
  #bottom-sheet-content > .location-sheet-header .btn-close {
    top: 15px;
  }

  /* パネルに隠れないよう、上部バー・各パネルをパネル幅のぶん右に寄せる */
  #top-bar {
    left: var(--sheet-panel-width);
    transition: left var(--sheet-duration) var(--sheet-ease);
  }

  /* 屋内マップのスワイプ領域・インジケーターは建物の位置に追従するため、ここでは動かさない。
     絞り込みパネル（#genre-panel）は画面全体を覆うので、パネル幅のぶん寄せない */

  /* --- 上部バーの文字まわり ---
     ★ **大きさ（40px）はここに書かない。** 狭い画面と共通なので上の
       「上部バーのアイコンと検索欄」に置いてある。ここは広い画面でだけ
       大きくしたい**文字**と、その分の余白だけ。 */
  #top-bar .search-keyword::placeholder {
    font-size: 15px;
  }

  /* 広い画面は欄が長いので、「絞り込み」も一回り大きくする（形・色は狭い画面と同じ） */
  #top-bar .search-filter-btn {
    height: 28px;
    padding: 0 13px 0 11px;
    border-radius: 14px;
    font-size: 13px;
  }

  #top-bar .search-filter-btn img {
    width: 13px;
  }

  /* --- しまうボタン ---
     パネルの右端に貼り付ける。しまっても画面の左端に残るので押し戻せる。
     ★ シートの子にしないこと（シートは overflow: hidden で切り落とされる）。 */
  #btn-panel-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: var(--sheet-panel-width);
    top: 50%;
    z-index: 11;
    width: 22px;
    height: 56px;
    padding: 0;
    border: 2px solid var(--themeocean);
    border-left: none;
    border-radius: 0 8px 8px 0;
    /* 地はシートと同じ(--themewhite)。--c-chip だとパネルから浮いて目立ちすぎる */
    background: var(--themewhite);
    color: var(--themeocean);
    cursor: pointer;
    transform: translateY(-50%);
    transition: left var(--sheet-duration) var(--sheet-ease), background 0.12s ease, color 0.12s ease;
  }

  #btn-panel-toggle:hover {
    background: #fff;
  }

  #btn-panel-toggle:active {
    background: var(--themeocean);
    color: #fff;
  }

  #btn-panel-toggle svg {
    transition: transform var(--sheet-duration) var(--sheet-ease);
  }

  /* --- しまっている状態 --- */
  :root.panel-collapsed #bottom-sheet {
    transform: translateX(-100%);
  }

  :root.panel-collapsed #btn-panel-toggle {
    left: 0;
  }

  /* 矢印を反転して「出す」向きにする */
  :root.panel-collapsed #btn-panel-toggle svg {
    transform: rotate(180deg);
  }

  /* パネルが無くなったぶん、上部バーを左端まで戻す */
  :root.panel-collapsed #top-bar {
    left: 0;
  }
}