/* ========================================================================== ざいのーと [財産管理] スマホ横画面（Landscape）専用スタイル ========================================================================== */ /* ========================================================== スマホ横画面（Landscape）全体の横スクロール防止 & 詳細シート最適化 ========================================================== */ @media screen and (orientation: landscape), screen and (max-height: 520px) and (orientation: landscape) { /* 横画面時の全体横スクロール防止 */ html, body { overflow-x: hidden !important; max-width: 100vw !important; width: 100% !important; } /* モバイル詳細シート（横画面用コンパクト表示） */ .mobile-detail-sheet, 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; bottom: env(safe-area-inset-bottom, 0px) !important; } .sheet-drag-handle, body.force-mobile-mode:not(.force-pc-mode) .sheet-drag-handle { width: 36px !important; height: 3px !important; margin: 3px auto 1px !important; } .sheet-header, body.force-mobile-mode:not(.force-pc-mode) .sheet-header { padding: 3px 14px 4px !important; } .sheet-title, body.force-mobile-mode:not(.force-pc-mode) .sheet-title { font-size: 14px !important; } .sheet-no-badge, body.force-mobile-mode:not(.force-pc-mode) .sheet-no-badge { font-size: 11.5px !important; padding: 2px 6px !important; } .sheet-close-btn, body.force-mobile-mode:not(.force-pc-mode) .sheet-close-btn { padding: 2px 8px !important; font-size: 18px !important; } /* money の body を横画面では 2列（実質4列）に折り返し配置して行数を半減 */ .sheet-body, body.force-mobile-mode:not(.force-pc-mode) .sheet-body { padding: 3px 12px 2px !important; display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; justify-content: space-between !important; align-items: flex-start !important; gap: 3px 8px !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; flex: 1 1 auto !important; min-height: 0 !important; } .sheet-field-group, body.force-mobile-mode:not(.force-pc-mode) .sheet-field-group { display: flex !important; flex-direction: column !important; gap: 1px !important; min-width: 0 !important; } /* 各グリッド（2項目セット）を横画面では左右半分ずつ（50%）に配置 */ .sheet-grid-2, body.force-mobile-mode:not(.force-pc-mode) .sheet-grid-2 { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 6px !important; width: calc(50% - 4px) !important; flex: 0 0 calc(50% - 4px) !important; margin: 0 !important; } /* メモ入力（body直下の .sheet-field-group）も半幅にして回収情報と横並びに */ .sheet-body > .sheet-field-group, body.force-mobile-mode:not(.force-pc-mode) .sheet-body > .sheet-field-group { width: calc(50% - 4px) !important; flex: 0 0 calc(50% - 4px) !important; margin: 0 !important; order: 6 !important; } /* チェックボックス行（回収チェック・レポート出力）の右隣に「💾 明細を保存」「🗑️ 削除」ボタンを詰めて1行集約 */ .sheet-meta-row, body.force-mobile-mode:not(.force-pc-mode) .sheet-meta-row { width: 100% !important; flex: 0 0 100% !important; order: 7 !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: 12px !important; padding: 3px 8px !important; margin: 1px 0 0 0 !important; background: #f8fafc !important; border: 1px dashed #cbd5e1 !important; border-radius: 4px !important; box-sizing: border-box !important; } /* レポート出力対象の右隣に詰めるインラインアクションボタン群 */ .sheet-inline-actions, body.force-mobile-mode:not(.force-pc-mode) .sheet-inline-actions { display: flex !important; align-items: center !important; gap: 6px !important; margin-left: auto !important; } .sheet-inline-actions .sheet-btn, 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; } .sheet-checkbox-label, body.force-mobile-mode:not(.force-pc-mode) .sheet-checkbox-label { font-size: 11.5px !important; display: inline-flex !important; align-items: center !important; gap: 4px !important; cursor: pointer !important; color: #334155 !important; margin: 0 !important; } .sheet-label, 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; color: #475569 !important; } .sheet-input, .sheet-select, 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: 13px !important; padding: 2px 7px !important; border-radius: 4px !important; min-width: 0 !important; } /* 横画面ではフッターバーを非表示にして1行短縮 */ .sheet-footer, body.force-mobile-mode:not(.force-pc-mode) .sheet-footer { display: none !important; } .sheet-btn, body.force-mobile-mode:not(.force-pc-mode) .sheet-btn { height: 31px !important; font-size: 12.5px !important; padding: 0 10px !important; border-radius: 4px !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: 14px !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: 14px !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）検索タブ（#tab-panel-search）: - 1行目に全入力・検索ボタン・解除ボタンを集約（無駄な縦空白を徹底排除） - 2行目に件数表示・積立金サマリーを横並び配置 ========================================================================== */ @media screen and (orientation: landscape) and (max-height: 600px), screen and (max-width: 768px) and (orientation: landscape) { .money-search-content { display: grid !important; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.35fr) minmax(0, 1.15fr) minmax(0, 2fr) minmax(0, 0.8fr) minmax(0, 1.1fr) !important; gap: 4px 6px !important; width: 100% !important; max-width: 100% !important; align-items: center !important; } .money-search-content label { display: none !important; } #month-filter { grid-column: 1 / 2 !important; grid-row: 1 !important; width: 100% !important; } #payment-filter { grid-column: 2 / 3 !important; grid-row: 1 !important; width: 100% !important; } #status-filter { grid-column: 3 / 4 !important; grid-row: 1 !important; width: 100% !important; } #search-filter { grid-column: 4 / 5 !important; grid-row: 1 !important; width: 100% !important; } #search-button { grid-column: 5 / 6 !important; grid-row: 1 !important; width: 100% !important; height: 30px !important; min-height: 30px !important; max-height: 30px !important; line-height: 28px !important; font-size: 13px !important; font-weight: 700 !important; border-radius: 5px !important; padding: 0 4px !important; white-space: nowrap !important; box-sizing: border-box !important; background: #2563eb !important; color: #ffffff !important; border: 1px solid #1d4ed8 !important; cursor: pointer !important; } #clear-filters-button { grid-column: 6 / 7 !important; grid-row: 1 !important; width: 100% !important; height: 30px !important; min-height: 30px !important; max-height: 30px !important; line-height: 31px !important; font-size: 12.5px !important; font-weight: 600 !important; border-radius: 5px !important; padding: 0 4px !important; white-space: nowrap !important; box-sizing: border-box !important; background: #f8fafc !important; color: #334155 !important; border: 1px solid #cbd5e1 !important; cursor: pointer !important; } #visible-count { grid-column: 5 / 7 !important; grid-row: 2 !important; text-align: right !important; font-size: 11px !important; color: #64748b !important; line-height: 18px !important; margin: 0 !important; padding-right: 2px !important; } .money-search-pool-summary { margin-top: 2px !important; padding: 0 !important; font-size: 11px !important; line-height: 1.3 !important; } } /* ========================================================================== スマホ横画面（Landscape）新しい支出タブ（#expense-form）: 縦の3列・4行構成から、横幅を活かした2行構成へ集約（2行削減） 上下の縦ラインを揃え、メモ欄を広めに確保 ========================================================================== */ @media screen and (orientation: landscape) and (max-height: 600px), screen and (max-width: 768px) and (orientation: landscape) { #expense-form, .add-form-container { display: grid !important; grid-template-columns: 1.065fr 1.33fr 1fr 1.065fr 0.96fr 0.665fr 0.665fr !important; gap: 4px 6px !important; width: 100% !important; max-width: 100% !important; } #expense-form .form-row, .add-form-container .form-row { display: contents !important; } /* 1行目: 利用日(1) / 店舗(2) / 金額(3) / 用途(4) / 支払者(5) / 支払方法(6-7) */ .form-item:has(#expense-date) { grid-column: 1 / 2 !important; grid-row: 1 !important; } .form-item:has(#merchant) { grid-column: 2 / 3 !important; grid-row: 1 !important; } .form-item:has(#amount) { grid-column: 3 / 4 !important; grid-row: 1 !important; } .form-item:has(#category) { grid-column: 4 / 5 !important; grid-row: 1 !important; } .form-item:has(#paid-by) { grid-column: 5 / 6 !important; grid-row: 1 !important; } .form-item:has(#payment-method) { grid-column: 6 / 8 !important; grid-row: 1 !important; } /* 2行目: 支払元(1) / 回収元(2) / 回収方法(3) / 回収日(4) / メモ(5-6) / 追加ボタン(7) */ .form-item:has(#paid-from) { grid-column: 1 / 2 !important; grid-row: 2 !important; } .form-item:has(#recovery-source) { grid-column: 2 / 3 !important; grid-row: 2 !important; } .form-item:has(#recovery-method) { grid-column: 3 / 4 !important; grid-row: 2 !important; } .form-item:has(#recovery-date) { grid-column: 4 / 5 !important; grid-row: 2 !important; } .form-item:has(#memo) { grid-column: 5 / 7 !important; grid-row: 2 !important; } #submit-record-button { grid-column: 7 / 8 !important; grid-row: 2 !important; width: 100% !important; height: 30px !important; min-height: 30px !important; max-height: 30px !important; line-height: 28px !important; font-size: 13px !important; font-weight: 700 !important; border-radius: 5px !important; margin: 0 !important; align-self: end !important; justify-content: center !important; box-sizing: border-box !important; } } /* ========================================================================== スマホ横画面（Landscape）データ管理タブ＆ソートエリア: - データ管理タブ: 1行3ボタン横並び（左タイトル108px + 右3ボタン） - ボタン上下サイズを30pxに統一 ========================================================================== */ @media screen and (orientation: landscape) and (max-height: 520px), screen and (max-width: 768px) and (orientation: landscape) { .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-panel-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 #fecdd3 !important; border-bottom: none !important; padding: 2px 6px !important; margin: 0 !important; font-size: 11px !important; font-weight: 700 !important; white-space: nowrap !important; display: inline-flex !important; align-items: center !important; box-sizing: border-box !important; background: transparent !important; color: #334155 !important; justify-content: flex-start !important; text-align: left !important; } .management-group-title::after { content: "" !important; } .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; display: flex !important; align-items: center !important; justify-content: center !important; white-space: nowrap !important; margin: 0 !important; width: 100% !important; min-width: 0 !important; } } /* ========================================================================== 全スマホモード（縦・横・強制スマホ）共通: - タブ余白削減 (padding: 4px 8px 3px) - ドロップダウン・テキストボックス: 上下サイズ30pxに圧縮 - ソートエリア: 30px統一 - データ管理タブボタン: 30px統一 ========================================================================== */ @media (max-width: 768px), (max-height: 600px) and (orientation: landscape), (orientation: portrait) and (max-width: 768px) { #tab-panel-search, #tab-panel-add, #tab-panel-manage, .tab-content-panel { padding: 4px 8px 5px !important; margin-bottom: 4px !important; min-height: 0 !important; } .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 2px !important; box-sizing: border-box !important; border-radius: 5px !important; line-height: 1.2 !important; } /* ソートエリア: 高さ30pxに統一 */ .action-group .sort-select, .action-group .sort-execute-button, #saveAllButton, .sort-select, .sort-execute-button { 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-panel-search input, #tab-panel-search select, #expense-form input, #expense-form select, #month-filter, #payment-filter, #search-filter, #status-filter, #expense-date, #merchant, #amount, #category, #paid-by, #payment-method, #paid-from, #recovery-source, #recovery-method, #recovery-date, #memo { 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で揃える */ #submit-record-button, #search-button, #clear-filters-button { height: 30px !important; min-height: 30px !important; max-height: 30px !important; line-height: 28px !important; box-sizing: border-box !important; } /* ラベルの高さ統一 */ #expense-form label, .form-item label { height: 16px !important; min-height: 16px !important; max-height: 16px !important; line-height: 16px !important; font-size: 11.5px !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; } } /* アクションバー: 横画面1行集約レイアウト（zaiko踏襲・上ラベル化・不要ボタン非表示・画面外はみ出し完全解消） */ @media screen and (orientation: landscape) and (max-height: 600px), screen and (max-width: 768px) and (orientation: landscape) { .global-action-bar, .inventory-content > .global-action-bar { display: flex !important; flex-direction: row !important; align-items: flex-end !important; justify-content: flex-start !important; gap: 12px !important; padding: 4px 8px !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; overflow-x: auto !important; overflow-y: hidden !important; white-space: nowrap !important; grid-template-columns: none !important; grid-template-rows: none !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-group.sort-action-group { 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; } .action-group .sort-select { height: 30px !important; min-height: 30px !important; max-height: 30px !important; font-size: 12px !important; padding: 0 6px !important; border: 1px solid #cbd5e1 !important; border-radius: 5px !important; background: #ffffff !important; box-sizing: border-box !important; width: auto !important; min-width: 160px !important; max-width: 200px !important; margin: 0 !important; } .color-priority-control { display: flex !important; flex-direction: column !important; align-items: flex-start !important; flex: 0 0 auto !important; gap: 0 !important; border: none !important; margin: 0 !important; padding: 0 !important; width: auto !important; min-width: 0 !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 { height: 30px !important; min-height: 30px !important; max-height: 30px !important; line-height: 28px !important; font-size: 11px !important; font-weight: 600 !important; padding: 0 6px !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: #285f88 !important; color: #ffffff !important; border-color: #1e4767 !important; } .meta-info-control { display: flex !important; flex-direction: row !important; align-items: center !important; height: 30px !important; gap: 10px !important; flex: 0 0 auto !important; margin-left: auto !important; margin-top: 0 !important; padding: 0 !important; border: none !important; width: auto !important; min-width: 0 !important; } #saveTimeDisplay { font-size: 10.5px !important; color: #64748b !important; white-space: nowrap !important; line-height: 30px !important; margin: 0 !important; } .money-summary-wrap { display: inline-flex !important; align-items: center !important; gap: 4px !important; height: 30px !important; padding: 0 8px !important; border-radius: 5px !important; border: 1px solid #e2e8f0 !important; background: #f8fafc !important; box-sizing: border-box !important; white-space: nowrap !important; font-size: 11.5px !important; margin: 0 !important; } } /* 強制スマホモード（PCでの検証用） */ body.force-mobile-mode #tab-panel-search, body.force-mobile-mode #tab-panel-add, body.force-mobile-mode #tab-panel-manage, body.force-mobile-mode .tab-content-panel { padding: 4px 8px 5px !important; margin-bottom: 4px !important; min-height: 0 !important; } 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-group .sort-select, body.force-mobile-mode .action-group .sort-execute-button, body.force-mobile-mode #saveAllButton, body.force-mobile-mode .sort-execute-button, 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 #submit-record-button, body.force-mobile-mode #clear-filters-button { height: 30px !important; min-height: 30px !important; max-height: 30px !important; box-sizing: border-box !important; } /* 強制スマホモードでも収入票はPCモードの横並び（加算日の列形式）を完全維持 */ body.force-mobile-mode #pool-income-form { display: block !important; margin-bottom: 10px !important; width: 100% !important; } body.force-mobile-mode #pool-income-form .form-row { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; gap: 8px !important; width: 100% !important; } body.force-mobile-mode #pool-income-form .form-item { display: inline-flex !important; flex-direction: row !important; align-items: center !important; gap: 4px !important; font-size: 12px !important; width: auto !important; min-width: 0 !important; margin: 0 !important; } body.force-mobile-mode #pool-income-form .form-item label { display: inline !important; font-size: 12px !important; font-weight: normal !important; color: inherit !important; margin: 0 !important; white-space: nowrap !important; overflow: visible !important; line-height: normal !important; height: auto !important; min-height: 0 !important; max-height: none !important; } body.force-mobile-mode #pool-income-form input, body.force-mobile-mode #pool-income-form select { display: inline-block !important; height: 24px !important; min-height: 24px !important; max-height: 24px !important; line-height: normal !important; padding: 2px 5px !important; border: 1px solid #ccc !important; border-radius: 3px !important; font-size: 12px !important; box-sizing: border-box !important; background: #ffffff !important; } body.force-mobile-mode #pool-income-date { width: 125px !important; min-width: 125px !important; } body.force-mobile-mode #pool-income-payer { width: auto !important; min-width: 95px !important; } body.force-mobile-mode #pool-income-amount { width: 85px !important; min-width: 85px !important; } body.force-mobile-mode #pool-income-form .form-item:has(#pool-income-memo) { flex: 1 !important; min-width: 140px !important; } body.force-mobile-mode #pool-income-memo { width: 100% !important; min-width: 120px !important; } body.force-mobile-mode #pool-income-form button { height: 24px !important; min-height: 24px !important; max-height: 24px !important; line-height: 20px !important; padding: 0 8px !important; font-size: 12px !important; margin: 0 !important; border-radius: 3px !important; width: auto !important; } @media screen and (orientation: landscape) { body.force-mobile-mode:not(.force-pc-mode) .global-action-bar, body.force-mobile-mode:not(.force-pc-mode) .inventory-content > .global-action-bar { display: flex !important; flex-direction: row !important; align-items: flex-end !important; justify-content: flex-start !important; gap: 12px !important; padding: 4px 8px !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; overflow-x: auto !important; overflow-y: hidden !important; white-space: nowrap !important; grid-template-columns: none !important; grid-template-rows: none !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-group.sort-action-group { 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; } body.force-mobile-mode:not(.force-pc-mode) .action-group .sort-select { height: 30px !important; min-height: 30px !important; max-height: 30px !important; font-size: 12px !important; padding: 0 6px !important; border: 1px solid #cbd5e1 !important; border-radius: 5px !important; background: #ffffff !important; box-sizing: border-box !important; width: auto !important; min-width: 160px !important; max-width: 200px !important; margin: 0 !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; border: none !important; margin: 0 !important; padding: 0 !important; width: auto !important; min-width: 0 !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 { height: 30px !important; min-height: 30px !important; max-height: 30px !important; line-height: 28px !important; font-size: 11px !important; font-weight: 600 !important; padding: 0 6px !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: #285f88 !important; color: #ffffff !important; border-color: #1e4767 !important; } body.force-mobile-mode:not(.force-pc-mode) .meta-info-control { display: flex !important; flex-direction: row !important; align-items: center !important; height: 30px !important; gap: 10px !important; flex: 0 0 auto !important; margin-left: auto !important; margin-top: 0 !important; padding: 0 !important; border: none !important; width: auto !important; min-width: 0 !important; } body.force-mobile-mode:not(.force-pc-mode) #saveTimeDisplay { font-size: 10.5px !important; color: #64748b !important; white-space: nowrap !important; line-height: 30px !important; margin: 0 !important; } body.force-mobile-mode:not(.force-pc-mode) .money-summary-wrap { display: inline-flex !important; align-items: center !important; gap: 4px !important; height: 30px !important; padding: 0 8px !important; border-radius: 5px !important; border: 1px solid #e2e8f0 !important; background: #f8fafc !important; box-sizing: border-box !important; white-space: nowrap !important; font-size: 11.5px !important; margin: 0 !important; } /* データ管理タブ（1行3ボタン横並び: 左タイトル94px + 右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-panel-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 #fecdd3 !important; border-bottom: none !important; padding: 2px 6px !important; margin: 0 !important; font-size: 11px !important; font-weight: 700 !important; white-space: nowrap !important; display: inline-flex !important; align-items: center !important; box-sizing: border-box !important; background: transparent !important; color: #334155 !important; justify-content: flex-start !important; text-align: left !important; } body.force-mobile-mode:not(.force-pc-mode) .management-group-title::after { content: "" !important; } /* 検索タブ（#tab-panel-search）横画面構成 */ body.force-mobile-mode:not(.force-pc-mode) .money-search-content { display: grid !important; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.35fr) minmax(0, 1.15fr) minmax(0, 2fr) minmax(0, 0.8fr) minmax(0, 1.1fr) !important; gap: 4px 6px !important; width: 100% !important; max-width: 100% !important; align-items: center !important; } body.force-mobile-mode:not(.force-pc-mode) .money-search-content label { display: none !important; } body.force-mobile-mode:not(.force-pc-mode) #month-filter { grid-column: 1 / 2 !important; grid-row: 1 !important; width: 100% !important; } body.force-mobile-mode:not(.force-pc-mode) #payment-filter { grid-column: 2 / 3 !important; grid-row: 1 !important; width: 100% !important; } body.force-mobile-mode:not(.force-pc-mode) #status-filter { grid-column: 3 / 4 !important; grid-row: 1 !important; width: 100% !important; } body.force-mobile-mode:not(.force-pc-mode) #search-filter { grid-column: 4 / 5 !important; grid-row: 1 !important; width: 100% !important; } body.force-mobile-mode:not(.force-pc-mode) #search-button { grid-column: 5 / 6 !important; grid-row: 1 !important; width: 100% !important; height: 30px !important; min-height: 30px !important; max-height: 30px !important; line-height: 28px !important; font-size: 13px !important; font-weight: 700 !important; border-radius: 5px !important; padding: 0 4px !important; white-space: nowrap !important; box-sizing: border-box !important; background: #2563eb !important; color: #ffffff !important; border: 1px solid #1d4ed8 !important; cursor: pointer !important; } body.force-mobile-mode:not(.force-pc-mode) #clear-filters-button { grid-column: 6 / 7 !important; grid-row: 1 !important; width: 100% !important; height: 30px !important; min-height: 30px !important; max-height: 30px !important; line-height: 31px !important; font-size: 12.5px !important; font-weight: 600 !important; border-radius: 5px !important; padding: 0 4px !important; white-space: nowrap !important; box-sizing: border-box !important; background: #f8fafc !important; color: #334155 !important; border: 1px solid #cbd5e1 !important; cursor: pointer !important; } body.force-mobile-mode:not(.force-pc-mode) #visible-count { grid-column: 5 / 7 !important; grid-row: 2 !important; text-align: right !important; font-size: 11px !important; color: #64748b !important; line-height: 18px !important; margin: 0 !important; padding-right: 2px !important; } body.force-mobile-mode:not(.force-pc-mode) .money-search-pool-summary { margin-top: 2px !important; padding: 0 !important; font-size: 11px !important; line-height: 1.3 !important; } /* 新しい支出タブ（#expense-form）2行構成 */ body.force-mobile-mode:not(.force-pc-mode) #expense-form, body.force-mobile-mode:not(.force-pc-mode) .add-form-container { display: grid !important; grid-template-columns: 1.065fr 1.33fr 1fr 1.065fr 0.96fr 0.665fr 0.665fr !important; gap: 4px 6px !important; width: 100% !important; max-width: 100% !important; } body.force-mobile-mode:not(.force-pc-mode) #expense-form .form-row, body.force-mobile-mode:not(.force-pc-mode) .add-form-container .form-row { display: contents !important; } body.force-mobile-mode:not(.force-pc-mode) .form-item:has(#expense-date) { grid-column: 1 / 2 !important; grid-row: 1 !important; } body.force-mobile-mode:not(.force-pc-mode) .form-item:has(#merchant) { grid-column: 2 / 3 !important; grid-row: 1 !important; } body.force-mobile-mode:not(.force-pc-mode) .form-item:has(#amount) { grid-column: 3 / 4 !important; grid-row: 1 !important; } body.force-mobile-mode:not(.force-pc-mode) .form-item:has(#category) { grid-column: 4 / 5 !important; grid-row: 1 !important; } body.force-mobile-mode:not(.force-pc-mode) .form-item:has(#paid-by) { grid-column: 5 / 6 !important; grid-row: 1 !important; } body.force-mobile-mode:not(.force-pc-mode) .form-item:has(#payment-method) { grid-column: 6 / 8 !important; grid-row: 1 !important; } body.force-mobile-mode:not(.force-pc-mode) .form-item:has(#paid-from) { grid-column: 1 / 2 !important; grid-row: 2 !important; } body.force-mobile-mode:not(.force-pc-mode) .form-item:has(#recovery-source) { grid-column: 2 / 3 !important; grid-row: 2 !important; } body.force-mobile-mode:not(.force-pc-mode) .form-item:has(#recovery-method) { grid-column: 3 / 4 !important; grid-row: 2 !important; } body.force-mobile-mode:not(.force-pc-mode) .form-item:has(#recovery-date) { grid-column: 4 / 5 !important; grid-row: 2 !important; } body.force-mobile-mode:not(.force-pc-mode) .form-item:has(#memo) { grid-column: 5 / 7 !important; grid-row: 2 !important; } body.force-mobile-mode:not(.force-pc-mode) #submit-record-button { grid-column: 7 / 8 !important; grid-row: 2 !important; width: 100% !important; height: 30px !important; min-height: 30px !important; max-height: 30px !important; line-height: 28px !important; font-size: 13px !important; font-weight: 700 !important; border-radius: 5px !important; margin: 0 !important; align-self: end !important; justify-content: center !important; box-sizing: border-box !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; } } /* スマホ横画面: 枠線・矢印・背景を削ってテキスト化 ＆ 入力禁止（スクロール誤タップ防止: zaiko踏襲） */ @media screen and (orientation: landscape) and (max-height: 600px), screen and (max-width: 768px) and (orientation: landscape) { body:not(.force-pc-mode) #money-transactions tbody td input:not([type="checkbox"]), body:not(.force-pc-mode) #money-transactions tbody td select, body:not(.force-pc-mode) #money-transactions .money-inline-input:not([type="checkbox"]), body:not(.force-pc-mode) #money-transactions .money-inline-select, body:not(.force-pc-mode) .money-income-table tbody td input:not([type="checkbox"]), body:not(.force-pc-mode) .money-income-table tbody td 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; min-height: 0 !important; height: auto !important; } /* チェックボックス（積立・回収・出力）はスマホ横画面でも表示を残し操作可能にする */ body:not(.force-pc-mode) #money-transactions tbody td input[type="checkbox"], body:not(.force-pc-mode) #money-transactions .money-recovery-toggle input[type="checkbox"], body:not(.force-pc-mode) .money-income-table tbody td input[type="checkbox"] { -webkit-appearance: checkbox !important; -moz-appearance: checkbox !important; appearance: checkbox !important; display: inline-block !important; width: 15px !important; height: 15px !important; min-width: 15px !important; min-height: 15px !important; margin: 0 !important; padding: 0 !important; pointer-events: auto !important; user-select: auto !important; cursor: pointer !important; accent-color: #28675e !important; opacity: 1 !important; visibility: visible !important; vertical-align: middle !important; } body:not(.force-pc-mode) #money-transactions .money-recovery-toggle, body:not(.force-pc-mode) .money-income-table .money-recovery-toggle { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 16px !important; min-height: 16px !important; pointer-events: auto !important; cursor: pointer !important; } body:not(.force-pc-mode) #money-transactions tbody td:nth-child(6), body:not(.force-pc-mode) #money-transactions tbody td:nth-child(13), body:not(.force-pc-mode) #money-transactions tbody td:nth-child(14) { text-align: center !important; } body:not(.force-pc-mode) #money-transactions tbody td input::-webkit-inner-spin-button, body:not(.force-pc-mode) #money-transactions tbody td input::-webkit-outer-spin-button, body:not(.force-pc-mode) #money-transactions tbody td input::-webkit-calendar-picker-indicator, body:not(.force-pc-mode) .money-income-table tbody td input::-webkit-inner-spin-button, body:not(.force-pc-mode) .money-income-table tbody td input::-webkit-outer-spin-button, body:not(.force-pc-mode) .money-income-table tbody td input::-webkit-calendar-picker-indicator { display: none !important; -webkit-appearance: none !important; } body:not(.force-pc-mode) #money-transactions th:nth-child(16), body:not(.force-pc-mode) #money-transactions td:nth-child(16), body:not(.force-pc-mode) #money-transactions th:last-child, body:not(.force-pc-mode) #money-transactions td:last-child, body:not(.force-pc-mode) #money-transactions .row-action-cell, body:not(.force-pc-mode) #money-transactions .row-action-menu, body:not(.force-pc-mode) .money-income-table th:last-child, body:not(.force-pc-mode) .money-income-table td:last-child { display: none !important; } body:not(.force-pc-mode) #money-transactions tbody tr td:first-child { cursor: pointer !important; pointer-events: auto !important; font-weight: 700 !important; color: #71313a !important; text-decoration: underline !important; text-underline-offset: 2px !important; } body:not(.force-pc-mode) #money-transactions td, body:not(.force-pc-mode) #money-transactions tbody td, body:not(.force-pc-mode) .money-income-table td, body:not(.force-pc-mode) .money-income-table tbody td { vertical-align: middle !important; padding: 4px 2px !important; } /* スマホモード: テキストボックス名残による左側余白を解消（店舗・用途・支払者・支払方法・支払元・回収元・回収方法・メモを左寄せ） */ #money-transactions tbody td:nth-child(3), #money-transactions tbody td:nth-child(4), #money-transactions tbody td:nth-child(7), #money-transactions tbody td:nth-child(8), #money-transactions tbody td:nth-child(9), #money-transactions tbody td:nth-child(10), #money-transactions tbody td:nth-child(11), #money-transactions tbody td:nth-child(15), .money-income-table tbody td:nth-child(3), .money-income-table tbody td:nth-child(5) { text-align: left !important; } #money-transactions tbody td:nth-child(3) select, #money-transactions tbody td:nth-child(4) select, #money-transactions tbody td:nth-child(7) select, #money-transactions tbody td:nth-child(8) select, #money-transactions tbody td:nth-child(9) select, #money-transactions tbody td:nth-child(10) select, #money-transactions tbody td:nth-child(11) select, #money-transactions tbody td:nth-child(15) input, .money-income-table tbody td:nth-child(3) input, .money-income-table tbody td:nth-child(3) select, .money-income-table tbody td:nth-child(5) input { text-align: left !important; text-align-last: left !important; width: 100% !important; box-sizing: border-box !important; } #money-transactions tbody td:nth-child(5), .money-income-table tbody td:nth-child(4), .money-income-table tbody td:nth-child(6) { text-align: right !important; } #money-transactions tbody td:nth-child(5) input, .money-income-table tbody td:nth-child(4) input, .money-income-table tbody td:nth-child(6) input { text-align: right !important; text-align-last: right !important; width: 100% !important; box-sizing: border-box !important; } #money-transactions tbody td:nth-child(2) input, #money-transactions tbody td:nth-child(12) input, .money-income-table tbody td:nth-child(2) input { text-align: center !important; text-align-last: center !important; width: 100% !important; box-sizing: border-box !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) { #money-transactions thead th, th.sticky, .money-income-table th { padding: 4px 2px !important; } } body.force-mobile-mode:not(.force-pc-mode) #money-transactions thead th, body.force-mobile-mode:not(.force-pc-mode) th.sticky, body.force-mobile-mode:not(.force-pc-mode) .money-income-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) { #money-transactions thead th, th.sticky, .money-income-table thead 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) #money-transactions thead th, body.force-mobile-mode:not(.force-pc-mode) th.sticky, body.force-mobile-mode:not(.force-pc-mode) .money-income-table thead 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; } /* ========================================================================== 【スマホモード統一】タブエリア（タブナビゲーション＋タブパネル内）ボタン統一スタイル ※タブの外（アクションバー・ヘッダー・テーブル等）には干渉しないようタブ内に完全限定 ========================================================================== */ /* 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; }