:root{
  --member-bg:#07110d;
  --member-panel:#0d1b15;
  --member-panel2:#10241b;
  --member-line:rgba(212,175,55,.22);
  --member-gold:#d6ad45;
  --member-gold2:#f0cf77;
  --member-text:#f5f1e8;
  --member-muted:#9fb0a7;
}

.member-shell-header{
  position:sticky;
  top:0;
  z-index:1200;

  height:72px;
  box-sizing:border-box;

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:0 clamp(16px,4vw,34px);

  background:rgba(5,14,10,.95);
  backdrop-filter:blur(18px);

  border-bottom:1px solid var(--member-line);

  box-shadow:0 10px 30px rgba(0,0,0,.22);

  color:var(--member-text);
}

.member-shell-brand{
  display:flex;
  align-items:center;
  gap:12px;

  color:inherit;
  text-decoration:none;

  min-width:0;
}

.member-shell-mark{
  width:42px;
  height:42px;

  border-radius:12px;

  display:block;
  overflow:hidden;

  background:#0b1611;

  border:1px solid rgba(240,207,119,.32);

  box-shadow:
    inset 0 0 18px rgba(214,173,69,.08);
}

.member-shell-mark img{
  width:100%;
  height:100%;

  object-fit:cover;
  object-position:50% 16%;
}

.member-shell-title{
  display:flex;
  flex-direction:column;

  line-height:1.05;

  min-width:0;
}

.member-shell-title strong{
  font-family:
    "Yu Mincho",
    "Hiragino Mincho ProN",
    serif;

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

  white-space:nowrap;
}

.member-shell-title small{
  margin-top:5px;

  color:var(--member-gold2);

  font-size:10px;
  letter-spacing:.18em;
}

.member-menu-button{
  width:46px;
  height:46px;

  border-radius:13px;

  border:1px solid rgba(240,207,119,.28)!important;

  background:#0e1b15!important;

  color:#fff!important;

  padding:0!important;

  font-size:26px!important;
  line-height:1!important;

  box-shadow:none!important;
}

.member-menu-overlay{
  position:fixed;
  inset:0;

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

  z-index:1290;

  opacity:0;
  pointer-events:none;

  transition:.2s ease;
}

.member-menu-drawer{
  position:fixed;

  right:0;
  top:0;
  bottom:0;

  width:min(88vw,390px);

  z-index:1300;

  background:
    linear-gradient(
      180deg,
      #07150f,
      #0b1b14
    );

  border-left:1px solid var(--member-line);

  box-shadow:-25px 0 70px rgba(0,0,0,.42);

  transform:translateX(105%);

  transition:.24s ease;

  color:var(--member-text);

  padding:22px;

  box-sizing:border-box;

  overflow:auto;
}

body.member-menu-open{
  overflow:hidden!important;
}

.member-menu-open .member-menu-overlay{
  opacity:1;
  pointer-events:auto;
}

.member-menu-open .member-menu-drawer{
  transform:translateX(0);
}

.member-drawer-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;

  gap:16px;

  padding-bottom:20px;

  border-bottom:1px solid var(--member-line);
}

.member-drawer-brand{
  display:flex;
  align-items:center;
  gap:11px;
}

.member-drawer-brand img{
  width:48px;
  height:48px;

  border-radius:12px;

  object-fit:cover;
  object-position:50% 16%;

  border:1px solid rgba(240,207,119,.28);
}

.member-drawer-brand strong{
  display:block;

  font-family:
    "Yu Mincho",
    "Hiragino Mincho ProN",
    serif;

  font-size:20px;
  letter-spacing:.08em;
}

.member-drawer-brand span{
  display:block;

  color:var(--member-gold2);

  font-size:11px;
  letter-spacing:.15em;

  margin-top:5px;
}

.member-close{
  width:40px;
  height:40px;

  border:0!important;

  border-radius:10px!important;

  background:rgba(255,255,255,.06)!important;

  color:#fff!important;

  font-size:25px!important;

  padding:0!important;
}

.member-menu-links{
  display:flex;
  flex-direction:column;

  gap:9px;

  padding-top:20px;
}

.member-menu-links a,
.member-menu-links button{
  width:100%;

  box-sizing:border-box;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:12px;

  text-align:left;
  text-decoration:none;

  padding:15px 16px!important;

  border-radius:13px!important;

  border:1px solid rgba(255,255,255,.08)!important;

  background:rgba(255,255,255,.025)!important;

  color:#f6f3ec!important;

  font-size:14px!important;
  font-weight:700;
}

.member-menu-links a:hover,
.member-menu-links button:hover{
  border-color:rgba(214,173,69,.42)!important;

  background:rgba(214,173,69,.07)!important;
}

.member-menu-links .accent{
  color:var(--member-gold2)!important;

  border-color:rgba(214,173,69,.26)!important;
}

.member-menu-links .danger{
  color:#ff7979!important;
}

.member-menu-label small{
  display:block;

  color:#7f9289;

  font-size:10px;
  letter-spacing:.12em;

  margin-top:4px;

  font-weight:500;
}

.member-menu-chevron{
  color:var(--member-gold);

  font-size:19px;
}


/* =========================================================
   スマホ固定広告対策
   320x50 / 640x100 オーバーレイ広告用
========================================================= */

@media(max-width:560px){

  .member-shell-header{
    height:64px;

    padding:0 12px;
  }

  .member-shell-mark{
    width:36px;
    height:36px;
  }

  .member-shell-title strong{
    font-size:15px;
  }

  .member-menu-button{
    width:42px;
    height:42px;
  }

  .member-menu-drawer{
    padding:18px;
  }

  /*
    最大100px高の広告 + 少し余裕 + iPhone等のSafe Area
  */
  body{
    padding-bottom:
      calc(120px + env(safe-area-inset-bottom));
  }
}