/* The masthead belongs to the photograph, with one consistent navigation scale. */
:root{--header-height:112px}
.header{position:fixed;inset:0 0 auto;height:var(--header-height);padding:0 3%;gap:28px;background:#102442;color:#fff;border:0;border-bottom:1px solid #ffffff20;box-shadow:none;transition:background .25s,box-shadow .25s;z-index:30}
main{padding-top:var(--header-height)}
#purpose{scroll-margin-top:var(--header-height)}
body.is-home main{padding-top:0}
body.is-home:not(.header-scrolled) .header{background:transparent;border-color:#ffffff2e}
body.header-scrolled .header{background:#102442;box-shadow:0 3px 20px #06132922}
.header .brand{gap:3px;min-width:224px;color:#fff}
.header .brand-name{font-size:20px;line-height:1.5;font-weight:500;letter-spacing:.015em;margin:0}
.header .logo{width:174px;height:50px}
.header .logo-base{width:122px;height:50px;background-size:174px 50px;filter:brightness(0) invert(1)}
.header .logo-x{width:52px;height:50px}
.header .x-depth{background-size:174px 50px;filter:brightness(0) invert(1);opacity:.8}
.header .x-depth:last-child{opacity:1}
.header nav{display:flex;position:static;align-items:center;flex-direction:row;gap:22px;padding:0;margin:0;font-size:16px;line-height:1.6;font-weight:500;background:none;box-shadow:none;overflow:visible;max-height:none}
.header nav>a{font-size:16px;line-height:1.6;letter-spacing:0;color:#fff;white-space:nowrap;padding:12px 0;border:0}
.header nav>a .nav-phrase{display:inline-block;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit;margin:0}
.header nav>a:not(.contact-nav):after{height:1px;background:#fff;bottom:3px}
.header nav .contact-nav{background:none;border:1px solid #ffffff70;padding:12px 17px;margin:0;color:#fff;gap:13px;display:flex;align-items:center}
.header nav .contact-nav span{display:inline;font-size:21px;color:inherit;margin:0}
.header nav .contact-nav:hover{background:#ffffff15;border-color:#fff}
.header .menu-toggle{display:none;color:#fff}
.header a:focus-visible,.header button:focus-visible{outline:2px solid #fff;outline-offset:5px}
body.is-home .hero{height:100svh;min-height:730px;max-height:1100px;margin:0;background:#10223e}
body.is-home .hero:after{background:linear-gradient(180deg,#07193050,transparent 180px),linear-gradient(90deg,#09142b38,transparent 75%)}
body.is-home .hero-content{padding:clamp(195px,24vh,275px) 7% 135px}
body.is-home .hero-bottom{left:7%;right:7%}
@media(min-width:1700px){.header{padding:0 4%;gap:42px}.header nav{gap:30px}.header nav>a{font-size:17px}.header .brand-name{font-size:22px}}
@media(max-width:1279px){
 :root{--header-height:100px}
 .header{padding:0 5%;gap:20px}
 .header .brand{min-width:0}.header .brand-name{font-size:20px}
 .header .menu-toggle{display:flex;gap:16px;align-items:center;background:transparent;border:0;padding:12px 0;font:15px Arial,sans-serif;letter-spacing:.08em}
 .header .menu-toggle span{font-size:29px;line-height:1}
 .header nav{display:none;position:absolute;top:100%;left:0;right:0;background:#102442;padding:16px 5% 24px;max-height:calc(100svh - var(--header-height));overflow:auto;box-shadow:0 15px 22px #081a3226}
 .header nav.open{display:flex;flex-direction:column;align-items:stretch;gap:0}
 .header:has(nav.open){background:#102442!important}
 .header nav>a{font-size:19px;line-height:1.75;padding:17px 0;white-space:normal;border-bottom:1px solid #ffffff30}
 .header nav>a .nav-phrase{font-size:inherit;color:inherit;margin:0}
 .header nav .contact-nav{margin-top:16px;padding:14px 18px;border:1px solid #ffffff70;justify-content:space-between;color:#fff}
 body.is-home .hero-content{padding-top:190px}
}
@media(max-width:650px){
 :root{--header-height:96px}
 .header{padding:0 6%;gap:14px}
 .header .brand{gap:0}.header .brand-name{font-size:18px;line-height:1.6}
 .header .logo{width:157px;height:45px}.header .logo-base{width:110px;height:45px;background-size:157px 45px}.header .logo-x{width:47px;height:45px}.header .x-depth{background-size:157px 45px}
 .header .menu-toggle{font-size:14px;gap:10px}.header .menu-toggle span{font-size:26px}
 .header nav{padding:12px 6% 24px}.header nav>a{font-size:18px;line-height:1.8}
 body.is-home .hero{min-height:680px;max-height:950px}
 body.is-home .hero-content{padding:175px 7% 125px}
}
@media(prefers-reduced-motion:reduce){.header{transition:none}}
/* 2026-09-30: ロゴのX（矢印部分）をブランドブルーで表示 */
.header .logo-base,.header .x-depth{background-image:url('assets/jpex-logo-white.png');filter:none}
.header .x-depth{opacity:1;filter:brightness(.72)}
.header .x-depth:last-child{filter:none}