/**
 * No.03 FAQリスト（Yoast SEO FAQ ブロックの見た目拡張）。
 * Figma: 1297:44057 / PC 1297:44056 / SP 1297:44234。
 * Q 列 3.5rem、SP の A 列は +1rem。SP/PC 切替は theme.json tablet-small.min（768px）。
 * @media は CSS 変数を使えないため、値を直書きしている。
 */

.faq-list,
.schema-faq.wp-block-yoast-faq-block {
	margin: 0;
	border-top: var(--wp--custom--border-width--thin) solid var(--wp--preset--color--line-grey);
	color: var(--wp--preset--color--base-black);
}

.schema-faq-section {
	position: relative;
	margin: 0;
	padding: 0;
}

.schema-faq-question,
.schema-faq-answer {
	--faq-label-width: 3.5rem;
	position: relative;
	display: block;
	margin: 0;
	padding-block: var(--wp--custom--atom--xxl);
	padding-inline: var(--wp--custom--atom--xxl);
	padding-left: calc(var(--faq-label-width) + var(--wp--custom--atom--xxl));
	border-bottom: var(--wp--custom--border-width--thin) solid var(--wp--preset--color--line-grey);
	box-sizing: border-box;
	font-family: var(--wp--preset--font-family--jp-sans);
	line-height: var(--wp--custom--line-height--relax);
	letter-spacing: var(--wp--custom--letter-spacing--none);
	overflow-wrap: anywhere;
}

.schema-faq-question::before,
.schema-faq-answer::before {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: var(--faq-label-width);
	display: flex;
	justify-content: center;
	box-sizing: border-box;
	font-family: var(--wp--preset--font-family--en-sans);
	color: var(--wp--preset--color--base-black);
}

.schema-faq-question::after,
.schema-faq-answer::after {
	content: "";
	position: absolute;
	left: var(--faq-label-width);
	top: 0;
	bottom: 0;
	width: var(--wp--custom--border-width--thin);
	background: var(--wp--preset--color--line-grey);
}

.schema-faq-question {
	font-size: var(--wp--preset--font-size--text-md);
	font-weight: var(--wp--custom--font-weight--medium);
}

.schema-faq-question::before {
	content: "Q";
	align-items: flex-start;
	padding-top: var(--wp--custom--atom--xxl);
	font-size: var(--wp--preset--font-size--text-lg);
	font-weight: var(--wp--custom--font-weight--semibold);
	line-height: var(--wp--custom--line-height--relax);
}

.schema-faq-answer {
	font-size: var(--wp--preset--font-size--text-sm);
	font-weight: var(--wp--custom--font-weight--regular);
}

.schema-faq-answer::before {
	content: "A";
	align-items: flex-start;
	padding-top: var(--wp--custom--atom--xxl);
	font-size: var(--wp--preset--font-size--text-lg);
	font-weight: var(--wp--custom--font-weight--semibold);
	line-height: var(--wp--custom--line-height--regular);
}

.faq-list__toggle {
	display: none;
	position: absolute;
	top: var(--wp--custom--atom--lg);
	right: var(--wp--custom--atom--rg);
	z-index: 1;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--base-black);
	cursor: pointer;
	line-height: 0;
	appearance: none;
}

.faq-list__toggle .icon {
	inline-size: 1.5rem;
	block-size: 1.5rem;
}

.faq-list__toggle [data-icon="minus"] {
	display: none;
}

.faq-list__toggle[data-state="open"] [data-icon="plus"] {
	display: none;
}

.faq-list__toggle[data-state="open"] [data-icon="minus"] {
	display: inline-flex;
}

.faq-list__toggle:focus {
	outline: none;
}

.faq-list__toggle:focus-visible {
	outline: 1px solid var(--wp--preset--color--logo-blue);
	outline-offset: 2px;
}

@media (max-width: 767px) {
	.schema-faq-question,
	.schema-faq-answer {
		--faq-gutter: var(--wp--custom--molecule--rg);
		padding-block: var(--wp--custom--atom--lg);
		padding-right: var(--faq-gutter);
		padding-left: calc(var(--faq-gutter) + var(--faq-label-width) + var(--wp--custom--atom--lg));
	}

	.schema-faq-question {
		padding-right: calc(var(--faq-gutter) + 1.5rem + var(--wp--custom--atom--rg));
		cursor: pointer;
	}

	.schema-faq-answer {
		--faq-label-width: 4.5rem;
	}

	.schema-faq-question::before,
	.schema-faq-answer::before {
		left: var(--faq-gutter);
		bottom: auto;
		height: auto;
		align-items: flex-start;
		padding-top: var(--wp--custom--atom--lg);
		line-height: var(--wp--custom--line-height--relax);
	}

	.schema-faq-question::after,
	.schema-faq-answer::after {
		left: calc(var(--faq-gutter) + var(--faq-label-width));
	}

	.faq-list__toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		right: var(--wp--custom--molecule--rg);
	}

	/*
	 * 回答の開閉：ドロワーの下層メニュー（site-header.css の SP アコーディオン）と同じ max-height＋フェード、0.5s。
	 * 回答は padding と下線を持つ（border-box で max-height: 0 では閉じきらない）ため、padding-block と線の太さも 0 にする。
	 * --faq-answer-height は faq.js が開く前に測った回答の高さ。JS が無いときは none（全文を表示）。
	 */
	.schema-faq-answer {
		overflow: hidden;
		max-height: var(--faq-answer-height, none);
		transition:
			max-height 0.5s ease,
			opacity 0.5s ease,
			visibility 0.5s ease,
			padding-block 0.5s ease,
			border-bottom-width 0.5s ease;
	}

	.schema-faq-section[data-state="close"] .schema-faq-answer {
		max-height: 0;
		padding-block: 0;
		border-bottom-width: 0;
		opacity: 0;
		visibility: hidden;
	}
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
	.schema-faq-answer {
		transition: none;
	}
}

@media (min-width: 768px) {
	.schema-faq-question {
		--faq-label-inset: var(--wp--custom--organism--xs);
		display: flex;
		align-items: center;
		min-height: 4.25rem;
		padding-left: calc(var(--faq-label-inset) + var(--faq-label-width) + var(--wp--custom--atom--xxl));
		padding-right: var(--wp--custom--organism--xs);
		font-size: var(--wp--preset--font-size--text-lg);
	}

	.schema-faq-answer {
		--faq-label-inset: var(--wp--custom--organism--rg);
		padding-left: calc(var(--faq-label-inset) + var(--faq-label-width) + var(--wp--custom--atom--xxl));
		padding-right: var(--wp--custom--organism--xs);
		font-size: var(--wp--preset--font-size--text-md);
	}

	.schema-faq-question::before,
	.schema-faq-answer::before {
		left: var(--faq-label-inset);
	}

	.schema-faq-question::after,
	.schema-faq-answer::after {
		left: calc(var(--faq-label-inset) + var(--faq-label-width));
	}

	.schema-faq-question::before {
		align-items: center;
		padding-top: 0;
		font-size: var(--wp--preset--font-size--heading-sm);
	}

	.schema-faq-answer::before {
		font-size: var(--wp--preset--font-size--heading-xs);
		font-weight: var(--wp--custom--font-weight--medium);
	}
}