body {
  font-family: 'Roboto', sans-serif;
  background: #ffffff; /* pure white background for a clean look */
  line-height: 1.6;
}

h1 {
  font-family: 'Merriweather', serif; /* elegant serif font for headings */
  color: #6c567b; /* soft lavender for a touch of elegance */
}

img {
  max-width: 100%;
  border-radius: 8px; /* rounded corners for images */
}

ol, ul {
  list-style-type: none;
  padding-left: 1rem;
}

li {
  display: flex; /* Use flexbox to keep items in line */
  align-items: center; /* Align items vertically */
  margin-bottom: 0.5rem;
}

input[type='checkbox'] {
  -webkit-appearance: none;
  appearance: none;
  margin-right: 0.5rem;
  width: 18px;
  height: 18px;
  border: 2px solid #ccc;
  border-radius: 4px; /* Add rounded corners to the checkbox */
  vertical-align: middle;
  cursor: pointer;
  position: relative;
}

input[type='checkbox']:checked {
  background-color: #6c567b; /* Change the check color to a soft purple */
  border-color: #6c567b;
}

input[type='checkbox']:checked:after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  left: 1px;
  top: 1px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M20.292 5.292a1 1 0 0 1 1.416 1.416l-13 13a1 1 0 0 1-1.414 0l-5-5a1 1 0 1 1 1.414-1.414L8 17.586l12-12z"/></svg>');
  background-size: 14px 14px;
  background-repeat: no-repeat;
  background-position: center;
}

/* Add styles for a label that acts as a clickable area for the checkbox */
label {
  margin-left: 0.5rem;
  display: block;
  padding: 0.5rem;
  border: 2px solid transparent;
  border-radius: 4px;
  margin-bottom: 0.5rem;
  cursor: pointer;
}

/* Change the border color when the checkbox is checked */
input[type='checkbox']:checked + label {
  border-color: #6c567b; /* Soft purple border for the label */
  background-color: #f3e8ff; /* A lighter purple background for the label */
}

button {
  font-family: 'Roboto', sans-serif;
  padding: 0.5rem 1rem;
  background-color: #6c567b; /* consistent with headings */
  color: #fff;
  border: none;
  border-radius: 20px; /* more pronounced rounded corners for buttons */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: all 0.3s ease;
}

button:hover {
  background-color: #846597; /* a slightly darker lavender for hover */
}

a {
  color: #6c567b; /* consistent with headings */
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color 0.3s ease;
}

a:hover {
  border-color: #6c567b; /* border appears on hover */
}

table {
  width: 100%;
  border-collapse: collapse;
}

table, th, td {
  border: 1px solid #ddd;
}

th, td {
  text-align: left;
  padding: 8px;
}

th {
  background-color: #f2f2f2;
}

tr:hover {background-color: #e8f4f8;}

<style>
.message, .explanation {
  padding: 1rem;
  margin-top: 1rem;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.message {
  background-color: #e8f4f8; /* Light aqua background for messages */
  border: 2px solid #cceeff; /* Slightly darker aqua border for messages */
  color: #005c99; /* Dark aqua color for message text */
}

.explanation {
  background-color: #f2f2f2; /* Light grey background for explanations */
  border: 2px solid #ddd; /* Grey border for explanations */
  color: #333; /* Dark grey color for explanation text */
  margin-bottom: 2rem; /* Add space below the explanation */
}

button.next-question {
  display: block;
  margin: 2rem auto 0; /* Center the button and add some margin on the top */
  font-size: 1rem;
}

.next-question {
  display: block;  // ボタンをブロック要素として表示
  margin: 2rem auto 0;  // 上部に2remのマージンを追加し、中央揃え
  padding: 0.5rem 1rem;  // パディングを適用
  background-color: #0077cc;  // ボタンの背景色
  color: #fff;  // テキスト色
  border: none;  // 枠線なし
  border-radius: 20px;  // 角を丸く
  cursor: pointer;  // ホバー時のカーソルをポインタに
  transition: background-color 0.3s ease;  // 背景色の変化を滑らかに
}

.next-question:hover {
  background-color: #005c99;  // ホバー時の背景色
}
</style>