/* ==========================================================================
   かなさホーム — よくある質問（template-parts/kanasa/faq-item.php。Figma p-kanasa-faq__item 55:1372）
   - PC: 幅 960px・1問ずつクリーム地の角丸の箱（上下 24px・左右 28px）。Q（緑の丸）・質問（Kanasa/PC/H4 20px）・＋／−
   - 開くと A（黄の丸）と答え（Body 17px）。SP は箱の内側 20px・16px、丸 36px、質問 17px
   ========================================================================== */

.p-kanasa-faq__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	width: 100%;
	max-width: 960px;
}

.p-kanasa-faq__item {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	padding: var(--space-lg) 28px;
	background: var(--kanasa-bg-canvas);
	border-radius: var(--radius-xl);
}

.p-kanasa-faq__heading {
	font: inherit;
}

.p-kanasa-faq__row {
	display: flex;
	gap: var(--space-md);
	align-items: flex-start;
}

button.p-kanasa-faq__row--q {
	align-items: center;
	width: 100%;
	min-height: 44px;
	padding: 0;
	color: inherit;
	text-align: left;
	background: none;
	border: 0;
	border-radius: var(--radius-md);
}

.p-kanasa-faq__tag {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	font: var(--text-kanasa-label);
	letter-spacing: 0;
	border-radius: 50%;
}

.p-kanasa-faq__tag--q {
	color: var(--kanasa-text-on-green);
	background: var(--kanasa-bg-green-strong);
}

.p-kanasa-faq__tag--a {
	color: var(--kanasa-text-primary);
	background: var(--kanasa-bg-yellow);
}

.p-kanasa-faq__question {
	flex: 1 1 auto;
	min-width: 0;
	font: var(--text-kanasa-h4);
	letter-spacing: var(--ls-kanasa);
	color: var(--kanasa-text-primary);
}

/* 折り返す所（<wbr>。{sp}・{wbr}）を書いた質問は、そこだけで折り返す（SP の細い幅で「できます／か？」と1字だけ落ちないように。2026-10-05）。
   コラムの中の質問など、印のない文はふつうの折り返し（foundation の auto-phrase・pretty） */
.p-kanasa-faq__question:has(wbr) {
	word-break: keep-all;
}

.p-kanasa-faq__toggle {
	display: flex;
	flex-shrink: 0;
	color: var(--kanasa-text-green);
}

.p-kanasa-faq__toggle .c-kanasa-icon {
	width: 24px;
	height: 24px;
}

.p-kanasa-faq__minus,
.p-kanasa-faq__item.is-open .p-kanasa-faq__plus {
	display: none;
}

.p-kanasa-faq__item.is-open .p-kanasa-faq__minus {
	display: inline-block;
}

.p-kanasa-faq__answer {
	flex: 1 1 auto;
	min-width: 0;
	margin-right: calc(var(--ls-kanasa) * -1); /* 行末の字間（0.04em）ぶんで折り返さないように（Figma は行末に字間を足さない） */
	padding-top: 3px; /* A の丸（40px）と1行目の高さをそろえる */
	font: var(--text-kanasa-body);
	letter-spacing: var(--ls-kanasa);
}

@media (hover: hover) {
	button.p-kanasa-faq__row--q:hover .p-kanasa-faq__question {
		color: var(--kanasa-text-green);
	}
}

@media (max-width: 767px) {
	.p-kanasa-faq__list {
		gap: var(--space-sm);
	}

	.p-kanasa-faq__item {
		gap: var(--space-sm);
		padding: 20px var(--space-md);
	}

	.p-kanasa-faq__row {
		gap: var(--space-sm);
	}

	.p-kanasa-faq__tag {
		width: 36px;
		height: 36px;
	}

	.p-kanasa-faq__answer {
		padding-top: 2px;
	}
}