.login-wrap { display:grid; place-items:center; padding:32px 16px; }
.login-card {
  width:min(520px, 92vw);
  background:#fff; border:1px solid #e5e7eb; border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.06); padding:28px 24px;
}
.login-title { margin:0 0 6px; font-size:1.6rem; font-weight:800; color:#1f4ea0; text-align:center; }
.login-desc  { margin:0 0 18px; color:#4b5563; font-size:.95rem; text-align:center; }

.login-form { display:grid; gap:16px; }
.login-label { display:block; font-weight:700; color:#374151; font-size:.92rem; }
.login-label input[type="text"],
.login-label input[type="email"],
.login-label input[type="password"] {
  display:block; width:95%; margin-top:6px; padding:12px 14px;
  border:1px solid #cbd5e1; border-radius:8px; outline:none;
}
.login-label input:focus { border-color:#3b82f6; box-shadow:0 0 0 3px rgba(59,130,246,.15); }

.pw-field { position:relative; }
.pw-field input { padding-right:44px; }
.pw-toggle {
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  border:none; background:transparent; cursor:pointer; padding:6px; border-radius:6px;
}
.pw-toggle:hover { background:#f3f4f6; }

.btn-primary {
  width:100%; margin-top:4px; padding:12px 16px;
  background:#1f4ea0; color:#fff; border:none; border-radius:10px;
  font-weight:700; font-size:1.05rem; cursor:pointer;
}
.btn-primary:hover { filter:brightness(1.05); }

.login-help { margin:14px 0 2px; text-align:center; color:#4b5563; }
.login-help a { color:#2563eb; text-decoration:underline; }

/* ============================
   📱 スマホ最適化（横スクロール防止）
============================ */

html, body {
  overflow-x: hidden;
}

/* 入力フォームを画面内に収める */
.login-label input[type="text"],
.login-label input[type="email"],
.login-label input[type="password"] {
  width: 100%;
  box-sizing: border-box;
}

/* パスワードアイコンの配置が理由で横スクロールしないよう調整 */
.pw-field {
  width: 100%;
  box-sizing: border-box;
}

/* カードの横幅をスマホ基準に調整 */
.login-card {
  width: 100%;
  max-width: 480px;
  margin: auto;
  padding: 24px 16px;
  box-sizing: border-box;
}

/* スマホ時の余白調整 */
@media (max-width: 768px) {

  .login-wrap {
    padding: 16px;
  }

  .login-card {
    padding: 20px 14px;
  }

  .login-title {
    font-size: 1.4rem;
  }
}