/* heading */
.wp-block-heading {
	&.is-style-01 {
		position: relative;
		padding-block-end: 0.5rem;
		font-size: var(--wp--preset--font-size--x-large);
		letter-spacing: 0.2em;
		margin-block-start: var(--wp--preset--spacing--70);
		margin-block-end: var(--wp--preset--spacing--60);

		&::after {
			position: absolute;
			bottom: -3px;
			left: 0;
			width: 100%;
			height: 3px;
			background-color: var(--wp--preset--color--primary);
			background-image: linear-gradient(
				to right,
				var(--wp--preset--color--primary),
				var(--wp--preset--color--primary-medium)
			);
			content: "";
		}
	}

	&.is-style-02 {
		position: relative;
		width: fit-content;
		color: var(--wp--preset--color--dark-01);
		font-size: var(--wp--preset--font-size--large);
		margin-block-start: var(--wp--preset--spacing--60);
		margin-block-end: var(--wp--preset--spacing--50);
		padding-block-end: 1rem;

		&::after {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 3px;
			background-color: var(--wp--preset--color--primary);
			background-image: linear-gradient(
				to right,
				var(--wp--preset--color--primary),
				var(--wp--preset--color--primary-medium)
			);
			content: "";
		}
	}

	&.is-style-03 {
		position: relative;
		display: block;
		/* width: fit-content; */
		color: var(--wp--preset--color--primary);
		font-size: var(--wp--preset--font-size--large);
		margin-block-start: var(--wp--preset--spacing--50);
		margin-block-end: var(--wp--preset--spacing--40);
		padding-inline-start: 1.5rem;

		&::after {
			position: absolute;
			top: 50%;
			translate: 0 -50%;
			left: 0;
			width: 1rem;
			height: 3px;
			background-color: var(--wp--preset--color--primary);
			background-image: linear-gradient(
				to right,
				var(--wp--preset--color--primary),
				var(--wp--preset--color--primary-medium)
			);
			content: "";
		}
	}

	&.is-style-04 {
		display: block;
		width: fit-content;
		padding: 0.2rem 1rem;
		color: var(--wp--preset--color--primary);
		font-size: var(--wp--preset--font-size--medium);
		border: 1px solid var(--wp--preset--color--primary);
		margin-block-start: var(--wp--preset--spacing--40);
		margin-block-end: var(--wp--preset--spacing--30);
	}

	&.is-style-05 {
		display: block;
		width: fit-content;
		font-size: var(--wp--preset--font-size--medium);
		margin-block-start: var(--wp--preset--spacing--40);
		margin-block-end: var(--wp--preset--spacing--30);
		border-bottom: 1px solid var(--wp--preset--color--alto-10);
	}

	&.is-style-ja-en {
		position: relative;
		display: flex;
		flex-flow: column;
		width: fit-content;
		line-height: 1;

		&::before,
		&::after {
			position: absolute;
			height: 7px;
			content: "";
			inset: auto auto calc(var(--wp--preset--spacing--50) * -1) 0;
		}

		&::before {
			width: 100%;
			background-color: var(--wp--preset--color--secondary);
		}

		&::after {
			width: 50%;
			background-color: var(--wp--preset--color--primary);
		}

		.ja {
			display: inline-block;
			order: 2;
			font-weight: bold;
			font-size: var(--wp--preset--font-size--large);
			margin-block-start: 1rem;
			text-indent: -0.1em;
		}

		.en {
			display: block;
			order: 1;
			font-weight: 700;
			font-size: var(--wp--preset--font-size--xxx-large);
			font-family: var(--wp--preset--font-family--alto-02);
			letter-spacing: 0.05em;
			margin-inline-start: -0.05em;
		}

		&:not(.has-text-color) {
			.ja {
				color: var(--wp--preset--color--dark-01);
			}

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

			&::before {
				background-color: var(--wp--preset--color--secondary);
			}

			&::after {
				background-color: var(--wp--preset--color--primary);
			}
		}

		&.has-text-color {
			&.has-light-01-color {
				.ja,
				.en {
					color: var(--wp--preset--color--light-01);
				}

				&::before {
					background-color: var(--wp--preset--color--secondary);
				}

				&::after {
					background-color: var(--wp--preset--color--tertiary);
				}
			}
		}
	}

	&.is-style-service {
		display: flex;
		flex-flow: column;
		margin-block-start: 3rem;
		margin-block-end: 2rem;
		line-height: 1;

		.sub {
			order: 1;
			color: var(--wp--preset--color--primary);
			font-size: var(--wp--preset--font-size--large);
			letter-spacing: 0.1em;

			+ .title {
				margin-block-start: 0.5rem;
			}
		}

		.title {
			display: block;
			order: 2;
			color: var(--wp--preset--color--dark-02);
			font-weight: 700;
			font-size: var(--wp--preset--font-size--x-large);
			letter-spacing: 0.1em;
			text-transform: uppercase;
			margin-inline-start: 0.1rem;
		}
	}
}