.wp-block-group {
	&.is-style-default {
		&.has-background {
			@media (width < 767px) {
				padding: 0;
			}
			padding: 4rem;
		}

		.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-treatment-clinic {
		> .wp-block-group {
			@media (width < 767px) {
				z-index: 2;
			}
		}

		/* 見出し */
		h3 {
			position: relative;
			padding: 0.5rem;
			font-weight: 700;
			font-size: var(--wp--preset--font-size--xx-large);
			line-height: 1.2;

			&::before,
			&::after {
				position: absolute;
				width: 1rem;
				height: 100%;
				content: "";
			}

			&::before {
				top: 0;
				left: 0;
				border-top: solid 3px var(--wp--preset--color--primary);
				border-bottom: solid 3px var(--wp--preset--color--primary);
				border-left: solid 3px var(--wp--preset--color--primary);
			}

			&::after {
				top: 0;
				right: 0;
				border-top: solid 3px var(--wp--preset--color--primary);
				border-right: solid 3px var(--wp--preset--color--primary);
				border-bottom: solid 3px var(--wp--preset--color--primary);
			}
		}

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

	/* エキクリコーポレートサイト　トップページで主に利用 */
	&.is-style-clinic {
		> .wp-block-group {
			@media (width < 767px) {
				z-index: 2;
			}
		}

		/* 見出し */
		h3 {
			position: relative;
			padding: 0.5rem;
			font-weight: 700;
			font-size: var(--wp--preset--font-size--xx-large);
			line-height: 1.2;

			&::before,
			&::after {
				position: absolute;
				width: 1rem;
				height: 100%;
				content: "";
			}

			&::before {
				top: 0;
				left: 0;
				border-top: solid 3px var(--wp--preset--color--primary);
				border-bottom: solid 3px var(--wp--preset--color--primary);
				border-left: solid 3px var(--wp--preset--color--primary);
			}

			&::after {
				top: 0;
				right: 0;
				border-top: solid 3px var(--wp--preset--color--primary);
				border-right: solid 3px var(--wp--preset--color--primary);
				border-bottom: solid 3px var(--wp--preset--color--primary);
			}
		}

		/* クリニックの写真と情報 */
		.wp-block-media-text {
			gap: 2rem;
			padding: 2rem;
			background-color: var(--wp--preset--color--white);
			&.is-style-default {
				&.is-stacked-on-mobile {
					@media (width < 767px) {
						grid-template-areas: "media" "content";
					}

					.wp-block-media-text__content {
						@media (width < 767px) {
							padding-inline: 0;
						}
					}
				}
			}
		}

		/* クリニック情報内のテーブル */
		.wp-block-table.is-style-col2 {
			th {
				display: flex;
				gap: 0.5rem;
				align-items: center;
				background-color: transparent;
				font-weight: 700;
				@media (width < 767px) {
					width: 100%;
				}
			}

			th,
			td {
				border: 0;
			}

			td {
				@media (width < 767px) {
					display: block;
					width: 100%;
				}
			}

			tr {
				th + td {
					@media (width < 767px) {
						padding-block-start: 0;
					}
				}
			}

			ion-icon {
				color: var(--wp--preset--color--primary);
			}
		}

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

	&.is-style-frontpage-access-time {
		> .wp-block-group {
			@media (width < 767px) {
				z-index: 2;
			}
		}

		.wp-block-media-text.is-style-default.is-stacked-on-mobile {
			@media (width < 767px) {
				grid-template-areas: "media" "content";
			}
		}

		.wp-block-media-text {
			gap: 2rem;
			padding: 2rem;
			background-color: var(--wp--preset--color--white);
		}

		h3 {
			position: relative;
			padding: 0.5rem;
			font-weight: 700;
			font-size: var(--wp--preset--font-size--xx-large);
			line-height: 1.2;

			&::before,
			&::after {
				position: absolute;
				width: 1rem;
				height: 100%;
				content: "";
			}

			&::before {
				top: 0;
				left: 0;
				border-top: solid 3px var(--wp--preset--color--primary);
				border-bottom: solid 3px var(--wp--preset--color--primary);
				border-left: solid 3px var(--wp--preset--color--primary);
			}

			&::after {
				top: 0;
				right: 0;
				border-top: solid 3px var(--wp--preset--color--primary);
				border-right: solid 3px var(--wp--preset--color--primary);
				border-bottom: solid 3px var(--wp--preset--color--primary);
			}
		}

		.wp-block-table.is-style-col2 {
			th {
				display: flex;
				gap: 0.5rem;
				align-items: center;
				background-color: transparent;
				@media (width < 767px) {
					width: 100%;
				}
			}

			th,
			td {
				border: 0;
			}

			td {
				@media (width < 767px) {
					display: block;
					width: 100%;
				}
			}

			tr {
				th + td {
					@media (width < 767px) {
						padding-block-start: 0;
					}
				}
			}

			ion-icon {
				color: var(--wp--preset--color--primary);
			}
		}

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

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

		.wp-block-columns {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 2rem;
			margin-block-start: 2rem;
			@media (width < 767px) {
				grid-template-columns: 1fr;
			}

			.wp-block-column {
				position: relative;
				display: flex;
				flex-flow: column;
				padding: 2rem;
				background-color: var(--wp--preset--color--white);

				&::after {
					position: absolute;
					top: 2rem;
					right: 2rem;
					width: 50px;
					height: 50px;
					background-image: url(../../../images/object_plus.svg);
					content: "";

					@media (width < 767px) {
						top: calc(50px / 2 * -1);
						right: 0;
						left: 0;
						margin-inline-end: auto;
						margin-inline-start: auto;
					}
				}

				p {
					flex: 1;
				}
			}

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

		/* 修正版 */
		.wp-block-columns.single {
			display: flex !important;
			justify-content: center !important;
			.wp-block-column {
				width: min(500px, 100%) !important;
				justify-content: center;
				display: flex;
				flex-flow: column;
				align-items: center;
			}
		}
	}

	&.is-style-frontpage-contact {
		display: flex;
		justify-content: center;
		padding-block: 6rem;

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

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

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

		.wp-block-media-text {
			@media (width < 767px) {
				gap: var(--wp--preset--spacing--40);
			}

			.wp-block-media-text__media {
				img {
					height: 100%;
					object-fit: cover;
				}

				@media (width < 767px) {
					grid-row: 2 !important;
				}
			}

			.wp-block-media-text__content {
				height: 100%;
				padding: 0;

				&::after {
					position: absolute;
					right: 2rem;
					bottom: 2rem;
					width: 50px;
					height: 50px;
					background-image: url(../../../images/object_plus.svg);
					content: "";
				}

				@media (width < 767px) {
					grid-row: 1 !important;
				}
			}

			h2 {
				@media (width < 767px) {
					font-size: var(--wp--preset--font-size--xxx-large) !important;
				}
			}
		}
	}

	&.is-style-contact {
		padding: 3rem;
		border-top: 4px solid var(--wp--preset--color--primary);
		border-bottom: 4px solid var(--wp--preset--color--primary);

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

	&.is-style-member {
		padding: 2rem;
		border: 1px solid var(--wp--preset--color--alto-10);

		.is-style-default {
			.sub,
			.main {
				display: block;
				line-height: 1;
			}

			.sub {
				color: var(--wp--preset--color--primary);
				font-size: var(--wp--preset--font-size--large);
			}

			.main {
				margin-block-start: 0.5rem;
				font-weight: 700;
				font-size: var(--wp--preset--font-size--xx-large);
			}
		}
	}

	&.is-style-writer {
		display: flex;
		flex-flow: column;
		align-items: flex-start;
		padding: 2rem;
		border: 1px solid var(--wp--preset--color--primary);
		margin-block-start: 1rem;
		margin-block-end: 2rem;

		h2.is-style-default {
			width: 100%;
			padding-block-end: 1rem;
			color: var(--wp--preset--color--primary);
			font-weight: 700;
			font-size: var(--wp--preset--font-size--large);
			line-height: 1;
			border-bottom: 1px solid var(--wp--preset--color--alto-10);

			&::after {
				display: none;
			}
		}

		.wp-block-media-text {
			display: grid;
			grid-template-columns: 1fr 3fr;
			gap: 2rem;
			margin-block-start: 1rem;
			@media (width < 767px) {
				grid-template-areas:
					"media"
					"content";
				grid-template-columns: 1fr;
				max-width: 100%;
			}

			.wp-block-media-text__media {
				@media (width < 767px) {
					max-width: 50%;
					margin-inline-start: auto;
					margin-inline-end: auto;
				}
			}
		}

		h3 {
			.ja {
				display: flex;
				gap: 1rem;
				align-items: flex-end;
				font-weight: 700;
			}

			.en {
				color: var(--wp--preset--color--dark-03);
				margin-block-start: 1rem;
				line-height: 1;
			}

			.name {
				color: var(--wp--preset--color--primary);
				font-size: 1.5rem;
				line-height: 1;
			}

			.job {
				display: block;
				color: var(--wp--preset--color--dark-02);
				line-height: 1;
			}

			@media (width < 767px) {
				max-width: 100%;
			}
		}
	}

	&.is-style-feature-container {
		@media (width < 767px) {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
		}
	}

	&.is-style-feature {
		width: 260px;
		.wp-block-image {
			width: 150px;
		}
		.wp-block-heading {
			margin-inline: auto;
			@media (width < 767px) {
				line-height: 1.4;
			}
		}
		@media (width < 767px) {
			width: auto;
		}
	}

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

@keyframes infinity {
	from {
		translate: 0 0;
	}
	to {
		translate: -2000px 0;
	}
}
