@charset "UTF-8";
/* customer-login.css ─ hpデザインと共存（header/footerを壊さない＋フッター最下部） */

:root{
  --login-bg:#f9f9fb;
  --login-card:#fff;
  --login-border:#e6e8ec;
  --login-radius:12px;
  --login-shadow:0 8px 24px rgba(0,0,0,0.06);
  --login-primary:#007bff;
  --login-text:#222;
  --login-muted:#555;
  --login-transition:.2s ease-in-out;
  --login-info-bg:#f5f9ff;
  --login-info-border:#c7d8f5;
}

*{ box-sizing:border-box; }

html, body{ height:100%; }

body{
  margin:0;
  background: var(--login-bg);
  color: var(--login-text);
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main.container{
  flex: 1;
  padding: 16px;
}

.login-wrapper{
  width: 100%;
  max-width: 480px;
  margin: 24px auto;
}

.login-wrapper h2{
  margin: 0 0 16px;
  font-size: 1.6rem;
  font-weight: 700;
}

.login-wrapper .message{
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 0.95rem;
  margin: 0 0 10px;
  border: 1px solid transparent;
}
.login-wrapper .message.error{
  background:#ffe6e6;
  color:#a00;
  border-color:#f5c2c2;
}
.login-wrapper .message.info{
  background:#e6f0ff;
  color:#0353a4;
  border-color:#c7d8f5;
}
.login-wrapper .message.success{
  background:#e6ffe6;
  color:#1b8e3f;
  border-color:#b7e4b7;
}

.login-wrapper form.login-form{
  background: var(--login-card);
  padding: 20px 22px;
  border: 1px solid var(--login-border);
  border-radius: var(--login-radius);
  box-shadow: var(--login-shadow);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.login-wrapper .field{
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: center;
}

.login-wrapper .field label{
  flex: 0 0 110px;
  font-weight: 700;
  margin: 0;
}

.login-wrapper .field input{
  flex: 1 1 0;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #c8d3e0;
  border-radius: 8px;
  font-size: 1rem;
  background: #fff;
  transition: border-color var(--login-transition), box-shadow var(--login-transition);
}

.login-wrapper .field input:focus{
  outline: none;
  border-color: var(--login-primary);
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.18);
}

.login-wrapper button[type="submit"]{
  padding: 12px 18px;
  background: var(--login-primary);
  color: #fff;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 700;
  transition: filter var(--login-transition);
  align-self: flex-start;
}
.login-wrapper button[type="submit"]:hover{
  filter: brightness(.95);
}

.login-wrapper .small{
  font-size: 0.9rem;
  margin-top: 12px;
  color: var(--login-muted);
}

.login-wrapper a{
  color: var(--login-primary);
  text-decoration: none;
}
.login-wrapper a:hover{
  text-decoration: underline;
}

.login-help{
  margin-top: 18px;
  padding: 16px 18px;
  background: var(--login-info-bg);
  border: 1px solid var(--login-info-border);
  border-radius: 12px;
}

.login-help h3{
  margin: 0 0 10px;
  font-size: 1rem;
  font-weight: 700;
  color: #0353a4;
}

.login-help p{
  margin: 0 0 10px;
  font-size: 0.95rem;
  color: #24415c;
}

.login-help-list{
  margin: 0;
  padding-left: 1.2rem;
  color: #24415c;
}

.login-help-list li{
  margin-bottom: 6px;
  font-size: 0.92rem;
}

@media (max-width: 600px){
  .login-wrapper .field{
    flex-direction: column;
    align-items: stretch;
  }
  .login-wrapper .field label{
    width: 100%;
  }
  .login-wrapper button[type="submit"]{
    align-self: stretch;
  }
  .login-help{
    padding: 14px 14px;
  }
}