/* =========================================================
   blink-form.css（recruit フォルダ専用）
   入力エリアの「赤い点滅枠」を実現するCSS

   仕様：
   - 入力中（focus中）は点滅しない
   - 必須/任意に関係なく、未入力の次の項目だけ点滅
   - チェックボックス/ラジオはグループ全体を囲う
========================================================= */

/* ---------------------------------------
   点滅アニメーション（赤のON/OFF）
--------------------------------------- */
@keyframes blinkOutline {
  0%, 49% {
    outline-color: #ff4040;   /* 点灯 */
  }
  50%, 100% {
    outline-color: transparent; /* 消灯 */
  }
}

/* ---------------------------------------
   1) 通常の入力欄（input / textarea / select）
   → 既存の枠（border）は絶対に壊さない
   → 点滅の outline だけ追加
--------------------------------------- */
.js-blink-form input.blink-field,
.js-blink-form textarea.blink-field,
.js-blink-form select.blink-field {
  outline: 2px solid transparent;
  outline-offset: 0;
  border-color: inherit;
  animation: blinkOutline 1s steps(1, end) infinite;
}

/* ---------------------------------------
   2) チェックボックス / ラジオ（グループ枠）
   → まとめて点滅させる
   → label や p を囲んで枠を作る
--------------------------------------- */
.js-blink-form .blink-field:not(input):not(textarea):not(select) {
  display: block;
  outline: 2px solid transparent;
  outline-offset: -5px;
  animation: blinkOutline 1s steps(1, end) infinite;
}

/* ---------------------------------------
   3) 入力中（focus）では点滅しない
--------------------------------------- */
.js-blink-form input:focus,
.js-blink-form textarea:focus,
.js-blink-form select:focus {
  outline: none !important;
  animation: none !important;
}