/*
 * STEP #001
 *
 * 手順。横に並べると幅で崩れるので、縦積みだけにしてある。
 * 番号は CSS の counter で振る。行を入れ替えても振り直す手間がない。
 */

.wpp-minimal-step-001.wpp-minimal-step-001 {
	--wpp-minimal-step-001-c: var(--wpparts-c);
	--wpp-minimal-step-001-on-c: var(--wpparts-on-c);
	--wpp-minimal-step-001-ink: var(--wpparts-ink);
	--wpp-minimal-step-001-muted: var(--wpparts-muted);
	--wpp-minimal-step-001-line: color-mix(in srgb, var(--wpp-minimal-step-001-c) 30%, transparent);
	--wpp-minimal-step-001-size: 2em;

	margin-block: 2.5em;
	color: var(--wpp-minimal-step-001-ink);
	line-height: 1.9;
}

.wpp-minimal-step-001.wpp-minimal-step-001 .wpp-minimal-step-001__titleRow {
	display: flex;
	align-items: center;
	gap: .5em;
	margin: 0 0 1.2em;
	padding: 0;
	background: none;
	border: 0;
	font-size: 1.1em;
	font-weight: 700;
	letter-spacing: .06em;
}

.wpp-minimal-step-001.wpp-minimal-step-001 .wpp-minimal-step-001__icon {
	display: inline-flex;
	flex: 0 0 auto;
	color: var(--wpp-minimal-step-001-c);
}

.wpp-minimal-step-001.wpp-minimal-step-001 .wpp-minimal-step-001__icon svg {
	width: 1.2em;
	height: 1.2em;
}

.wpp-minimal-step-001.wpp-minimal-step-001 .wpp-minimal-step-001__list {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: wpp-minimal-step-001;
}

.wpp-minimal-step-001.wpp-minimal-step-001 .wpp-minimal-step-001__item {
	position: relative;
	margin: 0;
	padding: 0 0 1.6em calc(var(--wpp-minimal-step-001-size) + 1em);
	list-style: none;
	counter-increment: wpp-minimal-step-001;
}

.wpp-minimal-step-001.wpp-minimal-step-001 .wpp-minimal-step-001__item:last-child {
	padding-bottom: 0;
}

/* 番号 */
.wpp-minimal-step-001.wpp-minimal-step-001 .wpp-minimal-step-001__item::before {
	content: counter(wpp-minimal-step-001);
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--wpp-minimal-step-001-size);
	height: var(--wpp-minimal-step-001-size);
	border: 1px solid var(--wpp-minimal-step-001-c);
	border-radius: 50%;
	color: var(--wpp-minimal-step-001-c);
	font-size: .8em;
	font-weight: 700;
	line-height: 1;
}

/* 縦線でつなぐ */
.wpp-minimal-step-001.wpp-minimal-step-001[data-shape="line"] .wpp-minimal-step-001__item::after {
	content: "";
	position: absolute;
	top: calc(var(--wpp-minimal-step-001-size) + .4em);
	bottom: .4em;
	left: calc(var(--wpp-minimal-step-001-size) / 2);
	width: 1px;
	background: var(--wpp-minimal-step-001-line);
}

.wpp-minimal-step-001.wpp-minimal-step-001[data-shape="line"] .wpp-minimal-step-001__item:last-child::after {
	content: none;
}

.wpp-minimal-step-001.wpp-minimal-step-001 .wpp-minimal-step-001__head {
	margin: .1em 0 .3em;
	padding: 0;
	background: none;
	border: 0;
	font-size: 1em;
	font-weight: 700;
	line-height: 1.6;
}

.wpp-minimal-step-001.wpp-minimal-step-001 .wpp-minimal-step-001__body {
	color: var(--wpp-minimal-step-001-muted);
	font-size: .92em;
}

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

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

/* 見出しを中央に置く。見出しが無いときは、そもそも何も出ない */
.wpp-minimal-step-001.wpp-minimal-step-001[data-title-place="center"] .wpp-minimal-step-001__titleRow {
	justify-content: center;
	text-align: center;
}

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

.wpp-motion .wpp-minimal-step-001.wpp-minimal-step-001[data-motion="soft"] .wpp-minimal-step-001__item::after {
	transform: scaleY(0);
	transform-origin: top center;
	transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}

.wpp-motion .wpp-minimal-step-001.wpp-minimal-step-001[data-motion="soft"].wpp-in-view .wpp-minimal-step-001__item::after {
	transform: none;
}

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

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

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

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

.wpp-motion .wpp-minimal-step-001.wpp-minimal-step-001[data-motion="soft"] .wpp-minimal-step-001__body {
	opacity: 0;
	transition: opacity .5s ease;
}

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

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

	.wpp-motion .wpp-minimal-step-001.wpp-minimal-step-001[data-motion="soft"] .wpp-minimal-step-001__item::after {
		transform: none;
		transition: none;
	}

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

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

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

}

/* 上から順に出す */

.wpp-motion .wpp-minimal-step-001.wpp-minimal-step-001[data-motion="soft"] .wpp-minimal-step-001__item:nth-child(1)::before {
	transition-delay: 0.08s;
}

.wpp-motion .wpp-minimal-step-001.wpp-minimal-step-001[data-motion="soft"] .wpp-minimal-step-001__item:nth-child(2)::before {
	transition-delay: 0.16s;
}

.wpp-motion .wpp-minimal-step-001.wpp-minimal-step-001[data-motion="soft"] .wpp-minimal-step-001__item:nth-child(3)::before {
	transition-delay: 0.24s;
}

.wpp-motion .wpp-minimal-step-001.wpp-minimal-step-001[data-motion="soft"] .wpp-minimal-step-001__item:nth-child(4)::before {
	transition-delay: 0.32s;
}

.wpp-motion .wpp-minimal-step-001.wpp-minimal-step-001[data-motion="soft"] .wpp-minimal-step-001__item:nth-child(5)::before {
	transition-delay: 0.40s;
}

.wpp-motion .wpp-minimal-step-001.wpp-minimal-step-001[data-motion="soft"] .wpp-minimal-step-001__item:nth-child(6)::before {
	transition-delay: 0.48s;
}