/* public/css/app.css v0.97.2 (2026-09-25) 変更: KPI・品質分析の枠を管理者ページでも使う */
/* public/css/app.css v0.97.1 (2026-09-25) 追加: 運営管理のタブ・KPI/品質分析の枠（.pf-tabs・.pf-mock） */
/* public/css/app.css v0.97.0 (2026-09-25) 追加: ヘルプの記事一覧のチェックとまとめて削除（.hl-ck・.hl-bulk） */
/* public/css/app.css v0.96.1 (2026-09-25) 追加: 運営管理の自動削除予定日（.pf-due） */
/* public/css/app.css v0.96.0 (2026-09-25) 追加: 運営管理の会社削除（.pf-del*）と削除の記録 */
/* public/css/app.css v0.95.0 (2026-09-25) 追加: 運営管理（.pf-*） */
/* public/css/app.css v0.94.6 (2026-09-25) 変更: 左メニューの今いる項目の左端の線（{ のように見えていた）を消した */
/* public/css/app.css v0.94.5 (2026-09-25) 変更: 左メニューのアイコンの色を1色（テンプレートの緑）に統一。絵は項目ごとのまま */
/* public/css/app.css v0.94.4 (2026-09-25) 修正: まとめて入れるの結果表で、分類が見出しの列に重なっていた */
/* public/css/app.css v0.94.3 (2026-09-25) 変更: ナレッジ書き出しの3つのボタンをオレンジ系に */
/* public/css/app.css v0.94.2 (2026-09-25) 追加: ナレッジ書き出しの画面（.hx-*） */
/* public/css/app.css v0.94.1 (2026-09-25) 変更: 管理者ページの会社名を左へ（本文の左端にそろえる）。ヘルプページのボタンを緑系に（保存するは今の色のまま・削除は赤） */
/* public/css/app.css v0.94.0 (2026-09-24) 変更: 管理者ページの見た目を対応者ページ（/ops）にも（左メニューのアイコン・行・絞り込み・ボタン） */
/* public/css/app.css v0.93.0 (2026-09-24) 変更: 管理者ページの見た目（左メニューの色つきアイコン・ダッシュボードのグラデーションカード・行と絞り込みとボタンの反応） */
/* public/css/app.css v0.92.0 (2026-09-24) 変更: ヘルプページのボタンをグラデーション＋白丸アイコンに（色は役割ごと。乗せるとグラデーションが流れる） */
/* public/css/app.css v0.91.1 (2026-09-24) 変更: ヘルプページのボタン（主ボタンは墨色＋乗せると光が横切る。ほかは白地＋墨色の縁） */
/* public/css/app.css v0.91.0 (2026-09-24) 変更: ヘルプページを管理者ページのメイン欄の1枚のページに（.hp-*・画像の枠・貼り付ける画像・削除の枠） */
/* public/css/app.css v0.90.0 (2026-09-24) 追加: ヘルプの記事一覧と記事を書く画面（.hl-form・.hl-bar・.hl-body・.hl-prev・.hl-pick） */
/* public/css/app.css v0.89.0 (2026-09-24) 追加: ヘルプページの管理（.hl-*）
/* public/css/app.css v0.88.0 (2026-09-24) 追加: 管理者ページ（.mode-admin 左メニュー常時表示・ダッシュボード .dash-*）
/* public/css/app.css v0.86.0 (2026-09-24) 追加: AI対応の「プレビュー」表示（.chip-preview / .ai-sw）
/* public/css/app.css v0.85.0 (2026-09-22) 追加: 取り込み結果の「入れ替え」「変更なし」の見せ方
/* public/css/app.css v0.84.0 (2026-09-22) 追加: 更新ボタン（.rf）。常時ゆっくり動き、押すと回転
/* public/css/app.css v0.83.0 (2026-09-22) 修正: 設定メニューの項目をスクロール可に（低い画面で下の項目へ届かない）
/* public/css/app.css v0.82.0 (2026-09-22) 追加: ヘッダーの会社名 */
/* public/css/app.css v0.81.0 (2026-09-22) 追加: 設定メニュー左下の契約状況（.nav-ft） */
/* public/css/app.css v0.80.0 (2026-09-22) 変更: 月次上限を1行の帯に縮小（枠と影を削除・高さ約1/3） */
/* public/css/app.css v0.79.0 (2026-09-21) 追加: 解決済みの件の返信ロック（.resolved-lock） */
/* public/css/app.css v0.78.0 (2026-09-21) 追加: スレッド見出しの状態・担当の並び（.th-tags） */
/* public/css/app.css v0.77.0 (2026-09-21) 追加: 担当者の転送先を選ぶ一覧（.assign-list / .assign-item） */
/* public/css/app.css v0.76.1 (2026-09-21) 追加: 一覧の担当チップ（.tag-own） */
/* public/css/app.css v0.76.0 (2026-09-21) 追加: 未割当バッジ（.tag-free） */
/* public/css/app.css v0.75.1 (2026-09-21) 追加: 担当者一覧のピル（役割・状態）と招待カードの色分け */
/* public/css/app.css v0.75.0 (2026-09-21) 追加: 担当者の招待コード（発行カード・コード表示・参加の案内） */
/* public/css/app.css v0.74.0 (2026-09-21) 追加: サインインボタンのロゴ配置（.idp-mark） */
/* public/css/app.css v0.73.0 (2026-09-21) 変更: サインイン・登録画面の見出しにロゴ画像を使う */
/* public/css/app.css v0.72.0 (2026-09-20) 追加: 担当の絞り込み（自分の担当／未割当／すべて） */
/* public/css/app.css v0.71.0 (2026-09-20) 追加: 未読タブとヘッダーの未読バッジ（押せる） */
/* public/css/app.css v0.70.0 (2026-09-20) 追加: チーム画面の表と評価の分布 */
/* public/css/app.css v0.69.0 (2026-09-20) 追加: 担当者の返信を希望（お客様側の案内・管理画面のバッジ） */
/* public/css/app.css v0.68.4 (2026-09-18) 修正: 上部バーの並び（戻る→社名→利用者）。社名が長くても折り返さない */
/* public/css/app.css v0.68.3 (2026-09-18) 修正: 一覧の見出し帯がブランドカラーに追従していなかった（固定の青→紫のグラデーション）。上部バーの戻るボタンを追加 */
/* public/css/app.css v0.68.2 (2026-09-18) 修正: オン・オフのスイッチ(.sw)が窓口デザインの色見本(.sw)を上書きして並びが壊れていた。スイッチを .toggle に改名 */
/* public/css/app.css v0.68.1 (2026-09-17) 追加: 「プランを選ぶ」を黄色のゆっくり点滅に（.btn-attn） */
/* public/css/app.css v0.68.0 (2026-09-17) 追加: お申し込み（プラン選択）の見た目。丸型オレンジのボタン */
/* public/css/app.css v0.67.0 (2026-09-16) 追加: おしえるの書き方の例（等幅の吹き出し） */
/* public/css/app.css v0.66.0 (2026-09-16) 追加: AI教育「おしえる」のフォーム */
/* public/css/app.css v0.65.0 (2026-09-16) 変更: お客様画面の返信欄を下に固定（sticky）。やり取りだけがスクロールする */
/* public/css/app.css v0.64.0 (2026-09-16) 追加: お客様画面の返信欄をカードに。送信ボタンを見つけやすく */
/* public/css/app.css v0.63.0 (2026-09-16) 修正: 確認表の列幅（見出しが縦に潰れていた）／内容の改行を表示 */
/* public/css/app.css v0.62.0 (2026-09-16) 追加: まとめて入れるの手順表示・等幅の入力欄 */
/* public/css/app.css v0.61.0 (2026-09-16) 追加: まとめて入れるの確認表 */
/* public/css/app.css v0.60.0 (2026-09-16) 追加: AI対応パネル（オン/オフのスイッチ・時間帯） */
/* public/css/app.css v0.59.0 (2026-09-15) 追加: AI教育の注意書き（個人情報・似た項目）・収集箱の件数バッジ */
/* public/css/app.css v0.58.0 (2026-09-15) 追加: AI教育「おしえる」のチャットUI */
/* public/css/app.css v0.57.1 (2026-09-15) 修正: MIRAスキンが左メニューのpositionを壊し、巨大な余白が出ていた */
/* public/css/app.css v0.57.0 (2026-09-15) 追加: MIRAスキン（管理画面のみ・body.mira） */
/* public/css/app.css v0.56.0 (2026-09-15) 追加: 管理画面の設定メニュー（ハンバーガー・ドロワー） */
/* public/css/app.css v0.55.0 (2026-09-15) 変更: ご検討中のお客様へ の文字サイズ（見出し24pt・本文14pt） */
/* public/css/app.css v0.54.0 (2026-09-15) 追加: 一覧の見出し帯（背景案C）とカードの影 */
/* public/css/app.css v0.53.0 (2026-09-15) 変更: 戻るをボタンの見た目に */
/* public/css/app.css v0.52.0 (2026-09-15) 追加: 製品ページへ戻るリンク */
/* public/css/app.css v0.51.0 (2026-09-14) 追加: カードから開く演出の補助・カードのホバー反応 */
/* public/css/app.css v0.50.0 (2026-09-14) 修正: スマホでの一覧見出し行とフッターの折り返し */
/* public/css/app.css v0.49.0 (2026-09-14) 追加: 送信中の回転・アイコンのホバー動作・モーダルの表示アニメ */
/* public/css/app.css v0.48.0 (2026-09-14) 追加: ご検討中のお客様へ（オレンジ点滅・ポップアップ本文） */
/* public/css/app.css v0.47.0 (2026-09-14) 追加: 「解決済みにする」のゆっくりした点滅 */
/* public/css/app.css v0.46.0 (2026-09-14) 追加: 更新ボタンの回転アニメーション */
/* public/css/app.css v0.45.0 (2026-09-14) 修正: 固定見出しの上に本文が覗く（.modal.hd） */
/* public/css/app.css v0.44.0 (2026-09-14) 追加: .icon-btn（アイコンのみの小ボタン） */
/* public/css/app.css v0.43.0 (2026-09-14) 修正: 固定見出しの下に入力項目が隠れる（scroll-padding-top） */
/* public/css/app.css v0.42.0 (2026-09-14) 修正: モーダル上部の隙間に本文が覗く（.th-topで塞ぐ） */
/* public/css/app.css v0.41.0 (2026-09-14) 追加: ボタンの動き（浮き上がり・沈み込み・波紋） */
/* public/css/app.css v0.40.0 (2026-09-14) 変更: 文字サイズの最小を15pxに。説明文（.lead）は16px */
/* public/app.css v0.19.0 (2026-09-14) 変更: .btn-google を .btn-idp に汎用化（Google/Microsoft共用） */
/* public/app.css v0.17.0 (2026-09-14) 戻し: .btn-idp を復帰（GIS描画をやめたため） */
/* public/app.css v0.16.0 (2026-09-14) 変更: 背景写真の参照先を /img/ に */
/* public/app.css v0.15.0 (2026-09-14) 変更: Google公式ライブラリ描画に移行し .btn-idp を .gwrap に置換 */
/* public/app.css v0.14.0 (2026-09-14) 追加: Googleサインインボタン（.btn-idp） */
/* public/app.css v0.13.0 (2026-09-14) 追加: 受付終了画面のイラスト（.closed-art） */
/* public/app.css v0.12.0 (2026-09-14) 追加: サポート側サインイン画面の背景写真（.auth-bg） */
/* public/app.css v0.7.0 (2026-09-13) 追加: 月次上限のゲージ（.quota） */
/* public/app.css v0.6.0 (2026-09-13) 追加: 規約・ポリシー等の文書ページ（.policy） */
/* public/app.css v0.5.0 (2026-09-10) 追加: 窓口の背景パターン（CSSのみ・画像なし） */
/* public/app.css v0.4.1 (2026-09-10) 修正: スマホでスレッド見出しが潰れる（件名が1文字ずつ折り返す）のを解消 */
/* public/app.css v0.4.0 (2026-09-10) 変更: ブランド色をCSS変数で差し替え可能に（--on-brand / --brand-ring を追加） */
/* public/app.css v0.3.1 (2026-09-10) 追加: 重なるモーダルの階層（.mid） */
/* public/app.css v0.3.0 (2026-09-10) 追加: 添付ファイル（選択チップ・投稿内の画像/PDF・ドロップ表示） */
/* public/app.css v0.2.1 (2026-09-10) 更新: 確認ダイアログ（中央ポップアップ）用スタイル */
/* public/app.css v0.2.0 (2026-09-10) 更新: 未読バッジ・満足度アンケートの5段階ボタン・評価表示 */
/* public/app.css v0.1.0 (2026-09-09) 新規: 共通スタイル（白×青・レスポンシブ） */
*{box-sizing:border-box}
[hidden]{display:none!important}
:root{
  --bg:#F5F7FB;--panel:#FFFFFF;--line:#E3E8F0;--text:#1F2937;--muted:#6B7280;
  /* ブランド色。窓口画面は企業ごとの設定でJSから差し替える（既定はブルー） */
  --blue:#2563EB;--blue-dark:#1D4ED8;--blue-soft:#EFF4FF;--on-brand:#FFFFFF;--brand-ring:rgba(37,99,235,.18);--brand-tint:rgba(37,99,235,.13);
  --st-open:#B45309;--st-open-bg:#FEF3C7;--st-prog:#1D4ED8;--st-prog-bg:#DBEAFE;--st-done:#166534;--st-done-bg:#DCFCE7;
  --radius:14px;--shadow:0 1px 2px rgba(16,24,40,.05),0 6px 20px rgba(16,24,40,.06);
}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:"Hiragino Sans","Noto Sans JP","Yu Gothic UI",system-ui,sans-serif;font-size:15px;line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:var(--blue)}
.topbar{background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.topbar-in{max-width:960px;margin:0 auto;padding:12px 18px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
/* 左から「戻る」→社名、右端に利用者。社名が長くても右側を押し出さない */
.brand{font-weight:700;font-size:16px;display:flex;align-items:center;gap:9px;color:var(--text);text-decoration:none;
  flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ヘッダーの会社名。長くても右側を押し出さない（v0.82.0） */
.brand #co-name{font-weight:500}
.brand .dot{width:12px;height:12px;flex:none;border-radius:50%;background:var(--blue);box-shadow:inset 0 0 0 3px rgba(255,255,255,.35)}
.brand .logo{height:26px;width:auto;max-width:150px;flex:none;display:block;object-fit:contain}
.who{font-size:15px;color:var(--muted);display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-left:auto;flex:none}
.wrap{max-width:960px;margin:0 auto;padding:22px 18px 60px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px}
.panel+.panel{margin-top:16px}
h1{font-size:20px;margin:0 0 6px}
h2{font-size:17px;margin:0 0 12px}
h3{font-size:15px;margin:0}
.lead{color:var(--muted);font-size:16px;margin:0 0 16px}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.spacer{flex:1}
.btn{font-family:inherit;font-size:15px;font-weight:600;border:1px solid var(--line);cursor:pointer;border-radius:10px;padding:10px 16px;background:#fff;color:var(--text);display:inline-flex;align-items:center;justify-content:center;gap:6px;text-decoration:none;transition:background .15s,box-shadow .15s}
.btn:hover{background:#F8FAFF}
/* ボタンの動き。押した感触を出す。動きを減らす設定の端末では止める */
.btn{transform:translateY(0)}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px -8px rgba(16,24,40,.45)}
.btn:active{transform:translateY(1px);box-shadow:none;transition-duration:.06s}
.btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.btn.primary:hover{box-shadow:0 8px 20px -8px var(--brand-ring)}
/* 押した位置から広がる波紋 */
.btn{position:relative;overflow:hidden}
.btn::after{
  content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;border-radius:50%;
  background:currentColor;opacity:0;transform:translate(-50%,-50%) scale(1);pointer-events:none;
}
.btn:active::after{animation:btn-ripple .45s ease-out}
@keyframes btn-ripple{
  from{opacity:.22;transform:translate(-50%,-50%) scale(1)}
  to{opacity:0;transform:translate(-50%,-50%) scale(26)}
}
/* 送信中は押せないので、動きも止める */
.btn[disabled]{transform:none!important;box-shadow:none!important}
@media (prefers-reduced-motion: reduce){
  .btn,.btn:hover,.btn:active{transform:none;transition:none}
  .btn:active::after{animation:none}
}
.btn.primary{background:var(--blue);border-color:var(--blue);color:var(--on-brand)}
.btn.primary:hover{background:var(--blue-dark)}
.btn.ghost{border-color:transparent;background:transparent;color:var(--muted)}
.btn.ghost:hover{color:var(--blue);background:var(--blue-soft)}
.btn.sm{padding:7px 12px;font-size:15px}
.btn[disabled]{opacity:.5;cursor:default;pointer-events:none}
label{display:block;font-size:15px;font-weight:600;color:#374151;margin:0 0 6px}
input,textarea,select{width:100%;font-family:inherit;font-size:15px;color:var(--text);background:#fff;border:1px solid #CBD5E1;border-radius:10px;padding:11px 13px;margin-bottom:14px;transition:border-color .15s,box-shadow .15s}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--brand-ring)}
textarea{resize:vertical;min-height:120px;line-height:1.7}
input.code{font-size:26px;letter-spacing:.35em;text-align:center;font-variant-numeric:tabular-nums}
.hint{font-size:15px;color:var(--muted);margin:-8px 0 12px}
.err{color:#B42318;font-size:15px;margin:0 0 10px;min-height:1.2em}
.tk{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;margin-bottom:10px;box-shadow:0 6px 18px -14px rgba(16,24,40,.55);transition:border-color .15s,box-shadow .15s}
.tk:hover{border-color:var(--blue);box-shadow:var(--shadow)}
.tk-main{flex:1;min-width:0}
.tk-subject{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tk-meta{font-size:15px;color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.status{flex-shrink:0;font-size:15px;font-weight:600;border-radius:8px;padding:4px 10px;white-space:nowrap}
.status.open{color:var(--st-open);background:var(--st-open-bg)}
.status.in_progress{color:var(--st-prog);background:var(--st-prog-bg)}
.status.resolved{color:var(--st-done);background:var(--st-done-bg)}
.empty{text-align:center;padding:36px 12px;color:var(--muted);font-size:15px}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.fbtn{font-family:inherit;font-size:15px;font-weight:600;border:1px solid var(--line);background:#fff;color:var(--muted);border-radius:999px;padding:7px 14px;cursor:pointer}
.fbtn.on{background:var(--blue);border-color:var(--blue);color:var(--on-brand)}
.modal-bg{position:fixed;inset:0;background:rgba(17,24,39,.45);z-index:50;display:none;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(2px)}
.modal-bg.show{display:flex;animation:bg-in .18s ease}
@keyframes bg-in{from{opacity:0}to{opacity:1}}
@keyframes modal-in{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
.modal-bg.show>.modal{animation:modal-in .24s cubic-bezier(.2,.8,.2,1)}
/* カードから拡大する演出の最中は、通常の表示アニメを止める（二重に動かさない） */
.modal-bg.flipping>.modal{animation:none}

/* 体験窓口の「製品ページに戻る」。見出しの上に控えめに置く */
.back-link{display:inline-flex;margin:0 0 14px;text-decoration:none;color:var(--text);border-color:var(--line);background:#fff}
.back-link:hover{background:#F8FAFF;color:var(--blue);border-color:var(--blue)}
.back-link:hover .ico{transform:translateX(-3px) rotate(0)}
.modal-bg.flipping{animation:none}
/* カードは押せることが分かるようにしておく */
.tk{cursor:pointer;transition:transform .12s ease,box-shadow .18s ease,border-color .18s ease}
.tk:hover{transform:translateY(-1px);box-shadow:0 8px 20px -14px rgba(16,24,40,.55)}
.tk:active{transform:translateY(0) scale(.995);transition-duration:.06s}
@media (prefers-reduced-motion:reduce){ .tk,.tk:hover,.tk:active{transform:none;transition:none} }
@media (prefers-reduced-motion:reduce){ .modal-bg.show,.modal-bg.show>.modal{animation:none} }
.modal{background:#fff;border-radius:18px;padding:22px;width:100%;max-width:640px;max-height:92vh;overflow-y:auto;box-shadow:0 20px 60px rgba(16,24,40,.25);
 /* 入力欄へフォーカスが移ったとき、固定見出しの下に項目名が隠れないようにする */
 scroll-padding-top:76px}
/* position:sticky はスクロール領域の padding の下で止まるため、コンテナに上paddingがあると
   その隙間にスクロール中の本文が覗いてしまう。固定見出しを持つモーダルは上paddingを0にし、
   見出し自身が同じ量の padding-top を持つことで隙間をなくす（.modal.hd） */
.th-top{position:sticky;top:0;background:#fff;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:22px;padding-bottom:12px;margin-bottom:10px;border-bottom:1px solid var(--line);z-index:2}
.modal.hd{padding-top:0}
.th-top h3{font-size:16px;overflow:hidden;text-overflow:ellipsis}
/* ---- 設定メニュー（ハンバーガーで左から出す）----
   中身は既存のパネルを開くだけ。画面遷移はしない */
.hamb{display:inline-flex;flex-direction:column;justify-content:center;gap:4px;width:34px;height:34px;
 padding:0 7px;margin-right:2px;background:none;border:1px solid transparent;border-radius:9px;cursor:pointer}
.hamb:hover{background:var(--bg);border-color:var(--line)}
.hamb:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.hamb span{display:block;height:2px;border-radius:2px;background:var(--text)}

.nav-ov{position:fixed;inset:0;background:rgba(17,24,39,.42);z-index:40;opacity:0;pointer-events:none;transition:opacity .2s}
.nav-ov.show{opacity:1;pointer-events:auto}
.nav-dw{position:fixed;left:0;top:0;bottom:0;width:264px;max-width:84vw;z-index:41;background:var(--panel);
 border-right:1px solid var(--line);box-shadow:0 0 40px -10px rgba(16,24,40,.35);
 display:flex;flex-direction:column;
 transform:translateX(-100%);transition:transform .22s cubic-bezier(.2,.8,.2,1)}
.nav-dw.show{transform:none}
/* 画面の高さが足りないとき、見出しと契約状況は残したまま項目だけを縦にスクロールさせる。
   min-height:0 が無いと flex の子が縮まず、下の項目に届かなくなる（v0.83.0） */
.nav-list{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
 display:flex;flex-direction:column;gap:2px;padding:0 12px 12px}
/* 設定メニューの左下。契約状況（プランとお支払い）をここへ置く（v0.81.0） */
.nav-ft{flex:none;padding:14px 16px;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.nav-hd{flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;
 font-size:13px;font-weight:800;letter-spacing:.1em;color:var(--muted);padding:14px 20px 12px}
.nav-i{font:inherit;font-size:15px;font-weight:700;text-align:left;color:var(--text);
 background:none;border:none;border-radius:10px;padding:12px 14px;cursor:pointer;transition:background .15s,color .15s}
.nav-i:hover{background:var(--blue-soft);color:var(--blue-dark)}
.nav-i:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
@media (prefers-reduced-motion:reduce){ .nav-dw,.nav-ov{transition:none} }

/* 更新ボタン。待っている間も画面が生きていることが分かるよう、矢印をゆっくり振らせる。
   押している間は速く回す。動きが苦手な方の設定（prefers-reduced-motion）では止める（v0.84.0） */
.rf{display:inline-flex;align-items:center;gap:6px}
.rf .rf-i{display:inline-block;font-size:15px;line-height:1;transform-origin:50% 50%;
 animation:rf-breathe 2.8s ease-in-out infinite}
.rf.is-busy .rf-i{animation:rf-spin .7s linear infinite}
.rf[disabled]{opacity:1;cursor:progress}
@keyframes rf-breathe{0%,100%{transform:rotate(0);opacity:.55}50%{transform:rotate(-26deg);opacity:1}}
@keyframes rf-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .rf .rf-i,.rf.is-busy .rf-i{animation:none;opacity:1} }

/* ---- 一覧の見出し帯（背景案C）----
   見出し・案内文・絞り込みをブランドカラーの帯に載せ、カードを浮かせて奥行きを出す。
   帯の高さは中身に追従する。左右は .wrap の余白ぶん外へ広げて全幅に見せる */
.head-band{margin:-22px -18px 18px;padding:22px 18px 16px;border-radius:0 0 20px 20px;color:#fff;
 background:linear-gradient(135deg,var(--blue) 0%,var(--blue-dark) 100%);
 box-shadow:0 10px 24px -18px rgba(16,24,40,.55)}
.head-band h1{color:#fff}
.head-band .lead{color:rgba(255,255,255,.90)}
.head-band .hint{color:rgba(255,255,255,.78)}
.head-band .fbtn{background:rgba(255,255,255,.92);border-color:transparent;color:#334155}
.head-band .fbtn:hover{background:#fff}
.head-band .fbtn.on{background:#fff;border-color:#fff;color:var(--blue-dark)}
.head-band .btn.primary{background:#fff;border-color:#fff;color:var(--blue-dark)}
.head-band .btn.primary:hover{background:#EEF4FF}
.head-band .filters{margin-bottom:0}
@media (max-width:600px){ .head-band{margin:-14px -12px 14px;padding:14px 12px 14px;border-radius:0 0 16px 16px} }

/* 上部バーの「戻る」。全画面で同じ位置（左端）に出す */
.tb-back{margin:0 4px 0 0;flex:none;white-space:nowrap}

/* アイコンだけの小さなボタン（返信音の切替など）。文字ボタンより控えめに見せる */
.icon-btn{flex-shrink:0;width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;
 border:1px solid transparent;border-radius:10px;background:transparent;color:var(--muted);cursor:pointer;
 transition:background .15s,color .15s,border-color .15s}
.icon-btn:hover{background:var(--bg);color:var(--fg);border-color:var(--line)}
.icon-btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.icon-btn.off{color:#9CA3AF}

/* 更新ボタンの回転。読み込み中だけ回す */
.btn .ico{display:inline-block;line-height:1;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
@keyframes spin-ico{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.btn.spinning .ico{animation:spin-ico .7s linear infinite}
/* ホバーでアイコンを動かす。押す前から反応が返る */
.btn:hover .ico{transform:rotate(-180deg)}
.btn:hover .ico-turn{transform:rotate(90deg)}
.btn:hover .ico-lift{transform:translateY(-2px) rotate(0)}

/* 送信中。文字を隠して丸い回転に差し替える */
.btn.busy{color:transparent!important;pointer-events:none}
.btn.busy::before{
  content:"";position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;
  border-radius:50%;border:2px solid rgba(17,24,39,.18);border-top-color:var(--blue);
  animation:spin-ico .6s linear infinite;
}
.btn.primary.busy::before{border-color:rgba(255,255,255,.45);border-top-color:#fff}

@media (prefers-reduced-motion:reduce){
  .btn.spinning .ico{animation:none}
  .btn:hover .ico,.btn:hover .ico-turn,.btn:hover .ico-lift{transform:none}
  .btn.busy::before{animation:none}
}

/* 「解決済みにする」をゆっくり点滅させて気づかせる。
   押し間違いを誘わないよう、色は淡く、周期は長くする */
@keyframes pulse-amber{
  0%,100%{ background:transparent; border-color:transparent; color:var(--muted) }
  50%    { background:#FEF6DC;     border-color:#F0CE72;     color:#8A6100 }
}
.btn.pulse{animation:pulse-amber 3.6s ease-in-out infinite}
.btn.pulse:hover{animation:none;background:#FEF3C7;border-color:#F5C84C;color:#8A6100}
@media (prefers-reduced-motion:reduce){ .btn.pulse{animation:none} }

/* ご検討中のお客様へ。オレンジでゆっくり点滅させる */
@keyframes pulse-orange{
  0%,100%{ background:#fff;    border-color:var(--line); color:var(--text) }
  50%    { background:#FFF0DF; border-color:#F0A24B;     color:#9A4B00 }
}
.btn.pulse-orange{animation:pulse-orange 3.6s ease-in-out infinite}
.btn.pulse-orange:hover{animation:none;background:#FFE7CC;border-color:#F0A24B;color:#9A4B00}
@media (prefers-reduced-motion:reduce){ .btn.pulse-orange{animation:none} }

/* ご検討中のお客様へ の本文。見出し24pt・本文14pt（本人指定） */
.modal h4{margin:20px 0 8px;font-size:16px}
.pitch-lead{font-size:14pt;line-height:1.85;margin:0 0 22px;color:var(--text)}
.pitch-h{font-size:24pt;line-height:1.4;margin:0 0 16px;font-weight:700;color:var(--text)}
.pitch-body{font-size:14pt;line-height:1.85;color:var(--text)}
.pitch-note{margin:0 0 20px;padding:12px 14px;border-radius:10px;background:var(--bg);color:var(--muted);font-size:14pt;line-height:1.8}
.pitch-list{margin:0;padding-left:1.15em;font-size:14pt;line-height:1.85}
.pitch-list>li{margin-bottom:18px}
.pitch-list b{font-weight:700}
.pitch-sub{margin:6px 0 0;padding-left:1.2em}
.pitch-sub li{margin:0}
.pitch-close{margin:24px 0 18px}
.pitch-sign{margin:0;color:var(--muted);font-size:14pt;line-height:1.7}
@media (max-width:600px){ .pitch-h{font-size:19pt} }
.posts{margin:12px 0}
.post{margin-bottom:14px;display:flex;flex-direction:column}
.post.me{align-items:flex-end}
.post.them{align-items:flex-start}
.bubble{max-width:84%;padding:11px 14px;border-radius:14px;font-size:15px;line-height:1.7;white-space:pre-wrap;word-break:break-word}
.post.them .bubble{background:var(--bg);border:1px solid var(--line)}
.post.me .bubble{background:var(--blue);color:var(--on-brand)}
.post-meta{font-size:15px;color:var(--muted);margin-top:4px}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:80;background:#111827;color:#fff;font-size:15px;border-radius:10px;padding:11px 18px;box-shadow:0 8px 22px rgba(0,0,0,.3);opacity:0;pointer-events:none;transition:opacity .25s}
.toast.show{opacity:1}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:15px;font-weight:600;border-radius:999px;padding:4px 10px;background:var(--blue-soft);color:var(--blue-dark)}
/* AI対応のプレビュー表示（v0.86.0）。スイッチと横並び */
.chip-preview{background:#FEF3C7;color:#92400E;font-size:13px;padding:3px 10px}
.ai-sw{display:inline-flex;align-items:center;gap:10px;flex-shrink:0}
.chip.warn{background:#FEF3C7;color:#92400E}
.chip.bad{background:#FEE2E2;color:#991B1B}
.footer{text-align:center;font-size:15px;color:var(--muted);padding:26px 0 0}
.footer a{color:var(--muted);text-decoration:none;font-weight:600}
.banner{border-radius:12px;padding:12px 16px;font-size:15px;margin-bottom:16px;background:#FFF7ED;border:1px solid #FED7AA;color:#9A3412}
code.url{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:6px 10px;font-size:15px;word-break:break-all;display:inline-block}
table{width:100%;border-collapse:collapse;font-size:15px}
th,td{text-align:left;padding:9px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
th{font-size:15px;color:var(--muted);font-weight:600}
.center{max-width:440px;margin:60px auto;padding:0 18px}
.center .panel{padding:28px}
.logo-lg{display:flex;align-items:center;gap:12px;font-weight:700;font-size:20px;margin-bottom:6px}
/* サインイン・登録画面のロゴ（/img/logo.svg）。文字だけの見出しより先に目に入る大きさにする */
.logo-lg .mark{width:40px;height:40px;flex:none;display:block;border-radius:11px}
@media (max-width:600px){ .logo-lg .mark{width:34px;height:34px} }
.logo-lg .dot{width:18px;height:18px;border-radius:50%;background:var(--blue);box-shadow:inset 0 0 0 4px rgba(255,255,255,.35)}
@media (max-width:600px){
  .wrap{padding:14px 12px 50px}.panel{padding:16px}.modal{padding:16px;border-radius:14px}.bubble{max-width:92%}
  .tk{padding:12px}.topbar-in{padding:10px 12px}
  /* スレッドの見出しはボタン群と同じ行に入りきらない。件名を1行使い、ボタンは次の行へ回す */
  .th-top{flex-wrap:wrap;gap:8px;padding-top:16px}
  .th-top>div:first-child{flex:1 1 100%;min-width:0}
  .th-top>div:first-child+span{margin-left:auto}
  .th-top h3{font-size:15px;line-height:1.5}
  .att-img img{max-width:150px;max-height:150px}

  /* 一覧の見出し行。狭い画面では見出しを1行使い、ボタンは下の行に横並びで置く。
     ボタンが右端に寄って階段状に折り返すのを防ぐ */
  .list-head{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}
  .list-head h1{grid-column:1 / -1;font-size:20px}
  .list-head .spacer{display:none}
  /* 行は自動で決まる。体験窓口だけに出るボタンが無い場合も詰まる */
  .list-head #btn-pitch{grid-column:1 / -1;width:100%}
  .list-head #btn-reload{grid-column:1;justify-self:start}
  .list-head #btn-new{grid-column:2;justify-self:end}

  /* フッターのリンクは語の途中で折り返させない */
  .footer a{display:inline-block;white-space:nowrap;margin:0 6px}
  .footer{line-height:2}

  /* 上部バーは2行に分ける */
  .topbar-in{gap:6px}
}

/* ---- 未読 / 返信あり ---- */
.badge-new{flex-shrink:0;font-size:15px;font-weight:700;border-radius:8px;padding:4px 10px;white-space:nowrap;background:#FEE2E2;color:#B42318}
.badge-reply{flex-shrink:0;font-size:15px;font-weight:700;border-radius:8px;padding:4px 10px;white-space:nowrap;background:#DCFCE7;color:#166534}
.dot-new{display:inline-block;width:8px;height:8px;border-radius:50%;background:#EF4444;margin-right:7px;vertical-align:middle}
.tk.is-unread{border-color:#FBC5C0;background:#FFFBFB}

/* ---- 満足度アンケート ---- */
.rate{display:flex;gap:6px}
.rate-btn{flex:1;font-family:inherit;cursor:pointer;background:#fff;border:1px solid var(--line);border-radius:12px;
 padding:12px 4px;display:flex;flex-direction:column;align-items:center;gap:5px;transition:border-color .15s,background .15s}
.rate-btn:hover{border-color:var(--blue);background:var(--blue-soft)}
.rate-btn.on{border-color:var(--blue);background:var(--blue);color:var(--on-brand)}
.rate-num{font-size:18px;font-weight:700;line-height:1}
.rate-lb{font-size:15px;line-height:1.25;text-align:center;color:var(--muted)}
.rate-btn.on .rate-lb{color:var(--on-brand)}
.rating-chip{display:inline-flex;align-items:center;gap:4px;font-size:15px;font-weight:600;border-radius:8px;padding:3px 9px;background:#FEF3C7;color:#92400E}
.survey-box{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:10px 0;background:var(--bg);font-size:15px}
@media (max-width:600px){ .rate-lb{font-size:15px} .rate-btn{padding:10px 2px} }
.modal-bg.mid{z-index:55}
.modal-bg.top{z-index:60}
.modal.confirm{max-width:420px}
.confirm h3{margin:0 0 8px;font-size:17px}
.confirm p{margin:0 0 18px;font-size:15px;line-height:1.7;color:var(--fg)}
/* ---- 添付ファイル ---- */
.att-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:2px 0 8px}
.att-input{display:none}
.att-hint{font-size:15px;color:var(--muted);margin:0}
.att-chips{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 10px}
.att-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:10px;padding:4px 6px 4px 4px;background:#fff;max-width:230px}
.att-chip img{width:34px;height:34px;object-fit:cover;border-radius:6px;display:block}
.att-ic{font-size:15px;font-weight:700;color:#B91C1C;background:#FEE2E2;border-radius:6px;padding:9px 6px}
.att-nm{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.att-x{border:0;background:transparent;color:var(--muted);font-size:17px;line-height:1;cursor:pointer;padding:0 3px}
.att-x:hover{color:#B91C1C}
.att-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.att-img img{max-width:200px;max-height:200px;border-radius:8px;border:1px solid var(--line);display:block}
.att-file{display:inline-flex;align-items:center;gap:6px;font-size:15px;border:1px solid var(--line);border-radius:8px;padding:6px 10px;background:#fff;text-decoration:none;color:var(--fg)}
.att-file:hover{background:var(--bg)}
.drop-on{outline:2px dashed var(--brand);outline-offset:2px}
/* ---- 窓口デザイン（ops側の設定画面） ---- */
.sw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;margin-bottom:16px}
.sw{border:2px solid var(--line);border-radius:12px;padding:8px;background:#fff;cursor:pointer;text-align:center;font-family:inherit;font-size:15px;color:var(--text)}
.sw:hover{border-color:#CBD5E1}
.sw.on{border-color:var(--text)}
.sw-chip{height:26px;border-radius:8px;margin-bottom:6px}
.logo-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.logo-prev{height:44px;max-width:180px;object-fit:contain;border:1px solid var(--line);border-radius:8px;padding:4px;background:#fff}
/* ---- 窓口の背景パターン ----
   ブランド色を薄めた色（--brand-tint）を使う。パネルは白のままなので本文の読みやすさは変わらない。
   画面側は body にクラスを付けるだけ。CSSの値を利用者から受け取らない。 */
body.bg-dots{background-image:radial-gradient(var(--brand-tint) 1.5px,transparent 1.5px);background-size:18px 18px}
body.bg-grid{background-image:linear-gradient(var(--brand-tint) 1px,transparent 1px),linear-gradient(90deg,var(--brand-tint) 1px,transparent 1px);background-size:22px 22px}
body.bg-stripes{background-image:repeating-linear-gradient(45deg,var(--brand-tint) 0 2px,transparent 2px 12px)}
body.bg-gradient{background-image:linear-gradient(180deg,var(--brand-tint) 0,rgba(0,0,0,0) 320px);background-repeat:no-repeat;background-attachment:fixed}
/* 背景の選択見本 */
.bgsw{border:2px solid var(--line);border-radius:12px;padding:0;background:var(--bg);cursor:pointer;overflow:hidden;font-family:inherit}
.bgsw.on{border-color:var(--text)}
.bgsw i{display:block;height:46px;background-color:var(--bg)}
.bgsw span{display:block;font-size:15px;padding:5px 4px;background:#fff;border-top:1px solid var(--line);color:var(--text)}
.bgsw .p-dots{background-image:radial-gradient(var(--brand-tint) 1.5px,transparent 1.5px);background-size:12px 12px}
.bgsw .p-grid{background-image:linear-gradient(var(--brand-tint) 1px,transparent 1px),linear-gradient(90deg,var(--brand-tint) 1px,transparent 1px);background-size:14px 14px}
.bgsw .p-stripes{background-image:repeating-linear-gradient(45deg,var(--brand-tint) 0 2px,transparent 2px 10px)}
.bgsw .p-gradient{background-image:linear-gradient(180deg,var(--brand-tint),rgba(0,0,0,0))}
/* QR */
.qr-box{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:8px}
.qr-prev{width:132px;height:132px;border:1px solid var(--line);border-radius:12px;background:#fff;padding:8px}


/* ===== 規約・ポリシー等の文書ページ ===== */
.policy{max-width:820px;margin:0 auto;padding:26px 18px 56px}
.policy h1{font-size:24px;margin:0 0 6px}
.policy .policy-date{font-size:15px;color:var(--muted);margin:0 0 28px}
.policy h2{font-size:16px;margin:30px 0 8px;padding-left:10px;border-left:3px solid var(--blue)}
.policy h3{font-size:15px;margin:20px 0 4px;color:var(--text)}
.policy p,.policy li{font-size:15px;color:#374151;line-height:1.95}
.policy ol,.policy ul{padding-left:1.4em;margin:6px 0}
.policy li{margin-bottom:3px}
.policy ul ul,.policy ol ul{margin:4px 0}
.policy table{width:100%;border-collapse:collapse;margin:10px 0}
.policy th,.policy td{border:1px solid var(--line);padding:10px 12px;font-size:15px;text-align:left;vertical-align:top;line-height:1.8}
.policy th{width:190px;background:var(--blue-soft);font-weight:600;color:var(--text)}
.policy .footer{border-top:1px solid var(--line);margin-top:44px;padding-top:22px}
@media (max-width:600px){
  .policy{padding:20px 16px 44px}
  .policy h1{font-size:20px}
  .policy table{border:1px solid var(--line)}
  .policy th,.policy td{display:block;width:auto;border:0}
  .policy th{padding-bottom:2px}
  .policy td{padding-top:2px;border-bottom:1px solid var(--line)}
  .policy tr:last-child td{border-bottom:0}
}

/* ===== 月次上限のゲージ（サポート管理のみ） ===== */
/* 月次上限（v0.80.0）。枠と影をやめ、1行の帯にする。高さを従来の約1/3に */
.quota{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 10px;padding:0}
.quota-label{font-size:13px;color:var(--muted);white-space:nowrap}
.quota-num{font-size:13px;font-weight:700;color:var(--text);white-space:nowrap}
.quota-num .lim{font-weight:500;color:var(--muted)}
.quota-bar{display:block;flex:1;min-width:120px;max-width:260px;height:6px;border-radius:999px;background:#E9EEF7;overflow:hidden}
.quota-fill{display:block;height:100%;border-radius:999px;background:var(--blue);transition:width .3s}
.quota-pct{font-size:13px;color:var(--muted);white-space:nowrap}
.quota.warn .quota-fill{background:#D97706}
.quota.bad .quota-fill{background:#DC2626}
.quota-note{font-size:13px;color:var(--muted);white-space:nowrap}
.quota.warn .quota-note,.quota.warn .quota-pct{color:#B45309;font-weight:600}
.quota.bad .quota-note,.quota.bad .quota-pct{color:#B91C1C;font-weight:600}
@media (max-width:600px){
  .quota{gap:8px;padding:0}
  .quota-bar{flex:1 1 100%;order:3;max-width:none}
  .quota-note{flex:1 1 100%;order:5;white-space:normal}
}

/* ===== サポート側サインイン画面の背景 ===== */
/* 写真の上に白の層を重ね、パネルの文字のコントラストを確保する。
   写真そのものは薄く見せ、読みやすさを優先する。 */
body.auth-bg{
  background-image:linear-gradient(rgba(31,41,55,.06), rgba(31,41,55,.14)), url('/img/login-bg.jpg');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-attachment:fixed;
  min-height:100vh;
}
body.auth-bg .center{margin:84px auto}
body.auth-bg .panel{
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(2px);
  box-shadow:0 2px 6px rgba(16,24,40,.06),0 18px 48px rgba(16,24,40,.14);
}
body.auth-bg .footer{color:#4B5563}
body.auth-bg .footer a{color:#4B5563}
@media (max-width:600px){
  /* スマホは fixed だと描画が重く、URLバーの伸縮でもガタつくため scroll にする */
  body.auth-bg{background-attachment:scroll}
  body.auth-bg .center{margin:40px auto}
}
@media (prefers-reduced-motion: reduce){
  body.auth-bg{background-attachment:scroll}
}

/* ===== 受付終了画面のイラスト ===== */
/* 画像の縁はあらかじめ透過でぼかしてあるので、枠や影は付けない */
.closed-art{display:block;width:100%;max-width:300px;height:auto;margin:-6px auto 2px}
@media (max-width:600px){ .closed-art{max-width:240px} }

/* ===== Google サインインボタン =====
   Googleのブランドガイドラインに合わせた見た目。ライトテーマ。
     塗り #FFFFFF ／ 枠線 #747775 ／ ロゴの左に12pxの余白
   ロゴは公式配布物（public/google-logo.svg）をそのまま表示する。
   ロゴを自作・改変・着色することはガイドライン上できない。
   https://developers.google.com/identity/branding-guidelines */
.btn-idp{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:44px;padding:0 12px;
  background:#FFFFFF;border:1px solid #747775;border-radius:10px;
  color:#1F1F1F;font-family:inherit;font-size:15px;font-weight:600;
  text-decoration:none;cursor:pointer;transition:background .15s,box-shadow .15s;
}
.btn-idp:hover{background:#F7F8F8;box-shadow:0 1px 2px rgba(60,64,67,.3)}
.btn-idp:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.btn-idp + .btn-idp{margin-top:10px}
/* サインインボタンのロゴ。文字は中央のまま、ロゴだけ左に置く */
.btn-idp{position:relative}
.btn-idp .idp-mark{position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:20px;height:20px;display:block;flex:none}
@media (max-width:600px){ .btn-idp .idp-mark{left:10px} }


/* ====================================================================
   MIRA スキン（管理画面のみ・body.mira）
   イメージキャラ MIRA の分光と鏡面を、色と質感だけ画面へ移したもの。
   お客様画面には適用しない。既存のクラスに上から重ねるだけで、
   構造・JS・権限判定には一切触れない。
   ==================================================================== */
.mira{background:#F4F6FC;position:relative}
/* 上部の分光。固定なのでスクロールしても位置が変わらない */
.mira::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
   radial-gradient(760px 300px at 12% -6%, rgba(142,123,255,.20), transparent 62%),
   radial-gradient(700px 300px at 52% -10%, rgba(63,208,240,.18), transparent 62%),
   radial-gradient(760px 320px at 92% -4%, rgba(255,123,194,.16), transparent 62%)}
/* ミラーボールの面。上部だけに見せ、下へ向けて消す */
.mira::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(120,140,200,.10) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(120,140,200,.10) 1px, transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.85),transparent 420px);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.85),transparent 420px)}
/* 背景（z-index:0）より前に出すのは本文だけ。
   topbar は sticky、左メニューとモーダルは fixed なので position を上書きしない
   （上書きすると文書の流れに戻り、余白として場所を占有する） */
.mira .wrap{position:relative;z-index:1}

.mira .topbar{background:rgba(255,255,255,.72);backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid rgba(255,255,255,.7);box-shadow:0 8px 24px -22px rgba(30,40,80,.8)}
/* ヘッダー下の帯 */
.mira .topbar::after{content:"";display:block;height:3px;background:#FFD84D}
/* ロゴの丸をミラーボールに */
.mira .topbar .dot{width:16px;height:16px;
  background:conic-gradient(from 210deg,#8E7BFF,#3FD0F0,#FF7BC2,#FFD84D,#8E7BFF);
  box-shadow:0 3px 9px -3px rgba(120,130,255,.75), inset 0 0 0 1px rgba(255,255,255,.65)}

/* 面はガラス。背後の格子と光がうっすら透ける */
.mira .panel,.mira .quota{background:rgba(255,255,255,.80);backdrop-filter:blur(8px);
  border-color:rgba(255,255,255,.85);
  box-shadow:0 10px 26px -24px rgba(30,40,80,.9), inset 0 1px 0 rgba(255,255,255,.95)}
.mira .tk{background:rgba(255,255,255,.80);backdrop-filter:blur(8px);
  border-color:rgba(255,255,255,.85);
  box-shadow:0 10px 26px -24px rgba(30,40,80,.9), inset 0 1px 0 rgba(255,255,255,.95)}
.mira .tk:hover{background:rgba(255,255,255,.95);border-color:rgba(142,123,255,.45);
  box-shadow:0 20px 36px -28px rgba(90,75,216,.9)}

/* 選択中のチップだけ分光を使う */
.mira .fbtn.on{background:linear-gradient(135deg,#8E7BFF,#3FD0F0);border-color:transparent;color:#fff;
  box-shadow:0 10px 22px -12px rgba(110,120,255,1)}
.mira .chip{background:rgba(255,255,255,.75);box-shadow:inset 0 0 0 1px rgba(142,123,255,.28)}

/* 左メニューもガラスに揃える */
.mira .nav-dw{background:rgba(255,255,255,.92);backdrop-filter:blur(16px)}

@media (prefers-reduced-motion:reduce){ .mira::before,.mira::after{display:none} }

/* ---- AI教育（おしえる・チャット形式） v0.58.0 ---- */
.kb-chat{min-height:300px;max-height:46vh;overflow-y:auto;padding:4px 2px 8px}
.kb-turn{display:flex;gap:10px;margin-bottom:14px}
.kb-turn.me{justify-content:flex-end}
.kb-av{width:28px;height:28px;border-radius:50%;flex:none;
  background:conic-gradient(from 210deg,#8E7BFF,#3FD0F0,#FF7BC2,#FFD84D,#8E7BFF);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}
.kb-bub{max-width:80%;padding:11px 15px;border-radius:14px;font-size:15px;line-height:1.8;
  background:#F3F5FA;color:var(--text);white-space:pre-wrap;word-break:break-word}
.kb-turn.me .kb-bub{background:var(--blue);color:var(--on-brand)}

.kb-card{border:1px solid #C9D9FF;background:#F7FAFF;border-radius:14px;padding:14px 16px;white-space:normal}
.kb-card .k{font-size:12px;font-weight:800;letter-spacing:.09em;color:var(--blue-dark);margin-bottom:10px}
.kb-f{display:flex;align-items:flex-start;gap:10px;margin-bottom:8px}
.kb-f>span{flex:none;width:52px;font-size:13px;color:var(--muted);padding-top:10px}
.kb-f input,.kb-f select,.kb-f textarea{flex:1;min-width:0;font-family:inherit;font-size:15px;
  padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--text)}
.kb-f textarea{min-height:88px;resize:vertical;line-height:1.8}

.kb-foot{border-top:1px solid var(--line);padding:12px 0 0;margin-top:6px}
.kb-quick{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:10px}
.kb-q{font-family:inherit;font-size:14px;font-weight:600;padding:6px 12px;border:1px solid var(--line);
  background:#fff;border-radius:999px;color:var(--text);cursor:pointer}
.kb-q:hover{border-color:#C9D9FF;color:var(--blue-dark)}
.kb-inrow{display:flex;gap:8px;align-items:flex-end}
.kb-inrow textarea{flex:1;min-width:0;font-family:inherit;font-size:15px;min-height:46px;max-height:140px;
  padding:11px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;resize:vertical;line-height:1.7}
.kb-inrow .btn{flex:none}

@media (max-width:560px){
  .kb-bub{max-width:88%}
  .kb-f{flex-direction:column;gap:4px}
  .kb-f>span{width:auto;padding-top:0}
}


/* ---- AI教育（v0.59.0）：収集箱の件数と、登録前の注意書き ---- */
.kb-cnt{
  display:inline-block;min-width:44px;text-align:center;
  padding:1px 8px;margin-right:6px;border-radius:999px;
  background:var(--brand,#1f6feb);color:#fff;font-weight:700;font-size:12px;
}
.kb-alert{margin-top:10px;display:grid;gap:8px}
.kb-al{
  padding:10px 12px;border-radius:10px;font-size:13px;line-height:1.7;
  border:1px solid #e0b400;background:#fff8e1;color:#5c4400;
}
.kb-al.sim{border-color:#9fb6d6;background:#eef4fb;color:#24405e}
.kb-al ul{margin:6px 0 0;padding-left:1.2em}
.kb-al li{margin:2px 0}
#kb-count.warn{color:#a05a00;font-weight:700}

@media (prefers-color-scheme: dark){
  .kb-al{border-color:#7a6100;background:#2a2410;color:#f0e0b0}
  .kb-al.sim{border-color:#3f5a7d;background:#14202e;color:#cfe0f5}
}


/* ---- AI対応（v0.60.0） ---- */
.ai-row{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 0;border-bottom:1px solid var(--line);
}
.ai-row:last-of-type{border-bottom:0}
.ai-k{font-weight:700}
.ai-row select,.ai-row input[type="time"]{
  padding:8px 10px;border:1px solid var(--line);border-radius:8px;font:inherit;background:var(--card,#fff);color:inherit;
}
/* オン・オフのスイッチ。
   クラス名は .toggle。以前は .sw だったが、窓口デザインの色見本（.sw）と衝突して
   見本の並びが壊れていたため改名した（v0.68.2） */
.toggle{position:relative;display:inline-block;width:52px;height:30px;flex:none}
.toggle input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.toggle span{
  position:absolute;inset:0;border-radius:999px;background:#c3c9d2;transition:background .15s;pointer-events:none;
}
.toggle span::after{
  content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .15s;
}
.toggle input:checked + span{background:var(--blue)}
.toggle input:checked + span::after{transform:translateX(22px)}
.toggle input:focus-visible + span{outline:2px solid var(--blue);outline-offset:2px}
@media (prefers-reduced-motion: reduce){ .toggle span,.toggle span::after{transition:none} }


/* ---- AI教育：まとめて入れる（v0.61.0） ---- */
.imp-wrap{max-height:320px;overflow:auto;border:1px solid var(--line);border-radius:10px}
table.imp{width:100%;border-collapse:collapse;font-size:13px}
table.imp th,table.imp td{padding:6px 8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
table.imp th{position:sticky;top:0;background:var(--card,#fff);font-weight:700}
table.imp{table-layout:fixed}
table.imp th:nth-child(1),table.imp td:nth-child(1){width:88px;white-space:nowrap;font-weight:700}
table.imp th:nth-child(2),table.imp td:nth-child(2){width:140px;overflow-wrap:anywhere}   /* 長い分類名（申し込む・受け取る）が隣の列に重ならないように（v0.94.4） */
table.imp th:nth-child(3),table.imp td:nth-child(3){width:150px;overflow-wrap:anywhere}
table.imp td:nth-child(3){font-weight:700}
table.imp td:nth-child(4){white-space:pre-wrap;word-break:break-word}
tr.imp-dup td,tr.imp-over td,tr.imp-same td{color:var(--muted);background:rgba(0,0,0,.03)}
/* 入れ替え。既存を消して入れ直す行だと分かるようにする（v0.85.0） */
tr.imp-replace td:nth-child(1){color:#0b5cab;font-weight:700}
tr.imp-over td:nth-child(1){color:#a05a00}


/* ---- AI教育：まとめて入れるの手順（v0.62.0） ---- */
.step{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
.step:last-child{border-bottom:0;padding-bottom:0}
.step-n{
  flex:none;width:26px;height:26px;border-radius:50%;
  background:var(--brand,#1f6feb);color:#fff;font-weight:700;font-size:13px;
  display:flex;align-items:center;justify-content:center;margin-top:2px;
}
.step-b{flex:1;min-width:0}
.step-t{font-weight:700;margin-bottom:4px}
.step-b .hint{margin:0 0 8px}
textarea.kb-code{
  width:100%;min-height:200px;padding:12px 14px;
  font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Noto Sans Mono","Courier New",monospace;
  font-size:13px;line-height:1.9;
  border:1px solid var(--line);border-radius:10px;background:var(--card,#fff);color:inherit;
  tab-size:2;white-space:pre;overflow-x:auto;
}
textarea.kb-code:focus{outline:2px solid var(--brand,#1f6feb);outline-offset:-1px}
textarea.kb-code::placeholder{color:var(--muted);opacity:.8}


/* ---- お客様画面：返信欄（v0.64.0） ---- */
.reply-card{
  margin-top:16px;padding:14px;border:1px solid var(--line);border-radius:12px;
  background:var(--card,#fff);box-shadow:0 1px 3px rgba(0,0,0,.05);
}
.reply-card .reply-t{font-weight:700;margin-bottom:8px}
.reply-card textarea{
  width:100%;min-height:104px;padding:12px 14px;font:inherit;line-height:1.8;
  border:1px solid var(--line);border-radius:10px;background:var(--card,#fff);color:inherit;resize:vertical;
}
.reply-card textarea:focus{outline:2px solid var(--brand,#1f6feb);outline-offset:-1px}
.reply-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}
.reply-actions .btn.primary{min-width:120px}
.reply-card .att-hint{margin:8px 0 0;font-size:12px;color:var(--muted);line-height:1.7}
.reply-done{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);text-align:right}
@media (max-width:480px){
  .reply-actions{flex-direction:column-reverse;align-items:stretch}
  .reply-actions .btn{width:100%}
}


/* ---- お客様画面：返信欄を下に固定（v0.65.0） ----
   モーダル全体がスクロール領域なので、返信欄を bottom:0 の sticky にする。
   sticky はスクロール領域の padding の内側で止まるため、モーダルの下paddingを0にし、
   返信欄自身が同じ量の余白を持つ（固定見出し .th-top と同じ考え方）。 */
#m-thread .modal.hd{padding-bottom:0}
#m-thread .reply-card{
  position:sticky;bottom:0;z-index:2;
  margin:14px -22px 0;padding:12px 22px 18px;
  border:0;border-top:1px solid var(--line);border-radius:0;
  background:#fff;box-shadow:0 -10px 24px rgba(16,24,40,.08);
}
#m-thread .reply-card textarea{min-height:72px}
#m-thread .reply-left{display:flex;gap:8px;flex-wrap:wrap}
#m-thread .posts{padding-bottom:6px}
@media (max-width:480px){
  #m-thread .reply-card{margin:14px -16px 0;padding:10px 16px 14px}
  #m-thread .reply-actions{flex-direction:column-reverse;align-items:stretch}
  #m-thread .reply-left{justify-content:space-between}
}


/* ---- AI教育：おしえる（フォーム・v0.66.0） ---- */
.kb-form{padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--card,#fff)}
.kb-form-t{font-weight:700;margin-bottom:10px}
.kb-form .kb-f{display:grid;grid-template-columns:72px 1fr;gap:10px;align-items:start;margin-bottom:10px}
.kb-form .kb-f>span{padding-top:9px;color:var(--muted);font-size:13px}
.kb-form select,.kb-form input,.kb-form textarea{
  width:100%;padding:9px 12px;font:inherit;line-height:1.7;
  border:1px solid var(--line);border-radius:10px;background:var(--card,#fff);color:inherit;
}
.kb-form textarea{min-height:150px;resize:vertical}
.kb-form textarea:focus,.kb-form input:focus{outline:2px solid var(--brand,#1f6feb);outline-offset:-1px}
@media (max-width:480px){ .kb-form .kb-f{grid-template-columns:1fr} .kb-form .kb-f>span{padding-top:0} }


/* ---- おしえる：書き方の例（v0.67.0） ---- */
.kb-bub pre.kb-ex{
  margin:0;padding:10px 12px;border-radius:8px;
  background:rgba(0,0,0,.04);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Noto Sans Mono",monospace;
  font-size:13px;line-height:1.8;white-space:pre-wrap;word-break:break-word;
}

/* ===== お申し込み（プラン選択） v0.68.0 =====
   ロゴの暖色側に合わせたオレンジ。丸型＋矢印で押す場所を分かりやすくする */
.pay-lead{margin:-4px 0 16px;color:var(--muted);font-size:14px}
.pay-plans{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pay-card{border:1px solid var(--line);border-radius:14px;padding:18px;background:#fff;display:flex;flex-direction:column}
.pay-card.reco{border-color:#FDBA74;box-shadow:0 0 0 3px rgba(245,158,11,.10)}
.pay-tag{align-self:flex-start;background:#FFF7ED;color:#B45309;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:700;margin-bottom:6px}
.pay-name{font-size:17px;font-weight:700}
.pay-price{display:flex;align-items:baseline;gap:4px;margin:6px 0 2px}
.pay-price b{font-size:32px;font-weight:700;letter-spacing:-.01em}
.pay-price span{font-size:14px;color:var(--muted)}
.pay-src{font-size:12px;color:var(--muted);margin-bottom:12px}
.pay-card ul{list-style:none;margin:0 0 16px;padding:0;font-size:14px}
.pay-card li{padding:5px 0 5px 22px;position:relative}
.pay-card li::before{content:"";position:absolute;left:4px;top:13px;width:5px;height:9px;border:solid #9CA3AF;border-width:0 2px 2px 0;transform:rotate(45deg)}
.pay-fill{flex:1}
.pay-hook{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12.5px;font-weight:700;color:#B45309;margin-bottom:6px}
.pay-hook::before,.pay-hook::after{content:"";width:10px;height:14px;border-left:2px solid #B45309;border-radius:1px}
.pay-hook::before{transform:rotate(-18deg)}
.pay-hook::after{transform:rotate(18deg);border-left:none;border-right:2px solid #B45309}
.btn-pay{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  background:#F59E0B;color:#fff;border:none;border-radius:999px;padding:15px 20px;
  font-size:15.5px;font-weight:700;font-family:inherit;cursor:pointer;
  box-shadow:0 2px 0 #D97706,0 8px 18px rgba(217,119,6,.22);transition:.15s}
.btn-pay:hover{background:#D97706;box-shadow:0 1px 0 #D97706,0 6px 14px rgba(217,119,6,.26);transform:translateY(1px)}
.btn-pay:disabled{opacity:.6;cursor:default;transform:none}
.btn-pay .arw{width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.22);display:grid;place-items:center;font-size:12px}
.pay-fine{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.pay-fine p{margin:0 0 6px;padding-left:20px;position:relative}
.pay-fine p::before{content:"・";position:absolute;left:4px}
@media(max-width:700px){.pay-plans{grid-template-columns:1fr}}

/* 「プランを選ぶ」ボタン。黄色でゆっくり点滅させ、期限切れに気づいてもらう。
   目が疲れないよう明滅は浅く、動きを減らす設定の環境では止める */
.btn-attn{background:#F59E0B;border-color:#D97706;color:#fff;font-weight:700;
  animation:attn-blink 2.4s ease-in-out infinite}
.btn-attn:hover{background:#D97706;border-color:#B45309;animation:none}
@keyframes attn-blink{
  0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(245,158,11,.45)}
  50%{opacity:.72;box-shadow:0 0 0 6px rgba(245,158,11,0)}
}
@media(prefers-reduced-motion:reduce){.btn-attn{animation:none}}


/* ===== 担当者の返信を希望（v0.69.0） =====
   AIの回答が合っていないとき、お客様がこの1件だけ自動応答を止められる */
.human-ask{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:#FFF7ED;border:1px solid #FED7AA;color:#9A3412;
  border-radius:12px;padding:12px 16px;margin:0 0 12px;font-size:14px}
.human-ask .btn{background:#fff;border-color:#FDBA74;color:#9A3412;font-weight:700}
.human-ask .btn:hover{background:#FFEDD5;border-color:#F59E0B}
.human-done{background:#EFF4FF;border:1px solid #C7DBFF;color:var(--blue-dark);
  border-radius:12px;padding:12px 16px;margin:0 0 12px;font-size:14px}
/* 管理画面の「担当者の返信希望」バッジ */
.badge-human{display:inline-flex;align-items:center;gap:5px;
  background:#FFEDD5;color:#9A3412;border:1px solid #FDBA74;
  border-radius:999px;padding:3px 11px;font-size:13px;font-weight:700;white-space:nowrap}
.badge-human::before{content:"!";width:15px;height:15px;border-radius:50%;
  background:#9A3412;color:#fff;font-size:11px;display:grid;place-items:center}


/* ===== チーム（担当者ごとの状況・満足度） v0.70.0 ===== */
.tm-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px}
table.tm{width:100%;border-collapse:collapse;font-size:14.5px;min-width:600px}
table.tm th,table.tm td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
table.tm th{background:#F1F5F9;font-weight:700;font-size:13.5px;color:var(--muted)}
table.tm tr:last-child td{border-bottom:none}
table.tm td.tm-n{text-align:right;font-variant-numeric:tabular-nums}
table.tm .tm-warn{color:#B45309;font-weight:700}
table.tm .tm-bad{color:#B91C1C;font-weight:700}
table.tm tr.tm-total td{background:#F8FAFC;font-weight:700;border-top:2px solid var(--line)}
.tm-bar{display:flex;align-items:center;gap:10px;margin:6px 0}
.tm-bar-l{width:44px;color:var(--muted);font-size:14px;flex:none}
.tm-bar-b{flex:1;height:14px;background:#EEF2F7;border-radius:999px;overflow:hidden}
.tm-bar-b i{display:block;height:100%;background:var(--blue);border-radius:999px}
.tm-bar-n{width:56px;text-align:right;color:var(--muted);font-size:13.5px;flex:none;font-variant-numeric:tabular-nums}


/* 未読タブ（未読があるときだけ出る）とヘッダーの未読バッジ v0.71.0 */
.fbtn-unread{border-color:#FCA5A5;color:#B91C1C}
.fbtn-unread.on{background:#B91C1C;border-color:#B91C1C;color:#fff}
.badge-btn{border:none;cursor:pointer;font-family:inherit}
.badge-btn:hover{filter:brightness(.94)}

/* 担当の絞り込み（一覧の右上） */
.owner-sel{padding:7px 10px;border:1px solid var(--line);border-radius:10px;background:#fff;
  font:inherit;font-size:14px;color:var(--text);cursor:pointer;margin:0}
.owner-sel:focus{outline:2px solid var(--brand-ring);outline-offset:1px}

/* 解決済みの件の返信ロック（v0.79.0） */
.resolved-lock{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:.5rem 0 2px;
  background:var(--st-done-bg);border:1px solid #A7E5BC;color:var(--st-done);
  border-radius:10px;padding:10px 14px;font-size:14px}

/* スレッド見出しの状態・担当（v0.78.0）。見出しと一緒に固定して隠れないようにする */
.th-tags{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:6px}

/* 担当者の転送（v0.77.0）。選ぶ→確認→完了の3段階 */
.assign-list{display:flex;flex-direction:column;gap:8px}
.assign-item{font:inherit;font-size:15px;text-align:left;padding:12px 14px;border:1px solid var(--line);
  border-radius:10px;background:#fff;color:var(--text);cursor:pointer;transition:border-color .15s,background .15s}
.assign-item:hover:not(:disabled){border-color:var(--blue);background:var(--blue-soft)}
.assign-item:focus-visible{outline:2px solid var(--brand-ring);outline-offset:1px}
.assign-item:disabled{color:var(--muted);background:#F7F9FC;cursor:default}
.assign-item.off{color:var(--muted)}
.assign-item.off:hover{border-color:var(--muted);background:#F7F9FC}

/* 担当のチップ（v0.76.1）。一覧で誰の担当かが分かるようにする */
.tag-own{flex-shrink:0;font-size:14px;font-weight:700;border-radius:8px;padding:4px 10px;white-space:nowrap;
  max-width:160px;overflow:hidden;text-overflow:ellipsis;
  background:var(--blue-soft);color:var(--blue-dark);box-shadow:inset 0 0 0 1px #C7DBFF}

/* 未割当のバッジ（v0.76.0）。誰でも取りに行ける件だと一目で分かるようにする */
.tag-free{flex-shrink:0;font-size:14px;font-weight:700;border-radius:8px;padding:4px 10px;white-space:nowrap;
  background:#F3F4F6;color:#4B5563;box-shadow:inset 0 0 0 1px #D8DDE6}

/* 担当者の一覧（v0.75.1）。役割と状態を色で見分ける */
.m-pill{display:inline-block;font-size:14px;font-weight:600;border-radius:999px;padding:2px 10px;white-space:nowrap}
.m-pill.role-admin{color:var(--blue-dark);background:var(--blue-soft);box-shadow:inset 0 0 0 1px #C7DBFF}
.m-pill.role-op{color:var(--muted);background:#F1F3F8;box-shadow:inset 0 0 0 1px var(--line)}
.m-pill.st-live{color:var(--st-done);background:var(--st-done-bg);box-shadow:inset 0 0 0 1px #A7E5BC}
.m-pill.st-inv{color:var(--st-open);background:var(--st-open-bg);box-shadow:inset 0 0 0 1px #FDE68A}
.m-pill.st-off{color:var(--muted);background:#F1F3F8;box-shadow:inset 0 0 0 1px var(--line)}
.m-row td:first-child{border-left:3px solid transparent}
.m-live td:first-child{border-left-color:#22C55E}
.m-inv td:first-child{border-left-color:#F59E0B}
.m-off td:first-child{border-left-color:var(--line)}
.m-off td{color:var(--muted);background:#FAFBFD}

/* 担当者の招待（v0.75.0） */
.inv-card{border:1px solid var(--line);border-radius:12px;padding:16px;background:#fff}
.inv-card.c-code{border-left:4px solid #F59E0B}
.inv-card.c-mail{border-left:4px solid var(--blue)}
.inv-out{margin-top:12px;padding:14px;border:1px dashed #FDBA74;border-radius:10px;background:#FFF7ED}
.inv-code{font-size:30px;font-weight:700;letter-spacing:.22em;color:#9A3412;
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;text-align:center}
.inv-row{display:flex;align-items:center;gap:10px;justify-content:space-between;
  border-top:1px solid var(--line);padding:8px 0;font-size:14px}
.join-note{background:var(--blue-soft);border:1px solid #C7DBFF;color:var(--blue-dark);
  border-radius:10px;padding:10px 14px;font-size:14px;margin:0 0 14px}

/* ---- 管理者ページ（v0.88.0）----
   /admin では、広い画面なら左メニューを常に出し、本文を右へずらす。狭い画面は従来どおり引き出し式 */
.nav-link{display:block;text-decoration:none}
.nav-sep{height:1px;background:var(--line);margin:6px 4px}
.mode-admin .wrap{max-width:1180px}
.dash-h{font-size:17px;margin:4px 0 12px}
.dash-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.dash-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px 16px}
.dash-l{font-size:14px;font-weight:700;color:var(--muted)}
.dash-v{font-size:28px;font-weight:800;margin-top:4px;line-height:1.2}
.dash-n{font-size:13px;color:var(--muted);margin-top:2px}
.dash-card.warn .dash-v{color:var(--st-open)}
.dash-team{margin-bottom:22px}
@media (min-width:1100px){
  .mode-admin .nav-dw{transform:none;box-shadow:none;z-index:30}
  .mode-admin .nav-ov,.mode-admin .nav-close,.mode-admin .hamb,.mode-admin #btn-nav-top{display:none}
  .mode-admin .topbar,.mode-admin .wrap{margin-left:264px}
  .mode-admin .topbar-in{max-width:1180px;margin:0}   /* 会社名を本文の左端にそろえる（v0.94.1） */
}
@media (max-width:720px){ .dash-cards{grid-template-columns:repeat(2,1fr)} }

/* ---- ヘルプページ（v0.91.0：管理者ページのメイン欄の1枚のページ。TAAI /docs のドキュメント管理と同じ並び） ---- */
.hp-h{font-size:22px;font-weight:800;margin:6px 0 16px}
.hp-acts{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 16px}
.hp .btn{border-radius:999px;padding:11px 22px;font-weight:700}
.hp .btn.sm{border-radius:999px;padding:7px 14px}
.hp-acts a.btn{text-decoration:none}
/* ボタンの見た目（v0.92.0）。色ごとのグラデーション＋左に白丸のアイコン。乗せるとグラデーションが流れ、少し浮き、アイコンが傾く */
.hp .btn{border-color:#E5E7EB;color:#1F2937;background:#fff;transition:background-color .2s,border-color .2s,color .2s,box-shadow .2s,transform .15s}
.hp .btn:hover{background:#F9FAFB;border-color:#1F2937;box-shadow:0 8px 18px -12px rgba(17,24,39,.55)}
.hp .btn.gbtn{gap:10px;padding:5px 20px 5px 5px;border:0;color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.18);
  background:linear-gradient(110deg,var(--g1),var(--g2) 55%,var(--g1));background-size:220% 100%;background-position:0 0;
  box-shadow:0 8px 18px -10px var(--g2);transition:background-position .7s ease,transform .2s,box-shadow .2s}
.hp .btn.gbtn:hover{background-position:100% 0;transform:translateY(-2px);box-shadow:0 16px 28px -12px var(--g2)}
.hp .btn.gbtn:active{transform:translateY(1px)}
.hp .btn.gbtn:focus-visible{outline:3px solid var(--g1);outline-offset:3px}
.gbtn .gi{width:34px;height:34px;flex:none;border-radius:50%;background:#fff;color:var(--g2);display:grid;place-items:center;
  box-shadow:0 0 0 3px rgba(255,255,255,.35),0 2px 6px rgba(0,0,0,.18);transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.gbtn:hover .gi{transform:rotate(-14deg) scale(1.08)}
.g-save{--g1:#FF9F43;--g2:#EC368D}
.g-new{--g1:#34D399;--g2:#047857}
.g-list{--g1:#6BCB77;--g2:#2F6B3A}
.g-open{--g1:#02C38D;--g2:#0F766E}
.g-exp{--g1:#8BC34A;--g2:#33691E}
.g-prev{--g1:#2DD4BF;--g2:#115E59}
.g-del{--g1:#DB5375;--g2:#B4232F}
.hl-bar .btn:hover{color:#fff;border-color:transparent;background:linear-gradient(110deg,#34D399,#047857)}
@media (prefers-reduced-motion: reduce){ .hp .btn.gbtn,.gbtn .gi{transition:none} .hp .btn.gbtn:hover{transform:none} .gbtn:hover .gi{transform:none} }
.hp-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px;margin:0 0 16px}
.hp .err{margin:0 0 10px}
.hp .err:empty{display:none}
table.hl-tbl{width:100%;border-collapse:collapse;font-size:14px}
table.hl-tbl th,table.hl-tbl td{padding:10px 8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
table.hl-tbl th{font-weight:700;font-size:13px;color:var(--muted);white-space:nowrap}
table.hl-tbl tr:last-child td{border-bottom:0}
table.hl-tbl td:nth-child(2),table.hl-tbl td:nth-child(5){white-space:nowrap}
table.hl-tbl .num{text-align:right;white-space:nowrap}
table.hl-tbl th.hl-ck,table.hl-tbl td.hl-ck{width:36px;padding-right:0}
.hl-ck input{width:18px;height:18px;margin:0;accent-color:#047857;cursor:pointer}
table.hl-tbl tr.sel td{background:#F0FDF4}
.hl-bulk{display:flex;align-items:center;gap:10px;margin:0 0 12px;padding:10px 14px;border-radius:12px;background:#ECFDF5;border:1px solid #A7F3D0;font-size:14px;font-weight:700;color:#065F46}
.hp .btn.hl-bulk-del{margin-left:auto;border:0;color:#fff;background:linear-gradient(110deg,#DB5375,#B4232F)}
.hp .btn.hl-bulk-del:hover{box-shadow:0 10px 20px -12px #B4232F;background:linear-gradient(110deg,#DB5375,#B4232F)}
.hl-ttl{all:unset;cursor:pointer;font-weight:700;color:var(--text)}
.hl-ttl:hover{color:var(--blue);text-decoration:underline}
.hl-ttl:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px}
.hl-u{font-size:12px;color:var(--muted);word-break:break-all;margin-top:2px}
.hl-st{display:inline-block;font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;white-space:nowrap}
.hl-st.on{background:var(--st-done-bg);color:var(--st-done)}
.hl-st.off{background:#F3F4F6;color:var(--muted)}
.hl-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 14px}
.hl-f{display:flex;flex-direction:column;gap:8px;margin:0;min-width:0}
.hl-f>span{font-size:14px;font-weight:700;color:var(--text)}
.hl-f small{font-size:12px;font-weight:400;color:var(--muted);margin-left:8px}
.hl-f input,.hl-f select{margin:0;height:44px;box-sizing:border-box;padding:9px 13px}
.hl-wide{grid-column:1 / -1}
.hl-bar{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.hl-bar.off{opacity:.45;pointer-events:none}
.hl-bar .btn{font-size:14px;padding:7px 14px;border-radius:10px;background:#F3F4F6;border-color:#E5E7EB}
.hl-body{display:block;width:100%;box-sizing:border-box;height:420px;min-height:220px;resize:vertical;margin:0;padding:14px;font-size:15px;line-height:1.8}
.hl-body:focus{box-shadow:none;border-color:var(--blue)}
.hl-body.drop,.hl-drop.drop{outline:3px dashed var(--blue);outline-offset:-6px;background:var(--blue-soft)}
.hl-drop{margin:18px 0 0;border:2px dashed #CBD5E1;border-radius:12px;padding:18px;text-align:center}
.hl-drop p{margin:0 0 8px;font-size:13px;color:var(--muted)}
.hl-drop input[type=file]{width:auto;margin:0;padding:0;border:0;background:none;font-size:14px}
.hl-sub{font-size:14px;font-weight:700;margin:18px 0 10px}
.hl-imgs{display:flex;flex-wrap:wrap;gap:12px}
.hl-img{position:relative;width:94px;height:72px}
.hl-imgbtn{all:unset;cursor:pointer;display:block;width:100%;height:100%;border:1px solid var(--line);border-radius:8px;overflow:hidden;box-sizing:border-box;background:#F3F4F6}
.hl-imgbtn img{width:100%;height:100%;object-fit:cover;display:block}
.hl-imgbtn:hover,.hl-imgbtn:focus-visible{outline:3px solid var(--blue);outline-offset:1px}
.hl-imgdel{all:unset;cursor:pointer;position:absolute;top:-7px;right:-7px;width:20px;height:20px;border-radius:50%;background:#fff;color:#DC2626;border:1px solid #FCA5A5;font-size:13px;font-weight:800;line-height:20px;text-align:center;box-shadow:0 1px 2px rgba(0,0,0,.12)}
.hl-imgdel:hover{background:#DC2626;color:#fff}
.hl-imgdel:focus-visible{outline:2px solid #DC2626;outline-offset:1px}
.hx-msg{font-size:15px;margin:0 0 6px}
.hx-note{font-size:13px;color:var(--muted);margin:0 0 18px}
.hx-acts{margin-bottom:16px}
.hx-acts .g-new{--g1:#FFB347;--g2:#F2711C}
.hx-acts .g-exp{--g1:#FF9F43;--g2:#E8590C}
.hx-acts .g-list{--g1:#FFC145;--g2:#D9480F}
.hx-text{display:block;width:100%;box-sizing:border-box;height:460px;resize:vertical;margin:0;padding:14px;font:13px/1.75 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:#fff}
.hp-danger{border:1px solid #FECACA;background:#FEF2F2;border-radius:var(--radius);padding:18px 22px;margin:8px 0 20px}
.hp-danger p{margin:0 0 12px;font-size:13px;color:#B91C1C}
.hp-danger .btn{border-color:#FCA5A5;color:#B91C1C;background:#fff}
.hp-danger .btn:hover{background:#FEE2E2}
@media (max-width:720px){
  .hl-form{grid-template-columns:1fr 1fr}
  .hp-card{padding:16px}
  table.hl-tbl th:nth-child(5),table.hl-tbl td:nth-child(5){display:none}
}
/* プレビュー（公開ページの記事と同じ見た目に寄せる） */
.hl-prev{border:1px solid var(--line);border-radius:10px;padding:28px 32px;background:#fff;min-height:420px;color:#1a1a1a;font-size:16px;line-height:1.9;overflow-wrap:anywhere}
.hl-prev .hl-prev-h{font-size:28px;line-height:1.4;margin:0 0 20px;font-weight:800}
.hl-prev h2{font-size:22px;margin:36px 0 12px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.hl-prev h3{font-size:18px;margin:28px 0 10px}
.hl-prev h4,.hl-prev h5,.hl-prev h6{font-size:16px;margin:22px 0 8px}
.hl-prev p{margin:0 0 16px}
.hl-prev ul,.hl-prev ol{margin:0 0 16px;padding-left:1.5em}
.hl-prev a{color:var(--blue)}
.hl-prev code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9em;background:#F3F4F6;padding:2px 6px;border-radius:6px}
.hl-prev pre{background:#111827;color:#F9FAFB;padding:14px 16px;border-radius:10px;overflow:auto;margin:0 0 16px}
.hl-prev pre code{background:none;padding:0;color:inherit}
.hl-prev table{border-collapse:collapse;margin:0 0 16px;display:block;overflow:auto;max-width:100%}
.hl-prev th,.hl-prev td{border:1px solid var(--line);padding:8px 12px;text-align:left}
.hl-prev th{background:#F9FAFB}
.hl-prev blockquote{margin:0 0 16px;padding:8px 16px;border-left:4px solid var(--line);color:var(--muted)}
.hl-prev figure{margin:0 0 16px}
.hl-prev img{max-width:100%;height:auto;border:1px solid var(--line);border-radius:10px}
.hl-prev .img-na{color:var(--muted);font-size:14px}
@media (max-width:720px){
  .hl-form{grid-template-columns:1fr 1fr}
  .hl-prev{padding:18px}
  table.hl-tbl th:nth-child(5),table.hl-tbl td:nth-child(5){display:none}
}

/* ===== 管理者ページ・対応者ページの見た目（v0.93.0・v0.94.0で対応者ページにも）=====
   /admin と /ops（どちらも body.mira）。色は機能ごとのグラデーション。乗せる・押す・今いる場所に反応を付ける。
   動きを減らす設定の端末では動きを止める */
.ni{display:none}
/* 左メニューのアイコンは1色に統一（v0.94.5）。絵は項目ごとに分ける */
.ni{--n1:#629460;--n2:#C9B83A}
.hp .pf-mock{margin-top:0}
.mira .ni{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:11px;color:#fff;
  background:linear-gradient(135deg,var(--n1),var(--n2));box-shadow:0 6px 14px -8px var(--n2),inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .35s cubic-bezier(.3,1.6,.5,1),box-shadow .25s}
.mira .nav-i{display:flex;align-items:center;gap:12px;margin:2px 8px;width:calc(100% - 16px);padding:8px 10px;border-radius:14px;
  transition:background .2s,color .2s,transform .2s}
.mira .nav-i:hover{background:#F4F2FF;color:var(--text);transform:translateX(3px)}
.mira .nav-i:hover .ni{transform:rotate(-10deg) scale(1.1);box-shadow:0 10px 18px -8px var(--n2),inset 0 1px 0 rgba(255,255,255,.35)}
.mira .nav-i:active .ni{transform:scale(.92)}
.mira .nav-i.on{background:linear-gradient(135deg,rgba(123,97,255,.12),rgba(63,208,240,.12));color:#3B2A9E}
.mira .nav-i.on .ni{transform:scale(1.04)}
.mira .nav-sep{margin:8px 18px}

/* ダッシュボードの数字：グラデーションのカード。乗せると浮いて光が横切る */
.mira .dash-cards{gap:16px}
.mira .dash-card{position:relative;overflow:hidden;border:0;border-radius:22px;padding:18px 20px 16px;color:#fff;min-height:128px;
  background:linear-gradient(135deg,var(--c1),var(--c2));box-shadow:0 14px 30px -18px var(--c2);
  transition:transform .3s cubic-bezier(.3,1.4,.5,1),box-shadow .3s;animation:dash-in .6s cubic-bezier(.2,.9,.3,1) both}
.mira .dash-card:nth-child(2){animation-delay:.07s}
.mira .dash-card:nth-child(3){animation-delay:.14s}
.mira .dash-card:nth-child(4){animation-delay:.21s}
@keyframes dash-in{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.mira .dash-card::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .8s ease;pointer-events:none}
.mira .dash-card:hover{transform:translateY(-5px) rotate(-.4deg);box-shadow:0 22px 38px -18px var(--c2)}
.mira .dash-card:hover::before{transform:translateX(120%)}
.mira .dc-open{--c1:#007CBE;--c2:#02C38D}
.mira .dc-unread{--c1:#FF9F43;--c2:#EC368D}
.mira .dc-solved{--c1:#414288;--c2:#3BB7A0}
.mira .dc-csat{--c1:#A882DD;--c2:#4E148C}
.mira .dash-l{display:inline-block;color:#fff;font-size:13px;font-weight:700;padding:4px 12px;border-radius:999px;
  background:rgba(255,255,255,.22);backdrop-filter:blur(6px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.mira .dash-v{font-size:40px;font-weight:800;margin-top:10px;letter-spacing:.01em;text-shadow:0 2px 10px rgba(0,0,0,.12);font-variant-numeric:tabular-nums}
.mira .dash-n{color:rgba(255,255,255,.88);font-size:13px}
.mira .dash-card.warn .dash-v{color:#fff}
.mira .dash-card.warn .dash-l::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#fff;margin-right:6px;vertical-align:1px;animation:dash-pulse 1.6s ease-in-out infinite}
@keyframes dash-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
.mira .dash-ic{position:absolute;right:-10px;top:-8px;width:96px;height:96px;color:#fff;opacity:.22;transform:rotate(8deg);
  transition:transform .5s cubic-bezier(.3,1.6,.5,1),opacity .3s}
.mira .dash-ic svg{width:100%;height:100%}
.mira .dash-card:hover .dash-ic{transform:rotate(-6deg) scale(1.1);opacity:.32}
.mira .dash-h{font-size:20px;font-weight:800;margin:10px 0 14px}

/* 絞り込みの丸ボタン */
.mira .fbtn{transition:background .2s,color .2s,border-color .2s,transform .2s,box-shadow .2s}
.mira .fbtn:not(.on):hover{border-color:#B9AEFF;color:#3B2A9E;background:#F7F5FF;transform:translateY(-1px)}
.mira .fbtn.on{box-shadow:0 8px 18px -10px #7B61FF}

/* 案件の行：乗せると左に色の帯、右に矢印 */
.mira .tk{position:relative;overflow:hidden;border-radius:16px;padding-right:40px}
.mira .tk::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,#7B61FF,#3FD0F0);
  transform:scaleY(0);transform-origin:center;transition:transform .25s ease}
.mira .tk::after{content:"›";position:absolute;right:14px;top:50%;font-size:26px;line-height:1;color:#7B61FF;opacity:0;
  transform:translate(-8px,-52%);transition:opacity .2s,transform .25s}
.mira .tk:hover{transform:translateX(3px)}
.mira .tk:hover::before{transform:scaleY(1)}
.mira .tk:hover::after{opacity:1;transform:translate(0,-52%)}
.mira .tk.is-unread::before{transform:scaleY(1);background:linear-gradient(180deg,#FF9F43,#EC368D)}

/* 主ボタン（ポップアップの中も）：グラデーションが流れる */
.mira .btn.primary:not(.gbtn){border:0;background:linear-gradient(110deg,#7B61FF,#3FD0F0 55%,#7B61FF);background-size:220% 100%;background-position:0 0;
  transition:background-position .7s ease,transform .2s,box-shadow .2s}
.mira .btn.primary:not(.gbtn):hover{background-position:100% 0;box-shadow:0 12px 24px -12px #7B61FF}
.mira .btn.rf:hover{color:#3B2A9E;background:#F7F5FF}

/* 使用量のゲージ */
.mira .quota-fill{background:linear-gradient(90deg,#7B61FF,#3FD0F0)}

@media (prefers-reduced-motion: reduce){
  .mira .ni,.mira .nav-i,.mira .dash-card,.mira .dash-card::before,.mira .dash-ic,.mira .tk,.mira .tk::before,.mira .tk::after,.mira .fbtn{transition:none;animation:none}
  .mira .nav-i:hover,.mira .dash-card:hover,.mira .tk:hover{transform:none}
  .mira .dash-card.warn .dash-l::before{animation:none}
}

/* ===== 運営管理（v0.95.0・/platform）===== */
.pf{max-width:1180px}
.pf-page .topbar-in{max-width:1180px}
.pf-sum{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:0 0 16px}
.pf-kpi{background:linear-gradient(135deg,#629460,#C9B83A);color:#fff;border-radius:16px;padding:12px 16px;box-shadow:0 10px 22px -16px #629460}
.pf-kpi span{display:block;font-size:13px;opacity:.9}
.pf-kpi b{font-size:26px;font-weight:800}
.pf-tools{gap:10px;margin:0 0 12px}
.pf-tools input,.pf-tools select{width:auto;margin:0;height:42px;padding:8px 12px}
.pf-tools input{flex:1;min-width:200px}
.pf-card{overflow-x:auto}
.pf-tbl td{white-space:nowrap}
.pf-row{cursor:pointer;transition:background .15s}
.pf-row:hover,.pf-row:focus-visible{background:#F6F9EF;outline:none}
.pf-h3{font-size:16px;margin:0}
.hl-st.pf-trial{background:#FEF3C7;color:#92400E}
.hl-st.pf-stop{background:#FEE2E2;color:#B91C1C}
.pf-tabs{display:flex;gap:6px;margin:4px 0 18px;border-bottom:2px solid var(--line)}
.pf-tabs button{all:unset;cursor:pointer;padding:10px 18px;font-weight:700;font-size:15px;color:var(--muted);border-radius:10px 10px 0 0;margin-bottom:-2px;border-bottom:3px solid transparent;transition:color .2s,background .2s,border-color .2s}
.pf-tabs button:hover{color:#2F6B3A;background:#F6F9EF}
.pf-tabs button[aria-selected="true"]{color:#2F6B3A;border-bottom-color:#629460}
.pf-tabs button:focus-visible{outline:2px solid #629460;outline-offset:-2px}
.pf-soon{margin:-6px 0 14px;font-size:13px;color:var(--muted)}
.pf-mock{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 0 16px}
.pf-mcard{border:1px dashed #B7C9A8;border-radius:16px;padding:16px;background:#FAFCF6}
.pf-mcard span{display:block;font-size:13px;color:var(--muted)}
.pf-mcard b{display:block;font-size:26px;margin-top:6px;color:#9CA3AF}
.pf-chart{height:220px;display:grid;place-items:center;border-style:dashed;color:var(--muted);font-size:14px}
.pf-del-open{margin-top:16px;text-align:right}
.pf-del{margin-top:22px;border:1px solid #FECACA;background:#FEF2F2;border-radius:14px;padding:16px 18px}
.pf-del h4{margin:0 0 6px;color:#B91C1C;font-size:15px}
.pf-del p{margin:0 0 12px;font-size:13px;color:#7F1D1D;line-height:1.7}
.pf-del-form{display:grid;grid-template-columns:1fr 220px auto;gap:12px;align-items:end}
.pf-del-form label{display:flex;flex-direction:column;gap:6px;margin:0;font-size:13px;font-weight:700;color:#7F1D1D}
.pf-del-form input{margin:0;height:42px;padding:8px 12px;background:#fff}
.pf-del-btn{height:42px;border:0;border-radius:999px;padding:0 24px;color:#fff;font-weight:700;background:linear-gradient(110deg,#DB5375,#B4232F);transition:transform .2s,box-shadow .2s,opacity .2s}
.pf-del-btn:hover:not([disabled]){transform:translateY(-2px);box-shadow:0 12px 24px -12px #B4232F}
.pf-del-btn[disabled]{opacity:.4;cursor:not-allowed}
td.pf-due{color:#B91C1C;font-weight:700}
td.hash{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px}
@media (max-width:720px){ .pf-sum{grid-template-columns:repeat(2,1fr)} }
@media (max-width:720px){ .pf-del-form{grid-template-columns:1fr} .pf-mock{grid-template-columns:repeat(2,1fr)} }