.site-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 20px;
  background:var(--color-main, #111);
  color:#fff;
  position:relative;
  z-index:40;
}

/* logo */
.logo{
  font-family:"Playfair Display",serif;
  font-weight:700;
  font-size:1.4rem;
}

/* PC nav */
nav.primary{
  display:flex;
  gap:18px;
  align-items:center;
}

nav.primary a{
  color:#fff;
  text-decoration:none;
  font-weight:600;
}

nav.primary a:hover{
  opacity:.7;
}

/* hamburger */
.hamburger{
  display:none;
  background:none;
  border:none;
  cursor:pointer;
}

.hamburger span{
  display:block;
  width:22px;
  height:2px;
  background:#fff;
  margin:4px 0;
}

/* mobile */
.menu-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.5);
  opacity:0;
  pointer-events:none;
  transition:.3s;
  z-index:50;
}
.menu-backdrop.show{
  opacity:1;
  pointer-events:auto;
}

.mobile-panel{
  position:fixed;
  top:0;
  right:0;
  width:280px;
  height:100%;
  background:#1a1411;
  transform:translateX(100%);
  transition:.3s;
  z-index:60;
  padding:28px 20px;
}

.mobile-panel.open{
  transform:translateX(0);
}

.mobile-panel .close{
  display:flex;
  justify-content:flex-end;
  margin-bottom:12px;
}

.mobile-panel nav a{
  display:block;
  color:#eee;
  padding:12px 0;
  /* border-bottom:none; */
  border-bottom:1px solid #444;
  text-decoration:none;  
}

  .mobile-panel .lang{
  margin-top:16px;
  font-weight:600;
  color:#e6e3df;   /* メニュー文字と同じ */
  }

  .mobile-panel .lang a{
    color:inherit;
    text-decoration:none;
  }

  .mobile-panel .lang a:hover{
    opacity:0.6;
  }

  .close button {
  color: rgba(230, 230, 230, 0.85);
  }

  .close button:hover {
  opacity: 0.6;
  }

/* responsive */
@media(max-width:767px){
  nav.primary{display:none}
  .hamburger{display:block}
}