/* ==========================================================================
   Design Tokens（Step 1・2026-08-27）

   🔴 値は参考画像9枚から**画素で実測**した。目分量では置いていない。
      Accent   #2A5CDC  hue 223 / L 0.51 / S 0.72（8枚で最頻・完全に一致）
      Hero地   #F6F8FD  hue 223 / L 0.978
      面の境   #EDEFF3  L 0.941
      準備中   文字 #C19141 ／ 下地 #FDF4E0（hue 41）
      設計済み 文字 #29913C ／ 下地 #E8F5EA（hue 129〜131）

   🔴 共通仕様 §11 の --bcs-accent:#1B5E7A（青緑）は**使わない**。
      画像は青系で、あとから出たイメージのほうが新しい（横断チェック判定）。

   🔴 Chip の色は「状態」を表すもので、Accent とは別系統。混ぜない。
   🔴 イラストは使わない（オーナー指示）。アイコンのみ。
   ========================================================================== */
/* 🔴 box-sizing を先に決める。テーマ側の既定に頼らない。
   2026-08-26 に**同じ罠を2回踏んだ**:
     下部ナビ  min-height:48 + padding 10 → 58
     いま進めていること  min-height:44 + padding 22 → 66（1行あたり20px の水増し）
   content-box では min-height は**中身だけ**の下限なので、padding のぶん必ず背が伸びる。
   「高さを 44 に揃えたつもりが、揃っていない」が起きる。 */
.bcp, .bcp *, .bcp *::before, .bcp *::after{ box-sizing:border-box; }

/* 🔴🔴 [hidden] は **display の指定に負ける**。これで同じ事故を5回起こした
   （.bcp-side / .bcp-topbar / .bcp-bottom / .bcp-fold-b / .bcp-form）。
   直近は .bcp-form{display:flex} が [hidden] を打ち消し、
   未展開の設問に「回答する」が2つ出ていた（オーナー指摘 2026-08-27）。
   🔴 1つずつ後追いで塞ぐのをやめる。**この配下は例外なく消す**。
      個別の `[hidden]{display:none !important}` は残してよい（同じ結論なので害はない）。 */
.bcp [hidden]{ display:none !important; }

.bcp{
  /* 面 */
  --bcs-bg:              #F7F8FA;
  --bcs-surface:         #FFFFFF;
  --bcs-surface-subtle:  #F2F4F7;
  --bcs-surface-accent:  #F6F8FD;   /* Hero の淡い青地（実測） */

  /* 文字 */
  --bcs-text:            #172026;
  /* 🔴🔴 2026-08-29 オーナー指摘「上部の文字が薄すぎる。上質＝薄いグレーにしないで」。
     白地に対して #8B90A0 は約3.0:1、#A6ABB8 は約2.4:1 で、本文として読める値ではない。
     階層差（本文 > 補助 > 注記）は残したまま、下限を上げる。
     🔴 この2つは画面全体が読んでいるので、ここを直せば全画面が同時に良くなる。
        cx- や up- の側に濃い色を書き足すと、色の正本が2つになる。 */
  --bcs-text-secondary:  #5C6371;   /* 白地に 6.0:1 */
  /* 🔴🔴 2026-08-30。#767D8B は白地に **4.14:1** で、通常の文字の基準（4.5:1）を
     下回っていた。コメントに「4.1:1」と書いたまま使い続けていた＝**分かっていて放置**。
     🔴 白地 4.90:1 / 薄い面(#F7F8FA) 4.61:1 の色にする。どちらの上でも通る。
     🔴 「注記・単位のみだから薄くてよい」は成り立たない。読ませる文字は全部同じ基準。 */
  --bcs-text-tertiary:   #6A7180;   /* 白地に 4.9:1 ／ 薄い面に 4.6:1 */

  /* 境 ── 線というより面の切れ目 */
  --bcs-border:          #EDEFF3;
  --bcs-border-strong:   #DCE0E8;

  /* Accent
     🔴 2026-08-29 オーナー「同じサービスというようなUI/UXを目指して」。
        それまで #2A5CDC（紫寄りの青）で、公開サイトの #1F5E92 と**別の青**だった。
        公開サイトからマイページへ来た人に、別のサービスに見える。
        🔴 公開サイトのトークン（tokens.css --blue-btn / --blue）と同じ値にする。
        🔴 値をここに直書きしているのは、この画面が tokens.css を先に読むため。
           片方だけ変わらないよう、両方に同じ値を書いていることを明記しておく。 */
  /* 🔴 2026-08-29: マイページの本文が OS 標準、ボタンが **Arial** に落ちていた（実測）。
     Arial は日本語を持たないので、環境ごとに別の書体へ流れる＝同じサービスに見えない。
     🔴 公開サイトの --font-head と同じ並びにする（Noto Sans JP を先頭に）。
     🔴 ここで上書きしているのは、この画面が tokens.css より後に読まれるため。 */
  --font-sans: "Noto Sans JP", -apple-system, BlinkMacSystemFont,
               "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  --font-head: "Noto Sans JP", -apple-system,
               "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;

  --bcs-accent:          #1F5E92;   /* = tokens.css --blue-btn */
  --bcs-accent-hover:    #17496F;
  --bcs-accent-soft:     #F1F6FA;

  /* 状態 ── 🔴 Accent と別系統。良し悪しを表す */
  /* 🔴 2026-08-30 横断検査で発覚: #C19141 は白地に約3.0:1 で、文字として読める値ではない。
     期限や注意の文字に使っていたので、いちばん読ませたいものが読みにくかった。
     色味（hue 41）は変えずに、明度だけ落とす。#8A6100 は白地に約5.4:1。 */
  --bcs-wait:            #8A6100;   /* 準備中・整備中 */
  --bcs-wait-soft:       #FDF4E0;
  --bcs-ok:              #29913C;   /* 設計済み・順調 */
  --bcs-ok-soft:         #E8F5EA;
  --bcs-attention:       #B42318;   /* 要確認 */
  --bcs-attention-soft:  #FEF3F2;

  /* 角 */
  --bcs-radius-sm: 8px;
  --bcs-radius-md: 12px;
  --bcs-radius-lg: 16px;
  --bcs-radius-xl: 24px;

  /* 余白（8px系） */
  --bcs-s1: 4px;  --bcs-s2: 8px;  --bcs-s3: 12px; --bcs-s4: 16px;
  --bcs-s5: 24px; --bcs-s6: 32px; --bcs-s7: 40px; --bcs-s8: 56px;

  /* 🔴 Web Font は追加しない（共通仕様 §15）。既存の指定をそのまま使う */
}

/* ============================================================================
   クライアントマイページ（/client/）の器
   ----------------------------------------------------------------------------
   仕様: docs/SPEC-client-mypage.md §4（ナビゲーション）§20（デザイン）§24（レスポンシブ）

   🔴 ここはBCSサイト本体とは別レイアウト。ただし**色・書体・radius・shadowは
      tokens.css のものだけを使う**（新しい値を作らない）。増やしたのは幅2つだけで、
      理由は tokens.css 側にコメントで残した。

   🔴 案件ごとにUI全体をブランドカラー化しない。これはクライアントのサイトではなく
      BLOOM CONSULTING の製品なので、白い器を共通で維持する（§20）。

   🔴 --faint は装飾専用。本文・ラベルに使わない（白地 2.37 で AA 未達）。
   ============================================================================ */

/* ---------- スキップリンク ---------- */
/* 🔴 キーボードだけで読む人が、Sidebarを何度もTabせずに本文へ入れるようにする。
   BCSサイト本体と同じく最初のTab先に置く（a11y監査で「全6ページで正常」と確認済みの型）。
   普段は隠すが **display:none にしない**（フォーカスできなくなる）。 */
.bcp-skip{
  position:absolute; left:8px; top:-48px; z-index:60;
  padding:10px 14px; border-radius:var(--r-sm);
  background:var(--paper); color:var(--blue);
  font-size:14px; font-weight:600; text-decoration:none;
  border:1px solid var(--line);
  transition:top .15s;
}
.bcp-skip:focus{top:8px; outline:2px solid var(--blue); outline-offset:2px}

/* 読み込み中の1行。中身が来るまでの place holder */
.bcp-loading{margin:0; color:var(--muted); font-size:var(--t-body)}

/* ---------- 全体の骨格 ---------- */
.bcp{
  /* 🔴 body の既定マージン8pxが効いていて、ページ余白が14+8=22になっていた。
     実測は14。ここを0にして、余白は .bcp-main の padding だけで決める。 */
  margin:0;
  min-height:100dvh;
  /* 🔴 2026-09-01 オーナー指示「背景の水色をやめ、白ベースの洗練・清潔感」。
     地の水色は tokens の --surface-2:#F8FAFC（青み）だった。tokens.css はサイト本体の
     色の唯一の正本なので触らず、ポータル内だけ .bcp スコープで中立オフホワイトに再定義する。
     白カード(#FFF)との間に、青みの無いごく淡い段差だけ残す（枠線#ECECEC＋淡い影は既存）。 */
  --surface-2:#FFFFFF;
  background:var(--surface-2);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:var(--t-body);
}

/* Desktop: 左Sidebar ＋ メイン。メインは無制限に広げない（§4） */
.bcp-shell{display:block}

@media (min-width:1024px){
  .bcp-shell{
    display:grid;
    grid-template-columns:var(--portal-side) minmax(0,1fr);
    align-items:start;
  }
}

/* ---------- Sidebar ---------- */
.bcp-side{
  display:none;
  position:sticky; top:0;
  height:100dvh;
  padding:24px 16px;
  background:var(--paper);
  border-right:1px solid var(--line);
  /* 🔴🔴 2026-09-12 オーナー指摘「レイヤーバグ」（案件の切り替え一覧の右側が、本文の計測状況の
     タイルに隠れた）。
     原因: この帯は position:sticky なので**自分の重なりの箱**を作る。中の一覧の z-index:80 は
     その箱の中でしか効かず、箱そのものは z-index が無い（＝0）。本文側で後から
     position:relative を持った要素（計測状況のタイル・節の見出し）は DOM で後ろに在るので、
     箱ごと上に描かれた。
     🔴 帯に z-index を持たせ、本文より上・モーダル（80）と下部ナビ（40）の間に置く。 */
  z-index:45;
  /* 🔴🔴 2026-09-10 オーナー指摘「ドロップメニュが切れてる」。
     ここに overflow-y:auto を置いていたのが原因。
     **片方の軸を auto にすると、もう片方の visible も auto として扱われる**（CSS の決まり）。
     ＝ 帯が横方向にも刈り取る箱になり、案件を切り替える一覧が右端で切られていた。
     z-index を上げても直らない（刈り取りは重なり順の問題ではない）。
     🔴 巻物にするのは**下の項目だけ**。切り替えの一覧は刈り取る箱の外に置く。 */
  overflow:visible;
  /* 🔴🔴 2026-09-11 ここに `display:flex` を書いていた。**同じ規則の中で後から当たるので、
     上の `display:none` を打ち消していた**。＝ 1024px 未満（スマートフォン）でも帯が出て、
     画面の全幅を占め、本文が右へ押し出されて**1文字も見えていなかった**。
     帯を出すのは下の `@media (min-width:1024px)` だけ。ここでは向きだけ決める
     （flex でないときは効かないので、書いてあっても害が無い）。 */
  flex-direction:column;
}
/* 🔴 min-height:0 が要る。flex の子は既定で中身より縮まないので、
   付けないと巻物が帯より高くなり、はみ出した先でまた切られる。 */
.bcp-side-scroll{flex:1 1 auto; min-height:0; overflow-y:auto; margin:0 -16px; padding:0 16px}
/* 🔴 2026-09-10 display:block → flex（上の .bcp-side で flex を使うため）。
   [hidden] が効かない件（2026-08-26）はそのまま: 詳細度で負けるので JS 側で外す。 */
@media (min-width:1024px){ .bcp-side{display:flex} }
/* 🔴 [hidden] は UA スタイルの display:none だが、上の .bcp-side{display:block} が
   同じ詳細度(0,1,0)で後から当たるため負ける。結果、ログイン画面に空の264pxの
   白い柱が立っていた（本番実測 2026-08-26）。属性が付いているのに効かない、は
   「あるように見えて無い」の一種なので、明示的に打ち消す。 */
.bcp-side[hidden]{display:none !important}
/* 🔴 サイドバーを display:none にすると、グリッドから外れて main が唯一の子になり、
   自動配置で**1列目（264px）に入る**。2列目の 1160px は空いたまま残り、
   1440px の画面で本文が200pxに潰れていた（実測 2026-08-26）。
   「空の柱を消したら、本文がその柱の中に入った」形。
   サイドバーが無いときは、main に全列を使わせる。 */
.bcp-side[hidden] + .bcp-main{grid-column:1 / -1}

.bcp-brand{
  font-family:var(--font-head);
  font-size:13px; font-weight:600; letter-spacing:.06em;
  color:var(--ink-soft);
  /* 🔴 2026-09-11 実測（別の席）: 231×19。これは押せるので、指で押せる高さが要る。
     🔴 上に生えた分だけ margin を引いて、見た目の位置は変えない
        （器を大きくすると下が押し下がる。ここは画面のいちばん上なので目立つ）。 */
  display:inline-flex; align-items:center; min-height:44px;
  margin:-12px 0 4px; padding:0 8px;
}

/* 案件切替 */
/* 🔴 切替メニューの基準。ボタンを包んで、`top:100%` が「ボタンの下」になるようにする。
   包む前は基準がサイドバー（高さ100dvh）で、メニューが画面の外に出ていた。 */
.bcp-switch-w{position:relative; margin:0 0 24px}
.bcp-switch{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  /* 🔴 2026-09-11 実測（別の席）: 231×42。2px 足りない。 */
  width:100%; margin:0; min-height:44px; padding:10px 12px;
  /* 🔴 2026-09-01 白ベース化: 淡青の塗り(#F6F8FD)をやめ、白＋罫線でカードと同じトーンに揃える。 */
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r);
  font-family:var(--font-head); font-size:14px; font-weight:600;
  color:var(--ink); text-align:left; cursor:pointer;
}
.bcp-switch-n{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* 押せることの印。🔴 モバイル上部バーの切替と同じ形にする（同じ役目のものを別の形にしない）。 */
.bcp-switch-c{flex:none; display:flex; color:var(--bcs-text-secondary)}
.bcp-switch:hover{background:var(--bcs-accent-soft)}
.bcp-switch:hover .bcp-switch-c{color:var(--bcs-accent)}
.bcp-switch:focus-visible{outline:2px solid var(--blue); outline-offset:2px}

/* 層のグループ。🔴 見出しは案件ごとの自然な日本語。内部の層名(COMMON/INDUSTRY等)を出さない（§4） */
.bcp-group{margin:0 0 20px}
.bcp-group-h{
  margin:0 0 6px; padding:0 12px;
  font-family:var(--font-head); font-size:12px; font-weight:600;
  letter-spacing:.08em; color:var(--muted);
}
.bcp-nav{list-style:none; margin:0; padding:0}
.bcp-nav a{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:9px 12px; border-radius:var(--r-sm);
  color:var(--ink-soft); text-decoration:none; font-size:14px;
}
.bcp-nav a:hover{background:var(--blue-pale); color:var(--ink)}
.bcp-nav a:focus-visible{outline:2px solid var(--blue); outline-offset:-2px}
.bcp-nav a[aria-current="page"]{background:var(--blue-soft); color:var(--ink); font-weight:600}

/* 未対応の件数。0のときは出さない（呼び出し側で制御） */
.bcp-badge{
  min-width:20px; padding:1px 6px; border-radius:999px;
  background:var(--blue-btn); color:#fff;
  font-size:12px; font-weight:600; text-align:center;
  font-variant-numeric:tabular-nums;
}

/* FOCUS モジュール（v4 §14）。段階は帯（%）にしない ── 印と名前だけ。 */
.bcp-fm-st{list-style:none;display:flex;flex-wrap:wrap;gap:6px 14px;margin:10px 0 14px;padding:0}
.bcp-fm-s{display:flex;align-items:baseline;gap:4px;font-size:12.5px;color:var(--muted)}
.bcp-fm-s--done{color:var(--ink)}
.bcp-fm-s--doing{color:var(--blue-ink,#1E5A8C);font-weight:600}
.bcp-fm-mk{font-size:11px}
.bcp-fm-h{font-size:12.5px;font-weight:600;color:var(--muted);margin:12px 0 2px}
.bcp-fm-t{font-size:13.5px;line-height:1.95;margin:0}

/* ご契約の移り変わり（v4 §29c）。表にしない＝1 行 1 件で、月・出来事・金額の順に読ませる。 */
.bcp-ph{list-style:none; margin:10px 0 0; padding:0}
.bcp-ph-r{display:flex; flex-wrap:wrap; gap:4px 12px; align-items:baseline; padding:10px 0; border-top:1px solid var(--line-2)}
.bcp-ph-r:first-child{border-top:0}
.bcp-ph-ym{font-size:12.5px; color:var(--muted); font-variant-numeric:tabular-nums; min-width:11em}
.bcp-ph-t{font-size:13.5px; color:var(--ink)}
.bcp-ph-p{font-size:12.5px; color:var(--muted); font-variant-numeric:tabular-nums}
.bcp-ph-w{flex:1 1 100%; font-size:12px; color:var(--muted)}
@media (max-width:600px){ .bcp-ph-ym{min-width:0; flex:1 1 100%} }

/* 中立の印（新着）。🔴 v4 §28 ＋ 2026-09-18 の裁定: **お客様の手が要らないもの**はここで出す。
   目立つ印（.bcp-badge）と**色も形も変える**（背景を敷かない・線だけ・字は控えめ）。 */
.bcp-navnote{
  margin-left:6px; padding:0 6px; border-radius:999px;
  border:1px solid var(--line); background:transparent; color:var(--muted);
  font-size:11px; font-weight:500; line-height:16px; white-space:nowrap;
}

/* UTILITY は視覚的にメインと分ける（§3・§15） */
.bcp-util{margin-top:auto; padding-top:16px; border-top:1px solid var(--line)}

/* ---------- メイン ---------- */
/* 🔴 参考画像の実測: ページ左右余白 14.0（431.5幅）。
   20 で置いていたので、実機は28（両側）になり、見出しが折れていた。
   Desktop は本文幅で決まるので従来どおり。 */
/* 🔴 2026-08-29 オーナー指摘「モバイルでテキストが端に寄りすぎ」。
   本文の左右が 14px しかなく、カードを外した節（計測状況・進めていること等）は
   面が無いぶん、文字がそのまま画面の端に近づいていた。
   🔴 節ごとに余白を足さない ── 全部の画面が読む1箇所で上げる。 */
.bcp-main{min-width:0; padding:20px 20px 76px}
@media (min-width:1024px){ .bcp-main{padding:32px 32px 80px} }
.bcp-in{max-width:var(--portal-wrap); margin:0 auto}

/* ページ見出し。
   🔴 2026-08-27 オーナー指摘「見出しの下の線を普通にするか、もっとモダンに」。
      点＋短い罫（54px）を下に浮かせていたが、どこにも繋がらない飾りで、
      見出しと本文のあいだに**意味の無い一段**を作っていた。装飾をやめて、
      字そのもので見出しだと分かるようにする（字を大きく・太く・字間を締める）。 */
.bcp-title{
  font-family:var(--font-head);
  /* 🔴 2026-08-27 オーナー指示。線・背景・アイコンを使わず、字だけで見出しにする。 */
  font-size:clamp(28px,1.4vw + 22px,32px);
  font-weight:700; line-height:1.3; color:var(--bcs-text);
  letter-spacing:-.02em;
  margin:0 0 22px;
}

/* ---------- カード（白＋細い罫。基本はBorderで構成／§20） ---------- */
/* 🔴 カードは1つの部品（2026-08-27 オーナー指示）。
   角丸・枠・余白をカードごとに変えない。影は使わず、極薄の枠で分ける。 */
.bcp-card{
  background:#FFFFFF;
  border:1px solid #ECECEC;
  box-shadow:none;
  border-radius:16px;
  padding:20px;
  margin:0 0 14px;
}
@media (min-width:1024px){ .bcp-card{padding:24px} }
/* 🔴 ラベルが折り返した1枚だけ背が高くなり、上端もずれて見えていた（実測 2026-08-26:
   1枚目 top=106 h=147 / 2〜3枚目 top=122 h=131）。
   グリッドの既定 align-items:stretch は高さを揃えるが、**上端は行の配置**で決まる。
   行の高さを揃え、カード自身を伸ばす。 */
/* 🔴 このブロックの grid 指定と下の2つのメディアクエリは、
   332行目の `.bcp-cards{grid-template-columns:repeat(3,...)}` に**後勝ちで打ち消されている**
   （2026-08-26 実測: 390px でも 3列 116px×3）。3列は参考画像どおりで意図した形。
   ここを触っても画面は変わらない。直すときは332行目を見ること。 */
.bcp-cards{display:grid; gap:16px; align-items:stretch}
.bcp-cards > *{min-width:0}
@media (min-width:768px){ .bcp-cards{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* 🔴 1440px以上でも1行に6枚以上置かない（最大4／§24） */
@media (min-width:1200px){ .bcp-cards{grid-template-columns:repeat(3,minmax(0,1fr))} }

/* カードの中身 */
.bcp-card-k{margin:0 0 6px; font-size:13px; color:var(--muted)}
.bcp-card-note{margin:6px 0 0; font-size:13px; line-height:1.7; color:var(--muted)}

/* 🔴 「測れなかった」の表示。数字と同じ大きさにしない。
   0（実測）と見分けがつくよう、**文章として**出す。
   色だけで区別しない（--faint は 2.37 で AA 未達なので使わない）。 */
.bcp-card-un{margin:0; font-size:var(--t-body); line-height:1.7; color:var(--ink-soft)}

/* 案件カード（リンク） */
a.bcp-card{display:block; text-decoration:none; color:inherit}
a.bcp-card:hover{border-color:var(--ink)}
a.bcp-card:focus-visible{outline:2px solid var(--blue); outline-offset:2px}
.bcp-card-name{display:block; font-family:var(--font-head); font-size:17px; font-weight:600; color:var(--ink)}

/* ---------- 今月の見立て（BLOOMが書いた文章） ---------- */
/* 🔴 数字のカードと**別の見た目**にする。白カードではなく、淡い面と読ませる字送りで
   「これは読むもの」と分かる形にする。書いた値が測った値に見えないように。 */
/* 🔴 2026-08-26: 淡い青は **Hero の1枚だけ**（参考画像01）。
   ここも淡い青にしていたので、淡い青が2枚続いて、どちらが主役か読めなくなっていた。
   見立ては白いカードにする（他のカードと同じ扱い）。
   🔴 左線アクセントは全プロジェクトで禁止。 */
.bcp-insight{
  margin:0 0 var(--bcs-s4); padding:14px 24px;
  background:var(--bcs-surface);
  border-left:0;
  border:0;
  box-shadow:0 1px 2px rgba(23,32,38,.04), 0 1px 8px rgba(23,32,38,.03);
  border-radius:14px;
}
.bcp-insight-k{
  margin:0 0 10px; font-family:var(--font-head);
  /* 🔴 日本語の見出しに字間を足さない。 */
  font-size:13px; font-weight:700; letter-spacing:0; color:var(--bcs-text-secondary);
}
/* 🔴 2026-08-27 オーナー指示。日本語の本文に letter-spacing を足さない。
   line-height:2.0 は広すぎて、文章が間延びして見えていた。 */
.bcp-insight-b{
  margin:0 0 8px; font-size:16px; font-weight:400; line-height:1.68;
  letter-spacing:0; color:#2A2A2A;
}
.bcp-insight-b:last-of-type{margin-bottom:0}
/* 補足（日付・発信元）は本文より明確に弱く。 */
.bcp-insight-m{margin:14px 0 0; font-size:12.5px; font-weight:400; color:#8A8A8A}

/* ---------- お客様（Journey） ----------
   🔴 4枚のカードに見せない。**一続きの流れ**にする。
      Desktop は横、Mobile は縦（§10）。漏斗型にはしない（面積差で誤解が起きる）。 */
.bcp-period{margin:0 0 18px; font-size:13px; color:var(--muted)}

/* 🔴 段はカードにしない（2026-08-26）。カードにすると、未測定のときに
   中身の無い枠が縦に積み上がって、5秒で何も分からない画面になる。
   全体で1枚のカード、中は横1列の帯。 */
.bcp-journey{margin:0 0 var(--bcs-s4)}
.bcp-journey-n{margin:0 0 16px; font-size:13px; color:var(--bcs-text-secondary); line-height:1.7}
.bcp-flow{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; align-items:stretch; gap:0;
}
.bcp-step{
  min-width:0; padding:10px 0; text-align:left;
  background:transparent; border:0; border-radius:0; box-shadow:none;
  border-top:1px solid var(--bcs-border);
}
.bcp-step:first-child{border-top:0; padding-top:0}
/* その数字が何を数えたものか。🔴 出さないと「145件予約された」と読まれる。 */
.bcp-step-sub{margin:0 0 4px; font-size:12px; line-height:1.5; color:var(--bcs-text-tertiary)}

/* 全段が未測定のときだけ、横1列の帯にする（読むものが無いので場所を取らせない） */
.bcp-flow--compact{flex-direction:row}
.bcp-flow--compact .bcp-step{
  flex:1 1 0; padding:0 2px; text-align:center; border-top:0;
}
.bcp-step-l{margin:0 0 4px; font-size:12px; color:var(--muted); line-height:1.35}
/* 実測値。🔴 桁が揃うように tabular。 */
.bcp-step-v{
  margin:0; font-family:var(--font-head); font-size:22px; font-weight:600;
  color:var(--ink); font-variant-numeric:tabular-nums; line-height:1.2;
}
.bcp-step-u{margin-left:4px; font-size:14px; font-weight:400; color:var(--muted)}
/* 🔴 未測定は「0」に見えてはいけない。数字と同じ大きさ・同じ色にしない。 */
.bcp-step-x{margin:0; font-size:18px; color:var(--bcs-text-tertiary); line-height:1.2}
.bcp-step-n{margin:6px 0 0; font-size:13px; color:var(--muted); line-height:1.7}
/* 🔴 ここにあった 2つ目の .bcp-journey-n は削除（2026-08-26）。
   理由の文を段の**上**へ移したのに、下向きの余白を持つ古いルール
   （margin:12px 0 0）が後ろに残っていて、**後勝ちで margin-bottom を 0 に戻していた**。
   結果、理由の2行目に段の帯が接していた。定義は278行目の1つだけ。 */
.bcp-step-c{margin:6px 0 0; font-size:13px; color:var(--ink-soft); font-variant-numeric:tabular-nums}

/* 段と段のあいだ。数字ではなく**通り道**なので、段より弱く見せる。 */
/* 縦のときは段のあいだに1行として入る。横のときだけ中央寄せの細い列。 */

@media (min-width:900px){
  .bcp-step-l{font-size:14px}
}

/* 成立したご予約。🔴 4段と同じ見た目にしない（数え方も期間の意味も違う）。 */
.bcp-bk-v{margin:6px 0 0; display:flex; align-items:baseline; gap:2px; flex-wrap:wrap}
.bcp-bk-n, .bcp-bk-n2{
  font-family:var(--font-head); font-size:26px; font-weight:600; color:var(--bcs-text);
  font-variant-numeric:tabular-nums; line-height:1.15;
}
.bcp-bk-n2{margin-left:10px}
.bcp-bk-u{font-size:13px; font-weight:600; color:var(--bcs-text-secondary)}

/* 目には出さず、読み上げにだけ渡す。
   🔴 display:none にしない（読み上げからも消える）。 */
.bcp-sr{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

/* ---------- 状況の3枚 / その他 / 見出しの罫（Step 3） ----------
   🔴 参考画像 01 の実測: 3枚の隙間 7 / ページ余白 14 / カード幅 約131
   🔴 巨大な数字だけにしない。アイコン・ラベル・注記を添える。 */
/* 🔴 高さは px で揃えない（共通仕様 A2）。
   grid の1行に置けば、いちばん高い子に他が自然に揃う。
   これは「固定高さ」ではないので、中身が増えてもあふれない。 */
.bcp-cards{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px; margin:0 0 28px;
  align-items:stretch;   /* 既定だが、意図として明示する */
}
.bcp-sum{
  display:flex; flex-direction:column; align-items:center;
  background:var(--bcs-surface);
  /* 🔴 2026-09-01 地を純白にしたため、影だけだと縁が消える。標準カードと同じ罫線で縁を担保（横断チェック条件②）。 */
  border:1px solid #ECECEC; border-radius:14px;
  box-shadow:0 1px 2px rgba(23,32,38,.04), 0 1px 8px rgba(23,32,38,.03);
/* 🔴 2026-08-27: ここを 14px→11px に縮めたのは**誤り**。
   横断チェックから「参考は高さ≒84」と来たので合わせたが、参考画像を画素で測ると
   3枚カードは **154css**（内容幅805image px = 403css → 1css=2.00image px で確定）。
   縮める前の実装は 156css で、ほぼ一致していた。**他人の測定値で実装を動かした。**
   戻す。 */
  padding:22px 10px 20px; text-align:center; min-width:0;
}
/* 注記は下端へ寄せる。3枚で位置が揃う */
/* 🔴 order を使うので、:last-child で下端寄せしない（並びが崩れる）。 */
.bcp-sum-n{margin-top:auto}
.bcp-sum-ic{
  /* 🔴 情報階層は 数値 ＞ ラベル ＞ アイコン（2026-08-27 オーナー指示）。
     アイコンを必要以上に大きくしない。青を使いすぎない。 */
  display:grid; place-items:center; width:26px; height:26px; margin:0 auto 10px;
  border-radius:50%; background:#F4F5F7; color:#8A8A8A; order:0;
}
.bcp-sum-ic svg{width:15px; height:15px}
/* ラベルは数字より小さく、下に置く。 */
.bcp-sum-k{margin:6px 0 0; font-size:12.5px; font-weight:500; color:#6B6B6B; line-height:1.4; order:2}
.bcp-sum-v{
  /* 数字が主役。🔴 青を全面に使わず、黒で置く（青は意味のある場所だけ）。 */
  margin:0; font-family:var(--font-head); font-size:30px; font-weight:700;
  color:var(--bcs-text); line-height:1.15; font-variant-numeric:tabular-nums;
  letter-spacing:-.02em; order:1;
}
/* 「件」は補助。数字と同じ大きさにしない。 */
.bcp-sum-u{font-size:12px; font-weight:500; margin-left:3px; color:#8A8A8A}
/* 🔴 未測定・記録なしは、数字と同じ大きさ・同じ色にしない */
.bcp-sum-x{margin:0; font-size:24px; font-weight:700; color:#C4C4C4; line-height:1.15; order:1}
/* 🔴 画像の注記の字の高さ 8.0 ／ H1 18.0 ＝ 1 : 0.44 → 12前後。
   これも比からの読みで、実測ではない（画像と並べて合わせた値）。 */
/* 🔴 参考画像では注記が**小さな箱**に入っている（素のテキストではない）。 */
/* 注記は最下段。🔴 箱を付けない（3枚の中で一番弱い情報）。 */
.bcp-sum-n{margin:8px 0 0; color:#9A9A9A; font-size:12px; line-height:1.4; order:3}

/* 「その他」の行 */
/* 🔴 カードをやめたので、行の左右余白を自前で持たない（本文の余白に揃える）。 */
/* まだ来ていない画面（2026-08-30）。🔴 押せないことが見た目で分かるようにする。
   タブは足さない ── 押しても何もないタブを作らないため。 */
.bcp-yet{list-style:none; margin:0; padding:0}
.bcp-yet-i{padding:11px 0; border-bottom:1px solid var(--bcs-border)}
.bcp-yet-i:last-child{border-bottom:0}
.bcp-yet-n{display:block; font-size:14px; font-weight:600; color:var(--bcs-text-tertiary)}
.bcp-yet-d{display:block; margin-top:3px; font-size:12.5px; line-height:1.75;
  color:var(--bcs-text-tertiary)}
.bcp-yet-m{margin:10px 0 0; font-size:12px; color:var(--bcs-text-tertiary)}

 /* 🔴🔴 2026-08-30 オーナー指摘「境目わからない」。
    面（カード）を外して罫だけにしたが、群の見出しと項目が同じ地の上に並び、
    どこからどこまでが一つの群なのかが読めなくなっていた。**外しすぎ。**
    🔴 群ごとに白いカードへ戻す。カード内は罫で仕切る。 */
.bcp-rows{
  margin:0 0 14px; padding:0 var(--bcs-s5);
  background:#FFFFFF; border:1px solid #ECECEC; border-radius:16px;
}
.bcp-rows .bcp-row{padding-left:0; padding-right:0; border-top:0;
  border-bottom:1px solid var(--bcs-border)}
.bcp-rows .bcp-row:last-child{border-bottom:0}
.bcp-row{
  display:flex; align-items:center; justify-content:space-between; gap:var(--bcs-s3);
  padding:16px var(--bcs-s5); text-decoration:none; color:var(--bcs-text);
  border-top:1px solid var(--bcs-border); min-height:44px;
}
.bcp-row:first-child{border-top:0}
/* 🔴 名前だけの行から、名前＋説明＋状態の3段へ（2026-08-29 オーナー指示）。
   行が縦に伸びるので、上下中央ではなく上そろえにする。 */
.bcp-row{align-items:flex-start}
.bcp-row-b{display:block; min-width:0}
.bcp-row-l{display:block; font-size:15px; font-weight:600; line-height:1.5}
.bcp-row-d{display:block; margin-top:3px; font-size:12.5px; line-height:1.75;
  color:var(--bcs-text-secondary)}
/* 状態は「いまの数」。説明とは別の性質なので、色と字面を変える。 */
.bcp-row-s{display:block; margin-top:5px; font-size:12px; font-weight:600;
  color:var(--bcs-accent); font-variant-numeric:tabular-nums}
.bcp-row-ar{flex:none; margin-top:2px; color:var(--bcs-text-tertiary); font-size:20px; line-height:1}

/* 🔴 H1 の下の点＋罫（参考画像9枚すべてにある）
   実測: 罫 y=79 / 幅54 / #E6E9F0。点は Accent */
/* 🔴 ここにあった見出し下の「点＋54pxの罫」は削除（2026-08-27 オーナー指摘）。
   参考画像から拾った装飾だが、実機では浮いて見えた。
   戻すときは、この2つの疑似要素を復活させる。 */

/* セクション見出し（Step 4）
   🔴 Accent の小さめ太字。カード本文の見出し（ほぼ黒）とは別物。混ぜない。 */
/* 🔴 h2 で出す（読み上げの見出し階層と、検査が拾えること）。
   ブラウザ既定の余白と字の大きさを打ち消す。 */
h2.bcp-sec-h{
  display:flex; align-items:center; gap:var(--bcs-s2);
  margin:0 0 var(--bcs-s3);
  /* 🔴 2026-08-27: 青は意味のある場所だけ（選択中のナビ・重要な操作・必要な状態）。
     セクション見出しは情報の区切りであって、押す場所でも状態でもない。 */
  font-size:15px; font-weight:700; color:var(--bcs-text); line-height:1.5;
}
/* 🔴 参考画像のセクション見出しには**アイコンが無い**（Accent 色の文字だけ）。 */
.bcp-sec-ic{display:none}

/* BLOOMが今やっていること */
.bcp-doing{list-style:none; margin:0; padding:0}
.bcp-doing li{
  display:flex; align-items:flex-start; gap:var(--bcs-s3);
  padding:11px 0; border-top:1px solid var(--bcs-border); min-height:44px;
}
.bcp-doing li:first-child{border-top:0}
.bcp-doing-ic{color:var(--bcs-accent); flex:none; margin-top:1px}
.bcp-doing-b{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.bcp-doing-t{font-size:14.5px; line-height:1.6; color:var(--bcs-text); min-width:0}
/* 供給元が付けた説明。🔴 本文より弱く、ただし読める大きさで。 */
.bcp-doing-n{font-size:12px; line-height:1.6; color:var(--bcs-text-secondary)}
.bcp-doing li > .bcp-chip{align-self:flex-start; margin-top:2px}
.bcp-doing-s{
  margin-left:auto; flex:none; height:20px; padding:0 9px; border-radius:10px;
  display:inline-flex; align-items:center;
  font-size:12px; font-weight:600;
  color:var(--bcs-wait); background:var(--bcs-wait-soft);
}

/* 次に見ればよいこと（Step 7） */
.bcp-next{display:flex; gap:var(--bcs-s4); align-items:flex-start}
.bcp-next-ic{
  flex:none; width:48px; height:48px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--bcs-accent-soft); color:var(--bcs-accent);
}
.bcp-next-b{min-width:0}
.bcp-next-k{margin:0 0 var(--bcs-s2); font-size:15px; font-weight:700; color:var(--bcs-accent)}
.bcp-next-t{margin:0 0 4px; font-size:14px; line-height:1.75; color:var(--bcs-text-secondary)}
.bcp-next-go{
  display:inline-flex; align-items:center; gap:4px; margin-top:var(--bcs-s2);
  min-height:44px; color:var(--bcs-accent); font-size:14.5px; font-weight:600; text-decoration:none;
}
.bcp-next-ar{font-size:18px; line-height:1}

/* 計測環境（Step 6）
   🔴 Chip の高さ20・角丸は高さの半分（参考画像の実測）。
   🔴 状態の色は Accent と別系統。良し悪しを表す。 */
.bcp-meas{list-style:none; margin:0; padding:0}
/* 🔴 3行あるので、1行の上下を削ると効きが3倍になる。行間は触らない（読みにくくなる）。 */
.bcp-meas li{padding:9px 0; border-top:1px solid var(--bcs-border)}
.bcp-meas li:first-child{border-top:0}
.bcp-meas-h{display:flex; align-items:center; gap:var(--bcs-s3)}
.bcp-meas-h .bcp-meas-l{flex:1}
/* 🔴 一覧の行のアイコン枠（B6 ②）。参考画像は角丸四角・淡い青地。 */
.bcp-meas-ic{
  /* 🔴 参考画像の実測 46x46（画素から）。角丸は10前後。 */
  flex:none; display:grid; place-items:center; width:46px; height:46px;
  border-radius:11px; background:var(--bcs-accent-soft); color:var(--bcs-accent);
}
.bcp-meas-l{font-size:14.5px; color:var(--bcs-text); min-width:0}
.bcp-meas-w{margin:6px 0 0; font-size:12px; line-height:1.6; color:var(--bcs-text-secondary)}

/* 参考画像の実測 78x20・角丸は高さの半分。中にアイコンが入る。 */
.bcp-chip-ic{display:inline-grid; place-items:center; flex:none}
.bcp-chip-ic svg{display:block}
.bcp-chip{
  flex:none; height:20px; padding:0 8px; border-radius:10px;
  display:inline-flex; align-items:center; gap:5px;
  font-size:12px; font-weight:600; white-space:nowrap;
}
.bcp-chip-ok{color:var(--bcs-ok); background:var(--bcs-ok-soft)}
.bcp-chip-wait{color:var(--bcs-wait); background:var(--bcs-wait-soft)}

/* ---------- Hero: 現在の取り組み（Step 2） ----------
   🔴 参考画像 01 から実測（CSS px ＝ 画像px ÷ 2）:
        ページ左右余白  14.0
        ページ地        #FAFBFD ／ カード地 #FFFFFF（差は4だけ）
        区切り線        #EDEFF4
        Chip            高さ 20 / 角丸は高さの半分（左端が1px下で4内側＝丸）
        一覧のアイコン枠 約 46 x 46
        下部ナビ        高さ 48
        H1「いま」      字の高さ 18（y52〜70）／下の罫 y79・幅54・#E6E9F0

   🔴 測れなかったもの（目分量で置かない）:
        Hero のアイコン円の直径 … 淡い青がカード地と近く、輪郭を切り出せなかった
        カードの角丸           … 影と地色の差が4しかなく、角の判定ができなかった
        各文字の px            … 字の高さからの推定になるため、断定しない
      → これらは実機と画像を並べて合わせ、合ったところで値を記録する

   🔴 カードに枠線を引かない（横断チェックの実測・地との差4を極薄の影で見せている）
   🔴 固定高さを使わない（共通仕様 A2）。文の長さで伸びる。 */
/* 🔴 2026-08-26 オーナー指摘「カードの高さが高くなりやすい」。実測したら本当だった。
   431px 平均 余白率23% ／ 1440px は 32〜33%。参考画像は6ブロックが911cssに収まるのに、
   実装は4ブロックで931css あった。**1枚ずつ見ても気づかない。合計だけが伸びる。**
   直す順は padding → gap → 行間（行間は最後・詰めると読みにくくなる）。
   🔴 固定高さで揃えない。🔴 アイコン円は縮めない（円は情報の目印）。 */
.bcp-hero{
  display:flex; gap:var(--bcs-s3); align-items:flex-start;
/* 🔴 2026-08-27 オーナー「参考画像と全然ちゃう」。並べて測ると
   1ブロックあたり 参考≒132px / 実装≒187px（約1.4倍）だった。
   字と余白と円を落として密度を寄せる。🔴 行間は触らない。 */
  margin:0 0 var(--bcs-s3);
  padding:12px var(--bcs-s3);
  /* 🔴 2026-08-29 オーナー指示。薄い青地 → 白＋枠線。
     ほかのカードは全部 白＋#ECECEC の枠線なので、ここだけ地の色が違っていた。
     🔴 .bcp-card と同じ値にする（別の白・別の枠線を作らない）。 */
  background:#FFFFFF;
  border:1px solid #ECECEC;
  box-shadow:none;
  border-radius:16px;
}
/* 🔴 円の直径は画素から切り出せなかった（淡い青がカード地と近い）。
   横断チェックの独立測定は 56〜64 の帯。ただし画像は円と文字の間隔が詰まっており、
   径だけ大きくすると文字幅が狭くなって見出しが折れる。
   径と間隔を同時に合わせた結果がこの値。
   🔴 実測値ではなく、画像と並べて合わせた値。 */
/* 🔴 16px × 19文字 = 304 で、文字領域 303 に 1px 足りず折れていた。
   画像は文字領域にゆとりがある（文字の右端 400 / カード右端 417）。
   円を 48 にして、実装側にも同じゆとりを作る。
   🔴 円の径は画素から切り出せていないので、これは「画像と並べて合わせた値」。 */
.bcp-hero-ic{
  flex:none; width:48px; height:48px; border-radius:50%;
  display:grid; place-items:center;
  /* 🔴 カード地を白にしたので、円も白だと消える。円は情報の目印なので残す。 */
  background:var(--bcs-surface-accent); color:var(--bcs-accent);
}
.bcp-hero-b{min-width:0}
.bcp-hero-k{margin:0; font-size:12.5px; font-weight:600; color:var(--bcs-text-secondary)}
/* 🔴 21px は共通仕様 §11 の値だが、画像はもっと小さい。
   画像の字の高さ: H1 18.0 ／ この見出し 11.0 ＝ 1 : 0.61
   H1 を28で置いているので、この見出しは17前後。
   🔴 これは字の高さからの比であって、font-size の実測ではない。
      「画像と並べて合わせた値」として記録する。 */
/* 🔴 画像の実測から出した値（比ではなく、文字幅から）:
     「予約までの動きを正しく測れる状態にする」19文字が 302.5css に収まっている
     → 1文字あたり 15.9 ＝ font-size 16
   実装側の文字領域も 303 なので、16 なら同じく1行に収まる。
   🔴 これは実測（文字数と実幅から割り出した値）。比からの推定ではない。 */
.bcp-hero-t{
  margin:5px 0 0; font-family:var(--font-head);
  font-size:15px; line-height:1.5; font-weight:600; color:var(--bcs-text);
  text-wrap:balance;
  /* 🔴 2026-08-29: 「予約までの動きを正し／く測れる状態にする」と語の途中で折れていた。
     日本語は文節で折る。対応していないブラウザは今までどおりの折り方になるだけ。 */
  word-break:auto-phrase;
}
/* 🔴 参考画像と重ねると、実装の本文だけ1回り大きく、Hero が2行ぶん高くなっていた
   （2026-08-27）。参考の本文は13px前後・行間もやや詰まっている。 */
.bcp-hero-s{margin:8px 0 0; font-size:13px; line-height:1.65; color:var(--bcs-text-secondary)}
@media (min-width:900px){
  .bcp-hero{padding:14px var(--bcs-s5)}
  .bcp-hero-t{font-size:21px}
}

/* ---------- 月次のまとめ・やったこと（BLOOMの言葉） ----------
   🔴 測った値のカードと同じ形にしない。書いた文章だと分かる見た目にする。
   🔴 左に色付きの縦線を置かない（全社の規約）。 */
.bcp-snap{
  margin:0 0 24px; padding:22px 24px;
  background:var(--paper); border:1px solid var(--line-strong, var(--line)); border-radius:var(--r);
}
.bcp-snap-k{margin:0 0 14px; font-family:var(--font-head); font-size:17px; font-weight:600; color:var(--ink)}
.bcp-snap-h{margin:16px 0 6px; font-size:13px; color:var(--muted)}
.bcp-snap-h:first-of-type{margin-top:0}
.bcp-snap-b{margin:0 0 8px; font-size:15px; color:var(--ink); line-height:1.9}
/* 🔴 2026-09-11。まとめの中の強調。**太くするだけ**にする。
   色を変えたり大きくしたりすると、同じ段落の中に2種類の強さが生まれて、
   どちらが大事なのか読めなくなる。 */
.bcp-snap-b strong{font-weight:700; color:inherit}
.bcp-snap-m{margin:16px 0 0; font-size:13px; color:var(--muted)}

.bcp-acts{list-style:none; margin:12px 0 0; padding:0}
.bcp-act{padding:14px 0; border-top:1px solid var(--line)}
.bcp-act:first-child{border-top:0; padding-top:0}
.bcp-act-h{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin:0 0 4px}
/* 日付の見出し（2026-08-29 §6）。🔴 同じ日付を毎行くり返さないための行。 */
.bcp-act-day{margin:16px 0 6px; font-size:12.5px; font-weight:700; color:var(--bcs-text);
  list-style:none}
.bcp-act-day:first-child{margin-top:2px}
.bcp-act-d{font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums}
.bcp-act-c{font-size:12px; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:1px 8px}
/* 日付が残っていない記録の見出し。🔴 時系列の一部に見えないよう、上に間を空けて区切る。 */
.bcp-act-g{
  margin:20px 0 0; padding-top:14px; border-top:1px solid var(--bcs-border);
  font-size:13px; font-weight:600; color:var(--bcs-text-secondary);
}
/* 畳んである月の見出し。押せることが分かる形にする（ボタンらしい面は持たせない）。 */
.bcp-act-g--fold{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  width:100%; background:none; cursor:pointer; font:inherit;
  font-size:13px; font-weight:600; color:var(--bcs-text-secondary); text-align:left;
  border:0; border-top:1px solid var(--bcs-border); min-height:44px;
}
.bcp-act-g-m{font-size:15px; color:var(--bcs-text-tertiary); line-height:1}
.bcp-act-g--fold:focus-visible{outline:2px solid var(--bcs-accent); outline-offset:-2px}
.bcp-act-t{margin:0; font-size:15px; color:var(--ink); line-height:1.7}
.bcp-act-p{margin:4px 0 0; font-size:14px; color:var(--ink-soft); line-height:1.8; white-space:pre-line} /* 2026-09-17 作業報告の箇条書き（改行入り）を崩さない。1文の記録には影響しない */

/* お客様ご自身の回答（読み返すためのもの） */
.bcp-ans{list-style:none; margin:12px 0 0; padding:0}
.bcp-ans-i{padding:12px 0; border-top:1px solid var(--line)}
.bcp-ans-i:first-child{border-top:0; padding-top:0}
.bcp-ans-q{margin:0 0 4px; font-size:13px; color:var(--muted); line-height:1.7}
.bcp-ans-a{margin:0; font-size:15px; color:var(--ink); line-height:1.8}

/* ---------- お支払い（UTILITY） ----------
   🔴 成果の面ではないので、控えめに。数字を主役にしない。 */
.bcp-plan-n{margin:0 0 6px; font-family:var(--font-head); font-size:18px; font-weight:600; color:var(--ink)}
.bcp-plan-p{margin:0 0 8px; font-size:14px; color:var(--ink-soft); line-height:1.8}

.bcp-inv{list-style:none; margin:12px 0 0; padding:0}
.bcp-inv-i{padding:12px 0; border-top:1px solid var(--line)}
.bcp-inv-i:first-child{border-top:0}
.bcp-inv-h{display:flex; align-items:baseline; justify-content:space-between; gap:12px}
.bcp-inv-p{font-size:14px; color:var(--ink)}
.bcp-inv-a{font-size:15px; color:var(--ink); font-variant-numeric:tabular-nums}
.bcp-inv-k{
  flex:none; padding:1px 7px; border-radius:999px; margin-left:6px;
  font-size:12px; font-weight:700; color:var(--bcs-text-secondary); background:var(--bcs-surface-subtle);
}
.bcp-inv-t{margin:4px 0 0; font-size:13.5px; line-height:1.6; color:var(--bcs-text)}
.bcp-inv-m{margin:4px 0 0; font-size:13px; color:var(--muted)}
.bcp-inv-l{list-style:none; margin:8px 0 0; padding:0 0 0 12px; border-left:0}
.bcp-inv-l li{display:flex; justify-content:space-between; gap:12px; font-size:13px; color:var(--ink-soft); padding:3px 0}
.bcp-inv-ll{min-width:0}
.bcp-inv-la{font-variant-numeric:tabular-nums; flex:none}

/* ---------- 読み込み中・空（3つの状態を1箇所で） ----------
   🔴 読み込み中に「灰色の板」を出さない。数字が出る場所に何かあると思わせる。
      静かに一言だけ置く。 */
.bcp-loading{display:flex; align-items:center; gap:10px}
.bcp-loading-t{margin:0; font-size:14px; color:var(--muted)}
.bcp-loading-t::before{
  content:""; display:inline-block; width:9px; height:9px; margin-right:8px;
  border-radius:50%; background:var(--muted); vertical-align:middle;
  animation:bcpPulse 1.2s ease-in-out infinite;
}
@keyframes bcpPulse{0%,100%{opacity:.25}50%{opacity:.8}}
/* 🔴 動きを減らす設定の人には点滅させない */
@media (prefers-reduced-motion: reduce){ .bcp-loading-t::before{animation:none; opacity:.5} }

.bcp-empty-t{margin:0; font-size:15px; color:var(--ink); line-height:1.8}

/* ---------- 準備中の画面 ---------- */
.bcp-pending-k{margin:0 0 8px; font-family:var(--font-head); font-size:15px; font-weight:600; color:var(--ink)}
.bcp-pending-b{margin:0 0 10px; font-size:14px; color:var(--ink-soft); line-height:1.8}

/* ---------- 計測環境の準備（🔴 表示は保留中・portal.js 側で呼んでいない） ---------- */
.bcp-setup{
  margin:0 0 24px; padding:18px 20px;
  background:var(--bcs-surface); border:0; border-radius:14px;
  box-shadow:0 1px 2px rgba(23,32,38,.04), 0 1px 8px rgba(23,32,38,.03);
}
.bcp-setup-k{margin:0 0 12px; font-family:var(--font-head); font-size:14px; font-weight:600; color:var(--ink)}
.bcp-setup-list{list-style:none; margin:0; padding:0}
.bcp-setup-list li{display:flex; align-items:baseline; gap:8px; margin:0 0 7px; font-size:14px; flex-wrap:wrap}
.bcp-setup-mark{width:1em; color:var(--muted); font-variant-numeric:tabular-nums}
.bcp-setup-label{color:var(--ink)}
/* 🔴 記号だけで示さないので、状態の文字は本文と同じ濃さで出す */
.bcp-setup-state{color:var(--ink-soft)}
.bcp-setup-n{margin:12px 0 0; font-size:13px; color:var(--muted)}

/* ---------- ご確認・記録 ---------- */
.bcp-q-label{margin:0 0 4px; font-family:var(--font-head); font-size:16px; font-weight:600; color:var(--ink)}
/* 🔴 回答済みは色だけで示さない。文言で伝える（--good は 4.75 で本文可だが、色に頼らない） */
.bcp-q-answered{margin:10px 0 4px; font-size:13px; font-weight:600; color:var(--good)}
.bcp-list{margin:8px 0 0; padding-left:1.2em}
.bcp-list li{margin:0 0 6px; font-size:var(--t-body); line-height:1.8; color:var(--ink)}
/* 🔴 カードを縦に積む場面（ご確認・記録）の間隔。
   グリッド（.bcp-cards）の中には効かせない。効かせると2枚目以降だけ 16px 下がり、
   上端がそろわなくなる（実測 2026-08-26: 1枚目 top=106 / 2〜3枚目 top=122）。
   グリッドの間隔は gap が持っている。 */
.bcp-cards + .bcp-card{margin-top:16px}
.bcp-in > .bcp-card + .bcp-card{margin-top:16px}
textarea.bcp-input{resize:vertical; font-family:inherit; line-height:1.7}

/* ---------- ログインの入力欄 ---------- */
.bcp-form{display:flex; flex-direction:column; gap:10px; margin:18px 0 0}
.bcp-label{font-size:13px; font-weight:600; color:var(--ink-soft)}
.bcp-input{
  padding:11px 12px; border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--paper); color:var(--ink); font-size:16px;   /* iOSで拡大されない下限 */
}
.bcp-input:focus-visible{outline:2px solid var(--bcs-accent); outline-offset:1px; border-color:var(--bcs-accent)}
/* 🔴 2026-08-26: ここだけ旧トークン（--blue-btn #1F5E92 / --r-sm 5px）のままだった。
   トークンは .bcp に定義されていて body にも付いており、**効いていなかったのではなく、
   このルールが新しいトークンを参照していなかった**（＝置き換え漏れ）。
   ログイン画面はお客様が最初に見る画面なので、ここが旧色だと全体が古く見える。 */
.bcp-btn{
  /* 🔴 button/input は書体を継承しない（ブラウザ既定＝Arial 等）。明示する。 */
  font-family:var(--font-sans);
  align-self:stretch; padding:13px 20px; border:0; border-radius:10px;
  background:var(--bcs-accent); color:#fff; font-size:15px; font-weight:600; cursor:pointer;
}
.bcp-btn:hover{background:var(--bcs-accent-hover)}
.bcp-btn:disabled{opacity:.55; cursor:not-allowed}
.bcp-btn:focus-visible{outline:2px solid var(--bcs-accent); outline-offset:2px}
@media (min-width:600px){ .bcp-btn{align-self:flex-start} }
/* a に .bcp-btn を当てたとき用（button と違って既定の下線・色が付く） */
.bcp-btn--link{
  display:inline-block; margin:12px 0 0; text-align:center; text-decoration:none; color:#fff;
}
.bcp-btn--link:hover{color:#fff}
/* 主役ではないボタン（例: e=3 の「別のリンクを送る」）。押せるが、勧めてはいない。 */
.bcp-btn--quiet{
  margin-top:12px; background:transparent; color:var(--bcs-accent);
  border:1px solid var(--bcs-border-strong); font-weight:600;
}
.bcp-btn--quiet:hover{background:var(--bcs-accent-soft); color:var(--bcs-accent)}

/* 正規料金。🔴 実際のご請求額と同じ見た目にしない（別のものなので）。
   金額を巨大にしない（§20）。ラベルと値を1行に並べる。 */
/* ---------- お支払い（参考画像06 の構造） ---------- */
/* プラン名。🔴 素の見出しではなく、淡い青のピル。 */
 /* 🔴 プラン名は「いま何を契約しているか」。手が要るものではないので青にしない。 */
.bcp-plan-pill{
  display:inline-block; margin:10px 0 0; padding:9px 18px; border-radius:12px;
  background:var(--bcs-surface-subtle); color:var(--bcs-text);
  font-family:var(--font-head); font-size:16px; font-weight:700; letter-spacing:.01em;
}
/* プランの意味。🔴 金額より下（参考画像はピルと金額のあいだに何も置かない）。 */
.bcp-plan-desc{margin:12px 0 0; padding-top:12px; border-top:1px solid var(--bcs-border)}
/* 🔴 主役は「実際にご請求している額」。正規料金ではない。 */
.bcp-plan-now{margin:14px 0 0}
.bcp-plan-now-k{margin:0; font-size:13px; font-weight:600; color:var(--bcs-accent)}
.bcp-plan-now-v{
  margin:2px 0 0; font-family:var(--font-head); font-size:38px; font-weight:700;
  color:var(--bcs-accent); line-height:1.1; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.bcp-plan-now-u{margin-left:6px; font-size:14px; font-weight:600; color:var(--bcs-text-secondary)}

/* 行（丸アイコン ＋ ラベル ＋ 右端に値）。参考画像は3行だが、
   🔴 契約期間・制作費はオーナー判定で出さないので、いまは正規料金の1行だけ。 */
.bcp-plan-rows{list-style:none; margin:14px 0 0; padding:14px 0 0; border-top:1px solid var(--bcs-border)}
.bcp-plan-rows li{display:flex; align-items:center; gap:10px; min-height:40px}
.bcp-plan-row-ic{
  flex:none; display:grid; place-items:center; width:34px; height:34px;
  border-radius:50%; background:var(--bcs-accent-soft); color:var(--bcs-accent);
}
.bcp-plan-row-k{flex:1; font-size:14px; color:var(--bcs-text)}
.bcp-plan-row-v{
  font-family:var(--font-head); font-size:15px; font-weight:700; color:var(--bcs-text);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}

/* 情報カード（丸い i ＋ 見出し ＋ 本文）。 */
.bcp-info{display:flex; align-items:flex-start; gap:12px; background:var(--bcs-accent-soft)}
.bcp-info-ic{flex:none; display:grid; place-items:center; color:var(--bcs-accent); margin-top:1px}
.bcp-info-b{flex:1; min-width:0}
.bcp-info-k{margin:0 0 4px; font-family:var(--font-head); font-size:14.5px; font-weight:700; color:var(--bcs-text)}
.bcp-info-t{margin:0 0 2px; font-size:13px; line-height:1.7; color:var(--bcs-text-secondary)}

.bcp-plan-price{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  margin:12px 0 0; padding-top:12px; border-top:1px solid var(--bcs-border);
}
.bcp-plan-price-k{font-size:13px; color:var(--bcs-text-secondary)}
/* プラン名と、その下の説明。名前を主に、説明は弱く。 */
.bcp-plan-s{margin:2px 0 0; font-size:13px; color:var(--bcs-text-secondary)}

/* ---------- マイページ（案件の一覧・参考画像07） ---------- */
/* 🔴 3列にしない。431px で案件名が2行に折れ、画面の3分の2が空いていた。 */
/* 🔴 2026-08-27 オーナー指示: カードを 20〜30% 圧縮する。
   「大きなカードを並べる SaaS テンプレ感」を避ける。 */
.bcp-plist{display:flex; flex-direction:column; gap:8px}
/* 検索。🔴 参考画像07 は入力欄の中に虫眼鏡がある。 */
/* 🔴 検索欄自体を画面の主役にしない。位置は「やること」の下・一覧の直前。 */
.bcp-search{position:relative; margin:0 0 10px}
.bcp-search-ic{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  display:grid; place-items:center; color:var(--bcs-text-tertiary); pointer-events:none;
}
.bcp-search-i{width:100%; height:52px; padding-left:42px; border-radius:12px; font-size:15px}

/* マイページの絞り込み。🔴 ご確認（.bcp-fchip）とは**別の部品**。
   参考画像07 はアイコン付きのピルで、件数を出さない。 */
.bcp-pchip{
  display:inline-flex; align-items:center; gap:6px; height:38px;
  padding:0 16px; border-radius:999px; cursor:pointer;
  background:var(--bcs-surface); border:1px solid var(--bcs-border-strong);
  font:inherit; font-size:13px; font-weight:600; color:var(--bcs-text-secondary);
  white-space:nowrap;
}
.bcp-pchip-ic{display:inline-grid; place-items:center; flex:none}
.bcp-pchip[aria-pressed="true"]{
  background:var(--bcs-accent); border-color:var(--bcs-accent); color:#fff;
}
.bcp-pchip:focus-visible{outline:2px solid var(--bcs-accent); outline-offset:2px}

/* 🔴 `a.bcp-card{display:block}`（245行目）は**要素＋クラス**なので、
   `.bcp-pcard` だけでは詳細度で負けて display:flex が効かない（後ろに書いても勝てない）。
   実測: display=block になり、丸アイコンが上・「›」が下に落ちていた。
   同じ要素セレクタを付けて詳細度を合わせる。 */
a.bcp-pcard{
  display:flex; align-items:center; gap:12px;
  text-decoration:none; color:inherit; margin:0;
  /* 🔴 高さを 20〜30% 圧縮。強い影は使わず、細い枠だけで分ける。 */
  padding:14px 16px; border-radius:16px; box-shadow:none;
}
a.bcp-pcard:focus-visible{outline:2px solid var(--bcs-accent); outline-offset:2px}
a.bcp-pcard:hover{border-color:transparent}
.bcp-pcard-ic{
  /* 案件の識別子。🔴 ロゴがあれば画像、無ければ頭文字。
     ブランドカラーでカード全体を染めない（識別子としてだけ使う）。 */
  flex:none; display:grid; place-items:center; width:44px; height:44px; border-radius:12px;
  overflow:hidden;
  background:var(--bcs-accent-soft); color:var(--bcs-accent);
  font-family:var(--font-head); font-size:16px; font-weight:600;
}
.bcp-pcard-b{flex:1; min-width:0; display:flex; flex-direction:column; gap:3px}
.bcp-pcard-h{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.bcp-pcard-n{font-family:var(--font-head); font-size:15px; font-weight:600; color:var(--bcs-text)}
.bcp-pcard-st{
  flex:none; padding:1px 8px; border-radius:999px;
  font-size:12px; font-weight:600; white-space:nowrap;
}
.bcp-pcard-st--live{color:var(--bcs-accent); background:var(--bcs-accent-soft)}
.bcp-pcard-st--end{color:var(--bcs-text-secondary); background:var(--bcs-surface-subtle)}
/* いま何をしているか。🔴 無ければ行ごと出さない（空欄を並べない）。 */
.bcp-pcard-f{display:flex; align-items:baseline; gap:6px; font-size:13.5px; color:var(--bcs-text)}
.bcp-pcard-dot{
  flex:none; width:6px; height:6px; border-radius:50%;
  background:var(--bcs-accent); transform:translateY(-1px);
}
.bcp-pcard-s{font-size:12.5px; line-height:1.6; color:var(--bcs-text-secondary)}
.bcp-pcard-ar{flex:none; align-self:center; color:var(--bcs-text-tertiary); font-size:20px; line-height:1}

/* ---------- ご確認 ---------- */
/* H1 と、その右の小さな箱（参考画像04）。 */
.bcp-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px}
.bcp-head .bcp-title{margin-bottom:10px}
.bcp-head-box{
  flex:none; text-align:center; padding:8px 14px; border-radius:12px;
  background:var(--bcs-surface); box-shadow:0 1px 2px rgba(23,32,38,.04), 0 1px 8px rgba(23,32,38,.03);
}
.bcp-head-box-k{margin:0; font-size:12px; color:var(--bcs-text-secondary); white-space:nowrap}
.bcp-head-box-v{
  margin:0; font-family:var(--font-head); font-size:26px; font-weight:700;
  color:var(--bcs-accent); line-height:1.15; font-variant-numeric:tabular-nums;
}
.bcp-head-box-u{margin-left:2px; font-size:12px; font-weight:600; color:var(--bcs-text-secondary)}

/* H1 の下の1行（参考画像04）。 */
.bcp-lead{margin:-6px 0 14px; font-size:14px; color:var(--bcs-text-secondary)}
/* 最後のご回答。🔴 参考画像は一覧の**下**。時計のアイコンつき。 */
.bcp-q-last{
  display:flex; align-items:center; gap:6px;
  margin:14px 0 0; font-size:12.5px; color:var(--bcs-text-tertiary);
}
.bcp-q-last-ic{display:inline-grid; place-items:center; flex:none}

/* 押せるカード（未回答）。🔴 押せることが分かる程度に。派手にしない。 */
.bcp-q--tap{cursor:pointer; transition:border-color .15s, background-color .15s}
.bcp-q--tap:hover{border-color:#D8DEE6; background:#FCFDFE}
.bcp-q--tap:focus-visible{outline:2px solid var(--bcs-accent); outline-offset:2px}
.bcp-q-tap{
  display:flex; align-items:center; justify-content:flex-end; gap:4px;
  margin:12px 0 0; font-size:13.5px; font-weight:600; color:var(--bcs-accent);
}
.bcp-q-tap-ar{font-size:17px; line-height:1}
.bcp-q-form{margin-top:12px}

/* 設問カードの頭：46x46 のアイコン枠 ＋ 見出し ＋ 状態の札 */
.bcp-q-ic{
  flex:none; display:grid; place-items:center; width:46px; height:46px;
  border-radius:11px; background:var(--bcs-accent-soft); color:var(--bcs-accent);
}
.bcp-q-hb{flex:1; min-width:0}

/* ラベル付きの表（参考画像04 の本体）。
   🔴 2026-08-27 §6。**枠を外した。**
      `.bcp-card` が既に枠と角丸を持っているので、その中にもう1枚
      枠つきの箱があると「カードの中のカード」になる。
      仕切りは要るので、**上の細い罫だけ**残す（面は増やさない）。 */
.bcp-q-tbl{
  margin:12px 0 0; padding:0;
  display:grid; grid-template-columns:auto 1fr; align-items:start; gap:0;
  border:0; border-top:1px solid var(--bcs-border); border-radius:0;
}
.bcp-q-tbl dt{
  display:flex; align-items:center; gap:7px; padding:9px 12px 9px 0;
  font-size:12.5px; color:var(--bcs-text-secondary); white-space:nowrap;
  align-self:stretch;
}
.bcp-q-tbl dd{margin:0; padding:9px 0; font-size:13px; color:var(--bcs-text); min-width:0}
.bcp-q-tbl dt:not(:first-of-type), .bcp-q-tbl dd:not(:first-of-type){border-top:1px solid var(--bcs-border)}
.bcp-q-tbl-ic{display:inline-grid; place-items:center; flex:none; color:var(--bcs-text-tertiary)}
.bcp-q-tbl .bcp-q-why{margin:0}
.bcp-q-tbl .bcp-more{margin:2px 0 0}


/* 見出しの右の札。🔴 「ステータス」の語は画面から消した（§7）。札だけで足りる。 */
.bcp-q-h .bcp-q-st{flex:none; margin-top:1px}

/* 「なぜ聞いているか」。🔴 初期状態は閉じている（§8）。
   主役ではないので、ボタンらしい面を持たせない。 */
.bcp-q-whyw{margin:10px 0 0}
.bcp-q-whyb{
  display:inline-flex; align-items:center; gap:4px;
  min-height:32px; padding:0; background:none; border:0; cursor:pointer;
  font:inherit; font-size:13px; font-weight:600; color:var(--bcs-text-secondary);
  /* 🔴 2026-08-30 実測 32px。押す標的は44px以上（見た目は変えず当たり判定だけ）。 */
  min-height:44px;}
.bcp-q-whyb:focus-visible{outline:2px solid var(--bcs-accent); outline-offset:3px; border-radius:4px}
.bcp-q-whyb-c{display:inline-block; font-size:16px; line-height:1; transition:transform .15s}
.bcp-q-whyw--open .bcp-q-whyb-c{transform:rotate(90deg)}
.bcp-q-whyw .bcp-q-why{margin:6px 0 0}

/* 展開後の 送信 ／ キャンセル。🔴 主は1つ・副は面を持たない。 */
.bcp-q-acts{display:flex; align-items:center; gap:12px}
.bcp-q-acts .bcp-btn{flex:1 1 auto}
.bcp-btn-ghost{
  flex:none; min-height:44px; padding:0 4px;
  background:none; border:0; cursor:pointer;
  font:inherit; font-size:13.5px; font-weight:600; color:var(--bcs-text-secondary);
}
.bcp-btn-ghost:focus-visible{outline:2px solid var(--bcs-accent); outline-offset:2px; border-radius:6px}


/* ===== 「1件」の共通部品 ====================================================
   やること（自分のマイページ）と ご確認（お客様）で**同じクラス**を使う。
   🔴 画面ごとに色や字の大きさを変えない。変えた分だけ、2つの画面がズレていく。
   🔴 色は必ずトークンから採る。やること側は #1A1A1A / #5B6270 などを直書きしていて、
      同じ「本文の灰色」がご確認と違っていた。
============================================================================ */
.bcp-task{display:flex; gap:12px; align-items:flex-start}
.bcp-task-body{flex:1 1 auto; min-width:0}
.bcp-task-h{display:flex; align-items:flex-start; justify-content:space-between; gap:10px}
.bcp-task-hb{flex:1 1 auto; min-width:0}
.bcp-task-h > .bcp-q-st{flex:none; margin-top:1px}
/* 題名。🔴 h3 だが、見出しの既定の大きさ・余白は使わない（見た目は前のまま）。 */
.bcp-task-t{
  margin:0; min-width:0; font-size:15px; font-weight:700; line-height:1.5;
  color:var(--bcs-text); letter-spacing:0;
}
a.bcp-task-t{color:var(--bcs-accent); text-decoration:none}
a.bcp-task-t:hover{text-decoration:underline}
.bcp-task-why{
  margin:4px 0 0; font-size:13px; line-height:1.7; color:var(--bcs-text-secondary);
  letter-spacing:0; white-space:pre-wrap; overflow-wrap:anywhere;
}
/* 気をつけること。🔴 理由と分けて出す（混ぜると読み飛ばされる）。 */
.bcp-task-warn{margin:6px 0 0; font-size:13px; line-height:1.7; color:#8A6100; letter-spacing:0}
.bcp-task-where{margin:6px 0 0; font-size:12.5px; line-height:1.6; color:var(--bcs-text-tertiary); letter-spacing:0}
/* ご回答をお待ちしている理由の1行。急かす見た目にしない（赤・太字・囲みを使わない）。
   状態バッジの下、理由の上に置くので、上に少しだけ余白を取って行として独立させる。 */
/* ご対応した施策の、外注した場合の目安。
   🔴 金額を主役にしない見せ方にする（月額と張り合わせない）。囲みも色も使わず、
      見出し→幅→内訳→注記の順で、字組と余白だけで組む。
   🔴 注記は小さくするが、読める大きさを下回らせない（読ませない注記は無いのと同じ）。 */
.up-val{margin:28px 0 0; padding-top:22px; border-top:1px solid var(--bcs-line, #e6ebef)}
.up-val-h{margin:0; font-size:13px; line-height:1.7; color:var(--bcs-text-secondary)}
.up-val-amt{margin:10px 0 0; display:flex; align-items:baseline; flex-wrap:wrap; gap:6px}
.up-val-n{font-size:22px; font-weight:600; letter-spacing:.01em}
.up-val-w{font-size:15px; color:var(--bcs-text-secondary)}
/* 期間の1行。額のすぐ下に置くので、額と離さない。 */
.up-val-span{margin:4px 0 0; font-size:12.5px; line-height:1.7; color:var(--bcs-text-secondary)}
.up-val-list{margin:18px 0 0; display:grid; gap:14px}
@media (min-width:701px){ .up-val-list{grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 28px} }
.up-val-r{margin:0; padding-top:12px; border-top:1px solid var(--bcs-line, #eef2f5)}
.up-val-k{margin:0; font-size:13px; line-height:1.7}
.up-val-v{margin:2px 0 0; font-size:14px; font-weight:600}
.up-val-b{margin:3px 0 0; font-size:11.5px; line-height:1.7; color:var(--bcs-text-secondary)}
/* 🔴 額が下限でしかないときの断り。**額のすぐ下**に置く（注記の位置だと読まれない）。 */
.up-val-floor{margin:8px 0 0; font-size:12.5px; line-height:1.8; color:var(--bcs-text-secondary)}

/* 🔴 月額と並べる比較。目安の内訳と注記の**あいだ**に置く（結論なので、注記より前）。
   🔴 カードにしない・囲まない。罫線1本と字組だけで区切る（「情報＝カード」を禁止する決め）。 */
.up-val-cmp{margin:16px 0 0; padding:14px 0 0; border-top:1px solid var(--bcs-border)}
.up-val-cmp-a{margin:0; font-size:12.5px; line-height:1.8; color:var(--bcs-text-secondary)}
/* 🔴 いちばん伝わるのは倍率。ここだけ本文より強くする（額の数字より上に立たせない）。 */
.up-val-cmp-b{margin:4px 0 0; font-size:14.5px; line-height:1.7; font-weight:700; color:var(--bcs-text)}
.up-val-cmp-c{margin:3px 0 0; font-size:12.5px; line-height:1.8; color:var(--bcs-text-secondary)}
/* 🔴 2つの金額を縦に並べる（統括裁定）。行の間に矢印も等号も置かない。
   見出しは行の頭に小さく置く ── どちらが何かを取り違えさせない。 */
.up-val-lab{font-size:12px; color:var(--bcs-text-secondary); margin-right:2px}
.up-val-amt2{margin-top:6px}
.up-val-amt2 .up-val-n{font-size:clamp(20px,3vw,26px)}
.up-val-src{margin:2px 0 0; font-size:11px; line-height:1.7; color:var(--bcs-text-tertiary)}
.up-val-note{margin:14px 0 0; font-size:12px; line-height:1.8; color:var(--bcs-text-secondary)}
.up-val-note + .up-val-note{margin-top:6px}

/* 供給が止まっていて控えで出しているときの1行。全画面の先頭。
   🔴 警告色にしない（壊れてはいない）。ただし本文より前に読ませたいので、地を薄く敷いて独立させる。 */
.bcp-stale{margin:0 0 14px; padding:9px 12px; border-radius:8px;
  background:var(--bcs-surface-2, #f4f6f8); color:var(--bcs-text-secondary);
  font-size:12.5px; line-height:1.7}

/* 「こちらで確認できていません」の1行。事実の但し書きなので、警告の見た目にしない。 */
.bcp-todo-unv{margin:8px 0 0; font-size:12px; line-height:1.7; color:var(--bcs-text-secondary)}

.bcp-task-adv{margin:8px 0 0; font-size:12.5px; line-height:1.75; color:var(--bcs-text-secondary)}

/* やり方（手順）。「なぜ聞いているか」と同じ畳みの見た目を使い、中身だけ番号付きにする。
   🔴 手順は読み下すものなので、行間は本文より広く取る（詰めると読み飛ばされる）。
   🔴 選択肢ごとの見出しは、手順より一段小さく・上に余白（前の手順とくっつけない）。 */
.bcp-steps-b{margin:8px 0 0}
.bcp-steps-h{margin:14px 0 4px; font-size:12px; font-weight:600; color:var(--bcs-text-secondary)}
.bcp-steps-b > .bcp-steps-h:first-child{margin-top:2px}
.bcp-steps-l{margin:0; padding-left:1.35em}
.bcp-steps-l li{margin:0 0 7px; font-size:13px; line-height:1.85; color:var(--bcs-text-secondary)}
.bcp-steps-l li:last-child{margin-bottom:0}
.bcp-task-sub{margin:8px 0 0; padding-left:1.1em}
.bcp-task-sub li{margin:0 0 4px; font-size:12.5px; line-height:1.7; color:var(--bcs-text-secondary)}

/* 選択肢。🔴 「焦点が当たっている」と「選ばれている」を見分けられるようにする。
   ブラウザ既定の輪はラジオの丸そのものに描かれるので、
   小さい丸だと選択済みと区別がつかない（実測 2026-08-27）。
   焦点は**行の枠**で示し、丸の見た目には触らない。 */
.bcp-af-opt:focus-within{
  outline:2px solid var(--bcs-accent); outline-offset:2px; border-radius:8px;
}
.bcp-af-opt input:focus-visible{outline:none}
.bcp-q-form:focus{outline:none}

/* 行き先がある題名の印。🔴 色だけで「押せる」を表さない（2026-08-28 オーナー指摘）。 */
.bcp-task-t-go{
  display:inline-block; vertical-align:-1px; margin-left:1px;
  color:var(--bcs-accent); opacity:.85;
}

/* 済みにしたあとの「元に戻す」。🔴 消すのは戻せなくなってから。 */
.bcp-todo-r--pend{opacity:.55}
.bcp-todo-r--pend .bcp-task-t{text-decoration:line-through; text-decoration-thickness:1px}
.bcp-todo-undo{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin:10px 0 0; padding:8px 12px; border-radius:8px;
  background:var(--bcs-surface-subtle);
}
.bcp-todo-undo-t{font-size:12.5px; color:var(--bcs-text-secondary)}
.bcp-todo-undo-b{
  flex:none; min-height:36px; padding:0 10px;
  background:none; border:0; cursor:pointer;
  font:inherit; font-size:13px; font-weight:700; color:var(--bcs-accent);
  -webkit-tap-highlight-color:transparent;
}
.bcp-todo-undo-b:focus-visible{outline:2px solid var(--bcs-accent); outline-offset:2px; border-radius:6px}
.bcp-todo-undo-b[disabled]{opacity:.5}

/* 一覧の上の一言。🔴 各行には足さない（29件ぶん縦に伸びる）。 */
.bcp-todo-lead{margin:-4px 0 12px; font-size:12.5px; line-height:1.7; color:var(--bcs-text-secondary)}

/* 手順（2026-08-29）。供給元が持つ 52件のうち 30件に付いてくる。
   🔴 既定は閉じる。開く口は、手順のある件にだけ付ける。
   🔴 行は供給元の文をそのまま出す。番号を振り直さない（注意書きに番号が付く）。 */
.bcp-todo-steps{margin:8px 0 0}
.bcp-todo-steps-b{
  appearance:none; -webkit-appearance:none;
  padding:0; border:0; background:none;
  font:inherit; font-size:12.5px; font-weight:600;
  color:var(--bcs-accent); cursor:pointer;
  /* 🔴 指で押す口は 44px 以上。文字だけだと押しにくい。 */
  min-height:32px; display:inline-flex; align-items:center;
}
.bcp-todo-steps-b:hover{color:var(--bcs-accent-hover)}
/* 🔴 `display` を書かない。書くと [hidden] が効かなくなる。 */
.bcp-todo-steps-l{
  margin:6px 0 0; padding:0 0 0 0; list-style:none;
  font-size:12.5px; line-height:1.75; color:var(--bcs-text-secondary);
}
.bcp-todo-step{
  margin:0 0 6px; padding:0 0 0 12px; position:relative;
  /* 🔴 word-break:auto-phrase は**使わない**。
     見出しなら文節で折ると読みやすいが、この手順は1行が長い本文なので、
     文節で折ると右端が大きく凸凹になる（実データで確認）。ふつうに折る。 */
}
.bcp-todo-step:last-child{margin-bottom:0}
.bcp-todo-step::before{
  content:""; position:absolute; left:0; top:.62em;
  width:4px; height:4px; border-radius:50%; background:var(--bcs-border-strong);
}

/* 予約導線率（§11）。🔴 段の中に混ぜず、流れの下に1つだけ置く。 */
/* 🔴 .bcp-arrow（矢印だけの行）は 2026-08-29 に廃止。定義ごと消した。 */
/* 🔴 2026-08-29: グレーの面をやめた（白カード基調から外れていた）。
   カードの中の1行として置く。 */
.bcp-jrate{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 10px;
  margin:12px 0 0; padding:12px 0 0; border-top:1px solid var(--bcs-border);
  font-size:13.5px; color:var(--bcs-text);
}
.bcp-jrate-k{font-size:12.5px; font-weight:700; color:var(--bcs-text-secondary)}
.bcp-jrate-v{
  font-family:var(--font-head); font-size:22px; font-weight:700; line-height:1.2;
  color:var(--bcs-text); font-variant-numeric:tabular-nums;
}
.bcp-jrate-n{flex:1 1 100%; font-size:12px; line-height:1.7; color:var(--bcs-text-secondary)}

/* Google検索での見え方。🔴 サイト内の流れと**別の節**（§9）。
   矢印も段番号も付けない。続きの数だと読ませないため。 */
/* ===== ホーム（§2〜§8）======================================================
   🔴 30秒で分かる画面。1指標ずつの巨大な縦カードにしない → 2列×2段。
============================================================================ */

.bcp-hi{padding:2px 16px}
 /* 🔴🔴 2026-08-30。ここに grid を直接書いたせいで、絵を持たない
    「最近完了したこと」の行まで2列になり、**日付が1文字幅に潰れた**（Bloomyで実害）。
    🔴 グリッドは絵を持つ行（--ic）だけ。素の行は今までどおり縦積み。 */
.bcp-hi-r{padding:12px 0; border-bottom:1px solid var(--bcs-border)}
.bcp-hi-r--ic{display:grid; grid-template-columns:auto 1fr; gap:0 13px}
.bcp-hi-r--ic .bcp-ini-ic{grid-row:1 / span 9; width:34px; height:34px; margin-top:1px}
.bcp-hi-r:last-child{border-bottom:0}
.bcp-hi-t{margin:0; font-size:14px; font-weight:700; line-height:1.6; color:var(--bcs-text)}
.bcp-hi-s{margin:3px 0 0; font-size:12.5px; line-height:1.8; color:var(--bcs-text-secondary)}

.bcp-hq{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.bcp-hq-n{margin:0; font-family:var(--font-head); font-size:26px; font-weight:700;
  color:var(--bcs-accent); font-variant-numeric:tabular-nums}
.bcp-hq-t{margin:0; flex:1 1 auto; font-size:13px; color:var(--bcs-text-secondary)}

.bcp-hg-b{margin:0; font-size:14.5px; font-weight:700; line-height:1.65; color:var(--bcs-text)}
.bcp-hg-s{margin:8px 0 0; font-size:12.5px; line-height:1.8; color:var(--bcs-text-secondary)}

/* 「すべて見る」。🔴 面を持たせない（主役は上のカード）。 */
.bcp-hmore{
  /* 🔴 2026-09-11 実測（別の席）: 104×40 と 158×40。指で押す部品は 44px。
     文字を大きくして稼がない（本文の並びが崩れる）。器の高さだけを上げる。 */
  display:inline-flex; align-items:center; gap:4px; min-height:44px;
  margin:8px 0 20px; padding:0; background:none; border:0; cursor:pointer;
  font:inherit; font-size:13.5px; font-weight:600; color:var(--bcs-accent);
}
.bcp-hmore:focus-visible{outline:2px solid var(--bcs-accent); outline-offset:2px; border-radius:6px}
/* 🔴 カードの中に入れたときは、カード側の余白に合わせる（下の20pxは要らない）。 */
.bcp-card > .bcp-hmore{margin:12px 0 0}

/* 現在地（ホーム最上部・2026-08-29 オーナー指示）。
   🔴 面を持たせない。カードにすると「押せるもの」に見え、押しても何も起きない。
      ここは見出しの一部として読ませる。 */
/* ご確認の断り書き。🔴 面を持たせない（カード＝中身が在る場所の形）。
   毎回出る固定文なので、本題（設問）より弱く置く。 */
/* 請求ごとの書類リンク（請求書・領収書）。 */
.bcp-inv-d{display:flex; gap:18px; margin:8px 0 0}
.bcp-inv-dl{font-size:13px; font-weight:600; color:var(--bcs-accent); text-decoration:none;
  min-height:36px; display:inline-flex; align-items:center}
.bcp-inv-dl:hover{text-decoration:underline}
.bcp-inv-dl:focus-visible{outline:2px solid var(--bcs-accent); outline-offset:2px; border-radius:4px}

/* ご確認：状態ごとの密度（2026-08-29 §8）。
   🔴 未回答だけカード。確認・反映中と完了は行＋divider。
   🔴 現在の行動ほど詳しく、過去ほどコンパクトに。 */
.bcp-q--answered,.bcp-q--resolved{
  background:none; border:0; box-shadow:none; border-radius:0;
  padding:12px 0; border-bottom:1px solid var(--bcs-border)}
.bcp-q--resolved{padding:9px 0}
.bcp-q--answered + .bcp-q--answered,.bcp-q--resolved + .bcp-q--resolved{margin-top:0}
/* 完了はいちばん軽く。 */
.bcp-q--resolved .bcp-task-t{font-size:13.5px; font-weight:600}
.bcp-q--resolved .bcp-q-ocv{font-size:12.5px}

/* 「すべて」の状態見出し（§6） */
.bcp-qgrp{display:flex; align-items:baseline; gap:10px; margin:26px 0 10px;
  padding-bottom:8px; border-bottom:1px solid var(--bcs-border-strong)}
.bcp-qgrp:first-child{margin-top:4px}
.bcp-qgrp-l{font-size:13px; font-weight:700; color:var(--bcs-text)}
.bcp-qgrp-n{font-size:12px; color:var(--bcs-text-tertiary); font-variant-numeric:tabular-nums}

.bcp-lead2{margin:4px 0 0; font-size:13px; line-height:1.9; color:var(--bcs-text-secondary)}

.bcp-q-cred{margin:-4px 0 18px; font-size:12px; line-height:1.8; color:var(--bcs-text-tertiary)}

.bcp-phase{margin:0 0 22px}
/* ── 2026-09-11 オーナー「マイページ内の全てのセクションの見出しなどの大きさ揃えられるかな？」
      「なんか特にホーム、統一感なくない？」

   🔴 測ってから直した（当てずっぽうで数字を動かさない）。ホームの「節の頭」は5種類あった:
        現在地     … 小12px/700 字間.14em ＋ 大 **22px**
        目標の中   … 小12px/700 字間.04em ＋ 大 **19px**
        次回の面談 … 小12px/600 字間.04em ＋ 大 **17px**
        ふつうの節 … 15px/700（小見出し無し）
        カードの中 … 15px/700（小見出し無し）
      ＝ 大見出しが **22 / 19 / 17 / 15px の4通り**、小見出しが **2通り**。

   🔴 揃え方（3段に決める・これ以外を作らない）:
        ページの題      28px  … 案件名
        節の言い切り    19px  … 運用中／拡大／面談の日程をご予約いただけます。
        節の見出し      15px  … あなたにお願いすること 等
      小見出し（キッカー）は **12px / 600 / 字間.06em** の1種類だけ。

   🔴 22px を 19px に下げる。上げるほうへ揃えると、
      「節の言い切り」が案件名（28px）に近づいて、どちらが題か読めなくなる。 */
.bcp-phase-k{margin:0; font-size:12px; font-weight:600; letter-spacing:.06em;
  color:var(--bcs-text-tertiary)}
.bcp-phase-t{margin:4px 0 0; font-family:var(--font-head); font-size:19px; font-weight:700;
  line-height:1.45; color:var(--bcs-text)}
.bcp-phase-b{margin:6px 0 0; font-size:13.5px; line-height:1.8; color:var(--bcs-text-secondary)}
/* 🔴 2026-08-29: 状態の札（3つ並べ）は廃止。自然文にした。
   .bcp-phase-st は使わないので定義ごと消してある（使わない部品を残さない）。 */
/* 目標・進行・契約はカードにしない（2026-08-29 §17）。余白と字組で整理する。 */
.bcp-goal,.bcp-hi,.bcp-hplan{padding:0}
.bcp-hi .bcp-hi-r{padding:11px 0; border-bottom:1px solid var(--bcs-border)}
.bcp-hi .bcp-hi-r:last-child{border-bottom:0}

/* 計測状況（ホーム）。🔴 正常は1行で終える。問題があるときだけ並べる。 */
.bcp-meas-ok{margin:0; font-size:13px; line-height:1.85; color:var(--bcs-text-secondary)}
/* 🔴🔴 2026-09-11 オーナー指示「ここのUIがなあー タイル型にしたら？」。
   それまでは横1本の行に「題 …………… 状態」で、
   ・題と状態が画面の**端と端**に離れ、どれとどれが対か目で追う必要があった
   ・3行とも同じ高さの薄い線で、**まだ始めていない**ことが伝わらなかった
   🔴 タイルにして、題と状態を**同じ塊の中**に置く。
   🔴 並べ方は auto-fill。幅で列数が変わる（320pxは1列・広い画面は3列）。
   🔴 色は変えない。注意色は「動いていたものが止まった」ときだけ（既存の決まり）。 */
.bcp-meas2{list-style:none; margin:0; padding:0; display:grid; gap:10px;
  grid-template-columns:repeat(auto-fill, minmax(168px, 1fr))}
/* 🔴🔴 直した直後に、私は `padding` と `border-bottom` を**同じ規則の中で2回**書いていた。
   後の行が前を打ち消すので、タイルにしたつもりで元の行のままになる。
   [[feedback-second-display-kills-the-first]] と同じ形。**1つの規則に1つの値**。 */
.bcp-meas2-i{display:flex; flex-direction:column; align-items:flex-start; gap:6px;
  padding:14px; border:1px solid var(--line); border-radius:12px;
  background:var(--paper); font-size:13px}
/* 🔴 タイルなので、最後だけ線を消す指定は要らない（行ではなくなった） */
.bcp-meas2-l{color:var(--bcs-text); font-size:14px; font-weight:600; line-height:1.5}
.bcp-meas2-s{flex:none; font-size:12px; color:var(--bcs-text-tertiary)}
.bcp-meas2-i.is-att{border-color:var(--warn-border, #E6D3A8)}
/* 🔴 目立たせるのは、注意が要るものだけ。 */
.bcp-meas2-i.is-att .bcp-meas2-s{color:#8A6100; font-weight:600}

/* 🔴🔴 2026-09-12 オーナー指示「計測状況をヘルスメーターみたいに。計測中は緑、一部計測は黄。
   それぞれをボタンにして、タップしたら詳しく説明。一部・未計測には行動を促す」。
   🔴 色は3つだけ: ok=緑 ／ att=黄（一部・確認待ち・準備中） ／ off=灰（まだ）。
   🔴 押す所は行の全面（44px 以上）。開いた中身は同じ枠の中。 */
.bcp-hm-list{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.bcp-hm-i{position:relative; border:1px solid var(--line); border-radius:12px; background:var(--paper); overflow:hidden}
.bcp-hm-b{
  display:flex; align-items:center; gap:10px; width:100%; min-height:52px; padding:10px 12px 12px 14px;
  box-sizing:border-box; border:0; background:transparent; font:inherit; text-align:left; cursor:pointer; color:inherit;
  -webkit-tap-highlight-color:transparent;
}
.bcp-hm-b:focus-visible{outline:2px solid var(--blue); outline-offset:-2px}
.bcp-hm-dot{flex:none; width:10px; height:10px; border-radius:50%; background:var(--muted)}
.bcp-hm-tx{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px}
.bcp-hm-l{font-size:14px; font-weight:600; line-height:1.4; color:var(--bcs-text)}
.bcp-hm-s{font-size:12px; line-height:1.4; color:var(--bcs-text-tertiary)}
.bcp-hm-ar{flex:none; font-size:18px; line-height:1; color:var(--muted); transition:transform .15s ease}
.bcp-hm-i.is-open .bcp-hm-ar{transform:rotate(90deg)}
/* メーター＝下端の色の帯。緑は満、黄は半分、灰は薄く短い（「まだ」であって「壊れた」ではない） */
.bcp-hm-m{position:absolute; left:0; bottom:0; height:3px; width:100%; background:var(--line)}
.bcp-hm-m::after{content:""; position:absolute; left:0; top:0; height:100%; width:0; border-radius:0 2px 2px 0}
.bcp-hm-i.is-ok  .bcp-hm-dot{background:#2E9E6B}
.bcp-hm-i.is-ok  .bcp-hm-s{color:#1F7A50; font-weight:600}
.bcp-hm-i.is-ok  .bcp-hm-m::after{width:100%; background:#2E9E6B}
.bcp-hm-i.is-att .bcp-hm-dot{background:#E0A800}
.bcp-hm-i.is-att .bcp-hm-s{color:#8A6100; font-weight:600}
.bcp-hm-i.is-att .bcp-hm-m::after{width:50%; background:#E8B923}
.bcp-hm-i.is-off .bcp-hm-dot{background:#B9BEC6}
.bcp-hm-i.is-off .bcp-hm-m::after{width:14%; background:#B9BEC6}
.bcp-hm-i.is-open .bcp-hm-m{display:none}
.bcp-hm-p{padding:0 14px 14px; border-top:1px solid var(--line); margin-top:0}
.bcp-hm-what{margin:12px 0 0; font-size:13px; line-height:1.8; color:var(--bcs-text-secondary)}
.bcp-hm-st,.bcp-hm-act{margin:10px 0 0; font-size:13px; line-height:1.8; display:grid; gap:2px}
.bcp-hm-stk{font-size:11.5px; font-weight:600; letter-spacing:.04em; color:var(--bcs-text-tertiary)}
.bcp-hm-stv{color:var(--bcs-text)}
.bcp-hm-i.is-att .bcp-hm-act .bcp-hm-stv{color:#6B4B00}
.bcp-hm-p .bcp-hmore{margin-top:10px}

/* 🔴 2026-09-12 読み込み中の骨組み（オーナー「スケルトンなども検討」）。
   出るものと同じ形を薄い灰で置き、ゆっくり明滅させる。文字は置かない。
   🔴 動きを減らす設定（prefers-reduced-motion）では明滅させない。 */
.oc-skel{display:block}
.oc-skel-k,.oc-skel-t,.oc-skel-h,.oc-skel-tab,.oc-skel-day,.oc-skel-time{
  display:block; border-radius:8px; background:#E3E8EE;   /* 🔴 surface-2 は白に近く、骨組みが見えなかった（実測） */
  animation:oc-skel-pulse 1.4s ease-in-out infinite;
}
.oc-skel-k{width:72px; height:12px; margin:0 0 8px}
.oc-skel-t{width:70%; max-width:320px; height:22px; margin:0 0 12px}
.oc-skel-c{margin-top:12px}
.oc-skel-h{width:120px; height:16px; margin:0 0 14px}
.oc-skel-row{display:flex; gap:8px; margin:0 0 12px}
.oc-skel-tab{width:52px; height:44px; border-radius:999px}
.oc-skel-day{flex:1 1 0; height:56px; border-radius:12px}
.oc-skel-grid{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px}
.oc-skel-time{height:44px; border-radius:10px}
@keyframes oc-skel-pulse{0%,100%{opacity:1} 50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){ .oc-skel *{animation:none} }
/* ホームの「次回の面談」に置く 変更・取り消し */
.oc-hm-acts{display:flex; gap:8px; flex-wrap:wrap; margin:12px 0 0}
.oc-hm-acts .bcp-btn{margin-top:0}

/* お願いすることの種類（2026-08-29 §4） */
.bcp-asks-top{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.bcp-asks-k{display:block; margin-top:4px; font-size:12px; line-height:1.7;
  color:var(--bcs-text-tertiary)}

.bcp-phase-s{margin:8px 0 0; font-size:13.5px; line-height:1.85; color:var(--bcs-text)}
/* これから見られるようになるもの。🔴 現在地の補足なので、本文より弱く。 */
/* これまでに済んだこと。🔴 カードにしない。数字と1文と細い帯だけ。
   🔴 達成率・パーセント・ゲーム的な演出は使わない（成果ではなく件数）。 */
/* 回答を送るボタン。🔴 §14: カード幅いっぱいにしない。内容に合わせた幅。
   ただしモバイルではタップ領域を十分に取る。 */
/* 🔴🔴 2026-09-08 オーナー指摘「回答を送るボタンのUIどうなの？」。実測して原因が2つあった。
   ① `.bcp-btn` の素の指定が `align-self:stretch`（親の幅いっぱい）で、
      `--send` の `width:auto` は**縦並びの親では効かない**（幅は align-self が決める）。
      `align-self:flex-start` に戻すのは 600px からで、**560〜599px は伸びたまま**だった。
   ② その伸びた状態で `display:inline-flex` になるため、`justify-content` の既定で
      文字が**左端に貼り付く**。＝「全幅の帯に左寄せの文字」＝ボタンに見えない。
   🔴 `margin-left:auto` は**縦並びでは右に寄らない**（横方向は align-self が持つ）。
      意図（§14「カード幅いっぱいにしない・内容に合わせた幅」）どおり右下へ置く。 */
.bcp-btn--send{justify-content:center; text-align:center}
@media (min-width:560px){
  .bcp-btn--send{
    display:inline-flex; width:auto; min-width:140px;
    align-self:flex-end;   /* 縦並びの親で「右へ」はこれ。margin-left:auto では効かない */
    margin-left:0;
  }
}
/* 🔴 選ぶ前は押せない。その表現が「色を55%薄くする」だけだと、
   **淡い青の帯**になって「押せるのに反応しない」ように見える（オーナー指摘の正体）。
   押せないものは、押せない見た目にする。 */
.bcp-btn--send:disabled{
  background:var(--bcs-surface-subtle); color:var(--bcs-text-tertiary);
  opacity:1; cursor:not-allowed;
}
.bcp-btn--send:disabled:hover{background:var(--bcs-surface-subtle)}

/* レポート（2026-08-30）。🔴 最新号だけカード。過去号は行。 */
.bcp-rp-new{display:block; text-decoration:none; color:inherit; margin:6px 0 0}
.bcp-rp-new .bcp-rp-ih{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.bcp-rp-latest{font-size:12px; font-weight:700; letter-spacing:.08em; color:var(--bcs-accent)}
.bcp-rp-nt{margin:8px 0 0; font-family:var(--font-head); font-size:20px; font-weight:700;
  line-height:1.5; color:var(--bcs-text)}
.bcp-rp-nl{margin:10px 0 0; font-size:14px; line-height:2; color:var(--bcs-text-secondary)}
.bcp-rp-new .bcp-task-cta{margin-top:14px}
.bcp-rp-past{margin:6px 0 0}
.bcp-rp-r{display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:12px 0; border-bottom:1px solid var(--bcs-border);
  text-decoration:none; color:inherit}
.bcp-rp-r:last-child{border-bottom:0}
.bcp-rp-r:hover .bcp-rp-rt{color:var(--bcs-accent)}
.bcp-rp-rl{min-width:0}
.bcp-rp-rt{display:block; font-size:14px; font-weight:600; color:var(--bcs-text)}
.bcp-rp-rm{display:block; margin-top:2px; font-size:12px; color:var(--bcs-text-tertiary)}
.bcp-rp-ra{flex:none; color:var(--bcs-text-tertiary)}

/* これまでの対応（2026-08-30 指示書）
   🔴 大きな数字・進捗バー・カードを廃止。件数は見出しの横に小さく。
   🔴 青を減らす（件数は成果ではないのでアクセント色にしない）。
   🔴 帯（.bcp-done-t / -f）と大数字（.bcp-done-v / -u）は定義ごと削除した。
      分母の無い件数に帯を付けると 30件＝100% に見える。戻さないこと。 */
.bcp-done-h{display:flex; align-items:baseline; justify-content:space-between; gap:12px}
.bcp-done-n{flex:none; font-size:13px; font-weight:600; color:var(--bcs-text-secondary);
  font-variant-numeric:tabular-nums}
.bcp-done-b{margin:6px 0 0; font-size:13.5px; line-height:1.9; color:var(--bcs-text-secondary)}

.bcp-phase-y{margin:6px 0 0; font-size:12.5px; line-height:1.85; color:var(--bcs-text-tertiary)}

/* 05 最近の変化。🔴 カードにしない（人が書いた文なので、読ませる形にする）。 */
.bcp-chg{padding:0 0 0 14px; border-left:2px solid var(--bcs-border-strong)}
.bcp-chg-b{margin:0 0 8px; font-size:14px; line-height:2; color:var(--bcs-text)}
.bcp-chg-b:last-of-type{margin-bottom:0}
.bcp-chg-m{margin:8px 0 0; font-size:12px; color:var(--bcs-text-tertiary)}

/* 目標の5段階。🔴 進捗バーにしない。位置が分かるだけの静かな並び。 */
/* 目指していること（2026-08-30 指示書）
   🔴 §19 カードに割らない。余白・字組・細い線・軽いアクセントだけで組む。
   🔴 §20 目立つ順は 目標 → 現在地 → 意味 → 4フェーズ → サイクル。
      **CSS もその順に強さを落とす**（数字を大きくして順序を壊さない）。
   🔴 §1 縦タイムラインは廃止。モバイルでも戻さない（§10）。 */

/* ② 現在地。🔴 2026-08-30（第2次指示）§2 左の青罫は廃止。字組だけで成立させる。
   🔴 §3 強さの順 … 数字で磨く ＞ 現在地 03 ＞ 説明文。 */
.bcp-gnow{margin:16px 0 0}
.bcp-gnow-k{display:flex; align-items:baseline; gap:7px; margin:0;
  font-size:12px; font-weight:600; letter-spacing:.06em; color:var(--bcs-text-secondary)}
.bcp-gnow-n{font-size:12px; font-weight:700; color:var(--bcs-text-secondary);
  font-variant-numeric:tabular-nums}
.bcp-gnow-t{margin:2px 0 0; font-size:19px; font-weight:700; line-height:1.45; color:var(--bcs-text)}
.bcp-gnow-d{margin:6px 0 0; font-size:13.5px; line-height:1.9; color:var(--bcs-text-secondary)}

/* ④ 目標までの4フェーズ。
   🔴 §4/§5 2×2の大きな塊をやめ、**1行に流す**。上下の余白を使わない。
   🔴 カード・丸・チェック・帯・巨大な数字は使わない。
   🔴 モバイルは折り返して2行まで。縦タイムラインには戻さない。 */
/* 🔴🔴 2026-09-03 オーナー指摘「01〜04のところ、デザイン整えられる？」（実機の写真つき）。
   実機で見ると **01/02/03 が1行目・04 だけが2行目に落ちて**いた。
   flex の折り返しは箱の幅任せなので、**文字数が変わるたびに折り返す位置が動く**。
   「4つの段階」なのに、3+1 に割れて**順路に見えていなかった**。
   🔴 直し方は「詰めて1行に収める」ではなく **4等分の枠に置く**（2列×2行で必ず揃う）。
      幅で決まるものを、数で決まるようにする。
   🔴 併せて、進んだところが**色だけ**でしか分からなかったので、
      各段階の上に細い線を1本引き、通過した段階だけ色を変える。
      カード・丸・チェック・帯は使わない（既存の決め）。線1本ぶんしか重さを足していない。 */
/* 🔴🔴 2026-09-05 オーナー指摘「4つがクリックできるタブに見える」。
   原因は**段階ごとに上の線を引いた**こと（2026-09-03に進行を見せるために足したもの）。
   線が4本に割れると、タブの下線と同じ形になる。
   🔴 直し方: **線を1本に戻す**（枠の上の1本だけ）。段階ごとの線は引かない。
      進行は「現在地の強調」と、すぐ上の『現在地 収穫・判定』が受け持つ。
   🔴 押せないものを押せるように見せない。cursor も既定のまま（default）。 */
.bcp-gsteps{list-style:none; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:12px 16px; margin:14px 0 0; padding:13px 0 0; border-top:1px solid var(--bcs-border)}
.bcp-gstep{display:flex; align-items:baseline; gap:6px; min-width:0; cursor:default}
/* 🔴 モバイルは2列×2行。**縦タイムラインには戻さない**（既存の決め）。 */
@media (max-width:600px){ .bcp-gsteps{grid-template-columns:repeat(2, minmax(0, 1fr))} }
.bcp-gstep-n{font-size:12px; font-weight:700; letter-spacing:.05em;
  color:var(--bcs-text-tertiary); font-variant-numeric:tabular-nums}
/* 🔴 §11 現在地より強くしない。過去も未来も**読める**濃さは保つ。
   🔴 2026-09-05: 現在地との差が弱かったので、**現在地以外を一段落とす**。
      強くするのではなく、まわりを下げる（新しい部品も色も足さない）。 */
.bcp-gstep-t{font-size:13px; line-height:1.6; color:var(--bcs-text-tertiary); min-width:0}
.bcp-gstep-n{color:var(--bcs-text-tertiary)}
/* 🔴 §4「03だけブランドカラーで強調」。
   同日の「青は対応が要るときだけ」より、**あとから確定したこちらを正とする**。 */
.bcp-gstep.is-now .bcp-gstep-n,
.bcp-gstep.is-now .bcp-gstep-t{color:var(--bcs-accent); font-weight:700}

/* ⑤ 改善サイクル。🔴 §16 円図にしない・現在地より目立たせない。 */
/* 🔴 2026-09-05: 4つの関係（目標→現在地→進行→サイクル）が読めるよう、
   間隔だけを整える。**外枠・カード・背景は足さない**。
   サイクルは前の3つと性質が違う（到達後も続く話）ので、区切りを一段広くとる。 */
/* 🔴 2026-09-06 その事業の節目（例「月商20万円の段階」）。
   固定名より弱く、説明文より少し強い。§3 の強さの順を崩さない。 */
.bcp-gnow-m{margin:2px 0 0; font-size:13px; font-weight:600; color:var(--bcs-text-secondary)}

.bcp-gcyc{margin:22px 0 0; padding:16px 0 0; border-top:1px solid var(--bcs-border)}
.bcp-gcyc-l{margin:0; font-size:13.5px; font-weight:700; color:var(--bcs-text)}
/* 🔴 「単なる文章」に見えていたので、語のあいだを開けて一続きの流れに見せる。
   円図・2×2にはしない（§16・オーナー確定）。矢印は薄いまま、位置だけ整える。 */
/* 🔴 2026-09-07 オーナー指示でカードに。語だけ・矢印は残す・↻ は消した。
   🔴 上の4段階（現在地）より弱く見せる（§20 現在地より目立たせない）。
      だから枠は細く、色は落とし、字も小さいまま。**カードだが主役ではない。**
   🔴 白カード基調（正典）。塗りつぶさず、細い罫線と余白で作る。 */
.bcp-gcyc-w{display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:12px 0 0}
.bcp-gcyc-t{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:84px; padding:9px 14px;
  font-size:13px; font-weight:600; color:var(--bcs-text-secondary);
  background:var(--bcs-surface, #fff);
  border:1px solid var(--bcs-border); border-radius:8px;
  /* 🔴 押せるものに見せない。影・下線・カーソル変化を付けない。 */
  cursor:default;
}
/* 🔴 折り返した行末に矢印が残らないように。矢印は「次がある」印なので、
   次が無い位置に出ると嘘になる（改行位置はCSSに任せているので、
   最後の矢印だけを消す ── 行末の判定はできないため、末尾で確実に消す）。 */
.bcp-gcyc-ar:last-of-type{display:none}

/* 🔴🔴 2026-09-07。このまとまりは**基本の指定より後ろ**に置くこと。
   最初これを上に書いたので、下の `.bcp-gcyc-w{display:flex}` に負けて効かず、
   スマートフォンで4段に潰れていた（実測: 390pxでカード幅350px×4段）。
   同じ強さの指定は、後に書いたほうが勝つ。
   🔴 スマートフォンでは2つずつ。4つ横に並べると1枚60pxになり字が潰れる。 */
@media (max-width:600px){
  .bcp-gcyc-w{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px}
  .bcp-gcyc-t{min-width:0; width:100%}
  /* 🔴 格子にすると矢印の置き場が無い。順番は下の一文が持つ。 */
  .bcp-gcyc-ar{display:none}
}
/* 🔴 矢印が薄すぎて、語が4つ並んでいるだけに見えていた。
   読める濃さにするが、語より強くはしない（矢印が主役にならないように）。 */
.bcp-gcyc-ar{font-size:12px; color:var(--bcs-text-secondary)}
/* 🔴 ↻ が押せるものに見えないよう、小さく・薄く・囲みなし。 */
/* 🔴 ↻ は「最後の語のあと」ではなく、**一続きの終わりに少し離して**置く。
   くっついていると「検証↻」という1語に見える。押せるものにも見せない。 */
.bcp-gcyc-lp{margin-left:8px; font-size:12px; color:var(--bcs-text-tertiary); cursor:default}
.bcp-gcyc-n{margin:8px 0 0; font-size:12.5px; line-height:1.9; color:var(--bcs-text-tertiary)}
/* 🔴 2026-09-12 いまの段階で行っていること（✔︎ の箇条書き・オーナー指示） */
.bcp-gcyc-k{margin:10px 0 0; font-size:12px; font-weight:600; letter-spacing:.04em; color:var(--bcs-text-secondary)}
.bcp-gcyc-list{list-style:none; margin:6px 0 0; padding:0; display:grid; gap:6px}
.bcp-gcyc-i{display:flex; align-items:flex-start; gap:8px; font-size:13.5px; line-height:1.7; color:var(--bcs-text)}
.bcp-gcyc-ck{flex:none; width:20px; height:20px; margin-top:2px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--blue-pale, #EAF2FB); color:var(--blue-ink, #1F4E79); font-size:11px; font-weight:700}
.bcp-gcyc-tx{min-width:0}

/* 現在のご契約（ホームの1行・2026-08-29 オーナー指示）。
   🔴 金額は出さない。お支払いの画面が正本。ここは「自分がどのプランか」だけ。
   🔴 左線アクセントも面の色も付けない（白カード基調）。 */
.bcp-hplan-h{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
/* 🔴 ピルはお支払い画面と同じ部品。ホームでは見出しの直下に来るので、
   上の余白だけ打ち消す（大きさと色は共通のまま ── 同じものを2つ作らない）。 */
.bcp-hplan-h .bcp-plan-pill{margin:0}
.bcp-hplan-k{font-size:13.5px; font-weight:700; color:var(--bcs-text-secondary)}
.bcp-hplan-b{margin:12px 0 0; font-size:13.5px; line-height:1.85; color:var(--bcs-text)}
/* 金額。🔴 お支払い画面のような巨大な数字にしない（ここは前提の1行）。 */
.bcp-hplan-m{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin:14px 0 0;
  padding-top:14px; border-top:1px solid var(--bcs-border)}
.bcp-hplan-mk{font-size:12.5px; font-weight:600; color:var(--bcs-text-secondary)}
.bcp-hplan-mv{font-family:var(--font-head); font-size:22px; font-weight:700;
  color:var(--bcs-text); font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.bcp-hplan-mu{margin-left:3px; font-size:12.5px; font-weight:600; color:var(--bcs-text-secondary)}
.bcp-hplan-s{margin:8px 0 0; font-size:12.5px; line-height:1.8; color:var(--bcs-text-secondary)}

/* ===== 施策 ／ データ連携 ==================================================== */
/* 🔴 2026-08-29 §27: カード1枚に全部入れるのをやめ、行＋divider にした。
   .bcp-ini-c（カードの内側余白）は使わなくなったので残さない。 */
.bcp-inis{margin:6px 0 0}

/* データ連携（2026-08-29 ⑦）。🔴 巨大カードにしない。行＋divider。
   PCは 左（何のデータか）／右（いまどうなっているか）の2カラム。 */
.bcp-conn{list-style:none; margin:6px 0 0; padding:0; max-width:820px}
.bcp-conn-i{display:grid; grid-template-columns:1fr; gap:6px 24px;
  padding:14px 0; border-bottom:1px solid var(--bcs-border)}
.bcp-conn-i:last-child{border-bottom:0}
@media (min-width:620px){ .bcp-conn-i{grid-template-columns:minmax(0,56fr) minmax(0,44fr)} }
.bcp-conn-l{min-width:0}
.bcp-conn-n{margin:0; font-size:14.5px; font-weight:700; line-height:1.5; color:var(--bcs-text)}
.bcp-conn-sv{margin:2px 0 0; font-size:12px; color:var(--bcs-text-secondary)}
.bcp-conn-w{margin:4px 0 0; font-size:12.5px; line-height:1.8; color:var(--bcs-text-tertiary)}
.bcp-conn-r{min-width:0}
/* 🔴 正常は静か。注意が要るものだけ、はっきり書く。 */
.bcp-conn-st{margin:0; font-size:13px; font-weight:600; color:var(--bcs-text)}
.bcp-conn-st.is-att{color:#8A6100}
.bcp-conn-f{margin:0; font-size:13px; color:var(--bcs-text); font-variant-numeric:tabular-nums}
.bcp-conn-note{margin:4px 0 0; font-size:12px; line-height:1.8; color:var(--bcs-text-secondary)}
.bcp-conn-since{margin:4px 0 0; font-size:12px; color:var(--bcs-text-tertiary)}
.bcp-conn-att{margin:0 0 14px; font-size:13px; color:#8A6100}

/* 掲載・申請（2026-08-29 §29）。🔴 1媒体1カードにしない。行＋divider。 */
.bcp-rg-group{margin:0 0 8px}
.bcp-rg-mine{margin:0 0 8px}
.bcp-ini{padding:14px 0; border-bottom:1px solid var(--bcs-border)}
.bcp-ini:last-child{border-bottom:0}
 /* 🔴 2026-08-30 オーナー指摘「進めていることの項目の左にアイコンついてみやすかった」。
    ── 調べたところ、施策の行にアイコンが入っていた事実は無い（ご確認側の記憶）。
       無かったものを戻すとは書けないので、**新しく付けた**。
    🔴 チェックマークは使わない。ここに並ぶのは *進行中* のもので、完了ではない。 */
.bcp-ini{display:grid; grid-template-columns:auto 1fr; gap:0 13px}
.bcp-ini-ic{
  grid-row:1 / span 99; flex:none; display:grid; place-items:center;
  width:38px; height:38px; margin-top:2px;
  border-radius:10px; background:var(--bcs-accent-soft); color:var(--bcs-accent);
}
.bcp-ini-h{display:flex; align-items:flex-start; justify-content:space-between; gap:10px}
.bcp-ini-t{margin:0; font-size:14.5px; font-weight:700; line-height:1.6; color:var(--bcs-text); min-width:0}
.bcp-ini-h .bcp-q-st{flex:none; margin-top:1px}
.bcp-ini-p{margin:4px 0 0; font-size:13px; line-height:1.8; color:var(--bcs-text-secondary)}
.bcp-ini-m{display:flex; flex-wrap:wrap; gap:3px 14px; margin:8px 0 0; font-size:12px;
  color:var(--bcs-text-tertiary)}
.bcp-ini-s{margin:8px 0 0; font-size:12.5px; line-height:1.8; color:var(--bcs-text);
  white-space:pre-wrap; overflow-wrap:anywhere}
.bcp-ini-n{margin:6px 0 0; font-size:12.5px; line-height:1.8; color:#8A6100}
 /* 🔴 積み上がった件数は近況。対応は要らない。 */
.bcp-ini-l{display:flex; flex-wrap:wrap; gap:3px 14px; margin:8px 0 0; font-size:12px;
  color:var(--bcs-text-tertiary); font-weight:600}

.bcp-cn{padding:14px 0; border-bottom:1px solid var(--bcs-border)}
.bcp-cn:last-child{border-bottom:0}
.bcp-cn-h{display:flex; align-items:flex-start; justify-content:space-between; gap:10px}
.bcp-cn-t{margin:0; font-size:14px; font-weight:700; color:var(--bcs-text); min-width:0}
.bcp-cn-m{display:flex; flex-wrap:wrap; gap:3px 14px; margin:5px 0 0; font-size:12px;
  color:var(--bcs-text-secondary); font-variant-numeric:tabular-nums}
.bcp-cn-n{margin:6px 0 0; font-size:12.5px; line-height:1.8; color:var(--bcs-text-secondary)}

/* ===== どんな人が・どこから・どの言葉で・どのページ（§12〜§16）==============
   🔴 円グラフは使わない（オーナー指示）。横棒と数字。
============================================================================ */
.bcp-aud{margin:0}
.bcp-aud-k{margin:16px 0 6px; font-size:12.5px; font-weight:700; color:var(--bcs-text-secondary)}

/* 100%積み上げ（2色）。
   🔴 2026-08-28 オーナー指示: グレーは未達・空白に見えるので使わない。
      どちらも実測値なので、両方に色を持たせる。
   🔴 緑は使わない（共通仕様）。金茶 #BB994B は本文比 2.70:1 なので使わない。
      同系の濃淡ではなく、**別の色相**にして「片方が薄い＝少ない」に見えないようにする。 */
.bcp-pair{margin:0 0 18px}
.bcp-pair:last-child{margin-bottom:0}
.bcp-pair-t{display:flex; height:10px; border-radius:999px; overflow:hidden;
  background:var(--bcs-surface-subtle)}
.bcp-pair-f{height:100%}
/* 🔴 2026-08-29 オーナー指示「青＋紫の表現も再検討を。意味のない派手さは不要」。
   別の色相にしていたのは「片方が薄い＝少ない」に見せないためだったが、
   色相を2つ使うと、画面全体の色数が増えて **どの色が重要なのかが消える**。
   同じ色相の濃淡にしたうえで、**両方に人数と割合を必ず添える**（既に添えてある）ので、
   「薄い＝少ない」の誤読は文字の側で防げる。 */
.bcp-pair-f--a{background:var(--bcs-accent)}
.bcp-pair-f--b{background:#BCD2E5}
.bcp-pair-lg{list-style:none; display:flex; flex-wrap:wrap; gap:4px 18px; margin:8px 0 0; padding:0}
.bcp-pair-lgi{display:flex; align-items:center; gap:6px; font-size:12.5px}
.bcp-pair-dot{width:9px; height:9px; border-radius:2px; flex:none}
.bcp-pair-dot--a{background:var(--bcs-accent)}
.bcp-pair-dot--b{background:#BCD2E5}
.bcp-pair-lgl{color:var(--bcs-text-secondary)}
.bcp-pair-lgn{font-weight:700; color:var(--bcs-text); font-variant-numeric:tabular-nums}
.bcp-pair-lgp{color:var(--bcs-text-tertiary); font-variant-numeric:tabular-nums}

.bcp-bar{margin:0 0 12px}
.bcp-bar:last-child{margin-bottom:0}
.bcp-bar-h{display:flex; justify-content:space-between; gap:12px; margin:0 0 5px; font-size:13px}
.bcp-bar-l{color:var(--bcs-text); min-width:0}
.bcp-bar-n{flex:none; font-weight:700; color:var(--bcs-text); font-variant-numeric:tabular-nums}
/* 🔴 積み上げの帯とは別に持つ（共有すると片方を変えたとき、もう片方が消える）。 */
.bcp-bar-f{height:100%; background:var(--bcs-accent); border-radius:999px}

.bcp-aud-c{list-style:none; margin:0; padding:0}
.bcp-aud-ci{display:flex; justify-content:space-between; gap:12px; padding:7px 0;
  border-bottom:1px solid var(--bcs-border); font-size:13px}
.bcp-aud-ci:last-child{border-bottom:0}
.bcp-aud-cn{font-weight:700; font-variant-numeric:tabular-nums}

.bcp-qw{list-style:none; margin:0; padding:0}
.bcp-qw-i{padding:10px 0; border-bottom:1px solid var(--bcs-border)}
.bcp-qw-i:last-child{border-bottom:0}
.bcp-qw-t{margin:0; font-size:13.5px; font-weight:700; line-height:1.6; color:var(--bcs-text);
  overflow-wrap:anywhere}
.bcp-qw-m{display:flex; flex-wrap:wrap; gap:3px 14px; margin:3px 0 0; font-size:12px;
  color:var(--bcs-text-secondary); font-variant-numeric:tabular-nums}

.bcp-pg-k{padding:10px 0; border-bottom:1px solid var(--bcs-border)}
.bcp-pg-kl{margin:0; font-size:14px; font-weight:700; color:var(--bcs-text)}
.bcp-pg-km{display:flex; flex-wrap:wrap; gap:3px 14px; margin:4px 0 0; font-size:12.5px;
  color:var(--bcs-text-secondary); font-variant-numeric:tabular-nums}
.bcp-pg-kr{font-weight:700; color:var(--bcs-accent)}
.bcp-pg-t{list-style:none; margin:0; padding:0}
.bcp-pg-ti{display:flex; justify-content:space-between; gap:12px; padding:7px 0;
  border-bottom:1px solid var(--bcs-border); font-size:12.5px}
.bcp-pg-ti:last-child{border-bottom:0}
.bcp-pg-tp{color:var(--bcs-text-secondary); overflow-wrap:anywhere; min-width:0}
.bcp-pg-tn{flex:none; font-weight:700; color:var(--bcs-text); font-variant-numeric:tabular-nums}

/* 期間の札（§4）。🔴 状態の札（絞り込み）と同じ見た目にする。別の部品を作らない。 */
.bcp-pchips{margin:0 0 12px}
.bcp-pchips--busy{opacity:.5; pointer-events:none}
.bcp-period-note{margin:-4px 0 14px; font-size:12.5px; line-height:1.8; color:var(--bcs-text-secondary)}

/* いつまで届いているか。🔴 節ごとに出す（指標で範囲が違うため）。 */
.bcp-srch-f{margin:0 0 12px; font-size:12px; line-height:1.7; color:var(--bcs-text-tertiary)}
/* 期間が足りていないときは、読み飛ばされないように少しだけ強くする。 */
.bcp-srch-f--cut{color:#8A6100}
.bcp-srch-n{margin:0 0 14px; font-size:12.5px; line-height:1.8; color:var(--bcs-text-secondary)}
.bcp-srch-g{display:flex; gap:22px; flex-wrap:wrap}
.bcp-srch-c{min-width:0}
.bcp-srch-k{margin:0; font-size:12.5px; line-height:1.6; color:var(--bcs-text-secondary)}
.bcp-srch-v{
  margin:4px 0 0; font-family:var(--font-head); font-size:26px; font-weight:700;
  line-height:1.2; color:var(--bcs-text); font-variant-numeric:tabular-nums;
}
.bcp-srch-u{margin-left:2px; font-size:12px; font-weight:600; color:var(--bcs-text-secondary)}

/* ===== 掲載・申請の台帳 ======================================================
   🔴 143件。カードで並べない。1件1行の詰めた一覧。
============================================================================ */
.bcp-chips--wrap{flex-wrap:wrap}
.bcp-chips--wrap .bcp-fchip{flex:0 1 auto; padding:0 12px}

.bcp-rg-list{display:block}
.bcp-rg-card, .bcp-rg-due{padding:2px 16px}
.bcp-rg-due{border-color:var(--bcs-accent)}
.bcp-rg-r{padding:13px 0; border-bottom:1px solid var(--bcs-border)}
.bcp-rg-r:last-child{border-bottom:0}
.bcp-rg-h{display:flex; align-items:flex-start; justify-content:space-between; gap:10px}
.bcp-rg-t{margin:0; font-size:14px; font-weight:700; line-height:1.6; color:var(--bcs-text); min-width:0}
/* 🔴 題名が来ていない行。無いことが見えるように、本文と同じ濃さにしない。 */
.bcp-rg-t--none{font-weight:400; color:var(--bcs-text-tertiary)}
.bcp-rg-h .bcp-q-st{flex:none; margin-top:1px}
.bcp-rg-m{
  display:flex; flex-wrap:wrap; gap:4px 14px; margin:5px 0 0;
  font-size:12px; line-height:1.7; color:var(--bcs-text-secondary);
}
 /* 🔴 既定は黒。お客様の手が要る行の期日だけ青くする（.is-mine）。 */
.bcp-rg-due-v{font-weight:700; color:var(--bcs-text); font-variant-numeric:tabular-nums}
.bcp-rg-due-v.is-mine{color:var(--bcs-accent)}
.bcp-rg-w{margin:6px 0 0; font-size:12.5px; line-height:1.8; color:var(--bcs-text-secondary);
  white-space:pre-wrap; overflow-wrap:anywhere}
/* 🔴 まだ書かれていないことが、書いてある理由と同じ濃さにならないように。 */
.bcp-rg-w--none{color:var(--bcs-text-tertiary); font-style:normal}
.bcp-rg-r .bcp-q-whyw{margin:6px 0 0}

/* 状態の札に「保留・やらない」用の落ち着いた色を足す。
   🔴 赤にしない。やらないのは判断であって、異常ではない。 */
.bcp-q-st--idle{background:var(--bcs-surface-subtle); color:var(--bcs-text-secondary)}

/* ===== 月次レポート ==========================================================
   🔴 読みものなので、行間と1行の長さを優先する（画面の密度を上げない）。
   🔴 供給元の強調（<b>）はそのまま効かせる。色は付けない（文字の太さだけ）。
============================================================================ */
.bcp-rp-list{display:flex; flex-direction:column; gap:12px}
.bcp-rp-i{display:block; width:100%; text-align:left; cursor:pointer; font:inherit}
.bcp-rp-ih{display:flex; align-items:baseline; gap:8px}
.bcp-rp-vol{
  flex:none; font-size:12px; font-weight:700; letter-spacing:.04em;
  color:var(--bcs-accent); font-variant-numeric:tabular-nums;
}
.bcp-rp-it{margin:0; font-size:16px; font-weight:700; line-height:1.45; color:var(--bcs-text)}
.bcp-rp-id{margin:4px 0 0; font-size:12px; color:var(--bcs-text-tertiary)}
.bcp-rp-il{
  margin:8px 0 0; font-size:13.5px; line-height:1.8; color:var(--bcs-text-secondary);
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden;
}

/* 🔴 本文の見た目の指定は消した。号はその案件のサイトで開く（メールのボタンと同じURL）。
   ここに残すと、使われないCSSが「本文もここで作っている」ように読めてしまう。 */

/* 添付。🔴 主役ではない（入口は「回答する」「済みにする」のほう）。 */
.bcp-task-at{margin:10px 0 0}
.bcp-task-atf{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}
.bcp-task-atb{
  display:inline-flex; align-items:center; gap:6px;
  min-height:36px; padding:0 12px; border-radius:8px; cursor:pointer;
  border:1px solid var(--bcs-border-strong); background:var(--bcs-surface);
  font-size:13px; font-weight:600; color:var(--bcs-text-secondary);
  -webkit-tap-highlight-color:transparent;
}
.bcp-task-atb:hover{border-color:#D8DEE6; background:#FCFDFE}
.bcp-task-atf:focus-visible + .bcp-task-atb{outline:2px solid var(--bcs-accent); outline-offset:2px}
.bcp-task-ats{display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 0}
.bcp-task-ats:empty{display:none}
.bcp-task-atn{
  display:block; width:72px; height:72px; border-radius:8px; overflow:hidden;
  border:1px solid var(--bcs-border);
}
.bcp-task-atn img{width:100%; height:100%; object-fit:cover; display:block}
.bcp-task-atm{margin:6px 0 0; font-size:12.5px; line-height:1.7; color:var(--bcs-text-secondary)}
/* お便りに添える分の一覧（送る前に外せる）。🔴 設問側の添付部品（.bcp-task-at*）に乗せているので、
   ここは「選んだファイル名と外すボタン」の並びだけを持つ。 */
.bcp-note-attl{list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:4px}
.bcp-note-attl:empty{display:none}
.bcp-note-atti{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:6px 10px; border:1px solid var(--bcs-border); border-radius:8px;
  font-size:13px; color:var(--bcs-text);
}
/* 送ったあとの一覧に出す、添えた画像へのリンク。 */
.bcp-note-fl{list-style:none; margin:6px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px}
.bcp-note-fi{font-size:13px}
.bcp-task-atm:empty{display:none}

/* 入口。🔴 1件につき1つ。ここでしか作らない。 */
.bcp-task-cta{
  display:flex; align-items:center; justify-content:flex-end; gap:4px;
  margin:12px 0 0; font-size:13.5px; font-weight:600; color:var(--bcs-accent);
}
.bcp-task-cta-ar{font-size:17px; line-height:1}
.bcp-task--tap{cursor:pointer; transition:border-color .15s, background-color .15s}
.bcp-task--tap:focus-visible{outline:2px solid var(--bcs-accent); outline-offset:2px}
.bcp-card.bcp-task--tap:hover{border-color:#D8DEE6; background:#FCFDFE}

/* 絞り込みの札。🔴 状態を選ぶもの。優先度の札ではない（優先度は出さない）。 */
/* 🔴 `.bcp-chip` は**計測環境の札**が先に使っている。名前を分ける。

   🔴 2026-08-27 オーナー指摘「すべて・対応中・完了のタグのデザインも見本と違う」。
      参考画像04 と**重ねて**確認した（数値を測るより速く、確実だった）:
        参考  等幅・全幅の**角丸長方形**（3つで1行を埋める）／高さ40／角丸10
              選択中＝淡い青の面＋青い枠＋青い字
              未選択＝白い面＋薄い枠＋灰の字
        実装  🔴 左寄せの丸いピル／高さ34／選択中＝青ベタに白抜き
      → 参考の形へ。 */
 /* 🔴🔴 2026-08-30 実画面で発覚（オーナー「確認・反映中崩れてる」）。
    札が4つになった案件で `flex:1 1 0` の等分が効き、いちばん語が長い
    「確認・反映中 33」が左右の padding 6px まで文字で埋まって、
    隣の「未回答 2」と地続きに見えていた。
    🔴 語の長さが違うものを等分幅に押し込まない。中身の幅にして、入らなければ折り返す。 */
.bcp-chips{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 var(--bcs-s4)}
.bcp-fchip{
  flex:0 1 auto; min-width:0; white-space:nowrap;
  display:inline-flex; align-items:center; justify-content:center; gap:5px;
  /* 🔴 2026-08-27 実測で 40px だった。タップ標的の下限は 44px。
     🔴 box-sizing は .bcp 配下で border-box を敷いてあるので、この 44 が実高になる
        （content-box のままだと padding が上に乗って揃わない）。 */
  min-height:44px; padding:0 14px; border-radius:10px; cursor:pointer;
  background:var(--bcs-surface); border:1px solid var(--bcs-border-strong);
  font:inherit; font-size:13px; font-weight:600; color:var(--bcs-text-secondary);
  white-space:nowrap;
}
.bcp-fchip-n{font-variant-numeric:tabular-nums}
.bcp-fchip[aria-pressed="true"]{
  background:var(--bcs-accent-soft); border-color:var(--bcs-accent); color:var(--bcs-accent);
}
.bcp-fchip:focus-visible{outline:2px solid var(--bcs-accent); outline-offset:2px}

/* 1件ぶん。見出しと状態を同じ行に置き、下に理由・状態が続く3行。 */
.bcp-q-h{display:flex; align-items:flex-start; justify-content:space-between; gap:10px}
/* 参考画像04 の見出しは、アイコン枠の右で1行に収まる大きさ。
   🔴 実装は行間が広く、カードの主役が見出しだけになっていた。 */
.bcp-q .bcp-q-label{margin:0; min-width:0; font-size:15px; line-height:1.45}
/* 表の中に入れた回答。 */
.bcp-q-ans{min-width:0}
.bcp-q-ans-d{margin:4px 0 0; font-size:12px; color:var(--bcs-text-tertiary)}
.bcp-q-v{margin:0; font-size:13px; line-height:1.7; color:var(--bcs-text)}

/* 長い本文。🔴 改行を潰さない ── 供給元の本文には箇条書きや見出しが入っている
   （実データで最大11本の改行）。潰すと全部が1行に繋がって読めなくなる。 */
.bcp-q-why, .bcp-q-v{ white-space:pre-wrap; overflow-wrap:anywhere; }
.bcp-clamp{
  display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden;
}
.bcp-clamp-off{ display:block; overflow:visible; }
/* 「なぜ聞いているかを読む」「全文を読む」。
   🔴 主役ではないので、ボタンらしい面を持たせない。ただし押せることは分かるように。 */
.bcp-more{
  display:inline-flex; align-items:center; min-height:32px; margin:4px 0 0; padding:0;
  background:none; border:0; cursor:pointer;
  font:inherit; font-size:13px; font-weight:600; color:var(--bcs-accent);
}
.bcp-more:focus-visible{outline:2px solid var(--bcs-accent); outline-offset:2px}
.bcp-q-st{
  flex:none; padding:2px 9px; border-radius:999px;
  font-size:12px; font-weight:600; white-space:nowrap;
}
.bcp-q-st--wait{color:var(--bcs-wait);   background:var(--bcs-wait-soft)}
.bcp-q-st--doing{color:var(--bcs-accent); background:var(--bcs-accent-soft)}
.bcp-q-st--ok{color:var(--bcs-ok);       background:var(--bcs-ok-soft)}

.bcp-plan-price-v{
  font-family:var(--font-head); font-size:18px; font-weight:600; color:var(--bcs-text);
  font-variant-numeric:tabular-nums;
}
.bcp-msg{margin:14px 0 0; font-size:var(--t-body); line-height:1.8; color:var(--ink-soft)}
/* 🔴 display:none にしない（読み上げには存在させ、ラベルで警告する）。画面外へ逃がす */
.bcp-hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}

/* ---------- Mobile: Top App Bar ---------- */
/* 🔴 Desktop には出さない（2026-08-26 オーナー確定 ④）。
   左サイドバーに BLOOM CONSULTING ＋ 案件切替が既にあり、上に足すと導線が二重になる。 */
.bcp-topbar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  height:52px; padding:0 14px;                 /* 左右は .bcp-main と同じ実測14 */
  background:var(--paper); border-bottom:1px solid var(--bcs-border);
  position:sticky; top:0; z-index:41;
}
@media (min-width:1024px){ .bcp-topbar{display:none} }

/* 🔴 2026-08-29 オーナー指摘「案件名が2回出ている」。
   ホームの見出しは案件名だが、案件名は**どの幅でも必ず別のところに出ている**
   （狭いとき＝上のバー／広いとき＝左のサイドバー）。だから画面からは常に外す。
   🔴 幅で出し分けない。片方の幅でだけ直すと、もう片方に残る（実際に残っていた）。
   🔴 読み上げには残す＝見出しの無いページを作らない。
   🔴 `display:none` は使わない（読み上げからも消える）。 */
.bcp-title--dup{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}
/* 🔴 ログイン・案件一覧はサイドバーが無い画面なので、Desktop でも出す。
   （出さないと、社名の無い画面でメールアドレスを求めることになる） */
@media (min-width:1024px){ .bcp-topbar--plain{display:flex} }
.bcp-topbar--plain{justify-content:flex-start}

/* 項目の少ない画面（ログイン）を縦の中ほどへ。🔴 固定高さは使わない。
   中身が伸びたときは min-height を超えて普通に流れる（切れない）。 */
/* ログイン画面。
   🔴 2026-08-29 オーナー「ログインページのUIどうにかならないの？ダサすぎない？」。
      実測すると、カードが画面いっぱい（1700px超）に広がり、入力欄が横一杯、
      中央に大きな空白が残っていた。**幅の設計が無かった**のが原因。
   🔴 公開サイトと同じ器に見せる。カードの幅を、読める幅で止める。 */
.bcp-in--center{
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  min-height:calc(100vh - 150px);
  min-height:calc(100dvh - 150px);
  text-align:left;
}
.bcp-in--center > *{width:100%; max-width:420px}
.bcp-in--center .bcp-title{
  /* 公開サイトの見出しと同じ立て方（字だけで見出しにする）。 */
  font-size:clamp(24px,1vw + 20px,28px); margin:0 0 6px;
}
/* 見出しの上に、どこの何かを置く。公開サイトの eyebrow と同じ役目。 */
.bcp-in--center .bcp-title::before{
  content:"CLIENT PORTAL";
  display:block; margin:0 0 10px;
  font-size:12px; font-weight:700; letter-spacing:.14em; color:var(--bcs-accent);
}
.bcp-in--center .bcp-card{
  padding:26px 24px; border-radius:14px;
}
.bcp-in--center .bcp-card > p:first-child{
  margin:0 0 20px; font-size:13.5px; line-height:1.9; color:var(--bcs-text-secondary);
}
.bcp-in--center .bcp-label{
  display:block; margin:0 0 6px; font-size:12.5px; font-weight:600; color:var(--bcs-text);
}
.bcp-in--center .bcp-input{width:100%; padding:13px 14px}
/* ボタンは公開サイトの Primary と同じ言語（角丸10px・地色が濃くなるだけ）。 */
.bcp-in--center .bcp-btn{width:100%; min-height:48px; border-radius:10px; margin-top:16px}
.bcp-in--center .bcp-note-sm{
  margin:16px 0 0; padding-top:16px; border-top:1px solid var(--bcs-border);
  font-size:12.5px; line-height:1.8; color:var(--bcs-text-secondary);
}
.bcp-topbar[hidden]{display:none !important}
.bcp-tb-brand{
  /* 「BLOOM CONSULTING」は英字なので字間を残す。 */
  margin:0; font-family:var(--font-head); font-size:12px; font-weight:600;
  letter-spacing:.06em; color:var(--ink); white-space:nowrap;
  /* 🔴 2026-09-11 実測（別の席）: 134×17。押せるのに指の標的として小さい。
     帯は 52px あるので、器を 44px にしても帯の高さは変わらない。 */
  display:inline-flex; align-items:center; min-height:44px;
}
.bcp-tb-switch{
  display:inline-flex; align-items:center; gap:4px; min-width:0;
  max-width:52%;                               /* 屋号を押し出さない */
  /* 🔴 2026-09-01 白ベース化: デスクトップの案件切替と同じく白＋罫線に揃える（淡青の塗りをやめる）。 */
  background:var(--paper); border:1px solid var(--line); border-radius:999px;
  /* 🔴 2026-08-27 実測で 28px だった。案件切替はタップ標的なので 44px にそろえる。
     🔴 見た目の高さは padding ではなく min-height で確保する。
        文字サイズを上げて稼ぐと、屋号が2行に折り返して逆に読みにくくなる。 */
  min-height:44px; padding:5px 12px; font:inherit; font-size:13px; color:var(--ink); cursor:pointer;
}
.bcp-tb-name{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bcp-tb-switch:focus-visible{outline:2px solid var(--blue); outline-offset:2px}

/* ---------- Mobile: Bottom Navigation ---------- */
/* 🔴 Desktop Sidebar を縮小表示しない。常時表示は いま／お客様／ご確認／その他（§4） */
.bcp-bottom{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  display:flex;
  background:var(--paper);
  border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
@media (min-width:1024px){ .bcp-bottom{display:none} }
/* 同上。Bottom Nav も display:flex が後から当たるので [hidden] が効かない。 */
.bcp-bottom[hidden]{display:none !important}
/* 🔴🔴 2026-09-12 オーナー指示「画面下の4つのタグ（ホーム、お客様など）が少し画面高さが足りなくて
   押しにくく感じる。uiux最強にして欲しい」。
   実測（直す前）: 1項目 48px（アイコン22＋ラベル12＋余白）。
   🔴 60px にする（アイコン 24・字 11.5・上下の余白を広げる）。当たりは項目の全面。
   🔴 いま居る所は、色だけでなく**上の短い線**でも示す（色が見分けにくい方にも分かる）。
   🔴 押した瞬間の手応え（背景がふっと出る）。長押しの選択・拡大は止める。 */
.bcp-bottom a{
  position:relative;
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  box-sizing:border-box; min-height:60px;
  padding:9px 4px 8px; text-decoration:none;
  color:var(--muted); font-size:11.5px; line-height:1.2; letter-spacing:.01em;
  -webkit-tap-highlight-color:transparent; -webkit-touch-callout:none; user-select:none;
  transition:background-color .12s ease, color .12s ease;
}
.bcp-bottom a:active{background:var(--surface-2, #F6F6F6)}
.bcp-bottom a[aria-current="page"]{color:var(--blue); font-weight:600}
.bcp-bottom a[aria-current="page"]::before{
  content:""; position:absolute; top:0; left:50%; width:28px; height:3px; border-radius:0 0 3px 3px;
  background:var(--blue); transform:translateX(-50%);
}
.bcp-bottom a:focus-visible{outline:2px solid var(--blue); outline-offset:-2px}
/* 🔴 2026-08-25 修正: top/left の無い position:absolute は「本来あった位置」を基準にする。
   親の a に位置指定が無かったため、バッジがフローから抜けてラベルの上に落ち、
   「ご確認」が「ご[1]」と読める状態になっていた（横断チェックの実寸モックで発覚）。
   a に基準を作り、ラベルの上ではなく右上へ出す。 */
/* 🔴 2026-08-25 バッジの重なりを修正（横断チェックの実寸モックで発覚）。
   当初 position:absolute だけを与えていたため、top/left が無く「本来あった位置」を基準に
   フローから抜け、「ご確認」が「ご[1]」と読める状態になっていた。

   絶対配置で右上へ逃がす案も試したが、**項目の高さが46pxしかなく、ラベルの上に
   十分な余地が無い**（実測: ラベル y821-834 / バッジ y814-830 でどうしても衝突）。
   絶対配置をやめ、ラベルと同じ行に**インラインで並べる**。重なりが原理的に起きない。 */
/* 🔴 2026-08-26: アイコンを入れて、参考画像どおり「アイコンの上／ラベルの下」に戻した。
   上の 2026-08-25 の記録は「アイコンが無く、項目の高さが46pxしかなかったとき」の話。
   高さが48pxになり、**バッジの基準をアイコンの箱にできる**ので重なりは起きない
   （ラベルとは別の要素の中に居る）。 */
.bcp-bico{position:relative; display:block; width:24px; height:24px; flex:none}
.bcp-bico svg{display:block}
.bcp-blabel{display:block}
.bcp-bottom .bcp-badge{
  position:absolute; top:-5px; left:100%; transform:translateX(-7px);
  min-width:15px; padding:0 4px; font-size:12px; line-height:15px; text-align:center;
  border:1.5px solid var(--paper);   /* 地と重なっても数字が読めるように縁を取る */
}

/* Bottom Nav に隠れないための余白 */
@media (max-width:1023px){ .bcp-main{padding-bottom:88px} }

/* ---------- 数字 ---------- */
/* 🔴 巨大なDashboard数字は使わない（§20）。KPIは Desktop 32〜40 / Mobile 28〜34 */
.bcp-num{
  font-family:var(--font-head);
  font-variant-numeric:tabular-nums;
  font-size:clamp(28px,2.2vw + 20px,40px);
  font-weight:600; line-height:1.15; color:var(--ink);
}

/* ---------- 動きへの配慮 ---------- */
@media (prefers-reduced-motion:reduce){
  .bcp *,.bcp *::before,.bcp *::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}

/* 「そのあと」＝ボードの進捗表（お答えいただいた件の現在地）。2026-08-27
   🔴 色は状態を表すためだけに使う。装飾では使わない。
   🔴 左に色の縦線は引かない（全案件で禁止）。 */
.bcp-q-oc{display:flex;flex-direction:column;gap:4px}
.bcp-q-ocv{margin:0;font-size:14px;line-height:1.7;color:#2A2A2A;letter-spacing:0}
.bcp-q-oc--amber .bcp-q-ocv::before{content:"対応中　";color:#8A6100;font-weight:600}
.bcp-q-oc--green .bcp-q-ocv::before{content:"";}

/* ===== 案件ごとの追加ページ（block 方式）2026-08-27
   🔴 カードは統一（#FFF / 1px #ECECEC / r16 / 影なし）。ここで新しい見た目を作らない。
   🔴 左の色帯は引かない。青は状態と操作だけ。 */
.bcp-lead{margin:0 0 14px;font-size:14px;line-height:1.7;color:#5B6270;letter-spacing:0}
/* 🔴🔴 2026-09-12 オーナー指示「ホームの画面に関して、セクションの分け目がわからないので、視線が分散する。
   （セクションを枠で囲うとか、見出しの左に縦線を入れるとか）階層が自然と理解できるような感じに」。
   🔴 節の見出し（h2）に**左の縦線**と、上の**細い区切り線＋広めの余白**。
      節の中の小見出し（いまの段階・次回の面談 など）には付けない ＝ 線が付くのは1階層だけ。
   🔴 カードを左線で飾らない（[[feedback-no-left-accent-cards]]）。線は見出しにだけ。 */
.bcp-sech{position:relative; margin:36px 0 14px; padding:2px 0 2px 12px; border-left:3px solid var(--blue);
  font-size:15px; font-weight:700; line-height:1.4; color:#1A1A1A; letter-spacing:0}
.bcp-sech:first-child{margin-top:0}
.bcp-sech::before{content:""; position:absolute; left:-3px; right:0; top:-18px; height:1px; background:var(--line)}
.bcp-sech:first-child::before{display:none}
/* 節の頭になる小見出し（面談・現在地）も同じ階層なので、同じ印を付ける */
.bcp-hm-k,.bcp-phase-k{border-left:3px solid var(--blue); padding-left:12px}
.bcp-hm .bcp-hm-k{position:relative}
.bcp-hm .bcp-hm-k::before{content:""; position:absolute; left:-3px; right:0; top:-18px; height:1px; background:var(--line)}

/* ── マイページの節（2026-09-11 オーナー指示「上から、カレンダー、プロジェクト、その下にその他」）
   🔴 見出しは `.bcp-sech`（画面ごとに違う見出しを作らない）。
   🔴 節どうしの間は、節の外余白で作る。見出しの margin-top で作ると、
      `:first-child` に当たった節だけ詰まる（実際そうなる並びになっている）。 */
.bcp-msec{margin:0 0 34px}
.bcp-msec:last-child{margin-bottom:0}
.bcp-msec > .bcp-sech{margin-top:0}
/* 節の中の小見出し。🔴 節の見出しと同じ強さにしない（どちらが親か読めなくなる）。 */
.bcp-msub{
  margin:22px 0 8px;
  font-size:12.5px; font-weight:700; color:var(--bcs-text-secondary); letter-spacing:.02em;
}
/* 🔴 `.bcp-todo-t` と両方が付くので、**組み合わせで**打ち消す。
   ファイルの並び順に頼ると、片方を動かした日に静かに戻る。 */
.bcp-todo-t.bcp-msub{font-size:12.5px; color:var(--bcs-text-secondary)}
.bcp-msec > .bcp-oq:first-of-type > .bcp-msub{margin-top:14px}
.bcp-msec > .bcp-todo{margin-top:0}
.bcp-msec > .bcp-todo > .bcp-todo-h > .bcp-msub{margin-top:0}

/* 先頭の要約 */
.bcp-msum{padding-top:18px;padding-bottom:18px}
.bcp-msum-t{margin:0;font-size:15px;line-height:1.6;color:#1A1A1A;letter-spacing:0}
.bcp-msum-n{font-size:24px;font-weight:700;margin-right:4px;font-variant-numeric:tabular-nums}

/* 見出しと札 */
.bcp-mh{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:8px}
.bcp-mh-t{margin:0;font-size:16px;font-weight:700;line-height:1.5;color:#1A1A1A;letter-spacing:0}
.bcp-msub{margin:0 0 10px;font-size:13px;line-height:1.7;color:#6B7280;letter-spacing:0}
.bcp-mbody{margin:0;font-size:14px;line-height:1.7;color:#2A2A2A;letter-spacing:0}
.bcp-mnote{margin:12px 0 0;font-size:13px;line-height:1.7;color:#6B7280;letter-spacing:0}

.bcp-tone{flex:0 0 auto;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap}
.bcp-tone--green{background:#EAF6EE;color:#1F6B3A}
.bcp-tone--amber{background:#FCF2E2;color:#8A6100}
/* 🔴 gray は「こちらでは動かせないもの」。悪い状態ではないので赤系にしない。 */
.bcp-tone--gray{background:#F1F2F4;color:#5B6270}

.bcp-mstat{margin-top:12px;padding-top:12px;border-top:1px solid #ECECEC}
.bcp-mstat-k{display:block;margin-bottom:4px;font-size:12px;font-weight:600;color:#6B7280;letter-spacing:.02em}
.bcp-mstat-v{margin:0;font-size:14px;line-height:1.7;color:#2A2A2A;letter-spacing:0}

/* 畳んだ一覧 */
.bcp-fold{padding:0;overflow:hidden}
.bcp-fold-h{display:flex;align-items:center;gap:10px;width:100%;padding:16px 20px;
  background:none;border:0;cursor:pointer;text-align:left;font:inherit;color:#1A1A1A}
.bcp-fold-t{font-size:15px;font-weight:700;letter-spacing:0}
.bcp-fold-c{padding:2px 8px;border-radius:999px;background:#F1F2F4;color:#5B6270;
  font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.bcp-fold-ar{margin-left:auto;color:#9AA1AC;font-size:20px;line-height:1;transition:transform .18s ease}
.bcp-fold--open .bcp-fold-ar{transform:rotate(90deg)}
.bcp-fold-b{padding:0 12px 12px;display:flex;flex-direction:column;gap:10px}
/* 🔴 [hidden] は display の指定に負ける。2026-08-26 にモバイルメニューで同じ罠を踏み、
   2026-08-27 にここで再発させた。display を書いたら必ずこの1行を添える。 */
.bcp-fold-b[hidden]{display:none !important}
/* 中のカードは枠を薄くして、入れ子だと分かるようにする（影は使わない） */
.bcp-fold-b .bcp-card{border-color:#F2F2F2}

/* 数値。🔴 数値が先・ラベルが後 */
.bcp-mnum{display:flex;gap:24px;flex-wrap:wrap}
.bcp-mnum-i{min-width:72px}
.bcp-mnum-v{margin:0;font-size:28px;font-weight:700;line-height:1.2;color:#1A1A1A;font-variant-numeric:tabular-nums;letter-spacing:0}
.bcp-mnum-u{margin-left:3px;font-size:13px;font-weight:600;color:#6B7280}
.bcp-mnum-l{margin:4px 0 0;font-size:13px;color:#6B7280;letter-spacing:0}
.bcp-card--tight{padding-top:16px;padding-bottom:16px}
.bcp-card--tight .bcp-mnum-v{font-size:20px}

/* KPI は2列。🔴 縦に6枚並べると、どれも同じ重さに見えて読めなかった */
.bcp-kgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.bcp-kgrid .bcp-card{padding:16px}
.bcp-kgrid .bcp-mnum-v{font-size:24px}
@media (max-width:359px){.bcp-kgrid{grid-template-columns:1fr}}
.bcp-kpi-t{margin:8px 0 0;font-size:12px;line-height:1.5;color:#8A6100;letter-spacing:0}

/* 目標 */
.bcp-goal-s{margin:0;font-size:17px;font-weight:600;line-height:1.65;color:#1A1A1A;letter-spacing:0}
.bcp-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
/* 🔴 2026-09-02 オーナー問い「これはやっぱり縦積みのほうがいいの？」への答え。
   5段は短い語なので、広い画面では**横1行**のほうが「道のり」に見える。
   縦に積むとカードが5行ぶん伸びる（高さが伸びる癖・feedback-card-height-creep）。
   ただし狭い画面では横に5つ入れると文字が潰れるので、**縦のまま**にする。
   ホームの「目指していること」も同じ概念を横で見せているので、形を揃える。 */
@media (min-width:768px){
  /* 🔴 素の .bcp-steps は flex-direction:column。ここで row に戻さないと縦のまま（実測で発覚）。 */
  .bcp-steps{ display:flex; flex-direction:row; align-items:flex-start; gap:0 }
  .bcp-mstep{ flex:1 1 0; min-width:0; flex-direction:column; align-items:flex-start;
    gap:6px; padding:2px 14px 2px 0; border-bottom:0; border-left:1px solid #F2F2F2 }
  .bcp-mstep:first-child{ border-left:0; padding-left:0 }
  .bcp-mstep:not(:first-child){ padding-left:14px }
  .bcp-mstep-l{ flex:none; font-size:13.5px; line-height:1.6 }
  .bcp-mstep-tag{ order:3 }
}
.bcp-mstep{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid #F2F2F2}
.bcp-mstep:last-child{border-bottom:0}
.bcp-mstep-n{flex:0 0 auto;width:24px;height:24px;border-radius:999px;background:#F1F2F4;color:#6B7280;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
.bcp-mstep-l{flex:1 1 auto;font-size:14px;color:#5B6270;letter-spacing:0}
.bcp-mstep--now .bcp-mstep-n{background:#1670BE;color:#FFF}
.bcp-mstep--now .bcp-mstep-l{color:#1A1A1A;font-weight:700}
.bcp-mstep-tag{flex:0 0 auto;font-size:12px;font-weight:600;color:#1670BE}

/* 🔴 .bcp-row-tag（「この案件」の印）は 2026-08-29 に廃止（オーナー指示）。
   使わない部品を残さないので、定義ごと消した。 */

/* 待っているあいだの細い線（2026-08-27・「読み込んでいます」の白カードを廃止）。
   🔴 中身の無いカードを置かない。カードは中身が在る場所の形なので、
      空のカードは「何か出るはず」と読ませたうえで、直後に別物へ入れ替わる。
   🔴 数字の形をした灰色の箱も置かない（共通仕様）。「数字がある」と暗示するため。 */
.bcp-wait{
  position:relative; height:2px; margin:0 0 20px;
  background:#ECECEC; border-radius:2px; overflow:hidden;
}
.bcp-wait-run{
  position:absolute; inset:0 auto 0 0; width:40%;
  background:var(--blue,#1670BE); border-radius:2px;
  animation:bcpWait 1.1s ease-in-out infinite;
}
@keyframes bcpWait{
  0%{transform:translateX(-100%)}
  100%{transform:translateX(250%)}
}
/* 🔴 動きを減らす設定の人には動かさない。線は残す（進行中だと分かるように）。 */
@media (prefers-reduced-motion: reduce){
  .bcp-wait-run{animation:none; width:100%; opacity:.35}
}

/* ===== Skeleton（2026-08-27 オーナー指示書）=========================================
   Design Keyword: Quiet / Instant / Stable / Progressive / Subtle

   🔴 「Loading画面」という概念をなくす。既知のUIは即出し、未知の部分だけ局所的に読み込む。
   🔴 実UIと同じ形・高さ・余白にする（切り替わるときに何も動かないこと＝CLS実質ゼロ）。
   🔴 テーマカラーを使わない。Neutral のみ。Skeleton が主役にならないこと。 */

:root{
  /* 🔴 一元管理。個別ページで色や速度を書かない。 */
  --sk-base:#EDEEF0;          /* 背景(#F6F7F9)よりわずかに濃い */
  --sk-shine:#F4F5F7;         /* ベースよりわずかに明るい（差は約3%） */
  --sk-radius:16px;           /* カードと同じ */
  --sk-radius-text:6px;       /* 文字は少し小さく */
  --sk-speed:1.6s;            /* 1.4〜1.8s */
  --sk-fade:120ms;            /* 80〜160ms */
}

.sk{
  background:var(--sk-base);
  border-radius:var(--sk-radius-text);
  position:relative; overflow:hidden;
}
/* 🔴 光は線ではなく幅のある柔らかいGradient。全体幅の28%。Glow・強い白は使わない。 */
.sk::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,
    transparent 0%, var(--sk-shine) 35%, var(--sk-shine) 65%, transparent 100%);
  transform:translateX(-100%);
  /* 🔴 500ms 経ってから光り始める。一瞬で終わる通信では光らせない。 */
  animation:skShine var(--sk-speed) linear .5s infinite;
  opacity:0;
}
@keyframes skShine{
  0%  {transform:translateX(-100%); opacity:1}
  100%{transform:translateX(100%);  opacity:1}
}
/* 🔴 Skeleton 全体の pulse・明滅はしない（指示書の禁止事項）。 */

/* 部品 ------------------------------------------------------------------ */
.sk-h{height:32px; border-radius:var(--sk-radius-text)}     /* 見出し */
.sk-t{height:15px; margin:0 0 8px}                          /* 本文1行 */
.sk-t:last-child{margin-bottom:0}
/* 🔴 本文は幅を変える。ただし毎回変えない（描き直すたびに長さが変わると不安定に見える）。 */
.sk-t--100{width:100%} .sk-t--90{width:90%} .sk-t--70{width:70%}
.sk-num{height:28px; width:56px; border-radius:var(--sk-radius-text)}
.sk-lbl{height:13px; width:64px; border-radius:var(--sk-radius-text)}
.sk-ic{width:46px; height:46px; border-radius:12px; flex:0 0 auto}

/* 実UIと同じ器に入れる。🔴 カードの枠・余白・角丸は本物と同じものを使う。 */
.sk-card{
  background:#FFFFFF; border:1px solid #ECECEC; border-radius:var(--sk-radius);
  padding:20px; margin:0 0 14px;
}
@media (min-width:1024px){ .sk-card{padding:24px} }
/* 数値カード3枚。実UIの .bcp-cards と同じ3列。 */
.sk-cards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:0 0 14px}
.sk-cards .sk-card{margin:0; padding:16px 12px; display:flex; flex-direction:column; align-items:center; gap:8px}
.sk-row{display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid #F2F2F2}
.sk-row:last-child{border-bottom:0}
.sk-row .sk-t{flex:1 1 auto; margin:0}

/* 🔴 200ms 経ってから、そっと出す。0〜200ms は何も出さない（ちらつくと逆に遅く感じる）。 */
.sk-wrap{opacity:0; animation:skIn 160ms ease-out .2s forwards}
@keyframes skIn{to{opacity:1}}

/* 🔴 2秒を超えたときだけ、短い状態表示。嘘の進捗ステップは出さない。 */
.sk-say{
  margin:14px 0 0; font-size:13px; color:#8B929C; letter-spacing:0;
  opacity:0; animation:skIn 200ms ease-out 2s forwards;
}

/* 実コンテンツへの入れ替え。🔴 opacity だけ。slide/zoom/bounce は使わない。 */
.bcp-in--enter{animation:skFade var(--sk-fade) ease-out}
@keyframes skFade{from{opacity:0}to{opacity:1}}

/* 🔴 動きを減らす設定：Shimmer 停止・Crossfade 最小化。Skeleton 自体は出す。 */
@media (prefers-reduced-motion: reduce){
  .sk::after{animation:none; opacity:0}
  .sk-wrap{animation:none; opacity:1}
  .sk-say{animation:none; opacity:1}
  .bcp-in--enter{animation:none}
}

/* 受付を止めていることの断り。🔴 警告に見せない（お客様の落ち度ではない）。 */
/* 🔴 .bcp-note-soft / .bcp-note-t は 2026-08-29 に削除。
   使っていたのはご確認の断り書きカード1箇所だけで、そこを1行に落としたので用が無くなった。
   使わない部品を残さない（次に読む人が「どこで使う枠か」を探すことになる）。 */

/* ===== 自分のやること（オーナー専用）2026-08-27 ==============================
   🔴 この画面の主役は見出しではなく「今日何をすべきか」。
   🔴 全項目にアイコンや札を付けない。付けるほど、どれが急ぎか分からなくなる。 */
.bcp-title--sm{font-size:clamp(26px,1.2vw + 20px,30px); margin-bottom:18px}

/* 🔴 2026-08-28: 案件一覧の下に移した。上に間を取り、一覧と地続きに見せない。 */
.bcp-todo{margin:30px 0 8px}
.bcp-todo-h{display:flex; align-items:baseline; gap:10px; margin:0 0 12px}
.bcp-todo-t{margin:0; font-size:16px; font-weight:700; color:#1A1A1A; letter-spacing:0}
.bcp-todo-n{
  font-size:13px; font-weight:700; color:#5B6270; font-variant-numeric:tabular-nums;
  background:#F1F2F4; border-radius:999px; padding:2px 9px;
}
/* 期限の束。🔴 ここだけ小さく太く。札は付けない（束そのものが状態なので）。 */
.bcp-todo-g{margin:16px 0 8px; font-size:12.5px; font-weight:700; color:#6B7280; letter-spacing:.02em}
.bcp-todo-g:first-of-type{margin-top:0}
.bcp-todo-g--over{color:#B3261E}

.bcp-todo-list{padding:4px 16px}
/* 🔴 行そのものの形は共通部品（.bcp-task）が持つ。
   ここに残すのは、この一覧に固有のこと＝行どうしの区切りだけ。 */
.bcp-todo-r{padding:14px 0; border-bottom:1px solid var(--bcs-border);
  transition:opacity .2s ease}
.bcp-todo-r:last-child{border-bottom:0}
.bcp-todo-r--done{opacity:0}
/* ワンタップの丸。🔴 44px を確保しつつ、見た目は小さく。 */
.bcp-todo-ck{
  flex:0 0 auto; width:22px; height:22px; margin:2px 0 0; padding:0;
  border:1.6px solid #C9CFD8; border-radius:999px; background:none; cursor:pointer;
  position:relative; -webkit-tap-highlight-color:transparent;
}
.bcp-todo-ck::before{content:""; position:absolute; inset:-11px}   /* 44×44 のタップ領域 */
.bcp-todo-ck:hover{border-color:var(--blue)}
.bcp-todo-ck:active{background:#E9F0FB}
.bcp-todo-ck:focus-visible{outline:2px solid var(--blue); outline-offset:2px}
.bcp-todo-ck[disabled]{opacity:.4}
/* 🔴🔴 2026-09-08 オーナー指示で、左端の丸をやめて言葉のあるボタンにした。
   🔴 主役ではない（読むための画面で、押すのは終わったときだけ）。青で塗らず、枠だけ。
   🔴 高さ44pxを確保する（指で押す画面）。 */
.bcp-todo-doneb{
  align-self:flex-start; margin:10px 0 0; min-height:36px; padding:7px 16px;
  background:#fff; border:1px solid var(--bcs-border-strong); border-radius:8px;
  font-family:var(--font-sans); font-size:13.5px; font-weight:600;
  color:var(--bcs-text); cursor:pointer;
}
.bcp-todo-doneb:hover{border-color:var(--bcs-accent); color:var(--bcs-accent)}
.bcp-todo-doneb:focus-visible{outline:2px solid var(--bcs-accent); outline-offset:2px}
.bcp-todo-doneb[disabled]{opacity:.45; cursor:not-allowed}
/* 完了にできなかったときの一言。🔴 黙って戻さない（押しても何も起きない、を作らない）。 */
.bcp-todo-err{margin:8px 0 0; font-size:13px; line-height:1.7; color:#8A3A3A}
/* 案件の見出し。🔴 カードにしない（Card in Card を避ける）。細い帯と件数だけ。 */
.bcp-todo-g2{display:flex; align-items:baseline; gap:10px; margin:22px 0 8px}
.bcp-todo-g2:first-of-type{margin-top:10px}
.bcp-todo-g2-t{font-family:var(--font-head); font-size:14.5px; font-weight:700; color:var(--bcs-text)}
.bcp-todo-g2-n{font-size:12.5px; color:var(--bcs-text-tertiary)}
/* やることへのひとこと。🔴 カードにしない（Card in Card を避ける）。 */
.bcp-todo-note{margin:10px 0 0}
.bcp-todo-noteb{display:flex; flex-direction:column; gap:8px; margin:8px 0 0}
.bcp-todo-noteb .bcp-btn{align-self:flex-start}
.bcp-todo-notel{list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:10px}
.bcp-todo-notei{padding-left:12px; border-left:2px solid var(--bcs-border)}
.bcp-todo-notei.is-ai{border-left-color:var(--bcs-accent)}
.bcp-todo-notet{margin:0; font-size:13.5px; line-height:1.85; color:var(--bcs-text); white-space:pre-wrap}
.bcp-todo-notem{margin:4px 0 0; font-size:12px; color:var(--bcs-text-tertiary)}
.bcp-btn--sm{padding:8px 16px; font-size:13.5px}

a/* 🔴 気をつけることは、理由と分けて出す（混ぜると読み飛ばされる）。 */
.bcp-todo-done{margin:14px 0 0; font-size:12.5px; color:#9AA1AC; letter-spacing:0}

/* 案件のロゴ。🔴 無い案件は頭文字のまま（無理に作らない）。 */
.bcp-pcard-ic img{width:100%; height:100%; object-fit:contain; display:block}
.bcp-pcard-ic--img{background:#FFFFFF; border:1px solid #EEF0F3}

/* ===== 案件の切り替え（2026-08-28）==========================================
   🔴 タップで開く／長押しでなぞって選ぶ、の両方に使う同じ一覧。
   🔴 2件未満では開かない（JS 側）。押しても何も起きないほうが、空の一覧より良い。 */
.bcp-swm{
  position:absolute; top:calc(100% + 6px); right:0; z-index:80;
  min-width:220px; max-width:min(320px, calc(100vw - 24px));
  background:#FFFFFF; border:1px solid rgba(13,27,42,.08); border-radius:14px;
  box-shadow:0 18px 44px -16px rgba(13,27,42,.22);
  padding:6px; display:flex; flex-direction:column; gap:2px;
  max-height:min(60vh, 420px); overflow-y:auto;
}
.bcp-swm-i{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:9px 10px; border:0; border-radius:10px; background:none; cursor:pointer;
  font:inherit; font-size:14.5px; font-weight:600; color:var(--bcs-text); text-align:left;
  -webkit-tap-highlight-color:transparent;
  transition:background .14s ease;
}
.bcp-swm-i:hover,.bcp-swm-i.is-on{background:#F5F8FD}
.bcp-swm-i:active{background:#E9F0FB}
.bcp-swm-i:focus-visible{outline:2px solid var(--bcs-accent); outline-offset:-2px}
/* 🔴 いま見ている案件は、選べないのではなく「ここに居る」と分かればよい。 */
.bcp-swm-i[aria-current="true"]{color:var(--bcs-accent)}
.bcp-swm-i[aria-current="true"]::after{content:"●"; margin-left:auto; font-size:12px}
/* 🔴 読み上げでは名前の直前に頭文字が読まれてしまう（案件名が二重に読まれる）。
   目印であって文字ではないので、読み上げから外す。 */
.bcp-swm-ic{
  flex:0 0 auto; display:grid; place-items:center; width:28px; height:28px;
  border-radius:8px; overflow:hidden;
  background:var(--bcs-accent-soft); color:var(--bcs-accent);
  font-size:13px; font-weight:700;
}
.bcp-swm-ic--img{background:#FFFFFF; border:1px solid #EEF0F3}
.bcp-swm-ic img{width:100%; height:100%; object-fit:contain; display:block}
.bcp-swm-n{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* 終了した案件も出す。🔴 ただし終了だと分かるように。 */
.bcp-swm-e{
  flex:0 0 auto; font-size:12px; font-weight:600; color:#8B929C;
  background:#F1F2F4; border-radius:999px; padding:2px 7px;
}
/* なぞって選んでいる間は、指の下を見やすくする（面を大きめに） */
.bcp-swm--drag .bcp-swm-i{padding-top:12px; padding-bottom:12px}
@media (prefers-reduced-motion: reduce){ .bcp-swm-i{transition:none} }

/* 空の画面の説明（2026-08-28）。🔴 ①何が出るか ②なぜ空か ③誰が何をすれば埋まるか */
.bcp-xp-w{margin:0; font-size:15px; line-height:1.75; color:#1A1A1A; letter-spacing:0}
.bcp-xp-y{margin:10px 0 0; font-size:14px; line-height:1.75; color:#5B6270; letter-spacing:0}
/* 🔴 運用側向けの行。顧客には出ない（JS で hidden）。見た目でも運用側だと分かるようにする。 */
.bcp-xp-n{
  margin:14px 0 0; padding:10px 12px; border-radius:10px; background:#FBFAF6;
  border:1px solid #EFEADC; font-size:13px; line-height:1.7; color:#6B6250; letter-spacing:0;
}
.bcp-xp-k{
  display:inline-block; margin-right:8px; padding:1px 7px; border-radius:999px;
  background:#EFEADC; color:#8A7A55; font-size:12px; font-weight:700;
}

/* 🔴 2026-08-28: 長押しでテキスト選択・拡大鏡・共有メニューが出ていた。
   長押しは「なぞって選ぶ」ための操作なので、iOS の既定の長押しを止める。
   🔴 切替まわりだけに限定する。ページ全体で選択を殺すと、
      本文をコピーしたい人まで巻き込む。 */
.bcp-tb-switch,.bcp-switch,.bcp-swm,.bcp-swm-i{
  -webkit-user-select:none; user-select:none;
  -webkit-touch-callout:none;      /* 長押しの共有メニュー・拡大鏡を出さない */
  -webkit-tap-highlight-color:transparent;
}

/* 一覧へ戻る導線。🔴 案件と同じ見た目にしない（切替先ではなく一段上へ戻るので）。 */
.bcp-swm-sep{display:block; height:1px; margin:6px 4px; background:#F1F2F4}
.bcp-swm-i--home{text-decoration:none; color:#5B6270; font-weight:600}
.bcp-swm-ic--home{background:#F1F2F4; color:#6B7280}

/* 設問の入力欄（2026-08-28）。🔴 型ごとに見た目を変えない。同じ器の中で形だけ変わる。 */
.bcp-af{display:flex; flex-direction:column; gap:8px}
.bcp-af-opt{
  display:flex; align-items:flex-start; gap:10px; min-height:44px;
  padding:9px 10px; border:1px solid #E6E9EE; border-radius:10px; cursor:pointer;
  font-size:14.5px; line-height:1.6; color:#1A1A1A; background:#FFFFFF;
  -webkit-tap-highlight-color:transparent;
}
.bcp-af-opt:hover{background:#F7F9FC}
.bcp-af-opt input{margin:3px 0 0; flex:0 0 auto; accent-color:var(--bcs-accent)}
.bcp-af-opt:has(input:checked){border-color:var(--bcs-accent); background:#F5F8FD}
.bcp-af-other{margin-top:2px}
.bcp-af-note{margin-top:2px}
/* 1行の入力＋単位。🔴 単位は入力欄の外（中に書くと値と一緒に送られる）。 */
.bcp-af:has(.bcp-af-one){flex-direction:row; align-items:center; gap:8px}
.bcp-af-one{flex:1 1 auto; min-width:0}
.bcp-af-unit{flex:0 0 auto; font-size:14px; color:#6B7280}

/* 書きかけを戻したときの注記（2026-09-09）。
   🔴 目立たせすぎない。**警告ではない**（お客様は何も間違えていない）。
   🔴 色だけに意味を持たせない。文で「まだお送りしていない」と言い切る。 */
.bcp-af-draft{margin:4px 0 0; font-size:13px; line-height:1.7; color:#5B6270}

/* お便りへの対応結果（2026-09-09）。設問の完了と同じ見え方にする。
   🔴 色だけで意味を出さない。文がそのまま読めること。 */
.bcp-note-oc{margin:6px 0 0; padding:7px 10px; border-radius:8px; background:#EDF7F1;
  color:#1F5D42; font-size:13px; line-height:1.75}
.bcp-note-ocd{color:#4B7A63; font-size:12px}

/* お休み中の帯（2026-09-09）。🔴 警告ではない（壊れていない）。
   🔴 色だけで意味を出さない。文がそのまま読めること。 */
.bcp-paused{margin:0 0 14px; padding:10px 13px; border-radius:9px;
  background:#F3F1EA; color:#5B5344; font-size:13.5px; line-height:1.75}
.bcp-paused-t{font-weight:600}
.bcp-paused-d{color:#867C69; font-size:12.5px}

/* 制作の進み具合（2026-08-28）。🔴 数字を並べず、関係を一目で。 */
.bcp-rs-lead{margin:0 0 14px; font-size:14px; line-height:1.75; color:#5B6270; letter-spacing:0}
.bcp-rs-bar{display:flex; height:10px; border-radius:999px; overflow:hidden; background:#F1F2F4}
.bcp-rs-seg{display:block; height:100%}
.bcp-rs-seg--done{background:#2E7D5B}
.bcp-rs-seg--partial{background:#C9A227}
.bcp-rs-seg--todo{background:#D6DAE0}
.bcp-rs-lg{list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:8px}
.bcp-rs-lgi{display:flex; align-items:center; gap:8px; font-size:14px; color:#2A2A2A}
.bcp-rs-dot{width:10px; height:10px; border-radius:3px; flex:0 0 auto}
.bcp-rs-lgl{flex:1 1 auto}
.bcp-rs-lgn{flex:0 0 auto; font-weight:700; font-variant-numeric:tabular-nums}

/* 数字の帯（2026-08-28）。🔴 数字が少ない塊にカードを使わない。枠を減らして数字は残す。 */
.bcp-kband{
  display:flex; flex-wrap:wrap; gap:8px 28px; align-items:baseline;
  padding:12px 4px 14px; border-bottom:1px solid #F1F2F4; margin:0 0 12px;
}
.bcp-kband-i{display:flex; align-items:baseline; gap:7px}
.bcp-kband-v{font-size:20px; font-weight:700; color:#1A1A1A; font-variant-numeric:tabular-nums; letter-spacing:0}
.bcp-kband-u{margin-left:2px; font-size:12px; font-weight:600; color:#6B7280}
.bcp-kband-l{font-size:13px; color:#6B7280; letter-spacing:0}

/* 畳んだ一覧の中の1件。🔴 カードにしない（Card in Card 禁止）。罫線1本で区切る。 */
.bcp-item{padding:14px 6px; border-bottom:1px solid #F2F2F2; background:none; border-radius:0}
.bcp-item:last-child{border-bottom:0}
.bcp-fold-b{padding:0 14px 10px; gap:0}
.bcp-fold-b .bcp-card{border-color:#F2F2F2}

/* 🔴 対応していない節。**目立たせないが、消さない**。
   お客様にとっては「読めない部分がある」だけなので、警告色にはしない。 */
.bcp-rp-s--skip{border:1px dashed var(--bcs-line); border-radius:12px; padding:16px 18px}
.bcp-rp-skip-t{margin:0; font-size:14px; font-weight:600; color:var(--bcs-ink)}
.bcp-rp-skip-d{margin:6px 0 0; font-size:13px; line-height:1.9; color:var(--bcs-muted)}

/* 誰がいつ答えたか。🔴 主役は回答の中身なので、目立たせない。 */
.bcp-q-ans-d--prev{color:var(--bcs-text-tertiary); font-size:12px}
.bcp-q-ans-prev{margin-left:6px; color:var(--bcs-text-tertiary); font-size:12px}

/* ===== ログインとお名前（2026-08-29）=========================================
   🔴 主役は案件の一覧なので、設定は静かに置く。カードに色を付けない。
============================================================================ */
.bcp-acc{margin-top:20px}
.bcp-acc-h{margin:0 0 4px; font-size:15px; font-weight:700; color:var(--bcs-text)}
.bcp-acc-lab{margin:14px 0 2px; font-size:13.5px; font-weight:700; color:var(--bcs-text)}
.bcp-acc-lab--2{margin-top:22px}
.bcp-acc-why{margin:0 0 8px; font-size:12.5px; line-height:1.8; color:var(--bcs-text-secondary)}
.bcp-acc-why--last{margin-top:12px}
.bcp-acc-row{display:flex; gap:8px; align-items:stretch; flex-wrap:wrap}
/* 🔴 2026-08-29: `flex:1 1 200px` を縦並びの中で使っていたため、
   flex-basis が**高さ**として効き、入力欄が 280px まで伸びていた（実測・画面で発覚）。
   高さは自分で決める。伸ばさない。 */
.bcp-acc-in{
  width:100%; min-width:0; height:46px; flex:0 0 auto; padding:0 12px;
  border:1px solid var(--bcs-border-strong); border-radius:10px;
  font:inherit; color:var(--bcs-text); background:var(--bcs-surface);
  /* 🔴 iOS は入力欄の文字が 16px 未満だと、触れた瞬間に画面を拡大する。
     14px にしていたので拡大していた（オーナー実機で発覚）。
     🔴 同じ注意はログインの入力欄（.bcp-input）に既に書いてあった。
        新しい入力欄を作るとき、そこを見ていなかった。 */
  font-size:16px;
}
.bcp-acc-in:focus-visible{outline:2px solid var(--bcs-accent); outline-offset:1px}
.bcp-acc-btn{
  flex:0 0 auto; min-height:42px; padding:0 14px; border-radius:10px; cursor:pointer;
  border:1px solid var(--bcs-accent); background:var(--bcs-surface);
  font:inherit; font-size:13.5px; font-weight:700; color:var(--bcs-accent);
}
.bcp-acc-btn:hover{background:#F5F8FD}
.bcp-acc-btn[disabled]{opacity:.5; cursor:default}
.bcp-acc-list{list-style:none; margin:0 0 10px; padding:0}
/* 🔴 2026-08-29 オーナー指摘「メールアドレスが折り返してしまってる」。
   名前・アドレス・注記/釦を1行に並べていたので、アドレスの幅が足りなかった。
     1段目  名前 ＋ アドレス
     2段目  注記（または削除の釦）
   🔴 1件のときと2件のときで**行の作りを変えない**（どちらも2段）。
   🔴 段が1つ増えるぶん、余白を 10px → 7px に詰めて総高を増やさない。 */
/* 🔴 2026-08-29: 名前は**アドレスごと**になった（オーナー指示）。
   1件＝「お名前の入力 ＋ そのアドレス ＋ 消す入口」で1つのまとまり。
   🔴 名前と住所を離さない。入力欄のすぐ下にアドレスを置く。 */
.bcp-acc-i{
  display:block; padding:12px 0; border-bottom:1px solid var(--bcs-border);
}
.bcp-acc-btn--sm{min-height:38px; padding:0 12px; font-size:13px}
.bcp-acc-i:last-child{border-bottom:0}
/* 🔴 390px で名前とアドレスが2行に折れないよう、名前は縮まない・アドレスは縮む。
   長いアドレスは省略せず折り返す（途中を隠すと、どのアドレスか分からなくなる）。 */

.bcp-acc-i--pend .bcp-acc-e{color:var(--bcs-text-secondary)}
.bcp-acc-pend{
  flex:0 0 auto; padding:1px 7px; border-radius:999px;
  background:var(--bcs-wait-soft); color:#8A6100; font-size:12px; font-weight:700; white-space:nowrap;
}
.bcp-acc-msg{margin:10px 0 0; font-size:13px; line-height:1.8; color:var(--bcs-text)}
.bcp-acc-msg--bad{color:#8A6100}
.bcp-acc-note{
  margin:8px 0 0; padding:9px 11px; border-radius:9px;
  background:var(--bcs-surface-subtle); font-size:12.5px; line-height:1.8;
  color:var(--bcs-text-secondary);
}
.bcp-acc-common{
  margin:0 0 10px; padding:8px 10px; border-radius:8px;
  background:var(--bcs-surface-subtle); font-size:12.5px; font-weight:600;
  color:var(--bcs-text-secondary);
}
/* ⓪ あなたにお願いすること（ホーム最上部・2026-08-29） */
 /* 🔴 2026-08-30 改名: bcp-asks-none → bcp-empty-note。
   ホームの「お願いすること」専用の名前だったが、実際はお支払い・ご確認・活動履歴でも
   使っていた（5箇所）。役目は「まだ無いことの説明」で共通なので、役目の名前にする。
   🔴 見た目は変えていない。名前だけ。 */
.bcp-empty-note{margin:0 0 4px; font-size:14px; line-height:1.9; color:var(--bcs-text-secondary)}
 /* 🔴🔴 2026-08-30 オーナー指摘「ご回答お待ちしていますとご対応をお願いしたいものは
    くっついてるのが正解？」── 正解ではない。
    この2つは **行き先も担当も別**（ご確認／掲載・申請）。
    1枚のカードに罫で押し込むと「1つのまとまりの中の2項目」に見える。
    🔴 別の用件は、別のカードにする。 */
/* ── 2026-09-11 オーナー「このセクションのカードのui変だよね」
   測った結果、他のカードと違っていたものが5つ:
     ① 行の下線（.bcp-asks-r の border-bottom）が、**1行しか無いときも引かれ**、
        カードの下枠の 1px 上に出ていた ＝ **枠が二重**に見えていた
     ② カードの余白が 0 で、中のボタンが 14px 24px。
        他のカードは 20px（広い画面は 24px）。**上下と左右で違う値**だった
     ③ 文字が 14.5px と 14px。**0.5px の差**が隣り合い、揃っている他（15/13px）から外れていた
     ④ 「確認事項へのご回答」の行は **CSS が1行も無かった**（親から継いだ 12px/400）
     ⑤ 「›」が 5x17。他の矢印と同じ 17px なのに、色も余白も決まっていなかった
   🔴 カードの余白は 0 のまま（ボタンをカードいっぱいに広げて、指で押しやすくするため）。
      **同じ値をボタン側に持たせる**。 */
.bcp-asks{padding:0; display:flex; flex-direction:column; gap:0}
.bcp-asks-r{
  background:#FFFFFF; border:1px solid #ECECEC; border-radius:14px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  width:100%; padding:14px var(--bcs-s5); border:0; background:none; cursor:pointer;
  font:inherit; text-align:left; color:var(--bcs-text);
  border-bottom:1px solid var(--bcs-border);
}
.bcp-asks-r{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  padding:20px; background:none; border:0; border-radius:16px; cursor:pointer; font:inherit;
}
/* 🔴 区切りは**行と行のあいだ**にだけ。最後の行に引くと、カードの下枠と二重になる。 */
.bcp-asks-r + .bcp-asks-r{border-top:1px solid #ECECEC; border-radius:0}
.bcp-asks-r:hover{background:var(--surface-2, #FAFAFA)}
.bcp-asks-r:focus-visible{outline:2px solid var(--blue); outline-offset:-2px}
@media (min-width:1024px){ .bcp-asks-r{padding:24px} }
/* 🔴 2026-08-29: 種類（確認事項へのご回答）を足したとき、ここが横並びのままだったので
   種類が右へ押し出されて2行に折り返していた（オーナー指摘）。
   ラベルと件数は1行、種類はその下。 */
.bcp-asks-t{display:block; min-width:0}
/* 🔴 15px/13px の段に合わせる（14.5px という半端な値を作らない） */
.bcp-asks-l{font-size:15px; font-weight:600; color:var(--bcs-text)}
.bcp-asks-n{flex:0 0 auto; font-size:15px; font-weight:700; color:var(--bcs-accent)}
/* 🔴 これは定義が1行も無く、親から継いでいた。決めて書く。 */
.bcp-asks-k{display:block; margin:4px 0 0; font-size:13px; line-height:1.6; color:var(--muted)}
.bcp-asks .bcp-task-cta-ar{flex:0 0 auto; margin-left:auto; color:var(--muted)}
.bcp-step-next{margin:4px 0 0; font-size:12px; color:var(--bcs-text-tertiary)}

/* ログイン履歴（オーナーのみ） */
.bcp-si-g{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:18px 0 4px; padding-bottom:6px; border-bottom:1px solid var(--bcs-line, #e8e8e8); font-size:13px; font-weight:700; color:var(--bcs-text)}
.bcp-si-g:first-of-type{margin-top:8px}
.bcp-si-gc{font-weight:500; font-size:12px; color:var(--bcs-text-secondary); font-variant-numeric:tabular-nums}
.bcp-si-i{display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:9px 0}
.bcp-si-n{font-size:13.5px; font-weight:600; color:var(--bcs-text)}
.bcp-si-t{flex:0 0 auto; font-size:12.5px; color:var(--bcs-text-secondary); font-variant-numeric:tabular-nums}

/* 招く欄。🔴 名前とアドレスを1つのまとまりに（同時に登録するので）。 */

/* 🔴 .bcp-hk（ホームの数字カード）は 2026-08-29 に廃止。定義ごと消した。 */

/* ===== ログインする方とお名前（2026-08-29 作り直し）=========================
   🔴 ふだんは**読むもの**。1人＝1行（お名前／アドレス）。
      直すときだけ入力欄になる（押されたときに作る・隠した入力欄をDOMに残さない）。
   🔴 それまでは1人につき入力欄と釦が常に開いていて、
      2人並べただけで**記入用紙**に見えていた（オーナー指摘）。
========================================================================== */
.bcp-acc-i{padding:12px 0; border-bottom:1px solid var(--bcs-border)}
.bcp-acc-i:last-of-type{border-bottom:0}
.bcp-acc-h1{display:flex; align-items:center; gap:8px}
.bcp-acc-nm2{margin:0; flex:1 1 auto; min-width:0; font-size:15px; font-weight:700; color:var(--bcs-text)}
.bcp-acc-i--pend .bcp-acc-nm2{color:var(--bcs-text-secondary)}
.bcp-acc-acts{flex:0 0 auto; display:flex; gap:10px}
.bcp-acc-link{
  border:0; background:none; padding:0; cursor:pointer; font:inherit;
  font-size:12.5px; color:var(--bcs-accent); text-decoration:underline; text-underline-offset:2px;
}
.bcp-acc-link--rm{color:var(--bcs-text-secondary)}
.bcp-acc-link[disabled]{opacity:.5; cursor:default}
.bcp-acc-e{margin:4px 0 0; font-size:12.5px; color:var(--bcs-text-secondary); overflow-wrap:anywhere}
.bcp-acc-only{margin:4px 0 0; font-size:12px; color:var(--bcs-text-tertiary)}
.bcp-acc-edit{display:flex; align-items:center; gap:8px; margin:8px 0 0}
.bcp-acc-edit .bcp-acc-in{flex:1 1 auto; width:auto}
.bcp-acc-btn--sm{flex:0 0 auto; min-height:38px; padding:0 12px; font-size:13px}
.bcp-acc-add-b{
  display:inline-flex; align-items:center; gap:6px; margin:12px 0 0;
  border:0; background:none; padding:0; cursor:pointer; font:inherit;
  font-size:13.5px; font-weight:700; color:var(--bcs-accent);
}
.bcp-acc-plus{font-size:15px; line-height:1}
.bcp-acc-add{display:flex; flex-direction:column; align-items:stretch; gap:8px; margin:10px 0 0}
.bcp-acc-add .bcp-acc-btn{align-self:flex-start}
.bcp-acc-nm2--none{color:#8A6100; font-weight:600; font-size:13px}

/* ============================================================================
   お客様（2026-08-29 再設計 v2・オーナー指摘を受けて構成から作り直し）
   🔴 v1 は「既存情報の並べ替え」に留まっていた。読むUIになっていて、
      一目で関係が分かる形になっていなかった。
   🔴 v2 の要点
      ① 検索 → サイト → 結果 を**1本の帯**に。ゾーン間は縦線で切る（集計元が違う）
      ② 内訳は2列。縦に4節積むと、それだけで壁になる
      ③ 見せ方を4種類に分ける（帯／構成メーター／言葉の一覧／件数の一覧）
      ④ 余白は「まとまりの中は詰め、まとまりの外を空ける」
   ============================================================================ */

/* ① サマリー（4指標）--------------------------------------------------------
   🔴 4枚のKPIカードにしない。1つの領域の中を、余白と字組だけで4つに分ける。
   🔴 矢印は置かない（因果・連続・同じ母集団を示してしまう）。 */
/* 🔴 2026-08-29 オーナー指示「セクションごとに少しゆとりを」。
   まとまりの**中**は詰めたまま、まとまりの**外**を広げる。
   詰め直すのではなく、境目を分かりやすくするための余白。 */
.cx-sum{display:grid; grid-template-columns:repeat(2,1fr); gap:22px 24px;
  margin:18px 0 0; padding:22px 0; border-top:1px solid var(--bcs-border-strong);
  border-bottom:1px solid var(--bcs-border-strong)}
@media (min-width:760px){ .cx-sum{grid-template-columns:repeat(4,1fr)} }
.cx-sum-c{min-width:0}
.cx-sum-k{margin:0; font-size:12.5px; line-height:1.6; color:var(--bcs-text-secondary)}
.cx-sum-v{margin:4px 0 0; font-family:var(--font-head); font-size:27px; font-weight:700;
  line-height:1.2; letter-spacing:-.01em; color:var(--bcs-text);
  font-variant-numeric:tabular-nums}
.cx-sum-u{margin-left:3px; font-size:13px; font-weight:600; color:var(--bcs-text-secondary)}
.cx-sum-v2{margin-left:10px}

/* Google検索での見え方 ＝ 別ブロック。🔴 上の4指標と繋がって見えないよう、間を空ける。 */
.cx-srch{display:flex; gap:14px 44px; flex-wrap:wrap; margin:0}
/* 🔴 2026-08-29: 検索ブロックはサマリーの直後ではなく、内訳の2段目へ移した
   （読む順の組み替え）。ここでの見出し余白の指定は不要になったので消す。 */
.cx-srch-c{min-width:0}
.cx-srch-v{margin:3px 0 0; font-family:var(--font-head); font-size:21px; font-weight:700;
  line-height:1.25; color:var(--bcs-text); font-variant-numeric:tabular-nums}

/* ② 内訳の2列 -------------------------------------------------------------- */
/* 🔴🔴 2026-08-29 実測して分かったこと。等分（1fr 1fr）は既定で選んだだけで、
   中身に合っていなかった。1440px で各列 532px のとき:
     左  どこから来たか（帯＋数値）／Google検索での見え方（数字2つ）… **余る**
     右  どんな人が見ているか（輪64＋凡例190＋国内訳220≒500）／検索キーワード（文章2行）… **詰まる**
   特に2段目の左は「58,244 / 723」の2つだけで 532px を使っていた。
   🔴 0.8fr : 1fr ＝ 約 44 : 56。数字は左に寄せ、文章と輪に幅を渡す。
   🔴 あわせてこの画面の本文を 1040px までにする。1112px あると、
      帯の左端のラベルから右端の数値まで視線が長い（お支払い画面と同じ理由）。 */
.cx-sum,.cx-grid{max-width:1040px}
.cx-grid{display:grid; grid-template-columns:1fr; gap:40px 48px; margin:42px 0 0;
  align-items:start}
@media (min-width:1000px){
  .cx-grid{grid-template-columns:minmax(0,0.8fr) minmax(0,1fr)}
}
.cx-sec{min-width:0}
/* 最後の段（よく見られているページ）は全幅。 */
@media (min-width:1000px){ .cx-sec--wide{grid-column:1 / -1} }
/* 全幅の段では、種類の比較を2つ横に並べたまま、ランキングを下に敷く。 */
@media (min-width:1000px){ .cx-sec--wide .cx-two{max-width:640px} }
.cx-sec .bcp-sech{margin-top:0}
.cx-sub{margin:20px 0 7px; font-size:12.5px; font-weight:700; color:var(--bcs-text-secondary)}
.cx-note{margin:8px 0 0; font-size:12px; line-height:1.9; color:var(--bcs-text-tertiary);
  max-width:1040px}
/* 上部の注記は本文と同じ列にあるので、少し離す。 */
.cx-note--top{margin-top:10px}
.cx-cap{margin:0 0 6px; font-size:12.5px; color:var(--bcs-text-secondary)}
.cx-two{display:grid; grid-template-columns:1fr; gap:16px 20px}
@media (min-width:560px){ .cx-two{grid-template-columns:1fr 1fr} }

/* ③-a 流入元 ＝ 帯（この画面で帯を使うのはここだけ） ------------------------- */
.cx-rank{list-style:none; margin:0; padding:0}
.cx-rank-i{display:grid; grid-template-columns:minmax(0,1fr) minmax(60px,32%) auto;
  align-items:center; gap:12px; padding:5px 0}
.cx-rank-l{font-size:13px; line-height:1.6; color:var(--bcs-text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cx-rank-t{height:5px; border-radius:3px; background:var(--bcs-border); overflow:hidden}
/* 🔴 1件のような極端に小さい値でも、帯があること自体は分かるようにする
   （幅0だと「データが無い」に見える）。 */
.cx-rank-f{display:block; height:100%; min-width:3px; border-radius:3px;
  background:var(--bcs-accent)}
.cx-rank-n{font-size:13px; font-weight:600; font-variant-numeric:tabular-nums;
  color:var(--bcs-text); min-width:3.4em; text-align:right}

/* ③-b 訪問者 ＝ ドーナツ（2026-08-29 オーナー指示） -------------------------- */
/* 🔴 輪は縦に2つ。海外の内訳は「国内／海外」の輪の横。
   🔴 モバイル（横に置けない幅）では、内訳が輪の下へ回り込む。 */
.cx-vis{display:grid; grid-template-columns:1fr; gap:20px}
.cx-vis-b + .cx-vis-b{padding-top:18px; border-top:1px solid var(--bcs-border)}
.cx-vis-row{display:flex; align-items:flex-start; gap:20px 28px; flex-wrap:wrap}
/* 🔴 flex の既定は「中身の幅まで縮む」なので、中の auto-fit が1列に落ちていた
   （実測: 内訳の幅が 104px のまま4行）。**余った幅を受け取る**ようにする。 */
.cx-vis-side{flex:1 1 220px; min-width:0}
.cx-vis-sk{margin:0 0 5px; font-size:12px; font-weight:700; color:var(--bcs-text-tertiary)}
/* 🔴 2026-08-29 オーナー指摘「縦に長い。デスクトップで2行にできる？」。
   画面幅ではなく**入る場所の幅**で決める（この一覧は右カラムの中の、さらに輪の横にある）。
   auto-fit なら、幅が足りれば2列・3列になり、足りなければ1列に落ちる。
   媒体ごとの分岐を書かずに、置かれた場所に合わせて畳める。 */
.cx-ctry{list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(104px, 1fr)); gap:1px 18px}
.cx-ctry li{display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  padding:1px 0; font-size:12.5px; line-height:1.75}
.cx-ctry-l{color:var(--bcs-text-secondary);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cx-ctry-n{flex:none; font-weight:600; color:var(--bcs-text); font-variant-numeric:tabular-nums}

.cx-donut{display:flex; align-items:center; gap:16px}
.cx-donut-s{flex:none}
.cx-donut-a{stroke:var(--bcs-accent)}
.cx-donut-b2{stroke:#BCD2E5}
.cx-donut-l{list-style:none; margin:0; padding:0; min-width:0}
.cx-donut-l li{display:flex; align-items:baseline; gap:7px; padding:2px 0; font-size:12.5px;
  line-height:1.7}
.cx-donut-d{width:8px; height:8px; border-radius:2px; flex:none; align-self:center}
.cx-donut-d--a{background:var(--bcs-accent)}
.cx-donut-d--b{background:#BCD2E5}
.cx-donut-k{color:var(--bcs-text-secondary)}
.cx-donut-n{font-weight:700; color:var(--bcs-text); font-variant-numeric:tabular-nums}
.cx-donut-p{color:var(--bcs-text-tertiary); font-variant-numeric:tabular-nums}

/* ③-b2 補助 -------------------------------------------------------------- */
.cx-inline{list-style:none; display:flex; flex-wrap:wrap; gap:3px 16px; margin:0; padding:0;
  font-size:12px; color:var(--bcs-text-secondary)}
.cx-inline li{display:flex; gap:5px}
.cx-inline-n{font-weight:600; color:var(--bcs-text); font-variant-numeric:tabular-nums}

/* ③-c 検索キーワード ＝ 言葉が主役の一覧 ------------------------------------ */
.cx-kw{list-style:none; margin:0; padding:0}
.cx-kw-i{padding:10px 0; border-bottom:1px solid var(--bcs-border)}
.cx-kw-i:last-child{border-bottom:0}
.cx-kw-h{display:flex; align-items:baseline; justify-content:space-between; gap:12px}
.cx-kw-q{margin:0; font-size:14px; font-weight:600; line-height:1.5; color:var(--bcs-text);
  min-width:0; overflow-wrap:anywhere}
.cx-kw-p{flex:none; margin:0; font-size:12.5px; color:var(--bcs-text-secondary);
  font-variant-numeric:tabular-nums}
.cx-kw-m{margin:3px 0 0; font-size:12.5px; line-height:1.8; color:var(--bcs-text-tertiary);
  font-variant-numeric:tabular-nums}

/* ③-d ページ ＝ 件数と割合の一覧（帯を使わない） ----------------------------- */
.cx-pg{list-style:none; margin:0; padding:0}
.cx-pg-i{display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:7px 0; border-bottom:1px solid var(--bcs-border)}
.cx-pg-i:last-child{border-bottom:0}
.cx-pg-p{min-width:0}
/* ページ名を主、URLを補助に。🔴 名前が取れていないときはパスが主になる。 */
.cx-pg-t{display:block; font-size:13px; line-height:1.6; color:var(--bcs-text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cx-pg-t--path{color:var(--bcs-text-secondary)}
.cx-pg-u{display:block; font-size:12px; line-height:1.5; color:var(--bcs-text-tertiary);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cx-pg-n{flex:none; font-size:13px; font-weight:600; color:var(--bcs-text);
  font-variant-numeric:tabular-nums}
.cx-pg-s{margin-left:8px; font-weight:400; color:var(--bcs-text-tertiary)}

/* ページの種類ごとの比較 */
.cx-kind{padding:12px 14px; background:var(--bcs-bg); border-radius:8px}
.cx-kind-l{margin:0; font-size:12.5px; font-weight:700; color:var(--bcs-text)}
.cx-kind-v{margin:4px 0 0; display:flex; align-items:baseline; gap:4px}
 /* 🔴 割合は測った値。読むだけのものなので青にしない（大きさと太さで見せる）。 */
.cx-kind-r{font-family:var(--font-head); font-size:19px; font-weight:700;
  color:var(--bcs-text); font-variant-numeric:tabular-nums}
.cx-kind-ru{font-size:12.5px; color:var(--bcs-text-secondary)}
.cx-kind-m{display:flex; gap:12px; margin:4px 0 0; font-size:12px; color:var(--bcs-text-tertiary)}

/* サイドバーの群見出し。🔴 装飾線は置かない。字だけで弱く示す。 */
.bcp-navg{margin:0 0 4px; padding:0 12px; font-size:12px; font-weight:700;
  letter-spacing:.1em; color:var(--bcs-text-tertiary)}
.bcp-navg-b{display:flex; align-items:center; justify-content:space-between; width:100%;
  /* 🔴 2026-09-11。共有の44px検査で 231×34 の赤。押すもの（畳む／開く）なので上げる。
     🔴 字は変えない（サイドバーは本文より弱く、というオーナー指示のまま）。
        上げるのは当たり判定の高さだけ。 */
  min-height:44px; margin:0 0 2px; padding:0 12px; background:none; border:0; cursor:pointer;
  font:inherit; font-size:12px; font-weight:700; letter-spacing:.1em;
  color:var(--bcs-text-tertiary); text-align:left}
.bcp-navg-b:focus-visible{outline:2px solid var(--bcs-accent); outline-offset:-2px; border-radius:6px}
.bcp-navg-m{font-size:12px; line-height:1}

/* 🔴 2026-08-29 オーナー指摘「サイドバーの存在感が強い」。
   本文より弱くする。文字を落とし、行を詰め、選択中の面も静かにする。 */
.bcp-nav a{padding:7px 12px; font-size:13px}
.bcp-nav a[aria-current="page"]{background:var(--bcs-surface-subtle); font-weight:600}
.bcp-group + .bcp-group{margin-top:14px}

/* ============================================================================
   お支払い（2026-08-29 再設計・オーナー指示書）
   🔴 ① 現在のご契約 ／ ② 最新のお支払い ／ ③ お支払い履歴 の3層。
   🔴 巨大な角丸カードを使わない。余白・divider・字組で整理する。
   🔴 金額は内容のすぐ隣。右端まで飛ばさない。
   ============================================================================ */

/* 🔴🔴 2026-08-29 オーナー指摘「金額が右端に離れすぎ」。
   本文の幅は 1240px まで伸びるので、履歴の行が 1fr で広がると
   内容と金額が 800px 以上離れて、視線の移動が大きくなる。
   お支払いは**読む列**なので、幅を絞る。表を横に伸ばさない。 */
.up-plan,.up-latest,.up-hist{max-width:760px}

/* ① 現在のご契約 ----------------------------------------------------------
   🔴 PC は 左（何の契約か）42% ／ 右（いくらか）58%。モバイルは縦積み。
   🔴 カードにしない。上下の罫線と余白だけ。 */
.up-plan{display:grid; grid-template-columns:1fr; gap:14px 32px;
  padding:20px 0 22px; border-top:1px solid var(--bcs-border-strong);
  border-bottom:1px solid var(--bcs-border)}
@media (min-width:640px){
  .up-plan{grid-template-columns:minmax(0,42fr) minmax(0,58fr); align-items:start}
}
/* 左：何の契約か。🔴 ピルをやめた（料金より目立っていた）。 */
.up-plan-what{min-width:0}
.up-plan-name{margin:0; font-family:var(--font-head); font-size:19px; font-weight:700;
  letter-spacing:.03em; line-height:1.3; color:var(--bcs-text)}
/* 「動かす」は補助。プラン名と同じ強さにしない。 */
.up-plan-sub{margin:3px 0 0; font-size:12.5px; font-weight:600; color:var(--bcs-text-secondary)}
/* プランの説明。🔴 一語（守る／育てる／動かす）より弱く。 */
.up-plan-desc{margin:8px 0 0; font-size:12px; line-height:1.85; color:var(--bcs-text-tertiary)}
/* ご契約に含まれるもの。🔴 一覧にせず1行で（契約ブロックを大きくしない）。 */
.up-plan-cov{margin:12px 0 0; font-size:12px; font-weight:700; letter-spacing:.06em;
  color:var(--bcs-text-tertiary)}
.up-plan-covl{margin:3px 0 0; font-size:12px; line-height:1.85; color:var(--bcs-text-secondary)}

/* ご契約に含まれるもの（2026-09-02 オーナー指摘「文字が詰まって見にくい」）。
   🔴 全幅・1項目1行・行間をとる。カードにしない・囲まない。 */
.up-cov{ margin:28px 0 0 }
.up-cov-h{ margin:0 0 4px; font-size:13px; font-weight:700; letter-spacing:.04em; color:var(--bcs-text) }
.up-cov-list{ list-style:none; margin:0; padding:0 }
.up-cov-i{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px;
  padding:11px 0; border-bottom:1px solid var(--bcs-line, #EEF0F3) }
.up-cov-i:last-child{ border-bottom:0 }
.up-cov-n{ font-size:14.5px; color:var(--bcs-text); line-height:1.7 }
.up-cov-d{ font-size:12.5px; color:var(--bcs-text-secondary); line-height:1.7 }

/* 右：いくらか。🔴 このブロックの主役。ただし金融SaaSのような巨大数字にはしない。 */
.up-plan-cost{min-width:0}
.up-plan-m{display:flex; align-items:baseline; gap:4px; margin:0}
.up-plan-mv{font-family:var(--font-head); font-size:32px; font-weight:700; line-height:1.1;
  letter-spacing:-.015em; color:var(--bcs-text); font-variant-numeric:tabular-nums}
.up-plan-mu{font-size:13px; font-weight:600; color:var(--bcs-text-secondary)}
.up-plan-mk{margin:4px 0 0; font-size:12px; color:var(--bcs-text-secondary)}
/* 通常料金。🔴 値引きを演出しない（取り消し線・矢印・赤字・割引率を使わない）。 */
.up-plan-list{margin:10px 0 0; font-size:12.5px; color:var(--bcs-text-tertiary);
  font-variant-numeric:tabular-nums}

/* 🔴 契約と履歴のあいだは、はっきり空ける。 */
.up-plan + .bcp-sech{margin-top:34px}

/* ② 最新のお支払い -------------------------------------------------------- */
/* 「いま」の一番上: 未入金のご請求のお知らせ（2026-09-19 オーナー）。
   🔴 目立つが急かさない: 白カードに薄い青の地と青の枠、見出しは青インク。赤・左線・絵文字は使わない。
   🔴 `.bcp-card` の白より後に置く（背景と枠だけ勝たせる）。 */
.bcp-unpaid{background:var(--blue-pale, #F3F7FA); border-color:var(--blue-border, #B7CDDE)}
.bcp-unpaid-k{margin:0 0 8px; font-family:var(--font-head); font-size:15px; font-weight:600; color:var(--blue-ink, #1E5A8C)}
.bcp-unpaid-it{margin:0 0 12px}
.bcp-unpaid-it:last-child{margin-bottom:0}
.bcp-unpaid-b{margin:0; font-size:15px; line-height:1.8; color:var(--ink, #26292B)}
.bcp-unpaid-p{font-weight:600}
.bcp-unpaid-v{font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap}
.bcp-unpaid-m{margin:2px 0 0; font-size:13px; line-height:1.7; color:var(--muted, #63686C)}
.bcp-unpaid-a{margin-top:10px; background:#fff; text-decoration:none}

.up-latest{padding:16px 18px; background:var(--bcs-bg); border-radius:8px}
.up-latest-t{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.up-latest-p{font-size:12.5px; font-weight:700; color:var(--bcs-text)}
.up-latest-l{margin:8px 0 0; font-size:13px; color:var(--bcs-text-secondary)}
.up-latest-v{margin:2px 0 0; font-family:var(--font-head); font-size:26px; font-weight:700;
  line-height:1.2; color:var(--bcs-text); font-variant-numeric:tabular-nums}
.up-meta{margin:6px 0 0; font-size:12px; line-height:1.8; color:var(--bcs-text-tertiary)}
.up-acts{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin:12px 0 0}

/* 状態。🔴 色だけで表さない（文字が本体・色は補助）。 */
.up-st{font-size:12px; font-weight:600; white-space:nowrap}
.up-st--ok{color:var(--bcs-text-secondary)}
.up-st--wait{color:#8A6100}
.up-st--idle{color:var(--bcs-text-tertiary)}
/* 単発の印。🔴 派手にしない。 */
.up-tag{padding:1px 7px; border-radius:3px; background:var(--bcs-surface-subtle);
  font-size:12px; font-weight:600; color:var(--bcs-text-secondary); white-space:nowrap}

/* 書類。
   🔴 「毎月強い青文字で並べない」を守りつつ、**押せると分かる形**にする。
      2026-08-29: 灰色に細い下線だけにしたら、オーナーが「ボタンは？」と気づけなかった。
      静かにするのと、見えなくするのは別。枠のある小さな札にする。 */
/* 🔴 2026-08-30 実測 30px。指で押す標的の下限は44px。
   見た目の小ささは padding ではなく**当たり判定**で稼ぐ（枠は今のまま）。 */
.up-doc{display:inline-flex; align-items:center; min-height:44px; padding:0 12px;
  border:1px solid var(--bcs-border-strong); border-radius:5px;
  font-size:12px; font-weight:600; color:var(--bcs-text-secondary); text-decoration:none;
  white-space:nowrap; background:var(--bcs-surface)}
.up-doc:hover{border-color:var(--bcs-accent); color:var(--bcs-accent)}
.up-doc:focus-visible{outline:2px solid var(--bcs-accent); outline-offset:2px}
.up-h-d{display:flex; gap:6px}

/* ③ 履歴。1件1行。 ------------------------------------------------------- */
.up-hist{list-style:none; margin:0; padding:0}
.up-h{padding:9px 0; border-bottom:1px solid var(--bcs-border)}
.up-h:last-child{border-bottom:0}
.up-h-r{display:grid; grid-template-columns:1fr; gap:2px 14px; align-items:baseline}
@media (min-width:720px){
  /* 対象月 / 内容 / 金額 / 状態 / 書類。🔴 金額を内容のすぐ隣に置く。 */
  .up-h-r{grid-template-columns:6.5em minmax(0,1fr) 6.5em 11.5em auto}
}
.up-h-p{font-size:12.5px; font-weight:600; color:var(--bcs-text); white-space:nowrap}
.up-h-l{display:flex; align-items:center; gap:8px; min-width:0; font-size:12.5px;
  color:var(--bcs-text-secondary)}
.up-h-l > span:first-child{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.up-h-a{font-size:13px; font-weight:700; color:var(--bcs-text);
  font-variant-numeric:tabular-nums}
/* 状態と日付。🔴 日付は状態の補足なので、同じ列に重ねて置く。 */
.up-h-s{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; min-width:0}
.up-h-dt{font-size:12px; color:var(--bcs-text-tertiary); white-space:nowrap}
@media (min-width:720px){ .up-h-a{text-align:right} }

/* 明細（既定で閉じる） */
/* 請求ごとの一言。🔴 注記より少し強く（読んでほしいので）、本文より弱く。 */
.up-note{margin:5px 0 0; padding:7px 10px; border-radius:5px; background:var(--bcs-bg);
  font-size:12px; line-height:1.8; color:var(--bcs-text-secondary)}

/* 🔴 2026-08-30 実測 32px。押す標的の下限は44px（見た目は変えず当たり判定だけ）。 */
.up-h-more{display:inline-flex; align-items:center; gap:5px; min-height:44px; margin:2px 0 0;
  padding:0; background:none; border:0; cursor:pointer; font:inherit; font-size:12px;
  color:var(--bcs-text-tertiary)}
.up-h-more:hover{color:var(--bcs-accent)}
.up-h-more:focus-visible{outline:2px solid var(--bcs-accent); outline-offset:2px; border-radius:4px}
.up-h-more-m{font-size:12px; line-height:1}
.up-h-lines{list-style:none; margin:4px 0 4px; padding:8px 12px; border-radius:6px;
  background:var(--bcs-bg)}
.up-h-lines li{display:flex; justify-content:space-between; gap:14px; padding:3px 0;
  font-size:12px; color:var(--bcs-text-secondary)}
.up-h-ll{min-width:0}
.up-h-la{flex:none; font-weight:600; color:var(--bcs-text); font-variant-numeric:tabular-nums}

/* 自動処理の見張り（2026-08-30）
   🔴 施策の一覧と見た目を変える（別の棚だと分かるように）。
   🔴 数は合算せず横並び。要確認だけ色を持つ。 */
.bcp-au-sum{display:flex; flex-wrap:wrap; gap:8px 22px; margin:14px 0 0}
.bcp-au-c{display:flex; align-items:baseline; gap:7px}
.bcp-au-cl{font-size:12.5px; color:var(--bcs-text-secondary)}
.bcp-au-cn{font-size:16px; font-weight:700; color:var(--bcs-text);
  font-variant-numeric:tabular-nums}
.bcp-au-c.is-att .bcp-au-cl,
.bcp-au-c.is-att .bcp-au-cn{color:var(--bcs-wait)}
.bcp-au-note{margin:10px 0 0; font-size:12.5px; line-height:1.9; color:var(--bcs-text-tertiary)}
.bcp-au-list{margin:18px 0 0; padding:16px 0 0; border-top:1px solid var(--bcs-border)}
.bcp-au-r{padding:12px 0; border-bottom:1px solid var(--bcs-border)}
.bcp-au-r:last-child{border-bottom:0}
.bcp-au-h{display:flex; align-items:baseline; justify-content:space-between; gap:12px}
.bcp-au-t{margin:0; font-size:14px; font-weight:600; line-height:1.6; color:var(--bcs-text); min-width:0}
.bcp-au-st{flex:none; font-size:12px; font-weight:700; color:var(--bcs-text-secondary)}
.bcp-au-st--warn,.bcp-au-st--down{color:var(--bcs-wait)}
.bcp-au-st--not_measured{color:var(--bcs-text-tertiary); font-weight:600}
.bcp-au-w{margin:5px 0 0; font-size:13px; line-height:1.85; color:var(--bcs-text-secondary)}
.bcp-au-m{margin:5px 0 0; font-size:12px; color:var(--bcs-text-tertiary)}

/* 回答を受け付けていないときの案内（2026-08-31）
   🔴 入力欄の代わりに置くもの。押せるものに見せない。 */
.bcp-q-ro{margin:12px 0 0; padding:12px 14px; border-radius:10px;
  background:var(--bcs-surface-subtle)}
.bcp-q-ro-t{margin:0; font-size:13px; line-height:1.9; color:var(--bcs-text-secondary)}
.bcp-q-ro-a{display:inline-flex; align-items:center; gap:5px; min-height:44px;
  font-size:13.5px; font-weight:600; color:var(--bcs-accent); text-decoration:none}
.bcp-q-ro-a:hover{text-decoration:underline}
.bcp-q-ro-a:focus-visible{outline:2px solid var(--bcs-accent); outline-offset:2px; border-radius:4px}

/* 注記カード（共通仕様2026-08-26 判定1）。🔴 正規料金と契約額が並ぶときだけ出る。 */
.up-plan-note{margin:10px 0 0; padding:11px 14px; border-radius:8px;
  background:var(--bcs-surface-subtle); font-size:12.5px; line-height:1.85;
  color:var(--bcs-text-secondary)}

/* 汎用ブロックの単一値（2026-08-31）。数字1つを小さな表にしない。 */
.cx-stat{display:flex; align-items:baseline; gap:8px; margin:12px 0 2px}
.cx-stat-n{font-size:32px; font-weight:700; line-height:1.2; color:var(--bcs-text);
  font-variant-numeric:tabular-nums}
.cx-stat-u{font-size:13px; color:var(--bcs-text-secondary)}

/* 外部サービスへのアクセス（Credential Vault・2026-08-31） */
.bcp-h3{font-size:15px; font-weight:700; margin:0 0 10px; color:var(--bcs-text)}
.bcp-vault-list{list-style:none; margin:0; padding:0}
/* 🔴 2段組: 各行は block（横並びにしない）。名前=全幅の見出し→下にボタン列→下にパネル。 */
.bcp-vault-i{display:block; padding:14px 0; border-bottom:1px solid var(--bcs-line, #E3E6EB); max-width:100%}
.bcp-vault-i:last-child{border-bottom:0}
.bcp-vault-head{display:flex; align-items:center; gap:8px 10px; flex-wrap:wrap; max-width:100%}
.bcp-vault-name{flex:1 1 auto; min-width:0; margin:0; font-size:15px; font-weight:700; color:var(--bcs-text);
  overflow-wrap:anywhere; word-break:normal}
.bcp-vault-act{flex:0 0 auto; display:flex; flex-wrap:wrap; gap:8px; margin-left:auto}
.bcp-btn--sm{padding:5px 12px; font-size:13px; line-height:1.4}
/* 🔴🔴 2026-09-11。ここは Vault の欄のために書かれたものだが、**`.bcp-input` も巻き込んで**いた。
   しかも上の `.bcp-input{font-size:16px}`（「iOSで拡大されない下限」と書いてある）より**後**に在るので、
   マイページの入力欄が全部 **14px** になっていた。ログインのメールアドレス欄もこれで、
   **お客様がいちばん最初に触る欄で、iPhone が画面を拡大する**状態だった。
   🔴 16px は見た目の好みではなく、**iOS が拡大しない下限**。ここで下げない。
   🔴 指で押す高さ（44px）も、この規則には無かった。 */
.bcp-vault-sel,.bcp-input{width:100%; max-width:100%; box-sizing:border-box; padding:10px 12px;
  font-size:16px; min-height:44px;
  border:1px solid var(--bcs-line,#D6DAE0); border-radius:8px; background:#fff; color:var(--bcs-text)}
.bcp-vault-guide{margin-top:12px; max-width:100%}
.bcp-vault-form{display:flex; flex-direction:column; gap:10px; margin-top:10px; max-width:100%}
.bcp-vault-invite{margin:10px 0 0; font-size:13px; color:var(--bcs-text-secondary)}
.bcp-vault-err{margin:8px 0 0; font-size:13px; color:#B3261E}
.bcp-vault-dellink{margin:6px 0 0}
/* 🔴 reveal箱は全幅・内側で完結（横スクロールをページに出さない）。 */
.bcp-vault-reveal{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:10px 0 0;
  width:100%; max-width:100%; box-sizing:border-box;
  padding:10px 12px; background:#F7F8FA; border:1px solid var(--bcs-line,#E3E6EB); border-radius:8px}
.bcp-vault-secret{flex:1 1 100%; min-width:0; max-width:100%; box-sizing:border-box;
  font-family:ui-monospace,Menlo,monospace; font-size:13px; word-break:break-all; overflow-wrap:anywhere;
  background:#fff; padding:6px 8px; border-radius:4px; border:1px solid var(--bcs-line,#E3E6EB)}
.bcp-btn--ghost{background:transparent; border:1px solid var(--bcs-line,#C7CDD4); color:var(--bcs-text)}
/* 🔴 2026-09-02 実害: 枠線ボタンに触れると**濃紺で塗りつぶされて**いた。
   .bcp-btn:hover（0,1,1）が .bcp-btn--ghost（0,1,0）より強く、下地の塗りが勝っていた。
   枠線ボタンは押せることだけ伝えればよいので、ホバーは**ごく薄い面と線の色**にとどめる
   （塗りボタンを増やさない・全プロジェクト共通の方針）。 */
.bcp-btn--ghost:hover{ background:var(--bcs-accent-soft); border-color:var(--bcs-accent); color:var(--bcs-accent) }
.bcp-btn--ghost:active{ background:var(--bcs-accent-soft) }
.bcp-btn--rm:hover{ background:#FDF2F1; border-color:#D9736C; color:#B3261E }

/* 入力直前の安心の一文（Credential Vault） */
.bcp-vault-secnote{margin:2px 0 4px; font-size:12.5px; line-height:1.7; color:var(--bcs-text-secondary)}

/* Vault: 変更/削除の2段階・ログアウト導線（2026-09-01） */
.bcp-btn--rm{background:#fff; border:1px solid #E0B4B0; color:#B3261E}
.bcp-vault-delc{margin:10px 0 0; padding:10px 12px; background:#FBEfEe; border:1px solid #E9CFCC; border-radius:8px}
.bcp-vault-delc .bcp-vault-secnote{margin:0 0 8px; color:var(--bcs-text)}
.bcp-vault-delc .bcp-btn{margin-right:8px}
.bcp-vault-logout{margin:18px 0 0}
.bcp-acc-logout{margin:18px 0 0; padding-top:14px; border-top:1px solid var(--bcs-line,#E3E6EB)}
.bcp-vault-relogin{margin:10px 0 0; padding:10px 12px; max-width:100%; box-sizing:border-box;
  background:#F7F8FA; border:1px solid var(--bcs-line,#E3E6EB); border-radius:8px}
.bcp-vault-relogin .bcp-btn{margin:8px 8px 0 0}
.bcp-vault-answer{margin:10px 0 0}
.bcp-vault-answer .bcp-vault-i{padding:12px 0}
.bcp-vault-answer .bcp-vault-name{font-size:14px}


/* 読み込み中のサイドバーと見出し（2026-09-02）。本物と同じ寸法で場所を取る。 */
.sk-title{ height:30px; width:min(320px, 62%); margin:0 0 20px; border-radius:var(--sk-radius-text) }
.bcp-side .sk-wrap{ padding:0 }
.bcp-side .sk-switch{ height:44px; margin:14px 0 24px; border-radius:8px }
.bcp-side .sk-navg{ margin:0 0 22px }
.bcp-side .sk-navg .sk-lbl{ margin:0 0 10px }
.bcp-side .sk-navg .sk-t{ height:14px; margin:0 0 12px }

/* サイトのヘッダーと同じロゴ（2026-09-02）。文字の代わりに画像を出す。 */
/* 🔴 2026-09-07 オーナー指示「左上のロゴもう少し大きくしてほしい」。
   マーク 22→28px ／ 文字 15→19px（約1.27倍）。上のスマートフォン用ヘッダーも同じ比率で。
   🔴 比率は変えない（画像の縦横比が崩れると別のロゴに見える）。height だけを動かし、
      width は auto のままにする。
   🔴 大きくすると、その下の案件切替との間が詰まる。gap を8→10pxにして間を保つ。 */
.bcp-brand--img{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; line-height:1 }
.bcp-brand--img .bcp-logo-mark{ width:auto; height:28px; display:block }
.bcp-brand--img .bcp-logo-type{ width:auto; height:19px; display:block }
/* 🔴 2026-09-07。ここはマスターページ（案件一覧）と、スマートフォンの上部の帯。
   最初、左メニューだけを大きくして**マスターページが小さいまま**だった。
   同じロゴが画面によって別の大きさになる。**両方を同じ比率で上げる。**
   🔴 帯は高さが決まっているので、左メニューより一段小さくする（はみ出させない）。 */
.bcp-tb-brand.bcp-brand--img .bcp-logo-mark{ height:26px }
.bcp-tb-brand.bcp-brand--img .bcp-logo-type{ height:18px }
.bcp-brand--img:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; border-radius:4px }
.bcp-todo-stale{ margin:6px 0 0; font-size:12.5px; color:var(--bcs-text-tertiary, #6A7180) }

/* お客様から自由にお送りいただく欄。
   🔴 設問の一覧と見た目を分ける（向きが逆のものを、同じ形で並べない）。
   🔴 カードにしない・囲まない。罫線と字組だけ。 */
.bcp-note{margin:32px 0 0; padding:22px 0 0; border-top:1px solid var(--bcs-border)}
.bcp-note-h{margin:0; font-size:15px; font-weight:700; color:var(--bcs-text)}
/* 🔴 2026-09-12 オーナー指摘「なんか変な改行に見える」。max-width:42em（546px）で文だけが途中で折れ、
   下の入力欄は幅いっぱいなので、段落の右端が揃わず「変な改行」に見えていた。上限を外して器の幅で折る。 */
.bcp-note-lead{margin:8px 0 0; font-size:13px; line-height:1.8; color:var(--bcs-text-secondary)}
.bcp-note-form{margin:14px 0 0}
.bcp-note-ta{width:100%; min-height:104px; resize:vertical}
.bcp-note-bar{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:10px 0 0}
.bcp-note-msg{margin:0; font-size:12.5px; line-height:1.8; color:var(--bcs-text-secondary)}
.bcp-note-sub{margin:26px 0 0; font-size:13px; font-weight:700; color:var(--bcs-text)}
.bcp-note-list{list-style:none; margin:10px 0 0; padding:0}
.bcp-note-i{padding:12px 0; border-top:1px solid var(--bcs-border)}
.bcp-note-t{margin:0; font-size:13.5px; line-height:1.95; color:var(--bcs-text); white-space:pre-wrap}
.bcp-note-m{margin:5px 0 0; font-size:11.5px; color:var(--bcs-text-tertiary)}


/* ===== ご確認：完了の折りたたみ（2026-09-07 仕様書§4・§29）=====================
   🔴 §23「巨大なカードにしない」。囲みは足さず、ボタンと余白だけで作る。
   🔴 §29 状態は文字で出す（記号だけにしない）。CSSでは色に頼らない。 */
.bcp-qc-btn{
  margin:8px 0 0; padding:6px 0;
  background:none; border:0; cursor:pointer;
  font-size:12.5px; font-weight:600; color:var(--blue, #2563EB);
}
.bcp-qc-btn:hover{ text-decoration:underline }
.bcp-qc-btn:focus-visible{ outline:2px solid var(--blue, #2563EB); outline-offset:2px; border-radius:4px }
.bcp-qc-body{ margin:10px 0 0 }

/* 🔴 §24「文章部分に読みやすい最大幅を」。ページは広くてよいが、文が端から端まで走らない。
   固定値ではなく、いまの余白設計に合わせて 68rem（約1088px）を上限にする。 */
.bcp-qlist{ max-width:68rem }

/* 閉じたままでも読む1行（2026-09-07 仕様書§4）。
   🔴 §23 カードで囲わない。§25 状態は右のラベルが持つので、ここは色で語らない。 */
.bcp-qc-sum{ margin:4px 0 0 }
.bcp-qc-sum-l{ margin:0; font-size:12.5px; line-height:1.7; color:var(--bcs-text-secondary) }
.bcp-qc-sum-l--2{ color:var(--bcs-text-secondary) }
/* 🔴 2026-09-07。2行目は「いただいた回答をもとにBLOOMが何をしたか」＝オーナー指示
   「したよー、とクライアントに分かるように」の答えそのもの。
   それが1行目（誰がいつ答えたか）より**薄い**のは、大事さの順が逆になっている。
   4.9:1 で読めてはいたが、読めることと、目に入ることは別。1行目と同じ濃さに揃える。 */


/* ============================================================
   面談・稼働カレンダー（PLAN-06・2026-09-10）
   🔴 ABROAD担当が試作の #mkstyle から .oc-* だけを抽出したもの。**追記のみ**。
      既存の規則には1行も触っていない。新しいトークン（色・書体・角丸）の定義は0件。
   🔴🔴 試作には @media が1つも無い。狭い幅の見え方は**台紙の .mk-320/.mk-390 が
      作っていた**ので、製品へ移すと支えが無くなる。**320px は実画面で測り直す。**
   ============================================================ */
/* ── 面談・稼働カレンダー（PLAN-06・2026-09-10）──────────────────────────────
   🔴 モック docs/mocks/meetings-calendar-16states.html の #mkstyle から .oc-* だけを写した。
      台紙用の .mk-* と frame()/sideNav()/bottomNav() は持ち込まない。
   🔴 色・書体・角丸は**新設していない**。すべて既存のトークン（tokens.css）を参照している。
   🔴 portal.css の**末尾に追記**するだけ。既存の規則には触っていない。
   ────────────────────────────────────────────────────────────── */
.oc-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px;flex-wrap:wrap}
.oc-month{font-family:var(--font-head);font-size:18px;font-weight:600;margin:0;white-space:nowrap}
.oc-nav{display:flex;gap:6px;align-items:center}
.oc-ib{min-width:44px;min-height:44px;border:1px solid var(--line);background:var(--paper);border-radius:var(--r-sm);
  font:inherit;font-size:13.5px;color:var(--ink-soft);padding:0 12px;cursor:pointer;white-space:nowrap}
.oc-ib-on{border-color:var(--blue-border);background:var(--blue-soft);color:var(--blue-ink);font-weight:600}
.oc-mode{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:11px 15px;border:1px solid var(--blue-border);
  background:var(--blue-pale);border-radius:var(--r);margin:0 0 12px;font-size:13px}
.oc-mode .kv{display:flex;flex-direction:column;gap:1px;min-width:0}
.oc-mode small{font-size:11px;color:var(--muted);letter-spacing:.04em}
.oc-mode b{color:var(--blue-ink);font-size:14px}
.oc-mode .sp{flex:1}
.oc-dow{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));font-size:11px;color:var(--muted);text-align:center;padding:0 0 6px}
.oc-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line);
  background:var(--paper);border-radius:var(--r);overflow:hidden}
.oc-cell{position:relative;height:52px;padding:6px 4px 5px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  display:flex;flex-direction:column;gap:0;font-size:10.5px;line-height:1.35;color:var(--ink-soft);background:var(--paper);min-width:0;
  overflow:hidden}
.oc-cell .d{font-variant-numeric:tabular-nums;font-size:12px;color:var(--ink);font-weight:500;display:flex;gap:4px;align-items:baseline}
.oc-cell .d em{font-style:normal;font-size:10px;color:var(--blue-ink);font-weight:600}
/* 🔴 2026-09-11 実測: 320px だと1マスの内側が約26pxで、「予定1」「面談1」が
   「予…」「面…」になり、**いちばん要る数が消えていた**。
   幅を広げられない（7列は減らせない）ので、この幅だけ文字を詰める。
   🔴 数を削って「予1」にはしない。読めない略語より、小さくても読める語を残す。 */
@media (max-width:380px){
  .oc-cell{padding:5px 2px 4px; font-size:9.5px}
  .oc-cell .d{font-size:11px}
  .oc-cell .d em{font-size:9px}
}
.oc-cell.is-out{background:var(--surface-2)}
.oc-cell.is-out .d{color:var(--muted);font-weight:400}
.oc-cell.is-today{box-shadow:inset 0 0 0 2px var(--blue)}
.oc-cell.is-sel{background:var(--blue-soft)}
.oc-cell.is-draft{box-shadow:inset 0 0 0 1.5px var(--blue-border);background:var(--blue-pale)}
.oc-cell.is-draft.is-next{box-shadow:inset 0 0 0 2px var(--blue)}
.oc-cell.is-next{box-shadow:inset 0 0 0 2px var(--blue-border);background:var(--blue-pale)}
.oc-cell.is-skip{background:repeating-linear-gradient(135deg,var(--paper) 0 6px,var(--surface-2) 6px 8px)}
/* 🔴🔴 2026-09-11 オーナー指示「枠が縦に伸びるのを避けたい／1行で」。
   マスは **日付の行 ＋ 1行**の高さで固定する。日によって高さが変わると、
   月全体がガタついて「どの週が忙しいか」が形で読めなくなる。
   🔴 高さを `min-height` ではなく **`height` で決める**（min だと中身しだいで伸びる）。
   🔴 入りきらないときは「…」で切る。**切れたことが見える形**にする。 */
.oc-one{
  display:block; margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  color:var(--blue-ink);
}
.oc-cell.is-out .oc-one{color:var(--muted)}
/* 🔴 2026-09-11 オーナー指示「休みは赤い系の文字にして欲しい」→ そのあと
   「表示時の文字の色」を選べるようになったので、**色はプリセットが持つ**。
   ここは**選んでいないときの既定**（休みは赤）だけを受け持つ。
   🔴 塗りつぶさない（面で赤くすると「危ない日」に見える）。**文字だけ**。
   🔴 色だけに頼らない ── 文字そのものが「休み」なので、色が見えない方にも伝わる。 */
/* 🔴🔴 2026-09-12 オーナー指摘「休み（赤）の所に 8時（青）を入れると 8時（赤）で出る」。
   この規則（0,3,0）が下の `.oc-one[data-color]`（0,2,0）より強く、色の名前を持つ字まで赤にしていた。
   🔴 赤にするのは**色の名前を持たない**字だけ。名前を持つ字は、その名前の色が勝つ。 */
.oc-cell.is-off .oc-one:not([data-color]){color:var(--crit); font-weight:600}
.oc-cell.is-off .oc-one{font-weight:600}
.oc-cell.is-off .d{color:var(--crit)}

/* プリセットが持つ色。🔴 名前で持ち、ここで色に直す
   （値で持つと、あとで色を調整したとき保存済みのものだけ古いままになる）。 */
.oc-one[data-color="ink"]{color:var(--ink)}
.oc-one[data-color="blue"]{color:var(--blue-ink)}
.oc-one[data-color="green"]{color:#2E6B4F}
.oc-one[data-color="amber"]{color:var(--warn)}
.oc-one[data-color="red"]{color:var(--crit)}
.oc-one[data-color="gray"]{color:var(--muted)}

/* ---------- 項目のボタン（カレンダーの下・2026-09-11 オーナー指示） ---------- */
.oc-palcard{margin-top:14px}
.oc-palhead{display:flex; align-items:baseline; justify-content:space-between; gap:12px}
.oc-palhead .bcp-label{margin:0}
/* 🔴 「プリセット」は**直す入口**なので、項目のボタンとは別の見た目（文字のボタン）にする。 */
.oc-palset{
  /* 🔴 2026-09-11 説明文を消したので、この行に文字が1つも無いことがある。
     `space-between` だけに頼ると、そのときボタンが左端へ寄る。自分で右へ寄せる。 */
  flex:none; margin-left:auto;
  min-height:44px; padding:0 4px; border:0; background:none; cursor:pointer;
  font:inherit; font-size:13px; font-weight:600; color:var(--bcs-accent); text-decoration:underline;
}
.oc-palset:focus-visible{outline:2px solid var(--bcs-accent); outline-offset:2px; border-radius:6px}
.oc-pal{display:flex; flex-wrap:wrap; gap:10px; margin:12px 0 0; padding:0; list-style:none}
/* 🔴 四角のボタン。指で押せる大きさ（44px）を下回らない。 */
.oc-pb{
  min-width:64px; min-height:44px; padding:0 14px;
  border:1px solid var(--line); border-radius:10px; background:var(--paper);
  font:inherit; font-size:14px; font-weight:600; color:var(--ink); cursor:pointer;
}
.oc-pb[data-color="blue"]{color:var(--blue-ink)}
.oc-pb[data-color="green"]{color:#2E6B4F}
.oc-pb[data-color="amber"]{color:var(--warn)}
.oc-pb[data-color="red"]{color:var(--crit)}
.oc-pb[data-color="gray"]{color:var(--muted)}
.oc-pb.is-on{border-color:var(--blue); box-shadow:inset 0 0 0 1px var(--blue); background:var(--blue-pale)}
.oc-pb:focus-visible{outline:2px solid var(--blue); outline-offset:2px}

/* ---------- プリセットの編集（モーダル） ---------- */
/* 🔴🔴 2026-09-12 オーナー指示④「プリセットのモーダルとその中身をもう少しコンパクトにして、
   モバイルでも扱いやすくして」。
   直す前（390px 実測）: 1項目が 6段・約 520px ＝ 画面1枚に1項目しか入らなかった。
   🔴 余白を詰め（モーダル 20→14・行 12→10・段間 12→8）、段を 6→4 にする
      （表示名と↑↓✕を同じ行／長さの札を所要時間の選択へ／色を1段6列）。
   🔴 押す所の 44px は下回らない。小さくするのは**余白と段数**で、当たりではない。 */
.oc-modal{
  position:fixed; inset:0; z-index:80; display:flex; align-items:flex-start; justify-content:center;
  padding:24px 12px; overflow:auto; background:rgba(13,27,42,.44);
}
.oc-modal-in{
  width:100%; max-width:860px; padding:20px; border-radius:14px; background:var(--paper);
  box-shadow:0 24px 60px -20px rgba(13,27,42,.5);
}
@media (max-width:560px){
  .oc-modal{padding:10px 8px}
  .oc-modal-in{padding:14px; border-radius:12px}
  .oc-modal-in > .bcp-meta{font-size:12.5px; line-height:1.6}
}
.oc-pe-list{display:grid; gap:8px; margin:12px 0}
/* 🔴 広い画面では2列（860px に 1列だと、行の右半分が空く） */
@media (min-width:720px){ .oc-pe-list{grid-template-columns:repeat(2, minmax(0,1fr))} }
.oc-pe-row{
  display:flex; flex-direction:column; gap:8px; min-width:0;
  padding:10px 12px; border:1px solid var(--line); border-radius:12px;
}
.oc-pe-f{display:flex; flex-direction:column; gap:4px; min-width:0}
.oc-pe-lb{font-size:11.5px; color:var(--ink-soft)}
.oc-pe-nm{flex:1 1 auto}
/* 表示名の行。右に ↑↓✕（自分の行のボタンだと分かる位置） */
.oc-pe-head{display:flex; gap:6px; align-items:flex-end; min-width:0}
.oc-pe-mv{display:flex; gap:4px; flex:none}
.oc-pe-mvb{
  width:40px; min-height:44px; padding:0; box-sizing:border-box;
  border:1px solid var(--line); border-radius:10px; background:var(--paper);
  font:inherit; font-size:15px; color:var(--ink-soft); cursor:pointer;
}
.oc-pe-mvb:disabled{opacity:.35; cursor:not-allowed}
.oc-pe-mvb--del{color:var(--crit)}
.oc-pe-mvb:focus-visible{outline:2px solid var(--blue); outline-offset:2px}
/* 終日の段 */
.oc-pe-opts{display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap}
.oc-pe-ad{display:flex; flex-direction:row; align-items:center; gap:8px; flex:0 0 auto}
.oc-pe-ad .oc-sw{margin-top:0}
/* 🔴🔴 2026-09-12 オーナー指摘②「間の〜が入力のフォームに被ってしまってる」。
   iPhone の time 入力は自分の固有幅を持ち、列より広がると隣の『〜』の上に乗る
   （手元の Chrome では再現しない）。
   🔴 『〜』に**自分の列**（24px）を持たせ、両側の欄を overflow:hidden で列の中に閉じ込める。
      列からはみ出せないので、乗れない。
   🔴 -webkit-appearance:none で iOS に幅の指定を効かせる（無いと固有幅のまま）。
      その代わり中の字が左に寄るので、::-webkit-date-and-time-value で中央へ。 */
.oc-pe-time{
  flex:1 1 100%; min-width:0;
  display:grid; grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr);
  gap:6px; align-items:end;
}
.oc-pe-time .oc-pe-t{flex:1 1 auto; min-width:0; overflow:hidden}
.oc-pe-time .bcs-input{
  width:100%; max-width:none; min-width:0; box-sizing:border-box; text-align:center;
  padding-left:8px; padding-right:8px; -webkit-appearance:none; appearance:none;
}
.oc-pe-time input[type="time"]::-webkit-date-and-time-value{text-align:center; min-height:1.3em}
.oc-pe-time select.bcs-input{
  padding-right:24px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m7 10 5 5 5-5'/></svg>");
  background-repeat:no-repeat; background-position:right 6px center; background-size:14px;
}
.oc-pe-tsep{text-align:center; padding-bottom:13px; color:var(--ink-soft); font-size:13px; line-height:1}
/* 2つ目の欄の見出しは [終了時刻｜所要時間] の切り替え（③ 2経路）。
   🔴 `.oc-seg` は受付時間の側で既に使っている名前（3849行）。同じ名前を付けると
      あちらの 44px の四角がここに乗る（実際に乗った）。**別のものには別の名前**。 */
.oc-pe-2nd{gap:4px}
.oc-mode{
  display:inline-flex; align-self:flex-start; padding:2px; box-sizing:border-box;
  border:1px solid var(--line); border-radius:999px; background:var(--surface-2);
}
.oc-mode-b{
  min-height:24px; padding:0 9px; border:0; border-radius:999px; background:transparent;
  font:inherit; font-size:11.5px; font-weight:600; color:var(--ink-soft); cursor:pointer; white-space:nowrap;
}
.oc-mode-b.is-on{background:var(--paper); color:var(--blue-ink); box-shadow:0 1px 2px rgba(13,27,42,.18)}
.oc-mode-b:focus-visible{outline:2px solid var(--blue); outline-offset:1px}
.oc-pe-end{margin:-2px 0 0; font-size:12px; color:var(--ink-soft); text-align:right; min-height:0}
.oc-pe-end:empty{display:none}
.oc-pe-cols{display:flex; flex-direction:column; gap:4px; flex:1 1 100%; min-width:0}
/* 🔴 6色を**1段**に。狭い画面で 3+3 の2段にすると、それだけで 1段ぶん背が伸びる。 */
.oc-pe-sw{display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:4px}
/* 🔴 色の見本は、**その色で実際の文字**を出す（名前だけだと結果が想像できない）。 */
.oc-pe-c{
  min-width:0; min-height:44px; padding:0 2px; box-sizing:border-box;
  border:1px solid var(--line); border-radius:8px; background:var(--paper);
  font:inherit; font-size:12px; font-weight:700; cursor:pointer;
  white-space:nowrap; overflow:hidden; letter-spacing:-.02em;
}
.oc-pe-c[data-color="ink"]{color:var(--ink)}
.oc-pe-c[data-color="blue"]{color:var(--blue-ink)}
.oc-pe-c[data-color="green"]{color:#2E6B4F}
.oc-pe-c[data-color="amber"]{color:var(--warn)}
.oc-pe-c[data-color="red"]{color:var(--crit)}
.oc-pe-c[data-color="gray"]{color:var(--muted)}
.oc-pe-c.is-on{border-color:var(--blue); box-shadow:inset 0 0 0 1px var(--blue)}
/* 終日のトグル。🔴 チェックボックスより指で押しやすく、入／切が形で分かる。 */
.oc-pe-ad{display:flex; flex-direction:column; gap:4px; flex:0 0 auto}
.oc-sw{
  position:relative; width:56px; height:32px; margin-top:6px; padding:0;
  border:1px solid var(--line); border-radius:999px; background:var(--surface-2);
  cursor:pointer; transition:background .15s ease, border-color .15s ease;
}
.oc-sw-k{
  position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%;
  background:var(--paper); box-shadow:0 1px 3px rgba(13,27,42,.28);
  transition:transform .15s ease;
}
.oc-sw.is-on{background:var(--blue); border-color:var(--blue)}
.oc-sw.is-on .oc-sw-k{transform:translateX(24px)}
.oc-sw:focus-visible{outline:2px solid var(--blue); outline-offset:2px}
/* 🔴 使えない欄は、消さずに薄くする（消すと、戻したとき値が無くなる）。 */
.bcs-input:disabled{background:var(--surface-2); color:var(--muted); cursor:not-allowed}

/* 押すとどの日に入るか。🔴 押す前に言う。 */

/* 🔴🔴 2026-09-11 オーナー指摘「モーダルの中のボタンがガタガタ」。
   `.bcp-btn` と `.bcp-btn--quiet` は padding と line-height が違うので、
   並べると**高さと文字の位置がそろわない**（塗りつぶしのほうだけ下がって見える）。
   🔴 見た目（色・枠）は各クラスに任せ、**並べたときの寸法だけ**ここで揃える。

   🔴🔴 2026-09-11（2度目）オーナー指摘「下のボタン二つの大きさ（高さ）揃えて欲しい」。
      ＝ 上の直しでは**揃っていなかった**。padding と line-height だけを見ていて、
      高さを決めているのは実は次の2つだった。
        ① `.bcp-btn{align-self:stretch}` … 行の高さまで伸びる
        ② `.bcp-btn--quiet{margin-top:12px}` … 伸びた分から 12px だけ低くなる
      ＝ 塗りつぶし側だけが 12px 高い。**min-height を書いても、伸びる側には効かない。**
      🔴 寸法を揃えるなら、伸ばす指定と外余白も**ここで打ち消す**。 */
.oc-pe-foot{display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:flex-end; margin-top:16px}
.oc-pe-foot .bcp-btn{
  display:inline-flex; align-items:center; justify-content:center;
  align-self:center; margin-top:0;
  min-height:44px; padding:0 18px; line-height:1; box-sizing:border-box;
}
.oc-ctx{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 🔴 2026-09-11 `overflow` を書いていなかったので、入りきらない文字は
   .oc-grid{overflow:hidden} に**黙って切られていた**（320px で「予定1・」と出た）。
   切れること自体は避けられないので、切れたと分かる形（…）にする。 */
/* ---------- 入力欄（2026-09-11） ----------
   🔴🔴 `.bcs-input` の規則は `main.css` にしか無く、**マイページは main.css を読まない**
      （`/client/` が読むのは portal.css と tokens.css の2本だけ・本番で実測）。
      ＝ マイページの入力欄は**規則が1つも当たっていない**状態だった。
      実測（別の席が18枚×3幅×2時間帯で）: `SELECT.bcs-input` が **238×19 / 308×19 / 340×19**、
      font-size 13.3px。**44pxの半分以下**で、しかも **16px 未満なので iPhone では押すと画面が拡大する**。
   🔴 これは「時間の見方」＝オーナーが「UIで分からせる」と言った、その中心の部品だった。
   🔴 要素で絞らない（`input.bcs-input` と書くと select と textarea が落ちる）。
      2026-09-10 に main.css 側を直したとき、**マイページの側を落としていた**
      ＝「4か所のうち3か所を直して1か所を落とす」。
   🟢 値は main.css の `.bcs-input` から**そのまま**取った。新しい見た目を作っていない。 */
.bcs-input{
  width:100%; box-sizing:border-box; margin-top:6px; padding:12px 14px;
  border:1px solid var(--line); border-radius:10px; background:var(--surface-2); color:var(--ink);
  font-family:inherit; font-size:16px; min-height:44px; line-height:1.5;
}
textarea.bcs-input{min-height:112px}
/* 🔴 select は既定の見た目が OS ごとに違い、padding が効かないことがある。
   矢印は自前で描く（背景の画像1つ）。色は tokens から取る。 */
select.bcs-input{
  appearance:none; -webkit-appearance:none;
  padding-right:38px;
  background-image:linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%),
                   linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-position:calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
}
.bcs-input:focus{border-color:var(--blue); background-color:var(--surface)}
.bcs-input:focus-visible{outline:2px solid var(--blue); outline-offset:2px}

/* ---------- 面談を予約する（2026-09-11 オーナー確定「予約する時にUIでわかるように」） ----------
   🔴 対応時間を文で書かない。**日と時間の並びそのもの**で分からせる。
   🔴 空きの無い日を消さない（消すと「無いのか、読めていないのか」が分からない）。
   🔴 白カード基調。左線アクセントは使わない。密着はバグ。 */
.oc-book-in{margin-top:14px}

/* ① 日を選ぶ。横に並べ、はみ出す分は**この帯の中だけ**で送る（本文は横に動かさない）。 */
.oc-days{
  display:flex; gap:8px; list-style:none; margin:0 -4px 4px; padding:4px;
  overflow-x:auto; scroll-snap-type:x proximity;
  background:
    linear-gradient(to right, var(--paper) 30%, rgba(255,255,255,0)) left center / 24px 100% no-repeat,
    linear-gradient(to left,  var(--paper) 30%, rgba(255,255,255,0)) right center / 24px 100% no-repeat,
    radial-gradient(farthest-side at 0 50%,    rgba(0,0,0,.09), rgba(0,0,0,0)) left center / 10px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.09), rgba(0,0,0,0)) right center / 10px 100% no-repeat;
  background-attachment: local, local, scroll, scroll;
}
/* 🔴🔴 2026-09-11 オーナー指示「件数表示なくなった分、ボタンの大きさ調整して」。
   実測（390px・直す前）:
     空きのある日 … 中身 23px ／ ボタン 64px ＝ **41px が空いていた**
     空きなしの日 … 中身 39px ／ ボタン 64px
   🔴 高さは**2行のほう（空きなし）に合わせる**。1行のほうに合わせると、
      空きなしの日だけ背が高くなり、横に並べたとき段違いになる。
   🔴 数字は当てずっぽうで決めない: 余白8 + 日付19 + すき間2 + 「空きなし」16 + 余白8 = 53
   🔴 空きのある日は1行なので、中央に置く（justify-content:center のまま）。 */
.oc-day{
  flex:0 0 auto; scroll-snap-align:start; min-width:104px; min-height:54px;
  display:flex; flex-direction:column; justify-content:center; gap:2px;
  padding:8px 12px; border:1px solid var(--line); border-radius:12px;
  background:var(--paper); cursor:pointer;
}
/* 🔴 2026-09-11 オーナー指示「曜日も書いてあげて（土曜日は青、日曜日は赤等モダンなUIで）」。
   🔴 1行のまま（日付と曜日を上下に積むと、マスの高さが伸びる。[[feedback-card-height-creep]]）。
   🔴 色は曜日そのものにだけ。日付まで赤くすると、日曜が「警告」に見える。 */
/* 🔴 括弧を付けたので、あいだの隙間は要らない（「10月1日 （土）」と離れて見える）。 */
.oc-day-d{display:flex; align-items:baseline; gap:0; font-size:13px; font-weight:600;
  color:var(--ink); white-space:nowrap}
.oc-day-md{font-variant-numeric:tabular-nums}
.oc-day-w{font-size:12px; font-weight:700; color:var(--muted)}
.oc-day-w[data-w="6"]{color:var(--blue-ink)}   /* 土 */
.oc-day-w[data-w="0"]{color:var(--crit)}       /* 日 */
.oc-day-n{font-size:11.5px; color:var(--blue-ink)}
.oc-day.is-on{border-color:var(--blue); box-shadow:inset 0 0 0 1px var(--blue)}
/* 🔴 空きの無い日は**消さずに**置く。押せないことは、色と形で分かるようにする。 */
.oc-day.is-none{background:var(--surface-2); cursor:default}
/* 🔴 空きの無い日は、曜日の色も落とす。押せない日で赤が目に入ると、
   「何か起きている日」に読める（色は押せる日のためのもの）。 */
.oc-day.is-none .oc-day-d{color:var(--muted); font-weight:400}
.oc-day.is-none .oc-day-w,
.oc-day.is-none .oc-day-w[data-w="6"],
.oc-day.is-none .oc-day-w[data-w="0"]{color:var(--faint); font-weight:600}
.oc-day.is-none .oc-day-n{color:var(--muted)}
.oc-day:focus-visible{outline:2px solid var(--blue); outline-offset:2px}

/* ② 時間を選ぶ。🔴 端は「これで終わり」と分かるように、余白と細い線で見せる（文で書かない）。 */
/* 🔴🔴 2026-09-11 オーナー指示2つを一組で。
     「取り消し不可の記載、時間の右に移動する？」
     「ボタンの大きさについて時間の方も調整」

   🔴 実測（右へ移しただけのとき）: 列が 112px のままだと
        320px … 115px幅で**折り返して 64px**（前より背が高い）
       1280px … 122px幅で**折り返して 64px**
      ＝ 右へ移したのに、かえって伸びていた。**列の幅を広げないと意味がない。**
   🔴 いくつ要るか（当てずっぽうにしない）:
        余白12 + 時刻38 + すき間6 + 「取り消し不可」66 + 余白12 ＝ 134 → **140px**

   🔴 高さは min-height を下げて、**中身に合わせて伸びる**ようにする。
        日本から見る人 … 1行（時刻だけ）
        海外から見る人 … 2行（時刻＋「日本 22:00」）
      両方に同じ高さを強いると、多いほうに合わせて全部が伸びる。 */
.oc-times{list-style:none; margin:12px 0 0; padding:0; display:grid; gap:8px;
  grid-template-columns:repeat(auto-fill, minmax(112px, 1fr))}
/* 🔴 実測: 320px の端末では、カードの中が 238px しかない。
     140px を求めると **1列**になり、12枠が縦に12行 並ぶ（前より読みにくい）。
   🔴 なので、広げるのは**361px 以上のときだけ**。
     360px以下 … 2列のまま。「取り消し不可」は2行目へ折り返す（前と同じ高さ）
     375px以上 … 2列・1行・**40px**
   🔴 境目は 361 では足りなかった（実測: 361px で**1列**になった）。
      2列にするには 140×2 ＋ すき間8 ＝ 288px が要る。カードの中がそれ以上になる幅が 375。
   🔴 幅で分ける規則は、**両側の幅で測ってから**入れる（片側だけ見て入れない）。 */
@media (min-width:375px){
  .oc-times{grid-template-columns:repeat(auto-fill, minmax(140px, 1fr))}
}
/* 🔴 2026-09-11 オーナー指示「これら、枠の中で中央寄せ」。
   縦の並び（時刻の行 ／ 「日本 22:00」）を、枠の**横の中央**へ。
   🔴 中身に合わせて伸びる形（min-height）は変えない。中央へ寄せるだけ。 */
.oc-time-i{
  display:flex; flex-direction:column; gap:2px; align-items:center;
  min-height:40px; padding:8px 12px; border:1px solid var(--line); border-radius:10px;
  background:var(--paper); cursor:pointer;
}
/* 🔴 2026-09-11 時刻と「取り消し不可」を同じ行に。折り返してよい（切らない） */
/* 🔴 折り返したときの**行と行のすき間**を詰める。
   gap を1つで書くと、横のすき間(6px)が縦にも効いて、320px で 8px 太っていた（実測）。 */
/* 🔴 時刻と「取り消し不可」の**組**も中央へ。
   折り返したとき（360px以下で2行になる）は、**行ごとに**中央へ寄る。 */
.oc-time-hd{display:flex; align-items:baseline; justify-content:center;
  column-gap:6px; row-gap:0; flex-wrap:wrap}
.oc-time-t{font-size:15px; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums}
.oc-time-j{font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums}
.oc-time-i:hover{border-color:var(--blue-border)}
.oc-time-i:focus-visible{outline:2px solid var(--blue); outline-offset:2px}
.oc-times-end{height:1px; margin:18px 0 6px; background:var(--line)}
/* 🔴 24〜48時間の枠は、押さえた時点で消費が確定する。**その枠だけ**に印を付ける
   （一覧の頭に注意書きを置かない ── 全部に効くように読まれる）。 */
.oc-time-i.is-soon{border-style:dashed}
.oc-time-warn{font-size:12px; font-weight:700; color:var(--warn, #8a5a00)}
/* 『※』の意味（その印が出ている日だけ） */
.oc-times-note{margin:8px 0 0; font-size:12px; line-height:1.7; color:var(--ink-soft)}
.oc-confirm-w{margin:10px 0 0; font-size:13.5px; font-weight:600; color:var(--warn, #8a5a00)}

/* ③ どの時間帯で見ているか。**文ではなく、選べる形**で示す。 */
/* 🔴🔴 2026-09-11 オーナー指示「ドロップメニューの枠広すぎる」「横並びにする？」。
   実測（直す前）: 選択欄が 320px→238 / 390px→308 / 1280px→340。
   いちばん長い選択肢は「ロサンゼルス」「シンガポール」の6文字＝約90px。
   ＝ 中身の**3倍**の枠があった。
   🔴 横並びにする。幅は**中身に合わせる**（width:auto）。
   🔴 ただし折り返せるようにする。320px はカードの中が238pxしかなく、
      見出し「タイムゾーン」＋すき間＋選択欄で入り切らない幅が在りうる。
      入らないときに横あふれさせない（[[feedback-second-display-kills-the-first]]）。 */
/* 🔴 2026-09-11 オーナー指示「月選択の右側に空いてるスペースに移動」。
   左＝月のタブ、右＝タイムゾーン。狭い画面では下へ折り返る。 */
.oc-toprow{display:flex; align-items:center; justify-content:space-between;
  gap:10px 12px; flex-wrap:wrap; margin:0 0 8px}
.oc-toprow > .oc-months{margin:0}
.oc-tzpick{display:flex; flex-direction:row; align-items:center; gap:8px; flex-wrap:wrap;
  margin:0 0 0 auto; font-size:12.5px; color:var(--ink-soft)}
.oc-tzpick > span{flex:0 0 auto}
/* 🔴 実測: いちばん長い「シンガポール」で中身が 148px。150 だと余白が 2px しか無い。
   書体が少し変わっただけで切れるので、1文字ぶん足して 166px にする。
   320px でも 見出し74 + すき間8 + 166 = 248 … カードの中は238px なので**折り返す**。
   折り返しても崩れないことは flex-wrap で担保ずみ（下で実測する）。 */
/* 🔴🔴 2026-09-11 オーナー指摘「タイムゾーンの『東京』とか入ってるところ大きい（縦が高い）」。
   `.bcs-input` は本文の入力欄の寸法（padding 12px・上に 6px）なので、
   月のタブ（36px）の横に置くと、ここだけ背が高い。
   🔴 **字は小さくしない。**16px を下回ると iPhone が押した瞬間に画面を拡大する
      （[[feedback-...]] 実測で踏んでいる）。縮めるのは**余白だけ**。
   🔴 幅は 166px のまま（「シンガポール」の実測 148px ＋ 1文字ぶん）。
      字の大きさを変えていないので、この実測はそのまま生きる。 */
/* 🔴🔴 2026-09-12 オーナー指示「タイムゾーンボタンを今よりも6割くらいの大きさに。
   『面談を予約する』の見出しと同じ行、右寄せに」。
   実測（直す前）: 44px × 166px。→ 30px × 中身の幅（「東京」で約 70px・最長でも約 120px）。
   🔴 字は 16px のまま（iPhone の拡大を避ける）。縮めたのは余白・高さ・最小幅。
   🔴 見出しの行（.oc-book-hd）に置く。狭い画面で入らなければ下へ折り返る（横あふれさせない）。 */
.oc-book-hd{display:flex; align-items:center; justify-content:space-between; gap:8px 12px; flex-wrap:wrap; margin:0 0 10px}
.oc-book-hd > .bcp-h3{margin:0; flex:1 1 auto; min-width:0}
.oc-book-hd .oc-tzpick{margin:0; gap:6px; font-size:11px}
/* 🔴 狭い画面では「タイムゾーン」の字を隠して、見出しと同じ行に収める（実測: 390px で折り返した）。
   字は消すのではなく読み上げには残す（select 自体に aria-label を持たせてある）。 */
@media (max-width:480px){
  .oc-book-hd .oc-tzpick > span{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
}
.oc-tzpick select{
  width:auto; min-width:0; max-width:100%;
  margin-top:0; padding:3px 24px 3px 8px; min-height:30px; line-height:1.3;
  border-radius:8px; font-size:16px;
}
/* 見出しの行の下に月のタブだけが残る。タブが無い月は帯が空になるので、余白を持たせない。 */
.oc-toprow:empty{display:none}

/* オーナーの手番の一覧（2026-09-11）。🔴 お客様には出ない（口が404を返す） */
.bcp-oq{margin:0 0 8px}
.bcp-oq-c{padding:16px}
.bcp-oq-h{display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap}
.bcp-oq-n{font-size:15px; font-weight:700; color:var(--bcs-text)}
.bcp-oq-s{display:flex; gap:8px; flex-wrap:wrap}
.bcp-oq-b{font-size:12px; font-weight:600; color:var(--ink-soft);
  background:var(--surface-2, #F6F6F6); border-radius:999px; padding:3px 10px}
.bcp-oq-l{list-style:none; margin:12px 0 0; padding:0; display:grid; gap:6px}
.bcp-oq-l li{display:flex; gap:8px; align-items:baseline; font-size:13.5px; line-height:1.7}
.bcp-oq-k{flex:0 0 auto; font-size:11.5px; font-weight:600; color:var(--muted)}
.bcp-oq-c .bcp-btn{margin-top:14px; min-height:44px}

/* お支払い方法を変える入口（2026-09-11）。補助操作の強さで置く */
.up-card{margin:10px 0 18px}

/* ── 2026-09-11 この日だけの項目（オーナー指示） ─────────────
   🔴 項目と同じ列に並べる。ただし**見た目は分ける**。
      押した瞬間に置かれる項目と、名前と時間を聞いてから置くものが
      同じ形だと押し間違える。 */
.oc-pb--custom{
  border-style:dashed;
  color:var(--ink-soft);
  font-weight:600;
}
.oc-pb--custom.is-on{border-style:solid}
/* 🔴 2026-09-11 オーナー指示の「空白」。置くボタンと**並べても押し間違えない**見た目にする。
   項目＝白地、カスタム＝破線、空白＝薄い地。3つが同じ形にならないようにしている。 */
.oc-pb--clear{
  background:var(--surface-2);
  color:var(--muted);
  font-weight:600;
}
.oc-pb--clear.is-on{
  border-color:var(--line); box-shadow:none;
  background:var(--surface-2); color:var(--ink-soft);
}
.oc-cu .oc-pe-row{border-bottom:0; padding-bottom:0}

/* ── 2026-09-11 カレンダーの入口（マイページの中） ─────────────
   🔴 オーナー指示「これは私専用のマイページ配下に置かないと」。
      案件のナビから外し、マイページに1枚だけ置く。 */
.bcp-back{
  display:inline-flex; align-items:center; min-height:44px;
  color:var(--bcs-accent); font-size:13.5px; font-weight:600; text-decoration:none;
}
.bcp-back:hover{text-decoration:underline}
.bcp-calentry{
  display:flex; align-items:center; gap:4px 12px; flex-wrap:wrap;
  margin:0 0 16px; text-decoration:none; color:inherit;
}
.bcp-calentry:hover{border-color:var(--bcs-border-strong)}
.bcp-calentry-t{font-family:var(--font-head); font-size:16px; font-weight:700; color:var(--ink)}
.bcp-calentry-s{flex:1 1 100%; font-size:13px; color:var(--ink-soft)}
@media (min-width:600px){
  .bcp-calentry-s{flex:1 1 auto; margin-left:4px}
}
.bcp-calentry .bcp-row-ar{margin-left:auto; flex:none}

/* ── 2026-09-11 ホーム画面アプリの引き継ぎ符号 ───────────────── */
.bcp-ho-out{margin:12px 0 0}
.bcp-ho-code{
  margin:0; font-size:34px; font-weight:700; letter-spacing:.18em;
  color:var(--ink); font-variant-numeric:tabular-nums;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  word-break:break-all;
}
.bcp-ho-code.is-dead{color:var(--muted); text-decoration:line-through}
/* 🔴 アプリの中は画面の下端がホームバーに隠れる。安全域ぶん空ける */
@supports (padding: max(0px)) {
  @media (display-mode: standalone) {
    .bcp-main{padding-bottom:max(24px, env(safe-area-inset-bottom))}
    .bcp-bottom{padding-bottom:max(0px, env(safe-area-inset-bottom))}
  }
}

/* ── 2026-09-11 予約の操作感（オーナー指摘6件） ────────────────── */

/* 済んだことの合図。消えない・急かさない・赤くしない */
.oc-flash{
  margin:0 0 14px; padding:14px 16px; border-radius:12px;
  border:1px solid var(--blue-border); background:var(--blue-bg, #f2f7ff);
}
.oc-flash.is-warn{border-color:var(--line); background:var(--surface-2)}
.oc-flash-t{margin:0; font-size:15px; font-weight:600; color:var(--ink); line-height:1.6}
.oc-flash-s{margin:4px 0 0; font-size:13px; color:var(--ink-soft); line-height:1.6}

/* 月で飛ぶ */
.oc-months{display:flex; gap:6px; margin:0 0 8px; flex-wrap:wrap}
/* 🔴🔴 2026-09-11。ここを `.oc-month` と書いていたため、
   **月の見出し（.oc-month・18px/600）にこの見た目が当たっていた**（後の規則が勝つ）。
   実測: 見出しが 13px で描かれ、同じ画面の他のカードの見出し（15px/700）と揃っていなかった。
   🔴 タブは `.oc-mtab`。**別のものには別の名前**。 */
.oc-mtab{
  appearance:none; -webkit-appearance:none; cursor:pointer;
  /* 🔴🔴 2026-09-11。共有の検査（bloom-gate の44px）が、この札を **51×36 / 58×36** で
     赤にしていた。全社の決まり「指で押せる大きさ（44px）を下回らない」を割っていた。
     🔴 別の席の配布まで止めていた。自分の資材が、他所の手を止める形になっていた。
     🔴 高さだけ上げる（横幅は文字のまま）。 */
  min-height:44px; padding:6px 14px; border-radius:999px;
  border:1px solid var(--line); background:var(--paper);
  font:inherit; font-size:13px; font-weight:600; color:var(--ink-soft);
}
.oc-mtab.is-on{border-color:var(--blue); color:var(--blue-ink); background:var(--blue-bg, #f2f7ff)}
.oc-mtab:focus-visible{outline:2px solid var(--blue); outline-offset:2px}

/* 選んだ時間に印を残す */
.oc-time-i.is-on{
  border-color:var(--blue); box-shadow:inset 0 0 0 1px var(--blue);
  background:var(--blue-bg, #f2f7ff);
}

/* 確認パネルの足。ボタンの高さと間隔を揃える */
.oc-confirm-f{display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 0}
.oc-confirm .oc-confirm-f .bcp-btn{margin-top:0; min-height:44px}

/* 予約カードの操作ボタン */
.oc-acts{display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 0}
.oc-acts .bcp-btn{min-height:44px; margin:0}
.oc-acts .bcp-btn.is-armed{border-color:var(--warn-border, #d8b16a); color:var(--warn, #8a5a00)}
.oc-armed{margin:10px 0 0; font-size:13.5px; line-height:1.7; color:var(--warn, #8a5a00)}
.oc-moving{
  margin:10px 0 0; padding:10px 12px; border-radius:10px;
  border:1px solid var(--blue-border); background:var(--blue-bg, #f2f7ff);
  font-size:13.5px; line-height:1.7; color:var(--ink);
}

/* 今月の残り。🔴 大きな数字にしない（ゲームじゃない）。 */
/* 今月あと何回。🔴 2026-09-11 オーナー「もっと柔らかく目立つフォントカラーとかに」。
   🔴 「柔らかく」と「目立つ」は、色を強くすると両立しない。**地の色で浮かせて、字は落ち着かせる。**
   🔴 数字だけを大きくしない（§20・ゲームじゃない）。帯ごと少しだけ持ち上げる。 */
/* 制作規模（お支払いの画面）。2026-09-11。
   🔴 金額を大きくしない（§20）。相場の話であって、請求ではない。
   🔴 請求書のカードと同じ見た目にしない（別のものなので）。 */
.bcp-scope{padding:18px 20px}
.bcp-scope-p{margin:0 0 12px; font-size:14.5px; line-height:1.9; color:var(--ink)}
.bcp-scope-p:last-of-type{margin-bottom:0}
.bcp-scope-t{margin:14px 0; border-top:1px solid var(--line)}
.bcp-scope-tr{
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  padding:10px 0; border-bottom:1px solid var(--line);
}
.bcp-scope-th{flex:1 1 200px; min-width:0; font-size:14px; color:var(--ink)}
/* 🔴 金額は右へ。ただし太字や大きな字にしない（目に飛び込ませない）。 */
.bcp-scope-td{flex:0 0 auto; margin-left:auto; font-size:14px; color:var(--ink-soft);
  font-variant-numeric:tabular-nums; white-space:nowrap}
.bcp-scope-m{margin:14px 0 0; font-size:12px; color:var(--muted)}

/* 期限が過ぎたもの。🔴 赤くしない（もう起きたことで、急かす対象ではない）。
   🔴 いま動いている棚と**地の色で**分ける。並べただけだと同じ棚に見える。 */
.bcp-rg-dead{background:var(--surface-2)}
.bcp-rg-dead .bcp-rg-t{color:var(--ink-soft)}
.bcp-rg-dead .bcp-rg-due-v{color:var(--muted)}

.oc-left{
  display:inline-block; margin:10px 0 0; padding:9px 15px;
  border-radius:999px; font-size:14.5px; font-weight:600; line-height:1.5;
}
.oc-left.is-open{
  background:var(--blue-pale); border:1px solid var(--blue-border); color:var(--blue-ink);
}
/* 使い切っているときは誘いではない。静かに置く。 */
.oc-left.is-used{
  background:var(--surface-2); border:1px solid var(--line); color:var(--ink-soft); font-weight:500;
}
/* 数えられなかったとき。🔴 0件と同じ顔にしない。 */
.oc-left.is-unknown{
  background:var(--surface-2); border:1px dashed var(--line); color:var(--muted); font-weight:500;
}

/* ホームの面談ブロック（2026-09-11）。
   🔴 急かさない ── 赤も、警告色も、バッジも使わない。白カードのまま静かに置く。
   🔴 面談だけで画面を占めない（ホームは30秒で6点）。 */
.bcp-hm{margin:36px 0 0}   /* 🔴 2026-09-12 節の間隔を h2 と揃える（区切りが分かるように） */
.bcp-hm-k{margin:0; font-size:12px; font-weight:600; letter-spacing:.06em; color:var(--ink-soft)}
.bcp-hm-t{margin:4px 0 0; font-size:19px; font-weight:700; line-height:1.45; color:var(--ink)}
.bcp-hm .bcp-card{margin-top:12px}

/* オーナー: 面談を受けられる時間（2026-09-11）。🔴 オーナー専用の面にだけ出る。 */
.oc-hours-list{display:grid; gap:12px; margin:12px 0}
/* 🔴🔴 2026-09-11 オーナー指摘「ここも ui ぐちゃぐちゃだ」（実機 390px）。
   6つの子を1つの格子に流し込んでいたので、狭い画面では
   「終了」と「この日から」のような**関係のない欄どうし**が横に並んでいた。
   🔴 子を「名前」「受ける時間の組」「効かせる期間の組」「足元」の4つに括り、
      狭いときは**縦に1つずつ**積む。組の中だけが横に並ぶ。 */
.oc-hours-row{display:grid; gap:14px;
  padding:14px; border:1px solid var(--line); border-radius:12px; background:var(--paper)}
@media (min-width:720px){
  .oc-hours-row{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); align-items:end}
  .oc-hours-row > .oc-hours-foot{grid-column:1 / -1}
}
/* 組の中の欄は、格子いっぱいに伸ばす（178px の上限は時刻だけの話）。 */
.oc-hours-row .oc-pe-time{gap:12px}
.oc-hours-row .oc-pe-time .bcs-input{max-width:none; width:100%}
.oc-hours-row .oc-hours-t .bcs-input{text-align:center}
/* 印と「外す」は両端。🔴 「外す」は消す操作なので、押しやすい所へ置かない（右端）。 */
.oc-hours-foot{display:flex; align-items:center; justify-content:space-between; gap:12px}
.oc-hours-foot .oc-pe-ad{flex-direction:row; align-items:center; gap:10px}
.oc-hours-foot .oc-sw{margin-top:0}
.oc-hours-del{margin-top:0; align-self:center; min-height:44px; padding:0 16px;
  display:inline-flex; align-items:center; line-height:1}
/* 🔴🔴 2026-09-11 オーナー指示「一番下のボタン三つ横並びに（1行に）」。
   実機 390px で「＋ 項目を足す／閉じる」で1行、「保存する」だけが次の行に落ちていた。
   🔴 折り返さない（nowrap）。3つで幅を分け合う。
   🔴 収めるために**字を小さくするのは、収まらない幅のときだけ**。
      広い画面まで小さくすると、押しにくいボタンが全画面に広がる。
   計算（実測）: 390px − モーダルの外 24px − 中の余白 40px = 326px。
      隙間 8px×2 を引いて 1つ 103px。「＋ 項目を足す」は 13px なら約 94px で収まる。 */
.oc-pe-foot{flex-wrap:nowrap}
.oc-pe-foot .bcp-btn{flex:1 1 0; min-width:0; white-space:nowrap}
@media (max-width:460px){
  .oc-pe-foot{gap:8px}
  .oc-pe-foot .bcp-btn{font-size:13px; padding:0 8px}
}
@media (min-width:560px){
  .oc-pe-foot{flex-wrap:wrap}
  .oc-pe-foot .bcp-btn{flex:0 0 auto; min-width:120px}
}
/* 一覧に出す印 */
/* 保存の状態（2026-09-11 オーナー指示「操作が止まってから10秒後に更新」）。
   🔴 出続ける字なので、目立たせない。ただし**消さない**（保存済みに見せない）。 */
.oc-save{margin:12px 0 0; font-size:12px; line-height:1.6; min-height:1.6em; color:var(--muted)}
.oc-save.is-pend{color:var(--warn); font-weight:600}
.oc-save.is-busy{color:var(--ink-soft)}
.oc-save.is-done{color:var(--muted)}
.oc-tt-tag{flex:none; padding:2px 8px; border-radius:999px;
  background:var(--surface-2); color:var(--warn);
  font-size:11.5px; font-weight:700; white-space:nowrap}
/* お客様の画面。🔴 「取り消し不可」（できないこと）と同じ色にしない。
   これは**断り**であって、禁止ではない。 */
.oc-time-tt{flex:none; font-size:11px; font-weight:700; color:var(--warn); white-space:nowrap}
.oc-confirm-tt{
  margin:10px 0 0; padding:10px 12px; border-radius:8px;
  background:var(--surface-2); color:var(--ink-soft);
  font-size:12.5px; line-height:1.8;
}
.oc-hours-f{display:flex; flex-direction:column; gap:4px; font-size:11.5px; color:var(--ink-soft)}
.oc-hours-f{}
.oc-hours-nm{min-width:0}
.oc-hours-t{min-width:0}
.oc-hours-d{min-width:0}
/* いつから何時になるか。🔴 90日を全部 並べない。**変わり目だけ**。 */
.oc-hours-when{list-style:none; margin:8px 0 0; padding:0; display:grid; gap:6px}
.oc-hours-when li{display:flex; gap:10px; align-items:baseline; font-size:13px}
.oc-hours-when .d{flex:0 0 auto; color:var(--ink-soft)}
.oc-hours-when .t{font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums}

/* 🔴🔴 2026-09-11 の記録（次に見た人へ）。
   ホームの面談ブロックを足して、総高÷ブロック数が **192 → 220** になった。
   これは意味のある高さで、内訳は 見出し／日の帯／時間の並び／時間帯の選択。
   🔴 縮めるなら、次のどれかを**捨てる**ことになる。
     ・時間帯の選択 → ホームの時刻が「誰の時間か」分からなくなる（−60px）
     ・日の帯       → その場で日を選べなくなる＝リンクだけになる（−72px）
     ・時間の並び   → その場で予約できなくなる（オーナー指示から外れる）
   ＝ **220 は縮めない。**縮めるという判断は、上のどれを捨てるかの判断と同じ。 */

/* 選んだあとの確認。🔴 チケットの話は、その予約に効く瞬間に、その場で。 */
.oc-confirm{margin:18px 0 0; padding:16px; border:1px solid var(--blue-border);
  border-radius:12px; background:var(--blue-pale)}
.oc-confirm-t{margin:0; font-size:18px; font-weight:700; color:var(--ink)}
.oc-confirm-j{margin:2px 0 0; font-size:12.5px; color:var(--ink-soft)}
.oc-confirm-k{margin:10px 0 0; font-size:13.5px; color:var(--ink)}
.oc-confirm .bcp-btn{margin-top:14px}

/* 空きなし。🔴 「読めなかった」（notice warn）とは別の見た目にする。 */
.oc-empty{margin:12px 0 4px; font-size:14.5px; color:var(--ink)}

/* 🔴 2026-09-11。どの時間帯の時刻かを、**その行のすぐ下**に置く。
   一覧の頭で1回言うだけでは、行だけを見た人に伝わらない。 */
.oc-tz{display:block; margin-top:2px; font-size:11.5px; line-height:1.5; color:var(--muted)}
/* 🔴 2026-09-11: マスを1行にしたので、この2つは使っていない。
   消さずに残すのは、日の中身の出し方を戻したくなったときのため。
   🔴 ただし `.oc-open` は**カードの名前とぶつかった**（カードの文字が全部 青くなった）ので、
      新しく `oc-` の名前を付けるときは、ここを見ること。 */
.oc-cnt{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.oc-open{color:var(--blue-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.oc-flag{color:var(--blue-ink);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.oc-flag.dr{font-weight:500;border:1px dashed var(--blue-border);border-radius:3px;padding:0 3px;align-self:flex-start}
.oc-av{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.oc-av i{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--blue);display:inline-block;flex:none;box-sizing:border-box}
.oc-av.c i{background:var(--blue)}
.oc-av.p i{background:linear-gradient(90deg,var(--blue) 50%,transparent 50%)}
.oc-av.u i{border-style:dotted;border-color:var(--warn)}
.oc-av.u{color:var(--warn)}
.oc-legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;color:var(--muted);margin:10px 0 0}
.oc-2col{display:grid;gap:22px;align-items:start}
.oc-stack{display:grid;gap:22px}
.oc-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-2)}
.oc-list li{display:flex;gap:12px;padding:12px 2px;border-bottom:1px solid var(--line-2);align-items:flex-start;min-height:44px;box-sizing:border-box;font-size:14px}
.oc-time{font-variant-numeric:tabular-nums;color:var(--muted);font-size:12.5px;white-space:nowrap;min-width:84px;padding-top:2px}
.oc-it{min-width:0;flex:1}
.oc-it .t{font-weight:600;color:var(--ink);font-size:14px;line-height:1.5}
.oc-it .s{font-size:12.5px;color:var(--muted);line-height:1.7}
.oc-act{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.oc-act .oc-ib{min-height:40px}
.oc-pal{list-style:none;margin:0;padding:0}
.oc-pal li{display:flex;align-items:center;gap:12px;padding:9px 2px;border-bottom:1px solid var(--line-2);min-height:44px;box-sizing:border-box}
.oc-pal .oc-tag{flex:none}
.oc-pal .nm{flex:1;min-width:0;font-size:14px;color:var(--ink)}
.oc-pal .nm small{display:block;font-size:12px;color:var(--muted);line-height:1.6}
.oc-pal li.is-on{background:var(--blue-pale);margin:0 -8px;padding-left:10px;padding-right:10px;border-radius:var(--r-sm)}
.oc-tag{display:inline-block;min-width:40px;text-align:center;padding:4px 8px;border:1px solid var(--line);border-radius:var(--r-sm);
  font-size:12px;background:var(--surface-2);color:var(--ink-soft);white-space:nowrap}
.oc-tag.on{border-color:var(--blue-border);background:var(--blue-soft);color:var(--blue-ink);font-weight:600}
.oc-radio{width:18px;height:18px;border-radius:50%;border:1.6px solid var(--line);flex:none;display:inline-grid;place-items:center}
.oc-radio.on{border-color:var(--blue)}
.oc-radio.on::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--blue)}
.oc-check{width:18px;height:18px;border-radius:4px;border:1.6px solid var(--line);flex:none;display:inline-grid;place-items:center;box-sizing:border-box}
.oc-check.on{border-color:var(--blue);background:var(--blue)}
.oc-check.on::after{content:"";width:9px;height:5px;border-left:1.8px solid #fff;border-bottom:1.8px solid #fff;transform:rotate(-45deg) translate(1px,-1px)}
.oc-check.lock{border-style:dashed}
.oc-form{display:grid;gap:16px}
.oc-f label,.oc-f .lb{display:block;font-family:var(--font-head);font-size:12.5px;font-weight:600;color:var(--ink-soft);margin:0 0 6px}
.oc-f .hint{font-size:12px;color:var(--muted);line-height:1.7;margin:6px 0 0}
.oc-seg{display:flex;flex-wrap:wrap;gap:8px}
.oc-seg button{min-height:44px;padding:0 14px;border:1px solid var(--line);background:var(--paper);border-radius:var(--r-sm);font:inherit;font-size:13.5px;color:var(--ink-soft);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.oc-seg button.on{border-color:var(--blue);background:var(--blue-soft);color:var(--blue-ink);font-weight:600}
.oc-seg button.on::before{content:"";width:8px;height:4px;border-left:1.6px solid var(--blue-ink);border-bottom:1.6px solid var(--blue-ink);transform:rotate(-45deg) translateY(-1px)}
.oc-kvs{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;font-size:13.5px;margin:0}
.oc-kvs dt{color:var(--muted);font-size:12.5px;padding-top:1px;white-space:nowrap}
.oc-kvs dd{margin:0;color:var(--ink);line-height:1.6;min-width:0}
.oc-bar{position:absolute;left:0;right:0;bottom:53px;background:var(--paper);border-top:1px solid var(--line);padding:11px 16px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;box-shadow:var(--shadow-lg);font-size:13px;flex-wrap:wrap}
.oc-bar .oc-btns{display:flex;gap:8px;flex:none}
.oc-bar .bcp-btn{width:auto;padding:0 16px;font-size:14px}
.oc-undo{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px;border-radius:8px;background:var(--surface-2)}
.oc-undo-t{font-size:12.5px;color:var(--ink-soft)}
.oc-undo-b{flex:none;min-height:36px;padding:0 10px;background:none;border:0;cursor:pointer;font:inherit;font-size:13px;font-weight:700;color:var(--blue-ink)}
.oc-undo-bar{position:absolute;left:12px;right:12px;bottom:64px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-lg);padding:4px}
.oc-next{border:1px solid var(--blue-border);background:var(--blue-pale)}
.oc-next .big{font-family:var(--font-head);font-size:22px;font-weight:600;color:var(--ink);line-height:1.35;margin:0 0 4px;font-variant-numeric:tabular-nums}
.oc-next .in{font-size:14px;color:var(--blue-ink);font-weight:600}
.oc-hero{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 4px}
.oc-hero h1{font-family:var(--font-head);font-size:22px;font-weight:600;margin:0;line-height:1.35}
.oc-tl{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;font-size:13px;font-variant-numeric:tabular-nums;margin:0}
.oc-tl dt{color:var(--muted);white-space:nowrap}
.oc-tl dd{margin:0;color:var(--ink)}
.oc-tl dd.x{color:var(--muted);text-decoration:line-through;text-decoration-thickness:1px}
.oc-status{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-soft)}
.oc-status i{width:8px;height:8px;border-radius:50%;border:1.5px solid var(--blue);display:inline-block;box-sizing:border-box}
.oc-status.ok i{background:var(--blue)}
.oc-status.wait i{border-style:dashed;border-color:var(--warn)}
.oc-ops{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-2)}
.oc-ops li{padding:10px 2px;border-bottom:1px solid var(--line-2);font-size:13px;display:flex;justify-content:space-between;gap:10px;align-items:center;min-height:44px;box-sizing:border-box}
.oc-ops .id{font-family:var(--font-mono);font-size:11px;color:var(--muted)}
.oc-ops .conf{color:var(--warn);font-size:12.5px;line-height:1.6}

/* 節が描けなかったときの置き場（2026-09-10・受入条件§46「Partial Failureで全画面が落ちない」）。
   🔴 目立たせない。事故の告知ではなく「この部分は出せていない」という事実だけ。
   🔴 赤や警告色を使わない ── お客様に「壊れた」と読ませない。ほかは正常に見えている。 */
.bcp-sec-fail{margin:14px 0; padding:12px 14px; border-radius:10px;
  background:var(--bcs-soft, #f6f7f8)}
.bcp-sec-fail .bcp-empty-note{margin:0}

/* 画面の足元の1行（2026-09-10・受入条件§46 項目19 ＋ 時刻の断り）。
   🔴 弱く出す。読みたい人が探せればよく、本題より強くしない。
   🔴 画面につき1回だけ（1件ごとに「日本時間」を足さない・統括裁定）。 */
.bcp-screen-foot{margin:28px 0 0; padding-top:12px; border-top:1px solid var(--bcs-line, #e6e8ea);
  font-size:12px; color:#63686C}   /* 2026-09-17 §138: #7A8189 は白地で 3.94:1（4.5 未満）。#63686C＝5.5:1 */

/* BLOOMに聞く（2026-09-10 オーナー指示）。
   🔴 白カード基調・左線のアクセントは使わない（過去のオーナー確定）。
   🔴 入力欄の文字は 16px 固定。em/rem にすると iPhone で押した瞬間に画面が拡大する
      （同じ罠を 2026-09-10 に面談ページで踏んでいる）。 */
.bcp-ask{margin:0 0 28px; padding:18px; background:var(--bcs-surface, #fff);
  border:1px solid var(--bcs-line, #E8EDF0); border-radius:14px}
.bcp-ask .bcp-sech{margin:0 0 6px}
.bcp-ask-lead{margin:0 0 12px; font-size:13.5px; color:var(--bcs-text-secondary, #5B6270); line-height:1.7}
.bcp-ask-in{width:100%; box-sizing:border-box; padding:12px 14px; font:inherit; font-size:16px;
  line-height:1.6; min-height:88px; color:var(--bcs-text, #0D1B2A);
  border:1px solid var(--bcs-line, #E8EDF0); border-radius:10px; background:var(--bcs-soft, #F8FAFC)}
.bcp-ask-in:focus{border-color:var(--bcs-accent, #2C6FD1); background:#fff}
.bcp-ask-send{margin-top:10px; min-height:44px}
.bcp-ask-out{margin-top:14px; padding-top:14px; border-top:1px solid var(--bcs-line, #E8EDF0)}
.bcp-ask-wait{margin:0; font-size:14px; color:var(--bcs-text-secondary, #5B6270)}
.bcp-ask-a{margin:0; font-size:14.5px; line-height:1.85; white-space:pre-wrap;
  color:var(--bcs-text, #0D1B2A)}
/* 🔴 AIの下書きだと分かる一言。本文より弱く、でも読み飛ばせない位置に。 */
.bcp-ask-note{margin:10px 0 0; font-size:12px; color:var(--bcs-text-secondary, #5B6270)}

/* 数字が出せないときの理由（2026-09-10・受入条件§46 16-18補足）。
   🔴 数字より弱く。ただし読み飛ばせない位置（数字とラベルのすぐ下）。 */
.bcp-mnum-r{margin:2px 0 0; font-size:11.5px; line-height:1.5; color:var(--bcs-text-secondary, #7a8189)}
.bcp-kband-r{display:block; margin-top:2px; font-size:11px; line-height:1.5; color:var(--bcs-text-secondary, #7a8189)}

/* 「この数字の出し方」（2026-09-10）。
   🔴 既定は畳む。**数字より先に読ませない**（読みたい人だけ開く）。 */
.bcp-eff-how{margin:10px 0 0}
.bcp-eff-how > summary{cursor:pointer; font-size:12.5px; color:var(--bcs-text-secondary, #5B6270);
  list-style:none; display:inline-flex; align-items:center; gap:0; min-height:32px}
.bcp-eff-how > summary::-webkit-details-marker{display:none}
/* 🔴 gap は使わない。BudouX が文の一部を span にすると、その span も flex の子になり
   **文の途中に隙間が出る**（2026-09-18 実測 4px）。印の側に余白を持たせる。 */
.bcp-eff-how > summary::before{content:"＋"; font-size:11px; margin-right:4px}
.bcp-eff-how[open] > summary::before{content:"−"}
.bcp-eff-how > summary:focus-visible{outline:2px solid var(--bcs-accent, #2C6FD1); outline-offset:2px}

/* 2026-09-13 お便りへの BLOOM からの返信（お便りの下に本文で出す） */
.bcp-note-reply{position:relative; margin:12px 0 0; padding:4px 0 4px 16px; background:transparent} /* ご依頼主指示（2026-09-13）: 左に薄い縦の線・上下を少し詰める */
.bcp-note-reply::before{content:""; position:absolute; left:0; top:.6em; bottom:.6em; width:1px; background:var(--line, #d9d6cf)}
.bcp-note-reply-k{margin:0 0 6px; font-size:12px; letter-spacing:.06em; color:var(--muted, #6b7280)}
.bcp-note-reply-b{margin:0 0 .8em; font-size:14px; line-height:1.9; color:var(--ink, #111); white-space:pre-wrap}
.bcp-note-reply-b:last-of-type{margin-bottom:0}

/* ---------- 会社情報・資料（Company Kit・2026-09-15・P1A） ----------
   🔴 仕様 J: 320px から横スクロールなし・本文 16px 以上・押す所 44px 以上（設計目標。WCAG 全要件の認定ではない）。
   🔴 既存トークンだけ。Web Font を足さない（UIUX §15）。白カード基調・左線アクセントは使わない。 */
.bcp-kit-sub{margin:0 0 12px; font-size:16px; line-height:1.7; color:var(--ink-soft)}
.bcp-kit-tabs{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 14px; max-width:100%}
.bcp-kit-tab{font-family:var(--font-sans); min-height:44px; padding:10px 14px; border:1px solid var(--bcs-line,#C7CDD4); border-radius:10px;
  background:#fff; color:var(--bcs-text,#1A1A1A); font-size:16px; cursor:pointer; display:inline-flex; align-items:center; gap:6px}
.bcp-kit-tab.is-on{background:var(--bcs-accent); border-color:var(--bcs-accent); color:#fff}
.bcp-kit-tab:focus-visible{outline:2px solid var(--bcs-accent); outline-offset:2px}
.bcp-kit-badge{display:inline-block; min-width:20px; padding:0 6px; border-radius:10px; background:#B3261E; color:#fff; font-size:12px; line-height:20px; text-align:center}
.bcp-kit-tab.is-on .bcp-kit-badge{background:#fff; color:var(--bcs-accent)}
.bcp-kit-held{margin:0 0 12px; padding:10px 12px; border:1px solid #E0B4B0; border-radius:10px; font-size:16px; color:#8A3B12; background:#fff}
.bcp-kit-body{max-width:100%}
.bcp-kit-p{margin:0 0 10px; font-size:16px; line-height:1.8; color:var(--ink)}
.bcp-kit-k{margin:0 0 6px; font-size:14px; color:var(--muted)}
.bcp-kit-val{margin:0 0 8px; font-size:18px; line-height:1.7; font-weight:600; color:var(--ink); overflow-wrap:anywhere}
.bcp-kit-warn{margin:8px 0; padding:8px 10px; border:1px solid #E0B4B0; border-radius:8px; font-size:16px; line-height:1.7; color:#8A3B12; background:#fff}
.bcp-kit-warn p{margin:0 0 6px}
.bcp-kit-err{margin:8px 0 0; font-size:16px; line-height:1.7; color:#B3261E}
.bcp-kit-status{margin:6px 0 0; font-size:16px; line-height:1.7; color:var(--ink-soft); min-height:1.7em}
.bcp-kit-actions{display:flex; flex-wrap:wrap; gap:10px; margin:12px 0 0; max-width:100%}
.bcp-kit-btn{min-height:44px; font-size:16px; padding:11px 18px; align-self:auto; max-width:100%; box-sizing:border-box}
a.bcp-kit-btn{display:inline-flex; align-items:center; margin:0}
.bcp-kit-btn.is-on{background:var(--bcs-accent-soft); border-color:var(--bcs-accent); color:var(--bcs-accent)}
.bcp-kit-list{margin:6px 0 0; padding:0 0 0 20px; font-size:16px; line-height:1.8}
.bcp-kit-links{margin:14px 0 0; font-size:16px; line-height:2}
.bcp-kit-links .bcp-acc-link{min-height:44px; display:inline-flex; align-items:center; font-size:16px}
.bcp-kit-src{margin:6px 0 10px; font-size:16px}
.bcp-kit-src > summary{cursor:pointer; min-height:44px; display:inline-flex; align-items:center; color:var(--bcs-accent)}
.bcp-kit-fix{display:flex; flex-direction:column; gap:10px; margin:12px 0 0; max-width:100%}
.bcp-kit-fix textarea.bcp-input{min-height:96px}
.bcp-kit-dl{margin:8px 0 0; font-size:16px; line-height:1.7}
.bcp-kit-dl dt{margin:8px 0 0; color:var(--muted); font-size:14px}
.bcp-kit-dl dd{margin:0; overflow-wrap:anywhere}
.bcp-kit-imp{padding:12px 0; border-bottom:1px solid var(--bcs-line,#E3E6EB)}
.bcp-kit-imp:last-child{border-bottom:0}
.bcp-kit-preview{margin:10px 0 0; max-width:100%}
.bcp-kit-frame{display:block; width:100%; max-width:100%; aspect-ratio:210/297; min-height:360px; border:1px solid var(--bcs-line,#E3E6EB); border-radius:8px; background:#fff}
.bcp-kit-text{margin:10px 0 0}
.bcp-kit-ver{display:flex; min-height:44px; align-items:center; font-size:16px; text-align:left}
@media (min-width:768px){ .bcp-kit-frame{min-height:640px} }
.bcp-kit-plan{margin:4px 0 10px; max-width:100%}
.bcp-kit-plan .bcp-kit-p{font-weight:600}
.bcp-kit-fix select.bcp-input{min-height:44px; font-size:16px; max-width:100%}

/* ── Company Kit 概要（2026-09-15 オーナー指示書: 今やること 1 つ・作れる資料のカード・最近の資料） ── */
.bcp-kit-eyebrow{margin:0 0 6px; font-size:13px; font-weight:700; letter-spacing:.04em; color:var(--bcs-text-secondary)}
.bcp-kit-sec{margin:22px 0 10px}
.bcp-kit-todo .bcp-kit-todo-t{margin:0 0 8px; font-size:18px; line-height:1.6; font-weight:700; color:var(--ink)}
.bcp-kit-todo .bcp-kit-btn{margin-top:10px}
.bcp-kit-prog{display:flex; align-items:center; gap:10px; margin:6px 0 8px; max-width:100%}
.bcp-kit-prog-b{flex:1 1 auto; min-width:0; height:8px; border-radius:4px; background:var(--bcs-line,#E3E6EB); overflow:hidden}
.bcp-kit-prog-f{height:100%; border-radius:4px; background:var(--bcs-accent)}
.bcp-kit-prog-n{flex:none; font-size:13px; color:var(--bcs-text-secondary); white-space:nowrap}
.bcp-kit-cards{display:grid; grid-template-columns:1fr; gap:12px; max-width:100%}
@media (min-width:720px){ .bcp-kit-cards{grid-template-columns:1fr 1fr} }
.bcp-kit-rc{display:flex; flex-direction:column; min-width:0}
.bcp-kit-rc .bcp-kit-p{flex:1 1 auto}
.bcp-kit-rc .bcp-kit-actions{margin-top:auto; padding-top:12px}
.bcp-kit-recent{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px}
.bcp-kit-rd{display:flex; gap:14px; align-items:flex-start; min-width:0}
.bcp-kit-thumb{flex:none; width:84px; aspect-ratio:210/297; border:1px solid var(--bcs-line,#E3E6EB); border-radius:6px; overflow:hidden; background:#fff; position:relative}
.bcp-kit-thumb-f{position:absolute; left:0; top:0; width:420px; height:594px; border:0; pointer-events:none; transform:scale(.2); transform-origin:0 0}
.bcp-kit-rd-b{flex:1 1 auto; min-width:0}
.bcp-kit-rd-t{margin:0 0 4px; font-size:16px; font-weight:700; color:var(--ink); overflow-wrap:anywhere}
.bcp-kit-rd-b .bcp-kit-btn{margin-top:8px}
.bcp-kit-heldv{font-weight:700; color:var(--bcs-accent)}
.bcp-kit-none{color:var(--muted)}

/* ── 外部サービスへのアクセス: オーナーにはログインに要るものを全部（2026-09-15） ── */
.bcp-vault-meta{display:grid; grid-template-columns:auto 1fr; gap:4px 12px; margin:6px 0 2px; font-size:12.5px}
.bcp-vault-meta dt{color:var(--bcs-text-secondary); white-space:nowrap}
.bcp-vault-meta dd{margin:0; color:var(--bcs-text); overflow-wrap:anywhere}
.bcp-vault-meta a{color:var(--bcs-link, #1a5cff); text-decoration:underline; text-underline-offset:2px}
.bcp-vault-rv-row{display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin:0 0 8px}
.bcp-vault-rv-k{flex:0 0 auto; min-width:6em; font-size:12px; color:var(--bcs-text-secondary)}
.bcp-vault-rv-v{min-width:0; overflow-wrap:anywhere}

/* ── 帳簿（オーナーだけ・2026-09-15）。白カード・余白の階層・320px で横スクロール無し（表は縦積み） ── */
.bcp-ledger{max-width:100%}
.bcp-ledger-state{margin:0 0 14px; font-size:16px; line-height:1.7; color:var(--ink)}
.bcp-ledger-t{margin:0 0 8px; font-size:18px; line-height:1.6; font-weight:700; color:var(--ink)}
.bcp-ledger-sum{margin:0 0 8px; padding:0 0 0 18px; font-size:16px; line-height:1.8}
.bcp-ledger-kpis{display:grid; grid-template-columns:1fr 1fr; gap:12px 16px; margin:6px 0 0}
@media (min-width:720px){ .bcp-ledger-kpis{grid-template-columns:repeat(4,1fr)} }
.bcp-ledger-kpi{display:flex; flex-direction:column; min-width:0}
.bcp-ledger-kl{font-size:13px; color:var(--bcs-text-secondary); margin:0 0 4px}
.bcp-ledger-kv{font-size:22px; font-weight:700; color:var(--ink); line-height:1.3; overflow-wrap:anywhere}
.bcp-ledger-ks{font-size:12.5px; color:var(--bcs-text-secondary); margin:4px 0 0; line-height:1.5}
.bcp-ledger-det{margin:0 0 12px; padding:0 16px; border:1px solid var(--bcs-line,#E3E6EB); border-radius:12px; background:#fff}
.bcp-ledger-det > summary{cursor:pointer; min-height:48px; display:flex; align-items:center; font-size:16px; font-weight:700; color:var(--ink); list-style:none}
.bcp-ledger-det > summary::-webkit-details-marker{display:none}
.bcp-ledger-det > summary::after{content:'＋'; margin-left:auto; color:var(--bcs-text-secondary)}
.bcp-ledger-det[open] > summary::after{content:'−'}
.bcp-ledger-body{padding:0 0 14px}
.bcp-ledger-small{font-size:14px}
.bcp-ledger-small > summary{font-size:14px; font-weight:600; min-height:44px}
.bcp-ledger-small .bcp-kit-list{font-size:14px; line-height:1.7; color:var(--bcs-text-secondary)}
.bcp-ledger-bar{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 10px}
.bcp-ledger-bar .bcp-input{flex:1 1 160px; min-height:44px; font-size:16px; max-width:100%}
.bcp-ledger-sel{min-height:44px; font-size:16px; max-width:100%; margin:0 0 10px}
.bcp-ledger-tw{max-width:100%; overflow-x:auto}
.bcp-ledger-table{width:100%; border-collapse:collapse; font-size:15px}
.bcp-ledger-table th,.bcp-ledger-table td{padding:8px 8px; text-align:left; border-bottom:1px solid var(--bcs-line,#E3E6EB); vertical-align:top}
.bcp-ledger-table th{font-size:13px; font-weight:600; color:var(--bcs-text-secondary)}
.bcp-ledger-table td.num{text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums}
.bcp-ledger-table tr.sum td{font-weight:700}
.bcp-ledger-table tr.warn td{color:#B3261E}
@media (max-width:640px){
  .bcp-ledger-table thead{display:none}
  .bcp-ledger-table tr{display:block; padding:8px 0; border-bottom:1px solid var(--bcs-line,#E3E6EB)}
  .bcp-ledger-table td{display:flex; justify-content:space-between; gap:12px; border:0; padding:3px 0}
  .bcp-ledger-table td::before{content:attr(data-h); color:var(--bcs-text-secondary); font-size:13px; flex:none}
  .bcp-ledger-table td.num{text-align:right}
}

/* 自分のやること（同じ器）: 案件ごとの束の見出し（2026-09-15） */
.bcp-qsec{margin:18px 0 8px; font-size:13px; font-weight:700; letter-spacing:.04em; color:var(--bcs-text-secondary)}
.bcp-qsec:first-child{margin-top:4px}

/* 案件切替: 一覧を取れなかったときの一言（2026-09-15） */
.bcp-swm-err{color:#B3261E; font-size:14px; line-height:1.6; cursor:default}

/* ── Company Kit: 紙の見た目のビューア・デザインの選択（2026-09-15 オーナー「表示の仕方もセンスない」） ── */
.bcp-kit-dochead{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:0 0 12px}
.bcp-kit-dochead-l{min-width:0} .bcp-kit-dochead-l .bcp-h3{margin:0 0 4px}
.bcp-kit-dochead-r{display:flex; gap:8px; flex:none}
.bcp-btn--sm.bcp-kit-sbtn{min-height:36px; font-size:13px; padding:7px 12px; display:inline-flex; align-items:center}
.bcp-kit-badge-warn{display:inline-block; margin-left:8px; padding:1px 8px; border-radius:999px; background:#FDECEA; color:#B3261E; font-size:12px; font-weight:600}
.bcp-kit-badge-old{display:inline-block; margin-left:8px; padding:1px 8px; border-radius:999px; background:#EEF0F3; color:#5A6472; font-size:12px; font-weight:600}
.bcp-kit-paperw{margin:6px 0 4px}
.bcp-kit-stage{display:grid; grid-template-columns:44px 1fr 44px; align-items:center; gap:6px; background:#F3F4F6; border-radius:12px; padding:18px 4px}
.bcp-kit-arr{width:44px; height:44px; border:0; background:transparent; font-size:28px; line-height:1; color:var(--bcs-text-secondary); cursor:pointer; border-radius:22px}
.bcp-kit-arr:hover{background:#fff} .bcp-kit-arr:disabled{opacity:.25; cursor:default}
.bcp-kit-paper{width:min(100%, 520px); margin:0 auto; aspect-ratio:210/297; background:#fff; box-shadow:0 10px 30px rgba(20,33,61,.18), 0 1px 3px rgba(20,33,61,.12); cursor:zoom-in; overflow:hidden}
.bcp-kit-pimg{display:block; width:100%; height:100%; object-fit:contain; background:#fff}
.bcp-kit-pcount{margin:8px 0 0; text-align:center; font-size:13px; color:var(--bcs-text-secondary); font-variant-numeric:tabular-nums}
.bcp-kit-thumbs{display:flex; gap:8px; margin:10px 0 0; overflow-x:auto; padding:4px 2px}
.bcp-kit-thumb-b{flex:none; width:54px; aspect-ratio:210/297; padding:0; border:2px solid transparent; border-radius:4px; background:#fff; box-shadow:0 1px 3px rgba(20,33,61,.18); cursor:pointer; overflow:hidden}
.bcp-kit-thumb-b.is-on{border-color:var(--bcs-accent)}
.bcp-kit-thumb-i{display:block; width:100%; height:100%; object-fit:cover}
.bcp-kit-lb{position:fixed; inset:0; z-index:1000; background:rgba(20,33,61,.82); display:grid; place-items:center; padding:16px}
.bcp-kit-lbimg{max-width:min(96vw, 900px); max-height:88vh; background:#fff; box-shadow:0 20px 60px rgba(0,0,0,.4)}
.bcp-kit-lbclose{position:fixed; top:14px; right:16px; min-height:44px; padding:0 16px; border:0; border-radius:22px; background:#fff; color:var(--ink); font-size:15px; cursor:pointer}
.bcp-kit-btn--big{width:100%; max-width:520px; margin:8px auto 0; display:block; font-size:17px; min-height:52px}
.bcp-kit-doc .bcp-kit-actions{flex-direction:column; align-items:center}
.bcp-kit-vers .bcp-kit-ver.is-arch{color:var(--bcs-text-secondary)}
.bcp-kit-designs{display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; margin:12px 0 0; width:100%}
@media (min-width:720px){ .bcp-kit-designs{grid-template-columns:repeat(3, 1fr)} }
.bcp-kit-design{display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:10px; border:1px solid var(--bcs-line,#E3E6EB); border-radius:12px; background:#fff; cursor:pointer; text-align:left; min-height:44px}
.bcp-kit-design:hover,.bcp-kit-design.is-on{border-color:var(--bcs-accent); box-shadow:0 0 0 2px var(--bcs-accent-soft)}
.bcp-kit-design-sw{width:100%; aspect-ratio:210/297; border-radius:6px; border:1px solid; position:relative; overflow:hidden}
.bcp-kit-design-band{position:absolute; left:0; right:0; bottom:0; height:22%}
.bcp-kit-design-n{font-size:14px; font-weight:700; color:var(--ink)}
.bcp-kit-design-h{font-size:12px; color:var(--bcs-text-secondary)}
.bcp-kit-design-im{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top}
.bcp-kit-design-tag{position:absolute; right:6px; top:6px; padding:1px 7px; border-radius:999px; background:rgba(255,255,255,.92); color:#5A6472; font-size:11px; font-weight:600}
.bcp-kit-design-empty{position:absolute; left:8px; right:8px; bottom:30%; font-size:11px; line-height:1.5; color:rgba(255,255,255,.92); text-shadow:0 1px 2px rgba(0,0,0,.35)}
.bcp-kit-designs-more{margin-top:10px}
.bcp-kit-designs-more>summary{cursor:pointer; font-size:13px; color:var(--bcp-muted,#63686C); padding:6px 0}
.bcp-kit-designs-more>.bcp-kit-designs{margin-top:8px}
.bcp-qsec-note{margin:0 0 12px; font-size:14px; line-height:1.7; color:var(--bcs-text-secondary)}

/* 2026-09-17 最近の変化（自動・日付つきの 1 行） */
.bcp-chg-list{list-style:none; margin:0 0 4px; padding:0}
.bcp-chg-it{display:grid; grid-template-columns:3.2em 1fr; gap:0 10px; margin:0 0 8px; font-size:14px; line-height:1.9; color:var(--bcs-text)}
.bcp-chg-on{font-variant-numeric:tabular-nums; color:var(--bcs-text-tertiary); font-size:13px; padding-top:1px}
.bcp-chg-snap{margin-top:14px; padding-top:12px; border-top:1px dashed var(--bcs-border)}
.bcp-chg-b strong,.bcp-insight-b strong,.bcp-note-reply-b strong,.bcp-rp-nl strong{font-weight:700; color:inherit} /* 2026-09-17 人の文の太字は全部同じ */
/* 2026-09-17 自動で埋めた節の印（記録から） */
.bcp-auto-k{font-size:12px; color:var(--bcs-text-tertiary); margin-right:.6em}
.bcp-ini-lr{margin:6px 0 0; font-size:13.5px; color:var(--bcs-text)}
.bcp-ini-old{margin:4px 0 0; font-size:12.5px; color:var(--bcs-text-tertiary)}
/* 2026-09-17 ① 成果の目安（§20.2） */
/* 🔴🔴 2026-09-18 実測で直した。もとは 12.5px・薄い灰色で、金額（14.5px 太字）の方が先に目に入り、
   8 月の数字が 9 月の数字に見えていた（オーナー指摘）。**月を金額以上の大きさ・本文の色**にする。
   🔴 この 2 つの大きさの関係は qa/effect-period-prominence.js が実機で測る（小さくすると鳴る）。 */
.bcp-eff-period{margin:0 0 2px; font-size:20px; font-weight:700; line-height:1.5; color:var(--bcs-text); letter-spacing:.01em}
.bcp-eff-state{margin-left:8px; font-size:12px; font-weight:600; color:var(--bcs-text-secondary); white-space:nowrap}
.bcp-eff-amount{font-size:19px; line-height:1.5}
/* まだ出せない月（0 円と描かず、いつ出るかを言う） */
.bcp-eff-pending{margin:8px 0 0; font-size:13.5px; line-height:1.8; color:var(--bcs-text-secondary)}
.bcp-eff-fact{margin:0 0 10px; font-size:15px; color:var(--bcs-text); font-variant-numeric:tabular-nums}
.bcp-eff-note{margin:8px 0 0; font-size:12.5px; line-height:1.8; color:var(--bcs-text-tertiary); font-weight:400}
/* 2026-09-17 ① §16 計算の前提（内訳の下層） */
.bcp-eff-assume{margin-top:10px}
.bcp-eff-assume>summary,.bcp-eff-hist>summary{cursor:pointer; font-size:13px; color:var(--bcs-text-secondary); padding:4px 0}
.bcp-eff-arow{margin:12px 0 0; padding-top:10px; border-top:1px solid var(--bcs-border)}
.bcp-eff-alab{margin:0; font-size:14px; color:var(--bcs-text); font-weight:600}
.bcp-eff-aform{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; align-items:center}
.bcp-eff-ainput{width:9em; min-height:44px; padding:6px 10px; border:1px solid var(--bcs-border-strong); border-radius:8px; font-size:16px}
.bcp-eff-abtn{min-height:44px}

/* ==== 2026-09-17 UI/UX v1 受入（abroad 席の実測 12 件のうち BCS で決められるもの） ==== */
/* §37 badge 20×20・11px/700 */
.bcp-badge{min-width:20px; height:20px; line-height:18px; padding:0 6px; font-size:11px; font-weight:700; box-sizing:border-box}
/* §30 App Bar 56px・padding 0 20・半透明＋blur */
.bcp-topbar{height:56px; padding:0 20px; background:rgba(246,247,247,.94); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px)}
/* §31 案件名 15px/600・1 行 */
.bcp-tb-name{font-size:15px; font-weight:600}
/* §16/§17 section 見出し 18px/600（desktop 20） */
.bcp-sech{font-size:18px; font-weight:600}
@media (min-width:1024px){ .bcp-sech{font-size:20px} }
/* §26/§140 タップ標的 44px（見た目の字は変えない） */
.bcp-acc-link{display:inline-flex; align-items:center; min-height:44px; padding:0 4px; margin:-8px 0}
/* §45 desktop sidebar の項目 42px */
@media (min-width:1024px){ .bcp-nav a{min-height:44px; box-sizing:border-box} }   /* 追補E ①: §45 42 vs §140 44 → 44（触る側が勝つ） */
/* §21/§46 desktop 本文 max 920・main padding 48 */
@media (min-width:1024px){ .bcp-in{max-width:920px} .bcp-main{padding:48px 48px 88px} }
/* A7: 切替メニューを開いた直後は最初の項目へ焦点（キーボードで開いたときだけ・JS 側） */
/* §37 下部ナビの badge も 20×20・11px/700（上の .bcp-bottom の 15/12 を上書き）／§16 本文 line-height 1.7（読み物の行） */
.bcp-bottom .bcp-badge{min-width:20px; height:20px; line-height:17px; padding:0 5px; font-size:11px; font-weight:700; transform:translateX(-9px)}
.bcp{line-height:1.7}
/* 2026-09-17 日本語の改行（オーナー・全席）: 禁則を厳格に・見出しは文節で・段落の最終行の孤立を避ける・分けない塊は .nb */
.bcp{line-break:strict; overflow-wrap:normal}
.bcp h1,.bcp h2,.bcp h3,.bcp .bcp-sech,.bcp .bcp-hero-t,.bcp .bcp-hg-b,.bcp .bcp-ini-t,.bcp .bcp-rp-nt,.bcp .bcp-kit-todo-t{word-break:auto-phrase; text-wrap:balance}
.bcp p,.bcp li,.bcp dd,.bcp dt,.bcp td,.bcp th,.bcp label{text-wrap:pretty; word-break:normal; overflow-wrap:normal}
.bcp .nb,.bcp .bcp-chg-on,.bcp .bcp-eff-period,.bcp .bcp-hg-b b,.bcp time{white-space:nowrap}

/* 資料の確定を任せる口は畳んで置く（お客様が自分で確定するのが既定・2026-09-18 オーナー） */
.bcp-kit-deleg{margin-top:18px}
.bcp-kit-deleg>summary{cursor:pointer;font-size:13px;color:#63686C;padding:8px 2px;list-style:none}
.bcp-kit-deleg>summary::-webkit-details-marker{display:none}
.bcp-kit-deleg>summary::before{content:"＋ ";color:#8A9099}
.bcp-kit-deleg[open]>summary::before{content:"− "}

/* β版の帯（会社情報・資料。版番号の代わりに「開発中」と分かるように・2026-09-18 オーナー） */
.bcp-kit-beta{display:flex;align-items:flex-start;gap:10px;margin:0 0 14px;padding:10px 12px;background:#F4F7FA;border:1px solid #E3EAF0;border-radius:8px}
.bcp-kit-beta-tag{flex:0 0 auto;font-size:11px;font-weight:700;letter-spacing:.04em;color:#fff;background:#1E5A8C;border-radius:999px;padding:3px 9px;line-height:1.5}
.bcp-kit-beta-t{font-size:12.5px;line-height:1.75;color:#4C5155}
@media (max-width:430px){.bcp-kit-beta{padding:9px 10px}.bcp-kit-beta-t{font-size:12px}}

/* ---------- 写真を選び直す（2026-09-18・オーナー指示「自分で画像を候補の中から選べる」） ----------
   🔴 押す所は 44px 以上（指で押す）。320px で横スクロールしない。
   🔴 お客様ご自身の写真は押せない形にする（薄くして、押せないことを見て分かるように）。 */
.bcp-kit-photos{margin:14px 0 0}
.bcp-kit-ph-d>summary{cursor:pointer; font-size:13.5px; color:var(--bcs-text-secondary); padding:8px 0; min-height:44px; display:flex; align-items:center}
.bcp-kit-ph-b{padding:4px 0 0}
.bcp-kit-ph-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:10px; margin:10px 0 0}
.bcp-kit-ph{display:block; width:100%; padding:0; border:1px solid var(--bcs-border); border-radius:8px; background:#fff; cursor:pointer; overflow:hidden; text-align:left}
.bcp-kit-ph:hover{border-color:var(--blue)}
.bcp-kit-ph:disabled,.bcp-kit-ph.is-own{cursor:default; opacity:.55}
.bcp-kit-ph-i{display:block; width:100%; height:72px; object-fit:cover}
.bcp-kit-ph-l{display:block; padding:6px 8px; font-size:12px; line-height:1.5; color:var(--bcs-text-secondary)}
.bcp-kit-ph-panel{margin:12px 0 0}
.bcp-kit-phc h4{margin:0 0 10px; font-size:15px; font-weight:700; color:var(--bcs-text)}
.bcp-kit-ph-f{display:flex; gap:8px; flex-wrap:wrap}
.bcp-kit-ph-q{flex:1 1 180px; min-width:0; min-height:44px; font-size:16px}
.bcp-kit-ph-go{min-height:44px; white-space:nowrap}
.bcp-kit-ph-res{display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:10px; margin:10px 0 0}
.bcp-kit-ph-cand{display:block; width:100%; padding:0; border:1px solid var(--bcs-border); border-radius:8px; background:#fff; cursor:pointer; overflow:hidden; text-align:left}
.bcp-kit-ph-cand:hover{border-color:var(--blue)}
.bcp-kit-ph-cand:disabled{cursor:default; opacity:.5}
.bcp-kit-ph-ci{display:block; width:100%; height:78px; object-fit:cover}
/* 撮影者の名前（規約・奥付にも入る）。長い名前でも器を壊さない */
.bcp-kit-ph-cr{display:block; padding:5px 8px; font-size:11.5px; line-height:1.5; color:var(--bcs-text-tertiary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* まとめが月の途中までのものだと分かる 1 行（2026-09-18） */
.bcp-snap-part{margin:8px 0 0; font-size:12.5px; line-height:1.8; color:var(--bcs-text-secondary)}

/* 改善の候補（v4 §18c・2026-09-18 に画面を足した） */
.bcp-imp{margin-top:12px}
.bcp-imp-st{margin:0 0 6px; font-size:12.5px; font-weight:600; color:var(--bcs-text-secondary)}

/* BLOOM が覚えていること（Content Engine の記憶・2026-09-18 に画面を足した） */
.bcp-cmem{margin-top:12px}
.bcp-cmem-l{margin:6px 0 0; padding-left:1.1em}
.bcp-cmem-i{margin:6px 0; font-size:14px; line-height:1.9}
.bcp-cmem-on{margin-left:8px; font-size:12px; color:var(--bcs-text-tertiary); white-space:nowrap}