/* ========================================
   Ｒｅ就活から流用 パスワードバリデーション
   ======================================== */
.password-validation {
    list-style: none;
    padding: 0;
    margin-top: 10px;
}

.password-validation li {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 14px;
}

.password-validation .icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}

/* 未チェック状態 */
.password-validation .unchecked {
    color: #999;
}

.password-validation .unchecked .icon {
    background-image: url('../images/check_pending.png');
}

/* エラー状態 */
.password-validation .error {
    color: #fc3601;
}

.password-validation .error .icon {
    background-image: url('../images/NG.png');
}

/* 成功状態 */
.password-validation .checked {
    color: #17A462;
}

.password-validation .checked .icon {
    background-image: url('../images/check.png');
}

/* ========================================
   パスワード入力欄
   ======================================== */

/* パスワード入力欄のエラー状態（赤枠） */
#pasPWD.error {
    border-color: #fc3601;
    box-shadow: 0 0 0 2px rgba(217, 83, 79, 0.1);
}

#pasPWD.error:focus {
    border-color: #fc3601;
    outline-color: #fc3601;
}

/* パスワード入力欄の成功状態（緑枠） */
#pasPWD.success {
    border-color: #17A462;
    box-shadow: 0 0 0 2px rgba(23, 164, 98, 0.1);
}

#pasPWD.success:focus {
    border-color: #17A462;
    outline-color: #17A462;
}

@media (max-width: 640px) {
.password-validation li {
  font-size: 13px;
}
}