/* デザイントークン（prototype/index.html を踏襲） */ :root { --ink: #1a1c20; --paper: #eceeed; --surface: #ffffff; --surface-2: #f6f7f6; --line: #d6dad8; --line-soft: #e6e9e7; --muted: #6b7075; --etc: #5b3d8f; --etc-soft: #efeaf7; --green: #0f7a4a; --green-soft: #e6f2ec; --amber: #a86300; --amber-soft: #fbf0dd; --red: #b3261e; --red-soft: #fbeae8; --link: #0b57d0; --r: 6px; --font: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif; } * { box-sizing: border-box; } html, body { font-family: var(--font); margin: 0; padding: 0; background: var(--paper); color: var(--ink); font-size: 15px; line-height: 1.6; -webkit-text-size-adjust: 100%; } .num { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } h2 { font-size: 17px; font-weight: 600; margin: 0 0 12px; letter-spacing: 0.01em; } h3 { font-size: 13px; font-weight: 600; margin: 0 0 8px; color: var(--muted); letter-spacing: 0.04em; } button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible { outline: 2px solid var(--etc); outline-offset: 2px; } /* ---- 鮮度表示（最終更新）と警告帯（R5） ---- */ .synced { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); font-size: 11.5px; color: var(--muted); padding: 5px 12px; margin-bottom: 12px; } .stale-warning { background: var(--amber-soft); border-left: 4px solid var(--amber); border-radius: 0 var(--r) var(--r) 0; color: var(--amber); font-size: 12.5px; padding: 9px 12px; margin-bottom: 12px; } /* ---- 集計タイル ---- */ .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 18px; } /* タスク一覧の状況タイル（未対応/確認中/保留/完了の4枚。狭い画面は2×2。v1.6） */ .stats.four { grid-template-columns: repeat(4, 1fr); } @media (max-width: 600px) { .stats.four { grid-template-columns: repeat(2, 1fr); } } .stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; } .stat .lb { font-size: 11.5px; color: var(--muted); margin: 0 0 2px; line-height: 1.3; } .stat .vl { font-size: 20px; font-weight: 600; margin: 0; line-height: 1.25; } .stat .vl small { font-size: 11.5px; font-weight: 400; color: var(--muted); } @media (max-width: 420px) { .stat .vl { font-size: 17px; } } /* クリックで絞り込むタイル（ETC利用一覧・ダッシュボードの「要対応」）。button/a要素でも見た目をタイルに揃える */ button.stat { font-family: var(--font); text-align: left; width: 100%; } a.stat { display: block; text-decoration: none; color: inherit; } .stat.clickable { cursor: pointer; } .stat.clickable:hover:not(:disabled) { border-color: var(--red); } .stat.clickable:disabled { cursor: default; } .stat.clickable.on { border-color: var(--red); background: var(--red-soft); } /* ラベルを青字＋下線のリンク風にして「押せる」ことを示す（0社で押せない間は通常表示） */ .stat.clickable:not(:disabled) .lb { color: var(--link); text-decoration: underline; } /* ---- 検索・絞り込み ---- */ .search { position: relative; margin-bottom: 8px; } .search svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); opacity: .45; } input[type=text], input[type=date], select, textarea { width: 100%; font-family: var(--font); font-size: 15px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 9px 11px; } .search input[type=text] { padding-left: 34px; } label.fl { display: block; font-size: 11.5px; color: var(--muted); margin-bottom: 3px; } .ctl { display: flex; gap: 8px; margin-bottom: 10px; } .ctl > div { flex: 1; min-width: 0; } .chkline { display: flex; align-items: center; gap: 6px; font-size: 13px; margin-bottom: 10px; } .chkline input { width: auto; } /* チェックを横に並べる（★v1.37「コーポカードのみ表示」＋「付帯情報も表示」）。狭い幅では折り返す */ .chkrow { display: flex; flex-wrap: wrap; gap: 0 18px; align-items: center; } /* 見出し右のDLボタンが2本のとき（★v1.37）。狭い幅では折り返す */ .dlgroup { display: inline-flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; } .count { font-size: 11.5px; color: var(--muted); margin: 0 0 6px; } /* ---- 顧客一覧の行 ---- */ .rows { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; } .rowbtn { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid var(--line-soft); padding: 11px 13px 11px 0; font-family: var(--font); cursor: pointer; position: relative; font-size: 15px; color: var(--ink); text-decoration: none; } .rowbtn:first-child { border-top: 0; } .rowbtn:hover { background: var(--surface-2); } .rowbtn .lane { width: 4px; align-self: stretch; flex-shrink: 0; background: var(--green); } .rowbtn.w .lane { background: var(--amber); } .rowbtn.d .lane { background: var(--etc); } .rowbtn.u .lane { background: var(--red); } /* 未対応（v1.6。目立たせる） */ .rowbtn .no { min-width: 2.4em; text-align: right; font-size: 12px; color: var(--muted); flex-shrink: 0; } .rowbtn .body { flex: 1; min-width: 0; } .rowbtn .nm { display: block; font-size: 14.5px; font-weight: 600; margin: 0 0 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rowbtn .sub { display: block; font-size: 11.5px; color: var(--muted); margin: 0; } /* タスク残の「何月分のデータか」（v1.45）。行名の右に灰色の小文字。狭い画面では折り返す */ .rowbtn .nm.wrap { white-space: normal; overflow: visible; } .rowbtn .dm { font-size: 11.5px; font-weight: 400; color: var(--muted); margin-left: 8px; white-space: nowrap; } .ctl .mhint { display: block; font-size: 11.5px; color: var(--muted); margin: 4px 0 0; } .rowbtn .fig { text-align: right; white-space: nowrap; flex-shrink: 0; } .rowbtn .amt { display: block; font-size: 14px; margin: 0 0 1px; font-weight: 500; } .rowbtn .pct { display: block; font-size: 12.5px; margin: 0; font-weight: 600; } .up { color: var(--red); } .dn { color: var(--etc); } .chev { opacity: .3; flex-shrink: 0; } .tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 5px; } .tag { font-size: 10.5px; padding: 1px 7px; border-radius: 3px; font-weight: 600; letter-spacing: .01em; } .tag.d { background: var(--etc-soft); color: var(--etc); } .tag.w { background: var(--amber-soft); color: var(--amber); } .tag.p { background: var(--green-soft); color: var(--green); } .tag.u { background: var(--red-soft); color: var(--red); } /* 未対応（v1.6。目立たせる）・退会済み（v1.23） */ .tag.g { background: #edf0f4; color: var(--muted); } /* 全般コメント（v1.23。中立色） */ /* 返信リンクで親コメントへ飛んだときの一瞬のハイライト（v1.24） */ @keyframes cmt-flash-kf { 0% { background: var(--amber-soft); } 100% { background: transparent; } } .cmt-flash { animation: cmt-flash-kf 1.6s ease-out 1; border-radius: 6px; } /* 返信の引用ヘッダ（親コメントの抜粋。クリックで親へスクロール） */ .replyref { display: block; margin: 2px 0 4px; padding: 4px 9px; border-left: 3px solid var(--line, #d8dde3); background: #f6f8fa; border-radius: 4px; font-size: 12px; color: var(--muted); text-align: left; width: 100%; border-top: 0; border-right: 0; border-bottom: 0; cursor: pointer; } .replyref:hover { background: #eef1f5; } .replyref .rq { display: block; white-space: pre-line; overflow: hidden; } .replyref.dead { cursor: default; } .empty { padding: 38px 16px; text-align: center; color: var(--muted); } .empty p { margin: 6px 0 0; font-size: 13.5px; } .note { font-size: 11.5px; color: var(--muted); margin: 10px 0 0; } .loadmore { width: 100%; margin-top: 10px; font-family: var(--font); font-size: 13.5px; cursor: pointer; padding: 10px 15px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); color: var(--ink); } .loadmore:hover { background: var(--surface-2); } /* ---- ①ETC利用一覧の横並び（★v1.51・依頼者要望 2026-09-28・500決定記録） ---- 行は3行構成のまま横に列を増やす。列＝色帯 4／顧客名 残り幅（最小 --nmw・ドラッグで可変）／境界 6／ 連絡先 300／先方担当者 260／コーポ割引 200／Nカード割引 170／ガソリン 160（★v1.57）／請求額 110／▼ 44 ＝ 固定分 約1,250px。 一覧ブロック（.widelist）は v1.38 の .widesec と同じ方式で本文枠（900px）から張り出す（上限 1600px）。 ★v1.57（依頼者指示 2026-09-29「顧客名の最小幅を可能な限り狭く。そのうえで横スクロールは許容」）: 顧客名の最小幅 220→170px（ドラッグの下限 120→100px。karte.js）。最小幅 約1,420px＝1366px 幅のノート PC （張り出し 1318px）では約 100px の横スクロールが出る（顧客名は左固定なので操作は保てる）。 狭い画面は .lscroll の中だけ横スクロールし、色帯・顧客名・境界を左に固定（sticky）。 行は display:contents で grid の1行に展開する（展開パネル .lxp は全列にまたがる） */ @media (min-width: 933px) { .widelist { --wide-w: min(1600px, calc(100vw - 48px)); width: var(--wide-w); margin-left: calc((100% - var(--wide-w)) / 2); } } .lscroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); } .rows.lgrid { display: grid; grid-template-columns: 4px minmax(var(--nmw, 170px), 1fr) 6px 300px 260px 200px 170px 160px 110px 44px; min-width: min-content; border: 0; border-radius: 0; overflow: visible; } .lgrid.resizing { user-select: none; cursor: col-resize; } .lhead, .lrow { display: contents; } .lgrid .lc { display: block; padding: 8px 10px; min-width: 0; font-size: 12px; line-height: 1.45; color: var(--ink); background: var(--surface); } .lhead .lc, .lhead .lane, .lhead .lgrip { background: var(--surface-2); border-bottom: 1px solid var(--line); } .lhead .lc { font-size: 11px; font-weight: 700; color: var(--muted); padding: 6px 10px; line-height: 1.3; } .lrow > .lc, .lrow > .lgrip, .lrow > .lane { border-top: 1px solid var(--line-soft); } .lrow:hover > .lc, .lrow:hover > .lgrip { background: var(--surface-2); } .lrow.open > .lc { background: #f3f5f9; } .lgrid .lane { width: 4px; align-self: stretch; background: var(--green); } .lrow.w .lane { background: var(--amber); } .lrow.d .lane { background: var(--etc); } /* 顧客名の列＝②カルテへのリンク。横スクロール時は色帯・顧客名・境界を左に固定 */ .lgrid .lane, .lgrid .lnm, .lgrid .lgrip { position: sticky; z-index: 1; } .lgrid .lane { left: 0; } .lgrid .lnm { left: 4px; } .lgrid .lgrip { left: calc(4px + var(--nmw, 170px)); } .lgrid .lnm { display: flex; align-items: flex-start; gap: 8px; text-decoration: none; } .lgrid .lnm:hover .nm { text-decoration: underline; } .lgrid .lnm .no { min-width: 2.2em; text-align: right; font-size: 12px; color: var(--muted); flex-shrink: 0; padding-top: 2px; } .lgrid .lnm .body { flex: 1; min-width: 0; } .lgrid .lnm .nm { display: block; font-size: 14px; font-weight: 600; margin: 0 0 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lgrid .lnm .sub { display: block; font-size: 11.5px; color: var(--muted); } .lgrip { cursor: col-resize; } .lgrip:hover, .lgrid.resizing .lgrip { background: #c9d6ea !important; } /* セル内の行（連絡先・担当者・割引）。住所と割引は折り返し、TEL/FAX と担当者は1行（はみ出しは …） */ .lgrid .cl { display: block; overflow-wrap: anywhere; } .lgrid .lct .cl.one, .lgrid .lps .cl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lgrid .lps { font-size: 11.5px; } .lgrid .ldc .cl { font-size: 11.5px; } .lgrid .ldc .dk { color: var(--muted); margin-right: 5px; } .lgrid .ldc .cl + .cl { margin-top: 2px; } .lgrid .lfig { text-align: right; white-space: nowrap; } .lgrid .lfig .amt { display: block; font-size: 13.5px; font-weight: 500; } .lgrid .lfig .pct { display: block; font-size: 12px; font-weight: 600; } .lgrid .lx { text-align: center; padding-left: 4px; padding-right: 4px; } .lgrid .dnone { color: var(--muted); font-size: 12px; } /* ★v1.57 ガソリン列：1行目（契約中 N 件・N 枚）は太字、2〜3行目（発行元・銘柄）は小さめで1行に収める */ .lgrid .lgs { font-size: 11.5px; } .lgrid .lgs .gh { font-weight: 600; color: var(--ink); } .lgrid .lgs .cl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lgrid .lgs .cl + .cl { margin-top: 2px; } .xbtn { font-family: var(--font); font-size: 11px; line-height: 1; padding: 6px 7px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--link); cursor: pointer; } .xbtn:hover { background: var(--link); color: #fff; border-color: var(--link); } /* ▼ の展開パネル（積立の設定・保証金の預かり状況）。横スクロール中も画面内に留まるよう中身を sticky にする */ .lxp { grid-column: 1 / -1; border-top: 1px dashed var(--line); background: #f3f5f9; } .lxpin { position: sticky; left: 0; max-width: calc(100vw - 48px); padding: 6px 14px 10px 16px; } .lxp .dwrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); } .lxp .dsec { padding: 10px 14px; } .lxp .dsec .dnote { margin-top: 8px; } .lxp .dsys + .dsys { margin-top: 8px; } @media (max-width: 600px) { .lxpin { max-width: calc(100vw - 32px); } } /* ---- ②カルテ（prototype/index.html を踏襲） ---- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); } .kcard { overflow: hidden; margin-bottom: 18px; } .sect { margin-bottom: 6px; } .back { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; color: var(--muted); font-family: var(--font); font-size: 13px; cursor: pointer; padding: 4px 0; margin-bottom: 10px; text-decoration: none; } .back:hover { color: var(--ink); } .khead { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 13px 14px; margin-bottom: 12px; } .khead .nm { font-size: 17px; font-weight: 600; margin: 0 0 3px; line-height: 1.35; } .khead .sub { font-size: 12px; color: var(--muted); margin: 0; } .khead .kind { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 3px; background: var(--etc-soft); color: var(--etc); margin-bottom: 5px; } /* 顧客連絡先（★v1.15。kintone 由来） */ .khead .contact { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); } .khead .contact .cline { font-size: 12px; color: var(--ink); margin: 0 0 2px; line-height: 1.5; } .khead .contact .csrc { font-size: 10.5px; color: var(--muted); margin: 3px 0 0; } .alert { border-left: 4px solid var(--etc); background: var(--etc-soft); border-radius: 0 var(--r) var(--r) 0; padding: 11px 13px; margin-bottom: 16px; } .alert .t { font-size: 14px; font-weight: 600; color: var(--etc); margin: 0 0 2px; } .alert .s { font-size: 11.5px; color: var(--etc); margin: 0; opacity: .85; } .legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--muted); margin: 0 0 6px; } .legend span { display: flex; align-items: center; gap: 5px; } .sw { width: 10px; height: 10px; border-radius: 2px; display: inline-block; } .chart { position: relative; width: 100%; height: 190px; margin-bottom: 18px; } .chart.sm { height: 155px; } /* カード表（PC） */ table { width: 100%; border-collapse: collapse; font-size: 13.5px; } thead th { background: var(--surface-2); font-weight: 600; color: var(--muted); font-size: 11.5px; text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); } tbody td { padding: 9px 10px; border-top: 1px solid var(--line-soft); } tbody tr.off td { color: var(--muted); } .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; } /* フル桁のカード番号・車両ナンバー（v1.1）。スマホでも折り返さない */ .cardno { white-space: nowrap; letter-spacing: 0.02em; } .st { font-size: 11.5px; font-weight: 600; white-space: nowrap; } .st.a { color: var(--green); } .st.w { color: var(--amber); } .st.r { color: var(--muted); } .st.d { color: var(--muted); opacity: .75; text-decoration: line-through; text-decoration-thickness: 1px; } /* 移管（★v1.17）：灰・取消線なし（券面は別の請求コード名義で現役のため） */ .st.t { color: var(--muted); } .ta-r { text-align: right; } .more { padding: 9px; text-align: center; font-size: 12px; color: var(--muted); border-top: 1px solid var(--line-soft); } /* カード一覧（スマホ）。600px未満で表と入れ替える（横スクロールさせない） */ .clist { display: none; } .citem { border-top: 1px solid var(--line-soft); padding: 10px 12px; } .citem:first-child { border-top: 0; } .citem .r1 { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; } .citem .r2 { display: flex; gap: 14px; margin-top: 3px; font-size: 12px; color: var(--muted); } /* 割引・積立の設定（v1.2）。PCは2列（コーポ／法人）、スマホは縦積み */ .dwrap { display: grid; grid-template-columns: 1fr 1fr; } .dsec { padding: 12px 14px; min-width: 0; } .dsec + .dsec { border-left: 1px solid var(--line-soft); } .dsys { font-size: 11.5px; font-weight: 700; color: var(--muted); margin: 0 0 8px; } .dlist { margin: 0; } .drow { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 5px 0; border-top: 1px solid var(--line-soft); } .drow:first-child { border-top: 0; } .drow dt { font-size: 12px; color: var(--muted); margin: 0; flex-shrink: 0; } .drow dd { font-size: 13px; margin: 0; text-align: right; } .dnone { color: var(--muted); font-size: 12.5px; } .dsum { display: block; margin-top: 2px; } .dnote { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; } @media (max-width: 600px) { .dwrap { grid-template-columns: 1fr; } .dsec + .dsec { border-left: 0; border-top: 1px solid var(--line); } } /* 対応履歴 */ .hist { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 4px; } .hitem { padding: 11px 13px; border-top: 1px solid var(--line-soft); } .hitem:first-child { border-top: 0; } .hitem .mt { font-size: 11px; color: var(--muted); margin: 0 0 2px; } .hitem .tx { font-size: 13.5px; margin: 0; } .src { font-size: 10px; font-weight: 600; padding: 1px 5px; border-radius: 2px; margin-left: 5px; } .src.me { background: var(--green-soft); color: var(--green); } .src.hq { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); } /* ---- ⑧担当者ダッシュボード（v1.8） ---- */ .dash-head { margin-top: 18px; } a.hitem { display: block; text-decoration: none; color: inherit; } a.hitem:hover { background: var(--surface-2); } .hitem .mt .tag { margin-right: 4px; } /* ---- ③対応記録（prototype/index.html を踏襲） ---- */ textarea { width: 100%; font-family: var(--font); font-size: 15px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 9px 11px; resize: vertical; line-height: 1.55; box-sizing: border-box; } .chips { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 18px; } .chip { font-family: var(--font); font-size: 13.5px; cursor: pointer; padding: 8px 15px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); color: var(--ink); } .chip[aria-pressed=true] { background: var(--etc); border-color: var(--etc); color: #fff; font-weight: 600; } .chip.sm { font-size: 12px; padding: 6px 12px; } .meta { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); padding: 8px 12px; margin-bottom: 18px; display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); gap: 10px; flex-wrap: wrap; } .msg { font-size: 13px; margin: 11px 0 0; min-height: 20px; font-weight: 600; } .msg.ok { color: var(--green); } .msg.ng { color: var(--red); } /* ボタン */ .b { display: inline-block; text-align: center; text-decoration: none; font-family: var(--font); font-size: 14px; font-weight: 600; cursor: pointer; border-radius: var(--r); padding: 11px 16px; border: 1px solid var(--ink); background: var(--ink); color: #fff; } .b:hover { opacity: .88; } .b.sec { background: var(--surface); color: var(--ink); border-color: var(--line); } .b.sec:hover { background: var(--surface-2); opacity: 1; } .b.full { width: 100%; margin-top: 6px; box-sizing: border-box; } /* Excelで保存（DL機能。SPEC.md 3.6 v1.4）。見出しや件数表示の横に置く小ぶりのボタン */ .dlbtn { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font); font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; cursor: pointer; white-space: nowrap; } .dlbtn:hover { background: var(--surface-2); } /* 準備中（元データ未同期の間の無効表示。2026-08-12） */ .dlbtn.prep { color: var(--muted); background: var(--surface-2); cursor: default; font-weight: 400; } .dlbtn.prep:hover { background: var(--surface-2); } .secthead { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } /* セクションの開閉（★v1.34・依頼者要望 2026-09-10「カード枚数が多い会員はスクロールが多い」→ 全セクション統一・既定は開・閉じた状態は端末ごとに記憶）。見出し全体がボタン。 ▼／▶ はリンク色の丸で「クリックできる」ことを示す（依頼者指示） */ .secthead { margin-bottom: 8px; } .secthead h3 { margin-bottom: 0; } .sect-toggle { display: inline-flex; align-items: center; gap: 7px; background: none; border: none; padding: 0; margin: 0; font-family: var(--font); color: inherit; cursor: pointer; text-align: left; } .sect-toggle h3 { margin: 0; } .sect-toggle .chev { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; flex: 0 0 auto; background: var(--link); color: #fff; font-size: 9px; line-height: 1; } .sect-toggle:hover .chev { filter: brightness(1.15); } .sect-toggle:hover h3 { color: var(--link); text-decoration: underline; } .sect-toggle .sect-count { font-size: 12px; color: var(--muted); } .sect-body[hidden] { display: none !important; } /* 担当顧客の請求額ランキング（★v1.50・ダッシュボード）。PC は2列・スマホは縦積み。 色帯は状態の色（緑/橙/紫/赤）と紛れないよう無彩色にし、順位を太字で示す */ .rankgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; } @media (max-width: 600px) { .rankgrid { grid-template-columns: minmax(0, 1fr); } } /* ★v1.50.1: 列は中身の幅に引きずられず本文枠に収める（grid の 1fr は最小幅 auto＝長い顧客名で 列がはみ出し、タスク残より横長になった・依頼者指摘 2026-09-26）。長い顧客名は切らずに折り返す */ .rankgrid > div { min-width: 0; } .rank-head { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--muted); } .rowbtn.rk .lane { background: var(--line); } .rowbtn.rk .nm { white-space: normal; overflow: visible; overflow-wrap: anywhere; } .rowbtn.rk .no { font-weight: 700; color: var(--ink); font-size: 13px; min-width: 2.6em; } /* 明細のダウンロード（v1.5 第2弾）：カルテ内のDLパネル */ .dlpanel { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; } .dlpanel .more { margin: 0 -14px -12px; } .dlitem { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .dllabel { font-size: 12.5px; font-weight: 600; min-width: 220px; } .dlitem select { font-family: var(--font); font-size: 12.5px; padding: 4px 8px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--ink); } /* ★v1.53 通行明細の対象月＝チェックボックス（6ヶ月横並び・狭い画面では折り返す） */ .tripmonths-picks { display: flex; align-items: center; gap: 4px 12px; flex-wrap: wrap; } .tripmonth { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; cursor: pointer; white-space: nowrap; } .tripmonth input { margin: 0; } .tripmonth-all { font-family: var(--font); font-size: 11.5px; padding: 2px 8px; cursor: pointer; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--muted); } .tripmonth-all:hover { background: var(--surface-2); color: var(--ink); } /* カード毎の利用状況：6ヶ月横並び（2026-07-30）。 ページ全体は横スクロールさせず、この表の中だけをスクロールさせる */ .cardhist .tbl { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } .cardhist table { min-width: 860px; } /* ★v1.56: 利用の傾向（状態の右）。↗緑／↘赤／→灰／—灰。矢印は数字より一回り大きく・中央寄せ */ .cardhist th.trend, .cardhist td.trend { text-align: center; white-space: nowrap; } .cardhist .tr { display: inline-block; font-size: 17px; font-weight: 700; line-height: 1; cursor: help; } .cardhist .tr svg { display: block; } .cardhist .tr.u { color: var(--green); } .cardhist .tr.d { color: var(--red); } .cardhist .tr.f { color: var(--muted); } .cardhist .tr.n { color: var(--muted); font-weight: 400; } .cardhist .cur { font-weight: 700; } /* ★v1.59: 最新月の色分け（有効カードの最新月セルだけ背景を薄く塗る。コーポ＝割対で黄/橙/赤・Nカード＝利用額4万円以上で青。 依頼者要望 2026-10-01。行全体は塗らない）。行選択（tr.sel）より優先＝選んでも色の情報が消えないように */ .cardhist td.band-y, .cardhist tbody tr.sel td.band-y { background: #fff1a8; } .cardhist td.band-o, .cardhist tbody tr.sel td.band-o { background: #ffd199; } .cardhist td.band-r, .cardhist tbody tr.sel td.band-r { background: #ffc4bd; } .cardhist td.band-b, .cardhist tbody tr.sel td.band-b { background: #c9dcff; } /* 推進員別サマリー・契約者単位モニター（★v1.26）: スマホでも表のまま （月次横並びのため＝カード毎の利用状況と同じ扱い。依頼者指摘 2026-08-31 「スマホで詳細ボタンが表示されない」＝幅600px未満の .tbl 非表示の巻き添え）。 ページ全体は横スクロールさせず、この表の中だけをスクロールさせる */ .bartbl .tbl { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } .bartbl table { min-width: 640px; } .bartbl th, .bartbl td { white-space: nowrap; } /* ★v1.39: 行クリックで1行選択ハイライト（推進員別サマリー・契約者単位モニター。カード毎の利用状況 .cardhist と同じ色）。 依頼者要望 2026-09-10「スマホで横にスライドすると左の名前が見えなくなる」→A案。 バー割れ（.bar-below）・部署内訳（.bar-dept）の背景より優先させる */ .bartbl tbody tr { cursor: pointer; } .bartbl tbody tr.sel td { background: #e8dff5; } /* 選択行は左端に紫の帯（バー割れのピンクと選択の薄紫が近く、色だけでは見分けにくいため） */ .bartbl tbody tr.sel td:first-child { box-shadow: inset 4px 0 0 var(--etc); } /* sticky セルは border-collapse: collapse だと罫線が固定に追随しないブラウザがあるため、 この表だけ separate にする（罫線は横線のみなので見た目は変わらない） */ .cardhist table { border-collapse: separate; border-spacing: 0; } /* ①カード列は横スクロールしても固定（★v1.12・依頼者要望 2026-08-12）。 sticky セルは下の内容が透けないよう不透明な背景が必須。境目は右端の影で示す */ .cardhist th:first-child, .cardhist td:first-child { position: sticky; left: 0; z-index: 2; background: var(--surface); box-shadow: inset -1px 0 0 var(--line); } .cardhist thead th:first-child { background: var(--surface-2); z-index: 3; } /* ②行クリックで1行選択（見やすさ用ハイライト。再クリックで解除） */ .cardhist tbody tr { cursor: pointer; } .cardhist tbody tr.sel td { background: var(--etc-soft); } /* 各月の集計行（★v1.12）。1列目は sticky（詳細度で負けるため背景を明示上書き） */ .cardhist tfoot td { background: var(--surface-2); border-top: 2px solid var(--line); font-weight: 700; font-size: 12.5px; } .cardhist tfoot td:first-child { background: var(--surface-2); } /* ★v1.38（依頼者指摘 2026-09-10「PCのブラウザで開くとカード毎の利用状況の表の幅がかなり狭い」→C案・500決定記録）: 本文枠（.karte-main 最大900px）は据え置き、横スクロールが起きる唯一の表＝「カード毎の利用状況」のブロック （見出し行・Excelボタン・チェック・表）だけを左右対称に張り出させる。 幅＝画面幅いっぱい（余白 24px 程度・縦スクロールバー分を含めて 64px 引く）・上限 1400px。 本文枠の内側幅（868px）より広くなる画面幅（933px〜）でだけ効く＝スマホ・タブレットは無変更。 全ページの幅を広げる案（A）は「コメント等の文章が横に伸びて見にくい」（依頼者）ため不採用 */ @media (min-width: 933px) { .widesec { --wide-w: min(1400px, calc(100vw - 64px)); width: var(--wide-w); margin-left: calc((100% - var(--wide-w)) / 2); } } /* 張り出した幅いっぱいに列を伸ばす（min-width はそのまま＝狭いときは表の中だけ横スクロール）。 ★v1.38.2: 契約者単位モニターの企業一覧（.bartbl）も同じ扱い（依頼者要望 2026-09-10） */ .widesec .cardhist table, .widesec .bartbl table { width: 100%; } /* 付帯情報の表示（★v1.37。旧「カード一覧」セクション〔v1.33 .cardinv〕を本表へ統合・500決定記録 2026-09-10 C案）。 ON のとき右端に区分・車載器番号・発行日・最終利用月の列が足される。折り返さない（表の中だけ横スクロール） */ .cardhist th.attr, .cardhist td.attr { white-space: nowrap; } /* ★v1.37.1（依頼者指摘 2026-09-10「付帯情報にチェックを入れると見出しの9月走行などが縦に並ぶ」）: 付帯列を足した分だけ表の最小幅を広げ、見出しは折り返さない。横スクロールは表の中だけ（従来どおり） */ .cardhist.attrs table { min-width: 1300px; } /* ★v1.38 で 1320→1300（1366px幅のノート＝張り出し幅1302pxで横スクロールが出ないように） */ /* ★v1.38: 付帯情報ONは14列でセルの左右余白 10px だと自然幅が約1324px になり 1366px 幅で 24px はみ出す→左右 8px に詰める（実測で約1270px） */ .cardhist.attrs th, .cardhist.attrs td { padding-left: 8px; padding-right: 8px; } .cardhist thead th { white-space: nowrap; } /* ★v1.47: カード毎の利用状況の絞り込み欄（キーワード・発行日・プリセット）と見出しクリックの並べ替え （依頼者要望 2026-09-25「カードが多い会員は対象を探すのが大変」→A案・500決定記録 2026-09-25） */ .cardfilter { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 2px 0 10px; font-size: 13px; } .cardfilter .cf-kw { flex: 1 1 320px; min-width: 200px; font-size: 13px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); } .cardfilter .cf-date { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; } .cardfilter .cf-lbl { color: var(--muted); } .cardfilter .cf-tilde { color: var(--muted); } .cardfilter input[type="date"] { width: auto; font-size: 13px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); } .cardfilter .cf-presets { display: inline-flex; gap: 4px; } .cardfilter .cf-presets button, .cardfilter .cf-clear { font-size: 12px; padding: 4px 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); cursor: pointer; } .cardfilter .cf-presets button:hover, .cardfilter .cf-clear:hover { background: var(--surface-2); } .cardfilter .cf-clear { color: var(--etc); border-color: var(--etc); } .cardhist th.sortable { cursor: pointer; user-select: none; } .cardhist th.sortable:hover { background: var(--surface-2); } .cardhist th.sorted { color: var(--etc); } .cardhist .smark { font-size: 10px; margin-left: 2px; } @media (max-width: 600px) { .cardfilter .cf-kw { flex-basis: 100%; } } /* カード列見出しの補足（付帯情報ONのとき「（3行目＝所属）」。小さなPCでも3行目の意味が分かるように） */ .cardhist .thsub { font-weight: 400; font-size: 10.5px; color: var(--muted); margin-left: 4px; } /* カード列3行目＝所属（部署名①／②／備考・個人名）。固定列の幅を広げないよう券面の桁幅（約165px）で「…」省略。 全文は title（マウスオーバー） */ .cardhist .aff { display: block; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--ink); font-family: var(--font); letter-spacing: 0; margin-top: 1px; } .cardhist .aff:empty { display: none; } /* ③入替前の旧券面（カードセル内の注記。14桁単位で現役の行に集約＝A案） と登録車両＝最新の車番（コーポのみ併記。★v1.18） */ .cardhist .rep, .cardhist .plate { display: block; font-size: 11px; color: var(--muted); font-family: var(--font); letter-spacing: 0; } /* ★v1.34.1（依頼者提案 2026-09-10）: カード列を「1行目＝種別バッジ（コーポは車番を隣に）／2行目＝券面」の 2行構成にして固定列の幅を縮める（桁を折り返すと番号を識別しにくくなるため折り返しはしない）。 幅は約215px→約165px。カード毎の利用状況に効く（カード一覧は ★v1.37 で本表へ統合） */ .cardhist .kindline { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; white-space: nowrap; } .cardhist .kindline .plate { display: inline; } .cardhist .cno { display: block; white-space: nowrap; } @media (max-width: 600px) { .stats { grid-template-columns: 1fr 1fr; } .ctl { flex-direction: column; } .tbl { display: none; } /* 幅600px未満：表を隠しカード形式へ */ .clist { display: block; } /* カード毎の利用状況だけは表のまま（6ヶ月横並びのため。利用者の選択 2026-07-30） */ .cardhist .tbl { display: block; } /* 推進員別サマリー・契約者単位モニターも表のまま（★v1.26。同上の理由） */ .bartbl .tbl { display: block; } } /* ---- 認証系画面（ログイン・パスワード変更・2FA） ---- */ .auth-box { max-width: 420px; margin: 2rem auto; padding: 1.5rem; border: 1px solid #d0d7de; border-radius: 8px; background: #fff; } .auth-box h1 { font-size: 1.3rem; margin-top: 0; } .auth-box label { display: block; margin-bottom: 0.8rem; font-size: 0.9rem; } .auth-box input { display: block; width: 100%; box-sizing: border-box; margin-top: 0.25rem; padding: 0.55rem; font-size: 1rem; border: 1px solid #c4ccd4; border-radius: 6px; } /* パスワード欄の目マーク（●●● ⇔ 文字の表示切替。切替処理は karte.js） */ .pw-field { position: relative; display: block; margin-top: 0.25rem; } .pw-field input { margin-top: 0; /* .auth-box input の margin-top は外側の .pw-field へ移す */ padding-right: 2.6rem; } .pw-toggle { position: absolute; top: 0; right: 0; height: 100%; width: 2.6rem; padding: 0; border: none; cursor: pointer; background: transparent no-repeat center / 20px 20px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2357606a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); } /* 表示中は「斜線入りの目」に切り替える */ .pw-toggle.pw-visible { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2357606a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 19c-7 0-11-7-11-7a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 7 11 7a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E"); } .auth-box .btn-primary { width: 100%; padding: 0.65rem; font-size: 1rem; color: #fff; background-color: #3b4a5a; border: none; border-radius: 6px; cursor: pointer; } .auth-note { color: #57606a; font-size: 0.88rem; } .auth-error { background: #fdecea; color: #8a1f11; border: 1px solid #f5c6c0; border-radius: 6px; padding: 0.6rem 0.8rem; margin-bottom: 0.9rem; font-size: 0.9rem; } .auth-success { background: #e6f4ea; color: #0f7a4a; border: 1px solid #b7e1c4; border-radius: 6px; padding: 0.6rem 0.8rem; margin-bottom: 0.9rem; } .auth-steps { font-size: 0.9rem; padding-left: 1.2rem; } .auth-qr { display: block; width: 190px; height: 190px; margin: 0.6rem auto; image-rendering: pixelated; /* 拡大してもQRのドットが滲まないように */ border: 1px solid #e6e9e7; border-radius: 6px; padding: 8px; background: #fff; } .auth-manual { margin: 0.6rem 0; font-size: 0.88rem; } .auth-manual summary { color: #57606a; cursor: pointer; } .auth-key { font-family: Consolas, monospace; font-size: 1.05rem; letter-spacing: 0.05em; background: #f6f8fa; border: 1px dashed #c4ccd4; border-radius: 6px; padding: 0.6rem 0.8rem; margin: 0.5rem 0; word-break: break-all; } a, .btn-link { color: #006bb7; } .btn-primary { color: #fff; background-color: #1b6ec2; border-color: #1861ac; } .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb; } .content { padding-top: 1.1rem; } h1:focus { outline: none; } .valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; } .invalid { outline: 1px solid #e50000; } .validation-message { color: #e50000; } .blazor-error-boundary { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; padding: 1rem 1rem 1rem 3.7rem; color: white; } .blazor-error-boundary::after { content: "An error has occurred." } .darker-border-checkbox.form-check-input { border-color: #929292; } /* ---- アカウント管理（/admin/accounts。v1.3 §3.5） ---- */ .adm { max-width: 1080px; margin: 0 auto; padding: 4px; } .adm-mail { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--green); border-radius: var(--r); padding: 14px 16px; margin-bottom: 18px; } .adm-mail label { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 8px; } .adm-mail input, .adm-mail textarea { display: block; width: 100%; margin-top: 3px; font-size: 13.5px; font-family: var(--font); border: 1px solid var(--line); border-radius: var(--r); padding: 6px 8px; background: var(--surface-2); color: var(--ink); } .adm-mail textarea { resize: vertical; line-height: 1.7; } .adm-new { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; margin-bottom: 18px; } .adm-form { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 14px; margin-bottom: 10px; } @media (max-width: 600px) { .adm-form { grid-template-columns: 1fr; } } .adm-form label { font-size: 12.5px; color: var(--muted); } .adm-form input, .adm-form select { display: block; width: 100%; margin-top: 3px; font-size: 14px; border: 1px solid var(--line); border-radius: var(--r); padding: 6px 8px; background: #fff; color: var(--ink); } .adm-tablewrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); } .adm-table { width: 100%; border-collapse: collapse; font-size: 13.5px; } .adm-table th, .adm-table td { text-align: left; padding: 8px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; } /* 列が増えて幅が足りないと氏名・役割が1文字ずつ縦に折れるため、セル内では折り返さない （表がはみ出す場合は .adm-tablewrap が横スクロールを出す） */ .adm-table td { white-space: nowrap; } .adm-table th { font-size: 12px; color: var(--muted); font-weight: 600; background: var(--surface-2); white-space: nowrap; } .adm-table tr.inactive td { color: var(--muted); background: var(--surface-2); } .adm-email input { width: 170px; font-size: 13px; border: 1px solid var(--line); border-radius: var(--r); padding: 4px 6px; } .adm-ops { white-space: nowrap; } .adm-st { display: inline-block; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 2px 10px; white-space: nowrap; } .adm-st.ok { background: var(--green-soft); color: var(--green); } .adm-st.waiting { background: var(--amber-soft); color: var(--amber); } .adm-st.locked { background: var(--red-soft); color: var(--red); } .adm-st.off { background: var(--surface-2); color: var(--muted); } /* ログイン履歴（アカウント一覧の展開行） */ .adm-lastlogin { white-space: nowrap; } .adm-lastlogin .adm-btn { margin-left: 6px; } .adm-hist td { background: var(--surface-2); } .adm-hist-title { font-size: 12px; color: var(--muted); font-weight: 600; margin: 2px 0 6px; } .adm-hist-table { border-collapse: collapse; font-size: 12.5px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r); } .adm-hist-table th, .adm-hist-table td { text-align: left; padding: 4px 14px 4px 10px; border-bottom: 1px solid var(--line-soft); } .adm-hist-table th { font-size: 11.5px; color: var(--muted); font-weight: 600; white-space: nowrap; } .adm-hist-r.ok { color: var(--green); font-weight: 600; } .adm-hist-r.ng { color: var(--red); font-weight: 600; } .adm-btn { font-size: 12.5px; padding: 5px 10px; margin: 2px 4px 2px 0; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--ink); cursor: pointer; } .adm-btn:hover { background: var(--surface-2); } .adm-btn.primary { background: #3b4a5a; border-color: #3b4a5a; color: #fff; } .adm-btn.danger { color: var(--red); border-color: var(--red-soft); } .adm-btn:disabled { opacity: 0.5; cursor: default; } /* ヘッダーのアカウント管理リンク（admin のみ表示） */ .karte-header .adminlink { font-size: 12.5px; color: #fff; opacity: 0.85; margin-right: 10px; white-space: nowrap; } /* ⑩契約者単位モニター（★v1.26）: バー割れ企業の行を赤系で強調（ラボの一覧と同じ約束） */ .bar-below td { background: #fbeeee; } /* ②カード毎の利用状況: 利用額の下の割引対象額（★v1.29。コーポのNEXCO高速国道＝ 契約者単位割引のバーと同じ物差し。Nカードには出ない） */ .dtg { display: block; font-size: 11px; font-weight: 400; color: var(--muted); white-space: nowrap; } /* ⑩ツリー表示（★v1.28）: 親行=企業（組合員名1）・子行=部署（組合員名2）。 子行は薄いグレー地＋インデントで従属関係を示す（数値は参考値・バー判定は企業単位） */ /* 親行=企業名ごとクリックで展開（★v1.29.1 依頼者指示 2026-09-02）。 色はリンク（a=#006bb7）と同じ青・下線なし＝クリックできることを示す */ .tree-parent { background: none; border: none; cursor: pointer; padding: 0; color: #006bb7; font: inherit; text-align: left; } .tree-parent .tree-caret { font-size: 11px; color: var(--muted); padding-right: 6px; } /* 見出しの補足行（例:「申請コード」の下の「（請求コード）」＝子行側の意味。★v1.29.2） */ .thsub { display: block; font-size: 10.5px; font-weight: 400; color: var(--muted); } .bar-dept td { background: #f7f7f9; font-size: 13px; } .bar-dept td:first-child { padding-left: 2.2em; } .bar-dept .dept-cards { color: var(--muted); font-size: 12px; margin-left: 2px; } /* 請求書の内訳＝鑑（★v1.42）。PDF の1枚目と同じ並び（系統の見出し行→内容／金額／内訳）。 スマホでも表のまま（3列で収まる）。小計・合計行の右寄せと合計行の強調はコアの印字規則に合わせる */ .invpanel { padding: 12px 14px 0; } .invpanel .more { margin: 0 -14px; } .invhead { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; } .invhead select { font-family: var(--font); font-size: 12.5px; padding: 4px 8px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--ink); } .invtotal { font-size: 13px; } .invtotal b { font-size: 16px; margin-left: 2px; } .invcards { font-size: 12px; color: var(--muted); } .invnote { margin: 0 0 8px; font-size: 12px; color: var(--amber); } /* 鑑の左枠（ご利用月／ご請求額／お支払日）の3行（★v1.46） */ .invbox { width: 100%; border-collapse: collapse; margin: 0 0 10px; font-size: 13px; border: 1px solid var(--line); } .invbox th { width: 7.5em; white-space: nowrap; text-align: left; vertical-align: top; padding: 7px 10px; font-weight: 600; font-size: 12px; color: var(--muted); background: var(--surface-2); border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); } .invbox td { padding: 7px 10px; border-bottom: 1px solid var(--line); } .invbox tr:last-child th, .invbox tr:last-child td { border-bottom: 0; } .invbox .invyen { font-size: 16px; } .invbox .invdate { font-size: 15px; font-weight: 600; } .invbox .invcards { margin-left: 10px; } .invbox .invmethod { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font-size: 11px; color: var(--muted); vertical-align: middle; } .invbox .invsub { display: block; margin-top: 2px; font-size: 11px; color: var(--muted); } .invtbl { margin: 0 -14px; border-top: 1px solid var(--line); } .invtbl table { font-size: 13px; } .invtbl tbody tr.invgrp td { background: var(--surface-2); font-weight: 600; font-size: 12px; color: var(--muted); padding: 6px 10px; } .invtbl tbody tr.invsum td { font-weight: 700; border-top: 1px solid var(--line); } .invtbl tfoot tr.invgrand td { font-weight: 700; border-top: 2px solid var(--ink); padding: 9px 10px; } .invtbl .invnote-cell { font-size: 12px; color: var(--muted); } /* リンク風ボタン（★v1.49.1）。画面内の切替（例: タスク詳細「月ごとの状況」の月名）に使う。 href="#" の は Blazor の遷移横取りでトップへ飛ぶため