.wp-block-button {
	.wp-element-button {
		&:not([href]) {
			pointer-events: none;
		}
	}

	&:not([class*="is-style-"]),
	&.is-style-fill,
	&.is-style-outline {
		.wp-element-button {
			display: flex;
			gap: 0.5rem;
			align-items: center;
			padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--70) var(--wp--preset--spacing--20) var(--wp--preset--spacing--50);
			transition: 0.3s var(--transition-easeout-quint) color, 0.3s var(--transition-easeout-quint) background-color, 0.3s var(--transition-easeout-quint) translate;
			padding-block: var(--wp--preset--spacing--20);
			padding-inline: var(--wp--preset--spacing--60);

			ion-icon {
				transition: inherit;
				font-size: 1.2em;
			}

			&:hover {
				ion-icon {
					translate: 5px 0;
				}
			}
		}
	}

	&.is-style-fill,
	&:not([class*="is-style-"]) {
		.wp-element-button {
			&:not(.has-background) {
				color: var(--wp--preset--color--white);
				background-color: var(--wp--preset--color--accent-1);
				border: 1px solid var(--wp--preset--color--accent-1);

				&:hover {
					color: var(--wp--preset--color--accent-1);
					background-color: var(--wp--preset--color--white);
				}
			}

			&.has-background {
				&.has-accent-2-background-color {
					border: 1px solid var(--wp--preset--color--accent-2);
					&:hover {
						color: var(--wp--preset--color--accent-2);
						background-color: var(--wp--preset--color--white) !important;
					}
				}
			}
		}
	}
	&.is-style-outline {
		.wp-element-button {
			&[href]:not(.has-background) {
				color: var(--wp--preset--color--accent-1);
				background-color: var(--wp--preset--color--white);
				border: 1px solid var(--wp--preset--color--accent-1);

				&:hover {
					color: var(--wp--preset--color--white);
					background-color: var(--wp--preset--color--accent-1);
				}
			}

			&:not([href]) {
				background-color: var(--wp--preset--color--base);
				border: 1px solid var(--wp--preset--color--base-1);
			}
		}
	}
	&.is-style-fill-reserve,
	&.is-style-fill-call {
		.wp-element-button {
			display: flex;
			gap: 0.5rem;
			align-items: center;
			background-color: var(--wp--preset--color--accent-2);
			border: 1px solid var(--wp--preset--color--accent-2);
			transition: 0.3s var(--transition-easeout-quint);
			padding-block: var(--wp--preset--spacing--20);
			padding-inline: var(--wp--preset--spacing--50);
			height: auto;

			/* 背景がない時　と　指定した色と同じ色を指定したとき */
			&:not(.has-background),
			&.has-accent-2-background-color {
				color: var(--wp--preset--color--white);
				background-color: var(--wp--preset--color--accent-2);
				border: 1px solid var(--wp--preset--color--accent-2);

				&:hover {
					color: var(--wp--preset--color--accent-2);
					background-color: var(--wp--preset--color--white);
				}
			}

			/* 背景があるとき */
			&.has-background {
				&.has-accent-1-background-color {
					background-color: var(--wp--preset--color--accent-1);
					border: 1px solid var(--wp--preset--color--accent-1);

					&:hover {
						color: var(--wp--preset--color--accent-1) !important;
						background-color: var(--wp--preset--color--white) !important;
					}
				}
			}
		}
	}
	&.is-style-call {
		transition: 0.3s var(--transition-easeout-quint);
		.wp-element-button {
			position: relative;
			display: flex;
			gap: 0.5rem;
			align-items: center;
			padding: 0;
			font-family: var(--wp--preset--font-family--roboto-condensed);
			background-color: transparent;
			font-family: var(--wp--preset--font-family--fot-tsukuardgothic-std);
			font-weight: 700;
		}

		&:has(a) {
			&:hover {
				opacity: 0.5;
			}
		}

		ion-icon {
			font-size: 0.9em;
			/* color: ; */
		}

		/* 数字が跳ねる */
		.tel-wrapper .tel-char {
			display: inline-block;
			transform-origin: 50% 100%;
			animation: tel-bounce 4s var(--transition-easeout-quint) infinite;
			animation-delay: calc(var(--i) * 0.1s);
		}

		/* ハイフンはそのまま */
		.tel-wrapper .tel-hyphen {
			display: inline-block;
			opacity: 0.8;
		}
	}
	&.is-style-anchor-link {
		.wp-element-button {
			display: flex;
			gap: 0.5rem;
			align-items: center;
			font-size: var(--wp--preset--font-size--small);
			transition: 0.3s var(--transition-easeout-quint) color, 0.3s var(--transition-easeout-quint) background-color;
			padding-block: var(--wp--preset--spacing--20);
			padding-inline: var(--wp--preset--spacing--40);

			ion-icon {
				color: inherit;
				transition: 0.3s var(--transition-easeout-quint) translate, 0.3s var(--transition-easeout-quint) color;
			}

			&:not(.has-background) {
				color: var(--wp--preset--color--accent-1);
				background-color: var(--wp--preset--color--white);
				border: 1px solid var(--wp--preset--color--accent-1);

				&:hover {
					color: var(--wp--preset--color--white);
					background-color: var(--wp--preset--color--accent-1);

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

			&:hover {
				ion-icon {
					translate: 0 2px;
				}
			}

			@media (width < 600px) {
				padding-inline: var(--wp--preset--spacing--30);
			}
		}
	}
}

/* 跳ねる動き */
@keyframes tel-bounce {
	0%, 10% {
		transform: translateY(0);
	}
	20% {
		transform: translateY(-0.2em);
	}
	40%, 100% {
		transform: translateY(0);
	} /* ← 長い停止区間を確保 */
}