/* 検索結果プロト /searchA〜D 専用レイアウト（.sp- 接頭辞）。
   カードは proto.css の .pp-card/.pp-grid（§1密度改善後）、絞り込みドロワーは topc1.css の .tc1-panel を流用。
   ここは結果ページ固有の chrome（1行ヘッダー・件数/サマリ・グリッド/リスト/サイドバー/マガジン・もっと見る・空状態）。 */

/* ===== 1行結果ヘッダー（キーワード＋絞り込み＋並び替え） ===== */
.sp-bar{position:sticky;top:0;z-index:50;background:rgba(15,16,20,.96);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--pp-line);padding:10px 16px}
.sp-bar-in{max-width:1180px;margin:0 auto;display:flex;gap:10px;align-items:center}
.sp-logo{flex:none;font-size:18px;font-weight:900;letter-spacing:.3px;color:#fff;text-decoration:none;white-space:nowrap}
.sp-logo .m{color:var(--pp-gold)}
.sp-logo-d{display:none}
.sp-search{flex:1;min-width:0;display:flex;border-radius:10px;overflow:hidden;border:1px solid var(--pp-line)}
.sp-search input{flex:1;min-width:0;border:0;padding:11px 14px;font-size:15px;background:#fff;color:#111}
.sp-search input:focus{outline:none}
.sp-search button{border:0;background:var(--pp-gold);color:#0f1014;font-weight:800;padding:0 16px;cursor:pointer}
.sp-kw-clear{flex:none;border:0;background:transparent;color:var(--pp-mut2);font-size:18px;
  cursor:pointer;padding:0 8px;line-height:1;display:flex;align-items:center;justify-content:center}
.sp-kw-clear[hidden]{display:none!important}
.sp-kw-clear:hover{color:var(--pp-text)}
.sp-filter-btn{flex:none;display:inline-flex;align-items:center;gap:6px;background:var(--pp-card);
  border:1px solid var(--pp-line);color:var(--pp-text);border-radius:10px;padding:0 14px;height:42px;
  font-weight:700;font-size:14px;cursor:pointer;white-space:nowrap}
.sp-filter-btn:hover{border-color:var(--pp-gold)}
.sp-sort{flex:none;height:42px;border-radius:10px;border:1px solid var(--pp-line);background:var(--pp-card);
  color:var(--pp-text);padding:0 10px;font-size:13.5px;cursor:pointer}
.sp-kw-wrap{position:relative;flex:1;min-width:0}

/* ===== 軸ページの冒頭事実文（LLMO No.1/No.3）＝h1＋事実段落。/search では出ない（listing_title無し） ===== */
.sp-listing-head{margin:2px 0 12px}
.sp-listing-head .sp-h1{font-size:22px;font-weight:900;color:var(--pp-text);margin:0 0 6px;line-height:1.32}
.sp-listing-head .sp-lead{font-size:14px;color:var(--pp-mut);margin:0;line-height:1.6;max-width:900px}
/* ===== サービス別ページの新着ハイライト（旧 featured 引き継ぎ） ===== */
.sp-featured{margin:0 0 22px}
.sp-featured-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 10px}
.sp-featured-h h2{font-size:16px;font-weight:800;color:var(--pp-text);margin:0}
.sp-featured-h a{font-size:13px;color:var(--pp-gold);text-decoration:none;white-space:nowrap}
.sp-allh{font-size:16px;font-weight:800;color:var(--pp-text);margin:18px 0 10px}
@media(max-width:640px){
  .sp-listing-head .sp-h1{font-size:18px}
  .sp-listing-head .sp-lead{font-size:12.5px}
}

/* ===== 件数＋選択中サマリ ===== */
.sp-wrap{max-width:1180px;margin:0 auto;padding:14px 16px 80px}
.sp-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:4px 0 16px}
.sp-count{font-size:15px;color:var(--pp-mut)}
.sp-count b{color:var(--pp-gold);font-size:18px}
.sp-count .q{color:var(--pp-text);font-weight:700}
.sp-summary{display:flex;gap:6px;flex-wrap:wrap}

/* ===== 結果コンテナ ===== */
.sp-results{margin-top:4px}

/* B: 詳細リスト行 */
.sp-list{display:flex;flex-direction:column;gap:12px}
.sp-row{display:flex;gap:14px;background:var(--pp-bg2);border:1px solid var(--pp-line);border-radius:12px;
  padding:12px;text-decoration:none;color:var(--pp-text);transition:border-color .15s}
.sp-row:hover{border-color:var(--pp-gold)}
.sp-row-img{flex:0 0 92px;width:92px;height:138px;object-fit:cover;border-radius:8px;background:var(--pp-bg2)}
.sp-row-img.noimg{display:flex;align-items:center;justify-content:center;text-align:center;font-size:11px;
  color:var(--pp-mut);padding:6px}
.sp-row-body{min-width:0;display:flex;flex-direction:column;gap:6px}
.sp-row-title{font-size:16px;font-weight:700;line-height:1.3}
.sp-row-title .yr{color:var(--pp-mut2);font-weight:400;font-size:13px}
.sp-row-meta{display:flex;gap:6px;flex-wrap:wrap;font-size:11.5px;color:var(--pp-mut)}
.sp-row-meta span{background:var(--pp-card);border:1px solid var(--pp-line);padding:2px 8px;border-radius:6px}
.sp-row-desc{font-size:13px;color:var(--pp-mut);line-height:1.6;margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sp-row-prov{display:flex;gap:4px;flex-wrap:wrap;margin-top:auto}

/* C: 開閉サイドバー。上1行バー=スティッキー固定（z-index60）／サイドバー=その下からスティッキー＋
   独立スクロール（重なり解消）。開=左サイドバー＋右グリッド(C)／閉=サイドバー非表示・グリッド全幅で列数増(A)。
   既定=閉（グリッド先）。開閉は localStorage 記憶。スマホ(≤820)はサイドバー概念なし＝全画面オーバーレイのまま。 */
.sp-shell{display:block}
/* 上1行バー直下に出す選択中サマリ（C・スクロール追従で常に見える） */
.sp-bar-summary{max-width:1180px;margin:7px auto 0}
.sp-bar-summary:empty{display:none}
.sp-bar-summary .tc1-summary{margin:0}
/* トグルボタンの開閉インジケータ（C・PC） */
.sp-filter-btn .sp-ar{font-size:11px;transition:transform .2s;display:inline-block}
.sp-filter-btn[aria-expanded="true"] .sp-ar{transform:rotate(180deg)}

/* PC(≥1000px)のみサイドバー開閉。iPad(834)以下は全画面オーバーレイ＝モバイル従来どおり（サイドバー開閉はPC専用概念） */
@media(min-width:1000px){
  /* 開いている時だけ2カラム。閉は全幅（=A・列数自動増） */
  .sp-c .sp-shell.is-open{display:grid;grid-template-columns:300px 1fr;gap:22px;align-items:start}
  .sp-c .sp-shell:not(.is-open) .tc1-panel{display:none}
  .sp-c .sp-shell.is-open .tc1-panel{position:sticky;top:calc(var(--sp-bar-h, 62px) + 14px);
    max-height:calc(100vh - var(--sp-bar-h, 62px) - 28px);
    width:100%;max-width:none;transform:none;box-shadow:none;border:1px solid var(--pp-line);
    border-radius:14px;display:flex;flex-direction:column}
  /* .tc1-panel-b は topc1.css で flex:1;overflow-y:auto 済＝サイドバー内で独立スクロール（ヘッダー/フッターは固定） */
  .sp-c .tc1-panel .close{display:none}
  .sp-c .tc1-panel-h .tc1-kw-wrap{display:none}      /* キーワードは上バー専用＝サイドバーには入れない */
  .sp-c .tc1-panel-h{justify-content:flex-start;gap:8px}
  .sp-c .tc1-panel-h::before{content:"🎚️ 絞り込み";font-weight:800;color:var(--pp-text);font-size:15px}
}
/* 上1行バーをサイドバーより前面に（スクロール時の重なり解消） */
.sp-bar{z-index:60}
/* iPad(834)以下：Cの絞り込みは全画面オーバーレイ（topc1.cssの412px右ドロワーをCのみ全画面化＝モバイル従来どおり） */
@media(max-width:999px){
  .sp-c .tc1-panel{top:0;left:0;right:0;bottom:0;width:100%;max-width:100%;height:100%;border-radius:0;border-left:0}
}
/* サイドバー内の閉じる×ボタン（PC docked時のみ表示。モバイル/A-Dでは非表示） */
.sp-c-close{display:none}
@media(min-width:1000px){
  .sp-c .sp-c-close{display:inline-flex;align-items:center;justify-content:center;
    margin-left:auto;flex:none;width:26px;height:26px;
    background:transparent;border:1px solid var(--pp-line);border-radius:7px;
    color:var(--pp-mut2);font-size:14px;line-height:1;cursor:pointer}
  .sp-c .sp-c-close:hover{border-color:var(--pp-gold);color:var(--pp-text)}
}
/* サイドバー独立スクロール領域のカスタムスクロールバー（C限定・他に波及しない） */
.sp-c .tc1-panel-b{scrollbar-width:thin;scrollbar-color:var(--pp-line) transparent}
.sp-c .tc1-panel-b::-webkit-scrollbar{width:5px}
.sp-c .tc1-panel-b::-webkit-scrollbar-track{background:transparent}
.sp-c .tc1-panel-b::-webkit-scrollbar-thumb{background:var(--pp-line);border-radius:999px}
.sp-c .tc1-panel-b::-webkit-scrollbar-thumb:hover{background:var(--pp-gold)}

/* D: マガジン（先頭1件を大きく） */
.sp-hero{display:flex;gap:18px;background:radial-gradient(700px 240px at 0% 0%,rgba(245,197,24,.13),transparent),var(--pp-bg2);
  border:1px solid var(--pp-line);border-radius:18px;padding:18px;margin-bottom:18px;text-decoration:none;color:var(--pp-text)}
.sp-hero:hover{border-color:var(--pp-gold)}
.sp-hero img{flex:0 0 132px;width:132px;height:198px;object-fit:cover;border-radius:12px;box-shadow:var(--pp-shadow)}
.sp-hero .noimg{flex:0 0 132px;width:132px;height:198px;border-radius:12px;background:var(--pp-bg);display:flex;
  align-items:center;justify-content:center;text-align:center;color:var(--pp-mut);font-size:12px;padding:8px}
.sp-hero-body{min-width:0;display:flex;flex-direction:column;gap:9px}
.sp-hero-lab{color:var(--pp-gold);font-weight:800;font-size:12px;letter-spacing:.1em}
.sp-hero-title{font-size:24px;font-weight:900;line-height:1.25}
.sp-hero-title .yr{color:var(--pp-mut2);font-weight:400;font-size:15px}
.sp-hero-meta{display:flex;gap:7px;flex-wrap:wrap;font-size:12px;color:var(--pp-mut)}
.sp-hero-meta span{background:var(--pp-card);border:1px solid var(--pp-line);padding:3px 9px;border-radius:7px}
.sp-hero-desc{font-size:14px;color:var(--pp-mut);line-height:1.7;margin:0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.sp-hero-prov{display:flex;gap:5px;flex-wrap:wrap;margin-top:auto}

/* ===== もっと見る / ページ送り ===== */
.sp-more-wrap{text-align:center;margin:26px 0 0}
.sp-more{display:inline-block;background:var(--pp-card);border:1px solid var(--pp-line);color:var(--pp-text);
  font-weight:800;font-size:15px;padding:13px 34px;border-radius:12px;text-decoration:none;cursor:pointer}
.sp-more:hover{border-color:var(--pp-gold);background:#23262f}
.sp-more[hidden]{display:none}
.sp-end{color:var(--pp-mut2);font-size:13px;text-align:center;margin-top:22px}
/* JS無効時のフォールバック・クローラ用の素のページ送り（プログレッシブエンハンスメント） */
.sp-pagenav{display:flex;gap:14px;justify-content:center;align-items:center;margin-top:18px;font-size:14px}
.sp-pagenav a{color:var(--pp-gold);text-decoration:none;border:1px solid var(--pp-line);border-radius:8px;padding:8px 16px}
.sp-pagenav .pg{color:var(--pp-mut2)}

/* ===== 空状態 ===== */
.sp-empty{text-align:center;padding:46px 16px;color:var(--pp-mut)}
.sp-empty .em{font-size:40px;display:block;margin-bottom:10px}
.sp-empty h2{font-size:18px;color:var(--pp-text);margin:0 0 8px}
.sp-empty p{font-size:14px;margin:4px 0}
.sp-empty .sp-empty-links{margin-top:16px;display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
/* B-3: C のPC（≥1000px・サイドバー常時開）では「絞り込みを調整」は冗長＝非表示（左サイドバーで調整可）。
   スマホ（C=既定閉）/ A・B・D は表示＝押すと全画面オーバーレイ/ドロワーを開く。 */
@media(min-width:1000px){.sp-c .sp-empty-filter{display:none}}

/* ===== プロト相互リンクの小バー ===== */
.sp-protonav{max-width:1180px;margin:0 auto;padding:8px 16px;display:flex;gap:8px;flex-wrap:wrap;align-items:center;
  font-size:12px;color:var(--pp-mut2);border-bottom:1px dashed var(--pp-line)}
.sp-protonav a{color:var(--pp-mut);text-decoration:none;border:1px solid var(--pp-line);border-radius:999px;padding:3px 11px}
.sp-protonav a.on{background:var(--pp-gold);color:#0f1014;border-color:var(--pp-gold);font-weight:700}

/* ===== レスポンシブ ===== */
@media(max-width:640px){
  .sp-bar{padding:8px 12px}
  .sp-bar-in{gap:6px} /* 1行：D＋検索枠(flex:1)＋絞り込み＋並び替え */
  .sp-logo{font-size:15px;letter-spacing:0}
  .sp-logo-full{display:none}  /* スマホ＝D 1文字のみ */
  .sp-logo-d{display:inline}
  .sp-search input{padding:10px 10px;font-size:14px}
  .sp-search button{padding:0 10px}
  .sp-filter-btn{padding:0 10px;height:40px;font-size:13px}
  .sp-filter-btn .lbl{display:none}      /* スマホはアイコンのみ */
  .sp-sort{height:40px;font-size:12px;padding:0 2px 0 6px} /* 3文字最小幅 */
  .sp-kw-clear{display:none!important} /* スマホでは×ボタン非表示 */
  .sp-wrap{padding:12px 12px 70px}
  .sp-hero{flex-direction:column;align-items:center;text-align:center}
  .sp-hero img,.sp-hero .noimg{flex-basis:auto}
  .sp-hero-prov{justify-content:center}
  .sp-row-img{flex-basis:78px;width:78px;height:117px}
  .sp-row-title{font-size:15px}
}