.wp-block-navigation {
	/* メニュー毎の動作 */
	&.is-style-header {
		font-family: var(--wp--preset--font-family--noto-serif-jp);
		font-variation-settings: "wght" 150;
		@media (1150px < width) {
			.wp-block-navigation.wp-block-navigation__container {
				/* 最上位 */
				> .wp-block-navigation-item {
					> .wp-block-navigation-item__content {
						line-height: 1;
						padding-block: var(--wp--preset--spacing--30);
						transition: scale 0.3s var(--wp--custom--transition--easeout-quint);

						&:hover {
							scale: 1.1;
						}
					}
				}
			}

			.has-child:not(.open-on-click):hover > .wp-block-navigation__submenu-container {
				width: max-content;
			}
		}

		@media (width <= 1150px) {
			.wp-block-navigation__responsive-container-open,
			.wp-block-navigation__responsive-container-close {
				padding: var(--wp--preset--spacing--30);
				background-color: var(--wp--preset--color--white);
				border: 1px solid var(--wp--preset--color--accent-1) !important;
				color: var(--wp--preset--color--accent-1);

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

			.wp-block-navigation__responsive-container-open {
				&::after {
					content: "メニュー";
				}
			}

			.wp-block-navigation__responsive-container.is-menu-open {
				padding: 0;
				margin-block-start: 0;

				.wp-block-navigation__responsive-close {}

				.wp-block-navigation__responsive-dialog {
					background-color: var(--wp--preset--color--contrast-3);
					padding: var(--wp--preset--spacing--40);
				}

				.wp-block-navigation__responsive-container-content {
					background-color: var(--wp--preset--color--white);
					padding-top: 0;
				}

				/* メニュー部分 */
				ul.wp-block-navigation__container {
					gap: 0;
					align-items: flex-start;
					width: 100%;
					background-color: var(--wp--preset--color--white) !important;

					/* メニュー内共通 */
					.wp-block-navigation-item {
						width: 100%;
					}

					.wp-block-navigation-item__content {
						display: flex;
						width: 100%;
						text-decoration: none;
						padding-inline: var(--wp--preset--spacing--30);
						padding-block: var(--wp--preset--spacing--30);
					}

					.wp-block-navigation-item__label {
						display: flex;
						align-items: center;
						width: 100%;
						line-height: 1;
					}

					li.wp-block-navigation-item {
						a.wp-block-navigation-item__content {}

						+ .wp-block-navigation-item {
							border-block-start: 1px solid var(--wp--preset--color--contrast-4);
						}
					}

					ul.wp-block-navigation__submenu-container {
						width: 100%;
						padding: 0;
						padding-inline-start: var(--wp--preset--spacing--20);
						padding-inline-end: 0;
						border-block-start: 1px solid var(--wp--preset--color--contrast-4);
					}
				}

				.wp-block-buttons {
					display: none;
				}
			}
		}

		@media (width <= 1150px) {
			gap: 0 var(--wp--preset--spacing--40);
		}
	}

	&.is-style-footer {
		.wp-block-navigation-item__content {
			display: inline-flex;
			align-items: center;
			transition: 0.3s var(--wp--custom--transition--easeout-quint) opacity;

			&:hover {
				opacity: 0.5;
			}
		}
	}

	&.is-style-contents {
		.wp-block-navigation__container {
			font-size: var(--wp--preset--font-size--x-large);
			font-family: var(--wp--preset--font-family--roboto-condensed);
			font-variation-settings: "wght" 200;
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
			line-height: 1;
			.wp-block-navigation-item {
				display: block;
				padding-block-end: var(--wp--preset--spacing--40);
				position: relative;
				.wp-block-navigation-item__content {
					position: relative;

					display: flex;
					flex-flow: column;
					align-items: stretch;
					.wp-block-navigation-item__label {
						flex: 1 0 auto;
						line-height: 1;
						letter-spacing: 0.1em;
					}

					.wp-block-navigation-item__description {
						display: block;
						margin-block-start: calc(var(--wp--preset--spacing--20) / 2);
						font-size: var(--wp--preset--font-size--medium);
						margin-inline-start: 0.1em;
					}

					ion-icon {
						position: absolute;
						inset: 50% 0 auto auto;
						translate: 0 -50%;
						--ionicon-stroke-width: 12px;
						font-size: var(--wp--preset--font-size--large);
					}
				}

				&::before, &::after {
					position: absolute;
					inset: auto auto 0px 0px;
					content: "";
					width: 100%;
					height: 1px;
				}
				&::before {
					background-color: var(--wp--preset--color--contrast-3);
				}

				&::after {
					background-color: var(--wp--preset--color--contrast-1);
					scale: 0 1;
					transform-origin: left;
					transition: scale 0.3s var(--wp--custom--transition--easeout-quint);
				}

				&:hover {
					&:after {
						scale: 1 1;
					}
				}
			}
		}
	}

	/* デフォルトのブレークポイント無効化. */
	@media (min-width: 600px) {
		/* メニューを非表示. */
		.wp-block-navigation__responsive-container:not(.hidden-by-default):not(
			.is-menu-open
		) {
			display: none;
		}

		/* Openボタン（ハンバーガーボタン）を表示. */
		.wp-block-navigation__responsive-container-open:not(.always-shown) {
			display: flex;
		}
	}

	/* 新しいブレークポイント設定. */
	@media (1150px < width) {
		/* メニューを表示. */
		.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
			z-index: auto;
			display: block;
			width: 100%;
			background-color: inherit;
		}

		/* Openボタン（ハンバーガーボタン）を非表示. */
		.wp-block-navigation__responsive-container-open:not(.always-shown) {
			display: none;
		}
	}
}