.wp-block-table {
	margin-block-start: 1.5rem;
	margin-block-end: 1rem;

	&:first-child {
		margin-block-start: 0;
	}

	&:last-child {
		margin-block-end: 0;
	}

	&.is-style-regular,
	&:not([class*="is-style-"]) {
		table {
			thead {
				th {
					color: var(--color-light-01);
					text-align: center;
					background-color: var(--wp--preset--color--primary);
				}
			}

			th,
			td {
				padding: 0.3rem 1rem;
				vertical-align: top;
				border: 1px solid var(--color-border);
			}

			th {
				text-align: center;
				background-color: var(--color-alto-05);
			}

			td {
				+ td {
					@media (width < 768px) {
						margin-block-start: 0;
					}
				}
			}
		}
	}

	&.is-style-col2,
	&.is-style-col3 {
		table {
			th {
				background-color: var(--color-alto-05);
				@media (width < 768px) {
					width: 100px;
				}
			}

			th,
			td {
				padding: 1rem;
				vertical-align: top;
				border: 1px solid var(--color-border);
			}

			thead {
				th {
					color: var(--color-light-01);
					text-align: center;
					background-color: var(--wp--preset--color--primary);
				}
			}

			tbody {
				tr {
					+ tr {
						border-top: 1px solid var(--color-border);
					}
				}
			}

			td {
				+ td {
					@media (width < 768px) {
						margin-block-start: 0;
					}
				}
			}
		}

		figcaption {
			margin-block-start: 0.5rem;
			color: var(--color-dark-02);
			font-size: var(--font-size-xs);
		}
	}

	&.is-style-history {
		width: 100%;

		table {
			width: 100%;

			thead {
				th {
					color: var(--color-light-01);
					text-align: center;
				}
			}

			tbody {
				th {
					width: 20%;
					vertical-align: middle;
					@media (width < 768px) {
						width: 100%;
						border: transparent;
					}
				}
			}

			tr {
				&:nth-child(odd) {
					background-color: var(--color-alto-03);
				}

				+ tr {
					border-top: 1px solid var(--color-border);
					@media (width < 768px) {
						border-top: 0px;
					}
				}
			}

			th,
			td {
				padding: 0.7rem 1rem;
				vertical-align: top;
				border: transparent;
				@media (width < 768px) {
					display: block;
				}
			}

			th {
				color: var(--wp--preset--color--primary);
				font-size: var(--font-size-xl);
				font-family: var(--font-family-serif);
				letter-spacing: 0.2rem;
				text-align: center;

				@media (width < 768px) {
					text-align: left;
				}

				+ td {
					@media (width < 768px) {
						padding-top: 0;
						border-left: 0;
					}
				}
			}

			td {
				+ td {
					@media (width < 768px) {
						margin-block-start: 0;
					}
				}
			}
		}

		.wp-element-caption {
			margin-block-start: 1rem;
		}
	}
}