/* 全站統一ヘッダー — 主页原版 .top/.nav の視覚規則を共有する。 */
#zzk-nav{height:60px;position:relative;z-index:20}
.top{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:16px clamp(20px,5vw,54px);background:transparent;border:0;box-shadow:none}
.top.zzk-shared-top{justify-content:space-between}
.top .geoc{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--faint)}
.portal-page-title{display:flex;align-items:baseline;gap:14px;min-width:0;max-width:min(46vw,620px)}
.portal-page-title h1{min-width:0;font-family:var(--mincho);font-size:clamp(17px,1.4vw,22px);line-height:1;letter-spacing:.14em;font-weight:600;color:var(--ink);white-space:nowrap}
.portal-page-title .zsubtag{min-width:0;overflow:hidden;text-overflow:ellipsis;font-family:var(--mono);font-size:9px;letter-spacing:.2em;color:var(--faint);text-transform:uppercase;white-space:nowrap}
.nav{display:flex;gap:clamp(10px,1.2vw,18px);align-items:center;font-family:var(--mincho);font-size:15px;letter-spacing:.14em;color:var(--dim)}
.nav a{color:inherit;text-decoration:none}
.nav a:hover,.nav a.here{color:var(--ink)}
.nav .nav-home-link,.nav .nav-map-link{display:inline-flex;align-items:center;min-height:32px}
.nav .nav-home-link{font-weight:600;letter-spacing:.1em;color:var(--ink)}
.nav .nav-map-link{color:var(--faint)}
.nav .grp{position:relative}
.nav .grp>a{cursor:pointer}
.nav .realm-short{display:none}
.nav .menu{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:12px;min-width:190px;background:var(--void2);border:1px solid var(--hair);padding:7px 0;opacity:0;visibility:hidden;transition:.22s;box-shadow:0 14px 44px rgba(0,0,0,.4)}
.nav .grp:hover .menu,.nav .grp:focus-within .menu,.nav .grp.is-open .menu{opacity:1;visibility:visible}
.nav .menu::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px}
.nav .menu a{display:block;padding:9px 20px;font-family:var(--mincho);font-size:14px;letter-spacing:.06em;color:var(--dim);white-space:nowrap}
.nav .menu a:hover{color:var(--acc,var(--red,#d81f26));background:var(--panel)}
.nav .menu .mh{padding:5px 20px 8px;font-family:var(--mono);font-size:9px;letter-spacing:.2em;color:var(--faint);text-transform:uppercase;border-bottom:1px solid var(--hair2);margin-bottom:4px}
.nav .tg,.nav .lang-switch,.nav .obs-almanac-trigger{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;min-width:32px;padding:0;font-family:var(--mono);font-size:12px;line-height:1;letter-spacing:0;border:1px solid var(--hair);color:var(--dim);cursor:pointer;background:color-mix(in srgb,var(--void) 18%,transparent)}
.nav .world-icon{font-family:ui-sans-serif,system-ui,sans-serif;font-size:15px;line-height:1}
.nav .lang-control{position:relative;display:inline-flex;order:6}
.translate-icon{position:relative;display:inline-block;width:19px;height:17px;font-family:ui-sans-serif,system-ui,sans-serif;line-height:1}
.translate-icon b{position:absolute;left:0;top:0;font-size:12px;font-weight:600}
.translate-icon i{position:absolute;right:0;bottom:0;font-size:9px;font-style:normal;font-weight:600}
.nav .lang-menu{position:absolute;top:calc(100% + 10px);right:0;z-index:2;display:grid;min-width:156px;padding:6px;background:var(--void2);border:1px solid var(--hair);box-shadow:0 14px 44px rgba(0,0,0,.4);opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .18s ease,transform .18s ease,visibility .18s}
.nav .lang-control.is-open .lang-menu{opacity:1;visibility:visible;transform:translateY(0)}
.nav .lang-menu button{position:relative;min-height:38px;padding:8px 28px 8px 12px;border:0;background:transparent;color:var(--dim);font-family:var(--mincho);font-size:13px;letter-spacing:.06em;text-align:left;cursor:pointer}
.nav .lang-menu button:hover,.nav .lang-menu button:focus-visible{color:var(--ink);background:var(--panel);outline:none}
.nav .lang-menu button.is-active::after{content:"·";position:absolute;right:12px;color:var(--acc,var(--red,#d81f26));font-size:18px;line-height:1}
.nav-mobile-toggle,.mobile-observer-panel{display:none}
.nav .tg:hover,.nav .lang-switch:hover,.nav .obs-almanac-trigger:hover,.nav .tg:focus-visible,.nav .lang-switch:focus-visible,.nav .obs-almanac-trigger:focus-visible{border-color:var(--acc,var(--red,#d81f26));color:var(--ink);outline:none}
.nav .tg:active,.nav .lang-switch:active,.nav .obs-almanac-trigger:active,.nav .nav-map-link:active{transform:scale(.98)}
.nav .pnight{display:inline}.nav .pday{display:none}
:root[data-day="1"] .nav .pnight{display:none}:root[data-day="1"] .nav .pday{display:inline}
.nav .nav-home-link{order:0}.nav .nav-map-link{order:1}.nav span.grp{order:2}.nav .tg{order:5}.nav .obs-almanac-trigger{order:7}
:root[data-day="0"] .nav span.grp:nth-of-type(1){order:4}
:root[data-day="0"] .nav span.grp:nth-of-type(2){order:3}
:root[data-day="0"] .nav span.grp:nth-of-type(3){order:2}
.top .geoc,.nav a,.nav .tg,.nav .lang-switch,.nav .obs-almanac-trigger{text-shadow:0 0 7px var(--void),0 1px 3px var(--void)}
@media(max-width:860px){
  .top{padding-inline:14px;gap:12px}
  .top .geoc{display:none}
  .portal-page-title{max-width:48vw}
  .portal-page-title .zsubtag{display:none}
  .portal-page-title h1{font-size:17px;letter-spacing:.1em;overflow:hidden;text-overflow:ellipsis}
  .nav{gap:6px;margin-left:auto}
  .nav .nav-home-link,.nav .nav-map-link{justify-content:center;min-width:34px;width:34px;min-height:32px;padding:0;border:1px solid var(--hair);font-family:var(--mincho);font-size:12px;letter-spacing:0;overflow:hidden}
  .nav .nav-home-link:hover,.nav .nav-map-link:hover,.nav .nav-home-link:focus-visible,.nav .nav-map-link:focus-visible{border-color:var(--acc,var(--red,#d81f26));color:var(--ink);outline:none}
  .nav .nav-home-link{font-size:0}
  .nav .nav-home-link::before{content:"清";font-size:16px}
  .nav .grp{display:inline-flex}
  .nav .grp>a{display:inline-flex;align-items:center;justify-content:center;min-width:34px;width:34px;min-height:32px;padding:0;border:1px solid var(--hair);font-size:12px;letter-spacing:0}
  .nav .grp>a:hover,.nav .grp>a:focus-visible,.nav .grp.is-open>a{border-color:var(--acc,var(--red,#d81f26));color:var(--ink);outline:none}
  .nav .realm-long{display:none}
  .nav .realm-short{display:inline}
  .nav .menu{position:fixed;top:58px;left:12px;right:12px;transform:none;margin-top:0;min-width:0;max-height:calc(100vh - 72px);overflow:auto}
  .nav .tg,.nav .lang-switch,.nav .obs-almanac-trigger{min-width:34px;width:34px;height:32px;padding-inline:0;font-size:12px!important;color:var(--dim)}
  .nav .lang-menu{position:fixed;top:58px;right:12px;min-width:180px}
}

@media(max-width:540px){
  #zzk-nav{height:60px}
  .top{display:flex;align-items:center;gap:10px;padding:12px}
  .portal-page-title{max-width:calc(100vw - 76px)}
  .portal-page-title h1{font-size:16px}
  .nav{width:auto;margin-left:auto}
  .nav>:not(.nav-mobile-toggle):not(.mobile-observer-panel){display:none!important}
  .nav-mobile-toggle{position:relative;z-index:2;display:inline-grid;place-items:center;width:36px;height:34px;padding:0;border:1px solid var(--hair);background:color-mix(in srgb,var(--void) 72%,transparent);color:var(--ink);cursor:pointer}
  .nav-mobile-toggle:hover,.nav-mobile-toggle:focus-visible,.nav-mobile-toggle[aria-expanded="true"]{border-color:var(--acc,var(--red,#d81f26));outline:none}
  .nav-mobile-toggle-icon{position:relative;width:15px;height:12px}
  .nav-mobile-toggle-icon::before,.nav-mobile-toggle-icon::after,.nav-mobile-toggle-icon i{content:"";position:absolute;left:0;width:15px;height:1px;background:currentColor;transition:transform .2s ease,top .2s ease,opacity .2s ease}
  .nav-mobile-toggle-icon::before{top:0}
  .nav-mobile-toggle-icon i{top:5px}
  .nav-mobile-toggle-icon::after{top:10px}
  .nav-mobile-toggle[aria-expanded="true"] .nav-mobile-toggle-icon::before{top:5px;transform:rotate(45deg)}
  .nav-mobile-toggle[aria-expanded="true"] .nav-mobile-toggle-icon i{opacity:0}
  .nav-mobile-toggle[aria-expanded="true"] .nav-mobile-toggle-icon::after{top:5px;transform:rotate(-45deg)}
  .nav.mobile-open>.mobile-observer-panel{display:block}
  .mobile-observer-panel{position:fixed;z-index:24;top:58px;left:8px;right:8px;max-height:calc(100dvh - 68px);overflow:auto;padding:14px;background:color-mix(in srgb,var(--void2) 97%,transparent);border:1px solid var(--hair);box-shadow:0 24px 64px rgba(0,0,0,.42);backdrop-filter:blur(20px) saturate(.82);text-shadow:none}
  .mobile-observer-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:0 2px 11px;border-bottom:1px solid var(--hair2)}
  .mobile-observer-head b{font-family:var(--mincho);font-size:15px;font-weight:500;letter-spacing:.18em;color:var(--ink)}
  .mobile-observer-head span{font-family:var(--mono);font-size:8px;letter-spacing:.18em;color:var(--faint);text-transform:uppercase}
  .mobile-root-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;padding:12px 0;border-bottom:1px solid var(--hair2)}
  .mobile-root-grid a{display:grid;grid-template-columns:28px 1fr;align-items:center;gap:10px;min-height:44px;padding:7px 10px;border:1px solid var(--hair);color:var(--dim)}
  .mobile-root-grid a:hover,.mobile-root-grid a:focus-visible{border-color:var(--acc,var(--red,#d81f26));color:var(--ink);outline:none;background:var(--panel)}
  .mobile-root-grid b{font-family:var(--mincho);font-size:17px;font-weight:500;color:var(--acc,var(--red,#d81f26));text-align:center}
  .mobile-root-grid span{font-family:var(--mincho);font-size:12px;line-height:1.35;letter-spacing:.04em}
  .mobile-system-grid,.mobile-realm-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
  .mobile-system-grid{padding:12px 0;border-bottom:1px solid var(--hair2)}
  .mobile-system-grid .translate-icon{vertical-align:middle}
  .mobile-language-menu{display:none;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;padding:0 0 12px;border-bottom:1px solid var(--hair2)}
  .mobile-language-menu.is-open{display:grid}
  .mobile-language-menu button{font-size:11px;letter-spacing:.02em}
  .mobile-realm-grid{padding-top:12px}
  .mobile-observer-panel button{min-width:0;min-height:42px;border:1px solid var(--hair);background:transparent;color:var(--dim);font-family:var(--mincho);font-size:14px;letter-spacing:.08em;cursor:pointer}
  .mobile-observer-panel button:hover,.mobile-observer-panel button:focus-visible,.mobile-observer-panel button[aria-pressed="true"]{border-color:var(--acc,var(--red,#d81f26));color:var(--ink);outline:none;background:var(--panel)}
  .mobile-observer-panel button small{display:block;margin-top:3px;font-family:var(--mono);font-size:7px;letter-spacing:.12em;color:var(--faint);text-transform:uppercase}
  .mobile-realm-links{display:none;grid-template-columns:1fr;margin-top:9px;border-top:1px solid var(--hair2)}
  .mobile-realm-links.is-open{display:grid}
  .mobile-realm-links a{display:flex;align-items:center;justify-content:space-between;min-height:42px;padding:9px 4px;border-bottom:1px solid var(--hair2);font-family:var(--mincho);font-size:13px;letter-spacing:.06em;color:var(--dim)}
  .mobile-realm-links a::after{content:"\2192";font-family:var(--mono);font-size:11px;color:var(--faint)}
  .mobile-realm-links a:hover,.mobile-realm-links a:focus-visible{color:var(--ink);outline:none}
}

/* 子页固有标题列。#zzk-nav の60px占位の直後に置き、固定导航と重ねない。 */
.zsub{position:relative;z-index:5;display:none;align-items:baseline;gap:14px;padding:18px clamp(20px,5vw,54px) 4px}
.zsub h1{font-family:var(--mincho);font-size:21px;letter-spacing:.16em;font-weight:600;color:var(--ink)}
.zsub .zsubtag{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;color:var(--faint);text-transform:uppercase}

@media(prefers-reduced-transparency:reduce){
  .top,.mobile-observer-panel{backdrop-filter:none!important;background:var(--reading-strong)!important}
}
@media(prefers-contrast:more){
  .nav .tg,.nav .lang-switch,.nav .obs-almanac-trigger,.nav .nav-home-link,.nav .nav-map-link,.nav .grp>a{border-color:var(--ink)}
}