.calendar-head {
  position: relative;
}

.calendar-owner {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max-content;
  max-width: 34%;
  margin: 0;
  color: var(--ink);
  font: 600 clamp(13px, 2.3vw, 20px)/1.35 "Yu Gothic", Meiryo, sans-serif;
  letter-spacing: .04em;
  text-align: center;
  transform: translate(-50%, -50%);
}

main > footer {
  justify-content: flex-end;
}

@media (max-width: 640px) {
  .calendar-owner {
    max-width: 30%;
    font-size: clamp(10px, 3.1vw, 13px);
    letter-spacing: 0;
  }

  .event-symbol.period-circle {
    width: calc(100% - 2px);
    max-width: calc(100% - 2px);
    margin-inline: auto;
  }

  .event-symbol.period-circle b {
    width: 100%;
    padding: 1px 2px;
    line-height: 1.2;
  }

  .event-symbol.period-circle b span {
    flex: 0 1 auto;
    min-width: 0;
  }

  .event-symbol.period-circle b i {
    flex: 0 0 auto;
    margin-left: 0;
    padding-right: 1px;
  }
}