<div class="cp_iptxt">
  <input class="ef" type="text" placeholder="">
  <label>お名前</label>
  <span class="focus_line"></span>
</div>
<div class="cp_iptxt">
  <input class="ef" type="text" placeholder="">
  <label>E-Mail</label>
  <span class="focus_line"></span>
</div>

.cp_iptxt {
  position: relative;
  width: 100%;
  margin: 20px 0;
}
.cp_iptxt input[type='text'] {
  font: 15px/24px sans-serif;
  width: 100%;
  padding-left: 4em;
  border: none;
  border-bottom: 1px solid #1b2538;
  background: transparent;
  border-radius: 0;
}
.cp_iptxt .ef {
  padding: 4px 0;
  border: 0;
  border-bottom: 1px solid #1b2538;
  background-color: transparent;
}
.cp_iptxt .ef ~ .focus_line {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  transition: 0.4s;
  background-color: #da3c41;
}
.cp_iptxt .ef ~ label {
  position: absolute;
  top: 4px;
  left: 0;
  transition: 0.3s;
  letter-spacing: 0.5px;
  color: #aaaaaa;
}
.cp_iptxt input[type='text']:focus {
  outline: none;
}
.cp_iptxt .ef:focus ~ .focus_line {
  left: 0;
  width: 100%;
  transition: 0.4s;
}
.cp_iptxt .ef:focus ~ label {
  font-size: 12px;
  top: -16px;
  transition: 0.3s;
  color: #da3c41;
}