.wp-block-group {
	&.is-style-default,
	&:not([class*="is-style-"]) {}

	&.is-style-visual {
		background-color: var(--wp--preset--color--primary-light);
		position: relative;
		.swiper-visual {
			inline-size: 100%;
			block-size: min(calc(100dvh - var(--wp-admin--admin-bar--height, 0px)), 1000px);

			.swiper-wrapper {
				inline-size: max(50%, 1000px) !important;
				margin-inline-start: auto !important;
				position: relative;
				mask-image: linear-gradient(to right, transparent 0%, transparent 5%, black 10%);
			}

			.swiper-slide {
				background-color: var(--wp--preset--color--primary-light);
				margin: 0;
				overflow: hidden;

				img {
					inline-size: 100%;
					block-size: 100%;
					object-fit: cover;
					background-color: var(--wp--preset--color--light-01);
				}

				&.swiper-slide-active,
				&.swiper-slide-duplicate-active,
				&.swiper-slide-prev {
					img {
						object-position: 0% center;
						animation: slide-in 10s linear;
					}
				}
			}
		}

		.visual-text {
			position: absolute;
			inset-block: 0;
			inset-inline: 0;
			z-index: 100;
			display: flex;
			align-items: center;
			justify-content: center;

			.content {
				inline-size: 100%;
				font-family: var(--wp--preset--font-family--noto-sans-jp);
				font-variation-settings: var(--wp--custom--font-variation-settings-bold);

				.wp-block-paragraph {
					text-shadow:
						0 0 8px var(--wp--preset--color--light-01),
						0 0 16px var(--wp--preset--color--light-01),
						1px 0 2px var(--wp--preset--color--light-01),
						-1px 0 2px var(--wp--preset--color--light-01),
						0 1px 2px var(--wp--preset--color--light-01),
						0 -1px 2px var(--wp--preset--color--light-01),
						1px 1px 2px var(--wp--preset--color--light-01),
						-1px -1px 2px var(--wp--preset--color--light-01),
						1px -1px 2px var(--wp--preset--color--light-01),
						-1px 1px 2px var(--wp--preset--color--light-01),
						2px 0 3px var(--wp--preset--color--light-01),
						-2px 0 3px var(--wp--preset--color--light-01),
						0 2px 3px var(--wp--preset--color--light-01),
						0 -2px 3px var(--wp--preset--color--light-01);
				}
			}
		}
	}

	&.is-style-service-item {
		border-radius: var(--wp--preset--border-radius--medium);
		box-shadow: var(--wp--preset--shadow--shadow-01);
		position: relative;
		transition: scale 0.3s ease;
		.wp-block-heading {
			a {
				text-decoration: none;
				&::after {
					position: absolute;
					inset: 0;
					content: "";
					inline-size: 100%;
					block-size: 100%;
				}
			}
		}

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

	&.is-style-information {
		display: flex;
		position: relative;
		justify-content: center;
		/* background-color: var(--wp--preset--color--primary); */
		z-index: 100;
		&.active::after {
			transform: scaleX(1);
		}

		&::after {
			position: absolute;
			inset-block-start: 0;
			inset-inline-start: 0;
			z-index: -1;
			inline-size: 50%;
			block-size: 100%;
			background-color: var(--wp--preset--color--primary);
			background-image: linear-gradient(
				135deg,
				color-mix(in srgb, var(--wp--preset--color--primary-medium) 28%, var(--wp--preset--color--primary)) 0%,
				var(--wp--preset--color--primary) 42%,
				var(--wp--preset--color--primary-dark) 100%
			);
			transform: scaleX(0);
			transform-origin: left;
			transition: transform 1s ease;
			content: "";
			border-radius: 0 var(--wp--preset--border-radius--medium) var(--wp--preset--border-radius--medium) 0;
		}

		& > .wp-block-group {
			position: relative;
			z-index: 3;
			inline-size: 100%;
			margin-block-start: -8rem;
			/* box-shadow: var(--wp--preset--shadow--shadow-01); */
		}
	}

	&.is-style-frontpage-about {
		.wp-block-cover {
			display: grid;
			grid-template-rows: repeat(3, auto);
			grid-template-columns: repeat(12, 1fr);

			img {
				grid-row: span 3;
				grid-column: 1 / 8;
				object-fit: cover;
			}

			.wp-block-cover__inner-container {
				z-index: 2;
				grid-area: content;
				grid-row: 1;
				grid-column: 6 / 13;
				align-self: flex-start;
				padding: var(--wp--preset--spacing--50);
				background-color: var(--wp--preset--color--light-01);
				border-radius: var(--wp--preset--border-radius--medium) 0 0 var(--wp--preset--border-radius--medium);
				box-shadow: var(--wp--preset--shadow--shadow-01);
			}
		}

		@media screen and (width < 768px) {
			& > .wp-block-group {
				max-inline-size: calc(100% - 2rem);
			}

			.wp-block-cover {
				grid-template-areas: "image" "content";
				grid-template-columns: 1fr;

				img {
					grid-area: image;
					block-size: 200px;
				}

				.wp-block-cover__inner-container {
					margin-block-start: 1rem;
					padding: 0;
				}
			}
		}
	}

	&.is-style-frontpage-feature {
		position: relative;
		counter-reset: num;
	}

	&.is-style-frontpage-service,
	&.is-style-frontpage-bizup {
		position: relative;

		.wp-block-columns {
			display: grid;
			grid-auto-flow: initial;
			grid-template-columns: repeat(2, 1fr);
			gap: 3rem;

			a {
				text-decoration: none;
			}

			.wp-block-column {
				position: relative;
				z-index: 2;
				gap: 2rem;
				align-self: stretch;
				padding: 2rem;
				/* background-color: var(--wp--preset--color--alto-05); */

				.wp-block-image {
					transition: transform 0.3s ease;
				}

				@media (hover: hover) {
					&:hover .wp-block-image {
						transform: scale(1.1);
					}
				}

				&:active .wp-block-image {
					transform: scale(1.1);
				}

				.wp-block-group {
					display: grid;
					grid-template-columns: repeat(2, 1fr);
					gap: 1rem;
				}
			}

			.wp-block-media-text {
				position: relative;
				grid-template-columns: 80px 1fr;
				gap: 0;
				align-items: center;
				background-color: var(--wp--preset--color--light-01);

				.wp-block-media-text__content {
					padding: 1rem;

					p {
						margin-block-start: 0;
					}
				}

				a {
					display: flex;
					align-items: center;
					line-height: 1.4;

					ion-icon {
						margin-inline-start: 0.5rem;
					}

					&::after {
						position: absolute;
						inset-block: 0;
						inset-inline: 0;
						content: "";
					}
				}
			}
		}

		@media screen and (width < 768px) {
			& > .wp-block-group {
				max-inline-size: calc(100% - 2rem);
			}

			.wp-block-columns {
				grid-template-columns: 1fr;

				& + .wp-block-columns {
					margin-block-start: 1rem;
				}

				.wp-block-column {
					gap: 1rem;

					.wp-block-group {
						grid-template-columns: 1fr;
					}
				}

				.wp-block-media-text {
					grid-template-columns: 60px 1fr;
				}
			}
		}
	}

	&.is-style-frontpage-bizup {
		.is-style-frontpage-title-02 {
			.bizup {
				text-transform: none;
			}

			@media screen and (width < 768px) {
				flex-flow: column;
				align-items: flex-start;

				.ja {
					margin-inline-start: 0;
					margin-block-start: 1rem;
				}
			}
		}
	}

	&.is-style-frontpage-contact {
		position: relative;
		display: flex;
		justify-content: center;
		width: var(--content-width);
		margin-inline-start: calc(50% - var(--content-width) / 2);
		padding-block: 4rem;

		&.active::after {
			transform: scaleY(1);
		}

		&::after {
			position: absolute;
			inset: 0;
			z-index: 1;
			background-color: var(--wp--preset--color--primary);
			background-image: linear-gradient(
				45deg,
				var(--wp--preset--color--primary-medium),
				var(--wp--preset--color--primary),
				var(--wp--preset--color--primary-dark)
			);
			transform: scaleY(0);
			transform-origin: bottom;
			transition: transform 1s ease;
			content: "";
		}

		& > .wp-block-group {
			z-index: 2;
			inline-size: 100%;
			max-inline-size: var(--wp--custom--container-lv0);
			margin-block-start: -8rem;
			padding: 4rem;
			border-block-start: 4px solid var(--wp--preset--color--primary);

			& > .wp-block-group {
				background-color: var(--wp--preset--color--alto-05);
			}
		}

		.contact {
			padding: 2rem;
		}

		.wp-block-buttons {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.wp-block-button {
				display: flex;
				flex: 1;
				align-self: stretch;
				padding: 1rem;

				.wp-block-button__link {
					justify-content: center;
					inline-size: 100%;
				}

				&.call .wp-block-button__link {
					padding: 1rem;
					font-family: var(--wp--preset--font-family--google-sans);
					background-color: var(--wp--preset--color--primary);

					ion-icon {
						font-size: var(--wp--preset--font-size--xx-large);
					}
				}

				&.form .wp-block-button__link {
					padding: 1rem;
					color: var(--wp--preset--color--light-01);
					font-size: var(--wp--preset--font-size--large);
					background-color: var(--wp--preset--color--primary);

					ion-icon {
						font-size: var(--wp--preset--font-size--xx-large);
					}
				}

				& + .wp-block-button::before {
					position: absolute;
					inset-block: 0;
					inset-inline: 0;
					inline-size: 1px;
					block-size: 100%;
					margin-inline: auto;
					background-color: var(--wp--preset--color--primary-medium);
					content: "";
				}
			}
		}

		h2 + p {
			margin-block-start: 2rem;
		}

		p {
			margin-block-start: 1rem;
		}

		body:not(.home) & {
			margin-block-start: 8rem;
			margin-block-end: -4rem;
		}

		@media screen and (width < 768px) {
			& > .wp-block-group {
				max-inline-size: calc(100% - 2rem);
				padding-block: 2rem 0;
				padding-inline: 0;
			}

			.wp-block-buttons {
				flex-flow: column;

				.wp-block-button {
					padding: 0;

					& + .wp-block-button::before {
						display: none;
					}
				}
			}
		}
	}

	&.is-style-corporation {
		padding: 2rem;

		& + .is-style-corporation {
			margin-block-start: 4rem;
		}

		.wp-block-media-text {
			& + * {
				margin-block-start: 2rem;
			}

			@media screen and (width < 768px) {
				grid-template-areas: "media" "content";
				grid-template-columns: 1fr;
			}
		}
	}

	&.is-style-flow {
		display: grid;
		grid-template-columns: 1fr;
		inline-size: 100%;
		max-inline-size: var(--wp--style--global--content-size);
		margin-block-start: 2rem;
		margin-inline: auto;
		counter-reset: flow-count;

		.wp-block-group + .wp-block-group {
			position: relative;
			margin-block-start: 4rem;

			&::before {
				position: absolute;
				inset-inline: 0;
				inset-block-end: calc(100% + 2.5rem);
				inline-size: 0;
				block-size: 0;
				margin-block-start: -2rem;
				margin-inline: auto;
				font-size: var(--wp--preset--font-size--xx-large);
				text-align: center;
				content: "\f27e";
			}
		}

		& > ion-icon {
			margin-block: 1rem;
			margin-inline: auto;
			font-size: var(--wp--preset--font-size--xxxx-large);
		}

		& + p {
			margin-block-start: 1rem;
		}
	}

	&.is-style-flow-item {
		inline-size: 100%;
		max-inline-size: 100%;
		padding: 2rem;
		background-color: var(--wp--preset--color--primary-light);
		border: 1px solid var(--wp--preset--color--border);
		counter-increment: flow-count;

		&.has-background {
			padding: 1rem;
		}

		.wp-block-button__link {
			text-align: center;
		}
	}

	&.is-style-border {
		padding: 3rem;
		border: 1px solid var(--wp--preset--color--border);
	}

	body.home & {
		&.is-style-frontpage-service:first-child,
		&.is-style-frontpage-bizup:first-child {
			padding-block-start: 0;
		}
	}
}

@keyframes slide-in {
	0% {
		object-position: 50% center;
	}
	100% {
		object-position: 80% center;
	}
}