.site-header{display:block;height:auto;min-height:0;padding:0 24px}.header-top{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:118px;padding:10px 0}.header-top .brand{width:auto;min-width:0;flex-shrink:1}.header-top .brand-logo{width:200px;flex-shrink:0}.header-affinities{display:flex;align-items:center;gap:18px;flex-shrink:0}.header-affinities img{display:block;width:auto;height:96px;object-fit:contain}.header-bottom{display:flex;align-items:stretch;border-top:1px solid #d0dfe7}.header-bottom .main-nav{display:flex;flex-wrap:nowrap;width:auto;flex-basis:auto;height:62px;margin:0;justify-content:flex-start}.header-bottom .main-nav>a,.header-bottom .main-nav>.nav-cooking-group{position:relative;flex:0 0 auto}.header-bottom .main-nav>a:not(:first-child)::before,.header-bottom .main-nav>.nav-cooking-group::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:1px;background:#c4d6e0;z-index:1;pointer-events:none}.header-bottom .version{display:flex;align-items:center;margin-left:auto}@media(max-width:760px){.site-header{padding:0 10px}.header-top{gap:8px;min-height:90px;padding:8px 0}.header-top .brand{gap:8px}.header-top .brand-logo{width:96px}.header-top .brand-site-game{font-size:12px}.header-top .brand-site-tools{font-size:10px}.header-affinities{gap:4px}.header-affinities img{height:48px}.header-bottom .main-nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));width:100%;height:54px}.header-bottom .main-nav a{min-width:0;padding:5px 2px;font-size:clamp(9px,2.6vw,12px)}.header-bottom .main-nav>.nav-cooking-group{min-width:0}.header-bottom .version{display:none}}@media(max-width:420px){.header-top .brand-logo{width:78px}.header-top .brand{gap:6px}.header-top .brand-site-game{font-size:11px}.header-top .brand-site-tools{font-size:9px}.header-affinities img{height:42px}}@media(min-width:761px){.header-top{justify-content:flex-start}.header-affinities{margin-left:clamp(24px,calc(50vw - 500px),280px);margin-right:auto}.header-bottom{position:relative;justify-content:center}.header-bottom .version{position:absolute;right:0;top:0;bottom:0;margin:0}}/* Keep the shared header and affinity charts visible on every route. */.site-header{position:fixed;inset:0 0 auto;z-index:100;background:#fff}body{padding-top:var(--site-header-height,182px)}html{scroll-padding-top:calc(var(--site-header-height,182px) + 12px)}@media(max-width:760px){.header-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}.header-top .brand{min-width:0}.header-top .brand-logo{width:72px}.header-top .brand-site-title{min-width:0}.header-top .brand-site-game{overflow-wrap:anywhere}.header-affinities{margin:0;gap:5px}.header-affinities img{height:72px}}@media(max-width:360px){.header-top .brand-logo{width:56px}.header-affinities img{height:72px}}@media(min-width:761px){.header-affinities{margin-left:auto;margin-right:0}}.site-header-toggle{display:none}@media(max-width:1024px) and (pointer:coarse){.site-header-toggle{display:block;width:100%;min-height:38px;border:0;border-top:1px solid #ccdce7;background:#eff6fc;color:#143b56;font:inherit;font-size:13px;cursor:pointer}.site-header-collapsed>:not(.site-header-toggle){display:none!important}}.main-nav{font-family:"Home Noto Sans JP",sans-serif}.nav-database-group>#nav-database-trigger{height:100%;cursor:pointer}.main-nav #nav-database-submenu{min-width:220px}.main-nav #nav-database-submenu a{white-space:nowrap;font-size:14px;padding:12px 14px}.header-top .brand-logo{width:144px;height:96px;max-height:none;object-fit:contain}@media(max-width:760px){.header-top .brand-logo{width:96px;height:64px}}@media(max-width:420px){.header-top .brand-logo{width:84px;height:56px}}@media(max-width:360px){.header-top .brand-logo{width:72px;height:48px}}/* Supplied banner, with a white cover over its stray left-edge pixels. */.header-top{position:relative;min-height:150px;background-color:#fff;background-image:linear-gradient(to right,#fff 0 450px,#ffffff00 470px),url('assets/img/header-banner-lossless.webp');background-position:left top,right center;background-size:100% 100%,auto 100%;background-repeat:no-repeat;margin:0 -24px;padding:12px 24px;gap:24px}.header-top .brand{position:relative;z-index:1;flex-shrink:0}.header-top .brand-site-title{padding:8px 12px 8px 0;background:linear-gradient(to right,#fffffff5 85%,#ffffff00)}.header-top .header-affinities{position:relative;z-index:1;margin:0 auto 0 0;padding:6px;background:#ffffffc9;border-radius:12px;gap:8px}.header-top .header-affinities img{height:64px}@media(max-width:1100px) and (min-width:761px){.header-top .brand-site-game{font-size:16px}.header-top .brand-site-tools{font-size:14px}.header-top .brand-logo{width:120px;height:80px}.header-top .header-affinities img{height:48px}}@media(max-width:760px){.header-top{display:flex;align-items:flex-start;min-height:150px;margin:0 -10px;padding:12px 10px;background-image:linear-gradient(to right,#fff 0 5px,#fffffff5 5px,#fffffff0 35%,#ffffff00 75%),url('assets/img/header-banner-lossless.webp');background-size:100% 100%,auto 100%;background-position:left top,right center}.header-top .brand{width:auto;gap:8px}.header-top .brand-site-title{padding:6px 0;background:none}.header-top .brand-site-game{font-size:13px}.header-top .brand-site-tools{font-size:12px}.header-top .header-affinities{position:absolute;left:104px;bottom:12px;padding:3px;gap:8px}.header-top .header-affinities img{height:42px}}@media(max-width:360px){.header-top .brand-site-game{font-size:12px}.header-top .brand-site-tools{font-size:11px}.header-top .header-affinities{left:90px}}/* Logo, site name, banner artwork, then affinity charts. */.header-top{display:flex;align-items:center;gap:12px;background:#fff;padding:12px 24px;min-height:150px}.header-top .brand-site-title{background:none;padding-right:0}.header-banner-art{align-self:stretch;flex:1;min-width:0;background:linear-gradient(to right,#fff 0 5px,#ffffff00 30px),url('assets/img/header-banner-lossless.webp') right center/auto 100% no-repeat}.header-top .header-affinities{flex:none;margin:0;padding:6px;background:#fff}.header-top .header-affinities img{height:64px}@media(max-width:1100px) and (min-width:761px){.header-top{gap:8px}.header-top .header-affinities img{height:48px}}@media(max-width:760px){.header-top{display:flex;gap:5px;padding:8px 10px;min-height:100px}.header-top .brand{gap:5px;flex-shrink:0}.header-top .brand-logo{width:60px;height:40px}.header-top .brand-site-title{width:90px;padding:0}.header-top .brand-site-game{font-size:11px}.header-top .brand-site-tools{font-size:10px}.header-top .header-affinities{position:static;gap:2px;padding:0}.header-top .header-affinities img{height:34px}.header-banner-art{min-height:84px;background-position:left top,right center}}@media(max-width:360px){.header-top .brand-logo{width:48px;height:32px}.header-top .brand-site-title{width:82px}.header-top .brand-site-game{font-size:10px}.header-top .brand-site-tools{font-size:9px}.header-top .header-affinities img{height:28px}}/* Fill the header height and clip the supplied image's stray first pixels. */.header-banner-art{position:relative;overflow:hidden;background:#fff;margin-top:-12px;margin-bottom:-12px;min-height:0}.header-banner-art>img{position:absolute;right:0;top:0;display:block;height:100%;width:auto;max-width:none;clip-path:inset(0 0 0 4px)}@media(max-width:760px){.header-banner-art{margin-top:-8px;margin-bottom:-8px;min-height:0}}.header-banner-art>img{right:24px}.header-top .header-affinities img{height:96px}@media(max-width:1100px) and (min-width:761px){.header-top .header-affinities img{height:72px}}@media(max-width:760px){.header-banner-art>img{right:8px}.header-top .header-affinities img{height:48px}}@media(max-width:360px){.header-top .header-affinities img{height:42px}}/* Reserve room before the affinity charts for the future login button. */.header-banner-art>img{right:112px}@media(max-width:760px){.header-banner-art>img{right:52px}}@media(min-width:761px){.header-banner-art{overflow:visible;z-index:0}.header-banner-art>img{mask-image:linear-gradient(to right,transparent,#000 12%,#000 92%,transparent)}.header-top .brand-site-title{background:linear-gradient(to right,#ffffffed,#ffffffb0 75%,transparent);padding:8px 8px 8px 0}}@media(min-width:761px){.header-top .brand-site-title{background:none}}.header-banner-art>img{right:172px}@media(max-width:760px){.header-banner-art>img{right:82px}}/* nav-tight-lines-20261015 */.site-header .header-bottom .main-nav>a,.site-header .header-bottom .main-nav>.nav-cooking-group>a,.site-header .header-bottom .main-nav>.nav-database-group>a{row-gap:0!important;line-height:1.15!important;justify-content:center}.site-header .header-bottom .main-nav>a>span,.site-header .header-bottom .main-nav>.nav-cooking-group>a>span,.site-header .header-bottom .main-nav>.nav-database-group>a>span{line-height:inherit!important}
