/* 個票（`/company/<法人番号>/`）だけのスタイル。 * * ⚠ **この画面の CSS はこの1本に閉じる。** `app.css` はトークンと全ページ共通の * 部品（.chip / .badge / .timeline / .si / .facts …）を持つ共有物で、 * 複数人で同時に触ると必ず衝突する。ここでは共通部品を「使う」だけにして、 * 共通部品そのものの定義を上書きしない。 * * ⚠ **新しい色を発明しない。** 面は --glass / --glass-strong、線は --border、 * 文字は --text-* だけ。系列色（--series-*）を文字色にしない。 * ⚠ ガラスの面は不透明度 0.70 以上（= --glass-strong 0.88）。可読性が最優先で、 * ここは住所や従業員数といった**細かい字がいちばん多い**画面。 */ /* ⚠ **ここから下は `app.css` から移したもの。** この画面でしか使わないのに * 共有ファイルに置いてあり、`app.css` を読む人に「全ページで効く」と * 誤解させていた。**移し先の先頭**に置くのは、`app.css` が STYLESHEETS の * 1番目だから —— 末尾に足すと、このファイルの既存の上書きより後ろに回って * カスケードが逆転する。 */ /* ==================================================== タイムライン(git風) */ /* ⚠ adopted は series-1、dropped はミュートグレー。**緑赤の good/bad を使わない。** シグナル消失は「悪いこと」ではないし、そもそも非検出にもとづく推論。 */ /* ⚠ `max-width` を明示する（散文向けの `ul { max-width: 72ch }` を無意識に被らない）。 実測では器いっぱいに出ていたが、**書いていないと次に触る人が気づけない。** */ .timeline { list-style: none; margin: 12px 0 0; padding: 0; position: relative; max-width: none; } .timeline::before { content: ""; position: absolute; left: 11px; top: 10px; bottom: 10px; width: 2px; background: var(--gridline); border-radius: var(--radius-xs); } .tl { position: relative; display: grid; grid-template-columns: 24px 1fr; gap: var(--gap-3); padding: 7px 0; } /* 行頭の印。**丸だけで、中に記号を置かない。** ⚠ `＋` / `−` に戻さないこと（`＋` は押せるボタンに見える。トップの `.afeed__sign` と同じ約束で、理由は `static/home.css` に書いてある）。 ⚠ **中心を 11px に置く。** 縦線（`.timeline::before`）が `left: 11px` なので、 幅 14px なら左 4px。ここをずらすと丸が線から外れる。 ⚠ `z-index` が要る —— 縦線の上に載せて、線を丸で分断して見せる。 */ .tl__node { width: 14px; height: 14px; border-radius: var(--radius-pill); flex: none; z-index: 1; margin: 6px 0 0 4px; } .tl--adopted .tl__node { background: var(--step-4); } /* 検出できなくなった側は**白抜きで弱く**。色で good / bad を出さない。 */ .tl--dropped .tl__node { background: var(--plane); box-shadow: inset 0 0 0 2px var(--baseline); } /* 観測の起点。⚠ **adopted（塗り）とも dropped（白抜き）とも違う形にする。** 塗ると「この日に導入した」に見え、白抜きにすると「消えた」に見える。 小さい点にして、**変化ではなく軸の端**であることを示す。 ⚠ `--baseline` は軸の色の変数で、この行の `.tl--start` とは無関係。紛らわしいが あちらが先にある（`static/app.css`）。名前を揃えないこと。 */ .tl--start .tl__node { width: 8px; height: 8px; margin: 9px 0 0 7px; background: var(--text-muted); } .tl--start .tl__what { color: var(--text-secondary); } /* ⚠ `max-width` はここが持つ（以前は `app.css` の「手当て」節に離れていた）。 バッジが画面の右端まで飛んでいたので、本文の幅で止めている。 */ .tl__body { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--gap-1) var(--gap-3); min-width: 0; max-width: 900px; } .tl__time { font-size: var(--fs-sm); color: var(--text-muted); font-variant-numeric: tabular-nums; width: 62px; flex: none; } .tl__what { font-size: var(--fs-md); } .tl--dropped .tl__what { color: var(--text-secondary); } /* ⚠ **`margin-left: auto` で右端に飛ばさない。** 「確度中」が本文から 700px 離れた位置に浮き、行ごとに有る／無いので**列に見えて揃っていない** という見え方になっていた。本文の続きとして、すぐ隣に置く。 */ .tl__meta { display: flex; align-items: center; gap: var(--gap-1); flex-wrap: wrap; } .tl__held { font-size: var(--fs-xs); color: var(--text-muted); } /* ============================================ 技術スタック（領域ごと） */ .area-block { margin: 0 0 18px; } /* ⚠ **列幅はいちばん長いプロダクト名に合わせる。** 215px だと `Google Workspace/Search Console` が3行に折れ、その1枚だけ背が高くなって 行が波打っていた。 */ /* ⚠ `grid-auto-rows: 1fr` と下の `.si { height: 100% }` は対。名前が2行に折れた カードだけ背が高くなっていたのを揃えている。**以前は `app.css` の「手当て」節に 離れていて、同じクラスの答えが2ファイルにあった。** */ /* ⚠⚠ **`grid-auto-rows: 1fr` に戻さない（2026-10-09）。** あれは**そのグリッドの全行**をいちばん高い行に揃える。結果、 「情シス」は2行目に2行名のカード（Atlassian (Jira/Confluence)）があるだけで **1行目まで引きずられて高く**なり、カード1枚の「営業」だけが低い、 という説明のつかない差になっていた（「なぜ salesforce は縦に小さくて、 下の情シスの一番上の行は小さくないんだろう」）。 **`auto` なら行ごとに中身の高さ。** 同じ行の中では grid の既定の `align-items: stretch` が揃えるので、**横は揃って、縦は要る分だけ**になる （「ミニマムな行だけでもミニマムな行にしてほしい」）。 ⚠ 下の `.si { height: 100% }` は**残す** —— 行の中で揃えるのはこれ。 */ .stack-grid { display: grid; gap: var(--gap-2); grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); grid-auto-rows: auto; } /* ⚠ **`center` にしない。** 名前が2行に折れた枚だけアイコンと「シグナル」が 下にずれて、隣のカードと目線が合わなくなる。上端で揃える。 */ .si { display: flex; align-items: flex-start; gap: var(--gap-ic-lg); min-width: 0; /* 上の `.stack-grid { grid-auto-rows: 1fr }` と対で、カードの高さを揃える。 */ height: 100%; padding: 9px 11px; border-radius: var(--radius-sm); background: var(--glass-strong); border: 1px solid var(--glass-edge); /* リンクを疑似要素でカード全面に伸ばすので、`.si` が位置の基準になる （下の `.si__name::after`）。**2箇所に `.si { ... }` を書かない。** */ position: relative; } .si__main { min-width: 0; flex: 1; } /* ⚠ **2行で打ち切る。** 3行目まで許すとカード1枚だけが伸びる。 `line-clamp` は行末で切るので、`text-overflow` と違って語の途中で切れない。 */ .si__name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: var(--fs-md); font-weight: var(--fw-medium); text-decoration: none; line-height: 1.35; /* ⚠⚠ **`min-height` を戻さない（2026-10-09 に入れて、その日のうちに外した）。** 「群をまたぐと高さが違う」を直すつもりで 2行ぶんを先に確保したが、 今度は**1行しか無いカードまで全部背が高く**なった。 「変に広げているところは広げないでほしいな。ミニマムな行だけでも ミニマムな行にしてほしい」と差し戻された。 **行の高さを揃えるのは `.stack-grid { grid-auto-rows: 1fr }` だけでよい** —— 同じ行の中で揃えば十分で、群ごとの高さの差は自然に読める。 */ } .si__name:hover { text-decoration: underline; } /* ⚠ **1行に収まるものだけを入れる。** 以前は中分類と提供元を「・」で繋いでいて、 `メールセキュリティ・Broadco…` のように**社名の途中**で切れていた。 提供元はプロダクトの個票が持っているので、ここでは中分類だけ出す。 */ .si__meta { font-size: var(--fs-xs); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .si--past { background: transparent; border-style: dashed; } /* ⚠ **`--fw-medium` に寄せない**（`app.css` の `.past .cname` と同じ理由。 560 は素の `.si__name` と同値で、しかも 400 より太い）。 */ .si--past .si__name { color: var(--text-secondary); font-weight: var(--fw-normal); } /* ⚠ **`.si--tech` は消した。** `kind`（営業ターゲット / その他の技術スタック）の 廃止で呼び出し元が無くなり、焼いた HTML に `si--tech` が1件も出ない。 残しておくと「段がもう1つある」と読ませて、次に触る人が 3段目を作る。 */ /* ==================================================== 会社プロフィール */ /* 検出の話より先に「どんな会社か」を置く面。 ⚠ 値が無い項目は HTML ごと来ない（`queries/company.py` の `_facts`）。 **「—」で埋めない**ので、1項目しか無い会社でも崩れないように `.facts` の auto-fit グリッドにそのまま乗せる。 */ /* ⚠ **下の余白を 0 にしない。** `section { margin: 0 0 40px }`（`app.css`）を `margin: 16px 0 0` で丸ごと打ち消していたので、**企業概要の面と次の 「観測できた技術スタック」の見出しが地続き**になり、節の区切りが消えていた （`.shared` は `margin-top` だけを足しているので、あちらは無事だった）。 下の値は共通の 40px より詰めてある —— 概要と技術スタックは同じ会社の話なので、 他の節ほど離す必要がない。 */ .prof { padding: var(--pad-panel); margin: 16px 0 30px; background: var(--glass-strong); } /* 数量にだけ tabular-nums。住所・業種に当てると字間が空いて読みにくい。 */ .prof__facts .prof__n { font-variant-numeric: tabular-nums; } /* 区切り線は **`
` 側の `border-bottom`**。 ⚠⚠ **`.prof__summary` に `border-top` を戻さない（2026-10-09 に直した）。** あちらは読みやすさのために `max-width: 76ch` を持っているので、 **線も 76ch で止まる** —— パネルは 1,400px 超あるのに線が 785px で切れていて、 何とも揃わない中途半端な位置で終わっていた（「線の場所とか変じゃない？」）。 **線の幅（器いっぱい）と文の幅（76ch）は別のもの**なので、 別の要素に持たせる。 ⚠ `:has()` で**概要が続くときだけ**引く。`
` に無条件で付けると、 概要が無い会社（gBizINFO に事業概要が無い）で**底に線だけが浮く**。 */ .prof__facts:has(+ .prof__summary) { padding-bottom: 13px; border-bottom: 1px solid var(--border); } /* 事業概要。**1段落に畳んで 160 文字で切ってある**（gBizINFO の最長は 2,588 文字）。 */ .prof__summary { margin: 14px 0 0; font-size: var(--fs-md); line-height: 1.75; color: var(--text-secondary); max-width: 76ch; } /* 出典。⚠ 公共データ利用規約1.0 の条件なので**消さない。** */ .prof__src { margin: 10px 0 0; font-size: var(--fs-xs); line-height: 1.7; color: var(--text-muted); } /* ====================================================== ドメインの共有 */ /* ⚠ 同じドメインに複数の法人がぶら下がる問題。**検出はドメイン単位**なので、 同居している法人にはまったく同じ結果が出る。ここを黙っていると 「なぜ子会社まで同じ SaaS を使っていることになっているのか」になる。 */ /* ============================================ 技術スタックのカード ⚠ **カード全体がクリックできること。** プロダクト名の文字だけがリンクだと、 カードのどこを押せばいいのかが画面ごとに違って見える（一覧の行は全体が 押せるのに、ここは名前だけ、という状態だった）。 ⚠ **`` でカードを包まない。** 中に「シグナル」のボタンがあるので、 入れ子の対話要素になって当たり判定が壊れる。リンクを疑似要素で カード全面に伸ばし、ボタンだけをその上に出す。 */ /* ⚠ **`a.` を外さないこと。** 「いまは検出できないもの」の中には**製品ページが 焼かれていない**プロダクト（最後の1社が落ちた製品）が混ざり、そこだけ `` になる（`pages/company.html`）。素の `.si__name::after` だと、リンクでもないのに透明な当たり判定がカード全面に乗る。 `saas.css` の `.ct tbody a.cname::after` と同じ作法。 */ a.si__name::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } .si:hover { border-color: var(--baseline); } /* ⚠ ボタンは伸ばしたリンクより上に置く。**同じ階層だと押せない。** */ .si .ev-btn { position: relative; z-index: 1; } /* ⚠ **ここの断り書きは見出しの「横」に置かない。** `.sec-head` は * `justify-content: space-between` なので、短い見出しと2行の長い文を並べると * 左右の端に引き離され、真ん中が空いて上のタイルとぶつかって見える。 * 1文として読ませたいものは**見出しの下**に置く。 */ .shared { margin-top: 26px; } .shared .sec-head { display: block; } .shared .sec-head .sub { margin-top: 4px; max-width: 78ch; } .shared__row { margin-top: 10px; padding: 13px 16px; border-radius: var(--radius-sm); background: var(--glass); border: 1px solid var(--glass-edge); } .shared__head { margin: 0 0 9px; font-size: var(--fs-md); color: var(--text-secondary); } .shared__head code { font-size: var(--fs-sm); } /* ============================================ 履歴の折り畳み（JS なし） */ /* ⚠ **JS を1行も足さない。** `
` + CSS だけで開閉する。 * * 素の は三角マーカーが出るだけで、開いた後に何のボタンか分からない * （「残り4件の履歴を見る」が開いた状態でも残る）。開/閉の文言を両方 HTML に * 置いておき、`details[open]` で出し分ける —— JS で書き換えるのと違い、 * **印刷・JS無効・検索エンジンのどれでも壊れない。** * * 見た目はサイトの他の部品に合わせる: --border の線、glass の面、chip と同じ丸み。 */ .log-more { margin: 14px 0 0; } .log-more__btn { display: inline-flex; align-items: center; gap: var(--gap-ic-lg); width: max-content; padding: var(--pad-btn-md); border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--glass-strong); color: var(--text-secondary); font-size: var(--fs-sm); font-weight: var(--fw-medium); cursor: pointer; /* 既定の三角マーカーを消す。Firefox は list-style、WebKit は擬似要素で出す。 */ list-style: none; transition: color .14s ease, border-color .14s ease; } .log-more__btn::-webkit-details-marker { display: none; } .log-more__btn:hover { color: var(--text-primary); border-color: var(--baseline); } /* ⚠ キーボードで開く人のためにフォーカスリングを残す（`outline: none` にしない）。 */ .log-more__btn:focus-visible { outline: 2px solid var(--series-1); outline-offset: 2px; } /* 開閉の向きを示す山形。**色は currentColor** なので新しい色が増えない。 */ .log-more__cue { width: 8px; height: 8px; flex: none; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .16s ease; } .log-more[open] .log-more__cue { transform: translateY(1px) rotate(225deg); } /* 文言の出し分け。閉じているときは「開く」、開いたら「閉じる」。 */ .log-more__label--open { display: none; } .log-more[open] .log-more__label--shut { display: none; } .log-more[open] .log-more__label--open { display: inline; } /* 開いた中身は上の履歴と地続きに見せる（縦線は .timeline::before が持つ）。 */ .log-more > .timeline { margin-top: 6px; } @media (prefers-reduced-motion: reduce) { .log-more__cue { transition: none; } } /* ============================================================ 狭い画面 */ /* ⚠ **640px を 599px に寄せた（2026-10-10）。** 段は compact(≤599) と wide(≥900) の2つだけで、その間（600〜899）は medium。数字は生で書くしかないので `tests/web/test_responsive.py` が許した2つ以外を落とす（設計は `docs/design/responsive.md` §2）。 ⚠ **599 であって 600 ではない。** `max-width: 600px` は 600px を含むので、 `min-width: 600px` と重なって両方効く幅が1px できる。 ⚠ **599 を選んだ理由は中身。** ここで畳んでいるのは「指で1列に読む」ための 2つ —— パネルの左右の余白を詰めて本文の幅を稼ぐのと、事業概要の 76ch の蓋を 外すこと —— で、**2列が入らなくなる話ではない**（この面はもともと1列）。 ⚠ **単純置換ではない。** 600〜640px は素のまま（`--pad-panel`）に戻るが、 あの帯はタブレット縦の手前で、左右 22px を削っても読みやすさは変わらない。 逆に 599 以下は 320px まで降りるので、そこでは 22px が効く。 */ @media (max-width: 599px) { .prof { padding: 16px 16px; } .prof__summary { max-width: none; } } /* ⚠ **`.cname--none` は `static/app.css` の `.cname` の隣へ移した。** 出しているのは共有部品の `parts/_table.html` で、その表はプロダクト個票 （`app.css` + `saas.css` しか配られない）にも出るのに、定義がここと `finder.css` にしか無く、**個票がある会社と無い会社が見た目で区別できなかった**。 ここに戻さないこと。 */ /* ============== 同じ県で同じものを検出できた会社（`_profile.nearby`）========= */ /* ⚠ **`.shared`（同じドメインの同居法人）と見た目を揃えない。** あちらは 「同じ検出結果が出てしまう」ことの断りで、こちらは関連する会社への導線。 同じ見た目にすると読み手が同じものだと思う（だから chips ではなく行で並べる）。 ⚠ 値は全部トークン（2026-10-09 に `--fw-*` / `--gap-*` / `--radius-*` を入れた）。 面ごとの CSS に生の px を書かない（`docs/design/web_design.md` §7.3）。 */ .nearby { margin-top: var(--gap-5); } .nearby .sec-head { display: block; } .nearby .sec-head .sub { margin-top: var(--gap-1); max-width: 78ch; } /* ⚠⚠ **`max-width: none` を落とさない（2026-10-09 に実測して直した）。** 親の `
` は 1,052px あるのに、`