.wp-block-navigation {
	/* メニュー毎の動作 */
	&.is-style-header {
		/* PCの時 */

		@media (1000px < width) {
			ion-icon {
				transition: 0.3s var(--transition-easeout-quint) translate;
				translate: 0 1px;
				font-size: var(--wp--preset--font-size--small);
			}
		}

		@media (1340px < width) {
			.wp-block-navigation.wp-block-navigation__container {
				.wp-block-navigation-item__content {
					transition: 0.3s var(--transition-easeout-quint) color;

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

				/* 最上位 */
				> .wp-block-navigation-item {
					justify-content: center;
					/* color: #f00; */
					> .wp-block-navigation-item__content {
						display: flex;
						gap: 0.5rem;
						align-items: center;
						line-height: 1;
						padding-block: var(--wp--preset--spacing--30);
						@media (width < 1340px) {
							padding-inline: var(--wp--preset--spacing--30);
						}

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

					+ .wp-block-navigation-item {
						position: relative;

						&::before {
							position: absolute;
							width: 2px;
							height: 50%;
							background-color: var(--wp--preset--color--secondary);
							content: "";
							inset: 50% auto auto 0;
							translate: 0 -50%;
							rotate: 30deg;
						}
					}
				}

				/* 最初の子メニュー */
				.wp-block-navigation__submenu-container {
					width: max-content !important;
					background-color: transparent;
					border: 0;
					inset: 100% auto auto 0px;

					> .wp-block-navigation-item {
						width: 100% !important;
						background-color: var(--wp--preset--color--accent-1);
						transition: 0.3s var(--transition-easeout-quint) background-color;
						&:hover {
							background-color: color-mix(
								in srgb,
								var(--wp--preset--color--accent-1),
								white 20%
							);
						}
					}

					> .wp-block-navigation-item + .wp-block-navigation-item {
						border-block-start: 1px solid
							color-mix(
								in srgb,
								var(--wp--preset--color--white),
								transparent 80%
							);
					}

					.wp-block-navigation-item__content {
						display: flex;
						gap: var(--wp--preset--spacing--20);
						align-items: center;
						justify-content: space-between;
						color: var(--wp--preset--color--base-2);

						&:hover {
							ion-icon {
								translate: 3px 1px;
							}
						}

						@media (width < 1340px) {
							font-size: var(--wp--preset--font-size--small);
						}
					}

					&.has-child {
						&:last-of-type {
							.wp-block-navigation-submenu {
								inset: 100% 0 auto auto;
							}
						}
					}

					> .wp-block-navigation-item {
						&:first-of-type {
							overflow: hidden;
							border-radius: 0.5rem 0.5rem 0 0;
						}

						&:last-of-type {
							overflow: hidden;
							border-radius: 0 0 0.5rem 0.5rem;
						}
					}
				}
			}

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

		@media (1000px < width <= 1340px) {
			.wp-block-navigation.wp-block-navigation__container {
				.wp-block-navigation-item__content {
					transition: 0.3s var(--transition-easeout-quint) color;

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

				/* 最上位 */
				> .wp-block-navigation-item {
					justify-content: center;
					/* color: #f00; */
					> .wp-block-navigation-item__content {
						display: flex;
						gap: 0.5rem;
						align-items: center;
						line-height: 1;
						padding-block: var(--wp--preset--spacing--20);

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

					+ .wp-block-navigation-item {
						position: relative;

						&::before {
							position: absolute;
							width: 2px;
							height: 50%;
							background-color: var(--wp--preset--color--secondary);
							content: "";
							inset: 50% auto auto 0;
							translate: 0 -50%;
							rotate: 30deg;
						}
					}
				}

				/* 最初の子メニュー */
				.wp-block-navigation__submenu-container {
					width: max-content !important;
					background-color: transparent;
					border: 0;
					inset: 100% auto auto 0px;

					> .wp-block-navigation-item {
						width: 100% !important;
						background-color: var(--wp--preset--color--accent-1);
						transition: 0.3s var(--transition-easeout-quint) background-color;
						&:hover {
							background-color: color-mix(
								in srgb,
								var(--wp--preset--color--accent-1),
								white 20%
							);
						}
					}

					> .wp-block-navigation-item + .wp-block-navigation-item {
						border-block-start: 1px solid
							color-mix(
								in srgb,
								var(--wp--preset--color--white),
								transparent 80%
							);
					}

					.wp-block-navigation-item__content {
						display: flex;
						gap: var(--wp--preset--spacing--20);
						align-items: center;
						justify-content: space-between;
						color: var(--wp--preset--color--base-2);

						&:hover {
							ion-icon {
								translate: 3px 1px;
							}
						}

						@media (width < 1340px) {
							font-size: var(--wp--preset--font-size--small);
						}
					}

					&.has-child {
						&:last-of-type {
							.wp-block-navigation-submenu {
								inset: 100% 0 auto auto;
							}
						}
					}

					> .wp-block-navigation-item {
						&:first-of-type {
							overflow: hidden;
							border-radius: 0.5rem 0.5rem 0 0;
						}

						&:last-of-type {
							overflow: hidden;
							border-radius: 0 0 0.5rem 0.5rem;
						}
					}
				}
			}

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

		/* スマートフォンの時 */
		@media (width <= 1000px) {
			.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);
						a.wp-block-navigation-item__content {}
					}
				}

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

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

			&:hover {
				opacity: 0.5;
			}
		}
	}

	/* デフォルトのブレークポイント無効化. */
	@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 (1000px < width) {
		/* メニューを表示. */
		.wp-block-navigation__responsive-container:not(.hidden-by-default):not(
			.is-menu-open
		) {
			/* position: relative; */
			z-index: auto;
			display: block;
			width: 100%;
			background-color: inherit;
		}

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