/* ==================サイドバーの横幅をカスタマイズ+影響する要素================== */

/* サイドバー全体 asideタグ*/
.main-sidebar{
    width:195px; /* 195pxが仕様で要求の幅 */
}
.li-relative{
    margin-left: 40px; /* サイドバー幅195pxの時、このマージンが必要 */
}

/* ログアウトボタン */
.logout-btn {
    font-weight: bold;
    border: none;
    background-color: transparent;
    color: inherit;
    width: 100%;
    margin: 0 auto;
    cursor: pointer;
    /* padding-right: 16px;左に16pxのマージンがあるため、右に16pxpaddingを設けて文字が中央になるように調整 */
    padding-right: 68px;/* サイドメニュー幅195pxの時は、このpaddingを設けて文字が中央になるように調整 */
}

/* サイドバー変更に合わせてマージンも変更する必要あり(PC表示) */
@media (min-width: 995px) {

    /* 上側ヘッダーもサイドメニュー幅変更に伴い左に余白ができるためマージンを調整 */
    .main-header, .navbar, .customed-adminlte-navbar
        .navbar-expand, .navbar-white, .navbar-light {
        margin-left: 195px !important; /* !important で強制 */
    }

    /* サイドバー変更に合わせてマージンも変更する必要あり(PC表示) */
    .content-wrapper {
        margin-left: 195px !important; /* !important で強制 */
    }

}

/* サイドバー変更に合わせてマージンも変更する必要あり(スマホ表示) */
@media (max-width: 994px) {

    .main-header, .navbar, .customed-adminlte-navbar
    .navbar-expand, .navbar-white, .navbar-light {

        margin-left: -195px;  
    }

}

/* メニュー */
.li-relative{
    padding-left: 20px;/* サイドバー195pxの時にこのpading設けるとメニューの左の余白がベストになる */
}

/* ==================サイドバーの横幅をカスタマイズ+影響する要素================== */

/* サイドバー全体メニュー外枠div */
.sidebar{
    padding: 0px;
    margin: 0px;
    padding-bottom: 200px;  /* 最下部の項目の表示が途切れるのを防止 */

}

/* サイドバー背景色 */
.adminlte-sidebar-bg-color{
    background-image: linear-gradient(348deg, rgba(3, 28, 64, 1) 33%, rgba(30, 88, 173, 1) 83%);
    height: 600px;
}

/* サイドバー高さ・位置固定 */
body:not(.layout-fixed) .main-sidebar{
    position: fixed;
    height: 100vh !important;
    min-height: 100vh !important;
}

/* メニュー:お問い合わせの　 */
.side-bar-item-contact-li{
    position: relative;
    width: 100%;
    height: 60px;
    /* margin-top: 20px;
    margin-bottom: 20px; */
}

/* メニュー:お問い合わせの　 */
.side-bar-item-contact{
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 22%;
    transform: translate(-50%, -22%);    
}

/* ログアウトボタンのli */
.logout-li{
    display: block;
    width: 100%;
    position: relative;
}

/* --------------------------------スマホ表示--------------------------------< */
@media screen and (max-width: 768px) {

    /* スマホ時にサイドバーヘッダーのロゴ画像部分を消して上にマージン設ける */
    body:not(.layout-fixed) .main-sidebar{
        position: fixed;
        top: 70px;
    }    
}
/* --------------------------------<END>スマホ表示-------------------------------- */





/* --------------------------------スマホ時サイドメニュー右に配置するカスタマイズ--------------------------------< */
@media screen and (max-width: 768px) {

    /* メニューセクションの文字大きくする */
    .custom-nav-header{
        font-size: 16px !important;
    }
    /* メニューの文字大きくする */
    .li-relative>.nav-link{
        font-size: 18px !important;
    }

    /* サイドメニュー右に配置  */
    .sidebar-closed>.wrapper>.main-sidebar{
        position: absolute;
        right: -195px;
    }

    /* サイドメニューCLOSEアニメーション */
    .sidebar-closed>.wrapper>.fade-out{
        position: absolute;
        animation-name: fadeOutAnime;
        animation-duration:0.6s;
        right: -195px;
    }

    /*フェードアウトアニメーション*/
    @keyframes fadeOutAnime{
        0% {
            right: 0px;
        }
    
        100% {
            right: -195px;
        }
    }

    /* サイドメニューOPENアニメーション  */
    .sidebar-open>.wrapper>.main-sidebar{
        position: fixed;
        animation-name: fadeInAnime;
        animation-duration:0.6s;
        right: 0px;
    }

    /*フェードインアニメーション*/
    @keyframes fadeInAnime{
        0% {
            right: -195px;
        }
    
        100% {
            right: 0px;
        }
    }

}
/* --------------------------------<END>スマホ時サイドメニュー右に配置するカスタマイズ-------------------------------- */