ul.wp-block-list {
	margin-block-start: var(--wp--preset--spacing--40);
	margin-inline: auto;
	max-width: var(--wp--custom--container--lv-1);
	width: 100%;

	&.is-style-none {
		list-style: none;
		@media (width < 768px) {
			max-width: calc(100vw - var(--wp--custom--container--gutter));
		}

		li + li {
			margin-block-start: var(--wp--preset--spacing--40);
		}
	}

	&.is-style-check {
		color: var(--wp--preset--color--body-text);
		list-style: none;
		padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
		@media (width < 768px) {
			max-width: calc(100vw - var(--wp--custom--container--gutter));
		}

		li {
			font-size: var(--wp--preset--font-size--larger);
			position: relative;

			& + li {
				margin-block-start: var(--wp--preset--spacing--40);
			}

			> ion-icon.pxlm-ion-icon--list-marker {
				color: var(--wp--preset--color--secondary);
				font-size: var(--wp--preset--font-size--2-xl);
				left: calc(-1 * var(--wp--preset--spacing--60));
				position: absolute;
				text-align: center;
				top: 50%;
				transform: translateY(-50%);
			}
		}
	}

	&.is-style-value {
		color: var(--wp--preset--color--body-text);
		list-style: none;
		padding: var(--wp--preset--spacing--50) 0 var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
		@media (width < 768px) {
			max-width: calc(100vw - var(--wp--custom--container--gutter));
		}

		li {
			font-family: var(--wp--preset--font-family--ryo-display-plusn);
			font-size: var(--wp--preset--font-size--larger);
			position: relative;

			& + li {
				margin-block-start: var(--wp--preset--spacing--40);
			}

			> ion-icon.pxlm-ion-icon--list-marker {
				color: var(--wp--preset--color--secondary);
				font-size: var(--wp--preset--font-size--medium);
				left: calc(-1 * var(--wp--preset--spacing--60));
				position: absolute;
				text-align: center;
				top: 50%;
				transform: translateY(-50%);
			}
		}
	}

	&.is-style-border {
		border: var(--wp--custom--border--width--default) solid var(--wp--preset--color--gray-88);
		color: var(--wp--preset--color--secondary);
		padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60) var(--wp--preset--spacing--50)
			var(--wp--preset--spacing--70);
		@media (width < 768px) {
			max-width: calc(100vw - var(--wp--custom--container--gutter));
		}

		& + .wp-block-paragraph {
			margin-block-start: var(--wp--preset--spacing--40);
		}

		li + li {
			margin-block-start: var(--wp--preset--spacing--40);
		}
	}

	&.is-style-point1 {
		color: var(--wp--preset--color--body-text);
		list-style: none;
		padding: 0 var(--wp--preset--spacing--60);
		@media (width < 768px) {
			max-width: calc(100vw - var(--wp--custom--container--gutter));
		}

		li {
			position: relative;

			& + li {
				margin-block-start: var(--wp--preset--spacing--40);
			}

			&::before {
				color: var(--wp--preset--color--secondary);
				content: "◆";
				font-size: var(--wp--preset--font-size--medium);
				left: calc(-1 * var(--wp--preset--spacing--60));
				position: absolute;
				text-align: center;
			}
		}
	}

	&.is-style-circle {
		color: var(--wp--preset--color--body-text);
		list-style: none;
		padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
		@media (width < 768px) {
			max-width: calc(100vw - var(--wp--custom--container--gutter));
		}

		> li {
			font-size: var(--wp--preset--font-size--larger);
			list-style: none;
			position: relative;

			& + li {
				margin-block-start: var(--wp--preset--spacing--40);
			}

			> ion-icon.pxlm-ion-icon--list-marker {
				color: var(--wp--preset--color--secondary);
				font-size: var(--wp--preset--font-size--2-xl);
				left: calc(-1 * var(--wp--preset--spacing--60));
				position: absolute;
				text-align: center;
				top: 50%;
				transform: translateY(-50%);
			}

			> ul {
				padding-left: var(--wp--preset--spacing--40);
				padding-top: var(--wp--preset--spacing--40);

				li {
					font-size: var(--wp--preset--font-size--medium);
					list-style: none;
					padding-left: var(--wp--preset--spacing--40);
					position: relative;

					& + li {
						margin-block-start: var(--wp--preset--spacing--40);
					}

					> ion-icon.pxlm-ion-icon--list-marker-nested {
						color: var(--wp--preset--color--secondary);
						font-size: var(--wp--preset--font-size--larger);
						left: calc(-1 * var(--wp--preset--spacing--40));
						position: absolute;
						text-align: center;
						top: 50%;
						transform: translateY(-50%);
					}
				}
			}
		}
	}

	&.is-style-default,
	&:not([class*="is-style-"]) {
		padding: 0 0 0 var(--wp--preset--spacing--60);
		@media (width < 768px) {
			max-width: calc(100vw - var(--wp--custom--container--gutter));
		}

		li + li {
			margin-block-start: var(--wp--preset--spacing--40);
		}
	}

	&.is-style-flow-simple {
		list-style: none;
		@media (width < 768px) {
			max-width: calc(100vw - var(--wp--custom--container--gutter));
		}

		li {
			border: var(--wp--custom--border--width--default) solid var(--wp--preset--color--gray-88);
			padding: var(--wp--preset--spacing--40);

			.wp-block-paragraph {
				margin: 0;
				padding: var(--wp--preset--spacing--40);
			}

			h3.wp-block-heading {
				background-color: var(--wp--preset--color--secondary);
				color: var(--wp--preset--color--white);
				font-size: var(--wp--preset--font-size--larger);
				font-weight: 500;
				margin: 0;
				padding: var(--wp--preset--spacing--40);
			}

			& + li {
				margin-block-start: var(--wp--preset--spacing--80);
				position: relative;

				> ion-icon.pxlm-ion-icon--flow-connector {
					bottom: 100%;
					font-size: var(--wp--preset--font-size--2-xl);
					left: 50%;
					position: absolute;
					transform: translate(-50%, -50%);
				}
			}
		}
	}
}

:is(ul.wp-block-list.is-style-pagelist, .entry-content ul.wp-block-page-list) {
	color: var(--wp--preset--color--body-text);
	display: grid;
	gap: var(--wp--preset--spacing--40);
	grid-template-columns: 1fr 1fr;
	list-style: none;
	margin-inline: auto;
	max-width: var(--wp--custom--container--lv-1);
	padding: 0;
	width: 100%;

	@media (width < 768px) {
		grid-template-columns: 1fr;
		max-width: calc(100vw - var(--wp--custom--container--gutter));
	}

	li {
		background-color: var(--wp--preset--color--overlay-light);
		border: var(--wp--custom--border--width--default) solid var(--wp--preset--color--gray-88);
		padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40) var(--wp--preset--spacing--40)
			var(--wp--preset--spacing--50);

		&:is(.link, .wp-block-pages-list__item) {
			background-color: transparent;
			border: 0;
			padding: 0;

			a {
				background-color: transparent;
				border: var(--wp--custom--border--width--default) solid var(--wp--preset--color--gray-88);
				color: var(--wp--preset--color--secondary);
				display: block;
				overflow: hidden;
				padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40)
					var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
				position: relative;
				text-decoration: none;
				transition-duration: var(--wp--custom--transition--duration);
				transition-timing-function: var(--wp--custom--transition--easeout-quint);
				z-index: 1;

				@media (width < 768px) {
					padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--80)
						var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
				}

				&:hover {
					color: var(--wp--preset--color--white);

					&::before {
						left: -15%;
					}
				}

				&:focus-visible {
					outline: 2px solid var(--wp--preset--color--primary);
					outline-offset: 3px;
				}

				ion-icon.pxlm-ion-icon--link-trailing {
					color: var(--wp--preset--color--secondary);
					font-size: var(--wp--preset--font-size--larger);
					position: absolute;
					right: var(--wp--preset--spacing--50);
					top: 50%;
					transform: translateY(-50%);
				}

				&::before {
					background-color: var(--wp--preset--color--secondary);
					content: "";
					height: 100%;
					left: -105%;
					position: absolute;
					top: 0;
					transform: skew(-15deg);
					transition-duration: 1s;
					transition-property: all;
					transition-timing-function: var(--wp--custom--transition--easeout-quint);
					width: 100%;
					z-index: -1;
				}
			}
		}
	}
}

ol.wp-block-list {
	margin-block-start: var(--wp--preset--spacing--40);
	margin-block-end: 0;
	margin-inline: auto;
	max-width: var(--wp--custom--container--lv-1);
	width: 100%;

	&.is-style-default {
		padding-left: var(--wp--preset--spacing--60);

		li + li {
			margin-block-start: var(--wp--preset--spacing--40);
		}
	}

	&.is-style-ol-point1 {
		counter-reset: count;
		font-size: var(--wp--preset--font-size--body-large);
		@media (width < 768px) {
			font-size: var(--wp--preset--font-size--large);
			max-width: calc(100vw - var(--wp--custom--container--gutter));
		}

		li {
			counter-increment: count;
			list-style: none;
			padding: 0 0 0 var(--wp--preset--spacing--70);
			position: relative;

			& + li {
				margin-block-start: var(--wp--preset--spacing--40);
			}

			&::before {
				color: var(--wp--preset--color--primary);
				content: counter(count);
				font-size: var(--wp--preset--font-size--2-xl);
				left: 0;
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
			}
		}
	}
}
