ul.wp-block-list {
	&.is-style-default {
		padding-left: 20px;
		list-style: disc;
	}
}

ol.wp-block-list {
	&.is-style-default {
		padding-left: 20px;
		list-style: decimal;
	}
}

.wp-block-list {
	&:not(.wp-block-post-template) {
		margin-block-start: 2rem;
		margin-block-end: 1rem;
	}

	&.is-style-default {
		padding-left: 1.5rem;
		line-height: 1.9;
		list-style: disc;

		li {
			+ li {
				margin-block-start: 0.5rem;
			}
		}

		&.has-background {
			padding: 1rem 2.5rem;
			border-radius: 0.5rem;
		}
	}

	&.is-style-check {
		display: grid;
		grid-template-columns: 1fr;
		gap: 1rem;

		li {
			position: relative;
			padding-left: calc(var(--font-size-2xl) * 1.5);

			ion-icon {
				position: absolute;
				top: 6px;
				left: 0;
				color: var(--wp--preset--color--primary);
				font-size: var(--font-size-2xl);
			}
		}
	}

	&.is-style-point1 {
		display: grid;
		grid-template-columns: 1fr;
		gap: 1rem;
		color: var(--color-dark-01);

		li {
			position: relative;
			padding-left: 1.5rem;
		}

		ion-icon {
			position: absolute;
			left: 0;
			flex: none;
			margin-block-start: 0.5rem;
			color: var(--wp--preset--color--primary);
			font-size: var(--font-size-xs);
		}
	}

	&.is-style-num {
		padding-left: 1.5rem;
		line-height: 1.9;
		list-style-type: decimal;

		li {
			+ li {
				margin-block-start: 1rem;
			}
		}
	}

	&.is-style-page-list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 0.5rem;

		@media (width < 768px) {
			grid-template-columns: 1fr;
		}

		li {
			display: flex;
			align-items: center;
			padding: 0.5rem 1rem;
			overflow: hidden;
		}

		.link {
			padding: 0;

			a {
				display: flex;
				gap: 0.5rem;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				padding: 0.5rem 1rem;
				color: var(--wp--preset--color--primary);
				border: 1px solid var(--wp--preset--color--primary);
				border-radius: 100vw;

				&:hover {
					color: var(--color-light-01);
					background-color: var(--wp--preset--color--primary);
				}
			}
		}
	}

	&.is-style-step-bar {
		position: relative;
		display: flex;
		max-width: 400px;
		margin: 2rem auto;
		text-align: center;

		li {
			position: relative;
			width: calc(100% / 3);

			+ li {
				&::after {
					position: absolute;
					top: calc(25px - 2px);
					left: calc(-50% + 25px);
					width: calc(100% - 50px);
					height: 1px;
					background-color: var(--wp--preset--color--primary);
					content: "";
				}
			}

			span {
				display: inline-block;
				width: 50px;
				height: 50px;
				margin-block-end: 5px;
				color: #fff;
				line-height: 50px;
				background-color: var(--wp--preset--color--primary);
				border-radius: 50%;
			}

			&.visited {
				&::after {
					background-color: var(--wp--preset--color--primary);
				}

				span {
					color: var(--wp--preset--color--primary);
					background-color: var(--color-white);
					border: 1px solid var(--wp--preset--color--primary);
				}
			}
		}
	}

	&.is-style-ol-point1 {
		padding-left: 2rem;
		list-style-type: decimal;

		li {
			&::marker {
				font-weight: 700;
				font-size: var(--font-size-xl);
				font-family: var(--font-family-alto-01);
			}
		}
	}

	+ h2 {
		margin-block-start: 4rem;
	}
}