/* .bg__purple {
  background: #5a4398;
}

.text__purple {
  color: #5a4398;
}

.mochidashihin dt {
  color: #5a4398;
  font-weight: bold;
}
.mochidashihin dd {
  padding-bottom: 0.5em;
  margin-bottom: 0.7em;
}
.mochidashihin dd:not(:last-child) {
  border-bottom: 1px dashed #000;
}
.mochidashihin img {
  max-height: 2em;
  margin-left: 10px;
}

.mytimeline td {
  border: none;
}
.zeifutan .box__fill {
  vertical-align: text-bottom;
  font-weight: normal;
  color: #fff;
}
.zeifutan h5 {
  margin-bottom: 0 !important;
}

.sankaku_l::after {
  left: 15%;
} */

.sign__arrow {
  display: inline-block;
  width: 0;
  height: 0;
  /* PC: 右向き三角 */
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 32px solid #0a78c2; /* 三角の色はお好みで */
  vertical-align: middle;
}

@media (max-width: 768px) {
  .sign__arrow {
    /* スマホ: 下向き三角 */
    border-top: 32px solid #0a78c2; /* 三角の色はお好みで */
    border-right: 20px solid transparent;
    border-left: 20px solid transparent;
    border-bottom: none; /* 下のボーダーは不要、またはtransparentでもOK */
  }
}

.geijutsuevent {
  background-color: #e7f5ff;
}

.geijutsuevent::after {
  border-bottom: 15px solid #e7f5ff;
}

.searide__li h5 {
  margin: 0 !important;
  /* display: inline-block; */
}

.searide__li li:nth-child(1) {
  color: #c24400;
}
.searide__li li:nth-child(2) {
  color: #3f7c13;
}
.searide__li li:nth-child(3) {
  color: #197685;
}

/* ul の設定 */
.searide__li {
  list-style: none; /* デフォルトのリストスタイルを無効にする */
  padding: 0; /* デフォルトのパディングをリセット */
  margin: 0 !important; /* デフォルトのマージンをリセット */
  counter-reset: custom-counter; /* カウンターをリセット */
}

/* li の設定 (Flexboxを使用してカウンターとコンテンツ全体を並べる) */
.searide__li > li {
  display: flex; /* li を Flexbox コンテナとして設定 */
  align-items: flex-start; /* 項目を上揃えにする */
  margin-bottom: 20px; /* 各項目間の下マージン */
}

/* 数字と円を描写する擬似要素の共通スタイル */
.searide__li > li::before {
  counter-increment: custom-counter; /* カウンターをインクリメント */
  content: counter(custom-counter); /* カウンターの値を表示 */

  /* 円のスタイル */
  display: flex; /* 数字を円の中央に配置するためにFlexboxを使用 */
  justify-content: center; /* 水平方向の中央揃え */
  align-items: center; /* 垂直方向の中央揃え */

  width: 35px; /* 円の幅 */
  height: 35px; /* 円の高さ (widthと同じにすると正円になる) */
  border-radius: 50%; /* 角を丸くして円にする */
  font-weight: bold; /* 数字を太字に */
  font-size: 1em; /* 数字のサイズ */

  margin-right: 15px; /* 数字とコンテンツの間のスペース */
  flex-shrink: 0; /* 数字の領域が縮まないようにする */

  /* 数字を白抜きにする */
  color: #fff; /* 数字の色を白に */
  border: 2px solid transparent; /* ボーダーは透明に（必要であれば色付きにできます） */
}

/* 各項目固有のスタイル */
.searide__li > li:nth-child(1)::before {
  background-color: #c24400; /* 1つ目の円の背景色 */
}

.searide__li > li:nth-child(2)::before {
  background-color: #3f7c13; /* 2つ目の円の背景色 */
}

.searide__li > li:nth-child(3)::before {
  background-color: #197685; /* 3つ目の円の背景色 */
}

/* h5とpを囲む新しいコンテナ */
.searide__content-wrapper {
  flex-grow: 1; /* 残りのスペースを全て占めるようにする */
}

/* h5 と p のスタイル */
.searide__li > li h5 {
  margin: 0; /* h5 のデフォルトマージンをリセット */
  font-size: 1.1em;
  line-height: 1.4; /* 行の高さを調整 */
}

.searide__li > li p {
  margin: 5px 0 0 0; /* p の上マージンを調整 */
  /* pに色はつけないため、colorプロパティは指定しないか、デフォルトの色を維持 */
  color: initial;
  font-size: 0.9em;
  line-height: 1.4; /* 行の高さを調整 */
}