.container {
    margin-top: 20px; /* 上部のスペース */
    width: 800px; /* コンテナの幅を指定 */
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4列のグリッド */
    gap: 16px; /* グリッドアイテム間のスペース */
    justify-items: center; /* アイテムを中央に配置 */
}


.custom-button {
  /* font-size: 1rem; 16px) */ 
  font-size: 1rem;

  /* font-bold */
  font-weight: 700;

  padding: 1rem 1rem;

  /* rounded-lg (0.5rem = 8px) */
  border-radius: 0.5rem;

  /* text-center */
  text-align: center;

  /* whitespace-pre-line */
  /*white-space: pre-line;*/

  /* transition-all duration-150 */
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;

  /* border border-white */
  border-width: 1px;
  border-style: solid;
  border-color: #ffffff;

  /*box-sizing: border-box; *//* これを追加 */
  /*display: inline-block;*/  /* または flex / block */
  vertical-align: middle; /* 位置のズレを防ぐ */
  line-height: 1.5; /* これを追加 */
}

.enabled-button {
  /* bg-blue-500 */
  background-color: #3b82f6;

  /* text-white */
  color: #ffffff;
}

.disabled-button {
  /* bg-gray-300 */
  background-color: green;

  /* text-white */
  color: #ffffff;

  /* cursor-not-allowed */
  cursor: not-allowed;
}