@charset "UTF-8";
/*
 * ★★★ CEATEC 2026 出展者一覧 — スタイルシート
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * ★★★ このファイルは自由に編集してください
 *      色・余白・文字サイズ・角丸はすべてここで変えられます
 *
 *      クラス名はすべて exl- で始まります（exl = EXhibitor List）。
 *      CEATEC 本体サイトの CSS と名前がぶつからないようにするためです。
 *
 * 目次:
 *    1. 変数（色・余白・文字サイズ）… 色を変えたいときはここだけ触れば全体に反映されます
 *    2. リセットと土台
 *    3. ページヘッダー
 *    4. 全体レイアウト（サイドバー ＋ 本文の 2 カラム）
 *    5. 絞り込みパネル（左サイドバー）
 *    6. 結果ヘッダー（該当件数・表示件数・表示モード・ソート）
 *    7. 適用中フィルタのチップ
 *    8. AI シノニムバナー / エラー表示
 *    9. 出展者カード ― 共通
 *   10. 出展者カード ― フル表示
 *   11. 出展者カード ― コンパクト表示
 *   12. 共同出展（子出展者）
 *   13. ページャ・空状態
 *   14. モーダル ― 共通
 *   15. モーダル ― 出展者詳細
 *   16. モーダル ― 製品カテゴリ選択
 *   17. レスポンシブ（タブレット・スマートフォン）
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 */


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * 1. 変数
 *    よくある変更: 全体の色味を変えたい → --exl-ink 系と --exl-line を変える
 *                  文字を大きくしたい   → --exl-text-base を変える
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.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-accent-student-bg:     #d1fae5;   /* 学生フレンドリー バッジ背景 */
  --exl-accent-student-line:   #a7f3d0;
  --exl-accent-student-text:   #065f46;
  --exl-accent-student-strong: #047857;

  --exl-accent-lang-bg:    #e0f2fe;       /* ブース対応可能言語 バッジ背景 */
  --exl-accent-lang-line:  #bae6fd;
  --exl-accent-lang-text:  #075985;

  --exl-error-bg:    #fef2f2;
  --exl-error-line:  #fecaca;
  --exl-error-text:  #b91c1c;

  --exl-mark-bg:     #fef08a;             /* 検索語ハイライトの色 */

  /* --- 余白 --- */
  --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 を使っています。読み込みは PHP 側（テンプレート）の
     Google Fonts の <link> で行っています。
     本体サイトの書体に合わせたい場合は、下の値を本体サイトのフォント指定に
     置き換えてください（その場合 <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-logo-size: 88px;

  /* --- 影 --- */
  --exl-shadow-card-hover: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
  --exl-shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, .25);
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * 2. リセットと土台
 *    .exl-root で囲んだ内側だけに効くようにしています。
 *    本体サイトのヘッダー・フッターのスタイルには影響しません。
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.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; }

/* 検索語のハイライト */
.exl-mark {
  background: var(--exl-mark-bg);
  color: var(--exl-ink-900);
  font-weight: 700;
  border-radius: var(--exl-radius-sm);
  padding: 0 2px;
}

/* JavaScript が絞り込みで隠す要素に付けるクラス */
.exl-hidden { display: none !important; }

/* 2 行で切り詰める（見どころ文などに使用） */
.exl-clamp2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * 3. ページヘッダー（タイトルと「全 N 社」バッジ）
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.exl-header {
  background: var(--exl-surface);
  border-bottom: 1px solid var(--exl-line);
}
.exl-header__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--exl-space-5) var(--exl-space-4);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--exl-space-4);
}
.exl-header__title {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 36px;
}
.exl-header__subtitle {
  font-size: var(--exl-text-xs);
  color: var(--exl-ink-400);
  font-family: var(--exl-font-mono);
  font-style: italic;
  margin-top: var(--exl-space-1);
}
.exl-header__total {
  display: inline-block;
  background: var(--exl-ink-100);
  border: 1px solid var(--exl-line);
  border-radius: var(--exl-radius-md);
  padding: 6px var(--exl-space-4);
  font-size: var(--exl-text-base);
  font-weight: 700;
  white-space: nowrap;
}
.exl-header__total-num { font-size: var(--exl-text-lg); }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * 4. 全体レイアウト
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.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%;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * 5. 絞り込みパネル（左サイドバー）
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.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-input:focus,
.exl-select:focus {
  outline: none;
  border-color: var(--exl-ink-400);
  box-shadow: 0 0 0 2px var(--exl-ink-400);
}

/* ── フリーワード検索の 🔍 実行ボタン（2026-08-19 追加） ──
   入力中の自動検索を廃止したため、検索はこのボタンか Enter キーで実行します。
   まだ検索していない入力が残っている間は --pending でリングを出します */
.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--pending {
  box-shadow: 0 0 0 1px var(--exl-surface), 0 0 0 3px var(--exl-ink-400);
}
.exl-search-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.exl-search-btn svg { width: 16px; height: 16px; }

/* チェックボックス付きの行 */
.exl-check {
  display: inline-flex;
  align-items: center;
  gap: var(--exl-space-2);
  cursor: pointer;
  margin-top: var(--exl-space-2);
}
.exl-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  accent-color: var(--exl-ink-700);
  cursor: pointer;
}
.exl-check__text {
  font-size: var(--exl-text-xs);
  font-weight: 700;
  color: var(--exl-ink-600);
}

/* チェックボックスと「?」ボタンを横並びにする行 */
.exl-checkrow {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--exl-space-2);
}
.exl-checkrow .exl-check { margin-top: 0; }

/* 社名の扱い（社名のみ / 社名を外す）は縦に積む */
.exl-checkrow--stack {
  flex-direction: column;
  align-items: flex-start;
}

/* ── 検索中インジケータ（3 ドットパルス + Searching...） ──
   検索条件を変えた瞬間に list.js が hidden を外して表示します。
   ドットの動きは CSS アニメーションだけで作っています（外部ライブラリなし。
   このページの「ブラウザから外部への通信を増やさない」方針を守るため）。 */
.exl-searching {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 0;
  font-size: 13px;
  color: var(--exl-ink-500);
}
.exl-searching[hidden] { display: none; }
.exl-searching__dots { display: inline-flex; align-items: center; gap: 6px; }
.exl-searching__dots i {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: var(--exl-ink-600);
  opacity: .6;
  animation: exl-dot-pulse 0.7s ease-in-out infinite;
}
.exl-searching__dots i:nth-child(2) { animation-delay: 0.14s; }
.exl-searching__dots i:nth-child(3) { animation-delay: 0.28s; }
.exl-searching__text { letter-spacing: 0.08em; }
@keyframes exl-dot-pulse {
  0%, 100% { transform: scale(1);   opacity: .4; }
  50%      { transform: scale(1.6); opacity: 1; }
}
/* 検索中は今見えている（古い）結果を薄くし、操作もできなくする */
.exl-root.is-searching [data-exl-list],
.exl-root.is-searching [data-exl-pager] {
  opacity: .4;
  pointer-events: none;
  transition: opacity .15s ease;
}
/* 視覚過敏対応: モーションを減らす設定ではドットを動かさない（表示は残る） */
@media (prefers-reduced-motion: reduce) {
  .exl-searching__dots i { animation: none; }
}

/* 「?」ボタン（AI シノニム展開の解説を開く） */
.exl-help-btn {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--exl-ink-300);
  border-radius: var(--exl-radius-pill);
  background: var(--exl-surface);
  color: var(--exl-ink-500);
  font-size: var(--exl-text-2xs);
  font-weight: 700;
  line-height: 1;
  transition: background-color .15s, border-color .15s, color .15s;
}
.exl-help-btn:hover {
  background: var(--exl-ink-100);
  border-color: var(--exl-ink-400);
  color: var(--exl-ink-700);
}
.exl-help-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--exl-ink-400);
}

/* 解説の吹き出し。この項目（.exl-field--help）の真下に貼り付ける */
.exl-field--help { position: relative; }
.exl-help {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: var(--exl-space-2);
  z-index: 30;
  background: var(--exl-surface);
  border: 1px solid var(--exl-line);
  border-radius: var(--exl-radius-lg);
  box-shadow: var(--exl-shadow-card-hover);
  padding: var(--exl-space-4);
}
.exl-help[hidden] { display: none; }
/* 吹き出しの三角。「?」ボタンの中心に合わせています */
.exl-help__arrow {
  position: absolute;
  top: -7px;
  left: 136px;
  width: 12px;
  height: 12px;
  background: var(--exl-surface);
  border-left: 1px solid var(--exl-line);
  border-top: 1px solid var(--exl-line);
  transform: rotate(45deg);
}
.exl-help__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--exl-space-2);
  margin-bottom: var(--exl-space-2);
}
.exl-help__title {
  font-size: 16px;
  font-weight: 800;
  color: var(--exl-ink-800);
}
.exl-help__close {
  font-size: var(--exl-text-base);
  line-height: 1;
  color: var(--exl-ink-400);
  transition: color .15s;
}
.exl-help__close:hover { color: var(--exl-ink-700); }
.exl-help__body {
  font-size: var(--exl-text-xs);
  line-height: 1.7;
  color: var(--exl-ink-600);
}
.exl-help__body p { font-size: 14px; margin-bottom: var(--exl-space-2); }
.exl-help__body p:last-child { margin-bottom: 0; }
.exl-help__em {
  font-weight: 700;
  color: var(--exl-ink-800);
}

/* 製品カテゴリ選択ボタン */
.exl-catbtn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--exl-space-2);
  border: 1px solid var(--exl-ink-300);
  border-radius: var(--exl-radius-md);
  padding: var(--exl-space-2) var(--exl-space-3);
  font-size: var(--exl-text-base);
  font-weight: 700;
  background: var(--exl-surface);
  color: var(--exl-ink-700);
  transition: background-color .15s, border-color .15s, color .15s;
}
.exl-catbtn:hover { background: var(--exl-ink-50); }
.exl-catbtn.is-active {
  border-color: var(--exl-ink-900);
  background: var(--exl-ink-900);
  color: #fff;
}
.exl-catbtn.is-active:hover { background: var(--exl-ink-800); }
.exl-catbtn__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.exl-catbtn__icon { width: 14px; height: 14px; flex-shrink: 0; }
.exl-catbtn__count {
  font-size: var(--exl-text-xs);
  font-weight: 700;
  background: rgba(255, 255, 255, .2);
  border-radius: var(--exl-radius-pill);
  padding: 2px var(--exl-space-2);
  white-space: nowrap;
}

/* 学生フレンドリー行（上に区切り線） */
.exl-field--divided {
  padding-top: var(--exl-space-1);
  border-top: 1px solid var(--exl-ink-100);
}
.exl-badge-count {
  font-size: var(--exl-text-2xs);
  font-weight: 700;
  color: var(--exl-accent-student-strong);
  background: #ecfdf5;
  border: 1px solid var(--exl-accent-student-line);
  border-radius: var(--exl-radius-pill);
  padding: 2px var(--exl-space-2);
}

.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（add.css）と併用する場合（HTML側 class="exl-clear btn"）。
   このファイルは add.css より後に読み込まれるため、上の color / text-decoration が
   .btn の白文字・下線なしを打ち消してしまう。ボタンとして見せるため戻す。
   .btn を併用しない .exl-clear 単独の見た目（灰色・下線）はそのまま。 */
.exl-clear.btn,
.exl-clear.btn:hover {
  color: #fff;
  text-decoration: none;
}
/* サイドバーの枠幅いっぱいに広げ、.btn 標準のドロップシャドウは外す */
.exl-clear.btn {
  display: block;
  width: 100%;
  box-shadow: none;
}

/* 「もっと見る」トグル（スマホ幅のときだけ list.js が hidden を外して表示する。
   767px 以下かどうかの判定は list.js 側（matchMedia）にまとめてあり、CSS 側では
   分岐幅を持たない。JS が動かない場合や PC/タブレット幅では hidden のまま＝非表示で、
   .exl-panel__more は常に展開表示される） */
.exl-more-toggle {
  display: none;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: var(--exl-space-4);
  padding: var(--exl-space-2) var(--exl-space-3);
  border: none;
  border-bottom: 1px solid var(--exl-ink-300);
  background: var(--exl-surface);
  color: var(--exl-ink-700);
  font-size: var(--exl-text-sm);
  font-weight: 700;
}
.exl-more-toggle:not([hidden]) { display: flex; }
.exl-more-toggle:hover { background: var(--exl-ink-50); }
.exl-more-toggle__icon {
  width: 14px;
  height: 14px;
  transition: transform .15s;
}
.exl-more-toggle[aria-expanded="true"] .exl-more-toggle__icon {
  transform: rotate(180deg);
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * 6. 結果ヘッダー（該当件数・表示件数・表示モード・ソート）
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.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-resulthead__count { font-size: var(--exl-text-base); }
.exl-resulthead__num {
  font-weight: 800;
  font-size: var(--exl-text-xl);
  line-height: 32px;
}
.exl-resulthead__of {
  color: var(--exl-ink-400);
  font-size: var(--exl-text-sm);
  margin-left: var(--exl-space-1);
}
.exl-resulthead__time {
  color: var(--exl-ink-300);
  font-size: var(--exl-text-2xs);
  margin-left: var(--exl-space-2);
}

.exl-controls {
  display: flex;
  align-items: center;
  gap: var(--exl-space-2);
  flex-wrap: wrap;
}
.exl-controls__label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--exl-text-xs);
  font-weight: 700;
  color: var(--exl-ink-500);
  flex-shrink: 0;
}
.exl-miniselect {
  border: 1px solid var(--exl-ink-300);
  border-radius: var(--exl-radius-md);
  padding: 6px var(--exl-space-2);
  font-size: var(--exl-text-sm);
  font-weight: 700;
  font-family: inherit;
  background: var(--exl-surface);
  color: var(--exl-ink-700);
}
.exl-miniselect:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--exl-ink-400);
}

/* 2 つ以上のボタンがつながったトグル（表示モード・ソート） */
.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); }

/* 共同出展の一括開閉（ラベル + トグル。コンパクト表示のときだけ出る） */
.exl-bulkchildren {
  display: flex;
  align-items: center;
  gap: var(--exl-space-2);
}
.exl-bulkchildren__label {
  font-size: var(--exl-text-xs);
  font-weight: 700;
  color: var(--exl-ink-500);
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * 7. 適用中フィルタのチップ
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.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); }
.exl-chip--student {
  border-color: var(--exl-accent-student-line);
  color: var(--exl-accent-student-strong);
}
.exl-chip--student:hover { background: #ecfdf5; }
.exl-chip--mode {
  font-size: var(--exl-text-2xs);
  background: var(--exl-ink-800);
  color: #fff;
  border-color: var(--exl-ink-800);
  padding: var(--exl-space-1) 10px;
  cursor: default;
}
.exl-chip-clearall {
  font-size: var(--exl-text-xs);
  font-weight: 700;
  color: var(--exl-ink-400);
  text-decoration: underline;
  padding: 0 var(--exl-space-1);
  transition: color .15s;
}
.exl-chip-clearall:hover { color: var(--exl-ink-700); }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * 8. AI シノニムバナー / エラー表示
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.exl-synonym {
  background: var(--exl-surface);
  border: 1px solid var(--exl-line);
  border-radius: var(--exl-radius-lg);
  padding: 10px var(--exl-space-4);
  margin-bottom: var(--exl-space-4);
  font-size: var(--exl-text-base);
  display: flex;
  align-items: flex-start;
  gap: var(--exl-space-2);
}
.exl-synonym__icon { font-size: 16px; flex-shrink: 0; }
.exl-synonym__label {
  font-size: var(--exl-text-xs);
  font-weight: 700;
  color: var(--exl-ink-500);
  letter-spacing: 0.05em;
}
.exl-synonym__list {
  margin-top: 2px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.exl-synonym__word {
  font-size: var(--exl-text-sm);
  background: var(--exl-ink-100);
  border: 1px solid var(--exl-line);
  color: var(--exl-ink-700);
  padding: 2px var(--exl-space-2);
  border-radius: var(--exl-radius-pill);
  font-weight: 500;
}

.exl-error {
  background: var(--exl-error-bg);
  border: 1px solid var(--exl-error-line);
  color: var(--exl-error-text);
  border-radius: var(--exl-radius-lg);
  padding: var(--exl-space-3) var(--exl-space-4);
  margin-bottom: var(--exl-space-4);
  font-size: var(--exl-text-base);
  display: flex;
  align-items: center;
  gap: var(--exl-space-2);
}
.exl-error__icon { width: 16px; height: 16px; flex-shrink: 0; }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * 9. 出展者カード ― 共通
 *
 *    1 枚のカードに「フル表示用」と「コンパクト表示用」の両方の中身が入っており、
 *    一覧のクラス（exl-list--full / exl-list--compact）で
 *    どちらを見せるかを切り替えています。
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.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); }

/* 表示モードによる出し分け */
.exl-list--full    .exl-card__compact { display: none; }
.exl-list--compact .exl-card__full    { display: none; }

/* 詳細を開けるときだけ指カーソルにする
   （フル表示 = .exl-card__body / .exl-card__aside、
     コンパクト表示 = .exl-compact__body / .exl-compact__chevron。
     コンパクト側の 2 つは 2026-08-22 追加 — 初期表示がコンパクトのため、
     ここに無いと公式詳細リンクが有効でもカーソルが変わらず気付けない） */
.exl-card.is-openable .exl-card__body,
.exl-card.is-openable .exl-card__aside,
.exl-card.is-openable .exl-compact__body,
.exl-card.is-openable .exl-compact__chevron { cursor: pointer; }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * 10. 出展者カード ― フル表示
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.exl-card__full {
  display: flex;
  align-items: stretch;
  gap: var(--exl-space-4);
  padding: var(--exl-space-4);
  /* 帯（4px）のぶんだけ左を広げ、本文が帯に重ならないようにする */
  padding-left: calc(var(--exl-space-4) + var(--exl-areabar-width));
}
/* 左端のエリアカラー帯。
   左はカードの端にぴったり付け（left: 0）、上下はカードの余白ぶん空ける。
   帯の長さを変えたいときは top / bottom の値を変えてください */
.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__body {
  flex: 1 1 0%;
  min-width: 0;
}

/* 社名の行 */
.exl-card__nameline {
  display: flex;
  align-items: baseline;
  gap: var(--exl-space-2);
  flex-wrap: wrap;
}
.exl-card__name {
  font-weight: 800;
  font-size: var(--exl-text-lg);
  line-height: 1.375;
}
/* エリア / ホール / ブースの行 */
.exl-card__meta {
  display: flex;
  align-items: center;
  gap: var(--exl-space-2);
  flex-wrap: wrap;
  margin-top: 6px;
  font-size: var(--exl-text-sm);
}
.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;
}

/* 見どころ（2 行で切り詰め） */
.exl-card__highlight {
  font-size: var(--exl-text-sm);
  color: var(--exl-ink-600);
  line-height: 1.625;
  margin-top: var(--exl-space-2);
}

/* タグの行 */
.exl-card__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: var(--exl-space-2);
}
.exl-card__tags:empty { display: none; }
.exl-tag-lang {
  font-size: var(--exl-text-2xs);
  background: var(--exl-accent-lang-bg);
  color: var(--exl-accent-lang-text);
  border: 1px solid var(--exl-accent-lang-line);
  padding: 2px 10px;
  border-radius: var(--exl-radius-pill);
  font-weight: 700;
}
.exl-tag-student {
  font-size: var(--exl-text-2xs);
  background: var(--exl-accent-student-bg);
  color: var(--exl-accent-student-text);
  border: 1px solid var(--exl-accent-student-line);
  padding: 2px 10px;
  border-radius: var(--exl-radius-pill);
  font-weight: 700;
}
.exl-tag-country {
  font-size: var(--exl-text-2xs);
  background: var(--exl-ink-100);
  color: var(--exl-ink-600);
  border: 1px solid var(--exl-line);
  padding: 2px var(--exl-space-2);
  border-radius: var(--exl-radius-pill);
  font-weight: 500;
}

/* 右側: ロゴ or ブース番号バッジ + シェブロン */
.exl-card__aside {
  display: flex;
  align-items: center;
  gap: var(--exl-space-2);
  flex-shrink: 0;
}
.exl-logo {
  width: var(--exl-logo-size);
  height: var(--exl-logo-size);
  border-radius: var(--exl-radius-lg);
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--exl-line);
  padding: 6px;
}
/* ロゴが登録されていない出展者は、エリアカラーの淡い枠にブース番号を出す */
.exl-boothbox {
  width: var(--exl-logo-size);
  height: var(--exl-logo-size);
  border-radius: var(--exl-radius-lg);
  border: 1px solid;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--exl-space-1);
}
.exl-boothbox__label {
  font-size: 8px;
  letter-spacing: 0.25em;
  font-weight: 700;
  opacity: .7;
}
.exl-boothbox__num {
  font-size: 13px;
  font-weight: 800;
  font-family: var(--exl-font-mono);
  font-style: italic;
}
.exl-chevron {
  /* 詳細リンク有効（公開企業）の唯一の目印なので、罫線色（ink-300）より濃くして
     気付けるようにする（2026-08-22 確定。薄く戻さないこと） */
  color: var(--exl-ink-500);
  font-size: var(--exl-text-lg);
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * 11. 出展者カード ― コンパクト表示（高密度・一覧性重視）
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.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__student {
  font-size: var(--exl-text-2xs);
  flex-shrink: 0;
}
.exl-compact__toggle {
  flex-shrink: 0;
  font-size: var(--exl-text-2xs);
  font-weight: 700;
  color: var(--exl-ink-500);
  border: 1px solid var(--exl-ink-300);
  border-radius: var(--exl-radius-pill);
  padding: var(--exl-space-1) var(--exl-space-2);
  transition: background-color .15s;
  white-space: nowrap;
}
.exl-compact__toggle:hover { background: var(--exl-ink-100); }
.exl-compact__chevron { flex-shrink: 0; }

/* コンパクト表示の子出展者（トグルで開閉） */
.exl-compact__children {
  border-top: 1px solid var(--exl-ink-100);
  background: rgba(250, 250, 249, .6);
  padding: var(--exl-space-2) var(--exl-space-4);
}
.exl-compact__children[hidden] { display: none; }
.exl-compact__children /* 孫出展者（子がさらに子を持つ場合）。子の下に 1 段だけインデントして並べる */
.exl-children__list--nested {
  margin-top: var(--exl-space-1);
  margin-left: var(--exl-space-2);
  padding-left: var(--exl-space-3);
  border-left: 1px solid var(--exl-line);
}
.exl-children__list--nested .exl-child {
  color: var(--exl-ink-500);
}

.exl-child { font-size: var(--exl-text-xs); }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * 12. 共同出展（子出展者）
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.exl-children {
  margin-top: var(--exl-space-3);
  border-radius: var(--exl-radius-md);
  background: var(--exl-ink-50);
  border: 1px solid var(--exl-ink-100);
  padding: var(--exl-space-3) var(--exl-space-4);
}
.exl-children__head {
  font-size: var(--exl-text-2xs);
  font-weight: 700;
  color: var(--exl-ink-500);
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}
.exl-children__count { color: var(--exl-ink-400); }
.exl-children__list {
  display: flex;
  flex-direction: column;
  gap: var(--exl-space-1);
  align-items: flex-start;
}
.exl-child {
  display: block;
  font-size: var(--exl-text-sm);
  color: var(--exl-ink-700);
  text-align: left;
  transition: color .15s;
  cursor: default;
}
.exl-child.is-openable { cursor: pointer; }
.exl-child.is-openable:hover {
  color: var(--exl-ink-900);
  text-decoration: underline;
}
.exl-child__bullet {
  color: var(--exl-ink-300);
  margin-right: var(--exl-space-1);
}
.exl-child__booth {
  font-size: 9px;
  color: var(--exl-ink-400);
  font-family: var(--exl-font-mono);
  font-style: italic;
  margin-left: var(--exl-space-1);
}
.exl-child__student {
  font-size: 9px;
  margin-left: var(--exl-space-1);
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * 13. ページャ・空状態
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.exl-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--exl-space-4);
  margin-top: var(--exl-space-8);
}
.exl-pager__btn {
  padding: var(--exl-space-2) var(--exl-space-5);
  font-size: var(--exl-text-base);
  font-weight: 700;
  border: 1px solid var(--exl-ink-300);
  border-radius: var(--exl-radius-md);
  background: var(--exl-surface);
  text-decoration: none;
  display: inline-block;
  transition: background-color .15s;
}
.exl-pager__btn:hover { background: var(--exl-ink-50); }
.exl-pager__btn.is-disabled {
  opacity: .3;
  cursor: not-allowed;
  pointer-events: none;
}
.exl-pager__range {
  font-size: var(--exl-text-base);
  font-weight: 700;
}
.exl-pager__total {
  color: var(--exl-ink-400);
  font-weight: 400;
}

.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);
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * 14. モーダル ― 共通
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.exl-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--exl-space-4);
  overflow-y: auto;
  background: rgba(0, 0, 0, .3);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.exl-modal[hidden] { display: none; }

.exl-modal__panel {
  background: var(--exl-surface);
  border: 1px solid var(--exl-line);
  border-radius: var(--exl-radius-xl);
  box-shadow: var(--exl-shadow-modal);
  width: 100%;
  max-width: 672px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  margin: auto;
  animation: exl-modal-in .2s ease-out;
}
@keyframes exl-modal-in {
  from { opacity: 0; transform: translateY(16px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.exl-modal__header {
  background: var(--exl-ink-900);
  color: #fff;
  border-radius: var(--exl-radius-xl) var(--exl-radius-xl) 0 0;
  padding: var(--exl-space-5) var(--exl-space-6);
  position: relative;
  flex-shrink: 0;
}
.exl-modal__close {
  position: absolute;
  top: var(--exl-space-4);
  right: var(--exl-space-4);
  width: 32px;
  height: 32px;
  border-radius: var(--exl-radius-pill);
  background: rgba(255, 255, 255, .2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .15s;
}
.exl-modal__close:hover { background: rgba(255, 255, 255, .3); }
.exl-modal__close svg { width: 16px; height: 16px; }

.exl-modal__body {
  padding: var(--exl-space-5) var(--exl-space-6);
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * 15. モーダル ― 出展者詳細
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.exl-detail__loading {
  display: flex;
  align-items: center;
  gap: var(--exl-space-3);
  font-size: var(--exl-text-base);
}
.exl-spinner {
  width: 20px;
  height: 20px;
  border: 3px solid rgba(255, 255, 255, .25);
  border-top-color: #fff;
  border-radius: 50%;
  animation: exl-spin .8s linear infinite;
  flex-shrink: 0;
}
@keyframes exl-spin { to { transform: rotate(360deg); } }

.exl-detail__head {
  display: flex;
  align-items: center;
  gap: var(--exl-space-4);
  padding-right: 40px;
}
.exl-detail__headtext {
  min-width: 0;
  flex: 1 1 0%;
}
.exl-detail__name {
  font-size: var(--exl-text-lg);
  font-weight: 800;
  line-height: 1.375;
}
.exl-detail__kana {
  font-size: var(--exl-text-sm);
  color: var(--exl-ink-300);
  margin-top: 2px;
}
.exl-detail__pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--exl-space-2);
  margin-top: var(--exl-space-2);
  font-size: var(--exl-text-sm);
}
.exl-detail__pill {
  background: rgba(255, 255, 255, .2);
  border-radius: var(--exl-radius-pill);
  padding: 2px var(--exl-space-2);
  font-weight: 700;
}

.exl-detail__section { margin-bottom: var(--exl-space-5); }
.exl-detail__section:last-child { margin-bottom: 0; }
.exl-detail__visual {
  border-radius: var(--exl-radius-lg);
  overflow: hidden;
  border: 1px solid var(--exl-line);
}
.exl-detail__visual img { display: block; width: 100%; height: auto; }
.exl-detail__copy {
  font-size: var(--exl-text-base);
  font-weight: 700;
  font-style: italic;
}
.exl-detail__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.exl-detail__tag {
  font-size: var(--exl-text-sm);
  background: var(--exl-ink-100);
  color: var(--exl-ink-700);
  border: 1px solid var(--exl-line);
  padding: 2px 10px;
  border-radius: var(--exl-radius-pill);
  font-weight: 500;
}
.exl-detail__h4 {
  font-size: var(--exl-text-xs);
  font-weight: 700;
  color: var(--exl-ink-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--exl-space-2);
}
.exl-detail__text {
  font-size: var(--exl-text-base);
  color: var(--exl-ink-700);
  line-height: 1.625;
  white-space: pre-wrap;
}
.exl-detail__product {
  font-size: var(--exl-text-base);
  color: var(--exl-ink-700);
  border-left: 2px solid var(--exl-ink-400);
  padding: var(--exl-space-1) 0 var(--exl-space-1) var(--exl-space-3);
  margin-bottom: var(--exl-space-2);
}
.exl-detail__product-name { font-weight: 700; }
.exl-detail__product-desc {
  font-size: var(--exl-text-sm);
  color: var(--exl-ink-500);
  margin-top: 2px;
}
.exl-detail__link {
  display: inline-flex;
  align-items: center;
  gap: var(--exl-space-2);
  font-size: var(--exl-text-base);
  font-weight: 700;
  color: var(--exl-ink-700);
  text-decoration: underline;
}
.exl-detail__link:hover { color: var(--exl-ink-900); }
.exl-detail__footer {
  padding-top: var(--exl-space-3);
  border-top: 1px solid var(--exl-ink-100);
  display: flex;
  flex-wrap: wrap;
  gap: var(--exl-space-1) var(--exl-space-6);
  font-size: var(--exl-text-2xs);
  color: var(--exl-ink-400);
}
.exl-detail__footer code { font-family: var(--exl-font-mono); font-style: italic; }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * 16. モーダル ― 製品カテゴリ選択
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.exl-modal__panel--wide {
  max-width: 896px;
  max-height: 88vh;
}
.exl-catmodal__header {
  padding: var(--exl-space-4) var(--exl-space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--exl-space-4);
}
.exl-catmodal__title {
  font-size: var(--exl-text-lg);
  font-weight: 800;
}
.exl-catmodal__sub {
  font-size: var(--exl-text-xs);
  color: var(--exl-ink-300);
  margin-top: 2px;
}
.exl-catmodal__headright {
  display: flex;
  align-items: center;
  gap: var(--exl-space-3);
}
/* カテゴリモーダルの閉じるボタンは右上固定ではなく、見出しの並びに置く */
.exl-catmodal__header .exl-modal__close {
  position: static;
  flex-shrink: 0;
}
/* OR / AND 切替 */
.exl-catmodal__mode {
  display: flex;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: var(--exl-radius-md);
  overflow: hidden;
  font-size: var(--exl-text-xs);
  font-weight: 700;
}
.exl-catmodal__mode-btn {
  padding: 6px var(--exl-space-3);
  background: transparent;
  color: rgba(255, 255, 255, .8);
  transition: background-color .15s, color .15s;
  white-space: nowrap;
}
.exl-catmodal__mode-btn:hover { background: rgba(255, 255, 255, .1); }
.exl-catmodal__mode-btn.is-on {
  background: #fff;
  color: var(--exl-ink-900);
}

.exl-catgroup { margin-bottom: var(--exl-space-6); }
.exl-catgroup:last-child { margin-bottom: 0; }
.exl-catgroup__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--exl-space-2);
  border-bottom: 1px solid var(--exl-line);
  padding-bottom: 6px;
  margin-bottom: 10px;
}
.exl-catgroup__name {
  font-size: 13px;
  font-weight: 800;
  color: var(--exl-ink-800);
}
.exl-catgroup__toggle {
  font-size: var(--exl-text-2xs);
  font-weight: 700;
  color: var(--exl-ink-500);
  text-decoration: underline;
  transition: color .15s;
}
.exl-catgroup__toggle:hover { color: var(--exl-ink-800); }
.exl-catgroup__grid {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: var(--exl-space-4);
  row-gap: 6px;
}
.exl-catitem {
  display: flex;
  align-items: flex-start;
  gap: var(--exl-space-2);
  cursor: pointer;
  padding: var(--exl-space-1) 6px;
  border-radius: 6px;
  transition: background-color .15s;
}
.exl-catitem:hover { background: var(--exl-ink-50); }
.exl-catitem.is-checked { background: var(--exl-ink-100); }
.exl-catitem input[type="checkbox"] {
  margin-top: 2px;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  accent-color: var(--exl-ink-900);
  cursor: pointer;
}
.exl-catitem__name {
  font-size: var(--exl-text-sm);
  line-height: 1.375;
  color: var(--exl-ink-700);
  flex: 1 1 0%;
  min-width: 0;
}
.exl-catitem__count {
  font-size: var(--exl-text-2xs);
  font-family: var(--exl-font-mono);
  font-style: italic;
  flex-shrink: 0;
  color: var(--exl-ink-400);
}
.exl-catitem__count.is-zero { color: var(--exl-ink-300); }

.exl-catmodal__footer {
  border-top: 1px solid var(--exl-line);
  padding: 14px var(--exl-space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--exl-space-3);
  flex-shrink: 0;
  background: var(--exl-ink-50);
  border-radius: 0 0 var(--exl-radius-xl) var(--exl-radius-xl);
}
.exl-catmodal__footright {
  display: flex;
  align-items: center;
  gap: var(--exl-space-2);
}
.exl-btn-text {
  font-size: var(--exl-text-sm);
  font-weight: 700;
  color: var(--exl-ink-500);
  text-decoration: underline;
  transition: color .15s;
}
.exl-btn-text:hover { color: var(--exl-ink-800); }
.exl-btn-ghost {
  padding: var(--exl-space-2) var(--exl-space-4);
  font-size: 13px;
  font-weight: 700;
  border: 1px solid var(--exl-ink-300);
  border-radius: var(--exl-radius-md);
  background: var(--exl-surface);
  color: var(--exl-ink-600);
  transition: background-color .15s;
}
.exl-btn-ghost:hover { background: var(--exl-ink-100); }
.exl-btn-primary {
  padding: var(--exl-space-2) var(--exl-space-5);
  font-size: 13px;
  font-weight: 700;
  border-radius: var(--exl-radius-md);
  background: var(--exl-ink-900);
  color: #fff;
  transition: background-color .15s;
}
.exl-btn-primary:hover { background: var(--exl-ink-800); }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * 17. レスポンシブ
 *    640px 以上 = 大きめのスマートフォン / 小型タブレット
 *    768px 以上 = タブレット
 *   1024px 以上 = PC（サイドバーが横に並ぶ）
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 640px) {
  .exl-catgroup__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@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;
    /* サイト共通ヘッダー（.header-2026、スクロール追従時 position:fixed）は
       メインバー80px + サブナビ42pxで約122px。--exl-space-6(24px)のままだと
       固定ヘッダーの下に潜ってしまうため、ヘッダー分を空けてから追従させる */
    top: 136px;
  }
  .exl-catgroup__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

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

/* スマートフォン: ロゴを小さくして 1 行に収める */
@media (max-width: 480px) {
  .exl-root { --exl-logo-size: 64px; }
  .exl-header__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--exl-space-2);
  }
  .exl-card__full {
    gap: var(--exl-space-3);
    padding: var(--exl-space-3);
    padding-left: calc(var(--exl-space-3) + var(--exl-areabar-width));
  }
  .exl-card__full .exl-areabar {
    top: var(--exl-space-3);
    bottom: var(--exl-space-3);
  }
  .exl-modal { padding: 0 var(--exl-space-2); }
  .exl-modal__body { padding: var(--exl-space-4); }
  .exl-catmodal__header { flex-wrap: wrap; }
}