.content-box-1{
  width: 100%;
  padding-right: 20%;
  /* padding-bottom: 20%; */
  padding-left: 20%;
  /* background-color: red; */
}

.box-height30 {
  height: 30px;
}
.box-height50 {
  height: 50px;
}
.box-height90 {
  height: 90px;
}





/* 左側の薄い青色のボックス */
.box-left {
  background-color: #b6eff7; /* 薄い青色 */
  padding: 30px;
  border-radius: 20px;
  border: 1px solid #b3e5fc;
  margin-bottom: 20px;
  overflow: hidden; /* テキストがはみ出ないように */
  box-sizing: border-box; /* パディングを含めて幅を計算 */
}

/* 右側の薄い黄色のボックス */
.box-right {
  background-color: #fff9c4; /* 薄い黄色 */
  padding: 30px;
  border-radius: 20px;
  border: 1px solid #ffe082;
  margin-bottom: 20px;
  overflow: hidden; /* テキストがはみ出ないように */
  box-sizing: border-box; /* パディングを含めて幅を計算 */
}

.box-left h6::before,
.box-right h6::before {
    content: "・"; /* ドットを追加 */
    margin-right: 8px; /* テキストとの間にスペースを追加 */
    color: inherit; /* テキストの色に合わせる */
}

.text-highlight {
  background-color: rgba(180, 182, 176, 0.8);
  color: white;
  padding: 5px 10px; /* 文字と背景の余白 */
  display: inline-block; /* テキストの背後にのみ背景を適用 */
  border-radius: 4px; /* 角を少し丸く */
}