/* ==== 自作アイコンCSS ==== */

/* □の中に↗（外部リンク用） */
.icon-external {
  position: relative;
}
.icon-external::before {
  content: '';
  display: block;
  position: absolute;
  left: 0; top: -1px;
  width: 16px; height: 16px;
  border: 2px solid #333;
  border-radius: 3px;
  box-sizing: border-box;
}
.icon-external::after {
  content: '';
  display: block;
  position: absolute;
  left: 5px; top: 4px;
  width: 7px; height: 7px;
  background: none;
  transform: rotate(0deg);
}

/* ====== X/Twitter ====== */
.icon-x {
  display: block;
  width: 17px; height: 17px;
  position: relative;
}
.icon-x::before, .icon-x::after {
  content: '';
  position: absolute;
  background: #222;
  border-radius: 2px;
}
.icon-x::before {
  top: 0; left: 6px;
  width: 5px; height: 17px;
  transform: rotate(45deg);
}
.icon-x::after {
  top: 0; left: 6px;
  width: 5px; height: 17px;
  transform: rotate(-45deg);
}

/* ====== Facebook F ====== */
.icon-facebook {
  display: block;
  width: 17px; height: 17px;
  position: relative;
}
.icon-facebook::before {
  content: '';
  position: absolute;
  left: 7.5px; top: 2.5px;
  width: 2.5px; height: 12px;
  background: #1877f3;
  border-radius: 1.2px;
}
.icon-facebook::after {
  content: '';
  position: absolute;
  left: 5px; top: 6.7px;
  width: 6.7px; height: 2.5px;
  background: #1877f3;
  border-radius: 1.2px;
}

/* ======= Instagram円枠＋ドット ======= */
.icon-instagram {
  display: block;
  width: 17px; height: 17px;
  position: relative;
}

.icon-instagram::before {
  content: '';
  display: block;
  position: absolute;
  left: 0; top: 0;
  width: 17px; height: 17px;
  border: 2px solid #bf1782;
  border-radius: 50%;
  box-sizing: border-box;
}
.icon-instagram::after {
  /* 中央のドット */
  content: '';
  position: absolute;
  left: 7px; top: 7px;
  width: 3px; height: 3px;
  background: #bf1782;
  border-radius: 50%;
}