/* UNFASHION shared header and left drawer.
   All /newhp pages load this file so one edit updates every header. */
.uf-header-inner {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  gap: 20px !important;
}

.uf-menu-trigger {
  width: 38px;
  height: 38px;
  padding: 8px 7px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  justify-self: start;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.uf-menu-trigger span {
  display: block;
  width: 23px;
  height: 1px;
  flex: 0 0 1px;
  background: #211e1a;
}

.uf-brand-v2 { grid-column: 2; justify-self: center; }
.uf-header-actions { grid-column: 3; justify-self: end; }
.uf-drawer-overlay { position: fixed; inset: 0; z-index: 10010; background: rgba(20,17,14,.42); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease; }
.uf-left-drawer { position: fixed; inset: 0 auto 0 0; z-index: 10011; width: min(390px, calc(100vw - 24px)); padding: 30px 34px 28px; display: flex; flex-direction: column; color: #fff; background: #1a1714; transform: translateX(-100%); visibility: hidden; transition: transform .3s ease, visibility .3s ease; overflow-y: auto; box-sizing: border-box; }
.uf-menu-open { overflow: hidden; }
.uf-menu-open .uf-drawer-overlay { opacity: 1; visibility: visible; }
.uf-menu-open .uf-left-drawer { transform: translateX(0); visibility: visible; }
.uf-drawer-head { padding-bottom: 23px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.16); }
.uf-drawer-head > a { color: #fff; text-decoration: none; font: 500 13px/1 "Noto Sans JP", sans-serif; letter-spacing: .16em; }
.uf-drawer-head button { padding: 0; color: rgba(255,255,255,.72); border: 0; background: transparent; font: 300 27px/1 sans-serif; cursor: pointer; }
.uf-drawer-nav { all: unset !important; position: static !important; width: auto !important; height: auto !important; padding: 6px 0 24px !important; display: grid !important; color: #fff !important; background: transparent !important; border: 0 !important; box-shadow: none !important; transform: none !important; }
.uf-drawer-nav p { margin: 23px 0 8px !important; padding: 0 !important; color: #b89b76 !important; font: 600 10px/1.4 "Noto Sans JP", sans-serif !important; letter-spacing: .2em !important; }
.uf-drawer-nav a { margin: 0 !important; padding: 9px 0 !important; display: block !important; color: rgba(255,255,255,.76) !important; background: transparent !important; border: 0 !important; border-bottom: 1px solid rgba(255,255,255,.07) !important; text-decoration: none !important; font: 400 13px/1.55 "Noto Sans JP", sans-serif !important; letter-spacing: .05em !important; }
.uf-drawer-nav a:hover { color: #fff !important; }
.uf-drawer-social { margin-top: auto; padding-top: 20px; display: flex; gap: 12px; border-top: 1px solid rgba(255,255,255,.16); }
.uf-drawer-social a { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.16); border-radius: 12px; background: rgba(255,255,255,.055); text-decoration: none; transition: background .2s ease, border-color .2s ease, transform .2s ease; }
.uf-drawer-social a:hover { background: rgba(255,255,255,.11); border-color: rgba(255,255,255,.36); transform: translateY(-1px); }
.uf-drawer-social a svg { display: none; }
.uf-drawer-social a::before { content: ""; width: 25px; height: 25px; display: block; background-position: center; background-repeat: no-repeat; background-size: contain; }
.uf-drawer-social a[aria-label="Instagram"]::before { background-image: url("/newhp/assets/social/instagram.svg"); }
.uf-drawer-social a[aria-label="Pinterest"]::before { background-image: url("/newhp/assets/social/pinterest.svg"); }
.uf-drawer-social a[aria-label="Xで共有"]::before { background-image: url("/newhp/assets/social/x.svg"); }
.uf-drawer-social a[aria-label="LINE"]::before { width: 40px; height: 40px; background-image: url("/newhp/assets/social/line.svg"); }

@media (max-width: 860px) {
  .uf-header-inner { padding: 0 14px !important; gap: 10px !important; }
  .uf-header-actions { display: none !important; }
  .uf-left-drawer { padding: 25px 25px 24px; }
}