/* ---------------------------------------------------------------------- */
/* 汎用 */
/* ---------------------------------------------------------------------- */

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

.bg-gray {
	background-color: var(--gy);
}

.bg-pink {
	background-color: var(--pk);
}

.bg-red {
	background-color: var(--rd);
}

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

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

.color-bk {
	color: var(--bk);
}

.color-bl {
	color: var(--bl);
}

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

.blue-content {
	background-color: var(--bl-lt);
	padding: 40px 20px 70px 20px;
}

.blue-inner {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

/* テキスト */
article p {
	color: var(--bk);
	padding: 40px 20px;
}

/* 見出し */
.gray-content h2 {
	display: flex;
	justify-content: center;
	margin-bottom: 16px;
}

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

.blue-content h2 {
	display: flex;
	justify-content: center;
}

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

.blue-content .icon-title {
	align-items: center;
	color: var(--bl);
	font-size: 18px;
	font-weight: 800;
	gap: 12px;
	justify-content: center;
	max-height: 100%;
}

/* リスト */
.three-block {
	display: grid;
	gap: 20px;
	grid-template-columns: 1fr 1fr;
	justify-content: center;
	margin-bottom: 40px;
}

.three-block.can-block {
	flex-direction: column;
}

.fore-block {
	display: grid;
	gap: 20px;
	grid-template-columns: 1fr 1fr;
	margin-bottom: 40px;
}

/* コンテンツ用 */
.wh-area {
	background-color: var(--wh);
	border-radius: var(--r-sm);
	margin-bottom: 40px;
	padding: 40px 20px;
}

.cross-text h3 {
	color: var(--rd);
	font-size: 14px;
	font-weight: 500;
	line-height: 24px;
}

.cross-text p {
	color: var(--bk);
	font-size: 11px;
	line-height: 20px;
}

.cross-ph {
	/* height: 88px; */
	height: auto;
	aspect-ratio: 4/2;
	overflow: hidden;
	width: 100%;
}

.cross-ph img {
	height: 100%;
	object-fit: cover;
	object-position: center;
	width: 100%;
}

.catch-copy {
	color: var(--rd);
	font-size: 16px;
	font-weight: 500;
	line-height: var(--lh-s);
	text-align: center;
}

/* 現在の作成課題（さしがね教室） */
.challenges {
	background-color: var(--wh);
	border-radius: var(--r-lg);
	box-shadow: var(--sh-l);
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 40px 20px 20px 20px;
}
.challenges-content {
	aspect-ratio: 16/9;
	background-color: #ddd;
	height: auto;
	width: 100%;
}
.challenges p {
	color: #000;
	font-size: 16px;
	font-weight: 500;
}

/* 二級建築士受験準備講座部分 */
.architect-text {
	gap: 20px;
}

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

.architect-text p.red-text {
	color: var(--rd);
	font-size: 16px;
	line-height: 24px;
}

/* 日程 */
.schedule-area {
	align-items: center;
	background-color: var(--wh);
	border-radius: var(--r-sm);
	gap: 4px;
	justify-content: center;
	padding: 40px 20px;
}

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

.schedule-area p.arrow {
	color: var(--gy-dk);
}

/* ボタン */
.course-button .bl-button {
	font-size: 14px;
}

@container (min-width: 769px) {

	/* ベース */
	.gray-content,
	.blue-content {
		padding: 140px 20px 100px 20px;
	}

	.blue-content {
		padding-top: 70px;
	}

	.blue-inner {
		gap: 70px;
	}

	.gray-inner {
		margin: auto;
		max-width: var(--content-w);
	}

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

	.gray-content h2 img {
		max-height: 105px;
	}

	.blue-content .icon-title {
		align-items: baseline;
		font-size: 28px;
	}

	/* テキスト */
	article p {
		padding: 70px 20px;
	}

	/* リスト */
	.three-block {
		display: flex;
		gap: 53px;
		margin-bottom: 140px;
	}

	.three-block.can-block {
		flex-direction: row;
	}

	.fore-block {
		gap: 53px;
		margin-bottom: 140px;
		padding: 0 5vw;
	}

	.three-block img, .fore-block img, .howto img {
		filter: drop-shadow(0 2px 2px rgb(0 0 0 / 0.25)) drop-shadow(0 8px 16px rgb(0 0 0 / 0.15));
	}

	/* コンテンツ用 */
	.wh-area {
		border-radius: var(--r-lg);
		box-shadow: var(--sh-l);
		margin-bottom: 140px;
		padding: 70px;
	}

	.cross-text h3 {
		font-size: 20px;
		font-weight: 600;
		line-height: var(--lh-s);
	}

	.cross-text p {
		font-size: 18px;
		line-height: 40px;
	}

	.cross-ph {
		/* aspect-ratio: 4/2; */
		aspect-ratio: 4/3;
		/* height: 200px; */
		height: auto;
	}

	.catch-copy {
		font-size: 26px;
	}

	.catch-copy br {
		display: none;
	}

	/* 現在の作成課題（さしがね教室） */
	.challenges {
		display: grid;
		grid-template-columns: 1fr 1fr;
		align-items: center;
		/*flex-direction: row;*/
		gap: 40px;
		padding: 70px 80px;
	}
	.challenges-content {
		width: 400px;
	}
	.challenges p {
		font-size: 28px;
	}

	/* 二級建築士受験準備講座部分 */
	.architect-text {
		gap: 40px;
		margin: auto;
		max-width: var(--content-w);
		width: 100%;
	}

	.architect-text p, .architect-text p.red-text {
		font-size: 18px;
		font-weight: 700;
		line-height: 180%;
	}

	/* 日程 */
	.schedule-area {
		box-shadow: var(--sh-l);
		border-radius: var(--r-lg);
		margin: auto;
		max-width: var(--content-w);
		padding: 70px 20px;
		width: 100%;
	}

	.schedule-area p {
		font-size: 18px;
	}

	/* ボタン */
	.course-button .bl-button {
		font-size: 18px;
		max-width: 500px;
	}

}

/* ---------------------------------------------------------------------- */
/* クロスコンテンツ（テキスト・画像 交互配置） */
/* ---------------------------------------------------------------------- */

/* SP：ドキュメント順にそのまま縦積み */
.cross-content {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.cross-ph img {
	display: block;
	height: auto;
	max-height: 100%;
	width: 100%;
}

@container (min-width: 769px) {

	/* PC：2列グリッド。奇数組はテキスト→画像、偶数組は画像→テキスト */
	.cross-content {
		align-items: center;
		column-gap: 40px;
		display: grid;
		grid-template-columns: 1fr 1fr;
		row-gap: 20px;
	}

	/* 1組目：テキスト→画像（そのまま） */
	.cross-content > *:not(.catch-copy):nth-child(1) { /* text1 */
		order: 1;
	}

	.cross-content > *:not(.catch-copy):nth-child(2) { /* ph1 */
		order: 2;
	}

	/* 2組目：画像→テキスト（入れ替え） */
	.cross-content > *:not(.catch-copy):nth-child(3) { /* text2 */
		order: 4;
	}

	.cross-content > *:not(.catch-copy):nth-child(4) { /* ph2 */
		order: 3;
	}

	/* 3組目：テキスト→画像（そのまま） */
	.cross-content > *:not(.catch-copy):nth-child(5) { /* text3 */
		order: 5;
	}

	.cross-content > *:not(.catch-copy):nth-child(6) { /* ph3 */
		order: 6;
	}

	/* 4組目：画像→テキスト（入れ替え）※4組パターンがある場合のみ有効になる */
	.cross-content > *:not(.catch-copy):nth-child(7) { /* text4 */
		order: 8;
	}

	.cross-content > *:not(.catch-copy):nth-child(8) { /* ph4 */
		order: 7;
	}

	/* コピーは要素数に関係なく常に最後・全幅で表示 */
	.catch-copy {
		grid-column: 1 / -1;
		order: 9999;
	}

}

/* ---------------------------------------------------------------------- */
/* タブ */
/* ---------------------------------------------------------------------- */

/* タブラベル */
.tabs__nav-item {
	font-size: 14px;
	font-weight: 500;
}

.tabs__nav-button {
	align-items: center;
	border-radius: var(--r-sm) var(--r-sm) 0 0;
	box-sizing: border-box;
	height: 40px;
	max-width: 100%;
	padding: 6px 30px 4px 30px;
}

.electrician-tab.architect-tab .tabs__nav-button {
	padding: 6px 5px 4px 5px;
}

.tabs__nav-button[aria-selected="true"] {
	border-bottom: none;
}

.tab-junbi {
	background-color: var(--wh);
	border: 2px solid var(--bl);
	border-bottom: none;
	color: var(--bl);
}

.tab-taisaku {
	background-color: var(--wh);
	border: 2px solid var(--gd);
	border-bottom: none;
	color: var(--gd);
}

.tab-gakka {
	background-color: var(--wh);
	border: 2px solid var(--rd);
	border-bottom: none;
	color: var(--rd);
}

.tab-junbi[aria-selected="true"] {
	background-color: var(--bl);
	color: var(--wh);
}

.tab-taisaku[aria-selected="true"] {
	background-color: var(--gd);
	color: var(--wh);
}

.tab-gakka[aria-selected="true"] {
	background-color: var(--rd);
	color: var(--wh);
}

@container (min-width: 769px) {

	/* タブラベル */
	.tabs__nav {
		justify-content: flex-start;
		margin: auto;
		max-width: var(--content-w);
	}
	.tabs__nav-button {
		border-radius: var(--r-lg) var(--r-lg) 0 0;
		font-size: 20px;
		height: 62px;
		max-width: 300px;
		width: 100%;
	}

	.electrician-tab.architect-tab .tabs__nav-button {
		padding: 6px 30px 4px 30px;
	}

	/* タブコンテンツ */
	.tabs__panel {
		padding: 0;
	}

}

/* ---------------------------------------------------------------------- */
/* 案内表（受講資格・受講料・講座内容など） */
/* ---------------------------------------------------------------------- */

/* レスポ対応（汎用） */
.sp-only {
	display: flex !important;
}

.pc-only {
	display: none !important;
}

/* SP：縦積みのリストを表示／PC：同じ内容の実tableに差し替える */
.guidelines-list {
	background-color: var(--wh);
	border-radius: var(--r-sm);
	box-shadow: var(--sh-l);
	overflow: hidden;
}

.guidelines-table {
	display: none;
}

/* 項目・行 */
.guidelines-item,
.guidelines-rows {
	display: flex;
	flex-direction: column;
}

.guidelines-row {
	display: grid;
	grid-template-columns: 100px 1fr;
}

/* セル共通 */
.guidelines-list .cell-title {
	align-items: center;
	border-top: 1px solid var(--gy);
	box-sizing: border-box;
	color: var(--bk);
	font-size: 16px;
	font-weight: 500;
	line-height: var(--lh);
	overflow-wrap: anywhere;
	padding: 5px 20px;
	width: 100%;
}

.guidelines-list .cell-content {
	border-top: 1px solid var(--gy);
	box-sizing: border-box;
	overflow-wrap: anywhere;
	padding: 10px;
}

.guidelines-list .cell-title.bg-violet,
.guidelines-list .cell-title.bg-red {
	color: var(--wh);
}

.guidelines-list .cell-content.is-alt {
	background-color: var(--gy);
}

.guidelines-list > .guidelines-item:first-child > .cell-title {
	border-top: none;
}

/* 内訳ラベル（通学の場合・1日目 など） */
.guidelines-list .cell-label {
	border-right: 1px solid var(--gy);
	font-size: 14px;
	justify-content: center;
	line-height: var(--lh-s);
	padding: 5px 10px;
}

/* グループ名（平日夜間・学科講座 など） */
.guidelines-list .cell-group {
	font-size: 14px;
}

/* 補足メモ（合計26回（開校式含む）など） */
.guidelines-row-note {
	border-top: 1px solid var(--gy);
}

.guidelines-list .cell-note {
	color: var(--bk);
	display: block;
	font-size: 18px;
	line-height: var(--lh-s);
	padding: 8px 20px;
	text-align: center;
}

@container (min-width: 769px) {

	/* レスポ対応（汎用） */
	.sp-only {
		display: none !important;
	}

	.pc-only {
		display: flex !important;
	}

	/* SP用リストを隠して実tableを表示する */
	.guidelines-list {
		display: none;
	}

	.guidelines-table {
		background-color: var(--wh);
		border-collapse: separate;
		border-radius: var(--r-lg);
		border-spacing: 0;
		box-shadow: var(--sh-l);
		display: table;
		margin: auto;
		max-width: var(--content-w);
		overflow: hidden;
		table-layout: fixed;
		width: 100%;
	}

	.tabs .guidelines-table {
		border-radius: 0 var(--r-lg) var(--r-lg) var(--r-lg);
	}

	/* 列幅（1列目＋2列目＋3列目＝250px。項目名だけの行はこの3列をcolspanでまとめる） */
	.guidelines-table .col-main {
		width: 60px;
	}

	.guidelines-table .col-group {
		width: 50px;
	}

	.guidelines-table .col-label {
		width: 140px;
	}

	.guidelines-table .col-note {
		width: 165px;
	}

	/* セル共通（罫線は上側だけに付け、rowspanしたセルの内側に線が入らないようにする） */
	.guidelines-table th,
	.guidelines-table td {
		border-top: 1px solid var(--gy);
		box-sizing: border-box;
		overflow-wrap: anywhere;
		padding: 10px;
		vertical-align: middle;
	}

	.guidelines-table tr:first-child th,
	.guidelines-table tr:first-child td {
		border-top: none;
	}

	/* 項目名（受講資格・受講料・講座内容 など） */
	.guidelines-table .cell-title {
		font-size: 20px;
		font-weight: 500;
		line-height: 140%;
		text-align: center;
	}

	.guidelines-table .cell-title.cell-main {
		border-right: 1px solid var(--wh);
	}

	.guidelines-table .cell-title.bg-violet,
	.guidelines-table .cell-title.bg-red {
		color: var(--wh);
	}

	/* 内訳ラベル・グループ名 */
	.guidelines-table .cell-group,
	.guidelines-table .cell-label {
		font-size: 16px;
		line-height: var(--lh-s);
	}

	.guidelines-table .cell-label {
		border-right: 1px solid var(--gy);
	}

	/* 内容 */
	.guidelines-table .cell-content {
		background-color: var(--wh);
		color: var(--bk);
		font-size: 18px;
		line-height: 140%;
		padding: 10px 20px;
		text-align: left;
	}

	.guidelines-table .cell-content.is-alt {
		background-color: var(--gy);
	}

	.guidelines-table .cell-content p {
		font-size: 18px;
		line-height: 140%;
	}
	
	.guidelines-table .cell-content a {
		text-decoration: underline;
		color: revert; /* リンクの色をブラウザデフォルトに戻す */
	}

	/* 補足メモ（合計26回（開校式含む）など） */
	.guidelines-table .cell-note {
		background-color: var(--wh);
		color: var(--bk);
		font-size: 18px;
		line-height: var(--lh-s);
		padding: 10px 20px;
		text-align: center;
	}

}