@charset "utf-8";

.table-wrap {
	overflow-x: auto;
	max-width: 100%;
}

#csv-table {
	border-collapse: separate; /* ← 変更 */
	border-spacing: 0;
	min-width: max-content;
	overflow-y: auto;
}
#csv-table tbody tr:nth-child(even) td:nth-child(n + 2) {
	background: var(--base7);
}

#csv-table th,
#csv-table td {
	border: 1px solid #ccc;
	padding: 8px;
	background: #fff;
}
td {
	border: var(--primaryUltraLight) solid 1px;
	color: var(--base1);
	padding: 0 1vw;
	text-align: center;
	background: var(--base8);
}
th {
	color: var(--base1);
	padding: 0 1vw;
	text-align: center;
	background: var(--primaryUltraLight);
}
/* ===== 列幅を固定 ===== */
#csv-table th:nth-child(1) {
	width: 140px;
	min-width: 100px;
}

#csv-table th:nth-child(2),
#csv-table td:nth-child(2) {
	width: calc(80px, 5vw, 120px);
}

/* ===== 1列目固定 ===== */
#csv-table th:nth-child(1),
#csv-table td:nth-child(1) {
	position: sticky;
	left: 0;
	z-index: 4;
	background: var(--primaryUltraLight);
	padding: 10px;
	text-align: left;
}

/* ヘッダー前面 */
#csv-table thead th {
	position: sticky;
	top: 0;
	z-index: 5;
	background: var(--primaryUltraLight);
}

.table-wrap {
	overflow-x: auto;
	overflow-y: auto; /* ← 追加 */
	-webkit-overflow-scrolling: touch; /* iOS用 */
	max-height: 80vh;
	cursor: grab;
}
#csv-table th:nth-child(1) {
	z-index: 6;
}
.table-wrap.dragging {
	cursor: grabbing;
}

.table {
	border: var(--primaryUltraLight) solid 1px;
}
@media screen and (max-width: 1023px) {
	/* ===== 列幅を固定 ===== */
	#csv-table th:nth-child(1) {
		width: 20vw;
		min-width: 80px;
	}

	#csv-table th:nth-child(2),
	#csv-table td:nth-child(2) {
		width: calc(20px, 5vw, 80px);
	}

	/* ===== 1列目固定 ===== */
	#csv-table th:nth-child(1),
	#csv-table td:nth-child(1) {
		position: sticky;
		left: 0;
		z-index: 4;
		background: var(--primaryUltraLight);
		padding: 5px;
		text-align: left;
	}
	/* ヘッダー前面 */
	#csv-table thead th {
		position: sticky;
		top: 0;
		z-index: 5;
		background: var(--primaryUltraLight);
	}
	.table-wrap {
		overflow-x: auto;
		max-width: 100%;
		-webkit-overflow-scrolling: touch; /* iOS用 */
	}
	.table-wrap {
		overflow-x: auto;
		overflow-y: auto; /* ← 追加 */
		max-height: 80vh;
		cursor: grab;
	}
	#csv-table th:nth-child(1) {
		z-index: 6;
	}
	.table-wrap.dragging {
		cursor: grabbing;
	}

	.table {
		border: var(--primaryUltraLight) solid 1px;
	}
}