/* 
header
参考URL
https://hakenblog.com/hamburger-menu/
 */
  
 .header {
    height: 60px;
    width: 100%;
    padding: 0px 15px;    
    background-color: rgb(6, 6, 77);      
    position: fixed;
    top: 0;
    z-index: 1000;
    display: flex;
  }

  .header #hamburger {
    background-color: transparent;      
    position: absolute;
    left: 0;
    cursor: pointer;      
    height: 60px;
    width: 60px;
  }
  
  .header .icon span {
    position: absolute;
    left: 15px;
    width: 30px;
    height: 4px;      
    background-color:white;      
    border-radius: 8px;
    transition: ease 0.75s;
  }

  .header .icon span:nth-of-type(1) {
    top: 16px;
  }
  .header .icon span:nth-of-type(2) {
    top: 28px;
  }
  .header .icon span:nth-of-type(3) {
    bottom: 16px;
  }

  .header .close span:nth-of-type(1) {
    transform: rotate(45deg);
    top: 28px;
  }  
  .header .close span:nth-of-type(2) {
    opacity: 0;
  }  
  .header .close span:nth-of-type(3) {
      transform: rotate(-45deg);
      top: 28px;
  }
  
  .header nav {
    display: none;
  }
    
  .header nav {
      top: 60px;
      left: 0px;
      position: absolute;
      z-index: 10;
      width: 50%;
      background-color: rgba(34, 49, 52, 0.9);
  }

  .header ul {
    flex-direction: column;
    /* padding-left: 0;     */
  }

  .header li {    
    list-style:none;
    border-bottom: solid 0.5px rgb(255, 255, 255);
    padding: 2px 0 1px;
  }

  .header li:hover{        
    border-bottom: solid 0.5px red;
  } 



  .header li a{    
    text-decoration:none;
    font-size: 20px; 
    color: white;    

  }
  
  /* 操作者情報エリア */
  .operator-area{
    height: 60px;
    right: 0px;
    position: absolute;
    z-index: 10;
    color: white;
    font-size: 20px;    
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .department-name
  ,.operator-name
  {
    padding: 0 10px;
  }

  .inverted-triangle-area{

    margin: 0 10px 3px 0;
    border-bottom: solid 2px white;
  }

  .inverted-triangle-area:hover{
    margin-bottom:0;
  }

  .inverted-triangle-button{
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 15px solid white;
    cursor: pointer;
  }

 
  /*
    header用の空スペース 
    headerとheightを設定する
  */
  #header_space{
    height: 60px;
  }


  


.screen-header{    
    width: 100%;
    height: 50px;
    padding: 5px;    
    display: flex;
    justify-content: center;
    align-items: center;
}

.screen-header .screen-transition-area{
    position: absolute;
    left: 10px;
}

.screen-header .notice-area{
    position: absolute;
    right: 10px;
}

.screen-header .notice-button{
    color: rgb(30, 30, 34);    
    background-color: white;    
}

.screen-header .notice-button:hover{
  color: white;
  background: #007bff linear-gradient(180deg, #268fff, #007bff) repeat-x;
}

.screen-header .exaggeration {  
    display: inline-block;
    width: 22px;
    height: 22px;
    line-height: 22px;
    font-size: 18px;    
    border-radius: 50%;
    background: red;
    color: white;
    text-align:center;
    margin-left: 1px;
    padding-top: 1px;
    
}