/* =================================================

	フォーム全体の枠組み

================================================= */

.contact-form {

    max-width: 600px;    /* これが最大幅の指定です。400〜600pxが入力しやすいです */

    margin: 40px auto;   /* 左右中央に配置し、上下に余白を作る */

    padding: 0 20px;     /* スマホ時の左右の隙間を確保 */

}



/* ラベル（項目吊）のスタイル */

.contact-form label {

    display: block;      /* 項目吊を独立した行にする */

    margin-bottom: 8px;  /* 入力欄との隙間 */

    font-weight: bold;

    color: #333;

}



/* 「必須《マークなどの補助テキスト */

.contact-form label span {

    font-size: 0.8rem;

    color: #e11d48;      /* 警告用の赤色 */

    margin-left: 8px;

}



/* 入力テキストとテキストエリアの幅を統一 */

.contact-form input[type="text"],

.contact-form input[type="email"],

.contact-form textarea {

    width: 100%;         /* 親要素（600px）に対して100%広げる */

    padding: 12px;       /* 内側の余白を増やして入力しやすく */

    margin-bottom: 24px; /* 次の項目との間隔 */

    border: 1px solid #ccc;

    border-radius: 4px;  /* 角を少し丸く */

    box-sizing: border-box; /* paddingを含めて幅100%にするための呪文 */

    font-size: 16px;     /* iPhoneでズームされないための最低サイズ */

}



/* 送信ボタン */

.contact-form button {

    display: block;

    width: 200px;        /* ボタンは幅を少し絞る */

    margin: 20px auto;   /* ボタンを中央に */

    padding: 15px;

    background-color: #2563eb; /* ブランドカラーの青 */

    color: #fff;

    border: none;

    border-radius: 4px;

    font-weight: bold;

    cursor: pointer;

    transition: background 0.3s;

}



.contact-form button:hover {

    background-color: #1d4ed8; /* ホバー時に少し暗く */

}