/* --- 既存のスタイルはそのまま --- */
table.yoyaku, td, th {
  border: 2px solid #595959;
  border-collapse: collapse;
}
table.yoyaku {
  width: 100%;
  margin-bottom: 20px;
}
table.yoyaku td, th {
  padding: 3px;
  width: 30px;
  height: 25px;
  text-align: center;
  font-weight: bold;
}
/* ...その他のスタイル... */

/* --- タブレット以下用設定 (1024px以下) --- */
@media only screen and (max-width: 1024px) {
  /* 1. 親要素を横スクロール可能にする */
  .example {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* iOSでのスクロールを滑らかにする */
    margin-bottom: 20px;
  }

  /* 2. テーブルが潰れないよう最小幅を指定する */
  table.yoyaku {
    width: auto;        /* 100%を解除 */
    min-width: 800px;   /* 画面幅より大きい値を指定して強制的にスクロールさせる */
    margin-bottom: 0;   /* 親要素にマージンを譲る */
  }

  table.yoyaku td, th {
    font-size: 12px;    /* 10pxだと小さすぎる場合があるため調整 */
    white-space: nowrap; /* セル内での変な改行を防ぐ */
    padding: 8px 4px;   /* タップしやすいよう少し余白を広げるのがおすすめ */
  }
}

@media (max-width: 599px){
  table.yoyaku {
    min-width: 650px;
  }
}