:root { font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif; color: #15212b; background: #f3f7f6; }
* { box-sizing: border-box; } body { margin: 0; background: radial-gradient(circle at 85% 0%, #d9f2eb 0, transparent 28rem); } main { max-width: 1240px; margin: 0 auto; padding: 52px 24px 72px; } h2 { margin: 0 0 6px; } p { line-height: 1.65; }
.hero { max-width: 790px; margin: 12px 0 28px; } .eyebrow { margin: 0 0 8px; color: #14736c; font-size: .82rem; font-weight: 800; letter-spacing: .08em; } h1 { margin: 0 0 12px; font-size: clamp(2.35rem, 6vw, 4.1rem); letter-spacing: -.07em; line-height: 1.05; } .hero-copy { margin: 0; max-width: 690px; color: #425453; font-size: clamp(1.05rem, 2.2vw, 1.3rem); } .hero-copy strong { color: #14736c; }
.demo-callout { display: flex; justify-content: space-between; gap: 24px; align-items: center; margin: 0 0 24px; padding: 24px 26px; border: 1px solid #a9d8cf; border-radius: 18px; background: linear-gradient(135deg, #e6f7f3, #fff); box-shadow: 0 12px 30px #14736c12; } .demo-callout h2 { font-size: 1.3rem; } .demo-callout p { margin: 0; max-width: 650px; color: #425453; } .demo-actions { flex: 0 0 235px; } .demo-actions button { width: 100%; margin: 0; background: #0f766e; box-shadow: 0 5px 12px #0f766e32; }
.app-layout { display: grid; grid-template-columns: 245px minmax(0, 1fr); gap: 24px; align-items: start; } .guide-card { position: sticky; top: 18px; border: 1px solid #d1e2df; border-radius: 14px; padding: 17px; background: #fff; box-shadow: 0 6px 24px #17323a0a; } .guide-card summary { cursor: default; color: #175c56; font-weight: 800; } .guide-card ol { display: grid; gap: 12px; margin: 16px 0; padding-left: 23px; } .guide-card li { padding-left: 2px; color: #31504c; font-size: .86rem; } .guide-card li::marker { color: #14736c; font-weight: 800; } .guide-card b, .guide-card span { display: block; } .guide-card span { color: #607170; font-size: .78rem; line-height: 1.45; } .guide-note { margin: 0; padding-top: 12px; border-top: 1px solid #e4eded; color: #4e615f; font-size: .79rem; line-height: 1.55; }
.card, .note, .error { background: white; border: 1px solid #dce5e4; border-radius: 14px; padding: 22px; margin: 16px 0; box-shadow: 0 6px 24px #17323a0a; } .note { border-left: 5px solid #28a59a; } .error { border-left: 5px solid #ce4d45; color: #8c261f; } .imports { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } label { font-weight: 700; display: grid; gap: 8px; } input, select { font: inherit; padding: 9px; border: 1px solid #bfcfce; border-radius: 7px; background: white; } small { color: #607170; font-weight: 400; } .mapping-row { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 12px; align-items: center; border-top: 1px solid #e6eeee; padding: 13px 0; } button { margin-top: 20px; border: 0; border-radius: 8px; background: #14736c; color: white; padding: 11px 20px; font: inherit; font-weight: 700; cursor: pointer; } button:hover { background: #0f625c; } .section-title { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; } #summary { display: flex; flex-wrap: wrap; gap: 8px; } #summary span { background: #eef5f4; border-radius: 8px; padding: 6px 9px; font-size: .8rem; } #summary b { display: block; font-size: 1.15rem; } .outcome { margin: 14px 0 4px; padding: 13px 15px; border-radius: 10px; background: #eef8f6; color: #225952; font-weight: 700; } .table-wrap { overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: .9rem; } th, td { text-align: left; vertical-align: top; padding: 10px 8px; border-bottom: 1px solid #e5ecec; white-space: nowrap; } th { color: #526261; font-size: .78rem; } mark { display: inline-block; border-radius: 5px; padding: 3px 6px; font-weight: 700; background: #edf1f1; } mark.高一致 { background: #c8f2df; } mark.中一致 { background: #fff0b8; } mark.低一致 { background: #ffe0c4; } mark.候補なし { background: #e7e9ec; } .pending { color: #6d5750; background: #fff5ea; border-radius: 8px; padding: 10px; margin-bottom: 0; }

/* The browser view is the review surface; XLSX export intentionally has no styles. */
#summary { justify-content: flex-end; }
#summary .summary-中一致 { background: #fff0b8; }
#summary .summary-低一致 { background: #ffe0c4; }
#summary .summary-候補なし { background: #e7e9ec; }
#summary .summary-review { background: #f4dcb8; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 8px; }
.filters button { margin: 0; color: #27504b; background: #eef5f4; border: 1px solid #c8dcda; padding: 7px 12px; }
.filters button.active { color: white; background: #14736c; border-color: #14736c; }
th, td { white-space: pre-line; }
tr.bucket-中一致 { background: #fffaf0; }
tr.bucket-低一致 { background: #fff4eb; }
tr.bucket-候補なし { background: #f4f5f6; }
.b-only { margin-top: 26px; padding: 16px; border: 1px solid #d6dde0; border-radius: 10px; background: #f7f8f9; }
.b-only h3 { margin: 0; }
.b-only p { margin: 5px 0 12px; color: #526261; }
.export-row { display: flex; align-items: center; gap: 16px; margin-top: 20px; border-top: 1px solid #e6eeee; padding-top: 18px; }
.export-row button { margin: 0; white-space: nowrap; }
.export-row p { margin: 0; color: #526261; font-size: .88rem; }
@media (max-width: 840px) { .app-layout { grid-template-columns: 1fr; } .guide-card { position: static; } .guide-card details:not([open]) ol, .guide-card details:not([open]) .guide-note { display: none; } }
@media (max-width: 700px) { main { padding: 28px 14px 56px; } .demo-callout { display: block; padding: 20px; } .demo-actions { margin-top: 18px; } .imports, .mapping-row { grid-template-columns: 1fr; } .section-title, .export-row { display: block; } .export-row button { margin-bottom: 10px; } #summary { justify-content: flex-start; } .guide-card summary { cursor: pointer; } }

#mapping h3 { margin: 24px 0 8px; font-size: 1rem; color: #27504b; }
.difference-settings { margin-top: 24px; border-top: 2px solid #dce5e4; padding-top: 4px; }
.difference-settings > p { color: #526261; margin-top: 0; font-size: .9rem; }
.difference-row { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 12px; align-items: end; padding: 12px 0; border-top: 1px solid #e6eeee; }
.difference-row button, .add-comparison { margin: 0; }
.remove-comparison { color: #7c3128; background: #fff1ef; border: 1px solid #efc9c2; padding: 9px 12px; }
.add-comparison { color: #27504b; background: #eef5f4; border: 1px solid #c8dcda; }
#summary .summary-identified { background: #dceef8; }
#summary .summary-difference { background: #f8d8cf; }
.filter-group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-right: 14px; border-right: 1px solid #dce5e4; }
.filter-group:last-child { border-right: 0; }
.filter-group small { width: 100%; color: #526261; }
mark.差異あり { background: #f8d8cf; color: #742d24; }
mark.差異なし { background: #d7efe2; color: #1d5b39; }
mark.差異対象外 { background: #e7e9ec; color: #53606a; }
details { min-width: 260px; } summary { color: #14736c; font-weight: 700; cursor: pointer; }
.difference-table { margin-top: 10px; min-width: 420px; font-size: .85rem; }
.difference-table tr.difference-違う, .difference-table tr.difference-Aのみ, .difference-table tr.difference-Bのみ { background: #fff0eb; }
.reference-warning { color: #794d12; background: #fff4d2; border-radius: 6px; padding: 8px; margin: 10px 0; font-size: .84rem; }
@media (max-width: 700px) { .difference-row { grid-template-columns: 1fr; } .filter-group { width: 100%; border-right: 0; border-bottom: 1px solid #dce5e4; padding-bottom: 10px; } }

/* Public-review layout: keeps the existing functions while making the next action visible. */
body { background: radial-gradient(circle at 76% 4%, #dff5ef 0, transparent 27rem), #f4f8f7; }
main { max-width: 1420px; padding: 28px 28px 72px; }
.app-layout { grid-template-columns: 320px minmax(0, 1fr); gap: 28px; }
.guide-card { top: 16px; padding: 20px; border: 1px solid #d6e7e3; border-radius: 16px; box-shadow: 0 12px 30px #133f3810; }
.guide-card summary { color: #173a42; font-size: 1.25rem; list-style: none; }
.guide-card summary::-webkit-details-marker { display: none; }
.guide-card summary small { display: block; margin-top: 3px; font-size: .8rem; }
.guide-card ol { margin: 17px 0 18px; padding: 0; list-style: none; counter-reset: guide; }
.guide-card li { position: relative; min-height: 60px; padding: 4px 0 12px 54px; border-bottom: 1px solid #e5eeec; counter-increment: guide; }
.guide-card li::before { content: "0" counter(guide); position: absolute; left: 0; top: 3px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #dff5ef; color: #087b68; font-size: .78rem; font-weight: 900; }
.guide-card li:last-child { border-bottom: 0; padding-bottom: 0; }
.guide-card li b { color: #192b36; font-size: .92rem; }
.guide-note { display: grid; gap: 12px; padding: 16px; border: 1px solid #cdece3; border-radius: 10px; background: #eefaf6; }
.guide-note h3 { margin: 0; color: #1d4f4a; font-size: .92rem; }
.guide-note div { padding-left: 10px; border-left: 3px solid #16a085; }
.guide-note div + div { border-color: #4f8ac5; }
.guide-note b { color: #1d4f4a; font-size: .83rem; }
.side-demo { margin-top: 16px; padding-top: 16px; border-top: 1px solid #e3edeb; }
.side-demo > b { display: block; color: #2e4548; font-size: .88rem; }
.side-demo button { width: 100%; margin: 12px 0 0; background: #087b68; box-shadow: 0 6px 14px #087b6830; }
.download-demo-set { display: block; margin-top: 10px; padding: 9px 10px; border: 1px solid #9ed8cd; border-radius: 7px; background: #effaf7; color: #12685d; font-size: .82rem; font-weight: 800; text-align: center; text-decoration: none; }
.download-demo-set:hover { background: #dff3ed; }
.download-demo-set + small { display: block; margin-top: 6px; font-size: .72rem; line-height: 1.4; }
.hero { display: flex; justify-content: space-between; gap: 24px; max-width: none; margin: 0 0 18px; padding: 6px 10px 15px; border-bottom: 1px solid #dce8e5; }
.hero h1 { font-size: clamp(2.2rem, 4.6vw, 3.8rem); color: #102535; }
.hero-copy { max-width: 710px; color: #1e3141; font-size: clamp(1.02rem, 2vw, 1.25rem); font-weight: 700; }
.hero-copy strong { color: #0b705e; }
.hero-description { max-width: 760px; margin: 9px 0 0; color: #5b6b73; font-size: .92rem; }
.privacy { align-self: flex-start; min-width: 235px; margin: 4px 0 0; padding: 10px 13px; border: 1px solid #c5e8dd; border-radius: 9px; background: #eefaf6; color: #1c665b; font-size: .78rem; font-weight: 800; line-height: 1.45; }
.note { margin: 0 0 14px; padding: 13px 16px; font-size: .9rem; box-shadow: none; }
.card { border-radius: 14px; box-shadow: 0 8px 22px #17323a0a; }
.card-heading, .result-heading { display: flex; align-items: flex-start; gap: 10px; }
.card-heading h2, .result-heading h2 { color: #193241; font-size: 1.2rem; }
.card-heading p, .result-heading p { margin: 3px 0 0; color: #627274; font-size: .86rem; }
.step-icon { display: inline-grid; flex: 0 0 auto; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: #0e866f; color: white; font-size: .82rem; font-weight: 900; }
.input-card { padding: 20px; }
.demo-badge { margin-left: auto; padding: 6px 10px; border-radius: 999px; background: #dff5ef; color: #087b68; font-size: .76rem; font-weight: 800; }
.imports { margin-top: 16px; gap: 16px; }
.imports > label { min-height: 142px; padding: 16px; border: 1px dashed #9fc7bf; border-radius: 10px; background: #fcfefd; color: #1e3741; }
.imports input[type="file"] { width: 100%; padding: 10px; border-color: #bed8d3; background: #fff; }
.imports small { margin-top: auto; }
.mapping-card { padding: 20px; }
.mapping-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 18px; }
.mapping-group, .difference-settings { margin: 0; padding: 15px; border: 1px solid #cce8df; border-radius: 11px; background: #f1faf7; }
.difference-settings { border-color: #d7e4f1; background: #f4f8fd; }
#mapping h3 { margin: 0 0 5px; color: #126d5f; font-size: 1rem; }
.difference-settings h3 { color: #365f8e; }
.mapping-group > p, .difference-settings > p { min-height: 40px; margin: 0 0 9px; color: #57716f; font-size: .79rem; }
.mapping-row { grid-template-columns: 118px minmax(0, 1fr) 18px minmax(0, 1fr); gap: 7px; align-items: end; padding: 9px 0; }
.mapping-row strong { padding-bottom: 10px; color: #31494d; font-size: .8rem; }
.mapping-row label, .difference-row label { gap: 4px; color: #567071; font-size: .7rem; }
.mapping-row select, .difference-row select, .difference-row input { min-width: 0; padding: 7px 8px; font-size: .82rem; }
.field-connector { align-self: end; padding-bottom: 7px; color: #5a7482; font-weight: 900; text-align: center; }
.difference-row { grid-template-columns: 86px minmax(0, 1fr) 18px minmax(0, 1fr) auto; gap: 7px; align-items: end; padding: 9px 0; }
.difference-row .remove-comparison { padding: 8px 10px; font-size: .76rem; }
.add-comparison { margin-top: 8px; font-size: .8rem; }
.primary-run { min-width: 175px; margin-top: 20px; padding: 13px 26px; background: #087b68; font-size: 1rem; box-shadow: 0 7px 14px #087b6830; }
.section-title { align-items: flex-start; }
.section-title > div:first-child { flex: 1; }
#summary { max-width: 320px; justify-content: flex-end; }
#summary span { min-width: 62px; border: 1px solid #dbe8e5; text-align: center; }
#summary .summary-identified { background: #e0f2fb; border-color: #c5e3f1; }
#summary .summary-difference { background: #fff0c8; border-color: #f1d991; }
.outcome { display: flex; align-items: center; min-height: 66px; margin: 16px 0 8px; padding: 16px 20px; border: 1px solid #bee6d9; background: linear-gradient(90deg, #ecfaf5, #fffdf4); color: #155a50; font-size: 1rem; }
.filters { justify-content: space-between; padding: 12px; border-radius: 10px; background: #f7faf9; }
.filter-group { padding: 0 12px 0 0; }
.filters button.active { background: #087b68; }
.filters button { border-radius: 999px; }
.table-wrap { border: 1px solid #e2ebea; border-radius: 10px; }
th { background: #f4f8f8; color: #425a5c; }
tr.bucket-高一致:hover, tr.bucket-中一致:hover, tr.bucket-低一致:hover, tr.bucket-候補なし:hover { background: #f6fbfa; }
mark.差異あり { background: #ffe1d7; color: #8a341d; }
.b-only { border-style: dashed; }
.export-row { padding: 18px; border: 1px solid #c6e5db; border-radius: 11px; background: #f1faf7; }
.export-row button { min-width: 250px; padding: 14px 20px; background: #087b68; box-shadow: 0 6px 14px #087b6830; }

@media (max-width: 1050px) { .app-layout { grid-template-columns: 260px minmax(0, 1fr); gap: 18px; } .mapping-columns { grid-template-columns: 1fr; } .mapping-group > p, .difference-settings > p { min-height: auto; } }
@media (max-width: 780px) { main { padding: 18px 14px 52px; } .app-layout { display: flex; flex-direction: column; } .guide-card { position: static; width: 100%; order: -1; } .guide-card details:not([open]) > :not(summary) { display: none; } .guide-card summary { cursor: pointer; } .hero { display: block; padding: 4px 2px 15px; } .privacy { min-width: 0; width: fit-content; margin-top: 14px; } .section-title { display: block; } #summary { max-width: none; justify-content: flex-start; margin-top: 14px; } .imports, .mapping-columns { grid-template-columns: 1fr; } .mapping-row, .difference-row { grid-template-columns: 1fr; gap: 6px; } .mapping-row strong { padding: 0; } .field-connector { align-self: auto; padding: 0; } .difference-row .remove-comparison { justify-self: start; } .demo-badge { margin: 0; } .card-heading { flex-wrap: wrap; } .export-row button { width: 100%; min-width: 0; } }