/* ===================================================
   三角アイコンと矢印アイコン（2864）
   数値は記事のコードと同じ。変えたのは色だけ（#333 → 墨 #2b2a27）。
   1つずつ、番号のところからコピーして使えます。
   =================================================== */

/* ---------- 見本の箱（マスの中で真ん中に置くための見た目。なくても同じ形になります） ---------- */
.items > li { align-items: center; }
.items a { color: #2b2a27; text-decoration: none; }

/* ---------- 01 三角アイコン ---------- */
.arrow_s {
  position: relative;
  display: inline-block;
  padding-left: 12px;
}
.arrow_s:before {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 0 6px 8px;
  border-color: transparent transparent transparent #2b2a27;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
}

/* ---------- 02 三角アイコン（丸背景あり） ---------- */
.arrow_s_b {
  position: relative;
  display: inline-block;
  padding-left: 22px;
}
.arrow_s_b:before {
  content: '';
  width: 18px;
  height: 18px;
  background: #2b2a27;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
}
.arrow_s_b:after {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 0 4px 6px;
  border-color: transparent transparent transparent #fff;
  position: absolute;
  top: 0;
  left: 6px;
  bottom: 0;
  margin: auto;
}

/* ---------- 03 矢印アイコン（右向き） ---------- */
.arrow_r {
  position: relative;
  display: inline-block;
  padding-left: 20px;
}
.arrow_r:before {
  content: '';
  width: 6px;
  height: 6px;
  border: 0;
  border-top: solid 2px #2b2a27;
  border-right: solid 2px #2b2a27;
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
}

/* ---------- 04 矢印アイコン（左向き） ---------- */
.arrow_l {
  position: relative;
  display: inline-block;
  padding-left: 20px;
  color: #2b2a27;
  text-decoration: none;
}
.arrow_l:before {
  content: '';
  width: 6px;
  height: 6px;
  border: 0;
  border-top: solid 2px #2b2a27;
  border-left: solid 2px #2b2a27;
  transform: rotate(-45deg);
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
}

/* ---------- 05 矢印アイコン（上向き） ---------- */
.arrow_o {
  position: relative;
  display: inline-block;
  padding-left: 20px;
}
.arrow_o:before {
  content: '';
  width: 6px;
  height: 6px;
  border: 0;
  border-top: solid 2px #2b2a27;
  border-right: solid 2px #2b2a27;
  transform: rotate(-45deg);
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
}

/* ---------- 06 矢印アイコン（下向き） ---------- */
.arrow_u {
  position: relative;
  display: inline-block;
  padding-left: 20px;
}
.arrow_u:before {
  content: '';
  width: 6px;
  height: 6px;
  border: 0;
  border-bottom: solid 2px #2b2a27;
  border-right: solid 2px #2b2a27;
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
}

/* ---------- 07 矢印アイコン（丸背景あり） ---------- */
.arrow_r_b {
  position: relative;
  display: inline-block;
  padding-left: 22px;
}
.arrow_r_b:before {
  content: '';
  width: 18px;
  height: 18px;
  background: #2b2a27;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
}
.arrow_r_b:after {
  content: '';
  width: 6px;
  height: 6px;
  border: 0;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  left: 4px;
  bottom: 0;
  margin: auto;
}