.circle_list {display: table; width: 100%; height: auto; margin: 10px auto;}
.circle_list li {display: table-cell; border: 1px solid #ddd; width: calc(100% / 4 - 8px); height: 80px; border-radius: 4px; list-style: none; padding: 10px 40px 10px 10px; line-height: 1.5; float: left; text-align: center; margin: 0 10px 0 0; vertical-align: middle; position: relative;}
.circle_list li::before {display: none;}
.circle_list li::after {content: ''; display: block; width: 0; height: 0; border: 12px solid transparent; border-left-color: #ddd; position: absolute; right: 0; top: 50%; transform: translate(0, -50%);}
.circle_list li:last-child {margin: 0;}
.circle_list li:last-child::after {display: none;}

@media screen and (max-width: 900px) {
  .circle_list li {width: calc(100% / 2 - 10px); margin: 0 10px 10px 0;}
  .circle_list li:nth-child(2n) {margin: 0 0 10px 0;}
}
@media screen and (max-width: 500px) {
  .circle_list li {width: 100%; margin: 0 0 10px 0; padding: 10px 10px 40px;}
  .circle_list li::after {border-left-color: transparent; border-top-color: #ddd; right: auto; left: 50%; top: auto; bottom: 0; transform: translate(-50%, 0);}
}