.c-quote-box {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	width: fit-content;
	max-width: 100%;
}

.c-quote-box__label {
	position: relative;
	z-index: 2;
	background: var(--color-office);
	color: #fff;
	padding: 8px 24px;
	border-radius: 999px;
	font-size: var(--fs-base);
	font-weight: var(--font-weight-medium);
	line-height: 1.5;
	text-align: center;
	margin-bottom: -16px;
	max-width: 100%;
}

.c-quote-box--primary .c-quote-box__label {
	background: var(--color-primary);
}

.c-quote-box__body {
	position: relative;
	background: #fff;
	border: 1px solid var(--color-office);
	padding: 32px 20px;
	display: flex;
	align-items: center;
	gap: 12px;
}

.c-quote-box--primary .c-quote-box__body {
	border-color: var(--color-primary);
}

/* ラベルなし時は枠線・内側余白を消し、引用符と本文だけ表示 */
.c-quote-box--no-label .c-quote-box__body {
	border: none;
	padding: 0;
}

.c-quote-box__mark {
	flex-shrink: 0;
	color: var(--color-office);
	font-size: 24px;
	line-height: 1;
	font-weight: var(--font-weight-bold);
}

.c-quote-box__mark--left {
	align-self: flex-start;
}

.c-quote-box__mark--right {
	align-self: flex-end;
}

.c-quote-box--primary .c-quote-box__mark {
	color: var(--color-primary);
}

.c-quote-box__text {
	flex: 1;
	/* SP は画面幅に合わせて縮め、狭い端末でも語の途中で折り返さないようにする */
	font-size: clamp(12px, calc(6.6vw - 9px), var(--fs-md));
	font-weight: var(--font-weight-bold);
	color: var(--color-office);
	line-height: var(--line-height-body);
	text-align: center;
}

.c-quote-box--primary .c-quote-box__text {
	color: var(--color-primary);
}

.c-quote-box__text > p {
	margin: 0;
	display: inline;
	padding: 0 6px;
	background: linear-gradient(to top, var(--color-office-bg) 30%, transparent 30%);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.c-quote-box--primary .c-quote-box__text > p {
	background: linear-gradient(to top, var(--color-primary-bg) 30%, transparent 30%);
}

/* リッチテキストの <strong> = サイズと傍点で強調（下線は本文全体に適用済み） */
.c-quote-box__text strong {
	font-size: 1.25em;
	font-weight: inherit;
	-webkit-text-emphasis-style: filled dot;
	text-emphasis-style: filled dot;
	-webkit-text-emphasis-position: over;
	text-emphasis-position: over;
	-webkit-text-emphasis-color: currentColor;
	text-emphasis-color: currentColor;
}

@media (min-width: 768px) {
	.c-quote-box__label {
		padding: 10px 32px;
		margin-bottom: -20px;
	}

	.c-quote-box__body {
		padding: 48px 40px;
		gap: 24px;
	}

	.c-quote-box__mark {
		font-size: 64px;
	}

	.c-quote-box__text {
		font-size: var(--fs-lg);
	}

	.c-quote-box__text strong {
		font-size: var(--fs-2xl);
	}
}