/*=============================
  ログイン後のヘッダー共通css
=============================*/
header{
    position: sticky;
    top: 0;
    height: 7vh;
    width: 100%;
    z-index: 9999;
}

.header_title{
    background-color:var(--bace-color1);
    margin-top: 0;
    height: 7vh;
    width: 100%;
}

#header_title {
    color: var(--bace-color4);
    position:absolute;
    top:1vh;
    font-size:3.5vh;
    font-weight: bolder;
    width: 100%;
    display: block;
    text-align: center;
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

/*=============================
ハンバーガーメニュー通常時
=============================*/
.btn-trigger {
    position: relative;
    width: 6vh; 
    height: 7vh; 
    cursor: pointer;
    top: 0; 
    left: 4vh; 
}
.btn-trigger span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 0.6vh; 
    background-color: var(--bace-color4);
    border-radius: 0.3vh; 
}
.btn-trigger, .btn-trigger span {
    display: inline-block;
    transition: all .5s;
    box-sizing: border-box;
}
.btn-trigger span:nth-of-type(1) {
    top: 1.3vh; 
}
.btn-trigger span:nth-of-type(2) {
    top: 3.3vh; 
}
.btn-trigger span:nth-of-type(3) {
    top: 5.3vh; 
}

/*=============================
ハンバーガーメニュー選択時
=============================*/
#btn01.active span:nth-of-type(1) {
    -webkit-transform: translateY(2vh) rotate(-45deg);
    transform: translateY(2vh) rotate(-45deg);
}
#btn01.active span:nth-of-type(2) {
    opacity: 0;
}
#btn01.active span:nth-of-type(3) {
    -webkit-transform: translateY(-2vh) rotate(45deg);
    transform: translateY(-2vh) rotate(45deg);
}

/*=============================
企業ロゴ
=============================*/

img.logo{
    position: absolute;
    top: 1.2vh;         
    left: 81%;        
    width: 8vw;       
    height: auto;     
    transform: translateX(-50%); 
}
  

/*=============================
ログインユーザーアイコン
=============================*/

.user-icon{
    position: absolute;
    top:1.2vh;
    left: 85%;
}

/*=============================
ベルマーク
=============================*/

.alerts-icon{
    position: absolute;
    top:1.2vh;
    left: 88.8%;
}

/*=============================
ヘルプボタン
=============================*/

.help-icon{
    position: absolute;
    top:1.2vh;
    left: 93%;
}

/*=============================
設定ボタン
=============================*/

/* .settings-icon{
    position: absolute;
    top:1.2vh;
    left: 93%;
} */

/*=============================
ログアウトボタン
=============================*/

.logout-icon{
    position: absolute;
    top:1.2vh;
    left: 96%;
}

/*=============================
メニュー表示
=============================*/
nav {
    z-index: 9999;
    position: fixed;
    background: var(--bace-color1);
    top: 7vh;
    left: 0;
    overflow-y: hidden;
    text-align: left;
    width: 2.3vw;
    transition: .4s;
    font-size: 2vh;
    font-weight: bold;
    height: 100%;
}

nav.open-menu {
    width: 10vw;
}

.material-icons {
    color: var(--bace-color4);
    font-size: 2vw;
    padding-left: 0.1vw;
}

.material-symbols-outlined{
    color: var(--bace-color4);
    font-size: 2vw;
    padding-left: 0.1vw;
}

.project-nav-list__link {
    display: flex;
    align-items: center;
    padding: 14px 20px 16px 0;
    max-height: 50px;
    transition: .15s ease-out;
    outline: 0;
}

.project-nav-list {
    width: 100%;
    list-style-type: none;
    padding-left: 0;
    margin: 0;
    font-size: 1.1vw;
}

.project-nav__scroll-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-bottom: 9px;
    overflow-x: hidden;
    overflow-y: auto;
}

.project-nav-list__text {
    display: none; /* 初期状態で非表示にする */
    padding-left: 0.5vw; 
    white-space: nowrap; 
}

nav.open-menu .project-nav-list__text {
    display: inline; /* メニューが開いたときに表示する */
}

a {
    text-decoration: none;
    outline: 0;
    color: var(--bace-color4);
}

/*通知バッチ*/
.notification-badge {
    position: absolute;
    top:1.2vh;
    left: 90%;
    background-color: red;
    color: #fff;
    border-radius: 50%;
    padding: 0.2vh 0.1vh;
    font-size: 1.2vh;
    display: inline-block;
    min-width: 2vh;
    text-align: center;
    cursor: pointer;
}

element.style{
    top: 7vh;
}