/* お電話でのお問い合わせセクションのスタイル */
.contact_info_section {
    max-width: 800px;
    margin: 24px auto;
    padding: var(--spacing_lg);
    & h3{
        font-weight: bold; /* 太字 */
        font-size: 1.2rem; /* フォントサイズ */
        padding: var(--spacing_md); /* 上下の余白 */
        border-left: 4px solid #1300ff; /* 左側にカラフルなボーダー */
        background-color: #f0f0f0; /* 背景色 */
        text-align: left;
        margin-bottom: 8px; /* 下部の余白 */
    }
    & .contact_info_details {
        background-color: var(--white_color);
        padding: var(--spacing_md);
        border-radius: 4px; /* ボーダー半径を追加して、角を丸く */
        text-align: left;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        & p{
            font-size: 1rem; /* フォントサイズ */
            color: var(--black_color); /* テキストの色 */
            margin-bottom: var(--spacing_sm); /* 下部の余白 */
            & strong{
                display: block;
                font-size: 1rem; /* フォントサイズ */
                color: var(--black_color); /* テキストの色 */
            }
        }
    }
}
/* お問合せフォームのスタイル */
.form_section{
    max-width: 800px;
    margin: 0 auto;
    margin-bottom: var(--spacing_xl);
    padding: var(--spacing_lg);
    & h3{
        font-weight: bold; /* 太字 */
        font-size: 1.2rem; /* フォントサイズ */
        padding: var(--spacing_md); /* 上下の余白 */
        border-left: 4px solid #1300ff; /* 左側にカラフルなボーダー */
        background-color: #f0f0f0; /* 背景色 */
        text-align: left;
        margin-bottom: var(--spacing_sm); /* 下部の余白 */
    }
    & .contact_form_container {
        padding: var(--spacing_md);
        background-color: var(--white_color);
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        & .form_instructions{
            text-align: left; /* 左揃え */
            margin-bottom: var(--spacing_lg); /* 下マージン */
            & span{
                font-weight: bold;
            }
        }
        & form{
            text-align: center; /* フォーム全体を中央揃え */
            & .form_group{
                margin-bottom: var(--spacing_xl); /* フォームグループの下マージン */
                display: flex;
                flex-direction: column;
                align-items: flex-start; /* 左揃え */
                & label{
                    display: block;
                    margin-bottom: var(--spacing_sm);
                    text-align: left; /* 左揃え */
                }
                & :is(input,select,textarea){
                    width: 100%;
                    padding: var(--spacing_md);
                    border: 2px solid #ddd;
                    border-radius: 4px;
                    box-sizing: border-box; /* パディングを含めた幅計算 */
                }
                & .grade_radio_group{
                    display: flex;
                    flex-direction: column;
                    gap: 16px; /* ラジオボタンとラベル間のスペース */
                    & div{
                        display: flex;
                        align-items: center;
                        white-space: nowrap; /* ラベルのテキストが折り返されないように */
                        width: 80%;
                        & input[type="radio"]{
                            margin-right: var(--spacing_sm); /* ラジオボタンとラベルの間のスペース */
                        }
                        & label{
                            margin: 0; /* ラベルのマージンリセット */
                            white-space: nowrap; /* ラベルのテキストが折り返されないように */
                            font-size: 14px; /* フォントサイズ調整 */
                        }
                    }
                }
                & .required {
                    color: var(--accent_color01);
                }

                & textarea#message {
                    min-height: 150px;
                }
                & button{
                    background-color: var(--main_color);
                    color: var(--white_color);
                    border: none;
                    padding: 12px 24px;
                    border-radius: 4px;
                    cursor: pointer;
                    display: inline-block; /* ボタンをインラインブロックに設定 */
                    margin: 0 auto; /* ボタンを中央に配置 */
                    transition: background-color 0.3s ease; /* 背景色の遷移効果 */
                    &:hover{
                        background-color: var(--accent_color02); /* ホバー時の背景色 */
                        color: var(--black_color); /* ホバー時のテキストカラー */
                    }
                }
            }
        }
    }
}