/* Shared header is isolated from article and simulator typography. */
html body header.site-header{box-sizing:border-box!important;display:block!important;position:relative!important;inset:auto!important;width:100%!important;max-width:none!important;height:auto!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;background:#fff!important;color:#244b63!important;font-family:Arial,Meiryo,sans-serif!important;line-height:1.4!important;backdrop-filter:none!important}
html body header.site-header .header-top{box-sizing:border-box!important;display:flex!important;position:relative!important;align-items:center!important;min-height:150px!important;height:150px!important;width:100%!important;max-width:none!important;margin:0!important;padding:16px 28px!important;overflow:hidden!important;background:#fff!important;gap:0!important}
html body header.site-header .brand{display:flex!important;flex-direction:row!important;position:relative!important;align-items:center!important;gap:12px!important;min-width:0!important;width:auto!important;max-width:65%!important;margin:0!important;padding:0!important;text-decoration:none!important;color:#153b53!important;z-index:2!important}
html body header.site-header .brand-logo{width:96px!important;height:70px!important;object-fit:contain!important;flex:0 0 96px!important;max-height:none!important;max-width:none!important;margin:0!important}
html body header.site-header .brand-site-title{display:flex!important;flex-direction:column!important;gap:5px!important;width:auto!important;padding:0!important;margin:0!important;background:none!important;color:#153b53!important;text-align:left!important}
html body header.site-header .brand-site-game{font-size:20px!important;font-weight:700!important;line-height:1.3!important;letter-spacing:.02em!important;color:#153b53!important}
html body header.site-header .brand-site-tools{font-size:13px!important;line-height:1.4!important;letter-spacing:.03em!important;color:#41677d!important}
html body header.site-header .header-banner-art{display:block!important;position:absolute!important;left:27%!important;right:0!important;top:0!important;bottom:0!important;width:auto!important;height:150px!important;overflow:hidden!important;z-index:0!important;pointer-events:none!important;mask-image:linear-gradient(to right,transparent,#000 25%)!important}
html body header.site-header .header-banner-art>img{display:block!important;position:absolute!important;right:0!important;top:0!important;height:100%!important;width:auto!important;max-width:none!important;object-fit:contain!important}
html body header.site-header .header-affinities{display:flex!important;position:absolute!important;right:24px!important;top:40px!important;align-items:center!important;gap:8px!important;padding:0!important;margin:0!important;background:transparent!important;z-index:3!important}
html body header.site-header .header-affinities img{display:block!important;width:auto!important;height:70px!important;object-fit:contain!important;max-width:85px!important}
html body header.site-header .account-header-actions{display:grid;position:absolute;right:220px;top:40px;gap:4px;z-index:4}
html body header.site-header.site-navigation-shell{position:sticky!important;top:0!important;z-index:100!important;box-shadow:0 2px 8px #153b5320!important}
html body header.site-header .header-bottom{box-sizing:border-box!important;display:flex!important;align-items:center!important;position:relative!important;width:100%!important;max-width:none!important;min-height:48px!important;height:auto!important;margin:0!important;padding:0!important;background:#fff!important;border-top:1px solid #d6e2e9!important;border-bottom:1px solid #d6e2e9!important}
html body header.site-header .main-nav{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;align-items:stretch!important;width:min(900px,100%)!important;max-width:100%!important;height:48px!important;min-height:0!important;margin:0 auto!important;padding:0!important;gap:0!important;overflow:visible!important}
html body header.site-header .main-nav>a,html body header.site-header .main-nav>.nav-cooking-group>a{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;box-sizing:border-box!important;height:100%!important;min-width:0!important;width:100%!important;margin:0!important;padding:4px 7px!important;border:0!important;border-bottom:2px solid transparent!important;text-decoration:none!important;font-family:Arial,Meiryo,sans-serif!important;font-size:14px!important;font-weight:700!important;line-height:1.25!important;color:#526c84!important;background:#fff!important;white-space:normal!important;text-align:center!important}
html body header.site-header .main-nav>a:hover,html body header.site-header .main-nav a:focus-visible{background:#edf6fa!important;color:#153b53!important}
html body header.site-header .main-nav .nav-cooking-group{position:relative!important;display:block!important;min-width:0!important;height:100%!important;margin:0!important;padding:0!important}
html body header.site-header .nav-cooking-submenu{position:absolute!important;top:100%!important;left:0!important;display:grid;min-width:200px!important;width:max-content!important;max-width:90vw!important;padding:5px!important;background:#fff!important;border:1px solid #c9d9e2!important;box-shadow:0 5px 15px #0003!important;z-index:120!important;gap:0!important}
html body header.site-header .nav-cooking-submenu[hidden]{display:none!important}html body header.site-header .nav-cooking-submenu a{display:block!important;padding:10px!important;color:#244b63!important;font-size:13px!important;line-height:1.4!important;text-decoration:none!important;background:#fff!important}
html body header.site-header .header-bottom>.version{position:absolute!important;right:8px!important;bottom:2px!important;font-size:9px!important;color:#6e8797!important;line-height:1.2!important}
html body header.site-header .site-header-toggle{display:none!important}
html body header.site-header .header-contact-link{position:absolute!important;right:8px!important;top:4px!important;transform:none!important;width:auto!important;min-height:25px!important;font-size:11px!important;padding:3px 7px!important}
@media(max-width:760px){
 html body header.site-header .header-top{height:104px!important;min-height:0!important;padding:6px 10px!important}
 html body header.site-header .main-nav{width:100%!important;height:44px!important}html body header.site-header .main-nav>a,html body header.site-header .main-nav>.nav-cooking-group>a{font-size:10px!important;padding:3px 2px!important;letter-spacing:0!important}
 html body header.site-header .header-bottom{flex-wrap:wrap!important;min-height:0!important}html body header.site-header .header-bottom .main-nav{flex:0 0 100%!important;order:0!important}
 html body header.site-header .header-contact-link{display:none!important}html body header.site-header .header-bottom>.version{display:none!important}
 html body header.site-header .site-header-toggle{display:block!important;position:static!important;box-sizing:border-box!important;width:100%!important;min-height:38px!important;margin:0!important;padding:8px!important;border:0!important;border-bottom:1px solid #ccdee9!important;background:#eff7fc!important;color:#204d69!important;font:13px Arial,Meiryo,sans-serif!important;text-align:center!important;cursor:pointer!important}
 html body header.site-header.site-header-collapsed .header-bottom{display:none!important}
 html body header.site-header .nav-cooking-submenu{min-width:160px!important}html body header.site-header .nav-database-group .nav-cooking-submenu{left:auto!important;right:0!important}
}

@media(max-width:760px){html body header.site-header .header-top::before,html body header.site-header .header-top::after,html body header.site-banner-shell::before,html body header.site-banner-shell::after{display:none!important}}
@media(max-width:760px){
 html body header.site-header.site-navigation-shell.mobile-nav-stuck{padding-top:max(24px,env(safe-area-inset-top,0px))!important;top:0!important;transform:none!important;overflow:visible!important}
 html body header.site-header.site-navigation-shell .main-nav{height:48px!important;min-height:48px!important;align-items:stretch!important}
 html body header.site-header.site-navigation-shell .main-nav>a,html body header.site-header.site-navigation-shell .main-nav>.nav-cooking-group>a{height:48px!important;min-height:48px!important;line-height:1.3!important;overflow:visible!important}
}
@media(min-width:761px){
 html body header.site-header .header-top{background:#fff!important;background-image:none!important}
 html body header.site-header .header-banner-art{left:27%!important;right:0!important;top:0!important;bottom:0!important;height:118px!important;min-height:0!important;margin:0!important;overflow:visible!important;background:none!important;mask-image:none!important;-webkit-mask-image:none!important}
 html body header.site-header .header-banner-art>img{right:172px!important;left:auto!important;top:0!important;bottom:auto!important;width:auto!important;min-width:0!important;max-width:none!important;height:118px!important;object-fit:contain!important;object-position:center!important;clip-path:inset(0 0 0 4px)!important;mask-image:linear-gradient(to right,transparent,#000 12%,#000 92%,transparent)!important;-webkit-mask-image:linear-gradient(to right,transparent,#000 12%,#000 92%,transparent)!important}
}

@media(min-width:761px){
 html body header.site-header .header-top{height:118px!important;min-height:118px!important;padding:10px 28px!important}
 html body header.site-header .brand-logo{width:108px!important;height:78px!important;flex-basis:108px!important}
 html body header.site-header .brand-site-game{font-size:22px!important}
 html body header.site-header .brand-site-tools{font-size:14px!important}
 html body header.site-header .header-affinities{top:24px!important}
 html body header.site-header .account-header-actions{top:28px!important}
}

/* Desktop-only composition: keep the portrait left of account actions. */
@media(min-width:761px){
 html body header.site-header .header-banner-art>img{right:280px!important}
 html body header.site-header .account-header-actions{right:240px!important}
 html body header.site-header .header-affinities{right:20px!important;top:19px!important;gap:10px!important}
 html body header.site-header .header-affinities img{height:80px!important;max-width:96px!important}
}

@media(min-width:761px){
 html body header.site-header .header-banner-art>img{right:450px!important}
 html body header.site-header .account-header-actions{right:260px!important}
 html body header.site-header .header-affinities{right:16px!important;top:13px!important;gap:10px!important}
 html body header.site-header .header-affinities img{height:92px!important;max-width:110px!important}
}

html body header.site-header .account-header-actions [hidden]{display:none!important}

/* Fade the visible clipping edge as well as the image edge. */
@media(min-width:761px){html body header.site-header .header-banner-art{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 140px)!important;mask-image:linear-gradient(to right,transparent 0,#000 140px)!important}}

/* Match production header typography; retain test subtitle typography. */
@font-face{font-family:SiteMenuNoto;src:url("assets/fonts/noto-sans-jp-variable.woff2") format("woff2");font-style:normal;font-weight:100 900;font-display:swap}
html body header.site-header .main-nav,html body header.site-header .main-nav a,html body header.site-header .main-nav>.nav-cooking-group>a,html body header.site-header .nav-cooking-submenu a,html body header.site-header .site-header-toggle{font-family:SiteMenuNoto,"Noto Sans JP",sans-serif!important}

html body header.site-header .brand-site-game{font-family:SiteMenuNoto,"Noto Sans JP",sans-serif!important;font-weight:700!important;font-synthesis:weight!important}