.tx{
  border-top: 1px red solid;
  padding-top: 30px;
  margin-top: 30px
}

/* 右から現れる */
.sp-nav {
     z-index:1001;
     position: fixed;
     top: 0;
     right: 0;
     width: 80%;
     max-width:200px;
     height: 100vh;
     display: block;
     background:rgba(35,24,21,0.95);
     opacity: 0;
     transform: translateX(100%);
     transition: all .2s ease-in-out;
     border-left:1px solid var(--brown);
  }


  .sp-nav.toggle {
      transform: translateX(0);
      opacity: 1;
  }
  .pc-nav ul{
    display:flex;
    gap:35px;
    list-style:none;
}

.pc-nav a{
    color:var(--white);
    text-decoration:none;
    transition:.3s;
}

.pc-nav a:hover{
    color:var(--gold);
}


/* 上から現れる */
  /* .sp-nav {
       z-index: 10;
       position: fixed;
       top: 0;
       right: 0;
       width: 100%;
       height: 100vh;
       display: block;
       width: 100%;
       background: rgba(255, 0, 0, 0.5);
       opacity: 0;
       transform: translateY(-100%);
       transition: all .2s ease-in-out;
    } */


  /* ふわっと表示 */

  /* .sp-nav {
  z-index: 10;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100vh;
  background: rgba(255, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

.sp-nav.toggle {
  opacity: 1;
  visibility: visible;
} */



#hamburger{
    width:120px;
    height:42px;

    border:2px solid var(--gold);
    border-radius:880px;/*まるさ*/

    background:transparent;
    color:var(--gold);

    font-size:16px;
    letter-spacing:.08em;

    cursor:pointer;

    transition:.3s;

    display:flex;
    justify-content:center;
    align-items:center;
    z-index:1002;
}

#hamburger span{
    color:#b9a371;
}

#hamburger:hover{
    background:#b9a371;
    color:#231815;
}

#hamburger:hover span{
    color:#231815;
}



/*#hamburger{テスト
    position:relative;
    width:40px;
    height:25px;
    cursor:pointer;
}

#hamburger {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 30px;
  height: 25px;
  z-index: 10000;
  cursor: pointer;
}

  #hamburger span {
     position: absolute;
     top: 50%;
     left: 0;
     display: block;
     width: 100%;
     height: 2px;
     background-color: red;
     transform: translateY(-50%);
  }
  #hamburger::before {
     content: '';
     display: block;
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 2px;
     background-color: red;
  }
  #hamburger::after {
     content: '';
     display: block;
     position: absolute;
     bottom: 0;
     left: 0;
     width: 70%;
     height: 2px;
     background-color: red;
  }*/

  /*スマホメニュー*/
  .sp-nav ul {
     padding: 0;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     height: 100%;
  }
  .sp-nav li {
     margin: 0;
     padding: 0;
     list-style:none;

     opacity:0;/*透明って意味*/
    transform:translateY(-50px);/*最初の位置をYへ上に*/
    /*↑透明な状態で３０Y軸にって命令*/
    transition:.3s;/*動かす*/
  }

  .sp-nav.toggle li{/*開いたらこの状態にするという命令*/
    opacity:1;/*透明度の指定*/
    transform:translateY(0);
}

/*上からメニューが来るようするやつ！*/
.sp-nav.toggle li:nth-child(1){/*nth-childは１番目だけに適応とかしてる*/
    transition-delay:.1s;/*待ち時間*/
}

.sp-nav.toggle li:nth-child(2){
    transition-delay:.2s;
}

.sp-nav.toggle li:nth-child(3){
    transition-delay:.3s;
}

.sp-nav.toggle li:nth-child(4){
    transition-delay:.4s;
}

.sp-nav.toggle li:nth-child(5){
    transition-delay:.5s;
}

.sp-nav.toggle li:nth-child(6){
    transition-delay:.6s;
}

.sp-nav.toggle li:nth-child(7){
    transition-delay:.7s;
}

.sp-nav.toggle li.close{
    transition-delay:.8s;
}




  .sp-nav li span {
     font-size: 15px;
     color: #b9a371;
  }
  .sp-nav li a, .sp-nav li span {
     display: block;
     padding: 20px 0;
     text-decoration: none;
  }

  .sp-nav li a{
    color:#b9a371;
}

.sp-nav li a:hover{
    color:#fff;
}
  /*-閉じるアイコンー*/
  .sp-nav .close {
     position: relative;
     padding-left: 20px;
  }
  .sp-nav .close::before {
     content: '';
     position: absolute;
     top: 50%;
     left: 0;
     display: block;
     width: 16px;
     height: 1px;
     background: #b9a371;
     transform: rotate( 45deg );
  }
  .sp-nav .close::after {
     content: '';
     position: absolute;
     top: 50%;
     left: 0;
     display: block;
     width: 16px;
     height: 1px;
     background: #b9a371;
     transform: rotate( -45deg );
  }
  .toggle {
     transform: translateX( 0 );
     opacity: 1;
  }
  .main-visual {
     padding: 0 4%;
  }


  /* 背景を暗くする */
.overlay{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100vh;

    background:rgba(0,0,0,.6);

    opacity:0;
    visibility:hidden;

    transition:.3s;

    z-index:1000;
}

/* メニューを開いたら表示 */
.overlay.toggle{
    opacity:1;
    visibility:visible;
}