/* ページ全体を左右分割 */
body {
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
}

form#form1 {
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;              /* 横並び */
    width: 100%;
}

/* 左側（青） */
.left-side {
    flex: 0.8;                  /* 画面の半分を占有 */
    background-color: #0055a5;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    min-width: 330px;
    min-height: 610px;
}

    /* ロゴ＋タイトル */
    .left-side .logo {
        text-align: center;
    }

        .left-side .logo .project-title {
            font-size: 24px;
            font-weight: bold;
        }

/* 右側（白） */
.right-side {
    flex: 1.2;
    background-color: #fff;
    display: flex;
    justify-content: center;        /* 横方向を中央揃え */
    align-items: center;            /* 縦は上から */
    box-sizing: border-box;
    min-width: 460px;
    min-height: 610px;
    height: auto;                   /* 高さを自動に */
}

#login-area {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: stretch;           /* ボタンやリンクを横幅100% */
    margin-bottom: 20px;            /* reCAPTCHA 表示時に余裕を持たせる */
}

/* ログインボックス */
.login-box {
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;         /* 縦並び */
    gap: 20px;
    align-items: stretch;           /* ボタン・リンクを横幅100%に揃える */
}

/* 入力欄 */
.label {
    display: block;
    font-size: 18px;
    color: #333;
    margin-bottom: 4px;
}

.input-text {
    width: 95%;
    padding: 10px;
    font-size: 18px;
    border: 1px solid #333;
    border-radius: 4px;
    display: block;
    margin: 0 auto;
}

/* ログインボタン */
.btn-login {
    width: 100%;
    padding: 12px;
    font-size: 18px;
    background-color: #025093;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-bottom: 15px;
}

    .btn-login:hover {
        background-color: #003465;
    }

/* 区切り線 */
.login-divider {
    width: 100%;
    height: 1px;                    /* 少し太くする */
    min-height: 1px;
    background-color: #ccc;
    margin: 10px 0;
    display: block;
}

/* パスワード入力欄の親要素を相対配置に */
#password-area {
    position: relative;             /* これがないと絶対配置がずれる */
}

/* パスワード表示アイコン */
.toggle-password-eye {
    position: absolute;
    right: 10px;                    /* 入力欄の右端からの距離 */
    top: 70%;
    transform: translateY(-50%);
    font-size: 16px;
    cursor: pointer;
    color: #555;
}

#recaptchaV2Area {
    text-align: center;
}

#recaptchaV2Message {
    font-size: 14px;
    font-weight: bold;
}

/* 未登録の方テキスト */
.unregistered-text {
    text-align: center;
    font-size: 18px;
    color: #333;
    margin-bottom: 15px;
}

/* 会員登録ボタン */
.register-btn-area {
    width: 100%;
    text-align: center;
    margin-bottom: 8px;
}

.btn-register {
    display: block;             /* 横幅100%にする */
    width: 100%;
    padding: 12px;
    font-size: 18px;
    background-color: #025093;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    text-decoration: none;      /* 下線を消す */
    box-sizing: border-box;     /* 枠線を含めて100%幅に */
}

    .btn-register:hover {
        background-color: #003465;
    }


/* 説明リンク */
.info-link {
    display: block;             /* 横幅100%にする */
    text-align: center;
    font-size: 18px;
}

    .info-link a {
        color: #0058a3;
        text-decoration: underline;
    }