@import url('https://fonts.googleapis.com/css2?family=Amatic+SC:wght@700&display=swap');
body {
 font-family: 'Amatic SC', cursive;
  font-size: 1.5rem;
  background: #fafafa;
  color: #333;
}

//reset & init//インプットCSSリセット

.heading {
  padding-top: 3rem;
  text-align: center;
}
.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
input {
  border: none;
  outline: none;
  width: 100%;
  background-color: transparent;
}
.sample01 {
  width: 100%;
  max-width: 500px;
}

//sample from here//サンプルここから

.sample01 {
  label {
    display: flex;
    flex-direction: column;
  }
  input {
    order: 1;
    padding: 1rem 0;
    border-bottom: 2px solid #000;
    &::placeholder {
      color: transparent;
    }
    &:not(:placeholder-shown) + span {
      transform: translateY(0) scale(.75);
    }
    &:focus + span {
      transform: translateY(0) scale(.75);
    }
  }
  span {
    transform: translateY(2.2rem) scale(1);
    transform-origin: left;
    transition: .3s;
  }
}