/*
+==============================================================================
|
|    Copyright(c) 2020 IMS. All Rights. Reserved.
|
|  ・システム     ： クリーニング店向けＰＯＳシステム
|
+==============================================================================
|
|   C01003D01（メニューダイアログ）スタイルシート
|
|=== 改 版 履 歴 ==============================================================
| Date         Author           Reference                              Version
|==============================================================================
| 2020/06/09   IMS下平          新規作成                               1.0.0
|
|
===============================================================================
*/
@charset "UTF-8";

/* メニューコンテンツ */
.menu-contents {
    display: flex;
    flex-direction: row;
    width: 100% !important;
    height: 100% !important;
    padding-bottom: 0px;
}
div.left-menu-item-box {
    position:relative;
    display:table;
    width: 125px;
    height: 100px;
    color: #ffffff;
    background-color: #013c95;
    border: solid 1px #000000;
    cursor:pointer;
}
div.left-menu-item-box:hover {
    display: table;
    width: 125px;
    height: 100px;
    color: #ffffff;
    background-color: #0065d8;
    border: solid 1px #000000;
    cursor: pointer;
}
div.selected {
    background-color: #0065d8 !important;
}
span.select-sign {
    position: absolute;
    bottom: 0px;
    right: 0px;
}

div.left-menu-item {
    display:table-cell;
    width: 100%;
    height: 100%;
    text-align:center;
    vertical-align:middle;
}
div.right-menu-item {
    display: table-cell;
    width: 100%;
    height: 100%;
    text-align: center;
    vertical-align: bottom;
    padding-bottom: 15px;
}

/* 画面解像度の高さが 1280px 以下である場合 */
@media screen and (max-height: 1280px) {

    /* 機能分類メニューエリア */
    div.left-menu-area {
        width: 125px;
        height: 880px !important;
    }

    /* 機能メニューエリア */
    div.right-menu-area {
        width: 100%;
        height: 850px !important;
        display: flex;
        flex-direction: column;
    }
    div.right-menu-box {
        display: flex !important;
        flex-direction: row;
        flex-wrap: wrap;
        align-content:flex-start;
        width: 100%;
        height: 750px;
    }
    /* メニューボタン */
    div.right-menu-item-box {
        display: table;
        width: 33.3%;
        height: 250px;
        color: #000000;
        background-color: #ffffff;
        border: solid 1px #000000;
        cursor: pointer;
        background-size: 70% auto;
        background-repeat: no-repeat;
        background-position: 50% 20%;
    }
}

/* 画面解像度の高さが 800px 以下である場合 */
@media screen and (max-height: 800px) {

    /* 機能分類メニューエリア */
    div.left-menu-area {
        width: 125px;
        height: 570px !important;
        background-color: #808080;
    }

    /* 機能メニューエリア */
    div.right-menu-area {
        width: 100%;
        height: 570px !important;
        display: flex;
        flex-direction: column;
    }

    div.right-menu-box {
        display: flex !important;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: flex-start;
        width: 100%;
        height: 470px;
    }
    /* メニューボタン */
    div.right-menu-item-box {
        display: table;
        width: 33.3%;
        height: 180px;
        color: #000000;
        background-color: #ffffff;
        border: solid 1px #000000;
        cursor: pointer;
        background-size: 40% auto;
        background-repeat: no-repeat;
        background-position: 50% 20%;
    }
}

/* ログアウトボタン */
div.btn-logout {
    display: table;
    position: fixed;
    top: 0px;
    right: 10px;
    z-index: 2;
    width: 80px;
    height: 42px;
    background-image: url("../Content/Themes/images/logout.png") !important;
    background-size: 30%;
    background-repeat: no-repeat;
    background-position: 50% 20%;
    cursor: pointer;
}
div.btn-logout:hover {
    display: table;
    position: fixed;
    top: 0px;
    right: 10px;
    z-index: 2;
    width: 80px;
    height: 42px;
    background-image: url("../Content/Themes/images/logout_hover.png") !important;
    background-size: 30%;
    background-repeat: no-repeat;
    background-position: 50% 20%;
    cursor: pointer;
}
div.btn-logout-string {
    display: table-cell;
    color: #ffffff;
    font-size: 8px;
    vertical-align: bottom;
    text-align: center;
}
div.btn-logout-string:hover {
    display: table-cell;
    color: #87e6e6;
    font-size: 8px;
    vertical-align: bottom;
    text-align: center;
}

/* 閉じるボタン */
div.btn-close {
    display: table;
    position: fixed;
    top: 0px;
    right: 150px;
    z-index: 2;
    width: 80px;
    height: 42px;
    background-image: url("../Content/Themes/images/back.png") !important;
    background-size: 30%;
    background-repeat: no-repeat;
    background-position: 50% 20%;
    cursor: pointer;
}
div.btn-close:hover {
    display: table;
    position: fixed;
    top: 0px;
    right: 150px;
    z-index: 2;
    width: 80px;
    height: 42px;
    background-image: url("../Content/Themes/images/back_hover.png") !important;
    background-size: 30%;
    background-repeat: no-repeat;
    background-position: 50% 20%;
    cursor: pointer;
}
div.btn-close-string {
    display: table-cell;
    color: #ffffff;
    font-size: 8px;
    vertical-align: bottom;
    text-align: center;
}
div.btn-close-string:hover {
    display: table-cell;
    color: #87e6e6;
    font-size: 8px;
    vertical-align: bottom;
    text-align: center;
}

/* トップメニューボタン */
div.btn-topmenu {
    display: table;
    position: fixed;
    top: 0px;
    right: 80px;
    z-index: 2;
    width: 80px;
    height: 42px;
    background-image: url("../Content/Themes/images/menu.png") !important;
    background-size: 30%;
    background-repeat: no-repeat;
    background-position: 50% 20%;
    cursor: pointer;
}
div.btn-topmenu:hover {
    display: table;
    position: fixed;
    top: 0px;
    right: 80px;
    z-index: 2;
    width: 80px;
    height: 42px;
    background-image: url("../Content/Themes/images/menu_hover.png") !important;
    background-size: 30%;
    background-repeat: no-repeat;
    background-position: 50% 20%;
    cursor: pointer;
}

div.btn-topmenu-string {
    display: table-cell;
    color: #ffffff;
    font-size: 8px;
    vertical-align: bottom;
    text-align: center;
}
div.btn-topmenu-string:hover {
    display: table-cell;
    color: #87e6e6;
    font-size: 8px;
    vertical-align: bottom;
    text-align: center;
}