@charset "UTF-8";
/* ============================================================
   ビックリユース　紺の配色　打ち消し用CSS
   2026-08-23

   共通CSS（style-v3.min.css / style-detail.min.css）は
   システム会社（sandpit社）の管理なので触らない。
   そこに残っている旧オレンジ・旧赤を、このファイルで打ち消す。

   置き場所  https://src.bic-reyouth.com/onlinestore/css/bic-navy-override.css
   読む場所  共通ヘッダーの <link>（style-v3.min.css より後）

   🔴 価格の色と値引き％のバッジは変えない（2026-08-23 もりもりさん）
   ============================================================ */

/* =========================================================
   共通CSS（style-v3.min.css）に残る旧オレンジ #f83600 の打ち消し
   2026-08-23。共通CSSは sandpit社の管理なので、ここで上書きする。
   🔴 価格の色と値引き％のバッジは変えない（もりもりさん指示）
   ========================================================= */

/* 商品カードの「中古品」「残り◯点」
   🔴 一覧とトップで入れ物のクラスが違う。両方に当てること。
      一覧・カテゴリ … .product-footer
      トップ・商品詳細の関連商品 … .list-product-rich .area-footer */
article.article-list-product .list-product li a .product-footer > div:nth-child(1),
article.article-list-product .list-product-for-cat li a .product-footer > div:nth-child(1),
.product-footer > div:nth-child(1),
.list-product-rich .area-footer > div:nth-child(1){
  background-color:rgba(23,91,116,.08) !important;
  color:#175b74 !important;
}
article.article-list-product .list-product li a .product-footer > div:nth-child(2),
article.article-list-product .list-product-for-cat li a .product-footer > div:nth-child(2),
.product-footer > div:nth-child(2),
.list-product-rich .area-footer > div:nth-child(2){
  background-color:rgba(17,71,92,.13) !important;
  color:#11475c !important;
}

/* 商品詳細の「中古品」「残り◯点」
   🔴 一覧とは別のクラス（.product-detail-rank-stock）。ここも当てること */
article.article-product-detail .product-detail .product-detail-rank-stock > div:nth-child(1){
  background-color:rgba(23,91,116,.08) !important;
  color:#175b74 !important;
}
article.article-product-detail .product-detail .product-detail-rank-stock > div:nth-child(2){
  background-color:rgba(17,71,92,.13) !important;
  color:#11475c !important;
}

/* トップの特集の見出し横「もっとみる」。ここは旧コーポレートカラーの赤 #e60000 だった */
.article.article-shop-info .wrap-h2-area a{
  background-color:#175b74 !important;
  background-image:none !important;
  color:#ffffff !important;
  transition:background-color .18s ease !important;
}
.article.article-shop-info .wrap-h2-area a:hover{
  background-color:#11475c !important;
  opacity:1 !important;
}
.article.article-shop-info .wrap-h2-area a i{
  color:#ffffff !important;
}

/* 「もっとみる」 */
.btn.btn-more{
  border-color:#175b74 !important;
  background-color:#ffffff !important;
  color:#175b74 !important;
}
.btn.btn-more:hover,
.btn.btn-more:focus{
  background-color:#175b74 !important;
  color:#ffffff !important;
}

/* 「店舗で探す」の商品一覧へ＝販売系／買取査定へ＝買取系 */
.store-card-items a{
  background:#175b74 !important;
  background-image:none !important;
  color:#ffffff !important;
}
.store-card-items a:hover{ background:#11475c !important; }
.store-card-items a.store-card-btn-02{
  background:#11475c !important;
  background-image:none !important;
}
.store-card-items a.store-card-btn-02:hover{ background:#0d3a4c !important; }

/* 絞り込みサイドバー：吹き出し */
.hint-box{
  border-color:#175b74 !important;
  background:#e4eff2 !important;
  color:#175b74 !important;
}
.hint-box::before{
  border-color:#175b74 rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0) !important;
}
.hint-box::after{
  border-color:#e4eff2 rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0) !important;
}

/* 絞り込みサイドバー：検索ボタン・件数 */
.aside-footer .filter-submit,
.overlay-new-footer .mobile-filter-submit,
.area-search .btn-search{
  background:#175b74 !important;
  background-image:none !important;
  color:#ffffff !important;
}
.aside-footer .filter-submit:hover,
.overlay-new-footer .mobile-filter-submit:hover,
.area-search .btn-search:hover{
  background:#11475c !important;
  background-image:none !important;
}
.filter-count-badge{ color:#175b74 !important; }
.filter-result-count{ color:#175b74 !important; }

/* 検索欄の丸ボタン（スマホの上部とサイドバー） */
.search-box .search-box-submit{
  background-color:#175b74 !important;
  background-image:none !important;
  color:#ffffff !important;
}

/* スマホのドロワーのカテゴリ（触ったときの色） */
.drawer-category-list .drawer-cat-children a:hover{ color:#175b74 !important; }

/* 商品詳細の「カートに追加する」
   🔴 ECでは暖色がセオリーなのでオレンジのまま。
      塗りつぶしとグラデーションはやめ、白地＋枠にする（もりもりさん指示）。
   🔴 ただし「押したときの動き」は残す。
      触ると色が反転して少し持ち上がる。グラデーションが流れる動きの代わり。
      #f83600 は白地で 3.8:1 と読みにくいため、4.6:1 の #b85a28 を使う */
article.article-product-detail .product-detail .product-detail-add-to-cart > div:nth-child(2) .btn,
.link-add-to-cart{
  background:#ffffff !important;
  background-image:none !important;
  border:1px solid #b85a28 !important;
  color:#b85a28 !important;
  transition:background-color .18s ease,color .18s ease,transform .18s ease,box-shadow .18s ease !important;
}
article.article-product-detail .product-detail .product-detail-add-to-cart > div:nth-child(2) .btn:hover,
article.article-product-detail .product-detail .product-detail-add-to-cart > div:nth-child(2) .btn:focus,
.link-add-to-cart:hover,
.link-add-to-cart:focus{
  background:#b85a28 !important;
  background-image:none !important;
  color:#ffffff !important;
  transform:translateY(-1px) !important;
  box-shadow:0 4px 11px rgba(184,90,40,.22) !important;
}
article.article-product-detail .product-detail .product-detail-add-to-cart > div:nth-child(2) .btn:active,
.link-add-to-cart:active{
  transform:translateY(0) !important;
  box-shadow:0 1px 3px rgba(184,90,40,.22) !important;
}
article.article-product-detail .product-detail .product-detail-add-to-cart > div:nth-child(1){
  color:#b85a28 !important;
}
article.article-product-detail .product-detail .product-detail-add-to-cart > div:nth-child(1) .form-control{
  border-color:#b85a28 !important;
}

/* 商品詳細のサイドに出るポップアップ
   🔴 ここは共通CSSではなく style-detail.min.css（商品詳細だけが読む）で
      赤 #a52227 / #f10000 になっている。オレンジではない。
      style-detail は共通ヘッダーより後に読まれるが、!important が付いていないので上書きできる。
   🔴 価格の赤は変えない */
.visible.items_cart .items_cart__header .items_cart__header___btn{
  background-color:#175b74 !important;
  background-image:none !important;
}
.visible.items_cart .items_cart__btn.addCart{
  background-color:#ffffff !important;
  background-image:none !important;
  border:1px solid #b85a28 !important;
  transition:background-color .18s ease !important;
  /* CALLCART_20260906 中身の <a> の margin-bottom:18px を 0 にしたぶん、入れ物の下余白が消えて
     枠がバナーの下端の線に重なっていた（もりもりさん指摘）。
     金額（.total-price）の下余白が 14px なので、ボタンの下も 14px にそろえる */
  margin:0 auto 14px !important;
}
/* 🔴 中身の <a> には枠を付けないこと。入れ物の <p> と二重になり、
      さらに <a> の margin-bottom:18px で下にずれて形が崩れる。
      枠は入れ物だけ、中身は文字色だけにする */
.visible.items_cart .items_cart__btn.addCart a,
.visible.items_cart .items_cart__btn.addCart a.link-add-to-cart{
  background:transparent !important;
  background-image:none !important;
  border:0 !important;
  border-radius:50px !important;
  margin-bottom:0 !important;
  color:#b85a28 !important;
}
.visible.items_cart .items_cart__btn.addCart:hover{
  background-color:#b85a28 !important;
}
.visible.items_cart .items_cart__btn.addCart:hover a,
.visible.items_cart .items_cart__btn.addCart:hover a.link-add-to-cart{
  background:transparent !important;
  color:#ffffff !important;
}

/* 🔴 元から .addCart:hover{opacity:.5} があり、触ると色が薄まって文字が読めなくなる。
      色を反転させる作りにしたので、薄める必要はない */
.visible.items_cart .items_cart__btn.addCart:hover,
.addCart:hover{
  opacity:1 !important;
}

/* サイドポップアップの電話番号。元は赤 #a52227（!important 付き） */
.tenpo_tel .tel{
  color:#175b74 !important;
}

/* スマホの下に出る固定バーの丸ボタン。小さいので塗りのまま色だけ変える */
.m-goodsDetailFixed_icon ul li a{
  background-color:#b85a28 !important;
  background-image:none !important;
  transition:background-color .18s ease !important;
}
.m-goodsDetailFixed_icon ul li a:hover{
  background-color:#9a4a20 !important;
}
.m-goodsDetailFixed_icon ul li.li-callbtn a{
  background-color:transparent !important;
}

/* 画面の動きを減らす設定にしている人には、動かさない */
@media (prefers-reduced-motion:reduce){
  article.article-product-detail .product-detail .product-detail-add-to-cart > div:nth-child(2) .btn,
  .link-add-to-cart,
  .m-goodsDetailFixed_icon ul li a{
    transition:none !important;
    transform:none !important;
  }
}

/* ============================================================
   ここから下は、もともと共通ヘッダーの中に直接書かれていたもの（id は header-brand-refresh-2026）。
   2026-08-23 に外部ファイルへ移した。

   🔴 理由：ヘッダーに書ける文字数に上限があり、超えるとヘッダーが丸ごと
      保存されず、サイトからヘッダーが消える（実際に起きた）。
   ============================================================ */

:root{
  --header-brand-navy:#175b74;
  --header-brand-navy-dark:#11475c;
  --header-brand-navy-soft:#9fbcc6;
  --header-brand-navy-mute:#3f6f80;
  --header-brand-light:#f3f4f2;
  --header-brand-blue:#55c5ce;
  --header-brand-orange:#f08a55;
  --header-brand-text:#1e2c35;
  --header-brand-line:#d9ddda;
}

/* 最上段：赤帯を深いネイビーへ */
header.top .site-title{
  background:var(--header-brand-navy) !important;
  background-image:none !important;
  border:0 !important;
}

header.top .site-title,
header.top .site-title h1,
header.top .site-title .site-title-01,
header.top .site-title .slide-link,
header.top .site-title a{
  color:#ffffff !important;
}

/* PC：左タイトル＋右スポンサー表記を落ち着いた企業情報として配置 */
header.top .wrap-site-title-inner{
  align-items:center !important;
  justify-content:space-between !important;
  gap:24px !important;
}

header.top .wrap-site-title-inner > span{
  flex:0 0 auto !important;
}

header.top .wrap-site-title-inner > span > a{
  display:inline-flex !important;
  align-items:center !important;
  padding:4px 0 !important;
  border:0 !important;
  background:transparent !important;
  font-weight:700 !important;
  text-decoration:none !important;
  opacity:.94;
}

/* スマホの縦スライドはそのまま維持 */
header.top .swiper-news-container,
header.top .swiper-news-container .swiper-wrapper,
header.top .swiper-news-container .swiper-slide{
  background:var(--header-brand-navy) !important;
  background-image:none !important;
}

/* 2段目：白から薄いグレーへ */
header.top .header-inner{
  background:var(--header-brand-light) !important;
  background-image:none !important;
  border-bottom:1px solid var(--header-brand-line) !important;
}

/* ロゴ周辺も同じ面色へ */
header.top .wrap-logo-area{
  background:transparent !important;
}

/* 3ボタン共通：外部CSSのベタ塗り・グラデーションを解除 */
header.top .header-nav > ul > li.header-brand-btn{
  background:transparent !important;
  background-image:none !important;
}

header.top .header-nav > ul > li.header-brand-btn > a{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-sizing:border-box !important;
  background:#ffffff !important;
  background-image:none !important;
  border-style:solid !important;
  border-width:1px !important;
  border-radius:7px !important;
  font-weight:800 !important;
  box-shadow:none !important;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease !important;
}

/* プレミアム保証＝補助。いちばん弱い見た目にする */
header.top .header-nav > ul > li.header-brand-btn--quality > a{
  border-color:var(--header-brand-navy-soft) !important;
  color:var(--header-brand-navy-mute) !important;
}

header.top .header-nav > ul > li.header-brand-btn--quality > a i{
  color:var(--header-brand-navy-mute) !important;
}

/* 買取サービス＝買取系。左辺だけ濃い紺の帯を立てて、販売系と区別する */
header.top .header-nav > ul > li.header-brand-btn--purchase > a{
  border-color:var(--header-brand-navy) !important;
  border-left:4px solid var(--header-brand-navy-dark) !important;
  color:var(--header-brand-navy-dark) !important;
}

/* 探す＝販売系。いちばん押してほしいので紺で塗る */
header.top .header-nav > ul > li.header-brand-btn--search > a{
  background:var(--header-brand-navy) !important;
  border-color:var(--header-brand-navy) !important;
  color:#ffffff !important;
}

header.top .header-nav > ul > li.header-brand-btn--search > a i,
header.top .header-nav > ul > li.header-brand-btn--search > a span{
  color:#ffffff !important;
}

/* hoverもグラデーションなし */
@media (hover:hover){
  header.top .header-nav > ul > li.header-brand-btn--quality > a:hover{
    background:#eef3f6 !important;
    border-color:var(--header-brand-navy) !important;
    color:var(--header-brand-navy) !important;
  }
  header.top .header-nav > ul > li.header-brand-btn--purchase > a:hover{
    background:#eef3f6 !important;
    color:var(--header-brand-navy-dark) !important;
  }
  header.top .header-nav > ul > li.header-brand-btn--search > a:hover{
    background:var(--header-brand-navy-dark) !important;
    border-color:var(--header-brand-navy-dark) !important;
    color:#ffffff !important;
  }
}

/* PC：4つ並べるので、高さ40px・文字13px・左右14px・すき間10pxに詰める */
@media screen and (min-width:992px){
  header.top .header-nav > ul{
    gap:10px !important;
  }
  header.top .header-nav > ul > li.header-brand-btn > a{
    height:40px !important;
    min-height:40px !important;
    padding:0 14px !important;
    font-size:13px !important;
    line-height:1.2 !important;
  }
  header.top .header-nav > ul > li.header-brand-btn > a span{
    font-size:13px !important;
    margin-left:0 !important;
  }
}

/* カート・三本メニューはブランドカラーを邪魔しないニュートラル表示 */
header.top .header-nav > ul > li.category.small{
  background:transparent !important;
  background-image:none !important;
}

header.top .header-nav > ul > li.category.small > a{
  color:var(--header-brand-text) !important;
}

/* スマホ：プレミアム保証の下段導線も同じトーンへ */
.wrap-premium-guarantee{
  background:#f7f8f7 !important;
  background-image:none !important;
  border-top:1px solid #e5e8e6 !important;
  border-bottom:1px solid #e5e8e6 !important;
}

.wrap-premium-guarantee p{
  color:var(--header-brand-text) !important;
}

.wrap-premium-guarantee a{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:#ffffff !important;
  background-image:none !important;
  border:1px solid #9fbcc6 !important;
  border-radius:7px !important;
  color:var(--header-brand-navy) !important;
  font-weight:800 !important;
  box-shadow:none !important;
}

.wrap-premium-guarantee a i{
  color:var(--header-brand-navy) !important;
}

@media screen and (max-width:991px){
  header.top .site-title{
    background:var(--header-brand-navy) !important;
  }

  header.top .header-inner{
    background:var(--header-brand-light) !important;
  }

  /* スマホ：買取・探すボタンの上下幅を詰め、上下ラインとの重なりを防止 */
  header.top .header-nav > ul > li.header-brand-btn{
    margin-top:0 !important;
    margin-bottom:0 !important;
  }

  header.top .header-nav > ul > li.header-brand-btn > a{
    min-height:36px !important;
    height:36px !important;
    padding-top:4px !important;
    padding-bottom:4px !important;
    line-height:1.15 !important;
  }
}

/* =========================================================
   SIDEBAR BRAND REFRESH 2026
   ヘッダーと同じ「白地＋1px枠＋角丸＋単色」仕様
   ========================================================= */
.header-overlay-menu .overlay-featured-brand{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:8px !important;
  margin:18px 0 8px !important;
  padding:0 !important;
}

.header-overlay-menu .overlay-featured-brand > li{
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  background-image:none !important;
  border:0 !important;
  list-style:none !important;
}

.header-overlay-menu .overlay-featured-brand > li > a{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:42px !important;
  padding:8px 14px !important;
  border:1px solid transparent !important;
  border-radius:7px !important;
  box-shadow:none !important;
  font-size:14px !important;
  font-weight:800 !important;
  line-height:1.25 !important;
  text-align:center !important;
  text-decoration:none !important;
}

/* 1. 中古を探す／新品を探す：販売系＝紺の塗り */
.header-overlay-menu .overlay-featured-search > a{
  background:#175b74 !important;
  border-color:#175b74 !important;
  color:#ffffff !important;
}

/* 2. レイアウト・商品選定 無料相談：販売の相談＝白地＋紺枠 */
.header-overlay-menu .overlay-featured-consult > a{
  background:#ffffff !important;
  border-color:#175b74 !important;
  color:#175b74 !important;
}

/* 3. 買取サービス：買取系＝左辺だけ濃い紺の帯 */
.header-overlay-menu .overlay-featured-purchase > a{
  background:#ffffff !important;
  border-color:#175b74 !important;
  border-left:4px solid #11475c !important;
  color:#11475c !important;
}

/* 4. お気に入り：補助導線だが、他ボタン同様に枠付きで統一 */
.header-overlay-menu .overlay-favorite-small{
  margin:0 0 14px !important;
  padding:0 !important;
  text-align:center !important;
}

.header-overlay-menu .overlay-favorite-small a{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  min-height:38px !important;
  padding:7px 12px !important;
  background:#ffffff !important;
  border:1px solid #9fbcc6 !important;
  border-radius:7px !important;
  color:#3f6f80 !important;
  font-size:12px !important;
  font-weight:700 !important;
  line-height:1.3 !important;
  text-decoration:none !important;
  box-shadow:none !important;
}

.header-overlay-menu .overlay-favorite-small a span{
  margin-left:2px !important;
  color:#87949a !important;
  font-size:11px !important;
  font-weight:600 !important;
}

@media (hover:hover){
  .header-overlay-menu .overlay-featured-search > a:hover{
    background:#11475c !important;
    border-color:#11475c !important;
    color:#ffffff !important;
  }

  .header-overlay-menu .overlay-featured-consult > a:hover{
    background:#eef3f6 !important;
    border-color:#175b74 !important;
    color:#175b74 !important;
  }

  .header-overlay-menu .overlay-featured-purchase > a:hover{
    background:#eef3f6 !important;
    color:#11475c !important;
  }

  .header-overlay-menu .overlay-favorite-small a:hover{
    background:#f5f7f6 !important;
    border-color:#175b74 !important;
    color:#175b74 !important;
  }
}

@media screen and (max-width:767px){
  .header-overlay-menu .overlay-featured-brand{
    margin:10px 0 6px !important;
    gap:7px !important;
  }

  .header-overlay-menu .overlay-featured-brand > li > a{
    min-height:38px !important;
    padding:7px 12px !important;
    font-size:13px !important;
  }

  .header-overlay-menu .overlay-favorite-small{
    margin-bottom:12px !important;
  }

  .header-overlay-menu .overlay-favorite-small a{
    font-size:11.5px !important;
  }
}

/* サイドバー主要導線：PCホバー時のアクション */
@media (hover:hover){
  .header-overlay-menu .overlay-featured-search > a:hover{
    background:#11475c !important;
    border-color:#11475c !important;
    color:#ffffff !important;
    transform:translateY(-1px) !important;
    box-shadow:0 3px 8px rgba(23,91,116,.20) !important;
  }

  .header-overlay-menu .overlay-featured-consult > a:hover{
    background:#eef3f6 !important;
    border-color:#175b74 !important;
    color:#175b74 !important;
    transform:translateY(-1px) !important;
    box-shadow:0 3px 8px rgba(23,91,116,.12) !important;
  }

  .header-overlay-menu .overlay-featured-purchase > a:hover{
    background:#eef3f6 !important;
    border-color:#175b74 !important;
    color:#11475c !important;
    transform:translateY(-1px) !important;
    box-shadow:0 3px 8px rgba(17,71,92,.12) !important;
  }

  .header-overlay-menu .overlay-favorite-small a:hover{
    background:#f5f7f6 !important;
    border-color:#bfcac6 !important;
    color:#175b74 !important;
    transform:translateY(-1px) !important;
    box-shadow:0 3px 8px rgba(23,91,116,.08) !important;
  }
}

/* サービスバナー：順番を見やすく、カード間隔を統一 */
.header-overlay-menu .nav-banner-brand-order{
  display:block !important;
  margin-top:14px !important;
  padding:0 !important;
}

.header-overlay-menu .nav-banner-brand-order > li{
  margin:0 0 10px !important;
  padding:0 !important;
  overflow:hidden !important;
  border:1px solid #e1e5e3 !important;
  border-radius:8px !important;
  background:#ffffff !important;
  box-shadow:0 2px 7px rgba(23,91,116,.06) !important;
  list-style:none !important;
}

.header-overlay-menu .nav-banner-brand-order > li > a{
  display:block !important;
  background:#ffffff !important;
  text-decoration:none !important;
}

.header-overlay-menu .nav-banner-brand-order > li > a > img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  margin:0 !important;
}

/* CAGUUUは既存ロゴを使った専用カード */
.header-overlay-menu .nav-banner-caguuu-inner{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:16px !important;
  min-height:84px !important;
  padding:16px 18px !important;
  background:#ffffff !important;
}

.header-overlay-menu .nav-banner-caguuu-inner img{
  display:block !important;
  width:150px !important;
  max-width:58% !important;
  height:auto !important;
  object-fit:contain !important;
}

.header-overlay-menu .nav-banner-caguuu-inner span{
  color:#175b74 !important;
  font-size:13px !important;
  font-weight:800 !important;
  white-space:nowrap !important;
}

@media screen and (max-width:767px){
  .header-overlay-menu .overlay-featured-brand{
    margin:10px 0 12px !important;
    gap:7px !important;
  }

  .header-overlay-menu .overlay-featured-brand > li > a{
    min-height:36px !important;
    padding:6px 12px !important;
    font-size:13px !important;
  }

  .header-overlay-menu .nav-banner-brand-order > li{
    margin-bottom:9px !important;
  }

  .header-overlay-menu .nav-banner-caguuu-inner{
    min-height:76px !important;
    padding:13px 15px !important;
  }

  .header-overlay-menu .nav-banner-caguuu-inner img{
    width:135px !important;
  }

  .header-overlay-menu .nav-banner-caguuu-inner span{
    font-size:12px !important;
  }
}

/* ============================================================
   トップページ：カテゴリ一覧・取扱メーカー一覧の整理
   2026-08-23  相方は js/bic-top-enhance.js

   もとの共通CSS（style-v3.css）は
     article.article-list-tag ul    { letter-spacing:11px }
     article.article-list-tag ul li a { border-radius:14px; border:1px solid #bababa }
   で全部を丸ボタンにしている。
   🔴 打ち消しは !important ではなく、article.article-list-tag を頭に付けて
      詳細度で勝つ形にしてある（あとから読む人が追いやすいため）。

   🔴 かたちは「大カテゴリの見出しを1行 → その下に中カテゴリを4列」。
      大カテゴリごとの箱を横に並べる形にすると、中カテゴリの数が
      12件と3件で高さが揃わず、すき間だらけになって縦に伸びる。
   ============================================================ */

/* ---------- カテゴリ一覧 ---------- */
article.article-list-tag .bic-cat-index{
  letter-spacing:0;
}

article.article-list-tag .bic-cat-group{
  padding:0 0 14px;
  margin:0 0 14px;
  border-bottom:1px solid #eaeef2;
}

article.article-list-tag .bic-cat-group:last-child{
  border-bottom:0;
  margin-bottom:0;
  padding-bottom:0;
}

article.article-list-tag .bic-cat-head{
  margin:0 0 8px;
  line-height:1.4;
}

article.article-list-tag .bic-cat-head a{
  display:inline-block;
  font-size:13px;
  font-weight:bold;
  color:#11475c;
  letter-spacing:.02em;
  /* 丸ボタンの指定を上書き */
  border:0;
  border-radius:0;
  padding:0;
}

article.article-list-tag .bic-cat-head a:hover{
  color:#175b74;
  background-color:transparent;
  text-decoration:underline !important;
}

/* 中カテゴリ：4列 */
article.article-list-tag .bic-cat-index ul.bic-cat-subs{
  margin:0;
  padding:0;
  letter-spacing:0;
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:2px 20px;
}

article.article-list-tag .bic-cat-index ul.bic-cat-subs li{
  list-style:none;
  display:block;
  margin:0;
  min-width:0;
  letter-spacing:0;
}

article.article-list-tag .bic-cat-index ul.bic-cat-subs li a{
  display:block;
  border:0;
  border-radius:0;
  padding:1px 0;
  font-size:12px;
  line-height:1.7;
  color:#3f6f80;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

article.article-list-tag .bic-cat-index ul.bic-cat-subs li a:hover{
  color:#175b74;
  background-color:transparent;
  text-decoration:underline !important;
}

/* ---------- 取扱メーカー一覧 ---------- */
article.article-list-tag .bic-maker-index{
  letter-spacing:0;
}

article.article-list-tag .bic-maker-row{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:9px 0;
  border-top:1px solid #eaeef2;
}

article.article-list-tag .bic-maker-row:first-child{
  border-top:0;
  padding-top:0;
}

article.article-list-tag .bic-maker-key{
  flex:0 0 34px;
  margin:0;
  padding-top:2px;
  font-size:12px;
  font-weight:bold;
  color:#175b74;
  line-height:1.6;
}

article.article-list-tag .bic-maker-index ul.bic-maker-list{
  flex:1 1 auto;
  min-width:0;
  margin:0;
  padding:0;
  letter-spacing:0;
  display:flex;
  flex-wrap:wrap;
  gap:4px 0;
}

article.article-list-tag .bic-maker-index ul.bic-maker-list li{
  list-style:none;
  display:block;
  margin:0;
  letter-spacing:0;
}

article.article-list-tag .bic-maker-index ul.bic-maker-list li + li::before{
  content:"／";
  color:#c3ccd6;
  font-size:11px;
  padding:0 3px;
}

article.article-list-tag .bic-maker-index ul.bic-maker-list li a{
  display:inline;
  border:0;
  border-radius:0;
  padding:0;
  font-size:12px;
  line-height:1.7;
  color:#3f6f80;
}

article.article-list-tag .bic-maker-index ul.bic-maker-list li a:hover{
  color:#175b74;
  background-color:transparent;
  text-decoration:underline !important;
}

/* ---------- 幅の狭い画面 ---------- */
@media screen and (max-width:991px){
  article.article-list-tag .bic-cat-index ul.bic-cat-subs{
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:2px 14px;
  }
}

@media screen and (max-width:575px){
  article.article-list-tag .bic-cat-index ul.bic-cat-subs{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:2px 12px;
  }

  article.article-list-tag .bic-maker-row{
    display:block;
  }

  article.article-list-tag .bic-maker-key{
    padding:0 0 3px;
  }
}

/* =========================================================
   在庫が2店舗以上ある商品の「カートにいれる」表　2026-08-24
   🔴 SKUCART_20260824

   在庫が1店舗の商品と、2店舗以上ある商品では、商品詳細の作りが違う。

     1店舗   … <a class="link-add-to-cart">      → 上で打ち消し済み
     2店舗〜 … <table> の <td class="td-sku-btn"> → 打ち消せていなかった

   そのため2店舗以上ある商品だけ、旧オレンジのままになっていた。
   （例：000000017682 横浜戸塚店＋江戸川店／000000018149 第3京浜川崎センター＋江戸川店）

   元の指定は style-v3.min.css。
     .td-sku-btn a        … オレンジのグラデーション
     .td-sku-remainder    … rgba(248,54,0,.2) の薄いオレンジ
     .td-sku-quantity     … #f83600

   🔴 スマホの「電話する」ポップアップ（#modal_call_item）は、
      ページの中の <style> で色を指定している。共通ヘッダーより後に出るため、
      打ち消すには !important と、同じかそれ以上の詳しさの指定が要る。
   ========================================================= */

/* 「カートにいれる」ボタン。1店舗のときと同じ、白地＋枠にそろえる */
.td-sku-btn a,
#modal_call_item .item-detail-addcart table td.td-sku-btn a{
  background:#ffffff !important;
  background-image:none !important;
  border:1px solid #b85a28 !important;
  color:#b85a28 !important;
  transition:background-color .18s ease,color .18s ease,transform .18s ease,box-shadow .18s ease !important;
}
.td-sku-btn a:hover,
.td-sku-btn a:focus,
#modal_call_item .item-detail-addcart table td.td-sku-btn a:hover,
#modal_call_item .item-detail-addcart table td.td-sku-btn a:focus{
  background:#b85a28 !important;
  background-image:none !important;
  color:#ffffff !important;
  text-decoration:none !important;
  transform:translateY(-1px) !important;
  box-shadow:0 4px 11px rgba(184,90,40,.22) !important;
}
.td-sku-btn a:active,
#modal_call_item .item-detail-addcart table td.td-sku-btn a:active{
  transform:translateY(0) !important;
  box-shadow:0 1px 3px rgba(184,90,40,.22) !important;
}

/* 「残り◯点」。商品詳細の他のバッジと同じ薄い紺にそろえる */
article.article-product-detail .product-detail .product-detail-price .td-sku-remainder > span,
.td-sku-remainder > span{
  background-color:rgba(17,71,92,.13) !important;
  color:#11475c !important;
}
#modal_call_item .item-detail-addcart table td.td-sku-remainder{
  background-color:rgba(17,71,92,.13) !important;
  color:#11475c !important;
}

/* 数量の欄。1店舗のときと同じ色にそろえる */
.td-sku-quantity span{
  color:#b85a28 !important;
}
.td-sku-quantity span input{
  border-color:#b85a28 !important;
  color:#b85a28 !important;
}

/* =========================================================
   スマホのバナーを PC と同じ横長にそろえる　2026-08-24
   🔴 MVUNIFY_20260824　【お試し】合わなければこの節を丸ごと消せば元に戻る

   もりもりさんのご要望
     「PCと同じ画像を縮小して表示し、ファーストビューでもう少し下が見えるようにしたい」
     「遷移先のページも縦長を採用しているので横長にしたい。今後 縦長を作らないため」
     「『詳しくはこちら』のボタンはスマホでは邪魔なので消したい」

   いまの作り（トップページ・カテゴリページとも同じ。sandpit社の管理なので触らない）

     <img src="…/banner/pc/01.webp" class="d-none d-lg-block">   ← 992px以上で出る
     <img src="…/banner/sp/01.webp" class="d-lg-none">           ← 992px未満で出る

   出し分けは Bootstrap のクラスでやっているだけなので、CSSで入れ替えられる。

   🔴 入れ物ではなく「画像のURL」で狙うこと。
      トップのファーストビューは .wrap-mv-item の中にあるが、
      カテゴリページのバナーは入れ物が無く、いきなり img が置いてある。
      入れ物で狙うと、カテゴリページのぶんが直らない。
      逆に img.d-lg-none を全部狙うと、バナー以外まで巻き込む。

   直る場所
     トップページ … ファーストビューのスライド9枚すべて
     カテゴリページ … セット割引 / ラストワン / ct606 / ct633 / 大量在庫コーナー
   ========================================================= */
@media screen and (max-width:991.98px){

  /* 縦長（スマホ用）を隠す */
  img.d-lg-none[src*="/header/banner/"],
  img.d-lg-none[src*="/main_visual/"],
  img.d-lg-none[src*="/CAGUUU/"]{
    display:none !important;
  }

  /* 横長（PC用）を出す */
  img.d-none.d-lg-block[src*="/header/banner/"],
  img.d-none.d-lg-block[src*="/main_visual/"],
  img.d-none.d-lg-block[src*="/CAGUUU/"]{
    display:block !important;
    width:100% !important;
    height:auto !important;
  }

  /* 「詳しくはこちら」はスマホでは邪魔。画像が小さくなり、上に重なって読めなくなる。
     🔴 画像そのものがリンクなので、消しても押せなくなることはない */
  .wrap-swiper-mv-area .wrap-mv-item span{
    display:none !important;
  }
}

/* ============================================================
   REDNAVY_20260827　赤（#cc0001）をヘッダー色（#175b74）にそろえる
   2026-08-27 もりもりさん「この赤も」

   赤は style-v3.min.css（sandpit社管理・触らない）の #cc0001 が出どころ。
   16か所で使われており、見出しの帯・下線、ページ送り、パンくず、
   カレンダー、FAQのラベルなど、サイト中に散っている。
   配色ルール（配色ルール_紺_20260823.md）では赤は使わないと決めているので、
   ここで1色まとめて置き換える。

   🔴 style-v3.min.css は書き換えない。このファイルが後から読まれるので上書きできる。
   🔴 商品の価格のオレンジ（#f83600）はここでは触っていない。別の判断が要る
   ============================================================ */

/* --- 見出しの帯・下線 --- */
main:not(.top) .article h2,
main:not(.top) .article-related_products h2,
main:not(.top) .article-checked_products h2{
  border-bottom-color:#175b74 !important;
}
main:not(.top) .article h3{
  border-left-color:#175b74 !important;
}
main:not(.top) .article h4{
  border-bottom-color:#175b74 !important;
}

/* --- ページ送り --- */
article.article-list-product .pagination .page-link{
  color:#175b74 !important;
}
article.article-list-product .pagination .page-item.active .page-link{
  color:#fff !important;
  background-color:#175b74 !important;
  border-color:#175b74 !important;
}

/* --- パンくず・一覧の矢印 --- */
.breadcrumb-item a,
article.article .list-manufacturer li a i,
article.article .list-category li a i{
  color:#175b74 !important;
}

/* --- 新着の見出し・FAQのラベル・リボン --- */
article.article-list-new_arrivals h2,
.article-faq ul li>div:first-child span.label,
.ribbon19{
  background-color:#175b74 !important;
  border-color:#175b74 !important;
}

/* --- 営業日カレンダー --- */
.box-calender{
  border-color:#175b74 !important;
  /* 周りのカードに合わせて角を丸める（2026-09-03）。
     🔴 overflow:hidden が要る。見出しの紺帯が角からはみ出して四角く見えるため */
  border-radius:8px !important;
  overflow:hidden !important;
}
.box-calender h3{
  background-color:#175b74 !important;
  border-left-color:#175b74 !important;
}

/* ECCAL_V116（2026-09-03）営業日カレンダーの作り直し
   ・休みか営業日かが一目で分かるようにする（元は薄いグレー文字＋薄いピンクで見分けづらかった）
   ・カレンダーの下に出ていた横スクロールバー（矢印）を消す
   ・前月／次月のボタンは使わないので隠す（当月と翌月の2枚で足りる）
   休みの日そのものは IKKI の営業カレンダーから来る。
   出どころ: https://system.bic-reyouth.com/ec_calendar.php */

/* 🔴 カレンダー下の矢印の正体は cal.css の overflow-x:scroll。
      表を枠内に収めて、スクロールそのものを無くす */
div.cal_wrapper{
  overflow-x:visible !important;
  padding:6px 4px 2px !important;
}
div.cal_wrapper table.cal{
  width:100% !important;
  table-layout:fixed !important;
}

/* 「前月 / − / 次月」のボタン。当月・翌月の2枚で足りるので出さない */
div.cal_wrapper table.cal tr th div.cal_ui{ display:none !important; }

/* 年月の見出し */
div.cal_wrapper table.cal tr th p{
  float:none !important;
  text-align:center !important;
  color:#175b74 !important;
  font-size:13px !important;
  font-weight:700 !important;
  padding:2px 0 6px !important;
}

/* 曜日の行 */
div.cal_wrapper table.cal tr.headline{ background-color:#e7eef1 !important; }
div.cal_wrapper table.cal tr.headline td{
  color:#175b74 !important;
  font-size:11px !important;
  font-weight:700 !important;
  padding:4px 0 !important;
}

/* 日付のマス（通常の営業日は白のまま） */
div.cal_wrapper table.cal tr td{ font-size:12px !important; padding:1px !important; }
div.cal_wrapper table.cal tr td div{
  font-size:12px !important;
  padding:5px 0 !important;
  border-radius:3px;
  color:#1E2B4D !important;
  background-color:transparent !important;
  font-weight:600 !important;
}

/* 休業日（Sat / Sun / Irregular は IKKI と繋がる前の古い指定。保険として残す） */
div.cal_wrapper table.cal tr td div.Holyday,
div.cal_wrapper table.cal tr td div.Irregular,
div.cal_wrapper table.cal tr td div.Sat,
div.cal_wrapper table.cal tr td div.Sun{
  background-color:#fbe9e9 !important;
  color:#b02020 !important;
  font-weight:700 !important;
}

/* 土日祝だが営業する日（凡例では「特別営業日」と出す） */
div.cal_wrapper table.cal tr td div.open{
  background-color:#e3edf0 !important;
  color:#175b74 !important;
  font-weight:700 !important;
}

/* 今日 */
div.cal_wrapper table.cal tr td div.Today{
  box-shadow:inset 0 0 0 2px #175b74 !important;
}

/* 過ぎた日は薄く。🔴 休業日より【後】に書くこと（後に書いたほうが勝つ） */
div.cal_wrapper table.cal tr td div.backward{
  color:#b9c2ca !important;
  background-color:transparent !important;
  font-weight:400 !important;
  box-shadow:none !important;
}

/* 休みの名前を出すふきだし（cal.js が span で出している） */
div.cal_wrapper table.cal tr td div span{
  border-color:#d8dde5 !important;
  font-size:12px !important;
  color:#1E2B4D !important;
}

/* 凡例（ec_calendar.php が作る） */
.bic-cal-legend{
  display:flex !important;
  gap:14px;
  justify-content:center;
  align-items:center;
  padding:2px 0 10px;
  font-size:11px;
  color:#1E2B4D;
}
.bic-cal-legend span{ display:inline-flex; align-items:center; }
.bic-cal-legend i{
  display:inline-block;
  width:12px; height:12px;
  border-radius:2px;
  margin-right:5px;
}
.bic-cal-legend .lg-open{ background:#e3edf0; border:1px solid #a9c4cd; }
.bic-cal-legend .lg-hol{ background:#fbe9e9; border:1px solid #e3b7b7; }

/* --- アクセスのボタン --- */
.access_link_button,
.access_link_button_head{
  background-color:#175b74 !important;
  border-color:#175b74 !important;
}
.access_link_button:hover .access_link{
  color:#175b74 !important;
}

/* --- 店舗ページの問い合わせボタン（category-store.min.css の #cc0001） --- */
main:not(.top) .article .wrap-link-area a,
main:not(.top) .article .wrap-link-area p{
  background-color:#175b74 !important;
  border-color:#175b74 !important;
}
main:not(.top) .article .wrap-link-area a:hover{
  background-color:#11475c !important;
}

/* --- 「すべて読む」など（category.min.css の #cc0001） --- */
.read-more,
.hide-more,
.read-more:hover,
.hide-more:hover,
.read-more:focus,
.hide-more:focus,
.btn-return-top,
.btn-return-top:hover,
.btn-getback{
  color:#175b74 !important;
  border-color:#175b74 !important;
}

/* ============================================================
   PURNAVY_20260827　買取ページの色を配色ルールにそろえる
   2026-08-27 もりもりさん

   買取ページだけ、水色・虹色のグラデーション・茶色・赤が残っていた。
   出どころは purchase-2503.min.css（sandpit社管理・触らない）と、
   ページ本文の <style>。
   ■ 使ってよい色は4つだけ（配色ルール_紺_20260823.md）
      #175b74 主 ／ #11475c 買取の帯・hover ／ #9fbcc6 枠 ／ #3f6f80 補助の文字

   ■ すべて main.purchase-2503 の中だけに効かせている。他のページには影響しない。
   ■ 画像に焼き込まれた色（cta_up01.webp・doj_txt.webp など約40枚）は
      CSSでは変えられない。差し替えるなら別作業。
   ============================================================ */

/* --- 水色のベタ塗り --- */
main.purchase-2503 .skyblue,
main.purchase-2503 .blu2{
  background-color:#175b74 !important;
}

/* --- 虹色のグラデーション（緑→水色→青）→ ベタ塗り
       2026-08-27 もりもりさん「グラデーションはなくしてください」 --- */
main.purchase-2503 .rainbow,
main.purchase-2503 .full-width-bg2{
  background:#11475c !important;
  background-image:none !important;
}

/* --- 問い合わせの帯（PCの追従ボタンを含む。緑のグラデーションだった）→ ベタ塗り --- */
main.purchase-2503 .wrap-contact-area,
main.purchase-2503 .wrap-contact-area-fixed{
  background:#175b74 !important;
  background-image:none !important;
}

/* --- SBTi・サステナビリティのボタン（茶色だった） --- */
main.purchase-2503 .button{
  background-color:#175b74 !important;
  background-image:none !important;
}
main.purchase-2503 .button:hover{
  background-color:#11475c !important;
}

/* --- 大規模法人案件のご案内：チェックマークの赤 --- */
main.purchase-2503 .purchase-large-project-intro li::before{
  border-right-color:#175b74 !important;
  border-bottom-color:#175b74 !important;
}

/* --- 関連するお役立ち情報：赤い「記事を読む」と黒いボタン --- */
main.purchase-2503 .purchase-related-column__read{
  color:#175b74 !important;
}
main.purchase-2503 .purchase-related-column__more-link{
  background:#175b74 !important;
}
main.purchase-2503 .purchase-related-column__more-link:hover{
  background:#11475c !important;
  opacity:1 !important;
}

/* ============================================================
   PURNAVY2_20260827　買取ページに残っていた水色・青をすべてそろえる
   2026-08-27 もりもりさん「色忘れていますか」

   purchase-2503.min.css を全部洗って、承認済みの4色以外を出し切った。
   ■ .text-badge         #0090ff / #66bdff / #005799  （3種類の見出しバッジ）
   ■ .wrap-nonstop-area  #09b1e7
   ■ .blu h3             #51ade2
   ■ .wrap-contact-area  #2af598 #009efd #21d4fd #b721ff（グラデーション。上で対応済み）

   🔴 ファーストビュー（.wrap-mv-area2 の文字色 #00637b と背景 kv-1x.webp）は
      触っていない。もりもりさんの「ファーストビュー以外で」のご指示のとおり。
      画像を差し替えるときに、文字色も一緒に決める。
   ============================================================ */

/* --- 見出しのバッジ（3種類とも青系だった） --- */
main.purchase-2503 .wrap-strong-point-detail .text-badge,
main.purchase-2503 .wrap-strong-point-detail-02 .text-badge,
main.purchase-2503 .wrap-strong-point-detail-03 .text-badge{
  background-color:#175b74 !important;
  background-image:none !important;
}

/* --- ワンストップの帯 --- */
main.purchase-2503 .wrap-nonstop-area{
  background-color:#175b74 !important;
  background-image:none !important;
}

/* --- 「時間と労力」「環境への配慮」の見出し
       元は【白地 ＋ 水色の枠 ＋ 水色の文字】。
       🔴 2026-08-27 に背景だけ紺にして文字を水色のまま残してしまい、読めなくなった。
       　 配色ルールどおり【白地 ＋ 紺の枠 ＋ 紺の文字】に直す。塗らない。 --- */
main.purchase-2503 .blu h3{
  background-color:transparent !important;
  border-color:#175b74 !important;
  color:#175b74 !important;
}

/* ============================================================
   PURNAVY3_20260827　買取ページの薄い水色と、アイコンの黒
   2026-08-27 もりもりさん「ここ画像はずして黒で余計おかしい」
   ============================================================ */

/* --- 薄い水色の地 --- */
main.purchase-2503 .wrap-company-select-area,
main.purchase-2503 .sbti_bk{
  background-color:#eef4f6 !important;
  background-image:none !important;
}

/* 🔴 ここに「既存の問い合わせボタンのアイコンを白にする」を入れかけたが取り消した。
   .wrap-contact-area の中のボタンは【白地に濃い文字】なので、
   アイコンを白にすると白いボタンの上で見えなくなる。黒のままが正しい。
   白に反転させるのは、私が足した .purchase-midcta の【紺地のボタン】だけ。 */

/* ============================================================
   PURTEXT_20260827　文字が画像になっていた3か所を、文字に置き換える
   2026-08-27 もりもりさん「ここ画像をやめてテキストにしたほうがいいんですよね」

   ■ なぜ文字にするか
      doj_txt.webp / blu_txt1.webp / blu_txt2.webp / title-company-select.webp は
      「文字を画像にしたもの」。altには入っているが、本文としては評価されない。
      文字にすれば検索にも効き、色も配色ルールにそろえられ、スマホでも読みやすくなる。

   ■ 置き換える文字は、元の画像に書いてある内容そのまま。
      勝手に言い回しを変えていない（※の出典も残す）。
   ============================================================ */

/* --- ① オフィスの移転は"どこも同じ"と思ってませんか？ --- */
main.purchase-2503 .pur-txt-h2{
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  color:#1c2b33;
  font-size:34px;
  font-weight:700;
  line-height:1.6;
  letter-spacing:.02em;
}
main.purchase-2503 .pur-txt-em{
  color:#175b74;
  font-size:1.18em;
}

/* --- ② 時間と労力 ／ 環境への配慮 --- */
main.purchase-2503 .pur-blu-lead{
  margin:0 0 8px;
  padding:0;
  color:#1c2b33;
  font-size:20px;
  font-weight:700;
  line-height:1.7;
  text-align:center;
}
main.purchase-2503 .pur-blu-lead strong{
  color:#175b74;
  font-size:1.35em;
  font-weight:700;
}
main.purchase-2503 .pur-blu-note{
  margin:0;
  padding:0;
  color:#7a8a93;
  font-size:12px;
  line-height:1.6;
  text-align:center;
}

@media screen and (max-width:767px){
  main.purchase-2503 .pur-txt-h2{ font-size:24px; }
  main.purchase-2503 .pur-blu-lead{ font-size:17px; }
}

/* ======= SIDEA_20260829　サイドバーの見え方（A：見た目だけ） =======
   2026-08-29

   ■ なぜ別ファイルに書くか
     サイドバーのCSSは MakeShop 本体のスタイル（sandpit社管理）にあり、
     こちらでは触れない。だから後から読むこのファイルで上書きする。

   ■ 🔴 すべて .aside-search の中だけに効かせている
     スマホのメニュー（drawer）が同じクラス名を使っているため。
     .filter-section のように書くと、スマホ側まで巻き込む。

   ■ 🔴 塗りを増やさない
     新しいベタ塗りは1つも足していない。状態は「細い線」と「文字の色」で示す。
     いちばん大きい塗りは「商品を検索」ボタンだが、これは B で消えるので触らない。
   ============================================================ */

/* --- かたまりの区切りは1本の細い線だけ --- */
.aside-search .filter-section{
  border-bottom:1px solid #E7EBEE !important;
  background:transparent !important;
  margin:0 !important;
  padding:0 !important;
}

/* --- 見出し：塗らない。文字の色と下線だけ --- */
/* --- 見出し：高さを直接決める
       余白だけで詰めると、MakeShop 本体の min-height / height が残って効かない --- */
.aside-search .section-header{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  background:transparent !important;
  border:0 !important;
  margin:0 !important;
  padding:0 13px !important;
  min-height:0 !important;
  height:38px !important;
  cursor:pointer;
}

/* --- 中身の余白も詰める --- */
.aside-search .filter-options,
.aside-search .color-options,
.aside-search .size-inputs,
.aside-search .price-range{
  margin:0 !important;
  padding:0 13px 8px !important;
}
.aside-search .section-title{
  color:#175b74 !important;
  font-weight:700 !important;
  font-size:13px !important;
  line-height:1.5 !important;
}

/* --- 選択肢の行を詰める（縦を短くする） --- */
.aside-search .filter-option{
  padding:1px 0 !important;
  font-size:12.5px !important;
  line-height:1.45 !important;
}
.aside-search .filter-option label{ cursor:pointer; }
.aside-search .filter-option input[type="checkbox"]{
  accent-color:#175b74;
  width:14px; height:14px;
}

/* --- ヒントの箱：塗りをやめて枠だけに --- */
.aside-search .hint-box{
  background:transparent !important;
  border:1px solid #CFDBE1 !important;
  color:#43555F !important;
  font-size:11.5px !important;
  padding:7px 10px !important;
}

/* --- 数値の入力欄（サイズ・価格・在庫数）を詰める --- */
.aside-search .size-row,
.aside-search .price-range{
  display:flex !important;
  align-items:center;
  gap:5px;
  padding:3px 0 !important;
}
.aside-search .size-input,
.aside-search .price-input{
  width:72px !important;
  padding:5px 7px !important;
  font-size:12px !important;
  border:1px solid #CFD7DD !important;
  border-radius:5px !important;
}
.aside-search .size-label{
  width:2.6em;
  font-size:12px !important;
  color:#43555F !important;
}
.aside-search .size-unit{
  font-size:11px !important;
  color:#8FA3AC !important;
}

/* --- 「もっと見る／隠す」
       🔴 畳んだ節では出さない。
          前回 .filter-options を挟む書き方にしたが、カラーだけ
          class="color-options" で名前が違い、外れていた。
          間に何が入っても効くよう ~ （以降の兄弟）で指定する。
       🔴 小さく、右寄せに。a を付けて詳細度を上げる --- */
.aside-search .section-header.collapsed ~ .link-button{
  display:none !important;
}
.aside-search a.link-button{
  display:block !important;
  text-align:right !important;
  font-size:11px !important;
  line-height:1.6 !important;
  color:#175b74 !important;
  background:transparent !important;
  border:0 !important;
  padding:0 13px 9px !important;
  text-decoration:underline;
}

/* ============================================================
   🔴 詳細度を上げた同じ指定
      MakeShop 本体が .aside-search .area-search .filter-section のように
      深いセレクタで高さや余白を持っていると、上の指定では負ける。
      同じ深さで書き直して、確実に効かせる。
   ============================================================ */
.aside-search .area-search .filter-section{
  margin:0 !important;
  padding:0 !important;
  min-height:0 !important;
  border-bottom:1px solid #E7EBEE !important;
}
.aside-search .area-search .filter-section .section-header{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  margin:0 !important;
  padding:0 13px !important;
  min-height:0 !important;
  height:38px !important;
}
.aside-search .area-search .filter-section .section-title{
  line-height:1.3 !important;
  margin:0 !important;
}
.aside-search .area-search .filter-section .filter-options,
.aside-search .area-search .filter-section .color-options,
.aside-search .area-search .filter-section .size-inputs,
.aside-search .area-search .filter-section .price-range{
  margin:0 !important;
  padding:0 13px 8px !important;
}
.aside-search .area-search .filter-option{
  margin:0 !important;
  padding:1px 0 !important;
  line-height:1.4 !important;
  min-height:0 !important;
}

/* ============================================================
   カーソルを当てたときの反応
   🔴 塗るのはカーソルが乗っている間だけ。置きっぱなしの塗りは足さない。
   ============================================================ */
.aside-search .area-search .filter-section .section-header{
  transition:background-color .12s, color .12s;
}
/* 見出しの行にカーソル → 行が薄いグレーに */
.aside-search .area-search .filter-section .section-header:hover{
  background:#F2F5F6 !important;
}
/* 見出しの文字にカーソル → やや薄く */
.aside-search .area-search .filter-section .section-header:hover .section-title{
  color:#4A8398 !important;
}
/* 選択肢の文字にカーソル → やや薄く */
.aside-search .area-search .filter-option label,
.aside-search .area-search .filter-color-option label{
  transition:color .12s;
}
.aside-search .area-search .filter-option label:hover,
.aside-search .area-search .filter-color-option label:hover{
  color:#7E8F98 !important;
}

/* ======= BICMEGA_20260830f　中古オフィス家具　探すメニュー =======
   2026-08-30

   ■ 3列　1列目＝探し方 ／ 2列目＝カテゴリー等 ／ 3列目＝サブカテゴリー

   ■ 🔴 ベタ塗りを増やさない
     紺（#175b74）で面を塗るのは【選んでいる行の左3pxの線】と
     【メニュー下端の3pxの線】だけ。それ以外は白地と、うすいグレーの枠。
     反応はカーソルが乗っている間だけ、うすい水色（#EFF4F6）で示す。

   ■ 🔴 クラス名はすべて bicmega- 。既存とぶつからない。
   ========================================================= */
.bicmega{
  position:fixed !important; left:0; right:0; top:0;
  display:none; z-index:9000;
  background:#fff;
  border-top:1px solid #E4E9EC;
  border-bottom:3px solid #175b74;
  box-shadow:0 16px 34px rgba(16,40,52,.15);
}
.bicmega.is-open{ display:block; }
.bicmega *{ box-sizing:border-box; }
.bicmega a{ text-decoration:none; color:inherit; }

.bicmega .bicmega-in{
  max-width:1200px; margin:0 auto; padding:18px 24px 22px;
  display:grid !important;
  grid-template-columns:238px 262px minmax(0,1fr) !important;
  align-items:start !important;
}
.bicmega[data-axis="maker"] .bicmega-in,
.bicmega[data-axis="store"] .bicmega-in,
.bicmega[data-axis="bulk"]  .bicmega-in,
.bicmega[data-axis="pick"]  .bicmega-in,
.bicmega[data-axis="new"]   .bicmega-in{
  grid-template-columns:238px minmax(0,1fr) !important;
}
.bicmega[data-axis="cat"] .bicmega-sub{ display:block !important; }
.bicmega:not([data-axis="cat"]) .bicmega-sub{ display:none !important; }

/* --- 1列目　探し方の軸 --- */
.bicmega-axes{ border-right:1px solid #E7EBEE; padding-right:10px; }
.bicmega-axes button{
  width:100%; display:flex; align-items:center; gap:8px; text-align:left;
  border:0; background:transparent; font:inherit; font-size:13.5px; font-weight:700;
  color:#16242B; padding:11px 12px; cursor:pointer; line-height:1.4;
  border-radius:5px; transition:background-color .12s, color .12s;
}
.bicmega-axes button .ar{ margin-left:auto; color:#B4C2C9; font-size:15px; }
.bicmega-axes button:hover{ background:#EFF4F6; }
.bicmega-axes button.on{
  background:#EFF4F6; color:#0F4155;
  box-shadow:inset 3px 0 0 #175b74;
}
.bicmega-axes button.on .ar{ color:#175b74; }

/* --- 2列目 --- */
.bicmega-mid{
  border-right:1px solid #E7EBEE; padding:0 12px 0 14px;
  max-height:404px; overflow-y:auto;
}
.bicmega:not([data-axis="cat"]) .bicmega-mid{
  border-right:0; padding:2px 0 0 26px; max-height:none;
}
.bicmega-cat{
  display:flex; align-items:center; gap:9px;
  padding:5px 10px; font-size:13px; font-weight:600; color:#2B3B44;
  border-radius:5px; transition:background-color .12s, color .12s;
}
.bicmega-cat:hover, .bicmega-cat.on{ background:#EFF4F6; color:#0F4155; }
.bicmega-ico{ width:26px; height:26px; object-fit:contain; flex:0 0 26px; opacity:.86; }

/* --- 3列目　サブカテゴリー --- */
.bicmega-sub{ padding:2px 2px 0 26px; max-height:404px; overflow-y:auto; }
.bicmega-subhead{ display:flex; align-items:center; gap:10px; margin-bottom:9px; }
.bicmega-subhead .bicmega-ico{ width:34px; height:34px; flex:0 0 34px; opacity:1; }
.bicmega-subhead h4{ margin:0; font-size:16px; font-weight:700; color:#0F4155; }
a.bicmega-all{
  display:inline-block; margin-bottom:13px;
  font-size:12px; font-weight:700; color:#175b74;
  border:1px solid #BFD5DE; border-radius:99px; padding:5px 16px;
  transition:background-color .12s, border-color .12s;
}
a.bicmega-all:hover{ background:#EFF4F6; border-color:#175b74; }
.bicmega-sublist{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 18px; }
.bicmega-sublist a{
  display:block; padding:5px 9px; font-size:12.5px; color:#4A5B64;
  border-radius:4px; line-height:1.5;
  transition:background-color .12s, color .12s;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.bicmega-sublist a:hover{ background:#EFF4F6; color:#0F4155; }

/* --- 板（店舗・メーカー・特集・新着） --- */
.bicmega-tiles{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.bicmega-tiles a{
  display:block; padding:13px 15px;
  border:1px solid #DDE3E7; border-radius:7px; background:#fff;
  transition:border-color .14s, background-color .14s, box-shadow .14s;
}
.bicmega-tiles a:hover{
  border-color:#175b74; background:#F7FAFB;
  box-shadow:0 2px 8px rgba(23,91,116,.10);
}
.bicmega-tiles .tt{ display:block; font-size:13.5px; font-weight:700; color:#16242B; line-height:1.4; }
.bicmega-tiles a:hover .tt{ color:#0F4155; }
.bicmega-tiles small{
  display:block; font-size:11.5px; font-weight:500; color:#8CA0AA;
  margin-top:3px; line-height:1.5;
}

/* --- まとめ買いの下段 --- */
.bicmega-flat{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0 14px; }
.bicmega-flat a{
  display:block; padding:5px 9px; font-size:12.5px; color:#4A5B64; border-radius:4px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  transition:background-color .12s, color .12s;
}
.bicmega-flat a:hover{ background:#EFF4F6; color:#0F4155; }

.bicmega-lead{ margin:0 0 11px; font-size:12.5px; color:#7F939D; line-height:1.7; }
.bicmega-lead2{
  margin:18px 0 8px; font-size:12px; font-weight:700; color:#0F4155;
  padding-bottom:6px; border-bottom:1px solid #E7EBEE;
}
.bicmega-note{ margin:6px 0 0; font-size:12.5px; color:#8CA0AA; line-height:1.8; }

/* 🔴 どの版が動いているかを画面で見分けるため */
.bicmega-ver{
  position:absolute; right:11px; bottom:5px;
  font-size:10px; color:#C8D2D7; letter-spacing:.05em; pointer-events:none;
}

/* スマホ・タブレットでは出さない（あちらは drawer） */
@media (max-width:991.98px){ .bicmega{ display:none !important; } }
@media (max-width:1180px){
  .bicmega .bicmega-in{ grid-template-columns:206px 228px minmax(0,1fr) !important; }
  .bicmega[data-axis="maker"] .bicmega-in,
  .bicmega[data-axis="store"] .bicmega-in,
  .bicmega[data-axis="bulk"]  .bicmega-in,
  .bicmega[data-axis="pick"]  .bicmega-in,
  .bicmega[data-axis="new"]   .bicmega-in{ grid-template-columns:206px minmax(0,1fr) !important; }
  .bicmega-sublist{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .bicmega-tiles{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .bicmega-flat{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
/* ======= BICSUB_20260830b　サブカテゴリーをカテゴリーの続きに見せる =======
   2026-08-30

   🔴 DOM は動かさない。理由は bic-mega.js の subFold() に書いた。
      #category-options の中へ入れると、script.js の bindSingleSelect が
      「同じ箱の中を全部外す」ため、サブを押した瞬間にカテゴリーが外れる。
      サブは元からカテゴリーのすぐ下にあるので、動かす必要が無い。

   🔴 塗りは足さない。段差は「字下げ」と「左の細い線」だけで示す。
      class は bic-mega.js が、カテゴリーを選んだときだけ付ける。
   ================================================================= */
.aside-search .area-search .filter-section.bicsub-inline{
  padding-left:13px !important;
  background:transparent !important;
}
/* 左の細い線。カテゴリーの中身であることを示す */
.aside-search .area-search .filter-section.bicsub-inline .section-header,
.aside-search .area-search .filter-section.bicsub-inline .filter-options,
.aside-search .area-search .filter-section.bicsub-inline a.link-button{
  border-left:2px solid #DDE5E9 !important;
}
.aside-search .area-search .filter-section.bicsub-inline .section-header{
  height:30px !important;
  padding:0 13px 0 11px !important;
}
.aside-search .area-search .filter-section.bicsub-inline .section-title{
  font-size:11.5px !important;
  font-weight:600 !important;
  color:#4A8398 !important;
}
.aside-search .area-search .filter-section.bicsub-inline .filter-options{
  padding:0 13px 6px 11px !important;
}
.aside-search .area-search .filter-section.bicsub-inline a.link-button{
  padding:0 13px 6px 11px !important;
  text-align:left !important;
}
/* ======= HDRACCENT_20260830　ヘッダーの配色（案B：赤をアクセントに） =======
   2026-08-30　もりもりさん決定

   ■ 決めたこと
     紺 ＝ 骨組み（ヘッダー・見出し・枠）。面で塗るのはここだけ
     赤 ＝ 押してほしい所だけ（ボタン1つ・価格・SALE）。面積は小さく
     紺（青緑寄り）の反対色はオレンジ〜赤なので、配色としても筋が通る。

   ■ 直した3つ（社員からの指摘）
     1. 「買取サービス」の左4pxの線 → やめる
        「ブレですか」と聞かれた時点で、装飾として失敗している。
        線は例外を示すためのもので、普通のボタンに付けるものではない。
     2. ベタ塗りが2つ並んでいた → 1つに絞る
        どちらが主役か分からないまま、色の面積だけが増えていた。
        これが「重たい」の正体。
     3. 暖色が1色も無かった → 主役のボタンだけ赤に
        これが「暗い」の正体。紺は落ち着きは出せるが、小売の熱は出せない。

   🔴 以前のメインカラー #f83600 はそのままでは戻せない。
      白い文字が 3.8:1 で読めない（国際基準は 4.5:1 以上）。
      #C0392B は 5.4:1。同じ赤系で、読める濃さにしたもの。

   🔴 「中古を探す」と「新品を探す」は class が同じ。
      違うのはリンク先だけなので、リンク先で見分けている。
      HTMLのボタンを増やすときは、ここも見直すこと。
   ========================================================= */
:root{
  --header-brand-accent:#C0392B;
  --header-brand-accent-dark:#A53225;
}

/* 地色を白に。うすいグレーより明るく見える */
header.top .header-inner{
  background:#ffffff !important;
}

/* 1. 買取サービス：左の太線をやめて、ほかと同じ1pxに */
header.top .header-nav > ul > li.header-brand-btn--purchase > a{
  border-left-width:1px !important;
  border-left-color:var(--header-brand-navy) !important;
}

/* 2. 探すボタンの既定は「紺の枠線」。＝「新品を探す」がこれになる */
header.top .header-nav > ul > li.header-brand-btn--search > a{
  background:#ffffff !important;
  border-color:var(--header-brand-navy) !important;
  color:var(--header-brand-navy) !important;
}
header.top .header-nav > ul > li.header-brand-btn--search > a span,
header.top .header-nav > ul > li.header-brand-btn--search > a i{
  color:var(--header-brand-navy) !important;
}
header.top .header-nav > ul > li.header-brand-btn--search > a:hover{
  background:#eef3f6 !important;
  border-color:var(--header-brand-navy) !important;
  color:var(--header-brand-navy) !important;
}

/* 3. 🔴 塗るのは主役の1つだけ。
      パソコンの「中古を探す」と、スマホの「探す」 */
header.top .header-nav > ul > li.header-brand-btn--search > a[href*="used"],
header.top .header-nav > ul > li.header-brand-btn--search > a.search-open{
  background:var(--header-brand-accent) !important;
  border-color:var(--header-brand-accent) !important;
  color:#ffffff !important;
}
header.top .header-nav > ul > li.header-brand-btn--search > a[href*="used"] span,
header.top .header-nav > ul > li.header-brand-btn--search > a[href*="used"] i,
header.top .header-nav > ul > li.header-brand-btn--search > a.search-open span,
header.top .header-nav > ul > li.header-brand-btn--search > a.search-open i{
  color:#ffffff !important;
}
header.top .header-nav > ul > li.header-brand-btn--search > a[href*="used"]:hover,
header.top .header-nav > ul > li.header-brand-btn--search > a.search-open:hover{
  background:var(--header-brand-accent-dark) !important;
  border-color:var(--header-brand-accent-dark) !important;
  color:#ffffff !important;
}

/* メガメニューを開いている間は、押している所が分かるように */
header.top .header-nav > ul > li.header-brand-btn--search > a[aria-expanded="true"]{
  background:var(--header-brand-accent-dark) !important;
  border-color:var(--header-brand-accent-dark) !important;
}
/* メガメニュー下端の線も、開いている所とそろえる */
.bicmega{ border-bottom-color:var(--header-brand-accent) !important; }

/* ── ハンバーガーの中も同じ考え方でそろえる ──
   🔴 ここにも同じ4pxの線があった。片方だけ直すと必ず食い違う。 */
.header-overlay-menu .overlay-featured-purchase > a{
  border-left-width:1px !important;
  border-left-color:var(--header-brand-navy) !important;
}
/* 探す＝主役。ここだけ赤で塗る */
.header-overlay-menu .overlay-featured-search > a{
  background:var(--header-brand-accent) !important;
  border-color:var(--header-brand-accent) !important;
  color:#ffffff !important;
}
.header-overlay-menu .overlay-featured-search > a:hover{
  background:var(--header-brand-accent-dark) !important;
  border-color:var(--header-brand-accent-dark) !important;
  color:#ffffff !important;
  box-shadow:0 3px 8px rgba(192,57,43,.20) !important;
}
/* ======= LISTRED_20260830　商品一覧の赤枠 ＋ 検索ボタンのクリック誘導 =======
   2026-08-30　もりもりさん指示

   ■ 決めごとは HDRACCENT_20260830 と同じ
     紺 ＝ 骨組み ／ 赤 ＝ 押してほしい所・値段・お得な印

   🔴 枠の赤は、わざと薄くしている（#DDB4AE）。
      一覧には50枚並ぶので、はっきりした赤にすると
      【枠のほうが値段より目立つ】。値段が主役でなくなる。
      はっきりさせたいときは、この1行を #C0392B に変えるだけ。
      カーソルを乗せた枚だけは、はっきりした赤になる。

   🔴 店舗ページの商品一覧は ul.list-product ではなく
      【ul.list-product-for-cat】。クラスが違うので、片方だけ書くと
      店舗ページだけ昔の見た目のまま残る（2026-08-30 に実際そうなった）。
      どちらにも当てること。

   🔴 スマホの絞り込みは class が違う（.mobile-filter-submit）ので、
      ここの指定は当たらない。当てたくなったら、そちらも書き足すこと。
   ========================================================= */

/* ── 商品カード ───────────────────────── */
ul.list-product > li,
ul.list-product-for-cat > li{
  border:1px solid #DDB4AE !important;   /* 🔴 赤を強くするならここ */
  border-radius:8px !important;
  background:#ffffff !important;
  overflow:hidden;
  transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
ul.list-product > li:hover,
ul.list-product-for-cat > li:hover{
  border-color:var(--header-brand-accent, #C0392B) !important;
  box-shadow:0 4px 14px rgba(192,57,43,.14) !important;
}
@media (prefers-reduced-motion:no-preference){
  ul.list-product > li:hover,
  ul.list-product-for-cat > li:hover{ transform:translateY(-2px); }
}

/* 値段＝一覧でいちばん見たい数字。ここを赤にする */
ul.list-product .product-summary .price,
ul.list-product-for-cat .product-summary .price{
  color:var(--header-brand-accent, #C0392B) !important;
  font-weight:800 !important;
}
ul.list-product .product-summary .price .price-including-tax,
ul.list-product-for-cat .product-summary .price .price-including-tax{
  color:#8b9298 !important;
  font-weight:500 !important;
}
/* 値下げ前の値段は、ぶつからないように灰色に */
ul.list-product .product-summary .price-original,
ul.list-product-for-cat .product-summary .price-original{
  color:#98a0a5 !important;
  text-decoration:line-through;
}

/* ◯％OFF の印 */
ul.list-product .product-image > span,
ul.list-product-for-cat .product-image > span{
  background:var(--header-brand-accent, #C0392B) !important;
  color:#ffffff !important;
  font-weight:800 !important;
  border-radius:4px !important;
}

/* 「残り◯点」＝ 早い者勝ち。ここも赤。ただし文字だけ、塗らない */
ul.list-product .product-footer > div:nth-child(2) span,
ul.list-product-for-cat .product-footer > div:nth-child(2) span{
  color:var(--header-brand-accent, #C0392B) !important;
  font-weight:700 !important;
}

/* ── 「商品を検索」ボタンのクリック誘導 ──
   🔴 控えめに。ゆっくり脈打つ光の輪と、たまに走る光。
   🔴 カーソルを乗せている間と、押している間は止める。
      押そうとしている人に、動くものを見せない。
   🔴 動きを減らす設定の方には、いっさい動かさない。 */
.aside-search .filter-submit{
  position:relative !important;
  overflow:hidden !important;
  isolation:isolate;
}
.aside-search .filter-submit > span{ position:relative; z-index:2; }

@media (prefers-reduced-motion:no-preference){
  .aside-search .filter-submit{
    animation:bicPulse 3.4s ease-out infinite;
  }
  /* 光がゆっくり横切る */
  .aside-search .filter-submit::after{
    content:"";
    position:absolute; top:0; bottom:0; left:-55%; width:38%;
    background:linear-gradient(100deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.42) 50%,
      rgba(255,255,255,0) 100%);
    transform:skewX(-18deg);
    z-index:1; pointer-events:none;
    animation:bicShine 3.4s ease-in-out infinite;
  }
  /* 押そうとしている間は止める */
  .aside-search .filter-submit:hover,
  .aside-search .filter-submit:focus-visible,
  .aside-search .filter-submit:active{ animation:none; }
  .aside-search .filter-submit:hover::after,
  .aside-search .filter-submit:focus-visible::after,
  .aside-search .filter-submit:active::after{ animation:none; opacity:0; }
}
@keyframes bicPulse{
  0%{   box-shadow:0 0 0 0 rgba(23,91,116,.40); }
  55%{  box-shadow:0 0 0 11px rgba(23,91,116,0); }
  100%{ box-shadow:0 0 0 0 rgba(23,91,116,0); }
}
@keyframes bicShine{
  0%{   left:-55%; }
  26%{  left:118%; }
  100%{ left:118%; }
}

/* 目でも押せると分かるように */
.aside-search .filter-submit{ cursor:pointer !important; }
.aside-search .filter-submit:focus-visible{
  outline:2px solid var(--header-brand-accent, #C0392B) !important;
  outline-offset:2px !important;
}
/* ======= STORECARD_20260830　トップの「店舗で探す」カードに動きを付ける =======
   2026-08-30　もりもりさん指示「カーソル当てると動きが欲しい」

   🔴 商品カード（LISTRED_20260830）と同じ考え方にそろえている。
      浮く量・時間・影の赤みを別々の値にしないこと。ばらばらだと安っぽく見える。

   🔴 枠と角丸は足していない。いまのカードは四角で影だけなので、
      形まで変えると「動きが欲しい」以上のことをしてしまう。

   🔴 動きを減らす設定の方には、浮かせない（prefers-reduced-motion）。
   ========================================================= */
main.top .wrap-store-card-inner.wrap-store-card-info{
  transition:box-shadow .16s ease, transform .16s ease;
}
main.top .wrap-store-card-inner.wrap-store-card-info:hover{
  box-shadow:0 8px 20px rgba(192,57,43,.18) !important;
}
@media (prefers-reduced-motion:no-preference){
  main.top .wrap-store-card-inner.wrap-store-card-info:hover{ transform:translateY(-3px); }
}
/* ======= DRAWERNAV_20260830　スマホのドロワー「メーカー・店舗で探す」 =======
   2026-08-30　もりもりさん指示

   🔴 縦に積まず、横に折り返す。カテゴリ一覧が19件あるので、
      同じ形で足すとスクロールが倍になる。

   🔴 スマホなので :hover ではなく :active（指を離すまでの反応）で見せる。
      スマホに :hover を書くと、タップ後に色が残り続ける。
   ========================================================= */
.header-overlay-search .drawer-chip-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 20px;
}
.header-overlay-search .drawer-chip-list > a{
  display:inline-flex;
  align-items:center;
  padding:9px 13px;
  border:1px solid #d8dde5;
  border-radius:999px;
  background:#fff;
  color:#175b74;
  font-size:13px;
  font-weight:700;
  line-height:1.2;
  text-decoration:none;
  white-space:nowrap;
}
.header-overlay-search .drawer-chip-list > a:active{
  background:#eef4f6;
  border-color:#175b74;
}

/* ======= HDRLIGHT_20260830　ヘッダーとサイドバーの文字を軽くする =======
   2026-08-30　もりもりさん指示

   ■ 直したこと
     1. 太字をやめて、ふつうの太さに
     2. ワンサイズ下げる（13px → 12px）
     3. 文字色を、トップページのカテゴリーアイコン下の文字と同じ #000 に
     4. 赤の塗りつぶし → 赤の枠線に（塗るのをやめる）
     5. スマホの「買取サービス」と「探す」を同じ大きさに

   🔴 HDRACCENT_20260830 の【あと】に置くこと。同じ場所を上書きしている。
      前に置くと効かない（CSSは後に書いたほうが勝つ）。

   🔴 赤は枠線と文字だけ。面で塗らない。
      塗りが並ぶと「重たい」と言われる（8/30 の指摘そのもの）。
   ========================================================= */

/* ── 1〜3. 文字を軽く、小さく、黒に ── */
header.top .header-nav > ul > li.header-brand-btn > a,
header.top .header-nav > ul > li.header-brand-btn > a span,
header.top .header-nav > ul > li.header-brand-btn > a i{
  font-weight:400 !important;
  font-size:12px !important;
  color:#000 !important;
}

/* ── 4. 赤の塗りつぶしをやめ、赤の枠線に ──
      対象は パソコンの「中古を探す」と、スマホの「探す」 */
header.top .header-nav > ul > li.header-brand-btn--search > a[href*="used"],
header.top .header-nav > ul > li.header-brand-btn--search > a.search-open{
  background:#ffffff !important;
  border-color:var(--header-brand-accent) !important;
  color:#000 !important;
}
header.top .header-nav > ul > li.header-brand-btn--search > a[href*="used"] span,
header.top .header-nav > ul > li.header-brand-btn--search > a[href*="used"] i,
header.top .header-nav > ul > li.header-brand-btn--search > a.search-open span,
header.top .header-nav > ul > li.header-brand-btn--search > a.search-open i{
  color:#000 !important;
}
header.top .header-nav > ul > li.header-brand-btn--search > a[href*="used"]:hover,
header.top .header-nav > ul > li.header-brand-btn--search > a.search-open:hover{
  background:#fdf3f2 !important;
  border-color:var(--header-brand-accent) !important;
  color:#000 !important;
}
/* メガメニューを開いている間も、塗らずに枠を濃くするだけ */
header.top .header-nav > ul > li.header-brand-btn--search > a[aria-expanded="true"]{
  background:#fdf3f2 !important;
  border-color:var(--header-brand-accent-dark) !important;
}

/* ── 5. スマホ：買取サービスと探すを同じ大きさに ──
      「買取サービス」は <a> に直接、「探す」は <span> に入っているため、
      片方だけ指定すると大きさが食い違う。両方に同じ値を書く。 */
@media (max-width:991.98px){
  header.top .header-nav > ul > li.header-brand-btn > a,
  header.top .header-nav > ul > li.header-brand-btn > a span,
  header.top .header-nav > ul > li.header-brand-btn > a i{
    font-size:12px !important;
    font-weight:400 !important;
    letter-spacing:0 !important;
  }
}

/* ── 左サイドバーも同じ考え方でそろえる ── */
.aside-search .section-title,
.aside-search .filter-option label,
.aside-search .drawer-section-heading{
  font-weight:400 !important;
  color:#000 !important;
}
.aside-search .section-title{ font-size:13px !important; }
.aside-search .filter-option label{ font-size:12px !important; }

/* ── ハンバーガーの中の「中古を探す」も、塗りから枠へ ──
   🔴 HTML に style="…!important" が直書きされているので、
      CSSだけでは勝てない。HTML側（共通ヘッダー）も直してある。
      ここは、将来その直書きが外れたときに受け止めるために残す。 */
.header-overlay-menu .overlay-featured-search > a{
  background:#ffffff !important;
  border:1px solid var(--header-brand-accent) !important;
  color:#000 !important;
  font-weight:400 !important;
}

/* ======= BICMEGABK_20260830　メガメニューの後ろに、閉じるための覆いを敷く =======
   2026-08-30　もりもりさん指示「背景をクリックしたら閉じるように」

   🔴 もともと「パネルの外をクリックしたら閉じる」処理は入っていた。
      効かなかったのではなく、押せる背景が無かった。
      後ろは商品一覧なので、閉じようとして押すと商品ページへ飛んでしまう。

   🔴 色を付けない（透明）。うっすら黒くすると、
      背後の商品が見えなくなって「戻ってきた感じ」が薄れる。
   ========================================================= */
.bicmega-backdrop{
  display:none;
  position:fixed;
  inset:0;
  z-index:8999;          /* パネルは 9000。そのすぐ下 */
  background:transparent;
}
.bicmega-backdrop.is-open{ display:block; }

/* ======= RICHTITLE_20260830　トップの特集：商品名を2行にする =======
   2026-08-30　もりもりさん指示

   ■ 直したこと
     1. 太字をやめて、ふつうの太さに
     2. ワンサイズ下げる（13px → 12px）
     3. 2行で表示する

   🔴 元から height:2.5em（2行ぶん）は指定されていた。
      それでも1行で切れていたのは、行の高さが大きく、2行目が
      その高さに収まらなかったため。高さで抑えるのをやめ、
      【何行までか】を直接指定する（-webkit-line-clamp）。

   🔴 min-height で2行ぶんの場所を先に取る。
      取らないと、名前が短い商品だけカードが縮んで、
      値段の位置が横でそろわなくなる。
   ========================================================= */
.list-product-rich span.title{
  font-weight:400 !important;
  font-size:12px !important;
  line-height:1.45 !important;
  display:-webkit-box !important;
  -webkit-box-orient:vertical !important;
  -webkit-line-clamp:2 !important;
  line-clamp:2 !important;
  overflow:hidden !important;
  white-space:normal !important;
  height:auto !important;
  min-height:2.9em !important;
  margin-bottom:8px !important;
}

/* ======= PURCHASEKV_20260830　買取ページのファーストビュー =======
   ■ 何をしたか
     写真を「大型倉庫（俯瞰）」に差し替え、全面をうすく暗くして
     見出しを白にした。

   ■ なぜ暗くするのか
     いままでの写真は真っ白に近い空だったので、濃い青緑の見出し
     （#00637B）がそのまま読めていた。倉庫の写真は白い什器と
     明るい床が多く、同じ色ではほとんど沈む。
     全面に敷いたのは、この1枚が3通りに切られるため。
       ・パソコン　　　→ ほぼ全部見える
       ・スマートフォン → まん中の約27%しか見えない（高さが 80vh 固定のため）
       ・検索結果　　　→ 中央の正方形だけ
     【どこを切られても文字が読める】のは全面に敷く形だけだった。

   🔴🔴 暗幕は ::before で敷かないこと。背景に重ねること。
      ::before で敷くと、前に出すために子要素へ position:relative が要る。
      ところが .flex-list（買取査定無料・SBTi の丸バッジ2枚）は
      purchase-2503.min.css で position:absolute; bottom:50px と
      【左下に置かれている】。relative にすると流れの中に戻って上へ跳び、
      白い丸ボタンの文字に重なる。2026-08-30 に実際にそうなった。
      背景に linear-gradient を重ねれば、位置の指定を一切さわらずに済む。

   🔴 見出しは画像に焼き込まない。ページのHTMLの文字のまま残す。
      検索に効くのは文字のほうなので、画像にしてはいけない。

   🔴 買取ページ本体のCSS（purchase-2503.min.css）には触らない。
      あちらは <main> の直前で読み込まれ、この打ち消しCSSより【後】に来る。
      だから !important が要る。外すと効かない。

   🔴 元の kv-1x.webp / kv-2x.webp は消していない。
      この節を丸ごと消せば、そのまま元の空の写真に戻る。
   ========================================================= */
.purchase-2503 .wrap-mv-area2{
  background-image:
    linear-gradient(rgba(8,20,38,.50), rgba(8,20,38,.50)),
    url("https://src.bic-reyouth.com/onlinestore/images/pages/purchase/kv-b-1x.webp") !important;
  background-image:
    linear-gradient(rgba(8,20,38,.50), rgba(8,20,38,.50)),
    -webkit-image-set(
      url("https://src.bic-reyouth.com/onlinestore/images/pages/purchase/kv-b-1x.webp") 1x,
      url("https://src.bic-reyouth.com/onlinestore/images/pages/purchase/kv-b-2x.webp") 2x) !important;
  background-image:
    linear-gradient(rgba(8,20,38,.50), rgba(8,20,38,.50)),
    image-set(
      url("https://src.bic-reyouth.com/onlinestore/images/pages/purchase/kv-b-1x.webp") 1x,
      url("https://src.bic-reyouth.com/onlinestore/images/pages/purchase/kv-b-2x.webp") 2x) !important;
}

/* 見出しを白に。もとの #00637B は明るい空の写真の上でしか読めない */
/* 🔴 SEOH1_20260831 で h2 → h1 に変えた。h2 も残してあるのは、
      戻したときに色が効かなくなるのを防ぐため */
.purchase-2503 .wrap-mv-area2 h1,
.purchase-2503 .wrap-mv-area2 h2{
  color:#fff !important;
}

/* ======= PURCHASEFIX_20260830　買取ページ：スマホの追随ボタンを消す =======
   ■ 何をしたか
     画面の下に貼り付いてくる「お気軽にお問い合わせください」の
     カード（.wrap-contact-area-fixed）を、スマホでは出さないようにした。

   ■ なぜ
     もりもりさん「邪魔で画面が良く見えない」（2026-08-30）。
     スマホでは画面の3分の1近くを覆い、ファーストビューの写真も
     商品の写真も隠れていた。

   🔴 問い合わせの入口は消えていない。
      ページの中ほどにある .wrap-contact-area（追随しないほう）が
      そのまま残っている。消したのは【貼り付いてくるほう】だけ。

   🔴 横向きのときは、買取ページ側のCSSが既に消している
      （max-width:932px かつ landscape）。ここで足したのは縦向きぶん。
      区切りの 767px は買取ページ側のスマホ用の指定に合わせてある。
   ========================================================= */
@media screen and (max-width: 767px){
  .purchase-2503 .wrap-contact-area-fixed{
    display:none !important;
  }
}

/* ======= NEWS_20260830　お知らせ（一覧・個別）の見え方 =======
   対象は /view/news/list と /view/news/<日時>。
   どちらも MakeShop の標準機能で【もともと動いていた】ページ。

   ■ なぜ直すか
     一覧のタイトルが【横に重なって読めない】状態だった。
     9件すべて出ているのに、誰も読めない。

   🔴 このページは、もともとあるものを直しているだけ。
      新しいページは作っていない。URLも変えていない。

   🔴 一覧に出せるのは【日付とタイトルだけ】。
      MakeShop の一覧が本文を出さないので、画像や抜粋は出せない。
      画像はお知らせの【内容】の中に入れる（個別ページで出る）。

   🔴 見出しの「お役立ち情報一覧」はここでは変えていない。
      CSSで見た目だけ変えると、検索エンジンが読む文字と食い違う。
      名前は MakeShop のテンプレート側で直すこと。
   ========================================================= */

/* ---- 一覧（お知らせ一覧・個別ページ下部の「他のお役立ち情報」） ---- */
.article-list-column .area-list-column{
  margin-top:18px !important;
}
.article-list-column ul.list-column{
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;
  border-top:1px solid #E2E8EA !important;
}
.article-list-column ul.list-column > li{
  display:block !important;
  float:none !important;
  width:auto !important;
  max-width:none !important;
  height:auto !important;
  position:static !important;
  margin:0 !important;
  padding:0 !important;
  border-bottom:1px solid #E2E8EA !important;
}
.article-list-column ul.list-column > li > a{
  display:grid !important;
  grid-template-columns:104px 72px minmax(0,1fr);
  align-items:baseline;
  gap:4px 16px;
  width:auto !important;
  height:auto !important;
  position:static !important;
  padding:17px 10px !important;
  margin:0 !important;
  text-decoration:none !important;
  transition:background .15s ease;
}
.article-list-column ul.list-column > li > a:hover{
  background:#F4F8F9 !important;
}
.article-list-column ul.list-column .date{
  grid-column:1; grid-row:1;
  display:block !important;
  position:static !important;
  font-size:13px !important;
  line-height:1.7 !important;
  color:#6B777D !important;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.article-list-column ul.list-column .bic-news-cat{
  grid-column:2; grid-row:1;
  justify-self:start;
}
.article-list-column ul.list-column .title{
  grid-column:3; grid-row:1;
  display:block !important;
  position:static !important;
  font-size:16px !important;
  font-weight:700 !important;
  line-height:1.65 !important;
  color:#1F2A30 !important;
}
.article-list-column ul.list-column > li > a:hover .title{
  color:#175B74 !important;
  text-decoration:underline;
}
/* 区分が書かれていない記事は、タイトルをバッジの位置から始める */
.article-list-column ul.list-column > li:not([data-cat]) .title,
.article-list-column ul.list-column > li[data-cat=""] .title{
  grid-column:2 / -1;
}

@media screen and (max-width:767px){
  .article-list-column ul.list-column > li > a{
    grid-template-columns:auto minmax(0,1fr) !important;
    gap:7px 10px;
    padding:15px 4px !important;
  }
  .article-list-column ul.list-column .date{ grid-column:1; grid-row:1; }
  .article-list-column ul.list-column .bic-news-cat{ grid-column:2; grid-row:1; justify-self:start; }
  .article-list-column ul.list-column .title{ grid-column:1 / -1; grid-row:2; font-size:15px !important; }
  .article-list-column ul.list-column > li:not([data-cat]) .title,
  .article-list-column ul.list-column > li[data-cat=""] .title{ grid-column:1 / -1; }
}

/* ---- 区分のバッジ ---- */
.bic-news-cat{
  display:inline-block;
  font-size:11.5px;
  font-weight:700;
  line-height:1.6;
  letter-spacing:.02em;
  white-space:nowrap;
  padding:1px 10px;
  border-radius:99px;
  border:1px solid #C9DCE2;
  background:#E8F1F4;
  color:#175B74;
}
/* 🔴 色を増やしすぎない。目立たせるのは「重要」だけ */
.bic-news-cat.c-important{
  border-color:#E0B3B3;
  background:#FBF0F0;
  color:#B02020;
}

/* ---- 絞り込みのタブ ---- */
.bic-news-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:20px 0 0;
}
.bic-news-tab{
  appearance:none;
  font-family:inherit;
  font-size:13px;
  font-weight:700;
  line-height:1.6;
  padding:5px 14px;
  border-radius:99px;
  border:1px solid #D8DDE5;
  background:#fff;
  color:#6B777D;
  cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.bic-news-tab:hover{ border-color:#175B74; color:#175B74; }
.bic-news-tab.is-on{ background:#175B74; border-color:#175B74; color:#fff; }

/* ---- 個別ページ ---- */
/* 🔴 画像が登録されていないと、件名の文字だけが枠に出てタイトルが二重になる。
      JS が画像を見つけたときだけ has-img を付けるので、無いときは隠す */
.artilce-column .column-image,
.article-column .column-image{
  display:none !important;
}
.artilce-column .column-image.has-img,
.article-column .column-image.has-img{
  display:block !important;
  margin:0 0 22px !important;
}
.artilce-column .column-image.has-img img,
.article-column .column-image.has-img img{
  max-width:100% !important;
  height:auto !important;
  border-radius:8px;
}
.artilce-column .news-date,
.article-column .news-date{
  font-size:13px !important;
  color:#6B777D !important;
  margin:0 0 22px !important;
}
.artilce-column .column-content,
.article-column .column-content{
  font-size:15.5px !important;
  line-height:2 !important;
  color:#333 !important;
}
/* 🔴 本文に貼った画像がはみ出さないようにする。お知らせは画像1枚を想定 */
.artilce-column .column-content img,
.article-column .column-content img{
  max-width:100% !important;
  height:auto !important;
  border-radius:8px;
  margin:18px 0;
}
.artilce-column .column-content a,
.article-column .column-content a{
  color:#175B74 !important;
  text-decoration:underline;
}

/* ---- フッターのお知らせ：一覧への入口と、区分のバッジ（NEWSLINK_20260830） ---- */
/* 🔴 一覧（/view/news/list）はもともと動いていたのに、どこからもリンクが無く、
      URLを知っている人しか辿り着けなかった。ここが唯一の入口になる */
#br-latest-news .br-footer-news-more{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-top:16px;
  font-size:13.5px;
  font-weight:700;
  color:#175B74;
  text-decoration:none;
  border-bottom:1px solid rgba(23,91,116,.35);
  padding-bottom:2px;
  transition:border-color .15s ease;
}
#br-latest-news .br-footer-news-more:hover{
  border-bottom-color:#175B74;
}
#br-latest-news .br-footer-news-more span{
  font-size:12px;
}
/* フッターの見出しの中に入るバッジ。日付とタイトルの間に置く */
#br-latest-news .bic-news-cat{
  margin-right:8px;
  vertical-align:1px;
}

/* ---- お知らせ一覧の説明文（NEWSLEAD_20260830） ---- */
.article-list-column .bic-news-lead{
  margin:10px 0 0 !important;
  font-size:14px !important;
  line-height:1.9 !important;
  color:#6B777D !important;
  max-width:820px;
}
.article-list-column .bic-news-empty{
  margin:22px 0 0 !important;
  font-size:14px !important;
  color:#6B777D !important;
}

/* ---- トップページのお知らせ：一覧への入口（NEWSLINK_20260830） ---- */
/* 🔴 見た目はフッターのリンクとそろえる。別のものに見せない */
.news-area .bic-news-more{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-top:16px;
  font-size:13.5px;
  font-weight:700;
  color:#175B74;
  text-decoration:none;
  border-bottom:1px solid rgba(23,91,116,.35);
  padding-bottom:2px;
  transition:border-color .15s ease;
}
.news-area .bic-news-more:hover{ border-bottom-color:#175B74; }
.news-area .bic-news-more span{ font-size:12px; }
.news-area .news-area-list .bic-news-cat{
  margin-right:8px;
  vertical-align:1px;
  /* 🔴 幅をそろえないと、区分の文字数でタイトルの左端がずれる */
  min-width:64px;
  text-align:center;
}

/* ======= HDRSP_20260831　スマホのヘッダーを小さく、幅をそろえる ＋ 赤を塗りに戻す =======
   2026-08-31　もりもりさん指示

   🔴 HDRLIGHT_20260830 の【あと】に置くこと。あそこで赤を「枠線」にしたのを、
      ここで「塗り」に戻している。前に置くと効かない。

   ■ 直したこと
     1. スマホの「探す」→「商品を探す」（文言は共通ヘッダーのHTML側）
     2. スマホのボタンの高さを下げた（36px → 30px）。ロゴより大きく見えていたため
     3. 「買取サービス」と「商品を探す」の横幅を、同じ値で固定した
     4. 赤を 枠線 → 塗りつぶし・白文字 に戻した（PCの「中古を探す」も同じ）

   🔴 文字の太さ（400）と大きさ（12px）は HDRLIGHT のまま。戻していない。
   ========================================================= */

/* ── 4. 赤は塗りつぶし・白文字に戻す ──
      パソコンの「中古を探す」と、スマホの「商品を探す」 */
header.top .header-nav > ul > li.header-brand-btn--search > a[href*="used"],
header.top .header-nav > ul > li.header-brand-btn--search > a.search-open{
  background:var(--header-brand-accent) !important;
  border-color:var(--header-brand-accent) !important;
  color:#ffffff !important;
}
header.top .header-nav > ul > li.header-brand-btn--search > a[href*="used"] span,
header.top .header-nav > ul > li.header-brand-btn--search > a[href*="used"] i,
header.top .header-nav > ul > li.header-brand-btn--search > a.search-open span,
header.top .header-nav > ul > li.header-brand-btn--search > a.search-open i{
  color:#ffffff !important;
}
header.top .header-nav > ul > li.header-brand-btn--search > a[href*="used"]:hover,
header.top .header-nav > ul > li.header-brand-btn--search > a.search-open:hover{
  background:var(--header-brand-accent-dark) !important;
  border-color:var(--header-brand-accent-dark) !important;
  color:#ffffff !important;
}
header.top .header-nav > ul > li.header-brand-btn--search > a[aria-expanded="true"]{
  background:var(--header-brand-accent-dark) !important;
  border-color:var(--header-brand-accent-dark) !important;
  color:#ffffff !important;
}

/* ── 2〜3. スマホだけ：高さを下げ、2つのボタンの幅をそろえる ──
   🔴 幅は「買取サービス」（6文字）が入る値で決めている。
      文言を変えるときは、この値も見直すこと。
   🔴 min-width と max-width の両方を書く。片方だけだと、
      中の文字数で幅が動いて「全く同じ」にならない。 */
@media (max-width:991.98px){
  header.top .header-nav > ul > li.header-brand-btn > a{
    height:30px !important;
    min-height:30px !important;
    padding:0 6px !important;
  }
  header.top .header-nav > ul > li.header-brand-btn--purchase > a,
  header.top .header-nav > ul > li.header-brand-btn--search > a{
    width:96px !important;
    min-width:96px !important;
    max-width:96px !important;
    white-space:nowrap !important;
    overflow:hidden !important;
  }
  /* 虫めがねのアイコンは、幅がそろわなくなるので出さない */
  header.top .header-nav > ul > li.header-brand-btn--search > a.search-open i{
    display:none !important;
  }
  header.top .header-nav > ul > li.header-brand-btn > a,
  header.top .header-nav > ul > li.header-brand-btn > a span{
    font-size:11px !important;
  }
}

/* ============================================================
   ONEH1_20260831　サイト名の帯を h1 から p にしたぶんの見た目
   ------------------------------------------------------------
   共通ヘッダーが h1 を2本（PC用・スマホ用）出していたため、
   どのページも h1 が3本あり、ページ本来の見出しが埋もれていた。
   見出しではなくサイト名の帯なので p に変えた。
   もとの CSS は h1.site-title-01 / h1.slide-link とタグ付きで
   書かれているので、同じ見た目を p にも当て直す。
   🔴 p は既定で上下に余白が付く。margin:0 を必ず書くこと
   ============================================================ */

/* スマホ用の帯（style-v3.min.css の .swiper-slide>h1 と同じ） */
.swiper-slide > p.slide-link{
  display:block;
  color:#fff;
  font-size:12px;
  font-weight:normal;
  margin:0;
  text-decoration:none;
  text-align:center;
  line-height:28px;
}
/* 1行に収める（style-v3.min.css の header .site-title h1.slide-link と同じ） */
header .site-title p.slide-link{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:1;
  overflow:hidden;
  margin:0;
}
/* PC用の帯（style-lg.min.css の h1.site-title-01 と同じ。992px 以上） */
@media screen and (min-width:992px){
  header .site-title .wrap-site-title-inner p.site-title-01{
    margin:0;
    /* 🔴 h1 は line-height 1.2、p は本文と同じ 1.5。
       これを書かないと帯の高さが 16px→20px に増える（実測） */
    line-height:1.2;
    color:#fff;
    font-size:13px;
    font-weight:normal;
    max-width:60%;
    width:100%;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:1;
    overflow:hidden;
  }
}
/* 992px 未満では PC用の帯は d-none で隠れているが、
   念のため余白だけ消しておく */
header .site-title p.site-title-01{ margin:0; line-height:1.2; }


/* ======= ACTIVEFILTERS_20260906　「適用中の条件」を選択中と分かるように =======
   2026-09-06 もりもりさん指示
   「適用中の条件を点滅させて、すべてクリアも点滅させて、これを選択していますよと
   　わかりやすくしてほしい。スクロールの下にも表示されていたら良い」

   🔴 箱と CSS は検索結果ページのテンプレート内の <style> にある（#active-filters-container）。
      こちらは共通ヘッダーから読まれるので !important で上書きする。
   🔴 文字どおりの点滅は目に痛く freee 風から外れるので、紺の脈動（bicPulse と同じ）にした。
      強さは 3.4s の周期・11px の広がりで、商品検索ボタンと同じ値。
   🔴 スクロールしても見失わないよう sticky で画面上部に残す。
      効かないときは親に overflow-x:auto が付いている（CLAUDE.md「sticky が流れる原因」）。
   ========================================================= */
#active-filters-container{
  position:sticky !important;
  top:8px !important;
  z-index:20 !important;
  background:#f7fafc !important;
  border:1px solid #cfdde4 !important;
  border-left:4px solid #175b74 !important;
  animation:bicPulse 3.4s ease-out infinite;
}
#active-filters-container .active-filters-label{ color:#175b74 !important; }
#clear-all-filters,
#active-filters-container .btn-clear-all{
  background:#ffffff !important;
  color:#175b74 !important;
  border:1px solid #175b74 !important;
  border-radius:50px !important;
  animation:bicPulse 3.4s ease-out infinite;
  cursor:pointer;
}
#clear-all-filters:hover,
#active-filters-container .btn-clear-all:hover{
  background:#175b74 !important;
  color:#ffffff !important;
  animation:none;
}
@media (prefers-reduced-motion: reduce){
  #active-filters-container,
  #clear-all-filters,
  #active-filters-container .btn-clear-all{ animation:none !important; }
}

/* ======= SPFILTERFAB_20260906　スマホ右下の「絞り込み」丸ボタンを戻す =======
   2026-09-06 もりもりさん「以前○ボタンが出ていて、クリックすると詳細な絞り込みが
   　できるようになっていたのが、いつのまにか出てこない」

   🔴 要素は本体テンプレートに残っている：
        <a href="#" id="mobile-filter-trigger" class="d-md-none">絞り込み</a>
      本体 script.js がこれをクリックで拾い、絞り込みのドロワーを開く（そこは生きている）。
   🔴 右下に固定して丸くする CSS が、本体 CSS にもテンプレートの <style> にも
      このリポジトリの履歴にも無い。以前は本体側にあって消えたとみられる。
      だからこちらで持つ。d-md-none が付いているのでスマホだけに出る。
   ========================================================= */
#mobile-filter-trigger{
  position:fixed !important;
  right:16px !important;
  bottom:20px !important;
  width:60px !important;
  height:60px !important;
  border-radius:50% !important;
  background:#175b74 !important;
  color:#ffffff !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:2px !important;
  font-size:10px !important;
  line-height:1 !important;
  text-decoration:none !important;
  box-shadow:0 6px 16px rgba(16,40,52,.28) !important;
  z-index:1050 !important;
}
#mobile-filter-trigger i{ font-size:18px !important; margin:0 !important; }
#mobile-filter-trigger:active{ transform:scale(.96); }

/* ======= HDRFIT_20260914　ヘッダーのボタンが下の線に重なる ＋ ボタンを細く =======
   2026-09-14　もりもりさん指摘：
   「買取サービス」「商品を探す」の枠が、ヘッダー下の線に重なっている。
   ボタンの縦幅がそもそも大きいので、プレミアム保証・新品を探すも含めて細くしてよい。

   ■ 原因（実測。ヘッドレス Chrome・幅390px）
     スマホの header-inner は本体CSSで【高さ 78px 固定】（padding 6px / 8.5px）。
     その中に ロゴ（上段）＋ボタン（下段）を縦に入れている。
     2026-09-13 の新ロゴは <img width="150" height="42"> で置いたが、本体CSSが
     スマホでは width:130px に縮めるため、高さだけ属性の 42px が残り、
     ロゴの箱が 130×42 になっていた（絵は 130×36 で中央に描かれ、上下に透明の余白）。
     旧ロゴ（213×48）は 130×29 だったので、ロゴの箱が 13px 高くなり、
     下段のボタンがそのぶん押し下げられて線に 2.5px（カート・メニューは 5px）重なった。

   ■ 直したこと
     1. スマホ：ロゴの img を height:auto に（130×36）。絵の大きさは変わらない
     2. スマホ：ボタン 30px → 28px、カート・メニューの当たり判定 35px → 30px
        → 下段が 30px に収まり、線の上に 6px 空く
     3. PC   ：ボタン 40px → 34px（プレミアム保証・買取サービス・中古を探す・新品を探す）。
        カート・メニュー（35px）とほぼ同じ高さになる

   🔴 HDRSP_20260831 の【あと】に置くこと。同じ場所（スマホのボタンの高さ）を上書きしている。
   🔴 PC のロゴは触っていない（200×42 の箱のまま。PC の header-inner は高さ自動なので重ならない）
   🔴 スマホの header-inner の 78px は変えない。ヘッダーは position:fixed で、
      その下の本文の始まり（106px）がこの高さに合わせてある。広げると本文がずれる
   ========================================================= */

/* PC：4つのボタンを 40px → 34px に */
@media screen and (min-width:992px){
  header.top .header-nav > ul > li.header-brand-btn > a{
    height:34px !important;
    min-height:34px !important;
  }
}

/* スマホ・タブレット（991px以下） */
@media (max-width:991.98px){
  /* 1. ロゴの箱を絵の大きさに戻す（height 属性の 42px を打ち消す） */
  header.top a.header-logo img{
    height:auto !important;
  }
  /* 2. ボタン 30px → 28px */
  header.top .header-nav > ul > li.header-brand-btn > a{
    height:28px !important;
    min-height:28px !important;
  }
  /* 2. カート・メニューは 35px → 30px（下段の高さはこれで決まる） */
  header.top .header-nav > ul > li.category.small > a{
    width:30px !important;
    height:30px !important;
  }
}

/* =========================================================
   BICNAV_20260919　スマホの「探す」動線（bic-nav.js の見た目）
   提案書：docs/提案書_スマホ検索動線_20260919.md の 16章
   ■ 色は紺 #175b74 と枠 #d8dde5 だけ。面で塗るのは「探す」を開いている間の1か所。
   ■ 幅 991px 以下だけ（ヘッダーの d-lg-none と同じ境目）。⑤の並べ表示は幅に関係なし。
   ========================================================= */
.bic-hide{display:none !important;}

@media screen and (max-width: 991.98px){
  /* --- ヘッダー：三本アイコンは下のバーへ移したので隠す（HTML は残す＝リンクは生HTMLに残る） --- */
  html.bic-nav-on header.top .header-nav > ul > li.nav-icon{display:none !important;}
  /* キーワード欄（「商品を探す」ボタンを置き換えた li） */
  html.bic-nav-on header.top .header-nav > ul > li.bic-kw-li{
    flex:1 1 auto !important; min-width:0 !important; margin:0 6px !important;
  }
  .bic-kw{display:flex !important; align-items:stretch; width:100%; height:34px;
    border:1px solid #175b74; border-radius:17px; background:#fff; overflow:hidden;}
  .bic-kw__in{flex:1 1 auto; min-width:0; border:0 !important; outline:0; padding:0 0 0 12px !important;
    font-size:16px !important; line-height:32px; background:transparent !important;
    color:#1E2B4D; -webkit-appearance:none; appearance:none; box-shadow:none !important; height:32px !important; margin:0 !important;}
  /* 文字の大きさ 16px は iOS の拡大よけ。placeholder だけ小さく */
  .bic-kw__in::placeholder{color:#6B7A8D; font-size:12px;}
  .bic-kw__in::-webkit-search-cancel-button{-webkit-appearance:none;}
  .bic-kw__go{flex:0 0 40px; border:0; background:#175b74; color:#fff; font-size:14px; padding:0; margin:0; cursor:pointer;}
  .bic-kw__go i{color:#fff !important;}

  /* --- サジェスト（ヘッダーの直下・幅いっぱい） --- */
  .bic-sug{position:fixed; left:0; right:0; z-index:4600; background:#fff; border-bottom:1px solid #d8dde5;
    box-shadow:0 8px 20px rgba(16,40,52,.14); max-height:calc(100dvh - 120px); overflow-y:auto; padding:4px 0 8px;}
  .bic-sug[hidden]{display:none !important;}
  .bic-sug__h{font-size:11px; color:#6B7A8D; padding:8px 14px 2px;}
  .bic-sug__list, .bic-sug__items{list-style:none; margin:0; padding:0;}
  .bic-sug__list li a{display:flex; align-items:center; gap:6px; padding:9px 14px; color:#1E2B4D; font-size:14px; text-decoration:none; border-bottom:1px solid #f0f2f5;}
  .bic-sug__list li a small{color:#6B7A8D; font-size:11px; margin-right:2px;}
  .bic-sug__list li a i{margin-left:auto; color:#9fbcc6; font-size:11px;}
  .bic-sug__items li a{display:flex; align-items:center; gap:10px; padding:7px 14px; color:#1E2B4D; text-decoration:none; border-bottom:1px solid #f0f2f5;}
  .bic-sug__items img{width:44px; height:44px; object-fit:cover; border:1px solid #d8dde5; border-radius:4px; flex:0 0 44px; background:#f7f8fa;}
  .bic-sug__t{flex:1 1 auto; min-width:0; font-size:12px; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
  .bic-sug__p{flex:0 0 auto; font-size:13px; font-weight:700; color:#1E2B4D; text-align:right;}
  .bic-sug__p em{display:block; font-style:normal; font-weight:400; font-size:10px; color:#6B7A8D;}
  .bic-sug__all{display:flex; align-items:center; justify-content:center; gap:8px; margin:8px 14px 0; padding:10px; border:1px solid #175b74; border-radius:8px;
    color:#175b74; font-size:13px; text-decoration:none; background:#fff;}
  .bic-sug__all b{font-weight:700;}

  /* --- 画面の下の固定バー --- */
  body.bic-has-bar{padding-bottom:calc(60px + env(safe-area-inset-bottom, 0px)) !important;}
  .bic-bar{position:fixed; left:0; right:0; bottom:0; z-index:3500; display:flex; background:#fff; border-top:1px solid #d8dde5;
    box-shadow:0 -4px 14px rgba(16,40,52,.08); padding-bottom:env(safe-area-inset-bottom, 0px);}
  .bic-bar__btn{flex:1 1 0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; height:56px;
    border:0; background:transparent; color:#175b74; text-decoration:none; font-size:10px; line-height:1; padding:0; cursor:pointer; -webkit-tap-highlight-color:transparent;}
  .bic-bar__btn i{font-size:19px; color:#175b74;}
  .bic-bar__btn span{color:#1E2B4D;}
  .bic-bar__btn--find{position:relative;}
  .bic-bar__btn--find[aria-expanded="true"]{background:#175b74;}
  .bic-bar__btn--find[aria-expanded="true"] i, .bic-bar__btn--find[aria-expanded="true"] span{color:#fff;}
  /* 🔴 既存のドロワー（絞り込み）と旧メニューは header の中にあり、z-index が header の 1000 に閉じ込められている。
     バー（3500）はその上に出て「商品を検索」ボタンを隠すので、開いている間はバーを消す */
  body.header-open-search .bic-bar, body.header-open-menu .bic-bar{display:none !important;}
  /* 絞り込みモードのドロワーから、キーワード欄（ヘッダーに移した）とメーカー・店舗のチップ（パネルに移した）を外す。
     残るのは条件（新品・中古／カテゴリ／色／サイズ／価格／ランク／在庫）だけ＝「条件で絞り込む」の名のとおり */
  html.bic-nav-on body.drawer-filter-mode .header-overlay-search .search-box,
  html.bic-nav-on body.drawer-filter-mode .header-overlay-search .drawer-chip-list{display:none !important;}
  /* 🔴 右下の丸い「絞り込み」は、一覧のあるページ（検索結果・カテゴリー）だけ。
     bic-mega.js は絞り込み欄のあるページ全部に足すので、カートページにも出ていた（2026-09-19 もりもりさん「出たり出なかったり」）。
     下のバーに「探す → 条件で絞り込む」があるので、それ以外のページでは隠す */
  html.bic-nav-on body:not(.page-type-search):not(.page-type-category) #mobile-filter-trigger{display:none !important;}
  /* 元からある固定物を、バーの上へ寄せる */
  body.bic-has-bar .scroll-top{display:none !important;}
  body.bic-has-bar #mobile-filter-trigger{bottom:calc(70px + env(safe-area-inset-bottom, 0px)) !important;}
  body.bic-has-bar .callbtn-contact{bottom:calc(140px + env(safe-area-inset-bottom, 0px)) !important;}

  /* --- 「探す」のパネル（下から上がる） --- */
  body.bic-panel-open{overflow:hidden !important;}
  .bic-panel{position:fixed; inset:0; z-index:4500;}
  .bic-panel[hidden]{display:none !important;}
  .bic-panel__backdrop{position:absolute; inset:0; background:rgba(16,40,52,.35); opacity:0; transition:opacity .25s;}
  .bic-panel__sheet{position:absolute; left:0; right:0; bottom:0; height:calc(100dvh - 44px); background:#fff; border-radius:14px 14px 0 0;
    display:flex; flex-direction:column; transform:translateY(100%); transition:transform .25s ease; box-shadow:0 -8px 24px rgba(16,40,52,.2);}
  .bic-panel.is-open .bic-panel__backdrop{opacity:1;}
  .bic-panel.is-open .bic-panel__sheet{transform:translateY(0);}
  .bic-panel__head{flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; padding:10px 8px 8px 16px; border-bottom:1px solid #d8dde5;}
  .bic-panel__title{font-size:15px; font-weight:700; color:#1E2B4D;}
  .bic-panel__close{border:0; background:transparent; color:#175b74; font-size:20px; width:40px; height:40px; cursor:pointer;}
  .bic-panel__body{flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:10px 12px calc(20px + env(safe-area-inset-bottom, 0px));}
  .bic-panel__h{font-size:13px; font-weight:700; color:#1E2B4D; margin:16px 2px 8px; padding:0; border:0; line-height:1.3;}
  .bic-seg{display:flex; border:1px solid #175b74; border-radius:8px; overflow:hidden; margin:2px 0 4px;}
  .bic-seg__b{flex:1 1 0; border:0; background:#fff; color:#175b74; font-size:13px; font-weight:700; padding:9px 0; cursor:pointer;}
  .bic-seg__b.is-on{background:#175b74; color:#fff;}
  /* 4列の格子（トップの「カテゴリで探す」と同じ形） */
  .bic-grid{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, 1fr); gap:8px 6px;}
  .bic-grid > li{margin:0; padding:0;}
  .bic-grid__btn{display:block; width:100%; border:1px solid #d8dde5; border-radius:8px; background:#fff; padding:8px 2px 6px; cursor:pointer;
    color:#1E2B4D; text-align:center; -webkit-tap-highlight-color:transparent;}
  .bic-grid__btn img{display:block; width:44px; height:44px; object-fit:contain; margin:0 auto 4px;}
  .bic-grid__btn span{display:block; font-size:10.5px; line-height:1.25; min-height:26px;}
  .bic-grid__btn.is-open{border-color:#175b74; box-shadow:inset 0 0 0 1px #175b74;}
  .bic-grid__sub{grid-column:1 / -1; margin:0; padding:8px 8px 10px; background:#f5f7fa; border:1px solid #d8dde5; border-radius:8px;}
  .bic-grid__subhead{font-size:11px; color:#6B7A8D; margin:0 0 6px;}
  .bic-chips{display:flex; flex-wrap:wrap; gap:6px;}
  .bic-chips a{display:inline-flex; align-items:center; gap:4px; padding:7px 10px; border:1px solid #9fbcc6; border-radius:16px; background:#fff;
    color:#1E2B4D; font-size:12px; line-height:1; text-decoration:none; -webkit-tap-highlight-color:transparent;}
  .bic-chips a.is-all{border-color:#175b74; color:#175b74; font-weight:700;}
  .bic-chips a b{font-weight:400; font-size:10px; color:#6B7A8D;}
  .bic-chips a b:empty{display:none;}
  .bic-filter-btn{display:flex; align-items:center; gap:8px; width:100%; margin:16px 0 0; padding:11px 12px; border:1px solid #175b74; border-radius:8px;
    background:#fff; color:#175b74; font-size:13px; font-weight:700; text-align:left; cursor:pointer;}
  .bic-filter-btn small{font-weight:400; font-size:10px; color:#6B7A8D; margin-left:auto;}
  .bic-guide{margin:14px 0 0; border-top:1px solid #d8dde5; padding-top:6px;}
  .bic-guide summary{font-size:13px; color:#1E2B4D; padding:8px 2px; cursor:pointer; list-style:none;}
  .bic-guide summary::-webkit-details-marker{display:none;}
  .bic-guide summary::before{content:"\25B8"; color:#175b74; margin-right:6px; font-size:11px;}
  .bic-guide[open] summary::before{content:"\25BE";}
  .bic-guide summary small{color:#6B7A8D; font-size:10px; margin-left:6px;}
  .bic-guide ul{list-style:none; margin:0; padding:0 0 4px;}
  .bic-guide li a{display:block; padding:8px 12px; color:#1E2B4D; font-size:13px; text-decoration:none; border-bottom:1px solid #f0f2f5;}
  .bic-panel__foot{display:flex; justify-content:flex-end; padding:12px 0 0;}
  .bic-panel__close--foot{width:auto; height:auto; padding:9px 14px; border:1px solid #d8dde5; border-radius:8px; font-size:13px;}
  /* 新品モードのときは格子のサブは開かない（新品の側にサブのページが無い） */
  .bic-panel.is-new .bic-grid__btn{border-style:dashed;}

  /* --- トップ：上へ動かした格子（元と同じ包みごと動かしている。余白だけ詰める） --- */
  main.top .bic-moved-wrap{margin-top:4px;}
  main.top article.article.bic-moved-article{padding:0 !important; margin-bottom:8px !important;}
  main.top .top-category-section.bic-moved{margin-top:0;}
}

/* --- ⑤ 「中古 → 新品」を並べる（幅に関係なく） --- */
.bic-alt{margin:28px 0 8px; padding:16px 0 0; border-top:1px solid #d8dde5;}
.bic-alt[hidden]{display:none !important;}
.bic-alt__head{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; margin:0 0 10px;}
.bic-alt__h{font-size:16px; font-weight:700; color:#1E2B4D; margin:0; padding:0; border:0; line-height:1.4;}
.bic-alt__h b{font-weight:400; font-size:12px; color:#6B7A8D; margin-left:6px;}
.bic-alt__note{margin:0; font-size:11px; color:#6B7A8D;}
.bic-alt__more{margin:10px 0 0; text-align:right;}
.bic-alt__more a{display:inline-flex; align-items:center; gap:6px; padding:9px 14px; border:1px solid #175b74; border-radius:8px; color:#175b74; font-size:13px; text-decoration:none; background:#fff;}

/* BICNAV_20260919b PC 幅では左のサイドバーに絞り込みがあるので、右下の丸ボタンは出さない */
@media screen and (min-width: 992px){ #mobile-filter-trigger{display:none !important;} }