/* ===== OWLS-style global header & footer ===== */
:root{
  --owls-bg:#202040;
  --owls-text:#fff;
  --owls-hover:rgba(255,255,255,.12);
  --owls-accent:#7dd3fc; /* aria-current の下線色 */
}

/* Header */
#site-header{
  background:var(--owls-bg);
  color:var(--owls-text);
}
#site-header .bar{max-width:1100px;margin:0 auto;padding:10px 12px;
  display:flex;align-items:center;gap:16px}
#site-header .brand img{height:42px;width:auto;display:block}
#site-header nav{flex:1}
#site-header ul.links{
  display:flex;gap:24px;justify-content:center;margin:0;padding:0;list-style:none;
  flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
}
#site-header ul.links::-webkit-scrollbar{display:none}
#site-header ul.links a{
  display:block;color:var(--owls-text);text-decoration:none;white-space:nowrap;
  padding:10px 8px;border-radius:10px;line-height:1.1;text-align:center
}
#site-header ul.links a:hover{background:var(--owls-hover)}
#site-header .jp{display:block;font-weight:700}
#site-header .en{display:block;font-size:12px;opacity:.85}

/* current page */
#site-header a[aria-current="page"]{
  position:relative
}
#site-header a[aria-current="page"]::after{
  content:"";position:absolute;left:14%;right:14%;bottom:6px;height:2px;
  background:var(--owls-accent);border-radius:2px
}

/* Footer */
#site-footer{
  background:#0f122a;color:#e5e7eb
}
#site-footer .foot{
  max-width:1100px;margin:0 auto;padding:18px 12px
}
#site-footer .links{
  display:flex;gap:18px;justify-content:center;margin:0 0 10px;padding:0;list-style:none;
  flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none
}
#site-footer .links::-webkit-scrollbar{display:none}
#site-footer .links a{
  color:#e5e7eb;text-decoration:none;white-space:nowrap;padding:8px 6px;border-radius:8px
}
#site-footer .links a:hover{background:rgba(255,255,255,.08)}
#site-footer .meta{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;font-size:14px}
#site-footer .logo a{color:#e5e7eb;text-decoration:none;font-weight:700}

/* small screens */
@media (max-width:430px){
  #site-header ul.links{gap:14px}
  #site-header ul.links a{padding:10px 6px}
  #site-footer .links{gap:12px}
}