@charset "UTF-8";
/* =========================================================================
   会員登録の段階(ステップ)表示（C-6）
   - JSが動かない環境では全段階を表示＝1画面と同等に入力・送信できる（グレースフルデグラデーション）。
   - JSが steps-enabled を付与したときだけ、アクティブな段階のみ表示に切り替える。
   - 見た目は登録ページ(login.css)の白基調・赤アクセントに合わせる。
   ========================================================================= */

/* 既定: 全ステップ表示（JS未動作でも入力・送信が破綻しないように） */
.reg-steps .reg-step { display: block; }
/* JS有効時: アクティブな段階のみ表示 */
.reg-steps.steps-enabled .reg-step { display: none; }
.reg-steps.steps-enabled .reg-step.active { display: block; }
/* JS未動作時は 次へ/戻る(type=button)を隠す（最後の「登録」ボタンは表示のまま＝送信可能） */
.reg-steps:not(.steps-enabled) .reg-next,
.reg-steps:not(.steps-enabled) .reg-prev { display: none; }

/* 進捗表示（今どこ／あと何段階か） */
.reg-progress { display: flex; list-style: none; padding: 0; margin: 4px 0 24px; }
.reg-progress li { flex: 1; text-align: center; font-size: 12px; color: #9b9b9b; position: relative; padding-top: 34px; line-height: 1.3; }
.reg-progress li::before { content: ""; position: absolute; top: 12px; left: 0; right: 0; height: 2px; background: #e0e0e0; z-index: 0; }
.reg-progress li:first-child::before { left: 50%; }
.reg-progress li:last-child::before { right: 50%; }
.reg-progress .reg-progress-num {
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 26px; height: 26px; line-height: 26px; border-radius: 50%;
    background: #e0e0e0; color: #fff; font-weight: 700; z-index: 1;
}
.reg-progress li.active { color: #ff0211; font-weight: 700; }
.reg-progress li.active .reg-progress-num { background: #ff0211; }
.reg-progress li.done { color: #ff6b7d; }
.reg-progress li.done .reg-progress-num { background: #ff9aa6; }
.reg-progress li.done::before, .reg-progress li.active::before { background: #ff9aa6; }

/* 段階のナビ（戻る／次へ）／修正3
   「次へ」「登録」はこの reg-nav が .mail_login の外にあるため login.css の赤ボタン指定が当たらず、
   文字のように見えてしまう。ここで最後の「登録」ボタン(login.css)と同じ見た目(赤・白文字・rem寸法)を与え、
   「戻る」は控えめ(白地・グレー枠)にして主となる「次へ」を目立たせる。 */
.reg-nav { display: flex; gap: 12px; justify-content: center; align-items: stretch; margin-top: 22px; flex-wrap: wrap; }
.reg-nav .button, .reg-nav input.button, .reg-nav .button-ghost {
    display: -webkit-inline-box; display: inline-flex;
    -webkit-box-pack: center; justify-content: center;
    -webkit-box-align: center; align-items: center;
    width: auto; min-width: 190px; height: 5rem; margin: 0; padding: 0 20px;
    border-radius: 0.6rem; font-size: 1.3rem; font-weight: bold; line-height: 1.4;
    text-align: center; cursor: pointer; box-sizing: border-box;
    -webkit-transition: 0.3s; transition: 0.3s;
}
/* 主ボタン：次へ／登録（赤・白文字。最後の「登録」と同一の見た目） */
.reg-nav .button, .reg-nav input.button {
    background-color: #ff0000; color: #ffffff; border: none;
}
.reg-nav .button:hover, .reg-nav input.button:hover {
    -webkit-transform: scale(1.03, 1.03); transform: scale(1.03, 1.03); opacity: 1;
}
/* 副ボタン：戻る（控えめ・白地グレー枠） */
.reg-nav .button-ghost {
    background: #fff; color: #555; border: 1px solid #ccc;
}
.reg-nav .button-ghost:hover { background: #f5f5f5; }

/* 確認一覧（入力内容の一覧表示） */
.reg-confirm { border-top: 1px solid #eee; margin: 8px 0 0; padding: 0; }
.reg-confirm dt { font-weight: 700; color: #5b5b5b; font-size: 12px; padding: 8px 0 0; margin: 0; }
.reg-confirm dd { margin: 0; padding: 2px 0 8px; border-bottom: 1px solid #eee; font-size: 14px; color: #222; word-break: break-word; overflow-wrap: anywhere; white-space: pre-wrap; }
.reg-step-note { font-size: 13px; color: #777; margin: 0 0 12px; }

/* --- 都道府県などの選択欄の矢印（□対策 / 修正1） ---
   app.css の .select_box:before は「Font Awesome 5 Pro」の字形(\F0D7)を使うが、登録ページ(登録・ログイン
   専用様式)はそのウェブフォントを読み込んでいないため□になる。書体に依存しないCSSの三角に置き換える。
   登録ページ(pageMakerRegister/pageUserRegister)のみに適用し、他画面には影響しない。 */
body#pageMakerRegister .select_box:before,
body#pageUserRegister .select_box:before { content: none !important; display: none !important; }
body#pageMakerRegister .select_box,
body#pageUserRegister .select_box { position: relative; }
body#pageMakerRegister .select_box:after,
body#pageUserRegister .select_box:after {
    content: ""; position: absolute; right: 16px; top: 50%; margin-top: -6px;
    width: 9px; height: 9px; border-right: 2px solid #666; border-bottom: 2px solid #666;
    transform: rotate(45deg); pointer-events: none; z-index: 2;
}