.wp-block-group {
	&.is-style-contact {
		@media (width <= 768px) {
			padding: 3rem 0;
		}
		padding: 4rem 0;
	}

	&.is-style-price {
		display: flex;
		justify-content: center;
		width: var(--content-width);
		margin-inline-start: calc(50% - var(--content-width) / 2);
		padding: {
			top: 4rem;
			bottom: 4rem;
		}

		> .wp-block-group {
			width: 100%;
			max-width: var(--wp--style--global--wide-size);
			@media (width <= 768px) {
				max-width: calc(100% - 2rem);
			}
		}
	}

	&.is-style-content-service {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 1rem;

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

		.wp-block-group {
			margin-block-start: 0;
			padding: 1rem 1.5rem;
			border: 1px solid var(--wp--preset--color--alto-03);

			h4 {
				font-weight: 700;
				font-size: var(--font-size-lg);
			}

			p {
				margin-block-start: 1rem;
				margin-block-end: 0;
				font-size: var(--font-size-sm);
			}
		}
	}

	&.is-style-frontpage-visual {
		position: relative;
		width: var(--content-width);
		height: min(calc(100dvh - var(--wp-admin--admin-bar--height, 0px)),650px);
		margin-block-start: calc(var(--masthead-height) * -1) !important;
		margin-inline-start: calc(50% - var(--content-width) / 2);
		background-color: var(--wp--preset--color--secondary-medium);

		> .wp-block-group {
			width: 100%;
			height: 100%;
		}

		.swiper-visual {
			position: relative;
			height: 100%;
		}

		.swiper-slide {
			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}

		.swiper-text {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
			display: flex;
			align-items: center;
			width: 100%;
			height: 100%;
		}

		.content {
			width: 100%;
			max-width: var(--wp--style--global--wide-size);
			margin-inline-end: auto;
			margin-inline-start: auto;
			color: var(--wp--preset--color--light-01);
			@media (width <= 768px) {
				max-width: calc(100% - 2rem);
			}

			.swiper-text-primary {
				margin-block-end: 2rem;
				font-weight: 700;
				font-size: var(--wp--preset--font-size--x-large);
				line-height: 1.3;
				letter-spacing: 0.2rem;

				@media (width <= 768px) {
					font-size: var(--font-size-2xl);
				}

				span {
					color: var(--wp--preset--color--light-01);
					font-size: 5rem;
					background: linear-gradient(60deg, #ff8c00, #ff0080);
					background-clip: text;
					-webkit-text-fill-color: transparent;

					@media (width <= 768px) {
						font-size: var(--wp--preset--font-size--x-large);
					}
				}
			}

			.swiper-text-secondary {
			}

			.sub {
				@media (width <= 768px) {
					grid-template-columns: 1fr;
				}
				display: grid;
				grid-template-columns: auto auto;
				gap: 1rem;

				div {
					@media (width <= 768px) {
						padding: 0.5rem 1rem;
						font-size: 1rem;
					}
					padding: 0.7rem 2rem;
					font-weight: 500;
					font-size: 1.2rem;
					background-image: linear-gradient(80deg, #0052d3, #01b3d2);

					img {
						width: 30px;
						margin-inline-end: 1rem;
					}
				}
			}

			.scroll {
				@media (width <= 768px) {
					width: 50%;
					margin: 0 auto;
					text-align: center;
				}
				position: absolute;
				right: 0;
				bottom: 20px;
				left: 0;
				z-index: 2;
				display: inline-block;
				max-width: 100px;
				margin: 0 auto;
				color: var(--wp--preset--color--light-01);
				text-align: center;
				text-decoration: none;
				transition: 0.3s ease;

				&:hover {
					opacity: 0.5;
				}

				span {
					&.icon {
						top: 0;
						left: 50%;
						display: block;
						width: 30px;
						height: 50px;
						margin: 0 auto;
						border: 2px solid #fff;
						border-radius: 50px;

						&::before {
							position: absolute;
							top: 10px;
							left: 50%;
							width: 6px;
							height: 6px;
							margin-inline-start: -3px;
							background-color: #fff;
							border-radius: 100%;
							animation: sdb 2s infinite;
							content: '';
						}
					}

					&.text {
						@media (width <= 768px) {
							display: none;
						}
					}
				}
			}
		}

		+ .is-style-frontpage-menu-1 {
			margin-block-start: 0;
		}
	}

	&.is-style-frontpage-menu-1 {
		display: flex;
		justify-content: center;
		width: var(--content-width);
		margin-inline-start: calc(50% - var(--content-width) / 2);

		.wp-block-group {
			width: 100%;
			max-width: var(--wp--style--global--wide-size);
		}

		p {
			flex: 1;
			width: 100%;
			color: var(--wp--preset--color--dark-01);
			font-weight: 400;
			line-height: 2.2;
		}

		h3 {
			font-weight: 700;
			font-size: var(--font-size-2xl);
		}

		.primary,
		.secondary {
			a {
				display: block;
				padding: 4rem;
			}
		}

		.primary {
			background-image: linear-gradient(to right bottom, #ffd8e5, #fff);
		}

		.secondary {
			background-image: linear-gradient(to right bottom, #dcf3ff, #fff);
		}
	}

	&.is-style-frontpage-works {

		.wp-block-columns {
			display: grid;
			grid-template-columns: 1fr 1.618fr;
			gap: 4rem;

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

			.wp-block-column {
				> * {
					&:first-child {
						margin-block-start: 0;
					}

					&:last-child {
						margin-block-end: 0;
					}
				}
			}
		}

		ul.is-style-default {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 2rem;
			justify-content: space-between;
			width: 100%;
			padding-left: 0;

			li {
				display: flex;
			}

			img {
				width: 100%;
				padding: 0.5rem;
				border: 1px solid var(--wp--preset--color--alto-03);
			}
		}

		.wp-block-query {
			margin-block-start: 4rem;

			.wp-block-post-template {
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				gap: 2rem;
				padding-left: 0;

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

	&.is-style-frontpage-client {
		display: flex;
		justify-content: center;
		margin-block-start: 0;
		background-color: var(--wp--preset--color--alto-05);

		.infinity {
			display: grid;
			overflow: hidden;
		}
	}

	&.is-style-frontpage-interview {
		display: flex;
		justify-content: center;

		padding: {
			top: 4rem;
			bottom: 4rem;
		}

		.wp-block-query {
			margin-block-start: 4rem;

			.wp-block-post-template {
				display: grid;
				padding-left: 0;
			}
		}
	}

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

		padding: {
			top: 4rem;
			bottom: 4rem;
		}

		> .wp-block-group {
			width: 100%;
			max-width: var(--wp--style--global--wide-size);
			@media (width <= 768px) {
				max-width: calc(100% - 2rem);
			}
		}

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

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

			.wp-block-group {
				margin-block-start: 0;
			}
		}
	}

	&.is-style-frontpage-contact-link {
		display: flex;
		justify-content: center;
		overflow: hidden;

		.wp-block-group {
			position: relative;
			width: 100%;

			&::before {
				position: absolute;
				top: -100px;
				left: -100px;
				display: block;
				width: 200px;
				height: 200px;
				background-color: var(--wp--preset--color--primary);
				border-radius: 100vw;
				content: '';
			}

			&::after {
				position: absolute;
				right: -100px;
				bottom: -100px;
				display: block;
				width: 200px;
				height: 200px;
				background-color: var(--wp--preset--color--secondary);
				content: '';
			}
		}

		.wp-block-buttons {
			position: relative;
			z-index: 1;
		}
	}

	&.is-style-frontpage-question {
		.wp-block-yoast-faq-block {
			height: 700px;
			overflow: hidden;
			position: relative;
			&::after {
				content: '';
				position: absolute;
				inset: auto auto 0 0;
				width: 100%;
				height: 30%;
				background-image: linear-gradient(to bottom, transparent, #f7f7f7);
				z-index: 10;
			}
		}
	}
}

@keyframes sdb {
	0% {
		transform: translate(0, 0);
		opacity: 0;
	}

	40% {
		opacity: 1;
	}

	80% {
		transform: translate(0, 20px);
		opacity: 0;
	}

	100% {
		opacity: 0;
	}
}