.skillbar {
  position: relative;
  display: inline-block;
  margin: 0 10% 6%;
  /* background: #eee; */
  /* height: 40px; */
  border-radius: 3px;
  width: 80%;
  /* box-shadow: 0 1px 6px rgba(0,0,0,0.12) inset; */
  }

  /** スマホ 用 */
@media (max-width: 700px) {
  .skillbar {
    margin: 0 5% 6%;
    width: 90%;
    }
}
  
  .skillbar-title {
  /* position: absolute; */
  top: 0;
  left: 0;
  font-weight: bold;
  font-size: 13px;
  /* color: #ffffff; */
  background: #6adcfa;
  /* border-top-left-radius: 3px; */
  /* border-bottom-left-radius: 3px; */
  background: none;
  padding: 0 20px;
  /* height: 40px; */
  /* line-height: 40px; */
  }
  
  .skillbar-bar {
  height: 1.4em;
  width:0px;
  background:#6adcfa;
  border-radius:3px;
  display:inline-block;
  }
  
  .skill-bar-percent {
  position: absolute;
  right: 10px;
  top: 28px;
  font-size: 11px;
  /* height: 35px; */
  /* line-height: 35px; */
  color: #ffffff;
  color: rgba(0, 0, 0, 0.4);
  }
  
  /*    .skillbar-html .skillbar-title {
  background: #d35400;
  }*/
  .skillbar-html .skillbar-bar {
  background: #e67e22;
  }
  /*    .skillbar-css .skillbar-title {
  background: #0C73B8;
  }*/
  .skillbar-css .skillbar-bar {
  background: #268DD2;
  }
  .skillbar-js .skillbar-title {
  background: #E5A228;
  }
  .skillbar-js .skillbar-bar {
  background: #FEBB42;
  }
  
  .skillbar-bar::after {
  box-shadow: 0 1px 6px rgba(0,0,0,0.12) inset;
  content: "";
  position: absolute;
  width: 100%;
  height: 1.4em;
  background-color: #efefef;
  z-index: -1;
  }