.problem-card {
    border: 1px solid #ddd;
    border-radius: 4px; /* 角を少し丸める */
    padding: 8px; /* パディングを減少 */
    margin-bottom: 10px; /* マージンを減少 */
    background-color: #f9f9f9;
    box-shadow: none; /* 影をなくす */
    display: flex;
    flex-direction: column;
    gap: 4px; /* 要素間の隙間を減少 */
}
.row {
    margin-bottom: 2px; /* 各行の下マージンを減少 */
}
.english-text h3 {
    font-size: 1em; /* フォントサイズをさらに縮小 */
    font-weight: bold;
    color: #333;
    margin: 0; /* マージンをなくす */
}
.japanese-translation p {
    font-size: 0.85em; /* 日本語訳のフォントサイズを縮小 */
    color: #555;
    margin: 0; /* マージンをなくす */
}
.comments p {
    font-size: 0.75em; /* コメントのフォントサイズを縮小 */
    color: #777;
    font-style: italic;
    margin: 0; /* マージンをなくす */
}
.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 6px; /* 上マージンを減少 */
    padding-top: 4px; /* パディングを減少 */
    border-top: 1px solid #eee; /* 上部に細いボーダー */
    font-size: 0.8em; /* フォントサイズを縮小 */
}
.creator {
    color: #666;
}

.ul-no-bullets {
  list-style-type: none;
}