@charset "utf-8";

.qa-nav {
	display: flex;
	justify-content: center;
	gap: 15px;
	max-width: calc(var(--base-width) * 1px + (var(--fs20-val) * 2px));
	width: 100%;
	padding: 0 var(--sp-20);
	margin: 40px auto 80px;
}

.qa-nav li {
	flex: 1;
}

/* ボタン本体（吹き出し部分） */
.qa-nav a {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-org);
	color: var(--color-wh);
	text-decoration: none;
	font-weight: var(--fw-bold);
	font-size: var(--fz-24);
	height: 70px;
	border-radius: 10px;
	transition: background 0.3s;
}

/* 下の三角（ツノ）部分 */
.qa-nav a::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border-style: solid;
	border-width: 12px 10px 0 10px;
	border-color: var(--color-org) transparent transparent transparent;
}


#anc01, #anc02, #anc03, #anc04 {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-org);
	color: var(--color-wh);
	text-decoration: none;
	font-weight: var(--fw-bold);
	font-size: var(--fz-24);
	height: 70px;
	border-radius: 10px;
	margin-bottom: 40px;
}
/* 下の三角（ツノ）部分 */
#anc01::after, #anc02::after, #anc03::after, #anc04::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border-style: solid;
	border-width: 12px 10px 0 10px;
	border-color: var(--color-org) transparent transparent transparent;
}







/* /////////////////////////// */
/* /////////////////////////// */
/* /////////////////////////// */
/* スマホ用 */
@media (max-width:769px) {

	.qa-nav {
		max-width: none;
		flex-direction: column;
		align-items: center;
		gap: 20px;
	}
	
	.qa-nav li {
		width: 100%;
		max-width: none;
	}
	
	.qa-nav a {
		height: 60px;
	}




}