/* 
  http://touya-minoda.jp/css-hamburger/
  http://edo-freiheit.sakura.ne.jp/eblog/2006/12/post_12.html 
  文字コード  UTF-8 
*/

    *{ margin:0; 1padding:0; }
    body { width:100%; height:100vh; margin: 0 auto; font-size:13px; line-height:150%; background:#eff; background: url(https://kurage.ready.jp/img/w8b.gif); }
    .wrap{ max-width:1200px; margin: 0px auto; padding:10px; }
    
      #waku01{ max-width: 100%; overflow:hidden; padding:15px 0 0; display:flex; align-items: center; text-align:center; }
          #topL { width:10%; }
          #topC { width:70%; color:#900; font-size:36px; font-weight:bold; height: 40px; font-family:Comic Sans MS }
          #topR { width:20%; }     

      #waku11{ position:relative; max-width: 100%; margin:5px auto; padding:4px 8px; z-index:1;  }
      
    .gnav-waku{ position:relative; margin:0 ; padding:0; z-index:100; }
      .gnav-waku label { padding: 11px 4px 9px; font-size:30px; background:#ada; opacity:0.2; border-radius:6px; cursor:pointer; position:fixed; top:10px; left:10px; }  /*ボタン枠装飾*/ 

        
      .gnav-waku input:checked ~ label:before { display:inline-block;color:#fff; content: '\02630'; } /* '三';  '\f078'; */ 
      .gnav-waku label:hover { opacity:0.7; } /*ボタンホバー時*/ 
      .gnav-waku label:before{ color:#44d;  font-weight: bold; content:'\02715'; } /* 'Ｘ \f00d' */
      .gnav-waku input { display:none; } /*チェックは不可視*/
      .gnav-waku input:checked ~ .gnav{ transform:translate(0, -300px); transition:0.5s; } /* 中身を表示 クリックで中身非表示 */  

      .gnav{ transition:0.5s; position:relative; top:0; padding-left:0px; display:flex; margin: 0px auto; }
          .gnav li { position:relative; width:19vw; margin:0; padding:0; text-align:center; z-index:100; list-style:none; } 
          .gnav img { width:98%; height:100%; }
          .gnav li a{ border-radius:5px; background:#4b8; color:#ffe; display:block; margin:1px; padding: 3px 0 1px; text-decoration:none; height: 28px; line-height: 2; font-size: 14px; font-weight: bold; }
          .gnav li:hover > a{ background:#30b9ba; }
          .gnav li ul li{ overflow:hidden; width:100%; height:0; margin:0px; color:#ffe; transition:.3s;}
          .gnav li ul li a{ background:#30b9ba; }
          .gnav li:hover li:hover > a{ background:#80b9ba; }
          .gnav li ul{ position:absolute; top:100%; left:0; width:100%; margin:0; padding:0; }
          .gnav li ul li{ overflow:hidden; width:100%; height:0; color:#ffe; transition:.4s; }
          .gnav li:hover > ul > li{ overflow: visible; height: 32px;}
          .gnav li ul li ul{ top: 0; left:100%; }
          .gnav li ul li ul:before{                   /* ul 直前に指定 */
             position: absolute; content: ""; top: 9px; left: -12px;
             width: 0; height: 0; border: 8px solid transparent;
             border-left-color: #eeeeee;           /* 三角マーク色 */
          } 

      @media screen and (min-width:960px) {         /* pc用  */ 
        .gnav{ width:950px; } 
      
        .gnav li:last-child ul li ul{left: -100%; width:100%;}
        .gnav li:nth-last-child(2) ul li ul {left:-100%; width:100%;}
        .gnav li:last-child ul li ul:before{        /* 右端リストの三角マーク  ul 直前に指定 */
          position:absolute; content:""; top:9px; left: 100%; margin-left: -4px;
          border:8px solid transparent; border-right-color:#eee; /* 三角マーク色 */
        }
        /* 右端前リストの三角マーク  */ 
        .gnav li:nth-last-child(2) ul li ul:before {
          position: absolute; content: ""; top: 9px; left: 100%; margin-left: -4px;
          border: 8px solid transparent; border-right-color:#eee;
        }
        
      }
     
      @media (min-width:560px) and ( max-width:959px) {    /* タブレット用 */
      
        .wrap{ width:95vw; }
          #topL, #topR{ width:0; display:none; }
          #topC{ width:100%;}
        .gnav{ width:98%;  } 
        
      
        .gnav li:last-child ul li ul{left: -100%; width:100%;}
        .gnav li:nth-last-child(2) ul li ul {left:-100%; width:100%;}
        .gnav li:last-child ul li ul:before{        /* 右端リストの三角マーク  ul 直前に指定 */
          position:absolute; content:""; top:9px; left: 100%; margin-left: -4px;
          border:8px solid transparent; border-right-color:#eee; /* 三角マーク色 */
        }
        /* 右端前リストの三角マーク  */ 
        .gnav li:nth-last-child(2) ul li ul:before {
          position: absolute; content: ""; top: 9px; left: 100%; margin-left: -4px;
          border: 8px solid transparent; border-right-color:#eee;
        }
        
      }      
      
      @media (max-width:559px) {   /* スマホ用 */ 
        .wrap{ width:95%; }
          #topL, #topR{ width:0; display:none; }
          #topC{ width:100%;;}
          
        .gnav{ position: fixed; width:33vw; margin:5em auto 0 0.5em; display:flex; flex-direction:column; z-index:90; } 
        .gnav-waku label { 1color: #ede; background:#4b8; opacity:1; } /*ボタン濃く*/ 
        .gnav li ul:before{ position: absolute; content: ""; top: 9px; left: -12px; width: 0; height: 0; border: 8px solid transparent; border-left-color: #eee; }  /*  ul 直前三角マーク色 */ 
        .gnav li{ width: 95%; margin:0 auto; padding: 0; text-align:center; } 
        .gnav li ul{ top:3px; left:100%; }
        
        #waku11 { position:absolute; top:4.5em; padding:4px 2px; z-index:1;  }
  /*        .tr11 { width:92vw; }  
          /* 表の折返し
          .cap10, .cap11 { display: flex; flex-direction:column; }      
          .cap10 div:nth-child(2n) { display:none; }
           */  /* */
      }