@charset "UTF-8";


/*============================
	alg__contents 
============================*/
.alg__contents {
	padding: 60px 0 150px;
}

.algc__selectwrap {
	width: fit-content;
	position: relative;

	&::before {
		content: "";
		position: absolute;
		width: 12px;
		height: 6px;
		background: url(../img/allergy/select_arw.png) no-repeat center center/contain;
		top: 50%;
		right: 1em;
		transform: translate(0, -50%);
		z-index: 9;
		pointer-events: none;
	}
}

.algc__select {
	width: fit-content;
	padding: 0 2em;
	font-weight: 500;
	min-width: 12em;
	line-height: 3;
	background: #eee;
	border-radius: 1.5em;
	position: relative;

}

.algc__date {
	white-space: nowrap;
}

.select-contentes {
	display: none;
	opacity: 0;
	transition: opacity 0.5s ease;
}

.select-contentes.is-active {
	display: block;
}

.select-contentes.fade-in {
	opacity: 1;
}

.algc__tbl {
	& th {
		padding: .5em 1em;
		text-align: left;
		align-items: center;
		white-space: nowrap;
		letter-spacing: 0;
		border: solid 1px #F1EAE0;


	}

	& td {
		padding: .5em;
		text-align: center;
		align-items: center;
		white-space: nowrap;
		letter-spacing: 0;
		border: solid 1px #F1EAE0;
	}

	& tr:first-child {
		& th {


			background: #FFC59A;

			&:first-child {
				background-color: #E5E5E5;
			}

			&:nth-child(n + 3) {
				background-color: #FF9A9A;
			}

			&.blank {
				border: none;
				background: #fff;
			}
		}
	}

	& tr:nth-child(2) {
		& th {
			&:first-child {
				background-color: #E5E5E5;
			}

			&:nth-child(n + 2) {
				background-color: #FFC59A;
			}

			&:nth-child(n + 10) {
				background-color: #FF9A9A;

			}
		}
	}

	/* 1列目を固定 */
	& th:first-child,
	& td:first-child {
		position: sticky;
		left: 0;
		z-index: 10;
		background-color: #E5E5E5;
	}
}


@media screen and (max-width:1024px) {
	.alg__contents {
		padding: 60px 0 100px;
	}

	.algc__selectwrap {

		&::before {
			width: 12px;
			height: 6px;
			right: 1em;
		}
	}

	.algc__select {
		padding: 0 2em;
		min-width: 12em;
		line-height: 3;
	}

}

@media screen and (max-width:767px) {
	.alg__contents {
		padding: 60px 0 80px;
	}

	.algc__top {
		display: flex;
		align-items: center;
	}

	.algc__selectwrap {

		&::before {
			width: 12px;
			height: 6px;
			right: 1em;
		}
	}

	.algc__select {
		padding: 0 2em;
		min-width: 12em;
		line-height: 3;
	}

}