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

/*nav*/
nav ul.top_nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
nav ul.top_nav li{
  color: #704B27;
  margin-left: 4em;
}
nav ul.top_nav li:first-child{
  margin-left: 0;
}
nav ul.top_nav li a {
  font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", serif;
  color: white;
  font-size: 16px;
  padding-bottom: 2px;
  letter-spacing: 0.2em;
}
nav ul.top_nav li a:hover {
  border-bottom: solid 1px #583822;
  color: #583822;
}
    /*ハンバーガーメニューをPCで非表示*/
    div.menu,
    div.ham { 
      display: none;
    }

      /*ハンバーガーメニュー設定*/
      @media screen and (max-width:900px) {
        /*PCのナビゲーション非表示*/
        nav ul.top_nav  { 
          display: none;
        }
        /*ハンバーガーメニューをスマホで表示*/
        div.menu,
        div.ham { 
          display: block;
        }
        
        div.ham {
          position: relative;
          top: 0px;
          left: 0px;
          width: 50px;
          height: 50px;
          z-index: 10;
        }
        /*メニューボタン*/
        div.ham span.ham_line {
          position: absolute;
          left: 10px;
          width: 25px;
          height: 2px;
          background-color: white;
          transition: all 0.3s;
        }
        span.ham_line1 {
          top: 14px;
        }
        span.ham_line2 {
          top: 23px;
        }
        span.ham_line3 {
          bottom: 14px;
        }
        div.menu {
          position: fixed;
          width: 60%;
          height: 100vh;
          top: 0px;
          right: -500px;
          background-color: rgba(157,137,108,0.8);
          transition: all 0.3s;
        }
        div.menu ul {
          margin: 100px 0 0 50px;
          display: block;
       }
        div.menu ul li {
          display: block;
          line-height: 70px;
        }
        div.menu ul li a{
          color: white;
          font-size: 17px;
        }
        div.menu ul li a:hover {
          color: #F77709;
        }
        div.menu span{
          font-size: 13px;
          margin-left: 12px;
        }
            /*js用*/
            .close .ham_line1 {
              transform: rotate(45deg);
              top: 24px;
            }
            .close .ham_line2 {
              width: 0px;
            }
            .close .ham_line3 {
              transform: rotate(-45deg);
              top: 24px;
            }
            div.menu.show {
              top: 0px;
              right: 0px;
            }
            .noscroll {
              overflow: hidden;
            }
      }