@charset "UTF-8";

/************************
  ハンバーガーメニュー css
  
  色設定するなら、それより上に設置
************************/

/* ハンバーガーメニュー */
header div#header {
 width: 100%;
 height: 6rem;
 position: relative;
 background: #F6F6F6;
}
@media screen and (min-width: 768px) {
  header div#header {
   display: flex;
   flex-direction: row;
  }
}

.drawer{
 display: flex;
 flex-direction: row;
 align-items: center;
 justify-content: space-between;
 position: relative;
 height: 6rem;
 padding: 0 .25em;
}


/* トグル */
.menu_toggle { z-index:9999; }
@media screen and ( max-width : 767px) { 
  .menu_toggle { margin-bottom: 2rem; 
   position: fixed;
   top: 1rem;
   right: 1rem;
  }
}

.menu_toggle_icon {
 position: relative;
 display: block;
 height: 2px;
 width: 30px;
 background: #5c6b80;
 -webkit-transition: ease .5s;
 transition: ease .5s;
}

@media screen and (min-width: 768px) {
 .menu_toggle{
  display: none;
 }
}

.menu_toggle_icon:nth-child(1) {
 top: 0;
}

.menu_toggle_icon:nth-child(2) {
 margin: 8px 0;
}

.menu_toggle_icon:nth-child(3) {
 top: 0;
}
/*OPEN時の動き*/
.menu_toggle.open .menu_toggle_icon:nth-child(1) {
 top: 10px;
 -webkit-transform: rotate(45deg);
 transform: rotate(45deg);
}

.menu_toggle.open .menu_toggle_icon:nth-child(2) {
 -webkit-transform: translateY(-50%);
 transform: translateY(-50%);
 opacity: 0;
}

.menu_toggle.open .menu_toggle_icon:nth-child(3) {
 top: -10px;
 -webkit-transform: rotate(-45deg);
 transform: rotate(-45deg);
}

/* ナビ */
.menu{
 -webkit-transform: translateX(100%);
 transform: translateX(100%);
 -webkit-transition:ease .5s;
 transition:ease .5s;
 z-index:1000;
 background: rgba(255,255,255,0.9);
 width: 100%;
 max-width: 100%;
}
.menu ul li{
 padding: 2em 2em 2em 1.5em;
 border-bottom: 1px solid #CCC;
}

/*OPEN時の動き*/
.menu.open,#header.open {
 -webkit-transform:translateX(0);
 transform:translateX(0);
 overflow-y: auto;
 -webkit-overflow-scrolling: touch;
}
@media screen and ( max-width : 767px) { 
  .menu{
   position: fixed;
   top: 0;
   right: 0;
   z-index: 100;
   height: 100%;
   max-height: 100%;
   min-height: 100%;
   padding-top: 6rem;
  } 
}
@media screen and (min-width: 768px) {
  .menu{
   width: 100%;
   -webkit-transform: translateX(0);
   transform: translateX(0);
  }
  
  .menu ul{
   height: 70px;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
  }
  
  .menu ul li{
   padding: 0 1em;
   border-bottom: none;
  }
}