<form>
  <div class="form-item">
    <label for="email">メールアドレス</label>
    <input type="email" id="email" name="email" placeholder="例) contact@evoworx.co.jp" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$">
    <div class="form-item__error">有効なメールアドレスを入力してください</div>
    </div>
  </div>
</form>

/* 入力が正しくない時にメッセージ表示 */
.form-item:has(input:invalid:not(:placeholder-shown)) > .form-item__error {
    display: block; 
}

/* フォーカス中はメッセージを非表示 */
.form-item:has(input:focus:invalid:not(:placeholder-shown)) >.form-item__error {
    display: none; 
}

.form-item__error {
  color: red;
  font-size: 0.85em;
  display: none; 
  margin-top: 5px;
}


label {
  display: block;
  font-weight: 700;
  align-items: center;
}

input {
  width: 200px;
  margin-top: 10px;
  padding: 10px 10px;
  background-color: #efefef;
  border: solid 1px #efefef;
  border-radius: 5px;
}

/* 入力が正しくない時に枠を赤くする */
input:invalid:not(:placeholder-shown) {
  border: solid 1px red;
}