@charset "UTF-8";
@use "variables" as *;

#treatment-case {
	.title-level03 {
		font-size: 2.2rem;
		color: var(--color-primary);
		font-weight: bold;
	}

	.table-case {
		width: 100%;

		td {
			text-align: center;
			border-left: solid 1px #000;
			padding: 5px 10px;
		}

		tr {
			border-bottom: solid 1px #000;
		}

		thead {
			th {
				text-align: center;
				background: color-mix(in srgb, var(--color-secondary) 40%, rgb(255 255 255 / 0));
				padding: 5px 10px;

				&:not(:first-child) {
					border-left: solid 1px #000;
					box-sizing: border-box;
				}
			}
		}

		tbody {
			tr {
				&:nth-child(even) {
					background: color-mix(in srgb, var(--color-secondary) 10%, rgb(255 255 255 / 0));
				}
			}

			th {
				padding: 0 10px;
			}
		}
	}
}

@media all and (min-width: 751px) {

	body.treatment #title {
		background-image: url(../images/treatment/title-bg.jpg);
	}

	/* INDEX */
	#treatment-case {
		margin-bottom: 120px;
	}
}

@media only screen and (max-width: 750px) {

	body.treatment #title {
		background-image: url(../images/treatment/title-bg.jpg);
	}

	/* INDEX */
	#treatment-case {
		.table-case {

			thead {
				th {
					display: none;
				}
			}

			tbody {

				tr {
					width: 100%;

					&:nth-child(even) {
						background: rgb(255 255 255 / 0);
					}
				}

				th {
					display: block;
					font-weight: bold;
					text-align: center;
					padding: 5px 0;
					background: color-mix(in srgb, var(--color-secondary) 40%, rgb(255 255 255 / 0));
				}

				td {
					display: block;
					text-align: right;
					width: 100%;
					border: none;
					padding: 0 15px;

					&:nth-child(odd) {
						background: color-mix(in srgb, var(--color-secondary) 10%, rgb(255 255 255 / 0));
					}

					&:before {
						content: attr(data-label);
						float: left;
						font-weight: bold;
						margin-right: 10px;
					}
				}
			}

		}
	}
}