/* ---------------------------------------------------------------------- */
/* 技能講習 */
/* ---------------------------------------------------------------------- */

/* 色 */
.color-red {
	color: var(--rd);
}

/* 見出し */
h1 {
	margin-bottom: 20px;
}

/* 本文 */
article p {
	color: var(--bk);
	padding: 20px;
}

/* ---------------------------------------------------------------------- */
/* 講習を受講できる方 */
/* ---------------------------------------------------------------------- */

/* ベース */
.contact-area {
	padding: 0 20px 40px 20px;
}

/* 見出し */
.eligible h2 {
	padding: 0 20px;
}

.eligible h2 img {
	max-height: 70px;
	width: auto;
}

/* リスト */
.eligible-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	justify-content: center;
	margin: 16px auto;
	padding: 0 20px;
}

.eligible-list li img {
	filter: drop-shadow(0 2px 2px rgb(0 0 0 / 0.25)) drop-shadow(0 8px 16px rgb(0 0 0 / 0.15));
	object-fit: cover;
}

/* テキスト */
.contact-area p {
	color: var(--bk);
	font-size: 16px;
	line-height: var(--lh-s);
}

.contact-area a.hover .color-red {
	text-decoration: underline;
	transition: .3s;
}

/* ボタン */
.kanyu {
	display: flex;
	justify-content: center;
	margin-bottom: 24px;
}

.frow {
	margin-top:12px;
	margin-bottom:12px;
	width: 100%;
}

@container (min-width: 769px) {

	/* ベース */
	.eligible {
		margin: auto;
		max-width: var(--content-w);
		padding-bottom: 70px;
	}

	/* 見出し */
	.eligible h2 {
		margin-bottom: 40px;
	}

	.eligible h2 img {
		max-height: 105px;
		width: auto;
	}

	/* リスト */
	.eligible-list {
		display: flex;
		margin: 0 auto 70px auto;
	}

	/* テキスト */
	.contact-area p {
		font-size: 24px;
	}

	/* ボタン */
	.kanyu {
		display: none;
	}

.frow {
	display: flex;
	justify-content: flex-end;
	margin-right: 0;
}
.frow a { margin-right: 0; }

}

/* ---------------------------------------------------------------------- */
/* 技能講習・特別教育・増改築相談員研修会 */
/* ---------------------------------------------------------------------- */

/* ベース */
.training {
	background-color: var(--gy);
	padding: 20px 20px 70px 20px;
}

/* 見出し */
.training-title {
	border-bottom: 1px solid var(--bk);
	font-size: 18px;
	line-height: var(--lh);
	margin-bottom: 24px;
	padding: 0 10px;
}

/* リスト */
.training-list {
	gap: 16px;
	margin-bottom: 40px;
}

.training-list__item {
	background-color: var(--wh);
	border: 2px solid var(--bl);
	box-shadow: var(--sh-l);
}

.training-list__trigger {
	align-items: center;
	cursor: pointer;
	justify-content: space-between;
	padding: 16px 20px;
	width: 100%;
}

/* 中身が空の項目（開閉しない） */
.training-list__trigger--static {
	cursor: default;
}

.training-list__icon {
	background: var(--bl);
	border-radius: 50%;
	flex-shrink: 0;
	height: 20px;
	position: relative;
	width: 20px;
}

.training-list__icon::before,
.training-list__icon::after {
	background: var(--wh);
	border-radius: 2px;
	content: "";
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	transition: opacity .2s ease;
}

.training-list__icon::before {
	height: 2px;
	width: 12px;
}

.training-list__icon::after {
	height: 12px;
	width: 2px;
}

[aria-expanded="true"] .training-list__icon::after {
	opacity: 0;
}

.training-list__panel {
	border-top: 2px solid var(--bl);
	padding: 20px;
}

.panel-text {
	margin-bottom: 16px;
}

.panel-text p {
	color: var(--bk);
	font-size: 14px;
	line-height: 24px;
}

/* リスト内・単項目（登録番号・受講資格など） */
.training-details-list {
	margin: 0;
}

.training-details-list dt {
	background-color: var(--pp);
	border-bottom: 1px solid var(--bk);
	color: var(--wh);
	font-size: 14px;
	line-height: 20px;
	margin: 0;
	padding: 6px 8px;
	text-align: center;
}

.training-details-list dd {
	border-bottom: 1px solid var(--bk);
	color: var(--bk);
	font-size: 14px;
	line-height: 20px;
	margin: 0;
	padding: 6px 8px;
}

.training-details-list dd:last-of-type {
	border-bottom: none;
}

/* リスト内テーブル（講習内容） */
.panel-table {
	border: 1px solid var(--bk);
	border-radius: var(--r-md);
	box-sizing: border-box;
	overflow: hidden;
}

.training-details-table {
	border-collapse: collapse;
	width: calc(100% + 2px);
	margin: -1px;
}

.training-details-table th {
	background-color: var(--pp);
	border: 1px solid var(--bk);
	color: var(--wh);
	font-size: 14px;
	line-height: 20px;
	padding: 6px 8px;
	text-align: center;
	vertical-align: middle;
}

.training-details-table td {
	border: 1px solid var(--bk);
	color: var(--bk);
	font-size: 14px;
	line-height: 20px;
	padding: 6px 8px;
	vertical-align: middle;
}

/* 講習内容の縦書き列：SPでは使わないので非表示 */
.training-details-table__content-label {
	display: none;
}

/* 学科・実技のラベル列：狭い幅で自動的に折り返す */
.training-details-table__group-label {
	width: 28px;
	word-break: break-all;
}

/* 項目名・時間 */
.training-details-table__title {
	text-align: left;
}

.training-details-table__time {
	text-align: right;
	white-space: nowrap;
}

/* 表の下の補足テキスト */
.panel-note {
	margin-top: 16px;
}

.panel-note p {
	color: var(--bk);
	font-size: 14px;
	line-height: 24px;
}

/* 講習申し込み */
.contact-list {
	gap: 8px;
	margin-top: 16px;
}

.contact-list li a {
	opacity: 1;
	transition: var(--tr);
}

.contact-list li a:hover {
	opacity: 0.7;
	transition: var(--tr);
}

.contact-list li a img {
	box-shadow: var(--sh-l);
}

/* リンク項目のホバー（増改築相談員研修会など） */
a.training-list__trigger:hover {
	background-color: var(--bl);
	color: var(--wh);
	transition: var(--tr);
}

a.training-list__trigger:hover .training-list__icon {
	background: var(--wh);
}

a.training-list__trigger:hover .training-list__icon::before,
a.training-list__trigger:hover .training-list__icon::after {
	background: var(--bl);
}

@container (min-width: 769px) {

	/* ベース */
	article p {
		padding: 70px 20px;
	}

	.training {
		padding: 70px 20px 100px 20px;
	}

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

	/* リスト */
	.training-list {
		gap: 24px;
		margin: auto;
		margin-bottom: 70px;
		max-width: var(--content-w);
	}

	.training-list__trigger {
		font-size: 20px;
		line-height: var(--lh);
		padding: 16px 64px;
	}

	.training-list__panel {
		padding: 40px 64px;
	}

	.panel-text p {
		font-size: 18px;
		line-height: 36px;
	}

	/* 単項目：PCではラベル・内容を横並びに */
	.training-details-list {
		display: grid;
		grid-template-columns: 158px 1fr;
		margin-bottom: 0;
	}

	.training-details-list dt {
		align-content: center;
		border-right: 1px solid var(--bk);
		font-size: 18px;
		line-height: 36px;
		padding: 8px 0;
	}

	.training-details-list dd,
	.training-details-table th,
	.training-details-table td {
		font-size: 18px;
		line-height: 36px;
	}

	/* 講習内容の見出し行：PCでは使わないので非表示 */
	.training-details-table__content-heading {
		display: none;
	}

	/* 講習内容の縦書き列：PCで表示（グループ名列とセットの幅） */
	.training-details-table__content-label {
		display: table-cell;
		width: 48px;
		word-break: break-all;
	}

	/* グループ名列が無い場合：講習内容列を単独ラベルとして単項目リストと同じ幅に */
	.training-details-table--no-group .training-details-table__content-label {
		width: 158px;
	}

	/* 学科・実技のラベル列：PC用の幅 */
	.training-details-table__group-label {
		width: 110px;
	}

	/* 表の下の補足テキスト */
	.panel-note {
		margin-top: 24px;
	}

	.panel-note p {
		font-size: 18px;
		line-height: 36px;
	}

	/* 講習申し込み */
	.contact-list {
		gap: 16px;
	}

}

/* ---------------------------------------------------------------------- */
/* 講習スケジュールカレンダー */
/* ---------------------------------------------------------------------- */

/* ベース */
.calendar {
	background-color: var(--bl-lt);
	padding: 40px 20px;
}

/* 見出し */
.calendar h2 {
	margin-bottom: 40px;
	display: flex;
	align-items: center;
	color: var(--bl);
	font-size: 18px;
	font-weight: 800;
	gap: 12px;
	justify-content: center;
	max-height: 100%;
}

.calendar h2 img {
	/*height: 36px;*/
	max-height: 45px; /*30px;*/
	width: auto;
	vertical-align: text-bottom;
}

/* カレンダー */
.calendar iframe {
	border-radius: var(--r-md);
	margin: auto;
	max-width: 100%;
	width: 100%;
}

.calendar .schedule-calendar-container {
	border-radius: var(--r-md);
	margin: auto;
	max-width: 100%;
	width: 100%;
	height: 500px;
}

@container (min-width: 769px) {

	/* ベース */
	.calendar {
		padding: 100px 0;
	}

	/* 見出し */
	.calendar h2 {
		margin-bottom: 70px;
		font-size: 30px;
	}

	.calendar h2 img {
		height: 72px;
	}

	/* カレンダー */
	.calendar iframe {
		display: flex;
		filter: drop-shadow(0 0 20px var(--sd));
		justify-content: center;
		max-width: var(--content-w);
	}
	
	.calendar .schedule-calendar-container {
		filter: drop-shadow(0 0 20px var(--sd));
		justify-content: center;
		max-width: var(--content-w);
	}

}