/* ===========================================================
   基本リセット & 共通設定
   =========================================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

html,
body {
    height: 100%
}

:root {
    --c-primary: #111;
    --c-accent: #2a78d0;
    --c-muted: #dcdcdc;
}

body {
    display: flex;
    flex-direction: column;
    font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6;
    background: #fff;
    color: var(--c-primary);
}

/* Anchor */
a {
    color: var(--c-accent);
    text-decoration: none
}

a:hover {
    text-decoration: underline
}

/* Header */
header {
    background: var(--c-muted);
    text-align: center;
    padding: .75rem 1rem;
}

header .aptitle {
    font-weight: 700;
    color: var(--c-primary)
}

header .aptitle:hover {
    color: var(--c-accent);
    text-decoration: none
}


/* Main Wrapper */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 1rem;
}

.main-content h2 {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    text-align: center;
}


/* 共通ブロック幅 */
#loginForm,
#forgotUsername,
#forgotPassword,
#resetPasswordForm,
#twoFactorAuthForm,
#appTwoFactorAuthForm {
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#loginForm>*+*,
#forgotUsername>*+*,
#forgotPassword>*+*,
#resetPasswordForm>*+*,
#twoFactorAuthForm>*+*,
#appTwoFactorAuthForm>*+* {
    margin-top: 1.25rem;
}


/* フォーム入力・ラベル */
form label,
#forgotUsername label,
#forgotPassword label,
#resetPasswordForm label {
    width: 100%;
    text-align: left;
    font-size: .9rem;
    margin-bottom: .4rem;
}

form input[type="text"],
form input[type="password"],
form input[type="email"],
#forgotUsername input[type="text"],
#forgotUsername input[type="email"],
#forgotPassword input[type="text"],
#forgotPassword input[type="email"],
#resetPasswordForm input[type="password"] {
    width: 100%;
    padding: .8rem 1.2rem;
    font-size: 1rem;
    border: 2px solid var(--c-primary);
    border-radius: 25px;
    outline: none;
    margin-bottom: 1rem;
}


/* 入力欄のデザイン：テキスト・パスワードのみ */
#resetPasswordForm input[type="password"],
#resetPasswordForm input[type="text"] {
    width: 100%;
    padding: .8rem 1.2rem;
    font-size: 1rem;
    border: 2px solid var(--c-primary);
    border-radius: 25px;
    outline: none;
    margin-bottom: 1rem;
    box-sizing: border-box;
}

/* チェックボックス＋ラベルを横並びで左寄せ */
#resetPasswordForm .checkbox-row {
    display: flex;
    align-items: center;
    gap: 0.4em;
    margin-bottom: 2rem;
    width: 100%;
}

#resetPasswordForm input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--c-accent);
    margin: 0;
}

#resetPasswordForm .small-text {
    font-size: .93em;
}

/* 「パスワード確認」欄 */
#confirmPassword {
    margin-bottom: 0rem !important;
}

/* ログインフォーム */
/* ログインフォーム */
#login-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ログインフォーム内のラベルは中央揃え */
#login-form>label {
    width: 100%;
    text-align: center;
    font-size: .9rem;
    margin-bottom: .4rem;
}

/* パスワード表示の行も中央揃え */
#login-form .login-checkbox-row {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .45rem;
    margin-top: 0;
    margin-bottom: 1.25rem;
}

#login-form .login-checkbox-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
}

#login-form .login-checkbox-row .small-text {
    font-size: .93rem;
    line-height: 1;
}

/* ボタンスタイル */
button:not(.toast-close),
#registrationButton {
    width: 160px;
    border: none;
    background: var(--c-primary);
    color: #fff;
    padding: .7rem 1rem;
    font-size: 1rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background .25s;
    margin: 40px auto;
    display: block;
}

#submitButton {
    margin: 24px auto
}

#requestButton {
    width: 220px;
    white-space: nowrap;
    margin-bottom: 70px;
    font-size: 14px;
}

#resetPasswordButton {
    width: 240px;
    white-space: nowrap
}

.backbutton {
    width: 130px;
    background: #fff !important;
    color: var(--c-primary) !important;
    border: 2px solid var(--c-primary) !important;
    margin: 20px auto;
    display: block;
}

.backbutton:hover {
    background: #e6e6e6 !important;
    color: var(--c-primary) !important;
}

button:not(.backbutton):hover,
#registrationButton:hover,
#submitButton:hover,
#requestButton:hover,
#resetPasswordButton:hover {
    background: #615f5fc3;
}


/* 2FA コード入力 */
#twoFactorAuthForm label,
#appTwoFactorAuthForm label {
    width: 100%;
    text-align: center;
    margin-bottom: .4rem
}

#twoFactorAuthForm label[for="twoFactorCode"],
#appTwoFactorAuthForm label[for="appTwoFactorCode"] {
    display: block;
    width: 220px;
    margin: 0 auto .4rem;
    text-align: left;
}

#twoFactorCode,
#appTwoFactorCode {
    width: 220px;
    padding: .9rem 1.2rem;
    font-size: 1.25rem;
    text-align: center;
    border: 2px solid var(--c-primary);
    border-radius: 12px;
    letter-spacing: .2em;
    outline: none;
    margin: .5rem auto 1.5rem;
    display: block;
}

#verifyButton,
#verifyAppTwoFactorCodeButton {
    margin-bottom: 20px
}


/* 補助テキスト */
p.small-text,
#forgotUsernameLink,
#forgotPasswordLink {
    font-size: .8rem;
    cursor: pointer;
    text-align: center;
}

.top3 {
    margin-top: 1.5rem
}

.bottom3 {
    margin-bottom: 1.5rem
}

.top1 {
    margin-top: .5rem
}


/* CSP対策 */
#passwordError,
#confirmPasswordError {
    display: none;
}

/* エラーメッセージ */
#messageBox,
#appMessageBox,
#passwordError,
#confirmPasswordError {
    width: 100%;
    color: red;
    font-size: .9rem;
    text-align: center;
}


/* JS 切替ブロック表示 */
#forgotUsername,
#forgotPassword,
#resetPasswordForm,
#twoFactorAuthForm,
#appTwoFactorAuthForm {
    display: none
}

/* フッター */
footer {
    background: var(--c-muted);
    text-align: center;
    padding: .5rem 0;
    font-size: .875rem;
}

footer ul {
    list-style: none;
    display: flex;
    justify-content: center;
    margin: .5rem 0;
}

footer ul li+li {
    margin-left: 1rem
}

footer a.no-underline {
    color: var(--c-primary)
}

footer a.no-underline:hover {
    color: var(--c-accent)
}

/* トースト通知 */
.toast-container {
    position: fixed;
    left: 50%;
    bottom: 1.25rem;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    z-index: 9999;
    pointer-events: none;
}

.toast {
    position: relative;
    display: block;
    pointer-events: auto;
    min-width: 280px;
    max-width: 90vw;
    padding: 1rem 1.25rem;
    border-radius: 10px;
    font-size: .98rem;
    line-height: 1.45;
    color: #fff;
    background: #e74c3c;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .23);
    overflow: hidden;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity .32s cubic-bezier(.25, .8, .25, 1),
        transform .32s cubic-bezier(.25, .8, .25, 1);
}

.toast-show {
    opacity: 1;
    transform: translateY(0);
}

.toast-hide {
    opacity: 0;
    transform: translateY(40px);
}

/* バリエーション */
.toast.success {
    background: #16a34a;
}

.toast.info {
    background: #2563eb;
}

/* メッセージ領域 */
.toast-msg {
    display: block;
    width: 100%;
    padding-right: 2.5rem;
    text-align: left;
}

.toast-close {
    all: unset;
    position: absolute;
    top: .4rem;
    right: .55rem;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    cursor: pointer;
    z-index: 3;
}

.toast-close:hover {
    opacity: .7;
}

/* カスタムダイアログのオーバーレイ */
.custom-dialog {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    background: rgba(0, 0, 0, .2);
    align-items: center;
    justify-content: center;
}

/* 表示用（JSでdisplay:flexに変更） */
.custom-dialog[style*="display: flex"] {
    display: flex !important;
}

/* ダイアログ本体 */
.custom-dialog-inner {
    background: #fff;
    max-width: 90vw;
    padding: 2em 1.5em;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 2px 16px rgba(0, 0, 0, .22);
}

/* メッセージ部 */
.custom-dialog-msg {
    margin-bottom: 2em;
}

/* OKボタン */
.custom-dialog-btn {
    padding: .7em 2em;
    border-radius: 8px;
    font-size: 1rem;
    border: none;
    background: #2563eb;
    color: #fff;
    cursor: pointer;
    transition: background .18s;
}

.custom-dialog-btn:hover {
    background: #1d4ed8;
}

/* =========================================
   ユーザー名忘れ / パスワード忘れ STEP1
   ========================================= */
#forgotUsername>p,
#forgotPassword>p {
    width: 100%;
    text-align: center;
}

#forgotUsername>label,
#forgotPassword>label {
    display: block;
    width: 100%;
    text-align: center;
    font-size: .9rem;
    margin-bottom: .4rem;
}

/* 共通の 1.25rem 上余白を打ち消す */
#forgotUsername>label+input,
#forgotPassword>label+input {
    margin-top: 0 !important;
}