/* MT 表とグラフ（mu-plugins/mt-tables.php） */

/* グラフ：表ブロックのスタイル「グラフ（円）」「グラフ（棒）」 */
.mt-chart {
	--mt-primary: var(--wp--preset--color--vk-color-primary, #002060);
	--mt-blue: var(--wp--preset--color--vk-color-custom-2, #1d5fbf);
	--mt-gray: var(--wp--preset--color--vk-color-custom-1, #555555);
	--mt-line: var(--wp--preset--color--vk-color-custom-4, #d6dade);
	--mt-pale: var(--wp--preset--color--vk-color-custom-3, #e8f0fa);
	--mt-bg: var(--wp--preset--color--vk-color-custom-5, #f5f6f7);
	margin: 0 0 32px;
	padding: 24px;
	border: 1px solid var(--mt-line);
	border-radius: 8px;
	background: #ffffff;
	color: #1a1a1a;
}
.mt-chart .is-c1 { --mt-c: var(--mt-primary); }
.mt-chart .is-c2 { --mt-c: var(--mt-blue); }
.mt-chart .is-c3 { --mt-c: var(--mt-gray); }
.mt-chart .is-c4 { --mt-c: var(--mt-line); }
.mt-chart .is-c5 { --mt-c: var(--mt-pale); }
.mt-chart .is-c6 { --mt-c: #1a1a1a; }

.entry-body .mt-chart .mt-chart__title {
	margin: 0 0 16px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
	color: #1a1a1a;
}
.entry-body .mt-chart ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.entry-body .mt-chart li {
	margin: 0;
	padding: 0;
	font-size: 14px;
	line-height: 1.5;
}
.mt-chart__value {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* 円 */
.mt-chart__pie {
	display: block;
	width: 100%;
	max-width: 184px;
	margin: 0 auto 24px;
}
.mt-chart__ring,
.mt-chart__seg {
	fill: none;
	stroke-width: 7;
}
.mt-chart__ring { stroke: var(--mt-bg); }
.mt-chart__seg { stroke: var(--mt-c); }
.entry-body .mt-chart .mt-chart__legend {
	display: grid;
	gap: 8px;
	max-width: 240px;
	margin: 0 auto;
}
.entry-body .mt-chart__legend li {
	display: flex;
	align-items: center;
	gap: 8px;
}
.mt-chart__key {
	flex: none;
	width: 12px;
	height: 12px;
	border-radius: 2px;
	background: var(--mt-c);
}
.mt-chart__legend .mt-chart__value { margin-left: auto; }

/* 棒 */
.entry-body .mt-chart .mt-chart__bars {
	display: grid;
	gap: 12px;
	max-width: 640px;
	margin: 0 auto;
}
.entry-body .mt-chart__bars li {
	display: grid;
	grid-template-columns: minmax(4em, auto) 1fr minmax(3em, auto);
	align-items: center;
	gap: 16px;
}
.mt-chart__track {
	display: block;
	width: 100%;
	height: 16px;
	border-radius: 4px;
	background: var(--mt-bg);
}
.mt-chart__bar { fill: var(--mt-blue); }
.is-max .mt-chart__bar { fill: var(--mt-primary); }
.mt-chart__bars .mt-chart__value { text-align: right; }

@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.mt-chart__bar {
			transform-box: fill-box;
			transform-origin: left center;
			animation: mt-chart-grow linear both;
			animation-timeline: view();
			animation-range: entry 10% cover 40%;
		}
		.mt-chart__pie {
			animation: mt-chart-turn linear both;
			animation-timeline: view();
			animation-range: entry 10% cover 40%;
		}
	}
}
@keyframes mt-chart-grow {
	from { transform: scaleX(0); }
}
@keyframes mt-chart-turn {
	from { transform: rotate(-90deg) scale(0.8); opacity: 0; }
}

/* 求人ページ（page_id=15）の表 */
.page-id-15 .entry-body .wp-block-table:not(.mt-chart) {
	margin: 0 0 40px;
}
.page-id-15 .entry-body .wp-block-table table {
	width: 100%;
	border: 1px solid var(--wp--preset--color--vk-color-custom-4, #d6dade);
	border-collapse: separate;
	border-spacing: 0;
	border-radius: 8px;
	overflow: hidden;
	background: #ffffff;
	font-size: 16px;
	line-height: 1.8;
	color: #1a1a1a;
}
.page-id-15 .entry-body .wp-block-table :is(th, td) {
	padding: 16px 20px;
	border: 0;
	border-top: 1px solid var(--wp--preset--color--vk-color-custom-4, #d6dade);
	font-size: inherit;
	text-align: left;
	vertical-align: top;
}
.page-id-15 .entry-body .wp-block-table table > :first-child > tr:first-child > * {
	border-top: 0;
}
.page-id-15 .entry-body .wp-block-table thead {
	border-bottom: 0;
}
.page-id-15 .entry-body .wp-block-table thead th {
	padding: 12px 20px;
	background: var(--wp--preset--color--vk-color-primary, #002060);
	color: #ffffff;
	font-size: 14px;
	font-weight: 700;
	vertical-align: middle;
}
.page-id-15 .entry-body .wp-block-table tbody > tr > :first-child {
	width: 10em;
	background: var(--wp--preset--color--vk-color-custom-3, #e8f0fa);
	font-size: 14px;
	font-weight: 700;
}
.page-id-15 .entry-body .wp-block-table td.is-none {
	color: var(--wp--preset--color--vk-color-custom-1, #555555);
	font-size: 14px;
}

@media (max-width: 600px) {
	.page-id-15 .entry-body .wp-block-table :is(table, tbody, tr, th, td) {
		display: block;
		width: auto;
	}
	.page-id-15 .entry-body .wp-block-table tbody > tr > :first-child {
		width: auto;
		padding: 8px 16px;
	}
	.page-id-15 .entry-body .wp-block-table tbody > tr > :not(:first-child) {
		padding: 12px 16px 16px;
		border-top: 0;
	}
	.page-id-15 .entry-body .mt-table-labeled thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
	.page-id-15 .entry-body .mt-table-labeled tbody > tr > :not(:first-child) {
		padding: 8px 16px;
	}
	.page-id-15 .entry-body .mt-table-labeled tbody > tr {
		padding-bottom: 8px;
	}
	.page-id-15 .entry-body .mt-table-labeled tbody > tr > :not(:first-child)[data-label]::before {
		content: attr(data-label);
		display: block;
		color: var(--wp--preset--color--vk-color-custom-1, #555555);
		font-size: 14px;
		font-weight: 700;
		line-height: 1.5;
	}
	.page-id-15 .entry-body .mt-table-labeled tbody > tr:has(> :nth-child(3):last-child) > :nth-child(2)::before {
		display: none;
	}
	.page-id-15 .entry-body .mt-table-labeled tbody > tr > :not(:first-child):empty {
		display: none;
	}
	.page-id-15 .entry-body .mt-table-labeled tbody tr:first-child > :first-child {
		border-top: 0;
	}
}