.wp-block-group.is-style-visual {
	position: relative;
	width: 100vw;
	height: calc(100dvh - var(--spfloatmenu-height, 0px) - var(--masthead-height) - var(--wp-admin--admin-bar--height, 0px));
	margin-left: calc(50% - 50vw);

	@media (width < 768px) {
		height: auto;
	}

	.swiper-wrapper {
		width: 100% !important;
	}

	.swiper-slide {
		background-color: var(--wp--preset--color--primary-1);
		margin-block: 0 !important;
		width: 100%;

		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			opacity: 0.8;
		}
	}

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

		@media (width < 768px) {
			padding-block: 2rem !important;
		}

		.content {
			justify-content: center;
			width: 100%;
			max-width: var(--wp--style--global--wide-size);
			padding: 0 2rem;

			@media (width < 768px) {
				max-width: calc(100% - 4rem);
				padding: 0;
			}

			.primary {
				color: var(--wp--preset--color--light-01);
				font-size: var(--wp--preset--font-size--xxxxx-large);
				line-height: 1.4;
				letter-spacing: 0.2rem;
				text-shadow: 0 0 2px var(--wp--preset--color--primary-4), 0 0 8px var(--wp--preset--color--white);

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

			.secondary {
				color: var(--wp--preset--color--light-02);
				font-weight: 700;
				font-size: var(--wp--preset--font-size--xx-large);
				font-family: var(--wp--preset--font-family--alto-01);
				text-transform: uppercase;
				text-shadow: 0 0 2px var(--wp--preset--color--primary-02), 0 0 4px var(--wp--preset--color--primary-02);
				margin-block-start: 2rem;

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

		.wp-block-list.is-style-visual-menu {
			list-style: none;
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 1rem;
			padding: 0;
			line-height: 1.5;

			@media (width < 768px) {
				gap: 0.5rem;
			}

			li {
				background-color: var(--wp--preset--color--golden-yellow);
				padding: 1rem;
				border-radius: 0.5em;
				font-size: 1.3em;
				display: flex;
				align-items: center;
				justify-content: center;

				@media (width < 768px) {
					font-size: 1rem;
					letter-spacing: -0.05em;
					padding: 0.5rem;
				}
			}
		}

		.wp-block-list.is-style-visual-license {
			width: fit-content;
			margin-inline-start: auto;
			background-color: color-mix(in srgb, var(--wp--preset--color--primary-1), transparent 50%);
			padding: 1rem;
			border-radius: 0.5em;
			list-style: none;

			@media (width < 768px) {
				margin-inline-start: 0;
				padding: 0;
				background-color: transparent;
				color: var(--wp--preset--color--primary-1) !important;
				font-size: 0.9em;
				letter-spacing: -0.05em;
			}

			li {
				position: relative;
				padding-inline-start: 1.3em;

				&::before {
					position: absolute;
					inset: 0;
					content: "◆";
					display: inline-block;
					width: 1em;
					height: 1em;
					margin-right: 0.5em;
				}
			}
		}
	}

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

	.swiper-scroll-down {
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 2;
		width: fit-content;
		margin-right: auto;
		margin-left: auto;
		opacity: 0.8;

		.swiper-scroll-down-content {
			display: block;
			color: #fff;
			text-decoration: none;
		}

		.swiper-scroll-down-text {
			display: block;
		}

		.swiper-scroll-down-arrow {
			display: block;
			text-align: center;
			transform: rotateY(0);
			animation-name: rotate;
			animation-duration: 1s;
			animation-timing-function: linear;
			animation-iteration-count: infinite;

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

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

	> *:last-child {
		margin-block-end: 0;
	}

	&.is-style-default {
		&.has-background {
			@media (width < 768px) {
				padding: 0;
			}

			padding: 4rem;
		}

		+ .wp-block-group.is-style-default {
			margin-block-start: 2rem;
		}
	}

	&.is-style-frontpage-information {
		display: flex;
		justify-content: center;
		padding-block: 6rem;
		width: 100vw;
		margin-left: calc(50% - 50vw);

		&:not(.has-background) {
			+ .wp-block-group:not(.has-background) {
				padding-top: 0;
			}
		}

		> .wp-block-group {
			position: relative;
			width: 100%;
			max-width: var(--wp--style--global--wide-size);
			padding: 0 2rem;

			@media (width < 768px) {
				display: flex;
				flex-flow: column;
			}
		}

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

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

			.wp-block-column {
				&:nth-of-type(1) {
					@media (width < 768px) {
						display: contents;
					}
				}
			}
		}

		.wp-block-post-template {
			display: flex;
			flex-flow: column;
			padding-left: 0;
			margin-block: 0;
			list-style: none;

			.wp-block-post {
				position: relative;
				display: grid;
				grid-template-areas: "date terms title";
				grid-template-columns: auto 80px 1fr;
				gap: 0 1rem;
				align-items: center;
				padding: 1rem 0;
				transition: 0.3s ease;

				+ .wp-block-post {
					border-top: 1px solid var(--wp--preset--color--separator);
				}

				@media (width < 768px) {
					grid-template-areas: "date terms" "title title";
					grid-template-columns: auto 1fr;
				}

				&:hover {
					opacity: 0.5;
				}

				.wp-block-post-date {
					grid-area: date;
					color: var(--wp--preset--color--dark-02);
				}

				.wp-block-post-terms {
					grid-area: terms;

					@media (width < 768px) {
						justify-self: flex-start;
					}

					a {
						display: inline-block;
						padding: 0.3rem 0.5rem;
						font-size: var(--wp--preset--font-size--small);
						line-height: 1;
						text-align: center;
						border: 1px solid var(--wp--preset--color--separator);
					}
				}

				.wp-block-post-title {
					grid-area: title;
					margin-block: 0;
					font-size: var(--wp--preset--font-size--large);
					a {
						display: block;

						&::after {
							position: absolute;
							top: 0;
							left: 0;
							width: 100%;
							height: 100%;
							content: "";
						}
					}
				}
			}
		}

		.is-style-frontpage-heading-02 {
			@media (width < 768px) {
				margin-block-end: 0;
			}
		}

		.wp-block-buttons {
			@media (width < 768px) {
				order: 3;
			}
		}
	}

	&.is-style-frontpage-feature {
		position: relative;
		display: flex;
		justify-content: center;
		width: 100vw;
		margin-left: calc(50% - 50vw);
		color: var(--wp--preset--color--primary-1);
		counter-reset: num;

		padding-top: 6rem;
		padding-bottom: 6rem;

		&::after,
		&::before {
			position: absolute;
			bottom: 0;
			width: 100%;
			max-width: calc(100% - (100% - 1200px) / 2);
			content: "";
		}

		&::after {
			right: 0;
			z-index: 2;
			height: 60%;
			background-color: var(--wp--preset--color--primary-4);
		}

		&::before {
			left: 0;
			z-index: 1;
			height: 100%;
			background-color: var(--wp--preset--color--primary-5);
		}

		> .wp-block-group {
			z-index: 3;
			width: 100%;
			max-width: var(--wp--style--global--wide-size);
			padding: 0 4rem;

			@media (width < 768px) {
				padding: 0 2rem;
			}
		}

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

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

			.wp-block-column {
				display: flex;
				flex-flow: column;
				align-self: stretch;
				padding: 2rem;
				background-color: var(--wp--preset--color--white);
			}
		}

		.wp-block-image {
			margin-block-start: -2rem;
			margin-right: -2rem;
			margin-left: -2rem;
		}

		.is-style-frontpage-heading-02 {
			position: relative;
			margin-block-start: 1rem;
			padding-left: 3rem;
			font-size: var(--wp--preset--font-size--x-large);
			line-height: 1;
			counter-increment: num;

			&::before {
				display: block;
				margin-bottom: 0.5rem;
				font-weight: 700;
				font-size: var(--wp--preset--font-size--xxxx-large);
				font-family: var(--wp--preset--font-family--alto-01);
				content: counter(num, decimal-leading-zero);
			}

			&::after {
				position: absolute;
				top: 50%;
				left: 0;
				width: 4px;
				height: 70%;
				font-weight: 700;
				line-height: 1;
				background-color: var(--wp--preset--color--primary-1);
				transform: rotateZ(35deg) translateY(-50%);
				content: "";
			}
		}

		p {
			flex: 1;
			margin: 0;
		}
	}

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

		padding-top: 0;
		padding-bottom: 6rem;

		width: 100vw;
		margin-left: calc(50% - 50vw);

		> .wp-block-group {
			width: 100%;
			max-width: var(--wp--style--global--wide-size);
			padding: 0 2rem;

			@media (width < 768px) {
				display: flex;
				flex-flow: column;
			}
		}

		.wp-block-columns {
			&:nth-of-type(1) {
				@media (width < 768px) {
					display: contents;
				}

				.wp-block-column {
					&:nth-of-type(1) {
						@media (width < 768px) {
							order: 1;
						}
					}

					&:nth-of-type(2) {
						@media (width < 768px) {
							order: 3;
							margin-block-start: 2rem;
						}
					}
				}
			}

			&:nth-of-type(2) {
				margin-block-start: 4rem;

				@media (width < 768px) {
					order: 2;
				}
			}
		}

		.wp-block-column {
			position: relative;

			&:hover {
				.wp-block-image {
					&::before {
						transform: scale(1);
					}
				}
			}

			.wp-block-buttons {
				@media (width < 768px) {
					justify-content: center;
				}
			}
		}

		.wp-block-image {
			width: 150px;
			padding: 2rem;
			background-color: var(--wp--preset--color--primary-5);
			border-radius: 100vw;
			aspect-ratio: 1 / 1;
			margin-inline-start: auto;
			margin-inline-end: auto;

			img {
				position: relative;
				z-index: 1;
				height: auto;
			}

			&::before {
				position: absolute;
				top: 0;
				right: 0;
				left: 0;
				z-index: 1;
				width: 150px;
				margin-right: auto;
				margin-left: auto;
				background-color: var(--wp--preset--color--primary-4);
				border-radius: 100vw;
				transform: scale(0);
				transition: 0.3s ease;
				content: "";
				aspect-ratio: 1 / 1;
			}
		}

		h3 {
			font-size: var(--wp--preset--font-size--xx-large);
			text-align: center;

			a {
				&::after {
					position: absolute;
					top: 0;
					left: 0;
					z-index: 1;
					width: 100%;
					height: 100%;
					content: "";
				}
			}
		}
	}

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

		padding-top: 6rem;
		padding-bottom: 6rem;

		width: 100vw;
		margin-left: calc(50% - 50vw);

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

		.wp-block-media-text {
			grid-template-columns: 2fr 1fr;
			gap: 2rem;

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

			.wp-block-media-text__media {
				grid-area: media;
			}

			.wp-block-media-text__content {
				position: relative;
				z-index: 2;
				grid-area: content;
			}

			+ .wp-block-media-text {
				margin-block-start: 4rem;
			}

			&.has-media-on-the-right {
				grid-template-columns: 1.618fr 1fr;

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

				.wp-block-media-text__content {
					@media (width < 768px) {
						margin-right: 0;
					}
				}

				.wp-block-media-text__media {
					@media (width < 768px) {
						margin-right: 0;
					}
				}
			}

			+ .wp-block-buttons {
				margin-block-start: 2rem;
			}
		}

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

		h3 {
			width: fit-content;
			padding: 0.2rem 0.5rem;
			font-size: var(--wp--preset--font-size--xx-large);
			border-bottom: 1px solid var(--wp--preset--color--primary-1);
		}

		&:nth-of-type(2) {
			.wp-block-buttons {
				@media (width < 768px) {
					justify-content: flex-end;
				}
			}
		}
	}

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

		padding-top: 6rem;
		padding-bottom: 6rem;

		width: 100vw;
		margin-left: calc(50% - 50vw);

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

		.wp-block-media-text {
			grid-template-columns: repeat(12, 1fr);
			gap: 2rem;
			margin-left: calc((min(100vw, 1920px) - 100%) / 2 * -1);

			@media (width < 768px) {
				display: flex;
				flex-flow: column;
				margin-left: auto;
			}

			.wp-block-media-text__media {
				grid-column: 1 / 8;
				align-self: stretch;
			}

			.wp-block-media-text__content {
				z-index: 1;
				grid-column: 7 / 13;

				@media (width < 1000px) {
					grid-column: 5 / 13;

					@media (width < 768px) {
						grid-column: 1 / 13;
					}
				}
			}

			+ .wp-block-media-text {
				margin-block-start: 4rem;
			}

			+ .wp-block-buttons {
				margin-block-start: 2rem;
			}
		}

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

		h3 {
			width: fit-content;
			padding: 0.2rem 0.5rem;
			font-size: var(--wp--preset--font-size--xx-large);
			border-bottom: 1px solid var(--wp--preset--color--primary-1);
		}
	}

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

		padding-top: 6rem;
		padding-bottom: 6rem;

		width: 100vw;
		margin-left: calc(50% - 50vw);

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

		.wp-block-media-text {
			gap: 2rem;

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

			.wp-block-media-text__media {
				grid-area: media;
			}

			.wp-block-media-text__content {
				position: relative;
				z-index: 2;
				grid-area: content;
			}

			+ .wp-block-media-text {
				margin-block-start: 4rem;
			}

			&.has-media-on-the-right {
				grid-template-columns: 2.5fr 1fr;

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

				.wp-block-media-text__content {
					@media (width < 768px) {
						margin-right: 0;
					}
				}

				.wp-block-media-text__media {
					@media (width < 768px) {
						margin-right: 0;
					}
				}
			}

			+ .wp-block-buttons {
				margin-block-start: 2rem;
			}
		}

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

		h3 {
			width: fit-content;
			padding: 0.2rem 0.5rem;
			font-size: var(--wp--preset--font-size--xx-large);
			border-bottom: 1px solid var(--wp--preset--color--primary-1);
		}

		&:nth-of-type(2) {
			.wp-block-buttons {
				@media (width < 768px) {
					justify-content: flex-end;
				}
			}
		}
	}

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

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

				&::before {
					position: absolute;
					right: 0;
					bottom: calc(100% + 2.5rem);
					left: 0;
					width: 0;
					height: 0;
					margin-block-start: -2rem;
					margin-right: auto;
					margin-left: auto;
					font-size: var(--wp--preset--font-size--xx-large);
					text-align: center;
					content: "";
				}
			}
		}

		> ion-icon {
			margin-block-start: 1rem;
			margin-right: auto;
			margin-bottom: 1rem;
			margin-left: auto;
			font-size: var(--wp--preset--font-size--xxxx-large);
		}

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

	&.is-style-flow-item {
		width: 100%;
		max-width: 100%;
		padding: 2rem;
		background-color: var(--wp--preset--color--alto-05);
		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--separator);
	}

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

		@media (width < 768px) {
			padding: 1rem;
		}

		.wp-block-media-text {
			@media (width < 768px) {
				grid-template-areas: "content" "media";
				grid-template-columns: 1fr;
			}

			display: grid;
			grid-template-columns: 2.5fr 1fr;

			.wp-block-media-text__content {
				display: flex;
				flex-flow: column;
				align-items: flex-start;
			}
		}

		h3 {
			display: flex;
			flex-flow: column;

			.ja {
				font-weight: 700;
				font-size: var(--wp--preset--font-size--xxx-large);
				line-height: 1;
			}

			.en {
				margin-top: 1rem;
				color: var(--wp--preset--color--primary-3);
				font-weight: 700;
				font-family: var(--wp--preset--font-family--alto-01);
				line-height: 1.2;
				text-transform: uppercase;
			}
		}

		.wp-block-columns {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 2rem;
			justify-content: space-between;
			margin-block-start: 2rem;

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

		.wp-block-table.is-style-separate {
			th {
				width: 23%;

				@media (width < 768px) {
					width: 35%;
				}
			}

			th,
			td {
				padding: 0.5rem 0;
			}
		}
	}

	&.is-style-sheet {
		margin-top: 4rem;
		padding: 2rem;
		background-color: var(--wp--preset--color--alto-05);

		@media (width < 768px) {
			order: 3;
		}
	}
}

@keyframes rotate {
	0% {
		transform: rotateY(0);
	}

	100% {
		transform: rotateY(360deg);
	}
}