@charset "UTF-8";
/*!
Theme Name: Cocoon Child
Description: Lots Cosme – Header: title left / search right
Template: cocoon-master
Version: 1.1.3
*/

/* ===============================
   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;
}

/* 検索（ロゴの右横） */
#header-in .lc-header-search{
  margin-left:24px;
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}
#header-in .lc-header-search .search-box,
#header-in .lc-header-search .search-box.input-box{ width:auto; }

#header-in .lc-header-search form,
#header-in .lc-header-search .search-form,
#header-in .lc-header-search .lc-search-form{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0;
}

/* 入力欄・ボタン（PC） */
#header-in .lc-header-search input[type="search"],
#header-in .lc-header-search input[type="text"],
#header-in .lc-header-search .search-field,
#header-in .lc-header-search .lc-search-field{
  width:320px;
  height:40px;
  line-height:40px;
  padding:0 14px;
  border:1px solid #ccc;
  border-radius:999px;
  background:#fff;
  box-sizing:border-box;
}
#header-in .lc-header-search input[type="submit"],
#header-in .lc-header-search button,
#header-in .lc-header-search .search-submit,
#header-in .lc-header-search .lc-search-submit{
  height:40px;
  line-height:40px;
  padding:0 14px;
  border-radius:999px;
}

/* 念のため非表示化させない保険 */
.lc-header-search{ display:block !important; visibility:visible !important; opacity:1 !important; }

/* ===============================
   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; }
  #header-in .lc-header-search{ margin-left:24px; }
}

/* ===============================
   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;
  }
  #header-in .lc-header-search{
    order:2 !important;
    width:100% !important;
    margin-left:0 !important;
    display:block !important;
  }
  #header-in .lc-header-search .search-form,
  #header-in .lc-header-search .lc-search-form{
    display:flex !important;
    width:100% !important;
    gap:8px !important;
    margin:0 !important;
    align-items:center !important;
  }
  #header-in .lc-header-search .search-box{ width:100% !important; }

  /* 入力欄・ボタン大きめ */
  #header-in .lc-header-search input[type="search"],
  #header-in .lc-header-search input[type="text"],
  #header-in .lc-header-search .search-field,
  #header-in .lc-header-search .lc-search-field{
    width:100% !important;
    height:44px !important;
    line-height:44px !important;
    padding:0 14px !important;
    box-sizing:border-box !important;
    border-radius:12px !important;
    border:1px solid #ccc !important;
    background:#fff !important;
  }
  #header-in .lc-header-search input[type="submit"],
  #header-in .lc-header-search button{
    height:44px !important;
    line-height:44px !important;
    padding:0 16px !important;
    border-radius:999px !important;
  }
  #navi{ margin-top:8px !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;
  }

  /* UL を“必要分だけ横に伸ばす” */
  #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;        /* 一部テーマの overflow 対策 */
    scroll-snap-type:x proximity;
  }

  /* Cocoon が li に float を入れている場合を打ち消す */
  #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;
  }

  /* スクロールバーを隠す（任意） */
  #navi .navi-in::-webkit-scrollbar,
  #navi-in::-webkit-scrollbar{ display:none; }
  #navi .navi-in,
  #navi-in{ scrollbar-width:none; }
}

/* === モバイルでカテゴリが二重に出る対策（保険） === */
@media (max-width:1024px){
  /* Cocoonのモバイル専用ナビやボタン類を隠す */
  #header .mobile-menu,
  #header .navi-mobile,
  #header .menu-mobile,
  #header .mobile-menu-buttons{
    display: none !important;
  }

  /* #navi 内に UL が複数ある場合は最初の1つだけ表示 */
  #navi .navi-in > ul:not(:first-of-type){
    display: none !important;
  }
}