/* 中村忠三郎商店 PCトップページ 見やすさ改善用CSS */
/* 既存CSSの一番下に追加してください。既存の商品データや表示件数は変更しません。 */

/* 1. 商品名：読みやすい文字サイズと行間 */
.seller__section .product-list__name,
.recommend__section .product-list__name {
  display: block;
  font-size: 14px !important;
  line-height: 1.75 !important;
  letter-spacing: .015em;
  color: #453c34;
  overflow-wrap: anywhere;
  margin-top: 10px;
}

/* 2. 商品価格：名前との区別を明確に */
.seller__section .product-list__prices,
.recommend__section .product-list__prices {
  margin-top: 9px;
  line-height: 1.6;
}
.seller__section .product-list__price,
.recommend__section .product-list__price {
  font-size: 14px;
  font-weight: 600;
}

/* 3. 商品カード：縦の余白を確保 */
.seller__section .product-list__unit,
.recommend__section .product-list__unit {
  box-sizing: border-box;
  padding-bottom: 26px;
}
.seller__section .product-list__image,
.recommend__section .product-list__image {
  max-width: 100%;
  height: auto;
}

/* 4. 見出し：FAQと調和する生成り色・深緑 */
.seller__section .section__title-h2,
.recommend__section .section__title-h2,
.special__section .section__title-h2 {
  background: #f4f0e8;
  color: #385c49;
  border-left: 4px solid #9cae9a;
  border-bottom: none;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.6;
  padding: 12px 16px;
  margin-bottom: 20px;
}

/* 5. 特集画像：枠内に収める */
.special__section .special__item {
  box-sizing: border-box;
  padding: 0 9px;
  margin-top: 18px;
}
.special__section .special__item img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 5px;
}

/* 6. リンク操作：マウスを重ねた時にわかりやすく */
.seller__section .product-list__link:hover,
.recommend__section .product-list__link:hover,
.special__section .special__item a:hover {
  opacity: .88;
}

/* スマホ幅でも崩れにくい保険（PC用テンプレートが縮小表示された場合） */
@media (max-width: 767px) {
  .seller__section .product-list__name,
  .recommend__section .product-list__name { font-size: 13px !important; }
  .seller__section .section__title-h2,
  .recommend__section .section__title-h2,
  .special__section .section__title-h2 { font-size: 16px; }
}




#wrap {
        width:100%;
        display:-webkit-flexbox;
        display:-moz-flexbox;
        display:-ms-flexbox;
        display:-o-flexbox;
        display:flexbox;
        display:flex;
        justify-content:space-between;
        flex-wrap:wrap;
        align-items:center;
}

th,td{
  border:solid 0px #aaaaaa;
  color: #543f32; /*文字色*/
  background-color: #fbfaf5; /*背景色*/
  text-align: center;
}

.special__section--inner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
-ms-flex-wrap: wrap;
} 

.special__item {
width: 50%;
margin-top: 20px;
} 

.special__item--text {
margin-top: 10px;
text-align: center;
}

sub-list.group-list {
margin-top: 30px
}

/* ==============================================
   中村忠三郎商店 PC版トップページ
   商品名・価格・商品間の余白の微調整（追記用）
   既存CSSの一番下に追加してください。
   ============================================== */

/* 今週のランキング・新入荷／再入荷のみに適用 */
.seller__section .product-list__name,
.recommend__section .product-list__name {
  display: block;
  font-size: 14px;
  line-height: 1.7;
  font-weight: 500;
  overflow-wrap: anywhere;
  margin-top: 10px;
  margin-bottom: 7px;
}

/* 価格を商品名より少し目立たせる */
.seller__section .product-list__prices,
.recommend__section .product-list__prices {
  margin-top: 8px;
  line-height: 1.6;
}
.seller__section .product-list__price,
.recommend__section .product-list__price {
  font-size: 14px;
  font-weight: 700;
}

/* 商品カード同士の縦の間隔を少し広げる */
.seller__section .product-list__unit,
.recommend__section .product-list__unit {
  margin-bottom: 24px;
}

/* 商品説明がある場合は本文より控えめに */
.seller__section .product-list__expl,
.recommend__section .product-list__expl {
  font-size: 12px;
  line-height: 1.6;
}

/* PC版トップページ：ランキング・新入荷の価格位置を揃えるための追記CSS */
/* 既存のCSSの一番下に追加してください。 */

/* 商品名に共通の表示スペースを確保し、価格の開始位置を揃えます */
.seller__section .product-list__name,
.recommend__section .product-list__name {
  display: block;
  min-height: 6.6em; /* 14px前後の文字で約4行分。必要に応じて調整 */
  box-sizing: border-box;
}

/* 商品説明がある場合も価格との間隔を自然にします */
.seller__section .product-list__prices,
.recommend__section .product-list__prices {
  margin-top: 8px;
}

/* スマートフォン幅では固定の高さを解除します（PC版への追記でも安全に） */
@media screen and (max-width: 767px) {
  .seller__section .product-list__name,
  .recommend__section .product-list__name {
    min-height: 0;
  }
}


/* =========================================
   PCトップページ：ランキング順位の装飾
   既存レイアウト・寸法・配置は変更しない
   1位〜12位に対応
   ========================================= */

.seller__section .rank-number {
  background: #fff4e9 !important;
  color: #76503d !important;
  border-radius: 44% 56% 48% 52% / 52% 46% 54% 48% !important;
  box-shadow: inset 0 0 0 1px #d6b6a4;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
}

/* 1位：淡い金色 */
.seller__section .rank-number-color--1 {
  background: #f6dfae !important;
  color: #765124 !important;
  box-shadow: inset 0 0 0 1px #c7a05e;
}

/* 2位：淡い青みグレー */
.seller__section .rank-number-color--2 {
  background: #e6e9e7 !important;
  color: #52645f !important;
  box-shadow: inset 0 0 0 1px #a2b1ac;
}

/* 3位：淡いピンクベージュ */
.seller__section .rank-number-color--3 {
  background: #efd5c6 !important;
  color: #855641 !important;
  box-shadow: inset 0 0 0 1px #c99b82;
}

/* 4〜12位：生成り色で統一 */
.seller__section .rank-number-color--4,
.seller__section .rank-number-color--5,
.seller__section .rank-number-color--6,
.seller__section .rank-number-color--7,
.seller__section .rank-number-color--8,
.seller__section .rank-number-color--9,
.seller__section .rank-number-color--10,
.seller__section .rank-number-color--11,
.seller__section .rank-number-color--12 {
  background: #fff4e9 !important;
  color: #76503d !important;
}


/* =====================================
   PCランキング：水彩ブラシ風デザイン
   既存の順位配置・商品レイアウトを維持
   ===================================== */

.seller__section .rank-number {
  position: relative;
  isolation: isolate;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #634739 !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.55);
}

/* 数字の背後に不規則な筆跡を描画 */
.seller__section .rank-number::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 1px -3px;
  background: #ead0bf;
  clip-path: polygon(
    4% 25%, 18% 13%, 34% 18%,
    52% 7%, 73% 16%, 97% 10%,
    88% 32%, 100% 44%, 90% 57%,
    96% 78%, 73% 82%, 56% 94%,
    31% 85%, 12% 91%, 3% 69%,
    12% 51%, 0 39%
  );
  opacity: .85;
  transform: rotate(-7deg);
}

/* 筆跡のかすれを重ねる */
.seller__section .rank-number::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 5px 0;
  background: rgba(255,255,255,.18);
  clip-path: polygon(
    0 12%, 80% 0, 100% 16%,
    32% 38%, 100% 55%,
    75% 68%, 0 57%
  );
  transform: rotate(-7deg);
}

/* 1位：淡い金色 */
.seller__section .rank-number-color--1::before {
  background: #e9c477;
}

/* 2位：淡い水色 */
.seller__section .rank-number-color--2::before {
  background: #bfd9db;
}

/* 3位：淡い珊瑚色 */
.seller__section .rank-number-color--3::before {
  background: #e5b7a4;
}

/* 4〜12位：柔らかなピンクベージュ */
.seller__section .rank-number-color--4::before,
.seller__section .rank-number-color--5::before,
.seller__section .rank-number-color--6::before,
.seller__section .rank-number-color--7::before,
.seller__section .rank-number-color--8::before,
.seller__section .rank-number-color--9::before,
.seller__section .rank-number-color--10::before,
.seller__section .rank-number-color--11::before,
.seller__section .rank-number-color--12::before {
  background: #ead0bf;
}