﻿/*_Layoutのcss設定*/

/*---------- nvabarの設定-------------------------------*/
/* navbarのbottom boder の設定 */
.nav-bottom-boder-color {
    border-bottom: solid;
    border-bottom-color: #00CC03;
    box-shadow: 5px 5px 5px #85C898
}

/*----------- サイドバーの設定 ------------------------*/

/*サイドバーの設定*/
.sidebar-setting {
    background-color: #98E49B;
}

    /*sidebar-setting要素の全ての子要素、孫要素に対する設定*/
    .sidebar-setting * {
        width: 100%; /*sidebar-setting要素以下の子要素、孫要素の全てサイズを100%に設定*/
    }

/* dropright-hover要素マウスホバー時に子要素、孫要素にある dropdown-menu の要素を表示する */
.dropright-hover:hover .dropdown-menu {
    display: block;
}
/* dropright-hover要素マウスホバー時に子要素のaタグ要素のバックグラウンドカラーを変更する*/
.dropright-hover:hover > a {
    background-color: #FFFF00; /*黄色*/
}


/* dropright-child-auto-setting要素の子、孫要素の dropdown-menu要素の設定 */
.dropright-child-auto-setting .dropdown-menu {
    background-color: #B1DFE4;
    margin-left: -25%; /*ドロップダウンメニューの表示位置を調整*/
    width: auto; /*sidebar-setting *で子要素全てのwithが親要素100%に設定されているので、ドロップダウンメニューのwithをautoに設定する*/
}
/* dropright-child-auto-setting要素の直下の子要素の aタグ要素の設定 */
.dropright-child-auto-setting > a {
    /*color: #007bff !important;*/ /*primaryと同じカラー*/
    white-space: normal; /*文字折り返し設定*/
    word-wrap: break-word; /*文字折り返し設定*/
    padding-left: 0;
    padding-right: 0;
}



/*--- ハンバーガーメニューで表示するドロワーの設定-----------*/
/*-------  画面から隠す設定 ---------*/
.drawerleft {
    position: fixed;
    /*right: -320px;*/ /* これで隠れる */
    left: -320px;
    top: 0;
    width: 300px; /* スマホに収まるくらい */
    height: 100vh;
    padding-top: 40px;
    background-color: #EFFBF8;
    transition: all .6s;
    z-index: 9999;
    overflow-y: auto; /* メニューが多くなったらスクロールできるように */
}
/*-------  画面から隠す設定 ---------*/
.drawerleft-bg {
    position: fixed;
    /*left: 0;*/
    right: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 100;
    background-color: #000;
    opacity: 0;
    visibility: hidden;
    transition: all .6s;
    cursor: pointer;
}
/* 表示された時用のCSS */
.drawerleft-open .drawerleft {
    /*right: 0;*/
    left: 0
}

.drawerleft-open .drawerleft-bg {
    opacity: .8;
    visibility: visible;
}

.drawerleft .dropdown-menu {
    margin-left: -70%; /*ドロワーに格納されたドロップダウンメニューの表示位置を調整*/
}
