/* header.css — どのページも上に置く ヘッダーの帯（DEC-WEB-002「ページの上部にはヘッダーを帯で用意…風景に紛れたりしないようにする」）。
   白い帯・下に線と影 — 絵や手帳の上に重ねず、帯の下から中身が始まる。色は t2（草の緑） */
:root { --b-ink: #1D2A22; --b-sub: #45564B; --b-grass: #2F7D4A; --b-grass-d: #1F5F36; --b-line: #CFE0D3; }
body { margin: 0; }
.band { position: sticky; top: 0; z-index: 40; background: #FFFFFF; border-bottom: 1px solid var(--b-line); box-shadow: 0 2px 10px rgba(30, 60, 40, .08); }
.band-in { max-width: 1160px; margin: 0 auto; padding: 6px 16px; display: flex; align-items: center; justify-content: space-between; gap: 8px 20px; }
.band-logo img { display: block; height: 42px; width: auto; }
.band nav { display: flex; flex-wrap: wrap; gap: 0 4px; font: 700 16px/1 'Zen Kaku Gothic New', system-ui, sans-serif; }
.band nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; color: var(--b-ink); text-decoration: none; border-bottom: 3px solid transparent; }
.band nav a:hover { color: var(--b-grass-d); }
.band nav a[aria-current] { color: var(--b-grass-d); border-bottom-color: var(--b-grass); }
.foot { max-width: 1160px; margin: 0 auto; padding: 22px 16px 34px; border-top: 1px solid var(--b-line); color: var(--b-sub); font: 15px/1.6 'Zen Kaku Gothic New', system-ui, sans-serif; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 0 18px; }
.foot a { color: var(--b-ink); min-height: 44px; display: inline-flex; align-items: center; }
@media (max-width: 760px) {
  .band { position: static; }
  .band-in { flex-wrap: nowrap; }
  .band-logo img { height: 34px; }
  .band nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .band nav a { white-space: nowrap; padding: 0 9px; }
}