html,
body {
    height: 100%;
}


body {
    display: flex;
    align-items: center;
    padding-top: 40px;
    padding-bottom: 40px;
    color: #333333;
    font-family: "BIZ UDPGothic", sans-serif;
    font-weight: 400;
    font-style: normal;
    background-color: #f8fbff !important;
}

.form-signin {
    max-width: 330px;
    padding: 15px;
}



    /* 上下の境界線を重ねて“1本”に見せる（Bootstrap公式サンプルでもよく使う） */
    .form-signin .form-control:focus {
        z-index: 3;
    }

    /* ID：上段（下の角丸を潰す） */
    .form-signin .id-input {
        margin-bottom: -1px;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
    }

    /* PWグループ：下段全体の余白 */
    .form-signin .pw-group {
        margin-bottom: 10px;
    }

        /* PW入力：上の角丸を潰す（※ type=password じゃなく class で指定するのが超重要） */
        .form-signin .pw-group .pw-input {
            border-top-left-radius: 0;
            border-top-right-radius: 0;
        }

        /* 右の目ボタン側も“上の角丸を潰す” + 左側は一直線に */
        .form-signin .pw-group .pw-toggle {
            border-top-left-radius: 0;
            border-top-right-radius: 0;
            border-bottom-left-radius: 0; /* 入力との境界を揃える */
        }

        /* input-groupの中のform-floatingがちゃんと伸びる保険 */
        .form-signin .pw-group > .form-floating {
            flex: 1 1 auto;
            min-width: 0;
        }

.btn-custom-color {
    --bs-btn-bg: #004DA1 !important;
    --bs-btn-border-color: #004DA1 !important;
    --bs-btn-hover-bg: #006aa6 !important;
    --bs-btn-hover-border-color: #006aa6 !important;
    --bs-btn-active-bg: #005f96 !important;
    --bs-btn-active-border-color: #005f96 !important;
    --bs-btn-color: #fff !important;
    --bs-btn-hover-color: #fff !important;
    --bs-btn-active-color: #fff !important;
}


/* この値を「フォーム周りの背景色」に合わせる（例：カード内が薄グレーなら #f8f9fa など） */
:root {
    --floating-bg: var(--bs-body-bg);
}

/* 入力欄の背景 */
.form-floating > .form-control,
.form-floating > .form-select {
    background-color: var(--floating-bg);
}

/* ラベルの“白い板”（label::after）の背景も同じ色にする */
.form-floating > label::after {
    background-color: var(--floating-bg) !important;
}

/* Chrome/Edge の自動入力（黄色/白の塗り）を上書きして統一 */
.form-floating > .form-control:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--floating-bg) inset !important;
    box-shadow: 0 0 0 1000px var(--floating-bg) inset !important;
    -webkit-text-fill-color: inherit;
}

    /* 自動入力時にラベルが浮かない環境の保険（必要なら） */
    .form-floating > .form-control:-webkit-autofill ~ label {
        opacity: .65;
        transform: scale(.85) translateY(-.5rem) translateX(.15rem);
    }

        .form-floating > .form-control:-webkit-autofill ~ label::after {
            background-color: var(--floating-bg) !important;
        }

.chkbox {
    border: 1px solid #004DA1;
}
    .chkbox:checked {
        background-color: #004DA1;
    }

.list-style ul, .list-style li {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.btn-outline-custom {
    color: #004DA1;
    border: 1px solid #004DA1;
}

    .btn-outline-custom:hover {
        background-color: #004DA1;
        color: #fff;
        border: 1px solid #004DA1;
    }

    .btn-outline-custom:active,
    .btn-outline-custom.active,
    .btn-outline-custom:focus:active,
    .btn-outline-custom:focus-visible {
        background: #004DA1 !important;
        color: #fff;
        border: 1px solid #004DA1;
        transform: translateY(1px);
        box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    }


/* MfaEmail.cshtml */
.stepper {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin-bottom: 32px;
}

    .stepper::before {
        content: "";
        position: absolute;
        top: 14px;
        left: 0;
        right: 0;
        height: 4px;
        background: #ddd;
    }

.step {
    position: relative;
    text-align: center;
    flex: 1;
}

.circle {
    display: inline-block;
    width: 32px;
    height: 32px;
    line-height: 32px;
    border-radius: 50%;
    background: #adb5bd;
    color: #fff;
    z-index: 1;
}

.step.done .circle {
    background: #0066cc;
}

.label-done {
    display: block;
    margin-top: 6px;
    font-size: 0.8rem;
    color: #0066cc;
}

.label {
    display: block;
    margin-top: 6px;
    font-size: 0.8rem;
    color: #adb5bd;
} 
/* ここまで */

input {
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}