/* 地の上に置く、淡い鍵盤の帯（1オクターブの絵を横にくり返す） */
.band {
  height: calc(var(--u) * 72);
  margin: calc(var(--u) * 120) 0 calc(var(--u) * -40);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='168' height='72' viewBox='0 0 168 72'%3E%3Cg fill='%23f5e2d4'%3E%3Crect x='0' width='1.5' height='72'/%3E%3Crect x='24' width='1.5' height='72'/%3E%3Crect x='48' width='1.5' height='72'/%3E%3Crect x='72' width='1.5' height='72'/%3E%3Crect x='96' width='1.5' height='72'/%3E%3Crect x='120' width='1.5' height='72'/%3E%3Crect x='144' width='1.5' height='72'/%3E%3Crect x='17' width='15' height='42' rx='2'/%3E%3Crect x='41' width='15' height='42' rx='2'/%3E%3Crect x='89' width='15' height='42' rx='2'/%3E%3Crect x='113' width='15' height='42' rx='2'/%3E%3Crect x='137' width='15' height='42' rx='2'/%3E%3C/g%3E%3C/svg%3E") repeat-x left top / auto 100%;
  border-top: 1.5px solid #f5e2d4;
  border-bottom: 1.5px solid #f5e2d4;
  pointer-events: none;
}
.band--foot { margin: 0; }

@media (max-width: 1023px) {
  .band { height: 40px; margin: 56px 0 -20px; }
  .band--foot { margin: 0; }
}