/* DB一覧の「定番の枠」 /ai-jirei・/ai-kyujin・/ai-fukugyo（＋ /ai-tools のスマホの頭の詰め）   2026-10-05
   チャット「AInfo DB一覧の最初の画面」。作業フォルダ ~/Desktop/【保存】Claude Code/AInformation/94_DB一覧の最初の画面_20261005/

   ・枠のHTMLは wp-content/mu-plugins/aidbf-famous.php がサーバー側で先に出す（JSで作ると一覧が下へずれるため）。
   ・見た目の値は /ai-tools の「定番のAI」（aitools.css の .famous／.ftile）と同じ。色・角丸・影は各ページの変数を使う。
   ・検索や絞り込みをすると各ページのJSが枠ごと隠す（hidden）。
   ・クラス名は全部 dbf-。各ページの `.akx a{…}` `.jrx button{…}`（0-1-1）に勝たせるため、必ず `.dbf .dbf-◯◯` と2つ重ねて書く。
   ・このファイルと aidbf-famous.php を消せば、枠もスマホの頭の詰めも無くなって元へ戻る。 */

.dbf{background:var(--card,#fff);border-radius:var(--r,10px);
  box-shadow:var(--sh,0 1px 2px rgba(13,27,42,.05),0 6px 16px rgba(13,27,42,.06));
  padding:15px 17px 17px;margin:0 0 16px;color:var(--txt,#12212e)}
.dbf[hidden]{display:none!important}
.dbf .dbf-ttl{margin:0;padding:0;border:0;background:none;font-size:16.5px;font-weight:900;letter-spacing:.01em;line-height:1.4;color:inherit}
.dbf .dbf-ttl::before,.dbf .dbf-ttl::after{content:none}
.dbf .dbf-sub{margin:3px 0 12px;font-size:12.5px;color:var(--sub,#61707d);line-height:1.6}

/* ---- タイル（/ai-tools の .ftile と同じ値） ---- */
.dbf .dbf-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:9px;margin:0;padding:0}
.dbf .dbf-tiles--role{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.dbf .dbf-tiles--type{grid-template-columns:repeat(auto-fill,minmax(152px,1fr))}
.dbf .dbf-tile{display:block;padding:10px 12px 11px;border-radius:var(--r,10px);background:#f4f8fa;
  border:1px solid transparent;color:inherit;text-decoration:none;min-width:0;
  transition:background .15s,border-color .15s,box-shadow .15s}
.dbf .dbf-tile:hover{background:#e9f2f8;box-shadow:var(--sh,0 1px 2px rgba(13,27,42,.05),0 6px 16px rgba(13,27,42,.06))}
.dbf .dbf-tile.on{background:#fff;border-color:var(--sky,#1AC2F1);box-shadow:var(--sh,0 1px 2px rgba(13,27,42,.05),0 6px 16px rgba(13,27,42,.06))}
.dbf .dbf-tile:focus-visible,.dbf .dbf-chip:focus-visible{outline:2px solid var(--sky,#1AC2F1);outline-offset:2px}
/* 名前が2行になるときは行の長さをそろえる（「データサイエンティス／ト」のように1字だけ落ちるのを防ぐ） */
.dbf .dbf-nm{display:block;font-size:13.5px;font-weight:800;line-height:1.3;overflow-wrap:break-word;text-wrap:balance;color:var(--txt,#12212e)}
.dbf .dbf-tx{display:block;font-size:11.5px;color:var(--sub,#61707d);margin:6px 0 0;line-height:1.5}
.dbf .dbf-pr{display:block;font-size:12px;font-weight:700;color:var(--sky-d,#0E9BC4);margin-top:1px;line-height:1.5;word-break:keep-all}
/* 事例のタイルは題が長い。3行で止める */
.dbf .dbf-tiles--case .dbf-tx{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}

/* ---- 事例：押した会社の事例をその場で開く ---- */
.dbf .dbf-det{margin:10px 0 0}
.dbf .dbf-det[hidden]{display:none}
.dbf .dbf-det .jr-list{grid-template-columns:minmax(0,1fr)}

/* ---- 2段目の入口（ツールから探す／名前を知られた会社） ---- */
.dbf .dbf-lab{margin:15px 0 7px;font-size:12px;font-weight:700;color:var(--sub,#61707d);line-height:1.5}
.dbf .dbf-chips{display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0}
.dbf .dbf-chip{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:6px 13px;border-radius:999px;
  background:#f4f8fa;color:var(--txt,#12212e);font-size:12.5px;font-weight:700;line-height:1.4;text-decoration:none;
  white-space:nowrap;transition:background .15s}
.dbf .dbf-chip:hover{background:#e0e9f0}
.dbf .dbf-chip span{font-size:11px;font-weight:400;color:var(--sub,#61707d)}

/* JSが一覧を入れるまでの間、一覧の場所を先に空けておく（下のFAQが押し下げられるのを防ぐ）。
   各ページのJSが一覧のクラスを付け直すので、描いたあとは自然な高さに戻る */
.akx .ak-list.dbf-wait,.ajx .aj-list.dbf-wait{min-height:1400px}

@media (max-width:860px){
  .dbf .dbf-tiles{grid-template-columns:repeat(auto-fill,minmax(172px,1fr))}
  .dbf .dbf-tiles--type{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
}
@media (max-width:560px){
  .dbf{padding:13px 13px 15px;margin-bottom:14px}
  .dbf .dbf-ttl{font-size:15.5px}
  /* スマホは説明の1行を出さない。そのぶんタイルが最初の1画面に入る */
  .dbf .dbf-sub{display:none}
  .dbf .dbf-tiles,.dbf .dbf-tiles--role,.dbf .dbf-tiles--type{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:7px;margin-top:9px}
  .dbf .dbf-tile{padding:9px 10px 10px}
  .dbf .dbf-nm{font-size:12.5px}
  .dbf .dbf-tx{font-size:11px;margin-top:5px}
  .dbf .dbf-pr{font-size:11.5px}
  .dbf .dbf-tiles--case .dbf-tx{-webkit-line-clamp:2}
  /* 2段目は1行で横に流す（「よく使う条件」の帯と同じ動き）。折り返すと5〜6行になって一覧が遠くなる */
  .dbf .dbf-lab{margin-top:13px}
  .dbf .dbf-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -13px;padding:1px 13px;-webkit-overflow-scrolling:touch}
  .dbf .dbf-chips::-webkit-scrollbar{display:none}
  .dbf .dbf-chip{flex:none;min-height:42px}

  /* ===== スマホの頭を詰める（2026-10-05） =====
     ヘッダー・カテゴリ帯・速報の帯で203px使ったあと、ページの頭が278〜296pxあり、
     一覧は Safari の帯が出ている画面（高さ592px）に1pxも入っていなかった。
     題と最終更新を1行に、数字の札2枚を1行ずつの小さい札にして、/ai-tools の頭（195px）と同じ高さへ寄せる */
  .akx .ak-hd,.jrx .jr-hd,.ajx .aj-hd{padding:14px 0 12px}
  .akx .ak-hdtop,.jrx .jr-hdtop,.ajx .aj-hdtop{gap:9px 36px}
  .akx .ak-hdl,.jrx .jr-hdl,.ajx .aj-hdl{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 12px}
  .akx .ak-ttl,.jrx .jr-ttl,.ajx .aj-ttl{font-size:29px;margin:0}
  .jrx .jr-ttl{font-size:27px}   /* 題が長いので、最終更新と同じ行に入る大きさにする */
  .akx .ak-upd,.jrx .jr-upd,.ajx .aj-upd{font-size:11.5px}
  .akx .ak-kpi,.jrx .jr-kpi,.ajx .aj-kpi{gap:8px}
  /* 数字の札は「数字の下に説明1行」のまま小さくする（横に並べると説明が3行に折れて読みにくかった） */
  .akx .ak-kpi .ak-k,.jrx .jr-kpi .jr-k,.ajx .aj-kpi .aj-k{padding:7px 12px 8px}
  .akx .ak-kpi .ak-k .n,.jrx .jr-kpi .jr-k .n,.ajx .aj-kpi .aj-k .n{font-size:22px}
  .akx .ak-kpi .ak-k .n small,.jrx .jr-kpi .jr-k .n small,.ajx .aj-kpi .aj-k .n small{font-size:11.5px;margin-left:2px}
  .akx .ak-kpi .ak-k .t,.jrx .jr-kpi .jr-k .t,.ajx .aj-kpi .aj-k .t{margin-top:2px;font-size:10.5px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .akx .ak-hd .ak-sbox,.jrx .jr-hd .jr-sbox,.ajx .aj-hd .aj-sbox{margin-top:10px}
  .akx .ak-hd .ak-sbox input,.jrx .jr-hd .jr-sbox input,.ajx .aj-hd .aj-sbox input{padding-top:11px;padding-bottom:11px}
  .akx .ak-body,.jrx .jr-body,.ajx .aj-body{padding-top:14px}

  /* /ai-tools も同じ考え方で少しだけ詰める（頭の余白・説明の1行）。Safari の帯が出ている画面でもタイルの1段目が入る。
     aitools.css の `body .hd`（0-1-1）に勝たせるため `body .ai-tools .hd` と書く */
  body .ai-tools .hd{padding:14px 0 12px}
  body .ai-tools .fresh{margin:6px 0 10px}
  .ai-tools .wrap.body{padding-top:14px}
  .ai-tools .famous .fsub{display:none}
  .ai-tools .famous .ftiles{margin-top:9px}
}
/* 幅375pxの端末（iPhone SE など）は、事例ナビの題と最終更新が1行に入らず頭が21px伸びていた */
@media (max-width:380px){
  .jrx .jr-ttl{font-size:25px}
}
@media (prefers-reduced-motion:reduce){
  .dbf .dbf-tile,.dbf .dbf-chip{transition:none}
}