/* ===========================
   動くマーカーのベース
   =========================== */
.marker-animate {
  display: inline;
  position: relative;
  z-index: 0;

  /* 行ごとに背景を分割（Safari対策で -webkit- 必須） */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;

  /* マーカーの初期状態（非アクティブ） */
  background-repeat: no-repeat;
  background-size: 0 0.55em; /* 幅ゼロ、高さ0.55em */
  background-position: 0 calc(100% - 0.2em); /* 下半分に配置 */
  transition: background-size 1.6s ease-out;

  line-height: 1.6;     /* 行間を少し広めに */
  padding: 0 .05em;     /* 行頭行末で切れないように微調整 */
}

/* アコーディオンなどで「open」が付与された時に発動 */
.chapter.open .marker-animate {
  background-size: 100% 0.55em;
}

/* ===========================
   カラーバリエーション
   =========================== */
.marker-yellow { background-image: linear-gradient(to right, #ffe600 0 0); }
.marker-pink   { background-image: linear-gradient(to right, #ff80aa 0 0); }
.marker-green  { background-image: linear-gradient(to right, #8ee000 0 0); }
.marker-blue   { background-image: linear-gradient(to right, #33c5ff 0 0); }
.marker-red    { background-image: linear-gradient(to right, #ff4d4d 0 0); }

/* ===========================
   スマホ向け調整
   =========================== */
@media screen and (max-width: 768px) {
  .marker-animate {
    background-size: 0 0.5em;                   /* 少し薄めに */
    background-position: 0 calc(100% - 0.18em); /* 下側に寄せる */
    line-height: 1.65;                          /* 行間を広めに */
  }
  .chapter.open .marker-animate {
    background-size: 100% 0.5em;
  }
}