.wp-block-group {

	&.is-style-default {

		&.has-background {
			padding: 4rem;
			@media (width <= 767px) {
				padding: 0;
			}
		}

		.wp-block-group {

			&__inner-container {
				margin-inline-end: auto;
				margin-inline-start: auto;
			}
		}

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

	&.is-style-frontpage-information {
		display: flex;
		justify-content: center;
		padding: {
			top: 6rem;
			bottom: 6rem;
		}

		> .wp-block-group {
			width: 100%;
			max-width: var(--container-lv1);
		}

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

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

			.wp-block-column {

				&:nth-of-type(1) {
					@media (width <= 767px) {
						display: flex;
						justify-content: space-between;
					}
				}
			}
		}

		.is-style-frontpage-heading-01 {

			+.wp-block-buttons {
				margin-block-start: 2rem;
				@media (width <= 767px) {
					margin-block-start: 0;
				}
			}
		}

		.wp-block-post-template {
			display: flex;
			flex-flow: column;
			gap: 0.5rem;

			.wp-block-post {
				position: relative;
				display: grid;
				grid-template-areas: "date taxonomy title";
				grid-template-columns: 120px auto 1fr;
				gap: 0 1rem;
				align-items: center;
				background-color: var(--color-white);
				transition: 0.3s ease;

				@media (width <= 767px) {
					grid-template-areas: "date taxonomy" "title title";
					grid-template-columns: 120px 1fr;
				}

				&:hover {
					opacity: 0.5;
				}

				&:nth-of-type(n + 5) {
					display: none;
				}

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

				.wp-block-lazyblock-post-taxonomy {
					grid-area: taxonomy;

					.wp-block-post-taxonomy {
						display: flex;
						flex-wrap: wrap;
						gap: 0.5rem;

						li {
							width: 150px;
							padding: 0.3rem 1rem;
							font-size: var(--font-size-sm);
							line-height: 1;
							text-align: center;
							border: 1px solid var(--color-border);
							border-radius: 100vw;

							&.information {
								color: var(--color-primary);
							}

							&.important {
								color: var(--color-light-01);
								background-color: var(--color-primary);
							}
						}
					}
				}

				.wp-block-post-title {
					grid-area: title;
					margin-block-start: 0;

					a {

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

	&.is-style-frontpage-treatment-01 {
		display: flex;
		justify-content: center;
		@media (width <= 767px) {
			position: initial;
		}

		> .wp-block-group {
			width: 100%;
			max-width: var(--container-lv1);
			padding-block: 4rem;
		}

		.wp-block-columns {
			display: grid;
			gap: 0;
			width: 100%;
			box-shadow: 1px 3px 10px -1px rgb(0 0 0 / 0.1);

			&:nth-of-type(1) {
				grid-template-columns: repeat(2, 1fr);
				@media (width <= 767px) {
					grid-template-columns: repeat(2, 1fr);
				}
			}

			&:nth-of-type(2) {
				grid-template-columns: repeat(2, 1fr);
				@media (width <= 767px) {
					grid-template-columns: repeat(2, 1fr);
				}
			}

			.wp-block-image {
				z-index: 2;
				width: 3rem;
				transition: 0.3s ease;
			}

			svg {
				transition: 0.3s ease;

				.cls-2,
				.cls-3 {
					transition: 0.3s ease;
				}
			}

			h3 {
				z-index: 2;
				font-size: var(--font-size-md);
				line-height: 1;
				margin-block-start: 0;
			}

			a {
				display: flex;
				align-items: center;
				line-height: 1.4;
				transition: 0.3s ease;

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

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

			.wp-block-column {
				position: relative;
				display: flex;
				flex-flow: column;
				align-items: center;
				align-self: stretch;
				padding: 1rem;
				overflow: hidden;
				background-color: var(--color-white);
				border: 1px solid #eee;
				transition: 0.3s ease;
				@media (width <= 767px) {
					padding: 1rem 0.7rem;
				}

				+.wp-block-column {
					border-left: 1px solid var(--color-border);
				}

				&:hover {

					svg {

						.cls-2,
						.cls-3 {
							stroke: var(--color-light-01);
						}
					}

					&::before {
						opacity: 1;
					}

					a {
						color: var(--color-light-01);
					}
				}

				&::before {
					position: absolute;
					top: 0;
					left: 0;
					z-index: 1;
					width: 100%;
					height: 100%;
					background-image: linear-gradient(45deg, var(--color-primary), var(--color-primary-m));
					opacity: 0;
					transition: 0.3s ease;
					content: "";
				}
			}

			@media (width <= 767px) {
				gap: 1px;
				padding: 1px;
				background-color: var(--color-border);
			}
		}
	}

	&.is-style-frontpage-treatment-02 {
		position: relative;
		display: flex;
		justify-content: center;
		padding: {
			top: 6rem;
			bottom: 6rem;
		}

		> .wp-block-group {
			width: 100%;
			max-width: var(--container-lv1);
			@media (width <= 767px) {
				max-width: calc(100% - 2rem);
			}
		}

		p {
			margin-block-start: 1rem;

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

		.wp-block-media-text {
			grid-template-columns: 1fr 1fr;
			gap: 0;
			counter-increment: num;
			@media (width <= 767px) {
				grid-template-areas: "media" "content";
				grid-template-columns: 1fr;
			}

			&.is-vertically-aligned-center {
				align-items: center;
			}

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

			.wp-block-media-text__content {
				position: relative;
				z-index: 2;
				grid-area: content;
				padding: 2rem;
				background-color: var(--color-white);
				border-radius: 5px;
				box-shadow: 1px 3px 10px -1px rgb(0 0 0 / 0.1);

				&::before {
					position: absolute;
					top: 0;
					left: 0;
					z-index: -1;
					width: 30%;
					height: 100%;
					background-color: var(--color-primary-l);
					border-radius: 5px 0 0 5px;
					content: "";
				}
			}

			img {
				width: 100%;
				border-radius: 5px;
			}

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

			&:not(.has-media-on-the-right) {


				.wp-block-media-text__content {
					margin-inline-start: -50%;
					@media (width <= 767px) {
						margin-inline-start: 0;
					}
				}

				.wp-block-media-text__media {
					margin-inline-start: calc((var(--content-width) - var(--container-lv1)) / 2 * -1);
					@media (width <= 767px) {
						margin-inline-start: 0;
					}
				}
			}

			&.has-media-on-the-right {
				@media (width <= 767px) {
					grid-template-areas: "media" "content";
				}

				.wp-block-media-text__content {
					margin-inline-end: -50%;
					@media (width <= 767px) {
						margin-inline-end: 0;
					}
				}

				.wp-block-media-text__media {
					margin-inline-end: calc((var(--content-width) - var(--container-lv1)) / 2 * -1);
					@media (width <= 767px) {
						margin-inline-end: 0;
					}
				}
			}

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

		.wp-block-buttons {
			display: flex;
		}
	}

	&.is-style-frontpage-feature {
		position: relative;
		display: flex;
		justify-content: center;
		padding: {
			top: 6rem;
			bottom: 6rem;
		}
		counter-reset: num;

		&::before {
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
			width: 100%;
			height: 30%;
			background-color: var(--color-primary-m);
			background-image: url(../../../images/feature_background.jpg);
			background-size: cover;
			content: "";
			@media (width <= 767px) {
				z-index: 1;
				height: 20%;
			}
		}

		> .wp-block-group {
			width: 100%;
			max-width: var(--container-lv1);
			@media (width <= 767px) {
				z-index: 2;
				max-width: calc(100% - 2rem);
			}
		}

		.is-style-frontpage-heading-01 {

			.en {
				color: var(--color-light-01);
			}

			.ja {
				color: var(--color-light-01);
			}
		}

		.is-style-frontpage-heading-02 {
			min-height: 80px;
		}

		.wp-block-columns {
			display: grid;
			gap: 2rem;


			.wp-block-image {
				position: relative;
				counter-increment: num;

				&::before {
					position: absolute;
					right: 0;
					bottom: -1.5rem;
					left: 0;
					display: flex;
					align-items: center;
					justify-content: center;
					width: 3rem;
					margin-right: auto;
					margin-left: auto;
					color: var(--color-primary);
					font-weight: 700;
					font-size: var(--font-size-xl);
					text-align: center;
					background-color: #fff;
					border-radius: 100vw;
					content: counter(num);
					aspect-ratio: 1 / 1;
					margin-block-start: 1.5rem;
				}
			}

			&:nth-of-type(1) {
				grid-template-columns: repeat(3, 1fr);

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

			&:nth-of-type(2) {
				grid-template-columns: repeat(6, 1fr);

				.wp-block-column {

					&:nth-of-type(1) {
						grid-column: 2 / span 2;

						@media (width <= 767px) {
							grid-column: initial;
						}
					}

					&:nth-of-type(2) {
						grid-column: 4 / span 2;
						@media (width <= 767px) {
							grid-column: initial;
						}
					}
				}

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


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

			.wp-block-column {
				align-self: stretch;
				padding: 1rem;
				background-color: var(--color-white);
				border-radius: 5px;
				box-shadow: 1px 3px 10px -1px rgb(0 0 0 / 0.1);
			}

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

	&.is-style-worry {
		position: relative;
		display: flex;
		justify-content: center;
		padding-block: 6rem;

		> .wp-block-group {
			width: 100%;
			max-width: var(--container-lv1);
			@media (width <= 767px) {
				z-index: 2;
				max-width: calc(100% - 2rem);
			}
		}

		.is-style-frontpage-heading-01 {

			&.has-primary-color {

				.en {
					color: var(--color-primary);
				}

				.ja {
					color: var(--color-primary);
				}
			}
		}

		.wp-block-heading.is-style-default {
			font-size: var(--font-size-xl);

			mark {
				font-weight: 700;
			}

			a {

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

		.wp-block-image {
			width: 120px;
			overflow: hidden;
			border-radius: 100vw;
			aspect-ratio: 1 / 1;
			margin-inline: auto;
			margin-block-start: -6rem;
			transition: 0.3s ease;
		}

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

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

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

			.wp-block-column {
				position: relative;
				align-self: stretch;
				padding: 1rem;
				background-color: var(--color-white);
				border-radius: 5px;
				box-shadow: 1px 3px 10px -1px rgb(0 0 0 / 0.1);
				padding-block-end: 4rem;

				+.wp-block-column {
					@media (width <= 767px) {
						margin-block-start: 4rem;
					}
				}

				ion-icon {
					position: absolute;
					right: 1rem;
					bottom: 1rem;
					font-size: var(--font-size-xl);
				}

				&:hover {

					.wp-block-image {
						scale: 1.1;
					}
				}
			}
		}
	}

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

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

		.swiper-interior {
			width: 100%;

			.swiper-wrapper {
				transition-timing-function: linear;
			}

			.swiper-slide {
				width: 400px;
				height: 250px;
			}

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

	&.is-style-frontpage-column {
		position: relative;
		padding: {
			top: 6rem;
			bottom: 6rem;
		};
		display: flex;
		justify-content: center;

		>.wp-block-group {
			width: 100%;
			max-width: var(--container-lv1);
			@media (width <= 767px) {
				max-width: calc(100% - 2rem);
			}
		}

		.wp-block-query {
			width: 100%;
		}

		.wp-block-columns {
			display: grid;
			grid-template-columns: auto 1fr;
			gap: 4rem;
			width: 100%;
			@media (width <= 767px) {
				grid-template-columns: 1fr;
			}

			.wp-block-column {

				@media (width <= 767px) {
					display: flex;
					gap: 1rem;
					align-items: flex-start;
					justify-content: space-between;
				}
			}
		}

		.wp-block-buttons {
			@media (width <= 767px) {
				margin-block-start: 0;
			}
		}

		.wp-block-post-template {
			display: flex;
			flex-flow: column;

			.wp-block-post {
				position: relative;
				display: grid;
				grid-template-areas: "image date taxonomy" "image title title";
				grid-template-rows: auto 1fr;
				grid-template-columns: auto auto 1fr;
				gap: 0 1rem;
				align-content: flex-start;
				padding: 2rem;
				background-color: var(--color-white);
				border-radius: 5px;
				box-shadow: 0 0 0.5rem 0 var(--color-alto-10);
				transition: 0.3s ease;
				@media (width <= 767px) {
					grid-template-areas: "image date" "image taxonomy" "image title";
					grid-template-columns: 100px auto 1fr;
					padding: 1rem;
				}

				.wp-block-post-featured-image {
					grid-area: image;

					img {
						width: 150px;
						object-fit: cover;
					}
				}

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

				.wp-block-lazyblock-post-taxonomy {
					grid-area: taxonomy;

					.wp-block-post-taxonomy {
						display: flex;
						flex-wrap: wrap;
						gap: 0.5rem;

						li {
							padding: 0.3rem 1rem;
							font-size: var(--font-size-sm);
							line-height: 1;
							text-align: center;
							border: 1px solid var(--color-border);
							border-radius: 100vw;

							&.information {
								color: var(--color-primary);
							}

							&.important {
								color: var(--color-light-01);
								background-color: var(--color-primary);
							}
						}
					}
				}

				.wp-block-post-title {
					grid-area: title;
					margin-block-start: 0;

					a {

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

				&:hover {
					opacity: 0.7;
				}

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

	&.is-style-flow {
		display: grid;
		grid-template-columns: 1fr;
		width: 100%;
		max-width: var(--container-lv1);
		margin-block-start: 2rem;
		margin-inline-end: auto;
		margin-inline-start: 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-inline-end: auto;
					margin-inline-start: auto;
					font-size: var(--font-size-2xl);
					text-align: center;
					content: "";
				}
			}
		}

		>ion-icon {
			margin-block-start: 1rem;
			margin-inline-end: auto;
			margin-block-end: 1rem;
			margin-inline-start: auto;
			font-size: var(--font-size-4xl);
		}

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

	&.is-style-flow-item {
		width: 100%;
		max-width: 100%;
		padding: 2rem;
		background-color: var(--color-primary-l);
		border: 1px solid var(--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(--color-border);
	}

	&.is-style-member {
		padding: 4rem;
		border-radius: 5px;
		@media (width <= 767px) {
			padding: 2rem;
		}

		h3 {

			span {
				display: inline-block;
				font-size: var(--font-size-md);
			}
		}

		.wp-block-columns {
			display: grid;
			grid-template-areas: "content image";
			grid-template-columns: 1.618fr 1fr;
			gap: 2rem;
			justify-content: space-between;

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

			.wp-block-column {

				&:nth-of-type(1) {
					grid-area: content;
				}

				&:nth-of-type(2) {
					grid-area: image;

					strong {
						margin-inline-end: -0.2rem;
						color: var(--color-primary);
						font-size: var(--font-size-2xl);
						font-family: var(--font-family-serif);
						letter-spacing: 0.2rem;
					}
				}
			}
		}

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

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