/*╔════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════╗*/
/*║ HEADER I                                                                                                                                                                                                                                              ║*/
/*╚════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════╝*/
/***-------------------------------------------*** Space for Header ***-------------------------------------------***/
#cmsgrid > div:first-of-type { padding-top: 240px; }

/***-------------------------------------------*** Header ***-------------------------------------------***/
header { position: fixed; z-index: 1000; inset: 0 0 auto 0; height: 240px; background: var(--white); transition: var(--transition); }
body.home header { background: transparent; }
body.home.scrolled header { background: var(--white); }
body.scrolled header { box-shadow: 0 0 100px 0 rgba(0,0,0,0.1); }
header .cms_container_wide { position: relative; height: 240px; padding: 0 30px; }

/***-------------------------------------------*** Hamburger ***-------------------------------------------***/
header #hHamburger { cursor: pointer; position: absolute; top: 50%; right: 30px; transform: translateY(-50%); display: none; }
#nav-icon4 { position: relative; width: 39px; height: 12px; transition: var(--transition); }
body.navi #nav-icon4 { height: 30px; }
#nav-icon4 span { position: absolute; left: 0; display: block; width: 100%; height: 2px; background: var(--primary-100); transform: rotate(0deg); transition: var(--transition); will-change: transform; }
#nav-icon4 span:first-child,
#nav-icon4 span:last-child { transform-origin: left center; }
#nav-icon4 span:first-child { top: 0px; }
#nav-icon4 span:last-child { top: 10px; }
body.navi #nav-icon4 span:first-child { top: 0; left: 5px; transform: rotate(45deg); }
body.navi #nav-icon4 span:last-child { top: 28px; left: 5px; transform: rotate(-45deg); }

/***-------------------------------------------*** Close ***-------------------------------------------***/
#hClose { cursor: pointer; position: absolute; top: 30px; right: 30px; display: none; width: 39px; height: 39px; }
#hClose > div { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(45deg); background: var(--white); }
#hClose > div:first-child { width: 100%; height: 2px; }
#hClose > div:last-child { width: 2px; height: 100%; }

/***-------------------------------------------*** Logo ***-------------------------------------------***/
body #logo_container { position: absolute; z-index: 1; top: 30px; left: 30px; width: 180px; height: 180px; }
body #logo_container > a { position: absolute; z-index: 2; inset: 0; background: center left / contain no-repeat url("/pages/img/logo.svg"); }

/***-------------------------------------------*** Logo ***-------------------------------------------***/
@media screen and (min-width: 960px) { #hFooterArt { display: none; } }

/***-------------------------------------------*** Desktop ***-------------------------------------------***/
@media screen and (min-width: 1201px) {
	/* Start: Navi */
	header #hNavigation > ul { display: flex; justify-content: flex-end; align-items: center; gap: 66px; width: 100%; padding: 100px 0 0 210px; }
	header #hNavigation > ul > li { display: block; }
	header #hNavigation > ul > li > a { display: block; font-weight: 600; font-size: 20px; line-height: 24px; color: var(--black); transition: var(--transition); }
	header #hNavigation > ul > li.current > a,
	header #hNavigation > ul > li:hover > a { color: var(--primary-100); }
	body.home header #hNavigation > ul > li > a { color: var(--white); }
	body.home header #hNavigation > ul > li.current > a,
	body.home header #hNavigation > ul > li:hover > a { color: var(--primary-100); }
	header #hNavigation > ul > li.current > .button-link > a,
	header #hNavigation > ul > li:hover > .button-link > a { transform: translateY(-5px); }
	/* End: Navi */

	/* Start: Scrolled */
	header,
	header .cms_container_wide,
	body #logo_container,
	header #hNavigation > ul,
	header #hNavigation > ul > li > a { transition: var(--transition); }
	body.scrolled header { height: 80px; }
	body.scrolled header .cms_container_wide { height: 80px; }
	body.scrolled #logo_container { top: 10px; width: 60px; height: 60px; }
	body.scrolled header #hNavigation > ul { gap: 59px; padding: 20px 0 0 90px; }
	body.home.scrolled header #hNavigation > ul > li > a { color: var(--black); }
	body.home.scrolled header #hNavigation > ul > li.current > a,
	body.home.scrolled header #hNavigation > ul > li:hover > a { color: var(--primary-100); }
	/* End: Scrolled */
}

/***-------------------------------------------*** Tablet ***-------------------------------------------***/
@media screen and (min-width: 960px) and (max-width: 1200px) {
	/* Start: Header */
	#cmsgrid > div:first-of-type { padding-top: 140px; }
	header { height: 140px; }
	header .cms_container_wide { height: 140px; }
	header #hHamburger { display: block; }
	body #logo_container { top: 20px; width: 100px; height: 100px; }
	/* End: Header */

	/* Start: Navi */
	header #hNavigation { position: fixed; top: 140px; right: -100%; bottom: 0; padding: 30px; background: var(--primary-100); overflow-y: auto; transition: var(--transition); }
	body.navi header #hNavigation { right: 0; }
	header #hNavigation > ul { display: flex; flex-direction: column; gap: 17px; }
	header #hNavigation > ul > li { display: block; }
	header #hNavigation > ul > li > a { display: block; font-weight: 600; font-size: 32px; line-height: 38px; color: var(--white); transition: var(--transition); }
	header #hNavigation > ul > li.current > a,
	header #hNavigation > ul > li:hover > a { color: var(--secondary); }
	header #hNavigation > ul > li > .button-link { display: block; margin: 31px 0 0 0; }
	header #hNavigation > ul > li > .button-link > a { color: var(--primary-100); background: var(--white); border: 1px solid var(--white); }
	header #hNavigation > ul > li.current > .button-link > a,
	header #hNavigation > ul > li:hover > .button-link > a { color: var(--primary-100); background: var(--white); border: 1px solid var(--white); transform: translateY(-5px); }
	/* End: Navi */

	/* Start: Scrolled */
	header,
	header .cms_container_wide,
	body #logo_container,
	header #hNavigation { transition: var(--transition); }
	body.scrolled header { height: 80px; }
	body.scrolled header .cms_container_wide { height: 80px; }
	body.scrolled #logo_container { top: 15px; width: 50px; height: 50px; }
	body.scrolled header #hNavigation { top: 80px; }
	/* End: Scrolled */
}

/***-------------------------------------------*** Smartphone ***-------------------------------------------***/
@media screen and (max-width: 959px) {
	/* Start: Header */
	#cmsgrid > div:first-of-type { padding-top: 140px; }
	header { height: 140px; }
	header .cms_container_wide { height: 140px; }
	header #hHamburger { display: block; }
	header #hClose { display: block; }
	body #logo_container { top: 20px; width: 100px; height: 100px; }
	/* End: Header */

	/* Start: Navi */
	header #hNavigation { position: fixed; z-index: 9999; top: 0; right: -100vW; bottom: 0; display: flex; flex-direction: column; width: 100vW; overflow-y: auto; background: var(--primary-100); transition: var(--transition); }
	body.navi header #hNavigation { right: 0; }
	header #hNavigation > ul { display: flex; flex-direction: column; gap: 17px; padding: 99px 30px 30px 30px; }
	header #hNavigation > ul > li { display: block; }
	header #hNavigation > ul > li > a { display: block; font-weight: 600; font-size: 32px; line-height: 38px; color: var(--white); transition: var(--transition); }
	header #hNavigation > ul > li.current > a,
	header #hNavigation > ul > li:hover > a { color: var(--secondary); }
	header #hNavigation > ul > li > .button-link { display: block; margin: 31px 0 0 0; }
	header #hNavigation > ul > li > .button-link > a { color: var(--primary-100); background: var(--white); border: 1px solid var(--white); }
	header #hNavigation > ul > li.current > .button-link > a,
	header #hNavigation > ul > li:hover > .button-link > a { color: var(--primary-100); background: var(--white); border: 1px solid var(--white); transform: translateY(-5px); }
	/* End: Navi */

	/* Start: Footer Art */
	#hFooterArt { padding: 30px; margin: auto 0 0 0; }
	#hFooterArt .small-text { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 15px 36px; }
	#hFooterArt a { color: var(--white); transition: var(--transition); }
	#hFooterArt a:hover { color: var(--secondary); }
	/* Start: Footer Art */

	/* Start: Scrolled */
	header,
	header .cms_container_wide,
	body #logo_container { transition: var(--transition); }
	body.scrolled header { height: 80px; }
	body.scrolled header .cms_container_wide { height: 80px; }
	body.scrolled #logo_container { top: 15px; width: 50px; height: 50px; }
	/* End: Scrolled */
}