@charset "UTF-8";
/* =========================================================
   商品一覧（カテゴリーページ）PC・SP共通
   設置先：/contents/ex/css/ProductList.css
   #product_list = SP / #one_maincolumn = PC
   ========================================================= */

/* ページ全体の枠（PC）：layout.css の #container を一覧ページだけ上書き（下の余白 50px・上下 20px をなくす） */
#container {
  margin: 0 auto;
}
@media screen and (min-width: 601px) {
  #container {
    max-width: 960px;
    width: 100%;
    padding-bottom: 0;
  }
}

/* カテゴリー見出し（配色はサイト共通：クリーム #fffbef／ゴールド #a79870／ベージュ #ddcaa9／本文 #333） */
.kb-cathead {
  margin: 14px 10px 6px;
  padding: 16px 16px 14px;
  background: #fffbef;
  border-radius: 12px;
  box-sizing: border-box;
  text-align: left;
}
#product_list .kb-cathead__crumb,
#one_maincolumn .kb-cathead__crumb {
  font-size: 12px;
  color: #777;
  margin: 0 0 6px;
}
#product_list .kb-cathead__title,
#one_maincolumn .kb-cathead__title {
  font-size: 24px;
  font-weight: 700;
  margin: 0;
  padding: 0;
  line-height: 1.3;
  color: #333;
  background: none;
  border: 0;
}
#product_list .kb-cathead__sub,
#one_maincolumn .kb-cathead__sub {
  font-size: 16px;
  margin: 6px 0 10px;
  line-height: 1.6;
  color: #2b2b2b;
}
.kb-cathead__step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: #a79870;
  background: #fff;
  border: 1px solid #ddcaa9;
  border-radius: 999px;
  padding: 4px 12px 4px 4px;
}
.kb-cathead__step b {
  background: #a79870;
  color: #fff;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 13px;
}
.kb-cathead__flow {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  font-size: 12px;
  color: #666;
  flex-wrap: wrap;
}
.kb-cathead__flow span {
  background: #fff;
  border: 1px solid #ddcaa9;
  border-radius: 6px;
  padding: 2px 6px;
}
.kb-cathead__flow .is-current {
  background: #a79870;
  border-color: #a79870;
  color: #fff;
  font-weight: 700;
}
#kbl-crumb {
  display: none !important;
}
#product_list .kb-cathead__crumb a {
  color: #777;
  font-weight: 400;
  text-decoration: underline;
}
#one_maincolumn .kb-cathead {
  margin: 20px 0 10px;
}
.kbl-subtitle[hidden] {
  display: none !important;
}
#one_maincolumn .kb-cathead__crumb {
  display: none;
}

/* カテゴリ絞り込み */
.kbl-cat {
  margin: 10px;
}
#one_maincolumn .kbl-cat {
  margin: 20px 0;
}
#product_list .kbl-cat__ttl,
#one_maincolumn .kbl-cat__ttl {
  font-size: 14px;
  color: #555;
  margin: 0 0 8px;
}
.kbl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.kbl-chips li {
  margin: 0;
  padding: 0;
  border: 0;
}
#product_list .kbl-chips a,
#one_maincolumn .kbl-chips a {
  display: block;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  color: #555;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 6px 10px;
  text-decoration: none;
}
#product_list .kbl-chips a.is-current,
#one_maincolumn .kbl-chips a.is-current {
  background: #3b2a33;
  border-color: #3b2a33;
  color: #fff;
  font-weight: 700;
}

/* 件数・並び替え（1件のときは並び替え非表示） */
#product_list .intro {
  margin: 14px 10px 8px;
  font-size: 14px;
  color: #555;
}
#product_list.kbl-single .sort,
#one_maincolumn.kbl-single .change {
  display: none;
}
/* PC：並び替えバーと商品一覧の間を上下とも20pxに（ページ番号が空のときはJSで非表示） */
#one_maincolumn > nav:first-of-type {
  margin-bottom: 0;
}
#one_maincolumn .pagenumber_area .change {
  margin-bottom: 0;
}
#one_maincolumn .pagenumber_area .navi.is-empty {
  display: none;
}

/* 商品カード（PC：高さをそろえ、価格から下をカードの下端に寄せる） */
#one_maincolumn #products_list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 15px;
  align-items: stretch;
  margin: 20px 0;
}
#one_maincolumn #products_list .list_area {
  display: flex;
  flex-direction: column;
  width: auto;
  box-sizing: border-box;
}
#one_maincolumn #products_list .product_name {
  height: auto !important;
  margin: 0;
}
#one_maincolumn #products_list .product_name h3 {
  margin: 0;
}
#one_maincolumn #products_list .pricebox {
  margin: 2px 0 0;
  text-align: left;
}
#one_maincolumn #products_list .listcomment {
  margin: 6px 0 0;
}
#one_maincolumn #products_list .kbl-card__cart {
  padding-top: 10px;
}
@media screen and (max-width: 768px) {
  #one_maincolumn #products_list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media screen and (max-width: 520px) {
  #one_maincolumn #products_list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 商品カードの表示項目：画像／商品名／価格／レビュー／カートボタン のみ
   アイコン・キャッチ・一覧コメント（管理画面のHTML）は非表示。レビューはJSがコメントから取り出して価格の上に表示
   文字サイズ　PC：価格22px／商品名16px／レビュー13px　SP：価格20px／商品名15px／レビュー12px */
#one_maincolumn #products_list .status_icon,
#one_maincolumn #products_list .product_catch,
#one_maincolumn #products_list .listcomment,
#product_list .kbl-card__icon,
#product_list .kbl-card__catch,
#product_list .kbl-card__comment {
  display: none;
}
#one_maincolumn #products_list .product_name h3,
#one_maincolumn #products_list .product_name h3 a {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: #2b2b2b;
}
#one_maincolumn #products_list .pricebox .price {
  font-size: 22px;
  line-height: 1.3;
}
#one_maincolumn #products_list .pricebox .mini {
  font-size: 12px;
}
#one_maincolumn #products_list .kbl-card__review {
  margin: auto 0 0; /* レビューから下（レビュー・価格・ボタン）をカード下端にそろえる */
  padding-top: 10px;
  font-size: 16px;
  line-height: 1.6;
  color: #555;
  text-align: left;
}

#product_list .kbl-card__name,
#product_list .kbl-card__name a {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  color: #2b2b2b;
}
#product_list .kbl-card__price .price {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
}
#product_list .kbl-card__price .x-mini {
  font-size: 12px !important;
}
#product_list .kbl-card__review {
  margin: 4px 0 0;
  font-size: 14px !important;
  line-height: 1.6;
  color: #555;
  text-align: left;
}

/* カートに入れるボタン（PC・SPとも赤） */
#one_maincolumn #products_list .list_area input[type="submit"] {
  display: block;
  width: 100%;
  height: 46px;
  padding: 0;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: #bf0000;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  transition: opacity 0.2s;
}
#one_maincolumn #products_list .list_area input[type="submit"]:hover {
  color: #fff;
  background: #bf0000;
  opacity: 0.85;
}
#product_list .list_area .ui-input-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  margin: 0;
  padding: 0;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: #bf0000;
  border: 0;
  border-radius: 8px;
  box-shadow: none;
  text-shadow: none;
}

/* 商品カード（SP：2列。商品名は上から、価格・レビュー・ボタンは左寄せでカード下端にそろえる） */
#product_list .kbl-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 10px;
  row-gap: 30px;
  margin: 0;
  padding: 0 10px;
}
#product_list .kbl-cards .list_area {
  display: flex;
  flex-direction: column;
  width: auto;
  margin: 0;
  padding: 10px;
  border: 1px solid #efefef; /* PCのカードと同じ枠線 */
  border-radius: 4px;
  background: #fff;
  box-sizing: border-box;
}
#product_list .kbl-cards .kbl-card__name {
  margin: 8px 0 0;
}
#product_list .kbl-cards .kbl-card__review {
  margin-top: auto; /* レビューから下（レビュー・価格・ボタン）をカード下端にそろえる */
  padding-top: 6px;
}
#product_list .kbl-cards .kbl-card__price {
  margin: 2px 0 0;
  text-align: left;
}
#product_list .kbl-cards .list_area > form {
  padding-top: 8px;
}
#product_list .kbl-cards .list_area > p:empty {
  display: none;
}
#product_list .kbl-stars,
#one_maincolumn .kbl-stars {
  color: #8a5a00;
  font-weight: 700;
  white-space: nowrap;
}

/* 条件で探す（お悩み・年齢） */
.kbl-filter {
  margin: 20px 10px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
}
.kbl-filter summary {
  position: relative;
  display: block;
  padding: 12px 40px 12px 14px;
  font-size: 15px;
  font-weight: 700;
  color: #3b2a33;
  cursor: pointer;
  list-style: none;
}
.kbl-filter summary::-webkit-details-marker {
  display: none;
}
.kbl-filter summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  width: 8px;
  height: 8px;
  margin-top: -6px;
  border-right: 2px solid #3b2a33;
  border-bottom: 2px solid #3b2a33;
  transform: rotate(45deg);
}
.kbl-filter[open] summary::after {
  margin-top: -2px;
  transform: rotate(-135deg);
}
.kbl-filter__body {
  padding: 0 14px 4px;
}
#product_list .kbl-filter__ttl {
  font-size: 14px;
  color: #555;
  margin: 4px 0 8px;
}
.kbl-filter__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  list-style: none;
}
.kbl-filter__list li {
  width: 49%;
  margin: 0 0 10px;
}
.kbl-filter__list--3 li {
  width: 32%;
}
#product_list .kbl-filter__list a {
  display: block;
  padding: 12px 0;
  text-align: center;
  font-size: 14px;
  color: #333;
  border: 1px solid #eb8195;
  background: #ffd8df;
  border-radius: 10px;
  text-decoration: none;
}

/* カテゴリー説明文（ページ下部・管理画面で ct_text を付与。SPのみ左右に10pxの余白） */
#main-content .ct_text {
  padding: 0 10px;
  box-sizing: border-box;
}

/* 上部バナー（商品一覧の下へ移動） */
.kbl-banner {
  margin: 0 0 14px;
}

/* =========================================================
   SP専用（SPレイアウトの <style> から移設）
   PCに同じクラスがあるもの（.on_number 等）は SPページにだけある [data-role="page"] で限定
   ※ランキングの「カートに入れる」(.product_btn) の見た目はランキング側の <style> で管理（ここでは指定しない）
   ========================================================= */

/* カートボタン・並び替えの枠色 */
#form .ui-input-btn
{
background: #bf0000;
color: #fff;
}

.ui-navbar .ui-grid-a > .ui-block-a, .ui-navbar .ui-grid-a > .ui-block-b
{
border: 1px solid #ddcaa9;
}

[data-role="page"] .on_number a:link,
[data-role="page"] .on_number a:visited
{
background: #ddcaa9;
border: 1px solid #ddcaa9;
}

/* 並び替えボタン・ページ送り（SP） */
@media screen and (max-width: 768px) {
#product_list .sort
{
margin-top: 1rem;
background: #fff !important;
}

#product_list .sort ul,
#product_list .sort.ui-navbar ul
{
display: flex !important;
flex-wrap: wrap;
justify-content: space-between;
margin: 0 !important;
padding: 0 10px !important;
list-style: none;
background: #fff !important;
}

#product_list .sort li,
#product_list .sort.ui-navbar .ui-grid-a > .ui-block-a,
#product_list .sort.ui-navbar .ui-grid-a > .ui-block-b
{
float: none !important;
width: calc((100% / 2) - 5px) !important; /* 2列・ボタンの間隔10px（商品カードと同じ） */
margin-bottom: 1rem;
border: none;
background: #fff !important;
}

#product_list .sort li a,
#product_list .sort.ui-navbar .ui-btn
{
display: block !important;
margin: 0 !important;
padding: 1rem !important;
text-align: center !important;
border: 1px solid #eb8195 !important;
background: #fff !important;
border-radius: 10px !important;
color: #333 !important;
font-weight: normal !important;
text-shadow: none !important;
box-shadow: none !important;
}

#product_list .sort li.on_number a,
#product_list .sort.ui-navbar li.on_number .ui-btn
{
background: #eb8195 !important;
border-color: #eb8195 !important;
color: #fff !important;
}

#product_list .sort li.on_number,
#product_list .sort.ui-navbar li.on_number
{
background-color: transparent !important;
}

#product_list .sort:before,
#product_list .sort ul:before,
#product_list .sort.ui-navbar .ui-grid-a:before
{
content: none !important;
display: none !important;
}

#product_list .sort:after,
#product_list .sort ul:after
{
content: none !important;
display:none !important;
}

.page_nav
{
margin: 20px 0;
text-align: center;
}

.page_nav .ui-controlgroup-controls
{
display: inline-flex;
align-items: stretch;
justify-content: center;
flex-wrap: wrap;
}

.page_nav a.ui-btn
{
display: inline-flex !important;
align-items: center;
justify-content: center;
box-sizing: border-box;
min-width: 44px;
min-height: 44px;
padding: 0 13px !important;
border: 1px solid #eb8195 !important;
background: #fff !important;
color: #333 !important;
font-size: 14px !important;
font-weight: normal !important;
line-height: 1.2 !important;
text-shadow: none !important;
box-shadow: none !important;
}

.page_nav a.on_number,
.page_nav a.on_number.ui-btn
{
background: #d5577a !important;
background-color: #d5577a !important;
border-color: #d5577a !important;
color: #fff !important;
font-weight: bold !important;
}

.page_nav a.ui-first-child
{
border-radius: 4px 0 0 4px !important;
}

.page_nav a.ui-last-child
{
border-radius: 0 4px 4px 0 !important;
}
}