.wp-block-group {
	margin-block-start: var(--wp--preset--spacing--50);
	margin-block-end: var(--wp--preset--spacing--40);

	&.is-style-frontpage-ubie {
		position: relative;
		display: flex;
		justify-content: center;
		padding-top: var(--wp--preset--spacing--70);
		padding-bottom: var(--wp--preset--spacing--70);
		margin-block-start: 0;
		margin-block-end: 0;

		@media screen and (0px <= width <= 767px) {
			.wp-block-group {
				max-width: calc(100% - 2rem);
			}
		}

		img {
			width: 400px;
		}
	}

	&.is-style-frontpage-information {
		position: relative;
		display: flex;
		justify-content: center;
		width: 100dvw;
		margin-inline-end: calc(50% - 50dvw);
		margin-inline-start: calc(50% - 50dvw);
		padding-top: var(--wp--preset--spacing--100);
		padding-bottom: var(--wp--preset--spacing--100);
		margin-block-start: 0;
		margin-block-end: 0;

		@media screen and (0px <= width <= 767px) {
			.wp-block-columns.is-style-default {
				gap: 0;
			}

			h2.is-style-frontpage-heading-01 .ja {
				font-size: var(--wp--preset--font-size--two-xl);
			}

			.wp-block-button__link {
				padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
			}
		}

		.wp-block-post-template {
			margin-block-start: var(--wp--preset--spacing--60);

			.wp-block-post {
				position: relative;
				margin-block-start: 0;
				transition: 0.3s ease;

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

				&:hover {
					opacity: 0.5;
				}

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

					time {
						font-weight: 700;
					}
				}

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

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

	&.is-style-frontpage-about {
		position: relative;
		.wp-block-media-text {
			gap: var(--wp--preset--spacing--80);

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

			.wp-block-media-text__media {
				img {
					border-radius: 10px;
					box-shadow: 2rem 2rem 0 0 var(--wp--preset--color--primary-light);

					@media screen and (0px <= width <= 767px) {
						height: 200px;
						object-fit: cover;
					}
				}
			}
		}
	}

	&.is-style-frontpage-feature {
		position: relative;

		.wp-block-columns {
			counter-reset: count;

			.wp-block-column {
				align-self: stretch;
				counter-increment: count;

				&::before {
					display: flex;
					align-items: center;
					width: fit-content;
					margin-inline-end: auto;
					margin-block-end: calc(-1 * var(--wp--preset--spacing--80));
					margin-inline-start: auto;
					padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--60);
					color: var(--wp--preset--color--secondary);
					font-size: var(--wp--preset--font-size--three-xl);
					font-family: var(--wp--preset--font-family--alto-01);
					line-height: 1;
					background-color: var(--wp--preset--color--secondary-light);
					border-radius: 100vw;
					content: "Point " counter(count);
					aspect-ratio: 1/1;
				}
			}
		}

		.is-style-heading-02 {
			margin-block-start: var(--wp--preset--spacing--40);
		}

		p {
			margin-block-start: var(--wp--preset--spacing--60);
		}
	}

	&.is-style-frontpage-treatment {
		.wp-block-columns {
			padding: var(--wp--preset--spacing--60);
			border-radius: 10px;

			.wp-block-column {
				.wp-block-group {
					position: relative;

					h3 {
						position: absolute;
						bottom: 0;
						left: 0;
						padding: var(--wp--preset--spacing--40);
						background-color: var(--wp--preset--color--light-01);
						border-radius: 0 10px 0 0;
					}
				}
			}
		}

		.wp-block-media-text {
			margin-block-start: 0;
		}

		.wp-block-buttons {
			margin-block-start: var(--wp--preset--spacing--60);
		}
	}

	&.is-style-frontpage-column {
		display: flex;
		justify-content: center;
		width: 100vw;
		margin-inline-start: calc(50% - 50dvw);
		padding-block: var(--wp--preset--spacing--100);

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

		@media screen and (0px <= width <= 767px) {
			h2.is-style-frontpage-heading-01 .ja {
				font-size: var(--wp--preset--font-size--two-xl);
			}

			.wp-block-button__link {
				padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
			}
		}

		.wp-block-post-template {
			margin-block-start: var(--wp--preset--spacing--60);

			@media screen and (0px <= width <= 767px) {
				order: 2;
			}

			.wp-block-post {
				position: relative;
				margin-block-start: 0;
				padding: var(--wp--preset--spacing--20) 0;
				transition: 0.3s ease;

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

				&:hover {
					opacity: 0.5;
				}

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

					time {
						font-weight: 700;
					}
				}

				.wp-block-post-terms {
					display: flex;
					grid-area: term;
					align-items: center;
					margin-inline-end: var(--wp--preset--spacing--40);

					a {
						display: block;
						padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
						color: var(--wp--preset--color--dark-01);
						font-size: var(--wp--preset--font-size--sm);
						line-height: 1;
						border: 1px solid var(--wp--preset--color--dark-01);
					}
				}

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

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

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

	&.is-style-frontpage-photo {
		display: flex;
		justify-content: center;
		width: 100%;
		min-width: 0;
		overflow: hidden;
		pointer-events: none;

		.wp-block-group,
		.alignfull {
			width: 100%;
			max-width: 100%;
			min-width: 0;
			margin-inline: 0;
			overflow: hidden;
		}

		.swiper-photo {
			width: 100%;
			min-width: 0;
			max-width: 100%;
			overflow: hidden;

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

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

				&:nth-child(odd) {
					margin-block-start: var(--wp--preset--spacing--60);
				}
			}

			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				border-radius: 10px;
			}
		}
	}

	&.is-style-flow {
		display: grid;
		grid-template-columns: 1fr;
		margin-block-start: var(--wp--preset--spacing--60);
		margin-inline-end: auto;
		margin-inline-start: auto;
		counter-reset: flow-count;

		.wp-block-group + .wp-block-group {
			position: relative;
			margin-block-start: var(--wp--preset--spacing--80);

			&::before {
				position: absolute;
				right: 0;
				bottom: calc(100% + 2.5rem);
				left: 0;
				width: 0;
				height: 0;
				margin-block-start: calc(-1 * var(--wp--preset--spacing--60));
				margin-inline-end: auto;
				margin-inline-start: auto;
				font-size: var(--wp--preset--font-size--two-xl);
				text-align: center;
				content: "\f27e";
			}
		}

		> ion-icon {
			margin-inline-end: auto;
			margin-inline-start: auto;
			color: var(--wp--preset--color--primary);
			font-size: var(--wp--preset--font-size--four-xl);
			transition: 0.3s ease;
			margin-block-start: 0;
		}
	}

	&.is-style-flow-item {
		width: 100%;
		max-width: 100%;
		padding: var(--wp--preset--spacing--60);
		background-color: var(--wp--preset--color--primary-light);
		border-radius: 10px;
		counter-increment: flow-count;
		margin-block-start: 0;
		margin-block-end: 0;

		&:hover + ion-icon {
			color: var(--wp--preset--color--secondary);
		}
	}

	&.is-style-border {
		padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--60);
		border: 1px solid var(--wp--preset--color--alto-10);
		border-radius: 10px;

		@media screen and (0px <= width <= 767px) {
			padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
		}
	}

	&.is-style-member {
		.wp-block-columns {
			display: grid;
			grid-template-columns: 1.2fr 1fr;
			margin-block-start: var(--wp--preset--spacing--80);

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

		@media screen and (0px <= width <= 767px) {
			.is-style-heading-02 {
				order: 1;
			}
		}

		.is-style-heading-02 + p {
			margin-block-start: 0;
		}

		.wp-block-table table {
			font-size: var(--wp--preset--font-size--sm);

			th,
			td {
				padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
				border: 0;
			}

			th {
				background-color: var(--wp--preset--color--alto-03);
			}
		}

		ul {
			padding: 0 var(--wp--preset--spacing--60);
			font-size: var(--wp--preset--font-size--sm);
		}
	}

	&.is-style-site-header {
		position: sticky;
		top: 0;
		z-index: 10;
		display: flex;
		justify-content: center;
		margin: 0;
		background-color: var(--wp--preset--color--light-01);

		.admin-bar & {
			top: var(--wp-admin--admin-bar--height);
			@media screen and (0px <= width <= 767px) {
				top: 0;
			}
		}
	}

	&.is-style-site-header-inner {
		display: grid;
		grid-template-areas: "logo nav conversion";
		grid-template-columns: auto 1fr auto;
		gap: var(--wp--preset--spacing--40);
		align-items: center;
		width: 100%;
		max-width: var(--wp--style--global--wide-size);
		margin: 0;
		padding: var(--wp--preset--spacing--40);
		@media screen and (0px <= width <= 767px) {
			grid-template-areas: "logo nav";
			grid-template-columns: 1fr auto;
		}
	}

	&.is-style-site-footer {
		margin: 0;
	}

	&.is-style-site-info {
		display: grid;
		grid-template-areas: "primary secondary";
		grid-template-columns: auto 1fr;
		gap: var(--wp--preset--spacing--80);
		width: 100%;
		max-width: var(--wp--custom--container--lv-1);
		margin-inline: auto;
		margin-block: 0;
		padding: var(--wp--preset--spacing--80) 0;
		@media screen and (0px <= width <= 767px) {
			grid-template-areas: "primary" "secondary";
			grid-template-columns: 1fr;
			max-width: calc(100% - 2rem);
		}

		p {
			color: var(--wp--preset--color--dark-01);
			a {
				color: var(--wp--preset--color--dark-01);
			}
		}
	}

	&.is-style-footer-primary {
		grid-area: primary;
		margin: 0;
	}

	&.is-style-footer-secondary {
		grid-area: secondary;
		margin: 0;
	}

	&.is-style-site-copyright {
		margin: 0;
		background-color: var(--wp--preset--color--primary-light);
		padding: var(--wp--preset--spacing--40) 0;
	}

	&.is-style-hero {
		display: flex;
		flex-flow: column-reverse;
		width: 100vw;
		margin-block: 0;
		margin-inline-start: calc(50% - 50dvw);
		background-color: var(--wp--preset--color--primary-light);

		.home & {
			display: none;
		}

		+ * {
			margin-block-start: var(--wp--preset--spacing--80);
		}
	}

	&.is-style-slide-panel {
		position: fixed;
		top: var(--masthead-view-height);
		right: 0;
		z-index: 100;
		width: 100vw;
		height: calc(var(--viewheight) - var(--masthead-view-height) - var(--spfloatmenu-height));
		margin: 0;
		background-color: var(--wp--preset--color--primary);
		transform: translateX(100vw);
		opacity: 0;
		transition: 0.3s ease;
		pointer-events: none;

		.is-slide-open & {
			transform: translateX(0);
			opacity: 1;
			pointer-events: all;
		}
	}

	&.is-style-sp-float-menu {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1000;
		display: none;
		width: 100%;
		margin: 0;
		background-color: var(--wp--preset--color--light-01);
		@media screen and (0px <= width <= 767px) {
			display: block;
		}
	}
}