/* =====================================================
   Mobile Bottom Nav + Sheets (JS-animation friendly)
   ===================================================== */

/* JS で実測して --mnav-h を上書き（初期値は 64px） */
:root { --mnav-h: 64px; }

/* ---------------------------------
  基本：常時固定のボトムナビ
---------------------------------- */
.mobile-bottom-nav{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: var(--mnav-h);
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: #2b2b2b;
  color: #fff;
  border-top: none;
  z-index: 1200; /* （後段で上書き） */
}
.mbnav-item{
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 12px;
  color: #fff;
  padding-block: 6px;
  background: none;
  border: 0;
}
.mbnav-item i{ font-size: 18px; color: #fff; }

/* コンテンツがナビで隠れないよう余白を確保 */
.has-mnav-padding{ padding-bottom: var(--mnav-h); }

/* ---------------------------------
  下から出るシート（メニュー／検索）
  ※アニメは JS 側で制御
---------------------------------- */
.mnav-sheet{
  position: fixed;
  left: 0; right: 0;
  bottom: var(--mnav-h);
  max-height: calc(100vh - var(--mnav-h));
  display: flex;
  flex-direction: column;
  background: #fff;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  box-shadow: 0 -12px 30px rgba(0,0,0,.12);
  z-index: 1100; /* （後段で上書き） */
  overflow: auto;
  transition: none !important;
}
.mnav-sheet-body{ padding: 16px 16px 20px; }

/* 暗幕（ナビの領域は覆わない） */
.mnav-overlay{
  position: fixed;
  top: 0; left: 0; right: 0;
  bottom: var(--mnav-h);
  background: rgba(0,0,0,.35);
  z-index: 1050; /* （後段で上書き） */
  transition: none !important;
}
.mnav-overlay[hidden]{ display: none !important; }

/* ---------------------------------
  タブ（商品カテゴリー / ガイドナビ）
---------------------------------- */
.mnav-tabs{
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; gap: 20px;
  padding: 12px 16px;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
}
.mnav-tabs .mnav-tab + .mnav-tab{
  margin-left: 16px; padding-left: 16px;
  border-left: 1px solid #e5e7eb;
}
.mnav-tab{
  appearance: none;
  border: 0;
  background: none !important;
  border-radius: 0 !important;
  padding: 8px 4px;
  font-size: 14px; font-weight: 600;
  color: #666;
  line-height: 1;
  position: relative;
  cursor: pointer;
}
.mnav-tab::after{
  content: "";
  position: absolute; left: 0; bottom: -13px;
  width: 100%; height: 2px;
  background: var(--c-brand-blue, #1f4063);
  transform: scaleX(0);
  transform-origin: left center;
}
.mnav-tab.is-active{ color: #111; font-weight: 700; }
.mnav-tab.is-active::after{ transform: scaleX(1); }

/* パネル切替 */
.mnav-panel[hidden]{ display: none; }
.mnav-panel.is-active{ display: block; }

/* ---------------------------------
  メニュー（アコーディオン）
---------------------------------- */
.mnav-block{ border-bottom: 1px solid #eef0f2; }
.mnav-parent{
  display: grid;
  grid-template-columns: 44px 1fr 16px;
  gap: 10px;
  align-items: center;
  padding: 12px 4px;
  color: inherit; text-decoration: none;
}
.mnav-thumb{
  width: 44px; height: 44px;
  border-radius: 8px; overflow: hidden; background:#f6f7f8;
}
.mnav-thumb img{ width:100%; height:100%; object-fit:cover; }
.mnav-parent-label{ font-size: 15px; }
.mnav-parent-chevron{ transition: transform .2s ease; }
.mnav-block.is-open .mnav-parent-chevron{ transform: rotate(180deg); }

.mnav-children{
  margin: 0;
  padding: 4px 0 6px 48px;
  list-style: none;
  background: #fafafa;
  overflow: hidden;
}
.mnav-child-thumb{ display: none !important; }
.mnav-children li::before{ content: none !important; }
.mnav-child{
  display: block;
  padding: 6px 10px;
  font-size: 14px; line-height: 1.4;
  color: #333; text-decoration: none;
}
.mnav-child:hover{ background: #f0f0f0; }

/* ---------------------------------
  ガイドナビ（シンプルリスト）
---------------------------------- */
.mnav-guide{ background:#fff; padding:0; }
.mnav-guide-list{ margin:0; padding:0; list-style:none; }
.mnav-guide-list li{ margin:0; border-bottom:1px solid #e5e7eb; }
.mnav-guide-list li a{
  display:block; padding:16px 16px;
  color:#111; background:#fff;
  text-decoration:none; border:0; border-radius:0; box-shadow:none;
}
.mnav-guide-list li a:hover{ background:#fafafa; }
.mnav-guide-list li a:focus-visible{
  outline:2px solid var(--c-brand-blue, #1f4063);
  outline-offset:-2px;
}
.mnav-guide-list li a,
.mnav-guide-list li a:visited{ text-decoration:none !important; }

/* ---------------------------------
  ハンバーガー（Font Awesome切替）
---------------------------------- */
.mobile-bottom-nav .js-open-mobile-menu i.fa-bars{
  transition: transform .2s ease, opacity .2s ease;
}
.mobile-bottom-nav .js-open-mobile-menu.is-active i.fa-bars{ display:none; }
.mobile-bottom-nav .js-open-mobile-menu.is-active i.fa-xmark{ display:inline-block; }

/* ピュアCSS版ハンバーガー（任意） */
.hamburger{ display:inline-block; width:20px; height:16px; position:relative; }
.hamburger span{
  position:absolute; left:0; width:100%; height:2px;
  background:#fff; border-radius:2px;
  transition: transform .3s ease, top .3s ease, opacity .3s ease;
}
.hamburger span:nth-child(1){ top:0; }
.hamburger span:nth-child(2){ top:7px; }
.hamburger span:nth-child(3){ top:14px; }
.js-open-mobile-menu.is-active .hamburger span:nth-child(1){ top:7px; transform:rotate(45deg); }
.js-open-mobile-menu.is-active .hamburger span:nth-child(2){ opacity:0; }
.js-open-mobile-menu.is-active .hamburger span:nth-child(3){ top:7px; transform:rotate(-45deg); }

/* ---------------------------------
  モバイル検索シート（#mnav-search）
---------------------------------- */
#mnav-search .mega-search{ padding: 14px 16px 18px; }
#mnav-search .mega-search .mega-inner{ width: 100%; margin: 0; padding: 0; }

#mnav-search .search-form{
  display: grid;
  grid-template-columns: 1fr 48px;
  gap: 10px; align-items: center;
  margin-bottom: 14px;
}
#mnav-search .search-form input{
  height: 44px; padding: 10px 14px; font-size: 15px;
  border: 1px solid var(--c-border, #dcdfe3); border-radius: 12px;
}
#mnav-search .search-form button{
  display: inline-grid; place-items: center;
  width: 48px; height: 48px; border: 0; border-radius: 12px;
  background: var(--c-brand-blue, #1f4063); color: #fff;
}

#mnav-search .search-tags{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  align-items: center !important;
  justify-content: flex-start !important;
  margin: 8px 0 16px !important;
}
#mnav-search .search-tags a{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important; min-width: 0 !important;
  height: auto !important; max-width: none !important;
  flex: 0 0 auto !important;
  padding: 8px 14px !important;
  line-height: 1 !important; font-size: 13px !important;
  white-space: nowrap !important; writing-mode: horizontal-tb !important;
  text-decoration: none !important;
  background: #eef1e6 !important; color: #333 !important;
  border: none !important; border-radius: 9999px !important; box-shadow: none !important;
}
#mnav-search .search-tags a:hover{ background: #e6edd9 !important; }

#mnav-search .search-category-title{
  margin: 0 0 10px;
  font-size: 13px; font-weight: 700; letter-spacing: .06em;
  color:#222; text-align:center;
}
#mnav-search .search-category-title span{ font-weight: 400; color:#666; margin-left:.5em; }

#mnav-search .search-category-list{
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
@media (max-width: 1000px){
  #mnav-search .search-category-list{ grid-template-columns: 1fr; }
}
#mnav-search .search-category-item{
  display: grid; grid-template-columns: 72px 1fr;
  align-items: center; gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--c-border, #e5e7eb);
  border-radius: 14px; background: #fff;
  text-decoration: none; color: inherit;
}
#mnav-search .search-cat-thumb{
  width: 72px; aspect-ratio: 4/3;
  border-radius: 10px; overflow:hidden; background:#f6f7f8;
}
#mnav-search .search-cat-thumb img{ width:100%; height:100%; object-fit:cover; }
#mnav-search .search-category-item span{
  font-size: 14px; font-weight: 500; line-height: 1.2; text-align:left;
}

/* ---------------------------------
  アクセシビリティ（低モーション）
---------------------------------- */
@media (prefers-reduced-motion: reduce){
  .mnav-tab::after{ transition: none; }
  .mnav-sheet, .mnav-overlay{ transition: none !important; }
}