327 lines
8.3 KiB
CSS
327 lines
8.3 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;
|
|
}
|
|
}
|