/* 無料登録画面(仕様 signup-direct §7)。Views/Registration/StepInput.cshtml と StepComplete.cshtml だけが読み込む。
   クラスは su- 接頭辞。レイアウト(AdminLTE / Bootstrap 3)と衝突するところはここで上書きする */
html, body { background: #f3f6f9; }

.su-hd, .su-page {
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
    color: #1f2d3d;
    font-size: 14px;
    line-height: 1.7;
}
.su-hd a, .su-page a { color: #1e6cb5; }
.su-hd a:hover, .su-hd a:focus, .su-page a:hover, .su-page a:focus { color: #0088a0; }

/* ヘッダー */
.su-hd { background: #fff; border-bottom: 1px solid #dfe5ec; }
.su-hd-inner { max-width: 1040px; margin: 0 auto; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; }
.su-hd-logo { flex: none; margin-right: 12px; }
.su-hd-logo img { display: block; height: 30px; width: auto; }
.su-hd-name { flex: none; margin-right: 12px; font-size: 18px; font-weight: 700; }
.su-hd-login { font-size: 13px; text-decoration: none; text-align: right; }

/* ページ */
.su-page { max-width: 1040px; margin: 0 auto; padding: 28px 16px 48px; }
.su-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-gap: 36px; gap: 36px; align-items: start; }
.su-grid.su-grid-single { grid-template-columns: minmax(0, 560px); justify-content: center; }

/* 左: 訴求(LocalBase のときだけ) */
.su-pitch h1 { font-family: inherit; font-size: 26px; font-weight: 700; line-height: 1.45; margin: 0 0 10px; color: #1f2d3d; }
.su-pitch h1 em { font-style: normal; background: linear-gradient(90deg, #0088a0, #1e6cb5); -webkit-background-clip: text; background-clip: text; color: transparent; }
.su-pitch p { margin: 0 0 20px; color: #34495e; }
.su-pitch p.su-sub { font-size: 13px; color: #5b6b7b; margin: -12px 0 20px; }
.su-flow { background: #fff; border: 1px solid #dfe5ec; border-radius: 10px; padding: 18px 20px; }
.su-flow h3 { font-family: inherit; font-size: 14px; font-weight: 700; margin: 0 0 14px; color: #1f2d3d; }

/* 登録後の流れ: 縦のタイムライン(アイコンの丸を縦線でつなぐ。仕様 signup-direct §12-2) */
.su-tl { list-style: none; margin: 0; padding: 0; }
.su-tl li { position: relative; display: flex; align-items: flex-start; padding: 0 0 18px; }
.su-tl li:last-child { padding-bottom: 0; }
.su-tl li:not(:last-child)::before { content: ""; position: absolute; left: 17px; top: 38px; bottom: 4px; width: 2px; background: #d7e6ec; }
.su-tl-ic { flex: none; position: relative; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-right: 14px; border-radius: 50%; background: #e6f3f6; color: #0088a0; font-size: 16px; }
.su-tl-title { display: block; margin-top: 2px; font-size: 14px; line-height: 1.5; }
.su-tl-desc { display: block; font-size: 12.5px; line-height: 1.6; color: #5b6b7b; }

/* カード(フォーム・登録完了)。上端のアクセント線は付けない */
.su-card { background: #fff; border: 1px solid #dfe5ec; border-radius: 10px; box-shadow: 0 2px 10px rgba(0, 0, 0, .07); padding: 24px 26px; }
.su-card-title { font-family: inherit; font-size: 19px; font-weight: 700; margin: 0 0 4px; color: #1f2d3d; }
.su-lead { margin: 0 0 18px; color: #5b6b7b; font-size: 13px; }

/* エラー(フォーム上部) */
.su-toperr { margin: 0 0 16px; padding: 10px 14px; border: 1px solid #dd4b39; border-radius: 6px; background: #fff6f5; color: #dd4b39; font-size: 13px; }

/* 入力項目 */
.su-f { margin-bottom: 14px; }
.su-f > label { display: block; font-weight: 700; font-size: 13px; margin: 0 0 5px; }
.su-req { display: inline-block; margin-left: 6px; padding: 0 4px; border: 1px solid #dd4b39; border-radius: 3px; color: #dd4b39; font-size: 11px; font-weight: 700; line-height: 1.5; vertical-align: 1px; }
.su-input { display: block; width: 100%; height: 42px; margin: 0; padding: 0 12px; border: 1px solid #cfd8e1; border-radius: 6px; background: #fff; color: #1f2d3d; font: inherit; box-shadow: none; }
.su-input:focus { outline: 2px solid rgba(0, 136, 160, .35); border-color: #0088a0; }
.su-hint { margin-top: 4px; font-size: 12px; color: #5b6b7b; }
.su-emsg { margin-top: 4px; font-size: 12px; color: #dd4b39; }
.su-emsg:empty { display: none; }
.su-f.su-err .su-input { border-color: #dd4b39; background: #fff6f5; }

/* パスワードの表示切替 */
.su-pw { position: relative; }
.su-pw .su-input { padding-right: 52px; }
.su-pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); padding: 4px 6px; border: 0; background: none; color: #5b6b7b; font-size: 12px; cursor: pointer; }
.su-pw-toggle:hover, .su-pw-toggle:focus { color: #0088a0; }

/* 同意 */
.su-f.su-f-agree { margin: 6px 0 14px; }
.su-f > .su-agree { display: flex; align-items: flex-start; margin: 0; padding: 12px 14px; border: 1px solid #e1ecf1; border-radius: 8px; background: #f5f9fb; font-size: 13px; font-weight: 400; cursor: pointer; }
.su-agree input[type="checkbox"] { flex: none; width: 18px; height: 18px; margin: 3px 10px 0 0; accent-color: #0088a0; cursor: pointer; }
.su-agree a { text-decoration: underline; }
.su-f-agree.su-err .su-agree { border-color: #dd4b39; background: #fff6f5; }

/* Turnstile */
.su-turnstile { margin-bottom: 16px; min-height: 65px; }

/* 主ボタン */
.su-btn { display: flex; align-items: center; justify-content: center; width: 100%; height: 52px; margin: 0; border: 0; border-radius: 8px; background: #f08300; color: #fff; font: inherit; font-size: 17px; font-weight: 700; cursor: pointer; box-shadow: 0 3px 8px rgba(240, 131, 0, .3); }
.su-btn .fa { margin-left: 8px; }
.su-btn:hover, .su-btn:focus { background: #e07a00; color: #fff; }
.su-btn.su-btn-off, .su-btn[disabled], .su-btn[disabled]:hover { background: #f3c48e; box-shadow: none; cursor: not-allowed; }
.su-note { margin: 10px 0 0; font-size: 12px; color: #5b6b7b; text-align: center; }
.su-login { margin: 14px 0 0; font-size: 13px; text-align: center; }

/* 登録完了 */
.su-done { max-width: 720px; margin: 0 auto; }
.su-done-top { display: flex; align-items: center; margin-bottom: 14px; }
.su-done-icon { flex: none; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-right: 14px; border-radius: 50%; background: #e3f6ec; color: #00a65a; font-size: 26px; }
.su-done-title { font-family: inherit; font-size: 21px; font-weight: 700; margin: 0; color: #1f2d3d; }
.su-mailbox { display: flex; align-items: flex-start; margin: 6px 0 18px; padding: 16px 18px; border: 1px solid #cfe0fb; border-radius: 8px; background: #eef5fe; }
.su-mailbox-icon { flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-right: 14px; border-radius: 50%; background: #1a73e8; color: #fff; font-size: 18px; }
.su-mailbox-body { min-width: 0; }
.su-mailbox-lead { display: block; font-size: 15px; font-weight: 700; }
.su-mailbox dl { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-gap: 4px 12px; gap: 4px 12px; margin: 8px 0 0; font-size: 13px; }
.su-mailbox dt { color: #5b6b7b; font-weight: 400; }
.su-mailbox dd { margin: 0; font-weight: 600; word-break: break-all; }
/* 登録完了メールの送信に失敗したとき(黄色) */
.su-mailbox.su-mailbox-ng { border-color: #f5d38a; background: #fff8e6; }
.su-mailbox-ng .su-mailbox-icon { background: #f39c12; }
.su-mailbox-ng a { text-decoration: underline; }
.su-steps { list-style: none; margin: 0 0 18px; padding: 0; }
.su-steps li { display: flex; align-items: flex-start; padding: 12px 14px; border: 1px solid #dfe5ec; border-radius: 8px; }
.su-steps li + li { margin-top: 10px; }
.su-steps-n { flex: none; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-right: 12px; border-radius: 50%; background: #0088a0; color: #fff; font-size: 13px; font-weight: 700; }
.su-steps-title { display: block; font-weight: 700; }
.su-steps-desc { font-size: 13px; color: #46586a; }
.su-page a.su-btn2 { display: inline-flex; align-items: center; height: 46px; padding: 0 26px; border-radius: 8px; background: #0088a0; color: #fff; font-weight: 700; text-decoration: none; }
.su-page a.su-btn2:hover, .su-page a.su-btn2:focus { background: #007489; color: #fff; text-decoration: none; }
.su-btn2 .fa { margin-left: 8px; }
.su-miss { margin-top: 18px; padding: 12px 14px; border: 1px solid #f5d38a; border-radius: 8px; background: #fff8e6; font-size: 13px; }
.su-miss-title { display: block; margin-bottom: 4px; font-weight: 700; }
.su-miss ul { margin: 0; padding-left: 1.2em; }
.su-miss a { text-decoration: underline; }

/* スマホ(〜860px): 1 列でフォームが先 */
@media (max-width: 860px) {
    .su-grid { grid-template-columns: minmax(0, 1fr); }
    .su-pitch { order: 2; }
    .su-pitch h1 { font-size: 21px; }
    .su-page { padding: 20px 16px 40px; }
    .su-card { padding: 20px 16px; }
    .su-hd-logo img { height: 24px; }
    .su-hd-name { font-size: 16px; }
    .su-mailbox { flex-direction: column; }
    .su-mailbox-icon { margin: 0 0 10px; }
}