/* 全体の設定 */
body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f7f7f7;
    color: #444;  /* 黒から少し明るいグレーに変更 */
}

/* コンテナ全体 */
.container {
    max-width: 800px;  /* 幅を800pxに調整してバランスを取りやすく */
    margin: 40px auto;  /* 上下左右の余白を均等に */
    padding: 20px;
}

/* 見出し */
h1 {
    font-size: 32px;  /* 少し小さくしてバランスを取る */
    margin-bottom: 20px;
    text-align: center;  /* 見出しを中央揃えに */
    color: #222;
}

/* お問い合わせ確認メッセージのデザイン */
.info-message {
    font-size: 14px;  /* メッセージを少し小さくして目立たせすぎない */
    color: #555;  /* 文字色をグレーにして柔らかい印象に */
    margin-bottom: 20px;  /* フォームとの間に適切な余白を確保 */
    text-align: center;  /* 中央揃えでバランス良く配置 */
}

/* フォーム全体 */
form {
    background-color: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 30px;
}

/* 各ラベルとテキストボックスのデザイン */
.form-group {
    margin-bottom: 20px;
}

label {
    font-weight: bold;
    margin-bottom: 5px;  /* ラベルとテキストボックスの距離を広げる */
    margin-top: 10px;  /* ラベルの上部にも余白を追加 */
    display: block;
    color: #555;  /* ラベルの文字色も少しグレー寄りに */
}

input[type="text"], input[type="email"], textarea {
    color: #333;  /* 入力されたテキストの色も黒ではなく#333に */
    background-color: #f9f9f9;  /* 背景色を薄いグレーにしてコントラストを緩和 */
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-top: 5px;
    font-size: 16px;
    box-sizing: border-box;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* テキストボックスのフォーカス時の効果 */
input[type="text"]:focus, input[type="email"]:focus, textarea:focus {
    border-color: #6200ea;
    box-shadow: 0 0 5px rgba(98, 0, 234, 0.5);
    outline: none;
}

/* 内容テキストボックスの高さを調整 */
textarea {
    height: 200px;  /* 高さを200pxに拡大 */
}

/* プライバシーポリシーリンクのデザイン */
.privacy-policy-text {
    font-size: 14px;
    color: #555;
    text-align: center;
    margin-bottom: 20px;
}

.privacy-policy-text a {
    color: #6200ea;
    text-decoration: none;
}

.privacy-policy-text a:hover {
    text-decoration: underline;
}

/* reCAPTCHAの中央揃え */
.g-recaptcha {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;  /* 下部に適切な余白を追加 */
}

/* ボタン */
button {
    background-color: #6200ea;
    color: white;
    padding: 15px 30px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 18px;
    display: block;
    width: 100%;  /* ボタンを幅100%にして中央揃え */
    max-width: 200px;  /* 最大幅200pxに制限 */
    margin: 20px auto;  /* 上下左右に余白を追加してボタンを中央に */
}

button:hover {
    background-color: #4e00b7;
}

/* リンクのスタイル */
a {
    color: #6200ea;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

#message {
    font-size: 16px;
    margin-bottom: 10px;
}

/* レスポンシブデザイン */
@media (max-width: 768px) {
    .container {
        padding: 15px;
    }

    h1 {
        font-size: 24px;
    }

    input[type="text"], input[type="email"], textarea {
        font-size: 14px;
    }

    button {
        font-size: 16px;
        padding: 12px 25px;
    }
}