body {
  font-size: 0.875rem
}

.auth-page-brand-icom {
    /* 画像幅とcard幅の割合(切り上げ)[ 197 / 305 * 100 ≒ 64.75] */
    width: min(64.75%, 197px);
    height: auto;
    /**
     * 左右マージンとcard幅の割合(切り上げ)[ 54 / 305 * 100 ≒ 17.75] 
     * 画像の高さが取得できないため、現在のロゴサイズから固定値で割合を設定
     */
    margin: min(14.75vw, 65px) min(17.75%, 54px);
}

.icom-auth-card {
    width: 305px;
    padding: 0px 3rem 2.5rem;
    border-radius: 16px;
    box-sizing: content-box;
}

.icom-auth-card .login-logo {
    width: 100%;
    display: flex;
    justify-content: center;
}

.icom-auth-card .login-logo a {
    width: 100%;
}

.card-header.icom-auth-card-header {
    margin-top: 1.25rem;
    padding-bottom: unset;
    padding-left: 0px;
    padding-right: 0px;
    border-bottom-style: none;
}

.card-body.icom-auth-card-body {
    padding: 1.25rem 0rem 0.75rem;
    label {
        margin-bottom: 0.25rem;
    }
    .form-control {
        height: 44px;
        padding-left: 0.5rem;
        padding-right: 0rem;
        border-top-left-radius: 6px;
        border-bottom-left-radius: 6px;
        font-size: 0.875rem;
        border-color: #e0e0e0;
    }
    .input-group-text {
        padding-left: 0.375rem;
        padding-right: 0.375rem;
        border-top-right-radius: 6px;
        border-bottom-right-radius: 6px;
        font-size: 1rem;
        border-color: #e0e0e0 #e0e0e0 #e0e0e0 transparent;
    }
    .input-group .form-control ~ .input-group-append .input-group-text,
    .input-group .form-control:focus ~ .input-group-append .input-group-text {
        border-color: #e0e0e0 #e0e0e0 #e0e0e0 transparent;
    }

    .form-control.is-invalid  {
        border-color: #fe3334;
    }
    .input-group .form-control.is-invalid ~ .input-group-append .input-group-text,
    .input-group .form-control.is-invalid:focus ~ .input-group-append .input-group-text {
        border-color: #fe3334 #fe3334 #fe3334 transparent;
        background-color: #ff9f9f;
    }
    
    /* textbox */
    .input-group.icom-textbox .form-control {
        color        : #000000;
    }
    .input-group.icom-textbox .form-control::placeholder {
        color   : #d1d1d1;
    }
    .input-group.icom-textbox .input-group-append > .input-group-text {
        color        : #616161;
    }
    .input-group.icom-textbox.icom-textbox-size-m .form-control {
        border-radius : 0.25rem;
        height        : 2.25rem;
    }
    .input-group.icom-textbox.icom-textbox-size-l .form-control {
        height        : 2.75rem;
    }
    .input-group.icom-textbox.icom-textbox-size-m .input-group-append > .input-group-text {
        border-top-right-radius    : 0.25rem;
        border-bottom-right-radius : 0.25rem;
    }
    .input-group.icom-textbox.icom-textbox-size-l:not(:has(.input-group-append)) .form-control {
        border-top-right-radius    : 0.375rem;
        border-bottom-right-radius : 0.375rem;
    }
    .input-group.icom-textbox.icom-textbox-size-l:has(.form-control:focus)
    {
      border-radius : 0.375rem;
    }
    .input-group.icom-textbox.icom-textbox-size-m:has(.form-control:focus)
    {
      border-radius : 0.25rem;
    }
    .input-group.icom-textbox:has(.is-invalid) ~ .invalid-feedback{
      display: block;
    }
}
.card-body.register-card-body.icom-auth-card-body{
    /* textbox  */
     .input-group.icom-textbox.icom-textbox-size-l:not(:has(.input-group-append)) .form-control {
        border-right    : 1px solid #e0e0e0;
    }
     .input-group.icom-textbox.icom-textbox-size-l:not(:has(.input-group-append)) .form-control.is-invalid {
        border-right-color    : #fe3334;
    }
}

.icom-auth-header-title {
    font-weight: 600;
    font-size: 1.25rem;
}


.icom-auth-header-text {
    color: #616161;
}

.icom-line {
    border-bottom: solid;
    border-bottom-color: rgba(0, 0, 0, 0.125);
    border-bottom-width: 1px;
}

.icom-box {
    height: 44px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom:0.75rem;
    .icom-auth-remember-pw {
        input[type="checkbox"] {
            opacity:0;
            -webkit-appearance: none;
            appearance: none;
            position: absolute;
        }
        input[type="checkbox"] + .icom-auth-remember-pw-label:before {
            display: inline-block;
            content: '';
            width: 1.375rem;
            height: 1.375rem;
            border: 1px solid #757575;
            border-radius: 4px;
            vertical-align: middle;
            margin-right: 0.5rem;
        }
        .icheck-primary > input:first-child:not(:checked):not(:disabled):hover + label::before{
            /* ichech-bootstrap.min.css での ホバー時の強調枠設定を打ち消す */
            border: 1px solid #757575;
        }
        input[type="checkbox"]:checked + .icom-auth-remember-pw-label:before {
            font-family: 'icom-material-icons' !important;
            font-size: 1.25rem;
            color: #ffffff;
            content: "\e908";
            display: inline;
            vertical-align: middle;
            background-color: #0066ff;
            margin-right: 0.5rem;
            border: 1px solid #005ce5;
        }
        .icom-auth-remember-pw-label {
            padding-top: calc((44px - 0.875rem) / 2);
            padding-bottom: calc((44px - 0.875rem) / 2);
            margin-top: calc(-1 * (44px - 0.875rem) / 2);
            margin-bottom: calc(-1 * (44px - 0.875rem) / 2);
        }
        [class*=icheck-]>input:first-child:checked+label::after {
            /* icheck-bootstrapが表示するチェックマークは不要なので、無効にしておく */
            content : none;
        }
    }
    .icom-auth-forgot-pw {
        .icom-auth-forgot-pw-link {
            padding-top: calc((44px - 0.875rem) / 2);
            padding-bottom: calc((44px - 0.875rem) / 2);
            margin-top: calc(-1 * (44px - 0.875rem) / 2);
            margin-bottom: calc(-1 * (44px - 0.875rem) / 2);
        }
    }
}
.icom-box>*:first-child {
}

.icom-box>*:last-child {
    margin-left: auto;
}


.icom-auth-btn {
    font-size: 0.875rem;
    background-color: #000000;
    color: #ffffff;
}

.btn.icom-auth-rounded-btn {
    position: relative;
    font-size: 0.875rem;
    background-color: #000000;
    color: #ffffff;
    height: 2.75rem;
    border-radius: calc(2.75rem/2) !important;
}

.btn.icom-auth-rounded-btn:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #ffffff;
    opacity: 0;
}

.btn.icom-auth-rounded-btn:hover::before {
    opacity: 0.08;
}

.btn.icom-auth-rounded-btn:active::before {
    opacity: 0.32;
}

/* :focus(icomコンポーネント(button/dropdown/textbox/toggle switch) ) */
.input-group.icom-textbox:has(.form-control:focus),  /* テキスト入力 */
.input-group.icom-textbox .custom-file .custom-file-input:focus ~ .custom-file-label,/* ファイル入力 */
.toggle-switch_sub > input:focus ~ .toggle-switch_base,                              /* toggle switch */
.icom-button-wide:focus:not(:focus-visible),                                         /* ボタン */
.icom-dropdown-wrapper .form-control:focus                                           /* ドロップダウンリスト */
{
    outline       : 2px solid #000000;  /* 外側の線になる2pxの一本線の枠線をひく */
    outline-offset: 1px;                /* 境界と外側線の間の白線 */
}
.icom-dropdown-wrapper:not(:has(.is-invalid)) .form-control:focus {
    border-color: #e0e0e0;
}
/* :focus(上記以外 ) */
a:focus,             /* リンク */
.icom-auth-remember-pw input[type="checkbox"]:focus + .icom-auth-remember-pw-label:before
{
    border : 0;
    outline: 2px solid #000000;
}
button:not(.icom-button-wide):focus
{
    border : 0;
    outline: 2px solid #000000;
    outline-offset: 1px;                /* ボタンのバックグラウンドが黒なので、フォーカス枠が見えるように、境界とフォーカス枠の間に白線。  */
}