/* =========================
   RE'start 入会フォーム (PMPro) - FIX版
   これ1本に統一
   ========================= */

.rs-checkout{
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Hiragino Sans", "Noto Sans JP", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* --- full width section --- */
.rs-checkout.alignfull{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}

/* --- background --- */
.rs-checkout{
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  color: rgba(255,255,255,.92);
}
.rs-checkout .rs-bg{
  position:absolute; inset:0;
  background:
    radial-gradient(1200px 600px at 15% 30%, rgba(94, 255, 255, .18), transparent 60%),
    radial-gradient(900px 600px at 70% 40%, rgba(120, 170, 255, .20), transparent 55%),
    linear-gradient(90deg, #5fd7d7 0%, #4a84ff 100%);
}
.rs-checkout *{ box-sizing:border-box; }

/* --- layout --- */
.rs-checkout .rs-wrap{
  position: relative;
  min-height: 100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: clamp(12px, 2.2vw, 34px);
}
.rs-checkout .rs-panel{
  width: min(980px, calc(100vw - 24px));   /* モバイルの“窮屈さ”軽減 */
  padding: clamp(16px, 3vw, 42px);
  border-radius: clamp(24px, 4vw, 44px);
  border: 2px solid rgba(255,255,255,.68);
  background: rgba(255,255,255,.06);
  box-shadow: 0 20px 60px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* --- header --- */
.rs-checkout .rs-head{ text-align:center; margin-bottom: 18px; }
.rs-checkout .rs-brand{ margin:0; letter-spacing:.08em; font-size: 14px; opacity:.9; }
.rs-checkout .rs-title{
  margin: 10px 0 0;
  font-weight: 800;
  letter-spacing:.06em;
  font-size: clamp(26px, 3.2vw, 44px);
  line-height: 1.15;
  text-shadow: 0 10px 30px rgba(0,0,0,.18);
}
.rs-checkout__lead{ margin: 10px 0 0; opacity: .92; line-height: 1.7; }

/* --- iOS card --- */
.rs-checkout__content{
  margin-top: 18px;
  background: rgba(246, 250, 255, .94);
  color: #0b0b0f;
  border-radius: 24px;
  padding: clamp(16px, 2.2vw, 30px);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 18px 50px rgba(0,0,0,.14);
}
.rs-checkout__content *{ color: inherit; }
.rs-checkout__content a{ color:#0a84ff; }

/* =========================
   PMPro / テーマの崩し要因を強制リセット（超重要）
   ========================= */
.rs-checkout__content form,
.rs-checkout__content fieldset,
.rs-checkout__content .pmpro_card,
.rs-checkout__content .pmpro_card_content{
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* 1) フィールドのfloat/幅指定を全部殺す（入力が細くなる原因） */
.rs-checkout__content .pmpro_form_field,
.rs-checkout__content .pmpro_checkout-field,
.rs-checkout__content .pmpro_checkout-fields,
.rs-checkout__content .pmpro_form_fieldset{
  float: none !important;
  clear: both !important;
  width: 100% !important;
  max-width: none !important;
  display: block !important;
  margin-bottom: 16px !important; /* 余白アップ */
}

/* 2) 入力は絶対に100% */
.rs-checkout__content input,
.rs-checkout__content select,
.rs-checkout__content textarea{
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* 見出し */
.rs-checkout__content h2,
.rs-checkout__content h3{
  margin: 22px 0 10px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .01em;
  color:#111 !important;
}
.rs-checkout__content legend{ padding:0 !important; }

/* ラベル */
.rs-checkout__content label{
  display:block;
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(0,0,0,.72) !important;
}

/* 入力（iOS感） */
.rs-checkout__content input[type="text"],
.rs-checkout__content input[type="email"],
.rs-checkout__content input[type="password"],
.rs-checkout__content input[type="number"],
.rs-checkout__content input[type="tel"],
.rs-checkout__content select,
.rs-checkout__content textarea{
  border-radius: 14px;
  padding: 13px 14px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.92);
  font-size: 16px;  /* iOSズーム防止 */
  line-height: 1.25;
}
.rs-checkout__content input:focus,
.rs-checkout__content select:focus,
.rs-checkout__content textarea:focus{
  outline: none;
  border-color: rgba(10,132,255,.55);
  box-shadow: 0 0 0 4px rgba(10,132,255,.16);
}

/* PC: アカウント情報は2カラム（Joinformは全幅） */
@media (min-width: 860px){
  .rs-checkout__content #pmpro_user_fields,
  .rs-checkout__content #pmpro_checkout_box-user,
  .rs-checkout__content #pmpro_checkout_box-account{
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 16px 18px;
    align-items: start;
  }
  .rs-checkout__content #pmpro_user_fields > legend,
  .rs-checkout__content #pmpro_user_fields > h2,
  .rs-checkout__content #pmpro_user_fields > h3{
    grid-column: 1 / -1;
  }
  .rs-checkout__content .pmpro_checkout-field-username,
  .rs-checkout__content .pmpro_checkout-field-user_login,
  .rs-checkout__content .pmpro_form_field-username,
  .rs-checkout__content .pmpro_checkout-field-bemail,
  .rs-checkout__content .pmpro_form_field-bemail,
  .rs-checkout__content #rs-joinform{
    grid-column: 1 / -1;
  }
}

/* Show Password を“リンク風”に */
.rs-checkout__content button[id*="show"],
.rs-checkout__content button[id*="hide"],
.rs-checkout__content button[class*="show"],
.rs-checkout__content button[class*="hide"]{
  border: 0 !important;
  background: transparent !important;
  color: #0a84ff !important;
  padding: 6px 8px !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  font-size: 8px !important;
  box-shadow: none !important;
}
.rs-checkout__content button[id*="show"]:hover{
  background: rgba(10,132,255,.10) !important;
}

/* =========================
   入会フォーム（あなたの .rs-joinform）だけを確実に整形
   ========================= */
.rs-checkout__content .rs-joinform{ margin-top: 4px; }

/* 3項目（紹介者/都道府県/年齢）：PCは3カラム、SPは1カラム */
.rs-checkout__content .rs-joinform__grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 10px;
}
@media (min-width: 860px){
  .rs-checkout__content .rs-joinform__grid{
    grid-template-columns: repeat(3, minmax(0,1fr));
  }
}

.rs-checkout__content .rs-joinform__label{
  display:block;
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 800;
  color: rgba(0,0,0,.72);
}
.rs-checkout__content .rs-joinform__help{
  display:block;
  margin-top: 6px;
  font-size: 12px;
  color: rgba(0,0,0,.55);
}

/* radio/checkbox：`:has()`なしで確実に“選択行”化（ここが崩れ修正の本体） */
.rs-checkout__content .rs-joinform__radios > label,
.rs-checkout__content label.rs-joinform__check{
  display: grid !important;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: start;
  margin: 10px 0 !important;
  padding: 12px 12px !important;
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  border-radius: 14px !important;
  text-align: left !important;
  line-height: 1.35;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.rs-checkout__content .rs-joinform__radios > label input,
.rs-checkout__content label.rs-joinform__check input{
  margin: 3px 0 0 !important;
  width: 18px !important;
  height: 18px !important;
}
.rs-checkout__content input[type="radio"],
.rs-checkout__content input[type="checkbox"]{
  accent-color: #0a84ff;
}

/* 規約details */
.rs-checkout__content .rs-terms summary{
  font-weight: 800;
  color: rgba(0,0,0,.74);
  cursor: pointer;
  margin-bottom: 10px;
}
.rs-checkout__content .rs-terms__box{
  margin-top: 10px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.88);
  max-height: 220px;
  overflow: auto;
  font-size: 13px;
  line-height: 1.6;
}

/* =========================
   消したい要素：Membership/ログイン案内/メール確認
   ========================= */
.rs-checkout #pmpro_pricing_fields,
.rs-checkout #pmpro_checkout_box_level,
.rs-checkout #pmpro_checkout_box-level,
.rs-checkout #pmpro_checkout_box-levels,
.rs-checkout .pmpro_checkout-fieldset-level,
.rs-checkout .pmpro_level_description_text,
.rs-checkout #pmpro_level_cost,
.rs-checkout #pmpro_level_name,
.rs-checkout .pmpro_card_level{
  display:none !important;
}

/* ログイン案内系（残る環境があるので多めに） */
.rs-checkout #pmpro_login_wrap,
.rs-checkout #pmpro_login_span,
.rs-checkout #pmpro_login_link,
.rs-checkout .pmpro_login_wrap,
.rs-checkout .pmpro_member_log_in,
.rs-checkout p.pmpro_member_log_in,
.rs-checkout #pmpro_logged_in_as,
.rs-checkout .pmpro_logged_in_as,
.rs-checkout #pmpro_checkout_box-login{
  display:none !important;
}

/* メール確認2個目 */
.rs-checkout #bemail2,
.rs-checkout #bconfirmemail,
.rs-checkout .pmpro_checkout-field-bemail2,
.rs-checkout .pmpro_checkout-field-bconfirmemail,
.rs-checkout .pmpro_form_field-bemail2,
.rs-checkout .pmpro_form_field-bconfirmemail{
  display:none !important;
}

/* =========================
   送信ボタン：中央寄せ（SPは横幅100%）
   ========================= */
.rs-checkout__content .pmpro_submit{
  display:flex !important;
  justify-content:center !important;
  margin-top: 18px !important;
}
.rs-checkout__content #pmpro_btn-submit,
.rs-checkout__content #pmpro_btn-confirm,
.rs-checkout__content .pmpro_btn-submit{
  float:none !important;
  display:inline-flex !important;
  justify-content:center !important;
  align-items:center !important;
  margin: 10px auto 0 !important;
  padding: 13px 18px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(10,132,255,.35) !important;
  background: rgba(10,132,255,.95) !important;
  color:#fff !important;
  font-weight: 800 !important;
  box-shadow: 0 10px 22px rgba(10,132,255,.18);
}

@media (max-width: 640px){
  .rs-checkout .rs-wrap{ padding: 10px; }
  .rs-checkout .rs-panel{ width: calc(100vw - 18px); padding: 14px; border-radius: 28px; }
  .rs-checkout__content{ padding: 14px; border-radius: 22px; }

  .rs-checkout__content #pmpro_btn-submit,
  .rs-checkout__content #pmpro_btn-confirm{
    width: 100% !important;
    max-width: 480px !important;
  }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .rs-checkout *{ transition:none !important; animation:none !important; }
}

/* =========================
   FIX: デスクトップで半分に寄る/幅が細くなる問題（親要素をフル幅化）
   ========================= */
.rs-checkout__content .pmpro,
.rs-checkout__content #pmpro_form,
.rs-checkout__content #pmpro_user_fields,
.rs-checkout__content .pmpro_card,
.rs-checkout__content .pmpro_card_content,
.rs-checkout__content .pmpro_form_fields{
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

/* SWELL/PMProのfloat系を潰して “入力が細くなる” のを止める */
.rs-checkout__content .pmpro_form_field{
  width: 100% !important;
  max-width: none !important;
  float: none !important;
  clear: both !important;
}
.rs-checkout__content .pmpro_form_field label{
  float: none !important;
  width: 100% !important;
}

/* password + password2 の2カラムを綺麗に（pmpro_cols-2対策） */
.rs-checkout__content .pmpro_cols-2{
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 16px;
  width: 100% !important;
}
@media (min-width: 860px){
  .rs-checkout__content .pmpro_cols-2{
    grid-template-columns: 1fr 1fr;
  }
}

/* joinform冒頭3項目（紹介者/都道府県/年齢）をPCで横並び・SPは縦 */
.rs-checkout__content .rs-joinform__grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  width: 100%;
  margin-top: 18px;
}
@media (min-width: 860px){
  .rs-checkout__content .rs-joinform__grid{
    grid-template-columns: 1.2fr 1fr 0.6fr;
    align-items: start;
  }
}

/* =========================
   iOSっぽいタイポ＆動き（軽め）
   ========================= */
.rs-checkout{
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Hiragino Sans",
               "Noto Sans JP", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.rs-checkout__content{
  -webkit-font-smoothing: antialiased;
}

/* 入力ブロック：フォーカス時に少し浮く */
.rs-checkout__content .pmpro_form_field,
.rs-checkout__content .rs-joinform__field{
  transition: transform .18s cubic-bezier(.2,.8,.2,1);
}
.rs-checkout__content .pmpro_form_field:focus-within,
.rs-checkout__content .rs-joinform__field:focus-within{
  transform: translateY(-1px);
}

/* =========================
   iOS: 選択行UI（joinformだけに限定して安全に）
   ========================= */
.rs-checkout__content .rs-joinform__radios label,
.rs-checkout__content .rs-joinform__check,
.rs-checkout__content .rs-joinform__agree{
  display: flex !important;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  margin: 10px 0 !important;
  padding: 12px 12px !important;
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  border-radius: 14px !important;
  line-height: 1.45;
  word-break: normal;
  overflow-wrap: anywhere;
  transition: transform .15s cubic-bezier(.2,.8,.2,1),
              box-shadow .2s cubic-bezier(.2,.8,.2,1),
              border-color .2s cubic-bezier(.2,.8,.2,1),
              background .2s cubic-bezier(.2,.8,.2,1);
}
.rs-checkout__content .rs-joinform__radios label input,
.rs-checkout__content .rs-joinform__check input,
.rs-checkout__content .rs-joinform__agree input{
  margin: 2px 0 0 !important;
  flex: 0 0 auto;
}

/* チェック時ハイライト（対応ブラウザ） */
@supports(selector(:has(*))){
  .rs-checkout__content .rs-joinform__radios label:has(input:checked),
  .rs-checkout__content .rs-joinform__check:has(input:checked),
  .rs-checkout__content .rs-joinform__agree:has(input:checked){
    border-color: rgba(10,132,255,.55) !important;
    background: rgba(10,132,255,.07) !important;
    box-shadow: 0 10px 20px rgba(10,132,255,.10);
  }
}

/* タップ時の“押し込み” */
.rs-checkout__content .rs-joinform__radios label:active,
.rs-checkout__content .rs-joinform__check:active,
.rs-checkout__content .rs-joinform__agree:active{
  transform: translateY(1px) scale(.995);
}

/* 送信ボタン：押し込み */
.rs-checkout__content #pmpro_btn-submit{
  transition: transform .12s cubic-bezier(.2,.8,.2,1),
              box-shadow .2s cubic-bezier(.2,.8,.2,1),
              filter .2s cubic-bezier(.2,.8,.2,1);
}
.rs-checkout__content #pmpro_btn-submit:active{
  transform: translateY(1px);
  filter: brightness(.98);
  box-shadow: 0 6px 14px rgba(10,132,255,.16);
}

/* ログイン案内（pmpro_card_actions）を完全に消す */
.rs-checkout__content .pmpro_card_actions{
  display: none !important;
}

/* =========================
   RS PATCH：レイアウト/余白/色/動き（追記）
   ========================= */

/* iOSっぽい色変数 */
.rs-checkout__content{
  --rs-text:#1c1c1e;
  --rs-muted:#6c6c70;
  --rs-border:rgba(60,60,67,.18);
  --rs-surface:rgba(255,255,255,.92);
  --rs-accent:#0a84ff;
  --rs-danger:#ff3b30;
  color: var(--rs-text);
  -webkit-font-smoothing: antialiased;
}

/* 文字色を全フォームで統一（PMPro側も含む） */
.rs-checkout__content,
.rs-checkout__content .pmpro,
.rs-checkout__content .pmpro *{
  color: var(--rs-text);
}
.rs-checkout__content label,
.rs-checkout__content .pmpro_form_label,
.rs-checkout__content .rs-joinform__label{
  color: var(--rs-muted) !important;
}

/* 必須 * */
.rs-checkout__content .rs-req{
  color: var(--rs-danger);
  font-weight: 900;
  margin-left: .35em;
}

/* ✅ デスクトップで「左に寄って右が空く」原因つぶし */
.rs-checkout__content .pmpro_card,
.rs-checkout__content .pmpro_card_content,
.rs-checkout__content .pmpro_form_fields{
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

/* フィールドの余白：詰まり解消（質問と選択肢の距離も） */
.rs-checkout__content .rs-joinform__field{
  margin-top: 22px;
}
.rs-checkout__content .rs-joinform__label{
  display:block;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 800;
}

/* ラジオ/チェックの並び：gapで一定の間隔を確保 */
.rs-checkout__content .rs-joinform__radios{
  display:flex;
  flex-direction:column;
  gap: 12px;
}
.rs-checkout__content .rs-joinform__check{
  display:flex;
  align-items:flex-start;
  gap: 12px;
  margin: 0;
  padding: 14px 14px;
  background: var(--rs-surface) !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  border-radius: 14px !important;
  line-height: 1.5;
}

/* ラジオも同じ“行”デザインに寄せる（:has対応ブラウザは選択時にiOSっぽく） */
.rs-checkout__content .rs-joinform__radios label{
  display:flex !important;
  align-items:flex-start !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 14px 14px !important;
  background: var(--rs-surface) !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  border-radius: 14px !important;
  line-height: 1.5;
}
.rs-checkout__content label:has(input[type="radio"]:checked),
.rs-checkout__content label:has(input[type="checkbox"]:checked){
  border-color: rgba(10,132,255,.45) !important;
  box-shadow: 0 0 0 4px rgba(10,132,255,.14) !important;
}

/* 入力UIをiOS寄せ＋動き */
.rs-checkout__content input,
.rs-checkout__content select,
.rs-checkout__content textarea{
  background: var(--rs-surface) !important;
  border-color: var(--rs-border) !important;
  color: var(--rs-text) !important;
  transition: border-color .18s ease, box-shadow .18s ease, transform .08s ease, background-color .18s ease;
}
.rs-checkout__content input:focus,
.rs-checkout__content select:focus,
.rs-checkout__content textarea:focus{
  border-color: rgba(10,132,255,.55) !important;
  box-shadow: 0 0 0 4px rgba(10,132,255,.16) !important;
}

/* ✅ PC：フォーム全体をちゃんと2カラムで使う（gridを当てる場所を修正） */
@media (min-width: 860px){
  .rs-checkout__content .pmpro_form_fields{
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 16px 18px;
    align-items: start;
  }

  /* 見出しは全幅 */
  .rs-checkout__content .pmpro_form_legend,
  .rs-checkout__content .pmpro_form_legend *{
    grid-column: 1 / -1;
  }

  /* username/email/joinform は全幅 */
  .rs-checkout__content .pmpro_form_field-username,
  .rs-checkout__content .pmpro_form_field-bemail,
  .rs-checkout__content .rs-joinform{
    grid-column: 1 / -1;
  }

  /* password 2つは横並び（PMProの.pmpro_cols-2 を全幅化して中で2カラム） */
  .rs-checkout__content .pmpro_cols-2{
    grid-column: 1 / -1;
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 16px 18px;
  }
}

/* ✅ Show Password：小さく、右寄せ、主張弱め */
.rs-checkout__content .pmpro_form_field-password-toggle{
  display:flex;
  justify-content:flex-end;
  margin-top: 6px;
}
.rs-checkout__content .pmpro_btn-password-toggle{
  font-size: 12px !important;
  padding: 4px 8px !important;
  border-radius: 10px !important;
  color: var(--rs-accent) !important;
}
.rs-checkout__content .pmpro_btn-password-toggle svg{
  width: 16px !important;
  height: 16px !important;
}

/* ✅ 送信ボタン：中央寄せ（PC/SP共通） */
.rs-checkout__content .pmpro_form_submit,
.rs-checkout__content #pmpro_submit_span{
  text-align:center !important;
}
.rs-checkout__content #pmpro_btn-submit{
  display:inline-flex !important;
  margin: 14px auto 0 !important;
}

/* iOSっぽい押下感 */
.rs-checkout__content #pmpro_btn-submit:active{
  transform: translateY(1px);
  box-shadow: 0 6px 14px rgba(10,132,255,.18) !important;
}

/* カードの出現アニメ（控えめ） */
.rs-checkout__content{
  animation: rs-pop .42s ease-out both;
}
@keyframes rs-pop{
  from{ opacity:0; transform: translateY(8px); }
  to{ opacity:1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .rs-checkout__content{ animation:none; }
}

/* ✅ 左寄りの原因：#pmpro_user_fields の2カラムgridを潰す */
@media (min-width: 860px){
  .rs-checkout__content #pmpro_user_fields{
    display: block !important;
  }
  /* 念のため、cardも全幅化 */
  .rs-checkout__content #pmpro_user_fields > .pmpro_card{
    width: 100% !important;
  }
}


/* spanが幅を持って崩すのを防ぐ */
.rs-checkout__content #pmpro_submit_span{
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
}

/* ボタン自体も中央に */
.rs-checkout__content #pmpro_btn-submit,
.rs-checkout__content #pmpro_btn-confirm,
.rs-checkout__content .pmpro_btn-submit-checkout{
  margin: 0 auto !important;
}

/* SPは気持ち大きめ＆最大幅 */
@media (max-width: 640px){
  .rs-checkout__content #pmpro_btn-submit,
  .rs-checkout__content #pmpro_btn-confirm,
  .rs-checkout__content .pmpro_btn-submit-checkout{
    width: 100% !important;
    max-width: 420px !important;
  }
}

/* =========================
   FIX: 必須 *（利用規約が改行される問題）
   ========================= */

/* もし「フィールド全体」に * を出すCSSが既にある場合、それを無効化 */
.rs-checkout__content .rs-joinform__terms::after{
  content: none !important;
}

/* 利用規約同意ラベルの末尾に * を“同じ行”で出す */
.rs-checkout__content .rs-joinform__agree{
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: nowrap !important;
}
.rs-checkout__content .rs-joinform__agree::after{
  content: " *" !important;
  color: #ff3b30 !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

/* =========================
   FIX: チェック/ラジオと文字の高さ（縦位置）を揃える
   ========================= */

.rs-checkout__content .rs-joinform__radios label,
.rs-checkout__content label.rs-joinform__check{
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  line-height: 1.25 !important;
  min-height: 52px !important;  /* 行の高さを揃える */
}

/* checkbox/radio自体のサイズと位置を固定（ズレ防止） */
.rs-checkout__content .rs-joinform__radios input[type="radio"],
.rs-checkout__content label.rs-joinform__check input[type="checkbox"]{
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  flex: 0 0 18px !important;
  align-self: center !important;
}

/* =========================
   FIX: 入力/選択の高さを統一（selectだけズレる対策）
   ========================= */

.rs-checkout__content input[type="text"],
.rs-checkout__content input[type="email"],
.rs-checkout__content input[type="password"],
.rs-checkout__content input[type="number"],
.rs-checkout__content select{
  min-height: 48px !important;
  height: 48px !important;
  line-height: 1.2 !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

/* textareaは高さ固定しない */
.rs-checkout__content textarea{
  min-height: 96px !important;
  height: auto !important;
}

/* =========================
   ついで：Show Password を小さく（iOSっぽく控えめ）
   ========================= */
.rs-checkout__content .pmpro_form_field-password-toggle .pmpro_btn-password-toggle{
  font-size: 12px !important;
  padding: 4px 8px !important;
  border-radius: 10px !important;
}
.rs-checkout__content .pmpro_form_field-password-toggle svg{
  width: 16px !important;
  height: 16px !important;
}

/* =========================
   追加パッチ（末尾に追記）
   ========================= */

/* 必須マーク：rs-is-required だけに出す */
#rs-joinform .rs-is-required{
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
#rs-joinform .rs-is-required::after{
  content:"*";
  color:#ff3b30;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

/* 利用規約チェック：二重「*」の原因になりがちな疑似要素をリセットして1個に固定 */
#rs-joinform .rs-joinform__agree::before,
#rs-joinform .rs-joinform__agree::after{
  content: none !important;
}
#rs-joinform .rs-joinform__agree.rs-is-required::after{
  content:"*" !important;
  color:#ff3b30;
  font-weight: 800;
  line-height: 1;
  margin-left: 6px;
  white-space: nowrap;
}

/* 質問ブロック同士の「ゆとり」 */
#rs-joinform .rs-joinform__field{
  margin-top: 30px;
}
#rs-joinform .rs-joinform__label{
  margin-bottom: 12px;
}

/* 選択肢と次の質問が近い問題：gapで間隔管理 */
#rs-joinform .rs-joinform__radios{
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}
#rs-joinform .rs-joinform__radios > label{
  margin: 0 !important;
}

/* サポート（チェック）も同じ“ゆとり”にする（:has 対応ブラウザ用） */
#rs-joinform .rs-joinform__field:has(.rs-joinform__check){
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#rs-joinform .rs-joinform__check{
  margin: 0 !important;
}

/* 規約ブロックも余白を統一（:has 対応ブラウザ用） */
#rs-joinform .rs-joinform__field:has(.rs-terms){
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 高さ・整列：入力/セレクト/ラジオ/チェックを揃える */
.rs-checkout__content input[type="text"],
.rs-checkout__content input[type="email"],
.rs-checkout__content input[type="password"],
.rs-checkout__content input[type="number"],
.rs-checkout__content select{
  min-height: 48px;
}

.rs-checkout__content label:has(input[type="radio"]),
.rs-checkout__content label:has(input[type="checkbox"]){
  min-height: 56px;
  align-items: center !important;
}

.rs-checkout__content label:has(input[type="radio"]) input,
.rs-checkout__content label:has(input[type="checkbox"]) input{
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}
/* =========================================================
   FIX: 必須マークの二重表示を止める（過去の疑似要素を全殺し）
   ========================================================= */
.rs-checkout__content #rs-joinform .rs-joinform__label::before,
.rs-checkout__content #rs-joinform .rs-joinform__label::after,
.rs-checkout__content #rs-joinform .rs-joinform__field::before,
.rs-checkout__content #rs-joinform .rs-joinform__field::after,
.rs-checkout__content #rs-joinform label::before,
.rs-checkout__content #rs-joinform label::after{
  content: none !important;
}

/* 必須「*」の見た目（iOSっぽい赤） */
.rs-checkout__content .rs-req{
  display:inline-block;
  margin-left:.35em;
  color:#ff3b30;
  font-weight:800;
  line-height:1;
  transform: translateY(-0.5px);
}

/* ラベル内で * が改行されないように */
.rs-checkout__content #rs-joinform .rs-joinform__label{
  display:inline-flex;
  align-items:center;
  gap:.25em;
}

/* PMPro側の必須 * も色だけ統一 */
.rs-checkout__content .pmpro_asterisk{
  color:#ff3b30 !important;
}

/* =========================================================
   FIX: 質問ブロック同士の余白（窮屈感の解消）
   ========================================================= */
.rs-checkout__content #rs-joinform{
  margin-top: 12px;
}

.rs-checkout__content #rs-joinform .rs-joinform__field + .rs-joinform__field{
  margin-top: 28px; /* ← ブロック間の“ゆとり” */
}

.rs-checkout__content #rs-joinform .rs-joinform__label{
  margin-bottom: 12px;
}

.rs-checkout__content #rs-joinform .rs-joinform__radios{
  margin-top: 10px;
}

.rs-checkout__content #rs-joinform .rs-joinform__radios > label,
.rs-checkout__content #rs-joinform label.rs-joinform__check{
  margin: 12px 0 !important; /* 選択肢同士も少しゆったり */
  padding: 14px 14px !important;
}

/* =========================================================
   FIX: チェックボックス・セレクト・文章の“高さ/中央揃え”違和感を解消
   ========================================================= */

/* 入力/セレクトの高さを統一 */
.rs-checkout__content input[type="text"],
.rs-checkout__content input[type="email"],
.rs-checkout__content input[type="password"],
.rs-checkout__content input[type="number"],
.rs-checkout__content input[type="tel"],
.rs-checkout__content select{
  min-height: 48px;
}

/* ラジオ/チェックのサイズと位置 */
.rs-checkout__content #rs-joinform input[type="radio"],
.rs-checkout__content #rs-joinform input[type="checkbox"]{
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin: 0 !important;
}

/* 行（選択肢）の縦センターを揃える */
.rs-checkout__content #rs-joinform .rs-joinform__radios > label,
.rs-checkout__content #rs-joinform label.rs-joinform__check{
  display:flex !important;
  align-items:center !important;
  gap: 12px !important;
  line-height: 1.35 !important;
  min-height: 52px;
}

/* =========================================================
   iOSっぽい “押し込み/選択” の動き
   ========================================================= */
.rs-checkout__content #rs-joinform .rs-joinform__radios > label,
.rs-checkout__content #rs-joinform label.rs-joinform__check,
.rs-checkout__content input,
.rs-checkout__content select,
.rs-checkout__content textarea{
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  -webkit-tap-highlight-color: transparent;
}

.rs-checkout__content #rs-joinform .rs-joinform__radios > label:active,
.rs-checkout__content #rs-joinform label.rs-joinform__check:active{
  transform: scale(.99);
}

/* 選択中の行をiOSっぽく薄くハイライト（Safariは :has 対応） */
.rs-checkout__content #rs-joinform .rs-joinform__radios > label:has(input:checked),
.rs-checkout__content #rs-joinform label.rs-joinform__check:has(input:checked){
  border-color: rgba(10,132,255,.35) !important;
  background: rgba(10,132,255,.08) !important;
  box-shadow: 0 10px 22px rgba(10,132,255,.08);
}

/* Show Password を小さく */
.rs-checkout__content .pmpro_form_field-password-toggle button{
  font-size: 12px !important;
  padding: 6px 8px !important;
}
.rs-checkout__content .pmpro_form_field-password-toggle svg{
  width: 16px !important;
  height: 16px !important;
}

/* ① 選択肢（ラジオ/チェック）は「詰める」 */
.rs-checkout__content #rs-joinform .rs-joinform__radios > label,
.rs-checkout__content #rs-joinform label.rs-joinform__check{
  margin: 4px 0 !important;     /* ←ここで詰める */
  padding: 12px 14px !important; /* 見た目は維持 */
}

/* ② 設問ブロック同士は「ゆったり」 */
/* （紹介者/都道府県/年齢 の3つ並び＝gridの“次”から、各ブロック間に余白） */
.rs-checkout__content #rs-joinform .rs-joinform__grid + .rs-joinform__field{
  margin-top: 32px !important;
}
.rs-checkout__content #rs-joinform > .rs-joinform__field + .rs-joinform__field{
  margin-top: 32px !important;
}

/* 質問文（見出し）→ 選択肢/入力 の間を詰める */
.rs-checkout__content #rs-joinform .rs-joinform__label{
  display: block;
  margin: 0 0 6px !important; /* ←ここを 4〜8px で調整 */
}

/* ラジオ/チェックの“最初の1個目”だけ、上の余白を0にして詰める */
.rs-checkout__content #rs-joinform .rs-joinform__radios > label:first-child,
.rs-checkout__content #rs-joinform label.rs-joinform__check:first-of-type{
  margin-top: 0 !important;
}