@charset "utf-8";
/* CSS Document */
:root {
	--ink:        #2f6ca8;
	--ink-2:      #2f6ca8;
	--ink-3:      #4a5f7e;
	--ink-4:      #8194ac;
	--line:       #e5e3e3;
	--line-soft:  #eaf0f7;
	--bg:         #f4f7fb;
	--bg-paper:   #ffffff;
	--bg-tint:    #eaf2fb;

	--brand:      #2f6ca8;   /* medical trust blue */
	--brand-2:    #2f6ca8;
	--brand-tint: #e4eefd;
	--brand-ink:  #2f6ca8;

	--teal:       #0891a0;
	--teal-tint:  #e0f3f5;

	--warn:       #c77a00;
	--warn-tint:  #fdf1de;

	--ok:         #0e8a5f;
	--ok-tint:    #dff3ea;

	--no:         #c9d1dd;

	--radius: 10px;
	--shadow-sm: 0 1px 2px rgba(11,31,53,.05), 0 1px 1px rgba(11,31,53,.04);
	--shadow-md: 0 6px 20px rgba(11,31,53,.08), 0 2px 6px rgba(11,31,53,.05);
	--shadow-lg: 0 20px 48px rgba(11,31,53,.18), 0 4px 12px rgba(11,31,53,.08);
}

/** { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
	font-family: 'Noto Sans JP', system-ui, sans-serif;
	color: var(--ink);
	background: var(--bg);
	-webkit-font-smoothing: antialiased;
	font-feature-settings: "palt";
}
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }*/

/* ───────── Layout ───────── */
.oem-wrap {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 3px;
}

/* ───────── Header ───────── */

.masthead {
	background: linear-gradient(135deg, var(--brand-2) 0%, var(--brand) 55%, #1b7dd8 100%);
	color: #fff;
	border-radius: 14px;
	padding: 28px 34px;
	position: relative;
	overflow: hidden;
	box-shadow: var(--shadow-md);
}
.masthead::before {
	content: "";
	position: absolute;
	top: -60px; right: -40px;
	width: 320px; height: 320px;
	background: radial-gradient(circle, rgba(255,255,255,.14), transparent 65%);
	border-radius: 50%;
}
.masthead::after {
	content: "";
	position: absolute;
	bottom: -120px; left: 40%;
	width: 260px; height: 260px;
	border: 1px solid rgba(255,255,255,.12);
	border-radius: 50%;
}
.mast-top {
	display: flex; align-items: center; gap: 12px;
	font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
	opacity: .85; margin-bottom: 8px;
	font-family: 'JetBrains Mono', monospace;
}
.mast-dot { width: 8px; height: 8px; background: #9ed0ff; border-radius: 50%; box-shadow: 0 0 0 4px rgba(158,208,255,.25); }
.masthead h1 {
	font-weight: 700;
	font-size: 32px;
	margin: 0 0 6px;
	line-height: 1.3;
	letter-spacing: .01em;
}
.masthead .sub {
	font-size: 14px;
	opacity: .88;
	max-width: 720px;
}
.mast-grid {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: end;
	gap: 24px;
	position: relative;
	z-index: 1;
}
.mast-stats {
	display: flex;
	gap: 28px;
	align-items: flex-end;
}
.stat {
	text-align: right;
}
.stat .num {
	font-family: 'Noto Serif JP', serif;
	font-weight: 700;
	font-size: 40px;
	line-height: 1;
	letter-spacing: -.02em;
}
.stat .lbl {
	font-size: 14px;
	letter-spacing: .14em;
	text-transform: uppercase;
	opacity: .75;
	margin-top: 6px;
	font-family: 'JetBrains Mono', monospace;
}


/* ───────── Legend strip ───────── */
.legend-strip {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 28px;
	background: var(--bg-paper);
	border: 1px solid var(--line);
	padding: 14px 20px;
	margin: 16px 0 24px;
	font-size: 15px;
}
.legend-title {
	font-size: 16px; letter-spacing: .18em; text-transform: uppercase;
	color: var(--ink-3); font-weight: 600;
	padding-right: 20px;
	border-right: 1px solid var(--line);
}
.legend-item { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); }
.mark {/* width: 22px; height: 22px; */display: inline-grid; place-items: center; border-radius: 5px; font-weight: 700; font-size: 14px;padding:0 4px;}
.mark.yes  { background: #fff; color: var(--brand); }
.mark.cond { background: var(--warn-tint); color: var(--warn); border: 1px solid #f0d7a0; font-size: 16px; }
.mark.no   { background: #f1f4f9; color: #a8b4c4; }

/* ───────── Filters ───────── */
.filters {
	background: var(--bg-paper);
	border: 1px solid var(--line);
	padding: 18px 22px 20px;
	margin-bottom: 20px;
}
.filter-row {
	display: grid;
	grid-template-columns: 110px 1fr;
	gap: 14px;
	align-items: baseline;
	padding: 10px 0;
	border-bottom: 1px dashed var(--line-soft);
}
.filter-row:last-of-type { border-bottom: none; }
.filter-label {
	font-size: 16px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--brand-ink);
	font-weight: 700;
}
.chips {
	display: flex; flex-wrap: wrap; gap: 7px;
}
.chip {
	background: #fff;
	border: 1px solid var(--line);
	color: var(--ink-2);
	font-size: 16px;
	font-weight: 500;
	padding: 6px 12px 7px;
	border-radius: 999px;
	cursor: pointer;
	transition: all .12s ease;
	font-family: inherit;
	display: inline-flex; align-items: center; gap: 6px;
}
.chip:hover { border-color: var(--brand); color: var(--brand); }
.chip.active {
	background: var(--brand);
	border-color: var(--brand);
	color: #fff;
}
.chip .chip-count {
	font-size: 14px;
	opacity: .7;
}
.chip.active .chip-count { opacity: .95; }
.chip.gmp.active { background: var(--ok); border-color: var(--ok); }

/* Toolbar under filters */
.toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
	flex-wrap: wrap;
}
.result-count {
	font-size: 16px;
	color: var(--ink-2);
}
.result-count b {
	color: var(--brand);
	font-size: 31px;
	font-weight: 700;
	margin: 0 3px;
	vertical-align: -2px;
}
.toolbar-right { display: flex; gap: 12px; align-items: center; }

rch {
	position: relative;
}
.search input {
	width: 260px;
	padding: 8px 12px 8px 34px;
	border: 1px solid var(--line);
	border-radius: 8px;
	font-size: 14px;
	background: #fff;
	color: var(--ink);
	font-family: inherit;
}
.search input:focus {
	outline: none;
	border-color: var(--brand);
	box-shadow: 0 0 0 3px var(--brand-tint);
}
.search::before {
	content: "";
	position: absolute;
	left: 12px; top: 50%;
	width: 14px; height: 14px;
	transform: translateY(-50%);
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a5f7e' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='m21 21-4.3-4.3'/></svg>") center/contain no-repeat;
}

.view-toggle {
	display: inline-flex;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 3px;
	gap: 2px;
}
.view-toggle button {
	border: none;
	background: transparent;
	padding: 6px 14px;
	font-size: 14px;
	color: var(--ink-3);
	cursor: pointer;
	border-radius: 6px;
	font-family: inherit;
	font-weight: 500;
	display: inline-flex; align-items: center; gap: 6px;
}
.view-toggle button.active {
	background: var(--brand);
	color: #fff;
}
.reset-btn {
	border: 1px solid var(--line);
	background: #fff;
	color: var(--ink-3);
	padding: 8px 14px;
	border-radius: 8px;
	font-size: 14px;
	cursor: pointer;
	font-family: inherit;
}
.reset-btn:hover { border-color: var(--brand); color: var(--brand); }

.filter-lead {
	margin:8px 0;font-size:16px;padding:8px;background: #f4f7fb;color: #7e8a9c;border:1px solid var(--line-soft);
}
.toolbar-lead {
	font-size:14px;color: #7e8a9c;line-height:20px;
}
.toolbar-lead span {
	color: var(--brand);;
}
.content-description {width:100%;margin:16px 0;color:var(--brand);font-size:16px;}


/* ───────── Card grid ───────── */
.cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
@media (max-width: 1100px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px)  { .cards { grid-template-columns: 1fr; } }

.card {
	background: var(--bg-paper);
	border: 1px solid var(--line);
	padding: 18px 20px 16px;
	cursor: pointer;
	transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
	position: relative;
	display: flex; flex-direction: column;
	min-height: 240px;
}
.card:hover {
	border-color: var(--brand);
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}
.card-idx {
	position: absolute;
	top: 14px; right: 16px;
	font-size: 14px;
	color: var(--ink-4);
	letter-spacing: .05em;
}
.card-gmp,.card-nogmp {
	/*display: inline-flex; align-items: center; gap: 5px;font-family: 'JetBrains Mono', monospace;*/
	height:25px;
	background:var(--ok);
	color: #fff;
	padding: 3px 8px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	margin-bottom: 8px;
}
.card-gmp {width:50px;}
.card-nogmp {
	background:#f1f4f9;color:#8194ac;width:80px;}
}.card-nogmp span {
	background:#8194ac;
}
/*.card-gmp::before {
	content: "";
	width: 6px; height: 6px; border-radius: 50%; background: var(--ok);
}*/
.card-head {
	display:flex;justify-content:space-between;gap: 5px;margin-bottom:8px ;
}
.card-head h3 {
	width:80%;
}
.card h3 {
	font-size: 18px;
	margin: 0;
	/*line-height: 1.35;*/
	font-weight: 700;
	color: var(--ink);
	/*padding-right: 30px;*/
	padding-left: 8px;
}
.card .specialty {
	font-size: 15px;
	color: var(--brand);
	background: var(--brand-tint);
	display: inline-block;
	padding: 4px 10px;
	border-radius: 4px;
	margin-bottom: 10px;
	font-weight: 500;
	align-self: flex-start;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.card .pr {
	font-size: 16px;
	line-height: 1.6;
	color: var(--ink-3);
	flex: 1;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Capability dots */
.cap-group {
	margin-top: 10px;
	padding-top: 10px;
}
.cap-group:first-of-type { border-top: none; padding-top: 0; margin-top: auto; }
.cap-group-title {
	font-size: 14px;
	letter-spacing: .12em;
	color: var(--ink-4);
	font-weight: 600;
	margin-bottom: 6px;
	display: flex; align-items: center; gap: 8px;
}
.cap-group-title::after {
	content: ""; flex: 1; height: 1px; background: var(--line-soft);
}
.cap-dots { display: flex; gap: 5px;flex-wrap: wrap; }
.cap-pill {
	border-radius: 4px;
	font-size: 12px;
	display: grid; place-items: center;
	font-weight: 600;
	color: var(--ink-3);
	background: #f4f7fb;
	border: 1px solid var(--line-soft);
	position: relative;
	overflow: hidden;
	cursor: help;
padding:1px 12px;
}
.cap-pill.yes  { background: var(--brand); color: #fff; border-color: var(--brand); }
.cap-pill.cond { background: var(--warn-tint); color: var(--warn); border-color: #f0d7a0; }
.cap-pill.no   { background: #f4f7fb; color: #b4bfcf; }
.cap-pill[data-tip]:hover::after {
	content: attr(data-tip);
	position: absolute;
	bottom: calc(100% + 6px);
	left: 50%; transform: translateX(-50%);
	background: var(--ink);
	color: #fff;
	padding: 4px 8px;
	border-radius: 4px;
	font-size: 14px;
	white-space: nowrap;
	font-weight: 400;
	z-index: 10;
	pointer-events: none;
}
.card-specialty {
	margin-top: 8px;
	padding: 6px 8px;
	background: var(--brand-tint);
	color: var(--brand);
	border-radius: 4px;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.5;
}
/* ───────── Table ───────── */

.table-wrap {
	background: var(--bg-paper);
	border: 1px solid var(--line);
	overflow: auto;
	max-height: 800px;
	/*border-radius: 12px;box-shadow: var(--shadow-sm);*/
}

table.matrix {
	width: max-content;
	min-width: 1280px;
	border-collapse: separate;
	border-spacing: 0;
	font-size: 12.5px;
	table-layout: auto;
}

table.matrix thead {
	position: sticky;
	top: 0;
	z-index: 20;
}

table.matrix thead tr.group-row th {
	position: sticky;
	top: 0;
	z-index: 21;
	font-size: 14px;
	letter-spacing: .16em;
	color: var(--brand-ink);
	font-weight: 700;
	padding: 10px 6px 4px;
	text-align: center;
	border-bottom: 1px solid var(--line-soft);
	background: var(--bg-tint);
}

table.matrix thead tr.col-row th {
	position: sticky;
	top: 31px;
	z-index: 21;
	font-size: 12px;
	letter-spacing: 0;
	color: var(--ink-2);
	font-weight: 600;
	padding: 8px 4px;
	text-align: center;
	border-bottom: 1px solid var(--line);
	vertical-align: middle;
	line-height: 1.3;
	background: #fff;
	width: 56px;
	min-width: 56px;
	max-width: 56px;
}

table.matrix thead tr.group-row th.head-stick,
table.matrix thead tr.col-row th.company-head {
	position: sticky;
	left: 0;
	background: #fff;
	z-index: 30;
	width: 200px;
	min-width: 200px;
	max-width: 200px;
}

table.matrix thead tr.group-row th.head-stick {
	top: 0;
}

table.matrix thead tr.col-row th.company-head {
	top: 31px;
	text-align: left;
	padding-left: 8px;
	font-size: 12px;
	color: var(--brand-ink);
}

table.matrix tbody td {
	padding: 10px 4px;
	text-align: center;
	border-bottom: 1px solid var(--line-soft);
	background: #fff;
	width: 56px;
	min-width: 56px;
	max-width: 56px;
}

table.matrix tbody tr:hover td {
	background: #f8fbff;
}

table.matrix tbody tr:hover td.company-cell {
	background: var(--brand-tint);
}

table.matrix tbody td.company-cell {
	position: sticky;
	left: 0;
	z-index: 10;
	text-align: left;
	padding: 8px;
	font-weight: 600;
	color: var(--ink);
	cursor: pointer;
	background: #fff;
	border-right: 1px solid var(--line);
	width: 200px;
	min-width: 200px;
	max-width: 200px;
	font-size:14px;
}

table.matrix tbody td.company-cell .row-num {
	font-size: 10px;
	color: var(--ink-4);
	margin-right: 8px;
}

table.matrix tbody td.company-cell .gmp-mini {
	display: inline-block;
	background: var(--ok);
	color: #fff;
	font-size: 9px;
	padding: 1px 5px;
	border-radius: 3px;
	margin-left: 6px;
	vertical-align: middle;
	letter-spacing: .06em;
}

.td-mark {
	display: inline-grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 5px;
	font-weight: 700;
}

.td-mark.yes {
	color: var(--brand);
	font-size: 16px;
}

.td-mark.cond {
	background: var(--warn-tint);
	color: var(--warn);
	border: 1px solid #f0d7a0;
	font-size: 14px;
}

.td-mark.no {
	color: #c9d1dd;
	font-size: 14px;
}

table.matrix thead tr.col-row th:last-child,
table.matrix tbody td.pr-cell {
	width: 225px;
	min-width: 225px;
	max-width: 225px;
}

table.matrix tbody td.pr-cell {
	text-align: left;
	font-size: 14px;
	color: var(--ink-3);
	padding: 10px 14px;
	line-height: 1.5;
}

table.matrix td.sep-left {
	border-left: 2px solid var(--line);
}

table.matrix thead tr.col-row th:nth-child(8),
table.matrix tbody td.specialty-cell {
	width: 160px;
	min-width: 160px;
	max-width: 160px;
}

table.matrix tbody td.specialty-cell {
	text-align: left;
	font-size: 13.5px;
	color: var(--ink-3);
	padding: 8px;
	line-height: 1.5;
}


/* ───────── Empty ───────── */
.empty {
	padding: 80px 20px;
	text-align: center;
	color: var(--ink-3);
	background: var(--bg-paper);
	border: 1px dashed var(--line);
	border-radius: 12px;
}
.empty h3 {
	font-weight: 700;
	margin: 0 0 8px;
	color: var(--ink);
}

/* ───────── Modal ───────── */
.modal-backdrop {
	position: fixed; inset: 0;
	background: rgba(11,31,53,.5);
	backdrop-filter: blur(4px);
	display: none;
	z-index: 100;
	align-items: center; justify-content: center;
	padding: 40px 20px;
	animation: fadeIn .15s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal-backdrop.open { display: flex; }
.modal {
	background: #fff;
	max-width: 760px;
	width: 100%;
	max-height: 90vh;
	overflow: auto;
	box-shadow: var(--shadow-lg);
	animation: pop .18s ease;
}
@keyframes pop { from { transform: translateY(8px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-head {
	background: linear-gradient(135deg, var(--brand-2), var(--brand));
	color: #fff;
	padding: 26px 32px 22px;
	position: relative;
}
.modal-head h2 {
	font-size: 26px;
	margin: 4px 0 8px;
	line-height: 1.25;
	text-align: left;
}
.modal-head h2::after {
	display: none;
}
.modal-section .modal-specialty {
	margin-top: 12px;
	padding: 10px 12px;
	background: var(--brand-tint);
	color: var(--brand);
	border-radius: 4px;
	font-size: 14px;
	font-weight: 500;
}
.modal-close {
	position: absolute;
	top: 16px; right: 16px;
	width: 36px; height: 36px;
	background: rgba(255,255,255,.15);
	border: none;
	color: #fff;
	border-radius: 50%;
	font-size: 20px;
	cursor: pointer;
	display: grid; place-items: center;
}
.modal-close:hover { background: rgba(255,255,255,.28); }
.modal-body { padding: 26px 32px 32px; }
.modal-section { margin-bottom: 24px; }
.modal-section h4 {
	font-size: 14px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--brand);
	font-weight: 700;
	margin: 0 0 12px;
}
.section-item {
	border: 1px solid var(--line-soft);
	background:#f4f7fb;
    padding: 8px;
    border-radius: 8px;
}
.modal-caps { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.modal-cap {
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 10px 12px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 14px;
	background: #fafcfe;
}
.modal-cap.yes { border-color: var(--brand); background: var(--brand-tint); }
.modal-cap.cond { border-color: #f0d7a0; background: var(--warn-tint); }
.modal-cap.no { opacity: .5; }
.modal-pr {
	background: var(--bg-tint);
	padding: 16px 18px;
	border-radius: 8px;
	font-size: 14px;
	line-height: 1.7;
	color: var(--ink-2);
}
.contact-grid {
	display: grid;
	grid-template-columns: 90px 1fr;
	gap: 10px 16px;
	font-size: 14px;
}
.contact-grid dt {
	font-size: 14px;
	color: var(--ink-3);
	letter-spacing: .1em;
	padding-top: 2px;
}
.contact-grid dd {
	margin: 0;
	color: var(--ink);
	word-break: break-all;
}
.contact-grid a {
	text-decoration: none;
	color: var(--ink);
}


@media (min-width: 768px) and (max-width: 1024px) {
	
}

@media (max-height: 480px) and (orientation: landscape) {
	.oem-wrap {padding:0;}
	.chip {font-size:14px;}
	table.matrix thead tr.group-row th.head-stick,
	table.matrix thead tr.col-row th.company-head,
	table.matrix tbody td.company-cell {position: static;left: auto;z-index: auto;}
	table.matrix tbody tr:hover td.company-cell {background: #f8fbff;}
}

@media (max-width: 767.98px) {
	.oem-wrap {padding:0;}
	.filter-row {display: flex;flex-direction:column;}
	.legend-title {width:100%;border-right:none;}
	.chip {font-size:14px;}
	.toolbar-right {flex-wrap:wrap;}
	.toolbar-lead {width:100%;}
	table.matrix thead tr.group-row th.head-stick,
	table.matrix thead tr.col-row th.company-head,
	table.matrix tbody td.company-cell {position: static;left: auto;z-index: auto;}
	table.matrix tbody tr:hover td.company-cell {background: #f8fbff;}
	
}




/* ───────── Print ───────── */
/*@media print {
	@page { size: A3 landscape; margin: 10mm; }
	body { background: #fff; }
	.oem-wrap { max-width: none; padding: 0; }
	.filters, .toolbar, .modal-backdrop, .chip, .view-toggle, .search, .reset-btn { display: none !important; }
	.masthead {
		background: var(--brand-2) !important;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
		padding: 14px 20px;
	}
	.masthead h1 { font-size: 22px; }
	.legend-strip { margin: 10px 0; padding: 8px 14px; }
	.cards { grid-template-columns: repeat(3, 1fr); gap: 8px; }
	.card { page-break-inside: avoid; min-height: auto; padding: 12px; box-shadow: none !important; }
	.card h3 { font-size: 15px; }
	table.matrix { font-size: 10px; min-width: 0; }
	table.matrix thead { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
	* { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}*/