/*　ハンバーガーボタン　*/
.hamburger {
    display : block;
    position: fixed;
    z-index : 3;
    right : 13px;
    top   : 3px;
    width : 42px;
    height: 42px;
    cursor: pointer;
    text-align: center;
    background: #998b6b;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
  }
  .hamburger span {
    display : block;
    position: absolute;
    width   : 25px;
    height  : 1px ;
    left    : 7px;
    background : #FFF;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition   : 0.3s ease-in-out;
    transition        : 0.3s ease-in-out;
  }
  .hamburger span:nth-child(1) {
    top: 12px;
  }
  .hamburger span:nth-child(2) {
    top: 19px;
  }
  .hamburger span:nth-child(3) {
    top: 27px;
  }
  
  /* ナビ開いてる時のボタン */
  .hamburger.active span:nth-child(1) {
    top : 19px;
    left: 8px;
    background :#fff;
    -webkit-transform: rotate(-45deg);
    -moz-transform   : rotate(-45deg);
    transform        : rotate(-45deg);
  }
  
  .hamburger.active span:nth-child(2),
  .hamburger.active span:nth-child(3) {
    top: 19px;
    background :#fff;
    -webkit-transform: rotate(45deg);
    -moz-transform   : rotate(45deg);
    transform        : rotate(45deg);
  }
  
  nav.globalMenuSp {
    padding: 3em 0 1em;
    position: fixed;
    z-index : 2;
    top  : 0;
    left : 0;
    color: #fff;
    background: rgba(0,0,0,0.7);
    text-align: center;
    width: 100%;
    opacity: 0;
    transition: opacity .6s ease, visibility .6s ease;
  }
  
  nav.globalMenuSp ul {
    margin: 0 auto;
    padding: 0;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
  }
  
  nav.globalMenuSp ul li {
    list-style-type: none;
    padding: 0;
    width: 50%;
    transition: .4s all;
  }
  nav.globalMenuSp ul li:last-child a{
    display : block;
    z-index : 3;
    margin-top: .2em;
    margin-left: 40%;
    right : 50%;
    cursor: pointer;
    text-align: center;
    background: #998b6b;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  nav.globalMenuSp ul li:last-child {
    padding-bottom: 0;
  }
  nav.globalMenuSp ul li:hover{
    background :#ddd;
  }
  
  nav.globalMenuSp ul li a {
    display: block;
    color: #fff;
    padding: 1em 0;
    text-decoration :none;
  }
  
  /* このクラスを、jQueryで付与・削除する */
  nav.globalMenuSp.active {
    opacity: 100;
  
  }
  @media only screen and (min-width: 580px){
      .hamburger{
          display: none;
      }
      nav.globalMenuSp {
        opacity: 100;
        background:#FFF;
        float: right;
        position: static;
        padding: 0;
        width: auto;
      }
      nav.globalMenuSp ul li{
          display: inline-block;
          width: auto;
          padding: 0 .5em;
      }
      nav.globalMenuSp ul li a{
        color: #4c4948;
        font-size: .8em;
        font-family: 'Noto Serif JP', serif;
      }
      nav.globalMenuSp ul li:hover{
        background :#FFF;
      }
      nav.globalMenuSp ul li:last-child a{
          color: #FFF;
      }
  }