diff --git a/frontend/bank-statement.html b/frontend/bank-statement.html
index 470ca86..7b56e4b 100644
--- a/frontend/bank-statement.html
+++ b/frontend/bank-statement.html
@@ -28,8 +28,14 @@
         flex-wrap: wrap;
         gap: 10px;
       }
-      .page-header h2 { margin: 0; }
-      .header-btns { display: flex; gap: 8px; flex-wrap: wrap; }
+      .page-header h2 {
+        margin: 0;
+      }
+      .header-btns {
+        display: flex;
+        gap: 8px;
+        flex-wrap: wrap;
+      }
 
       /* ── 検索フォーム ── */
       .search-form {
@@ -43,7 +49,10 @@
         flex-wrap: wrap;
         gap: 12px;
       }
-      .search-form label { font-weight: bold; white-space: nowrap; }
+      .search-form label {
+        font-weight: bold;
+        white-space: nowrap;
+      }
       .search-form select,
       .search-form input[type="number"] {
         padding: 5px 10px;
@@ -65,16 +74,41 @@
         text-decoration: none;
         display: inline-block;
       }
-      .btn-primary  { background: #4caf50; color: #fff; }
-      .btn-primary:hover  { background: #43a047; }
-      .btn-blue     { background: #2196f3; color: #fff; }
-      .btn-blue:hover     { background: #1976d2; }
-      .btn-orange   { background: #ff9800; color: #fff; }
-      .btn-orange:hover   { background: #f57c00; }
-      .btn-danger   { background: #e53935; color: #fff; }
-      .btn-danger:hover   { background: #c62828; }
-      .btn-gray     { background: #9e9e9e; color: #fff; }
-      .btn-gray:hover     { background: #757575; }
+      .btn-primary {
+        background: #4caf50;
+        color: #fff;
+      }
+      .btn-primary:hover {
+        background: #43a047;
+      }
+      .btn-blue {
+        background: #2196f3;
+        color: #fff;
+      }
+      .btn-blue:hover {
+        background: #1976d2;
+      }
+      .btn-orange {
+        background: #ff9800;
+        color: #fff;
+      }
+      .btn-orange:hover {
+        background: #f57c00;
+      }
+      .btn-danger {
+        background: #e53935;
+        color: #fff;
+      }
+      .btn-danger:hover {
+        background: #c62828;
+      }
+      .btn-gray {
+        background: #9e9e9e;
+        color: #fff;
+      }
+      .btn-gray:hover {
+        background: #757575;
+      }
 
       /* ── 月別サマリー ── */
       .monthly-summary {
@@ -92,8 +126,15 @@
         font-size: 13px;
         white-space: nowrap;
       }
-      .month-chip:hover { background: #e3f2fd; border-color: #2196f3; }
-      .month-chip.active { background: #2196f3; color: #fff; border-color: #1976d2; }
+      .month-chip:hover {
+        background: #e3f2fd;
+        border-color: #2196f3;
+      }
+      .month-chip.active {
+        background: #2196f3;
+        color: #fff;
+        border-color: #1976d2;
+      }
 
       /* ── 統計バー ── */
       .stats-bar {
@@ -103,11 +144,23 @@
         font-size: 13px;
         flex-wrap: wrap;
       }
-      .stat-item { display: flex; align-items: center; gap: 6px; }
-      .stat-label { color: #666; }
-      .stat-value { font-weight: bold; }
-      .stat-value.debit  { color: #e53935; }
-      .stat-value.credit { color: #1565c0; }
+      .stat-item {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+      }
+      .stat-label {
+        color: #666;
+      }
+      .stat-value {
+        font-weight: bold;
+      }
+      .stat-value.debit {
+        color: #e53935;
+      }
+      .stat-value.credit {
+        color: #1565c0;
+      }
 
       /* ── テーブル ── */
       table {
@@ -115,7 +168,8 @@
         width: 100%;
         font-size: 13px;
       }
-      th, td {
+      th,
+      td {
         border: 1px solid #bbb;
         padding: 6px 10px;
       }
@@ -125,14 +179,30 @@
         text-align: center;
         white-space: nowrap;
       }
-      td { background: #fff; }
-      tr:nth-child(even) td { background: #fafafa; }
-      tr:hover td { background: #e3f2fd; }
-      .text-right  { text-align: right; }
-      .text-center { text-align: center; }
-      .text-left   { text-align: left; }
-      td.debit-cell  { color: #c62828; }
-      td.credit-cell { color: #1565c0; }
+      td {
+        background: #fff;
+      }
+      tr:nth-child(even) td {
+        background: #fafafa;
+      }
+      tr:hover td {
+        background: #e3f2fd;
+      }
+      .text-right {
+        text-align: right;
+      }
+      .text-center {
+        text-align: center;
+      }
+      .text-left {
+        text-align: left;
+      }
+      td.debit-cell {
+        color: #c62828;
+      }
+      td.credit-cell {
+        color: #1565c0;
+      }
       .no-data {
         text-align: center;
         color: #999;
@@ -145,23 +215,28 @@
         display: none;
         position: fixed;
         inset: 0;
-        background: rgba(0,0,0,0.5);
+        background: rgba(0, 0, 0, 0.5);
         z-index: 1000;
         justify-content: center;
         align-items: flex-start;
         padding: 30px 16px;
         overflow-y: auto;
       }
-      .modal-overlay.active { display: flex; }
+      .modal-overlay.active {
+        display: flex;
+      }
       .modal-box {
         background: #fff;
         border-radius: 8px;
         padding: 28px;
         width: 100%;
         max-width: 920px;
-        box-shadow: 0 10px 30px rgba(0,0,0,0.3);
+        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+      }
+      .modal-box h3 {
+        margin: 0 0 18px;
+        font-size: 17px;
       }
-      .modal-box h3 { margin: 0 0 18px; font-size: 17px; }
       .modal-form-row {
         display: flex;
         align-items: center;
@@ -169,7 +244,10 @@
         margin-bottom: 16px;
         flex-wrap: wrap;
       }
-      .modal-form-row label { font-weight: bold; white-space: nowrap; }
+      .modal-form-row label {
+        font-weight: bold;
+        white-space: nowrap;
+      }
       .modal-form-row input[type="text"] {
         flex: 1;
         min-width: 160px;
@@ -188,15 +266,24 @@
         color: #666;
         cursor: pointer;
         margin-bottom: 16px;
-        transition: border-color 0.2s, background 0.2s;
+        transition:
+          border-color 0.2s,
+          background 0.2s;
       }
-      .drop-zone:hover, .drop-zone.dragover {
+      .drop-zone:hover,
+      .drop-zone.dragover {
         border-color: #2196f3;
         background: #e3f2fd;
         color: #1565c0;
       }
-      .drop-zone input[type="file"] { display: none; }
-      .drop-zone .drop-icon { font-size: 36px; display: block; margin-bottom: 8px; }
+      .drop-zone input[type="file"] {
+        display: none;
+      }
+      .drop-zone .drop-icon {
+        font-size: 36px;
+        display: block;
+        margin-bottom: 8px;
+      }
 
       /* プレビュー結果 */
       .preview-summary {
@@ -208,10 +295,19 @@
         border-radius: 4px;
         flex-wrap: wrap;
       }
-      .preview-summary .ps-item { font-size: 14px; }
-      .ps-new  { color: #2e7d32; font-weight: bold; }
-      .ps-dup  { color: #e65100; }
-      .ps-total { font-weight: bold; }
+      .preview-summary .ps-item {
+        font-size: 14px;
+      }
+      .ps-new {
+        color: #2e7d32;
+        font-weight: bold;
+      }
+      .ps-dup {
+        color: #e65100;
+      }
+      .ps-total {
+        font-weight: bold;
+      }
 
       .preview-table-wrap {
         max-height: 360px;
@@ -220,10 +316,21 @@
         border-radius: 4px;
         margin-bottom: 16px;
       }
-      .preview-table-wrap table { font-size: 12px; }
-      .preview-table-wrap th { position: sticky; top: 0; z-index: 1; }
-      tr.row-new td  { background: #e8f5e9 !important; }
-      tr.row-dup td  { background: #fff3e0 !important; color: #999; }
+      .preview-table-wrap table {
+        font-size: 12px;
+      }
+      .preview-table-wrap th {
+        position: sticky;
+        top: 0;
+        z-index: 1;
+      }
+      tr.row-new td {
+        background: #e8f5e9 !important;
+      }
+      tr.row-dup td {
+        background: #fff3e0 !important;
+        color: #999;
+      }
       .badge {
         display: inline-block;
         padding: 2px 8px;
@@ -231,8 +338,14 @@
         font-size: 11px;
         font-weight: bold;
       }
-      .badge-new { background: #c8e6c9; color: #1b5e20; }
-      .badge-dup { background: #ffe0b2; color: #bf360c; }
+      .badge-new {
+        background: #c8e6c9;
+        color: #1b5e20;
+      }
+      .badge-dup {
+        background: #ffe0b2;
+        color: #bf360c;
+      }
 
       .modal-btn-row {
         display: flex;
@@ -249,9 +362,21 @@
         display: none;
         font-size: 14px;
       }
-      .msg-bar.info    { background: #e3f2fd; color: #0d47a1; border: 1px solid #90caf9; }
-      .msg-bar.success { background: #e8f5e9; color: #1b5e20; border: 1px solid #a5d6a7; }
-      .msg-bar.error   { background: #ffebee; color: #b71c1c; border: 1px solid #ef9a9a; }
+      .msg-bar.info {
+        background: #e3f2fd;
+        color: #0d47a1;
+        border: 1px solid #90caf9;
+      }
+      .msg-bar.success {
+        background: #e8f5e9;
+        color: #1b5e20;
+        border: 1px solid #a5d6a7;
+      }
+      .msg-bar.error {
+        background: #ffebee;
+        color: #b71c1c;
+        border: 1px solid #ef9a9a;
+      }
 
       /* ── ページネーション ── */
       .pagination {
@@ -263,19 +388,48 @@
         flex-wrap: wrap;
         padding: 8px 0;
       }
-      .page-info { font-size: 13px; color: #333; }
-      .btn-page { background: #f0f0f0; color: #333; border: 1px solid #bbb; }
-      .btn-page:hover:not(:disabled) { background: #e0e0e0; }
-      .btn-page:disabled { opacity: 0.4; cursor: default; }
+      .page-info {
+        font-size: 13px;
+        color: #333;
+      }
+      .btn-page {
+        background: #f0f0f0;
+        color: #333;
+        border: 1px solid #bbb;
+      }
+      .btn-page:hover:not(:disabled) {
+        background: #e0e0e0;
+      }
+      .btn-page:disabled {
+        opacity: 0.4;
+        cursor: default;
+      }
 
       /* ── 印刷スタイル ── */
       @media print {
-        .no-print { display: none !important; }
-        body { margin: 0; font-size: 12px; }
-        table { font-size: 11px; }
-        th, td { padding: 4px 6px; }
-        .monthly-summary, .stats-bar { margin-bottom: 6px; }
-        .month-chip { border: 1px solid #999 !important; color: #000 !important; background: #fff !important; }
+        .no-print {
+          display: none !important;
+        }
+        body {
+          margin: 0;
+          font-size: 12px;
+        }
+        table {
+          font-size: 11px;
+        }
+        th,
+        td {
+          padding: 4px 6px;
+        }
+        .monthly-summary,
+        .stats-bar {
+          margin-bottom: 6px;
+        }
+        .month-chip {
+          border: 1px solid #999 !important;
+          color: #000 !important;
+          background: #fff !important;
+        }
       }
     </style>
   </head>
@@ -283,7 +437,9 @@
     <div class="page-header no-print">
       <h2>🏦 銀行明細照会</h2>
       <div class="header-btns">
-        <button class="btn btn-orange" onclick="openImportModal()">CSV取込</button>
+        <button class="btn btn-orange" onclick="openImportModal()">
+          CSV取込
+        </button>
         <button class="btn btn-blue" onclick="window.print()">印刷</button>
         <a class="btn btn-gray" href="index.html">← メニューへ戻る</a>
       </div>
@@ -294,16 +450,28 @@
     <!-- 検索フォーム -->
     <div class="search-form no-print">
       <label>年：</label>
-      <input type="number" id="filterYear" min="2000" max="2099" style="width:80px" />
+      <input
+        type="number"
+        id="filterYear"
+        min="2000"
+        max="2099"
+        style="width: 80px"
+      />
       <label>月：</label>
       <select id="filterMonth">
         <option value="">全月</option>
-        <option value="1">1月</option><option value="2">2月</option>
-        <option value="3">3月</option><option value="4">4月</option>
-        <option value="5">5月</option><option value="6">6月</option>
-        <option value="7">7月</option><option value="8">8月</option>
-        <option value="9">9月</option><option value="10">10月</option>
-        <option value="11">11月</option><option value="12">12月</option>
+        <option value="1">1月</option>
+        <option value="2">2月</option>
+        <option value="3">3月</option>
+        <option value="4">4月</option>
+        <option value="5">5月</option>
+        <option value="6">6月</option>
+        <option value="7">7月</option>
+        <option value="8">8月</option>
+        <option value="9">9月</option>
+        <option value="10">10月</option>
+        <option value="11">11月</option>
+        <option value="12">12月</option>
       </select>
       <label>銀行：</label>
       <select id="filterBank">
@@ -333,28 +501,45 @@
         <div id="step1">
           <div class="modal-form-row">
             <label>銀行名：</label>
-            <input type="text" id="bankNameInput" placeholder="例：三菱UFJ銀行 本店普通口座" />
+            <input
+              type="text"
+              id="bankNameInput"
+              placeholder="例：三菱UFJ銀行 本店普通口座"
+            />
           </div>
-          <div class="drop-zone" id="dropZone" onclick="document.getElementById('csvFile').click()">
+          <div
+            class="drop-zone"
+            id="dropZone"
+            onclick="document.getElementById('csvFile').click()"
+          >
             <span class="drop-icon">📄</span>
             <div>CSVファイルをドラッグ＆ドロップ、またはクリックして選択</div>
-            <div style="font-size:12px;color:#999;margin-top:6px">対応形式: CSV（UTF-8 / Shift-JIS）</div>
-            <input type="file" id="csvFile" accept=".csv,.txt" onchange="onFileSelected(this)" />
+            <div style="font-size: 12px; color: #999; margin-top: 6px">
+              対応形式: CSV（UTF-8 / Shift-JIS）
+            </div>
+            <input
+              type="file"
+              id="csvFile"
+              accept=".csv,.txt"
+              onchange="onFileSelected(this)"
+            />
           </div>
           <div id="step1msg" class="msg-bar"></div>
           <div class="modal-btn-row">
-            <button class="btn btn-gray" onclick="closeImportModal()">キャンセル</button>
+            <button class="btn btn-gray" onclick="closeImportModal()">
+              キャンセル
+            </button>
           </div>
         </div>
 
         <!-- ステップ2: プレビュー -->
-        <div id="step2" style="display:none">
+        <div id="step2" style="display: none">
           <div class="preview-summary" id="previewSummary"></div>
           <div class="preview-table-wrap">
             <table id="previewTable">
               <thead>
                 <tr>
-                  <th style="width:36px">状態</th>
+                  <th style="width: 36px">状態</th>
                   <th>日付</th>
                   <th>摘要</th>
                   <th>出金</th>
@@ -369,20 +554,36 @@
           <div id="step2msg" class="msg-bar"></div>
           <div class="modal-btn-row">
             <button class="btn btn-gray" onclick="backToStep1()">← 戻る</button>
-            <button class="btn btn-primary" id="importConfirmBtn" onclick="confirmImport()">
+            <button
+              class="btn btn-primary"
+              id="importConfirmBtn"
+              onclick="confirmImport()"
+            >
               新規データを取込む
             </button>
           </div>
         </div>
 
         <!-- ステップ3: 完了 -->
-        <div id="step3" style="display:none">
-          <div id="step3msg" class="msg-bar success" style="display:block"></div>
-          <div class="modal-btn-row" style="margin-top:16px">
-            <button class="btn btn-primary" onclick="closeImportModal(); loadData()">
+        <div id="step3" style="display: none">
+          <div
+            id="step3msg"
+            class="msg-bar success"
+            style="display: block"
+          ></div>
+          <div class="modal-btn-row" style="margin-top: 16px">
+            <button
+              class="btn btn-primary"
+              onclick="
+                closeImportModal();
+                loadData();
+              "
+            >
               明細を表示する
             </button>
-            <button class="btn btn-orange" onclick="backToStep1()">続けて取込む</button>
+            <button class="btn btn-orange" onclick="backToStep1()">
+              続けて取込む
+            </button>
           </div>
         </div>
       </div>
@@ -391,12 +592,12 @@
     <script>
       // ── 初期化 ──────────────────────────────────────────────
       let _previewRows = [];
-      let _bankName    = '';
-      let _allRows     = [];
+      let _bankName = "";
+      let _allRows = [];
       let _currentPage = 1;
-      const PAGE_SIZE  = 100;
+      const PAGE_SIZE = 100;
 
-      document.addEventListener('DOMContentLoaded', () => {
+      document.addEventListener("DOMContentLoaded", () => {
         loadBanks();
         loadData();
         initDropZone();
@@ -406,28 +607,29 @@
       function showMsg(id, text, type) {
         const el = document.getElementById(id);
         el.textContent = text;
-        el.className = 'msg-bar ' + type;
-        el.style.display = 'block';
+        el.className = "msg-bar " + type;
+        el.style.display = "block";
       }
       function hideMsg(id) {
         const el = document.getElementById(id);
-        el.style.display = 'none';
+        el.style.display = "none";
       }
 
       // ── 銀行名リスト読み込み ────────────────────────────────
       async function loadBanks() {
         try {
-          const res  = await fetch('/bank-statements?limit=1');
+          const res = await fetch("/bank-statements?limit=1");
           if (!res.ok) return;
           const data = await res.json();
-          const sel  = document.getElementById('filterBank');
-          const cur  = sel.value;
+          const sel = document.getElementById("filterBank");
+          const cur = sel.value;
           // 既存オプションを保持しつつ追加
-          const existing = Array.from(sel.options).map(o => o.value);
-          data.banks.forEach(b => {
+          const existing = Array.from(sel.options).map((o) => o.value);
+          data.banks.forEach((b) => {
             if (!existing.includes(b)) {
-              const opt = document.createElement('option');
-              opt.value = b; opt.textContent = b;
+              const opt = document.createElement("option");
+              opt.value = b;
+              opt.textContent = b;
               sel.appendChild(opt);
             }
           });
@@ -437,42 +639,43 @@
 
       // ── 明細データ読み込み ──────────────────────────────────
       async function loadData() {
-        const year  = document.getElementById('filterYear').value;
-        const month = document.getElementById('filterMonth').value;
-        const bank  = document.getElementById('filterBank').value;
+        const year = document.getElementById("filterYear").value;
+        const month = document.getElementById("filterMonth").value;
+        const bank = document.getElementById("filterBank").value;
 
-        hideMsg('msgBar');
+        hideMsg("msgBar");
 
         const qp = [];
-        if (year)  qp.push(`year=${year}`);
+        if (year) qp.push(`year=${year}`);
         if (month) qp.push(`month=${month}`);
-        if (bank)  qp.push(`bank_name=${encodeURIComponent(bank)}`);
-        const url = '/bank-statements' + (qp.length ? '?' + qp.join('&') : '');
+        if (bank) qp.push(`bank_name=${encodeURIComponent(bank)}`);
+        const url = "/bank-statements" + (qp.length ? "?" + qp.join("&") : "");
 
         try {
-          const res  = await fetch(url);
+          const res = await fetch(url);
           if (!res.ok) throw new Error(await res.text());
           const data = await res.json();
 
-          _allRows     = data.rows;
+          _allRows = data.rows;
           _currentPage = 1;
           renderMonthlyChips(data.monthly, year, month);
           renderStats();
           renderTable();
           updateBankFilter(data.banks);
         } catch (e) {
-          showMsg('msgBar', 'データ取得エラー: ' + e.message, 'error');
+          showMsg("msgBar", "データ取得エラー: " + e.message, "error");
         }
       }
 
       function updateBankFilter(banks) {
-        const sel = document.getElementById('filterBank');
+        const sel = document.getElementById("filterBank");
         const cur = sel.value;
         // 全銀行以外のオプションをクリアして再構築
         while (sel.options.length > 1) sel.remove(1);
-        banks.forEach(b => {
-          const opt = document.createElement('option');
-          opt.value = b; opt.textContent = b;
+        banks.forEach((b) => {
+          const opt = document.createElement("option");
+          opt.value = b;
+          opt.textContent = b;
           sel.appendChild(opt);
         });
         if (cur) sel.value = cur;
@@ -480,32 +683,34 @@
 
       // ── 月別チップ ──────────────────────────────────────────
       function renderMonthlyChips(monthly, selYear, selMonth) {
-        const wrap = document.getElementById('monthlyChips');
-        wrap.innerHTML = '';
+        const wrap = document.getElementById("monthlyChips");
+        wrap.innerHTML = "";
         if (!monthly.length) return;
 
         // 「全月」チップ
-        const allChip = document.createElement('span');
-        allChip.className = 'month-chip no-print' + (!selMonth ? ' active' : '');
-        allChip.textContent = '全月';
+        const allChip = document.createElement("span");
+        allChip.className =
+          "month-chip no-print" + (!selMonth ? " active" : "");
+        allChip.textContent = "全月";
         allChip.onclick = () => {
-          document.getElementById('filterMonth').value = '';
+          document.getElementById("filterMonth").value = "";
           loadData();
         };
         wrap.appendChild(allChip);
 
-        monthly.forEach(m => {
-          const [y, mo] = m.ym.split('-');
-          const chip = document.createElement('span');
-          const isActive = (String(selYear) === y && String(selMonth) === String(parseInt(mo)));
-          chip.className = 'month-chip no-print' + (isActive ? ' active' : '');
+        monthly.forEach((m) => {
+          const [y, mo] = m.ym.split("-");
+          const chip = document.createElement("span");
+          const isActive =
+            String(selYear) === y && String(selMonth) === String(parseInt(mo));
+          chip.className = "month-chip no-print" + (isActive ? " active" : "");
           chip.innerHTML = `${parseInt(mo)}月 <small style="color:inherit;opacity:.8">${
-            (m.count)}件</small>`;
-          chip.title =
-            `出金 ${fmt(m.total_debit)} / 入金 ${fmt(m.total_credit)}`;
+            m.count
+          }件</small>`;
+          chip.title = `出金 ${fmt(m.total_debit)} / 入金 ${fmt(m.total_credit)}`;
           chip.onclick = () => {
-            document.getElementById('filterYear').value  = y;
-            document.getElementById('filterMonth').value = parseInt(mo);
+            document.getElementById("filterYear").value = y;
+            document.getElementById("filterMonth").value = parseInt(mo);
             loadData();
           };
           wrap.appendChild(chip);
@@ -514,9 +719,12 @@
 
       // ── 統計バー ────────────────────────────────────────────
       function renderStats() {
-        const bar = document.getElementById('statsBar');
-        if (!_allRows.length) { bar.innerHTML = ''; return; }
-        const totalDebit  = _allRows.reduce((s, r) => s + (r.debit  || 0), 0);
+        const bar = document.getElementById("statsBar");
+        if (!_allRows.length) {
+          bar.innerHTML = "";
+          return;
+        }
+        const totalDebit = _allRows.reduce((s, r) => s + (r.debit || 0), 0);
         const totalCredit = _allRows.reduce((s, r) => s + (r.credit || 0), 0);
         bar.innerHTML = `
           <div class="stat-item">
@@ -540,13 +748,14 @@
 
       // ── 明細テーブル ─────────────────────────────────────────
       function renderTable() {
-        const wrap = document.getElementById('tableWrap');
+        const wrap = document.getElementById("tableWrap");
         if (!_allRows.length) {
-          wrap.innerHTML = '<div class="no-data">該当する明細データがありません</div>';
+          wrap.innerHTML =
+            '<div class="no-data">該当する明細データがありません</div>';
           renderPagination(0);
           return;
         }
-        const start    = (_currentPage - 1) * PAGE_SIZE;
+        const start = (_currentPage - 1) * PAGE_SIZE;
         const pageRows = _allRows.slice(start, start + PAGE_SIZE);
         let html = `
           <table>
@@ -563,33 +772,36 @@
             </thead>
             <tbody>
         `;
-        pageRows.forEach(r => {
+        pageRows.forEach((r) => {
           html += `<tr>
             <td class="text-center">${r.tx_date}</td>
             <td class="text-left">${esc(r.description)}</td>
-            <td class="text-right debit-cell">${r.debit  ? fmt(r.debit)  : ''}</td>
-            <td class="text-right credit-cell">${r.credit ? fmt(r.credit) : ''}</td>
-            <td class="text-right">${r.balance != null ? fmt(r.balance) : ''}</td>
-            <td class="text-left">${esc(r.memo || '')}</td>
-            <td class="text-center no-print">${esc(r.bank_name || '')}</td>
+            <td class="text-right debit-cell">${r.debit ? fmt(r.debit) : ""}</td>
+            <td class="text-right credit-cell">${r.credit ? fmt(r.credit) : ""}</td>
+            <td class="text-right">${r.balance != null ? fmt(r.balance) : ""}</td>
+            <td class="text-left">${esc(r.memo || "")}</td>
+            <td class="text-center no-print">${esc(r.bank_name || "")}</td>
           </tr>`;
         });
-        html += '</tbody></table>';
+        html += "</tbody></table>";
         wrap.innerHTML = html;
         renderPagination(_allRows.length);
       }
 
       function renderPagination(total) {
-        const bar = document.getElementById('paginationBar');
+        const bar = document.getElementById("paginationBar");
         if (!bar) return;
         const totalPages = Math.ceil(total / PAGE_SIZE);
-        if (totalPages <= 1) { bar.innerHTML = ''; return; }
+        if (totalPages <= 1) {
+          bar.innerHTML = "";
+          return;
+        }
         const start = (_currentPage - 1) * PAGE_SIZE + 1;
-        const end   = Math.min(_currentPage * PAGE_SIZE, total);
+        const end = Math.min(_currentPage * PAGE_SIZE, total);
         bar.innerHTML = `
-          <button class="btn btn-page" onclick="changePage(${_currentPage - 1})" ${_currentPage <= 1 ? 'disabled' : ''}>◀ 前へ</button>
+          <button class="btn btn-page" onclick="changePage(${_currentPage - 1})" ${_currentPage <= 1 ? "disabled" : ""}>◀ 前へ</button>
           <span class="page-info">${_currentPage} / ${totalPages} ページ（${start}〜${end}件 / 全${total}件）</span>
-          <button class="btn btn-page" onclick="changePage(${_currentPage + 1})" ${_currentPage >= totalPages ? 'disabled' : ''}>次へ ▶</button>
+          <button class="btn btn-page" onclick="changePage(${_currentPage + 1})" ${_currentPage >= totalPages ? "disabled" : ""}>次へ ▶</button>
         `;
       }
 
@@ -604,32 +816,34 @@
       // ── CSV取込モーダル ──────────────────────────────────────
       function openImportModal() {
         backToStep1();
-        document.getElementById('importModal').classList.add('active');
+        document.getElementById("importModal").classList.add("active");
       }
       function closeImportModal() {
-        document.getElementById('importModal').classList.remove('active');
+        document.getElementById("importModal").classList.remove("active");
       }
       function backToStep1() {
-        document.getElementById('step1').style.display = '';
-        document.getElementById('step2').style.display = 'none';
-        document.getElementById('step3').style.display = 'none';
-        document.getElementById('csvFile').value = '';
-        hideMsg('step1msg');
-        hideMsg('step2msg');
+        document.getElementById("step1").style.display = "";
+        document.getElementById("step2").style.display = "none";
+        document.getElementById("step3").style.display = "none";
+        document.getElementById("csvFile").value = "";
+        hideMsg("step1msg");
+        hideMsg("step2msg");
         _previewRows = [];
       }
 
       // ドラッグ＆ドロップ初期化
       function initDropZone() {
-        const zone = document.getElementById('dropZone');
-        zone.addEventListener('dragover', e => {
+        const zone = document.getElementById("dropZone");
+        zone.addEventListener("dragover", (e) => {
           e.preventDefault();
-          zone.classList.add('dragover');
+          zone.classList.add("dragover");
         });
-        zone.addEventListener('dragleave', () => zone.classList.remove('dragover'));
-        zone.addEventListener('drop', e => {
+        zone.addEventListener("dragleave", () =>
+          zone.classList.remove("dragover"),
+        );
+        zone.addEventListener("drop", (e) => {
           e.preventDefault();
-          zone.classList.remove('dragover');
+          zone.classList.remove("dragover");
           const f = e.dataTransfer.files[0];
           if (f) uploadAndPreview(f);
         });
@@ -641,111 +855,121 @@
 
       async function uploadAndPreview(file) {
         if (!file.name.match(/\.(csv|txt)$/i)) {
-          showMsg('step1msg', 'CSVファイルを選択してください（.csv または .txt）', 'error');
+          showMsg(
+            "step1msg",
+            "CSVファイルを選択してください（.csv または .txt）",
+            "error",
+          );
           return;
         }
-        showMsg('step1msg', '解析中...', 'info');
+        showMsg("step1msg", "解析中...", "info");
 
         const fd = new FormData();
-        fd.append('file', file);
-        fd.append('bank_name', document.getElementById('bankNameInput').value);
+        fd.append("file", file);
+        fd.append("bank_name", document.getElementById("bankNameInput").value);
 
         try {
-          const res  = await fetch('/bank-statements/preview', { method: 'POST', body: fd });
+          const res = await fetch("/bank-statements/preview", {
+            method: "POST",
+            body: fd,
+          });
           const data = await res.json();
           if (!res.ok) {
-            showMsg('step1msg', data.detail || 'エラーが発生しました', 'error');
+            showMsg("step1msg", data.detail || "エラーが発生しました", "error");
             return;
           }
-          hideMsg('step1msg');
+          hideMsg("step1msg");
           _previewRows = data.rows;
           // 銀行名: 入力欄が空でAPIがヒントを返した場合は自動セット
-          if (data.bank_name && !document.getElementById('bankNameInput').value.trim()) {
-            document.getElementById('bankNameInput').value = data.bank_name;
+          if (
+            data.bank_name &&
+            !document.getElementById("bankNameInput").value.trim()
+          ) {
+            document.getElementById("bankNameInput").value = data.bank_name;
           }
-          _bankName = document.getElementById('bankNameInput').value;
+          _bankName = document.getElementById("bankNameInput").value;
           renderPreview(data);
-          document.getElementById('step1').style.display = 'none';
-          document.getElementById('step2').style.display = '';
+          document.getElementById("step1").style.display = "none";
+          document.getElementById("step2").style.display = "";
         } catch (e) {
-          showMsg('step1msg', 'アップロードエラー: ' + e.message, 'error');
+          showMsg("step1msg", "アップロードエラー: " + e.message, "error");
         }
       }
 
       function renderPreview(data) {
         // サマリー
-        document.getElementById('previewSummary').innerHTML = `
+        document.getElementById("previewSummary").innerHTML = `
           <div class="ps-item ps-total">合計: ${data.total} 件</div>
           <div class="ps-item ps-new">🆕 新規: ${data.new} 件（取込対象）</div>
           <div class="ps-item ps-dup">⚠️ 重複: ${data.duplicates} 件（スキップ）</div>
         `;
 
         // 取込ボタンの状態
-        const btn = document.getElementById('importConfirmBtn');
+        const btn = document.getElementById("importConfirmBtn");
         if (data.new === 0) {
           btn.disabled = true;
-          btn.textContent = '新規データなし（取込不要）';
-          btn.style.opacity = '0.5';
+          btn.textContent = "新規データなし（取込不要）";
+          btn.style.opacity = "0.5";
         } else {
           btn.disabled = false;
           btn.textContent = `新規 ${data.new} 件を取込む`;
-          btn.style.opacity = '1';
+          btn.style.opacity = "1";
         }
 
         // プレビューテーブル
-        const tbody = document.getElementById('previewBody');
-        tbody.innerHTML = '';
-        data.rows.forEach(r => {
-          const tr = document.createElement('tr');
-          tr.className = r.status === 'new' ? 'row-new' : 'row-dup';
+        const tbody = document.getElementById("previewBody");
+        tbody.innerHTML = "";
+        data.rows.forEach((r) => {
+          const tr = document.createElement("tr");
+          tr.className = r.status === "new" ? "row-new" : "row-dup";
           tr.innerHTML = `
             <td class="text-center">
-              <span class="badge badge-${r.status === 'new' ? 'new' : 'dup'}">
-                ${r.status === 'new' ? '新規' : '重複'}
+              <span class="badge badge-${r.status === "new" ? "new" : "dup"}">
+                ${r.status === "new" ? "新規" : "重複"}
               </span>
             </td>
             <td>${r.tx_date}</td>
             <td>${esc(r.description)}</td>
-            <td class="text-right">${r.debit  ? fmt(r.debit)  : ''}</td>
-            <td class="text-right">${r.credit ? fmt(r.credit) : ''}</td>
-            <td class="text-right">${r.balance != null ? fmt(r.balance) : ''}</td>
-            <td>${esc(r.memo || '')}</td>
+            <td class="text-right">${r.debit ? fmt(r.debit) : ""}</td>
+            <td class="text-right">${r.credit ? fmt(r.credit) : ""}</td>
+            <td class="text-right">${r.balance != null ? fmt(r.balance) : ""}</td>
+            <td>${esc(r.memo || "")}</td>
           `;
           tbody.appendChild(tr);
         });
       }
 
       async function confirmImport() {
-        const newRows = _previewRows.filter(r => r.status === 'new');
+        const newRows = _previewRows.filter((r) => r.status === "new");
         if (!newRows.length) return;
 
-        const btn = document.getElementById('importConfirmBtn');
+        const btn = document.getElementById("importConfirmBtn");
         btn.disabled = true;
-        btn.textContent = '取込中...';
-        hideMsg('step2msg');
+        btn.textContent = "取込中...";
+        hideMsg("step2msg");
 
         try {
-          const res  = await fetch('/bank-statements/import', {
-            method:  'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body:    JSON.stringify({ bank_name: _bankName, rows: newRows }),
+          const res = await fetch("/bank-statements/import", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ bank_name: _bankName, rows: newRows }),
           });
           const data = await res.json();
           if (!res.ok) {
-            showMsg('step2msg', data.detail || '取込エラー', 'error');
+            showMsg("step2msg", data.detail || "取込エラー", "error");
             btn.disabled = false;
             btn.textContent = `新規 ${newRows.length} 件を取込む`;
             return;
           }
           // 完了画面
-          document.getElementById('step2').style.display = 'none';
-          document.getElementById('step3').style.display = '';
-          document.getElementById('step3msg').textContent =
+          document.getElementById("step2").style.display = "none";
+          document.getElementById("step3").style.display = "";
+          document.getElementById("step3msg").textContent =
             `✅ 取込完了：${data.inserted} 件を登録しました` +
-            (data.skipped ? `（${data.skipped} 件スキップ）` : '');
+            (data.skipped ? `（${data.skipped} 件スキップ）` : "");
           loadBanks();
         } catch (e) {
-          showMsg('step2msg', '通信エラー: ' + e.message, 'error');
+          showMsg("step2msg", "通信エラー: " + e.message, "error");
           btn.disabled = false;
           btn.textContent = `新規 ${newRows.length} 件を取込む`;
         }
@@ -753,15 +977,15 @@
 
       // ── ユーティリティ ──────────────────────────────────────
       function fmt(v) {
-        if (v == null || v === '') return '';
-        return Number(v).toLocaleString('ja-JP');
+        if (v == null || v === "") return "";
+        return Number(v).toLocaleString("ja-JP");
       }
       function esc(s) {
         return String(s)
-          .replace(/&/g, '&amp;')
-          .replace(/</g, '&lt;')
-          .replace(/>/g, '&gt;')
-          .replace(/"/g, '&quot;');
+          .replace(/&/g, "&amp;")
+          .replace(/</g, "&lt;")
+          .replace(/>/g, "&gt;")
+          .replace(/"/g, "&quot;");
       }
     </script>
   </body>
diff --git a/frontend/egov.html b/frontend/egov.html
index 5878da5..7bf36cf 100644
--- a/frontend/egov.html
+++ b/frontend/egov.html
@@ -284,7 +284,20 @@
   <body>
     <header>
       <h1>🏛 e-Gov 電子送達</h1>
-      <a class="back-link" href="index.html" style="display:inline-block;padding:6px 16px;background:#757575;color:#fff;border-radius:4px;text-decoration:none;font-size:14px;">← メニューへ戻る</a>
+      <a
+        class="back-link"
+        href="index.html"
+        style="
+          display: inline-block;
+          padding: 6px 16px;
+          background: #757575;
+          color: #fff;
+          border-radius: 4px;
+          text-decoration: none;
+          font-size: 14px;
+        "
+        >← メニューへ戻る</a
+      >
     </header>
 
     <!-- ログインカード -->
diff --git a/frontend/index.html b/frontend/index.html
index 441d1a7..daea9ec 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -3,7 +3,10 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
+    <meta
+      http-equiv="Cache-Control"
+      content="no-cache, no-store, must-revalidate"
+    />
     <meta http-equiv="Pragma" content="no-cache" />
     <title>NJTS 会計システム - メイン</title>
     <link rel="stylesheet" href="css/style.css" />
@@ -92,41 +95,94 @@
         cursor: pointer;
         font-size: 13px;
       }
-      .change-pw-btn:hover { background: #545b62; }
+      .change-pw-btn:hover {
+        background: #545b62;
+      }
       /* パスワード変更モーダル */
       .modal-overlay {
         display: none;
         position: fixed;
         inset: 0;
-        background: rgba(0,0,0,0.5);
+        background: rgba(0, 0, 0, 0.5);
         z-index: 1000;
         justify-content: center;
         align-items: center;
       }
-      .modal-overlay.active { display: flex; }
+      .modal-overlay.active {
+        display: flex;
+      }
       .modal-box {
         background: white;
         border-radius: 10px;
         padding: 32px;
         width: 360px;
-        box-shadow: 0 10px 30px rgba(0,0,0,0.3);
+        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+      }
+      .modal-box h3 {
+        margin: 0 0 20px;
+      }
+      .modal-box .form-group {
+        margin-bottom: 14px;
+      }
+      .modal-box label {
+        display: block;
+        margin-bottom: 5px;
+        font-size: 13px;
+        font-weight: 600;
+        color: #333;
       }
-      .modal-box h3 { margin: 0 0 20px; }
-      .modal-box .form-group { margin-bottom: 14px; }
-      .modal-box label { display: block; margin-bottom: 5px; font-size: 13px; font-weight: 600; color: #333; }
       .modal-box input[type="password"] {
-        width: 100%; padding: 10px; border: 1px solid #ddd;
-        border-radius: 5px; font-size: 14px; box-sizing: border-box;
+        width: 100%;
+        padding: 10px;
+        border: 1px solid #ddd;
+        border-radius: 5px;
+        font-size: 14px;
+        box-sizing: border-box;
+      }
+      .modal-box .btn-row {
+        display: flex;
+        gap: 10px;
+        margin-top: 20px;
+      }
+      .modal-box .btn-row button {
+        flex: 1;
+        padding: 10px;
+        border: none;
+        border-radius: 5px;
+        cursor: pointer;
+        font-size: 14px;
+      }
+      .modal-box .btn-submit {
+        background: #007bff;
+        color: white;
+      }
+      .modal-box .btn-submit:hover {
+        background: #0056b3;
+      }
+      .modal-box .btn-cancel {
+        background: #e9ecef;
+        color: #333;
+      }
+      .modal-box .btn-cancel:hover {
+        background: #d0d5db;
+      }
+      .modal-msg {
+        padding: 8px 12px;
+        border-radius: 4px;
+        margin-bottom: 12px;
+        display: none;
+        font-size: 13px;
+      }
+      .modal-msg.error {
+        background: #fee;
+        color: #c33;
+        border: 1px solid #fcc;
+      }
+      .modal-msg.success {
+        background: #efe;
+        color: #3a3;
+        border: 1px solid #cfc;
       }
-      .modal-box .btn-row { display: flex; gap: 10px; margin-top: 20px; }
-      .modal-box .btn-row button { flex: 1; padding: 10px; border: none; border-radius: 5px; cursor: pointer; font-size: 14px; }
-      .modal-box .btn-submit { background: #007bff; color: white; }
-      .modal-box .btn-submit:hover { background: #0056b3; }
-      .modal-box .btn-cancel { background: #e9ecef; color: #333; }
-      .modal-box .btn-cancel:hover { background: #d0d5db; }
-      .modal-msg { padding: 8px 12px; border-radius: 4px; margin-bottom: 12px; display: none; font-size: 13px; }
-      .modal-msg.error { background: #fee; color: #c33; border: 1px solid #fcc; }
-      .modal-msg.success { background: #efe; color: #3a3; border: 1px solid #cfc; }
     </style>
   </head>
   <body>
@@ -134,7 +190,9 @@
       <h1>NJTS</h1>
       <div class="user-info">
         <span>ユーザー: <strong id="username">読み込み中...</strong></span>
-        <button class="change-pw-btn" onclick="openChangePw()">パスワード変更</button>
+        <button class="change-pw-btn" onclick="openChangePw()">
+          パスワード変更
+        </button>
         <button class="logout-btn" onclick="logout()">ログアウト</button>
       </div>
     </header>
@@ -146,7 +204,11 @@
         <div class="modal-msg" id="changePwMsg"></div>
         <div class="form-group">
           <label>現在のパスワード</label>
-          <input type="password" id="cpCurrent" placeholder="現在のパスワード" />
+          <input
+            type="password"
+            id="cpCurrent"
+            placeholder="現在のパスワード"
+          />
         </div>
         <div class="form-group">
           <label>新しいパスワード（8文字以上）</label>
@@ -157,8 +219,12 @@
           <input type="password" id="cpConfirm" placeholder="もう一度入力" />
         </div>
         <div class="btn-row">
-          <button class="btn-submit" onclick="submitChangePw()">変更する</button>
-          <button class="btn-cancel" onclick="closeChangePw()">キャンセル</button>
+          <button class="btn-submit" onclick="submitChangePw()">
+            変更する
+          </button>
+          <button class="btn-cancel" onclick="closeChangePw()">
+            キャンセル
+          </button>
         </div>
       </div>
     </div>
@@ -198,7 +264,9 @@
           銀行のCSVデータを取込み、明細を管理します。重複チェック付きで安全に取込め、月別・銀行別の検索・印刷が可能です。
         </p>
         <p>
-          <a class="btn" href="bank-statement.html" style="background: #1565c0">銀行明細を開く</a>
+          <a class="btn" href="bank-statement.html" style="background: #1565c0"
+            >銀行明細を開く</a
+          >
         </p>
       </section>
 
@@ -245,28 +313,40 @@
       }
       async function submitChangePw() {
         const current = document.getElementById("cpCurrent").value;
-        const newPw   = document.getElementById("cpNew").value;
+        const newPw = document.getElementById("cpNew").value;
         const confirm = document.getElementById("cpConfirm").value;
-        const user    = getCurrentUser();
+        const user = getCurrentUser();
         if (!current || !newPw || !confirm) {
-          showChangePwMsg("すべての項目を入力してください", true); return;
+          showChangePwMsg("すべての項目を入力してください", true);
+          return;
         }
         if (newPw.length < 8) {
-          showChangePwMsg("新しいパスワードは8文字以上にしてください", true); return;
+          showChangePwMsg("新しいパスワードは8文字以上にしてください", true);
+          return;
         }
         if (newPw !== confirm) {
-          showChangePwMsg("新しいパスワードが一致しません", true); return;
+          showChangePwMsg("新しいパスワードが一致しません", true);
+          return;
         }
         try {
           const res = await fetch("/api/users/change-password", {
             method: "POST",
             headers: { "Content-Type": "application/json" },
-            body: JSON.stringify({ username: user.username, current_password: current, new_password: newPw })
+            body: JSON.stringify({
+              username: user.username,
+              current_password: current,
+              new_password: newPw,
+            }),
           });
           const data = await res.json();
           if (res.ok) {
-            showChangePwMsg("パスワードを変更しました。再ログインしてください", false);
-            setTimeout(() => { logout(); }, 2000);
+            showChangePwMsg(
+              "パスワードを変更しました。再ログインしてください",
+              false,
+            );
+            setTimeout(() => {
+              logout();
+            }, 2000);
           } else {
             showChangePwMsg(data.detail || "変更に失敗しました", true);
           }
@@ -274,7 +354,6 @@
           showChangePwMsg("エラー: " + e.message, true);
         }
       }
-
     </script>
   </body>
 </html>
diff --git a/frontend/journal-entry.html b/frontend/journal-entry.html
index 8d2f533..23ff8a7 100644
--- a/frontend/journal-entry.html
+++ b/frontend/journal-entry.html
@@ -257,7 +257,20 @@
     </style>
   </head>
   <body>
-    <a href="index.html" style="display:inline-block;margin:0 0 20px 0;padding:6px 16px;background:#757575;color:#fff;border-radius:4px;text-decoration:none;font-size:14px;">← メニューへ戻る</a>
+    <a
+      href="index.html"
+      style="
+        display: inline-block;
+        margin: 0 0 20px 0;
+        padding: 6px 16px;
+        background: #757575;
+        color: #fff;
+        border-radius: 4px;
+        text-decoration: none;
+        font-size: 14px;
+      "
+      >← メニューへ戻る</a
+    >
     <h2>仕訳入力</h2>
 
     <div class="row" style="margin-bottom: 12px">
diff --git a/frontend/opening_balance.html b/frontend/opening_balance.html
index dd1753d..a4ac0c6 100644
--- a/frontend/opening_balance.html
+++ b/frontend/opening_balance.html
@@ -56,7 +56,20 @@
     >
       保存
     </button>
-    <a href="index.html" style="display:inline-block;margin:0 0 20px 0;padding:6px 16px;background:#757575;color:#fff;border-radius:4px;text-decoration:none;font-size:14px;">← メニューへ戻る</a>
+    <a
+      href="index.html"
+      style="
+        display: inline-block;
+        margin: 0 0 20px 0;
+        padding: 6px 16px;
+        background: #757575;
+        color: #fff;
+        border-radius: 4px;
+        text-decoration: none;
+        font-size: 14px;
+      "
+      >← メニューへ戻る</a
+    >
 
     <script src="js/api.js"></script>
     <script src="js/opening_balance.js"></script>
diff --git a/frontend/payroll.html b/frontend/payroll.html
index f6c4d0a..ce662e4 100644
--- a/frontend/payroll.html
+++ b/frontend/payroll.html
@@ -56,7 +56,19 @@
   </head>
   <body>
     <div class="container">
-      <a href="index.html" style="display:inline-block;padding:6px 16px;background:#757575;color:#fff;border-radius:4px;text-decoration:none;font-size:14px;">← メニューへ戻る</a>
+      <a
+        href="index.html"
+        style="
+          display: inline-block;
+          padding: 6px 16px;
+          background: #757575;
+          color: #fff;
+          border-radius: 4px;
+          text-decoration: none;
+          font-size: 14px;
+        "
+        >← メニューへ戻る</a
+      >
 
       <h1>給与管理システム</h1>
       <p>従業員の給与計算、扶養管理、保険料・税金の管理を行います</p>
diff --git a/frontend/trial-balance.html b/frontend/trial-balance.html
index f18b6b0..e814ba2 100644
--- a/frontend/trial-balance.html
+++ b/frontend/trial-balance.html
@@ -267,7 +267,20 @@
     </style>
   </head>
   <body>
-    <a href="index.html" style="display:inline-block;margin:0 0 20px 0;padding:6px 16px;background:#757575;color:#fff;border-radius:4px;text-decoration:none;font-size:14px;">← メニューへ戻る</a>
+    <a
+      href="index.html"
+      style="
+        display: inline-block;
+        margin: 0 0 20px 0;
+        padding: 6px 16px;
+        background: #757575;
+        color: #fff;
+        border-radius: 4px;
+        text-decoration: none;
+        font-size: 14px;
+      "
+      >← メニューへ戻る</a
+    >
 
     <h2>残高試算表（貸借・損益）</h2>