/*
 * ============================================================
 * SAKURAI ご用件WEB Branding v7
 * ============================================================
 *
 * Base:
 *   Pleasanter 1.5.4.0
 *
 * Actual theme:
 *   theme-version-1_0
 *
 * 方針:
 *
 *   ・テーマ1.0本来のヘッダー構造を維持する
 *   ・HeaderをFlexbox化しない
 *   ・NavigationsはPleasanter標準と同じfloat:right
 *   ・ロゴ画像サイズだけ変更
 *   ・ログイン画面の独自ブランド表示は維持
 *
 * Logo ratio:
 *   180 : 32
 *   = 5.625 : 1
 *
 * Desktop:
 *   270 x 48
 *
 * Smartphone:
 *   225 x 40
 * ============================================================
 */


/* ============================================================
 * 1. PC通常画面
 *
 * Pleasanter theme-version-1_0 の
 * 標準floatレイアウトを使用する。
 * ============================================================ */

@media screen and (min-width: 641px) {

    /*
     * Pleasanter標準:
     *
     * #Header
     *   ├─ #Logo
     *   └─ #Navigations
     *
     * display:flex は使用しない。
     */
    body.theme-version-1_0:not(#login) #Header {
        position: relative !important;

        display: block !important;

        float: left !important;
        clear: both !important;

        width: 100% !important;

        min-width: 0 !important;
        max-width: none !important;

        min-height: 56px !important;

        padding: 4px 8px !important;
        margin: 0 !important;

        box-sizing: border-box !important;
    }


    /* ========================================================
     * 左側ロゴ
     * ======================================================== */

    body.theme-version-1_0:not(#login)
    #Header > #Logo {
        position: static !important;

        display: block !important;

        float: left !important;
        clear: none !important;

        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;

        height: 48px !important;

        padding: 0 !important;
        margin: 0 !important;

        line-height: 1 !important;
    }


    body.theme-version-1_0:not(#login)
    #Header > #Logo > a {
        display: flex !important;

        align-items: flex-start !important;

        gap: 5px !important;

        width: auto !important;
        height: 48px !important;

        padding: 0 !important;
        margin: 0 !important;

        text-decoration: none !important;
    }


    body.theme-version-1_0:not(#login)
    #Header #CorpLogo {
        position: static !important;

        display: block !important;

        float: left !important;

        width: 270px !important;
        height: 48px !important;

        min-width: 270px !important;
        min-height: 48px !important;

        max-width: 270px !important;
        max-height: 48px !important;

        padding: 0 !important;
        margin: 0 !important;

        object-fit: contain !important;
        object-position: left top !important;
    }


    body.theme-version-1_0:not(#login)
    #Header #ProductLogo {
        position: static !important;

        display: block !important;

        float: left !important;

        width: auto !important;
        height: auto !important;

        padding: 0 !important;
        margin: 0 !important;
    }


    /* ========================================================
     * 右側ナビゲーション
     *
     * ここが今回の重要部分。
     *
     * Pleasanter標準と同様、
     * float:right でHeader右端へ追従させる。
     * ======================================================== */

    body.theme-version-1_0:not(#login)
    #Header > #Navigations {
        position: static !important;

        display: block !important;

        float: right !important;
        clear: none !important;

        width: auto !important;

        min-width: 0 !important;
        max-width: none !important;

        height: 30px !important;

        padding:
            0
            5px
            0
            15px
            !important;

        /*
         * ロゴと同じ最上段。
         */
        margin:
            0
            0
            0
            0
            !important;
    }


    /*
     * Navigation内部には干渉しない。
     *
     * #NavigationMenu
     * #AccountUserName
     * #SearchField
     * #Search
     *
     * はPleasanter標準CSSを使用する。
     */
}


/* ============================================================
 * 2. ログイン画面
 *
 * Pleasanter.net等を含む標準ヘッダーを非表示。
 * ============================================================ */

#login #Header {
    display: none !important;
}


/*
 * Pleasanter標準LoginLogoも非表示。
 */
#login #LoginLogo {
    display: none !important;
}


/* ============================================================
 * 3. ログイン画面
 * サクライ電器ロゴ
 * ============================================================ */

#login #SakuraiLoginLogo {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;

    padding: 0 !important;

    margin:
        72px
        auto
        40px
        !important;

    box-sizing: border-box !important;
}


#login #SakuraiLoginLogo img {
    display: block !important;

    width: 270px !important;
    height: 48px !important;

    min-width: 270px !important;
    min-height: 48px !important;

    max-width: 270px !important;
    max-height: 48px !important;

    padding: 0 !important;
    margin: 0 auto !important;

    object-fit: contain !important;
}


/* ============================================================
 * 4. スマートフォン
 *
 * ロゴを小さくし過ぎない。
 *
 * Header/Navigationsの配置については
 * Pleasanter responsive CSSを優先する。
 * ============================================================ */

@media screen and (max-width: 640px) {

    body:not(#login) #Header #CorpLogo {
        width: 225px !important;
        height: 40px !important;

        min-width: 0 !important;
        min-height: 0 !important;

        max-width: min(
            225px,
            calc(100vw - 100px)
        ) !important;

        max-height: 40px !important;

        padding: 0 !important;
        margin: 0 !important;

        object-fit: contain !important;
        object-position: left top !important;
    }


    #login #SakuraiLoginLogo {
        margin-top: 56px !important;
        margin-bottom: 32px !important;
    }


    #login #SakuraiLoginLogo img {
        width: 225px !important;
        height: 40px !important;

        min-width: 0 !important;
        min-height: 0 !important;

        max-width: calc(100vw - 32px) !important;
        max-height: none !important;

        object-fit: contain !important;
    }
}


/* ============================================================
 * 5. 320px級端末
 * ============================================================ */

@media screen and (max-width: 360px) {

    body:not(#login) #Header #CorpLogo {
        width: 202.5px !important;
        height: 36px !important;

        max-width: calc(100vw - 96px) !important;
        max-height: 36px !important;
    }


    #login #SakuraiLoginLogo img {
        width: 225px !important;
        height: auto !important;

        max-width: calc(100vw - 24px) !important;
    }
}

/* ===== SAKURAI LOGIN BRANDING V8 BEGIN ===== */

/*
 * ============================================================
 * SAKURAI Login Branding v8
 * ============================================================
 *
 * Base:
 *   Pleasanter 1.5.4.0
 *
 * IMPORTANT:
 *   PC通常画面のBranding v7には触れない。
 *   このブロックはログイン画面だけを対象とする。
 * ============================================================
 */


/* ============================================================
 * 1. Pleasanter標準ヘッダーをログイン時だけ非表示
 * ============================================================ */

#login #Header,
body:has(#LoginFieldSet) #Header {
    display: none !important;
}


/*
 * スマホ等でPleasanter.netリンクが
 * Header外に生成された場合も非表示。
 */
#login a[href*="pleasanter.net"],
body:has(#LoginFieldSet)
a[href*="pleasanter.net"] {
    display: none !important;
}


/*
 * Pleasanter標準LoginLogoも非表示。
 */
#login #LoginLogo,
body:has(#LoginFieldSet) #LoginLogo {
    display: none !important;
}


/* ============================================================
 * 2. サクライ電器ログインロゴ
 * ============================================================ */

#LoginFieldSet #SakuraiLoginLogo {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;

    padding: 0 !important;

    margin:
        0
        auto
        32px
        !important;

    box-sizing: border-box !important;
}


#LoginFieldSet #SakuraiLoginLogo img {
    display: block !important;

    width: 270px !important;
    height: 48px !important;

    min-width: 270px !important;
    min-height: 48px !important;

    max-width: 270px !important;
    max-height: 48px !important;

    padding: 0 !important;
    margin: 0 auto !important;

    object-fit: contain !important;
}


/* ============================================================
 * 3. PCログイン
 *
 * 四角いLoginFieldSet全体を
 * ブラウザ表示領域の中央へ配置。
 * ============================================================ */

@media screen and (min-width: 641px) {

    #login #LoginFieldSet,
    body:has(#LoginFieldSet) #LoginFieldSet {

        position: fixed !important;

        top: 50% !important;
        left: 50% !important;

        transform:
            translate(
                -50%,
                -50%
            )
            !important;

        /*
         * Pleasanter標準の
         * margin:150px auto 20px
         * を完全に無効化。
         */
        margin: 0 !important;

        /*
         * 低い画面でもログイン不能にならない。
         */
        max-height:
            calc(100vh - 32px)
            !important;

        overflow-y: auto !important;
    }
}


/* ============================================================
 * 4. SSO案内文
 *
 * 「SSO連携をご利用のお客様はこちらから
 *   ログインしてください。」
 * を非表示。
 * ============================================================ */

#LoginFieldSet .ssoLoginMessage {
    display: none !important;
}


/* ============================================================
 * 5. SSOボタン
 *
 * 元ラベル:
 *   SSO ログイン
 *
 * 新ラベル:
 *   SAKURAI Cloud IDでログイン
 * ============================================================ */

#LoginFieldSet #SSOLogin {
    min-width: 230px !important;

    /*
     * 元の文字だけを視覚的に消す。
     */
    font-size: 0 !important;

    white-space: nowrap !important;
}


#LoginFieldSet #SSOLogin::after {
    content:
        "SAKURAI Cloud IDでログイン";

    font-size: 13px !important;
    line-height: normal !important;
}


/*
 * SSOボタンの既存アイコンは維持。
 */
#LoginFieldSet #SSOLogin .ui-icon {
    font-size: initial !important;
}


/* ============================================================
 * 6. スマートフォン ログイン
 * ============================================================ */

@media screen and (max-width: 640px) {

    /*
     * スマホではPCのfixed中央配置を使用しない。
     */
    #LoginFieldSet {
        position: static;
        transform: none;
    }


    #LoginFieldSet #SakuraiLoginLogo {
        margin:
            0
            auto
            28px
            !important;
    }


    #LoginFieldSet #SakuraiLoginLogo img {
        width: 225px !important;
        height: 40px !important;

        min-width: 0 !important;
        min-height: 0 !important;

        max-width:
            calc(100vw - 48px)
            !important;

        max-height: none !important;
    }


    #LoginFieldSet #SSOLogin {
        min-width: 0 !important;
        max-width: 100% !important;
    }
}


/* ===== SAKURAI LOGIN BRANDING V8 END ===== */

/* ===== SAKURAI LOGIN SEPARATION V9 BEGIN ===== */

/*
 * ============================================================
 * SAKURAI Login Separation v9
 * ============================================================
 *
 * Base:
 *   Pleasanter 1.5.4.0
 *   Branding v8-fixed
 *
 * 通常ログインとSSOログインを視覚的に分離する。
 *
 * Pleasanter実DOM:
 *
 *   #LoginCommands
 *       └─ #Login
 *
 *   SSO領域
 *       └─ #SSOLogin
 *
 * ============================================================
 */


/* ============================================================
 * 1. 通常ログインボタン下に余白
 * ============================================================ */

#LoginFieldSet #LoginCommands {
    margin-bottom: 0 !important;
}


/* ============================================================
 * 2. SSO領域の直前に区切り
 *
 * #SSOLoginを含むcommand-centerを
 * 独立したログイン方法として見せる。
 * ============================================================ */

#LoginFieldSet .command-center:has(#SSOLogin) {
    position: relative !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    width: 100% !important;

    /*
     * 通常ログインとの間隔。
     */
    margin-top: 28px !important;

    /*
     * 区切り線より下の余白。
     */
    padding-top: 28px !important;
}


/*
 * 区切り線
 */
#LoginFieldSet .command-center:has(#SSOLogin)::before {
    position: absolute !important;

    top: 0 !important;
    left: 8% !important;

    display: block !important;

    width: 84% !important;
    height: 1px !important;

    content: "" !important;

    background-color: #d0d0d0 !important;
}


/* ============================================================
 * 3. SSOボタン
 * ============================================================ */

#LoginFieldSet #SSOLogin {
    margin:
        0
        auto
        !important;
}


/* ============================================================
 * 4. スマートフォン
 *
 * 指で誤タップしにくいよう
 * PCより少し広めに間隔を取る。
 * ============================================================ */

@media screen and (max-width: 640px) {

    #LoginFieldSet .command-center:has(#SSOLogin) {
        margin-top: 32px !important;
        padding-top: 32px !important;
    }


    #LoginFieldSet .command-center:has(#SSOLogin)::before {
        left: 5% !important;

        width: 90% !important;
    }


    /*
     * SSOボタンを十分なタップ領域にする。
     */
    #LoginFieldSet #SSOLogin {
        min-height: 42px !important;

        padding-left: 14px !important;
        padding-right: 14px !important;
    }
}


/* ===== SAKURAI LOGIN SEPARATION V9 END ===== */