diff --git a/frontend/css/mobile.css b/frontend/css/mobile.css
index f799f58..3c2deb7 100644
--- a/frontend/css/mobile.css
+++ b/frontend/css/mobile.css
@@ -10,7 +10,6 @@ html {
 }
 
 @media screen and (max-width: 767px) {
-
   /* ── body 余白を縮小 ── */
   body {
     padding: 12px !important;
@@ -18,8 +17,12 @@ html {
   }
 
   /* ── h1・h2 フォントサイズ ── */
-  h1 { font-size: 1.35rem !important; }
-  h2 { font-size: 1.1rem  !important; }
+  h1 {
+    font-size: 1.35rem !important;
+  }
+  h2 {
+    font-size: 1.1rem !important;
+  }
 
   /* ================================================================
      テーブル: 横スクロール
@@ -320,5 +323,4 @@ html {
     width: 100% !important;
     box-sizing: border-box !important;
   }
-
 }
diff --git a/frontend/journal-entry.html b/frontend/journal-entry.html
index 70f4718..7b3921a 100644
--- a/frontend/journal-entry.html
+++ b/frontend/journal-entry.html
@@ -863,7 +863,19 @@
       <div class="search-buttons">
         <button onclick="searchJournals()">🔍 検索</button>
         <button onclick="printSearchResults()">🖨️ 印刷</button>
-        <button onclick="clearSearchConditions()" style="background: #6c757d; color: white; border: none; padding: 6px 14px; border-radius: 4px; cursor: pointer;">🔄 条件クリア</button>
+        <button
+          onclick="clearSearchConditions()"
+          style="
+            background: #6c757d;
+            color: white;
+            border: none;
+            padding: 6px 14px;
+            border-radius: 4px;
+            cursor: pointer;
+          "
+        >
+          🔄 条件クリア
+        </button>
       </div>
     </div>
 
@@ -2830,7 +2842,8 @@
       // 複数行フォームへのコピー
       function copyJournalToDetailForm(data) {
         document.getElementById("detailEntryDate").value = data.entry_date;
-        document.getElementById("detailDescription").value = data.description || "";
+        document.getElementById("detailDescription").value =
+          data.description || "";
 
         // 既存行をクリア
         document.getElementById("detailLinesTbody").innerHTML = "";
@@ -2846,10 +2859,14 @@
             accountInput.dataset.accountId = acc.account_id;
           }
           if (Number(line.debit) > 0) {
-            tr.querySelector(".detail-debit").value = Number(line.debit).toLocaleString();
+            tr.querySelector(".detail-debit").value = Number(
+              line.debit,
+            ).toLocaleString();
           }
           if (Number(line.credit) > 0) {
-            tr.querySelector(".detail-credit").value = Number(line.credit).toLocaleString();
+            tr.querySelector(".detail-credit").value = Number(
+              line.credit,
+            ).toLocaleString();
           }
           if (line.line_description) {
             tr.querySelector(".detail-line-memo").value = line.line_description;
@@ -2879,58 +2896,121 @@
 
         // 新UIでは簡易的にフォームに反映（最初の借方行の科目 + 最初の貸方行を取引手段に設定）
         if (data.lines && data.lines.length > 0) {
-            // 借方と貸方を分類
-            const debitLines = data.lines.filter((l) => Number(l.debit) > 0);
-            const creditLines = data.lines.filter((l) => Number(l.credit) > 0);
+          // 借方と貸方を分類
+          const debitLines = data.lines.filter((l) => Number(l.debit) > 0);
+          const creditLines = data.lines.filter((l) => Number(l.credit) > 0);
 
-            // 仮払/仮受消費税行を除外して主要な科目を特定
-            const mainDebit = debitLines.find((l) => {
-              const acc = accounts.find((a) => a.account_id === l.account_id);
-              return (
-                acc &&
-                !acc.account_name.includes("仮払消費税") &&
-                !acc.account_name.includes("仮受消費税")
+          // 仮払/仮受消費税行を除外して主要な科目を特定
+          const mainDebit = debitLines.find((l) => {
+            const acc = accounts.find((a) => a.account_id === l.account_id);
+            return (
+              acc &&
+              !acc.account_name.includes("仮払消費税") &&
+              !acc.account_name.includes("仮受消費税")
+            );
+          });
+          const mainCredit = creditLines.find((l) => {
+            const acc = accounts.find((a) => a.account_id === l.account_id);
+            return (
+              acc &&
+              !acc.account_name.includes("仮払消費税") &&
+              !acc.account_name.includes("仮受消費税")
+            );
+          });
+
+          // 税額行を検出
+          const taxDebitLine = debitLines.find((l) => {
+            const acc = accounts.find((a) => a.account_id === l.account_id);
+            return acc && acc.account_name.includes("仮払消費税");
+          });
+          const taxCreditLine = creditLines.find((l) => {
+            const acc = accounts.find((a) => a.account_id === l.account_id);
+            return acc && acc.account_name.includes("仮受消費税");
+          });
+
+          if (mainDebit && mainCredit) {
+            // 支出パターン: 借方=科目, 貸方=取引手段
+            if (taxDebitLine) {
+              // 支出（仮払消費税あり）
+              document.querySelector(
+                'input[name="entryType"][value="expense"]',
+              ).checked = true;
+              const kamokuAcc = accounts.find(
+                (a) => a.account_id === mainDebit.account_id,
               );
-            });
-            const mainCredit = creditLines.find((l) => {
-              const acc = accounts.find((a) => a.account_id === l.account_id);
-              return (
-                acc &&
-                !acc.account_name.includes("仮払消費税") &&
-                !acc.account_name.includes("仮受消費税")
+              const methodAcc = accounts.find(
+                (a) => a.account_id === mainCredit.account_id,
               );
-            });
-
-            // 税額行を検出
-            const taxDebitLine = debitLines.find((l) => {
-              const acc = accounts.find((a) => a.account_id === l.account_id);
-              return acc && acc.account_name.includes("仮払消費税");
-            });
-            const taxCreditLine = creditLines.find((l) => {
-              const acc = accounts.find((a) => a.account_id === l.account_id);
-              return acc && acc.account_name.includes("仮受消費税");
-            });
-
-            if (mainDebit && mainCredit) {
-              // 支出パターン: 借方=科目, 貸方=取引手段
-              if (taxDebitLine) {
-                // 支出（仮払消費税あり）
+              if (kamokuAcc) {
+                document.getElementById("entryAccountInput").value =
+                  `${kamokuAcc.account_code} ${kamokuAcc.account_name}`;
+                document.getElementById("entryAccountInput").dataset.accountId =
+                  kamokuAcc.account_id;
+              }
+              if (methodAcc) {
+                document.getElementById("entryMethodInput").value =
+                  `${methodAcc.account_code} ${methodAcc.account_name}`;
+                document.getElementById("entryMethodInput").dataset.accountId =
+                  methodAcc.account_id;
+              }
+              const totalAmount = Number(mainCredit.credit);
+              document.getElementById("entryAmount").value =
+                totalAmount.toLocaleString();
+              document.getElementById("entryTaxAmount").value = Number(
+                taxDebitLine.debit,
+              ).toLocaleString();
+            } else if (taxCreditLine) {
+              // 収入（仮受消費税あり）
+              document.querySelector(
+                'input[name="entryType"][value="income"]',
+              ).checked = true;
+              const kamokuAcc = accounts.find(
+                (a) => a.account_id === mainCredit.account_id,
+              );
+              const methodAcc = accounts.find(
+                (a) => a.account_id === mainDebit.account_id,
+              );
+              if (kamokuAcc) {
+                document.getElementById("entryAccountInput").value =
+                  `${kamokuAcc.account_code} ${kamokuAcc.account_name}`;
+                document.getElementById("entryAccountInput").dataset.accountId =
+                  kamokuAcc.account_id;
+              }
+              if (methodAcc) {
+                document.getElementById("entryMethodInput").value =
+                  `${methodAcc.account_code} ${methodAcc.account_name}`;
+                document.getElementById("entryMethodInput").dataset.accountId =
+                  methodAcc.account_id;
+              }
+              const totalAmount = Number(mainDebit.debit);
+              document.getElementById("entryAmount").value =
+                totalAmount.toLocaleString();
+              document.getElementById("entryTaxAmount").value = Number(
+                taxCreditLine.credit,
+              ).toLocaleString();
+            } else {
+              // 消費税なし - 借方科目が費用/資産 → 支出、それ以外は収入
+              const kamokuAccD = accounts.find(
+                (a) => a.account_id === mainDebit.account_id,
+              );
+              const isExpense =
+                kamokuAccD &&
+                (kamokuAccD.account_code.startsWith("8") ||
+                  kamokuAccD.account_code.startsWith("1") ||
+                  kamokuAccD.account_code.startsWith("2") ||
+                  kamokuAccD.account_code.startsWith("3") ||
+                  kamokuAccD.account_code.startsWith("4"));
+              if (isExpense) {
                 document.querySelector(
                   'input[name="entryType"][value="expense"]',
                 ).checked = true;
-                const kamokuAcc = accounts.find(
-                  (a) => a.account_id === mainDebit.account_id,
-                );
+                document.getElementById("entryAccountInput").value =
+                  `${kamokuAccD.account_code} ${kamokuAccD.account_name}`;
+                document.getElementById("entryAccountInput").dataset.accountId =
+                  kamokuAccD.account_id;
                 const methodAcc = accounts.find(
                   (a) => a.account_id === mainCredit.account_id,
                 );
-                if (kamokuAcc) {
-                  document.getElementById("entryAccountInput").value =
-                    `${kamokuAcc.account_code} ${kamokuAcc.account_name}`;
-                  document.getElementById(
-                    "entryAccountInput",
-                  ).dataset.accountId = kamokuAcc.account_id;
-                }
                 if (methodAcc) {
                   document.getElementById("entryMethodInput").value =
                     `${methodAcc.account_code} ${methodAcc.account_name}`;
@@ -2938,116 +3018,47 @@
                     "entryMethodInput",
                   ).dataset.accountId = methodAcc.account_id;
                 }
-                const totalAmount = Number(mainCredit.credit);
-                document.getElementById("entryAmount").value =
-                  totalAmount.toLocaleString();
-                document.getElementById("entryTaxAmount").value = Number(
-                  taxDebitLine.debit,
+                document.getElementById("entryAmount").value = Number(
+                  mainDebit.debit,
                 ).toLocaleString();
-              } else if (taxCreditLine) {
-                // 収入（仮受消費税あり）
+              } else {
                 document.querySelector(
                   'input[name="entryType"][value="income"]',
                 ).checked = true;
-                const kamokuAcc = accounts.find(
+                const kamokuAccC = accounts.find(
                   (a) => a.account_id === mainCredit.account_id,
                 );
-                const methodAcc = accounts.find(
-                  (a) => a.account_id === mainDebit.account_id,
-                );
-                if (kamokuAcc) {
+                if (kamokuAccC) {
                   document.getElementById("entryAccountInput").value =
-                    `${kamokuAcc.account_code} ${kamokuAcc.account_name}`;
+                    `${kamokuAccC.account_code} ${kamokuAccC.account_name}`;
                   document.getElementById(
                     "entryAccountInput",
-                  ).dataset.accountId = kamokuAcc.account_id;
+                  ).dataset.accountId = kamokuAccC.account_id;
                 }
-                if (methodAcc) {
-                  document.getElementById("entryMethodInput").value =
-                    `${methodAcc.account_code} ${methodAcc.account_name}`;
-                  document.getElementById(
-                    "entryMethodInput",
-                  ).dataset.accountId = methodAcc.account_id;
-                }
-                const totalAmount = Number(mainDebit.debit);
-                document.getElementById("entryAmount").value =
-                  totalAmount.toLocaleString();
-                document.getElementById("entryTaxAmount").value = Number(
-                  taxCreditLine.credit,
+                document.getElementById("entryMethodInput").value =
+                  `${kamokuAccD.account_code} ${kamokuAccD.account_name}`;
+                document.getElementById("entryMethodInput").dataset.accountId =
+                  kamokuAccD.account_id;
+                document.getElementById("entryAmount").value = Number(
+                  mainDebit.debit,
                 ).toLocaleString();
-              } else {
-                // 消費税なし - 借方科目が費用/資産 → 支出、それ以外は収入
-                const kamokuAccD = accounts.find(
-                  (a) => a.account_id === mainDebit.account_id,
-                );
-                const isExpense =
-                  kamokuAccD &&
-                  (kamokuAccD.account_code.startsWith("8") ||
-                    kamokuAccD.account_code.startsWith("1") ||
-                    kamokuAccD.account_code.startsWith("2") ||
-                    kamokuAccD.account_code.startsWith("3") ||
-                    kamokuAccD.account_code.startsWith("4"));
-                if (isExpense) {
-                  document.querySelector(
-                    'input[name="entryType"][value="expense"]',
-                  ).checked = true;
-                  document.getElementById("entryAccountInput").value =
-                    `${kamokuAccD.account_code} ${kamokuAccD.account_name}`;
-                  document.getElementById(
-                    "entryAccountInput",
-                  ).dataset.accountId = kamokuAccD.account_id;
-                  const methodAcc = accounts.find(
-                    (a) => a.account_id === mainCredit.account_id,
-                  );
-                  if (methodAcc) {
-                    document.getElementById("entryMethodInput").value =
-                      `${methodAcc.account_code} ${methodAcc.account_name}`;
-                    document.getElementById(
-                      "entryMethodInput",
-                    ).dataset.accountId = methodAcc.account_id;
-                  }
-                  document.getElementById("entryAmount").value = Number(
-                    mainDebit.debit,
-                  ).toLocaleString();
-                } else {
-                  document.querySelector(
-                    'input[name="entryType"][value="income"]',
-                  ).checked = true;
-                  const kamokuAccC = accounts.find(
-                    (a) => a.account_id === mainCredit.account_id,
-                  );
-                  if (kamokuAccC) {
-                    document.getElementById("entryAccountInput").value =
-                      `${kamokuAccC.account_code} ${kamokuAccC.account_name}`;
-                    document.getElementById(
-                      "entryAccountInput",
-                    ).dataset.accountId = kamokuAccC.account_id;
-                  }
-                  document.getElementById("entryMethodInput").value =
-                    `${kamokuAccD.account_code} ${kamokuAccD.account_name}`;
-                  document.getElementById(
-                    "entryMethodInput",
-                  ).dataset.accountId = kamokuAccD.account_id;
-                  document.getElementById("entryAmount").value = Number(
-                    mainDebit.debit,
-                  ).toLocaleString();
-                }
-                document.getElementById("entryTaxRate").value = "0";
-                document.getElementById("entryTaxAmount").value = "";
               }
+              document.getElementById("entryTaxRate").value = "0";
+              document.getElementById("entryTaxAmount").value = "";
             }
           }
+        }
 
-          // ページ上部の仕訳入力フォームにスクロール
-          window.scrollTo({ top: 0, behavior: "smooth" });
+        // ページ上部の仕訳入力フォームにスクロール
+        window.scrollTo({ top: 0, behavior: "smooth" });
 
-          const dateInput = document.getElementById("entryDate");
-          dateInput.focus();
+        const dateInput = document.getElementById("entryDate");
+        dateInput.focus();
 
-          showAlert(
-            `仕訳を複製しました。\n\n※ このコピーは新規仕訳として独立した記録になります。\n※ 日付と摘要を必要に応じて修正してから登録してください。`,
-            "success",
-          );
+        showAlert(
+          `仕訳を複製しました。\n\n※ このコピーは新規仕訳として独立した記録になります。\n※ 日付と摘要を必要に応じて修正してから登録してください。`,
+          "success",
+        );
       }
 
       // --------------------------------------------------
diff --git a/frontend/nenkin-portal.html b/frontend/nenkin-portal.html
index 4d0b1bd..b16aa9e 100644
--- a/frontend/nenkin-portal.html
+++ b/frontend/nenkin-portal.html
@@ -1,521 +1,677 @@
 <!doctype html>
 <html lang="ja">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>社会保険電子文書ポータル</title>
-  <script src="js/auth.js"></script>
-  <link rel="stylesheet" href="css/style.css" />
-  <link rel="stylesheet" href="/css/mobile.css" />
-  <style>
-    body {
-      font-family: system-ui, -apple-system, "Yu Gothic UI", "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
-      padding: 24px;
-      background: #f5f7fa;
-    }
-    .page-header {
-      max-width: 1100px;
-      margin: 0 auto 20px;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-    }
-    .page-header h1 { margin: 0; font-size: 20px; }
-    .back-link {
-      padding: 8px 16px;
-      background: #007bff;
-      color: white;
-      border: none;
-      border-radius: 4px;
-      cursor: pointer;
-      font-size: 14px;
-      text-decoration: none;
-    }
-    .back-link:hover { background: #0056b3; }
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>社会保険電子文書ポータル</title>
+    <script src="js/auth.js"></script>
+    <link rel="stylesheet" href="css/style.css" />
+    <link rel="stylesheet" href="/css/mobile.css" />
+    <style>
+      body {
+        font-family:
+          system-ui,
+          -apple-system,
+          "Yu Gothic UI",
+          "Hiragino Kaku Gothic ProN",
+          "メイリオ",
+          sans-serif;
+        padding: 24px;
+        background: #f5f7fa;
+      }
+      .page-header {
+        max-width: 1100px;
+        margin: 0 auto 20px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+      .page-header h1 {
+        margin: 0;
+        font-size: 20px;
+      }
+      .back-link {
+        padding: 8px 16px;
+        background: #007bff;
+        color: white;
+        border: none;
+        border-radius: 4px;
+        cursor: pointer;
+        font-size: 14px;
+        text-decoration: none;
+      }
+      .back-link:hover {
+        background: #0056b3;
+      }
 
-    /* ── アップロードゾーン ── */
-    .upload-zone {
-      max-width: 1100px;
-      margin: 0 auto 24px;
-      border: 2px dashed #adb5bd;
-      border-radius: 10px;
-      padding: 28px 24px;
-      text-align: center;
-      background: #fff;
-      cursor: pointer;
-      transition: border-color 0.2s, background 0.2s;
-    }
-    .upload-zone.dragover {
-      border-color: #007bff;
-      background: #e8f4ff;
-    }
-    .upload-zone h3 { margin: 0 0 8px; font-size: 16px; color: #495057; }
-    .upload-zone p  { margin: 0; color: #6c757d; font-size: 13px; }
-    .upload-zone input[type=file] { display: none; }
-    .upload-btn {
-      display: inline-block;
-      margin-top: 12px;
-      padding: 8px 20px;
-      background: #007bff;
-      color: #fff;
-      border-radius: 5px;
-      font-size: 14px;
-      cursor: pointer;
-      border: none;
-    }
-    .upload-btn:hover { background: #0056b3; }
-    #upload-status {
-      max-width: 1100px;
-      margin: 0 auto 12px;
-      font-size: 14px;
-      min-height: 24px;
-    }
-    .status-ok  { color: #28a745; font-weight: bold; }
-    .status-err { color: #dc3545; font-weight: bold; }
+      /* ── アップロードゾーン ── */
+      .upload-zone {
+        max-width: 1100px;
+        margin: 0 auto 24px;
+        border: 2px dashed #adb5bd;
+        border-radius: 10px;
+        padding: 28px 24px;
+        text-align: center;
+        background: #fff;
+        cursor: pointer;
+        transition:
+          border-color 0.2s,
+          background 0.2s;
+      }
+      .upload-zone.dragover {
+        border-color: #007bff;
+        background: #e8f4ff;
+      }
+      .upload-zone h3 {
+        margin: 0 0 8px;
+        font-size: 16px;
+        color: #495057;
+      }
+      .upload-zone p {
+        margin: 0;
+        color: #6c757d;
+        font-size: 13px;
+      }
+      .upload-zone input[type="file"] {
+        display: none;
+      }
+      .upload-btn {
+        display: inline-block;
+        margin-top: 12px;
+        padding: 8px 20px;
+        background: #007bff;
+        color: #fff;
+        border-radius: 5px;
+        font-size: 14px;
+        cursor: pointer;
+        border: none;
+      }
+      .upload-btn:hover {
+        background: #0056b3;
+      }
+      #upload-status {
+        max-width: 1100px;
+        margin: 0 auto 12px;
+        font-size: 14px;
+        min-height: 24px;
+      }
+      .status-ok {
+        color: #28a745;
+        font-weight: bold;
+      }
+      .status-err {
+        color: #dc3545;
+        font-weight: bold;
+      }
 
-    /* ── フィルターバー ── */
-    .filter-bar {
-      max-width: 1100px;
-      margin: 0 auto 16px;
-      display: flex;
-      gap: 12px;
-      align-items: center;
-      flex-wrap: wrap;
-    }
-    .type-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
-    .type-tab {
-      padding: 5px 14px;
-      border-radius: 20px;
-      border: 1px solid #ced4da;
-      background: #fff;
-      cursor: pointer;
-      font-size: 13px;
-      color: #495057;
-      transition: all 0.15s;
-    }
-    .type-tab:hover { border-color: #007bff; color: #007bff; }
-    .type-tab.active { background: #007bff; color: #fff; border-color: #007bff; }
-    .filter-select {
-      padding: 5px 10px;
-      border: 1px solid #ced4da;
-      border-radius: 5px;
-      font-size: 13px;
-      background: #fff;
-    }
+      /* ── フィルターバー ── */
+      .filter-bar {
+        max-width: 1100px;
+        margin: 0 auto 16px;
+        display: flex;
+        gap: 12px;
+        align-items: center;
+        flex-wrap: wrap;
+      }
+      .type-tabs {
+        display: flex;
+        gap: 6px;
+        flex-wrap: wrap;
+      }
+      .type-tab {
+        padding: 5px 14px;
+        border-radius: 20px;
+        border: 1px solid #ced4da;
+        background: #fff;
+        cursor: pointer;
+        font-size: 13px;
+        color: #495057;
+        transition: all 0.15s;
+      }
+      .type-tab:hover {
+        border-color: #007bff;
+        color: #007bff;
+      }
+      .type-tab.active {
+        background: #007bff;
+        color: #fff;
+        border-color: #007bff;
+      }
+      .filter-select {
+        padding: 5px 10px;
+        border: 1px solid #ced4da;
+        border-radius: 5px;
+        font-size: 13px;
+        background: #fff;
+      }
 
-    /* ── 文書一覧テーブル ── */
-    .doc-table-wrap {
-      max-width: 1100px;
-      margin: 0 auto;
-      background: #fff;
-      border-radius: 8px;
-      box-shadow: 0 1px 4px rgba(0,0,0,0.07);
-      overflow: hidden;
-    }
-    .doc-table {
-      width: 100%;
-      border-collapse: collapse;
-      font-size: 14px;
-    }
-    .doc-table thead th {
-      background: #f8f9fa;
-      padding: 10px 12px;
-      text-align: left;
-      font-weight: 600;
-      border-bottom: 2px solid #dee2e6;
-      white-space: nowrap;
-    }
-    .doc-table tbody tr {
-      border-bottom: 1px solid #f0f0f0;
-      cursor: pointer;
-      transition: background 0.1s;
-    }
-    .doc-table tbody tr:hover { background: #f0f7ff; }
-    .doc-table tbody tr.selected { background: #dbeafe; }
-    .doc-table tbody td { padding: 10px 12px; }
-    .badge {
-      display: inline-block;
-      padding: 2px 8px;
-      border-radius: 10px;
-      font-size: 12px;
-      font-weight: 600;
-    }
-    .badge-shakai  { background: #d1ecf1; color: #0c5460; }
-    .badge-nounyu  { background: #d4edda; color: #155724; }
-    .badge-shoyo   { background: #fff3cd; color: #856404; }
-    .badge-unknown { background: #e2e3e5; color: #383d41; }
-    .no-data { text-align: center; color: #aaa; padding: 40px; }
+      /* ── 文書一覧テーブル ── */
+      .doc-table-wrap {
+        max-width: 1100px;
+        margin: 0 auto;
+        background: #fff;
+        border-radius: 8px;
+        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
+        overflow: hidden;
+      }
+      .doc-table {
+        width: 100%;
+        border-collapse: collapse;
+        font-size: 14px;
+      }
+      .doc-table thead th {
+        background: #f8f9fa;
+        padding: 10px 12px;
+        text-align: left;
+        font-weight: 600;
+        border-bottom: 2px solid #dee2e6;
+        white-space: nowrap;
+      }
+      .doc-table tbody tr {
+        border-bottom: 1px solid #f0f0f0;
+        cursor: pointer;
+        transition: background 0.1s;
+      }
+      .doc-table tbody tr:hover {
+        background: #f0f7ff;
+      }
+      .doc-table tbody tr.selected {
+        background: #dbeafe;
+      }
+      .doc-table tbody td {
+        padding: 10px 12px;
+      }
+      .badge {
+        display: inline-block;
+        padding: 2px 8px;
+        border-radius: 10px;
+        font-size: 12px;
+        font-weight: 600;
+      }
+      .badge-shakai {
+        background: #d1ecf1;
+        color: #0c5460;
+      }
+      .badge-nounyu {
+        background: #d4edda;
+        color: #155724;
+      }
+      .badge-shoyo {
+        background: #fff3cd;
+        color: #856404;
+      }
+      .badge-unknown {
+        background: #e2e3e5;
+        color: #383d41;
+      }
+      .no-data {
+        text-align: center;
+        color: #aaa;
+        padding: 40px;
+      }
 
-    /* ── 詳細パネル ── */
-    #detail-panel {
-      max-width: 1100px;
-      margin: 16px auto 0;
-      background: #fff;
-      border-radius: 8px;
-      box-shadow: 0 1px 4px rgba(0,0,0,0.07);
-      padding: 24px;
-      display: none;
-    }
-    #detail-panel.visible { display: block; }
-    .detail-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: flex-start;
-      margin-bottom: 20px;
-    }
-    .detail-header h2 { margin: 0; font-size: 18px; }
-    .detail-close {
-      background: none;
-      border: 1px solid #ced4da;
-      border-radius: 4px;
-      padding: 4px 10px;
-      cursor: pointer;
-      font-size: 13px;
-      color: #6c757d;
-    }
-    .detail-close:hover { background: #f8f9fa; }
+      /* ── 詳細パネル ── */
+      #detail-panel {
+        max-width: 1100px;
+        margin: 16px auto 0;
+        background: #fff;
+        border-radius: 8px;
+        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
+        padding: 24px;
+        display: none;
+      }
+      #detail-panel.visible {
+        display: block;
+      }
+      .detail-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
+        margin-bottom: 20px;
+      }
+      .detail-header h2 {
+        margin: 0;
+        font-size: 18px;
+      }
+      .detail-close {
+        background: none;
+        border: 1px solid #ced4da;
+        border-radius: 4px;
+        padding: 4px 10px;
+        cursor: pointer;
+        font-size: 13px;
+        color: #6c757d;
+      }
+      .detail-close:hover {
+        background: #f8f9fa;
+      }
 
-    /* 事業所情報カード */
-    .info-cards {
-      display: flex;
-      gap: 12px;
-      flex-wrap: wrap;
-      margin-bottom: 20px;
-    }
-    .info-card {
-      flex: 1;
-      min-width: 180px;
-      background: #f8f9fa;
-      border-radius: 6px;
-      padding: 12px 16px;
-    }
-    .info-card .label { font-size: 11px; color: #6c757d; margin-bottom: 4px; }
-    .info-card .value { font-size: 14px; font-weight: 600; color: #212529; }
+      /* 事業所情報カード */
+      .info-cards {
+        display: flex;
+        gap: 12px;
+        flex-wrap: wrap;
+        margin-bottom: 20px;
+      }
+      .info-card {
+        flex: 1;
+        min-width: 180px;
+        background: #f8f9fa;
+        border-radius: 6px;
+        padding: 12px 16px;
+      }
+      .info-card .label {
+        font-size: 11px;
+        color: #6c757d;
+        margin-bottom: 4px;
+      }
+      .info-card .value {
+        font-size: 14px;
+        font-weight: 600;
+        color: #212529;
+      }
 
-    /* 金額テーブル */
-    .amount-section { margin-bottom: 20px; }
-    .amount-section h3 { font-size: 15px; margin: 0 0 12px; border-left: 3px solid #007bff; padding-left: 8px; }
-    .amount-grid {
-      display: grid;
-      gap: 10px;
-    }
-    .amount-row {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 8px 14px;
-      background: #f8f9fa;
-      border-radius: 5px;
-      font-size: 14px;
-    }
-    .amount-row.total {
-      background: #e8f4ff;
-      font-weight: 700;
-      font-size: 15px;
-    }
-    .amount-row .amt { font-family: monospace; font-size: 15px; }
+      /* 金額テーブル */
+      .amount-section {
+        margin-bottom: 20px;
+      }
+      .amount-section h3 {
+        font-size: 15px;
+        margin: 0 0 12px;
+        border-left: 3px solid #007bff;
+        padding-left: 8px;
+      }
+      .amount-grid {
+        display: grid;
+        gap: 10px;
+      }
+      .amount-row {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 8px 14px;
+        background: #f8f9fa;
+        border-radius: 5px;
+        font-size: 14px;
+      }
+      .amount-row.total {
+        background: #e8f4ff;
+        font-weight: 700;
+        font-size: 15px;
+      }
+      .amount-row .amt {
+        font-family: monospace;
+        font-size: 15px;
+      }
 
-    /* 告知額 vs 領収済額 サイドバイサイド */
-    .nounyu-compare {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: 16px;
-      margin-bottom: 20px;
-    }
-    @media (max-width: 640px) { .nounyu-compare { grid-template-columns: 1fr; } }
-    .nounyu-box {
-      border-radius: 8px;
-      padding: 16px;
-    }
-    .nounyu-box.kokuchi { background: #fff3cd; border: 1px solid #ffc107; }
-    .nounyu-box.ryoshu  { background: #d4edda; border: 1px solid #28a745; }
-    .nounyu-box h4 { margin: 0 0 12px; font-size: 14px; }
+      /* 告知額 vs 領収済額 サイドバイサイド */
+      .nounyu-compare {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 16px;
+        margin-bottom: 20px;
+      }
+      @media (max-width: 640px) {
+        .nounyu-compare {
+          grid-template-columns: 1fr;
+        }
+      }
+      .nounyu-box {
+        border-radius: 8px;
+        padding: 16px;
+      }
+      .nounyu-box.kokuchi {
+        background: #fff3cd;
+        border: 1px solid #ffc107;
+      }
+      .nounyu-box.ryoshu {
+        background: #d4edda;
+        border: 1px solid #28a745;
+      }
+      .nounyu-box h4 {
+        margin: 0 0 12px;
+        font-size: 14px;
+      }
 
-    /* 賞与明細テーブル */
-    .shoyo-table-wrap { overflow-x: auto; }
-    .shoyo-table {
-      width: 100%;
-      border-collapse: collapse;
-      font-size: 13px;
-    }
-    .shoyo-table th {
-      background: #f8f9fa;
-      padding: 8px 10px;
-      text-align: center;
-      border: 1px solid #dee2e6;
-      white-space: nowrap;
-      font-size: 12px;
-    }
-    .shoyo-table td {
-      padding: 7px 10px;
-      border: 1px solid #f0f0f0;
-      text-align: right;
-    }
-    .shoyo-table td.name { text-align: left; font-weight: 600; }
-    .shoyo-table tfoot td {
-      background: #e8f4ff;
-      font-weight: 700;
-      border-top: 2px solid #007bff;
-    }
-    .shoyo-table .empty-cell { color: #ccc; text-align: center; }
-  </style>
-</head>
-<body>
+      /* 賞与明細テーブル */
+      .shoyo-table-wrap {
+        overflow-x: auto;
+      }
+      .shoyo-table {
+        width: 100%;
+        border-collapse: collapse;
+        font-size: 13px;
+      }
+      .shoyo-table th {
+        background: #f8f9fa;
+        padding: 8px 10px;
+        text-align: center;
+        border: 1px solid #dee2e6;
+        white-space: nowrap;
+        font-size: 12px;
+      }
+      .shoyo-table td {
+        padding: 7px 10px;
+        border: 1px solid #f0f0f0;
+        text-align: right;
+      }
+      .shoyo-table td.name {
+        text-align: left;
+        font-weight: 600;
+      }
+      .shoyo-table tfoot td {
+        background: #e8f4ff;
+        font-weight: 700;
+        border-top: 2px solid #007bff;
+      }
+      .shoyo-table .empty-cell {
+        color: #ccc;
+        text-align: center;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="page-header">
+      <h1>社会保険電子文書ポータル</h1>
+      <a class="back-link" href="payroll.html">← 給与管理メニューに戻る</a>
+    </div>
 
-<div class="page-header">
-  <h1>社会保険電子文書ポータル</h1>
-  <a class="back-link" href="payroll.html">← 給与管理メニューに戻る</a>
-</div>
+    <!-- アップロードゾーン -->
+    <div class="upload-zone" id="upload-zone">
+      <h3>📥 社会保険 ZIP ファイルをここにドロップ</h3>
+      <p>またはボタンから選択してください（複数ファイル対応）</p>
+      <input type="file" id="zip-input" accept=".zip" multiple />
+      <br />
+      <button
+        class="upload-btn"
+        onclick="document.getElementById('zip-input').click()"
+      >
+        ファイルを選択
+      </button>
+    </div>
+    <div id="upload-status"></div>
 
-<!-- アップロードゾーン -->
-<div class="upload-zone" id="upload-zone">
-  <h3>📥 社会保険 ZIP ファイルをここにドロップ</h3>
-  <p>またはボタンから選択してください（複数ファイル対応）</p>
-  <input type="file" id="zip-input" accept=".zip" multiple />
-  <br>
-  <button class="upload-btn" onclick="document.getElementById('zip-input').click()">
-    ファイルを選択
-  </button>
-</div>
-<div id="upload-status"></div>
+    <!-- フィルターバー -->
+    <div class="filter-bar">
+      <div class="type-tabs" id="type-tabs">
+        <button class="type-tab active" data-type="">すべて</button>
+        <button class="type-tab" data-type="SHAKAI">社会保険料額情報</button>
+        <button class="type-tab" data-type="NOUNYU">納入告知・領収</button>
+        <button class="type-tab" data-type="SHOYO">賞与保険料算出</button>
+      </div>
+      <select class="filter-select" id="year-select">
+        <option value="">年度（すべて）</option>
+      </select>
+      <select class="filter-select" id="month-select">
+        <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>
+      </select>
+    </div>
 
-<!-- フィルターバー -->
-<div class="filter-bar">
-  <div class="type-tabs" id="type-tabs">
-    <button class="type-tab active" data-type="">すべて</button>
-    <button class="type-tab" data-type="SHAKAI">社会保険料額情報</button>
-    <button class="type-tab" data-type="NOUNYU">納入告知・領収</button>
-    <button class="type-tab" data-type="SHOYO">賞与保険料算出</button>
-  </div>
-  <select class="filter-select" id="year-select">
-    <option value="">年度（すべて）</option>
-  </select>
-  <select class="filter-select" id="month-select">
-    <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>
-  </select>
-</div>
+    <!-- 文書一覧テーブル -->
+    <div class="doc-table-wrap">
+      <table class="doc-table">
+        <thead>
+          <tr>
+            <th>種別</th>
+            <th>対象年月</th>
+            <th>事業所名</th>
+            <th>整理記号・番号</th>
+            <th>年金事務所</th>
+            <th>発行日</th>
+            <th>登録日時</th>
+          </tr>
+        </thead>
+        <tbody id="doc-list-body">
+          <tr>
+            <td colspan="7" class="no-data">データを読み込んでいます...</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
 
-<!-- 文書一覧テーブル -->
-<div class="doc-table-wrap">
-  <table class="doc-table">
-    <thead>
-      <tr>
-        <th>種別</th>
-        <th>対象年月</th>
-        <th>事業所名</th>
-        <th>整理記号・番号</th>
-        <th>年金事務所</th>
-        <th>発行日</th>
-        <th>登録日時</th>
-      </tr>
-    </thead>
-    <tbody id="doc-list-body">
-      <tr><td colspan="7" class="no-data">データを読み込んでいます...</td></tr>
-    </tbody>
-  </table>
-</div>
+    <!-- 詳細パネル -->
+    <div id="detail-panel">
+      <div class="detail-header">
+        <h2 id="detail-title">詳細</h2>
+        <button class="detail-close" onclick="closeDetail()">✕ 閉じる</button>
+      </div>
+      <div id="detail-body"></div>
+    </div>
 
-<!-- 詳細パネル -->
-<div id="detail-panel">
-  <div class="detail-header">
-    <h2 id="detail-title">詳細</h2>
-    <button class="detail-close" onclick="closeDetail()">✕ 閉じる</button>
-  </div>
-  <div id="detail-body"></div>
-</div>
+    <script>
+      const API = "";
+      let currentFilter = { type: "", year: "", month: "" };
+      let selectedDocId = null;
 
-<script>
-const API = "";
-let currentFilter = { type: "", year: "", month: "" };
-let selectedDocId = null;
+      // ──────────────────────────────────
+      // ページ初期化
+      // ──────────────────────────────────
+      document.addEventListener("DOMContentLoaded", () => {
+        checkAuth();
+        loadDocuments();
+        loadFilterOptions();
+        initUploadZone();
 
-// ──────────────────────────────────
-// ページ初期化
-// ──────────────────────────────────
-document.addEventListener('DOMContentLoaded', () => {
-  checkAuth();
-  loadDocuments();
-  loadFilterOptions();
-  initUploadZone();
+        document.getElementById("type-tabs").addEventListener("click", (e) => {
+          const tab = e.target.closest(".type-tab");
+          if (!tab) return;
+          document
+            .querySelectorAll(".type-tab")
+            .forEach((t) => t.classList.remove("active"));
+          tab.classList.add("active");
+          currentFilter.type = tab.dataset.type;
+          loadDocuments();
+        });
 
-  document.getElementById('type-tabs').addEventListener('click', e => {
-    const tab = e.target.closest('.type-tab');
-    if (!tab) return;
-    document.querySelectorAll('.type-tab').forEach(t => t.classList.remove('active'));
-    tab.classList.add('active');
-    currentFilter.type = tab.dataset.type;
-    loadDocuments();
-  });
+        document
+          .getElementById("year-select")
+          .addEventListener("change", (e) => {
+            currentFilter.year = e.target.value;
+            loadDocuments();
+          });
 
-  document.getElementById('year-select').addEventListener('change', e => {
-    currentFilter.year = e.target.value;
-    loadDocuments();
-  });
+        document
+          .getElementById("month-select")
+          .addEventListener("change", (e) => {
+            currentFilter.month = e.target.value;
+            loadDocuments();
+          });
+      });
 
-  document.getElementById('month-select').addEventListener('change', e => {
-    currentFilter.month = e.target.value;
-    loadDocuments();
-  });
-});
+      // ──────────────────────────────────
+      // 文書一覧ロード
+      // ──────────────────────────────────
+      async function loadDocuments() {
+        const params = new URLSearchParams();
+        if (currentFilter.type) params.set("doc_type", currentFilter.type);
+        if (currentFilter.year) params.set("year", currentFilter.year);
+        if (currentFilter.month) params.set("month", currentFilter.month);
 
-// ──────────────────────────────────
-// 文書一覧ロード
-// ──────────────────────────────────
-async function loadDocuments() {
-  const params = new URLSearchParams();
-  if (currentFilter.type)  params.set('doc_type', currentFilter.type);
-  if (currentFilter.year)  params.set('year',     currentFilter.year);
-  if (currentFilter.month) params.set('month',    currentFilter.month);
+        const url = `${API}/nenkin/documents${params.toString() ? "?" + params : ""}`;
+        try {
+          const res = await fetch(url);
+          const docs = await res.json();
+          renderDocList(docs);
+        } catch (e) {
+          document.getElementById("doc-list-body").innerHTML =
+            `<tr><td colspan="7" class="no-data" style="color:#dc3545">読み込みエラー: ${e.message}</td></tr>`;
+        }
+      }
 
-  const url = `${API}/nenkin/documents${params.toString() ? '?' + params : ''}`;
-  try {
-    const res = await fetch(url);
-    const docs = await res.json();
-    renderDocList(docs);
-  } catch (e) {
-    document.getElementById('doc-list-body').innerHTML =
-      `<tr><td colspan="7" class="no-data" style="color:#dc3545">読み込みエラー: ${e.message}</td></tr>`;
-  }
-}
+      function renderDocList(docs) {
+        const tbody = document.getElementById("doc-list-body");
+        if (!docs.length) {
+          tbody.innerHTML =
+            '<tr><td colspan="7" class="no-data">文書が登録されていません</td></tr>';
+          return;
+        }
 
-function renderDocList(docs) {
-  const tbody = document.getElementById('doc-list-body');
-  if (!docs.length) {
-    tbody.innerHTML = '<tr><td colspan="7" class="no-data">文書が登録されていません</td></tr>';
-    return;
-  }
-
-  tbody.innerHTML = docs.map(d => {
-    const period = d.purpose_year && d.purpose_month
-      ? `${d.purpose_year}年${d.purpose_month}月`
-      : '−';
-    const issueDate = d.issue_date ? d.issue_date.replace(/-/g, '/') : '−';
-    const uploadedAt = d.uploaded_at ? d.uploaded_at.slice(0, 16).replace('T', ' ') : '−';
-    const selected = d.id === selectedDocId ? 'selected' : '';
-    return `<tr class="${selected}" onclick="loadDetail(${d.id})" data-id="${d.id}">
+        tbody.innerHTML = docs
+          .map((d) => {
+            const period =
+              d.purpose_year && d.purpose_month
+                ? `${d.purpose_year}年${d.purpose_month}月`
+                : "−";
+            const issueDate = d.issue_date
+              ? d.issue_date.replace(/-/g, "/")
+              : "−";
+            const uploadedAt = d.uploaded_at
+              ? d.uploaded_at.slice(0, 16).replace("T", " ")
+              : "−";
+            const selected = d.id === selectedDocId ? "selected" : "";
+            return `<tr class="${selected}" onclick="loadDetail(${d.id})" data-id="${d.id}">
       <td>${badgeHtml(d.document_type, d.document_type_name)}</td>
       <td>${period}</td>
-      <td>${escHtml(d.office_name || '−')}</td>
-      <td><small>${escHtml(d.office_kigo || '')} ${escHtml(d.office_number || '')}</small></td>
-      <td>${escHtml(d.nenkin_jimusho || '−')}</td>
+      <td>${escHtml(d.office_name || "−")}</td>
+      <td><small>${escHtml(d.office_kigo || "")} ${escHtml(d.office_number || "")}</small></td>
+      <td>${escHtml(d.nenkin_jimusho || "−")}</td>
       <td>${issueDate}</td>
       <td><small>${uploadedAt}</small></td>
     </tr>`;
-  }).join('');
-}
+          })
+          .join("");
+      }
 
-function badgeHtml(type, name) {
-  const cls = {SHAKAI:'badge-shakai', NOUNYU:'badge-nounyu', SHOYO:'badge-shoyo'}[type] || 'badge-unknown';
-  return `<span class="badge ${cls}">${escHtml(name || type)}</span>`;
-}
+      function badgeHtml(type, name) {
+        const cls =
+          {
+            SHAKAI: "badge-shakai",
+            NOUNYU: "badge-nounyu",
+            SHOYO: "badge-shoyo",
+          }[type] || "badge-unknown";
+        return `<span class="badge ${cls}">${escHtml(name || type)}</span>`;
+      }
 
-// ──────────────────────────────────
-// フィルター選択肢（年度）
-// ──────────────────────────────────
-async function loadFilterOptions() {
-  try {
-    const res = await fetch(`${API}/nenkin/filter-options`);
-    const data = await res.json();
-    const sel = document.getElementById('year-select');
-    const years = [...new Set(data.periods.map(p => p.purpose_year))].sort((a,b) => b-a);
-    years.forEach(y => {
-      const opt = document.createElement('option');
-      opt.value = y; opt.textContent = `${y}年`;
-      sel.appendChild(opt);
-    });
-  } catch (_) {}
-}
+      // ──────────────────────────────────
+      // フィルター選択肢（年度）
+      // ──────────────────────────────────
+      async function loadFilterOptions() {
+        try {
+          const res = await fetch(`${API}/nenkin/filter-options`);
+          const data = await res.json();
+          const sel = document.getElementById("year-select");
+          const years = [
+            ...new Set(data.periods.map((p) => p.purpose_year)),
+          ].sort((a, b) => b - a);
+          years.forEach((y) => {
+            const opt = document.createElement("option");
+            opt.value = y;
+            opt.textContent = `${y}年`;
+            sel.appendChild(opt);
+          });
+        } catch (_) {}
+      }
 
-// ──────────────────────────────────
-// 詳細ロード
-// ──────────────────────────────────
-async function loadDetail(docId) {
-  // 選択行のハイライト
-  selectedDocId = docId;
-  document.querySelectorAll('.doc-table tbody tr').forEach(tr => {
-    tr.classList.toggle('selected', parseInt(tr.dataset.id) === docId);
-  });
+      // ──────────────────────────────────
+      // 詳細ロード
+      // ──────────────────────────────────
+      async function loadDetail(docId) {
+        // 選択行のハイライト
+        selectedDocId = docId;
+        document.querySelectorAll(".doc-table tbody tr").forEach((tr) => {
+          tr.classList.toggle("selected", parseInt(tr.dataset.id) === docId);
+        });
 
-  try {
-    const res = await fetch(`${API}/nenkin/documents/${docId}`);
-    const data = await res.json();
-    renderDetail(data);
-  } catch (e) {
-    showDetailError(e.message);
-  }
-}
+        try {
+          const res = await fetch(`${API}/nenkin/documents/${docId}`);
+          const data = await res.json();
+          renderDetail(data);
+        } catch (e) {
+          showDetailError(e.message);
+        }
+      }
 
-function closeDetail() {
-  selectedDocId = null;
-  document.getElementById('detail-panel').classList.remove('visible');
-  document.querySelectorAll('.doc-table tbody tr').forEach(tr => tr.classList.remove('selected'));
-}
+      function closeDetail() {
+        selectedDocId = null;
+        document.getElementById("detail-panel").classList.remove("visible");
+        document
+          .querySelectorAll(".doc-table tbody tr")
+          .forEach((tr) => tr.classList.remove("selected"));
+      }
 
-function renderDetail({ document: doc, detail }) {
-  const panel = document.getElementById('detail-panel');
-  const title = document.getElementById('detail-title');
-  const body  = document.getElementById('detail-body');
+      function renderDetail({ document: doc, detail }) {
+        const panel = document.getElementById("detail-panel");
+        const title = document.getElementById("detail-title");
+        const body = document.getElementById("detail-body");
 
-  const period = doc.purpose_year && doc.purpose_month
-    ? `${doc.purpose_year}年${doc.purpose_month}月分`
-    : '';
-  title.textContent = `${doc.document_type_name} ${period}`;
+        const period =
+          doc.purpose_year && doc.purpose_month
+            ? `${doc.purpose_year}年${doc.purpose_month}月分`
+            : "";
+        title.textContent = `${doc.document_type_name} ${period}`;
 
-  // 共通事業所カード
-  const infoHtml = `
+        // 共通事業所カード
+        const infoHtml = `
     <div class="info-cards">
       <div class="info-card">
         <div class="label">事業所名</div>
-        <div class="value">${escHtml(doc.office_name || '−')}</div>
+        <div class="value">${escHtml(doc.office_name || "−")}</div>
       </div>
       <div class="info-card">
         <div class="label">事業所番号 / 整理記号</div>
-        <div class="value">${escHtml(doc.office_number || '')} / ${escHtml(doc.office_kigo || '')}</div>
+        <div class="value">${escHtml(doc.office_number || "")} / ${escHtml(doc.office_kigo || "")}</div>
       </div>
       <div class="info-card">
         <div class="label">担当年金事務所</div>
-        <div class="value">${escHtml(doc.nenkin_jimusho || '−')}</div>
+        <div class="value">${escHtml(doc.nenkin_jimusho || "−")}</div>
       </div>
-      ${doc.issue_date ? `<div class="info-card">
+      ${
+        doc.issue_date
+          ? `<div class="info-card">
         <div class="label">発行日</div>
-        <div class="value">${doc.issue_date.replace(/-/g,'/')}</div>
-      </div>` : ''}
+        <div class="value">${doc.issue_date.replace(/-/g, "/")}</div>
+      </div>`
+          : ""
+      }
     </div>`;
 
-  let typeHtml = '';
-  if (doc.document_type === 'SHAKAI') {
-    typeHtml = renderShakai(detail);
-  } else if (doc.document_type === 'NOUNYU') {
-    typeHtml = renderNounyu(detail);
-  } else if (doc.document_type === 'SHOYO') {
-    typeHtml = renderShoyo(detail);
-  }
+        let typeHtml = "";
+        if (doc.document_type === "SHAKAI") {
+          typeHtml = renderShakai(detail);
+        } else if (doc.document_type === "NOUNYU") {
+          typeHtml = renderNounyu(detail);
+        } else if (doc.document_type === "SHOYO") {
+          typeHtml = renderShoyo(detail);
+        }
 
-  body.innerHTML = infoHtml + typeHtml;
-  panel.classList.add('visible');
-  panel.scrollIntoView({ behavior: 'smooth', block: 'start' });
-}
+        body.innerHTML = infoHtml + typeHtml;
+        panel.classList.add("visible");
+        panel.scrollIntoView({ behavior: "smooth", block: "start" });
+      }
 
-// ──────────────────────────────────
-// 社会保険料額情報 (SHAKAI)
-// ──────────────────────────────────
-function renderShakai(d) {
-  const kigen = d.nofu_kigen_date ? d.nofu_kigen_date.replace(/-/g, '/') : '−';
-  const addr = [d.office_postcode ? `〒${d.office_postcode}` : '', d.office_address].filter(Boolean).join(' ');
-  return `
+      // ──────────────────────────────────
+      // 社会保険料額情報 (SHAKAI)
+      // ──────────────────────────────────
+      function renderShakai(d) {
+        const kigen = d.nofu_kigen_date
+          ? d.nofu_kigen_date.replace(/-/g, "/")
+          : "−";
+        const addr = [
+          d.office_postcode ? `〒${d.office_postcode}` : "",
+          d.office_address,
+        ]
+          .filter(Boolean)
+          .join(" ");
+        return `
     <div class="amount-section">
       <h3>保険料額</h3>
       <div class="amount-grid">
-        ${amtRow('健康保険料', d.kenkou_hokenryo)}
-        ${amtRow('厚生年金保険料', d.kousei_nenkin_hokenryo)}
-        ${amtRow('子ども・子育て拠出金', d.kodomo_kyoshutsukin)}
-        ${amtRow('合　計', d.total, true)}
+        ${amtRow("健康保険料", d.kenkou_hokenryo)}
+        ${amtRow("厚生年金保険料", d.kousei_nenkin_hokenryo)}
+        ${amtRow("子ども・子育て拠出金", d.kodomo_kyoshutsukin)}
+        ${amtRow("合　計", d.total, true)}
       </div>
     </div>
     <div class="info-cards">
@@ -523,69 +679,77 @@ function renderShakai(d) {
         <div class="label">納付期限</div>
         <div class="value">${kigen}</div>
       </div>
-      ${addr ? `<div class="info-card" style="flex:2">
+      ${
+        addr
+          ? `<div class="info-card" style="flex:2">
         <div class="label">事業所所在地</div>
         <div class="value">${escHtml(addr)}</div>
-      </div>` : ''}
+      </div>`
+          : ""
+      }
     </div>`;
-}
+      }
 
-// ──────────────────────────────────
-// 保険料納入告知額・領収済額 (NOUNYU)
-// ──────────────────────────────────
-function renderNounyu(d) {
-  const kigen     = d.kokuchi_nofu_kigen ? d.kokuchi_nofu_kigen.replace(/-/g, '/') : '−';
-  const ryoshuDt  = d.ryoshu_date ? d.ryoshu_date.replace(/-/g, '/') : '−';
-  const ryoshuPeriod = d.ryoshu_nofu_year && d.ryoshu_nofu_month
-    ? `${d.ryoshu_nofu_year}年${d.ryoshu_nofu_month}月分`
-    : '−';
-  return `
+      // ──────────────────────────────────
+      // 保険料納入告知額・領収済額 (NOUNYU)
+      // ──────────────────────────────────
+      function renderNounyu(d) {
+        const kigen = d.kokuchi_nofu_kigen
+          ? d.kokuchi_nofu_kigen.replace(/-/g, "/")
+          : "−";
+        const ryoshuDt = d.ryoshu_date ? d.ryoshu_date.replace(/-/g, "/") : "−";
+        const ryoshuPeriod =
+          d.ryoshu_nofu_year && d.ryoshu_nofu_month
+            ? `${d.ryoshu_nofu_year}年${d.ryoshu_nofu_month}月分`
+            : "−";
+        return `
     <div class="nounyu-compare">
       <div class="nounyu-box kokuchi">
         <h4>📋 今月の保険料告知額（納付期限: ${kigen}）</h4>
         <div class="amount-grid">
-          ${amtRow('健康保険料', d.kokuchi_kenkou)}
-          ${amtRow('厚生年金保険料', d.kokuchi_kounen)}
-          ${amtRow('子ども・子育て拠出金', d.kokuchi_kodomo)}
-          ${amtRow('合　計', d.kokuchi_total, true)}
+          ${amtRow("健康保険料", d.kokuchi_kenkou)}
+          ${amtRow("厚生年金保険料", d.kokuchi_kounen)}
+          ${amtRow("子ども・子育て拠出金", d.kokuchi_kodomo)}
+          ${amtRow("合　計", d.kokuchi_total, true)}
         </div>
       </div>
       <div class="nounyu-box ryoshu">
         <h4>✅ 前月分領収済額（${ryoshuPeriod}・領収日: ${ryoshuDt}）</h4>
         <div class="amount-grid">
-          ${amtRow('健康保険料', d.ryoshu_kenkou)}
-          ${amtRow('厚生年金保険料', d.ryoshu_kounen)}
-          ${amtRow('子ども・子育て拠出金', d.ryoshu_kodomo)}
-          ${amtRow('合　計', d.ryoshu_total, true)}
+          ${amtRow("健康保険料", d.ryoshu_kenkou)}
+          ${amtRow("厚生年金保険料", d.ryoshu_kounen)}
+          ${amtRow("子ども・子育て拠出金", d.ryoshu_kodomo)}
+          ${amtRow("合　計", d.ryoshu_total, true)}
         </div>
       </div>
     </div>
     <div class="info-cards">
       <div class="info-card">
         <div class="label">事業所所在地</div>
-        <div class="value">${escHtml([d.office_postcode ? '〒'+d.office_postcode : '', d.office_address].filter(Boolean).join(' '))}</div>
+        <div class="value">${escHtml([d.office_postcode ? "〒" + d.office_postcode : "", d.office_address].filter(Boolean).join(" "))}</div>
       </div>
     </div>`;
-}
+      }
 
-// ──────────────────────────────────
-// 賞与保険料算出内訳書 (SHOYO)
-// ──────────────────────────────────
-function renderShoyo(d) {
-  if (!d || !d.items) return '<p>詳細データなし</p>';
+      // ──────────────────────────────────
+      // 賞与保険料算出内訳書 (SHOYO)
+      // ──────────────────────────────────
+      function renderShoyo(d) {
+        if (!d || !d.items) return "<p>詳細データなし</p>";
 
-  const totKenpo  = sum(d.items, 'kenpo_hongetsu');
-  const totKounen = sum(d.items, 'kounen_hongetsu');
-  const totHKenpo = sum(d.items, 'hyojun_shoyo_kenpo');
-  const totHKounen = sum(d.items, 'hyojun_shoyo_kounen');
+        const totKenpo = sum(d.items, "kenpo_hongetsu");
+        const totKounen = sum(d.items, "kounen_hongetsu");
+        const totHKenpo = sum(d.items, "hyojun_shoyo_kenpo");
+        const totHKounen = sum(d.items, "hyojun_shoyo_kounen");
 
-  const rows = d.items.map(it => {
-    const hassei = it.hassei_date_iso
-      ? it.hassei_date_iso.replace(/-/g, '/')
-      : (it.hassei_ymd || '−');
-    return `<tr>
-      <td>${escHtml(it.seiri_num || '')}</td>
-      <td class="name">${escHtml(it.shimei || '')}</td>
+        const rows = d.items
+          .map((it) => {
+            const hassei = it.hassei_date_iso
+              ? it.hassei_date_iso.replace(/-/g, "/")
+              : it.hassei_ymd || "−";
+            return `<tr>
+      <td>${escHtml(it.seiri_num || "")}</td>
+      <td class="name">${escHtml(it.shimei || "")}</td>
       <td>${hassei}</td>
       <td>${fmtAmt(it.hyojun_shoyo_kenpo)}</td>
       <td>${fmtAmt(it.hyojun_shoyo_kounen)}</td>
@@ -594,18 +758,23 @@ function renderShoyo(d) {
       <td>${fmtAmt(it.kounen_hongetsu)}</td>
       <td>${it.kounen_zengetsu ? fmtAmt(it.kounen_zengetsu) : '<span class="empty-cell">−</span>'}</td>
     </tr>`;
-  }).join('');
+          })
+          .join("");
 
-  return `
+        return `
     <div class="info-cards" style="margin-bottom:16px">
       <div class="info-card">
         <div class="label">対象人員</div>
         <div class="value">${d.jin_in_num} 名</div>
       </div>
-      ${d.menjyo_hokenryo_ritsu ? `<div class="info-card">
+      ${
+        d.menjyo_hokenryo_ritsu
+          ? `<div class="info-card">
         <div class="label">免除保険料率</div>
         <div class="value">${escHtml(d.menjyo_hokenryo_ritsu)}</div>
-      </div>` : ''}
+      </div>`
+          : ""
+      }
     </div>
     <div class="shoyo-table-wrap">
       <table class="shoyo-table">
@@ -641,96 +810,120 @@ function renderShoyo(d) {
         </tfoot>
       </table>
     </div>`;
-}
-
-// ──────────────────────────────────
-// アップロードゾーン
-// ──────────────────────────────────
-function initUploadZone() {
-  const zone  = document.getElementById('upload-zone');
-  const input = document.getElementById('zip-input');
-
-  zone.addEventListener('dragover', e => { e.preventDefault(); zone.classList.add('dragover'); });
-  zone.addEventListener('dragleave', () => zone.classList.remove('dragover'));
-  zone.addEventListener('drop', e => {
-    e.preventDefault();
-    zone.classList.remove('dragover');
-    const files = [...e.dataTransfer.files].filter(f => f.name.endsWith('.zip'));
-    if (files.length) uploadFiles(files);
-  });
-
-  input.addEventListener('change', () => {
-    const files = [...input.files];
-    if (files.length) uploadFiles(files);
-    input.value = '';
-  });
-}
-
-async function uploadFiles(files) {
-  const status = document.getElementById('upload-status');
-  status.innerHTML = `<span style="color:#6c757d">アップロード中... (${files.length}件)</span>`;
-
-  let ok = 0, skipped = 0, errors = [];
-
-  for (const file of files) {
-    const fd = new FormData();
-    fd.append('file', file);
-    try {
-      const res = await fetch(`${API}/nenkin/upload`, { method: 'POST', body: fd });
-      const json = await res.json();
-      if (res.status === 409) {
-        skipped++;
-      } else if (!res.ok) {
-        errors.push(`${file.name}: ${json.detail || res.statusText}`);
-      } else {
-        ok++;
       }
-    } catch (e) {
-      errors.push(`${file.name}: ${e.message}`);
-    }
-  }
 
-  let msg = '';
-  if (ok > 0)      msg += `<span class="status-ok">✓ ${ok}件登録完了</span>　`;
-  if (skipped > 0) msg += `<span style="color:#856404">⚠ ${skipped}件は既登録のためスキップ</span>　`;
-  if (errors.length) msg += `<span class="status-err">✗ エラー: ${errors.join(' / ')}</span>`;
-  status.innerHTML = msg;
+      // ──────────────────────────────────
+      // アップロードゾーン
+      // ──────────────────────────────────
+      function initUploadZone() {
+        const zone = document.getElementById("upload-zone");
+        const input = document.getElementById("zip-input");
 
-  if (ok > 0) {
-    loadDocuments();
-    loadFilterOptions();
-  }
-}
+        zone.addEventListener("dragover", (e) => {
+          e.preventDefault();
+          zone.classList.add("dragover");
+        });
+        zone.addEventListener("dragleave", () =>
+          zone.classList.remove("dragover"),
+        );
+        zone.addEventListener("drop", (e) => {
+          e.preventDefault();
+          zone.classList.remove("dragover");
+          const files = [...e.dataTransfer.files].filter((f) =>
+            f.name.endsWith(".zip"),
+          );
+          if (files.length) uploadFiles(files);
+        });
 
-// ──────────────────────────────────
-// ユーティリティ
-// ──────────────────────────────────
-function escHtml(s) {
-  return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
-}
+        input.addEventListener("change", () => {
+          const files = [...input.files];
+          if (files.length) uploadFiles(files);
+          input.value = "";
+        });
+      }
 
-function fmtAmt(v) {
-  if (v == null || v === '') return '<span class="empty-cell">−</span>';
-  return '¥' + Number(v).toLocaleString('ja-JP', { minimumFractionDigits: 0, maximumFractionDigits: 0 });
-}
+      async function uploadFiles(files) {
+        const status = document.getElementById("upload-status");
+        status.innerHTML = `<span style="color:#6c757d">アップロード中... (${files.length}件)</span>`;
 
-function amtRow(label, value, isTotal = false) {
-  return `<div class="amount-row${isTotal ? ' total' : ''}">
+        let ok = 0,
+          skipped = 0,
+          errors = [];
+
+        for (const file of files) {
+          const fd = new FormData();
+          fd.append("file", file);
+          try {
+            const res = await fetch(`${API}/nenkin/upload`, {
+              method: "POST",
+              body: fd,
+            });
+            const json = await res.json();
+            if (res.status === 409) {
+              skipped++;
+            } else if (!res.ok) {
+              errors.push(`${file.name}: ${json.detail || res.statusText}`);
+            } else {
+              ok++;
+            }
+          } catch (e) {
+            errors.push(`${file.name}: ${e.message}`);
+          }
+        }
+
+        let msg = "";
+        if (ok > 0) msg += `<span class="status-ok">✓ ${ok}件登録完了</span>　`;
+        if (skipped > 0)
+          msg += `<span style="color:#856404">⚠ ${skipped}件は既登録のためスキップ</span>　`;
+        if (errors.length)
+          msg += `<span class="status-err">✗ エラー: ${errors.join(" / ")}</span>`;
+        status.innerHTML = msg;
+
+        if (ok > 0) {
+          loadDocuments();
+          loadFilterOptions();
+        }
+      }
+
+      // ──────────────────────────────────
+      // ユーティリティ
+      // ──────────────────────────────────
+      function escHtml(s) {
+        return String(s)
+          .replace(/&/g, "&amp;")
+          .replace(/</g, "&lt;")
+          .replace(/>/g, "&gt;")
+          .replace(/"/g, "&quot;");
+      }
+
+      function fmtAmt(v) {
+        if (v == null || v === "") return '<span class="empty-cell">−</span>';
+        return (
+          "¥" +
+          Number(v).toLocaleString("ja-JP", {
+            minimumFractionDigits: 0,
+            maximumFractionDigits: 0,
+          })
+        );
+      }
+
+      function amtRow(label, value, isTotal = false) {
+        return `<div class="amount-row${isTotal ? " total" : ""}">
     <span>${label}</span>
     <span class="amt">${fmtAmt(value)}</span>
   </div>`;
-}
+      }
 
-function sum(items, key) {
-  return items.reduce((acc, it) => acc + (Number(it[key]) || 0), 0);
-}
+      function sum(items, key) {
+        return items.reduce((acc, it) => acc + (Number(it[key]) || 0), 0);
+      }
 
-function showDetailError(msg) {
-  const panel = document.getElementById('detail-panel');
-  document.getElementById('detail-body').innerHTML =
-    `<p style="color:#dc3545">エラー: ${escHtml(msg)}</p>`;
-  panel.classList.add('visible');
-}
-</script>
-</body>
+      function showDetailError(msg) {
+        const panel = document.getElementById("detail-panel");
+        document.getElementById("detail-body").innerHTML =
+          `<p style="color:#dc3545">エラー: ${escHtml(msg)}</p>`;
+        panel.classList.add("visible");
+      }
+    </script>
+  </body>
 </html>
diff --git a/frontend/payroll-calculation.html b/frontend/payroll-calculation.html
index 36d6a85..6f029ad 100644
--- a/frontend/payroll-calculation.html
+++ b/frontend/payroll-calculation.html
@@ -1783,14 +1783,18 @@
           // 源泉税控除対象人数を計算（給与と同じロジック）
           const bDependentCount = employee.dependents
             ? employee.dependents.filter((d) => {
-                if (d.valid_to && new Date(d.valid_to) < new Date()) return false;
+                if (d.valid_to && new Date(d.valid_to) < new Date())
+                  return false;
                 if (!d.birth_date) return false;
                 const birthDate = new Date(d.birth_date);
                 const targetYear = bonus.bonus_year;
                 const yearEnd = new Date(targetYear, 11, 31);
                 let age = yearEnd.getFullYear() - birthDate.getFullYear();
                 const monthDiff = yearEnd.getMonth() - birthDate.getMonth();
-                if (monthDiff < 0 || (monthDiff === 0 && yearEnd.getDate() < birthDate.getDate())) {
+                if (
+                  monthDiff < 0 ||
+                  (monthDiff === 0 && yearEnd.getDate() < birthDate.getDate())
+                ) {
                   age--;
                 }
                 return age >= 16;
@@ -1969,10 +1973,10 @@
                     <div class="form-group">
                       <label>賞与種別</label>
                       <select name="bonus_type">
-                        <option value="夏季賞与" ${bonus.bonus_type === '夏季賞与' ? 'selected' : ''}>夏季賞与</option>
-                        <option value="冬季賞与" ${bonus.bonus_type === '冬季賞与' ? 'selected' : ''}>冬季賞与</option>
-                        <option value="決算賞与" ${bonus.bonus_type === '決算賞与' ? 'selected' : ''}>決算賞与</option>
-                        <option value="その他" ${bonus.bonus_type === 'その他' ? 'selected' : ''}>その他</option>
+                        <option value="夏季賞与" ${bonus.bonus_type === "夏季賞与" ? "selected" : ""}>夏季賞与</option>
+                        <option value="冬季賞与" ${bonus.bonus_type === "冬季賞与" ? "selected" : ""}>冬季賞与</option>
+                        <option value="決算賞与" ${bonus.bonus_type === "決算賞与" ? "selected" : ""}>決算賞与</option>
+                        <option value="その他" ${bonus.bonus_type === "その他" ? "selected" : ""}>その他</option>
                       </select>
                     </div>
                   </div>
@@ -2451,7 +2455,7 @@
                 const bonusPaymentDate = bonus.payment_date
                   ? (() => {
                       const d = new Date(bonus.payment_date);
-                      return `${d.getFullYear()}年${String(d.getMonth()+1).padStart(2,'0')}月${String(d.getDate()).padStart(2,'0')}日`;
+                      return `${d.getFullYear()}年${String(d.getMonth() + 1).padStart(2, "0")}月${String(d.getDate()).padStart(2, "0")}日`;
                     })()
                   : `${bonus.bonus_year}年${String(bonus.bonus_month).padStart(2, "0")}月${getLastDayOfMonth(bonus.bonus_year, bonus.bonus_month)}日`;
                 if (currentKey && currentKey !== currentKey_new) {
diff --git a/frontend/payroll.html b/frontend/payroll.html
index 386e227..e32f8ef 100644
--- a/frontend/payroll.html
+++ b/frontend/payroll.html
@@ -118,16 +118,17 @@
         >
           <div class="icon">📄</div>
           <h2>源泉徴収票</h2>
-          <p>給与所得の源泉徴収票を発行します（本人用・区役所用・税務署用 各1部）</p>
+          <p>
+            給与所得の源泉徴収票を発行します（本人用・区役所用・税務署用 各1部）
+          </p>
         </div>
 
-        <div
-          class="menu-card"
-          onclick="location.href = 'nenkin-portal.html'"
-        >
+        <div class="menu-card" onclick="location.href = 'nenkin-portal.html'">
           <div class="icon">📋</div>
           <h2>社会保険電子文書</h2>
-          <p>日本年金機構からの電子文書（保険料通知・賞与内訳等）を管理します</p>
+          <p>
+            日本年金機構からの電子文書（保険料通知・賞与内訳等）を管理します
+          </p>
         </div>
       </div>
 
diff --git a/frontend/withholding-slip.html b/frontend/withholding-slip.html
index 443f988..dd0c8e7 100644
--- a/frontend/withholding-slip.html
+++ b/frontend/withholding-slip.html
@@ -2,7 +2,10 @@
 <html lang="ja">
   <head>
     <meta charset="UTF-8" />
-    <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" />
     <meta http-equiv="Expires" content="0" />
     <script src="js/auth.js"></script>
@@ -12,34 +15,122 @@
     <link rel="stylesheet" href="/css/mobile.css" />
     <style>
       /* ===== 画面UI ===== */
-      body { font-family: 'MS Gothic', 'Meiryo', sans-serif; }
-      .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
-      .form-panel { background:#f9f9f9; border:1px solid #ddd; border-radius:6px; padding:20px; margin-bottom:20px; }
-      .form-row { display:flex; flex-wrap:wrap; gap:16px; align-items:flex-end; }
-      .form-group { display:flex; flex-direction:column; gap:4px; }
-      .form-group label { font-size:13px; font-weight:bold; }
-      .form-group input, .form-group select { padding:6px 8px; border:1px solid #ccc; border-radius:4px; font-size:14px; }
-      .btn { padding:8px 18px; border:none; border-radius:4px; cursor:pointer; font-size:14px; font-weight:bold; }
-      .btn-primary { background:#007bff; color:white; }
-      .btn-primary:hover { background:#0056b3; }
-      .btn-success { background:#28a745; color:white; }
-      .btn-success:hover { background:#1e7e34; }
-      .btn-secondary { background:#6c757d; color:white; }
-      .employee-list { margin:8px 0; display:flex; flex-wrap:wrap; gap:8px; }
-      .employee-chip { padding:4px 10px; background:#e9ecef; border-radius:16px; font-size:13px; cursor:pointer; border:2px solid transparent; }
-      .employee-chip.selected { background:#007bff; color:white; border-color:#0056b3; }
-      .alert { padding:12px 16px; border-radius:4px; margin-bottom:16px; }
-      .alert-info { background:#d1ecf1; color:#0c5460; border:1px solid #bee5eb; }
-      .alert-warning { background:#fff3cd; color:#856404; border:1px solid #ffeeba; }
-      .no-print {}
+      body {
+        font-family: "MS Gothic", "Meiryo", sans-serif;
+      }
+      .container {
+        max-width: 1200px;
+        margin: 0 auto;
+        padding: 0 20px;
+      }
+      .form-panel {
+        background: #f9f9f9;
+        border: 1px solid #ddd;
+        border-radius: 6px;
+        padding: 20px;
+        margin-bottom: 20px;
+      }
+      .form-row {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 16px;
+        align-items: flex-end;
+      }
+      .form-group {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+      }
+      .form-group label {
+        font-size: 13px;
+        font-weight: bold;
+      }
+      .form-group input,
+      .form-group select {
+        padding: 6px 8px;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+        font-size: 14px;
+      }
+      .btn {
+        padding: 8px 18px;
+        border: none;
+        border-radius: 4px;
+        cursor: pointer;
+        font-size: 14px;
+        font-weight: bold;
+      }
+      .btn-primary {
+        background: #007bff;
+        color: white;
+      }
+      .btn-primary:hover {
+        background: #0056b3;
+      }
+      .btn-success {
+        background: #28a745;
+        color: white;
+      }
+      .btn-success:hover {
+        background: #1e7e34;
+      }
+      .btn-secondary {
+        background: #6c757d;
+        color: white;
+      }
+      .employee-list {
+        margin: 8px 0;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
+      }
+      .employee-chip {
+        padding: 4px 10px;
+        background: #e9ecef;
+        border-radius: 16px;
+        font-size: 13px;
+        cursor: pointer;
+        border: 2px solid transparent;
+      }
+      .employee-chip.selected {
+        background: #007bff;
+        color: white;
+        border-color: #0056b3;
+      }
+      .alert {
+        padding: 12px 16px;
+        border-radius: 4px;
+        margin-bottom: 16px;
+      }
+      .alert-info {
+        background: #d1ecf1;
+        color: #0c5460;
+        border: 1px solid #bee5eb;
+      }
+      .alert-warning {
+        background: #fff3cd;
+        color: #856404;
+        border: 1px solid #ffeeba;
+      }
+      .no-print {
+      }
 
       /* ===== 印刷プレビューエリア ===== */
-      .slip-page { background:white; margin:20px auto; padding:6px; max-width:900px; }
-      .slip-divider { border:none; border-top:2px dashed #aaa; margin:4px 0; }
+      .slip-page {
+        background: white;
+        margin: 20px auto;
+        padding: 6px;
+        max-width: 900px;
+      }
+      .slip-divider {
+        border: none;
+        border-top: 2px dashed #aaa;
+        margin: 4px 0;
+      }
 
       /* ===== 源泉徴収票 票面 ===== */
       .withholding-slip {
-        font-family: 'MS Gothic', 'MS Mincho', 'Meiryo', monospace;
+        font-family: "MS Gothic", "MS Mincho", "Meiryo", monospace;
         background: white;
         page-break-inside: avoid;
         margin-bottom: 4px;
@@ -57,84 +148,219 @@
         word-break: break-all;
       }
       /* セルクラス */
-      .sl   { background:#e8e8e8; text-align:center; font-size:6pt; font-weight:bold; vertical-align:middle; }
-      .sh   { background:#e8e8e8; font-size:6pt; text-align:center; vertical-align:middle; }
-      .sv   { background:white; font-size:7.5pt; }
-      .sv-r { background:white; text-align:right; font-size:8pt; }
-      .sv-c { background:white; text-align:center; font-size:8pt; }
-      .sv-s { background:white; text-align:center; font-size:6.5pt; }
-      .sh-r { background:#e8e8e8; text-align:right; font-size:6pt; }
-      .sh-s { background:#e8e8e8; text-align:center; font-size:6pt; }
-      .sv-payer { background:white; font-size:7.5pt; }
-      .st-title  { text-align:center; font-size:11pt; font-weight:bold; letter-spacing:2px; padding:3px 0; border:none; border-bottom:0.6px solid #333; }
-      .sf-name   { font-size:10pt; font-weight:bold; }
-      .sf-dep    { font-size:8pt; }
-      .remarks-cell { min-height:16px; font-size:7.5pt; }
-      .copy-label-cell { text-align:center; font-weight:bold; font-size:8pt; background:#e8e8e8; padding:2px; }
+      .sl {
+        background: #e8e8e8;
+        text-align: center;
+        font-size: 6pt;
+        font-weight: bold;
+        vertical-align: middle;
+      }
+      .sh {
+        background: #e8e8e8;
+        font-size: 6pt;
+        text-align: center;
+        vertical-align: middle;
+      }
+      .sv {
+        background: white;
+        font-size: 7.5pt;
+      }
+      .sv-r {
+        background: white;
+        text-align: right;
+        font-size: 8pt;
+      }
+      .sv-c {
+        background: white;
+        text-align: center;
+        font-size: 8pt;
+      }
+      .sv-s {
+        background: white;
+        text-align: center;
+        font-size: 6.5pt;
+      }
+      .sh-r {
+        background: #e8e8e8;
+        text-align: right;
+        font-size: 6pt;
+      }
+      .sh-s {
+        background: #e8e8e8;
+        text-align: center;
+        font-size: 6pt;
+      }
+      .sv-payer {
+        background: white;
+        font-size: 7.5pt;
+      }
+      .st-title {
+        text-align: center;
+        font-size: 11pt;
+        font-weight: bold;
+        letter-spacing: 2px;
+        padding: 3px 0;
+        border: none;
+        border-bottom: 0.6px solid #333;
+      }
+      .sf-name {
+        font-size: 10pt;
+        font-weight: bold;
+      }
+      .sf-dep {
+        font-size: 8pt;
+      }
+      .remarks-cell {
+        min-height: 16px;
+        font-size: 7.5pt;
+      }
+      .copy-label-cell {
+        text-align: center;
+        font-weight: bold;
+        font-size: 8pt;
+        background: #e8e8e8;
+        padding: 2px;
+      }
 
       /* ===== 印刷時 ===== */
       @media print {
-        @page { size: A4 portrait; margin: 6mm 5mm; }
-        body { margin:0; padding:0; }
-        .no-print { display:none !important; }
-        .slip-page { border:none; margin:0; padding:0; max-width:100%; }
-        .withholding-slip { margin-bottom:1px; }
-        .slip-divider { margin:3px 0; }
-        .page-break { page-break-before:always; }
-        .st { font-size:6.5pt; }
-        .sh { font-size:5.5pt; }
-        .sl { font-size:5.5pt; }
-        .st-title { font-size:10pt; }
-        .sf-name { font-size:9pt; }
+        @page {
+          size: A4 portrait;
+          margin: 6mm 5mm;
+        }
+        body {
+          margin: 0;
+          padding: 0;
+        }
+        .no-print {
+          display: none !important;
+        }
+        .slip-page {
+          border: none;
+          margin: 0;
+          padding: 0;
+          max-width: 100%;
+        }
+        .withholding-slip {
+          margin-bottom: 1px;
+        }
+        .slip-divider {
+          margin: 3px 0;
+        }
+        .page-break {
+          page-break-before: always;
+        }
+        .st {
+          font-size: 6.5pt;
+        }
+        .sh {
+          font-size: 5.5pt;
+        }
+        .sl {
+          font-size: 5.5pt;
+        }
+        .st-title {
+          font-size: 10pt;
+        }
+        .sf-name {
+          font-size: 9pt;
+        }
       }
     </style>
   </head>
   <body>
     <div class="container no-print">
-      <button onclick="location.href='payroll.html'" class="btn btn-secondary" style="margin:12px 0;">
+      <button
+        onclick="location.href = 'payroll.html'"
+        class="btn btn-secondary"
+        style="margin: 12px 0"
+      >
         &#8592; 給与管理メニューに戻る
       </button>
       <h1>給与所得の源泉徴収票</h1>
 
       <div class="form-panel">
-        <h3 style="margin-top:0">①　発行条件の設定</h3>
+        <h3 style="margin-top: 0">①　発行条件の設定</h3>
         <div class="form-row">
           <div class="form-group">
             <label>対象年（令和換算）</label>
-            <select id="tax-year" style="width:190px"></select>
+            <select id="tax-year" style="width: 190px"></select>
           </div>
           <div class="form-group">
             <label>従業員を選択（複数可）</label>
-            <button class="btn btn-secondary" onclick="toggleAllEmployees()" style="font-size:12px;padding:4px 10px">全選択 / 全解除</button>
+            <button
+              class="btn btn-secondary"
+              onclick="toggleAllEmployees()"
+              style="font-size: 12px; padding: 4px 10px"
+            >
+              全選択 / 全解除
+            </button>
           </div>
         </div>
-        <div id="employee-list" class="employee-list" style="margin-top:10px">
-          <span style="color:#999">読み込み中...</span>
+        <div id="employee-list" class="employee-list" style="margin-top: 10px">
+          <span style="color: #999">読み込み中...</span>
         </div>
 
-        <hr style="margin:16px 0" />
-        <h3 style="margin-top:0">②　支払者情報（源泉徴収票下部に印刷）</h3>
+        <hr style="margin: 16px 0" />
+        <h3 style="margin-top: 0">②　支払者情報（源泉徴収票下部に印刷）</h3>
         <div class="form-row">
           <div class="form-group">
             <label>会社名（氏名又は名称）</label>
-            <input type="text" id="company-name" style="width:320px" value="新日本テクノソリューションズ株式会社" />
+            <input
+              type="text"
+              id="company-name"
+              style="width: 320px"
+              value="新日本テクノソリューションズ株式会社"
+            />
           </div>
           <div class="form-group">
             <label>住所・所在地</label>
-            <input type="text" id="company-address" style="width:400px" value="〒130-0022 東京都墨田区江東橋４丁目３１－１０－４０１号室" />
+            <input
+              type="text"
+              id="company-address"
+              style="width: 400px"
+              value="〒130-0022 東京都墨田区江東橋４丁目３１－１０－４０１号室"
+            />
           </div>
           <div class="form-group">
             <label>電話番号</label>
-            <input type="text" id="company-phone" style="width:150px" value="03-6388-6465" />
+            <input
+              type="text"
+              id="company-phone"
+              style="width: 150px"
+              value="03-6388-6465"
+            />
           </div>
           <div class="form-group">
             <label>法人番号（任意）</label>
-            <input type="text" id="company-mynumber" style="width:160px" maxlength="13" value="3010601055736" />
+            <input
+              type="text"
+              id="company-mynumber"
+              style="width: 160px"
+              maxlength="13"
+              value="3010601055736"
+            />
           </div>
         </div>
-        <div style="margin-top:16px; display:flex; gap:12px; align-items:center">
-          <button class="btn btn-primary" onclick="generateSlips()">📋 源泉徴収票を作成</button>
-          <button class="btn btn-success" onclick="printSlips()" id="print-btn" style="display:none">🖨️ 印刷（3部）</button>
+        <div
+          style="
+            margin-top: 16px;
+            display: flex;
+            gap: 12px;
+            align-items: center;
+          "
+        >
+          <button class="btn btn-primary" onclick="generateSlips()">
+            📋 源泉徴収票を作成
+          </button>
+          <button
+            class="btn btn-success"
+            onclick="printSlips()"
+            id="print-btn"
+            style="display: none"
+          >
+            🖨️ 印刷（3部）
+          </button>
         </div>
       </div>
       <div id="alert-area"></div>
@@ -143,16 +369,16 @@
     <div id="slip-area"></div>
 
     <script>
-      const API_BASE = '';
+      const API_BASE = "";
 
       function initYearSelect() {
-        const sel = document.getElementById('tax-year');
+        const sel = document.getElementById("tax-year");
         const currentYear = new Date().getFullYear();
         for (let y = currentYear; y >= currentYear - 5; y--) {
           const reiwa = y - 2018;
-          const opt = document.createElement('option');
+          const opt = document.createElement("option");
           opt.value = y;
-          opt.textContent = '令和' + reiwa + '年（' + y + '年）';
+          opt.textContent = "令和" + reiwa + "年（" + y + "年）";
           if (y === currentYear - 1) opt.selected = true;
           sel.appendChild(opt);
         }
@@ -160,14 +386,20 @@
 
       async function loadEmployees() {
         try {
-          const resp = await fetch(API_BASE + '/payroll/withholding-slip/employees', {
-            headers: { 'Authorization': 'Bearer ' + (localStorage.getItem('token') || '') }
-          });
-          if (!resp.ok) throw new Error('Failed');
+          const resp = await fetch(
+            API_BASE + "/payroll/withholding-slip/employees",
+            {
+              headers: {
+                Authorization:
+                  "Bearer " + (localStorage.getItem("token") || ""),
+              },
+            },
+          );
+          if (!resp.ok) throw new Error("Failed");
           const data = await resp.json();
           renderEmployeeChips(data.employees || []);
         } catch (e) {
-          document.getElementById('employee-list').innerHTML =
+          document.getElementById("employee-list").innerHTML =
             '<span style="color:red">従業員リストの取得に失敗しました</span>';
         }
       }
@@ -175,100 +407,146 @@
       let allEmployees = [];
       function renderEmployeeChips(employees) {
         allEmployees = employees;
-        const container = document.getElementById('employee-list');
+        const container = document.getElementById("employee-list");
         if (!employees.length) {
-          container.innerHTML = '<span style="color:#999">従業員が登録されていません</span>';
+          container.innerHTML =
+            '<span style="color:#999">従業員が登録されていません</span>';
           return;
         }
-        container.innerHTML = '';
-        employees.forEach(function(emp) {
-          const chip = document.createElement('div');
-          chip.className = 'employee-chip selected';
+        container.innerHTML = "";
+        employees.forEach(function (emp) {
+          const chip = document.createElement("div");
+          chip.className = "employee-chip selected";
           chip.dataset.id = emp.id;
-          chip.textContent = emp.code + '\u3000' + emp.name;
-          chip.title = emp.name_kana || '';
-          chip.onclick = function() { chip.classList.toggle('selected'); };
+          chip.textContent = emp.code + "\u3000" + emp.name;
+          chip.title = emp.name_kana || "";
+          chip.onclick = function () {
+            chip.classList.toggle("selected");
+          };
           container.appendChild(chip);
         });
       }
 
       function toggleAllEmployees() {
-        const chips = document.querySelectorAll('.employee-chip');
-        const allSelected = Array.from(chips).every(function(c) { return c.classList.contains('selected'); });
-        chips.forEach(function(c) {
-          if (allSelected) c.classList.remove('selected');
-          else c.classList.add('selected');
+        const chips = document.querySelectorAll(".employee-chip");
+        const allSelected = Array.from(chips).every(function (c) {
+          return c.classList.contains("selected");
+        });
+        chips.forEach(function (c) {
+          if (allSelected) c.classList.remove("selected");
+          else c.classList.add("selected");
         });
       }
 
       function getSelectedEmployeeIds() {
-        return Array.from(document.querySelectorAll('.employee-chip.selected'))
-          .map(function(c) { return parseInt(c.dataset.id); });
+        return Array.from(
+          document.querySelectorAll(".employee-chip.selected"),
+        ).map(function (c) {
+          return parseInt(c.dataset.id);
+        });
       }
 
       function showAlert(msg, type) {
-        type = type || 'info';
-        document.getElementById('alert-area').innerHTML =
-          '<div class="alert alert-' + type + '">' + msg + '</div>';
+        type = type || "info";
+        document.getElementById("alert-area").innerHTML =
+          '<div class="alert alert-' + type + '">' + msg + "</div>";
       }
 
       async function generateSlips() {
-        const taxYear = parseInt(document.getElementById('tax-year').value);
-        const empIds  = getSelectedEmployeeIds();
-        if (!empIds.length) { showAlert('従業員を1名以上選択してください', 'warning'); return; }
-        const companyName     = document.getElementById('company-name').value || '（未設定）';
-        const companyAddress  = document.getElementById('company-address').value || '';
-        const companyPhone    = document.getElementById('company-phone').value || '';
-        const companyMyNumber = document.getElementById('company-mynumber').value || '';
-        showAlert('生成中...', 'info');
-        document.getElementById('slip-area').innerHTML = '';
+        const taxYear = parseInt(document.getElementById("tax-year").value);
+        const empIds = getSelectedEmployeeIds();
+        if (!empIds.length) {
+          showAlert("従業員を1名以上選択してください", "warning");
+          return;
+        }
+        const companyName =
+          document.getElementById("company-name").value || "（未設定）";
+        const companyAddress =
+          document.getElementById("company-address").value || "";
+        const companyPhone =
+          document.getElementById("company-phone").value || "";
+        const companyMyNumber =
+          document.getElementById("company-mynumber").value || "";
+        showAlert("生成中...", "info");
+        document.getElementById("slip-area").innerHTML = "";
         try {
-          const resp = await fetch(API_BASE + '/payroll/withholding-slip/generate', {
-            method: 'POST',
-            headers: {
-              'Content-Type': 'application/json',
-              'Authorization': 'Bearer ' + (localStorage.getItem('token') || '')
+          const resp = await fetch(
+            API_BASE + "/payroll/withholding-slip/generate",
+            {
+              method: "POST",
+              headers: {
+                "Content-Type": "application/json",
+                Authorization:
+                  "Bearer " + (localStorage.getItem("token") || ""),
+              },
+              body: JSON.stringify({
+                tax_year: taxYear,
+                employee_ids: empIds,
+                company_name: companyName,
+                company_address: companyAddress,
+                company_phone: companyPhone,
+                company_my_number: companyMyNumber,
+              }),
             },
-            body: JSON.stringify({
-              tax_year: taxYear, employee_ids: empIds,
-              company_name: companyName, company_address: companyAddress,
-              company_phone: companyPhone, company_my_number: companyMyNumber
-            })
-          });
-          if (!resp.ok) { const err = await resp.json(); throw new Error(err.detail || '取得エラー'); }
+          );
+          if (!resp.ok) {
+            const err = await resp.json();
+            throw new Error(err.detail || "取得エラー");
+          }
           const data = await resp.json();
           if (!data.slips || data.slips.length === 0) {
-            showAlert('令和' + (taxYear - 2018) + '年（' + taxYear + '年）の給与データがありません', 'warning');
+            showAlert(
+              "令和" +
+                (taxYear - 2018) +
+                "年（" +
+                taxYear +
+                "年）の給与データがありません",
+              "warning",
+            );
             return;
           }
-          showAlert(data.total_count + '名分の源泉徴収票を生成しました（各3部）', 'info');
-          renderAllSlips(data.slips, taxYear,
-            { companyName: companyName, companyAddress: companyAddress,
-              companyPhone: companyPhone, companyMyNumber: companyMyNumber });
-          document.getElementById('print-btn').style.display = '';
-        } catch (e) { showAlert('エラー: ' + e.message, 'warning'); }
+          showAlert(
+            data.total_count + "名分の源泉徴収票を生成しました（各3部）",
+            "info",
+          );
+          renderAllSlips(data.slips, taxYear, {
+            companyName: companyName,
+            companyAddress: companyAddress,
+            companyPhone: companyPhone,
+            companyMyNumber: companyMyNumber,
+          });
+          document.getElementById("print-btn").style.display = "";
+        } catch (e) {
+          showAlert("エラー: " + e.message, "warning");
+        }
       }
 
       function renderAllSlips(slips, taxYear, payer) {
-        const area = document.getElementById('slip-area');
-        area.innerHTML = '';
-        slips.forEach(function(slip, idx) {
-          const page = document.createElement('div');
-          page.className = 'slip-page' + (idx > 0 ? ' page-break' : '');
+        const area = document.getElementById("slip-area");
+        area.innerHTML = "";
+        slips.forEach(function (slip, idx) {
+          const page = document.createElement("div");
+          page.className = "slip-page" + (idx > 0 ? " page-break" : "");
           // 受給者交付用のみ個人番号を記載しない（法令上の要件）
           const copies = [
-            { label: '市区町村提出用', showMyNumber: true  },
-            { label: '受給者交付用',   showMyNumber: false },
-            { label: '税務署提出用',   showMyNumber: true  }
+            { label: "市区町村提出用", showMyNumber: true },
+            { label: "受給者交付用", showMyNumber: false },
+            { label: "税務署提出用", showMyNumber: true },
           ];
-          copies.forEach(function(copy, ci) {
+          copies.forEach(function (copy, ci) {
             if (ci > 0) {
-              const hr = document.createElement('hr');
-              hr.className = 'slip-divider';
+              const hr = document.createElement("hr");
+              hr.className = "slip-divider";
               page.appendChild(hr);
             }
-            const wrapper = document.createElement('div');
-            wrapper.innerHTML = buildSlipHTML(slip, taxYear, payer, copy.label, copy.showMyNumber);
+            const wrapper = document.createElement("div");
+            wrapper.innerHTML = buildSlipHTML(
+              slip,
+              taxYear,
+              payer,
+              copy.label,
+              copy.showMyNumber,
+            );
             page.appendChild(wrapper.firstElementChild);
           });
           area.appendChild(page);
@@ -277,29 +555,42 @@
 
       /* 元号変換 */
       function toGengou(dateStr) {
-        if (!dateStr) return '';
+        if (!dateStr) return "";
         const d = new Date(dateStr);
-        const y = d.getFullYear(), m = d.getMonth() + 1, day = d.getDate();
-        const mm = String(m).padStart('0', 2) || ('0' + m).slice(-2);
-        const dd = String(day).padStart('0', 2) || ('0' + day).slice(-2);
-        const mStr = (m < 10 ? '0' : '') + m;
-        const dStr = (day < 10 ? '0' : '') + day;
-        if (y >= 2019) return '令和' + (y - 2018) + '年' + mStr + '月' + dStr + '日';
-        if (y >= 1989) return '平成' + (y - 1988) + '年' + mStr + '月' + dStr + '日';
-        if (y >= 1926) return '昭和' + (y - 1925) + '年' + mStr + '月' + dStr + '日';
-        return y + '年' + mStr + '月' + dStr + '日';
+        const y = d.getFullYear(),
+          m = d.getMonth() + 1,
+          day = d.getDate();
+        const mm = String(m).padStart("0", 2) || ("0" + m).slice(-2);
+        const dd = String(day).padStart("0", 2) || ("0" + day).slice(-2);
+        const mStr = (m < 10 ? "0" : "") + m;
+        const dStr = (day < 10 ? "0" : "") + day;
+        if (y >= 2019)
+          return "令和" + (y - 2018) + "年" + mStr + "月" + dStr + "日";
+        if (y >= 1989)
+          return "平成" + (y - 1988) + "年" + mStr + "月" + dStr + "日";
+        if (y >= 1926)
+          return "昭和" + (y - 1925) + "年" + mStr + "月" + dStr + "日";
+        return y + "年" + mStr + "月" + dStr + "日";
       }
 
       /* escHtml */
       function escHtml(str) {
         return String(str)
-          .replace(/&/g, '&amp;').replace(/</g, '&lt;')
-          .replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+          .replace(/&/g, "&amp;")
+          .replace(/</g, "&lt;")
+          .replace(/>/g, "&gt;")
+          .replace(/"/g, "&quot;");
       }
 
       /* 数値フォーマット */
-      function fmt(n)  { return parseInt(n || 0).toLocaleString('ja-JP'); }
-      function fmtZ(n) { return (!n || parseInt(n) === 0) ? '' : parseInt(n).toLocaleString('ja-JP'); }
+      function fmt(n) {
+        return parseInt(n || 0).toLocaleString("ja-JP");
+      }
+      function fmtZ(n) {
+        return !n || parseInt(n) === 0
+          ? ""
+          : parseInt(n).toLocaleString("ja-JP");
+      }
 
       /* ====================================================
          扶養親族詳細行 HTML
@@ -308,55 +599,79 @@
       ==================================================== */
       function buildDependentRowsHTML(slip, showMyNumber) {
         const deps16 = (slip.dependents_over16 || []).slice(0, 4);
-        const deps0  = (slip.dependents_under16 || []).slice(0, 2);
-        var html = '';
+        const deps0 = (slip.dependents_under16 || []).slice(0, 2);
+        var html = "";
 
         for (var i = 0; i < 4; i++) {
           var d = deps16[i] || null;
           var numLabel = i + 1;
-          var kana  = d ? escHtml(d.name_kana || '') : '';
-          var name  = d ? escHtml(d.name || '') : '';
-          var myNum = (d && showMyNumber && d.my_number) ? escHtml(d.my_number) : '';
-          var kubun = d ? escHtml(d.deduction_type || '') : '';
-          html += '<tr>'
-            + '<td class="sl" rowspan="3" style="font-size:5.5pt">控除対象<br>扶養親族<br>' + numLabel + '</td>'
-            + '<td class="sh">(フリガナ)</td>'
-            + '<td class="sv" colspan="10">' + kana + '</td>'
-            + '<td class="sh" colspan="4">区分</td>'
-            + '</tr>'
-            + '<tr>'
-            + '<td class="sh">氏名</td>'
-            + '<td class="sv sf-dep" colspan="10">' + name + '</td>'
-            + '<td class="sv-c" colspan="4">' + kubun + '</td>'
-            + '</tr>'
-            + '<tr>'
-            + '<td class="sh">個人番号</td>'
-            + '<td class="sv" colspan="14">' + myNum + '</td>'
-            + '</tr>';
+          var kana = d ? escHtml(d.name_kana || "") : "";
+          var name = d ? escHtml(d.name || "") : "";
+          var myNum =
+            d && showMyNumber && d.my_number ? escHtml(d.my_number) : "";
+          var kubun = d ? escHtml(d.deduction_type || "") : "";
+          html +=
+            "<tr>" +
+            '<td class="sl" rowspan="3" style="font-size:5.5pt">控除対象<br>扶養親族<br>' +
+            numLabel +
+            "</td>" +
+            '<td class="sh">(フリガナ)</td>' +
+            '<td class="sv" colspan="10">' +
+            kana +
+            "</td>" +
+            '<td class="sh" colspan="4">区分</td>' +
+            "</tr>" +
+            "<tr>" +
+            '<td class="sh">氏名</td>' +
+            '<td class="sv sf-dep" colspan="10">' +
+            name +
+            "</td>" +
+            '<td class="sv-c" colspan="4">' +
+            kubun +
+            "</td>" +
+            "</tr>" +
+            "<tr>" +
+            '<td class="sh">個人番号</td>' +
+            '<td class="sv" colspan="14">' +
+            myNum +
+            "</td>" +
+            "</tr>";
         }
 
         for (var j = 0; j < 2; j++) {
           var d2 = deps0[j] || null;
           var numLabel2 = j + 1;
-          var kana2  = d2 ? escHtml(d2.name_kana || '') : '';
-          var name2  = d2 ? escHtml(d2.name || '') : '';
-          var myNum2 = (d2 && showMyNumber && d2.my_number) ? escHtml(d2.my_number) : '';
-          var kubun2 = d2 ? escHtml(d2.deduction_type || '') : '';
-          html += '<tr>'
-            + '<td class="sl" rowspan="3" style="font-size:5.5pt">16歳未満<br>扶養親族<br>' + numLabel2 + '</td>'
-            + '<td class="sh">(フリガナ)</td>'
-            + '<td class="sv" colspan="10">' + kana2 + '</td>'
-            + '<td class="sh" colspan="4">区分</td>'
-            + '</tr>'
-            + '<tr>'
-            + '<td class="sh">氏名</td>'
-            + '<td class="sv sf-dep" colspan="10">' + name2 + '</td>'
-            + '<td class="sv-c" colspan="4">' + kubun2 + '</td>'
-            + '</tr>'
-            + '<tr>'
-            + '<td class="sh">個人番号</td>'
-            + '<td class="sv" colspan="14">' + myNum2 + '</td>'
-            + '</tr>';
+          var kana2 = d2 ? escHtml(d2.name_kana || "") : "";
+          var name2 = d2 ? escHtml(d2.name || "") : "";
+          var myNum2 =
+            d2 && showMyNumber && d2.my_number ? escHtml(d2.my_number) : "";
+          var kubun2 = d2 ? escHtml(d2.deduction_type || "") : "";
+          html +=
+            "<tr>" +
+            '<td class="sl" rowspan="3" style="font-size:5.5pt">16歳未満<br>扶養親族<br>' +
+            numLabel2 +
+            "</td>" +
+            '<td class="sh">(フリガナ)</td>' +
+            '<td class="sv" colspan="10">' +
+            kana2 +
+            "</td>" +
+            '<td class="sh" colspan="4">区分</td>' +
+            "</tr>" +
+            "<tr>" +
+            '<td class="sh">氏名</td>' +
+            '<td class="sv sf-dep" colspan="10">' +
+            name2 +
+            "</td>" +
+            '<td class="sv-c" colspan="4">' +
+            kubun2 +
+            "</td>" +
+            "</tr>" +
+            "<tr>" +
+            '<td class="sh">個人番号</td>' +
+            '<td class="sv" colspan="14">' +
+            myNum2 +
+            "</td>" +
+            "</tr>";
         }
         return html;
       }
@@ -370,318 +685,361 @@
            Col11-16: secondary area 6cols (5-6% each)
       ==================================================== */
       function buildSlipHTML(slip, taxYear, payer, copyLabel, showMyNumber) {
-        var reiwa  = taxYear - 2018;
-        var empAddr = escHtml(slip.employee_address || '');
-        var myNum   = showMyNumber ? escHtml(slip.my_number || '') : '';
-        var empKana = escHtml(slip.employee_name_kana || '');
-        var empName = escHtml(slip.employee_name || '');
-        var empCode = escHtml(slip.employee_code || '');
+        var reiwa = taxYear - 2018;
+        var empAddr = escHtml(slip.employee_address || "");
+        var myNum = showMyNumber ? escHtml(slip.my_number || "") : "";
+        var empKana = escHtml(slip.employee_name_kana || "");
+        var empName = escHtml(slip.employee_name || "");
+        var empCode = escHtml(slip.employee_code || "");
         var birthStr = toGengou(slip.employee_birth_date);
 
         var deps16 = slip.dependents_over16 || [];
-        var deps0  = slip.dependents_under16 || [];
-        var cntTokutei = deps16.filter(function(d) { return d.deduction_type === '特定扶養'; }).length;
-        var cntRojin   = deps16.filter(function(d) { return d.deduction_type === '老人扶養'; }).length;
-        var cntSonota  = deps16.filter(function(d) { return d.deduction_type === '一般扶養'; }).length;
-        var hasSpouse  = slip.has_spouse_deduction;
-        var spouseIsRojin = slip.spouse_deduction_type === '老人配偶者控除';
+        var deps0 = slip.dependents_under16 || [];
+        var cntTokutei = deps16.filter(function (d) {
+          return d.deduction_type === "特定扶養";
+        }).length;
+        var cntRojin = deps16.filter(function (d) {
+          return d.deduction_type === "老人扶養";
+        }).length;
+        var cntSonota = deps16.filter(function (d) {
+          return d.deduction_type === "一般扶養";
+        }).length;
+        var hasSpouse = slip.has_spouse_deduction;
+        var spouseIsRojin = slip.spouse_deduction_type === "老人配偶者控除";
 
         var depRowsHTML = buildDependentRowsHTML(slip, showMyNumber);
 
-        var spouseIncome = (hasSpouse && slip.spouse_income) ? fmtZ(slip.spouse_income) : '';
-        var spouseKubun  = hasSpouse ? escHtml(slip.spouse_deduction_type || '') : '';
+        var spouseIncome =
+          hasSpouse && slip.spouse_income ? fmtZ(slip.spouse_income) : "";
+        var spouseKubun = hasSpouse
+          ? escHtml(slip.spouse_deduction_type || "")
+          : "";
 
         return [
-'<div class="withholding-slip">',
-'<table class="st">',
-'<colgroup>',
-'  <col style="width:4%"><col style="width:7%">',
-'  <col style="width:6%"><col style="width:6%">',
-'  <col style="width:6%"><col style="width:6%">',
-'  <col style="width:6%"><col style="width:6%">',
-'  <col style="width:6%"><col style="width:6%">',
-'  <col style="width:5%"><col style="width:5%">',
-'  <col style="width:5%"><col style="width:5%">',
-'  <col style="width:5%"><col style="width:6%">',
-'</colgroup>',
-'<tbody>',
+          '<div class="withholding-slip">',
+          '<table class="st">',
+          "<colgroup>",
+          '  <col style="width:4%"><col style="width:7%">',
+          '  <col style="width:6%"><col style="width:6%">',
+          '  <col style="width:6%"><col style="width:6%">',
+          '  <col style="width:6%"><col style="width:6%">',
+          '  <col style="width:6%"><col style="width:6%">',
+          '  <col style="width:5%"><col style="width:5%">',
+          '  <col style="width:5%"><col style="width:5%">',
+          '  <col style="width:5%"><col style="width:6%">',
+          "</colgroup>",
+          "<tbody>",
 
-/* ====== タイトル ====== */
-'<tr><td class="st-title" colspan="16">令和　' + reiwa + '　年分　　給与所得の源泉徴収票</td></tr>',
+          /* ====== タイトル ====== */
+          '<tr><td class="st-title" colspan="16">令和　' +
+            reiwa +
+            "　年分　　給与所得の源泉徴収票</td></tr>",
 
-/* ====== 受給者: 住所 ====== */
-'<tr>',
-'  <td class="sl" rowspan="4">支払<br>を受<br>ける<br>者</td>',
-'  <td class="sh">住所又は居所</td>',
-'  <td class="sv" colspan="8">' + empAddr + '</td>',
-'  <td class="sh" colspan="2">(受給者番号)</td>',
-'  <td class="sv" colspan="4">' + empCode + '</td>',
-'</tr>',
+          /* ====== 受給者: 住所 ====== */
+          "<tr>",
+          '  <td class="sl" rowspan="4">支払<br>を受<br>ける<br>者</td>',
+          '  <td class="sh">住所又は居所</td>',
+          '  <td class="sv" colspan="8">' + empAddr + "</td>",
+          '  <td class="sh" colspan="2">(受給者番号)</td>',
+          '  <td class="sv" colspan="4">' + empCode + "</td>",
+          "</tr>",
 
-/* 個人番号 */
-'<tr>',
-'  <td class="sh">(個人番号)</td>',
-'  <td class="sv" colspan="8">' + myNum + '</td>',
-'  <td class="sh" colspan="2">(役職名)</td>',
-'  <td class="sv" colspan="4"></td>',
-'</tr>',
+          /* 個人番号 */
+          "<tr>",
+          '  <td class="sh">(個人番号)</td>',
+          '  <td class="sv" colspan="8">' + myNum + "</td>",
+          '  <td class="sh" colspan="2">(役職名)</td>',
+          '  <td class="sv" colspan="4"></td>',
+          "</tr>",
 
-/* フリガナ */
-'<tr>',
-'  <td class="sh">(フリガナ)</td>',
-'  <td class="sv" colspan="14">' + empKana + '</td>',
-'</tr>',
+          /* フリガナ */
+          "<tr>",
+          '  <td class="sh">(フリガナ)</td>',
+          '  <td class="sv" colspan="14">' + empKana + "</td>",
+          "</tr>",
 
-/* 氏名 */
-'<tr>',
-'  <td class="sh">氏　　名</td>',
-'  <td class="sv sf-name" colspan="14">' + empName + '</td>',
-'</tr>',
+          /* 氏名 */
+          "<tr>",
+          '  <td class="sh">氏　　名</td>',
+          '  <td class="sv sf-name" colspan="14">' + empName + "</td>",
+          "</tr>",
 
-/* ====== 金額ヘッダー1 ====== */
-'<tr>',
-'  <td class="sh" colspan="2">種　　　　別</td>',
-'  <td class="sh" colspan="3">支　払　金　額</td>',
-'  <td class="sh" colspan="4">給与所得控除後の金額<br>(調整控除後)</td>',
-'  <td class="sh" colspan="4">所得控除の額の合計額</td>',
-'  <td class="sh" colspan="3">源　泉　徴　収　税　額</td>',
-'</tr>',
+          /* ====== 金額ヘッダー1 ====== */
+          "<tr>",
+          '  <td class="sh" colspan="2">種　　　　別</td>',
+          '  <td class="sh" colspan="3">支　払　金　額</td>',
+          '  <td class="sh" colspan="4">給与所得控除後の金額<br>(調整控除後)</td>',
+          '  <td class="sh" colspan="4">所得控除の額の合計額</td>',
+          '  <td class="sh" colspan="3">源　泉　徴　収　税　額</td>',
+          "</tr>",
 
-/* 金額ヘッダー2 */
-'<tr>',
-'  <td class="sh" colspan="2">給料・賞与</td>',
-'  <td class="sh-s">内</td>',
-'  <td class="sh-r" colspan="2">円</td>',
-'  <td class="sh-r" colspan="4">円</td>',
-'  <td class="sh-r" colspan="4">円</td>',
-'  <td class="sh-s">内</td>',
-'  <td class="sh-r" colspan="2">円</td>',
-'</tr>',
+          /* 金額ヘッダー2 */
+          "<tr>",
+          '  <td class="sh" colspan="2">給料・賞与</td>',
+          '  <td class="sh-s">内</td>',
+          '  <td class="sh-r" colspan="2">円</td>',
+          '  <td class="sh-r" colspan="4">円</td>',
+          '  <td class="sh-r" colspan="4">円</td>',
+          '  <td class="sh-s">内</td>',
+          '  <td class="sh-r" colspan="2">円</td>',
+          "</tr>",
 
-/* 金額値 */
-'<tr>',
-'  <td class="sv" colspan="2"></td>',
-'  <td class="sv-s"></td>',
-'  <td class="sv-r" colspan="2">' + fmt(slip.total_payment_excl_commute) + '</td>',
-'  <td class="sv-r" colspan="4">' + fmt(slip.kyuyo_shotoku) + '</td>',
-'  <td class="sv-r" colspan="4">' + fmt(slip.total_deduction_amount) + '</td>',
-'  <td class="sv-s"></td>',
-'  <td class="sv-r" colspan="2">' + fmt(slip.income_tax_withheld) + '</td>',
-'</tr>',
+          /* 金額値 */
+          "<tr>",
+          '  <td class="sv" colspan="2"></td>',
+          '  <td class="sv-s"></td>',
+          '  <td class="sv-r" colspan="2">' +
+            fmt(slip.total_payment_excl_commute) +
+            "</td>",
+          '  <td class="sv-r" colspan="4">' + fmt(slip.kyuyo_shotoku) + "</td>",
+          '  <td class="sv-r" colspan="4">' +
+            fmt(slip.total_deduction_amount) +
+            "</td>",
+          '  <td class="sv-s"></td>',
+          '  <td class="sv-r" colspan="2">' +
+            fmt(slip.income_tax_withheld) +
+            "</td>",
+          "</tr>",
 
-/* ====== 控除概要ヘッダー1 ====== */
-'<tr>',
-'  <td class="sh" colspan="2">(源泉)控除対象配偶者<br>の有無等</td>',
-'  <td class="sh" colspan="2">配偶者(特別)<br>控除の額</td>',
-'  <td class="sh" colspan="4">控除対象扶養親族の数<br>(配偶者を除く。)</td>',
-'  <td class="sh" colspan="2">16歳未満<br>扶養親族の数</td>',
-'  <td class="sh" colspan="3">障害者の数<br>(本人を除く。)</td>',
-'  <td class="sh" colspan="3">非居住者<br>である<br>親族の数</td>',
-'</tr>',
+          /* ====== 控除概要ヘッダー1 ====== */
+          "<tr>",
+          '  <td class="sh" colspan="2">(源泉)控除対象配偶者<br>の有無等</td>',
+          '  <td class="sh" colspan="2">配偶者(特別)<br>控除の額</td>',
+          '  <td class="sh" colspan="4">控除対象扶養親族の数<br>(配偶者を除く。)</td>',
+          '  <td class="sh" colspan="2">16歳未満<br>扶養親族の数</td>',
+          '  <td class="sh" colspan="3">障害者の数<br>(本人を除く。)</td>',
+          '  <td class="sh" colspan="3">非居住者<br>である<br>親族の数</td>',
+          "</tr>",
 
-/* 控除概要ヘッダー2 */
-'<tr>',
-'  <td class="sh">有</td>',
-'  <td class="sh-s">老人</td>',
-'  <td class="sh-r" colspan="2">円</td>',
-'  <td class="sh">特　定</td>',
-'  <td class="sh">老　人</td>',
-'  <td class="sh">その他</td>',
-'  <td class="sh">特　親</td>',
-'  <td class="sh" colspan="2">人</td>',
-'  <td class="sh">特　別</td>',
-'  <td class="sh" colspan="2">その他</td>',
-'  <td class="sh" colspan="3">人</td>',
-'</tr>',
+          /* 控除概要ヘッダー2 */
+          "<tr>",
+          '  <td class="sh">有</td>',
+          '  <td class="sh-s">老人</td>',
+          '  <td class="sh-r" colspan="2">円</td>',
+          '  <td class="sh">特　定</td>',
+          '  <td class="sh">老　人</td>',
+          '  <td class="sh">その他</td>',
+          '  <td class="sh">特　親</td>',
+          '  <td class="sh" colspan="2">人</td>',
+          '  <td class="sh">特　別</td>',
+          '  <td class="sh" colspan="2">その他</td>',
+          '  <td class="sh" colspan="3">人</td>',
+          "</tr>",
 
-/* 控除概要値 */
-'<tr>',
-'  <td class="sv-c">' + (hasSpouse ? '有' : '') + '</td>',
-'  <td class="sv-c">' + (spouseIsRojin ? '○' : '') + '</td>',
-'  <td class="sv-r" colspan="2">' + (hasSpouse ? fmtZ(slip.spouse_deduction_amount) : '') + '</td>',
-'  <td class="sv-c">' + (cntTokutei > 0 ? cntTokutei : '') + '</td>',
-'  <td class="sv-c">' + (cntRojin   > 0 ? cntRojin   : '') + '</td>',
-'  <td class="sv-c">' + (cntSonota  > 0 ? cntSonota  : '') + '</td>',
-'  <td class="sv-c"></td>',
-'  <td class="sv-c" colspan="2">' + (deps0.length > 0 ? deps0.length : '') + '</td>',
-'  <td class="sv-c"></td>',
-'  <td class="sv-c" colspan="2"></td>',
-'  <td class="sv-c" colspan="3"></td>',
-'</tr>',
+          /* 控除概要値 */
+          "<tr>",
+          '  <td class="sv-c">' + (hasSpouse ? "有" : "") + "</td>",
+          '  <td class="sv-c">' + (spouseIsRojin ? "○" : "") + "</td>",
+          '  <td class="sv-r" colspan="2">' +
+            (hasSpouse ? fmtZ(slip.spouse_deduction_amount) : "") +
+            "</td>",
+          '  <td class="sv-c">' + (cntTokutei > 0 ? cntTokutei : "") + "</td>",
+          '  <td class="sv-c">' + (cntRojin > 0 ? cntRojin : "") + "</td>",
+          '  <td class="sv-c">' + (cntSonota > 0 ? cntSonota : "") + "</td>",
+          '  <td class="sv-c"></td>',
+          '  <td class="sv-c" colspan="2">' +
+            (deps0.length > 0 ? deps0.length : "") +
+            "</td>",
+          '  <td class="sv-c"></td>',
+          '  <td class="sv-c" colspan="2"></td>',
+          '  <td class="sv-c" colspan="3"></td>',
+          "</tr>",
 
-/* ====== その他控除 ====== */
-'<tr>',
-'  <td class="sh" colspan="2">特定親族特別控除の額</td>',
-'  <td class="sh" colspan="3">社 会 保 険 料 等 の 金 額</td>',
-'  <td class="sh" colspan="3">生命保険料の控除額</td>',
-'  <td class="sh" colspan="4">地震保険料の控除額</td>',
-'  <td class="sh" colspan="4">住宅借入金等特別控除の額</td>',
-'</tr>',
-'<tr>',
-'  <td class="sv-r" colspan="2"></td>',
-'  <td class="sh-s">内</td>',
-'  <td class="sv-r" colspan="2">' + fmt(slip.social_insurance_total) + '</td>',
-'  <td class="sv-r" colspan="3"></td>',
-'  <td class="sv-r" colspan="4"></td>',
-'  <td class="sv-r" colspan="4"></td>',
-'</tr>',
+          /* ====== その他控除 ====== */
+          "<tr>",
+          '  <td class="sh" colspan="2">特定親族特別控除の額</td>',
+          '  <td class="sh" colspan="3">社 会 保 険 料 等 の 金 額</td>',
+          '  <td class="sh" colspan="3">生命保険料の控除額</td>',
+          '  <td class="sh" colspan="4">地震保険料の控除額</td>',
+          '  <td class="sh" colspan="4">住宅借入金等特別控除の額</td>',
+          "</tr>",
+          "<tr>",
+          '  <td class="sv-r" colspan="2"></td>',
+          '  <td class="sh-s">内</td>',
+          '  <td class="sv-r" colspan="2">' +
+            fmt(slip.social_insurance_total) +
+            "</td>",
+          '  <td class="sv-r" colspan="3"></td>',
+          '  <td class="sv-r" colspan="4"></td>',
+          '  <td class="sv-r" colspan="4"></td>',
+          "</tr>",
 
-/* ====== 摘要 ====== */
-'<tr>',
-'  <td class="sh" colspan="2">(摘　　要)</td>',
-'  <td class="sv remarks-cell" colspan="14">' + escHtml(slip.remarks || '') + '</td>',
-'</tr>',
+          /* ====== 摘要 ====== */
+          "<tr>",
+          '  <td class="sh" colspan="2">(摘　　要)</td>',
+          '  <td class="sv remarks-cell" colspan="14">' +
+            escHtml(slip.remarks || "") +
+            "</td>",
+          "</tr>",
 
-/* ====== 生命保険料内訳 ====== */
-'<tr>',
-'  <td class="sl" rowspan="2" style="font-size:5.5pt">生命保険料の金額の内訳</td>',
-'  <td class="sh" colspan="2">新生命保険料の金額</td>',
-'  <td class="sh-r">円</td>',
-'  <td class="sh" colspan="2">旧生命保険料の金額</td>',
-'  <td class="sh-r">円</td>',
-'  <td class="sh" colspan="2">介護医療保険料の金額</td>',
-'  <td class="sh-r">円</td>',
-'  <td class="sh" colspan="2">新個人年金保険料の金額</td>',
-'  <td class="sh-r">円</td>',
-'  <td class="sh" colspan="2">旧個人年金保険料の金額</td>',
-'  <td class="sh-r">円</td>',
-'</tr>',
-'<tr>',
-'  <td class="sv-r" colspan="3"></td>',
-'  <td class="sv-r" colspan="3"></td>',
-'  <td class="sv-r" colspan="3"></td>',
-'  <td class="sv-r" colspan="3"></td>',
-'  <td class="sv-r" colspan="3"></td>',
-'</tr>',
+          /* ====== 生命保険料内訳 ====== */
+          "<tr>",
+          '  <td class="sl" rowspan="2" style="font-size:5.5pt">生命保険料の金額の内訳</td>',
+          '  <td class="sh" colspan="2">新生命保険料の金額</td>',
+          '  <td class="sh-r">円</td>',
+          '  <td class="sh" colspan="2">旧生命保険料の金額</td>',
+          '  <td class="sh-r">円</td>',
+          '  <td class="sh" colspan="2">介護医療保険料の金額</td>',
+          '  <td class="sh-r">円</td>',
+          '  <td class="sh" colspan="2">新個人年金保険料の金額</td>',
+          '  <td class="sh-r">円</td>',
+          '  <td class="sh" colspan="2">旧個人年金保険料の金額</td>',
+          '  <td class="sh-r">円</td>',
+          "</tr>",
+          "<tr>",
+          '  <td class="sv-r" colspan="3"></td>',
+          '  <td class="sv-r" colspan="3"></td>',
+          '  <td class="sv-r" colspan="3"></td>',
+          '  <td class="sv-r" colspan="3"></td>',
+          '  <td class="sv-r" colspan="3"></td>',
+          "</tr>",
 
-/* ====== 住宅借入金特別控除内訳 ====== */
-'<tr>',
-'  <td class="sl" rowspan="4" style="font-size:5.5pt">住宅借入金等特別控除の額の内訳</td>',
-'  <td class="sh" rowspan="4" style="font-size:5.5pt">適<br>用<br>数</td>',
-'  <td class="sh" colspan="3">居住開始年月日(1回目)</td>',
-'  <td class="sh" rowspan="2" colspan="3">住宅借入金等<br>特別控除区分(1回目)</td>',
-'  <td class="sh" rowspan="2" colspan="4">住宅借入金等<br>年末残高(1回目)</td>',
-'  <td class="sh-r" rowspan="2" colspan="3">円</td>',
-'</tr>',
-'<tr>',
-'  <td class="sv"></td><td class="sh-s">年</td><td class="sh-s">月</td><td class="sh-s">日</td>',
-'</tr>',
-'<tr>',
-'  <td class="sh" colspan="3">居住開始年月日(2回目)</td>',
-'  <td class="sh" rowspan="2" colspan="3">住宅借入金等<br>特別控除区分(2回目)</td>',
-'  <td class="sh" rowspan="2" colspan="4">住宅借入金等<br>年末残高(2回目)</td>',
-'  <td class="sh-r" rowspan="2" colspan="3">円</td>',
-'</tr>',
-'<tr>',
-'  <td class="sv"></td><td class="sh-s">年</td><td class="sh-s">月</td><td class="sh-s">日</td>',
-'</tr>',
+          /* ====== 住宅借入金特別控除内訳 ====== */
+          "<tr>",
+          '  <td class="sl" rowspan="4" style="font-size:5.5pt">住宅借入金等特別控除の額の内訳</td>',
+          '  <td class="sh" rowspan="4" style="font-size:5.5pt">適<br>用<br>数</td>',
+          '  <td class="sh" colspan="3">居住開始年月日(1回目)</td>',
+          '  <td class="sh" rowspan="2" colspan="3">住宅借入金等<br>特別控除区分(1回目)</td>',
+          '  <td class="sh" rowspan="2" colspan="4">住宅借入金等<br>年末残高(1回目)</td>',
+          '  <td class="sh-r" rowspan="2" colspan="3">円</td>',
+          "</tr>",
+          "<tr>",
+          '  <td class="sv"></td><td class="sh-s">年</td><td class="sh-s">月</td><td class="sh-s">日</td>',
+          "</tr>",
+          "<tr>",
+          '  <td class="sh" colspan="3">居住開始年月日(2回目)</td>',
+          '  <td class="sh" rowspan="2" colspan="3">住宅借入金等<br>特別控除区分(2回目)</td>',
+          '  <td class="sh" rowspan="2" colspan="4">住宅借入金等<br>年末残高(2回目)</td>',
+          '  <td class="sh-r" rowspan="2" colspan="3">円</td>',
+          "</tr>",
+          "<tr>",
+          '  <td class="sv"></td><td class="sh-s">年</td><td class="sh-s">月</td><td class="sh-s">日</td>',
+          "</tr>",
 
-/* ====== 配偶者詳細 ====== */
-'<tr>',
-'  <td class="sl" rowspan="3" style="font-size:5.5pt">(源泉・特別)<br>控除対象<br>配偶者</td>',
-'  <td class="sh">(フリガナ)</td>',
-'  <td class="sv" colspan="4">' + escHtml(slip.spouse_name_kana || '') + '</td>',
-'  <td class="sh">区分</td>',
-'  <td class="sh" colspan="2">配偶者の合計所得</td>',
-'  <td class="sh-r">円</td>',
-'  <td class="sh" colspan="2">国民年金保険料等の金額</td>',
-'  <td class="sh-r">円</td>',
-'  <td class="sh" colspan="2">旧長期損害保険料の金額</td>',
-'  <td class="sh-r">円</td>',
-'</tr>',
-'<tr>',
-'  <td class="sh">氏名</td>',
-'  <td class="sv sf-dep" colspan="4">' + escHtml(slip.spouse_name || '') + '</td>',
-'  <td class="sv-c">' + spouseKubun + '</td>',
-'  <td class="sv-r" colspan="3">' + spouseIncome + '</td>',
-'  <td class="sv-r" colspan="3"></td>',
-'  <td class="sv-r" colspan="3"></td>',
-'</tr>',
-'<tr>',
-'  <td class="sh">個人番号</td>',
-'  <td class="sv" colspan="4"></td>',
-'  <td class="sh">基礎控除の額</td>',
-'  <td class="sv-r" colspan="2">' + fmt(slip.basic_deduction) + '</td>',
-'  <td class="sh-r">円</td>',
-'  <td class="sh" colspan="2">所得金額調整控除額</td>',
-'  <td class="sv-r" colspan="2"></td>',
-'  <td class="sh-r">円</td>',
-'  <td class="sv"></td>',
-'</tr>',
+          /* ====== 配偶者詳細 ====== */
+          "<tr>",
+          '  <td class="sl" rowspan="3" style="font-size:5.5pt">(源泉・特別)<br>控除対象<br>配偶者</td>',
+          '  <td class="sh">(フリガナ)</td>',
+          '  <td class="sv" colspan="4">' +
+            escHtml(slip.spouse_name_kana || "") +
+            "</td>",
+          '  <td class="sh">区分</td>',
+          '  <td class="sh" colspan="2">配偶者の合計所得</td>',
+          '  <td class="sh-r">円</td>',
+          '  <td class="sh" colspan="2">国民年金保険料等の金額</td>',
+          '  <td class="sh-r">円</td>',
+          '  <td class="sh" colspan="2">旧長期損害保険料の金額</td>',
+          '  <td class="sh-r">円</td>',
+          "</tr>",
+          "<tr>",
+          '  <td class="sh">氏名</td>',
+          '  <td class="sv sf-dep" colspan="4">' +
+            escHtml(slip.spouse_name || "") +
+            "</td>",
+          '  <td class="sv-c">' + spouseKubun + "</td>",
+          '  <td class="sv-r" colspan="3">' + spouseIncome + "</td>",
+          '  <td class="sv-r" colspan="3"></td>',
+          '  <td class="sv-r" colspan="3"></td>',
+          "</tr>",
+          "<tr>",
+          '  <td class="sh">個人番号</td>',
+          '  <td class="sv" colspan="4"></td>',
+          '  <td class="sh">基礎控除の額</td>',
+          '  <td class="sv-r" colspan="2">' +
+            fmt(slip.basic_deduction) +
+            "</td>",
+          '  <td class="sh-r">円</td>',
+          '  <td class="sh" colspan="2">所得金額調整控除額</td>',
+          '  <td class="sv-r" colspan="2"></td>',
+          '  <td class="sh-r">円</td>',
+          '  <td class="sv"></td>',
+          "</tr>",
 
-/* ====== 扶養親族詳細 ====== */
-depRowsHTML,
+          /* ====== 扶養親族詳細 ====== */
+          depRowsHTML,
 
-/* ====== 各種フラグ・生年月日 ====== */
-'<tr>',
-'  <td class="sh" colspan="2">未成年者</td>',
-'  <td class="sh">外国人</td>',
-'  <td class="sh">死亡退職</td>',
-'  <td class="sh">災害者</td>',
-'  <td class="sh">乙欄</td>',
-'  <td class="sh" colspan="2">本人が障害者</td>',
-'  <td class="sh">寡婦</td>',
-'  <td class="sh">ひとり親</td>',
-'  <td class="sh">勤労学生</td>',
-'  <td class="sh" colspan="2">中途就・退職</td>',
-'  <td class="sh" colspan="3">受給者生年月日</td>',
-'</tr>',
-'<tr>',
-'  <td class="sv-c" colspan="2"></td>',
-'  <td class="sv-c"></td>',
-'  <td class="sv-c"></td>',
-'  <td class="sv-c"></td>',
-'  <td class="sv-c"></td>',
-'  <td class="sh-s">特別</td>',
-'  <td class="sh-s">その他</td>',
-'  <td class="sv-c"></td>',
-'  <td class="sv-c"></td>',
-'  <td class="sv-c"></td>',
-'  <td class="sh-s">就職</td>',
-'  <td class="sh-s">退職</td>',
-'  <td class="sh" colspan="3">元号　年　月　日</td>',
-'</tr>',
-'<tr>',
-'  <td class="sv-c" colspan="2"></td>',
-'  <td class="sv-c"></td>',
-'  <td class="sv-c"></td>',
-'  <td class="sv-c"></td>',
-'  <td class="sv-c"></td>',
-'  <td class="sv-c"></td>',
-'  <td class="sv-c"></td>',
-'  <td class="sv-c"></td>',
-'  <td class="sv-c"></td>',
-'  <td class="sv-c"></td>',
-'  <td class="sv-c"></td>',
-'  <td class="sv-c"></td>',
-'  <td class="sv" colspan="3">' + escHtml(birthStr) + '</td>',
-'</tr>',
+          /* ====== 各種フラグ・生年月日 ====== */
+          "<tr>",
+          '  <td class="sh" colspan="2">未成年者</td>',
+          '  <td class="sh">外国人</td>',
+          '  <td class="sh">死亡退職</td>',
+          '  <td class="sh">災害者</td>',
+          '  <td class="sh">乙欄</td>',
+          '  <td class="sh" colspan="2">本人が障害者</td>',
+          '  <td class="sh">寡婦</td>',
+          '  <td class="sh">ひとり親</td>',
+          '  <td class="sh">勤労学生</td>',
+          '  <td class="sh" colspan="2">中途就・退職</td>',
+          '  <td class="sh" colspan="3">受給者生年月日</td>',
+          "</tr>",
+          "<tr>",
+          '  <td class="sv-c" colspan="2"></td>',
+          '  <td class="sv-c"></td>',
+          '  <td class="sv-c"></td>',
+          '  <td class="sv-c"></td>',
+          '  <td class="sv-c"></td>',
+          '  <td class="sh-s">特別</td>',
+          '  <td class="sh-s">その他</td>',
+          '  <td class="sv-c"></td>',
+          '  <td class="sv-c"></td>',
+          '  <td class="sv-c"></td>',
+          '  <td class="sh-s">就職</td>',
+          '  <td class="sh-s">退職</td>',
+          '  <td class="sh" colspan="3">元号　年　月　日</td>',
+          "</tr>",
+          "<tr>",
+          '  <td class="sv-c" colspan="2"></td>',
+          '  <td class="sv-c"></td>',
+          '  <td class="sv-c"></td>',
+          '  <td class="sv-c"></td>',
+          '  <td class="sv-c"></td>',
+          '  <td class="sv-c"></td>',
+          '  <td class="sv-c"></td>',
+          '  <td class="sv-c"></td>',
+          '  <td class="sv-c"></td>',
+          '  <td class="sv-c"></td>',
+          '  <td class="sv-c"></td>',
+          '  <td class="sv-c"></td>',
+          '  <td class="sv" colspan="3">' + escHtml(birthStr) + "</td>",
+          "</tr>",
 
-/* ====== コピーラベル ====== */
-'<tr><td class="copy-label-cell" colspan="16">（' + copyLabel + '）</td></tr>',
+          /* ====== コピーラベル ====== */
+          '<tr><td class="copy-label-cell" colspan="16">（' +
+            copyLabel +
+            "）</td></tr>",
 
-/* ====== 支払者情報 ====== */
-'<tr>',
-'  <td class="sl" rowspan="3">支払者</td>',
-'  <td class="sh" colspan="2">個人番号又は法人番号</td>',
-'  <td class="sv-payer" colspan="13">' + escHtml(payer.companyMyNumber || '') + '</td>',
-'</tr>',
-'<tr>',
-'  <td class="sh" colspan="2">住所(居所)又は所在地</td>',
-'  <td class="sv-payer" colspan="13">' + escHtml(payer.companyAddress || '') + '</td>',
-'</tr>',
-'<tr>',
-'  <td class="sh" colspan="2">氏名又は名称</td>',
-'  <td class="sv-payer" colspan="9">' + escHtml(payer.companyName || '') + '</td>',
-'  <td class="sh">(電話)</td>',
-'  <td class="sv-payer" colspan="3">' + escHtml(payer.companyPhone || '') + '</td>',
-'</tr>',
+          /* ====== 支払者情報 ====== */
+          "<tr>",
+          '  <td class="sl" rowspan="3">支払者</td>',
+          '  <td class="sh" colspan="2">個人番号又は法人番号</td>',
+          '  <td class="sv-payer" colspan="13">' +
+            escHtml(payer.companyMyNumber || "") +
+            "</td>",
+          "</tr>",
+          "<tr>",
+          '  <td class="sh" colspan="2">住所(居所)又は所在地</td>',
+          '  <td class="sv-payer" colspan="13">' +
+            escHtml(payer.companyAddress || "") +
+            "</td>",
+          "</tr>",
+          "<tr>",
+          '  <td class="sh" colspan="2">氏名又は名称</td>',
+          '  <td class="sv-payer" colspan="9">' +
+            escHtml(payer.companyName || "") +
+            "</td>",
+          '  <td class="sh">(電話)</td>',
+          '  <td class="sv-payer" colspan="3">' +
+            escHtml(payer.companyPhone || "") +
+            "</td>",
+          "</tr>",
 
-'</tbody></table></div>'
-        ].join('\n');
+          "</tbody></table></div>",
+        ].join("\n");
       }
 
-      function printSlips() { window.print(); }
+      function printSlips() {
+        window.print();
+      }
 
       initYearSelect();
       loadEmployees();