.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-frontpage-information {
		.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 {
							flex: 1 0 auto;
						}
					}
				}
			}
		}

		.is-style-frontpage-heading-01 {
			+ .wp-block-group {
				margin-block-start: 2rem;
				@media (width < 767px) {
					flex-wrap: wrap;
					margin-block-start: 0 !important;
				}
			}
		}

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

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

			.wp-block-post {
				position: relative;
				display: grid;
				grid-template-areas: "date title";
				grid-template-columns: auto 1fr;
				gap: 0 1rem;
				align-items: center;
				transition: 0.3s ease;
				margin-block-start: 0;
				@media (width < 767px) {
					grid-template-areas: "date" "title";
					grid-template-columns: 1fr;
				}

				&:hover {
					opacity: 0.5;
				}

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

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

				.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-information-tab {
		display: flex;
		justify-content: center;
		padding-block: 6rem;

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

		.is-style-frontpage-heading-01 {
			+ .tab-buttons {
				margin-block-start: 2rem;
			}
		}

		.tab-buttons {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			width: 100%;
			@media (width < 767px) {
				grid-template-columns: 1fr;
				gap: 0.5rem;
				border-bottom: 0;
			}

			.tab-button {
				width: 100%;

				.wp-block-button__link {
					width: 100%;
					padding: 1rem;
					color: var(--wp--preset--color--dark-01);
					font-size: 0.9rem;
					text-align: center;
					background-color: #fff;
					border: 1px solid var(--wp--preset--color--alto-10);
					border-bottom: 3px solid var(--wp--preset--color--primary);
					border-radius: 5px 5px 0 0;
					cursor: pointer;

					@media (width < 767px) {
						padding: 0.5rem;
						border: 1px solid var(--wp--preset--color--alto-10);
						border-radius: 5px;
					}
				}

				&.is-active {
					.wp-block-button__link {
						color: var(--wp--preset--color--light-01);
						background-color: var(--wp--preset--color--primary);
						border: 1px solid var(--wp--preset--color--primary);
						border-bottom: 0;
						@media (width < 767px) {
							border: 1px solid var(--wp--preset--color--primary);
						}
					}
				}
			}
		}

		.tab-panel-columns {
			.wp-block-query,
			.wp-block-rss {
				min-height: 190px;
			}

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

			.tab-panel {
				/* 一時的にタブ機能を無効かするときはこの部分をコメントアウト */
				display: none;
				width: 100%;
			}

			.is-show {
				display: block;
			}
		}

		.wp-block-rss {
			@media (width < 767px) {
				display: flex;
				flex-flow: column;
				gap: 0.5rem;
			}

			.wp-block-rss__item {
				position: relative;
				display: grid;
				grid-template-areas: "time title";
				grid-template-columns: 130px 1fr;
				gap: 1rem;
				@media (width < 767px) {
					grid-template-areas: "time" "title";
					grid-template-columns: 1fr;
					gap: 0;
				}
			}

			.wp-block-rss__item-title {
				grid-area: title;

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

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

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

			.wp-block-post {
				position: relative;
				display: grid;
				grid-template-areas: "date title";
				grid-template-columns: 130px 1fr;
				gap: 1rem;
				align-items: center;
				transition: 0.3s ease;
				margin-block-start: 0;
				@media (width < 767px) {
					grid-template-areas: "date" "title";
					grid-template-columns: 1fr;
					gap: 0;
				}

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

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

				.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-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-interior {
		overflow: hidden;
		.infinity-slider {
			width: 100%;
			pointer-events: none;

			.wrapper {
				animation-name: infinity;
				animation-duration: 20s;
				animation-iteration-count: infinite;
				animation-timing-function: linear;
				display: flex;
			}

			.slide {
				width: 400px;
				height: 250px;
				margin-right: 0;
				flex: 1 0 auto;
			}

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

	&.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;
		display: flex;
		justify-content: center;

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

		.wp-block-media-text {
			gap: 0;
			align-items: center;
			background-color: var(--wp--preset--color--primary);

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

			.wp-block-media-text__content {
				position: relative;
				display: flex;
				flex-flow: column;
				align-items: flex-start;
				height: 100%;
				padding: 4rem;
				@media (width < 767px) {
					padding: 2rem;
				}

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

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

		.is-style-frontpage-heading-01 {
			.ja,
			.en {
				color: var(--wp--preset--color--light-01);
			}
		}

		h2.is-style-default {
			font-weight: 700;
			font-size: var(--wp--preset--font-size--xxx-large);
			line-height: 1.4;
		}
	}

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