/*.wp-block-group */
.wp-block-group {
	&.news {
		display: flex;
		justify-content: center;
		padding-block: 4rem;

		.wp-block-columns {
			display: grid;
			grid-template-columns: auto 1fr;
			gap: 4rem;
			justify-content: space-between;
			width: 100%;
		}
	}

	&.is-style-visual {
		position: relative;
		height: 700px;
		max-width: 100dvw;
		@media (width <= 767px) {
			max-height: 500px;
		}

		.visual-content {
			width: 100%;
			height: 100%;

			.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%;

			.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-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-recruit-bento {
		> .wp-block-group {
			transition: background-color 0.3s var(--transition-easeout-quint);
			&:hover {
				background-color: #fff !important;
			}
		}
		.has-roboto-condensed-font-family {
			font-weight: 550 !important;
		}
	}

	&.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;
		}

		&: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;
			}
		}
	}
}

@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);
	}
}