/*
モバイルでのメニューを全画面にするCSS
*/


/*991px以下はここから↓*/
@media (max-width: 991px) {

	
.p-drawer__contents{
	max-width:unset;
	width:100%;
}
#nav-toggle {
  /*! position: fixed; */
  /*! top: 25px; */
  /*! right: 25px; */
  /*! height: 32px; */
  cursor: pointer;

  > div {
    position: relative;
    width: 1.6em;
    margin: auto;
  }
  span {
    width: 100%;
    height: 0.3em;
    left: 0;
    display: block;
    background: #eb6100;
    position: absolute;
    transition: transform .6s ease-in-out, top .5s ease;
    border-radius: 1em;

    &:nth-child(1) {
      top: 0;
    }
    &:nth-child(2) {
      top: 0.55em;
    }
    &:nth-child(3) {
      top: 1.1em;
    }
  }
}

.open {
  #nav-toggle span {
    background: #fff;
    
    &:nth-child(1) {
      top: 0.75em;
      transform: rotate(45deg);
    }
    &:nth-child(2) {
      top: 0.75em;
      width: 0;
      left: 50%;
    }
    &:nth-child(3) {
      top: 0.75em;
      transform: rotate(-45deg);
    }
  }
}

/* z-index */
#nav-toggle {
  z-index: 1000;
}
#container {
  z-index: 900;
}


#gloval-nav {
  background: #F6C650;
  color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 990;
  text-align: center;
  display: flex;
  visibility: hidden;
  flex-direction: column;
  /*! justify-content: center; */
  align-items: center;
  font-size: 29px;
  opacity: 0;
  transition: opacity .6s ease, visibility .6s ease;
    height: 100vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* iOSの慣性スクロール */
    overscroll-behavior: contain;      /* スクロール連鎖を抑制 */
    .p-global-nav__container{
    overflow: visible; /* 基本はこのままでOK。中身が長いのは #gloval-nav が受け持つ */
  } 
}



#gloval-nav {
  .p-global-nav__container{
	width: 100%;
	overflow: unset;
  }
	
  a {
    display: block;
    color: #fff;
    text-decoration: none;
    /* padding: 10px 0; */
    transition: color .6s ease;
    font-size: 0.6em;
    line-height: 3em;
    height: 3em;
   
    font-size: 0.6em;
      &:hover {
      color: #666;
    }
}
  
  ul {
    list-style: none;
    
    li {
      opacity: 0;
      /* transform: translateX(200px);*/
      transition:  transform .6s ease, opacity .2s ease;
	  /*! padding: 0.5em 0 0.5em; */
      /*! border-bottom: 1px solid #666; */
	  
	  &:nth-child(1) {
        /*! border-top: 1px solid #666; */
      }
    }
  }
}
.p-drawer__menu a, .p-drawer__menu > li > a{
     background: transparent;
}

/* open */
.open {
  overflow: hidden;
  height: 100%;
    /* “勢いスクロール”が裏へ伝播するのを抑える（対応ブラウザのみ） */
  overscroll-behavior: none;
	

  #gloval-nav {
    visibility: visible;
    opacity: 1;
    padding: 1em;
  }


  #gloval-nav li {
    opacity: 1;
    /* transform: translateX(0); */
    /*! transition:  transform 1s ease, opacity .9s ease; */
    /*! padding: 0.5em 0 0.5em; */
    /*! border-bottom: 1px solid #666; */
    
	  
	&:nth-child(1) {
        /*! border-top: 1px solid #666; */
    }
  }
}






	
}/*991px以下はここまで↑*/



/*
モバイルでのメニューを全画面にするCSS　終わり
*/