/* ----- 大画面(幅600px超)では従来どおりのテーブル表示 ----- */
.calendar.table {
  width: 100%;
  border-collapse: collapse;
}

.calendar.table th,
.calendar.table td {
  border: 1px solid #007bff;
  padding: 0.5em;
  text-align: center;
}
.scu{display:block;}

/* ----- 小画面(幅600px以下)のときだけテーブルを縦並びに変える ----- */
@media screen and (max-width: 600px) {

  /* テーブル要素を block 化して、行やセルを縦に積む */
  .calendar.table,
  .calendar.table tbody,
  .calendar.table tr {
    display: block;
    width: 100%;
  }

  /* 各セルも100%幅で縦並びに */
  .calendar.table td {
    display: block;
    width: 100%;
    margin-bottom: 1rem; /* 日付ブロックの余白 */
    text-align: left;    /* 必要なら左寄せ */
  }
.scu{display:inline;}
}