/* 1. フォーム全体のコンテナ調整 */
#wpmem_reg {
max-width: 600px !important; /* フォームの最大横幅 */
margin: 10px auto !important; /* 上下の余白と中央寄せ */
padding: 50px !important; /* 内側の余白 */
background-color: #ffffff !important; /* 背景色 */
border-radius: 10px !important; /* 角の丸み */
box-shadow: 0 5px 15px rgba(0,0,0,0.1) !important; /* 外側の影 */
}

/* 2. フォームのタイトル（legendタグ） */
#wpmem_reg legend {
display: block !important; /* ブロック化 */
width: 100% !important; /* 横幅 */
font-size: 1.4rem !important; /* 文字サイズ */
font-weight: bold !important; /* 太字 */
padding-bottom: 10px !important; /* 下側の内側余白 */
margin-bottom: 35px !important; /* 次の項目との余白 */
border-bottom: 2px solid #eee !important; /* 下線の種類と色 */
color: #333 !important; /* 文字色 */
}

/* 3. 項目名（ラベル）のスタイル */
#wpmem_reg label.text,
#wpmem_reg label.textarea {
display: block !important; /* 縦並びにするためにブロック化 */
font-weight: bold !important; /* 太字 */
margin-bottom: 8px !important; /* 入力欄との余白 */
color: #444 !important; /* 文字色 */
}

/* 4. 入力項目（div）ごとの間隔 */
#wpmem_reg .div_text,
#wpmem_reg .div_textarea {
margin-bottom: 25px !important; /* 項目と項目の間の余白 */
}

/* 5. 入力フィールド（テキストボックス・テキストエリア） */
#wpmem_reg input.textbox,
#wpmem_reg textarea.textarea {
width: 100% !important; /* 横幅 */
padding: 12px !important; /* 入力欄内の余白 */
border: 1px solid #ccc !important; /* 枠線の太さと色 */
border-radius: 6px !important; /* 入力欄の角の丸み */
box-sizing: border-box !important; /* パディングを横幅に含める */
font-size: 16px !important; /* 文字サイズ */
background-color: #fafafa !important; /* 入力欄の背景色 */
}

/* 6. 送信ボタンを包むコンテナ（中央寄せ用） */
#wpmem_reg .button_div {
text-align: center !important; /* 中のボタンを中央に寄せる */
margin-top: 30px !important; /* 上の項目との余白 */
padding: 0 !important;
clear: both !important; /* 回り込み解除 */
}

/* 7. 送信ボタン本体のデザイン */
#wpmem_reg input.buttons[type=”submit”] {
display: inline-block !important; /* 中央寄せ */
width: auto !important; /* 横幅を中身に合わせる */
min-width: 250px !important; /* ボタンの最低横幅 */
padding: 15px 30px !important; /* ボタン内の余白（上下 左右） */
background-color: #0073aa !important; /* ボタンの色 */
color: #ffffff !important; /* ボタンの文字色 */
border: none !important; /* 枠線を消す */
border-radius: 50px !important; /* 角を丸める */
font-size: 18px !important; /* 文字サイズ */
font-weight: bold !important; /* 文字の太さ */
cursor: pointer !important; /* マウスホバー時に指マークにする */
transition: all 0.3s ease !important; /* 変化を滑らかにする */
-webkit-appearance: none !important; /* スマホ特有のスタイルをリセット */
}

/* 8. ボタンにマウスを乗せた時（ホバー） */
#wpmem_reg input.buttons[type=”submit”]:hover {
background-color: #005177 !important; /* ホバー時の背景色 */
transform: translateY(-2px) !important; /* 少し上に浮き上がらせる */
box-shadow: 0 4px 10px rgba(0,0,0,0.2) !important; /* ホバー時の影を強調 */
}

/* 9. 必須項目マーク（*） */
#wpmem_reg .req {
color: #ff4444 !important; /* アスタリスクの色 */
margin-left: 5px !important; /* 左側の余白 */
}

/* 10. 下部の「必須項目」注釈テキスト */
#wpmem_reg .req-text {
text-align: right !important; /* 右寄せ */
font-size: 0.9rem !important; /* 文字サイズ */
color: #888 !important; /* 色 */
margin-top: 10px !important; /* 上部の余白 */
}