/* ─────────────────────────────────────────────────────────────────
   finder-shell.css — IFA Finder 共通シェル
   中央540pxカラム / 左右バナー / ナビバー / フッター を各ページで再利用する。
   マークアップは finder-shell.js が注入する（バナー・ヘッダー・フッター）。

   使い方:
     <link rel="stylesheet" href="finder-shell.css">
     <script defer src="auth-nav.js"></script>
     <script defer src="finder-shell.js"></script>
     <body>
       <div class="pc_bg">
         <div class="pc_content">
           <header data-finder-header></header>
           <main> ...ページ固有コンテンツ... </main>
           <footer data-finder-footer></footer>
         </div>
       </div>

   ページ固有のスタイルは各ページの <style> 側に置く。
   ───────────────────────────────────────────────────────────────── */

/* ── Design tokens ─────────────────────────────────────────────── */
:root {
  --ink:        rgb(34, 34, 34);
  --ink-2:      #50556b;
  --ink-3:      #71778c;
  --ink-4:      #98a0b0;
  --bg-page:    rgb(247, 249, 252);
  --bg-card:    #ffffff;
  --bg-soft:    #f4f6fb;
  --bg-muted:   #eef1f7;
  --border:     #e3e7ef;
  --border-strong: #cfd5e1;

  --primary:        #0071e3;     /* IFA Tools blue */
  --primary-hover:  #004ea8;
  --primary-soft:   #e8f2fd;
  --primary-ink:    #ffffff;

  --accent:         #e8a957;     /* IFA amber (CTA highlight) */
  --accent-soft:    #fdf3e1;
  --accent-ink:     #5a3e15;

  --success:        #2c7a55;
  --success-soft:   #e3f3ea;
  --star:           #f0a93b;

  /* Avatar deterministic palette (calm) */
  --av-1: #4f6c9e;
  --av-2: #5b8a7a;
  --av-3: #c2904a;
  --av-4: #a06864;
  --av-5: #7a6a9c;
  --av-6: #4c7d8a;

  --r-sm: 10px;
  --r:    14px;
  --r-lg: 18px;
  --r-xl: 22px;
  --r-full: 999px;

  --sh-1: 0 1px 2px rgba(15,23,42,.05);
  --sh-2: 0 1px 2px rgba(15,23,42,.05), 0 6px 18px rgba(15,23,42,.06);

  --font-sans:
    "Helvetica Neue", Arial,
    "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    Meiryo, sans-serif;
  --font-num: "Inter", var(--font-sans);
}

/* ── Reset ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; width: 100%; scroll-behavior: smooth; }
body {
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: normal;
  margin: 0;
  width: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background-color: #E6DFD3;
}
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; color: inherit; }
a { color: inherit; text-decoration: none; }
input, select, textarea { font-family: inherit; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }

/* ── Utility classes ─────────────────────────────────────────────── */
.pos_f   { position: fixed; }
.wid_180 { width: 180px; }
.wid_300 { width: 300px; }
.tex-a_c { text-align: center; }

/* ── Main centered column ────────────────────────────────────────── */
.pc_bg {
  position: relative;
  min-height: 100vh;
}
.pc_content {
  position: relative;
  background-color: #FAF8F5;
  min-height: 100vh;
  overflow: hidden;
  width: 100%;
}
@media screen and (min-width: 781px) {
  .pc_content {
    width: 540px;
    margin: 0 auto;
    box-shadow: rgba(0, 0, 0, 0.18) 0px 8px 28px;
  }
}

/* ── Header ──────────────────────────────────────────────────────── */
.finder-header {
  background-color: #fff;
  box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 8px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  transition: 0.4s;
  z-index: 1001;
}
.nav-info-bar {
  background: #f5f5f7;
  color: #6e6e73;
  font-size: 11px;
  line-height: 1.35;
  text-align: center;
  padding: 5px 16px;
  letter-spacing: 0.01em;
  border-bottom: 1px solid #e0e0e5;
}
.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  height: 52px;
}
@media screen and (min-width: 781px) {
  .finder-header {
    width: 540px !important;
    left: 0;
    right: 0;
    margin-inline: auto;
  }
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.brand-mark {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--primary);
  display: inline-block;
  flex: 0 0 9px;
}
.brand-name { display: flex; flex-direction: column; line-height: 1; }
.brand-name b {
  font-family: 'Manrope', 'Inter', var(--font-sans);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0f172a;
}
.brand-name span {
  font-size: 9.5px;
  letter-spacing: 0.05em;
  color: var(--ink-3);
  margin-top: 3px;
}

.h-actions { display: inline-flex; align-items: center; gap: 4px; }
.h-icon {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 10px;
  color: var(--ink-2);
  font-family: inherit; cursor: pointer;
}
.h-icon:hover { background: var(--bg-muted); color: var(--ink); }
#mypage-btn { display: inline-flex; align-items: center; gap: 6px; }
.nav-login-badge {
  position: relative;
  display: none; align-items: center;
  background: var(--primary-soft); color: var(--primary);
  font-size: 10.5px; font-weight: 700;
  padding: 3px 8px; border-radius: 999px;
  white-space: nowrap;
}
/* カスタムツールチップ：ホバー時即時表示・ブラウザネイティブの遅延なし。
   right:0 でバッジ右端と揃え、左方向に展開（右端でも viewport overflow しにくい）。 */
.nav-login-badge[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 6px); right: 0;
  background: #1d1d1f; color: #fff;
  font-size: 11px; font-weight: 500; letter-spacing: 0.02em;
  padding: 6px 10px; border-radius: 6px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
  z-index: 9999; pointer-events: none;
}

/* Header nav drawer (hamburger) */
#nav-drawer {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: #fff;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 12px 24px rgba(15,23,42,.08);
}
#nav-drawer.open { display: block; }
#nav-drawer a {
  display: block;
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  border-top: 1px solid var(--bg-muted);
}
#nav-drawer a:first-child { border-top: 0; }
#nav-drawer a:hover { color: var(--primary); background: var(--bg-soft); }

/* ── Page scroll offset for fixed header ─────────────────────────── */
.finder-main { padding-top: var(--header-h, 76px); display: flex; flex-direction: column; }

/* ── 共通保存バー（save-bar.js が body 直下に fixed 配置）──
   PC では中央540pxカラム幅に揃える（ヘッダーと同じ配置ルール）。 */
@media screen and (min-width: 781px) {
  #sticky-action-bar { width: 540px !important; left: 0; right: 0; margin-inline: auto; }
}

/* ── Buttons (共通) ──────────────────────────────────────────────── */
.btn {
  appearance: none;
  border: 1px solid transparent;
  background: var(--bg-muted);
  color: var(--ink);
  font-weight: 700;
  font-size: 14px;
  height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  flex: 1;
  transition: background .15s, color .15s, border-color .15s, transform .15s;
  font-family: inherit; cursor: pointer;
}
.btn:hover { transform: translateY(-1px); }
.btn.primary { background: var(--primary); color: #fff; }
.btn.primary:hover { background: var(--primary-hover); }
.btn.accent { background: var(--accent); color: var(--accent-ink); }
.btn.ghost { background: transparent; border-color: var(--border); }
.btn.ghost:hover { background: var(--bg-muted); }
.btn.lg { height: 52px; font-size: 15px; }
.btn.block { width: 100%; }

/* ── Badges (共通) ───────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--bg-muted);
  color: var(--ink-2);
  border: 1px solid currentColor;   /* 文字色と同色の枠線をデフォルト化（カード内・単独問わず統一） */
  line-height: 1.4;
  white-space: nowrap;
}
.badge.success { background: var(--success-soft); color: var(--success); }
.badge.primary { background: var(--primary-soft); color: var(--primary); }
.badge.warn    { background: #fffbeb; color: #b45309; }   /* IFA募集中：黄オレンジ系 */
.badge.outline { background: transparent; border: 1px solid var(--border); color: var(--ink-2); }
/* 提携証券チップ：灰・角丸4px・薄い枠線（var(--border)=#e3e7ef でカード枠と同トーン）。
   padding を 3px に詰めて枠線(1px×2)分を相殺し、チップ高さ25pxを維持
   （.firm-card の固定高228px / .firm-secs max-height:56px=26×2+gap4 に収める）。 */
.badge.sec { background: #f1f5f9; color: #475569; border: 1px solid var(--border); border-radius: 4px; padding: 3px 10px; font-size: 12px; font-weight: 400; }

/* ── List / card primitives（法人・証券・プロフィール カード等で共通）──
   search.html のリスト系スタイルを共通化。一覧ページはこれを参照して
   件数バー・条件チップ・カード枠を統一できる。 */
.ctrl {
  border: 1px solid var(--border); border-radius: 10px;
  padding: 9px 12px; font-size: 14px; background: #fff;
  color: var(--ink); font-family: inherit; outline: none;
}
.ctrl:focus { border-color: var(--primary); }

.result-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.result-range { font-size: 12.5px; color: var(--ink-2); }
.result-range b { color: var(--primary); font-weight: 700; font-family: var(--font-num); }

/* 入力済み条件チップ＋区切り線（search.html と同じ縦積み・1チップ1行） */
.cond-summary { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.filter-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600; color: var(--primary);
  background: var(--primary-soft); border: 1px solid var(--primary);
  padding: 3px 4px 3px 9px; border-radius: 999px; white-space: nowrap;
}
.filter-chip.muted { color: var(--ink-3); background: var(--bg-muted); border-color: var(--border); padding-right: 9px; }
.filter-chip .k { color: var(--ink-4); font-weight: 700; }
.chip-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border: 0; border-radius: 50%;
  background: transparent; color: inherit; cursor: pointer; padding: 0; opacity: .7;
}
.chip-x:hover { background: rgba(0,0,0,.08); opacity: 1; }
.cond-divider { border-top: 1px solid var(--border); margin-top: 14px; width: 100%; }

/* カード共通シェル：枠/余白/角丸/影/ホバー/見出し/メタ行を統一。
   表示内容（行構成）はカード種別ごとに各ページで組む。 */
.fcard {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--border); border-radius: var(--r);
  padding: 16px; text-align: left; width: 100%;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.fcard:hover { border-color: var(--border-strong); box-shadow: var(--sh-1); transform: translateY(-1px); }
.fcard-name { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.4; padding-right: 36px; }
.fcard-meta { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-sans); font-size: 12px; color: var(--ink-2); margin-top: 8px; }
.fcard-meta b { color: var(--ink); font-weight: 700; }
.fcard-meta svg { color: var(--ink-4); flex: 0 0 auto; }
.fcard-chev {
  position: absolute; top: 14px; right: 14px;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--bg-soft); color: var(--ink-4);
  display: inline-flex; align-items: center; justify-content: center;
}
.fcard:hover .fcard-chev { background: var(--primary-soft); color: var(--primary); }

/* ── IFA法人カード（search.html 由来・複数ページ共通）────────────────
   高さ固定カード。表示項目が欠けても各スロットの縦位置がずれないよう、
   上部の項目は min-height で枠を確保し、バッジ帯は常に最下部に固定する。
   法人名は 1 行＋三点リーダーで詰めて IFAプロフィールカード(.advisor-card)に
   高さを近づける。 */
.firm-list { display: flex; flex-direction: column; gap: 10px; }
.firm-card {
  position: relative;
  display: flex; flex-direction: column;
  height: 228px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--r);
  padding: 16px; overflow: hidden;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.firm-card:hover { border-color: var(--border-strong); box-shadow: var(--sh-1); transform: translateY(-1px); }
/* 右上：法人プロフィール掲載密度スコア（★最大5）。★のみスコア表示色（金）。 */
.firm-score {
  position: absolute; top: 16px; right: 14px;
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px;
  font-family: var(--font-sans);
  font-size: 12px; font-weight: 600; color: var(--ink-2);
  white-space: nowrap; text-align: left;
}
.firm-score .stars { color: var(--star); letter-spacing: 1px; font-size: 12px; line-height: 1; }
.firm-name {
  margin: 0; font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.4;
  /* 右上 .firm-score は現状★1個プレースホルダーなので 38px で十分（約3文字分長く表示可能）。
     スコアを★最大5個に拡張する際は 80px 前後へ戻す必要あり。 */
  padding-right: 38px; min-height: 21px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.firm-pref { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-sans); font-size: 12px; color: var(--ink-2); margin-top: 10px; min-height: 17px; }
.firm-count { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-sans); font-size: 12px; color: var(--ink-2); margin-top: 8px; min-height: 17px; }
.firm-count.is-private { color: var(--ink-4); }
.firm-count svg, .firm-pref svg { color: var(--ink-4); flex: 0 0 auto; }
/* 提携証券バッジ帯：2行ぴったり（チップ26px×2＋行間4px=56px）。3行目は隠れる。
   先頭の .firm-sec-count は admin-firm 提携証券会社セクションと同じ銀行SVG＋「N社」。 */
.firm-secs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; min-height: 26px; max-height: 56px; overflow: hidden; align-content: flex-start; }
.firm-sec-count {
  display: inline-flex; align-items: center; gap: 4px;
  /* 都道府県名(.firm-pref)と同じ font-family / size / weight に揃える */
  font-family: var(--font-sans);
  font-size: 12px; color: var(--ink-3);
  padding: 0 6px 0 0;
}
.firm-sec-count svg { color: var(--ink-4); flex: 0 0 auto; }
/* Inter 数字は Noto Sans JP より視覚的に下に沈むため translateY で 1px 持ち上げる
   (.firm-sec-count は inline-flex なので vertical-align は無効)。 */
.firm-sec-count b { font-family: var(--font-num); font-size: 12px; font-weight: 700; color: var(--ink-2); transform: translateY(-1px); }
/* バッジが 2行に収まらない時に末尾へ JS で挿入される「more...」チップ。
   通常のセクバッジより控えめな見た目（枠なし・ink-3）。 */
.firm-secs .badge.sec.sec-more {
  background: transparent; color: var(--ink-3); border: 0;
  font-style: italic; padding: 0 4px;
}
/* 個々の証券チップは .badge.sec に統一（旧 .firm-sec は廃止） */
.firm-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border); min-height: 42px; align-items: center; }
/* 右下に「メディアリンク N」を寄せる。admin-firm メディアリンクセクションと同じ鎖SVG。
   SVG は中央配置ではなく「メディアリンク」テキストの左隣（同じ行）に置く。 */
.firm-media-count {
  margin-left: auto;
  display: inline-flex; flex-direction: column; align-items: flex-end;
  font-size: 10px; line-height: 1.2; color: var(--ink-3); text-align: right;
  white-space: nowrap;
}
.firm-media-count .row { display: inline-flex; align-items: center; gap: 3px; }
.firm-media-count svg { color: var(--ink-4); flex: 0 0 auto; }
.firm-media-count b { font-family: var(--font-num); font-size: 12px; font-weight: 700; color: var(--ink-2); }

/* ── IFAプロフィールカード（index.html 注目のアドバイザー由来・複数ページ共通）──
   ifa-list.html のカードレイアウトに準拠。 */
.advisor-list { display: flex; flex-direction: column; gap: 14px; }
.advisor-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px;
  display: flex; flex-direction: column; gap: 14px;
  transition: border-color .15s, box-shadow .15s, transform .15s;
  cursor: pointer;
}
.advisor-card:hover { border-color: var(--border-strong); box-shadow: var(--sh-2); }
/* カード内部（ifa-list.html のカードと共通レイアウト） */
.ifa-head { display: flex; align-items: center; gap: 12px; }
.ifa-id { flex: 1; min-width: 0; }
.ifa-nm { margin: 0; font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.4; }
.ifa-ql { margin: 2px 0 0; font-size: 11px; color: var(--ink-4); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ifa-chev {
  flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%;
  background: var(--bg-soft); color: var(--ink-4);
  display: inline-flex; align-items: center; justify-content: center;
}
.ifa-pref { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); }
.ifa-pref svg { color: var(--ink-4); flex: 0 0 auto; }
.ifa-badges { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 12px; border-top: 1px solid var(--bg-muted); min-height: 33px; }
/* アバター（決定的パレット・サイズ変種） */
.avatar {
  flex: 0 0 56px; width: 56px; height: 56px; border-radius: 50%;
  background: var(--av-1); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-family: var(--font-num); font-size: 20px; letter-spacing: 0.02em;
}
.avatar.av-1 { background: var(--av-1); }
.avatar.av-2 { background: var(--av-2); }
.avatar.av-3 { background: var(--av-3); }
.avatar.av-4 { background: var(--av-4); }
.avatar.av-5 { background: var(--av-5); }
.avatar.av-6 { background: var(--av-6); }
.avatar.lg { flex: 0 0 80px; width: 80px; height: 80px; font-size: 28px; }
.avatar.sm { flex: 0 0 36px; width: 36px; height: 36px; font-size: 13px; }
/* タグ行（相談手段バッジ等） */
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; }

/* ── 法人ヘッダー（詳細ページ上部：法人名・都道府県・公式サイト・バッジ）──
   firm-profile（法人詳細）と ifa-list（所属法人ヘッダー）で共有。
   マークアップは firm-header.js の buildFirmHeader() が生成する。 */
.firm-detail-name { font-size: 22px; font-weight: 700; color: #0f172a; margin: 0 0 8px; }
.firm-detail-pref { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: #475569; margin: 0 0 12px; }
.firm-detail-pref svg { color: #94a3b8; flex-shrink: 0; }
.firm-detail-pref:empty { display: none; }
.firm-detail-website { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.firm-detail-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }

/* ── 詳細ページ本文の左端ライン（ifa-profile / firm-profile 等で共通）──
   中央540pxカラム内で左右 20px のガターを取り、各セクション本文は左右 padding 0 で
   見出しと同じ左端ラインに揃える（カードのインセットを作らない）。
   上下余白・枠線の有無などページ固有の調整は各ページの #view-* 側で行う。 */
.detail-wrap { padding: 20px 24px; }
.detail-wrap section > div:not(.section-header) { padding-left: 0 !important; padding-right: 0 !important; }

/* ── 条件入力モーダル＋検索フォーム部品（search.html / securities 共通）──
   右上の条件入力ボタン(FAB)・モーダル枠・検索パネル/フィールド・バッジ
   チェック・提携証券会社リストを共通化。各ページはこの部品でモーダルを組む。 */
.filter-fab-wrap {
  position: fixed; top: calc(var(--header-h, 76px) + 10px); left: 0; right: 0;
  z-index: 1000; pointer-events: none;
  display: flex; justify-content: flex-end; padding: 0 12px;
}
@media screen and (min-width: 781px) { .filter-fab-wrap { width: 540px; left: 0; right: 0; margin-inline: auto; } }
.filter-open-btn {
  pointer-events: auto;
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--primary); color: #fff; border: 0;
  font-size: 13px; font-weight: 700; padding: 10px 16px; border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0, 113, 227, .32);
  transition: background .15s, transform .15s; cursor: pointer;
}
.filter-open-btn:hover { background: var(--primary-hover); transform: translateY(-1px); }

.modal-overlay { position: fixed; inset: 0; z-index: 2000; background: rgba(15, 23, 42, .45); display: none; }
.modal-overlay.open { display: flex; align-items: flex-end; justify-content: center; }
@media screen and (min-width: 781px) { .modal-overlay.open { align-items: center; } }
.modal-panel {
  /* 中央540pxカラムと同じ幅・画面高さの95%。PC/SP とも中央カラム内に収まる。 */
  position: relative;
  background: #fff; width: 100%; max-width: 540px; height: 95vh; max-height: 95vh; overflow: hidden;
  border-radius: 18px 18px 0 0; box-shadow: 0 -8px 40px rgba(0, 0, 0, .2);
  display: flex; flex-direction: column;
}
/* モーダル右上の×（○で囲んだ閉じるボタン）。
   modal-body のスクロールバー外側に出すため modal-panel 基準の絶対配置に固定。
   z-index で本文より前面に置き、padding-top で本文先頭の食い込みを避ける。
   HTML 側は従来通り .modal-body 内に .modal-close-row を置けばよい
   （祖先 .modal-panel が position:relative なのでそのまま絶対配置が効く）。 */
.modal-close-row {
  /* スクロールバー幅(~15px)を確実に避けるため right を 20px に。
     modal-body 内スクロール出現時でも × が常にバーの左側に置かれる。 */
  position: absolute; top: 10px; right: 20px; z-index: 50;
  display: flex; justify-content: flex-end; margin: 0;
}
.modal-close {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--border); background: #fff; color: var(--ink-2);
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; cursor: pointer; transition: background .15s, color .15s, border-color .15s;
  flex: 0 0 30px;
  box-shadow: 0 1px 4px rgba(15,23,42,.08);  /* スクロール背景に重なっても視認可 */
}
/* インライン SVG の width/height 属性を CSS で縮小（HTML 側は触らない） */
.modal-close svg { width: 14px; height: 14px; }
.modal-close:hover { background: var(--bg-muted); color: var(--ink); border-color: var(--border-strong); }
@media screen and (min-width: 781px) { .modal-panel { border-radius: 18px; } }
.modal-body { padding: 14px 12px; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.modal-body .search-panel { box-shadow: none; border: 0; padding: 0; margin: 0; }
.modal-foot { flex: 0 0 auto; background: #fff; padding: 12px 14px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 8px; }
.modal-foot .search-btn { margin-top: 0; flex: 0 0 70%; width: 70%; }
.modal-cancel {
  flex: 1; min-width: 0; height: 52px; border: 1px solid var(--border);
  background: var(--bg-muted); color: var(--ink-2); border-radius: 12px;
  font-size: 14px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer;
}
.modal-cancel:hover { background: var(--border); color: var(--ink); }

.search-panel {
  margin: 24px auto 0; background: #fff; border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--sh-2); padding: 8px;
  display: flex; flex-direction: column; gap: 0; text-align: left; position: relative; z-index: 1;
}
.search-field { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 12px; }
.search-field + .search-field { border-top: 1px solid var(--border); border-radius: 0; }
.search-field .lbl { font-size: 11px; font-weight: 700; color: var(--ink-3); letter-spacing: 0.04em; display: block; margin-bottom: 2px; }
.search-field .ctrl { border: 0; outline: none; background: transparent; font-size: 15px; color: var(--ink); width: 100%; padding: 0; font-family: inherit; }
.search-field .icon { color: var(--ink-3); flex: 0 0 18px; margin-top: 2px; }
.search-btn {
  margin-top: 8px; height: 52px; width: 100%;
  background: var(--primary); color: #fff; border: 0; border-radius: 12px;
  font-size: 15px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  letter-spacing: 0.02em; cursor: pointer;
}
.search-btn:hover { background: var(--primary-hover); }
.badge-filter { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.badge-check { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border: 1px solid var(--border); border-radius: 999px; font-size: 11px; font-weight: 600; color: var(--ink-2); background: #fff; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.badge-check input { width: 13px; height: 13px; accent-color: var(--primary); margin: 0; flex-shrink: 0; }
.badge-check:has(input:checked) { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); }
/* 色付きバッジチェック（カードのバッジ配色で常時表示・選択してもチェックが付くだけで色は不変） */
.badge-check.bc-success { background: var(--success-soft); color: var(--success); border-color: currentColor; }
.badge-check.bc-warn    { background: #fffbeb;           color: #b45309;        border-color: currentColor; }
.badge-check.bc-primary { background: var(--primary-soft); color: var(--primary); border-color: currentColor; }
.badge-check.bc-success input { accent-color: var(--success); }
.badge-check.bc-warn input    { accent-color: #b45309; }
.badge-check.bc-primary input { accent-color: var(--primary); }
.badge-check.bc-success:has(input:checked) { background: var(--success-soft); color: var(--success); border-color: currentColor; }
.badge-check.bc-warn:has(input:checked)    { background: #fffbeb;           color: #b45309;        border-color: currentColor; }
.badge-check.bc-primary:has(input:checked) { background: var(--primary-soft); color: var(--primary); border-color: currentColor; }
.sec-filter { display: flex; flex-wrap: wrap; gap: 6px; height: 150px; overflow-y: scroll; align-content: flex-start; padding: 2px 6px 4px 0; }

/* ── ページネーション（search.html と共通。アクティブ色は --primary） ── */
.pg-btn {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px; border: 0; background: transparent;
  color: var(--ink-2); font-size: 13px; font-family: var(--font-num); cursor: pointer;
}
.pg-btn svg { width: 15px; height: 15px; }
.pg-btn:not(:disabled):not(.active):hover { background: var(--bg-muted); color: var(--ink); }
.pg-btn:disabled, .pg-btn.disabled { color: var(--border-strong); cursor: default; }
.pg-btn.active { background: var(--primary); color: #fff; font-weight: 700; cursor: default; }
.pg-ellipsis { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; color: var(--ink-4); }

/* ── Footer ──────────────────────────────────────────────────────── */
.finder-footer {
  margin-top: 40px;
  border-top: 1px solid var(--border);
  padding: 24px 20px 32px;
}
.f-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.f-brand b { font-family: 'Manrope', 'Inter', var(--font-sans); font-size: 16px; font-weight: 800; letter-spacing: -0.02em; color: #0f172a; }
.f-tag { font-size: 12px; color: var(--ink-3); line-height: 1.8; margin: 0 0 18px; }

.f-acc-item { border-top: 1px solid var(--border); }
.f-acc-head {
  padding: 16px 4px 10px;
  font-size: 13px; font-weight: 600;
  color: var(--ink);
  margin: 0;
}
.f-acc-body {
  padding: 0 4px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.f-acc-body a {
  font-size: 13px;
  color: var(--ink-2);
}
.f-legal {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--ink-3);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
}

/* ── PC-only side decorations ────────────────────────────────────── */
@media screen and (min-width: 781px) {

  /* LEFT: QR code / app download card */
  .pc-qr-wrap {
    left: calc(25vw - 225px);
    top: 50%;
    transform: translateY(-50%);
    width: 180px;
  }
  .qr-card {
    background: #fff;
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 6px 22px rgba(15,23,42,.12);
    border: 1px solid var(--border);
    text-align: center;
  }
  .qr-card .qr {
    width: 116px; height: 116px;
    margin: 0 auto 10px;
    background: #fff;
    border-radius: 8px;
    padding: 6px;
    border: 1px solid var(--border);
  }
  .qr-card .title {
    font-size: 12px; font-weight: 700;
    color: var(--ink);
    margin-bottom: 4px;
    line-height: 1.45;
  }
  .qr-card .sub {
    font-size: 10.5px;
    color: var(--ink-3);
    line-height: 1.55;
  }

  /* LEFT: vertical "コラムを読む" tab */
  .pc-recruit-info {
    background: #fff;
    border-radius: 16px 0 0 16px;
    border: 1px solid var(--border);
    border-right: 0;
    bottom: 24px;
    right: 0;
    box-shadow: rgba(15,23,42,0.12) 0px 8px 16px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    padding: 16px 14px 20px;
    position: fixed;
    writing-mode: vertical-rl;
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .pc-recruit-info svg { width: 14px; height: 14px; color: var(--primary); }
  .pc-recruit-info:hover { background: var(--bg-soft); }

  /* RIGHT: SNS icons */
  .pc-sns-wrap {
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    position: fixed;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .pc-sns-wrap a {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--border);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--ink-2);
    box-shadow: 0 4px 12px rgba(15,23,42,.06);
    transition: color .15s, transform .15s;
  }
  .pc-sns-wrap a:hover { color: var(--primary); transform: translateY(-1px); }

  /* RIGHT: campaign banner — half-hidden on the right edge */
  .pc-yukyuchi-wrap {
    right: calc(25vw - 260px);
    top: 50%;
    transform: translateY(-50%);
    width: 250px;
  }
}

/* IFA Tools プロモ装飾（PC 右RIGHT バナー .pc-yukyuchi-wrap と
   SP 中央プロモ .sp-promo-banner が共有する内側マークアップのスタイル）。
   メディアクエリ外に置き、PC/SP どちらでも同じ見た目で描画する。 */
.campaign-banner {
  display: block;
  background: linear-gradient(160deg, #f3f9ff 0%, #dbeafb 100%);
  color: #1d1d1f;
  border: 1px solid var(--primary);
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 10px 28px rgba(0,113,227,.14);
  position: relative;
  overflow: hidden;
  transition: transform .15s, box-shadow .15s;
}
.campaign-banner:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(30,58,107,.34); }
.campaign-banner .title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.55;
  position: relative;
}
.campaign-banner .sub {
  /* margin-bottom は <p> の UA デフォルト(1em)を明示。Tailwind の p{margin:0} を
     読むページ(securities/admin)でも search/index と同じ高さになるよう固定。 */
  margin: 8px 0 1em;
  font-size: 11.5px;
  color: #424245;
  line-height: 1.6;
  position: relative;
}
.campaign-banner .pill {
  display: inline-flex;
  margin-top: 12px;
  align-items: center;
  gap: 4px;
  background: #0071e3;
  color: #fff;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  position: relative;
}
.banner-lead {
  margin-bottom: 10px;
  text-align: left;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--ink-2);
}
.banner-lead .badge { margin-bottom: 6px; border: 1px solid var(--primary); }

/* SP 中央プロモ：PC 表示時は非表示（右RIGHT バナーが担当）／
   SP 表示時のみ中央カラム内に出す。各ページが
   <aside data-finder-sp-promo></aside> を置き、finder-shell.js が中身注入。 */
.sp-promo-banner { display: none; }

/* ── SP-only: hide PC decorations / show SP promo ──────────────── */
@media screen and (max-width: 780px) {
  .pc-recruit-info,
  .pc-qr-wrap,
  .pc-sns-wrap,
  .pc-yukyuchi-wrap {
    display: none;
  }
  .sp-promo-banner {
    display: block;
    margin: 24px 20px 8px;
  }
}

/* ── CTA band ────────────────────────────────────────────────────
   ページ末の青系グラデーション CTA バナー。背景は右側キャンペーン
   バナー（.campaign-banner）と同じ配色に揃える。index.html / guide.html
   が共通参照する SSoT。各ページで <div class="cta-band"> に h3 / p / a.btn
   を入れて使う（order 等のレイアウト要件はインラインで指定可）。 */
.cta-band {
  margin: 32px 20px 0;
  background: linear-gradient(160deg, #f3f9ff 0%, #dbeafb 100%);
  border: 1px solid var(--primary);
  color: var(--primary);
  border-radius: var(--r-lg);
  padding: 28px 22px;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(0,113,227,.14);
}
.cta-band h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.005em;
  position: relative;
}
.cta-band p {
  margin: 10px 0 18px;
  font-size: 13px;
  color: var(--primary);
  line-height: 1.8;
  position: relative;
}
