/*----------------------
   ハンバーガーメニュー
------------------------*/
#hamburger,
#hamburger span{
  display: inline-block;
  box-sizing: border-box;

  transition: all 0.4s ease;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
}
#hamburger{
  position: fixed;
  top: 30px;
  right: 10px;
  width: 25px;
  height: 25px;
  z-index: 650;
  cursor: pointer;
}
#hamburger span{
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  border-radius: 0;
}
/*クリック前*/
#hamburger span:nth-of-type(1){
  top: 0;
  background-color: #3b4571;
}
#hamburger span:nth-of-type(2){
  top: 8px;
  background-color: #3b4571;
}
#hamburger span:nth-of-type(3){
top: 16px;
  bottom: 0;
  background-color: #3b4571;
}
/*クリック後*/
#hamburger.active{
  /*position: fixed;*/
}
#hamburger.active span:nth-of-type(1){
  -webkit-transform: translateY(4px) rotate(-45deg);
  transform: translateY(4px) rotate(-45deg);
  background-color: #2ab1e7;
}
#hamburger.active span:nth-of-type(2){
  opacity: 0;
}
#hamburger.active span:nth-of-type(3){
  -webkit-transform: translateY(-12px) rotate(45deg);
  transform: translateY(-12px) rotate(45deg);
  background-color: #2ab1e7;
}


/*---------------------------------
  グローバルナビ
----------------------------------*/
#navigation{
  height: 0;
  overflow: hidden;
  position: fixed;
  top: 70px;
  right: 10px;
  z-index: 600;
  color: #fff;
  font-size: 15px;
  background-color: #555;
  width:100%;

  transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
}
#navigation.on{
  height: 220px;


}
  #navigation ul,
  #navigation li{
    margin: 0;
    padding: 0;
    position: relative;
  }
  #navigation li{
    display: block;
    border-right: solid 0 rgba(255, 255, 255, 0.4);
    border-bottom: solid 1px rgba(255, 255, 255, 0.4);  
  }
  #navigation li.last{
    border-bottom: none;  
  }

    #navigation li a{
      display: block;
      padding: 25px;
      text-align:center;


      transition: all 0.4s ease;
      -webkit-transition: all 0.4s ease;
      -moz-transition: all 0.4s ease;
      -o-transition: all 0.4s ease;
    }
    #navigation li a:link   { text-decoration:none; color: #ffffff; }
    #navigation li a:visited{ text-decoration:none; color: #ffffff; }
    #navigation li a:active { text-decoration:none; color: #ffffff; }
    #navigation li a:hover  { text-decoration:none; color: #f37592; }
    #navigation li.type02 a:hover  { text-decoration:none; color: #ffffff; background-color: rgba(246, 15, 75, 0.7); }




/*================================================

▼▼▼スマホ用（767px以下） ここから▼▼▼　

================================================*/

@media screen and (max-width: 767px) {

#navigation{
  width:50%;
}

}