/* フォーム要素の一般的な親要素を相対配置の基準とする */
/* ⚠️ 多くのフォームで利用される要素をターゲットにします */
.validation-form  div, 
.validation-form  p, 
.validation-form  label, 
.validation-form  fieldset {
    position: relative;
}

/* もし上記で対応できない場合は、エラーを持つ要素の親要素に手動でposition: relativeを付与してください */

/* エラー要素のスタイル */
.is-invalid {
    border: 2px solid #e53935 !important; /* 赤い枠線 */
}

.validation-error-balloon {
    /* 既存のスタイル */
    background-color: #e53935; 
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    
    /* 💡 絶対配置に変更 */
    position: absolute!important; 
    
    /* 💡 位置調整: 基準要素の左端から少し離し、下に配置 */
    /* top: 100% (親要素の高さ) を使うと、inputの真下に配置できます */
    top: calc(60% + 5px); /* 親要素の高さの直下から5px下に配置 */
    left: 5px; 
    
    /* 吹き出しの三角形のためのスペース確保 */
    margin-top: 0; 
    z-index: 10;
    white-space: nowrap; /* テキストが途中で改行されないように */
}

/* 吹き出しの三角形 (上向き) */
.validation-error-balloon::before {
    content: "";
    position: absolute;
    bottom: 100%; /* バルーンの上端に配置 */
    left: 10px;
    border: 4px solid transparent;
    border-bottom: 4px solid #e53935; 
    /*transform: translateY(4px);*/ /* バルーンとの隙間を埋める */
}

.validation-wrapper input, .validation-wrapper select {
    width: 100%;
}

.validation-wrapper {
    width: 100%;
}