/**
 * core/details のブロックスタイル「FAQ（線で区切る）」 is-style-faq-line（保守LP・2026-10-15）
 *
 * 白い角丸の箱に、灰色の「Q.」＋質問、右端に開閉の矢印。開くと、質問の下に線を引いて、アクセント色の「A.」＋答え。
 * 開閉はブラウザ標準の <details> のまま（JSなし）。既存の「FAQ」（is-style-faq：Q の丸＋グレーの答えの箱）とは別の見た目。
 * Q.・A.・矢印は擬似要素なので theme.json では表現できず、CSS を1枚持つ。
 */

.wp-block-details.is-style-faq-line {
	/* 上下の余白（質問同士の間隔）は、親のブロックの間隔（パネル）に任せる */
	margin-inline: 0;
	padding: clamp(20px, 0.9rem + 1.6vw, 36px);
	border: 1px solid #ebe9e4;
	border-radius: 20px;
	background-color: var(--wp--preset--color--base);
	box-shadow: 0 6px 10px rgba(0, 0, 0, 0.04);
}

.wp-block-details.is-style-faq-line > summary {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: clamp(16px, 0.9rem + 0.3vw, 18px);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.03em;
	list-style: none;
	cursor: pointer;
}

.wp-block-details.is-style-faq-line[open] > summary {
	padding-bottom: 16px;
	border-bottom: 1px solid #ebe9e4;
}

.wp-block-details.is-style-faq-line > summary::-webkit-details-marker {
	display: none;
}

.wp-block-details.is-style-faq-line > summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--lp-accent-dark);
	outline-offset: 4px;
}

/* Q.：灰色の英字 */
.wp-block-details.is-style-faq-line > summary::before {
	content: "Q.";
	flex: none;
	align-self: flex-start;
	color: #b0b0b0;
	font-family: var(--wp--preset--font-family--en);
	font-size: 24px;
	line-height: 1;
	letter-spacing: 0.1em;
}

/* 開閉の矢印：閉じているときは下、開いているときは上 */
.wp-block-details.is-style-faq-line > summary::after {
	content: "";
	flex: none;
	width: 12px;
	height: 24px;
	margin-left: auto;
	background-color: var(--wp--preset--color--contrast);
	-webkit-mask: url("../images/lp/hosyu/faq-chevron.svg") center / 100% no-repeat;
	mask: url("../images/lp/hosyu/faq-chevron.svg") center / 100% no-repeat;
	transform: rotate(90deg);
	transition: transform 0.2s ease;
}

.wp-block-details.is-style-faq-line[open] > summary::after {
	transform: rotate(-90deg);
}

/* 答え：アクセント色の「A.」 */
.wp-block-details.is-style-faq-line > :not(summary) {
	display: flex;
	gap: 12px;
	margin: 24px 0 0;
	font-size: clamp(15px, 0.85rem + 0.2vw, 16px);
	line-height: 1.6;
	letter-spacing: 0.03em;
}

.wp-block-details.is-style-faq-line > p::before {
	content: "A.";
	flex: none;
	color: var(--wp--preset--color--lp-accent);
	font-family: var(--wp--preset--font-family--en);
	font-size: 24px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.1em;
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-details.is-style-faq-line > summary::after { transition: none; }
}