/* SalesBase — 販売管理 情報の並びは弥生販売に合わせ、見た目は今どきの Web に寄せている */ :root{ /* 色。 緑は「深い森」を基調に、明度差をはっきり付ける。 もとは中間色ばかりで、見出しと本文の差が出ず、のっぺり見えていた。 */ --green:#116b41; --green-d:#0a4c2e; --green-dd:#06381f; --green-l:#eaf5ee; --green-2:#12925233; --ink:#101815; --ink-2:#38443e; --sub:#657570; --line:#e3e9e6; --line-2:#ccd8d2; --bg:#f5f7f6; --white:#fff; --red:#c8402f; --amber:#b5790f; --blue:#2563eb; /* 入力欄の枠。--line-2 は面の区切り用で薄く、**打てる欄の輪郭には弱すぎた**。 打てる = 白＋この枠 / 打てない = --in-off、で見分けられるようにする。 2026-08-21 ktec 指摘「入力可能位置が見にくい」 */ --in-line:#93a99e; --in-off:#cbd3cf; --in-off-ink:#46534d; --accent:#116b41; /* 形。角の丸みを少し大きくして、今どきの見た目に寄せる */ --radius:14px; --radius-sm:10px; --radius-xs:7px; /* 影は 2 枚重ね（近い影＋遠い影）。1 枚だとべたっとして奥行きが出ない */ --shadow-1:0 1px 2px rgba(12,32,22,.06), 0 1px 1px rgba(12,32,22,.04); --shadow-2:0 6px 16px rgba(12,32,22,.09), 0 2px 4px rgba(12,32,22,.05); --shadow-3:0 18px 40px rgba(12,32,22,.16), 0 4px 10px rgba(12,32,22,.08); /* 文字。ここを直せば全体の大きさが揃って動く */ --fs:15px; } *{box-sizing:border-box} html,body{margin:0;padding:0} body{ /* 和文が主なので、和文フォントを先に置く。 游ゴシックは細すぎて業務画面では読みにくいので、Hiragino → Noto → Meiryo の順。 */ font-family:"Hiragino Kaku Gothic ProN","Noto Sans JP","Meiryo","Yu Gothic Medium", system-ui,-apple-system,sans-serif; background:var(--bg); color:var(--ink); font-size:var(--fs); line-height:1.7; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; font-feature-settings:"palt" 1; /* 和文の字詰め */ letter-spacing:.01em; } /* 数字は等幅にして桁を揃える。金額が並ぶ画面なので、ここが揃うと一気に読みやすい */ .num,.table .num,input.num,.yf-value,.yout.num{font-variant-numeric:tabular-nums} a{color:var(--green); text-decoration:none} a:hover{text-decoration:underline} /* ---- ヘッダ ---- */ .topbar{ display:flex; align-items:center; gap:24px; /* 平らな一色だと安っぽいので、上から下へわずかに沈ませる */ background:linear-gradient(180deg, #14764a 0%, var(--green) 55%, #0e6039 100%); color:#fff; padding:0 24px; height:58px; box-shadow:0 1px 0 rgba(255,255,255,.08) inset, 0 2px 10px rgba(8,48,28,.22); position:sticky; top:0; z-index:50; } /* ───────── ロゴ ───────── もとは白い文字だけ・19px で、しるしも色も無く、メニューの文字とベースラインも 1px ずれていた。しるしを足し、文字を大きくし、ベースラインを合わせる。2026-08-17 */ .brand{flex:none} .brand a{display:flex; align-items:center; gap:10px; height:58px; text-decoration:none} .brand a:hover{text-decoration:none} .brand-mark{width:34px; height:34px; flex:none; filter:drop-shadow(0 2px 4px rgba(0,0,0,.3)); transition:transform .14s ease} .brand a:hover .brand-mark{transform:translateY(-1px) scale(1.03)} .brand-word{font-weight:700; font-size:24px; letter-spacing:.005em; line-height:1; text-shadow:0 1px 3px rgba(0,0,0,.22)} .brand-word .bw-1{color:#fff} .brand-word .bw-2{color:#a8ecc4} /* 明るい緑。暗い帯の上で色が乗る */ @media (max-width:1100px){ .brand-word{font-size:20px} .brand-mark{width:30px;height:30px} } @media (max-width:760px){ .brand-word{display:none} } .mainnav{display:flex; gap:1px; flex:1} .navitem{position:relative} .navitem > a{ color:#dcefe3; padding:0 16px; height:58px; display:flex; align-items:center; gap:5px; white-space:nowrap; border-bottom:3px solid transparent; font-size:15px; font-weight:500; transition:background .12s, color .12s; } .navitem > a:hover{background:rgba(255,255,255,.12); text-decoration:none} .navitem.active > a{color:#fff; border-bottom-color:#fff; font-weight:600; background:rgba(0,0,0,.12)} .navitem .caret{font-size:12px; opacity:.7} .submenu{ display:none; position:absolute; left:0; top:58px; min-width:206px; z-index:60; background:#fff; border:1px solid var(--line); border-radius:0 0 var(--radius-sm) var(--radius-sm); box-shadow:var(--shadow-3); padding:6px; /* 項目が多いメニューは 2 列に流す。1 列だと 753px の帯になり、 下のほうは画面からはみ出して押せなかった */ max-height:calc(100vh - 70px); overflow:auto; } /* まとまり（見出し＋その中身）ごとに列にする。 columns で流すと見出しだけ取り残されるので使わない */ .navitem.has-sub.open .submenu.cols{display:flex; align-items:flex-start; gap:6px} .submenu.cols .sub-group{min-width:186px} .submenu.cols .sub-group + .sub-group{border-left:1px solid var(--line); padding-left:6px} /* 右端の項目は、開くと画面の外に出る。右寄せにする */ .navitem.flip .submenu{left:auto; right:0} /* もとは :hover で開いていた。マウスが通り過ぎただけで開き、 1px でも外れると閉じるので、下の項目を押しに行く途中で消えていた。 **押して開く**に変える（開いたままなので、選ぶまで消えない）。 2026-08-17 ktec 指摘「メニューが非常に使いづらい」より */ .navitem.has-sub.open .submenu{display:block} .navitem.has-sub.open > a{background:#fff; color:var(--green-d); border-bottom-color:#fff} .navitem.has-sub.open .caret{transform:rotate(180deg)} .navitem .caret{transition:transform .12s} .submenu a{ display:block; padding:9px 12px; color:var(--ink); font-size:14px; white-space:nowrap; border-radius:var(--radius-xs); } .submenu a:hover{background:var(--green-l); color:var(--green-d); text-decoration:none} .submenu a.cur{background:var(--green-l); color:var(--green-d); font-weight:600} .navtoggle{ display:none; background:none; border:1px solid rgba(255,255,255,.5); color:#fff; font-size:16px; border-radius:4px; padding:2px 9px; cursor:pointer; } .userbox{display:flex; align-items:center; gap:12px; white-space:nowrap; flex:none} /* メニューの項目名が長くなると（帳票レイアウト編集）、右側の店舗名・ログアウトが 画面の外へ押し出されていた。狭いときは順に畳む。2026-08-18 ※ ここに overflow:hidden を書いてはいけない。 ドロップダウンは .mainnav の中の position:absolute なので、**丸ごと切り取られる**。 一度これでメニューが全部開かなくなった。幅は min-width:0 と項目の省略だけで抑える。 */ .mainnav{min-width:0} .navitem > a{overflow:hidden; text-overflow:ellipsis} /* 帳票をトップから設定の中へ移して余裕ができたので、畳む幅を下げた。 1280px でも項目 393px に対して余り 308px あり、利用者名を出しても入る。2026-08-18 */ /* 🔴 プロ版は項目が 9 個（ホーム/見積/売上/レポート/仕入/在庫/台帳/設定/承認）あり、 1349px では **メニューが「画面を探す」欄と店舗名の上に重なっていた** （実測: .mainnav の幅 534px に対して中身は 673px）。 `.navitem` に min-width:0 が無いので縮まず、そのまま外へはみ出していた。 幅が足りないときは **詰める → 検索欄を細く → それでも足りなければ省略** の順で畳む。 2026-08-31 */ .navitem{min-width:0} @media (max-width:1460px){ .navitem > a{padding:0 11px; font-size:14px} .topbar{gap:16px} } @media (max-width:1240px){ .navitem > a{padding:0 8px} } @media (max-width:1150px){ .plan-tag{display:none} .topbar{gap:16px; padding:0 18px} } @media (max-width:1060px){ .uname{display:none} } @media (max-width:1000px){ .shop-name{max-width:120px; overflow:hidden; text-overflow:ellipsis; display:inline-block; vertical-align:bottom} } /* ───────── 画面を打って探す ───────── */ .navfind{position:relative; flex:none} .navfind input{width:170px; height:30px; margin:0; padding:0 10px; font-size:13px; border:1px solid rgba(255,255,255,.35); border-radius:15px; background:rgba(255,255,255,.14); color:#fff} .navfind input::placeholder{color:rgba(255,255,255,.7)} .navfind input:focus{width:250px; background:#fff; color:var(--ink); outline:none; border-color:#fff; transition:width .12s} .navfind input:focus::placeholder{color:var(--sub)} /* 上の width:170px より後ろに置くこと。前に書くと負ける（2026-08-31 実測）。 1349px（FWXGA）はメニューを詰めるだけで収まるので、細くするのは 1240px から。 */ @media (max-width:1240px){ .navfind input{width:118px} .navfind input:focus{width:230px} } .navfind-list{position:absolute; top:36px; right:0; min-width:290px; z-index:70; background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); box-shadow:var(--shadow-3); padding:5px; overflow:hidden} .nf-row{display:flex; align-items:baseline; gap:10px; padding:8px 11px; border-radius:var(--radius-xs); color:var(--ink); font-size:14px} .nf-row:hover,.nf-row.nf-on{background:var(--green-l); color:var(--green-d); text-decoration:none} .nf-name{flex:1; white-space:nowrap} .nf-where{flex:none; font-size:13px; color:var(--sub)} .nf-empty{padding:10px 12px; font-size:13px; color:var(--sub)} @media (max-width:1100px){ .navfind{display:none} } .uname{color:#dff0e5; font-size:14px} .logout{color:#fff; font-size:13px; border:1px solid rgba(255,255,255,.5); padding:3px 10px; border-radius:4px} .logout:hover{background:rgba(255,255,255,.15); text-decoration:none} /* 器の幅は **どの画面でも同じ**にして、真ん中に置く。 幅が画面ごとに違う（伝票 1700px / 台帳 1280px）と、 真ん中寄せでは左端も変わり、**画面を移るたびに中身が 160px 横へ跳ぶ**。 一度これを「左寄せ」で直したが、右に余白が全部寄って見た目が悪くなった （2026-08-26 ktec 指摘）。**幅を揃えれば、真ん中寄せのままで跳ねない。** 1700px は明細の広い伝票に合わせた値。狭い画面では max-width が効かず 画面いっぱいになるので、1368px のノートでもそのまま収まる。 */ .container{max-width:1700px; margin:0 auto; padding:24px 20px 100px} /* 下の余白 100px は、画面の下に貼り付けた操作バーのぶん。 これが無いと、明細のヒントや［＋ 行を追加］がバーの下に隠れる */ /* 画面の名前。左に緑の縦棒を置いて、どの画面にいるかが一目で分かるようにする */ .page-title{font-size:24px; margin:0 0 18px; font-weight:700; letter-spacing:.01em; display:flex; align-items:center; gap:11px; line-height:1.35} .page-title::before{content:""; width:5px; height:26px; border-radius:3px; background:linear-gradient(180deg, var(--green) 0%, var(--green-d) 100%)} .foot{text-align:center; color:var(--sub); font-size:13px; padding:24px} /* ---- カード ---- */ .card{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-1); padding:24px; margin-bottom:16px} /* 見出しと右のボタンを 1 行に並べる */ .card-head{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid var(--line); flex-wrap:wrap} .card-head .btn{flex:none} .card h2{font-size:16px; margin:0 0 16px; padding-bottom:12px; border-bottom:1px solid var(--line); color:var(--ink); letter-spacing:.02em; font-weight:700} .center{text-align:center} .empty{color:var(--sub); padding:20px 0; text-align:center} /* ---- 統計 ---- */ .stat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; margin-bottom:16px} .stat{ background:var(--white); border:1px solid var(--line); border-left:4px solid var(--green); border-radius:var(--radius); padding:14px 16px; display:flex; flex-direction:column; gap:4px; } .stat:hover{text-decoration:none; box-shadow:0 2px 8px rgba(0,0,0,.07)} .stat-label{font-size:13px; color:var(--sub)} .stat-value{font-size:28px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums} /* ---- テーブル ---- */ .table{width:100%; border-collapse:collapse; font-size:14px} /* 一覧の行。padding 11px で 1 行 47〜68px あり、**伝票一覧は 1 画面に 18 行**しか出なかった。 台帳は探して選ぶ画面で、たくさん見えるほど速い（弥生の一覧は 1 行 18px 前後）。 押せる高さ（24px）は保ちつつ詰める。2026-08-21 */ .table th,.table td{padding:5px 10px; border-bottom:1px solid var(--line); text-align:left; vertical-align:middle} .table tbody tr{height:30px} /* 一覧の中のボタンも小さすぎない大きさに（実測 51 個が 24px 未満だった） */ .table .btn,.table a.btn{min-height:24px; padding:2px 8px; font-size:12px; line-height:1.5} /* 行を選ぶチェックは 17px。**印を大きくすると行が太る**ので、 印はそのままに **押せる範囲をセルいっぱい**に広げる（WCAG 2.5.8 の「対象の大きさ」）。 */ .table td:has(> input[type=checkbox]), .table th:has(> input[type=checkbox]){padding:0; position:relative; width:34px; text-align:center} .table td > input[type=checkbox], .table th > input[type=checkbox]{position:relative; z-index:1; margin:0} .table td:has(> input[type=checkbox])::after, .table th:has(> input[type=checkbox])::after{content:''; position:absolute; inset:0; cursor:pointer} .table td:has(> input[type=checkbox]):hover{background:var(--green-l)} .table thead th{background:#f2f6f4; color:#4a5a54; font-weight:700; font-size:13px; letter-spacing:.04em; white-space:nowrap; border-bottom:2px solid var(--line-2)} /* ※ 見出しを画面に貼り付ける（position:sticky）のはやめた。 表は横スクロールする器（.table-wrap）の中にあり、貼り付く相手がその器になるため、 見出しが器の中で 58px 下がり、表の上に空の帯ができていた。2026-08-17 */ /* 行が多い一覧は目が滑るので、1 行おきにごく薄く敷く */ .table tbody tr:nth-child(even){background:#fbfcfb} .table tbody tr{transition:background .1s ease} .table tbody tr:hover{background:var(--green-l); box-shadow:inset 3px 0 0 var(--green)} .table .num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap} /* 主と従（件名と摘要）を上下に置く。空のほうは出さないので行が沈まない */ .cell-main{display:block; line-height:1.5} .cell-sub{display:block; line-height:1.45; margin-top:1px} .table .ellipsis{max-width:280px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .table-wrap{overflow-x:auto} /* 長い表で見出しを画面に貼り付ける。 137 行の売上明細表で下までスクロールすると、**どの列が何か分からなくなっていた。** `.table-wrap{overflow-x:auto}` があると器がスクロールの基準になり sticky が効かないので、 **横スクロールが要らない表だけ** overflow を戻す（判定は ux.js）。 上に貼り付く相手は画面。トップバー（sticky・高さ 56px）の下に置く。2026-08-21 */ .table-wrap.no-hscroll{overflow:visible} .table-wrap.no-hscroll thead th{position:sticky; top:56px; z-index:6; box-shadow:0 1px 0 var(--line-2)} /* ---- フォーム ---- */ label{display:block; margin-bottom:12px; font-size:14px; color:var(--sub)} input[type=text],input[type=password],input[type=email],input[type=date],input[type=number],select,textarea{ width:100%; padding:8px 11px; border:1px solid var(--in-line); border-radius:var(--radius-xs); font-family:inherit; font-size:15px; color:var(--ink); background:#fff; margin-top:4px; transition:border-color .12s ease, box-shadow .12s ease; } input:focus,select:focus,textarea:focus{outline:none; border-color:var(--green); box-shadow:0 0 0 3px var(--green-2)} /* 打てない欄は沈ませる。白いままだと「打てるのに反応しない」と思われる */ input[readonly],input:disabled,select:disabled,textarea[readonly],textarea:disabled{ background:var(--in-off); color:var(--in-off-ink); border-color:var(--line-2)} input::placeholder,textarea::placeholder{color:#a9b5b0} textarea{resize:vertical; line-height:1.5} /* 台帳（商品・得意先など）の入力フォーム。 ------------------------------------------------------------ もとは `minmax(300px,1fr)` の均等割りで、**敬称も郵便番号も会社名も全部 385px**。 実データで測った「要る幅」はこれだけ違う: 敬称 39px / 単位 47px / 役職 54px / 色 77px / 〒 84px / コード 99px TEL 122px / 型番 174px / 略称 197px / メール 249px / 会社名 317px 全部を最大の欄に合わせていたので、画面が縦に伸び（得意先で 3,719px＝画面 3 枚半）、 目が左右に大きく振られて打ちにくかった。 **12 列に割って、欄ごとに要るぶんだけ取る。** 2026-08-21 ktec 指摘「枠の大きさが必要なサイズと一致していない…コンパクトにまとまっていない」 */ /* 余白は 4 の倍数で揃える（8px グリッド）。 6px / 14px / 18px / 22px が混ざっていて、行ごとの間隔がわずかに揺れていた。 目には「揃っていない」としか映らないので、刻みを決める。2026-08-21 */ .form-grid{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:8px 16px} .form-grid > label,.form-grid > .fld{grid-column:span 4; min-width:0} /* ── 列の取り分は **4 / 8 / 12 の 3 つだけ** ── S=3列 / M=4列 / L=5列 / 一部 6列 と混ぜていたら、次の項目の開始位置が 205 / 507 / 607 / 808 / 909 / 1009px と **6 か所**に散らばり、 緑のラベル帯が島のように点在して、目が左右にジグザグしていた。 取り分を 4 の倍数だけにすると、開始位置は **3 か所**（0 / 4 / 8 列目）に定まり、 縦のラインが 3 本通る。1 列 = (カード内 1184 − 余白 32) ÷ 3 ≒ 384px、 その中に ラベル 80px ＋ 欄（最大 300px）が収まる。 2026-08-21 ktec 指摘「センスのかけらの１つもない」 */ .form-grid > label,.form-grid > .fld{grid-column:span 4} /* 2 列ぶん使う物（選択肢や中身が長い） */ .form-grid > label:has(select[name=doc_number_mode]), .form-grid > label:has(input[name=email]), .form-grid > label:has(input[name=url]), .form-grid > label:has(input[name=address1]), .form-grid > label:has(input[name=name]){grid-column:span 8} /* 3 列ぶん（1 行を丸ごと） */ .form-grid > label:has(input[name=note]), .form-grid > label:has(textarea), .form-grid > label.wide{grid-column:span 12} .form-grid > label.wide > select:not([name]), .form-grid > label.wide > input:not([name]){max-width:var(--fw-l)} /* ── 欄の幅は **3 段階だけ** ── 実測の「要る幅」にぴったり合わせたら、39/47/54/62/77/84/99/114/122/129/152/174/ 197/212/249/287/294/317/324px と **全部ばらばら**になり、縦のラインがどこにも通らなくなった。 数字は満たしていても、目には「揃っていない」としか映らない。 要る幅を **上の段階に丸める**。幅が 3 種類しかなければ、それだけで秩序が生まれる。 S = 120px（〜114: 敬称・単位・役職・サイズ・色・〒・コード・担当者・FAX・桁数） M = 200px（〜197: TEL・商品コード・カナ・型番・略称・金額） L = 320px（〜317: 住所・部署・メール・URL・会社名・商品名） 2026-08-21 ktec 指摘「枠の大きさの規則性…どれをとってもセンスがない」 */ /* ラベル帯 96px。13px の字で **6 文字**が 1 行に収まる幅（78px＋左右の余白 16px）。 80px にしていたら 5 文字でも折り返して、帯の高さ 32px から溢れていた （横幅は足りているのに縦に 2 行になる。実測 要る高 35px > 高 30px）。 */ :root{--fw-s:120px; --fw-m:200px; --fw-l:300px; --lbl-w:96px} /* ラベル帯は 96px を基本にしつつ、**3 段だけ**広げられるようにする。 96px 決め打ちだと「和文フォント（既定）」のような欄名が折り返してしまい、 意味を削って短くするしかなくなっていた（弥生も、台帳ごとにラベル列の幅が違う）。 段を 3 つに限るので、画面が変わっても目に映る規則性は保たれる。2026-08-25 */ .lbl-m{--lbl-w:128px} .lbl-l{--lbl-w:160px} .form-grid input[name=honorific],.form-grid input[name=title], .form-grid input[name=unit],.form-grid input[name=size],.form-grid input[name=color], .form-grid input[name=zip],.form-grid input[name=pack_qty], .form-grid input[name=qty_decimals],.form-grid input[name=price_decimals], .form-grid input[name=price_rate],.form-grid input[name=sort_no], .form-grid input[name=order_lot],.form-grid input[name=lead_time_days], .form-grid input[name=stock_optimal],.form-grid input[name=payment_day], .form-grid input[name=note_site],.form-grid input[name=credit_limit], .form-grid input[name=closing_day],.form-grid input[name=collect_day], .form-grid input[name=code]{max-width:var(--fw-s)} .form-grid input[name=tel],.form-grid input[name=fax], .form-grid input[name=contact_name],.form-grid input[name=name_kana], .form-grid input[name=model_number],.form-grid input[name=short_name], .form-grid input[name=client_code],.form-grid input[name=account_no], .form-grid input[name=bank_code],.form-grid input[name=branch_code], .form-grid input[name^=price],.form-grid input[name^=cost], .form-grid input[name^=list_price]{max-width:var(--fw-m)} .form-grid input[name^=price],.form-grid input[name^=cost], .form-grid input[name^=list_price]{text-align:right} .form-grid input[name=name],.form-grid input[name=address1], .form-grid input[name=address2],.form-grid input[name=department], .form-grid input[name=email],.form-grid input[name=url]{max-width:var(--fw-l)} /* 選ぶ欄も同じ段階に寄せる */ .form-grid select{max-width:var(--fw-l)} .form-grid select[name=deal_type],.form-grid select[name=price_type], .form-grid select[name=tax_class],.form-grid select[name=valuation], .form-grid select[name=staff_id],.form-grid select[name=category_id], .form-grid select[name=main_supplier_id], .form-grid select[name=line_type_hint]{max-width:var(--fw-m)} .form-grid textarea{max-width:calc(var(--fw-l) * 2); min-height:64px} /* メモなどの textarea は帯を上端に合わせる（中央に浮くと欄とずれて見える） */ .form-grid > label:has(textarea) > .fl{align-self:flex-start} /* 取りこぼしていた欄も段階に寄せる（391px / 290px という半端な幅が残っていた） */ .form-grid select[name$=_rounding],.form-grid select[name=tax_mode], .form-grid select[name=closing_group_id]{max-width:var(--fw-l)} .form-grid select[name=fee_bearer]{max-width:var(--fw-m)} /* ※ ここにあった `billing_mode` の例外（span 6 と max-width）は消した。 請求方式は得意先台帳を弥生の作りに組み直したときに `.ydaicho` へ移っており、 `.form-grid` の中にはもう無い＝**効いていない残骸**だった（画面で確認済み）。 こういう置き去りが、あとで新しい指定を後ろから打ち消す事故のもとになる。2026-08-25 */ .form-grid input[name=receipt_day],.form-grid input[name=note_site_days], .form-grid input[name=company_code],.form-grid input[name=price_rate]{max-width:var(--fw-s)} /* ── 伝票画面と同じ「ラベル（緑の帯）＋欄」に揃える ── ktec 指摘「売上伝票の入力画面と統一感が全くない」。 伝票は `.ylbl` + `.yin` を横に並べる作り。台帳だけラベルが上に付く 別のデザインで、同じアプリに見えなかった。 ラベルの文字は裸のテキストノードなので、`ux.js` が `` に包む。 2026-08-21 */ .form-grid > label{display:flex; align-items:stretch; gap:0; font-size:13px; color:var(--ink-2); line-height:1.2; min-width:0} .form-grid > label > .fl{ background:linear-gradient(180deg,#c4dbcb 0%,var(--y-lbl) 100%); border:1px solid var(--y-line); border-right:none; color:#12301c; font-size:13px; line-height:1.2; padding:5px 10px 5px 6px; flex:none; display:flex; align-items:center; justify-content:flex-end; text-align:right; /* **幅も高さも固定する。** 幅: 文字数なりに 72〜104px で伸び縮みし、欄の左端が行ごとにずれていた。 高さ: 説明文のある行で帯だけ 44〜62px に伸び、欄（32px）と上下が合っていなかった。 */ width:var(--lbl-w); height:32px; flex:none; align-self:flex-start; white-space:normal; word-break:auto-phrase; overflow:hidden} /* 6 文字を超える名前は字間を詰めて 1 行に収める（折り返して切れるより読める） */ .form-grid > label > .fl{font-size:13px; letter-spacing:-0.02em} .form-grid > label > .fl:has(> *),.form-grid > label > .fl{line-height:1.15} /* 欄は伝票の `.yin` と同じ。角丸なし・白・濃いめの枠。 **高さは 32px に固定。** input 30px / select 32px と揃っておらず、 さらにラベルが 2 行になる項目では欄まで 43〜62px に伸びて、行がガタガタだった。 （`align-items:stretch` で欄がラベルの高さに引きずられていた） */ .form-grid > label > input, .form-grid > label > select{height:32px; align-self:flex-start} .form-grid > label > input, .form-grid > label > select, .form-grid > label > textarea{ margin-top:0; padding:4px 8px; border-radius:0; border:1px solid var(--y-line-2); background:var(--y-in); font-size:14px; box-sizing:border-box; /* **basis を 0 にする。** auto のままだと欄が自分の幅を主張して、 ラベル帯と並ばず下に折り返していた（max-width が列幅より広い欄で必ず起きる）。 0 にすると列に入るだけ縮み、max-width は「これ以上は広げない」上限として効く。 */ flex:1 1 0; min-width:0} .form-grid > label > input:hover:not([readonly]):not(:disabled), .form-grid > label > select:hover:not(:disabled){border-color:var(--green)} .form-grid > label > input:focus, .form-grid > label > select:focus, .form-grid > label > textarea:focus{outline:2px solid var(--green); outline-offset:-2px; box-shadow:none} /* 欄の下に出す説明は、ラベルのぶん字下げして欄の真下に置く */ .form-grid > label{flex-wrap:wrap} .form-grid > label > .hint,.form-grid > label > small{ flex-basis:100%; margin-left:var(--lbl-w); font-size:12px; color:var(--sub); margin-top:1px} /* ラベル・欄のあとにボタンが続く物（郵便番号の［住所を入れる］など）。 ボタンが幅を主張して欄が下に折り返していた */ /* 選ぶ欄は、いちばん短い選択肢すら読めない幅まで縮ませない （「（自分自身）」が「（自分自」で切れていた） */ .form-grid > label > select{min-width:120px} .form-grid > label > .btn{flex:none; margin-left:6px; align-self:center; white-space:nowrap} .form-grid > label:has(> .btn) > input{flex:1 1 0} /* チェックボックスなど、包めなかった物は今までどおり */ .form-grid > label.fl-skip{display:flex; align-items:center; gap:6px; font-size:13px} .form-grid > label.fl-skip input[type=checkbox]{flex:none; margin:0} /* 欄の下に出す小さな説明は、欄にくっつける */ .form-grid > label .hint,.form-grid > label small{font-size:12px; color:var(--sub); margin-top:1px} /* 単価の表。 ここだけ「罫線の表」で、ほかの欄（緑のラベル帯＋白い欄）と様式が違い、 同じカードの中で別の画面のように見えていた。**帯の様式に合わせる。** 金額は実データの最大が 450,000 なので 9 桁も要らない。2026-08-21 */ .card table.table:has(input[name$="_ex"]){width:auto; min-width:0; border-collapse:separate; border-spacing:0 4px} .card table.table:has(input[name$="_ex"]) input{ max-width:var(--fw-m); text-align:right; margin-top:0; height:32px; box-sizing:border-box; border:1px solid var(--y-line-2); border-radius:0; background:var(--y-in); padding:4px 8px} .card table.table:has(input[name$="_ex"]) td, .card table.table:has(input[name$="_ex"]) th{padding:0 0 0 8px; border:none; vertical-align:middle} .card table.table:has(input[name$="_ex"]) th{ font-size:13px; color:var(--sub); font-weight:600; padding-bottom:4px; text-align:right} .card table.table:has(input[name$="_ex"]) th:first-child{text-align:right; padding-right:8px} /* 種別の名前を、ほかの欄と同じ緑の帯にする */ .card table.table:has(input[name$="_ex"]) td:first-child{ width:var(--lbl-w); min-width:var(--lbl-w); padding:0; background:linear-gradient(180deg,#c4dbcb 0%,var(--y-lbl) 100%); border:1px solid var(--y-line); border-right:none; color:#12301c; font-size:13px; line-height:1.15; text-align:right; height:32px; padding-right:10px} .card table.table:has(input[name$="_ex"]) td:first-child .hint{display:none} .card table.table:has(input[name$="_ex"]) td:nth-child(2) input, .card table.table:has(input[name$="_ex"]) td:nth-child(3) input{margin-left:0} .card table.table:has(input[name$="_ex"]) td:nth-child(2){padding-left:0} .card table.table:has(input[name$="_ex"]) th:first-child, .card table.table:has(input[name$="_ex"]) td:first-child{min-width:130px; white-space:nowrap} /* 「必須」の印。 ・流し込むと、その項目だけ右にずれて縦のラインが崩れる（左端 205px → 237px） ・絶対配置で帯に重ねたら、今度は **ラベルの文字と重なって読めなくなった** （「得意先コード」が「先コード」に見える） → **場所を食わない赤い縦線**にする。帯の左端 3px。一目で分かり、文字を邪魔しない。 2026-08-21 */ .form-grid > label.required{position:relative} .form-grid > label.required::before{content:none} .form-grid > label.required > .fl{ border-left:3px solid var(--red); padding-left:6px; font-weight:700} @media (max-width:900px){ /* 狭い画面では 4 列に割り直す（2→2、3→4、6→4、12→4 相当） */ .form-grid{grid-template-columns:repeat(4,minmax(0,1fr))} .form-grid > label,.form-grid > .fld{grid-column:span 2} .form-grid > label:has(input[name=name]), .form-grid > label:has(input[name=address1]), .form-grid > label:has(input[name=email]), .form-grid > label:has(input[name=url]), .form-grid > label:has(textarea){grid-column:span 4} } .form-actions{display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:14px 12px 12px; border-top:1px solid var(--line); margin:8px -12px 0; /* ［登録］が画面の外にあると、伝票 1 枚ごとに下までスクロールすることになる。 画面の下に貼り付けて、いつでも押せるようにする。2026-08-17 */ background:var(--white)} /* 画面の下に貼り付けるのは、［登録］があるときだけ。 ［戻る］しか無いバーまで貼り付くと、その上の内容に覆いかぶさる */ .form-actions:has(button[type=submit]){position:sticky; bottom:0; z-index:40; box-shadow:0 -3px 10px rgba(20,40,30,.06)} /* 1024px 幅では［登録］から［様式］までが 1 行に並びきらず、画面ごと横スクロールになっていた。 折り返して縦に伸ばす。押せる物が画面の外に出るのがいちばん困る。2026-08-17 */ @media (max-width:1150px){ .form-actions > span[style*="flex:1"]{flex-basis:100%; height:0} } .hint{font-size:13px; color:var(--sub); margin-top:2px} .required::before{content:"必須"; display:inline-block; margin-right:5px; padding:1px 5px; background:var(--red); color:#fff; font-size:12px; line-height:1.5; border-radius:3px; vertical-align:1px} /* ---- ボタン ---- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:9px 18px; border-radius:var(--radius-sm); border:1px solid var(--line-2); background:linear-gradient(180deg,#fff 0%,#f8faf9 100%); color:var(--ink-2); cursor:pointer; font-size:15px; font-family:inherit; font-weight:600; white-space:nowrap; box-shadow:var(--shadow-1); transition:background .12s ease, border-color .12s ease, box-shadow .12s ease, transform .08s ease; } .btn:hover{background:#f7faf8; border-color:var(--line-2); text-decoration:none; box-shadow:var(--shadow-2)} .btn:active{transform:translateY(1px); box-shadow:var(--shadow-1)} /* 押してほしいボタンは、地の色と文字の太さで一段はっきりさせる */ .btn-primary{background:linear-gradient(180deg,#158049 0%,var(--green) 60%,#0d6039 100%); border-color:#0d6039; color:#fff; font-weight:700; box-shadow:0 1px 0 rgba(255,255,255,.22) inset, var(--shadow-2)} .btn-primary:hover{background:linear-gradient(180deg,#127045 0%,var(--green-d) 100%); border-color:var(--green-dd)} .btn-danger{background:#fff; border-color:var(--red); color:var(--red)} .btn-danger:hover{background:var(--red); color:#fff} .btn-sm{padding:5px 11px; font-size:13px; border-radius:var(--radius-xs)} .btn-block{width:100%} /* ---- フラッシュ ---- */ .flash{padding:11px 15px; border-radius:var(--radius-sm); margin-bottom:14px; font-size:14px; border-left:3px solid; box-shadow:var(--shadow-1)} .flash-info{background:#eef6ff; border-color:var(--blue); color:#14417a} .flash-success{background:var(--green-l); border-color:var(--green); color:var(--green-d)} .flash-error{background:#fdecea; border-color:var(--red); color:#8c2318} .flash-warn{background:#fff8e6; border-color:var(--amber); color:#7a5210} /* ---- バッジ ---- */ .badge{display:inline-block; padding:1px 7px; border-radius:10px; font-size:13px; background:var(--green-l); color:var(--green-d); border:1px solid var(--green)} /* ---- ログイン ---- */ .login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(160deg,var(--green) 0%,var(--green-d) 100%); padding:20px} .login-card{background:#fff; padding:32px; border-radius:8px; width:100%; max-width:370px; box-shadow:0 10px 40px rgba(0,0,0,.25)} .login-card h1{margin:0; font-size:28px; color:var(--green); text-align:center; letter-spacing:.05em} .login-card .sub{margin:2px 0 22px; text-align:center; color:var(--sub); font-size:13px} /* ---- 棒グラフ ---- */ .bars{display:flex; flex-direction:column; gap:5px} .bar-row{display:grid; grid-template-columns:70px minmax(0,1fr) 110px; align-items:center; gap:10px; font-size:13px} .bar{background:#eef2f0; border-radius:3px; height:16px; overflow:hidden} .bar-fill{display:block; height:100%; background:linear-gradient(90deg,var(--green),#3aa35f)} .bar-value{text-align:right; font-variant-numeric:tabular-nums; color:var(--sub)} .bar-label{color:var(--sub)} /* ---- 明細エディタ ---- */ .lines{width:100%; border-collapse:collapse; font-size:14px} .lines th{background:var(--green-l); color:var(--green-d); padding:6px; font-size:13px; border:1px solid var(--line); white-space:nowrap} .lines td{border:1px solid var(--line); padding:0} .lines input,.lines select,.lines textarea{border:none; margin:0; border-radius:0; padding:6px} .lines input:focus,.lines select:focus{outline:2px solid var(--green); outline-offset:-2px} .lines .num input{text-align:right} .line-type-note{background:#fffdf2} .line-type-discount{background:#fdf3f2} .line-type-memo{background:#f2f6fd; color:var(--sub)} .line-type-subtotal{background:#eef2f0; font-weight:600} .toolbar{display:flex; gap:8px; align-items:center; margin-bottom:14px; flex-wrap:wrap} .toolbar .spacer{flex:1} .search-box{display:flex; gap:6px; align-items:center} .search-box input{width:220px} .totals{display:flex; justify-content:flex-end; gap:26px; padding:12px 4px; font-size:15px} .totals .t-item{text-align:right} .totals .t-label{font-size:13px; color:var(--sub); display:block} .totals .t-value{font-size:20px; font-weight:700; font-variant-numeric:tabular-nums} .totals .t-main .t-value{color:var(--green-d); font-size:24px} @media (max-width:980px){ .topbar{gap:10px; padding:0 10px; flex-wrap:wrap; height:auto; min-height:52px} .navtoggle{display:block; order:2; margin-left:auto} .userbox{order:3} .mainnav{order:4; flex-basis:100%; display:none; flex-direction:column; background:var(--green-d); margin:0 -10px; padding:4px 0} .mainnav.open{display:flex} .navitem > a{height:42px; padding:0 16px} .submenu{position:static; display:block; box-shadow:none; border:none; background:rgba(0,0,0,.18); border-radius:0; padding:0} .submenu a{color:#dff0e5; padding:7px 30px; font-size:13px} .submenu a:hover,.submenu a.cur{background:rgba(255,255,255,.12); color:#fff; box-shadow:none} .navitem .caret{display:none} .container{padding:12px} .uname{display:none} .form-grid{grid-template-columns:1fr} } @media print{ .topbar,.foot,.toolbar,.form-actions{display:none} body{background:#fff} .container{max-width:none; padding:0} } /* ---- 認証（ログイン／店舗選択）---- */ /* 左半分は一色の緑で寂しかったので、光の当たり方を足して奥行きを出す */ .auth-wrap{min-height:100vh;display:grid;grid-template-columns:1fr 440px; background: radial-gradient(1100px 700px at 18% 22%, rgba(255,255,255,.13) 0%, transparent 60%), radial-gradient(800px 600px at 85% 90%, rgba(0,0,0,.22) 0%, transparent 65%), linear-gradient(155deg,#178451 0%,var(--green) 42%,var(--green-dd) 100%)} .auth-wrap.single{grid-template-columns:1fr;place-items:center;padding:20px} .auth-brand{display:flex;flex-direction:column;justify-content:center;padding:0 8vw;color:#fff} .auth-brand .logo{display:flex;align-items:center;gap:16px; font-size:52px;font-weight:700;letter-spacing:.01em;line-height:1; text-shadow:0 2px 12px rgba(0,0,0,.22)} .auth-mark{width:64px;height:64px;flex:none;filter:drop-shadow(0 4px 12px rgba(0,0,0,.3))} .auth-brand .logo .bw-1{color:#fff} .auth-brand .logo .bw-2{color:#a8ecc4} .auth-brand .tag{margin:8px 0 32px;opacity:.9;font-size:16px;letter-spacing:.22em} .auth-brand .feat{list-style:none;padding:0;margin:0;opacity:.92;font-size:15px} .auth-brand .feat li{padding:9px 0 9px 26px;position:relative} .auth-brand .feat li::before{content:"";position:absolute;left:2px;top:16px;width:7px;height:7px; border-radius:50%;background:#8fe0b2;box-shadow:0 0 0 3px rgba(143,224,178,.22)} .auth-card{background:#fff;display:flex;flex-direction:column;justify-content:center;padding:44px 40px;box-shadow:-6px 0 30px rgba(0,0,0,.2)} .auth-wrap.single .auth-card{border-radius:10px;box-shadow:0 12px 44px rgba(0,0,0,.28);width:100%;max-width:440px;padding:36px} .auth-card.wide{max-width:560px} .auth-card h1{font-size:28px;margin:0 0 6px;color:var(--green-d);letter-spacing:.01em} .auth-card .sub{margin:0 0 20px;color:var(--sub);font-size:14px} .auth-note{margin-top:16px;font-size:13px;color:var(--sub);text-align:center} .chk{display:flex;align-items:center;gap:6px;font-size:14px;margin:14px 0} .chk input{width:auto} /* 店舗リスト */ .tenant-list{display:flex;flex-direction:column;gap:8px;margin:6px 0 4px;max-height:52vh;overflow-y:auto} .tenant-item{display:flex;align-items:center;gap:12px;margin:0;padding:13px 15px;border:1px solid var(--line);border-radius:6px;cursor:pointer;transition:.12s} .tenant-item:hover{border-color:var(--green);background:var(--green-l)} .tenant-item input{width:auto;margin:0;flex:none} .tenant-item:has(input:checked){border-color:var(--green);background:var(--green-l);box-shadow:inset 0 0 0 1px var(--green)} .ti-body{display:flex;flex-direction:column} .ti-name{font-size:16px;font-weight:600;color:var(--ink)} .ti-sub{font-size:13px;color:var(--sub)} /* ヘッダの店舗表示 */ .shop{display:flex;align-items:center;gap:6px;background:rgba(0,0,0,.18);padding:3px 8px 3px 10px;border-radius:12px} .shop-name{color:#fff;font-size:13px;font-weight:600;max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .shop-switch{color:#dff0e5;font-size:13px;border:1px solid rgba(255,255,255,.45);padding:1px 6px;border-radius:8px} .shop-switch:hover{background:rgba(255,255,255,.18);text-decoration:none} @media (max-width:900px){ .auth-wrap{grid-template-columns:1fr} .auth-brand{display:none} .auth-card{box-shadow:none} } .plan-tag{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:8px;font-size:12px; background:rgba(255,255,255,.2);color:#fff;vertical-align:middle} /* ---- ホーム（ダッシュボード）---- */ .dash-head{display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:16px; flex-wrap:wrap} .quick{display:flex; gap:8px; flex-wrap:wrap} .alerts{display:flex; flex-direction:column; gap:6px; margin-bottom:16px} .alert-item{display:flex; align-items:center; gap:9px; background:#fffaf0; border:1px solid #f0e2c0; border-left:3px solid var(--amber); border-radius:var(--radius-sm); padding:10px 15px; color:#7a5210; font-size:14px; box-shadow:var(--shadow-1)} .alert-item:hover{background:#fff3d6; text-decoration:none} .alert-dot{width:7px; height:7px; border-radius:50%; background:var(--amber); flex:none} .alert-go{margin-left:auto; font-size:16px; opacity:.6} .kpi-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px; margin-bottom:16px} /* 4 枚が同じ見た目で並ぶと、どれが大事か分からない。 上に細い色の線を入れて、数字そのものは大きく、説明は小さく。抑揚を付ける。2026-08-17 */ .kpi{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-1); padding:17px 19px 16px; display:flex; flex-direction:column; gap:4px; position:relative; overflow:hidden; transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease} .kpi::before{content:""; position:absolute; inset:0 0 auto 0; height:3px; background:linear-gradient(90deg, var(--green) 0%, #4fb07c 100%); opacity:.5} .kpi:nth-child(2)::before{background:linear-gradient(90deg,#2f7fbf 0%,#63add8 100%)} .kpi:nth-child(3)::before{background:linear-gradient(90deg,#b5790f 0%,#e0b45c 100%)} .kpi:nth-child(4)::before{background:linear-gradient(90deg,#6b7a74 0%,#a8b5b0 100%)} a.kpi:hover{text-decoration:none; transform:translateY(-2px); box-shadow:var(--shadow-2); border-color:var(--green)} .kpi-label{font-size:13px; color:var(--sub); font-weight:600; letter-spacing:.02em} .kpi-value{font-size:32px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; line-height:1.2; letter-spacing:-.02em} .kpi-unit{font-size:15px; font-weight:400; color:var(--sub); margin-left:3px} .kpi-sub{font-size:13px; color:var(--sub); line-height:1.55} .kpi-main{background:linear-gradient(155deg,var(--green-l) 0%,#fff 62%); border-color:#bcdfc9} /* 伝票の上に出す小さい版。ダッシュボードの 32px は伝票の中では大きすぎて、 入力欄より数字のほうが目立ってしまう。2026-08-27 */ .kpi-grid.kpi-sm{grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px; margin:4px 0 0} .kpi-sm .kpi{padding:9px 12px 10px; gap:1px} .kpi-sm .kpi::before{height:2px} .kpi-sm .kpi-label{font-size:12px} .kpi-sm .kpi-value{font-size:21px} .kpi-sm .hint{font-size:11px; line-height:1.4} .kpi-main::before{opacity:1; height:4px} .kpi-main .kpi-value{color:var(--green-d); font-size:37px} .kpi-sub .up{color:var(--green); font-weight:600} .kpi-sub .down{color:var(--red); font-weight:600} .dash-cols{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:16px; align-items:start} @media (max-width:980px){ .dash-cols{grid-template-columns:minmax(0,1fr)} } /* ---- ログイン等の認証画面 ---- */ .auth-body{background:var(--green-d)} .flash-float{position:fixed; top:14px; left:50%; transform:translateX(-50%); z-index:50; min-width:280px; max-width:90vw; box-shadow:0 4px 16px rgba(0,0,0,.25)} /* ================================================================== 伝票入力画面（弥生販売の伝票画面に合わせた配置） ================================================================== */ :root{ /* 面を 3 つに分けて、**打てる所が一目で分かる**ようにする。 打てる = 純白 ＋ はっきりした枠 打てない = 灰（読み取り・自動計算） ラベル = 緑 もとは罫線もラベルも入力欄も似た明るさで、どこに打てるのか分からなかった。 2026-08-21 ktec 指摘「入力可能位置が見にくい。コントラストをはっきり」 */ --y-line:#8aa697; /* 罫線。薄すぎてグリッドが消えていたので濃くした */ --y-line-2:#6b8d7a; /* 入力欄の枠。罫線よりさらに濃く＝ここが箱だと分かる */ --y-lbl:#b9d2c1; /* ラベル地。入力欄の白との差を広げた */ --y-bar:#0f6640; /* 見出し帯 */ --y-head:#d3e4d8; /* 明細ヘッダ地 */ --y-alt:#f7faf8; /* 明細の交互色。入力欄を白にしたぶん、ごく薄く */ --y-in:#ffffff; /* 打てる欄。**純白**（もとは薄クリームで地と紛れていた） */ --y-ro:#c2cec8; /* 打てない欄（読み取り・自動計算）。はっきり沈ませる */ --y-ro-ink:#5a6b62; /* 打てない欄の文字 */ } .ytitle{display:flex; align-items:baseline; gap:10px; margin-bottom:8px} .ytitle h1{font-size:20px; margin:0} .ytitle .ymode{font-size:15px; font-weight:400; color:var(--sub)} .ytitle .ydocno{font-family:ui-monospace,monospace; font-size:16px; color:var(--sub)} .ybar{background:linear-gradient(180deg,#12744a 0%,var(--y-bar) 100%); color:#fff; font-weight:700; font-size:14px; padding:7px 14px; border-radius:var(--radius-xs) var(--radius-xs) 0 0; letter-spacing:.1em; box-shadow:0 1px 0 rgba(255,255,255,.16) inset} /* ---- ヘッダ 2 ブロック ---- */ .yhead{display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:8px; align-items:start; border:1px solid var(--y-line); border-top:none; background:#f4f8f5; padding:6px; margin-bottom:10px} .yhead-l{display:flex; flex-direction:column; gap:1px; min-width:0} .yhead-r{display:flex; flex-direction:column; gap:8px} .yrow{display:flex; align-items:stretch; gap:2px; min-width:0} .yrow.ytop{margin-bottom:4px} .ylbl{background:linear-gradient(180deg,#c4dbcb 0%,var(--y-lbl) 100%); border:1px solid var(--y-line); color:#12301c; font-size:13px; line-height:1.2; padding:5px 9px; min-width:86px; text-align:right; display:flex; align-items:center; justify-content:flex-end; gap:3px; white-space:nowrap; flex:none} .ylbl.block{justify-content:flex-start; text-align:left; width:100%} .ylbl i{font-style:normal; color:#4c7a5c; font-size:12px} /* `input[type=text]` は属性セレクタのぶん .yin より強い。 要素名を付けて詳細度で勝たせないと、枠の色が効かなかった。2026-08-21 */ input.yin,select.yin,textarea.yin,.yin{ border:1px solid var(--y-line-2); background:var(--y-in); font-size:14px; padding:4px 8px; margin:0; border-radius:0; min-width:0; height:auto} .yin:focus{outline:2px solid var(--green); outline-offset:-2px; background:#fff} .yin:hover:not([readonly]):not(:disabled){border-color:var(--green); background:#fbfefc} /* 打てない欄は、打てる欄と見間違えないよう沈ませる */ input.yin[readonly],input.yin:disabled,textarea.yin[readonly],select.yin:disabled, .yin[readonly],.yin:disabled,.yin[readonly]:focus{ background:var(--y-ro); color:var(--y-ro-ink); border-color:var(--y-line)} /* 🔴 幅も `.yin` と同じで、**要素名を付けないと詳細度で負ける**。 上の 248 行あたりの `input[type=text]{width:100%}` は属性セレクタ（0-1-1）で、 クラスだけの `.w-mid`（0-1-0）より強い。そのため **`` の欄がすべて枠いっぱいに伸びていた** （伝票番号 108px→582px／敬称 104px→515px／請求書番号 168px→834px）。 `