/* =========================================
   基本のページ設定
   ========================================= */
body {
  margin: 0;
  padding: 20px 0;
	background-color: #f5f5f5; /* 背景を少しグレーにしてテーブルを目立たせる */
	 background-color: white;
}

/* =========================================
   テーブル全体のスタイル
   ========================================= */
.align-demo {
  width: 1000px;
  height: 500px;
  border-collapse: collapse; /* 境界線を重ねてスッキリさせる */
  border: 3px solid #000;    /* 外枠を少し太く */
  margin: 0 auto;
  background-color: white;
}

/* =========================================
   各セルのスタイル
   ========================================= */
.align-demo td {
  border: 1px solid #ccc;    /* セルの境界線は少し薄く */
  /* --- 余白の設定 --- */
  padding: 30px;             /* セルの内側に広めの余白を確保 */
  /* ------------------ */
  width: 333px;
  height: 166px;
  box-sizing: border-box;    /* paddingを含めたサイズ計算にする */
}

/* =========================================
   セル内の「枠（中身）」のスタイル 
   ========================================= */
.content-box {
  display: inline-block;    /* 横並び・配置計算を有効にする */
  border: 2px solid blue;   /* 配置を確認するための青い枠 */
  padding: 10px 20px;       /* 文字の周りの余白 */
  background-color: #e7f3ff;
  font-weight: bold;
  box-sizing: border-box;
}

/* =========================================
   配置用のクラス設定
   ========================================= */

/* 上段 (Top) */
.left-top      { text-align: left;   vertical-align: top; }
.center-top    { text-align: center; vertical-align: top; }
.right-top     { text-align: right;  vertical-align: top; }

/* 中段 (Middle) */
.left-middle   { text-align: left;   vertical-align: middle; }
.center-middle { text-align: center; vertical-align: middle; }
.right-middle  { text-align: right;  vertical-align: middle; }

/* 下段 (Bottom) */
.left-bottom   { text-align: left;   vertical-align: bottom; }
.center-bottom { text-align: center; vertical-align: bottom; }
.right-bottom  { text-align: right;  vertical-align: bottom; }