/* ==========================================================================
   ZAKKA STORE – Reduced CSS (readable/maintainable)
   Version: 13.0
   --------------------------------------------------------------------------
   NOTE
   - Theme colors & fonts are CSS variables:
     --font-main, --font-logo
     --color-main, --color-midashi, --color-contents, --color-footer
     --color-price-text, --color-button, --color-button-hover, --color-button-text
     --color-waiting, --color-end, --color-yoyaku
   ========================================================================== */
/* ==== ZAKKA STORE – Clean Build ==== */
/* Core reset */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }
html,body{height:100%;}
body{
  color:#333; line-height:1.6; position:relative;
  font-family:var(--font-main);
  font-size:16px;
  word-break:normal; overflow-wrap:anywhere; line-break:strict;
}
a{ color:var(--color-text); text-decoration:none; }
li{ list-style:none; }
p{ line-height:1.6; }

/* Headings */
h1,h2{ font: normal 2.5em/1.8 var(--font-logo); color:var(--color-heading); margin:0 0 20px; }
h2,h3{ color:var(--color-heading); margin:10px 0; }
h2{ border-bottom:1px solid #ccc; padding-bottom:5px; }
h1,h2,h3{ text-wrap:balance; }

/* Utilities */
.clearfix::after{ content:""; display:block; clear:both; }
.bg-white{ background:#fff; padding:15px; margin-bottom:20px; }

/* Header fixed bar */
.headerFixed{
  position:fixed; inset:0 0 auto 0; height:50px; padding:5px 100px 5px 50px;
  z-index:2; display:grid; place-items:center; line-height:1; font-size:.9em;
  background:var(--color-main);
}
#baseMenu{ position:absolute; top:0; right:5px; }
#baseMenu img{ width:40px; height:40px; padding:9px; }
#baseMenu .base,#baseMenu .cart{
  display:inline-block; width:40px; height:40px; margin:5px; background:#fff; border-radius:50%;
}

/* Main layout */
.mainContent{ max-width:1280px; margin:0 auto; }
.header{ margin-top:65px; color:#444; text-align:center; }
.headerWrapper{ margin:0 10px; }
.header__title{ font-family:var(--font-logo); }
.header__title a{ color:#444; text-decoration:none; }
.header__title img{ max-width:100%; height:auto; padding-top:20px; }
.header__description{ font-size:12px; border:1px solid #ccc; padding:10px; margin-bottom:20px; }

/* Footer */
footer,#footer{ background:var(--color-main); }
#footer{
  display:inline-block; width:100%; margin-top:50px; padding:40px 0; text-align:center;
  border-top:1px solid #ccc;
}
.footerLogo{ font: normal 42px/1.2 var(--font-logo); padding:20px; }
.footerLogo img{ max-width:80%; max-height:80%; }
.footerMenu ul li{ display:inline-block; font-size:14px; margin:10px; }
.fotterCategory h2,.footerMenu ul li a,.copyright{ color:var(--color-footer); }
.fotterCategory h2{ font-weight:normal; border-bottom:0; margin-bottom:10px; }
.fotterCategory ul{ margin:0; padding:0; }
.fotterCategory li{ display:block; color:#444; font-weight:700; font-size:16px; line-height:1.4; margin:10px; border-top:1px solid #ccc; }
.fotterCategory li a{
  display:block; border-top:1px solid #e5e5e5; border-bottom:1px solid #c1c1c1;
  background:#eee; padding:15px 10px; color:#333; text-align:center; font-size:16px;
}
.social-footer{
  color:#686; font-size:13px; text-align:center; padding:20px 0; border-top:1px solid #ccc;
}
.social-footer a{ font-size:15px; color:#000; padding:20px 0; }
.social-footer a:hover{ color:#c3c3c3; }
.copyright{ color:#686; letter-spacing:1px; font-size:12px; }

/* Main wrapper */
.main{ margin-top:15px; }
.mainWrapper{ margin:0 10px 40px; }

/* Hero + sliders */
.hero-image,.fade img,.slider img{
  aspect-ratio:16/9; width:100%; height:auto; object-fit:cover;
}
.slider{ width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); }
.slider .slick-slide{ height:auto!important; }
.slick-slide{ margin:0 .2vw!important; }
.slider button{ display:none!important; }

/* News */
.news dl{ width:100%; line-height:1.8; }
.news dt{ float:left; }
.news dd{ margin-left:110px; }

/* Breadcrumb */
.breadcrumb li{ display:inline; padding-left:2px; }
.breadcrumb li::before{ content:"\00bb"; padding-right:5px; }
.breadcrumb li:first-child::before{ content:""; }
.breadcrumb__link,.breadcrumb__notlink{ color:var(--color-heading)!important; }

/* Sub category tag */
.sub-cat{
  display:inline-block; border:1px solid #ccc; padding:10px; margin:15px 5px 5px; color:var(--color-heading);
}
.sub-cat a{ color:var(--color-heading)!important; }

/* Grid (12 cols) */
.row{ width:100%; max-width:1280px; margin:0 auto; }
.col_1{width:6.6667%}.col_2{width:15%}.col_3{width:23.3333%}.col_4a{width:30.6667%}
.col_4{width:31.6667%}.col_5{width:40%}.col_6{width:48.3333%}.col_7{width:56.6667%}
.col_8{width:65%}.col_9{width:73.3333%}.col_10{width:81.6667%}.col_11{width:90%}.col_12{width:98.3333%}
.col_1,.col_2,.col_3,.col_4,.col_4a,.col_5,.col_6,.col_7,.col_8,.col_9,.col_10,.col_11,.col_12{
  margin:8px .8333%; float:left; display:block;
}
.col_4:nth-child(3n+1){ clear:both; }

/* Items */
.item{
  background:#fff; border-radius:2px; margin-bottom:25px; padding:15px; position:relative;
  box-shadow:0 0 3px #fff, 0 0 5px #ccc, 0 0 1px #aaa;
}
.item__box{ position:relative; }
.item__image{ width:100%; }
.item__box .item__image,.RelatedItems_img{
  /* CLS抑制（正方形想定） */
  aspect-ratio:1/1; width:100%; height:auto; object-fit:cover;
}
.item__subImage img{
  width:90%; height:80px; margin:5px 0 0; object-fit:cover; object-position:50% 50%;
}
.item__title{ font-size:.9em; color:#333; height:1.8em; }
.item__title2{
  font-size:1.4em; font-weight:700; color:#333; line-height:1.4; border-bottom:3px solid #666; padding:10px 0 5px;
}
.item__price{ font-weight:700; font-size:1.1em; height:1em; }

/* Price & discount */
.item__price__caption{
  position:absolute; z-index:0; bottom:30px; left:8px;
  font-weight:700; font-size:.95em; height:1.8em; color:#fff;
}
.item__price__caption_bg{
  background:var(--price-bg); color:var(--price-text);
  opacity:.9; padding:5px 15px 3px; margin-left:-8px;
}
.item__discount__top{
  position:absolute; left:0; bottom:40px; padding:3px 5px; margin-left:0;
  font-size:.8em; color:#fff; background:#c40404; opacity:.8; border:0;
}
.item__properprice{ text-decoration:line-through; }

.item__price2{
  font-weight:700; font-size:2em; height:2em; text-align:right; padding-top:10px;
}
.item__price3{ font-size:1.2em; height:2em; text-align:right; padding-top:10px; }
.item__price__caption_bg del,.item__price3 del{ opacity:.6; text-decoration:line-through; }
.item__price__caption_bg ins,.item__price2 ins{ text-decoration:none; font-weight:700; }

/* Status labels */
.waitingForSale,.endOfSale,.yoyaku,.communityLabel,.kaiin-gentei{
  text-align:center; margin-top:10px; padding:10px 20px; font-size:.85em; border-radius:4px; color:var(--price-text);
}
.waitingForSale{ background:var(--waiting); }
.endOfSale{ background:var(--end); }
.yoyaku{ background:var(--yoyaku); }
.kaiin-gentei,.communityLabel{ background:orange; color:#fff!important; }

/* Buttons */
button, a.btn, input[type=submit], input[type=reset], input[type=button]{
  display:inline-block; width:100%; margin:10px 2px 0 0; padding:20px 30px;
  font-size:14px; line-height:1; color:#666!important; background:#fff; border:3px solid #ccc; border-radius:2px; cursor:pointer;
}
button.small, a.btn.small{ font-size:.8em; padding:10px 15px; width:auto; border-width:2px; }
button.large, a.btn.large{ font-size:1.3em; padding:15px 25px; }
button.disabled{ color:#ccc; cursor:default; background:#efefef; }
button:hover, a.btn:hover, input[type=submit]:hover, input[type=reset]:hover, input[type=button]:hover{ color:#fff; }

.purchaseButton__btn, button{
  background:var(--btn-bg); color:var(--btn-text)!important; border:none;
}
.purchaseButton__btn:hover, button:hover{
  background:var(--btn-bg-hover); color:var(--btn-text)!important;
}
button[type=submit]:disabled{
  background:#fff; color:#696!important; border:1px solid #696; text-decoration:line-through!important;
}

/* Options head */
.itemOption__name,.lottery__label{
  color:var(--btn-bg)!important; font-weight:700; border-left:5px solid var(--btn-bg); padding-left:5px; margin:5px 0;
}
.itemOption__caption{ font-size:.85em; padding:5px; line-height:1.5; color:#666; }

/* Preview thumbnails */
.preview__content{ cursor:pointer; vertical-align:middle; width:20%; float:left; }

/* Drawer / nav */
.drawer-hamburger{
  position:fixed; z-index:110; top:0; width:1.5rem; padding:10px .75rem; transition:all .6s cubic-bezier(.19,1,.22,1);
  background:transparent; border:0; outline:0; font-size:.75em;
}
.drawer-hamburger:hover{ cursor:pointer; color:#000; }
.drawer-hamburger-icon{ position:relative; display:block; margin-top:3px; }
.drawer-brand{ font-family:var(--font-logo); }
.drawer-brand img{ max-width:180px; margin-top:10px; }
ul.drawer-menu li.drawer-dropdown:hover>ul.drawer-dropdown-menu{ display:block; }
.drawer-menu{
  height:90%!important; overflow:auto!important; -webkit-overflow-scrolling:touch!important;
  margin-bottom:20px!important; padding-left:5px;
}
.drawer-menu-item{ display:block!important; font-size:.85rem!important; padding:.5rem!important; }
.drawer-dropdown-menu-item{ font-size:.85rem!important; line-height:1.5rem!important; }

/* Forms (light) */
form{ margin:20px 0; }
label{ display:block; margin-top:10px; position:relative; }
label.inline{ display:inline; margin:0; }
label span{ color:#999; font-size:.9em; }
label span.right{ position:absolute; right:0; bottom:0; text-align:right; }
label.disabled{ color:#ccc; }
input,select,textarea{
  -webkit-appearance:none; appearance:none; border:1px solid #000; border-radius:0;
  font: inherit;
}
input[type=text]{ width:98%; line-height:2; margin-bottom:.5em; font-size:.9em; padding:10px; color:#666; }
input[type=text]:focus{ outline:none; border:2px solid #87cefa; }
textarea{ width:97%; height:200px; margin:0 0 20px; border:1px solid #ccc; padding:5px; font-size:.9em; }

/* Share */
.sharebtn{ margin:40px 0 0; font-size:.85em; clear:both; line-height:0; }
.sharebtn li{ float:right; }
.sharebtn li.twitter,.sharebtn li.fb-like{ margin-left:5px; }

/* Report */
#report{
  color:#468847; font-size:14px; background:#efefef; border-radius:4px; width:40%;
  margin:10px 0 10px auto; padding:5px 20px; text-align:center;
}

/* Apps Item Detail custom slider (slick) */
.appsItemDetailCustomTag_slider{ padding:20px 0!important; position:relative; }
.appsItemDetailCustomTag_slider .slick-dots li button:before{ font-size:40px!important; }

/* YouTube responsive */
.youtube{ width:100%; aspect-ratio:16/9; }
.youtube iframe{ width:100%; height:100%; }

/* i18n app */
#i18 select{
  -webkit-appearance:none; appearance:none; background:#fff; border:1px solid #ccc; border-radius:2px;
  color:#000; font-size:11px; line-height:18px; padding:5px 25px 5px 10px; vertical-align:middle;
}

/* Membership / Community (抜粋) */
.communityMain{ width:100%!important; margin-top:-80px; padding:0!important; margin:0!important; }
.communityContent{ width:100%!important; margin:0 auto; }
#productsLimitedItem{ background:#fff; width:100%!important; padding:2px; }
.communityItem .communityItemLabel.comingSoon{
  text-align:center; margin-top:10px; padding:3px 10px; font-size:.7em; font-weight:700; border:1px solid #0fafaa; border-radius:3px;
}
#membership .heading-wrapper button,
#membership .leave-wrapper button{
  background:#1c1c1c; border-radius:10px; color:#fff; text-decoration:none!important;
}
#membership .heading-wrapper button{ font-size:.8em; width:150px; }
#membership #leave-modal{ width:90%; }

/* Misc */
.object_fit_img{ object-fit:cover; font-family:'object-fit: cover;'; }
.cover{ position:absolute; inset:0; z-index:1; }
.soldout{ color:#fff; background:#c40404; padding:5px 50px 3px; margin-bottom:20px!important; opacity:.8; }
.soldout__caption{ position:absolute; top:20px; right:0; padding:3px 40px; color:#fff; background:#c40404; opacity:.8; }

/* Links/Buttons in pagination */
#moreItems a{ border:2px solid var(--color-heading)!important; color:var(--color-heading); }
#moreItems a:hover{ opacity:.6; }

/* Motion preferences */
@media (prefers-reduced-motion: reduce){ .wow{ animation:none!important; } }

/* ===== Responsive ===== */
@media (max-width:780px){
  .headerFixed{ font-size:.85em; padding:5px 75px 5px 36px; text-align:left; }
  .soldout__caption{ padding:3px 20px; }
  .item__title2{ font-size:1.2em; font-weight:700; line-height:2; }
  .item__price2{ font-weight:700; font-size:1.4em; text-align:right!important; line-height:1.2!important; padding-bottom:40px!important; }
  .item__price__caption{ font-size:.7em!important; bottom:25px!important; line-height:1.6; }
  #itemIndex .item__image{ height:140px!important; }
}

@media (min-width:480px) and (max-width:599px){
  .col_4a,.col_4,.col_6{ width:98.3333%!important; }
  #itemIndex .item__image{ max-width:599px!important; height:600px!important; object-fit:cover; object-position:50% 50%; }
  .item__price__caption{ font-size:1.4em!important; bottom:25px!important; line-height:2; }
}

@media (max-width:600px){
  .header__title img{ padding-top:0; margin-top:-30px; }
}

@media (max-width:599px){
  body{ font-size:.9em!important; }
  .col_4a,.col_4,.col_6{ width:98.3333%!important; }
}
@media (max-width:480px){
  .news dl{ width:100%; line-height:1.4; }
  .news dt{ float:left; padding-bottom:5px; }
  .news dd{ padding-bottom:5px; }
  .headerFixed{ height:55px; font-size:.65em; padding:8px 90px 10px 45px; display:grid; place-items:center; }
  .headerFixed .text{
    display:-webkit-box!important; -webkit-line-clamp:3!important; -webkit-box-orient:vertical!important; overflow:hidden!important;
    line-height:1.2em; max-height:4.5em;
  }
  .header__title{ margin:40px auto -10px; font-size:30px!important; line-height:1; }
  .drawer-brand{ line-height:1.2; margin:10px auto; }
  .footerMenu ul li{ font-size:16px; margin:10px; padding:8px 0; display:block; }
  .footerLogo{ font-size:30px!important; line-height:1; }
  .item__title{ font-size:.85em; font-weight:700; }
  .item__price{ font-weight:700; font-size:1.2em; line-height:1.8!important; }
  .item__price__caption{ font-size:1.4em!important; bottom:25px!important; line-height:2; }
  .item__title2{ font-size:1.1em; font-weight:700; }
  .item__price2{ font-weight:700; font-size:1.2em; text-align:right!important; line-height:1.1!important; padding-bottom:40px!important; }
  .item__subImage img{ width:90%; height:50px; margin-top:5px; object-fit:cover; object-position:50% 50%; }
  #itemIndex .item__image{ height:280px!important; }
  #baseMenu img{ width:32px; height:32px; padding:8px; background:#fff; border-radius:50%; margin-top:10px!important; }
  .copyright{ padding-bottom:30px; }
}

/* End */
/* =======================================================
   ZAKKA STORE — FINAL FIX PACK v2  (append LAST)
   1) 右上アイコン（BASE/カート）トリミング・ズレ解消
   2) ハンバーガー：ヘッダー内で縦中央＆少し小さめ表示
   3) お知らせバナー：常に画面幅100%
   4) ヘッダーとお知らせの間に出る余白を解消
   ======================================================= */

/* ---- 調整用トークン（見た目はここだけ触ればOK） ---- */
:root{
  --header-h: 55px;    /* SP時のヘッダー高さ */
  --icon-btn: 40px;    /* 円形タップ領域の直径 */
  --icon-size: 18px;   /* アイコン画像の実サイズ */
  --icon-gap: 6px;     /* BASE/カートの間隔 */
  --burger-scale: .78; /* ハンバーガーの線だけ縮小（タップ面積は維持） */
}
@media (min-width: 768px){
  :root{
    --header-h: 50px;  /* PC時のヘッダー高さ */
    --icon-btn: 36px;
    --icon-size: 18px;
    --burger-scale: .75;
  }
}

/* ---- 4) 余白の正体を解消：marginではなくpaddingで回避 ---- */
/* 既存 .header{ margin-top:65px; } の影響を打ち消し、ヘッダー高ぶんの
   余白を header 内の padding で確保 → お知らせがぴったり下に来る */
.header{
  margin-top: 0 !important;
  padding-top: var(--header-h) !important;
}

/* ヘッダー自体の高さ基準（各位置計算のベース） */
.headerFixed{
  height: var(--header-h) !important;
  z-index: 105; /* バナーやスライダーより前に */
}

/* ---- 1) 右上：BASE/カート（白丸ボタン＋中に小さめ画像） ---- */
#baseMenu{
  position: absolute !important;
  right: 8px !important;
  top: calc((var(--header-h) - var(--icon-btn)) / 2) !important;
  display: inline-flex;
  align-items: center;
  gap: var(--icon-gap);
  z-index: 106;
}
#baseMenu a,
#baseMenu .base,
#baseMenu .cart{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: var(--icon-btn);
  height: var(--icon-btn);
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0,0,0,.05);
  margin: 0 !important;   /* 既存の margin:5px!important を無効化 */
}
#baseMenu img{
  width: var(--icon-size) !important;
  height: var(--icon-size) !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  display: block;
  object-fit: contain;
}

/* ---- 2) 左上：ハンバーガー（ヘッダー内で縦中央） ---- */
.drawer-hamburger{
  position: fixed !important;        /* ライブラリ挙動は維持 */
  left: 8px !important;
  top: calc((var(--header-h) - var(--icon-btn)) / 2) !important;
  width: var(--icon-btn) !important;
  height: var(--icon-btn) !important;
  padding: 8px !important;           /* タップ余白は確保 */
  transform: none !important;        /* 既存の translateY(-50%) を無効化 */
  z-index: 106;
}
.drawer-hamburger-icon{
  margin-top: 0 !important;
  transform: scale(var(--burger-scale)) !important;
  transform-origin: center !important;
}

/* ---- 3) お知らせバナー：常に画面幅100%（左右のにじみも防止） ---- */
.informationBanner{
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}
.informationBanner .informationBannerContainer{
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
}
.informationBanner .informationBannerClose,
.informationBanner .informationBannerArrow{
  width: auto; /* %指定による崩れを回避 */
}

/* スライダーも念のためフル幅を担保 */
.slider{
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

/* =========================================
   ZAKKA STORE — FINAL PATCH v3
   ・ハンバーガー：ヘッダー内で縦中央・左余白を確保
   ・ドロワー：最前面に（ヘッダーやラベルより上）
   ・ヘッダーとお知らせの余白を同期
   ========================================= */

/* 必要に応じてここだけ調整 */
:root{
  --header-h: 55px;    /* ヘッダーの高さ（SP） */
  --icon-btn: 40px;    /* 円形タップ領域 */
  --icon-size: 18px;   /* アイコン実サイズ */
  --burger-gap-x: 12px;/* ハンバーガーの左余白 */
}
@media (min-width:768px){
  :root{
    --header-h: 50px;  /* PC */
    --icon-btn: 36px;
  }
}

/* ヘッダーのレイヤーと背景（ただしドロワーよりは下） */
.headerFixed{
  position: fixed;
  left: 0; right: 0; top: 0;
  height: var(--header-h);
  display: flex; align-items: center; justify-content: center;
  background-color: var(--color-main);
  z-index: 200; /* ドロワーより低く、コンテンツより高い */
}

/* 右上：BASE/カートは既存のまま。必要ならサイズ同期 */
#baseMenu{
  position: absolute; right: 8px;
  top: calc((var(--header-h) - var(--icon-btn)) / 2);
  display: inline-flex; gap: 6px; align-items: center;
  z-index: 210;
}
#baseMenu a, #baseMenu .base, #baseMenu .cart{
  width: var(--icon-btn); height: var(--icon-btn);
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border-radius: 50%;
}
#baseMenu img{
  width: var(--icon-size) !important; height: var(--icon-size) !important;
  padding: 0 !important; margin: 0 !important; background: transparent !important;
}

/* 左上：ハンバーガーをヘッダー内の縦中央＆左に寄せる */
.drawer-hamburger{
  position: fixed !important;
  left: var(--burger-gap-x) !important;
  top: calc((var(--header-h) - var(--icon-btn)) / 2) !important;
  width: var(--icon-btn) !important;
  height: var(--icon-btn) !important;
  padding: 8px !important;
  transform: none !important; /* 旧 translateY(-50%) を無効化 */
  z-index: 210;               /* ヘッダー内で最上だが、ドロワーより下 */
}
.drawer-hamburger-icon{ margin-top:-10px !important; }

/* ドロワー（メニュー本体とオーバーレイ）を最前面へ */
.drawer-nav{ z-index: 10000 !important; }
.drawer-overlay{ z-index: 9999 !important; }

/* ドロワー展開中はヘッダーやラベルが前に出ないように */
.drawer-open .headerFixed{ z-index: 100 !important; }
.drawer-open #baseMenu,
.drawer-open .headerFixed{ pointer-events: none; } /* 誤タップ防止 */
.drawer-open .label_image{ z-index: 100 !important; } /* 商品ラベルの被り回避 */

/* ヘッダー下の余白（お知らせバナーとの段差解消） 
.header{ margin-top: var(--header-h) !important; }*/

/* お知らせバナーは常に画面幅いっぱい */
.informationBanner{
  width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
}
.informationBanner .informationBannerContainer{
  max-width:1280px; width:100%; margin:0 auto;
}

--------------------------------------------
/* ==== Hamburger vertical fix ==== */
:root{
  --header-h: 55px;       /* 必要ならここで高さを統一調整 */
  --icon-btn: 40px;
  --burger-offset-y: -1px;/* 視覚補正（-1〜+1で微調整） */
}

/* ボタンの実体サイズ＝クリック領域に揃える（paddingを殺す） */
.drawer-hamburger{
  position: fixed !important;
  left: 12px !important;
  top: calc(var(--header-h) / 2 - var(--icon-btn) / 2 + var(--burger-offset-y)) !important;
  width: var(--icon-btn) !important;
  height: var(--icon-btn) !important;
  padding: 0 !important;                   /* ← ココが重要 */
  box-sizing: border-box !important;       /* content-box を抑制 */
  display: grid !important; place-items: center !important;
  transform: none !important;
  z-index: 210;
}
.drawer-hamburger-icon{ margin-top: -15px !important; }
---------------------------
/* ==== Drawer Close (X) button ==== */
.drawer-close-btn{
  position: fixed;
  top: calc(var(--header-h) / 2 - var(--icon-btn) / 2);
  right: 12px;
  width: var(--icon-btn); height: var(--icon-btn);
  border-radius: 50%;
  background: rgba(0,0,0,.6);
  color: #fff; border: 0;
  font-size: 24px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 10001;           /* nav(10000)とoverlay(9999)より上 */
  opacity: 0; transform: scale(.9);
  transition: opacity .15s ease, transform .15s ease;
}
.drawer-close-btn.is-visible{ opacity: 1; transform: none; }


.drawer-close-btn.is-visible{ opacity: 1; }
@media (min-width:768px){
  .drawer-close-btn{ width: 36px; height: 36px; font-size: 18px; }
}
-----------------
/* ================================
   Hamburger – 強制可視 & 前面配置
   ================================ */
.drawer-hamburger{
  position: fixed !important;
  left: 8px !important;
  top: -10px !important;                    /* フォールバック位置 */
  z-index: 120 !important;                /* 何より前に */
  width: 40px !important;
  height: 40px !important;
  padding: 8px !important;
  display: block !important;
  opacity: 1 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* 変数が生きている時はヘッダー内で縦中央に合わせる */
@supports (top: calc(1px)) {
  .drawer-hamburger{
    top: calc((var(--header-h, 60px) - var(--icon-btn, 40px)) / 2) !important;
  }
}

/* 線（3本）の色・太さを強制（背景が白でも見えるように） */
.drawer-hamburger-icon,
.drawer-hamburger-icon::before,
.drawer-hamburger-icon::after{
  background-color: #222 !important;
  height: 2px !important;
}

/* 見た目だけ少し小さく（タップ面積は維持） */
.drawer-hamburger-icon{
  transform: scale(var(--burger-scale, .8)) !important;
  transform-origin: center !important;
  margin-top: -20px !important;
}

/* ドロワーを開いてもヘッダーやバナーが上に被らないように */
.headerFixed{ z-index: 100 !important; }
#baseMenu{ z-index: 110 !important; }
.drawer-nav{ z-index: 112 !important; }
.drawer-overlay{ z-index: 111 !important; } /* 画面の暗幕 */
.drawer-close-btn{ z-index: 130 !important; } /* 右上の×（追加済みなら） */

/* 万一どこかで display:none; が当たっていた場合に備える */
.drawer-hamburger[style*="display: none"]{ display: block !important; }

/* 触りやすいサイズをPCでは少しだけ縮める */
@media (min-width:768px){
  .drawer-hamburger{ width: 36px !important; height: 36px !important; }
}


/* --- ハンバーガーとドロワーの重なり順を安定化 --- */
.headerFixed{ z-index: 100 !important; }
.drawer-overlay{ z-index: 110 !important; } /* 黒い暗幕 */
.drawer-nav{ z-index: 120 !important; }     /* メニュー本体 */
.drawer-close-btn{ z-index: 130 !important; }/* 右外側の× */

/* ハンバーガーが埋もれた時の保険（線の色も強制） */
.drawer-hamburger{
  position: fixed !important;
  left: 8px !important;
  top: calc((var(--header-h, 55px) - 40px) / 2) !important;
  width: 40px !important; height: 40px !important; padding: 8px !important;
  z-index: 120 !important;
}
.drawer-hamburger-icon,
.drawer-hamburger-icon::before,
.drawer-hamburger-icon::after{
  background: #222 !important; height: 2px !important;
}

-----------------
/* --- ハンバーガーとドロワーの重なり順を安定化 --- */
.headerFixed{ z-index: 100 !important; }
.drawer-overlay{ z-index: 110 !important; } /* 黒い暗幕 */
.drawer-nav{ z-index: 120 !important; }     /* メニュー本体 */
.drawer-close-btn{ z-index: 130 !important; }/* 右外側の× */

/* ハンバーガーが埋もれた時の保険（線の色も強制） */
.drawer-hamburger{
  position: fixed !important;
  left: 8px !important;
  top: calc((var(--header-h, 55px) - 40px) / 2) !important;
  width: 40px !important; height: 40px !important; padding: 8px !important;
  z-index: 120 !important;
}
.drawer-hamburger-icon,
.drawer-hamburger-icon::before,
.drawer-hamburger-icon::after{
  background: #222 !important; height: 2px !important;
}


/* ==== Drawerを昔の位置感に戻しつつ、×ボタンを内側右上に ==== */
:root{ --header-h:55px; --icon-btn:40px; }
@media (min-width:768px){ :root{ --header-h:50px; --icon-btn:36px; } }

/* ハンバーガー：画面左上／ヘッダー高いっぱいをクリック可に */
.drawer-hamburger{
  position: fixed !important;
  left: 8px !important;
  top: 0 !important;
  width: var(--icon-btn) !important;
  height: var(--header-h) !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 2500 !important;
}
/* 線が見えない場合の保険（色） */
.drawer-hamburger-icon,
.drawer-hamburger-icon:before,
.drawer-hamburger-icon:after{
  background-color:#333 !important;
}

/* ドロワーをヘッダーより前面に */
.drawer-overlay{ z-index:3000 !important; }
.drawer-nav{ z-index:3001 !important; }

/* 右上 × ボタン（背景なし・内側右端） */
.drawer-close-btn{
  position:absolute;
  top:10px;
  right:10px;
  width:32px; height:32px;
  border:0; background:transparent;
  font-size:28px; line-height:1;
  color:#333; cursor:pointer;
}
-------------
/* === Drawer close button (inside right-top) === */
.drawer-nav { position: fixed; } /* 念のため */

.drawer-close-btn{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  display: none;                 /* 開いている時だけJSで表示 */
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 6px;
  background: transparent !important; /* 背景なし固定 */
  color: #222 !important;             /* 初期値（JSでハンバーガーの色に合わせ直す） */
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  z-index: 10001;
  transition: transform .06s ease;
}

.drawer-close-btn:hover{
  background: transparent !important; /* hoverでも背景ナシ */
  color: #222 !important;
}

.drawer-close-btn:active{ transform: scale(0.96); }
.drawer-close-btn:focus{ outline: 2px solid currentColor; outline-offset: 2px; }
---------------
/* === 背景パターン対応：背景画像があるときはヘッダー/フッターを透明化 === */
body.has-bg-img .headerFixed,
body.has-bg-img footer,
body.has-bg-img #footer{
  background: transparent !important;
}

/* 背景柄の上でも見やすく（必要なら） */
body.has-bg-img .drawer-hamburger,
body.has-bg-img .drawer-close-btn{
  /* 視認性を落とさないための保険。不要なら削除してOK */
  filter: none;
}
---------------
/* 画像でもカラーでも背景を見せたい場合（デフォルト） */
.bg-has-img .headerFixed,
.bg-has-color .headerFixed,
.bg-has-img footer,
.bg-has-color footer,
.bg-has-img #footer,
.bg-has-color #footer{ background: transparent !important; }

/* 画像のときだけヘッダー薄白で読みやすく（任意） */
/* .bg-has-img .headerFixed{ background: rgba(255,255,255,.75) !important; } */

/* ================================
   Shopping Guide バナー整形
   2カラムは同じ比率で揃える
   （下にある 3 つの調整点だけ覚えればOK）
   ================================ */

/* 1) ベース：a を “比率ボックス” にして高さを作る */
.itembanner a{
  display:block;
  width:100%;
  aspect-ratio: var(--banner-ratio, 16 / 9); /* デフォ: 16:9 */
}

/* 2) 画像はボックス一杯にフィット（切り抜きで揃える） */
.itembanner img{
  width:100%;
  height:100%;
  display:block;
  object-fit: cover;    /* 画像の端をトリミングして面で揃える */
}

/* 3) レイアウトごとの既定比率
   - 2カラム（col_6）は 16:9
   - 1カラム（col_12）は 横長 21:9 に */
.itembanner.col_6 a { --banner-ratio: 16 / 9; }
.itembanner.col_12 a { --banner-ratio: 21 / 9; }

/* モバイルはやや縦を深く（視認性重視） */
@media (max-width: 600px){
  .itembanner a { --banner-ratio: 4 / 3; }
}

/* “画像は全部見せたい（切り抜きたくない）”場合に使う補助クラス */
.itembanner.is-contain img{
  object-fit: contain;
  background: #fff; /* 余白が出るので白で埋める（任意） */
}

---------
/* ==== Shopping Guide banners — no-crop, full-width ==== */
/* 比率ボックスを無効化（高さは画像に任せる） */
.itembanner a{
  aspect-ratio: auto !important;
}

/* 画像は横幅100%・高さは自動＝切り抜きなし */
.itembanner img{
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important; /* 念のため。高さ指定がどこかにあってもトリミングしない */
}
/* そのバナーだけ比率固定を解除＆ノークロップ */
.itembanner.is-contain a{ aspect-ratio: auto !important; }
.itembanner.is-contain img{
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}

/* ==== Shopping Guide banners — no-crop & no extra gap ==== */

/* 親は画像に合わせて伸縮（高さ・比率を固定しない） */
.itembanner a{
  height: auto !important;
  aspect-ratio: auto !important;
  display: block;
}

/* 画像は横100%・高さは自動（＝ノートリミング） */
.itembanner img{
  display: block;              /* ベースライン隙間を消す */
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important; /* 念のため。高さ指定があっても切らない */
}

/* さらに“行の隙間”を完全に殺す */
.itembanner{ line-height: 0; }

/* 不要な上下padding/marginがあれば最小化（必要に応じて） */
/* .itembanner{ padding: 0 !important; margin: 0 !important; } */
------------
/* === Pick up CTA button (a.purchaseButton__btn) === */
a.purchaseButton__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5em;
  padding:12px 18px;
  min-width: 200px;
  border: 2px solid var(--btn-bg);
  background: var(--btn-bg);
  color: var(--btn-text) !important;
  text-decoration:none !important;
  border-radius: 6px;
  line-height:1.2;
  font-weight:600;
  transition: background-color .2s ease, opacity .2s ease, filter .2s ease;
}

/* hover/focus/disabled */
a.purchaseButton__btn:hover{
  background: var(--btn-bg-hover);
  color: var(--btn-text) !important;
  opacity: .95;
}
a.purchaseButton__btn:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
a.purchaseButton__btn[aria-disabled="true"]{
  opacity:.55; pointer-events:none;
}

/* レイアウト微調整：スマホは横いっぱい、PCは内容幅 */
@media (max-width: 599px){
  a.purchaseButton__btn{ width:100%; }
}
-----------------
/* span版の応急処置（見た目だけ合わせる） */
a .purchaseButton__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 18px;
  border: 2px solid var(--btn-bg);
  background: var(--btn-bg);
  color: var(--btn-text) !important;
  border-radius:6px;
  text-decoration:none !important;
}
a:hover .purchaseButton__btn{
  background: var(--btn-bg-hover);
  color: var(--btn-text) !important;
}


-----------------
/* === Pick up CTA（最後に置く）=== */
/* aにクラスを付けた場合／a内のspanにクラスが残っている場合の両対応 */
a.purchaseButton__btn,
a .purchaseButton__btn{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 200px;
  padding: 12px 18px !important;

  border: 2px solid var(--btn-bg) !important;
  background: var(--btn-bg) !important;
  color: var(--btn-text) !important;

  text-decoration: none !important;
  border-radius: 6px !important;
  line-height: 1.2;
  font-weight: 600;
  transition: background-color .2s ease, opacity .2s ease;
}
a.purchaseButton__btn:hover,
a .purchaseButton__btn:hover{
  background: var(--btn-bg-hover) !important;
  color: var(--btn-text) !important;
  opacity: .95;
}
a.purchaseButton__btn:focus-visible{
  outline: 2px solid var(--btn-bg) !important;
  outline-offset: 2px;
}

/* レイアウト用（任意）：親の幅8割指定をCSSに移動しておく */
.pickup-cta{
  margin-top: 10px;
  width: 80%;
  color: #fff;
}
----------------
/* === Pick up CTA anti-jitter fix === */
/* 1) ボックスの幾何を固定（border幅・line-height・display） */
a.purchaseButton__btn,
a .purchaseButton__btn{
  box-sizing: border-box !important;
  display: inline-block !important;      /* baselineゆらぎ回避 */
  vertical-align: middle !important;
  min-width: 200px;
  padding: 12px 18px !important;
  line-height: 1.2 !important;

  border: 2px solid var(--btn-bg) !important; /* ← 常に同じ太さ */
  background: var(--btn-bg) !important;
  color: var(--btn-text) !important;

  text-decoration: none !important;
  border-radius: 6px !important;

  /* 2) 色だけトランジション（サイズに影響しないものだけ） */
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
  /* Safariのサブピクセル対策：必要なら有効化 */
  transform: translateZ(0);
}

/* 3) hoverでは色だけ変える（borderの太さは変えない） */
a.purchaseButton__btn:hover,
a .purchaseButton__btn:hover{
  background: var(--btn-bg-hover) !important;
  border-color: var(--btn-bg-hover) !important;
  color: var(--btn-text) !important;
  /* opacity はレイアウトぶれの温床になり得るので使わない */
}

/* 4) フォーカスリングはアウトラインで（レイアウトに影響しない） */
a.purchaseButton__btn:focus-visible,
a .purchaseButton__btn:focus-visible{
  outline: 2px solid var(--btn-bg) !important;
  outline-offset: 2px;
}
---------------
/* === Global button anti-jitter (PASTE LAST) === */

/* 1) ネイティブ button / input は border を常に 0px に固定 */
button,
input[type=submit],
input[type=reset],
input[type=button]{
  box-sizing: border-box !important;
  border-width: 0 !important;            /* ← ここが肝 */
  border-style: solid !important;        /* 体裁だけ付けておく */
  /* 既存の色/背景/サイズ指定はそのまま活かす */
}

/* 2) 旧 hover での 1px 追加を打ち消す（幾何を変えない） */
button:hover,
input[type=submit]:hover,
input[type=reset]:hover,
input[type=button]:hover{
  border-width: 0 !important;
  border-color: transparent !important;
  /* 色や背景は既存ルールがあればそちらが効きます */
}

/* 3) アンカー型CTAは“常に同じ太さ”に（既存パッチの最終保証） */
a.purchaseButton__btn,
a .purchaseButton__btn{
  box-sizing: border-box !important;
  border: 2px solid var(--btn-bg) !important;  /* 通常 */
}
a.purchaseButton__btn:hover,
a .purchaseButton__btn:hover{
  border-color: var(--btn-bg-hover) !important; /* hoverでも太さは同じ */
}

/* 4) フォーカスはアウトラインで（レイアウト非影響） */
button:focus-visible,
input[type=submit]:focus-visible,
input[type=reset]:focus-visible,
input[type=button]:focus-visible,
a.purchaseButton__btn:focus-visible{
  outline: 2px solid currentColor !important;
  outline-offset: 2px;
}
-------------
/* === Pick up CTA — span 版を中央揃え＆ジッター防止（PASTE LAST）=== */

/* a は包むだけにして、実体は span で作る */
.pickup-cta a{ display:inline-block; line-height:1; }

/* ボタン本体（span）をフレックス中央寄せに */
.pickup-cta a .purchaseButton__btn{
  /* 中央寄せの肝 */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  /* ボックス幾何を固定（hover で動かない） */
  box-sizing: border-box !important;
  min-height: 44px;                 /* タップ高さ目安 */
  padding: 12px 18px !important;
  line-height: 1 !important;
  vertical-align: middle !important;

  /* 見た目（色は変数に追従） */
  background: var(--btn-bg) !important;
  color: var(--btn-text) !important;
  border: 2px solid var(--btn-bg) !important;  /* ← 太さ固定 */
  border-radius: 6px !important;
  text-decoration: none !important;
  font-weight: 600;

  /* 色だけアニメーション（サイズに影響しない） */
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

/* hover でも“太さ”を変えない（色だけ変える） */
.pickup-cta a .purchaseButton__btn:hover{
  background: var(--btn-bg-hover) !important;
  border-color: var(--btn-bg-hover) !important;
  color: var(--btn-text) !important;
}

/* 親行ボックスのベースライン隙間を消す（上下ズレ防止） */
.pickup-cta{ line-height: 0; }
.pickup-cta a{ line-height: 1; }

/* 旧ルールの「hover で border:1px にする」等が残っていても上書き勝ちするように */
.purchaseButton__btn,
button{ border-width: 0 !important; }  /* ← ネイティブbuttonへの副作用止め */

/* 商品名タイトルはロゴ体ではなく本文フォントに */
.item__title2{ font-family: var(--font-main) !important; }
--------------
/* PCのカードの見た目を揃える：タイトル2行・はみ出し省略 */
@media (min-width: 780px){
  #itemIndex .item__title{
    font-weight: 700;
    line-height: 1.4;
    /* もともとの height:1.8em; を上書き */
    height: calc(1.4em * 2) !important;      /* 2行ぶんの高さを確保 */
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;                    /* 2行で省略 */
    -webkit-box-orient: vertical;
    /* 余白も少し整える */
    margin-top: 6px;
  }

  /* 価格帯やラベルの位置が揃いやすいよう最低限の箱組み */
  #itemIndex .item{
    display: flex;
    flex-direction: column;
  }
  #itemIndex .item__box{ flex: 0 0 auto; }   /* 画像部分は固定 */
}
---------------
/* ===== Footer menu: full-width, no gaps ===== */
#footer{ display:block !important; padding-top:0; }

/* コンテナ */
#footer .footerMenu{ width:100%; margin:0 !important; }

/* 横並びをグリッドで均等割り（アイテム数が増減してもOK） */
#footer .footerMenu ul{
  display:grid !important;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap:0 !important;
  margin:0 !important;
  padding:0 !important;
  width:100%;
}

/* 余白と古い表示指定をリセット */
#footer .footerMenu li{
  list-style:none;
  display:block !important;      /* 旧 inline-block を打消し */
  margin:0 !important;
  padding:0 !important;
}

/* リンクをブロック化して“面”でクリック可能に */
#footer .footerMenu a{
  display:block;
  text-align:center;
  padding:14px 10px;             /* 高さはお好みで */
  white-space:nowrap;
  color: var(--color-footer);    /* 既存カラー変数に追従 */
  text-decoration:none;
  /* 仕切り線が不要なら下2行を削除 */
  border-left:1px solid rgba(0,0,0,.08);
}
#footer .footerMenu li:first-child a{ border-left:none; }

/* モバイルは1列に（2列が良ければ 1fr 1fr に変更） */
@media (max-width:600px){
  #footer .footerMenu ul{ grid-template-columns: 1fr; }
  #footer .footerMenu a{
    border-left:none;
    border-top:1px solid rgba(0,0,0,.08);
  }
  #footer .footerMenu li:first-child a{ border-top:none; }
}