/* ---------------------------------------------------------------------- */
/* 埼玉土建本部 */
/* ---------------------------------------------------------------------- */

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

article p {
	padding: 0;
}

/* リスト */
.headquarters-list li {
	border-radius: var(--r-md);
	box-shadow: var(--sh-s);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.headquarters-list li h3 {
	background-color: var(--bl);
	color: var(--wh);
	display: flex;
	font-size: 16px;
	height: 50px;
	line-height: var(--lh);
	padding: 10px;
}

.address-box,
.info-box {
	padding: 10px 10px 13px 10px;
}

.address-box address,
.info-box p {
	color: var(--bk);
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	margin-bottom: 5px;
}

.info-box {
	background-color: var(--gy);
}

/* ボタン */
.bl-button {
	height: 34px;
	width: 258px;
}

@container (min-width: 769px) {

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

	/* リスト */
	.headquarters-list {
		margin: auto;
		max-width: var(--content-w);
	}

	.headquarters-list li {
		align-self: center;
		display: grid;
		grid-template-columns: 250px 1fr 250px;
	}

	.headquarters-list li .bl-button {
		height: 40px;
		margin-left: 0;
		width: auto;
	}

	.button-row {
		display: flex;
		justify-content: flex-start;
	}

	.headquarters-list li h3 {
		align-items: center;
		font-size: 20px;
		height: 100%;
		justify-content: center;
		padding: 10px 20px;
	}

	.address-box,
	.info-box {
		padding: 20px;
	}

	.headquarters-list li address,
	.info-box p {
		font-size: 18px;
		line-height: 30px;
	}

	.headquarters-list li address {
		margin-bottom: 10px;
	}

	.info-box p:first-child {
		margin-bottom: 10px;
	}

}

/* ---------------------------------------------------------------------- */
/* 支部一覧 */
/* ---------------------------------------------------------------------- */

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

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

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

.branch-list li h3 {
	align-items: center;
	color: var(--wh);
	display: flex;
	font-size: 16px;
	height: 50px;
	line-height: var(--lh);
	padding: 0 10px;
}

.bg-violet {
	background-color: var(--pp);
	border: 2px solid var(--pp);
}

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

.branch-list li .address-box,
.region-box {
	background-color: var(--wh);
}

.region-box {
	font-size: 16px;
	gap: 8px;
	line-height: 24px;
	padding: 10px;
}

.label-region {
	align-items: center;
	color: var(--wh);
	display: flex;
	height: 24px;
	justify-content: center;
	width: 84px;
}

@container (min-width: 769px) {

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

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

	/* リスト */
	.branch-list {
		margin: auto;
		max-width: var(--content-w);
	}

	.branch-list li {
		align-self: center;
		display: grid;
		grid-template-columns: 250px 1fr 1fr 200px;
	}

	.branch-list li h3 {
		align-items: center;
		display: flex;
		font-size: 20px;
		height: 100%;
		justify-content: center;
		padding: 20px;
	}

	.branch-list li .bl-button {
		height: 40px;
		margin-left: 0;
		width: auto;
	}

	.branch-list li .address-box address {
		font-size: 18px;
		line-height: 30px;
	}

	.region-box {
		flex-direction: column;
		padding: 0;
	}

	.label-region {
		height: 35px;
		width: 100%;
	}

	.region-text {
		align-items: center;
		display: flex;
		font-size: 18px;
		height: 100%;
		padding: 0 15px;
	}

	.branch-list li:nth-child(even) .info-box {
		background-color: var(--wh);
	}

	.branch-list li:nth-child(even) .address-box,
	.branch-list li:nth-child(even) .region-box {
		background-color: var(--gy);
	}

}

/* ---------------------------------------------------------------------- */
/* mapボタン（本部・支部共通） */
/* ---------------------------------------------------------------------- */

.map-button {
	gap: 7px;
}

.map-button::before {
	-webkit-mask-image: url(../img/icon/icon-pin.svg);
	-webkit-mask-position: center;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	background-color: currentcolor;
	content: "";
	flex-shrink: 0;
	height: 1.1em;
	mask-image: url(../img/icon/icon-pin.svg);
	mask-position: center;
	mask-repeat: no-repeat;
	mask-size: contain;
	width: 1.1em;
}