/* ========================================================================== ざいのーと [最安値管理] スマホ横画面（Landscape）専用スタイル ========================================================================== */ /* ========================================================================== スマホ横画面対応（Landscape Mode & 画面低） シート幅を広く使って2大カラム（商品情報列 / 金額・数量列）に展開し、 スクロール無しで1画面にすべて収める最適化レイアウト ========================================================================== */ @media screen and (orientation: landscape) and (max-height: 520px), screen and (min-width: 600px) and (max-height: 520px) { /* 全体の横スクロール防止 */ html, body { overflow-x: hidden !important; max-width: 100vw !important; width: 100% !important; } .mobile-detail-sheet { width: 96vw !important; max-width: 920px !important; max-height: 98vh !important; border-radius: 12px 12px 0 0 !important; bottom: env(safe-area-inset-bottom, 0px) !important; } .sheet-drag-handle { width: 36px !important; height: 3px !important; margin: 3px auto 1px !important; } .sheet-header { padding: 3px 14px 4px !important; } .sheet-title { font-size: 14px !important; } .sheet-no-badge { font-size: 11.5px !important; padding: 2px 6px !important; } .sheet-close-btn { padding: 2px 8px !important; font-size: 18px !important; } /* ボディ: 左右2大カラムグリッド */ .sheet-body { padding: 4px 14px 2px !important; display: grid !important; grid-template-columns: 1fr 1fr !important; column-gap: 16px !important; row-gap: 4px !important; overflow-y: auto !important; align-content: start !important; flex: 1 1 auto !important; } .sheet-field-group { gap: 1px !important; } .sheet-label { font-size: 11px !important; font-weight: 700 !important; margin-bottom: 1.5px !important; white-space: nowrap !important; line-height: 1.2 !important; } .sheet-grid-2 { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 6px !important; } .sheet-input, .sheet-select { height: 29px !important; font-size: 13px !important; padding: 2px 7px !important; border-radius: 4px !important; min-width: 0 !important; } .sheet-name-input { font-size: 13.5px !important; font-weight: 700 !important; } /* 左列: 商品名(1) ➡ 分類・メーカー(2) ➡ 店舗・ジャンル(3) ➡ 特記メモ(4) */ .sheet-field-prod { grid-column: 1 / 2 !important; grid-row: 1 !important; } .sheet-field-gen-maker { grid-column: 1 / 2 !important; grid-row: 2 !important; } .sheet-field-shop-genre { grid-column: 1 / 2 !important; grid-row: 3 !important; } /* 4行目左列: 特記メモ */ .sheet-field-memo { grid-column: 1 / 2 !important; grid-row: 4 !important; } /* 右列: 内容量・単位(1) ➡ 税込・税抜/税率(2) ➡ 換算単価・記録日サマリー(3) */ .sheet-field-qty-unit { grid-column: 2 / 3 !important; grid-row: 1 !important; } .sheet-field-price { grid-column: 2 / 3 !important; grid-row: 2 !important; } /* 換算単価・記録日サマリーを今の半分（行高1行分・横並び）に圧縮（3行目右列） */ .sheet-field-meta { grid-column: 2 / 3 !important; grid-row: 3 !important; padding: 2px 10px !important; height: 29px !important; box-sizing: border-box !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; margin-top: 14px !important; font-size: 11.5px !important; border-radius: 4px !important; overflow: hidden !important; } .sheet-field-meta > div { display: inline-flex !important; align-items: center !important; white-space: nowrap !important; line-height: 1 !important; } .sheet-field-meta strong { font-size: 13.5px !important; line-height: 1 !important; } /* 空いた部分（4行目右列）に [更新] [推移] [削除] ボタンを配置 */ .sheet-inline-actions { grid-column: 2 / 3 !important; grid-row: 4 !important; display: flex !important; flex-direction: row !important; align-items: flex-end !important; gap: 6px !important; margin: 0 !important; padding-top: 14px !important; } .sheet-inline-actions .sheet-btn { height: 29px !important; font-size: 12.5px !important; padding: 0 10px !important; border-radius: 4px !important; white-space: nowrap !important; flex: 1 1 auto !important; display: flex !important; align-items: center !important; justify-content: center !important; } .sheet-inline-actions .sheet-btn-update { flex: 1.4 1 auto !important; } .sheet-inline-actions .sheet-btn-history { flex: 1 1 auto !important; } .sheet-inline-actions .sheet-btn-delete { flex: 0.9 1 auto !important; } /* フッターアクションバーを非表示にして1行短縮 */ .sheet-footer { display: none !important; } .sheet-btn { height: 29px !important; font-size: 12.5px !important; padding: 0 10px !important; border-radius: 4px !important; } } /* デスクトップ通常時のベーススタイル */ .mobile-title-tip { display: none; } /* 強制スマホモード時のツールチップ */ body.force-mobile-mode .app-title-group { display: grid !important; grid-template-columns: auto 1fr auto !important; grid-template-rows: auto auto !important; align-items: center !important; width: 100% !important; row-gap: 2px !important; column-gap: 8px !important; position: relative !important; } /* 左列 (Column 1): ざいのーと アイコン (上) ＆ [アプリ名] (下) */ body.force-mobile-mode .app-title { grid-column: 1 / 2 !important; grid-row: 1 / 3 !important; justify-self: start !important; display: flex !important; flex-direction: column !important; justify-content: center !important; gap: 2px !important; margin: 0 !important; line-height: 1.15 !important; } body.force-mobile-mode .app-title a { display: flex !important; flex-direction: column !important; gap: 2px !important; color: inherit !important; text-decoration: none !important; } body.force-mobile-mode .app-title-main, body.force-mobile-mode .app-title-tag { font-size: 17px !important; font-weight: 700 !important; white-space: nowrap !important; color: #ffffff !important; display: block !important; } /* スマホモード（縦・横）: tipは完全非表示 */ body.force-mobile-mode .mobile-title-tip, body.force-mobile-mode .mobile-title-tip.active { display: none !important; } body.force-mobile-mode .tab-button.management-help-anchor.help-visible::after { display: none !important; } [data-tooltip]::before, [data-tooltip]::after { display: none !important; } /* 中央列 (Column 2): 補足文 (上下2行エリア) */ body.force-mobile-mode .app-subtitle { grid-column: 2 / 3 !important; grid-row: 1 / 3 !important; justify-self: start !important; display: flex !important; flex-direction: column !important; justify-content: center !important; gap: 2px !important; margin: 0 !important; width: 100% !important; min-width: 0 !important; line-height: 1.25 !important; } body.force-mobile-mode .subtitle-line1, body.force-mobile-mode .subtitle-line2 { font-size: 11px !important; opacity: 0.85 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; min-width: 0 !important; display: block !important; } /* 右列 (Column 3): 1行目: 契約アイコン（プランバッジ） */ body.force-mobile-mode #zainotePlanBadge, body.force-mobile-mode .zainote-plan-badge { grid-column: 3 / 4 !important; grid-row: 1 !important; justify-self: end !important; margin: 0 !important; font-size: 11.5px !important; padding: 3px 8px !important; white-space: nowrap !important; } /* 右列 (Column 3): 2行目: 画面モード切替ボタン */ body.force-mobile-mode #zainoteModeToggleBtn, body.force-mobile-mode .zainote-mode-toggle-btn { grid-column: 3 / 4 !important; grid-row: 2 !important; justify-self: end !important; margin: 0 !important; font-size: 11px !important; padding: 3px 6px !important; white-space: nowrap !important; } /* ========================================================================== スマホ横画面（Landscape）ヘッダー配置: 5ボタン（.header-links）を「説明文」と「アイコン」の間に右寄せで割り込み配置 ========================================================================== */ @media screen and (orientation: landscape) and (max-height: 600px) { .app-header { display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto auto !important; grid-template-rows: auto auto !important; align-items: center !important; padding: 4px 8px !important; column-gap: 6px !important; row-gap: 2px !important; white-space: nowrap !important; } .app-title-group { display: contents !important; } /* 1. 左列: タイトル (ざいのーと アイコン / [アプリ名]) */ .app-title { grid-column: 1 / 2 !important; grid-row: 1 / 3 !important; justify-self: start !important; display: flex !important; flex-direction: column !important; justify-content: center !important; gap: 1px !important; margin: 0 !important; line-height: 1.15 !important; flex-shrink: 0 !important; } .app-title-main, .app-title-tag { font-size: 13.5px !important; font-weight: 700 !important; white-space: nowrap !important; color: #ffffff !important; display: block !important; } /* 2. 中央-左: 補足説明文 (上下2行エリア - 画面幅が狭い時は柔軟に縮小しプロジェクトボタンを保護) */ .app-subtitle { grid-column: 2 / 3 !important; grid-row: 1 / 3 !important; justify-self: start !important; display: flex !important; flex-direction: column !important; justify-content: center !important; gap: 1px !important; margin: 0 !important; min-width: 0 !important; max-width: 140px !important; line-height: 1.2 !important; overflow: hidden !important; } .subtitle-line1, .subtitle-line2 { font-size: 10px !important; opacity: 0.85 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; display: block !important; } /* 3. 中央-右: 5ボタン（最優先配置・絶対に追い出されないよう縮小・非表示ガード） */ .header-links { grid-column: 3 / 4 !important; grid-row: 1 / 3 !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: flex-end !important; justify-self: end !important; align-items: center !important; gap: 3px !important; margin: 0 !important; margin-left: auto !important; padding: 0 !important; flex-shrink: 0 !important; min-width: max-content !important; } .header-links a, .header-links .current-app { font-size: 10px !important; padding: 2.5px 5px !important; white-space: nowrap !important; flex-shrink: 0 !important; border-radius: 4px !important; } /* 4. 最右列: 契約アイコン & 画面切替ボタン */ #zainotePlanBadge, .zainote-plan-badge { grid-column: 4 / 5 !important; grid-row: 1 !important; justify-self: end !important; margin: 0 !important; font-size: 10px !important; padding: 2px 6px !important; white-space: nowrap !important; flex-shrink: 0 !important; } #zainoteModeToggleBtn, .zainote-mode-toggle-btn { grid-column: 4 / 5 !important; grid-row: 2 !important; justify-self: end !important; margin: 0 !important; font-size: 9.5px !important; padding: 2px 5px !important; white-space: nowrap !important; flex-shrink: 0 !important; } } /* PC等の横長画面でスマホモード（force-mobile-mode）にした場合の完全対応 */ @media screen and (orientation: landscape) { body.force-mobile-mode:not(.force-pc-mode) .app-header, html.force-mobile-mode:not(.force-pc-mode) .app-header { display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto auto !important; grid-template-rows: auto auto !important; align-items: center !important; padding: 4px 8px !important; column-gap: 6px !important; row-gap: 2px !important; white-space: nowrap !important; flex-direction: row !important; } body.force-mobile-mode:not(.force-pc-mode) .app-title-group, html.force-mobile-mode:not(.force-pc-mode) .app-title-group { display: contents !important; } body.force-mobile-mode:not(.force-pc-mode) .app-title, html.force-mobile-mode:not(.force-pc-mode) .app-title { grid-column: 1 / 2 !important; grid-row: 1 / 3 !important; justify-self: start !important; display: flex !important; flex-direction: column !important; justify-content: center !important; gap: 1px !important; margin: 0 !important; line-height: 1.15 !important; flex-shrink: 0 !important; } body.force-mobile-mode:not(.force-pc-mode) .app-title-main, body.force-mobile-mode:not(.force-pc-mode) .app-title-tag, html.force-mobile-mode:not(.force-pc-mode) .app-title-main, html.force-mobile-mode:not(.force-pc-mode) .app-title-tag { font-size: 13.5px !important; font-weight: 700 !important; white-space: nowrap !important; color: #ffffff !important; display: block !important; } body.force-mobile-mode:not(.force-pc-mode) .app-subtitle, html.force-mobile-mode:not(.force-pc-mode) .app-subtitle { grid-column: 2 / 3 !important; grid-row: 1 / 3 !important; justify-self: start !important; display: flex !important; flex-direction: column !important; justify-content: center !important; gap: 1px !important; margin: 0 !important; min-width: 0 !important; max-width: 140px !important; line-height: 1.2 !important; overflow: hidden !important; } body.force-mobile-mode:not(.force-pc-mode) .subtitle-line1, body.force-mobile-mode:not(.force-pc-mode) .subtitle-line2, html.force-mobile-mode:not(.force-pc-mode) .subtitle-line1, html.force-mobile-mode:not(.force-pc-mode) .subtitle-line2 { font-size: 10px !important; opacity: 0.85 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; display: block !important; } body.force-mobile-mode:not(.force-pc-mode) .header-links, html.force-mobile-mode:not(.force-pc-mode) .header-links { grid-column: 3 / 4 !important; grid-row: 1 / 3 !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: flex-end !important; justify-self: end !important; align-items: center !important; gap: 3px !important; margin: 0 !important; margin-left: auto !important; padding: 0 !important; flex-shrink: 0 !important; min-width: max-content !important; } body.force-mobile-mode:not(.force-pc-mode) .header-links a, body.force-mobile-mode:not(.force-pc-mode) .header-links .current-app, html.force-mobile-mode:not(.force-pc-mode) .header-links a, html.force-mobile-mode:not(.force-pc-mode) .header-links .current-app { font-size: 10px !important; padding: 2.5px 5px !important; white-space: nowrap !important; flex-shrink: 0 !important; border-radius: 4px !important; } body.force-mobile-mode:not(.force-pc-mode) #zainotePlanBadge, body.force-mobile-mode:not(.force-pc-mode) .zainote-plan-badge, html.force-mobile-mode:not(.force-pc-mode) #zainotePlanBadge, html.force-mobile-mode:not(.force-pc-mode) .zainote-plan-badge { grid-column: 4 / 5 !important; grid-row: 1 !important; justify-self: end !important; margin: 0 !important; font-size: 10px !important; padding: 2px 6px !important; white-space: nowrap !important; flex-shrink: 0 !important; } body.force-mobile-mode:not(.force-pc-mode) #zainoteModeToggleBtn, body.force-mobile-mode:not(.force-pc-mode) .zainote-mode-toggle-btn, html.force-mobile-mode:not(.force-pc-mode) #zainoteModeToggleBtn, html.force-mobile-mode:not(.force-pc-mode) .zainote-mode-toggle-btn { grid-column: 4 / 5 !important; grid-row: 2 !important; justify-self: end !important; margin: 0 !important; font-size: 9.5px !important; padding: 2px 5px !important; white-space: nowrap !important; flex-shrink: 0 !important; } } /* ========================================================================== スマホ横画面（Landscape）データ管理タブ＆ソートエリア: - アクションバー: 1行集約配置・20列 - データ管理タブ: 1行3ボタン横並び（左タイトル108px + 右3ボタン） ========================================================================== */ @media screen and (orientation: landscape) and (max-height: 600px), screen and (max-width: 768px) and (orientation: landscape) { /* グローバルアクションバー（スマホ横画面: 1行集約配置・上ラベル化・不要ボタン非表示: zaiko踏襲） */ .action-bar-container, .global-action-bar { display: flex !important; flex-direction: row !important; align-items: flex-end !important; justify-content: flex-start !important; gap: 14px !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; padding: 4px 10px !important; margin-top: 2px !important; margin-bottom: 4px !important; box-sizing: border-box !important; overflow-x: auto !important; overflow-y: hidden !important; white-space: nowrap !important; } /* 一括保存ボタン・ソートボタンを完全非表示 */ #saveAllButton, #sortExecuteButton, .save-group-label { display: none !important; } /* 共通上ラベル */ .action-bar-item-label, .sort-group-label, .color-priority-label { display: block !important; height: 16px !important; min-height: 16px !important; max-height: 16px !important; line-height: 16px !important; font-size: 11.5px !important; color: #475569 !important; font-weight: 500 !important; margin: 0 0 2px 0 !important; padding: 0 !important; white-space: nowrap !important; box-sizing: border-box !important; } .action-bar-left { display: flex !important; flex-direction: row !important; align-items: flex-end !important; gap: 10px !important; flex: 0 0 auto !important; } .action-bar-right { display: flex !important; flex-direction: row !important; align-items: flex-end !important; gap: 14px !important; flex: 0 0 auto !important; margin-left: 0 !important; } .action-bar-left .filter-input-group { display: flex !important; flex-direction: column !important; align-items: flex-start !important; flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; margin: 0 !important; gap: 0 !important; } .action-bar-left .filter-input-group:has(#genreFilter), .action-bar-left .filter-input-group:has(#shopFilter), .action-bar-left .filter-input-group:has(#searchInput) { display: none !important; } .action-bar-left .filter-input-group:has(#periodFilter) select { width: auto !important; min-width: 90px !important; height: 30px !important; font-size: 11.5px !important; padding: 0 4px !important; border: 1px solid #cbd5e1 !important; border-radius: 5px !important; background: #ffffff !important; box-sizing: border-box !important; } .action-bar-left .filter-input-group:has(#displayModeSelect) select { width: auto !important; min-width: 120px !important; height: 30px !important; font-size: 11.5px !important; padding: 0 4px !important; border: 1px solid #cbd5e1 !important; border-radius: 5px !important; background: #ffffff !important; box-sizing: border-box !important; } .action-bar-left .filter-input-group:has(#sortSelect) select { width: auto !important; min-width: 160px !important; height: 30px !important; font-size: 11.5px !important; padding: 0 6px !important; border: 1px solid #cbd5e1 !important; border-radius: 5px !important; background: #ffffff !important; box-sizing: border-box !important; } .color-priority-control { display: flex !important; flex-direction: column !important; align-items: flex-start !important; flex: 0 0 auto !important; gap: 0 !important; width: auto !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; border: none !important; } .color-priority-buttons { display: flex !important; align-items: center !important; gap: 3px !important; height: 30px !important; } .color-priority-buttons button, .color-priority-control button { min-width: 0 !important; width: auto !important; height: 30px !important; min-height: 30px !important; max-height: 30px !important; line-height: 28px !important; font-size: 11.5px !important; font-weight: 600 !important; padding: 0 8px !important; border-radius: 4px !important; border: 1px solid #cbd5e1 !important; background: #ffffff !important; white-space: nowrap !important; box-sizing: border-box !important; } .color-priority-buttons button.active, .color-priority-control button.active { background-color: #8c5d06 !important; color: #ffffff !important; border-color: #6e4905 !important; } .meta-info-control { display: flex !important; align-items: center !important; height: 30px !important; flex: 0 0 auto !important; margin: 0 !important; padding: 0 !important; } #lastSavedTime, .save-time-display { font-size: 11px !important; color: #5c3c04 !important; white-space: nowrap !important; line-height: 30px !important; } white-space: nowrap !important; } /* データ管理タブ（1行3ボタン横並び: 左タイトル108px + 右3ボタン） */ .management-tab-content { width: 100% !important; gap: 0 !important; box-sizing: border-box !important; } .management-group { display: grid !important; grid-template-columns: 94px repeat(3, minmax(0, 1fr)) !important; gap: 4px !important; width: 100% !important; margin-bottom: 3px !important; align-items: stretch !important; box-sizing: border-box !important; } .management-group:last-child { margin-bottom: 1px !important; } #tab-manage { padding-bottom: 1px !important; } body:not(.force-pc-mode) .management-group-title, .management-group-title { grid-column: 1 / 2 !important; grid-row: 1 !important; width: 94px !important; min-width: 94px !important; max-width: 94px !important; height: 36px !important; border-right: 2px solid #decfae !important; border-bottom: none !important; padding: 2px 6px !important; margin: 0 !important; font-size: 11px !important; font-weight: 700 !important; white-space: nowrap !important; justify-content: flex-start !important; text-align: left !important; display: inline-flex !important; align-items: center !important; } } /* ========================================================================== スマホ全モード共通（縦・横・強制スマホ）: - タブ余白削減 (padding: 4px 8px 3px) - ドロップダウン・テキストボックス・日付: 上下サイズ30pxに圧縮 - 価格登録フォームのサイズばらつき完全解消（ラベル高さを16px固定、換算単価・税率ボタン枠・追加ボタンを完全統一） - データ管理タブボタン: 30px統一 - ソートエリア: 30px統一 ========================================================================== */ @media (max-width: 768px), (max-height: 600px) and (orientation: landscape), (orientation: portrait) and (max-width: 768px) { #tab-search, #tab-add, #tab-manage, .tab-content-panel { padding: 4px 8px 3px !important; margin-bottom: 4px !important; min-height: 0 !important; } .search-tab-content .form-item label { font-size: 10.5px !important; margin-bottom: 1px !important; } #tabGenreFilter, #tabShopFilter, #tabSearchInput, #tabSearchButton, #tabClearFilterButton, #tabFilterStatus { height: 30px !important; min-height: 30px !important; max-height: 30px !important; font-size: 11.5px !important; line-height: 28px !important; box-sizing: border-box !important; } /* データ管理タブ: ボタン上下サイズを30pxに統一 */ .management-tab-content .custom-button, .management-group .custom-button, .management-group a, .management-group button, .management-group label { height: 30px !important; min-height: 30px !important; max-height: 30px !important; font-size: 12px !important; padding: 2px 4px !important; box-sizing: border-box !important; border-radius: 5px !important; line-height: 1.2 !important; } /* ソートエリア: 上下サイズを30pxに統一 */ .action-bar-left .filter-input-group:has(#sortSelect) select, .action-bar-left .filter-input-group:has(#sortSelect) .sort-execute-button, .action-bar-left .filter-input-group:has(#periodFilter) select, .action-bar-left .filter-input-group:has(#displayModeSelect) select, .action-bar-container #saveAllButton, #saveAllButton, #periodFilter, #displayModeSelect, #sortSelect, #sortExecuteButton { height: 30px !important; min-height: 30px !important; max-height: 30px !important; line-height: 28px !important; box-sizing: border-box !important; } /* タブ内: ドロップダウン・テキストボックスの上下サイズを30pxに圧縮（上下余白・パディングを削減） */ .tab-content-panel input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .tab-content-panel select, #tab-search input, #tab-search select, #tab-add input, #tab-add select, #addPriceForm input, #addPriceForm select, #itemDate, #itemShop, #itemGenre, #itemGenericName, #itemMaker, #itemProductName, #itemQuantity, #itemUnit, #itemTaxRate, #itemPriceEx, #itemPriceIn, #itemMemo { height: 30px !important; min-height: 30px !important; max-height: 30px !important; line-height: 28px !important; padding: 0 6px !important; box-sizing: border-box !important; font-size: 12px !important; } /* 換算単価表示枠のサイズを完全一致（30px） */ #calcUnitPriceDisplay { height: 30px !important; min-height: 30px !important; max-height: 30px !important; line-height: 28px !important; font-size: 12px !important; display: flex !important; align-items: center !important; padding: 0 6px !important; box-sizing: border-box !important; background: #f8fafc !important; border: 1px solid #cbd5e1 !important; border-radius: 5px !important; } /* 税率プリセットボタン枠 */ .form-item:has(#itemTaxRate) > div { height: 30px !important; min-height: 30px !important; max-height: 30px !important; box-sizing: border-box !important; } .tax-preset-btn { font-size: 10px !important; padding: 0 !important; line-height: 1 !important; } /* タブ内ボタンの高さも30pxで揃える */ #addPriceSubmitBtn, #tabSearchButton, #tabClearFilterButton { height: 30px !important; min-height: 30px !important; max-height: 30px !important; line-height: 28px !important; box-sizing: border-box !important; } /* 価格登録フォームの全ラベル高さを16px固定にして要素間の上下ずれ・ばらつきを解消 */ #addPriceForm label, .add-form-container label, .form-item label { height: 16px !important; min-height: 16px !important; max-height: 16px !important; line-height: 16px !important; font-size: 11px !important; margin: 0 0 2px 0 !important; padding: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; box-sizing: border-box !important; } #addPriceForm label strong, .form-item label strong { font-size: 11px !important; line-height: 16px !important; } } /* 強制スマホモード（PCでの検証用）にも同一ルールを適用 */ body.force-mobile-mode #tab-search, body.force-mobile-mode #tab-add, body.force-mobile-mode #tab-manage, body.force-mobile-mode .tab-content-panel { padding: 4px 8px 3px !important; margin-bottom: 4px !important; min-height: 0 !important; } body.force-mobile-mode #tabGenreFilter, body.force-mobile-mode #tabShopFilter, body.force-mobile-mode #tabSearchInput, body.force-mobile-mode #tabSearchButton, body.force-mobile-mode #tabClearFilterButton, body.force-mobile-mode #tabFilterStatus, body.force-mobile-mode .management-tab-content .custom-button, body.force-mobile-mode .management-group .custom-button, body.force-mobile-mode .management-group a, body.force-mobile-mode .management-group button, body.force-mobile-mode .management-group label, body.force-mobile-mode .action-bar-left .filter-input-group:has(#sortSelect) select, body.force-mobile-mode .action-bar-left .filter-input-group:has(#sortSelect) .sort-execute-button, body.force-mobile-mode #saveAllButton, body.force-mobile-mode #periodFilter, body.force-mobile-mode #displayModeSelect, body.force-mobile-mode #sortSelect, body.force-mobile-mode #sortExecuteButton, body.force-mobile-mode .tab-content-panel input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), body.force-mobile-mode .tab-content-panel select, body.force-mobile-mode #calcUnitPriceDisplay, body.force-mobile-mode #addPriceSubmitBtn { height: 30px !important; min-height: 30px !important; max-height: 30px !important; box-sizing: border-box !important; } body.force-mobile-mode #addPriceForm label, body.force-mobile-mode .form-item label { height: 16px !important; min-height: 16px !important; max-height: 16px !important; line-height: 16px !important; font-size: 11px !important; margin: 0 0 2px 0 !important; padding: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* ========================================================================== PCでの強制スマホモード（横長モニタ環境）: 画面解像度（max-width/max-height）に縛られず、横長時は確実に横モードレイアウトを適用 ========================================================================== */ @media screen and (orientation: landscape) { /* 1. メイン表横スクロール */ body.force-mobile-mode:not(.force-pc-mode) .table-container { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; scrollbar-width: thin !important; } body.force-mobile-mode:not(.force-pc-mode) .table-container::-webkit-scrollbar { display: block !important; height: 6px !important; } body.force-mobile-mode:not(.force-pc-mode) .table-container::-webkit-scrollbar-thumb { background: #c9b27a !important; border-radius: 3px !important; } /* 2. グローバルアクションバー（スマホ横画面: 1行集約配置・自然な左詰め＆間延び完全防止） */ body.force-mobile-mode:not(.force-pc-mode) .action-bar-container, body.force-mobile-mode:not(.force-pc-mode) .global-action-bar { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: 4px !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; padding: 4px 6px !important; margin-top: 2px !important; margin-bottom: 4px !important; box-sizing: border-box !important; overflow-x: auto !important; overflow-y: hidden !important; white-space: nowrap !important; } body.force-mobile-mode:not(.force-pc-mode) .action-bar-container, body.force-mobile-mode:not(.force-pc-mode) .global-action-bar { display: flex !important; flex-direction: row !important; align-items: flex-end !important; justify-content: flex-start !important; gap: 14px !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; padding: 4px 10px !important; margin-top: 2px !important; margin-bottom: 4px !important; box-sizing: border-box !important; overflow-x: auto !important; overflow-y: hidden !important; white-space: nowrap !important; } body.force-mobile-mode:not(.force-pc-mode) #saveAllButton, body.force-mobile-mode:not(.force-pc-mode) #sortExecuteButton, body.force-mobile-mode:not(.force-pc-mode) .save-group-label { display: none !important; } body.force-mobile-mode:not(.force-pc-mode) .action-bar-item-label, body.force-mobile-mode:not(.force-pc-mode) .sort-group-label, body.force-mobile-mode:not(.force-pc-mode) .color-priority-label { display: block !important; height: 16px !important; min-height: 16px !important; max-height: 16px !important; line-height: 16px !important; font-size: 11.5px !important; color: #475569 !important; font-weight: 500 !important; margin: 0 0 2px 0 !important; padding: 0 !important; white-space: nowrap !important; box-sizing: border-box !important; } body.force-mobile-mode:not(.force-pc-mode) .action-bar-left { display: flex !important; flex-direction: row !important; align-items: flex-end !important; gap: 10px !important; flex: 0 0 auto !important; } body.force-mobile-mode:not(.force-pc-mode) .action-bar-right { display: flex !important; flex-direction: row !important; align-items: flex-end !important; gap: 14px !important; flex: 0 0 auto !important; margin-left: 0 !important; } body.force-mobile-mode:not(.force-pc-mode) .action-bar-left .filter-input-group { display: flex !important; flex-direction: column !important; align-items: flex-start !important; flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; margin: 0 !important; gap: 0 !important; } body.force-mobile-mode:not(.force-pc-mode) .action-bar-left .filter-input-group:has(#genreFilter), body.force-mobile-mode:not(.force-pc-mode) .action-bar-left .filter-input-group:has(#shopFilter), body.force-mobile-mode:not(.force-pc-mode) .action-bar-left .filter-input-group:has(#searchInput) { display: none !important; } body.force-mobile-mode:not(.force-pc-mode) .action-bar-left .filter-input-group:has(#periodFilter) select { width: auto !important; min-width: 90px !important; height: 30px !important; font-size: 11.5px !important; padding: 0 4px !important; border: 1px solid #cbd5e1 !important; border-radius: 5px !important; background: #ffffff !important; box-sizing: border-box !important; } body.force-mobile-mode:not(.force-pc-mode) .action-bar-left .filter-input-group:has(#displayModeSelect) select { width: auto !important; min-width: 120px !important; height: 30px !important; font-size: 11.5px !important; padding: 0 4px !important; border: 1px solid #cbd5e1 !important; border-radius: 5px !important; background: #ffffff !important; box-sizing: border-box !important; } body.force-mobile-mode:not(.force-pc-mode) .action-bar-left .filter-input-group:has(#sortSelect) select { width: auto !important; min-width: 160px !important; height: 30px !important; font-size: 11.5px !important; padding: 0 6px !important; border: 1px solid #cbd5e1 !important; border-radius: 5px !important; background: #ffffff !important; box-sizing: border-box !important; } body.force-mobile-mode:not(.force-pc-mode) .color-priority-control { display: flex !important; flex-direction: column !important; align-items: flex-start !important; flex: 0 0 auto !important; gap: 0 !important; width: auto !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; border: none !important; } body.force-mobile-mode:not(.force-pc-mode) .color-priority-buttons { display: flex !important; align-items: center !important; gap: 3px !important; height: 30px !important; } body.force-mobile-mode:not(.force-pc-mode) .color-priority-buttons button, body.force-mobile-mode:not(.force-pc-mode) .color-priority-control button { min-width: 0 !important; width: auto !important; height: 30px !important; min-height: 30px !important; max-height: 30px !important; line-height: 28px !important; font-size: 11.5px !important; font-weight: 600 !important; padding: 0 8px !important; border-radius: 4px !important; border: 1px solid #cbd5e1 !important; background: #ffffff !important; white-space: nowrap !important; box-sizing: border-box !important; } body.force-mobile-mode:not(.force-pc-mode) .color-priority-buttons button.active, body.force-mobile-mode:not(.force-pc-mode) .color-priority-control button.active { background-color: #8c5d06 !important; color: #ffffff !important; border-color: #6e4905 !important; } body.force-mobile-mode:not(.force-pc-mode) .meta-info-control { display: flex !important; align-items: center !important; height: 30px !important; flex: 0 0 auto !important; margin: 0 !important; padding: 0 !important; } body.force-mobile-mode:not(.force-pc-mode) #lastSavedTime, body.force-mobile-mode:not(.force-pc-mode) .save-time-display { font-size: 11px !important; color: #5c3c04 !important; white-space: nowrap !important; line-height: 30px !important; } /* 3. データ管理タブ（1行3ボタン横並び: 左タイトル108px + 右3ボタン） */ body.force-mobile-mode:not(.force-pc-mode) .management-tab-content { width: 100% !important; gap: 0 !important; box-sizing: border-box !important; } body.force-mobile-mode:not(.force-pc-mode) .management-group { display: grid !important; grid-template-columns: 94px repeat(3, minmax(0, 1fr)) !important; gap: 4px !important; width: 100% !important; margin-bottom: 3px !important; align-items: stretch !important; box-sizing: border-box !important; } body.force-mobile-mode:not(.force-pc-mode) .management-group:last-child { margin-bottom: 1px !important; } body.force-mobile-mode:not(.force-pc-mode) #tab-manage { padding-bottom: 1px !important; } body.force-mobile-mode:not(.force-pc-mode) body:not(.force-pc-mode) .management-group-title, .management-group-title { grid-column: 1 / 2 !important; grid-row: 1 !important; width: 94px !important; min-width: 94px !important; max-width: 94px !important; height: 36px !important; border-right: 2px solid #decfae !important; border-bottom: none !important; padding: 2px 6px !important; margin: 0 !important; font-size: 11px !important; font-weight: 700 !important; white-space: nowrap !important; justify-content: flex-start !important; text-align: left !important; display: inline-flex !important; align-items: center !important; } /* 4. モバイル詳細シート（横画面最適化: 左右2大カラムグリッド） */ body.force-mobile-mode:not(.force-pc-mode) .mobile-detail-sheet { width: 96vw !important; max-width: 920px !important; max-height: 98vh !important; border-radius: 12px 12px 0 0 !important; } body.force-mobile-mode:not(.force-pc-mode) .sheet-drag-handle { width: 36px !important; height: 3px !important; margin: 3px auto 1px !important; } body.force-mobile-mode:not(.force-pc-mode) .sheet-header { padding: 3px 14px 4px !important; } body.force-mobile-mode:not(.force-pc-mode) .sheet-title { font-size: 14px !important; } body.force-mobile-mode:not(.force-pc-mode) .sheet-no-badge { font-size: 11.5px !important; padding: 2px 6px !important; } body.force-mobile-mode:not(.force-pc-mode) .sheet-close-btn { padding: 2px 8px !important; font-size: 18px !important; } body.force-mobile-mode:not(.force-pc-mode) .sheet-body { padding: 4px 14px 2px !important; display: grid !important; grid-template-columns: 1fr 1fr !important; column-gap: 16px !important; row-gap: 4px !important; overflow-y: auto !important; align-content: start !important; flex: 1 1 auto !important; } body.force-mobile-mode:not(.force-pc-mode) .sheet-field-group { gap: 1px !important; } body.force-mobile-mode:not(.force-pc-mode) .sheet-label { font-size: 11px !important; font-weight: 700 !important; margin-bottom: 1.5px !important; white-space: nowrap !important; line-height: 1.2 !important; } body.force-mobile-mode:not(.force-pc-mode) .sheet-grid-2 { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 6px !important; } body.force-mobile-mode:not(.force-pc-mode) .sheet-input, body.force-mobile-mode:not(.force-pc-mode) .sheet-select { height: 29px !important; font-size: 12px !important; padding: 2px 6px !important; border-radius: 4px !important; } body.force-mobile-mode:not(.force-pc-mode) .sheet-name-input { font-size: 13.5px !important; font-weight: 700 !important; } body.force-mobile-mode:not(.force-pc-mode) .sheet-field-prod { grid-column: 1 / 2 !important; grid-row: 1 !important; } body.force-mobile-mode:not(.force-pc-mode) .sheet-field-gen-maker { grid-column: 1 / 2 !important; grid-row: 2 !important; } body.force-mobile-mode:not(.force-pc-mode) .sheet-field-shop-genre { grid-column: 1 / 2 !important; grid-row: 3 !important; } body.force-mobile-mode:not(.force-pc-mode) .sheet-field-memo { grid-column: 1 / 2 !important; grid-row: 4 !important; } body.force-mobile-mode:not(.force-pc-mode) .sheet-field-qty-unit { grid-column: 2 / 3 !important; grid-row: 1 !important; } body.force-mobile-mode:not(.force-pc-mode) .sheet-field-price { grid-column: 2 / 3 !important; grid-row: 2 !important; } body.force-mobile-mode:not(.force-pc-mode) .sheet-field-meta { grid-column: 2 / 3 !important; grid-row: 3 !important; padding: 2px 10px !important; height: 29px !important; box-sizing: border-box !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; margin-top: 14px !important; font-size: 11.5px !important; border-radius: 4px !important; overflow: hidden !important; } body.force-mobile-mode:not(.force-pc-mode) .sheet-field-meta > div { display: inline-flex !important; align-items: center !important; white-space: nowrap !important; line-height: 1 !important; } body.force-mobile-mode:not(.force-pc-mode) .sheet-field-meta strong { font-size: 13.5px !important; line-height: 1 !important; } body.force-mobile-mode:not(.force-pc-mode) .sheet-footer { display: none !important; } body.force-mobile-mode:not(.force-pc-mode) .sheet-inline-actions { grid-column: 2 / 3 !important; grid-row: 4 !important; display: flex !important; flex-direction: row !important; align-items: flex-end !important; gap: 6px !important; margin: 0 !important; padding-top: 14px !important; } body.force-mobile-mode:not(.force-pc-mode) .sheet-inline-actions .sheet-btn { height: 29px !important; font-size: 12.5px !important; padding: 0 10px !important; border-radius: 4px !important; white-space: nowrap !important; flex: 1 1 auto !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 4px !important; } } /* 記録日列の飛び出し防止・左右均等の隙間（モード共通） */ .price-table th:nth-child(2), .price-table td:nth-child(2) { min-width: 94px !important; width: 108px !important; } .price-table input[type="date"] { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; padding: 0 4px !important; } /* スマホ横画面: 枠線・矢印・背景を削ってテキスト化 ＆ 入力禁止（スクロール誤タップ防止: zaiko / recipe踏襲） */ @media screen and (orientation: landscape) and (max-height: 600px), screen and (max-width: 768px) and (orientation: landscape) { body:not(.force-pc-mode) #priceTable tbody td input, body:not(.force-pc-mode) #priceTable tbody td select, body:not(.force-pc-mode) #priceTable tbody td .table-input, body:not(.force-pc-mode) #priceTable tbody td .table-select { border: none !important; background: transparent !important; box-shadow: none !important; outline: none !important; padding: 0 !important; margin: 0 !important; pointer-events: none !important; user-select: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; color: inherit !important; font-size: 12.5px !important; font-weight: 500 !important; width: auto !important; min-width: 0 !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; line-height: 1.25 !important; } body:not(.force-pc-mode) #priceTable tbody td input::-webkit-inner-spin-button, body:not(.force-pc-mode) #priceTable tbody td input::-webkit-outer-spin-button, body:not(.force-pc-mode) #priceTable tbody td input::-webkit-calendar-picker-indicator { display: none !important; -webkit-appearance: none !important; } body:not(.force-pc-mode) #priceTable th:nth-child(13), body:not(.force-pc-mode) #priceTable td:nth-child(13), body:not(.force-pc-mode) #priceTable th:last-child, body:not(.force-pc-mode) #priceTable td:last-child, body:not(.force-pc-mode) #priceTable .row-action-cell, body:not(.force-pc-mode) #priceTable .row-action-trigger, body:not(.force-pc-mode) #priceTable .row-action-menu { display: none !important; } body:not(.force-pc-mode) #priceTable tbody td { vertical-align: middle !important; padding: 4px 2px !important; } } body.force-mobile-mode:not(.force-pc-mode) #priceTable tbody td input, body.force-mobile-mode:not(.force-pc-mode) #priceTable tbody td select, body.force-mobile-mode:not(.force-pc-mode) #priceTable tbody td .table-input, body.force-mobile-mode:not(.force-pc-mode) #priceTable tbody td .table-select { border: none !important; background: transparent !important; box-shadow: none !important; outline: none !important; padding: 0 !important; margin: 0 !important; pointer-events: none !important; user-select: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; color: inherit !important; font-size: 12.5px !important; font-weight: 500 !important; width: auto !important; min-width: 0 !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; line-height: 1.25 !important; } body.force-mobile-mode:not(.force-pc-mode) #priceTable tbody td input::-webkit-inner-spin-button, body.force-mobile-mode:not(.force-pc-mode) #priceTable tbody td input::-webkit-outer-spin-button, body.force-mobile-mode:not(.force-pc-mode) #priceTable tbody td input::-webkit-calendar-picker-indicator { display: none !important; -webkit-appearance: none !important; } body.force-mobile-mode:not(.force-pc-mode) #priceTable th:nth-child(13), body.force-mobile-mode:not(.force-pc-mode) #priceTable td:nth-child(13), body.force-mobile-mode:not(.force-pc-mode) #priceTable th:last-child, body.force-mobile-mode:not(.force-pc-mode) #priceTable td:last-child, body.force-mobile-mode:not(.force-pc-mode) #priceTable .row-action-cell, body.force-mobile-mode:not(.force-pc-mode) #priceTable .row-action-trigger, body.force-mobile-mode:not(.force-pc-mode) #priceTable .row-action-menu { display: none !important; } body.force-mobile-mode:not(.force-pc-mode) #priceTable tbody td { vertical-align: middle !important; padding: 4px 2px !important; } /* スマホ横画面モード時：No列の数字をクリッカブルとしてアンダーライン表示 */ #priceTable tbody tr td:first-child, #priceTable tbody tr td:first-child .no-text, #priceTable tbody tr td:first-child .no-cell-content, body.force-mobile-mode #priceTable tbody td:first-child, body.force-mobile-mode #priceTable tbody td:first-child .no-text, body.force-mobile-mode #priceTable tbody td:first-child .no-cell-content, body:not(.force-pc-mode) #priceTable tbody td:first-child, body:not(.force-pc-mode) #priceTable tbody td:first-child .no-text, body:not(.force-pc-mode) #priceTable tbody td:first-child .no-cell-content { cursor: pointer !important; font-weight: 700 !important; text-decoration: underline !important; text-underline-offset: 2px !important; border-bottom: 1px solid #ccc !important; } #priceTable tbody tr td:first-child:hover, #priceTable tbody tr td:first-child:hover .no-text { background-color: #fef3c7 !important; color: #b45309 !important; text-decoration: underline !important; } #priceTable tbody tr td:first-child:active { background-color: #fde68a !important; } /* ========================================================================== スマホ横画面（Landscape）ではアイコンを通常表示に復元し、元のボタン幅・高さを維持 ========================================================================== */ @media screen and (orientation: landscape) and (max-height: 600px) { .header-links .nav-icon { display: inline !important; } .header-links { width: auto !important; justify-content: flex-end !important; } .header-links a, .header-links .current-app { flex: 0 0 auto !important; } } @media screen and (orientation: landscape) { body.force-mobile-mode:not(.force-pc-mode) .header-links .nav-icon, html.force-mobile-mode:not(.force-pc-mode) .header-links .nav-icon { display: inline !important; } body.force-mobile-mode:not(.force-pc-mode) .header-links, html.force-mobile-mode:not(.force-pc-mode) .header-links { width: auto !important; justify-content: flex-end !important; } body.force-mobile-mode:not(.force-pc-mode) .header-links a, body.force-mobile-mode:not(.force-pc-mode) .header-links .current-app, html.force-mobile-mode:not(.force-pc-mode) .header-links a, html.force-mobile-mode:not(.force-pc-mode) .header-links .current-app { flex: 0 0 auto !important; } } /* スマホ横用 税込表示 (例: 180 (8%)) */ @media (max-width: 768px), (max-height: 500px) and (orientation: landscape) { body:not(.force-pc-mode) .table-tax-group { display: none !important; } body:not(.force-pc-mode) .mobile-tax-display { display: block !important; text-align: right !important; white-space: nowrap !important; font-weight: 700 !important; font-size: 12.5px !important; padding-right: 2px !important; } body:not(.force-pc-mode) .table-unit-group { display: none !important; } body:not(.force-pc-mode) .mobile-unit-display { display: block !important; text-align: center !important; white-space: nowrap !important; font-weight: 500 !important; font-size: 12.5px !important; line-height: 1.25 !important; } } body.force-mobile-mode:not(.force-pc-mode) .table-tax-group, html.force-mobile-mode:not(.force-pc-mode) .table-tax-group { display: none !important; } body.force-mobile-mode:not(.force-pc-mode) .mobile-tax-display, html.force-mobile-mode:not(.force-pc-mode) .mobile-tax-display { display: block !important; text-align: right !important; white-space: nowrap !important; font-weight: 700 !important; font-size: 12.5px !important; padding-right: 2px !important; } body.force-mobile-mode:not(.force-pc-mode) .table-unit-group, html.force-mobile-mode:not(.force-pc-mode) .table-unit-group { display: none !important; } body.force-mobile-mode:not(.force-pc-mode) .mobile-unit-display, html.force-mobile-mode:not(.force-pc-mode) .mobile-unit-display { display: block !important; text-align: center !important; white-space: nowrap !important; font-weight: 500 !important; font-size: 12.5px !important; line-height: 1.25 !important; } /* スマホ横: 保存アクションブロック完全非表示 */ @media screen and (max-width: 900px) and (orientation: landscape), screen and (max-height: 520px) and (orientation: landscape) { body:not(.force-pc-mode) .save-action-group, body:not(.force-pc-mode) .save-action-group * { display: none !important; } } body.force-mobile-mode:not(.force-pc-mode) .save-action-group, body.force-mobile-mode:not(.force-pc-mode) .save-action-group * { display: none !important; } /* スマホ横画面: th 内側パディング調整 */ @media screen and (orientation: landscape) and (max-height: 600px), screen and (max-width: 900px) and (orientation: landscape) { #priceTable thead th, .price-table th { padding: 4px 2px !important; } } body.force-mobile-mode:not(.force-pc-mode) #priceTable thead th, body.force-mobile-mode:not(.force-pc-mode) .price-table th { padding: 4px 2px !important; } /* スマホ横: ヘッダー統一 (zaiko基準 height:24px, font-size:10px) */ @media screen and (orientation: landscape) and (max-height: 600px), screen and (max-width: 900px) and (orientation: landscape) { #priceTable thead th, .price-table th { height: 24px !important; max-height: 24px !important; box-sizing: border-box !important; font-size: 10px !important; line-height: normal !important; text-align: center !important; vertical-align: middle !important; padding: 4px 2px !important; white-space: nowrap !important; } } body.force-mobile-mode:not(.force-pc-mode) #priceTable thead th, body.force-mobile-mode:not(.force-pc-mode) .price-table th { height: 24px !important; max-height: 24px !important; box-sizing: border-box !important; font-size: 10px !important; line-height: normal !important; text-align: center !important; vertical-align: middle !important; padding: 4px 2px !important; white-space: nowrap !important; } /* 内容量ヘッダー: スマホ横では「＋単位」を非表示にして省スペース化 */ @media screen and (orientation: landscape) and (max-height: 600px), screen and (max-width: 900px) and (orientation: landscape) { #priceTable th .header-unit-suffix, .price-table th .header-unit-suffix { display: none !important; } } body.force-mobile-mode:not(.force-pc-mode) #priceTable th .header-unit-suffix, body.force-mobile-mode:not(.force-pc-mode) .price-table th .header-unit-suffix { display: none !important; } /* スマホ横: 内容量列(-37px)の圧縮と大分類品名・商品名列の拡幅 */ @media screen and (orientation: landscape) and (max-height: 600px), screen and (max-width: 900px) and (orientation: landscape) { #priceTable { min-width: 1080px !important; } /* 5列目: 大分類品名 (文字切れ防止) */ #priceTable th:nth-child(5), #priceTable td:nth-child(5) { width: 110px !important; min-width: 110px !important; } /* 7列目: 商品名(銘柄) (16文字・長文でも物理的な文字切れ完全防止) */ #priceTable th:nth-child(7), #priceTable td:nth-child(7) { width: 210px !important; min-width: 210px !important; } #priceTable td:nth-child(7) input { width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; text-overflow: ellipsis; } /* 8列目: 内容量 (「+単位」非表示に伴い幅を圧縮) */ #priceTable th:nth-child(8), #priceTable td:nth-child(8) { width: 58px !important; min-width: 58px !important; max-width: 58px !important; } } body.force-mobile-mode:not(.force-pc-mode) #priceTable th:nth-child(5), body.force-mobile-mode:not(.force-pc-mode) #priceTable td:nth-child(5) { width: 110px !important; min-width: 110px !important; } body.force-mobile-mode:not(.force-pc-mode) #priceTable th:nth-child(7), body.force-mobile-mode:not(.force-pc-mode) #priceTable td:nth-child(7) { width: 210px !important; min-width: 210px !important; } body.force-mobile-mode:not(.force-pc-mode) #priceTable td:nth-child(7) input { width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; text-overflow: ellipsis; } body.force-mobile-mode:not(.force-pc-mode) #priceTable th:nth-child(8), body.force-mobile-mode:not(.force-pc-mode) #priceTable td:nth-child(8) { width: 58px !important; min-width: 58px !important; max-width: 58px !important; } /* テーブル内のテキスト入力欄（品名・大分類・メーカー・メモ）はセル全幅(100%)まで広げて文字切れを完全防止 */ @media screen and (orientation: landscape) and (max-height: 600px), screen and (max-width: 900px) and (orientation: landscape) { #priceTable tbody td input.table-input:not(.table-input-number) { width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } } body.force-mobile-mode:not(.force-pc-mode) #priceTable tbody td input.table-input:not(.table-input-number) { width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } /* ========================================================================== 【スマホモード統一】タブエリア（タブナビゲーション＋タブパネル内）ボタン統一スタイル ※タブの外（アクションバー・ヘッダー・テーブル等）には干渉しないようタブ内に完全限定 ========================================================================== */ /* 1. タブナビゲーションボタン（フォント11px・太さ600・システムフォント統一） */ body.force-mobile-mode:not(.force-pc-mode) .tab-navigation .tab-button, body.force-mobile-mode:not(.force-pc-mode) .tab-navigation .tab-manual-btn, body.force-mobile-mode:not(.force-pc-mode) .tab-button, body.force-mobile-mode:not(.force-pc-mode) .tab-manual-btn { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans JP", sans-serif !important; font-size: 11px !important; font-weight: 600 !important; line-height: normal !important; } /* 2. タブパネル内の全ボタン（データ管理・追加・検索パネル内：高さ30px・フォント12px・太さ600統一） */ body.force-mobile-mode:not(.force-pc-mode) .tab-content-panel button, body.force-mobile-mode:not(.force-pc-mode) .tab-content-panel .custom-button, body.force-mobile-mode:not(.force-pc-mode) .tab-content-panel a.custom-button, body.force-mobile-mode:not(.force-pc-mode) .tab-content-panel input[type="button"], body.force-mobile-mode:not(.force-pc-mode) .tab-content-panel input[type="submit"], body.force-mobile-mode:not(.force-pc-mode) .management-tab-content .custom-button, body.force-mobile-mode:not(.force-pc-mode) .management-group .custom-button, body.force-mobile-mode:not(.force-pc-mode) .management-group a, body.force-mobile-mode:not(.force-pc-mode) .management-group button, body.force-mobile-mode:not(.force-pc-mode) .management-group label, body.force-mobile-mode:not(.force-pc-mode) .search-tab-content button, body.force-mobile-mode:not(.force-pc-mode) .search-tab-content .custom-button, body.force-mobile-mode:not(.force-pc-mode) .search-tab-content #searchButton, body.force-mobile-mode:not(.force-pc-mode) .search-tab-content #outOfStockButton, body.force-mobile-mode:not(.force-pc-mode) .search-tab-content #clearFilterButton, body.force-mobile-mode:not(.force-pc-mode) #tab-panel-search button, body.force-mobile-mode:not(.force-pc-mode) #tab-panel-search #searchButton, body.force-mobile-mode:not(.force-pc-mode) #tab-panel-search #outOfStockButton, body.force-mobile-mode:not(.force-pc-mode) #tab-panel-search #clearFilterButton, body.force-mobile-mode:not(.force-pc-mode) #tab-panel-add button, body.force-mobile-mode:not(.force-pc-mode) #tab-panel-manage button, body.force-mobile-mode:not(.force-pc-mode) #tab-search button, body.force-mobile-mode:not(.force-pc-mode) #tab-add button, body.force-mobile-mode:not(.force-pc-mode) #tab-manage button, body.force-mobile-mode:not(.force-pc-mode) .form-section button, body.force-mobile-mode:not(.force-pc-mode) .add-form-row .custom-button, body.force-mobile-mode:not(.force-pc-mode) #addButton, body.force-mobile-mode:not(.force-pc-mode) #scanButton, body.force-mobile-mode:not(.force-pc-mode) #addButton2, body.force-mobile-mode:not(.force-pc-mode) #compressButton, body.force-mobile-mode:not(.force-pc-mode) #addPriceSubmitBtn, body.force-mobile-mode:not(.force-pc-mode) #addWalletSubmitBtn, body.force-mobile-mode:not(.force-pc-mode) #submit-record-button, body.force-mobile-mode:not(.force-pc-mode) #searchButton, body.force-mobile-mode:not(.force-pc-mode) #searchButtonNew, body.force-mobile-mode:not(.force-pc-mode) #tabSearchButton, body.force-mobile-mode:not(.force-pc-mode) #search-button, body.force-mobile-mode:not(.force-pc-mode) #clearFilterButton, body.force-mobile-mode:not(.force-pc-mode) #clearFilterButtonNew, body.force-mobile-mode:not(.force-pc-mode) #tabClearFilterButton, body.force-mobile-mode:not(.force-pc-mode) #clear-filters-button, body.force-mobile-mode:not(.force-pc-mode) #outOfStockButton, body.force-mobile-mode:not(.force-pc-mode) #tabExpiringButton { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans JP", sans-serif !important; height: 30px !important; min-height: 30px !important; line-height: 28px !important; font-size: 12px !important; font-weight: 600 !important; box-sizing: border-box !important; } /* レスポンシブ (max-width: 768px) 用ルール */ @media (max-width: 768px), (max-height: 500px) and (orientation: landscape) { body:not(.force-pc-mode) .tab-navigation .tab-button, body:not(.force-pc-mode) .tab-navigation .tab-manual-btn, body:not(.force-pc-mode) .tab-button, body:not(.force-pc-mode) .tab-manual-btn { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans JP", sans-serif !important; font-size: 11px !important; font-weight: 600 !important; line-height: normal !important; } body:not(.force-pc-mode) .tab-content-panel button, body:not(.force-pc-mode) .tab-content-panel .custom-button, body:not(.force-pc-mode) .tab-content-panel a.custom-button, body:not(.force-pc-mode) .tab-content-panel input[type="button"], body:not(.force-pc-mode) .tab-content-panel input[type="submit"], body:not(.force-pc-mode) .management-tab-content .custom-button, body:not(.force-pc-mode) .management-group .custom-button, body:not(.force-pc-mode) .management-group a, body:not(.force-pc-mode) .management-group button, body:not(.force-pc-mode) .management-group label, body:not(.force-pc-mode) .search-tab-content button, body:not(.force-pc-mode) .search-tab-content .custom-button, body:not(.force-pc-mode) .search-tab-content #searchButton, body:not(.force-pc-mode) .search-tab-content #outOfStockButton, body:not(.force-pc-mode) .search-tab-content #clearFilterButton, body:not(.force-pc-mode) #tab-panel-search button, body:not(.force-pc-mode) #tab-panel-search #searchButton, body:not(.force-pc-mode) #tab-panel-search #outOfStockButton, body:not(.force-pc-mode) #tab-panel-search #clearFilterButton, body:not(.force-pc-mode) #tab-panel-add button, body:not(.force-pc-mode) #tab-panel-manage button, body:not(.force-pc-mode) #tab-search button, body:not(.force-pc-mode) #tab-add button, body:not(.force-pc-mode) #tab-manage button, body:not(.force-pc-mode) .form-section button, body:not(.force-pc-mode) .add-form-row .custom-button, body:not(.force-pc-mode) #addButton, body:not(.force-pc-mode) #scanButton, body:not(.force-pc-mode) #addButton2, body:not(.force-pc-mode) #compressButton, body:not(.force-pc-mode) #addPriceSubmitBtn, body:not(.force-pc-mode) #addWalletSubmitBtn, body:not(.force-pc-mode) #submit-record-button, body:not(.force-pc-mode) #searchButton, body:not(.force-pc-mode) #searchButtonNew, body:not(.force-pc-mode) #tabSearchButton, body:not(.force-pc-mode) #search-button, body:not(.force-pc-mode) #clearFilterButton, body:not(.force-pc-mode) #clearFilterButtonNew, body:not(.force-pc-mode) #tabClearFilterButton, body:not(.force-pc-mode) #clear-filters-button, body:not(.force-pc-mode) #outOfStockButton, body:not(.force-pc-mode) #tabExpiringButton { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans JP", sans-serif !important; height: 30px !important; min-height: 30px !important; line-height: 28px !important; font-size: 12px !important; font-weight: 600 !important; box-sizing: border-box !important; } } /* スマホモード（縦画面・横画面・強制スマホモード）: ソート実行ボタンを完全非表示 */ @media screen and (max-width: 1024px) { body:not(.force-pc-mode) #sortExecuteButton, body:not(.force-pc-mode) .sort-execute-button, body:not(.force-pc-mode) .action-group .sort-execute-button, body:not(.force-pc-mode) .sort-control-wrap .sort-execute-button { display: none !important; } } @media screen and (orientation: landscape) and (max-height: 600px) { body:not(.force-pc-mode) #sortExecuteButton, body:not(.force-pc-mode) .sort-execute-button, body:not(.force-pc-mode) .action-group .sort-execute-button, body:not(.force-pc-mode) .sort-control-wrap .sort-execute-button { display: none !important; } } body.force-mobile-mode:not(.force-pc-mode) #sortExecuteButton, body.force-mobile-mode:not(.force-pc-mode) .sort-execute-button, body.force-mobile-mode:not(.force-pc-mode) .action-group .sort-execute-button, body.force-mobile-mode:not(.force-pc-mode) .sort-control-wrap .sort-execute-button { display: none !important; }