@charset "UTF-8";
/* CSS Document */

/*アイコン*/
#nav_toggle{
  position: fixed;
  display: inline-block;
  width: 50px;
  height: 50px;
  top: 0;
  right: 0;
  background: #206039;
  cursor: pointer;
  z-index: 100;
  display: none;
}
#nav_toggle span{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  transition: all .3s ease-out;
}
#nav_toggle span:nth-of-type(1) { top: 10px; width: 26px; height: 2px; background: #fff;}
#nav_toggle span:nth-of-type(2) { top: 17px; width: 26px; height: 2px; background: #fff;}
#nav_toggle span:nth-of-type(3) { top: 24px; width: 26px; height: 2px; background: #fff;}
#nav_toggle span:nth-of-type(4) { top: 29px; font-size: 9px; color: #fff;}

#nav_toggle.open span:nth-of-type(1) { top:18px; transform: translateX(-50%) translateY(-50%) rotate(-45deg);}
#nav_toggle.open span:nth-of-type(2) { opacity: 0;}
#nav_toggle.open span:nth-of-type(3) { top:18px; transform: translateX(-50%) translateY(-50%) rotate(45deg);}


/*中身*/
.hamburger_nav{
  position: fixed;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
 /* background: #eee;*/
  background: url(../img/white_brick01.png);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
#nav_toggle.open + .hamburger_nav{
  left: 0;
}
.hamburger_nav ul{
  padding-bottom: 50px;
}
.hamburger_nav ul li{
  list-style: none;
}
.hamburger_nav ul li a{
  display: block;
  border-bottom: 1px solid #ddd;
  position: relative;
  line-height: 50px;
  font-size: 14px;
  padding: 0 20px;
  background: #eee;
}
.hamburger_nav ul li a::before{
  position: absolute;
  content:"\f105";
  font-family: "Font Awesome 5 Free";
  left: 90%;
  top: 0;
  font-size: 14px;
  font-weight: bold;
  transition: 0.4s;
}
.hamburger_nav ul li a:hover{
  background: #ccc;
}
.hamburger_nav ul li a:hover::before{
  transform: translateX(5px);
}

.hamburger_nav ul li{
  transform: translateX(-30px);
  opacity: 0;
  transition: all .3s ease-out;
}
#nav_toggle.open + .hamburger_nav ul li{
  transform: none;
  opacity: 1;
}
.hamburger_nav ul li:nth-of-type(1) {transition-delay: 0.05s;}
.hamburger_nav ul li:nth-of-type(2) { transition-delay: 0.10s;}
.hamburger_nav ul li:nth-of-type(3) { transition-delay: 0.15s;}
.hamburger_nav ul li:nth-of-type(4) { transition-delay: 0.20s;}
.hamburger_nav ul li:nth-of-type(5) { transition-delay: 0.25s;}
.hamburger_nav ul li:nth-of-type(6) { transition-delay: 0.30s;}
.hamburger_nav ul li:nth-of-type(7) { transition-delay: 0.35s;}
.hamburger_nav ul li:nth-of-type(8) { transition-delay: 0.40s;}
.hamburger_nav ul li:nth-of-type(9) { transition-delay: 0.45s;}
.hamburger_nav ul li:nth-of-type(10) { transition-delay: 0.50s;}



/*ブレイクポイントのみ変更*/
@media screen and (max-width: 960px){
  .hamburger_menu #nav_toggle{
    display: block;
  }
}