/* =========================================
   cateGallery
   5列 → 4列 → 3列 → 2列 → 1列（gap:1%）
========================================= */
.cateGallery {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  gap: 1%;        /* ← ここを1%に変更 */
  margin: 0;
  padding: 0;
}

.cateGallery>li {
  list-style: none;
  box-sizing: border-box;
  margin: 0;
  min-width: 0;
}

/* 内側paddingオプション */
.cateGallery.P>li {
  padding: 10px;
}

/* 1281px〜：5列（gap1% ×4本 = 4%）*/
@media screen and (min-width: 1281px) {
  .cateGallery>li {
    flex: 0 0 calc((100% - 4%) / 5);
  }
}

/* 1001〜1280px：4列（gap1% ×3本 = 3%）*/
@media screen and (max-width: 1280px) and (min-width: 1001px) {
  .cateGallery>li {
    flex: 0 0 calc((100% - 3%) / 4);
  }
}

/* 851〜1100px：3列（gap1% ×2本 = 2%）*/
@media screen and (max-width: 1100px) and (min-width: 851px) {
  .cateGallery>li {
    flex: 0 0 calc((100% - 2%) / 3);
  }
}

/* 651〜850px：2列（gap1% ×1本 = 1%）*/
@media screen and (max-width: 850px) and (min-width: 651px) {
  .cateGallery>li {
    flex: 0 0 calc((100% - 1%) / 2);
  }
}

/* 〜650px：スマホは1列 */
@media screen and (max-width: 650px) {
  .cateGallery>li {
    flex: 0 0 100%;
  }
}





/* =========================================
   cateShowCase
   3列 → 2列 → 1列（gap:2%）
========================================= */
.cateShowCase {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  gap: 2%;
  margin: 0;
  padding: 0;
}

.cateShowCase>li {
  list-style: none;
  box-sizing: border-box;
  margin: 0;
  min-width: 0;
}

/* 内側paddingオプション */
.cateShowCase.P>li {
  padding: 10px;
}

/* 769px〜：3列（gap2% ×2本 = 4%）*/
@media screen and (min-width: 769px) {
  .cateShowCase>li {
    flex: 0 0 calc((100% - 4%) / 3);
  }
}

/* 651〜850px：2列（gap2% ×1本 = 2%）*/
@media screen and (max-width: 1000px) and (min-width: 651px) {
  .cateShowCase>li {
    flex: 0 0 calc((100% - 2%) / 2);
  }
}

/* 〜650px：スマホは1列 */
@media screen and (max-width: 650px) {
  .cateShowCase>li {
    flex: 0 0 100%;
  }
}





/* =========================================
   cateDefault
   4列 → 3列 → 2列 → 1列（gap:2%）
========================================= */
.cateDefault {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  gap: 2%;
  margin: 0;
  padding: 0;
}

.cateDefault>li {
  list-style: none;
  box-sizing: border-box;
  margin: 0;
  min-width: 0;
}

/* 内側paddingオプション */
.cateDefault.P>li {
  padding: 10px;
}

/* 1025px〜：4列（gap2% ×3本 = 6%）*/
@media screen and (min-width: 1201px) {
  .cateDefault>li {
    flex: 0 0 calc((100% - 6%) / 4);
  }
}

/* 851〜1100px：3列（gap2% ×2本 = 4%）*/
@media screen and (max-width: 1200px) and (min-width: 901px) {
  .cateDefault>li {
    flex: 0 0 calc((100% - 4%) / 3);
  }
}

/* 651〜850px：2列（gap2% ×1本 = 2%）*/
@media screen and (max-width: 900px) and (min-width: 651px) {
  .cateDefault>li {
    flex: 0 0 calc((100% - 2%) / 2);
  }
}

/* 〜650px：スマホは1列 */
@media screen and (max-width: 650px) {
  .cateDefault>li {
    flex: 0 0 100%;
  }
}








/* =======================================
   共通スタイル
   ======================================= */

/* ======
   GapM 系共通
   ===== */
.cateList.GapM5>li {
  margin-top: 5px;
  margin-bottom: 5px;
}

.cateList.GapM10>li {
  margin-top: 10px;
  margin-bottom: 10px;
}

.cateList.GapM15>li {
  margin-top: 15px;
  margin-bottom: 15px;
}

.cateList.GapM20>li {
  margin-top: 20px;
  margin-bottom: 20px;
}


.cateList>li {
  overflow-wrap: anywhere;
  word-break: break-word;
  line-break: anywhere;
  /* 行頭禁則より折りやすく */
}

/* ===================
   アイテム表示用カード
   =================== */
/* カード本体：縦方向flexで全体を構成 */
.itemCateCard {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #fff;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  position: relative;
  padding: 0;
  /* 内側余白は子要素側で管理 */
}

/* 画像部分（上部ブロック） */
.itemCateCard .body {
  padding: 10px 10px 0 10px;
}

/* 画像の下側：商品名＋レビュー・価格・お気に入りを縦に並べる領域 */
.itemCateCard .rightStack {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  /* ここが「上下の残りを受ける」部分 */
  padding: 0 10px 10px 10px;
  /* 左右＆下の余白 */
}

/* 商品名ブロック（上側） */
.itemCateCard .body2 {
  /* 上に詰めたまま＋画像との間に少し余白 */
  margin-top: 8px;
  /* さらに余白を足したければここを調整 */
}

/* レビュー～価格～お気に入り（下側） */
.itemCateCard .footer {
  margin-top: auto;
  /* rightStack の一番下に押し下げるキー */
  padding-top: 15px;
  /* 商品名との間の余白 */
}

.itemCateCard .itemBtmLink {
  display: block;
  text-align: center;
  background-repeat: no-repeat;
  background-size: 15px;
  background-position: right 5px center;
  padding-right: 20px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8 5L16 12 8 19' fill='none' stroke='%230555a5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}


/* ============================
   スマホ時：左右2カラムレイアウト
   ============================ */
@media screen and (max-width: 768px) {
  .itemCateCard {
    flex-direction: row;
    /* ← 縦並び → 横並びへ */
    align-items: stretch;
    flex-wrap: wrap;
    /* バリエーションバー等を写真|情報の下に折り返す */
  }

  .itemCateCard .body {
    flex: 1;
    /* 左側（元body） */
    margin-right: 10px;
    padding: 10px 0 10px 10px;
  }

  .itemCateCard .body2 {
    flex: none;
    width: 100%;
    padding: 10px 5px 5px 0;
  }

  .itemCateCard .footer {
    flex: none;
    width: 100%;
    padding: 10px 0 0 0;

  }

  .itemCateCard .rightStack {
    display: flex;
    flex-direction: column;
    /* ← body2 と footer を縦積み */
    flex: 1;
    padding: 0 5px 10px 0;
    /* 左右＆下の余白 */

  }

  /* Vカード: バリエーションバーを写真|情報の下にフル幅で配置 */
  .itemCateCard .vCardVariBar {
    flex: 0 0 100%;
  }

}

/* 商品名 */
.cateItemName {
  display: block;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.cateItemName.gallery {
  font-size: 15px;
}

.cateItemName.default {
  font-size: 16px;
}

.cateItemName.showcase {
  font-size: 17px;
}

/* 価格表示 */
.cateItemPrice.gallery {
  font-size: 26px;
}
.cateItemPrice.default {
  font-size: 30px;
}
.cateItemPrice.showcase {
  font-size: 34px;
}

@media screen and (max-width: 768px) {
  /* 商品名 */
  .cateItemName.gallery {
    font-size: 14px;
  }

  .cateItemName.default {
    font-size: 15px;
  }

  .cateItemName.showcase {
    font-size: 15px;
  }
  /* 価格表示 */
  .cateItemPrice.gallery {
    font-size: 24px;
  }
  .cateItemPrice.default {
    font-size: 24px;
  }
  .cateItemPrice.showcase {
    font-size: 24px;
  }
}

.cateItemName.withSale {
  padding-right: 25px;
}

/* お気に入りボタン幅調整用 */
.favoWidth {
  width: 40px;
}

@media screen and (max-width: 768px) {
  .cateItemName {
    display: block;
    font-size: 15px;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }

  /* お気に入りボタン幅調整用 */
  .favoWidth {
    width: 20px;
  }

}

/* AjaxRemodal先のCSS調整 */
.ItemBullet img{max-width:100%;height:auto;object-fit:contain;}
/*===================
バリエーションテーブルAJAX用
====================*/
.VariListScrollTbl table {
  display: block;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  border-spacing: 0;
  border-top: solid 1px #CCC;

}
.VariListScrollTbl table thead {
  width: 100%;
  display:table;
}
.VariListScrollTbl table tbody {
  width: 100%;
  display:table;
}
.VariListScrollTbl table thead th{
    width: 90px;
    min-width: 90px;
    max-width: 90px;
    vertical-align: middle;
    text-align:center;
    background-color:#eee;
    font-weight: normal;
    border-bottom: solid 1px #CCC;
    border-left:solid 1px #CCC;

    padding:5px;
}
.VariListScrollTbl table tbody td {
    vertical-align: middle;
    border-bottom: solid 1px #CCC;
    border-left:solid 1px #CCC;
    width: 90px;
    min-width: 90px;
    max-width: 90px;
}
.VariListScrollTbl table thead th.Img,
.VariListScrollTbl table tbody td.Img {
    width: 50px;
    min-width: 50px;
    max-width: 50px;
}
.VariListScrollTbl table thead th.Price {
    width: 160px;
    min-width: 160px;
    max-width: 160px;
}
.VariListScrollTbl table tbody td.Price {
    text-align: right;
    padding:5px;
    width: 160px;
    min-width: 160px;
    max-width: 160px;
}
.VariListScrollTbl table thead th.ItemName,
.VariListScrollTbl table tbody td.ItemName {
  width: 100%;
  min-width: 250px;
}

.VariListScrollTbl table thead th.Variation,
.VariListScrollTbl table tbody td.Variation {
  width: 160px;
  min-width: 130px;
}

.VariListScrollTbl table::-webkit-scrollbar{
  height: 0.8em;
}
.VariListScrollTbl table::-webkit-scrollbar-track{
background: #F1F1F1;
}
.VariListScrollTbl table::-webkit-scrollbar-thumb {
  background-color: #008ffd;
  border-radius: 12px;
  border-radius: 1.2rem;
}
.VariListScrollTbl table::-webkit-scrollbar-thumb:hover{
  background-color: #37a8ff;
}


/* =========================================
   バナースタンド専用レイアウト（cateBanner）
   6ブロック構成のGridレイアウト
   PC: 左列に画像(1)+サムネ(2)、右列に商品名(3)+詳細行(4,5,6)
   SP: 全ブロック縦積み（1→2→3→4→5→6）
========================================= */

/* --- カード全体: PC時はGrid 2列 --- */
/* 左列(25%): 写真+サムネが縦に並ぶ / 右列(75%): 商品名+詳細行 */
/* 行の高さは右列の内容に合わせ、左列は全行を結合して上揃え */
.cateBanner-card {
  display: grid;
  grid-template-columns: 25% 1fr;
  grid-template-rows: auto 1fr;
  gap: 0;
}

/* --- 左列: 写真(1)+サムネ(2)をまとめて左全体に配置 --- */
.cateBanner-left {
  grid-column: 1;
  grid-row: 1 / 3;
}

/* --- 1. メイン写真 --- */
.cateBanner-photo {
  position: relative;
}

/* --- 2. サムネイル --- */
/* .cateBanner-thumb — 現状は固有スタイル不要（左列内で自然に配置される） */

/* --- 3. 商品名・レビュー: 右上 --- */
.cateBanner-title {
  grid-column: 2;
  grid-row: 1;
  padding-left: 20px;
  min-width: 0;
}

/* --- 4+5+6 の行: 右下 / スペック・価格・アクションを横並び --- */
.cateBanner-detail {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  gap: 0;
  padding-left: 20px;
  min-width: 0;
}

/* --- 4. スペック --- */
.cateBanner-spec {
  flex: 0 0 50%;
  min-width: 0;
  padding-right: 25px;
  overflow: hidden;
}

/* --- 5. 価格ボックス（アクションボタンを内包） --- */
.cateBanner-price {
  flex: 1 1 0;
  min-width: 0;
  padding-left: 25px;
  border-left: 1px solid #ccc;
}

/* --- 6. アクションボタン（価格ボックス内・右上揃え） --- */
.cateBanner-action {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* =========================================
   タブレット（1080px以下）:
   写真+サムネだけ上に出す。商品名+詳細行はその下で横並び維持。
========================================= */
@media screen and (max-width: 1080px) {
  .cateBanner-card {
    display: flex;
    flex-wrap: wrap;
  }

  /* 左列（写真+サムネ）をフル幅に → 上段に配置 */
  .cateBanner-left {
    flex: 0 0 100%;
    text-align: center;
  }

  /* メイン写真をセンター揃え */
  .cateBanner-photo {
    max-width: 300px;
    margin: 0 auto;
  }

  /* 商品名はフル幅 */
  .cateBanner-title {
    flex: 0 0 100%;
    padding-left: 0;
    padding-top: 10px;
  }

  /* 詳細行はフル幅で横並び維持 */
  .cateBanner-detail {
    flex: 0 0 100%;
    padding-left: 0;
  }
}

/* =========================================
   SP（768px以下）: 全ブロック縦積み
========================================= */
@media screen and (max-width: 768px) {
  .cateBanner-card {
    flex-direction: column;
  }

  .cateBanner-left {
    flex-direction: column;
    gap: 0;
  }

  .cateBanner-photo {
    max-width: 100%;
    text-align: center;
  }

  .cateBanner-detail {
    flex-direction: column;
    padding-top: 10px;
  }

  .cateBanner-spec {
    flex: 0 0 auto;
    padding-right: 0;
    overflow: visible;
  }

  .cateBanner-price {
    padding-left: 0;
    padding-top: 15px;
    border-left: none;
    border-top: 1px solid #ccc;
  }

  .cateBanner-action {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}