@charset "utf-8";
/*
 * pp-board.css — 掲示板専用スタイル
 * 設置場所: wp-content/themes/lightning-child-sample/assets/css/pp-board.css
 *
 * 重要：WP Rocket の「Used CSS」除外リストに次の2行を必ず追加すること。
 *   (.*)/pp-board.css
 *   /board/(.*)
 * 追加しないと一覧の装飾が剥がれる。
 *
 * 【書体の方針】
 * Noto Sans JP 1書体のみ。階層はウェイト・サイズ・色で作る。
 * 日本語ゴシックを2種類混ぜると、骨格が近すぎて「対比」ではなく
 * 「揃っていない」に見える。数字も等幅書体を当てず tabular-nums で桁を揃える。
 *
 * 【ヘッダーの方針】
 * 濃いスレートグレー＋白文字で、ライト／ダークとも同じ。
 * 色の帯を明暗で反転させると必ず破綻する。彩度はアクティブなタブと
 * ボタンにだけ使い、面の色には使わない。
 */

.pb-html,
.pb-body,
.pbf,
.pbf-deal,
.pbf-done{
  --pb-bg:#EEF0F2;
  --pb-paper:#FFFFFF;
  --pb-paper2:#F5F7F8;
  --pb-ink:#151B21;
  --pb-ink2:#4B5761;
  --pb-ink3:#7B8790;
  --pb-line:#D8DEE3;
  --pb-line2:#EAEEF1;

  /* ヘッダーは両テーマ共通 */
  --pb-hd:#1C2530;
  --pb-on-hd:#FFFFFF;

  --pb-accent:#15597F;
  --pb-on-accent:#FFFFFF;

  /* 投稿ボタン専用。売りたい／買いたいのバッジと混同されないよう、
     ここでしか使わない色を1つ持たせる。ヘッダーの色帯と同じく
     ダークモードでも反転させない。 */
  --pb-cta:#E1892B;
  --pb-cta-hover:#F0993C;
  --pb-on-cta:#1F1405;

  --pb-sell:#9E4A1E;
  --pb-sell-bg:#F8EBE3;
  --pb-buy:#125C74;
  --pb-buy-bg:#E0EEF2;
  --pb-nego:#79570A;
  --pb-nego-bg:#F8F1DC;
  --pb-done:#6E7981;
  --pb-done-bg:#E9ECEE;
  --pb-new:#1D6B3E;
}

@media (prefers-color-scheme: dark){
  .pb-html,
  .pb-body,
  .pbf,
  .pbf-deal,
  .pbf-done{
    --pb-bg:#0D1318;
    --pb-paper:#161E25;
    --pb-paper2:#1C262E;
    --pb-ink:#E6EBEF;
    --pb-ink2:#AAB6C0;
    --pb-ink3:#78848D;
    --pb-line:#27323B;
    --pb-line2:#202A32;

    --pb-hd:#161D25;
    --pb-on-hd:#FFFFFF;

    --pb-accent:#78BEE0;
    --pb-on-accent:#0A1218;

    --pb-sell:#DC9367;
    --pb-sell-bg:#2A1E16;
    --pb-buy:#67B6CD;
    --pb-buy-bg:#132A32;
    --pb-nego:#D5B063;
    --pb-nego-bg:#272014;
    --pb-done:#8A959D;
    --pb-done-bg:#1E262C;
    --pb-new:#6DBE88;
  }
}

/* ---------- 土台 ---------- */
/* テーマが html に背景色を持っているため、body の背景は画面全体に伝播しない。
   html 側も塗り、さらに body に min-height を与えて短いページでも下まで届かせる。 */
html.pb-html{background:var(--pb-bg)}
body.pb-body{
  min-height:100vh;
  margin:0;
  padding:0;
  background:var(--pb-bg);
  color:var(--pb-ink);
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif;
  font-size:14px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
.pb-body *{box-sizing:border-box}
.pb-page{max-width:1180px;margin:0 auto;padding:22px 16px 70px}
.pb-board{
  background:var(--pb-paper);
  border:1px solid var(--pb-line);
  border-radius:3px;
  overflow:hidden;
}
:where(.pb-body) a{color:inherit;text-decoration:none}
:where(.pb-body) a:hover{text-decoration:underline}
.pb-body :focus-visible{outline:2px solid var(--pb-accent);outline-offset:2px}
.screen-reader-text{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);clip-path:inset(50%);white-space:nowrap;
}
/* 数字の桁を揃える。等幅書体は使わない */
.pb-num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ---------- ヘッダー ---------- */
.pb-hd{background:var(--pb-hd);color:var(--pb-on-hd);padding:18px 20px 0}
.pb-hd-top{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:14px;flex-wrap:wrap;padding-bottom:6px;
}
.pb-hd-name{
  font-weight:700;font-size:23px;line-height:1.35;letter-spacing:.02em;
  color:var(--pb-on-hd);font-feature-settings:"palt" 1;
}
.pb-hd-name:hover{text-decoration:none;opacity:.85}
.pb-hd-sub{
  font-size:13.5px;font-weight:400;color:var(--pb-on-hd);
  opacity:.72;margin-left:12px;letter-spacing:.01em;
}
/* 掲示板で一番押してほしい操作。
   白い長方形だと「押せるもの」に見えず、ヘッダーの一部として流される。
   専用色を当て、費用がかからないことをボタン自身に書いて、
   押す前の迷い（有料か／登録が要るか）をその場で消す。 */
.pb-hd-post{
  display:inline-flex;align-items:center;gap:11px;
  background:var(--pb-cta);color:var(--pb-on-cta);
  border-radius:6px;white-space:nowrap;
  padding:10px 20px 10px 16px;
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 2px 6px rgba(0,0,0,.28);
  transition:background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.pb-hd-post .plus{
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:50%;
  background:rgba(31,20,5,.14);
  font-size:16px;font-weight:700;line-height:1;
}
.pb-hd-post .t{display:flex;flex-direction:column;gap:1px}
.pb-hd-post .l1{font-weight:700;font-size:15px;line-height:1.3;letter-spacing:.01em}
.pb-hd-post .l2{font-weight:500;font-size:11px;line-height:1.3;opacity:.78}
.pb-hd-post:hover{
  text-decoration:none;background:var(--pb-cta-hover);
  transform:translateY(-1px);
  box-shadow:0 1px 0 rgba(255,255,255,.22) inset, 0 4px 10px rgba(0,0,0,.32);
}
.pb-hd-post:active{transform:translateY(0);box-shadow:0 1px 3px rgba(0,0,0,.3)}
.pb-hd-post:focus-visible{outline:3px solid var(--pb-on-hd);outline-offset:2px}

/* 掲示板名の1段下に、相互リンクと投稿ボタンを左右で置く行。
   ボタンを見出しと同じ行に置くと右上の隅に張り付いて、
   ヘッダーの装飾のように見えてしまう。一段下ろしてタブの直上に置くと、
   目線が「掲示板名 → 何ができる場所か → 投稿する」の順に流れる。 */
.pb-hd-row{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:12px 18px;flex-wrap:wrap;padding:2px 0 14px;
}
/* もう一方の掲示板への案内。
   掲示板名だけを並べても、初めて来た人には何が置いてある場所か分からない。
   名前の下に扱う品目を添え、押した先が想像できるようにする。 */
.pb-cross{display:flex;gap:10px 18px;flex-wrap:wrap;padding:0}
.pb-cross a{
  display:flex;flex-direction:column;gap:2px;
  padding:7px 13px 8px;border-radius:6px;
  border:1px solid rgba(255,255,255,.22);
  color:var(--pb-on-hd);
  transition:border-color .15s ease, background .15s ease;
}
.pb-cross .cl1{
  font-size:13px;font-weight:700;line-height:1.35;
  display:inline-flex;align-items:center;gap:6px;
}
.pb-cross .cl1 .arw{font-size:12px;opacity:.75}
.pb-cross .cl2{font-size:11.5px;font-weight:400;line-height:1.4;opacity:.66}
.pb-cross a:hover{
  text-decoration:none;border-color:rgba(255,255,255,.5);
  background:rgba(255,255,255,.07);
}
.pb-cross a:hover .cl2{opacity:.85}
.pb-cross a:focus-visible{outline:2px solid var(--pb-on-hd);outline-offset:2px}

.pb-tabs{display:flex;overflow-x:auto}
.pb-tab{
  font-weight:700;font-size:14px;line-height:1.4;
  padding:10px 18px;border-bottom:2px solid transparent;
  color:var(--pb-on-hd);opacity:.55;white-space:nowrap;
}
.pb-tab:hover{text-decoration:none;opacity:.8}
.pb-tab .n{
  font-size:12px;font-weight:400;margin-left:7px;opacity:.7;
  font-variant-numeric:tabular-nums;
}
.pb-tab.is-on{opacity:1;border-bottom-color:var(--pb-on-hd)}

/* ---------- 絞り込み ---------- */
.pb-filters{
  display:flex;gap:6px;flex-wrap:wrap;align-items:center;
  padding:11px 20px;background:var(--pb-paper2);
  border-bottom:1px solid var(--pb-line);
}
.pb-lbl{
  font-size:11.5px;font-weight:500;color:var(--pb-ink3);
  margin-right:4px;white-space:nowrap;
}
.pb-chip{
  background:var(--pb-paper);border:1px solid var(--pb-line);border-radius:2px;
  font-size:12.5px;font-weight:500;color:var(--pb-ink2);
  padding:4px 11px;white-space:nowrap;line-height:1.6;
}
.pb-chip:hover{text-decoration:none;border-color:var(--pb-accent);color:var(--pb-accent)}
.pb-chip.is-on{
  background:var(--pb-accent);border-color:var(--pb-accent);
  color:var(--pb-on-accent);font-weight:700;
}
.pb-sp{flex:1;min-width:6px}

/* 検索欄
   テーマ側が button に font-size:16px / padding:8px 32px を当てており、
   .pb-search button（詳細度 0,1,1）では負ける。掲示板は既存テーマの上に
   同居しているため、この2要素だけは詳細度を上げたうえで !important で固定する。
   ここを緩めるとボタンの文字が下にずれる。 */
.pb-search{display:flex;align-items:stretch;height:32px}
.pb-body .pb-search input[type="search"]{
  -webkit-appearance:none;appearance:none;
  font-family:inherit !important;
  font-size:13px !important;
  font-weight:400 !important;
  line-height:1 !important;
  color:var(--pb-ink);
  background:var(--pb-paper);
  border:1px solid var(--pb-line) !important;
  border-right:none !important;
  border-radius:2px 0 0 2px !important;
  padding:0 11px !important;
  margin:0 !important;
  width:190px;
  height:32px !important;
  min-height:0 !important;
  box-shadow:none !important;
}
.pb-body .pb-search button[type="submit"]{
  -webkit-appearance:none;appearance:none;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:inherit !important;
  font-size:13px !important;
  font-weight:700 !important;
  line-height:1 !important;
  background:var(--pb-accent) !important;
  color:var(--pb-on-accent) !important;
  border:1px solid var(--pb-accent) !important;
  border-radius:0 2px 2px 0 !important;
  padding:0 18px !important;
  margin:0 !important;
  height:32px !important;
  min-height:0 !important;
  width:auto !important;
  cursor:pointer;
  box-shadow:none !important;
  text-shadow:none !important;
  letter-spacing:normal !important;
}

/* ---------- 掲載ルール ---------- */
/* ページの見出し。掲示板ページには h1 が1つも無かった。
   絞り込みの結果がそのままページの主題になるので、ここに置く。 */
.pb-h1{
  margin:0;padding:14px 20px 0;
  font-size:15px;font-weight:700;line-height:1.5;color:var(--pb-ink);
  font-feature-settings:"palt" 1;letter-spacing:.01em;
}

.pb-rules{
  padding:10px 20px;font-size:12.5px;color:var(--pb-ink2);
  border-bottom:1px solid var(--pb-line2);
  display:flex;gap:4px 22px;flex-wrap:wrap;line-height:1.6;
}
.pb-rules b{color:var(--pb-ink);font-weight:700}

/* ---------- 絞り込みの折りたたみ（スマホのみ） ----------
   PC では常に開いた状態にし、開閉ボタンもチェックボックスも出さない。
   スマホでは既定で畳む。絞り込み中のときだけ開いた状態で表示する
   （テンプレート側で checked を付けている）。JSは使っていない。 */
.pb-narrow-cb{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.pb-narrow-btn{display:none}

/* ---------- 一覧 ---------- */
.pb-list-wrap{overflow-x:auto}
table.pb-list{
  width:100%;border-collapse:collapse;font-size:13.5px;min-width:920px;table-layout:fixed;
  margin:0;background:transparent;
}
table.pb-list thead th{
  position:sticky;top:0;z-index:2;background:var(--pb-paper2);
  font-weight:500;font-size:12px;color:var(--pb-ink3);
  text-align:left;padding:9px 12px;
  border:none;border-bottom:1px solid var(--pb-line);white-space:nowrap;
}
table.pb-list tbody td{
  padding:11px 12px;border:none;border-bottom:1px solid var(--pb-line2);
  vertical-align:top;background:transparent;
}
table.pb-list tbody tr:hover td{background:var(--pb-paper2)}
table.pb-list tbody tr.is-done{color:var(--pb-ink3)}
table.pb-list tbody tr.is-done .item{font-weight:500;color:var(--pb-ink3)}

/* 年を入れるため 2026/09/07 が1行に収まる幅を取る。
   掲示板は「いつの情報か」が信用に直結するので、年を省かない。 */
.pb-list .c-date{
  font-size:12px;color:var(--pb-ink3);white-space:nowrap;width:92px;
  font-variant-numeric:tabular-nums;
}
.pb-list .c-date .new{
  display:block;font-size:10.5px;font-weight:700;
  color:var(--pb-new);letter-spacing:.06em;margin-top:1px;
}
.pb-list .c-kind{width:76px;white-space:nowrap}
.pb-k{
  display:inline-block;font-weight:700;font-size:12px;
  padding:2px 9px;border-radius:2px;line-height:1.6;
}
.pb-k-sell{background:var(--pb-sell-bg);color:var(--pb-sell)}
.pb-k-buy{background:var(--pb-buy-bg);color:var(--pb-buy)}
.pb-k-nego{background:var(--pb-nego-bg);color:var(--pb-nego);margin-left:5px}
.pb-k-done{background:var(--pb-done-bg);color:var(--pb-done)}

.pb-list .c-main{min-width:280px}
.pb-list .item{
  font-weight:700;font-size:15.5px;line-height:1.5;color:var(--pb-ink);
  font-feature-settings:"palt" 1;
}
/* 説明は2行で打ち切る。案件ごとに行の高さが変わると、
   ざっと上から下へ目を走らせる読み方ができなくなる。 */
.pb-list .desc{
  font-size:12.5px;font-weight:400;color:var(--pb-ink2);line-height:1.7;margin-top:3px;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden;
}

/* 右側4列は幅を決めて折り返させる。
   nowrap のままだと「300枚〜（10t車1台分）」「プラスチックパレット株式会社」の
   ような長い値がそのまま表に押し出し、横スクロールが出る。 */
/* 右側の5列は実寸で確保する。em だとこの列だけ文字を小さくしたときに
   基準がずれ、ボタンが枠からはみ出す。左右の余白も詰めて幅を稼ぐ。 */
.pb-list .c-qty,
.pb-list .c-place,
.pb-list .c-cond,
.pb-list .c-who{
  font-size:12px;color:var(--pb-ink2);overflow-wrap:anywhere;
}
table.pb-list tbody td.c-qty,
table.pb-list tbody td.c-place,
table.pb-list tbody td.c-cond,
table.pb-list tbody td.c-who,
table.pb-list tbody td.c-act,
table.pb-list thead th.c-qty,
table.pb-list thead th.c-place,
table.pb-list thead th.c-cond,
table.pb-list thead th.c-who,
table.pb-list thead th.c-act{padding-left:8px;padding-right:8px}

.pb-list .c-qty{width:108px;font-weight:500;color:var(--pb-ink);font-variant-numeric:tabular-nums}
.pb-list .c-place{width:96px}
.pb-list .c-cond{width:96px}
.pb-list .c-who{width:104px}
.pb-list .c-act{width:118px;white-space:nowrap;text-align:right}

/* 一覧のタイトルは個別ページへのリンク。色はそのままで下線だけ出す */
.pb-list .item a{color:inherit;text-decoration:none}
.pb-list .item a:hover{text-decoration:underline}

/* ---------- 個別案件ページ ---------- */
.pb-detail{padding:26px 28px 44px;max-width:820px}
.pb-crumb{margin:0 0 18px;font-size:12.5px}
.pb-crumb a{color:var(--pb-ink2)}
.pb-dt-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pb-dt-no{
  font-size:12px;color:var(--pb-ink3);letter-spacing:.04em;
  font-variant-numeric:tabular-nums;
}
.pb-dt-title{
  font-size:22px;font-weight:700;line-height:1.5;color:var(--pb-ink);
  margin:10px 0 22px;font-feature-settings:"palt" 1;
}
table.pb-dt-table{
  width:100%;border-collapse:collapse;font-size:13.5px;margin:0 0 24px;
  background:transparent;
}
table.pb-dt-table th,
table.pb-dt-table td{
  padding:10px 12px;border:none;border-bottom:1px solid var(--pb-line2);
  text-align:left;vertical-align:top;background:transparent;
}
table.pb-dt-table th{
  width:7.5em;font-weight:500;color:var(--pb-ink3);font-size:12.5px;
  background:var(--pb-paper2);
}
.pb-dt-exp{color:var(--pb-ink3);font-size:12.5px}
.pb-dt-body{
  font-size:14px;line-height:1.9;color:var(--pb-ink2);
  margin:0 0 30px;
}
.pb-dt-body p{margin:0 0 1em}
.pb-dt-photo{
  margin:0 0 24px;padding:12px 14px;
  border:1px solid var(--pb-line);border-radius:4px;background:var(--pb-paper2);
  font-size:12.5px;line-height:1.8;color:var(--pb-ink2);
}
.pb-dt-photo b{color:var(--pb-ink)}
.pb-dt-act{border-top:1px solid var(--pb-line);padding-top:24px}
.pb-ask-lg{font-size:14px;padding:11px 26px}
.pb-dt-note{margin:12px 0 0;font-size:12.5px;color:var(--pb-ink3);line-height:1.8}

@media (max-width:920px){
  .pb-detail{padding:20px 16px 40px}
  .pb-dt-title{font-size:19px}
  table.pb-dt-table th{width:6em}
}

.pb-ask{
  display:inline-block;background:var(--pb-paper);
  border:1px solid var(--pb-accent);color:var(--pb-accent);
  font-weight:700;font-size:12.5px;padding:5px 11px;border-radius:2px;line-height:1.6;
  white-space:nowrap;
}
.pb-ask:hover{background:var(--pb-accent);color:var(--pb-on-accent);text-decoration:none}
.pb-ask.is-off{border-color:var(--pb-line);color:var(--pb-ink3);background:transparent;cursor:default}

/* ---------- ページャ ---------- */
.pb-pager{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:13px 20px;border-top:1px solid var(--pb-line);background:var(--pb-paper2);
  font-size:12.5px;color:var(--pb-ink3);font-variant-numeric:tabular-nums;
}
.pb-pager .pages{display:flex;gap:4px;flex-wrap:wrap}
.pb-pager .page-numbers{
  border:1px solid var(--pb-line);background:var(--pb-paper);color:var(--pb-ink2);
  font-size:12.5px;padding:3px 10px;border-radius:2px;
}
.pb-pager .page-numbers:hover{text-decoration:none;border-color:var(--pb-accent);color:var(--pb-accent)}
.pb-pager .page-numbers.current{
  background:var(--pb-accent);border-color:var(--pb-accent);
  color:var(--pb-on-accent);font-weight:700;
}

/* ---------- 該当なし ---------- */
.pb-empty{padding:52px 20px;text-align:center;color:var(--pb-ink2)}
.pb-empty p{margin:0 0 10px}
.pb-empty a{color:var(--pb-accent);font-weight:700}

/* ---------- フッター ---------- */
.pb-bf{
  padding:14px 20px;border-top:1px solid var(--pb-line);background:var(--pb-paper);
  display:flex;gap:4px 22px;flex-wrap:wrap;font-size:12px;color:var(--pb-ink3);line-height:1.7;
}
.pb-bf b{color:var(--pb-ink2);font-weight:700}

/* ---------- スマホ ---------- */
@media (max-width:920px){
  .pb-page{padding:0 0 50px}
  .pb-board{border-radius:0;border-left:none;border-right:none}
  .pb-hd{padding:16px 16px 0}
  .pb-hd-row{align-items:stretch;gap:10px}
  .pb-hd-post{width:100%;justify-content:center;margin-top:2px}
  .pb-hd-name{font-size:20px}
  .pb-hd-sub{display:block;margin-left:0;margin-top:4px;font-size:13px}
  .pb-filters{padding:10px 16px}
  .pb-rules{padding:10px 16px}

  /* 絞り込みは1行のボタンに畳む。開いていると案件が1件も見えないまま
     画面1枚分をチップが埋めてしまう。 */
  .pb-narrow-btn{
    display:flex;align-items:center;gap:9px;
    margin:0;padding:12px 16px;
    background:var(--pb-paper2);border-bottom:1px solid var(--pb-line);
    color:var(--pb-ink2);font-size:13.5px;font-weight:500;
    cursor:pointer;user-select:none;
  }
  .pb-narrow-ico{font-size:15px;color:var(--pb-ink3);line-height:1}
  .pb-narrow-txt{flex:1;color:var(--pb-ink)}
  .pb-narrow-caret{font-size:11px;color:var(--pb-ink3);transition:transform .15s ease}
  .pb-narrow-cb:checked ~ .pb-narrow-btn .pb-narrow-caret{transform:rotate(180deg)}
  .pb-narrow-cb:focus-visible ~ .pb-narrow-btn{outline:2px solid var(--pb-accent);outline-offset:-2px}
  .pb-narrow-body{display:none}
  .pb-narrow-cb:checked ~ .pb-narrow-body{display:block}

  /* 補足は要点1行だけ出す。残りは掲載ルールのページで読める。 */
  .pb-rules{display:block;line-height:1.7}
  .pb-rules-more{display:none}

  /* もう一方の掲示板の説明文は畳む。まだこの掲示板も見ていない段階で
     2行を使う価値はない。 */
  .pb-cross .cl2{display:none}
  .pb-cross a{padding:8px 12px}
  .pb-hd-top{padding-bottom:4px}

  table.pb-list{min-width:0;font-size:13.5px;table-layout:auto}
  table.pb-list thead{display:none}
  table.pb-list tbody tr{
    display:grid;grid-template-columns:1fr auto;gap:2px 10px;
    padding:14px 16px;border-bottom:1px solid var(--pb-line2);
  }
  table.pb-list tbody td{padding:0;border:none}
  /* 表示のときに右5列へ入れた左右の余白を、カード表示では戻す */
  table.pb-list tbody td.c-qty,
  table.pb-list tbody td.c-place,
  table.pb-list tbody td.c-cond,
  table.pb-list tbody td.c-who,
  table.pb-list tbody td.c-act{padding-left:0;padding-right:0}
  .pb-list .item{font-size:15px}
  .pb-list .c-date{grid-column:1;order:1}
  .pb-list .c-date .new{display:inline;margin-left:7px}
  .pb-list .c-kind{grid-column:2;order:2;text-align:right;width:auto}
  .pb-list .c-main{grid-column:1/-1;order:3;margin-top:5px;min-width:0}
  /* カード表示の4項目。ラベル幅を揃えて2列に組む。
     以前は display:inline に全角スペース付きの見出しを当てていたが、
     グリッドの子はブロック化されるため各行が別の行になり、
     先頭の全角スペースぶんだけ字下げがばらついていた。 */
  .pb-list .c-qty,
  .pb-list .c-place,
  .pb-list .c-cond,
  .pb-list .c-who{
    grid-column:1/-1;order:4;
    display:grid;grid-template-columns:5em 1fr;gap:0 10px;
    font-size:12.5px;color:var(--pb-ink);white-space:normal;width:auto;
    line-height:1.75;
  }
  .pb-list .c-qty{margin-top:4px;font-weight:500}
  .pb-list .c-place,
  .pb-list .c-cond,
  .pb-list .c-who{color:var(--pb-ink2)}
  .pb-list .c-qty::before,
  .pb-list .c-place::before,
  .pb-list .c-cond::before,
  .pb-list .c-who::before{color:var(--pb-ink3);font-weight:400}
  .pb-list .c-qty::before{content:"数量"}
  .pb-list .c-place::before{content:"保管場所"}
  .pb-list .c-cond::before{content:"状態"}
  .pb-list .c-who::before{content:"投稿者"}
  .pb-list .c-act{grid-column:1/-1;order:5;text-align:left;margin-top:10px;width:auto}
  .pb-ask{display:block;width:100%;text-align:center;padding:10px}
  .pb-search{flex:1;min-width:180px}
  .pb-search input[type=search]{width:100%}
}


/* ============================================================
 * 投稿フォーム／問い合わせフォーム
 *
 * この2つは通常の固定ページ（テーマのヘッダー・フッター付き）に出る。
 * テーマ側の input / select / textarea / button の指定と綱引きになるため、
 * 箱の寸法にかかわる値は !important で固定している。検索ボタンと同じ理由。
 * ========================================================== */

/* フォームの器。board-form.php の中に置かれる */
.pb-formwrap{
  padding:32px 28px 48px;
  max-width:880px;
  margin:0 auto;
}
.pb-formhead{
  font-size:22px;font-weight:700;line-height:1.45;
  color:var(--pb-ink);margin:0 0 20px;
  font-feature-settings:"palt" 1;
}
.pbf,
.pbf-deal,
.pbf-done{
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif;
  color:var(--pb-ink);
  line-height:1.7;
}
.pb-formwrap p{color:var(--pb-ink2)}

/* 問い合わせページの案件表示 */
.pbf-deal{
  background:var(--pb-paper2);
  border:1px solid var(--pb-line);
  border-left:3px solid var(--pb-accent);
  border-radius:3px;
  padding:18px 20px;
  margin:0 0 26px;
}
.pbf-deal-no{font-size:12px;color:var(--pb-ink3);font-variant-numeric:tabular-nums}
.pbf-deal-title{
  font-size:18px;font-weight:700;line-height:1.5;margin:4px 0 12px;
  color:var(--pb-ink);font-feature-settings:"palt" 1;
}
.pbf-deal-spec{
  display:grid;grid-template-columns:auto 1fr;gap:4px 16px;
  margin:0;font-size:13.5px;
}
.pbf-deal-spec dt{color:var(--pb-ink3);white-space:nowrap}
.pbf-deal-spec dd{margin:0;color:var(--pb-ink2)}
.pbf-deal-desc{
  margin:12px 0 0;padding-top:12px;border-top:1px solid var(--pb-line2);
  font-size:13px;color:var(--pb-ink2);
}

/* 送信後 */
.pbf-done{
  background:var(--pb-paper2);border:1px solid var(--pb-line);
  border-left:3px solid var(--pb-new);border-radius:3px;padding:26px 24px;
}
.pbf-done h2{font-size:19px;font-weight:700;margin:0 0 10px;color:var(--pb-ink)}
.pbf-done p{margin:0 0 8px;font-size:14px;color:var(--pb-ink2)}
.pbf-done p:last-child{margin-bottom:0}

/* フォーム本体 */
.pbf-lead{
  font-size:13.5px;color:var(--pb-ink2);
  background:var(--pb-paper2);border:1px solid var(--pb-line2);
  border-radius:3px;padding:12px 14px;margin:0 0 22px;
}
.pbf-lead b{color:var(--pb-ink);font-weight:700}

.pbf-err{
  font-size:13.5px;font-weight:700;color:var(--pb-sell);
  background:var(--pb-sell-bg);border:1px solid var(--pb-sell);
  border-radius:3px;padding:11px 14px;margin:0 0 20px;
}

.pbf-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:16px 18px;margin:0 0 8px;
}
.pbf-f{display:flex;flex-direction:column;gap:6px;min-width:0}
.pbf-f.pbf-wide{grid-column:1/-1}

.pbf-f label,
.pbf-f .pbf-label{
  font-size:13px;font-weight:700;color:var(--pb-ink);
  display:flex;align-items:baseline;gap:7px;
}
.pbf-f .req{font-size:11px;font-weight:700;color:var(--pb-sell)}
.pbf-f .opt{font-size:11px;font-weight:400;color:var(--pb-ink3)}
.pbf-f .hint{font-size:11.5px;color:var(--pb-ink3);line-height:1.6}

.pbf input[type="text"],
.pbf input[type="email"],
.pbf input[type="tel"],
.pbf select,
.pbf textarea{
  -webkit-appearance:none;appearance:none;
  font-family:inherit !important;
  font-size:14px !important;
  font-weight:400 !important;
  line-height:1.6 !important;
  color:var(--pb-ink);
  background:var(--pb-paper);
  border:1px solid var(--pb-line) !important;
  border-radius:2px !important;
  padding:9px 11px !important;
  margin:0 !important;
  width:100% !important;
  max-width:none !important;
  height:auto !important;
  min-height:0 !important;
  box-shadow:none !important;
}
.pbf select{
  background-image:linear-gradient(45deg,transparent 50%,var(--pb-ink3) 50%),linear-gradient(135deg,var(--pb-ink3) 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
  padding-right:34px !important;
}
.pbf textarea{resize:vertical;min-height:96px !important}
.pbf input:focus,
.pbf select:focus,
.pbf textarea:focus{outline:2px solid var(--pb-accent);outline-offset:1px;border-color:var(--pb-accent) !important}

.pbf-checks{
  display:flex;flex-wrap:wrap;gap:8px 18px;
  padding:10px 12px;background:var(--pb-paper2);
  border:1px solid var(--pb-line);border-radius:2px;
}
.pbf-checks label{
  font-size:13.5px;font-weight:400;color:var(--pb-ink2);
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;
}
.pbf-checks input[type="checkbox"]{width:auto !important;margin:0 !important}

.pbf-sec{
  font-size:15px;font-weight:700;color:var(--pb-ink);
  margin:30px 0 6px;padding-top:22px;border-top:1px solid var(--pb-line);
}
.pbf-note{font-size:12.5px;color:var(--pb-ink3);line-height:1.7;display:block}

.pbf-submit{
  margin-top:28px;padding-top:22px;border-top:1px solid var(--pb-line);
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
}
.pbf-submit button{
  -webkit-appearance:none;appearance:none;
  font-family:inherit !important;
  font-size:15px !important;
  font-weight:700 !important;
  line-height:1 !important;
  background:var(--pb-accent) !important;
  color:var(--pb-on-accent) !important;
  border:1px solid var(--pb-accent) !important;
  border-radius:2px !important;
  padding:14px 40px !important;
  margin:0 !important;
  height:auto !important;
  min-height:0 !important;
  width:auto !important;
  cursor:pointer;
  box-shadow:none !important;
  text-shadow:none !important;
}
.pbf-submit .pbf-note{flex:1;min-width:200px}

/* ハニーポット。人には見せない */
.pbf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

@media (max-width:600px){
  .pbf-grid{grid-template-columns:1fr}
  .pbf-submit button{width:100% !important;text-align:center}
}

@media (max-width:600px){
  .pb-formwrap{padding:20px 16px 34px}
  .pb-formhead{font-size:19px}
}


/* ============================================================
 * 掲示板内の文章ページ（掲載ルール・免責事項など）
 * ========================================================== */
.pb-formwrap h2{
  font-size:17px;font-weight:700;line-height:1.5;color:var(--pb-ink);
  margin:34px 0 12px;padding-top:22px;border-top:1px solid var(--pb-line);
  font-feature-settings:"palt" 1;
}
.pb-formwrap h2:first-of-type{margin-top:22px}
.pb-formwrap h3{
  font-size:14.5px;font-weight:700;color:var(--pb-ink);
  margin:22px 0 6px;
}
.pb-formwrap p{
  font-size:14px;line-height:1.9;color:var(--pb-ink2);margin:0 0 14px;
}
.pb-formwrap p strong,
.pb-formwrap li strong{color:var(--pb-ink);font-weight:700}
.pb-formwrap ul,
.pb-formwrap ol{
  margin:0 0 16px;padding-left:1.4em;
}
.pb-formwrap li{
  font-size:14px;line-height:1.9;color:var(--pb-ink2);margin-bottom:7px;
}
.pb-formwrap li:last-child{margin-bottom:0}
.pb-formwrap a{color:var(--pb-accent);text-decoration:underline}

.pb-formwrap .pb-lede{
  font-size:14.5px;color:var(--pb-ink);
  background:var(--pb-paper2);border:1px solid var(--pb-line2);
  border-radius:3px;padding:14px 16px;margin-bottom:6px;
}
.pb-formwrap .pb-strong{
  color:var(--pb-ink);font-weight:500;
  border-left:3px solid var(--pb-accent);
  padding:2px 0 2px 14px;margin-bottom:16px;
}
.pb-formwrap .pb-date{
  font-size:12.5px;color:var(--pb-ink3);
  margin-top:32px;padding-top:18px;border-top:1px solid var(--pb-line);
}

/* 定義表 */
.pb-formwrap table.pb-kv{
  width:100%;border-collapse:collapse;margin:0 0 18px;
  border:1px solid var(--pb-line);
}
.pb-formwrap table.pb-kv th,
.pb-formwrap table.pb-kv td{
  text-align:left;padding:10px 14px;font-size:13.5px;
  border-bottom:1px solid var(--pb-line2);vertical-align:top;
}
.pb-formwrap table.pb-kv th{
  width:150px;white-space:nowrap;font-weight:500;
  color:var(--pb-ink3);background:var(--pb-paper2);
}
.pb-formwrap table.pb-kv td{color:var(--pb-ink2)}
.pb-formwrap table.pb-kv tr:last-child th,
.pb-formwrap table.pb-kv tr:last-child td{border-bottom:none}

/* 問い合わせフォームの第三者提供の明示 */
.pbf-consent{
  font-size:13px;line-height:1.8;color:var(--pb-ink2);
  background:var(--pb-paper2);border:1px solid var(--pb-line);
  border-left:3px solid var(--pb-nego);border-radius:3px;
  padding:13px 15px;margin:24px 0 0;
}
.pbf-consent b{color:var(--pb-ink);font-weight:700}
.pbf-consent a{color:var(--pb-accent);text-decoration:underline}

@media (max-width:600px){
  .pb-formwrap table.pb-kv th{width:auto;display:block;border-bottom:none;padding-bottom:2px}
  .pb-formwrap table.pb-kv td{display:block;padding-top:0}
}

/* 案件問い合わせフォームの下に置く、運営あて窓口への導線 */
.pbf-alt{
  max-width:880px;margin:26px auto 0;padding:12px 14px;
  border:1px solid var(--pb-line);border-radius:4px;background:var(--pb-paper2);
  font-size:12.5px;line-height:1.8;color:var(--pb-ink2);
}
.pbf-alt b{color:var(--pb-ink)}

/* 同意文のすぐ下に置く確認先。掲載ルールと個人情報の取り扱いを並べる。
   同意の前に読むべきものが2つあるので、文中リンクにせず独立させる。 */
.pbf-consent-links{
  margin:8px 0 0;display:flex;gap:18px;flex-wrap:wrap;font-size:12.5px;
}
.pbf-consent-links a{color:var(--pb-accent);font-weight:500;text-decoration:underline}

/* ---------- 空のときの誘い ---------- */
.pb-empty-sub{
  font-size:13px;line-height:1.9;color:var(--pb-ink3);
  max-width:32em;margin:0 auto 16px;
}
.pb-empty-btn{
  display:inline-block;background:var(--pb-cta);color:var(--pb-on-cta);
  font-weight:700;font-size:14px;padding:10px 22px;border-radius:6px;
  box-shadow:0 2px 6px rgba(0,0,0,.24);
}
.pb-empty-btn:hover{background:var(--pb-cta-hover);text-decoration:none}

/* ---------- 品目別・地域別の解説 ----------
   一覧の下に置く。来た人が最初に見たいのは案件そのもので、
   上に長文を置くと案件にたどり着く前に離脱する。 */
/* 一覧と地続きに見えると「何の文章か」が分からなくなるので、帯を1本入れて
   別の塊であることを示す。
   読みやすい行長（52em前後）に収めつつ、帯と本文の左端を必ず揃えること。
   帯だけ全幅・本文だけ左寄せにすると、右半分が空いた箱に見える。 */
.pb-hub{
  padding:0 0 38px;background:var(--pb-paper2);
  border-top:1px solid var(--pb-line);
}
.pb-hub-head{
  background:var(--pb-paper);border-bottom:1px solid var(--pb-line);
  margin-bottom:26px;
}
/* 見出しの帯と本文は必ず同じ幅・同じ左右余白にする。
   幅を em で指定すると、見出し(14px)と本文(13.5px)で基準が変わって左端がずれる。
   px で揃えること。
   詳細度にも注意。.pb-hub h2 が (0,1,1) なので、.pb-hub-title 単独 (0,1,0) では
   margin を上書きされて中央寄せが効かない。 */
.pb-hub .pb-hub-title{
  box-sizing:border-box;
  max-width:1140px;margin:0 auto;padding:13px 20px;
  font-size:14px;font-weight:700;color:var(--pb-ink);
  letter-spacing:.01em;font-feature-settings:"palt" 1;
}
/* 本文は読みやすい行長（40字前後＝640px）で止め、余る右側は関連リンクで埋める。
   空けたままだと「表示が壊れている」ように見える。 */
.pb-hub-grid{
  box-sizing:border-box;
  max-width:1140px;margin:0 auto;padding:0 20px;
  display:grid;grid-template-columns:minmax(0,1fr) 264px;gap:0 48px;
  align-items:start;
}
.pb-hub .pb-hub-body{max-width:640px}

.pb-hub-side{display:flex;flex-direction:column;gap:18px}
.pb-side-box{
  background:var(--pb-paper);border:1px solid var(--pb-line);border-radius:4px;
  padding:14px 16px;
}
.pb-side-box h3{
  margin:0 0 10px;padding:0;border:none;
  font-size:12.5px;font-weight:700;color:var(--pb-ink3);
  letter-spacing:.04em;
}
.pb-side-box ul{margin:0;padding:0;list-style:none;max-width:none}
.pb-side-box li{
  margin:0;padding:7px 0;border-top:1px solid var(--pb-line2);
  font-size:12.5px;line-height:1.7;
}
.pb-side-box li:first-child{border-top:none;padding-top:0}
.pb-side-box li:last-child{padding-bottom:0}
.pb-side-box a{color:var(--pb-ink2);text-decoration:none}
.pb-side-box a:hover{color:var(--pb-accent);text-decoration:underline}
.pb-side-op p{
  margin:0 0 11px;font-size:11.5px;line-height:1.75;color:var(--pb-ink2);
}
.pb-side-op p:last-child{margin-bottom:0}
.pb-side-op b{color:var(--pb-ink3);font-weight:500;font-size:11px}
.pb-side-op span{color:var(--pb-ink3)}
.pb-hub h2{
  font-size:15px;font-weight:700;color:var(--pb-ink);
  margin:26px 0 10px;line-height:1.6;font-feature-settings:"palt" 1;
}
.pb-hub h2:first-child{margin-top:0}
.pb-hub h3{
  font-size:14px;font-weight:700;color:var(--pb-ink);
  margin:24px 0 9px;padding-left:10px;line-height:1.6;
  border-left:3px solid var(--pb-accent);
}
.pb-hub h3:first-child{margin-top:0}
.pb-hub .pb-hub-lead{
  font-size:13px;color:var(--pb-ink3);margin:0 0 22px;line-height:1.85;
}
.pb-hub p{
  font-size:13.5px;line-height:1.95;color:var(--pb-ink2);margin:0 0 1.1em;
}
.pb-hub strong,.pb-hub b{color:var(--pb-ink);font-weight:700}
.pb-hub ul,.pb-hub ol{margin:0 0 1.1em;padding-left:1.4em}
.pb-hub li{font-size:13.5px;line-height:1.9;color:var(--pb-ink2);margin-bottom:5px}
.pb-hub a{color:var(--pb-accent);text-decoration:underline}

@media (max-width:920px){
  .pb-h1{padding:12px 16px 0;font-size:14.5px}
  .pb-hub{padding:0 0 26px}
  .pb-hub-head{margin-bottom:20px}
  .pb-hub .pb-hub-title{padding:12px 16px}
  .pb-hub-grid{grid-template-columns:1fr;gap:26px 0;padding:0 16px}
  .pb-hub .pb-hub-body{max-width:none}
}