の直前に置かれているため、position:fixedで * 画面左に固定し、

側にsidebar幅ぶんのmargin-leftを与えるだけで、 * 各ページのHTML構造は一切変更せずに済む。 * ---------------------------------------------------------------------- */ :root { --sidebar-width: 200px; } .app-shell-header { background: var(--panel); border-right: 1px solid var(--border); padding: 16px 14px; display: flex; flex-direction: column; align-items: stretch; gap: 14px; position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-width); overflow-y: auto; z-index: 40; } .app-shell-header h1 { font-size: 16px; margin: 0; line-height: 1.3; } .nav-menu-btn { display: none; background: none; border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; align-self: flex-start; } .app-nav { display: flex; flex-direction: column; gap: 4px; } .nav-link { text-decoration: none; color: var(--text-mute); font-size: 13px; padding: 8px 12px; border-radius: 8px; white-space: nowrap; } .nav-link:hover { background: #f2f4f7; } .nav-link.active { background: var(--accent); color: #fff; } /* トップレベルのナビ項目（グループ・単独リンク問わず）は同じ薄い色付き背景・枠線にして、見た目を統一する（2026-09、ユーザー指摘により対応。以前はグループタブだけに色が付いており不揃いだった）。 */ .app-nav > a.nav-link { background: #eef2ff; border: 1px solid #c7d2fe; color: var(--accent-dark); padding: 10px 14px; font-size: 13.5px; text-align: left; } .app-nav > a.nav-link:hover { background: #e0e7ff; } .app-nav > a.nav-link.active { background: var(--accent); color: #fff; border-color: var(--accent); } .app-shell-header .user-badge { flex-wrap: wrap; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); } /* グループの小タブ（画面上部のサブナビ。2026-09追加・ユーザー指摘）: グループの先頭ページへ遷移した後、そのグループに属するページ内で js/common.jsのrenderSubNav()が

の先頭へ動的に挿入する。 */ /* 2026-09、ユーザー指摘「どこをクリックするか分かりにくい」により配色を変更: タブ全体を色付きの帯（背景）にし、選択されていないタブは白いボタン（枠線付き）、選択中のタブは濃い色で塗りつぶす。 */ .app-subnav { display: flex; gap: 6px; flex-wrap: wrap; margin: -16px -16px 16px -16px; padding: 10px 16px; background: #dfe7f5; border-bottom: 2px solid #b7c7e6; } /* 画面内のタブ（得意先詳細の取引履歴・売掛買掛の月次表など）。サブナビと同じ配色。 */ .tab-strip { display: flex; gap: 6px; flex-wrap: wrap; padding: 6px; background: #dfe7f5; border: 1px solid #b7c7e6; border-radius: 10px; } .app-subnav .nav-link, .tab-strip .nav-link { background: #fff; color: #24406b; font-weight: 600; border: 1px solid #b7c7e6; padding: 8px 14px; cursor: pointer; } .app-subnav .nav-link:hover, .tab-strip .nav-link:hover { background: #f1f6ff; border-color: #8fa8d6; } .app-subnav .nav-link.active, .tab-strip .nav-link.active { background: var(--accent); color: #fff; border-color: var(--accent-dark); box-shadow: 0 2px 0 var(--accent-dark); } /* 「返品」タブは売上・落札どちらのグループでも目立つよう薄めの赤系にする（2026-09、ユーザー指摘）。.btn-dangerと同じ配色を流用する。 */ .app-subnav .nav-link.nav-link-return { background: #fdeceb; color: var(--danger); border: 1px solid #f3c8c4; } .app-subnav .nav-link.nav-link-return:hover { background: #fbd9d6; border-color: #eba7a1; } .app-subnav .nav-link.nav-link-return.active { background: var(--danger); color: #fff; border-color: #a12622; box-shadow: 0 2px 0 #a12622; } /* PDF保存・印刷でも色タグ（ランク・販売形態）の背景色が消えないようにする */ .tag { -webkit-print-color-adjust: exact; print-color-adjust: exact; } @media (max-width: 720px) { /* js/common.jsが直下へ付け替える。サイドバー(.app-shell-header)は transformで画面外へ動かすため、開閉ボタンは常に画面上に留まるよう独立してfixed配置する（サイドバーのtransformの影響を受けないように）。 */ .nav-menu-btn { display: inline-flex; align-items: center; justify-content: center; position: fixed; top: 10px; left: 10px; z-index: 60; background: var(--panel); } .app-shell-header { transform: translateX(-100%); transition: transform 0.2s ease; box-shadow: 2px 0 12px rgba(0,0,0,0.08); padding-top: 56px; } .app-shell-header.open { transform: translateX(0); } /* 固定表示の開閉ボタンとカードの先頭が重ならないよう、上余白を広げる。 */ main { margin-left: 0; padding-top: 56px; } } /* ------------------------------ モーダル（汎用） ------------------------------ */ .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(20,24,34,.45); align-items: center; justify-content: center; z-index: 200; padding: 16px; } .modal-overlay.open { display: flex; } .modal-box { background: #fff; border-radius: 12px; padding: 22px; width: 100%; max-width: 480px; max-height: 88vh; overflow: auto; } .modal-box h3 { margin-top: 0; font-size: 15px; } .modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; } .modal-actions button { width: auto; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; } .form-grid .full { grid-column: 1 / -1; } @media (max-width: 480px) { .form-grid { grid-template-columns: 1fr; } } textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; font-family: inherit; min-height: 70px; resize: vertical; } /* ------------------------------ 汎用パーツ ------------------------------ */ .tag { display: inline-block; padding: 2px 9px; border-radius: 10px; font-size: 11px; color: #fff; background: #6b7280; } .tag.active { background: var(--success); } .tag.inactive { background: #9ca3af; } .tag.overdue { background: var(--danger); } /* 販売形態タグ: ホーム画面の委託(ピンク)・オークション(緑)・BtoC(青)の内訳カードと同じ色（濃い側）。 */ .tag.ch-pink { background: #f48fb1; color: #880e4f; } .tag.ch-green { background: #a5d6a7; color: #1b5e20; } .tag.ch-blue { background: #90caf9; color: #0d47a1; } /* ランクタグ: Aほど状態が良く（緑）、Cほど悪い（赤）。未設定はグレー（.tag.inactive）。 */ .sel-ch-pink { background: #fce4ec; border-color: #f48fb1; } .sel-ch-green { background: #e8f5e9; border-color: #a5d6a7; } .sel-ch-blue { background: #e3f2fd; border-color: #90caf9; } .tag.rank-S { background: #1565c0; color: #fff; } .tag.rank-A { background: #2e7d32; color: #fff; } .tag.rank-AB { background: #9ccc65; color: #33691e; } .tag.rank-B { background: #ffd54f; color: #6d4c00; } .tag.rank-BC { background: #ffb74d; color: #7a3e00; } .tag.rank-C { background: #e53935; color: #fff; } .tag.rank-D { background: #7f1d1d; color: #fff; } .empty-state { text-align: center; color: var(--text-mute); padding: 30px 10px; font-size: 13px; } /* PHASE6のpdf-import-review.js等が使用していたが未定義のままだったクラス。 PHASE4修正時（sale-detail.jsの.stat-grid/.stat-card）と同じ経緯で発見し、既存の見た目・挙動には影響しない追加のみを行う（新規セレクタのため既存ルールとの衝突なし）。 */ .candidate-card { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; } .candidate-card.rejected { opacity: 0.55; } .candidate-card.confirmed { background: #f3fbf6; border-color: var(--success); } .breadcrumb { font-size: 12px; color: var(--text-mute); margin-bottom: 6px; } .detail-row { display: flex; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; } .detail-row .k { width: 140px; flex-shrink: 0; color: var(--text-mute); } .detail-row .v { flex: 1; word-break: break-word; } @media (max-width: 480px) { .detail-row { flex-direction: column; gap: 2px; } .detail-row .k { width: auto; font-size: 11.5px; } } .level-1 { padding-left: 0; } .level-2 { padding-left: 18px; color: var(--text-mute); } .level-3 { padding-left: 36px; color: var(--text-mute); } .card-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; } .card-actions button { width: auto; } /* ------------------------------ 統計カード（PHASE3のsale-detail.js等で使用されていたが CSS定義が漏れていたため、PHASE4実装時に追加。既存の使用箇所の見た目を初めて正しく表示させるだけで、構造・挙動は変更しない） ------------------------------ */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; } .stat-card { background: #f8f9fb; border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; } .stat-card.under { border-color: var(--accent); background: #eef4ff; } /* 商品詳細(3)現在状態: 未設定の項目をひと目で分かるよう色を付ける（2026-09、ユーザー指摘）。 */ .stat-card.unset { background: #fff8e1; border-color: #ffca28; } .stat-card.unset .stat-label { color: #8a6d00; } /* 現在状態の一言サマリー（2026-09追加・ユーザー指摘:「検品して自社在庫になったが、ステータスが分かりにくいです」）。個別のカード（現在場所・商品状態・在庫・資産状態・在庫算入）はそのまま残しつつ、その上に「進んでいる事実（完了事項）」と「対応が必要な事項（警告）」の 2行にまとめた要約を表示する。 */ .status-summary-box { background: #f8f9fb; border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; font-size: 14px; line-height: 1.7; } .status-summary-box .line-ok { color: #1b5e20; font-weight: 600; } .status-summary-box .line-warn { color: #8a6d00; font-weight: 600; } /* 販売形態の色分け: 委託販売=ピンク系、オークション販売=緑系。仕入・在庫等の「仕入れ側」指標は薄い色、資金回収率・資金回転率・個数回転率・GMROI等の「売上側」指標は濃い色にして濃淡で区別する（2026-09、ユーザー指摘）。ダッシュボード（ホーム画面の委託/オークション内訳・在庫ダッシュボード）で共通して使う。 */ .stat-card.ch-green-light { background: #e8f5e9; border-color: #a5d6a7; } .stat-card.ch-green-dark { background: #a5d6a7; border-color: #66bb6a; } .stat-card.ch-green-dark .stat-label { color: #1b5e20; } .stat-card.ch-pink-light { background: #fce4ec; border-color: #f48fb1; } .stat-card.ch-pink-dark { background: #f48fb1; border-color: #ec407a; } .stat-card.ch-pink-dark .stat-label { color: #880e4f; } .stat-card.ch-blue-light { background: #e3f2fd; border-color: #90caf9; } .stat-card.ch-blue-dark { background: #90caf9; border-color: #42a5f5; } .stat-card.ch-blue-dark .stat-label { color: #0d47a1; } .stat-label { font-size: 11px; color: var(--text-mute); margin-bottom: 4px; } .stat-value { font-size: 17px; font-weight: 700; } /* ------------------------------ 商品画像グリッド（PHASE4） ------------------------------ */ .photo-grid { display: flex; flex-wrap: wrap; gap: 10px; } .photo-thumb { width: 120px; height: 120px; border: 1px solid var(--border); border-radius: 8px; background: #f8f9fb; } /* ------------------------------ 履歴タイムライン（PHASE4） ------------------------------ */ .timeline { position: relative; padding-left: 18px; border-left: 2px solid var(--border); } .t-step { position: relative; padding: 0 0 16px 14px; } .t-step::before { content: ""; position: absolute; left: -21px; top: 3px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); } .t-date { font-size: 11px; color: var(--text-mute); } .t-title { font-size: 13.5px; font-weight: 600; margin: 2px 0; } .t-detail { font-size: 12.5px; color: var(--text-mute); }