/* 全体のスタイル */
body {
  margin: 0;
  padding: 0; /* 余白をなくす */
  font-size: 16px; /* 基本のフォントサイズ */
  box-sizing: border-box; /* ボックスモデルの調整 */
}

/* コンテナクラス */
.container {
  width: 100%;  /* 幅を100%に設定して、画面いっぱいに広がる */
  max-width: 600px;  /* 600pxを最大幅として設定 */
  margin: 0 auto;
  padding: 20px;
  border: 2px solid #000; /* 枠線を追加 */
}

/* テーブルのスタイル */
table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

table th,
table td {
  padding: 10px;
  text-align: center;
  font-size: 14px; /* テーブル内のフォントサイズ */
  border: 1px solid #000;
}

/* フォームの入力スタイル */
input[type="number"], input[type="submit"], input[type="button"] {
  width: 100%;
  padding: 10px;
  margin: 8px 0;
  font-size: 16px; /* 入力フィールドのフォントサイズ */
  box-sizing: border-box;
}

/* レスポンブデザイン - スマホ用 */
@media screen and (max-width: 600px) {
  body {
    font-size: 40px; /* スマホでは少し大きめのフォントサイズ */
  }

  .container {
    max-width: 1000px;  /* スマホのときは画面いっぱい */
    padding: 10px;    /* スマホでは余白を少し小さく */
    margin: 0; /* 中央寄せを解除 */
  }

  table th,
  table td {
    font-size: 40px; /* スマホではテーブルのフォントサイズを大きく */
    padding: 8px; /* パディングも少し減らす */
  }

  input[type="number"], input[type="submit"], input[type="button"] {
    font-size: 40px; /* スマホでは入力フィールドのフォントサイズも大きく */
    padding: 15px; /* 入力フィールドのパディングを増やしてタップしやすく */
  }
}