/* UM 非依存の認証フォーム（/register/ ・ /login/）共通スタイル。
   profile-registration.php / profile-login.php で共用。 */
.hs-auth-form{max-width:460px;margin:24px auto;padding:0 20px;display:flex;flex-direction:column;gap:20px;}
/* 項目見出しはテーマ標準の白文字にする。Designで文字色を指定した場合は、
   functions.php がこの指定を !important で設定色へ上書きする。入力欄内の文字は
   下の input 指定で黒のまま保つ。 */
.hs-auth-label{display:flex;flex-direction:column;gap:8px;color:#fff;font-size:17px;font-weight:700;text-align:left;}
.hs-auth-form input{font-size:18px;padding:15px;border-radius:8px;border:1px solid #1a1a1a;background:#fff;color:#000;}
.hs-auth-button{display:block;box-sizing:border-box;margin-top:8px;padding:17px;border:0;border-radius:8px;background:#1a1a1a;color:#fff;font-weight:bold;font-size:19px;text-align:center;text-decoration:none;box-shadow:0 2px 4px rgba(0,0,0,.3);cursor:pointer;}
.hs-auth-button:hover{background:#000;}
.hs-auth-button--secondary{background:#e9e9e9;color:#1a1a1a;box-shadow:none;border:1px solid #bbb;}
.hs-auth-button--secondary:hover{background:#dcdcdc;}

/* ---- ボタンの色（利用者の指示・2026-09-07「ここはオレンジで」「文字を黒」）----

   **この2つは fp-base.css が同じことを書いているが、あちらは効かない。**
   fp-base の指定は `body.hs-fp` に付いていて、/register/ と /login/ は
   そもそも fp-base.css を読み込まない（このファイルだけ）。
   FPの画面の中に同じボタンが出るときだけ、あちらが効いている。
   **色を変えるときは両方そろえること。**

   主ボタン（登録／ログインの送信）はオレンジ。値は fp-base と同じ #ea580c
   ―― 既存CTAの #ff8400 は白文字とのコントラストが 2.46 しかなく、
   同系で少し深いこの色なら 3.56 で、19px の太字が満たすべき基準(3.0)を超える。

   副ボタン（もう一方へ行く <a>）は**文字を黒に固定する**。
   薄いグレー地に白文字で読めなくなっていた ―― サイト全体の自由CSS
   （general_style_css）が `a { color:#fff !important }` を撒いていることが
   あり、素の `color` では負ける（CLAUDE.md の定石3）。
   クラス＋`!important` は要素セレクタ＋`!important` より強いので、これで勝つ。
   `-webkit-text-fill-color` も併せて置く ―― iOS の Safari は
   こちらが残っていると color を上書きしてしまう。 */
.hs-auth-button{background:#ea580c;box-shadow:none;}
.hs-auth-button:hover{background:#d24d0a;}
/* **副ボタンの地色をここでもう一度書く。** 副ボタンは
   `class="hs-auth-button hs-auth-button--secondary"` の2枚重ねで、
   上の `.hs-auth-button{background:#ea580c}` は元の
   `.hs-auth-button--secondary{background:#e9e9e9}` より**後ろ**にある。
   詳細度は同じなので後ろが勝ち、書き足さないと副ボタンまでオレンジになる。 */
.hs-auth-button--secondary{background:#e9e9e9;color:#1a1a1a !important;-webkit-text-fill-color:#1a1a1a !important;}
.hs-auth-button--secondary:hover{background:#dcdcdc;color:#1a1a1a !important;-webkit-text-fill-color:#1a1a1a !important;}
.hs-auth-error{color:#c0392b;text-align:center;font-size:15px;}
.hs-auth-note{color:#333;text-align:center;font-size:15px;}
.hs-auth-links{text-align:center;margin-top:20px;}
.hs-auth-links a{color:#1a1a1a;font-size:15px;text-decoration:underline;}

/* 登録ページの案内（迷惑メールフォルダ／ドメイン指定）。

   **PCでは1文を1行に収める**（利用者の指示・2026-09-07「PCで改行しないように」）。
   入れ物が max-width:500px で、1行目（46文字）は 14px で 640px ほどあるため、
   「…ご確認く／ださい。」と語の途中で折り返していた。PCのときだけ幅を広げる。

   **狭い画面は 500px のまま。** 広げると読み幅が長くなりすぎるうえ、
   スマホでは元から折り返す前提の文（あいだの <br class="pc"> もPCだけ）。

   幅は要素の style 属性で書かれているので !important が要る
   （インラインの指定は、そうしないと外側から勝てない）。
   区切りは 769px ―― このテーマのPC判定はここでそろえてある。 */
@media (min-width: 769px) {
  .registration_notice { max-width: 760px !important; }
}

/* ---- アンケート（利用者の指示・2026-09-07「アンケートに答える画面は?」）----

   登録フォームの中に、登録と同時に答えてもらう欄として出る。
   見た目は**上の入力欄にそろえる** ―― 別の作りに見えると、
   登録の一部だと伝わらない。

   文字は**白のまま**（見出しの .hs-auth-label と同じ）。ここは濃い地色の
   上に載る。選択肢だけは白い箱の中に置くので黒にする。 */
.hs-survey{display:flex;flex-direction:column;gap:20px;text-align:left;margin-top:4px;}
.hs-survey-intro{margin:0;color:#fff;font-size:14px;line-height:1.9;}
.hs-survey-q{display:flex;flex-direction:column;gap:8px;}
.hs-survey-qlabel{color:#fff;font-size:17px;font-weight:700;line-height:1.6;}
/* 「必須」の印。**矩形の中の文字は上下の余白を均等にする**（CLAUDE.md 定石6）。
   既定の line-height だと行ボックスの余りが上に溜まって、下に寄って見える。 */
.hs-survey-req{display:inline-block;margin-left:8px;padding:2px 6px;border-radius:4px;
  background:#b3261e;color:#fff;font-size:11px;font-weight:800;line-height:1;vertical-align:2px;}
.hs-survey-q input[type="text"],
.hs-survey-q textarea{width:100%;box-sizing:border-box;font-size:18px;padding:15px;
  border-radius:8px;border:1px solid #1a1a1a;background:#fff;color:#000;}
.hs-survey-q textarea{line-height:1.7;resize:vertical;}
/* 選択肢は白い箱にまとめる。**指で押せる高さを取る** ―― ラジオの丸だけを
   狙わせると外れやすい。ラベルごと押せるようにしてある。 */
.hs-survey-opts{display:flex;flex-direction:column;gap:2px;background:#fff;
  border:1px solid #1a1a1a;border-radius:8px;padding:6px 14px;}
.hs-survey-opt{display:flex;align-items:center;gap:10px;min-height:44px;
  color:#1a1a1a !important;-webkit-text-fill-color:#1a1a1a !important;
  font-size:16px;line-height:1.6;cursor:pointer;}
.hs-survey-opt + .hs-survey-opt{border-top:1px solid #ececec;}
.hs-survey-opt input{flex:0 0 auto;width:20px;height:20px;margin:0;}
/* 設問のまとまりの見出し（利用者の指示・2026-09-07「設問はグループに
   分けることができ」）。**上に大きく空ける** ―― 区切りが見えないと、
   30問並んだときにどこで話が変わったのか読み取れない。 */
.hs-survey-group{
  margin:14px 0 -6px;color:#fff;font-size:14px;font-weight:800;line-height:1.6;
  letter-spacing:.02em;padding-bottom:7px;border-bottom:1px solid rgba(255,255,255,.28);
}
.hs-survey > .hs-survey-group:first-child{ margin-top:0; }