@charset "UTF-8";
/**
* pn-mitsukuru マイページ（[pnm_mypage]）のレイアウト（0.7.210）。
*
* ★このファイルが「マイページの余白・ヒーローの寸法」の唯一の正。数値をここ以外に書かない。
*
* 🔴 対応するクラスは `includes/class-pnm-mypage.php` の render_mypage() / card_*() /
* cta_new_hearing() が付ける。付いているのは **class 属性だけ**で、
* 要素の追加・削除・入れ替え、文言、出し分けはいずれも無改変。
* 🔴 ⚠️ **【0.7.219 で是正】上の「無改変」は card_profile() には当てはまらなくなった。**
* **原文は消していない**（#438 の記法）＝上の1行は 0.7.210 時点の事実としてそのまま残す。
* 0.7.219 で `card_profile()` に**要素と文言を追加した**＝メールアドレス行
* （`.pnm-mypage__card-account` ＋ label / value）と2つ目のボタン
* 「パスワードを変更する」（`.pnm-mypage__card-btns` でくくった2本の ``）。
* 🔴 **崇さんの明示依頼による**（2026-09-02＝「マイページからパスワード変更へ直接飛べる導線を追加」）。
* ⚠️ **他の card_*() / render_mypage() / cta_new_hearing() は引き続き class 属性だけ**＝
* ここを根拠に別のカードへ要素を足さないこと。
* 🔴 ⚠️ **【0.7.250 で是正】上の「他の card_*() は引き続き class 属性だけ」も、もう当てはまらない。**
* **原文は消していない**（#438 の記法）＝上の2行は 0.7.219 時点の事実としてそのまま残す。
* 0.7.250 で **マイページに出るすべてのカードの見出し行を作り直した**＝
* `.pnm-mypage__card-top`（見出し＋操作群の1行ラッパ）・`.pnm-mypage__card-actions`（操作ボタン群）・
* `.pnm-mypage__card-badges`（バッジ行）・`.pnm-mypage__card-rows`（明細行の縦積み）を新設し、
* **各カードのボタンを説明文の行やカード下端から見出しの右上へ移した**。
* `.pnm-mypage__card-btns`（0.7.219 の会員情報カード専用）は `.pnm-mypage__card-actions` に統合して**廃止**した。
* 🔴 **崇さんの明示依頼による**（2026-09-06＝「カード上部を『見出し（左）＋操作ボタン群（右上・
* 横並び）』の1行にする。余白：カード padding 16px・見出し下 8px・行間 6px。SP 幅ではボタン群を
* 見出しの下に折り返し幅100%」）。⚠️ **6px は 8px グリッドの新しい例外**（#480 承認済みの 12px と
* 同じ扱い＝依頼で数値が指定されたもの）。詳細は `docs/handoff.md`
* 『記録すべき決定事項：マイページの見た目と動線の修正（2026-09-06・0.7.250）』。
* ⚠️ **0.7.249（#570・B案）の ⑥ 節〔カード列 SP1列/PC2列〕とは別物**＝あちらは**カード列**の
* レイアウト、こちらは**カード1枚の中身**。⑥ は1行も変えていない。
* ⚠️ **この docblock を実装と食い違わせたまま放置しない**（#509 で同じ失敗を
* `design-reviewer` に ❌ 指摘された＝コード側の docblock でもヘッダ・表と同じ事故が起きる）。
*
* 🔴 **承認の帰属は2つに分かれている。1つの承認として圧縮しないこと。**
* ① **card_*()（カード要素）への class 付与**＝#480 の範囲限定解除（崇さん確定・2026-08-30）。
* ② **render_mypage()（ヒーロー）の高さ変更**＝レイアウト第3弾の依頼で解除（崇さん・2026-08-30）。
* ⚠️ **【要追認】ヒーローの font-size / line-height の変更と、cta_new_hearing() への拡張は、
* ①②のどちらの明文にも含まれていない**（①は「カード要素」限定・②は「高さ」限定）。
* 0.7.210 では①に到達するために必要と判断して実施したが、**崇さんの追認が要る**。
* ⇒ `docs/handoff.md`『未決事項』0-V。**追認が取れたらこの【要追認】を消して帰属を書くこと。**
*
* ⚠️ **インラインの `padding` / `gap` / `margin`、およびヒーローの
* `font-size` / `line-height` は PHP 側から取り除いてある。**
* インラインstyleはどんなセレクタより強く、残したままだと全行に `!important` が要り、
* 「クラスで殴らない」という #480 の判断（B案）の意味が消えるため。
* 🔴 **裏返しの地雷＝この CSS が読み込まれないと、余白が 0 になりヒーローの文字が
* ブラウザ既定サイズになる。** 読み込みは `pn-mitsukuru.php` の
* `pnm_mypage_style_on_shortcode()`（do_shortcode_tag）。
* **PHP 側で padding を戻すのではなく、必ず enqueue 側を直すこと。**
*
* 🔴 **0.7.210 で #480 の「触ってよいのは余白だけ」を、ヒーローに限って解除した。**
* ①（ヒーローを補助金ページの帯と同じ高さにする）は文字サイズを変えないと到達しないため
* （実測：32px の h1 だけで SP 2行＝89.6px を占め、帯の全高 99.8px にほぼ等しい）。
* ⚠️ **カード側の文字サイズ・アイコン 56px・角丸 20px・影は引き続きインラインのまま**
* ＝ここでは指定しない。
*
* 🔴 ボタン・リンクのタップ領域は 44px を下回らせない。
* 🔴 8px グリッドを守る（説明文の 12px は #480 で承認済みの例外）。
* 🔴 `!important` は使わない（#480 で B を選んだ意味を保つため）。
* 🔴 ⚠️ **【0.7.221 で是正】上の禁止には例外が1つできた＝⑤節（アカウント設定）だけ。**
* **原文は消していない**（#438 の記法）＝上の1行は 0.7.210 時点の取り決めとしてそのまま残す。
* 🔴 ⚠️ **【要追認】この例外は崇さんの承認を得ていない。**（`design-reviewer` と `deploy-checker` の
* 両方が「他の項目には崇さん確定の明示があるのに、ここだけ無い」と指摘した・2026-09-02）
* ⇒ `docs/handoff.md`『未決事項』0-AA へ。**追認が取れたらこの【要追認】を消して帰属を書くこと。**
* ⚠️ **上の1行（禁止）が生きたままなら、⑤節の `!important` を外して詳細度だけで戦うのが元の姿。**
* ⚠️ **「趣旨の外側だから許される」は #480 の原文が言っていることではなく、今回そう解釈した。**
* #480 の原文が述べているのは「**当プラグイン自身の**インラインstyleを残すと、それに勝つために
* 全行 `!important` が要る」という限定的な理由付けで、「相手が第三者CSSなら対象外」とは書いていない。
* ⇒ ⑤節が相手にするのは**編集できない第三者CSS**＝WP-Members の `forms/generic-no-float.min.css` と
* `swell_child/css/wp-members.css`（🔴 **テーマは触らない**）であり、**今回はその理由付けの射程外だと解釈した。**
* ⚠️ 先例＝`assets/css/pnm-pwdreset.css` も**同じ相手に `!important` を使っている。**
* 🔴 ⚠️ **ただし「色系だけ」ではない**＝あちらは `color`（`:129,186,198,211,236,244`）に加えて
* **`float` / `width` / `max-width` / `margin-left` / `margin-right`**（`:89-93`・`:105-109`）にも添えている
* （`:83-84`＝0.7.155 で「swell_child / WP-Members 側に `!important` 付きの width や float があると
* id＋class でも負ける」ため）。**先例の範囲は本PRより広い。**
* 🔴 **⑤節でも `!important` は color / background / border の3つだけ。①〜④には1つも無い。**
*
* ⚠️ ブレークポイントは 600px ＝ `assets/css/pnm-page-header.css`（帯の圧縮）と同じ値に
* そろえてある。**片方だけ変えると SP/PC の境目で帯とヒーローの高さがずれる。**
* 🔴 **`pnm_mypage` を `pnm_page_header_style_on_shortcode()` の一覧に足すことは引き続き禁止**
* （マイページは独自ヒーローを描いており帯を持たない＝足すと二重化する。2026-08-30 の射程確定）。
*
* 🔴 ⚠️ **【0.7.349 で是正】マイページの見た目を業務画面に作り直した（崇さんの依頼 2026-10-11・デザイン案を了承）。**
* **原文は消していない**（#438 の記法）＝上の各段落はそれぞれの版の事実としてそのまま残す。
* 次の記述は **0.7.349 以降は当てはまらない**：
* - 冒頭の「付いているのは class 属性だけ」「余白・ヒーローの寸法の唯一の正」
* ⇒ このファイルは**色・枠・角丸・文字サイズ・太さ**も持つ（⑦節の `.pnm-ui` 部品）。
* PHP のインライン style から外したもの＝カードの外枠（白地・角丸20px・影）／見出し 20px・900／
* アイコンの 56px の箱／ピル型ボタンと矢印／ピル型バッジ／いまの状況バナー／下部 CTA のグラデ／
* ヒーローの淡緑地と装飾の円（div ごと削除）。インラインに残したのは `max-width` / `margin:0 auto` だけ。
* - 「カード側の文字サイズ・アイコン 56px・角丸 20px・影は引き続きインラインのまま」⇒ すべて廃止。
* - ①節の「ヒーローを帯と同じ高さに寄せる」⇒ **もう目的にしない**（崇さん了承）。
* - 「CSS が読み込まれないと余白が 0 になる」⇒ **枠も地も出なくなる**（より重い）。
* 🔴 **読み込みは head が本線になった**＝`pn-mitsukuru.php` の `pnm_mypage_style_in_head()`
* （`wp_enqueue_scripts` 優先度20・`is_page()` かつ投稿 ID が `PNM_Mypage::page_id( 'mypage' )` と一致）。
* `pnm_mypage_style_on_shortcode()`（do_shortcode_tag・footer）は**保険として残した**＝
* `[pnm_mypage]` を別のページに貼ったときだけ効き、一瞬のちらつきは受け入れる（崇さん決定 2026-10-11）。
* ⚠️ インラインの予備（枠・地）は持たない＝CSS の取得に失敗したら枠と地は出ない（崇さん決定）。
* - 「新しい色・クラスを足さない」⇒ ⑦節で変数と部品クラスを足した（崇さん了承）。
* 🔴 **変えていないもの**：PC も1列（⑥節）／カード上部は「見出し左＋操作ボタン群右上」の1行／
* SP 幅は縦積み／カード padding 16px・見出し下 8px・行間 6px／8px グリッド（6px・12px は承認済みの例外）／
* タップ領域 44px 以上／ブレークポイント 600px／`!important` は増やさない（⑤節の例外はそのまま）／
* マイページを帯 CSS（pnm-page-header.css）の対象に足さない。
* ⚠️ **アカウント設定画面（⑤節・`.pnm-account`）は対象外**＝ピル型のボタンが残る（`docs/handoff.md`『残タスク』）。
* 詳細は `docs/handoff.md`『記録すべき決定事項：マイページを業務画面の見た目に作り直す（2026-10-11・0.7.349）』。
*
* @package PN_Mitsukuru
*/
/* =========================================================================
* ① ヒーロー（挨拶）。補助金ページの帯（.l-topTitleArea）と同じ高さに寄せる。
* 再構成した帯の高さ＝SP 99.8px / PC 110.8px（pnm-page-header.css の実数値から）。
* 🔴 ⚠️ 【0.7.349 で是正】帯の高さにそろえることは**もう目的にしない**（原文は残す）。
* いまは白地＋下罫線 1px・eyebrow 12px/600/--pnm-muted・h1 20px（PC 24px）/700/--pnm-ink・
* リード 13px/--pnm-muted（崇さん了承 2026-10-11）。装飾の円の div は PHP から削除した。
* ========================================================================= */
.pnm-mypage .pnm-mypage__hero {
background: var( --pnm-surface );
border-bottom: 1px solid var( --pnm-line );
}
.pnm-mypage .pnm-mypage__hero-inner {
padding: 16px;
}
.pnm-mypage .pnm-mypage__hero-eyebrow {
font-size: 12px;
font-weight: 600;
line-height: 1.4;
color: var( --pnm-muted );
margin-bottom: 8px;
}
.pnm-mypage .pnm-mypage__hero-title {
font-size: 20px;
font-weight: 700;
line-height: 1.3;
color: var( --pnm-ink );
margin: 0 0 8px;
}
.pnm-mypage .pnm-mypage__hero-lead {
font-size: 13px;
line-height: 1.4;
color: var( --pnm-muted );
margin: 0;
}
/* =========================================================================
* ②③ 入れ子の解消と SP の横幅。
* 🔴 実測（origin/main・360px）＝本文の実効幅は 228px しかなかった。
* 内訳＝外側コンテナの左右 padding 32px ＋ カードの左右 padding 34px ＝ 片側 66px。
* ⚠️ **「カードの中にさらに枠がある」という前提は実測では成り立たなかった**
* （カードの中にあるのはピル型のバッジとボタンだけ）。実際に二重なのは
* **外側コンテナの padding とカードの padding**なので、外側を SP で詰める。
* ========================================================================= */
/* カード群セクションの外枠（旧インライン padding:56px 32px 24px）。 */
.pnm-mypage .pnm-mypage__wrap {
padding: 24px 16px 16px;
}
/* 下部CTAの外枠（旧インライン padding:24px 32px 80px）。 */
.pnm-mypage .pnm-mypage__wrap--cta {
padding: 0 16px 32px;
}
/* 下部CTAの中身（旧インライン padding:44px 44px / gap:28px）。 */
.pnm-mypage .pnm-mypage__cta {
padding: 24px 16px;
gap: 16px;
}
/* カード同士の間隔（#480 で 24px → 16px）。 */
.pnm-mypage .pnm-mypage__cards {
gap: 16px;
}
/* カード内の padding。#480 は上下だけ詰めて左右 34px を据え置いたが、
③（SP の横幅を活かす）で左右も 16px にする（34px は 8px グリッドから外れてもいた）。
🔴 0.7.250：崇さんの依頼で**上下も 16px**に揃えた（PC の 24px 32px も廃止＝下の PC 節を参照）。 */
.pnm-mypage .pnm-mypage__card {
display: flex;
flex-direction: column;
padding: 16px;
}
/* =========================================================================
* ③ カード内の縦の詰め（#480 から据え置き）。
* ========================================================================= */
/* 🔴 0.7.250：カード上部＝「見出し（左）＋操作ボタン群（右上）」の1行（崇さんの依頼・2026-09-06）。
⚠️ **基本（SP・600px 未満）は縦積み**＝ボタン群は見出しの下へ折り返し、幅100%になる
（`align-items: stretch` で ``〔inline-flex〕が親の幅いっぱいに伸びる）。
横並び（右上）に変わるのは下の PC 節（600px 以上）。
🔴 ⚠️ **【0.7.251 で是正】下の2行（2列・約480px・回り込みが正しい挙動）はもう当てはまらない。**
**原文は消していない**（#438 の記法）。⑥節を1列にしたのでカード1枚は外枠いっぱい
（最大 1000px − padding）を使え、**PC ではボタン群を必ず見出しと同じ行に収める**
（下の PC 節で `flex-wrap: nowrap`）。600px 未満は従来どおり折り返し・幅100%。
⚠️ PC でも**カード列は2列**（⑥節）なので1枚あたり約 480px しかない。ボタンが入りきらない
カードでは `flex-wrap` で見出しの下へ回り込む（右寄せのまま）＝それが正しい挙動。 */
.pnm-mypage .pnm-mypage__card-top {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 8px;
margin-bottom: 8px;
}
/* 見出し（アイコン＋h2）。1行ラッパの中で縮められるようにする。
⚠️ margin-bottom は `.pnm-mypage__card-top` が持つ（0.7.249 までの 16px はここから外した）。 */
/* 🔴 0.7.349：アイコン（20px の線）と見出しの間は 8px（旧インライン gap:16px・56px の箱は廃止）。 */
.pnm-mypage .pnm-mypage__card-head {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
margin-bottom: 0;
}
/* 操作ボタン群。⚠️ 0.7.219 の `.pnm-mypage__card-btns` はこれに統合した（廃止）。 */
.pnm-mypage .pnm-mypage__card-actions {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 6px;
}
/* バッジ行（件数・振込口座・承認待ち）。⚠️ 行間 6px は依頼で指定された値。 */
.pnm-mypage .pnm-mypage__card-badges {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 0 0 6px;
}
/* 明細行の縦積み（診断・申請文章／紹介についてのご確認）。#570 のインライン gap:10px を寄せた。 */
.pnm-mypage .pnm-mypage__card-rows {
display: flex;
flex-direction: column;
gap: 6px;
}
/* ⚠️ 6枚中5枚は説明文とボタンが `justify-content:space-between` の**同じ行**に並ぶ
* （card_profile / card_hojokin_app / card_partner / card_sp_agent_hearing / card_sp_referrals）。
* この配置では説明文の margin-bottom はボタンを押し下げるだけの死に余白なので 0 にする。
* 🔴 ⚠️ **【0.7.250 で是正】上の前提（同じ行に並ぶ）は無くなった**（ボタンは見出しの右上へ移した）。
* **原文は消していない**（#438 の記法）。`margin: 0` である結論は変わらない。 */
.pnm-mypage .pnm-mypage__card-text {
margin: 0;
}
/* 🔴 **【0.7.250 で削除】`card_requests` 専用の直下セレクタ（12px）と `.pnm-mypage__card-foot`。**
* ボタンを全カードで見出しの右上へ移したため、説明文は**どのカードでも最後の行**になり、
* `card-foot` はどのカードからも出力されなくなった。⇒ 2ルールとも削除した。
* ⚠️ 説明文の上に明細行やバッジが来るカード（診断・申請文章／紹介についてのご確認）では、
* 間隔は `.pnm-mypage__card-badges` / `.pnm-mypage__card-rows` の 6px が持つ。 */
/* 説明文の下（22px → 0）。0.7.250 以降はカード内の最後の行なので下余白は要らない。 */
/* =========================================================================
* PC（600px 以上）。⚠️ ブレークポイントは pnm-page-header.css と同じ 600px。
* ========================================================================= */
@media screen and ( min-width: 600px ) {
.pnm-mypage .pnm-mypage__hero-inner {
padding: 24px 32px;
}
.pnm-mypage .pnm-mypage__hero-title {
font-size: 24px;
}
.pnm-mypage .pnm-mypage__wrap {
padding: 32px 32px 24px;
}
.pnm-mypage .pnm-mypage__wrap--cta {
padding: 0 32px 48px;
}
.pnm-mypage .pnm-mypage__cta {
padding: 32px;
gap: 24px;
}
/* 🔴 0.7.250：カード上部を「見出し（左）＋操作ボタン群（右上・横並び）」の1行にする。
⚠️ カードの padding は SP と同じ 16px（依頼で指定された値）＝ここでは上書きしない。
🔴 **0.7.251：`flex-wrap` を `wrap` → `nowrap` にした**＝⑥節を1列にしてカード1枚が
外枠いっぱい（最大 1000px）を使えるようになったので、**PC では必ず1行に収める**
（崇さんの依頼・2026-09-06）。⚠️ 折り返さないぶん、見出し側が縮む必要がある＝
`.pnm-mypage__card-head` の `min-width: 0`（③節）が**必須**。外すと長い見出しが
ボタンを押し出してカードからはみ出す。 */
/* 🔴 0.7.349：`align-items` を `flex-start` → `center`（見出しが 16px になり、44px のボタンと上揃えだと
見出しが上に浮いて見えるため）。1行に並べる決定（0.7.251）は変えていない。 */
.pnm-mypage .pnm-mypage__card-top {
flex-direction: row;
align-items: center;
justify-content: space-between;
flex-wrap: nowrap;
gap: 8px 16px;
}
/* 操作ボタン群。🔴 **0.7.251：`nowrap` ＋ `flex: none`**＝会員情報の2ボタンも、
ご相談カードの「バッジ＋ボタン」も、**PC では必ず横一列**にする（崇さんの依頼）。
`flex: none` でボタン群は縮まず、余った幅は見出し側（`min-width:0`）が引き受ける。
⚠️ `margin-left: auto` は 0.7.250 では「折り返した行が左寄せになるのを防ぐ」ためだったが、
`nowrap` にした 0.7.251 以降は**右端に寄せる保険**として残している（`space-between` と同義）。 */
.pnm-mypage .pnm-mypage__card-actions {
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-end;
flex: none;
margin-left: auto;
}
/* バッジ行が操作ボタン群の中にあるとき（ご相談カードの「これまでのご相談 N件」等）は、
**ボタンの左に横並び**。⚠️ 縦積み用の下余白（6px）は、この位置では中心がずれるので 0 に。 */
.pnm-mypage .pnm-mypage__card-actions > .pnm-mypage__card-badges {
flex-wrap: nowrap;
margin-bottom: 0;
}
}
/* =========================================================================
* ④ 会員情報カード：メールアドレス行と、ボタン2つ（0.7.219）。
* 🔴 **崇さんの明示依頼**（2026-09-02）＝パスワード変更が3階層奥にあったのを
* マイページから1クリックで着くようにした。
* ⚠️ **持つのは padding / margin / gap だけ。** 色・文字サイズ・角丸・枠は
* カード側のインラインのまま（このファイルの ⚠️「カード側の文字サイズ・アイコン 56px・
* 角丸 20px・影は引き続きインラインのまま＝ここでは指定しない」と同じ切り分け）。
* ⚠️ **新しい色は1つも足していない**＝#F7F8F5 / #E5E7EB / 角丸16px は
* `class-pnm-mypage.php` の empty_state() と同値、12.5px はバッジ、14.5px は card-text と同値。
* ========================================================================= */
/* メールアドレス行。上の余白は .pnm-mypage__card-top の margin-bottom:8px が空ける
（0.7.249 までは .pnm-mypage__card-head の margin-bottom:16px だった）。
⚠️ 下は「行間 6px」（0.7.250・依頼で指定された値）。 */
/* 🔴 0.7.349：地 --pnm-subtle・枠 1px --pnm-line・角丸 8px（旧インライン #F7F8F5 / #E5E7EB / 16px）。 */
.pnm-mypage .pnm-mypage__card-account {
padding: 16px;
margin-bottom: 6px;
background: var( --pnm-subtle );
border: 1px solid var( --pnm-line );
border-radius: 8px;
}
/* ラベル（「ログイン中のメールアドレス」）と値の間。 */
.pnm-mypage .pnm-mypage__card-account-label {
display: block;
margin-bottom: 8px;
font-size: 12px;
font-weight: 600;
color: var( --pnm-muted );
}
/* 値（メールアドレス）。⚠️ `word-break` は 360px で長いアドレスがはみ出さないために要る。 */
.pnm-mypage .pnm-mypage__card-account-value {
display: block;
font-size: 14px;
font-weight: 700;
color: var( --pnm-ink );
word-break: break-all;
}
/* 🔴 **【0.7.250 で廃止】ボタン2つの間隔（`.pnm-mypage__card-btns { gap: 12px }`）。**
* **原文は消していない**（#438 の記法）＝下の3行は 0.7.219 時点の取り決めとしてそのまま残す。
* 0.7.250 で会員情報カードのボタン2本も `.pnm-mypage__card-actions`（gap:6px）へ移したため、
* `.pnm-mypage__card-btns` は**どのカードからも出力されなくなった**＝ルールごと削除した。
* ⚠️ **12px は新しい値ではない**＝この2本を包む親の行（説明文とボタン群を並べる flex 行）が
* 既にインラインで `gap:12px` を持っており、それと同値にそろえてある。
* （8px グリッドの例外は #480 で承認済みの 12px と同じ値。崇さん確定・2026-09-02）
*/
@media screen and ( min-width: 600px ) {
.pnm-mypage .pnm-mypage__card-account {
padding: 16px 24px;
}
}
/* =========================================================================
* ⑤ アカウント設定＝パスワード変更専用画面（`?pnm_account_settings=1`・0.7.221）。
*
* 🔴 **崇さんの指示**（2026-09-02）＝中間メニューを廃止してパスワード変更専用にし、
* ミツクルのトンマナに合わせる。
*
* 🔴 **スコープは `PNM_Mypage::ACCOUNT_WRAP_CLASS`（`.pnm-account`）の配下だけ。**
* ⚠️ **`#wpmem_pwdchange_form` を単独で狙わない**（テーマ・他画面へ漏らさない）。
*
* 🔴 ★実マークアップ（2026-09-02・崇さんの実機・**ログイン中**。推測ではない）：
* form#wpmem_pwdchange_form.form > fieldset（クラス無し） >
* legend「パスワードを変更」／label「新規パスワード」／
* input#pass1.password[type=password]／label「新しいパスワードを確認」／
* input#pass2.password[type=password]／
* input[type=hidden]（a / redirect_to / formsubmit）／input[type=submit].buttons
* ＋ form 直下に input[type=hidden]（_wpmem_pwdchange_nonce / _wp_http_referer）
*
* 🔴 ⚠️ **未ログインの `?a=pwdreset` とは構造が違う。`assets/css/pnm-pwdreset.css` を流用しないこと。**
* あちらに在って**こちらに無い**もの＝`#wpmem_login` のラッパー／`div.div_text`／
* `div.button_div`／`div.link-text`。**label と input が fieldset の直下に並んでいる。**
* ⇒ 行間は `div.div_text` ではなく **input 自身の margin-bottom** で取る。
* 🔴 **`pnm-pwdreset.css` はこの画面に読ませない**（`PNM_Mypage::maybe_enqueue_pwdreset_assets()` は
* 未ログイン＋`PWDRESET_ACTIONS` のときだけ enqueue する＝ログイン中は載らない）。**値だけ流用する。**
*
* ★色・角丸・余白は新しく決めず既存値を流用する（出典つき）：
* ボタン … `includes/class-pnm-mypage.php` の card_profile()「会員情報を編集する」と同値
* （#ffffff / #5C8A2E / 15px / 700 / 14px 28px / 9999px / 2px solid #7CB342）。
* ラベル … `assets/css/pnm-register.css` の `#wpmem_reg label`（15px / 700 / #2B2B2B / 1.5 / 10px）。
* 行間 … 同 `#wpmem_reg .div_text` の 28px。
* 入力欄 … `assets/css/pnm-pwdreset.css` の入力欄（44px / 12px 14px / 16px / 1.5px solid #E5E7EB / 8px）
* とフォーカス（#7CB342 ／ rgba(124,179,66,0.15)）。
* 非表示 … `assets/css/wizard.css` の `.pnm-wait-close`（視覚的非表示の作法）。
* ⚠️ **新しい色・新しい数字は1つも足していない。**
*
* 🔴 ⚠️ **このファイルの「`!important` は使わない」の唯一の例外がここ。【要追認】**
* **崇さんの承認は得ていない**（両エージェントの指摘・2026-09-02）。冒頭の docblock と
* `docs/handoff.md`『未決事項』0-AA を参照。**追認が取れなければ `!important` を外す。**
* ⚠️ 冒頭の禁止（#480 の B 案）の理由付けは「**当プラグイン自身の**インラインstyleに勝つために
* 全行 `!important` が要る」という限定的なもので、**「第三者CSSなら対象外」とは書かれていない**
* ＝**今回そう解釈しただけ**（原文の言い換えではない）。
* ここで相手にするのは**編集できない第三者CSS**＝WP-Members の `forms/generic-no-float.min.css` と
* `swell_child/css/wp-members.css`（**テーマは触らない**）。
* 実測の算出値＝legend `rgb(92,107,192)`／submit `rgb(85,85,254)` の青紫。
* ⚠️ `assets/css/pnm-pwdreset.css` も同じ相手に `!important` を使っているが、
* 🔴 **「色系だけ」ではない**＝`float` / `width` / `margin` にも添えている（`:89-93`・`:105-109`）。
* **先例の範囲は本PRより広い**（本PRは色系3つに絞った）。
* ⇒ **`!important` は色・背景・枠線の3つだけに限定する。乱用しない。**
* ========================================================================= */
/* 内側のカード感を消す（外側の白カード1枚に見せる）。
⚠️ 実測で **form の background は rgba(0,0,0,0)＝透明**＝灰色は form の背景ではない。
⇒ ここで打ち消せるのは **fieldset の既定の枠（groove）と余白**まで。
🔴 それでも灰色が残る場合、出どころは未特定（推測でテーマ／WP-Members のクラス名を書かないこと）。 */
.pnm-account #wpmem_pwdchange_form,
.pnm-account #wpmem_pwdchange_form fieldset {
background: transparent;
border: 0;
box-shadow: none;
margin: 0;
padding: 0;
min-width: 0;
}
/* 見出し（legend「パスワードを変更」）。当方の h1「パスワードの変更」と二重になるので視覚的に隠す。
🔴 **文言は書き換えない**（WP-Members の出力）。
⚠️ `display:none` にせず視覚的非表示にする＝fieldset の名前として支援技術には残す。 */
.pnm-account #wpmem_pwdchange_form legend {
position: absolute;
width: 1px;
height: 1px;
margin: 0;
padding: 0;
overflow: hidden;
clip: rect( 0 0 0 0 );
clip-path: inset( 50% );
white-space: nowrap;
border: 0;
}
/* ラベル（「新規パスワード」「新しいパスワードを確認」）。入力欄の上・左寄せ。 */
.pnm-account #wpmem_pwdchange_form label {
display: block;
margin: 0 0 10px;
font-size: 15px;
font-weight: 700;
line-height: 1.5;
color: #2B2B2B;
text-align: left;
}
/* 入力欄（#pass1 / #pass2）。W-17：iOS の自動ズーム対策で 16px 下限。
⚠️ 行を包む `div.div_text` がこの画面には無いので、行間は input の margin-bottom で取る。 */
.pnm-account #wpmem_pwdchange_form input[type="password"] {
display: block;
width: 100%;
box-sizing: border-box;
min-height: 44px;
margin: 0 0 28px;
padding: 12px 14px;
font-size: 16px;
line-height: 1.6;
color: #2B2B2B;
background: #ffffff;
border: 1.5px solid #E5E7EB;
border-radius: 8px;
}
.pnm-account #wpmem_pwdchange_form input[type="password"]:focus {
border-color: #7CB342;
box-shadow: 0 0 0 3px rgba( 124, 179, 66, 0.15 );
outline: none;
}
/* 送信ボタン（input[type=submit].buttons）。既定は青紫の塗り・角丸3px・ほぼ全幅。
⇒ マイページの「会員情報を編集する」と同じピル型（白地・緑文字・緑枠）に揃える。
⚠️ `