/* 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.radio,
#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_radio ,
#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; /* 入力欄の背景色 */
}
#wpmem_reg .div_radio input[type="radio"] {
  opacity: 0;
  appearance: none;
  position: absolute;
}
#wpmem_reg .div_radio label.radio {
  display: inline-block !important;
  position: relative;
    font-weight: normal !important;
    padding-left: 26px;
    line-height: 2.2;
}

#wpmem_reg .div_radio label.radio::before {
  position: absolute;
  top: 8px;
  left: 0;
  width: 18px;
  height: 18px;
  border: 1px solid #eee;
  background: #fff;
  content: "";
  border-radius: 50%;
}

#wpmem_reg .div_radio label.radio::after {
  position: absolute;
  top: 11px;
  left: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #999;
  content: "";
  opacity: 0;
  transition: all 0.3s;
}
#wpmem_reg .div_radio input:focus + label::before {
  box-shadow: 0 0 4px #999;
}

#wpmem_reg .div_radio input:checked + label::after {
  opacity: 1;
}

#wpmem_reg label a {
    color: #2A92DD
}
#wpmem_reg label a:hover {
    opacity: 0.7;
}

/* profileから非表示 */
#wpmem_reg form#wpmem_profile_form label[for="policy"] {
    visibility: hidden;
}

/* 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; /* 上部の余白 */
}

/* 1. フォーム全体の外枠 */
#wpmem_login {
max-width: 500px !important; /* 横幅の最大値 */
margin: 40px auto !important; /* 上下の余白、左右は中央寄せ */
padding: 50px !important; /* 枠の内側の余白 */
background-color: #ffffff !important; /* 背景色 */
border-radius: 12px !important; /* 角を丸める */
box-shadow: 0 8px 20px rgba(0,0,0,0.1) !important; /* 影を周囲に配置 */
}

/* 2. タイトル部分（既存ユーザのログイン） */
#wpmem_login legend {
display: block !important; /* ブロック化 */
width: 100% !important; /* 横幅 */
font-size: 1.5rem !important; /* 文字の大きさ */
font-weight: bold !important; /* 太字 */
padding-bottom: 12px !important; /* 下側の内側余白 */
margin-bottom: 30px !important; /* タイトルの下に余白 */
border-bottom: 2px solid #f0f0f0 !important; /* タイトル下に線を引く */
color: #333 !important; /* 文字色 */
text-align: center !important; /* 中央寄せ */
}

/* 3. 各項目のラベル文字（ユーザー名やパスワードなど） */
#wpmem_login label {
display: block !important; /* ブロック化 */
font-weight: bold !important; /* 太字 */
margin-bottom: 8px !important; /* ラベルと入力欄の間に余白 */
color: #555 !important; /* 文字色 */
}

/* 4. 入力エリアを包む各ブロック */
#wpmem_login .div_text {
margin-bottom: 20px !important; /* 各入力項目の間に余白 */
}

/* 5. 入力フィールド本体（ユーザー名・パスワード・キャプチャ） */
#wpmem_login input.username,
#wpmem_login input.password,
#wpmem_login input#cloudsecurewp_captcha {
width: 100% !important; /* 入力欄の横幅 */
padding: 14px !important; /* 入力欄の中の余白 */
border: 1px solid #ddd !important; /* 枠線 */
border-radius: 6px !important; /* 入力欄の角を丸める */
box-sizing: border-box !important; /* パディングを含めて横幅を計算する */
font-size: 16px !important; /* 文字サイズ */
background-color: #f9f9f9 !important; /* 入力欄の背景色 */
}

/* 6. キャプチャ画像表示エリア */
.cloudsecure-wp-captcha-block {
margin: 20px 0 !important; /* 上下の余白 */
padding: 15px !important; /* 内部の余白 */
background: #fdfdfd !important; /* 背景色 */
border: 1px dashed #ccc !important; /* 点線の枠 */
border-radius: 6px !important; /* 角を丸める */
}

/* 7. ボタンとチェックボックスを包むエリア */
#wpmem_login .button_div {
text-align: center !important; /* 中央寄せ */
margin-top: 25px !important; /* 上の項目との余白 */
margin-bottom: 20px !important; /* 下のリンクとの余白 */
clear: both !important; /* 回り込み設定を解除 */
}

/* 8. 「ログイン状態を保存する」のチェックボックス本体 */
#wpmem_login input#rememberme {
width: 18px !important; /* チェックボックスの横幅 */
height: 18px !important; /* チェックボックスの縦幅 */
vertical-align: middle !important; /* 隣の文字と高さを合わせる（中央配置） */
margin-right: 5px !important; /* チェックボックスと文字の間の余白 */
}

/* 9. チェックボックスの横の文字ラベル */
#wpmem_login label[for="rememberme"] {
display: inline-block !important; /* 文字の横並び */
font-weight: normal !important; /* 太字にしない */
font-size: 14px !important; /* 文字サイズ */
cursor: pointer !important; /* マウスを乗せた時にクリックできるマーク */
margin-bottom: 0 !important; /* 下側の余白 */
}

/* 10. ログインボタンのデザイン */
#wpmem_login input.buttons[type="submit"] {
display: block !important; /* ブロック化 */
width: 100% !important; /* ボタンの横幅 */
padding: 15px !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; /* マウスを乗せた時に指マーク */
margin-top: 15px !important; /* チェックボックス上部の余白 */
transition: all 0.3s ease !important; /* 変化（色や影）を0.3秒かけて滑らかに */
-webkit-appearance: none !important; /* スマホブラウザ独自の装飾を無効化 */
}

/* 11. ボタンにマウスを乗せた時（ホバー） */
#wpmem_login input.buttons[type="submit"]:hover {
background-color: #005177 !important; /* 背景色 */
box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important; /* 影を付けて浮き上がらせる */
}

/* 12. パスワード忘れ・新規登録リンクのテキスト全体 */
#wpmem_login .link-text {
text-align: center !important; /* リンクを中央に寄せ */
margin-top: 15px !important; /* リンク間の余白 */
font-size: 14px !important; /* 文字サイズ */
}

/* 13. リンク内の「Aタグ（クリックできる部分）」 */
#wpmem_login .link-text a {
color: #0073aa !important; /* リンクの色 */
text-decoration: none !important; /* 下線を削除 */
font-weight: bold !important; /* リンクを太字 */
}

/* 14. リンクにマウスを乗せた時 */
#wpmem_login .link-text a:hover {
text-decoration: underline !important; /* マウスを乗せると下線を表示 */
}