/**
 * 固定ヘッダー（#fix_header）: 上下左右に余白を取った浮遊感
 */
:root {
	--swell-child-fix-header-gap-top: 1rem;
	--swell-child-fix-header-gap-x: 1.5rem;
	--swell-child-fix-header-radius: 1rem;
	--swell-child-fix-header-blue-deep: #04384c;
	--swell-child-fix-header-blue: #0f54b3;
	--swell-child-fix-header-bg-soft: #f5f8fd;
}

@media (min-width: 960px) {
	#fix_header.l-fixHeader {
		box-shadow: none !important;
		padding: var(--swell-child-fix-header-gap-top) var(--swell-child-fix-header-gap-x) 0;
		pointer-events: none;
		overflow: visible;
	}

	#fix_header.l-fixHeader::before {
		display: none !important;
	}

	#fix_header .l-fixHeader__inner {
		pointer-events: auto;
		width: 100%;
		margin: 0 auto;
		padding-right: 0;
		background-color: var(--color_header_bg, #fff);
		border-radius: var(--swell-child-fix-header-radius);
		box-shadow:
			0 12px 40px rgba(4, 56, 76, 0.14),
			0 4px 14px rgba(4, 56, 76, 0.1);
		overflow: visible;
	}

	#fix_header .l-fixHeader__gnav,
	#fix_header .l-fixHeader__gnav .c-gnav {
		overflow: visible;
	}

	#fix_header .c-gnav > .menu-item-has-children {
		position: relative;
	}

	#fix_header .c-gnav > .menu-item-has-children > .sub-menu {
		left: 50%;
		top: 100%;
		width: auto;
		min-width: 14rem;
		margin-top: 0.5rem;
		padding: 0.5rem 0;
		border-radius: 0.75rem;
		background: #fff;
		color: var(--swell-child-fix-header-blue-deep);
		box-shadow:
			0 12px 32px rgba(4, 56, 76, 0.14),
			0 4px 12px rgba(4, 56, 76, 0.08);
		opacity: 0;
		visibility: hidden;
		transform: translateX(-50%) translateY(6px);
		transition:
			opacity 0.2s ease,
			visibility 0.2s ease,
			transform 0.2s ease;
		z-index: 20;
	}

	#fix_header .c-gnav > .menu-item-has-children:hover > .sub-menu,
	#fix_header .c-gnav > .menu-item-has-children:focus-within > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: translateX(-50%) translateY(0);
	}

	#fix_header .c-gnav .sub-menu a {
		padding: 0.75rem 1.25rem;
	}

	#fix_header .c-gnav .sub-menu a::before {
		display: none;
	}

	#fix_header .c-gnav .sub-menu a:hover,
	#fix_header .c-gnav .sub-menu a:focus-visible {
		background: var(--swell-child-fix-header-bg-soft);
		color: var(--swell-child-fix-header-blue);
	}

	#fix_header .c-gnav .sub-menu .ttl {
		display: block;
		font-size: 0.95rem;
		font-weight: 600;
		line-height: 1.3;
	}

	#fix_header .c-gnav .sub-menu .c-smallNavTitle.desc {
		display: none;
	}
}