* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  padding: 20px;
  font-family: sans-serif;
  line-height: 1.6;
}

/* タイトル部分 */
.page-title {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 30px; /* タイトルの下の空白 */
}

/* 語順訳リスト全体 */
.translation-flow,
.translation-flow2 {
  width: 100%;
}

/* 英語フレーズ（上の段） */
.translation-flow dt {
  font-weight: bold; /* 💡太字にする */
  color: #000000;
  font-size: 1.1rem;
}

/* 日本語語順訳（下の段） */
.translation-flow dd {
  color: #dd5459;
  font-size: 0.9rem;
  margin-bottom: 12px; /* 💡次のセットとの間の「空白」を設定 */
  padding-left: 3em;
}

/* 日本語（上の段） */
.translation-flow2 dt {
  font-weight: normal;
  color: #000000;
  font-size: 0.9rem;
}

/* 英語（下の段） */
.translation-flow2 dd {
  font-weight: bold;
  color: #dd5459;
  font-size: 1.1rem;
  margin-bottom: 12px; /* 💡次のセットとの間の「空白」を設定 */
  padding-left: 3em;
}

hr.simple-line {
  border: none;
  border-top: 1px solid #ccc; /* 線の太さと色 */
  margin: 2rem 0; /* 上下の余白 */
}