/* 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;}
/* **長い文字列は必ず折り返す**（利用者の指示・2026-09-07「文字が改行して
   いない」）。案内文も設問文も**利用者が管理画面で書いた文**なので、
   区切りの無い長い並び（URL・英数字の連なり）がそのまま来る。
   日本語だけなら既定でも折れるが、`test` の連なりのように切れ目が
   無いと1行に伸びて画面からはみ出す ―― `anywhere` で切れ目が
   無くても折る。box-sizing と min-width:0 は、flex の子が中身の幅で
   押し広げられて縮まなくなるのを止める（flex 既定の min-width:auto）。 */
.hs-survey,
.hs-survey-q,
.hs-survey-opt{ min-width:0; }
.hs-survey-intro,
.hs-survey-qlabel,
.hs-survey-group,
.hs-survey-opt,
.hs-survey-state{ overflow-wrap:anywhere;word-break:break-word; }
.hs-survey-intro{margin:0;color:#fff;font-size:14px;line-height:1.9;
  /* 見出し「アンケート」に合わせて中央寄せ（利用者の指示・2026-09-22
     「ここはセンタリング」）。案内文は誰に向けても同じ短い文なので、
     左に寄せる理由が無い。 */
  text-align:center;
}
/* アンケートのあと会員登録の案内（profile-survey.php・2026-09-26）。
   設問の枠と同じ幅（460px・左右20px）に収め、1枚の札にまとめる。
   文は span 単位で折る（語の途中で折らない）。 */
.hs-sv-pend{max-width:460px;margin:8px auto 22px;padding:0 20px;box-sizing:border-box;}
.hs-sv-pend > *{margin-left:auto;margin-right:auto;}
.hs-sv-pend-lead{margin:0 0 12px;padding:14px 16px;border-radius:10px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  color:#fff;font-size:14px;line-height:1.8;text-align:center;}
.hs-sv-pend-lead span,
.hs-sv-pend-login p span{display:inline-block;}
.hs-sv-pend-lead b{font-weight:800;}
.hs-sv-pend-login{margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.16);}
.hs-sv-pend-login p{margin:0 0 10px;color:#fff;font-size:13px;line-height:1.8;text-align:center;opacity:.9;}
.hs-sv-pend .hs-auth-button{padding:13px;font-size:16px;margin-top:0;}
/* ログインは脇の道なので**小さく**（利用者の指示・2026-09-26「ここでのログインボタンがでかすぎる」）。
   横いっぱいの帯にせず、文字の幅に合わせた小さなボタンにする。 */
.hs-sv-pend-login{text-align:center;}
.hs-sv-pend-login .hs-auth-button{display:inline-block;width:auto;min-width:140px;padding:8px 26px;
  font-size:14px;line-height:1.4;border-radius:999px;}
.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; }

/* 設問番号（利用者の指示・2026-09-07「アンケートは設問番号をつけて」）。
   **通し番号**（グループをまたいで数える）。設問文と地続きに読めるよう、
   同じ行に置いて色だけ落とす。 */
.hs-survey-qnum{
  display:inline-block;margin-right:7px;font-size:13px;font-weight:800;
  letter-spacing:.04em;opacity:.72;
}

/* **まだ答えていない欄は薄い黄色**（利用者の指示・2026-09-07
   「未回答の入力ボックスは薄い黄色にして」）。30問並ぶと、どこが
   埋まっていないのか目で追えなくなる ―― 埋まった瞬間に白へ戻るので、
   残りがひと目で分かる。

   文字を書く欄は `:placeholder-shown`（＝空のときだけ当たる）で見る。
   JSを足さずに済み、打ち始めた瞬間に色が消える。
   選ぶ欄は `:has()`（中に checked が無いとき）―― 同じ考え方で、
   ひとつ選んだ瞬間に白へ戻る。 */
.hs-survey-q input[type="text"]:placeholder-shown,
.hs-survey-q textarea:placeholder-shown{ background:#fffbe6; }
.hs-survey-opts:not(:has(input:checked)){ background:#fffbe6; }

/* ---- アンケートの状態と、追従する押しどころ
   （利用者の指示・2026-09-07「現在のアンケート回答状況が未回答かどうか
   はじめにわかるように」「フッターの追従で、一時保存もできるように」）----

   **状態はいちばん上。** 30問並ぶ画面なので、下まで見ないと分からない
   形にしない。見た目（面・文字・上辺の線）は下の
   「いちばん上の状態の札」でまとめて決める。 */
.hs-survey-state{
  margin:0;padding:11px 14px;border-radius:10px;text-align:left;
  font-size:14px;line-height:1.8;
}
.hs-survey-state b{ display:block;font-size:15px; }
.hs-survey-state-sub{ display:block;font-size:12.5px;opacity:.85; }
/* **未回答・回答済みの下地と文字色はここに書かない。**
   決めるのは下の「いちばん上の状態の札」（濃紺の面）のほう。
   両方に書いていたせいで、下地はこちら（クリーム #fffbe6）・
   文字は下（白）が勝ち、**白い字がクリームに乗って読めなくなっていた**
   （利用者の指摘・2026-09-22）。 */

/* **押しどころは画面の下に貼り付ける。** 設問が30問あると、いちばん下まで
   送らないと保存できない ―― どこまで書いても手の届くところに置く。
   iOS のホームバーぶん（safe-area）を足す。
   重なりはモーダル類より下（あちらは 2147482900〜）。 */
.hs-survey-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:9000;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background:rgba(10,10,20,.72);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-top:1px solid rgba(255,255,255,.16);
}
.hs-survey-bar-in{
  display:flex;gap:10px;align-items:center;
  max-width:460px;margin:0 auto;
}
/* 帯の中のボタンは**上下の余白を持たない**（.hs-auth-button が持っている
   margin-top は、縦に積むための値。横に並ぶここでは間延びにしかならない）。 */
.hs-survey-bar-btn{
  flex:1 1 0;margin:0 !important;min-height:52px !important;
  padding:0 12px !important;font-size:16px !important;
  /* **角は丸く**（利用者の指示・2026-09-07「これは角丸を100%で」）。
     素の .hs-auth-button は 8px で、丸いのは body.hs-fp が当たる画面
     だけだった ―― ここはその印が付かないので、自分で丸める。 */
  border-radius:999px !important;
}
/* 帯に隠れるぶんだけ、フォームの下を空ける。**この画面だけ**に効かせる
   ―― 登録やログインのフォームには帯が無いので、:has() で在るときだけ。 */
.hs-auth-form:has(.hs-survey-bar){ padding-bottom:104px; }

/* **いちばん下まで来たら帯は引っ込む**（利用者の指示・2026-09-22）。
   下に本物の押しどころが出ているので、覆わないように下へ逃がす。
   `display:none` にはしない ―― 消すと戻ってくるときに跳ねる。
   押せなくするのは pointer-events（透けていても指が当たるのを止める）。 */
.hs-survey-bar{
  transition:transform .22s ease, opacity .22s ease;
}
.hs-survey-bar.is-rest{
  transform:translateY(100%); opacity:0; pointer-events:none;
}
@media (prefers-reduced-motion:reduce){
  .hs-survey-bar{ transition:none; }
}

/* いちばん下の「回答を保存し画像をダウンロードする」。
   帯のボタンと同じ丸い形にそろえる。文が長いので、狭い画面では
   2行になってよい ―― 縮めて読めなくするより、背を伸ばす。 */
.hs-survey-end{ margin-top:6px; }
.hs-survey-end-btn{
  width:100%; min-height:56px; border-radius:999px !important;
  font-size:17px !important; line-height:1.5; padding:14px 18px !important;
}

/* ==================================================================
   アンケートの見え方（利用者の指示・2026-09-21）
   「PCでもうすこし入力しやすくレイアウト」
   「グループのセクションがわかりやすくなるように」
   「1曲目 2曲目 のような入力項目をもっとうまくできるように」
   ================================================================== */

/* ---- まとまりの見出しを「区切り」として読めるようにする ----

   これまでは 14px ＋ 細い下線で、**設問ラベル（17px・白・太字）より弱かった**
   ―― 見出しが設問に負けると、どこで話が変わったのか目が拾えない。
   太さで競わせず、**帯にして形で差をつける**（左の柱＋薄い座布団）。
   色は、未回答の欄・状態の札と同じ温かい黄で揃える。 */
.hs-survey-group{
  margin:30px 0 2px;
  padding:10px 14px;
  font-size:15px;
  /* **見出しの書体を、まわりとそろえる**（利用者の指摘・2026-09-21
     「見出しのフォントがおかしい」）。これは <h4> なので、テーマの
     見出し用の書体（明朝）が当たる ―― 設問も入力欄もゴシックなので、
     この帯だけ別の顔になる。中身と同じ書体を受け継ぐ。 */
  font-family:inherit;
  border:0;                      /* 下線はやめる（帯と二重になる） */
  border-left:4px solid #f5c451;
  border-radius:0 10px 10px 0;
  background:rgba(255,255,255,.10);
}
.hs-survey > .hs-survey-group:first-child{ margin-top:2px; }

/* ---- まとまり（グループ）は箱で囲う ----

   利用者の指示・2026-09-22「グループのセクションがわかりやすくなって
   いるように」。見出しの帯だけだと、**どこまでが同じまとまりなのか**が
   次の見出しに行き当たるまで分からない ―― とくに1列にしてからは、
   ただ縦に流れて見える。

   囲いは PHP が出す <section class="hs-survey-sec">。
   箱の中の間隔はここが持つ（親の .hs-survey は箱と箱のあいだを持つ）。 */
.hs-survey-sec{
  display:flex; flex-direction:column; gap:18px;
  padding:0 0 18px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:12px;
  background:rgba(255,255,255,.05);
  /* 中身は箱の内側へ。見出しだけは箱の幅いっぱいに敷きたいので、
     左右の余白は見出し以外に当てる（下の :not で除く）。 */
}
.hs-survey-sec > :not(.hs-survey-group){ margin-left:16px; margin-right:16px; }
/* 見出しは箱の**ふた**。上の角だけ丸め、帯として幅いっぱいに敷く。 */
.hs-survey-sec > .hs-survey-group{
  margin:0 0 4px;
  border-left:0;
  border-bottom:1px solid rgba(255,255,255,.14);
  border-radius:11px 11px 0 0;
  background:rgba(245,196,81,.16);
  padding:12px 16px;
  display:flex; align-items:center; gap:10px;
}
/* 「3 / 7」。数字は行の余りで上下がずれるので line-height を殺してから
   上下同値の padding を当てる（矩形の中の文字の決まり）。 */
.hs-survey-secn{
  flex:0 0 auto;
  font-size:12px; line-height:1; padding:5px 8px;
  border-radius:999px;
  background:#f5c451; color:#3a2a00;
  font-variant-numeric:tabular-nums;
}
/* 箱の中は間隔を gap が持つので、見出しの上の余白は要らない。 */
.hs-survey-sec > .hs-survey-group + *{ margin-top:0; }
/* 箱どうしの間隔は親の gap に任せる。 */
.hs-survey-sec + .hs-survey-sec{ margin-top:2px; }

/* ---- 「（1曲目）（2曲目）」はひとまとまり ----

   長い設問文は上に1回だけ出し（PHP側）、ここでは**小さな欄を横に並べる**。
   狭い画面では縦に積む ―― 220px を割ると、曲名を入れる幅が足りない。 */
.hs-survey-multi{ display:grid; grid-template-columns:1fr; gap:10px; }
@media (min-width:640px){
  .hs-survey-multi{ grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); }
}
/* label なので、見出しを押しても欄に入る。 */
.hs-survey-sub{ display:flex; flex-direction:column; gap:5px; cursor:text; min-width:0; }
.hs-survey-sub-cap{ color:#fff; font-size:13px; font-weight:700; opacity:.88; }

/* ---- 選択肢が多いとき（都道府県など）は折り返す ----

   48択を縦1列に並べると、その設問だけで画面3枚ぶんになる。
   **9つ以上のときだけ**切り替える ―― 「はい・いいえ」は縦のままがよい。
   区切り線は横に並べると格子に見えるので、そのときだけ消す。 */
.hs-survey-opts:has(> .hs-survey-opt:nth-child(9)){
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(128px, 1fr));
  gap:2px 10px;
  padding:10px 12px;
}
.hs-survey-opts:has(> .hs-survey-opt:nth-child(9)) .hs-survey-opt + .hs-survey-opt{ border-top:0; }
.hs-survey-opts:has(> .hs-survey-opt:nth-child(9)) .hs-survey-opt{ min-height:36px; font-size:15px; }
/* 都道府県などの並びでは、選んだマスは列の中にとどめる
   （利用者の指示・2026-09-22の塗りは、ここでは負のmarginを使わない
   ―― 隣の列と重なってしまうため）。 */
.hs-survey-opts:has(> .hs-survey-opt:nth-child(9)) .hs-survey-opt:has(input:checked){
  margin:0; padding-left:8px; padding-right:8px; border-radius:6px;
}

/* ---- PC ----

   **PCでも1列**（利用者の指示・2026-09-22「PCでもアンケートは1列が良い」）。
   2026-09-21 に短い欄だけ2列（grid）にしていたが、左右に振られるぶん
   目で追う順番が分かりにくい。素の .hs-survey は縦1列の flex なので、
   **ここで並びを上書きしない**のがそのまま1列になる
   （hs-survey-q--wide の印は PHP 側に残してある。2列へ戻すなら
   grid と一緒に使う）。

   幅だけはアンケートの面を広げる（`:has(.hs-survey)`）。登録・ログインの
   フォームは 460px のまま ―― あちらは欄が数個で、広げる意味が無い。
   **920px ではなく 640px** ―― 1列で 920px まで伸ばすと、入力欄だけが
   横に間延びして読みにくい。 */
@media (min-width:900px){
  .hs-auth-form:has(.hs-survey){ max-width:640px; }
  /* 指で押す前提の高さは要らない。**1画面に入る数を増やす**ほうが効く。 */
  .hs-survey-q input[type="text"],
  .hs-survey-q textarea{ font-size:17px; padding:12px 14px; }
  .hs-survey-qlabel{ font-size:16px; }
  /* 下の帯と、いちばん下のボタンも幅をそろえる。 */
  .hs-survey-bar-in{ max-width:640px; }
  .hs-auth-form:has(.hs-survey) > .hs-auth-button{ max-width:460px; margin-left:auto; margin-right:auto; }
}


/* ---- ドロップダウン（利用者の指示・2026-09-21）----

   文字を書く欄と**同じ見た目**にそろえる ―― 並んだときに、片方だけ
   ブラウザ既定の灰色い箱になると浮く。
   矢印は自前で描く（appearance:none にすると消えるため）。 */
.hs-survey-select{
  width:100%; box-sizing:border-box;
  font-family:inherit; font-size:18px; padding:15px 40px 15px 15px;
  border-radius:8px; border:1px solid #1a1a1a;
  background:#fff; color:#000; -webkit-text-fill-color:#000;
  appearance:none; -webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,#1a1a1a 50%),
                   linear-gradient(135deg,#1a1a1a 50%,transparent 50%);
  background-position:calc(100% - 19px) calc(50% + 2px), calc(100% - 13px) calc(50% + 2px);
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
  cursor:pointer;
}
/* **まだ選んでいないときは薄い黄**（文字を書く欄と同じ決まり）。
   空の値のときだけ当てる ―― :placeholder-shown は select に無いので、
   中身が空の選択肢を選んでいるかで見る。 */
.hs-survey-select:has(option[value=""]:checked){ background-color:#fffbe6; }

/* ---- 分岐で出てくる設問 ----

   **出入りが分かるようにする** ―― 何もしないと、選んだ瞬間に画面が
   ずれて「何かが増えた」ことにだけ気づく。続きの設問だと読めるよう、
   一段下げて左に細い筋を置く。 */
.hs-survey-q--cond{
  border-left:2px solid rgba(245,196,81,.55);
  padding-left:12px;
}
@media (min-width:900px){
  /* PCでは2列に並ぶので、続きの設問は**もとの設問の下**に来るように
     ぶち抜きにする ―― 隣の列に出ると、どれの続きなのか分からない。 */
  .hs-survey-q--cond{ grid-column:1 / -1; }
  .hs-survey-select{ font-size:17px; padding:12px 40px 12px 14px; }
}


/* ==== アンケートの見え方 ―― このサイトの顔にそろえる ================
   利用者の指示・2026-09-22「デザインはよくない。google form にとらわれず、
   サイトにあったものにしてくれ」。

   **この節はいちばん後ろに置く。** 上の決まりを名指しで上書きして
   いるので、前へ動かすと当たらなくなる（auth.css の読み込み順と同じ考え）。

   【何に合わせたか】
   このサイトの「面」は FP のダイアログが決めている
   ―― **濃紺のグラデーション・角丸16px・細い白の枠・深い影・白文字**、
   差し色はオレンジ #ea580c（登録ボタンと同じ値）。
   アンケートもその一員に見えるように、同じ作りで組む。
   白い札を敷きつめる形（Googleフォーム風）は、この濃紺のサイトでは
   そこだけ別のサービスに見えていた。

   **色の値は写しであることを断っておく。** 面の地色は本来
   fp-base.css の `--fp-dialog-bg` が持ち主だが、**このページは
   fp-base.css を読み込まない**（auth.css だけ。functions.php の
   読み込み表を参照）。参照できないので同じ値をここに書いている ――
   **あちらを変えるときはここも変える。**

   【変えていないもの】
   まだ書いていない欄を色で示す決まり（利用者の指示・2026-09-07）、
   Q番号、必須の印、分岐の出し入れ、フワッと出る動き。 */

:root{
  /* fp-base.css の --fp-dialog-bg と同じ値（上の断り書き） */
  --hs-sv-panel:linear-gradient(165deg, #1b1d52, #12143c);
  --hs-sv-edge:rgba(255,255,255,.18);
  --hs-sv-accent:#ea580c;        /* 登録ボタンと同じオレンジ */
  --hs-sv-accent-soft:#ff9a5c;   /* 濃紺の上で読ませる明るいほう */
  --hs-sv-field:#ffffff;
  --hs-sv-field-todo:#fff6ec;    /* まだ書いていない欄 */
  --hs-sv-field-req:#f6c7c6;     /* まだ書いていない**必須**の欄（利用者の見本・2026-09-23） */
  --hs-sv-ink:#12142c;           /* 白い欄の中の文字 */
}

/* ---- 面 ----
   まとまりごとに1枚。中の設問は、面の中で線で仕切る
   ―― 札を敷きつめるより、濃紺の面が大きいほうがこのサイトらしい。 */
/* **padding は一括指定で書かない。** 一括で書くと、前にある
   `.hs-auth-form:has(.hs-survey-bar){padding-bottom:104px}`（下の帯に
   隠れるぶんの余白）を打ち消してしまう ―― 詳細度が同じで、こちらが
   後ろにあるため。左右だけを指定する。 */
.hs-auth-form:has(.hs-survey){ background:none; padding-left:20px; padding-right:20px; gap:18px; }
.hs-survey{ gap:18px; }
.hs-survey-sec{
  display:flex; flex-direction:column; gap:0;
  background:var(--hs-sv-panel);
  border:1px solid var(--hs-sv-edge);
  /* **角丸は控えめに**（利用者の指示・2026-09-22「アンケートの外枠は
     角丸ではなく、2pxぐらいのroundでよい」）。16px→2px。 */
  border-radius:2px;
  box-shadow:0 18px 60px rgba(0,0,0,.5);
  padding:0 0 6px;
  margin:0;
  overflow:hidden;
}
.hs-survey-sec > :not(.hs-survey-group){
  margin:0;
  padding:18px 20px;
  border-top:1px solid rgba(255,255,255,.10);
}
@media (min-width:900px){
  .hs-survey-sec > :not(.hs-survey-group){ padding:20px 24px; }
}
/* 面の中のいちばん上（見出しのすぐ下）には仕切りを引かない。 */
.hs-survey-sec > .hs-survey-group + *{ border-top:0; }

/* ---- まとまりの見出し ----
   面の上辺に敷く帯。オレンジは**上辺の線と番号**で差し、
   （左端の柱は丸角からはみ出して見えるのでやめた・利用者の指示・2026-09-22）
   帯そのものは塗りつぶさない ―― 塗ると面が二段に割れて見える。 */
.hs-survey-sec > .hs-survey-group{
  background:rgba(255,255,255,.06);
  border:0; border-top:4px solid var(--hs-sv-accent);
  border-radius:0;
  margin:0; padding:16px 20px;
  font-size:17px; font-weight:700; line-height:1.5;
  display:flex; align-items:center; gap:11px;
}
.hs-survey-sec > .hs-survey-group .hs-survey-secn{
  flex:0 0 auto;
  background:var(--hs-sv-accent);
  /* **背景が薄い（明るい）ときは文字を黒に**（利用者の指摘・2026-09-22
     「ここが背景が薄いとき、文字が黒になるように」）。オレンジは
     濃紺の面の上では相対的に明るい色なので、白文字は薄れて読みにくい
     ―― コントラスト比で見ても白文字は2.98でぎりぎり届かない。
     濃い文字（--hs-sv-ink）に替えて、はっきり読ませる。 */
  color:var(--hs-sv-ink) !important; -webkit-text-fill-color:var(--hs-sv-ink) !important;
  font-size:12.5px; font-weight:800; line-height:1; padding:6px 10px; border-radius:999px;
}
/* まとまり見出しのアイコン（利用者の指示・2026-09-22「それぞれグループの
   セクション見出しにはアイコンがつけられるように」）。付けていない
   まとまりでは要素ごと出ないので、余白の心配は要らない。
   明るいほうのオレンジ ―― 濃紺の上で #ea580c は沈む（Q番号と同じ理由）。 */
.hs-survey-gicon{
  flex:0 0 auto;
  font-size:20px; line-height:1;
  color:var(--hs-sv-accent-soft) !important;
  -webkit-text-fill-color:var(--hs-sv-accent-soft) !important;
}
/* まとまりの前に置く説明文（利用者の指摘・2026-09-22「アンケートの
   お願いはどこで指定できる? アンケートグループで設定できると良い」）。
   見出しの帯のすぐ下、まだ最初の設問の仕切り線の外に置く ――
   最初の設問の中に混ぜると「Q1の一部」に見える。
   **セレクタは `.hs-survey-sec > :not(.hs-survey-group)`（2クラスぶんの
   詳細度）と同じ詳細度にそろえてから、あとに置いて勝たせる** ――
   1クラスのままだと、あちらの padding:18px 20px と border-top が
   詳細度で勝ってしまい、ここで書いた値が当たらない。 */
.hs-survey-sec > .hs-survey-group-intro{
  margin:0; padding:12px 20px 0; border-top:0;
  font-size:13px; line-height:1.8; opacity:.82;
  color:#fff !important; -webkit-text-fill-color:#fff !important;
}

/* アンケートとユーザー登録の1画面で、登録の欄を入れる箱（profile-registration.php・2026-09-26）。
   前置き（回答が保存される旨・登録完了メールの案内）のすぐ下に最初の欄の仕切りが来るので、
   前置きの下にも余白を取る。 */
.hs-reg-one-sec > .hs-survey-group-intro{ padding-bottom:16px; }

/* ---- 設問 ----
   濃紺の上なので、文字は白のまま（サイト全体の自由CSSが撒く
   `color:#fff !important` と向きが同じなので、ここは逆らわない）。 */
.hs-survey-qlabel{ font-size:16px; font-weight:700; line-height:1.7; }
/* 番号（利用者の指示・2026-09-22「Q番号をもう少し大きくしては?」→
   「Q番号は白で」）。設問文と同じ白にそろえる ―― オレンジで差すのは
   見出しの帯・必須の印・触っている印だけで十分だった。
   <b> なので自由CSSの span 指定には当たらないが、iOS の
   -webkit-text-fill-color 対策で両方書く。 */
.hs-survey-qnum{
  font-size:15px; font-weight:800; opacity:1; margin-right:10px;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}
/* 必須の印は、濃紺の上で読める赤に。 */
.hs-survey-req{ background:#d7382b; }

/* ---- 入力欄 ----
   白い欄・角丸12px・枠なし。濃紺の上では白い面そのものが枠になるので、
   黒い線を回すと重たく見える。触っているあいだはオレンジの輪で囲う。 */
.hs-survey-q input[type="text"],
.hs-survey-q textarea,
.hs-survey-select{
  border:0; border-radius:12px;
  background:var(--hs-sv-field);
  padding:14px; font-size:16px;
  color:var(--hs-sv-ink) !important;
  -webkit-text-fill-color:var(--hs-sv-ink) !important;
}
.hs-survey-select{ padding-right:40px; }
.hs-survey-q input[type="text"]:focus,
.hs-survey-q textarea:focus,
.hs-survey-select:focus{
  outline:none;
  box-shadow:0 0 0 3px rgba(234,88,12,.55);
}
/* まだ書いていない欄（利用者の指示・2026-09-07）。
   **意味は変えない** ―― 埋まった瞬間に白へ戻る。 */
.hs-survey-q input[type="text"]:placeholder-shown,
.hs-survey-q textarea:placeholder-shown{ background:var(--hs-sv-field-todo); }
.hs-survey-select:has(option[value=""]:checked){ background-color:var(--hs-sv-field-todo); }

/* **まだ書いていない必須の欄は淡い赤**（利用者の指示・2026-09-23「必須の入力値は
   これで」＋見本の画像）。埋まった瞬間に白へ戻る ―― 意味は「未記入の目印」の
   まま、必須かどうかで色を分ける。見るのは required 属性（分岐で隠れた設問は
   required ごと外れるので、塗られない）。
   一つ選ぶ選択肢は、どれも選んでいない間だけ面ごと塗る。 */
.hs-survey-q input[type="text"][required]:placeholder-shown,
.hs-survey-q textarea[required]:placeholder-shown{ background:var(--hs-sv-field-req); }
.hs-survey-select[required]:has(option[value=""]:checked){ background-color:var(--hs-sv-field-req); }
.hs-survey-opts:has(input[required]):not(:has(input:checked)){ background:var(--hs-sv-field-req); }

/* **ドロップダウンの右の矢印を描き直す**（利用者の報告・2026-09-23「スマホの時、
   ドロップダウンで右の矢印がでない」）。上の「入力欄」の規則が
   `background:` の一括指定で、前で描いた矢印（background-image）まで
   消していた。appearance:none なので、ブラウザの矢印も出ない。
   ここは背景の**色以外だけ**を指定する ―― 色は未記入・必須の規則が決める。 */
.hs-survey-select{
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2312142c' d='M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:22px 22px;
}

/* ---- 選択肢 ----
   入力欄と同じ白い面にそろえる（並んだときに片方だけ浮かない）。 */
.hs-survey-opts{
  --hs-sv-opt-pad-x:14px;        /* 選んだ行を塗るときの負のmarginと共有 */
  background:var(--hs-sv-field); border:0; border-radius:12px;
  padding:4px var(--hs-sv-opt-pad-x); gap:0;
  /* **角丸は面（この要素）だけが持ち、行そのものは角丸にしない**
     （利用者の指示・2026-09-22「選択肢の背景は、このとき、角丸に
     ならないようにして、外側は角丸でマスクされるように」）。
     overflow:hidden にしておけば、面いっぱいに塗った行がここより
     外へはみ出さず、上下の端に来たときだけ**面の丸みでマスクされて**
     自然に角が丸く見える ―― 行の角を個別に丸めて面の丸みへ
     手作業でそろえる必要が無くなる（下の :first-child/:last-child の
     border-radius 指定を消せたのはこのため）。 */
  overflow:hidden;
}
.hs-survey-opts:not(:has(input:checked)){ background:var(--hs-sv-field-todo); }
.hs-survey-opt{
  min-height:46px; gap:12px; font-size:15.5px;
  transition:background-color .12s ease;
}
.hs-survey-opt + .hs-survey-opt{ border-top:1px solid rgba(0,0,0,.08); }
/* **未選択の丸も、選んだ丸と同じだけ大きさを守る**（利用者の報告・
   2026-09-23「スマホでのラジオボタンおかしい」）。
   下の :checked 側は appearance:none にした都合で padding:0 / box-sizing
   まで !important で固めてあるが、こちらの未選択側は width/height を
   ふつうに書いていただけだった ―― サイトごとの自由CSS
   （general_style_css）は auth.css の**あと**に読まれる作りなので
   （patterns/profile-survey.php）、そちらが input に !important で
   padding や min-height を足す運びだと、未選択の丸だけがそのぶん膨らみ、
   選んだ瞬間だけ本来の19pxへ戻る ―― 押す前後で大きさが変わって見える。
   守り方を :checked 側とそろえる。 */
.hs-survey-opt input{
  width:19px !important; height:19px !important;
  min-width:19px !important; min-height:19px !important;
  max-width:19px !important; max-height:19px !important;
  padding:0 !important; margin:0 !important;
  box-sizing:border-box !important;
  flex:0 0 19px !important;
  accent-color:var(--hs-sv-accent);
}
.hs-survey-opt span{
  color:var(--hs-sv-ink) !important;
  -webkit-text-fill-color:var(--hs-sv-ink) !important;
}
/* **選んだ行の背景はキーカラー**（利用者の指示・2026-09-22「ラジオボタン
   のチェックは選んだものの背景がキーカラーになるように」「選んだラジオは
   もうすこし見やすくなるように」）。丸だけの色分けは並びの中で目立たず、
   選んだかどうかを見るのに1つずつ丸を確かめる形だった。行ごと塗れば、
   遠目にもどれを選んだかが分かる。
   **左右へせり出させて、面いっぱいに塗る** ―― .hs-survey-opts の
   左右のpadding(14px)ぶんを打ち消す負のmarginで、行の外枠と同じ幅にする。 */
.hs-survey-opt:has(input:checked){
  background:var(--hs-sv-accent);
  /* 左右いっぱいに塗る量は .hs-survey-opts の左右padding分（変数で共有。
     選択肢が多いときのグリッド並び ―― 下の :has(nth-child(9)) ―― は
     padding が違うので、変数を通せばそこでも自動でそろう）。 */
  margin:0 calc(var(--hs-sv-opt-pad-x, 14px) * -1);
  padding-left:var(--hs-sv-opt-pad-x, 14px);
  padding-right:var(--hs-sv-opt-pad-x, 14px);
  border-top-color:transparent;     /* 塗った行の上辺に薄い仕切り線を出さない */
}
.hs-survey-opt:has(input:checked) + .hs-survey-opt{ border-top-color:transparent; }
/* **いちばん上／下の行が選ばれたときは、面の角丸ぶんの余白も打ち消す**
   （利用者の指摘・2026-09-22「上の余白ができてしまっている」）。
   左右は .hs-survey-opts の padding を打ち消しているが、上下は
   container の padding（4px）が残ったままだと、そこだけ面の地色が
   隙間として見えてしまう。**角丸そのものは付けない** ―― 面の
   overflow:hidden が、はみ出した行を面の丸みでそのままマスクする。 */
.hs-survey-opt:first-child:has(input:checked){ margin-top:-4px; padding-top:4px; }
.hs-survey-opt:last-child:has(input:checked){ margin-bottom:-4px; padding-bottom:4px; }
/* 塗った行の文字は、地の色に合わせて濃い文字にする（利用者の指摘・
   2026-09-22。オレンジは濃紺の面の上では相対的に明るく、白文字は
   コントラスト比2.98でぎりぎり読みにくい ―― 「1/7」の札を黒字に
   直したのと同じ理由。ここでも濃い文字（--hs-sv-ink）に替える）。 */
.hs-survey-opt:has(input:checked) span{
  color:var(--hs-sv-ink) !important; -webkit-text-fill-color:var(--hs-sv-ink) !important;
  font-weight:800;
}
/* ラジオの丸は**中が黒・外が白**にする（利用者の指示・2026-09-22
   「ラジオボタンは、中が黒、外が白」）。`accent-color` はブラウザごとに
   リング/点の塗り分けが違い、狙った配色を保証できない ―― 自分で描く。
   `radial-gradient` で黒い点＋白い輪をひと塗りで作る（疑似要素を
   使わない ―― input への ::after は対応がブラウザで割れる）。 */
.hs-survey-opt input[type="radio"]:checked{
  appearance:none; -webkit-appearance:none;
  box-sizing:border-box;   /* 19x19の枠内に納める（未選択時と大きさをそろえる） */
  border:2px solid #fff; border-radius:50%;
  background:radial-gradient(circle, #000 0 5px, #fff 5px 100%);
  /* **大きさを固定する**（利用者の指摘・2026-09-23「ラジオボタンが選択時に
     でかくなりすぎないように」）。appearance:none で既定の描画を外すと、
     ふつうの箱として扱われ、サイト全体の自由CSS（general_style_css）の
     input の padding・min-height などが効き始める ―― 未選択（既定の描画）
     は影響を受けないので、**選んだ瞬間だけ丸が膨らんで**文字が右へ押されていた。
     自由CSSは !important で書かれることがあるので、こちらも !important で
     19px に留める。 */
  width:19px !important; height:19px !important;
  min-width:19px !important; min-height:19px !important;
  max-width:19px !important; max-height:19px !important;
  padding:0 !important; margin:0 !important;
  flex:0 0 19px !important;
}
/* ラジオ/チェックボックスの既定フォーカス枠は各ブラウザで色が違い
   （Chrome は青）、オレンジのキーカラーと喧嘩する。キーボード操作の
   ときだけ、色をそろえたリングに替える（マウスでの選択では出さない
   ―― 押した直後に枠が残るのを避ける）。 */
.hs-survey-opt input:focus-visible{
  outline:2px solid var(--hs-sv-accent-soft);
  outline-offset:2px;
}

/* ---- 分岐で出てくる設問 ----
   面の中の続きなので、左にオレンジの細い筋を置いて一段下げる。 */
.hs-survey-q--cond{
  box-shadow:inset 3px 0 0 var(--hs-sv-accent);
  background:rgba(255,255,255,.04);
}

/* ---- 分岐の設問は、条件がそろうまで**本当に消す** ----

   `[hidden]{display:none}` はブラウザ既定の決まりで、**こちらが書いた
   どの display よりも弱い** ―― `.hs-survey-q{display:flex}` を当てた
   時点で負けていた（利用者の指摘・2026-09-22）。ここで明示的に消す。 */
.hs-survey-q[hidden]{ display:none !important; }

/* ---- 出てくるときはフワッと ----
   利用者の指示・2026-09-22。**出るときだけ**（消えるときは待たせない）。 */
@keyframes hsSurveyIn{
  from{ opacity:0; transform:translateY(-6px); }
  to  { opacity:1; transform:translateY(0); }
}
.hs-survey-q--cond:not([hidden]){ animation:hsSurveyIn .26s ease both; }
@media (prefers-reduced-motion:reduce){
  .hs-survey-q--cond:not([hidden]){ animation:none; }
}

/* ---- いちばん上の状態の札 ----
   面と同じ作りにして、アンケート全体の「表紙」に見せる。
   未回答はオレンジ、回答済みは緑の線を**上辺**に引いて言い分ける
   （左端の柱はやめた・利用者の指示・2026-09-22）。 */
.hs-survey-state{
  background:var(--hs-sv-panel);
  border:1px solid var(--hs-sv-edge);
  border-radius:2px;   /* 面（.hs-survey-sec）と同じ角丸にそろえる */
  box-shadow:0 18px 60px rgba(0,0,0,.5);
  padding:16px 20px;
}
.hs-survey-state.is-todo,
.hs-survey-state.is-done{
  color:#fff !important; -webkit-text-fill-color:#fff !important;
}
.hs-survey-state.is-todo{ border-top:4px solid var(--hs-sv-accent); }
.hs-survey-state.is-done{ border-top:4px solid #3ddc84; }
.hs-survey-state b{ font-size:16px; font-weight:700; }
.hs-survey-state-sub{ font-size:13px; opacity:.8; }

/* 左のアイコン（利用者の指示・2026-09-23「回答済みと未回答で、左にアイコンが
   ついて分かりやすく」）。色は上辺の線と同じ ―― 回答済みは緑、途中はオレンジ。
   **文の塊の縦の真ん中にそろえる**（1行でも3行でも丸が浮かない）。 */
.hs-survey-state{ display:flex; align-items:center; gap:14px; }
.hs-survey-state-body{ display:block; flex:1 1 auto; min-width:0; }
.hs-survey-state-icon{
  flex:0 0 40px; width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; line-height:0;
}
.hs-survey-state-icon svg{ display:block; }
.hs-survey-state.is-done .hs-survey-state-icon{ background:#3ddc84; }
.hs-survey-state.is-todo .hs-survey-state-icon{ background:var(--hs-sv-accent); }

/* ---- 「1曲目・2曲目」の小さな見出し ---- */
.hs-survey-sub-cap{ font-size:12.5px; font-weight:700; opacity:.9; }