/* Login Page Styles */

/* レイアウト（お問い合わせフォームと同じトーン） */
.page-login .login-page__inner {
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding-inline: var(--content-inner-padding-inline);
  padding-block: var(--space-xl);
  letter-spacing: 0.05em;
}

.login-section-heading {
  font-size: var(--fs-section-heading-sub);
  font-weight: 900;
  line-height: var(--lh-normal);
  color: var(--color-text);
  margin: 0 0 var(--space-md);
}

.login-page__form-intro {
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  color: var(--color-text);
  margin: 0 0 var(--space-lg);
}

/* エラー表示 */
.login-page__error {
  margin-bottom: var(--space-lg);
  padding: var(--space-md);
  border-radius: var(--radius-sm);
  background-color: rgba(220, 53, 69, 0.06);
  border: 1px solid rgba(220, 53, 69, 0.35);
  color: #b02a37;
  font-size: var(--fs-sm);
}

.login-page__error p {
  margin: 0;
}

/* 既にログイン済みメッセージ */
.login-page__already {
  max-width: 480px;
  margin-inline: auto;
  padding: var(--space-xl);
  background: #fff;
  border: 1px solid var(--color-sub3);
  border-radius: var(--radius-sm);
  text-align: center;
}

.login-page__already-text {
  margin: 0 0 var(--space-sm);
  font-size: var(--fs-md);
  color: var(--color-text);
}

.login-page__already-link a {
  font-weight: bold;
  color: var(--color-corporate);
  text-decoration: none;
}

.login-page__already-link a:hover {
  text-decoration: underline;
}

/* WordPress wp_login_form 出力 */
.page-login .login-page__form {
  max-width: 100%;
  margin-bottom: var(--space-2xl);
}

.page-login .login-page__form #loginform {
  width: 100%;
  max-width: 480px;
  margin-inline: auto;
  padding: var(--space-xl);
  background: #fff;
  border: 1px solid var(--color-sub3);
  border-radius: var(--radius-sm);
  box-sizing: border-box;
}

.page-login .login-page__form #loginform label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: bold;
  color: var(--color-text);
  margin-bottom: var(--space-xs);
}

.page-login .login-page__form #loginform input[type="text"],
.page-login .login-page__form #loginform input[type="password"] {
  width: 100%;
  max-width: 100%;
  padding: var(--space-s) var(--space-sm);
  font-size: var(--fs-md);
  border: 1px solid var(--color-sub3);
  border-radius: var(--radius-sm);
  background: #fff;
  box-sizing: border-box;
}

.page-login .login-page__form #loginform input[type="text"]:focus,
.page-login .login-page__form #loginform input[type="password"]:focus {
  outline: none;
  border-color: var(--color-corporate);
  box-shadow: 0 0 0 1px var(--color-corporate-soft),
    0 0 0 4px rgba(49, 144, 238, 0.18);
}

.page-login .login-page__form #loginform p {
  margin-bottom: var(--space-md);
}

.page-login .login-page__form #loginform #rememberme {
  margin-right: var(--space-xxs);
}

.page-login .login-page__form #loginform .submit {
  margin-top: var(--space-md);
  text-align: center;
}

.page-login .login-page__form #loginform .submit input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 180px;
  padding: 0.75em 1.75em;
  border-radius: 999px;
  border: none;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--gradient-hero);
  color: #fff;
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease, filter 0.15s ease;
}

.page-login .login-page__form #loginform .submit input[type="submit"]:hover {
  filter: brightness(1.05);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.22);
  transform: translateY(-1px);
}

.page-login .login-page__form #loginform .submit input[type="submit"]:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
}

@media (max-width: 599px) {
  .page-login .login-page__form #loginform {
    padding: var(--space-md) var(--space-sm);
  }
}
