/*
 * JAPOC Header Navigation 1.2.0
 * SWELL 2.17.1の標準構造を利用し、テーマ本体を変更せずに表示を整えます。
 */

#body_wrap.japoc-header-navigation-active {
	--japoc-hn-navy: #123665;
	--japoc-hn-navy-dark: #0d2b54;
	--japoc-hn-blue: #1ea6c1;
	--japoc-hn-coral: #ef8389;
	--japoc-hn-line: #dce7ef;
	--japoc-hn-muted: #6c7f96;
}

/* RSSと検索だけが残っていた上端バーを非表示にする。 */
#body_wrap.japoc-header-navigation-active #header .l-header__bar {
	display: none !important;
}

#body_wrap.japoc-header-navigation-active #header {
	border-bottom: 1px solid rgb(18 54 101 / 10%);
	background: #fff;
	box-shadow: 0 8px 28px rgb(13 43 84 / 7%);
}

/*
 * TOPページの全幅化CSSが .home .l-container を display:block !important に
 * しているため、ヘッダー内のSWELLコンテナだけを本来の横並びへ戻す。
 */
#body_wrap.japoc-header-navigation-active #header .l-header__inner,
#body_wrap.japoc-header-navigation-active .l-fixHeader .l-fixHeader__inner {
	display: flex !important;
	width: 100% !important;
	max-width: calc(var(--container_size, 1200px) + var(--swl-pad_container, 0px) * 2) !important;
	margin-right: auto !important;
	margin-left: auto !important;
	background: #fff;
}

/* スマホ下段メニューの重複表示を止め、ヘッダーを一段に保つ。 */
#body_wrap.japoc-header-navigation-active #header .l-header__spNav {
	display: none !important;
}

#body_wrap.japoc-header-navigation-active #header .c-headLogo__link:focus-visible,
#body_wrap.japoc-header-navigation-active #header .c-gnav a:focus-visible,
#body_wrap.japoc-header-navigation-active #header button:focus-visible,
#body_wrap.japoc-header-navigation-active #sp_menu a:focus-visible,
#body_wrap.japoc-header-navigation-active #sp_menu button:focus-visible {
	outline: 3px solid rgb(30 166 193 / 32%);
	outline-offset: 3px;
}

@media (min-width: 960px) {
	#body_wrap.japoc-header-navigation-active #header .l-header__inner {
		height: 80px !important;
		min-height: 80px;
		align-items: stretch;
		padding-right: var(--swl-pad_container, 0px) !important;
		padding-left: var(--swl-pad_container, 0px) !important;
	}

	#body_wrap.japoc-header-navigation-active .l-fixHeader .l-fixHeader__inner {
		height: 64px !important;
		min-height: 64px;
		align-items: stretch;
		padding-right: var(--swl-pad_container, 0px) !important;
		padding-left: var(--swl-pad_container, 0px) !important;
	}

	#body_wrap.japoc-header-navigation-active #header .l-header__logo {
		flex: 0 0 auto;
		min-width: 0;
		margin-right: 18px;
		padding: 16px 0;
	}

	#body_wrap.japoc-header-navigation-active #header .c-headLogo,
	#body_wrap.japoc-header-navigation-active #header .c-headLogo__link,
	#body_wrap.japoc-header-navigation-active #header .c-headLogo__img {
		max-width: 192px;
	}

	#body_wrap.japoc-header-navigation-active #header .c-gnavWrap,
	#body_wrap.japoc-header-navigation-active .l-fixHeader .c-gnavWrap {
		flex: 1 1 auto;
		min-width: 0;
		align-self: stretch;
	}

	#body_wrap.japoc-header-navigation-active #header .c-gnav,
	#body_wrap.japoc-header-navigation-active .l-fixHeader .c-gnav {
		align-items: stretch;
		justify-content: flex-end;
	}

	#body_wrap.japoc-header-navigation-active #header .c-gnav > .menu-item > a,
	#body_wrap.japoc-header-navigation-active .l-fixHeader .c-gnav > .menu-item > a {
		min-height: 100%;
		gap: 5px;
		padding-right: 10px;
		padding-left: 10px;
		color: var(--japoc-hn-navy);
		font-weight: 700;
	}

	#body_wrap.japoc-header-navigation-active #header .c-gnav > .menu-item > a .ttl,
	#body_wrap.japoc-header-navigation-active .l-fixHeader .c-gnav > .menu-item > a .ttl {
		font-size: 13px;
		line-height: 1.3;
		letter-spacing: .02em;
	}

	#body_wrap.japoc-header-navigation-active #header .c-gnav > .menu-item > a .desc,
	#body_wrap.japoc-header-navigation-active .l-fixHeader .c-gnav > .menu-item > a .desc {
		color: var(--japoc-hn-muted);
		font-family: Arial, sans-serif;
		font-size: 8px;
		font-weight: 700;
		line-height: 1;
		letter-spacing: .12em;
	}

	#body_wrap.japoc-header-navigation-active #header .c-gnav > .menu-item > a::after,
	#body_wrap.japoc-header-navigation-active .l-fixHeader .c-gnav > .menu-item > a::after {
		height: 3px;
		background: linear-gradient(90deg, var(--japoc-hn-blue) 0 72%, var(--japoc-hn-coral) 72%);
	}

	#body_wrap.japoc-header-navigation-active #header .c-gnav .sub-menu,
	#body_wrap.japoc-header-navigation-active .l-fixHeader .c-gnav .sub-menu {
		width: max-content;
		min-width: 230px;
		max-width: 320px;
		border-top: 3px solid var(--japoc-hn-blue);
		border-radius: 0 0 8px 8px;
		background: #fff;
		box-shadow: 0 16px 38px rgb(13 43 84 / 17%);
		overflow: hidden;
	}

	#body_wrap.japoc-header-navigation-active #header .c-gnav .sub-menu a,
	#body_wrap.japoc-header-navigation-active .l-fixHeader .c-gnav .sub-menu a {
		min-height: 45px;
		padding: 11px 14px 11px 32px;
		border-bottom: 1px solid var(--japoc-hn-line);
		color: var(--japoc-hn-navy-dark);
		font-size: 13px;
		font-weight: 600;
		line-height: 1.55;
	}

	#body_wrap.japoc-header-navigation-active #header .c-gnav .sub-menu li:last-child > a,
	#body_wrap.japoc-header-navigation-active .l-fixHeader .c-gnav .sub-menu li:last-child > a {
		border-bottom: 0;
	}

	#body_wrap.japoc-header-navigation-active #header .c-gnav .sub-menu a:hover,
	#body_wrap.japoc-header-navigation-active #header .c-gnav .sub-menu a:focus-visible,
	#body_wrap.japoc-header-navigation-active .l-fixHeader .c-gnav .sub-menu a:hover,
	#body_wrap.japoc-header-navigation-active .l-fixHeader .c-gnav .sub-menu a:focus-visible {
		background: #f3f9fc;
		color: var(--japoc-hn-navy-dark);
	}

	#body_wrap.japoc-header-navigation-active #header .c-gnav .menu-item:focus-within > .sub-menu,
	#body_wrap.japoc-header-navigation-active .l-fixHeader .c-gnav .menu-item:focus-within > .sub-menu {
		opacity: 1;
		visibility: visible;
	}

	#body_wrap.japoc-header-navigation-active #header .c-gnav > .japoc-hn-cta > a,
	#body_wrap.japoc-header-navigation-active .l-fixHeader .c-gnav > .japoc-hn-cta > a {
		align-self: center;
		min-height: 48px;
		height: auto;
		margin-left: 8px;
		padding: 9px 17px;
		border-radius: 7px;
		background: var(--japoc-hn-navy);
		box-shadow: 0 8px 18px rgb(18 54 101 / 18%);
		color: #fff;
		transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
	}

	#body_wrap.japoc-header-navigation-active #header .c-gnav > .japoc-hn-cta > a::after,
	#body_wrap.japoc-header-navigation-active .l-fixHeader .c-gnav > .japoc-hn-cta > a::after {
		display: none;
	}

	#body_wrap.japoc-header-navigation-active #header .c-gnav > .japoc-hn-cta > a .ttl,
	#body_wrap.japoc-header-navigation-active #header .c-gnav > .japoc-hn-cta > a .desc,
	#body_wrap.japoc-header-navigation-active .l-fixHeader .c-gnav > .japoc-hn-cta > a .ttl,
	#body_wrap.japoc-header-navigation-active .l-fixHeader .c-gnav > .japoc-hn-cta > a .desc {
		color: #fff;
	}

	#body_wrap.japoc-header-navigation-active #header .c-gnav > .japoc-hn-cta > a .desc,
	#body_wrap.japoc-header-navigation-active .l-fixHeader .c-gnav > .japoc-hn-cta > a .desc {
		opacity: .72;
	}

	#body_wrap.japoc-header-navigation-active #header .c-gnav > .japoc-hn-cta > a:hover,
	#body_wrap.japoc-header-navigation-active #header .c-gnav > .japoc-hn-cta > a:focus-visible,
	#body_wrap.japoc-header-navigation-active .l-fixHeader .c-gnav > .japoc-hn-cta > a:hover,
	#body_wrap.japoc-header-navigation-active .l-fixHeader .c-gnav > .japoc-hn-cta > a:focus-visible {
		background: var(--japoc-hn-navy-dark);
		box-shadow: 0 11px 24px rgb(13 43 84 / 24%);
		transform: translateY(-1px);
	}
}

@media (min-width: 960px) and (max-width: 1180px) {
	#body_wrap.japoc-header-navigation-active #header .l-header__logo {
		margin-right: 10px;
	}

	#body_wrap.japoc-header-navigation-active #header .c-headLogo {
		height: 40px;
	}

	#body_wrap.japoc-header-navigation-active #header .c-headLogo,
	#body_wrap.japoc-header-navigation-active #header .c-headLogo__link,
	#body_wrap.japoc-header-navigation-active #header .c-headLogo__img {
		max-width: 160px;
	}

	#body_wrap.japoc-header-navigation-active #header .c-gnav > .menu-item > a {
		padding-right: 7px;
		padding-left: 7px;
	}

	#body_wrap.japoc-header-navigation-active #header .c-gnav > .menu-item > a .ttl {
		font-size: 12px;
	}

	#body_wrap.japoc-header-navigation-active #header .c-gnav > .menu-item > a .desc {
		display: none;
	}

	#body_wrap.japoc-header-navigation-active #header .c-gnav > .japoc-hn-cta > a {
		margin-left: 4px;
		padding-right: 12px;
		padding-left: 12px;
	}
}

@media not all and (min-width: 960px) {
	#body_wrap.japoc-header-navigation-active #header {
		box-shadow: 0 6px 22px rgb(13 43 84 / 9%);
	}

	#body_wrap.japoc-header-navigation-active #header .l-header__inner {
		height: 60px !important;
		min-height: 60px;
		padding: 0;
	}

	#body_wrap.japoc-header-navigation-active #header .l-header__logo {
		max-width: calc(100% - 60px);
		margin-right: auto;
		padding: 0 14px;
	}

	#body_wrap.japoc-header-navigation-active #header .c-headLogo {
		height: 50px;
	}

	#body_wrap.japoc-header-navigation-active #header .-img .c-headLogo__link {
		padding: 9px 0;
	}

	#body_wrap.japoc-header-navigation-active #header .c-headLogo__img {
		max-width: min(58vw, 188px);
	}

	#body_wrap.japoc-header-navigation-active #header .l-header__menuBtn {
		width: 60px;
		height: 60px;
	}

	#body_wrap.japoc-header-navigation-active #header .l-header__menuBtn .c-iconBtn {
		display: flex;
		width: 60px;
		height: 60px;
		align-items: center;
		justify-content: center;
		color: var(--japoc-hn-navy);
	}

	/* アイコンフォントの表示に左右されないハンバーガー。 */
	#body_wrap.japoc-header-navigation-active #header .l-header__menuBtn .icon-menu-thin::before {
		display: block;
		width: 25px;
		height: 18px;
		background:
			linear-gradient(currentColor, currentColor) 0 0 / 100% 2px no-repeat,
			linear-gradient(currentColor, currentColor) 0 50% / 100% 2px no-repeat,
			linear-gradient(currentColor, currentColor) 0 100% / 100% 2px no-repeat;
		content: "" !important;
	}

	#body_wrap.japoc-header-navigation-active #sp_menu .p-spMenu__inner {
		width: min(88vw, 380px);
	}

	#body_wrap.japoc-header-navigation-active #sp_menu .p-spMenu__body {
		padding: 24px 22px 120px;
	}

	#body_wrap.japoc-header-navigation-active #sp_menu .p-spMenu__closeBtn .c-iconBtn {
		color: var(--japoc-hn-navy);
	}

	#body_wrap.japoc-header-navigation-active #sp_menu .icon-close-thin::before {
		display: block;
		content: "×" !important;
		font-family: Arial, sans-serif !important;
		font-size: 34px;
		font-weight: 300;
		line-height: 1;
	}

	#body_wrap.japoc-header-navigation-active #sp_menu .c-widget__title.-spmenu {
		margin: 8px 0 12px;
		padding: 0 0 14px;
		border-bottom: 3px solid var(--japoc-hn-blue);
		border-radius: 0;
		background: transparent;
		color: var(--japoc-hn-navy-dark);
		font-family: Arial, sans-serif;
		font-size: 12px;
		font-weight: 700;
		letter-spacing: .18em;
	}

	#body_wrap.japoc-header-navigation-active #sp_menu .japoc-hn-accordion-toggle {
		position: relative;
		width: 100%;
		margin: 0;
		padding-right: 42px;
		padding-left: 1.5em;
		appearance: none;
		border: 0;
		background: transparent;
		font-family: inherit;
		cursor: pointer;
		text-align: left;
	}

	#body_wrap.japoc-header-navigation-active #sp_menu .p-spMenu__nav .menu-item > a,
	#body_wrap.japoc-header-navigation-active #sp_menu .p-spMenu__nav .menu-item > .japoc-hn-accordion-toggle {
		display: flex;
		min-height: 52px;
		align-items: center;
		padding-top: 11px;
		padding-bottom: 11px;
		border-bottom: 1px solid var(--japoc-hn-line);
		color: var(--japoc-hn-navy-dark);
		font-size: 14px;
		font-weight: 700;
		line-height: 1.5;
	}

	#body_wrap.japoc-header-navigation-active #sp_menu .japoc-hn-accordion-toggle:hover,
	#body_wrap.japoc-header-navigation-active #sp_menu .japoc-hn-accordion-toggle:focus-visible {
		background: #eef6fa;
	}

	#body_wrap.japoc-header-navigation-active #sp_menu .japoc-hn-accordion-toggle::after {
		position: absolute;
		top: 50%;
		right: 15px;
		width: 9px;
		height: 9px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		content: "";
		transform: translateY(-65%) rotate(45deg);
		transition: transform .2s ease;
	}

	#body_wrap.japoc-header-navigation-active #sp_menu .japoc-hn-accordion-item.is-open > .japoc-hn-accordion-toggle::after {
		transform: translateY(-35%) rotate(-135deg);
	}

	#body_wrap.japoc-header-navigation-active #sp_menu .p-spMenu__nav .sub-menu {
		margin: 0;
		background: #f6fafc;
	}

	#body_wrap.japoc-header-navigation-active #sp_menu .p-spMenu__nav .sub-menu[hidden] {
		display: none !important;
	}

	#body_wrap.japoc-header-navigation-active #sp_menu .p-spMenu__nav .sub-menu a {
		min-height: 46px;
		padding-left: 2.5em;
		font-size: 13px;
		font-weight: 500;
	}

	#body_wrap.japoc-header-navigation-active #sp_menu .p-spMenu__nav .sub-menu a::before {
		left: 1em;
	}

	#body_wrap.japoc-header-navigation-active #sp_menu .p-spMenu__nav .japoc-hn-parent-destination > a {
		font-weight: 700;
	}

	#body_wrap.japoc-header-navigation-active #sp_menu .p-spMenu__nav .japoc-hn-cta > a {
		min-height: 54px;
		justify-content: center;
		margin-top: 20px;
		padding-right: 16px;
		padding-left: 16px;
		border: 0;
		border-radius: 7px;
		background: var(--japoc-hn-navy);
		box-shadow: 0 8px 20px rgb(13 43 84 / 18%);
		color: #fff;
		text-align: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	#body_wrap.japoc-header-navigation-active #header *,
	#body_wrap.japoc-header-navigation-active #sp_menu * {
		scroll-behavior: auto !important;
		transition-duration: .01ms !important;
	}
}