/* .wp-block-table */
.wp-block-table {
	width: 100%;
	margin-block-start: 2rem;
	margin-block-end: 1rem;

	.has-fixed-layout {
		table-layout: fixed;
	}

	caption {
		margin-block-start: 0;
	}

	&.is-style-left-head-col2 {
		table {
			width: 100%;

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

			tbody {
				tr {
					> *:first-child {
						width: 25%;
						background-color: var(--wp--preset--color--primary-light);
						border-inline-end: 0;

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

			tr + tr {
				@media (width < 768px) {
					border-block-start: 1px solid var(--wp--preset--color--border);
				}
			}

			th,
			td {
				padding: 1rem;
				vertical-align: middle;
				border: 1px solid var(--wp--preset--color--border);
				@media (width < 768px) {
					padding: 0.5rem;
				}
			}

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

			tr {
				> * {
					&:nth-child(1) {
						text-align: center;
					}
				}
			}

			@media (width < 768px) {
				border: 1px solid var(--wp--preset--color--border);
			}
		}
	}

	&.is-style-separate {
		width: 100%;
		max-width: var(--wp--style--global--content-size);
		overflow: hidden;

		table {
			width: 100%;
			background-color: var(--wp--preset--color--light-02);
			border: 0;

			tbody {
				tr {
					th,
					td {
						@media (width < 768px) {
							padding: 1rem;
						}
						padding: 1.5rem;
						vertical-align: middle;
						border: 0;
					}

					th {
						@media (width < 768px) {
							width: 35%;
						}
						font-weight: 400;
					}

					+ tr {
						border-block-start: 1px solid var(--wp--preset--color--border);
					}
				}
			}
		}
	}

	&.is-style-fee-col2,
	&.is-style-fee-col3 {
		figcaption {
			margin-block-start: 1rem;
			text-align: start;
		}

		table {
			width: 100%;

			th {
				font-weight: 700;
				text-align: center;
				background-color: var(--wp--preset--color--alto-05);
			}

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

				&:empty {
					@media (width < 768px) {
						display: none;
					}
				}
			}

			tr {
				td {
					&:last-of-type {
						font-weight: 700;
						font-size: var(--wp--preset--font-size--x-large);
						font-family: var(--wp--preset--font-family--serif);
						letter-spacing: 0.2rem;
						text-align: end;
					}
				}

				+ tr {
					th:not(:empty) {
						border-block-start: 1px solid var(--wp--preset--color--border);

						~ td {
							border-block-start: 1px solid var(--wp--preset--color--border);
						}
					}

					td {
						border-block-start: 1px solid var(--wp--preset--color--border);
					}
				}
			}
		}
	}

	&.is-style-fee-col2 {}

	&.is-style-fee-col3 {}

	&.is-style-time {
		margin-block-start: 2rem;
		width: 100%;
		
	caption-side: bottom;

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

	th,
	td {
		padding: 0.5rem 1rem;
		text-align: center;
		@media (width < 768px) {
			padding: 0;
		}
	}

	tbody {
		tr {
			+ tr {
				border-block-start: 1px solid var(--wp--preset--color--border);
			}
		}
	}

	thead {
		tr {
			background-color: var(--wp--preset--color--secondary-light);
		}
	}

	caption,
	figcaption {
		padding-block-start: 1rem;
	}

	.circle {
		color: var(--wp--preset--color--secondary);
	}

	@media (width < 768px) {
		font-size: 0.7rem;

		th,
		td {
			border: 1px solid var(--wp--preset--color--border);
		}
	}

	}

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

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

			tbody {
				th {
					width: 20%;
					background-color: var(--wp--preset--color--primary-light);
				}
			}

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

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

	&.is-style-ivf-01,
	&.is-style-ivf-02,
	&.is-style-ivf-03 {
		img[src$="arrow-icon-size3.svg"] {
			width: 35px;
		}
	}

	&.is-style-ivf-01 {
		table {
			width: 100%;
			/* border: 1px solid var(--wp--preset--color--border); */

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

			tbody {
				border-block-start: 1px solid var(--wp--preset--color--border);

				th,
				td {
					text-align: center;
				}

				tr {
					td {
						&:nth-of-type(4) {
							text-align: start;
						}
					}
				}
			}

			th,
			td {
				padding: 1rem;
				vertical-align: middle;
			}

			th {
				width: 20%;
				background-color: var(--wp--preset--color--primary-light);
			}

			tr {
				+ tr {
					border-block-start: 1px solid var(--wp--preset--color--border);
				}

				> * {
					&:nth-child(1) {
						text-align: center;
					}
				}
			}
		}
	}

	&.is-style-ivf-02 {
		table {
			width: 100%;

			thead {
				th {
					text-align: center;
				}

				+ tbody {
					border-block-start: 1px solid var(--wp--preset--color--border);
				}
			}

			tbody {
				th,
				td {
					text-align: center;
				}

				tr {
					td {
						&:nth-of-type(4) {
							text-align: start;
						}
					}
				}
			}

			th,
			td {
				padding: 1rem;
				vertical-align: middle;
			}

			th {
				width: 20%;
				background-color: var(--wp--preset--color--primary-light);
			}

			tr {
				+ tr {
					border-block-start: 1px solid var(--wp--preset--color--border);
				}
			}
		}
	}

	&.is-style-ivf-03 {
		table {
			width: 100%;

			thead {
				th {
					text-align: center;
				}
			}

			tbody {
				th,
				td {
					text-align: center;
				}
			}

			th,
			td {
				padding: 1rem;
			}

			th {
				width: 20%;
				background-color: var(--wp--preset--color--primary-light);
			}

			tr {
				+ tr {
					border-block-start: 1px solid var(--wp--preset--color--border);
				}

				&:has([rowspan]) {
					+ tr {
						border-block-start: 0;
					}
				}
			}
		}
	}

	&.js-scrollable {
		table {
			@media (width < 768px) {
				width: 1080px;
			}
		}

		.scroll-hint-icon-wrap {
			display: none;
			@media (width < 768px) {
				display: block;
			}
		}
	}
}