/* css/contact.css */
.contact-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 40px 20px;
    background-color: var(--white);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.contact-section {
    background-color: var(--light-bg);
    padding: 60px 20px;
    border-radius: 8px;
}

.contact-form label {
    display: block;
    margin-bottom: 4px;
    text-align: left;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 10px;
    font-size: 1em;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-top: 0;
    margin-bottom: 16px;
    box-sizing: border-box;
}

.contact-form textarea {
    resize: vertical;
    min-height: 180px;
}

/* Google reCAPTCHA の調整（オプション） */
.g-recaptcha {
    margin-bottom: 20px;
}


/* お問い合わせフォームの送信ボタンのスタイルを拡張 */
.contact-form .btn-accent {   
    /* 立体感を出すための影 */
    box-shadow: 0 6px 0 var(--primary-color); /* 下方向への影。 */
    
    /* アニメーションを滑らかにする */
    transition: all 0.1s ease-out; 
    -webkit-user-select: none; /* テキスト選択を無効化 */
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* ボタンが押された時のスタイル */
.contact-form .btn-accent:active {
    box-shadow: 0 2px 0 var(--primary-color); /* 影を小さくする */
    transform: translateY(4px); /* 下に移動させる量 */
    background-color: var(--primary-color); /* 押した時に少し濃い色にする */
}

/* フォーカス時のスタイル（キーボード操作用） */
.contact-form .btn-accent:focus {
    box-shadow: 0 0 0 3px rgba(var(--accent-color), 0.5);
}