/* 入力フィールドのスタイル（ボーダーなし＋下線のみ） */
.form-control, .form-select {
    width: 100%;
    padding: 4px 0px 1px 0px;
    border: none; /* 通常のボーダーを消す */
    border-bottom: 2px solid #ddd; /* 下線のみ */
    font-size: 16px;
    background: transparent;
    transition: border-bottom-color 0.2s ease-in-out;
    border-radius: 0;
    color:#5A5A5A;
}


/* カテゴリ選択エリアのスタイル */
.category-select-container {
    position: relative;
    display: inline-block; /* 必要以上に横幅を広げない */
}

/* 各ラベルのスタイル */
.form-label {
    display: block;
}

/* カテゴリ選択エリア */
.category-select-container {
    position: relative;
}

/* カテゴリの `短い` 選択ボックス */
.short-select {
    width: 250px; /* 幅を短く */
    appearance: none;
    padding: 4px 30px 1px 1px;
    border: none;
    border-bottom: 2px solid #ddd;
    font-size: 14px;
    background: transparent;
    transition: border-bottom-color 0.2s ease-in-out;
    cursor: pointer;
    outline: none;
    box-shadow: none;
}

/* 三角マーク（▼）を追加 */
.category-select-container::after {
    content: "▼";
    font-size: 14px;
    color: #777;
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

/* ゲスト名の `短い` 入力フィールド */
.short-input {
    width: 250px; /* 幅を短く */
    padding: 4px 0px 1px 0px;
    border: none;
    border-bottom: 2px solid #ddd;
    font-size: 16px;
    background: transparent;
    transition: border-bottom-color 0.2s ease-in-out;
    box-shadow: none;

}

.form-textarea {
    width: 100%;
    height: 200px;
    padding: 2px 1px;
    border: 2px solid #ddd; /* 通常のボーダーを消す */
    font-size: 14px;
    background: transparent;
    transition: border-bottom-color 0.2s ease-in-out;
    border-radius: 4px;
}

.form-textarea:focus {
    border-color: #25A7B3;
    outline: none;
    box-shadow: none; /* 外側のボーダーを完全に消す */
}

.short-input:focus, .form-control:focus {
    border-bottom-color: #25A7B3;
    outline: none ;
    box-shadow: none; /* シャドウを完全に消す */
}

input::placeholder, textarea::placeholder {
    font-size: 14px !important;
    color: #aaa !important;
}


/* 投稿ボタンを中央揃えに */
.button-container {
    text-align: center;
    margin-top: 20px; /* 適度な余白 */
}


/* エラー時の入力フィールド（背景色を変更） */
.input-error {
    border-bottom: 2px solid #ff7b7b !important; /* 赤色のボーダー */
    background-color: rgba(255, 200, 200, 0.2) !important; /* 薄い赤色の背景 */
    transition: border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

/* フォーカス時のエラー強調 */
.input-error:focus {
    border-bottom-color: #ff5252 !important; /* 濃い赤色 */
    outline: none;
    background-color: rgba(255, 200, 200, 0.3) !important; /* さらに強調 */
}

/* エラーメッセージ */
.text-danger {
    font-size: 14px;
    margin-top: 4px;
    display: block;
}

/* ✅ カテゴリのエラー表示 */
.short-select.input-error {
    background-color: rgba(255, 200, 200, 0.2) !important; /* カテゴリ選択のエラー時の背景色 */
}