.wine-koma {
 background-color:#ECC5C5;
 padding:10px;
}
.wine-koma :is(h2, h3, h4) {
 color:#8B2030;
 font-size:115%;
 font-weight:bold;
}
.wine-koma p {
 color:#8B2030;
}
.wine-koma a {
  color: #6B4E71; /* ベース */
  text-decoration: none;
}
.wine-koma a:hover {
  color: #8B6691; /* 濃いめに変化 */
  text-decoration: underline;
}
.beige-koma {
 background-color:#F3E3C1;
 padding:10px;
}
.beige-koma :is(h2, h3, h4) {
 color:#4B3A2A;
 font-size:115%;
 font-weight:bold;
}
.beige-koma p {
 color:#4B3A2A;
}
.beige-koma a {
  color: #355070; /* ベース */
  text-decoration: none;
}
.beige-koma a:hover {
  color: #1E2A36; /* 濃いめに変化 */
  text-decoration: underline;
}
.of-button {
  background-color: #6B4E71; /* ベースカラー */
  color: #FFFFFF;           /* 文字色は白 */
  border: 1px solid #D9D9D9; /* 薄いグレーのボーダー */
  border-radius: 8px;       /* 角丸で柔らかい印象 */
  padding: 10px 20px;       /* 十分なクリック領域 */
  font-size: 16px;          /* 読みやすいサイズ */
  cursor: pointer;          /* ポインター表示 */
  transition: background-color 0.3s, transform 0.2s; /* ホバーのアニメーション */
  text-align: center;
  display: inline-block;
  text-decoration: none;
}

/* ホバー時の変化 */
.of-button:hover {
  background-color: #8B6691; /* 明るめパープルに変化 */
  transform: translateY(-2px); /* 軽い浮き上がり感 */
}