/* 全体のスタイル */
body,html {
    font-family: 'ヒラギノ角ゴ ProN', 'Zen Kaku Gothic New', sans-serif;
    margin: 0;
    background-color: #f8f8f8;
    overflow-x: hidden; /* 横スクロールを防ぐ */
    width: 100%;
    height: auto; /* 高さをコンテンツに合わせる */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* お問い合わせフォームセクションのスタイル */
.contact-section {
    padding: 80px 20px; /* 上下のパディングを増やして縦にスペースを確保 */
    background-color: #fff; /* 背景色を設定 */
    display: flex;
    justify-content: center;
    align-items: flex-start; /* 縦方向の開始位置に揃える */
    width: 100vw; /* ビューポート全体の幅を使用 */
    min-height: 100vh; /* セクション全体の高さを100vhに設定して縦長に */
    margin: 0 auto; /* 中央揃えに */
}

/* コンテナのスタイル */
.container {
    max-width: 800px; /* 最大幅を800pxに設定 */
    width: 100%; /* コンテナの幅を100%に */
    background-color: #F2F2F2;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 60px; /* コンテナ内のパディングを増やして余白を確保 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin: 0 20px; /* サイドに少し余白を追加 */
}

/* タイトル */
.section-title {
    font-size: 2.5rem; /* タイトルを少し大きく */
    color: #333;
    text-align: center;
    margin-bottom: 40px; /* タイトルの下に余白を増やす */
}

/* 各フォームグループのスタイル */
.form-group {
    display: flex; /* ラベルと入力フィールドを横並びに */
    flex-direction: row; /* 横並びに設定 */
    justify-content: flex-start; /* 左揃えにする */
    align-items: center; /* 垂直方向を中央に揃える */
    margin-bottom: 30px; /* フォーム各項目の間隔を広く */
}

/* 必須ラベルのスタイル */
.required {
    background-color: #ff0000;
    color: #fff;
    font-size: 0.8rem;
    padding: 2px 8px;
    margin-left: 10px;
}


/* ラベルのスタイル */
label {
    width: 180px; /* ラベルの幅を調整して少し狭く設定 */
    font-size: 1.1rem; /* フォントサイズを調整 */
    color: #333;
    margin-right: 20px; /* ラベルと入力フィールドの間隔を設定 */
}

/* 各フォームグループのスタイル */
.form-group {
    display: flex; /* ラベルと入力フィールドを横並びに */
    flex-direction: row; /* 横並びに設定 */
    justify-content: flex-start; /* 左揃えにする */
    align-items: center; /* 垂直方向を中央に揃える */
    margin-bottom: 30px; /* フォーム各項目の間隔を広く */
    padding-bottom: 10px; /* 区切り線と項目間の余白を追加 */
    border-bottom: 1px solid #3C3C3C; /* 各項目に区切り線を表示 */
}

/* 最後のフォームグループの区切り線を削除 */
.form-group:last-child {
    border-bottom: none; /* 最終項目の区切り線を非表示に */
}

/* ラベルのスタイル */
label {
    width: 200px; /* ラベルの幅を調整して少し狭く設定 */
    font-size: 1.1rem; /* フォントサイズを調整 */
    color: #333;
    margin-right: 20px; /* ラベルと入力フィールドの間隔を設定 */
}

/* テキスト入力フィールド */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
    flex: 1; /* 入力フィールドを残りの幅に広げる */
    padding: 15px; /* 入力フィールドのパディングを増やす */
    border: 1px solid #ddd;
    border-radius: 5px;
    box-sizing: border-box;
    font-size: 1.1rem; /* 入力フィールドのフォントサイズを大きく */
}


/* チェックボックスグループ */
.checkbox-group {
    flex-wrap: nowrap; /* 改行させずに1行に収める（必要に応じて変更） */
    gap: 15px; /* 各チェックボックス間のスペースを広げる */
}

.checkbox-group label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 1rem;
    white-space: nowrap; /* テキストの改行を防ぐ */
}

/* 各チェックボックスラベルの配置とスタイル */
.checkbox-group label {
    flex: none; /* 各ラベルがフレックスの幅を持たないように設定 */
    width: auto; /* ラベル幅を自動に設定 */
}

/* 送信ボタンのスタイル */
.submit-button {
    display: block;
    width: 50%; /* ボタンの幅を50%に設定 */
    padding: 20px; /* ボタンの上下パディングを増やす */
    background-color: #4cc313;
    color: #fff;
    font-size: 1.5rem; /* ボタンのフォントサイズを大きく */
    font-weight: bold;
    border: none;
    border-radius: 50px; /* ボタンを丸みのある形状に */
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
    margin: 30px auto; /* ボタンを中央揃え */
}

/* 送信ボタンのホバー効果 */
.submit-button:hover {
    background-color: #3b9e11;
    transform: translateY(-5px); /* ホバー時に少し浮かせる効果 */
}

/* プレースホルダーのスタイル */
input::placeholder,
textarea::placeholder {
    color: #999; /* 薄いグレーに設定 */
    font-weight: 300; /* 文字を細くする */
    opacity: 0.7; /* 透明度を少し増やしてさらに薄く見せる */
}


/* contact.css ファイルのレスポンシブ対応 */

/* デフォルトのスタイルは既存の通り */

@media only screen and (max-width: 768px) {

    .footer-container {
        flex-direction: column; /* コンテナ内の要素を縦並びに */
        align-items: center; /* 要素を中央に配置 */
    }

    .footer-logo {
        margin-bottom: 1rem; /* 画像の下に余白を追加 */
    }

    .footer-links {
        display: none;
    }

    .footer-links li {
        margin: 0.5rem 0; /* 各リンク間に余白を設定 */
    }

    .footer-links ul {
        display: none;
    }

    
    /* フォーム全体を小さい画面向けに調整 */
    .contact-section {
        padding: 40px 10px; /* パディングを減らす */
    }

    .container {
        padding: 30px; /* コンテナ内のパディングを減らす */
    }

    .form-group {
        flex-direction: column; /* フォーム項目を縦並びに */
        align-items: flex-start; /* 左揃えに */
        margin-bottom: 20px; /* 項目間隔を狭く */
    }

    label {
        width: 100%; /* ラベルの幅を100%に */
        margin-bottom: 10px; /* ラベルと入力欄の間隔を広く */
    }

    input[type="text"],
    input[type="email"],
    input[type="tel"],
    textarea {
        width: 100%; /* 入力欄を幅いっぱいに */
        font-size: 1rem; /* 入力欄のフォントサイズを小さく */
    }

    /* チェックボックスグループのスタイル調整 */
    .checkbox-group {
        flex-direction: column; /* 縦並びに変更 */
        align-items: flex-start;
    }

    /* ボタンを全幅に */
    .submit-button {
        width: 100%; /* ボタンの幅を100%に */
        font-size: 1.2rem; /* ボタンのフォントサイズを少し小さく */
    }
}

@media only screen and (max-width: 480px) {
    /* さらに小さい画面向けの調整 */
    .container {
        padding: 20px; /* パディングをさらに減らす */
    }

    .submit-button {
        font-size: 1rem; /* ボタンのフォントサイズを小さく */
        padding: 15px; /* ボタンのパディングを減らす */
    }

    .section-title {
        font-size: 1.8rem; /* タイトルのフォントサイズを小さく */
    }
}