/* =========================================================
   基本テーマ調整 / 変数
   ========================================================= */
:root{
  --brand: #2A3F59;
  --ribbon-bg: #f3f4f6;

  --card-pad: 16px;   /* 横・下のカード余白 */
  --img-inset: 8px;   /* 画像内のリボンの内側オフセット */
}

/* 余白リセット（Storefrontのcol-full） */
.col-full{
  max-width:100%!important;
  padding:0!important;
}
@media (max-width:1024px){
  .col-full{
    margin-left:0!important;
    margin-right:0!important;
  }
}

/* ヘッダー */
.site-header{
  max-width:100%!important;
  background-color: var(--brand);
  padding: 40px 5% 10px;
  color:#fff;
}
.site-branding .site-title a{ font-weight:700; color:#fff; }
.site-branding .site-description{ color:#fff; }
.main-navigation ul.menu>li>a,
.main-navigation ul.nav-menu>li>a{ padding:1.618em 1em; color:#fff; }

/* パンくず非表示 */
.storefront-breadcrumb{ display:none; }

/* ===============================
   ヒーロー画像：全体表示
=============================== */

.jade-hero,
.hero-headset{
  background:#51636D;
  border-bottom:4px solid #e7edf2;
  padding:0;
}

/* タイトル：クラスが違っても白にする（強制） */
.jade-hero h1,
.hero-headset h1,
.jade-hero__title,
.hero-headset__title{
  color:#fff !important;
  font-weight:800;
  font-size: clamp(22px, 3.6vw, 36px);
  margin:0;
  text-shadow: 0 2px 6px rgba(0,0,0,.18);
}

/* 中身 */
.jade-hero__inner,
.hero-headset__inner{
  width: min(1080px, 100%);
  margin: 0 auto;
  padding-inline: 16px;

  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(320px, 640px);
  align-items: center;
  gap: clamp(16px, 3.4vw, 44px);
}

/* 画像枠（高さは持たせない＝背景が画像に追従） */
.jade-hero__img,
.hero-headset__img{
  justify-self: end;
  width: 100%;
  max-width: 640px;
}

/* 画像の高さを決める（＝背景の高さが結果的に画像に合う） */
.jade-hero__img img,
.hero-headset__img img{
  display: block;
  object-fit: contain;   /* 切らない */
}

/* 800px以下は縦積み（崩れ防止） */
@media (max-width:800px){
  .jade-hero__inner,
  .hero-headset__inner{
    grid-template-columns: 1fr;
  }
  .jade-hero__img,
  .hero-headset__img{
    justify-self: start;
    max-width: 100%;
  }
  .jade-hero__img img,
  .hero-headset__img img{
   display:block;
   width:100%;
   height: auto;
   object-fit: contain; /* 切らない */
  }
}

:root{
  /* ヘッダーの実高さに合わせて調整 */
  --header-offset: 30px;
}

/* ヘッダーが fixed で被さる分、本文を下げる */
body.tax-product_cat #content.site-content{
  padding-top: var(--header-offset);
}

/* ===============================
   /device のヒーロー
=============================== */

/* 中身の幅・2カラム構成 */
.jade-hero__inner{
  width: min(1080px, 100%);
  margin: 0 auto;
  padding-inline: 16px;

  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(320px, 640px);
  align-items: center;
  gap: clamp(16px, 3.4vw, 44px);
}

/* 画像は右寄せ＋最大 640 */
.jade-hero__img{
  justify-self: end;
  width: 100%;
  max-width: 640px;
}

/* imgは切らずに表示 */
.jade-hero__img img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* ✅ split 用が残ってても「1枚と同じ表示」に強制 */
.jade-hero__img--split{
  display: block;          /* grid を殺す */
}
.jade-hero__img--split img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* 800px以下は縦積み */
@media (max-width:800px){
  .jade-hero__inner{
    grid-template-columns: 1fr;
  }
  .jade-hero__img,
  .jade-hero__img--split{
    justify-self: start;
    max-width: 100%;
  }
}


/* =========================================================
   スマホ（≤640px）も2列表示
   ========================================================= */
@media (max-width:640px){
  .woocommerce ul.products,
  ul.products{
    display:grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:16px;
  }
  .woocommerce ul.products li.product,
  ul.products li.product{
    width:auto !important;
    margin:0 !important;
  }
  .product-card-price-row{ margin-right:0; }
}

/* =========================================================
   サイドバー / フィルタ（BeRocket）
   ========================================================= */
.widget-area .widget{
  margin: 0 10px;
  max-width: 300px;
  float: right;
}

/* =========================================================
   製品一覧：サイドバー＋一覧エリアの横幅（ヘッダー・フッターはそのまま）
   ========================================================= */
/* 本文エリア全体を 1080px に制限して中央寄せ */
body.post-type-archive-product #content .col-full,
body.tax-product_cat #content .col-full,
body.tax-product_tag #content .col-full{
  max-width:1080px;
  margin-left:auto;
  margin-right:auto;
}

/* メインとサイドバーの2カラムレイアウト */
body.post-type-archive-product #primary,
body.tax-product_cat #primary,
body.tax-product_tag #primary{
  float:right!important;
  width:67%!important;
}

body.post-type-archive-product #secondary,
body.tax-product_cat #secondary,
body.tax-product_tag #secondary{
  float:left!important;
  width:32%!important;
  margin-right:1%!important;
}

/* サイドバー全体の上マージン（PC） */
@media (min-width:1025px){
  #secondary.widget-area{
    margin-top:100px;
  }
}

/* モバイルでは1カラムに戻す（※1024以下に変更＋!importantで勝つ） */
@media (max-width:1024px){
  body.post-type-archive-product #primary,
  body.tax-product_cat #primary,
  body.tax-product_tag #primary,
  body.post-type-archive-product #secondary,
  body.tax-product_cat #secondary,
  body.tax-product_tag #secondary{
    float:none !important;
    width:100% !important;
  }
  body.post-type-archive-product #secondary,
  body.tax-product_cat #secondary,
  body.tax-product_tag #secondary{
    margin:18px 0 0 !important;
  }
}

/* =========================================================
   BeRocketの見た目
   ========================================================= */
.bapf_wid_3444,.bapf_wid_3445,.bapf_wid_3446{
  border-bottom:1px solid #000;
  padding-top:30px;
  width:240px;
}
.berocket_single_filter_widget_3397,
.berocket_single_filter_widget_3398{
  border-bottom:none!important;
}

.bapf_sfilter.bapf_button_berocket .bapf_button{
  width:200px;
  height:42px;
  font-size:14px;
  background:var(--brand);
  border:1px solid var(--brand);
  border-radius:20px !important;
  margin-bottom:4px !important;
}
.bapf_sfilter.bapf_button_berocket .bapf_button:hover{
  color:var(--brand);
  background:#fff;
  border:1px solid var(--brand);
}

/* 絞り込みクリアをリンク風に */
.bapf_sfilter .bapf_button.bapf_reset{
  background:none !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
  margin-top:0 !important;
  margin-bottom:0 !important;
  width:auto !important;
  color:#99AECE !important;
  text-decoration:none !important;
  font-size:14px;
  cursor:pointer;
  display:inline-block;
}
.bapf_sfilter.bapf_button_berocket{
  text-align:center;
}
.bapf_sfilter .bapf_button.bapf_reset:hover,
.bapf_sfilter .bapf_button.bapf_reset:focus{
  color:#7c93c0 !important;
  text-decoration:none !important;
}

.berocket_single_filter_widget_3657{ border-bottom:0; }
.berocket_single_filter_widget_3656,
.berocket_single_filter_widget_3398{ padding-top:0!important; }

/* term_id=93 を非表示 */
.bapf_sfilter li[data-term_id="93"]{ display:none !important; }

/* サイドバー最上部のダミー <p><br></p> を消す */
#block-14.widget_block > p:first-child{ display:none; }

.bapf_head{ font-weight:bold; }
.lmp_products_loading{ display:none; }

/* =========================================================
   商品カード
   ========================================================= */
.woocommerce ul.products li.product,
ul.products li.product{
  position:relative;
  background:#fff;
  width:250px;
  margin-right:4%;
  border:1px solid #e5e7eb;
  box-shadow:0 4px 12px rgba(0,0,0,.04);
  padding: 0 var(--card-pad) 20px;
  overflow:hidden;

  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}

/* 画像リンクをリボンの基準に＆余計な上マージンを殺す */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link{
  position:relative;
  display:block;
  margin-top:0 !important;
  padding-top:0 !important;
  line-height:0;
  text-align:center;
}

.woocommerce ul.products li.product a.woocommerce-LoopProduct-link img{
  display:block;
  margin:0 auto !important;
  margin-top:30px !important;
  margin-bottom:30px !important;
  padding:0 !important;
  float:none !important;
  width:100% !important;
  height:220px !important;
  max-width:100%;
  object-fit:contain !important;
}

.woocommerce ul{ margin-top:20px; margin-bottom:20px; }

/* ブランドリボン */
.product-card-ribbon{
  position:absolute;
  top:30px;
  left:-16px;
  z-index:2;
  display:inline-block;
  padding:20px 30px;
  font-size:18px;
  color:#000;
  font-weight:700;
  border-radius:0;
  background:#E8E8E8;
  pointer-events:none;
}

/* テーマ既定の SALE フラッシュは非表示 */
.woocommerce span.onsale{ display:none!important; }

/* 価格行（ラベル＋価格） */
.product-card-price-row{
  display:flex;
  justify-content:flex-start !important;
  align-items:center;
  gap:8px;
  margin-top:10px;
  margin-right:0 !important;
  margin-left:4px !important;
  flex-wrap:wrap;
}

/* WooCommerce 価格体裁 */
.woocommerce ul.products li.product .price{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin:2px 0 0 !important;
  line-height:1.2;
  justify-content:flex-start !important;
}
.woocommerce ul.products li.product .price del,
.woocommerce ul.products li.product .price ins{
  display:inline;
  margin:0;
  line-height:1;
}
.woocommerce ul.products li.product .price del{ opacity:.6; }
.woocommerce ul.products li.product .price ins{ text-decoration:none; }

.wc-price-tax-note{
  font-size:12px;
  margin-left:4px;
  align-self:center;
}

/* バッジ共通 */
.product-card-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px 10px;
  border-radius:4px;
  font-size:12px;
  font-weight:700;
  line-height:1;
  color:#fff;
  white-space:nowrap;
}

/* 在庫なし */
.product-card-badge--out{
  background:#EB7575 !important;
}
/* メーカー取り寄せ */
.product-card-badge--order{
  background:#466541 !important;
}
/* セール */
.product-card-badge--sale{
  background:#C62828 !important;
  color:#fff !important;
}

/* タイトル */
.woocommerce-loop-product__title{
  font-weight:bold!important;
  margin-top:12px!important;
  margin-bottom:6px!important;
  font-size:16px!important;
  text-align:left!important;
  padding-left:4px;
  line-height:1.4;

  min-height:3em;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}
.woocommerce-Price-amount{ font-weight:bold!important; }

/* 旧3カラム時の幅指定を固定（カードが潰れないように） */
.site-main ul.products.columns-3 li.product{
  box-shadow:0 2px 10px rgba(28,43,38,0.2);
  width:250px !important;
  min-width:250px;
}

/* =========================================================
   タブレット（1024px以下）：商品を可変グリッド
   ========================================================= */
@media (max-width:1024px){
  .site-main{ 
	  margin: 0 2%;
	  width: 95% !important;
	}

  .woocommerce ul.products,
  ul.products{
    display:grid !important;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap:20px 12px;
  }
  .woocommerce ul.products li.product,
  ul.products li.product{
    width:auto !important;
    margin:0 !important;
  }

  /* サイドバー内の幅調整 */
  .bapf_wid_3444{ width:100%; padding-top:16px; }
  .bapf_sfilter.bapf_button_berocket .bapf_button{ width:100%; }
}

/* Woo のclearfix疑似要素がGridの1マスを食うのを防ぐ */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
ul.products::before,
ul.products::after{
  content:none !important;
  display:none !important;
}

/* 左上からきっちり詰めるための基本リセット */
.woocommerce ul.products,
ul.products{
  padding-left:0 !important;
  margin-left:0 !important;
  justify-content:start;
  align-content:start;
  justify-items:stretch;
  align-items:start;
}

/* 紫のフォーカス枠を削除 */
.site-header a:focus,
.site-footer a:focus{
  outline:none !important;
  box-shadow:none !important;
}

/* =========================================================
   ページネーション中央寄せ
   ========================================================= */
.storefront-sorting{
  margin-top:10px;
  display:flex;
  justify-content:center;
  align-items:center;
}
.storefront-sorting .woocommerce-pagination{
  margin:0;
  float:none !important;
}
.storefront-sorting .woocommerce-pagination ul.page-numbers{
  display:flex;
  gap:0;
  padding:0;
  margin:0;
  list-style:none;
}

/* =========================================================
   商品一覧（カテゴリ/アーカイブ） 1024px以下：2列＋サイドバー下へ
   ========================================================= */
@media (max-width:1024px){

	.site-main{
		width:95%!important;
	}

:root{
  /* ヘッダーの実高さに合わせて調整*/
  --header-offset: 10px!important;
}

/* ヘッダーが fixed で被さる分、本文を下げる */
body.tax-product_cat #content.site-content{
  padding-top: var(--header-offset);
}	

  /* col-full を縦積みにして順序を制御 */
  body.woocommerce-page.tax-product_cat #content.site-content > .col-full,
  body.woocommerce-page.post-type-archive-product #content.site-content > .col-full,
  body.woocommerce-page.tax-product_tag #content.site-content > .col-full{
    display:flex;
    flex-direction:column;
  }
	
  /* ✅ フッターが col-full の子にいるため、最後に送る */
  body.woocommerce-page.tax-product_cat #content.site-content > .col-full > footer.site-footer,
  body.woocommerce-page.post-type-archive-product #content.site-content > .col-full > footer.site-footer,
  body.woocommerce-page.tax-product_tag #content.site-content > .col-full > footer.site-footer{
    order: 99;
  }

  /* メイン（商品一覧）を先、サイドバー（検索/絞り込み）を後ろへ */
  body.woocommerce-page.tax-product_cat #primary,
  body.woocommerce-page.post-type-archive-product #primary,
  body.woocommerce-page.tax-product_tag #primary{
    order:1;
  }

  body.woocommerce-page.tax-product_cat #secondary,
  body.woocommerce-page.post-type-archive-product #secondary,
  body.woocommerce-page.tax-product_tag #secondary{
    order:2;
    margin-top:18px !important;
  }

  /* サイドバー内のfloat/固定幅を解除（スマホで左に残るのを防ぐ） */
  .widget-area .widget{
    float:none !important;
    max-width:none !important;
    margin: 0 auto !important;
    width: 95%!important;
  }

  /* 商品一覧を2列固定（auto-fit より優先） */
  body.woocommerce-page.tax-product_cat ul.products,
  body.woocommerce-page.post-type-archive-product ul.products,
  body.woocommerce-page.tax-product_tag ul.products{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:14px !important;
    margin:0;
  }

  /* 2列を邪魔する min-width を殺す */
  body.woocommerce-page.tax-product_cat ul.products li.product,
  body.woocommerce-page.post-type-archive-product ul.products li.product,
  body.woocommerce-page.tax-product_tag ul.products li.product{
    width:auto !important;
    margin:0 !important;
    float:none !important;
    min-width:0 !important;
  }

  /* columns-3 固定幅/最小幅も1024以下では無効化 */
  .site-main ul.products.columns-3 li.product{
    width:auto !important;
    min-width:0 !important;
  }
}

/* =========================================================
   サイドバー（絞り込み）の文字サイズ
   ========================================================= */
#secondary.widget-area,
#secondary.widget-area .widget-title,
#secondary.widget-area label,
#secondary.widget-area a,
#secondary.widget-area li{
  font-size:16px;
}

/* 見出しだけ少し強めに */
#secondary.widget-area .widget-title{
  font-size:17px;
  font-weight:700;
}

/* ===============================
   一覧カード：価格の見た目調整
   - 数字＋円：濃い黒
   - 税込：1サイズ小さく
   - 円と税込の間に空白
   - 価格ブロック自体を右寄せ
================================ */

/* 価格行：バッジなどが左、価格が右へ */
.product-card-price-row{
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 右寄せ（priceブロックを右端へ） */
.product-card-price-row .price{
  margin-left: auto !important;
  text-align: right;
  justify-content: flex-end; /* 既存display:flex対策 */
}

/* Wooの.priceはflexの場合があるので中身も右寄せ */
.product-card-price-row .price .jade-archive-price{
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  white-space: nowrap;
  gap: 0; /* 余計な隙間は自前で管理 */
}

/* 数字（通常/セール）を濃い黒 */
.product-card-price-row .jade-archive-price__normal,
.product-card-price-row .jade-archive-price__sale{
  color: #000;
  font-weight: 700; /* 好みで調整OK */
}

/* 取り消し線（セール元値）は少し薄めでもOK（任意） */
.product-card-price-row .jade-archive-price__regular{
  color: #666;
  margin-right: 6px;
}

/* 「円」も濃い黒 */
.product-card-price-row .jade-archive-price__yen{
  color: #000;
  font-weight: 700;
}

/* 「円」と「税込」の間に空白 */
.product-card-price-row .jade-archive-price__yen{
  margin-left: 4px;  /* 数字→円の間 */
  margin-right: 6px; /* 円→税込の間（ここが要件） */
}

/* 「税込」は1サイズ小さく */
.product-card-price-row .jade-archive-price__tax{
  font-size: 0.85em;
  color: #000;      /* 黒のまま */
  font-weight: 400; /* 小さく控えめに */
}

/* セール時：取り消し価格とセール価格の間に空白 */
.product-card-price-row .jade-archive-price__regular{
  margin-right: 10px; /* 好みで 6〜12px で調整 */
}

/* 一覧：価格ブロック全体を右寄せ */
.product-card-price-row{
  display: flex;
  justify-content: flex-end !important; /* ← 右寄せ */
  text-align: right;                   /* 念のため */
  width: 100%;
}

/* もし「セールバッジ」と価格が同じ行で、価格だけ右端にしたい場合 */
.product-card-price-row .price{
  margin-left: auto;                   /* 価格だけ右へ押し出す */
}

/* =========================================================
商品一覧：ラベル(バッジ)を価格の左 / 高さをさらに安定
   ========================================================= */

/*タイトル：2行ぶんの高さを厳密に固定
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2.woocommerce-loop-product__title,
.woocommerce-loop-product__title{
  line-height: 1.4 !important;
  min-height: calc(1.4em * 2) !important; /* 常に2行分確保 */
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

/*価格行：左=ラベル / 右=価格（同じ1行にする） */
.product-card-price-row{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  flex-wrap:nowrap !important;          /* ← 折り返さない（高さブレ防止） */
  justify-content:flex-start !important; /* ← 左詰め基準に戻す */
  width:100% !important;
}

/* ラベル（メーカー取り寄せ等）は左固定 */
.product-card-price-row .product-card-badge{
  order:0 !important;
  flex:0 0 auto !important;
  margin:0 !important;
}

/* 価格は右端へ（priceブロックを押し出す） */
.product-card-price-row .price{
  order:1 !important;
  margin-left:auto !important;          /* ← これで右端に寄る */
  justify-content:flex-end !important;
  text-align:right !important;
  white-space:nowrap !important;        /* ← 価格の折り返し禁止 */
}

/* 「税込」だけ小さく、見た目は既存のまま維持（保険） */
.product-card-price-row .wc-price-tax-note,
.product-card-price-row .jade-archive-price__tax{
  white-space:nowrap !important;
}


/* タイトル：常に2行ぶん確保（1行でも高さが変わらない） */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2.woocommerce-loop-product__title{
  line-height: 1.4 !important;
  min-height: calc(1.4em * 2) !important;
  margin-top: 12px !important;
  margin-bottom: 6px !important;

  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
}

/* 価格行：右端で「バッジ + 価格」を同じ塊として揃える */
.woocommerce ul.products li.product .product-card-price-row{
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important; /* ← 右寄せ */
  gap: 8px !important;

  flex-wrap: nowrap !important;         /* ← 折り返し禁止で高さブレ防止 */
  min-height: 28px !important;          /* ← バッジ有無でも高さ固定 */
  width: 100% !important;
}

/* 価格だけ右に押し出す系（margin-left:auto）が残ってても無効化 */
.woocommerce ul.products li.product .product-card-price-row .price{
  margin-left: 0 !important;
  text-align: right !important;
  justify-content: flex-end !important;
  white-space: nowrap !important;
  flex: 0 0 auto !important;
}

/* バッジは折り返さない（ここが2行化の最大原因） */
.woocommerce ul.products li.product .product-card-price-row .product-card-badge{
  white-space: nowrap !important;
  flex: 0 0 auto !important;
  line-height: 1 !important;
}