@charset "utf-8";
  
/* .c-marker {
    background: -webkit-linear-gradient(left, rgb(255,250,153) 50%, transparent 50%);
    background: -moz-linear-gradient(left, rgb(255,250,153) 50%, transparent 50%);
    background: linear-gradient(left, rgb(255,250,153) 50%, transparent 50%);
  background-repeat: no-repeat;
  background-size: 200% .8em; 
    background-position: 100% .5em;
    transition: 2s;
}
.c-marker.is-active{
    background-position: 0% .5em;
} */


.marker {
  background:linear-gradient(transparent 50%, rgba(255, 220, 123) 50%);
  /* background:linear-gradient(transparent 50%, #f29436 50%); */
  display: inline;

  /* 背景の繰り返しを停止 */
  background-repeat: no-repeat;

  /* マーカーの横方向を0にして縮める */
  /* background-size: 0% 100%; */
  background-size: 0% 50%;
  
  /* マーカーが引かれる速度を指定 */
  transition:background-size 1.5s;
}

/* マーカーが引かれる際に付与するクラス */
.marker.on {
  /* 横方向を100%にして、マーカーを引く */
  /* background-size: 100% 100%; */
  background-size: 70% 50%;
}

@media screen and (max-width: 780px) {
  .marker {
    background:linear-gradient(transparent 70%, rgba(255, 220, 123) 50%);
    /* background:linear-gradient(transparent 50%, #f29436 50%); */
    display: inline;
  
    /* 背景の繰り返しを停止 */
    background-repeat: no-repeat;
  
    /* マーカーの横方向を0にして縮める */
    /* background-size: 0% 100%; */
    background-size: 0% 50%;
    
    /* マーカーが引かれる速度を指定 */
    transition:background-size 1.5s;
  }
  
  /* マーカーが引かれる際に付与するクラス */
  .marker.on {
    /* 横方向を100%にして、マーカーを引く */
    /* background-size: 100% 100%; */
    background-size: 100% 50%;
  }
}