body {
  background-color: #4c6cb3;  /* 落ち着いたブルー */
}

h1 {
  text-align: center;
  color: #ffffff;  /* 明るめ白でコントラスト強調 */
}

h2 {
  color: #e0e8ff;  /* 柔らかい青白 */
}

h3 {
  color: #000000;  /* 黒 */
}

h4 {
  text-align: center;
  background-color: #5a3d85;  /* 濃いめの紫で背景と調和 */
  color: #ffffff;
  width: 10em;
}

p {
  color: #f0f0f0;  /* ややグレーがかった白で読みやすく */
}

li {
  color: #e6f0ff;  /* 淡い青白、暗い背景に優しい */
}

ul {
  color: #e6f0ff;
}

td {
  color: #000000;  /* テーブル背景がbeigeなら黒文字でOK */
}

a {
  color: #ffd6f7;  /* 優しいピンク、背景と差が出る */
}

.juyo {
  color: #ffb84c;  /* 薄めのオレンジで強調（元の#ff8c00を少し明るめに） */
}

table {
  text-align: center;
  margin-right: auto;
  margin-left: auto;
  border-style: outset;
  background-color: #f5f5dc;  /* beigeでもOKですが、#f8f8e7などにしても合います */
}

input[type="radio"] {
  transform: scale(1.6);
  margin-right: 0.5em;
}

input[type="submit"],
input[type="reset"] {
  background-color: #ffcc00;      /* 明るい黄色でコントラスト抜群 */
  color: #000000;                 /* 黒文字で読みやすく */
  font-size: 1.1em;               /* 少し大きめ文字で視認性アップ */
  padding: 0.6em 1.2em;           /* 押しやすい余白 */
  border: none;                   /* 枠線なしでスッキリ */
  border-radius: 10px;            /* 丸みでやさしい印象 */
  cursor: pointer;                /* マウスカーソルが変化 */
  margin: 0.5em 0.25em;           /* 上下左右の余白調整 */
  box-shadow: 2px 2px 6px rgba(0,0,0,0.3); /* 立体感のある影 */
  transition: background-color 0.3s ease, transform 0.2s ease;
}

input[type="submit"]:hover,
input[type="reset"]:hover {
  background-color: #ffaa00;      /* ホバー時に濃くなる */
  transform: scale(1.05);         /* 少し大きくなるアニメーション */
}

input[type="submit"]:focus,
input[type="reset"]:focus {
  outline: 3px solid #ffffff;     /* キーボード操作時の強調 */
  outline-offset: 2px;
}
body {
  background-color: #4c6cb3;  /* 落ち着いたブルー */
}

h1 {
  text-align: center;
  color: #ffffff;  /* 明るめ白でコントラスト強調 */
}

h2 {
  color: #e0e8ff;  /* 柔らかい青白 */
}

h3 {
  color: #000000;  /* 黒 */
}

h4 {
  text-align: center;
  background-color: #5a3d85;  /* 濃いめの紫で背景と調和 */
  color: #ffffff;
  width: 10em;
}

p {
  color: #f0f0f0;  /* ややグレーがかった白で読みやすく */
}

li {
  color: #e6f0ff;  /* 淡い青白、暗い背景に優しい */
}

ul {
  color: #e6f0ff;
}

td {
  color: #000000;  /* テーブル背景がbeigeなら黒文字でOK */
}

a {
  color: #ffd6f7;  /* 優しいピンク、背景と差が出る */
}

.juyo {
  color: #ffb84c;  /* 薄めのオレンジで強調（元の#ff8c00を少し明るめに） */
}

table {
  text-align: center;
  margin-right: auto;
  margin-left: auto;
  border-style: outset;
  background-color: #f5f5dc;  /* beigeでもOKですが、#f8f8e7などにしても合います */
}

input[type="radio"] {
  transform: scale(1.6);
  margin-right: 0.5em;
}

input[type="submit"],
input[type="reset"] {
  background-color: #ffcc00;      /* 明るい黄色でコントラスト抜群 */
  color: #000000;                 /* 黒文字で読みやすく */
  font-size: 1.1em;               /* 少し大きめ文字で視認性アップ */
  padding: 0.6em 1.2em;           /* 押しやすい余白 */
  border: none;                   /* 枠線なしでスッキリ */
  border-radius: 10px;            /* 丸みでやさしい印象 */
  cursor: pointer;                /* マウスカーソルが変化 */
  margin: 0.5em 0.25em;           /* 上下左右の余白調整 */
  box-shadow: 2px 2px 6px rgba(0,0,0,0.3); /* 立体感のある影 */
  transition: background-color 0.3s ease, transform 0.2s ease;
}

input[type="submit"]:hover,
input[type="reset"]:hover {
  background-color: #ffaa00;      /* ホバー時に濃くなる */
  transform: scale(1.05);         /* 少し大きくなるアニメーション */
}

input[type="submit"]:focus,
input[type="reset"]:focus {
  outline: 3px solid #ffffff;     /* キーボード操作時の強調 */
  outline-offset: 2px;
}