/* PATONARI（パトナリ） — 共通の見た目（2026-11-12 第2版）
   参考：PIVOT（ビジネス映像メディア）・JOBTV（企業の動画メディア）を 1440px で測った値。
     画像が主役の棚（16:9・角 8px・題 16px の2行）／見出し 24px と「すべて表示 ›」／
     ランキングは大きな順位の数字／冒頭は画像を大きく／一覧は左に画像・右に題と情報。
   第2版（代表「PIVOT 感がない・わくわくしない・白が目立ちすぎ」）：ヘッダー・冒頭・ランキングを暗い帯にした。
   第3版（2026-11-13 代表「メインカラーがショッキングオレンジみたいな色ってどうなの？これAIっぽくない？」）：
     操作の部品（ボタン・選んだ札・順位の数字・リンク・チェック）は白・黒・灰色にし、色は写真に任せる（PIVOT・JOBTV も色はロゴと主なボタンだけ）。
     色はロゴの点（--brand）だけ。段の間を 48→56px、見出しの下を 16→20px に。
   使わない物：見出しの左の色の縦線・グラデーション・影・絵文字。
   画像：各本部の OGP 画像（実在を確かめた物だけ）。無い募集は業種の写真（Unsplash License）に事業名を重ねる。
   文字は6段（12・13・14・16・24・36）、余白は 4・8・16・24・32、角は 4（札）・8（画像・入力）・12（面）。 */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@600;700;800&family=Noto+Sans+JP:wght@400;500;600;700;800&display=swap");

:root{
  --dark:#0f1115; --dark-2:#1a1d24; --dark-line:rgba(255,255,255,.12); --on-dark:#fff; --on-dark-sub:rgba(255,255,255,.66);
  --bg:#f2f3f5; --paper:#fff; --fill:#e8eaee; --ink:#1d2027; --sub:#5d626b; --mute:#8b9098;
  --line:rgba(17,24,39,.09); --line-2:rgba(17,24,39,.18);
  --brand:#c9a26b;   /* ロゴの点だけに使う、彩度を落とした色。操作の部品には使わない */
  --act:#16181d; --act-hover:#2d3038;   /* 明るい面の操作の色（黒） */
  --gut:32px; --sec:56px; --maxw:1280px; --maxw-dt:1120px;
  --ja:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI",Meiryo,sans-serif;
  --num:"Inter","Noto Sans JP",sans-serif;
}
@media (max-width:767px){:root{--gut:16px;--sec:40px}}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--ja);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3,p,ul,ol,dl,dd,figure,blockquote{margin:0;padding:0}
ul,ol{list-style:none}
h1,h2,h3{font-weight:700;line-height:1.3;word-break:auto-phrase}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
table{border-collapse:collapse;width:100%}
button,select,input{font:inherit;color:inherit}
.num{font-family:var(--num);font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{padding-left:var(--gut);padding-right:var(--gut);max-width:calc(var(--maxw) + var(--gut) * 2);margin-left:auto;margin-right:auto}
.clip1{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.clip2{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.clip3{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}

/* ---------- ヘッダー（暗い帯・全幅。ロゴは左、並びは右） ----------
   2026-11-14 代表「右上のさがすというボタンはやっぱり不要」「ヘッダーはフルワイドでよくない？」→「探すを消して、ヘッダーの要素を右に寄せる」
   「ヘッダーの色合いはかえなくてよかった」「いろはかえないで」。色は元のまま（一度白にして戻した）。中身の幅（.wrap）に収めず、画面の端から 32px に置く */
.hd{position:sticky;top:0;z-index:30;background:var(--dark);color:var(--on-dark);border-bottom:1px solid var(--dark-line)}
.hd-in{display:flex;align-items:center;gap:32px;height:60px;padding:0 32px}
/* ロゴは文字だけのワードマーク（site/assets/brand/patonari-logo.svg を build.py が埋め込む。色は currentColor） */
.logo{flex:none;display:block;color:var(--on-dark);line-height:0}
/* 大きさ：代表「ロゴは大きくして欲しい」（2026-11-14。17→24px・スマホ 15→20px） */
.logo svg{display:block;width:auto;height:24px}
@media (max-width:767px){.logo svg{height:20px}}
.gnav{display:flex;align-items:center;gap:2px;min-width:0;overflow-x:auto;scrollbar-width:none}
.gnav::-webkit-scrollbar{display:none}
.gnav a{flex:none;padding:8px 12px;border-radius:4px;font-size:14px;font-weight:600;color:var(--on-dark-sub);white-space:nowrap}
.gnav a:hover{color:var(--on-dark);background:var(--dark-2)}
.gnav a[aria-current]{color:var(--on-dark)}
@media (min-width:961px){.gnav{margin-left:auto}}   /* 並びを右に寄せる（スマホは2段目に全幅で並ぶ） */
.hq{flex:none;display:flex;align-items:center;gap:8px;width:320px;height:40px;margin-left:auto;padding:0 12px;border-radius:8px;background:var(--dark-2);border:1px solid var(--dark-line)}
.hq svg{flex:none;width:18px;height:18px;color:var(--on-dark-sub)}
.hq input{flex:1;min-width:0;border:0;background:transparent;color:var(--on-dark);font-size:14px;outline:0}
.hq input::placeholder{color:var(--on-dark-sub)}
.hq:focus-within{border-color:rgba(255,255,255,.6)}
@media (max-width:1240px){.hq{width:240px}}
@media (max-width:960px){
  .hd-in{height:auto;flex-wrap:wrap;gap:6px 16px;padding:12px var(--gut) 8px}
  .hq{order:3;width:100%;margin-left:0}
  .gnav{order:2;flex:1 1 100%;margin:0 -12px}
}

/* ---------- 暗い帯（冒頭・ランキング・詳細の上） ---------- */
.band{background:var(--dark);color:var(--on-dark)}
.band .sec-h h2{color:var(--on-dark)}
.band .more{color:var(--on-dark-sub)}
.band .more:hover{color:var(--on-dark)}
.band .card .t1{color:var(--on-dark)}
.band .card .t2{color:var(--on-dark-sub)}
.band .bc,.band .bc a{color:var(--on-dark-sub)}
.band .pg-h p{color:var(--on-dark-sub)}
.band-pad{padding-top:36px;padding-bottom:48px}

/* 冒頭：左に題、右に大きな画像 */
.slide{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px;align-items:center;padding-top:36px}
.slide .tx .k{font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--on-dark-sub)}
.slide .tx h2{margin-top:12px;font-size:38px;line-height:1.25;font-weight:700;letter-spacing:.01em}
.slide .tx .d{margin-top:18px;font-size:15px;line-height:1.85;color:var(--on-dark-sub)}
.slide .tx .cnd{display:flex;flex-wrap:wrap;gap:8px 32px;margin-top:24px;padding-top:20px;border-top:1px solid var(--dark-line)}
.slide .tx .cnd span{display:flex;flex-direction:column}
.slide .tx .cnd small{font-size:12px;color:var(--on-dark-sub)}
.slide .tx .cnd b{margin-top:2px;font-family:var(--num);font-size:22px;font-weight:700}
.slide .tx .go{margin-top:32px}
.slide .pic{display:block}
.slide .pic .th{border-radius:12px}
.slide .pic .th .ov b{font-size:40px}
.dots{display:flex;gap:6px;padding-top:24px}
.dots button{width:28px;height:4px;padding:0;border:0;border-radius:2px;background:rgba(255,255,255,.25);cursor:pointer}
.dots button[aria-selected=true]{background:#fff}
/* 自動の送りで面が替わる時は、短く浮かび上がらせる（動きを減らす設定の人には付けない） */
.slide:not([hidden]){animation:sl-in .45s ease}
@keyframes sl-in{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.slide:not([hidden]){animation:none}}
@media (max-width:960px){
  .slide{grid-template-columns:minmax(0,1fr);gap:20px;padding-top:20px}
  .slide .pic{order:-1}
  .slide .tx h2{font-size:26px}
  .slide .pic .th .ov b{font-size:26px}
}

/* ---------- 段と見出し ---------- */
.main{padding-top:40px;padding-bottom:72px}
.sec{margin-top:var(--sec)}
.sec:first-child{margin-top:0}
.sec-h{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}
.sec-h h2{font-size:24px;min-width:0}
.more{flex:none;display:inline-flex;align-items:center;gap:4px;font-size:14px;font-weight:600;color:var(--sub);white-space:nowrap}
.more::after{content:"";width:6px;height:6px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);margin-left:2px}
.more:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.bc{padding-top:16px;font-size:12px;color:var(--sub)}
.bc ol{display:flex;flex-wrap:wrap;gap:2px 0}
.bc li+li::before{content:"›";margin:0 8px;opacity:.6}
.bc a:hover{text-decoration:underline;text-underline-offset:3px}
.pg-h{padding-top:20px;padding-bottom:28px}
.pg-h h1{font-size:36px;font-weight:800}
.pg-h p{margin-top:10px;max-width:760px;color:var(--sub);font-size:15px;line-height:1.75}
@media (max-width:767px){.pg-h h1{font-size:26px}.sec-h h2{font-size:20px}}

/* ---------- 札（切り替え・絞り込み） ---------- */
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border:1px solid var(--line-2);border-radius:4px;background:var(--paper);
  font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;cursor:pointer}
.pill:hover{border-color:var(--act)}
.pill[aria-pressed=true],.pill[aria-selected=true],.pill[aria-current]{background:var(--act);border-color:var(--act);color:#fff}
.pill .n{font-family:var(--num);font-size:12px;opacity:.6;font-weight:600}
.pill:disabled{opacity:.4;cursor:default}
.pill:disabled:hover{border-color:var(--line-2);color:var(--ink)}
.band .pill{background:transparent;border-color:rgba(255,255,255,.28);color:var(--on-dark)}
.band .pill:hover{border-color:rgba(255,255,255,.7);color:var(--on-dark)}
.band .pill[aria-selected=true],.band .pill[aria-current]{background:#fff;border-color:#fff;color:var(--dark)}

/* ---------- 画像（OGP か、業種の写真に事業名を重ねた物） ---------- */
.th{position:relative;display:block;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:var(--fill)}
.th img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.th .ov{position:absolute;inset:0;display:flex;align-items:flex-end;padding:12px 14px 34px;background:rgba(10,12,16,.38);color:#fff}
.th .ov b{font-size:17px;font-weight:700;line-height:1.35;letter-spacing:.01em;word-break:auto-phrase;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.th .lb{position:absolute;left:8px;bottom:8px;padding:2px 7px;border-radius:4px;background:rgba(10,12,16,.8);color:#fff;font-size:11px;font-weight:700;line-height:1.6}
a:hover .th img{transform:scale(1.04)}
@media (max-width:767px){.th .ov b{font-size:15px}.th .ov{padding:10px 10px 28px}}

/* ---------- 棚（横に流れる行） ---------- */
.shelf{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 20px}
.shelf>*:nth-child(n+5){display:none}
@media (max-width:767px){.shelf{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}}
.card{display:block;min-width:0}
.card .t1{margin-top:10px;font-size:16px;font-weight:600;line-height:1.45}
.card .t2{margin-top:4px;font-size:13px;color:var(--sub)}
.card:hover .t1{text-decoration:underline;text-underline-offset:3px}

/* ランキング：大きな順位の数字 */
.rk-shelf{gap:16px 20px}
.rk{display:grid;grid-template-columns:64px minmax(0,1fr);align-items:end}
.rk .no{font-family:var(--num);font-size:88px;font-weight:700;line-height:.8;color:var(--on-dark);margin-bottom:64px;text-align:left}
.rk .t1{font-size:15px}
.rk .v{font-family:var(--num);font-weight:700;color:var(--on-dark)}
@media (max-width:767px){.rk{grid-template-columns:34px minmax(0,1fr)}.rk .no{font-size:44px;margin-bottom:58px}.rk .t1{font-size:14px}}

/* 業種の札（縦長・写真に業種名） */
.shelf.posters{grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.shelf.posters>*{display:block}
.poster{position:relative;display:block;aspect-ratio:4/3;border-radius:8px;overflow:hidden;background:var(--dark-2)}
.poster img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.poster span{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:14px;background:rgba(10,12,16,.42);color:#fff}
.poster b{font-size:19px;font-weight:800;line-height:1.35;word-break:auto-phrase}
.poster small{margin-top:4px;font-family:var(--num);font-size:13px;opacity:.8}
.poster:hover img{transform:scale(1.05)}
@media (max-width:767px){.shelf.posters{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.poster span{padding:10px}.poster b{font-size:14px}.poster small{font-size:11px}}

/* ---------- ボタン ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 28px;border-radius:8px;background:var(--act);color:#fff;font-size:15px;font-weight:700;white-space:nowrap}
.btn:hover{background:var(--act-hover)}
.band .btn{background:#fff;color:var(--dark)}
.band .btn:hover{background:#e6e7ea}

/* ---------- 一覧の行（左に画像・右に題と情報） ---------- */
.rows-h{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;margin-bottom:8px;font-size:14px;color:var(--sub)}
.rows-h b{font-family:var(--num);font-size:16px;color:var(--ink)}
.rows-h select{height:36px;border:1px solid var(--line-2);border-radius:4px;background:var(--paper);padding:0 10px;font-size:13px}
.row{display:grid;grid-template-columns:288px minmax(0,1fr);gap:24px;padding:20px 0;border-top:1px solid var(--line)}
.rows .row:first-child{border-top:0}
.row h3{font-size:20px;line-height:1.4}
.row h3 a:hover{text-decoration:underline;text-underline-offset:3px}
.row .meta{margin-top:6px;font-size:13px;color:var(--sub)}
.row .cnd{margin-top:10px;font-size:15px;font-weight:700}
.row .cnd.na{font-weight:400;color:var(--mute);font-size:14px}
.row .d{margin-top:8px;font-size:14px;line-height:1.75;color:var(--sub)}
.row.rk-row{grid-template-columns:72px 240px minmax(0,1fr) auto;align-items:center}
.row.rk-row .no{font-family:var(--num);font-size:44px;font-weight:700;color:var(--ink);text-align:left}
.row.rk-row .val{font-family:var(--num);font-size:22px;font-weight:800;text-align:right;white-space:nowrap}
@media (max-width:767px){
  .row{grid-template-columns:132px minmax(0,1fr);gap:12px;padding:14px 0}
  .row .th .ov{display:none}
  .row .th .lb{display:none}
  .row h3{font-size:16px}
  .row .meta{font-size:12px}
  .row .d{display:none}
  .row .cnd{font-size:14px}
  .row.rk-row{grid-template-columns:36px 112px minmax(0,1fr);gap:10px}
  .row.rk-row .no{font-size:26px}
  .row.rk-row .val{grid-column:3;text-align:left;font-size:16px}
}
.empty{padding:40px 0;color:var(--sub);font-size:15px}
.pager{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;padding:28px 0 0}
.pager a,.pager span,.pager button{min-width:40px;height:40px;padding:0 12px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line-2);border-radius:4px;background:var(--paper);font-family:var(--num);font-size:14px;font-weight:600;cursor:pointer}
.pager a:hover,.pager button:hover{border-color:var(--act)}
.pager [aria-current]{background:var(--act);border-color:var(--act);color:#fff}
.pager .gap{border:0;background:none;cursor:default}

/* 2段の組み（本体＋右の列） */
.cols{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:40px;align-items:start}
.cols.l{grid-template-columns:280px minmax(0,1fr)}
@media (max-width:1100px){.cols{grid-template-columns:minmax(0,1fr)}}
@media (max-width:960px){.cols.l{grid-template-columns:minmax(0,1fr)}}
.side>*+*{margin-top:24px}
.stick{position:sticky;top:84px}
@media (max-width:1100px){.stick{position:static}}
.panel{background:var(--paper);border:1px solid var(--line);border-radius:12px}
.panel-b{padding:24px}
.panel h2{font-size:17px;font-weight:700;margin-bottom:12px}
@media (max-width:767px){.panel-b{padding:16px}}
.ln a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid var(--line);font-size:14px;font-weight:600}
.ln li:first-child a{border-top:0}
.ln a:hover{text-decoration:underline;text-underline-offset:3px}
.ln .n{font-family:var(--num);font-size:13px;color:var(--mute);font-weight:600}
.mini{display:grid;grid-template-columns:128px minmax(0,1fr);gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.side li:first-child .mini{border-top:0}
.mini .th .ov{padding:6px 8px 8px}
.mini .th .ov b{font-size:12px}
.mini .th .lb{display:none}
.mini .t{display:block;font-size:14px;font-weight:700;line-height:1.4}
.mini .s{display:block;margin-top:2px;font-size:12px;color:var(--sub)}
.mini:hover .t{text-decoration:underline;text-underline-offset:3px}


/* ---------- 詳細 ---------- */
.dt-band{padding-bottom:40px}
.dt-top{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px;align-items:center;padding-top:20px}
.dt-top .th{border-radius:12px}
.dt-top .th .ov b{font-size:34px}
.dt-top .k{font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--on-dark-sub)}
.dt-top h1{margin-top:10px;font-size:32px;font-weight:700;letter-spacing:.01em}
.dt-top .co{margin-top:10px;font-size:14px;color:var(--on-dark-sub)}
.dt-top .upd{margin-top:4px;font-size:12px;color:var(--on-dark-sub)}
.dt-top .figs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 24px;margin-top:22px}
.dt-top .figs dt{font-size:12px;color:var(--on-dark-sub)}
.dt-top .figs dd{margin-top:2px;font-family:var(--num);font-size:24px;font-weight:800;line-height:1.25;word-break:auto-phrase}
.dt-top .figs dd.s{font-family:var(--ja);font-size:17px}
.dt-top .go{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:26px}
.dt-top .host{font-size:13px;color:var(--on-dark-sub);word-break:break-all}
@media (max-width:960px){.dt-top{grid-template-columns:minmax(0,1fr);gap:20px}.dt-top h1{font-size:26px}.dt-top .th .ov b{font-size:24px}}
@media (max-width:767px){.btn{width:100%}}
.dt-sec>*+*{margin-top:24px}
/* 詳細：黒い帯は全幅のまま、中身は 1,120px に収める。本文と右の列（公式ページへのボタン）、下に同じ業種・同じ地域の募集 */
.dt-w{max-width:calc(var(--maxw-dt) + var(--gut) * 2)}
.cols.dt-cols{grid-template-columns:minmax(0,1fr) 300px;gap:32px}
@media (max-width:1100px){.cols.dt-cols{grid-template-columns:minmax(0,1fr)}}
.cta .k{font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--sub)}
.cta .b{margin-top:6px;font-size:18px;font-weight:700;line-height:1.4;word-break:auto-phrase}
.cta .btn{width:100%;margin-top:16px}
.cta .host{margin-top:10px;font-size:12px;color:var(--sub);word-break:break-all}
.cta .upd{margin-top:2px;font-size:12px;color:var(--mute)}
.kv td b.num{font-size:16px}
.kv .cmp{display:block;margin-top:2px;font-size:13px;color:var(--sub);word-break:auto-phrase}
.dt-rel{margin-top:var(--sec)}
.dt-rel .sec:first-child{margin-top:0}
.kv th,.kv td{padding:14px 0;border-top:1px solid var(--line);text-align:left;vertical-align:top;font-size:14px;line-height:1.7}
.kv tr:first-child>*{border-top:0}
.kv th{width:160px;padding-right:16px;color:var(--sub);font-weight:600}
.kv td .src{display:block;margin-top:4px;font-size:12px;color:var(--sub);word-break:break-all}
.kv td a{text-decoration:underline;text-underline-offset:2px}
.kv .na{color:var(--mute)}
@media (max-width:599px){.kv th{width:100px}}
.quote blockquote{font-size:15px;line-height:1.9}
.quote .src{margin-top:12px;font-size:12px;color:var(--sub)}
.quote .src a{text-decoration:underline;text-underline-offset:2px}
/* 詳細の「募集の要点」（誰の何の募集か・記載のある条件・確認日の1段落） */
.dt-sum p{font-size:15px;line-height:1.9;word-break:auto-phrase;overflow-wrap:anywhere}
.dt-sum a{text-decoration:underline;text-underline-offset:2px}
.panel .note{font-size:13px;line-height:1.7;color:var(--sub)}
.panel .kv+.note{margin-top:10px}

/* ---------- 文章のページ ---------- */
.doc{max-width:880px}
.doc h2{font-size:20px;margin:36px 0 12px}
.doc h2:first-child{margin-top:0}
.doc p{font-size:15px;line-height:1.9}
.doc p+p{margin-top:12px}
.doc .kv{margin:8px 0 12px}

/* ---------- フッター ---------- */
.ft{background:var(--dark);color:var(--on-dark-sub);padding:40px 0 48px;font-size:13px}
.ft ul{display:flex;flex-wrap:wrap;gap:8px 24px;margin:18px 0}
.ft a:hover{color:var(--on-dark)}
.ft p+p{margin-top:6px}
.ft .ft-name{margin-top:10px;color:var(--on-dark-sub)}

/* 文節で折る（「ロイヤリテ／ィ」「大阪／府」のような語の途中の改行を防ぐ） */
.row .meta,.row .cnd,.row .d,.card .t1,.card .t2,.kv td,.mini .t,.mini .s,.slide .tx .d,.pg-h p{word-break:auto-phrase;overflow-wrap:anywhere}

/* スマホでは、ページの上の札の行を横に送る（ランキングの軸・業種が4段にならないように） */
@media (max-width:767px){
  .pg-h .pills{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:calc(var(--gut) * -1);padding-right:var(--gut)}
  .pg-h .pills::-webkit-scrollbar{display:none}
}

/* ---------- ヘッダー右端の「さがす」 ---------- */

/* ---------- 左の検索のサイドバー ---------- */
.sb{position:sticky;top:76px;align-self:start;min-width:0}
.sb-in{max-height:calc(100vh - 96px);overflow:auto;padding:18px 18px 20px;background:var(--paper);border:1px solid var(--line);border-radius:12px;scrollbar-width:thin}
.sb-q{display:flex;align-items:center;gap:8px;height:44px;padding:0 12px;border:1px solid var(--line-2);border-radius:8px;background:var(--paper)}
.sb-q:focus-within{border-color:var(--act)}
.sb-q svg{flex:none;width:18px;height:18px;color:var(--sub)}
.sb-q input{flex:1;min-width:0;border:0;outline:0;background:transparent;font-size:15px}
.fg{margin:16px 0 0;padding:16px 0 0;border:0;border-top:1px solid var(--line)}
.fg legend{float:left;width:100%;margin-bottom:6px;padding:0;font-size:13px;font-weight:700;color:var(--ink)}
.ck{clear:both;display:flex;align-items:center;gap:10px;min-height:32px;font-size:14px;cursor:pointer}
.ck input{flex:none;width:17px;height:17px;margin:0;accent-color:var(--act)}
.ck span{flex:1;min-width:0}
.ck i{font-style:normal;font-family:var(--num);font-size:12px;color:var(--mute)}
.ck:hover span{text-decoration:underline;text-underline-offset:3px}
.ck.zero{opacity:.42}
.ck.x{display:none}
.fg.open .ck.x{display:flex}
/* 札で選ぶ形（中身は checkbox・radio のまま。:has で選んだ札を黒くする） */
.fg .opts{clear:both}
.fg.seg .opts{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
.fg.tile .opts{display:flex;flex-wrap:wrap;gap:6px}
.fg.seg .ck,.fg.tile .ck{position:relative;gap:6px;min-height:34px;padding:5px 10px;border:1px solid var(--line-2);border-radius:6px;background:var(--paper);font-size:13px;line-height:1.35}
.fg.seg .ck{justify-content:space-between;min-height:42px;font-weight:600}
.fg.tile .ck{display:inline-flex}
.fg.tile .ck.x{display:none}
.fg.tile.open .ck.x{display:inline-flex}
.fg.seg .ck input,.fg.tile .ck input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.fg.seg .ck span,.fg.tile .ck span{flex:none}
.fg.seg .ck:hover,.fg.tile .ck:hover{border-color:var(--act)}
.fg.seg .ck:hover span,.fg.tile .ck:hover span{text-decoration:none}
.fg.seg .ck:has(input:checked),.fg.tile .ck:has(input:checked){background:var(--act);border-color:var(--act);color:#fff}
.fg.seg .ck:has(input:checked) i,.fg.tile .ck:has(input:checked) i{color:rgba(255,255,255,.7)}
.fg.tile .ck:has(input[value=""]:checked){background:var(--fill);border-color:var(--fill);color:var(--ink)}
.fg.seg .ck:has(input:focus-visible),.fg.tile .ck:has(input:focus-visible){outline:2px solid var(--act);outline-offset:2px}
.fg.tile .fg-more{flex-basis:100%;text-align:left;margin-top:2px}
/* たためる欄（本部の所在地・規模） */
.fg-box{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.fg-box summary{display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:700;list-style:none;cursor:pointer}
.fg-box summary::-webkit-details-marker{display:none}
.fg-box summary::after{content:"";width:7px;height:7px;margin-right:4px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .2s}
.fg-box[open] summary::after{transform:rotate(-135deg)}
.fg-box .fg:first-of-type{margin-top:12px;padding-top:0;border-top:0}
/* 検索のボタンは、欄をスクロールしなくても見えるように、欄の下に留める（全部のページ。2026-11-14 代表「スクロールしなくても検索というボタンは見えるように」）
   一覧のページは条件を選ぶたびに結果が変わり、ボタンで結果の頭へ移る。トップは条件を重ねてから、ボタンで検索のページへ移る */
.sb-foot{position:sticky;bottom:-20px;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin:18px -18px -20px;padding:12px 18px 18px;background:var(--paper);border-top:1px solid var(--line)}
.fg-more{margin-top:2px;padding:0;border:0;background:none;color:var(--ink);font-size:13px;font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.fg select{width:100%;height:38px;margin-top:8px;padding:0 10px;border:1px solid var(--line-2);border-radius:8px;background:var(--paper);font-size:14px}
.sb .reset{margin-top:0;padding:0;border:0;background:none;color:var(--sub);font-size:13px;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.sb .reset:hover{color:var(--ink)}
.sb-open{display:none}
.sb-done{display:flex;align-items:center;justify-content:center;width:100%;height:46px;border:0;border-radius:8px;background:var(--act);color:#fff;font-size:15px;font-weight:700;cursor:pointer}
.sb-done:disabled{background:var(--fill);color:var(--mute);cursor:default}
@media (max-width:960px){
  .sb{position:static}
  .sb-done{display:flex;height:48px}
  .sb-foot{position:sticky;bottom:0;margin:16px -18px -20px;padding:12px 18px 18px;background:var(--paper);border-top:1px solid var(--line)}
  .sb-open{display:flex;align-items:center;justify-content:center;width:100%;height:46px;border:1px solid var(--line-2);border-radius:8px;background:var(--paper);font-size:15px;font-weight:700;cursor:pointer}
  .sb:not(.open) .sb-in{display:none}
  .sb.open .sb-in{max-height:none;overflow:visible;margin-top:10px}
  /* 条件の欄を開いている間は、チャットボットの起動ボタンと吹き出しを出さない（検索のボタンに重なるため） */
  body.sb-on #shiritai-widget,body.sb-on #shiritai-fab,body.sb-on #shiritai-bubble{display:none!important}
}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.chips button{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border:0;border-radius:4px;background:var(--ink);color:#fff;font-size:13px;font-weight:600;cursor:pointer}
.chips button::after{content:"×";opacity:.7}

/* トップ：左の検索のサイドバーの右に棚（棚は左へはみ出さない） */
.top-main{min-width:0}
.top-main .sec:first-child{margin-top:0}

@media (max-width:960px){.top-main{margin-top:24px}}

/* 特集の一覧 */
.feat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}
.poster.wide{aspect-ratio:16/10}
/* 結果へ移った時に、上に留まるヘッダーの下に件数の行が隠れないように */
.res{scroll-margin-top:96px}
@media (max-width:960px){.res{scroll-margin-top:120px}}

/* ---------- サービス案内（/service/。site/build.py の build_service） ----------
   2026-11-14 代表「このサービスのサービスページも用意して、下記の構成とか余白とか取り方がいいね https://helath.co.jp/lp/shiryo-ai/」で作り、
   同じ日の代表「私がメディアにかける思いや課題認識みたいなものもパトナリなりに考えてみて…サービスページや説明文、メタディスクリプションなど見直す」
   で、考え方（docs/20261114_PATONARIの考え方.md）から組み直した。
   ポケット役場で代表が指摘したこと（「列挙じゃなくて？」「中央揃いがあって変に改行している時点で…」「数字の帯…AIっぽい」）を当て、
   見出しと文は左揃い・手で改行しない（語のまとまりで折る）・数字の帯は置かない。
   余白は参考の LP を 1280px・375px で測った値のまま（かっこ内はスマホ）：
     段の上下 128px（80px）・中身 1200px・小見出し 17px（15px）・見出し 40px／行 1.5（26px）・導入文 17px／行 2.0・幅 760px（15.5px）。
   色はサイトの決まり（白・黒・灰色。色は写真とロゴの点だけ。影・左の色線・グラデーションは使わない）。
   ほかのページの文字の段（12〜36）とは別に、この案内のページだけで使う */
.lp-in{max-width:calc(1200px + var(--gut) * 2)}
.lp-sec{padding:128px 0;background:var(--paper)}
.lp-gray{background:var(--bg)}
.lp-dark{background:var(--dark);color:var(--on-dark)}
.lp-eb{font-size:17px;font-weight:700;letter-spacing:.1em;color:var(--sub)}
.lp-dark .lp-eb,.lp-hero .lp-eb{color:var(--on-dark-sub)}
.lp-h h2{margin-top:20px;font-size:40px;line-height:1.5;font-weight:800;letter-spacing:.03em}
.lp-lead{max-width:760px;margin-top:28px;font-size:17px;line-height:2}
.lp-dark .lp-lead{color:var(--on-dark-sub)}
.lp-text{max-width:760px;margin-top:28px}
.lp-text p{font-size:17px;line-height:2}
.lp-text p+p{margin-top:20px}
.lp-no{display:block;font-family:var(--num);font-size:30px;font-weight:700;line-height:1;color:var(--ink)}
.lp-more{display:inline-flex;margin-top:24px;font-size:15px;font-weight:700;text-decoration:underline;text-underline-offset:4px}
.lp-act{display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px;margin-top:40px}
.lp-cap{margin-bottom:16px;font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--sub)}

/* 冒頭（暗い帯。左に題と文、右に各社の紹介用の画像） */
.lp-hero{display:flex;align-items:center;min-height:calc(100svh - 64px)}
.lp-hero .lp-in{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:56px;align-items:center;width:100%;padding-top:68px;padding-bottom:88px}
.lp-hero .lp-eb{font-size:18px}
.lp-hero h1{margin-top:28px;font-size:clamp(38px,4.2vw,56px);line-height:1.3;font-weight:800;letter-spacing:.02em}
.lp-hero .lp-lead{max-width:600px;margin-top:32px;font-size:18px;color:var(--on-dark-sub)}
.lp-btns{display:flex;flex-wrap:wrap;gap:16px;margin-top:44px}
.lp-dark .btn:not(.lp-ghost){background:#fff;color:var(--dark)}
.lp-dark .btn:not(.lp-ghost):hover{background:#e6e7ea}
.btn.lp-ghost{border:1px solid rgba(255,255,255,.45);background:transparent;color:#fff}
.btn.lp-ghost:hover{background:rgba(255,255,255,.08)}
.lp-pics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.lp-pics a{display:block;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:var(--dark-2)}
.lp-pics a:nth-child(even){transform:translateY(28px)}
.lp-pics img{width:100%;height:100%;object-fit:cover}

/* 組む相手をめぐる課題（実際の呼び方を並べ、両側から見た課題を短い文で） */
.lp-names-cap{margin-top:48px}
.lp-names{display:flex;flex-wrap:wrap;gap:10px;max-width:1000px}
.lp-names span{display:inline-flex;align-items:center;height:38px;padding:0 14px;border:1px solid var(--line-2);border-radius:8px;background:var(--paper);font-size:14px;font-weight:700}
.lp-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:56px}
.lp-two>div{padding:36px 34px 38px;border-radius:12px;background:var(--paper)}
.lp-two h3{font-size:21px;line-height:1.5;font-weight:700}
.lp-two p{margin-top:14px;font-size:16px;line-height:1.95}
.lp-bridge{max-width:900px;margin-top:56px;font-size:24px;line-height:1.8;font-weight:700}

/* 考え方（左に文、右に名前の成り立ち） */
.lp-concept{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:center}
.lp-name{display:grid;justify-items:start;gap:10px;font-family:var(--num);font-weight:800;line-height:1}
.lp-name p{display:flex;align-items:baseline;gap:14px;font-size:64px;letter-spacing:.02em}
.lp-name b{font-weight:800}
.lp-name i{margin-left:-14px;font-style:normal;color:var(--line-2)}
.lp-name small{font-family:var(--ja);font-size:15px;font-weight:700;letter-spacing:0;color:var(--sub)}
.lp-name .x{font-size:32px;color:var(--mute)}
.lp-name .eq{align-items:center;margin-top:14px;padding-top:24px;border-top:1px solid var(--line-2)}
.lp-name .lg{display:block;color:var(--ink)}
.lp-name .lg svg{display:block;height:44px;width:auto}

/* 使う場面（事業の節目ごとの入口。業種の写真・題・中身・件数） */
.lp-scenes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 24px;margin-top:56px}
.lp-scene{display:block;min-width:0}
.lp-scene .im{display:block;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:var(--fill)}
.lp-scene img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.lp-scene:hover img{transform:scale(1.04)}
.lp-scene b{display:block;margin-top:14px;font-size:19px;font-weight:800;line-height:1.45}
.lp-scene .d{display:block;margin-top:6px;font-size:14px;line-height:1.7;color:var(--sub)}
.lp-scene .n{display:block;margin-top:6px;font-family:var(--num);font-size:13px;font-weight:700;color:var(--mute)}
.lp-scene:hover b{text-decoration:underline;text-underline-offset:3px}

/* 4つの組み方（暗い面。左に組み方の説明と両側、右に実際の募集3件） */
.lp-forms{display:grid;gap:80px;margin-top:72px}
.lp-form{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:48px;align-items:start}
.lp-form h3{font-size:28px;font-weight:800;line-height:1.4}
.lp-form .tx>p{margin-top:16px;font-size:16px;line-height:1.95;color:var(--on-dark-sub)}
.lp-who{margin-top:20px;border-top:1px solid var(--dark-line)}
.lp-who div{display:grid;grid-template-columns:6.5em minmax(0,1fr);gap:12px;padding:12px 0;border-bottom:1px solid var(--dark-line)}
.lp-who dt{font-size:13px;font-weight:700;line-height:1.7;color:var(--on-dark-sub)}
.lp-who dd{font-size:15px;font-weight:600;line-height:1.6}
.lp-form-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.lp-dark .card .t1{color:var(--on-dark)}
.lp-dark .card .t2{color:var(--on-dark-sub)}
/* 名前と条件は「…」で切らずに折り返す（2026-11-14 代表「なんで事業内容を端折っているの？」と同じ考え。ほかのページの棚は1行のまま） */
.lp-form-cards .card .t1,.lp-form-cards .card .t2,.lp-rank b{display:block;overflow:visible;white-space:normal;-webkit-line-clamp:unset}

/* 組む相手の見つけ方（番号と文・実際の画面の値） */
.lp-feats{display:grid;gap:96px;margin-top:80px}
.lp-feat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
.lp-feat:nth-child(even) .lp-feat-tx{order:2}
.lp-feat h3{margin-top:18px;font-size:30px;line-height:1.5;font-weight:800}
.lp-feat p{margin-top:20px;font-size:17px;line-height:2}
.lp-fig{padding:36px;border-radius:12px;background:var(--bg)}
.lp-tags{display:flex;flex-wrap:wrap;gap:10px}
.lp-rank{padding:0;list-style:none}
.lp-rank a{display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:12px;padding:14px 0;border-top:1px solid var(--line)}
.lp-rank li:first-child a{border-top:0;padding-top:0}
.lp-rank .no{font-family:var(--num);font-size:22px;font-weight:800}
.lp-rank b{font-size:16px;font-weight:700}
.lp-rank .v{font-family:var(--num);font-size:15px;font-weight:700;color:var(--sub)}
.lp-rank a:hover b{text-decoration:underline;text-underline-offset:3px}
.lp-ask ul{display:grid;gap:10px;padding:0;list-style:none}
.lp-ask li{padding:14px 18px;border-radius:8px;background:var(--paper);font-size:15px;font-weight:600}
.lp-sample{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:20px;align-items:start}
.lp-sample .k{font-size:13px;font-weight:700;color:var(--sub)}
.lp-sample b{display:block;margin-top:6px;font-size:18px;font-weight:800;line-height:1.45}
.lp-sample dl{margin-top:12px}
.lp-sample dl div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--line);font-size:14px}
.lp-sample dt{color:var(--sub)}
.lp-sample dd{font-family:var(--num);font-weight:700;text-align:right}
.lp-sample .u{margin-top:10px;font-size:13px;color:var(--mute)}
.lp-sample:hover b{text-decoration:underline;text-underline-offset:3px}

/* よくあるご質問 */
.lp-faq{max-width:880px;margin-top:56px}
.lp-faq details{border-top:1px solid var(--line)}
.lp-faq details:last-child{border-bottom:1px solid var(--line)}
.lp-faq summary{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 4px;font-size:17px;font-weight:700;line-height:1.6;list-style:none;cursor:pointer}
.lp-faq summary::-webkit-details-marker{display:none}
.lp-faq summary::after{content:"+";flex:none;font-family:var(--num);font-size:22px;font-weight:600;color:var(--sub)}
.lp-faq details[open] summary::after{content:"−"}
.lp-faq p{padding:0 4px 26px;font-size:16px;line-height:1.9}

/* 文の終わりの1〜2字だけが次の行に残らないよう、語のまとまりで折る（手で改行を入れない） */
.lp h2,.lp h3,.lp p,.lp-hero h1,.lp-hero p,.lp-faq summary,.lp-scene b,.lp-scene .d,.lp-who dd{word-break:auto-phrase}
.lp-h h2 .ib,.lp-hero h1 .ib{display:inline-block}   /* 見出しは「、」の後ろでだけ折る（build_service の seg） */
@media (max-width:1100px){
  .lp-feat{gap:40px}
  .lp-form{grid-template-columns:minmax(0,1fr);gap:28px}
}
@media (max-width:960px){
  .lp-hero{min-height:0}
  .lp-hero .lp-in{grid-template-columns:minmax(0,1fr);gap:48px}
  .lp-concept{grid-template-columns:minmax(0,1fr);gap:48px}
  .lp-scenes{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767px){
  .lp-sec{padding:80px 0}
  .lp-eb{font-size:15px}
  .lp-h h2{font-size:26px}
  .lp-lead,.lp-text{margin-top:20px}
  .lp-lead,.lp-text p{font-size:15.5px;line-height:1.95}
  .lp-no{font-size:26px}
  .lp-act{margin-top:32px}
  .lp-hero .lp-in{gap:40px;padding-top:48px;padding-bottom:64px}
  .lp-hero .lp-eb{font-size:14px;letter-spacing:.06em}
  .lp-hero h1{margin-top:18px;font-size:30px}
  .lp-hero .lp-lead{margin-top:22px;font-size:15.5px}
  .lp-btns{margin-top:32px;gap:12px}
  .lp-pics{gap:8px}
  .lp-pics a:nth-child(even){transform:translateY(16px)}
  .lp-names-cap{margin-top:36px}
  .lp-names{gap:8px}
  .lp-names span{height:34px;padding:0 10px;font-size:13px}
  .lp-two{grid-template-columns:minmax(0,1fr);gap:14px;margin-top:40px}
  .lp-two>div{padding:28px 24px 30px}
  .lp-two h3{font-size:19px}
  .lp-two p{font-size:15px}
  .lp-bridge{margin-top:40px;font-size:19px}
  .lp-name p{font-size:44px;gap:10px}
  .lp-name i{margin-left:-10px}
  .lp-name .x{font-size:24px}
  .lp-name .lg svg{height:32px}
  .lp-scenes{gap:28px 12px;margin-top:40px}
  .lp-scene b{margin-top:10px;font-size:15px}
  .lp-scene .d{font-size:12.5px}
  .lp-scene .n{font-size:12px}
  .lp-forms{gap:56px;margin-top:48px}
  .lp-form h3{font-size:22px}
  .lp-form .tx>p{font-size:15px}
  .lp-form-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}
  .lp-form-cards>*:nth-child(n+3){display:none}
  .lp-feats{gap:64px;margin-top:48px}
  .lp-feat{grid-template-columns:minmax(0,1fr);gap:28px}
  .lp-feat:nth-child(even) .lp-feat-tx{order:0}
  .lp-feat h3{margin-top:14px;font-size:22px}
  .lp-feat p{font-size:15.5px;line-height:1.95}
  .lp-fig{padding:22px}
  .lp-sample{grid-template-columns:minmax(0,1fr);gap:14px}
  .lp-faq{margin-top:36px}
  .lp-faq summary{padding:20px 2px;font-size:15.5px}
  .lp-faq p{font-size:15px}
}