/* Full-screen menu. White sheet, dark type, inverted mark. */

.nav-right{
  display:flex;align-items:center;gap:.55rem;margin-inline-start:auto;position:relative;z-index:2;
}
.menu-btn{
  display:flex;background:rgba(255,255,255,.03);border:1px solid rgba(222,221,217,.22);
  border-radius:999px;width:46px;height:46px;padding:0;cursor:pointer;
  align-items:center;justify-content:center;color:var(--washi,#DEDDD9);
}
.menu-btn span{display:block;width:20px;height:2.5px;background:currentColor;position:relative}
.menu-btn span::before,.menu-btn span::after{
  content:"";position:absolute;left:0;width:20px;height:2.5px;background:currentColor;
}
.menu-btn span::before{top:-7px}
.menu-btn span::after{top:7px}
html.menu-open,html.menu-open body{overflow:hidden}

.site-menu{
  position:fixed;inset:0;z-index:400;
  background:#fff;color:#14120f;
  display:flex;flex-direction:column;
  transform:translateY(-100%);
  visibility:hidden;pointer-events:none;
  transition:transform .55s cubic-bezier(.19,1,.22,1),visibility .55s;
}
.site-menu[data-open="true"]{
  transform:none;visibility:visible;pointer-events:auto;
}
.site-menu a{border-bottom:0;text-decoration:none;color:#14120f}
.site-menu-bar{
  display:flex;align-items:center;justify-content:space-between;
  min-height:72px;padding:.7rem clamp(1.25rem,5vw,2.5rem);
  border-bottom:1px solid rgba(20,18,15,.08);
}
.site-menu-brand{display:flex;border:0;line-height:0}
.site-menu-brand img{
  display:block;width:52px;height:52px;border-radius:50%;object-fit:cover;
  filter:invert(1);
}
.site-menu-close{
  width:46px;height:46px;border-radius:999px;border:1px solid rgba(20,18,15,.16);
  background:transparent;cursor:pointer;position:relative;padding:0;
}
.site-menu-close span{
  position:absolute;left:12px;right:12px;top:22px;height:2px;background:#14120f;
  transform:rotate(45deg);
}
.site-menu-close span::before{
  content:"";position:absolute;inset:0;background:#14120f;transform:rotate(90deg);
}
.site-menu-body{
  flex:1;display:flex;flex-direction:column;
  width:min(920px,100%);
  margin-inline:auto;
  padding:clamp(1.4rem,4vh,2.4rem) clamp(1.25rem,5vw,2.5rem) clamp(1.6rem,4vh,2.6rem);
  overflow:auto;
}
.site-menu-list{list-style:none;margin:0;padding:0}
.site-menu-list > li{border-bottom:1px solid rgba(20,18,15,.08)}
.site-menu-list > li > a,
.site-menu-sub > button{
  font-family:var(--display,"Noto Serif JP",Georgia,serif);
  font-weight:200;font-size:clamp(1.85rem,1.2rem + 2.2vw,2.7rem);
  letter-spacing:-.02em;line-height:1.15;color:#14120f;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  width:100%;text-align:start;background:transparent;border:0;
  padding:.72rem 0;cursor:pointer;text-decoration:none;
}
.site-menu-list > li > a:hover,
.site-menu-sub > button:hover{color:#000}
.site-menu-list > li > a[aria-current="page"]{color:#E0452F}
.site-menu-sub > button svg{
  width:14px;height:14px;flex:0 0 auto;transition:transform .35s cubic-bezier(.22,.61,.36,1);
}
.site-menu-sub > button[aria-expanded="true"] svg{transform:rotate(180deg)}
.site-menu-sub ul{list-style:none;margin:0;padding:0 0 .85rem}
.site-menu-sub li a{
  display:block;font-family:var(--ui,Inter,sans-serif);font-weight:400;
  font-size:1.05rem;line-height:1.35;color:#3a3834;border:0;text-decoration:none;
  padding:.38rem 0 .38rem .15rem;
}
.site-menu-sub li a:hover{color:#000}
.site-menu-sub li a[aria-current="page"]{color:#E0452F}
.site-menu :focus-visible{outline:1.5px solid #14120f;outline-offset:3px}

.site-menu-foot{margin-top:auto;padding-top:clamp(1.8rem,5vh,2.8rem)}
.site-menu a.site-menu-download{
  display:inline-flex;align-items:center;gap:.55rem;
  background:#14120f;color:#fff;border:0;border-radius:999px;
  padding:.9rem 1.45rem;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;
}
.site-menu a.site-menu-download::before{
  content:"";width:7px;height:7px;border-radius:50%;background:#E0452F;flex:0 0 auto;
}
.site-menu a.site-menu-download:hover{background:#000;color:#fff;border:0}
.site-menu-follow{
  margin:1.5rem 0 .75rem;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:#6d6a64;
}
.site-menu-socials{display:flex;flex-wrap:wrap;gap:.55rem}
.site-menu-socials a{
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(20,18,15,.16);color:#14120f;background:transparent;text-decoration:none;
}
.site-menu-socials a:hover{border-color:#14120f;color:#000}
.site-menu-socials svg{width:18px;height:18px;display:block}

@media (max-width:420px){
  .brand-logo{width:42px;height:42px}
}

@media print{
  .site-menu,.menu-btn{display:none !important}
}