/* =======================================================
   style.css: 見積もりフォーム (index.html) - デザイン最終版
   ======================================================= */

body {
    font-family: sans-serif;
    /* 💡 透過を維持し、親ページと色が重ならないように */
    background-color: transparent; 
    margin: 0;
    padding: 0; 
    line-height: 1.4; /* 行間を少し狭くし、コンパクトに見せる */
}

.container {
    max-width: 800px;
    margin: auto; 
    background: transparent; 
    padding: 0; 
    box-shadow: none;
}

/* 1. 項目セクション（form-section）の構造化と区切り線 */
.form-section {
    background-color: #ffffff; /* 💡 セクション背景を白に */
    padding: 15px 15px 10px 15px; /* 上下左右のパディングを定義 */
    margin-bottom: 25px; /* 💡 項目間の余白を明確化 */
    border: 1px solid #eee; /* 💡 セクション全体を薄い線で囲む */
    border-radius: 6px; /* 角丸 */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); /* 軽い影 */
}

/* 2. セクションヘッダー (h2) の強調と区切り線 */
.form-section h2 {
    font-size: 1.25em; /* タイトルを少し強調 */
    color: #2c3e50;
    margin-top: 0;
    margin-bottom: 15px;
    padding-bottom: 8px; 
    border-bottom: 2px solid #e74c3c; /* 💡 メインの区切り線（赤系） */
    padding-left: 0; /* 継承された余白をリセット */
}
h1, h3, h4 {
    color: #333;
    margin-left: 0;
    padding-left: 0; 
}

/* 3. フォームグループ（form-group）とラベルの調整 */
.form-group {
    margin-bottom: 12px; /* 💡 項目間の縦の余白を削減 */
    padding-left: 5px; 
}

label {
    display: block;
    margin-bottom: 3px; /* 💡 ラベルと入力欄の間の余白を削減 */
    color: #555;
    font-size: 0.95em;
}

/* 4. 入力欄のスタイル */
input[type="text"], 
input[type="email"],
textarea,
select 
{
    width: 100%; 
    padding: 8px; /* 💡 パディングを削減 */
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 16px; 
}

textarea {
    min-height: 60px; /* 高さを少し削減 */
}

input[type="radio"] {
    margin-right: 5px;
}

/* 5. ネストされたグループの調整 */
.nested-group {
    background-color: #f9f9f9; /* 💡 ネスト背景色 */
    padding: 10px 15px;
    margin-left: -5px; /* 💡 左側の余白を減らすことでコンパクトに */
    margin-top: 10px;
    border-left: 3px solid #3498db; /* 💡 青い縦線でネストを表現 */
    border-radius: 4px;
}
.nested-group h3, .nested-group h4 {
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 1px dashed #ccc; /* 点線で区切り */
}


/* 6. 必須マークとエラーの強調 */
.required {
    color: #e74c3c; /* 💡 必須マークを赤で強調 */
    margin-left: 4px;
}

.error-message {
    color: #e74c3c;
    font-size: 0.9em;
    font-weight: bold;
}

/* バリデーションエラー時の強調スタイル */
.error-label {
    color: #e74c3c !important; 
    font-weight: bold;
}

.form-section h2.error-label,
.form-section h3.error-label,
.form-section h4.error-label {
    color: #e74c3c !important;
}


/* 7. ボタンの調整 */
button {
    padding: 12px 20px; /* パディングを増やし、大きく見せる */
    background-color: #2ecc71; /* 緑系のボタン */
    color: #fff;
    border: none;
    border-radius: 6px; /* 角丸 */
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
    margin-top: 25px; 
    font-size: 1.2em;
    font-weight: bold;
    transition: background-color 0.2s;
}

button:hover {
    background-color: #27ae60;
}


/* =======================================================
   レスポンシブ調整 (モバイル最適化)
   ======================================================= */
@media (max-width: 820px) {
    
    /* フォームコンテナ: 全幅表示を維持 */
    .container {
        max-width: 100%;
        padding: 0; 
    }
    
    /* 1. フォームセクションの左右パディングを統一し、コンパクトに */
    .form-section {
        /* 左右の余白を少し確保しつつ、インラインスタイルを上書き */
        padding: 15px 15px 10px 15px !important; 
        margin-bottom: 20px;
    }
    
    /* 2. タイトル（h2など）のパディング調整 */
    .form-section h2 {
         /* 左右のパディングは form-section に任せるため、0にする */
         padding-left: 0;
         padding-right: 0;
         /* border-bottom は form-section のパディング内で行われる */
    }

    /* 3. フォームグループ（ラベルと入力欄）のパディング調整 */
    .form-group {
        /* 💡 左右のパディングを削除し、タイトにする */
        padding-left: 0;
        padding-right: 0;
        margin-bottom: 12px; /* 項目間のマージンを微調整 */
    }

    /* 4. ネストされたグループ（マンション詳細など）の調整 */
    .nested-group {
        /* モバイルでも左右にスペースを確保するため、左マージンを解除 */
        margin-left: 0; 
        padding: 10px;
    }
    
    /* 5. ラジオボタン/チェックボックスの行間を確保 */
    .form-group label {
        margin-bottom: 8px; /* タップしやすくするため、行間を少し開ける */
    }
    
    /* 6. ボタンを大きく、目立たせる */
    button {
        padding: 18px 20px;
        font-size: 1.3em;
    }
}