/* ============================================================ デザイン規約v2（2026-09-03・ユーザー指摘「フォントとかすげーAIっぽいし安っぽい」対応。 2026-09-01全面リスキンの上に追改訂）。参照する空気は日本のB2Bデータメディア （日経・帝国データバンク・建設通信新聞のような「硬くて信頼できる」情報製品）。 可愛さ・スタートアップ風グラデーション・絵文字・角丸カード乱用・汎用ブルー基調は禁止。 - 色・サイズは必ずこの:root変数を参照する。テンプレート側・このファイルの他の場所を含め、 16進の生値を直書きしない（例外: このトークン定義そのもの）。それ以外は全部var()参照にする - パレット: 本文は墨(--ink)・ブランドとリンクは濃紺1色(--primaryと--linkを同値に統一。 「クリック可能」の記号はリンクの色そのものではなく、hoverの下線で示す＝色数を絞る)。 --accent(朱)は「有料」「締切」等の強調表示など限定用途のみに使い、通常のリンクhover・ タブhover等の汎用インタラクションには使わない（focus-visibleのアウトリングのみ、 キーボード操作可視化という別目的の慣習として例外的に維持する） - 非活性要素（例: 未実装のタブ）は--faint色+cursor:default+「準備中」バッジで、 クリックできるように見える見た目を絶対に与えない（hrefも付けない） - 間隔（margin/padding/gap）は4pxの倍数のみ。唯一の例外は主要/副次ボタンのpadding （9px 16pxに統一。ボタン角丸カ所は別途デザイン規約で固定値として明記） - 行間: 本文(.lead/.about-list/.gap-list/.side-box等)は1.7、表・高密度リスト (.data-table/.cat-card__subs/.pref-detail__list)は1.5 - 見出しの序列: h1(--fs-h1)=ページ名のみ・1ページに1個(トップのみ例外でヒーロー タグラインをh1として使う)。h2(--fs-h2)=節の見出し。2026-09-04デザインv3で見出しの書体を 本文と分離した: 見出し(.h1/.h2/.hero-tagline)は明朝(--font-serif=Noto Serif JP)+ 太さ700+letter-spacing .01em、本文は游ゴシック優先(--font-sans)。書体差そのものが 「本文と違う特別な要素」の記号になる（2026-09-01〜2026-09-03は書体を変えず太さだけで 差をつけていたが、公開後もユーザーから丸さの指摘が続いたため書体を変える判断に切替）。 タイルの数字(--fs-num)は見出しではなくデータなのでh1/h2は使わずただの大きい文字として 扱う（書体は本文の游ゴシックのまま・letter-spacingも付けない）。数値を表示する要素は 必ずfont-variant-numeric: tabular-numsにする - 面と線: カード類（.tile/.region-card/.filter-block/.side-box/.ladder-step等）は 角丸4px以下・影は原則使わない（水平罫線+余白で区切る「表組み中心」の見た目を基本形とする。 ピル/バッジ(border-radius:999px)はカードではないため対象外） - 案件ページ(/case/)のロック表示: 2026-09-05 DECISION_LOG「原本公開の最終形」で予算・見通し 段は公告・落札を1件以上持つ案件では無料の全件表示に変わった（旧SPEC「予算・見通し層の 行は課金者のみ表示」は撤回）。.ladder-step--lockedは公告・落札が1件も無い「公告前案件」 専用ページ(_render_locked_case_page())にのみ残る（--bg-soft地に--faint文字+鍵アイコン、 中身は見せない。理由は課金ではなく案件の存在自体が未確認なため） ============================================================ */ /* 色と文字の token（2026-09-26 トップ第6版の見本・PO了承。入札ページの見本 9/25 21:17 と同じ）。 光(:root)と闇（OS の設定が闇のとき=@media prefers-color-scheme、または ）の 両方で同じ名前の token を定義する。色の生値はこの3か所の定義にだけ書き、他は全部 var() で参照する。 文字の大きさは 40 / 30 / 22 / 18 / 16 / 14 / 13 の7段だけ（旧名 --fs-hero/--fs-h1/--fs-num/--fs-pill は この7段への別名）。見出しは明朝(--font-serif)、本文はゴシック(--font-sans)。 */ :root { color-scheme: light; --ink: #1a1a1a; --ink-2: #3b3a37; --muted: #5a5854; --faint: #6f6b64; --line: #e6e4e0; --line-soft: #eeece7; --line-strong: #8a857d; --primary: #17315c; --primary-soft: #3d5982; --primary-tint: #e9eef6; --link: #17315c; --accent: #b0392e; --accent-line: #efd7d5; --bg: #fcfcfa; --bg-soft: #f5f3ef; --paper: #ffffff; --ok: #166534; --ok-line: #c8e2d2; --ok-bg: #eaf5ee; --warn: #8a3b3b; --warn-line: #e3c7c7; --warn-bg: #f8ecec; --heat-0: #eef1f6; --heat-1: #cdd8ea; --heat-2: #9fb3d4; --heat-3: #5f7fae; --heat-4: #17315c; --map-daily: var(--primary); --map-partial: #5b7ba6; --map-forecast: #c7d3e3; --map-none-fill: #f1f4f8; --map-hard-base: #eef1f4; --map-hard-line: #a7b1ba; --fs-display: 40px; --fs-title: 30px; --fs-h2: 22px; --fs-lead: 18px; --fs-body: 16px; --fs-meta: 14px; --fs-caption: 13px; --fs-hero: var(--fs-display); --fs-h1: var(--fs-title); --fs-num: var(--fs-title); --fs-pill: var(--fs-caption); --font-sans: "Yu Gothic Medium", "YuGothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", sans-serif; --font-serif: "Noto Serif JP", "Hiragino Mincho ProN", serif; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --ink: #ece9e3; --ink-2: #d6d2ca; --muted: #b8b3aa; --faint: #a29d94; --line: #34312c; --line-soft: #2a2824; --line-strong: #6e695f; --primary: #9fbbea; --primary-soft: #7f9dcf; --primary-tint: #1d2638; --link: #9fbbea; --accent: #f19185; --accent-line: #4a2723; --bg: #161513; --bg-soft: #211f1b; --paper: #1b1a17; --ok: #86d4a0; --ok-line: #2a4a34; --ok-bg: #15271b; --warn: #f2a7a7; --warn-line: #4a2c2c; --warn-bg: #2a1c1c; --heat-0: #23262d; --heat-1: #2c3a55; --heat-2: #3d5580; --heat-3: #6a89c0; --heat-4: #9fbbea; --map-partial: #6a89c0; --map-forecast: #3d5580; --map-none-fill: #23262d; --map-hard-base: #25272b; --map-hard-line: #5a626b; } } :root[data-theme="dark"] { color-scheme: dark; --ink: #ece9e3; --ink-2: #d6d2ca; --muted: #b8b3aa; --faint: #a29d94; --line: #34312c; --line-soft: #2a2824; --line-strong: #6e695f; --primary: #9fbbea; --primary-soft: #7f9dcf; --primary-tint: #1d2638; --link: #9fbbea; --accent: #f19185; --accent-line: #4a2723; --bg: #161513; --bg-soft: #211f1b; --paper: #1b1a17; --ok: #86d4a0; --ok-line: #2a4a34; --ok-bg: #15271b; --warn: #f2a7a7; --warn-line: #4a2c2c; --warn-bg: #2a1c1c; --heat-0: #23262d; --heat-1: #2c3a55; --heat-2: #3d5580; --heat-3: #6a89c0; --heat-4: #9fbbea; --map-partial: #6a89c0; --map-forecast: #3d5580; --map-none-fill: #23262d; --map-hard-base: #25272b; --map-hard-line: #5a626b; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font-sans); font-size: var(--fs-body); line-height: 1.7; /* 本文の行間は1.7 */ color: var(--ink); background: var(--bg); font-variant-numeric: tabular-nums; /* 数値は等幅（データ製品の要。全要素の既定にする） */ overflow-wrap: break-word; -webkit-text-size-adjust: 100%; } /* リンク=--linkを独占させる（クリック可能の記号は色そのもの）。--accentは「有料」「締切」等の 限定用途に予約するため、hoverは色を変えず下線だけを足す（色数を絞るデザインv2方針） */ a { color: var(--link); text-decoration: none; } a:hover { text-decoration: underline; } /* フォーカス可視（キーボード操作）。ここだけはキーボード操作の可視化という別目的の慣習として --accentを維持する（コンテンツの強調用途ではないため「限定用途のみ」の対象外とする） */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } table { border-collapse: collapse; width: 100%; } .page-wrap { max-width: 1120px; margin: 0 auto; padding: 24px 24px 48px 24px; } /* ベータ版のお知らせ（2026-09-24 PO指示・同日改稿）。全ページの1行は警告色の薄い帯、トップの箱は同色の枠。新しい色・pxは足さない */ /* 2026-09-28 PO「もっと目立たせて」: 無彩色のまま黒地に白の太字（闇の設定では白地に黒）。 */ .dev-notice { background: var(--ink); color: var(--bg); font-size: var(--fs-body); line-height: 1.6; font-weight: 700; } .dev-notice__inner { max-width: 1120px; margin: 0 auto; padding: 12px 24px; color: var(--bg); } .dev-notice__inner strong { font-weight: 900; } .dev-notice__link { color: var(--bg); text-decoration: underline; font-weight: 700; white-space: nowrap; } .dev-notice__sep { color: var(--bg); margin: 0 8px; } .dev-notice-box { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 4px; padding: 16px 20px; margin: 0 0 24px 0; } .dev-notice-box .h2 { margin: 0 0 8px 0; color: var(--ink); } .dev-notice-box p { margin: 0 0 8px 0; font-size: var(--fs-body); line-height: 1.7; } .dev-notice-box__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 0; } @media (max-width: 600px) { .dev-notice__inner { padding: 8px 16px; } .dev-notice__link { display: block; white-space: normal; } .dev-notice__sep { display: none; } .dev-notice-box { padding: 12px 16px; } .dev-notice-box__actions .btn { flex: 1 1 100%; } } /* ヘッダー（2026-09-26 トップ第6版の見本）: 紙の地に下罫線1px。ロゴは明朝900の紺、ナビは