mark {
      background: linear-gradient(transparent 60%, #ffff00 60%);
      padding: 0 0.1em; /* 水平方向の余白を文字に合わせる */
      display: inline; /* inline-blockを解除 */
      line-height: inherit; /* 親要素のline-heightを引き継ぐ */
    }
    
    /* 黄色マーカー */
    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;
    }

    /* 独自の太字用カスタムクラス（他のCSSと干渉しないように "col-bold" と命名） */
    .col-bold {
      font-weight: bold;
    }
    
    /* その他基本的なスタイル */
    h2, h3, h4 {
      margin-top: 20px;
      margin-bottom: 10px;
    }
    p {
      line-height: 1.6;
      margin-bottom: 15px;
    }
    ul {
      margin: 10px 0 15px 20px;
    }
    table {
      margin: 15px 0;
      width: 100%;
      border: 1px solid #ccc;
    }
    table th, table td {
      border: 1px solid #ccc;
      padding: 8px;
      text-align: center;
    }

/* ===== yamashita.biz/column/ カスタムスタイル ===== */
/* === 記事スコープ共通変数 ================= */
article{
  --accent: #f2c94c;  /* mark の背景や Q ラベル色に共通で流用 */
}

/* strong を確実に太字に */
article strong{
  font-weight: 700;
  color:#333;
}

/* mark の視認性アップ */
article mark{
  background: var(--accent, #fff3a0);
  padding: 0 0.2em;
}

/* === Q&A ブロック ======================== */
.qa-block {
  margin: 1.5em 0;
  border-left: 4px solid var(--accent, #f2c94c);
  padding-left: 1em;
}

.qa-block .q {
  font-weight: 700;
  position: relative;
  margin-bottom: .3em;
}

.qa-block .q::before {
  content: "Q.";
  color: var(--accent, #f2c94c);
  margin-right: .3em;
}

.qa-block .a::before {
  content: "A.";
  color: #2d9cdb;
  margin-right: .3em;
}