/* contact.css */

/* フォーム全体 */
#contactForm {
    max-width: 800px;
    margin: 30px auto;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #f9f9f9;
}

/* 各入力グループ */
.form-group {
    margin-bottom: 20px;
}

/* ラベル */
.form-group label {
    display: block;
    font-weight: bold;
    margin-bottom: 8px;
    color: #333;
}

/* 必須マーク */
.form-group .required {
    color: #e44d26; /* 赤色 */
    font-size: 0.9em;
    margin-left: 5px;
}

/* テキスト入力欄とテキストエリア (汎用的なスタイルがあれば既存CSSに統合を検討) */
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group textarea {
    width: calc(100% - 20px); /* 左右のpaddingを考慮 */
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1em;
    box-sizing: border-box; /* paddingをwidthに含める */
}

.form-group textarea {
    resize: vertical; /* 縦方向のみリサイズ可能に */
}

/* エラーメッセージ */
.input-error-message {
    color: #e44d26; /* 赤色 */
    font-size: 0.85em;
    margin-top: 5px;
    display: block;
}

/* エラー時の入力欄のスタイル */
.form-group input.is-invalid,
.form-group textarea.is-invalid {
    border-color: #e44d26;
    background-color: #fffafa; /* 薄い赤色の背景 */
}

---

/* **修正点ここから** */

/* フォームのボタンを囲むコンテナのスタイル */
/* HTMLが .form-buttons なので、それに合わせてセレクタを修正 */
.form-buttons {
    display: flex;
    justify-content: center; /* ボタンを中央揃え */
    gap: 20px; /* ボタン間のスペース */
    margin-top: 40px; /* 上部の余白 */
}

/* 汎用的なボタンの基本スタイル */
/* .back-button と .submit-button に共通で適用 */
.form-buttons .back-button,
.form-buttons .submit-button {
    display: inline-block;
    width: 250px; /* 幅を調整 */
    padding: 12px 20px;
    border: none;
    border-radius: 5px;
    font-size: 1.1em;
    cursor: pointer;
    transition: background-color 0.3s ease;
    text-align: center; /* ボタン内のテキストを中央揃え */
    text-decoration: none; /* 下線なし */
    box-sizing: border-box; /* paddingとborderをwidthに含める */
}

/* 「送信する」ボタンの色 */
.form-buttons .submit-button {
    background-color: #007bff; /* 青色 */
    color: white;
}

/* 「修正する」ボタンの色 */
.form-buttons .back-button {
    background-color: #6c757d; /* 戻るボタンの色 (グレー) */
    color: white;
}

/* ホバー時のスタイル */
.form-buttons .submit-button:hover {
    background-color: #0056b3; /* ホバー時の色 */
}

.form-buttons .back-button:hover {
    background-color: #5a6268; /* ホバー時の色 */
}

/* index.php の送信ボタンのみに適用されるスタイル */
/* もし index.php のボタンが .submit-button クラス単独で存在し、
   .form-buttons の中にない場合、このスタイルが必要です。
   必要なければ削除してください。 */
.submit-button { /* .form-buttons のスコープ外にある submit-button 用 */
    display: block;
    width: 250px;
    padding: 12px 20px;
    margin: 30px auto 10px auto;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 1.1em;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.submit-button:hover { /* 上記 .submit-button に対するホバー */
    background-color: #0056b3;
}


/* 確認画面の項目表示 */
/* HTMLの構造が <div class="confirm-table"><dl><dt></dt><dd></dd></dl> なので、それに合わせて修正 */
.confirm-table dl {
    margin-bottom: 15px;
    padding: 10px;
    border-bottom: 1px dashed #eee;
    display: flex; /* 横並び */
    align-items: baseline;
}

.confirm-table dl:last-of-type {
    border-bottom: none;
}

.confirm-table dt { /* dt (ラベル) のスタイル */
    font-weight: bold;
    min-width: 150px; /* ラベルの幅を確保 */
    color: #555;
    flex-shrink: 0; /* 縮まないように */
}

.confirm-table dd { /* dd (値) のスタイル */
    flex-grow: 1; /* 残りのスペースを埋める */
    color: #333;
    word-wrap: break-word; /* 長い文字列の折り返し */
    margin-left: 0; /* ddのデフォルトマージンをリセット */
}
.confirm-form{
    text-align: center;
}

/* 送信成功/失敗メッセージ */
.status-message {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 5px;
    font-weight: bold;
    text-align: center;
}

.status-message.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.status-message.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* レスポンシブ対応 (スマートフォンの場合はフォームの幅などを調整) */
@media screen and (max-width: 767px) {
    #contactForm {
        margin: 20px 10px; /* 左右の余白を減らす */
        padding: 15px;
    }
    .form-buttons { /* ボタンのコンテナを縦並びに */
        flex-direction: column;
        gap: 10px; /* ボタン間の余白を調整 */
    }
    .form-buttons .back-button,
    .form-buttons .submit-button {
        width: 100%; /* スマホではボタンを全幅に */
                margin: 10px 0;

    }
    .confirm-table dl { /* 確認画面の項目を縦に並べる */
        flex-direction: column;
        align-items: flex-start;
    }
    .confirm-table dt {
        min-width: unset; /* 幅指定をリセット */
        margin-bottom: 5px;
    }
}