380 lines
9.7 KiB
CSS
380 lines
9.7 KiB
CSS
/* ==================================================================
|
||
mobile.css — iOS Safari・Android Chrome レスポンシブ対応
|
||
ブレークポイント: 767px 以下をモバイルとして扱う
|
||
PC のレイアウトは変更しない (screen media query で完全に隔離)
|
||
================================================================== */
|
||
|
||
/* ── iOS Safari フォントブースト無効化 ── */
|
||
html {
|
||
-webkit-text-size-adjust: 100%;
|
||
}
|
||
|
||
@media screen and (max-width: 767px) {
|
||
/* ── body 余白を縮小 ── */
|
||
body {
|
||
padding: 12px !important;
|
||
margin: 8px !important;
|
||
}
|
||
|
||
/* ── h1・h2 フォントサイズ ── */
|
||
h1 {
|
||
font-size: 1.35rem !important;
|
||
}
|
||
h2 {
|
||
font-size: 1.1rem !important;
|
||
}
|
||
|
||
/* ================================================================
|
||
テーブル: 横スクロール
|
||
会計・給与テーブルは列数が多く、横スクロールが最適解
|
||
================================================================ */
|
||
table {
|
||
display: block;
|
||
overflow-x: auto;
|
||
-webkit-overflow-scrolling: touch;
|
||
max-width: 100%;
|
||
}
|
||
|
||
/* テーブルを包む overflow:hidden ラッパーも解放する */
|
||
.doc-table-wrap {
|
||
overflow-x: auto !important;
|
||
}
|
||
|
||
/* ================================================================
|
||
フォーム入力: 16px で iOS の自動ズームを防ぐ
|
||
================================================================ */
|
||
input[type="text"],
|
||
input[type="date"],
|
||
input[type="number"],
|
||
input[type="password"],
|
||
input[type="email"],
|
||
input[type="tel"],
|
||
select,
|
||
textarea {
|
||
font-size: 16px !important;
|
||
max-width: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* ================================================================
|
||
ボタン: タップ領域を 44px 以上に (iOS HIG 推奨)
|
||
================================================================ */
|
||
button,
|
||
input[type="submit"],
|
||
input[type="button"],
|
||
.btn,
|
||
.upload-btn,
|
||
.back-link,
|
||
.logout-btn,
|
||
.change-pw-btn {
|
||
min-height: 44px;
|
||
touch-action: manipulation;
|
||
}
|
||
|
||
/* ================================================================
|
||
index.html
|
||
================================================================ */
|
||
|
||
/* 2カラムカードグリッド → 1カラム */
|
||
.grid {
|
||
grid-template-columns: 1fr !important;
|
||
}
|
||
|
||
/* ヘッダー: タイトルとユーザー情報を縦積み */
|
||
header {
|
||
flex-direction: column !important;
|
||
align-items: flex-start !important;
|
||
gap: 10px !important;
|
||
}
|
||
|
||
header h1 {
|
||
font-size: 18px !important;
|
||
}
|
||
|
||
.user-info {
|
||
flex-wrap: wrap !important;
|
||
width: 100% !important;
|
||
gap: 8px !important;
|
||
font-size: 13px !important;
|
||
}
|
||
|
||
/* カード内ボタン群: 縦積み・margin-left をリセット */
|
||
.card p:last-child {
|
||
display: flex !important;
|
||
flex-direction: column !important;
|
||
gap: 8px !important;
|
||
}
|
||
|
||
.btn {
|
||
margin-left: 0 !important;
|
||
display: block !important;
|
||
text-align: center !important;
|
||
box-sizing: border-box !important;
|
||
}
|
||
|
||
/* パスワード変更モーダル: 画面幅に合わせる */
|
||
.modal-box {
|
||
width: 92vw !important;
|
||
max-width: 92vw !important;
|
||
padding: 20px !important;
|
||
}
|
||
|
||
/* ================================================================
|
||
payroll.html (給与システムメニュー)
|
||
================================================================ */
|
||
|
||
.menu-grid {
|
||
grid-template-columns: 1fr !important;
|
||
}
|
||
|
||
.menu-card {
|
||
padding: 20px !important;
|
||
}
|
||
|
||
/* ================================================================
|
||
journal-entry.html / journal-edit.html (仕訳入力)
|
||
================================================================ */
|
||
|
||
/* 検索フォーム: 2カラムグリッド → 1カラム */
|
||
.search-form-grid {
|
||
grid-template-columns: 1fr !important;
|
||
gap: 12px !important;
|
||
}
|
||
|
||
.search-form-row,
|
||
.search-form-row-full {
|
||
flex-direction: column !important;
|
||
align-items: flex-start !important;
|
||
gap: 4px !important;
|
||
}
|
||
|
||
.search-form-row label,
|
||
.search-form-row-full label {
|
||
min-width: unset !important;
|
||
width: 100%;
|
||
}
|
||
|
||
.search-form-row input,
|
||
.search-form-row select,
|
||
.search-form-row-full input,
|
||
.search-form-row-full select {
|
||
width: 100% !important;
|
||
box-sizing: border-box !important;
|
||
}
|
||
|
||
/* 検索ボタン群 */
|
||
.search-buttons {
|
||
flex-wrap: wrap !important;
|
||
gap: 6px !important;
|
||
}
|
||
|
||
.search-buttons button {
|
||
flex: 1 1 auto !important;
|
||
min-width: 100px !important;
|
||
}
|
||
|
||
/* .row: 日付・摘要・勘定科目などの入力行 */
|
||
.row {
|
||
flex-direction: column !important;
|
||
align-items: flex-start !important;
|
||
gap: 6px !important;
|
||
width: 100%;
|
||
}
|
||
|
||
.row label {
|
||
min-width: unset !important;
|
||
}
|
||
|
||
.row input,
|
||
.row select {
|
||
width: 100% !important;
|
||
box-sizing: border-box !important;
|
||
}
|
||
|
||
/* ================================================================
|
||
trial-balance.html (試算表)
|
||
テキスト中心の inline 検索フォームを縦積みにする
|
||
================================================================ */
|
||
|
||
.search-form {
|
||
text-align: left !important;
|
||
padding: 12px !important;
|
||
}
|
||
|
||
/* trial-balance の検索フォームは label/input が直接子要素 */
|
||
.search-form > label {
|
||
display: block !important;
|
||
margin: 6px 0 2px !important;
|
||
}
|
||
|
||
.search-form > input[type="text"],
|
||
.search-form > input[type="date"],
|
||
.search-form > input[type="number"] {
|
||
display: block !important;
|
||
width: 100% !important;
|
||
margin: 0 0 8px 15px !important;
|
||
box-sizing: border-box !important;
|
||
}
|
||
|
||
.search-form > button {
|
||
display: inline-block !important;
|
||
margin: 4px 4px 0 0 !important;
|
||
width: auto !important;
|
||
min-width: 80px;
|
||
}
|
||
|
||
/* ================================================================
|
||
nenkin-portal.html (社会保険電子文書)
|
||
================================================================ */
|
||
|
||
.page-header {
|
||
flex-direction: column !important;
|
||
align-items: flex-start !important;
|
||
gap: 10px !important;
|
||
}
|
||
|
||
.upload-zone {
|
||
padding: 20px 16px !important;
|
||
}
|
||
|
||
/* フィルターバー: wrapping は既存スタイルで対応済み、幅を補完 */
|
||
.filter-bar {
|
||
gap: 8px !important;
|
||
}
|
||
|
||
.filter-select {
|
||
width: 100% !important;
|
||
box-sizing: border-box !important;
|
||
}
|
||
|
||
/* ================================================================
|
||
payroll-employees.html / payroll-settings.html (タブ UI)
|
||
================================================================ */
|
||
|
||
.nav-tabs {
|
||
flex-wrap: wrap !important;
|
||
justify-content: flex-start !important;
|
||
gap: 6px !important;
|
||
border-bottom: none !important;
|
||
}
|
||
|
||
.nav-tab {
|
||
padding: 8px 14px !important;
|
||
font-size: 0.85rem !important;
|
||
border-radius: 6px !important;
|
||
}
|
||
|
||
/* container の余白縮小 */
|
||
.container {
|
||
margin: 10px !important;
|
||
padding: 16px 12px !important;
|
||
border-radius: 10px !important;
|
||
}
|
||
|
||
/* ================================================================
|
||
payroll-settings.html (2/3カラムフォームグリッド → 1カラム)
|
||
================================================================ */
|
||
|
||
.form-row {
|
||
display: flex !important;
|
||
flex-direction: column !important;
|
||
gap: 10px !important;
|
||
}
|
||
|
||
.form-row-3 {
|
||
display: flex !important;
|
||
flex-direction: column !important;
|
||
gap: 10px !important;
|
||
}
|
||
|
||
.form-group {
|
||
width: 100%;
|
||
}
|
||
|
||
.form-group input,
|
||
.form-group select,
|
||
.form-group textarea {
|
||
width: 100% !important;
|
||
box-sizing: border-box !important;
|
||
}
|
||
|
||
/* ================================================================
|
||
payroll-calculation.html (月次給与計算)
|
||
================================================================ */
|
||
|
||
/* フィルター行のラベルを縦積み */
|
||
.filters {
|
||
display: flex !important;
|
||
flex-direction: column !important;
|
||
gap: 8px !important;
|
||
padding: 12px !important;
|
||
}
|
||
|
||
.filters label {
|
||
display: flex !important;
|
||
flex-direction: column !important;
|
||
gap: 4px !important;
|
||
margin-right: 0 !important;
|
||
width: 100%;
|
||
}
|
||
|
||
.filters input,
|
||
.filters select {
|
||
width: 100% !important;
|
||
box-sizing: border-box !important;
|
||
}
|
||
|
||
/* ── split-layout: PC は左右分割、モバイルは上下積み ── */
|
||
/* 左リスト・右明細を縦方向に並べ直す */
|
||
.split-layout {
|
||
flex-direction: column !important;
|
||
}
|
||
|
||
.split-left {
|
||
flex: none !important;
|
||
width: 100% !important;
|
||
max-width: none !important;
|
||
min-width: 0 !important;
|
||
max-height: none !important;
|
||
overflow-y: visible !important;
|
||
position: static !important;
|
||
}
|
||
|
||
.split-right {
|
||
width: 100% !important;
|
||
min-width: 0 !important;
|
||
border-left: none !important;
|
||
border-top: 2px solid #e0e8f0 !important;
|
||
padding-left: 0 !important;
|
||
padding-top: 16px !important;
|
||
margin-top: 8px !important;
|
||
max-height: none !important;
|
||
overflow-y: visible !important;
|
||
position: static !important;
|
||
}
|
||
|
||
/* ── タブ（給与計算・賞与計算・帳票出力）を折り返し ── */
|
||
.nav-tabs-calc {
|
||
flex-wrap: wrap !important;
|
||
gap: 6px !important;
|
||
border-bottom: none !important;
|
||
}
|
||
|
||
.nav-tab-calc {
|
||
padding: 8px 14px !important;
|
||
font-size: 0.9rem !important;
|
||
border-radius: 6px !important;
|
||
}
|
||
|
||
/* ── 新規計算モーダル（inline style の width:800px を上書き） ── */
|
||
#calculateModal,
|
||
#bonusModal {
|
||
width: 92vw !important;
|
||
left: 4vw !important;
|
||
transform: none !important;
|
||
max-width: 92vw !important;
|
||
padding: 20px 16px !important;
|
||
box-sizing: border-box !important;
|
||
}
|
||
}
|