/* ========================================
   GiveNoTane
   スマホ用ハンバーガーメニュー
======================================== */


/* PC */

.menu-toggle{
  display:none;
}

.header-menu{
  display:none;
}


/* 980px以下 */

@media(max-width:980px){

  /* スマホ・タブレットのヘッダー背景 */

  .site-header{
    background:#f3f7f1;
    border-bottom:1px solid #dfe9dc;
  }


  .header-inner{
    position:relative;
  }


  /* PC用メニューを非表示 */

  .site-header .nav{
    display:none;
  }


  /* 三本線 */

  .menu-toggle{
    appearance:none;
    -webkit-appearance:none;

    display:block;

    position:relative;
    z-index:1002;

    width:44px;
    height:44px;

    margin:0;
    padding:0;

    border:0;
    background:transparent;

    cursor:pointer;
  }

  .menu-toggle span{
    position:absolute;
    left:9px;

    display:block;

    width:26px;
    height:2px;

    background:var(--text);
  }

  .menu-toggle span:nth-child(1){
    top:13px;
  }

  .menu-toggle span:nth-child(2){
    top:21px;
  }

  .menu-toggle span:nth-child(3){
    top:29px;
  }


  /* メニュー全体 */

  .header-menu{
    position:fixed;

    top:0;
    left:0;

    z-index:1000;

    display:block;

    width:100%;
    height:100dvh;

    overflow-y:auto;

    background:var(--bg);

    opacity:0;
    visibility:hidden;

    pointer-events:none;

    transition:
      opacity .2s,
      visibility .2s;
  }

  .header-menu.is-open{
    opacity:1;
    visibility:visible;

    pointer-events:auto;
  }


  /* メニュー内部 */

  .header-menu-inner{
    width:min(calc(100% - 40px),900px);

    margin:0 auto;

    padding:34px 0 50px;
  }


  /* メニュー項目 */

  .header-menu-nav{
    display:grid;

    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:0 50px;
  }

  .header-menu-nav a{
    display:block;

    padding:20px 0;

    border-bottom:1px solid var(--line);
  }

  .header-menu-title{
    display:block;

    font-size:1.1rem;
    font-weight:700;

    line-height:1.5;
  }

  .header-menu-sub{
    display:block;

    margin-top:3px;

    color:var(--muted);

    font-size:.82rem;

    line-height:1.6;
  }


  /* 支援する */

  .header-menu-support{
    margin-top:35px;
  }

  .header-menu-support a{
    display:flex;

    align-items:center;
    justify-content:center;

    width:280px;
    height:52px;

    margin:0 auto;

    border-radius:6px;

    background:var(--accent);
    color:#fff;

    font-weight:700;
  }


  /* 閉じる */

  .header-menu-close-area{
    margin-top:28px;
    text-align:center;
  }

  .header-menu-close{
    appearance:none;
    -webkit-appearance:none;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-width:90px;
    height:36px;

    padding:0 16px;

    border:1px solid #cfc9bf;
    border-radius:6px;

    background:#fff;

    color:var(--text);

    font:inherit;
    font-size:.8rem;
    font-weight:700;

    cursor:pointer;
  }

  .header-menu-close:hover{
    background:var(--soft);
  }


  body.menu-open{
    overflow:hidden;
  }

}


/* スマホ */

@media(max-width:640px){

  .header-menu-inner{
    width:calc(100% - 36px);
  }

  .header-menu-nav{
    grid-template-columns:1fr;
  }

  .header-menu-nav a{
    padding:14px 0;
  }

  .header-menu-title{
    font-size:1rem;
  }

  .header-menu-sub{
    font-size:.76rem;
  }

  .header-menu-support{
    margin-top:28px;
  }

  .header-menu-support a{
    width:100%;
  }

  .header-menu-close-area{
    margin-top:30px;
  }

}