/**
 * Mobile Menu Styles (FULL)
 * SH Hamburger Replacer
 * - SPは従来通り
 * - PCのみ：上位セクションを非表示 & 左上に #555 の 390x80 長方形（menu-pc-header）を表示
 * - PCのみ：.main-nav をカテゴリと同じ見た目・サイズで 2列グリッド化
 * - カテゴリ系クラスは衝突回避のため .shm- に統一
 */

/* ========================================
   ハンバーガーボタン（ヘッダー内）
======================================== */
.sh-hamburger-wrapper {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
.sh-hamburger-button {
  width: 48px; height: 48px; background: transparent; border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0; transition: opacity .3s ease;
}
.sh-hamburger-button:hover { opacity: .7; }
.sh-hamburger-button:active { transform: scale(.95); }
.sh-hamburger-icon { display:flex; align-items:center; justify-content:center; width:24px; height:24px; }
.sh-hamburger-icon img { width:24px; height:24px; display:block; }

/* ========================================
   オーバーレイ & コンテナ
======================================== */
.custom-mobile-menu-overlay {
  position: fixed; inset: 0; width: 100%; height: 100vh;
  background: rgba(0,0,0,0); z-index: 999999; display: none !important;
  pointer-events: none; transition: background .3s ease;
}
.custom-mobile-menu-overlay.active {
  display: block !important; visibility: visible !important; pointer-events: auto;
}
/* PC: 背景半透明 / SP: 白 */
@media (min-width: 922px){ .custom-mobile-menu-overlay.active{ background: rgba(0,0,0,.5);} }
@media (max-width: 921px){ .custom-mobile-menu-overlay.active{ background: #FFFFFF;} }

.custom-mobile-menu-container {
  position: fixed; left: 0; top: 0;
  display: flex; flex-direction: column; align-items: center;
  padding: 80px 0 0; gap: 0; width: 100%; max-width: 390px;
  height: 100vh; background: #FFFFFF; overflow-y: auto;
  box-shadow: 2px 0 10px rgba(0,0,0,.1);
  transform: translateX(-100%); transition: transform .3s ease; z-index: 1000;
}
.custom-mobile-menu-overlay.active .custom-mobile-menu-container { transform: translateX(0); }
.custom-mobile-menu-container > * { position: relative; z-index: 1; } /* ヘッダー矩形の上に出す */

/* ========================================
   PC専用：上部セクション非表示 & ヘッダーバー表示
======================================== */
.menu-pc-header { display: none; }
@media (min-width: 922px){
  .custom-mobile-menu-container { max-width: 390px; }
  .custom-mobile-menu-container .menu-top-section { display: none !important; }
  .menu-pc-header{
    display:block; position:absolute; left:0; top:0; width:390px; height:80px;
    background:#555555; z-index:0;
  }
}

/* ========================================
   閉じるボタン
======================================== */
.mobile-menu-close{
  position:absolute; left:20px; top:19px; width:42px; height:42px;
  background:#2F2B29; border-radius:50%; border:none; display:flex;
  align-items:center; justify-content:center; cursor:pointer; z-index:10;
  padding:0; transition: background-color .3s ease;
}
.mobile-menu-close:hover{ background:#1a1715; }

/* ========================================
   上部セクション（SP表示）
======================================== */
.menu-top-section{
  display:flex; flex-direction:column; align-items:center; gap:32px;
  width:100%; padding:0 19px 32px; background:#FFFFFF;
}

/* アイコンナビ */
.mobile-icon-nav{
  display:flex; flex-direction:row; align-items:center; gap:21px;
  width:100%; justify-content:center; max-width:350px;
}
.icon-nav-item{ display:flex; flex-direction:column; align-items:center; gap:3px; min-width:70px; text-decoration:none; transition:opacity .3s ease; }
.icon-nav-item:hover{ opacity:.7; }
.icon-nav-item img{ width:34px; height:34px; display:block; }
.icon-nav-item span{
  font-family:'M PLUS 1p',sans-serif; font-weight:500; font-size:11px; line-height:1; letter-spacing:.04em; color:#2F2B29; white-space:nowrap;
}

/* 検索フォーム */
.mobile-search-form{ position:relative; width:100%; max-width:350px; height:48px; }
.mobile-search-form input{
  width:100%; height:100%; padding:0 20px 0 50px;
  border:1px solid #D5D5D5; border-radius:4px;
  font-family:'M PLUS 1',sans-serif; font-size:14px; letter-spacing:.08em; color:#858585;
  box-sizing:border-box; transition:border-color .3s ease;
}
.mobile-search-form input:focus{ outline:none; border-color:#978055; }
.mobile-search-form input::placeholder{ color:#858585; }
.mobile-search-form .search-icon{
  position:absolute; left:14px; top:50%; transform:translateY(-50%); pointer-events:none;
}

/* ========================================
   下部セクション（タブ + コンテンツ）
======================================== */
.menu-bottom-section{
  display:flex; flex-direction:column; align-items:center; gap:32px;
  width:100%; padding:32px 19px 36px; background:#F6F5F3; flex:1;
}

/* タブナビ */
.mobile-tab-nav{
  display:flex; flex-direction:row; align-items:center; padding:6px; gap:5px;
  width:100%; max-width:350px; background:#FFFFFF; border-radius:28px; box-shadow:0 2px 8px rgba(0,0,0,.1);
}
.tab-btn{
  flex:1; padding:16px; border:none; background:#FFFFFF; border-radius:24px;
  font-family:'M PLUS 1p',sans-serif; font-size:14px; letter-spacing:.04em; color:#2F2B29;
  cursor:pointer; transition: all .3s ease; white-space:nowrap;
}
.tab-btn.active{ background:#978055; color:#FFFFFF; }
.tab-btn:not(.active):hover{ background:#f5f5f5; }

/* タブコンテンツ */
.mobile-tab-content{ display:none; width:100%; max-width:350px; background:transparent; }
.mobile-tab-content.active{ display:block; }
.empty-message{
  padding:20px; text-align:center; color:#858585; font-family:'M PLUS 1p',sans-serif; font-size:14px; width:100%; margin:0; background:transparent;
}

/* ========================================
   カテゴリ/ブランド（ハンバーガー専用）.shm-
   - カードの色・サイズはメインナビと完全一致
======================================== */
.custom-mobile-menu-container .shm-category-grid{
  display:grid !important; grid-template-columns: repeat(2,1fr) !important;
  grid-auto-rows:auto; gap:10px 10px; width:100%; max-width:100%; background:transparent;
}
.custom-mobile-menu-container .shm-category-item,
.custom-mobile-menu-container .main-nav .main-nav-link{
  display: flex; flex-direction: row; align-items: center; justify-content: space-between;
  height: 56px; width: 100%; padding: 4px 8px 4px 10px;
  background: #FFFFFF; border-radius: 4px; text-decoration: none;
  transition: opacity .3s ease;
  overflow: hidden; box-sizing: border-box;
}
.custom-mobile-menu-container .shm-category-item:hover,
.custom-mobile-menu-container .main-nav .main-nav-link:hover{
  opacity: 0.8;
}

/* 画像・テキスト（カテゴリ） */
.custom-mobile-menu-container .shm-category-image{
  width:48px; height:48px; min-width:48px;
  display:flex; align-items:center; justify-content:center; overflow:hidden; background:#FFFFFF;
}
.custom-mobile-menu-container .shm-category-image img{ width:100%; height:100%; object-fit:contain; }
.custom-mobile-menu-container .shm-category-name{
  flex:1; padding-left:8px; font-family:'M PLUS 1p',sans-serif; font-size:14px; line-height:1.2; letter-spacing:.04em; color:#000000;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ========================================
   メインナビ
   - SP/PC共通：2列グリッド化
   - 白背景をハンバーガーメニュー全幅に適用
======================================== */
.main-nav-section { 
  width: calc(100% + 38px);
  margin-left: -19px;
  margin-right: -19px;
  background: #FFFFFF; 
  padding: 20px 19px;
}
.main-nav-wrapper {
  width: 100%;
  max-width: 350px;
  margin: 0 auto;
}
.main-nav{ 
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  width: 100%;
}
.main-nav .nav-text{
  flex: 1; padding-right: 8px; font-family: 'M PLUS 1p', sans-serif; font-size: 14px; line-height: 1.2; letter-spacing: .04em; color: #000000;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.main-nav .nav-icon{ width: 24px; height: 24px; min-width: 24px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* PC：グリッドは既に適用済み（上記で共通化） */
@media (min-width: 922px){
  .custom-mobile-menu-container .main-nav{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    background: transparent;
  }
}

/* ========================================
   ロゴセクション
======================================== */
.menu-logo-section {
  width: 100%;
  max-width: 350px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 16px;
}
.menu-logo-image {
  width: 180px;
  height: 68px;
  opacity: 1;
  display: block;
  object-fit: contain;
  box-sizing: border-box;
}

/* ========================================
   微調整（必要に応じて）
======================================== */
/* オーバーライド最小化のため、!important は必要箇所のみ使用 */