/*
 * 健食ビジネスハブ 共通CSS（Phase 1）
 * 唯一の正: docs/design.md
 *
 * 構成:
 *   1. デザイントークン（:root） ... design.md §2
 *   3. ベース（*, body, .container, main, h1/h2, a）
 *   4. ヘッダー・トップバー（header, .brand, .topbar）
 *   5. 表（table, th, td, tr:hover, th/td.num, .bar）
 *   6. バッジ（.badge）
 *   7. カード（.cards, .card）
 *   8. フォーム（form.search・.field 骨格・入力欄・チェック・ボタン行・帯） ... design.md §5.26
 *   9. ボタン・フォーカスリング（button）
 *   10. チップ・ページャ・注記（.chips/.chip, .pager, .muted）
 *   11. メタ定義リスト・詳細・引用文（dl.meta, details pre, .claim）
 *   12. フッター（footer）
 *   13. ユーティリティ（.table-scroll）
 */

/* ------------------------------------------------------------ */
/* 1. デザイントークン（design.md §2） */
/* ------------------------------------------------------------ */
:root {
  /* 色 — ベース */
  --c-bg:        #EDF2F7;  /* ページ地。Zenn風の淡いブルーグレー */
  --c-surface:   #FFFFFF;  /* カード・ヘッダー・表の面 */
  --c-ink:       #1E293B;  /* 本文 */
  --c-sub:       #586577;  /* 補足・ラベル・メタ情報（白い面の上。白地 5.9:1・ページ地でも AA。旧 #64748B） */
  --c-sub-strong: #526077; /* 補足のうちページ地（--c-bg）に直置きされる文（.muted・パンくず・章の説明・
                              末尾注記）。--c-sub は #EDF2F7 上で 4.23:1 と AA に届かないため一段濃くする（5.65:1） */
  --c-line:      #E2E8F0;  /* 罫線（表内部など最小限に） */
  --c-line-strong: #CBD5E1;  /* 強い区切り（比較表のヘッダー下罫のみ） */

  /* 色 — アクセント（ティール） */
  --c-accent:        #0D9488;  /* 主アクセント: ボタン・アクティブタブ・強調 */
  --c-accent-strong: #0F766E;  /* リンク文字・hover。本文中でもAA確保 */
  --c-accent-soft:   #E6F7F4;  /* バッジ地・選択行・アクティブタブ地 */
  --c-accent-deep:   #115E59;  /* ヒーローのグラデ終点・フッター等の濃色面 */

  /* 色 — 姉妹ハブ（化粧品ビジネスハブ）のアクセント。相互リンクのカードだけに使う（計画 #2744・cosme-hub の --c-accent-strong/-soft と同値） */
  --c-sister-strong: #9a4a4a;
  --c-sister-soft:   #f8ebeb;

  /* 色 — 状態 */
  --c-danger:      #B91C1C;  /* 撤回・エラー */
  --c-danger-soft: #FEE2E2;
  --c-warn:        #B45309;  /* 注意・保留 */
  --c-warn-soft:   #FEF3C7;
  --c-info-soft:   #F1F5F9;  /* 中立バッジ地（準備中など） */
  --c-surface-soft: #F8FAFC; /* 面の中の一段薄い地（表の行hover・実績バー・CTAバー・サイドバーhover） */

  /* タイポグラフィ（design.md §6）。Webフォントは読み込まない。
   * 欧文を先頭に置き、英数字は欧文フォント・和文は和文フォントで描き分ける
   * （和文フォントの欧文グリフは字幅が広く、数値の多い当サイトでは緩んで見える）。
   * Windowsは游ゴシックRegularが細く霞むため Yu Gothic Medium を先に置く。
   * system-ui でなく -apple-system を使うのはWindowsでの和文解決を避けるため。
   * 旧指定の "Noto Sans JP" は撤去: Webフォント未読込のため端末に導入済みの人に
   * しか効かず実質死に指定だった。代わりに実効性のある Meiryo を置く。 */
  --font-sans: -apple-system, "Segoe UI", "Helvetica Neue",
               "Hiragino Sans", "Yu Gothic Medium", "Yu Gothic", "Meiryo", sans-serif;
  --fs-xs: 12px;   /* バッジ・注記 */
  --fs-sm: 13px;   /* メタ情報・ラベル・フッター */
  --fs-base: 15px; /* 本文 */
  --fs-md: 17px;   /* h2・カード見出し */
  --fs-lg: 22px;   /* h1（ページタイトル） */
  --fs-xl: 30px;   /* 大見出し（予備） */
  --lh-base: 1.7;  /* 本文行間。表内は1.5 */
  --measure: calc(42 * var(--fs-base));  /* 本文の読み幅＝本文の文字で全角42字（design.md §5.40）。小さい注記も同じ右端で揃える（本の版面と同じ） */

  /* 寸法 */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;
  --radius-sm: 6px;   /* 入力欄・ボタン */
  --radius-md: 10px;  /* 表・検索パネル */
  --radius-lg: 14px;  /* カード */
  --radius-full: 999px; /* バッジ・チップ */
  --pill-pad-xs: 1px 8px;  /* 小ピル（--fs-xs: .badge・.feed-cnt・.feed-ing-chip・.req・.feed-pulse）。
                              18px の行に収まる高さ 20px。各所の 1px 7px／2px 9px／2px 10px を統一した */
  --pill-pad-sm: 2px 10px; /* 中ピル（--fs-sm: .chip・.feed-attr-chip・.feed-prod-ing-chip） */
  --shadow-card: 0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
  --shadow-hover: 0 8px 24px rgba(13, 148, 136, .14);
  --shadow-float: 0 4px 16px rgba(15, 23, 42, .18), 0 2px 6px rgba(15, 23, 42, .12); /* 浮遊する面（モーダル等）の影 */
  --container: 1280px;       /* 全ページ共通。ヘッダー・本文・フッターの左端を1本の基準線に揃える（§4.3） */
  --pad-x: clamp(16px, 3vw, 40px); /* コンテナ左右パディング。モバイル16px〜デスクトップ40px（Zenn準拠）。§3 */
  --chart-w: 640px;          /* 統計チャートの既定幅（_yearly_linechart.html 等の width 既定値と一致。§5.16） */

  /* フォーム（design.md §5.26） */
  --c-field-line: #8090A8;   /* 入力欄・チェックの枠。白地で 3.2:1（WCAG 1.4.11）。--c-line は 1.2:1 で枠として見えない */
  --c-placeholder: #94A3B8;  /* プレースホルダー。入力済みの文字と見分けるため本文より明確に淡くする（一般的な gray-400 相当。2026-10-14） */
  --fs-input: 16px;          /* 入力文字。16px 未満だと iOS Safari がフォーカス時に自動ズームする */
  --field-h: 40px;           /* 入力欄・セレクト・フォーム内ボタンの高さ（§7 タップターゲット） */

  /* 固定ヘッダーの高さ（L1 56px＋L2 44px）と、それに依存する値。.side の sticky 位置と
   * 目次ジャンプ先の scroll-margin はここから導く（116/120px の直書きを1本化） */
  --head-h: 100px;
  --sticky-top: calc(var(--head-h) + var(--sp-4));

  /* 重なり順（下から）。数値を各所に直書きしない */
  --z-pop: 20;    /* サジェスト・ユーザーメニュー・ツールチップ */
  --z-float: 40;  /* 追従ボタン */
  --z-head: 50;   /* sticky ヘッダー */
  --z-bar: 60;    /* 一括問い合わせバー */
  --z-toast: 70;  /* トースト */
  --z-chat: 80;   /* サポート窓口（AI ヘルプチャット）の入口タブとパネル */
  --field-w-xs: 7em;         /* 郵便番号・年など桁数固定の短い値 */
  --field-w-sm: 12em;        /* 電話番号・法人番号(13桁)・確認コード */
  --field-w-md: 22em;        /* メールアドレス・氏名 */
  color-scheme: light;       /* Chrome の Auto Dark でフォーム部品だけ反転するのを抑止 */
}

/* ------------------------------------------------------------ */
/* 3. ベース */
/* ------------------------------------------------------------ */
* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--c-ink);
  background: var(--c-bg);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

/* コンテンツ領域。サイドバー付き（.has-side）は2カラムグリッド（design.md §4.3） */
.layout {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--sp-5) var(--pad-x) var(--sp-7);
}

.layout.has-side {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: start;
}

.layout main {
  min-width: 0; /* グリッド内で表がはみ出さないためのガード */
}

h1 {
  font-size: var(--fs-lg);
  margin: 0 0 var(--sp-4);
}

/* h1 の直後に .card（background・box-shadow を持つ箱）が来るとき、card 自身の
 * 上マージン16pxと h1 の margin-bottom（16px）を collapse させ、箱の外枠を h1 から
 * 16px 離す（他ページの「h1 直下=16px」に揃える。card 内側の padding 24px は箱の
 * デザインとしてそのまま残す）。padding 分を打ち消す negative margin だと箱自体が
 * h1 に重なって見た目の余白がゼロになるため使わない（2026-09-25 ユーザー指示で発覚・
 * 同日修正）。.top-company（PCでは display:none・スマホでは複製ブロック）を挟む
 * ケースも margin-top:0 なら .top-company 側の margin-bottom(16px) や h1 の
 * margin-bottom(16px) と自然に collapse して同じ16pxになる。
 * h1 の直後の h2（会社管理ホームの「受信トレイ」・お知らせの「対応が必要なこと」）も同じ。
 * h2 の上マージン24pxが勝つとタイトルと最初の見出しが離れすぎる（2026-10-14 ユーザー指示）。 */
:is(.acct, .acct-wide) h1 + h2,
:is(.acct, .acct-wide) h1 + .top-company + h2,
:is(.acct, .acct-wide) h1 + .card,
:is(.acct, .acct-wide) h1 + .top-company + .card,
:is(.acct, .acct-wide) h1 + .top-company + .acct-summary {
  margin-top: 0;
}

/* .acct-summary はグリッドなので子の .card の margin は親と collapse しない
 * （上のルールで .acct-summary 自体を押し上げても、grid item 自身の margin-top: 16px
 *  （.acct-wide .card 由来）がそのまま隙間として残ってしまう）。grid item の margin-top は
 *  .acct-summary の gap が担うので不要＝ 0 にする。 */
.acct-wide .acct-summary > .card {
  margin-top: 0;
}

h2 {
  font-size: var(--fs-md);
  margin: var(--sp-6) 0 var(--sp-3);
}

h3 {
  font-size: var(--fs-base);
  margin: var(--sp-4) 0 var(--sp-2);
}

/* 節の中の小見出し（会社ページ「品質・安全管理」の「第三者認証」「会社による記載」）。
 * h3 と同じ大きさだと節の切れ目と区別できないので、一段小さく・副色にする。
 * 素の h4 に掛けると既存の h4（求人市場・成分詳細等）の色が変わるのでクラスで限定。 */
h4.sub-h {
  font-size: var(--fs-sm);
  color: var(--c-sub);
  margin: var(--sp-3) 0 var(--sp-2);
}

/* 見出しの詰め組みと折返し（design.md §6）。
 * palt: 括弧・句読点の全角ベタ組みで空くアキを詰める。見出し専用で、本文・表には
 *   付けない（拾い読みの可読性が落ち、数値の桁も揃わなくなる）。
 * word-break: auto-phrase は文節境界で折り返す（Chrome 119+）。未対応ブラウザは
 *   従来どおり枠幅で折り返すだけで、崩れない。 */
h1, h2, h3, .feed-title {
  font-feature-settings: "palt";
  word-break: auto-phrase;
  text-wrap: pretty;
}

/* 読み幅（design.md §5.40）。本文の段落は全角42字で折り返す。
 * :where() で詳細度を0にし、部品側の指定（表・カード行・ラベル）が必ず勝つようにする。
 * - 本文カラム直下の段落・箇条書き（見出し下のリード・注記・地の文）は既定で止める
 * - パネル直下の段落も止める（表やグラフと同居するパネルは面を広いまま保ち、文だけを止める）
 * - 使い方ガイドのパネルは表を持つものも面ごと読み幅に合わせる（下の .help-card）
 * - 表のセル・カードの行・ラベル・見出しは対象外
 * - 中央寄せの短文（件数の足・空の案内）は対象外（左に寄せた箱の中で中央寄せすると中心がずれる） */
:where(.layout main) > :where(p:not(.list-count), ul:not([class]), ol:not([class])),
:where(.card:not(.empty)) > :where(p) {
  max-width: var(--measure);
}

/* 本文の段落は最終行の1〜2字の取り残し（「す。」だけの行）を避ける */
p { text-wrap: pretty; }

a {
  color: var(--c-accent-strong);
  text-underline-offset: .15em;  /* 和文の下線が字面に食い込まないよう少し離す */
}

/* スクロール挙動。縦スクロールバーの出入りで本文が横に揺れないよう gutter を常に確保し、
 * 目次ジャンプは「動きを減らす」設定でない人にだけ滑らかにする */
html {
  scrollbar-gutter: stable;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  /* 保存直後（#saved へ転送）は滑らかにしない。読み込みのたびに上端から下端まで流れて見える */
  html:has(#saved) { scroll-behavior: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

/* ------------------------------------------------------------ */
/* 4. ナビゲーション（design.md §4）
 *    L1 グローバルヘッダー＋L2 セクションタブ＝.site-head（sticky）
 *    L3 セクション内サイドバー＝.side（コンテンツ左220px） */
/* ------------------------------------------------------------ */
.site-head {
  position: sticky;
  top: 0;
  z-index: var(--z-head);
  background: var(--c-surface);
  box-shadow: var(--shadow-card);
}

/* L1: ブランド＋認証のみ。リンクの列挙は置かない（§4.1） */
.l1 {
  display: flex;
  align-items: center;
  min-height: 56px; /* height だと狭幅で中身がL2タブへはみ出す。高さは56pxのまま下限で持つ */
  gap: var(--sp-4);
}

.brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  min-width: 0; /* 狭幅で縮む側はブランド。認証側は縮ませない（下の flex-shrink: 0） */
}

/* 狭幅ではロゴが等比縮小して収まる（object-fit なしだと height 固定＋max-width で
 * 横だけ潰れる）。左寄せのまま縮めるため object-position は left。 */
.brand-logo {
  height: 26px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
}

/* L1 の検索欄（§4.1）。Zenn 同型: 認証の左に右寄せ・幅 280px・高さ 34px・角丸 10px の白地に
 * 枠1本、虫眼鏡は左の内側。縮み率 100 で、狭くなったら先に縮むのは検索欄（ロゴは縮めない）。
 * 狭幅（≤768px）では消し、認証列の虫眼鏡リンク（.l1-search-icon）に替える */
.l1-search {
  position: relative;
  flex: 0 100 280px;
  min-width: 0;
  margin-left: auto;
}

/* 余白の auto が2つあると余りを二分するので、検索欄があるときは認証側の auto を外す */
.l1-search + .l1-auth {
  margin-left: 0;
}

/* 共通の入力欄の規則（input:not(...)＝詳細度 0,1,1・後勝ち）に負けないよう form. を付ける */
form.l1-search input {
  appearance: none;
  min-height: 34px;
  padding-left: 36px;
  border-color: var(--c-line-strong);
  border-radius: var(--radius-md);
  text-overflow: ellipsis; /* 769〜900px 付近で縮んだとき例示文が入りきらない */
}

.l1-search button {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  color: var(--c-sub);
  cursor: pointer;
}

/* 共通の button:hover（塗り）を打ち消す。色だけ変える */
.l1-search button:hover {
  background: none;
  color: var(--c-accent-strong);
}

.l1-auth a.l1-search-icon {
  display: none;
}

.l1-auth {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: var(--fs-sm);
  flex-shrink: 0; /* 潰れると「ロ／グ／イ／ン」と1文字ずつ折り返してしまう */
}

.l1-auth a {
  color: var(--c-ink);
  text-decoration: none;
  white-space: nowrap;
}

.l1-auth a:hover {
  color: var(--c-accent-strong);
}

/* 掲載企業向けの案内（未ログイン時だけ・計画 #2642）。利用者向けの「ログイン」より一段沈め、
 * 縦の区切り線で認証系と分ける。≤768px では消す（下のメディアクエリ。フッターに同じ行き先） */
.l1-auth a.l1-for-co {
  color: var(--c-sub);
  padding-right: 14px;
  border-right: 1px solid var(--c-line);
}

.l1-auth a.btn-signup {
  background: var(--c-accent-strong);
  color: #fff;
  padding: 7px 14px;
  border-radius: var(--radius-full);
  font-weight: 600;
}

.l1-auth a.btn-signup:hover {
  background: var(--c-accent-deep);
  color: #fff;
}

/* L2: 全ページ共通の9タブ。折り返さず横スクロール（§4.2）。
   左右のグラデーションは JS 無しでスクロール可能性を示すaffordance（§9）。
   仕組み: cover 用の単色グラデーション（local＝コンテンツと一緒に動く）が、
   陰影グラデーション（scroll＝要素に固定）をスクロール端では覆い隠し、
   端でなくなった瞬間に自動で現れる（CSS-onlyのscroll shadowパターン）。 */
.l2-tabs {
  display: flex;
  gap: var(--sp-5);
  height: 44px;
  overflow-x: auto;
  scrollbar-width: none;
  background-image:
    linear-gradient(to right, var(--c-surface), var(--c-surface)),
    linear-gradient(to left, var(--c-surface), var(--c-surface)),
    linear-gradient(to right, color-mix(in srgb, var(--c-ink) 14%, transparent), transparent),
    linear-gradient(to left, color-mix(in srgb, var(--c-ink) 14%, transparent), transparent);
  background-repeat: no-repeat;
  background-size: 24px 100%, 24px 100%, 24px 100%, 24px 100%;
  background-position: left center, right center, left center, right center;
  background-attachment: local, local, scroll, scroll;
}

.l2-tabs::-webkit-scrollbar {
  display: none;
}

.l2-tabs a {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  color: var(--c-sub);
  text-decoration: none;
  font-size: 14px;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}

.l2-tabs a:hover {
  color: var(--c-ink);
}

.l2-tabs a.active {
  color: var(--c-ink);
  font-weight: 700;
  border-bottom-color: var(--c-accent);
}

/* L3: セクション内サイドバー（§4.3）。定義は各セクションbaseの sidebar ブロック */
.side {
  position: sticky;
  top: var(--sticky-top);
}

/* 公開 L3 サイドバーが低い画面で下まで届くよう、サイドバー自身を縦スクロールさせる
 * （design.md §9 の例外）。960px 以下はピル列（position: static）なので掛けない。
 * 会員エリアは会社切替のドロップダウン（.sc-panel・position: absolute）が内側に
 * 畳まれてしまうので外す */
@media (min-width: 961px) {
  /* スクロールは nav に掛ける（.side に掛けると、列の外＝本文との間に置く折りたたみ
   * ボタン .side-fold が切り取られる） */
  .side nav {
    max-height: calc(100dvh - var(--sticky-top) - var(--sp-4));
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }

  .side-account .side nav {
    max-height: none;
    overflow: visible;
  }
}

.side nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* L3 の折りたたみ（961px以上の公開セクションだけ・design.md §4.3）。base.html の
 * チェックボックス #side-fold を :has() で見て、220px の列を 0 に縮める。ボタンは
 * 先頭「トップ」の左上（.layout の上パディング 24px と左パディングの角）に置き、サブメニューを
 * 押し下げない。開くボタンも同じ場所に出る。
 * 960px 以下はピル列なので開閉ボタンを出さず、折りたたみ状態も効かせない。 */
.side-fold,
.side-unfold {
  display: none;
}

@media (min-width: 961px) {
  .layout.has-side {
    transition: grid-template-columns .2s ease;
  }

  .side-fold,
  .side-unfold {
    position: absolute;
    top: -17px; /* 上パディング 24px の中・トップに寄せる */
    left: -24px; /* 左パディング（16px より広い 961px 以上）の中 */
    width: 20px;
    height: 20px;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    color: var(--c-sub);
    cursor: pointer;
  }

  .side-fold:hover,
  .side-unfold:hover {
    background: var(--c-surface-soft);
    color: var(--c-ink);
  }

  /* マウスオーバーで出す吹き出し（title の既定の遅延を避ける） */
  .side-fold::after,
  .side-unfold::after {
    content: attr(data-tip);
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 20;
    padding: 4px 8px;
    border-radius: var(--radius-md);
    background: var(--c-ink);
    color: #fff;
    font-size: 12px;
    line-height: 1.4;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity .1s ease;
  }

  .side-fold:hover::after,
  .side-unfold:hover::after {
    opacity: 1;
  }

  .side-fold-box:focus-visible ~ .side .side-fold,
  .side-fold-box:focus-visible ~ .side .side-unfold {
    outline: 2px solid var(--c-accent);
    outline-offset: 2px;
  }

  .side-fold {
    display: flex;
  }

  /* 追従中もボタンの分（上パディングと同じ 24px）をヘッダーの下に空ける */
  .layout.has-side:has(> .side-fold-box) .side {
    top: calc(var(--sticky-top) + var(--sp-2));
  }

  .layout.has-side:has(> .side-fold-box) .side nav {
    max-height: calc(100dvh - var(--sticky-top) - var(--sp-2) - var(--sp-4));
  }

  /* 閉じたときは列を 0 に縮め、各項目を中黒で残す。開くボタンは閉じるボタンと同じ場所
   * （左パディングの中）から動かさず、中黒はその真下に同じ幅で並べる。項目名は右に吹き出しで出す */
  .layout.has-side:has(> .side-fold-box:checked) {
    grid-template-columns: 0 minmax(0, 1fr);
  }

  .layout.has-side:has(> .side-fold-box:checked) .side-fold {
    display: none;
  }

  .layout.has-side:has(> .side-fold-box:checked) .side-unfold {
    display: flex;
  }

  .layout.has-side:has(> .side-fold-box:checked) .side nav {
    margin: 10px 0 0 -24px; /* ボタンの left と同じ */
    overflow: visible; /* 吹き出しを切り取らない */
  }

  .layout.has-side:has(> .side-fold-box:checked) .side nav > a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px; /* ボタンと同じ幅 */
    height: 28px;
    padding: 0;
    font-size: 0;
  }

  .layout.has-side:has(> .side-fold-box:checked) .side nav > a::before {
    content: "・" / "";
    font-size: 22px;
    line-height: 1;
  }

  .layout.has-side:has(> .side-fold-box:checked) .side nav > a::after {
    content: attr(data-tip) / "";
    position: absolute;
    top: 50%;
    left: calc(100% + 6px);
    z-index: 20;
    padding: 4px 8px;
    border-radius: var(--radius-md);
    background: var(--c-ink);
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-50%);
    transition: opacity .1s ease;
  }

  .layout.has-side:has(> .side-fold-box:checked) .side nav > a:is(:hover, :focus-visible)::after {
    opacity: 1;
  }
}

@media (min-width: 961px) and (prefers-reduced-motion: reduce) {
  .layout.has-side {
    transition: none;
  }
}

.side a {
  display: block;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  color: var(--c-ink);
  text-decoration: none;
  font-size: 14px;
}

.side a:hover {
  background: var(--c-surface-soft);
}

.side a.active {
  background: var(--c-accent-soft);
  color: var(--c-accent-strong);
  font-weight: 600;
}

.section-label {
  display: flex;
  /* 見出しと補足リンクはベースライン揃え（文字の下端をそろえる） */
  align-items: baseline;
  flex-wrap: wrap;
  gap: .5em;
  font-size: 20px;
  color: var(--c-ink);
  letter-spacing: .04em;
  margin: 0 0 var(--sp-4);
  font-weight: 700;
}

/* 見出しの右に添える補足リンク（例: 制度比較への導線） */
.section-label .label-note {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
}

.section-label::before {
  content: "";
  display: inline-block;
  /* アイコンだけは従来どおり見出し文字の中央に置く */
  align-self: center;
  width: 1em;
  height: 1em;
  flex: none;
  background-color: var(--c-accent-strong);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* トップの3グループ見出しはグループごとに絵を変える（既定の虫眼鏡は「原料・会社・人を探す」に残す）。
 * 制度データ＝本棚（Lucide library）、業界の動き＝新着の配信（Lucide rss） */
.section-label.label-ic-library::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='m16 6 4 14'/><path d='M12 6v14'/><path d='M8 8v12'/><path d='M4 4v16'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='m16 6 4 14'/><path d='M12 6v14'/><path d='M8 8v12'/><path d='M4 4v16'/></svg>");
}

.section-label.label-ic-rss::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M4 11a9 9 0 0 1 9 9'/><path d='M4 4a16 16 0 0 1 16 16'/><circle cx='5' cy='19' r='1'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M4 11a9 9 0 0 1 9 9'/><path d='M4 4a16 16 0 0 1 16 16'/><circle cx='5' cy='19' r='1'/></svg>");
}

/* 横断検索の入力欄（トップ・/search）。白いパネルに入れず、幅を最大 640px に留める。
 * 虫眼鏡は左の内側（Zenn・Qiita の検索ページと同型）。送信ボタン（→）は欄の内側の右端に置き、
 * 文字が入るまで隠す: 空欄はヘッダー・Zenn と同じ静かな見た目、入力後は押せる的を見せる
 * （日本語入力は変換確定と送信の Enter が分かれる。送信ボタンを見せるのは NN/g の推奨）。
 * 欄の外に「検索」ボタンを接ぐ形は 2026-10 ユーザー差し戻し（実測13サイトで外付けは BBC・GOV.UK だけ） */
.site-search {
  max-width: 640px;
  margin-bottom: var(--sp-5);
}

.site-search-box {
  position: relative;
}

.site-search-box > svg {
  position: absolute;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
  color: var(--c-sub);
  pointer-events: none;
}

/* 共通の入力欄の規則（詳細度 0,1,1・後勝ち）に負けないよう親を2段で指す */
.site-search .site-search-box input {
  min-height: 48px;
  padding-left: 44px;
  padding-right: 52px;
  border-radius: var(--radius-md);
  text-overflow: ellipsis;
}

.site-search-box button {
  position: absolute;
  top: 6px;
  right: 6px;
  bottom: 6px;
  aspect-ratio: 1;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .15s ease, transform .15s ease, visibility .15s, background-color .15s ease;
}

/* 空欄の間は隠す（visibility で Tab 順からも外す。Enter での送信は隠れていても効く） */
.site-search-box input:placeholder-shown ~ button {
  opacity: 0;
  transform: scale(.85);
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .site-search-box button {
    transition: none;
  }
}

.hub-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--sp-5);
  margin-top: var(--sp-6);
}

.hub-groups .section-label {
  margin-bottom: var(--sp-3);
}

/* 行の並び。各行が自前の上下余白を持つ（.rank-panel と同型。面の上の内側余白＝行の上余白） */
.hub-panel {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--c-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.hub-panel li + li {
  border-top: 1px solid var(--c-line);
}

.hub-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  column-gap: var(--sp-3);
  row-gap: 2px;
  align-items: baseline;
  padding: var(--sp-3) var(--sp-4);
  text-decoration: none;
  color: var(--c-ink);
}

.hub-name {
  font-weight: 700;
}

.hub-row:hover .hub-name {
  color: var(--c-accent-strong);
  text-decoration: underline;
}

/* 総数のピルはティール（中立の .feed-cnt の例外。design.md §5.34） */
.hub-row .feed-cnt {
  grid-column: 3;
  justify-self: end;
  background: var(--c-accent-soft);
  color: var(--c-accent-strong);
}

/* 説明は全列をまたいで1行 */
.hub-desc {
  grid-column: 1 / -1;
  font-size: var(--fs-sm);
  color: var(--c-sub);
}

/* 直近7日の新着は総数ピルの左 */
.hub-new {
  grid-column: 2;
  font-size: var(--fs-sm);
  color: var(--c-sub);
  white-space: nowrap;
}

.hub-new b {
  color: var(--c-accent-strong);
}

/* 横断検索の結果（/search）: セクションごとのカードを格子に並べる。0件のセクションは出さない */
.site-search-results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--sp-4);
}

.site-hits {
  margin: var(--sp-2) 0;
  padding-left: 1.2em;
}

.site-hits li + li {
  margin-top: var(--sp-1);
}

/* 横断検索の結果カードは目次（nav.page-toc）から飛ぶ先。sticky ヘッダーに隠さない（§5.10） */
.site-search-results > section[id] {
  scroll-margin-top: calc(var(--head-h) + var(--sp-5));
}

/* 0件の分野は面を出さず、名前だけを1行に並べる（一覧ページへのリンク） */
.site-misses {
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-sm);
  color: var(--c-sub-strong);
}

/* ずばり1件（検索語が成分か会社にちょうど1件完全一致したとき）。目次より上に置く */
.best-bet {
  margin-bottom: var(--sp-4);
}

.best-bet-kind {
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--c-accent-strong);
}

.best-bet-sub {
  margin-left: var(--sp-2);
  font-weight: 400;
  color: var(--c-sub);
}

.best-bet h2 {
  margin: var(--sp-1) 0 0;
  font-size: var(--fs-xl);
}

.best-bet h2 a {
  color: var(--c-ink);
  text-decoration: none;
}

.best-bet h2 a:hover {
  color: var(--c-accent-strong);
}

.best-bet-desc {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-sm);
  color: var(--c-sub);
}

.best-bet-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-4);
  margin: var(--sp-3) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-sm);
  color: var(--c-sub);
}

.best-bet-facts strong {
  margin: 0 2px;
  font-size: var(--fs-base);
  color: var(--c-ink);
}

/* ------------------------------------------------------------ */
/* 5. 表 */
/* ------------------------------------------------------------ */
table {
  width: 100%;
  /* collapse だと border-radius が効かないため separate + spacing 0 で代替 */
  border-collapse: separate;
  border-spacing: 0;
  background: var(--c-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  font-size: var(--fs-sm);
  /* 等幅数字。数値列の桁をタテに揃える（design.md §5.2） */
  font-variant-numeric: tabular-nums;
}

th, td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--c-line);
  text-align: left;
  vertical-align: top;
  line-height: 1.5;
}

th {
  background: var(--c-surface);
  /* ヘッダーはインク（第3ラウンド検証で --c-sub から変更）。グレー文字は
     リンクと数字で埋まる実表ではノイズの床より沈み、階層を罫線に押し付けて
     いた。文字の色・太さは追加インクゼロの最もミニマルな強調 */
  color: var(--c-ink);
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
}

/* ヘッダー行の下だけ 2px で強める（design.md §5.2）。行ラベルの th
   （scope="row"）はヘッダー行ではないので通常の行区切りのまま。
   このサイトの表は <thead> を使わず1行目に th を並べる書き方が主流のため、
   thead ではなく th 自体で判定する */
th:not([scope="row"]) {
  border-bottom: 2px solid var(--c-line-strong);
}

/* 列間の縦罫（design.md §5.2）。表は「行を読む」だけでなく「列をたどる」
   ものが多く、幅の広い表ほど視線が隣の列に流れるため、罫線は最小限（§3）の
   例外として引く */
th + th, td + td, td + th, th + td {
  border-left: 1px solid var(--c-line);
}

tr:last-child td,
tr:last-child th[scope="row"] {
  border-bottom: none;
}

tr:hover td,
tr:hover th[scope="row"] {
  background: var(--c-surface-soft);
}

/* 統計・ランキング「業界が売り込んでいる成分」: セルの「N社」を開くと会社名のリンクが並ぶ（計画 #2314） */
.promo-cos { display: inline-block; vertical-align: top; }
.promo-cos > summary { cursor: pointer; list-style: none; color: var(--c-accent-strong); white-space: nowrap; }
.promo-cos > summary::-webkit-details-marker { display: none; }
.promo-cos > summary::after { content: " ▸"; }
.promo-cos[open] > summary::after { content: " ▾"; }
.promo-cos > ul { margin: 6px 0 0; padding: 0; list-style: none; font-size: var(--fs-xs); line-height: 1.6; }
.promo-cos > ul > li { display: inline; }
.promo-cos > ul > li + li::before { content: "・"; color: var(--c-sub); }

/* 成分詳細「業界紙の特集」: 行ごとに開閉する表（details の並び）。見た目は §5 の表に揃える */
.mf-table {
  background: var(--c-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}
.mf-head, .mf-row > summary, .mf-line {
  display: grid;
  grid-template-columns: 6.5em 9em 1fr 6em;
  line-height: 1.5;
}
.mf-head > span, .mf-row > summary > span, .mf-line > span { padding: 10px 12px; }
.mf-head > span + span, .mf-row > summary > span + span, .mf-line > span + span { border-left: 1px solid var(--c-line); }
.mf-head { font-weight: 600; border-bottom: 2px solid var(--c-line-strong); white-space: nowrap; }
.mf-row + .mf-row { border-top: 1px solid var(--c-line); }
.mf-row > summary { cursor: pointer; list-style: none; }
.mf-row > summary::-webkit-details-marker { display: none; }
.mf-row > summary:hover { background: var(--c-surface-soft); }
.mf-count { color: var(--c-accent-strong); white-space: nowrap; }
.mf-count::after { content: " ▸"; }
.mf-row[open] .mf-count::after { content: " ▾"; }
.mf-body {
  margin: 0;
  padding: 10px 12px 12px;
  background: var(--c-surface-soft);
  border-top: 1px solid var(--c-line);
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 12px;
}
.mf-body dt { color: var(--c-sub); white-space: nowrap; }
.mf-body dd { margin: 0; }
@media (max-width: 640px) {
  .mf-head { display: none; }
  .mf-row > summary, .mf-line { grid-template-columns: 1fr auto; }
  .mf-row > summary > span, .mf-line > span { padding: 4px 12px; border-left: none !important; }
  .mf-row > summary > span:nth-child(3) { grid-column: 1; }
  .mf-row > summary > span:nth-child(4) { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
}

/* OEM の成分索引（/oem/ingredients）の補助列。モバイルでは「OEM」「直近24か月」だけを残す（計画 #2463） */
@media (max-width: 640px) {
  .oem-ix-wide { display: none; }
}

/* 数値列は右寄せ（design.md §6）。日付・順位・テキスト列には付けない */
th.num, td.num {
  text-align: right;
}

/* 料金表のプラン列（見出し・○×・人数）は中央寄せ。行ラベルの列は左寄せのまま */
table.plan-compare th[scope="col"] + th, table.plan-compare td {
  text-align: center;
}

/* 料金ページ /pricing（2026-10-28 意匠モック）。プランカードを横に並べ、比較表はグループ別の折りたたみにする。
   比較表はグループごとに別の表なので、列幅を固定して表の間で列をそろえる */
table.plan-compare {
  table-layout: fixed;
  width: 100%;
  min-width: 640px;
}
table.plan-compare th[scope="row"] {
  width: 34%;
  white-space: normal;
}
/* 使える機能は薄い緑で塗った丸、使えない機能は「-」だけにして、○×より一目で見分けられるようにする */
table.plan-compare .cmp-dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: color-mix(in srgb, var(--c-accent) 50%, transparent); vertical-align: -2px; }
table.plan-compare td.cmp-no { color: var(--c-sub); }
.plan-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--sp-4);
  margin: var(--sp-5) 0 var(--sp-6);
}
.plan-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 0;
}
.plan-card > * { margin: 0; }
/* おすすめのプランは影の輪で囲む（枠線は使わない。§9） */
.plan-card.is-pick {
  box-shadow: 0 0 0 2px var(--c-accent), var(--shadow-card);
}
.plan-name { font-size: var(--fs-md); }
.plan-card .plan-name { margin: 0; }  /* .chapter h3 の余白に負けないように（/for-companies） */
.plan-name .badge { margin-left: var(--sp-2); vertical-align: 2px; }
.plan-for, .plan-base { font-size: var(--fs-sm); color: var(--c-sub); }
.plan-price { font-size: var(--fs-sm); color: var(--c-sub); }
.plan-yen {
  font-size: 24px;
  font-weight: 700;
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
}
.plan-seats { font-size: var(--fs-sm); }
.plan-note { font-size: var(--fs-xs); color: var(--c-accent-strong); font-weight: 600; }
/* 月払い／年払いの切替（JS を使わずラジオ＋:has() で出し分ける。既定は月払い） */
.bill-toggle {
  display: inline-flex;
  gap: var(--sp-1);
  margin: var(--sp-5) 0 0;
  padding: var(--sp-1);
  border: 0;
  border-radius: var(--radius-full);
  background: var(--c-surface);
}
.bill-toggle label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-full);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-sub-strong);
  cursor: pointer;
}
.bill-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.bill-toggle label:has(input:checked) { background: var(--c-accent-soft); color: var(--c-accent-strong); }
.bill-toggle label:has(input:focus-visible) { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.plan-billing .bill-y { display: none; }
.plan-billing:has(input[value="y"]:checked) .bill-m { display: none; }
.plan-billing:has(input[value="y"]:checked) .bill-y { display: inline; }
.plan-billing:has(input[value="y"]:checked) p.bill-y { display: block; }
.plan-seats strong { font-size: var(--fs-md); }
/* 有料プランのアカウント数は人数を出さず「制限なし」バッジだけを出す（パネル・比較表） */
.plan-seats .badge { margin-left: var(--sp-1); vertical-align: 1px; white-space: nowrap; }
.plan-compare .cmp-seat .badge { white-space: nowrap; }
.plan-points {
  padding-left: 1.2em;
  font-size: var(--fs-sm);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.plan-cta { margin-top: auto; padding-top: var(--sp-2); }
.plan-cta a { width: 100%; }
/* 準備中のプランは中身を薄くし、相談ボタンの代わりに押せない枠を置く */
.plan-card.is-soon > :not(.plan-name, .plan-cta) { opacity: .45; }
.plan-card.is-soon .plan-name { color: var(--c-sub); }
.plan-soon {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--field-h);
  border: 1px dashed var(--c-field-line);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  color: var(--c-sub);
}
details.plan-group { margin-bottom: var(--sp-4); }
details.plan-group > summary {
  font-weight: 600;
  margin-bottom: var(--sp-2);
}
.plan-faq { display: flex; flex-direction: column; gap: var(--sp-4); }
.plan-faq details > summary { font-weight: 600; }
.plan-faq details > p { margin: var(--sp-2) 0 0; color: var(--c-sub); }

/* セルの二段組（design.md §5.2）。結論を .cv、補足を .cd に分けると
   長文セルでも結論だけを拾い読みできる。どの表でも使える汎用クラス */
.cv {
  display: block;
  font-weight: 600;
  color: var(--c-ink);
}

.cd {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-xs);
  color: var(--c-sub);
  line-height: 1.6;
}

/* 程度を表す3段メーター。値の本体は必ず .cv の文字（最小／中／大 等）で示し、
   メーターは視覚補助として aria-hidden="true" を付けて使う */
.meter {
  display: inline-flex;
  gap: 3px;
  margin-top: 5px;
}

.meter i {
  width: 16px;
  height: 5px;
  border-radius: 3px;
  background: var(--c-line);
}

.meter i.on {
  background: var(--c-accent);
}

/* ------------------------------------------------------------ */
/* 5-b. 比較表 .compare-matrix（design.md §5.2追補）
 * /compare の3制度比較専用。縦罫・ヘッダー下2px・.cv/.cd の二段組は
 * §5.2 本則として全表に展開済みなので、ここに残すのは比較表だけの上乗せ:
 *   ① 制度型（届出制・許可制・自己認証制）を行ではなくヘッダーのバッジに
 *   ② 列幅を固定し、行ラベル列を横スクロール時に左端固定
 *   ③ ヘッダーとセルを一覧表より広く取る
 * ヘッダー行の地は §5.2 どおり --c-surface のまま（緑ベタ塗りはしない）。 */
/* ------------------------------------------------------------ */
.compare-matrix {
  table-layout: fixed;
  min-width: 660px;
  /* 1列目の sticky（下記）を効かせるため、角丸のクリップは
     .table-scroll 側に持たせて table 自身は overflow を切らない */
  overflow: visible;
}

.compare-matrix col.rowhead-col {
  /* 最長ラベル「費用・期間の目安」が折り返さない幅 */
  width: 132px;
}

.compare-matrix thead th {
  vertical-align: bottom;
  padding: 14px 14px 12px;
  white-space: normal;
}

/* ヘッダーの制度名と、その下の制度型バッジ */
.compare-matrix .inst {
  display: block;
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--c-ink);
  line-height: 1.35;
}

.compare-matrix .type-badge {
  display: inline-block;
  margin-top: 7px;
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: var(--pill-pad-xs);
  border-radius: var(--radius-full);
  background: var(--c-info-soft);
  color: var(--c-sub);
  white-space: nowrap;
}

.compare-matrix tbody th[scope="row"] {
  background: var(--c-surface);
  color: var(--c-sub);
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: normal;
  padding-top: 12px;
}

.compare-matrix td {
  padding: 11px 14px 12px;
}

/* 横スクロールする幅では、行ラベル列を左端に固定して現在行を見失わせない。
   .table-scroll がスクロールポートなので table 側の overflow は visible。
   角丸のクリップはこのラッパーが担う。 */
.table-scroll.is-matrix {
  border-radius: var(--radius-md);
}

.compare-matrix thead th:first-child,
.compare-matrix tbody th[scope="row"] {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--c-surface);
  box-shadow: 1px 0 0 var(--c-line);
}

/* OEM の比較表（/oem/stats・計画 #2414・考察_OEMタブのサブメニュー §10.2）。
   1型の表（§5.2）。列が多いので会社名の列（2列目）を横スクロール時に左端へ固定する。
   ☆列はアイコンだけ（§5.2追補2。ラベルは aria-label）。認証は出自ごとに1行。
   640px以下はカード＋チップに畳む（見出し行を隠し、各セルを data-label 付きのチップにする）。 */
.compare-table .compare-name {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--c-surface);
  box-shadow: 1px 0 0 var(--c-line);
  font-weight: 600;
  min-width: 10em;
}

.compare-table .compare-fav,
.compare-table .compare-add {
  width: 1%;
  white-space: nowrap;
}

.compare-table .feed-fav-btn {
  padding: 4px 6px;
}

/* 右端の問い合わせ列: OEM カードの CTA 帯（.slim）と同じ部品を縦に積む（幅はそろえる） */
.compare-cta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
}

.compare-cert {
  display: block;
}

.compare-src {
  font-size: var(--fs-xs);
  color: var(--c-sub);
}

.compare-cols {
  border: 0;
  margin: 0;
  padding: 0;
}

.compare-cols label {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  margin-right: var(--sp-3);
  font-weight: normal;
}

@media (max-width: 640px) {
  .compare-table,
  .compare-table tbody,
  .compare-table tr,
  .compare-table td {
    display: block;
  }

  .compare-table tr:first-child {
    display: none;
  }

  .compare-table tr {
    position: relative;
    padding: var(--sp-3) 44px var(--sp-3) var(--sp-3);
    border-bottom: 1px solid var(--c-line);
  }

  .compare-table tr:last-child {
    border-bottom: 0;
  }

  .compare-table td,
  .compare-table td + td {
    border: 0;
    padding: 0;
  }

  .compare-table .compare-name {
    position: static;
    box-shadow: none;
    min-width: 0;
    margin-bottom: var(--sp-2);
  }

  .compare-table .compare-fav {
    position: absolute;
    top: var(--sp-3);
    right: var(--sp-3);
    width: auto;
  }

  .compare-table td[data-label] {
    display: inline-block;
    margin: 0 4px 4px 0;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    background: var(--c-bg);
    font-size: var(--fs-xs);
    text-align: left;
  }

  .compare-table td[data-label]::before {
    content: attr(data-label) "：";
    color: var(--c-sub);
  }

  .compare-table .compare-cert {
    display: inline;
  }

  .compare-table .compare-add {
    width: auto;
    margin-top: var(--sp-2);
  }
}

/* 表内ミニ棒グラフ（design.md §5.15）。テンプレートからは _macros.html の
   bar マクロ経由で使う。min-width はゼロ・微小値でも棒の存在を示すため */
.bar {
  background: var(--c-accent-soft);
  border-radius: 4px;
  height: 16px;
  min-width: 2px;
}

/* ------------------------------------------------------------ */
/* 6. バッジ */
/* ------------------------------------------------------------ */
.badge {
  display: inline-block;
  padding: var(--pill-pad-xs);
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
}

/* 表のセル内にバッジを複数並べる列（会社ディレクトリの業態）。インラインのまま
   折り返すと上下のバッジが接するため、flex の gap で行間を確保する。 */
.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.badge.active {
  background: var(--c-accent-soft);
  color: var(--c-accent-strong);
}

.badge.withdrawn {
  background: var(--c-danger-soft);
  color: var(--c-danger);
}

/* 見出し文中の検索語強調（/oem。仕様書_サプライヤー検索と問い合わせリレー
   §2.16「マッチ理由は既存部品の強調で語る」— チップのティール強調と同系色） */
mark.hl {
  background: var(--c-accent-soft);
  color: var(--c-accent-strong);
  font-weight: 600;
  padding: 0 2px;
  border-radius: 3px;
}

/* 届出フィードカードの状態バッジ「販売休止中」にも使用（design.md §5.18・/notifications） */
.badge.warn {
  background: var(--c-warn-soft);
  color: var(--c-warn);
}

/* 届出フィードカードの状態バッジ「販売状況 未報告」にも使用（design.md §5.18） */
.badge.neutral {
  background: var(--c-info-soft);
  color: var(--c-sub);
}

/* トレンドウォッチ: 週次確定の順位変動（前週比↑↓）。バッジ地は敷かず文字色のみで
   軽く示す（状態チップの.badgeと役割が重ならないようにする） */
.rank-up {
  color: var(--c-accent-strong);
  font-weight: 600;
}

.rank-down {
  color: var(--c-danger);
  font-weight: 600;
}

/* 季節トレンド /trendwatch/calendar の月別トピック行 */
.cal-topics { margin: 0; padding-left: 0; list-style: none; }
.cal-topic { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 6px 0; }
.cal-topic + .cal-topic { border-top: 1px solid var(--c-line); }
.cal-topic .cal-bars { margin-left: auto; }
.cal-mini { display: block; flex: none; }  /* 月別ミニ棒グラフの svg */
.cal-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; }
.cal-links { display: inline-flex; flex-wrap: wrap; gap: 0 10px; }
/* 月の下に添える別の暦（展示会・業界紙の特集）。素材の行と混ぜない */
.cal-side { margin-top: 8px; padding-top: 6px; border-top: 1px dashed var(--c-line); font-size: 12.5px; }
.cal-side p + p { margin-top: 2px; }

/* ------------------------------------------------------------ */
/* 7. カード */
/* ------------------------------------------------------------ */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--sp-3);
  margin: var(--sp-4) 0 var(--sp-2);
}

.card {
  background: var(--c-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--sp-5);
}

/* カードの中の区切り（フォームの下に関連の一覧を続ける等）。上に罫線、表は面を重ねない */
.card-section {
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-line);
}
.card-section > h3:first-child { margin-top: 0; }
.card-section .table-scroll,
.card-section table {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

/* カード内の章見出し（フォームの章分け等）。カードの padding に h2 の上マージンを重ねない */
.card > h2:first-child,
.card > form > h2:first-child {
  margin-top: 0;
}

/* ===== パネル（白い面）の上の内側余白は左と同じにする（design.md §5.1） =====
   対象のパネルは PANEL_SELECTORS（tests/test_panel_top_inset.py）。面を持つ新しいクラスを作ったら
   ①padding を上下左右同じ値にする ②下の一覧に足す（足さない理由があればテストの除外表に書く）。
   1. 先頭の子の上マージンを重ねない。
   2. 文字が先頭なら、行間の上半分ぶん文字が下がって見えるので、先頭行の上の余白を字面（cap）まで削る。
      日本語の字は cap より約2px上に出るので padding-top 2px で戻し、見える上端を左の余白と揃える。
      text-box-trim は flex・grid の子へは効かないので、行を並べるパネルは子ごとに指定する。
   3. text-box-trim 非対応のブラウザ（Firefox 等）では、行間の上半分を負の margin-top で相殺する
      （!important は style 属性の margin:0 0 6px 等に勝つため）。 */
:root {
  --panel-trim-pad: 2px;
  --panel-trim-shift: 0px;
  --panel-trim-inset: 2px;
}
@supports not (text-box: trim-start cap alphabetic) {
  :root {
    --panel-trim-pad: 0px;
    --panel-trim-shift: calc((1em - 1lh) / 2);
    --panel-trim-inset: calc((1em - 1lh) / 2);
  }
}
:is(.card, .panel, .feed-card, .related-info, .prose, .grp, .co-box, .claim) > :first-child,
.card > form:first-child > :first-child {
  margin-top: 0;
}
:is(.card, .panel, .feed-card, .related-info, .prose, .grp, .co-box) > :first-child:not([class*="msg-"], .table-scroll, form, table, dl, .top-item, .crawl-timeline, .stat-row, .feed-head, .h-more, .mp-co),
.card > form > .form-fields:first-of-type > .field:first-child > :first-child,
.card > form:first-child > label:first-child,
.card > form > fieldset.field:first-of-type > legend,
.card > form > fieldset.field:first-of-type > .form-fields > .field:first-child > :first-child,
.card > form > .form-fields:first-of-type > fieldset.field:first-child > legend,
.card > .top-item:first-child > .top-item-body,
.card > .crawl-timeline > li:first-child,
.panel > .stat-row:first-child > * > :first-child,
:is(dl.meta:not(.spec-panel dl), .grp > dl:first-child) > :is(dt:first-child, dt:first-child + dd),
form.search > :not(.actions, .field-choice) > label:first-child,
.visit-item > :is(.visit-booth, .visit-body) {
  text-box: trim-start cap alphabetic;
  padding-top: var(--panel-trim-pad);
  margin-top: var(--panel-trim-shift) !important;
}
/* 先頭が flex の見出し（脇に「すべて見る」）は text-box-trim が効かないので、行間の上半分を margin で相殺する */
:is(.card, .panel, .feed-card, .related-info, .prose, .grp, .co-box) > .h-more:first-child {
  margin-top: calc((1em - 1lh) / 2) !important;
}
/* 見出し行が flex（アイコン＋題名＋お気に入り）のカードは行ごと上げる。アイコンは題名の字面に揃えてあるので
   題名だけを削るとずれる。-3px はアイコン上端の字面が左の余白（アイコン左端の字面）と揃う実測値 */
:is(.feed-card, .panel) > .feed-head:first-child {
  margin-top: -3px;
}

/* 表の数値セル（td.num・th.num）は除く。除かないとカードの中の表で数値の列だけ 24px 太字になる（2026-10-25） */
.card .num:not(th, td) {
  font-size: 24px;
  font-weight: 700;
  /* 等幅数字。カードが横に並ぶと桁位置のズレが目立つ（design.md §6） */
  font-variant-numeric: tabular-nums;
}

.card .label {
  color: var(--c-sub);
  font-size: var(--fs-sm);
}

/* フィードカード .feed-card（発見型一覧。design.md §5.17・初出 /ingredients/list）。
 * §5.1 の .card と違い影なし・枠線あり（縦に連続する面はスキャンに枠の区切りが効く）。
 * 帯（ゾーン）はヘアラインと微差の地色のみで分節し、グレー面で塗り分けない。 */
.feed-card {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
  margin: 0 0 var(--sp-3);
  transition: border-color .15s ease, box-shadow .15s ease;
  /* 画面外カードの描画スキップ（Issue #816・1,000枚超の一覧で初回描画を軽くする）。
   * intrinsic-size はカード実測高の概算。auto 付きで実測後は実寸を記憶する。 */
  content-visibility: auto;
  contain-intrinsic-size: auto 160px;
}

/* content-visibility: auto はペイント封じ込め（contain: paint）を伴い、枠外へ出る
 * ポップオーバー（.feed-pulse-pop）が切れる。開いている間だけ解除する。 */
.feed-card:has(.feed-pulse-wrap:hover, .feed-pulse-wrap:focus-within, .feed-pulse-wrap.open) {
  content-visibility: visible;
}

.feed-card:hover {
  border-color: var(--c-sub);
  box-shadow: var(--shadow-card);
}

/* 文脈行（検索で別名ヒットした行のみ）。一致語は mark.hl（既存クラス）で強調 */
.feed-context {
  font-size: var(--fs-xs);
  color: var(--c-sub);
  margin: 0 0 var(--sp-2);
}

/* ヘッダー行: 行種アイコン＋タイトル列＋右端のお気に入りボタン */
.feed-head {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
}

.feed-icon {
  flex: 0 0 auto;
  color: var(--c-sub);
  margin-top: 4px; /* タイトル1行目の字面の中心に揃える（3px だと約1px上に浮く） */
  line-height: 0;
}

.feed-head-main {
  flex: 1 1 auto;
  min-width: 0;
}

.feed-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}

/* タイトル: 17px・600・アクセント色（フィードの視線アンカー。§5.17） */
.feed-title {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--c-accent-strong);
  text-decoration: none;
}

.feed-title:hover {
  text-decoration: underline;
}

/* 会社名の法人格略記（company_short フィルタ）。社名本体より小さく・薄く沈め、
   一覧で社名の頭が揃って読めるようにする。太字・リンク色の中でも効くよう em 指定。 */
.lf {
  font-size: .78em;
  font-weight: 400;
  color: var(--c-sub);
  letter-spacing: -.02em;
}

/* 表のセルの長い社名（company_short(cell=True)）。語の途中では切らず、空白・括弧の前・<wbr> でだけ折り返す。 */
.co-wrap { word-break: keep-all; }
/* 社名列の th。列を最小内容幅まで縮める＝幅は1行に収まる社名（12字以下）の最長に揃い、長い社名は区切りで折り返す。余りは他の列へ。 */
.co-col { width: 1%; min-width: 8em; }

.feed-meta {
  margin: 2px 0 0;
}

.feed-fav {
  flex: 0 0 auto;
}

.feed-fav-form {
  margin: 0;
}

.feed-fav-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-full);
  padding: 4px 10px;
  font-size: var(--fs-xs);
  color: var(--c-sub);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}

.feed-fav-btn:hover {
  background: none;
  border-color: var(--c-accent);
  color: var(--c-accent-strong);
}

.feed-fav-btn.on {
  color: var(--c-accent-strong);
  border-color: var(--c-accent-strong);
  background: var(--c-accent-soft);
}

/* アイコンのみ版（文字ラベル<span class="lbl-fav">を持たない用途・
   トクホ品目検索一覧の☆列など密なテーブル向け・Issue #907）。
   ラベル分の横幅が要らないため左右パディングを詰める。 */
.feed-fav-btn-icon {
  padding: 4px 6px;
}

/* 本文: 手がかりスロット（説明文1文 or 銘柄名）＋機能性タグ */
.feed-body {
  margin: var(--sp-2) 0 0;
}

.feed-clue {
  margin: 0 0 var(--sp-2);
  color: var(--c-sub);
  font-size: var(--fs-sm);
  /* 説明の2行クランプ（design.md §5.17） */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.feed-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

/* 実績バー: カード下端・地色#F8FAFC（.side a:hover と同値・design.md §5.17）＋
 * 上ヘアライン。カードのパディング分を打ち消して縁まで敷く */
.feed-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1) var(--sp-4);
  margin: var(--sp-3) calc(var(--sp-4) * -1) calc(var(--sp-4) * -1);
  padding: var(--sp-2) var(--sp-4);
  background: var(--c-surface-soft);
  border-top: 1px solid var(--c-line);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.feed-stat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--c-sub);
  text-decoration: none;
  font-size: var(--fs-sm);
}

/* 和文の字面は行ボックスの中心より上に寄るため、アイコンを1px上げて字面の中心に揃える */
.feed-stat > svg {
  position: relative;
  top: -1px;
}

.feed-stat:hover {
  color: var(--c-accent-strong);
}

.feed-stat-empty {
  color: var(--c-sub);
}

/* カウンター: GitHubのCounterと同型（--c-line地・--c-ink・600・tabular-nums）。
 * クラス名に pill を含めない（.pill は §4.4 のセグメントピル専用） */
.feed-cnt {
  background: var(--c-line);
  color: var(--c-ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  border-radius: var(--radius-full);
  padding: var(--pill-pad-xs);
  font-size: var(--fs-xs);
}

/* 規制情報の項目のみアンバー系（警告でありながら根拠への扉。design.md §5.17） */
.feed-stat-warn {
  color: var(--c-warn);
}

.feed-stat-warn:hover {
  color: var(--c-warn);
}

.feed-cnt-warn {
  background: var(--c-warn-soft);
  color: var(--c-warn);
}

/* CTA着地型フィードカード（design.md §5.17「CTA着地型の変形」・仕様書_サプライヤー
 * 検索と問い合わせリレー §2.19確定版。2026-08-07 v7.1）。会社帯の右肩スロット
 * （お気に入りのみ。併記していた更新日は §2.19改定 2026-08-08 で撤去）。
 * CTAはヘッダーでなく下端のアクションバーへ移した。 */
.feed-head-side {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: 2px;
}


/* 製品帯: ヘアラインのみで会社帯と分節する（地色は塗らない・§2.19「帯の分節は
 * ヘアラインのみ」＝会社帯／製品帯の境目の話。下端のアクションバーだけは実績バー
 * の読み替えで地色を持つ・下記）。ラベル「［◯◯］N製品」＋製品名のテキスト
 * 列挙。左は会社名の列に揃える（.feed-icon 18px＋gap 8px＝26px。ヘアライン
 * 自体はカード幅いっぱいのまま）。 */
.feed-prod-band {
  margin: var(--sp-3) 0 0;
  padding: var(--sp-3) 0 0 26px;
  border-top: 1px solid var(--c-line);
}

/* 検索ヒット行（OEM検索 /oem・§2.19 v7.3・2026-08-15新設）。「なぜこの会社が
 * 出たか」の答え＝検索者の最重要情報を、定数の実績行の上に独立行として置く。
 * 確定意匠（検討記録で決着）はアンバー文字のみ（地なし・600）— 18pxに上げた
 * ic_search_check() が注目を担うため、面を塗らずとも十分に立つ。塗り面は
 * カード内の地色を増やし一覧で密度が上がるため不採用。公開面のアンバーは
 * 規制情報・販売状況（§5.17実績バー・§5.18状態バッジ）とこの行の用途に限定する
 * （1カード1アンバー＝警告でなく「該当」の合図）。
 * 縦位置は inline-flex＋align-items:center＋gap で揃える（.feed-pulse／
 * .feed-fav-btn／.feed-phone と同じ文法）。svg を素の行内要素のまま
 * vertical-align:middle で置くと、18pxアイコンの中心が13px文字の中心より
 * 約1.6px下がる（実測）ため、px単位の補正でなく揃え方そのものを合わせる。
 * 間隔は gap（margin ではなく）。 */
.feed-match-line {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 var(--sp-1);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-warn);
}

.feed-match-line strong {
  font-size: var(--fs-base);
  font-variant-numeric: tabular-nums;
}

/* 会社未収載の行（company_id なし・§2.19 A-3）: 会社帯タイトルの素テキスト版。
 * .feed-title と同じ寸法・太さだが、リンクでないためアクセント色でなく
 * 本文色（--c-ink）。 */
.feed-title-plain {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--c-ink);
}

/* 実績帯のチップ列（OEM検索・剤形／認証／最小ロット等の統制語彙。.badge を
 * 6pxの間隔で並べる。既存の .feed-tags は §5.17発見フィードの .feed-body 内
 * 専用のため、実績帯（26px字下げ・独自の上下マージン）用に軽量に持つ）。 */
.feed-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 var(--sp-2);
}

/* 見出し文（OEM検索・取扱会社カード〔§2.19 v7.6〕。mark.hl で検索語を強調）。 */
.feed-feature {
  margin: 0;
  color: var(--c-sub);
  font-size: var(--fs-sm);
}

.feed-prod-label {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-sm);
}

.feed-prod-label a {
  color: var(--c-sub);
  text-decoration: underline;
}

.feed-prod-label a:hover {
  color: var(--c-accent-strong);
}

/* 帯ラベルの原料名チップ（v7.3・2026-08-13。design.md §5.17・仕様書_サプライヤー
 * 検索と問い合わせリレー §2.19）。v7.2 で製品名の枠線チップを廃した規律
 * 「チップ＝統制語彙の語形」に対し、原料名は統制語彙そのものなのでチップが正しい
 * 語形になる。出すのはリンクする行だけ（テンプレの show_ing_link＝ページの成分と
 * 異なる行）で、チップの有無が「このページの成分そのもの／その下位成分」の差を
 * 文言なしで示す。同一成分の自明な行は素テキスト「◯◯（N製品）」のまま。
 * 件数は面に載せない（丸い面を1行に2つ並べない・§5.17「形状の種類を増やさない」）。 */
.feed-prod-label.has-chip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}

/* 会社カードの帯ラベル（上記）と、製品カード v2 のタイトル行の関連成分チップ・
 * 語彙列の押せるチップ（機能性表示食品など・§2.20「チップの2語形」）で共用する
 * ソフト地チップ。素の .feed-prod-ing-chip だけでは .feed-prod-label a
 * （補足色＋下線）に詳細度で負けるため、ラベル文脈用のセレクタを併記する
 * （両文脈で同じ見た目＝13px・600・ソフト地ティール）。 */
.feed-prod-ing-chip,
.feed-prod-label a.feed-prod-ing-chip {
  display: inline-flex;
  align-items: center;
  background: var(--c-accent-soft);
  color: var(--c-accent-strong);
  border-radius: var(--radius-full);
  padding: var(--pill-pad-sm);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.feed-prod-ing-chip:hover,
.feed-prod-label a.feed-prod-ing-chip:hover {
  text-decoration: underline;
}

.feed-prod-count {
  font-variant-numeric: tabular-nums;
}

/* 帯ラベルの形状・由来の印（「液体あり・魚由来」。計画 #2314）。面を持たない補足テキスト。 */
.feed-prod-marks {
  margin-left: var(--sp-2);
  color: var(--c-sub);
}
.feed-prod-label.has-chip .feed-prod-marks { margin-left: 0; }

/* 製品名の通常テキスト列挙（v7.2・2026-08-12。枠線チップ廃止 — チップ＝統制語彙
 * の語形と衝突するため）。製品名は社名（17px/600）に次ぐ重要情報＝本文サイズ
 * 15px・500。約3行でクランプ（JS不使用のため max-height による近似。line-height 2
 * ×15px×3行=90px。テンプレ側の先頭8件キャップと併用・design.md §5.17 CTA着地型変形） */
.feed-prod-text {
  margin: 0;
  font-size: var(--fs-base);
  line-height: 2;
  max-height: 90px;
  overflow: hidden;
}

/* 1名あたりの上限幅＋省略記号（Issue #523）。原料バンク由来の一部の製品名は
 * 説明文・検索語が混入して100字超になり、nowrap のままだとカード右端で断裂して
 * 見切れる。名前の途中で折り返さない規律（下記 .feed-prod-item）は保ったまま、
 * 切れ目をカード端でなくテキスト内の意図した位置に移して省略と分かる形にする。
 * 36em＝日本語36字相当で、実データは30字以内が97%・36字超は1%弱（ほぼ1社）＝
 * 通常の製品名は無傷。全文は製品詳細ページと title 属性で届く。
 * inline-block＋overflow:hidden はベースラインが下端に移るため vertical-align:
 * bottom で行内の他要素（縦線区切り）と高さを揃える。 */
.feed-prod-text a {
  display: inline-block;
  max-width: min(100%, 36em);
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
  color: var(--c-accent-strong);
  font-weight: 500;
  text-decoration: none;
}

.feed-prod-text a:hover {
  text-decoration: underline;
}

/* 「名前＋区切り」の束（名前の途中で折り返さない・折返しは項目間でのみ）。
 * 与信メタ行の .feed-credit-item と同じ折返し規律。 */
.feed-prod-item {
  white-space: nowrap;
}

/* 与信メタ行（v7.2）: 会社帯タイトル直下の1行。都道府県・設立・資本金・従業員数
 * （gBizINFO由来・考察_会社パネルの公開カウントと与信情報表示 §4）。 */
.feed-credit-line {
  margin: 3px 0 0;
  font-size: var(--fs-sm);
  color: var(--c-sub);
  font-variant-numeric: tabular-nums;
}

.feed-credit-item {
  white-space: nowrap;
}

/* ヘアライン縦線区切り（与信メタ行・製品帯で共用）。文字でなく図形＝製品名・
 * 数値のどんな文字とも衝突せず、コピー・読み上げに混入しない。 */
.feed-vsep {
  display: inline-block;
  width: 1px;
  height: 11px;
  background: var(--c-line-strong);
  margin: 0 9px;
  vertical-align: -1px;
}

.feed-prod-text .feed-vsep {
  height: 12px;
}

/* アクションバー＝行動専用の下端帯（§2.19）。実績・根拠情報は置かない
 * （根拠は製品帯へ帰属済み）。右寄せでチェック＋CTA。地色 #F8FAFC は §5.17 の
 * 実績バーの読み替えとして継承（カード下端の「帯」であることを地色で示す）。
 * 負マージンでカード padding を打ち消し、左右いっぱいの帯にして下端の角丸を
 * カード（--radius-lg）に合わせる。 */
.feed-cta-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-3);
  margin: var(--sp-3) calc(var(--sp-4) * -1) calc(var(--sp-4) * -1);
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-surface-soft);
  border-top: 1px solid var(--c-line);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* 一括問合せ追加ボタン .feed-add-btn は .feed-fav-btn と同じ枠線ピルの文法
 * （§5.17系トークン）。定義は末尾の「一括問合せ」セクションにまとめて置く
 * （bulk.js が付け外しする .on／.near-limit・カードの .bulk-on・固定バーと
 * セットで見るほうが把握しやすいため）。 */

/* CTAボタンは a.btn-primary（経路1〜3・塗り）／a.btn-secondary（経路4・塗り
 * なし＋外部アイコン）の2階調（design.md §5.4・§5.17）。カード内の密な帯でも
 * タップ領域40pxを確保する。 */
.feed-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  white-space: nowrap;
}

/* a.btn-primary / a.btn-secondary（型＋クラス＝0,1,1）の display: inline-block が
 * .feed-cta-btn（0,1,0）に詳細度で勝ち、gap・align-items が無効になる。
 * 同じ詳細度で inline-flex を取り返す（Issue #669） */
a.btn-primary.feed-cta-btn,
a.btn-secondary.feed-cta-btn {
  display: inline-flex;
}

/* 狭幅では製品チップの折返しが増えるため、会社名列への字下げをやめて幅を返す。 */
@media (max-width: 640px) {
  .feed-prod-band {
    padding-left: 0;
  }
}

/* 狭幅（640px以下・design.md §3）では会社帯の右肩スロットとアクションバーが
 * 潰れないよう、フル幅に折り返す。 */
@media (max-width: 640px) {
  .feed-head {
    flex-wrap: wrap;
  }
  /* basis:auto だと長い会社名がアイコンの次行へ丸ごと落ちる。basis:0 で
   * アイコンと同一行を強制し、折り返すのは右肩スロットだけにする */
  .feed-head-main {
    flex: 1 1 0;
  }
  /* 右肩スロットは基底で既に横一列。ここではフル幅に落として左右へ振り分ける
   * （お気に入りが左・更新日が右の並びは基底のまま） */
  .feed-head-side {
    flex: 1 1 100%;
    justify-content: space-between;
    margin: var(--sp-2) 0 0 26px; /* .feed-icon（18px+gap）の幅に揃えて本文列と縦を合わせる */
  }
  .feed-cta-bar {
    justify-content: stretch;
  }
  .feed-cta-btn {
    flex: 1 1 auto;
  }
}

/* 活動ピル＋公開ピル＋ポップオーバー（design.md §5.17系トークン・仕様書_活動
 * レベル.md §4・Issue #516・2026-08-11改訂=無単位2ピル・Issue #554）。会社帯に
 * .feed-pulse-wrap を2インスタンス（活動→公開の順）並べる。ホバー＋タップ両対応:
 * 表示自体はCSSのみ（:hover / :focus-within）で成立させ、タップ端末向けの .open
 * トグルは card.js が付ける（アクション例外）。 */
.feed-pulse-wrap {
  position: relative;
  display: inline-flex;
}

.feed-pulse {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--c-accent-soft);
  color: var(--c-accent-strong);
  border: none;
  border-radius: var(--radius-full);
  padding: var(--pill-pad-xs);
  font-size: var(--fs-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  white-space: nowrap;
}

/* 無単位カウンタの数字（「活動 3」「公開 2」）。ラベル文字との字送り
 * （アイコン⇔ラベルの4px gapより詰めた間隔）。 */
.feed-pulse .n {
  margin-left: 1px;
}

/* 汎用 button:hover（背景 --c-accent-strong）が .feed-pulse より詳細度で勝ち、
 * hover中に文字（--c-accent-strong）が地と同化して消えるため、ピルは地色を維持する */
button.feed-pulse:hover {
  background: var(--c-accent-soft);
}

.feed-pulse-pop {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: var(--z-pop);
  width: max-content;
  max-width: 280px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--sp-3);
}

.feed-pulse-wrap:hover .feed-pulse-pop,
.feed-pulse-wrap:focus-within .feed-pulse-pop,
.feed-pulse-wrap.open .feed-pulse-pop {
  display: block;
}

.feed-pulse-pop-title {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--c-ink);
}

.feed-pulse-pop ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.feed-pulse-pop li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--c-ink);
}

.feed-pulse-date {
  flex: none;
  color: var(--c-sub);
  white-space: nowrap;
}

/* 640px以下（design.md §3 の狭幅）ではカード幅いっぱいに近いため、左寄せの
 * ポップオーバーが右にはみ出さないよう最大幅をビューポート基準に狭める。 */
@media (max-width: 640px) {
  .feed-pulse-pop,
  .rank-note-pop {
    max-width: calc(100vw - var(--sp-6));
  }
}

/* 並び順の開示（_rank_note.html・考察_会社リスト順位の収益化と評価設計.md §9.2・計画 #2571）。
 * 有料プラン契約の会社を先に並べる一覧の右肩（.list-sort と同じ位置）に「おすすめ順（有料プラン優先）ⓘ」。
 * 行ごとの印（旧PRチップ .feed-pr）は2026-10-27撤去＝有料の行も無料の行も同じ見た目。
 * 開閉は .feed-pulse-wrap と同型（hover/focus-within は CSS・タップ端末は card.js の .open）。 */
.rank-note {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  margin-left: auto;
  color: var(--c-sub);
  font-size: var(--fs-sm);
}

.rank-note-wrap {
  position: relative;
  display: inline-flex;
}

.rank-note-btn {
  display: inline-flex;
  align-items: center;
  background: none;
  border: none;
  padding: 2px;
  color: var(--c-sub);
  cursor: pointer;
}

/* 地色は hover でも「なし」を明示する（button.rank-note-btn で要素名を足して詳細度を上げる）。
 * 汎用 button:hover の塗り（--c-accent-strong）に負けるとアイコンが地と同化して消える。 */
button.rank-note-btn:hover {
  background: none;
  color: var(--c-accent-strong);
}

/* 右肩に置くので右端そろえで左へ開く（左寄せだと画面の右へはみ出す） */
.rank-note-pop {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: auto;
  z-index: var(--z-pop);
  width: max-content;
  max-width: 240px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--sp-3);
}

.rank-note-pop p {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--c-ink);
  line-height: 1.6;
}

.rank-note-wrap:hover .rank-note-pop,
.rank-note-wrap:focus-within .rank-note-pop,
.rank-note-wrap.open .rank-note-pop {
  display: block;
}

/* 並び順の凡例導線（.order-legend-*）は2026-08-15に撤去（その後の開示は .rank-note・§9.2）。撤去理由の記録: ポップの <div> を設置面すべてで
 * <p class="muted"> の中に置いており、HTMLパーサが <p> を強制的に閉じてポップが
 * .order-legend-wrap の外へ飛び出すため、ホバーもクリックも一度も効いていなかった。
 * 同種のポップオーバーを新設するときは、置き場所が <p> の中かどうかを先に確認し、
 * 中に置くなら phrasing content（span＋display:block）で組むこと。 */

/* アクションバーの薄い帯（F案・_cta_bar.html）。左＝情報を得る（電話番号を表示・
 * 資料ダウンロード）／右＝問い合わせる（一括問合せに追加・お問い合わせ）。4つとも
 * .feed-add-btn と同じ小さなピル（高さ28px・文字 xs・アイコン14px）にそろえる。
 * 電話・資料のパネルは card.js が開いたときに API から組み立てる（機構⑥・
 * 仕様書_問い合わせ発生機構 §7.3）。 */
.feed-card .feed-cta-bar.slim {
  position: relative;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
}

.cta-left {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-right: auto;
}

.cta-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 28px;
  padding: 0 10px;
  background: none;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-full);
  color: var(--c-ink);
  font-size: var(--fs-xs);
  cursor: pointer;
  white-space: nowrap;
}

.cta-pill:hover,
.cta-pill[aria-expanded="true"] {
  background: none;  /* 素の button:hover（塗り）を打ち消す */
  border-color: var(--c-accent);
  color: var(--c-accent-strong);
}

.cta-pill svg {
  flex: none;
  color: var(--c-accent);  /* 電話・資料のアイコンは緑の塗りで目立たせる */
}

.cta-pill .ic {
  flex: none;
  width: 14px;
  height: 14px;
  color: var(--c-accent-strong);
}

.cta-pill .ph-mask {
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}

.cta-pill .ph-go {
  padding-left: 4px;
  border-left: 1px solid var(--c-line);
}

.cta-pill:hover .ph-go,
.cta-pill[aria-expanded="true"] .ph-go {
  color: var(--c-accent-strong);
}

/* 一覧カードの「公式サイトで問い合わせ」: 太字。スマホ幅は「公式サイトで問合せ」に詰める
 * （アイコンは縮めない） */
.cta-site {
  font-weight: 700;
}

.cta-site svg {
  flex: none;
}

.cta-site .lbl-short {
  display: none;
}

.cta-pill .cnt {
  color: var(--c-sub);
  font-variant-numeric: tabular-nums;
}

.slim .feed-add-btn,
.slim .feed-cta-btn {
  min-height: 28px;
  padding: 0 10px;
  gap: 4px;
  font-size: var(--fs-xs);
}

.slim .feed-add-btn {
  color: var(--c-ink);
}

.slim .feed-cta-btn svg {
  width: 13px;
  height: 13px;
}

.slim a.btn-secondary.feed-cta-btn,
.slim a.btn-primary.feed-cta-btn {
  border-radius: var(--radius-full);
  line-height: 1;
}

.slim a.btn-primary.feed-cta-btn {
  font-weight: 600;
}

/* 開示パネル（活動ピルのポップオーバーと同じ面）。ピルの直下に開く。
 * .feed-card の content-visibility は開いている間だけ解除する（上の規則と同じ理由）。 */
.feed-card:has(.ph-wrap.open) {
  content-visibility: visible;
}

.ph-wrap {
  position: relative;
  display: flex;
}

.ph-pop {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 5;
  width: 320px;
  padding: var(--sp-4);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  text-align: left;
  white-space: normal;
}

.ph-wrap.open .ph-pop {
  display: block;
}

.ph-pop-head {
  margin: 0 0 var(--sp-2);
  padding-right: 20px;
  font-size: var(--fs-sm);
  font-weight: 700;
}

.ph-pop-num {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding-right: 20px;
  font-size: var(--fs-md);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.ph-pop-num a {
  color: var(--c-accent-strong);
  text-decoration: none;
}

.ph-pop-meta {
  margin: 4px 0 0;
  font-size: var(--fs-xs);
  color: var(--c-sub);
}

.ph-pop-say {
  margin: var(--sp-3) 0 0;
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-accent-soft);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  color: var(--c-accent-deep);
}

.ph-pop-sub {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-xs);
  color: var(--c-sub);
}

.ph-pop-act {
  display: flex;
  gap: var(--sp-2);
  margin: var(--sp-3) 0 0;
}

.ph-pop-act > * {
  flex: 1 1 0;
  justify-content: center;
  text-align: center;
}

/* コピーは番号のすぐ右に置き、右上の×から離す */
.ph-copy {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 4px;
  padding: 4px 8px;
  background: none;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  color: var(--c-sub);
  font-size: var(--fs-xs);
  font-weight: 400;
  cursor: pointer;
}

.ph-copy:hover {
  background: none;
  border-color: var(--c-accent);
  color: var(--c-accent-strong);
}

/* ×は右上の角に寄せ、押せる範囲を28px角にとる */
.ph-pop .ph-close {
  position: absolute;
  top: 2px;
  right: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--c-sub);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.ph-pop .ph-close:hover {
  background: var(--c-surface-soft);
  color: var(--c-ink);
}

/* 資料パネル: 件数（見出し行）／すべて選択／各資料（チェック・題名・会員限定は鍵＋形式・サイズ）／
 * 同意／幅いっぱいのダウンロード */
.doc-top {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--c-line);
}

.doc-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  color: var(--c-sub);
  cursor: pointer;
}

.doc-list {
  margin: var(--sp-1) 0 0;
  padding: 0;
  list-style: none;
  max-height: 260px;
  overflow-y: auto;
}

.doc-row {
  border-top: 1px solid var(--c-line);
}

.doc-row:first-child {
  border-top: 0;
}

/* 製品詳細「製品資料」ブロック: 行の左のチェックで選んでまとめてダウンロード。
   会社資料は同じ表の後ろの行（tr.pd-co）で、表の直後の折りたたみを開くと現れる */
/* チェックと形式の列は中身の幅だけにして、余りはタイトルの列に回す */
.pd-docs tr > :is(.pd-pick, :last-child) {
  width: 1%;
  white-space: nowrap;
}

.pd-docs .pd-pick {
  padding: 8px 6px;
  vertical-align: middle;
}

/* .choice（チェックの意匠）の行用の余白を外し、チェックだけをセルの中央に置く */
.pd-docs .pd-pick .choice {
  display: flex;
  min-height: 0;
  padding: 0;
}

.pd-docs .pd-pick .choice input {
  margin: 0;
}

.pd-docs .pd-doc-t svg {
  margin-right: 6px;
  vertical-align: -3px;
  color: var(--c-sub-strong);
}
.pd-docs-fold {
  margin: var(--sp-2) 0 0;
}

/* 開閉の印は「残りN件を表示」（.rows-fold-toggle・design.md §5.30）と同じブラウザ既定の三角 */
.pd-docs-fold > summary {
  cursor: pointer;
  font-size: var(--fs-sm);
  color: var(--c-accent-strong);
}

/* 会社資料の行は表の直後の details が閉じている間は畳む（.rows-fold と同じ型。非対応ブラウザは全行を出す） */
@supports selector(:has(a)) {
  .pd-docs-rows:has(+ .pd-docs-fold:not([open])) tr.pd-co { display: none; }
  .pd-docs-rows:has(+ .pd-docs-fold:not([open])) tr:has(+ tr.pd-co):not(.pd-co) td { border-bottom: none; }
}

/* 要ログインの資料を選んだときの同意（文言は資料の同意画面・資料パネルと同じ）と、未ログインへの案内 */
.pd-docs-consent,
.pd-docs-note {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-sm);
}

.pd-docs-act {
  margin: var(--sp-3) 0 0;
}

/* 製品カード・製品詳細のバーのパネルは「製品資料」→「会社資料」の2群（計画 #2345） */
.doc-group-h {
  margin: var(--sp-2) 0 0;
  padding-top: var(--sp-2);
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--c-sub);
}

.doc-group-h:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.doc-list .doc-group-h + .doc-row {
  border-top: 0;
}

.doc-pick {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--sp-2);
  padding: var(--sp-2) 0;
  cursor: pointer;
}

.doc-pick input {
  margin-top: 4px;
}

.doc-pop input[type=checkbox] {
  width: 16px;
  height: 16px;
  accent-color: var(--c-accent-strong);
}

.doc-row.off .doc-pick {
  cursor: default;
}

.doc-row.off .doc-title {
  color: var(--c-sub);
}

.doc-title {
  display: block;
  font-size: var(--fs-sm);
  color: var(--c-ink);
  line-height: 1.5;
}

.doc-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  font-size: var(--fs-xs);
  color: var(--c-sub);
}

.doc-consent {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: var(--sp-2) 0 0;
  padding-top: var(--sp-2);
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-xs);
  color: var(--c-sub);
}

.doc-purpose {
  margin: var(--sp-1) 0 0;
  font-size: var(--fs-xs);
  color: var(--c-sub);
}

.doc-dl {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: 40px;
  margin: var(--sp-3) 0 0;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
}

.doc-dl:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.only-phone {
  display: none;
}

/* スマホ: 4つを2×2（上段＝情報・下段＝問い合わせ）。指で押す分だけ高さ32px。
 * 伏せ字は畳んで文言だけ。パネルは帯の左右いっぱいに開く。 */
@media (max-width: 640px) {
  .feed-card .feed-cta-bar.slim {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  .slim .cta-left {
    display: contents;
  }
  .slim > *,
  .slim .cta-left > * {
    min-width: 0;
  }
  .slim .cta-pill,
  .slim .feed-add-btn,
  .slim .feed-cta-btn {
    width: 100%;
    min-height: 32px;
    justify-content: center;
    padding: 0 8px;
  }
  .slim .ph-wrap {
    position: static;
  }
  .slim .cta-pill .ph-mask {
    display: none;
  }
  .cta-site .lbl-long {
    display: none;
  }
  .cta-site .lbl-short {
    display: inline;
  }
  .slim .cta-pill .ph-go {
    padding-left: 0;
    border-left: 0;
  }
  .slim .ph-pop {
    left: var(--sp-4);
    right: var(--sp-4);
    width: auto;
  }
  .only-phone {
    display: inline-flex;
  }
  .only-desk {
    display: none;
  }
}

/* 届出フィードカードのサブ行に置く関与成分チップ（design.md §5.18・初出 /notifications）。
 * .chip（塗りつぶしのタグ用チップ）より軽い、情報行に馴染む枠線のみのミニピル。
 * 名寄せ済みは成分詳細への<a>、未名寄せは<span>のまま（原文テキスト）。 */
.feed-ing-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: var(--pill-pad-xs);
  margin: 0 2px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-full);
  color: var(--c-sub);
  font-size: var(--fs-xs);
  text-decoration: none;
  vertical-align: middle;
}

.feed-ing-chip > svg {
  position: relative;
  top: -1px; /* .feed-stat > svg と同じ理由（字面の中心に揃える） */
}

a.feed-ing-chip:hover {
  color: var(--c-accent-strong);
  border-color: var(--c-accent);
}

/* 製品カード v2（design.md §5.17「CTA着地型の製品カード版」・仕様書_サプライヤー
 * 検索と問い合わせリレー §2.20・Issue #608）の新設クラス。 */

/* 製品帯の語彙列（属性チップ）: タイトル列（.feed-icon 18px＋gap 8px＝26px）に
 * 揃えて字下げする（会社カードの製品帯・与信メタ行と同じ字下げ規律）。 */
.feed-vocab-rows {
  margin: var(--sp-2) 0 0 26px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.feed-vocab-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}

/* 属性チップ（記述語彙・非リンク）: 枠線のみのアウトライン形。ソフト地ティール
 * （成分・機能性表示食品＝リンクする統制語彙）との2語形で「押せる/押せない」を
 * 色でなく形で分ける（§2.20「チップの2語形」）。 */
.feed-attr-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-full);
  padding: var(--pill-pad-sm);
  font-size: var(--fs-sm);
  color: var(--c-ink);
  white-space: nowrap;
}

.feed-attr-chip .k {
  color: var(--c-sub);
  font-size: var(--fs-xs);
}

/* ラベル付きメタ行（対応剤形。§2.20「対応剤形はメタ行に置く」）: 与信メタ行
 * .feed-credit-line と同じ文法のテキスト行で、語彙列と同じ26px字下げに揃える。
 * チップにしないのは会社カード v7.2「製品帯のテキスト化」と同じ理由（チップ＝
 * 統制語彙・属性の語形。列挙をタグ状に見せると形状チップと同じ高度に見える）。 */
.feed-meta-line {
  margin: var(--sp-2) 0 0 26px;
  font-size: var(--fs-sm);
  color: var(--c-ink);
}

.feed-meta-line .feed-meta-label {
  color: var(--c-sub);
  margin-right: 9px;
}

.feed-meta-line .feed-meta-item {
  white-space: nowrap;
}

/* 用途実績メタ行の項目リンク（考察_OEM検索カードのチップ表示 §13・確定意匠モック）。
 * 会社カードv7.2 製品帯のテキストリンク文法の読み替えだが、色はティールでなく
 * 墨＋薄い下線 — メタ行の中でリンクだけが浮かず、行としては他のメタ行と同じ
 * 静かさを保ちつつ、下線が「押せる」ことを示す。ホバーでティールに変わる。 */
.feed-meta-line a {
  color: var(--c-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--c-line-strong);
}

.feed-meta-line a:hover {
  color: var(--c-accent-strong);
  text-decoration-color: var(--c-accent-strong);
}

/* OEM検索カードの実績帯に置くメタ行（対応剤形・認証・最小ロット。§2.19 v7.4・
 * 確定意匠モック）。製品カードでは meta_line がカード直下に立つため26px字下げを
 * 自前で持つが、実績帯は帯自体が既に26px字下げ済みなので追加の字下げを打ち消し、
 * 行間は下マージンで積む（3本並ぶため上マージン方式だと帯上端で二重に空く）。 */
.feed-prod-band .feed-meta-line {
  margin: 0 0 var(--sp-1);
}

.feed-prod-band .feed-meta-line:last-of-type {
  margin-bottom: 0;
}

/* チップ列・特徴文との境界だけ1段広く（8px）。隣接マージンは相殺されるため
 * .feed-chips の下マージンとは二重にならない。 */
.feed-prod-band .feed-chips + .feed-meta-line,
.feed-prod-band .feed-meta-line + .feed-feature {
  margin-top: var(--sp-2);
}

/* 取扱会社カード: 製品名（または「ほかN製品を見る」）の下の見出し文（§2.19 v7.6）。 */
.feed-prod-band .feed-prod-text + .feed-feature,
.feed-prod-band .feed-prod-text + p + .feed-feature {
  margin-top: var(--sp-2);
}

/* チップ列が帯の最後（メタ行も特徴文も無い会社＝全体の9割）なら下の余白は不要。 */
.feed-chips:last-child {
  margin-bottom: 0;
}

/* タイトル行の「他N成分」（関連成分チップの残数。muted の小さな添え字） */
.feed-title-sub {
  color: var(--c-sub);
  font-size: var(--fs-sm);
}

/* 製品帯のひとこと（short_promotion）: タイトル行との間に4px空ける
 * （§2.20確定モック改訂k の .feed-clue）。共有の .feed-clue は上余白を持たず
 * 下に var(--sp-2) を出す形で、発見フィード・届出カードでは包む .feed-body 側が
 * 上余白を持っている。製品カードは .feed-head-main 直下に置くため上余白が誰も
 * 無く、製品名に貼りついていた。この文脈だけ上下を入れ替える。 */
.feed-head-main > .feed-clue {
  margin: var(--sp-1) 0 0;
}

/* 会社帯: ヘアラインで製品帯と分節・26px字下げ（会社カードの製品帯と同じ
 * 分節文法。§2.20「会社帯はヘアラインで分節」）。 */
.feed-co-band {
  margin: var(--sp-3) 0 0;
  padding: var(--sp-3) 0 0 26px;
  border-top: 1px solid var(--c-line);
}

.feed-co-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}

/* 会社名は15px/600＝製品タイトル17pxより1段弱くして従属を示す（§2.20）。 */
.feed-co-name {
  font-weight: 600;
  color: var(--c-accent-strong);
  text-decoration: none;
  font-size: var(--fs-base);
}

.feed-co-name:hover {
  text-decoration: underline;
}

/* 会社帯の行種アイコンは .feed-icon の margin-top を打ち消し、会社帯の
 * インライン行内で中央に揃える（モックのインライン style="margin:0" をクラス化）。 */
.feed-co-icon {
  margin-top: 0;
}

/* 狭幅では語彙列・会社帯の字下げをやめて幅を返す（.feed-prod-band と同じ規律）。 */
@media (max-width: 640px) {
  .feed-vocab-rows,
  .feed-meta-line,
  .feed-co-band {
    margin-left: 0;
    padding-left: 0;
  }
}

/* ラベル狭幅短縮（例: 機能性表示食品→機能表示）とお気に入りのモバイル縮退は
 * 2スパン＋メディアクエリのみで行う（JS不使用・§5.17）。既定（>640px）は
 * lbl-l を表示・lbl-s と一体化する。640px側の切替は下部メディアクエリ参照 */
.lbl-s {
  display: none;
}

/* 目的別検索パネルの横並びグリッド（会社ディレクトリ等。design.md §5.3）。
 * .card内に見出し＋説明文＋form.searchを収め、入れ子のカード感を消すため
 * form.search側の面・影・パディングをこのコンテキストでは打ち消す */
.search-panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--sp-4);
  margin: var(--sp-4) 0 var(--sp-6);
}

.search-panels .card h2 {
  margin-top: 0;
}

.search-panels .card form.search {
  background: none;
  box-shadow: none;
  padding: 0;
  margin: var(--sp-3) 0 0;
}

/* 会社サブページ（/companies/{id}/ingredients・/oem・/releases/all?company_id=）の先頭パネル。
 * 上に会社の概要、罫線の下に検索（/oem は集計）。.search-panels と同じく内側の form.search の
 * 面・影・パディングを打ち消して .panel の面に同居させる */
.co-search > :not(:first-child) {
  background: none;
  box-shadow: none;
  border-radius: 0;
  border-top: 1px solid var(--c-line);
  padding: var(--sp-4) 0 0;
  margin: var(--sp-4) 0 0;
}

/* 罫線は面の幅いっぱいに引き、欄の幅（640px）は箱の側で抑える（.site-search・§5.35） */
.co-search-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
}

.co-search > .site-search {
  max-width: none;
}

.co-search .site-search-box {
  max-width: 640px;
}

/* 会社OEMページ（/companies/{id}/oem）の概要パネル下段。/oem カード実績帯の部品
 * （.feed-chips・.feed-meta-line・.feed-feature）をそのまま置くが、パネル内は
 * 字下げ（26px）が要らないので打ち消し、行間は上マージンで積む。 */
.co-oem-band .feed-chips {
  margin: var(--sp-3) 0 0;
}

.co-oem-band .feed-meta-line {
  margin: var(--sp-2) 0 0;
}

.co-oem-band .feed-feature {
  margin: var(--sp-2) 0 0;
}

/* ランキングパネル（原料トップ「よく見られている原料」§2.8）。
 * 1〜10位を1枚のカード面にまとめ、各行を罫線区切りのリンク行にする。
 * 順位のみ・数値非表示。カウンタは .rank-no のテキストで明示する */
.rank-panel {
  list-style: none;
  margin: var(--sp-3) 0 var(--sp-5);
  padding: 0 var(--sp-5);
  background: var(--c-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.rank-panel li + li {
  border-top: 1px solid var(--c-line);
}

.rank-panel a {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  text-decoration: none;
  color: var(--c-ink);
}

.rank-panel a:hover .rank-name {
  color: var(--c-accent-strong);
  text-decoration: underline;
}

.rank-no {
  flex: none;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-sm);
  font-weight: 700;
  background: var(--c-accent-soft);
  color: var(--c-accent-strong);
  border-radius: var(--radius-full);
}

.rank-name {
  flex: 1;
  min-width: 0;
}

.rank-cat {
  flex: none;
  color: var(--c-sub);
  font-size: 12px;
}

/* ------------------------------------------------------------ */
/* 8. フォーム（design.md §5.26）。検索パネル form.search と会員・公開の本入力フォーム共通。 */
/*    トークンは §1。旧 account/_form_style.html はこの節に統合して廃止した。 */
/* ------------------------------------------------------------ */
form.search {
  background: var(--c-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--sp-5);
  margin-bottom: var(--sp-5);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-3);
}

/* サマリーパネル（§5.12）直後に検索フォームが続くページ（セミナー・メルマガ・
 * 業界ニュース）では、form.search に margin-top が無いため白い面同士が密着する。
 * .panel 自体は h2/p の margin-top に頼るマージンレス設計のため、隣接時のみ間隔を補う */
.panel + form.search {
  margin-top: var(--sp-4);
}

/* --- 骨格: .form-fields > .field(label → hint → 入力 → error) --- */
.form-fields {
  display: grid;
  gap: var(--sp-5);
}

.field {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

/* 取扱原料の編集画面: この成分を含む製品のリンク一覧（仕様書_製品エンティティ §11.6） */
.product-links { list-style: none; margin: 0 0 var(--sp-1); padding: 0; }
.product-links li { margin: 0 0 var(--sp-1); }

.field-label,
.field > legend {
  display: block;
  padding: 0;
  margin: 0 0 var(--sp-1);
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--c-ink);
  line-height: 1.5;
}

/* 要否ラベル。必須・任意が混在するフォームでは両方に付ける（少数側だけ・記号だけは不可）。
   全欄必須が自明（ログイン・確認コード）のフォームには付けない */
.req {
  display: inline-block;
  margin-left: var(--sp-2);
  padding: var(--pill-pad-xs);
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.5;
  vertical-align: 2px;
  background: var(--c-danger-soft);
  color: var(--c-danger);
}

.req.optional {
  background: var(--c-info-soft);
  color: var(--c-sub);
}

/* 有料プランの機能の欄を無料プランで止めたときの注意（「有料プランの契約が必要です」） */
.req.paid {
  background: var(--c-warn-soft);
  color: var(--c-warn);
}

/* 選択肢の下に付く補助の入力（「その他」の内容 等）の見出し */
/* 補足（入力例・形式・用途）は入力欄の「上」に常時表示。placeholder に書かない */
.field-hint {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--c-sub);
  line-height: 1.5;
}

/* 会社入力の文が運営の確認待ち（計画 #2401） */
.field-hint.field-pending { color: var(--c-warn); }

/* 補足の続き（書き方の例など長いもの）は畳んで補足の下に置く。開いても入力欄の上に収まる */
.field-hint-more {
  margin: calc(-1 * var(--sp-1)) 0 var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--c-sub);
  line-height: 1.5;
}
.field-hint-more > summary { cursor: pointer; color: var(--c-accent-strong); width: fit-content; }
.field-hint-more > :is(p, ol, ul, pre) { margin: var(--sp-1) 0 0; }
.field-hint-more > ol { padding-left: 1.5em; }
/* 「書式について」（account/_format_help.html）。箇条書きは公開側（.summary-text）と同じ「・」のぶら下げ */
.field-hint-more > ul { padding-left: 1em; list-style: "・"; }

/* 入力欄の後ろに置く補足（/contact のご用件）は、欄との間を空ける。既定の margin は
 * 「ラベル→補足→欄」の並び用で上が 0 のため、そのままだと欄に密着する */
.field > :is(input, select, textarea) + .field-hint {
  margin: var(--sp-2) 0 0;
}
/* 畳んだ補足を入力欄の「下」に置くとき（成分欄の「候補に無いとき」。JS で input は .suggest-wrap に包まれる） */
.field > :is(input, select, textarea, .suggest-wrap) + .field-hint-more {
  margin: var(--sp-2) 0 0;
}

/* 文字数カウンタ: 入力欄の右下。上限は maxlength が担うので色は変えない */
.field-count {
  margin: var(--sp-2) 0 0;
  text-align: right;
  font-size: var(--fs-xs);
  color: var(--c-sub);
  font-variant-numeric: tabular-nums;
}
.field-count.is-over { color: var(--c-danger); font-weight: 600; }
/* カウンタの付く欄は block にする（inline のままだと行の下の余白が input と textarea で異なり、欄とカウンタの間が揃わない） */
.field > :is(input, textarea):has(+ .field-count) { display: block; }
/* 欄の末尾のカウンタは次の欄との間隔（.form-fields の gap）に食い込ませ、欄の間が広がって見えないようにする */
.form-fields > .field > .field-count:last-child { line-height: 1; margin-bottom: calc(-1 * var(--sp-3)); }
.field-count + .field-hint { margin: var(--sp-1) 0 0; }

/* 欄別エラーは入力欄の「直下」。訂正方法まで書く。色だけに頼らない（記号＋太字） */
.field-error {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-danger);
  line-height: 1.5;
}

.field-error[hidden] { display: none; }

.field-error::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--c-danger) var(--ic-bang) center / 16px no-repeat;
}

/* --- 入力欄・セレクト・テキストエリア（type の列挙ではなく除外で当てる） --- */
input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"],
          [type="submit"], [type="button"], [type="reset"], [type="image"],
          [type="range"], [type="color"]),
select,
textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--field-h);
  padding: 0 var(--sp-3);
  border: 1px solid var(--c-field-line);
  border-radius: var(--radius-sm);
  background: var(--c-surface);
  color: var(--c-ink);
  font: inherit;
  font-size: var(--fs-input);
  line-height: 1.4;
}

input:not([type="checkbox"], [type="radio"]):hover,
select:hover,
textarea:hover {
  border-color: var(--c-sub);
}

textarea {
  min-height: 120px;
  padding: var(--sp-2) var(--sp-3);
  line-height: var(--lh-base);
  resize: vertical;
  field-sizing: content;   /* 内容に合わせて伸びる。未対応ブラウザは rows/min-height に劣化するだけ */
  max-height: 60vh;
}

::placeholder {
  color: var(--c-placeholder);
  opacity: 1;
}

/* 入力幅は期待する内容の長さに合わせる（既定は 100%）。max-width なので狭い画面では縮む */
.w-xs { max-width: var(--field-w-xs); }
.w-sm { max-width: var(--field-w-sm); }
.w-md { max-width: var(--field-w-md); }

/* セレクト: 矢印を自前で描き、OS差を無くす。展開リストは OS 既定のまま。
   data URI は CSS 変数を参照できないため矢印色だけ --c-sub の実値を直書きする（§9 の例外） */
select {
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23586577' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
}

select[multiple] {
  background-image: none;
  padding: var(--sp-2) var(--sp-3);
  min-height: auto;
}

/* --- 状態 --- */
input:not([type="checkbox"], [type="radio"]):focus,
select:focus,
textarea:focus {
  border-color: var(--c-accent);
  outline: 2px solid var(--c-accent-strong);   /* 白地で 5.5:1。旧 3px --c-accent-soft は 1.1:1 で見えなかった */
  outline-offset: 2px;
}

button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible,
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible,
input[type="file"]:focus-visible {
  outline: 2px solid var(--c-accent-strong);
  outline-offset: 2px;
}

/* 要素名つきの2行は、入力欄の基本規則（input:not(...)）より詳細度を上げて地と枠を確実に上書きするため */
[aria-invalid="true"],
.form-fields :user-invalid,
:is(input, select, textarea)[aria-invalid="true"],
.form-fields :is(input, select, textarea):user-invalid {
  border-color: var(--c-danger);
  box-shadow: inset 0 0 0 1px var(--c-danger);   /* 枠を 2px 相当に。border-width を変えると寸法が動く */
  background-color: var(--c-danger-soft);         /* 地も薄い赤。色だけに頼らず .field-error の文と併用（design.md §5.26）。select の矢印を消さないよう -color だけ */
}

input:disabled,
select:disabled,
textarea:disabled {
  background: var(--c-info-soft);
  color: var(--c-sub);
  border-color: var(--c-line);
  cursor: not-allowed;
}

input[readonly]:not([type="checkbox"], [type="radio"]),
textarea[readonly] {
  background: var(--c-bg);
  border-style: dashed;
}

/* --- チェックボックス・ラジオ --- */
.choice {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--sp-2);
  min-height: 24px;               /* WCAG 2.5.8 の最小ターゲット */
  padding: var(--sp-1) 0;
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--c-ink);
  cursor: pointer;
}

/* 成分マスタに無い名前（運営の確認待ち）に添える印 */
.choice .ing-pending {
  align-self: center;
  padding: 0 6px;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  color: var(--c-sub);
  font-size: var(--fs-xs);
  line-height: 1.6;
}

.choice input[type="checkbox"],
.choice input[type="radio"] {
  appearance: none;
  flex: none;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;                /* 1行目（22.5px）の中心に合わせる */
  border: 2px solid var(--c-field-line);
  border-radius: 4px;
  background: var(--c-surface);
  display: grid;
  place-content: center;
  cursor: pointer;
}

.choice input[type="radio"] {
  border-radius: 50%;
}

.choice input::before {
  content: "";
  width: 12px;
  height: 12px;
  transform: scale(0);
  transition: transform .08s ease-out;
}

.choice input[type="checkbox"]::before {
  background: var(--c-surface);
  clip-path: polygon(14% 44%, 0 65%, 40% 100%, 100% 20%, 86% 6%, 40% 70%);
}

.choice input[type="radio"]::before {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c-accent);
}

.choice input:hover {
  border-color: var(--c-sub);
}

.choice input:checked {
  border-color: var(--c-accent);
}

.choice input[type="checkbox"]:checked {
  background: var(--c-accent);
}

.choice input:checked::before {
  transform: scale(1);
}

.choice input:disabled {
  border-color: var(--c-line);
  background: var(--c-info-soft);
  cursor: not-allowed;
}

.choice input[type="checkbox"]:checked:disabled {
  background: var(--c-sub);
}

.choice:has(input:disabled) {
  color: var(--c-sub);
  cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
  .choice input::before { transition: none; }
}

/* 強制カラーモードでは背景塗りが消えるため、ブラウザ既定の描画に戻す */
@media (forced-colors: active) {
  .choice input[type="checkbox"],
  .choice input[type="radio"] { appearance: auto; }
}

/* 選択肢のグループ。fieldset.field + legend で囲む。既定は横並び折返し（短い語の並び）、
   説明付き・長い語は .stack で縦積み */
.choice-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--sp-5);
}

.choice-group.stack {
  flex-direction: column;
  gap: 0;
}

/* お問い合わせの種類（原料／OEM）で欄の組を切り替える（_inquiry_fields.html。取扱区分が両方の
   会社・宛先が混在する一括だけ両方の組を描く。:has 非対応のブラウザでは両方の組が出る＝送れる） */
form:has(.inq-kind input[value="oem"]:checked) .inq-ing,
form:has(.inq-kind input[value="ingredient"]:checked) .inq-oem,
form:has(.inq-kind input[value="other"]:checked) :is(.inq-ing, .inq-oem),
form:not(:has(.inq-kind input[value="other"]:checked)) .inq-other { display: none; }

/* お問い合わせ内容の任意／必須。種類「その他」か、見えている組の依頼の種類で「その他」を選ぶと必須
   （サーバー側の判定は routers/inquiries.py の _read_answer。:has 非対応では任意のまま） */
.inq-msg-req { display: none; }
form:is(:has(.inq-kind input[value="other"]:checked),
        :has(input[name="purpose"][value="other"]:checked):not(:has(.inq-kind input[value="oem"]:checked)),
        :has(input[name="oem_purpose"][value="other"]:checked):not(:has(.inq-kind input[value="ingredient"]:checked))) .inq-msg-req { display: inline-block; }
form:is(:has(.inq-kind input[value="other"]:checked),
        :has(input[name="purpose"][value="other"]:checked):not(:has(.inq-kind input[value="oem"]:checked)),
        :has(input[name="oem_purpose"][value="other"]:checked):not(:has(.inq-kind input[value="ingredient"]:checked))) .inq-msg-opt { display: none; }

/* OEMの宛先の申告。対応剤形は「希望剤形」、最小ロットは「初回ロット」の直上に置く。カードのメタ行と同じ語 */
.inq-declared {
  margin: 0 0 var(--sp-2);
  padding-left: var(--sp-3);
  border-left: 3px solid var(--c-accent-soft);
  font-size: var(--fs-sm);
  color: var(--c-sub);
}
.inq-declared > p { margin: 0; }
.inq-declared-k { margin: 0 var(--sp-1) 0 var(--sp-2); font-weight: 600; }
.inq-declared-k:first-child { margin-left: 0; }
/* 送信ボタンの上の「相手に届く連絡先」（_inquiry_requester_preview.html）。申告の箱と同じ左線 */
.inq-requester-list { margin-top: var(--sp-3); }  /* 見出し行（編集ボタン付き）との間を空ける（2026-10-16 ユーザー指示） */
.inq-requester-list > div { display: flex; gap: var(--sp-2); }
.inq-requester-list dt { flex: 0 0 5.5em; font-weight: 600; }
.inq-requester-list dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.inq-requester-head { display: flex; align-items: center; gap: var(--sp-2); }
.inq-requester-head .field-label { margin: 0; }
.inq-requester-head .owner-edit { margin-left: 0; }
.inq-requester-saved { margin: var(--sp-2) 0 0; }
/* 連絡先の編集モーダル（<dialog>）。白い面だが影は浮き（--shadow-float）で、パネルの共通規則と同じく
   上下左右の padding を揃え、先頭の見出しは行間の上半分を削る（design.md §5.1） */
.inq-modal {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  overflow: auto;
  padding: var(--sp-4);
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--c-surface);
  color: var(--c-ink);
  box-shadow: var(--shadow-float);
}
.inq-modal::backdrop { background: rgba(15, 23, 42, .4); }
.inq-modal-head h2 {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-md);
  text-box: trim-start cap alphabetic;
}

/* 入力欄の下に置く1つの選択肢（会社のホームページの「ホームページは無い」）。.choice は inline-flex なので
   幅の狭い欄（.w-md）の右に回り込まないよう行を改める */
.choice-under { display: flex; width: fit-content; margin-top: var(--sp-1); }

/* 「その他」は選択肢の後に改行して置き、内容欄を続ける（product_edit） */
.choice-other { margin-top: var(--sp-1); }
.choice-other > input[type="text"] { display: block; }

/* --- 対になる短い欄（姓/名・郵便番号+住所検索）と、入力＋ボタンの1行 --- */
.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10em, 1fr));
  gap: var(--sp-3);
}

.field-inline {
  display: flex;
  gap: var(--sp-2);
  align-items: flex-start;
}

.field-inline > :first-child {
  flex: 1;
  min-width: 0;
}

/* 数値＋単位（賞味期限 12 か月・最小ロット 10 kg）: 欄を伸ばさず単位を縦中央に並べる */
.field-inline.unit {
  align-items: center;
  flex-wrap: wrap;
}
.field-inline.unit > :first-child { flex: none; }

/* --- 製品の編集（仕様書_製品エンティティ §12・§13）: 項目群の見出し・認証＋機関の1行・由来の行 --- */
.form-group-head {
  margin: var(--sp-3) 0 0;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-md);
}
.form-paid > .form-group-head { margin-top: 0; }
.form-paid > .form-fields { margin-top: var(--sp-3); }

.field > :is(.choice-group, .choice) + .field-origin { margin: var(--sp-2) 0 0; }
/* チェックの下の補足（資料ダウンロードの利用目的など）。p の既定マージンで送信行との間が広がらないようにする */
.field > .choice + .muted { margin: var(--sp-2) 0 0; }

/* --- 送信行: 主ボタンは入力欄と同じ左の軸。副ボタンはその右。リセットは置かない --- */
.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}

.form-actions button,
.form-actions .btn-primary,
.form-actions .btn-secondary,
.field-inline button {
  min-height: var(--field-h);
  padding-top: 0;
  padding-bottom: 0;
}

/* 送信行に置くセレクト（差し戻し理由など）は残りの幅を取り、ボタンと同じ行に並べる */
.form-actions > select {
  flex: 1 1 20em;
  width: auto;
  min-width: 0;
}

button.secondary {
  background: var(--c-surface);
  color: var(--c-accent-strong);
  border: 1px solid var(--c-field-line);
}

button.secondary:hover {
  background: var(--c-accent-soft);
  border-color: var(--c-accent);
}

button.danger {
  background: var(--c-danger);
}

/* 表のセルや行内に置く小さなボタン（削除・非公開など）。フォーム外なので高さ 40px は要らない */
button.small {
  min-height: 0;
  padding: 4px 10px;
  font-size: var(--fs-sm);
}

/* メンバー管理の行内の「管理権を譲る」「外す」（考察_有料プランと自動広告配信 §14）。ボタン同士を離す */
.seat-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0;
}

/* パネル（.card）内でボタンが複数並ぶ行は、全ボタンを会社名ブロックの
 * 「アップグレードする」（.sc-act button）と同じ小サイズにそろえる
 * （2026-09-25 ユーザー指示。例: 会社管理の求人パネルの編集・延長・終了・複製）。
 * 1つだけのボタン（フォームの送信など）は対象外で、通常サイズのまま。 */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.btn-row form {
  margin: 0;
}

.btn-row button {
  min-height: 0;
  padding: 4px 8px;
  font-size: 12px;
}

/* 塗りボタン（掲載申請・掲載終了）は枠線が無く .secondary より2px低くなるので、
 * 透明の枠線で高さをそろえる。 */
.btn-row button:not(.secondary) {
  border: 1px solid transparent;
}

/* 一覧の一括操作（公開／非公開）。上下 4px だと Mac（ヒラギノ）で字が上に寄って見えるので、
 * 高さは変えずに字を1px下げる。 */
.supply-bulk .list-head .btn-row button {
  padding-top: 5px;
  padding-bottom: 3px;
}

/* 白抜き感嘆符（帯 .msg-warn／.msg-err と欄別エラー .field-error で共有）。20px の座標で棒と点を塗りで描く */
:root { --ic-bang: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'%3E%3Crect x='8.6' y='4.25' width='2.8' height='7.5' rx='1.4'/%3E%3Ccircle cx='10' cy='15' r='1.6'/%3E%3C/svg%3E"); }

/* --- 結果・警告の帯（_form_style.html から移設。警告用 .msg-warn を新設） ---
 * 先頭に塗りの丸アイコンを置いて目に留める（design.md §5.26「帯」）:
 * 済んだことの確認＝.msg-ok は緑地に白抜きチェック、知らせ・注意・誤り＝.msg-warn／.msg-err は地色に白抜き感嘆符。
 * アイコンは左の余白に絶対配置し、複数行・ブロックの子（.msg-err の strong・ul）でも文頭の左に揃える。 */
.msg-ok,
.msg-err,
.msg-warn {
  position: relative;
  border-radius: var(--radius-sm);
  padding: 10px 14px 10px 42px;
  margin: var(--sp-3) 0;
  font-size: var(--fs-base);
  line-height: 1.6;
}
.msg-ok::before,
.msg-err::before,
.msg-warn::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 12px; /* 1行目（行高 24px）の中央に揃える */
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--msg-icon-bg) var(--msg-icon) center / 14px no-repeat;
}
.msg-ok {
  background: var(--c-accent-soft); color: var(--c-accent-strong); font-weight: 600;
  --msg-icon-bg: var(--c-accent);
  --msg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 12.5l3.5 3.5 7.5-8'/%3E%3C/svg%3E");
}
.msg-err,
.msg-warn {
  --msg-icon: var(--ic-bang);
}
/* 感嘆符は線で描くと細く潰れて見えるので、円と同じ 20px の座標で棒（幅2.8px）と点（径3.2px）を塗りで描く */
.msg-err::before,
.msg-warn::before { background-size: 20px; }
.msg-err  { background: var(--c-danger-soft); color: var(--c-danger); --msg-icon-bg: var(--c-danger); }
.msg-warn { background: var(--c-warn-soft);   color: var(--c-warn);   --msg-icon-bg: var(--c-warn); }
/* ボタンを持つ帯: 文章との間はフォームより詰める。ボタン下端には行間が無いので下の余白を右と同じ 14px にする */
:is(.msg-ok, .msg-err, .msg-warn):has(.form-actions) { padding-bottom: 14px; }
:is(.msg-ok, .msg-err, .msg-warn) .form-actions { margin-top: var(--sp-3); }

/* 問い合わせフォーム冒頭の営業禁止の1文: 帯にはせず、先頭に注意の丸アイコン（.msg-warn と同じ感嘆符）だけを置く */
.inq-sales-notice { position: relative; padding-left: 28px; }
.inq-sales-notice::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px; /* 1lh 非対応の既定 */
  top: calc((1lh - 20px) / 2);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--c-warn) var(--ic-bang) center / 20px no-repeat;
}

/* エラーサマリー: 送信後の先頭に置き、各欄へリンクする */
.msg-err strong { display: block; font-weight: 700; }
.msg-err ul { margin: var(--sp-1) 0 0; padding-left: 1.3em; }
.msg-err a { color: inherit; font-weight: 600; }

/* --- 検索パネル form.search（§5.3）の差分。骨格は既存のまま --- */
form.search label {
  display: block;
  font-size: var(--fs-sm);
  color: var(--c-sub);
  margin-bottom: var(--sp-1);
}

/* form.search 内のラジオ・チェックボックス（.choice）は上のブロック用ラベルと別物なので、
   本来の inline-flex 表示を打ち消させない */
form.search label.choice {
  display: inline-flex;
  font-size: var(--fs-base);
  color: var(--c-ink);
  margin-bottom: 0;
}

/* 検索パネルのチェック条件（届出検索「届出者の初回届出だけ」）。セレクト群の間に挟むと格子の
   律が崩れるので、条件の最後に全幅1行で置き、送信行の直前の「補助条件」として読ませる */
form.search .field-choice {
  grid-column: 1 / -1;
}

form.search .field-choice label.choice {
  align-items: center;
}

form.search .actions {
  display: flex;
  align-items: end;
  gap: var(--sp-3);
}

form.search .actions button {
  min-height: var(--field-h);
}

/* 検索パネルの補助語（「クリア」）はボタンではなくリンクのまま。テキスト入力と同じ高さの行に置く */
form.search .actions a {
  display: inline-flex;
  align-items: center;
  min-height: var(--field-h);
  padding: 0 var(--sp-3);
}

/* 送信行の下に添える注記（送信後に何が起きるか・代替導線） */
.form-note {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-sm);
  color: var(--c-sub);
}

/* 確認コード欄: 6桁を大きく等間隔で */
.code-input {
  font-size: 22px;
  letter-spacing: .3em;
  font-variant-numeric: tabular-nums;
}

/* --- 会員エリア・公開フォームの枠（旧 _form_style.html から移設） --- */
.acct {
  max-width: 480px;
  margin: 0 auto;
}

.acct-wide {
  max-width: 760px;
  margin: 0 auto;
}

.acct .card,
.acct-wide .card {
  margin: var(--sp-4) 0;
}

/* 主導線の下に置く代替導線（別のフォーム）。線で仕切って従属だと分かるようにする */
.form-alt {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-line);
}

/* マイページのお気に入り（/mypage/favorites。お気に入りページC案・2026-11-04）。
   上から キーワード追加 → 種類のタブ → 全項目（1項目1パネル・更新はパネルの中のリスト。
   動きのある項目が先）。design.md §5.49 */
.fav-lead { margin: calc(-1 * var(--sp-2)) 0 var(--sp-4); font-size: var(--fs-sm); }
.fav-kw { margin: 0 0 var(--sp-5); }
.fav-kw .field-hint { margin: 0 0 var(--sp-2); }
.fav-item + .fav-item { margin-top: var(--sp-3); }
.fav-head {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  margin-bottom: var(--sp-2);
}
.fav-name { font-weight: 700; }
.fav-remove { margin: 0 0 0 auto; }
/* 項目ごとの更新のリスト。日付・種類・内容の3列を grid で揃える（「ほかN件」の中も同じ列幅）。
   表にはしない（2026-11-04 ユーザー指示）。スマホは日付・種類を1行目、内容を2行目に */
.fav-upd {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--sp-1);
  font-size: var(--fs-sm);
}
.fav-upd > li { display: grid; grid-template-columns: 56px 160px minmax(0, 1fr); column-gap: var(--sp-2); }
.fav-upd-title { min-width: 0; overflow-wrap: anywhere; }
.fav-more { margin-top: var(--sp-2); }
.fav-more > summary { font-size: var(--fs-sm); color: var(--c-accent-strong); }
.fav-idle-note { margin: 0; font-size: var(--fs-sm); }
@media (max-width: 640px) {
  .fav-upd { gap: var(--sp-2); }
  .fav-upd > li { grid-template-columns: auto minmax(0, 1fr); }
  .fav-upd-title { grid-column: 1 / -1; }
}

/* 公開ページからの深いリンク（オーナーレンズ・Issue #1046）が固定ヘッダーの下に
   隠れないよう、アンカー先の要素をヘッダー分だけ下げてスクロール停止する */
.acct-wide [id] {
  scroll-margin-top: calc(var(--head-h) + var(--sp-5));
}

/* 成分ページ「原料の取扱会社」が空のときの主文（ingredient_detail.html）。
 * 確認済みの事実として言い切るので、アクセントの濃色・太字・緑丸の白抜きチェックで1行目に立てる */
.supply-none {
  display: flex; align-items: center; gap: var(--sp-1);
  margin: 0; font-weight: 700; color: var(--c-accent-strong);
}
.supply-none svg {
  flex: none; box-sizing: content-box; padding: 3px; border-radius: 50%;
  background: var(--c-accent-strong); color: var(--c-surface);
}

/* 検索サジェスト（design.md §5.13。取扱会社検索のカテゴリ付き候補。
 * DOMは _supplier_suggest.html のJSが生成。JS無効時は出ない＝機能欠落なし） */
.suggest-wrap {
  position: relative;
}

.suggest-box {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: var(--z-pop);  /* 本文内の absolute。ヘッダー（--z-head）より前に出す理由は無い */
  margin-top: 2px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  max-height: 320px;
  overflow-y: auto;
}

.suggest-box .sg-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-3);
  padding: 7px 10px;
  font-size: var(--fs-base);
  cursor: pointer;
}

.suggest-box .sg-item.is-active,
.suggest-box .sg-item:hover {
  background: var(--c-accent-soft);
}

.suggest-box .sg-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.suggest-box .sg-note {
  margin-left: var(--sp-2);
  color: var(--c-sub);
  font-size: var(--fs-xs);
}

/* 成分の候補に無い名前を足す行（_ingredient_chips.html）。候補と区切って末尾に置く */
.suggest-box .sg-item.sg-new {
  border-top: 1px solid var(--c-line);
  color: var(--c-accent-strong);
}

.suggest-box .sg-cat {
  flex: none;
  color: var(--c-accent-strong);
  font-size: var(--fs-xs);
}

/* ------------------------------------------------------------ */
/* 9. ボタン・フォーカスリング */
/* ------------------------------------------------------------ */
button {
  background: var(--c-accent-strong);
  color: #fff;
  border: 1px solid transparent;  /* .secondary・a.btn-secondary（枠線1px）と外寸を揃える */
  border-radius: var(--radius-sm);
  padding: 8px 19px;
  font-size: var(--fs-base);
  line-height: 1.4;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}

button:hover {
  background: var(--c-accent-deep);
}

button:active {
  background: var(--c-accent-deep);
}

button:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* 罠: この塗りは「地色なしの枠線ピル」（.feed-fav-btn / .feed-add-btn /
 * .feed-pulse / .bulk-bar-clear など、非hover側で background: none を敷く系列）
 * より詳細度で勝つ（button:hover = 要素+擬似クラス > クラス単独）。
 * 各ピルの :hover で地色を明示しないと、hover中に文字（--c-accent-strong）が
 * 地と同化して消える。新しい枠線ピルを足すときは :hover 側に background を書く。 */

/* リンクボタン（design.md §5.4 のプライマリ／セカンダリを <a> に適用する版。
   成分詳細の概要ヘッダーCTAなど、フォーム外の主要導線に使う） */
a.btn-primary,
summary.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--c-accent-strong);
  color: #fff;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 8px 19px;
  min-height: var(--field-h);  /* <button>（15px）と並んでも高さが揃う */
  font-size: var(--fs-base);
  font-weight: normal;
  line-height: 1.4;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease;
}

a.btn-primary:hover,
summary.btn-primary:hover {
  background: var(--c-accent-deep);
}

a.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--c-surface);
  color: var(--c-accent-strong);
  border: 1px solid var(--c-field-line);  /* button.secondary と同じ枠色（--c-line は白地で枠として見えない） */
  border-radius: var(--radius-sm);
  padding: 8px 19px;
  min-height: var(--field-h);
  font-size: var(--fs-base);
  font-weight: normal;
  line-height: 1.4;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease;
}

a.btn-secondary:hover {
  background: var(--c-accent-soft);
  border-color: var(--c-accent);
}

/* 表の行内で button.small と並べるリンク（資料の一覧の「編集」）。外寸を button.small に揃える */
a.btn-secondary.small {
  min-height: 0;
  padding: 4px 10px;
  font-size: var(--fs-sm);
}

/* 小ボタン（表内・.btn-row・a.owner-edit）は 28px だが、タッチ端末では §7 の 40px に広げる */
@media (pointer: coarse) {
  button.small,
  a.btn-secondary.small,
  .btn-row button,
  .owner-edit,
  .supply-table .doc-add {
    min-height: 40px;
  }
}

/* ページ内アンカー目次（design.md §5.10）: sticky ヘッダー（L1 56px＋L2 44px）に
   見出しが隠れないよう、ジャンプ先にオフセットを持たせる */
.chapter,
.chapter h2[id],
h2[id],
h3[id] {
  scroll-margin-top: calc(var(--head-h) + var(--sp-5));
}

/* ページ内アンカー目次（design.md §5.10）: カード面の帯に「目次」ラベル＋
   番号つき章リンク。チップ（タグ・絞り込みの意味論）とは使い分ける。
   ナビ項目はインク色・下線なし（L1/L2・サイドバーと同族）・hoverでティール。
   ティールの章番号が項目の区切りと「目次である」ことを同時に伝える */
nav.page-toc {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 20px;
  background: var(--c-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 10px var(--sp-4);
  margin: 0 0 var(--sp-4);
}

nav.page-toc .toc-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--c-sub);
  padding-right: var(--sp-3);
  border-right: 1px solid var(--c-line);
}

nav.page-toc a {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--c-ink);
  text-decoration: none;
  white-space: nowrap;
}

nav.page-toc a .toc-no {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--c-accent);
}

nav.page-toc a .toc-sub {
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--c-sub);
}

nav.page-toc a:hover {
  color: var(--c-accent-strong);
}

/* 地方ブロックで区切る目次（/oem/regions・計画 #2462）: 1ブロック=1行。ブロック名は .toc-label の見た目のリンク */
nav.page-toc.toc-blocks {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}

nav.page-toc .toc-block {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 20px;
}

nav.page-toc a.toc-label {
  min-width: 5em;
}

/* サイトマップ（/sitemap）: 章（§5.11）の中に、セクション1つ=.card 1枚を並べる。面は .card のもので、新しい面は作らない。
   カード見出し（h3）がセクションのトップへのリンク、その下に1行の案内とサイドバー（L3）と同じリンク */
.sitemap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--sp-3);
}

.sitemap-card > :last-child {
  margin-bottom: 0;
}

.chapter .sitemap-card h3 {
  margin: 0 0 var(--sp-1);
}

.sitemap-card h3 a {
  color: var(--c-ink);
  text-decoration: none;
}

.sitemap-card h3 a:hover {
  color: var(--c-accent-strong);
}

.sitemap-lead {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--c-sub);
}

.sitemap-card ul {
  margin: 0;
  padding-left: 1.2em;
}

.sitemap-card li {
  margin: 2px 0;
}

/* 使い方ガイド（/help・/help/<slug>）: 章（§5.11）の中に .card を置く。面は .card のもので、新しい面は作らない。
   入口はガイド1本=リンクカード1枚（ガイド名＋1行の説明）、手順・質問は1件=カード1枚を縦に積む */
.help-guides {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-3);
}

.help-guide-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  height: 100%;
  box-sizing: border-box;
  color: var(--c-ink);
  text-decoration: none;
  transition: box-shadow .15s ease, transform .15s ease;
}

.help-guide-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

/* 先頭のガイド名は flex の子（ブロック化される）なので、共通規則の .card > :first-child で字面まで削られる */
.help-guide-card > .help-guide-name {
  color: var(--c-accent-strong);
  font-weight: 700;
}

.help-guide-card:hover .help-guide-name {
  text-decoration: underline;
}

.help-guide-desc {
  font-size: var(--fs-sm);
  color: var(--c-sub);
}

.help-stack {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-3);
}

.help-card > :last-child {
  margin-bottom: 0;
}

/* ガイドのパネルは表を持つものも面ごと読み幅に合わせる（文の右に空いた面を残さない。
 * 表は折り返して収まり、狭い画面では .table-scroll で横に送る。design.md §5.40） */
.help-card {
  max-width: calc(var(--measure) + 2 * var(--sp-5));
}

.help-card h3 a {
  color: var(--c-ink);
  text-decoration: none;
}

.help-card h3 a:hover {
  color: var(--c-accent-strong);
}

/* 手順（ol の中の ul）でも白丸にせず、ほかの面と同じ黒丸にそろえる */
.help-card ul {
  padding-left: 1.2em;
  list-style: disc;
}

/* 規約・ポリシー・運営者情報・クローラーの案内（/terms /privacy /about /about-bot）。
 * 目次（§5.10）＋章（§5.11）＋章ごとのパネル（.card・dl.meta・表）で組む。ページ全体を読み幅＋左右 padding の
 * 1本の列に収め、目次・パネル・表の右端を本文の右端に揃える（.help-card と同じ考え方。§5.40） */
.doc {
  max-width: calc(var(--measure) + 2 * var(--sp-5));
}

.doc .card > :last-child,
.doc .card > :last-child > li:last-child {
  margin-bottom: 0;
}

.doc .card :is(ul, ol) {
  padding-left: 1.4em;
}

.doc .card li + li {
  margin-top: var(--sp-2);
}

/* 箇条の見出し（「アカウント情報」等）は1行に立て、説明はその下に続ける。括弧の補足は --c-sub */
.doc .doc-term {
  display: block;
}

.doc .doc-term .doc-term-sub {
  font-size: var(--fs-sm);
  color: var(--c-sub);
}

/* 章タイトル直下のリード（§5.11 の章直下 muted リード） */
.doc .chapter-title + p.muted {
  margin-top: 0;
}

/* 「健食ビジネスハブとは」（/concept）の h1 直下のキャッチコピー。リード文（p.muted）の前に1行だけ置く */
.doc .concept-catch {
  margin: var(--sp-2) 0 var(--sp-3);
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: 1.4;
  color: var(--c-accent-deep);
}

@media (max-width: 640px) {
  .doc .concept-catch {
    font-size: var(--fs-lg);
  }
}

.doc pre {
  margin: var(--sp-2) 0 0;
  background: var(--c-surface-soft);
  border-radius: var(--radius-sm);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-sm);
  overflow-x: auto;
}

/* 制定日・改定日（ページ末尾） */
.doc .doc-dates {
  margin-top: var(--sp-7);
}

/* ガイドの手順のコマンド例と画面の写し（design.md §5.48）。写しは面の地（--c-bg）ごと撮るので枠は付けない */
.help-card .help-code {
  margin: var(--sp-3) 0;
  background: var(--c-surface-soft);
  border-radius: var(--radius-sm);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-sm);
  overflow-x: auto;
}

.help-shot {
  margin: var(--sp-4) 0 0;
}

.help-shot img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.help-shot figcaption {
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--c-sub);
}

.help-step-no {
  margin-right: var(--sp-2);
  color: var(--c-accent-strong);
  font-variant-numeric: tabular-nums;
}

/* 章ヘッダー（design.md §5.11）: 詳細ページの章の可視化。
   章は上罫線＋大きめの章間余白で区切り、章タイトルはティールの左バー。
   章内のパネル見出しは h3 に降格し、旧 h2 相当の見た目を維持する。 */
.chapter {
  margin-top: var(--sp-7);
  border-top: 1px solid var(--c-line);
  padding-top: var(--sp-5);
}

/* 目次直後の最初の章（章0: 基本情報）はファーストビューなので間隔を詰め、
   目次パネルとの間の上罫線も引かない（目次の面で区切りは足りている） */
nav.page-toc + .chapter {
  margin-top: var(--sp-5);
  border-top: 0;
  padding-top: 0;
}

h2.chapter-title {
  font-size: 20px;
  border-left: 4px solid var(--c-accent);
  padding-left: var(--sp-3);
  margin: 0 0 var(--sp-3);
}

.chapter h3 {
  font-size: var(--fs-md);
  margin: var(--sp-6) 0 var(--sp-3);
}

/* 章タイトル直後の h3 は章の見出しが直上にあるため上余白を詰める */
.chapter .chapter-title + h3 {
  margin-top: 0;
}

/* サマリーパネル（design.md §5.12）: 統計数字＋データ要約行を1枚の面に。
   パネル内では .card（面）を入れ子にせず、枠なしの .stat-row を使う。
   面の中＝データとその要約／面の外＝説明リード・注意書き、の役割分担 */
.panel .stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-7);
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-3);
  border-bottom: 1px solid var(--c-line);
}

.panel .stat-row:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}

.stat-row .num {
  font-size: 24px;
  font-weight: 700;
  /* 等幅数字。縦に積む統計行は桁位置が揃わないと比較しづらい（design.md §6） */
  font-variant-numeric: tabular-nums;
}

.stat-row .label {
  color: var(--c-sub);
  font-size: var(--fs-sm);
}

/* サマリーパネルの要約行（design.md §5.12）: 項目が3つ以上になると muted の地の文では
   境目が読めないため、「ラベル｜値」の2列に揃える。狭幅ではラベルを値の上に積む */
.summary-dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px var(--sp-4);
  margin: 0;
  font-size: var(--fs-sm);
}

.summary-dl dt {
  color: var(--c-sub);
}

.summary-dl dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
  .summary-dl {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .summary-dl dd + dt {
    margin-top: var(--sp-2);
  }
}

/* 会社詳細「事業内容」章の業態パネル（design.md §5.24・意匠モック確定・Issue #767）。
   1業態=1パネル。見出し→実績メタ行（.role-stats・1行・縦線区切り）→プロフィール文
   の順。.panel .stat-row（§5.12）と役割は同じだが罫線を引かない軽量版
   （プロフィール文と地続きに読ませたいメタ行のため、区切り線で「統計とその先」を
   分断しない）。 */
.panel--role {
  margin: 0 0 var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
}

/* 業態パネルの読み幅より右（design.md §5.24・2026-11-11 モック）。本文を読み幅（--measure）で止めると
   広い画面でパネルの右が白く空き、表示の崩れに見える。読み幅の外を薄い地の斜線で塗り分け、境に罫を引いて
   「意図して空けている」ことを示す（無地のグレー・ページ地の濃さと比べて斜線を採用）。中身はすべて読み幅の
   内側に収める。パネルが読み幅より狭いときは塗り分けの位置が面の外に出るので、全面が白のまま。 */
.panel.panel--role {
  --role-col: calc(var(--measure) + 2 * var(--sp-5));
  background:
    linear-gradient(to right,
      var(--c-surface) var(--role-col),
      var(--c-line) var(--role-col), var(--c-line) calc(var(--role-col) + 1px),
      transparent calc(var(--role-col) + 1px)),
    repeating-linear-gradient(135deg, var(--c-surface-soft) 0 6px, var(--c-line) 6px 7px);
}
.panel--role > * { max-width: var(--measure); }

.panel--role h3 {
  margin: 0 0 6px;
  font-size: var(--fs-md);
}

.role-stats {
  margin: 0 0 var(--sp-2);
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;
  font-size: var(--fs-sm);
  line-height: 1.5;
}

.role-stats span {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}

.role-stats span + span {
  padding-left: 12px;
  border-left: 1px solid var(--c-line);
}

.role-stats .k {
  color: var(--c-sub);
}

/* 業態パネルの窓口電話（.role-stats の直後・押すと開示APIで番号を出す） */
.role-phone {
  margin: 0 0 var(--sp-2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  font-size: var(--fs-sm);
}

.role-phone .k {
  color: var(--c-sub);
}

.role-stats b {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-base);
}

.role-text {
  margin: 0;
  max-width: var(--measure);
}

/* ------------------------------------------------------------ */
/* 10. チップ・ページャ・注記 */
/* ------------------------------------------------------------ */
.muted {
  color: var(--c-sub-strong);
  font-size: var(--fs-sm);
}

/* パンくず（詳細ページのみ・design.md §4.5） */
.breadcrumbs {
  font-size: var(--fs-sm);
  color: var(--c-sub-strong);
  margin-bottom: var(--sp-2);
}
.breadcrumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 0;
}
.breadcrumbs li {
  display: flex;
  align-items: center;
  min-width: 0;
}
.breadcrumbs li + li::before {
  content: "›";
  margin: 0 6px;
}
.breadcrumbs a {
  color: var(--c-sub-strong);
  text-decoration: none;
}
.breadcrumbs a:hover {
  color: var(--c-ink);
  text-decoration: underline;
}
.breadcrumbs [aria-current="page"] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 36ch;
}

/* h1 行の右に置く副導線（公開ページを見る等。design.md §4.5）。狭幅では h1 の下へ折り返す */
.title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 16px;
}
.title-row h1 {
  margin-bottom: 0;
  min-width: 0;
}
.title-row .title-aside {
  display: flex;
  align-items: baseline;
  gap: 16px;
  font-size: var(--fs-sm);
  white-space: nowrap;
}

/* リンクの見た目のボタン（popover を開く等、遷移しない副導線） */
button.link-btn {
  background: none;
  border: 0;
  padding: 0;
  color: var(--c-accent-strong);
  font-size: inherit;
  line-height: inherit;
}
button.link-btn:hover {
  background: none;
  text-decoration: underline;
}

/* プレビューのモーダル（popover。product_edit の「一覧表示をプレビュー」） */
.preview-pop {
  width: min(720px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  overflow: auto;
  padding: var(--sp-4);
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--c-bg);
  box-shadow: var(--shadow-float);
}
.preview-pop::backdrop {
  background: rgba(15, 23, 42, .4);
}
.preview-pop-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.preview-pop-head h2 {
  margin: 0;
}

/* 更新の検知（product_edit。担当者が設定した値より新しい公式サイトの値を左右に並べて採否を聞く） */
.update-notice {
  margin: var(--sp-1) 0 var(--sp-2);
  border: 1px solid var(--c-warn);
  border-radius: var(--radius-sm);
  background: var(--c-warn-soft);
  font-size: var(--fs-sm);
}
.update-notice > summary {
  padding: 6px 10px;
  color: var(--c-warn);
  font-weight: 600;
  cursor: pointer;
}
.update-notice[open] > summary {
  border-bottom: 1px solid var(--c-line);
}
.update-body {
  padding: var(--sp-3);
  background: var(--c-surface);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
.update-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}
@media (max-width: 640px) {
  .update-cols { grid-template-columns: 1fr; }
}
.update-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  background: var(--c-surface-soft);
}
.update-col.is-new {
  border-color: var(--c-accent);
  background: var(--c-accent-soft);
}
.update-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin: 0 0 6px;
}
.update-tag {
  padding: 1px 10px;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-full);
  background: var(--c-surface);
  color: var(--c-sub-strong);
  font-size: var(--fs-xs);
  font-weight: 600;
}
.is-new .update-tag {
  border-color: var(--c-accent);
  background: var(--c-accent-strong);
  color: #fff;
}
.update-date {
  color: var(--c-sub);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}
.update-val {
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.update-val:not(.is-list) { white-space: pre-line; } /* 詳細情報の改行・空行を比較でも見せる */
.update-val.is-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.update-val del {
  background: var(--c-danger-soft);
  color: var(--c-danger);
}
.update-val ins {
  background: #CCF2EA;
  color: var(--c-accent-deep);
  text-decoration: none;
  font-weight: 600;
}
.diff-chip {
  padding: 1px 8px;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-full);
  background: var(--c-surface);
}
.diff-chip del, .diff-chip ins { background: none; }
.diff-chip.is-del { border-color: var(--c-danger); background: var(--c-danger-soft); }
.diff-chip.is-ins { border-color: var(--c-accent); background: #CCF2EA; }
.diff-empty { color: var(--c-sub); }
.update-source {
  margin: auto 0 0;
  padding-top: 6px;
  color: var(--c-sub);
  font-size: var(--fs-xs);
  text-align: right;
}
.update-source a { color: inherit; }
.update-edit { margin-top: var(--sp-2); }
.update-edit > summary {
  width: fit-content;
  color: var(--c-accent-deep);
  font-size: var(--fs-xs);
  font-weight: 600;
  cursor: pointer;
}
.update-edit[open] > summary { margin-bottom: 6px; }
.update-edit input[type="text"], .update-edit textarea {
  width: 100%;
  background: var(--c-surface);
}
.update-edit .choice-group { gap: 6px; }
.update-ask {
  margin: var(--sp-3) 0 var(--sp-1);
  font-weight: 600;
}
.update-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}
.title-row + * {
  margin-top: var(--sp-3);
}

.pager {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  margin: var(--sp-4) 0;
}

/* ページ送りのリンクは丸型の面。タップ領域を文字の高さだけにしない */
.pager a {
  display: inline-flex;
  align-items: center;
  min-height: var(--field-h);
  padding: 0 var(--sp-4);
  border-radius: var(--radius-full);
  background: var(--c-accent-soft);
  color: var(--c-accent-strong);
  font-weight: 600;
  text-decoration: none;
}

.pager a:hover {
  background: var(--c-accent-strong);
  color: #fff;
}

/* 公開一覧の下端のページ送り（_pager.html・design.md §5.7）。前へ・次へは .pager a と同じ淡いピル、
   番号は地の上の丸、現在地だけ塗る。上端には置かない */
.pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--sp-2);
  margin: var(--sp-3) 0 var(--sp-6);
}
.pagination a,
.pagination .cur,
.pagination .step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--field-h);
  min-height: var(--field-h);
  padding: 0 var(--sp-2);
  border-radius: var(--radius-full);
  font-weight: 600;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.pagination a { color: var(--c-accent-strong); }
.pagination a:hover { background: var(--c-accent-soft); }
.pagination .cur { background: var(--c-accent-strong); color: #fff; }
.pagination .step { padding: 0 var(--sp-4); }
.pagination a.step { background: var(--c-accent-soft); }
.pagination a.step:hover { background: var(--c-accent-strong); color: #fff; }
.pagination .step.off { visibility: hidden; }
.pagination .gap { color: var(--c-sub); min-width: 1em; text-align: center; }
.list-count.foot { text-align: center; margin: var(--sp-6) 0 0; }
@media (max-width: 640px) {
  .pagination { gap: var(--sp-1); }
  .pagination .far { display: none; }
  .pagination .step { padding: 0; }
  .pagination .step .lbl {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
}

/* 0件の面。.card.empty（面全体）と td.empty（表の1行）で使い、インラインの text-align:center を書かない */
.empty {
  text-align: center;
  color: var(--c-sub);
  font-size: var(--fs-sm);
  padding: var(--sp-5) var(--sp-4);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

/* 表のセルに並べるチップ（/jobs の募集中の職種）。折り返した2行目との上下は --sp-2 空け、
   横は小さいチップに合わせて --sp-1 に詰める */
.chips.chips-cell {
  gap: var(--sp-2) var(--sp-1);
}

/* ニュースの表: 種別のバッジが折り返しても上下に間を空ける */
.release-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
}

/* ニュースの表: 成分ピルはタイトル・要約セルの一番下に置く */
.release-ings {
  margin-top: var(--sp-2);
}

/* チップは改行させない（design.md §5.5）。角丸 full のまま2行に折れると楕円になるため、
 * 長い名前は折り返さず「…」で省略する（全名は title 属性）。上限は置き場所によらず 16em
 * （表のセルでは % の上限が効かないため em。16em≒15字＝本番のニュースの成分名の97%が無傷、
 * 2026-10-05 実測・最長35字）。inline-block＋overflow:hidden はベースラインが下端に移るので
 * vertical-align: bottom で行内の文字と揃える（.feed-prod-text a と同じ）。 */
.chip {
  display: inline-block;
  max-width: min(16em, 100%);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  background: var(--c-accent-soft);
  border-radius: var(--radius-full);
  padding: var(--pill-pad-sm);
  font-size: var(--fs-sm);
}

/* 定型文の誘導チップ（お気に入り登録・お気に入りの出展社を見る等）は省略すると意味が欠けるため上限を外す */
.chip.chip-wide {
  max-width: 100%;
}

/* チップは形状（丸い面）で押せることが判別できるため下線を省く（design.md §7） */
a.chip {
  text-decoration: none;
}

a.chip:hover {
  text-decoration: underline;
}

/* 選択中の接触チャネルチップ（仕様書_サプライヤー検索と問い合わせリレー §2.18）。
   塗りつぶし＋クリックで解除。 */
.chip.on {
  background: var(--c-accent-strong);
  color: #fff;
  font-weight: 600;
}

/* バッジをリンクとして使う場合（OEM対応バッジ §2.18）も下線を省く */
a.badge {
  text-decoration: none;
}

a.badge:hover {
  text-decoration: underline;
}

/* L4 ページ内フィルタ: ビュー切替タブ（design.md §4.4・2026-08-14改定）。
   用途は「少数固定のビュー切替」（会社で見る/製品で見る）に限定 —
   増えうる並び替え軸の選択はプルダウン（.list-sort）で表現する。
   丸い小片（.chip・活動ピル・語彙チップ）とは**形で**役割を分ける: この画面で
   下線タブを持つのはビュー切替だけ＝一覧そのものを切り替える骨格の操作。
   旧 .pills / .pill（セグメントピル）は使い手がここだけだったため置換で撤去。 */
.view-tabs {
  display: flex;
  gap: var(--sp-5);
  margin: 0 0 var(--sp-4);
  /* 下罫線は内側の影で描く: overflow-x で選択中の下線（::after）が切れないよう、
   * 罫線を padding box の中に置いて下線を重ねる */
  box-shadow: inset 0 -1px 0 var(--c-line);
  overflow-x: auto;        /* 狭幅でタブが本文幅を超えたら折り返さず横に送る（.l2-tabs と同じ） */
  scrollbar-width: none;
}

.view-tabs::-webkit-scrollbar {
  display: none;
}

.view-tab {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px 0 9px;  /* 下の2px下線と重ねるため下だけ厚い */
  font-size: var(--fs-base);
  color: var(--c-sub);
  text-decoration: none;
  white-space: nowrap;
}

a.view-tab:hover {
  color: var(--c-accent-strong);
}

.view-tab.is-on {
  color: var(--c-ink);
  font-weight: 700;
}

/* 選択中の下線は .view-tabs の下罫線（内側の影）に重ねる */
.view-tab.is-on::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--c-accent);
  border-radius: 2px 2px 0 0;
}

/* 件数カウンタ: 単位（社・製品）は付けない — 何の数かはタブのラベルが担保する。
   2桁までは真円・3桁以上は横に伸びるカプセル（成分あたり最大131製品・検索側は
   4桁もあり得るため真円固定にはしない）。 */
.view-tab-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 21px;
  height: 21px;
  padding: 0 4px;  /* 2桁までは min-width が勝って真円・3桁からカプセル */
  border-radius: var(--radius-full);
  background: var(--c-info-soft);
  color: var(--c-sub);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.view-tab.is-on .view-tab-n {
  background: var(--c-accent-strong);
  color: #fff;
}

/* 業界ニュース（/releases）の発表元の業態チップ行と、折りたたみ検索（計画 #1925） */
.feed-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-3);
}

.feed-filters-label {
  font-size: var(--fs-sm);
  color: var(--c-sub);
}

.search-fold {
  margin: 0 0 var(--sp-4);
}

.search-fold > summary {
  display: inline-block;
  cursor: pointer;
  font-size: var(--fs-sm);
  color: var(--c-accent-strong);
}

.search-fold[open] > summary {
  margin-bottom: var(--sp-3);
}

.search-fold form.search {
  margin-bottom: 0;
}

/* 業界ニュースの1面（/releases の先頭・計画 #1925・考察_ニュースの見せ方 §8.3）。
   ① 見出し＋3行（.front-lead）→ ③ 公的ニュース（表）→ 企業ニュース（表）。
   ②④⑤ の部品（.front-status 等）は /releases/stats が使う */
.front-dateline {
  margin: 0 0 var(--sp-2);
  color: var(--c-sub);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}
.front-lead {
  padding: var(--sp-5);
}
.front-headline {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-lg);
  line-height: 1.45;
}
.front-lede {
  margin: 0;
  padding-left: 1.2em;
  line-height: 1.75;
}
.front-lead-foot {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-sm);
}
.front-sec {
  margin: var(--sp-5) 0 var(--sp-2);
}
.front-sec-sub {
  margin-left: var(--sp-1);
  color: var(--c-sub-strong);
  font-size: var(--fs-sm);
  font-weight: 400;
}
.front-summary {
  margin: 0 0 var(--sp-2);
}
.front-th-sub {
  color: var(--c-sub-strong);
  font-size: var(--fs-xs);
  font-weight: 400;
}
.front-status th[scope="row"],
.front-ledger th[scope="row"],
.front-week th[scope="row"] {
  font-weight: 600;
  white-space: nowrap;
}
/* 業界紙の話題の推移「特集を含む」: その語が題に入った特集の面に記事が載った月のセル（/releases/stats）。
   凡例 .front-feat-key は注記の中で同じ地色を敷く */
.front-ledger td.front-feat,
.front-feat-key {
  background: var(--c-accent-soft);
  color: var(--c-ink);
}
.front-feat-key {
  padding: 0 var(--sp-1);
  border-radius: var(--radius-sm);
}
/* 状況表は2段組の主欄に収める（design.md §5.28）: 判定バッジと動きの型を2段に積み、
   推移グラフを細くし、セルの左右余白を詰める。収まらない幅では機能列を左に固定する */
.front-status th,
.front-status td {
  padding-left: var(--sp-2);
  padding-right: var(--sp-2);
}
/* sticky を効かせるため table 既定の overflow: hidden を外す（.compare-matrix と同じ） */
table.front-status {
  overflow: visible;
}
.front-status th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--c-surface);
  box-shadow: inset -1px 0 0 var(--c-line-strong);
}
.front-move {
  display: block;
  margin-top: 2px;
  color: var(--c-sub);
  font-size: var(--fs-sm);
  white-space: nowrap;
}
.front-prev {
  color: var(--c-sub);
  font-size: var(--fs-xs);
}
.front-up {
  color: var(--c-accent-strong);
  font-weight: 600;
}
.front-down {
  color: var(--c-danger);
  font-weight: 600;
}
.front-spark svg {
  display: block;
}
/* トピック分析（/releases ②）: 種別（成分・機能・キーワード）は名前の上に小さく添える。
 * 内訳は件数ピルを折り返して並べ、最新の1本は2行で切る */
.front-topic-kind {
  display: block;
  color: var(--c-sub);
  font-size: var(--fs-xs);
  font-weight: 400;
  line-height: 1.3;
}
.front-kinds {
  min-width: 7em;
}
.front-kinds .feed-cnt {
  display: inline-block;
  margin: 1px 4px 1px 0;
  white-space: nowrap;
}
.front-latest {
  min-width: 14em;
  font-size: var(--fs-sm);
}
.front-latest a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.front-latest-date {
  color: var(--c-sub);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}
.front-note {
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
}
.front-due-left {
  color: var(--c-sub);
  font-size: var(--fs-xs);
}
.front-streak {
  display: block;
  color: var(--c-accent-strong);
  font-size: var(--fs-xs);
  font-weight: 400;
}
.front-last {
  font-weight: 700;
}
.front-archive-head {
  margin-top: var(--sp-7);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-line-strong);
}

.releases-tabs {
  margin-top: var(--sp-5);
  overflow-x: auto;
}

/* 検索結果ヘッダー: 件数（データ・左）と並び順（操作・右肩 §4.4）を1行で役割分離 */
.list-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-4);
  margin: var(--sp-4) 0 var(--sp-3);
}

.list-head .list-count {
  margin: 0;
}

/* 0件で件数行が消えても並び順は右肩に残す（§5.34） */
.list-head .list-sort {
  margin-left: auto;
}

/* 一覧の件数行（design.md §5.32・_list_count.html）。行は補足の扱い、件数の数字だけ本文色の太字 */
.list-count {
  color: var(--c-sub-strong);
  font-size: var(--fs-sm);
}

/* ページ送りの飛び先（#list）が固定ヘッダの下に隠れないように */
#list {
  scroll-margin-top: calc(var(--head-h) + var(--sp-5));
}

.list-count strong {
  color: var(--c-ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* 会社管理の取扱原料一覧（表）。数百件を持つサプライヤー向けに、検索＋状態タブ＋
   1行1原料の表で一望させる。セルは1行に収まる短い値だけを置き、長い値（要約）は
   編集ページへ回す。 */
.supply-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  margin: var(--sp-4) 0 var(--sp-3);
}

.supply-search {
  flex: 1 1 18em;
  max-width: 32em;
}

.supply-add-link {
  margin-left: auto;
  white-space: nowrap;
}

/* 「＋ 製品を追加 ▾」の2択（account/_product_add_menu.html・2026-10-26 案A）。
 * .user-menu と同じ details の型。パネルはボタンの右端にそろえ、狭幅でははみ出さない */
.add-menu {
  position: relative;
}

.add-menu summary {
  list-style: none;
  cursor: pointer;
  gap: 6px;
}

.add-menu summary::-webkit-details-marker {
  display: none;
}

.add-menu-caret {
  font-size: var(--fs-xs);
}

.add-menu-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: var(--z-pop);
  width: min(320px, calc(100vw - 32px));
  background: var(--c-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-hover);
  padding: var(--sp-2) 0;
  white-space: normal;
}

.add-menu-panel a,
.add-choice-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--c-ink);
  text-decoration: none;
}

.add-menu-panel a {
  padding: var(--sp-2) var(--sp-4);
}

.add-menu-panel a span,
.add-choice-item span {
  font-size: var(--fs-sm);
  color: var(--c-sub);
}

.add-menu-panel a:hover,
.add-choice-item:hover {
  background: var(--c-accent-soft);
}

.add-menu-panel a:hover b,
.add-choice-item:hover b {
  color: var(--c-accent-strong);
}

/* 製品0件の画面の2択（カード2枚） */
.add-choice {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-4);
}


.supply-bulk .list-head {
  margin-top: var(--sp-3);
}

/* セルの余白は素の表（th, td の 10px 12px）のまま。7px 10px に詰めていたが、
   チェック列のある表だけ窮屈に見えて他の表と揃わなかった（2026-10-13 ユーザー指摘） */
.supply-table th,
.supply-table td {
  white-space: nowrap;
}

.supply-table .col-check {
  width: 1%;
  text-align: center;
}

.supply-table .col-check input {
  margin: 0;
}

.supply-table .col-name {
  font-weight: 600;
}

/* 長い値は1行で切って末尾を…にする（全文は title と編集ページで読める）。
   行の高さを揃えるのが表で一望させる前提（折り返すと数百行が倍の高さになる）。 */
.supply-table .cell-clip {
  display: block;
  max-width: 14em;
  overflow: hidden;
  text-overflow: ellipsis;
}

.supply-table .col-cert {
  color: var(--c-sub);
}

.supply-table .col-cert .cell-clip {
  max-width: 11em;
}

/* 出典はホスト名を出さず外部リンクアイコンだけにして幅を詰める（ホスト名は title で読める） */
.supply-table .col-src {
  width: 1%;
  text-align: center;
}

/* 資料の件数と「追加」ボタン（上限の5件で消える）。ボタンは編集画面の製品資料の節へ飛ぶ。
   形は一括操作の「非公開」（.btn-row button.secondary）と同じ小ボタン */
.supply-table .col-docs {
  width: 1%;
  white-space: nowrap;
}

.supply-table .doc-add {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 8px;
  border: 1px solid var(--c-field-line);
  border-radius: var(--radius-sm);
  background: var(--c-surface);
  color: var(--c-accent-strong);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
}

.supply-table .doc-add:hover {
  background: var(--c-accent-soft);
  border-color: var(--c-accent);
  text-decoration: none;
}

.supply-table tr:has(.col-check input:checked) td {
  background: var(--c-accent-soft);
}

/* 横スクロール時（640px以下）に原料名列を左端に固定する（.compare-matrix と同じ
   position: sticky パターン。PR #1739 の残課題）。チェック列も合わせて固定しないと
   名前列の下にチェックボックスが隠れる。left の 40px はチェック列の実測幅
   （左右 padding 12px×2 + checkbox 16px）。 */
@media (max-width: 640px) {
  .supply-table .col-check,
  .supply-table .col-name {
    position: sticky;
    z-index: 1;
    background: var(--c-surface);
  }

  .supply-table .col-check {
    left: 0;
  }

  .supply-table .col-name {
    left: 40px;
  }

  /* チェック列の無い表（製品の更新の確認）は名前列が左端 */
  .supply-table .col-name:first-child {
    left: 0;
  }

  .supply-table tr:has(.col-check input:checked) .col-check,
  .supply-table tr:has(.col-check input:checked) .col-name {
    background: var(--c-accent-soft);
  }
}

/* 並び替えプルダウン（design.md §4.4）: 軸が増えても場所を取らない標準形。
   .list-filter は同じ寸法の絞り込みプルダウン（ラベルが「並び順」以外・/ingredients/stats）。
   ラベル・selectとも結果ヘッダーに収まるコンパクト寸法（form.search より小さい） */
.list-sort,
.list-filter {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--c-sub);
  font-size: var(--fs-sm);
}

.list-sort label,
.list-filter label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
}

.list-sort select,
.list-filter select {
  width: auto;
  min-height: 32px;
  padding: 0 28px 0 8px;
  font-size: var(--fs-sm);
  background-position: right 9px center;
}

/* お気に入りの種類（9択のプルダウン・design.md §5.49）: 一覧の上に1行で置く */
.fav-cat {
  display: flex;
  margin: 0 0 var(--sp-4);
}

/* 絞り込みが2つ並ぶとき（/ingredients/stats の機能・食品の形）。狭い幅では折り返す */
.stats-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
}

/* 一覧誘導リンク「すべて見る」（design.md §5.13）。
   記号は全箇所共通で16pxの塗り円＋白抜きシェブロン。::after を absolute で
   置き、長文リンクの折り返しで記号だけが行頭に孤立しないようにする */
/* 文字サイズは周囲の文章に合わせる（inherit・design.md §5.13）。13px固定
   だった旧実装は、このクラスが「muted な注記」の直書き（class="muted"
   style="font-size:13px"）から起こされた名残で、誘導リンクとしての根拠は
   ない。地の文（15px）の中に13pxのリンクが混じると、本文より弱い注記に
   見えて誘導が沈む。表（13px）や .muted（13px）の中では inherit が
   そのまま13pxを継ぐため、従来の見た目は変わらない。 */
.more-link {
  color: var(--c-accent-strong);
  font-size: inherit;
  text-decoration: none;
  position: relative;
  padding-right: 21px;
}
.more-link::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--c-accent-strong) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 18l6-6-6-6'/%3E%3C/svg%3E") center / 10px 10px no-repeat;
  transform: translateY(-50%);
  transition: transform .15s, background-color .15s;
}
.more-link:hover {
  text-decoration: underline;
}
.more-link:hover::after {
  transform: translateY(-50%) translateX(2px);
  background-color: var(--c-accent-deep);
}

/* 戻るリンク `a.back-link`（design.md §5.13 の「戻る」）。.more-link の鏡像:
   同じ16pxの塗り円＋白抜きシェブロンを左右反転し、::before で文言の前に置く。
   テキストの「←」は直書きしない（ページャの「← 前へ」だけは対象外）。
   hover は2px左へ。文字サイズは .more-link と同じく置かれた文脈を継ぐ */
.back-link {
  color: var(--c-accent-strong);
  font-size: inherit;
  text-decoration: none;
  position: relative;
  padding-left: 21px;
}
.back-link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--c-accent-strong) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 18l-6-6 6-6'/%3E%3C/svg%3E") center / 10px 10px no-repeat;
  transform: translateY(-50%);
  transition: transform .15s, background-color .15s;
}
.back-link:hover {
  text-decoration: underline;
}
.back-link:hover::before {
  transform: translateY(-50%) translateX(-2px);
  background-color: var(--c-accent-deep);
}

/* 外部サイトへ出る .more-link の修飾クラス（design.md §5.13/§5.19・Issue #562）。
   緑丸はサイト内の「次へ」専用とし、外部導線では ::after の円を外して
   線画の別窓グリフに差し替える。絵柄は _icons.html の ic_external() と
   一致させる（データURI内は currentColor が使えないため色は直書き。
   hoverの色替えも .more-link 本体と揃えて --c-accent-strong/--c-accent-deep
   のハードコード値を使う）。円のサイズ枠・position:absolute・
   padding-right による折り返し孤立防止はそのまま引き継ぐ。
   縦位置だけは top:50% でなく下端アンカーにする。出典リンクは文言が長く
   折り返すことがあり、中央寄せだと2行ボックスの中間＝行間に記号が浮く。
   下端に付ければ最終行（文末）に揃う。単一行では中央寄せとの差は0.5px */
.more-link--ext::after {
  top: auto;
  bottom: 0;
  transform: none;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F766E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14 21 3'/%3E%3C/svg%3E");
  background-size: 15px 15px;
  background-position: center;
  background-repeat: no-repeat;
}
.more-link--ext:hover::after {
  transform: translateX(2px);
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23115E59' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14 21 3'/%3E%3C/svg%3E");
}

/* 見出し脇の省略形（§5.13 Aパターン）: 見出しをflex化しリンクを右端へ。
   章化ページ（§5.11）ではパネル見出しが h3 に降格するため h3 も受ける */
h2.h-more,
h3.h-more {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
}
h2.h-more .more-link,
h3.h-more .more-link {
  margin-left: auto;
  font-weight: 400;
  flex-shrink: 0;
  /* 見出し脇だけは inherit（h2=17px・h3=15px）を打ち消して本文サイズに
     固定する。見出しと同じ背丈のリンクは見出しの一部に見え、h2 と h3 で
     誘導リンクの大きさが変わってしまう */
  font-size: var(--fs-base);
}
/* 見出し脇の未対応件数バッジ（会社管理トップの「受信トレイ」「確認してください」。
   2026-10-14 ユーザー指示: 赤地に白抜き数字・見出しの文字と縦位置を揃える）。
   h-more の baseline 揃えのままだと小さいピルが文字より下に沈むので、この要素だけ
   中央揃えにし、line-height を固定して高さを 20px（§5.5 の小ピル）に収める。
   一覧のカウンター .feed-cnt とは役割が違う（あちらは中立の件数）ので分ける */
.h-cnt {
  align-self: center;
  background: var(--c-danger);
  color: var(--c-surface);
  font-size: var(--fs-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 18px;
  min-width: 20px;
  text-align: center;
  border-radius: var(--radius-full);
  padding: var(--pill-pad-xs);
}
/* 0件: 同じ形の薄い灰色（管理トップの承認キュー。2026-10-20 ユーザー指摘「0件は薄い灰色」） */
.h-cnt.zero {
  background: var(--c-info-soft);
  color: var(--c-placeholder);
}

/* 関連情報パネル（§2.21 ブロック7・Issue #764）: 取扱会社・他の原料製品への
   自サイト内送客。`.related` は newsletters/detail.html の関連メルマガ一覧が
   既に使っているクラス名なので衝突を避けて `.related-info` にする */
.related-info {
  background: var(--c-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--sp-4);
  margin: 0 0 var(--sp-4);
}
.related-info h3 {
  font-size: var(--fs-base);
  margin: 0 0 var(--sp-2);
}
.related-info ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.related-info li a {
  display: inline-block;
  background: var(--c-bg);
  border-radius: var(--radius-full);
  padding: 3px 12px;
  font-size: var(--fs-sm);
  color: var(--c-accent-strong);
  text-decoration: none;
}
.related-info li a:hover {
  background: var(--c-accent-soft);
  text-decoration: underline;
}

/* 出典注記（§2.21 ブロック8）: ページ最下部の中立な断り書き */
.foot-note {
  font-size: var(--fs-xs);
  color: var(--c-sub-strong);
  margin: var(--sp-5) 0 0;
}

/* ------------------------------------------------------------ */
/* 11. メタ定義リスト・詳細・引用文 */
/* ------------------------------------------------------------ */
dl.meta {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);  /* 長いURL・社名が列幅を押し広げない */
  gap: var(--sp-2) var(--sp-4);
  background: var(--c-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--sp-4);
  margin: 0 0 var(--sp-5);
}

/* 面の直後の注記（出典表記・自動収集の断り書き）。dl.meta は自前で下余白を持つため、
   注記が続くときだけ詰め、その注記が上の面に属することを示す（.panel + .muted と同趣旨）。
   dl.meta 自体が白い面なので .panel で包まない（§5.7・面の入れ子は作らない）。 */
dl.meta:has(+ .muted) {
  margin-bottom: var(--sp-2);
}

/* パネル（.card）の中の dl.meta は面を降ろす（面はパネルが持つ。§5.2「パネルの中の表」と同じ扱い） */
.card > dl.meta {
  background: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
}

dl.meta dt {
  color: var(--c-sub);
  font-size: var(--fs-sm);
}

dl.meta dd {
  margin: 0;
  overflow-wrap: anywhere;
}

/* 詳細ページヘッダーの h1＋お気に入り星の行（製品詳細 §2.21 ブロック1）。
   星ボタンは一覧カードの .feed-fav-btn をそのまま使い、h1 の1行目に揃うよう
   上に4pxだけ下げる（モック準拠）。h1 既定の下余白は行コンテナ側へ移す */
.head-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin: 0 0 var(--sp-4);
}

.head-row h1 {
  flex: 1 1 auto;
  min-width: 12em;
  margin: 0;
}

.head-row .feed-fav-btn {
  margin-top: 4px;
}

/* 会社詳細ヘッダー（design.md §5.24・意匠モック確定・Issue #767）。
   .head-row（h1 と星ボタン1個だけの単純な行）とは違い、右端に複数アクション
   （管理権申請・お気に入り）を並べる必要があるため専用クラスにする。
   h1 側は活動・公開ピル（.feed-pulse）を内包しうるので折り返しを許可する。 */
.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin: 0 0 var(--sp-2);
}

.page-head h1 {
  margin: 0;
}

.head-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  flex-shrink: 0;
  padding-top: 4px;
}

/* 見出し付き独立パネル（製品詳細「機能性表示食品」§2.21 ブロック3）。
   面は dl.meta と同じ白カード＋160px 2カラムのdl。パネル内の誘導リンク
   （届出実績）は行の文字サイズを保ったまま緑丸矢印だけ使う＝ .more-link 既定
   13px（§5.13）を inherit で上書きし、円16px＋余白ぶん右パディングを広げる */
.grp {
  background: var(--c-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--sp-4);
  margin: 0 0 var(--sp-4);
}

.grp dl {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 6px 14px;
  margin: 0;
}

.grp dt {
  color: var(--c-sub);
  font-size: var(--fs-sm);
}

.grp dd {
  margin: 0;
  min-width: 0;
}

.grp dd.long {
  white-space: pre-wrap;
}

.grp a {
  color: var(--c-accent-strong);
  text-decoration: none;
}

.grp a:hover {
  text-decoration: underline;
}

.grp .more-link {
  font-size: inherit;
  padding-right: 23px;
}

/* 機能性表示食品の節: 行の補足（最新年・主な機能・うち自社分・目安の式）と集計元の注記 */
.grp .ffc-sub {
  display: block;
  margin-top: 2px;
  color: var(--c-sub);
  font-size: var(--fs-sm);
}

/* 機能性表示食品の節の冒頭: 数字の前に集計範囲（他社を含む市場全体）を注意の帯（.msg-warn）で示す。
   パネルの先頭の子なので上マージンを足さない（design.md §5.1） */
.grp-lead {
  margin: 0 0 var(--sp-3);
}

.grp-note {
  margin: var(--sp-3) 0 0;
  color: var(--c-sub);
  font-size: var(--fs-xs);
}

details pre {
  background: var(--c-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 14px;
  overflow-x: auto;
  font-size: var(--fs-xs);
}

.claim {
  white-space: pre-wrap;
  background: var(--c-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 14px;
}
/* 単独の .claim は自分が面なので、自分の先頭行を削る（design.md §5.1） */
.claim:not(.panel .claim, .claim-card .claim) {
  text-box: trim-start cap alphabetic;
  padding-top: calc(14px + var(--panel-trim-inset));
}

/* 分類チップを内包する許可表示カード（design.md §5.5・トクホ品目詳細）。
 * 面は外側の .claim-card が持ち、内側の .claim は面の装飾を降ろして本文だけを担う。
 * .claim の white-space: pre-wrap を外側へ広げないのが要点 — 外側に付けると
 * テンプレートの改行と字下げがそのまま余白として描画される。 */
.claim-card {
  background: var(--c-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

/* 罫から下が公示の原文、という切れ目を面の中で示す */
.claim-card .claim-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding: var(--sp-3) 14px;
  border-bottom: 1px solid var(--c-line);
}

.claim-card .claim {
  background: none;
  border-radius: 0;
  box-shadow: none;
}

/* ------------------------------------------------------------ */
/* 会社宛ての問い合わせバー .inquiry-bar（design.md §5.25・会社詳細・/oem・
 * 業界紙掲載・製品詳細）。画面下の全幅バーで、一括問い合わせの選択バー #bulk-bar と
 * 同じ文法（白い面・上罫・左に宛先の文・右に塗りボタン）。旧の右下ピルは運営宛ての
 * 「お問い合わせ」と取り違えられるため置き換えた（2026-10-17）。
 * 表の横スクロール領域を覆う量を抑えるため1行・高さ64px以内に収める。 */
.inquiry-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-float);
  background: var(--c-surface);
  border-top: 1px solid var(--c-line);
  box-shadow: 0 -2px 10px rgba(15, 23, 42, .08);
  padding-bottom: env(safe-area-inset-bottom);
}

.inquiry-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-top: var(--sp-2);
  padding-bottom: var(--sp-2);
}

.inquiry-bar-msg {
  margin: 0;
  min-width: 0;
  font-size: var(--fs-base);
  line-height: 1.4;
}

.inquiry-bar-go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  min-height: 44px; /* タップターゲット下限（design.md §7） */
  white-space: nowrap;
}

.inquiry-bar-go svg {
  flex: 0 0 auto;
}

/* 資料ボタン（枠線。塗りは右の問い合わせボタンだけ）と、バーから上向きに開く資料パネル
 * （カードと同じ card.js の .ph-wrap。計画 #2345） */
.inquiry-bar-acts {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex: 0 0 auto;
}

.inquiry-bar .inquiry-bar-docs,
.inquiry-bar .inquiry-bar-phone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 var(--sp-4);
  border: 1px solid var(--c-accent-strong);
  border-radius: var(--radius-md);
  background: var(--c-surface);
  color: var(--c-accent-deep);
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.inquiry-bar-docs .cnt {
  font-variant-numeric: tabular-nums;
}

/* 電話ボタン: 伏せ字の番号は地の色、「電話番号を表示」は区切り線の右（カードの帯のピルと同じ並び） */
.inquiry-bar-phone .ph-mask {
  color: var(--c-ink);
  font-weight: 400;
}

.cta-pill .ph-short {
  display: none;
}

.inquiry-bar .ph-pop {
  top: auto;
  bottom: calc(100% + 10px);
  left: auto;
  right: 0;
  width: 360px;
  max-height: min(70vh, 520px);
  overflow-y: auto;
}

.inquiry-bar .doc-list {
  max-height: none;
}

/* 最下部でフッターのリンクが恒久的に塞がれないための逃げ。バーのあるページだけに効かせる */
body:has(.inquiry-bar) {
  padding-bottom: 72px;
}

@media (max-width: 640px) {
  .inquiry-bar-inner {
    gap: var(--sp-3);
  }

  /* 狭い幅は宛先の文を1行に縮め、下の行にボタンを並べてバーを2行以内に収める */
  .inquiry-bar-inner {
    flex-wrap: wrap;
    row-gap: 6px;
  }

  .inquiry-bar-msg {
    flex: 1 0 100%;
    font-size: var(--fs-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .inquiry-bar-acts {
    flex: 1 0 100%;
  }

  .inquiry-bar-acts > * {
    flex: 1 1 0;
    justify-content: center;
  }

  .inquiry-bar-acts > .ph-wrap > .inquiry-bar-docs,
  .inquiry-bar-acts > .ph-wrap > .inquiry-bar-phone {
    width: 100%;
    justify-content: center;
  }

  /* スマホ幅の電話ボタンは「電話」だけ（3つ並ぶため。伏せ字と長い語は外す） */
  .inquiry-bar-phone .ph-mask,
  .inquiry-bar-phone .ph-go {
    display: none;
  }

  .inquiry-bar-phone .ph-short {
    display: inline;
  }

  body:has(.inquiry-bar) {
    padding-bottom: 120px;
  }

  /* パネルは全幅のシート（バーの上端から上へ） */
  .inquiry-bar .ph-wrap {
    position: static;
  }

  .inquiry-bar .ph-pop {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    width: auto;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
  }
}

@media print {
  .inquiry-bar,
  .l2-tabs,
  .side,
  #bulk-bar,
  .bulk-toast {
    display: none;
  }

  .site-head {
    position: static;
    box-shadow: none;
  }
}

/* 製品詳細の要約文（パネル上部の見出し位置）。 */
.product-lead {
  margin: var(--sp-3) 0 0;
}
.panel-h > .product-lead:first-child {
  margin-top: 0;
}

/* 長文の読み物パネル（製品詳細「詳細情報」など。design.md §5.7 の面文法＋
   本文の読み幅制限。値は改行段落のプレーンテキスト前提 = pre-line。製品の説明文は .summary-text） */
.prose {
  background: var(--c-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--sp-5);
  margin: 0 0 var(--sp-5);
}

.prose-body {
  white-space: pre-line;
  max-width: var(--measure);
  margin: 0;
}

/* 詳細情報の段落（product_entity.summary_blocks）。空行＝段落の間に1行分、行頭「・」は
   ぶら下げの箇条書き（折り返しが「・」の後ろに揃う）。 */
.summary-text { white-space: normal; }
.summary-text > * { margin: 0; }
.summary-text > * + * { margin-top: 1em; }
.summary-text > .is-tight { margin-top: 0; }
.summary-text ul { padding-left: 1em; list-style: "・"; }

.prose-provenance {
  margin: var(--sp-3) 0 0;
  padding-top: var(--sp-2);
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-xs);
  color: var(--c-sub);
}

/* パネル内の定型文は面を重ねず罫線区切りの行にする（配合量チェックの表示文一式）。
   1文言=1面のままパネルに入れると面が二重になるため、パネル内では枠を消して
   行として並べ、文言の区切りは罫線で示す */
.panel .claim {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  padding: 10px 0;
}

.panel .claim + .claim {
  border-top: 1px solid var(--c-line);
}

/* ------------------------------------------------------------ */
/* 12. フッター（全ページ共通実装。仕様書_フッター §3・§4） */
/* ------------------------------------------------------------ */
.site-footer {
  border-top: 1px solid var(--c-line);
  /* 横パディングは内側の .container が持つ（二重にすると狭い画面で左端がヘッダーとずれる） */
  padding: var(--sp-5) 0;
  color: var(--c-sub);
  font-size: var(--fs-sm);
}

/* 左端のブランド列（ロゴ＋説明文）。Zennがフッター左にロゴとタグラインを
 * 置くのと同型。リンク列より広く取る（§3.1） */
.footer-brand-col {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  align-items: flex-start;
}

/* .footer-col a の padding-block を上書きするため同じ詳細度で書く */
.footer-col .footer-logo-link {
  display: inline-block;
  line-height: 0; /* img下の余白を殺す */
  padding-block: 0;
}

.footer-logo-link:focus-visible {
  outline: 2px solid var(--c-accent-strong);
  outline-offset: 2px;
  border-radius: 3px;
}

.footer-logo {
  height: 24px;
  width: auto;
}

.footer-tagline {
  margin: 0;
}

.footer-cols {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
}

@media (min-width: 641px) {
  .footer-cols {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 961px) {
  /* ブランド列だけ広め。残り3列は等幅 */
  .footer-cols {
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: var(--sp-5);
  }
}

.footer-col-title {
  font-size: var(--fs-sm);
  color: var(--c-ink);
  font-weight: 600;
  margin: 0 0 var(--sp-2);
}

.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-col li + li {
  margin-top: var(--sp-2);
}

.footer-col a {
  color: var(--c-sub);
  text-decoration: none;
  display: inline-block;
  padding-block: 2px;
}

.footer-col a:hover,
.footer-col a:focus-visible {
  color: var(--c-accent-strong);
  text-decoration: underline;
}

.footer-col a:focus-visible {
  outline: 2px solid var(--c-accent-strong);
  outline-offset: 2px;
  border-radius: 3px;
}

/* 外部リンク記号（design.md §5.19）。中身は _icons.html の ic_external()＝
   15pxの線画で、この span は行内での置き方だけを担う。inline-flex に
   しないと svg の下に行末の余白が入り、記号だけがベースラインから浮く。
   フッター以外の外部導線でも使えるようフッター配下に限定しない */
.ext,
.ic-after {
  display: inline-flex;
  vertical-align: -3px;
  margin-left: 5px;
}

.footer-bottom {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-line);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.footer-note,
.footer-copy {
  margin: 0;
}

.footer-copy {
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------ */
/* 13. ユーティリティ（将来用。適用はPhase 3） */
/* ------------------------------------------------------------ */
.table-scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;  /* 表の端に来てもページが横に動かない */
  /* 下の .table-scroll table で table の地を透過にするので、表の白い面はこの
     ラッパーが持つ（PR #1711 で affordance だけ足したとき、この2行が無かった
     ために表の中身が地色に沈み、左右20pxだけ白い帯として残った。2026-09-24）。
     角丸は table 側（border-radius: var(--radius-md)）と揃える。 */
  background-color: var(--c-surface);
  border-radius: var(--radius-md);
  /* 横スクロールの合図は常時表示のスクロールバー（下の ::-webkit-scrollbar）。
     端の陰影グラデーションはフラットの方針から外れ、合図としても分かりにくいので
     使わない（2026-10-04 モックで確定・design.md §5.2） */
}

/* 表の中の活動ピル（/companies 等）。.table-scroll は overflow-x:auto で
   縦方向も切り抜くため、下向きに開くポップオーバーが下端の行で枠に隠れる。
   見出し行＋4行以上が上にある行のうち、下から3行だけ上向きに開く
   （上が足りない短い表は下向きのまま）。 */
.table-scroll tr:nth-child(n+6):nth-last-child(-n+3) .feed-pulse-pop {
  top: auto;
  bottom: calc(100% + 6px);
}

/* 会社ディレクトリの表（/companies）の電話番号列。右端の列なので開示パネルは右揃えで開き
   （左揃えだと表の幅を超えて横スクロールが伸びる）、下端の行は活動ピルと同じく上向きに開く */
.co-dir .ph-pop {
  left: auto;
  right: 0;
}

/* 問い合わせ列のピルはリンク（a.cta-pill）。本文リンクの下線を付けない */
.co-dir a.cta-pill {
  text-decoration: none;
}

/* 当サイトから送れる「問い合わせ」は緑の塗り（公式サイトは枠線のまま） */
.co-dir a.cta-pill.cta-inq,
.co-dir a.cta-pill.cta-inq svg {
  color: #fff;
}

.co-dir a.cta-pill.cta-inq {
  background: var(--c-accent-strong);
  border-color: transparent;
}

.co-dir a.cta-pill.cta-inq:hover {
  background: var(--c-accent-deep);
}

.co-dir tr:nth-child(n+6):nth-last-child(-n+3) .ph-pop {
  top: auto;
  bottom: calc(100% + 6px);
}

/* 検索パネルの「列を追加」（/companies）。チェック条件と同じ全幅1行に、項目名と選択肢を並べる */
form.search .co-cols {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
}

form.search .co-cols-label {
  font-size: var(--fs-sm);
  color: var(--c-sub);
}

/* スクロールバーを常時表示する。macOS 等のオーバーレイ型スクロールバーは
   操作するまで隠れ、続きの列・行があることに気づけないため。Chromium・Safari は
   ::-webkit-scrollbar を指定すると自前描画になり常時表示される。標準の
   scrollbar-width/-color を同時に指定すると Chromium 121+・Safari 18.2+ が
   ::-webkit-scrollbar を無視するので、標準プロパティは非対応（Firefox）に限る */
.table-scroll::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.table-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.table-scroll::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--c-sub) 55%, transparent);
  border-radius: var(--radius-full);
}

.table-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--c-sub);
}

@supports not selector(::-webkit-scrollbar) {
  .table-scroll {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--c-sub) 55%, transparent) transparent;
  }
}

/* 表の白い面はラッパー .table-scroll が持つので、配下の table の地は透過にする
   （2026-10-04 まで端の陰影を透かすために必要だった名残。害は無いので残す）。
   th は独自の不透明地のまま（.compare-matrix・.front-status の sticky 列が地の
   不透明さに依存するため個別に触らない） */
.table-scroll table {
  background: transparent;
}

/* パネル（白い面）の中の表は面を重ねない（design.md §5.2「パネルの中の表」・2026-10-25）。
   地・角丸・影はパネルが持ち、表は罫線だけで組む。左右の端のセルは内側余白を外して
   パネル本文の端（見出し・本文の行頭）に揃える（管理画面は対象外）。対象のパネルは上の共通規則と同じ一覧 */
:is(.card, .panel, .feed-card, .related-info, .prose, .grp, .co-box, .claim) :is(table, .table-scroll) {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}
:is(.card, .panel, .feed-card, .related-info, .prose, .grp, .co-box, .claim) table {
  overflow: visible;
}
body:not(.admin-page) :is(.card, .panel, .feed-card, .related-info, .prose, .grp, .co-box, .claim) :is(th, td):first-child {
  padding-left: 0;
}
body:not(.admin-page) :is(.card, .panel, .feed-card, .related-info, .prose, .grp, .co-box, .claim) :is(th, td):last-child {
  padding-right: 0;
}

/* 参入余地マトリクス（/whitespace）の列見出し。縦書きは th ではなく内側の span に
   かけ、高さは固定しない。th に縦書き＋高さ110px 固定だと、11字の成分カテゴリ名
   （「配糖体・その他植物成分」等）がセルの外へはみ出した（2026-10-08） */
.ws-matrix th.ws-col {
  vertical-align: bottom;
  text-align: center;
  padding: 8px 4px;
}

.ws-matrix th.ws-col span {
  display: inline-block;
  writing-mode: vertical-rl;
  white-space: nowrap;
}

/* 展示会の出展ブースガイド。列が多いので折り返さず横スクロールさせる */
.booth-guide {
  min-width: 1100px;
}

.booth-guide-pr {
  min-width: 16rem;
  font-size: var(--fs-sm);
}

/* 表を持たないセクション内容（栄養機能表示の要約・表記ゆれチップ等）を、
 * 表・dl.meta・.claim と同じ「白い面＋淡い影」のパネルとして地から浮かせる。 */
.panel {
  background: var(--c-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--sp-4);
}

.panel > :first-child {
  margin-top: 0;
}

.panel > :last-child {
  margin-bottom: 0;
}

/* 統計チャートのパネル（design.md §5.16）。グラフを地に直置きすると目盛線（--c-line）が地と
   1.09:1 で消え、軸ラベル（--c-sub）が 4.23:1 で AA に届かないため白い面に載せる。チャートは
   --chart-w 以上に伸びないので、面も同じ幅で止めて右側に白い空白を作らない。 */
.panel--chart {
  max-width: calc(var(--chart-w) + 2 * var(--sp-4));
}

/* パネル直後の注記（出典表記・自動収集の断り書き）。面の外に置く役割分担は
   §5.12 のとおりだが、.panel は margin を持たないため、注記に負の margin-top を
   与えると面に重なる。ここで正の間隔を与え、テンプレ側の負マージン指定を不要にする。 */
.panel + .muted {
  margin-top: var(--sp-2);
}

/* 表もパネルも margin を持たないため、表とパネルが隣り合うと面同士が
   密着し、パネルが表の続き（はみ出した行）に見える。面の境界を出すため
   間隔を空ける（表の直後のパネル・パネルの直後の表の両方。機能性のサマリーパネル） */
table + .panel,
.table-scroll + .panel,
.panel + table,
.panel + .table-scroll {
  margin-top: var(--sp-4);
}

/* サマリーパネルの直後に目次を置くと面同士が密着する（統計・ランキング）。同じ間隔を空ける */
.panel + nav.page-toc {
  margin-top: var(--sp-4);
}

/* 視覚的に隠すが支援技術・SEOには読ませる（§7） */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------ */
/* ブレークポイント（design.md §3。960px / 640px の2つのみ）
 * Phase 1時点では .cards / table 等が auto-fit グリッドのため
 * 960px側で追加指定するルールがない。640px側のみ定義する。 */
/* ------------------------------------------------------------ */
@media (max-width: 960px) {
  /* L3サイドバーはCSSのみで横スクロールのピル列に変形（§4.3）。
   * ハンバーガー化・非表示化は禁止（§9）。 */
  .layout.has-side {
    display: block;
  }

  .side {
    position: static;
    margin-bottom: var(--sp-4);
  }

  /* align-items は既定の stretch にしない。背の高い子が1つでもあると、ピル全部が
   * その高さまで引き伸ばされて縦長の楕円になる（--radius-full のため。2026-09
   * 実測。会員エリアの会社名ブロック .side-company は Issue #1627 で <nav> の
   * 外に出たので、この懸念の対象からは外れた）。 */
  .side nav {
    flex-direction: row;
    align-items: center;
    overflow-x: auto;
    scrollbar-width: none;
    gap: var(--sp-2);
    /* 横スクロールのaffordance。.l2-tabs と同じCSS-onlyのscroll shadowパターン
       （地色はページ地の --c-bg。.side に地色指定が無いため） */
    background-image:
      linear-gradient(to right, var(--c-bg), var(--c-bg)),
      linear-gradient(to left, var(--c-bg), var(--c-bg)),
      linear-gradient(to right, color-mix(in srgb, var(--c-ink) 14%, transparent), transparent),
      linear-gradient(to left, color-mix(in srgb, var(--c-ink) 14%, transparent), transparent);
    background-repeat: no-repeat;
    background-size: 16px 100%, 16px 100%, 16px 100%, 16px 100%;
    background-position: left center, right center, left center, right center;
    background-attachment: local, local, scroll, scroll;
  }

  .side nav::-webkit-scrollbar {
    display: none;
  }

  /* ピルにするのはナビ項目そのもの（navの直下のa）だけ。会社名ブロック内の
   * 補足リンク（公開ページを見る・会社スイッチャー）まで枠と地色が付くと、
   * 小さな補足のはずが独立したピルに見える。 */
  .side nav > a {
    flex: 0 0 auto;
    white-space: nowrap;
    border: 1px solid var(--c-line);
    border-radius: var(--radius-full);
    padding: 6px 14px;
    font-size: var(--fs-sm);
    background: var(--c-surface);
  }

  .side nav > a.active {
    border-color: transparent;
  }
}

/* 会員エリア（/mypage・/dashboard 配下。目印は base.html の side_account）のL3は、
 * 狭い画面でも左サイドメニューのまま残す。上のピル列化は公開セクションのL3の規約
 * （design.md §4.3）で、会員エリアはその対象外（account配下は design.md の対象外・
 * 部品だけ流用する、という本ファイル §会員エリア 冒頭の前提）。
 * 会社管理ページのナビは先頭に会社名ブロック（.side-company）を持つため、ピル列に
 * 混ぜると崩れるうえ、「トップ・リード…」は画面の切替であって上部タブに置く種類の
 * 項目ではない（2026-09 ユーザー指摘）。
 * 電話（640px以下）だけは左に固定列を置くと本文が読めなくなるので、下の 640px 側で
 * ピル列に落とす。 */
@media (min-width: 641px) and (max-width: 960px) {
  .layout.has-side.side-account {
    display: grid;
    grid-template-columns: 176px minmax(0, 1fr);
    gap: var(--sp-4);
    align-items: start;
  }

  .side-account .side {
    position: sticky;
    top: var(--sticky-top);
    margin-bottom: 0;
  }

  .side-account .side nav {
    flex-direction: column;
    align-items: stretch;
    overflow-x: visible;
    gap: 2px;
    background-image: none;
  }

  .side-account .side nav > a {
    flex: initial;
    white-space: normal;
    border: none;
    border-radius: var(--radius-md);
    padding: 8px 12px;
    font-size: 14px;
    background: none;
  }

  .side-account .side nav > a:hover {
    background: var(--c-surface-soft);
  }

  .side-account .side nav > a.active {
    background: var(--c-accent-soft);
  }

  .side-account .side .side-sep {
    display: block;
  }
}

/* 会社管理ナビの業態グループ（会社情報／原料サプライヤー／OEM。2026-10-16 ユーザー指示・
 * モック案A）。小見出し .side-gh はリンクではない見出しで、字の大きさはリンクと同じ 14px。
 * 子項目 .side-sub は 13px・字下げ・左の縦線で入れ子を見せる（641px 以上）。
 * 641〜960px の .side-account .side nav > a（上）より後ろ・同じ詳細度以上で上書きする。 */
.side .side-gh {
  margin: var(--sp-1) 0 0;
  padding: 8px 12px 2px;
  font-size: 14px;
  color: var(--c-ink);
}

.side .side-pre {
  display: none;
}

@media (min-width: 641px) {
  .side-account .side nav > a.side-sub {
    margin-left: 18px;
    padding: 3px 10px;
    font-size: var(--fs-sm);
    line-height: 1.5;
    border-left: 1px solid var(--c-line);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
  }

  .side-account .side nav > a.side-sub.active {
    border-left-color: var(--c-accent-strong);
  }

  /* 子項目どうしは nav の gap 2px を打ち消して詰め、縦線を途切れさせない */
  .side-account .side nav > a.side-sub + a.side-sub {
    margin-top: -2px;
  }
}

/* 電話（ピル列）では小見出しを消し、子項目の頭に業態名を付けて「事業内容」の重複を区別する */
@media (max-width: 640px) {
  .side .side-gh {
    display: none;
  }

  .side .side-pre {
    display: inline;
  }
}

/* .top-company はタイトル直下への複製先。PC・タブレット（641px以上）は非表示にして
 * サイドバーの会社名ブロックだけを見せる（現状維持）。電話幅では下の
 * @media (max-width: 640px) が同じ詳細度で display:block に上書きするので、
 * このデフォルト規則は必ずメディアクエリより前に置く（後に置くと詳細度が同じため
 * 常にこちらが勝ち、電話幅でも非表示のままになる）。 */
.top-company {
  display: none;
}

/* 電話（640px以下）の会員エリア: .side nav はピル列の横スクロールに戻す
 * （公開セクションと同じ挙動。案L・Issue #1627）。.side-company は <nav> の
 * 外に出たのでピル列に混ざらない。
 * 電話幅では会社名ブロックを会社管理トップ（dashboard_home.html）の h1 直下の
 * .top-company にだけ複製して見せ、サイドバー側は全画面で隠す（トップ以外の画面には
 * 会社名・プラン・アップグレード・公開ページを出さない。2026-10-14 ユーザー指示）。
 * PC・タブレットは .top-company 自体を非表示にして現状維持。 */
@media (max-width: 640px) {
  .top-company .side-company {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    padding: 0 0 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--c-line);
  }

  /* 会社管理トップの複製ブロックは行間を一律 gap でなく、PC版（.side-company の
   * 各要素の padding）と同じ上下スペースになるよう margin-top を個別に持たせる
   * （2026-09-25 ユーザー指示。PC: 会社名→プラン 9px・プラン→ボタン 8px・
   * ボタン→公開ページ 14px）。 */
  .top-company .side-company {
    gap: 0 8px;
  }

  .top-company .side-company .sc-sw,
  .top-company .side-company .sc-still {
    flex: 0 1 auto;
    min-width: 0;
    order: 0;
    margin-left: -8px;
    padding: 6px 8px;
  }

  /* 公開ページリンクは独立行でセンター寄せにし、会社名→プラン→アップグレード
   * ボタン→公開ページの順に並べる（2026-09-25 ユーザー指示）。 */
  .top-company .side-company .side-public {
    order: 3;
    flex: 0 0 100%;
    margin-left: 0;
    margin-top: 14px;
    padding: 0;
    text-align: center;
  }

  .top-company .side-company .sc-plan {
    order: 1;
    flex: 0 0 100%;
    padding: 0;
    margin-top: -2px;
  }

  .top-company .side-company .sc-act {
    order: 2;
    flex: 0 0 100%;
    padding: 0;
    margin-top: 8px;
  }

  .top-company .side-company .sc-act button {
    width: auto;
  }

  /* h1 の下余白（16px）はサイト共通の h1 margin-bottom でそのまま足りる（box間の
   * margin collapse で 16px）。.side-company の先頭要素自身の上パディングが乗ると
   * 見た目の間隔が 16px を超えるので、.top-company 内の先頭要素（会員1社なら
   * .sc-still・複数社なら .sc-sw > summary）の上パディングだけ 0 にする
   * （2026-09-25 ユーザー指示。box top と中身の位置を一致させ、margin側の帳尻合わせを
   * しない）。 */
  .top-company {
    display: block;
    margin: 0 0 16px;
  }

  /* ただし h1 の行ボックス下端（line-height 1.7 の半行送り約7px）から測ると、見た目の
   * 間隔は「会社管理」の文字下端→会社アイコン上端で22pxになる。見た目を16pxにするため、
   * .top-company が続く h1 だけ margin-bottom を 10px に詰める（2026-09-25 ユーザー指示。
   * 会社管理トップで実測: 文字下端207px→アイコン上端223px）。 */
  :is(.acct, .acct-wide) h1:has(+ .top-company) {
    margin-bottom: 10px;
  }

  .top-company .side-company .sc-still,
  .top-company .side-company .sc-sw {
    padding-top: 0;
  }

  .top-company .side-company .sc-sw > summary {
    padding-top: 0;
  }

  /* サイドバー側の会社名ブロックは電話幅では全画面で隠す（トップは .top-company 側で見せる）。 */
  .side-account .side .side-company {
    display: none;
  }
}

@media (max-width: 640px) {
  form.search {
    grid-template-columns: 1fr;
  }

  /* 1列になった検索パネルでは送信ボタンを行いっぱいに（親指で押す位置を選ばない） */
  form.search .actions button {
    flex: 1;
  }

  dl.meta,
  .grp dl {
    grid-template-columns: 1fr;
  }

  /* 1列の dl.meta は dt が見出しになるので、項目の切れ目を行間より広くとる */
  dl.meta dd + dt {
    margin-top: var(--sp-2);
  }

  /* L1の狭幅圧縮（§4.1）。ロゴ203px＋認証210pxは450px前後で入りきらなくなるため、
   * ロゴを一段小さくし、認証側は字送り・左右パディング・ラベルを詰める。
   * ハンバーガー化・項目の非表示はしない（§9。落とすのは「（無料）」の1語のみ）。
   * 上下パディングは据え置き＝タップ標的の高さ（§7）を desktop と同じに保つ。 */
  .l1 {
    gap: var(--sp-3);
  }

  .brand-logo {
    height: 22px;
  }

  .l1-auth {
    gap: 10px;
  }

  .l1-auth a.btn-signup {
    padding: 7px 12px;
  }

  .signup-free {
    display: none;
  }

}

/* L1 の検索欄は ≤768px で虫眼鏡のリンクに替える（§4.1・Zenn と同じ境界）。描画は20pxのまま、
 * タップ標的は padding で広げて負の margin で相殺する（行の幅を増やさない） */
@media (max-width: 768px) {
  .l1-search {
    display: none;
  }

  .l1-auth a.l1-for-co {
    display: none;
  }

  /* 検索欄は消えても DOM に残り、隣接セレクタで外した認証側の auto が効かないまま
   * ＝ロゴの隣に左寄せになる。消える幅では戻してロゴ以外を右寄せに保つ */
  .l1-search + .l1-auth {
    margin-left: auto;
  }

  .l1-auth a.l1-search-icon {
    display: flex;
    align-items: center;
    padding: 8px;
    margin: -8px;
    color: var(--c-ink);
  }
}

/* フィードカードの狭幅短縮（design.md §5.17）。境界は共通の 640px
 * （design.md §3）。JS不使用・2スパン切替のみ */
@media (max-width: 640px) {
  .lbl-l {
    display: none;
  }

  .lbl-s {
    display: inline;
  }

  /* 文字は見せないがボタンの名前としては読み上げる（display:none だと名前の無いボタンになる。計画 #1974 PR-E） */
  .lbl-fav {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* ------------------------------------------------------------ */
/* 一括問合せ（機構③・仕様書_問い合わせ発生機構 §5.1・Issue #610）
 *   (a) .feed-add-btn: 各行の追加ボタン（.feed-fav-btn と同じ枠線ピルの文法）
 *   (b) .feed-card.bulk-on: 追加済みカードの状態表現（枠線＋アクションバー地色）
 *   (c) #bulk-bar: 画面下部の固定バー（_bulk_bar.html）
 *   (d) .bulk-toast: 上限到達時の一時メッセージ
 * すべて bulk.js が localStorage（bulk_inquiry_v1）を見て付け外しする。
 * ------------------------------------------------------------ */

.feed-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-full);
  padding: 4px 10px;
  font-size: var(--fs-xs);
  color: var(--c-sub);
  cursor: pointer;
  white-space: nowrap;
}

.feed-add-btn:hover {
  background: none;
  border-color: var(--c-accent);
  color: var(--c-accent-strong);
}

.feed-add-btn.on {
  color: var(--c-accent-strong);
  border-color: var(--c-accent-strong);
  background: var(--c-accent-soft);
  font-weight: 600;
}

/* 上限5社に達していて、かつこのボタンの会社がまだ選択に含まれていないとき
 * （＝押しても足せない）は薄く見せて事前に伝える（押してから断らない・§5.1）。
 * disabled にはしない — 押したときのトースト表示は成立させたいため。 */
.feed-add-btn.near-limit {
  opacity: .5;
}

/* 追加済みカードの状態表現（§5.1「カード枠線 --c-accent ＋ アクションバー地色
 * --c-accent-soft ＋ ボタン『✓ 追加済み』」）。:hover の border-color 上書き
 * （--c-sub）にも勝つよう、hover込みで明示する。 */
.feed-card.bulk-on,
.feed-card.bulk-on:hover {
  border-color: var(--c-accent);
}

.feed-card.bulk-on .feed-cta-bar {
  background: var(--c-accent-soft);
}

/* バー表示中はフッターに重ならないよう本文側に余白を確保する（bulk.js が
 * renderBar() で body.has-bulk-bar を付け外しする）。行数（パネル注記の有無・
 * 狭幅の折返し）で高さが変わるため実測ではなく余裕を持った定数で確保する。 */
body.has-bulk-bar {
  padding-bottom: 100px;
}

@media (max-width: 640px) {
  body.has-bulk-bar {
    padding-bottom: 140px;
  }
}

/* 固定バー（画面下部・全ページ共通の骨組みは _bulk_bar.html。中身は bulk.js が
 * 描画。items が0件の間は hidden のまま） */
#bulk-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-bar);
  background: var(--c-surface);
  border-top: 1px solid var(--c-line);
  box-shadow: 0 -2px 10px rgba(15, 23, 42, .08);
  padding-bottom: env(safe-area-inset-bottom);
}

.bulk-bar-inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding-top: var(--sp-3);
  padding-bottom: var(--sp-3);
}

/* 条件A・B（§5.1）: パネル面（scope=panel）だけの範囲明示＋全量への導線 */
.bulk-bar-note {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--c-sub);
}

.bulk-bar-note a {
  color: var(--c-accent-strong);
}

/* 上限到達（M=5）時は「もっと候補を見る」を強調する（§5.1条件B） */
.bulk-bar-note.emphasis {
  font-weight: 700;
  color: var(--c-accent-strong);
}

.bulk-bar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.bulk-bar-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.bulk-bar-count {
  margin: 0;
  font-size: var(--fs-base);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.bulk-bar-limit {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--c-sub);
  font-variant-numeric: tabular-nums;
}

.bulk-bar-limit.at-cap {
  color: var(--c-accent-strong);
  font-weight: 600;
}

.bulk-bar-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex: 0 0 auto;
}

.bulk-bar-clear {
  background: none;
  border: none;
  padding: 0;
  color: var(--c-sub);
  font-size: var(--fs-sm);
  text-decoration: underline;
  cursor: pointer;
  white-space: nowrap;
}

.bulk-bar-clear:hover {
  background: none;
  color: var(--c-accent-strong);
}

.bulk-bar-go {
  white-space: nowrap;
}

@media (max-width: 640px) {
  .bulk-bar-row {
    align-items: stretch;
  }

  .bulk-bar-actions {
    justify-content: space-between;
    gap: var(--sp-3);
  }

  .bulk-bar-go {
    flex: 1 1 auto;
    text-align: center;
  }
}

/* 上限到達時の一時メッセージ（押してから断る唯一の場面＝新規会社の追加が
 * 上限超過のとき。#bulk-bar の常設テキストとは別に、押した瞬間のフィードバックを
 * 出すためのトースト。bulk.js が動的に生成する）。 */
.bulk-toast {
  position: fixed;
  left: 50%;
  bottom: 96px;
  transform: translateX(-50%);
  z-index: var(--z-toast);
  background: var(--c-ink);
  color: #fff;
  padding: 8px 16px;
  border-radius: var(--radius-full);
  font-size: var(--fs-sm);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  white-space: nowrap;
}

.bulk-toast.show {
  opacity: 1;
}

/* (e) 完了ページ「宛先別の状況」表（inquiry_group_status.html）。狭い幅で折り返すと
 * 会社名が1字単位で縦に割れるので、最小幅を持たせて .table-scroll の横スクロールに渡す */
.inquiry-status-table {
  min-width: 560px;
}
.inquiry-status-table td:first-child {
  min-width: 12em;
}

/* ------------------------------------------------------------ */
/* account会員エリア（/mypage 配下。docs/design.md の対象外だが、L3サイドバー
 * （.side）・カード（.card）・.more-link などのトークン・部品はそのまま流用する。
 * 仕様書_通知UX再設計 §7 準拠のUIUX再構築（マイページ4ページ構成）。 */
/* ------------------------------------------------------------ */

/* サイドバー内の区切り線（「会社管理ページへ」の前）。960px以下は
 * .side がピル列の横スクロールに変形するため、区切り線は不要（違和感になる）。 */
.side .side-sep {
  border: none;
  border-top: 1px solid var(--c-line);
  margin: var(--sp-2) 0;
}

@media (max-width: 960px) {
  .side .side-sep {
    display: none;
  }
}

/* マイページ概要ホームの軽量サマリーカード（お気に入り・お知らせ・
 * お気に入りキーワード）。既存 .card 意匠を横並びグリッドにするだけで、
 * SaaS的な巨大KPIタイルという新規コンポーネントは作らない。 */
.acct-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
  margin: var(--sp-4) 0;
}

.acct-summary-card {
  display: block;
  text-decoration: none;
  color: var(--c-ink);
  transition: box-shadow .15s ease, transform .15s ease;
}

.acct-summary-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

@media (max-width: 960px) {
  .acct-summary {
    grid-template-columns: 1fr;
  }
}

/* 登録社ダッシュボードの会社別ホーム用KPIカード（4枚）。.acct-summary の
 * 3列グリッドを4列に上書きするだけの修飾クラス（マイページUIUX再構築の
 * ダッシュボード左サイドバー化）。 */
.acct-summary.cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 960px) {
  .acct-summary.cols-4 {
    grid-template-columns: 1fr;
  }
}

/* dashboard_head（登録社ダッシュボードのL3サイドバーヘッダー。案L・Issue #1627）。
 * <nav> の外・<aside class="side"> 直下に置く独立ブロック。会社名（＋複数
 * membership時のスイッチャー）・プラン行・アップグレードボタン・公開ページ
 * リンクを縦4段に並べ、下端を1本の罫線で閉じる。 */
.side-company {
  display: flex;
  flex-direction: column;
  padding: 0 0 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--c-line);
}

.sc-tile {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-md);
  background: var(--c-accent-soft);
  color: var(--c-accent-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sc-txt {
  flex: 1;
  min-width: 0;
}

.sc-txt strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sc-still {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: var(--radius-md);
}

/* 複数membership時のスイッチャー。details/summary（.user-menu と同じ意匠）。 */
.sc-sw {
  position: relative;
}

.sc-sw > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: var(--radius-md);
  list-style: none;
  cursor: pointer;
}

.sc-sw > summary::-webkit-details-marker {
  display: none;
}

.sc-sw > summary:hover {
  background: var(--c-surface-soft);
}

.sc-sw > summary:focus-visible {
  outline: 2px solid var(--c-accent-strong);
  outline-offset: -2px;
}

.sc-caret {
  flex: none;
  color: var(--c-sub);
}

.sc-panel {
  position: absolute;
  left: 4px;
  right: 4px;
  top: calc(100% + 4px);
  z-index: var(--z-pop);
  background: var(--c-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-hover);
  padding: var(--sp-2) 0;
}

.sc-panel a {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 6px 10px;
  border-radius: 0;
  font-size: 13px;
  font-weight: 400;
  color: var(--c-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sc-panel a:hover {
  background: var(--c-surface-soft);
}

.sc-panel .sc-tile {
  width: 22px;
  height: 22px;
  background: var(--c-line);
  color: var(--c-sub);
}

.sc-panel .sc-tile svg {
  width: 14px;
  height: 14px;
}

.sc-plan {
  display: block;
  margin: 0;
  padding: 2px 12px 0;
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: var(--c-sub);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* .sc-act だけのセレクタは .side a（クラス1＋型1）より弱く、padding を書いても
 * 効かない。余白は .side a（8px 12px）をそのまま使う。hover の地色だけ
 * .side-company を足して .side a:hover（同じクラス1＋型1）より強くし、打ち消す
 * （フルwidthボタンのハロー抑制。Issue #1627）。 */
.sc-act {
  display: block;
  text-decoration: none;
}

.side-company .sc-act:hover {
  background: none;
}

.sc-act button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  padding: 4px 8px;
  font-size: 12px;
  min-height: 0;
}

/* プレミアム（最上位）は押せない灰色。button:disabled の半透明だとティールが薄く
 * 残るので、地・枠・字を中立色に置き換える（2026-11-04 ユーザー指示）。 */
.sc-act button:disabled,
.sc-act button:disabled:hover {
  background: var(--c-info-soft);
  border-color: var(--c-line);
  color: var(--c-sub);
  opacity: 1;
  cursor: not-allowed;
}

/* 会社名ブロック直下の「公開ページを見る」。案Lは右寄せの1行（.side-company
 * .side-public はクラス2つで .side a より強く、行ブロック意匠を上書きできる）。 */
.side-company .side-public {
  display: block;
  text-align: right;
  padding: 6px 12px 0;
  font-size: 12px;
  color: var(--c-sub);
}

.side-company .side-public:hover {
  color: var(--c-accent-strong);
  background: none;
}

/* mypage_nav（マイページのL3サイドバー）最上部のユーザーブロック。氏名（あれば）を
 * 主・メールアドレスを副とする2行。dashboard_nav の .side-company と同じ型。
 * 960px以下は .side nav がピル列の横スクロールに変形し、この div がピルに混ざって
 * 崩れるため非表示にする（メール・氏名は /mypage/settings で確認できる）。 */
/* 透明性ページ「巡回・データ反映」の巡回タイムライン1行。専用テーブルにせず
 * 平易な日本語1文にするための軽いリスト行意匠。 */
.crawl-timeline {
  margin: 0;
  padding: 0;
  list-style: none;
}

.crawl-timeline li {
  padding: 8px 0;
  border-bottom: 1px solid var(--c-line);
  font-size: var(--fs-sm);
  line-height: 1.7;
}

.crawl-timeline li:last-child {
  border-bottom: none;
}

/* 承認型トップ（考察_登録社ダッシュボードの承認型トップ §11.2）。
 * 「確認してください」「最近の反映」の1行＝1判断。左に種類ラベル＋文言、右にボタン2つまで。
 * 狭幅ではボタン列を下に折り返す。 */
/* 会社管理トップの受信トレイ（新しい順5件の表）。内容は2行で切る（全文は受信トレイ画面）。
 * td に -webkit-box を当てるとセルでなくなるので、中の div で切る。 */
.inbox-msg {
  min-width: 200px;
  max-width: 320px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.top-list .top-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 10px 0;
  border-top: 1px solid var(--c-line);
}

.top-list .top-item:first-of-type {
  border-top: none;
  padding-top: 0;
}

.top-item-body {
  min-width: 0;
  font-size: 14px;
  line-height: 1.6;
}

.top-kind {
  display: inline-block;
  margin-right: 8px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--c-sub);
  white-space: nowrap;
}

/* 自社の掲載順位の点（account/dashboard_home.html）: 達成は保存の知らせと同じ「ティールの丸に白抜きチェック」、
   未達は薄いハイフンだけ（丸を描くとチェックボックスに見えるため）。幅は達成と同じ18pxで項目名の頭を揃える */
.rank-mark { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex: none; margin-right: 8px; border-radius: 50%; color: var(--c-sub); font-size: 14px; line-height: 1; }
.rank-points .top-item-body { display: flex; align-items: center; }
.rank-mark.is-met { background: var(--c-accent); color: #fff; }

.top-date {
  margin-right: 8px;
  font-size: var(--fs-xs);
  color: var(--c-sub);
  font-variant-numeric: tabular-nums;
}

.top-detail {
  margin: 2px 0 0;
  font-size: var(--fs-xs);
  color: var(--c-sub);
}

.top-src {
  margin-left: 8px;
  font-size: var(--fs-xs);
}

.top-item-actions {
  display: flex;
  flex-shrink: 0;
  gap: 6px;
  align-items: center;
}

/* 行の中で縦を揃えるコンパクトなボタン。.top-item-actions は .btn-row を併用し、
 * 大きさは .btn-row（アップグレードボタンと同じ小サイズ）に任せる（2026-09-25 ユーザー指示）。 */
.top-msg button {
  padding: 6px 14px;
  font-size: var(--fs-sm);
  white-space: nowrap;
}

.top-item-actions button {
  white-space: nowrap;
}

/* 1行に出すのは2つまで（承認／却下・承認／取消。確認は1つだけ）。折り返さない */
.attention-table .top-item-actions { flex-wrap: nowrap; }

/* 会社管理トップの職種の1問（計画 #2576 項目5）。.card の上内側余白は共通規則に従う */
.top-ask label { display: block; margin: 0 0 4px; }
.top-ask .muted { display: block; font-size: 0.9em; margin: 0 0 10px; }
.top-ask-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.top-ask-row select { max-width: 100%; }
.top-act {
  margin: 0;
}

.top-msg {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
/* 先頭のアイコン（.msg-ok::before）はボタンと同じく行の縦中央へ。「元に戻す」だけを右端へ */
.top-msg::before { top: 50%; margin-top: -10px; }
.top-msg .top-act { margin-left: auto; }

/* マイページトップの管理中の会社行: 会社アイコン（OEM会社一覧のカードと同じ .feed-icon）・社名＋「管理中」バッジ・右寄せのリンク。
   リンクは要対応があれば赤ドット＋「対応が必要なこと N件」（件数を赤字）、無ければ灰色の「会社管理ページへ」。
   狭幅では右寄せのリンクが次の行へ折り返す */
.mp-co { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); }
/* 会社アイコンは社名（太字）の字面より下がって見えるので、一回り大きくして1px上げる（2px だと上に出過ぎた）。 */
.mp-co-icon { position: relative; top: -1px; }
/* パネル先頭・末尾の行はアイコン（20px・行高の中央から1px上）の上下端を左の内側余白に揃える（flex なので text-box-trim は効かない） */
.card > .mp-co:first-child { margin-top: calc((20px - 1lh) / 2 + 1px); }
.card > .mp-co:last-child { margin-bottom: calc((20px - 1lh) / 2 - 1px); }
.mp-co-name { min-width: 0; }
.mp-co-name .badge { margin-left: var(--sp-2); vertical-align: 2px; }
.mp-co-link { margin-left: auto; white-space: nowrap; }
/* 申請中の行の右寄せ補足（申請日・メールで知らせる旨）。リンクと違い狭幅では折り返す */
.mp-co-note { margin-left: auto; margin-bottom: 0; font-size: var(--fs-sm); }
.mp-co-link:not(.is-todo) { color: var(--c-sub); }
.mp-co-link:not(.is-todo)::after { background-color: var(--c-sub); }
.mp-co-link.is-todo::before {
  content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-danger); margin-right: 6px; vertical-align: 1px;
}
.mp-co-link.is-todo b { color: var(--c-accent-strong); font-variant-numeric: tabular-nums; }

/* 会社管理トップのサマリー（公開ページの状況）: 閲覧・巡回・入力のタイルを横に並べ、縦罫で区切る。
   各タイル＝ラベル・大きい数字1つ・1行・リンク1つ。狭幅では縦に積み横罫で区切る */
.top-sum { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.top-sum-item { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 0 var(--sp-4); }
.top-sum-item:first-child { padding-left: 0; }
.top-sum-item:last-child { padding-right: 0; }
.top-sum-item + .top-sum-item { border-left: 1px solid var(--c-line); }
/* 見出しピル（反応・巡回・活動）。地・字・余白は .feed-pulse と同じ（2026-10-17 ユーザー指示）。 */
.top-sum-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: 2px; }
.top-sum-pill { display: inline-flex; align-items: center; gap: 4px; background: var(--c-accent-soft); color: var(--c-accent-strong);
  border-radius: var(--radius-full); padding: var(--pill-pad-xs); font-size: var(--fs-xs); font-weight: 600;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.top-sum-note { color: var(--c-sub); font-size: var(--fs-xs); white-space: nowrap; }
.top-sum-num { font-size: 24px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.top-sum-num small { margin-left: 4px; font-size: var(--fs-xs); font-weight: 400; color: var(--c-sub); }
.top-sum-num.is-muted { color: var(--c-sub); font-size: var(--fs-sm); }
.top-sum-num.is-warn { color: var(--c-warn); font-size: var(--fs-sm); }
.top-sum-num.is-done { color: var(--c-accent-strong); }
.top-sum-sub { font-size: var(--fs-sm); color: var(--c-sub); }
.top-sum-sub strong { color: var(--c-ink); }
.top-sum-warn { color: var(--c-warn); }
.top-sum-link { align-self: flex-start; margin-top: auto; padding-top: 4px; font-size: var(--fs-xs); }
/* 閲覧のタイル: 4指標を1行ずつ（左に名前・右に数字） */
.top-sum-stats { margin: 0; }
.top-sum-stats > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); }
.top-sum-stats > div + div { margin-top: 2px; }
.top-sum-stats dt { color: var(--c-sub); font-size: var(--fs-sm); white-space: nowrap; }
.top-sum-stats dd { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.5; font-variant-numeric: tabular-nums; white-space: nowrap; }
.top-sum-stats dd small { margin-left: 2px; font-size: var(--fs-xs); font-weight: 400; color: var(--c-sub); }
/* 活動のタイル: 会社パネルの活動ピルのポップオーバーと同じ中身（ラベル＋日付） */
.top-sum-acts { margin: 0; padding: 0; list-style: none; font-size: var(--fs-sm); }
.top-sum-acts li + li { margin-top: 2px; }
.top-sum-date { margin-left: 6px; color: var(--c-sub); font-size: var(--fs-xs); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* 未入力の帯（タイトル直下・感嘆符） */
.top-missing { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--sp-3); }
.top-missing-link { margin-left: auto; font-weight: 600; color: inherit; white-space: nowrap; }
@media (max-width: 640px) {
  .top-sum { grid-auto-flow: row; }
  .top-sum-item { padding: 0; }
  .top-sum-item + .top-sum-item { border-left: none; border-top: 1px solid var(--c-line); margin-top: var(--sp-3); padding-top: var(--sp-3); }
}

/* 反映の履歴（巡回・データ反映画面）と会社管理トップ「確認してください」の操作列。
 * ボタンは右寄せにせず横並び */
.reflection-table td,
.attention-table td { vertical-align: middle; }

@media (max-width: 640px) {
  .top-list .top-item {
    flex-direction: column;
    align-items: stretch;
  }
}

/* 会社別ホームの公開ページ完成度チェックリスト。 */
.checklist {
  margin: 0;
  padding-left: 20px;
  line-height: 2;
}

/* ヘッダー「マイページ」右のユーザーメニュー（マイページUIUX再構築④）。
 * JS不要の details/summary。ドロップダウンは position:absolute で右寄せ
 * （.l1-auth 側は position 指定なしなので、details 自身を positioning
 * context にする）。狭幅でも画面外にはみ出さないよう max-width で頭打ちする。 */
.user-menu {
  position: relative;
}

.user-menu summary {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  color: var(--c-ink);
  list-style: none; /* Safari の三角マーカーを消す（自前の▾を使う） */
}

/* アイコン本体はロゴのマークと同じ緑（--c-accent-strong = #0F766E）。
 * summary の色（--c-ink）を継がせないよう currentColor を上書きする。 */
.user-menu-av {
  display: block;
  flex-shrink: 0;
  color: var(--c-accent-strong);
}

.user-menu summary:hover .user-menu-av {
  color: var(--c-accent-deep);
}

.user-menu summary::-webkit-details-marker {
  display: none;
}

.user-menu summary:hover {
  color: var(--c-accent-strong);
}

.user-menu summary:focus-visible {
  outline: 2px solid var(--c-accent-strong);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.user-menu-caret {
  flex-shrink: 0;
  color: var(--c-sub);
}

.user-menu-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: var(--z-pop);
  min-width: 200px;
  max-width: min(280px, calc(100vw - 24px));
  background: var(--c-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-hover);
  padding: var(--sp-3) 0;
  display: flex;
  flex-direction: column;
}

.user-menu-email,
.user-menu-name {
  margin: 0;
  padding: 2px var(--sp-4);
  font-size: var(--fs-xs);
  color: var(--c-sub);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-menu-name {
  color: var(--c-ink);
  font-weight: 600;
}

.user-menu-sep {
  border: none;
  border-top: 1px solid var(--c-line);
  margin: var(--sp-2) 0;
}

.user-menu-panel a,
.user-menu-panel button {
  display: block;
  width: 100%;
  padding: 7px var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--c-ink);
  text-decoration: none;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
}

.user-menu-panel a:hover,
.user-menu-panel button:hover {
  background: var(--c-accent-soft);
  color: var(--c-accent-strong);
}

.user-menu-panel form {
  margin: 0;
}

/* 管理中の会社の行（名前の下）。社名は省略で切り、「管理中」は右に固定 */
.user-menu-panel a.user-menu-co {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-1);
}

.user-menu-co-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.user-menu-co .badge {
  flex: none;
}

/* ------------------------------------------------------------ */
/* オーナーレンズ（仕様書_オーナーレンズ §3・Issue #1046）:
   公開ページを本人（company_members）が見たときだけ足す上乗せ表示。 */
/* 管理者バーは地をアクセント色で塗って白抜きにする（2026-09-05 ユーザー指示。
   淡色地では閲覧者向けの通常UIに埋もれ、「自分だけに出ている」ことが伝わらない）。
   件数は載せない — バーは立場を告げるだけで、作業の中身はダッシュボードが持つ。 */
/* ヘッダーの下線に密着させる（2026-09-05 ユーザー指示）。全幅の帯にして角丸と
   外側の余白を持たせない — 本文の中の1枚のカードに見えると「ページの一部」に
   なってしまい、立場を告げる帯として読まれない。中身だけ container 幅に揃えて
   本文の左端と文字の頭を合わせる。 */
.owner-bar {
  background: var(--c-accent-strong);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 600;
}

.owner-bar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-top: 7px;
  padding-bottom: 7px;
}

.owner-bar a {
  color: #fff;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 本人向けの編集導線はボタン（design.md §5.4 プライマリの小サイズ＝緑地に白抜き文字）。
   2026-09-05 は「枠＋鉛筆＋編集」の文字リンクだったが、図形が外部リンクのアイコンに
   似て紛らわしいため 2026-10-02 ユーザー指示でアイコンを外しボタン型にし、同日さらに
   セカンダリからプライマリの配色に変え、枠の無い白抜きの鉛筆（12px）を文字の前に戻した。 */
.owner-edit {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  vertical-align: middle;
  margin-left: 8px;
  background: var(--c-accent-strong);
  color: #fff;
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
}

/* <button> で使うとき（相談フォームの「相手に届く連絡先」の編集）は button の既定の枠を外して <a> と外寸をそろえる */
button.owner-edit {
  border: 0;
}

.owner-edit:hover {
  background: var(--c-accent-strong);
  text-decoration: none;
}

.owner-edit:focus-visible {
  outline: 2px solid var(--c-accent-strong);
  outline-offset: 2px;
}

.owner-edit-icon {
  flex: none;
}

.owner-missing {
  color: var(--c-sub);
}

.owner-note {
  margin-top: 4px;
}

/* --- 閲覧者の誤り報告（自己修復B・Issue #1165・app/fact_flags.py） -------------
   会社詳細の行単位に置く非公開の指摘口。誤りの隣に置くことだけが役目なので、
   意匠は本文より一段落とす（--c-sub・12px）— 目立たせると「通報ボタン」に見え、
   §9 で採らないと決めた第三者評価のUIに接近してしまう。押した件数・その行の
   指摘状況は公開面に一切出さない。 */
.flag-ask {
  display: none;
  margin-left: 8px;
  font-size: 12px;
  vertical-align: middle;
}

.flag-ask > summary {
  display: inline-block;
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
  padding: 2px 10px;
  border: 1px solid var(--c-accent);
  border-radius: 999px;
  background: var(--c-surface);
  color: var(--c-accent-strong);
  font-weight: 600;
}

.flag-ask > summary::-webkit-details-marker { display: none; }

.flag-ask > summary:hover,
.flag-ask[open] > summary {
  background: var(--c-accent-strong);
  color: #fff;
}

.flag-ask form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}

.flag-ask-lead { color: var(--c-sub); }

/* 行ごとの「報告」は章末の「掲載内容の誤りを報告」を押した章だけ出す（_fact_flag.html）。 */
.chapter:has(.flag-mode-cb:checked) .flag-ask { display: inline-block; }

.flag-mode {
  margin: 8px 0 0;
  text-align: right;
  font-size: 12px;
}

.flag-mode label {
  cursor: pointer;
  color: var(--c-sub);
}

.flag-mode-cb {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.flag-mode-off {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.flag-mode label:hover .flag-mode-off { color: var(--c-accent-strong); }

.flag-mode-on { display: none; }
.flag-mode-cb:checked ~ .flag-mode-off { display: none; }
.flag-mode-cb:checked ~ .flag-mode-on { display: inline; color: var(--c-ink); }

.flag-mode-cb:focus-visible ~ span {
  outline: 2px solid var(--c-accent-strong);
  outline-offset: 2px;
}

.flag-mode-close {
  margin-left: 10px;
  color: var(--c-sub);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.flag-ask button {
  border: 1px solid var(--c-field-line);
  background: var(--c-surface);
  color: var(--c-ink);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12px;
  cursor: pointer;
}

.flag-ask button:hover {
  border-color: var(--c-accent);
  color: var(--c-accent-strong);
}

/* ハニーポット（画面に出ない欄）。display:none は自動入力系に無視されることが
   あるので、位置を画面外へ飛ばして読み上げからも外す。 */
.flag-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* 受領の帯（PRGの着地 ?flagged=1）。オーナーバーと同じくヘッダー直下の全幅。 */
.flag-thanks {
  background: var(--c-accent-soft);
  color: var(--c-accent-deep);
  font-size: var(--fs-sm);
  font-weight: 600;
  padding-top: 7px;
  padding-bottom: 7px;
}

/* 詳細ページのパネル表の折りたたみ（design.md §5.30）。先頭5件を出し、表の直後の details の
 * 開閉を :has() で拾って残りの行（.is-rest。表の tr と業界紙の .mf-row）を出す。JS なし。:has() 非対応では全行を出し、
 * トグル自体を隠す（情報が欠けない側に倒す）。 */
.rows-fold-toggle { display: none; }
@supports selector(:has(a)) {
  .rows-fold:has(+ .rows-fold-toggle:not([open])) .is-rest { display: none; }
  /* 畳んだときの最終行（is-rest の直前の行）の下罫を消す（§5.2 最終行は罫線なし。先頭件数によらない） */
  .rows-fold:has(+ .rows-fold-toggle:not([open])) tr:has(+ tr.is-rest):not(.is-rest) td { border-bottom: none; }
  .rows-fold-toggle { display: block; margin: 8px 0 0; }
}
.rows-fold-toggle > summary {
  cursor: pointer;
  color: var(--c-accent-strong);
  font-size: var(--fs-sm);
}
.rows-fold-toggle .rf-close,
.rows-fold-toggle[open] .rf-open { display: none; }
.rows-fold-toggle[open] .rf-close { display: inline; }
/* セル内の並びの折りたたみ（_brand_links.html。表の行を畳む .rows-fold のセル内版） */
.inline-fold, .inline-fold > summary { display: inline; }
.inline-fold > summary { cursor: pointer; color: var(--c-accent-strong); }

/* 関連リンク .related-links（ページ最下部の L2 横断導線。app/related_links.py）。
 * §5.1 のカード文法（白面＋影・枠線なし）を小さく並べる。L3 には越境リンクを置かない（§4.3）ので、ここに集める。 */
.related-links {
  margin-top: var(--sp-7);
}
.related-links ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--sp-3);
}
.related-links a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  height: 100%;
  box-sizing: border-box;
  padding: var(--sp-4);
  background: var(--c-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  color: var(--c-ink);
  text-decoration: none;
  transition: box-shadow .15s;
}
.related-links a:hover {
  box-shadow: var(--shadow-hover);
}
/* セクション名はティールの小ピル（design.md §5.31）。カード内で左寄せのまま幅を中身に合わせる */
.related-links .related-sec {
  align-self: flex-start;
  margin-bottom: 2px;
  padding: var(--pill-pad-xs);
  border-radius: var(--radius-full);
  background: var(--c-accent-soft);
  color: var(--c-accent-strong);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.6;
}
.related-links .related-name {
  color: var(--c-accent-strong);
  font-weight: 700;
}
.related-links a:hover .related-name {
  text-decoration: underline;
}
.related-links .related-desc {
  color: var(--c-sub-strong);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
/* 姉妹ハブ（化粧品ビジネスハブ）への相互リンクのカードは相手サイトの色で塗る（計画 #2744）。並びは自サイトの関連リンクの後 */
.related-links .related-sister .related-sec {
  background: var(--c-sister-soft);
  color: var(--c-sister-strong);
}
.related-links .related-sister .related-name {
  color: var(--c-sister-strong);
}
/* 製品詳細の関連情報（product_detail.html）は PC で3列固定。枚数が少なくても幅を揃える */
.related-links--3 ul {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 640px) {
  .related-links ul {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------ */
/* 19. ユーティリティ（テンプレートの inline style の置換先・design.md §8.4） */
/* ------------------------------------------------------------ */
/* 寸法は §2 のトークンに丸める（6px→--sp-2・10px→--sp-3・14px→--sp-4）。文字は4段（12/13/15/17px）。
   並び順に意味がある: .m0 を先に置き、.mt-* / .mb-* が後から上書きする（class="m0 mt-2" で margin:8px 0 0）。
   色・幅・表示方式は部品側の class で持つ（ここに足さない）。 */
.m0 { margin: 0; }
.mt-0 { margin-top: 0; }           .mb-0 { margin-bottom: 0; }
/* 子孫セレクタ（.chapter h3 等・特異度 0,1,1）がユーティリティ（0,1,0）に勝つ箇所の補強。該当は ingredient_detail の取扱会社パネル */
.chapter .mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--sp-1); } .mb-1 { margin-bottom: var(--sp-1); }
.mt-2 { margin-top: var(--sp-2); } .mb-2 { margin-bottom: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); } .mb-3 { margin-bottom: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); } .mb-4 { margin-bottom: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); } .mb-5 { margin-bottom: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); } .mb-6 { margin-bottom: var(--sp-6); }
.fs-xs { font-size: var(--fs-xs); }
.fs-sm { font-size: var(--fs-sm); }
.fs-base { font-size: var(--fs-base); }
.fs-md { font-size: var(--fs-md); }
.nowrap { white-space: nowrap; }

.ml-1 { margin-left: var(--sp-1); } .mr-1 { margin-right: var(--sp-1); }
.ml-2 { margin-left: var(--sp-2); } .mr-2 { margin-right: var(--sp-2); }
.ml-3 { margin-left: var(--sp-3); } .mr-3 { margin-right: var(--sp-3); }
.fw-400 { font-weight: 400; } .fw-600 { font-weight: 600; } .fw-700 { font-weight: 700; }
.c-sub { color: var(--c-sub); } .c-ink { color: var(--c-ink); } .c-link { color: var(--c-accent-strong); } .c-inherit { color: inherit; }
.va-t { vertical-align: top; } .va-m { vertical-align: middle; } .va-b { vertical-align: bottom; }
a.a-plain { text-decoration: none; }           /* バッジ・チップを包むリンク（下線を消す） */
summary { cursor: pointer; }                    /* 折りたたみの見出しは常にクリック可能 */
/* 表の列幅（th に付ける。inline の width は書かない。% は横棒の列、px は日付・種別・入力欄など内容で決まる列） */
.col-12 { width: 12%; } .col-20 { width: 20%; } .col-40 { width: 40%; }
.col-90px { width: 90px; } .col-110px { width: 110px; } .col-130px { width: 130px; } .col-170px { width: 170px; } .col-220px { width: 220px; }
.col-min-120px { min-width: 120px; }          /* 横棒を含む td の最小幅 */
/* 見出し直下の導入文・注記の引き上げ（h1/h2 の下余白を 8px 詰める。class="muted pull-up mb-4" で margin:-8px 0 16px） */
.pull-up { margin-top: calc(-1 * var(--sp-2)); }
/* 段落・表の最大幅（本文の段落は読み幅 --measure、規格値の小さな表は 640/480px） */
.measure { max-width: var(--measure); } .maxw-640 { max-width: 640px; } .maxw-480 { max-width: 480px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.pre-wrap { white-space: pre-wrap; } .break-all { word-break: break-all; }   /* 本文の改行を保つ・長い URL を折る */
.hr-line { border: 0; border-top: 1px solid var(--c-line); margin: var(--sp-4) 0; }   /* パネル内の区切り罫（グレーの細線） */
.ta-r { text-align: right; } .ta-c { text-align: center; }    /* 数値列の右寄せ・記号列の中央寄せ */
.c-danger { color: var(--c-danger); } .c-warn { color: var(--c-warn); }   /* 本文中の注意・エラーの語（帯にするなら .msg-*） */
.is-dim { opacity: .55; }                       /* 無効・処理済みの行や部品を沈める */
@media (max-width: 640px) { .grid-2 { grid-template-columns: 1fr; } }
form.search.search--1col { grid-template-columns: 1fr; }
.legend-row { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-bottom: var(--sp-2); }  /* 折れ線グラフの凡例の行（.legend-item を横に並べる） */
.legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--c-ink); }  /* 折れ線グラフの凡例 */
.chart-notes { margin: 0; padding-left: 20px; font-size: var(--fs-sm); color: var(--c-ink); display: flex; flex-direction: column; gap: 6px; }  /* グラフ下の「制度の動き」番号付きリスト */
.engage-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: 4px 0 14px; }  /* ☆ お気に入りボタンの行（_engage.html） */
.kw-fav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: var(--sp-2) 0; }  /* 検索条件のお気に入り（_keyword_fav.html） */

/* 展示会の訪問リスト /exhibitions/mylist（exhibitions/mylist.html の <style> から移設） */
.visit-item { display: flex; align-items: flex-start; gap: 14px; background: var(--c-surface);
              box-shadow: var(--shadow-card); border-radius: var(--radius-lg); padding: 16px; margin-bottom: 10px; }
.visit-booth { font-size: 26px; font-weight: 700; min-width: 74px; text-align: center;
               color: var(--c-accent-strong); line-height: 1.1; }
.visit-booth .label { display: block; font-size: var(--fs-xs); font-weight: 400; color: var(--c-sub); }
.visit-body { flex: 1; }
.visit-name { font-size: var(--fs-md); font-weight: 700; }
.visit-remove button { padding: 4px 10px; font-size: var(--fs-xs); background: var(--c-surface);
                        color: var(--c-accent-strong); border: 1px solid var(--c-accent-strong); }

@media print {
  .site-head, .side, footer, .no-print { display: none !important; }
  body { background: var(--c-surface); font-size: 12pt; }
  .visit-item { border: 1px solid #999; break-inside: avoid; }
  a { color: #000; text-decoration: none; }
}

/* お問い合わせフォームのハニーポット（contact.html から移設） */
/* ハニーポット（人には見えない欄。埋まっている送信は捨てる） */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* メルマガ一覧 /newsletters（newsletters/index.html から移設） */
.nl-table .nl-name { min-width: 16em; }
.nl-table .nl-gist { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
                     overflow: hidden; color: var(--c-sub); font-size: var(--fs-sm); min-width: 18em; }

/* メルマガ詳細 /newsletters/<id>（newsletters/detail.html から移設） */
.nl-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; }
@media (max-width: 960px) { .nl-layout { grid-template-columns: 1fr; } }
.newsletter-body { background: var(--c-surface); box-shadow: var(--shadow-card);
                   border-radius: var(--radius-lg); padding: 20px; overflow-wrap: anywhere; }
.newsletter-body img { max-width: 100%; height: auto; }
.newsletter-body table { width: auto; max-width: 100%; border: none; }
.newsletter-body th, .newsletter-body td { border: none; }
.co-box { background: var(--c-surface); box-shadow: var(--shadow-card); border-radius: var(--radius-lg);
          padding: 16px; position: sticky; top: var(--sticky-top); }
.co-box h2 { margin: 0 0 8px; font-size: var(--fs-base); }
.co-box .cta { display: block; text-align: center; background: var(--c-accent-strong); color: #fff;
               border-radius: 6px; padding: 9px 0; text-decoration: none; margin-top: 12px; }
.nl-layout .related li { margin-bottom: 6px; }

/* 会社管理ページの号のプレビュー /dashboard/<id>/newsletters/<mail_id>。面は .card の1枚で、
   上に号の情報（dl.meta）、罫の下に本文。dl.meta・.newsletter-body の面は降ろして入れ子にしない（§5.7） */
.title-row.nl-preview-title + * {
  margin-top: var(--sp-5);
}
.nl-preview dl.meta {
  background: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0 0 var(--sp-4);
  margin: 0 0 var(--sp-4);
  border-bottom: 1px solid var(--c-line);
}
.nl-preview .newsletter-body {
  background: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}
.nl-preview-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: inherit;
  margin: 0;
}

/* 製品詳細の「製品データ」パネル: 見出しをパネル上部に置き、その下に dl.meta を並べる
   （/releases 1面の .front-lead と同じ文法）。dl.meta は単体では自前の白い面を持つので、
   パネル内では面を消して入れ子にしない（§5.7）。 */
.spec-panel {
  padding: var(--sp-5);
  margin: 0 0 var(--sp-5);
}
.spec-panel .panel-h {
  margin: 0 0 var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--c-line);
  font-size: var(--fs-md);
  line-height: 1.45;
}
.spec-panel .panel-h > p {
  margin: 0;
}
.spec-panel dl.meta {
  background: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
}

/* 製品編集の操作バー: 保存と公開を同列に見せない。主ボタンは1つ・状態を左に・画面下に固定 */
.action-bar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-surface);
  border-top: 1px solid var(--c-line);
}
.action-bar-state { margin: 0; font-size: var(--fs-sm); color: var(--c-sub); }
.action-bar-btns { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-left: auto; }
.action-bar-btns .save-note { align-self: center; }
.action-bar-btns button { min-height: var(--field-h); padding-top: 0; padding-bottom: 0; }
.unpublish-row { margin: var(--sp-4) 0 0; text-align: right; font-size: var(--fs-sm); }

/* 確認待ち製品の「あとで」「却下」（リンク型。保存・公開より目立たせない） */
.action-bar-btns a.link-btn { align-self: center; font-size: var(--fs-sm); }
.action-bar-btns a.btn-secondary.danger-text { color: var(--c-danger, #c0392b); border-color: var(--c-danger, #c0392b); }
.action-bar-btns a.btn-secondary.danger-text:hover { background: #fdf0ee; border-color: var(--c-danger, #c0392b); }

/* 製品編集「製品資料」カード（計画 #2345）。資料は追加した時点で掲載済み（保存バーとは別に動く） */
.pdoc-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-2); }
.pdoc-head h2 { margin: 0; }
.pdoc-quota { font-size: var(--fs-xs); color: var(--c-sub); font-variant-numeric: tabular-nums; }
/* 資料の表（資料画面の製品資料と同じ .supply-table）。送信中の行が無く資料も0件の間は表ごと隠す */
.pdoc-table { margin-top: var(--sp-3); }
.pdoc-table:not(:has(tbody tr)) { display: none; }
.supply-table .pdoc-ctl { width: 1%; text-align: right; }
.pdoc-ctl > * + * { margin-left: var(--sp-2); }
.pdoc-ctl .link-btn { font-size: var(--fs-xs); }
.pdoc-row.uploading .pdoc-title { color: var(--c-sub); }
.pdoc-done { display: flex; align-items: center; gap: 6px; margin: var(--sp-3) 0 0; font-size: var(--fs-sm); font-weight: 600; color: var(--c-accent-strong); }
.pdoc-done-ic { display: inline-grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--c-accent); color: #fff; }
/* 追加直後の行だけ淡い地（done_id は追加の応答にだけ載るので再読み込みで消える） */
.supply-table tr.pdoc-row.is-new > td,
.card-section tr.is-new > td { background: var(--c-accent-soft); }  /* 足した直後の行 */
/* 保存バーは基本情報フォームの外（ページ末尾）。固定の範囲は資料カードまで */
/* 見出しはパネルの外（基本情報・製品資料）。先頭の見出しはタイトル下 --sp-4（design.md §3。他の会社管理ページでタイトル
   からパネルまでと同じ幅）、2つ目以降は h2 の既定（上 --sp-6・下 --sp-3） */
.edit-stack > h2:first-child { margin-top: var(--sp-4); }
.edit-stack > .pdoc-section { margin-top: var(--sp-6); }
.pdoc-section > .pdoc-head { margin-bottom: var(--sp-3); }
/* 一覧の「資料」列・追加直後の帯から飛んできたとき: sticky ヘッダーに隠さず、着いた先を一度だけ縁取って知らせる */
.pdoc-section { scroll-margin-top: calc(var(--head-h) + var(--sp-5)); }
@media (prefers-reduced-motion: no-preference) {
  .pdoc-section:target > .card { animation: pdoc-arrive 1.8s ease-out; }
}
@keyframes pdoc-arrive {
  from, 40% { box-shadow: 0 0 0 2px var(--c-accent), var(--shadow-card); }
  to { box-shadow: 0 0 0 2px transparent, var(--shadow-card); }
}
.edit-stack > .action-bar { border: 1px solid var(--c-line); border-radius: var(--radius-md); }
/* 製品の追加（design.md §5.33 の案1）: 必須の欄の下に「ここから下はすべて任意」の境目を1回だけ置く。
   罫線と余白は項目群の見出し .form-group-head と揃える。カード外の注記は保存バーの上 */
.optional-lead { display: flex; align-items: flex-start; gap: 6px; margin: var(--sp-3) 0 0; padding-top: var(--sp-4);
  border-top: 1px solid var(--c-line); font-size: var(--fs-sm); color: var(--c-sub); }
.optional-lead-icon { flex: none; margin-top: 3px; color: var(--c-accent); }
.optional-lead strong { color: var(--c-ink); font-weight: 700; }
.edit-stack > p.muted { margin: var(--sp-3) 0 0; }
/* 送信中の行: 名前列はほかの行と同じ1セル（狭い画面で左に固定される）。進み具合は会員情報〜DL数の3列に渡す */
.pdoc-row.uploading > td { vertical-align: middle; }
.supply-table .pdoc-row.uploading .pdoc-ctl { text-align: center; }
.pdoc-bar { height: 4px; background: var(--c-line); border-radius: 2px; overflow: hidden; }
.pdoc-bar i { display: block; width: 0; height: 100%; background: var(--c-accent); transition: width .2s; }
.pdoc-drop { margin-top: var(--sp-3); padding: var(--sp-4); border: 1px dashed var(--c-line-strong);
  border-radius: var(--radius-md); background: var(--c-surface-soft); text-align: center; font-size: var(--fs-sm); color: var(--c-sub); }
.pdoc-drop.is-over { border-color: var(--c-accent-strong); color: var(--c-ink); }
.pdoc-drop .acts { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-2); }
.pdoc-drop .pdoc-file { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); color: var(--c-ink); }
.pdoc-drop .pdoc-file small { color: var(--c-sub); }
.pdoc-pick-list { margin: var(--sp-2) 0 0; padding: 0; list-style: none; max-height: 60vh; overflow-y: auto; border-top: 1px solid var(--c-line); }
.pdoc-pick-list label { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-2); padding: 8px 0; font-size: var(--fs-sm); border-bottom: 1px solid var(--c-line); cursor: pointer; }
.pdoc-pick-list small { display: block; font-size: var(--fs-xs); color: var(--c-sub); }
.pdoc-pick-list label.is-on { color: var(--c-sub); cursor: default; }
.pdoc-pick-list li[hidden] { display: none; }
.kw-count { margin: var(--sp-2) 0 0; font-size: var(--fs-xs); color: var(--c-sub); }
.kw-count b { color: var(--c-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
/* 虫眼鏡つきの絞り込み欄（資料を選ぶモーダル・資料画面の製品選択で共通） */
.kw-search { position: relative; }
.kw-search > svg { position: absolute; top: 50%; left: 10px; transform: translateY(-50%); color: var(--c-sub); pointer-events: none; }
.kw-search input[type=search] { width: 100%; padding-left: 34px; }

/* 会社管理の資料画面: 紐づけた製品の列・製品の複数選択（計画 #2345） */
.doc-prods { font-size: var(--fs-xs); line-height: 1.7; }
.doc-prods a { margin-right: 6px; white-space: nowrap; }
.prod-picker { border: 1px solid var(--c-line); border-radius: var(--radius-md); padding: var(--sp-3); }
.prod-picker[hidden] { display: none; }
.prod-picker-list { margin: var(--sp-2) 0 0; padding: 0; list-style: none; max-height: 280px; overflow-y: auto; border-top: 1px solid var(--c-line); }
.prod-picker-list li.is-pin-last label { border-bottom: 2px solid var(--c-line); }
.prod-picker-list li[hidden] { display: none; }
.prod-picker-list label { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-2); padding: 6px 0; font-size: var(--fs-sm); border-bottom: 1px solid var(--c-line); }
.prod-picker-list small { color: var(--c-sub); }
.prod-picker-list label.is-full { color: var(--c-sub); }

/* OEM事例（ダッシュボード。計画 #2121） */
.case-sep { border: 0; border-top: 1px solid var(--c-line); margin: var(--sp-5) 0; }
.case-sep + .case-head { margin-top: 0; }
.case-table { width: 100%; min-width: 32em; table-layout: fixed; }
.case-table .col-check { width: 40px; }
.case-table .col-state { width: 96px; }
.case-table .col-date { width: 104px; }
.case-table .cell-clip { max-width: none; }
.case-detail-input { min-height: 12em; }
.case-card-src { margin: 0 0 var(--sp-3); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--c-line); font-size: var(--fs-sm); color: var(--c-sub); }
.case-card-src .badge { margin: 0 2px; }
.action-bar-btns :is(button, a).link-btn.danger { align-self: center; min-height: 0; font-size: var(--fs-sm); color: var(--c-danger, #c0392b); }
/* 保存の知らせ（account/_save_note.html）。上部の帯ではなく押したボタンの横に出し、
   出た瞬間だけ輪を2回広げて目を引く。動きを減らす設定では輪を出さない。 */
.save-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  background: var(--c-accent-soft);
  color: var(--c-accent-strong);
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1.5;
  scroll-margin: 96px 0;
  animation: save-note-in .9s ease-out 2;
}
.save-note:focus { outline: none; }
.save-note svg { flex: none; box-sizing: content-box; padding: 3px; border-radius: 50%; background: var(--c-accent); color: #fff; }
@keyframes save-note-in {
  from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-accent) 35%, transparent); }
  to   { box-shadow: 0 0 0 10px transparent; }
}
@media (prefers-reduced-motion: reduce) { .save-note { animation: none; } }
/* OEM事例（会社詳細の表・OEM検索の一致行） */
.case-pub-table { width: 100%; table-layout: fixed; }
.case-pub-table .col-date { width: 104px; white-space: nowrap; }
.case-pub-table .col-form { width: 8em; }
.case-pub-table .badge { display: inline-block; margin: 2px 4px 2px 0; }
.case-pub-table .owner-edit { margin-left: 6px; font-size: 12px; white-space: nowrap; }
.feed-match-line .feed-vsep { margin: 0 3px; height: 12px; }
.feed-prod-label .feed-vsep { margin: 0 8px; }

/* 確認待ち（編集画面の最後のピル）。緑・黄のピルの後ろに、地を敷かず枠線で添える */
.badge.kind {
  background: var(--c-surface);
  color: var(--c-sub);
  box-shadow: inset 0 0 0 1px var(--c-border-strong, var(--c-sub));
}

/* 更新検知の「却下」（.secondary のまま文字と枠だけ赤） */
button.secondary.reject-btn { color: var(--c-danger, #c0392b); border-color: var(--c-danger, #c0392b); }
button.secondary.reject-btn:hover { background: #fdf0ee; border-color: var(--c-danger, #c0392b); }

/* ------------------------------------------------------------ */
/* 運営管理画面の枠（app/templates/admin/base.html・admin/_nav.html）
 * 公開側の .layout.has-side・.side をそのまま使い、ここには管理画面だけの差分を置く:
 * 全幅（表の多い作業画面のため）・白地1行のヘッダーと「管理画面」の札・サイドバーの小見出し。
 * 各画面の中身は公開側の部品をそのまま使う（差分は次の「運営管理画面の中身」節）。 */
/* ------------------------------------------------------------ */
.admin-page {
  --head-h: 56px;
  --sticky-top: calc(var(--head-h) + var(--sp-4));  /* :root で 100px 基準に解決済みのため組み直す */
}

.admin-head {
  position: sticky;
  top: 0;
  z-index: var(--z-head);
  height: var(--head-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: 0 var(--pad-x);
  background: var(--c-surface);
  box-shadow: var(--shadow-card);
}

.admin-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  text-decoration: none;
}

.admin-brand img {
  display: block;
  height: 26px;
  width: auto;
}

/* 公開画面と取り違えないための札（濃色の面は管理画面だけ） */
.admin-tag {
  padding: 2px 10px;
  border-radius: var(--radius-full);
  background: var(--c-ink);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.6;
}

.admin-head-r {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  font-size: var(--fs-sm);
}

.admin-head-r > a {
  color: var(--c-sub);
  text-decoration: none;
}

.admin-head-r > a:hover {
  color: var(--c-accent-strong);
}

.admin-head-r form {
  margin: 0;
}

/* ヘッダーのログアウトは塗りの button にせず、控えめな枠線ボタンにする */
.admin-page .admin-logout {
  padding: 4px 12px;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-sm);
  background: var(--c-surface);
  color: var(--c-ink);
  font-size: var(--fs-sm);
  font-weight: 400;
}

.admin-page .admin-logout:hover {
  background: var(--c-surface-soft);
}

.admin-layout {
  max-width: none;
}

.admin-layout.has-side {
  grid-template-columns: 200px minmax(0, 1fr);
}

/* サイドバーのない画面（ログイン）は本文を中央の1列に */
.admin-layout:not(.has-side) main {
  max-width: 960px;
  margin: 0 auto;
}

/* 管理トップ（admin/dashboard.html）: 承認・確認待ちを1件1行の表で並べる */
.admin-queue-table {
  margin: var(--sp-4) 0;
}

/* 小見出しはグループの開閉ボタン（admin/_nav.html）。親は 14px・標準の太さ・本文色、子（.side-sub）は
 * 13px・字下げ・左の縦線で入れ子を見せる（会社管理ナビ .side-account と同じ文法）。右端の印で開閉を示す。
 * 畳んだグループの項目（.is-folded）は 961px 以上でだけ隠す。960px 以下は見出しを消して
 * 全項目をピル列に並べる（畳むと見出しが無いので開けなくなる） */
.admin-page .side .side-gh {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: var(--sp-2) 0 0;
  padding: 7px 12px;
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  font: inherit;
  font-size: 14px;
  color: var(--c-ink);
  text-align: left;
  cursor: pointer;
}

.admin-page .side .side-gh:hover {
  background: var(--c-surface-soft);
}

.admin-page .side .side-gh::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

.admin-page .side .side-gh[aria-expanded="false"]::after {
  transform: rotate(-45deg);
}

.admin-page .side a {
  padding: 5px 12px;
}

@media (min-width: 961px) {
  .admin-page .side a.is-folded {
    display: none;
  }

  .admin-page .side nav > a.side-sub {
    margin-left: 18px;
    padding: 4px 10px;
    font-size: var(--fs-sm);
    color: var(--c-sub);
    border-left: 1px solid var(--c-line);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
  }

  .admin-page .side nav > a.side-sub:hover {
    color: var(--c-ink);
  }

  .admin-page .side nav > a.side-sub.active {
    color: var(--c-accent-strong);
    border-left-color: var(--c-accent-strong);
  }

  /* 子項目どうしは nav の gap 2px を打ち消して詰め、縦線を途切れさせない */
  .admin-page .side nav > a.side-sub + a.side-sub {
    margin-top: -2px;
  }
}

@media (max-width: 960px) {
  .admin-page .side .side-gh {
    display: none;
  }
}

/* 運営管理画面の中身（app/templates/admin/**。design.md §8.2）
 * カード・表・フォーム・ボタン・帯（.msg-*）・バッジ・チップは公開側の部品をそのまま使い、
 * ここには作業画面としての差分だけを置く: カードの間隔・カードの中の表・欄の見出し（label）・
 * 一覧の絞り込み行（admin/_list.html）・帯の中の見出しと箇条書き。 */
/* ------------------------------------------------------------ */
.admin-page .card {
  margin: var(--sp-4) 0;
}

/* カードの中の表は白い面を重ねない（面はカードが持つ）。横に長い表は .table-scroll で包む */
.admin-page .card table,
.admin-page .card .table-scroll {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

.admin-page .card table {
  overflow: visible;
}

/* カードの中の1件の属性一覧（2型＝dl.meta）も面を重ねない（design.md §5.7）。
   見出し列だけの表を table で組まない（§5.2「ヘッダの3類型」） */
.admin-page .card dl.meta {
  background: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  margin: var(--sp-3) 0;
}

/* 欄の見出し: 管理画面のフォームは <label> → 入力欄の縦積み（.field を組まない）なので、
 * label 自体を .field-label の一段小さい版にする。チェックボックス・ラジオを包む label は本文の太さ */
.admin-page label {
  display: block;
  margin: 0 0 var(--sp-1);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-ink);
}

.admin-page label:has(> input:is([type="checkbox"], [type="radio"])) {
  font-weight: 400;
}

/* .choice（チェック＋文の横並び）は上の display: block に潰させない */
.admin-page label.choice { display: inline-flex; }

/* 横に並べる選択肢（カテゴリのチェックボックス群） */
.admin-page .cats label {
  display: inline-block;
  margin-right: var(--sp-2);
  font-size: var(--fs-xs);
}

.admin-page code {
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  background: var(--c-surface-soft);
  font-size: .92em;
}

/* 一覧の絞り込み行（admin/_list.html の list_bar） */
.admin-listbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  align-items: flex-end;
  margin: var(--sp-3) 0 0;
  scroll-margin-top: var(--sticky-top);
}

.admin-listbar label {
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--c-sub);
}

.admin-listbar .f-q {
  flex: 1 1 200px;
  max-width: 320px;
}

.admin-listbar select {
  width: auto;
}

.admin-listbar .f-btn {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  font-size: var(--fs-sm);
}

.admin-listcount {
  margin: 0;
  font-size: var(--fs-sm);
}

/* 件数（左）と並び順（右肩）の行。上下とも --sp-3（絞り込みの帯→件数の行→一覧の間隔をそろえる）。件数と並び順はベースラインで揃う（.list-head・design.md §5.32） */
.admin-listhead {
  align-items: center;
  margin: var(--sp-3) 0;
}

/* 帯の上（見出し・リード文）と件数の行の下（表・カード・空の文）は、前後の要素のマージンに関係なく --sp-3 ちょうどにする */
.admin-page :has(+ .admin-listbar) {
  margin-bottom: 0;
}

.admin-page .admin-listhead + * {
  margin-top: 0;
}

/* .admin-page label の display:block・下マージンを打ち消し、アイコンと「並び順」を1行の中央に揃える（design.md §4.4） */
.admin-listhead .list-sort label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--c-sub);
}

.admin-listhead .list-sort select {
  width: auto;
}

/* 帯（.msg-warn・.msg-err）の中の見出しと箇条書き（ダッシュボードの取込ヘルス） */
.admin-page :is(.msg-warn, .msg-err) > h2 {
  margin: 0 0 var(--sp-1);
  font-size: var(--fs-base);
}

.admin-page :is(.msg-warn, .msg-err) > ul {
  margin: 0;
  padding-left: 1.3em;
  font-size: var(--fs-sm);
}
/* 管理画面の共通部品（テンプレートの inline style の置換先）
   form.inline: 表の行の中や見出しの横に置く1ボタンのフォーム。
   tr.row-stop / tr.row-warn: 止まっている・注意の行を地の色で示す（ダッシュボード・運用状況）。
   .admin-note: カード内に置く補足の囲み（帯ほど強くない注記）。 */
.admin-page form.inline { display: inline; margin: 0; }
/* 表のセルの中のボタンは全画面で小ボタン（button.small と同じ寸法。2026-10-26 ユーザー指示）。
   class="small" の付け忘れがあっても大きくならないよう、セル単位で当てる */
.admin-page td :is(button, a.btn-primary, a.btn-secondary) {
  min-height: 0;
  padding: 4px 10px;
  font-size: var(--fs-sm);
}
@media (pointer: coarse) {
  .admin-page td :is(button, a.btn-primary, a.btn-secondary) { min-height: 40px; }
}
/* 業界紙の社名の紐付け（admin/media_unresolved.html）: 候補・会社ID のセルの中のフォームは
   「社名（ID）＋ボタン」「入力欄＋ボタン」を1行に並べ、入力欄はボタンと同じ高さの固定幅にする
   （幅 100% のままだと自動レイアウトの列幅に入らず、右の列に重なる） */
.mu-table .mu-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); margin: 0; }
.mu-table .mu-form + .mu-form { margin-top: var(--sp-2); }
.mu-table .mu-form input[type="text"] { flex: 0 0 auto; width: 6em; min-height: 0; padding: 4px 8px; font-size: var(--fs-sm); }
.mu-table td.mu-id .mu-form { flex-wrap: nowrap; }
.mu-table .mu-form button { flex: 0 0 auto; white-space: nowrap; }
@media (pointer: coarse) {
  .mu-table .mu-form input[type="text"] { min-height: 40px; }
}
/* 自動巡回する会社サイト（admin/crawl_sites.html）の操作セル: フォームごとに1行（ボタンは折り返さず横に並べる）。
   採用ページURLの入力欄はセル幅いっぱいの小さい欄にし、設定ボタンはその下に置く */
.cs-actions { min-width: 220px; }
.cs-actions .cs-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); margin: 0; }
.cs-actions .cs-form + .cs-form { margin-top: var(--sp-2); }
.cs-actions .cs-form button { flex: 0 0 auto; white-space: nowrap; }
.cs-actions .cs-form input[type="url"] { flex: 1 1 100%; min-width: 0; min-height: 0; padding: 4px 8px; font-size: var(--fs-sm); }
@media (pointer: coarse) {
  .cs-actions .cs-form input[type="url"] { min-height: 40px; }
}
.admin-page tr.row-stop > td { background: var(--c-danger-soft); }
.admin-page tr.row-warn > td { background: var(--c-warn-soft); }
.admin-note { margin: var(--sp-3) 0 0; padding: var(--sp-3); border-radius: var(--radius-sm);
              background: var(--c-surface-soft); font-size: var(--fs-sm); }

/* サポート窓口（AI ヘルプチャット・design.md §5.37・計画 #2395）
   右端中央の縦タブ .hc-fab と右下のパネル .hc-panel。JS が動くときだけ出す（help-chat.js が hidden を外す）。
   パネルは面全体の padding を持たない（見出し帯・ログ・入力欄がそれぞれ持つ）。
   ログの縦スクロールは会話の性質上の例外（§9）。 */
.hc-fab {
  position: fixed;
  z-index: var(--z-chat);
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: .1em;
  padding: 18px calc(12px + env(safe-area-inset-right, 0px)) 18px 12px;
  border: 1px solid var(--c-line-strong);
  border-right: 0;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  background: var(--c-surface);
  color: var(--c-ink);
  font-size: var(--fs-base);
  font-weight: 700;
  box-shadow: var(--shadow-float);
  white-space: nowrap;
  cursor: pointer;
}
.hc-fab:is(:hover, :active) { background: var(--c-surface-soft); }
.hc-fab svg { color: var(--c-accent); }
.hc-fab[hidden], .hc-panel[hidden] { display: none; }

.hc-panel {
  position: fixed;
  z-index: var(--z-chat);
  right: calc(16px + env(safe-area-inset-right, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  width: 380px;
  height: min(640px, calc(100vh - 96px));
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float);
  overflow: hidden;
}
.hc-head { display: flex; align-items: center; gap: 8px; padding: 12px 12px 12px 16px; background: var(--c-accent-strong); color: #fff; }
.hc-head h2 { margin: 0; display: flex; align-items: center; gap: 6px; color: #fff; font-size: var(--fs-base); font-weight: 700; }
.hc-head .hc-close { margin-left: auto; display: flex; padding: 6px; border: 0; border-radius: var(--radius-sm); background: none; color: #fff; cursor: pointer; }
.hc-head .hc-close:hover { background: rgba(255, 255, 255, .16); }
.hc-head .hc-close:focus-visible { outline-color: #fff; }
.hc-notice { margin: 0; padding: 8px 16px; background: var(--c-surface-soft); border-bottom: 1px solid var(--c-line); color: var(--c-sub); font-size: var(--fs-xs); line-height: 1.6; }
.hc-log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.hc-empty { color: var(--c-sub); font-size: var(--fs-sm); }
.hc-empty p { margin: 0 0 10px; }
.hc-examples { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.hc-examples button { padding: 6px 12px; border: 1px solid var(--c-line); border-radius: var(--radius-full); background: var(--c-surface); color: var(--c-ink); font-size: var(--fs-sm); text-align: left; cursor: pointer; }
.hc-examples button:hover { border-color: var(--c-accent); color: var(--c-accent-strong); background: var(--c-surface); }
.hc-q { align-self: flex-end; max-width: 85%; margin: 0; padding: 8px 12px; border-radius: var(--radius-lg) var(--radius-lg) 4px var(--radius-lg); background: var(--c-accent-soft); font-size: var(--fs-base); line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.hc-a { align-self: stretch; font-size: var(--fs-base); line-height: 1.75; }
.hc-a p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.hc-a.is-refused p { color: var(--c-sub); }
.hc-links { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.hc-links a { display: inline-flex; align-items: center; gap: 4px; color: var(--c-accent-strong); font-size: var(--fs-sm); font-weight: 600; text-decoration: none; }
.hc-links a:hover { text-decoration: underline; }
.hc-search { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--c-line); }
.hc-a .hc-search-h { color: var(--c-sub); font-size: var(--fs-sm); line-height: 1.6; }
.hc-wait { display: flex; align-items: center; gap: 8px; color: var(--c-sub); font-size: var(--fs-sm); }
.hc-dots { display: inline-flex; gap: 4px; }
.hc-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--c-line-strong); animation: hc-blink 1.2s infinite both; }
.hc-dots i:nth-child(2) { animation-delay: .2s; }
.hc-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes hc-blink { 0%, 80%, 100% { background: var(--c-line-strong); } 40% { background: var(--c-sub); } }
@media (prefers-reduced-motion: reduce) { .hc-dots i { animation: none; } }
.hc-alert { margin: 0; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--c-warn-soft); color: var(--c-ink); font-size: var(--fs-sm); line-height: 1.6; }
.hc-alert a { color: var(--c-accent-strong); font-weight: 600; }
/* 社名ピル・会社メニュー（計画 #2670）。強調色にせず白抜きの通常色。1社は span・複数社は button＋▼メニュー */
.hc-head .hc-co { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 2px 10px; border: 1px solid rgba(255, 255, 255, .85); border-radius: var(--radius-full); color: #fff; font-size: var(--fs-xs); font-weight: 600; line-height: 1.5; }
.hc-head .hc-co[hidden] { display: none; }
.hc-head button.hc-co { display: inline-flex; align-items: center; gap: 4px; background: none; cursor: pointer; min-height: 0; }
.hc-head button.hc-co:hover, .hc-head button.hc-co[aria-expanded="true"] { background: rgba(255, 255, 255, .18); }
.hc-head button.hc-co:focus-visible { outline-color: #fff; }
.hc-head .hc-co-plan { margin-left: 6px; font-weight: 400; opacity: .9; }
.hc-head .hc-co-plan::before { content: "・"; }
.hc-co-menu { position: absolute; top: 50px; left: 12px; right: 12px; z-index: 5; margin: 0; padding: 6px; border: 1px solid var(--c-line-strong); border-radius: var(--radius-md); background: var(--c-surface); box-shadow: var(--shadow-float); list-style: none; }
.hc-co-menu[hidden] { display: none; }
.hc-co-menu .lbl { padding: 6px 10px 4px; color: var(--c-sub); font-size: var(--fs-xs); font-weight: 600; }
.hc-co-menu button { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; padding: 0 10px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--c-ink); font-size: var(--fs-sm); text-align: left; cursor: pointer; }
.hc-co-menu button:hover, .hc-co-menu button[aria-checked="true"] { background: var(--c-accent-soft); }
.hc-co-menu .ck { display: inline-flex; width: 16px; color: var(--c-accent-strong); }
.hc-co-menu .pl { margin-left: auto; padding: 1px 8px; border-radius: var(--radius-full); background: var(--c-accent-soft); color: var(--c-accent-strong); font-size: var(--fs-xs); font-weight: 600; }
.hc-co-menu .pl.is-free { background: var(--c-info-soft); color: var(--c-sub); }
.hc-co-menu .note { margin: 4px 0 0; padding: 8px 10px 4px; border-top: 1px solid var(--c-line); color: var(--c-sub); font-size: var(--fs-xs); line-height: 1.6; }
.hc-co-pick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.hc-co-pick button { min-height: 36px; padding: 0 14px; border-radius: var(--radius-full); font-size: var(--fs-sm); }
.hc-a .hc-up { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--c-line); color: var(--c-sub); font-size: var(--fs-sm); line-height: 1.6; }
.hc-up a { margin-left: 4px; color: var(--c-accent-strong); font-weight: 600; }
/* 変更案カード（計画 #2670）。会話欄の中の淡い面。いま／変更後・照合結果・反映する／やめる */
.hc-prop { margin-top: 10px; padding: 12px; border: 1px solid var(--c-line); border-radius: var(--radius-md); background: var(--c-surface-soft); }
.hc-prop.is-done { border-color: var(--c-accent); }
.hc-prop-head { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); line-height: 1.5; }
.hc-prop-tag { flex: 0 0 auto; padding: 1px 8px; border-radius: var(--radius-full); background: var(--c-accent-soft); color: var(--c-accent-strong); font-size: var(--fs-xs); font-weight: 600; }
.hc-prop-done { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; color: var(--c-accent-strong); font-weight: 700; }
.hc-prop-target { min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.hc-prop-target span { color: var(--c-sub); font-weight: 400; }
.hc-prop-body { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.hc-a .hc-prop-lbl { color: var(--c-sub); font-size: var(--fs-xs); font-weight: 600; line-height: 1.5; }
.hc-a .hc-prop-old { color: var(--c-sub); font-size: var(--fs-sm); line-height: 1.7; text-decoration: line-through; text-decoration-color: var(--c-line-strong); }
.hc-a .hc-prop-new { padding: 6px 10px; border-left: 3px solid var(--c-accent); background: var(--c-surface); font-size: var(--fs-sm); line-height: 1.7; }
.hc-prop-new mark { background: var(--c-danger-soft); color: var(--c-danger); font-weight: 600; }
.hc-a .hc-prop-check { display: flex; align-items: flex-start; gap: 6px; color: var(--c-accent-strong); font-size: var(--fs-xs); line-height: 1.6; }
.hc-prop-check svg { flex: 0 0 auto; margin-top: 2px; }
.hc-a .hc-prop-check.is-ng { color: var(--c-danger); }
.hc-prop-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.hc-prop-foot button { padding: 6px 14px; font-size: var(--fs-sm); }
.hc-prop-foot button:disabled { background: var(--c-line-strong); border-color: var(--c-line-strong); color: #fff; cursor: default; }
.hc-prop-foot small { flex-basis: 100%; color: var(--c-sub); font-size: var(--fs-xs); line-height: 1.6; }
.hc-prop-done-links { display: flex; align-items: center; gap: 16px; margin-top: 10px; font-size: var(--fs-sm); }
.hc-prop-done-links a { display: inline-flex; align-items: center; gap: 4px; color: var(--c-accent-strong); font-weight: 600; text-decoration: none; }
.hc-prop-done-links a:hover { text-decoration: underline; }
.hc-prop-done-links button.link { padding: 0; border: 0; background: none; color: var(--c-sub); font-size: var(--fs-sm); text-decoration: underline; cursor: pointer; }
.hc-prop-reverted { color: var(--c-sub); }
.hc-prop-note { display: block; margin-top: 8px; color: var(--c-sub); font-size: var(--fs-sm); }
.hc-prop .hc-alert { margin-top: 10px; }
/* 文以外の変更（計画 #2678）: 行ごとの「変更前 → 変更後」（公開の状態・電話番号・Webサイト）と原料・成分のチップ */
.hc-prop-row { display: flex; flex-direction: column; gap: 2px; }
.hc-prop-row-lbl { color: var(--c-sub); font-size: var(--fs-xs); font-weight: 600; line-height: 1.5; }
.hc-prop-row-val { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: var(--fs-sm); line-height: 1.7; overflow-wrap: anywhere; }
.hc-prop-was { color: var(--c-sub); text-decoration-color: var(--c-line-strong); }
.hc-prop-arrow { color: var(--c-sub); }
.hc-prop-now { font-weight: 600; }
.hc-prop-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hc-chip { padding: 1px 10px; border: 1px solid var(--c-line); border-radius: var(--radius-full); background: var(--c-surface); font-size: var(--fs-xs); line-height: 1.7; }
.hc-chip.is-add { border-color: transparent; background: var(--c-accent-soft); color: var(--c-accent-strong); font-weight: 600; }
.hc-chip.is-add::before { content: "＋"; }
.hc-chip.is-remove { color: var(--c-sub); text-decoration: line-through; text-decoration-color: var(--c-line-strong); }
.hc-chip.is-remove::before { content: "−"; display: inline-block; text-decoration: none; }
.hc-form { padding: 12px 12px 10px; border-top: 1px solid var(--c-line); }
.hc-row { display: flex; align-items: flex-end; gap: 8px; }
.hc-form textarea { flex: 1; min-height: 44px; max-height: 120px; padding: 9px 12px; resize: none; font-size: var(--fs-input); line-height: 1.5; }
.hc-form button.hc-send { flex: 0 0 auto; width: 44px; height: 44px; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-full); }
.hc-form button.hc-send:disabled { background: var(--c-line-strong); border-color: var(--c-line-strong); cursor: default; }
.hc-meta { display: flex; justify-content: space-between; margin-top: 6px; color: var(--c-sub); font-size: var(--fs-xs); }
.hc-meta a { color: var(--c-sub); }
@media (max-width: 640px) {
  .hc-panel { top: 0; right: 0; bottom: 0; left: 0; width: auto; height: auto; border: 0; border-radius: 0; }
}

/* ファイルから製品を追加（計画 #2491）。白い面は .card を使い、ここでは並びだけを決める */
.view-tab.is-disabled { color: var(--c-sub); opacity: .6; cursor: not-allowed; }
.aid-sum { margin: var(--sp-3) 0; }
.aid-list { display: grid; gap: var(--sp-3); margin-top: var(--sp-3); }
.aid-card.is-done { opacity: .7; }
.aid-ttl { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-size: var(--fs-base); margin: 0; }
.aid-grid { display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-1) var(--sp-3); margin: var(--sp-2) 0 0; }
.aid-grid dt { color: var(--c-sub); }
.aid-grid dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.aid-ings { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.aid-ing { padding: 0 var(--sp-2); border: 1px solid var(--c-line); border-radius: 999px; }
.aid-ing.new { border-style: dashed; color: var(--c-warn); }
.aid-src { margin-top: var(--sp-2); font-size: var(--fs-xs); }
.aid-note { margin-top: var(--sp-2); color: var(--c-warn); }
.aid-acts, .aid-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-top: var(--sp-3); }
.aid-acts form { margin: 0; }
@media (max-width: 640px) { .aid-grid { grid-template-columns: 1fr; } }

/* メール通知ページ（/dashboard/{id}/mail。計画 #2561）の送り先の表。白い面は .card */
.mn-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr)) 4em;
  gap: var(--sp-2) var(--sp-3);
  align-items: center;
}
.mn-head {
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--c-line);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--c-ink);
}
.mn-head small {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--c-sub);
}
.mn-row {
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--c-line);
}
.mn-addr { overflow-wrap: anywhere; font-size: var(--fs-sm); }
.mn-sub { display: block; font-size: var(--fs-xs); color: var(--c-sub); }
.mn-del button { white-space: nowrap; }
.mn-row select, .mn-row input { width: 100%; }
.mn-cell-label { display: none; }
.mn-add { margin-top: var(--sp-4); }
@media (max-width: 640px) {
  .mn-head { display: none; }
  .mn-grid.mn-row { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
  .mn-cell { display: grid; grid-template-columns: 9em minmax(0, 1fr); align-items: center; gap: var(--sp-2); }
  .mn-cell-label { display: block; font-size: var(--fs-sm); color: var(--c-sub-strong); }
  .mn-del { justify-self: start; }
}
/* 会社管理の求人一覧（account/jobs.html）: OEM事例の表（.case-table）に操作列を足した型。
   表は table-layout: fixed なので操作列はボタン2つ（申請・終了＋複製）、掲載期限の列は日付＋延長ボタンが1行に収まる幅を固定で取る */
.job-table { min-width: 48em; }
.job-table td { vertical-align: top; }
.job-table .col-date { width: 14em; }
.job-table .col-ops { width: 9.5em; white-space: nowrap; }
.job-table .col-ops form, .job-table .col-date form { display: inline; margin: 0; }
.job-table .col-ops button { margin: 0 4px 4px 0; }
.job-table .col-date form { margin-left: 6px; }
.job-table .job-note { font-size: var(--fs-xs); font-weight: 400; color: var(--c-sub-strong); margin-top: 2px; white-space: normal; }

/* トレンドウォッチ トップの長期の層（計画 #2643 項目11〜18）。白い面は .card を使い、ここでは面を作らない */
.tw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.tw-grid-cell { min-width: 0; }
.tw-grid-axis { display: flex; justify-content: space-between; font-size: 10px; }
.tw-lown { color: var(--c-sub); }
.tw-changed { box-shadow: inset 0 0 0 1px var(--c-accent); }
.tw-succession td { font-size: 12px; white-space: nowrap; vertical-align: top; }
.tw-headlines ul { margin: 0; padding-left: 1.2em; }
.tw-newfaces { padding-left: 1.2em; }

/* マイページ「お気に入りの更新」の概要（account/_feed_table.html の update_table）。2行で切る。 */
.feed-sum { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
            margin: 4px 0 0; color: var(--c-sub); font-size: var(--fs-sm); }