/*
 * 記事内コンポーネント
 * POINT / WHY / EXAM / CHECK / SUMMARY / MEMO / CAUTION ／ 図解（.snw-figure）
 *
 * ブロックパターン（inc/snw-patterns.php）から挿入すると、このクラスが付く。
 * 使っている記事にだけ読み込まれる。見た目の違いは「左罫線の色」と「地の色」だけにして、
 * 種類が増えても記事がうるさくならないようにしている。
 */

.snw-box {
	--box-rule: var(--snw-navy, #18324a);
	--box-bg: var(--snw-white, #fff);
	--box-label: var(--snw-navy, #18324a);
	margin-block: 2em;
	padding: 20px 22px 22px 24px;
	border-left: 4px solid var(--box-rule);
	background: var(--box-bg);
	color: var(--snw-ink, #20262c);
	line-height: var(--leading-body, 1.9);
}
.snw-box > * + * { margin-top: 0.8em; }
.snw-box > :last-child { margin-bottom: 0; }

.snw-box .snw-box__label {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
	margin: 0 0 10px;
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.5;
	color: var(--box-label);
}
.snw-box .snw-box__label strong {
	font-family: var(--font-accent, sans-serif);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	background: none;
	color: var(--box-label);
}

/* 種類ごとの違い */
.snw-box--point { --box-rule: var(--snw-coral, #df7765); --box-label: var(--snw-coral-ink, #b4513f); }
.snw-box--why { --box-rule: var(--snw-navy, #18324a); --box-bg: var(--snw-blue, #dce9ee); }
.snw-box--exam { --box-rule: var(--snw-navy, #18324a); --box-bg: var(--snw-white, #fff); }
.snw-box--exam .snw-box__label::before {
	content: "";
	width: 100%;
	height: 2px;
	margin-bottom: 8px;
	background: var(--snw-navy, #18324a);
	order: -1;
}
.snw-box--check { --box-rule: var(--snw-navy-700, #2a4a66); --box-bg: var(--snw-ivory-deep, #efece3); }
.snw-box--summary { --box-rule: var(--snw-navy, #18324a); --box-bg: var(--snw-navy, #18324a); --box-label: var(--snw-ivory, #f7f5ef); color: var(--snw-ivory, #f7f5ef); }
.snw-box--summary a { color: inherit; }
.snw-box--memo { --box-rule: var(--snw-line, #d9d5cb); --box-bg: transparent; --box-label: var(--snw-muted, #5b6670); font-size: 0.9375rem; }
.snw-box--caution { --box-rule: var(--snw-coral-ink, #b4513f); --box-bg: #fbeeea; --box-label: var(--snw-coral-ink, #b4513f); }

/* CHECK：開閉式の問い */
.snw-check {
	border-top: 1px solid var(--snw-line, #d9d5cb);
}
.snw-check + .snw-check { margin-top: 0; }
.snw-check > summary {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 0;
	font-weight: 700;
	color: var(--snw-navy, #18324a);
	cursor: pointer;
	list-style: none;
}
.snw-check > summary::-webkit-details-marker { display: none; }
.snw-check > summary::after {
	content: "答えを見る";
	flex: none;
	font-size: 0.8125rem;
	color: var(--snw-coral-ink, #b4513f);
}
.snw-check[open] > summary::after { content: "閉じる"; }
.snw-check > :not(summary) { padding-bottom: 14px; }

/* 図解 */
.snw-figure img { background: var(--snw-white, #fff); }
.snw-figure figcaption { text-align: left; font-size: 0.875rem; color: var(--snw-muted, #5b6670); }