@charset "UTF-8";
/* =========================
  ジャンル：ページ内メニュー（9アイコン）
  PC：最大幅1000px / 均等幅（9等分・1行）
  SP：3×3 / 最大幅85%
========================= */

.block-genre-menu{
  width: 100%;
  box-sizing: border-box;
  padding-bottom:40px;
}

/* PC */
.block-genre-menu__list{
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0;
  list-style: none;

  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 0;
}

.block-genre-menu__item{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* link（下線なし） */
.block-genre-menu__link{
  display: flex;
  flex-direction: column;
  align-items: center;

  text-decoration: none;
  color: inherit;
  box-sizing: border-box;
}

/* icon */
.block-genre-menu__icon{
  display: block;
  width: 76px;          /* PC */
  line-height: 0;
}

.block-genre-menu__icon img{
  width: 100%;
  height: auto;
  display: block;
}

/* デフォルトの絞り込みのマーク削除 */
.block-icon-image-double-small {
  display:none;
}

/* title（ゴシック） */
.block-genre-menu__title{
  margin-top: 10px;
  font-size:clamp(12px, 1.3vw, 14px);
  line-height: 1.3;
  font-weight: 700;
  text-align: center;

  font-family:
    "Yu Gothic",
    "Yu Gothic Medium",
    "游ゴシック体",
    "Hiragino Kaku Gothic ProN",
    "Meiryo",
    sans-serif;
  color:#333;
}

/* hover underline 無効 */
.block-genre-menu__link:hover,
.block-genre-menu__link:focus{
  text-decoration: none;
}

.block-category-list--goods {
  margin-bottom:70px;
}

@media (min-width: 768px) and (max-width: 1024px){
  .block-genre-menu{
    padding-bottom:30px!important;
  }
  .block-category-list--goods .block-goods-list--params {
    width:95%;
  }
  .block-genre-menu__list{
    width: 90%;
    max-width: none;
    margin: 0 auto;

    display: flex;              /* ← grid をやめる */
    flex-wrap: wrap;
    justify-content: center;    /* ★ 行全体を中央寄せ */
    gap: 20px 12px;
  }

  .block-genre-menu__item{
    width: calc(100% / 6);      /* ★ 6列相当 */
    display: flex;
    justify-content: center;
  }

  .block-genre-menu__icon{
    width: 80px;
  }

  .block-genre-menu__title{
    font-size: 14px;
    margin-top: 10px;
    line-height: 1.35;
    text-align: center;
  }
}



/* =========================
  SP：3×3
========================= */
@media (max-width: 767px){
  .block-genre-menu{
    padding-bottom:0!important;
  }
  .block-genre-menu__list{
    width: 95%;
    max-width: none;
    margin: 0 auto;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px 12px;
  }

  .block-genre-menu__icon{
    width: 85px;         /* SP：アイコンを大きく */
  }

  .block-genre-menu__title{
    font-size: 16px;     /* SP：文字 */
    margin-top: 10px;
    line-height: 1.35;

    /* ★ A案：2行分の高さを常に確保して揃える */
    min-height: calc(1.35em * 2);
    white-space: normal;
  }
}

/* 既存 border非表示 */
.block-goods-list--params,.block-filter--treelist-layer,.block-goods-list--sort-order-items {
  border:none!important;
}
/* セレクタ文字サイズ */
.block-filter--treelist-layer .js-tree-select__label{
  font-size:14px;
}


/* セレクタの左寄せ調整 */
.block-filter{
  margin: 0!important;
  margin-right: auto;
}

/* セレクタブロック調整 */
.block-category-list--goods .block-goods-list--params {
  max-width:1180px;
  margin:30px auto 20px!important;
  justify-content: flex-start!important;
}
@media (max-width: 1280px){
  .block-category-list--goods .block-goods-list--params {
    width:95%;
  }
}


/* 追加：フォーム上（#frmFilterListの先頭）にマークタイトルを表示 */
#frmFilterList{
  position: relative;
}

/* タイトル文字（フォームの先頭に1行追加される） */
#frmFilterList::before{
  content: "魚種から選ぶ";
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  color:#333;
  padding-left: calc(1em + 0.6em);
  margin: 0;
  font-family:
    "Yu Gothic",
    "Yu Gothic Medium",
    "游ゴシック体",
    "Hiragino Kaku Gothic ProN",
    "Meiryo",
    sans-serif;
}

/* ■マーク本体） */
#frmFilterList::after{
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 0.9em;
  height: 0.9em;
  background:
    linear-gradient(#333 0 0) left   top,
    linear-gradient(#333 0 0) right  top,
    linear-gradient(#333 0 0) left   bottom,
    linear-gradient(#333 0 0) right  bottom;
  background-size: 0.395em 0.395em;
  background-repeat: no-repeat;
}


@media (max-width: 767px){

  #frmFilterList::before{
    font-size:18px;
  }
  /* ■マーク本体） */
  #frmFilterList::after{
    left: 0;
    top: 0.4em;
    width: 1.1em;
    height: 1.1em;
     background-size: 0.45em 0.45em;
  }


  /* セレクタブロック調整 */
  .block-category-list--goods .block-goods-list--params {
    max-width:90%;
    margin:50px auto 0!important;
  }
  .block-sort--header >h2 {
    font-family:
      "Yu Gothic",
      "Yu Gothic Medium",
      "游ゴシック体",
      "Hiragino Kaku Gothic ProN",
      "Meiryo",
      sans-serif;
    padding:8px 10px!important;
    font-size:0!important;
    position: relative;
  }

  /* セレクタ文字サイズ */
  .block-filter--treelist-layer .js-tree-select__label{
    font-size:18px;
  }


}









/* =========================
  並び順（sort）
========================= */
.block-sort--header >h2 {
  font-family:
    "Yu Gothic",
    "Yu Gothic Medium",
    "游ゴシック体",
    "Hiragino Kaku Gothic ProN",
    "Meiryo",
    sans-serif;
  padding:8px 10px!important;
  font-size:0!important;
  position: relative;
}
/* 画像＋表示テキスト */
.block-sort--header > h2::before{
  content: "並び順";
  display: inline-flex;
  align-items: center;
  padding-left: 22px;
  color: #333;
  font-size: 14px!important;
  font-weight: normal;
  background:
    url("../../img/usr/common/updown.png")
    no-repeat left center / 14px auto;
}
.block-sort--header >h2::after {
  display:none!important;
}

/*
@media (max-width: 767px){
  .block-sort--header > h2{
    width:150px!important;
    height:45px!important;
    padding-left:20px!important;
    
  }
  .block-sort--header > h2::before{
    font-size:16px;
  }
}
*/

.block-sort--element {
  padding:0!important;
  border:none!important;
}
.block-sort--select {
  margin:0!important;
}

/* 並び順の開くパネル */
.block-sort--element {
  width:150px!important;
}
@media (max-width: 767px){
  .block-sort--element{
    top:-100px;
    right: 0;          /* 並び順の右端に揃える */
    transform: translateX(40%);
  }
}


.block-sort--element .block-sort--select{
  border: none!important;
  box-shadow: 0 6px 16px rgba(0,0,0,0.22);
  background:#fff!important;
  padding:0!important;
}
.block-sort--element {
  background:none!important;
  backdrop-filter: none!important;}
.block-sort--select {
	width:180px!important;
}


/* ソート窓調整 */
.block-goods-list--sort-order-items{
  align-self: flex-end!important;
}
.block-sort--element {
  left:10px!important;
  top:-30px!important;
}

.block-sort--list .block-sort--list-item span.checked {
  color:#333!important;
  background:#e6f1f2;
}

ul.block-sort--list .block-sort--list-item span.checked::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 47%;

  width: 8px;
  height: 14px;
  border-left:none!important;
  border-right: 2px solid #333;
  border-bottom: 2px solid #333;

  transform: translateY(-55%) rotate(45deg);
  box-sizing: border-box;
}

.block-sort--list .block-sort--list-item a,.block-sort--list .block-sort--list-item span{
  color: #333 !important;
  font-family:
    "Yu Gothic",
    "Yu Gothic Medium",
    "游ゴシック体",
    "Hiragino Kaku Gothic ProN",
    "Meiryo",
    sans-serif!important;
	padding:10px 10px 10px 45px!important;
  font-size:14px!important;
}
.block-sort--list .block-sort--list-item a:hover {
    background:#f3f7f8;
}




/* ページャー関連の調整：件あります */

.pane-main .block-category-list--goods .block-goods-list-naviframe--top{
  display:block!important;
  margin-bottom:5px!important;
}
.pane-main .block-category-list--goods .block-goods-list-naviframe--bottom{
  display:none!important;
}




.pager-count{
  font-size: 0;
}

/* 数字の前に「（全」 */
.pager-count > span{
  font-size: 14px;
  position: relative;
  font-family:
    "Yu Gothic",
    "Yu Gothic Medium",
    "游ゴシック体",
    "Hiragino Kaku Gothic ProN",
    "Meiryo",
    sans-serif;
  color:#333;
}

.pager-count > span::before{
  content: "(全";
}

.pager-count::after{
  content: "件)";
  font-size: 14px;
  position: relative;
  font-family:
    "Yu Gothic",
    "Yu Gothic Medium",
    "游ゴシック体",
    "Hiragino Kaku Gothic ProN",
    "Meiryo",
    sans-serif;
  color:#333;
}

.block-goods-list-naviframe--page,
.block-goods-list-naviframe--sum{
  display: inline-flex;
  align-items: center;
}
.pager-scope {
  margin-right:0!important;
  font-size: 14px;
  position: relative;
  font-family:
    "Yu Gothic",
    "Yu Gothic Medium",
    "游ゴシック体",
    "Hiragino Kaku Gothic ProN",
    "Meiryo",
    sans-serif!important;
  color:#333;
  padding-right:0!important;
}
.block-goods-list-naviframe--sum{
  padding-left:0!important;
}





/* =========================
  SP：絞り込み＋（ページャー＋並び順）を縦並び
  ・1段目：#block_of_filter（左）
  ・2段目：ページャー（左）＋ 並び順（右）
  ・並び順の開く窓：右端基準で表示
========================= */
@media (max-width: 767px){

  /* 2つが入ってるラッパー（wrapAllで生成される） */
  .block-goods-list--params{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  /* 1段目：絞り込み（左） */
  #block_of_filter{
    width: auto !important;
    margin: 0 !important;
  }

  /* 2段目：ページャー＋並び順を1行にする土台 */
  .block-goods-list--sort-order-items{
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    gap: 10px !important;

    margin: 0 !important;          /* 右寄せ用auto等をkill */
    position: relative !important; /* ★並び順の窓（absolute）の基準 */
  }

  /* 左：ページャー */
  .block-goods-list-naviframe--top{
    margin: 0 !important;
    white-space: nowrap !important;
  }

  /* 右：並び順（ヘッダーと窓を右側へ寄せる） */
  .block-goods-list--sort-order-items > .block-sort--header,
  .block-goods-list--sort-order-items > .block-sort--element{
    margin-left: auto !important;
  }

  /* =========================
    SP：並び順の「開く窓」の位置
    ・右端基準で、トリガー直下に出す
  ========================= */
  .block-goods-list--sort-order-items .block-sort--element{
    position: absolute !important;

    right: 15% !important;
    top: 0 !important;
    margin-top: 6px !important;
    z-index: 1000 !important;
  }

  /* 窓の幅（はみ出し防止の保険） */
  .block-goods-list--sort-order-items .block-sort--element .block-sort--select{
    width:220px !important;
  }



  .block-sort--list .block-sort--list-item a,.block-sort--list .block-sort--list-item span{
    padding:12px 10px 12px 45px!important;
    font-size:18px!important;
  }



  /* ページャー　サイズ */
  .pager-scope {
    font-size: 18px;
    margin-left:0;
    margin-top:20px;
  }
  .pager-count > span {
    font-size: 18px;
  }

  .pager-count::after {
    font-size: 18px;
  }


  /* ソート　並び順 */
  .block-sort--header > h2::before{
    width:180px;
    font-size: 18px!important;
    padding-left: 28px;
    background:
      url("../../img/usr/common/updown.png")
      no-repeat left center / 18px auto;
  }

}



/* カテゴリ・アイテム一覧 */
.block-category-list--goods .block-goods-detail-j {
  max-width:1180px;
  margin:0 auto;
}
@media (max-width: 1280px){
  .block-category-list--goods .block-goods-detail-j {
    width:95%;
  }
}


.block-category-list--goods .block-goods-detail-j .block-goods-detail-j--items {
  border-top:solid 1px #333;
}


@media (max-width: 767px){
  .block-category-list--goods .block-goods-detail-j {
    width:95%;
  }
}







/* カスタマイズ */

  /* 右：説明側 */
.block-goods-detail-j--goods-description{
  font-family:
  "Yu Gothic",
  "Yu Gothic Medium",
  "游ゴシック体",
  "Hiragino Kaku Gothic ProN",
  "Meiryo",
  sans-serif!important;
  color:#333;
  width:100%!important;
  word-wrap: break-word;
  font-size: 14px;
}



.block-goods-detail-j--goods-description dl.block-goods-detail-j--stock {
  display:none!important; /* 在庫表示なし */
}

.block-goods-detail-j--items li.block-goods-detail-j--item {
  padding:30px 0!important;
}

.block-goods-detail-j .block-goods-detail-j--items{
  column-gap: 7%!important;

}

.block-goods-detail-j--goods-image {
  width: 100%!important;
}

.block-goods-detail-j--goods-name {
  font-weight:700!important;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4; 
  -webkit-line-clamp: 2;   /* ★ 最大2行 */
  max-height: calc(1.4em * 2); /* 保険（古い環境向け） */
}

.block-goods-detail-j--comment {
    color:#333!important;
    padding-top:10px;
    font-size:16px!important;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    overflow:hidden;
    line-height:1.3;
    -webkit-line-clamp:2;

    /* ★欠け防止の保険だけ追加 */
    max-height: calc(1.3em * 2 + 6px);
    padding-bottom:3px;
    box-sizing:border-box;
}



/* ラベル文字を差し替える */
.goods-list-qty{
  font-size: 0;               /* 元の「数量」を不可視にする */
  white-space: nowrap;
  gap:0!important;
  margin:0;
}
.goods-list-qty .qty-pulldown {
  margin-left:10px!important;
}
.goods-list-qty #select-qty {
  max-width:47px;
}

/* 数量 → 購入数に変更 */
.goods-list-qty::before{
  content: "購入数";
  font-size: 14px;            /* 既存トーンに合わせる */
  font-family:
    "Yu Gothic",
    "Yu Gothic Medium",
    "游ゴシック体",
    "Hiragino Kaku Gothic ProN",
    "Meiryo",
    sans-serif;
}

/* span（qty-pulldown）は元のまま表示 */
.goods-list-qty > span{
  font-size: 14px;            /* font-size:0 の影響を戻す */
}

.qty-pulldown select{
  text-align: center;          /* 表示文字を中央寄せ */
  text-align-last: center;     /* ★選択中の値も中央寄せ（重要） */
  appearance: none;            /* ▼ を消す（標準） */
  -webkit-appearance: none;    /* Safari / iOS */
  -moz-appearance: none;       /* Firefox */
  /*padding-right: 0;*/            /* ▼用の余白を消す */
  background-image: none;      /* 念のため */

  border-radius: 6px;
  padding:12px 5px!important;
  border: 1px solid #dcd4cd;
}





.goods-list-qty{
  display: inline-flex;      /* ← テキスト＋プルダウンを横並び */
  align-items: center;       /* 縦位置を揃える */
  gap: 6px;                  /* 「数量」と▼の間隔 */
  white-space: nowrap;
}

.block-goods-detail-j--cart-btn{
  display: flex;
  align-items: center;   /* 縦位置揃え */
  gap: 10px;             /* 数量とボタンの間隔 */
}


.block-goods-detail-j--item .block-icon {
  gap:2%!important;
}
.block-goods-detail-j--item .block-icon img {
  height:22px!important;
  aspect-ratio: 7 / 2;
}

.block-goods-detail-j--item .block-icon .block-icon--auto-on-sales img {
  /* セール (sale) */
  height:22px!important;
  aspect-ratio: 2 / 1!important;
}


/* アイコンサイズ */
@media (min-width: 951px) and (max-width: 1159px){
  .block-goods-detail-j--item .block-icon img {
    height:19px!important;
  }
.block-goods-detail-j--item .block-icon .block-icon--auto-on-sales img {
    /* セール (sale) */
    height:19px!important;
  }
  .block-goods-detail-j--item .block-icon {
    gap:1%!important;
  }
}
@media (min-width: 831px) and (max-width: 950px){
  .block-goods-detail-j--item .block-icon img {
    height:16px!important;
  }
.block-goods-detail-j--item .block-icon .block-icon--auto-on-sales img {
    /* セール (sale) */
    height:16px!important;
  }
}
@media (min-width: 768px) and (max-width: 830px){
  .block-goods-detail-j--item .block-icon img {
    height:15px!important;
  }
  .block-goods-detail-j--item .block-icon .block-icon--auto-on-sales img {
    /* セール (sale) */
    height:15px!important;
  }
}


/* 画像オート調整 */
.block-goods-detail-j--goods-image .img-center img{
  height:500px!important;
}



.block-goods-detail-j--goods-image figure.img-center{
  border-radius: 12px;
  overflow: hidden;
}


/* つづきを見る */
.block-goods-list-auto-load--continue {
  margin-top:30px;
  font-size:16px;
  font-family:
    "Zen Old Mincho",
    "Hiragino Mincho ProN",
    "Yu Mincho",
    "MS PMincho",
    serif !important;
  color:#333;
}

@media (min-width: 768px){
  #goods_list_auto_load_area .block-goods-detail-j--goods-image figure.img-center{
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #f5f5f5;
    margin: 0;
  }
  #goods_list_auto_load_area .block-goods-detail-j--goods-image figure.img-center img{
    width: 100%;
    height: 100%;
    object-fit: contain;   /* 小さい画像対応 */
    display: block;
  }


/* =========================
  PC：パネル高さを揃える
  ＋ 購入ボタンを最下部に揃える
========================= */


  /* パネル（1商品）を縦レイアウトのflexにする */
  .block-goods-detail-j--items > li.block-goods-detail-j--item{
    display: flex;
    flex-direction: column;
    height: 100%;          /* 親が揃う前提の“受け” */
  }

  /* 画像・説明の“2カラム”構造がある場合の崩れ防止（既存がflexならそのまま） */
  .block-goods-detail-j--items > li.block-goods-detail-j--item .block-goods-detail-j--goods-description{
    flex: 1 1 auto;        /* 説明側を伸縮対象に */
  }

  /* 購入エリアを下へ押し下げる */
  .block-goods-detail-j--items > li.block-goods-detail-j--item .block-goods-detail-j--cart-btn{
    margin-top: auto !important;
  }

}


.block-goods-detail-j--goods-image figure {
  background: #f5f5f5;
  width: 100%!important;
  height: auto!important;
}




/* 価格 */
.block-goods-detail-j--price{
  font-size: 20px!important;
  font-weight: 700!important;
  color: #bf292a!important;
  text-align:right;
}
.block-goods-detail-j--price::after{
  font-size:16px;
}

.block-goods-detail-j--price-infos {
  margin-top:10px!important;
}


/* 特別セール */
.block-goods-detail-j--scomment {
  font-size:14px!important;
  text-align:right;
}

/* 中身がある場合のみ《 》を付ける */
.block-goods-detail-j--scomment:not(:empty)::before{
  content: "《";
  padding-right: 3px;
}

.block-goods-detail-j--scomment:not(:empty)::after{
  content: "》";
  padding-left: 3px;
}



/* 通常価格 */
.block-goods-detail-j--default-price {
  font-size:14px!important;
  text-align:right;
  color:#818181!important;
}
.block-goods-detail-j--default-price::after {
  font-size:12px!important;
  color:#818181!important;
}


.block-goods-detail-j--cart-btn {
  width:100%!important;
}

/* 既存テキストは消して、疑似要素で「カート＋購入する」を出す */
.block-list-add-cart-btn{
  font-size: 0!important;                 /* 元の文言を非表示 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  background: #bf292a;
  color: #fff !important;

  font-family:
    "Yu Gothic",
    "Yu Gothic Medium",
    "游ゴシック体",
    "Hiragino Kaku Gothic ProN",
    "Meiryo",
    sans-serif;
  font-weight: 700;
  border: none;
  border-radius: 6px!important;
  text-decoration: none;
  box-sizing: border-box;
}

/* カートアイコン（左） */
.block-list-add-cart-btn::before{
  content: "";
  width: 18px;
  height: 18px;
  display: inline-block;
  background: url("../../img/usr/common/icon_cart_white.png") no-repeat center;
  background-size: contain;
  transform: translate(-8px, 2px);
}

/* 表示テキスト */
.block-list-add-cart-btn::after{
  content: "購入する";
  font-size: 14px;
  font-weight: 700;
  color: #fff;

  font-family:
    "Yu Gothic",
    "Yu Gothic Medium",
    "游ゴシック体",
    "Hiragino Kaku Gothic ProN",
    "Meiryo",
    sans-serif;
}

/* =========================
  商品詳細リンク（共通）
========================= */
.js-goods-detail-link{
  display: block;
  width: 100%;
  margin-top: 12px;

  background: #f1eeeb;
  border: 1px solid #dcd4cd;
  border-radius: 8px;

  color: #333;
  text-decoration: none;
  text-align: center;

  font-family:
    "Yu Gothic",
    "Yu Gothic Medium",
    "游ゴシック体",
    "Hiragino Kaku Gothic ProN",
    "Meiryo",
    sans-serif;

  box-sizing: border-box;
}

/* PC */
@media (min-width: 768px){
  .js-goods-detail-link{
    font-size: 14px;
    padding: 12px 12px;
  }
}

/* SP */
@media (max-width: 767px){
  .js-goods-detail-link{
    font-size: 16px;
    padding: 16px 12px;
  }
}

/* hover調整 */
@media (hover:hover){
  a.block-list-add-cart-btn:hover{
    filter: brightness(1.06);
    opacity:0.6;
  }
  a.js-goods-detail-link:hover{
    filter: brightness(1.06);

  }
}





@media (max-width: 767px){
  .block-goods-detail-j--goods-image figure.img-center{
    width:100%!important;
    aspect-ratio: 4 / 3;
  }
  /*  画像100%幅用
  .block-goods-detail-j--goods-image .img-center img{
    height:1000px!important;
  }
  */

  .block-goods-detail-j--item .block-icon {
    padding-top:15px!important;
  }

  /* カスタマイズ */
  .block-goods-detail-j--item {
    display: flex;
    flex-direction: row;   /* 明示（デフォルトだが保険） */
    gap: 4%;             /* ← 左右の間隔。好みで 8〜16px */
    align-items: flex-start;
  }

  .block-goods-detail-j--items > li.block-goods-detail-j--item{
    margin-top:25px!important;
    padding-bottom:10px!important;
  }



  /* 左：画像側 */
  .block-goods-list--image-relative{
    width: 48%;
    flex: 0 0 48%;
  }

  /* 右：説明側 */
  .block-goods-detail-j--goods-description{
    padding-top:0!important;
    width: 48%;
    flex: 0 0 48%;
  }


  .block-goods-detail-j--item .block-icon img {
    height:20px!important;
    margin-bottom:5px;
  }
  .block-goods-detail-j--item .block-icon .block-icon--auto-on-sales img {
    /* セール (sale) */
    height:20px!important;
  }


  .block-icon > span{
    margin: 0 6px 0 0 !important;  /* 上 右 下 左 */
  }


  /* 通常価格 */
  .block-goods-detail-j--default-price {
    font-size:14px!important;
    text-align:right;
    color:#818181!important;
  }
  .block-goods-detail-j--default-price::after {
    font-size:12px!important;
    color:#818181!important;
  }


  /* 購入数 */
  .goods-list-qty {
    margin-left:5px!important;
  }

  .goods-list-qty::before{
    font-size: 16px;
  }
  .goods-list-qty #select-qty {
    max-width:50px!important;
  }

  .goods-list-qty .qty-pulldown {
    margin-left:15px!important;
  }

  .qty-pulldown select{
    padding:14px 10px!important;
  }


  /* span（qty-pulldown）は元のまま表示 */
  .goods-list-qty > span{
    font-size: 16px;
  }


  /* 購入する ボタン */
  .block-list-add-cart-btn{
    margin-left:15%!important;
  }

  .block-list-add-cart-btn{
    padding:15px!important;
  }

  /* カートアイコン（左） */
  .block-list-add-cart-btn::before{
    width: 20px!important;
    height: 20px;
    transform: translate(-12px, 2px);
  }

  /* 表示テキスト */
  .block-list-add-cart-btn::after{
    content: "購入する";
    font-size: 18px;

  }


  .block-goods-detail-j--goods-name{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;

    line-height: 1.4;
    max-height: calc(1.4em * 2 + 2px);

    padding-bottom: 2px;
    box-sizing: border-box;
  }



  /* 通常価格 */
  .block-goods-detail-j--default-price {
    font-size:13px!important;
  }
  .block-goods-detail-j--default-price::after {
    font-size:10px!important;
  }



  /* つづきを見る */
  .block-goods-list-auto-load--continue {
    margin-top:50px;
    font-size:18px;
  }


}






/* =========================
  疑似セレクタ：デフォルト状態
========================= */
.js-tree-select{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:10px;
  padding:7px 10px 7px 10px;
  cursor:pointer;
  user-select:none;
  width:150px;

  /* ★ デフォルト枠 */
  border:1px solid #333;
  box-sizing:border-box;

  /* ★ ゴシック */
  font-family:
    "Yu Gothic",
    "Yu Gothic Medium",
    "游ゴシック体",
    "Hiragino Kaku Gothic ProN",
    "Meiryo",
    sans-serif;
}

/* =========================
  セレクタOPEN時
  ・ベースを隠す（位置は残す）
========================= */
.js-tree-select.is-open{
  visibility: hidden; /* ★ ベースを隠す（レイアウトは保持） */
  pointer-events: none;
}

/* label / caret（既存そのまま） */
.js-tree-select__label{
  flex: 1 1 auto;
}
.js-tree-select__caret{
  flex: 0 0 auto;
  line-height:1;
}

/* =========================
  親一覧（ドロップダウン枠）
  ・ベースの真上に重ねて表示
========================= */
.block-filter--treelist-layer{
  position: relative; /* ★ absolute基準 */
}

.js-tree-dropdown{
  margin-top:0;               /* ★ 重ねるため0 */
  width:220px;
  border:none!important;

  /* セレクタと一体感を出す */
  box-shadow: 0 6px 16px rgba(0,0,0,0.22);

  position:absolute;          /* ★ 重ねる */
  left:-10px!important;
  top:-35px!important;
  z-index:10;

  /* ★ ゴシック */
  font-family:
    "Yu Gothic",
    "Yu Gothic Medium",
    "游ゴシック体",
    "Hiragino Kaku Gothic ProN",
    "Meiryo",
    sans-serif;
}


/* =========================
  リスト：仕切り線不要／下線不要／縦位置中央
========================= */
.block-filter--treelist-layer ul,
.block-filter--treelist-layer li{
  border: none !important;    /* ★ 仕切り線不要 */
}

.block-filter--treelist-layer .block-filter--treeitem-container{
  display:flex;
  align-items:center;         /* ★ 縦位置中央 */
  justify-content:space-between;
  gap:10px;
}

.block-filter--treelist-layer .block-filter--treeitem-name{
  flex: 1 1 auto;

  /* ★ 縦位置中央（テキスト側もflex化） */
  display: flex;
  align-items: center;
  min-height: 32px;
  line-height: 1.2;

  /* ★ 下線不要 */
  text-decoration: none !important;

  /* ★ ゴシック */
  font-family:
    "Yu Gothic",
    "Yu Gothic Medium",
    "游ゴシック体",
    "Hiragino Kaku Gothic ProN",
    "Meiryo",
    sans-serif;
}

/* hover等でも下線を出さない */
.block-filter--treelist-layer .block-filter--treeitem-name:hover,
.block-filter--treelist-layer .block-filter--treeitem-name:focus{
  text-decoration: none !important;
}

/* ✔の行高ブレ防止（保険） */
.block-filter--treelist-layer .block-filter--treeitem-name .js-tree-checkmark{
  line-height: 1;
}

/* セレクト オーバーライド*/
.block-filter--treeitem-selected {
  color: #333!important;
}

/* =========================
  右側アコーディオンボタン：枠なし・背景なし
========================= */
.block-filter--treelist-layer .js-acc-toggle{
  flex: 0 0 auto;
  line-height: 1;
  padding: 6px 10px;
  cursor:pointer;

  border: none !important;     /* ★ 枠なし */
  background: transparent !important; /* ★ 背景なし */
  box-shadow: none !important;
}

/* =========================
  選択中（✔が入っている項目）：背景 #e6f1f2
  ※ JSが .js-tree-checkmark を挿入している前提
========================= */
.block-filter--treelist-layer
.block-filter--treeitem-container:has(.js-tree-checkmark[style*="display: inline"]),
.block-filter--treelist-layer
.block-filter--treeitem-container:has(.js-tree-checkmark:not([style*="display:none"])){
  background: #e6f1f2;
}


/* =========================
  ポイント（hover / focus）中の項目
  ※ 選択中（#e6f1f2）は優先
========================= */
.block-filter--treelist-layer
.block-filter--treeitem-container:hover,
.block-filter--treelist-layer
.block-filter--treeitem-container:focus-within{
  background: #f3f7f8;
}

/* ★ 子リスト（tree-2）は別指定に負けやすいので強めに当てる */
.block-filter--treelist-layer ul.block-filter--tree-2
.block-filter--treeitem-container:hover,
.block-filter--treelist-layer ul.block-filter--tree-2
.block-filter--treeitem-container:focus-within{
  background: #f3f7f8 !important;
}

/* 選択中は常に優先（hoverしても色を変えない） */
.block-filter--treelist-layer
.block-filter--treeitem-container:has(.js-tree-checkmark[style*="display: inline"]),
.block-filter--treelist-layer
.block-filter--treeitem-container:has(.js-tree-checkmark:not([style*="display:none"])){
  background: #e6f1f2;
}

/* テキスト行：左側に✔用の固定スペースを確保 */
.block-filter--treelist-layer .block-filter--treeitem-name{
  position: relative;
  padding-left: 45px;   /* ← ✔の有無に関係なく固定 */
}

/* JSで入っている✔文字は使わない */
.block-filter--treelist-layer .js-tree-checkmark{
  display: none !important;
}

/* 選択中：CSSで✔を描画（#333） */
.block-filter--treelist-layer
.block-filter--treeitem-container:has(.js-tree-checkmark:not([style*="display:none"]))
.block-filter--treeitem-name::before{
  content: "";
  position: absolute;
  left: 17px;
  top: 47%;

  width: 8px;
  height: 14px;

  border-right: 2px solid #333;
  border-bottom: 2px solid #333;

  transform: translateY(-55%) rotate(45deg);
  box-sizing: border-box;
}


/* =========================
  SP：リスト行の高さを少し広く
========================= */
@media (max-width: 767px){

  .js-tree-select{
    width:180px;
    padding:10px 10px 10px 10px;
  }

  .js-tree-dropdown{
    width:260px;
    font-size:18px!important;
  }

  .block-filter--treelist-layer .js-acc-toggle{
    font-size: 20px;      /* 見た目サイズ */
    line-height: 1;
    padding: 10px 14px;   /* タップ領域を拡張 */
  }

  .block-filter--treelist-layer
  .block-filter--treeitem-container{
    padding-top: 8px;    /* 既存より +2〜4px */
    padding-bottom: 8px;
  }

  .block-filter--treelist-layer
  .block-filter--treeitem-name{
    min-height: 40px;     /* タップしやすさ確保 */
  }

  .block-filter--treelist-layer
  .js-acc-toggle{
    padding-top: 8px;    /* 右ボタンも高さ合わせ */
    padding-bottom: 8px;
  }
}

/* PC / 共通 */
.js-tree-dropdown ul.block-filter--tree-1{
  max-height: 400px!important;  /* リスト窓の高さ */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
/* スクロールバー全体 */
.js-tree-dropdown ul.block-filter--tree-1::-webkit-scrollbar{
  width: 6px;
}

/* つまみ */
.js-tree-dropdown ul.block-filter--tree-1::-webkit-scrollbar-thumb{
  background: rgba(115, 170, 183, 0.6);
  border-radius: 4px;
}

/* 背景 */
.js-tree-dropdown ul.block-filter--tree-1::-webkit-scrollbar-track{
  background: transparent;
}
/* SP */
@media (max-width: 767px){
  .js-tree-dropdown ul.block-filter--tree-1{
    max-height: 70vh!important;
  }
}



/* 元の「絞り込み」ボタンを非表示 */
.block-filter--header,
.js-filter-header{
  display: none !important;
}

/* ▼ 重要：ドロップダウンの基準になる親を作る（押し下げ対策） */
.block-filter--treelist-layer{
  position: relative;
}

/* 親一覧（ul.block-filter--tree-1）をフローから外して重ねる */
.block-filter--treelist-layer > .js-tree-dropdown{
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 9999;
}

/* 親一覧のスクロール（長い時の安全策） */
.block-filter--treelist-layer > .js-tree-dropdown > ul.block-filter--tree-1{
  max-height: 60vh;
  overflow: auto;
}

/* 見た目は後ででOKだが、白背景がないと下の要素が透けるので最低限 */
.block-filter--treelist-layer > .js-tree-dropdown{
  background: #fff;
}

/* クリック領域が分かれるように最低限（不要なら消してOK） */
.block-filter--treelist-layer > .js-tree-dropdown{
  border: 1px solid rgba(0,0,0,0.12);
}








/* ▼文字は使わない */
.js-tree-select__caret{
  position: relative;
  width: 12px;
  height: 12px;
  font-size: 0;       /* ← 文字を消す */
  line-height: 0;
}

.block-filter--treeitem-dir {
  width:0;
}

/* v（CSSで描画） */
.js-tree-select__caret::before{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;

  width: 8px;
  height: 8px;

  border-right: 2px solid #333;
  border-bottom: 2px solid #333;

  transform: translate(-50%, -60%) rotate(45deg); /* v */
  box-sizing: border-box;
}

/* OPEN時：上向き（任意） */
.js-tree-select.is-open .js-tree-select__caret::before{
  transform: translate(-50%, -40%) rotate(-135deg);
}


.block-filter--treelist-layer ul.block-filter--tree-2
.block-filter--treeitem-container{
  background: #fff !important;
}

/* 子リスト：左だけ色、右は白 */
.block-filter--treelist-layer ul.block-filter--tree-2{
  background:#f3f7f8;
}



@media (max-width: 767px){
  .js-tree-select__caret::before{
    top: calc(50% - 2px);
    left: calc(50% - 7px); 
    width: 10px;
    height:10px;
  }
}



/* フローティング */
.onoya-floating-banner{
  position:fixed !important;
  right:20px !important;
  bottom:20px !important;
  z-index:999999 !important;
  display:block;
  width:min(180px, 25vw);
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
  transition:
    opacity .5s ease,
    transform .25s ease;
}

.onoya-floating-banner.is-hide{
  opacity:.12;
  transition:
    opacity 2s ease,
    transform .25s ease;
}

.onoya-floating-banner img{
  display:block;
  width:100%;
  height:auto;
  filter:
    drop-shadow(0 0 5px rgba(255,255,255,1))
    drop-shadow(0 0 5px rgba(255,255,255,.95));
}

.onoya-floating-banner img:hover{
  opacity:1 !important;
}

/* hover時だけ少し浮かせる */
.onoya-floating-banner:hover{
  transform:translateY(-4px);
}


.onoya-floating-wrap{
  position:fixed;
  right:10px;
  bottom:10px;
  z-index:999999;
}

.onoya-floating-banner__close{
  position:absolute;
  top:-180px;
  right:-5px;
  z-index:2;

  padding:0;
  border:0;
  background:none;

  color:#333;
  font-size:22px;
  line-height:1;

  cursor:pointer;
}


@media (max-width:767px){
  .onoya-floating-banner{
    right:12px !important;
    bottom:10px !important;
    width:35vw;
    max-width:180px;
  }

  .onoya-floating-banner__close{
    top:-140px;
  }
}




#footer_pagetop a{
	display:none;
}