/* ---------------------------------------------------------------------- */
/* 技能講習登録番号 */
/* ---------------------------------------------------------------------- */

/* ベース */
.registration {
	padding: 40px 20px;
}

/* 色 */
.bg-blue {
	background-color: var(--bl);
}

.bg-violet {
	background-color: var(--pp);
}

/* 見出し */
.registration h2 {
	border-bottom: 1px solid var(--bk);
	color: var(--bk);
	font-size: 20px;
	margin-bottom: 10px;
	padding-bottom: 10px;
}

.registration-header {
	display: none;
}

.midashi {
	margin-bottom: 10px;
}

/* テキスト */
article p {
	color: var(--bk);
	font-size: 16px;
	line-height: 24px;
	margin-bottom: 0;
	padding: 0;
}

/* リスト */
.registration-list {
	border-radius: var(--r-md);
	box-shadow: var(--sh-s);
	margin-bottom: 13px;
	overflow: hidden;
}

.registration-label {
	align-items: center;
	color: var(--wh);
	display: flex;
	font-size: 16px;
	height: 40px;
	padding: 10px;
}

.registration-text {
	align-items: center;
	background-color: var(--wh);
	display: flex;
	line-height: 24px;
	padding: 10px;
}

.registration-list li:nth-child(even) .registration-text {
	background-color: var(--gy);
}

/* 登録有効期限（最終行だけ横並び） */
.registration-expiry {
	display: flex;
}

.registration-expiry .registration-label {
	height: auto;
}

.registration-expiry .registration-text {
	flex: 1;
}

/* 登録更新年月 */
.update {
	color: var(--bk);
	font-size: 16px;
	line-height: 24px;
}

/* 特定化学物質等 追加テーブル */
.gray-content {
	background-color: var(--gy);
	padding: 40px 20px;
}

@container (min-width: 769px) {

	/* ベース */
	.registration,
	.gray-content {
		padding: 70px 20px;
	}

	/* 見出し */
	.registration h2 {
		font-size: 26px;
		margin: auto auto 40px;
		max-width: var(--content-w);
	}

	.midashi {
		margin-bottom: 40px;
	}

	.registration-header {
		display: contents;
	}

	.registration-header p {
		align-items: center;
		color: var(--wh);
		display: flex;
		height: 40px;
		justify-content: center;
		padding: 10px;
	}

	.registration-header p:nth-child(1) {
		grid-column: 1;
		grid-row: 1;
	}

	.registration-header p:nth-child(2) {
		grid-column: 2;
		grid-row: 1;
	}

	.registration-header p:nth-child(3) {
		grid-column: 3;
		grid-row: 1;
	}

	/* テキスト */
	article p {
		font-size: 18px;
		margin-bottom: 40px;
	}

	/* リスト */
	.registration-list {
		display: grid;
		grid-template-columns: 250px 1fr 250px;
		margin: auto;
		margin-bottom: 30px;
		max-width: var(--content-w);
	}

	.registration-list li {
		display: contents;
	}

	article .registration-list p {
		height: 100%;
		margin-bottom: 0;
		width: 100%;
	}

	.registration-label {
		font-size: 18px;
		height: auto;
		justify-content: center;
		text-align: center;
	}

	.registration-text {
		font-size: 18px;
	}

	/* 列位置を固定（自動配置のズレ防止） */
	.registration-list li:not(.registration-header):not(.registration-expiry) .registration-label {
		grid-column: 1;
	}

	.registration-list li:not(.registration-header):not(.registration-expiry) .registration-text {
		grid-column: 2;
	}

	/* ゼブラ配色（列ごとに互い違い） */
	.registration-list li:not(.registration-header):not(.registration-expiry):nth-child(odd) .registration-label {
		background-color: var(--wh);
		color: var(--bk);
	}

	.registration-list li:not(.registration-header):not(.registration-expiry):nth-child(odd) .registration-text {
		background-color: var(--gy);
	}

	.registration-list li:not(.registration-header):not(.registration-expiry):nth-child(even) .registration-label {
		background-color: var(--gy);
		color: var(--bk);
	}

	.registration-list li:not(.registration-header):not(.registration-expiry):nth-child(even) .registration-text {
		background-color: var(--wh);
	}

	/* 登録有効期限（結合セル） */
	.registration-expiry .registration-label {
		display: none;
	}

	.registration-expiry .registration-text {
		align-items: center;
		background-color: var(--wh);
		display: flex;
		flex-direction: column;
		grid-column: 3;
		grid-row: 2 / 13;
		justify-content: center;
		text-align: center;
	}

	/* 登録更新年月 */
	.update {
		font-size: 18px;
		line-height: 1.6px;
		text-align: right;
	}

	.update br {
		display: none;
	}

	/* 特定化学物質等 追加テーブル（結合セルの行指定を1行分に上書き） */
	.registration-list-tokka .registration-expiry .registration-text {
		grid-row: 2;
	}

}