@charset "UTF-8";

/* ▼ 画面全体の背景と配置 */
.login-pf-page {
  min-height: 100vh;
  /* 画面中央寄せ */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  /* 背景：うっすらグレー */
  /* background-color: #f3f4f6; */
  /* background-image: none; */

  background-image: url("../images/bg.jpg");
  background-size: cover;
  background-position: center;  
}

/* ▼ 上部の大きいタイトル（loginTitleHtml の kc-logo-text） */
#kc-header {
  margin-bottom: 1.5rem;
}

#kc-header-wrapper .kc-logo-text {
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #111827;
}

/* ▼ ログインカード本体（フォームが入っている白い枠） */
.login-pf-page .card-pf {
  width: 100%;
  max-width: 520px; /* 横幅。狭めたいなら 420px などに */
  padding: 2.5rem 3rem;
  border-radius: 10px;
  border: none;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.18);
  background-color: #ffffff;
}

/* ▼ 「アカウントにログイン」の見た目 */
.login-pf-header #kc-page-title {
  font-size: 1.4rem;
  font-weight: 500;
  color: #111827;
  margin-bottom: 1.5rem;
}

/* ▼ ラベルと入力欄 */
#kc-form label.pf-c-form__label-text {
  font-weight: 500;
  color: #374151;
  margin-bottom: 0.25rem;
}

#kc-form .pf-c-form-control {
  border-radius: 6px;
  border-color: #d1d5db;
  box-shadow: none;
}

#kc-form .pf-c-form-control:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 1px #2563eb;
}

/* ▼ パスワード欄の右側アイコンボタン */
.pf-c-input-group .pf-c-button.pf-m-control {
  border-radius: 0 6px 6px 0;
}

/* ▼ ログインボタン */
#kc-login.pf-c-button.pf-m-primary {
  background-color: #2563eb;
  border-color: #2563eb;
  border-radius: 9999px; /* 丸み。四角にしたければ 4px くらいに */
  font-weight: 600;
}

#kc-login.pf-c-button.pf-m-primary:hover {
  background-color: #1d4ed8;
  border-color: #1d4ed8;
}

/* ボタンを少し長めに見せる */
#kc-login.pf-c-button.pf-m-primary.pf-m-block.btn-lg {
  padding-left: 2rem;
  padding-right: 2rem;
}

/* ▼ 補助リンク（パスワード忘れなど）があれば色を整える */
#kc-form-options a,
.login-pf-page a {
  color: #2563eb;
}

#kc-form-options a:hover,
.login-pf-page a:hover {
  color: #1d4ed8;
  text-decoration: underline;
}