/* ---------------------------------------------------------------------- */
/* 増改築相談員とは */
/* ---------------------------------------------------------------------- */

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

/* 本文テキスト */
article p {
	color: var(--bk);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.8;
	padding: 40px 20px 24px 20px;
	text-align: justify;
}

@container (min-width: 769px) {

	/* 本文テキスト */
	article p {
		font-size: 18px;
		margin: auto;
		max-width: var(--content-w);
		padding: 70px 20px;
	}

}

/* ---------------------------------------------------------------------- */
/* 住宅建築の実務経験とは */
/* ---------------------------------------------------------------------- */

/* ベース */
.about-construction {
	background-color: var(--pk);
	border-radius: var(--r-lg);
	margin: auto;
	margin-bottom: 24px;
	max-width: calc( 100% - 40px );
	padding: 10px 20px 20px 20px;
}

/* 見出し */
.about-construction h2 {
	border-bottom: 1px solid var(--bk);
	color: var(--bk);
	font-size: 16px;
	font-weight: 500;
	margin-bottom: 6px;
	padding-bottom: 6px;
}

/* テキスト */
.about-construction p {
	color: var(--bk);
	font-size: 14px;
	line-height: 150%;
}

/* ボタン */
.more-button {
	margin-bottom: 40px;
}

@container (min-width: 769px) {

	/* ベース */
	.about-construction {
		margin-bottom: 40px;
		max-width: var(--content-w);
	}

	/* 見出し */
	.about-construction h2 {
		font-size: 20px;
	}

	/* テキスト */
	.about-construction p {
		font-size: 18px;
	}

	/* ボタン */
	.more-button {
		display: flex;
		justify-content: flex-end;
		margin: auto;
		margin-bottom: 70px;
		max-width: var(--content-w);
		width: 100%;
	}

	.more-button a {
		margin-right: 0;
	}

}

/* ---------------------------------------------------------------------- */
/* 増改築相談員ができること＆増改築相談員になるには */
/* ---------------------------------------------------------------------- */

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

/* 見出し */
.cando-howto h2 {
	margin-bottom: 16px;
}

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

/* リスト */
.cando-list {
	gap: 20px;
	grid-template-columns: repeat(2, 1fr);
	margin-bottom: 40px;
}

@container (min-width: 769px) {

	/* ベース */
	.cando-howto {
		padding: 70px 20px 100px 20px;
	}

	/* 見出し */
	.cando-howto h2 {
		margin: auto;
		margin-bottom: 40px;
		max-width: var(--content-w);
	}

	.cando-howto h2 img {
		max-height: 105px;
	}

	/* リスト */
	.cando-list {
		gap: 50px;
		margin: auto;
		margin-bottom: 70px;
		max-width: 750px;
	}

	/* テキスト */
	.howto-maintext {
		margin: auto;
		max-width: var(--content-w);
	}

}

/* ---------------------------------------------------------------------- */
/* 増改築相談員研修会の申請手続き */
/* ---------------------------------------------------------------------- */

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

/* 見出し */
.application h2 {
	margin-bottom: 24px;
}

.application h2 img {
	max-height: 30px;
	width: auto;
}

@container (min-width: 769px) {

	/* ベース */
	.application {
		padding: 70px 20px 100px 20px;
	}

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

	.application h2 img {
		max-height: 72px;
	}

}

/* ---------------------------------------------------------------------- */
/* 申請手続きのタブ */
/* ---------------------------------------------------------------------- */

/* ベース */
.counselor-tab-list {
	margin: auto;
	max-width: calc( 100% - 40px );
}

/* タブラベル */
.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 10px 4px 10px;
}

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

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

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

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

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

@container (min-width: 769px) {

	/* ベース */
	.counselor-tab-list {
		max-width: var(--content-w);
	}

	/* タブラベル */
	.tabs__nav-button {
		border-radius: var(--r-lg) var(--r-lg) 0 0;
		font-size: 20px;
		height: 62px;
		padding: 6px 30px 4px 30px;
	}

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

}