/* auth-form.css — ログイン・パスワード再設定の画面 (2026-10-28 みんと「ログインの画面の作りをそろえる」)
   手本は NEETech のパートナーログイン。リスコア・ビズ・みんなの写真・NEETech・クリパチ・トキテツ・SkyMeal・4MaRi10 で同じファイルを使い、
   サイトごとに変えるのは下の :root の色と上下の余白だけ (余白はサイトの外枠が持つ分を引いて決める)。読み込みと「表示」ボタンの動きは templates/auth_form_assets.php。
   並べ方: .af の中に (.af-head) → .af-card → .af-new → .af-note → .af-other (使い方は member/login.php)。管理画面のログインも同じ並べ方 (templates/admin_login_view.php・外枠は admin_login_layout.php)
   新規登録は .af.af--reg の中に (.af-head) → .af-main (カード) → .af-info (登録でできること・料金) (使い方は member/register.php) */
:root{
  --af-accent:#b12d3d;       /* ログインなどの主ボタン */
  --af-accent-hover:#93202f;
  --af-link:#b12d3d;         /* 文字のリンク */
  --af-focus:#b12d3d;        /* 入力欄を選んだときの枠 */
  --af-ink:#333333;          /* 文字 */
  --af-muted:#6f6f6f;        /* 弱い文字 */
  --af-line:#e3e2e2;         /* 枠線 */
  --af-soft:#f4f4f2;         /* 薄い地 (新規登録の箱・表示ボタン) */
  --af-new:#333333;          /* 新規登録のボタン */
  --af-new-hover:#111111;
  --af-mark:none;            /* 小見出しの左の四角 (使うサイトは block) */
  --af-space-top:0px;        /* カードの上の余白 (外枠の .cp-main が上 52px を持つ) */
  --af-space-bottom:0px;     /* 下の余白 (外枠が 88px を持つ) */
}

.af{max-width:460px;margin:0 auto;padding:var(--af-space-top) 0 var(--af-space-bottom);color:var(--af-ink);font-size:15px;line-height:1.7;}
.af *,.af *::before,.af *::after{box-sizing:border-box;}
.af a{color:var(--af-link);text-decoration:none;}
.af a:hover{text-decoration:underline;}

/* 見出しの帯が無いサイトだけ、カードの上に見出しを出す */
.af-head{margin:0 0 24px;}
.af-eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 8px;color:var(--af-muted);font-size:12px;font-weight:700;letter-spacing:.2em;}
.af-eyebrow::before{content:"";display:var(--af-mark);flex:none;width:8px;height:8px;background:var(--af-focus);}
.af-title{margin:0;color:var(--af-ink);font-size:28px;font-weight:700;line-height:1.4;}
.af-head-lead{margin:10px 0 0;color:var(--af-muted);font-size:14px;}

.af-card{padding:32px 30px;border:1px solid var(--af-line);border-radius:20px;background:#fff;}
.af-lead{margin:0 0 20px;color:var(--af-muted);font-size:14px;}

/* お知らせ (エラー・送信しました) */
.af-msg{margin:0 0 20px;padding:14px 16px;border-radius:12px;font-size:14px;line-height:1.7;}
.af-msg--err{background:#fdeceb;color:#a61b1b;}
.af-msg--ok{background:#eaf6ee;color:#1c5e33;}
.af-msg strong{display:block;margin:0 0 4px;font-size:15px;}
.af-msg p{margin:0;}
.af-msg p + p{margin-top:6px;}

.af-label{display:block;margin:0 0 8px;color:var(--af-ink);font-size:14px;font-weight:700;}
.af-input{display:block;width:100%;height:52px;margin:0 0 18px;padding:0 16px;border:1px solid var(--af-line);border-radius:12px;background:#fff;color:var(--af-ink);font:inherit;font-size:16px;}
.af-input:focus{outline:2px solid var(--af-focus);outline-offset:1px;border-color:var(--af-focus);box-shadow:none;}
.af-hint{margin:-10px 0 18px;color:var(--af-muted);font-size:13px;}
.af-pass{position:relative;}
.af-pass .af-input{padding-right:84px;}
.af-show{position:absolute;top:8px;right:8px;height:36px;padding:0 12px;border:0;border-radius:8px;background:var(--af-soft);color:var(--af-ink);font:inherit;font-size:13px;font-weight:700;line-height:36px;cursor:pointer;}
.af-show:hover{filter:brightness(.96);}

.af-submit{display:block;width:100%;margin:4px 0 0;padding:16px;border:0;border-radius:999px;background:var(--af-accent);color:#fff;font:inherit;font-size:17px;font-weight:700;line-height:1.4;text-align:center;cursor:pointer;}
.af-submit:hover{background:var(--af-accent-hover);}
.af a.af-submit,.af a.af-submit:hover{color:#fff;text-decoration:none;}
.af-links{margin:16px 0 0;text-align:center;font-size:14px;}

/* はじめての方 (新規登録) */
.af-new{margin-top:16px;padding:24px 30px;border-radius:20px;background:var(--af-soft);text-align:center;}
.af-new p{margin:0 0 12px;color:var(--af-muted);font-size:14px;}
.af .af-new a{display:block;padding:14px;border-radius:999px;background:var(--af-new);color:#fff;font-weight:700;text-decoration:none;}
.af .af-new a:hover{background:var(--af-new-hover);}

/* サイトだけの案内 (みんなの写真の「写真を購入する方へ」など) */
.af-note{margin-top:16px;padding:20px 24px;border-radius:20px;background:var(--af-soft);font-size:14px;}
.af-note-title{margin:0 0 6px;font-size:15px;font-weight:700;}
.af-note p{margin:0;}

/* もう一方のログイン (会員⇔求人企業) */
.af-other{margin:20px 0 0;text-align:center;color:var(--af-muted);font-size:13px;}

/* ---- 新規登録とパスワードを決める画面 (2026-10-28・手本は NEETech のパートナー新規登録) ---- */
/* 2列: 左に「登録でできること」と料金・右にカード。スマホはカードが上 */
.af--reg{max-width:1000px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);grid-template-areas:"head head" "info main";column-gap:48px;align-items:start;}
.af--reg > .af-head{grid-area:head;}
.af--reg > .af-main{grid-area:main;}
.af--reg > .af-info{grid-area:info;}
/* ログイン用に狭くしてある各サイトの外枠 (container-tight・auth-box・rc-auth-main) を、2列のときだけ広げる */
:is(.container-tight,.auth-box,.rc-auth-main):has(> .af--reg){max-width:1032px !important;}
.af-steps{display:flex;gap:6px;margin:0 0 26px;padding:0;list-style:none;counter-reset:afs;}
.af-steps li{flex:1 1 0;padding-top:10px;border-top:3px solid var(--af-line);color:var(--af-muted);font-size:12px;font-weight:700;line-height:1.5;counter-increment:afs;}
.af-steps li::before{content:counter(afs) ". ";}
.af-steps li.is-now{border-top-color:var(--af-accent);color:var(--af-link);}
.af-steps li.is-done{border-top-color:var(--af-new);color:var(--af-ink);}
.af-card-title{margin:0 0 6px;color:var(--af-ink);font-size:20px;font-weight:700;line-height:1.5;}
.af-input::placeholder{color:#9aa1a8;}
.af-fine{margin:12px 0 0;color:var(--af-muted);font-size:12px;line-height:1.8;}
.af-login{margin:24px 0 0;padding-top:20px;border-top:1px solid var(--af-line);text-align:center;color:var(--af-muted);font-size:14px;}
.af .af-login a{display:block;margin-top:10px;padding:12px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--af-new);color:var(--af-new);font-weight:700;text-decoration:none;}
.af .af-login a:hover{background:var(--af-soft);}
/* 同意・メールマガジン */
.af-check{display:flex;align-items:flex-start;gap:10px;margin:0 0 10px;font-size:14px;line-height:1.6;cursor:pointer;}
.af-check input{flex:0 0 auto;width:18px;height:18px;margin:2px 0 0;accent-color:var(--af-accent);}
.af-checks{margin:4px 0 20px;}
.af-req{margin-left:6px;color:#a61b1b;font-size:12px;font-weight:700;}
.af-opt{margin-left:6px;color:var(--af-muted);font-size:12px;}
/* 確かめ済みのメールアドレスなど、入力しない値 */
.af-static{margin:0 0 18px;padding:13px 16px;border-radius:12px;background:var(--af-soft);font-size:15px;overflow-wrap:anywhere;}
.af-badge{display:inline-block;margin-left:8px;padding:1px 9px;border-radius:999px;background:#eaf6ee;color:#1c5e33;font-size:12px;font-weight:700;vertical-align:1px;}
.af-row{display:flex;gap:10px;}
.af-row > *{flex:1 1 0;min-width:0;}
/* 登録でできること */
.af-info-eyebrow{margin:0 0 8px;color:var(--af-link);font-size:13px;font-weight:700;letter-spacing:.14em;}
.af-info-title{margin:0 0 26px;color:var(--af-ink);font-size:28px;font-weight:700;line-height:1.5;}
.af-merits{margin:0 0 32px;padding:0;list-style:none;}
.af-merits li{display:flex;gap:18px;padding:20px 0;border-top:1px solid var(--af-line);}
.af-merits li:last-child{border-bottom:1px solid var(--af-line);}
.af-ico{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:48px;height:48px;border:1.5px solid var(--af-link);border-radius:50%;color:var(--af-link);}
.af-merits h3{margin:2px 0 4px;color:var(--af-ink);font-size:17px;font-weight:700;line-height:1.5;}
.af-merits p{margin:0;color:var(--af-muted);font-size:14px;line-height:1.85;}
.af-fee{margin:0;border-radius:16px;background:var(--af-soft);overflow:hidden;}
.af-fee-row{display:flex;gap:16px;padding:16px 22px;}
.af-fee-row + .af-fee-row{border-top:1px solid #fff;}
.af-fee dt{flex:0 0 136px;color:var(--af-ink);font-size:14px;font-weight:700;}
.af-fee dd{margin:0;font-size:14px;}
.af-fee dd strong{color:var(--af-ink);font-size:16px;}
.af-fee dd small{display:block;color:var(--af-muted);font-size:12px;line-height:1.7;}
@media (max-width:900px){
  .af--reg{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "main" "info";row-gap:40px;}
  .af--reg > .af-head{margin-bottom:-16px;}
  .af-info-title{font-size:22px;}
  .af-fee-row{flex-direction:column;gap:2px;}
  .af-fee dt{flex-basis:auto;}
}

@media (max-width:640px){
  .af-steps li{font-size:11px;}   /* 細いカードでも「1. メールアドレス」が1行に収まるように */
  .af-title{font-size:24px;}
  .af-card{padding:26px 20px;}
  .af-new{padding:22px 20px;}
  .af-note{padding:18px 20px;}
}

/* ---- 管理画面のログイン (2026-10-28・templates/admin_login_view.php・8サイトで同じ形) ---- */
/* 外枠は各サイトの templates/admin_login_layout.php (公開ページと同じヘッダーをロゴだけ・同じフッター・手本は みんなの写真の print/login.php) */
.af-input--code{font-size:24px;font-weight:700;letter-spacing:.35em;text-align:center;}
.af-linkbtn{padding:0;border:0;background:none;color:var(--af-link);font:inherit;cursor:pointer;}
.af-linkbtn:hover{text-decoration:underline;}
.af-sep{margin:0 .7em;color:var(--af-line);}
.af-gutter{padding:0 16px;}   /* 外枠に左右の余白が無いサイト (SkyMeal・4MaRi10) の管理画面のログイン */