/* ===================================================
   shape-outside でテキストの回り込みを円形に
   数値は記事・CodePen と同じ。変えたのは色だけ（6 色に）。
   1つずつ、番号のところからコピーして使えます。
   =================================================== */

/* ---------- 見本の箱（マスに収めるための指定。コピーしなくても同じ形になります） ---------- */
.items .clearfix { font-size: 14px; line-height: 1.8; }
.items .clearfix::after { content: ""; display: block; clear: both; }
.items .clearfix + .clearfix { margin-top: 24px; }

/* ---------- 01 円形に回り込む ---------- */
.circle_left {
  display: block;
  float: left;
  border-radius: 50%;
  shape-outside: circle();
  margin-right: 25px;
}
.circle_right {
  display: block;
  float: right;
  border-radius: 50%;
  shape-outside: circle();
  margin-left: 25px;
}

/* ---------- 02 円形にしないと ---------- */
.square_left {
  display: block;
  float: left;
  margin-right: 25px;
}
.square_right {
  display: block;
  float: right;
  margin-left: 25px;
}