/* 黄色マーカー */
span.marker-yellow {
    background: linear-gradient(transparent 60%, #ffff00 60%);
}

/* 緑マーカー */
span.marker-green {
    background: linear-gradient(transparent 60%, #21ff00 60%);
}

/* ピンクマーカー */
span.marker-pink {
    background: linear-gradient(transparent 60%, #ff69b4 60%);
}

/* オレンジマーカー */
span.marker-orange {
    background: linear-gradient(transparent 60%, #ff8c00 60%);
}

blockquote {
    position: relative;
    border-top: 1px solid #7EB774;
    border-bottom: 1px solid #7EB774;
    padding: 10px;
    padding-left: 40px; /* テキスト部分の左側に余白を追加 */
}

blockquote:before {
    position: absolute;
    background-color: #FFFFFF;
    color: #7EB774;
    font-family: 'Times New Roman', serif; 
    content: '“'; /* 左側の引用符 */
    line-height: 1;
    text-align: center;
    top: -20px;
    left: 0px; /* 左端の位置を調整 */
    padding: 10px;
    font-size: 20px;
}


blockquote:after {
    position: absolute;
    right: -10px;
    bottom: -20px;
    background-color: #FFFFFF;
    padding: 10px;
    color: #7EB774;
    font-family: 'Times New Roman', serif; /* 適切なフォントに変更 */
    content: '”'; /* 右側の引用符 */
    line-height: 1;
    text-align: center;
    font-size: 20px;
}

blockquote cite {
    display: block;
    padding-right: 30px;
    font-size: 0.8rem;
    text-align: right;
    color: #808080;
}