<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<title>プロケアDX｜料金表作成システム</title>
<style>
:root {
--pcfee-primary: #0324C4;
--pcfee-primary-2: #245BDB;
--pcfee-primary-3: #3B82F6;
--pcfee-primary-light: #EAF2FF;
--pcfee-text: #111827;
--pcfee-text-2: #374151;
--pcfee-muted: #6B7280;
--pcfee-border: #E6EBF5;
--pcfee-border-2: #D7E1F2;
--pcfee-focus: rgba(3, 36, 196, 0.18);
--pcfee-shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
--pcfee-shadow-md: 0 20px 44px rgba(15, 23, 42, 0.16);
--pcfee-shadow-blue: 0 12px 24px rgba(36, 91, 219, 0.22);
--pcfee-radius-xl: 22px;
--pcfee-a4-width: 210mm;
--pcfee-a4-height: 297mm;
--pcfee-page-top: 11mm;
--pcfee-page-right: 10mm;
--pcfee-page-bottom: 10mm;
--pcfee-page-left: 10mm;
--pcfee-font-ja: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
--pcfee-font-mincho: var(--pcfee-font-ja);
}
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
body {
min-height: 100vh;
color: var(--pcfee-text);
background: #F3F4F6;
font-family: var(--pcfee-font-ja);
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
.pcfee-app {
isolation: isolate;
min-height: 100vh;
padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
color: var(--pcfee-text);
font-family: var(--pcfee-font-ja);
}
.pcfee-app :where(h1, h2, h3, h4, h5, h6, p, figure) {
margin: 0;
padding: 0;
border: 0;
background: transparent;
color: inherit;
font: inherit;
line-height: inherit;
letter-spacing: inherit;
}
.pcfee-app :where(button, input, select, textarea) {
font: inherit;
}
.pcfee-app :where(button) {
cursor: pointer;
}
.pcfee-header,
.pcfee-preview,
.pcfee-controls {
border: 1px solid #E5E7EB;
border-radius: 14px;
background: #FFFFFF;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}
.pcfee-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
width: min(100%, 1600px);
margin: 0 auto 14px;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
backdrop-filter: none;
}
.pcfee-brand {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}
.pcfee-brand__mark {
width: 42px;
height: 42px;
display: grid;
place-items: center;
flex: 0 0 auto;
border-radius: 13px;
background: linear-gradient(135deg, var(--pcfee-primary), var(--pcfee-primary-3));
color: #FFFFFF;
font-weight: 900;
box-shadow: 0 12px 24px rgba(3, 36, 196, 0.24);
}
.pcfee-brand__label {
color: var(--pcfee-muted);
font-size: 12px;
line-height: 1.3;
font-weight: 700;
}
.pcfee-brand__title {
margin-top: 3px;
color: #111827;
font-size: clamp(18px, 1.8vw, 24px);
line-height: 1.25;
font-weight: 900;
letter-spacing: 0.01em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.pcfee-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
flex: 0 0 auto;
}
.pcfee-icon-btn,
.pcfee-primary-btn,
.pcfee-secondary-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 44px;
border-radius: 13px;
border: 1px solid var(--pcfee-border-2);
font-weight: 800;
text-decoration: none;
transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}
.pcfee-icon-btn {
width: 48px;
padding: 0;
background: #FFFFFF;
color: var(--pcfee-text-2);
}
.pcfee-primary-btn {
padding: 0 18px;
border-color: transparent;
background: linear-gradient(135deg, #3378FF, var(--pcfee-primary-2));
color: #FFFFFF;
box-shadow: none;
}
.pcfee-secondary-btn {
padding: 0 16px;
border-color: #CBD5E1;
background: #FFFFFF;
color: #111827;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.pcfee-icon-btn:hover,
.pcfee-primary-btn:hover,
.pcfee-secondary-btn:hover {
transform: translateY(-1px);
box-shadow: none;
}
.pcfee-secondary-btn:hover {
border-color: #94A3B8;
background: #F8FAFC;
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
}
.pcfee-primary-btn:hover {
box-shadow: none;
}
.pcfee-icon-btn:focus-visible,
.pcfee-primary-btn:focus-visible,
.pcfee-secondary-btn:focus-visible,
.pcfee-app input:focus-visible,
.pcfee-app select:focus-visible {
outline: none;
border-color: var(--pcfee-primary-2);
box-shadow: 0 0 0 4px var(--pcfee-focus);
}
.pcfee-kbd {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 22px;
padding: 0 7px;
border-radius: 7px;
background: rgba(255, 255, 255, 0.22);
color: currentColor;
font-size: 12px;
font-weight: 900;
}
.pcfee-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 340px;
gap: 16px;
width: min(100%, 1600px);
margin: 0 auto;
align-items: start;
}
.workspace {
min-height: calc(100vh - 94px);
}
.pcfee-preview {
min-width: 0;
overflow: visible;
background: #E5E7EB;
}
.doc-view {
display: flex;
justify-content: center;
align-items: flex-start;
}
.pcfee-stage {
width: 100%;
min-height: calc(100vh - 110px);
padding: clamp(12px, 2.2vw, 28px) clamp(8px, 1.8vw, 18px);
overflow: visible;
background: #E5E7EB;
}
.pcfee-paper-wrap {
width: var(--pcfee-a4-width);
min-height: var(--pcfee-a4-height);
margin: 0 auto;
transform: none;
transform-origin: top left;
overflow: visible;
}
.pcfee-paper-wrap.has-second-page {
min-height: calc(var(--pcfee-a4-height) * 2 + 18px);
}
.pcfee-paper-wrap.pcfee-density-compact .pcfee-table {
font-size: calc(9.4px * var(--pcfee-font-scale));
line-height: calc(1.25 * var(--pcfee-line-scale));
}
.pcfee-paper-wrap.pcfee-density-compact .pcfee-table th,
.pcfee-paper-wrap.pcfee-density-compact .pcfee-table td {
padding: calc(0.58mm * var(--pcfee-space-scale)) calc(0.78mm * var(--pcfee-space-scale));
}
.pcfee-paper-wrap.pcfee-density-ultra .pcfee-table {
font-size: calc(8.4px * var(--pcfee-font-scale));
line-height: calc(1.16 * var(--pcfee-line-scale));
}
.pcfee-paper-wrap.pcfee-density-ultra .pcfee-table th,
.pcfee-paper-wrap.pcfee-density-ultra .pcfee-table td {
padding: calc(0.42mm * var(--pcfee-space-scale)) calc(0.56mm * var(--pcfee-space-scale));
}
.page {
display: block;
}
.pcfee-page {
position: relative;
width: var(--pcfee-a4-width);
transform-origin: top left;
min-height: var(--pcfee-a4-height);
height: auto;
padding: var(--pcfee-page-top) var(--pcfee-page-right) var(--pcfee-page-bottom) var(--pcfee-page-left);
contain: layout paint;
--pcfee-font-scale: 1;
--pcfee-space-scale: 1;
--pcfee-line-scale: 1;
background: #FFFFFF;
color: #111827;
box-shadow: 0 8px 26px rgba(15, 23, 42, 0.16);
font-family: var(--pcfee-font-ja);
overflow: visible;
}
.pcfee-page::before {
content: "";
position: absolute;
inset: 0;
border: 1px solid rgba(17, 24, 39, 0.08);
pointer-events: none;
}
.pcfee-watermark {
position: absolute;
top: 7mm;
right: 10mm;
color: #9CA3AF;
font-family: var(--pcfee-font-ja);
font-size: calc(7px * var(--pcfee-font-scale));
font-weight: 700;
letter-spacing: 0.04em;
white-space: nowrap;
}
.pcfee-doc-header {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: start;
gap: 8mm;
margin-bottom: calc(3.8mm * var(--pcfee-space-scale));
padding-bottom: calc(3.8mm * var(--pcfee-space-scale));
border-bottom: 2px solid #111827;
}
.pcfee-kicker {
display: inline-flex;
align-items: center;
margin-bottom: calc(2.1mm * var(--pcfee-space-scale));
padding: calc(1mm * var(--pcfee-space-scale)) calc(2.2mm * var(--pcfee-space-scale));
border: 1px solid #111827;
border-radius: 999px;
background: #FFFFFF;
color: #111827;
font-family: var(--pcfee-font-ja);
font-size: calc(8.8px * var(--pcfee-font-scale));
line-height: calc(1.2 * var(--pcfee-line-scale));
font-weight: 900;
letter-spacing: 0.03em;
}
.pcfee-doc-title {
color: #111827;
font-size: calc(20px * var(--pcfee-font-scale));
line-height: calc(1.22 * var(--pcfee-line-scale));
font-weight: 800;
letter-spacing: 0.05em;
}
.pcfee-doc-subtitle {
margin-top: calc(2.1mm * var(--pcfee-space-scale));
color: #374151;
font-family: var(--pcfee-font-ja);
font-size: calc(9.8px * var(--pcfee-font-scale));
line-height: calc(1.45 * var(--pcfee-line-scale));
font-weight: 600;
}
.pcfee-meta {
width: 47mm;
border: 1px solid #9CA3AF;
border-collapse: collapse;
background: #FFFFFF;
font-family: var(--pcfee-font-ja);
font-size: calc(9px * var(--pcfee-font-scale));
line-height: calc(1.25 * var(--pcfee-line-scale));
}
.pcfee-meta th,
.pcfee-meta td {
border: 1px solid #9CA3AF;
padding: calc(1.35mm * var(--pcfee-space-scale)) calc(1.8mm * var(--pcfee-space-scale));
text-align: left;
vertical-align: middle;
font-weight: 400;
}
.pcfee-meta th {
width: 18mm;
background: #F3F4F6;
color: #111827;
font-weight: 700;
}
.pcfee-page .pcfee-meta span,
.pcfee-page .pcfee-meta td,
.pcfee-page .pcfee-meta th {
font-size: inherit;
line-height: inherit;
}
.pcfee-section {
margin-top: calc(2.8mm * var(--pcfee-space-scale));
}
.pcfee-section-title {
display: flex;
align-items: center;
justify-content: space-between;
gap: 4mm;
margin-bottom: calc(1.35mm * var(--pcfee-space-scale));
padding: calc(1.1mm * var(--pcfee-space-scale)) calc(1.7mm * var(--pcfee-space-scale));
border: 1px solid #111827;
background: #111827;
color: #FFFFFF;
font-family: var(--pcfee-font-ja);
font-size: calc(10px * var(--pcfee-font-scale));
line-height: calc(1.24 * var(--pcfee-line-scale));
font-weight: 900;
letter-spacing: 0.02em;
}
.pcfee-section-title span:last-child {
font-size: calc(8.5px * var(--pcfee-font-scale));
line-height: calc(1.2 * var(--pcfee-line-scale));
opacity: 0.92;
font-weight: 800;
white-space: nowrap;
}
.pcfee-table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
color: #111827;
font-family: var(--pcfee-font-ja);
font-size: calc(10.4px * var(--pcfee-font-scale));
line-height: calc(1.35 * var(--pcfee-line-scale));
}
.pcfee-table th,
.pcfee-table td {
border: 1px solid #BFC7D5;
padding: calc(0.82mm * var(--pcfee-space-scale)) calc(1.1mm * var(--pcfee-space-scale));
vertical-align: middle;
word-break: break-word;
}
.pcfee-table thead th,
.pcfee-table--summary th,
.pcfee-table--notes th {
background: #F3F4F6;
color: #111827;
font-family: var(--pcfee-font-ja);
font-size: calc(10.4px * var(--pcfee-font-scale));
line-height: calc(1.35 * var(--pcfee-line-scale));
font-weight: 900;
text-align: center;
}
.pcfee-col-service {
width: 26mm;
background: #F3F4F6;
color: #111827;
font-family: var(--pcfee-font-ja);
font-weight: 400;
font-variation-settings: "wght" 400;
text-align: center;
}
.pcfee-table thead .pcfee-col-service {
font-weight: 900;
font-variation-settings: "wght" 900;
}
.pcfee-table tbody .pcfee-col-service,
.pcfee-table tbody tr:first-child .pcfee-col-service {
font-weight: 400 !important;
font-variation-settings: "wght" 400;
}
.pcfee-col-time {
width: 42mm;
}
.pcfee-col-unit {
width: 20mm;
text-align: right;
font-variant-numeric: tabular-nums;
}
.pcfee-col-amount {
width: 22mm;
text-align: right;
font-variant-numeric: tabular-nums;
}
.pcfee-table--summary tbody th {
width: 42mm;
text-align: left;
}
.pcfee-table--combined tbody th {
width: 48mm;
text-align: left;
}
.pcfee-table--summary td,
.pcfee-formula {
font-family: var(--pcfee-font-ja);
font-size: calc(10.4px * var(--pcfee-font-scale));
line-height: calc(1.35 * var(--pcfee-line-scale));
font-variant-numeric: tabular-nums;
font-weight: 700;
}
.pcfee-table--notes th {
width: 39mm;
text-align: left;
}
.pcfee-table--notes td {
font-family: var(--pcfee-font-ja);
font-size: calc(10.5px * var(--pcfee-font-scale));
line-height: calc(1.38 * var(--pcfee-line-scale));
}
.pcfee-table--realcost th:first-child,
.pcfee-table--realcost td:first-child {
width: 70%;
text-align: left;
}
.pcfee-table--realcost th:last-child,
.pcfee-table--realcost td:last-child {
width: 30%;
text-align: right;
font-variant-numeric: tabular-nums;
}
.pcfee-table--realcost td {
font-family: var(--pcfee-font-ja);
font-size: calc(10.4px * var(--pcfee-font-scale));
line-height: calc(1.35 * var(--pcfee-line-scale));
font-weight: 700;
}
.pcfee-footnotes {
margin-top: calc(1.7mm * var(--pcfee-space-scale));
color: #111827;
font-family: var(--pcfee-font-ja);
font-size: calc(7.2px * var(--pcfee-font-scale));
line-height: calc(1.3 * var(--pcfee-line-scale));
}
.pcfee-footnotes p + p {
margin-top: calc(0.8mm * var(--pcfee-space-scale));
}
.pcfee-footer {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 5mm;
margin-top: calc(2.3mm * var(--pcfee-space-scale));
padding-top: calc(1.6mm * var(--pcfee-space-scale));
border-top: 1px solid #D1D5DB;
color: #6B7280;
font-family: var(--pcfee-font-ja);
font-size: calc(7.2px * var(--pcfee-font-scale));
line-height: calc(1.35 * var(--pcfee-line-scale));
}
.pcfee-footer__brand {
color: #6B7280;
font-weight: 700;
}
.pcfee-page .pcfee-footer__brand,
.pcfee-page .pcfee-footer__page {
font-size: inherit;
line-height: inherit;
}
.pcfee-page + .pcfee-page {
margin-top: 18px;
}
.pcfee-page--second {
display: flex;
flex-direction: column;
}
.pcfee-doc-header--simple {
grid-template-columns: minmax(0, 1fr);
}
.pcfee-second-page-content {
flex: 1 1 auto;
min-height: 0;
padding: calc(4mm * var(--pcfee-space-scale));
border: 1px solid #BFC7D5;
background: #FFFFFF;
color: #111827;
font-family: var(--pcfee-font-ja);
font-size: calc(10.4px * var(--pcfee-font-scale));
line-height: calc(1.55 * var(--pcfee-line-scale));
outline: none;
overflow: hidden;
word-break: break-word;
}
.pcfee-second-page-content:focus {
box-shadow: inset 0 0 0 2px rgba(3, 36, 196, 0.12);
}
.pcfee-second-page-content p + p {
margin-top: 1em;
}
.pcfee-controls {
position: sticky;
top: 18px;
overflow: visible;
}
.pcdx-sidebar {
padding: 0;
}
.pcfee-controls__inner {
padding: 14px;
}
.pcfee-control-section {
margin-bottom: 18px;
padding-bottom: 18px;
border-bottom: 1px solid var(--pcfee-border);
}
.pcfee-control-section:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: 0;
}
.pcfee-control-title {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 12px;
color: #111827;
font-size: 16px;
line-height: 1.35;
font-weight: 900;
}
.pcfee-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 25px;
padding: 0 10px;
border: 1px solid rgba(36, 91, 219, 0.18);
border-radius: 999px;
background: var(--pcfee-primary-light);
color: var(--pcfee-primary);
font-size: 12px;
font-weight: 900;
white-space: nowrap;
}
.pcfee-field-grid {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
}
.pcfee-field-grid--with-help {
margin-top: 10px;
}
.pcfee-field label {
display: block;
margin-bottom: 6px;
color: #111827;
font-size: 13px;
line-height: 1.35;
font-weight: 900;
}
.pcfee-field input:not([type="radio"]):not([type="checkbox"]):not([type="range"]),
.pcfee-field select {
width: 100%;
min-height: 46px;
border: 1px solid var(--pcfee-border-2);
border-radius: 12px;
background-color: #FFFFFF;
color: #111827;
font-size: 16px;
line-height: 1.4;
font-weight: 700;
padding: 10px 12px;
box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02);
}
.pcfee-field select {
appearance: none;
background-image:
linear-gradient(45deg, transparent 50%, #64748B 50%),
linear-gradient(135deg, #64748B 50%, transparent 50%);
background-position: calc(100% - 18px) 19px, calc(100% - 12px) 19px;
background-size: 6px 6px, 6px 6px;
background-repeat: no-repeat;
padding-right: 38px;
}
.pcfee-range-row {
display: grid;
grid-template-columns: minmax(0, 1fr) 64px;
align-items: center;
gap: 12px;
}
.pcfee-range-row input[type="range"] {
width: 100%;
min-width: 0;
height: 24px;
min-height: 24px;
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
accent-color: var(--pcfee-primary-2);
appearance: auto;
-webkit-appearance: auto;
}
.pcfee-range-value {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 36px;
padding: 0 10px;
border: 1px solid var(--pcfee-border-2);
border-radius: 10px;
background: #FFFFFF;
color: #111827;
font-size: 13px;
line-height: 1;
font-weight: 900;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.pcfee-help {
margin-top: 5px;
color: var(--pcfee-muted);
font-size: 12px;
line-height: 1.45;
font-weight: 600;
}
.pcfee-check-list {
display: grid;
grid-template-columns: 1fr;
gap: 8px;
}
.pcfee-service-code-panel {
padding: 12px;
border: 1px solid var(--pcfee-border);
border-radius: 14px;
background: #F8FAFC;
}
.pcfee-code-actions {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin-top: 10px;
}
.pcfee-mini-btn {
min-height: 36px;
border: 1px solid var(--pcfee-border-2);
border-radius: 10px;
background: #FFFFFF;
color: #111827;
font-size: 12px;
font-weight: 900;
transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}
.pcfee-mini-btn:hover {
border-color: #B9D6FF;
background: #FAFCFF;
}
.pcfee-code-count {
margin-top: 8px;
color: var(--pcfee-muted);
font-size: 12px;
font-weight: 800;
}
.pcfee-service-code-list {
display: grid;
grid-template-columns: 1fr;
gap: 8px;
max-height: 360px;
margin-top: 10px;
padding-right: 4px;
overflow: auto;
}
.pcfee-service-code-item {
display: grid;
grid-template-columns: 24px minmax(0, 1fr) auto;
align-items: start;
column-gap: 10px;
padding: 10px 12px;
border: 1px solid var(--pcfee-border);
border-radius: 12px;
background: #FFFFFF;
}
.pcfee-service-code-item input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
width: 20px;
height: 20px;
min-width: 20px;
min-height: 20px;
margin: 1px 0 0;
padding: 0;
border: 2px solid #9CA3AF;
border-radius: 6px;
background: #FFFFFF;
box-shadow: none;
cursor: pointer;
}
.pcfee-service-code-item input[type="checkbox"]:checked {
border-color: var(--pcfee-primary-2);
background: var(--pcfee-primary-2);
}
.pcfee-service-code-item input[type="checkbox"]:checked::after {
content: "";
display: block;
width: 5px;
height: 10px;
margin: 1px 0 0 5px;
border-right: 2px solid #FFFFFF;
border-bottom: 2px solid #FFFFFF;
transform: rotate(45deg);
}
.pcfee-service-code-name {
color: #111827;
font-size: 13px;
line-height: 1.35;
font-weight: 900;
}
.pcfee-service-code-desc {
display: block;
margin-top: 3px;
color: var(--pcfee-muted);
font-size: 12px;
line-height: 1.35;
font-weight: 600;
}
.pcfee-service-code-unit {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 54px;
min-height: 26px;
padding: 0 8px;
border-radius: 999px;
background: #F3F4F6;
color: #111827;
font-size: 12px;
font-weight: 900;
font-variant-numeric: tabular-nums;
}
.pcfee-service-code-item.is-hidden {
display: none;
}
.pcfee-modal {
position: fixed;
inset: 0;
z-index: 9999;
display: grid;
place-items: center;
padding: 24px;
}
.pcfee-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(15, 23, 42, 0.42);
backdrop-filter: blur(4px);
}
.pcfee-modal__panel {
position: relative;
z-index: 1;
display: grid;
grid-template-rows: auto auto auto minmax(0, 1fr) auto;
width: min(760px, 100%);
max-height: min(82vh, 760px);
padding: 18px;
border: 1px solid rgba(230, 235, 245, 0.96);
border-radius: 22px;
background: #FFFFFF;
box-shadow: 0 28px 72px rgba(15, 23, 42, 0.24);
}
.pcfee-modal__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
margin-bottom: 12px;
padding-bottom: 12px;
border-bottom: 1px solid var(--pcfee-border);
}
.pcfee-modal__title {
color: #111827;
font-size: 19px;
line-height: 1.35;
font-weight: 900;
}
.pcfee-modal__lead {
margin-top: 4px;
color: var(--pcfee-muted);
font-size: 13px;
line-height: 1.45;
font-weight: 600;
}
.pcfee-modal__close {
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
border: 1px solid var(--pcfee-border-2);
border-radius: 12px;
background: #FFFFFF;
color: #111827;
font-size: 24px;
line-height: 1;
font-weight: 700;
}
.pcfee-modal__scroll {
min-height: 0;
margin-top: 4px;
padding-right: 8px;
overflow: auto;
}
.pcfee-modal-section + .pcfee-modal-section {
margin-top: 18px;
padding-top: 18px;
border-top: 1px solid var(--pcfee-border);
}
.pcfee-modal-section__title {
margin-bottom: 10px;
color: #111827;
font-size: 15px;
line-height: 1.35;
font-weight: 900;
}
.pcfee-modal__footer {
display: flex;
justify-content: flex-end;
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid var(--pcfee-border);
}
.pcfee-service-code-list--modal {
max-height: none;
min-height: 0;
margin-top: 12px;
padding-right: 8px;
overflow: auto;
}
.pcfee-check-list--merged {
margin-top: 10px;
}
.pcfee-check {
display: grid;
grid-template-columns: 24px minmax(0, 1fr);
align-items: start;
column-gap: 10px;
row-gap: 0;
padding: 10px 12px;
border: 1px solid var(--pcfee-border);
border-radius: 12px;
background: #FFFFFF;
transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}
.pcfee-check:hover {
border-color: #B9D6FF;
background: #FAFCFF;
}
.pcfee-check input[type="radio"],
.pcfee-check input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
grid-column: 1;
grid-row: 1;
width: 20px;
height: 20px;
min-width: 20px;
min-height: 20px;
margin: 1px 0 0;
padding: 0;
border: 2px solid #9CA3AF;
background: #FFFFFF;
background-image: none;
box-shadow: none;
line-height: 1;
cursor: pointer;
flex: none;
}
.pcfee-check input[type="checkbox"] {
border-radius: 6px;
}
.pcfee-check input[type="radio"]:checked,
.pcfee-check input[type="checkbox"]:checked {
border-color: var(--pcfee-primary-2);
background: var(--pcfee-primary-2);
}
.pcfee-check input[type="checkbox"]:checked::after {
content: "";
display: block;
width: 5px;
height: 10px;
margin: 1px 0 0 5px;
border-right: 2px solid #FFFFFF;
border-bottom: 2px solid #FFFFFF;
transform: rotate(45deg);
}
.pcfee-check span {
display: block;
grid-column: 2;
grid-row: 1;
min-width: 0;
margin: 0;
padding: 0;
color: #111827;
font-size: 13px;
line-height: 1.35;
font-weight: 800;
}
.pcfee-check small {
display: block;
margin-top: 3px;
padding: 0;
color: var(--pcfee-muted);
font-size: 12px;
line-height: 1.25;
font-weight: 600;
}
.pcfee-message {
padding: 12px;
border: 1px solid #BBF7D0;
border-radius: 14px;
background: #ECFDF5;
color: #166534;
font-size: 12px;
line-height: 1.55;
font-weight: 800;
}
.pcfee-hidden {
display: none !important;
}
@media (max-width: 1240px) {
.pcfee-layout {
grid-template-columns: 1fr;
}
.pcfee-controls {
position: static;
}
.pcfee-preview {
width: 100%;
}
}
@media (max-width: 860px) {
.pcfee-app {
padding: 14px;
}
.pcfee-header {
align-items: stretch;
flex-direction: column;
}
.pcfee-actions {
display: grid;
grid-template-columns: 1fr;
justify-content: stretch;
}
.pcfee-actions > * {
width: 100%;
}
.pcfee-stage {
padding: 14px 8px;
}
}
@media (max-width: 520px) {
.pcfee-brand__title {
white-space: normal;
}
}
@page {
size: A4 portrait;
margin: 10mm;
}
@media print {
:root {
--pcfee-page-top: 0mm;
--pcfee-page-right: 0mm;
--pcfee-page-bottom: 0mm;
--pcfee-page-left: 0mm;
}
html,
body {
width: 190mm !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
background: #FFFFFF !important;
}
.pcfee-no-print,
.pcfee-header,
.pcfee-controls {
display: none !important;
}
.pcfee-app,
.pcfee-layout,
.pcfee-preview,
.pcfee-stage,
.pcfee-paper-wrap {
display: block !important;
width: 190mm !important;
min-width: 190mm !important;
max-width: 190mm !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: #FFFFFF !important;
box-shadow: none !important;
overflow: visible !important;
transform: none !important;
}
.pcfee-page {
display: block !important;
position: relative !important;
width: 190mm !important;
min-width: 190mm !important;
max-width: 190mm !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
padding: var(--pcfee-page-top) var(--pcfee-page-right) var(--pcfee-page-bottom) var(--pcfee-page-left) !important;
border: 0 !important;
border-radius: 0 !important;
background: #FFFFFF !important;
box-shadow: none !important;
overflow: visible !important;
transform: none !important;
box-sizing: border-box !important;
page-break-before: auto !important;
break-before: auto !important;
page-break-after: auto !important;
break-after: auto !important;
page-break-inside: auto !important;
break-inside: auto !important;
contain: none !important;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.pcfee-page + .pcfee-page {
break-before: avoid !important;
page-break-before: avoid !important;
margin-top: 0 !important;
}
.pcfee-page:last-child {
page-break-after: avoid !important;
}
.pcfee-page.pcfee-hidden {
display: none !important;
}
.pcfee-page::before {
border: 0 !important;
}
.pcfee-watermark {
top: 4mm !important;
right: 0mm !important;
max-width: 70mm !important;
overflow: hidden !important;
white-space: nowrap !important;
font-size: calc(5.8px * var(--pcfee-font-scale)) !important;
}
.pcfee-doc-header {
grid-template-columns: minmax(0, 1fr) !important;
gap: 0 !important;
padding-right: 30mm !important;
margin-bottom: 3mm !important;
padding-bottom: 3mm !important;
break-after: avoid !important;
page-break-after: avoid !important;
}
.pcfee-doc-header--simple {
grid-template-columns: minmax(0, 1fr) !important;
padding-right: 0 !important;
}
.pcfee-kicker {
margin-bottom: 1.7mm !important;
padding: 0.8mm 1.8mm !important;
font-size: calc(8px * var(--pcfee-font-scale)) !important;
}
.pcfee-doc-title {
font-size: calc(18px * var(--pcfee-font-scale)) !important;
line-height: calc(1.16 * var(--pcfee-line-scale)) !important;
}
.pcfee-doc-subtitle {
margin-top: calc(1.6mm * var(--pcfee-space-scale)) !important;
font-size: calc(8.4px * var(--pcfee-font-scale)) !important;
line-height: calc(1.25 * var(--pcfee-line-scale)) !important;
}
.pcfee-meta {
position: absolute !important;
top: 7mm !important;
right: 0 !important;
width: 39mm !important;
font-size: calc(9.1px * var(--pcfee-font-scale)) !important;
line-height: calc(1.14 * var(--pcfee-line-scale)) !important;
}
.pcfee-meta th {
width: 14mm !important;
}
.pcfee-meta th,
.pcfee-meta td {
padding: 0.7mm 1mm !important;
}
.pcfee-section {
break-before: auto !important;
page-break-before: auto !important;
break-after: auto !important;
page-break-after: auto !important;
break-inside: auto !important;
page-break-inside: auto !important;
margin-top: 3mm !important;
}
.pcfee-section:first-of-type {
margin-top: 0 !important;
break-before: avoid !important;
page-break-before: avoid !important;
}
.pcfee-section-title {
break-after: avoid !important;
page-break-after: avoid !important;
margin-bottom: calc(1mm * var(--pcfee-space-scale)) !important;
padding: calc(0.9mm * var(--pcfee-space-scale)) calc(1.4mm * var(--pcfee-space-scale)) !important;
font-size: calc(9px * var(--pcfee-font-scale)) !important;
line-height: calc(1.15 * var(--pcfee-line-scale)) !important;
}
.pcfee-table thead {
break-after: avoid !important;
page-break-after: avoid !important;
}
.pcfee-table tr {
break-inside: avoid !important;
page-break-inside: avoid !important;
}
.pcfee-section-title span:last-child {
font-size: calc(7.2px * var(--pcfee-font-scale)) !important;
line-height: calc(1.12 * var(--pcfee-line-scale)) !important;
}
.pcfee-table {
width: 100% !important;
font-size: calc(8.5px * var(--pcfee-font-scale)) !important;
line-height: calc(1.18 * var(--pcfee-line-scale)) !important;
table-layout: fixed !important;
}
.pcfee-table th,
.pcfee-table td {
padding: calc(0.42mm * var(--pcfee-space-scale)) calc(0.55mm * var(--pcfee-space-scale)) !important;
font-size: inherit !important;
line-height: inherit !important;
}
/* サービス費テーブルの行高を2行分+余白に固定（印刷）
rowspanセルへの height 適用を除外: Chrome印刷でheightが
rowspan合計ではなく1行分に固定されvertical-alignが効かなくなるため */
.pcfee-table--service tbody td:not(.pcfee-col-service) {
padding-top: calc(2mm * var(--pcfee-space-scale)) !important;
padding-bottom: calc(2mm * var(--pcfee-space-scale)) !important;
height: calc(8.5px * 2 * 1.18 * var(--pcfee-font-scale) * var(--pcfee-line-scale) + 4mm * var(--pcfee-space-scale)) !important;
}
.pcfee-col-service {
width: 22mm !important;
vertical-align: middle !important;
/* Chrome印刷: rowspanセルがページ境界をまたぐと背景が消えるため明示 */
background: #F3F4F6 !important;
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
.pcfee-col-time {
width: 38mm !important;
}
.pcfee-col-unit {
width: 17mm !important;
}
.pcfee-col-amount {
width: 18mm !important;
}
.pcfee-table--combined tbody th {
width: 44mm !important;
}
.pcfee-table--realcost th:first-child,
.pcfee-table--realcost td:first-child {
width: 70% !important;
}
.pcfee-table--realcost th:last-child,
.pcfee-table--realcost td:last-child {
width: 30% !important;
}
.pcfee-table--notes td {
font-size: calc(8.3px * var(--pcfee-font-scale)) !important;
line-height: calc(1.18 * var(--pcfee-line-scale)) !important;
}
.pcfee-second-page-content {
min-height: 235mm !important;
font-size: calc(10px * var(--pcfee-font-scale)) !important;
line-height: calc(1.5 * var(--pcfee-line-scale)) !important;
overflow: hidden !important;
}
.pcfee-footnotes {
margin-top: calc(1.1mm * var(--pcfee-space-scale)) !important;
font-size: calc(6px * var(--pcfee-font-scale)) !important;
line-height: calc(1.16 * var(--pcfee-line-scale)) !important;
}
.pcfee-footnotes p + p {
margin-top: 0.4mm !important;
}
.pcfee-footer {
margin-top: calc(1.2mm * var(--pcfee-space-scale)) !important;
padding-top: calc(0.8mm * var(--pcfee-space-scale)) !important;
font-size: calc(6.2px * var(--pcfee-font-scale)) !important;
line-height: calc(1.15 * var(--pcfee-line-scale)) !important;
}
}
/* 追加ボタン非表示 */
.btn-add {
display: flex
;
align-items: center;
gap: 8px;
padding: 10px 20px;
font-size: 16px;
font-weight: bold;
color: #fff;
background-color: #28a745;
border: none;
border-radius: 30px;
cursor: pointer;
transition: background-color 0.2s ease, transform 0.1s ease;
display: none;
}
/* PC表示専用のスタイル */
@media (min-width: 960px) {
/* パンくずリストを非表示 */
div#breadcrumb {
display: none;
/* レコメンド: 必要に応じて削除可 */
}
/* サイドバーエリアの幅と背景を指定 */
.-sidebar-on #sidebar {
width: var(--swl-sidebar_width);
background: linear-gradient(90deg, #002D72, #003B9B);
}
/* コンテナ余白を除去 */
.l-container {
padding-left: 0;
padding-right: 0;
}
/* コンテンツのマージンを0に */
div#content {
margin: 0px;
}
/* .is-layout-flexクラスのgapを0に */
:where(.is-layout-flex) {
gap: 0;
}
/* ログイン時ヘッダーロゴサイズ調整 */
.logged-in .l-header__logo {
width: 12%;
max-width: 300px;
margin-left: 20px;
text-align: left;
}
/* H2などの見出しサイズ調整 */
.h2c {
font-size: 20px !important;
margin: 0px !important;
}
/* トップタイトルエリア非表示 */
div#top_title_area {
display: none;
}
/* フッター内部を非表示 */
.l-footer__inner {
display: none;
}
}
/* サービス費テーブルの行高を2行分+余白に固定（プレビュー）
rowspanセルへの height 適用を除外（印刷と同様の理由） */
.pcfee-table--service tbody td:not(.pcfee-col-service) {
padding-top: calc(3.2mm * var(--pcfee-space-scale)) !important;
padding-bottom: calc(3.2mm * var(--pcfee-space-scale)) !important;
height: calc(10.4px * 2 * 1.35 * var(--pcfee-font-scale) * var(--pcfee-line-scale) + 6.4mm * var(--pcfee-space-scale)) !important;
}
/* 基本単位数・利用者負担額列を中央揃え */
.pcfee-col-unit,
.pcfee-col-amount {
text-align: center;
}
/* 基本単位数・利用者負担額のセルを太文字に */
td.pcfee-col-time,
td.pcfee-col-unit,
td.pcfee-col-amount {
font-weight: 700;
font-variation-settings: "wght" 700;
}
/* サービス種別列の内容を太文字に */
.pcfee-table tbody .pcfee-col-service,
.pcfee-table tbody tr:first-child .pcfee-col-service {
font-weight: 700 !important;
font-variation-settings: "wght" 700 !important;
}
/* rowspan廃止: 同グループ内の継続セルでボーダーを消し視覚的に結合 */
.pcfee-col-service--cont { border-top: 0 !important; }
.pcfee-col-service--no-bot { border-bottom: 0 !important; }
/* 料金表ページ: 印刷時は #pcfeePaperWrap のみ表示 */
@media print {
body:has(#pcfeeApp) #header,
body:has(#pcfeeApp) #top_title_area,
body:has(#pcfeeApp) #breadcrumb,
body:has(#pcfeeApp) #sidebar,
body:has(#pcfeeApp) #footer,
body:has(#pcfeeApp) .l-header,
body:has(#pcfeeApp) .l-topTitleArea,
body:has(#pcfeeApp) .l-sidebar,
body:has(#pcfeeApp) .l-footer {
display: none !important;
}
body:has(#pcfeeApp) #content,
body:has(#pcfeeApp) .l-content,
body:has(#pcfeeApp) #main_content,
body:has(#pcfeeApp) .l-mainContent,
body:has(#pcfeeApp) .l-mainContent__inner,
body:has(#pcfeeApp) .post_content {
display: block !important;
width: 190mm !important;
max-width: 190mm !important;
margin: 0 !important;
padding: 0 !important;
float: none !important;
overflow: visible !important;
border: none !important;
box-shadow: none !important;
background: #fff !important;
}
.pcfee-section {
break-before: auto !important;
page-break-before: auto !important;
break-after: auto !important;
page-break-after: auto !important;
break-inside: auto !important;
page-break-inside: auto !important;
margin-top: 3mm !important;
}
.pcfee-section:first-of-type {
margin-top: 0 !important;
break-before: avoid !important;
page-break-before: avoid !important;
}
.pcfee-section-title {
break-after: avoid !important;
page-break-after: avoid !important;
}
.pcfee-table thead {
break-after: avoid !important;
page-break-after: avoid !important;
}
.pcfee-table tr {
break-inside: avoid !important;
page-break-inside: avoid !important;
}
}
</style>
<div class="pcfee-app" id="pcfeeApp">
<header class="pcfee-header pcfee-no-print" aria-label="アプリケーションヘッダー">
<div class="pcfee-brand">
<div class="pcfee-brand__body">
<div class="pcfee-brand__title" role="heading" aria-level="1">【テスト版】料金表作成システム</div>
</div>
</div>
<div class="pcfee-actions">
<button class="pcfee-secondary-btn" type="button" id="pcfeeAdditionListButton">表示する加算・減算</button>
<button class="pcfee-secondary-btn" type="button" id="pcfeeServiceListButton">表示するサービス一覧</button>
<button class="pcfee-primary-btn" type="button" id="pcfeePrintButton" aria-label="印刷プレビューを開く">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden="true">
<path d="M7 8V3h10v5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M7 17H5a3 3 0 0 1-3-3v-2a3 3 0 0 1 3-3h14a3 3 0 0 1 3 3v2a3 3 0 0 1-3 3h-2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M7 14h10v7H7z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"></path>
</svg>
印刷
</button>
</div>
</header>
<main class="pcfee-layout workspace">
<section class="pcfee-preview doc-view" aria-label="A4プレビュー">
<div class="pcfee-stage" id="pcfeeStage">
<div class="pcfee-paper-wrap page" id="pcfeePaperWrap">
<article class="pcfee-page editable" id="pcfeePrintArea" aria-label="料金表 A4縦">
<div class="pcfee-watermark">© Professional Care International 株式会社_PROCARE DX</div>
<header class="pcfee-doc-header">
<div class="pcfee-doc-title-block">
<div class="pcfee-kicker">料金表・利用者負担額</div>
<div class="pcfee-doc-title"><span id="pcfeeOfficeNameTitle" data-db-field="office_name"></span> <span id="pcfeeServiceTypeInTitle"></span> 料金表</div>
<p class="pcfee-doc-subtitle" id="pcfeeLeadText">利用料金は、下記の基本単位数に地域区分単価および該当する加算を反映して算定します。</p>
</div>
<table class="pcfee-meta" aria-label="文書情報">
<tbody>
<tr>
<th>作成日</th>
<td id="pcfeeCreatedDateText"></td>
</tr>
<tr>
<th>地域区分</th>
<td id="pcfeeRegionText"></td>
</tr>
<tr>
<th>1単位</th>
<td><span id="pcfeeUnitPriceText"></span>円</td>
</tr>
</tbody>
</table>
</header>
<section class="pcfee-section">
<div class="pcfee-section-title">
<span>1 基本サービス費</span>
<span id="pcfeeServiceHeading">訪問介護</span>
</div>
<table class="pcfee-table pcfee-table--service" aria-label="基本サービス費一覧">
<thead>
<tr>
<th class="pcfee-col-service">サービス種別</th>
<th class="pcfee-col-time">時間（備考）</th>
<th class="pcfee-col-unit">基本単位数</th>
<th class="pcfee-col-amount">利用者負担額<br>1割</th>
<th class="pcfee-col-amount">利用者負担額<br>2割</th>
<th class="pcfee-col-amount">利用者負担額<br>3割</th>
</tr>
</thead>
<tbody id="pcfeeServiceBody"></tbody>
</table>
</section>
<section class="pcfee-section pcfee-service-continued pcfee-hidden" id="pcfeeAdditionalServiceSection">
<table class="pcfee-table pcfee-table--service" aria-label="基本サービス費一覧">
<thead>
<tr>
<th class="pcfee-col-service">サービス種別</th>
<th class="pcfee-col-time">時間</th>
<th class="pcfee-col-unit">基本単位数</th>
<th class="pcfee-col-amount">利用者負担額<br>1割</th>
<th class="pcfee-col-amount">利用者負担額<br>2割</th>
<th class="pcfee-col-amount">利用者負担額<br>3割</th>
</tr>
</thead>
<tbody id="pcfeeAdditionalServiceBody"></tbody>
</table>
</section>
<section class="pcfee-section">
<div class="pcfee-section-title">
<span>2 算定加算・加算減算・留意事項</span>
<span>該当時に算定・減算</span>
</div>
<table class="pcfee-table pcfee-table--summary pcfee-table--combined" aria-label="算定加算・加算減算・留意事項">
<thead>
<tr>
<th class="pcfee-col-service">加算種別</th>
<th class="pcfee-col-time">備考</th>
<th class="pcfee-col-unit">基本単位数</th>
<th class="pcfee-col-amount">利用者負担額<br>1割</th>
<th class="pcfee-col-amount">利用者負担額<br>2割</th>
<th class="pcfee-col-amount">利用者負担額<br>3割</th>
</tr>
</thead>
<tbody id="pcfeeCombinedBody"></tbody>
</table>
<table class="pcfee-table pcfee-table--notes" aria-label="留意事項・単位数なし加算" style="margin-top: 2mm;">
<thead>
<tr>
<th style="width: 30%;">加算種別</th>
<th style="width: auto;">備考</th>
</tr>
</thead>
<tbody id="pcfeeCombinedNoUnitsBody"></tbody>
</table>
<div class="pcfee-footnotes" id="pcfeeFootnotes"></div>
</section>
<section class="pcfee-section">
<div class="pcfee-section-title">
<span>3 実費請求</span>
<span>サービス費以外でご負担いただく費用</span>
</div>
<table class="pcfee-table pcfee-table--realcost" aria-label="実費請求">
<thead>
<tr>
<th>項目</th>
<th>金額</th>
</tr>
</thead>
<tbody id="pcfeeRealCostBody"></tbody>
</table>
</section>
<footer class="pcfee-footer">
<div class="pcfee-footer__brand">Professional Care International株式会社_PROCARE DX</div>
<div class="pcfee-footer__page" id="pcfeeFirstPageNumber">1 / 1</div>
</footer>
</article>
</div>
</div>
</section>
<aside class="pcfee-controls pcfee-no-print pcdx-sidebar" id="pcdxSidebar" aria-label="入力フォーム">
<div class="pcfee-controls__inner">
<section class="pcfee-control-section">
<div class="pcfee-control-title" role="heading" aria-level="2">
<span>料金表設定</span>
<span class="pcfee-badge">変数</span>
</div>
<div class="pcfee-field-grid">
<div class="pcfee-field" style="display:none;">
<label for="pcfeeOfficeName">事業所名</label>
<input type="text" id="pcfeeOfficeName" value="" autocomplete="organization" data-db-field="office_name">
<p class="pcfee-help">バックエンド連携時は window.ProcareFeeTable.setOfficeName("事業所名") で自動入力できます。</p>
</div>
<div class="pcfee-field">
<label for="pcfeeCreatedDate">作成日</label>
<input type="date" id="pcfeeCreatedDate" value="">
</div>
<div class="pcfee-field">
<label for="pcfeeServiceType">事業所種別</label>
<select id="pcfeeServiceType">
<option value="1">読み込み中...</option>
</select>
</div>
<div class="pcfee-field">
<label for="pcfeeRegion">地域区分</label>
<select id="pcfeeRegion">
<option value="5">読み込み中...</option>
</select>
</div>
<div class="pcfee-field">
<label for="pcfeeFontScale">プレビュー・印刷文字サイズ</label>
<div class="pcfee-range-row">
<input type="range" id="pcfeeFontScale" min="85" max="115" step="1" value="100" aria-describedby="pcfeeFontScaleHelp">
<output class="pcfee-range-value" id="pcfeeFontScaleValue" for="pcfeeFontScale">100%</output>
</div>
<p class="pcfee-help" id="pcfeeFontScaleHelp">A4プレビューと印刷時の文字サイズ・行間・余白をまとめて調整できます。印刷プレビューがA4に収まらない場合は、調整してください。</p>
</div>
</div>
</section>
<section class="pcfee-control-section">
<div class="pcfee-control-title" role="heading" aria-level="2">
<span>実費請求項目設定</span>
<span class="pcfee-badge">変数</span>
</div>
<div class="pcfee-field-grid">
<div class="pcfee-field" data-realcost-types="all">
<label for="pcfeeRealCostTraffic">交通費</label>
<input type="text" id="pcfeeRealCostTraffic" class="pcfee-realcost-field" data-realcost-label="交通費" value="" placeholder="実施地域を超えた地点から1kmあたり25円">
<p class="pcfee-help">利用者の自宅が、通常の事業の実施地域以外の場合、実施地域を超えた地点から1kmあたり記載の金額を請求します。公共交通機関を利用した場合は実費を請求します。</p>
</div>
<div class="pcfee-field" data-realcost-types="1,2,5,6,7,8">
<label for="pcfeeRealCostInsuranceExcluded">介護保険外サービス</label>
<input type="text" id="pcfeeRealCostInsuranceExcluded" class="pcfee-realcost-field" data-realcost-label="介護保険外サービス" value="" placeholder="介護報酬告示上の額と同額">
<p class="pcfee-help">区分限度額を超えてサービスを利用したい場合など、介護保険枠外のサービス料金です。</p>
</div>
<div class="pcfee-field" data-realcost-types="10,11,12">
<label for="pcfeeRealCostMeal">食事代</label>
<input type="text" id="pcfeeRealCostMeal" class="pcfee-realcost-field" data-realcost-label="食事代" value="" placeholder="500円〜800円/食">
</div>
<div class="pcfee-field" data-realcost-types="10,11,12">
<label for="pcfeeRealCostDrink">飲み物代</label>
<input type="text" id="pcfeeRealCostDrink" class="pcfee-realcost-field" data-realcost-label="飲み物代" value="" placeholder="コーヒー：1杯60円">
</div>
<div class="pcfee-field" data-realcost-types="10,11,12">
<label for="pcfeeRealCostSnack">おやつ代</label>
<input type="text" id="pcfeeRealCostSnack" class="pcfee-realcost-field" data-realcost-label="おやつ代" value="" placeholder="100円〜150円/回">
</div>
<div class="pcfee-field" data-realcost-types="10,11,12">
<label for="pcfeeRealCostTakeout">持ち帰り弁当代</label>
<input type="text" id="pcfeeRealCostTakeout" class="pcfee-realcost-field" data-realcost-label="持ち帰り弁当代" value="" placeholder="500円〜700円/食">
</div>
<div class="pcfee-field" data-realcost-types="10,11,12">
<label for="pcfeeRealCostDiaper">おむつ代</label>
<input type="text" id="pcfeeRealCostDiaper" class="pcfee-realcost-field" data-realcost-label="おむつ代" value="" placeholder="100円〜200円/枚">
</div>
<div class="pcfee-field" data-realcost-types="10,11,12">
<label for="pcfeeRealCostPad">パット代</label>
<input type="text" id="pcfeeRealCostPad" class="pcfee-realcost-field" data-realcost-label="パット代" value="" placeholder="50円〜100円/枚">
</div>
<div class="pcfee-field" data-realcost-types="10,11,12">
<label for="pcfeeRealCostRehabPants">リハビリパンツ代</label>
<input type="text" id="pcfeeRealCostRehabPants" class="pcfee-realcost-field" data-realcost-label="リハビリパンツ代" value="" placeholder="100円〜200円/枚">
</div>
<div class="pcfee-field" data-realcost-types="10,11,12">
<label for="pcfeeRealCostRecreation">教養娯楽費</label>
<input type="text" id="pcfeeRealCostRecreation" class="pcfee-realcost-field" data-realcost-label="教養娯楽費" value="" placeholder="実費">
<p class="pcfee-help">レクリエーション、行事、クラブ活動等に必要な材料費等について、利用者の希望により参加された場合、記載の金額を請求します。</p>
</div>
<div class="pcfee-field" data-realcost-types="5,6">
<label for="pcfeeRealCostPostmortem">エンゼルケア代</label>
<input type="text" id="pcfeeRealCostPostmortem" class="pcfee-realcost-field" data-realcost-label="エンゼルケア代" value="" placeholder="15,000円～20,000円（ご逝去後の処置および身支度にかかる費用です。）">
<p class="pcfee-help">ご逝去後の処置および身支度にかかる費用です。</p>
</div>
<div class="pcfee-field" data-realcost-types="10,11,12">
<label for="pcfeeRealCostNotebook">連絡ノート代</label>
<input type="text" id="pcfeeRealCostNotebook" class="pcfee-realcost-field" data-realcost-label="連絡ノート代" value="" placeholder="100円〜200円/冊">
<p class="pcfee-help">連絡ノートを希望された場合、1冊あたりの金額を請求します。</p>
</div>
<div class="pcfee-field" data-realcost-types="10,11,12">
<label for="pcfeeRealCostPhoto">写真代</label>
<input type="text" id="pcfeeRealCostPhoto" class="pcfee-realcost-field" data-realcost-label="写真代" value="" placeholder="10円〜50円/枚">
</div>
<div class="pcfee-field" data-realcost-types="10,11,12">
<label for="pcfeeRealCostBarber">理容室サービス</label>
<input type="text" id="pcfeeRealCostBarber" class="pcfee-realcost-field" data-realcost-label="理容室サービス" value="" placeholder="実費">
</div>
<div class="pcfee-field" data-realcost-types="all">
<label for="pcfeeRealCostMisc">その他日常生活費</label>
<input type="text" id="pcfeeRealCostMisc" class="pcfee-realcost-field" data-realcost-label="その他日常生活費" value="" placeholder="実費">
<p class="pcfee-help">利用者の日常生活において通常必要となる費用で、利用者に負担いただくことが適当と認められるものについては、記載の金額を請求します。</p>
</div>
<div class="pcfee-field" data-realcost-types="1,3,4">
<label for="pcfeeRealCostShopping">お買い物代行</label>
<input type="text" id="pcfeeRealCostShopping" class="pcfee-realcost-field" data-realcost-label="お買い物代行" value="" placeholder="2,000〜3,000円/30分">
<p class="pcfee-help">介護保険の対象とならない買い物代行を希望された場合、記載の金額を請求します。なお、購入代金、交通費等は実費を請求します。</p>
</div>
</div>
</section>
<section class="pcfee-control-section">
<div class="pcfee-message pcfee-hidden" id="pcfeeSaveMessage">保存しました。</div>
</section>
</div>
</aside>
</main>
<div class="pcfee-modal pcfee-hidden pcfee-no-print" id="pcfeeAdditionModal" aria-hidden="true">
<div class="pcfee-modal__backdrop" data-addition-modal-close=""></div>
<div class="pcfee-modal__panel" role="dialog" aria-modal="true" aria-labelledby="pcfeeAdditionModalTitle">
<div class="pcfee-modal__header">
<div>
<div class="pcfee-modal__title" id="pcfeeAdditionModalTitle">表示する加算・減算</div>
<p class="pcfee-modal__lead">料金表に表示する加算・減算を選択してください。介護職員等処遇改善加算などの区分が１つしか選択できない加算（減算）においては、それぞれ該当する区分を1つだけ選択してください。</p>
</div>
<button type="button" class="pcfee-modal__close" id="pcfeeAdditionModalCloseButton" aria-label="閉じる">×</button>
</div>
<div class="pcfee-code-actions" aria-label="加算・減算操作">
<button type="button" class="pcfee-mini-btn" id="pcfeeAdjDefaultButton">主要のみ</button>
<button type="button" class="pcfee-mini-btn" id="pcfeeAdjAllButton">全選択</button>
<button type="button" class="pcfee-mini-btn" id="pcfeeAdjClearButton">解除</button>
</div>
<div class="pcfee-modal__scroll">
<section class="pcfee-modal-section">
<div class="pcfee-modal-section__title">算定加算</div>
<div class="pcfee-check-list pcfee-check-list--merged" role="group" aria-label="算定加算の選択">
<!-- <label class="pcfee-check"><input type="checkbox" name="pcfeeShogu" value="i_a"><span>介護職員等処遇改善加算（Ⅰ）イ<small>27.0%</small></span></label>
<label class="pcfee-check"><input type="checkbox" name="pcfeeShogu" value="i_b"><span>介護職員等処遇改善加算（Ⅰ）ロ<small>28.7%</small></span></label>
<label class="pcfee-check"><input type="checkbox" name="pcfeeShogu" value="ii_a"><span>介護職員等処遇改善加算（Ⅱ）イ<small>24.9%</small></span></label>
<label class="pcfee-check"><input type="checkbox" name="pcfeeShogu" value="ii_b"><span>介護職員等処遇改善加算（Ⅱ）ロ<small>26.6%</small></span></label>
<label class="pcfee-check"><input type="checkbox" name="pcfeeShogu" value="iii"><span>介護職員等処遇改善加算（Ⅲ）<small>20.7%</small></span></label>
<label class="pcfee-check"><input type="checkbox" name="pcfeeShogu" value="iv"><span>介護職員等処遇改善加算（Ⅳ）<small>17.0%</small></span></label>
<label class="pcfee-check"><input type="checkbox" name="pcfeeTokutei" value="1"><span>特定事業所加算Ⅰ<small>20%</small></span></label>
<label class="pcfee-check"><input type="checkbox" name="pcfeeTokutei" value="2"><span>特定事業所加算Ⅱ<small>10%</small></span></label>
<label class="pcfee-check"><input type="checkbox" name="pcfeeTokutei" value="3"><span>特定事業所加算Ⅲ<small>10%</small></span></label>
<label class="pcfee-check"><input type="checkbox" id="pcfeeOptionalSeikatsu1" value="seikatsu1"><span>生活機能向上連携加算（Ⅰ）<small>100単位／月</small></span></label>
<label class="pcfee-check"><input type="checkbox" id="pcfeeOptionalSeikatsu2" value="seikatsu2"><span>生活機能向上連携加算（Ⅱ）<small>200単位／月</small></span></label>
<label class="pcfee-check"><input type="checkbox" id="pcfeeOptionalNinchisho1" value="ninchisho1"><span>認知症専門ケア加算（Ⅰ）<small>3単位／日</small></span></label>
<label class="pcfee-check"><input type="checkbox" id="pcfeeOptionalNinchisho2" value="ninchisho2"><span>認知症専門ケア加算（Ⅱ）<small>4単位／日</small></span></label>
<label class="pcfee-check"><input type="checkbox" id="pcfeeOptionalKokuRenkei" value="kokuRenkei"><span>口腔連携強化加算<small>50単位／月</small></span></label>
<label class="pcfee-check"><input type="checkbox" id="pcfeeOptionalShogaiNightMorning" value="shogaiNightMorning"><span>夜朝加算<small>夜間（18:00〜22:00）又は早朝（6:00〜8:00）の場合</small></span></label>
<label class="pcfee-check"><input type="checkbox" id="pcfeeOptionalShogaiMidnight" value="shogaiMidnight"><span>深夜加算<small>深夜（22:00〜6:00）の場合</small></span></label>
<label class="pcfee-check"><input type="checkbox" id="pcfeeOptionalShogaiFirstVisit" value="shogaiFirstVisit"><span>初回加算<small>初回訪問時、サービス提供責任者が訪問または同行した場合</small></span></label>
<label class="pcfee-check"><input type="checkbox" id="pcfeeOptionalShogaiEmergency" value="shogaiEmergency"><span>緊急時訪問介護加算<small>緊急時に訪問介護を行う場合</small></span></label>
<label class="pcfee-check"><input type="checkbox" id="pcfeeOptionalTwoStaffVisit" value="twoStaffVisit"><span>2人の訪問介護員等による訪問介護を行った場合<small>所定単位数の200/100</small></span></label> -->
</div>
<div class="pcfee-check-list" id="pcfeeKasanDynamicList" role="group" aria-label="加算の選択（追加）" style="margin-top:8px;display:none;"></div>
</section>
<section class="pcfee-modal-section">
<div class="pcfee-modal-section__title">減算</div>
<div class="pcfee-check-list" role="group" aria-label="減算の表示切り替え">
<!-- <label class="pcfee-check"><input type="checkbox" id="pcfeeShowSameBuilding1"><span>同一建物減算（1）<small>所定単位数の90/100（10％減算）</small></span></label>
<label class="pcfee-check"><input type="checkbox" id="pcfeeShowSameBuilding2"><span>同一建物減算（2）<small>所定単位数の90/100（10％減算）</small></span></label>
<label class="pcfee-check"><input type="checkbox" id="pcfeeShowSameBuilding3"><span>同一建物減算（3）<small>所定単位数の85/100（15％減算）</small></span></label>
<label class="pcfee-check"><input type="checkbox" id="pcfeeShowSameBuilding4"><span>同一建物減算（4）<small>所定単位数の88/100（12％減算）</small></span></label> -->
</div>
<div class="pcfee-check-list" id="pcfeeGensanDynamicList" role="group" aria-label="減算の選択（追加）" style="margin-top:8px;display:none;"></div>
</section>
</div>
<div class="pcfee-modal__footer">
<button type="button" class="pcfee-primary-btn" id="pcfeeAdditionModalApplyButton">反映して閉じる</button>
</div>
</div>
</div>
<div class="pcfee-modal pcfee-hidden pcfee-no-print" id="pcfeeServiceModal" aria-hidden="true">
<div class="pcfee-modal__backdrop" data-service-modal-close=""></div>
<div class="pcfee-modal__panel" role="dialog" aria-modal="true" aria-labelledby="pcfeeServiceModalTitle">
<div class="pcfee-modal__header">
<div>
<div class="pcfee-modal__title" id="pcfeeServiceModalTitle">表示するサービス一覧</div>
<p class="pcfee-modal__lead">料金表に表示するサービスコードを選択してください。</p>
</div>
<button type="button" class="pcfee-modal__close" id="pcfeeServiceModalCloseButton" aria-label="閉じる">×</button>
</div>
<div class="pcfee-code-actions" aria-label="サービスコード操作">
<button type="button" class="pcfee-mini-btn" id="pcfeeServiceCodeDefaultButton">主要のみ</button>
<button type="button" class="pcfee-mini-btn" id="pcfeeServiceCodeAllButton">全選択</button>
<button type="button" class="pcfee-mini-btn" id="pcfeeServiceCodeClearButton">解除</button>
</div>
<div class="pcfee-code-count" id="pcfeeServiceCodeCount">0件選択中</div>
<div class="pcfee-service-code-list pcfee-service-code-list--modal" id="pcfeeServiceCodeList" aria-label="サービスコード表示設定"></div>
<div class="pcfee-modal__footer">
<button type="button" class="pcfee-primary-btn" id="pcfeeServiceModalApplyButton">反映して閉じる</button>
</div>
</div>
</div>
</div>
