/* ===== PIXEL MARKET SignUp (Light) ===== */
:root{
  /* ベース（サイト全体と統一） */
  --pm-page:#f8fafc;
  --pm-bg:#ffffff;
  --pm-surface:#ffffff;
  --pm-surface-ghost:#f9fafb;
  --pm-border:#e5e7eb;
  --pm-text:#111827;
  --pm-dim:#6b7280;
  --pm-danger:#dc2626;

  /* アクセント */
  --pm-primary:#2563eb;
  --pm-primary-strong:#1d4ed8;
  --pm-grad:linear-gradient(180deg,var(--pm-primary),var(--pm-primary-strong));

  --pm-radius:14px;
  --pm-shadow:0 8px 24px rgba(17,24,39,.08);
}

body.visitors_user_statuses_sign_up{
  background: var(--pm-page);
  color: var(--pm-text);
}

#contents_area{ background: transparent; }

/* レイアウト */
.pm-signup{ max-width:1100px; margin:30px auto 60px; padding:0 16px; }
.pm-signup__inner{ display:grid; gap:18px; }

/* ヘッダー部 */
.pm-signup__head{ text-align:center; }
.pm-title{
  margin:0 0 6px;
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 800;
  color: var(--pm-text);
  letter-spacing:.01em;
}
.pm-lead{ margin:0 0 8px; color:var(--pm-dim); }
.pm-caution{ margin:0; padding-left:18px; color:var(--pm-dim); }
.pm-caution li{ list-style:disc; }

/* カード */
.pm-card{
  background: var(--pm-surface);
  border:1px solid var(--pm-border);
  border-radius: var(--pm-radius);
  box-shadow: var(--pm-shadow);
}
.pm-card__body{ padding: 20px; }

/* 行レイアウト */
.pm-row{
  display:grid; grid-template-columns: 220px 1fr; gap: 14px;
  padding:14px 0; border-bottom:1px dashed #e5e7eb;
}
.pm-row:last-child{ border-bottom:none; }
.pm-col--label h3{ margin:0; font-size:15px; color:var(--pm-text); }
.pm-required{
  display:inline-block; margin-left:8px; font-size:12px; color:#fff;
  padding:2px 6px; border-radius:999px; background: var(--pm-grad);
}

/* フィールド */
.pm-col--field input,
.pm-col--field select{
  background:#fff; color: var(--pm-text);
  border:1px solid var(--pm-border); border-radius:12px;
  padding:10px 12px; outline:none;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.pm-col--field input::placeholder{ color:#9ca3af; }

.pm-col--field input:focus,
.pm-col--field select:focus{
  border-color:#93c5fd;
  box-shadow:0 0 0 3px rgba(37,99,235,.15);
  background:#fff;
}

.pm-inline{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.pm-mini{ color:var(--pm-dim); font-size:12px; }
.pm-suffix{ color:var(--pm-dim); margin:0 6px; font-size:13px; }
.pm-mt8{ margin-top:8px; }

/* 入力サイズ */
input.half{ width:180px; }

/* セレクト（簡易トーン合わせ） */
.custom_select select{
  background:#fff;
  border:1px solid var(--pm-border);
  border-radius:12px;
  padding:10px 12px;
}

/* パスワード表示切替 */
.pm-password{ position:relative; }
.pm-password input{ width:100%; padding-right:44px; }
.pm-eye{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:34px; height:34px; border-radius:8px;
  border:1px solid var(--pm-border); background:#f3f4f6; cursor:pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.pm-eye:hover{ background:#eef2f7; }
.pm-eye span{
  position:absolute; inset:0; margin:auto; width:16px; height:10px; border:2px solid var(--pm-dim);
  border-top-left-radius:50% 80%; border-top-right-radius:50% 80%;
  border-bottom:none; top:9px;
}
.pm-eye.show span{ border-color:#111827; }
.pm-strength{ margin-top:6px; font-size:12px; color:var(--pm-dim); }

/* 同意 */
.pm-agree{ margin-top:10px; }
.pm-link{ color:var(--pm-primary); text-decoration:underline; }
.pm-link:hover{ opacity:.85; }

/* エラー */
.pm-error{ margin-top:6px; font-size:12px; color:var(--pm-danger); }
.pm-global-error{
  margin-top:14px; padding:10px 12px; border-radius:12px;
  background:#fee2e2; color:#7f1d1d; border:1px solid #fecaca;
}

/* ボタン */
.pm-actions{ margin:22px 0 6px; text-align:center; }
.pm-btn{
  display:inline-block; padding:12px 18px; border-radius:12px; font-weight:800; cursor:pointer;
  border:1px solid transparent; text-decoration:none;
  transition: opacity .15s ease, background-color .15s ease, border-color .15s ease, transform .04s ease;
}
.pm-btn:active{ transform: translateY(1px); }

.pm-btn--primary{ background: var(--pm-grad); color:#fff; box-shadow: var(--pm-shadow); }
.pm-btn:disabled{ opacity:.5; cursor:not-allowed; }

/* アクセシビリティ（任意でJSから付与しても可） */
.pm-col--field input.is-invalid,
.pm-col--field select.is-invalid,
.pm-col--field input[aria-invalid="true"],
.pm-col--field select[aria-invalid="true"]{
  border-color:#fca5a5;
  box-shadow:0 0 0 3px rgba(239,68,68,.12);
}

/* レスポンシブ */
@media (max-width: 992px){
  .pm-row{ grid-template-columns: 1fr; }
  input.half{ width:100%; }
}