/* login.css ― ログイン画面 */
.login-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}
.login-box {
    width: 360px;
    background: #1c2e3d;
    padding: 28px 28px;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .08);
}
.login-title {
    margin: 0 0 4px;
    font-size: 18px;
    text-align: center;
    color: #2a3f5f;
}
.login-sub {
    margin: 15px 0 20px;
    text-align: center;
    color: #ffffff;
    font-size: 13px;
}
.field { margin-bottom: 16px; }
.field label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    color: #ffffff;
}
.field input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #cfd6e0;
    border-radius: 6px;
    font-size: 14px;
}
.field input:focus {
    outline: none;
    border-color: #4a80d6;
    box-shadow: 0 0 0 3px rgba(74, 128, 214, .15);
}
/* 入力エラー(common.css の .is-error)
   このカードは紺地に白文字なので、項目名の赤は明るめにする。
   枠と背景の赤は common.css のものがそのまま効く。 */
.login-box .field.is-error label { color: #ff9a91; }

.pass-wrap { position: relative; }
.pass-wrap input { padding-right: 44px; }
.btn-pass-toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: #7a8494;
}
.btn-pass-toggle:hover { background: rgba(74, 128, 214, .12); color: #4a80d6; }
.btn-pass-toggle:focus { outline: none; box-shadow: 0 0 0 3px rgba(74, 128, 214, .15); }
.field-check {
    margin-bottom: 20px;
    font-size: 13px;
    color: #ffffff;
}
.field-check input { vertical-align: middle; margin-right: 6px; }
.btn-row {
    display: flex;
    gap: 10px;
}
.btn-login {
    flex: 2;
    padding: 11px;
    border: none;
    border-radius: 6px;
    background: #4a80d6;
    color: #fff;
    font-size: 15px;
    cursor: pointer;
    transition: background .15s ease;
}
.btn-login:hover { background: #3a6cc0; }
.btn-clear {
    flex: 1;
    padding: 11px;
    border: 1px solid #3a4f63;
    border-radius: 6px;
    background: rgba(255, 255, 255, .06);
    color: #aeb9c6;
    font-size: 15px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.btn-clear:hover {
    background: rgba(255, 255, 255, .12);
    color: #ffffff;
}
.logo_box {
    max-width: 150px;
    margin: auto;
}