/** * mobile-fix.css * 現場メンバー向けスマホ最適化スタイル * （PCでは何も悪さしない・スマホでだけ効くオーバーライド） * * 適用方法: 各HTMLの で * * を読み込む。 */ /* =========================================================== * 共通ベース：すべての画面サイズでの基本改善 * =========================================================== */ /* iOS Safari でフォーム入力時に勝手にズームされないよう16px以上に */ input[type="text"], input[type="number"], input[type="date"], input[type="email"], input[type="tel"], input[type="password"], textarea, select { font-size: 16px !important; } /* タップ反応の確実性向上（300msディレイ除去はviewport metaで対応） */ button, a, .nav-link, .member-btn, .ans-btn, .modal-btn { -webkit-tap-highlight-color: rgba(0,0,0,0.05); touch-action: manipulation; } /* 横スクロール防止 */ html, body { overflow-x: hidden; -webkit-overflow-scrolling: touch; } /* テーブルは常に横スクロール可能なラッパー扱い */ .table-wrap, .scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* =========================================================== * スマホ最適化（max-width: 600px） * =========================================================== */ @media (max-width: 600px) { /* ─── 全体の余白・フォントを少し詰める ─── */ body { font-size: 15px; } .container, .doc-header { padding: 12px !important; } /* ─── ナビバー：横スクロール可能に＆タップ領域確保 ─── */ .nav-bar { overflow-x: auto; flex-wrap: nowrap !important; -webkit-overflow-scrolling: touch; padding-bottom: 4px; scrollbar-width: none; } .nav-bar::-webkit-scrollbar { display: none; } .nav-link { flex-shrink: 0; font-size: 13px !important; padding: 8px 14px !important; min-height: 36px; display: inline-flex !important; align-items: center; } /* 🛑 2026-06-12 JSで非表示にしたナビ（例：カメラマンには👗ドレスを出さない）が 上の inline-flex !important で復活してしまうバグの修正。非表示指定を最優先にする */ .nav-link[style*="display: none"], .nav-link[style*="display:none"] { display: none !important; } /* ─── ヘッダータイトル小さめに ─── */ .doc-title, header h1 { font-size: 19px !important; } .doc-sub, header .sub { font-size: 12px !important; } /* ─── ボタン全般：大きく・縦並びしやすく ─── */ button, .btn, .modal-btn, .small-btn { min-height: 44px; /* iOS推奨タップサイズ */ font-size: 14px; } /* ─── カレンダー：曜日ヘッダ・日付セルの読みやすさ ─── */ .cal-grid, .calendar, .cal-week-header { font-size: 12px; } /* 🆕 カレンダー全体を画面幅にぴったり収める */ .calendar { width: 100% !important; box-sizing: border-box !important; padding: 8px !important; margin-left: 0 !important; margin-right: 0 !important; } .cal-weekdays, .cal-days { gap: 2px !important; width: 100% !important; } .cal-day, .calendar-day, .cell { /* 🆕 aspect-ratio解除でセル高さ自由化（はみ出し防止） */ aspect-ratio: unset !important; min-height: 52px !important; padding: 3px !important; font-size: 11px; overflow: hidden; } .cal-day-num, .cal-day .num, .calendar-day .num { font-size: 13px; } .cal-weekday { font-size: 10px !important; padding: 4px 0 !important; } /* 🆕 container の左右padding詰めてはみ出し防止 */ .container { padding: 8px 6px 80px !important; } /* 🆕 申請ボタンが下にあれば固定表示で押しやすく */ .submit-bar, .submit-bar-fixed { position: sticky; bottom: 0; background: white; z-index: 10; padding: 8px; box-shadow: 0 -2px 8px rgba(0,0,0,0.06); } /* ─── 月切替ボタン ─── */ .month-nav-btn { padding: 10px 16px !important; font-size: 18px !important; } .month-title { font-size: 16px !important; } /* ─── モーダル：スマホで全幅近くまで広げる ─── */ .modal, .modal-content { max-width: 95vw !important; width: 95vw !important; margin: 4vh auto !important; max-height: 92vh; overflow-y: auto; } .modal-header { font-size: 16px; padding: 12px !important; } .modal-body { padding: 12px !important; } .modal-close { width: 40px; height: 40px; font-size: 20px; } /* ─── メンバー選択ボタン：縦並び ─── */ .member-buttons, .member-select .member-buttons { flex-direction: column !important; gap: 8px !important; } .member-btn { width: 100%; font-size: 15px !important; padding: 14px 16px !important; text-align: center; } /* ─── 統計（stat-grid）：1列で見やすく ─── */ .stat-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; } .stat-card { padding: 10px !important; } .stat-value { font-size: 18px !important; } .stat-label { font-size: 11px !important; } /* ─── KPI入力フォーム：1列スタック ─── */ .kpi-row, .form-row { grid-template-columns: 1fr !important; display: flex !important; flex-direction: column !important; gap: 6px !important; } /* ─── テーブル：横スクロール ＆ セル余白圧縮 ─── */ table { font-size: 12px; } table th, table td { padding: 6px 8px !important; } /* 大きすぎるテーブルは、囲っているdivを横スクロールに */ .invoice-list, .kpi-history, .expense-list, .summary-section { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ─── 経費・日報フォーム：縦並び ─── */ .expense-row, .report-row, .form-grid { grid-template-columns: 1fr !important; gap: 8px !important; } /* 送信・追加ボタンは横幅100% */ .expense-row + button, .submit-btn, .primary-btn { width: 100%; } /* ─── 予備日候補ボタン：左右に大きく ─── */ .ans-buttons { gap: 10px !important; } .ans-btn { padding: 14px 12px !important; font-size: 15px !important; min-height: 50px; } /* ─── トースト位置：下部にしっかり ─── */ .toast { bottom: 20px !important; left: 12px !important; right: 12px !important; width: auto !important; max-width: none !important; font-size: 13px; } /* ─── マニュアル系セクションの読みやすさ ─── */ section h2 { font-size: 17px !important; } section h3 { font-size: 14px !important; } section p, section li { font-size: 13px !important; line-height: 1.7; } ol, ul { padding-left: 20px !important; } .step, .tip, .warn { font-size: 13px !important; padding: 10px 12px !important; } /* ─── マイシフトの日付チップ ─── */ .shift-card, .shift-list-section .item { padding: 10px 12px !important; font-size: 13px; } /* ─── 大きなボタンリンク（マニュアル等の big-btn） ─── */ .big-btn { display: block !important; width: 100%; text-align: center; margin: 6px 0 !important; } /* ─── select / 日付ピッカーを大きく ─── */ select, input[type="date"] { padding: 12px 10px !important; width: 100%; } /* ─── ラベル × 入力欄のレイアウト：縦並び ─── */ label + input, label + select, label + textarea { display: block; margin-top: 4px; } /* ─── 余分なpaddingを左右に取って端見切れ防止 ─── */ .container { padding-left: 14px !important; padding-right: 14px !important; } /* ─── 通知メッセージカードの中身：縦並び＆大きいタップ領域 ─── */ .msg-card, [class*="msg-"] { font-size: 13px; } } /* =========================================================== * 超小型スマホ（< 360px = iPhone SE等） * =========================================================== */ @media (max-width: 360px) { .doc-title, header h1 { font-size: 17px !important; } .stat-grid { grid-template-columns: 1fr !important; } .cal-day, .calendar-day, .cell { min-height: 52px !important; } .nav-link { font-size: 12px !important; padding: 7px 11px !important; } } /* =========================================================== * PCでは元のレイアウトを尊重するために何もしない * （min-width: 601px 以上はオーバーライドなし） * =========================================================== */