/* 賃貸管理 業務UI スタイル。UI/IESORA賃貸管理.dc.html のプロトから移設。
追加分（ログイン・フォーム・インポート・メッセージ）は末尾の app additions 節以降。
このファイルの見出しコメントに、コメントの開始記号・終了記号を例として書かないこと。CSS のコメントは入れ子にできない。
以前ここに末尾の app additions 節をコメント記号つきで例示しており、最初の終了記号で
コメントが閉じ、残りが不正な CSS になって、直後の universal 規則
（box-sizing:border-box）が丸ごと捨てられていた。
その結果アプリ全体が content-box で動いており、width:100% の入力欄が padding と
border の分だけ親からはみ出していた（物件一覧表の日付欄が 14px 欠ける、で発覚）。
ブラウザの cssRules に universal 規則が存在しないことを実測して判明。
CssUniversalRuleTests が生存を固定する。 */
*{box-sizing:border-box}
/* カスタムプロパティは :root に置く。**.app に置いてはいけない。**
ログイン画面（registration/login.html）は base_app.html を継承しない独立テンプレートで、
.login-wrap は .app の**外**にある。変数を .app スコープに置くと、ログイン画面では
var(--line) 等が未定義になる。未定義の var() を含む宣言は
*invalid at computed-value time* となり、**プロパティごと初期値へ落ちる**ため:
- .fld input の border が none になって**入力欄が消える**
- .login-wrap の background が transparent になって**真っ白**になる
- .btn-p は background だけ失い color:#fff が残って**白地に白のログインボタン**になる
- .logo の背景が消えて青い「IE」ロゴが出ない
実際に本番（chintai.iesora.com）でもこの状態だった。LoginPageCssTests が固定している。 */
:root{
/* 面と線。会計ソフト（freee 請求書）の実測に寄せた中間グレー。
元は赤味の強い暖色グレー（#f0eded / #e1dcdc）だった。 */
--bg:#f2f2f2;--surface:#fff;--line:#dcdcdc;--line2:#e8e8e8;
--ink:#323232; /* rgb(50,50,50) — freee の本文色と同値 */
--ink2:#6b6b6b;--ink3:#8c8c8c;
--accent:#285ac8; /* rgb(40,90,200) — freee のアクセント青と同値 */
--accent-d:#1e46aa;--accent-bg:#ebf3ff;
/* 意味色。以前は8組が各ルールとインライン style に直書きで散っていた。
色を変えるのに grep が要る状態＝トークンが無い状態。 */
--red:#a51428;--red-bg:#fad2d7;
--green:#006e2d;--green-bg:#cdebd7;
--amber:#825a0f;--amber-bg:#fff0d2;
--blue:#285ac8;--blue-bg:#dce8ff;
--violet:#5a2daa;--violet-bg:#e6d7fa;
--teal:#008c8c;--teal-bg:#cdf0f0;
--gray:#6b6b6b;--gray-bg:#f0eded;
--ok:#00963c; /* 進捗バー・トーストの成功 */
/* 角丸。freee は 8px が標準で、小物（チップ・タグ）だけ 4px。
元は 3/4/6/8px が混在していた。 */
--r:8px;--r-sm:4px;
/* ボタンの角丸。親CRM（iesora.com / shadcn ベース）は --radius:.625rem で、
ボタンは中間の 8px 相当。**形だけ**合わせるための専用トークンで、
チップ・タグ等の小物は従来どおり --r-sm(4px) のまま。配色は変えない
（アクセント青 #285ac8 は据え置き＝Freee風の既存方針を維持）。 */
--r-btn:8px;
/* 余白。4の倍数（8px グリッド）。元は 6/8/10/12/14/18/22px が場当たりだった。 */
--sp-1:4px;--sp-2:8px;--sp-3:16px;--sp-4:24px;
/* カードは枠線ではなく影で背景から浮かせる（freee の作り）。 */
--shadow:0 2px 8px rgba(0,0,0,.14);
--shadow-lg:0 6px 16px rgba(0,0,0,.18);
}
/* フォントは**OS のゴシックだけ**。外部 Web フォントを読まない。
freee も独自 Web フォントを読み込まず OS のゴシックをそのまま使っている。
以前は Google Fonts から Noto Sans JP を読んでいたが、
- 外部依存を避ける既存方針と矛盾していた（郵便番号は posuto をローカル同梱、
JS も CDN 非使用で通しているのにフォントだけ外部だった）
- ページを開くたびに利用者の IP が Google に渡っていた
- フォント待ちで初回表示が遅れていた
ので削除した（base_app.html / registration/login.html の link も同時に撤去）。
ウェイトは **300 / 400 / 700 の3段だけ**使う（freee の実測）。
太さで「操作できる(700) / 情報(400)」を表し、中間の 500/600 は使わない。
文字色とフォントは body に置く（.app に置くとログイン画面が素の既定フォントになる）。
背景・レイアウトはアプリシェル固有なので .app に残す。 */
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Hiragino Kaku Gothic ProN","Hiragino Sans","Meiryo",Arial,sans-serif;color:var(--ink);font-size:13px;-webkit-font-smoothing:antialiased}
.app{background:var(--bg);height:100vh;display:flex;overflow:hidden}
.mono{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.muted{color:var(--ink2)}.muted3{color:var(--ink3)}
/* **position/z-index が load-bearing。** 図面作成のフライアウト子メニューは
.side の中にあり右へはみ出す。.main は DOM で .side の後に来るので、
z-index を上げないと本文がフライアウトを覆う（同じ stacking 文脈で後勝ち）。
overflow は付けない —— 付けると子メニューがサイドバー幅で切れる。 */
.side{width:234px;flex:none;background:#fff;border-right:1px solid var(--line);display:flex;flex-direction:column;padding:14px 10px;position:relative;z-index:40}
.brand{display:flex;align-items:center;gap:10px;padding:6px 8px 14px}
.logo{width:32px;height:32px;border-radius:var(--r);background:var(--accent);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:13px;letter-spacing:-.02em}
.brand-t{font-weight:700;font-size:15px;letter-spacing:0}.brand-s{font-size:10px;color:var(--ink3);font-weight:700;letter-spacing:.04em}
.navlbl{font-size:10.5px;font-weight:700;color:var(--ink3);letter-spacing:.06em;padding:14px 10px 6px}
.nav{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-sm);font-size:13.5px;font-weight:400;color:var(--ink2);cursor:pointer;user-select:none;border-left:3px solid transparent}
.nav:hover{background:var(--line2);color:var(--ink)}
.nav.on{background:var(--accent-bg);color:var(--accent);font-weight:700;border-left-color:var(--accent)}
.nav .ic{width:17px;height:17px;flex:none}
.nav .badge{margin-left:auto;font-size:11px;font-weight:700;background:var(--line2);color:var(--ink2);padding:0 7px;border-radius:9px}
.nav.on .badge{background:var(--blue-bg);color:var(--accent)}
/* --- 図面作成のフライアウト子メニュー ------------------------------------
ホバー / focus-within で右へ子メニューを開く。**JS 無しで動く**
（キーボードは tabindex の focus-within、タッチは親を tap→focus で開く）。
画面左端のサイドバーなので子メニューは**右**へ出す（左だと画面外）。 */
.navgroup{position:relative;border-radius:var(--r-sm)}
.navgroup:focus{outline:none}
.navgroup:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.navparent .navcaret{width:15px;height:15px;flex:none;margin-left:auto;
opacity:.6;transition:transform .12s ease}
.navgroup:hover .navcaret,.navgroup:focus-within .navcaret{transform:translateX(2px);opacity:1}
.navflyout{position:absolute;left:100%;top:-4px;min-width:184px;
background:#fff;border:1px solid var(--line);border-radius:var(--r);
box-shadow:0 8px 28px rgba(0,0,0,.14);padding:6px;margin-left:6px;
opacity:0;visibility:hidden;transform:translateX(-4px);
transition:opacity .12s ease,transform .12s ease,visibility .12s;z-index:45}
/* ホバーの橋渡し。親と子メニューの 6px の隙間でホバーが切れないよう、
透明な帯で繋ぐ（隙間に入るとメニューが消える定番バグを防ぐ）。 */
.navflyout::before{content:"";position:absolute;left:-8px;top:0;width:8px;height:100%}
.navgroup:hover .navflyout,.navgroup:focus-within .navflyout{
opacity:1;visibility:visible;transform:translateX(0)}
.navflyout-h{font-size:10.5px;font-weight:700;color:var(--ink3);
letter-spacing:.06em;padding:6px 10px 8px}
.navsub{display:flex;align-items:center;gap:10px;padding:8px 10px;
border-radius:var(--r-sm);font-size:13.5px;font-weight:400;color:var(--ink2);
border-left:3px solid transparent}
.navsub .ic{width:17px;height:17px;flex:none}
.navsub:hover{background:var(--line2);color:var(--ink)}
.navsub.on{background:var(--accent-bg);color:var(--accent);font-weight:700;border-left-color:var(--accent)}
.ext{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-sm);font-size:13px;font-weight:400;color:var(--ink3);cursor:default;border-left:3px solid transparent}
.ext .ic{width:16px;height:16px;flex:none;opacity:.7}
.ext .lk{margin-left:auto;font-size:9px;font-weight:700;color:var(--ink3);border:1px solid var(--line);padding:1px 5px;border-radius:var(--r-sm)}
.side-foot{margin-top:auto;padding-top:10px;border-top:1px solid var(--line2)}
.sso{display:flex;align-items:center;gap:9px;padding:8px}
.uava{width:30px;height:30px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;color:#fff}
.ssobadge{display:inline-flex;align-items:center;gap:4px;font-size:9.5px;font-weight:700;color:var(--accent);background:var(--accent-bg);padding:2px 6px;border-radius:var(--r-sm);margin-top:3px}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{height:56px;flex:none;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;padding:0 22px}
.h1{font-size:16px;font-weight:700;letter-spacing:0}.h1s{font-size:12px;color:var(--ink3);font-weight:400;margin-left:2px}
.search{display:flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:7px 11px;width:220px}
.search:focus-within{border-color:var(--accent)}
.search input{border:0;background:none;outline:0;font:inherit;font-size:13px;width:100%;color:var(--ink)}
.sel{appearance:none;border:1px solid var(--line);background:#fff;border-radius:var(--r-sm);padding:7px 28px 7px 11px;font:inherit;font-size:12.5px;font-weight:400;color:var(--ink2);cursor:pointer;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 9px center}
/* 形状は親CRM（iesora.com）に寄せる: 角丸 8px・横余白広め。色は据え置き。
ウェイトは 700 のまま（300/400/700 の3段だけ使うという既存方針。親は 500 だが
それは「形」ではなく配色/タイポの方針差なので取り込まない）。 */
.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:#fff;border-radius:var(--r-btn);padding:8px 16px;font:inherit;font-size:12.5px;font-weight:700;color:var(--ink2);cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--line2)}.btn .ic{width:15px;height:15px}
.btn-p{background:var(--accent);border-color:var(--accent);color:#fff}.btn-p:hover{background:var(--accent-d)}
.btn-sm{padding:6px 12px;font-size:11.5px}
/* 破壊的操作（削除）。**親の赤(#d4183d)は取り込まず**アプリ既存の --red を使う
（配色は据え置きという方針。形と役割だけ揃える）。既定は控えめな輪郭で、
hover で初めて赤面になる ＝ 一覧に赤いボタンが並ばない。 */
.btn-danger{color:var(--red)}
.btn-danger:hover{background:var(--red-bg);border-color:var(--red)}
/* 絞り込みの切替（賃借人一覧の 在籍中/退去済み/すべて）。.topbar は gap:14px の
flex なので、束ねる箱を作らないと 3 つのボタンが別々に離れて並ぶ。 */
.seg{display:inline-flex;gap:4px}
.spacer{flex:1}
.wrap{flex:1;overflow:auto;padding:18px 22px 34px}
/* 滞納と未入金を分けた分 6 枚。列数は KPI の枚数と一致させること
（dashboard.html の .kpi を増減したらここも直す）。 */
.kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.kpi{background:var(--surface);border-radius:var(--r);padding:var(--sp-3);box-shadow:var(--shadow)}
.kpi-l{font-size:11.5px;font-weight:400;color:var(--ink2);display:flex;align-items:center;gap:6px}
.kpi-v{font-size:23px;font-weight:700;letter-spacing:-.01em;margin-top:6px;line-height:1;font-variant-numeric:tabular-nums}
.kpi-v small{font-size:12px;font-weight:700;color:var(--ink3);margin-left:3px}
.kdot{width:8px;height:8px;border-radius:50%}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px;align-items:start}
.panel{background:var(--surface);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.panel-h{padding:12px var(--sp-3);border-bottom:1px solid var(--line2);font-size:13px;font-weight:700;display:flex;align-items:center;gap:var(--sp-2);background:#fafafa}
.panel-h .rt{margin-left:auto;font-size:11px;font-weight:400;color:var(--ink3)}
.arow{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line2)}
.arow:last-child{border-bottom:0}
.arow .amt{margin-left:auto;font-weight:700;font-size:13px;font-variant-numeric:tabular-nums}
.pin{width:34px;height:34px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;flex:none;font-weight:700;font-size:11px}
.pin-red{color:var(--red);background:var(--red-bg)}.pin-gray{color:#6e6b6b;background:#f0eded}.pin-amber{color:var(--amber);background:var(--amber-bg)}
/* 一部入金（期日前に一部だけ入っている）。amber を使い回さないこと ——
払いすぎと同じ色になり、意味の違う2状態が見分けられなくなる。 */
.pin-blue{color:#285ac8;background:var(--blue-bg);font-size:9.5px}
.sectitle{font-size:12px;font-weight:700;color:var(--ink3);letter-spacing:.04em;margin:2px 0 10px}
.tbl{width:100%;border-collapse:separate;border-spacing:0;background:var(--surface);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.tbl th{text-align:left;font-size:11.5px;font-weight:700;color:var(--ink2);letter-spacing:.02em;padding:11px 15px;background:#fafafa;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:12px 15px;border-bottom:1px solid var(--line2);font-size:13px;vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.trow:hover td{background:#f7f9fd}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.chip{font-size:11px;font-weight:700;padding:2px 8px;border-radius:var(--r-sm);white-space:nowrap}
.chip-green{color:var(--green);background:var(--green-bg)}.chip-red{color:var(--red);background:var(--red-bg)}.chip-amber{color:var(--amber);background:var(--amber-bg)}.chip-gray{color:#6e6b6b;background:#f0eded}.chip-blue{color:#285ac8;background:var(--blue-bg)}.chip-violet{color:var(--violet);background:var(--violet-bg)}
.occ{display:inline-flex;align-items:center;gap:8px}
.occbar{width:56px;height:6px;border-radius:var(--r-sm);background:var(--line2);overflow:hidden}
.occbar i{display:block;height:100%;background:var(--ok);border-radius:var(--r-sm)}
.tag{font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:var(--r-sm)}
.tag-corp{color:#285ac8;background:var(--blue-bg)}.tag-indiv{color:#6e6b6b;background:#f0eded}
.free{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;color:var(--teal);background:var(--teal-bg);padding:2px 7px;border-radius:var(--r-sm)}
.subrow{font-size:11px;color:var(--ink3);margin-top:2px}
.recsum{display:flex;gap:22px;padding:13px 16px;background:#fff;border:1px solid var(--line);border-radius:var(--r);margin-bottom:14px;flex-wrap:wrap}
.recsum .it .l{font-size:10.5px;font-weight:700;color:var(--ink3)}
.recsum .it .v{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums;margin-top:3px}
.vac{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--green);background:var(--green-bg);padding:2px 8px;border-radius:var(--r-sm)}
/* modal */
.movl{position:fixed;inset:0;background:rgba(50,50,50,.5);z-index:50;display:flex;align-items:center;justify-content:center;animation:fade .16s ease;padding:24px}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{transform:translateY(8px);opacity:.4}to{transform:none;opacity:1}}
.modal{width:600px;max-width:100%;max-height:90vh;overflow-y:auto;background:#fff;border-radius:var(--r);box-shadow:0 0 2rem rgba(0,0,0,.1),0 .375rem .75rem rgba(0,0,0,.2);animation:pop .18s cubic-bezier(.22,.61,.36,1)}
.m-head{padding:20px 24px 4px}.m-title{font-size:18px;font-weight:700;letter-spacing:0}.m-sub{font-size:12.5px;color:var(--ink2);margin-top:4px}
.m-body{padding:16px 24px 4px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fld{display:flex;flex-direction:column;gap:6px}.fld.full{grid-column:1/-1}
.fld label{font-size:11px;font-weight:700;color:var(--ink2);letter-spacing:.02em}
.fld input,.fld select{border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 11px;font:inherit;font-size:13px;outline:0;background:#fff}
.fld input:focus,.fld select:focus{border-color:var(--accent)}
.fld select{appearance:none;cursor:pointer;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 11px center}
.roomhdr{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;margin-top:2px}
.roomhdr .l{font-size:12px;font-weight:700;color:var(--ink)}
.roomrow{grid-column:1/-1;display:grid;grid-template-columns:70px 1fr 62px 1fr 1fr 96px 26px;gap:8px;align-items:center}
.roomrow input,.roomrow select{border:1px solid var(--line);border-radius:var(--r-sm);padding:7px 8px;font:inherit;font-size:12px;outline:0;width:100%;background:#fff}
.roomrow select{appearance:none}
.rmx{border:1px solid var(--line);background:#fff;border-radius:var(--r-sm);width:26px;height:30px;cursor:pointer;color:var(--red);font-weight:700}
.roomlbls{grid-column:1/-1;display:grid;grid-template-columns:70px 1fr 62px 1fr 1fr 96px 26px;gap:8px;font-size:9.5px;font-weight:700;color:var(--ink3);letter-spacing:.02em;margin-bottom:-6px}
.addroom{grid-column:1/-1;border:1px dashed var(--accent);background:var(--accent-bg);border-radius:var(--r-sm);padding:8px;font:inherit;font-size:12px;font-weight:700;color:var(--accent);cursor:pointer}
.addroom:hover{background:var(--blue-bg)}
.m-foot{padding:18px 24px 22px;display:flex;justify-content:flex-end;gap:10px;margin-top:8px}
.hint{grid-column:1/-1;font-size:11.5px;color:var(--ink2);background:var(--accent-bg);border:1px solid var(--blue-bg);border-radius:var(--r-sm);padding:9px 11px;line-height:1.5}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#323232;color:#fff;padding:13px 18px;border-radius:var(--r);font-size:13px;font-weight:700;z-index:60;display:flex;align-items:center;gap:11px;box-shadow:0 .375rem .75rem rgba(0,0,0,.35);animation:toastin .25s cubic-bezier(.22,.61,.36,1)}
@keyframes toastin{from{transform:translate(-50%,14px);opacity:0}to{transform:translate(-50%,0);opacity:1}}
.toast .tico{width:20px;height:20px;border-radius:50%;background:var(--ok);display:flex;align-items:center;justify-content:center;flex:none}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
/* --- app additions（Django実装で追加） --- */
/* 本文中の注意書き。.msg は .msgs（position:fixed）のトースト用で黒背景なので流用しない。 */
.notice{display:flex;align-items:flex-start;gap:10px;margin-bottom:14px;padding:11px 14px;background:var(--amber-bg);border:1px solid #f0dcae;border-radius:var(--r-sm);font-size:12.5px;color:var(--ink);line-height:1.6}
.notice .chip{flex:none;margin-top:1px}
/* 月額総賃料（賃借人登録）。tenanttotal.js が hidden を外して値を入れる。
.formgrid の中に置くので全幅にする（.roomrow と同じ作法）。 */
.total-box{grid-column:1/-1;display:flex;align-items:baseline;gap:10px;margin-top:18px;padding:12px 14px;background:var(--accent-bg);border:1px solid var(--blue-bg);border-radius:var(--r-sm)}
.total-box .l{font-size:11.5px;font-weight:700;color:var(--ink2)}
.total-box .v{font-size:19px;font-weight:700;color:var(--accent);letter-spacing:-.01em}
.total-box .n{font-size:10.5px;margin-left:auto}
/* リンクとして機能する nav（プロトは div+onClick、実装は ） */
a.nav{ text-decoration:none }
a.nav:hover{ text-decoration:none }
.side a{ text-decoration:none }
/* ログイン画面 */
.login-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--bg); padding:24px }
.login-card{ width:360px; max-width:100%; background:var(--surface); border-radius:var(--r); padding:28px 26px; box-shadow:var(--shadow-lg) }
.login-card .logo{ margin-bottom:14px }
.login-card h1{ font-size:18px; font-weight:700; margin:0 0 4px }
.login-card p.sub{ font-size:12.5px; color:var(--ink3); margin:0 0 18px }
.login-card .fld{ margin-bottom:14px }
.login-card .btn-p{ width:100%; justify-content:center; padding:10px }
/* フォームページ（一覧と同じ余白のカード） */
/* hidden 属性を常に効かせる。
ブラウザ既定の [hidden]{display:none} は**UAスタイルシート**なので、
display を明示した作者スタイル（.roomrow / .inline-row は display:grid）に必ず負ける。
その結果 JS の `row.hidden = true` が無反応になり、号室の × を押しても行が消えなかった
（DELETE にはチェックが入るので、保存すると何の予告もなく行が消える状態だった）。
hidden は「この要素は関係ない」という意味の属性なので、常に勝たせるのが正しい。 */
[hidden]{ display:none !important }
/* 号室行の削除セル。JS 有効時は roomrows.js が .del-check を隠して .rmx を出す。
JS 無効時は DELETE チェックボックスがそのまま見えて機能する（縮退動作）。 */
.rmx-cell{ display:flex; align-items:center; justify-content:center }
.roomrow .rmx-cell input[type=checkbox]{ width:auto; margin:0 }
/* 行エラーは .formgrid の全幅に置く（.roomrow の直後に来る） */
.errlist.rowerr{ grid-column:1/-1; margin:0 0 4px }
/* ダッシュボードのアナウンス（更新・退去予定）。既存の .panel/.arow/.pin-* を流用 */
.panel.announce{ margin-bottom:14px }
.panel.announce .pin{ font-size:10px }
/* 号室行にぶら下がる折返し行（退去予定日）。7列グリッドに8列目を足すと
横幅制約が壊れてカードから飛び出すため、全幅の別行にする。 */
.roomsub{ grid-column:1/-1; display:flex; align-items:center; gap:8px;
margin:-2px 0 2px 70px; font-size:11px; color:var(--ink2) }
.roomsub label{ font-weight:700; white-space:nowrap }
.roomsub input{ border:1px solid var(--line); border-radius:var(--r-sm); padding:5px 8px;
font:inherit; font-size:12px; outline:0; background:#fff }
.roomsub input:focus{ border-color:var(--accent) }
/* メモ欄。プロトに textarea が無く .fld input,.fld select だけが定義されていたため、
textarea は UA 既定の見た目のままだった。input と同じ見た目に揃える。 */
.fld textarea{ border:1px solid var(--line); border-radius:var(--r-sm); padding:9px 11px; font:inherit;
font-size:13px; outline:0; background:#fff; resize:vertical; min-height:64px; width:100% }
.fld textarea:focus{ border-color:var(--accent) }
/* 横に長い表を包む。.tbl 自体の overflow:hidden は角丸クリップ用で、幅は制御できない。 */
.tblwrap{ overflow-x:auto }
/* インライン formset の1行（費用・連帯保証人・緊急連絡先）。
.roomrow の7列固定と違い項目数が多いので、2カラムの .formgrid を入れ子にして
右端に削除セルを置く。号室行と同じく width は親に従うので飛び出さない。 */
.inline-sec{ gap:10px }
.inline-row{ grid-column:1/-1; display:grid; grid-template-columns:1fr 26px; gap:8px;
align-items:start; border:1px solid var(--line2); border-radius:var(--r-sm); padding:10px 12px;
background:#fcfbfb }
.inline-row .inline-fields{ gap:10px }
.inline-row .rmx-cell{ align-items:flex-start; padding-top:14px }
.inline-add{ margin-top:2px }
/* フォーム内のボタン列（法人番号の検索など） */
.btnrow{ display:flex; gap:8px; align-items:center; flex-wrap:wrap }
/* インボイス登録番号の欄に「T」を固定表示する。ユーザは数字13桁だけ打つ
（保存値は従来どおり T+13桁。モデルもAPI連携も変えない）。
.fld select のシェブロンと同じ data URI 背景で描く。::before の絶対配置にすると
ラベル・helptext・エラーの有無で .fld の高さが変わるたびに位置がずれるが、
背景なら input 自身に貼り付くので崩れない。 */
.fld-invoice_number input{
padding-left:26px;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;
background-position:left 11px center;
}
/* 法人番号の検索結果（クリックで各項目へ流し込む） */
.houjin-list{ display:flex; flex-direction:column; gap:4px; margin-top:8px;
max-height:260px; overflow-y:auto; border:1px solid var(--line); border-radius:var(--r-sm); padding:6px }
.houjin-item{ display:grid; grid-template-columns:1fr auto; gap:2px 10px; text-align:left;
border:1px solid transparent; background:#fff; border-radius:var(--r-sm); padding:7px 9px;
font:inherit; font-size:12.5px; cursor:pointer }
.houjin-item:hover{ background:var(--accent-bg); border-color:var(--blue-bg) }
.houjin-item .hn{ font-weight:700 }
.houjin-item .hm{ font-size:11.5px; color:var(--ink2) }
.houjin-item .ha{ grid-column:1/-1; font-size:11px }
.formcard{ background:var(--surface); border-radius:var(--r); padding:20px 22px; max-width:760px; box-shadow:var(--shadow) }
.formgrid{ display:grid; grid-template-columns:1fr 1fr; gap:14px }
.formgrid .full{ grid-column:1/-1 }
.form-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:18px }
.errlist{ color:var(--red); font-size:11.5px; list-style:none; padding:0; margin:4px 0 0 }
.helptext{ font-size:11px; color:var(--ink3); margin-top:4px }
/* Django messages（プロトの .toast を静的表示に） */
.msgs{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:60; display:flex; flex-direction:column; gap:8px }
.msg{ background:#323232; color:#fff; padding:12px 16px; border-radius:var(--r); font-size:13px; font-weight:700; box-shadow:0 .375rem .75rem rgba(0,0,0,.35) }
.msg.error{ background:var(--red) }
/* テーブル空表示 */
.empty{ padding:40px 16px; text-align:center; color:var(--ink3); font-size:13px }
/* ページ内リンクボタン列 */
.rowlink{ color:var(--accent); font-weight:700; font-size:12px; cursor:pointer; background:none; border:0; padding:0 }
/* 解除は元に戻す操作なので**アクセント色にしない**（隣の「請求書」と同じ見た目だと
取り違える）。意味色は既存トークンを使う（リテラル直書きにしない）。 */
.rowlink.danger{ color:var(--red) }
/* 入金日 ＋ 消込ボタンを1行に収める。日付欄は既定で 130px 前後の最小幅を持つので
潰さず確保する（マトリクスの日付セルと同じ理由）。 */
.payrow-form{ display:flex; align-items:center; gap:6px; margin-bottom:4px }
.payrow-date{ font:inherit; font-size:12px; padding:3px 5px; border:1px solid var(--line);
border-radius:var(--r-sm); background:#fff; color:var(--ink) }
.payrow-date:focus{ border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-bg); outline:0 }
/* ページネーション */
.pager{ display:flex; gap:8px; align-items:center; justify-content:flex-end; margin-top:14px; font-size:12.5px; color:var(--ink2) }
/* インポート レビュー：マッチ状態 */
.match-in{ color:var(--green) } .match-out{ color:var(--red) }
/* --- フォーカスと無効状態（Freee風の刷新で追加） --- */
/* :focus-visible がこのファイルに1つも無かった。キーボードだけで操作する利用者に
「いまどこにいるか」が見えない状態＝ WCAG 2.4.7 に反する。
:focus ではなく :focus-visible を使う（マウスのクリックで枠が出ない）。 */
:where(a, button, input, select, textarea, [tabindex]):focus-visible{
outline:2px solid var(--accent);
outline-offset:2px;
border-radius:var(--r-sm);
}
/* 無効なボタン。国税庁APIのアプリID未設定時などに disabled が実際に使われているが、
UA 既定任せで「押せそうに見える」状態だった。 */
.btn:disabled,.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn:disabled:hover,.btn[disabled]:hover{background:#fff}
/* --- 帳票（請求書・領収書）--- */
/* 左が入力、右がプレビュー（freee と同じ配置）。.formcard は max-width:760px を
持つので、この中では解除して列幅に従わせる。 */
.doc-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:var(--sp-3);align-items:start}
.doc-split .formcard{max-width:none}
.doc-preview{position:sticky;top:0;background:var(--surface);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.doc-preview-h{padding:12px var(--sp-3);border-bottom:1px solid var(--line2);font-size:13px;font-weight:700;display:flex;align-items:center;gap:var(--sp-2);background:#fafafa}
.doc-preview-h .rt{margin-left:auto;font-size:11px;font-weight:400}
.doc-preview-h .rt.err{color:var(--red)}
/* PDF.js の描画先。ページ canvas を縦に積む。スクロールで全ページ見る。 */
.doc-preview-canvas{height:70vh;overflow-y:auto;background:#525659;padding:var(--sp-2);display:flex;flex-direction:column;align-items:center;gap:var(--sp-2)}
.doc-preview-canvas .pdf-page{max-width:100%;box-shadow:var(--shadow);background:#fff}
.doc-preview-canvas:empty::before{content:"入力するとここにプレビューが出ます";color:#c8c8c8;font-size:12px;margin:auto}
/* 画面が狭いときは縦に積む（プレビューを潰さない） */
@media (max-width:1200px){
.doc-split{grid-template-columns:1fr}
.doc-preview{position:static}
}
.doc-preview-f{display:flex;align-items:center;gap:var(--sp-2);padding:10px var(--sp-3);border-top:1px solid var(--line2);font-size:11px;background:#fafafa}
/* --- 物件一覧表（着金・送金マトリクス）--- */
/* 列が月数×4 で非常に多いので横スクロールし、物件名と号室だけ左に貼り付ける。
.tbl は overflow:hidden を持つ（角丸のため）が、sticky はスクロール容器
（.mx-wrap）側で効くので競合しない。 */
/* **`.tbl` の `overflow:hidden` は `position:sticky` を殺す。**
角丸のために付いているものだが、sticky 要素の祖先に overflow:hidden があると
貼り付きが一切効かなくなる（「書いてあるのに効かない」状態になり、実際に
固定列もヘッダ固定も死んでいた）。角丸と影は**スクロール容器側**に移し、
表そのものは overflow:visible にする。 */
.mx-wrap{overflow:auto;max-height:calc(100vh - 190px);border-radius:var(--r);box-shadow:var(--shadow);background:var(--surface)}
.mx{border-collapse:separate;border-spacing:0;overflow:visible;border-radius:0;box-shadow:none}
.mx th{position:sticky;top:0;z-index:3}
.mx thead tr:nth-child(2) th{top:38px}
.mx .mx-mhead{text-align:center;border-left:2px solid var(--line2)}
.mx .mx-mhead.on{background:var(--accent-bg);color:var(--accent)}
.mx .mx-sub{font-size:10.5px;font-weight:400;color:var(--ink3);padding:6px 8px}
/* 左に固定する列。sticky は th/td の両方に要る。
**固定するのは「その行が誰か」を示す3列（物件名・号室・賃借人）だけ。**
行は賃借人（契約）単位なので、物件名だけ残しても同じ物件の別契約と区別できない。
left オフセットを積み上げる都合で、固定列は**左から連続**していなければならない
（テンプレートの列順もそれに合わせてある）。幅は固定値で、オフセットと一致させる。 */
.mx .mx-fix{position:sticky;background:var(--surface);z-index:2}
.mx thead .mx-fix{z-index:4;background:#fafafa}
.mx .mx-fix1{left:0;width:170px;min-width:170px}
.mx .mx-fix2{left:170px;width:60px;min-width:60px}
.mx .mx-fix3{left:230px;width:110px;min-width:110px;box-shadow:1px 0 0 var(--line)}
/* 口座情報は既定で隠す（横スクロール量を大きく減らす）。表示は列トグルで。 */
.mx.hide-acct .mx-acct{display:none}
.mx .trow:hover .mx-fix{background:#f7f9fd}
/* **行の高さを揃える。** 状態や口座情報が複数行になると行ごとに高さが変わり、
横スクロール中に目線が合わなくなる（実機で指摘）。情報列は1行に抑えて
はみ出しは省略記号にし、詳細は title 属性で見せる。 */
/* **`height` ではなく `min-height`。** 固定高だと、セル内で2行目に回った要素
（「ほかN件 / 計」の .subrow）が .mx-cell の overflow:hidden で**完全に隠れる**
（実機で 36.5px 切れているのを計測）。行の見た目の揃いは min-height で足りる。 */
.mx td{padding:4px 6px;min-height:44px;box-sizing:border-box}
.mx td,.mx th{white-space:nowrap}
.mx .mx-info{max-width:130px;overflow:hidden;text-overflow:ellipsis}
.mx .mx-acct{font-size:11px;max-width:180px;overflow:hidden;text-overflow:ellipsis}
/* 状態は「管理状態＋賃借人の状態」を1行に畳む（旧: 3行で行が伸びていた） */
.mx .mx-status{font-size:11px;line-height:1.35}
/* **列幅は入力欄の実寸に合わせる。** `` はブラウザ既定で
130px 前後の最小幅を持つため、セルを狭くすると入力欄がはみ出して隣の列と
重なる（実機で指摘）。日付セルは広め、金額セルは詰めて確保する。 */
.mx-cell{min-width:150px;width:150px;padding:5px 6px;overflow:hidden}
.mx-cell:not(.num){min-width:168px;width:168px}
.mx-in{min-width:0}
/* 読み取り専用の送金セル（同じ物件の2行目以降）。**入力欄が消えたように見せない** ——
淡い地と中央の「〃」で「ここでは編集しない」ことを明示する。 */
.mx-cell.mx-ro{background:#f4f4f4}
/* **編集できないことを見た目で伝える。** cursor:not-allowed とホバーの説明(title)で
「壊れている」ではなく「ここでは編集しない」と読ませる。 */
.mx-in:disabled{background:#eeeeee;border-color:var(--line2);color:var(--ink3);cursor:not-allowed}
.mx-cell.mx-ro{cursor:not-allowed}
/* **入力欄は常に枠と白背景を持たせる。**
表計算のように「枠を消して表へ溶かす」作りは、実際には
「どこが入力欄か分からない・入力できないように見える」になった（実機で指摘）。
編集できる場所は編集できるように見せる。 */
.mx-in{width:100%;border:1px solid var(--line);background:#fff;border-radius:var(--r-sm);padding:4px 6px;font:inherit;font-size:12px;color:var(--ink)}
.mx-in:hover{border-color:var(--ink3)}
.mx-in:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-bg);outline:0}
.mx-amt{text-align:right;font-variant-numeric:tabular-nums}
/* **突合の状態は入力欄の枠色で示す。**
セルを塗ると入力欄が沈んで「グレーで入力できない欄」に見え（実機で指摘）、
左端に帯を入れると当月の未入金行が縦に並んで**濃い縦線**に見えた（同）。
枠色なら入力欄であることが保たれたまま状態も分かる。
.chip-* は一覧のバッジ用で背景色を持つので、セル上では打ち消す。 */
.mx-cell[class*="chip-"]{background:transparent;box-shadow:none}
.mx-cell.chip-red .mx-amt{border-color:var(--red)}
.mx-cell.chip-gray .mx-amt{border-color:var(--ink3)}
.mx-cell.chip-amber .mx-amt{border-color:var(--amber)}
.mx-cell.chip-green .mx-amt{border-color:var(--green)}
.mx-cell.chip-blue .mx-amt{border-color:var(--blue)}
/* 保存の状態。成功は一瞬だけ緑、失敗は赤のまま残す（気付かず放置させない）。 */
.mx-cell.saving{background:var(--line2)}
.mx-cell.saved{background:var(--green-bg)}
.mx-cell.err{background:var(--red-bg);outline:1px solid var(--red)}
/* 保存していない（送金セルに金額が無いので行を作っていない）。
緑にすると「保存済み」に見えてしまい、リロードで消えて初めて気付く。 */
.mx-cell.pending{background:var(--amber-bg);outline:1px solid var(--amber)}
/* メモの印。列を増やさずセルの隅に置く。**既定は淡く**、メモがあるときだけ濃くする
（全セルに濃い印が並ぶと表が読めなくなる）。 */
/* メモ。**薄すぎて見えない/押せると分からない**という指摘を受け、輪郭のある
小さなボタンにした。既定でも視認でき、メモがあるときは塗りつぶして区別する。
入力欄と重ならないよう金額欄の右に余白を確保する（.mx-amt の padding-right）。 */
/* **入力欄の上に重ねない。** 絶対配置にしていたら金額の数字に被った（実機で指摘）。
セルを flex にして [入力欄][鉛筆] と横に並べる —— 重なりようがない作りにする。 */
.mx-cell.num{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
/* 「ほかN件 / 計」の注記は入力欄の**下**に回す（横に並ぶと欄が潰れる） */
.mx-cell.num .subrow{flex:1 0 100%;text-align:right}
/* **`flex:1 1 0` と `width:auto` にする。`flex:1 1 auto` では駄目。**
.mx-in は width:100% を持つため、flex-basis:auto がその 100% を基準にしてしまい、
入力欄だけで1行を占有 → 隣に置いたはずのメモ（✎）が2行目へ折り返し →
固定高＋overflow:hidden で**隠れる**（実機で 14px 切れているのを計測）。
basis を 0 にすれば入力欄が縮んでメモと同じ行に収まる。 */
.mx-cell.num .mx-in{flex:1 1 0;width:auto;min-width:0}
.mx-memo{flex:0 0 auto;
width:20px;height:22px;display:inline-flex;align-items:center;justify-content:center;
border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;
padding:0;font-size:11px;line-height:1;color:var(--ink2);cursor:pointer}
.mx-memo:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-bg)}
.mx-memo.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700}
/* 名前からの遷移。**下線は hover のときだけ**（全行に下線が並ぶと表が読みにくい）。 */
.mx-link{color:var(--ink);text-decoration:none}
.mx-link:hover{color:var(--accent);text-decoration:underline}
.mx-link.strong{font-weight:700}
/* メモのポップアップ。表の上に浮かせるので z-index は sticky 見出しより上。 */
.mx-pop{position:absolute;z-index:20;width:280px;background:var(--surface);
border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-lg);padding:var(--sp-2)}
.mx-pop-t{width:100%;border:1px solid var(--line);border-radius:var(--r-sm);
padding:6px 8px;font:inherit;font-size:12.5px;resize:vertical}
.mx-pop-t:focus{border-color:var(--accent);outline:0}
.mx-pop-f{display:flex;gap:var(--sp-1);align-items:center;margin-top:var(--sp-2)}
.mx-note{margin-bottom:10px;font-size:12px}
/* 絞り込みバー。行数が多い表なので、上部に常設して条件を見える形にする。 */
.mx-filter{display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap;margin-bottom:10px}
.mx-filter .mx-q{border:1px solid var(--line);border-radius:var(--r-sm);padding:7px 11px;font:inherit;font-size:12.5px;min-width:240px}
.mx-filter .mx-q:focus{border-color:var(--accent);outline:0}
.mx-toggle{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink2);cursor:pointer;white-space:nowrap}
/* --- 添付ファイル（一覧＋右プレビュー）--- */
/* 左=一覧、右=プレビュー。帳票（.doc-split）と同じ配置の考え方。 */
.att{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,380px);gap:var(--sp-3);align-items:start}
.att-main{min-width:0}
.att-ck{width:34px}
.att-row.on>td{background:var(--accent-bg)}
/* 改名は details で畳む（JS 無効でも開いて保存できる）。 */
.att-rename{display:inline-block;margin-left:var(--sp-2)}
.att-rename>summary{display:inline;list-style:none;cursor:pointer}
.att-rename>summary::-webkit-details-marker{display:none}
.att-rename-f{display:flex;gap:var(--sp-1);align-items:center;margin-top:var(--sp-1)}
.att-rename-f input{border:1px solid var(--line);border-radius:var(--r-sm);padding:5px 8px;font:inherit;font-size:12px;min-width:220px}
.att-rename-f input:focus{border-color:var(--accent);outline:0}
/* ドロップゾーン。JS があるときだけ .can-drop が付いて枠線が出る
（JS 無効時にドロップできそうな見た目にしない）。 */
.att-drop{border-radius:var(--r)}
.att-drop.can-drop{border:1.5px dashed var(--line);padding:var(--sp-3);transition:background .12s,border-color .12s}
.att-drop.can-drop.over{border-color:var(--accent);background:var(--accent-bg)}
.att-drop-hint{font-size:12px;color:var(--ink3);font-weight:700;margin-bottom:var(--sp-2)}
.att-preview{position:sticky;top:0;background:var(--surface);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.att-preview-h{padding:12px var(--sp-3);border-bottom:1px solid var(--line2);font-size:13px;font-weight:700;display:flex;align-items:center;gap:var(--sp-2);background:#fafafa}
.att-preview-h .rt{margin-left:auto;font-size:11px;font-weight:400}
.att-preview-h .rt.err{color:var(--red)}
.att-preview-body{height:60vh;overflow-y:auto;background:#525659;padding:var(--sp-2);display:flex;flex-direction:column;align-items:center;gap:var(--sp-2)}
.att-preview-body .pdf-page{max-width:100%;box-shadow:var(--shadow);background:#fff}
.att-preview-body .empty{color:#c8c8c8;margin:auto}
.att-preview-img{max-width:100%;box-shadow:var(--shadow);background:#fff}
@media (max-width:1200px){
.att{grid-template-columns:1fr}
.att-preview{position:static}
}
/* 送金フォームのオーナー絞り込み欄。select の直前に JS が挿す。 */
.ownerfind{width:100%;border:1px solid var(--line);border-radius:var(--r-sm);
padding:6px 9px;font:inherit;font-size:12.5px;margin-bottom:4px}
.ownerfind:focus{border-color:var(--accent);outline:0}
/* 募集フォームの「業者間のみ」枠。**画面でも顧客向けと区別する。**
models.BTOB_ONLY_LISTING_FIELDS が項目の定義で、ここは見た目だけ。 */
.btob-title{margin-top:22px;padding:6px 10px;border-radius:var(--r-sm);
background:#323232;color:#fff}
/* --- 設備の定型句ダイアログ（募集フォーム）--------------------------------
JS の上乗せなので、JS 無効なら開かない（設備欄は textarea のまま使える）。
配色・角丸はアプリ既存のトークンに従う。 */
.fdlg{border:0;border-radius:var(--r);padding:0;max-width:720px;width:92vw;
box-shadow:0 12px 40px rgba(0,0,0,.18);color:var(--ink);background:var(--surface)}
.fdlg::backdrop{background:rgba(0,0,0,.35)}
.fdlg-head{display:flex;align-items:center;justify-content:space-between;
padding:12px 16px;border-bottom:1px solid var(--line)}
.fdlg-body{padding:12px 16px;max-height:52vh;overflow-y:auto}
.fdlg-group{margin-bottom:14px}
.fdlg-cat{font-size:12px;font-weight:700;color:var(--ink3);margin-bottom:6px}
.fdlg-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:4px 10px}
.fdlg-item{display:flex;align-items:center;gap:6px;font-size:13px;
padding:3px 4px;border-radius:var(--r-sm);cursor:pointer}
.fdlg-item:hover{background:var(--bg)}
.fdlg-add{display:flex;gap:8px;padding:10px 16px;border-top:1px solid var(--line);
align-items:center;flex-wrap:wrap}
.fdlg-add input[type=text]{flex:1 1 220px;min-width:0}
.fdlg-foot{display:flex;gap:10px;align-items:center;justify-content:space-between;
padding:12px 16px;border-top:1px solid var(--line);flex-wrap:wrap}
/* --- 一覧から状態を変える（statusquick.js が select を差し込む）-----------
**保存できていないものを保存済みに見せない**（アプリ既存の規範）。
保存中は淡色、成功は緑を短時間、失敗は値を戻したうえで赤。 */
.sq-sel{font-size:12.5px;padding:3px 6px;border:1px solid var(--line);
border-radius:var(--r-sm);background:var(--surface);color:var(--ink);max-width:150px}
.sq-busy .sq-sel{opacity:.55}
.sq-ok .sq-sel{border-color:var(--green);box-shadow:0 0 0 2px var(--green-bg)}
.sq-err .sq-sel{border-color:var(--red);box-shadow:0 0 0 2px var(--red-bg)}
/* --- 図面プレビュー（PDF.js で canvas に描く）-----------------------------
ブラウザ内蔵の PDF ビューアを介さないので PDF 内の JS は実行されない。 */
.mpv{border:1px solid var(--line);border-radius:var(--r);background:var(--bg);
margin-bottom:16px;overflow:hidden}
.mpv-h{display:flex;align-items:center;gap:8px;padding:8px 12px;
border-bottom:1px solid var(--line);font-size:12px;font-weight:700;color:var(--ink3)}
.mpv-h .rt{margin-left:auto;font-weight:400}
.mpv-h .rt.err{color:var(--red)}
.mpv-canvas{padding:12px;overflow-x:auto;text-align:center}
.mpv-page{max-width:100%;height:auto;box-shadow:0 2px 10px rgba(0,0,0,.12);
background:#fff;margin-bottom:10px}
/* 設備を選ぶボタン。**`.fld` は縦フレックスなので、放っておくと子が stretch
されて全幅になり、入力欄と見分けが付かなくなる**（実機で確認）。 */
.fld > .fac-open{align-self:flex-start;margin-top:6px}