/* 標準可変メディア
   メモ : 可変メディアでは、HTML からメディアの高さおよび幅の属性を削除する必要がある
   http://www.alistapart.com/articles/fluid-images/ 
*/

	/* ─ Ranking ラベル用 ここから ─ */
.flex{                 /* 連番を振る準備 */
  counter-reset: rank;
}
.flex .item{
  position:relative;   /* 子要素を絶対配置するため */
}

/* ── Ranking 星形バッジ 完全コピペ用 ── */
.flex{                          /* 1,2,3… の連番を用意 */
  counter-reset: rank;
}

.flex .item{
  position: relative;           /* 子＝星バッジを絶対配置するため */
}

/* 星形バッジ本体（疑似要素） */
.flex .item::before{
  counter-increment: rank;      /* 自動で 1→2→3… */
  content: counter(rank) "位";  /* 表示文字 */

  position: absolute;
  top: 6px;                     /* 好みで調整 */
  left: 6px;
  z-index: 10;

  width: 80px; height: 80px;    /* 星の大きさ */
  line-height: 80px;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  background: #e50000;          /* 基本色（4位以下） */

  /* 星形に切り抜き */
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%,
                     79% 91%, 50% 70%, 21% 91%, 32% 57%,
                     2% 35%, 39% 35%);
}


.stripe {
  background-image: repeating-linear-gradient(329deg, #BADFFF, #BADFFF 3px, transparent 3px, transparent 14px);
padding: 10px;
}