/* ===============================
   Header（PCの土台）
   =============================== */
#header-in{
  max-width:1120px;
  margin:0 auto;
  padding:6px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;   /* 左=ロゴ / 右=検索 */
  gap:16px;
  flex-wrap:nowrap;
}

/* ロゴ（幅100%を取らせない） */
#header-in .logo-header{
  width:auto;
  max-width:none;
  margin-right:auto;               /* 検索を右へ押し出す */
  text-align:left;
  flex:0 0 auto;
}

/* サイト名：高さブレ防止 */
#header-in .site-name{
  margin:0;
  line-height:1;
  display:flex;
  align-items:center;
  text-align:left;
  flex:0 0 auto;
}
#header-in .site-name a{
  display:inline-block;
  padding:0;
  line-height:1.1;
}

/* ===============================
   Desktop（1025px〜）既存レイアウト維持
   =============================== */
@media (min-width:1025px){
  #header-in{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    padding:6px 24px;
    gap:16px;
  }
  #header-in .logo-header{ margin-right:auto; }
}

/* ===============================
   Mobile（〜1024px）上：ロゴ／下：検索
   =============================== */
@media (max-width:1024px){
  #header-in{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:10px !important;
    padding:8px 10px !important;
  }
  #header-in .logo-header,
  #header-in .site-name{
    order:1 !important;
    width:100% !important;
    margin:0 !important;
    text-align:left !important;
  }
}

/* ===============================
   Navigation（カテゴリ帯）PC中央寄せ
   =============================== */
#navi .navi-in{
  max-width:1120px;
  margin:0 auto;
  padding:0 6px;
}
#navi .menu{
  display:flex;
  justify-content:center;    /* PCは中央寄せ */
  gap:24px;
  margin:0;
  padding:0;
  list-style:none;
}
#navi .menu > li{ margin:0; }
#navi .menu > li > a{
  display:block;
  padding:10px 8px;
  text-decoration:none;
}

/* ===============================
   Navigation Mobile：1 行横スクロール
   =============================== */
@media (max-width:1024px){

  nav#navi,
  #navi,
  #navi-in,
  #navi .navi-in,
  #navi-in .navi-in{
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch;
  }

  #navi .menu,
  #navi-in ul.menu,
  nav#navi ul.menu,
  #navi .navi-in > ul,
  #navi-in .navi-in > ul{
    display:inline-flex !important;
    flex-wrap:nowrap !important;
    gap:16px !important;
    width:auto !important;
    min-width:max-content !important;
    white-space:nowrap !important;
    margin:0 !important;
    padding:0 12px !important;
    overflow:visible !important;
    scroll-snap-type:x proximity;
  }

  #navi .menu > li,
  #navi-in .menu > li,
  nav#navi ul.menu > li,
  #navi .navi-in > ul > li,
  #navi-in .navi-in > ul > li{
    float:none !important;
    flex:0 0 auto !important;
    scroll-snap-align:start;
  }

  #navi .menu > li > a,
  #navi-in .menu > li > a,
  nav#navi ul.menu > li > a{
    display:block !important;
    padding:12px 10px !important;
    line-height:1.2;
  }

  /* モバイルでカテゴリが二重に出る対策（保険） */
  #header .mobile-menu,
  #header .navi-mobile,
  #header .menu-mobile,
  #header .mobile-menu-buttons{
    display: none !important;
  }
  #navi .navi-in > ul:not(:first-of-type){
    display: none !important;
  }
}

/* ===== Header layout：モバイルは縦並びでギュッと詰める ===== */
@media (max-width:1024px){
  #header-in{
    display:flex!important;
    flex-direction:column!important;
    gap:6px!important;            /* ← ここで全体の間隔を詰める */
    padding:6px 12px!important;   /* ← 内側余白も少なめに */
  }
  #header-in .logo-header{ order:1!important; width:100%!important; margin:0!important; }
  #header-in .lc-header-search{ order:2!important; width:100%!important; }
  #navi{ order:3!important; width:100%!important; margin-top:4px!important; }
}

/* PCは従来どおり横並び。検索はロゴの右で軽く詰める */
@media (min-width:1025px){
  #header-in{ display:flex; align-items:center; gap:14px; padding:6px 20px; }
  #header-in .logo-header{ margin-right:auto; }
  #header-in .lc-header-search{ margin-left:16px; }
}

/* SP：ロゴ → 検索 → カテゴリ（縦並び） */
@media (max-width:1024px){
  #header-in{
    display:flex !important;
    flex-direction:column !important;
    gap:6px !important;
    padding:6px 12px !important;
  }
  #header-in .logo-header{ order:1 !important; width:100% !important; margin:0 !important; }
  #header-in .lc-header-search{ order:2 !important; width:100% !important; }
  #navi{ order:3 !important; width:100% !important; margin-top:4px !important; }
}

/* PC：横並び（ロゴ左／検索は右上へ） */
@media (min-width:1025px){
  #header-in{
    display:flex; align-items:center; gap:14px; padding:6px 20px;
  }
  #header-in .logo-header{ margin-right:auto; }
  /* 検索は 05-components.css 側で margin-left:auto; 済み */
}