/*.wp-block-group */
.wp-block-group {
	&.is-style-visual {
		position: relative;
		height: 700px;
		max-width: 100dvw;
		padding-inline: 0 !important;
		@media (width <= 767px) {
			max-height: 500px;
		}

		.visual-content {
			width: 100%;
			height: 100%;
			margin-inline: 0 !important;
			.swiper,
			.swiper-slide {
				width: 100%;
				height: 100%;
			}

			.swiper-visual {
				.swiper-slide {
					width: 100%;
					height: 100%;
					margin-block: 0;

					img {
						width: 100%;
						height: 100%;
						object-fit: cover;
						object-position: center;
						filter: brightness(50%);
					}
				}
			}

			.swiper-slide-active img,
			.swiper-slide-duplicate-active img,
			.swiper-slide-prev img {
				animation: zoomUp 10s linear 0s normal both;
			}
		}

		.visual-text {
			position: absolute;
			inset: 0 auto auto 0;
			z-index: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 100%;
			margin-inline: auto;

			.content {
				display: flex;
				align-items: center;
				height: 100%;
				margin-inline: auto;
				text-shadow: 0 0 25px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.25);
				--text-indent: 0.3em;
				writing-mode: vertical-rl;
				.primary {
					color: var(--wp--preset--color--light-01);
					font-size: var(--wp--preset--font-size--x-large-3);
					font-weight: 550;
					line-height: 1.2;
					text-indent: var(--text-indent);
					letter-spacing: var(--text-indent);
					&:nth-of-type(2) {
						margin-inline-start: 1em;
					}
					span {
						font-size: 0.8em;
					}
				}
			}

			&::before,
			&::after {
				position: absolute;
				top: 0;
				left: 0;
				z-index: -1;
				width: 40px;
				height: 100%;
				content: "";
				@media (width <= 767px) {
					width: 30px;
				}
			}

			&::before {
				left: 15%;
				background-color: var(--wp--preset--color--primary);
				@media (width <= 767px) {
					left: 10%;
				}
			}

			&::after {
				left: 20%;
				background-color: var(--wp--preset--color--secondary);
			}
		}
	}

	&.is-style-mobile-col-1 {
		@media (width <= 767px) {
			grid-template-columns: 1fr;
		}
	}

	&.is-style-image-link {
		position: relative;
		box-shadow: var(--wp--preset--shadow--default);
		transition: background-color 0.3s var(--transition-easeout-quint), scale 0.3s var(--transition-easeout-quint);
		border-radius: 1rem;
		overflow: hidden;
		display: flex;
		flex-flow: column;
		background-color: var(--wp--preset--color--white);
		.wp-block-heading {
			font-size: var(--wp--preset--font-size--large);
			font-family: var(--wp--preset--font-family--noto-sans-jp);
			text-align: center;
			font-weight: 550;
			background-color: var(--wp--preset--color--primary);
			height: 100%;
			width: 100%;
			a {
				display: flex;
				width: 100%;
				height: 100%;
				align-items: center;
				justify-content: center;
				padding-block: var(--wp--preset--spacing--20);
				color: var(--wp--preset--color--light-01);
				text-decoration: none;
				flex-flow: column;
				transition: text-indent 0.3s var(--transition-easeout-quint), letter-spacing 0.3s var(--transition-easeout-quint);
				&::after {
					content: "";
					width: 100%;
					height: 100%;
					position: absolute;
					inset: 0 auto auto 0;
					z-index: 1;
				}
			}

			span {
				display: block;
				font-size: var(--wp--preset--font-size--medium);
			}
		}
		&:hover {
			--text-indent: 0.15em;
			background-color: var(--wp--preset--color--primary-light);
			.wp-block-heading {
				a {
					text-indent: var(--text-indent);
					letter-spacing: var(--text-indent);
				}
			}
		}
	}

	&.is-style-treatment {
		@media (width <= 767px) {
			grid-template-columns: 1fr;
			.wp-block-image {
				width: 120px;
			}
		}
	}

	&.is-style-recruit-menu {
		@media (width <= 767px) {
			grid-template-columns: repeat(2, 1fr);
			gap: 1rem;
			.wp-block-image {
				width: 120px;
			}
		}
	}

	&.is-style-recruit-bento {
		> .wp-block-group {
			transition: background-color 0.3s var(--transition-easeout-quint);
			&:hover {
				background-color: #fff !important;
			}

			@media (width <= 767px) {
				grid-column: 1 / 2;
			}
		}
		.has-roboto-condensed-font-family {
			font-weight: 550 !important;
		}

		.item-01 {
			position: relative;
			.ornament {
				&::before,
				&::after {
					content: "";
					position: absolute;
					height: 70%;
					width: 30px;

					@media (width <= 767px) {
						display: none;
					}
				}

				&::before {
					background-color: var(--wp--preset--color--primary-medium);
				}

				&::after {
					background-color: var(--wp--preset--color--secondary-medium);
				}
			}
			.ornament-01 {
				&::after {
					inset: 0px auto auto calc(20% + 10px + 30px);
					border-radius: 0 0 5px 5px;
				}
				&::before {
					inset: 0px auto auto 20%;
					border-radius: 0 0 5px 5px;
				}
			}

			.ornament-02 {
				&::after {
					inset: auto calc(20% + 10px + 30px) 0px auto;
					border-radius: 5px 5px 0 0;
				}
				&::before {
					inset: auto 20% 0px auto;
					border-radius: 5px 5px 0 0;
				}
			}
		}

		.item-03,
		.item-05 {
			@media (width <= 767px) {
				.wp-block-media-text {
					gap: 0;
					display: flex;
					flex-flow: column;
					align-items: center;
				}
				.wp-block-media-text__media {
					width: 120px;
				}
			}
		}

		.item-06 {
			@media (width <= 767px) {
				.wp-block-group {
					display: flex;
					flex-flow: column;
					.wp-block-image {
						width: 150px;
					}
				}
			}
		}

		.balloon-01 {
			position: relative;
			&::after {
				content: "";
				background-color: var(--wp--preset--color--primary-medium);
				position: absolute;
				clip-path: polygon(0 0, 60% 0, 100% 100%);
				inset: 100% auto auto 40%;
				width: 50px;
				height: 30px;
			}
		}

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

	&.is-style-recruit-flow {
		margin-block: 0;
		padding-block-start: 1rem;
		--time-width: 150px;
		--time-line-width: 4px;
		position: relative;

		> p {
			background-color: var(--wp--preset--color--primary-light);
			color: var(--wp--preset--color--primary);
			padding-block: var(--wp--preset--spacing--20);
			padding-inline: var(--wp--preset--spacing--50);
			border: 2px solid var(--wp--preset--color--primary);
			width: var(--time-width) !important;
			font-weight: 450;
			flex: none;
		}

		.wp-block-media-text {
			width: 100%;
		}

		&:has(+ .is-style-recruit-flow, + p) {
			padding-block: 1rem;
			&::before {
				content: "";
				width: var(--time-line-width);
				height: calc(100% - 1rem);
				background-color: var(--wp--preset--color--alto-05);
				z-index: -1;
				inset: auto auto 0px calc((var(--time-width) + var(--time-line-width)) / 2);
				position: absolute;
			}
		}

		+ .is-style-recruit-flow, + p, + p + .is-style-recruit-flow {
			position: relative;
			padding-block: 1rem;
			&::before {
				content: "";
				width: var(--time-line-width);
				height: 100%;
				background-color: var(--wp--preset--color--alto-05);
				z-index: -1;
				inset: 0px auto auto calc((var(--time-width) + var(--time-line-width)) / 2);
				position: absolute;
			}
		}

		&:not(:has(+ .is-style-recruit-flow, + p)) {
			&::before {
				content: "";
				width: var(--time-line-width);
				height: 1rem !important;
				background-color: var(--wp--preset--color--alto-05);
				z-index: -1;
				inset: 0px auto auto calc((var(--time-width) + var(--time-line-width)) / 2);
				position: absolute;
			}
		}

		@media (width <= 767px) {
			--time-width: 130px;
		}
	}
}

@keyframes zoomUp {
	0% {
		scale: 1;
		filter: brightness(50%) blur(0px);
	}

	60% {
		filter: brightness(50%) blur(0px);
	}

	100% {
		scale: 1.15;
		filter: brightness(50%) blur(20px);
	}
}