/* コナステヘッダのレイアウト */
header#konasta_header {
  width: 100%;
  display: flex;          /* フレックスレイアウト */
  flex-flow: row wrap;    /* 横並び、回り込みアリ */
  flex: auto;
  text-align:center;
  background-color: #fff;  /* 背景色(ベースカラー:aqua) */
  
  
  /* (左端)コナステロゴのレイアウト */
  .konasta_logo {
    float:left;
    width: 120px;
    margin:0 20px 0 0;            /* ロゴの右側を少し開ける */
    padding:0;
  
    /*background-color: blue;*/  /* 領域サイズ確認用 */
  }
  
  
  /* (右端)メニュー、ログインのリンクのレイアウト */
  .header_links {
    margin-left:auto;        /* 右端寄せ */
    width: 220px;
    display: flex;
  
    text-align:center;
    font-size:12px;
    line-height:48px;
  
    background-color: aqua; /* サイズ確認用 */
    
    /* (左側)メニュー */
    .header_menu {
      float:left;
      width: auto;
      /*display:none;  ウィンドウ幅が狭いときは非表示にする
        @media screen and (min-width: 800px){
        display:flex;
        flex-wrap: wrap;
      } */
      background-color: #999;  /* 領域サイズ確認用 */
    
      /* メニュー文字を下寄せにするためのスペーサー */
      .spacer {
        display:block;
        width:100%;
        height:20%;
        /*background-color:blue;*/ /* 領域確認用 */ 
      }
    
      /* メインメニュー */
      .header_main_menu {
        height:50%;
        display:flex;
        justify-content:space-around;
        list-style:none;
        /*background-color:aqua;*/ /* 領域確認用 */
  
        li {
          width: 120px;
          /*line-height:20px;*/
          text-align:center;
          font-weight:bold;
          position: relative;
        
          a {
            display:block;
            text-decoration:none;
            color: #fff; /* タブの文字 */
          }
        }
  
        /* ドロップダウンメニュー */
        .header_sub_menu {
          font-size:10px; /* サブメニューの文字サイズ */
          font-weight:normal;
          background-color: gray; /* white smoke*/
          opacity:0.9;
          list-style:none;
          position:absolute;
          display:none;
          z-index:100; /* ドロップダウンを手前に表示するため */
    
          /* ドロップダウンメニューにマウスをフォーカスした時の色 */
          li {
            line-height:12px;                 /* サブメニューの行間隔 */
            border-bottom: dotted thin black; /* サブメニューの下線 */
          
            a {
              display:block;
              padding:5px;
              color:white; /* サブメニューの文字の色 */
            }
            a:hover {
              background-color: aqua; /* マウスホバー時の色 */
            }
          }
        
        } /* .sub_menu */
      }   /* .main_menu */
    }     /* .header_menu */
    
    
    /* 右側(ログイン) */
    a {
      text-decoration:none;
      color:white; 
    }
    
    /*
    .download {
      width: 100%;
      color:white; 
      background-color: purple;  
    }*/
    .account {
      width: 100%;
      color:white; 
      background-color: orange; /* 領域確認用 */
    }
    
  } /* .header_links */
}