.di-menu-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.45em;
  min-height:44px;
  margin-left:auto;
  padding:10px 14px;
  border:1px solid #0d4638;
  background:#fff;
  color:#151515;
  font:inherit;
  font-weight:900;
  letter-spacing:.04em;
  cursor:pointer;
  box-sizing:border-box;
}
.di-menu-toggle:hover{background:#f4f2ea}
.di-menu-overlay{
  position:fixed;
  inset:0;
  z-index:9998;
  background:rgba(0,0,0,.42);
  opacity:0;
  visibility:hidden;
  transition:opacity .18s ease,visibility .18s ease;
}
.di-menu-overlay.is-open{
  opacity:1;
  visibility:visible;
}
.di-menu-panel{
  position:fixed;
  top:0;
  right:0;
  z-index:9999;
  width:min(92vw,560px);
  height:100dvh;
  overflow-y:auto;
  overscroll-behavior:contain;
  background:#f7f4eb;
  color:#151515;
  transform:translateX(102%);
  transition:transform .22s ease;
  box-shadow:-18px 0 50px rgba(0,0,0,.18);
}
.di-menu-panel.is-open{transform:translateX(0)}
.di-menu-inner{padding:28px 28px 40px}
.di-menu-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding-bottom:20px;
  border-bottom:4px solid #0d4638;
}
.di-menu-brand{
  font-size:1.4rem;
  font-weight:1000;
  letter-spacing:-.03em;
}
.di-menu-close{
  border:0;
  background:transparent;
  color:#151515;
  font:inherit;
  font-weight:900;
  cursor:pointer;
}
.di-menu-list{margin-top:18px;border-top:1px solid #bdb9ae}
.di-menu-row{
  border-bottom:1px solid #bdb9ae;
}
.di-menu-main{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  min-height:64px;
  padding:15px 2px;
  border:0;
  background:transparent;
  color:#151515;
  font:inherit;
  font-size:1rem;
  font-weight:900;
  text-align:left;
  text-decoration:none;
  cursor:pointer;
}
.di-menu-main:hover{color:#e60012}
.di-menu-mark{
  flex:0 0 auto;
  margin-left:20px;
  font-size:1.35rem;
  line-height:1;
}
.di-menu-sub{
  display:none;
  padding:0 0 16px 18px;
}
.di-menu-row.is-open .di-menu-sub{display:block}
.di-menu-sub a,
.di-menu-sub span{
  display:block;
  padding:11px 8px;
  color:#333;
  font-size:.9rem;
  line-height:1.55;
  text-decoration:none;
}
.di-menu-sub a:hover{color:#e60012}
.di-menu-sub span{color:#777}
.di-menu-bottom{
  margin-top:32px;
  padding-top:20px;
  border-top:4px solid #151515;
}
.di-menu-bottom a{
  display:block;
  padding:13px 2px;
  border-bottom:1px solid #bbb;
  color:#151515;
  font-weight:900;
  text-decoration:none;
}
.di-menu-bottom a:hover{color:#e60012}
body.di-menu-lock{overflow:hidden}

@media(max-width:760px){
  .di-menu-toggle{
    min-height:42px;
    padding:9px 11px;
    font-size:.78rem;
  }
  .di-menu-panel{width:100%;max-width:none}
  .di-menu-inner{padding:22px 20px 34px}
  .di-menu-main{min-height:58px}
}
/* DON'T IN 共通MENUボタン：既存ヘッダーを変更せず独立表示 */
.di-menu-toggle{
  position:fixed !important;
  top:14px !important;
  right:14px !important;
  z-index:10001 !important;
  width:auto !important;
  max-width:none !important;
  margin:0 !important;
  box-shadow:0 3px 12px rgba(0,0,0,.12) !important;
}

@media(max-width:760px){
  .di-menu-toggle{
    top:10px !important;
    right:10px !important;
  }
}

/* 既存ヘッダーは追従させない。共通MENUだけ追従 */
.header{
  position:static !important;
  top:auto !important;
}

.di-menu-toggle{
  position:sticky !important;
  top:8px !important;
  right:auto !important;
  z-index:10001 !important;
  display:flex !important;
  width:max-content !important;
  margin:8px 10px 6px auto !important;
  box-shadow:0 3px 12px rgba(0,0,0,.12) !important;
}

/* 上部の空白を買い物バナーで埋める */
.di-menu-hero{
  width:100%;
  height:110px;
  overflow:hidden;
  background:#f5f1e7;
}
.di-menu-hero img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
}

.di-menu-toggle{
  position:fixed !important;
  top:30px !important;
  right:10px !important;
  margin:0 !important;
  z-index:10001 !important;
}

@media(max-width:560px){
  .di-menu-hero{
    height:92px;
  }
  .di-menu-hero img{
    object-position:center;
  }
  .di-menu-toggle{
    top:30px !important;
    right:10px !important;
  }
}
