.wp-block-navigation {
	/* メニュー毎の動作 */
	&.is-style-header {
		font-family: var(--wp--preset--font-family--fot-tsukuardgothic-std);

		.wp-block-navigation.is-style-header {
			.wp-block-navigation-item__content {
				transition: 0.3s var(--wp--custom--transition--easeout-quint) color;
				font-weight: 700;
				ion-icon {
					transition: 0.3s var(--wp--custom--transition--easeout-quint) translate;
					translate: 0 1px;
				}
				&: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;
					}
				}

				&:last-of-type {
					.wp-block-navigation__submenu-container {
						inset: 100% 0px auto auto;
					}
				}
			}

			/* 最初の子メニュー */
			.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-2);
					transition: 0.3s var(--wp--custom--transition--easeout-quint) background-color;
					&:hover {
						background-color: color-mix(
							in srgb,
							var(--wp--preset--color--accent-2),
							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;
					}
				}
			}
		}

		.wp-block-navigation__responsive-container-open {
			background-color: var(--wp--preset--color--accent-2);
			padding: var(--wp--preset--spacing--20);
			color: var(--wp--preset--color--white);
			border-radius: var(--wp--preset--border-radius--medium);
		}

		.wp-block-navigation-overlay-close {
			background-color: var(--wp--preset--color--accent-2);
			padding: var(--wp--preset--spacing--20);
			color: var(--wp--preset--color--white);
			border-radius: var(--wp--preset--border-radius--medium);
			position: fixed;
			top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--wp--preset--spacing--60));
			right: var(--wp--preset--spacing--60);
			z-index: 10;
		}

		/* オーバーレイの中身 */
		.wp-block-navigation__overlay-container {
			background-image: url(../../images/background_common.webp);
			background-size: 256px;
			background-repeat: repeat;
			background-color: var(--wp--preset--color--white);
			top: var(--wp-admin--admin-bar--height, 0px);
			position: fixed;
			left: 0;
			width: 100%;
			z-index: 100;
			border: var(--wp--preset--spacing--30) solid color-mix(in srgb, var(--wp--preset--color--accent-2) 50%, transparent);
			height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px)) !important;
			> .wp-block-group {
				height: 100%;
				min-height: 100% !important;
				overflow-y: scroll;
				position: relative;
			}

			.wp-block-navigation.is-style-overlay {
				/* メニュー内共通 */
				.wp-block-navigation {
					width: 100%;
					.wp-block-navigation-item {
						width: 100%;
						gap: 0;

						> .wp-block-navigation-item__content {
							font-size: var(--wp--preset--font-size--large);
							font-weight: 700;
						}

						.wp-block-navigation-item__content {
							padding-block: var(--wp--preset--spacing--20);
							display: flex;
							width: 100%;
							align-items: center;
							justify-content: space-between;
						}
					}
				}

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

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

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

	/* デフォルトのブレークポイント無効化. */
	@media (600px <= width) {
		/* メニューを非表示. */
		.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 (1060px < 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;
		}
	}
}