/* ============================================================
   フォトン算数オンライン｜入塾申し込みフォーム
   エラー表示

   バリデーションに失敗したとき、画面上部の #error-messages に
   .c-messages__error が並ぶ。中身が空のときは :not(:empty) で
   枠ごと消えるので、HTML側は常に置いたままでよい。

   欄ごとのエラー文や見出しはプログラムから出力されないため、
   一覧表示のみをCSSで整えている。

   ※ 全ページが読む。c-shell.css の後に読み込むこと。
   ============================================================ */

/* ------------------------------------------------------------
   1. 枠
   ------------------------------------------------------------ */
.c-messages:not(:empty) {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 16px;
  padding: 16px 18px 17px;
  font-size: 14px;
  font-weight: 700;
  color: #b5432f;
  background: #fdecea;
  border: 2px solid var(--req);
  border-radius: 16px;
}

/* ------------------------------------------------------------
   2. 1件ごとのメッセージ（行頭に点を打つ）
   ------------------------------------------------------------ */
.c-messages__error {
  position: relative;
  padding-left: 15px;
  font-weight: 500;
  line-height: 1.7;
  text-wrap: pretty;
}

.c-messages__error::before {
  content: '';
  position: absolute;
  top: 0.72em;
  left: 3px;
  width: 5px;
  height: 5px;
  background: currentColor;
  border-radius: 50%;
}

.c-messages:not(:has(.c-messages__error)) {
  display: none;
}