、実効900）と字号・字重を揃える */
}
.invoice.template-4 #i_metaBox br {
display: none;
}
/* お支払い期限は原稿PDFに項目が無いため出さない */
.invoice.template-4 #i_dueLine {
display: none;
}
.invoice.template-4 #i_logoBox {
text-align: left;
/* #i_logoBox はHTML側に style="margin-bottom:3px" が直接書かれており、
インラインstyleはクラスのCSSより優先されるため !important で上書きする。
画像ファイル自体に含まれる余白の分もここで一緒に詰めている。 */
margin: 0 0 -5px !important;
}
.invoice.template-4 #i_logoBox img {
width: auto;
max-width: 55%;
}
.invoice.template-4 .stamp {
width: 1.7cm;
height: 1.7cm;
}
/* ご請求金額ボックス：淡い塗り + 太枠なしのカード形。ラベルは小さく、金額は大きく強調。 */
.invoice.template-4 .amount-box {
display: flex;
justify-content: space-between;
align-items: baseline;
background: #eef2f6;
border: 1.5px solid #1e3a8a;
border-radius: 4px;
padding: 9px 22px;
margin: 4px 0 14px;
}
.invoice.template-4 #i_amountLabel {
font-size: 13px;
font-weight: 500;
color: #1e293b;
}
.invoice.template-4 #i_displayTotal {
font-size: 22px;
font-weight: 700;
color: #0f172a;
margin-left: 16px;
font-variant-numeric: tabular-nums;
}
/* 合計欄の各行：既定の padding だと文字が下の罫線に詰まって見えるため、上下に少し余裕を持たせる。 */
.invoice.template-4 .summary-table td {
padding: 4px 4px;
line-height: 1.4;
}
/* 明細表（品名・内容／税区分／数量／金額（円）の固定4列。単価列は持たない）。
ヘッダーは濃紺塗り＋白文字、行は縞模様（zebra）にして原稿PDFの見た目に合わせる。 */
数量（3列目）は「12,345本」（5桁＋3桁区切り＋単位）が1行に収まる幅を確保し、
増やした分は品名・内容（1列目）から回す。 */
.invoice-items-table.template4-cols th:nth-child(1),
.invoice-items-table.template4-cols td:nth-child(1) { width: 35%; text-align: left; }
.invoice-items-table.template4-cols th:nth-child(2),
.invoice-items-table.template4-cols td:nth-child(2) { width: 12%; text-align: center; }
.invoice-items-table.template4-cols th:nth-child(3),
.invoice-items-table.template4-cols td:nth-child(3) { width: 13%; text-align: center; }
.invoice-items-table.template4-cols th:nth-child(4),
.invoice-items-table.template4-cols td:nth-child(4) {
width: 20%;
text-align: end;
font-variant-numeric: tabular-nums;
}
.invoice-items-table.template4-cols th:nth-child(5),
.invoice-items-table.template4-cols td:nth-child(5) {
width: 20%;
text-align: end;
font-variant-numeric: tabular-nums;
}
.invoice-items-table.template4-cols thead th {
background: #1e293b;
color: #fff;
border: none;
font-weight: 600;
font-size: 13px;
}
/* border-collapse の縦線（列と列の境目）が環境によって見えてしまうことがあるため、
明細セルの左右・上の枠を明示的に消しておく（下線だけ .invoice-items-table tbody td の
border-bottom を引き継ぐ）。 */
.invoice-items-table.template4-cols tbody td {
border-left: none;
border-right: none;
border-top: none;
}
.invoice-items-table.template4-cols tbody tr:nth-child(even) {
background: #f8fafc;
}
/* 合計欄：左の税率別内訳表は使わず、右側1本の縦積みに一本化する
（小計行は非表示・税率別内訳と前金控除は createInvoice() が動的に挿入し、
最終行を「今回ご請求額」として強調表示する）。原稿PDFと同じくページ右側へ寄せる。 */
.invoice.template-4 .tax-breakdown-container {
display: none;
}
.invoice.template-4 .right-summary-container {
width: 58%;
min-width: 260px;
margin-left: auto;
/* 右端は明細テーブルの右端（金額列）にきっちり揃える（食い込ませると列がずれるため）。 */
}
.invoice.template-4 .summary-table tr:last-child td {
border-top: 1px solid #94a3b8;
padding-top: 12px;
}
/* 振込先・備考：原稿PDFに合わせて左右2カラムにする。
備考側は見出し（「備考」の文字・枠）を出さず、本文だけを右カラムに流し込む。 */
/* セクション間の余白を詰めて全体をコンパクトにする（既定の24pxだと間延びして見えるため）。 */
.invoice.template-4 hr {
margin: 12px 0;
}
/* ヘッダー（会社情報等）と「下記のとおり～」の間、および合計欄と振込先の間の区切り線は
原稿PDFに無いので消す（余白は詰めるだけにする）。 */
.invoice.template-4 > .header + hr,
.invoice.template-4 .summary-wrapper + hr {
display: none;
}
.invoice.template-4 .summary-wrapper {
margin-top: 8px;
}
.invoice.template-4 #bankSection {
display: inline-block;
vertical-align: top;
width: 38%;
box-sizing: border-box;
margin-right: 4%;
}
.invoice.template-4 #remarkSection {
display: inline-block;
vertical-align: top;
width: 58%;
box-sizing: border-box;
}
.invoice.template-4 #remarkSection br:first-child {
display: none;
}
.invoice.template-4 #remarkSection strong {
display: none;
}
.invoice.template-4 #i_remark {
border: none;
background: transparent;
padding: 0;
margin: 10px 0 20px;
min-height: 0;
font-size: 12px;
}
/* 振込先ボックス：破線ではなく実線にして「枠付きボックス」に近づける */
.invoice.template-4 #i_bank {
border-style: solid;
background: #f8fafc;
/* 「今回ご請求額」ボックスと角の丸みを揃える（外形を一致させる） */
border-radius: 4px;
}
/* ===== 印刷：隐藏 UI。主体继承画面上的类（template-1 の .invoice.template-1 在印刷时同样生效）===== */
@media print {
body {
background: white;
}
.sidebar {
display: none;
}
.history-panel {
display: none !important;
}
.main-content {
margin: 0 !important;
padding: 0;
min-height: 0;
overflow: visible;
background: white;
}
/* カードや入力UI・ボタンをすべて非表示 */
.card {
display: none;
}
button {
display: none;
}
#invoice-section > div:not(.invoice),
#delivery-section > div:not(.invoice) {
display: none;
}
/* 印刷対象でないプレビューを非表示 */
.invoice:not(.print-active) {
display: none;
}
/* 印刷対象プレビューのみ表示 */
.invoice.print-active {
position: static;
width: 100%;
padding: 0;
overflow: visible;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.invoice.print-active .invoice-item {
page-break-inside: avoid;
}
.invoice-items-table thead {
display: table-header-group;
}
.page-break-before {
display: block;
height: 0;
margin: 0;
}
/* ===== 履歴PDF印刷：全要素を visibility:hidden で完全隔離 → 請求書のみ visible に ===== */
body.printing-history * {
visibility: hidden !important;
}
body.printing-history #hp-invoice.print-active {
visibility: visible !important;
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
box-shadow: none !important;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
body.printing-history #hp-invoice.print-active * {
visibility: visible !important;
}
}
#i_myCompany,
#d_myCompany {
font-size: 18px;
font-weight: 600;
}
#subTotal,
#taxTotal,
#grandTotal,
#displayTotal {
font-weight: 700;
color: #0f172a;
}
#toast {
position: fixed;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
background: #2563eb;
color: #fff;
padding: 10px 24px;
border-radius: 24px;
font-size: 14px;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s;
z-index: 9999;
}
#toast.show {
opacity: 1;
}
/* ===== 個別保存ボタン ===== */
/* 入力＋保存ボタンを縦に並べるグループ（振込先・備考） */
.field-group {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
/* 保存済み一覧のドロップダウンをテキストエリア直下に出すための位置合わせ用ラッパー。
.form-row（行全体、保存ボタンまで含む）を基準にすると、ドロップダウンが保存ボタンの
さらに下まで押し下げられてしまう。テキストエリアだけを囲んで基準にすることで、
入力欄のすぐ下から出て（保存ボタンにかぶさって）表示されるようにする。 */
.field-input-wrap {
position: relative;
}
.field-group textarea {
display: block; /* 既定はinline-block相当のため、.field-input-wrapの下に
ベースライン分の余白（数px）ができ、ドロップダウンの開始位置が
テキストエリアの下端とわずかにズレる。block化して余白を無くす。 */
width: 100%;
min-height: 120px; /* 既定でやや高め。内容に応じてJSで自動拡張 */
overflow: hidden;
resize: none;
/* 共通の「input,select,textarea { flex:1 }」がここにも効くと flex:1 1 0% となり、
親(.field-group)が縦方向flexのため高さがflex側で決定され、
autoGrowTextarea() が設定する height が無視されてしまう
（overflow:hidden・resize:none と相まって、長文が一切見えなくなる）。
flexから外して height 指定を有効にする。 */
flex: none;
}
.field-actions {
display: flex;
justify-content: flex-end;
}
/* 振込先カード：外側ラベルを詰めて、入力グループを左に寄せ幅を広げる */
.bank-card .form-row > label {
width: 56px;
}
/* 振込先の4項目（銀行名・支店名・口座番号・口座名義） */
.bank-fields {
display: flex;
flex-direction: column;
gap: 10px;
min-width: 0;
padding-top: 22px; /* ラベルより下げて「グループ内容」感を出す */
}
.bank-field-line {
display: grid;
grid-template-columns: 64px minmax(0, 1fr);
align-items: center;
gap: 8px;
}
.bank-field-line > span {
font-size: 12px;
font-weight: 600;
color: #475569;
text-align: right;
}
.bank-field-line > input {
width: 100%;
}
button.field-save-btn {
background: #217346;
border-radius: 6px;
width: 52px;
height: 52px;
min-width: 52px;
padding: 0;
font-size: 12px;
font-weight: 700;
flex-shrink: 0;
align-self: flex-start;
box-shadow: 0 2px 6px rgba(33,115,70,0.25);
margin: 0;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1.2;
text-align: center;
}
.bank-card button.field-save-btn svg {
width: 30px;
height: 30px;
}
button.field-save-btn:hover {
background: #185c38;
box-shadow: 0 3px 10px rgba(33,115,70,0.35);
}
button.item-save-icon-btn {
width: 30px;
height: 30px;
}
button.field-save-btn.item-save-icon-btn {
width: 30px;
min-width: 30px;
max-width: 30px;
height: 30px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
button.item-save-icon-btn svg {
width: 19px;
height: 19px;
}
/* ===== 履歴モーダル ===== */
.reki-modal {
width: min(480px, 92vw);
}
.reki-steps {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 16px;
flex-wrap: wrap;
}
.reki-step {
padding: 5px 14px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
background: #e2e8f0;
color: #94a3b8;
transition: background 0.2s, color 0.2s;
}
.reki-step.active {
background: #2563eb;
color: #fff;
}
.reki-step.done {
background: #10b981;
color: #fff;
}
.reki-step-arrow {
color: #cbd5e1;
font-size: 18px;
line-height: 1;
}
.reki-step-content {
max-height: 280px;
overflow-y: auto;
margin-bottom: 8px;
}
.reki-item {
padding: 12px 14px;
border: 1px solid #e2e8f0;
border-radius: 10px;
cursor: pointer;
margin-bottom: 8px;
transition: background 0.15s, border-color 0.15s;
}
.reki-item:hover {
background: #eff6ff;
border-color: #2563eb;
}
.reki-item-title {
font-weight: 600;
color: #0f172a;
font-size: 14px;
}
.reki-item-detail {
font-size: 12px;
color: #64748b;
margin-top: 3px;
}
.reki-empty {
color: #94a3b8;
font-size: 14px;
padding: 24px;
text-align: center;
}
button.reki-delete-btn {
background: none;
border: none;
color: #94a3b8;
font-size: 15px;
font-weight: 700;
cursor: pointer;
padding: 2px 7px;
border-radius: 4px;
flex-shrink: 0;
margin: 0;
box-shadow: none;
line-height: 1;
transition: color 0.15s, background 0.15s;
}
button.reki-delete-btn:hover {
color: #ef4444;
background: #fee2e2;
box-shadow: none;
}
/* ===== 第二サイドバー（履歴） ===== */
.history-panel {
position: fixed;
left: 0;
top: 56px;
width: 190px;
height: calc(100vh - 56px);
background: #162233;
border-left: 1px solid #1e2f42;
border-right: 1px solid #1e2f42;
display: none;
flex-direction: column;
z-index: 998;
overflow: hidden;
box-shadow: 2px 0 10px rgba(0,0,0,0.2);
transition: transform 0.22s ease;
}
.history-panel.open {
display: flex;
}
.history-panel-header {
padding: 20px 14px 12px;
font-size: 11px;
font-weight: 700;
color: #475569;
letter-spacing: 0.8px;
text-transform: uppercase;
border-bottom: 1px solid #1e2f42;
flex-shrink: 0;
}
.history-panel-search {
padding: 8px 10px;
border-bottom: 1px solid #1e2f42;
flex-shrink: 0;
}
.history-panel-search input {
width: 100%;
box-sizing: border-box;
padding: 6px 9px;
font-size: 12px;
color: #e2e8f0;
background: #0f1a29;
border: 1px solid #29405c;
border-radius: 5px;
outline: none;
}
.history-panel-search input::placeholder { color: #475569; }
.history-panel-search input:focus { border-color: #10b981; }
.history-panel-list {
flex: 1;
overflow-y: auto;
padding: 6px 0;
}
.sidebar-hist-item {
display: flex;
align-items: flex-start;
padding: 9px 10px 9px 14px;
cursor: pointer;
color: #94a3b8;
border-left: 3px solid transparent;
transition: background 0.13s, color 0.13s;
gap: 7px;
}
.sidebar-hist-item:hover {
background: #1e3050;
color: #e2e8f0;
}
.sidebar-hist-item.active {
background: #1a3a5c;
color: #fff;
border-left-color: #10b981;
}
.sidebar-hist-num {
font-size: 10px;
color: #334155;
min-width: 14px;
margin-top: 2px;
flex-shrink: 0;
text-align: right;
}
.sidebar-hist-item.active .sidebar-hist-num { color: #475569; }
.sidebar-hist-body { overflow: hidden; min-width: 0; flex: 1; }
.sidebar-hist-name {
font-size: 12px;
font-weight: 500;
white-space: normal;
word-break: break-word;
line-height: 1.3;
}
.sidebar-hist-sub {
font-size: 10px;
color: #475569;
margin-top: 2px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sidebar-hist-item.active .sidebar-hist-sub { color: #64748b; }
.sidebar-hist-badge {
flex-shrink: 0;
margin-top: 1px;
font-size: 10px;
padding: 2px 6px;
border-radius: 4px;
font-weight: 500;
white-space: nowrap;
}
.sidebar-hist-badge.unpaid { background: #4c1d24; color: #fca5a5; }
.sidebar-hist-badge.paid { background: #14532d; color: #86efac; }
.sidebar-hist-payment-info {
font-size: 9px;
color: #64748b;
margin-top: 2px;
white-space: nowrap;
}
.sidebar-hist-empty {
padding: 16px 14px;
font-size: 11px;
color: #334155;
font-style: italic;
}
.main-content.history-panel-open,
.main-content.fk-history-panel-open,
.main-content.dl-history-panel-open,
.main-content.es-history-panel-open,
.main-content.rb-history-panel-open,
.main-content.si-history-panel-open {
margin-left: 190px; /* 履歴パネル（左端に表示）の幅ぶん */
}
#invoice-history-section,
#fk-history-section,
#dl-history-section,
#es-history-section,
#rb-history-section,
#si-history-section,
#recurring-section {
display: flex;
flex-direction: column;
align-items: center;
padding-bottom: 40px;
}
.hp-action-bar {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 10px;
background: #fff;
border-radius: 14px;
box-shadow: 0 4px 20px rgba(0,0,0,0.05);
padding: 14px 20px;
margin-bottom: 16px;
width: 210mm;
max-width: 100%;
box-sizing: border-box;
}
.hp-action-buttons {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.hp-action-info { min-width: 0; }
.hp-action-title { font-weight: 700; font-size: 15px; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-action-meta {
font-size: 11px;
color: #64748b;
margin-top: 3px;
display: grid;
grid-template-columns: max-content max-content max-content max-content;
column-gap: 6px;
row-gap: 2px;
}
.hp-meta-label { text-align: right; }
.hp-meta-value { text-align: left; }
.hp-payment-select {
font-size: 12px;
font-weight: 600;
padding: 3px 2px 3px 6px;
width: 64px;
flex: none;
border-radius: 8px;
border: 1px solid transparent;
cursor: pointer;
}
.hp-payment-select.unpaid { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }
.hp-payment-select.paid { background: #dcfce7; color: #15803d; border-color: #bbf7d0; }
#hp-empty {
width: 210mm;
max-width: 100%;
}
/* 影と縮小表示は「凍結スナップショットが無い古い記録」を #hp-invoice へ直接描画する
フォールバック経路（class="invoice template-N"）専用。
スナップショットがある通常の記録は class="hp-snapshot" のiframe表示になり、
納品書・見積書の履歴（#dl-hist-preview / #es-hist-preview）と同じ等倍表示にする。
ID だけで指定していた頃はiframe表示まで0.75倍になり、上のアクションバー（210mm）と
プレビューの横幅が揃わなかった。 */
#hp-invoice.invoice {
box-shadow: 0 6px 32px rgba(0,0,0,0.14);
}
/* 画面上のみ縮小表示（印刷には影響しない） */
@media screen {
#hp-invoice.invoice {
transform: scale(0.75);
transform-origin: top center;
margin-bottom: calc(210mm * 0.75 - 210mm);
}
.page-break-before {
display: none;
}
}
.hp-snapshot {
width: 210mm;
background: #fff;
}
.hp-snapshot-iframe {
width: 210mm;
height: 297mm;
border: 0;
display: block;
background: #fff;
}
/* 明細行の削除ボタン。.delete-btn のままだと padding: 6px 14px / border-radius: 30px
（CSS上この規則より後にある）が勝って横長のピル型になるため、30pxの正方形に上書きする。
角丸は上の .icon-btn 側（8px）に任せる。
月次請求書（#siRowTable）も同じ見た目に揃えるので、まとめてここで指定する。 */
.item-edit-table .delete-btn.trash-icon-only,
#siRowTable .delete-btn.trash-icon-only {
width: 30px;
min-width: 30px;
max-width: 30px;
height: 30px;
padding: 0;
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: middle;
}
.item-edit-table .delete-btn.trash-icon-only .trash-icon-svg,
#siRowTable .delete-btn.trash-icon-only .trash-icon-svg {
width: 20px;
height: 20px;
flex: 0 0 auto;
}
/* td自体にdisplay:flexを指定すると、そのセルがtable-cellとして扱われなくなり
行の高さ同期（他のと同じ65px高になる仕組み）が壊れてしまう。
そのためtdは通常のtable-cellのままにし、中に敷いたこの内側コンテナだけをflexにする。 */
.item-edit-table td.col-ops {
padding: 4px 2px;
}
.item-edit-table td.col-ops .col-ops-inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 4px;
height: 100%;
}
.item-edit-table td.col-ops .col-ops-inner > .item-save-icon-btn,
.item-edit-table td.col-ops .col-ops-inner > .trash-icon-only {
width: 30px;
min-width: 30px;
max-width: 30px;
height: 30px;
margin: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
#furikomi-section div:has(> #fk_logoCanvas) {
max-width: calc(100% - 152px);
flex-wrap: nowrap;
overflow: hidden;
}
#fk_logoCanvas {
flex: 1 1 auto;
min-width: 0;
max-width: min(200px, calc(100% - 72px)) !important;
height: auto;
}
#fk_logoDeleteBtn {
flex: 0 0 auto;
white-space: nowrap;
}
/* ===== 伝票建請求書（slipinvoice）専用 =====
納品書を1枚1行に集約した月次請求書。実際の三和商事の請求書（PDF/Excel）に版式を合わせてある。
他の単据タイプとはDOM構造を共有しないため、ここのルールは .si-doc 配下に閉じており、
既存の帳票には一切影響しない。実物にならい、印字本体では金額に「円」を付けず桁区切りのみで表示する
（js側のsiNum()参照）。 */
.si-doc {
position: relative;
background: #fff;
width: 210mm;
min-height: 297mm;
box-sizing: border-box;
padding: 10mm 12mm 14mm;
margin: 0 auto;
color: #000;
font-size: 12px;
line-height: 1.5;
}
.si-doc .si-title-band {
background: #d9d9d9;
text-align: center;
font-size: 20px;
font-weight: 700;
letter-spacing: 0.3em;
padding: 10px 0;
margin-bottom: 8px;
box-shadow: 0 2px 6px rgba(0,0,0,0.35);
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
/* 請求日：灰色の見出し帯（.si-title-band）のすぐ下に右寄せで表示する（帯の外）。 */
.si-doc .si-issuedate { text-align: right; font-size: 12px; margin-bottom: 8px; }
.si-doc .si-head {
display: flex;
justify-content: space-between;
gap: 20px;
margin-bottom: 14px;
}
.si-doc .si-head-left { flex: 1 1 52%; min-width: 0; }
/* 我方会社名（.si-my-wrap）を取引先側の締め期間（.si-period）の行と揃えるため、
会社名（16px＋margin-bottom2px）ぶんだけ上を空ける（宛名が空欄の一般的なケースを想定した近似値）。
position:relativeはロゴ（.si-logo-inline、絶対配置）の基準にするため。 */
.si-doc .si-head-right { position: relative; flex: 0 0 40%; text-align: left; font-size: 11px; line-height: 1.7; padding-top: 26px; }
.si-doc .si-client {
font-size: 16px;
font-weight: 700;
margin-bottom: 2px;
}
.si-doc .si-client-suffix { font-size: 16px; font-weight: 700; margin-left: 4px; }
.si-doc .si-atena { font-size: 12px; margin-bottom: 4px; }
.si-doc .si-period { font-size: 12px; margin-bottom: 8px; }
.si-doc .si-client-addr { font-size: 11px; color: #000; margin-bottom: 4px; }
.si-doc .si-client-tantou { font-size: 11px; margin-bottom: 10px; }
.si-doc .si-amount-box {
border: 1px solid #000;
margin-top: 8px;
width: 90%;
/* 影は付けない。box-shadowは枠線の外側に描かれるものなので、必ず枠からはみ出して
周囲の余白へにじむ（2026-09-04 指示により削除）。合計欄（.si-table tfoot）でも
同じ理由で影を諦めた経緯があるので、そちらのコメントも参照のこと。
強調を足したい場合は、はみ出しの起きない枠線の太さ（border-width）で行う。 */
/* 中の見出し（.si-amount-label）の灰色背景は印刷時に既定で落とされるため、
ここで継承させて印刷に残す。 */
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.si-doc .si-amount-label {
background: #d9d9d9;
text-align: center;
font-size: 13px;
font-weight: 700;
padding: 5px 0;
border-bottom: 1px solid #000;
}
.si-doc .si-amount-value {
text-align: center;
font-size: 22px;
font-weight: 700;
padding: 8px 0;
font-variant-numeric: tabular-nums;
}
.si-doc .si-my { position: relative; }
/* ロゴは自社情報ブロックの左側の余白に絶対配置する（.si-head-right基準）。
.si-my-wrapは常に一定量だけ右へ寄せておき、ロゴの有無に関わらず自社情報の位置がぶれないようにする。 */
/* 26mm から1文字ぶん（1em＝この欄の文字サイズ11px）だけ左へ寄せている。
こうしないと「東京都港区西新橋3丁目24番10号４階」が1文字ぶん幅が足りず、
「階」だけ次の行に折り返してしまう（2026-09-04 指示により調整）。
右端は動かないので、左へ寄せたぶんだけ文字を置ける幅が広がる。 */
.si-doc .si-my-wrap { margin-left: calc(26mm - 1em); }
.si-doc .si-logo-inline {
position: absolute;
left: 0;
top: 26px; /* .si-head-rightのpadding-topと合わせ、会社名の行に揃える */
max-width: 22mm;
max-height: 14mm;
object-fit: contain;
}
.si-doc .si-my-company { position: relative; font-size: 13px; font-weight: 700; margin-bottom: 2px; }
.si-doc .si-stamp {
position: absolute;
right: 2mm;
top: -4mm;
width: 16mm;
height: 16mm;
object-fit: contain;
}
.si-doc .si-table {
width: 100%;
border-collapse: collapse;
font-size: 11px;
}
.si-doc .si-table th,
.si-doc .si-table td {
border: 1px solid #000;
padding: 5px 7px;
}
.si-doc .si-table thead th {
background: #d9d9d9;
font-weight: 700;
text-align: center;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
/* 列幅：摘要（残り幅を自動で取る可変列、元は約308px）から
半分を伝票No.へ、残り半分のさらに1/3を数量へ譲る（摘要は最終的に元の1/3＝約103pxになる）。 */
.si-doc .si-c-date { width: 85px; text-align: center; }
.si-doc .si-c-no { width: 304px; text-align: left; }
.si-doc .si-c-desc { text-align: left; }
.si-doc .si-c-qty { width: 111px; text-align: right; font-variant-numeric: tabular-nums; }
.si-doc .si-c-amount { width: 100px; text-align: right; font-variant-numeric: tabular-nums; }
/* 返品・マイナス行は実物どおり赤字にする（対象外チェックとは無関係、金額の符号だけで判定） */
.si-doc .si-table tbody tr.si-row-negative td { color: #c00000; }
/* 合計欄（tfoot）：明細と同じの続きの行なので、数量・金額（税抜）の列幅を
そのまま共有する＝上の明細と桁位置がぴったり揃う（実物のExcelと同じ構造）。
左側（伝票日付・伝票No.・摘要）は罫線なしの空セルで飛ばし、ラベル＋値のところだけ枠を出す。 */
/* 合計欄のセル指定は行グループ（tfoot/tbody）ではなく行のクラス（.si-total-tr）で行う。
影を付けない合計数量の行だけ別の行グループ（tbody.si-qty-total-body）へ移したため、
tfoot に紐付けたままだと合計数量の行の枠線・ラベル背景が外れてしまう。 */
.si-doc .si-table tr.si-total-tr .si-t-blank {
border: none;
background: none;
}
/* 合計行のラベルの字面（太字・中央寄せ）。網掛けの有無は下の側の指定で決める。 */
.si-doc .si-table tr.si-total-tr .si-t-label,
.si-doc .si-table tr.si-total-tr .si-t-label-inline {
font-weight: 700;
text-align: center;
}
/* 合計欄（＝御取引額計～最終合計金額）は、ラベル側だけでなく金額側のセルも網掛けにして
影を掛けるブロック全体をひとまとまりに見せる。合計数量の行はこのの外（別tbody）に
あって網掛けしないので、ブロックの境目がはっきりする（2026-09-04 実機の見た目に合わせて調整）。
網掛けの灰色は帳票全体で #d9d9d9 に統一している（見出し帯 .si-title-band、金額枠の見出し
.si-amount-label、明細の見出し行 thead th と同じ色）。以前は #f2f2f2 と #eee が混在していて
濃さが揃わず不揃いに見えていた（特に #eee は白に近く網掛けが無いように見えていた）。
:not(.si-t-blank) は必須。左側の空セルまで塗ると、そこも影の外形に含まれてしまい
合計欄の左側に余計な影が伸びる（2026-09-04 実機で確認）。 */
.si-doc .si-table tfoot tr.si-total-tr td:not(.si-t-blank) {
background: #d9d9d9;
/* 背景色は印刷時に既定で落とされるので明示する（のprint-color-adjustと同じ理由）。 */
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.si-doc .si-table tr.si-f-grand td {
font-weight: 700;
font-size: 13px;
}
.si-doc .si-table tr.si-total-tr .si-negative { color: #c00000; }
/* 【合計欄に影は付けない】2026-09-04、一連の試行のすえ「影なし」に落ち着いた経緯を残す。
影を付けると必ずブロックの外へにじみ出てしまい、要望（表からはみ出させない）と両立しない。
試したものと、それぞれ駄目だった理由：
1) td に box-shadow … border-collapse: collapse では枠線に潰されてほとんど見えない。
2) td を position:relative にして ::after で影を重ねる … display:table-cell 上の
position:relative が絶対配置の包含ブロックとして確実には機能せず、印刷時に
とんでもない位置へ大きな灰色の影が出た。
3) ごとに filter: drop-shadow() … 各行が下の行に影を落とし、金額欄の中に
灰色の横縞が何本も入って濁って見えた。
4) にまとめて filter: drop-shadow() … 6行が1枚の絵として扱われ外周だけに
影が付くので見た目は良かったが、合計欄の右端・下端は表そのものの右端・下端と
一致するため、影が必ず表の外へ8px はみ出す。
5) 4) を clip-path: inset() で表の端に合わせて切る … 右下は収まるが、今度は
上と左（表の内側の空白部分）へ影がはみ出しているのが目立つ。四辺すべて切ると
影は全く見えなくなる＝影なしと同じ。
6) に box-shadow: inset … の箱は空セルを含む表の全幅なので、
内側の影が左端の空白部分に灰色の帯として出てしまい使えない
（filter:drop-shadow が塗られたセルの外形だけを拾うのとは挙動が違う）。
結論：この合計欄は「灰色の網掛け＋黒枠」だけで十分に目立つので影は使わない。
強調を足したい場合は、はみ出しの起きない外枠の太線（border-width）で行うこと。 */
.si-doc .si-table tfoot {
/* 背景色は印刷時に既定で落とされるため、ここで継承させて中のセルの網掛けを印刷に残す。 */
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.si-doc .si-bank {
margin-top: 14px;
font-size: 11px;
}
.si-doc .si-remark {
margin-top: 10px;
font-size: 11px;
border: 1px solid #333;
padding: 8px 10px;
}
.si-doc .si-remark-title { font-weight: 700; margin-bottom: 4px; }
/* 実物の帳票にある「切り取り線」を模した装飾用の破線（本文の区切りとして下端に入れる） */
.si-doc .si-cutline {
border-top: 1px dashed #999;
margin-top: 18px;
}
.si-doc table.si-totals .si-negative { color: #c00000; }
/* ===== 請求書設定：テンプレートのサムネイル選択 =====
上のセレクトと並存させる（どちらから選んでも同じ）。
画像は images/tpl/ の静止画なので、帳票のレイアウトCSSを変えたら撮り直すこと
（_tplshot/shot.html をヘッドレスブラウザで撮ると再生成できる）。 */
.tpl-picker-row { align-items: flex-start; }
.tpl-picker {
flex: 1;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.tpl-card {
/* 汎用buttonの見た目（青背景・影）を打ち消して、カードとして組み直す。
幅は固定。親が広くても伸びないようにする（伸ばすと画像だけ巨大になる）。 */
width: 150px;
flex: none;
margin: 0;
padding: 6px;
background: #fff;
color: #0f172a;
box-shadow: none;
border: 2px solid #e2e8f0;
border-radius: 10px;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 5px;
text-align: left;
transition: border-color 0.15s, box-shadow 0.15s;
}
.tpl-card:hover {
background: #fff;
border-color: #93c5fd;
box-shadow: 0 2px 10px rgba(37,99,235,0.12);
}
.tpl-card img {
width: 100%;
aspect-ratio: 210 / 297;
/* 画像はA4縦(794x1123)で撮ってあるので枠と同じ比率。containにしておけば、
撮り直しで比率が変わっても切り取られず全体が見える（以前coverで左右が切れていた）。 */
object-fit: contain;
object-position: center;
border: 1px solid #e2e8f0;
border-radius: 5px;
background: #fff;
display: block;
}
.tpl-card-name {
font-size: 11px;
font-weight: 600;
line-height: 1.35;
color: #334155;
word-break: break-all;
}
/* 選択中 */
.tpl-card.selected {
border-color: #2563eb;
background: #eff6ff;
}
.tpl-card.selected .tpl-card-name::after {
content: ' ✓';
color: #2563eb;
}
|