.wp-block-table {
	margin-block-start: var(--wp--preset--spacing--40);
	margin-block-end: var(--wp--preset--spacing--30);

	&.is-style-price-col2 {
		.plan {
			padding: 0 2rem;
			color: var(--wp--preset--color--dark-01);
			font-size: var(--wp--preset--font-size--medium);
			background-color: var(--wp--preset--color--white);
			border-radius: 100vw;
		}

		.price {
			font-weight: 700;
			font-size: var(--wp--preset--font-size--xx-large);
			font-family: var(--wp--preset--font-family--google-sans);
		}

		table {
			width: 100%;
			table-layout: fixed;
			background-color: var(--wp--preset--color--alto-05);
			@media (width <= 768px) {
				width: var(--wp--style--global--wide-size);
			}
		}

		th,
		td {
			padding: 1rem;
			text-align: center;
			vertical-align: middle;
			border: 2px solid var(--wp--preset--color--light-01);
		}

		thead {
			border-block-end: 0;
			tr {
				th {
					--pxlm-color-plan-00: #e8b109;
					--pxlm-color-plan-01: #8fcc00;

					&:nth-child(1) {
						color: var(--wp--preset--color--light-01);
						background-color: var(--pxlm-color-plan-00);

						.plan {
							color: var(--pxlm-color-plan-00);
						}
					}

					&:nth-child(2) {
						color: var(--wp--preset--color--light-01);
						background-color: var(--pxlm-color-plan-01);

						.plan {
							color: var(--pxlm-color-plan-01);
						}
					}

					span {
						display: block;
						font-size: 2rem;
					}
				}
			}
		}

		tbody {
			tr {
				th {
					color: var(--wp--preset--color--light-01);
					background-color: var(--wp--preset--color--dark-02);
				}

				td {
					text-align: center;
				}
			}
		}
	}

	&.is-style-price-col3 {
		.plan {
			padding: 0 2rem;
			color: var(--wp--preset--color--dark-01);
			font-size: var(--wp--preset--font-size--medium);
			background-color: var(--wp--preset--color--white);
			border-radius: 100vw;
		}

		.price {
			font-weight: 700;
			font-size: var(--wp--preset--font-size--xx-large);
			font-family: var(--wp--preset--font-family--google-sans);
		}

		table {
			width: 100%;
			table-layout: fixed;
			background-color: var(--wp--preset--color--alto-05);
			@media (width <= 768px) {
				width: var(--wp--style--global--wide-size);
			}
		}

		th,
		td {
			padding: 1rem;
			text-align: center;
			vertical-align: middle;
			border: 2px solid var(--wp--preset--color--light-01);
		}

		thead {
			border-block-end: 0;
			tr {
				th {
					--pxlm-color-plan-01: #8fcc00;
					--pxlm-color-plan-02: #0ac27e;
					--pxlm-color-plan-03: #00a1e6;

					&:nth-child(1) {
						color: var(--wp--preset--color--light-01);
						background-color: var(--pxlm-color-plan-01);

						.plan {
							color: var(--pxlm-color-plan-01);
						}
					}

					&:nth-child(2) {
						color: var(--wp--preset--color--light-01);
						background-color: var(--pxlm-color-plan-02);

						.plan {
							color: var(--pxlm-color-plan-02);
						}
					}

					&:nth-child(3) {
						color: var(--wp--preset--color--light-01);
						background-color: var(--pxlm-color-plan-03);

						.plan {
							color: var(--pxlm-color-plan-03);
						}
					}

					span {
						display: block;
						font-size: 2rem;
					}
				}
			}
		}

		tbody {
			tr {
				th {
					color: var(--wp--preset--color--light-01);
					background-color: var(--wp--preset--color--dark-02);
				}

				td {
					text-align: center;
				}
			}
		}
	}

	&.is-style-fee-type-01 {
		@media (width <= 768px) {
			max-width: calc(100vw - 2rem);
			margin-inline-end: auto;
			margin-inline-start: auto;
		}

		table {
			@media (width <= 768px) {
				width: 880px;
			}
			width: 100%;
			background-color: var(--wp--preset--color--alto-05);
		}

		th,
		td {
			padding: 1rem;
			text-align: center;
			vertical-align: middle;
			border: 2px solid var(--wp--preset--color--light-01);
		}

		thead {
			tr {
				th {
					&:nth-child(1) {
						@media (width <= 768px) {
							width: 30%;
						}
						background-color: transparent;
					}

					&:nth-child(2) {
						color: var(--wp--preset--color--light-01);
						background-color: rgb(0, 185, 185);
					}

					&:nth-child(3) {
						color: var(--wp--preset--color--light-01);
						background-color: rgb(80, 125, 255);
					}

					&:nth-child(4) {
						color: var(--wp--preset--color--light-01);
						background-color: rgb(234, 167, 39);
					}

					span {
						display: block;
						font-size: 2rem;
					}
				}
			}
		}

		tbody {
			tr {
				th {
					color: var(--wp--preset--color--light-01);
					background-color: var(--wp--preset--color--dark-02);
				}

				td {
					text-align: center;
				}
			}
		}
	}

	&.is-style-fee-type-02 {
		@media (width <= 768px) {
			max-width: calc(100vw - 2rem);
			margin-inline-end: auto;
			margin-inline-start: auto;
		}

		table {
			@media (width <= 768px) {
				width: 880px;
			}
			width: 100%;
		}

		th,
		td {
			@media (width <= 768px) {
				padding: 0.5rem 1rem;
			}
			padding: 1rem 1rem;
			border: 2px solid var(--wp--preset--color--light-01);
		}

		thead {
			border-bottom: 0;

			tr {
				th {
					text-align: center;

					&:nth-of-type(1) {
						width: 30%;
						color: var(--wp--preset--color--light-01);
						background-color: var(--wp--preset--color--dark-02);
					}

					&:nth-of-type(2) {
						width: 45%;
						color: var(--wp--preset--color--light-01);
						background-color: var(--wp--preset--color--dark-02);
					}

					&:nth-of-type(3) {
						color: var(--wp--preset--color--light-01);
						background-color: var(--wp--preset--color--dark-02);
					}

					span {
						font-size: 2rem;
						font-family: "Josefin Sans", sans-serif;
					}
				}
			}
		}

		tbody {
			tr {
				th {
					color: var(--wp--preset--color--dark-01);
					background-color: var(--wp--preset--color--alto-05);
				}

				td {
					&:nth-of-type(2) {
						font-weight: 500;
						font-size: 1.2rem;
					}
				}
			}
		}
	}

	&.is-style-line {
		th,
		td {
			padding: 1rem;
			border: 0;
		}

		table {
			width: 100%;
			max-width: 960px;
			margin: 0 auto 0 auto;

			@media (width <= 768px) {
				width: calc(100vw - 2rem);
			}

			tbody {
				tr {
					th {
						@media (width <= 768px) {
							width: 40%;
						}
					}

					th,
					td {
						@media (width <= 768px) {
							display: block;
							width: 100%;
						}
					}
				}
			}

			tr + tr {
				border-block-start: 1px solid #000;
			}
		}
	}
}