@charset "UTF-8";
/*
 * CEATEC 2026 会場マップの見た目（public/events/ceatec2026/index.html 用）。
 * 中森さん指示 2026-10-08「ceatec.com の出展者一覧を参考に、CSS 等を参照して合わせる」。
 * 参考: https://ceatec.com/ja/exhibition/exhibitor-list.php
 *   ・ヘッダー / タイトル帯の背景（光の玉・下端の波）… header-2026 / header-title-2026 / page-title-2026
 *   ・左の絞り込み・並び替えの帯・コンパクトカード … exl-（一覧ページ内の <style>）
 * 参考ページの CSS から、会場マップで使う部分だけを移した。class 名・値は参考と同じ。
 * 参考ページにあって会場マップに無いもの（ナビ・ログイン等・AI シノニム・製品カテゴリ・学生フレンドリー・
 * 表示件数・フル/コンパクト切替・共同出展の開閉・ロゴ画像・件数表示・モーダル）の CSS は移していない。
 * 参考ページを変えたら、ここも合わせること。
 */


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * 0. この画面の土台（参考ページの本体サイトの共通 CSS から、会場マップで使う分）
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

:root { --color-white: #fff; }

/* 参考の本体サイトは白地。共通の /styles.css の body 背景（#f7f6f4）より詳細度を上げて勝たせる */
body.ceatec {
  margin: 0;
  font-family: "LINE Seed JP", sans-serif;
  line-height: 1.6;
  background-color: #fff;
  color: #222;
  font-weight: 400;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0.01em;
}

/* 参考のヘッダー（.header-title-2026 が z-index:100 の重ね合わせ文脈を作る）の下に、
   起動ローディングと地図モーダルが潜らないよう、これらを前面に出す */
.app-loading { z-index: 1000; }
#modal { z-index: 300; }
/* モーダルの小間番号は、一覧の小間番号と同じ書体（Montserrat の斜体）にする */
#mBooth { font-family: "Montserrat", sans-serif; font-style: italic; }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * 1. ヘッダー（ロゴと会期・会場だけ。ナビ・ログイン等のボタンは置かない）
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.header-2026 {
  position: relative;
  z-index: 100;
  background: linear-gradient(135deg, #0c1a49 0%, #3a7bd5 100%);
}

.header-2026__inner {
  display: flex;
  align-items: stretch;
  /* 参考は space-between（右にナビ）だが、会場マップはナビを置かずロゴの右にページ名を並べるので左詰め */
  justify-content: flex-start;
  width: 100%;
  /* ロゴ(48px) + 会期・会場行 を縦に積むため、72px では上下の余白がほぼ無くなる */
  min-height: 80px;
  /* ロゴ画像(logo-basic-*-2026.svg)は視覚要素の左側に約10pxの余白を内包しているため、
     他コンテンツ(左右40px)と視覚的な左端を揃えるべく左側だけ10px差し引く */
  padding: 0 40px 0 30px;
  gap: 24px;
}

/* ロゴと会期・会場を縦に積む。inner が align-items:stretch のため
   帯の高さいっぱいになる。justify-content で中身を上下中央に置く（会場マップではリンクにしない） */
.header-2026__logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.header-2026__logo img {
  height: 48px;
  width: auto;
  display: block;
}

/* ロゴ直下の会期・会場。ロゴ画像が左に約10pxの余白を内包しているぶん、
   文字の左端をロゴの視覚的な左端に合わせる */
.header-2026__logo-meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: #fff;
}
.header-2026__logo-meta time {
  font-size: 11px;
  font-weight: 700;
}

.header-2026__logo-venue {
  font-weight: 700;
}

/* ロゴの右に置くページ名「会場マップ」。左に細い区切り線を入れてロゴと分ける（会場マップ固有） */
.header-2026__title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 18px 0;
  padding-left: 24px;
  border-left: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.2;
  white-space: nowrap;
}
.header-2026__title-en {
  margin-top: 4px;
  font-family: "Montserrat", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  opacity: 0.85;
}
@media screen and (max-width: 1119px) {
  .header-2026__title { order: 2; }
}

/* 地図のハイライト: 社名の吹き出しは出さない（2026-10-09 先方の希望）。赤枠と開いた時の赤い波紋は元の仕様のまま、
   白フチ＋白光彩や 2px の細い枠も試したが、1 小間だと何も分からず不採用（2026-10-09）。
   共通の /styles.css は Inter BEE と共用なので CEATEC だけここで上書きする */
/* 赤は共通の #dc2626 より明るい #ff3b30（2026-10-09 中森さん指示「もうちょい明るめの赤」）。波紋も同じ赤に揃える */
/* 太さは元の 3px（2px は細すぎて分からなかった）。波紋は開いた時の 2 回だけでなくずっと繰り返す（中森さん指示 2026-10-09） */
body.ceatec .highlight { border-color: #ff3b30; animation-name: ceatecPulse; animation-iteration-count: infinite; }
@media (prefers-reduced-motion: reduce) {
  body.ceatec .highlight { animation: none; }
}
@keyframes ceatecPulse {
  0%   { box-shadow: 0 0 0 9999px rgba(28,25,23,.28), 0 0 0 0 rgba(255,59,48,.6); }
  70%  { box-shadow: 0 0 0 9999px rgba(28,25,23,.28), 0 0 0 22px rgba(255,59,48,0); }
  100% { box-shadow: 0 0 0 9999px rgba(28,25,23,.28), 0 0 0 0 rgba(255,59,48,0); }
}
body.ceatec .hl-label { display: none; }

@media screen and (max-width: 767px) {
  .header-2026__title { margin: 10px 0; padding-left: 14px; font-size: 18px; }
  .header-2026__title-en { font-size: 10px; margin-top: 2px; }
}

@media screen and (max-width: 1119px) {
  .header-2026__inner {
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
    padding-right: 16px;
    gap: 12px;
  }

  .header-2026__logo {
    order: 1;
  }
}

@media screen and (max-width: 767px) {
  .header-2026__inner {
    min-height: 56px;
    /* コンテンツ側の左右20pxに合わせ、左側はロゴの内包余白(24px時 約8px)を差し引く */
    padding: 0 20px 0 12px;
    gap: 8px;
  }

  .header-2026__logo {
    gap: 2px;
  }

  .header-2026__logo img {
    height: 24px;
  }

  /* SP のロゴは 24px。内包余白も約 8px に縮むので左寄せ量を合わせる */
  .header-2026__logo-meta {
    gap: 6px;
    padding-left: 5px;
    font-size: 10px;
    letter-spacing: 0.02em;
  }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * 2. ヘッダー + タイトル帯の連結背景（動くグラデーション・光の玉・下端の波）
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.header-title-2026 {
  --base-1: #16109b;
  --base-2: #101ca7;
  --base-3: #0754ad;
  --base-4: #073a94;
  position: relative;
  z-index: 100;
  overflow: hidden;
  background: var(--base-1);
}

.header-title-2026__bg {
  position: absolute;
  inset: -30%;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
  background:
    radial-gradient(circle at 8% 76%, rgba(31, 0, 229, 0.88) 0%, rgba(31, 0, 229, 0) 34%),
    radial-gradient(circle at 54% 95%, rgba(8, 123, 115, 0.78) 0%, rgba(8, 123, 115, 0) 32%),
    radial-gradient(circle at 102% 80%, rgba(106, 78, 255, 0.68) 0%, rgba(106, 78, 255, 0) 27%),
    radial-gradient(circle at 68% 12%, rgba(36, 71, 218, 0.42) 0%, rgba(36, 71, 218, 0) 34%),
    linear-gradient(180deg, var(--base-1) 0%, var(--base-2) 34%, var(--base-3) 72%, var(--base-4) 100%);
  background-size: 165% 165%;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

/* 光のかたまり。以前は JS で毎フレーム transform / opacity / border-radius を
   書き換えていたが、ぼかし + mix-blend-mode の再描画が重くチラつきの原因だったため
   静止させている（動きは下端の波が担当）。 */
.header-title-2026 .glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: screen;
  transform-origin: center;
}

.header-title-2026 .glow-1 {
  width: 58vw;
  height: 58vw;
  min-width: 560px;
  min-height: 560px;
  left: -24vw;
  bottom: -28vw;
  filter: blur(90px);
  background: radial-gradient(circle at 44% 42%, rgba(30, 0, 236, 1) 0%, rgba(30, 0, 236, 0.72) 30%, rgba(18, 30, 223, 0.25) 58%, rgba(18, 30, 223, 0) 76%);
}

.header-title-2026 .glow-2 {
  width: 54vw;
  height: 54vw;
  min-width: 520px;
  min-height: 520px;
  left: 28vw;
  bottom: -26vw;
  filter: blur(82px);
  background: radial-gradient(circle at 48% 44%, rgba(9, 125, 115, 1) 0%, rgba(9, 119, 114, 0.78) 31%, rgba(6, 93, 110, 0.30) 58%, rgba(6, 93, 110, 0) 76%);
}

.header-title-2026 .glow-3 {
  width: 35vw;
  height: 66vw;
  min-width: 360px;
  min-height: 620px;
  right: -13vw;
  bottom: -20vw;
  filter: blur(78px);
  background: radial-gradient(ellipse at 50% 48%, rgba(103, 94, 255, 0.98) 0%, rgba(86, 91, 255, 0.66) 34%, rgba(56, 84, 244, 0.20) 62%, rgba(56, 84, 244, 0) 78%);
}

.header-title-2026 .glow-4 {
  width: 72vw;
  height: 72vw;
  min-width: 740px;
  min-height: 740px;
  right: -24vw;
  top: -34vw;
  filter: blur(115px);
  opacity: 0.78;
  background: radial-gradient(circle, rgba(26, 92, 255, 0.64) 0%, rgba(28, 72, 234, 0.30) 43%, rgba(28, 72, 234, 0) 75%);
}

.header-title-2026 .glow-5 {
  width: 74vw;
  height: 74vw;
  min-width: 760px;
  min-height: 760px;
  left: 7vw;
  top: 9vh;
  filter: blur(125px);
  opacity: 0.67;
  background: radial-gradient(circle at 48% 52%, rgba(30, 150, 255, 0.57) 0%, rgba(28, 130, 255, 0.27) 44%, rgba(28, 130, 255, 0) 76%);
}

.header-title-2026 .glow-6 {
  width: 29vw;
  height: 29vw;
  min-width: 300px;
  min-height: 300px;
  right: 3vw;
  bottom: 2vh;
  filter: blur(68px);
  opacity: 0.84;
  background: radial-gradient(circle, rgba(149, 70, 255, 0.82) 0%, rgba(121, 68, 255, 0.36) 47%, rgba(121, 68, 255, 0) 74%);
}

.header-title-2026 .glow-7 {
  width: 30vw;
  height: 30vw;
  min-width: 320px;
  min-height: 320px;
  left: 42vw;
  top: -9vw;
  filter: blur(72px);
  opacity: 0.58;
  background: radial-gradient(circle, rgba(41, 71, 255, 0.68) 0%, rgba(41, 71, 255, 0.25) 46%, rgba(41, 71, 255, 0) 75%);
}

/* ==========================================================================
   ページヘッダー下端の波
   出展申込サイト TOP の .theme_wave と同じ「SVG の波を translateX でループ」方式。
   ::after が本文の白で下端を切り取る境界の波、::before はその上に薄く重なる波。
   ぼかし・ブレンドモード・JS を使わず transform だけで動くため、
   合成のみで処理でき再描画（repaint）が発生しない。
   ========================================================================== */

/* 波が乗る分の余白を下端に確保する（ライトテーマのトップページは対象外） */
/* 参考は下端の波のぶん 28px あけるが、会場マップは波を置かない（2026-10-08 中森さん指示）ので 0 */
.header-title-2026:not(.header-title-2026--light) {
  padding-bottom: 0;
}

.header-title-2026__wave {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 104px;
  overflow: hidden;
  pointer-events: none;
}

.header-title-2026__wave::before,
.header-title-2026__wave::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200%;
  height: 100%;
  background-repeat: repeat-x;
  background-position: bottom center;
  background-size: 50% 100%;
  /* 合成専用レイヤーに載せて、遅い移動でも 1px 単位に丸められないようにする */
  will-change: transform;
  backface-visibility: hidden;
}

/* 波形は「タイルの左端と右端で接線（傾き）が一致する」形で描くこと。
   端の傾きがずれていると、1 ループごとに折れ角が画面を横切って
   動きがカクついて見える（以前の波形がこれだった）。
   各カーブは中点に制御点を 2 つ重ねた左右対称の山で、
   制御点のオフセット k とカーブ幅 Δ の比 k/Δ をすべて 0.0225 に揃えてあるため、
   山の大小が変わっても継ぎ目を含む全地点で傾きが連続する。
   波の高さ（凹凸の量）を変えるときは k を全区間で同じ倍率にすること。
   一部だけ変えると比が崩れ、継ぎ目に折れ角が戻る。 */

/* 境界の一段上に重なる薄い波（Δ=900/900/1000/800, k=∓20.25/22.5/18, 中心 y=85） */
.header-title-2026__wave::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3600 200' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='hdrWave1' x1='0%25' y1='0%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' style='stop-color:%23ffffff;stop-opacity:0.55'/%3E%3Cstop offset='50%25' style='stop-color:%237fd8ff;stop-opacity:0.85'/%3E%3Cstop offset='100%25' style='stop-color:%23ffffff;stop-opacity:0.55'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23hdrWave1)' d='M0,85 C450,64.75 450,64.75 900,85 C1350,105.25 1350,105.25 1800,85 C2300,62.5 2300,62.5 2800,85 C3200,103 3200,103 3600,85 L3600,200 L0,200 Z'/%3E%3C/svg%3E");
  opacity: 0.35;
  animation: headerWaveMove1 20s linear infinite;
}

/* 本文の白で下端を波形に切り取る境界。ヘッダー下は body と同じ #fff
   （Δ=800/1000/900/900, k=∓18/22.5/20.25, 中心 y=120）
   NOTE: 直下のセクションが白でないページ（例: conference_preview.css）は、
   同じ形のまま fill だけ変えたSVGに background-image を丸ごと差し替えて対応する。 */
.header-title-2026__wave::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3600 200' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' d='M0,120 C400,102 400,102 800,120 C1300,142.5 1300,142.5 1800,120 C2250,99.75 2250,99.75 2700,120 C3150,140.25 3150,140.25 3600,120 L3600,200 L0,200 Z'/%3E%3C/svg%3E");
  animation: headerWaveMove2 28s linear infinite;
}

/* 移動量はタイル 1 枚分ちょうど（要素幅 200% の半分 = コンテナ幅 1 つ分）。
   translate3d で GPU 合成に固定する */
@keyframes headerWaveMove1 {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

@keyframes headerWaveMove2 {
  from { transform: translate3d(-50%, 0, 0); }
  to { transform: translate3d(0, 0, 0); }
}


/* ヘッダー本体・二階層目(サブナビ)は、動く背景の上に紺15%の帯を横100%で重ねる */
.header-title-2026 .header-2026 {
  position: relative;
  z-index: 99;
  width: 100%;
  background: rgba(10, 20, 64, 0.15);
}

.header-title-2026 .page-title-2026 {
  position: relative;
  z-index: 1;
  background: transparent;
}

@media (max-width: 768px) {
  .header-title-2026__wave { height: 72px; }
  .header-title-2026__bg { inset: -45%; }
  .header-title-2026 .glow { filter: blur(62px); }
  .header-title-2026 .glow-1,
  .header-title-2026 .glow-2 { min-width: 432px; min-height: 432px; }
  .header-title-2026 .glow-3 { min-width: 280px; min-height: 500px; }
  .header-title-2026 .glow-4,
  .header-title-2026 .glow-5 { min-width: 568px; min-height: 568px; }
  .header-title-2026 .glow-6,
  .header-title-2026 .glow-7 { min-width: 260px; min-height: 260px; }
}



/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * 3. ページタイトル帯（出展者一覧 → 会場マップ）
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.page-title-2026 {
  background: linear-gradient(120deg, #0c1a49 0%, #3a7bd5 100%);
  padding: 20px 0 46px;
}
.page-title-2026__title {
  max-width: 1440px;
  padding: 0 40px;
  color: var(--color-white);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 0.01em;
  margin: 0 auto;
  box-sizing: border-box;
}

.under-content {
  max-width: 1440px;
  margin: 0 auto;
  /* 上の余白は、参考ではタイトル帯が受け持っていた。帯を置かないのでここであける */
  padding: 32px 40px 40px;
  box-sizing: border-box;
}

@media screen and (max-width: 767px) {
  .page-title-2026 {
    padding: 20px 0 40px;
  }

  .page-title-2026__title {
    padding: 0 20px;
    font-size: 24px;
  }

  .under-content {
    padding: 20px 20px 48px;
  }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * 4. 変数・土台（参考の exl- 1・2）
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.exl-root {
  /* --- ベースカラー（濃い順） --- */
  --exl-ink-900:  #1c1917;   /* 最も濃い。ボタン背景・モーダルヘッダー */
  --exl-ink-800:  #292524;   /* ホバー時の濃色・バッジ背景 */
  --exl-ink-700:  #44403c;   /* 見出し・本文の濃いめ */
  --exl-ink-600:  #57534e;   /* 本文 */
  --exl-ink-500:  #78716c;   /* 補助テキスト */
  --exl-ink-400:  #a8a29e;   /* さらに薄い補助テキスト */
  --exl-ink-300:  #d6d3d1;   /* 罫線・区切り記号 */
  --exl-ink-200:  #e7e5e4;   /* カード枠線 */
  --exl-ink-100:  #f5f5f4;   /* 淡い背景 */
  --exl-ink-50:   #fafaf9;   /* 最も淡い背景 */

  --exl-page-bg:  #f7f6f4;   /* ページ全体の背景色 */
  --exl-surface:  #ffffff;   /* カード・パネルの背景色 */
  --exl-line:     #e7e5e4;   /* 標準の枠線色 */

  /* --- 余白 --- */
  --exl-space-1:  4px;
  --exl-space-2:  8px;
  --exl-space-3:  12px;
  --exl-space-4:  16px;
  --exl-space-5:  20px;
  --exl-space-6:  24px;
  --exl-space-8:  32px;

  /* --- 角丸 --- */
  --exl-radius-sm:   4px;
  --exl-radius-md:   8px;
  --exl-radius-lg:  12px;
  --exl-radius-xl:  16px;
  --exl-radius-pill: 9999px;

  /* --- 文字サイズ --- */
  --exl-text-2xs:  10px;
  --exl-text-xs:   11px;
  --exl-text-sm:   12px;
  --exl-text-base: 14px;
  --exl-text-md:   15px;
  --exl-text-lg:   18px;
  --exl-text-xl:   24px;

  /* --- 書体（LINE Seed JP / Montserrat は index.html の Google Fonts の <link> で読み込む） --- */
  --exl-font-family: "LINE Seed JP", -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN",
                     "Hiragino Sans", Meiryo, sans-serif;
  --exl-font-mono: "Montserrat", sans-serif;

  /* --- カード左端のエリアカラー帯の太さ --- */
  --exl-areabar-width: 4px;
  /* --- 影 --- */
  --exl-shadow-card-hover: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
}

.exl-root {
  font-family: var(--exl-font-family);
  color: var(--exl-ink-900);
  background: var(--exl-page-bg);
  -webkit-font-smoothing: antialiased;
  /* 行の高さ。数値を小さくすると全体が詰まり、大きくするとゆったりします */
  line-height: 1.5;
}
.exl-root *,
.exl-root *::before,
.exl-root *::after { box-sizing: border-box; }

/*
 * リセットは :where() で囲んでいます。
 * :where() の中に書いた指定は「弱い指定」として扱われるため、
 * 下のセクションで書いたクラス（.exl-card__highlight など）の
 * 余白・枠・背景がリセットに打ち消されません。
 * ここを :where() 無しに書き換えると、ボタンの枠や段落の余白が消えます。
 */
.exl-root :where(h1, h2, h3, h4, p, ul, ol, figure) { margin: 0; padding: 0; }
.exl-root :where(ul, ol) { list-style: none; }
.exl-root :where(img) { max-width: 100%; }

.exl-root :where(button) {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.exl-root :where(a) { color: inherit; }

/* 本体サイトの文字サイズ基準（PC 16px / SP 14px）。参考は本体 CSS のリセットが div 等へ効いている */
.exl-root { font-size: 16px; }
@media (max-width: 767px) {
  .exl-root { font-size: 14px; }
}



/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * 5. 全体レイアウト（サイドバー ＋ 本文の 2 カラム）
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.exl-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--exl-space-6) var(--exl-space-4);
}
.exl-layout {
  display: flex;
  flex-direction: column;
  gap: var(--exl-space-6);
  align-items: flex-start;
}
.exl-sidebar { width: 100%; }
.exl-main {
  flex: 1 1 0%;
  min-width: 0;
  width: 100%;
}

/* 参考の一覧ページ固有の調整と同じ（下層ページの白背景に合わせる・幅は .under-content に任せる） */
.exl-container { max-width: none; padding: 0; }
.exl-root { background: transparent; }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * 6. 絞り込みパネル（左サイドバー）
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.exl-panel {
  background: var(--exl-surface);
  border-right: 1px solid var(--exl-line);
  padding: var(--exl-space-5);
  padding-top: 0;
}
.exl-panel__title {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--exl-ink-700);
  margin-bottom: var(--exl-space-5);
}
.exl-field { margin-bottom: var(--exl-space-5); }
.exl-field:last-child { margin-bottom: 0; }

.exl-label {
  display: block;
  font-size: var(--exl-text-xs);
  font-weight: 700;
  color: var(--exl-ink-700);
  margin-bottom: 6px;
}

.exl-input,
.exl-select {
  width: 100%;
  border-radius: var(--exl-radius-md);
  padding: var(--exl-space-2) var(--exl-space-3);
  font-size: var(--exl-text-base);
  font-family: inherit;
  background: var(--exl-surface);
  color: var(--exl-ink-900);
}
.exl-select,
.exl-input { border: 1px solid var(--exl-ink-300); }
.exl-input::placeholder { color: var(--exl-ink-300); }
/* フリーワード検索の 🔍 ボタン（参考の .exl-searchrow / .exl-search-btn と同じ値） */
.exl-searchrow { position: relative; }
.exl-searchrow .exl-input { padding-right: 44px; }
.exl-search-btn {
  position: absolute;
  right: 1px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--exl-radius-sm);
  background: var(--exl-ink-900);
  color: #ffffff;
  cursor: pointer;
  transition: background-color 0.15s;
}
.exl-search-btn:hover { background: var(--exl-ink-800); }
.exl-search-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--exl-ink-400);
}
.exl-search-btn svg { width: 16px; height: 16px; }

.exl-input:focus,
.exl-select:focus {
  outline: none;
  border-color: var(--exl-ink-400);
  box-shadow: 0 0 0 2px var(--exl-ink-400);
}

.exl-clear-wrap {
  padding-top: var(--exl-space-1);
}
.exl-clear {
  font-size: var(--exl-text-sm);
  color: var(--exl-ink-500);
  text-decoration: underline;
  transition: color .15s;
}
.exl-clear:hover { color: var(--exl-ink-800); }

/* 参考では「条件をクリア」がサイト共通の .btn（紺の塗りボタン）と併用されている。
   会場マップには共通 .btn が無いので、同じ見た目をここに書く（add.css の .btn ＋ 一覧側の上書き） */
.exl-clear.btn {
  display: block;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  font-weight: 700;
  border-radius: 8px;
  position: relative;
  padding: 8px 16px;
  text-align: center;
  transition: all 400ms ease;
  overflow: hidden;
  color: #fff;
  background: #0c1a49;
  box-sizing: border-box;
  box-shadow: none;
  text-decoration: none;
  border: none;
  cursor: pointer;
}
.exl-clear.btn:hover {
  color: #fff;
  text-decoration: none;
  transform: translateY(-2px) scale(1.015);
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * 7. 並び替えの帯（社名順 / ブース番号順）
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.exl-resulthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--exl-space-3);
  flex-wrap: wrap;
  margin-bottom: var(--exl-space-3);
}

.exl-controls {
  display: flex;
  align-items: center;
  gap: var(--exl-space-2);
  flex-wrap: wrap;
}

.exl-seg {
  display: flex;
  border: 1px solid var(--exl-ink-300);
  border-radius: var(--exl-radius-md);
  overflow: hidden;
  font-size: var(--exl-text-sm);
  font-weight: 700;
  flex-shrink: 0;
}
.exl-seg__btn {
  padding: 6px var(--exl-space-3);
  background: var(--exl-surface);
  color: var(--exl-ink-500);
  transition: background-color .15s, color .15s;
  white-space: nowrap;
}
.exl-seg__btn:hover { background: var(--exl-ink-100); }
.exl-seg__btn.is-on {
  background: var(--exl-ink-900);
  color: #fff;
}
.exl-seg__btn--wide { padding: 6px var(--exl-space-4); }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * 8. 絞り込み条件のチップ
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.exl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--exl-space-2);
  margin-bottom: var(--exl-space-4);
}
.exl-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--exl-text-xs);
  font-weight: 700;
  background: var(--exl-surface);
  border: 1px solid var(--exl-ink-300);
  border-radius: var(--exl-radius-pill);
  padding: var(--exl-space-1) var(--exl-space-3);
  transition: background-color .15s;
}
.exl-chip:hover { background: var(--exl-ink-100); }
.exl-chip__x { color: var(--exl-ink-400); }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * 9. 一覧カード（コンパクト表示）
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.exl-list {
  display: flex;
  flex-direction: column;
  gap: var(--exl-space-3);
  align-items: stretch;
}
.exl-list--compact {
  display: grid;
  /* 1fr のままだとグリッド項目の min-width が auto になり、カードが min-content 幅
     （長い社名やエリア名）まで縮まず 390px 幅で横にはみ出す */
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  align-items: start;
}

.exl-card {
  /* 親が grid/flex のとき、既定の min-width:auto で縮まなくなるのを防ぐ */
  min-width: 0;
  background: var(--exl-surface);
  border: 1px solid var(--exl-line);
  border-radius: var(--exl-radius-md);
  transition: box-shadow .15s;
  /* エリアカラーの帯（.exl-areabar）を左端に置くための基準 */
  position: relative;
}
.exl-card.is-openable:hover { box-shadow: var(--exl-shadow-card-hover); }

/* 詳細（地図）を開けるカードは指カーソルにする。参考は .is-openable の本文と › にだけ付けている */
.exl-card.is-openable .exl-compact__body,
.exl-card.is-openable .exl-compact__chevron { cursor: pointer; }
/* 地図に載っていない小間は薄く表示する（会場マップ固有） */
.exl-card.is-unmapped { opacity: .6; }

.exl-areabar {
  position: absolute;
  left: 0;
  top: var(--exl-space-4);
  bottom: var(--exl-space-4);
  width: var(--exl-areabar-width);
  /* 左辺はカードに接しているので角丸なし。右側だけ 4px 丸める */
  border-radius: 0 var(--exl-radius-sm) var(--exl-radius-sm) 0;
}
/* コンパクト表示は行の高さが低いため、上下の余白も詰める */
.exl-card__compact .exl-areabar {
  top: var(--exl-space-2);
  bottom: var(--exl-space-2);
}

.exl-card__area { font-weight: 700; }
.exl-card__hall { color: var(--exl-ink-500); font-weight: 700; }
.exl-card__booth-wrap { color: var(--exl-ink-700); }
.exl-card__booth {
  border: 1px solid var(--exl-ink-300);
  border-radius: var(--exl-radius-sm);
  padding: 2px 6px;
  font-family: var(--exl-font-mono);
  font-style: italic;
  font-weight: 700;
}
.exl-badge-parent {
  font-size: var(--exl-text-2xs);
  background: var(--exl-ink-800);
  color: #fff;
  padding: 2px var(--exl-space-2);
  border-radius: var(--exl-radius-pill);
  font-weight: 700;
}

.exl-chevron {
  /* 詳細リンク有効（公開企業）の唯一の目印なので、罫線色（ink-300）より濃くして
     気付けるようにする（2026-08-22 確定。薄く戻さないこと） */
  color: var(--exl-ink-500);
  font-size: var(--exl-text-lg);
}

.exl-compact__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--exl-space-2) var(--exl-space-3);
  padding-left: calc(var(--exl-space-3) + var(--exl-areabar-width));
}
.exl-compact__body {
  flex: 1 1 0%;
  min-width: 0;
}
.exl-compact__nameline {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.exl-compact__name {
  font-weight: 700;
  font-size: var(--exl-text-base);
  line-height: 1.375;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.exl-compact__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 2px;
  font-size: var(--exl-text-sm);
}
.exl-compact__meta .exl-card__booth { padding: 0 var(--exl-space-1); }
.exl-compact .exl-badge-parent {
  font-size: 9px;
  padding: 2px 6px;
  flex-shrink: 0;
}
.exl-compact__chevron { flex-shrink: 0; }

/* 会場マップ固有のタグ「地図未登録」。体裁は .exl-badge-parent（共同/パビリオン）に合わせた */
.exl-badge-none {
  font-size: 9px;
  background: #fef3c7;
  color: #92400e;
  padding: 2px 6px;
  border-radius: var(--exl-radius-pill);
  font-weight: 700;
  flex-shrink: 0;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * 10. 空状態
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.exl-empty {
  text-align: center;
  padding: 64px 0;
}
.exl-empty__title {
  font-size: 20px;
  font-weight: 700;
}
.exl-empty__text {
  font-size: var(--exl-text-base);
  color: var(--exl-ink-400);
  margin-top: var(--exl-space-1);
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * 11. レスポンシブ（参考の「17. レスポンシブ」のうち、会場マップで使う分）
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (min-width: 768px) {
  .exl-list--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .exl-layout { flex-direction: row; }
  .exl-sidebar {
    width: 288px;
    flex-shrink: 0;
    position: sticky;
    /* 参考はサイト共通ヘッダーがスクロール追従するため 136px 空けている。
       会場マップのヘッダーは追従しないので、余白（--exl-space-6）のままにする */
    top: 24px;
  }
}

/* スマートフォン（767px以下）: 絞り込みパネルの余白と右側の区切り線を消す */
@media (max-width: 767px) {
  .exl-panel {
    padding: 0;
    border-right: none;
  }

  /* 会場マップ固有: スマホで入力欄にフォーカスした時に画面が勝手に拡大されないよう、入力欄は 16px にする
     （参考の 14px のままだと iOS Safari が拡大する。Inter BEE 版も同じ理由で text-base にしている） */
  .exl-input,
  .exl-select { font-size: 16px; }
}