/*
 * BOX #001
 *
 * 見出し付きの囲み。本文から浮かせて読ませる。
 * 色は配色から取る。種類ごとに色を決め打ちすると、サイトの配色から浮くため。
 * 見出しの置き場所は 3 通り。枠の中、枠の線に重ねる、枠の外。
 */

.wpp-minimal-box-001.wpp-minimal-box-001 {
	--wpp-minimal-box-001-c: var(--wpparts-c);
	--wpp-minimal-box-001-ink: var(--wpparts-ink);
	--wpp-minimal-box-001-line: color-mix(in srgb, var(--wpp-minimal-box-001-c) 34%, transparent);
	--wpp-minimal-box-001-tint: color-mix(in srgb, var(--wpp-minimal-box-001-c) 5%, transparent);
	--wpp-minimal-box-001-pad: 1.6em;

	position: relative;
	margin-block: 2.4em;
	padding: var(--wpp-minimal-box-001-pad);
	background: var(--wpp-minimal-box-001-tint);
	color: var(--wpp-minimal-box-001-ink);
	line-height: 1.9;
}

.wpp-minimal-box-001.wpp-minimal-box-001 .wpp-minimal-box-001__head {
	display: flex;
	align-items: center;
	gap: .5em;
	margin: 0 0 .7em;
	padding: 0;
	background: none;
	border: 0;
	color: var(--wpp-minimal-box-001-c);
	font-size: .95em;
	font-weight: 700;
	letter-spacing: .06em;
	line-height: 1.5;
}

.wpp-minimal-box-001.wpp-minimal-box-001 .wpp-minimal-box-001__icon {
	display: inline-flex;
	flex: 0 0 auto;
}

.wpp-minimal-box-001.wpp-minimal-box-001 .wpp-minimal-box-001__icon svg {
	width: 1.15em;
	height: 1.15em;
}

.wpp-minimal-box-001.wpp-minimal-box-001 .wpp-minimal-box-001__body {
	font-size: .95em;
}

.wpp-minimal-box-001.wpp-minimal-box-001 .wpp-minimal-box-001__body > *:first-child {
	margin-top: 0;
}

.wpp-minimal-box-001.wpp-minimal-box-001 .wpp-minimal-box-001__body > *:last-child {
	margin-bottom: 0;
}

/* 枠 */
.wpp-minimal-box-001.wpp-minimal-box-001[data-frame="none"] {
	border: 0;
}

.wpp-minimal-box-001.wpp-minimal-box-001[data-frame="thin"] {
	border: 1px solid var(--wpp-minimal-box-001-line);
}

.wpp-minimal-box-001.wpp-minimal-box-001[data-frame="thick"] {
	border: 1px solid var(--wpp-minimal-box-001-line);
	border-left: 3px solid var(--wpp-minimal-box-001-c);
}

/* 見出しを枠の線に重ねる */
.wpp-minimal-box-001.wpp-minimal-box-001[data-title-place="edge"] {
	margin-top: 3em;
}

.wpp-minimal-box-001.wpp-minimal-box-001[data-title-place="edge"] .wpp-minimal-box-001__head {
	position: absolute;
	top: 0;
	left: 1.2em;
	transform: translateY(-50%);
	margin: 0;
	padding: .15em .8em;

	/* 枠の線を切って見せるので、記事の地の色を敷く */
	background: var(--wpparts-surface, #ffffff);
}

/* 見出しを枠の外に出す */
.wpp-minimal-box-001.wpp-minimal-box-001[data-title-place="outside"] {
	margin-top: 3em;
}

.wpp-minimal-box-001.wpp-minimal-box-001[data-title-place="outside"] .wpp-minimal-box-001__head {
	position: absolute;
	bottom: 100%;
	left: 0;
	margin: 0 0 .5em;
	padding: 0;
}

/* 内側の余白 */
.wpp-minimal-box-001.wpp-minimal-box-001[data-pad="narrow"] {
	--wpp-minimal-box-001-pad: 1em;
}

.wpp-minimal-box-001.wpp-minimal-box-001[data-pad="wide"] {
	--wpp-minimal-box-001-pad: 2.4em;
}

/*
 * 画面に入ったときの動き。
 *
 * 合図は本体が出す。html.wpp-motion が付いたときだけ動く姿から始めるので、
 * スクリプトが動かない環境では、最初から完成した姿で出る。
 * 動きを減らす設定の環境では動かさない。
 */

.wpp-motion .wpp-minimal-box-001.wpp-minimal-box-001[data-motion="soft"] {
	opacity: 0;
	transform: translateY(.6em);
	transition: opacity .55s ease, transform .55s cubic-bezier(.22, .61, .36, 1);
}

.wpp-motion .wpp-minimal-box-001.wpp-minimal-box-001[data-motion="soft"].wpp-in-view {
	opacity: 1;
	transform: none;
}

.wpp-motion .wpp-minimal-box-001.wpp-minimal-box-001[data-motion="soft"] .wpp-minimal-box-001__icon {
	opacity: 0;
	transform: scale(.6);
	transition: opacity .4s ease .25s, transform .4s cubic-bezier(.22, .61, .36, 1) .25s;
}

.wpp-motion .wpp-minimal-box-001.wpp-minimal-box-001[data-motion="soft"].wpp-in-view .wpp-minimal-box-001__icon {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {

	.wpp-motion .wpp-minimal-box-001.wpp-minimal-box-001[data-motion="soft"] {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.wpp-motion .wpp-minimal-box-001.wpp-minimal-box-001[data-motion="soft"] .wpp-minimal-box-001__icon {
		opacity: 1;
		transform: none;
		transition: none;
	}

}