/* =========================================================
   支部会員入会フォーム（/registration/）
   ・申込ページなので**ヘッダーもフッターも出口リンクを置かない**。
     ロゴだけの細いヘッダー（.hd-min）＋著作権1行のフッター（.ft-min）。
     これは現行ページの作り（フッター223バイト・リンク1本）を踏襲したもの。
   ・フォームのmarkup（id・name・data-*・トグルのJS）は一字も変えていない。
     月額/年額の切替は data-action / data-paymode / data-price / data-cycle を
     読んで差し替える既存のロジックがそのまま動く。
   ========================================================= */

/* ── 出口を作らないヘッダー・フッター ── */
.hd-min .hd-in{justify-content:center;padding:15px 30px}
.hd-min .logo{color:var(--ink);text-shadow:none}
.ft-min{padding:34px 0 30px}
.ft-min .cp{margin:0;text-align:center}
body .ft-min .cp a{color:#8e959c;text-decoration:none;font-size:12px;letter-spacing:.06em}
body .ft-min .cp a:hover{color:#dfe3e7}

/* ヘッダー（ヒーロー）も節の見出しも前置きも中央寄せ（菅さん指定 2026-08-14）。
   申込1本のページなので、左右にぶら下がるものが無く中央で揃えた方が締まる。
   ※サイトの既定は左揃え・全幅。このページ限定なので mc.css には入れない。 */
body #lead .wrap{text-align:center}
body #lead h1{margin-left:auto;margin-right:auto}
body .head-out{text-align:center}

/* ── 前置きの2段落 ── */
/* 前置きは**左そろえ**。中央寄せにするとヒーローのリード（左端）と
   節見出し（左端）の間で1ブロックだけ中に寄り、宙に浮いて見える（菅さん指摘 2026-08-14） */
/* ★ 箱は中央、文字は左揃え。**本文の文字を中央寄せにしない**（菅さん 2026-08-14）。
   中央寄せにしてよいのは見出し・ラベルだけ。 */
.rgx-prose{max-width:41rem;margin:0 auto;text-align:left;position:relative;z-index:2;
  font-family:var(--jp);color:var(--ink-b);-webkit-font-smoothing:antialiased}
.rgx-prose p{margin:0 0 22px;font-size:16.5px;line-height:2.1;letter-spacing:.02em}
.rgx-prose p:last-child{margin-bottom:0}

/* =========================================================
   入会フォーム（.mcf）。白地×水色。MyASPのmarkupは不変
   ========================================================= */
.mcf{max-width:41rem;margin:0 auto;padding:0;position:relative;z-index:2;
  font-family:var(--jp);color:var(--ink-b);-webkit-font-smoothing:antialiased}
.mcf *{box-sizing:border-box}
.mcf .myForm{margin:0;padding:0}

/* フォームの節だけ薄い水色の帯を敷き、その上に白いカードを置く。
   罫だけだと入力欄と地の白が同じ面になり、どこからがフォームか分かりにくかった
   （菅さん指摘 2026-08-14「フラットデザインで背景色を入れた方がよいかな」）。
   影・角丸は使わず、面の色だけで分ける。 */
.rgx-formsec{background:var(--bg2)}

/* 題の帯。元は紺のダークバー。水色のベタに置き換える（フラット） */
.mcf .mcf-head{background:var(--aq-t);border:none;padding:19px 26px}
.mcf .mcf-head h2{margin:0;font-size:clamp(14px,2.6vw,16px);font-weight:600;
  letter-spacing:.08em;line-height:1.6;color:#fff}
.mcf .mcf-body{background:#fff;border:1px solid var(--line);border-top:none;
  padding:32px 32px 36px}

/* ── 月額／年額のトグル ── */
.mcf .seg{display:flex;gap:0;margin:0 0 26px;border:1px solid var(--line);background:#fff}
.mcf .seg-btn{flex:1 1 0;-webkit-appearance:none;appearance:none;cursor:pointer;
  border:none;border-left:1px solid var(--line);background:#fff;color:var(--ink-2);
  padding:16px 8px 14px;line-height:1.3;font-family:inherit;text-align:center;
  transition:background .2s,color .2s}
.mcf .seg-btn:first-child{border-left:none}
.mcf .seg-btn .seg-name{display:block;font-size:15.5px;font-weight:700;letter-spacing:.08em}
.mcf .seg-btn .seg-sub{display:block;font-size:11.5px;font-weight:600;margin-top:5px;
  color:var(--ink-3);letter-spacing:.02em}
.mcf .seg-btn.is-active{background:var(--aq);color:#fff}
.mcf .seg-btn.is-active .seg-sub{color:rgba(255,255,255,.9)}
@media(hover:hover){.mcf .seg-btn:not(.is-active):hover{background:var(--bg2)}}
.mcf .seg-btn:active{filter:brightness(.96)}

/* ── 料金カード ── */
.mcf .plan-card{background:#eaf7fb;border:1px solid #cdeaf3;padding:24px 24px 22px;margin:0 0 28px}
.mcf .plan-price-row{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 12px}
.mcf .plan-price{font-family:var(--en);font-size:clamp(30px,7vw,40px);font-weight:700;
  color:var(--ink);line-height:1;letter-spacing:.01em}
.mcf .plan-price .yen{font-size:.46em;font-weight:700;margin-left:2px;font-family:var(--jp)}
.mcf .plan-cycle{font-size:13.5px;font-weight:600;color:var(--aq-t);letter-spacing:.02em}
/* 「年額なら実質2ヶ月分お得」は**月額を見ている人にこそ**出す。
   以前は .is-year のときだけ出していたので、すでに年額を選んだ人にしか
   届いていなかった（2026-08-14 菅さんと確認）。月額・年額どちらでも出す。 */
.mcf .plan-save{display:inline-flex;align-items:center;gap:8px;margin-top:14px;
  background:#fff;border:1px solid var(--pk);padding:10px 14px;
  font-size:13px;font-weight:700;color:var(--pk-t);letter-spacing:.02em}
.mcf .plan-save .save-ico{font-size:13px;color:var(--pk)}
.mcf .plan-meta{list-style:none;margin:18px 0 0;padding:16px 0 0;border-top:1px solid #cdeaf3;
  font-size:13.5px;line-height:1.95;color:var(--ink-b);letter-spacing:.02em}
.mcf .plan-meta li{position:relative;padding-left:20px;font-weight:500}
.mcf .plan-meta li::before{content:"";position:absolute;left:2px;top:.82em;
  width:6px;height:6px;border-radius:50%;background:var(--aq)}
body .mcf .plan-meta a{color:var(--aq-t);font-weight:700;text-decoration:none;
  border-bottom:1px solid var(--aq)}

/* ── お支払い方法（1種類だけの情報行） ── */
.mcf .pay-row{display:flex;align-items:center;gap:12px;
  border:1px solid var(--line);background:#fff;padding:16px 18px;margin:0 0 26px}
.mcf .pay-row input[type=radio]{width:18px!important;height:18px!important;margin:0!important;
  accent-color:var(--aq);flex:0 0 auto;position:relative;top:1px}
.mcf .pay-row .pay-txt{font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.5}
.mcf .pay-row .pay-txt small{display:block;font-weight:500;color:var(--ink-3);
  font-size:12.5px;margin-top:3px}

/* ── MyASP の入力単位（枠と背景を捨て、罫と余白で組む） ── */
.mcf .input_unit{margin:0 0 28px!important;padding:0!important;border:none!important;
  background:none!important;display:block!important;overflow:visible!important}
.mcf .my_column{display:block!important;width:100%!important;float:none!important;
  margin:0!important;padding:0!important}
.mcf .my_left{margin-bottom:10px!important}
.mcf .label_frame{margin:0!important;padding:0!important}
.mcf .required_color{background:none!important;background-color:transparent!important}

.mcf .form_input_label{font-weight:700!important;color:var(--ink)!important;
  font-size:15px!important;display:inline-flex!important;align-items:center;line-height:1.5}
.mcf .form_input_label.required::after{content:"必須";background:var(--aq);color:#fff;
  font-size:11px;font-weight:700;padding:3px 10px;margin-left:10px;letter-spacing:.06em}
.mcf .form_input_label.is-optional::after{content:"任意";background:#eef3f5;color:var(--ink-3);
  font-size:11px;font-weight:700;padding:3px 10px;margin-left:10px;letter-spacing:.06em}

.mcf .my_right input[type=text],
.mcf input.form_input_input[type=text]{width:100%!important;box-sizing:border-box!important;
  border:1px solid var(--line)!important;border-radius:0!important;
  padding:15px 16px!important;font-size:16px!important;line-height:1.6!important;
  background:#fff!important;color:var(--ink)!important;
  box-shadow:none!important;transition:border-color .2s,box-shadow .2s}
.mcf .my_right input[type=text]::placeholder{color:#aab6bd!important}
.mcf .my_right input[type=text]:focus{border-color:var(--aq)!important;
  box-shadow:0 0 0 4px rgba(20,190,220,.16)!important;outline:none!important}

.mcf .select_frame{position:relative}
.mcf .select_frame::after{content:"";position:absolute;right:17px;top:50%;width:9px;height:9px;
  border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);
  transform:translateY(-70%) rotate(45deg);pointer-events:none}
.mcf select.form_input_input{width:100%!important;box-sizing:border-box!important;
  -webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important;
  border:1px solid var(--line)!important;border-radius:0!important;
  padding:15px 40px 15px 16px!important;font-size:16px!important;line-height:1.6!important;
  height:auto!important;background:#fff!important;background-image:none!important;cursor:pointer;
  color:var(--ink)!important;-webkit-text-fill-color:var(--ink)!important;opacity:1!important;
  text-indent:0!important;text-shadow:none!important;box-shadow:none!important;
  transition:border-color .2s,box-shadow .2s}
.mcf select.form_input_input option{color:var(--ink)!important;background:#fff!important;
  -webkit-text-fill-color:var(--ink)!important}
.mcf select.form_input_input:focus{border-color:var(--aq)!important;
  box-shadow:0 0 0 4px rgba(20,190,220,.16)!important;outline:none!important}

/* ── 同意チェック2つ。押せる面を文字まで広げる ── */
.mcf .checkbox_frame{display:flex!important;align-items:flex-start;gap:12px;
  border:1px solid var(--line)!important;background:#fff!important;
  padding:16px 18px!important;margin:0!important}
.mcf .checkbox_input{flex:0 0 auto!important;margin:0!important;padding:0!important;
  width:auto!important;display:block!important}
.mcf .checkbox_input input[type=checkbox]{width:19px!important;height:19px!important;
  margin:0!important;accent-color:var(--aq);position:relative;top:2px}
.mcf .checkbox_label{flex:1 1 auto!important;margin:0!important;padding:0!important;
  width:auto!important;display:block!important}
.mcf .checkbox_label label{font-size:14.5px!important;font-weight:500!important;
  color:var(--ink-b)!important;line-height:1.8!important;letter-spacing:.02em;cursor:pointer}

/* ── 送信ボタン。mc.css の .btn と同じ表情 ── */
.mcf .submit,
.mcf .form_input_submit{text-align:center!important;margin:44px 0 0!important;
  padding:0!important;border:none!important;background:none!important}
.mcf input[type=submit]{-webkit-appearance:none!important;appearance:none!important;
  background:var(--aq)!important;color:#fff!important;
  font-size:15px!important;font-weight:700!important;letter-spacing:.08em;
  border:none!important;border-radius:0!important;
  padding:20px 96px!important;cursor:pointer;width:auto!important;
  box-shadow:none!important;
  transition:transform .3s cubic-bezier(.4,.4,0,1),box-shadow .3s,background .3s}
@media(hover:hover){
  .mcf input[type=submit]:hover{background:var(--aq-d)!important;transform:translateY(-3px);
    box-shadow:0 14px 32px rgba(20,190,220,.34)!important}
}
.mcf input[type=submit]:active{transform:translateY(0);filter:brightness(.94)}

.mcf .formError .formErrorContent{font-size:13px!important}

@media(max-width:600px){
  .rgx-prose p{font-size:15px}
  .mcf .mcf-head{padding:15px 18px}
  .mcf .mcf-body{padding:22px 18px 26px}
  .mcf .plan-card{padding:20px 18px 18px}
  .mcf .checkbox_frame{padding:14px 15px!important}
  .mcf input[type=submit]{width:100%!important;padding:19px 24px!important}
}