/*
 Theme Name:   Woodmart Child
 Theme URI:    https://woodmart.xtemos.com/
 Description:  ThemeForest Premium Theme
 Author:       XTemos
 Author URI:   http://themeforest.net/user/xtemos
 Template:     woodmart
 Version:      7.4.2
*/

/* 在此添加你的自定义 CSS */
/* ============================================================
   KUMOJU 商品詳細ページ — Woodmart Child 子主題 追加スタイル
   源設計：kumoju-mobile.html（.pd-* 系）
   作用域：.single-product 限定（不影响首页/列表/结算等）
   構築ブロック順：① 画像ギャラリー → ③ 価格/変体/加購 → ⑦ 吸底 …
   ------------------------------------------------------------
   貼り付け先：子テーマ style.css の末尾（SiteGround ファイルマネージャ）
             ／お試しは 外観→カスタマイズ→追加CSS でも可
   ============================================================ */

/* ---------- 設計トークン（商品ページ ＋ カート ＋ チェックアウト） ----------
   ⚠️ .woocommerce-checkout を足したのは 2026-08-07。
      返品特約（inc/kumoju-legal.php）を「注文する」ボタンの直前にも
      出すようにしたため。ここに無いと var(--k-*) が全部空になり、
      あの枠だけ地の色も罫線も付かない。 */
.single-product,
.woocommerce-cart,
.woocommerce-checkout{
  --k-cream:#F5F0E6; --k-cream2:#FBF7EF; --k-paper:#FEFCF7;
  /* グレー階調：カッコ内は クリーム地 #F5F0E6 に対するコントラスト比
      ink 9.93 / ink2 5.34 / ink3 4.18 / faint 3.30。
      見た目の明るさ(L*)の差を +17 / +7 / +7 と均等に開けて主従を保つ。 */
  --k-ink:#3F3A32;   --k-ink2:#69624F;   --k-ink3:#7B7261; --k-faint:#8C8371;
  --k-line:#EAE1D0;  --k-terra:#C79B87;  --k-terra-t:#F3E9DE;
  --k-sage:#9DB09A;  --k-sage-d:#556347; --k-sage-t:#E7ECE1;   /* 3.58 → 5.36 */
}

/* ============================================================
   ページ背景を KUMOJU クリームに（効果図と統一）
   ============================================================ */
body.single-product,
body.single-product .main-page-wrapper,
body.single-product .site-content,
body.single-product .content-area,
body.single-product #main-page-wrapper{
  background-color:var(--k-cream) !important;
}
/* summary の白背景を解除してクリームを透かす */
.single-product .summary.entry-summary,
.single-product .summary-inner,
.single-product .product-image-summary,
.single-product .product-image-summary-inner{
  background:transparent !important;
}

/* ============================================================
   ヘッダーの地色（⚠️ 商品ページだけでなく全ページに効く）
   ------------------------------------------------------------
   原型のヘッダーはクリーム地（rgba(245,240,230,.9)）。
   実盤は Woodmart の既定で白のままだったので、
   クリームのページの上に白い帯が 1 本乗っている状態だった。

   ⚠️ ここだけ .single-product を前に付けていない。ヘッダーは全ページ
      共通で、商品ページだけ色が違うと、移動したときに帯の色が変わって
      見えるため。他ページの見え方も一緒に変わる。
   ⚠️ 白は Woodmart の .whb-color-dark:not(.whb-with-bg) が当てている。
      同じ詳細度では勝てないので、こちらも 2 つ重ねる。

   ⚠️⚠️ **2026-09-23：クリーム #F5F0E6 → 白にした**（用户「页眉的那个背景你给我统一成白色底吧」）。
      それまでの実測：棚・首頁・/items/ は #F5F0E6、**商品ページだけ #F6F1E9**（下の 第 24 版）
      ＝ 頁を移ると 帯の色が変わっていた。«統一» はその食い違いを指している。
      ⚠️ Woodmart の既定が もともと白なので、値を #fff にするのは
         «この上書きをやめる» のと同じこと。セレクタは残す —— 戻したくなったら
         値を #F5F0E6 に書き戻すだけで済む（消すと 詳細度の積み方から作り直しになる）。
      ⚠️ 商品ページ側も 第 24 版から .whb-* を外してある。**片方だけ直すと また食い違う。**
   ============================================================ */
.whb-header .whb-general-header.whb-color-dark:not(.whb-with-bg){
  background-color:#fff;
}

/* ⚠️ ページ下半分（この品について／お客さまの声／関連商品）の下に、
      Woodmart が真っ白な板を 1 枚敷いている
      （.product-tabs-wrapper に --bgcolor-white）。
      原型の下半分はクリーム地で、その上に生成りのカードが乗っている。
      白のままだと、カードの縁が消えて「白い紙に直接書いた」ように見える。 */
.single-product .product-tabs-wrapper{
  background-color:transparent;
}

/* ============================================================
   ① 画像ギャラリー（整屏大图 / big image）
   実盤 DOM:
   .product-images
     └ .wd-carousel-container.wd-gallery-images
         └ figure.woocommerce-product-gallery__wrapper
             └ .wd-carousel-item
                 └ figure.woocommerce-product-gallery__image > a > img
     └ .wd-nav-arrows（左右箭头）
   ============================================================ */

/* 主图列：去掉左右内边距，让大图铺满 */
.single-product .product-image-summary-inner .product-images{
  padding-left:0;
  padding-right:0;
}
/* Woodmart 在移动端给画廊容器加的 margin-bottom:25px 会撑出大空隙 → 压掉 */
@media (max-width:768.98px){
  .single-product .product-image-summary-inner > div{
    margin-bottom:0 !important;
  }
}

/* 画廊容器：清掉主题默认外边距/圆角。
   地色は原型 .pd-hero（L59〜：paper）にそろえる。
   cream2 だと、写真の余白部分だけ 1 段くすんで見える。 */
.single-product .wd-gallery-images{
  margin:0;
  border-radius:0;
  background:var(--k-paper);
}

/* 主图：铺满整列、强制 1:1 正方形、cover 裁切、无圆角无阴影 */
.single-product .wd-gallery-images .woocommerce-product-gallery__image,
.single-product .wd-gallery-images .woocommerce-product-gallery__wrapper,
.single-product .wd-gallery-images .wd-carousel-item,
.single-product .wd-gallery-images figure{
  border-radius:0 !important;
  box-shadow:none;
  overflow:hidden;
}
.single-product .wd-gallery-images .woocommerce-product-gallery__image img{
  width:100%;
  aspect-ratio:1 / 1;
  height:auto;
  object-fit:cover;
  border-radius:0 !important;
  display:block;
  /* 铺满：不留四周空隙 */
  border:none;
  box-sizing:border-box;
  /* ⚠️ 白を敷かない。透過 PNG の商品画像で、
        画像の外（paper）と中（白）に色の段差ができる。 */
  background:transparent;
}

/* 左右箭头：桌面端保留但做成极简暖色；移动端隐藏（靠滑动/缩略图） */
.single-product .wd-gallery-images .wd-nav-arrows .wd-btn-arrow{
  background:rgba(254,252,247,.86);
  box-shadow:0 4px 14px rgba(120,105,80,.12);
}
.single-product .wd-gallery-images .wd-nav-arrows .wd-arrow-inner::before{
  color:var(--k-ink2);
}
@media (max-width:768.98px){
  .single-product .wd-gallery-images .wd-nav-arrows{ display:none; }
}

/* ------------------------------------------------------------
   ↓ 缩略图排（.pd-thumbs 相当）
   ※ 現状 DOM に缩略图排がない（Woodmart 設定＝缩略图 "無し"）。
     Woodmart→Single Product→Gallery→缩略图位置＝下方 に切替後、
     実際の DOM を再エクスポートしてから下記を確定します。
     （下は想定クラスの暫定スケルトン。開通後に実クラスへ差し替え）
------------------------------------------------------------ */
/*
.single-product .wd-gallery-thumbnails .wd-carousel-item img{
  width:56px; height:56px; object-fit:cover;
  border-radius:10px; border:1px solid var(--k-line);
}
.single-product .wd-gallery-thumbnails .wd-carousel-item.wd-active img{
  border:2px solid var(--k-terra);
}
*/


/* ============================================================
   ③ 商品本体（标题 / 评分 / 价格 / 描述 / 变体 / 数量 / 加购）
   実盤 DOM（.summary-inner 内、上から）:
   h1.product_title.entry-title
   .woocommerce-product-rating .star-rating
   p.price > .woocommerce-Price-amount.amount
   .woocommerce-product-details__short-description
   form.variations_form.cart
     table.variations
       th.label.cell > label（サイズ / カラー）
       td.value.cell > .cfvsw-swatches-container
         .cfvsw-swatches-option.cfvsw-label-option（サイズ=文字ボタン）
         .cfvsw-swatches-option.cfvsw-image-option（カラー=画像）
     .single_variation_wrap .quantity（.minus/.qty/.plus）
     button.single_add_to_cart_button.button.alt
   .wd-compare-btn（Compare）/ .wd-products-nav（Back to products）
   .wd-wishlist-btn（Add to wishlist）
   ============================================================ */

/* --- 概略の余白（本体列に少しゆとり）--- */
.single-product .summary-inner{ padding-top:4px; }

/* --- 不要な Woodmart 部品を隠す --- */
.single-product .wd-products-nav,          /* Back to products */
.single-product .wd-compare-btn{ display:none !important; }  /* Compare */

/* --- 商品名（.pd-name）---
   ⚠️ 25px。原型（大きめ版）の 28.5px から下げた（用户 2026-08-09「大きすぎる・2行に収めて」、
      そのあと「もう少しだけ大きく」で 22px → 25px に戻した）。
      根拠は 2 つ:
        ① 商品名は最長 28 字と決めてある（skill の「标题怎么写」）。
           本文列の実効幅は 390px 端末で 360px なので、25px なら 1 行 14.4 字 ＝
           28 字がちょうど 2 行。ルールを守るかぎり 3 行に溢れない。
        ② 同業を実測（CDP）すると 字号は「標題の長さ」と反比例していた:
             pf-pets（ブランド型自社EC）27.2px / 36 字
             ディアペット・minne（キーワード羅列型）16px / 53〜65 字
           KUMOJU は 27 字の短いほうなので 大きめでも良いが、
           28.5px だと 3 行 124px を占めて 価格より目立ってしまっていた。
      ⚠️ 字号を上げるときは 32 字が 2 行に収まるか probe.js で測ってから。 */
.single-product h1.product_title.entry-title{
  font-family:var(--k-serif,'Shippori Mincho',serif);
  font-size:25px;
  font-weight:600;
  line-height:1.45;
  color:var(--k-ink);
  margin:10px 0 8px;
}

/* --- 評価（控えめに）--- */
.single-product .summary-inner .woocommerce-product-rating{ margin-bottom:8px; }

/* --- 価格（.pd-price：kumoju-mobile.html L363-365）---
   金額と「税込 / 送料別」を baseline 揃えで横並び。
   サイズを選ぶと JS が単価に差し替える（Woo 既定の範囲表示 → 原型と同じ単価）*/
.single-product p.price{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:10px;                    /* = .pd-price gap */
  font-family:var(--k-serif,'Shippori Mincho',serif);
  color:var(--k-ink);
  margin:18px 0 10px;          /* = .pd-price margin:18px 0 ＋ 原型のインライン 10px */
}
/* ⚠️ 27px。原型（大きめ版）の 31.5px から下げた（用户 2026-08-09）。
      31.5px だと ページでいちばん大きい字が値段になり、商品名より 4 割以上大きかった。
      同業を実測（CDP）すると:
        pf-pets（ブランド型自社EC）  値段 17.5px ＝ 商品名の 0.64 倍
        ディアペット（価格訴求型）    値段 24px  ＝ 商品名の 1.5 倍
      うちは「安さ」で戦う品ではないので、値段を主役にはしない。
      ただし可変商品は値段が変わるので 見落とされても困る ―― 商品名（25px）より
      ほんの少しだけ大きい 27px（1.08 倍）にして、順位だけ保つ。
      ⚠️ この 1.08 倍という比を崩さないこと。どちらかだけ動かすと
         「値段が主役」か「値段が埋もれる」のどちらかに倒れる。 */
.single-product p.price .woocommerce-Price-amount{
  font-size:27px;              /* = .pd-price .pv（原型は 31.5px） */
  font-weight:600;
  line-height:1.2;
  color:var(--k-ink);
}
/* 原型は「¥」も本文と同じ大きさ（縮小しない）*/
.single-product p.price .woocommerce-Price-currencySymbol{ font-size:inherit; }
/* 未選択時の「〜」（最小価格から、の意）*/
.single-product p.price .k-price-from{
  font-size:17px;              /* 金額 27px に対する比を 原型（20/31.5）と同じに保つ */
  font-weight:500;
  color:var(--k-ink3);
  margin-left:-4px;
}
/* 「税込・送料無料」（= .pd-price small）を金額の右へ。
   ⚠️ 2026-08-15 まで「税込 / 送料別」だった。すぐ下に太字で
      「全国送料無料」と書いてあるので、同じ画面で矛盾していた
      （特商法ページも 全国送料無料）。送料は取らないのが本当なので、
      注記のほうを直す。送料を取る運用に変えるときは 3 か所同時に直すこと：
      ここ ／ 購入エリアの「全国送料無料」／ inc/kumoju-legal.php */
.single-product p.price::after{
  content:"税込";  /* 2026-10-08 送料にしきい値（¥5,500）を入れたので «送料無料» を外した */
  font-family:var(--k-gothic,'Zen Maru Gothic',sans-serif);
  font-size:14px;              /* 注記。本文より一段小さく、色も一段淡く */
  font-weight:500;
  color:var(--k-ink3);
}
/* 変体を選ぶと出る価格ブロックは上の価格行にミラーするので隠す（二重表示防止）*/
.single-product .woocommerce-variation-price{ display:none !important; }

/* --- ポイント還元（.ptpill：kumoju-mobile.html L104-105）---
   JS が価格行の直後に差し込む。金額は 表示価格 ×10% の切り捨て */
.single-product .k-pt{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 20px;             /* = 原型のインライン margin-bottom:20px */
}
.single-product .k-pt-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 12px;
  border:1px solid #EFD9B8;
  border-radius:99px;
  background:#FDF3E3;
  color:#7E6236;   /* 3.59 → 5.18 */
  font-family:var(--k-gothic,'Zen Maru Gothic',sans-serif);
  font-size:15.5px;
  font-weight:700;
  line-height:normal;
}
.single-product .k-pt-pill i{
  flex:none;
  width:19px; height:19px;      /* 文字を大きくした分、丸も広げる */
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:#E2B15C;
  color:#fff;
  font-style:normal;
  font-size:12px;
  font-weight:700;
}
/* 「ご購入金額の10%をポイントで」＝ 読み飛ばしてほしくない注記なので
   飾り(faint)ではなく注記(ink3)の階調に置く */
.single-product .k-pt-note{
  font-family:var(--k-gothic,'Zen Maru Gothic',sans-serif);
  font-size:13.5px;
  font-weight:500;
  color:var(--k-ink3);
}

/* --- 短い説明（.pd-desc）--- */
.single-product .woocommerce-product-details__short-description{
  font-size:15.5px;
  line-height:1.9;
  color:var(--k-ink2);
  margin:0 0 14px;   /* JS で商品名の直下に移すので、下の価格との間だけ空ける */
}
/* ⚠️ 以前ここで「簡単な説明」をまるごと隠していたが、
   原型の .pd-desc に当たるのはこの欄なので、表示に戻した。
   旧テーマ時代の巨大な HTML テーブルが残っている商品は、
   商品編集画面の「簡単な説明」を原型のような 1〜2 行に書き直すこと。 */

/* --- 変体：ラベル（サイズ / カラー）を上に、太字小見出しに --- */
.single-product form.variations_form table.variations,
.single-product form.variations_form table.variations tbody,
.single-product form.variations_form table.variations tr{
  display:block; width:100%;
}
.single-product form.variations_form table.variations tr{ margin-bottom:16px; }
/* Woodmart は変体選択時に table へ margin-bottom を動的付与する（下が急に空く）→ 固定 */
.single-product form.variations_form table.variations{
  margin-bottom:15px !important;
  transition:none !important;
}
.single-product form.variations_form table.variations tr:last-child{ margin-bottom:0; }
/* 選択後に出る変体情報ブロックの余白も詰める */
.single-product .single_variation_wrap{ margin:0; }
.single-product .woocommerce-variation.single_variation{ margin:0; }
.single-product .woocommerce-variation.single_variation:empty{ display:none; }
.single-product form.variations_form table.variations th.label,
.single-product form.variations_form table.variations td.value{
  display:block; width:100%; padding:0; border:none;
}
.single-product form.variations_form table.variations th.label label{
  font-family:var(--k-gothic,'Zen Maru Gothic',sans-serif);
  font-size:17px;
  font-weight:700;
  color:var(--k-ink);
  margin-bottom:9px;
}

/* --- 変体（サイズ / カラー）：自前のボタン（= .sizes .size）---
   JS が <select> をボタン化。プラグイン不要。
   1 行内で均等割り・数が増えたら折り返しても等幅を維持 */
.single-product .k-hidden-select{ display:none !important; }

.single-product .k-swatch-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(88px, 1fr));
  gap:9px;
  width:100%;
}
.single-product .k-swatch{
  box-sizing:border-box;
  /* Woodmart の button は inline-flex＋大文字化＋太字 → 2 行に組めないので打ち消す */
  display:block !important;
  text-transform:none !important;
  letter-spacing:normal !important;
  width:100%;
  min-width:0;
  height:auto;
  margin:0;
  padding:11px 3px;             /* 文字が大きくなる分、左右を詰めて折り返しを防ぐ */
  border:1px solid var(--k-line);
  border-radius:12px;
  background:var(--k-paper);
  color:var(--k-ink);
  font-family:'M PLUS Rounded 1c',sans-serif;
  line-height:1.35;
  text-align:center;
  white-space:normal;
  cursor:pointer;
  transition:.15s;
}
/* --- 選択肢が少ない軸は 横 1 行のラジオ行にする（用户 2026-08-12）---
   ○ ＋ 印 ＋ 名前／小さい説明。大きさの軸は今までどおりのタイル。
   いま該当するのは 色（印＝材質色の四角）と 向き（印＝縦長／横長の枠）。

   ⚠️ 横幅がぎりぎり。実測（390px 端末・グリッド 360px・2 列・1 マス 176px）：
        枠 2 ＋ 余白 7×2 ＋ ○15 ＋ 隙間 5×2 ＋ 印 22 = 64.5
        → 名前に使えるのは 111.5px。「ウォールナット」は 15.6px で 109.2px。
        余りは 2.3px しかないが、字を小さくするより サイズのタイルと
        同じ字の大きさを保つほうを取った（下の折り返しの保険つき）。
      ⚠️ 余白・隙間・色見本を動かしたら probe.js で測り直すこと。
         scrollWidth は はみ出していなくても clientWidth に丸まるので
         当てにならない —— Range.getClientRects() で実寸を測る。
   ⚠️ 名前は折り返させる（nowrap にしない ＋ overflow-wrap）。辞書に無い
      長い材質名が来ても 切れるのではなく 2 行になって収まる ――
      壊れ方として こちらが軽い。
   ⚠️ 並べ替えはグリッドでやる。JS 側でラッパー要素を挟まないので、
      色以外の軸と DOM の形が変わらない。 */
.single-product .k-swatch-grid--radio{
  grid-template-columns:repeat(2, 1fr);
}
.single-product .k-swatch-grid--radio .k-swatch{
  display:grid !important;          /* .k-swatch の block !important を上書き */
  grid-template-columns:auto auto 1fr;
  /* ⚠️ 行も明示すること。書かないと 明示グリッドが 0 行になり、下の
        grid-row:1 / -1 が「1 行目だけ」に潰れる。すると色見本の高さが
        名前の行を押し広げ、小さい説明との間に妙な隙間が空く（2026-08-12）。 */
  grid-template-rows:auto auto;
  align-items:center;
  /* ⚠️ 行そのものも中央に寄せる。片方だけ差額の行が増えると（縦向きは 2 行、
        横向きは 3 行）グリッドの stretch で高さはそろうが、行数の少ない側は
        中身が上に寄って 下に空きができる（2026-08-12）。 */
  align-content:center;
  column-gap:5px;
  padding:10px 7px;
  text-align:left;
}
/* ○ と 印は 名前と説明の 2 行にまたがって 縦中央 */
.single-product .k-swatch-grid--radio .k-sw-r{ grid-column:1; grid-row:1 / -1; }
.single-product .k-swatch-grid--radio .k-sw-c,
.single-product .k-swatch-grid--radio .k-sw-o{ grid-column:2; grid-row:1 / -1; margin-right:1px; }
.single-product .k-swatch-grid--radio .k-sw-t{ grid-column:3; min-width:0; }
.single-product .k-swatch-grid--radio .k-sw-s{ grid-column:3; min-width:0; }
.single-product .k-swatch-grid--radio .k-sw-p{ grid-column:3; }
/* ⚠️ 折り返しの保険は .k-swatch を 1 つ挟んで 4 クラスにする。
      下の .single-product .k-swatch .k-sw-t と同じ 3 クラスだと
      後に書いてあるあちらの nowrap が勝ち、保険が効かない
      （2026-08-12 に一度こう書いて、効いていないことに気づいた）。 */
.single-product .k-swatch-grid--radio .k-swatch .k-sw-t{
  white-space:normal;
  overflow-wrap:anywhere;
  line-height:1.25;
}

/* --- 色数が多い軸は «丸を並べた色見本»（用户 2026-08-21）---
   ふちの色は 12 色ある。ラジオ行（2 列）のままだと 6 行になり、
   加購フォームが色だけで埋まってしまう。3 列 × 4 行なら 1 画面に収まる。
   ⚠️ 3 列にしているのは 名前（水浅葱）と 小さい説明（淡い青緑）を
      両方出したいから。4 列にすると 1 マス 106px を切って 説明が折れる。
   ⚠️ 木の色（3〜4 色）はこちらに来ない —— JS 側で «色 かつ 5 個超» の
      ときだけ この class を付けている。 */
.single-product .k-swatch-grid--dots{
  /* 6 列 × 2 段。3 列だと 12 色で 4 段になり、加購フォームが色だけで埋まる
     （用户 2026-08-21「一行至少排5个」）。
     ⚠️ 1 マスは 390px 端末で 55px しかない。実測（probe.js）：
        余白 4×2 ＋ 名前 3 文字 ×10.5px = 39.5px → 収まる。
        これ以上 列を増やすか 字を大きくすると「水浅葱」が折れる。
     ⚠️ 小さい説明（淡い青緑）はこの幅では出せないので隠す。意味は属性値
        （生成り｜やわらかい白）が持っていて、注文明細とメールには出る。 */
  grid-template-columns:repeat(6, 1fr);
  gap:6px;
}
/* ⚠️ ここも .k-swatch を挟んで 4 クラス。3 クラスだと 下の
      .single-product .k-swatch .k-sw-s（display:block）と同じ強さで、
      あとに書いてあるあちらが勝つ —— 同じ罠を 3 回踏んだ（2026-08-21）。 */
.single-product .k-swatch-grid--dots .k-swatch .k-sw-s{ display:none; }
.single-product .k-swatch-grid--dots .k-swatch{
  display:flex !important;          /* .k-swatch の block !important を上書き */
  flex-direction:column;
  align-items:center;
  /* 上から積む。Woodmart の button が justify-content:center なので、
     名前が 2 行に折れる格（ナチュラル・スモークブルー…）だけ 玉が上にずれて
     6 つの玉の高さがそろわなかった（用户 2026-10-03 のスクショ） */
  justify-content:flex-start;
  gap:4px;
  padding:8px 2px 7px;
  border-radius:9px;
  text-align:center;
}
/* 6 列では 名前も詰める（既定の clamp(12.5px,3.6vw,16px) だと 3 文字が折れる） */
.single-product .k-swatch-grid--dots .k-swatch .k-sw-t{
  font-size:10.5px;
  letter-spacing:0;
}
/* 色玉。ラジオ行の角丸四角（＝木片に見せる形）ではなく まるい玉にする。
   ⚠️ 内側の細い枠は残すこと。白磁・生成りのような明るい色は
      生成りの紙の背景に溶けて 玉が消える。 */
/* ⚠️ .k-swatch を 1 つ挟んで 4 クラスにすること。3 クラスだと
      下（471 行あたり）の .single-product .k-swatch .k-sw-c と同じ強さになり、
      あとに書いてあるあちらの 22px・角丸 5px が勝つ —— 2026-08-21 に
      一度こう書いて、線上で丸にならなかった。CSS の折り返しの保険と同じ罠。 */
.single-product .k-swatch-grid--dots .k-swatch .k-sw-c{
  width:26px;
  height:26px;
  border-radius:50%;
}
.single-product .k-swatch-grid--dots .k-swatch .k-sw-t{
  white-space:normal;
  overflow-wrap:anywhere;
  line-height:1.25;
}
/* 選ばれた玉は 外側にひと回り terra の輪を出す（枠の色替えだけだと
   色玉そのものの色に負けて 見つけにくい） */
.single-product .k-swatch-grid--dots .k-swatch.is-active .k-sw-c{
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12), 0 0 0 2px var(--k-paper), 0 0 0 3px var(--k-terra);
}

/* 選択の ○（= PPOM のラジオと同じ読み方。中身が terra で埋まる） */
.single-product .k-swatch .k-sw-r{
  position:relative;
  width:15px;
  height:15px;
  border:1.5px solid var(--k-line);
  border-radius:50%;
  background:var(--k-paper);
}
.single-product .k-swatch.is-active .k-sw-r{ border-color:var(--k-terra); }
.single-product .k-swatch.is-active .k-sw-r::after{
  content:'';
  position:absolute;
  inset:2.5px;
  border-radius:50%;
  background:var(--k-terra);
}

/* --- ラジオ行の「印」は 色見本も 向きも 同じ描き方にする ---
   ベタ 1 色ではなく 上明・下暗の斜めグラデーション ＋ 内側の細い枠。
   ⚠️ ベタ塗りにしないのは、木片が ペンキの色見本に見えてしまうから。
   ⚠️ 内側の枠は必須。ビーチのような明るい木は 生成りの紙の背景に
      溶けて 木片が消えてしまう。
   色は --k-tone-a（明）／--k-tone-b（暗）で渡す：
     色見本 … JS が SWATCH_TONE から入れる
     向き   … 下でパレットの色を入れる（未選択＝ink3・選択＝terra） */
.single-product .k-swatch .k-sw-c,
.single-product .k-swatch .k-sw-o::before{
  background:linear-gradient(160deg, var(--k-tone-a) 0%, var(--k-tone-b) 100%);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);
}
.single-product .k-swatch .k-sw-c{
  width:22px;
  height:22px;
  border-radius:5px;
}

/* 向きの図形（縦長／横長の塗り）。「縦向き」「横向き」の字だけだと
   2 択のタイルが がらんとするので、比率そのものを見せる。
   塗りつぶしなのは 枠線だけだと 木片と別のものに見えるため（用户 2026-08-12）。
   色はパレットから：未選択＝--k-ink3 の前後、選択＝--k-terra の前後。
   ⚠️ 選択色は ○ の中身・枠・地色と同じ terra。この行で選択を表す色を
      増やさない ―― 増やすと 何が選ばれているのか読みにくくなる。
   ⚠️ 場所取りは 色見本と同じ 22px 角にしておく。中の塗りだけ縦横が変わる
      ―― そうしないと 縦を選んだときと横を選んだときで 名前の左端がずれる。 */
.single-product .k-swatch .k-sw-o{
  position:relative;
  width:22px;
  height:22px;
  --k-tone-a:#8A8170;   /* --k-ink3 #7B7261 の明るいほう */
  --k-tone-b:#6E6656;   /* 同 暗いほう */
}
.single-product .k-swatch.is-active .k-sw-o{
  --k-tone-a:#D2A992;   /* --k-terra #C79B87 の明るいほう */
  --k-tone-b:#BC8E79;   /* 同 暗いほう */
}
.single-product .k-swatch .k-sw-o::before{
  content:'';
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  border-radius:3px;
}
.single-product .k-swatch .k-sw-o.is-tate::before{ width:15px; height:21px; }
.single-product .k-swatch .k-sw-o.is-yoko::before{ width:21px; height:15px; }
/* 1 行目：ラベル（= .size b：13px / 500・太字にしない）*/
.single-product .k-swatch .k-sw-t{
  display:block;
  /* 3列のまま1行に収まる最大サイズへ自動調整（画面幅が狭いほど小さくなる）。
     vw は「画面幅」基準なので、テーマ側の左右余白ぶんを見込んで控えめに。*/
  font-size:clamp(13.5px, 4.0vw, 17px);
  white-space:nowrap;
  font-weight:500 !important;   /* テーマのボタン太字を打ち消す */
  color:var(--k-ink);
}
/* 2 行目：サイズ・差額などの補足（= .size span）
   属性値を「S・手のひら｜H80mm」と ｜ 区切りで入れると JS が分けて出す
   ⚠️ nowrap にしてはいけない。3 列だと 1 マス 106px しかないので、
      walnut-frame の「内寸 102×152mm（縦向き）」（145px）は はみ出して
      隣のマスに重なった（2026-08-12）。折り返させて枠の中に収める ――
      属性値のほうを短く書くのが本筋で、これは その保険。 */
.single-product .k-swatch .k-sw-s{
  display:block;
  margin-top:2px;
  font-size:clamp(10.5px, 3.0vw, 13px);
  white-space:normal;
  overflow-wrap:anywhere;
  font-weight:500 !important;
  color:var(--k-ink3);
}
/* 3 行目：差額。金額が「＋」と「¥500」に割れないよう 独立した 1 行にする */
.single-product .k-swatch .k-sw-p{
  display:block;
  margin-top:1px;
  font-size:clamp(10.5px, 3.0vw, 13px);
  white-space:nowrap;
  font-weight:500 !important;
  color:var(--k-ink3);
}
.single-product .k-swatch:hover{ border-color:var(--k-terra); }
/* 選択状態（= .size.on：枠と背景だけ変える。原型は文字色・太さを変えない）*/
.single-product .k-swatch.is-active{
  border:1.5px solid var(--k-terra);
  background:var(--k-terra-t);
}
.single-product .k-swatch.is-disabled{
  opacity:.35;
  cursor:not-allowed;
  text-decoration:line-through;
}
/* 「クリア」リンクは不要 */
.single-product .reset_variations{ display:none !important; }

/* --- 数量器（.qty）--- */
.single-product .single_variation_wrap .quantity,
.single-product form.cart .quantity{
  border:1px solid var(--k-line);
  border-radius:11px;
  overflow:hidden;
  background:var(--k-paper);
}
.single-product .quantity input.qty{
  border:none; background:transparent; color:var(--k-ink);
  font-size:19.5px; width:44px; text-align:center;
}
.single-product .quantity input.minus,
.single-product .quantity input.plus{
  border:none; background:transparent; color:var(--k-ink3);
  font-size:24px; width:38px; height:46px;
}

/* --- 加購ボタン（.btn-primary）：濃色・角丸・大きめ --- */
.single-product form.cart button.single_add_to_cart_button{
  background:var(--k-ink) !important;
  color:var(--k-cream) !important;
  border:none !important;
  height:48px;
  border-radius:12px !important;
  font-size:19px;
  font-weight:500;
  letter-spacing:.04em;
  box-shadow:none;
}
.single-product form.cart button.single_add_to_cart_button:hover{
  background:#2e2a24 !important;
}

/* --- お気に入り（Woodmart の「Add to wishlist」文字リンク）---
   原型ではお気に入りは画面下の固定バーのハートだけ。ページ本文に
   同じ機能がもう 1 つ並ぶのは重複なので、見た目からは消す。

   ⚠️ display:none にしてはいけない。固定バーのハートは、この要素の
      <a> を代理でクリックして動いている（js/kumoju-product.js
      buildBuyBar / realWishBtn）。消すと お気に入り機能ごと死ぬ。
      そこで「見えないが DOM には居て、押せる」状態にする。 */
.single-product .summary-inner > .wd-wishlist-btn{
  position:absolute !important;
  width:1px; height:1px;
  margin:-1px; padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}
/* 関連商品カード内などに出るものは従来どおり（日本語化だけ） */
.single-product .wd-wishlist-btn.wd-style-text span{
  font-size:0;                 /* 英文字を消す */
}
.single-product .wd-wishlist-btn.wd-style-text span::after{
  content:"お気に入りに追加";
  font-size:17px;
  color:var(--k-ink3);
}


/* ============================================================
   ③b PPOM カスタムフィールド（名前 / ギフト設定 …）
   実盤 DOM（PPOM 出力）:
   .ppom-field-wrapper[data-type][.<data_name>]
     └ .form-group
         └ label.form-control-label（フィールド見出し）
         └ input.ppom-input（text）
         └ .form-check-inline（checkbox/radio 1件ずつ）
             └ label.form-check-label
                 └ input.ppom-check-input.ppom-input.checkbox
                 └ span.ppom-label-checkbox（内に span.ppom-option-label-price）
   ============================================================ */

/* --- 各フィールド共通の余白（= kumoju-mobile.html の .opt）--- */
.single-product .ppom-wrapper,
.single-product .ppom-fields-wrapper{ margin-top:4px; }
.single-product .ppom-field-wrapper{ margin-bottom:10px; padding:0; }

/* --- フィールド見出し（= .opt .ol）--- */
.single-product .ppom-field-wrapper label.form-control-label{
  display:block;
  font-family:var(--k-gothic,'Zen Maru Gothic',sans-serif);
  font-size:17px;
  font-weight:700;
  color:var(--k-ink);
  margin-bottom:9px;
}

/* --- テキスト入力（お名前）.field 相当 --- */
.single-product .ppom-field-wrapper input.ppom-input:not([type="checkbox"]):not([type="radio"]){
  width:100%;
  border:1px solid var(--k-line);
  border-radius:12px;
  background:var(--k-paper);
  padding:23px 14px;
  font-family:var(--k-gothic,'Zen Maru Gothic',sans-serif);
  font-size:17px;              /* 16px 以上なら iOS で入力時に拡大されない */
  color:var(--k-ink);
  outline:none;
}
.single-product .ppom-field-wrapper input.ppom-input:not([type="checkbox"]):not([type="radio"])::placeholder{
  color:var(--k-faint);
}

/* --- ギフト設定：カード化（.giftbox 相当）---
   ※ すべて「直接の子」に限定。内側に移動した のし に波及させないため。 */
.single-product .ppom-field-wrapper.gift_options > .form-group{
  border:1px solid var(--k-line);
  border-radius:14px;
  overflow:hidden;
  background:var(--k-paper);
}
/* 見出しをカードのヘッダーに（= .giftbox .gh）*/
.single-product .ppom-field-wrapper.gift_options > .form-group > label.form-control-label{
  margin:0;
  padding:12px 14px;
  background:var(--k-cream2);
  border-bottom:1px solid var(--k-line);
  font-size:17px;
  font-weight:700;
}
/* 各オプション（= .optrow：padding 9px 0／区切り線なし。カード内側 14px）*/
.single-product .ppom-field-wrapper.gift_options > .form-group > .form-check-inline{
  display:block;
  width:100%;
  margin:0;
  padding:9px 14px;
  border:none;
}
.single-product .ppom-field-wrapper.gift_options > .form-group > .form-check-inline:first-of-type{
  padding-top:12px;
}
.single-product .ppom-field-wrapper.gift_options > .form-group > .form-check-inline > .form-check-label{
  display:flex;
  align-items:center;
  gap:9px;                     /* = .optrow gap */
  width:100%;
  margin:0;
  font-size:17px;
  color:var(--k-ink);
  cursor:pointer;
}
.single-product .ppom-field-wrapper.gift_options > .form-group > .form-check-inline input.ppom-check-input{
  width:20px; height:20px;     /* = .optrow .cb */
  flex:none; margin:0;
}
/* 「タイトル｜価格 ／ 副説明」を組む（価格は縦中央 = .optrow align-items:center）*/
.single-product .ppom-field-wrapper.gift_options > .form-group > .form-check-inline .ppom-label-checkbox{
  flex:1;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  column-gap:8px;
  row-gap:2px;                 /* = .ot em margin-top:2px */
}
/* 価格（[+¥300]）は右側・縦中央 */
.single-product .ppom-field-wrapper.gift_options > .form-group > .form-check-inline .ppom-option-label-price{
  grid-column:2; grid-row:1 / span 2;
  align-self:center;
  color:var(--k-ink3); font-size:16px; font-weight:500; white-space:nowrap;
}
/* 価格のない選択肢は「無料」を右側・縦中央に */
.single-product .ppom-field-wrapper.gift_options > .form-group > .form-check-inline .ppom-label-checkbox:not(:has(.ppom-option-label-price))::before{
  content:"無料";
  grid-column:2; grid-row:1 / span 2;
  align-self:center;
  color:var(--k-ink3); font-size:16px; font-weight:500; white-space:nowrap;
}
/* 副説明（= .ot em：10px / ink3）を 2 行目に */
.single-product .ppom-field-wrapper.gift_options > .form-group > .form-check-inline .ppom-label-checkbox::after{
  grid-column:1; grid-row:2;
  font-size:14px; line-height:1.5; color:var(--k-ink3);
}
.single-product .ppom-field-wrapper.gift_options .form-check-label:has(input[value="ギフト包装をつける"]) .ppom-label-checkbox::after{
  content:"やわらかな色の包装紙とリボンで";
}
.single-product .ppom-field-wrapper.gift_options .form-check-label:has(input[value="メッセージカードを添える"]) .ppom-label-checkbox::after{
  content:"ご注文後にメッセージを入力いただけます";
}
.single-product .ppom-field-wrapper.gift_options .form-check-label:has(input[value="明細書を同梱しない"]) .ppom-label-checkbox::after{
  content:"直接お相手へお届けする場合におすすめ";
}
/* 「贈りものの方へ」は JS が作る外側見出し（.k-field-head）側に表示する */

/* --- フィールド外側見出し（ギフト設定 贈りものの方へ 等）--- */
.single-product .ppom-field-wrapper .k-field-head{
  font-family:var(--k-gothic,'Zen Maru Gothic',sans-serif);
  font-size:17px;
  font-weight:700;
  color:var(--k-ink);
  margin-bottom:9px;
}
/* 「任意」「あとからでもOK」＝ 意味のある注記。飾り(faint)から注記(ink3)へ */
.single-product .ppom-field-wrapper .k-field-head em{
  font-style:normal;
  font-size:13.5px;
  font-weight:500;
  color:var(--k-ink3);
  margin-left:6px;
}

/* --- のし（掛け紙）：4 等分ボタン ---
   JS が 4 つを .k-noshi-grid にまとめる → そこだけを Grid で均等割り */

/* ギフトカードの内側（JS が移動）＝ kumoju-mobile.html の のしブロック
   （.gb の左右 14px・のし は margin-top:8px・区切り線なし）*/
.single-product .ppom-field-wrapper.noshi.k-inside-gift{
  margin:8px 0 0 !important;
  padding:0 14px 12px !important;
  border-top:none;
  background:transparent;
}
.single-product .ppom-field-wrapper.noshi .form-group{
  display:block !important;
  background:transparent;
  border:none;
  border-radius:0;
  padding:0 !important;
  margin:0 !important;
}
/* 見出し（フォントは「明細書を同梱しない」と同じ 12.5px / ink）*/
.single-product .ppom-field-wrapper.noshi label.form-control-label{
  display:block;
  width:auto;
  margin:0 0 6px !important;
  padding:0 !important;
  background:none !important;
  border:none !important;
  font-weight:500;
  font-size:17px;
  color:var(--k-ink);
}
/* 4 ボタンの専用コンテナ：完全均等割り（= .noshi gap:7px）*/
.single-product .k-noshi-grid{
  display:grid !important;
  grid-template-columns:repeat(4, 1fr) !important;
  gap:7px !important;
  width:100%;
  margin:0;
  padding:0;
}
/* PPOM は radio を .form-check、checkbox を .form-check-inline で出力する */
.single-product .k-noshi-grid > .form-check,
.single-product .k-noshi-grid > .form-check-inline{
  display:block !important;
  position:static !important;
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  flex:none !important;
  margin:0 !important;
  padding:0 !important;   /* Bootstrap の padding-left:1.25rem を打ち消す */
}
/* ボタン（= .noshi button：padding 8px 4px / 11px / radius 10px）*/
.single-product .ppom-field-wrapper.noshi .form-check-label{
  display:block;
  box-sizing:border-box;
  width:100%;
  position:relative;
  margin:0 !important;
  text-align:center;
  padding:8px 4px !important;
  border:1px solid var(--k-line);
  border-radius:10px;
  background:var(--k-paper);
  color:var(--k-ink2);
  font-size:clamp(12px, 3.5vw, 15.5px);   /* 4列のまま1行に収める */
  line-height:1.4;
  white-space:nowrap;
  cursor:pointer;
  transition:.15s;
}
/* ラジオの丸を隠す（ラベル全体をボタン化）*/
.single-product .ppom-field-wrapper.noshi input[type="radio"]{
  position:absolute;
  opacity:0;
  width:0; height:0; margin:0;
}
/* 選択状態 */
.single-product .ppom-field-wrapper.noshi .form-check-label:has(input:checked){
  border:1.5px solid var(--k-terra);
  background:var(--k-terra-t);
  color:#7F5741;   /* 3.34 → 5.24 */
  font-weight:700;
}

/* --- お写真（LINE 後送）：説明つきチェック 1 行（.optrow 相当）--- */
/* PPOM の説明文（あれば）を小さめミュートに */
.single-product .ppom-field-wrapper .ppom-desc,
.single-product .ppom-field-wrapper .ppom-field-desc,
.single-product .ppom-field-wrapper small.form-text{
  display:block;
  font-size:15px;
  line-height:1.7;
  color:var(--k-ink3);
  margin-top:6px;
}
.single-product .ppom-field-wrapper.photo_method .form-check-inline{
  display:block;
  margin:8px 0 0;
  padding:12px 14px;
  border:1px solid var(--k-line);
  border-radius:12px;
  background:var(--k-cream2);
}
.single-product .ppom-field-wrapper.photo_method .form-check-label{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0;
  font-size:17px;
  color:var(--k-ink);
  cursor:pointer;
}
.single-product .ppom-field-wrapper.photo_method input.ppom-check-input{
  width:20px; height:20px;
  flex:none; margin:0;
  accent-color:var(--k-sage);
}


/* ============================================================
   ③c PPOM 仕上げ（勾选框角丸 / 無料バッジ / タグ / アイコン）
   ============================================================ */

/* --- チェックボックスを KUMOJU 風（角丸ソフト + 白チェック）に --- */
/* = kumoju-mobile.html の .optrow .cb（20px / radius 6px / 1.5px line）*/
.single-product .ppom-field-wrapper input.ppom-check-input[type="checkbox"],
.single-product .kumoju-photo-field input[type="checkbox"]{
  -webkit-appearance:none; appearance:none;
  width:20px; height:20px; flex:none; margin:0;
  border:1.5px solid var(--k-line);
  border-radius:6px;
  background:var(--k-paper);
  position:relative; cursor:pointer;
  transition:.15s;
}
.single-product .ppom-field-wrapper input.ppom-check-input[type="checkbox"]:checked,
.single-product .kumoju-photo-field input[type="checkbox"]:checked{
  background:var(--k-sage);
  border-color:var(--k-sage);
}
.single-product .ppom-field-wrapper input.ppom-check-input[type="checkbox"]:checked::after,
.single-product .kumoju-photo-field input[type="checkbox"]:checked::after{
  content:"";
  position:absolute; left:6.5px; top:3px;
  width:4px; height:8px;
  border:solid #fff; border-width:0 2px 2px 0;
  transform:rotate(45deg);
}

/* 無料バッジは JS 側（.k-opt-price）で付与するため CSS 版は廃止 */

/* --- 必須 / 任意 のタグ（2026-08-15）---------------------------
   PPOM は必須のとき ラベルの中に <span class="show_required"> *</span> を出す。
   «*» は日本の通販の作法ではないので隠し、「必須」「任意」の字に置き換える。
   ⚠️ 商品ごとに違う（位牌はお名前が必須、他の商品は任意）。だから
      CSS で一律に「任意」と書いてはいけない ―― :has() で実物を見て出し分ける。
      必須が先に来ると «書かされる» 感じが強いので、色は terra の濃いほうまで。 */
.single-product .ppom-field-wrapper label.form-control-label .show_required{
  display:none;
}
.single-product .ppom-field-wrapper.pet_name label.form-control-label::after,
.single-product .k-engrave .ppom-field-wrapper label.form-control-label::after{
  content:"　任意";
  font-weight:500;
  font-size:13.5px;
  color:var(--k-ink3);
}
.single-product .ppom-field-wrapper label.form-control-label:has(.show_required)::after{
  content:"　必須";
  color:#B4705C;
  font-weight:700;
}

/* --- ギフトカード見出しに 🎁（カード直下の見出しのみ／のし には付けない）--- */
.single-product .ppom-field-wrapper.gift_options > .form-group > label.form-control-label::before{
  content:"🎁 ";
}

/* --- PPOM の価格表示ブロック（オーダーサービス／合計金額）を非表示 --- */
.single-product #ppom-price-container,
.single-product .ppom-price-container,
.single-product .ppom-total-price,
.single-product .ppom-price-wrapper{
  display:none !important;
}

/* --- WooCommerce Stripe が差し込む空要素を消す ---
   <wc-order-attribution-inputs> は注文の流入元を記録するための
   hidden input だけを持つカスタム要素。中身は見えないのに
   display:inline なので空の 1 行（20px）が生まれ、
   カートボタンと「お気に入りに追加」の間に隙間ができる。

   ⚠️ display:none にしても hidden input の値は送信される
      （送信されないのは disabled のときだけ）。計測機能は壊れない。 */
.single-product wc-order-attribution-inputs{
  display:none !important;
}


/* ============================================================
   ③d お写真アップロード（.upload 相当・効果図①）
   ============================================================ */
.single-product .kumoju-photo-field{ margin:0 0 10px; }

/* 破線のアップロードボックス */
.single-product .kumoju-upload{
  display:block;
  border:1.5px dashed #CFC1A6;
  border-radius:14px;
  padding:20px;
  text-align:center;
  background:var(--k-cream2);
  cursor:pointer;
  transition:.15s;
  margin:0;
}
.single-product .kumoju-upload:hover{
  border-color:var(--k-terra);
  background:var(--k-terra-t);
}
.single-product .kumoju-upload svg{
  width:28px; height:28px;
  stroke:var(--k-terra); stroke-width:1.5; fill:none;
  margin-bottom:6px;
}
.single-product .kumoju-upload .u1{ font-size:17px; color:var(--k-ink2); }
/* 「JPG / PNG・複数可」も意味のある注記なので ink3 へ */
.single-product .kumoju-upload .u2{ font-size:14px; color:var(--k-ink3); margin-top:3px; }

/* アップロード中 */
.single-product .kumoju-photo-field.is-uploading .kumoju-upload{ opacity:.5; pointer-events:none; }

/* 「どの子でも作ります」の一行（原型 .upnote / L322-325）。
   犬だけの店に見えないようにするための案内なので、
   目立たせすぎず、しかし写真を選ぶ前に必ず目に入る位置に置く。 */
.single-product .kumoju-photo-field .k-anypet{
  margin-top:8px;
  padding:9px 12px;
  background:var(--k-cream2);
  border:1px solid var(--k-line2,var(--k-line));
  border-radius:11px;
  font-size:14.5px;
  line-height:1.7;
  color:var(--k-ink3);
}

/* サムネイル一覧 */
.single-product .kumoju-photo-list{
  display:flex; flex-wrap:wrap; gap:8px;
  margin-top:10px;
}
.single-product .k-photo-item{
  position:relative;
  width:64px; height:64px;
  border-radius:10px;
  overflow:hidden;
  border:1px solid var(--k-line);
  background:var(--k-paper);
}
.single-product .k-photo-item img{
  width:100%; height:100%;
  object-fit:cover; display:block;
}
.single-product .k-photo-del{
  position:absolute; top:2px; right:2px;
  width:18px; height:18px;
  border:none; border-radius:50%;
  background:rgba(63,58,50,.72); color:#fff;
  font-size:14px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; padding:0;
}
.single-product .k-photo-status{
  width:100%;
  font-size:15px;
  color:var(--k-ink3);
  margin-top:2px;
}
.single-product .k-photo-status.is-error{ color:#B5716A; }

/* 外側見出し（お写真をご用意ください あとからでもOK）*/
.single-product .kumoju-photo-field .k-field-head{
  font-family:var(--k-gothic,'Zen Maru Gothic',sans-serif);
  font-size:17px; font-weight:700; color:var(--k-ink);
  margin-bottom:9px;
}
.single-product .kumoju-photo-field .k-field-head em{
  font-style:normal; font-size:13.5px; font-weight:500;
  color:var(--k-ink3); margin-left:6px;
}

/* --- LINE 後送チェック（= .optrow：gap 9px / padding 9px 0）--- */
.single-product .kumoju-photo-field .k-line-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:3px;
  margin:6px 0 0;
  padding:9px 0;
  border:none;
  background:none;
}
.single-product .kumoju-photo-field .k-line-row label{
  display:flex; align-items:center; gap:9px;
  margin:0; font-size:17px; color:var(--k-ink); cursor:pointer;
}
/* 説明は本文の左端に揃える（チェック 20px + gap 9px）*/
.single-product .kumoju-photo-field .k-line-desc{
  width:100%;
  margin:2px 0 0 29px;
  font-size:14px; line-height:1.5; color:var(--k-ink3);
}
/* LINE の文字だけ緑（参考サイトと同じ）*/
.single-product .k-line-word{
  color:#5ABA43;
  font-weight:700;
}
/* LINE 後送を選んだらアップロード欄を無効化 */
.single-product .kumoju-photo-field.is-line-later .kumoju-upload{
  opacity:.45;
  pointer-events:none;
}


/* ============================================================
   ③e お届け目安（.delivbox 相当）＋ 安心ポイント（.assure 相当）
   JS が「全オプションの下・数量／カートボタンの上」へ差し込む。
   親が flex（.woocommerce-variation-add-to-cart）でも block でも
   1 行を占有できるよう flex:0 0 100% + width:100% を併記。
   ============================================================ */
/* .delivbox（kumoju-mobile.html L143-146）をそのまま移植 */
.single-product .k-deliv{
  box-sizing:border-box;
  flex:0 0 100%;              /* 親が flex でも 1 行を占有 */
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--k-sage-t);
  border-radius:12px;
  padding:12px 14px;
  /* 原型は line-height 未指定（＝normal）。テーマの 1.6 を継承させない */
  line-height:normal;
  /* 上は直前の PPOM フィールドの margin-bottom:10px に任せる（0 で足さない）*/
  margin:0 0 8px;
}
.single-product .k-deliv svg{
  width:20px; height:20px;
  stroke:var(--k-sage-d);
  stroke-width:1.6;
  fill:none;
  flex:none;
}
.single-product .k-deliv b{
  display:block;
  font-size:17px;
  color:var(--k-sage-d);
}
.single-product .k-deliv small{
  font-size:15px;
  color:var(--k-ink3);
}

/* .assure（kumoju-mobile.html L387）をそのまま移植 */
.single-product .k-assure{
  box-sizing:border-box;
  flex:0 0 100%;
  width:100%;
  display:flex;
  flex-wrap:wrap;
  gap:8px 16px;
  font-size:15.5px;
  line-height:normal;
  color:var(--k-ink3);
  margin:0 0 14px;            /* 下：数量器／カートボタンまで */
}

/* --- 余白の詰め（間隔が三重に足されるのを防ぐ）---------------
   加購コンテナが flex のとき、この3つが全部足されて隙間が広がる：
     ① PPOM ラッパーの margin-bottom
     ② .k-deliv / .k-assure 自身の margin
     ③ コンテナの row-gap（子要素の間に毎回入る）
   ① は 0 に、③ は JS が実測して --k-atc-gap に入れた値を差し引く。
   → 結果、上 10px（PPOM フィールド自身の余白）／中 8px ／下 14px。
   数字を変えたいときは下の 8px・14px だけ触れば効く。
------------------------------------------------------------- */
.single-product .woocommerce-variation-add-to-cart > .ppom-wrapper{
  margin-bottom:0 !important;
}
.single-product .k-atc-flex .k-deliv{
  margin-top:calc(0px - var(--k-atc-gap, 0px));
  margin-bottom:calc(8px - var(--k-atc-gap, 0px));
}
.single-product .k-atc-flex .k-assure{
  margin-bottom:calc(16px - var(--k-atc-gap, 0px));
  margin-top: 10px;
}


/* ============================================================
   ③f タイポグラフィ統一（参考デザインと同じ書体に）
   ============================================================ */
.single-product .summary-inner,
.single-product .summary-inner label,
.single-product .summary-inner input,
.single-product .summary-inner button,
.single-product .summary-inner select,
.single-product .summary-inner textarea,
.single-product .kumoju-photo-field,
.single-product .ppom-field-wrapper{
  font-family:'M PLUS Rounded 1c',sans-serif;
  /* 本文を 500（中太）に。400 では細くて読みづらい。
     見出しは下で 600 に上げ、太さの段差そのものは保つ。 */
  font-weight:500;
}
/* 商品名と価格だけ明朝 */
.single-product h1.product_title.entry-title,
.single-product p.price .woocommerce-Price-amount{
  font-family:"Kaisei Tokumin",serif;
}


/* ============================================================
   ③g 細部の打ち消し（後から追加・上のセクションは変更しない）
   ============================================================ */

/* 1) 変体ラベルの「：」を消す（Woodmart が ::after で付与）*/
.single-product form.variations_form table.variations th.label label::after{
  content:"" !important;
  display:none !important;
}

/* 2) 入力欄フォーカス時の青枠を消すだけ（枠線の色は変えない）*/
.single-product .summary-inner input:focus,
.single-product .summary-inner textarea:focus,
.single-product .summary-inner select:focus,
.single-product .ppom-field-wrapper input:focus,
.single-product .kumoju-photo-field input:focus,
.single-product .quantity input:focus{
  outline:none !important;
  box-shadow:none !important;
}



/* ============================================================
   ③h ページ冒頭ブロック — 原型と同じ構成にする
   ------------------------------------------------------------
   原型 kumoju-mobile-large.html の商品詳細ページ冒頭は

     .pd-en    英字アイライン（— ACRYLIC STAND）
     .pd-name  商品名（明朝 28.5px / 600）
     .pd-desc  短い説明
     .pd-price 価格

   パンくずも星評価も無い。実盤（Elementor Theme Builder）は
   同じ位置にその2つを出すので、
     ・パンくず   → 隠して、代わりに英字アイラインを置く
     ・上部の星   → 隠す（レビュー自体は下部の欄に残る）
   という置き換えを行う。

   英字アイラインの出し方（Elementor のため PHP フックが使えない）:
     functions.php でショートコード [kumoju_en] を登録し、
     Elementor で「ショートコード」ウィジェットを商品名の上に置く。
     文言は 商品編集→商品データ→高度な設定 の「英字名」欄。
     未入力ならカテゴリーから自動で補う。

   ⚠️ CSS では直せない商品データ側の宿題:
      ・カテゴリー未設定（uncategorized）→ 記念・ギフト／メモリアル へ
      ・商品名の旧SEOキーワード羅列（「リード 犬 2匹でも可 ハーネス…」）
        → 原型のような短い名前に。28.5px で4行になるのは
           字の大きさではなく商品名の長さが原因。
   ============================================================ */

/* --- 1) 英字アイライン（= 原型 .pd-en をそのまま移植）--- */
.single-product .k-pd-en{
  display:flex;
  align-items:center;
  gap:8px;                              /* = .pd-en gap */
  margin:0;
  font-family:var(--k-mono,'DM Mono',monospace);
  font-size:14.5px;                     /* = .pd-en font-size */
  font-weight:400;
  letter-spacing:.14em;                 /* = .pd-en letter-spacing */
  line-height:1.4;
  text-transform:uppercase;             /* 小文字で入力しても大文字で出す */
  color:var(--k-terra);
}
/* = .pd-en::before の 20×2px のダッシュ */
.single-product .k-pd-en::before{
  content:"";
  flex:none;
  width:20px; height:2px;
  border-radius:2px;
  background:currentColor;
}

/* --- 1b) 品番（SKU）＝ 原型 .pd-topline / .pd-sku（L513-523・L1828）---
   お問い合わせのときに商品を特定するための番号。買う判断には要らないので、
   商品名 → 説明 → 価格 の流れを崩さない「英字ラベル行の右端」に置く。
   .product_meta（ページ下部の商品コード / カテゴリー）は下の ④a で隠し、
   数字だけをここに写している（出どころは 1 つのまま）。

   ⚠️ コピーアイコンは付けない。原型で全 21 商品を実測したところ、
      アイコンぶんの 16px で英字ラベルの長い商品（CONDOLENCE FRAME 等）が
      2 行に折り返した。代わりに数字へ点線の下線を引いて「押せる」を示す。 */
.single-product .k-pd-topline{
  display:flex;
  align-items:center;
  flex-wrap:wrap;                       /* = .pd-topline。万一入らなければ折り返す */
  gap:6px 10px;
}
.single-product .k-pd-topline .k-pd-en{ flex:0 1 auto; min-width:0; }
.single-product .k-sku{
  flex:none;
  margin-left:auto;                     /* 英字ラベルの長短にかかわらず右端 */
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:3.5px 9px;
  border:1px solid var(--k-line);
  border-radius:999px;
  background:var(--k-cream2,#FBF7EF);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  /* Woodmart は すべての <button> に min-height:var(--btn-height)（=42px）を
     当てている（base.min.css）。そのままだと ピルが縦に間延びするので外す。 */
  min-height:0 !important;
  height:auto;
  line-height:1.35;
  font-weight:400;
  text-transform:none;
  letter-spacing:0;
  box-shadow:none;
}
.single-product .k-pd-topline:not(:has(.k-pd-en)) .k-sku{ margin-left:0; }  /* 英字が無い商品では左寄せ */
.single-product .k-sku .k{ font-size:12px; color:var(--k-faint); }
.single-product .k-sku .v{
  font-family:var(--k-mono,'DM Mono',monospace);
  font-size:12.5px;
  color:var(--k-ink2);
  font-variant-numeric:tabular-nums;
  border-bottom:1px dotted var(--k-faint);
  padding-bottom:1px;
}
.single-product .k-sku:active{
  background:var(--k-terra-t);
  border-color:var(--k-terra);
}

/* --- 1c) コピー完了のお知らせ（原型 toast / L1219）--- */
.k-toast{
  position:fixed;
  left:50%;
  bottom:calc(92px + env(safe-area-inset-bottom,0px));
  transform:translate(-50%,10px);
  z-index:9999;
  max-width:calc(100vw - 40px);
  padding:11px 18px;
  border-radius:999px;
  background:rgba(63,58,50,.94);
  color:#F5F0E6;
  font-size:15px;
  line-height:1.4;
  white-space:nowrap;
  box-shadow:0 8px 24px rgba(70,56,38,.28);
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}
.k-toast.is-on{ opacity:1; transform:translate(-50%,0); }

/* --- 2) パンくずを隠す（原型には無い）---
   実盤 DOM が Elementor / Woodmart / WooCommerce のどれで出るか
   確定していないため、想定される受け皿をまとめて指定する。 */
.single-product .woocommerce-breadcrumb,
.single-product .wd-breadcrumbs,
.single-product nav.woocommerce-breadcrumb{
  display:none !important;
}

/* --- 3) 商品名：原型の .pd-name に余白と字間を揃える ---
   （大きさ・太さ・行間は上の ③ ブロックで指定済み）*/
.single-product h1.product_title.entry-title{
  margin:12px 0 10px;          /* = .pd-name margin */
  letter-spacing:normal;       /* テーマの字間指定を打ち消す */
  text-transform:none;
}

/* --- 4) 上部の星評価を隠す（原型には無い）---
   レビュー本体は下部のレビュー欄に残るので、社会的証明は失わない。
   この品目で効くのは点数より「他の子の仕上がり写真」なので、
   商品名の隣の一等地は納期・確認稿の訴求に譲る。 */
.single-product .summary-inner .woocommerce-product-rating{
  display:none !important;
}

/* ============================================================
   ③j 商品ギャラリー增强（原型 pd-hero 那套，接到 Woodmart 相册上）
   ------------------------------------------------------------
   Woodmart 自带轮播（wd-carousel）已能滑+吸附+箭头，这里不重建，
   只做 4 件增强：
     1) 右下「現在/総数」角标（JS 注入 .k-gal-count）
     2) 主图之间一条细线
     3) 缩略图一排恰好 5 张、超出横滑
     4) 隐藏自带左右箭头（要保留就把最后一段删掉）
   ============================================================ */

/* 主图轮播容器：让角标能绝对定位 */
.single-product .woocommerce-product-gallery .wd-gallery-images{
  position:relative;
}

/* --- 1) 张数角标（参考截图右下）--- */
.single-product .k-gal-count{
  position:absolute;
  right:10px;
  top:10px;      /* 移到右上方 */
  bottom:auto;
  z-index:15;
  padding:3px 11px;
  border-radius:15px;
  background:rgba(0, 0, 0, 0.4);
  color:#fff;
  font-family:'Noto Sans JP';
  font-size:11px;
  letter-spacing:1px;
  line-height:1.5;
  pointer-events:none;   /* 不挡滑动 */
}

/* --- 2) 主图之间一条细线（纸色，融进背景）--- */
.single-product .woocommerce-product-gallery .wd-gallery-images .wd-carousel-item{
  box-shadow:inset 0 0 0 1px var(--k-paper,#FEFCF7);
}

/* --- 3) 缩略图：隐藏 Woodmart 自带那排，改用 JS 自渲染的 .k-thumbs ----
   Woodmart 缩略图轮播用行内 width + translate3d 驱动，CSS 压不干净，
   所以整排藏掉，由 JS 读取图片重新渲染一排 5 张（.k-thumbs）。 */
.single-product .woocommerce-product-gallery .wd-gallery-thumb{
  display:none !important;
}

/* JS 自渲染的缩略图排：视口内恒为 5 张、超出横滑；左右留白对齐内容区（约16px）
   ※ 每张宽度用「(内容盒宽 − 4个gap) ÷ 5」反推，不吃容器内边距，和原型 .pd-thumbs 同一算法。
     原型：width:calc((100% - 36px)/5) ＝ gap:9px×4＝36px。这里 gap:8px×4＝32px。
     关键：5×basis + 4×gap 必须正好等于 100%，否则一排塞不下 5 张、被挤成横滑。 */
/* ===== KUMOJU 缩略图排（整段替换起点）===== */
.single-product .k-thumbs{
  display:flex;
  gap:8px;
  margin-top:8px;
  margin-bottom:10px;   /* 缩略图排与下方商品信息贴紧，去掉大空隙 */
  box-sizing:border-box;
  overflow-x:auto;
  scrollbar-width:none;
  /* 不用 scroll-snap：iOS 会把快速 tap 误判成滚动吞掉（真机点不动的根因），
     缩略图排也不需要逐张吸附。左白边由 padding-left 固定，无需 snap 回正。 */
  overscroll-behavior-x:contain;
  /* 左右白边都用透明 border（不用 padding）：padding 是滚动内容的一部分，
     左滑时会被一起卷走，导致后面图片顶到左容器边。border 在滚动区之外，
     怎么滑都保持留白。想调留白就改这两行的 16px。 */
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  padding-left:0;
  padding-right:0;
}
.single-product .k-thumbs::-webkit-scrollbar{ display:none; }

.single-product .k-thumbs .k-thumb{
  /* 恒 5 张：100% = 内容盒宽（已自动扣掉左 padding + 右 border）。
     5×basis + 4×8px = 100% → basis = (100% − 32px)/5。
     5 张正好落在两端 var(--k-thumb-edge) 白边之间，第 6 张起需左滑。 */
  flex:0 0 calc((100% - 32px)/5);
  width:auto;
  aspect-ratio:1/1;
  /* ↓ 覆盖 Woodmart 对 button 的通配基础样式 :is(.btn,button,[type=button])
     （base.min.css：padding:5px 20px / min-height:var(--btn-height) / display:inline-flex …）
     这些会把缩略图撑高、挤出间距，必须在这里显式写死。 */
  display:block;
  min-height:0;
  padding:0;
  margin:0;
  min-width:0;
  height:auto;
  line-height:0;             /* 去掉 button 文字行高造成的底部空隙 */
  font-size:0;               /* 同上：Woodmart button 的 font-size:13px 会留空隙 */
  letter-spacing:normal;
  text-transform:none;
  border:1px solid var(--k-line);
  border-radius:3px !important;  /* 3px 小圆角 */
  overflow:hidden;
  background:var(--k-paper);
  cursor:pointer;
  touch-action:manipulation;   /* 去掉双击缩放延迟，让 tap 立即触发 click */
  position:relative;           /* 灰蒙版定位用 */
  transition:border-color .15s;
}
.single-product .k-thumbs .k-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:3px !important;  /* 与容器一致 3px */
}
/* 未选中：灰色蒙版盖一层 */
.single-product .k-thumbs .k-thumb::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(63,58,50,.28);   /* 灰蒙版，墨色 28% */
  transition:opacity .15s;
  pointer-events:none;
}
.single-product .k-thumbs .k-thumb.is-active{
  /* 选中用细描边（不压暗）：1.5px 暖棕，和整站 --k-terra 协调，不太粗 */
  border:1.5px solid var(--k-terra);
}
/* 选中：去掉蒙版 */
.single-product .k-thumbs .k-thumb.is-active::after{
  opacity:0;
}
/* ===== KUMOJU 缩略图排（整段替换终点）===== */

/* --- 4) 隐藏自带左右箭头（角标已能提示位置；想保留箭头就删这段）--- */
.single-product .woocommerce-product-gallery .wd-nav-arrows{
  display:none !important;
}


/* ============================================================
   ④ 商品ページ 下半分（加購エリアより下すべて）
   ------------------------------------------------------------
   実盤 DOM と 原型の対応：

     .product_meta                商品コード / カテゴリー / Share
                                  → 原型に無い。最小限の体裁だけ整える
     .woocommerce-tabs            説明 / 追加情報 / レビュー（accordion）
       .wd-accordion-title        → 原型 .dh（L405：serif ＋ terra の短い横棒）
       説明パネル                  → 原型 section「この品について」（L1543）
       追加情報 table.shop_attributes → 原型 .spec .row（L401-404）
       レビュー .k-rv（自前・inc/kumoju-reviews.php）→ 原型 .rv-item（L315-320）
     .related-and-upsells         関連商品
       h4.slider-title            → 原型 .sec-h .jt（L78）
       .wd-product                → 原型 .pcard（L246-258）

   ⚠️ 原型にあって実盤に「中身が無い」ものは、ここでは作らない：
      こだわり / ご注意 / よくあるご質問 / 犬種ナビ / ポイント告知。
      これらは商品ごとの文章なので、入れるなら add_meta_box での
      入力欄づくりが先（＝別作業）。ここは有るものの見た目だけ直す。
   ============================================================ */

/* ---------- ④a 商品メタ（商品コード / カテゴリー / Share）----------
   3 つとも本文には出さない：
     商品コード → 商品名の上の「品番」ピルへ移した（①-1b）
     カテゴリー → いまは uncategorized のまま。整理前の内部名が
                  お客さまに見えているだけなので出さない
     Share:     → 英語のまま・原型にも無い

   ⚠️ display:none にはするが DOM からは消さない。品番ピルは
      この中の .sku を写しているので、要素自体が必要
      （変体を選ぶと WooCommerce がここを書き換える → ピルが追従する）。 */
.single-product .summary-inner > .product_meta{
  display:none !important;
}
.single-product .product-share,
.single-product .product_meta .wd-share{
  display:none !important;
}

/* Stripe の即時決済ボタン（Google Pay／Amazon Pay／Link）を商品ページでは出さない。
   2026-09-15：同業 25 店の商品ページで カートボタンの横に即時決済ボタンを置く店は 0/25
   （Shopify 6 店も全店オフ）。docs/pdp-payment-display-survey-2026-09-15.md。
   うちはカード払いのみなので «支払い手段が多い» の合図にもならない。カートページは 5228 行で既に隠している。
   ⚠️ 要素は DOM に残るので kumoju-product.js rdLinks4() の差し込み位置（この直後）は変わらない。
   ⚠️ 決済そのもの（チェックアウトのカード入力）は Stripe の別要素なので影響しない。 */
.single-product .summary-inner #wc-stripe-express-checkout-element{
  display:none !important;
}
.single-product .summary-inner{
  padding-bottom:6px;   /* この下に タブ側の余白 28px が続く。合わせて 34px */
}


/* ---------- ④b タブ見出し（説明 / 追加情報 / レビュー）----------
   実盤は Woodmart の accordion。見出しが赤字＋太字で浮いていたので、
   原型の小見出し .dh（L405）と同じ「serif ＋ terra の短い横棒」にする。

   ⚠️ accordion の開閉は Woodmart の JS が握っている。
      見た目だけ変え、開閉の仕組みには触らない。 */
.single-product .woocommerce-tabs .wd-accordion-title{
  padding:16px 0 !important;
  border-top:1px solid var(--k-line) !important;
  border-bottom:none !important;
}
.single-product .woocommerce-tabs .wd-accordion-title-text{
  display:flex;
  align-items:center;
  gap:8px;
  /* ⚠️ !important が要る。Woodmart 側の
     .tabs-layout-accordion > .wd-accordion-item > .wd-accordion-title .wd-accordion-title-text
     （woo-single-prod-el-tabs-predefined.min.css）の方が詳細度で勝つため。 */
  font-family:var(--k-serif,'Shippori Mincho',serif) !important;
  font-size:19.5px !important;
  font-weight:500 !important;
  color:var(--k-ink) !important;
  text-transform:none !important;
  letter-spacing:.02em;
}
/* 原型 .dh::before と同じ terra の短い横棒 */
.single-product .woocommerce-tabs .wd-accordion-title-text::before{
  content:"";
  width:18px;
  height:2px;
  background:var(--k-terra);
  border-radius:2px;
  flex:none;
}

/* ---------- ④b-2 章の見出しは原型 .sec-h（L77-79）の形に ----------
   英字の小見出し（ABOUT / VOICE）を上に、和文の大見出しを下に積む。
   data-eyt は kumoju-product.js の relabel() が付ける。
   印が付いた見出しだけこの形にするので、他のタブは横棒のまま。 */
.single-product .woocommerce-tabs .wd-accordion-title-text[data-eyt]{
  display:block;
  font-size:23.5px !important;
  font-weight:600 !important;
  letter-spacing:.03em;
  line-height:1.35;
}
/* 横棒はやめて、代わりに英字の小見出しを出す */
.single-product .woocommerce-tabs .wd-accordion-title-text[data-eyt]::before{
  content:attr(data-eyt);
  display:block;
  width:auto;
  height:auto;
  background:none;
  border-radius:0;
  margin-bottom:3px;
  font-family:var(--k-mono,'DM Mono',monospace);
  font-size:14px;
  font-weight:400;
  letter-spacing:.13em;
  color:var(--k-faint);
}
/* 開閉の矢印は控えめに */
.single-product .woocommerce-tabs .wd-accordion-opener{
  color:var(--k-faint) !important;
}

/* ---------- ④b-3 常に開いた状態（原型は折りたたみ無し）----------
   kumoju-product.js の openTabs() が .k-open を付けた章だけ、
   開閉ボタンを消してクリックも殺す。畳めないので矢印は出さない。
   ⚠️ display は Woodmart がインラインで書くので !important で上書きする。 */
.single-product .woocommerce-tabs .wd-accordion-item.k-open > .wd-accordion-content{
  display:block !important;
  height:auto !important;
  overflow:visible !important;
}
.single-product .woocommerce-tabs .wd-accordion-item.k-open > .wd-accordion-title{
  pointer-events:none;      /* 見出しは押しても畳めない */
  cursor:default;
}
.single-product .woocommerce-tabs .wd-accordion-item.k-open .wd-accordion-opener{
  display:none !important;
}


/* ---------- ④c 「説明」パネル ----------
   原型 section「この品について」（L1543）＝ cream2 の地色に
   上下 1px の罫線、内側 20/16/24px。本文は 17px・行間 2.0。 */
.single-product .woocommerce-Tabs-panel--description{
  background:var(--k-cream2);
  border-top:1px solid var(--k-line);
  border-bottom:1px solid var(--k-line);
  padding:20px 16px 24px;
  margin-bottom:4px;
}
/* パネルの先頭に出る黒い大見出し（説明 / 追加情報 / 〜に対するレビュー13件）は
   すぐ上のタブ見出しと同じことを言っているので出さない。
   原型でも見出しは 1 回だけ（「この品について」など）。 */
.single-product .woocommerce-Tabs-panel > h2:first-child,
.single-product .woocommerce-Tabs-panel > .wc-tab-inner > h2:first-child,
.single-product .woocommerce-Tabs-panel #reviews > h2:first-child,
.single-product .woocommerce-Reviews-title{
  display:none !important;
}
.single-product .woocommerce-Tabs-panel--description p{
  /* 17 → 15 → 16px（用户 2026-08-15。15px は「少し小さい」とのことで 1px 戻した）。
     実測 10 サイトの本文は 13〜16.2px、16px は Pet Momento（16.0/16.2）と
     北欧、暮らしの道具店（16）と同じ、その帯の上端。
     1 行 21.1 字で、日本の手机で普通に読める 20〜30 字に収まる（17px だと 19.9 字）。
     ⚠️ これに合わせて 表・ご注意・FAQ・キャプションも上下させてある
        ―― 本文より大きい字が残ると読む順番が壊れる。
     見出し（22 / 19px）は動かしていない ―― 見えにくいと言われた側。
     本文比は 章 ×1.375・節 ×1.19 で、同業（章 ×1.36〜1.54／節 ×1.10〜1.26）の中。 */
  font-size:16px;
  /* 行高 2.0 → 1.85（2026-08-15・実測にもとづく／docs/typography-benchmark-2026-08.md）。
     日本の同業・標杆 10 サイトを真機模擬で測ったところ、行高は 1.44〜1.80、
     標杆 3 社（北欧暮らしの道具店・土屋鞄・中川政七商店）は揃って 1.80。
     2.0 は全場でいちばん緩く、字号 17px（これも全場最大）と重なって
     1 行 19.9 字 ＝ 最少の部類になり、同じ本文でも頁が 15〜25% 長くなっていた。
     ⚠️ 字号 17px は原型（L1543〜）の基準なので動かさない。客層が 40〜60 代で、
        字を小さくするのは別の代償がある。緩めすぎた行間だけ標杆に寄せる。 */
  line-height:1.85;
  color:var(--k-ink2);
  /* 章の間隔は下の .k-dh（margin-top:20px）が作るので、段落側は詰めておく。
     両方効くと原型の倍の空きになる。 */
  margin-bottom:0;
}
/* 商品説明の画像は角を丸めて、縦に等間隔で積む */
.single-product .woocommerce-Tabs-panel--description img{
  border-radius:11px;
  display:block;
  margin:10px auto;
  height:auto;
  max-width:100%;
}


/* ---------- ④c-2 「この品について」= 生成りのカード ----------
   原型の混合版（.ab-card：L300-309 相当）に合わせる。
   通栏の帯ではなく、生成り（--k-cream2）＋ 角丸 14px ＋ 薄い影の
   「浮いたカード」にして、両脇に地の色（--k-cream）を覗かせる。
   対象は説明パネルを持つ accordion の第 1 項だけ。購入エリア（通栏）や
   レビュー・追加情報の見出しには触らない。
   ⚠️ 位置の取り方：.woocommerce-tabs の直子の先頭は .wd-nav-wrapper
      （タブ見出し行の div）。「この品について」はその次の div なので、
      :first-child でも :first-of-type でも当たらない。
      「.wd-nav-wrapper の直後の .wd-accordion-item」で特定する。 */
/* 原型 .pd-about（L303）＝ 見出しは地の上、カードは中身だけ。
   accordion-item 自体は「枠」に徹して透明にし、カードは説明パネルが持つ。 */
.single-product .woocommerce-tabs .wd-nav-wrapper + .wd-accordion-item{
  background:transparent;
  border-radius:0;
  box-shadow:none;
  border-bottom:none !important;
  /* 原型 .pd-about（L303）は左右 10px。実盤は親の .poduct-tabs-inner に
     15px の内側余白があるので、負のマージンで 5px 戻して 10px に合わせる。
     （15 − 5 = 10。ここを 10px にすると原型より 15px 狭くなる） */
  margin:24px -5px 10px;
  overflow:visible;
}
/* 見出し行：原型 .sec-h（L304）＝ カードの外、左右 6px だけ寄せる */
.single-product .woocommerce-tabs .wd-nav-wrapper + .wd-accordion-item > .wd-accordion-title{
  padding:0 6px 14px !important;
  border-top:none !important;
  border-bottom:none !important;
  align-items:flex-end;
}
/* 説明パネル ＝ 原型 .ab-card（L305-306）。地色・角丸・影はここが持つ */
.single-product .woocommerce-tabs .wd-nav-wrapper + .wd-accordion-item .woocommerce-Tabs-panel--description{
  background:var(--k-cream2);
  border-radius:14px;
  box-shadow:0 6px 20px rgba(120,105,80,.13);
  border-top:none !important;
  border-bottom:none !important;
  margin-bottom:0;
  padding:22px 16px;
  /* 原型 .pd-about の本文まわり（L303）：字は Zen Maru Gothic・中字・墨色。
     ここを指定しないと Woodmart の Noto Sans JP・400・灰色が効いてしまい、
     原型と別物に見える。 */
  font-family:var(--k-gothic,'Zen Maru Gothic',sans-serif);
  font-size:16px;          /* 本文 16px に合わせる（用户 2026-08-15） */
  font-weight:500;
  color:var(--k-ink);
  letter-spacing:.02em;
  /* 原型 .ab-card は line-height を指定していない（＝normal）。
     Woodmart の 1.6 が効いたままだと、行間だけ広くて別物に見える。 */
  line-height:normal;
  margin-bottom:10px;
}
/* 中の要素にも字体と中字を行き渡らせる（Woodmart 側が個別指定しているため）*/
.single-product .woocommerce-tabs .wd-nav-wrapper + .wd-accordion-item .woocommerce-Tabs-panel--description :where(p,li,span,div,summary,td,th){
  font-family:inherit;
  font-weight:inherit;
}


/* ---------- ④c-3 カード内の 5 ブロック（原型 L1543-1587）----------
   書き出し → こだわり → 仕様 → ご注意 → よくあるご質問。
   仕様・ご注意・FAQ は kumoju-product.js の buildAbout() が差し込む。
   こだわりの見出しと画像は、商品編集の「説明」エディタで入れたものを拾う。 */

/* 章の小見出し（原型 .dh：L416-417 serif ＋ terra の短い横棒）。
   JS が作る .k-dh と、エディタで「見出し3」を使ったときの h3 の両方に効かせる。 */
.single-product .woocommerce-Tabs-panel--description .k-dh,
.single-product .woocommerce-Tabs-panel--description h3{
  font-family:var(--k-serif,'Shippori Mincho',serif) !important;
  /* 19.5 → 22px（2026-08-15・実測／docs/typography-benchmark-2026-08.md §2）。
     章見出し ÷ 本文 の比が 19.5/17 ＝ ×1.15 で、測った 10 サイト中いちばん小さかった。
     長文の商品説明を持つ同業は ×1.36〜1.88（Pet Momento ×1.50 / うちの子グッズ ×1.54 /
     中川政七商店 ×1.50）。22px ＝ ×1.29 でその下沿に入る。
     ⚠️ 比が小さかった 3 社（北欧・ディアペット・土屋鞄）は商品説明が短いか長文を使わない。
        こちらは 9 段の長文なので、そちらは手本にならない。 */
  font-size:22px;
  font-weight:600 !important;
  color:var(--k-ink);
  /* 原型 .ab-card>.dh（L307-308）＝ 章と章のあいだに 1px の区切り線 */
  margin:20px 0 10px;
  padding-top:20px;
  border-top:1px solid var(--k-line2,#E7DFD2);
  display:flex;
  align-items:center;
  gap:8px;
  line-height:normal;      /* 原型 .dh は未指定 */
}
/* カードの先頭に来る章（＝エディタで「見出し3」を使ったとき）には線を出さない。
   ⚠️ :first-child だけでは効かない ―― 説明パネルの先頭には
      （画面では隠している）<h2>説明</h2> が居るため、見出しは 2 番目になる。
      JS（normalizeDescription）が本文より前の見出しに .k-dh--top を付ける。 */
.single-product .woocommerce-Tabs-panel--description .k-dh:first-child,
.single-product .woocommerce-Tabs-panel--description .k-dh--top,
.single-product .woocommerce-Tabs-panel--description h3:first-child{
  margin-top:0;
  padding-top:0;
  border-top:none;
}

/* 章の中の小節（.k-dsh：「あかりのこと」「迷われたらお写真を先に」）
   ―― 用户 2026-08-09 に新設、2026-08-15 に記号のかたちを変えた。
   ------------------------------------------------------------
   はじめは .k-dh と同じ「terra の横棒 ＋ 明朝」のまま、字 19.5→17px・
   棒 18→8px と大小だけで親子を示していた。読んでいる最中はこれが効かない
   ―― 用户 2026-08-15「只是大小的区分，眼神不好的还不一定看得出来」。
   大小ではなく 記号の“かたち”で分ける：
     ・章（.k-dh）  … 横棒 ＋ 上の区切り線     → 横に開く ＝ 新しい章が始まる
     ・節（.k-dsh） … 肉球の印 ＋ 下の二重線   → 一つの売りが囲われる
   形が違えば、字を大きくしなくても一目で別物と分かる。

   2026-08-15（二度目）：縦罫 → 肉球＋二重下線 に変更（用户の指定。日本の
   通販でよく見る「◆ 見出し ＋ 下線」の作りを参考にしつつ、印はうちの
   商売に合わせて肉球にした）。肉球は SVG を data URI で背景に置いている
   ―― 画像ファイルを増やさず、拡大しても滲まない。
   ⚠️ 肉球の色（%23C79B87）は data URI の中なので var() が効かない。
      --k-terra を変えるときは この 1 行も一緒に直すこと。
   ⚠️ 下線は「細い terra ＋ その下に太い淡 terra」の二重。太いほうを
      --k-terra-t（#F3E9DE）にすると生成りの地に埋もれて見えないので、
      terra の 32% 透過にしてある（地の色が変わっても沈まない）。
   ⚠️ serif と ink 色は変えない。ここを変えると今度は「見出しに見えない」。
   ⚠️ 区切り線は出さない。線は「新しい章が始まる」合図なので節には要らない。
   ⚠️ 塗り（丸い札・帯）は採らなかった。小節が 8 つ並ぶ商品があり
      （memorial-stand）、色面が増えるとカードが騒がしくなるうえ、
      丸い塗りは押せるボタンに見える。

   エディタ本文の見出しは 全部これ（＝同列）。「最初の 1 つだけ章に昇格」は
   2026-08-15 に廃止した ―― 詳しくは kumoju-product.js の
   normalizeDescription 手前のコメント。 */
.single-product .woocommerce-Tabs-panel--description .k-dsh{
  font-family:var(--k-serif,'Shippori Mincho',serif) !important;
  /* 18 → 19px（2026-08-15・実測）。本文比 ×1.06 は「1px 大きいだけ」で、
     同業の小見出しは ×1.10〜1.26（Pet Momento ×1.13 / うちの子グッズ ×1.12 /
     中川政七商店 ×1.26）。19px ＝ ×1.12 で同じ間合いになる。
     縦罫（形の違い）と、この 2px（大きさの違い）の両方で章と分ける。 */
  font-size:19px;
  font-weight:600 !important;
  color:var(--k-ink);
  /* 上 26px / 下 10px。見出しは自分が受け持つ本文の側に寄せる。
     .k-dh の上（margin 20 ＋ padding 20 ＝ 40px）よりはっきり狭く、
     でも直前の写真とはくっつかない、という間合い。 */
  margin:26px 0 10px;
  /* 下 10px ＝ 字と二重線のあいだ。左は 0（肉球は下の ::before が持つ） */
  padding:0 0 10px;
  border-top:none;
  border-left:none;
  /* 二重下線：上に細い terra 1.5px、下に太い淡 terra 3px、あいだ 2.5px。
     border-bottom:double だと 2 本が同じ太さ・同じ色にしかならないので、
     背景のグラデーションを 2 枚重ねて「細＋太」にしている。
     ⚠️ あいだを 0.5px にしたら 2 本が 1 本の帯に見えた（実測）。2.5px 必要。
     ⚠️ 2026-08-15、2 本とも太い淡線にそろえてみたが「これはよくない」と
        差し戻し（用户）。太さの違う 2 本のほうが締まって見える。戻さないこと。 */
  background-image:
    linear-gradient(var(--k-terra),var(--k-terra)),
    linear-gradient(rgba(199,155,135,.4),rgba(199,155,135,.4));
  background-size:100% 1.5px, 100% 3px;
  background-position:0 calc(100% - 7px), 0 100%;
  background-repeat:no-repeat;
  /* 肉球と字を横に並べる。見出しが折り返しても肉球は左上に留まる */
  display:flex;
  align-items:center;
  gap:9px;
  line-height:1.5;
  letter-spacing:.03em;
}
/* 小節の印＝肉球（犬・猫どちらにも読める、指 4 つ＋掌）。
   ⚠️ 中の %23C79B87 が --k-terra。data URI の中は var() が効かないので、
      色を変えるときはここも直す（上のコメント参照）。 */
.single-product .woocommerce-Tabs-panel--description .k-dsh::before{
  content:"";
  flex:none;
  width:21px;
  height:21px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23C79B87'%3E%3Cellipse cx='6.4' cy='9.6' rx='2.5' ry='3.2' transform='rotate(-18 6.4 9.6)'/%3E%3Cellipse cx='11.7' cy='7.2' rx='2.6' ry='3.4'/%3E%3Cellipse cx='17' cy='8.7' rx='2.5' ry='3.2' transform='rotate(18 17 8.7)'/%3E%3Cellipse cx='20.5' cy='13.6' rx='2.1' ry='2.7' transform='rotate(38 20.5 13.6)'/%3E%3Cpath d='M12.1 12.5c3.3 0 6.1 2.5 6.1 5.2 0 2.1-1.7 3.2-3.5 3.2-1 0-1.8-.3-2.6-.3s-1.6.3-2.6.3c-1.8 0-3.5-1.1-3.5-3.2 0-2.7 2.8-5.2 6.1-5.2z'/%3E%3C/svg%3E");
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  /* 明朝の字面に対して、肉球がわずかに下がって見えるのを戻す */
  margin-top:-2px;
}
/* カードの先頭に来る小節は 上の余白を持たない（カードの内側 22px で足りる）。
   :first-child が使えない事情は上の .k-dh--top と同じ。 */
.single-product .woocommerce-Tabs-panel--description .k-dsh--top{
  margin-top:0;
}
.single-product .woocommerce-Tabs-panel--description .k-dh::before,
.single-product .woocommerce-Tabs-panel--description h3::before{
  content:"";
  width:18px;
  height:2px;
  background:var(--k-terra);
  border-radius:2px;
  flex:none;
}

/* 本文の中の «別ページへの案内»（.k-dlink、2026-08-27）。
   たて型／よこ型のように 一つの品を二商品に割ったとき、互いへの導線が要る。
   本文に [[/product/…/|よこ長の写真はこちら]] と書くと ここに当たる
   （記法の実体は js/kumoju-product.js の paragraph()）。
   下線は 1px の実線を 文字から 3px 離して引く —— 本文の中の一語なので、
   ボタンにはしない。囲うと «広告» に見えて、静かな読みものの調子が壊れる。 */
.single-product .woocommerce-Tabs-panel--description .k-dlink{
  color:var(--k-terra);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb, var(--k-terra) 45%, transparent);
  transition:text-decoration-color .15s ease;
}
.single-product .woocommerce-Tabs-panel--description .k-dlink:hover,
.single-product .woocommerce-Tabs-panel--description .k-dlink:focus-visible{
  text-decoration-color:var(--k-terra);
}

/* 仕様表（原型 .spec：L412-415）。左に薄い見出し・右に値・行ごとに 1px の罫線 */
.single-product .woocommerce-Tabs-panel--description .k-spec{ margin-top:8px }
.single-product .woocommerce-Tabs-panel--description .k-spec-row{
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:11px 0;
  border-bottom:1px solid var(--k-line);
  /* 17 → 16px（2026-08-15・実測）。17px が 本文・仕様表・FAQ の問・属性名 の
     4 役を兼ねていて、段階が 25/19.5/18/17/15.5/15/14.5 と中段で潰れていた。
     17px は本文だけの寸法にして、表は 1 段下げる。他社も表は本文と同寸か下
     （Pet Momento 16.2px＝本文と同じ／中川政七 13.3px／北欧 12px）。
     値が長い行（「アクリル（厚み5mm）／オーク材の台座・充電式LED」）の
     折り返しも 1 行ぶん減る。
     2026-08-15 追記：本文と同寸に揃える（本文 16px）。表が本文より大きいと
     「表のほうが本題」に見えてしまうので、上げるのはここまで。
     Pet Momento も 表＝本文（16.2px）で同じ作り。 */
  font-size:16px;
  line-height:normal;      /* 原型 .spec .row は未指定 */
}
.single-product .woocommerce-Tabs-panel--description .k-spec-row span:first-child{
  color:var(--k-ink3);
  flex:none;
}
.single-product .woocommerce-Tabs-panel--description .k-spec-row span:last-child{
  color:var(--k-ink);
  font-weight:500;
  text-align:right;
}

/* ご注意（原型 .notes：L421）*/
.single-product .woocommerce-Tabs-panel--description .k-notes{
  font-size:15px;          /* 本文 16px より 1 段下 */
  color:var(--k-ink3);
  line-height:1.95;
  margin:6px 0 0;
  padding-left:1.1em;
  list-style:disc;
}
.single-product .woocommerce-Tabs-panel--description .k-notes li{ margin:0 }

/* よくあるご質問（原型 .faq：L422-427）。＋／− は CSS で描く */
.single-product .woocommerce-Tabs-panel--description .k-faq details{
  border-bottom:1px solid var(--k-line);
}
.single-product .woocommerce-Tabs-panel--description .k-faq summary{
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:12px 0;
  font-size:17px;          /* 本文 16px より 1px 上＋太字で「問い」に見せる */
  /* カード全体に効かせた font-weight:inherit（中字）より強く。原型 L423 は太字 */
  font-weight:700 !important;
  color:var(--k-ink);
  cursor:pointer;
  line-height:normal;      /* 原型 .faq summary は未指定 */
}
.single-product .woocommerce-Tabs-panel--description .k-faq summary::-webkit-details-marker{
  display:none;
}
.single-product .woocommerce-Tabs-panel--description .k-faq summary::after{
  content:"＋";
  color:var(--k-ink3);
  font-weight:700;
  font-size:19.5px;
  flex:none;
}
.single-product .woocommerce-Tabs-panel--description .k-faq details[open] summary::after{
  content:"−";
}
.single-product .woocommerce-Tabs-panel--description .k-faq .k-faq-a{
  font-size:15.5px;        /* 答えは本文より控えめに（本文 16px） */
  line-height:1.9;
  color:var(--k-ink2);
  padding:0 0 13px;
}

/* こだわりの写真（原型 .dimgs：L418-420）。
   kumoju-product.js の normalizeDescription() が、エディタ本文の画像を
   .k-dimgs > .k-dimg（画像＋キャプション）に組み直している。
   2 枚並べれば 2 列、1 枚だけならその 1 枚が幅いっぱいに出る。 */
/* 枚数で列数を決める：
     1枚 → 1列（幅いっぱい）  2枚 → 2列  3枚 → 3列
     4枚 → 2列（＝2段2枚ずつ） 5枚以上 → 3列
   4枚を横一列にすると 1 枚 80px 程度まで縮んで何が写っているか分からないので、
   偶数枚は 2 列に折り返す。 */
.single-product .woocommerce-Tabs-panel--description .k-dimgs{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:8px;
  margin-top:12px;
}
.single-product .woocommerce-Tabs-panel--description .k-dimgs[data-n="1"]{
  grid-template-columns:1fr;
}
.single-product .woocommerce-Tabs-panel--description .k-dimgs[data-n="3"],
.single-product .woocommerce-Tabs-panel--description .k-dimgs[data-n="5"],
.single-product .woocommerce-Tabs-panel--description .k-dimgs[data-n="6"],
.single-product .woocommerce-Tabs-panel--description .k-dimgs[data-n="9"]{
  grid-template-columns:repeat(3,1fr);
}
.single-product .woocommerce-Tabs-panel--description .k-dimg{
  min-width:0;
}
.single-product .woocommerce-Tabs-panel--description .k-dimg img{
  display:block;
  width:100%;
  object-fit:cover;
  border-radius:11px;
  margin:0;
}
/* 正方形に切るのは «横に並ぶ» 節だけ。
   ⚠️ 1 枚だけの節には aspect-ratio を «一切書かない»（2026-08-31）。
      `auto` と書いても `revert` と書いても、ブラウザ既定の
      «img の width / height 属性から比を先に決める» 動きが消えてしまい、
      遅延読み込みの画像は読み込むまで高さ 0 ―― 入った瞬間に
      下の文章がガクッと下がる。何も書かなければ既定が生きる。
      （属性を残すのは kumoju-product.js の imageGroup()。両方そろって効く） */
.single-product .woocommerce-Tabs-panel--description .k-dimgs:not([data-n="1"]) .k-dimg img{
  aspect-ratio:1;
}
/* 組の写真が «全部 4:3» のときだけ 4:3 のまま横に並べる（2026-08-31）。
   用户「全是 1:1 的大图…希望有那种一排两张 4:3、还有一排两排（能看到四张）的那种排列」。
   ⚠️ 印（data-ar="43"）を付けるのは kumoju-product.js の tagAspect()。
      img の width / height 属性から数えるので、全部そろっている組にしか付かない
      ＝ 下端は必ず揃う。上の :not([data-n="1"]) と詳細度が同じなので
      «後に書いてあること» で勝っている。順番を入れ替えないこと。 */
.single-product .woocommerce-Tabs-panel--description .k-dimgs[data-ar="43"] .k-dimg img{
  aspect-ratio:4/3;
}
/* キャプション（原型 .dimgs span：L420）*/
.single-product .woocommerce-Tabs-panel--description .k-dimg span{
  display:block;
  font-size:14.5px;        /* 本文 16px に合わせて 1 段下げ */
  color:var(--k-ink3);
  text-align:center;
  margin-top:5px;
  line-height:1.5;
}

/* 取り込み済みの「仕様」accordion は隠す（DOM は残す：Woodmart の開閉 JS が参照）*/
.single-product .woocommerce-tabs .wd-accordion-item.k-tab-hidden{
  display:none !important;
}


/* ---------- ④d 「追加情報」の表 → 原型 .spec（L401-404）----------
   WooCommerce の shop_attributes は th/td の 2 列表。
   原型は「左に薄い見出し・右に値・行ごとに 1px の罫線」。 */
.single-product table.shop_attributes{
  margin-top:8px;
  border:none;
  width:100%;
}
.single-product table.shop_attributes tr{
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:11px 0;
  border-bottom:1px solid var(--k-line);
}
.single-product table.shop_attributes th,
.single-product table.shop_attributes td{
  border:none !important;
  padding:0 !important;
  background:none !important;
  font-size:17px;
  line-height:1.7;
}
/* ⚠️ 原型の見出しは「素材」「サイズ」のように短いが、実盤の属性名は
      「サイズをお選びください」のように長い。flex:none のままだと
      見出しが幅を取り切って、値が 5 行に折り返してしまった。
      → 見出しは 42% までに抑え、残りを値に回す。 */
.single-product table.shop_attributes th{
  flex:0 1 42%;
  color:var(--k-ink3);
  font-weight:400;
  text-align:left;
}
.single-product table.shop_attributes td{
  flex:1 1 auto;
  color:var(--k-ink);
  font-weight:500;
  text-align:right;
}
.single-product table.shop_attributes td p{
  margin:0;
  font-size:inherit;
  line-height:inherit;
}


/* ---------- ④e お客さまの声（自前）→ 原型 .rv-item（L318-347）----------
   出力は inc/kumoju-reviews.php、動きは js/kumoju-reviews.js。

   ここは以前 CusRev（customer-reviews-woocommerce）の DOM を押さえ込む
   約 270 行だった。プラグインは ID を 2 つ重ねたセレクタで当ててくるので
   ほぼ全行に !important が要り、しかも AJAX で DOM が入れ替わるたびに
   JS で組み直していた。レビュー欄そのものを自前にしたので、
   ここは原型の値をそのまま書けばよくなった（!important は 1 つも無い）。

   寸法・色はすべて原型の数値：
     .rv-strip-h / .rv-strip / .rv-sp   原型 L360-364
     .rv-item / .rv-head / .rv-av …     原型 L318-331
     .rv-pics / .rv-pic / .rv-pic.more  原型 L333-338
     .rv-foot / .rv-help                原型 L340-347
     .rv-more                           原型 L366
     .pt-note（ポイント帯）              原型 L107
   ⚠️ 原型の色トークン（--paper など）は、子テーマでは --k- 付き。
      緑（--sage-d）だけは子テーマ側で暗くしてある（クリーム地での
      コントラスト 3.58 → 5.36）。原型の #6E7F63 ではなくトークンを使う。
   ---------------------------------------------------------------- */

/* レビュー欄も「この品について」と同じ字（Zen Maru Gothic・中字）にそろえる。
   ここを指定しないと Woodmart の Noto Sans JP・400 のままで、
   すぐ上のカードと別の書体が並んで見える。 */
.single-product .woocommerce-Tabs-panel--reviews{
  font-family:var(--k-gothic,'Zen Maru Gothic',sans-serif);
  font-weight:500;
}

/* 字の既定値を原型の本文（16px・行間 normal・ink）にそろえる。
   ⚠️ 実盤の親は Woodmart の 14px / 行間 1.6 / 灰色。寸法を書いていない字
      （日付・「購入済み」・「参考になった」）が原型より大きく／高くなる。 */
.single-product .k-rv{
  font-size:16px;
  line-height:normal;
  color:var(--k-ink);
}
/* ⚠️ Woodmart は button 全部に min-height:var(--btn-height)（42px）を当てている。
      原型のボタンは中身ぶんの高さしかないので、この欄では外す。
      これを外さないと「参考になった」のピルが 32px → 42px に太る。 */
.single-product .k-rv button{
  min-height:0;
}
.single-product .woocommerce-Tabs-panel--reviews :where(p,li,span,div,time,b,em,button,input,textarea,label){
  font-family:inherit;
}

/* ---------- 評価まとめ（原型 .rv-sum：L318-331）----------
   左に平均点、右に星ごとの割合。棒は押すとその星だけに絞り込める。

   Baymard の調査（ratings distribution summary）に沿ってある：
     ・レビュー欄の最上部に置く（本文より先に見られる部品）
     ・折りたたまない（隠すと絞り込みを使う人が 7% まで落ちる）
     ・棒は押せる（押して絞り込もうとする人が 90%）
     ・絞り込みは一度に 1 つ（押し直しで解除）
     ・5 件以下では出さない（PHP 側 KUMOJU_RV_SUM_MIN）

   ⚠️ 原型の棒は高さ 5px・行間 4px。見るだけなら足りるが、
      押せるようにすると指に対して細すぎる（行の高さ 9px）。
      棒は 6px にとどめ、行の上下に余白を入れて 40px の当たりを作る。 */
.single-product .k-rv-sum{
  background:var(--k-paper);
  border:1px solid var(--k-line);
  border-radius:16px;
  padding:16px;
  margin:0 0 14px;
}
.single-product .k-rv-sum-top{
  display:flex;
  align-items:center;
  gap:14px;
}
.single-product .k-rv-avg{
  flex:none;
  text-align:center;
}
.single-product .k-rv-avg .n{
  font-family:var(--k-serif,'Shippori Mincho',serif);
  font-size:33px;
  color:var(--k-ink);
  line-height:1;
}
/* 平均点の下の星は少し小さく（カード内の星は 15.5px）*/
.single-product .k-rv-avg .k-rv-stars{
  display:block;
  margin-top:4px;
  letter-spacing:1px;
}
.single-product .k-rv-avg .c{
  font-size:14.5px;
  color:var(--k-faint);
  margin-top:3px;
}

.single-product .k-rv-bars{
  flex:1;
  min-width:0;
}
.single-product .k-rv-bar{
  display:flex;
  align-items:center;
  gap:7px;
  width:100%;
  padding:10px 6px;         /* 行の高さ 37px。指で押せる大きさにする
                               （原型どおり 4px だと 9px の帯になり、押し外す）*/
  background:none;
  border:0;
  border-radius:9px;
  cursor:pointer;
  text-align:left;
}
.single-product .k-rv-bar .l{
  flex:none;
  width:26px;
  font-size:14px;
  color:var(--k-ink3);
}
.single-product .k-rv-bar .tr{
  flex:1;
  height:6px;
  border-radius:99px;
  background:var(--k-line);
  overflow:hidden;
}
.single-product .k-rv-bar .fl{
  display:block;
  height:6px;
  border-radius:99px;
  background:#A8801F;
}
.single-product .k-rv-bar .c{
  flex:none;
  width:36px;             /* 「13件」まで折り返さない幅 */
  font-style:normal;
  font-size:14px;
  color:var(--k-faint);
  text-align:right;
}
/* 押せる／押している／押せない、の 3 つを地色と濃さで出す。
   枠線は足さない（カードの中で線が増えると散らかる）。 */
.single-product .k-rv-bar:hover:not(:disabled){ background:var(--k-cream2) }
.single-product .k-rv-bar.on{ background:var(--k-cream2) }
.single-product .k-rv-bar.on .l,
.single-product .k-rv-bar.on .c{ color:var(--k-ink) }
.single-product .k-rv-bar:disabled{
  cursor:default;
  opacity:.5;
}

/* 分布を一行に要約（原型 .rvx-note）。日本の EC でよく出ている言い方。 */
.single-product .k-rv-hi{
  margin-top:10px;
  padding-top:11px;
  border-top:1px solid #EFE7D8;
  font-size:14.5px;
  color:var(--k-ink3);
  text-align:center;
}
.single-product .k-rv-hi b{ color:var(--k-ink); font-size:15.5px }

/* 項目別の評価（原型 .rvx-asp）。
   星ひとつでは「本当に似るのか」に答えられないので、
   オーダーメイド品では総合と項目別の二段構えにする。
   ⚠️ 答えのあるレビューが無いうちは PHP 側でこの枠ごと出さない。 */
.single-product .k-rv-asp{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid #EFE7D8;
}
.single-product .k-rv-asp-h{
  font-size:14px;
  color:var(--k-faint);
  margin-bottom:9px;
}
.single-product .k-rv-asp-h em{
  font-style:normal;
  margin-left:7px;
  font-size:13px;
}
.single-product .k-rv-arow{
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:9px;
}
.single-product .k-rv-arow:last-child{ margin-bottom:0 }
.single-product .k-rv-arow .k{
  flex:none;
  width:100px;
  font-size:14.5px;
  color:var(--k-ink2);
  white-space:nowrap;
}
.single-product .k-rv-arow .tr{
  flex:1;
  height:6px;
  border-radius:99px;
  background:var(--k-line);
  overflow:hidden;
}
/* 項目別は terra。総合（金茶）と役割が違うので色で分ける */
.single-product .k-rv-arow .fl{
  display:block;
  height:6px;
  border-radius:99px;
  background:var(--k-terra);
}
.single-product .k-rv-arow .v{
  flex:none;
  width:28px;
  font-size:14.5px;
  color:var(--k-ink);
  text-align:right;
  font-family:var(--k-mono,'DM Mono',monospace);
  letter-spacing:-.02em;
}

/* よく出てくる言葉（原型 .rv-kw）。
   本文に何回出たかを数えただけ。AI 要約は使わない
   ── 数えた回数は本文で確かめられるが、要約は確かめようがない。 */
.single-product .k-rv-kw-h{
  font-size:14px;
  color:var(--k-faint);
  margin:14px 0 7px;
}
.single-product .k-rv-kw{
  display:flex;
  gap:7px;
  overflow-x:auto;
  padding-bottom:2px;
  scrollbar-width:none;
}
.single-product .k-rv-kw::-webkit-scrollbar{ display:none }
.single-product .k-rv-kwc em{
  font-style:normal;
  font-size:13px;
  color:var(--k-faint);
  margin-left:5px;
}

/* 並び替え・絞り込みの行（原型 .rv-tools）*/
/* ⚠️ Woodmart は button に display を当てているので、HTML の hidden 属性が
      効かない（UA の [hidden]{display:none} より詳細度が高い）。
      「条件をクリア」が最初から見えてしまうので、ここで戻す。 */
.single-product .k-rv [hidden]{ display:none !important }

.single-product .k-rv-tools{
  display:flex;
  align-items:center;
  flex-wrap:wrap;          /* 「条件をクリア」が出たときは折り返す */
  gap:8px;
  padding:12px 0 0;
}
.single-product .k-rv-cnt{
  flex:1;
  white-space:nowrap;      /* 「13件」が 2 行に割れないように */
  font-size:14.5px;
  color:var(--k-faint);
}
.single-product .k-rv-chip{
  flex:none;
  background:var(--k-paper);
  border:1px solid var(--k-line);
  border-radius:99px;
  padding:7px 13px;
  font-size:14.5px;
  font-weight:400;
  line-height:normal;
  color:var(--k-ink2);
  cursor:pointer;
}
.single-product .k-rv-chip.on{
  background:var(--k-terra-t);
  border-color:var(--k-terra);
  color:#A9765C;
}
.single-product .k-rv-sort{
  flex:none;
  /* ⚠️ Woodmart は select に width:100% と高さを当てている。
        flex:none だけでは幅は 100% のままで、行から落ちる。 */
  width:auto;
  height:auto;
  min-height:0;
  line-height:normal;
  background:var(--k-paper);
  border:1px solid var(--k-line);
  border-radius:99px;
  padding:7px 30px 7px 13px;
  font-size:14.5px;
  color:var(--k-ink2);
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237B7261' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;
  background-position:right 10px center;
  background-size:12px;
}

/* 買った内容（原型 .rv-opt）。「Lサイズだから大きく見えるのか」を読み手が判断できる */
.single-product .k-rv-opt{
  font-size:12.5px;
  color:var(--k-ink3);
  background:var(--k-cream2);
  border:1px solid var(--k-line);
  border-radius:99px;
  padding:2px 9px;
}

/* お店からの返信（原型 .rv-reply）。
   ⚠️ 星の低いお声にも返しておくこと。良い評価にだけ返している店は、
      都合の良い声だけ拾っているように見える。 */
.single-product .k-rv-reply{
  margin-top:11px;
  background:var(--k-cream2);
  border-radius:12px;
  padding:11px 13px;
}
.single-product .k-rv-reply .rh{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:13.5px;
  font-weight:500;
  color:#A9765C;
  margin-bottom:5px;
}
.single-product .k-rv-reply .rh::before{
  content:"";
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--k-terra-t);
  border:1px solid var(--k-terra);
  flex:none;
}
.single-product .k-rv-reply p{
  font-size:14.5px;
  line-height:1.75;
  color:var(--k-ink2);
  margin:0;
}

/* 「参考になった」の件数 */
.single-product .k-rv-help em{
  font-style:normal;
  color:var(--k-faint);
  margin-left:4px;
}

/* 掲載基準（原型 .rv-policy）。サクラを疑われないための説明。 */
.single-product .k-rv-policy{
  margin:14px 0 0;
  background:var(--k-cream2);
  border:1px solid var(--k-line);
  border-radius:12px;
  padding:12px 14px;
}
.single-product .k-rv-policy summary{
  font-size:14.5px;
  color:var(--k-ink2);
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.single-product .k-rv-policy summary::-webkit-details-marker{ display:none }
.single-product .k-rv-policy summary::after{ content:"＋"; color:var(--k-faint); font-size:15px }
.single-product .k-rv-policy[open] summary::after{ content:"−" }
.single-product .k-rv-policy p{
  font-size:14px;
  line-height:1.85;
  color:var(--k-ink3);
  margin:9px 0 0;
}

/* 投稿フォームの項目別評価 */
.single-product .k-rv-f-asp{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:6px;
}
.single-product .k-rv-f-asp .k{
  flex:none;
  width:100px;
  font-size:14.5px;
  color:var(--k-ink2);
}
.single-product .k-rv-pick-s5 .k-rv-pick-s{ font-size:24px }
.single-product .k-rv-select{
  width:100%;
  background:var(--k-cream2);
  border:1px solid var(--k-line);
  border-radius:12px;
  padding:11px 12px;
  font-size:16px;
  color:var(--k-ink);
}

/* 絞り込み中の一言（枠の中）*/
.single-product .k-rv-filter{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:0 0 12px;
  padding:9px 14px;
  background:var(--k-cream2);
  border:1px solid var(--k-line);
  border-radius:99px;
}
.single-product .k-rv-filter-t{
  font-size:14.5px;
  color:var(--k-ink2);
}
.single-product .k-rv-filter-x{
  flex:none;
  background:none;
  border:0;
  padding:0;
  font-size:14.5px;
  color:var(--k-terra);
  text-decoration:underline;
  cursor:pointer;
}

/* ---------- お客さまの写真の帯（原型 .rv-strip：L360-364）----------
   Baymard の指摘どおり、ここから入れば全部の写真を続けて見られる
   ＝ レビューを 1 件ずつ開いて写真を探さなくて済む。 */
.single-product .k-rv-strip-h{
  font-size:15px;
  color:var(--k-ink3);
  margin:2px 0 7px;
}
.single-product .k-rv-strip-h em{
  font-style:normal;
  color:var(--k-faint);
  font-size:14px;
}
.single-product .k-rv-strip{
  display:flex;
  gap:6px;
  overflow-x:auto;
  padding-bottom:10px;
  scrollbar-width:none;
}
.single-product .k-rv-strip::-webkit-scrollbar{ display:none }
.single-product .k-rv-sp{
  width:78px;
  height:78px;
  flex:none;
  border-radius:10px;
  border:1px solid var(--k-line);
  background-color:var(--k-cream2);
  background-size:cover;
  background-position:center;
  padding:0;
  cursor:pointer;
}

/* ---------- レビュー 1 件（原型 .rv-item：L318-331）----------
   アバターは上段（お名前と同じ行）・本文は全幅・お客さまの写真は本文の下。
   写真を左に固定で置く形はやめた：写真を付けるお客さまは一部で、
   付いていないレビューの左側が埋まらないため。 */
.single-product .k-rv-list{
  list-style:none;
  margin:0;
  padding:0;
}
.single-product .k-rv-item{
  background:var(--k-paper);
  border:1px solid var(--k-line);
  border-radius:15px;
  padding:14px;
  margin-bottom:12px;
  display:block;          /* li のまま list-item にしない（原型は div）*/
  list-style:none;
}

.single-product .k-rv-head{
  display:flex;
  align-items:center;
  gap:9px;
}
/* 頭文字の丸（既定の灰色 Gravatar は使わない）*/
.single-product .k-rv-av{
  width:34px;
  height:34px;
  flex:none;
  border-radius:50%;
  background:var(--k-terra-t);
  color:var(--k-terra);
  font-family:var(--k-serif,'Shippori Mincho',serif);
  font-size:16.5px;
  font-weight:500;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
}
.single-product .k-rv-id{
  min-width:0;
  flex:1;
}
.single-product .k-rv-nm{
  font-size:15.5px;
  font-weight:500;
  color:var(--k-ink);
  line-height:1.4;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.single-product .k-rv-sub{
  font-size:13.5px;
  color:var(--k-faint);
  margin-top:1px;
}
.single-product .k-rv-date{
  flex:none;
  font-size:14px;
  color:var(--k-faint);
}

/* 星と「購入済み」（原型 .rv-meta：L326-328）。
   星は SVG ではなく ★☆ の文字（原型 starTxt：L1107）。 */
.single-product .k-rv-meta{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:9px;
}
.single-product .k-rv-stars{
  color:#A8801F;
  font-size:15.5px;
  letter-spacing:1.5px;
}
.single-product .k-rv-badge{
  font-size:12.5px;
  font-weight:500;
  color:var(--k-sage-d);
  background:var(--k-sage-t);
  border-radius:99px;
  padding:2px 9px;
}

.single-product .k-rv-text p{
  font-size:15px;
  line-height:1.75;
  color:var(--k-ink2);
  margin:7px 0 0;
}

/* お客さまの写真（原型 .rv-pics：L333-338）。
   0 枚なら行ごと出ない。4 枚目以降は「+N」に畳む。 */
.single-product .k-rv-pics{
  display:flex;
  gap:6px;
  margin-top:9px;
}
.single-product .k-rv-pic{
  width:64px;
  height:64px;
  flex:none;
  border-radius:9px;
  border:1px solid var(--k-line);
  background-color:var(--k-cream2);
  background-size:cover;
  background-position:center;
  padding:0;
  cursor:pointer;
}
.single-product .k-rv-pic.more{
  background:var(--k-cream2);
  color:var(--k-ink3);
  font-size:14.5px;
  font-weight:500;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* 「参考になった」（原型 .rv-help：L341-347）。
   押すと ♡ → ♥。件数は出さない。 */
.single-product .k-rv-foot{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  margin-top:11px;
}
.single-product .k-rv-help{
  flex:none;
  font-size:13.5px;
  font-weight:400;      /* Woodmart のボタンは 600。原型は 400 */
  line-height:normal;
  color:var(--k-ink3);
  background:none;
  border:1px solid var(--k-line);
  border-radius:99px;
  padding:5px 12px;
  cursor:pointer;
}
.single-product .k-rv-help::before{ content:"♡ " }
.single-product .k-rv-help.on{
  color:var(--k-terra);
  border-color:var(--k-terra);
}
.single-product .k-rv-help.on::before{ content:"♥ " }

.single-product .k-rv-empty{
  background:var(--k-cream2);
  border:1px solid var(--k-line);
  border-radius:12px;
  padding:26px 16px;
  text-align:center;
  font-size:15px;
  line-height:1.9;
  color:var(--k-ink3);
}

/* ---------- 見出しの右の「すべて見る ›」（原型 .sec-h .more：L80-81）----------
   商品ページに置くのは 3 件だけ。残りはこれを押して別枠で読む。
   ⚠️ 見出しは Woodmart の accordion タイトル。英字（VOICE）＋ 和文が
      縦に積んであるので、右端に寄せるだけの flex を足す（この 1 つだけ）。 */
/* ⚠️ 2026-09-20：'.woocommerce-tabs' を外した。rdReviews() がこの見出しを
   .product-tabs-wrapper の外へ動かすので、付けたままだと当たらない。 */
.single-product .wd-accordion-title.k-rv-titlebar{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
}
.single-product .k-rv-all{
  /* ⚠️ 親（k-open の見出し）は pointer-events:none にしてある（1298 行目）。
        畳めないようにするためだが、そのままだとこのボタンも押せない。
        ここだけ押せるように戻す。
        ⚠️ 押せているかを JS の .click() で確かめてはいけない。
           あれは当たり判定を通らないので、pointer-events:none でも動く。
           document.elementFromPoint か、実際のマウス入力で確かめること。 */
  pointer-events:auto;
  flex:none;
  display:flex;
  align-items:center;
  gap:2px;
  background:none;
  border:0;
  padding:0 0 3px;
  font-size:15.5px;
  font-weight:400;
  line-height:normal;
  color:var(--k-ink2);
  cursor:pointer;
}
.single-product .k-rv-all svg{
  width:12px;
  height:12px;
  stroke:currentColor;
  stroke-width:1.8;
  fill:none;
}

/* ---------- 続きを読む枠（すべて見る）----------
   原型は独立したレビューページ（go('reviews')）だが、
   実盤ではそのページを作っていないので、この場で開く枠にする。
   面の作りは原型のモーダル（#rvmodal：L127-129）と同じ言い方：
   こげ茶の透け地 ＋ paper の面 ＋ 角丸 18。
   下から出すのは、片手で閉じられる位置に「×」を置きたいため。 */
.single-product .k-rv-sheet{
  position:fixed;
  inset:0;
  /* ⚠️ 吸着の加購バーが z-index:340（.cta-fixed と同じ層）にいる。
        90 のままだとバーが枠の上に残る。写真ビューア（99999）より下。 */
  z-index:400;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  background:rgba(40,35,28,.58);
}
.single-product .k-rv-sheet[hidden]{ display:none }
.single-product .k-rv-sheet-in{
  width:100%;
  max-width:560px;
  max-height:88vh;
  display:flex;
  flex-direction:column;
  background:var(--k-cream);
  border-radius:18px 18px 0 0;
  box-shadow:0 -12px 40px rgba(30,24,16,.28);
}
.single-product .k-rv-sheet-h{
  flex:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:16px 16px 12px;
  border-bottom:1px solid var(--k-line);
}
.single-product .k-rv-sheet-t{
  font-family:var(--k-serif,'Shippori Mincho',serif);
  font-size:19.5px;
  font-weight:500;
  color:var(--k-ink);
  letter-spacing:.02em;
}
.single-product .k-rv-sheet-t em{
  font-style:normal;
  font-family:var(--k-gothic,'Zen Maru Gothic',sans-serif);
  font-size:14.5px;
  color:var(--k-faint);
  margin-left:8px;
}
.single-product .k-rv-sheet-x{
  flex:none;
  width:34px;
  height:34px;
  border:1px solid var(--k-line);
  border-radius:50%;
  background:var(--k-paper);
  color:var(--k-ink3);
  font-size:19px;
  line-height:1;
  cursor:pointer;
}
.single-product .k-rv-sheet-b{
  flex:1;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:14px 16px 22px;
}

/* 枠の中の「つづきを読む」（原型 .rv-more：L366 と同じ角丸ピル）*/
.single-product .k-rv-more{
  display:block;
  width:100%;
  margin:6px 0 0;
  border:1px solid #D8CDB9;
  border-radius:99px;
  padding:13px;
  font-size:17px;
  font-weight:500;
  color:var(--k-ink);
  background:var(--k-cream2);
  text-align:center;
  cursor:pointer;
}

/* ポイント帯（原型 .pt-note：L107／商品ページでは margin:12px 0 0）*/
.single-product .k-rv-point{
  margin:12px 0 0;
  background:#FDF3E3;
  border:1px solid #EFD9B8;
  border-radius:12px;
  padding:10px 14px;
  font-size:15.5px;
  color:#7E6236;
  text-align:center;
  line-height:1.7;
}

/* ---------- 投稿の入口とフォーム ----------
   原型には投稿の画面が無い（作っていない）。ただ、すぐ上で
   「投稿で50ポイント」と誘っているので、入口が無いと行き止まりになる。
   ボタンは原型のピル（.rv-more）と同じ形にして、面だけ paper に落として
   上のボタンと主従を付ける。 */
.single-product .k-rv-cta{
  margin-top:10px;
}
.single-product .k-rv-add{
  display:block;
  width:100%;
  border:1px solid var(--k-line);
  border-radius:99px;
  padding:13px;
  font-size:17px;
  font-weight:500;
  color:var(--k-ink);
  background:var(--k-paper);
  text-align:center;
  cursor:pointer;
}
.single-product .k-rv-note{
  margin:10px 0 0;
  font-size:14.5px;
  line-height:1.8;
  color:var(--k-ink3);
  text-align:center;
}

.single-product .k-rv-form{
  margin:12px 0 0;
  background:var(--k-paper);
  border:1px solid var(--k-line);
  border-radius:15px;
  padding:16px 14px;
}
.single-product .k-rv-f-row{ margin:0 0 15px }
.single-product .k-rv-f-label{
  display:block;
  font-size:15px;
  color:var(--k-ink3);
  margin:0 0 7px;
}
.single-product .k-rv-f-label em{
  font-style:normal;
  font-size:13px;
  color:var(--k-terra);
  margin-left:7px;
}
.single-product .k-rv-f-label em.opt{ color:var(--k-faint) }
.single-product .k-rv-f-help{
  font-size:13.5px;
  color:var(--k-faint);
  margin:5px 0 0;
}
.single-product .k-rv-form input[type="text"],
.single-product .k-rv-form input[type="email"],
.single-product .k-rv-form textarea{
  width:100%;
  background:var(--k-cream2);
  border:1px solid var(--k-line);
  border-radius:12px;
  padding:11px 12px;
  font-size:16px;          /* 16px 未満だと iOS が入力時に拡大する */
  color:var(--k-ink);
  line-height:1.7;
}
.single-product .k-rv-form textarea{ resize:vertical }

/* 星の選択。出来上がりと同じ ★ の文字で選ぶ。 */
.single-product .k-rv-pick{
  display:flex;
  gap:2px;
}
.single-product .k-rv-pick-s{
  background:none;
  border:0;
  padding:0 2px;
  cursor:pointer;
  color:var(--k-line);
  font-size:30px;
  line-height:1.2;
}
.single-product .k-rv-pick-s.on{ color:#A8801F }

/* お写真を選ぶところ（加工用アップロード欄と同じ見た目）*/
.single-product .k-rv-drop{
  display:block;
  background:var(--k-cream2);
  border:1px dashed #D8CDB9;
  border-radius:12px;
  padding:18px 12px;
  text-align:center;
  cursor:pointer;
}
.single-product .k-rv-drop svg{
  width:26px;
  height:26px;
  fill:none;
  stroke:var(--k-terra);
  stroke-width:1.6;
}
.single-product .k-rv-drop .u1{
  display:block;
  font-size:15.5px;
  color:var(--k-ink2);
  margin-top:5px;
}
.single-product .k-rv-drop .u2{
  display:block;
  font-size:13.5px;
  color:var(--k-faint);
  margin-top:3px;
}
.single-product .k-rv-thumbs{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:9px 0 0;
}
.single-product .k-rv-thumb-item{
  position:relative;
  width:64px;
  height:64px;
  border:1px solid var(--k-line);
  border-radius:9px;
  background-size:cover;
  background-position:center;
}
.single-product .k-rv-thumb-x{
  position:absolute;
  top:-6px;
  right:-6px;
  width:22px;
  height:22px;
  border:1px solid var(--k-line);
  border-radius:50%;
  background:var(--k-paper);
  color:var(--k-ink3);
  font-size:15px;
  line-height:1;
  cursor:pointer;
}
.single-product .k-rv-consent{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin:11px 0 0;
  font-size:14.5px;
  line-height:1.7;
  color:var(--k-ink3);
}

.single-product .k-rv-f-msg{
  font-size:14.5px;
  color:var(--k-ink3);
  margin:0 0 10px;
  min-height:1px;
}
.single-product .k-rv-f-msg.err{ color:#B3503F }
.single-product .k-rv-f-btns{
  display:flex;
  align-items:center;
  gap:10px;
}
.single-product .k-rv-send{
  flex:1;
  background:var(--k-ink);
  border:0;
  border-radius:99px;
  padding:13px;
  font-size:17px;
  font-weight:500;
  color:var(--k-cream);
  cursor:pointer;
}
.single-product .k-rv-cancel{
  flex:none;
  background:none;
  border:0;
  padding:13px 6px;
  font-size:15px;
  color:var(--k-ink3);
  cursor:pointer;
}
.single-product .k-rv-f-done{
  text-align:center;
  font-size:16px;
  line-height:1.9;
  color:var(--k-ink2);
  padding:10px 0;
}
/* ---------- お客さまの写真ビューア：全画面（2026-09-21 改版）----------
   お写真 1 枚をタップしたときの見え方。

   ⚠️ 以前は「生成りの小さなカード」（最大 350px・写真は 1:1 に切る）だった。
      2026-09-21 に用户が **全画面** を選んだので作り直した。
      地の色は «濃いココア» ＝ 陶土色（#9A6B55）と同じ色相の深いところ。
      ⚠️ **純黒にはしない** —— 店の地色は米色なので、黒は色系から跳ね出る。
      見比べた 4 案（墨 / 濃いココア / 米色 / 写真のぼかし）は
      tools/review-lab/photo-viewer.html に残してある。

   ⚠️ **写真は切らない**（object-fit:contain）。お客さまの写真は
      3:4・9:16・1:1・4:3 と まちまちで、以前の 1:1 切り出しでは
      細長い写真の商品そのものが枠の外に出ていた。
      余白はこの地の色で埋まるので、暗い地だと余白が目立たない
      ＝ 全画面＋暗い地 と «切らない» は相性がいい。

   ⚠️ .single-product 配下ではなく body 直下に出すので、ここだけ前置きなし
      （犬種べつの作品例＝ js/kumoju-breeds.js からも同じ物を使う）。 */
.k-rvv{
  position:fixed;
  inset:0;
  /* 続きを読む枠（400）と加購バー（340）より上 */
  z-index:99999;
  display:none;
  background:#3A2E26;
  opacity:0;
  transition:opacity .22s ease;
}
.k-rvv.show{ display:block }
.k-rvv.in{ opacity:1 }
body.k-rvv-open{ overflow:hidden }

.k-rvv .k-rvv-card{
  position:absolute;
  inset:0;
  font-family:var(--k-gothic,'M PLUS Rounded 1c','Zen Maru Gothic',sans-serif);
}

/* ---- 頭：閉じる（左）と 何枚目か（中央） ---- */
.k-rvv .k-rvv-hd{
  position:absolute;
  left:0; right:0; top:0;
  height:58px;
  display:flex;
  align-items:center;
  padding:0 8px;
  z-index:3;
}
.k-rvv .k-rvv-x{
  flex:none;
  width:44px;
  height:44px;
  min-height:0;
  padding:0;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.12);
  color:#F2ECE2;
  font-size:19px;
  font-weight:400;
  line-height:1;
  cursor:pointer;
}
.k-rvv .k-rvv-cnt{
  flex:1 1 auto;
  text-align:center;
  font-size:13.5px;
  color:#CFC3B2;
  letter-spacing:.06em;
}
.k-rvv .k-rvv-cnt[hidden]{ display:none }
.k-rvv .k-rvv-sp{ flex:none; width:44px }

/* ---- 写真。切らずに真ん中に置く ---- */
.k-rvv .k-rvv-im{
  position:absolute;
  left:0; right:0;
  top:58px;
  bottom:190px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 4px;
}
.k-rvv .k-rvv-img{
  display:block;
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
}
.k-rvv .k-rvv-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px;
  height:44px;
  min-height:0;
  padding:0;
  border-radius:50%;
  border:none;
  background:rgba(255,255,255,.12);
  color:#F2ECE2;
  font-size:22px;
  line-height:1;
  cursor:pointer;
}
.k-rvv .k-rvv-nav[hidden]{ display:none }
.k-rvv .k-rvv-nav.prev{ left:8px }
.k-rvv .k-rvv-nav.next{ right:8px }

/* 字の下に敷く。写真の下端と地の色をつなぐ */
.k-rvv .k-rvv-sh{
  position:absolute;
  left:0; right:0; bottom:0;
  height:250px;
  background:linear-gradient(rgba(58,46,38,0), #3A2E26 46%);
  pointer-events:none;
  z-index:1;
}

/* ---- お声 ---- */
.k-rvv .k-rvv-b{
  position:absolute;
  left:0; right:0; bottom:0;
  z-index:2;
  padding:0 20px calc(18px + env(safe-area-inset-bottom));
  max-width:560px;
  margin:0 auto;
}
.k-rvv .k-rvv-dots{
  display:flex;
  justify-content:center;
  gap:6px;
  margin-bottom:16px;
}
.k-rvv .k-rvv-dots[hidden]{ display:none }
.k-rvv .k-rvv-dots i{
  width:6px;
  height:6px;
  border-radius:99px;
  background:rgba(255,255,255,.26);
  transition:width .2s;
}
.k-rvv .k-rvv-dots i.on{
  width:18px;
  background:#E3C3AE;
}
.k-rvv .k-rvv-h{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.k-rvv-b .k-rv-stars{
  color:#E5B93F;
  font-size:16.5px;
  letter-spacing:2px;
}
.k-rvv .k-rvv-date{
  flex:none;
  font-size:13.5px;
  color:#C3B7A8;
}
/* ⚠️ 2026-09-21：お名前と地域の行（.pn）は **出さない**（用户）。
      ここを開く人は «写真そのもの» を見に来ているので、
      写真の下は «星と日付» と «お声» だけにする。
      （誰のお声かは 一覧のカードの側に出ている）
   ⚠️ js 側でも 書き込みを外してある。要素ごと出していないので、
      この行が戻るときは js とセットで戻すこと。 */
.k-rvv-b .pn{ display:none }

/* お声。⚠️ 高さは **固定**（畳まない・「続きを読む」を出さない）。
   長いお声はこの中だけで送る ―― 押すものを増やさない、という用户の指示。
   13px × 1.62 ＝ 1 行 21px。5 行ぶん 105px で切る（端数を出さないため 行の倍数）。 */
.k-rvv-b p{
  font-size:13px;
  font-weight:400;
  line-height:1.62;
  color:#F2ECE2;
  margin:9px 0 0;
  white-space:pre-line;
  height:105px;
  overflow-y:auto;
  /* まだ続きがあることを «下がうっすら消える» だけで伝える（ボタンは置かない）。
     短いお声のときは 下端に字が無いので 何も起きない。 */
  -webkit-mask-image:linear-gradient(#000 calc(100% - 16px), transparent);
  mask-image:linear-gradient(#000 calc(100% - 16px), transparent);
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.22) transparent;
}
.k-rvv-b p::-webkit-scrollbar{ width:3px }
.k-rvv-b p::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.22); border-radius:99px }

/* 画面の低い端末では お声の枠を 3 行に縮めて 写真を大きく保つ */
@media (max-height:700px){
  .k-rvv .k-rvv-im{ bottom:150px }
  .k-rvv-b p{ height:63px }
}


/* ---------- ④f 関連商品 → 原型 .sec-h（L78）＋ .pcard（L246-258）---------- */
/* 見出し：黒の太ゴシック → 原型と同じ serif の大きめ */
.single-product .related-and-upsells h4.slider-title,
.single-product .related-and-upsells .wd-el-title{
  font-family:var(--k-serif,'Shippori Mincho',serif);
  font-size:23.5px !important;
  font-weight:500 !important;
  color:var(--k-ink) !important;
  letter-spacing:.03em;
  text-transform:none !important;
  margin-bottom:14px !important;
}
/* カード本体（原型 .pcard：paper 地・角丸 15・薄い影）*/
.single-product .related-and-upsells .wd-product{
  background:var(--k-paper);
  border-radius:15px;
  overflow:hidden;
  box-shadow:0 1px 3px rgba(63,58,50,.06);
}
.single-product .related-and-upsells .wd-product .product-wrapper{
  background:none;
}
.single-product .related-and-upsells .product-image-link{
  display:block;
  aspect-ratio:1/1;
  overflow:hidden;
}
.single-product .related-and-upsells .product-image-link img{
  width:100%;
  height:100%;
  object-fit:cover;
}
/* 文字まわり（原型 .pinfo：padding 10/11/12）*/
.single-product .related-and-upsells .product-element-bottom,
.single-product .related-and-upsells .wd-product-header{
  padding:10px 11px 12px;
}
.single-product .related-and-upsells .wd-entities-title{
  font-family:var(--k-serif,'Shippori Mincho',serif);
  font-size:17.5px !important;
  font-weight:500 !important;
  line-height:1.45 !important;
  color:var(--k-ink) !important;
}
.single-product .related-and-upsells .wd-entities-title a{
  color:inherit;
}
/* 価格：赤字 → 原型と同じ ink の太字 */
.single-product .related-and-upsells .price,
.single-product .related-and-upsells .price .amount{
  color:var(--k-ink) !important;
  font-size:18.5px !important;
  font-weight:700 !important;
}
/* 画像に重なる英語のボタン（Select options / Quick view / Compare /
   Add to wishlist）は原型に無いので出さない。
   ⚠️ 商品名リンク自体は残すので、カードを押せば商品ページへ行ける。 */
.single-product .related-and-upsells .wd-buttons,
.single-product .related-and-upsells .wd-add-btn,
.single-product .related-and-upsells .quick-view-button,
.single-product .related-and-upsells .wd-compare-btn,
.single-product .related-and-upsells .wd-wishlist-btn,
.single-product .related-and-upsells .wd-product-btns{
  display:none !important;
}
/* 星と件数も原型のカードには無い */
.single-product .related-and-upsells .star-rating,
.single-product .related-and-upsells .woocommerce-review-link{
  display:none !important;
}


/* ============================================================
   ⑦ 吸着買物バー（.k-buybar）＝ 原型 kumoju-mobile-large.html の
      .buybar（スタイル L419-424 ／ マークアップ L1608-1614）
   ------------------------------------------------------------
   お気に入り ＋ 数量器 ＋ カートボタンを画面下に固定する。DOM は
   js/kumoju-product.js の buildBuyBar() が body 直下に作る。
   ⚠️ 2026-09-16 改：本体（フォーム内）の 数量器・カートボタンも 画面に出す。
      バーは «本体のボタンを上へ通り過ぎたあと» だけ出る補助になった
      （同業 26 店の実測で 本文内にボタンがある店 25/26、
        «途中から出る下のバーだけ» は 0/26。docs/pdp-cart-button-survey-2026-09-16.md）。

   ⚠️ 本体の 数量器・カートボタン を固定バーへ「移動」してはいけない。
      可変商品のカートボタンは WooCommerce の変体スクリプトが
      .woocommerce-variation-add-to-cart の中に居る前提で制御しており、
      DOM をそこから出すとボタンが出なくなる（加購が壊れる／一度失敗済み）。

      なのでバーの中身は 代理ボタン。押されたら本体ボタンの click() を
      呼ぶだけで、加購のバリデーションも Ajax も本体側が処理する。
      本体ボタンが画面外のときだけ出す（JS が .is-on を付ける）。

   数値は原型からそのまま：
     .buybar  → 原型 L419      ／ .qty      → 原型 L420-422 ／
     .btn-fav → 原型 L426-428  ／ .btn-primary → 原型 L423-424
   ============================================================ */

/* ---------- 本体（フォーム内）の 数量器・カートボタン（2026-09-16）----------
   置き場所：選択肢の白い枠（.ppom-wrapper）の «最下部» に 1 行 [数量器][カートに入れる]。
   用户 2026-09-16「加购按钮要放到加购选项板块的最下面对齐」「就占一行，不要占 2 行」。
   DOM は JS（placeAtcRow）が .k-atc-row を作って 数量器とボタンを中へ移す。
   ⚠️ 移し先は .woocommerce-variation-add-to-cart の «中» のまま —— そこから出すと
      WooCommerce の変体スクリプトがボタンを制御できなくなる（2026-09 に一度壊した）。
   見た目の «枠の中» は、行に白地を敷いて 枠（padding-bottom を 0 にした ppom-wrapper）の
   すぐ下にくっつけて作る。お届け目安カードは order で行の下へ。
   間合い：ギフトのカードの下端 → ボタンの上端 20px（下の margin-top／padding の注記）。

   ⚠️ 未選択のとき WooCommerce はボタンに class «disabled» を付けるだけで
      disabled 属性は付けない（押すと «オプションを選んでください» の案内が出る）。
   ⚠️ 戻すときも display:none にはしないこと —— 吸着バーのボタンは本体を click() する代理。 */
.single-product .woocommerce-variation-add-to-cart > .ppom-wrapper:has(~ .k-atc-row){
  padding-bottom:0 !important;
}
.single-product form.cart .k-atc-row{
  order:1;
  flex:0 0 100%;
  box-sizing:border-box;
  margin-top:-10px;              /* 親の gap 10 を打ち消して 白い枠とすき間なくつなぐ（-6 だと 4px の米色の筋が出た） */
  padding:4px 16px 20px;         /* 上 4 ＋ ギフト欄の下余白 16 ＝ ギフトのカード下端から 20px */
  background:#fff;
  display:flex;
  align-items:center;
  gap:10px;
}
.single-product .woocommerce-variation-add-to-cart > .k-deliv{
  order:2;
}
/* 数量器は横幅を詰める（112 → 88px。用户 2026-09-16「水平位置收一下」。«数量» の文字は付けて外した） */
.single-product form.cart .k-atc-row .quantity{
  flex:none;
  width:88px;
  height:52px;
  margin:0 !important;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border:1px solid #E4D9CB;
  border-radius:var(--k-bb-r,12px);
  background:#fff;
}
.single-product form.cart .k-atc-row .quantity input.minus,
.single-product form.cart .k-atc-row .quantity input.plus{
  width:26px;
  height:50px;
  padding:0;
  border:0;
  background:transparent;
  color:var(--k-ink3,#7B7261);
  font-size:20px;
}
.single-product form.cart .k-atc-row .quantity input.qty{
  width:34px;
  padding:0;
  font-size:18px;
}
.single-product form.cart .k-atc-row button.single_add_to_cart_button{
  flex:1 1 0;
  min-width:0;
  height:52px;
  min-height:52px;
  margin:0 !important;
  padding:0 12px;
  border:0 !important;
  border-radius:var(--k-bb-r,12px) !important;
  background:var(--k-ink,#3F3A32) !important;
  color:#fff !important;
  font-family:'M PLUS Rounded 1c',sans-serif;
  font-size:19px;
  font-weight:500;
  letter-spacing:.06em;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  box-shadow:none;
  white-space:nowrap;
}
/* 袋のアイコン（吸着バーと同じパス）。JS（syncAddBtnIcon）がボタンの先頭に svg を差し込む。
   ⚠️ ::before では描けない —— Woodmart がボタンの ::before を 読み込み中の表示に使っている
      （position:absolute・opacity:0）。そこを上書きすると加購中の表示が壊れる。 */
.single-product form.cart button.single_add_to_cart_button .k-atc-ico{
  flex:none;
  width:18px;
  height:18px;
  stroke:currentColor;
  stroke-width:1.7;
  fill:none;
}
/* 未選択でも 黒のまま（用户 2026-09-16「换成黑色的」）。押すと WooCommerce が選択を促す案内を出す。
   Woodmart／Woo の .disabled は opacity を下げるので 1 に戻す */
.single-product form.cart .k-atc-row button.single_add_to_cart_button.disabled,
.single-product form.cart .k-atc-row button.single_add_to_cart_button[disabled]{
  background:var(--k-ink,#3F3A32) !important;
  opacity:1 !important;
}
.single-product form.cart .k-atc-row button.single_add_to_cart_button:hover{
  background:#2E2A24 !important;
}
.single-product form.cart .k-atc-row button.single_add_to_cart_button:focus-visible{
  outline:2px solid var(--k-terra-d,#7F5741);
  outline-offset:3px;
}
:root{
  /* バーの高さ＝上下 padding 10+10 ＋ 中身 48。下の余白計算で使い回す */
  --k-buybar-h:69px;
  /* 3 つの角丸を 1 か所で管理する。原型は数量器だけ 11px で他が 12px
     だったが、横に並ぶと不揃いが目立つので 12px に統一した。 */
  --k-bb-r:12px;
}
.k-buybar{
  position:fixed;
  left:50%;
  bottom:0;
  /* 隠すときは下へ逃がす。translateX は中央寄せぶんなので常に必要 */
  transform:translateX(-50%) translateY(100%);
  width:100%;
  max-width:430px;               /* 原型 L419：スマホ幅で頭打ち */
  z-index:340;                   /* Woodmart 吸着バーと同じ層 */
  background:rgba(254,252,247,.96);   /* ＝ var(--k-paper) の 96% */
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--k-line);
  padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));
  display:flex;
  gap:10px;
  align-items:center;
  visibility:hidden;
  transition:transform .28s ease, visibility .28s;
}
.k-buybar.is-on{
  transform:translateX(-50%) translateY(0);
  visibility:visible;
}

/* --- お気に入り（原型 .btn-fav L426-428）---
   ハートだけの正方形。48px 角＝バーの中身の高さと同じなので、
   数量器・カートボタンと辺の長さが揃って一列に収まる。 */
.k-buybar .k-bb-fav{
  flex:none;
  width:48px;
  height:48px;
  padding:0;
  border:1px solid var(--k-line);
  border-radius:var(--k-bb-r);
  background:var(--k-paper);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  min-height:0;                  /* Woodmart の button 既定を消す */
  line-height:1;
  transition:background-color .2s ease, border-color .2s ease;
}
.k-buybar .k-bb-fav svg{
  width:20px;
  height:20px;
  stroke:var(--k-terra);
  stroke-width:1.6;
  fill:none;
  flex:none;
}
/* 追加済みはハートを塗りつぶす（原型 .btn-fav.on と同じ）。
   枠と地色も terra 寄りにして「入っている」ことを一目で分かるように。 */
.k-buybar .k-bb-fav.is-on{
  background:var(--k-terra-t);
  border-color:var(--k-terra);
}
.k-buybar .k-bb-fav.is-on svg{
  fill:var(--k-terra);
}

/* --- 数量器（原型 .qty L420-422）--- */
.k-buybar .k-bb-qty{
  display:flex;
  align-items:center;
  height:48px;                   /* お気に入り・カートボタンと同じ高さに揃える */
  border:1px solid var(--k-line);
  border-radius:var(--k-bb-r);
  overflow:hidden;
  flex:none;
  background:var(--k-paper);
}
/* 原型は 38px 幅だが、ここでは 32px に詰めている。
   バーの中は 3 つで幅を取り合うので、脇役（お気に入り・数量）を細くして
   主役のカートボタンに幅を回すため。48+100 で 148px、残り 194px が本体。 */
.k-buybar .k-bb-qty button{
  width:32px;
  height:46px;
  padding:0;
  border:none;
  background:transparent;
  color:var(--k-ink3);
  font-size:21px;                /* 24px だと数字より目立ちすぎる */
  line-height:1;
  cursor:pointer;
  min-height:0;                  /* Woodmart の button 既定（min-height）を消す */
}
.k-buybar .k-bb-num{
  width:34px;
  text-align:center;
  font-size:18px;
  color:var(--k-ink);
  font-variant-numeric:tabular-nums;   /* 桁が変わっても幅が動かない */
}

/* --- カートボタン（原型 .btn-primary L423-424）--- */
.k-buybar .k-bb-add{
  flex:1;
  height:48px;
  padding:0;
  border:none;
  border-radius:var(--k-bb-r);
  background:var(--k-ink);
  color:var(--k-cream);
  font-family:'Zen Maru Gothic', sans-serif;
  font-size:19px;
  font-weight:500;
  letter-spacing:.04em;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  cursor:pointer;
  box-shadow:none;
  min-height:0;
}
.k-buybar .k-bb-add svg{
  width:17px;
  height:17px;
  stroke:currentColor;
  stroke-width:1.7;
  fill:none;
  flex:none;
}
.k-buybar .k-bb-add[disabled]{
  opacity:1;                     /* 2026-09-16：未選択でも黒のまま（JS も disabled を付けなくなった） */
}

/* Woodmart 標準の吸着バー（サムネ＋英語の Select options）は
   この ⑦ と重なるので出さない。可変商品ではそもそも
   「Select options」＝ フォームへスクロールするだけのリンクだった。
   加購の機能は本体フォーム側にあるので影響なし。 */
.single-product .wd-sticky-btn{
  display:none !important;
}

/* バーがページ最下部（フッター）を隠さないよう、その高さぶん下に余白。
   ⚠️ .website-wrapper の地色は白。padding を足しただけだと
      ページ末尾に白い帯が出てしまう（内側の .main-page-wrapper は
      cream なので、はみ出した padding ぶんだけ白が見える）。
      商品ページに限って地色も cream に合わせる。 */
.single-product .website-wrapper{
  padding-bottom:calc(var(--k-buybar-h) + env(safe-area-inset-bottom,0px));
  background:var(--k-cream);
}

/* Woodmart の「トップへ戻る」丸ボタン（a.scrollToTop：bottom 12px／z 350）は
   そのままだとバーの上に重なり、「カートに入れる」の末尾を隠してしまう。
   バーが出ている間だけ、バーの高さぶん上へ逃がす。 */
.single-product a.scrollToTop{
  transition:bottom .28s ease;
}
body.k-buybar-on a.scrollToTop{
  bottom:calc(12px + var(--k-buybar-h) + env(safe-area-inset-bottom,0px)) !important;
}

/* PC ではこのバーを出さない（原型はスマホ画面の設計）*/
@media (min-width:1025px){
  .k-buybar{ display:none !important; }
  .single-product .website-wrapper{ padding-bottom:0; }
}


/* ============================================================
   ⑧ カートページ（原型 kumoju-mobile-large.html の pageCart：L1608）
   ------------------------------------------------------------
   実盤 DOM（[woocommerce_cart] ショートコード出力）:
   body.woocommerce-cart
     form.woocommerce-cart-form.cart-data-form
       .cart-table-section
         .wd-shipping-progress-bar        送料無料までの進捗（= 原型 .freehint）
         table.shop_table.cart.woocommerce-cart-form__contents
           thead                          見出し行（原型のカードには無い → 隠す）
           tbody
             tr.woocommerce-cart-form__cart-item.cart_item
               td.product-remove          ×リンク（= 原型 .crm「削除する」）
               td.product-thumbnail       サムネ（= .cimg 82px）
               td.product-name            商品名（= .cn）
               td.product-price           単価（小計と重複 → 隠す）
               td.product-quantity        数量器（= .cqty）
               td.product-subtotal        小計（= .cprice）
             tr > td.actions              クーポン・カート更新
     .cart-totals-section.cart-collaterals  合計＋レジへ（= .sumbox / .cta-fixed）

   原型 .citem（L457）:
     grid 82px 1fr / gap 12px / paper 地 / line 枠 / radius 15px / padding 12px
   ============================================================ */

/* --- ページ地色（商品ページと同じクリーム）--- */
body.woocommerce-cart,
body.woocommerce-cart .main-page-wrapper,
body.woocommerce-cart .site-content,
body.woocommerce-cart .content-area{
  background-color:var(--k-cream) !important;
}

/* --- 表の枠組みをすべて解除（table → カードの縦積みへ）--- */
.woocommerce-cart table.shop_table.cart,
.woocommerce-cart table.shop_table.cart tbody{
  display:block;
  width:100%;
  margin:0;
  padding:0;
  border:none;
  background:none;
  border-collapse:separate;
}
/* 見出し行は出さない（原型はカード表示） */
.woocommerce-cart table.shop_table.cart thead{
  display:none;
}

/* --- 商品 1 件＝カード（= 原型 .citem：L457）---
   3列グリッド: [サムネ 82px][本文 1fr][数量器 auto] */
.woocommerce-cart table.shop_table.cart tr.cart_item{
  display:grid;
  grid-template-columns:82px 1fr auto;
  column-gap:12px;                /* = .citem gap */
  align-items:start;
  margin:0 0 12px;                /* = .citem margin-bottom */
  padding:12px;                   /* = .citem padding */
  border:1px solid var(--k-line);
  border-radius:15px;             /* = .citem radius */
  background:var(--k-paper);
}
/* td の枠線・余白を全部落とす（表の見た目を消す）*/
.woocommerce-cart table.shop_table.cart tr.cart_item > td{
  display:block;
  width:auto;
  margin:0;
  padding:0;
  border:none;
  background:none;
  text-align:left;
}
/* Woodmart / WooCommerce のレスポンシブ表が付ける見出しラベルを消す */
.woocommerce-cart table.shop_table.cart tr.cart_item > td::before{
  content:none !important;
}

/* --- サムネ（= .cimg：82×82 / radius 11px）--- */
.woocommerce-cart table.shop_table.cart td.product-thumbnail{
  grid-column:1;
  grid-row:1 / 3;                 /* サムネは 2 段分の高さ */
  align-self:start;
}
.woocommerce-cart table.shop_table.cart td.product-thumbnail img{
  width:82px;
  height:82px;
  object-fit:cover;
  border-radius:4px;              /* サムネの角丸（4か所とも同じ値にすること）*/
  display:block;
}

/* --- 右列：商品名が1段目・小計と数量器が2段目に並ぶ ---
   グリッド: 列 = [img 82px][本文 1fr][数量器 auto]
     1段目  商品名（2〜3列にまたがる）
     2段目  小計（2列目・左）｜数量器（3列目・右）                     */
.woocommerce-cart table.shop_table.cart tr.cart_item > td.product-name,
.woocommerce-cart table.shop_table.cart tr.cart_item > td.product-remove,
.woocommerce-cart table.shop_table.cart tr.cart_item > td.product-price{
  grid-column:2;
}
.woocommerce-cart table.shop_table.cart td.product-name{
  grid-column:2 / 4;               /* 1段目：本文列＋数量器列にまたがる */
  grid-row:1;
}
.woocommerce-cart table.shop_table.cart td.product-subtotal{
  grid-column:2;
  grid-row:2;
  font-family:'Shippori Mincho', serif;
  font-size:18.5px;
  font-weight:700;
  color:var(--k-ink);
  align-self:end;
}

/* --- 数量器（= .cqty：小さめ・radius 9px）--- */
.woocommerce-cart table.shop_table.cart td.product-quantity{
  grid-column:3;
  grid-row:2;
  justify-self:end;
  align-self:end;
}

/* 商品名（= .cn：明朝 18.5px / 500）*/
.woocommerce-cart table.shop_table.cart td.product-name{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  column-gap:10px;
}
.woocommerce-cart table.shop_table.cart td.product-name a{
  flex:1 1 auto;
  min-width:0;
  font-family:'Shippori Mincho', serif;
  font-size:18.5px;
  font-weight:500;
  line-height:1.4;
  color:var(--k-ink);
  text-decoration:none;
}
/* 変体・PPOM の内容（= .cmeta：15px / ink3）— 商品名の下に 1 行で */
.woocommerce-cart table.shop_table.cart td.product-name .variation,
.woocommerce-cart table.shop_table.cart td.product-name dl.variation{
  flex:0 0 100%;                  /* flex コンテナ内で独立 1 行 */
  margin:4px 0 0;
  font-size:15px;
  line-height:1.6;
  color:var(--k-ink3);
}
.woocommerce-cart table.shop_table.cart td.product-name dl.variation dt,
.woocommerce-cart table.shop_table.cart td.product-name dl.variation dd{
  display:inline;
  margin:0;
  padding:0;
  font-weight:500;
}
.woocommerce-cart table.shop_table.cart td.product-name dl.variation dd::after{
  content:" / ";
  color:var(--k-faint);
}
.woocommerce-cart table.shop_table.cart td.product-name dl.variation dd:last-of-type::after{
  content:"";
}

/* --- 単価は小計と重複するので出さない（原型も価格は 1 つ）--- */
.woocommerce-cart table.shop_table.cart td.product-price{
  display:none !important;
}

/* --- 小計＋数量器を 1 行に（= .cbot：左価格・右数量器）---
   右列の grid に 2 列のトラックを作り、同じ行に並べる。 */
.woocommerce-cart table.shop_table.cart tr.cart_item{
  grid-template-columns:82px 1fr auto;   /* img | 商品名列 | 数量器列 */
}
.woocommerce-cart table.shop_table.cart td.product-subtotal{
  grid-column:2;
  font-family:'Shippori Mincho', serif;
  font-size:18.5px;
  font-weight:700;
  color:var(--k-ink);
  align-self:end;
}

/* --- 数量器（= .cqty：小さめ・radius 9px）--- */
.woocommerce-cart table.shop_table.cart td.product-quantity{
  grid-column:3;
  justify-self:end;
  align-self:end;
}
.woocommerce-cart table.shop_table.cart td.product-quantity .quantity{
  display:flex;
  align-items:center;
  margin:0;
  border:1px solid var(--k-line);
  border-radius:9px;              /* = .cqty radius */
  overflow:hidden;
  background:var(--k-paper);
}
.woocommerce-cart table.shop_table.cart td.product-quantity input.qty{
  width:26px;                     /* = .cqty span */
  height:28px;
  padding:0;
  border:none;
  background:transparent;
  text-align:center;
  font-size:17.5px;
  color:var(--k-ink);
}
.woocommerce-cart table.shop_table.cart td.product-quantity input.minus,
.woocommerce-cart table.shop_table.cart td.product-quantity input.plus{
  width:28px;                     /* = .cqty button */
  height:28px;
  padding:0;
  border:none;
  background:transparent;
  font-size:19.5px;
  color:var(--k-ink3);
}

/* --- 削除（= .crm「削除する」：15px / faint）---
   商品名の行の右上に絶対配置（原型 .crm は商品名の右）*/
.woocommerce-cart table.shop_table.cart td.product-name{
  position:relative;
  padding-right:64px;             /* 「削除する」の分だけ右を空ける */
}
.woocommerce-cart table.shop_table.cart td.product-remove{
  position:absolute;
  top:12px;                       /* カードの padding と揃える */
  right:12px;
  width:auto;
}
.woocommerce-cart table.shop_table.cart tr.cart_item{
  position:relative;              /* 削除の絶対配置の基準 */
}
.woocommerce-cart table.shop_table.cart td.product-remove a.remove{
  display:inline-block;
  width:auto;
  height:auto;
  margin:0;
  padding:0;
  border-radius:0;
  background:none !important;
  font-size:0;                    /* 元の「×」を消す */
  line-height:1;
  color:var(--k-faint) !important;
}
.woocommerce-cart table.shop_table.cart td.product-remove a.remove::after{
  content:"削除する";
  font-family:'Zen Maru Gothic', sans-serif;
  font-size:15px;                 /* = .crm font-size */
  font-weight:500;
  color:var(--k-faint);
  text-decoration:none;           /* 原型は下線なし */
}

/* --- クーポン・カート更新の行（原型には無いが機能として残す）--- */
.woocommerce-cart table.shop_table.cart tr:has(> td.actions){
  display:block;
}
.woocommerce-cart table.shop_table.cart td.actions{
  display:block;
  width:100%;
  margin:0 0 12px;
  padding:12px;
  border:1px solid var(--k-line);
  border-radius:15px;
  background:var(--k-paper);
}
.woocommerce-cart table.shop_table.cart td.actions .coupon input.input-text{
  border:1px solid var(--k-line);
  border-radius:11px;
  background:var(--k-cream2);
  padding:11px 14px;
  font-size:17px;                 /* 16px 以上なら iOS で拡大されない */
  color:var(--k-ink);
}
.woocommerce-cart table.shop_table.cart td.actions button{
  border-radius:11px !important;
  font-size:16px;
  font-weight:500;
  letter-spacing:normal;
  text-transform:none !important;
}

/* --- 送料無料までの進捗（= 原型 .freehint：L1641）--- */
.woocommerce-cart .wd-shipping-progress-bar{
  margin:0 0 14px;
  padding:12px 14px;
  border:1px solid var(--k-sage);
  border-radius:12px;
  background:var(--k-sage-t);
}
.woocommerce-cart .wd-shipping-progress-bar .progress-msg{
  font-family:'Zen Maru Gothic', sans-serif;
  font-size:15.5px;
  font-weight:500;
  line-height:1.6;
  color:var(--k-sage-d);
}

/* --- 合計ボックス（= 原型 .sumbox / .sumrow：L468-470）--- */
.woocommerce-cart .cart-totals-section .cart_totals,
.woocommerce-cart .cart-collaterals .cart_totals{
  padding:14px;
  border:1px solid var(--k-line);
  border-radius:15px;
  background:var(--k-paper);
}
.woocommerce-cart .cart_totals h2{
  font-family:'Zen Maru Gothic', sans-serif;
  font-size:17px;
  font-weight:700;
  color:var(--k-ink);
  margin:0 0 12px;
  text-transform:none;
}
/* 合計表も表の見た目を消して 1 行ずつに */
.woocommerce-cart .cart_totals table.shop_table,
.woocommerce-cart .cart_totals table.shop_table tbody{
  display:block;
  width:100%;
  margin:0;
  border:none;
  background:none;
}
/* 各行（= .sumrow：左ラベル・右金額）*/
.woocommerce-cart .cart_totals table.shop_table tr{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
  margin:0 0 10px;                /* = .sumrow margin-bottom */
  padding:0;
  border:none;
}
.woocommerce-cart .cart_totals table.shop_table th,
.woocommerce-cart .cart_totals table.shop_table td{
  display:block;
  margin:0;
  padding:0;
  border:none;
  background:none;
  font-family:'Zen Maru Gothic', sans-serif;
  font-size:17px;                 /* = .sumrow font-size */
  font-weight:500;
  color:var(--k-ink2);
  text-align:right;
}
.woocommerce-cart .cart_totals table.shop_table th{
  text-align:left;
  white-space:nowrap;
}
/* 合計行（= .sumrow.total：上に区切り線・大きめ・明朝の金額）*/
.woocommerce-cart .cart_totals table.shop_table tr.order-total{
  border-top:1px solid var(--k-line);
  padding-top:12px;
  margin-top:4px;
  margin-bottom:0;
}
.woocommerce-cart .cart_totals table.shop_table tr.order-total th,
.woocommerce-cart .cart_totals table.shop_table tr.order-total td{
  font-size:19.5px;               /* = .sumrow.total */
  font-weight:700;
  color:var(--k-ink);
}
.woocommerce-cart .cart_totals table.shop_table tr.order-total td .woocommerce-Price-amount{
  font-family:'Shippori Mincho', serif;
  font-size:25px;                 /* = .sumrow.total .serif */
  font-weight:600;
}

/* --- レジへ進むボタン（= 原型 .cta-btn）--- */
.woocommerce-cart .wc-proceed-to-checkout{
  padding:14px 0 0;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  width:100%;
  height:52px;
  margin:0;
  padding:0;
  border:none !important;
  border-radius:12px !important;
  background:var(--k-ink) !important;
  color:var(--k-cream) !important;
  font-family:'Zen Maru Gothic', sans-serif;
  font-size:19px;
  font-weight:500;
  letter-spacing:.04em;
  text-transform:none !important;
  box-shadow:none;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover{
  background:#2e2a24 !important;
}


/* ============================================================
   ⑧b カートページ修正（実機確認で見つかった崩れ）
   ------------------------------------------------------------
   ・ポイントバナー（WooLoyalty）が白地・緑星・英文のまま
   ・送料進捗バーが破線枠・白地・赤バーのまま（テーマ既定色）
   ・小計がテーマのセール色（赤）で出る
   ・削除リンクにテーマのアイコン「×」が残る
   ・クーポン欄が破線枠＋緑グラデボタンのまま
   ============================================================ */

/* --- 本文フォント統一（商品ページと同じ丸ゴシック）--- */
body.woocommerce-cart .content-area{
  font-family:'Zen Maru Gothic', sans-serif;
  font-weight:500;
  color:var(--k-ink);
}

/* --- ポイントバナー（WooLoyalty）は非表示（英文のためサイトと不調和）--- */
.woocommerce-cart .wlr-message-info{
  display:none !important;
}

/* --- 送料進捗バーは非表示（中国語の既定文言が入っているため）--- */
.woocommerce-cart .wd-shipping-progress-bar{
  display:none !important;
}

/* --- 小計の赤文字を墨色に（テーマのセール色を打ち消す）--- */
.woocommerce-cart table.shop_table.cart td.product-subtotal .amount,
.woocommerce-cart table.shop_table.cart td.product-subtotal .woocommerce-Price-amount{
  color:var(--k-ink) !important;
}

/* --- 変体の属性名ラベルは出さない（原型は値だけ「S・手のひら / …」）--- */
.woocommerce-cart table.shop_table.cart td.product-name dl.variation dt{
  display:none;
}

/* --- 削除リンクの「×」を完全に消す（テーマのアイコン ::before 対策）--- */
.woocommerce-cart table.shop_table.cart td.product-remove a.remove::before{
  content:none !important;
}
.woocommerce-cart table.shop_table.cart td.product-remove a.remove span{
  display:none !important;
}

/* --- クーポン欄：破線枠と緑グラデボタンを KUMOJU 風に --- */
.woocommerce-cart table.shop_table.cart td.actions{
  border:1px solid var(--k-line) !important;
  border-radius:15px !important;
  background:var(--k-paper) !important;
  box-shadow:none !important;
}
.woocommerce-cart table.shop_table.cart td.actions .coupon{
  display:flex;
  gap:8px;
}
.woocommerce-cart table.shop_table.cart td.actions .coupon input.input-text{
  flex:1;
  min-width:0;
  margin:0;
  border:1px solid var(--k-line) !important;
  border-radius:11px !important;
  background:var(--k-cream2) !important;
  box-shadow:none !important;
}
.woocommerce-cart table.shop_table.cart td.actions button{
  flex:none;
  margin:0;
  background:var(--k-ink) !important;
  color:var(--k-cream) !important;
  border:none !important;
  border-radius:11px !important;
  box-shadow:none !important;
}


/* ============================================================
   ⑧c カートページ仕上げ（参考サイトとの差分・実機スクリーンショットで確認）
   ------------------------------------------------------------
   明朝フォントが効かない・カード内の行揃えが参考と違う等の残課題を
   ひとつずつ潰す。優先度不足が主因なので !important を付ける。
   ============================================================ */

/* --- 1) 商品名を明朝に（テーマ既定のゴシックを !important で打ち消す）--- */
.woocommerce-cart table.shop_table.cart td.product-name a{
  font-family:'Shippori Mincho', serif !important;
}

/* --- 2) 金額を明朝に（小計・合計とも）--- */
.woocommerce-cart table.shop_table.cart td.product-subtotal,
.woocommerce-cart table.shop_table.cart td.product-subtotal .amount{
  font-family:'Shippori Mincho', serif !important;
}
.woocommerce-cart .cart_totals .amount,
.woocommerce-cart .cart_totals .woocommerce-Price-amount{
  font-family:'Shippori Mincho', serif !important;
}

/* --- 5) 変体の属性名ラベル確実に消す（dl でなく ul/その他の場合も）--- */
.woocommerce-cart table.shop_table.cart td.product-name .variation dt,
.woocommerce-cart table.shop_table.cart td.product-name .variation .variation-label,
.woocommerce-cart table.shop_table.cart td.product-name dl.variation dt{
  display:none !important;
}

/* --- 6) 合計ボックス：ラベルを左・金額を右に（参考の sumrow）--- */
.woocommerce-cart .cart_totals table.shop_table th{
  text-align:left !important;
}
.woocommerce-cart .cart_totals table.shop_table td{
  text-align:right !important;
}
/* 合計ボックス内の WooCommerce 既定の小計ラベル「小計」重複を整理 */
.woocommerce-cart .cart_totals table.shop_table td .amount{
  font-weight:500;
}

/* --- 7) 「住所を変更」リンクの赤を墨色に --- */
.woocommerce-cart .cart_totals a,
.woocommerce-cart .cart-collaterals a{
  color:var(--k-ink3);
}
.woocommerce-cart .cart_totals .shipping-destination,
.woocommerce-cart .cart_totals .woocommerce-shipping-destination{
  color:var(--k-ink3);
  font-size:15px;
}

/* --- 8) Stripe Link 等の決済バナーを隠す（参考には無い）--- */
.woocommerce-cart .wc-proceed-to-checkout .stripe-link-button,
.woocommerce-cart .wc-proceed-to-checkout [class*="stripe"],
.woocommerce-cart .wc-proceed-to-checkout [class*="link-button"],
.woocommerce-cart .cart-collaterals [class*="stripe"]{
  display:none !important;
}

/* --- 9) クーポン欄をたたむ（参考には無い・機能は残す）--- */
.woocommerce-cart table.shop_table.cart tr:has(> td.actions){
  margin:0 0 12px;
}
.woocommerce-cart table.shop_table.cart td.actions{
  padding:0;
  border:none !important;
  background:transparent !important;
}
/* クーポンを details で折りたたみ式に */
.woocommerce-cart table.shop_table.cart td.actions .coupon{
  display:block;
}
.woocommerce-cart table.shop_table.cart td.actions .coupon summary{
  cursor:pointer;
  font-family:'Zen Maru Gothic', sans-serif;
  font-size:15px;
  color:var(--k-ink3);
  list-style:none;
  padding:4px 0;
  text-decoration:underline;
}
.woocommerce-cart table.shop_table.cart td.actions .coupon summary::-webkit-details-marker{
  display:none;
}
.woocommerce-cart table.shop_table.cart td.actions .coupon .k-coupon-body{
  display:flex;
  gap:8px;
  margin-top:10px;
}
.woocommerce-cart table.shop_table.cart td.actions .coupon .k-coupon-body input.input-text{
  flex:1;
  min-width:0;
}


/* ============================================================
   ⑧d カート商品カード — モバイルのレスポンシブ表を完全に打ち消す
   ------------------------------------------------------------
   WooCommerce の .shop_table_responsive が 768px 以下で
   各 td を display:block＋行ラベル(::before)＋margin/text-align に
   変えてしまい、上のカード用グリッドが崩れる。
   同じブレイクポイントで !important 付きの上書きを最後に置く。
   目標レイアウト（原型 .citem）：
     [82px サムネ]  商品名（明朝）        削除する
                   変体メタ（値だけ / 区切り）
                   ¥小計（明朝）   [− 1 ＋]
   ============================================================ */
@media (max-width:768.98px){
  /* tr をグリッドに戻す（レスポンシブ表の block 化を解除）*/
  body.woocommerce-cart table.shop_table.cart tr.cart_item{
    display:grid !important;
    grid-template-columns:82px 1fr auto !important;
    column-gap:12px;
    align-items:start;
    margin:0 0 12px !important;
    padding:12px !important;
    border:1px solid var(--k-line) !important;
    border-radius:15px !important;
    background:var(--k-paper) !important;
    position:relative;
  }
  /* 全 td：レスポンシブ表の余白・右寄せ・幅を消す */
  body.woocommerce-cart table.shop_table.cart tr.cart_item > td{
    display:block !important;
    width:auto !important;
    margin:0 !important;
    padding:0 !important;
    border:none !important;
    background:none !important;
    text-align:left !important;
  }
  /* 行ラベル（商品/金額/数量/小計 …）を消す */
  body.woocommerce-cart table.shop_table.cart tr.cart_item > td::before{
    content:none !important;
    display:none !important;
  }

  /* サムネ：左列・2段分 */
  body.woocommerce-cart table.shop_table.cart td.product-thumbnail{
    grid-column:1 !important;
    grid-row:1 / 3 !important;
    align-self:start !important;
    padding:0 !important;
  }
  body.woocommerce-cart table.shop_table.cart td.product-thumbnail a{
    display:block !important;
  }
  body.woocommerce-cart table.shop_table.cart td.product-thumbnail img{
    width:82px !important;
    height:82px !important;
    max-width:none !important;
    object-fit:cover;
    border-radius:4px !important;   /* サムネの角丸 */
    display:block !important;
    margin:0 !important;
  }

  /* 商品名：1段目・2〜3列にまたがる。明朝 */
  body.woocommerce-cart table.shop_table.cart td.product-name{
    grid-column:2 / 4 !important;
    grid-row:1 !important;
    padding:0 64px 0 0 !important;   /* 右上の「削除する」の分を空ける */
    text-align:left !important;
  }
  body.woocommerce-cart table.shop_table.cart td.product-name a{
    font-family:'Shippori Mincho', serif !important;
    font-size:18.5px !important;
    font-weight:500 !important;
    line-height:1.4 !important;
    color:var(--k-ink) !important;
    text-decoration:none !important;
    display:block !important;
  }

  /* 変体メタ（ul.variation）：値だけを「 / 」区切りで商品名の下に */
  body.woocommerce-cart table.shop_table.cart td.product-name ul.variation{
    margin:4px 0 0 !important;
    padding:0 !important;
    font-size:15px !important;
    line-height:1.6 !important;
    color:var(--k-ink3) !important;
    list-style:none !important;
    display:block !important;
  }
  body.woocommerce-cart table.shop_table.cart td.product-name ul.variation li{
    display:inline !important;
    margin:0 !important;
    padding:0 !important;
    border:none !important;
  }
  /* 属性名ラベル（サイズをお選びください：）は消す */
  body.woocommerce-cart table.shop_table.cart td.product-name .item-variation-name,
  body.woocommerce-cart table.shop_table.cart td.product-name .variation-name{
    display:none !important;
  }
  body.woocommerce-cart table.shop_table.cart td.product-name .item-variation-value,
  body.woocommerce-cart table.shop_table.cart td.product-name .variation-value{
    display:inline !important;
  }
  body.woocommerce-cart table.shop_table.cart td.product-name .item-variation-value p{
    display:inline !important;
    margin:0 !important;
  }
  /* 複数の値を「 / 」でつなぐ */
  body.woocommerce-cart table.shop_table.cart td.product-name ul.variation li + li::before{
    content:" / ";
    color:var(--k-faint);
  }

  /* 単価は出さない */
  body.woocommerce-cart table.shop_table.cart td.product-price{
    display:none !important;
  }

  /* 小計：2段目・左。明朝・太字 */
  body.woocommerce-cart table.shop_table.cart td.product-subtotal{
    grid-column:2 !important;
    grid-row:2 !important;
    align-self:end !important;
    justify-self:start !important;
    font-family:'Shippori Mincho', serif !important;
    font-size:18.5px !important;
    font-weight:700 !important;
    color:var(--k-ink) !important;
    text-align:left !important;
  }
  body.woocommerce-cart table.shop_table.cart td.product-subtotal .amount{
    color:var(--k-ink) !important;
    font-family:'Shippori Mincho', serif !important;
  }

  /* 数量器：2段目・右 */
  body.woocommerce-cart table.shop_table.cart td.product-quantity{
    grid-column:3 !important;
    grid-row:2 !important;
    align-self:end !important;
    justify-self:end !important;
    margin:0 !important;
  }

  /* 削除「削除する」：右上に絶対配置 */
  body.woocommerce-cart table.shop_table.cart td.product-remove{
    position:absolute !important;
    top:12px !important;
    right:12px !important;
    left:auto !important;
    width:auto !important;
    margin:0 !important;
    padding:0 !important;
  }
  body.woocommerce-cart table.shop_table.cart td.product-remove a.remove{
    display:inline-block !important;
    width:auto !important;
    height:auto !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
    border:none !important;
    border-radius:0 !important;
    background:none !important;
    box-shadow:none !important;
    font-size:0 !important;
    line-height:1 !important;
    color:var(--k-faint) !important;
    text-indent:0 !important;
  }
  body.woocommerce-cart table.shop_table.cart td.product-remove a.remove::before{
    content:none !important;
  }
  body.woocommerce-cart table.shop_table.cart td.product-remove a.remove::after{
    content:"削除する" !important;
    font-family:'Zen Maru Gothic', sans-serif !important;
    font-size:15px !important;
    font-weight:500 !important;
    color:var(--k-faint) !important;
    text-decoration:none !important;
  }
}


/* ============================================================
   ⑧e カート商品カード — WooCommerce 干渉の最終ブロック（実機で検証）
   ------------------------------------------------------------
   スクリーンショットの Computed で判明した、カードを壊している
   WooCommerce (woo-mod-shop.css) のルールを個別に潰す：
     ① td.product-thumbnail に position:absolute＋max-height:115px
        → サムネが小さく左上に張り付く
     ② tr.cart_item > td に display:flex＋flex-wrap
        → グリッドのアイテム配置が効かなくなる
     ③ td.product-name に position:relative＋padding-right:64px
        → 商品名が潰れて「削除する」と重なる
     ④ td:not(:last-child) に dashed の border-bottom
        → カード内に点線が出る
   上の ⑧d より後に置き、body 二重クラスで詳細度を上げて確実に勝つ。
   ============================================================ */
@media (max-width:768.98px){
  /* ① サムネの絶対配置＋高さ制限を解除（左上に小さく張り付く原因）*/
  body.woocommerce-cart.woocommerce-cart table.shop_table.cart td.product-thumbnail{
    position:static !important;
    top:auto !important;
    left:auto !important;
    max-height:none !important;
    height:auto !important;
    overflow:visible !important;
    margin:0 !important;
    padding:0 !important;
    border-bottom:none !important;
  }
  body.woocommerce-cart.woocommerce-cart table.shop_table.cart td.product-thumbnail img{
    width:82px !important;
    height:82px !important;
    max-width:82px !important;
    max-height:82px !important;
    object-fit:cover;
    border-radius:4px !important;   /* サムネの角丸 */
    display:block !important;
    margin:0 !important;
    position:static !important;
  }

  /* ② 各 td の flex 化を解除（グリッドアイテムとして正しく並べるため）*/
  body.woocommerce-cart.woocommerce-cart table.shop_table.cart tr.cart_item > td{
    display:block !important;
    flex:none !important;
    flex-wrap:nowrap !important;
    align-items:initial !important;
    flex-direction:initial !important;
  }

  /* ③ 商品名の潰れを解除（padding-right・relative は ⑧ で不要）*/
  body.woocommerce-cart.woocommerce-cart table.shop_table.cart td.product-name{
    position:static !important;
    padding:0 !important;
    margin:0 !important;
  }
  /* 商品名はグリッドで 1段目・2〜3列にまたがる（⑧d の指定を再確実に）*/
  body.woocommerce-cart.woocommerce-cart table.shop_table.cart td.product-name{
    grid-column:2 / 4 !important;
    grid-row:1 !important;
    text-align:left !important;
  }

  /* ④ カード内の点線（td の border-bottom）を消す */
  body.woocommerce-cart.woocommerce-cart table.shop_table.cart tr.cart_item > td,
  body.woocommerce-cart.woocommerce-cart table.shop_table.cart tr.cart_item > td:not(:last-child){
    border:none !important;
    border-bottom:none !important;
  }

  /* 削除「削除する」は原型どおりカードの最下段（左寄せ）に置く */
  body.woocommerce-cart.woocommerce-cart table.shop_table.cart tr.cart_item{
    position:relative !important;
  }
  body.woocommerce-cart.woocommerce-cart table.shop_table.cart td.product-name a{
    display:block !important;
    padding-right:0 !important;
  }
}


/* ============================================================
   ⑧f カート商品カード — 最終レイアウト（原型 .citem と同じ積み方）
   ------------------------------------------------------------
   原型 kumoju-mobile-large.html L1617-1629 の構造：
     .citem
       .cimg（82px サムネ）
       div
         .cn     商品名（明朝 18.5px）
         .cmeta  仕様（サイズ / お名前 / ギフト …）
         .cbot   .cprice（価格）  .cqty（数量器）
         .crm    削除する            ← 最下段・左寄せ

   実装（グリッド 3列 × 3段）：
     列 = [サムネ 82px][本文 1fr][数量器 auto]
     1段目  商品名＋仕様（td.product-name。2〜3列にまたがる）
     2段目  小計（2列）｜数量器（3列）
     3段目  削除する（2〜3列にまたがる・左寄せ）

   ⚠️ ここが最後の指定。上の ⑧e で td を一律 display:block にした際に
      単価の display:none まで打ち消してしまい「価格が2つ」出ていたため、
      単価の非表示はこのブロックで最後に効かせる。
   ============================================================ */
@media (max-width:768.98px){
  /* --- 段組みの土台 --- */
  body.woocommerce-cart.woocommerce-cart table.shop_table.cart tr.cart_item{
    display:grid !important;
    grid-template-columns:82px 1fr auto !important;
    column-gap:12px !important;
    row-gap:9px !important;          /* = .cbot margin-top / .crm margin-top */
    align-items:start !important;
  }

  /* --- ① 単価は出さない（小計と重複）— 必ず最後に効かせる --- */
  body.woocommerce-cart.woocommerce-cart table.shop_table.cart tr.cart_item > td.product-price,
  body.woocommerce-cart.woocommerce-cart table.shop_table.cart td.product-price{
    display:none !important;
  }

  /* --- ② サムネ：1列目・3段ぶんの高さ --- */
  body.woocommerce-cart.woocommerce-cart table.shop_table.cart td.product-thumbnail{
    grid-column:1 !important;
    grid-row:1 / 4 !important;
  }

  /* --- ③ 商品名＋仕様：1段目・2〜3列 --- */
  body.woocommerce-cart.woocommerce-cart table.shop_table.cart td.product-name{
    grid-column:2 / 4 !important;
    grid-row:1 !important;
    display:block !important;        /* flex をやめて素直に縦積み */
  }
  /* 商品名（= 原型 .cn：L459）
       font-family:var(--serif) / font-size:18.5px / font-weight:500
       color:var(--ink) / line-height:1.4
     変体サフィックスは functions.php の woocommerce_cart_item_name で
     すでに外してあるので、そのまま自然に折り返させる（省略記号は使わない）。*/
  body.woocommerce-cart.woocommerce-cart table.shop_table.cart td.product-name > a{
    display:block !important;
    font-family:'Shippori Mincho', serif !important;
    font-size:18.5px !important;
    font-weight:500 !important;
    line-height:1.4 !important;
    color:var(--k-ink) !important;
    margin:0 !important;
    padding:0 !important;
    white-space:normal !important;      /* 参考サイトと同じ：自然に折り返す */
    overflow:visible !important;
    text-overflow:clip !important;
  }

  /* --- ④ 仕様（= 原型 .cmeta：L460）
       font-size:15px / color:var(--ink3) / margin-top:4px / line-height:1.6
     原型は値を「 / 」でつないだ 1 本のテキスト。項目名は出さない。 */
  body.woocommerce-cart.woocommerce-cart table.shop_table.cart td.product-name ul.variation,
  body.woocommerce-cart.woocommerce-cart table.shop_table.cart td.product-name dl.variation{
    display:block !important;
    margin:4px 0 0 !important;         /* = .cmeta margin-top */
    padding:0 !important;
    list-style:none !important;
    font-family:'Zen Maru Gothic', sans-serif !important;
    font-size:15px !important;         /* = .cmeta font-size */
    font-weight:500 !important;
    line-height:1.6 !important;        /* = .cmeta line-height */
    color:var(--k-ink3) !important;    /* = .cmeta color */
    overflow:visible !important;
  }
  /* 各項目をインラインに流し込む（原型は 1 本のテキスト）*/
  body.woocommerce-cart.woocommerce-cart table.shop_table.cart td.product-name ul.variation li{
    display:inline !important;
    margin:0 !important;
    padding:0 !important;
    border:none !important;
    white-space:normal !important;
    overflow:visible !important;
  }
  /* 項目のあいだを「 / 」でつなぐ（原型の join(" / ")）*/
  body.woocommerce-cart.woocommerce-cart table.shop_table.cart td.product-name ul.variation li + li::before{
    content:" / " !important;
    color:var(--k-ink3) !important;
  }
  /* 項目名（サイズをお選びください： 等）は出さない */
  body.woocommerce-cart.woocommerce-cart table.shop_table.cart td.product-name .item-variation-name,
  body.woocommerce-cart.woocommerce-cart table.shop_table.cart td.product-name .variation-name,
  body.woocommerce-cart.woocommerce-cart table.shop_table.cart td.product-name dl.variation dt{
    display:none !important;
  }
  /* 値だけを表示 */
  body.woocommerce-cart.woocommerce-cart table.shop_table.cart td.product-name .item-variation-value,
  body.woocommerce-cart.woocommerce-cart table.shop_table.cart td.product-name .variation-value{
    display:inline !important;
    color:var(--k-ink3) !important;
  }
  body.woocommerce-cart.woocommerce-cart table.shop_table.cart td.product-name .item-variation-value p{
    display:inline !important;
    margin:0 !important;
    padding:0 !important;
  }

  /* --- ⑤ 小計（= 原型 .cprice：L462）
       font-size:18.5px / font-weight:700
     ⚠️ 原型は明朝を指定していない＝本文と同じ丸ゴシック。
        （明朝になるのは合計欄の .sumrow.total .serif だけ）*/
  body.woocommerce-cart.woocommerce-cart table.shop_table.cart td.product-subtotal{
    grid-column:2 !important;
    grid-row:2 !important;
    align-self:center !important;
    justify-self:start !important;
    font-family:'Zen Maru Gothic', sans-serif !important;
    font-size:18.5px !important;     /* = .cprice font-size */
    font-weight:700 !important;      /* = .cprice font-weight */
    color:var(--k-ink) !important;
    margin:9px 0 0 !important;       /* = .cbot margin-top */
  }
  body.woocommerce-cart.woocommerce-cart table.shop_table.cart td.product-subtotal .amount,
  body.woocommerce-cart.woocommerce-cart table.shop_table.cart td.product-subtotal .woocommerce-Price-amount{
    font-family:'Zen Maru Gothic', sans-serif !important;
    font-weight:700 !important;
    color:var(--k-ink) !important;
  }

  /* --- ⑥ 数量器（= 原型 .cqty：L463-465）
       border:1px solid var(--line) / border-radius:9px
       button 28×28px / 19.5px / ink3   span 26px / 17.5px --- */
  body.woocommerce-cart.woocommerce-cart table.shop_table.cart td.product-quantity{
    grid-column:3 !important;
    grid-row:2 !important;
    align-self:center !important;
    justify-self:end !important;
    margin:9px 0 0 !important;       /* = .cbot margin-top（小計と同じ高さに）*/
  }

  /* --- ⑦ 削除する（= 原型 .crm：L466）
       font-size:15px / color:var(--faint) / margin-top:6px --- */
  body.woocommerce-cart.woocommerce-cart table.shop_table.cart td.product-remove{
    position:static !important;      /* 右上の絶対配置をやめる */
    top:auto !important;
    right:auto !important;
    grid-column:2 / 4 !important;
    grid-row:3 !important;
    justify-self:start !important;
    align-self:center !important;
    width:auto !important;
    margin:6px 0 0 !important;       /* = .crm margin-top */
    padding:0 !important;
    text-align:left !important;
  }
  body.woocommerce-cart.woocommerce-cart table.shop_table.cart td.product-remove a.remove{
    display:inline-block !important;
    font-size:0 !important;          /* 元の「×」を消す */
    line-height:1 !important;
    width:auto !important;
    height:auto !important;
    padding:0 !important;
    margin:0 !important;
    background:none !important;
    border:none !important;
  }
  body.woocommerce-cart.woocommerce-cart table.shop_table.cart td.product-remove a.remove::before{
    content:none !important;
  }
  body.woocommerce-cart.woocommerce-cart table.shop_table.cart td.product-remove a.remove::after{
    content:"削除する" !important;
    font-family:'Zen Maru Gothic', sans-serif !important;
    font-size:15px !important;       /* = .crm font-size */
    font-weight:500 !important;
    color:var(--k-faint) !important; /* = .crm color */
    text-decoration:none !important;
  }

  /* --- ⑧ 数量器の中身（= 原型 .cqty の button / span）--- */
  body.woocommerce-cart.woocommerce-cart table.shop_table.cart td.product-quantity .quantity{
    display:flex !important;
    align-items:center !important;
    margin:0 !important;
    border:1px solid var(--k-line) !important;
    border-radius:9px !important;    /* = .cqty radius */
    overflow:hidden !important;
    background:transparent !important;
  }
  body.woocommerce-cart.woocommerce-cart table.shop_table.cart td.product-quantity input.minus,
  body.woocommerce-cart.woocommerce-cart table.shop_table.cart td.product-quantity input.plus{
    width:28px !important;           /* = .cqty button */
    height:28px !important;
    min-height:0 !important;
    padding:0 !important;
    border:none !important;
    background:transparent !important;
    font-family:'Zen Maru Gothic', sans-serif !important;
    font-size:19.5px !important;
    font-weight:500 !important;
    color:var(--k-ink3) !important;
    line-height:1 !important;
  }
  body.woocommerce-cart.woocommerce-cart table.shop_table.cart td.product-quantity input.qty{
    width:26px !important;           /* = .cqty span */
    height:28px !important;
    min-height:0 !important;
    padding:0 !important;
    border:none !important;
    background:transparent !important;
    text-align:center !important;
    font-family:'Zen Maru Gothic', sans-serif !important;
    font-size:17.5px !important;
    font-weight:500 !important;
    color:var(--k-ink) !important;
  }

  /* --- ⑨ カード本体（= 原型 .citem：L457）
       background:var(--paper) / border:1px solid var(--line)
       border-radius:15px / padding:12px / margin-bottom:12px / gap:12px --- */
  body.woocommerce-cart.woocommerce-cart table.shop_table.cart tr.cart_item{
    background:var(--k-paper) !important;
    border:1px solid var(--k-line) !important;
    border-radius:15px !important;
    padding:12px !important;
    margin:0 0 12px !important;
    row-gap:0 !important;            /* 各段の margin-top で間隔をとる */
  }
  /* サムネ（= .cimg：82×82）※角丸はここが最終指定 */
  body.woocommerce-cart.woocommerce-cart table.shop_table.cart td.product-thumbnail img{
    width:82px !important;
    height:82px !important;
    border-radius:4px !important;   /* サムネの角丸：ここを変えれば効く */
  }
}


/* ============================================================
   ⑧g 合計ボックス（cart_totals）— 原型 .sumbox に合わせる
   ------------------------------------------------------------
   WooCommerce 標準の DOM:
     .cart-totals-section .cart_totals
       h2                                 「カートの合計」
       table.shop_table.shop_table_responsive
         tr.cart-subtotal            th 小計        td 金額
         tr.woocommerce-shipping-totals.shipping
                                     th 配送
                                     td ul#shipping_method（送料の選択肢）
                                        p.woocommerce-shipping-destination
                                        form.woocommerce-shipping-calculator（住所を変更）
         tr.order-total              th 合計        td strong 金額
       .wc-proceed-to-checkout > a.checkout-button

   ⚠️ ここが最大の原因：
      この表も .shop_table_responsive なので、768px 以下で
      td::before に data-title（小計 / 配送 / 合計）が入り、
      「小計　小計¥1,580」と ラベルが二重に出る。
      商品行では消したが 合計表では消していなかったので、ここで消す。

   原型 .sumbox / .sumrow（L467-470）:
     .sumbox{background:var(--cream2); border:1px solid var(--line);
             border-radius:15px; padding:16px; margin-top:6px}
     .sumrow{display:flex; justify-content:space-between;
             font-size:17px; color:var(--ink2); margin-bottom:10px}
     .sumrow.total{border-top:1px solid var(--line); padding-top:12px;
                   margin-top:4px; font-size:19.5px; color:var(--ink);
                   font-weight:700}
     .sumrow.total .serif{font-family:var(--serif); font-size:25px}
   ============================================================ */

/* --- ★ 二重ラベル（data-title）を消す（PC・モバイル両方）--- */
body.woocommerce-cart.woocommerce-cart .cart_totals table.shop_table td::before,
body.woocommerce-cart.woocommerce-cart .cart_totals table.shop_table th::before{
  content:none !important;
  display:none !important;
}

/* --- ボックス本体（= .sumbox）--- */
body.woocommerce-cart.woocommerce-cart .cart_totals{
  background:var(--k-cream2) !important;   /* = .sumbox は cream2 */
  border:1px solid var(--k-line) !important;
  border-radius:15px !important;
  padding:16px !important;                 /* = .sumbox padding */
  margin-top:6px !important;
}
/* 見出し「お買い物カゴの合計」は出さない（原型 .sumbox に見出しは無い）*/
body.woocommerce-cart.woocommerce-cart .cart_totals h2{
  display:none !important;
}

/* --- 行ラベルの言い換え（原型の文言に合わせる）---
   WooCommerce が出す文字は CSS で差し替える（翻訳を触らずに済む）。
     小計 → 商品小計   ／   合計 → 合計（税込）                     */
body.woocommerce-cart.woocommerce-cart .cart_totals tr.cart-subtotal th{
  font-size:0 !important;                  /* 元の「小計」を消す */
  line-height:1.6 !important;
}
body.woocommerce-cart.woocommerce-cart .cart_totals tr.cart-subtotal th::after{
  content:"商品小計" !important;
  font-family:'Zen Maru Gothic', sans-serif !important;
  font-size:17px !important;               /* = .sumrow font-size */
  font-weight:500 !important;
  color:var(--k-ink2) !important;
}
body.woocommerce-cart.woocommerce-cart .cart_totals tr.order-total th{
  font-size:0 !important;                  /* 元の「合計」を消す */
  line-height:1.6 !important;
}
body.woocommerce-cart.woocommerce-cart .cart_totals tr.order-total th::after{
  content:"合計（税込）" !important;
  font-family:'Zen Maru Gothic', sans-serif !important;
  font-size:19.5px !important;             /* = .sumrow.total font-size */
  font-weight:700 !important;
  color:var(--k-ink) !important;
}

/* --- PHP で足した 2 行（送料 / 獲得予定ポイント）---
   他の行と同じ .sumrow の見た目にそろえる。 */
body.woocommerce-cart.woocommerce-cart .cart_totals tr.k-cart-shipping-fee th,
body.woocommerce-cart.woocommerce-cart .cart_totals tr.k-cart-shipping-fee td,
body.woocommerce-cart.woocommerce-cart .cart_totals tr.k-cart-points th,
body.woocommerce-cart.woocommerce-cart .cart_totals tr.k-cart-points td{
  font-family:'Zen Maru Gothic', sans-serif !important;
  font-size:17px !important;               /* = .sumrow font-size */
  font-weight:500 !important;
  color:var(--k-ink2) !important;
  line-height:1.6 !important;
}
/* ポイントの「＋487 pt」は獲得を示す加算なので少し強調 */
body.woocommerce-cart.woocommerce-cart .cart_totals tr.k-cart-points td{
  font-weight:700 !important;
  color:var(--k-ink2) !important;
  white-space:nowrap !important;
}

/* --- 表の枠を解除して 1 行 = flex に（= .sumrow）--- */
body.woocommerce-cart.woocommerce-cart .cart_totals table.shop_table,
body.woocommerce-cart.woocommerce-cart .cart_totals table.shop_table tbody{
  display:block !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
  border:none !important;
  background:none !important;
}
body.woocommerce-cart.woocommerce-cart .cart_totals table.shop_table tr{
  display:flex !important;
  justify-content:space-between !important;
  align-items:baseline !important;
  gap:12px !important;
  margin:0 0 10px !important;              /* = .sumrow margin-bottom */
  padding:0 !important;
  border:none !important;
}
body.woocommerce-cart.woocommerce-cart .cart_totals table.shop_table th,
body.woocommerce-cart.woocommerce-cart .cart_totals table.shop_table td{
  display:block !important;
  width:auto !important;
  margin:0 !important;
  padding:0 !important;
  border:none !important;
  background:none !important;
  font-family:'Zen Maru Gothic', sans-serif !important;
  font-size:17px !important;               /* = .sumrow font-size */
  font-weight:500 !important;
  color:var(--k-ink2) !important;          /* = .sumrow color */
  line-height:1.6 !important;
}
body.woocommerce-cart.woocommerce-cart .cart_totals table.shop_table th{
  text-align:left !important;
  white-space:nowrap !important;
  flex:none !important;
}
body.woocommerce-cart.woocommerce-cart .cart_totals table.shop_table td{
  text-align:right !important;
  flex:1 1 auto !important;
  min-width:0 !important;
}
/* 金額の赤（テーマのセール色）を打ち消す */
body.woocommerce-cart.woocommerce-cart .cart_totals table.shop_table td .amount,
body.woocommerce-cart.woocommerce-cart .cart_totals table.shop_table td .woocommerce-Price-amount{
  color:var(--k-ink2) !important;
  font-weight:500 !important;
}

/* --- 配送の行：送料の選択肢と「配送先」を整える --- */
body.woocommerce-cart.woocommerce-cart .cart_totals tr.shipping td ul#shipping_method,
body.woocommerce-cart.woocommerce-cart .cart_totals tr.shipping td ul.woocommerce-shipping-methods{
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
}
body.woocommerce-cart.woocommerce-cart .cart_totals tr.shipping td ul li{
  margin:0 !important;
  padding:0 !important;
  font-size:17px !important;
  color:var(--k-ink2) !important;
}
/* 「東京都 に配送します。」＝ 補足なので一段小さく淡く */
body.woocommerce-cart.woocommerce-cart .cart_totals .woocommerce-shipping-destination{
  margin:4px 0 0 !important;
  font-size:14px !important;
  line-height:1.5 !important;
  color:var(--k-ink3) !important;
}
/* 「住所を変更」リンク：赤 → 淡い墨＋下線 */
body.woocommerce-cart.woocommerce-cart .cart_totals .woocommerce-shipping-calculator > a,
body.woocommerce-cart.woocommerce-cart .cart_totals a.shipping-calculator-button{
  display:inline-block !important;
  margin-top:4px !important;
  font-size:14px !important;
  font-weight:500 !important;
  color:var(--k-ink3) !important;
  text-decoration:underline !important;
}

/* --- 合計行（= .sumrow.total）--- */
body.woocommerce-cart.woocommerce-cart .cart_totals table.shop_table tr.order-total{
  border-top:1px solid var(--k-line) !important;
  padding-top:12px !important;             /* = .sumrow.total padding-top */
  margin-top:4px !important;
  margin-bottom:0 !important;
  align-items:baseline !important;
}
body.woocommerce-cart.woocommerce-cart .cart_totals table.shop_table tr.order-total th{
  font-size:19.5px !important;             /* = .sumrow.total font-size */
  font-weight:700 !important;
  color:var(--k-ink) !important;
}
body.woocommerce-cart.woocommerce-cart .cart_totals table.shop_table tr.order-total td{
  font-size:19.5px !important;
  font-weight:700 !important;
  color:var(--k-ink) !important;
}
/* 合計金額だけ明朝・大きめ（= .sumrow.total .serif）*/
body.woocommerce-cart.woocommerce-cart .cart_totals table.shop_table tr.order-total td .amount,
body.woocommerce-cart.woocommerce-cart .cart_totals table.shop_table tr.order-total td .woocommerce-Price-amount{
  font-family:'Shippori Mincho', serif !important;
  font-size:25px !important;               /* = .sumrow.total .serif */
  font-weight:600 !important;
  color:var(--k-ink) !important;
}
body.woocommerce-cart.woocommerce-cart .cart_totals table.shop_table tr.order-total td strong{
  font-weight:inherit !important;
}
/* 「（税込）」等の注記は小さく */
body.woocommerce-cart.woocommerce-cart .cart_totals table.shop_table tr.order-total td small.includes_tax{
  display:block !important;
  margin-top:2px !important;
  font-family:'Zen Maru Gothic', sans-serif !important;
  font-size:13px !important;
  font-weight:500 !important;
  color:var(--k-ink3) !important;
}

/* --- レジへ進むボタン（= 原型 .cta-btn：L476）--- */
body.woocommerce-cart.woocommerce-cart .wc-proceed-to-checkout{
  padding:14px 0 0 !important;
  margin:0 !important;
}
body.woocommerce-cart.woocommerce-cart .wc-proceed-to-checkout a.checkout-button{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;
  width:100% !important;
  height:50px !important;                  /* = .cta-btn height */
  margin:0 !important;
  padding:0 !important;
  border:none !important;
  border-radius:13px !important;           /* = .cta-btn radius */
  background:var(--k-ink) !important;
  color:var(--k-cream) !important;
  font-family:'Zen Maru Gothic', sans-serif !important;
  font-size:19.5px !important;             /* = .cta-btn font-size */
  font-weight:500 !important;
  letter-spacing:normal !important;
  text-transform:none !important;
  text-decoration:none !important;
  box-shadow:none !important;
}


/* ============================================================
   ⑧h クーポン欄 — 原型と同じ「合計ボックスの下」へ移し、
                    見た目も原型 .k-coupon に合わせる
   ------------------------------------------------------------
   実盤 DOM（Woodmart）:
     .cart-content-wrapper（flex）
       form.woocommerce-cart-form
         .cart-table-section
           table.shop_table.cart
             tbody
               tr.cart_item …（商品）
               tr.wd-cart-action-row > td.actions（クーポン・カート更新）
       .cart-totals-section.cart-collaterals（合計＋レジへ）

   ⚠️ クーポンは form の中、合計は form の外にあるため、
      そのままでは並び順を入れ替えられない。
      そこで form / .cart-table-section / table / tbody を
      display:contents にして「箱を消し」、tr を
      .cart-content-wrapper の flex アイテムに昇格させる。
      → order だけで 商品 → 合計 → クーポン の順に並べ替えられる。

      ★ display:contents は DOM を動かさない（＝ form の中身のまま）ので、
        クーポン送信も数量更新も壊れない。
        万一表示が崩れたら、この ⑧h ブロックを丸ごと削除すれば元に戻る。

   原型 .k-coupon（kumoju-mobile-large.html L472-482）:
     .k-coupon{margin:12px 0 2px}
     .k-coupon .kc-body{display:flex; gap:8px; margin-top:10px}
     input{flex:1; border:1px solid var(--line); border-radius:11px;
           background:var(--cream2); padding:11px 14px; font-size:16px}
     button{background:var(--ink); color:var(--cream); border-radius:11px;
            padding:0 18px; font-size:15.5px; font-weight:500}
   ============================================================ */
@media (max-width:768.98px){
  /* --- 並び替えの土台：中間の箱を透過させる --- */
  body.woocommerce-cart.woocommerce-cart .cart-content-wrapper{
    display:flex !important;
    flex-direction:column !important;
    flex-wrap:nowrap !important;
    column-gap:0 !important;
  }
  body.woocommerce-cart.woocommerce-cart form.woocommerce-cart-form,
  body.woocommerce-cart.woocommerce-cart .cart-table-section,
  body.woocommerce-cart.woocommerce-cart table.shop_table.cart,
  body.woocommerce-cart.woocommerce-cart table.shop_table.cart tbody{
    display:contents !important;
  }
  /* thead は元から非表示だが、display:contents 下でも確実に消す */
  body.woocommerce-cart.woocommerce-cart table.shop_table.cart thead{
    display:none !important;
  }

  /* --- 並び順の土台（確定版は ⑧m / ⑧n を見ること）---
     原型 L1787-1808 の順：
       階段バー → カートの商品 → 商品 → step1 → step2
       → お支払い金額 → 合計ボックス
     ここでは商品だけ決めて、残りは後段でまとめて指定する。 */
  body.woocommerce-cart.woocommerce-cart tr.cart_item{
    order:1 !important;
  }

  /* --- クーポン欄の見た目（= 原型 .k-coupon）--- */
  body.woocommerce-cart.woocommerce-cart tr.wd-cart-action-row > td.actions,
  body.woocommerce-cart.woocommerce-cart td.actions{
    display:block !important;
    width:100% !important;
    margin:12px 0 2px !important;      /* = .k-coupon margin */
    padding:0 !important;
    border:none !important;
    background:transparent !important;
    box-shadow:none !important;
  }
  /* 見出し「クーポンコードをお持ちの方」（= 原型 .k-coupon summary）
     原型は details の summary だが、実盤は常時展開なので
     td.actions の ::before で同じ見た目のラベルを出す。 */
  body.woocommerce-cart.woocommerce-cart tr.wd-cart-action-row > td.actions::before,
  body.woocommerce-cart.woocommerce-cart td.actions::before{
    content:"クーポンコードをお持ちの方" !important;
    display:block !important;
    margin:0 0 10px !important;        /* = .kc-body margin-top */
    padding:0 !important;
    font-family:'Zen Maru Gothic', sans-serif !important;
    font-size:15.5px !important;       /* = .k-coupon summary font-size */
    font-weight:500 !important;
    line-height:1.5 !important;
    color:var(--k-ink3) !important;    /* = .k-coupon summary color */
    text-decoration:underline !important;
    text-align:left !important;
  }
  /* 入力欄＋ボタンを 1 行に（= .kc-body）*/
  body.woocommerce-cart.woocommerce-cart td.actions .coupon{
    display:flex !important;
    gap:8px !important;                /* = .kc-body gap */
    margin:0 !important;
    padding:0 !important;
    border:none !important;
    background:transparent !important;
    float:none !important;
    width:100% !important;
  }
  /* クーポン欄の見出し（テーマが出す場合）*/
  body.woocommerce-cart.woocommerce-cart td.actions .coupon > label{
    display:none !important;
  }
  /* 入力欄（= .kc-body input）*/
  body.woocommerce-cart.woocommerce-cart td.actions .coupon input.input-text{
    flex:1 1 auto !important;
    min-width:0 !important;
    width:auto !important;
    margin:0 !important;
    padding:11px 14px !important;      /* = .kc-body input padding */
    border:1px solid var(--k-line) !important;
    border-radius:11px !important;     /* = .kc-body input radius */
    background:var(--k-cream2) !important;
    font-family:'Zen Maru Gothic', sans-serif !important;
    font-size:16px !important;         /* 16px 以上なら iOS で拡大されない */
    font-weight:500 !important;
    color:var(--k-ink) !important;
    box-shadow:none !important;
    outline:none !important;
    height:auto !important;
    min-height:0 !important;
  }
  body.woocommerce-cart.woocommerce-cart td.actions .coupon input.input-text::placeholder{
    color:var(--k-faint) !important;
  }
  /* 「適用」ボタン（= .kc-body button）
     元の文言「クーポンを適用」は長いので、字を消して「適用」に置き換える。 */
  body.woocommerce-cart.woocommerce-cart td.actions .coupon button{
    flex:none !important;
    width:auto !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 18px !important;         /* = .kc-body button padding */
    border:none !important;
    border-radius:11px !important;     /* = .kc-body button radius */
    background:var(--k-ink) !important;
    color:var(--k-cream) !important;
    font-family:'Zen Maru Gothic', sans-serif !important;
    font-size:0 !important;            /* 元の「クーポンを適用」を消す */
    line-height:1 !important;
    letter-spacing:normal !important;
    text-transform:none !important;
    white-space:nowrap !important;
    box-shadow:none !important;
  }
  body.woocommerce-cart.woocommerce-cart td.actions .coupon button::after{
    content:"適用" !important;
    font-family:'Zen Maru Gothic', sans-serif !important;
    font-size:15.5px !important;       /* = .kc-body button font-size */
    font-weight:500 !important;
    color:var(--k-cream) !important;
  }
  /* 「カートを更新」ボタンは数量変更時に自動送信されるので隠す
     （残したい場合はこの 1 ブロックを削除）*/
  body.woocommerce-cart.woocommerce-cart td.actions > button[name="update_cart"],
  body.woocommerce-cart.woocommerce-cart td.actions button.wd-update-cart,
  body.woocommerce-cart.woocommerce-cart td.actions input[name="update_cart"]{
    display:none !important;
  }
}


/* ============================================================
   ⑧i 合計ボックスの仕上げ（実機で見つかった 4 点）
   ------------------------------------------------------------
   ① ラベルが二重に出る（小計商品小計 / 合計合計（税込））
      → 上の ⑧g で font-size:0 を先に書いたが、そのあとの
        「th,td{ font-size:17px !important }」に負けていた。
        同じ詳細度なら後勝ちなので、ここで最後にもう一度指定する。
   ② 「獲得予定ポイント（10%）」が長い → 「ポイント還元（10%）」へ。
      金額も他の行と区別がつくよう terra（暖かい茶）にする。
   ③ 「Free shipping」は不要 → 配送方法の一覧を隠し、
      「東京都 に配送します。／住所を変更」を上に詰める。
   ④ 合計ボックスの外側にもう一枚あるグレーの角丸枠を消す。
   ============================================================ */

/* --- ④ 外側の枠（.cart-totals-section）を消す ---
   合計ボックス本体（.cart_totals）に枠があるので、
   その外側の枠は二重になって重く見える。 */
body.woocommerce-cart.woocommerce-cart .cart-totals-section,
body.woocommerce-cart.woocommerce-cart .cart-collaterals{
  border:none !important;
  border-radius:0 !important;
  background:transparent !important;
  padding:0 !important;
  box-shadow:none !important;
}

/* --- ① ラベルの二重表示を止める（★ ⑧g より後に置くのが肝）--- */
body.woocommerce-cart.woocommerce-cart .cart_totals table.shop_table tr.cart-subtotal > th,
body.woocommerce-cart.woocommerce-cart .cart_totals table.shop_table tr.order-total > th,
body.woocommerce-cart.woocommerce-cart .cart_totals table.shop_table tr.k-cart-points > th{
  font-size:0 !important;          /* 元の文字（小計 / 合計 / 獲得予定ポイント）を消す */
  line-height:1.6 !important;
}
/* 小計 → 商品小計 */
body.woocommerce-cart.woocommerce-cart .cart_totals table.shop_table tr.cart-subtotal > th::after{
  content:"商品小計" !important;
  font-family:'Zen Maru Gothic', sans-serif !important;
  font-size:17px !important;
  font-weight:500 !important;
  color:var(--k-ink2) !important;
}
/* 合計 → 合計（税込）*/
body.woocommerce-cart.woocommerce-cart .cart_totals table.shop_table tr.order-total > th::after{
  content:"合計（税込）" !important;
  font-family:'Zen Maru Gothic', sans-serif !important;
  font-size:19.5px !important;
  font-weight:700 !important;
  color:var(--k-ink) !important;
}

/* --- ② ポイント行：文言を短く、金額は色で区別 --- */
body.woocommerce-cart.woocommerce-cart .cart_totals table.shop_table tr.k-cart-points > th::after{
  content:"ポイント還元（10%）" !important;
  font-family:'Zen Maru Gothic', sans-serif !important;
  font-size:17px !important;
  font-weight:500 !important;
  color:var(--k-ink2) !important;
}
/* 「＋248 pt」＝ 支払額ではなく“もらえる分”なので、
   金額の墨色とは別に暖かい茶（terra 系）で差をつける。 */
body.woocommerce-cart.woocommerce-cart .cart_totals table.shop_table tr.k-cart-points > td{
  color:#A6714F !important;        /* terra を濃くした版（クリーム地でコントラスト 4.6）*/
  font-weight:700 !important;
  white-space:nowrap !important;
}

/* --- ③ 「Free shipping」を消して配送先を上に詰める --- */
/* 配送方法の一覧（Free shipping のラジオ／ラベル）は出さない */
body.woocommerce-cart.woocommerce-cart .cart_totals tr.shipping td ul#shipping_method,
body.woocommerce-cart.woocommerce-cart .cart_totals tr.shipping td ul.woocommerce-shipping-methods{
  display:none !important;
}
/* 「東京都 に配送します。」を 1 行目の位置へ（余白を詰める）*/
body.woocommerce-cart.woocommerce-cart .cart_totals tr.shipping td .woocommerce-shipping-destination{
  margin:0 !important;
  font-size:15px !important;
  line-height:1.6 !important;
  color:var(--k-ink2) !important;
}
/* 「住所を変更」はその下に小さく */
body.woocommerce-cart.woocommerce-cart .cart_totals tr.shipping td .woocommerce-shipping-calculator{
  margin:2px 0 0 !important;
}
body.woocommerce-cart.woocommerce-cart .cart_totals tr.shipping td .woocommerce-shipping-calculator > a{
  margin:0 !important;
  font-size:14px !important;
  color:var(--k-ink3) !important;
  text-decoration:underline !important;
}


/* ============================================================
   ⑧j クーポン欄の組み直し ＋ レジへ進むボタン（参考サイトに合わせる）
   ------------------------------------------------------------
   実機で崩れていた点：
     ・見出し「クーポンコードをお持ちの方」と入力欄が同じ行に並ぶ
       → td.actions が flex 化されていて ::before が横に入るため。
         縦積み（flex-direction:column）に固定する。
     ・「適用」ボタンが入力欄の下で全幅になる
       → テーマが button に width:100% を当てているので打ち消す。

   参考サイトの並び（kumoju-mobile-large.html）：
     クーポンコードをお持ちの方          ← 見出し（1行目）
     [ クーポンコード      ] [ 適用 ]     ← 入力欄と適用ボタンが横並び
   ============================================================ */
@media (max-width:768.98px){
  /* --- td.actions を「縦積み」に固定（見出し → 入力行）--- */
  body.woocommerce-cart.woocommerce-cart tr.wd-cart-action-row > td.actions,
  body.woocommerce-cart.woocommerce-cart td.actions{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:0 !important;
  }
  /* 見出しは 1 行目を占有 */
  body.woocommerce-cart.woocommerce-cart tr.wd-cart-action-row > td.actions::before,
  body.woocommerce-cart.woocommerce-cart td.actions::before{
    flex:0 0 auto !important;
    width:100% !important;
    order:0 !important;
  }
  /* 入力欄＋ボタンの行は 2 行目 */
  body.woocommerce-cart.woocommerce-cart td.actions .coupon{
    order:1 !important;
    display:flex !important;
    flex-direction:row !important;     /* 横並びを明示 */
    flex-wrap:nowrap !important;       /* 折り返さない（ボタンが下に落ちる原因）*/
    align-items:stretch !important;
    gap:8px !important;
    width:100% !important;
  }
  /* 入力欄は伸びる */
  body.woocommerce-cart.woocommerce-cart td.actions .coupon input.input-text,
  body.woocommerce-cart.woocommerce-cart td.actions .coupon input[name="coupon_code"]{
    flex:1 1 auto !important;
    width:auto !important;
    max-width:none !important;
    min-width:0 !important;
  }
  /* 「適用」ボタンは縮まない・全幅にしない
     （テーマの width:100% / display:block を打ち消す）*/
  body.woocommerce-cart.woocommerce-cart td.actions .coupon button,
  body.woocommerce-cart.woocommerce-cart td.actions .coupon button[name="apply_coupon"],
  body.woocommerce-cart.woocommerce-cart td.actions .coupon input[type="submit"]{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex:0 0 auto !important;
    width:auto !important;
    max-width:none !important;
    min-width:0 !important;
    align-self:stretch !important;     /* 入力欄と同じ高さに */
    padding:0 18px !important;
    margin:0 !important;
    float:none !important;
  }
}

/* ============================================================
   レジへ進むボタン（参考サイト .cta-btn：「レジに進む →」）
   ------------------------------------------------------------
   ・文言：「購入手続きに進む」→「レジに進む」＋ 矢印
   ・Stripe Link の緑ボタンは参考サイトに無いので隠す
   ============================================================ */

/* --- 文言を「レジに進む →」に差し替える --- */
body.woocommerce-cart.woocommerce-cart .wc-proceed-to-checkout a.checkout-button{
  font-size:0 !important;              /* 元の「購入手続きに進む」を消す */
  line-height:1 !important;
}
body.woocommerce-cart.woocommerce-cart .wc-proceed-to-checkout a.checkout-button::after{
  content:"レジに進む →" !important;
  font-family:'Zen Maru Gothic', sans-serif !important;
  font-size:19.5px !important;         /* = .cta-btn font-size */
  font-weight:500 !important;
  color:var(--k-cream) !important;
  letter-spacing:normal !important;
}

/* --- Stripe Link（緑の「link で安全にお支払い」）を隠す ---
   参考サイトには無い。プラグイン側のクラス名が変わっても拾えるよう
   受け皿を広めに書く。決済手段自体はレジ画面に残る。 */
body.woocommerce-cart.woocommerce-cart .wc-proceed-to-checkout .wc-stripe-link-button,
body.woocommerce-cart.woocommerce-cart .wc-proceed-to-checkout [class*="stripe-link"],
body.woocommerce-cart.woocommerce-cart .wc-proceed-to-checkout [id*="stripe-link"],
body.woocommerce-cart.woocommerce-cart .wc-proceed-to-checkout [class*="express-checkout"],
body.woocommerce-cart.woocommerce-cart .wc-proceed-to-checkout [class*="payment-request"],
body.woocommerce-cart.woocommerce-cart .cart-totals-section [class*="stripe-link"],
body.woocommerce-cart.woocommerce-cart .cart-totals-section [class*="express-checkout"],
body.woocommerce-cart.woocommerce-cart .cart-totals-section [class*="payment-request"],
body.woocommerce-cart.woocommerce-cart #wc-stripe-express-checkout-element,
body.woocommerce-cart.woocommerce-cart #wc-stripe-payment-request-button{
  display:none !important;
}


/* ============================================================
   ⑧k ギフト包装行 ／ まとめ買い案内 ／ 固定レジバー
   ------------------------------------------------------------
   ① 「ギフト包装」行（functions.php が商品小計の下に出力）
   ② 「住所を変更」はレジ画面で行うのでカートでは出さない
   ③ まとめ買い割引の案内（= 原型 .freehint：L471）
   ④ レジへ進むボタンを画面下に固定（= 原型 .cta-fixed：L472-477）
      ※ 元のボタンは隠し、同じ URL のリンクを固定バーに置く方式。
        DOM を動かさないので決済導線は壊れない。
   ============================================================ */

/* --- ① ギフト包装の行（他の行と同じ体裁）--- */
body.woocommerce-cart.woocommerce-cart .cart_totals table.shop_table tr.k-cart-gift th,
body.woocommerce-cart.woocommerce-cart .cart_totals table.shop_table tr.k-cart-gift td{
  font-family:'Zen Maru Gothic', sans-serif !important;
  font-size:17px !important;
  font-weight:500 !important;
  color:var(--k-ink2) !important;
  line-height:1.6 !important;
}

/* --- ② 「住所を変更」はカートでは出さない（レジ画面で入力する）--- */
body.woocommerce-cart.woocommerce-cart .cart_totals .woocommerce-shipping-calculator,
body.woocommerce-cart.woocommerce-cart .cart_totals a.shipping-calculator-button{
  display:none !important;
}

/* --- ②b まとめ買い割引の行（WooCommerce の fee 行 = tr.fee）---
   マイナス額なので「−¥2,000」と出る。
   支払いが減る行なので、他の金額（墨色）とは分けて
   セージ系の緑にする（＝得をしている合図）。日本の EC で赤字は
   「エラー・注意」に読まれやすいので使わない。 */
body.woocommerce-cart.woocommerce-cart .cart_totals table.shop_table tr.fee th,
body.woocommerce-cart.woocommerce-cart .cart_totals table.shop_table tr.fee td{
  font-family:'Zen Maru Gothic', sans-serif !important;
  font-size:17px !important;
  font-weight:500 !important;
  line-height:1.6 !important;
}
body.woocommerce-cart.woocommerce-cart .cart_totals table.shop_table tr.fee th{
  color:var(--k-sage-d) !important;
}
body.woocommerce-cart.woocommerce-cart .cart_totals table.shop_table tr.fee td,
body.woocommerce-cart.woocommerce-cart .cart_totals table.shop_table tr.fee td .amount,
body.woocommerce-cart.woocommerce-cart .cart_totals table.shop_table tr.fee td .woocommerce-Price-amount{
  color:var(--k-sage-d) !important;
  font-weight:700 !important;
  white-space:nowrap !important;
}

/* --- ③ まとめ買い割引の案内（= 原型 .freehint：L471）
       font-size:15.5px / sage-d / sage-t 地 / radius 9px / padding 8px 12px --- */
body.woocommerce-cart.woocommerce-cart .k-tier-hint{
  margin:12px 0 !important;          /* = .freehint margin */
  padding:8px 12px !important;       /* = .freehint padding */
  border-radius:9px !important;      /* = .freehint radius */
  background:var(--k-sage-t) !important;
  color:var(--k-sage-d) !important;
  font-family:'Zen Maru Gothic', sans-serif !important;
  font-size:15.5px !important;       /* = .freehint font-size */
  font-weight:500 !important;
  line-height:1.6 !important;
  text-align:left !important;
}
/* 金額は太字に（「あと ¥6,200 で」の数字を目立たせる）*/
body.woocommerce-cart.woocommerce-cart .k-tier-hint .amount,
body.woocommerce-cart.woocommerce-cart .k-tier-hint .woocommerce-Price-amount{
  font-weight:700 !important;
  color:var(--k-sage-d) !important;
}
/* 案内はクーポン欄の直前に置く（商品 → 合計 → 案内 → クーポン）*/
@media (max-width:768.98px){
  body.woocommerce-cart.woocommerce-cart .k-tier-hint{
    order:2 !important;              /* 商品(1) と step1(3) の間。並びの一覧は ⑧m */
    width:100% !important;
  }
}

/* --- ④ 固定レジバー（= 原型 .cta-fixed：L472-477）--- */
/* 元の「レジに進む」ボタンは固定バーに置き換えるので隠す */
body.woocommerce-cart.woocommerce-cart .wc-proceed-to-checkout{
  display:none !important;
}

body.woocommerce-cart .k-cta-fixed{
  position:fixed;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:100%;
  max-width:430px;                   /* = .cta-fixed max-width */
  z-index:45;                        /* = .cta-fixed z-index */
  box-sizing:border-box;
  background:rgba(254,252,247,.96);  /* = .cta-fixed（paper の半透明）*/
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--k-line);
  padding:12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  font-family:'Zen Maru Gothic', sans-serif;
}
/* 上段：合計（税込） ｜ 金額（= .cta-fixed .row）*/
body.woocommerce-cart .k-cta-fixed .k-cta-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;                /* = .cta-fixed .row margin-bottom */
}
body.woocommerce-cart .k-cta-fixed .k-cta-label{
  font-size:15.5px;                  /* = .row .lb */
  font-weight:500;
  color:var(--k-ink3);
}
body.woocommerce-cart .k-cta-fixed .k-cta-value,
body.woocommerce-cart .k-cta-fixed .k-cta-value .amount,
body.woocommerce-cart .k-cta-fixed .k-cta-value .woocommerce-Price-amount{
  font-family:'Shippori Mincho', serif;  /* = .row .vl */
  font-size:26px;                    /* = .row .vl font-size */
  font-weight:600;
  color:var(--k-ink);
  line-height:1.2;
}
/* 下段：レジに進む（= .cta-btn）*/
body.woocommerce-cart .k-cta-fixed .k-cta-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;                           /* = .cta-btn gap */
  width:100%;
  height:50px;                       /* = .cta-btn height */
  border-radius:13px;                /* = .cta-btn radius */
  background:var(--k-ink);
  color:var(--k-cream);
  font-size:19.5px;                  /* = .cta-btn font-size */
  font-weight:500;
  letter-spacing:normal;
  text-decoration:none;
  box-shadow:none;
}
body.woocommerce-cart .k-cta-fixed .k-cta-btn:hover{
  background:#2e2a24;
  color:var(--k-cream);
}
/* 固定バーに隠れないよう、ページ下部に余白を足す（= 原型の height:120px）*/
body.woocommerce-cart .site-content,
body.woocommerce-cart .content-area{
  padding-bottom:132px !important;
}


/* ============================================================
   ⑧m カートページ 最終調整（実機で見つかった 4 点）
   ------------------------------------------------------------
   ① まとめ買い案内の位置：合計ボックスの「下」・クーポンの「上」へ
   ② 「配送」の宛先住所はカートでは出さない（レジで入力する）
   ③ クーポンのエラー文が入力欄の横に回り込む → 独立した 1 行にする
   ④ 並び順の最終確定（★ ここが唯一の正）
   ------------------------------------------------------------
   原型 kumoju-mobile-large.html L1787-1808 と同じ積み方：

     order 0   階段バー（.k-tierbar）／「カートの商品（N点）」
               ＝ .cart-table-section 直下なので既定値のまま先頭
     order 1   商品カード（tr.cart_item）
     order 2   まとめ買い案内（.k-tier-hint）
     order 3   「割引・ポイントのご利用」見出し（.k-usebox-head）
     order 4   step1 クーポン（.k-cpbox）      ← ⑧n で指定
     order 5   step2 ポイント（.k-ptbox）      ← ⑧n で指定
     order 6   「お支払い金額」見出し（.k-totals-head）
     order 7   合計ボックス（.cart-totals-section）
     order 8   通知（.woocommerce-notices-wrapper）

   ⚠️ 合計ボックスを step2 の《下》へ移したのがこの版の変更点。
      それに合わせて見出しも合計ボックスの外に出した（下の order 5）。
   ============================================================ */
@media (max-width:768.98px){
  /* --- ④ 並び順を確定 --- */
  body.woocommerce-cart.woocommerce-cart tr.cart_item{
    order:1 !important;              /* 商品カード */
  }
  /* --- ① まとめ買い案内は商品の下・step1 の上 --- */
  body.woocommerce-cart.woocommerce-cart .k-tier-hint{
    order:2 !important;
    width:100% !important;
    margin:12px 0 !important;
  }
  /* --- 「割引・ポイントのご利用」見出し（step1 の直前）--- */
  body.woocommerce-cart.woocommerce-cart .k-usebox-head{
    order:3 !important;
    width:100% !important;
    flex:0 0 100% !important;
  }
  /* step1（.k-cpbox = 4）/ step2（.k-ptbox = 5）は ⑧n 側で指定。
     既定のクーポン行もそこで display:none にするので、ここでは触らない。 */

  /* --- 「お支払い金額」見出し（= 原型 .sec-head：合計ボックスの外）---
     functions.php が woocommerce_after_cart_table で出す。
     .cart-table-section が display:contents なので、ここに来る。 */
  body.woocommerce-cart.woocommerce-cart .k-totals-head{
    order:6 !important;
    width:100% !important;
    flex:0 0 100% !important;
  }
  /* --- 合計ボックスは step2 の下（原型と同じ最下段）--- */
  body.woocommerce-cart.woocommerce-cart .cart-totals-section{
    order:7 !important;
    width:100% !important;
  }
  /* --- ③ 通知（クーポンのエラー・成功メッセージ）は最後に 1 行で --- */
  body.woocommerce-cart.woocommerce-cart .woocommerce-notices-wrapper{
    order:8 !important;
    display:block !important;
    width:100% !important;
    flex:0 0 100% !important;
    margin:10px 0 0 !important;
  }
}

/* --- ② 「配送」の宛先住所は出さない（レジ画面で入力するため）--- */
body.woocommerce-cart.woocommerce-cart .cart_totals .woocommerce-shipping-destination,
body.woocommerce-cart.woocommerce-cart .cart_totals p.woocommerce-shipping-destination{
  display:none !important;
}

/* --- ③ 通知メッセージ（クーポンのエラー等）を KUMOJU 風に ---
   WooCommerce 既定の緑/赤の帯を、サイトの色味に寄せた 1 行に。 */
body.woocommerce-cart.woocommerce-cart .woocommerce-error,
body.woocommerce-cart.woocommerce-cart .woocommerce-message,
body.woocommerce-cart.woocommerce-cart .woocommerce-info{
  display:block !important;
  width:100% !important;
  box-sizing:border-box !important;
  margin:0 0 10px !important;
  padding:11px 14px !important;
  border:1px solid var(--k-line) !important;
  border-radius:11px !important;
  background:var(--k-cream2) !important;
  font-family:'Zen Maru Gothic', sans-serif !important;
  font-size:14.5px !important;
  font-weight:500 !important;
  line-height:1.6 !important;
  list-style:none !important;
}
/* エラーだけ左に細い色帯を足して区別（赤面積は使わない）*/
body.woocommerce-cart.woocommerce-cart .woocommerce-error{
  border-left:3px solid #C08C7D !important;
  color:#8A5A4C !important;
}
body.woocommerce-cart.woocommerce-cart .woocommerce-message{
  border-left:3px solid var(--k-sage) !important;
  color:var(--k-sage-d) !important;
}
body.woocommerce-cart.woocommerce-cart .woocommerce-error li,
body.woocommerce-cart.woocommerce-cart .woocommerce-message li,
body.woocommerce-cart.woocommerce-cart .woocommerce-info li{
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;
}
/* 通知内の「×」やアイコンは出さない */
body.woocommerce-cart.woocommerce-cart .woocommerce-error::before,
body.woocommerce-cart.woocommerce-cart .woocommerce-message::before,
body.woocommerce-cart.woocommerce-cart .woocommerce-info::before{
  content:none !important;
  display:none !important;
}


/* ============================================================
   ⑨ 原型（kumoju-mobile-large.html）からの移植
   ------------------------------------------------------------
   ① まとめ買い割引の階段バー（.k-tierbar）
   ② 小見出し（.k-sec-head）— カートの商品 / お支払い金額
   ③ クーポン欄を step1 カードに
   ④ 合計ボックスに行区切り線
   ⑤ 固定バーを 1 行に（金額は terra 濃色）
   ⑥ 「削除する」を商品名の右へ・文言は「削除」
   ============================================================ */

/* ---------- ① まとめ買い割引の階段バー ---------- */
body.woocommerce-cart .k-tierbar{
  background:var(--k-paper);
  border:1px solid var(--k-line);
  border-radius:14px;
  padding:14px 14px 12px;
  margin:0 0 12px;
  font-family:'Zen Maru Gothic', sans-serif;
}
/* 吹き出し（あと ○○円）*/
body.woocommerce-cart .k-tierbar .tb-top{height:26px;position:relative;margin-bottom:2px}
body.woocommerce-cart .k-tierbar .tb-bub{
  position:absolute; top:0; transform:translateX(-50%); white-space:nowrap;
  background:var(--k-terra-t); border:1px solid var(--k-terra); color:#8A5A41;
  font-size:12px; font-weight:700; line-height:1; padding:5px 9px; border-radius:7px;
}
body.woocommerce-cart .k-tierbar .tb-bub::after{
  content:""; position:absolute; left:50%; bottom:-5px; transform:translateX(-50%) rotate(45deg);
  width:8px; height:8px; background:var(--k-terra-t);
  border-right:1px solid var(--k-terra); border-bottom:1px solid var(--k-terra);
}
body.woocommerce-cart .k-tierbar .tb-bub.at-start{transform:translateX(0)}
body.woocommerce-cart .k-tierbar .tb-bub.at-start::after{left:16px}
body.woocommerce-cart .k-tierbar .tb-bub.at-end{transform:translateX(-100%)}
body.woocommerce-cart .k-tierbar .tb-bub.at-end::after{left:auto;right:16px}
/* 節点の行（線＋丸）*/
body.woocommerce-cart .k-tierbar .tb-track{display:flex;position:relative;margin-bottom:8px}
body.woocommerce-cart .k-tierbar .tb-track::before{
  content:""; position:absolute; top:11px; left:12.5%; right:12.5%;
  height:2px; background:var(--k-line);
}
body.woocommerce-cart .k-tierbar .tb-fill{
  position:absolute; top:11px; left:12.5%; height:2px;
  background:var(--k-terra); transition:width .35s;
}
body.woocommerce-cart .k-tierbar .tb-n{
  flex:1; display:flex; flex-direction:column; align-items:center;
  position:relative; z-index:1;
}
body.woocommerce-cart .k-tierbar .tb-dot{
  width:22px; height:22px; border-radius:50%;
  background:var(--k-cream2); border:2px solid var(--k-line);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; color:var(--k-faint);
}
body.woocommerce-cart .k-tierbar .tb-n.on .tb-dot{
  background:var(--k-terra); border-color:var(--k-terra); color:#fff;
}
body.woocommerce-cart .k-tierbar .tb-off{
  font-size:16px; font-weight:700; color:var(--k-faint);
  margin-top:6px; line-height:1.2;
}
body.woocommerce-cart .k-tierbar .tb-n.on .tb-off{color:var(--k-ink)}
body.woocommerce-cart .k-tierbar .tb-min{
  font-size:11px; font-weight:700; color:var(--k-cream);
  background:var(--k-faint); border-radius:5px; padding:2px 6px;
  margin-top:5px; line-height:1.5; white-space:nowrap;
}
body.woocommerce-cart .k-tierbar .tb-n.on .tb-min{background:var(--k-terra)}
/* 下の 2 行（まとめ買い / 送料）*/
body.woocommerce-cart .k-tierhint{
  margin-top:11px; padding-top:11px; border-top:1px solid var(--k-line);
}
body.woocommerce-cart .k-tierhint .th-row{
  font-size:14.5px; color:var(--k-ink2); line-height:1.7;
}
body.woocommerce-cart .k-tierhint .th-row + .th-row{margin-top:3px}
body.woocommerce-cart .k-tierhint b,
body.woocommerce-cart .k-tierhint b .amount{color:#A6564A;font-weight:700}
body.woocommerce-cart .k-tierhint em{font-style:normal;color:var(--k-sage-d);font-weight:700}
body.woocommerce-cart .k-tierhint .th-done{color:var(--k-sage-d);font-weight:700}

/* ---------- ② 小見出し（カードの外に置く）---------- */
body.woocommerce-cart .k-sec-head{
  display:flex; align-items:baseline; gap:6px;
  margin:22px 0 10px; padding-bottom:9px;
  border-bottom:1px solid var(--k-line);
  font-family:'Zen Maru Gothic', sans-serif;
}
body.woocommerce-cart .k-sec-head .ch-t{font-size:17px;font-weight:700;color:var(--k-ink)}
body.woocommerce-cart .k-sec-head .ch-n{font-size:15px;font-weight:700;color:var(--k-terra)}

/* ---------- ④ 合計ボックス：行ごとの区切り線 ---------- */
body.woocommerce-cart.woocommerce-cart .cart_totals{
  background:var(--k-paper) !important;   /* cream2 → paper（見出しが外に出たため）*/
  padding:4px 16px 14px !important;
}
body.woocommerce-cart.woocommerce-cart .cart_totals table.shop_table tr{
  padding:11px 0 !important;
  margin:0 !important;
  border-bottom:1px solid var(--k-line) !important;
}
body.woocommerce-cart.woocommerce-cart .cart_totals table.shop_table tr.order-total{
  border-bottom:none !important;
  border-top:1px solid var(--k-line) !important;
  padding:14px 0 0 !important;
  margin-top:2px !important;
}
/* 合計金額はゴシック（明朝は見出し専用にする）*/
body.woocommerce-cart.woocommerce-cart .cart_totals table.shop_table tr.order-total td .amount,
body.woocommerce-cart.woocommerce-cart .cart_totals table.shop_table tr.order-total td .woocommerce-Price-amount{
  font-family:'Zen Maru Gothic', sans-serif !important;
  font-size:26px !important;
  font-weight:700 !important;
}

/* ---------- ⑤ 固定バー：金額（左）＋ボタン（右）を 1 行に ---------- */
body.woocommerce-cart .k-cta-fixed{
  display:flex !important;
  align-items:center;
  gap:12px;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
}
body.woocommerce-cart .k-cta-fixed .k-cta-amt{flex:none;line-height:1.15}
body.woocommerce-cart .k-cta-fixed .k-cta-label{
  display:block; margin-bottom:1px;
  font-size:11.5px; font-weight:700; color:var(--k-faint); letter-spacing:.04em;
}
/* 金額は terra の濃色。明細の合計（墨）と役割で塗り分ける：
   墨＝計算の結果／terra＝これから支払う額（クリーム地でコントラスト 6.5）*/
body.woocommerce-cart .k-cta-fixed .k-cta-value,
body.woocommerce-cart .k-cta-fixed .k-cta-value .amount,
body.woocommerce-cart .k-cta-fixed .k-cta-value .woocommerce-Price-amount{
  font-family:'Zen Maru Gothic', sans-serif !important;
  font-size:22px !important;
  font-weight:700 !important;
  color:#8A5A41 !important;
  white-space:nowrap;
  line-height:1.15;
}
body.woocommerce-cart .k-cta-fixed .k-cta-tax{
  font-size:11px; color:var(--k-ink3); margin-left:3px; font-weight:500;
}
body.woocommerce-cart .k-cta-fixed .k-cta-btn{
  flex:1; min-width:0;
  height:48px; border-radius:12px; font-size:18px;
}
/* 固定バーが低くなったぶん、下の余白も詰める */
body.woocommerce-cart .site-content,
body.woocommerce-cart .content-area{
  padding-bottom:96px !important;
}

/* ---------- ⑥ 「削除」を商品名の右へ ---------- */
@media (max-width:768.98px){
  /* 商品名の td を「名前（左）＋削除（右）」の 2 列に */
  body.woocommerce-cart.woocommerce-cart table.shop_table.cart td.product-name{
    display:grid !important;
    grid-template-columns:1fr auto !important;
    align-items:start !important;
    column-gap:10px !important;
  }
  body.woocommerce-cart.woocommerce-cart table.shop_table.cart td.product-name > a{
    grid-column:1 !important;
    grid-row:1 !important;
  }
  /* 仕様（変体メタ）は名前の下、2列ぶんの幅で */
  body.woocommerce-cart.woocommerce-cart table.shop_table.cart td.product-name ul.variation,
  body.woocommerce-cart.woocommerce-cart table.shop_table.cart td.product-name dl.variation{
    grid-column:1 / 3 !important;
    grid-row:2 !important;
  }
  /* 削除は商品名と同じ行の右端に絶対配置で寄せる */
  body.woocommerce-cart.woocommerce-cart table.shop_table.cart td.product-remove{
    position:absolute !important;
    top:12px !important;
    right:12px !important;
    left:auto !important;
    grid-column:auto !important;
    grid-row:auto !important;
    width:auto !important;
    margin:0 !important;
  }
  /* 文言を「削除」に（下線つき・小さめ）*/
  body.woocommerce-cart.woocommerce-cart table.shop_table.cart td.product-remove a.remove::after{
    content:"削除" !important;
    font-size:13.5px !important;
    text-decoration:underline !important;
    color:var(--k-faint) !important;
  }
  /* 商品名が削除と重ならないよう右を空ける */
  body.woocommerce-cart.woocommerce-cart table.shop_table.cart td.product-name > a{
    padding-right:44px !important;
  }

  /* ---------- ③ 既定のクーポン欄は隠す ----------
     step1 のカードは kumoju-points.php が本物の DOM（.k-cpbox）で
     出すようになったので、WooCommerce 側の欄は要らない。

     ⚠️ display:none にするだけで DOM からは消さない。
        この行には woocommerce-cart-nonce の hidden と
        「カートを更新」ボタンが入っていて、数量変更のときに
        テーマの JS がこのボタンを押しにくるため。
        （消してしまうと数量が更新できなくなる）

     戻したいときは、このブロックを消して ⑧h の td.actions 系の
     指定を生かせば、既定の欄がそのまま出てくる。            */
  body.woocommerce-cart.woocommerce-cart tr.wd-cart-action-row,
  body.woocommerce-cart.woocommerce-cart tr:has(> td.actions){
    display:none !important;
  }

  /* ---------- ⑦ step1 / step2 の並び順 ----------
     全体の並びは ⑧m の一覧を見ること：
     商品(1) → 案内(2) → 割引の見出し(3) → step1(4) → step2(5)
     → お支払い金額(6) → 合計(7) → 通知(8) */
  body.woocommerce-cart.woocommerce-cart .k-cpbox{
    order:4 !important;
    width:100% !important;
  }
  body.woocommerce-cart.woocommerce-cart .k-ptbox{
    order:5 !important;              /* step1（クーポン）の直後 */
    width:100% !important;
  }
}

/* 「お支払い金額」見出し（= 原型 .sec-head：kumoju-mobile-large.html L1796）
   ------------------------------------------------------------
   .k-sec-head の見た目は ⑨② で指定済み。ここでは合計ボックスとの
   間合いだけ整える（見出しの下に 10px、上は前のカードから 22px）。 */
body.woocommerce-cart .k-totals-head{
  margin:22px 0 10px !important;
}
/* 合計ボックス側の上マージンは見出しに任せる（二重に空けない）*/
body.woocommerce-cart.woocommerce-cart .cart-totals-section .cart_totals{
  margin-top:0 !important;
}

/* Woodmart が合計ボックスの内側にもう一枚かける枠と余白を消す。
   ------------------------------------------------------------
   実盤 DOM: .cart_totals > .cart-totals-inner
   woo-page-c…css が .cart-totals-inner に
     padding:25px / border:3px solid var(--brdcolor-gray-200) / border-radius
   を当てているので、こちらのカード（.cart_totals）と二重枠になり、
   さらに内側 25px ぶん余白が足される。ここで丸ごと解除する。 */
body.woocommerce-cart.woocommerce-cart .cart-totals-section .cart-totals-inner,
body.woocommerce-cart.woocommerce-cart .cart_totals .cart-totals-inner{
  margin:0 !important;
  padding:0 !important;
  border:none !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

/* デスクトップ（769px 以上）では display:contents による並べ替えを
   していないので、この見出しは表の直後に取り残される。
   そちらは Woodmart 既定の h2 に任せて、こちらは出さない。 */
@media (min-width:769px){
  body.woocommerce-cart .k-totals-head{
    display:none !important;
  }
  body.woocommerce-cart.woocommerce-cart .cart_totals h2{
    display:block !important;
  }
}

/* step1 / step2 カード本体（＝原型 .usebox .ub-sec）
   ブレイクポイント外でも効かせる */
body.woocommerce-cart .k-usebox{
  background:var(--k-paper);
  border:1px solid var(--k-line);
  border-radius:14px;
  padding:13px 14px;
  margin:0 0 10px;
  font-family:'Zen Maru Gothic', sans-serif;
}
/* 見出し（step バッジ＋タイトル）*/
body.woocommerce-cart .k-usebox .ub-head{
  display:flex; align-items:center; gap:8px; margin-bottom:7px;
}
body.woocommerce-cart .k-usebox .ub-step{
  flex:none; background:var(--k-terra); color:#fff;
  font-size:11.5px; font-weight:700; letter-spacing:.02em;
  padding:3px 8px; border-radius:6px; line-height:1.5;
}
body.woocommerce-cart .k-usebox .ub-title{
  font-size:16.5px; font-weight:700; color:var(--k-ink); line-height:1.4;
}
/* 説明文 */
body.woocommerce-cart .k-usebox .ub-desc{
  font-size:13px; color:var(--k-ink3); line-height:1.7; margin-bottom:10px;
  /* 本文だけ 400 だと細く見えるので 500 に。Zen Maru Gothic は
     400/500/700 を読み込み済み（functions.php L31）なので、
     ブラウザの合成太字ではなく本物のウェイトが当たる。*/
  font-weight:500;
}
body.woocommerce-cart .k-usebox .ub-desc b{color:var(--k-ink2);font-weight:700}
body.woocommerce-cart .k-usebox .ub-desc a{color:var(--k-terra);text-decoration:underline}
/* 入力欄＋ボタン */
body.woocommerce-cart .k-usebox .ub-form{display:flex;gap:8px}
body.woocommerce-cart .k-usebox .ub-form input{
  flex:1 1 auto; min-width:0; width:auto;
  border:1px solid var(--k-line); border-radius:11px;
  background:var(--k-cream2);
  padding:11px 13px; margin:0;
  font-family:'Zen Maru Gothic', sans-serif;
  font-size:16px;                  /* 16px 以上なら iOS で拡大されない */
  color:var(--k-ink); outline:none;
  height:auto; min-height:0;
  box-shadow:none;
}
body.woocommerce-cart .k-usebox .ub-form input::placeholder{color:var(--k-faint)}
body.woocommerce-cart .k-usebox .ub-form input:focus{border-color:var(--k-terra)}
body.woocommerce-cart .k-usebox .ub-form input:disabled{opacity:.65}
body.woocommerce-cart .k-usebox .ub-form button{
  flex:0 0 auto; width:auto; height:auto; min-height:0;
  background:var(--k-ink) !important; color:var(--k-cream) !important;
  border:none !important; border-radius:11px !important;
  padding:0 16px !important; margin:0 !important;
  font-family:'Zen Maru Gothic', sans-serif !important;
  font-size:15px !important; font-weight:500 !important;
  letter-spacing:normal !important; text-transform:none !important;
  white-space:nowrap; cursor:pointer;
  align-self:stretch;
  box-shadow:none !important;
}
body.woocommerce-cart .k-usebox .ub-form button:hover{background:#2e2a24 !important}
/* 適用中バッジ */
body.woocommerce-cart .k-usebox .ub-on{
  display:inline-flex; align-items:center; gap:5px;
  background:var(--k-sage-t); color:var(--k-sage-d);
  font-size:12.5px; font-weight:700;
  padding:4px 9px; border-radius:7px; margin-top:8px;
}
/* 注記 */
body.woocommerce-cart .k-usebox .ub-note{
  font-size:12.5px; color:var(--k-ink3); line-height:1.7; margin-top:8px;
  font-weight:500;   /* .ub-desc と揃える */
}


/* ============================================================
   ⑩ カートページ 2026-07-30 の調整
   ------------------------------------------------------------
   ② 合計欄の「配送」行は出さない（金額は上の「送料」行で出している）

   ※ ① にあった「商品カードを 1 枚に結合」は 2026-07-30 に取り下げた。
     商品ごとに独立したカード（⑧f）のほうが見やすい、という判断。
   ============================================================ */

/* ---------- ② 合計欄の「配送」行は出さない ----------
   送料の金額は kumoju_cart_row_shipping_fee が出す「送料」行で見せている。
   ここは配送方法の選択 UI（今は無料配送 1 つだけ）と住所リンクなので、
   カートでは見せずレジ画面に任せる。
   ⚠️ display:none にとどめ、DOM からは消さない。
      配送方法の hidden（shipping_method[0]）が残っていないと
      WooCommerce 側の選択状態が壊れる。
   ⚠️ セレクタに table.shop_table を入れているのは、上の ⑧g（L2382）の
      「…table.shop_table tr{display:flex !important}」より詳細度を
      高くするため。これが無いと flex に負けて消えない。 */
body.woocommerce-cart.woocommerce-cart .cart_totals table.shop_table tr.woocommerce-shipping-totals{
  display:none !important;
}


/* ============================================================
   ⑪ カートページ 2026-07-30 の調整（その2）
   ------------------------------------------------------------
   ① step1 / step2 を「割引の欄」と分かる見た目にする
   ② 合計欄の金額の書体・大きさ・色を原型にそろえる
   ============================================================ */

/* ---------- ① step1 / step2 を「割引の欄」に見せる ----------
   カードの形（紙地・線・角丸14px）と中の組み方は今のまま。
   変えるのは 2 点だけ：

     ・上に小見出し「割引・ポイントのご利用」を置く（PHP 側で出力）
       ページの他の区切り（カートの商品／お支払い金額）と同じ部品なので、
       リズムを崩さずに「ここから別のかたまり」と分かる。

     ・カードの見出し行（step バッジ＋タイトル）を帯にして、
       セージの淡色を敷く。

   なぜテラコッタの淡色か：
     この配色でセージは「いま効いている・得をしている」の状態色として
     すでに埋まっている（✓適用中バッジ .ub-on／合計欄の値引き額／
     送料無料の案内 .freehint）。見出しの地色に同じ緑を使うと
     「状態の色」と「構造の色」が混ざって読みにくい。
     テラコッタは step バッジや小見出しの点数など《構造》側で
     使っている色なので、こちらを薄めて敷くほうが筋が通る。
   面積は見出し帯だけに絞ってあるので、商品カードや合計ボックスの
   紙地と喧嘩しない。 */

/* 帯をカードの端まで届かせるため、上の padding をゼロにして角で切り抜く */
body.woocommerce-cart .k-usebox{
  padding-top:0;
  overflow:hidden;                 /* 帯の角を border-radius に合わせる */
}
body.woocommerce-cart .k-usebox .ub-head{
  margin:0 -14px 11px;             /* カードの左右 padding ぶん外へ広げる */
  padding:9px 14px;
  background:var(--k-terra-t);
  border-bottom:1px solid var(--k-line);
}

/* 見出し「割引・ポイントのご利用」の間合い（= 他の .k-sec-head と同じ）*/
body.woocommerce-cart .k-usebox-head{
  margin:22px 0 10px !important;
}

/* ---------- ② 合計欄の金額を原型にそろえる ----------
   原型 kumoju-mobile-large.html L479-488（.sumrow ほか）:
     .sumrow                  16px / 500 / ink2
     .sumrow.off  span:last   sage-d / 700      ← 値引き行
     .sumrow.pt   span:last   #8C6520 / 700     ← 獲得ポイント行
     .sumrow.total            18px / 700 / ink
     .sumrow.total .tv        ゴシック 26px / 700

   ⚠️ 実測でズレていた点：
      ・小計 / 送料 / クーポンの金額が明朝で出ていた。
        .amount が商品ページ用の明朝指定を拾っていたため。
        原型は全部ゴシックなので、合計欄では明朝を打ち消す。
        （合計金額は元からゴシック 26px なので変わらない）
      ・行が 17px、合計ラベルが 19.5px と、原型より 1〜1.5px 大きかった。 */

/* 金額の書体をゴシックに統一 */
body.woocommerce-cart.woocommerce-cart .cart_totals table.shop_table td .amount,
body.woocommerce-cart.woocommerce-cart .cart_totals table.shop_table td .woocommerce-Price-amount,
body.woocommerce-cart.woocommerce-cart .cart_totals table.shop_table td bdi{
  font-family:'Zen Maru Gothic', sans-serif !important;
}
/* 通常行：16px（= .sumrow）*/
body.woocommerce-cart.woocommerce-cart .cart_totals table.shop_table th,
body.woocommerce-cart.woocommerce-cart .cart_totals table.shop_table td,
body.woocommerce-cart.woocommerce-cart .cart_totals tr.cart-subtotal th::after,
body.woocommerce-cart.woocommerce-cart .cart_totals tr.k-cart-shipping-fee th,
body.woocommerce-cart.woocommerce-cart .cart_totals tr.k-cart-shipping-fee td,
body.woocommerce-cart.woocommerce-cart .cart_totals tr.k-cart-points th,
body.woocommerce-cart.woocommerce-cart .cart_totals tr.k-cart-points td{
  font-size:16px !important;
}
/* ⚠️ 上の th 一括指定は、文言を差し替えている 2 行の
      「元のラベルを font-size:0 で消す」指定（⑧g L2330/L2341）まで
      上書きしてしまい、「合計合計（税込）」と二重に出る。
      その 2 行だけ 0 に戻す（見えているのは ::after のほう）。 */
body.woocommerce-cart.woocommerce-cart .cart_totals table.shop_table tr.cart-subtotal th,
body.woocommerce-cart.woocommerce-cart .cart_totals table.shop_table tr.order-total th{
  font-size:0 !important;
}
/* 値引き行の金額：セージの濃色・太字（= .sumrow.off）
   行に付く .k-row-minus は functions.php が金額のマイナス記号を見て付ける。 */
body.woocommerce-cart.woocommerce-cart .cart_totals table.shop_table tr.k-row-minus td,
body.woocommerce-cart.woocommerce-cart .cart_totals table.shop_table tr.k-row-minus td .amount,
body.woocommerce-cart.woocommerce-cart .cart_totals table.shop_table tr.k-row-minus td .woocommerce-Price-amount{
  color:var(--k-sage-d) !important;
  font-weight:700 !important;
}
/* 獲得予定ポイントの金額：金茶・太字（= .sumrow.pt）*/
body.woocommerce-cart.woocommerce-cart .cart_totals table.shop_table tr.k-cart-points td{
  color:#8C6520 !important;
  font-weight:700 !important;
}
/* 合計行：ラベル 18px（= .sumrow.total）。金額 26px はそのまま。
   ⚠️ th そのものには効かせない（上で 0 に戻した二重表示の対策）。
      見えているラベルは ::after のほう。 */
body.woocommerce-cart.woocommerce-cart .cart_totals table.shop_table tr.order-total td,
body.woocommerce-cart.woocommerce-cart .cart_totals tr.order-total th::after{
  font-size:18px !important;
}
body.woocommerce-cart.woocommerce-cart .cart_totals table.shop_table tr.order-total td .amount,
body.woocommerce-cart.woocommerce-cart .cart_totals table.shop_table tr.order-total td .woocommerce-Price-amount{
  font-size:26px !important;
}


/* ---------- ③ 商品カードの金額を原型と同じ大きさに ----------
   原型 .citem .cprice（L462）は 18.5px / 700。
   外側の td には 18.5px を指定してあったが、中の
   <span class="amount"> が 14px の指定を拾っていて、実際に見えるのは
   14px のままだった（実測）。span 側にも明示する。 */
body.woocommerce-cart.woocommerce-cart table.shop_table.cart td.product-subtotal .amount,
body.woocommerce-cart.woocommerce-cart table.shop_table.cart td.product-subtotal .woocommerce-Price-amount,
body.woocommerce-cart.woocommerce-cart table.shop_table.cart td.product-subtotal bdi,
body.woocommerce-cart.woocommerce-cart table.shop_table.cart td.product-subtotal .woocommerce-Price-currencySymbol{
  font-size:18.5px !important;     /* = .cprice font-size */
  line-height:1.3 !important;
}


/* ---------- ④ 通知欄は中身が無いとき出さない ----------
   .woocommerce-notices-wrapper は WooCommerce が常に置く「入れ物」で、
   メッセージが無くても margin-top:10px ぶんの余白だけ残っていた
   （ページ最下部に空の箱ができる）。中身が入っているときだけ出す。

   ⚠️ :empty ではなく :not(:has(> *)) を使う。
      WooCommerce の出力は改行だけのテキストノードを含むことがあり、
      それだと :empty は当たらない。
   ⚠️ 消すのは「空のとき」だけ。エラー（無効なクーポン等）や
      「商品を削除しました 元に戻す」は出さないと困るので残す。 */
body.woocommerce-cart.woocommerce-cart .woocommerce-notices-wrapper:not(:has(> *)){
  display:none !important;
  margin:0 !important;
}


/* ============================================================
   犬種べつの「作品例」（原型 kumoju-mobile-large.html L1938-1944）
   ------------------------------------------------------------
   出力は inc/kumoju-breeds.php、動きは js/kumoju-breeds.js。
   お客さまの声のいちばん下に丸いアイコンを横に並べ、押すと
   その犬種の作品例が下から出る枠に並ぶ。

   ⚠️ 枠（.k-bd-sheet）は .k-rv-sheet の CSS をそのまま借りている
      （面・角丸・見出し・×・つづきを見る）。ここに書くのは中身だけ。
   ============================================================ */

/* ---------- 丸いアイコンの横並び（原型 .breeds：L280-284 / L818）---------- */
.single-product .k-bd{
  margin-top:16px;
}
.single-product .k-bd-h{
  /* 原型 L1938：font-size:17px / font-weight:700 / margin:18px 0 2px */
  font-size:17px;
  font-weight:700;
  color:var(--k-ink);
  margin:0 0 2px;
}
/* 種類タブ（犬 / 猫 / その他の子）＝ 原型 .sptabs（L286-296）。
   写真のある種類が 2 つ以上あるときだけ PHP 側が出力する。
   ⚠️ Woodmart は すべての <button> に min-height:var(--btn-height)（=42px）を
      当てているので、ここでも外しておく（外さないとタブが縦に間延びする）。 */
.single-product .k-bd-sps{
  display:flex;
  gap:8px;
  margin:8px 0 2px;
}
.single-product .k-bd-sp{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:9px 4px;
  border:1px solid var(--k-line);
  border-radius:11px;
  background:var(--k-paper);
  color:var(--k-ink2);
  font-size:15px;
  line-height:1;
  font-weight:400;
  white-space:nowrap;      /* 「その他の子」が 2 行に折れて高さが揃わなくなるのを防ぐ */
  min-height:0 !important;
  height:auto;
  box-shadow:none;
  cursor:pointer;
}
.single-product .k-bd-sp i{ font-style:normal; font-size:17px; }
.single-product .k-bd-sp.is-on{
  background:var(--k-terra-t);
  border-color:var(--k-terra);
  color:#7F5741;
  font-weight:700;
}
.single-product .k-bd-row{
  display:flex;
  gap:14px;
  overflow-x:auto;
  padding:8px 0 6px;
  scrollbar-width:none;
}
.single-product .k-bd-row::-webkit-scrollbar{ display:none }
.single-product .k-bd-i{
  /* ⚠️ Woodmart が :is(.btn,.button,button,…) に
        display:inline-flex / align-items:center / justify-content:center を
        当ててくる（woodmart/css/parts/base.min.css）。何もしないと
        丸い写真と名前が「横並び」になり、写真がつぶれて名前が隣に出る。
        display:block に戻すのではなく、縦積みの flex として組み直す
        （親主題の inline-flex より詳細度で勝つほうが安全）。 */
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  flex:none;
  width:80px;               /* 原型 L818（大きい画面では 64→80）*/
  padding:0;
  border:0;
  background:none;
  text-align:center;
  cursor:pointer;
}
.single-product .k-bd-i .bi{
  display:block;
  flex:none;                /* 縦積みの flex の中で丸がつぶれないように */
  width:64px;
  height:64px;
  margin:0 auto;
  border-radius:50%;
  border:2px solid var(--k-paper);
  background-color:var(--k-cream2);
  background-size:cover;
  background-position:center;
  box-shadow:0 2px 8px rgba(60,50,35,.10);
}
.single-product .k-bd-i .bn{
  font-size:14.5px;
  line-height:1.3;
  /* ⚠️ Woodmart のボタンは font-weight:600。名前は本文と同じ太さに戻す。 */
  font-weight:400;
  color:var(--k-ink2);
  margin-top:6px;
  /* 長い犬種名は 2 行まで。3 行になると丸の間隔がそこだけ開いて、
     横に流したときの並びが崩れる（表示名じたいも PHP 側で短くしてある）。 */
  display:-webkit-box;
  -webkit-line-clamp:2;
  line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* ⚠️ 犬種の枠は wp_footer に置いてあり、.k-rv の外にいる。
      レビュー欄のボタン初期化（.single-product .k-rv button の min-height:0）が
      届かないので、ここで同じ手当てをする。Woodmart は全ボタンに
      min-height:var(--btn-height) と font-weight:600 を当ててくるため、
      これが無いと「×」ボタンが縦長の楕円になり、タブの字だけ太くなる。 */
.single-product .k-bd-sheet button{
  min-height:0;
  font-weight:400;
}

/* ---------- 枠の中：犬種タブ（原型 .subcat：L571-574）---------- */
.single-product .k-bd-tabs{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding:2px 0 12px;
  scrollbar-width:none;
}
.single-product .k-bd-tabs::-webkit-scrollbar{ display:none }
.single-product .k-bd-tab{
  flex:none;
  padding:8px 15px;
  border-radius:99px;
  font-size:16.5px;
  background:var(--k-paper);
  border:1px solid var(--k-line);
  color:var(--k-ink2);
  cursor:pointer;
}
.single-product .k-bd-tab.on{
  background:var(--k-ink);
  border-color:var(--k-ink);
  color:var(--k-cream);
}

/* ---------- 枠の中：写真の並び（原型 .rv-grid：L124-125）----------
   3 列の正方形。原型は写真の上に「柴犬・ももちゃん」を焼き込んでいるが、
   ここでは出さない ── お店が入れた作品例には飼い主のお名前が無く、
   有るものと無いものが混ざると、名前の有無が「お客さまの声かどうか」の
   目印に見えてしまう。誰の写真かは、押して大きくしたときに出る。 */
.single-product .k-bd-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:5px;
}
.single-product .k-bd-p{
  aspect-ratio:1;
  padding:0;
  border:0;
  border-radius:10px;
  background-color:var(--k-cream2);
  background-size:cover;
  background-position:center;
  cursor:pointer;
}
.single-product .k-bd-empty{
  padding:24px 4px;
  text-align:center;
  font-size:15.5px;
  color:var(--k-faint);
}
.single-product .k-bd-more{
  margin-top:12px;
}
/* ⚠️ このボタンは .k-rv-more の見た目を借りている（＝display:block が付く）。
      display を明示すると hidden 属性が効かなくなるので、ここで打ち消す。
      これが無いと、写真が 1 枚も無い犬種でも「つづきを見る」が出たままになる。 */
.single-product .k-bd-more[hidden]{ display:none }

/* ---------- 写真ビューアの中の「この商品を見る」----------
   作品例から開いたときだけ出る（レビューの写真から開いたときは
   その商品のページの上にいるので、js 側で hidden のまま）。
   ⚠️ 2026-09-21：`.single-product` の前置きを外した。ビューアは body 直下に出るので、
      犬種べつの作品例のページ（＝ .single-product が付かない）では
      この 1 行が **一度も効いていなかった**。
   ⚠️ 色も 地が «濃いココア» になったので 陶土色 → 明るい方（#E3C3AE）へ。 */
.k-rvv .k-rvv-link{
  display:inline-block;
  margin-top:10px;
  font-size:15px;
  color:#E3C3AE;
  text-decoration:underline;
}
.k-rvv .k-rvv-link[hidden]{ display:none }

/* ============================================================
   ============================================================
   KUMOJU トップページ
   原型：kumoju-mobile-large.html の pageHome()（L1663〜1805）
   HTML：inc/kumoju-home.php ／ 動き：js/kumoju-home.js
   ------------------------------------------------------------
   作用域は .kumoju-home の中だけ。ページ全体に効かせるものは
   body.kumoju-home-page を前に付けてある（＝トップ以外は無傷）。
   ============================================================
   ============================================================ */

/* ---------- ページの器：Woodmart の container の内側余白を外す ----------
   原型は区画ごとに 16px の余白を自分で持っている。テーマ側の container の
   余白をそのままにすると二重になって、写真が画面いっぱいに広がらない。
   DOM は .main-page-wrapper > .container > .content-layout-wrapper >
   .site-content > article（実測）。 */
body.kumoju-home-page{ background:#F5F0E6 }
body.kumoju-home-page .main-page-wrapper > .container{
  max-width:none; width:100%; padding-left:0; padding-right:0;
}
body.kumoju-home-page .content-layout-wrapper{ margin-left:0; margin-right:0 }
body.kumoju-home-page .site-content{ padding-left:0; padding-right:0; margin-bottom:0 }
/* 旧トップに付いていた見出し・パンくずは出さない */
body.kumoju-home-page .page-title,
body.kumoju-home-page .wd-page-title{ display:none }

/* ---------- 設計トークン（原型 L11〜24 の :root と同じ値） ---------- */
.kumoju-home{
  --cream:#F5F0E6; --cream2:#FBF7EF; --paper:#FEFCF7;
  --ink:#3F3A32; --ink2:#6B6458; --ink3:#8A8377; --faint:#A69C8B;
  --line:#EAE1D0; --line2:#E7DFD2;
  --terra:#C79B87; --terra-t:#F3E9DE;
  --sage:#9DB09A; --sage-d:#6E7F63; --sage-t:#E7ECE1;
  --blue:#A9BBC4; --blue-t:#E4EAEC; --blue-d:#8494A0;
  --serif:'Shippori Mincho',serif;
  --gothic:'Zen Maru Gothic',sans-serif;
  --mono:'DM Mono',monospace;
  --shadow-s:0 5px 16px rgba(120,105,80,.09);

  background:var(--cream);
  font-family:var(--gothic);
  color:var(--ink);
  padding-bottom:28px;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
.kumoju-home *{ box-sizing:border-box }
/* ⚠️ 基準の字の大きさは 16px。Woodmart は body を 14px にしているので、
      自分で font-size を持たない要素（.step の説明文など）が原型より
      2px 小さくなる。ここで原型と同じ土台に戻す。 */
/* ⚠️ 行の高さも同じ理由。Woodmart は 1.6 を継承させるが、原型は normal のまま。
      1.6 のままだと扉や見出しが 1 行あたり数 px ずつ伸びて、区画の高さがずれる
      （実測：扉の区画で +30px）。行間を持たせたい要素は各自 line-height を持っている。 */
.kumoju-home{ font-size:16px; line-height:normal }
/* ⚠️ Woodmart は b / strong を 600 にしている。原型は既定の 700 のままなので、
      戻さないと「選んで、ご注文」などの小見出しが本文に埋もれる。 */
.kumoju-home b,
.kumoju-home strong{ font-weight:700 }
.kumoju-home a{ color:inherit; text-decoration:none }
.kumoju-home p{ margin:0 }
.kumoju-home section{ padding:0 16px }
.kumoju-home .k-sp14{ height:14px }
.kumoju-home .k-sp6{ height:6px }

/* 行き先がまだ無い導線は《押せる見た目》にしない（原型は全部デモ遷移だった）。
   ページを作って inc/kumoju-home.php の kumoju_home_links() に URL を入れると、
   自動でリンクに戻る。 */
.kumoju-home .is-off{ cursor:default }
.kumoju-home .sec-h .more.is-off,
.kumoju-home .flow .note.is-off,
.kumoju-home .story .slk.is-off,
.kumoju-home .rv-all.is-off,
.kumoju-home .linebar.is-off{ display:none }

/* ---------- 見出し（原型 L77〜81 .sec-h） ---------- */
.kumoju-home .sec-h{
  display:flex; align-items:flex-end; justify-content:space-between; margin:26px 0 14px;
}
.kumoju-home .sec-h.pad{ padding:0 16px }
.kumoju-home .sec-h .eyt{
  font-family:var(--mono); font-size:14px; letter-spacing:.2em; color:var(--faint);
}
.kumoju-home .sec-h .jt{
  font-family:var(--serif); font-size:23.5px; font-weight:500; color:var(--ink);
  margin-top:3px; letter-spacing:.03em;
}
.kumoju-home .sec-h .more{
  font-size:15.5px; color:var(--ink2); display:flex; align-items:center; gap:2px; flex:none;
}
.kumoju-home .sec-h .more svg{ width:12px; height:12px; stroke:currentColor; stroke-width:1.8; fill:none }

/* ---------- ① ヒーロー ----------
   ⚠️ 画像 1 枚だけ。見出し・説明文・ボタンを重ねる CSS は置かないこと。
      文字ごとデザインした画像を差し替えて使う方針（2026-08-05）。
      文字を乗せると、画像側のレイアウトとかならず喧嘩する。

   高さは画像そのものの縦横比で決まる（aspect-ratio で切り取らない）。
   デザインした絵の上下が切れてしまうと、いちばん見せたい文字が消えるため。
   → 6 枚は同じ縦横比で作ること（inc/kumoju-home.php の kumoju_home_slides()）。
     いまは 6 枚すべて 1200×1200 の正方形。 */
.kumoju-home .carousel{ position:relative; overflow:hidden; background:var(--cream) }
.kumoju-home .car-track{
  display:flex; align-items:flex-start;
  transition:transform .55s cubic-bezier(.33,.8,.35,1);
}
.kumoju-home .slide{ flex:0 0 100%; display:block }
.kumoju-home .slide picture{ display:block }
.kumoju-home .slide .im{
  width:100%; height:auto; display:block; background-color:#EAE0CF;
}

/* 丸い印は画像の《下》。画像に重ねない（絵柄を隠さないため）。 */
.kumoju-home .cdots{
  display:flex; justify-content:center; align-items:center; gap:7px;
  padding:12px 16px 2px;
}
.kumoju-home .cdot{
  width:6px; height:6px; padding:0; border:none; border-radius:99px;
  background:#D3C7B2; transition:.3s; cursor:pointer;
  min-height:0; box-shadow:none;    /* Woodmart の button 既定を打ち消す */
}
.kumoju-home .cdot.on{ width:18px; background:var(--terra) }

/* ---------- ② 締切の帯（原型 L148〜152 .ddl） ---------- */
.kumoju-home .ddl{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  background:#FBEDE4; border:1px solid #EFD3C2; color:#8A4A29;
  font-size:16px; line-height:1.6; border-radius:12px; padding:11px 14px; margin:0 16px 12px;
}
.kumoju-home .ddl .dtx{ font-style:normal }
.kumoju-home .ddl b{ font-weight:700 }
.kumoju-home .ddl span{
  margin-left:auto; background:#C97D55; color:#fff; font-size:15px; font-weight:700;
  padding:3px 10px; border-radius:99px; white-space:nowrap;
}
.kumoju-home .ddl.mem{ background:var(--blue-t); border-color:#CFDADF; color:var(--blue-d) }
.kumoju-home .ddl.mem span{ background:var(--blue-d) }

/* ---------- ③ どの子でもお作りします（原型 L302〜311 .spbar） ----------
   猫・うさぎの飼い主が「うちの子は対象外かも」で離脱するのを止める帯。
   ファーストビューのすぐ下＝商品を見る前に置くこと。 */
.kumoju-home .spbar{
  margin:0 16px; padding:15px 16px 13px; background:var(--paper);
  border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-s);
}
.kumoju-home .spbar .sph{
  font-family:var(--serif); font-size:18.5px; font-weight:600; color:var(--ink);
  text-align:center; letter-spacing:.02em;
}
.kumoju-home .spbar .spl{
  display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin:11px 0 9px;
}
.kumoju-home .spbar .spc{
  display:inline-flex; align-items:center; gap:4px; padding:5px 10px; border-radius:999px;
  background:var(--cream2); border:1px solid var(--line2); font-size:14px;
  color:var(--ink2); line-height:1;
}
.kumoju-home .spbar .spc i{ font-style:normal; font-size:15px }
.kumoju-home .spbar .spc-more{ background:none; border-style:dashed; color:var(--faint) }
.kumoju-home .spbar .spn{ font-size:14px; color:var(--ink3); text-align:center; line-height:1.7 }

/* ---------- ④ ふたつの扉（原型 L220〜237 .doors） ---------- */
.kumoju-home .doors{ padding-top:22px }
.kumoju-home .doors .lead{ text-align:center; margin-bottom:16px }
.kumoju-home .doors .lead .t{ font-family:var(--serif); font-size:20.5px; color:var(--ink) }
.kumoju-home .doors .lead .d{ font-size:15px; color:var(--faint); margin-top:4px; letter-spacing:.06em }
.kumoju-home .door{
  position:relative; border-radius:20px; overflow:hidden; margin-bottom:14px;
  box-shadow:var(--shadow-s); display:block;
}
.kumoju-home .door .di{ height:150px; background-size:cover; background-position:center; background-color:#EAE0CF }
.kumoju-home .door .dtx{ padding:16px 18px 18px }
.kumoju-home .door .en{
  font-family:var(--mono); font-size:14px; letter-spacing:.14em;
  display:flex; align-items:center; gap:8px;
}
.kumoju-home .door .en::before{ content:""; width:20px; height:2px; border-radius:2px; background:currentColor }
.kumoju-home .door .jp{
  font-family:var(--serif); font-size:25px; font-weight:500; color:var(--ink); margin:9px 0 6px;
}
.kumoju-home .door .desc{ font-size:16px; line-height:1.8; color:var(--ink2) }
.kumoju-home .door .go{
  margin-top:12px; font-size:16.5px; font-weight:500; color:var(--ink);
  display:inline-flex; align-items:center; gap:5px;
}
.kumoju-home .door .go svg{ width:13px; height:13px; stroke:currentColor; stroke-width:1.8; fill:none }
.kumoju-home .door.gift{ background:var(--cream2); border:1px solid var(--line) }
.kumoju-home .door.gift .en{ color:var(--terra) }
.kumoju-home .door.mem{ background:#F1F1EE; border:1px solid #E1E2E0 }
.kumoju-home .door.mem .en{ color:var(--blue-d) }

/* ---------- ⑤ 制作の流れ（原型 L331〜339 .flow） ---------- */
.kumoju-home .flow{ background:var(--sage-t); border-radius:20px; padding:22px 18px; margin-top:8px }
.kumoju-home .flow .ft{
  text-align:center; font-family:var(--serif); font-size:21.5px; color:var(--sage-d); font-weight:600;
}
.kumoju-home .flow .fd{ text-align:center; font-size:15.5px; color:var(--ink2); margin:4px 0 20px }
.kumoju-home .step{ display:flex; gap:14px; align-items:flex-start; margin-bottom:16px }
.kumoju-home .step .no{
  flex:none; width:38px; height:38px; border-radius:50%; background:var(--paper);
  display:flex; align-items:center; justify-content:center; font-family:var(--serif);
  font-size:20.5px; font-weight:600; color:var(--sage-d); box-shadow:var(--shadow-s);
}
.kumoju-home .step b{ display:block; font-size:17.5px; color:var(--ink); margin-bottom:3px }
.kumoju-home .step span{ font-size:16px; color:var(--ink2); line-height:1.7 }
.kumoju-home .flow .note{
  display:block; text-align:center; font-size:15.5px; color:var(--sage-d);
  background:var(--paper); border-radius:11px; padding:9px; margin-top:4px;
}

/* ---------- 横スクロール列の共通（原型 L101〜102） ---------- */
.kumoju-home .chips,
.kumoju-home .feats,
.kumoju-home .breeds,
.kumoju-home .rvrow{ cursor:grab; scrollbar-width:none }
.kumoju-home .chips:active,
.kumoju-home .feats:active,
.kumoju-home .breeds:active,
.kumoju-home .rvrow:active{ cursor:grabbing }
.kumoju-home .chips::-webkit-scrollbar,
.kumoju-home .feats::-webkit-scrollbar,
.kumoju-home .breeds::-webkit-scrollbar,
.kumoju-home .rvrow::-webkit-scrollbar{ display:none }

/* ---------- ⑥ アイテムから探す（原型 L239〜243 .chips） ---------- */
.kumoju-home .chips{ display:flex; gap:12px; overflow-x:auto; padding:2px 16px 6px }
.kumoju-home .chip{ flex:none; width:70px; text-align:center }
.kumoju-home .chip .ci{
  width:70px; height:70px; border-radius:18px; background-size:cover; background-position:center;
  background-color:#EAE0CF; box-shadow:var(--shadow-s); margin-bottom:6px;
}
.kumoju-home .chip .cn{ font-size:15px; color:var(--ink2); line-height:1.4 }

/* ---------- ⑦ 特集（原型 L246〜252 .feats） ---------- */
.kumoju-home .feats{ display:flex; gap:12px; overflow-x:auto; padding:2px 16px 6px }
.kumoju-home .feat{
  flex:none; width:270px; height:118px; border-radius:16px; overflow:hidden;
  position:relative; box-shadow:var(--shadow-s);
}
.kumoju-home .feat .bg{ position:absolute; inset:0; background-size:cover; background-position:center }
.kumoju-home .feat .ov{
  position:absolute; inset:0; padding:14px 16px; display:flex; flex-direction:column;
  justify-content:flex-end; background:linear-gradient(180deg,rgba(63,58,50,0),rgba(63,58,50,.5));
}
.kumoju-home .feat .fe{ font-family:var(--mono); font-size:13px; letter-spacing:.18em; color:#F0E4D2 }
.kumoju-home .feat .ft{ font-family:var(--serif); font-size:20.5px; color:#fff; margin-top:3px }

/* ---------- ⑧ 商品カード（原型 L255〜271 .grid / .pcard） ---------- */
.kumoju-home .grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px }
.kumoju-home .pcard{
  background:var(--paper); border-radius:15px; overflow:hidden;
  box-shadow:var(--shadow-s); display:block;
}
.kumoju-home .pcard .pi{
  aspect-ratio:1/1; background-size:cover; background-position:center;
  background-color:#EAE0CF; position:relative;
}
.kumoju-home .pcard .tag{
  position:absolute; left:8px; top:8px; background:rgba(63,58,50,.72); color:#fff;
  font-size:13.5px; letter-spacing:.02em; padding:3px 8px; border-radius:99px; backdrop-filter:blur(3px);
}
.kumoju-home .pcard .pinfo{ padding:10px 11px 12px }
.kumoju-home .pcard .pen{ display:flex; align-items:center; gap:5px; margin-bottom:5px }
.kumoju-home .pcard .pen i{ width:5px; height:5px; border-radius:50%; flex:none }
.kumoju-home .pcard .pen span{
  font-family:var(--mono); font-size:13px; letter-spacing:.08em; color:var(--faint);
}
.kumoju-home .pcard .pname{
  font-family:var(--serif); font-size:17.5px; font-weight:500; color:var(--ink);
  line-height:1.45; height:37px; overflow:hidden;
}
.kumoju-home .pcard .pprice{ margin-top:6px; font-size:18.5px; font-weight:700; color:var(--ink) }
.kumoju-home .pcard .pprice small{ font-size:14px; font-weight:400; color:var(--faint); margin-left:2px }

/* ---------- ⑨ みんなのうちの子 ---------- */
/* 種類タブ（原型 L290〜300 .sptabs）。作品例を絞るためだけのタブで、
   商品の棚は種類で割らない（inc/kumoju-breeds.php 冒頭の注記を参照）。 */
.kumoju-home .sptabs{ display:flex; gap:8px; padding:0 16px 10px }
.kumoju-home .sptab{
  flex:1; display:flex; align-items:center; justify-content:center; gap:5px;
  padding:9px 4px; border:1px solid var(--line); border-radius:11px;
  background:var(--paper); color:var(--ink2); font-size:15px; line-height:1;
  white-space:nowrap; font-family:inherit; cursor:pointer;
  /* ⚠️ Woodmart は button 全部に min-height:var(--btn-height)（42px）と
        font-weight:600 を掛けている。外さないとタブが 5px 高くなり、
        未選択のタブまで太字になって「どれが選択中か」が読めなくなる。 */
  min-height:0; font-weight:400; text-transform:none; letter-spacing:normal; box-shadow:none;
}
.kumoju-home .sptab i{ font-style:normal; font-size:17px }
.kumoju-home .sptab.on{ background:var(--terra-t); border-color:var(--terra); color:#7F5741; font-weight:700 }
.kumoju-home .sppane{ display:none }
.kumoju-home .sppane.on{ display:block }

/* 品種の丸タイル（原型 L280〜287 .breeds） */
.kumoju-home .breeds{ display:flex; gap:14px; overflow-x:auto; padding:2px 16px 6px }
.kumoju-home .breed{ flex:none; width:64px; text-align:center }
.kumoju-home .breed .bi{
  width:64px; height:64px; border-radius:50%; background-size:cover; background-position:center;
  background-color:#EAE0CF; box-shadow:var(--shadow-s); border:2px solid var(--paper);
}
.kumoju-home .breed .bi-em{
  display:flex; align-items:center; justify-content:center;
  background:var(--terra-t); font-size:26px;
}
.kumoju-home .breed.on .bi{ box-shadow:0 0 0 2.5px var(--terra) }
.kumoju-home .breed.on .bn{ color:#7F5741; font-weight:700 }
/* 名前は 1 行の子と 2 行の子が混ざる。2 行ぶん先に確保して下端をそろえる。 */
.kumoju-home .breed .bn{
  font-size:14.5px; color:var(--ink2); margin-top:6px; line-height:1.3; min-height:2.6em;
}
.kumoju-home .breed.is-off{ opacity:.55 }

/* 作品例のカード（原型 L341〜351 .rvrow / .rvc） */
.kumoju-home .rvrow{ display:flex; gap:12px; overflow-x:auto; padding:0 16px 6px }
.kumoju-home .rvc{
  flex:none; width:196px; background:var(--paper); border:1px solid var(--line);
  border-radius:15px; overflow:hidden;
}
.kumoju-home .rvc .rvi{
  aspect-ratio:1/1; background-size:cover; background-position:center; background-color:#EAE0CF;
}
.kumoju-home .rvc .rvb{ padding:10px 12px 12px }
.kumoju-home .rvc .stars{ color:#A8801F; font-size:15px; letter-spacing:1.5px; margin-bottom:5px }
.kumoju-home .rvc p{ font-size:15.5px; line-height:1.7; color:var(--ink2); height:56px; overflow:hidden }
.kumoju-home .rvc .who{ font-size:14.5px; color:var(--faint); margin-top:7px }
.kumoju-home .rv-all{
  display:flex; align-items:center; justify-content:center; gap:6px; margin:14px 16px 0;
  border:1px solid #D8CDB9; border-radius:99px; padding:12px; font-size:17px;
  font-weight:500; color:var(--ink); background:var(--cream2);
}
.kumoju-home .rv-all svg{ width:13px; height:13px; stroke:currentColor; stroke-width:1.8; fill:none }
.kumoju-home .empty{ text-align:center; padding:26px 20px; margin:0 16px }
.kumoju-home .empty .ed{ font-size:16.5px; color:var(--ink3); line-height:1.8 }
.kumoju-home .igbtn{
  display:flex; align-items:center; justify-content:center; gap:8px; margin:10px 16px 0;
  font-size:15.5px; color:var(--ink3);
}
.kumoju-home .igbtn svg{ width:14px; height:14px; stroke:var(--ink3); stroke-width:1.6; fill:none }

/* ---------- ⑩ 3 つのお約束（原型 L501〜507 .promises） ---------- */
.kumoju-home .promises{
  display:flex; justify-content:space-between; gap:10px; margin:24px 16px; padding:18px 14px;
  background:var(--cream2); border:1px solid var(--line); border-radius:16px;
}
.kumoju-home .promise{ flex:1; text-align:center }
.kumoju-home .promise .pi2{
  width:40px; height:40px; border-radius:50%; background:var(--terra-t);
  display:flex; align-items:center; justify-content:center; margin:0 auto 8px;
}
.kumoju-home .promise .pi2 svg{ width:19px; height:19px; stroke:var(--terra); stroke-width:1.7; fill:none }
.kumoju-home .promise b{ font-size:15.5px; display:block; color:var(--ink); line-height:1.5 }
.kumoju-home .promise span{
  font-size:14px; color:var(--ink3); display:block; margin-top:3px; line-height:1.5;
}

/* ---------- ⑪ ショップの想い（原型 L509〜513 .story） ---------- */
.kumoju-home .story{
  background:linear-gradient(135deg,#F3E9DE,#EFEAE0); border-radius:20px; padding:26px 22px;
  text-align:center; position:relative; overflow:hidden;
}
.kumoju-home .story .paw{ position:absolute; right:-4px; bottom:-14px; font-size:60px; opacity:.12 }
.kumoju-home .story .q{
  font-family:var(--serif); font-size:20.5px; color:var(--ink); line-height:1.9; font-weight:500;
}
.kumoju-home .story .stx{ font-size:16px; color:var(--ink2); margin-top:12px; line-height:1.9 }
.kumoju-home .story .slk{
  margin-top:14px; font-size:15.5px; color:var(--terra); border-bottom:1px solid var(--terra);
  display:inline-block; padding-bottom:2px;
}

/* ---------- ⑫ LINE 相談（原型 L516〜520 .linebar） ---------- */
.kumoju-home .linebar{
  display:flex; align-items:center; gap:12px; background:#EAF3E4; border-radius:16px;
  padding:13px 15px; margin:0 16px;
}
.kumoju-home .linebar .li{
  width:36px; height:36px; border-radius:10px; background:#5aba43; display:flex;
  align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:15.5px; flex:none;
}
.kumoju-home .linebar b{ font-size:16.5px; display:block }
.kumoju-home .linebar small{ font-size:14.5px; color:var(--ink3) }
.kumoju-home .linebar .go{ margin-left:auto; font-size:20.5px; color:var(--sage-d) }

/* ---------- ⑥b シーンから探す（2026-09-07 追加）----------
   «アイテムから探す»（形の格子）の直後に置くので、**別の形にする** ——
   同じ格子を 2 つ続けると «同じものが 2 回» に見える。
   こちらは 横長の帯（写真は左、字は右）。 */
.kumoju-home .scenes{ display:flex; flex-direction:column; gap:9px; margin:0 16px }
.kumoju-home .scene{
  display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit;
  background:var(--paper); border:1px solid var(--line); border-radius:14px;
  padding:9px; overflow:hidden;
}
.kumoju-home .scene .sci{
  flex:none; width:104px; height:70px; border-radius:9px;
  background:var(--cream2) center/cover no-repeat;
  /* ⚠️ バナーは左 45% を空けて焼いてある。ここは小さく切るので
     右の «物が写っている側» を見せる。 */
  background-position:76% 50%;
}
.kumoju-home .scene .sct{ min-width:0 }
.kumoju-home .scene .sct i{ display:block; font-style:normal; font-size:11px; color:var(--ink3); letter-spacing:.06em }
.kumoju-home .scene .sct b{ display:block; margin-top:2px; font-size:16px; font-weight:500; letter-spacing:.02em }
.kumoju-home .scene .sct small{ display:block; margin-top:3px; font-size:11.5px; color:var(--faint) }
@media (min-width:1025px){
  .kumoju-home .scenes{ flex-direction:row; flex-wrap:wrap; margin:0 }
  .kumoju-home .scene{ flex:1 1 calc(50% - 7px); padding:11px }
  .kumoju-home .scene .sci{ width:132px; height:86px }
  .kumoju-home .scene .sct b{ font-size:18px }
}

/* ---------- ⑫b ご利用ガイド（2026-09-07 追加）----------
   参照店はトップの末尾に 6 枚のカードで «買う前の不安» に答える入口を置いている
   （実測 1142px ＝ トップの 1 割強）。うちは そこが空だった。
   ⚠️ 2 列。1 列にすると 6 枚で 1 画面ぶん流れてしまい、
      «リンクがたくさんある» だけの帯になる。 */
.kumoju-home .gcards{
  display:grid; grid-template-columns:1fr 1fr; gap:9px; margin:0 16px;
}
.kumoju-home .gcard{
  display:flex; flex-direction:column; gap:1px;
  position:relative; padding:13px 26px 13px 14px;
  background:var(--paper); border:1px solid var(--line); border-radius:12px;
  text-decoration:none; color:inherit;
}
.kumoju-home .gcard b{ font-size:14.5px; font-weight:500; letter-spacing:.01em }
.kumoju-home .gcard small{ font-size:11.5px; line-height:1.5; color:var(--ink3) }
.kumoju-home .gcard .go{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  font-size:17px; color:var(--faint); line-height:1;
}
@media (min-width:1025px){
  .kumoju-home .gcards{ grid-template-columns:repeat(3,1fr); gap:14px; margin:0 }
  .kumoju-home .gcard{ padding:16px 30px 16px 18px }
  .kumoju-home .gcard b{ font-size:16px }
  .kumoju-home .gcard small{ font-size:12.5px }
}

/* ---------- ご利用ガイドの 3 ページ（inc/kumoju-guide.php）----------
   ⚠️ 地の枠は .k-legal（配送・特商法と同じ）を使い回している。
      ここで足すのは «見出し / Q&A / 箇条書き / 印» の 4 つだけ。 */
/* 説明ページの h1（テーマがタイトル帯を出さないので the_content の頭で足している） */
.k-page-h1{
  margin:6px 0 16px; font-family:var(--k-serif,'Shippori Mincho',serif);
  font-size:23px; font-weight:500; letter-spacing:.05em; line-height:1.5;
  color:var(--k-ink,#3F3A32); text-align:center;
}
@media (min-width:1025px){ .k-page-h1{ font-size:29px; margin:14px 0 22px } }

.k-guide-h{
  margin:26px 0 10px; font-family:var(--k-serif,'Shippori Mincho',serif);
  font-size:16.5px; font-weight:500; letter-spacing:.03em; color:var(--k-ink,#3F3A32);
  padding-bottom:8px; border-bottom:1px solid var(--k-line,#EAE1D0);
}
/* Q&A ―― JS を入れず details/summary。困った人が開くページなので待たせない */
.k-qa details{
  border-bottom:1px solid var(--k-line,#EAE1D0);
}
.k-qa summary{
  list-style:none; cursor:pointer; position:relative;
  padding:12px 30px 12px 0; font-size:14.5px; line-height:1.6;
  color:var(--k-ink,#3F3A32);
}
.k-qa summary::-webkit-details-marker{ display:none }
.k-qa summary::after{
  content:""; position:absolute; right:6px; top:19px;
  width:9px; height:9px; border-right:1.5px solid var(--k-ink3,#7B7261);
  border-bottom:1.5px solid var(--k-ink3,#7B7261); transform:rotate(45deg);
  transition:transform .18s ease;
}
.k-qa details[open] summary::after{ transform:rotate(-135deg); top:23px }
.k-qa details p{
  margin:0; padding:0 0 14px; font-size:13.5px; line-height:1.95;
  color:var(--k-ink2,#69624F);
}
/* «よく出る / 苦手» の 2 列組 */
.k-glist{ list-style:none; margin:0; padding:0 }
.k-glist li{
  display:grid; grid-template-columns:auto 1fr; gap:2px 10px;
  padding:9px 0 9px 20px; position:relative; border-bottom:1px solid var(--k-line,#EAE1D0);
}
.k-glist li:last-child{ border-bottom:0 }
.k-glist li b{ grid-column:1/-1; font-size:14px; font-weight:500; color:var(--k-ink,#3F3A32) }
.k-glist li span{ grid-column:1/-1; font-size:12.5px; line-height:1.8; color:var(--k-ink3,#7B7261) }
/* 印：良いほうは丸、苦手なほうは横棒。⚠️ ✗ は使わない ——
   «あなたの写真はダメです» と読めてしまう。あくまで «やわらかくなる» */
.k-glist li::before{
  content:""; position:absolute; left:2px; top:15px;
  width:9px; height:9px; border-radius:50%;
}
.k-glist-ok li::before{ background:var(--k-sage,#9DB09A) }
.k-glist-hard li::before{ background:none; border-top:1.5px solid var(--k-terra,#C79B87); height:0; top:19px; width:10px }
/* «気にしなくていいこと» は札で並べる */
.k-gchips{ list-style:none; margin:10px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px }
.k-gchips li{
  font-size:12.5px; line-height:1.6; padding:4px 10px; border-radius:999px;
  background:var(--k-cream2,#FBF7EF); color:var(--k-ink2,#69624F);
  border:1px solid var(--k-line,#EAE1D0);
}

/* ---------- ⑬ フッター（原型 L523〜528 footer） ----------
   Woodmart のフッターはウィジェットが空で高さ 0（実測）。
   トップの本文の中にこれを置いて、ページの終わりを受け止める。 */
.kumoju-home .kfoot{
  background:#EBE4D6; border-top:1px solid #E0D6C4; margin-top:28px; padding:24px 20px 26px;
}
.kumoju-home .kfoot .flogo{
  font-family:var(--serif); font-size:21.5px; font-weight:600; letter-spacing:.14em;
  text-align:center; color:var(--ink);
}
.kumoju-home .kfoot .fcn{
  text-align:center; font-family:var(--mono); font-size:13.5px; letter-spacing:.18em;
  color:var(--faint); margin-top:3px;
}
.kumoju-home .kfoot .flinks{
  display:flex; flex-wrap:wrap; gap:9px 14px; justify-content:center; margin-top:18px;
}
.kumoju-home .kfoot .flink{ font-size:15.5px; color:var(--ink2) }
.kumoju-home .kfoot .flegal{
  text-align:center; font-size:14.5px; color:var(--faint); margin-top:16px; line-height:1.9;
}

/* ============================================================
   読みやすさの調整（原型 L917〜990 の最後のブロック）
   ------------------------------------------------------------
   原型は末尾で「薄くて読めない」問題を直している。上のブロックだけを
   写すと、その修正が抜けて字が細く薄いままになる。ここで一緒に持ってくる。

   ① 文字色の階段（クリーム地に対するコントラスト比）
        ink   #3F3A32  9.93
        ink2  #69624F  5.34   ← 本文
        ink3  #7B7261  4.18   ← 注記
        faint #8C8371  3.30   ← 飾り（欧文・「税込」など）
   ② 本文は font-weight 500（Zen Maru Gothic の中太）
   ③ 明朝の見出しは 600（本文が上がった分、見出しも一段上げて差を保つ）
   ============================================================ */
.kumoju-home{
  --ink2:#69624F; --ink3:#7B7261; --faint:#8C8371;
  --sage-d:#556347; --blue-d:#566674;
  font-weight:500;
}
.kumoju-home .pcard .pname,
.kumoju-home .doors .lead .t,
.kumoju-home .rv-all,
.kumoju-home .slide .ov h1,
.kumoju-home .sec-h .jt,
.kumoju-home .door .jp,
.kumoju-home .feat .ft,
.kumoju-home .story .q{ font-weight:600 }

/* 受け身で読む文章と注記は、大きくする幅を控えめに戻す（原型 L963〜973）*/
.kumoju-home .step span{ font-size:14.5px }
.kumoju-home .flow .fd{ font-size:14px }
.kumoju-home .door .desc{ font-size:15px }
.kumoju-home .story .stx{ font-size:15px }
.kumoju-home .rvc p{ font-size:14.5px; height:74px }   /* 14.5 × 1.7 × 3行 */

/* 行数固定の見出しは、字が大きくなったぶん高さを取り直す（原型 L869）*/
.kumoju-home .pcard .pname{ height:52px }              /* 17.5px × 1.45 × 2行 */

/* 欧文の飾り文字は字間を詰めて 1 行に収める（原型 L892〜899）*/
.kumoju-home .sec-h .eyt{ letter-spacing:.13em }
.kumoju-home .slide .imtag{ letter-spacing:.1em }
.kumoju-home .door .en{ letter-spacing:.1em }
.kumoju-home .feat .fe{ letter-spacing:.12em }
.kumoju-home .pcard .pen span{ letter-spacing:.04em }

/* お約束 3 列は 3 列のまま。1 行に収まる最大サイズへ自動調整（原型 L879〜881）*/
.kumoju-home .promises{ padding:18px 10px; gap:8px }
.kumoju-home .promise b{ font-size:clamp(11.5px,3.3vw,15px); white-space:nowrap }
.kumoju-home .promise span{ font-size:clamp(10.5px,2.95vw,13px); white-space:nowrap }

/* 品種タイルは横スクロール列。枠を広げて名前の行数を増やさない（原型 L884）*/
.kumoju-home .breed{ width:80px }
.kumoju-home .breed .bi{ margin:0 auto }

/* 締切バナーは必ず 1 行に収める（原型 L987〜990）*/
.kumoju-home .ddl{
  flex-wrap:nowrap; padding:11px 10px; gap:8px; font-size:clamp(13px,4.1vw,17px);
}
.kumoju-home .ddl .dtx{
  flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:500;
}
.kumoju-home .ddl span{ font-size:.82em; padding:3px 9px; flex:none }

/* ============================================================
   デスクトップ（原型 kumoju-pc.html の組み方に寄せる）
   ------------------------------------------------------------
   ⚠️ ここはモバイルの上書きだけ。スマホの見え方は上のブロックが正で、
      幅の広い画面でだけ列を増やす。文言と区画の並びは
      kumoju-mobile-large.html を正としている（そちらが最新）。
   ============================================================ */
@media (min-width:1025px){
  .kumoju-home{ max-width:1200px; margin:0 auto; padding-bottom:48px }
  .kumoju-home section{ padding:0 24px }
  .kumoju-home .sec-h.pad{ padding:0 24px }

  /* ⚠️ ヒーローの縦横比は PC でも変えない。
        以前は 21/9 に切っていたが、文字入りの画像を使う方針にしたので
        切ると絵の中の文字が消える。横長で見せたければ、
        横長の画像を作って差し替えること。 */

  .kumoju-home .ddl,
  .kumoju-home .spbar,
  .kumoju-home .promises,
  .kumoju-home .linebar,
  .kumoju-home .rv-all,
  .kumoju-home .empty,
  .kumoju-home .igbtn{ margin-left:24px; margin-right:24px }

  /* 扉は左右 2 枚（原型 PC L88 .doors） */
  .kumoju-home .doors{
    display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start; padding-top:34px;
  }
  .kumoju-home .doors .lead{ grid-column:1 / -1 }
  .kumoju-home .doors .lead .t{ font-size:26px }
  .kumoju-home .door{ margin-bottom:0 }
  .kumoju-home .door .di{ height:230px }

  /* 制作の流れは 3 列（原型 PC L130 .flow）。
     3 つの step を横に並べ、見出しと注記は行いっぱいに渡す。 */
  .kumoju-home .flow{
    display:grid; grid-template-columns:repeat(3,1fr); gap:0 28px; padding:32px 28px;
  }
  .kumoju-home .flow .ft,
  .kumoju-home .flow .fd,
  .kumoju-home .flow .note{ grid-column:1 / -1 }
  .kumoju-home .flow .step{ margin-bottom:20px }

  /* アイテムは 6 列、特集は 3 列、商品は 4 列（原型 PC L106・L138） */
  .kumoju-home .chips{
    display:grid; grid-template-columns:repeat(6,1fr); gap:20px; padding:2px 24px 6px; overflow:visible;
  }
  .kumoju-home .chip{ width:auto }
  .kumoju-home .chip .ci{ width:100%; height:auto; aspect-ratio:1/1; border-radius:22px }
  .kumoju-home .feats{
    display:grid; grid-template-columns:repeat(3,1fr); gap:24px; padding:2px 24px 6px; overflow:visible;
  }
  .kumoju-home .feat{ width:auto; height:190px }
  .kumoju-home .grid{ grid-template-columns:repeat(4,1fr); gap:24px }
  .kumoju-home .pcard .pname{ font-size:19px; height:auto }

  .kumoju-home .breeds{ padding:2px 24px 6px }
  .kumoju-home .rvrow{ padding:0 24px 6px }
  .kumoju-home .rvc{ width:260px }
  .kumoju-home .sptabs{ padding:0 24px 12px; max-width:520px }
  .kumoju-home .promises{ padding:26px 24px }
  .kumoju-home .promise b{ font-size:17px }

  .kumoju-home .story{ padding:44px 40px }
  .kumoju-home .story .q{ font-size:26px }
  .kumoju-home .kfoot{ margin-top:44px; padding:36px 24px 40px }
}


/* ============================================================
   ⑮ 返品特約（inc/kumoju-legal.php）
   ------------------------------------------------------------
   出す場所は 2 か所。中身は同じ文面（kumoju_legal_return_terms()）。
     ・商品ページ ＝ 加購フォームの直後（特商法でいう「広告」）
     ・チェックアウト ＝「注文する」ボタンの直前（最終申込画面）
   どちらも「顧客が一見して認識できる」ことが法の要求なので、
   ⚠️ たたまない・薄墨にしない・小さくしすぎない。
      本文 13px は最低ライン。これ以下にすると要求を満たさなくなる。
   ============================================================ */
.k-return{
  margin:22px 0 0;
  padding:16px 18px 14px;
  background:var(--k-paper);
  border:1px solid var(--k-line);
  border-radius:14px;
}
.k-return-t{
  margin:0 0 8px;
  font-family:var(--k-serif,'Shippori Mincho',serif);
  font-size:15px;
  font-weight:600;
  color:var(--k-ink);
  letter-spacing:.02em;
  line-height:1.5;
}
.k-return-lead{
  margin:0 0 12px;
  font-family:var(--k-gothic,'Zen Maru Gothic',sans-serif);
  font-size:13px;
  font-weight:500;
  line-height:1.85;
  color:var(--k-ink2);
}
/* 「項目 → 中身」の 2 段組。狭い画面では素直に縦に積む。 */
.k-return-list{
  margin:0;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:8px 14px;
  font-family:var(--k-gothic,'Zen Maru Gothic',sans-serif);
}
.k-return-list dt{
  margin:0;
  font-size:12.5px;
  font-weight:700;
  line-height:1.7;
  color:var(--k-ink);
  white-space:nowrap;
}
.k-return-list dd{
  margin:0;
  font-size:13px;
  font-weight:500;
  line-height:1.75;
  color:var(--k-ink2);
}
@media (max-width:400px){
  /* 380px 前後だと「不良品・破損・当店のミス」が入りきらず
     dt が 2 行に折れて 中身とずれる。縦積みに切り替える。 */
  .k-return-list{ grid-template-columns:1fr; gap:2px }
  .k-return-list dt{ white-space:normal; margin-top:8px }
  .k-return-list dt:first-child{ margin-top:0 }
}

/* チェックアウトは「これから確定する」画面なので、
   商品ページより一段はっきり見せる（枠線を terra に、地を少し濃く）。 */
.k-return--checkout{
  margin:0 0 18px;
  background:var(--k-terra-t);
  border-color:var(--k-terra);
}
.k-return--checkout .k-return-t{ color:var(--k-ink) }


/* ============================================================
   ⑯ 法定表示ページ（inc/kumoju-legal.php のショートコード）
   ------------------------------------------------------------
   特商法表記 / プライバシーポリシー / 配送・送料 の 3 ページ共通。
   読み物ではなく「確認するもの」なので、装飾より
   ラベルと中身の対応が一目で追えることを優先している。
   ============================================================ */
.k-legal{
  max-width:760px;margin:0 auto;padding:4px 0 8px;
  font-family:var(--k-gothic,'Zen Maru Gothic',sans-serif);
  color:var(--k-ink,#3F3A32);
}
.k-legal-lead{
  margin:0 0 22px;font-size:14px;font-weight:500;line-height:1.95;color:var(--k-ink2,#69624F);
}
/* 未記入があるあいだ出る帯。目立たせないと意味がないので terra 地。 */
.k-legal-warn{
  margin:0 0 22px;padding:12px 16px;border-radius:12px;
  background:var(--k-terra-t,#F3E9DE);border:1px solid var(--k-terra,#C79B87);
  font-size:13.5px;font-weight:500;line-height:1.85;color:var(--k-ink,#3F3A32);
}
.k-legal-tbd{
  display:inline-block;padding:1px 8px;border-radius:6px;
  background:var(--k-terra-t,#F3E9DE);border:1px dashed var(--k-terra,#C79B87);
  font-size:12.5px;color:#9C5F4E;
}

/* ラベル｜中身 の 2 段組。狭い画面では縦に積む。 */
.k-legal-dl{
  margin:0;display:grid;grid-template-columns:190px 1fr;
  border-top:1px solid var(--k-line,#EAE1D0);
}
.k-legal-dl dt,
.k-legal-dl dd{
  margin:0;padding:14px 16px;border-bottom:1px solid var(--k-line,#EAE1D0);
  font-size:13.5px;line-height:1.9;
}
.k-legal-dl dt{
  font-weight:700;color:var(--k-ink,#3F3A32);background:var(--k-paper,#FEFCF7);
}
.k-legal-dl dd{ color:var(--k-ink2,#69624F);font-weight:500 }
.k-legal-dl dd b{ color:var(--k-ink,#3F3A32) }
.k-legal-note{ font-size:12.5px;color:var(--k-ink3,#7B7261);line-height:1.8 }

@media (max-width:640px){
  .k-legal-dl{ grid-template-columns:1fr;border-top:none }
  .k-legal-dl dt{
    padding:12px 14px 4px;border-bottom:none;border-top:1px solid var(--k-line,#EAE1D0);
  }
  .k-legal-dl dd{ padding:0 14px 14px }
}

/* お届けまでの流れ（配送ページ）：番号つきの 4 段 */
.k-flow{ margin:0 0 26px;padding:0;list-style:none;counter-reset:kflow }
.k-flow li{
  position:relative;margin:0 0 14px;padding:0 0 0 46px;counter-increment:kflow;
}
.k-flow li::before{
  content:counter(kflow);
  position:absolute;left:0;top:1px;width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--k-terra-t,#F3E9DE);border:1px solid var(--k-terra,#C79B87);
  font-family:var(--k-mono,'DM Mono',monospace);font-size:13px;color:#9C5F4E;
}
.k-flow li b{
  display:block;font-size:14.5px;font-weight:700;line-height:1.7;color:var(--k-ink,#3F3A32);
}
.k-flow li span{
  display:block;margin-top:2px;font-size:13px;font-weight:500;line-height:1.9;
  color:var(--k-ink2,#69624F);
}

/* ------------------------------------------------------------
   商品ページ：価格の下の「送料・お届け」一行
   ⚠️ 日本のお客さんは総額で判断するので、
      ここが無いと価格の次に来る疑問が解けないまま離脱する。
------------------------------------------------------------ */
.single-product .k-ship-line{
  margin:6px 0 2px;
  font-family:var(--k-gothic,'Zen Maru Gothic',sans-serif);
  font-size:12.5px;font-weight:500;line-height:1.8;color:var(--k-ink2,#69624F);
}
.single-product .k-ship-free{
  font-weight:700;color:var(--k-sage-d,#556347);
}
.single-product .k-ship-sep{ margin:0 6px;color:var(--k-line,#EAE1D0) }
@media (max-width:400px){
  .single-product .k-ship-sep{ display:none }
  .single-product .k-ship-free,
  .single-product .k-ship-lead{ display:block }
}


/* ============================================================
   ⑰ 全ページ共通フッター（inc/kumoju-legal.php）
   ------------------------------------------------------------
   Woodmart のフッターはテーマ設定で切ってあり <footer> が空なので、
   woodmart_before_wp_footer フックに自前のものを差している。
   ⚠️ トップには .kfoot（inc/kumoju-home.php）があるので出していない。
   ⚠️ 商品ページには吸底の加購バー（.wd-sticky-btn / .k-buybar）が
      重なるので、下に余白を積んでリンクが隠れないようにする。
   ============================================================ */
.k-sfoot{
  margin-top:48px;
  padding:38px 20px 32px;
  background:var(--k-cream,#F5F0E6);
  border-top:1px solid var(--k-line,#EAE1D0);
  text-align:center;
}
.k-sfoot-in{ max-width:760px;margin:0 auto }
.k-sfoot-logo{
  font-family:var(--k-serif,'Shippori Mincho',serif);
  font-size:22px;font-weight:600;letter-spacing:.16em;
  color:var(--k-ink,#3F3A32);
}
.k-sfoot-cn{
  margin-top:6px;
  font-family:var(--k-mono,'DM Mono',monospace);
  font-size:10.5px;letter-spacing:.18em;color:var(--k-faint,#8C8371);
}
.k-sfoot-legal{
  margin-top:22px;
  font-family:var(--k-gothic,'Zen Maru Gothic',sans-serif);
  font-size:12.5px;font-weight:500;line-height:2.2;color:var(--k-ink2,#69624F);
}
.k-sfoot-legal a{
  color:var(--k-ink2,#69624F);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-color:var(--k-line,#EAE1D0);
}
.k-sfoot-legal a:hover{ color:var(--k-terra,#C79B87);text-decoration-color:var(--k-terra,#C79B87) }
/* ページが未作成のときはリンクにせず、押せないことを見た目で示す */
.k-sfoot-legal .is-off,
.kumoju-home .flegal .is-off{ opacity:.45;text-decoration:none;cursor:default }
.k-sfoot-c{
  margin-top:18px;
  font-family:var(--k-mono,'DM Mono',monospace);
  font-size:11px;color:var(--k-faint,#8C8371);
}
/* 吸底バーのぶんの逃げ。商品ページだけ厚くする。 */
.single-product .k-sfoot{ padding-bottom:96px }

/* トップの .kfoot の法定リンクも同じ見た目にそろえる */
.kumoju-home .flegal a{
  color:inherit;
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-color:rgba(255,255,255,.28);
}
.kumoju-home .flegal a:hover{ text-decoration-color:currentColor }


/* ============================================================
   ⑱ 「確認稿」ブロック（inc/kumoju-legal.php の kumoju_legal_proof_box）
   ------------------------------------------------------------
   置き場所は 加購フォームの直後・返品特約の上。
   「送るもの → 返るもの」を 2 枚並べて、矢印で結ぶ。
   ⚠️ 390px でも 2 枚を横に並べたままにする（縦に積むと
      「AからBへ」という対応関係が読めなくなり、この板の意味が消える）。
      そのぶん矢印を細く、字を小さくして幅を稼いでいる。
   ============================================================ */
.k-proof{
  margin:22px 0 0;
  padding:18px 18px 16px;
  background:var(--k-cream2,#FBF7EF);
  border:1px solid var(--k-line,#EAE1D0);
  border-radius:14px;
}
.k-proof-t{
  margin:0 0 8px;
  font-family:var(--k-serif,'Shippori Mincho',serif);
  font-size:16px;font-weight:600;line-height:1.6;letter-spacing:.02em;
  color:var(--k-ink,#3F3A32);
}
.k-proof-lead{
  margin:0 0 16px;
  font-family:var(--k-gothic,'Zen Maru Gothic',sans-serif);
  font-size:13px;font-weight:500;line-height:1.95;color:var(--k-ink2,#69624F);
}
.k-proof-lead b{ color:var(--k-ink,#3F3A32);font-weight:700 }

/* 2 枚 ＋ あいだの矢印。矢印は伸縮しない固定幅。 */
.k-proof-pair{
  display:flex;align-items:flex-start;gap:8px;
}
.k-proof-fig{
  flex:1 1 0;min-width:0;margin:0;
}
.k-proof-fig img{
  display:block;width:100%;height:auto;
  aspect-ratio:1/1;object-fit:cover;
  border-radius:10px;
  background:var(--k-paper,#FEFCF7);
}
.k-proof-fig figcaption{
  margin-top:7px;
  font-family:var(--k-gothic,'Zen Maru Gothic',sans-serif);
  text-align:center;
}
.k-proof-fig figcaption b{
  display:block;font-size:12px;font-weight:700;line-height:1.5;
  color:var(--k-ink,#3F3A32);
}
.k-proof-fig figcaption span{
  display:block;margin-top:2px;font-size:10.5px;font-weight:500;line-height:1.55;
  color:var(--k-ink3,#7B7261);
}
.k-proof-arrow{
  flex:0 0 20px;
  display:flex;align-items:center;justify-content:center;
  /* 画像の縦中央にそろえる（figcaption のぶんは数えない） */
  align-self:stretch;max-height:0;padding-top:34%;
  color:var(--k-terra,#C79B87);
}
.k-proof-arrow svg{
  width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
}

/* 3 枚組（送るお写真 → 背景そのまま／背景を消す）。2026-08-09。
   390px の内寸は約 348px。矢印 20 ＋「／」14 ＋ すきま 4×6 を引くと
   1 枚あたり およそ 96px しか残らないので、字を一段落とす。
   ⚠️ 縦に積まないのは 2 枚組と同じ理由 ―― 並べないと対応が読めない。 */
.k-proof-pair--3{ gap:6px }
.k-proof-pair--3 .k-proof-fig figcaption b{ font-size:11px;letter-spacing:-.01em }
.k-proof-pair--3 .k-proof-fig figcaption span{ font-size:9.5px;line-height:1.5 }
.k-proof-pair--3 .k-proof-arrow{ flex-basis:16px }
.k-proof-pair--3 .k-proof-arrow svg{ width:16px;height:16px }

/* 「どちらか」を表す区切り。矢印と同じ高さにそろえる。 */
.k-proof-or{
  flex:0 0 12px;
  display:flex;align-items:center;justify-content:center;
  align-self:stretch;max-height:0;padding-top:34%;
  font-family:var(--k-gothic,'Zen Maru Gothic',sans-serif);
  font-size:13px;font-weight:500;
  color:var(--k-terra,#C79B87);
}

.k-proof-note{
  margin:14px 0 0;
  font-family:var(--k-gothic,'Zen Maru Gothic',sans-serif);
  font-size:12px;font-weight:500;line-height:1.9;color:var(--k-ink3,#7B7261);
}
.k-proof-more{
  display:inline-block;margin-left:2px;
  color:var(--k-terra,#C79B87);font-weight:700;
  text-decoration:underline;text-underline-offset:3px;
}
@media (max-width:360px){
  /* iPhone SE 幅。ここまで来たら矢印を潰して画像に幅を回す。 */
  .k-proof{ padding:16px 14px 14px }
  .k-proof-pair{ gap:5px }
  .k-proof-arrow{ flex-basis:14px }
  .k-proof-arrow svg{ width:14px;height:14px }
  .k-proof-pair--3{ gap:4px }
  .k-proof-pair--3 .k-proof-arrow{ flex-basis:13px }
  .k-proof-pair--3 .k-proof-arrow svg{ width:13px;height:13px }
  .k-proof-pair--3 .k-proof-or{ flex-basis:10px;font-size:12px }
}

/* ============================================================
   本文写真が 1 枚だけの節は、正方形に切らず元の比率で見せる（2026-08-11）
   ------------------------------------------------------------
   .k-dimg img は既定で aspect-ratio:1 / object-fit:cover。
   横に 2〜3 枚並ぶときは正方形に揃っているほうが気持ちがいいので
   それは残す。ただし 1 枚だけの節（[data-n="1"]）は 1 列いっぱいに出るので、
   正方形に切ると縦写真の上下が落ちる —— walnut-frame の和室の場面写真は
   3:4 の縦で撮っており、切ると布団も障子も画面から消えてしまう。
   1 枚のときだけ元の縦横比のまま出す。
   ============================================================ */
.single-product .woocommerce-Tabs-panel--description .k-dimgs[data-n="1"] .k-dimg img{
  /* ⚠️ aspect-ratio は書かない。上の :not([data-n="1"]) のコメント参照。 */
  height:auto;
}

/* 本文写真 6 枚は 2列3段（2026-08-11・用户指定）
   ------------------------------------------------------------
   上の [data-n="3"|"5"|"6"|"9"] はまとめて 3 列にしていたが、
   6 枚を 3 列にすると 390px 幅で 1 枚 107px まで縮んで、
   彫りの深さや木口のような «近くで見せたい» 写真が読めなくなる。
   6 枚のときだけ 2 列に戻す（1 枚 165px）。3・5・9 枚は 3 列のまま。 */
.single-product .woocommerce-Tabs-panel--description .k-dimgs[data-n="6"]{
  grid-template-columns:repeat(2,1fr);
}


/* ============================================================
   ============================================================
   KUMOJU 商品一覧（ショップ ＝ /items/ ／ 商品カテゴリー）
   原型：kumoju-mobile-large.html の pageItems()（L1968〜1991）
   PC ：kumoju-pc.html の pageItems()（L634〜640）
   HTML：inc/kumoju-shop.php
   ------------------------------------------------------------
   作用域は body.kumoju-shop の中だけ（＝ 他のページは無傷）。
   カードの中身は Woodmart のループのままで、見た目だけ原型の
   .pcard（原型 L255〜271）に寄せてある。
   ============================================================
   ============================================================ */

/* ---------- 設計トークン（原型 L11〜24 の :root と同じ値） ----------
   ⚠️ 名前は --k- 付き。Woodmart も素の名前の custom property を持つので
      ぶつからないようにする（商品ページ側と同じ作法）。 */
body.kumoju-shop{
  --k-cream:#F5F0E6; --k-cream2:#FBF7EF; --k-paper:#FEFCF7;
  --k-ink:#3F3A32; --k-ink2:#6B6458; --k-ink3:#8A8377; --k-faint:#A69C8B;
  --k-line:#EAE1D0; --k-terra:#C79B87; --k-terra-t:#F3E9DE; --k-terra-d:#7F5741;
  --k-serif:'Shippori Mincho',serif;
  --k-gothic:'Zen Maru Gothic',sans-serif;
  --k-mono:'DM Mono',monospace;
  --k-shadow-s:0 5px 16px rgba(120,105,80,.09);
}

/* ---------- ① ページの地色（原型はクリーム地に生成りのカード） ---------- */
body.kumoju-shop,
body.kumoju-shop .main-page-wrapper,
body.kumoju-shop .site-content,
body.kumoju-shop #main-page-wrapper{
  background-color:var(--k-cream);
}

/* ---------- ② Woodmart の既定ツール帯を消す ----------
   パンくず・件数・Show sidebar・表示件数・並び替えプルダウンが入っていた帯。
   中身が英語のまま出ており（Show sidebar / Quick view / Compare）、
   原型にはこの帯が無い。中身は inc/kumoju-shop.php で作り直している。
   ⚠️ PHP 側でも remove_action しているので、ここは念のための二重の蓋。 */
body.kumoju-shop .shop-loop-head{ display:none !important }
/* 旧トップから引き継いだページ見出しも出さない（見出しは自前で出す） */
body.kumoju-shop .page-title,
body.kumoju-shop .wd-page-title{ display:none !important }

/* ---------- ②b 左の脇柱（サイドバー）を出さない ----------
   中身は旧・犬用品店のままのウィジェット（LATEST / BEST SELLING /
   YOU MAY ALSO LIKE / TOP RATED）で、価格が赤字の一覧が 4 本並んでいた。
   原型は モバイルも PC も 一覧に脇柱を持たない（品数が 7 点なので
   絞り込みの棚もまだ要らない）。
   ⚠️ ウィジェットそのものは消していない。テーマ設定で脇柱を戻せば
      またここに出る。そのときはこの 2 行を外すこと。 */
body.kumoju-shop .sidebar-container{ display:none !important }
body.kumoju-shop .shop-content-area{
  flex:0 0 100% !important; max-width:100% !important;
}

/* ---------- ③ アイテムのチップ列（原型 L239〜243 .chips） ---------- */
body.kumoju-shop .kumoju-shop-head{
  font-family:var(--k-gothic);
  color:var(--k-ink);
  /* Woodmart の .site-content は左右 15px 持っている。原型は 16px なので
     チップだけ 1px ぶん外へ出して、写真が画面の端まで流れるようにする。 */
  margin:0 -15px;
}
body.kumoju-shop .k-chips{
  display:flex; gap:12px; overflow-x:auto;
  padding:16px 16px 6px;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
body.kumoju-shop .k-chips::-webkit-scrollbar{ display:none }
body.kumoju-shop .k-chip{
  flex:none; width:70px; text-align:center; color:inherit; text-decoration:none;
}
body.kumoju-shop .k-chip .ci{
  display:block; width:70px; height:70px; border-radius:18px;
  background-size:cover; background-position:center; background-color:#EAE0CF;
  box-shadow:var(--k-shadow-s); margin-bottom:6px;
}
/* ⚠️ 2 行で打ち切る。短い名前は inc/kumoju-shop.php の kumoju_shop_cat_short()
      で用意しているが、新しいカテゴリーが増えたときの保険にもなる。 */
body.kumoju-shop .k-chip .cn{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  overflow:hidden; font-size:15px; color:var(--k-ink2); line-height:1.4;
}
/* いま見ている棚（原型は輪郭 2.5px の テラコッタ） */
body.kumoju-shop .k-chip.is-on .ci{
  box-shadow:0 0 0 2.5px var(--k-terra), var(--k-shadow-s);
}
body.kumoju-shop .k-chip.is-on .cn{ color:var(--k-terra-d); font-weight:700 }
/* 「すべて」だけは写真が無いので、生成りの板に 4 つの角丸を置く */
body.kumoju-shop .k-chip-all .ci{
  background:var(--k-cream2); border:1px solid var(--k-line);
  display:flex; align-items:center; justify-content:center;
}
body.kumoju-shop .k-chip-all .ci svg{
  width:26px; height:26px; fill:var(--k-terra); opacity:.75;
}

/* ---------- ④ 見出し（原型 L1976〜1979） ---------- */
body.kumoju-shop .k-shop-title{ padding:8px 15px 0 }
body.kumoju-shop .k-shop-title h1{
  font-family:var(--k-serif); font-size:24px; font-weight:500;
  letter-spacing:.03em; color:var(--k-ink); line-height:1.4;
  margin:0; text-transform:none;
}
body.kumoju-shop .k-shop-title p{
  font-size:15.5px; color:var(--k-ink3); margin:5px 0 0; line-height:1.7;
}

/* ---------- ⑤ 選び方（段 2）と 組の見出し（段 3）----------
   2026-09-07。ここには «N件の作品 ＋ 並び替え» の帯が在ったが、
   参照店 original-pet に合わせて まるごと外した（理由は inc/kumoju-shop.php のコメント）。
   代わりに入るのが この 2 つ：
     .k-guide … 「どれを選んでも間違いではありません」＋ 選ぶ軸（inc/kumoju-shelf.php）
     .k-sec   … 商品グリッドの中に差し込む 組の見出し（js/kumoju-shop.js）

   ⚠️ .k-sec は .products（display:grid）の直接の子。grid-column:1/-1 で
      1 行を丸ごと使う。これが無いと 見出しが 1 カラム目に収まり、
      商品カードが横に並んでしまう。 */
/* ⚠️ 2026-09-09：上に «白い紙の面» を作ったので、地色 #F5F0E6 の上に #FBF7EF を
   置いただけの この箱は いよいよ «カードに見えない» ようになった。
   参照店の «選ばれる理由» も **細い罫の角丸の箱**（実測）なので、同じにする ——
   4 つ目の地色を増やさずに «囲い» を出せる。 */
body.kumoju-shop .k-guide{
  margin:22px 0 4px; padding:16px 13px 14px;
  background:var(--k-cream2); border-radius:14px;
  border:1px solid var(--k-line);
}
body.kumoju-shop .k-guide h2{
  font-family:var(--k-serif); font-size:18px; font-weight:500; letter-spacing:.02em;
  color:var(--k-ink); margin:0 0 8px; line-height:1.5;
}
body.kumoju-shop .k-guide p{
  font-size:14.5px; line-height:1.85; color:var(--k-ink3); margin:0 0 8px;
}
body.kumoju-shop .k-axes{ list-style:none; margin:12px 0 4px; padding:0 }
body.kumoju-shop .k-axes li{
  padding:9px 0; border-top:1px solid var(--k-line);
  font-size:14.5px; line-height:1.6;
}
body.kumoju-shop .k-axes li:last-child{ border-bottom:1px solid var(--k-line) }
/* ⚠️ スマホでは «条件» と «答え» を 2 行に積む。1 行に押し込むと
      «手元にない（土に還した・納骨した）» の側が 1 文字ずつ折れて縦書きになる
      （2026-09-07、390px の実機で確認）。横に並べるのは PC だけ。 */
body.kumoju-shop .k-axes .ax-if{ display:block; color:var(--k-ink3) }
body.kumoju-shop .k-axes .ax-then{
  display:block; margin-top:3px; padding-left:17px; position:relative;
  color:var(--k-terra-d); font-weight:500;
}
body.kumoju-shop .k-axes .ax-then::before{
  content:""; position:absolute; left:0; top:.72em;
  width:10px; height:1px; background:var(--k-terra);
}
body.kumoju-shop .k-guide-note{
  margin:12px 0 0; padding-top:11px; border-top:1px solid var(--k-line);
  font-size:13.5px; color:var(--k-faint); line-height:1.8;
}

/* ── 主視覚（参照店の ①）─────────────────────────────
   ⚠️ いまは 代表商品の主図を 16:9 に切って使っている。上下が落ちるので
      «商品が真ん中に写っている品» を hero に指定すること。
      本来は横長の描き下ろし（向こうは 1650×835）。要る画像の一覧は
      docs/catalog-structure-2026-09-07.md §8。 */
/* 参照店の版面：左 45% が文字・右が写真・境目は写真が紙色へ溶けるグラデーション。
   ⚠️ 文字は画像に焼かず ここで重ねる。焼くと 直すたびに焼き直しになり、
      選べない・SEO に乗らない（掲載画像に一字も焼かない ＝ CLAUDE.md）。
   ⚠️ グラデーションは «紙色 → 透明»。白にすると 背景の生成り色から浮く。 */
body.kumoju-shop .k-shelf-hero{ position:relative; margin:0 -16px 2px; overflow:hidden }
body.kumoju-shop .k-hero-img{ overflow:hidden }
body.kumoju-shop .k-hero-img img{
  display:block; width:100%; aspect-ratio:2/1; object-fit:cover; object-position:70% 46%;
}
/* 借り物（商品の主図）のときは 2:1 に切ると商品が消えるので 16:9 で我慢する */
body.kumoju-shop .k-shelf-hero.is-borrowed .k-hero-img img{ aspect-ratio:16/9; object-position:center 46% }
body.kumoju-shop .k-shelf-hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(100deg,
    var(--k-paper) 12%, rgba(250,247,241,.86) 38%, rgba(250,247,241,0) 62%);
}
body.kumoju-shop .k-hero-copy{
  position:absolute; left:16px; top:50%; transform:translateY(-50%);
  z-index:2; max-width:52%;
}
body.kumoju-shop .k-hero-copy .hc-sub{
  margin:0 0 4px; font-size:12px; letter-spacing:.1em; color:var(--k-ink3);
}
body.kumoju-shop .k-hero-copy .hc-main{
  margin:0; font-family:var(--k-serif); font-size:22px; font-weight:500;
  letter-spacing:.04em; line-height:1.4; color:var(--k-ink);
  /* ⚠️ 390px では 1 行 9 字ほどしか入らないので、10 字の見出し
     （「置く場所を、つくる」など）が «つく／る» と 1 字だけ落ちる（2026-09-07 実測）。
     balance は行を均す＝ 5＋5 に割る。⚠️ 幅を広げて直さないこと ——
     文字が乗っているのは .k-shelf-hero::after のグラデーションで、
     62% で透明になる。そこまで伸ばすと写真の上に字が乗って読めなくなる。 */
  text-wrap:balance;
}
@media (min-width:1025px){
  body.kumoju-shop .k-hero-copy{ left:40px; max-width:44% }
  body.kumoju-shop .k-hero-copy .hc-sub{ font-size:14px }
  body.kumoju-shop .k-hero-copy .hc-main{ font-size:38px }
}
/* ⚠️ セレクタは «.k-shop-title .k-eyebrow»。«.k-eyebrow» だけだと
      下の «.k-shop-title p{text-align:left}» に詳細度で負けて 左寄せになる（2026-09-07 実測）。 */
body.kumoju-shop .k-shop-title .k-eyebrow{
  margin:0 0 4px; text-align:center;
  font-size:13.5px; letter-spacing:.08em; color:var(--k-ink3);
}
/* 見出しは中央揃えにする（参照店の ②）*/
body.kumoju-shop .k-shop-title{ text-align:center }

/* ⚠️⚠️ 2026-09-09 の作り直し。«時計» の 2 文字が 裸で置かれていて、
   支えが罫も英字も無かった。**新しい飾りは作らない** ——
   サイトに既にある «英字 ＋ 和文 ＋ 短い罫»（.k-band / .k-sec）を持ってくる。 */
body.kumoju-shop .k-shop-title .k-ten{
  margin:0 0 5px; text-align:center;
  font-family:var(--k-mono); font-size:10.5px; font-weight:500;
  letter-spacing:.22em; text-indent:.22em;      /* 字送りの分だけ 中心がずれるので戻す */
  color:var(--k-faint); text-transform:uppercase;
}
body.kumoju-shop .k-shop-title h1{ font-size:26px }
body.kumoju-shop .k-shop-title .k-trule{
  display:block; width:26px; height:1px; margin:11px auto 0;
  background:var(--k-terra);
}
/* 前置きは 本文ではなく «リード» として扱う：中央・行を短く・少し明るい字。
   ⚠️ 1 行を短くするのが効く（390px で 端から端まで走ると 本文と見分けが付かない）。 */
/* ⚠️ 本文は **左揃え**。中央にするのは 見出しだけ（参照店 実測もそう）。
   390px で 和文を中央に置くと «時／間» のように語の途中で折れ、行末も乱れる
   —— 一度 中央にして やり直した。 */
body.kumoju-shop .k-shop-title p{
  text-align:left; margin-top:14px;
  font-size:14.5px; line-height:1.9; color:var(--k-ink3);
}

/* ── 手順（参照店の ④）─────────────────────────── */
/* ⚠️⚠️ 2026-09-09 用户「这部分的设计真的很丑」。実測すると この 2 行の手順が
   **144px** を占め、画面でいちばん重い要素になっていた —— いちばん軽い内容なのに。
   参照店（c-fpage?fp=sofacushion）を測ると、向こうの ①②③ は
   **本文と同じ 14px の ただの行**で、丸も色地も無い（＝ 装飾ゼロ）。
   → 塗りつぶしの丸をやめ、数字を小さな terra の文字にして 行間も詰める。
   ⚠️ 19 棚すべてに効く。 */
/* ⚠️ 2026-09-09 二度目。数字を小さくしただけでは «ただの箇条書き» のままだった。
   下の «選び方»（.k-axes）が 細い罫で 1 行ずつ区切る作りなので、**同じ語彙**にして
   ページ全体で «行に罫» という約束を 1 本にする。新しい飾りは足さない。 */
body.kumoju-shop .k-steps{ margin:16px 0 0 }
body.kumoju-shop .k-steps ol{ list-style:none; margin:0; padding:0; border-top:1px solid var(--k-line) }
body.kumoju-shop .k-steps li{
  display:flex; align-items:baseline; gap:9px; padding:9px 2px;
  border-bottom:1px solid var(--k-line);
  font-size:14px; color:var(--k-ink); line-height:1.7;
}
body.kumoju-shop .k-steps .sn{
  flex:none; width:auto; height:auto; border-radius:0;
  background:none; color:var(--k-terra);
  font-family:var(--k-mono); font-size:11.5px; line-height:inherit; text-align:left;
  letter-spacing:.02em;
}
body.kumoju-shop .k-steps .sn::after{ content:"." }
body.kumoju-shop .k-steps li:last-child{ border-bottom:0 }
/* ⚠️ 罫を最後まで引くと、続く一文が «3 行目» に見える（実際そう見えた）。
   最後の罫を落として、間を空ける。 */
body.kumoju-shop .k-steps > p{
  margin:11px 0 0; font-size:13.5px; line-height:1.85; color:var(--k-ink3);
}

/* ── 組への目次（参照店の ⑥。うちが落としていた装置）─────────
   ⚠️ 帯の地色を敷いて «ここは目次» と分からせる。カードは 3 列。
      価格（最低価格〜）を出すのが要点 —— 押す前に «高い棚か» が分かる。 */
/* ⚠️ 2026-09-07 夜、参照店の実測に合わせて作り直した（用户「抄又抄的不像」）。
      向こうは **地色のついた帯**（rgb(230,213,184)）の中に 白いカードを置いている ——
      これで «ここは目次であって商品ではない» が一目で分かる。うちは白っぽい地に
      白っぽいカードを置いていたので、帯として読めていなかった。
   ⚠️ 見出しの構えも 向こうどおり：小さい和文（12px/700）→ 大きい英字（18px/700）→
      英字の下に短い横線。色は 2 つとも同じ（向こう rgb(72,64,24)）。 */
body.kumoju-shop .k-shelf-nav{
  margin:24px 0 0; padding:16px 12px 18px; border-radius:12px;
  background:var(--k-band);
}
body.kumoju-shop .k-nav-head{ text-align:center; margin-bottom:14px }
body.kumoju-shop .k-nav-head h2{
  font-size:12.5px; font-weight:600; letter-spacing:.06em;
  color:var(--k-bandink); margin:0;
}
body.kumoju-shop .k-nav-en{
  display:inline-block; margin:2px 0 0; padding-bottom:5px;
  border-bottom:1.5px solid rgba(107,96,71,.35);
  font-family:var(--k-mono); font-size:17px; font-weight:600; letter-spacing:.1em;
  color:var(--k-bandink); text-transform:uppercase;
}
body.kumoju-shop .k-nav-list{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
}
/* ⚠️ 4 つの組を 3 列に置くと «3 ＋ 1» になって 最後の 1 枚が浮く（2026-09-07 実測）。
      4 つ・2 つのときは 2 列に。5 つ以上は 3 列のまま（3+2 は許す）。 */
body.kumoju-shop .k-nav-list[data-n="4"],
body.kumoju-shop .k-nav-list[data-n="2"]{ grid-template-columns:repeat(2,1fr) }
/* ⚠️ 2026-09-29：組の名が 2 行になると カードの高さが変わり、
      **値段の行が横で揃わなくなる**（実測 234px 対 256px。«パーカーとスウェット» が
      10 字で折り返した）。grid の行の高さは揃うのに 中身が上詰めなので ずれる。
      → カードを縦の flex にして 値段を `margin-top:auto` で下端に貼る。
      これで 名が 1 行でも 2 行でも 値段の行は必ず横で揃う。
      ⚠️ 組名を短くして回避しない —— 名前は «客が読んで分かるか» で決める。
      ⚠️⚠️ **grid の升 は `li` であって `a` ではない。**`li` は grid の stretch で
      高さが揃うのに、その中の `a` は中身なりの高さのままなので、
      `a` に `margin-top:auto` を書いても **余白が無く 0 に解決されて効かない**
      （実測：li 258 / a 236 で 値段が 23px ずれた）。
      だから `li` も flex にして `a` に升を埋めさせる。この 1 行が要。 */
body.kumoju-shop .k-nav-list li{ display:flex }
body.kumoju-shop .k-nav-list a{
  display:flex; flex-direction:column; flex:1 1 auto; text-decoration:none; color:inherit;
  background:var(--k-paper); border-radius:10px; overflow:hidden; padding-bottom:9px;
}
body.kumoju-shop .k-nav-list .ni{
  display:block; aspect-ratio:1; background:var(--k-cream2) center/cover no-repeat;
}
body.kumoju-shop .k-nav-list .nn{
  display:block; margin:8px 8px 0; font-size:13px; line-height:1.45; color:var(--k-ink);
}
body.kumoju-shop .k-nav-list .np{
  display:block; margin:3px 8px 0; font-size:12px; color:var(--k-ink3);
  margin-top:auto; padding-top:3px;   /* ↑ の flex で 値段を下端にそろえる */
}
body.kumoju-shop .k-nav-list .np .amount{ font-size:12px }
body.kumoju-shop .k-nav-list .np bdi{ white-space:nowrap }

/* ── 選ばれる理由（参照店の ⑦）───────────────────── */
/* ⚠️ 2026-09-07 夜に 参照店の実測へ寄せた。向こうは
      «外側にもう 1 本 細い枠（＝二重）＋ 見出しの左右に短い横線 ＋ 見出しは淡い色»。
      うちは 1 本の枠に濃い見出しで、ただの箱に見えていた。
      見出しの色 rgb(186,172,147) は かなり淡い —— 中身の 5 条より弱くするのが要点。 */
body.kumoju-shop .k-reasons{
  margin:26px 0 0; padding:20px 13px 15px;
  border:1px solid var(--k-line); border-radius:14px; background:var(--k-paper);
  box-shadow:0 0 0 4px var(--k-cream2);   /* 二重の枠に見せる外側の 1 本 */
}
body.kumoju-shop .k-reasons h2{
  display:flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--k-serif); font-size:15px; font-weight:500; letter-spacing:.05em;
  color:var(--k-faint); margin:0 0 12px; text-align:center;
}
/* 見出しの左右の短い横線（向こうと同じ装飾） */
body.kumoju-shop .k-reasons h2::before,
body.kumoju-shop .k-reasons h2::after{
  content:""; flex:none; width:22px; height:1px; background:var(--k-line);
}
body.kumoju-shop .k-reasons ol{ list-style:none; margin:0; padding:0 }
body.kumoju-shop .k-reasons li{
  display:flex; align-items:flex-start; gap:11px; padding:7px 0;
  font-size:14px; line-height:1.6; color:var(--k-ink);
}
body.kumoju-shop .k-reasons .rn{
  flex:none; width:20px; height:20px; border-radius:4px; margin-top:1px;
  background:var(--k-terra-t); color:var(--k-terra-d);
  font-family:var(--k-mono); font-size:11.5px; line-height:20px; text-align:center;
}

/* ── ほかの棚をさがす（参照店の ⑨）──────────────────
   ⚠️ 商品グリッドの «後ろ» に出る（woocommerce_after_shop_loop）。 */
/* ⚠️ 2026-09-07 夜：向こうと同じく **全幅の帯**を見出しにした（.k-bandbar）。
      地色を敷いた薄いブロックの中に 薄い見出し、では «区切り» にならなかった。 */
body.kumoju-shop .k-others{ margin:30px 0 0; padding:0 0 26px; background:none }
body.kumoju-shop .k-others h2{
  margin:30px -15px 16px; padding:8px 15px;
  background:var(--k-bandbar);
  font-family:var(--k-serif); font-size:14px; font-weight:500; letter-spacing:.06em;
  color:var(--k-bandink); text-align:left;
}
body.kumoju-shop .k-others ul{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px 10px;
}
body.kumoju-shop .k-others a{ display:block; text-decoration:none; color:inherit; text-align:center }
body.kumoju-shop .k-others .oi{
  display:block; aspect-ratio:1; border-radius:10px;
  background:var(--k-paper) center/cover no-repeat;
}
body.kumoju-shop .k-others .on{ display:block; margin-top:7px; font-size:12.5px; line-height:1.4 }

/* ============================================================
   カテゴリーページ 版面の作り直し（2026-09-07 夜）
   ------------------------------------------------------------
   用户「样式你抄又抄的不像，下面的部分那么几个板块你直接给我扔了…
         产品的排列你也是沿用之前的，太刻板了墨守成规…
         文字和排版也搞点设计感，图片也少…不要一堆文字放一块」

   参照店 https://www.original-pet.com/c-fpage?fp=shapecushion を 390px で
   4 枚に切って（tools/slice-shot.js）版面を数え、**計算値を実測して**移した。
   実測値（＝ここの数字の出どころ。憶測ではない）:
     ・区切りの帯      背景 rgb(216,204,186) / 全幅 / padding 7.8px / 13px / 左寄せ
     ・商品一覧の帯    背景 rgb(230,213,184) / padding 10.75px / 内側は白いカード
     ・その中の見出し  H2 12px/700 色 rgb(72,64,24)、英字 18px/700 同色、中央
     ・選ばれる理由    H2 13px/700 色 rgb(186,172,147)、padding 18px、中央、角丸の枠
     ・ITEM の区切り   span 15px/700 中央、左右に横線、組名の下にもう 1 本
     ・商品セル        176px 幅・枠なし・地色なし・中央揃え・価格 13px 色 rgb(128,128,128)
     ・ページの余白    15.6px

   ⚠️ 色は 向こうの値そのままではなく、うちのクリーム地（--k-cream #F5F0E6）に
      合わせて 1 段 淡くしてある —— «不要跳出整体氛围»（用户 2026-09-07）。
      構造・寸法・字の大きさは 実測どおり。
   ============================================================ */

body.kumoju-shop{
  --k-band:#EBE0CC;      /* 商品一覧の帯（向こう #E6D5B8 を 1 段 淡く） */
  --k-bandbar:#E2D7C2;   /* 区切りの帯  （向こう #D8CCBA を 1 段 淡く） */
  --k-bandink:#6B6047;   /* 帯の上の字  （向こう #484018 を うちの ink2 寄りに） */
}

/* ── ⑤ 作例の 2 枚組（参照店にあって うちに無かった段）──────────
   ⚠️ 長い説明の «途中» に絵を挟むための段。ここが «一堆文字» を割る装置。 */
/* ⚠️ クラス名は k-sample。k-proof は 商品ページの «確認稿» が使っていて、
      その CSS は scope 無しなので ここにも効いてしまう（枠と矢印を被った）。
   ⚠️ **枠を付けない。**すぐ下の «選び方»（.k-guide）が クリームの角丸なので、
      同じ箱を 2 つ続けると また «刻板» に戻る。ここは地のまま置いて緩急をつける。 */
/* ⚠️⚠️⚠️ 2026-09-09 の作り直し（用户「重新设计下这个位置的样式」）。
   前は 地のまま 本文が 5 つ続くだけで、版面に «区切り» が一つも無かった ——
   «丑» の正体は 飾りが足りないことではなく **地色が一度も変わらないこと**。
   ページの地は #F5F0E6、.k-guide は #FBF7EF ＝ ほとんど同じで カードに見えていない。
   → ここだけ **全幅の #FEFCF7（紙）**にして 上下に細い罫を引く。
     ページの流れが «生成りの地 → 白い紙 → 生成りの地 → 商品一覧の帯（タン）» になり、
     はじめて 3 つの地が並ぶ。
   ⚠️ 通栏は -15px（-16px だと 1px はみ出す。2026-09-07 実測）。
   ⚠️ .k-guide は 内側の角丸カードのまま —— **形が違うので 2 枚重ねに見えない**。 */
body.kumoju-shop .k-sample{
  margin:26px -15px 0; padding:20px 15px 18px;
  background:var(--k-paper);
  border-top:1px solid var(--k-line); border-bottom:1px solid var(--k-line);
}
body.kumoju-shop .k-sample .ks-h{
  margin:0 0 10px; text-align:center; text-wrap:balance;
  font-family:var(--k-serif); font-size:17px; font-weight:500;
  letter-spacing:.02em; line-height:1.5; color:var(--k-ink);
}
body.kumoju-shop .k-sample .kp-lead{
  margin:0 0 13px; text-align:left;
  font-size:13.5px; line-height:1.85; color:var(--k-ink3);
}
body.kumoju-shop .k-sample .kp-lead strong{ font-weight:500; color:var(--k-ink); background:linear-gradient(transparent 62%, var(--k-terra-t) 62%) }
/* ⚠️⚠️ 2026-09-09 に組み直した。前は «1:1 が 2 枚（各 175px）＋ 下に 2 行の説明»
   ＝ この 1 ブロックで 222px。しかも説明の 2 行目が列幅より長く、左右で 行が揃わず
   ガタついていた。
   参照店の同じ仕事の絵を測ると **337×132（＝ 2.55:1）の 1 本の帯**で、
   下に説明は無く、**札は絵の中の隅に 小さな白い字**で置いてある。
   → こちらも 帯にする：1 枚 5:4、あいだ 4px、札は絵の中。222px → 約 142px。
   ⚠️ 札は HTML の重ね（焼き込みではない）。«掲載画像に一字も焼かない» は守っている。 */
body.kumoju-shop .k-sample-pair{
  display:grid; grid-template-columns:1fr 1fr; gap:4px;
  border-radius:8px; overflow:hidden;
}
body.kumoju-shop .k-sample-pair figure{ margin:0; position:relative }
body.kumoju-shop .k-sample-pair img{
  display:block; width:100%; aspect-ratio:5/4; object-fit:cover;
  border-radius:0; background:var(--k-cream2);
}
/* ⚠️ 棚のために作った 5:4 が無く、代表商品の 1:1 の主図を借りているとき。
   cover で切ると 商品の上下が落ちるので contain。左右に出る余白は 地色で埋める。 */
body.kumoju-shop .k-sample-pair figure.is-fit img{ object-fit:contain; background:var(--k-cream2) }
/* 札の下に薄い暗がりを敷く。白い字が 明るい写真の上でも読めるように。
   ⚠️ 濃くしない —— 写真そのものが商品の顔なので、帯で潰すと本末転倒。 */
body.kumoju-shop .k-sample-pair figure::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:46%;
  background:linear-gradient(transparent, rgba(38,33,26,.42));
  pointer-events:none;
}
body.kumoju-shop .k-sample-pair figcaption{
  position:absolute; left:9px; bottom:7px; z-index:2;
  font-size:11.5px; line-height:1.4; color:#fff; letter-spacing:.03em;
  text-shadow:0 1px 3px rgba(0,0,0,.45);
}
body.kumoju-shop .k-sample .kp-note{
  margin:11px 0 0; text-align:left;
  font-size:12px; line-height:1.85; color:var(--k-faint);
}

/* ── 区切りの帯（参照店の «今月のおすすめ» / «グッズから探す»）───────
   全幅・左寄せ・小さい字。ページの中で «ここから別の話» を作る唯一の装置。 */
body.kumoju-shop .k-bandbar{
  margin:30px -15px 16px; padding:8px 15px;
  background:var(--k-bandbar);
  font-family:var(--k-serif); font-size:14px; font-weight:500; letter-spacing:.06em;
  color:var(--k-bandink); text-align:left;
}

/* ── となりの棚（参照店の «今月のおすすめ» の位置。横長の大きな絵）────
   ⚠️ 絵は その棚の hero バナーの使い回し（2:1 を 2.6:1 に切る）。
      バナーは左 45% を空けて焼いてあるので、そこに文字を重ねられる。 */
body.kumoju-shop .k-rel ul{ list-style:none; margin:0; padding:0 }
body.kumoju-shop .k-rel li + li{ margin-top:16px }
body.kumoju-shop .k-rel a{
  display:block; position:relative; text-decoration:none; color:inherit;
  border-radius:12px; overflow:hidden;
}
body.kumoju-shop .k-rel .rl-img{ display:block }
body.kumoju-shop .k-rel .rl-img img{
  display:block; width:100%; aspect-ratio:2.6/1; object-fit:cover; object-position:72% 50%;
}
/* 左を紙色へ溶かす。hero と同じ考え方だが、横長ぶん 溶ける幅を狭くする */
body.kumoju-shop .k-rel a::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(100deg, var(--k-paper) 8%, rgba(250,247,241,.84) 34%, rgba(250,247,241,0) 58%);
}
body.kumoju-shop .k-rel .rl-copy{
  position:absolute; left:14px; top:50%; transform:translateY(-50%); z-index:2; max-width:56%;
}
body.kumoju-shop .k-rel .rl-e{ display:block; font-size:11px; letter-spacing:.09em; color:var(--k-ink3) }
/* ⚠️ 2.6:1 の帯は 390px で高さ 150px しかないので、17px・1 行に収める。
      hero（22px）と同じ大きさにすると 2 行になって «いちばん見／る一枚を» と
      1 字だけ落ちる（2026-09-07 実測）。
   ⚠️ ここでは text-wrap:balance を **使わない** —— balance は行を均そうとして
      «置く場所／を、つくる» のように わざわざ 2 行に割る。1 行に入る幅を確保するのが先。 */
body.kumoju-shop .k-rel .rl-t{
  display:block; margin-top:3px; font-family:var(--k-serif); font-size:17px; font-weight:500;
  letter-spacing:.02em; line-height:1.4; color:var(--k-ink);
}
body.kumoju-shop .k-rel .rl-cap{
  margin:7px 2px 0; font-size:12.5px; line-height:1.7; color:var(--k-ink3);
}

/* ── 場面への 2 つの入口（参照店の «愛犬グッズ / 愛猫グッズ» の位置）───
   ⚠️ 向こうは 犬 / 猫 で割っているが、うちは種類で割らない（2026-08 の実査）。
      うちの 2 つの扉は «いっしょに暮らす» と «おもいでを置く» ＝ 2 つの束。 */
body.kumoju-shop .k-scenes{
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
  margin:28px 0 0;
}
body.kumoju-shop .k-scenes[data-n="1"]{ grid-template-columns:1fr }
body.kumoju-shop .k-scenes a{ display:block; text-decoration:none; color:inherit; text-align:center }
body.kumoju-shop .k-scenes .sc-img{ display:block; border-radius:12px; overflow:hidden }
body.kumoju-shop .k-scenes .sc-img img{
  display:block; width:100%; aspect-ratio:4/3; object-fit:cover; object-position:72% 50%;
}
body.kumoju-shop .k-scenes[data-n="1"] .sc-img img{ aspect-ratio:2.6/1 }
body.kumoju-shop .k-scenes .sc-t{
  display:block; margin-top:8px; font-family:var(--k-serif); font-size:15px; font-weight:500;
  letter-spacing:.03em; color:var(--k-ink);
}
body.kumoju-shop .k-scenes .sc-s{ display:block; margin-top:3px; font-size:11.5px; line-height:1.5; color:var(--k-faint) }

/* ⚠️ セレクタから «.products» を外した（2026-09-07 深夜）——
      組の無い棚では この見出しがグリッドの «外» に置かれる
      （kumoju_shelf_item_head()。参照店 apron と同じ «ITEM → 棚名 → 商品»）。
      «.products .k-sec» のままだと そちらに一切 効かない。
      grid-column だけは グリッドの中にいるときの話なので 内側に残す。 */
body.kumoju-shop .k-sec{
  margin:22px 0 2px; padding:0 2px;
}
body.kumoju-shop .products .k-sec{ grid-column:1 / -1 }
body.kumoju-shop .k-sec-solo{ margin:24px 0 14px }
body.kumoju-shop .products .k-sec:first-child{ margin-top:6px }
/* 参照店は 組の頭に «— ITEM —» の細い区切りを置き、その下に 組名を中央揃えで出す。
   ⚠️ 線と字を CSS だけで作る（画像にしない）。文字は擬似要素なので読み上げには乗らない。 */
/* ⚠️ 2026-09-07 夜の修正：**線が 1 本も引けていなかった**。
      向こうは «—— ITEM ——»（左右に横線）→ 組名 → **その下にもう 1 本 太めの線** で、
      この 3 本が «ここから新しい組» を作っている。うちは ITEM の 4 文字だけで、
      gap:12px は書いてあったのに 線を作る擬似要素が無かったので効いていなかった。 */
body.kumoju-shop .k-sec::before{
  content:"ITEM"; display:flex; align-items:center; gap:12px;
  font-size:13px; font-weight:700; letter-spacing:.2em; color:var(--k-ink);
  margin-bottom:10px;
}
/* ITEM の左右に伸びる線（flex の余りを線が食う） */
body.kumoju-shop .k-sec::before{
  background:
    linear-gradient(var(--k-line), var(--k-line)) left  center/calc(50% - 42px) 1px no-repeat,
    linear-gradient(var(--k-line), var(--k-line)) right center/calc(50% - 42px) 1px no-repeat;
}
body.kumoju-shop .k-sec::before,
body.kumoju-shop .k-sec h2{ text-align:center; justify-content:center }
body.kumoju-shop .k-sec h2{
  font-family:var(--k-serif); font-size:20px; font-weight:500; letter-spacing:.03em;
  color:var(--k-ink); margin:0; line-height:1.45;
  padding-bottom:13px; border-bottom:2px solid var(--k-line);   /* 組名の下の 1 本 */
}
body.kumoju-shop .k-sec p{
  font-size:14px; line-height:1.85; color:var(--k-ink3); margin:9px 0 0;
}

/* ---------- ⑥ 商品カード（原型 L255〜271 .grid / .pcard） ----------
   DOM は Woodmart のまま：
     div.products.wd-products      → 原型 .grid
       div.wd-product              → 原型 .pcard
         div.product-element-top   → 原型 .pi（写真・正方形）
         div.product-element-bottom→ 原型 .pinfo（英字・名前・価格） */

/* 並び：原型は 2 列・すきま 14px（Woodmart の既定は 10px） */
body.kumoju-shop .products.wd-products{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:14px !important;
  padding:2px 1px 0;
}
/* カード本体 */
/* ⚠️⚠️ 2026-09-07 夜：**カードの «板» をやめた**（用户「产品的排列你也是沿用之前的，
      太刻板了墨守成规」）。参照店の商品セルを実測すると 176px 幅・**枠なし・地色なし**で、
      写真がそのまま紙の上に置いてある。うちは 全部が白い角丸の板に載っていて、
      «テンプレートの格子» に見えていたのが 刻板さの正体。
      写真の角丸だけ残して 板と影を外す。 */
body.kumoju-shop .wd-product{
  background:none; border-radius:0; overflow:visible;
  box-shadow:none;
}
body.kumoju-shop .wd-product .product-element-top{ border-radius:12px }
/* ⚠️ Woodmart は .product-wrapper に box-shadow:0 0 4px rgba(0,0,0,.12) を
      当てている（wd-hover-tiled）。影が二重になり、PC では 板を消したのに
      薄い四角だけが残って見えるので、こちらを消して .wd-product 側に一本化する。 */
body.kumoju-shop .wd-product .product-wrapper{ background:none; box-shadow:none }

/* 写真：正方形に切る。画像そのものは woocommerce_single（510×510 の正方形）
   に差し替えてあるので（inc/kumoju-shop.php ③）、ここでの切り落としは無い。 */
body.kumoju-shop .product-element-top{
  aspect-ratio:1/1; overflow:hidden; position:relative;
  background-color:#EAE0CF;
}
body.kumoju-shop .product-image-link{
  display:block; width:100%; height:100%;
}
body.kumoju-shop .product-element-top img{
  width:100% !important; height:100% !important; object-fit:cover;
}

/* ⚠️ 2 枚目の写真への «すり替え＋ゆっくり拡大» は出さない（2026-08-13 用户指摘）。
      Woodmart は .hover-img に
        transition: opacity .5s, transform 2s cubic-bezier(0,0,.44,1.18)
      を当てていて、指が触れると 副図の 1 枚目に変わりながら 2 秒かけて膨らむ。
      スマホは «最初のタップ» が hover 扱いになるので、商品を選んだだけで
      毎回この動きが挟まる —— 押した手ごたえではなく «誤操作したのか？» に見える。
      原型のカードは写真 1 枚の静止。ここも同じにする。
   ⚠️ 主図側の transform も止める。Woodmart のホバー型（wd-hover-tiled）は
      条件次第でこちらも動かすので、値ごと固定しておく。 */
body.kumoju-shop .product-element-top .hover-img{ display:none !important }
body.kumoju-shop .product-element-top img{
  transform:none !important; transition:none !important;
}

/* 写真に重なるボタンのうち、原型に無いもの（オプションを選択 / Quick view /
   Compare）は出さない。残すのは お気に入りの ♡ だけ。
   ⚠️ 商品名も写真もリンクのままなので、カードを押せば商品ページへ行ける。 */
body.kumoju-shop .wd-add-btn,
body.kumoju-shop .quick-view,
body.kumoju-shop .wd-compare-btn,
body.kumoju-shop .wd-product-btns,
body.kumoju-shop .wd-swatches-grid{ display:none !important }
/* 星と件数も原型のカードには無い */
body.kumoju-shop .wd-product .star-rating,
body.kumoju-shop .wd-product .woocommerce-review-link{ display:none !important }

/* ---------- ⑥b お気に入りの ♡（原型 L258〜260 .pcard .fav） ----------
   DOM は Woodmart のウィッシュリストボタンをそのまま使う：
     div.wd-buttons.wd-pos-r-t > div.wd-wishlist-btn > a[data-product-id]
   押すと Woodmart 側が a に .added を付ける（未ログインは cookie 保存）。

   ⚠️ Woodmart の既定は «白い縦長のピルの中にアイコンを縦積み» で、
      入れ物ごと地色と影を持っている。原型は 写真の右上に浮く丸 1 つなので、
      入れ物の地・影・並びを全部落としてから 丸を描き直す。
   ⚠️ ハートは Woodmart のアイコンフォント（woodmart-font）ではなく、
      原型 heartSvg()（L1477）と同じ形の SVG を背景として敷く。
      «輪郭だけ / 塗りつぶし» の 2 状態をフォントでは出し分けられないため。 */
body.kumoju-shop .wd-buttons{
  display:block !important;
  position:absolute !important; top:8px; right:8px; left:auto; bottom:auto;
  background:none !important; box-shadow:none !important; border:none !important;
  padding:0 !important; margin:0 !important; border-radius:0 !important;
  opacity:1 !important; visibility:visible !important; transform:none !important;
  z-index:2; width:auto; min-width:0;
}
body.kumoju-shop .wd-wishlist-btn{
  display:block !important; margin:0 !important; padding:0 !important;
  background:none !important; box-shadow:none !important;
}
body.kumoju-shop .wd-wishlist-btn > a{
  display:block !important;
  width:29px !important; height:29px !important;
  min-width:0 !important; min-height:0 !important;
  padding:0 !important; margin:0 !important; border:none !important;
  border-radius:50%; box-shadow:none !important;
  background-color:rgba(254,252,247,.85);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  background-repeat:no-repeat; background-position:center;
  background-size:15px 15px;
  /* 輪郭だけのハート（原型 .fav svg：stroke ＝ ink3） */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237B7261' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M12 20C5 15 3 10.5 3 7.8A4.3 4.3 0 0 1 12 6a4.3 4.3 0 0 1 9 1.8c0 2.7-2 7.2-9 12.2z'/%3E%3C/svg%3E");
}
/* 追加済み（原型 .fav.on：テラコッタの塗りつぶし） */
body.kumoju-shop .wd-wishlist-btn > a.added{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23C79B87' stroke='%23C79B87' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M12 20C5 15 3 10.5 3 7.8A4.3 4.3 0 0 1 12 6a4.3 4.3 0 0 1 9 1.8c0 2.7-2 7.2-9 12.2z'/%3E%3C/svg%3E");
}
/* 送信中（Woodmart の回転アイコンは ::before なので、こちらで薄くするだけ） */
body.kumoju-shop .wd-wishlist-btn > a.loading{ opacity:.45 }
/* Woodmart のアイコンフォントと、英語のツールチップは出さない */
body.kumoju-shop .wd-wishlist-btn > a::before,
body.kumoju-shop .wd-wishlist-btn > a::after{ content:none !important; display:none !important }
/* ⚠️ 文字は display:none にしない。読み上げに残す必要があるので、
      見た目だけ消す（文言の日本語化は inc/kumoju-shop.php の 7 節）。 */
body.kumoju-shop .wd-wishlist-btn > a span{
  position:absolute !important; width:1px; height:1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}

/* 文字まわり（原型 .pinfo：内側の余白 10 / 11 / 12） */
body.kumoju-shop .product-element-bottom{ padding:10px 11px 12px }

/* 英字 1 行（原型 L1490 .pen）。DOM は inc/kumoju-shop.php ④ が差し込む */
body.kumoju-shop .k-pen{
  display:flex; align-items:center; gap:5px; margin-bottom:5px;
}
body.kumoju-shop .k-pen i{
  width:5px; height:5px; border-radius:50%; flex:none; background:var(--k-terra);
}
body.kumoju-shop .k-pen span{
  font-family:var(--k-mono); font-size:13px; letter-spacing:.04em;
  color:var(--k-faint); line-height:1;
}

/* 商品名（原型 .pname：明朝 17.5px）
   一覧では 2 行で打ち切り、入りきらない名前は末尾を … で終わらせる
   （2026-08-13 用户指定）。棚は「どれがどれか」が分かればよく、
   名前を最後まで読ませる場所は商品ページのほう。
   ⚠️ 字は 16px。原型の 17.5px だと 175px 幅で 1 行 9 字＝ 2 行で 18 字しか
      入らず、20 字を超える本番の商品名がどれも途中で切れる。16px なら
      1 行 11 字＝ 22 字入り、7 点のうち切れるのは 1 点だけになる。
   ⚠️ 高さを 2 行ぶんで固定するのは、名前の長さが違っても価格の行が
      横で揃うようにするため（原型 L869 と同じ考え）。
   ⚠️ … は -webkit-line-clamp が自動で付ける（text-overflow は要らない）。 */
body.kumoju-shop .wd-product .wd-entities-title{
  font-family:var(--k-serif) !important; font-size:16px !important;
  font-weight:500 !important; line-height:1.45 !important;
  color:var(--k-ink) !important; margin:0 !important;
  height:47px;                                  /* 16 × 1.45 × 2 行 */
  display:-webkit-box !important; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  overflow:hidden !important;
  /* ⚠️ Woodmart は並びの器に title-line-two を付け、
        [class*="title-line-"] .wd-product .wd-entities-title に
        max-height:calc(var(--title-line-count) * var(--title-line-height))
        を当てて 2 行で頭打ちにしている（woo-opt-title-limit.min.css）。
        これを外さないと、上の height / line-clamp が何をしても 2 行のまま
        しかも 2 行目が半分だけ見える状態になる（実測 42px）。 */
  max-height:none !important;
}
body.kumoju-shop .wd-product .wd-entities-title a{ color:inherit }

/* 価格（原型 .pprice：赤字 → 墨の太字。「税込」だけ小さく薄く） */
body.kumoju-shop .wd-product .price,
body.kumoju-shop .wd-product .price .amount,
body.kumoju-shop .wd-product .price bdi{
  color:var(--k-ink) !important; font-size:18.5px !important;
  font-weight:700 !important; margin:0;
}
body.kumoju-shop .wd-product .price{ display:block; margin-top:6px !important }
body.kumoju-shop .wd-product .price small{
  font-size:14px !important; font-weight:400 !important;
  color:var(--k-faint) !important; margin-left:2px;
}

/* ---------- ⑦ ページ送り ---------- */
body.kumoju-shop .woocommerce-pagination{ margin-top:22px }
body.kumoju-shop .woocommerce-pagination .page-numbers li a,
body.kumoju-shop .woocommerce-pagination .page-numbers li span{
  border-radius:99px; color:var(--k-ink2);
}
body.kumoju-shop .woocommerce-pagination .page-numbers li span.current{
  background:var(--k-terra-t); color:var(--k-terra-d);
}

/* ---------- ⑧ PC 幅（kumoju-pc.html の pageItems() L634〜640） ----------
   PC の原型は 3 列・カードは板を持たず、写真（角丸 16）の下に文字を置く。
   チップ列も丸いピルの列に変わる。 */
@media (min-width:1025px){
  body.kumoju-shop .kumoju-shop-head{ margin:0 }
  body.kumoju-shop .k-chips{ flex-wrap:wrap; overflow:visible; padding:6px 0 2px }
  body.kumoju-shop .k-chip{
    width:auto; display:inline-flex; align-items:center; gap:9px;
    border:1px solid var(--k-line); border-radius:999px;
    background:var(--k-cream2); padding:5px 17px 5px 5px;
  }
  body.kumoju-shop .k-chip .ci{
    width:34px; height:34px; border-radius:10px; margin:0; box-shadow:none;
  }
  body.kumoju-shop .k-chip .cn{ font-size:14px }
  body.kumoju-shop .k-chip.is-on{ border-color:var(--k-terra); background:var(--k-terra-t) }
  body.kumoju-shop .k-chip.is-on .ci{ box-shadow:none }
  body.kumoju-shop .k-chip-all .ci svg{ width:19px; height:19px }

  body.kumoju-shop .k-shop-title{ padding:26px 0 0 }
  body.kumoju-shop .k-shop-title h1{ font-size:30px; letter-spacing:.05em }
  body.kumoju-shop .k-shop-title p{ font-size:14px; margin-top:12px }
  body.kumoju-shop .k-guide{ margin:26px 0 0; padding:22px 24px 20px; border-radius:16px }

  /* ⚠️ 2026-09-07 夜に足した段の PC 用の上限。
     1440px で 作例の 2 枚が 1 枚 800px になり、«説明の途中に挟む小さな絵» ではなく
     «巨大な作例» になっていた（実測）。読み物の幅（≒760px）に収める。 */
  /* ⚠️ 中央寄せにすると 前後の段（lead も .k-guide も コンテナ全幅）と
     頭が揃わず «島» に見える。左端をそろえる。 */
  body.kumoju-shop .k-sample{ margin:30px 0 0; max-width:760px }
  body.kumoju-shop .k-sample .kp-lead{ font-size:15px }
  /* ⚠️ ここには «2 枚のあいだの › の丸チップ» を PC で大きくする 1 行があった。
     2026-09-09 にチップ自体を廃止し、::after は «札の下の薄い暗がり» に変わっている ——
     残しておくと PC でだけ 暗がりが 24px の四角になって 右端に飛び出す。消した。
     ⚠️ 擬似要素の役目を変えたら、**別のブレークポイントで同じ擬似要素を触っていないか**を必ず見る。 */
  body.kumoju-shop .k-rel ul{ max-width:980px; margin-inline:auto; padding:0 }
  body.kumoju-shop .k-rel .rl-t{ font-size:26px }
  body.kumoju-shop .k-rel .rl-e{ font-size:13px }
  body.kumoju-shop .k-rel .rl-copy{ left:36px; max-width:46% }
  body.kumoju-shop .k-rel .rl-cap{ font-size:13.5px; margin-top:9px }
  body.kumoju-shop .k-scenes{ max-width:980px; margin:34px auto 0; gap:20px }
  body.kumoju-shop .k-scenes .sc-t{ font-size:19px; margin-top:12px }
  body.kumoju-shop .k-scenes .sc-s{ font-size:13px }
  /* 帯は全幅のまま（参照店も全幅）。字だけ大きくする */
  body.kumoju-shop .k-bandbar,
  body.kumoju-shop .k-others h2{ font-size:16px; padding:11px 24px }
  body.kumoju-shop .k-shelf-nav{ max-width:980px; margin-inline:auto; padding:22px 20px 24px }
  body.kumoju-shop .k-guide h2{ font-size:21px }
  body.kumoju-shop .k-guide p{ font-size:14px }
  /* ⚠️ 幅を絞る。1440px で伸ばしきると «条件» と «答え» が画面の両端に離れ、
     どれとどれが 1 組か 目で追えなくなる（2026-09-07 実測）。 */
  body.kumoju-shop .k-axes{ max-width:620px }
  body.kumoju-shop .k-axes li{
    font-size:14px; display:flex; align-items:baseline; gap:14px;
  }
  body.kumoju-shop .k-axes .ax-if{ flex:1 1 auto; min-width:0 }
  body.kumoju-shop .k-axes .ax-then{ flex:none; margin-top:0 }
  body.kumoju-shop .products .k-sec{ margin:34px 0 4px }
  body.kumoju-shop .products .k-sec h2{ font-size:22px; padding-bottom:10px }
  body.kumoju-shop .products .k-sec p{ font-size:13.5px; max-width:60ch }

  body.kumoju-shop .products.wd-products{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:30px !important; padding:0;
  }
  /* PC の原型は カードの板が無い（クリーム地に写真と文字が直接乗る） */
  body.kumoju-shop .wd-product{
    background:none; box-shadow:none; border-radius:0; overflow:visible;
    transition:transform .3s;
  }
  body.kumoju-shop .wd-product:hover{ transform:translateY(-6px) }
  body.kumoju-shop .product-element-top{ border-radius:16px; margin-bottom:16px }

  /* PC の ♡ は原型（kumoju-pc.html L115〜120）どおり、
     ふだんは隠れていて カードに近づくと出る。追加済みは常に出したまま。
     ⚠️ キーボードで辿ってきたときにも出す（:focus-visible）。
        これが無いと «見えないボタンに フォーカスだけ乗る» 状態になる。 */
  body.kumoju-shop .wd-buttons{ top:11px; right:11px }
  body.kumoju-shop .wd-wishlist-btn > a{
    width:36px !important; height:36px !important; background-size:17px 17px;
    background-color:rgba(251,247,239,.92);
    opacity:0; transition:opacity .25s, transform .2s;
  }
  body.kumoju-shop .wd-product:hover .wd-wishlist-btn > a,
  body.kumoju-shop .wd-wishlist-btn > a.added,
  body.kumoju-shop .wd-wishlist-btn > a:focus-visible{ opacity:1 }
  body.kumoju-shop .wd-wishlist-btn > a:hover{ transform:scale(1.12) }
  body.kumoju-shop .product-element-bottom{ padding:0 }
  body.kumoju-shop .k-pen span{ font-size:11px; letter-spacing:.12em }
  /* PC でも 2 行で打ち切る。カード幅は 323px あるので 1 行 20 字入り、
     いまの商品名はほとんど 2 行に収まる。 */
  body.kumoju-shop .wd-product .wd-entities-title{
    font-size:16px !important; line-height:1.5 !important;
    height:48px;                                /* 16 × 1.5 × 2 行 */
  }
  body.kumoju-shop .wd-product .price,
  body.kumoju-shop .wd-product .price .amount,
  body.kumoju-shop .wd-product .price bdi{ font-size:15px !important }
  body.kumoju-shop .wd-product .price small{ font-size:11px !important }
}

/* ---------- ④f 「入れられる文字と、その場所」の図（2026-08-15）----------
   Pet Momento など同業は これを画像で作っているが、こちらは HTML。
   字が選べて SEO に乗り、文案を直すのに画像を作り直さなくていい。
   組み立ては kumoju-product.js の buildLayoutFigure()。
   ⚠️ アクリル板に見せるため 地は --k-paper（ほぼ白）。カードの地（cream2）と
      1 段だけ差をつける。枠を濃くすると «紙» に見えてしまうので線は薄いまま。 */
.single-product .woocommerce-Tabs-panel--description .k-layout{
  margin:14px 0 4px;
}
.single-product .woocommerce-Tabs-panel--description .k-lay-panel{
  display:flex;
  gap:12px;
  align-items:stretch;
  background:var(--k-paper,#FEFCF7);
  border:1px solid var(--k-line);
  border-radius:6px;              /* 実物の角は直角。丸めすぎない */
  padding:14px 13px;
}
/* 左 1/3 ＝ お写真の居場所。実物は «切り抜いた写真» なので塗りつぶさず、
   薄い terra の面 ＋ 破線でホルダーであることを示す */
.single-product .woocommerce-Tabs-panel--description .k-lay-photo{
  flex:0 0 31%;
  display:flex; align-items:center; justify-content:center;
  background:var(--k-terra-t,#F3E9DE);
  border:1px dashed rgba(199,155,135,.55);
  border-radius:5px;
  font-size:13.5px;
  color:var(--k-ink3);
  letter-spacing:.04em;
  min-height:104px;
}
.single-product .woocommerce-Tabs-panel--description .k-lay-text{
  flex:1 1 auto;
  display:flex; flex-direction:column; justify-content:center; gap:9px;
  min-width:0;
}
.single-product .woocommerce-Tabs-panel--description .k-lay-row{
  display:flex; align-items:baseline; gap:7px;
  line-height:1.4;
}
.single-product .woocommerce-Tabs-panel--description .k-lay-n{
  flex:none;
  width:17px; height:17px; border-radius:50%;
  background:var(--k-terra);
  color:#fff;
  font-size:11px; font-weight:700; font-style:normal;
  display:flex; align-items:center; justify-content:center;
  transform:translateY(2px);
}
.single-product .woocommerce-Tabs-panel--description .k-lay-row b{
  font-size:15px; font-weight:700; color:var(--k-ink); flex:none;
}
.single-product .woocommerce-Tabs-panel--description .k-lay-row i{
  font-size:12.5px; font-style:normal; color:var(--k-ink3);
  letter-spacing:.02em;
}
/* 台座＝ブナ。木の色は写真から拾った淡い蜂蜜色。文字は彫りに見せて一段沈める */
.single-product .woocommerce-Tabs-panel--description .k-lay-base{
  margin-top:6px;
  background:linear-gradient(#EFE0C8,#E8D5B6);
  border-radius:4px;
  padding:9px 12px;
  font-size:12.5px;
  color:#7A6647;
  letter-spacing:.03em;
}
.single-product .woocommerce-Tabs-panel--description .k-layout figcaption{
  margin-top:7px;
  font-size:12.5px;
  color:var(--k-ink3);
  line-height:1.6;
}

/* ---------- ④g 確認稿ブロックが購入フォームの中に入ったとき ----------
   kumoju-product.js の moveProof() が お写真アップロード欄の直前へ動かす。
   フォームの外に置いていたときの上下の余白のままだと、選択肢の並びから
   浮いて «別の段» に見えるので、間合いだけ詰める。 */
.single-product form.cart .k-proof.k-proof--inform{
  margin:18px 0 22px;
}

/* ---------- ④h 刻む内容の欄（PPOM・商品ごと）2026-08-15 ----------
   位牌のように «お名前・日づけ二つ・ひとこと» を入れる商品は、
   PPOM のフィールド組を商品専用に分けて持たせている
   （組 11「KUMOJU-位牌」。他の商品は共用の組 9 のまま）。
   日づけ 2 つは対なので横に並べる。col-md-6 は 768px 未満で 100% に
   なってしまうので、ここで半分に戻す。 */
.single-product .ppom-field-wrapper.date_1,
.single-product .ppom-field-wrapper.date_2{
  flex:0 0 50%;
  max-width:50%;
}

/* ---------- ④i 「刻む内容」のカード（2026-08-15）----------
   組み立ては kumoju-product.js の buildEngraveBox()。
   ⚠️ 地は cream2。入力枠（paper）より 1 段濃くしないと «枠の中» に見えない。
      逆に濃くしすぎると 上のスウォッチ群と主張がぶつかるので、線は薄いまま。 */
.single-product .k-engrave{
  flex:0 0 100%;
  max-width:100%;
  background:var(--k-cream2);
  border:1px solid var(--k-line);
  border-radius:14px;
  padding:15px 13px 5px;
  margin:2px 0 14px;
}
.single-product .k-engrave-h{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:4px 9px;
  margin:0 0 12px;
  font-family:var(--k-serif,'Shippori Mincho',serif);
  font-size:17px;
  font-weight:600;
  color:var(--k-ink);
  letter-spacing:.03em;
}
/* 「板の右側に、この順で入ります」＝ 欄と現物を結びつける一言 */
.single-product .k-engrave-h span{
  font-family:var(--k-gothic,'Zen Maru Gothic',sans-serif);
  font-size:12.5px;
  font-weight:500;
  color:var(--k-ink3);
  letter-spacing:.02em;
}
/* PPOM の .form-row と同じ «左右 -5px» の格子をカードの中に作り直す */
.single-product .k-engrave-in{
  display:flex;
  flex-wrap:wrap;
  margin:0 -5px;
}
.single-product .k-engrave-in > .ppom-field-wrapper{
  padding:0 5px;
  margin-bottom:12px;
}
/* 入力枠はカードより明るく。触れる場所だと分かる程度に */
.single-product .k-engrave input.ppom-input:not([type="checkbox"]):not([type="radio"]){
  background:var(--k-paper,#FEFCF7);
}
.single-product .k-engrave input.ppom-input:focus{
  border-color:var(--k-terra) !important;
  outline:none;
  box-shadow:0 0 0 3px rgba(199,155,135,.16);
}
/* ひとことの残り字数。ラベル行の右端へ寄せる。
   ⚠️ ラベルを display:flex にしてはいけない（2026-08-15 実測）。
      「任意」タグ（::after）と本文が別々の flex 項目になり、半分幅の
      日づけ欄で «日づけ（一つ / め）　任意» と無様に折り返した。
      float なら通常の行の中を流れるので、折り返しても崩れない。 */
.single-product .k-engrave .k-count{
  float:right;
  margin-left:8px;
  font-size:12px;
  font-weight:500;
  color:var(--k-ink3);
  font-variant-numeric:tabular-nums;   /* 数字が揺れない */
}
/* 半分幅の日づけ欄には「任意」を出さない ―― 一行に収まらない。
   必須のものだけに印を付けるのは日本のフォームでは普通の作法。 */
.single-product .k-engrave .ppom-field-wrapper.date_1 label.form-control-label::after,
.single-product .k-engrave .ppom-field-wrapper.date_2 label.form-control-label::after{
  content:none;
}

/* ---------- ④j 飾りの型えらび（2026-08-31）----------
   クリスタル位牌のように «飾りの型» を選ぶ商品の PPOM radio（design_template）。
   DOM は PPOM のまま、CSS だけで «のし» と同じボタンの並びにする：
     .form-group（＝格子）
       └ label.form-control-label   … 欄の名前。1 行目を丸ごと使う
       └ .form-check × 6            … ボタン 1 つ

   ⚠️ **選択肢に型の絵は出さない**（用户 2026-08-31「不合适，只留他们的选项名称」）。
      一度サムネイルを並べたが、注文欄に他所の子の写真が 6 枚ぶら下がることになる。
      型の見た目は 画廊の `types.jpg` と 本文の `templates.jpg` で見せる。
   ⚠️ 3 列。390px で «クローバーの輪» が 1 行に収まる いちばん詰めた形。 */
.single-product .ppom-field-wrapper.design_template > .form-group{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:7px;
}
/* 欄の名前と説明は 1 行目を丸ごと使う（ボタンと同じ列に入れない） */
.single-product .ppom-field-wrapper.design_template > .form-group > label.form-control-label{
  grid-column:1 / -1;
  position:relative;
  margin:0 0 2px;
  padding-right:44px;                  /* 「必須」の座 */
  font-family:var(--k-serif,'Shippori Mincho',serif);
  font-size:16px;
  font-weight:600;
  color:var(--k-ink);
  letter-spacing:.03em;
}
/* 「必須」タグ（④c で全欄に付く ::after）は 説明文が block なので
   放っておくと 説明の «下» に、しかも見出しの 16px で落ちる。
   見出し行の右端へ絶対配置して、字も欄名と同じ大きさにしない。 */
.single-product .ppom-field-wrapper.design_template > .form-group > label.form-control-label::after{
  content:"必須";                       /* 先頭の全角空きは絶対配置では不要 */
  position:absolute;
  right:0;
  top:3px;
  font-family:var(--k-gothic,'Zen Maru Gothic',sans-serif);
  font-size:12.5px;
}
.single-product .ppom-field-wrapper.design_template .show_description{
  display:block;
  margin-top:3px;
  font-family:var(--k-gothic,'Zen Maru Gothic',sans-serif);
  font-size:12px;
  font-weight:400;
  line-height:1.6;
  color:var(--k-ink3);
  letter-spacing:.01em;
}
/* Bootstrap の .form-check（padding-left:1.25rem・相対配置）を打ち消す */
.single-product .ppom-field-wrapper.design_template .form-check{
  display:block;
  position:static;
  width:100%;
  min-width:0;
  margin:0;
  padding:0;
}
.single-product .ppom-field-wrapper.design_template .form-check-label{
  display:block;
  box-sizing:border-box;
  width:100%;
  position:relative;
  margin:0;
  padding:9px 4px;
  text-align:center;
  border:1px solid var(--k-line);
  border-radius:10px;
  background:var(--k-paper,#FEFCF7);
  color:var(--k-ink2);
  font-family:var(--k-gothic,'Zen Maru Gothic',sans-serif);
  font-size:clamp(12px, 3.4vw, 15px);   /* 3 列のまま 1 行に収める */
  line-height:1.4;
  white-space:nowrap;
  cursor:pointer;
  transition:.15s;
}
/* ラジオの丸は隠す（ラベル全体がボタン）。
   ⚠️ display:none にはしない —— 一部のブラウザで «送信はされるが
      キーボードで選べない» 状態になる。 */
.single-product .ppom-field-wrapper.design_template input[type="radio"]{
  position:absolute;
  opacity:0;
  width:0; height:0; margin:0;
}
/* ⚠️ `:has()` だけに頼らない —— 無頭 Edge は «セレクタは一致するのにスタイルを
   再計算しない»（2026-08-31 実測）。JS（syncTemplateChoice）が付ける
   .is-active と 2 本立てにして、確かめられる状態にしてある。 */
.single-product .ppom-field-wrapper.design_template .form-check-label.is-active,
.single-product .ppom-field-wrapper.design_template .form-check-label:has(input:checked){
  border-color:var(--k-terra);
  background:var(--k-cream2);
  color:var(--k-ink);
  font-weight:600;
  box-shadow:0 0 0 2px rgba(199,155,135,.16);
}

/* ---------- ④k 「どんなお写真だと」（2026-08-31）----------
   functions.php の kumoju_photo_upload_field() が出す <details>。
   ⚠️ 閉じているのが既定。開く人だけが読む —— 条件を全部広げると
      注文の直前で «うちの写真ではだめかも» と思わせる側に働く。 */
.single-product .kumoju-photo-field .k-phototips{
  margin-top:8px;
  font-size:13.5px;
  line-height:1.75;
  color:var(--k-ink3);
}
.single-product .kumoju-photo-field .k-phototips > summary{
  cursor:pointer;
  list-style:none;
  padding:2px 0 2px 18px;
  position:relative;
  font-size:13.5px;
  font-weight:500;
  color:var(--k-terra,#C79B87);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
  text-decoration-color:rgba(199,155,135,.45);
}
.single-product .kumoju-photo-field .k-phototips > summary::-webkit-details-marker{ display:none; }
/* 三角は自前で（UA の ▶ はサイズも色も揃わない） */
.single-product .kumoju-photo-field .k-phototips > summary::before{
  content:"";
  position:absolute; left:3px; top:.72em;
  width:0; height:0;
  border:4px solid transparent;
  border-left-color:currentColor;
  transition:transform .15s;
  transform-origin:2px 4px;
}
.single-product .kumoju-photo-field .k-phototips[open] > summary::before{
  transform:rotate(90deg);
}
.single-product .kumoju-photo-field .k-phototips ul{
  margin:7px 0 6px;
  padding:0 0 0 2px;
  list-style:none;
}
.single-product .kumoju-photo-field .k-phototips li{
  position:relative;
  padding-left:15px;
  margin:0 0 2px;
}
.single-product .kumoju-photo-field .k-phototips li::before{
  content:"";
  position:absolute; left:3px; top:.85em;
  width:4px; height:4px;
  border-radius:50%;
  background:var(--k-sage,#9DAF9A);
}
.single-product .kumoju-photo-field .k-phototips p{
  margin:0;
  font-size:13px;
  color:var(--k-ink3);
}

/* ---------- ④l 原寸の型紙（A4・PDF）のボタン（2026-08-31）----------
   差し込みは kumoju-product.js の buildSizeSheet()。本文の «大きさ» の段の中。
   ⚠️ 加購ボタン（terra 塗り）とは色を変える —— 本文の中にもう一つ
      «押すもの» が現れると、どちらが注文なのか一瞬迷う。ここは線だけ。 */
.single-product .k-sizepdf{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 12px;
  margin:12px 0 4px;
}
.single-product .k-sizepdf-btn{
  display:inline-block;
  padding:9px 16px;
  border:1.5px solid var(--k-terra,#C79B87);
  border-radius:999px;
  background:transparent;
  font-family:var(--k-gothic,'Zen Maru Gothic',sans-serif);
  font-size:14px;
  font-weight:600;
  color:var(--k-terra,#C79B87);
  text-decoration:none;
  letter-spacing:.02em;
}
.single-product .k-sizepdf-btn:hover,
.single-product .k-sizepdf-btn:focus{
  background:rgba(199,155,135,.10);
  color:var(--k-terra,#C79B87);
}
.single-product .k-sizepdf-note{
  font-size:12.5px;
  line-height:1.6;
  color:var(--k-ink3);
}

/* ── 商品页改版の前提：本文の丸ゴシック（Zen Maru）を端末の標準ゴシックに（7 站＋Hacoa 実測で丸ゴシックは 0/12）。
   ほとんどの規則は var(--k-gothic) 経由なので、下の redesign 先頭で変数を差し替えれば済む。
   丸ゴシックを直書きしている 3 か所（L385 .k-swatch／L1233 .summary-inner 一式／L3496 .k-bb-add）だけここで上書き。
   ⚠️ !important にしない —— 後ろの明朝の見出し（STEP・POINT・丸印）が同じ詳細度で勝てるように ── */
body.single-product .k-swatch,
body.single-product .summary-inner,
body.single-product .summary-inner label,
body.single-product .summary-inner input,
body.single-product .summary-inner button,
body.single-product .summary-inner select,
body.single-product .summary-inner textarea,
body.single-product .summary-inner b,
body.single-product .kumoju-photo-field,
body.single-product .ppom-field-wrapper,
body.single-product .k-buybar .k-bb-add{font-family:var(--k-gothic)}

/* ════════════════════════════════════════════════════════════════════
   商品页改版 2026-09-11（第 12 版）—— 只作用于商品页（body.single-product）
   上半（标题〜加购）＝白底为主；下半「この品について」＝暖米；评论＝白；底部＝灰米
   依据：docs/pdp-section-emphasis-survey-2026-09-11.md（7 站实测）
   DOM 的部分（STEP 编号・进度条・POINT・章标题・banner・倒三角 等）在 js/kumoju-product.js 的 redesign()
   ⚠️ 这一段是从预览脚本逐版叠出来的，后面的规则会覆盖前面的 —— 改的时候看最后一条
   ════════════════════════════════════════════════════════════════════ */
body.single-product{--k-cream:#FFFFFF; --k-cream2:#FFFFFF; --k-paper:#FFFFFF;
  --k-line:#E6E2DB; --k-accent:#9A6B55; --k-panel:#F5F3EF;
  /* ⚠️ 2026-09-18 第 34 版：商品页の字は 2 つだけ（用户が C 案を選択）。
     本文・UI ＝ M PLUS Rounded 1c ／ 見出し・価格・欧文の小見出し ＝ Kaisei Tokumin。
     ここを直せば var(--k-gothic) / var(--k-serif) / var(--kh) と Woodmart の body 字体が
     いっぺんに変わる —— 商品页の外（首页・分类页・购物车）には効かない。
     依拠：docs/pdp-typeface-survey-2026-09-18.md（自站 8 家族 ／ 同業 16 店の中位 1 家族）。 */
  --k-gothic:'M PLUS Rounded 1c',sans-serif;
  --k-serif:"Kaisei Tokumin",serif;
  --wd-text-font:'M PLUS Rounded 1c',sans-serif;
  --wd-title-font:'M PLUS Rounded 1c',sans-serif;
  --wd-entities-title-font:'M PLUS Rounded 1c',sans-serif;
  --wd-widget-title-font:'M PLUS Rounded 1c',sans-serif;}
body.single-product,
body.single-product .main-page-wrapper,
body.single-product .whb-header,
body.single-product .whb-main-header,
body.single-product .whb-row,
body.single-product .whb-general-header{background:#fff!important}
body.single-product /* ── v2：字体只留两套（标题・价格＝明朝，其余＝黑体），不用 DM Mono ── */
.summary{--kh:"Kaisei Tokumin",serif}
body.single-product .k-pd-en{font-family:var(--kh)!important;font-size:12px!important;letter-spacing:.22em!important}
body.single-product .k-sku .v{font-family:inherit!important;letter-spacing:.04em}
body.single-product .woocommerce-product-details__short-description p{font-weight:400!important;font-size:15px!important;line-height:1.8!important;letter-spacing:.02em}
body.single-product /* 价格下面的零碎：收成一行小字，积分不再是胶囊 */
.k-pt{display:flex!important;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:6px 0 4px!important}
body.single-product .k-pt-pill{background:none!important;border:0!important;padding:0!important;font-size:13px!important}
body.single-product .k-pt-note{font-size:12px!important}
body.single-product .k-ship-line{font-size:12px!important;margin-bottom:0!important;padding-bottom:22px;border-bottom:1px solid var(--k-line)}
body.single-product .k-ship-free{font-weight:500!important;margin-right:6px}
body.single-product /* 灰底只包「三个选择」 */
form.variations_form{counter-reset:kstep}
body.single-product table.variations{display:block!important;background:var(--k-panel);margin:24px -24px 0!important;padding:22px 24px 8px!important;width:auto!important}
body.single-product table.variations tbody{display:block}
body.single-product /* 所有板块标题：一个样式＝明朝 17px ＋ 陶土色步骤编号 */
table.variations th.label label,
body.single-product .ppom-input-pet_name > label.form-control-label,
body.single-product .kumoju-photo-field > .k-field-head,
body.single-product .ppom-field-wrapper:has(.ppom-input-gift_options) > .k-field-head{font-family:var(--kh)!important;font-size:20px!important;line-height:1.5!important;font-weight:600!important;letter-spacing:.04em!important}
body.single-product table.variations th.label label::before,
body.single-product .ppom-input-pet_name > label.form-control-label::before,
body.single-product .kumoju-photo-field > .k-field-head::before{counter-increment:kstep;content:counter(kstep,decimal-leading-zero);
  font-family:var(--kh);font-size:13px;font-weight:500;color:var(--k-accent);margin-right:10px;letter-spacing:.08em}
body.single-product .k-field-head em,
body.single-product .k-field-head small,
body.single-product .k-field-head span{font-family:var(--k-gothic)!important;font-weight:400!important}
body.single-product /* 白底上的板块：细线＋留白分开，不再是一整坨 */
.ppom-field-wrapper:has(.ppom-input-pet_name){padding-top:26px}
body.single-product section.k-proof{margin-top:34px!important}
body.single-product .kumoju-photo-field,
body.single-product .ppom-field-wrapper:has(.ppom-input-gift_options){border-top:1px solid var(--k-line);margin-top:30px!important;padding-top:28px!important}
body.single-product section.k-proof{min-height:0!important;padding-bottom:0!important;margin-bottom:0!important}
body.single-product .k-proof p:last-of-type{margin-bottom:0!important}
body.single-product .kumoju-photo-field{margin-top:26px!important}
body.single-product section.k-proof > *:empty{display:none!important}
body.single-product h3.k-proof-t,
body.single-product .k-field-head,
body.single-product table.variations th.label label{word-break:auto-phrase}
body.single-product .k-field-head em,
body.single-product .k-field-head small,
body.single-product .k-field-head span{display:block;margin:2px 0 0 34px;font-size:13px!important}
body.single-product h3.k-proof-t{font-size:22px!important;line-height:1.5!important;font-weight:600!important}
body.single-product .k-proof p{font-weight:400!important;line-height:1.8!important}
body.single-product label.form-check-label{font-size:15px!important;font-weight:400!important}
body.single-product .ppom-input-gift_options > label.form-control-label{font-family:var(--k-gothic)!important;font-size:15px!important}
body.single-product /* 选项格子：白底、小圆角、选中＝深色细框 */
.k-swatch{background:#fff!important;border:1px solid var(--k-line)!important;border-radius:4px!important;box-shadow:none!important}
body.single-product .k-swatch.is-active{background:#fff!important;border:1.5px solid #3F3A32!important}
body.single-product /* 確認稿：白卡＋顶上一道陶土色细线（唯一的装饰） */
section.k-proof{background:#fff!important;border:0!important;border-top:2px solid var(--k-accent)!important;border-radius:0!important;box-shadow:none!important}
body.single-product .k-proof-more{color:var(--k-accent)!important;text-decoration:underline;text-underline-offset:3px}
body.single-product /* 上传框・说明・礼品：白底、同一种细线，不再各有各的圆角 */
label.kumoju-upload{background:#fff!important;border-radius:4px!important;border-color:#CFC8BC!important}
body.single-product div.k-anypet{background:transparent!important;border:0!important;padding-left:0!important}
body.single-product .ppom-input-gift_options{background:#fff!important;border-radius:4px!important}
body.single-product .ppom-input-gift_options label.form-control-label{background:#fff!important}
body.single-product input[type=text],
body.single-product textarea{background:#fff!important;border-radius:4px!important}
body.single-product /* 点缀色收成一个 */
.k-pd-en{color:var(--k-accent)!important}
body.single-product .k-pd-en::before{background:var(--k-accent)!important}
body.single-product .k-pt-pill{background:#fff!important;border:1px solid var(--k-line)!important}
body.single-product .k-pt-pill i{background:var(--k-accent)!important}
body.single-product .k-ship-free{color:#3F3A32!important}
body.single-product .k-deliv{background:#fff!important;border:1px solid var(--k-line)!important;border-radius:4px!important}
body.single-product .k-deliv b{color:#3F3A32!important}
body.single-product .k-sku{background:#fff!important}
body.single-product .k-phototips summary,
body.single-product .k-phototips a{color:var(--k-accent)!important}
body.single-product .single_add_to_cart_button{border-radius:4px!important}
body.single-product /* 加购下面的四格入口 */
.k-links4{display:grid;grid-template-columns:1fr 1fr;margin:22px 0 4px;border-top:1px solid var(--k-line)}
body.single-product .k-links4 a{display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 6px;border-bottom:1px solid var(--k-line);color:#3F3A32;font-size:13px;letter-spacing:.06em;text-decoration:none}
body.single-product .k-links4 a:nth-child(odd){border-right:1px solid var(--k-line)}
body.single-product .k-links4 svg{width:24px;height:24px;stroke:#3F3A32;fill:none;stroke-width:1.4}
body.single-product /* ── v4：板块用「地色交替＋标题线」分开（7 站实测 2026-09-11） ── */
/* ① 送料無料：上下细线的小横幅（北欧暮らし・中川政七） */
.k-ship-line{background:#FAF7F2;border-top:1px solid #D9C7B5!important;border-bottom:1px solid #D9C7B5!important;
  text-align:center;padding:12px 10px!important;margin:10px 0 0!important}
body.single-product .k-ship-free{display:block!important;font-family:var(--kh)!important;font-size:19px!important;font-weight:600!important;
  color:var(--k-accent)!important;letter-spacing:.28em;margin:0 0 2px!important}
body.single-product .k-ship-lead{font-size:12px!important}
body.single-product /* ② 01〜04 都在灰底里：名前也包进去，用阴影把中间的白缝补上 */
table.variations{margin-bottom:0!important;padding-bottom:4px!important}
body.single-product /* 通栏色带：不动元素本身的位置，用 100vmax 的阴影铺到两边，再用 clip-path 只留自己的上下范围 */
.ppom-field-wrapper:has(.ppom-input-pet_name){background:var(--k-panel);padding-top:8px!important;padding-bottom:28px!important;
  box-shadow:0 0 0 100vmax var(--k-panel);clip-path:inset(-20px -100vmax 0 -100vmax)}
body.single-product table.variations{padding-bottom:10px!important}
body.single-product /* ③ 確認稿：通栏米灰带，标题居中、上下粗线（original-pet・北欧暮らし） */
section.k-proof{background:#EFEAE1!important;border:0!important;border-radius:0!important;
  margin:0!important;padding:30px 0!important;text-align:left;
  box-shadow:0 0 0 100vmax #EFEAE1!important;clip-path:inset(-20px -100vmax 0 -100vmax)}
body.single-product section.k-proof::before{content:"＼ KUMOJU のお約束 ／";display:block;text-align:center;
  font-family:var(--kh);font-size:14px;font-weight:600;letter-spacing:.12em;color:#5E5347;margin-bottom:10px}
body.single-product h3.k-proof-t{text-align:center!important;font-size:20px!important;border-top:2px solid #C9B8A3;border-bottom:2px solid #C9B8A3;
  padding:12px 0!important;margin:0 0 18px!important}
body.single-product /* ④ 05 写真＝白、ギフト＝灰，交替 */
.kumoju-photo-field{border-top:0!important;margin-top:8px!important;padding-top:30px!important}
body.single-product .ppom-field-wrapper:has(.ppom-input-gift_options){background:var(--k-panel);border-top:0!important;
  margin-top:30px!important;padding-top:28px!important;padding-bottom:30px!important;
  box-shadow:0 0 0 100vmax var(--k-panel);clip-path:inset(0 -100vmax)}

body.single-product /* ══ 第 5 版 ══ */
/* ── 大板块 B「この品について」：暖米色通栏 ── */
.product-tabs-wrapper{background:#F6F1E9!important;box-shadow:0 0 0 100vmax #F6F1E9;clip-path:inset(0 -100vmax);padding:34px 0 30px!important;margin-top:40px!important}
body.single-product .product-tabs-wrapper .wd-accordion-item{background:transparent!important}
body.single-product /* 板块总标题（ABOUT / この品について、お客さまの声）：居中，上下细线 */
.product-tabs-wrapper .wd-accordion-title{justify-content:center!important;text-align:center!important;border:0!important}
body.single-product .product-tabs-wrapper .wd-accordion-title .wd-accordion-title-text,
body.single-product .product-tabs-wrapper .wd-accordion-title span{font-family:"Kaisei Tokumin",serif!important;font-size:22px!important;font-weight:600!important;letter-spacing:.12em}
body.single-product /* ── B 里的小板块：一个卖点＝一张白卡 ── */
.k5-card{background:#fff;border-radius:6px;padding:22px 18px 20px;margin:0 0 16px;box-shadow:0 1px 0 rgba(90,70,50,.06)}
body.single-product /* 卖点标题：去掉原来的双下划线／爪印，只留一条 28px 的陶土色短线 */
.k5-card .k-dsh{border:0!important;box-shadow:none!important;text-decoration:none!important;
  background:linear-gradient(#9A6B55,#9A6B55) 0 100%/28px 2px no-repeat!important;
  padding:0 0 12px!important;margin:0 0 14px!important;font-size:19px!important;line-height:1.5!important}
body.single-product .k5-card .k-dsh::before,
body.single-product .k5-card .k-dsh::after,
body.single-product .k5-card .k-dsh *::before,
body.single-product .k5-card .k-dsh *::after{display:none!important}
body.single-product .k5-card .k-dsh *{border:0!important;background:none!important;box-shadow:none!important}
body.single-product .k5-pt{display:block;font-family:"Kaisei Tokumin",serif;font-size:12px;letter-spacing:.2em;color:#9A6B55;margin-bottom:4px}
body.single-product /* 章（仕様・ご注意・よくあるご質問）：标题居中上下粗线，内容也放白卡 */
.k5-chap{background:#fff;border-radius:6px;padding:4px 18px 18px;margin:26px 0 16px}
body.single-product .k5-chap > .k-dh{display:block!important;text-align:center!important;font-size:20px!important;border-top:2px solid #C9B8A3!important;border-bottom:2px solid #C9B8A3!important;
  padding:12px 0!important;margin:16px 0 14px!important;background:none!important}
body.single-product .k5-chap > .k-dh::before,
body.single-product .k5-chap > .k-dh::after{display:none!important}
body.single-product .k5-chap .k-spec-row:nth-child(odd){background:#FAF8F4}
body.single-product .k5-chap details{border-bottom:1px solid #EEE8DF}
body.single-product /* ── banner（通用）：字是网页文字，装饰是线条画 ── */
.k5-bn{position:relative;overflow:hidden;border-radius:6px;text-align:center}
body.single-product .k5-bn .ey{display:block;font-family:"Kaisei Tokumin",serif;font-size:11px;letter-spacing:.3em;color:#9A6B55;margin-bottom:6px}
body.single-product .k5-bn .tt{display:block;font-family:"Kaisei Tokumin",serif;font-weight:600;color:#3F3A32}
body.single-product .k5-bn svg.deco{position:absolute;opacity:.9;pointer-events:none}
body.single-product /* ① ご注文の流れ（B 的开头） */
.k5-flow{background:linear-gradient(160deg,#FFFFFF 0%,#FBF6EE 100%);border:1px solid #E6DACB;padding:22px 16px 20px;margin:0 0 22px}
body.single-product .k5-flow .tt{font-size:19px;line-height:1.55;margin-bottom:16px}
body.single-product .k5-steps{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:start;gap:4px}
body.single-product .k5-steps .st{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px;line-height:1.5;color:#3F3A32}
body.single-product .k5-steps .st b{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:#fff;border:1px solid #E0D2C0}
body.single-product .k5-steps .st b svg{width:26px;height:26px;stroke:#9A6B55;fill:none;stroke-width:1.4}
body.single-product .k5-steps .st i{font-style:normal;font-family:"Kaisei Tokumin",serif;font-size:11px;color:#9A6B55;letter-spacing:.1em}
body.single-product .k5-steps .ar{color:#C9B8A3;font-size:14px;margin-top:18px}
body.single-product .k5-flow .more{display:inline-block;margin-top:14px;font-size:12px;color:#9A6B55;text-decoration:underline;text-underline-offset:3px}
body.single-product .k5-flow svg.deco{right:-8px;top:-6px;width:74px;height:74px}
body.single-product .k5-flow svg.deco2{left:-10px;bottom:-12px;width:64px;height:64px;transform:scaleX(-1)}
body.single-product /* ② 送料無料（A，替换第 4 版的细线横幅） */
.k-ship-line{position:relative;overflow:hidden;background:linear-gradient(90deg,#FBF7F1,#F6EFE4)!important;border:1px solid #E3D5C3!important;border-radius:6px;padding:16px 46px 16px!important}
body.single-product .k-ship-line .k-ship-lead{font-size:11.5px!important;line-height:1.7!important;word-break:auto-phrase}
body.single-product .k-ship-line::before{content:"FREE SHIPPING";display:block;font-family:"Kaisei Tokumin",serif;font-size:10px;letter-spacing:.35em;color:#9A6B55;margin-bottom:2px}
body.single-product .k-ship-line .k5-sprig{position:absolute;right:4px;bottom:-4px;width:42px;height:42px;stroke:#C9B8A3;fill:none;stroke-width:1.2;opacity:.9}
body.single-product .k-ship-line .k5-sprig.l{left:6px;right:auto;transform:scaleX(-1)}
body.single-product /* ③ レビュー 50 ポイント（C 的开头） */
.k5-rv{background:linear-gradient(120deg,#9A6B55,#B8876F);color:#fff;padding:18px 16px;margin:6px 0 18px;display:flex;align-items:center;gap:14px;text-align:left}
body.single-product .k5-rv b{flex:none;display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.18)}
body.single-product .k5-rv b svg{width:26px;height:26px;stroke:#fff;fill:none;stroke-width:1.4}
body.single-product .k5-rv .tt{color:#fff;font-size:16px;line-height:1.5}
body.single-product .k5-rv .tt em{font-style:normal;font-size:24px;letter-spacing:.04em}
body.single-product .k5-rv small{display:block;font-size:11.5px;opacity:.9;margin-top:2px}
body.single-product /* ── 大板块 C：评论＝白底 ── */
.k5-reviews{background:#FFFFFF;box-shadow:0 0 0 100vmax #FFFFFF;clip-path:inset(0 -100vmax);padding:30px 15px 20px!important;margin-top:24px!important}
body.single-product .k5-reviews .wd-accordion-title{justify-content:center!important;border:0!important}
body.single-product .k5-reviews .wd-accordion-title *{font-family:"Kaisei Tokumin",serif!important;font-size:22px!important;font-weight:600!important;letter-spacing:.12em;text-align:center}
body.single-product .k5-reviews .wd-accordion-opener{display:none!important}
body.single-product .related-and-upsells{padding-left:15px!important;padding-right:15px!important}
body.single-product /* ── 大板块 D：相关商品＝灰米色，页脚＝深色 ── */
.related-and-upsells{background:#ECE8E1!important;box-shadow:0 0 0 100vmax #ECE8E1;clip-path:inset(0 -100vmax);padding:30px 0 24px!important}
body.single-product .related-and-upsells h2,
body.single-product .related-and-upsells .title{text-align:center!important;font-family:"Kaisei Tokumin",serif!important;font-size:20px!important;letter-spacing:.12em}
body.single-product footer.k-sfoot{background:#3F3A32!important;color:#EDE7DE!important}
body.single-product footer.k-sfoot *{color:#EDE7DE!important;border-color:rgba(255,255,255,.2)!important}
body.single-product /* ══ 第 6 版：一个大板块＝一个底色（用户 2026-09-11「不要一个版块里用多个底色」） ══ */
/* A：加购区只用白，里面的灰带／米带全部拿掉，改用细线分组 */
table.variations,
body.single-product .ppom-field-wrapper:has(.ppom-input-pet_name),
body.single-product section.k-proof,
body.single-product .ppom-field-wrapper:has(.ppom-input-gift_options){background:transparent!important;box-shadow:none!important;clip-path:none!important}
body.single-product table.variations{margin:26px 0 0!important;padding:26px 0 0!important;border-top:1px solid var(--k-line)!important}
body.single-product .ppom-field-wrapper:has(.ppom-input-pet_name){padding-top:6px!important;padding-bottom:26px!important}
body.single-product section.k-proof{border-top:1px solid var(--k-line)!important;padding:30px 0 28px!important}
body.single-product .kumoju-photo-field{border-top:1px solid var(--k-line)!important;margin-top:0!important}
body.single-product .ppom-field-wrapper:has(.ppom-input-gift_options){border-top:1px solid var(--k-line)!important;margin-top:28px!important}
body.single-product /* B：卖点连续排（用户「这里不适合断开」）＝ 编号＋标题＋短线，段与段之间只用留白 */
.product-tabs-wrapper .k5-pt{display:block;margin-top:46px}
body.single-product .product-tabs-wrapper .k-dsh{border:0!important;box-shadow:none!important;text-decoration:none!important;
  background:linear-gradient(#9A6B55,#9A6B55) 0 100%/28px 2px no-repeat!important;
  padding:0 0 12px!important;margin:0 0 16px!important;font-size:19px!important;line-height:1.5!important}
body.single-product .product-tabs-wrapper .k-dsh::before,
body.single-product .product-tabs-wrapper .k-dsh::after,
body.single-product .product-tabs-wrapper .k-dsh *::before,
body.single-product .product-tabs-wrapper .k-dsh *::after{display:none!important}
body.single-product .product-tabs-wrapper .k-dsh *{border:0!important;background:none!important;box-shadow:none!important}
body.single-product /* 章：不再是白卡，只留居中＋上下线的标题；仕様表不用条纹底，只用细线 */
.k5-chap{background:transparent!important;padding:0!important;margin:52px 0 0!important;border-radius:0!important;box-shadow:none!important}
body.single-product .k5-chap .k-spec-row,
body.single-product .k5-chap .k-spec-row:nth-child(odd){background:transparent!important;border-bottom:1px solid #E2D8CA!important}
body.single-product /* D：相关商品和页脚同一个底色，中间的白缝也铺满 */
.related-and-upsells{clip-path:inset(0 -100vmax -320px -100vmax)!important}
body.single-product .related-and-upsells [class*=title],
body.single-product .related-and-upsells h2,
body.single-product .related-and-upsells h3{text-align:center!important;justify-content:center!important;width:100%}
body.single-product footer.k-sfoot{border-top:1px solid #D8D0C4!important;position:relative;z-index:2}
body.single-product section.k-proof{padding-left:8px!important;padding-right:8px!important}
body.single-product footer.k-sfoot,
body.single-product footer.k-sfoot *{color:#3F3A32!important;border-color:#CFC6B8!important}
body.single-product /* ══ 第 7 版（用户：banner 融进米色、POINT 没有断开样式、章节一大片 → 参照 original-pet fluffy-cushion50） ══ */
/* ① ご注文の流れ：白卡＋陶土色标题带 */
.k5-flow{background:#fff!important;border:0!important;border-radius:10px!important;padding:0!important;overflow:hidden;
  box-shadow:0 2px 12px rgba(90,70,50,.10)!important;margin:0 0 8px!important}
body.single-product .k5-flow .hd{background:#9A6B55;padding:14px 12px 13px;text-align:center}
body.single-product .k5-flow .hd .ey{color:#F2E4D6!important;margin-bottom:2px}
body.single-product .k5-flow .hd .tt{color:#fff!important;font-size:21px!important;letter-spacing:.12em;margin:0!important;line-height:1.4}
body.single-product .k5-flow .bd{padding:18px 12px 18px}
body.single-product .k5-flow .lead{font-family:"Kaisei Tokumin",serif;font-size:16px;font-weight:600;color:#3F3A32;text-align:center;margin:0 0 16px}
body.single-product .k5-steps .st b{background:#FBF6EF!important;border:1.5px solid #E4D2BF!important}
body.single-product .k5-steps .st i{background:#9A6B55;color:#fff!important;border-radius:999px;padding:2px 10px;font-size:10.5px!important}
body.single-product .k5-steps .ar{color:#9A6B55!important;font-size:18px!important}
body.single-product /* ② POINT 的断开：大号明朝数字＋POINT＋伸到右边的细线 */
.product-tabs-wrapper .k5-pt{display:flex!important;align-items:flex-end;gap:10px;margin:56px 0 12px!important;letter-spacing:0}
body.single-product .k5-pt b{font-family:"Kaisei Tokumin",serif;font-size:40px;font-weight:500;line-height:.9;color:#9A6B55}
body.single-product .k5-pt span{font-family:"Kaisei Tokumin",serif;font-size:11px;letter-spacing:.3em;color:#9A6B55;padding-bottom:3px}
body.single-product .k5-pt i{flex:1;height:1px;background:#CDBFAC;margin-bottom:7px}
body.single-product .product-tabs-wrapper .k-dsh{background:none!important;padding:0!important;font-size:20px!important}
body.single-product /* ③ 章：面板＋「日文小字／英文大字」（仕様＝深米，ご注意・Q&A＝浅米，连成一块） */
.k5-chap{margin:56px -7px 0!important;padding:40px 18px 34px!important;border-radius:0!important}
body.single-product .k7-spec{background:#DDD2C2!important}
body.single-product .k7-notes,
body.single-product .k7-faq{background:#E9E3DA!important;margin-top:0!important}
body.single-product .k7-faq{padding-top:14px!important;padding-bottom:30px!important}
body.single-product .k5-chap > .k-dh{border:0!important;padding:0!important;margin:0 0 24px!important;text-align:center!important}
body.single-product .k5-chap > .k-dh .jp{display:block;font-family:var(--k-gothic);font-size:13px;font-weight:700;letter-spacing:.12em;color:#3F3A32}
body.single-product .k5-chap > .k-dh .en{display:block;font-family:"Kaisei Tokumin",serif;font-size:30px;font-weight:600;letter-spacing:.08em;color:#2E2923;margin-top:2px;line-height:1.3}
body.single-product /* 規格表：左列灰、右列浅米、细框线 */
.k7-spec .k-spec{border:1px solid #CFC4B4;background:#fff}
body.single-product .k7-spec .k-spec-row{display:grid!important;grid-template-columns:96px 1fr;gap:0!important;padding:0!important;background:transparent!important}
body.single-product .k7-spec .k-spec-row > span{margin:0!important;width:auto!important;max-width:none!important}
body.single-product .k7-spec .k-spec-row:last-child{border-bottom:0!important}
body.single-product .k7-spec .k-spec-row > span:first-child{background:#EAE5DD;display:flex;align-items:center;justify-content:center;text-align:center;
  padding:12px 6px;font-size:13px;font-weight:700;color:#5A4C3F}
body.single-product .k7-spec .k-spec-row > span:last-child{background:#F8F6F2;padding:12px;font-size:14px;line-height:1.7;text-align:left!important;color:#4A4036}
body.single-product /* ご注意：白卡＋色带标题 */
.k7-note-card{background:#fff;border:2px solid #E6CDB5;border-radius:10px;overflow:hidden}
body.single-product .k7-note-card .nh{background:#EFDCC8;text-align:center;font-family:"Kaisei Tokumin",serif;font-weight:600;font-size:17px;padding:12px 8px;color:#3F3A32}
body.single-product .k7-note-card ul.k-notes{margin:0!important;padding:16px 18px 16px 34px!important}
body.single-product /* FAQ：一问一条色块 */
.k7-faq details{border:0!important;background:#D8CCBA;margin:0 0 10px;border-radius:2px}
body.single-product .k7-faq summary{padding:15px 14px!important;font-size:15px!important;font-weight:600!important;color:#3F3A32}
body.single-product .k7-faq .k-faq-a{background:#fff;padding:14px!important;font-size:14px!important}
body.single-product /* 结尾：倒三角「ご注文はこちらから」（参照「ご購入はこちらから」） */
.k7-cta{display:block;margin:0 -7px 10px;background:#E9E3DA;text-align:center;padding:14px 10px 48px;
  clip-path:polygon(0 0,100% 0,100% 58%,50% 100%,0 58%);text-decoration:none!important}
body.single-product .k7-cta .nm{display:block;font-family:"Kaisei Tokumin",serif;font-size:14px;letter-spacing:.1em;color:#5A4C3F}
body.single-product .k7-cta .go{display:block;font-family:"Kaisei Tokumin",serif;font-size:22px;font-weight:600;color:#2E2923;margin-top:4px}
body.single-product /* ══ 第 8 版（用户：「从产品标题到详情图之前一片白，要和下半部分协调」）＝ 把下半部的设计语言搬上来 ══ */
/* ① 送料無料：和「ご注文の流れ」同款 ＝ 白卡＋陶土色标题带 */
.k-ship-line{background:#fff!important;border:0!important;border-radius:10px!important;overflow:hidden;
  padding:0 12px 14px!important;box-shadow:0 2px 12px rgba(90,70,50,.10)!important}
body.single-product .k-ship-line::before{background:#9A6B55;color:#fff!important;margin:0 -12px 10px!important;padding:7px 0 6px;letter-spacing:.35em!important;font-size:10.5px!important}
body.single-product .k-ship-line .k5-sprig{display:none!important}
body.single-product /* ② 购买区（01〜ギフト）整块放进暖米面板（Hacoa 购买区一色／下半部章节面板） */
form.variations_form{background:#F4EEE5!important;margin:22px -10px 0!important;padding:22px 10px 26px!important}
body.single-product table.variations{border-top:0!important;margin-top:0!important;padding-top:0!important;background:transparent!important}
body.single-product .kumoju-photo-field,
body.single-product .ppom-field-wrapper:has(.ppom-input-gift_options){border-top-color:#DDD3C5!important}
body.single-product /* ③ 步骤标题：和 POINT 同款「大号数字＋STEP＋细线」，旧的小号编号去掉 */
table.variations th.label label::before,
body.single-product .ppom-input-pet_name > label.form-control-label::before,
body.single-product .kumoju-photo-field > .k-field-head::before{display:none!important;content:none!important}
body.single-product .k8-step{display:flex;align-items:flex-end;gap:10px;margin:24px 0 8px}
body.single-product table.variations tr:first-child .k8-step{margin-top:0}
body.single-product .k8-step b{font-family:"Kaisei Tokumin",serif;font-size:30px;font-weight:500;line-height:.9;color:#9A6B55}
body.single-product .k8-step span{font-family:"Kaisei Tokumin",serif;font-size:10.5px;letter-spacing:.3em;color:#9A6B55;padding-bottom:3px}
body.single-product .k8-step i{flex:1;height:1px;background:#CDBFAC;margin-bottom:6px}
body.single-product .k-field-head em,
body.single-product .k-field-head small,
body.single-product .k-field-head span{margin-left:0!important}
body.single-product /* ④ 確認稿：和「ご注意」同款 ＝ 白卡＋浅陶土色标题带 */
section.k-proof{background:#fff!important;border:2px solid #E6CDB5!important;border-radius:10px!important;overflow:hidden;
  padding:0 0 18px!important;margin:26px 0 4px!important}
body.single-product section.k-proof::before{background:#EFDCC8;margin:0!important;padding:14px 0 0}
body.single-product h3.k-proof-t{background:#EFDCC8!important;border:0!important;margin:0 0 16px!important;padding:4px 12px 14px!important;font-size:19px!important}
body.single-product .k-proof p,
body.single-product .k-proof .k-proof-more{padding:0 16px!important}
body.single-product .k-proof .k-proof-more{display:inline-block}
body.single-product /* 修：01〜03 的编号插在 th 里，th 是横排 → 改成竖排，编号占满一行（细线才伸得出来） */
table.variations th.label{display:block!important;width:100%!important}
body.single-product table.variations th.label .k8-step{width:100%}
body.single-product /* 修：tr 还是 table-row → th 被包进收缩宽度的匿名单元格，细线伸不出来；tr／td 也改成块 */
table.variations tr,
body.single-product table.variations td.value{display:block!important;width:100%!important}
body.single-product table.variations th.label .k8-step{display:flex!important;flex-wrap:nowrap!important;align-items:flex-end!important}
body.single-product table.variations th.label .k8-step i{display:block;flex:1 1 auto;min-width:40px}
body.single-product /* 修：链接在段落里，段落和链接各加一次左边距 → 链接自己的去掉 */
.k-proof p .k-proof-more{padding:0!important}
body.single-product /* ══ 第 9 版（用户：「上半部分就应该白色是主色调」）＝ 去掉购买区的暖米面板，其余第 8 版的元素保留 ══ */
form.variations_form{background:transparent!important;margin:22px 0 0!important;padding:0!important}
body.single-product /* ══ 第 10 版（用户：「白色为主，banner 和加购选中的那些有设计感一点，但与下面的整体搭」）
      ＝ 零件统一用下半部已有的三样：陶土色 #9A6B55／浅陶土色带 #EFDCC8／米色圆底 #F6EEE5 ══ */
/* ① 选项格子：未选＝暖色细框；已选＝陶土框＋浅米底＋光晕＋右上 ✓ 圆章 */
.k-swatch{border:1px solid #E4D9CB!important;border-radius:8px!important;background:#fff!important;
  box-shadow:0 1px 2px rgba(90,70,50,.06)!important;position:relative;overflow:visible!important}
body.single-product .k-swatch.is-active{border:1.5px solid #9A6B55!important;background:#FBF5EE!important;box-shadow:0 0 0 3px rgba(154,107,85,.12)!important}
body.single-product .k-swatch.is-active::after{content:"✓";position:absolute;top:-8px;right:-8px;width:20px;height:20px;border-radius:50%;
  background:#9A6B55;color:#fff;font-size:11px;font-weight:700;line-height:20px;text-align:center;box-shadow:0 1px 3px rgba(0,0,0,.15)}
body.single-product /* ② 名前输入框 */
.ppom-input-pet_name input[type=text]{border:1px solid #E4D9CB!important;border-radius:8px!important;padding:14px!important;box-shadow:none!important}
body.single-product .ppom-input-pet_name input[type=text]:focus{border-color:#9A6B55!important;box-shadow:0 0 0 3px rgba(154,107,85,.12)!important}
body.single-product /* ③ 上传框：陶土色虚线＋极浅米底，图标进米色圆 */
label.kumoju-upload{border:1.5px dashed #D2B9A3!important;background:#FFFCF8!important;border-radius:10px!important}
body.single-product label.kumoju-upload svg{box-sizing:content-box;padding:11px;background:#F6EEE5;border-radius:50%;width:24px!important;height:24px!important}
body.single-product /* ④ ギフト卡片：顶部浅陶土色带（和 確認稿・ご注意 同款） */
.ppom-input-gift_options{border:2px solid #E6CDB5!important;border-radius:10px!important;overflow:hidden}
body.single-product .ppom-input-gift_options > label.form-control-label{background:#EFDCC8!important;justify-content:center;text-align:center;
  font-family:"Kaisei Tokumin",serif!important;font-size:17px!important;font-weight:600!important;padding:12px 8px!important;border:0!important}
body.single-product .ppom-noshi,
body.single-product .ppom-input-noshi label.form-check-label{border-radius:8px!important}
body.single-product /* ⑤ お届け目安・四格入口：图标进米色圆（和「ご注文の流れ」的步骤图标同款） */
.k-deliv{border:1px solid #E4D9CB!important;border-radius:10px!important;align-items:center}
body.single-product .k-deliv > svg{box-sizing:content-box;padding:10px;background:#F6EEE5;border-radius:50%;color:#9A6B55;stroke:#9A6B55}
body.single-product .k-links4 svg{box-sizing:content-box;padding:10px;background:#F6EEE5;border-radius:50%;stroke:#9A6B55!important}
body.single-product .k-links4{border-top-color:#E4D9CB!important}
body.single-product .k-links4 a{border-color:#E4D9CB!important}
body.single-product .k-assure span{color:#5A4C3F!important}
body.single-product /* ⑥ FREE SHIPPING：色带下左右两栏，左＝卡车图标（米色圆） */
.k-ship-line{display:grid!important;grid-template-columns:56px 1fr;column-gap:14px;align-items:center;text-align:left!important;padding:0 16px 14px!important}
body.single-product .k-ship-line::before{grid-column:1/-1;margin:0 -16px 12px!important;text-align:center}
body.single-product .k-ship-line .k9-ic{grid-column:1;grid-row:2/span 2;width:56px;height:56px;border-radius:50%;background:#F6EEE5;display:flex;align-items:center;justify-content:center}
body.single-product .k-ship-line .k9-ic svg{width:30px;height:30px;stroke:#9A6B55;fill:none;stroke-width:1.4}
body.single-product .k-ship-line .k-ship-free{grid-column:2;text-align:left!important;letter-spacing:.2em!important;font-size:20px!important;margin:0!important}
body.single-product .k-ship-line .k-ship-lead{grid-column:2;text-align:left!important}
body.single-product /* ⑦ 確認稿：右上角「追加料金なし」圆章（正文里原有的一句，不是新承诺） */
section.k-proof{position:relative;overflow:visible!important}
body.single-product .k9-badge{position:absolute;top:-12px;right:-6px;width:62px;height:62px;border-radius:50%;background:#9A6B55;color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:"Kaisei Tokumin",serif;font-weight:600;
  font-size:10.5px;line-height:1.3;text-align:center;box-shadow:0 2px 6px rgba(90,60,40,.25);transform:rotate(8deg)}
body.single-product .k9-badge b{font-size:13px;letter-spacing:.05em}
/* ══ 第 11 版（用户：「加购板块放到一堆」）＝ 「要填的」醒目、「要读的」降级
      参照：original-pet 下单表单（每组同一种标题＋小字说明在组末）／Hacoa（补充信息和输入项分开） ══
   ⚠️ もとは この注釈の前に «body.single-product» が付いていて、直後の .k11-map に掛かっていた。
      2026-09-12 に .k11-map を消したとき、その前置きだけが残ると
      次の規則が «body.single-product body.single-product .k8-step» になって 永久に一致しなくなる。 */
/* ① 步骤进度条は 2026-09-12 に撤去（10 店中 0 店。js の rdMap() と一緒に消した）。
   ⚠️ 戻すときは git 履歴から .k11-map の規則一式と rdMap()／rdMapState() を両方戻す。 */
body.single-product /* ② 「要填的」：步骤之间多留空 */
.k8-step{margin-top:34px!important}
body.single-product table.variations tr:first-child .k8-step{margin-top:0!important}
body.single-product .ppom-field-wrapper:has(.ppom-input-pet_name){padding-bottom:0!important}
body.single-product /* ③ 「要读的」確認稿：压扁（标题一行、只留第一段） */
section.k-proof{margin:28px 0 0!important;padding-bottom:14px!important}
body.single-product section.k-proof::before{padding-top:10px!important;font-size:12px!important}
body.single-product h3.k-proof-t{font-size:16px!important;padding:2px 12px 10px!important;margin-bottom:12px!important;line-height:1.5!important}
body.single-product .k-proof-lead{font-size:13.5px!important;line-height:1.75!important;margin-bottom:0!important}
body.single-product .k-proof-note{display:none!important}
body.single-product section.k-proof .k-proof-more.k11-more{display:inline-block!important;margin:8px 16px 0!important;padding:0!important;font-size:13px!important;color:#9A6B55!important;text-decoration:underline;text-underline-offset:3px}
body.single-product .k9-badge{width:50px!important;height:50px!important;font-size:9px!important;top:-10px!important;right:-4px!important}
body.single-product .k9-badge b{font-size:11px!important}
body.single-product /* ④ 「要读的」05 下面三块说明：收进一个细框、小字、虚线分隔 */
.k11-sub{margin-top:16px;border:1px solid #EEE6DB;border-radius:8px;padding:12px 14px;background:#fff}
body.single-product .k11-sub > *{margin:0!important;font-size:13px!important;line-height:1.7!important}
body.single-product .k11-sub > :not(.k-line-row){padding:0!important}
body.single-product .k11-sub > * + *{margin-top:10px!important;padding-top:10px!important;border-top:1px dashed #EAE0D3!important}
body.single-product .k11-sub .k-line-row label{font-size:14px!important}
body.single-product /* ══ 第 12 版（用户：「是不是缩减了文案」「步骤带数字的不要搞那么大，包括详情页的 point 数字，小一点设计」） ══ */
/* ① 確認稿第二段恢复 */
.k-proof-note{display:block!important;font-size:13.5px!important;line-height:1.75!important;margin-top:10px!important;padding:0 16px!important}
body.single-product /* ② STEP：陶土色实心小圆（和进度条同款 24px）＋ STEP ＋ 细线 */
.k8-step{align-items:center!important;gap:8px!important}
body.single-product .k8-step b{width:24px;height:24px;border-radius:50%;background:#9A6B55;color:#fff!important;display:flex;align-items:center;justify-content:center;
  font-family:"Kaisei Tokumin",serif;font-size:12px!important;font-weight:600!important;line-height:1!important;flex:none}
body.single-product .k8-step span{padding-bottom:0!important;font-size:10.5px!important}
body.single-product .k8-step i{margin-bottom:0!important}
body.single-product table.variations th.label .k8-step{align-items:center!important}
body.single-product /* ③ POINT：数字 40px → 20px，和 POINT、细线居中对齐 */
.product-tabs-wrapper .k5-pt{align-items:center!important;gap:8px!important;margin:48px 0 10px!important}
body.single-product .k5-pt b{font-size:20px!important;line-height:1!important;font-weight:600!important}
body.single-product .k5-pt span{padding-bottom:0!important}
body.single-product .k5-pt i{margin-bottom:0!important}

/* ── 商品页改版：预览では JS で 1 つずつ変えていたところを CSS で ── */
/* 页脚＝相关商品と同じ灰米（«一个大板块一个底色»。D＝相关商品＋页脚） */
body.single-product footer.k-sfoot{background:#ECE8E1!important}
/* 主图ギャラリー・缩略图・返品の枠・外枠：米色が残っていたら白に（上半＝白が主） */
body.single-product .website-wrapper,
body.single-product .site-content,
body.single-product .wd-carousel-container.wd-gallery-images,
body.single-product .k-thumb,
body.single-product .k-return{background-color:#fff!important}
/* お客さまの声：既存の「📷 お写真つきレビュー投稿で 50ポイント プレゼント」（inc/kumoju-reviews.php:766）を
   その場で banner の見た目に。⚠️ 文言・並び（「レビューを書く」の後＝後押し）は変えない */
body.single-product .k-rv-point{background:linear-gradient(120deg,#9A6B55,#B8876F)!important;color:#fff!important;border:0!important;
  border-radius:6px!important;padding:16px!important;font-family:"Kaisei Tokumin",serif!important;font-size:15px!important;
  font-weight:600!important;line-height:1.6!important;text-align:center!important;word-break:auto-phrase;box-shadow:0 2px 10px rgba(90,60,40,.15)}
body.single-product .k-rv-point b{color:#fff!important;font-size:20px!important;letter-spacing:.04em}
/* 送料の «全国送料無料 / 発送目安» の区切り「/」（inc/kumoju-legal.php:381）。
   元は 400px 以下だけ隠していた（L7030）が、改版後は 2 行に積むので常に不要 —— 430px の iPhone や PC で「/」が浮いていた */
body.single-product .k-ship-line .k-ship-sep{display:none!important}

/* ══ 第 13 版（2026-09-12：34 件の商品ページを一括で測って直した分）══
   ⚠️ ここも «後ろが勝つ» の続き。第 12 版までの規則を上書きしている。 */

/* ① 進度条の «桝が 5 に決め打ち» の直しは、進度条ごと撤去したので不要になった（2026-09-12 夜）。 */

/* ② 「刻む内容」のカード（buildEngraveBox）を使う商品は、番号をカードの外に出した（JS 側）。
      カードの見出し «刻む内容» が STEP の下に来ないようにする。
      ＝ 該当 5 件：brass-tag／garden-plaque／whisker-case／keepsake-box／memorial-stand
      ⚠️ 出した先（.form-row）は flex なので、指定しないと STEP が «内容ぶんの幅» になり、
         伸びるはずの細線（i は flex:1）が 0 幅に潰れる。どこに置いても全幅にしておく
         （flex の子でないところでは この行は無視される）。 */
body.single-product .k8-step{flex:0 0 100%;max-width:100%}

/* ③ 写真を預からない商品（背景：写真なし ＝ whisker-case・keepsake-box）の 4 マス入口。
      「お写真の選び方」が並んでいると、写真が要る品だと読まれる —— FAQ で
      わざわざ «お写真は必要ですか？» と打ち消しているのと矛盾する。JS 側で 3 マスにする。 */
body.single-product .k-links4--3{grid-template-columns:repeat(3,1fr)}
body.single-product .k-links4--3 a{border-right:1px solid var(--k-line)}
body.single-product .k-links4--3 a:last-child{border-right:0}

/* ④ 「お客さまの声」は .woocommerce-tabs の外に出してあるので、PC でも左右 15px しか
      余白が無く、画面いっぱいに広がっていた（実測 1440px で x15 w1410。
      ほかの大板块は x112 w1216）。中身だけ本文の幅で止める。 */
body.single-product .k5-reviews > *{max-width:1222px;margin-inline:auto}

@media (min-width:1025px){
  /* ⑤ PC では Woodmart が «説明／追加情報／お客さまの声» のタブ帯を出し、
        代わりに accordion の見出し（この品について）を display:none にする。
        改版後の版面ではその帯が素のまま浮き、しかも «追加情報» は
        中身を隠した空タブ（.k-tab-hidden）＝ 押しても何も出ない。
        帯を消して、スマホと同じ «この品について» の見出しを出す。 */
  body.single-product .product-tabs-wrapper .wd-nav-wrapper{display:none!important}
  body.single-product .product-tabs-wrapper .wd-accordion-item:not(.k-tab-hidden) > .wd-accordion-title{display:flex!important}
  /* ⚠️ 見出しを出すと 右端に «畳む» の矢印まで出る。PC の item には .k-open が付かない
        （＝ 1667 行の «常に開いた状態» の規則が効かない）ので、ここで同じことをする。
        畳めない板に矢印が有ると «押せるのに何も起きない» になる。 */
  body.single-product .product-tabs-wrapper .wd-accordion-opener{display:none!important}
  body.single-product .product-tabs-wrapper .wd-accordion-item > .wd-accordion-title{pointer-events:none;cursor:default}
}

/* ══ 第 14 版（2026-09-12 夜：ペットのカスタマイズ品を売る独立店 10 店の «並び» 実測に合わせる）══
   正本：docs/pdp-element-order-survey-2026-09-12.md
   ⚠️ 動かしたのは «位置と見た目» だけ。ページの文章は一字も消していない。 */

/* ① 入力欄の区切り：丸い番号と «STEP» の語をやめた（10 店中 0 店が番号を振る）。
      線の位置と見た目は 第 15 版で作り直している。 */

/* ② 返品・交換を «ご注意» の章へ移した（js の rdReturn()）。
      浅米の面板の中で «ご注文の前にお読みください» の白カードと対に見えるよう、枠を揃える。 */
body.single-product .k-return--inchap{margin:16px 0 0!important;border:2px solid #E6CDB5!important;border-radius:10px!important}

/* ③ 章の終わりの「ご注文はこちらから」。
      参照店では この札の真下に注文フォームがあるので «下向きの三角» が正しいが、
      うちはフォームがページ上部にあるので «上へ戻る» 動きになる —— 三角は嘘になる。
      ⚠️ 札そのものは残す：フォームが上にある長いページ（dez 13825px）でも
         «アイテム選択にもどる» の導線が末尾に置かれている（実測 y11941 ＝ 86%）。
      三角をやめて、中央の押しボタンにする。PC で 1216px の巨大な楔になっていたのも これで直る。 */
body.single-product .k7-cta{clip-path:none!important;background:#9A6B55!important;border-radius:10px;
  max-width:340px;margin:10px auto 4px!important;padding:13px 16px 15px!important;
  box-shadow:0 2px 10px rgba(90,60,40,.18)}
body.single-product .k7-cta .nm{color:#F2E4D6!important;font-size:12px!important}
body.single-product .k7-cta .go{color:#fff!important;font-size:18px!important;margin-top:3px!important}
@media (min-width:1025px){
  body.single-product .k7-cta{max-width:420px}
}

/* ══ 第 15 版（2026-09-12 深夜、用户「变丑了很多」）══
   第 14 版で番号を落としたとき、線だけが «見出しの上» に残った。
   前後に 50〜90px の空きがあるので «何にも付いていない区切り» に見え、
   しかも 上半分から 陶土色が全部消えて 白と灰色だけになっていた。
   直し方は 参照店に戻して測った ——
   original-pet の注文フォームは «見出し（色つき）＋ すぐ下の太い下線» で、
   線は «組の終わり» ではなく «組の始まり» を示している（時計のカラー／
   ペットのお名前・文字入れ／ラッピング の 3 組とも同じ）。
   下半分の POINT 見出し（.k-dsh）も 28px の陶土色の線が «下» に付いている。
   ＝ 上下で同じ言い方にし、陶土色を 1 か所だけ戻す。 */

/* ① 線は «見出しの直下»。細い地の線 ＋ 左端 28px だけ陶土色（＝ .k-dsh と同じ寸法）。 */
body.single-product .k8-step{display:block!important;height:0!important;
  margin:9px 0 15px!important;padding:0!important;border-bottom:1px solid #E6DED2;position:relative;flex:0 0 100%;max-width:100%}
body.single-product .k8-step i{display:block!important;position:absolute;left:0;bottom:-1px;
  width:28px;height:2px;background:#9A6B55;flex:none!important;margin:0!important}
body.single-product .k8-step b,
body.single-product .k8-step span{display:none!important}

/* ② 組と組のあいだの空きは «見出しの上» が受け持つ。
      （第 14 版までは .k8-step の margin-top が受け持っていた） */
body.single-product table.variations th.label label,
body.single-product .ppom-input-pet_name > label.form-control-label,
body.single-product .kumoju-photo-field > .k-field-head,
body.single-product .ppom-field-wrapper:has(.ppom-input-gift_options) > .k-field-head{
  display:block;margin-top:32px!important}
body.single-product table.variations tr:first-child th.label label{margin-top:14px!important}
/* 刻む内容カード（buildEngraveBox）は カードごと 1 つの組。 */
body.single-product .k-engrave{margin-top:32px!important}
body.single-product .k-engrave--ruled .k-engrave-h{margin-bottom:0!important}
body.single-product .k-engrave--ruled .k8-step{margin:9px 0 14px!important}

/* ③ 第 6 版で お写真欄とギフト欄に付けた border-top を落とす。
      残っていると «見出しの下の線» とは別に «組の上にもう一本» 出て、
      前後が空いているぶん «宙に浮いた区切り線» に見える（2026-09-12 に 2 度踏んだ）。
      ⚠️ この 3 行は 第 14 版にも書いてあったが、第 15 版で ① を作り直したとき
         一緒に消してしまった。区切りは «見出しの下線» 一本に任せる。 */
body.single-product .kumoju-photo-field,
body.single-product .ppom-field-wrapper:has(.ppom-input-gift_options){
  border-top:0!important;margin-top:0!important;padding-top:0!important}

/* ④ 「刻む内容」カードの中だけ、お名前の見出しを 兄弟（日づけ・ひとこと）に合わせる。
      ⚠️ そのままだと お名前だけ 20px 明朝、日づけ・ひとことは 17px ゴシック、
         そしてカード自身の見出し «刻む内容» が 17px —— 子が親より大きい逆転になる。 */
body.single-product .k-engrave .ppom-input-pet_name > label.form-control-label{
  font-family:var(--k-gothic)!important;font-size:17px!important;font-weight:700!important;margin-top:0!important}

/* ⑤ 見出しの下の小さな添え字（あとからでもOK／贈りものの方へ）は 線の内側に入れる。 */
body.single-product .k-field-head em,
body.single-product .k-field-head small,
body.single-product .k-field-head span{margin-bottom:0!important}

/* ⚠️ 第 16 版（購入エリア全体に地色 #FAF6EF の帯を敷く）は 2026-09-12 に
   用户「不行不行，撤回，你这还不如之前」で 撤回した。
   ⚠️ **一度もコミットしていないので git 履歴には無い。**作り直すなら：
      js で .summary-inner の連続する 4 きょうだい（.k-ship-line / form.cart /
      #wc-stripe-express-checkout-element / .k-links4）を .k-buypanel で包み、
      スマホは box-shadow 0 0 0 100vmax ＋ clip-path で通栏、PC は角丸パネル。
      ⚠️ PPOM が同じ所に入れている <link> は動かさないこと。
   ⚠️ 同じ提案を繰り返さない —— 実測でも購入エリアが白なのは 10 店中 8 店
      （docs/pdp-element-order-survey-2026-09-12.md §9）。
   いまは 2026-09-11 の «上半分は白が主・面板は敷かない» に戻っている。 */


/* ⚠️ 第 17 版（見出しを «淡い地 #F4EFE7 の帯 ＋ 左 3px の陶土色» にする）は 2026-09-12 に
   用户「撤回撤回」で 取り下げた。⚠️ **コミットしていないので git 履歴には無い。**
   同じ方向のものは 画布（Artifact）の «C 帯見出し» に残してある。
   いまの見出しは 第 18 版（図標の丸 ＋ 明朝 19px ＋ 下線）。 */

/* ══ 第 18 版（2026-09-12、用户「昨天按加购步骤来的那版样式好看点。保留那种样式，
      但不要用数字」）══
   第 12 版の «陶土色の丸＋番号＋STEP＋線» が良かった、番号だけ要らない、という指示。
   番号の代わりに **その段が何をするかの図標** を丸に入れる。
     選ぶ（大きさ・色・図案・向き）→ 四角の中のチェック ／ お名前・刻む内容 → ペン
     お写真 → カメラ ／ ギフト → 贈りもの
   ⚠️ これなら «各ステップの区別» は付くのに 番号は出ない（番号を振る店は 10 店中 0 店、
      docs/pdp-element-order-survey-2026-09-12.md §4）。図標の言い方は うちの他の場所
      （お届け目安・4 マス入口）と同じ «#F6EEE5 の丸に陶土色の線画»。
   ⚠️ 丸が色を持つので 第 15 版の «下線の左端 28px の陶土色» は外す ——
      同じ行に強い色の点が 2 つあると どちらが印か分からなくなる。 */

/* ① 見出しの行：左に図標の丸、右に見出し（添え書きはその下）。
      ⚠️ flex ＋ flex-wrap でやったら 図標が横に伸びた楕円になり、見出しが別行に落ちた（実見）。
         flex の折返しに頼らず、**図標は絶対配置・見出しは普通のブロック**にする。
         こうすると長い見出しが自然に折り返しても 図標は動かない。 */
body.single-product table.variations th.label label,
body.single-product .ppom-input-pet_name > label.form-control-label,
body.single-product .kumoju-photo-field > .k-field-head,
body.single-product .ppom-field-wrapper:has(.ppom-input-gift_options) > .k-field-head,
body.single-product .k-engrave-h{
  display:block!important;position:relative;padding-left:43px!important;min-height:32px;
  font-size:19px!important;line-height:1.45!important;
  margin-top:24px!important;margin-bottom:0!important}
body.single-product table.variations tr:first-child th.label label{margin-top:12px!important}
body.single-product .k-stepic{position:absolute;left:0;top:-1px;
  width:32px;height:32px;border-radius:50%;background:#F6EEE5;
  display:flex;align-items:center;justify-content:center}
body.single-product .k-stepic svg{width:18px;height:18px;stroke:#9A6B55;fill:none;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
/* 添え書き（あとからでもOK／贈りものの方へ／蓋の上に…）は見出しの下、頭を揃える */
body.single-product .k-field-head em,
body.single-product .k-field-head small,
body.single-product .k-field-head span,
body.single-product .k-engrave-h span{
  display:block!important;margin:2px 0 0!important;
  font-size:12.5px!important;color:#7A6A58!important}

/* ② 下線は無彩の細線だけ（色は丸が持つ） */
body.single-product .k8-step i{display:none!important}
body.single-product .k8-step{border-bottom-color:#E6DED2}

/* ③ 未選択の選択肢が 白地に白で «空き» に見えていた。ごく淡い地を敷いて «物» にする */
body.single-product .k-swatch{background:#FDFAF6!important;border-color:#E2D6C6!important}
body.single-product .k-swatch.is-active{background:#FBF2E9!important}

/* ⚠️ 第 19 版（A の白いカード＋D の縦のガイド線）は «画布で見せる前に線上へ入れた» ため
   2026-09-12 に外した。⚠️ **コミットしていないので git 履歴には無い**が、
   同じものが 画布（Artifact）の 2 ページ目「A×D のつなぎ方」の «F» に在る。
   ⚠️ 版面の «新しい案» は まず画布で見てもらってから線上に入れる（用户 2026-09-12）。 */


/* ══ 第 20 版（2026-09-12、用户が画布から «J2 見出しの下に一本» を選んだ）══
   画布 https://claude.ai/code/artifact/4537d387-… の 3 ページ目 J2。
   やること 2 つだけ：
     ① 入力欄の 4 段（大きさ／お名前／お写真／ギフト設定）を **1 つの角丸の枠** に収める
     ② 見出しを «図標 ＋ 明朝 17px ＋ 右端に添え書き（1 行）＋ 下に細罫» にする

   ⚠️ 枠の «外» は 送料カード（上）と 確認稿（下）。確認稿は JS の moveProof() で
      .ppom-wrapper の外へ出してある —— 中に残すと枠に入ってしまう。
   ⚠️ 地色は白のまま（枠の中も塗らない）。番号は使わない。文案は一字も変えていない。 */

/* ── ① 枠。DOM は動かさず、**上半分＝table.variations ／ 下半分＝.ppom-wrapper** の
      2 枚に分けて描き、あいだの隙間を 0 にして 1 本の輪郭に見せる。
      ⚠️ DOM を動かさないのは PPOM のため —— 変体を切り替えると PPOM が
         .ppom-rendering-fields を描き直すので、そこへ table.variations を
         移すと «大きさ» の選択肢ごと消える恐れがある。 */
body.single-product form.cart table.variations{
  margin:20px 0 0!important; padding:22px 16px 0!important;
  background:#fff!important; box-shadow:none!important; clip-path:none!important;
  border:1px solid #E4D9CB!important; border-bottom:0!important;
  border-radius:22px 22px 0 0!important; width:auto!important}
body.single-product .single_variation_wrap,
body.single-product .woocommerce-variation-add-to-cart{margin-top:0!important;padding-top:0!important}
body.single-product .ppom-wrapper{
  margin:0!important; padding:0 16px 26px!important; background:#fff;
  border:1px solid #E4D9CB; border-top:0; border-radius:0 0 22px 22px}
/* 変体の無い商品＝上半分が無いので、下半分だけで枠を閉じる */
body.single-product form.cart:not(:has(table.variations)) .ppom-wrapper{
  margin-top:20px!important; padding-top:22px!important;
  border-top:1px solid #E4D9CB; border-radius:22px}
/* PPOM の欄が無い商品＝下半分が無いので、上半分だけで閉じる */
body.single-product form.cart:not(:has(.ppom-wrapper)) table.variations{
  padding-bottom:24px!important;
  border-bottom:1px solid #E4D9CB!important; border-radius:22px!important}

/* ── ② 枠の内寸をそろえる。PPOM の行は margin:0 -5px の溝を持っていて、
      そのままだと中身だけ 10px はみ出す（＝ 枠の内側の余白が左右で 11px になる）。 */
body.single-product .ppom-rendering-fields{margin-left:0!important;margin-right:0!important}
body.single-product .ppom-rendering-fields > .ppom-field-wrapper,
body.single-product .ppom-rendering-fields > .kumoju-photo-field{padding:0!important}

/* ── ③ 段と段のあいだは 32px。**枠の中に横線は引かない**（区切りは見出しの下罫が持つ）。
      ⚠️ .ppom-rendering-fields > * にしてあるのは «刻む内容» のカード（.k-engrave）も
         1 段として数えるため。中身が display:none の欄（photo_me など）には効かない。
      ⚠️ .k-engrave の padding は殺さない —— カード自身の内側の余白なので。 */
body.single-product table.variations tr{margin:0 0 32px!important}
body.single-product table.variations tr:last-child{margin-bottom:0!important}
body.single-product table.variations th.label{margin:0!important}
body.single-product .ppom-rendering-fields > *{margin:32px 0 0!important}
body.single-product .kumoju-photo-field,
body.single-product .ppom-field-wrapper:has(.ppom-input-gift_options){
  border-top:0!important; margin-top:32px!important; padding-top:0!important}
body.single-product .ppom-field-wrapper:has(.ppom-input-pet_name){
  background:none!important; box-shadow:none!important; clip-path:none!important}

/* ── ④ 見出し（J2）：図標 26 ＋ 明朝 17px ＋ 右端に添え書き、ぜんぶ 1 行。
   ⚠️ 字の大きさは «実測して» 決めた（Shippori Mincho 600・Google Fonts、2026-09-12）：
        枠の内寸 = 390 − 頁余白 30 − 罫 2 − 内側 32 = **326px**
        「お写真をご用意ください」 19px=213.2 ／ 18px=202 ／ **17px=190.8**
        「あとからでもOK」 12.5px=92 ／ **11.5px=84.7**
        → 図標 26 ＋ 間 10 ＋ 190.8 ＋ 間 10 ＋ 84.7 = **321.5** で 1 行に入る。
        → 19px のままだと 329.9 で **入らない**（添え書きが 2 行目に落ちる）。
      字を大きくしたくなったら、この足し算をやり直すこと。 */
body.single-product table.variations th.label label,
body.single-product .ppom-input-pet_name > label.form-control-label,
body.single-product .kumoju-photo-field > .k-field-head,
body.single-product .ppom-field-wrapper:has(.ppom-input-gift_options) > .k-field-head,
body.single-product .k-engrave > .k-engrave-h{
  display:flex!important; align-items:center; gap:9px; flex-wrap:wrap;
  padding-left:0!important; min-height:0;
  font-size:17px!important; line-height:1.4!important; margin:0!important;
  letter-spacing:.01em!important}
/* 「刻む内容」カードの中のお名前欄は カードの見出しが親なので、行にしない */
body.single-product .k-engrave .ppom-input-pet_name > label.form-control-label{
  display:block!important; font-size:17px!important}

/* 図標：第 18 版の «絶対配置の丸» をやめ、行の中の 1 項目にする。
   ⚠️ 26px。第 18 版は 32px だったが、それだと上の足し算が 6px 足りない。 */
body.single-product .k-field-head > .k-stepic,
body.single-product .k-engrave-h > .k-stepic,
body.single-product .k-stepic{
  position:static!important; flex:0 0 26px;
  width:26px!important; height:26px!important; margin:0!important;
  border-radius:50%; background:#F6EEE5;
  display:flex!important; align-items:center; justify-content:center;
  font-size:0!important}
body.single-product .k-field-head > .k-stepic svg,
body.single-product .k-stepic svg{width:15px;height:15px}

/* 添え書き（任意／あとからでもOK／贈りものの方へ）＝ 行の右端へ。
   ⚠️ span は .k-stepic を除くこと —— 第 18 版はここで図標まで掴んでいて、
      «お写真» の図標だけ display:block・12.5px になっていた（中の svg が
      中央に揃わない原因）。 */
body.single-product .k-field-head em,
body.single-product .k-field-head small,
body.single-product .k-field-head > span:not(.k-stepic),
body.single-product .k-engrave-h > span:not(.k-stepic){
  display:inline!important; flex:none;
  margin:0 0 0 auto!important; letter-spacing:0!important;
  font-size:11.5px!important; color:#7A6A58!important; white-space:nowrap}
/* 「任意 / 必須」は ::after の擬似要素。flex の項目になるので右端へ寄せられる。
   全角スペース（"　任意"）は margin で間を取るので外す。 */
body.single-product .ppom-field-wrapper.pet_name > .form-group > label.form-control-label::after{
  content:"任意"; margin-left:auto; flex:none;
  font-size:11.5px!important; font-weight:500; color:#7A6A58}
body.single-product .ppom-field-wrapper.pet_name > .form-group > label.form-control-label:has(.show_required)::after{
  content:"必須"; color:#B4705C; font-weight:700}

/* PPOM の «欄の説明»（.show_description）は一文まるごとなので、行には入らない。
   ⚠️ 2026-09-12 の全商品点検で photo-magnet・brass-tag の 2 件が引っかかった ——
      見出しを flex にしたので、説明文が «見出しの右» に押し込まれて 153px 幅・2 行になり、
      図標だけ 71px の行の真ん中に浮いていた。
   → flex-basis:100% で必ず «次の行» に落とす。«入るなら 1 行に» の対象は
      「任意」「あとからでもOK」「贈りものの方へ」のような短い添え書きだけ。 */
body.single-product .ppom-field-wrapper label.form-control-label .show_description,
body.single-product .k-field-head .show_description,
body.single-product .k-engrave-h .show_description{
  flex:0 0 100%!important; order:2; display:block!important;
  margin:5px 0 0!important; padding:0!important;
  font-size:12px!important; line-height:1.7!important;
  color:#7A6A58!important; letter-spacing:0!important}

/* 見出しの下の細罫：第 15 版の形（全幅 1px ＋ 左端 28px だけ陶土色）に戻す。
   ⚠️ 第 18 版はこの <i> を消していた（丸が色を持つから）。J2 は «下に一本» が主役なので出す。 */
body.single-product .k8-step{
  display:block!important; height:0!important; padding:0!important;
  margin:9px 0 14px!important; position:relative;
  border-bottom:1px solid #E4D9CB!important}
body.single-product .k8-step i{
  display:block!important; position:absolute; left:0; bottom:-1px;
  width:28px; height:2px; background:#9A6B55; margin:0!important}

/* ── ⑤ 確認稿は枠の外（JS が .ppom-wrapper の後ろへ出す）。上の間合いだけ整える。 */
body.single-product section.k-proof.k-proof--inform{margin:20px 0 0!important}


/* ══ 第 21 版（2026-09-12、用户が画布から «S2 枠は残して 図だけ帯に» を選んだ）══
   参照は 用户が 2026-09-09 に指した
   https://www.original-pet.com/c-fpage?fp=sofacushion
   その中の cushion_printimg_2.jpg を実測 ——
     ・**337×132 ＝ 2.55:1 の 1 本の帯**（うちは 1:1 が 2 枚＋矢印だった）
     ・2 格に割って 隙間はごく細い
     ・札は **絵の中の隅**（うちは絵の下に 2 行ぶら下げていた）
   ⚠️ 参照店は札を画像に焼いている。**うちは焼かない** —— 画像は写真だけ、
      札は figcaption を絶対配置で重ねる（分类页 banner・棚ページと同じ規矩。
      文案を後から直せる／選択できる／SEO に乗る）。
   ⚠️ 枠・帯見出し・「追加料金なし」の丸章は **そのまま残す**（用户の選択が S2）。
   ⚠️ 3 枚組（.k-proof-pair--3）には当てない —— 1 枚 104px しかなく、
      重ねた札が読めない。3 枚組は従来のまま。

   実測（crystal-light・390px）：ブロック全体 540px → 474px。 */

/* ① 帯にする。矢印と「／」は 2 枚組では消す（帯には隙間しか要らない）。 */
body.single-product .k-proof-pair:not(.k-proof-pair--3){
  gap:5px!important; align-items:stretch!important}
body.single-product .k-proof-pair:not(.k-proof-pair--3) .k-proof-arrow,
body.single-product .k-proof-pair:not(.k-proof-pair--3) .k-proof-or{display:none!important}

/* ② 1 格は 5:4。2 格＋隙間 5px で 参照店と同じ 2.55:1 になる。 */
body.single-product .k-proof-pair:not(.k-proof-pair--3) .k-proof-fig{
  position:relative; overflow:hidden; border-radius:4px}
body.single-product .k-proof-pair:not(.k-proof-pair--3) .k-proof-fig img{
  aspect-ratio:5/4!important; border-radius:0!important; height:100%}

/* ③ 札は絵の中。⚠️ 右の格は下も明るいので、白字だけでは読めない ——
      棚ページ（2026-09-09）と同じく «下 46% に薄い暗がり» を敷く。
      濃くしない：写真そのものが商品の顔なので。 */
body.single-product .k-proof-pair:not(.k-proof-pair--3) .k-proof-fig::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:46%;
  pointer-events:none;
  background:linear-gradient(to top,rgba(45,35,25,.42),rgba(45,35,25,0))}
body.single-product .k-proof-pair:not(.k-proof-pair--3) .k-proof-fig figcaption{
  position:absolute; left:8px; right:8px; bottom:6px; z-index:1;
  margin:0!important; text-align:left}
/* 2 枚目だけ右寄せ（参照店と同じ 左下・右下の配置） */
body.single-product .k-proof-pair:not(.k-proof-pair--3) .k-proof-fig:last-of-type figcaption{
  text-align:right}
body.single-product .k-proof-pair:not(.k-proof-pair--3) .k-proof-fig figcaption b{
  font-size:11px!important; line-height:1.35!important;
  color:#fff!important; text-shadow:0 1px 3px rgba(40,30,20,.6)}
/* ④ 帯の左右を内側へ寄せる（用户 2026-09-12、赤枠で指示）。
      ⚠️ 実測では 帯は x17 w356 ＝ 本文とまったく同じ幅で、左右に余白が 1px も無かった。
         写真が枠にぴったり触っていると «貼り付けた» ように見える。
         頁の左右余白（15px）と同じぶんだけ内へ入れて、本文より一段 内側に置く。 */
body.single-product .k-proof-pair:not(.k-proof-pair--3){
  margin-left:15px!important; margin-right:15px!important}

body.single-product .k-proof-pair:not(.k-proof-pair--3) .k-proof-fig figcaption span{
  margin-top:0!important; font-size:10px!important; line-height:1.35!important;
  color:rgba(255,255,255,.92)!important; text-shadow:0 1px 3px rgba(40,30,20,.6)}

/* ⚠️ 3:4 の縦位置＋«純色の帯» の札（用户 2026-09-12「图片做成3:4，文字盖在纯色上」）は
   同日「还是用之前的那个吧，更丑了」で **撤回した**。作り直すなら：
     .k-proof-fig img を aspect-ratio:3/4、③ の ::after（グラデーション）を display:none、
     figcaption を left/right/bottom:0・padding:6px 8px 7px・background:#EFDCC8・中央寄せ、
     b は #3F3A32 11.5px、span は #7A6A58 10px（どちらも text-shadow なし）。
   ⚠️ 高さの実測：1 格 161×128 → 161×214、帯 128 → 214、ブロック 452 → 538。
      «長すぎる» と «縦位置にしたい» は両立しない —— 縦にするなら図を満幅にしない等の手当てが要る。 */

/* ══ 第 22 版（2026-09-14、用户が画布 K4 «同業 12 店と突き合わせた全体の並び» を選んだ）══
   依拠：docs/op-pdp-grouping-survey-2026-09-14.md §4-5（12 店 × 17 要素）
   DOM の移動は js/kumoju-product.js：rdAbout()（流れ → 仕様の後）・rdPhotoTips()・moveProof()（確認稿 → 流れの後）・rdLineAsk()
   ① お写真の選び方のカード（読み物側・開いた状態。帯は «ご注文の前にお読みください» と同じ）
   ② 読み物側の 仕様 → 写真 → 流れ → 確認稿 → ご注意 の間合い
   ③ LINEで相談する（決済ボタンの下・4 マスの上） */

/* ① */
body.single-product .product-tabs-wrapper .k-tips-card{margin:32px 10px 0;padding:0 18px 14px}
body.single-product .k-tips-card .k-phototips{margin:0!important;padding:0!important;border:0!important;background:transparent!important}
body.single-product .k-tips-card .k-phototips > summary{display:block;list-style:none;margin:0 -18px 12px;padding:12px 8px;
  background:#EFDCC8;text-align:center;font-family:"Kaisei Tokumin",serif;font-weight:600;font-size:17px;line-height:1.6;
  color:#3F3A32!important;pointer-events:none;cursor:default}
body.single-product .k-tips-card .k-phototips > summary::-webkit-details-marker{display:none}
body.single-product .k-tips-card .k-phototips > summary::before,
body.single-product .k-tips-card .k-phototips > summary::after{content:none!important;display:none!important}
body.single-product .k-tips-card .k-phototips ul{margin:0!important;padding:0 0 0 1.3em!important;list-style:disc}
body.single-product .k-tips-card .k-phototips li{font-size:14px!important;line-height:1.85!important;color:#69624F}
body.single-product .k-tips-card .k-phototips li::before{content:none!important}
body.single-product .k-tips-card .k-phototips p{margin:10px 0 0!important;font-size:14px!important;line-height:1.85!important;color:#69624F}

/* ② */
body.single-product .product-tabs-wrapper .k5-flow{margin:16px 0 0!important}
body.single-product .product-tabs-wrapper .k5-chap + .k5-flow{margin-top:32px!important}
body.single-product .product-tabs-wrapper section.k-proof.k-proof--read{margin:16px 10px 0!important}
body.single-product .product-tabs-wrapper .k5-flow + .k5-chap,
body.single-product .product-tabs-wrapper .k-proof--read + .k5-chap{margin-top:32px!important}

/* ③ */
body.single-product .k-lineask{display:flex;align-items:center;justify-content:center;gap:10px;margin:18px 0 0;height:50px;
  border:1px solid #E6DACB;border-radius:99px;background:#fff;color:#3F3A32!important;font-size:15px;text-decoration:none!important}
body.single-product .k-lineask .lg{display:inline-block;padding:2px 7px;border-radius:5px;background:#06C755;color:#fff;
  font-size:11px;font-weight:700;letter-spacing:.02em;line-height:1.5}
body.single-product .k-lineask + .k-links4{margin-top:18px!important}

/* ══ 第 23 版（2026-09-14、用户が画布 K5 と «C1 枠の上に帯» を選んだ）══
   依拠：docs/pdp-four-blocks-survey-2026-09-14.md §A（同業 20 店の «どの段に置くか»）
   DOM は js/kumoju-product.js：rdFlowSteps()（選び方 → STEP 1 の下／確認稿 → STEP 2 の下）・rdReturn()（返品表を外す）
   ① 流れカードの中の枠（淡米色・角丸 10）と 枠の上の帯（淡い陶土色＋線画の図標＋STEP n）。
      上の 3 つの図標の下の «実心の札» とは形を変える（用户「不要跟上面一样，做出分区感」）
   ② STEP 1：選び方は畳む（第 22 版で止めていた summary のクリックを戻す）
   ③ STEP 2：確認稿の本文・2 枚の図・注記。«追加料金なし» の丸章は枠の右上に重ねる
   ④ 図は 1:1（用户「两张能不能让狗狗完整展示出来，可以用1:1的图，第一张带背景，第二张纯色」）。
      画像そのものも 600×600 に作り直した（assets/flow/proof-send.jpg・proof-cut.jpg） */

/* ① ⚠️ 2026-09-14 訂正：用户が選んだのは C（枠の左上の線に札を載せる）。変えるのは «札» だけ ——
      «角丸の長方形のまま、中は塗らない»。一度 C1（枠の上に色の帯＋図標）で入れたのは誤読。
      札の地は «上半分＝カードの白／下半分＝枠の淡米色» にして、枠の線だけを隠す（見た目は塗りなし）。 */
body.single-product .k5-flow .k5-step{position:relative;margin:28px 0 0;padding:22px 11px 16px;border:1px solid #E6DACB;border-radius:10px;background:#FCF9F4;text-align:left}
body.single-product .k5-flow .k5-step--1{margin-top:30px}
body.single-product .k5-flow .k5-sth{position:absolute;top:-12px;left:12px;display:flex;align-items:center;height:24px;padding:0 11px;
  border:1px solid #9A6B55;border-radius:6px;background:linear-gradient(to bottom,#fff 0,#fff 50%,#FCF9F4 50%,#FCF9F4 100%)}
body.single-product .k5-flow .k5-sth span{font-family:"Kaisei Tokumin",serif;font-weight:600;font-size:12px;line-height:1;letter-spacing:.14em;color:#9A6B55}
/* STEP の前の図標（上の 3 つと同じ線画・札の字と同じ陶土色） */
body.single-product .k5-flow .k5-sth{gap:5px;padding-left:9px}
body.single-product .k5-flow .k5-sth svg{width:14px;height:14px;flex:none;display:block;fill:none!important;stroke:#9A6B55!important;stroke-width:1.7!important;stroke-linecap:round;stroke-linejoin:round}
body.single-product .k5-flow .k5-sth svg *{fill:none!important;stroke:#9A6B55!important}
body.single-product .k5-flow a.more{margin-top:18px!important}

/* ② */
body.single-product .k5-flow .k5-step .k-phototips{margin:0!important;padding:0!important;border:0!important;background:transparent!important}
body.single-product .k5-flow .k5-step .k-phototips > summary{display:flex!important;justify-content:space-between;align-items:center;gap:10px;list-style:none;margin:0!important;padding:2px 0!important;
  background:none!important;font-family:"Kaisei Tokumin",serif;font-weight:600;font-size:13.5px!important;line-height:1.6;letter-spacing:-.01em;color:#3F3A32!important;
  cursor:pointer;pointer-events:auto!important;text-align:left!important}
body.single-product .k5-flow .k5-step .k-phototips > summary::-webkit-details-marker{display:none}
body.single-product .k5-flow .k5-step .k-phototips > summary::before{content:none!important;display:none!important}
body.single-product .k5-flow .k5-step .k-phototips > summary::after{content:"＋"!important;display:inline-block!important;flex:none;color:#9A6B55;font-size:16px;
  position:static!important;transform:none!important;border:0!important;width:auto!important;height:auto!important}
body.single-product .k5-flow .k5-step .k-phototips[open] > summary::after{content:"−"!important}
body.single-product .k5-flow .k5-step .k-phototips ul{margin:10px 0 0!important;padding:0 0 0 1.3em!important;list-style:disc}
body.single-product .k5-flow .k5-step .k-phototips li{font-size:13.5px!important;line-height:1.85!important;margin:0!important;color:#69624F}
body.single-product .k5-flow .k5-step .k-phototips li::before{content:none!important}
body.single-product .k5-flow .k5-step .k-phototips p{font-size:13.5px!important;line-height:1.85!important;margin:8px 0 0!important;color:#69624F}

/* ③ */
body.single-product .k5-flow .k5-step--2 .k9-badge{top:-14px!important;right:-6px!important}
body.single-product .k5-flow .k5-step--2 .k-proof-lead{margin:0 44px 12px 0!important;padding:0!important;font-size:14px!important;line-height:1.85!important;text-align:left!important}
body.single-product .k5-flow .k5-step--2 .k-proof-pair{margin:0!important}
body.single-product .k5-flow .k5-step--2 .k-proof-note{display:block!important;margin:12px 0 0!important;padding:0!important;font-size:13px!important;line-height:1.8!important;text-align:left!important}
body.single-product .k5-flow .k5-step--2 .k-proof-more{display:inline-block!important;margin:8px 0 0!important;padding:0!important}

/* ④ */
/* ⚠️ 枠（figure）も 1:1 に固定する。img だけ 1:1 にすると figure が 20px ほど高く残り、
      下の暗がり（::after）がその空きに灰色の帯として出た（2026-09-14 上線直後の実測）。 */
/* ⚠️ 2026-09-14 夜：札（送るお写真／仕上がりイメージ）は «絵の上» から «絵の下» へ、暗がり（::after）は外す。
      用户「把两行字挪到图片下方，不再叠在图上，渐变也去掉」—— 犬の足元に字と暗がりが載り、2 枚目の無地も暗く見えていた。 */
body.single-product .k5-flow .k5-step--2 .k-proof-pair .k-proof-fig{aspect-ratio:auto!important;height:auto!important;overflow:visible!important;border-radius:0!important}
body.single-product .k5-flow .k5-step--2 .k-proof-pair .k-proof-fig::after{content:none!important;display:none!important}
body.single-product .k5-flow .k5-step--2 .k-proof-pair .k-proof-fig img{display:block!important;aspect-ratio:1/1!important;width:100%!important;height:auto!important;object-fit:cover;border-radius:6px!important}
body.single-product .k5-flow .k5-step--2 .k-proof-pair .k-proof-fig figcaption{position:static!important;margin:7px 0 0!important;text-align:center!important}
body.single-product .k5-flow .k5-step--2 .k-proof-pair .k-proof-fig figcaption b{display:block;font-size:12.5px!important;line-height:1.4!important;color:#3F3A32!important;text-shadow:none!important}
body.single-product .k5-flow .k5-step--2 .k-proof-pair .k-proof-fig figcaption span{display:block;font-size:11px!important;line-height:1.45!important;color:#7A7266!important;text-shadow:none!important}
/* ⚠️ 2026-09-14 深夜（画布 P3）：2 枚組だけ 札を «絵の中» へ戻す —— 左は左下・右は右下、白字＋影のみ、暗がり（::after）は付けない。
      用户「不要动这两张图，把文案又写进去试试」→ P1（暗がり）／P2（白い帯）／P3 から P3。
      ⚠️ 犬が絵の高さ 82% なので 字は前足に掛かる（承知の上で選ばれた）。3 枚組（1 枚 約 100px）は 見ていないので 図の下のまま。 */
body.single-product .k5-flow .k5-step--2 .k-proof-pair:not(.k-proof-pair--3) .k-proof-fig{position:relative!important;overflow:hidden!important;border-radius:6px!important;aspect-ratio:1/1!important}
body.single-product .k5-flow .k5-step--2 .k-proof-pair:not(.k-proof-pair--3) .k-proof-fig img{height:100%!important}
body.single-product .k5-flow .k5-step--2 .k-proof-pair:not(.k-proof-pair--3) .k-proof-fig figcaption{position:absolute!important;left:8px!important;right:8px!important;bottom:6px!important;top:auto!important;z-index:2;margin:0!important;padding:0!important;background:none!important;text-align:left!important}
body.single-product .k5-flow .k5-step--2 .k-proof-pair:not(.k-proof-pair--3) .k-proof-fig:last-of-type figcaption{text-align:right!important}
body.single-product .k5-flow .k5-step--2 .k-proof-pair:not(.k-proof-pair--3) .k-proof-fig figcaption b{font-size:11px!important;line-height:1.35!important;color:#fff!important;text-shadow:0 1px 2px rgba(30,22,15,.75),0 0 6px rgba(30,22,15,.45)!important}
body.single-product .k5-flow .k5-step--2 .k-proof-pair:not(.k-proof-pair--3) .k-proof-fig figcaption span{font-size:10px!important;line-height:1.35!important;color:#fff!important;text-shadow:0 1px 2px rgba(30,22,15,.75),0 0 6px rgba(30,22,15,.45)!important}

/* ⑤ 2026-09-14（K6b）：STEP 1 の «選び方» は ○✕ の長図。開いたまま・＋／− は出さない・枠いっぱいに出す。
      長図は 700px 幅で組んで ×2（1400×2226）。枠の中で約 344px ＝ 図の中の字は約 11px（compose.html の注釈）。 */
body.single-product .k5-flow .k5-step .k5-tips--guide > summary{cursor:default!important}
body.single-product .k5-flow .k5-step .k5-tips--guide > summary::after{content:none!important;display:none!important}
body.single-product .k5-flow .k5-step .k5-tips--guide img.k5-guide{display:block;width:calc(100% + 22px)!important;max-width:none!important;height:auto!important;margin:12px -11px 0!important;border-radius:0}

/* ═══ 第 24 版（2026-09-14 深夜）：頁全体の地色を «この品について» の米色 #F6F1E9 に（試し） ═══
   用户「这个页面的这米色（红框），拿来做整个页面的底色试试，我再一个个挨着调整」。
   変えるのは «地» だけ ＝ 全幅で枠も角丸も影も無い層（body・ヘッダー・本体の包み）。主図の容器は 第 26 版で白い額縁。
   ⚠️ 枠／角丸／影のあるもの（送料カード・選択表・PPOM 枠・定期便・ギフト・お届け目安・LINE ボタン・
      流れカード・仕様／ご注意の白カード・Q&A・レビュー帯・入力欄）は 白のまま —— 用户が 1 つずつ調整する。
   戻すなら この段を消すだけ。 */
/* ⚠️⚠️ 2026-09-23：**ヘッダーの 3 つ（.whb-header / .whb-main-header / .whb-row）を
   この並びから外した**（用户「页眉的那个背景你给我统一成白色底吧」）。
   外すと L8604 の `body.single-product .whb-*{background:#fff!important}` が効いて 白になり、
   他の頁のヘッダー（L72 で白）と揃う。
   ⚠️ **地（body・包み・本体）は #F6F1E9 のまま** —— 第 24 版で変えたのは そこなので、
      ヘッダーだけ抜いて 地は触らない。 */
body.single-product,
body.single-product .website-wrapper,
body.single-product .main-page-wrapper,
body.single-product .site-content{background-color:#F6F1E9!important}

/* ═══ 第 25 版（2026-09-14 深夜）：商品名まわりを 1 つの角丸に ═══
   用户「你把这一部分元素也全部收到一个圆角里面」（英字・品番／商品名／説明／価格／ポイント）。
   DOM は js/kumoju-product.js の wrapHead()（.k-headbox を作って 5 つを順に入れる）。
   最初は «選択表＋PPOM» の枠（1px #E4D9CB・角丸 22）に合わせたが、用户の指示で 線なし・直角（第 28 版 ②）。
   スマホの上下 20px は 第 29 版の «箱の中の上下 20px»。 */
body.single-product .k-headbox{background:#fff;border:0;border-radius:0;padding:18px 16px 16px;margin:0}
body.single-product .k-headbox > :first-child{margin-top:0!important}
body.single-product .k-headbox > :last-child{margin-bottom:0!important}

/* ═══ 第 26 版（2026-09-14 深夜）：主図 ═══
   用户「收起下面的这个小图预览。然后整个主图框四周留出一点点白色间距，不要太大。张数的位置移到右下，但是在图片内，不要盖到白色间距」
   ① 下の縮略図の列（JS の .k-thumbs）を出さない。張数と «今何枚目» は角标で分かる。
   ② 主図の容器に白い内余白（地は第 24 版で米色なので、白い額縁のように見える）。
      最初 8px → 用户「我感觉我那个留少了」で gu-home 実測（10.4px）に合わせ 10px（第 29 版のとき）。
   ③ 角标は右下へ。容器の内余白 10px ＋ 絵の端から 10px ＝ 20px（白い余白には掛からない）。 */
body.single-product .k-thumbs{display:none!important}
body.single-product .wd-carousel-container.wd-gallery-images{padding:10px!important;background-color:#fff!important;box-sizing:border-box}
body.single-product .k-gal-count{top:auto!important;bottom:20px!important;right:20px!important}

/* ═══ 第 27 版（2026-09-14 深夜）：主図の上にパンくず ═══
   用户「主图上面还是有个面包屑，大概就是：ホーム > 分类 > 商品id」（参照に «ホーム> カーテン > 商品番号:1030» の截图）。
   出すのは inc/kumoju-seo.php の kumoju_product_crumbs()（woocommerce_before_single_product_summary 優先度 5 ＝ 主図の直前）。
   ⚠️ 名前は .k-crumbs —— 上の «パンくずを隠す»（.woocommerce-breadcrumb / .wd-breadcrumbs）に掛からないように。 */
body.single-product .k-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;margin:0;padding:10px 15px 9px;
  font-size:12px;line-height:1.5;color:#7A7266;letter-spacing:.02em}
body.single-product .k-crumbs a{color:#7A7266!important;text-decoration:none}
body.single-product .k-crumbs a:hover{color:#9A6B55!important}
body.single-product .k-crumbs .sep{color:#B5AB9C}
body.single-product .k-crumbs .cur{color:#3F3A32}
/* ヘッダーとパンくずの間の 15px を消す（用户 赤枠）。
   正体：.main-page-wrapper の padding-top 40px を .single-product-page が margin-top −25px しか打ち消していなかった（Woodmart 既定）。
   本体の padding は他ページも使うので触らず、商品ページ側で 40px ぶん引き上げる。 */
body.single-product .single-product-page{margin-top:-40px!important}

/* ═══ 第 28 版 ② （2026-09-14 深夜）：主図の下〜«お届け目安» の «いちばん外の枠» は 線なし・影なし・直角 ═══
   用户「从“お届け目安”（包括）上面的所有元素最外层的那个边框，不要加任何描边和阴影，而且最外层这个用直角，不用圆角」。
   実測で «いちばん外» だったのは 5 つ：商品名の箱／送料カード／選択表（上半）＋PPOM（下半）＝ J2 の枠／お届け目安。
   ⚠️ 中の枠（写真アップロード・定期便・ギフト・入力欄・品番とポイントの丸札）は «外» ではないので そのまま。 */
body.single-product p.k-ship-line,
body.single-product table.variations,
body.single-product #ppom-box-9,
body.single-product .ppom-wrapper,
body.single-product .k-deliv{border:0!important;box-shadow:none!important;border-radius:0!important}
/* ⚠️ 選択表の枠は L9071 の «body.single-product form.cart table.variations»（!important）が勝っていたので 1 段強く */
html body.single-product form.cart table.variations{border:0!important;box-shadow:none!important;border-radius:0!important}

/* ═══ 第 28 版 ① ＋ 第 29 版（2026-09-14 深夜）：左右の余白 10px ／ 箱と箱の間 10px ／ 箱の中の上下 20px（スマホ幅だけ）═══
   ① 用户「所有元素左右两边留白都以主图这个左右留白为基准对齐」→ まず主図の白い余白 8px にそろえた（第 28 版）。
      実測（390px）でずれていたところと、その正体：
        パンくず 15（自身の padding）／購入エリア 15（Woodmart の列 padding）／この品について の本文 10（列 15 ＋ アコーディオン −5）
        仕様・ご注意・Q&A の色帯 3（その上 −7）／ご注文はこちらから 25（margin 15）／お客さまの声 15（padding）／関連商品 0（カルーセル −5 ＋ 各カード 5）
   ② 用户「参考 https://m.gu-home.com/drape-curtain-p-14459.html 只参考：1. 主图左右留白（我那个留少了） 2. 元素与元素垂直距离」→ 8→10px（第 29 版）。
      依拠＝実測 gu-home 1 店（用户の指定）、390px：
        主図の白い枠 padding 10.4px（絵 x10.4〜379.4）・ほかの白い箱も x10〜380
        箱と箱の間 10〜11px（主図→商品情報 10／→選択 11／→おすすめ 10）・箱の中の上下 20.67px・左右 15.6px
      うち（直前）：主図→商品名の箱 24（summary-inner の pt4 ＋ 高さ 0 のパンくず入れ物の mb20）／商品名の箱→送料 10／
        送料→選択 22（form mt22）／選択→お届け目安 0（mt −10 で くっついていた）／この品について の箱どうし 32・中の上下 40/34
   ⚠️ 中の字の余白（色帯の 18px・箱の 16px 等）は触らない —— そろえるのは «いちばん外の端» だけ。
   ⚠️ PC（2 段組）は列の計算が別なので 1024px 以下に限る。主図の白い余白 10px と角标 20px は 第 26 版（全幅共通）。 */
@media (max-width:1024px){
  /* 左右 10px */
  body.single-product .k-crumbs{padding-left:10px!important;padding-right:10px!important}
  body.single-product .product-image-summary-inner > .summary,
  body.single-product .product-image-summary-inner > .col-12:not(.product-images){padding-left:10px!important;padding-right:10px!important}
  body.single-product .poduct-tabs-inner{padding-left:10px!important;padding-right:10px!important}
  body.single-product .woocommerce-tabs .wd-accordion-item{margin-left:0!important;margin-right:0!important}
  body.single-product .k5-chap{margin-left:0!important;margin-right:0!important}
  /* 札は max-width:340px の中央寄せだった（L8926）。margin だけ 0 にすると左に寄るので、幅ごと端から端へ */
  body.single-product a.k7-cta{margin-left:0!important;margin-right:0!important;max-width:none!important}
  body.single-product .wd-accordion-item.k5-reviews{padding-left:10px!important;padding-right:10px!important}
  body.single-product .related-and-upsells{padding-left:10px!important;padding-right:10px!important}

  /* 箱と箱の間 10px */
  body.single-product .summary-inner > .single-breadcrumbs-wrapper{display:none!important}
  body.single-product .summary-inner{padding-top:10px!important}
  body.single-product p.k-ship-line{margin-top:10px!important}
  html body.single-product form.variations_form{margin-top:10px!important}
  html body.single-product form.cart table.variations{margin-top:0!important}
  /* 親（.k-atc-flex）が flex の gap:10px を持っているので margin は 0 ＝ 間はちょうど 10px（元の −10px はこの gap を打ち消していた） */
  body.single-product .k-deliv{margin-top:0!important;margin-bottom:0!important}
  /* ⚠️ L9276-9279 の «.product-tabs-wrapper .k5-chap + .k5-flow»（32px）が勝つので 同じ形で 1 段強く */
  html body.single-product .product-tabs-wrapper .k5-flow,
  html body.single-product .product-tabs-wrapper .k5-chap + .k5-flow{margin-top:10px!important}
  html body.single-product .product-tabs-wrapper .k5-flow + .k5-chap,
  html body.single-product .product-tabs-wrapper .k7-notes{margin-top:10px!important}

  /* 箱の中の上下 20px（左右は各箱のまま） */
  body.single-product .k-headbox{padding-top:20px!important;padding-bottom:20px!important}
  body.single-product p.k-ship-line{padding-bottom:20px!important}
  html body.single-product form.cart table.variations{padding-top:20px!important}
  body.single-product .ppom-wrapper{padding-bottom:20px!important}
  body.single-product .k-deliv{padding-top:20px!important;padding-bottom:20px!important}
  body.single-product .k7-spec,
  body.single-product .k7-notes{padding-top:20px!important;padding-bottom:20px!important}
  body.single-product .k7-faq{padding-bottom:20px!important}
}

/* ═══ 第 30 版（2026-09-14 深夜）：商品名の箱 = 画布 page-7 «H3b» ＋ 最下段 «お客さまの声／お気に入り»（R2）＋ «価格: ¥X (税込)» ═══
   経緯：H3 を上線 → 用户「算了。你用H3b吧」→ 品番の後ろに判子 → 用户「取消品番后面的那个收藏图标，用R2的“评论和收藏”样式，价格上面的那条线去掉，放到“评论和收藏”的上面」。
   参照 gu-home の商品名の箱（SALE 札・値段・point 札・区切り線）の «色の置き方» を、うちの陶土色で。
   ① 英字（分類）は線上のまま（細い線＋字）② 品番は #9A6B55 の塗り・白字・左寄せ・虚線なし（.k-skurow）
   ③ 値段を陶土色 ④ ポイントを黄の札 ⑤ 最下段 R2（⑦）・細線はその上
   DOM は js/kumoju-product.js：wrapHead() → buildSkuRow() → buildActRow()／お気に入りの押す・外すは toggleWish()（吸底栏と共通）。 */
html body.single-product .k-headbox .k-pd-topline{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:8px!important}
html body.single-product .k-headbox .k-skurow{display:flex;align-items:center;justify-content:flex-start;gap:10px}
html body.single-product .k-headbox .k-sku{align-self:auto!important;margin:0!important;background:#9A6B55!important;border-color:#9A6B55!important}
html body.single-product .k-headbox .k-sku .k{color:#F2E4D6!important}
html body.single-product .k-headbox .k-sku .v{color:#fff!important;border-bottom:0!important}
/* ⑦ 2026-09-14 深夜：用户「取消品番后面的那个收藏图标，用R2的“评论和收藏”样式，价格上面的那条线去掉，放到“评论和收藏”的上面」
      → ⑥ の判子は外し、箱の最下段に 画布 R2（«お客さまの声／お気に入り»・破線の丸の判子＋日本語＋小さな英字）。
      細線は 値段の上 → この行の上 へ移した。DOM は js/kumoju-product.js の buildActRow()。 */
html body.single-product .k-headbox .k-acts{display:flex;gap:10px;margin:16px 0 0;padding:14px 0 0;border-top:1px solid #EFE8DD}
html body.single-product .k-headbox > .k-acts:last-child{margin-bottom:0!important}
html body.single-product .k-headbox .k-acts > button{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:10px;margin:0;padding:6px 8px;
  background:#fff;border:0;text-align:left;font-family:inherit;cursor:pointer;white-space:nowrap;-webkit-tap-highlight-color:transparent}
html body.single-product .k-headbox .k-acts .ic{flex:none;width:38px;height:38px;border-radius:50%;border:1.5px dashed #C9A48F;background:#FBF6F1;
  display:grid;place-items:center;transform:rotate(-8deg);transition:background .2s,border-color .2s}
html body.single-product .k-headbox .k-acts > button:last-child .ic{transform:rotate(7deg)}
html body.single-product .k-headbox .k-acts svg{width:19px;height:19px;fill:none;stroke:#9A6B55;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:fill .2s}
html body.single-product .k-headbox .k-acts .tx{display:flex;flex-direction:column;gap:3px;min-width:0}
html body.single-product .k-headbox .k-acts .tx b{font-size:13.5px;font-weight:600;color:#3F3A32;letter-spacing:.03em}
html body.single-product .k-headbox .k-acts .tx i{font-style:normal;font-family:"Kaisei Tokumin",serif;font-size:10px;letter-spacing:.2em;color:#B5A08F}
html body.single-product .k-headbox .k-acts .n{color:#9A6B55}
/* お気に入り済み：判子を実線に・ハートを塗る */
html body.single-product .k-headbox .k-acts .k-act-fav.is-on .ic{background:#F6EAE3;border-style:solid;border-color:#9A6B55}
html body.single-product .k-headbox .k-acts .k-act-fav.is-on svg{fill:#9A6B55}
/* ⑧ 説明文 → 値段 の間を 18px → 10px（用户「这个上面留白太多了」、赤枠は p.price の margin-top 18px）。
      商品名 → 説明文 が 10px（h1 の mb）なので そろえる。値段の mt 18 と説明文の mb 14 は重なって大きい方の 18 が出ていた → 両方 10。 */
html body.single-product .k-headbox .woocommerce-product-details__short-description{margin-bottom:10px!important}
html body.single-product .k-headbox p.price{margin-top:10px!important}
/* ⑨ «価格: ¥6,800 (税込)»（用户「价格前面加个“售价”之类的小字，后面的“免费送货”去掉」→「换成「価格:」XXX(税込)」）。
      依拠：同業 21 店の商品ページ（.shots/pdp-groups）で 値段の前に字を置く店は 3/21 —— original-pet「価格(税込)」／pet-inori「価格:」／ko-bo「価格 ￥」。
      ほかに gu-home「販売価格」（タイムセール価格と並べるため）・ディアペット「価格：」。
      送料無料は すぐ下の送料カード（FREE SHIPPING）に大きく出ているので 値段の横からは外した（L265 の共通規則は触らず、箱の中だけ上書き）。
      半角のコロン・括弧は用户の打ったまま。p.price は flex・baseline 揃え・gap 10px（実測）なので ::before はそのまま同じ行に並ぶ。 */
html body.single-product .k-headbox p.price::before{content:"価格:";font-family:var(--k-gothic,'Zen Maru Gothic',sans-serif);font-size:13px;font-weight:500;color:var(--k-ink3);letter-spacing:.06em}
html body.single-product .k-headbox p.price::after{content:"(税込)"!important}
html body.single-product .k-headbox p.price,
html body.single-product .k-headbox p.price bdi,
html body.single-product .k-headbox p.price .woocommerce-Price-currencySymbol{color:#9A6B55!important}
html body.single-product .k-headbox .k-pt-pill{background:#F3E4B7!important;border-color:#F3E4B7!important;color:#9C7A16!important}
html body.single-product .k-headbox .k-pt-pill .k-pt-num{color:#9C7A16!important}
html body.single-product .k-headbox .k-pt-pill i{background:#D1A625!important;color:#fff!important}
/* ═══ 第 31〜33 版（2026-09-15）：加購エリア ＝ 選択中の字色・右上の肉球・見出し（M4 の線＋M PLUS Rounded 1c＋※）═══
   経緯：09-14 に見出しの色块・犬の耳と尾・枠なしの選択肢まで上線 → 用户「整个加购区恢复成调整之前的」で 第 20 版の形に戻し、
   そこから画布 page-11〜18 で «見出しのグラデ／角丸／弧線／縁グラデ／下の線 M1〜M5／線に図案／字 F／字の見本 15 種／字の下の帯» を試して、
   用户が選んだのは «下の線 M4 ＋ 字 G1（M PLUS Rounded 1c 500・17px）＋ 全見出しに赤い ※»。
   ⚠️ 依拠：すべて用户の直接指示（同業との照合なし）。確認は clock-plain-round・390px だけ。PC 幅・他の商品は未確認。日本語は一字も変えていない。
   交接：docs/handoff-2026-09-15.md */

/* ① 選択中の選択肢：字だけ陶土色（枠・地色・影は第 20 版までのまま） */
html body.single-product .k-swatch.is-active,
html body.single-product .k-swatch.is-active *{color:#9A6B55!important}
/* ①b 未選択の選択肢：枠線を消して米色の地だけ（画布なし・効果図 sw-sheet «B1»、用户 2026-09-15 選択）。
      枠は transparent にして 1px の幅は残す（選択中に切り替えても大きさがずれない）。L9047 の #E2D6C6 枠・#FDFAF6 地を上書き。 */
html body.single-product .k-swatch:not(.is-active){border-color:transparent!important;background:#F6F1E9!important}

/* ② 選択中の右上：✓ → 陶土色の丸に白い肉球・-15°（22px） */
html body.single-product .k-swatch.is-active::after{content:""!important;font-size:0!important;
  width:22px!important;height:22px!important;top:-8px!important;right:-8px!important;border-radius:50%!important;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'24'%20height%3D'24'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20fill%3D'%23fff'%20d%3D'M12%2011.2%20C15.6%2011.2%2018.6%2014.6%2018.6%2017.4%20C18.6%2019.6%2016.8%2020.6%2014.9%2020.2%20C13.8%2020%2013%2019.6%2012%2019.6%20C11%2019.6%2010.2%2020%209.1%2020.2%20C7.2%2020.6%205.4%2019.6%205.4%2017.4%20C5.4%2014.6%208.4%2011.2%2012%2011.2Z'%2F%3E%3Cellipse%20fill%3D'%23fff'%20cx%3D'5.2'%20cy%3D'10.4'%20rx%3D'2.1'%20ry%3D'2.7'%20transform%3D'rotate(-22%205.2%2010.4)'%2F%3E%3Cellipse%20fill%3D'%23fff'%20cx%3D'9.3'%20cy%3D'6.2'%20rx%3D'2.2'%20ry%3D'2.9'%20transform%3D'rotate(-8%209.3%206.2)'%2F%3E%3Cellipse%20fill%3D'%23fff'%20cx%3D'14.7'%20cy%3D'6.2'%20rx%3D'2.2'%20ry%3D'2.9'%20transform%3D'rotate(8%2014.7%206.2)'%2F%3E%3Cellipse%20fill%3D'%23fff'%20cx%3D'18.8'%20cy%3D'10.4'%20rx%3D'2.1'%20ry%3D'2.7'%20transform%3D'rotate(22%2018.8%2010.4)'%2F%3E%3C%2Fsvg%3E") center/14px 14px no-repeat, #9A6B55!important;
  box-shadow:0 1px 3px rgba(0,0,0,.15)!important;transform:rotate(-15deg)!important}

/* ③ 見出しの下の線（M4）：全幅 3px の淡い帯 ＋ 左端だけ陶土色 26px（図標の真下）。見出しと線の間は 0。
      ⚠️ 2026-09-15 に 64px（画布 page-17 の M4 原版・用户「还是用之前那个长一点的」）を試し、同日「前面那条深色线还是只覆盖在图标下面」で 26px に戻した。
      ⚠️ 変体の見出しには «th.label .k8-step i{flex:1 1 auto;min-width:40px}»（L8763）があり、width だけだと 40px に戻る → min-width と flex も打ち消す。
      ⚠️ margin-top は 1 つ目だけ 0・2 つ目以降 9px になっていた（実測）→ 全部 0。 */
html body.single-product .k8-step,
html body.single-product table.variations th.label .k8-step{border-bottom:3px solid #F0E4D6!important;margin-top:0!important}
html body.single-product .k8-step i,
html body.single-product table.variations th.label .k8-step i{height:3px!important;bottom:-3px!important;width:26px!important;min-width:0!important;flex:none!important;border-radius:0 2px 2px 0}

/* ③b（撤回・2026-09-15）：図標を陶土色の丸 18px（C3）→ 27px の角丸四角（F2＋H8・#AA7C66）まで試して上線したが、
      用户「还是恢复成之前线上的那个样子，一条线的，亲测不好看」で全部外した。26px の米色の丸＋上の ③ の線に戻る。
      作り直すなら .cache/opt-0914/shoot19.js（C 系列）・shoot20.js（F/G/H 系列）。 */

/* ④ 見出しの字：M PLUS Rounded 1c 500・17px（functions.php の Google Fonts に 500 だけ足した）。図標・添え書きは触らない。
      ⚠️ 一度 G3（700・16px）で上線 → 用户「字体换成 G1，搞错了」で 500・17px。 */
html body.single-product table.variations th.label label,
html body.single-product .ppom-input-pet_name > label.form-control-label,
html body.single-product .kumoju-photo-field > .k-field-head,
html body.single-product .ppom-field-wrapper:has(.ppom-input-gift_options) > .k-field-head{
  font-family:'M PLUS Rounded 1c',sans-serif!important;font-weight:500!important;font-size:17px!important;
  letter-spacing:.02em!important;color:#3F3A32!important}
/* ④b 2026-09-15 同日に 18px（＋同色描边 → 描边なし）を試して、用户「标题还是小一个号吧」で 17px に戻した。
      18px のときに足した «字距 0・※ の右 -3px»（お写真の行の折り返し対策）も撤回 —— 17px なら折り返さない（第 33 版の実測）。 */

/* ⑤ 見出しの右肩に赤い ※（用户「所有选项都应该加※」＝ 6 つ全部）。見出しは flex・gap 9px なので margin-left を負にして字に寄せる。
      変体（大きさ・枠の色・卓上スタンド）：::after は L1250 で «：» 消しのため display:none!important → html を足して打ち返す。
      お写真・ギフト：::after が空いている → ※ を置き、右端の添え書きより前へ（order 1 ／ 添え書き 2）。
      お名前：::after は «任意» が使っている → ::before を ※ にし、order で «名前 → ※ → 任意» の順にする。
      ⚠️ «任意»・«あとからでもOK» と ※ が同じ行に並ぶ（用户の指示どおり。文言は触っていない）。 */
html body.single-product form.variations_form table.variations th.label label::after,
html body.single-product .kumoju-photo-field > .k-field-head::after,
html body.single-product .ppom-field-wrapper:has(.ppom-input-gift_options) > .k-field-head::after,
html body.single-product .ppom-input-pet_name > label.form-control-label::before{
  content:"※"!important; display:inline-block!important; order:1; align-self:flex-start; margin-left:-7px!important;
  font-family:'M PLUS Rounded 1c',sans-serif; font-size:11px!important; font-weight:700; line-height:1; color:#C8412F!important;
  transform:translateY(-1px); counter-increment:none!important}
html body.single-product .kumoju-photo-field > .k-field-head > span:not(.k-stepic),
html body.single-product .kumoju-photo-field > .k-field-head em,
html body.single-product .kumoju-photo-field > .k-field-head small,
html body.single-product .ppom-field-wrapper:has(.ppom-input-gift_options) > .k-field-head > span:not(.k-stepic),
html body.single-product .ppom-field-wrapper:has(.ppom-input-gift_options) > .k-field-head em,
html body.single-product .ppom-field-wrapper:has(.ppom-input-gift_options) > .k-field-head small,
html body.single-product .ppom-field-wrapper.pet_name > .form-group > label.form-control-label::after{order:2}
/* ⑥ お写真の欄 ＝ 米色（#F6F1E9）のカード 1 枚：«写真を選ぶ» 胶囊（1 行目）→ 動物 6 匹の線画 → 種類の文 → LINE。
      経緯（2026-09-15）：注意書きを灰緑＋線画（P4）で上線 → 用户「跳出了这个色系，而且没什么设计感」→
      「上传按钮在第一行，胶囊形状，整体背景色用线上那种米色」→ 効果図 cap-sheet «R2»（白地＋陶土色の縁）を選択。
      線画は gpt-image-2（aihubmix）で焼いて陶土色に塗り直したもの（assets/pets-line-terra.jpg、.cache/opt-0914/gen-pets.js）。multiply で白地を消す。
      上传の label は JS（rdSubNotes）がカードの先頭へ動かす。胶囊 56px ＋ 10px ＋ 線画 76px ＝ label の下に 96px 空けて線画を置く。
      文言（🐾 を含む）は一字も変えていない。L8829-8833 の白地・細枠と .kumoju-upload の点線枠を上書き。 */
html body.single-product .k11-sub{background:#F6F1E9!important;border:0!important;border-radius:12px!important;
  position:relative!important;padding:14px 14px 12px!important}
html body.single-product .k11-sub::before{content:""!important;position:absolute!important;left:14px;right:14px;top:80px;height:76px;
  background:url("assets/pets-line-terra.jpg") center/contain no-repeat!important;mix-blend-mode:multiply;pointer-events:none}
html body.single-product .k11-sub > * + *{border-top-color:#E5D8CA!important}
html body.single-product .k11-sub > .k-anypet,
html body.single-product .k11-sub .k-line-desc{color:#6E5A4C!important}
html body.single-product .k11-sub > .k-anypet{padding-top:0!important;border-top:0!important}
html body.single-product .k11-sub .kumoju-upload{box-sizing:border-box!important;height:56px!important;min-height:0!important;margin:0 0 96px!important;
  display:flex!important;flex-wrap:wrap!important;align-content:center!important;align-items:center!important;justify-content:center!important;column-gap:8px!important;row-gap:1px!important;
  background:#fff!important;border:1.5px solid #9A6B55!important;border-radius:999px!important;padding:0 18px!important;text-align:center!important;box-shadow:none!important}
html body.single-product .k11-sub .kumoju-upload svg{width:18px!important;height:18px!important;margin:0!important;padding:0!important;background:none!important;flex:none!important;
  stroke:#7F5741!important;color:#7F5741!important}
html body.single-product .k11-sub .kumoju-upload .u1{margin:0!important;font-size:15px!important;line-height:1.35!important;font-weight:500!important;white-space:nowrap!important;color:#7F5741!important}
html body.single-product .k11-sub .kumoju-upload .u2{flex-basis:100%!important;margin:0!important;font-size:11.5px!important;line-height:1.35!important;white-space:nowrap!important;color:#9A8474!important}
/* ⑦ ギフト枠（.ppom-input-gift_options）＝ 効果図 gf-sheet «K3» ＋ pt-sheet «T3»（用户 2026-09-15 選択）。
      K3：白カード＋陶土色の細枠・見出し帯は浅陶土（#F3E7DB）・行は細線で区切る・のし は米色の胶囊。
      選択中（K 案共通）：チェックは陶土色の塗り＋白いレ点（線上は緑でこの区の色から外れていた）、のし は陶土色の縁・浅い地・陶土色の字。
      T3：«+¥300» は明朝・陶土色で大きく、«無料»（L783 の ::before）は米色の小さな胶囊で控えめに。
      ⚠️ 効果図の 19px だと «やわらかな色の包装紙とリボンで» が «…リボン／で» と折れた → 18px・字距 0・列の間 6px に詰めた。文言は一字も変えていない。 */
html body.single-product .ppom-input-gift_options{background:#fff!important;border:1.5px solid #D9BCA6!important;border-radius:12px!important}
html body.single-product .ppom-input-gift_options > label.form-control-label{background:#F3E7DB!important}
html body.single-product .ppom-input-gift_options > .form-check-inline{border-bottom:1px solid #F1E7DC!important}
html body.single-product .ppom-input-gift_options .k-inside-gift{background:transparent!important}
html body.single-product .ppom-input-gift_options .k-noshi-grid .form-check-label{background:#F6F1E9!important;border-color:transparent!important;border-radius:999px!important}
html body.single-product .ppom-input-gift_options .k-noshi-grid .form-check-label:has(input:checked){border-color:#9A6B55!important;background:#FBF2E9!important;box-shadow:0 0 0 3px rgba(154,107,85,.12)!important}
html body.single-product .ppom-input-gift_options .k-noshi-grid .form-check-label:has(input:checked) span{color:#9A6B55!important;font-weight:500!important}
html body.single-product .ppom-input-gift_options > .form-check-inline input[type=checkbox]{width:20px!important;height:20px!important;border-radius:6px!important}
html body.single-product .ppom-input-gift_options > .form-check-inline input[type=checkbox]:checked{border-color:#9A6B55!important;
  background:#9A6B55 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat!important}
html body.single-product .ppom-input-gift_options > .form-check-inline input[type=checkbox]:checked::before,
html body.single-product .ppom-input-gift_options > .form-check-inline input[type=checkbox]:checked::after{display:none!important}
html body.single-product .ppom-field-wrapper.gift_options > .form-group > .form-check-inline .form-check-label{column-gap:6px!important}
html body.single-product .ppom-field-wrapper.gift_options > .form-group > .form-check-inline .ppom-label-checkbox{column-gap:6px!important}
html body.single-product .ppom-field-wrapper.gift_options > .form-group > .form-check-inline .ppom-option-label-price,
html body.single-product .ppom-field-wrapper.gift_options > .form-group > .form-check-inline .ppom-label-checkbox:not(:has(.ppom-option-label-price))::before{
  align-self:center!important;justify-self:end!important;white-space:nowrap!important;line-height:1!important}
html body.single-product .ppom-field-wrapper.gift_options > .form-group > .form-check-inline .ppom-option-label-price{
  font-family:"Kaisei Tokumin",serif!important;font-size:18px!important;font-weight:600!important;letter-spacing:0!important;color:#9A6B55!important}
html body.single-product .ppom-field-wrapper.gift_options > .form-group > .form-check-inline .ppom-label-checkbox:not(:has(.ppom-option-label-price))::before{
  font-size:12px!important;font-weight:500!important;letter-spacing:.02em!important;padding:5px 10px!important;border-radius:999px!important;background:#F6F1E9!important;color:#8C7B6D!important}
/* ⑧ 加購エリアの間合いを 1 つ目の段に揃える（用户 2026-09-15「标题与标题、标题与选项值的距离不统一…以第一个为基准」）。
      基準（大きさ の段・実測）：見出しの線の下 → 選択肢 14px ／ 選択肢の下 → 次の見出し 32px。
      外れていた 2 か所（実測）：
        お名前 → お写真 ＝ 48px … .ppom-input-pet_name（.form-group）の margin-bottom 16px が 見出しの上の 32px に足されていた
        お写真の線 → カード ＝ 30px … .k11-sub の margin-top 16px（L8829）が線の下の 14px に足されていた
      サムネイル（.kumoju-photo-list）は空なら出さない・出たときだけカードとの間 14px。 */
html body.single-product .ppom-field-wrapper > .form-group.ppom-input-pet_name{margin-bottom:0!important}
html body.single-product .kumoju-photo-field > .k11-sub{margin-top:0!important}
html body.single-product .kumoju-photo-field > .kumoju-photo-list:empty{display:none!important}
html body.single-product .kumoju-photo-field > .kumoju-photo-list:not(:empty){margin-top:0!important;margin-bottom:14px!important}
/* ⑨ 送料カード（p.k-ship-line）＝ カード全面に «実写» ＋ 左に 字 3 段（見出し・説明 2 行・点 3 行）。
      ══ 2026-09-16 改版（B-e 案）══
      きっかけは用户「两处 banner 跟站内都是一个色系，不合适…详情图那种『绿植+原木/榉木+白色氛围』还很搭」
      ＝ 頁の地色も 線画も 字も すべて同じ色相（陶土 18〜29°）で、カードが背景に沈んでいた。
      写真の «木と緑» が このカードで唯一の «別の色» になる。続けて用户「你整个画面尽量用元素和图案填满，
      然后你应该是以人气宠物元素来展示吧？」＝ 右に小さく絵を置くのをやめ、全面に敷いて 犬を出す。
      ⚠️ それまでの白地＋陶土 1 色の線画（assets/ship-scene.jpg ＝ W3）は **使っていない**（線上には残る）。

      絵 ＝ assets/ship-photo.jpg（gpt-image-2／aihubmix。配方 D ＋ 分類頁 banner の LEFT_SPACE の考え方）。
        ⚠️ 全商品ページに出るので «うちの商品» は 1 つも写っていない（時計も額縁も骨壺も不可）。
        ⚠️ 字は 1 字も焼いていない —— 日付や文言は HTML 側。焼いたら文言を直すたびに焼き直しになる。
      置き方：帯の下（32px）から カードの下端まで 全幅、右端合わせの cover。
        ⚠️ 絵の枠は 394×222 ＝ 16:9。**写真も 16:9 で焼いてある** —— 5:2 のままだと左右を 161px 切って
           «字を置くための ボケた左半分» が消える。カードの高さを変えたら 写真も焼き直す。
      字が読めるのは 左に白のベールを重ねているから。実測：字の帯の背景 p90 = 249／字の最暗 = 68。
        ⚠️⚠️ ベールが透明になりきる位置（59% ＝ 232px）より左に 犬が来ると «字が犬にかぶる»
           （用户 2026-09-16「还盖住了狗狗」）。この写真は 主体が 314px から始まる。
           **写真を差し替えたら .cache/opt-0916/ink-left.py で測り直すこと。**目では判らない。
      点 3 行は «左の列の中»。下に横 1 本の白い帯にする A 案は 用户が却下 —— 説明文の下に 60px 空くため。
      ⚠️ 帯（::before）は grid の子のままだと «absolute の基準が grid 領域» になって 176px 幅に縮む
         → grid-column/row を auto に戻してから absolute。
      ⚠️ PC 幅（≥1025px）は未確認。 */
html body.single-product p.k-ship-line{position:relative!important;overflow:hidden!important;box-sizing:border-box!important;
  height:222px!important;min-height:0!important;
  grid-template-columns:176px!important;align-content:start!important;padding:42px 0 0 20px!important}
/* ⚠️ padding-top 42 ＝ 帯 32 ＋ 余白 10。帯を «浮かせて» いるので、字の側が自分で帯をよけないと 札が隠れる。
      内容の高さは 札 36＋10 ／ 説明 48 ／ 点 12＋63 ＝ 169px。222−32＝190 に対し 上下 10px ずつ。
      ⚠️ カードは overflow:hidden —— 間合いを広げると 3 行目の点が黙って切れる。広げたら必ず測り直す。 */
/* 茶色の帯（::before の «FREE SHIPPING»）。字体は Montserrat 600（用户 2026-09-16 夜 指定。
      functions.php の Google Fonts に 600 だけ足してある）。それまでは Shippori Mincho だった。
      ⚠️⚠️ 帯は «写真の上に浮かせる»（absolute）—— 段を 1 つ積むのではない。
         用户の注文は «帯を戻す・高さは変えない» の 2 つ。段にすると 写真の枠が 394×190 ＝ 2.07:1 になり、
         16:9 の写真から 上下 32px を切ることになる（犬の頭が帯に迫る）。浮かせれば カードは 222px のまま、
         写真も 394×222 ＝ 16:9 ちょうどで 1 ピクセルも切れない。
      ⚠️ だから ::after（写真）は top:0 のまま。帯は z-index:2 で その上。
      ⚠️ いちど «出さない» にした（用户「把上面棕色的那个去了更好看」）が、同日 夜に «戻して» と指示。
         背景・色・padding・字間・字の大きさは 上の版（L8623／L8731）のまま使っている。
      ⚠️ 負の margin（L8731 の -12px／L8799 の -16px）は absolute では要らないので 0 に戻す。 */
html body.single-product p.k-ship-line::before{display:block!important;
  grid-column:auto!important;grid-row:auto!important;
  position:absolute!important;top:0!important;left:0!important;width:100%!important;
  box-sizing:border-box!important;margin:0!important;z-index:2!important;
  font-family:'Montserrat',sans-serif!important;font-weight:600!important;
  /* 飾り＝足あとが 字の両脇から «歩いてくる»（効果図 B2、用户 2026-09-16 選択）。
     用户の注文は «宠物元素・不要花里胡哨»。だから 白は透かし（.44 → .28 → .16）で、
     外へ行くほど 小さく（13 → 10 → 8px）薄くする ＝ 遠ざかる／近づいてくる、が читается。
     ⚠️ 帯の地色 #9A6B55 は L8731 の background 一括指定が持っている。ここは background-image だけ
        上書きするので 地色は消えない。background の一括指定をここに書くと 足あたごと消える。
     ⚠️ 位置は «字の中心» 基準（calc(50% ± …)）。字を長くすると 内側の足あとに重なる。
        いまの «FREE SHIPPING» で 字の端から 内側の足あとまで 約 20px。 */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff' fill-opacity='0.44'%3E%3Cg transform='rotate(-12 12 12)'%3E%3Cellipse cx='6.4' cy='9.6' rx='2.5' ry='3.2' transform='rotate(-18 6.4 9.6)'/%3E%3Cellipse cx='11.7' cy='7.2' rx='2.6' ry='3.4'/%3E%3Cellipse cx='17' cy='8.7' rx='2.5' ry='3.2' transform='rotate(18 17 8.7)'/%3E%3Cellipse cx='20.5' cy='13.6' rx='2.1' ry='2.7' transform='rotate(38 20.5 13.6)'/%3E%3Cpath d='M12.1 12.5c3.3 0 6.1 2.5 6.1 5.2 0 2.1-1.7 3.2-3.5 3.2-1 0-1.8-.3-2.6-.3s-1.6.3-2.6.3c-1.8 0-3.5-1.1-3.5-3.2 0-2.7 2.8-5.2 6.1-5.2z'/%3E%3C/g%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff' fill-opacity='0.28'%3E%3Cg transform='rotate(-12 12 12)'%3E%3Cellipse cx='6.4' cy='9.6' rx='2.5' ry='3.2' transform='rotate(-18 6.4 9.6)'/%3E%3Cellipse cx='11.7' cy='7.2' rx='2.6' ry='3.4'/%3E%3Cellipse cx='17' cy='8.7' rx='2.5' ry='3.2' transform='rotate(18 17 8.7)'/%3E%3Cellipse cx='20.5' cy='13.6' rx='2.1' ry='2.7' transform='rotate(38 20.5 13.6)'/%3E%3Cpath d='M12.1 12.5c3.3 0 6.1 2.5 6.1 5.2 0 2.1-1.7 3.2-3.5 3.2-1 0-1.8-.3-2.6-.3s-1.6.3-2.6.3c-1.8 0-3.5-1.1-3.5-3.2 0-2.7 2.8-5.2 6.1-5.2z'/%3E%3C/g%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff' fill-opacity='0.16'%3E%3Cg transform='rotate(-12 12 12)'%3E%3Cellipse cx='6.4' cy='9.6' rx='2.5' ry='3.2' transform='rotate(-18 6.4 9.6)'/%3E%3Cellipse cx='11.7' cy='7.2' rx='2.6' ry='3.4'/%3E%3Cellipse cx='17' cy='8.7' rx='2.5' ry='3.2' transform='rotate(18 17 8.7)'/%3E%3Cellipse cx='20.5' cy='13.6' rx='2.1' ry='2.7' transform='rotate(38 20.5 13.6)'/%3E%3Cpath d='M12.1 12.5c3.3 0 6.1 2.5 6.1 5.2 0 2.1-1.7 3.2-3.5 3.2-1 0-1.8-.3-2.6-.3s-1.6.3-2.6.3c-1.8 0-3.5-1.1-3.5-3.2 0-2.7 2.8-5.2 6.1-5.2z'/%3E%3C/g%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff' fill-opacity='0.44'%3E%3Cg transform='rotate(12 12 12)'%3E%3Cellipse cx='6.4' cy='9.6' rx='2.5' ry='3.2' transform='rotate(-18 6.4 9.6)'/%3E%3Cellipse cx='11.7' cy='7.2' rx='2.6' ry='3.4'/%3E%3Cellipse cx='17' cy='8.7' rx='2.5' ry='3.2' transform='rotate(18 17 8.7)'/%3E%3Cellipse cx='20.5' cy='13.6' rx='2.1' ry='2.7' transform='rotate(38 20.5 13.6)'/%3E%3Cpath d='M12.1 12.5c3.3 0 6.1 2.5 6.1 5.2 0 2.1-1.7 3.2-3.5 3.2-1 0-1.8-.3-2.6-.3s-1.6.3-2.6.3c-1.8 0-3.5-1.1-3.5-3.2 0-2.7 2.8-5.2 6.1-5.2z'/%3E%3C/g%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff' fill-opacity='0.28'%3E%3Cg transform='rotate(12 12 12)'%3E%3Cellipse cx='6.4' cy='9.6' rx='2.5' ry='3.2' transform='rotate(-18 6.4 9.6)'/%3E%3Cellipse cx='11.7' cy='7.2' rx='2.6' ry='3.4'/%3E%3Cellipse cx='17' cy='8.7' rx='2.5' ry='3.2' transform='rotate(18 17 8.7)'/%3E%3Cellipse cx='20.5' cy='13.6' rx='2.1' ry='2.7' transform='rotate(38 20.5 13.6)'/%3E%3Cpath d='M12.1 12.5c3.3 0 6.1 2.5 6.1 5.2 0 2.1-1.7 3.2-3.5 3.2-1 0-1.8-.3-2.6-.3s-1.6.3-2.6.3c-1.8 0-3.5-1.1-3.5-3.2 0-2.7 2.8-5.2 6.1-5.2z'/%3E%3C/g%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff' fill-opacity='0.16'%3E%3Cg transform='rotate(12 12 12)'%3E%3Cellipse cx='6.4' cy='9.6' rx='2.5' ry='3.2' transform='rotate(-18 6.4 9.6)'/%3E%3Cellipse cx='11.7' cy='7.2' rx='2.6' ry='3.4'/%3E%3Cellipse cx='17' cy='8.7' rx='2.5' ry='3.2' transform='rotate(18 17 8.7)'/%3E%3Cellipse cx='20.5' cy='13.6' rx='2.1' ry='2.7' transform='rotate(38 20.5 13.6)'/%3E%3Cpath d='M12.1 12.5c3.3 0 6.1 2.5 6.1 5.2 0 2.1-1.7 3.2-3.5 3.2-1 0-1.8-.3-2.6-.3s-1.6.3-2.6.3c-1.8 0-3.5-1.1-3.5-3.2 0-2.7 2.8-5.2 6.1-5.2z'/%3E%3C/g%3E%3C/svg%3E")!important;
  background-position:calc(50% - 95px) 44%,calc(50% - 116px) 60%,calc(50% - 135px) 44%,
    calc(50% + 95px) 44%,calc(50% + 116px) 60%,calc(50% + 135px) 44%!important;
  background-size:13px 13px,10px 10px,8px 8px,13px 13px,10px 10px,8px 8px!important;
  background-repeat:no-repeat!important}
html body.single-product p.k-ship-line .k9-ic{display:none!important}
/* ⚠️⚠️ 2026-09-16 夜：絵の枠は «帯の下» から（top:32px）。
      用户「顶部的绿植有少了一点点」＝ 帯（浮かせてある 32px）が 写真の上端を覆っていて、
      グリーンの葉がちょうどそこに入っていた（隠れた帯の中の緑の濃さは 1.28%＝全体平均 0.73% の約 2 倍）。
      枠を帯の下から始めると 葉は出てくるが、枠が 394×190 ＝ 2.07:1 になり 16:9 の写真は上下が 31.6px あまる。
      ⚠️ そのあまりを «どこで切るか» が background-position の縦 ——
         75% ＝ 上を 23.7px・下を 7.9px 切る（用户 2026-09-16 が 5 段から選択）。
         狙いは «犬の頭から帯の下まで» と «箱の底から画面の下まで» を揃えること。幾何の答えは 63.4% だが、
         用户は 75% を選んだ（頭の上がもう少し空くほう）。
      ⚠️⚠️ この «犬の頭の位置» を測る道具は 2 回とも失敗している —— 彩度で測ると
         右のグリーンの葉（1 回目）と 窓のカーテンの縁（2 回目）を «犬の頭» と誤判定して 6〜7px 高く出る。
         床の木目も 犬の毛より勾配が高い。**目で確かめること。数字を信じて調整しない。**
      ⚠️ 下は 7.9px しか切らないので 犬の足も箱の底も 画面に入っている（5 段すべてで確認済み）。 */
html body.single-product p.k-ship-line::after{content:""!important;position:absolute!important;left:0!important;right:0!important;
  top:32px!important;bottom:0!important;width:auto!important;height:auto!important;
  background:linear-gradient(to right,rgba(255,255,255,.93) 0%,rgba(255,255,255,.88) 26%,rgba(255,255,255,.45) 43%,rgba(255,255,255,0) 59%),
    url("assets/ship-photo.jpg") 100% 75%/cover no-repeat!important;pointer-events:none;z-index:0}
html body.single-product p.k-ship-line .k-ship-free,
html body.single-product p.k-ship-line .k-ship-lead{grid-column:1!important;grid-row:auto!important;position:relative;z-index:1}
/* 見出しは «角丸の札»（効果図 R4c、用户 2026-09-16 選択）。字の大きさ 20px・字間 .2em は線上のまま。
   ⚠️ 地色は米色のまま・陶土色の細い枠で «面» を作る。
      経緯：最初は枠なしの米色 #F3E7DA だけだったが 用户「那个圆角的色跟背景融合了」。
      実測すると 札 RGB(243,231,219) に対し 地 RGB(243,242,240) ＝ **赤が同値**、明度差 8.8 しか無かった。
      濃くする案（差 19〜28）も出したが 用户は «色は変えず 枠で分ける» を選んだ。
      ⚠️ だから 枠（border）を外すと «また背景に溶ける»。色だけ見て «枠は要らない» と判断しないこと。
   ⚠️ grid の子なので justify-self:start が要る —— 無いと列幅 176px いっぱいに伸びて «札» に見えない。 */
html body.single-product p.k-ship-line .k-ship-free{display:inline-block!important;justify-self:start!important;width:auto!important;
  line-height:1.15!important;margin:0 0 10px!important;font-size:18px!important;
  background:#F3E7DA!important;border:1px solid #C9A98C!important;color:#9A6B55!important;
  border-radius:999px!important;padding:5px 12px 4px!important}
html body.single-product p.k-ship-line .k-ship-lead{line-height:24px!important;margin:0!important}
/* 3 行の点（inc/kumoju-legal.php の kumoju_legal_shipping_line が出す）。図標は SVG の data-uri、字は HTML。 */
html body.single-product p.k-ship-line .k-ship-pts{position:static!important;display:grid!important;grid-template-columns:1fr!important;
  row-gap:6px!important;background:none!important;border:0!important;margin:12px 0 0!important;padding:0!important;
  grid-column:1!important;grid-row:auto!important;position:relative;z-index:1;width:176px}
html body.single-product p.k-ship-line .k-ship-pts .p{display:flex!important;align-items:center;justify-content:flex-start;gap:7px}
html body.single-product p.k-ship-line .k-ship-pts i{flex:0 0 17px;width:17px;height:17px;
  background-position:center;background-size:contain;background-repeat:no-repeat}
html body.single-product p.k-ship-line .k-ship-pts .t{display:flex!important;align-items:baseline;gap:5px;line-height:1.2}
html body.single-product p.k-ship-line .k-ship-pts b{font-family:'M PLUS Rounded 1c',sans-serif!important;font-size:10px!important;
  font-weight:500!important;color:#9A6B55!important;letter-spacing:.01em;white-space:nowrap}
/* ⚠️ 600（700 から下げた。用户 2026-09-16「三个卡片后面的黑色字体不要搞那么粗」）。 */
html body.single-product p.k-ship-line .k-ship-pts em{font-style:normal;font-family:'M PLUS Rounded 1c',sans-serif!important;font-size:11px!important;
  font-weight:600!important;color:#3D322B!important;letter-spacing:.01em;white-space:nowrap}
html body.single-product p.k-ship-line .k-ship-pts .p1 i{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A6B55' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7.5 12 3l9 4.5v9L12 21 3 16.5z'/%3E%3Cpath d='m3 7.5 9 4.5 9-4.5M12 12v9'/%3E%3C/svg%3E")}
html body.single-product p.k-ship-line .k-ship-pts .p2 i{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A6B55' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21.2s6.4-6.1 6.4-10.6a6.4 6.4 0 1 0-12.8 0c0 4.5 6.4 10.6 6.4 10.6z'/%3E%3Ccircle cx='12' cy='10.4' r='2.3'/%3E%3C/svg%3E")}
html body.single-product p.k-ship-line .k-ship-pts .p3 i{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A6B55' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.5h10.5v9.5H2.5z'/%3E%3Cpath d='M13 10h3.7l3.8 3.4V16H13z'/%3E%3Ccircle cx='7' cy='17.6' r='1.7'/%3E%3Ccircle cx='16.7' cy='17.6' r='1.7'/%3E%3C/svg%3E")}
/* ⑩ お届け目安（.k-deliv）＝ 白地 ＋ 右にカートゥーンの線画（assets/deliv-desk.jpg）＋ 左に 札・日付・説明。
      絵は送料カード（ship-scene.jpg）と «同じ一式» —— 画風の公共条項は gen-white.js（W3 を焼いた回）から一字も変えずに使う。
      受け入れは色ではなく «色の帯» で見る：線 色相 18〜29°／彩度 31〜51%／明度 49〜62%（docs/line-art-recipe-2026-09-16.md）。
      この絵（B2・作業台＋吊るした干し花とタグ）の実測は 28°/28%/55%。用户 2026-09-16 が «画面が空く» と指摘したので、
      A5（台だけ）から «左上へ伸びるガーランド» を足した版に差し替えた。
      置き方も送料カードと同じ —— 全面に敷かず、右に «まわりに白を残して» 置く（::after で 180×146・left 182・top 7）。
      字は T1：米色の札＋日付（Kaisei Tokumin 700・18px）＋34px の短い線＋説明 2 行（M PLUS Rounded 1c 11.5px）。
      ⚠️ 発光・縁取り（text-shadow）は付けない（用户 2026-09-16）。重ならないことは «字の右端 176 ＜ 絵の墨の左端 185» で担保している。
      ⚠️ だから «絵を大きくする／字を長くする» ときは必ず測り直す。⚠️ PC 幅は未確認。 */
html body.single-product .k-deliv{display:flex!important;align-items:center!important;box-sizing:border-box!important;
  position:relative!important;overflow:hidden!important;height:160px!important;min-height:0!important;padding:0 0 0 16px!important;
  background:#fff!important;line-height:1.5!important}
/* ⚠️⚠️ 2026-09-16 夜（G2 案）：ここも 線画をやめて 実写に差し替えた。理由は ⑨ とまったく同じ
      （頁も線画も字も 同じ陶土色で沈む／用户「以人气宠物元素来展示」）。線画 assets/deliv-desk.jpg は
      線上に残るが **使っていない**。絵 ＝ assets/deliv-photo.jpg（窓辺で伏せて待つゴールデン）。
      ⚠️ 白のベールの数字は ⑨ と違う（.90/.84 28%/.48 47%/0 66%）。⑨ は «大字の右が空く» と言われて
         59% まで締めたが、こちらは 用户が この見え方で選んでいるので 触らない。
      ⚠️ 枠は 394×160 ＝ 2.46:1、写真は 5:2 ＝ 2.5:1 なのでほぼ切れない。
      ⚠️ 主体（犬）は 228px から。字の右端は 176px。写真を替えたら ink-left.py で測り直す。
      ⚠️⚠️ 2026-09-16 夜：同じ «ゴールデンが窓辺で待つ» 絵を 焼き直して deliv-golden.jpg に替えた。
         用户「氛围感明显不如这个运输的…你这个光线的氛围感，柔和度不如刚刚那个」＝ 直すのは **光** だった。
         ⚠️ 全画面の明暗差で測ると «犬が濃い色» という事実に引きずられて 光を測れない
            （金毛が大きく写るほど数字が上がる）。**犬のいない左 45% だけで測る。**
            実測（明度／明暗差／影%）：送料カード 72.8 / 10.8 / 10.1 ・ 旧 74.9 / 15.9 / 11.8 ・
            新 81.2 / **10.3** / 4.0。旧は 床に窓の光の筋が出ていたのが «硬さ» の正体。
         ⚠️ 旧 assets/deliv-photo.jpg は線上に残るが 使っていない。名前を変えたのは
            画像に版番号の仕組みが無く（js は filemtime、画像は素のまま）、同名だと browser が古い絵を出すため。 */
html body.single-product .k-deliv::after{content:""!important;position:absolute!important;left:0!important;right:0!important;
  top:0!important;bottom:0!important;width:auto!important;height:auto!important;
  background:linear-gradient(to right,rgba(255,255,255,.90) 0%,rgba(255,255,255,.84) 28%,rgba(255,255,255,.48) 47%,rgba(255,255,255,0) 66%),
    url("assets/deliv-golden.jpg") right center/cover no-repeat!important;pointer-events:none;z-index:0}
html body.single-product .k-deliv .k-cal{display:none!important}
html body.single-product .k-deliv .k-deliv-tx{display:block;box-sizing:border-box;max-width:161px!important;min-width:0;position:relative;z-index:1}
html body.single-product .k-deliv .eb{display:inline-block;background:#F3E7DA;border-radius:999px;padding:3px 10px 2px;
  font-size:10.5px;letter-spacing:.14em;color:#9A6B55;font-weight:500;margin-bottom:8px}
html body.single-product .k-deliv b{display:block!important;position:relative;font-size:18px!important;font-weight:700!important;
  color:#2F241D!important;letter-spacing:.02em;white-space:nowrap;margin:0 0 8px!important}
html body.single-product .k-deliv b::after{content:"";position:absolute;left:0;bottom:-6px;width:34px;height:2px;background:#9A6B55;border-radius:2px}
html body.single-product .k-deliv small{display:block!important;font-size:11.5px!important;color:#4E4038!important;line-height:1.85!important;margin-top:8px!important}
html body.single-product .k-deliv small span{display:block;white-space:nowrap}
/* ⚠️ テーマの b／small が font-family を持っていて、箱に書いた指定が継承されない（線上実測で b が Hiragino Sans だった） */
html body.single-product .k-deliv .eb,
html body.single-product .k-deliv small,html body.single-product .k-deliv small span{font-family:'M PLUS Rounded 1c',sans-serif!important}
html body.single-product .k-deliv b{font-family:'Kaisei Tokumin',serif!important}
/* ⑪ お届け目安の下 ＝ 4 リンク ＋ LINE を 1 枚の白いカード（.k-help）に（効果図 C6、用户 2026-09-16 夜 選択）。
      用户「红色框这部分去掉（✓ の保証 3 行），你看看这部分怎么设计串起来好看，大面積绿色肯定是不行的」
      ＋ その前の「现在这四个，一行两个占比高，还显得很空」。
      «散って見えた» 実測：上のカード（包装オプション・お届け目安）＝ 白・直角・枠なし・左右 10・間 10 に対し、
        保証 ＝ 透明／間 20、LINE ＝ 白い胶囊＋細枠／間 24、4 リンク ＝ 透明＋罫線（1 マス 185×110 に中身 70px）／間 18。
        → 地色・形・間合いが揃っていなかった。ここを上のカードと同じ規則にする。
      ・カード：白・直角・枠なし・上のカードとの間 10px・中は 上下 18／左右 12
      ・4 リンク：1 行に 4 つ。線上の «米色の丸に陶土色の図標» はそのまま残す（丸 60px ＝ 図標 40 ＋ 余白 10×2）
      ・LINE：リンクの «下» で締める。白地に #E6DACB の細枠の胶囊（小さな緑の LINE 印は線上のまま）
      ⚠️ 経緯：いちど C5（LINE が上・リンクは 2×2 の米色ブロック）で上線したが、
         用户「视觉上来讲好像并没有C6好看」で C6 に替えた。C5 の数字は git の履歴に残る。
      ⚠️ 大面積の緑（H2）・茶色の地に緑の四角（V 系）は 用户が却下。
      ⚠️ 保証 3 行は js で «作らない» にした（文言ごと削除）。 ⚠️ PC 幅は未確認。 */
html body.single-product .k-help{background:#fff;margin:10px 0 0!important;padding:18px 12px;border:0;border-radius:0;
  display:flex;flex-direction:column}
html body.single-product .k-help nav.k-links4{order:1;display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:0!important;
  margin:0 0 16px!important;border:0!important;background:none!important}
html body.single-product .k-help nav.k-links4 a{flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;
  padding:0 2px!important;gap:8px!important;border:0!important;background:none!important;text-align:center}
html body.single-product .k-help nav.k-links4 a svg{box-sizing:content-box!important;width:40px!important;height:40px!important;padding:10px!important;
  background:#F6EEE5!important;border-radius:50%!important;fill:none;stroke:#9A6B55!important;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
html body.single-product .k-help nav.k-links4 a span{font-size:10.5px!important;letter-spacing:0!important;color:#5A4C3F!important}
html body.single-product .k-help a.k-lineask{order:2;margin:0 4px!important;height:44px!important;background:#fff!important;
  border:1px solid #E6DACB!important;border-radius:999px!important;box-shadow:none!important}
/* 写真を預からない品は 3 つ（.k-links4--3）—— 1 行 3 列に */
html body.single-product .k-help nav.k-links4--3{grid-template-columns:repeat(3,1fr)!important}
html body.single-product .k-help nav.k-links4--3 a{border-right:0!important}
/* ⑫ 加購エリアの並び ＝ ［お届け目安］→［数量＋カートに入れる］→ 細い線 →［4 リンク＋LINE］を 1 枚の白い購入カードの中に
      （効果図 P3、用户 2026-09-16 夜 選択）。
      用户「预计送达日那张图在“カートに入れる”按钮上方，Line 交谈的那部分元素放到按钮下方」。
      お届け目安の字組み ＝ E2a（札と日付を同じ行・日付は Murecho 500 19px・墨の下端を札の下端に揃える）、
      地 ＝ G3（生成り #FBF8F3 のベール ＋ 左上の楕円で «30日ごろ» の下を拭く）。
      ⚠️ 下端揃えは align-items:flex-end ＋ 日付の line-height:1 で 実測 0.5px（札の下端 43.5／日付の墨 44.0）。
         字の大きさを変えたら 測り直す（行の箱ではなく 墨で見る）。
      ⚠️⚠️ 親（.woocommerce-variation-add-to-cart）は flex で 行の間を持っている。0 にしないと
         差し込んだ要素のあいだに 米色の地が 10px ずつ覗いて 白い購入カードが割れる（効果図 1 回目で割れた）。
      ⚠️ 4 リンク＋LINE の入れ物 .k-helpslot は js（rdLinks4）が 変体商品のときだけ作る。単品の型は未確認。
      ⚠️ PC 幅は未確認。 */
html body.single-product form.cart .woocommerce-variation-add-to-cart{row-gap:0!important;gap:0!important}
/* 変体の無い商品では ⑫ の型が効かない（未検証）ので 看板の犬猫は出さない */
.single-product .k-deliv .kb-pet{display:none}
/* ── お届け目安（効果図 P2、用户 2026-09-16 夜「P2推上去试试，日期的字号减少2个度，然后猫狗顶部与上方元素的距离收一收」。
      .cache/opt-0916/board-sheet.jpg の P2 ＋ 日付 27→25px（«ごろ» 15→14px）＋ 犬猫の頭から上の選択肢の箱まで 17→約 8px（看板の上辺 54→45px）。
      2026-09-17 用户「日期的大小减到18px，中间的～也用黑色，后面的ごろ去掉」＋ 前日の「猫狗大小减少1/3，顶部距离再收收」：
        日付 18px・«〜» は日付と同じ #2F241D・«ごろ» は一度外して同日戻した（13px・色は日付と同じ #2F241D）／犬猫 64×44 → 43×29（左右 36px）／看板の上辺 45 → 27px（頭から上の箱まで 約 3px）。
      看板 ＝ ::before（米色 #F6F1E9 に 同系の肉球の柄 #EDE3D6・角丸 14・下に厚み 5px #E6D8C8）／縫い目 ＝ ::after（1.5px 点線 #DCC6B3）。
      犬（左）・猫（右）＝ .kb-pet 64×44（js が入れる）。前足の底が 看板の上辺より 7px 下。
      «お届け目安» ＝ 上辺にかかるリボン（陶土色 #A9785F・白字 13px）。日付の下の点線の真ん中に肉球。説明 ＝ 14px・2 行・時計／ペンの小図標。
      ⚠️ 犬猫の線は «.single-product .k-deliv svg{stroke:セージ}»（1169 行）に負けるので stroke を !important で上書き。
      ⚠️ .kb-pet は上の «単品では出さない» 規則に負けないよう display:block!important。 */
html body.single-product form.cart .woocommerce-variation-add-to-cart > .k-deliv{order:2!important;display:block!important;height:auto!important;min-height:0!important;text-align:center;
  padding:61px 36px 30px!important;margin:0!important;background:#fff!important;position:relative!important;overflow:visible!important;
  width:100%!important;box-sizing:border-box!important}
html body.single-product form.cart .woocommerce-variation-add-to-cart > .k-deliv::before{content:""!important;position:absolute!important;left:16px!important;right:16px!important;top:27px!important;bottom:6px!important;
  border-radius:14px!important;background:#F6F1E9 url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2060%2060%22%3E%3Cg%20fill%3D%22%23EDE3D6%22%3E%3Cg%20transform%3D%22translate%288%2010%29%20rotate%28-18%29%20scale%28.55%29%22%3E%3Cellipse%20cx%3D%2210%22%20cy%3D%2213.2%22%20rx%3D%224.6%22%20ry%3D%223.8%22%2F%3E%3Cellipse%20cx%3D%223.8%22%20cy%3D%228.2%22%20rx%3D%221.7%22%20ry%3D%222.2%22%2F%3E%3Cellipse%20cx%3D%227.6%22%20cy%3D%224.6%22%20rx%3D%221.7%22%20ry%3D%222.3%22%2F%3E%3Cellipse%20cx%3D%2212.4%22%20cy%3D%224.6%22%20rx%3D%221.7%22%20ry%3D%222.3%22%2F%3E%3Cellipse%20cx%3D%2216.2%22%20cy%3D%228.2%22%20rx%3D%221.7%22%20ry%3D%222.2%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2838%2040%29%20rotate%2820%29%20scale%28.55%29%22%3E%3Cellipse%20cx%3D%2210%22%20cy%3D%2213.2%22%20rx%3D%224.6%22%20ry%3D%223.8%22%2F%3E%3Cellipse%20cx%3D%223.8%22%20cy%3D%228.2%22%20rx%3D%221.7%22%20ry%3D%222.2%22%2F%3E%3Cellipse%20cx%3D%227.6%22%20cy%3D%224.6%22%20rx%3D%221.7%22%20ry%3D%222.3%22%2F%3E%3Cellipse%20cx%3D%2212.4%22%20cy%3D%224.6%22%20rx%3D%221.7%22%20ry%3D%222.3%22%2F%3E%3Cellipse%20cx%3D%2216.2%22%20cy%3D%228.2%22%20rx%3D%221.7%22%20ry%3D%222.2%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E") 0 0/58px 58px!important;box-shadow:0 5px 0 #E6D8C8!important;z-index:0!important}
html body.single-product form.cart .woocommerce-variation-add-to-cart > .k-deliv::after{display:block!important;content:""!important;position:absolute!important;left:23px!important;right:23px!important;top:34px!important;bottom:13px!important;
  width:auto!important;height:auto!important;border:1.5px dashed #DCC6B3!important;border-radius:9px!important;background:none!important;z-index:0!important}
html body.single-product form.cart .woocommerce-variation-add-to-cart > .k-deliv .k-cal{display:none!important}
html body.single-product form.cart .woocommerce-variation-add-to-cart > .k-deliv .kb-pet{display:block!important;position:absolute;z-index:3;top:3px;width:43px;height:29px;line-height:0}
html body.single-product form.cart .woocommerce-variation-add-to-cart > .k-deliv .kb-pet svg{width:100%!important;height:100%!important;stroke:#A9785F!important;fill:none!important}
html body.single-product form.cart .woocommerce-variation-add-to-cart > .k-deliv .kb-pet.dog{left:36px}
html body.single-product form.cart .woocommerce-variation-add-to-cart > .k-deliv .kb-pet.cat{right:36px}
html body.single-product form.cart .woocommerce-variation-add-to-cart > .k-deliv .k-deliv-tx{position:relative;z-index:1;max-width:none!important}
html body.single-product form.cart .woocommerce-variation-add-to-cart > .k-deliv .hd{display:block!important;position:static!important;margin:0!important;padding:0!important;background:none!important;box-shadow:none!important}
html body.single-product form.cart .woocommerce-variation-add-to-cart > .k-deliv .hd::before,html body.single-product form.cart .woocommerce-variation-add-to-cart > .k-deliv .hd::after{display:none!important}
html body.single-product form.cart .woocommerce-variation-add-to-cart > .k-deliv .eb{position:absolute!important;left:50%!important;top:-48px!important;transform:translateX(-50%);white-space:nowrap;display:inline-block!important;
  background:#A9785F!important;color:#fff!important;border:0!important;border-radius:4px!important;font-size:13px!important;font-weight:500;letter-spacing:.14em!important;
  padding:5px 16px 4px!important;margin:0!important;box-shadow:0 2px 0 #8E624D}
html body.single-product form.cart .woocommerce-variation-add-to-cart > .k-deliv .eb::before,html body.single-product form.cart .woocommerce-variation-add-to-cart > .k-deliv .eb::after{content:""!important;display:block!important;position:absolute!important;top:7px!important;width:0!important;height:0!important;
  background:none!important;border-radius:0!important;margin:0!important;border:10px solid #93664F!important;z-index:-1}
html body.single-product form.cart .woocommerce-variation-add-to-cart > .k-deliv .eb::before{left:-12px!important;border-left-color:transparent!important}
html body.single-product form.cart .woocommerce-variation-add-to-cart > .k-deliv .eb::after{right:-12px!important;left:auto!important;border-right-color:transparent!important}
html body.single-product form.cart .woocommerce-variation-add-to-cart > .k-deliv b{display:block!important;position:relative;text-align:center;font-family:'M PLUS Rounded 1c',sans-serif!important;font-size:18px!important;font-weight:500!important;line-height:1!important;
  color:#2F241D!important;letter-spacing:.01em!important;white-space:nowrap;margin:4px 0 14px!important;padding:0 0 14px!important;
  background:linear-gradient(to right,#D4BBA8 50%,transparent 50%) left bottom/7px 1.5px repeat-x!important}
html body.single-product form.cart .woocommerce-variation-add-to-cart > .k-deliv b::after{display:block!important;content:""!important;position:absolute!important;left:50%!important;bottom:-8px!important;width:30px!important;height:16px!important;
  margin-left:-15px;background:#F6F1E9 url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22%23C9A48E%22%3E%3Cellipse%20cx%3D%2210%22%20cy%3D%2213.2%22%20rx%3D%224.6%22%20ry%3D%223.8%22%2F%3E%3Cellipse%20cx%3D%223.8%22%20cy%3D%228.2%22%20rx%3D%221.7%22%20ry%3D%222.2%22%2F%3E%3Cellipse%20cx%3D%227.6%22%20cy%3D%224.6%22%20rx%3D%221.7%22%20ry%3D%222.3%22%2F%3E%3Cellipse%20cx%3D%2212.4%22%20cy%3D%224.6%22%20rx%3D%221.7%22%20ry%3D%222.3%22%2F%3E%3Cellipse%20cx%3D%2216.2%22%20cy%3D%228.2%22%20rx%3D%221.7%22%20ry%3D%222.2%22%2F%3E%3C%2Fsvg%3E") center/13px no-repeat!important;border-radius:0!important}
html body.single-product form.cart .woocommerce-variation-add-to-cart > .k-deliv b .tl{color:#2F241D;margin:0 1px}
html body.single-product form.cart .woocommerce-variation-add-to-cart > .k-deliv b .gr{font-size:13px;color:#2F241D;margin-left:3px;letter-spacing:.04em}
/* 日付の両側の飾り（効果図 Q3、.cache/opt-0916/datedeco-sheet.jpg ／ 用户 2026-09-17「样式的话我想要Q3样式」）＝ 大中小の星 3 つずつ、陶土の浅い色。
   字の両端にくっつけてあるので 日付が長くなっても重ならない（左 ＝ .d1::before、右 ＝ .gr::after ＝ «ごろ» の後ろ）。 */
html body.single-product form.cart .woocommerce-variation-add-to-cart > .k-deliv b .d1::before,html body.single-product form.cart .woocommerce-variation-add-to-cart > .k-deliv b .gr::after{content:"";display:inline-block;width:32px;height:20px;vertical-align:middle;background:center/contain no-repeat}
html body.single-product form.cart .woocommerce-variation-add-to-cart > .k-deliv b .d1::before{margin-right:8px;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2040%2024%22%3E%3Cpath%20d%3D%22M10%203Q10.9%207.1%2015%208Q10.9%208.9%2010%2013Q9.1%208.9%205%208Q9.1%207.1%2010%203Z%22%20fill%3D%22%23D9B9A3%22%2F%3E%3Cpath%20d%3D%22M28%206Q29.44%2012.56%2036%2014Q29.44%2015.44%2028%2022Q26.56%2015.44%2020%2014Q26.56%2012.56%2028%206Z%22%20fill%3D%22%23C49A83%22%2F%3E%3Cpath%20d%3D%22M8%2016.4Q8.468%2018.532%2010.6%2019Q8.468%2019.468%208%2021.6Q7.532%2019.468%205.4%2019Q7.532%2018.532%208%2016.4Z%22%20fill%3D%22%23E0C7B5%22%2F%3E%3C%2Fsvg%3E")}
html body.single-product form.cart .woocommerce-variation-add-to-cart > .k-deliv b .gr::after{margin-left:8px;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2040%2024%22%3E%3Cpath%20d%3D%22M12%206Q13.44%2012.56%2020%2014Q13.44%2015.44%2012%2022Q10.56%2015.44%204%2014Q10.56%2012.56%2012%206Z%22%20fill%3D%22%23C49A83%22%2F%3E%3Cpath%20d%3D%22M30%203Q30.9%207.1%2035%208Q30.9%208.9%2030%2013Q29.1%208.9%2025%208Q29.1%207.1%2030%203Z%22%20fill%3D%22%23D9B9A3%22%2F%3E%3Cpath%20d%3D%22M32%2016.4Q32.468%2018.532%2034.6%2019Q32.468%2019.468%2032%2021.6Q31.532%2019.468%2029.4%2019Q31.532%2018.532%2032%2016.4Z%22%20fill%3D%22%23E0C7B5%22%2F%3E%3C%2Fsvg%3E")}
html body.single-product form.cart .woocommerce-variation-add-to-cart > .k-deliv small{display:inline-block!important;text-align:left;margin:0!important;padding:0!important;background:none!important}
html body.single-product form.cart .woocommerce-variation-add-to-cart > .k-deliv small span{display:block!important;white-space:nowrap;font-size:14px!important;line-height:1.75!important;color:#54463B!important}
html body.single-product form.cart .woocommerce-variation-add-to-cart > .k-deliv small .l2 span{display:inline!important}
html body.single-product form.cart .woocommerce-variation-add-to-cart > .k-deliv small > span:first-child::before,html body.single-product form.cart .woocommerce-variation-add-to-cart > .k-deliv small .l2::before{content:"";display:inline-block;width:15px;height:15px;margin:0 5px -2px 0;background:center/contain no-repeat}
html body.single-product form.cart .woocommerce-variation-add-to-cart > .k-deliv small > span:first-child::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23B07A5E%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%228.5%22%2F%3E%3Cpath%20d%3D%22M12%207.5V12l3%202%22%2F%3E%3C%2Fsvg%3E")}
html body.single-product form.cart .woocommerce-variation-add-to-cart > .k-deliv small .l2::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23B07A5E%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15.5%204.5l4%204L9%2019l-5%201%201-5z%22%2F%3E%3Cpath%20d%3D%22M13%207l4%204%22%2F%3E%3C%2Fsvg%3E")}
html body.single-product form.cart .woocommerce-variation-add-to-cart > .k-atc-row{order:3!important;margin-top:0!important;padding:14px 16px 16px!important}
html body.single-product form.cart .woocommerce-variation-add-to-cart > .k-helpslot{order:4;width:100%;background:#fff;box-sizing:border-box;padding:0 16px 4px}
html body.single-product form.cart .woocommerce-variation-add-to-cart > .k-helpslot .k-help{margin:0!important;padding:16px 0 14px!important;border-top:1px solid #EFE4D8!important;background:none!important}
html body.single-product form.cart .woocommerce-variation-add-to-cart > .k-helpslot .k-help nav.k-links4 a svg{width:30px!important;height:30px!important;padding:8px!important}
html body.single-product form.cart .woocommerce-variation-add-to-cart > .k-helpslot .k-help a.k-lineask{margin:0!important}
/* ════════ 商品页改版 2026-09-11 ここまで ════════ */

/* ── 購入カードの下の «確認稿» カード（.k-okcard、js の buildOkCard が form.cart の直後に入れる。2026-09-16 夜）
      用户「将那个金毛狗狗的那个图片放到这个加购选项区的下方，然后你看看现在适合加什么文案，做成什么图，放到线上」。
      上 ＝ 写真 assets/deliv-golden.jpg（1024×410 ＝ 2.5:1）を 370×148 に «切らずに» 敷く ＋ 上の壁に 見出し 1 行（16px）。
      下 ＝ 3 行（図標 ＋ 2 行の字）。点線で区切る。
      箱の寸法は 送料カード（p.k-ship-line）に揃えた：左右 10px・白・角なし・上の間 10px。
      ⚠️ 見出しは 1 行で «犬の背より上・右の植木より左» に置く。2 行にすると 2 行目の末尾が しっぽにかかる（初回に上線して判明）。
         写真を替えたら 字が犬にかぶらないか 目で確かめる。
      ⚠️ 説明の字は 13px 以上（用户 2026-09-16「字体最小的要13px」）。 */
html body.single-product .k-okcard{display:block;margin:10px 0 0!important;background:#fff;box-sizing:border-box;padding:0 0 6px}
html body.single-product .k-okcard .ok-ph{position:relative;height:0;padding-top:40%;
  background:linear-gradient(100deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.72) 30%,rgba(255,255,255,0) 52%),
    url("assets/deliv-golden.jpg") center/cover no-repeat}
html body.single-product .k-okcard .ok-h{position:absolute;left:20px;top:16px;margin:0!important;font-family:'M PLUS Rounded 1c',sans-serif!important;font-size:16px!important;
  font-weight:500!important;line-height:1.4!important;color:#3F3A32!important;letter-spacing:.02em;white-space:nowrap}
html body.single-product .k-okcard .ok-h br{display:none}
html body.single-product .k-okcard .ok-h::before{content:"";display:block;width:26px;height:3px;border-radius:2px;background:#C9876A;margin:0 0 7px}
html body.single-product .k-okcard .ok-pts{list-style:none!important;margin:0!important;padding:4px 20px 8px!important}
html body.single-product .k-okcard .ok-pts li{display:flex!important;align-items:center;gap:12px;padding:12px 0!important;margin:0!important;list-style:none!important;
  background:linear-gradient(to right,#E4D6C8 50%,transparent 50%) left bottom/6px 1px repeat-x}
html body.single-product .k-okcard .ok-pts li:last-child{background:none}
html body.single-product .k-okcard .ok-pts li::before{display:none!important}
html body.single-product .k-okcard .ok-pts i{flex:0 0 34px;width:34px;height:34px;border-radius:50%;background:#F6F1E9 center/20px no-repeat}
html body.single-product .k-okcard .ok-pts .p1 i{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%239A6B55%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%225.5%22%20width%3D%2218%22%20height%3D%2213%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22m3.5%207%208.5%206%208.5-6%22%2F%3E%3C%2Fsvg%3E")}
html body.single-product .k-okcard .ok-pts .p2 i{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%239A6B55%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%205.5h16v10H10l-4%203.5v-3.5H4z%22%2F%3E%3Cpath%20d%3D%22M8.5%2010.5h7%22%2F%3E%3C%2Fsvg%3E")}
html body.single-product .k-okcard .ok-pts .p3 i{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%239A6B55%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%228.5%22%2F%3E%3Cpath%20d%3D%22m8%2012.2%202.7%202.7L16.2%209.4%22%2F%3E%3C%2Fsvg%3E")}
html body.single-product .k-okcard .ok-pts span{display:block;min-width:0}
html body.single-product .k-okcard .ok-pts b{display:block;font-family:'M PLUS Rounded 1c',sans-serif!important;font-size:13px!important;font-weight:500!important;
  color:#9A6B55!important;line-height:1.5!important;white-space:nowrap}
html body.single-product .k-okcard .ok-pts em{display:block;font-style:normal;font-family:'M PLUS Rounded 1c',sans-serif!important;font-size:15px!important;font-weight:500!important;
  color:#3D322B!important;line-height:1.5!important;white-space:nowrap}

/* ── «この品について» を 1 枚の白地に（2026-09-17）。
      用户「把商品详情页的整个板块从标题开始放到一个白色背景里，注意左右的间距与上面整体对齐，下面以直角的形式接上下面的规格板块，无缝衔接」。
      白地 ＝ 標題（.wd-accordion-title）＋ 本文（.wc-tab-inner）。左右の端は 上のカードと同じ x=10・幅 370（親の余白のまま）。
      中の字は 左右 18px 内側 ＝ すぐ下の «仕様»（.k7-spec、padding 20px 18px）と同じ ＝ 字の左端が上下で揃う。
      下端は直角のまま «仕様» へ（.k7-spec の margin-top 56px を 0 に）。
      ⚠️ 本文の 1 つ目（01 POINT）の margin-top 48px は 白地の外へ «突き抜ける»（margin の相殺）ので .wc-tab-inner を flow-root にしてある。
      ⚠️ 標題の上の 米色の間（上の確認稿カードの下端から 約 86px）は 触っていない。 */
html body.single-product .woocommerce-tabs .wd-accordion-item.k-open > .wd-accordion-title{background:#fff!important;padding:24px 18px 16px!important;margin:0!important;border-radius:0!important}
html body.single-product .woocommerce-tabs .wd-accordion-item.k-open > .woocommerce-Tabs-panel{padding-top:0!important;border-radius:0!important}
html body.single-product .woocommerce-tabs .wd-accordion-item.k-open .wc-tab-inner{display:flow-root!important;background:#fff!important;padding:0 18px 0!important;/* 下 36→0（用户 2026-09-17「底部与参数接轨的地方，高度至少要减少一半」） */box-sizing:border-box!important;border-radius:0!important}
html body.single-product .woocommerce-tabs .wd-accordion-item.k-open .wc-tab-inner > :first-child{margin-top:8px!important}
html body.single-product .woocommerce-tabs .wd-accordion-item.k-open .woocommerce-Tabs-panel > .k7-spec{margin-top:0!important;border-radius:0!important}

/* ── «この品について» の中身の組み（効果図 D1＋D4、用户 2026-09-17「D1的脚印+D4的尾巴，你给我推线上」）。
      経緯：同業 13 店の実測（docs/pdp-description-typesetting-survey-2026-09-17.md）→ A1〜A12 → A6（色帯）→ B1〜B8 → C1〜C10 → C8（筆の色帯）→ D1〜D6。
      ・番号（.k5-pt「01 POINT」）と 英字の眉題（ABOUT）は 出さない（用户「我不想标题出现数字POINT 01、02、03」／A6 以降 ABOUT なし）。
      ・大標題 ＝ Kaisei Tokumin 23px 700・左寄せ・前に陶土色の肉球。
      ・小標題 ＝ Kaisei Tokumin 20px 700（本文の黒体と はっきり違う字にする：用户「标题和正文字体很像」）
                 前に陶土色の肉球 ／ 字の下半分に手描きの筆の色帯 ／ 色帯の端が 巻いた猫のしっぽ。
      ・本文 ＝ 15px・400・行高 1.75・#3A332C・段落の間 14px（調査：400 が 12/13 店、13/13 店が今の #69624F より濃い、段落間 0 は 0/9 店）。
      ・図 ＝ 1 行 1 枚・角丸なし（調査 6/6・0/6）。図注は残して 左寄せ 13px。図は本文の後（元の並びのまま）。
      ⚠️ 小標題が長いと しっぽの分（右 38px）で 2 行に折れる。13 字の「作る前に仕上がりを見せます」が 字間 .04em で折れたので 字間 0 にした。
         390px で 7 つとも 1 行なのを確かめてある（clock-plain-round）。
      ⚠️ 他の商品・PC 幅は未確認。 */
html body.single-product .woocommerce-tabs .wd-accordion-item.k-open .wc-tab-inner .k5-pt{display:none!important}
html body.single-product .woocommerce-tabs .wd-accordion-item.k-open .wd-accordion-title-text::before{content:none!important;display:none!important}
html body.single-product .woocommerce-tabs .wd-accordion-item.k-open > .wd-accordion-title{justify-content:flex-start!important;text-align:left!important}
html body.single-product .woocommerce-tabs .wd-accordion-item.k-open .wd-accordion-title-text{font-family:"Kaisei Tokumin",serif!important;font-size:23px!important;font-weight:700!important;color:#3A2A1F!important;letter-spacing:.06em!important;
  padding-left:32px!important;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cellipse%20cx%3D%2210%22%20cy%3D%2213.2%22%20rx%3D%224.6%22%20ry%3D%223.8%22%20fill%3D%22%23A9785F%22%2F%3E%3Cellipse%20cx%3D%223.8%22%20cy%3D%228.2%22%20rx%3D%221.7%22%20ry%3D%222.2%22%20fill%3D%22%23A9785F%22%2F%3E%3Cellipse%20cx%3D%227.6%22%20cy%3D%224.6%22%20rx%3D%221.7%22%20ry%3D%222.3%22%20fill%3D%22%23A9785F%22%2F%3E%3Cellipse%20cx%3D%2212.4%22%20cy%3D%224.6%22%20rx%3D%221.7%22%20ry%3D%222.3%22%20fill%3D%22%23A9785F%22%2F%3E%3Cellipse%20cx%3D%2216.2%22%20cy%3D%228.2%22%20rx%3D%221.7%22%20ry%3D%222.2%22%20fill%3D%22%23A9785F%22%2F%3E%3C%2Fsvg%3E") left center/24px no-repeat!important}
html body.single-product .woocommerce-tabs .wd-accordion-item.k-open .wc-tab-inner > p{font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP","Yu Gothic",sans-serif!important;font-size:15px!important;font-weight:400!important;line-height:1.75!important;color:#3A332C!important;letter-spacing:0!important;margin:0 0 14px!important}
html body.single-product .woocommerce-tabs .wd-accordion-item.k-open .wc-tab-inner > p + .k-dimgs,html body.single-product .woocommerce-tabs .wd-accordion-item.k-open .wc-tab-inner > p + .k-dsh{margin-top:0!important}
html body.single-product .woocommerce-tabs .wd-accordion-item.k-open .wc-tab-inner .k-dimgs{display:grid!important;grid-template-columns:1fr!important;gap:18px!important;margin:18px 0 18px!important}
html body.single-product .woocommerce-tabs .wd-accordion-item.k-open .wc-tab-inner .k-dimg{width:auto!important}
html body.single-product .woocommerce-tabs .wd-accordion-item.k-open .wc-tab-inner .k-dimg img{width:100%!important;height:auto!important;aspect-ratio:1/1!important;object-fit:cover;border-radius:0!important;display:block}
html body.single-product .woocommerce-tabs .wd-accordion-item.k-open .wc-tab-inner .k-dimg span{display:block;text-align:left!important;font-size:13px!important;color:#8A7E6E!important;margin:6px 0 0!important;line-height:1.5!important;font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP","Yu Gothic",sans-serif!important;font-weight:400!important}
html body.single-product .woocommerce-tabs .wd-accordion-item.k-open .wc-tab-inner .k-dsh:not(.k-dsh--top){margin-top:52px!important}
html body.single-product .woocommerce-tabs .wd-accordion-item.k-open .wc-tab-inner .k-dsh::before,html body.single-product .woocommerce-tabs .wd-accordion-item.k-open .wc-tab-inner .k-dsh::after{display:none!important}
html body.single-product .woocommerce-tabs .wd-accordion-item.k-open .wc-tab-inner .k-dsh{display:table!important;position:relative!important;border:0!important;box-shadow:none!important;text-align:left!important;margin:0 0 18px!important;color:#3A2A1F!important;
  font-family:"Kaisei Tokumin",serif!important;font-size:20px!important;font-weight:700!important;letter-spacing:0!important;line-height:1.5!important;
  padding:2px 38px 4px 30px!important;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cellipse%20cx%3D%2210%22%20cy%3D%2213.2%22%20rx%3D%224.6%22%20ry%3D%223.8%22%20fill%3D%22%23A9785F%22%2F%3E%3Cellipse%20cx%3D%223.8%22%20cy%3D%228.2%22%20rx%3D%221.7%22%20ry%3D%222.2%22%20fill%3D%22%23A9785F%22%2F%3E%3Cellipse%20cx%3D%227.6%22%20cy%3D%224.6%22%20rx%3D%221.7%22%20ry%3D%222.3%22%20fill%3D%22%23A9785F%22%2F%3E%3Cellipse%20cx%3D%2212.4%22%20cy%3D%224.6%22%20rx%3D%221.7%22%20ry%3D%222.3%22%20fill%3D%22%23A9785F%22%2F%3E%3Cellipse%20cx%3D%2216.2%22%20cy%3D%228.2%22%20rx%3D%221.7%22%20ry%3D%222.2%22%20fill%3D%22%23A9785F%22%2F%3E%3C%2Fsvg%3E") left 2px center/22px no-repeat,url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2040%2034%22%20fill%3D%22none%22%20stroke%3D%22%23B98468%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M2%2028C14%2030%2026%2027%2030%2018S27%204%2021%207s-2%2011%205%209%22%2F%3E%3C%2Fsvg%3E") right 0 bottom 0/32px 28px no-repeat,url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20300%2030%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M4%2018C40%2010%2080%2022%20120%2015S210%209%20250%2016S290%2020%20296%2014L294%2026C250%2030%20210%2022%20170%2026S80%2030%2040%2027S8%2026%206%2026Z%22%20fill%3D%22%23EBCFBA%22%2F%3E%3C%2Fsvg%3E") 26px 92%/calc(100% - 54px) 52% no-repeat!important}
html body.single-product .woocommerce-tabs .wd-accordion-item.k-open .wc-tab-inner .k-dsh--top{margin-top:12px!important}

/* ── «この品について» の大見出し（効果図 F2、用户 2026-09-17「F2」。.cache/opt-0917/title-f-sheet-1.jpg）
      下の 仕様／ご注意／よくあるご質問 と同じ型：日本語 13px Shippori Mincho 600 字間 1.56px ＋ 英字 30px 同 600 字間 2.4px 行高 39px、中央。箱の上から 20px。
      英字 «FEATURES» は js（relabel の末尾）が 見出しの字の後ろに span.k-ttl-en で入れる。
      英字の下に 細線と 足あと 4 つ（斜めに歩く・濃淡交互）の区切り 160×18。
      ⚠️ すぐ上の «D1＋D4» の段の 大見出し（Kaisei 23px・肉球）を ここで上書きしている。小見出し（肉球＋筆＋しっぽ）は そのまま。 */
html body.single-product .woocommerce-tabs .wd-accordion-item.k-open > .wd-accordion-title{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;text-align:center!important;padding:20px 18px 22px!important}
html body.single-product .woocommerce-tabs .wd-accordion-item.k-open .wd-accordion-title-text{font-family:"Kaisei Tokumin",serif!important;font-size:13px!important;font-weight:600!important;letter-spacing:1.56px!important;color:#3F3A32!important;line-height:normal!important;
  text-align:center!important;padding:0!important;background:none!important;display:block!important}
html body.single-product .woocommerce-tabs .wd-accordion-item.k-open .k-ttl-en{display:block!important;font-family:"Kaisei Tokumin",serif!important;font-size:30px!important;font-weight:600!important;letter-spacing:2.4px!important;line-height:39px!important;
  color:#2E2923!important;margin-top:2px!important;white-space:nowrap;text-align:center!important;padding-bottom:26px!important;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%2018%22%3E%3Cpath%20d%3D%22M4%209H52M108%209H156%22%20stroke%3D%22%23CDB3A0%22%20stroke-width%3D%221%22%2F%3E%3Cg%20transform%3D%22translate(58%204)%20rotate(-18%2010%2010)%20scale(0.5)%22%3E%3Cellipse%20cx%3D%2210%22%20cy%3D%2213.2%22%20rx%3D%224.6%22%20ry%3D%223.8%22%20fill%3D%22%23D6B29B%22%2F%3E%3Cellipse%20cx%3D%223.8%22%20cy%3D%228.2%22%20rx%3D%221.7%22%20ry%3D%222.2%22%20fill%3D%22%23D6B29B%22%2F%3E%3Cellipse%20cx%3D%227.6%22%20cy%3D%224.6%22%20rx%3D%221.7%22%20ry%3D%222.3%22%20fill%3D%22%23D6B29B%22%2F%3E%3Cellipse%20cx%3D%2212.4%22%20cy%3D%224.6%22%20rx%3D%221.7%22%20ry%3D%222.3%22%20fill%3D%22%23D6B29B%22%2F%3E%3Cellipse%20cx%3D%2216.2%22%20cy%3D%228.2%22%20rx%3D%221.7%22%20ry%3D%222.2%22%20fill%3D%22%23D6B29B%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(70%201)%20rotate(-18%2010%2010)%20scale(0.6)%22%3E%3Cellipse%20cx%3D%2210%22%20cy%3D%2213.2%22%20rx%3D%224.6%22%20ry%3D%223.8%22%20fill%3D%22%23C49A83%22%2F%3E%3Cellipse%20cx%3D%223.8%22%20cy%3D%228.2%22%20rx%3D%221.7%22%20ry%3D%222.2%22%20fill%3D%22%23C49A83%22%2F%3E%3Cellipse%20cx%3D%227.6%22%20cy%3D%224.6%22%20rx%3D%221.7%22%20ry%3D%222.3%22%20fill%3D%22%23C49A83%22%2F%3E%3Cellipse%20cx%3D%2212.4%22%20cy%3D%224.6%22%20rx%3D%221.7%22%20ry%3D%222.3%22%20fill%3D%22%23C49A83%22%2F%3E%3Cellipse%20cx%3D%2216.2%22%20cy%3D%228.2%22%20rx%3D%221.7%22%20ry%3D%222.2%22%20fill%3D%22%23C49A83%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(84%204)%20rotate(-18%2010%2010)%20scale(0.5)%22%3E%3Cellipse%20cx%3D%2210%22%20cy%3D%2213.2%22%20rx%3D%224.6%22%20ry%3D%223.8%22%20fill%3D%22%23D6B29B%22%2F%3E%3Cellipse%20cx%3D%223.8%22%20cy%3D%228.2%22%20rx%3D%221.7%22%20ry%3D%222.2%22%20fill%3D%22%23D6B29B%22%2F%3E%3Cellipse%20cx%3D%227.6%22%20cy%3D%224.6%22%20rx%3D%221.7%22%20ry%3D%222.3%22%20fill%3D%22%23D6B29B%22%2F%3E%3Cellipse%20cx%3D%2212.4%22%20cy%3D%224.6%22%20rx%3D%221.7%22%20ry%3D%222.3%22%20fill%3D%22%23D6B29B%22%2F%3E%3Cellipse%20cx%3D%2216.2%22%20cy%3D%228.2%22%20rx%3D%221.7%22%20ry%3D%222.2%22%20fill%3D%22%23D6B29B%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(95%201)%20rotate(-18%2010%2010)%20scale(0.6)%22%3E%3Cellipse%20cx%3D%2210%22%20cy%3D%2213.2%22%20rx%3D%224.6%22%20ry%3D%223.8%22%20fill%3D%22%23B98468%22%2F%3E%3Cellipse%20cx%3D%223.8%22%20cy%3D%228.2%22%20rx%3D%221.7%22%20ry%3D%222.2%22%20fill%3D%22%23B98468%22%2F%3E%3Cellipse%20cx%3D%227.6%22%20cy%3D%224.6%22%20rx%3D%221.7%22%20ry%3D%222.3%22%20fill%3D%22%23B98468%22%2F%3E%3Cellipse%20cx%3D%2212.4%22%20cy%3D%224.6%22%20rx%3D%221.7%22%20ry%3D%222.3%22%20fill%3D%22%23B98468%22%2F%3E%3Cellipse%20cx%3D%2216.2%22%20cy%3D%228.2%22%20rx%3D%221.7%22%20ry%3D%222.2%22%20fill%3D%22%23B98468%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center bottom/160px 18px no-repeat!important}

/* ── «この品について» 小標題を 生図の帯 I6 に（用户 2026-09-17「你用I6」。docs/img/headbg-2026-09-17/unit3-sheet.jpg）
      ・帯 ＝ assets/about-head-cat.jpg（900×176、水彩の横幅＋右端に眠る猫。gpt-image-2 生成、字は入れていない）。
        幅は本文・写真と同じ 100%、比は aspect-ratio で固定。字は帯の «塗りの段»（上 30.7%〜下 96.0%）の縦中央。
      ・字 ＝ Kaisei Tokumin 17px 700（D1＋D4 の 20px から下げた：帯の中に収めるため）。肉球・しっぽ（::before/::after と背景 SVG）は外す。
      ・上との間 ＝ 52px → 28px（用户「每个标题的顶部与上一段的内容的距离收一收」）→ margin-top 0（用户「可以直接变成0」）。
      ・本文 ＝ M PLUS Rounded 1c 400・左揃えのまま。図注 ＝ M PLUS Rounded 1c 400・中央（用户「正文字体换了…保持左对齐」「图片下面居中」）。
      390px で 7 つとも 1 行・字と帯の端の猫／葉が重ならない（両端 ≥54px）ことを確かめてある（clock-plain-round）。
      ⚠️ 他の商品・PC 幅は未確認。 */
html body.single-product .woocommerce-tabs .wd-accordion-item.k-open .wc-tab-inner .k-dsh{display:flex!important;align-items:center!important;justify-content:center!important;text-align:center!important;box-sizing:border-box!important;
  width:100%!important;max-width:none!important;aspect-ratio:900/176!important;margin:0 0 18px!important;padding:6% 11% 0.78% 11%!important;
  background:url("assets/about-head-cat.jpg") center/100% 100% no-repeat!important;border:0!important;box-shadow:none!important;border-radius:0!important;
  font-family:"Kaisei Tokumin",serif!important;font-size:17px!important;font-weight:700!important;letter-spacing:.02em!important;line-height:1.4!important;color:#3A2A1F!important;white-space:nowrap}
html body.single-product .woocommerce-tabs .wd-accordion-item.k-open .wc-tab-inner .k-dsh::before,html body.single-product .woocommerce-tabs .wd-accordion-item.k-open .wc-tab-inner .k-dsh::after{content:none!important;display:none!important}
html body.single-product .woocommerce-tabs .wd-accordion-item.k-open .wc-tab-inner .k-dsh:not(.k-dsh--top){margin-top:0!important}
html body.single-product .woocommerce-tabs .wd-accordion-item.k-open .wc-tab-inner .k-dsh--top{margin-top:12px!important}
html body.single-product .woocommerce-tabs .wd-accordion-item.k-open .wc-tab-inner > p{font-family:'M PLUS Rounded 1c',sans-serif!important;font-weight:400!important;text-align:left!important}
html body.single-product .woocommerce-tabs .wd-accordion-item.k-open .wc-tab-inner .k-dimg span{font-family:'M PLUS Rounded 1c',sans-serif!important;font-weight:400!important;text-align:center!important}

/* ── «この品について» の詳細写真と図注（用户 2026-09-17）
      ・角丸は試したが 直角に戻す（用户「换回原来的直角」）。
      ・⚠️ 比は «元の写真の比» のまま。D1＋D4 の段で aspect-ratio:1/1 を掛けて 全部を正方形に切っていた（4:3 の写真も上下が切れていた）。
        用户は比を変えてと一度も言っていない（「我都没有让你调整过比例，你给我偷偷换了」）ので 外す。1 行 1 枚のまま。
        比は js の tagAspect() が width/height 属性から --k-ar に入れる（読み込み前も高さを確保するため）。
      ・図注 ＝ 13px 400 #8A7E6E → 14px 500 #6A5E51（用户「加粗一个号，变大一点，颜色深一点」）。 */
html body.single-product .woocommerce-tabs .wd-accordion-item.k-open .wc-tab-inner .k-dimg img{aspect-ratio:var(--k-ar,auto)!important;height:auto!important;object-fit:initial!important;border-radius:0!important}
html body.single-product .woocommerce-tabs .wd-accordion-item.k-open .wc-tab-inner .k-dimg span{font-size:14px!important;font-weight:500!important;color:#6A5E51!important}

/* ── 板块大标题の飾り（効果図 S9、用户 2026-09-17「用S9」。docs/img/headbg-2026-09-17/sf-sheet.jpg）
      対象：この品について（.k-ttl-en）／仕様・ご注意・よくあるご質問（.k5-chap > .k-dh .en）。字組みは F2 のまま。
      ・英字の下 ＝ 細い線の上を歩く小さな猫（assets/sec-orn-walkcat.png、160px 幅）。F2 の «細線＋足あと» を置き換える。
      ・英字の左右 ＝ 毛糸玉（assets/sec-orn-yarn.png、28×10）。右は左右反転。英字の実幅 --enw は js の measureTitleEn() が入れる。
        .k-enw（測り終えた印）が無いうちは 左右の飾りを出さない。
      ・飾りは gpt-image-2 で生成し、陶土色 #9A6B55 ＋ 透明度の PNG にしてある（白地・米色地どちらでも白い四角が出ない）。
      ・上の小さい日本語 13px → 15px（用户「日文的字体稍微再弄大一点，小了」）。
      ⚠️ «ご注文の流れ»（.k5-bn .hd）は構造が違うので まだ当てていない。PC 幅も未確認。 */
html body.single-product .woocommerce-tabs .wd-accordion-item.k-open .k-ttl-en,
html body.single-product .k5-chap > .k-dh .en{position:relative!important;padding-bottom:37px!important;background:url("assets/sec-orn-walkcat.png?v=8d31b2df") center bottom/160px auto no-repeat!important}
html body.single-product .woocommerce-tabs .wd-accordion-item.k-open .k-ttl-en.k-enw::before,html body.single-product .woocommerce-tabs .wd-accordion-item.k-open .k-ttl-en.k-enw::after,
html body.single-product .k5-chap > .k-dh .en.k-enw::before,html body.single-product .k5-chap > .k-dh .en.k-enw::after{content:""!important;position:absolute!important;top:20px!important;width:28px!important;height:10px!important;margin-top:-5px!important;
  background:url("assets/sec-orn-yarn.png") center/contain no-repeat!important;pointer-events:none}
html body.single-product .woocommerce-tabs .wd-accordion-item.k-open .k-ttl-en.k-enw::before,html body.single-product .k5-chap > .k-dh .en.k-enw::before{left:calc(50% - var(--enw) / 2 - 38px)!important}
html body.single-product .woocommerce-tabs .wd-accordion-item.k-open .k-ttl-en.k-enw::after,html body.single-product .k5-chap > .k-dh .en.k-enw::after{left:calc(50% + var(--enw) / 2 + 10px)!important;transform:scaleX(-1)!important}
html body.single-product .woocommerce-tabs .wd-accordion-item.k-open .wd-accordion-title-text,
html body.single-product .k5-chap > .k-dh .jp{font-size:15px!important}
/* «この品について» の見出し枠の 下の余白 22px → 0（用户 2026-09-17「这个位置的下面…高度直接设置为0px」）。上・左右は そのまま */
html body.single-product .woocommerce-tabs .wd-accordion-item.k-open > .wd-accordion-title{padding-bottom:0!important}


/* ── «ご注文の流れ»（.k5-flow）を 上の «仕様» と 下の «ご注意» につなぐ（効果図 D＋L3、用户 2026-09-17「L3」。
      docs/img/headbg-2026-09-17/fl-sheet.jpg（D）・fl2-sheet.jpg（L3））。⚠️ 配色と中身は変えない（用户「很喜欢这段的配色和设计样式，这个不要乱动」）。
      ・衔接（D）＝ 角丸 10px→直角、影なし、上下の隙間 10px→0、中身の左右 12→18px（仕様・ご注意と縦の線をそろえる）。
        ⚠️ 上の隙間は L9516 «.product-tabs-wrapper .k5-chap + .k5-flow» が効いているので 同じ形の選択子で打ち消す。
      ・見出し帯（L3）＝ 帯を四辺から離す（上・左右 18px、角丸 6px）／四隅に淡い L 字／英字の左右に生成り色の毛糸玉／
        見出しの下に 短い淡い線（120px）と その右寄りを歩く小さい猫。
        毛糸玉の位置は 字の実幅 --tw（js の measureTitleEn()）。測る前（.k-tw なし）は出さない。
      ・飾りの画像は 板块大标题 S9 と同じもの（gpt-image-2 生成）を生成り色 #F6F1E9 に塗り替えた透過 PNG。 */
html body.single-product .product-tabs-wrapper .k5-flow,html body.single-product .k5-bn.k5-flow{border-radius:0!important;box-shadow:none!important}
html body.single-product .product-tabs-wrapper .k5-flow,html body.single-product .k5-bn.k5-flow,
html body.single-product .product-tabs-wrapper .k5-chap + .k5-flow{margin-top:0!important;margin-bottom:0!important}
html body.single-product .k5-flow + .k5-chap,html body.single-product .product-tabs-wrapper .k5-flow + .k5-chap{margin-top:0!important}
html body.single-product .k5-flow .bd{padding-left:18px!important;padding-right:18px!important}
html body.single-product .k5-flow .hd{position:relative!important;margin:18px 18px 0!important;border-radius:6px!important}
html body.single-product .k5-flow .hd::before{content:"";position:absolute;inset:6px;pointer-events:none;background:linear-gradient(rgba(246,241,233,.55),rgba(246,241,233,.55)) left top/14px 1px no-repeat,linear-gradient(rgba(246,241,233,.55),rgba(246,241,233,.55)) left top/1px 14px no-repeat,linear-gradient(rgba(246,241,233,.55),rgba(246,241,233,.55)) right top/14px 1px no-repeat,linear-gradient(rgba(246,241,233,.55),rgba(246,241,233,.55)) right top/1px 14px no-repeat,linear-gradient(rgba(246,241,233,.55),rgba(246,241,233,.55)) left bottom/14px 1px no-repeat,linear-gradient(rgba(246,241,233,.55),rgba(246,241,233,.55)) left bottom/1px 14px no-repeat,linear-gradient(rgba(246,241,233,.55),rgba(246,241,233,.55)) right bottom/14px 1px no-repeat,linear-gradient(rgba(246,241,233,.55),rgba(246,241,233,.55)) right bottom/1px 14px no-repeat}
html body.single-product .k5-flow .hd .tt{position:relative!important;padding-bottom:28px!important;
  background:url("assets/sec-orn-cat-cream.png") calc(50% + 38px) bottom/28px auto no-repeat,linear-gradient(rgba(246,241,233,.5),rgba(246,241,233,.5)) center bottom/120px 1px no-repeat!important}
html body.single-product .k5-flow .hd .tt.k-tw::before,html body.single-product .k5-flow .hd .tt.k-tw::after{content:"";position:absolute;top:15px;width:26px;height:10px;margin-top:-5px;
  background:url("assets/sec-orn-yarn-cream.png") center/contain no-repeat;pointer-events:none}
html body.single-product .k5-flow .hd .tt.k-tw::before{left:calc(50% - var(--tw) / 2 - 36px)}
html body.single-product .k5-flow .hd .tt.k-tw::after{left:calc(50% + var(--tw) / 2 + 10px);transform:scaleX(-1)}

/* ── 確認稿カードと «この品について» の間の米色の空き（86px）と灰色の線を外し、箱の間 10px にそろえる
      （用户 2026-09-17「棕色框的内容区就不要了，直接去掉，保留一致的留白高度」）。
      内訳：.product-tabs-wrapper の上 margin 40 ＋ padding 34 ／ .wd-accordion-item の上 margin 24 ／
            灰色の線 ＝ Woodmart の .woocommerce-tabs::before（2px の上罫）。
      ⚠️ 間の高さを決めているのは 直前の .container の margin-bottom 25px（wrapper の上 margin と相殺して大きい方が残る）。
         要約欄 .summary-inner の margin-bottom:-20px と合わせて、24px で «10px» になる（実測で合わせた。wrapper 側を触っても変わらない）。
      ⚠️ .k-open（手機幅でだけ付く）のある頁に限定 ―― PC の並びは触らない。 */
html body.single-product .product-tabs-wrapper:has(.wd-accordion-item.k-open){margin-top:0!important;padding-top:0!important}
html body.single-product .container:has(+ .product-tabs-wrapper .wd-accordion-item.k-open){margin-bottom:24px!important}
html body.single-product .product-tabs-wrapper:has(.wd-accordion-item.k-open) .woocommerce-tabs::before{content:none!important;display:none!important}
html body.single-product .woocommerce-tabs .wd-accordion-item.k-open{margin-top:0!important}

/* 2026-09-17 確認稿の説明：「2 回まで」を途中で折り返さない（kumoju-legal.php が span を付ける） */
body.single-product .k-proof-note .k-nobr{white-space:nowrap}

/* ── «この品について» 卖点ごとの塗りカード ＋ 胶囊框の見出し（効果図 P2、用户 2026-09-17「P2」。docs/img/headbg-2026-09-17/pill-sheet.jpg）
      ・カード .k-pcard は js（rdPointCards）が «見出し＋続く p／ul／.k-dimgs» を包んで作る。地・枠・角丸は «ご注文の流れ» STEP 1/2 と同じ
        （#FCF9F4・1px #E6DACB・10px）。左右は -8px はみ出させて 写真の幅の減りを 10px に抑える（334 → 324）。
      ・見出し ＝ I6 の帯を外し、胶囊框 assets/about-pill-catdog.png（900×214、gpt-image-2 生成・字なし。左端に猫・右端に犬）。
        9-slice：左 153／右 180 px は伸ばさず、中央だけ字幅に合わせて横に伸ばす。枠の内側（上線 60〜下線 210）を画面で 50px に
        （倍率 1/3 → 高さ 71.3・左端 51・右端 60）。字は枠の内側の縦中央、カードの上の縁の中央に載せる（枠の中心がカードの縁）。
      ・本文 p は «.wc-tab-inner > p» の規則（L10000・L10039）が包んだ後は当たらないので、同じ値をここで当て直す（字体・字号・行間・段落の間は 変えていない）。
      ・390px・clock-plain-round で 7 つの見出しが 1 行・カード内（最長 336px／カード 350px）を確かめてある。⚠️ PC 幅・他の商品は未確認。 */
html body.single-product .woocommerce-tabs .wd-accordion-item.k-open .wc-tab-inner .k-pcard{position:relative;margin:0 -8px;padding:50px 12px 62px;background:#FCF9F4;border:1px solid #E6DACB;border-top:0;border-bottom:0;border-radius:0}
/* 2026-09-17 用户「推这个：左右拉通＋草叶花边」（docs/img/headbg-2026-09-17/pall-vine-long.jpg）：
   7 枚のカードを縦につなげ、左右の縦線を通す。上端・下端だけ実線＋角丸。卖点のあいだの横線は 草叶の花边（assets/about-divider-grass.png、
   gpt-image-2 生成・P2 の枝葉の画風）をカードの幅いっぱいに置き、見出しの胶囊框がその中央に載る。
   先頭・末尾の印（--first／--last）は js の rdPointCards() が付ける（間に隠れた .k5-pt があるので :first-of-type や + は効かない）。 */
html body.single-product .woocommerce-tabs .wd-accordion-item.k-open .wc-tab-inner .k-pcard--first{margin-top:50px;border-top:1px solid #E6DACB;border-radius:10px 10px 0 0}
html body.single-product .woocommerce-tabs .wd-accordion-item.k-open .wc-tab-inner .k-pcard--last{border-bottom:1px solid #E6DACB;border-radius:0 0 10px 10px;padding-bottom:18px;margin-bottom:18px!important}   /* 下の «仕様» と 0px で貼りついていた（用户 2026-09-17「很窒息」）→ 24px → 18px（用户「18px就够了」） */
html body.single-product .woocommerce-tabs .wd-accordion-item.k-open .wc-tab-inner .k-pcard--first.k-pcard--last{border-radius:10px}
html body.single-product .woocommerce-tabs .wd-accordion-item.k-open .wc-tab-inner .k-pcard:not(.k-pcard--first)::before{content:"";position:absolute;left:-1px;right:-1px;top:-8px;height:15px;background:url("assets/about-divider-grass.png") center/100% 100% no-repeat;pointer-events:none}
html body.single-product .woocommerce-tabs .wd-accordion-item.k-open .wc-tab-inner .k-pcard > :last-child{margin-bottom:0!important}
html body.single-product .woocommerce-tabs .wd-accordion-item.k-open .wc-tab-inner .k-pcard > p{font-family:'M PLUS Rounded 1c',sans-serif!important;font-size:15px!important;font-weight:400!important;line-height:1.75!important;color:#3A332C!important;letter-spacing:0!important;margin:0 0 14px!important;text-align:left!important}
html body.single-product .woocommerce-tabs .wd-accordion-item.k-open .wc-tab-inner .k-pcard > p + .k-dimgs{margin-top:0!important}
html body.single-product .woocommerce-tabs .wd-accordion-item.k-open .wc-tab-inner .k-pcard > .k-dsh{position:absolute!important;top:0!important;left:50%!important;transform:translate(-50%,-45px)!important;
  width:auto!important;max-width:none!important;aspect-ratio:auto!important;height:71.3px!important;box-sizing:border-box!important;margin:0!important;padding:18.7px 60px 0 51px!important;
  /* ⚠️ 2026-09-22：足あとを足した版（about-pill-paws.png）に差し替え、
     切り分けを 153/180 → 300/300、描く幅を 51/60 → 100/100px に広げた。
     理由：border-image の «帽子»（左右）は定幅・等倍で描かれるが、真ん中は
     文字の長さに合わせて横に伸びる（実測 139〜225px ＝ 1.6 倍の開き）。
     足あとを帽子の中に収めれば 伸びの影響を一切受けない。
     足あとは 帽子の内側の縁（元絵 x300）に届く前（x274）で 0 まで薄めてあるので、
     継ぎ目に残るのは 平らなクリーム色だけ ＝ どれだけ伸びても分からない。
     ⚠️ border-image-width は border-width（0）とは別物で **版面には影響しない**。
        だから 100px に広げても 文字の位置は 1px も動かない。
     ⚠️ 元絵 about-pill-catdog.png は残してある（戻すときはこの 1 行を戻すだけ）。
     ⚠️⚠ 絵を焼き直したら **url の ?v= を必ず新しい md5 に変えること**。
        テーマの静的ファイルは Cache-Control: max-age=31536000（1 年）で配られるので、
        同じ名前のまま差し替えても 誰のブラウザにも 1 年間 届かない
        （2026-09-22：足あとの位置を直したのに 自分の無頭ブラウザにも届かず、
         サーバ上の md5 は一致しているのに «変わっていない» に見えた）。
        値は  md5sum child-theme/assets/about-pill-paws.png | cut -c1-8
     作り直し：python .cache/opt-0921/_pillpaws.py */
  background:none!important;border:0 solid transparent!important;border-image:url("assets/about-pill-paws.png?v=83676d2c") 0 300 0 300 fill / 0 100px 0 100px stretch!important;
  display:flex!important;align-items:center!important;justify-content:center!important;text-align:center!important;white-space:nowrap!important;
  font-family:"Kaisei Tokumin",serif!important;font-size:17px!important;font-weight:700!important;letter-spacing:.02em!important;line-height:1.3!important;color:#3A2A1F!important}

/* «仕様» の表の外枠（.k-spec）の四隅を 卖点の大枠と同じ 10px の角丸に（用户 2026-09-17）。
   行の中のラベル／値の span に地色があり 角を塗りつぶすので overflow:hidden で角の外だけ切る。枠線・地・行は変えない。 */
html body.single-product .k5-chap.k7-spec .k-spec{border-radius:10px!important;overflow:hidden!important}

/* 購入カードの下の «確認稿» 図（.k-okcard--img、2026-09-17 候補 B）。図の中に地色があるので カードの白地・下余白は外す。角丸 12px は CSS で付ける（図は直角で書き出してある）。 */
html body.single-product .k-okcard.k-okcard--img{background:transparent!important;padding:0!important}
html body.single-product .k-okcard.k-okcard--img img{display:block;width:100%;height:auto;border-radius:12px}

/* ── 送料カード（p.k-ship-line）：高さは中身なり・帯の下の白い線（用户 2026-09-17）
      ・経緯：字を ×1.2（最小 12px）にした版を一度上線 → 写真が拡大して箱が字に重なり、右へずらすと犬の耳が切れた
        → 用户「调整成小字版，狗狗完全展示，文案完全展示」で 字の大きさ・列幅 176px・写真の位置は 元に戻した。
      ・残したのは 2 つ：
        ① 高さ 222px 固定をやめて中身なり（交期の文を 2 文にしてから 3 行目の点が overflow:hidden で切れていた）。
        ② «棕色的框底部一条白线»：帯（::before）の実高が 31.89px、写真（::after）は top:32px → 0.11px の隙間にカードの白地が出ていた。
           帯を 32px に固定し、写真は 31px から（帯の下に 1px 潜らせる）。 */
html body.single-product p.k-ship-line{height:auto!important;padding:42px 0 14px 20px!important}
html body.single-product p.k-ship-line::before{height:32px!important;padding:0!important;line-height:32px!important}
html body.single-product p.k-ship-line::after{top:31px!important;background-position:0 0,calc(100% + 22px) 75%!important}
/* ⚠️ 中身なりで 222 → 269px になり 写真が少し拡大 → «お届けも»«または日本郵便» の末尾が箱の左端に 約 8px 重なった。
      写真だけ右へ 22px（犬の右端 345px → 367px、カード幅 394px の内側。耳は切れない）。 */

/* ── 色のある選択肢（.k-swatch-grid--radio の中で 色見本 .k-sw-c を持つボタン）を 他の選択肢とそろえる（用户 2026-09-18）
      ・選択の ○（.k-sw-r）は出さない（選択中は 既存の «字が陶土色＋右上の肉球» で分かる）。
      ・色見本は 22px の角丸四角 → 16px の丸 → 20px（用户「左边圆再大一点」）。
      ・名前（大）と説明（小）は ~~中央揃え~~ → **左揃え**（下の 2026-09-29）。
      ⚠️ 向き（.k-sw-o）のボタンは対象外（:has(.k-sw-c) で絞っている）。

      ⚠️⚠️ **2026-09-29：«塊ごと中央» をやめて «左にそろえる» に変えた。**
      用户「针对这种有色块的，你左边色块还是对齐吧，文字你看看怎么调合适，不然不好看」。
      2026-09-18 は 2 列を auto auto にして justify-content:center ＝ 塊全体を中央に置いていたが、
      **2 列目が字なりの幅なので、名前の長さでボタンごとに丸の x が動く**
      （実測 round-pouch：むらさき 39 / みずいろ 37 / こげ茶 45px）。
      5 つ並ぶと 丸がガタガタに見える —— これが «不好看» の正体。
      → 2 列目を **1fr**（どのボタンも同じ幅）、justify-content は **start**。
        丸は padding の位置で全部そろい、字は左端でそろう。
      ⚠️ 字を中央のままにすると 丸はそろうが 字の左端がガタつくので、字も左に。 */
html body.single-product .k-swatch-grid--radio .k-swatch:has(.k-sw-c){grid-template-columns:auto 1fr!important;justify-content:start!important;column-gap:9px!important;padding-left:11px!important}
html body.single-product .k-swatch-grid--radio .k-swatch:has(.k-sw-c) .k-sw-r{display:none!important}
html body.single-product .k-swatch-grid--radio .k-swatch:has(.k-sw-c) .k-sw-c{grid-column:1!important;grid-row:1 / -1!important;width:20px!important;height:20px!important;border-radius:50%!important;margin:0!important}
html body.single-product .k-swatch-grid--radio .k-swatch:has(.k-sw-c) .k-sw-t,
html body.single-product .k-swatch-grid--radio .k-swatch:has(.k-sw-c) .k-sw-s,
html body.single-product .k-swatch-grid--radio .k-swatch:has(.k-sw-c) .k-sw-p{grid-column:2!important;text-align:left!important}

/* ── お届け目安：日付の行（効果図 V4、用户 2026-09-18「v4吧」。docs/img/headbg-2026-09-17/deliv-sheet.jpg）
      ・星（Q3、.d1::before／.gr::after）は外す。同業 16 店で 日付の両側を装飾で埋める店は 0。
      ・上に «本日ご注文で»、日付の前に車の図標、«ごろ» → «ごろお届け»、説明の下に お急ぎの入口（js が同じ頁の Q&A を開く）。
      依拠：docs/pdp-delivery-survey-2026-09-18.md（起算点 9/16・図標 3/16・送達で書く 5/16・購入エリアの急ぎ入口 4/16）。 */
html body.single-product form.cart .woocommerce-variation-add-to-cart > .k-deliv b .d1::before,
html body.single-product form.cart .woocommerce-variation-add-to-cart > .k-deliv b .gr::after{content:none!important;display:none!important}
html body.single-product .k-deliv .k-dl-lab{display:block;text-align:center;font-family:'M PLUS Rounded 1c',sans-serif;font-size:13px;font-weight:500;color:#9A6B55;letter-spacing:.06em;margin:0 0 2px}
html body.single-product .k-deliv .k-dl-truck{display:inline-block;width:26px;height:26px;vertical-align:middle;margin:0 8px 0 0}
html body.single-product .k-deliv .k-dl-truck svg{width:26px;height:26px;fill:none;stroke:#9A6B55;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
html body.single-product .k-deliv .k-dl-truck svg circle{fill:#FBF6EF}
html body.single-product .k-deliv .k-dl-rush{display:block;margin:8px 0 0;font-family:'M PLUS Rounded 1c',sans-serif;font-size:12.5px;font-weight:500;color:#9A6B55!important;text-decoration:underline;text-underline-offset:3px}

/* ── 仕様・ご注意・よくあるご質問 の外側の地に ごく淡い足あと（用户 2026-09-18、効果図 C。docs/img/headbg-2026-09-17/chappaw-sheet2.jpg）
      ・柄は お届け目安の看板（.k-deliv::before）と同じ SVG・58px の敷き詰め。地色は そのまま、足あとの色だけ 地より約 14 暗く。
        仕様 地 #DDD2C2 → 足あと #CFC3B1／ご注意・よくあるご質問 地 #E9E3DA → 足あと #DBD4CA。
      ・A（約 5）・B（約 9）は «看不到»、D・E は濃すぎ → C。確認稿の図（okbanner-proof.jpg）の足あと（地より平均 約 15 暗い）とほぼ同じ濃さ。
      ・表・注意カード・Q&A の枠は それぞれ地色を持っているので、柄が出るのは外側の余白だけ。
      ・2026-09-18 確認稿の図の足あと #EFE3D6 をそのまま使う版を一度上線 → 地の濃い仕様では足あとが地より明るく浮いた。
        用户の基準「背景能感觉到有，但咋一看不会注意到，深色的背景脚印不能太亮色，浅色的背景脚印不能太深色」で W12 に決定
        （docs/img/headbg-2026-09-17/chappaw-sheet3.jpg）：各地より 明度で約 12 暗く、確認稿の足あとと同じ «暖かい暗くなり方»（R:G:B ＝ 11:18:24）。
        仕様 #DDD2C2 → #D5C5B1／ご注意・Q&A #E9E3DA → #E1D6C9（上に書いた C の #CFC3B1／#DBD4CA は使っていない）。
      ・敷き詰め 58px → 64px（用户「脚印可以稍微大一丢丢」）。 */
html body.single-product .k5-chap.k7-spec{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2060%2060%22%3E%3Cg%20fill%3D%22%23D5C5B1%22%3E%3Cg%20transform%3D%22translate%288%2010%29%20rotate%28-18%29%20scale%28.55%29%22%3E%3Cellipse%20cx%3D%2210%22%20cy%3D%2213.2%22%20rx%3D%224.6%22%20ry%3D%223.8%22%2F%3E%3Cellipse%20cx%3D%223.8%22%20cy%3D%228.2%22%20rx%3D%221.7%22%20ry%3D%222.2%22%2F%3E%3Cellipse%20cx%3D%227.6%22%20cy%3D%224.6%22%20rx%3D%221.7%22%20ry%3D%222.3%22%2F%3E%3Cellipse%20cx%3D%2212.4%22%20cy%3D%224.6%22%20rx%3D%221.7%22%20ry%3D%222.3%22%2F%3E%3Cellipse%20cx%3D%2216.2%22%20cy%3D%228.2%22%20rx%3D%221.7%22%20ry%3D%222.2%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2838%2040%29%20rotate%2820%29%20scale%28.55%29%22%3E%3Cellipse%20cx%3D%2210%22%20cy%3D%2213.2%22%20rx%3D%224.6%22%20ry%3D%223.8%22%2F%3E%3Cellipse%20cx%3D%223.8%22%20cy%3D%228.2%22%20rx%3D%221.7%22%20ry%3D%222.2%22%2F%3E%3Cellipse%20cx%3D%227.6%22%20cy%3D%224.6%22%20rx%3D%221.7%22%20ry%3D%222.3%22%2F%3E%3Cellipse%20cx%3D%2212.4%22%20cy%3D%224.6%22%20rx%3D%221.7%22%20ry%3D%222.3%22%2F%3E%3Cellipse%20cx%3D%2216.2%22%20cy%3D%228.2%22%20rx%3D%221.7%22%20ry%3D%222.2%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E")!important;background-size:64px 64px!important;background-repeat:repeat!important}
html body.single-product .k5-chap.k7-notes,
html body.single-product .k5-chap.k7-faq{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2060%2060%22%3E%3Cg%20fill%3D%22%23E1D6C9%22%3E%3Cg%20transform%3D%22translate%288%2010%29%20rotate%28-18%29%20scale%28.55%29%22%3E%3Cellipse%20cx%3D%2210%22%20cy%3D%2213.2%22%20rx%3D%224.6%22%20ry%3D%223.8%22%2F%3E%3Cellipse%20cx%3D%223.8%22%20cy%3D%228.2%22%20rx%3D%221.7%22%20ry%3D%222.2%22%2F%3E%3Cellipse%20cx%3D%227.6%22%20cy%3D%224.6%22%20rx%3D%221.7%22%20ry%3D%222.3%22%2F%3E%3Cellipse%20cx%3D%2212.4%22%20cy%3D%224.6%22%20rx%3D%221.7%22%20ry%3D%222.3%22%2F%3E%3Cellipse%20cx%3D%2216.2%22%20cy%3D%228.2%22%20rx%3D%221.7%22%20ry%3D%222.2%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2838%2040%29%20rotate%2820%29%20scale%28.55%29%22%3E%3Cellipse%20cx%3D%2210%22%20cy%3D%2213.2%22%20rx%3D%224.6%22%20ry%3D%223.8%22%2F%3E%3Cellipse%20cx%3D%223.8%22%20cy%3D%228.2%22%20rx%3D%221.7%22%20ry%3D%222.2%22%2F%3E%3Cellipse%20cx%3D%227.6%22%20cy%3D%224.6%22%20rx%3D%221.7%22%20ry%3D%222.3%22%2F%3E%3Cellipse%20cx%3D%2212.4%22%20cy%3D%224.6%22%20rx%3D%221.7%22%20ry%3D%222.3%22%2F%3E%3Cellipse%20cx%3D%2216.2%22%20cy%3D%228.2%22%20rx%3D%221.7%22%20ry%3D%222.2%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E")!important;background-size:64px 64px!important;background-repeat:repeat!important}

/* ── お届け目安の中身 ＝ 3 つの段（効果図 B4、用户 2026-09-18「B4，你把图标下面的几个字弄小点」。docs/img/headbg-2026-09-17/deliv-mock4-sheet.jpg）
      ・看板（犬猫・リボン・米色の地・足あと）はそのまま。中は «ご注文 › 確認稿 › お届け» の 1 行＋遅れる条件＋お急ぎの入口。
      ・具体的な日付は出さない（用户 2026-09-18／同業 16 店で日付を出すのは 1 店のみ）。js の buildDelivery() が組む。
      ・段の名前は 18px（看板の b の既定）→ 10.5px（用户「弄小点」）→ 15px（用户「15px就差不多了」）、その下の説明は 10px のまま（用户「仅此而已」）。 */
html body.single-product .k-deliv .k-dl-fl{display:grid;grid-template-columns:1fr 12px 1fr 12px 1fr;align-items:start;margin:2px 0 8px}
html body.single-product .k-deliv .k-dl-fl .st{text-align:center;font-family:'M PLUS Rounded 1c',sans-serif;font-size:10px;font-weight:500;color:#6B5040;line-height:1.35}
html body.single-product .k-deliv .k-dl-fl .st i{display:flex;width:30px;height:30px;margin:0 auto 4px;border-radius:50%;background:#FFFCF8;border:1px solid #E6D6C4;align-items:center;justify-content:center}
html body.single-product .k-deliv .k-dl-fl .st svg{width:17px;height:17px;fill:none;stroke:#9A6B55;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* 段の名前は 看板の b の既定（Murecho・点線・肉球の ::after）をそのまま使い、大きさだけ 18 → 15px
   （用户 2026-09-18「就用这张图…图标下面的字体换成15px，仅此而已」＝ 効果図 B4 の見た目のまま 字だけ小さく）。
   ⚠️ 既定は «… .woocommerce-variation-add-to-cart > .k-deliv b» で詳細度が高いので、同じ鎖で書く。 */
/* ⚠️ 2026-09-18 夜に <b>ご注文</b>／<b>確認稿</b>／<b>お届け</b> を js から削除したので、この規則（15px・点線＋肉球つき）は
   もう当たる要素が無い。名前を戻すときのために値だけ残す：font-size:15px／margin:4px 0 10px／padding:0 0 10px。 */
html body.single-product .k-deliv .k-dl-fl .ar{color:#C9A98C;font-size:12px;text-align:center;margin-top:8px}
html body.single-product .k-deliv .k-dl-delay{display:block;font-family:'M PLUS Rounded 1c',sans-serif;font-size:11.5px;font-weight:500;color:#7A6A5C;line-height:1.6;text-align:center}

/* ── 「お写真をご用意ください」「ギフト設定」下の選択肢の面（効果図 N1、用户 2026-09-18「N1」）
      用户の指摘：「每个选项值都是米色背景框，下来还有这么大片，看起来就很不舒服，但又不能跳出加购的样式」。
      実測：お写真の面は 338×323 の «素の米色» 1 枚、のし の 4 つの胶囊と «無料» の胶囊も同じ #F6F1E9。
      直したのは 3 つだけ（用户が «好き» と言った お届け目安の看板／卖点標題と同じ語彙を借りた）：
        ① 米色の面に ごく淡い足あと（64px 敷き詰め・看板と同じ SVG）。⚠️ 2026-09-18 用户「浓度减少1/3」で
           **#EADFCE → #EEE5D7**（地との差 −12/−18/−27 → −8/−12/−18 ＝ 2/3）。ギフトの箱側も #F4EDE4 → #F8F3ED（同じ 2/3）。
           «足あとを内容の後ろに出さない» 案（A 全部消す／B 破線枠の外 5px だけ／C 半分）も作ったが、
           この 2 つの面は中身がほぼ埋まっていて «避ける» ＝ «消す» になるため、用户は «浓度を下げる» を選んだ（効果図 .cache/opt-0918/paw-sheet.jpg）
        ② 面の内側に 陶土色の破線の枠（inset 5px・角丸 9px）＝ 看板の内枠と同じ作り
        ③ のし の胶囊と «無料» の胶囊 ＝ 米色の塗り → 白地＋陶土色の細枠（«選択肢の値が米色の箱» を外す）
           ⚠️ 選択中の陶土色の枠（L9681 の :has(input:checked)）は詳細度が上なので そのまま効く。
      ギフトの箱の外側にも 同じ足あとを さらに淡く（#F4EDE4）入れて 2 つの段をそろえる。
      ⚠️ 字・文案・字号・間合いは一字も触っていない。効果図 8 案を 1 枚ずつ実測し、
         折り返しの行数は 9 案とも現状と同じ・はみ出し 0（.cache/opt-0918/opt-sheet.jpg）。
      却下：N2 白地カード／N3 米色の帯／N4 2 枚に割る／N5 草叶の花边／N6 猫犬の胶囊/走る猫／N7 白地＋足あと／N8 選択肢ごとの白カード。 */
html body.single-product .k11-sub{background:#F6F1E9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cg fill='%23EEE5D7'%3E%3Cg transform='translate(8 10) rotate(-18) scale(.55)'%3E%3Cellipse cx='10' cy='13.2' rx='4.6' ry='3.8'/%3E%3Cellipse cx='3.8' cy='8.2' rx='1.7' ry='2.2'/%3E%3Cellipse cx='7.6' cy='4.6' rx='1.7' ry='2.3'/%3E%3Cellipse cx='12.4' cy='4.6' rx='1.7' ry='2.3'/%3E%3Cellipse cx='16.2' cy='8.2' rx='1.7' ry='2.2'/%3E%3C/g%3E%3Cg transform='translate(38 40) rotate(20) scale(.55)'%3E%3Cellipse cx='10' cy='13.2' rx='4.6' ry='3.8'/%3E%3Cellipse cx='3.8' cy='8.2' rx='1.7' ry='2.2'/%3E%3Cellipse cx='7.6' cy='4.6' rx='1.7' ry='2.3'/%3E%3Cellipse cx='12.4' cy='4.6' rx='1.7' ry='2.3'/%3E%3Cellipse cx='16.2' cy='8.2' rx='1.7' ry='2.2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")!important;
  background-size:64px 64px!important;background-repeat:repeat!important}
html body.single-product .k11-sub::after{content:""!important;position:absolute!important;inset:5px!important;
  border:1px dashed #D9BCA6!important;border-radius:9px!important;pointer-events:none!important}
html body.single-product .ppom-input-gift_options{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cg fill='%23F8F3ED'%3E%3Cg transform='translate(8 10) rotate(-18) scale(.55)'%3E%3Cellipse cx='10' cy='13.2' rx='4.6' ry='3.8'/%3E%3Cellipse cx='3.8' cy='8.2' rx='1.7' ry='2.2'/%3E%3Cellipse cx='7.6' cy='4.6' rx='1.7' ry='2.3'/%3E%3Cellipse cx='12.4' cy='4.6' rx='1.7' ry='2.3'/%3E%3Cellipse cx='16.2' cy='8.2' rx='1.7' ry='2.2'/%3E%3C/g%3E%3Cg transform='translate(38 40) rotate(20) scale(.55)'%3E%3Cellipse cx='10' cy='13.2' rx='4.6' ry='3.8'/%3E%3Cellipse cx='3.8' cy='8.2' rx='1.7' ry='2.2'/%3E%3Cellipse cx='7.6' cy='4.6' rx='1.7' ry='2.3'/%3E%3Cellipse cx='12.4' cy='4.6' rx='1.7' ry='2.3'/%3E%3Cellipse cx='16.2' cy='8.2' rx='1.7' ry='2.2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")!important;
  background-size:64px 64px!important;background-repeat:repeat!important}
html body.single-product .ppom-input-gift_options .k-noshi-grid .form-check-label{background:#fff!important;border:1px solid #E6D6C4!important}
html body.single-product .ppom-field-wrapper.gift_options > .form-group > .form-check-inline .ppom-label-checkbox:not(:has(.ppom-option-label-price))::before{
  background:#fff!important;border:1px solid #E6D6C4!important;color:#8C7B6D!important}

/* ── 「お写真」のアップロードボタン ＝ P4 の胶囊框（用户 2026-09-18「换P4到“タップしてお写真を選択”这里试试背景，框内填充白色」）
      ・図は assets/about-pill-yarn.png ＝ 卖点の見出しの候補 8 案（docs/img/headbg-2026-09-17/pill-sheet.jpg）の **P4（毛線球）** を
        幅 900 に縮め（.cache/opt-0917/pl-4-yarn.png・1303×368 → 900×254）、**枠の内側の米色（RGB 248,240,231）だけを白へ**
        押し上げたもの（線・毛線球・花・右下の寝猫は一切触っていない。«底色からの距離» で滑らかに置換）。
      ・9-slice は pill-meta.json の L=195／R=232 を同じ倍率で割った **135／160**。上下は 0（fill で中央を伸ばす）。
      ・高さ 56 → 72px。⚠️ **下の margin 96 → 80px と 動物線画（::before）の top 80 → 88px を同時に直してあるので、
        米色の面の総高は 323px のまま**（＝ 後ろの要素は 1px も動かない）。padding-top 2.8px は
        «flex の中央が枠の中央（要素内 5.1〜69.7 の真ん中 37.4）に来る» ように逆算した値。
      ・字の左右に 38.3／45.4px 空けてあるので 毛線球と花に字はかからない（実測）。
   ── 「ギフトとして贈る」の見出し（用户 2026-09-18「用和“タップしてお写真を選択”一样的字体，前面的礼物图标换成素描的那种」）
      ・字体だけ Kaisei Tokumin → **M PLUS Rounded 1c**（アップロードボタンと同じ）。**字号 17px・字重 600・色は変えていない**。
      ・🎁 の絵文字（L996-998 の ::before）→ **線画の贈り物**（SVG・陶土色 #9A6B55・線幅 1.5・丸い端）。
        お届け目安の 3 段の丸い図標と同じ画風。20×20px、字の前に 7px。 */
html body.single-product .k11-sub .kumoju-upload{background:none!important;border:0!important;border-radius:0!important;
  height:72px!important;min-height:0!important;box-sizing:border-box!important;
  padding:2.8px 45.4px 0 38.3px!important;margin:0 0 80px!important;
  border-image:url("assets/about-pill-yarn.png") 0 160 0 135 fill / 0 45.4px 0 38.3px stretch!important}
html body.single-product .k11-sub::before{top:88px!important}
html body.single-product .ppom-input-gift_options > label.form-control-label{font-family:'M PLUS Rounded 1c',sans-serif!important;
  font-size:15px!important}   /* 用户 2026-09-18「字体大小调整成15px」→ 17→15px。
     上下は一度 12→9px（帯 42px）まで詰めたが 用户「字体打小就这样，你把上下的高度还原回去」→ **12px に戻した**（帯 48px）。 */
html body.single-product .ppom-input-gift_options > label.form-control-label::before{content:""!important;display:inline-block!important;
  width:20px!important;height:20px!important;vertical-align:-3.5px!important;margin:0 7px 0 0!important;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A6B55' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.2' y='10' width='17.6' height='10.8' rx='1.4'/%3E%3Crect x='2' y='6.2' width='20' height='3.8' rx='1.1'/%3E%3Cpath d='M12 6.2v14.6'/%3E%3Cpath d='M12 6.2C10.6 3.3 6.2 2.8 6.2 4.9c0 1.6 3.4 1.3 5.8 1.3z'/%3E%3Cpath d='M12 6.2c1.4-2.9 5.8-3.4 5.8-1.3 0 1.6-3.4 1.3-5.8 1.3z'/%3E%3C/svg%3E") center/contain no-repeat!important}

/* ── 「ギフトとして贈る」の帯：字の太さと 両端の飾り（用户 2026-09-18
      「字体粗细设置成500，这个背景框也装饰下背景，空空的两边」）
      ・字は 600 → **500**。字体（M PLUS Rounded 1c）・字号 15px・色・贈り物の線画図標は 触っていない。
      ・帯の両端（字の外側・左 122px／右 95px が空いていた）に **足あとの小径**。
      ⚠️ 飾りは **この帯のために焼いた**（gpt-image-2、.cache/opt-0918/gen/gen-band.js、図の中に字は無し）。
         最初は P4 の胶囊図から切り出して貼ったが 用户「像活生生切断的拼出来的」→ 焼き直した。
         4 案（毛線球／ドライフラワー／足あとの小径／リボンと鈴）から **E3（足あとの小径）** を選択
         （効果図 .cache/opt-0918/band-sheet.jpg）。
      ・焼いたときに «中央 55% は無地» と指示してあるので、左右の端だけを切って両端に貼る ＝ **飾りは一切伸びない**
         （実測：中央に 490px ぶんの無地が残っていた）。中央は background-color で埋める。
      ・地色は 焼き上がり（244,232,222）を 帯の #F3E7DB に寄せてあるので、貼った塊と中央の地に継ぎ目は出ない。
      ・画像は 96px 高（帯は 48px ＝ 2 倍屏ぶん）に縮めてある。各 6KB。 */
html body.single-product .ppom-input-gift_options > label.form-control-label{font-weight:500!important;
  background:url("assets/gift-head-paw-l.png") left center/auto 100% no-repeat,
             url("assets/gift-head-paw-r.png") right center/auto 100% no-repeat,
             #F3E7DB!important}

/* ── お届け目安：地を «落ち葉» に・枠を外す・三段を上げる・「約2〜3週間」を深い赤に
      （用户 2026-09-18「お届け目安の様式は上面と重い…整体还是这个色调，可以加点浅绿色点缀，
       重点应该突出的是『約2〜3週間』」→ 8 案 → 落ち葉の地を選択。
       「高度原来的我都觉得高了」「绿色有点浅了」「『約2〜3週間』15px就差不多了」→ 下記の値に）
      ・地 ＝ assets/deliv-leaf.png。gpt-image-2 が **この看板のために焼いた**（.cache/opt-0918/gen/gen-deliv.js、図に字は無し）。
        指示：落ち葉だけ・全部で 5〜7 枚・1 枚は画幅の 4%・sage #9DB09A を 25% の透かしで・中央 70%×70% は完全に空ける。
        焼き上がりは薄すぎたので（最大偏差 166）**ずれ幅を ×1.8** して #F6F1E9 に寄せ直した（最大偏差 299）。
        葉が占めるのは全体の約 1.1%。⚠️ CSS で描いた緑の帯・線・葉は 用户に «不如gpt生成的» と却下されている。
      ・**足あとの敷き詰めと内側の破線枠（::before/::after）は外した** —— その 2 つが お写真・ギフト の面と同じで «重く» 見えていた原因。
      ・三段を 12px 上げる（リボンの下 20px → 8px）。⚠️ .k-dl-fl に負の margin を付けるだけだと
        margin の相殺で **リボンごと枠の外へ出る**（.hd は高さ 0）。.hd に padding-bottom:0.1px を入れて相殺を止める。
        ⚠️ .hd に overflow:hidden は不可 —— リボン(.eb) は .hd の外へ絶対配置されているので切れる。
      ・上下の余白 61/30 → 54/14。⚠️ **段の名前は 15px・図標は 30px のまま**（2026-09-18 に用户が決めた値。
        一度 12.5px/25px に縮めたが «点名していない» ので戻した）。
      ・「約2〜3週間」＝ 前の 2 文と同じ 10px のまま、**色だけ #8C2D1D**（用户が 3 段階から選択。
        站点の必填 ※ の赤 #C8412F と同じ色相の濃い側。新しい色相は足していない）。字の太さ 700。
      ・実測：高さ 229 → 188px・リボンは枠内 6px・1 行・はみ出し 0。 */
/* ⚠️ 2026-09-18 追記：最初は «落ち葉を .k-deliv 自体の地に敷いて ::before も ::after も消す» と書いたが、
   **角丸の米色の箱は ::before そのもの**（left/right 16・top 27・bottom 6・角丸 14px・下に box-shadow:0 5px 0 #E6D8C8 の
   «濃い一本»）だった。両方消したので 通し板になり 用户「用一个圆角把这个背景围起来…不是看起来独立的」
   →「换之前那个款，底部有一条更深色的」。正しくは **::after（破線枠）だけ消して、落ち葉は ::before の地に入れる**。
   ⚠️ box-shadow はここに書かない —— 書くと元の «底の濃い一本» を上書きしてしまう。 */
html body.single-product form.cart .woocommerce-variation-add-to-cart > .k-deliv{
  background:#fff!important;padding:54px 36px 14px!important}
html body.single-product form.cart .woocommerce-variation-add-to-cart > .k-deliv::before{content:""!important;display:block!important;
  background:#F6F1E9 url("assets/deliv-leaf.png") center/100% 100% no-repeat!important;border-radius:14px!important}
html body.single-product form.cart .woocommerce-variation-add-to-cart > .k-deliv::after{content:none!important;display:none!important}
html body.single-product form.cart .woocommerce-variation-add-to-cart > .k-deliv .hd{padding-bottom:0.1px!important}
html body.single-product form.cart .woocommerce-variation-add-to-cart > .k-deliv .k-dl-fl{margin-top:-12px!important;margin-bottom:4px!important}
html body.single-product form.cart .woocommerce-variation-add-to-cart > .k-deliv .k-dl-fl .st:last-of-type{color:#8C2D1D!important;font-weight:700!important}

/* ── 第 39 版 お届け目安：三段の «名前» を外して 説明を主役に
      （用户 2026-09-18 夜「“ご注文、確認稿、お届け”这一行的字去掉，把下面“お写真を送る”那行的字放过来、简化、至少13px、都在一行、“約2〜3週間”还是红色。
        下の 2 行は依次往上移して 字を一段大きく」）。
      ・js の buildDelivery() から <b>…</b> を削除（CSS の .st b は上で無効化）。⚠️ 名前と一緒に «名前の下の点線＋肉球»（.k-deliv b::after）も消えている。
      ・説明 10px → 13px・nowrap。文案は «ご承認をいただく» → «確認稿をご承認» だけ短縮（他の 2 文は線上の原文のまま）。
      ・列を 1fr の等分 → auto ＋ 中央寄せ ＋ 列間 4px。⚠️ 等分のままだと 1 列 91.3px に対して «確認稿をご承認» が 91px で、
        余白ゼロ ＝ 折れる恐れがある。実測 78／91／68.6 ＋ 矢印 12×2 ＋ gap 4×4 ＝ 277.6 ≤ 298。
      ・矢印は 図標の中心に合わせる（.st の高さが 82.5 → 51.5px になったので margin-top 8 → 6px）。
      ・下の 2 行 11.5 → 12.5px／12.5 → 13.5px。三段が 31px 縮んだ分、そのまま上へ上がる。
      ・「約2〜3週間」の赤（#8C2D1D・700）は 第 38 版の .st:last-of-type がそのまま効く（ここでは color を書かない）。
      ・実測：看板の高さ 188 → 158px。 */
html body.single-product form.cart .woocommerce-variation-add-to-cart > .k-deliv .k-dl-fl{grid-template-columns:auto 12px auto 12px auto!important;justify-content:center!important;column-gap:4px!important}
html body.single-product form.cart .woocommerce-variation-add-to-cart > .k-deliv .k-dl-fl .st{font-size:13px!important;white-space:nowrap!important}
html body.single-product form.cart .woocommerce-variation-add-to-cart > .k-deliv .k-dl-fl .ar{margin-top:6px!important}
html body.single-product form.cart .woocommerce-variation-add-to-cart > .k-deliv .k-dl-delay{font-size:12.5px!important}
html body.single-product form.cart .woocommerce-variation-add-to-cart > .k-deliv .k-dl-rush{font-size:13.5px!important}

/* ⚠️ 追記（用户 2026-09-18 夜「中间的那个虚线和脚印不能丢」）：名前の <b> と一緒に消えた «点線＋肉球» を
      13px の 1 行の下に付け直す。b のときは «b 自身の底の点線»（linear-gradient 7px 周期・1.5px 高）＋
      «b::after の肉球»（13px・#F6F1E9 の地で点線の中ほどを隠す）の 2 つで出来ていた。b が無いので
      .st::after の 3 枚重ねの背景で同じ絵にする（上から 肉球／点線を隠す米色 20×16／点線）。
      ⚠️ 幅は 84px の固定 —— 列を auto にしたので .st の幅は 78／91／68.6px とバラバラ、
        点線を .st の幅いっぱいにすると 3 本の長さが揃わない（b のときは 1fr で 91.3px に揃っていた）。
      ・高さの実測：段 51.5 → 74.5px・看板 160 → 183px（元の名前つき 188px より 5px 低い）。 */
html body.single-product form.cart .woocommerce-variation-add-to-cart > .k-deliv .k-dl-fl .st::after{content:""!important;display:block!important;width:84px!important;height:16px!important;margin:7px auto 0!important;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22%23C9A48E%22%3E%3Cellipse%20cx%3D%2210%22%20cy%3D%2213.2%22%20rx%3D%224.6%22%20ry%3D%223.8%22%2F%3E%3Cellipse%20cx%3D%223.8%22%20cy%3D%228.2%22%20rx%3D%221.7%22%20ry%3D%222.2%22%2F%3E%3Cellipse%20cx%3D%227.6%22%20cy%3D%224.6%22%20rx%3D%221.7%22%20ry%3D%222.3%22%2F%3E%3Cellipse%20cx%3D%2212.4%22%20cy%3D%224.6%22%20rx%3D%221.7%22%20ry%3D%222.3%22%2F%3E%3Cellipse%20cx%3D%2216.2%22%20cy%3D%228.2%22%20rx%3D%221.7%22%20ry%3D%222.2%22%2F%3E%3C%2Fsvg%3E") center/13px no-repeat,
    linear-gradient(#F6F1E9,#F6F1E9) center/20px 16px no-repeat,
    linear-gradient(to right,#D4BBA8 50%,transparent 50%) left center/7px 1.5px repeat-x!important}

/* ── 第 40 版 «あとでメール・LINEで写真を送る» の字を太くする（効果図 T1、用户 2026-09-18「T1」。.cache/opt-0918b/text-sheet.jpg）
      用户「这个还是比较重要的文案，但是和上下文案融到一起了…让用户知道这里可以勾选」。
      «融けて見える» 原因は 字の大きさではなく **上の «犬・猫…» の段と 字重・色が同じ** だったこと。
      なので 14px と色（#3F3A32）はそのまま、**字重 400 → 700 だけ**。框・地色・チェックの大きさ・文言は一切触っていない。
      ⚠️ 日本語の全角は 太くしても幅が変わらないので、行幅は 214px のまま（面の内側の右端まで 67px 余る ＝ 折れない）。
      ・却下：T2 白いマーカー／T3 白い胶囊／T4 下線／T5 ✓ 印／T6 陶土色の太字。
      ・その前に «行ごと目立たせる» 5 案（L1 白カード／L2 左の縦帯／L3 «または» の区切り／L4 破線の枠／L5 白カード＋大きいチェック）も
        出したが、用户は «字だけ» を選んだ（.cache/opt-0918b/line-sheet.jpg）。 */
html body.single-product .k11-sub .k-line-row .ppom-label-checkbox{font-weight:700!important}

/* ── 第 41 版 «ギフトとして贈る» の 3 つの選択肢の字重を «のし（掛け紙）» に揃える（用户 2026-09-18）
      «ギフト包装をつける／メッセージカードを添える／明細書を同梱しない» ＝ 15px・400 だった。
      «のし（掛け紙）» の見出し（LABEL.form-control-label）は 17px・**500** なので、**字重だけ 400 → 500**。
      ⚠️ 大きさは触らない（用户「字体的大小不动」）＝ 15px のまま。色（#3F3A32）も そのまま。
      ⚠️ のし の 4 つの胶囊（.k-noshi-grid .form-check-label）は 15px・400 のまま —— 点名されていない。
      ⚠️ 同じ .ppom-label-checkbox は お写真の «あとでメール・LINEで…»（第 40 版で 700）にもあるので、
        セレクタは gift の中だけに限る。 */
html body.single-product .ppom-input-gift_options > .form-check-inline > .form-check-label > .ppom-label-checkbox{font-weight:500!important}

/* ── 第 42 版 変体の選択肢：未選択に «飾りだけ» を敷く（効果図 W4、用户 2026-09-18「W4」。.cache/opt-0918b/sw-sheet.jpg）
      用户「没有选中的时候…背景框也有个简单装饰，但是没有边框…感受不到线条感」。
      ・**未選択** ＝ 米色 #F6F1E9 のまま ＋ **淡い足あとの敷き詰め**（52px・#EDE2D2 ＝ 地との差 −9/−15/−23。線は一本も無い）。
        生図は使わず、站内にすでにある足あとの語彙（お届け目安の看板・お写真の面と同じ SVG）。
      ⚠️ **選択中は 一切触っていない**（L8841 の 1.5px #9A6B55 の枠・#FBF5EE の地・3px の光暈／L9595 の陶土色の字／
        L9602 の右上の肉球の丸）。用户 2026-09-18「选中的状态还是恢复成之前那个吧，就右上角一个脚印，其他不动」。
      ⚠️ いったん «選択中＝手描きの枠»（assets/sw-frame.png）を入れたが **撤回した**。作り直す場合の記録：
        ・枠は gpt-image-2 に この選択肢のために焼かせる。線幅は数字で指定する —— 画像 1536px 幅で 6px だと ボタン上 0.4 CSS px ＝ 見えない。
          24px と書いて 2.0 CSS px になった。色は 墨の量を保ったまま置換（偏差の 70 分位を満色に割り当てる。最大値で割ると (176,140,121) 止まり）。
        ・«タップしてお写真を選択» と同じ 9-slice にするなら、等比の条件は «画像の高さ / ボタンの高さ ＝ 左の飾りの幅(画像) / border-image-width»。
          512×512・左飾り 190px・右 133px で 高さ 80px のボタンに 30px/21px、高さ 59px の 2 列には 22px/15px（別に指定しないと 1.36 倍に潰れる）。
          border-image-width は箱の大きさに効かないので 文字は動かない。効果図 .cache/opt-0918b/pill-sheet.jpg（H1〜H3）。
        ・犬は «線の上に伏せて 横に長く» でないと文字に被る（ボタン 107×80 で 文字の最下行は 下から 12px しか空いていない）。
      ・却下：W1／W2／W3／W5（.cache/opt-0918b/sw-sheet.jpg）・手描き枠の色と太さの直し・9-slice の H1〜H3。 */
html body.single-product .k-swatch:not(.is-active){background:#F6F1E9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cg fill='%23EDE2D2'%3E%3Cg transform='translate(8 10) rotate(-18) scale(.55)'%3E%3Cellipse cx='10' cy='13.2' rx='4.6' ry='3.8'/%3E%3Cellipse cx='3.8' cy='8.2' rx='1.7' ry='2.2'/%3E%3Cellipse cx='7.6' cy='4.6' rx='1.7' ry='2.3'/%3E%3Cellipse cx='12.4' cy='4.6' rx='1.7' ry='2.3'/%3E%3Cellipse cx='16.2' cy='8.2' rx='1.7' ry='2.2'/%3E%3C/g%3E%3Cg transform='translate(38 40) rotate(20) scale(.55)'%3E%3Cellipse cx='10' cy='13.2' rx='4.6' ry='3.8'/%3E%3Cellipse cx='3.8' cy='8.2' rx='1.7' ry='2.2'/%3E%3Cellipse cx='7.6' cy='4.6' rx='1.7' ry='2.3'/%3E%3Cellipse cx='12.4' cy='4.6' rx='1.7' ry='2.3'/%3E%3Cellipse cx='16.2' cy='8.2' rx='1.7' ry='2.2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")!important;background-size:52px 52px!important;background-repeat:repeat!important}

/* ── 第 43 版 選択中の «右上のしるし» ＝ 肉球の丸 → 花束をくわえた子犬（効果図 K3、用户 2026-09-18「K3」。.cache/opt-0918b/mark2-sheet.jpg）
      用户「把右上角的脚印设计成一个狗狗，贴边有，尽量不要靠近里面，小点，可以花里胡哨一点」＋「不要加那个背景的圆圈了」
      ＋「你用gpt生成吧，你这画风太简单了」。
      ・図 `assets/sw-mark-dog.png` ＝ gpt-image-2 が このしるしのために焼いた（.cache/opt-0918b/gen/gen-mark2.js の k3-bouquet）。
        横向きの子犬が花束をくわえて座り、花びらが散る。淡彩＋細い墨線、丸い座布団は無し。
      ・L9602 の «陶土色の丸＋白い肉球・-15°・影» を全部外す（地色・影・回転・角丸）。大きさ 22×22 → **27×25**、位置 top −11 / right −8。
      ⚠️ **画風と大きさはトレードオフ**：1 巡目は «縮んでも分かるように» と細部を禁じて焼いたら «画风太简单»、
        細部を解禁したら 28px では潰れるものが出た（K2 の籠・K3 の花束）。K3 は 用户が潰れ方を見た上で選んでいる。
        原寸と «28px に縮めた見え方» を並べた図は .cache/opt-0918b/gen/mark2-check.jpg。
      ・文字の右端から角までは 34px（3 列）／37px（2 列）のまま ＝ しるしを大きくしても文字は動かない（::after は絶対配置）。
      ・却下：J1〜J4（線だけの版）・K1（花冠）・K2（花籠）・K4（縁に伏せる）。 */
html body.single-product .k-swatch.is-active::after{content:""!important;font-size:0!important;
  width:27px!important;height:25px!important;top:-11px!important;right:-8px!important;
  background:url("assets/sw-mark-dog.png") center/contain no-repeat!important;background-color:transparent!important;
  box-shadow:none!important;transform:none!important;border-radius:0!important}

/* ── 第 44 版 お客さまの声：1 件に «標題» を足し、1 件の高さを詰める（用户 2026-09-19「按照你的建议调整下」「不要加那个圆点」）
      ⚠️ **位置は動かしていない**（用户 2026-09-19「不要动线上现在的评论区位置」）。
      ・標題 ＝ Kaisei Tokumin 15.5px/700。**前に丸い点は付けない**。無い投稿では行ごと出ない（PHP 側で判定）。
      ・高さ：同業 5 店の実測は 103〜398px、中位 171px（original-pet 103・pet-momento 142・pet-inori 171）。
        うちは 433px あった（写真 3 枚＋返信つき）ので、本文を 4 行で畳み・写真を 88 → 62px にして詰める。
        docs/pdp-review-survey-2026-09-19.md §4。
      ・本文は 4 行を超えたぶんだけ隠す。押すと開く（js/kumoju-reviews.js の k-rv-more）。 */
html body.single-product .k-rv-ttl{font-family:'Kaisei Tokumin',serif!important;font-size:15.5px!important;font-weight:700!important;
  line-height:1.6!important;color:#3A2A1F!important;margin:8px 0 4px!important;padding:0!important}
html body.single-product .k-rv-ttl::before,html body.single-product .k-rv-ttl::after{content:none!important;display:none!important}
/* ⚠️ 2026-09-20：本文は畳まない（用户「完整展示」）。
   畳む指定を外すと scrollHeight と clientHeight の差が 0 になるので、
   js 側の「続きを読む」も自動で出なくなる（別に消す必要は無い）。 */
html body.single-product .k-rv-item.is-open .k-rv-text{display:block!important;-webkit-line-clamp:none!important;overflow:visible!important}
html body.single-product .k-rv-more{display:none;margin:2px 0 0;padding:0;background:none;border:0;cursor:pointer;
  font-family:'M PLUS Rounded 1c',sans-serif;font-size:12px;font-weight:500;color:#9A6B55;text-decoration:underline;text-underline-offset:3px}
html body.single-product .k-rv-item.has-more .k-rv-more{display:inline-block}
html body.single-product .k-rv-pics .k-rv-pic{width:62px!important;height:62px!important}

/* ============================================================
   評価 0 件のときの「これまでの作品例」（B 案、2026-09-20）
   ------------------------------------------------------------
   中身は kumoju-reviews.php の kumoju_rv_render_tab()。
   作例の帯（.k-bd）をそのまま使い回しているので、
   中の見出し「似ている子の作品例を見る」だけを止める
   （大見出しと 二重になるため）。
   ============================================================ */
html body.single-product .k-rv--works .k-bd-h{display:none}
html body.single-product .k-rv--works .k-bd{margin-top:0}
html body.single-product .k-rv-worksnote{
  margin:14px 2px 0;text-align:center;
  font-family:'M PLUS Rounded 1c',sans-serif;font-size:12.5px;font-weight:400;
  line-height:1.7;color:#8A7F72}

/* ============================================================
   レビュー欄：F 案（2026-09-20、効果図の F）
   ------------------------------------------------------------
   「地色を変えず、白のまま 箱にする」。
   実測：上の章の帯 #E9E3DA は L*90.5、頁の地 #F6F1E9 は L*95.3。
     白（L*100）  … 上の章との差 ΔL* 9.5  ← いちばん見分けやすい
     #DDD2C2（L*84.7）… 5.8。しかも Q&A の問いの帯 #D8CCBA（L*82.6）と 2.1 しか違わない
     #E9E3DA        … 0.0（上の章と同じ色。一つの塊に読める）
   ⚠️ 上辺は 上の章の帯に そのままつなげる（直角・隙間なし）。
      頁内の 既存の作法と同じ（「この品について」→「仕様」も 直角でつないでいる）。
   ============================================================ */
html body.single-product .wd-accordion-item.k5-reviews{
  /* 左右に白を敷いていた 100vmax の影をやめ、他の章と同じ幅（370）にする */
  box-shadow:none!important;
  clip-path:none!important;
  margin:0 10px 25px!important;              /* 上は 0＝上の章に密着 */
  padding:24px 18px 20px!important;
  /* 地は白（用户 2026-09-20。#DDD2C2 と両方線上で見比べた上で 白に戻した）。
     描边なし・四隅直角・上は上の帯に密着。
     実測：白 L*100 は 上の帯 #E9E3DA（90.5）と 9.5、
     外側 #F6F1E9（95.3）と 4.7 離れている。 */
  background:#FFFFFF;
  border:0;
  border-radius:0;
}

/* お客さまの写真：一番上・3 枚並べ・右に「もっと見る」 */
html body.single-product .k-rv-strip-h{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 0 10px;
}
html body.single-product .k-rv-strip-more{
  flex:none;background:none;border:0;padding:0;cursor:pointer;
  font-family:'M PLUS Rounded 1c',sans-serif;font-size:13px;font-weight:500;
  color:#9A6B55;text-decoration:underline;text-underline-offset:3px;
}
html body.single-product .k-rv-strip{
  display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:0 0 20px;overflow:visible;
}
html body.single-product .k-rv-strip .k-rv-sp{
  width:100%!important;height:94px!important;border-radius:6px;flex:none;
}
/* 4 枚目からは出さない（「もっと見る」で枠を開けば全部見られる） */
html body.single-product .k-rv-strip .k-rv-sp:nth-child(n+4){display:none}

/* 項目別の評価：3 行目から畳む */
/* ⚠️ nth-of-type は 同じタグ（div）を数えるので、
   見出し .k-rv-asp-h も 1 つ目に数えられ、n+3 だと 1 行しか残らない。
   子で数える（見出し 1 ＋ 行 2 ＝ 3 まで残す）。 */
html body.single-product .k-rv-asp[data-fold="1"] .k-rv-arow:nth-child(n+4){display:none}
html body.single-product .k-rv-asp-more{
  display:block;width:100%;background:none;border:0;padding:8px 0 0;cursor:pointer;
  font-family:'M PLUS Rounded 1c',sans-serif;font-size:13px;font-weight:500;color:#9A6B55;text-align:center;
}
html body.single-product .k-rv-asp-more::before{content:'\2304 ';}

/* 一行の横帯（すべてのレビューを見る / レビューを書く）
   ⚠️ 名前は .k-rv-jump。.k-rv-bar / .k-rv-bars は
      「星ごとの棒」が先に使っている（上の 2244 行）。
      一度同じ名にしてしまい、星の棒 10 本が横帯に化けた。 */
html body.single-product .k-rv-jumps{margin:14px 0 0}
html body.single-product .k-rv-jump{
  display:flex!important;align-items:center;justify-content:space-between;
  width:100%;max-width:none!important;
  background:none!important;border:0!important;border-top:1px solid #E6DCCB!important;
  border-radius:0!important;padding:15px 2px!important;margin:0!important;cursor:pointer;
  font-family:'M PLUS Rounded 1c',sans-serif!important;font-size:14.5px!important;font-weight:500!important;
  color:#3C3227!important;text-align:left!important;
}
html body.single-product .k-rv-jump::after{content:'\203A';color:#9A8E7E;font-size:17px;line-height:1}
html body.single-product .k-rv-cta{margin:0!important}

/* 見出しの右上の「すべて見る」はもう出さない（横帯に移した） */
html body.single-product .k-rv-all{display:none!important}

/* 上の章（読み物）の帯に そのままつなげるため、間の隙間を落とす。
   実測で 87px 入っていた：
     .wd-accordion-content の padding-bottom 22 ＋ margin-bottom 10
     .product-tabs-wrapper の padding-bottom 30 ＋ margin-bottom 25
   ⚠️ どれも 「読み物の下に空ける隙間」で、その下に来るのは
      このレビュー欄だけなので、ここを 0 にして不具合は出ない。 */
html body.single-product .product-tabs-wrapper{padding-bottom:0!important;margin-bottom:0!important}
/* ⚠️ accordion-item は wrapper の 直の子ではない
   （wrapper > .row > .poduct-tabs-inner > .woocommerce-tabs > .wd-accordion-item）。
   「>」で書いて 最後の 10px が残った。 */
/* ⚠️ accordion-item は wrapper の直の子ではない（row > inner > woocommerce-tabs の下）。
   :last-child でも当たらなかったので、wrapper の中の item を直に指す。
   レビューの item は rdReviews() で wrapper の外へ出ているので巻き込まない。 */
html body.single-product .product-tabs-wrapper .wd-accordion-item{margin-bottom:0!important}
html body.single-product .product-tabs-wrapper .wd-accordion-content{padding-bottom:0!important;margin-bottom:0!important}

/* ============================================================
   レビュー欄：gu-home を見ての第 2 弾（2026-09-20、用户の指示）
   ============================================================ */

/* ① 中の箱は角丸をやめる。件と件の間は点線だけ（gu-home と同じ） */
html body.single-product .k-rv-sum{border-radius:0!important}
html body.single-product .k-rv-item{
  border:0!important;border-radius:0!important;
  border-bottom:1px dashed #DDD3C4!important;
  padding:14px 2px!important;margin:0!important;
}
html body.single-product .k-rv-list > .k-rv-item:last-child{border-bottom:0!important}

/* ② 見出しは本文と同じ書体・13px、本文 12px・1 段細く */
html body.single-product .k-rv-ttl{
  font-family:'M PLUS Rounded 1c',sans-serif!important;
  font-size:13px!important;font-weight:700!important;
  line-height:1.65!important;color:#3A2A1F!important;margin:7px 0 3px!important;
}
html body.single-product .k-rv-text p{
  font-size:12px!important;font-weight:300!important;line-height:1.85!important;margin:5px 0 0!important;
}

/* ③ お写真は正方形・4 枚見える */
html body.single-product .k-rv-strip{
  grid-template-columns:repeat(4,1fr)!important;gap:6px!important;margin:0 0 18px!important;
}
html body.single-product .k-rv-strip .k-rv-sp{
  width:100%!important;height:auto!important;aspect-ratio:1/1!important;border-radius:0!important;
}
html body.single-product .k-rv-strip .k-rv-sp:nth-child(n+4){display:block!important}
html body.single-product .k-rv-strip .k-rv-sp:nth-child(n+5){display:none!important}

/* 「総合評価」―― 平均点の真上・中央揃え・少し大きく */
html body.single-product .k-rv-sum-h{
  font-family:'M PLUS Rounded 1c',sans-serif;font-size:14px;font-weight:700;
  color:#5A4C3F;margin:0 0 6px;letter-spacing:.04em;text-align:center;
}

/* 星ごとの行：星 5 つ → 割合 → 棒 */
html body.single-product .k-rv-bar{
  display:flex!important;align-items:center!important;gap:7px!important;width:100%!important;
}
html body.single-product .k-rv-bar .l{
  flex:none!important;width:auto!important;
  font-size:11px!important;letter-spacing:.5px;color:#C9A227!important;
}
html body.single-product .k-rv-bar .c{
  flex:none!important;width:30px!important;text-align:right!important;
  font-family:'M PLUS Rounded 1c',sans-serif!important;font-size:11px!important;
  font-weight:500!important;font-style:normal!important;color:#7A6E60!important;
}
html body.single-product .k-rv-bar .tr{flex:1 1 auto!important;min-width:0!important}

/* ============================================================
   レビュー欄：gu-home を見ての第 3 弾（2026-09-20、用户の指示）
   ============================================================ */

/* ③ まとめの «外の箱» をやめる（地色も枠もなし・中身だけ出す） */
html body.single-product .k-rv-sum{
  background:transparent!important;border:0!important;padding:0!important;margin:0 0 16px!important;
}

/* ① 左（総合評価）と 右（星ごとの割合）を 1 本の縦線で分ける */
html body.single-product .k-rv-sum-top{align-items:center!important;gap:0!important}
html body.single-product .k-rv-avg{padding:2px 16px 2px 2px!important}
html body.single-product .k-rv-bars{
  padding-left:16px!important;
  border-left:1px solid #E3DACB!important;
}

/* ② お写真は角丸に戻し、左右の間を詰める */
html body.single-product .k-rv-strip{gap:4px!important}
html body.single-product .k-rv-strip .k-rv-sp{border-radius:6px!important}

/* ④ 本文は «売りの本文»（.k-pcard の p）と揃える：実測 15px / 400 / 1.75。
      見出しは «本文より少し太い» だけ（700 だと太すぎる）。 */
html body.single-product .k-rv-text p{
  font-size:15px!important;font-weight:400!important;line-height:1.75!important;margin:6px 0 0!important;
}
html body.single-product .k-rv-ttl{
  font-size:15.5px!important;font-weight:600!important;line-height:1.6!important;margin:8px 0 2px!important;
}

/* 星ごとの行の間隔を詰める（2026-09-20、用户「行間距太大」）。
   実測：上下 padding 10px で 1 行 33px・5 行で 165px 使っていた。
   6px にして 1 行 25px・5 行 125px（−24%）。
   ⚠️ この行は 「その星だけに絞り込む」押せるボタンなので、これ以上は詰めない。 */
html body.single-product .k-rv-sum .k-rv-bar{padding:6px!important}
html body.single-product .k-rv-arow{margin-bottom:6px!important}
html body.single-product .k-rv-asp{margin-top:10px!important;padding-top:10px!important}

/* ============================================================
   レビュー欄：第 4 弾（2026-09-20、用户の指示）
   ============================================================ */

/* ① お写真 4 枚の下に細い線 */
html body.single-product .k-rv-strip{
  padding-bottom:16px!important;margin-bottom:16px!important;
  border-bottom:1px solid #EFE7D8!important;
}

/* ② 項目別は 枠のあるカードにする（上の線はやめる）。
      高さは中身なり（行数が増えても減ってもそのまま）。
      ⚠️ 角丸は参照した截図に合わせている。上の「内部は直角」は
         星のまとめと 1 件ずつのカードについての指示だった。 */
html body.single-product .k-rv-asp{
  margin-top:0!important;padding:12px 14px!important;
  border:1px solid #E3DACB!important;border-radius:8px!important;
}
html body.single-product .k-rv-asp-h{font-size:12.5px!important;margin-bottom:8px!important}
html body.single-product .k-rv-arow{margin-bottom:4px!important}
html body.single-product .k-rv-arow .k{font-size:13px!important}
html body.single-product .k-rv-arow .v{font-size:13px!important}
html body.single-product .k-rv-asp-more{padding-top:4px!important;font-size:12.5px!important}

/* ③ よく出てくる言葉：地色 #C79B87・字は白 */
html body.single-product .k-rv-kwc{
  background:#C79B87!important;border-color:#C79B87!important;color:#fff!important;
}
html body.single-product .k-rv-kwc em,
html body.single-product .k-rv-kwc b{color:#FBEFE6!important}
html body.single-product .k-rv-kwc.on{
  background:#9A6B55!important;border-color:#9A6B55!important;color:#fff!important;
}

/* ⑤ 買った内容は 1 行落とす。
      「25cm / ホワイト / スタンドつける」のように長いと、
      同じ行の「購入済み」を押して 2 行に折っていた。 */
html body.single-product .k-rv-meta{flex-wrap:wrap!important;row-gap:6px!important}
html body.single-product .k-rv-opt{flex:0 0 100%!important;width:100%!important;
  border-radius:6px!important;padding:3px 9px!important}

/* ============================================================
   レビュー欄：第 5 弾（2026-09-20、用户の指示）
   ============================================================ */

/* ① 項目別はカードをやめ、上下の線だけに戻す。
      ⚠️ 縦線（星の割合の左端）を 下の線に触れさせない。
         上の線（お写真の下）から 16px 空いているので、下も 16px 空ける。 */
html body.single-product .k-rv-asp{
  border:0!important;border-radius:0!important;padding:16px 0!important;margin-top:16px!important;
  border-top:1px solid #EFE7D8!important;
  border-bottom:1px solid #EFE7D8!important;
}
/* 常に全行見せる（data-fold はもう付かないが、念のため） */
html body.single-product .k-rv-asp .k-rv-arow{display:flex!important}

/* ② 言葉のチップ：絞り込み中ははっきり変える */
html body.single-product .k-rv-kwc{transition:background-color .15s ease,color .15s ease}
html body.single-product .k-rv-kwc.on{
  background:#6F4B3A!important;border-color:#6F4B3A!important;color:#fff!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);
}

/* ③ 買った内容：星の行に戻し、右寄せ（2026-09-20）。
      ⚠️ 長いときに 「購入済み」を押して潰さないよう、
         入らなければ 行ごと下へ落とす（落ちても右寄せのまま）。 */
html body.single-product .k-rv-opt{
  display:inline-block!important;width:auto!important;flex:0 1 auto!important;
  margin-left:auto!important;border-radius:99px!important;padding:3px 11px!important;   /* 形は「購入済み」と同じ胶囊（2026-09-20） */
  /* ⚠️ 地は米色・枠はなし（2026-09-20）。
     原型（kumoju-mobile-large.html:480）では --cream2 の米色を敷いていたが、
     商品ページは 8521 行で --k-cream2 を #FFFFFF に上書きしているので、
     白地のカードの上で 下の「参考になった」（透明＋同じ枠色）と
     見分けがつかなくなっていた。
     規則をはっきりさせる：塗りつぶし・枠なし＝札（読むだけ）、
     透明・枠あり＝ボタン（押せる）。同じ行の「購入済み」も 塗りつぶし・枠なし。 */
  background:#F4EFE5!important;border:0!important;color:#6B6152!important;
}

/* ============================================================
   お写真の「もっと見る >」＝ 写真モードの枠（2026-09-21）
   ------------------------------------------------------------
   用户が選んだ効果図は a2b：
     ・全画面にしない。吸着ヘッダーと加購バーの «あいだ» に収まる
     ・右から滑り込む
     ・頭＝ PHOTOS ＋「お客さまの写真 N枚」。縮略図は置かない
     ・閉じるは ○ の塗り（#F4EFE5）＋ 1px の細枠（#E3D8C8）
     ・頭の下の線は 左右 12px を空ける（本文の左右とそろえる）
     ・中は 2 列の格子。まとめ・絞り込み帯・つづきは出さない
     ・開いているあいだ 加購バーのいちばん左が「‹ 戻る」
   ⚠️⚠ 2026-09-21 夜：**「すべてのレビューを見る（N件）」も同じ枠にした**（用户）。
      セレクタを [data-mode="photo"] → **[data-mode]** に広げてあるので、
      «枠・滑り込み・頭・本文の器» は 2 つのモードで 1 つの定義を共有する。
      «写真モードだけ» のもの（2 列の格子・まとめや絞り込みを隠す 等）は
      この下の「写真モードでは出さないもの」から先だけ。
      ⚠️ したがって この上の段を直すと **両方が動く**。片方だけ変えたいときは
         その規則を [data-mode="photo"] / [data-mode="all"] に分けること。
   ============================================================ */

/* ⚠️⚠ 2026-09-21：この段の display:block!important は
   .single-product .k-rv-sheet[hidden]{display:none} より強い。
   そのため 閉じたあとも 幕（z-index:400・ヘッダーの下〜加購バーの上）が残り、
   ページの上半分が «触れない・スクロールしない»、
   加購バーだけ（z-index:401 に上げてあるので）押せる状態になっていた。
   ＝ CLAUDE.md «display: を書いた要素は UA の [hidden]{display:none} に勝つ»。
   → [hidden] を明示で打ち消す。この 1 行を消さないこと。 */
html body.single-product .k-rv-sheet[data-mode][hidden]{display:none!important}

html body.single-product .k-rv-sheet[data-mode]{
  top:var(--k-rvp-top,0px)!important;
  bottom:var(--k-rvp-bottom,0px)!important;
  inset-inline:0!important;
  display:block!important;
  padding:0!important;
  background:rgba(40,35,28,.28)!important;
}
html body.single-product .k-rv-sheet[data-mode] .k-rv-sheet-in{
  position:absolute!important;inset:0!important;
  width:auto!important;max-width:none!important;max-height:none!important;height:auto!important;
  margin:0!important;border-radius:0!important;box-shadow:none!important;
  background:#FFFFFF!important;
  display:flex!important;flex-direction:column!important;
  /* 右から滑り込む。閉じるときは同じ時間で右へ戻る */
  transform:translateX(100%);
  transition:transform .28s ease;
}
html body.single-product .k-rv-sheet[data-mode].is-in .k-rv-sheet-in{transform:translateX(0)}

/* ---- 頭 ---- */
html body.single-product .k-rv-sheet[data-mode] .k-rv-sheet-h{
  flex:none!important;display:flex!important;align-items:center!important;gap:10px!important;
  padding:16px 12px 12px!important;border-bottom:0!important;background:#fff!important;
}
html body.single-product .k-rv-sheet[data-mode] .k-rv-sheet-t{
  flex:1 1 auto;min-width:0;text-align:left!important;
}
html body.single-product .k-rv-sheet[data-mode] .k-rv-sheet-t .eyt{
  display:block;font-family:'M PLUS Rounded 1c',sans-serif;
  font-size:11px;font-weight:600;letter-spacing:.14em;color:#B08A6A;
}
html body.single-product .k-rv-sheet[data-mode] .k-rv-sheet-t .jp{
  display:block;font-family:'Kaisei Tokumin',serif;font-size:17px;font-weight:600;
  color:#3C3227;margin-top:2px;
}
html body.single-product .k-rv-sheet[data-mode] .k-rv-sheet-t .jp em{
  font-style:normal;font-family:'M PLUS Rounded 1c',sans-serif;
  font-size:12px;color:#8A7F72;margin-left:8px;
}
/* 閉じる：正円の塗り＋細枠。幅と高さは必ず同じ（違うと楕円に見える） */
html body.single-product .k-rv-sheet[data-mode] .k-rv-sheet-x{
  flex:none!important;box-sizing:border-box!important;
  width:36px!important;height:36px!important;padding:0!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  border:1px solid #E3D8C8!important;border-radius:50%!important;
  background:#F4EFE5!important;color:#6B6152!important;font-size:17px!important;line-height:1!important;
}
/* 頭の下の線。通しで引かず、左右 12px を空けて 本文とそろえる */
html body.single-product .k-rv-sheet[data-mode] .k-rv-sheet-h::after{content:none}
html body.single-product .k-rv-sheet[data-mode] .k-rv-sheet-b{
  flex:1 1 auto!important;min-height:0!important;overflow:auto!important;
  padding:12px!important;background:#fff!important;border-top:0!important;
  position:relative;
}
html body.single-product .k-rv-sheet[data-mode] .k-rv-sheet-b::before{
  content:'';position:absolute;top:0;left:12px;right:12px;height:1px;background:#EFE7D8;
}

/* ---- 頭の 2 つのタブ（お客さまの声 / レビューを書く）----
   2026-09-21 夜 第 2 版。第 1 版（字だけ＋下線）は «不好看» と用户。
   ＝ «押せるもの» に見えていなかったので、米色の溝に白い札が乗る形にした
      （加購エリアの選択肢と同じ «選んでいる方が白く浮く» 語彙）。
   ⚠️ 四隅は直角 —— レビュー欄の他の面（2026-09-21 の改版）とそろえる。
   ⚠️ 頭の × は外したので、タブは頭の幅いっぱいを 2 つで分ける。 */
html body.single-product .k-rv-sheet[data-mode="all"] .k-rv-sheet-h{
  padding:12px 12px 10px!important;
  border-bottom:1px solid #EFE7D8!important;
  background:#fff!important;
}
html body.single-product .k-rv-sheet[data-mode] .k-rv-tabs{
  flex:1 1 auto!important;min-width:0!important;
  display:flex!important;align-items:stretch!important;gap:4px!important;
  padding:4px!important;background:#F2EBE0!important;
}
html body.single-product .k-rv-sheet[data-mode] .k-rv-tab{
  flex:1 1 0!important;min-width:0!important;
  min-height:40px!important;padding:0 6px!important;margin:0!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;
  font-family:'M PLUS Rounded 1c',sans-serif!important;
  font-size:14px!important;font-weight:500!important;line-height:1.2!important;
  color:#8E8471!important;letter-spacing:.02em!important;cursor:pointer;
  transition:background .16s ease,color .16s ease;
}
html body.single-product .k-rv-sheet[data-mode] .k-rv-tab em{
  font-style:normal;font-size:11.5px;margin-left:5px;color:inherit;opacity:.8;
}
html body.single-product .k-rv-sheet[data-mode] .k-rv-tab.on{
  background:#fff!important;
  color:#3C3227!important;
  font-weight:700!important;
  box-shadow:0 1px 2px rgba(70,54,36,.12)!important;
}
/* ⚠️⚠ この 2 行は «display:flex» の **後ろ** に置くこと。
   [data-mode="photo"] と [data-mode] は 詳細度が同じ（属性セレクタ 1 つ）なので、
   前に置くと 後ろの display:flex!important に負けて
   写真モードでもタブが出る（2026-09-21 夜に実際そうなった）。
   ＝ CLAUDE.md «同じ詳細度なら後勝ち»。 */
html body.single-product .k-rv-sheet[data-mode="photo"] .k-rv-tabs{display:none!important}
html body.single-product .k-rv-sheet[data-mode="all"] .k-rv-sheet-t{display:none!important}
/* 閉じるの «×»：写真の格子では出す／お客さまの声では出さない（用户 2026-09-21 夜の訂正）。
   ⚠️ 並び順に注意 —— 上の «[data-mode] .k-rv-sheet-x» と詳細度が同じなので、
      この 1 行は その後ろに置くこと（同じ詳細度なら後勝ち）。 */
html body.single-product .k-rv-sheet[data-mode="all"] .k-rv-sheet-x{display:none!important}

/* 投稿フォームを入れる側。中の見た目はページ側とまったく同じものを動かしてくる */
html body.single-product .k-rv-sheet[data-mode] .k-rv-sheet-write[hidden]{display:none!important}
html body.single-product .k-rv-sheet[data-mode] .k-rv-sheet-write .k-rv-form{margin-top:4px}
/* 「レビューを書く」を見ているあいだは 一覧まわりを出さない */
html body.single-product .k-rv-sheet[data-tab="write"] .k-rv-sum,
html body.single-product .k-rv-sheet[data-tab="write"] .k-rv-filter,
html body.single-product .k-rv-sheet[data-tab="write"] .k-rv-sheet-list,
html body.single-product .k-rv-sheet[data-tab="write"] .k-rv-more{display:none!important}

/* ---- 投稿できない方に出す入口（.k-rv-gate）----
   同業は «灰色の大きな四角＋橙色のボタン» だけで、画面がほとんど空だった（用户「很丑」）。
   うちは 3 つで埋める：小さな陶土色の絵 → 理由の 1 文 → ログインの札、
   そのあとに «掲載について»（既にある文）。空白を絵で埋めるのではなく、
   読んで意味のあるものを置く。 */
html body.single-product .k-rv-gate{
  margin:6px 0 0;
  padding:30px 22px 24px;
  background:#FBF7EF;
  text-align:center;
}
html body.single-product .k-rv-gate-ic{
  display:flex;align-items:center;justify-content:center;
  width:62px;height:62px;margin:0 auto;
  border-radius:50%;
  background:#fff;
  box-shadow:0 1px 3px rgba(70,54,36,.10);
  color:#B07E63;
}
html body.single-product .k-rv-gate-ic svg{width:27px;height:27px}
html body.single-product .k-rv-gate-t{
  margin:15px auto 0;max-width:290px;
  font-size:13.5px;line-height:1.95;color:#6E6555;text-align:left;
}
html body.single-product .k-rv-gate-b{
  display:block;max-width:290px;margin:19px auto 0;
  padding:14px 18px;
  background:#9A6B55;color:#fff;
  font-size:15px;font-weight:500;line-height:1.3;
  text-align:center;text-decoration:none;
}
html body.single-product .k-rv-gate-b:hover{background:#89604C;color:#fff}
/* «掲載について» は入口の中では控えめに（読みたい人だけ開く）。
   ⚠️ ページ側の .k-rv-policy は «白い角丸のカード» なので、
      この米色の面の上ではもう一枚 箱が浮いて見える。ここでは平らにする。 */
html body.single-product .k-rv-gate .k-rv-policy{
  margin:22px auto 0!important;max-width:290px;text-align:left;
  background:transparent!important;border:0!important;border-radius:0!important;
  box-shadow:none!important;
  border-top:1px solid #E7DECE!important;padding:14px 0 0!important;
}
html body.single-product .k-rv-gate .k-rv-policy summary{padding-left:0!important;padding-right:18px!important}
html body.single-product .k-rv-gate .k-rv-policy p{padding-left:0!important;padding-right:0!important}

/* ---- 写真モードでは出さないもの ---- */
html body.single-product .k-rv-sheet[data-mode="photo"] .k-rv-sum,
html body.single-product .k-rv-sheet[data-mode="photo"] .k-rv-filter,
html body.single-product .k-rv-sheet[data-mode="photo"] .k-rv-more{display:none!important}

/* ---- 2 列の格子。写真が主役 ---- */
html body.single-product .k-rv-sheet[data-mode="photo"] .k-rv-sheet-list{
  display:grid!important;grid-template-columns:repeat(2,1fr)!important;gap:10px!important;
  padding:0!important;margin:0!important;
}
html body.single-product .k-rv-sheet[data-mode="photo"] .k-rv-item{
  padding:0!important;margin:0!important;border:0!important;
  background:#FBF8F3!important;border-radius:8px!important;overflow:hidden!important;
}
html body.single-product .k-rv-sheet[data-mode="photo"] .k-rv-item .k-rv-pics{
  display:block!important;margin:0!important;order:-1;
}
html body.single-product .k-rv-sheet[data-mode="photo"] .k-rv-item .k-rv-pic{
  width:100%!important;height:auto!important;aspect-ratio:1/1!important;border-radius:0!important;
}
html body.single-product .k-rv-sheet[data-mode="photo"] .k-rv-item .k-rv-pic:nth-child(n+2){display:none!important}
html body.single-product .k-rv-sheet[data-mode="photo"] .k-rv-item{display:flex!important;flex-direction:column!important}
html body.single-product .k-rv-sheet[data-mode="photo"] .k-rv-ttl{
  margin:8px 10px 0!important;font-size:12.5px!important;font-weight:600!important;
  display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:1!important;overflow:hidden!important;
}
html body.single-product .k-rv-sheet[data-mode="photo"] .k-rv-text{
  margin:4px 10px 0!important;
  display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;overflow:hidden!important;
}
html body.single-product .k-rv-sheet[data-mode="photo"] .k-rv-text p{font-size:12px!important;line-height:1.7!important;margin:0!important}
html body.single-product .k-rv-sheet[data-mode="photo"] .k-rv-head{order:9;margin:8px 10px 10px!important;gap:6px!important}
html body.single-product .k-rv-sheet[data-mode="photo"] .k-rv-av{width:20px!important;height:20px!important;font-size:10px!important}
html body.single-product .k-rv-sheet[data-mode="photo"] .k-rv-nm{font-size:11.5px!important}
html body.single-product .k-rv-sheet[data-mode="photo"] .k-rv-sub,
html body.single-product .k-rv-sheet[data-mode="photo"] .k-rv-meta,
html body.single-product .k-rv-sheet[data-mode="photo"] .k-rv-foot,
html body.single-product .k-rv-sheet[data-mode="photo"] .k-rv-item .k-rv-more{display:none!important}
html body.single-product .k-rv-sheet[data-mode="photo"] .k-rv-date{font-size:11px!important}

/* ---- 加購バーの「戻る」。写真モードのあいだだけ ---- */
html body.single-product .k-buybar .k-rv-back{display:none}
html body.single-product.k-rvp-open .k-buybar .k-rv-back{
  display:flex;align-items:center;justify-content:center;gap:5px;
  flex:none;height:48px;padding:0 16px;border:0;border-radius:99px;cursor:pointer;
  background:#F4EFE5;color:#6B6152;
  font-family:'M PLUS Rounded 1c',sans-serif;font-size:14px;font-weight:500;
}
html body.single-product.k-rvp-open .k-buybar .k-rv-back .a{font-size:17px;line-height:1}
html body.single-product.k-rvp-open .k-buybar .k-bb-qty{display:none!important}
/* ⚠️ 枠は z-index:400、加購バーは 340。
   バーの高さを測り損ねて 枠が下まで伸びたとき、
   半透明の幕がバーの上に乗って「戻る」が押せなくなる。
   写真モードのあいだだけ バーを上に置く。 */
html body.single-product.k-rvp-open .k-buybar{z-index:401!important}

/* ── «ご注文の流れ» の見出し帯：字の詰め方だけ 効果図（rvhead.php）の値に（2026-09-21 夜）
      用户「撤销、两个地方的样式恢复成调整之前的。只保留这个「ご注文の流れ」字体的样式变更」。
      ⚠️ 変えるのは 字だけ —— 帯の形（L3：四隅の L 字・字の下の線と猫・毛糸玉の位置）は
         2026-09-17 のまま。枠の絵に差し替える案（H/E）は 撤回した。
      差分：英字 11px/.3em/#F2E4D6 → 10.5px/500/.28em/#EED9C6、2 行の間 2px → 1px、
            和文の行送り 1.4 → 1.3。 */
html body.single-product .k5-flow .hd .ey{
  /* ⚠️ font-family も書くこと —— 素の .k5-bn .ey は Kaisei Tokumin だが、
     後ろの «丸ゴシックを直書き» の段に負けて 実際は M PLUS Rounded 1c で出ていた
     （効果図は Kaisei Tokumin）。 */
  font-family:"Kaisei Tokumin",serif!important;
  font-size:10.5px!important;font-weight:500!important;line-height:1.2!important;
  letter-spacing:.28em!important;padding-left:.28em!important;
  color:#EED9C6!important;margin-bottom:1px!important;
}
html body.single-product .k5-flow .hd .tt{
  /* 和文も同じ理由で font-family を書く（効果図は Kaisei Tokumin 600） */
  font-family:"Kaisei Tokumin",serif!important;font-weight:600!important;
  line-height:1.3!important;
}

/* ── «お客さまの声» の見出し（2026-09-21 夜・第 2 版）
      用户「不加背景，做成 定制流标题样式那样，用现在颜色字体」
      ＝ «ご注文の流れ»（L3）と同じ組み方だが **地は敷かない**：
         小さい英字（VOICE）が上、大きい日本語が下、日本語の左右に毛糸玉、その下に «線を歩く猫»。
      色と字は いまの見出しのまま（白地に墨・Kaisei Tokumin）。飾りは陶土色の版を使う。
      ⚠️ 第 1 版は «この品について»（小さい日本語＋大きい英字）に寄せたが、用户は 流れ側の型を選んだ。

      ⚠️ 祖先に .woocommerce-tabs / .k-open を書かない ——
         rdReviews() が この accordion-item を .product-tabs-wrapper の «外» へ動かすので当たらない。
      ⚠️ 縦に積むのも自分で書く（.k-open 側の段が効かないため）。書かないと 英字と日本語が横に並ぶ。 */
html body.single-product .wd-accordion-item.k5-reviews > .wd-accordion-title{
  display:flex!important;flex-direction:column!important;align-items:center!important;
  justify-content:center!important;
  /* ⚠️ 下の 10px は «猫の線の下の空き»（用户「猫咪那条线下面距离加一丢丢，挨太近了」）。
     日本語側の padding-bottom を増やしても 線は要素の下端に貼り付いたままなので
     «字と線の間» が開くだけ —— 線の下を空けるのは こちら。 */
  padding:20px 18px 10px!important;
}
/* 上に出していた小さい英字（::before の VOICE）は止める —— 英字は .k-ttl-en（js が足す span）に移した */
html body.single-product .wd-accordion-title-text[data-eyt="VOICE"]::before{content:none!important}

/* ① 英字（VOICE）＝ 小さく上に。DOM では日本語の «後ろ» にあるので order で前に出す */
html body.single-product .wd-accordion-title-text[data-eyt="VOICE"] + .k-ttl-en{
  order:-1!important;
  display:block!important;position:static!important;
  font-family:"Kaisei Tokumin",serif!important;
  font-size:10.5px!important;font-weight:500!important;line-height:1.2!important;
  letter-spacing:.28em!important;padding:0 0 0 .28em!important;
  color:#9A6B55!important;background:none!important;margin:0!important;
}
/* 英字側の毛糸玉は出さない（毛糸玉は下の日本語に付く） */
html body.single-product .wd-accordion-title-text[data-eyt="VOICE"] + .k-ttl-en::before,
html body.single-product .wd-accordion-title-text[data-eyt="VOICE"] + .k-ttl-en::after{content:none!important}

/* ② 日本語＝大きく下に。下に «線を歩く猫»（S9 と同じ陶土色の版） */
html body.single-product .wd-accordion-title-text[data-eyt="VOICE"]{
  display:block!important;position:relative!important;text-align:center!important;
  font-family:"Kaisei Tokumin",serif!important;
  font-size:21px!important;font-weight:600!important;line-height:1.3!important;
  letter-spacing:.12em!important;padding-left:.12em!important;
  color:#3F3A32!important;margin:1px 0 0!important;
  padding-bottom:37px!important;
  background:url("assets/sec-orn-walkcat.png?v=8d31b2df") center bottom/160px auto no-repeat!important;
}
/* ③ 日本語の左右の毛糸玉。位置は字の実幅 --tw（js の measureTitleEn が入れる）。
      ⚠️ .k-tw が付くまで出さない —— 測る前に出すと 変なところに飛ぶ */
html body.single-product .wd-accordion-title-text[data-eyt="VOICE"].k-tw::before,
html body.single-product .wd-accordion-title-text[data-eyt="VOICE"].k-tw::after{
  content:""!important;position:absolute!important;top:15px!important;
  /* ⚠️ display:block も書くこと —— L10076 に
     «.k-open .wd-accordion-title-text::before{content:none!important;display:none!important}»
     があり（F2 の時に 古い英字の小見出しを消したもの）、content だけ上書きしても
     display:none が残って «この品について» の左の毛糸玉が出ない（2026-09-22 実際に出た）。
     詳細度が高くても «別のプロパティ» は上書きできない。 */
  display:block!important;
  width:28px!important;height:10px!important;margin-top:-5px!important;margin-bottom:0!important;
  background:url("assets/sec-orn-yarn.png") center/contain no-repeat!important;pointer-events:none;
}
html body.single-product .wd-accordion-title-text[data-eyt="VOICE"].k-tw::before{left:calc(50% - var(--tw) / 2 - 38px)!important}
html body.single-product .wd-accordion-title-text[data-eyt="VOICE"].k-tw::after{left:calc(50% + var(--tw) / 2 + 10px)!important;transform:scaleX(-1)!important}

/* ══════════════════════════════════════════════════════════════
   板块大标题を «お客さまの声» と同じ型にそろえる（2026-09-22）
   用户「内容不动，其他板块的标题，你也像我这图这个样式统一一下：
        よくあるご質問／ご注意／ご注文の流れ／仕様／この品について」

   型（＝いまの «お客さまの声»）：
     ・上：小さい英字（陶土色 #9A6B55・Kaisei Tokumin 10.5px/500・字距 .28em）
     ・下：大きい日本語（墨 #3F3A32・Kaisei Tokumin 21px/600・字距 .12em）
     ・日本語の左右に毛糸玉（位置は字の実幅 --tw。js の measureTitleEn が入れる）
     ・その下に «線を歩く猫»（assets/sec-orn-walkcat.png・160px）
     ・地は敷かない

   これまでは 2 つの型が混ざっていた：
     S9＝小さい日本語 ＋ 大きい英字（この品について・仕様・ご注意・Q&A）
     L3＝濃い陶土色の帯（ご注文の流れ）
   ⚠️ したがって この段は **前の 2 つの型を打ち消してから** 組み直している。
      前の型に戻したくなったら この段だけ消せば戻る（上の S9／L3 の段は残してある）。
   ⚠️ «ご注文の流れ» の濃い地は ここで外している。CLAUDE.md に «配色は変えない» と
      書いたのは この帯のことなので、戻す判断が出たら真っ先にここを見ること。
   ══════════════════════════════════════════════════════════════ */

/* ---- ① 縦に積む・中央そろえ ---- */
html body.single-product .woocommerce-tabs .wd-accordion-item.k-open > .wd-accordion-title{
  display:flex!important;flex-direction:column!important;align-items:center!important;
  padding:20px 18px 10px!important;
}
html body.single-product .k5-flow .hd{
  display:flex!important;flex-direction:column!important;align-items:center!important;
  justify-content:center!important;
  /* 濃い地・角丸・帯の余白をやめて 他の見出しと同じ «地なし» にする */
  background:none!important;border-radius:0!important;box-shadow:none!important;
  margin:0!important;padding:20px 18px 10px!important;height:auto!important;
}
html body.single-product .k5-flow .hd::before{content:none!important}   /* L3 の四隅の L 字 */
/* ⚠️ 章の見出し（.k-dh）も flex にすること —— ここは素の block なので
   order:-1 が効かず、英字が日本語の «下» に残って 猫の線と重なる（2026-09-22 実際に出た）。 */
html body.single-product .k5-chap > .k-dh{
  display:flex!important;flex-direction:column!important;align-items:center!important;
}

/* ---- ② 上の小さい英字 ---- */
html body.single-product .woocommerce-tabs .wd-accordion-item.k-open .k-ttl-en,
html body.single-product .k5-chap > .k-dh .en,
html body.single-product .k5-flow .hd .ey{
  order:-1!important;                       /* DOM では日本語の «後ろ» にあるので前に出す */
  display:block!important;position:static!important;
  font-family:"Kaisei Tokumin",serif!important;
  font-size:10.5px!important;font-weight:500!important;line-height:1.2!important;
  letter-spacing:.28em!important;padding:0 0 0 .28em!important;margin:0!important;
  color:#9A6B55!important;background:none!important;
}
/* S9 で英字に付けていた毛糸玉は出さない（毛糸玉は日本語側へ移した） */
/* ⚠️ «.k-enw» を付けて書くこと —— S9 の側は .k-ttl-en.k-enw::before なので、
   クラス 1 つぶん詳細度が高い。付けないと FEATURES の左右に毛糸玉が残る（実際に残った）。 */
html body.single-product .woocommerce-tabs .wd-accordion-item.k-open .k-ttl-en::before,
html body.single-product .woocommerce-tabs .wd-accordion-item.k-open .k-ttl-en::after,
html body.single-product .woocommerce-tabs .wd-accordion-item.k-open .k-ttl-en.k-enw::before,
html body.single-product .woocommerce-tabs .wd-accordion-item.k-open .k-ttl-en.k-enw::after,
html body.single-product .k5-chap > .k-dh .en::before,
html body.single-product .k5-chap > .k-dh .en::after,
html body.single-product .k5-chap > .k-dh .en.k-enw::before,
html body.single-product .k5-chap > .k-dh .en.k-enw::after{content:none!important}

/* ---- ③ 下の大きい日本語 ＋ «線を歩く猫» ---- */
html body.single-product .wd-accordion-title-text[data-eyt="VOICE"],
html body.single-product .woocommerce-tabs .wd-accordion-item.k-open .wd-accordion-title-text[data-eyt="ABOUT"],
html body.single-product .k5-chap > .k-dh .jp,
html body.single-product .k5-flow .hd .tt{
  /* ⚠️ 幅いっぱいにすること —— 親が align-items:center なので、放っておくと
     この箱は «字の幅» まで縮む。すると 160px の «線を歩く猫» の背景が箱から
     はみ出して切られ、«仕様»（47px）や «ご注意»（71px）では 猫が消えて線だけになる。
     毛糸玉の左右も 字幅ではなく箱の中心で置くので、揃わなくなる。 */
  width:100%!important;align-self:stretch!important;
  display:block!important;position:relative!important;text-align:center!important;
  font-family:"Kaisei Tokumin",serif!important;
  font-size:21px!important;font-weight:600!important;line-height:1.3!important;
  letter-spacing:.12em!important;padding-left:.12em!important;
  color:#3F3A32!important;margin:1px 0 0!important;
  padding-bottom:37px!important;
  background:url("assets/sec-orn-walkcat.png?v=8d31b2df") center bottom/160px auto no-repeat!important;
}
/* «この品について» の上に出ていた小さい英字（::before）は 下の .k-ttl-en に移ったので止める */
html body.single-product .woocommerce-tabs .wd-accordion-item.k-open .wd-accordion-title-text[data-eyt="ABOUT"]::before{content:none!important}
/* L3 が .tt に敷いていた «生成りの線＋猫» は 上の猫に置き換わるので打ち消し済み（background を上書き） */
html body.single-product .k5-flow .hd .tt.k-tw::before,
html body.single-product .k5-flow .hd .tt.k-tw::after{content:""!important}

/* ---- ④ 日本語の左右の毛糸玉（--tw が入ってから出す）---- */
html body.single-product .woocommerce-tabs .wd-accordion-item.k-open .wd-accordion-title-text[data-eyt="ABOUT"].k-tw::before,
html body.single-product .woocommerce-tabs .wd-accordion-item.k-open .wd-accordion-title-text[data-eyt="ABOUT"].k-tw::after,
html body.single-product .k5-chap > .k-dh .jp.k-tw::before,
html body.single-product .k5-chap > .k-dh .jp.k-tw::after,
html body.single-product .k5-flow .hd .tt.k-tw::before,
html body.single-product .k5-flow .hd .tt.k-tw::after{
  content:""!important;position:absolute!important;top:15px!important;
  /* ⚠️ display:block も書くこと —— L10076 に
     «.k-open .wd-accordion-title-text::before{content:none!important;display:none!important}»
     があり（F2 の時に 古い英字の小見出しを消したもの）、content だけ上書きしても
     display:none が残って «この品について» の左の毛糸玉が出ない（2026-09-22 実際に出た）。
     詳細度が高くても «別のプロパティ» は上書きできない。 */
  display:block!important;
  width:28px!important;height:10px!important;margin-top:-5px!important;margin-bottom:0!important;
  background:url("assets/sec-orn-yarn.png") center/contain no-repeat!important;pointer-events:none;
}
html body.single-product .woocommerce-tabs .wd-accordion-item.k-open .wd-accordion-title-text[data-eyt="ABOUT"].k-tw::before,
html body.single-product .k5-chap > .k-dh .jp.k-tw::before,
html body.single-product .k5-flow .hd .tt.k-tw::before{left:calc(50% - var(--tw) / 2 - 38px)!important;transform:none!important}
html body.single-product .woocommerce-tabs .wd-accordion-item.k-open .wd-accordion-title-text[data-eyt="ABOUT"].k-tw::after,
html body.single-product .k5-chap > .k-dh .jp.k-tw::after,
html body.single-product .k5-flow .hd .tt.k-tw::after{left:calc(50% + var(--tw) / 2 + 10px)!important;transform:scaleX(-1)!important}

/* ── 卖点の胶囊の見出しだけ «本文と同じ丸ゴシック・ひと回りだけ太く»（2026-09-22）
      用户「我是指的产品详情页的卖点标题，其他的你给我恢复回去」
      ＝ 本文 M PLUS Rounded 1c 400 のすぐ上に来る この見出しだけ 同じ書体の **500**。
      ⚠️ 板块大标题（この品について・仕様・ご注文の流れ・ご注意・Q&A）と お客さまの声 は
         **Kaisei Tokumin のまま**。一度この 6 つも丸ゴシックにして戻した（2026-09-22）。
      ⚠️ 胶囊は white-space:nowrap だが、日本語は全角＝どちらの書体でも 1 字 1em なので
         幅は変わらない（実測：最長 336px のまま。カード 350px に収まる）。 */
html body.single-product .woocommerce-tabs .wd-accordion-item.k-open .wc-tab-inner .k-pcard > .k-dsh{
  font-family:'M PLUS Rounded 1c',sans-serif!important;
  font-weight:500!important;
}

/* ══════════════════════════════════════════════════════════════════════
   棚（/product-category/*/）の様式（2026-09-22 に時計棚で作り、2026-09-29 に全棚へ）
   ----------------------------------------------------------------------
   用户が見て通した見本：https://kumoju.com/_p1a53fdaf7e/clockshelf.php

   ⚠️⚠️⚠️ **2026-09-29：作用域を body.term-clock → body.tax-product_cat に広げた。**
      用户「怎么没有通用那个clock的那个样式呢，我每个去改很费劲」。
      もともと «この棚だけ» に閉じていたのは **様式がまだ決まっていなかったから**で、
      18 棚を道連れにしないための一時的な措置だった。決まった以上 逆にする。
      ⚠️ `body.tax-product_cat` ＝ 商品カテゴリーのアーカイブ ＝ **19 棚ちょうど**。
         `/items/`（平らな全商品一覧）は含まれない ——
         あちらに «棚の版面» を当てると 段が無いのに地色だけ替わる。
      ⚠️ `body.kumoju-shop` は使わない（`/items/` も拾ってしまう）。
      ⚠️ 詳細度は変わらない（どちらも class 1 つ）ので、**勝ち負けの関係は動かない**。
      ⚠️ 棚ごとに変えたいものが出たら、**この段の後ろに** `body.term-<slug>` で
         上書きを足す（この段を削らない）。

   ⚠️ 中で使っている飾りは どれも棚を選ばない：
      reason-frame-curl.png（選ばれる理由の枠）／reason-pets.png（犬猫）／
      sec-orn-walkdog.png（線を歩く犬）／sec-orn-yarn.png（毛糸玉）。
      «clock» と書いてあるのは 全部 見本ファイル名の注記で、絵ではない。

   決めた数字の出どころ（2026-09-22 に 線上 product/clock-plain-square を実測）：
     ・白い箱 x=10 / 幅 370 ＝ 左右 10px の溝  →  この棚は 用户の指示で **11px**
     ・角丸 0（直角）・影なし
     ・板块大标题＝ 上に小さい英字（Kaisei Tokumin 10.5px/500・字距 .28em・#9A6B55）
                    下に大きい日本語（Kaisei Tokumin 21px/700・字距 .12em・#3F3A32）
                    日本語の左右に毛糸玉 28×10、その下に «線を歩く猫» 160px、地は敷かない
   ⚠️ 地色は **白**（用户「这个页面底色白色」）。米色 #F6F1E9 は
      «商品一覧» と «選ばれる理由» の 2 段にだけ敷く ——
      参照店の «米色の帯 ＋ 中に白いカード» の図と地の関係だけを持ってきている。
   ⚠️ 毛糸玉は JS で字幅を測らずに置く：外側の箱が «線を歩く猫» を持ち（幅いっぱい）、
      内側の inline-block が 字幅ぶんだけ縮んで 毛糸玉を左右に付ける。
      商品ページ側は js の measureTitleEn() で --tw を入れているが、
      ここは新しい markup なので 測らずに済む形にした。
   ══════════════════════════════════════════════════════════════════════ */

/* ---- ① 地は白。左右 11px の溝 ---- */
html body.tax-product_cat,
html body.tax-product_cat .website-wrapper,
html body.tax-product_cat .main-page-wrapper,
html body.tax-product_cat .site-content{ background:#fff }
/* ⚠️⚠️ 2026-09-22：ここは最初 «.site-content .container / .row» と書いていたが、
   **この頁に その要素は存在しない** ＝ 1 行も効いていなかった。
   実際の溝は テーマが .site-content に入れている **15px**。実測で分かった
   （node probe.js …「.site-content : padding=0px 15px」）。
   見本は 11px なので ここで上書きする。**書いたら必ず測り直すこと。** */
/* ⚠️ 2026-09-23 深夜：**11px → 15px**（用户「看下参考站的留白呢，我感觉整体留白
   左右两边还是少了点？」＋ 参照店の DevTools のスクショ `padding: 4%`）。
   実測の根拠：
     ・参照店 original-pet の本文は **x=16 / w=359**（`padding:4%` ＝ 390px で 15.6px）
     ・うちの **ほかの 18 棚は もともと 15px**（`mem` 実測 x=15 / w=360）
     ・この棚だけ 11px だった（2026-09-22「左右距离可以再加一个px」で 10→11 にしたもの）
   → 15px にすると 参照店と 0.6px ちがい、ほかの 18 棚とは 同じになる。
   ⚠️ **4% にはしない** —— PC では `.site-content` が 1200px の容器の中なので
      4% ＝ 48px になり 版面が別物になる。参照店は手机だけの作り。
   ⚠️⚠️ **この値に連動するのは 下の `.k-topband{ margin-inline }` 1 か所だけ**
      （grep 済み）。溝を触ったら そこも必ず同じ値にする。 */
html body.tax-product_cat .site-content{ padding-left:15px; padding-right:15px }
html body.tax-product_cat .k-shop-title{ padding-left:0; padding-right:0 }

/* ⚠️ 頭のバナーは 既定で margin:0 -16px（端まで）。この棚では 溝の中に収める。 */
html body.tax-product_cat .k-shelf-hero{ margin-left:0; margin-right:0 }

/* ---- ② 本文にはさむ 2:1 の写真 ---- */
html body.tax-product_cat .k-shelf-fig{ margin:16px 0 14px }
html body.tax-product_cat .k-shelf-fig img{
  display:block; width:100%; height:auto; border-radius:0;
}
html body.tax-product_cat .k-shelf-fig figcaption{
  font-family:"M PLUS Rounded 1c",sans-serif;
  font-size:14px; font-weight:500; color:#6B5A4E; text-align:center;
  line-height:1.7; margin-top:8px;
}

/* ---- ③ 手順。⚠️ 罫は引かない（用户「你这里就不要加线条装饰了」）---- */
html body.tax-product_cat .k-steps ol{ border-top:0 }
html body.tax-product_cat .k-steps li{ border-bottom:0; padding:5px 0 }
html body.tax-product_cat .k-steps-lead{
  font-family:"M PLUS Rounded 1c",sans-serif;
  font-size:14px; color:#6B5A4E; line-height:1.55; margin:0 0 6px;
}
html body.tax-product_cat .k-steps > p{ font-size:14px; line-height:1.55; margin:10px 0 0 }

/* ---- ④ 板块大标题。商品ページと同じ型（英字が上・日本語が大きく下）---- */
html body.tax-product_cat .k-nav-head{ display:flex; flex-direction:column; align-items:center; margin-bottom:14px }
html body.tax-product_cat .k-nav-en{
  order:-1;                                   /* markup では h2 の «後» にある */
  font-family:"Kaisei Tokumin",serif!important;
  font-size:10.5px; font-weight:500; line-height:1.2;
  letter-spacing:.28em; padding-left:.28em; margin:0;
  color:#9A6B55; background:none; border:0;
}
/* ⚠️ 2026-09-24：この頁の «歩く猫» は **全部 犬に替えた**（用户「你把这个页面，
   下面的猫咪全部换成狗狗这个」）。当たっているのは 3 か所 ——
   «掛け時計 商品一覧»（.k-nav-head h2）と 組の見出し 2 つ（.k-sec h2）。
   ⚠️ 大きさは **160px のまま**（大見出しだけ 200px）＝ 主従は 大きさで付ける。
   ⚠️ «選ばれる理由» の見出しは ⑱-1 で background:none にしてあるので ここには出ない。
   ⚠️ 商品ページ（body.single-product）の 2 か所は **猫のまま**。あちらは別の頁。 */
html body.tax-product_cat .k-nav-head h2{
  width:100%; text-align:center; position:relative;
  font-family:"Kaisei Tokumin",serif!important;
  font-size:21px; font-weight:700; line-height:1.3;
  letter-spacing:.12em; padding-left:.12em; color:#3F3A32;
  margin:1px 0 0; padding-bottom:37px; border:0;
  background:url("assets/sec-orn-walkdog.png?v=fc94e6d7") center bottom/160px auto no-repeat;
}
/* 毛糸玉。⚠️ 字幅に合わせるため 中身を inline-block の箱にする（JS で測らない）。 */
html body.tax-product_cat .k-nav-head h2 > span.k-tt{
  display:inline-block; position:relative;
}
html body.tax-product_cat .k-nav-head h2 > span.k-tt::before,
html body.tax-product_cat .k-nav-head h2 > span.k-tt::after{
  content:""; position:absolute; top:50%; margin-top:-5px;
  width:28px; height:10px; background:url("assets/sec-orn-yarn.png") center/contain no-repeat;
}
html body.tax-product_cat .k-nav-head h2 > span.k-tt::before{ left:-38px }
html body.tax-product_cat .k-nav-head h2 > span.k-tt::after{ right:-38px; transform:scaleX(-1) }

/* ---- ⑤ 米色を敷くのは «商品一覧» と «選ばれる理由» の 2 段だけ ---- */
/* ⚠️ 負の余白で «端まで» に伸ばさない —— 見本では 帯も 11px の溝の中にある。
   伸ばそうとして margin:-11px と書いたが、実際の溝は 15px だったので
   両側に 4px の白い筋が残った（用户がスクリーンショットで指摘）。
   ⚠️⚠️ 2026-09-24：**地色は 2 段で別々になった**ので、ここでは敷かない。
      ・«商品一覧»（目次） …… **#E6D5B8**（下の ㉔。用户が 見本 clocknavbg の D を選んだ）
      ・«選ばれる理由»     …… **#fff**（⑱。飾り枠の中だから）
      形（枠なし・直角・影なし・溝・内側の余白）は 2 段とも同じなので ここに残す。 */
html body.tax-product_cat .k-shelf-nav,
html body.tax-product_cat .k-reasons{
  border:0; border-radius:0; box-shadow:none;
  margin-left:0; margin-right:0; padding:22px 14px 26px;
}

/* ══════════════════════════════════════════════════════════════════════
   ㉔ «掛け時計 商品一覧»（目次）の地色（2026-09-24。見本 clocknavbg の **D**）
   用户「商品一覧 这部分的外层那个背景框用深色，但不要太深」
   ----------------------------------------------------------------------
   #E6D5B8 ＝ **参照店の «◯◯商品一覧» の帯の実測色**（2026-09-07 の切り取りで測った値。
   docs/catalog-structure-2026-09-07.md の表にも同じ数字がある）。
   ⚠️ 新しい色を足していない —— この頁と参照店に すでにある色から選んでもらった
      （ほかの候補も F=#D8CCBA «こんな棚もあります» の帯、E=#E2D7C2 頭のキャッチ帯）。
   ⚠️ 中の白いカード（.k-nav-list a の #fff）は 触らない —— 地が濃くなったぶん
      カードが浮く。CLAUDE.md の «.k-nav-list a の白は絶対に触らない» はこのこと。 */
html body.tax-product_cat .k-shelf-nav{ background:#E6D5B8 }
/* 目次の中のカードは 白（参照店と同じ 図と地）*/
html body.tax-product_cat .k-nav-list a{ background:#fff; border:0; border-radius:0; padding:12px }
/* ⚠️ 2026-09-24：カードの中の字は **写真と同じ左右の線**に置く。
   ⑨ の既定は .nn / .np に margin:… 8px が付いていて、カードの padding 12px と
   **足されて 20px** になっていた（＝ 字だけ 写真より 8px 内側）。
   そのぶん 字の入る幅が 137 → **121px** しか無く、«しかくい掛け時計»（8 字 ＝ 124.8px）が
   折れて **«計» 1 字だけの行**になり、2 枚のカードの高さが 22px ずれて
   価格の行も横にそろわなかった（実測 246 / 256px）。
   → 左右の margin を 0 に。字の幅 137px ＝ 12px の余裕ができる。
   ⚠️ 上下の margin（8 / 3px）は そのまま。⚠️ 組の名前を長くするときは ここを測り直す。 */
html body.tax-product_cat .k-nav-list .nn,
html body.tax-product_cat .k-nav-list .np{ margin-inline:0 }

/* ---- ⑥ 商品の格子。写真の下敷きだけ 生成り ----
   ⚠️ 2026-09-24：ここにあった «.products li.product …{border-radius:0}» の 2 行は
      **1 つも要素に当たっていなかった**（Woodmart が出すのは div.wd-product）。
      正しい根に付け替えて ⑲-4 へ移した。画面は 1px も変わらない。 */

/* ---- ⑦ 線上に出してから 見本と突き合わせて出た食い違い（2026-09-22 夜）----
   用户「未登录不可以也看到你上线的吗，差别好大哦」→ 実際に並べて撮って確かめたら、
   地色と溝は合っていたが **4 つ 食い違っていた**。ここはその手当て。 */

/* ⑦-1 大見出しも 板块大标题と同じ型に（英字は既に .k-ten で上にある）。
        ⚠️ .k-trule（短い罫）は この棚では出さない —— 代わりに «線を歩く猫»。 */
html body.tax-product_cat .k-shop-title .k-ten{
  font-family:"Kaisei Tokumin",serif!important;
  font-size:10.5px; font-weight:500; letter-spacing:.28em; padding-left:.28em;
  color:#9A6B55; margin:0 0 1px;
}
/* ⚠️⚠️ 2026-09-24：大見出しの下だけ **猫 → 犬** に替えた
   （用户「下面不用那个猫咪的样式、你可以生成新的、我来选」→ 見本 clocktitlerule の **6 番**）。
   ねらいは 2 つ：① 商品ページの見出しと分ける ② 頁の中の «板块小标题» 4 つ
   （.k-sec h2 / .k-reasons h2 / .k-nav-head h2）は **猫のまま**なので、
   大見出しと 中の小見出しが 別の絵になり 主従が付く。
   ⚠️ 中の 4 つは 触っていない。替えたのは この 1 行だけ。
   ⚠️ 絵は assets/sec-orn-walkdog.png（480×80）。組み立ては 猫と同じ数値にそろえてある
      （用户「线条太随意了、你看看线上猫咪的那个线条样式、粗细和位置」）——
      線の太さ **2px** ／ ゆるい右下がり ／ 色 #996A54。
      焼いたままの線は 6px・まっすぐ・全幅で **3 倍太かった**ので、
      線は捨てて .cache/opt-0924/build-rule6b.py で 引き直している。
   ⚠️⚠️ 2026-09-24 第 3 版（用户「图案可以再大一点／线条自然一点／狗狗前面线条少一点／
      线条粗度统一，不是垂直的／可以再拉长点」）：
        ・絵を 480×80 → **600×100**、画面の幅を 160px → **200px**
          ⚠️ 画面での線の太さは 変わらない（600px の 2px ＝ 200px 表示で DPR3 の 2 画素）。
          ⚠️ **h1 の padding-bottom は 37px のまま** —— 200px 幅なら 絵の高さは 33.3px で収まる
             （用户「不动上下的留白行距」）。これ以上 幅を広げると 上下の間合いが動く。
        ・線は **縦棒の集まりをやめて 1 本の折れ線**（4 倍で引いて縮める）＝ 太さが どこでも同じ。
          前は x ごとに縦棒を置いていたので 傾きの変わり目に 段（縦の筋）が出ていた。
        ・まっすぐではなく ごく浅い波（±1.6px）＋ 両端を 先細りに ＝ 手で引いた線に寄せる
        ・線の右端は **犬の前足のすぐ先**で止める（前は 画面の端まで引いていた）
        ・犬は 78px（前は 58px）。⚠️ 切り出した犬には 焼いたときの太い線が足もとに付いてくるので、
          下 8 行の «横に 14px 以上つながっている» ところだけ消してから使う
          （消さないと 犬のところだけ 線が太くなる）。
   ⚠️ うしろの足あと（7 つ・塗り・不規整・右から左へ 0.85→0.04 で消える）も 同じ道具が置いたもの。
      生図に描かせていない —— 数・間隔・濃さを あとから数で直せるようにするため。
   ⚠️ 絵を焼き直したら ?v= の md5 を必ず変える（静的ファイルは 1 年キャッシュ）。 */
html body.tax-product_cat .k-shop-title h1{
  position:relative; width:100%; text-align:center;
  font-family:"Kaisei Tokumin",serif!important;
  font-size:21px; font-weight:700; line-height:1.3;
  letter-spacing:.12em; padding-left:.12em; color:#3F3A32;
  margin:0; padding-bottom:37px;
  background:url("assets/sec-orn-walkdog.png?v=fc94e6d7") center bottom/200px auto no-repeat;
}
html body.tax-product_cat .k-shop-title .k-trule{ display:none }

/* ⑦-2 手順の番号。素の «1.» ではなく 丸に入れる（見本と同じ） */
html body.tax-product_cat .k-steps .sn{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%;
  background:#F6F1E9; color:#9A6B55;
  font-family:"Kaisei Tokumin",serif; font-size:11px; font-weight:700;
  margin-right:11px; flex:0 0 22px;
}
html body.tax-product_cat .k-steps .sn::after{ content:none }   /* 既定の «.» は消す */
html body.tax-product_cat .k-steps li{ display:flex; align-items:flex-start }
html body.tax-product_cat .k-steps .st{ font-size:14.5px; color:#3F3A32 }

/* ⑦-3 確認稿（.k-sample）と 選び方（.k-guide）は この棚では **出していない**
        （2026-09-22 用户「不留，让他们进详情页看」）。止めているのは PHP 側
        （inc/kumoju-shelf.php の kumoju_shelf_hidden）—— CSS で隠すと
        画像だけ読み込まれて無駄になるため。ここに書いていた «白地に直す» 段は
        出さないので消した。復活させるときは 設定の 'hide' を外す。 */

/* ⑦-4 目次のカードに «4種類のデザイン» の行 */
html body.tax-product_cat .k-nav-list .nt{
  display:block; font-size:11px; color:#9A6B55; margin:1px 0 2px;
}

/* ---- ⑧ 線上と見本を «実測で» 突き合わせた結果の手当て（2026-09-22 夜）----
   道具：.shots 外の audit-type.js（両頁の font-family / size / weight / 字距 / 色 を
   同じ物差しで取って並べる）。20 項目のうち 12 が食い違っていた。
   ⚠️ いちばん効いていたのは CSS ではなく **フォントの読み込み** ——
      棚のページは Shippori / Zen Maru の集合しか読んでおらず、
      Kaisei Tokumin と M PLUS Rounded 1c は 1 バイトも来ていなかった。
      開発機には両方入っているので **画面でも截図でも気づけない**。
      → functions.php の kumoju_fonts_url() で この棚だけ商品ページの集合に切り替えた。 */

/* ⑧-1 バナーの上の字
   ⚠️ 2026-09-24：**この 2 条は いま 1 つも要素に当たっていない**（実測）——
      この棚は kumoju_shelf_config() で 'hero_copy' => false にしてあり、
      バナーに字を重ねない（＝ .k-hero-copy が出力されない）。壊れているのではない。
      消さないのは «false を外したら すぐ この型で出る» ようにしておくため。 */
html body.tax-product_cat .k-hero-copy .hc-sub{
  font-family:"Kaisei Tokumin",serif!important;
  font-size:11px; font-weight:400; letter-spacing:.2em; color:#9A6B55;
}
html body.tax-product_cat .k-hero-copy .hc-main{
  font-family:"Kaisei Tokumin",serif!important;
  font-size:21px; font-weight:700; letter-spacing:.06em; color:#3F3A32; line-height:1.5;
}

/* ⑧-2 手順の字（Noto Sans JP のままだった） */
html body.tax-product_cat .k-steps .st{
  font-family:"M PLUS Rounded 1c",sans-serif!important;
  font-size:14.5px; font-weight:500; color:#3F3A32;
}

/* ⑧-3 目次カードの中（3 つとも Noto Sans JP のままだった） */
html body.tax-product_cat .k-nav-list .nn{
  font-family:"Kaisei Tokumin",serif!important;
  font-size:15px; font-weight:700; letter-spacing:.04em; color:#3F3A32; line-height:1.5;
}
html body.tax-product_cat .k-nav-list .nt{
  font-family:"M PLUS Rounded 1c",sans-serif!important;
  font-size:11px; font-weight:400; color:#9A6B55;
}
html body.tax-product_cat .k-nav-list .np{
  font-family:"M PLUS Rounded 1c",sans-serif!important;
  font-size:13px; font-weight:400; color:#8C8079;
}

/* ⑧-4 «選ばれる理由» と 組の見出しも 板块大标题と同じ型にそろえる
       （線上は Shippori Mincho 15px の淡い字で、見本と別物だった） */
html body.tax-product_cat .k-reasons h2,
html body.tax-product_cat .k-sec h2{
  position:relative; width:100%; text-align:center;
  font-family:"Kaisei Tokumin",serif!important;
  font-size:21px; font-weight:700; line-height:1.3;
  letter-spacing:.12em; padding-left:.12em; color:#3F3A32;
  margin:0 0 6px; padding-bottom:37px; border:0; background-image:none;
  background:url("assets/sec-orn-walkdog.png?v=fc94e6d7") center bottom/160px auto no-repeat;
}
html body.tax-product_cat .k-reasons h2::before,
html body.tax-product_cat .k-reasons h2::after,
html body.tax-product_cat .k-sec h2::before,
html body.tax-product_cat .k-sec h2::after{ content:none }   /* 既定の «短い罫» を止める */

/* 毛糸玉。⚠️ 3 か所とも «字の幅» に付ける（span.k-tt が inline-block）。 */
html body.tax-product_cat .k-nav-head h2 > span.k-tt,
html body.tax-product_cat .k-reasons h2 > span.k-tt,
html body.tax-product_cat .k-sec h2 > span.k-tt{ display:inline-block; position:relative }
html body.tax-product_cat .k-nav-head h2 > span.k-tt::before,
html body.tax-product_cat .k-nav-head h2 > span.k-tt::after,
html body.tax-product_cat .k-reasons h2 > span.k-tt::before,
html body.tax-product_cat .k-reasons h2 > span.k-tt::after,
html body.tax-product_cat .k-sec h2 > span.k-tt::before,
html body.tax-product_cat .k-sec h2 > span.k-tt::after{
  content:""; position:absolute; top:50%; margin-top:-5px;
  width:28px; height:10px;
  background:url("assets/sec-orn-yarn.png") center/contain no-repeat;
}
html body.tax-product_cat .k-nav-head h2 > span.k-tt::before,
html body.tax-product_cat .k-reasons h2 > span.k-tt::before,
html body.tax-product_cat .k-sec h2 > span.k-tt::before{ left:-38px }
html body.tax-product_cat .k-nav-head h2 > span.k-tt::after,
html body.tax-product_cat .k-reasons h2 > span.k-tt::after,
html body.tax-product_cat .k-sec h2 > span.k-tt::after{ right:-38px; transform:scaleX(-1) }

/* ⑧-5 理由の本文・番号、組の前書き */
html body.tax-product_cat .k-reasons .rt{
  font-family:"M PLUS Rounded 1c",sans-serif!important;
  font-size:13.5px; font-weight:400; color:#4A4038; line-height:1.8;
}
html body.tax-product_cat .k-reasons .rn{
  font-family:"Kaisei Tokumin",serif!important; font-size:11px; font-weight:700; color:#9A6B55;
}
/* ⚠️ 2026-09-29：行送りを 1.55 → **1.8**。
   ① 同じ段の .k-reasons .rt（理由の本文）が すでに 1.8 で、**同じ頁に 2 つの行送りが
      あった**。1.55 のほうは この段を書いたときに 理由を書いていない ＝ 取りこぼし。
   ② 1.55 に戻したい理由も無い —— [10 店の実測](docs/typography-benchmark-2026-08.md)で
      標杆 3 店（北欧暮らしの道具店・土屋鞄・中川政七商店）は **揃って 1.80**、
      同業の帯は 1.44〜1.80 で、1.55 は狭いほう。
   ③ この段の元の値（body.kumoju-shop 側・7938 行）も **1.85** だった。
      19 棚へ広げたときに 1.55 で上書きしてしまっている。
   ⚠️ 字号（13px・1 行 23 字）は動かさない。実測帯 13〜16px の下端だが
      一行の字数は 20〜30 の中に収まっている。 */
html body.tax-product_cat .k-sec p{
  font-family:"M PLUS Rounded 1c",sans-serif!important;
  font-size:13px; font-weight:400; color:#6B5A4E; line-height:1.8; text-align:left;
}

/* ⑧-6 商品カード。⚠️ 根は div.wd-product（li.product ではない。実測）
   ⚠️⚠️ 2026-09-24：**この 3 行は 2 日間 1 度も効いていなかった。**
      ⑨ の body.kumoju-shop .wd-product .wd-entities-title（この頁の 8074 行）が
      font-size:16px!important / line-height:1.45!important / height:47px を持っていて、
      こちらは !important 無しだったので **詳細度に関係なく負ける**。
      実測 16px（見本 tools/shelf-lab/clock-shelf.html の .card .nm は 13px）——
      そのせいで 8 枚中 6 枚の題が 2 行に折れ、うち 2 枚は «き» 1 字だけの行になっていた。
      → font-size / font-weight / line-height に !important を付けた。
      ⚠️ height も一緒に直す：向こうは «16×1.45×2 行 ＝ 47px» で固定して 価格の行を
         横にそろえている。字だけ 13px にすると 47px のままなので 2 行ぶんの空きが残る。
         13×1.6×2 ＝ **41.6px**。**字を触ったら この高さも計算し直すこと。**
   ⚠️⚠️ 2026-09-24 夜：**この height は 末尾の ㉔ で auto に戻した**
      （8 点とも 題は 1 行なので、2 行ぶんの箱は «使っていない 2 行目» ＝
      20.8px の空きになっていた）。ここの 41.6px は もう効いていない。 */
html body.tax-product_cat .wd-product .wd-entities-title,
html body.tax-product_cat .wd-product .wd-entities-title a{
  font-family:"M PLUS Rounded 1c",sans-serif!important;
  color:#3F3A32;
}
/* ⚠️ 大きさを直すのは **手机幅だけ** —— 見本（clock-shelf.html）は 390px で作ってあり、
   PC は カードが 376px 幅なので 13px では小さすぎる。PC は ⑨ の 16px / 47px のまま。 */
@media (max-width:1024px){
  html body.tax-product_cat .wd-product .wd-entities-title,
  html body.tax-product_cat .wd-product .wd-entities-title a{
    font-size:13px!important; font-weight:500!important; line-height:1.6!important;
  }
  html body.tax-product_cat .wd-product .wd-entities-title{ height:41.6px!important }
}
html body.tax-product_cat .wd-product .price,
html body.tax-product_cat .wd-product .price .amount{
  font-family:"M PLUS Rounded 1c",sans-serif!important;
  font-size:13.5px; font-weight:500; color:#8C8079;
}

/* ⑧-7 頭の lead（Zen Maru Gothic 14.5px の薄い字のままだった）と 番号の字距 */
html body.tax-product_cat .k-shop-title > p:last-of-type{
  font-family:"M PLUS Rounded 1c",sans-serif!important;
  font-size:14px; font-weight:400; letter-spacing:normal; color:#6B5A4E;
  line-height:1.55; text-align:left; margin:12px 0 0;
}
html body.tax-product_cat .k-steps .sn{ letter-spacing:normal }

/* ---- ⑨ 商品カードを Woodmart の見た目から外す（2026-09-22）----
   用户「这部分你是不能让他脱离 Woodmart 的样式吗？」
   零件ごとに実測して 6 か所ちがっていた（audit-card.js）：
     外枠 角丸 8px ／ 画像枠 角丸 12px・地 #EAE0CF ／ 英字 DM Mono 13px ／
     値段 18.5px/700 ／ «税込» 14px
   → 商品ページと同じ «直角・生成りの下敷き» にそろえる。
   ⚠️ **お気に入りの心は残す** —— あれは様式ではなく機能。見本に描いていないだけ。
   ⚠️ body.tax-product_cat の中だけ。他の 18 棚と /items/ は Woodmart のままにする。 */
html body.tax-product_cat .wd-product .product-wrapper{ border-radius:0 }
html body.tax-product_cat .wd-product .product-element-top{
  background:#FCF9F4!important; border-radius:0!important; padding:8px;
}
html body.tax-product_cat .wd-product .product-element-top img{ border-radius:0!important; background:#fff }
html body.tax-product_cat .wd-product .product-element-bottom{ padding:10px 0 0 }

/* 英字の小見出し（.k-pen は うちが js で入れているもの） */
html body.tax-product_cat .wd-product .k-pen span{
  font-family:"Kaisei Tokumin",serif!important;
  font-size:9.5px!important; font-weight:400; letter-spacing:.16em; color:#9A6B55;
}
html body.tax-product_cat .wd-product .k-pen i{ width:4px; height:4px }

/* 値段。⚠️ Woodmart 側の指定が強いので 実体（bdi / .amount）まで書く */
html body.tax-product_cat .wd-product span.price,
html body.tax-product_cat .wd-product span.price .amount,
html body.tax-product_cat .wd-product span.price bdi,
html body.tax-product_cat .wd-product span.price .woocommerce-Price-currencySymbol{
  font-family:"M PLUS Rounded 1c",sans-serif!important;
  font-size:13.5px!important; font-weight:500!important; color:#8C8079!important;
}
html body.tax-product_cat .wd-product span.price small{
  font-size:10px!important; font-weight:500!important; color:#A79A90!important;
}

/* ---- ⑩ 390px で見本と並べて撮って残っていた食い違い（2026-09-22）----
   ⚠️ ①は こちらが作った不具合：テーマは .kumoju-shop-head に margin:-15px を
      入れていて（元の容器の溝 15px を打ち消すため）、溝を 11px にした上に
      .k-shop-title の padding を 0 にしたので、見出しと前置きだけ x=-4 に飛び出していた。
      実測：.kumoju-shop-head x=-4 w=398（他の段は x=11 w=368）。 */
html body.tax-product_cat .kumoju-shop-head{ margin-left:0!important; margin-right:0!important }

/* ⑩-2 前置きの 2 段目（写真のすぐ後ろ） */
html body.tax-product_cat .k-shelf-lead2{
  font-family:"M PLUS Rounded 1c",sans-serif!important;
  font-size:14px; font-weight:400; color:#6B5A4E; line-height:1.55; margin:14px 0 0;
}

/* ⑩-3 «選ばれる理由» の英字（板块大标题の型：英字が上・日本語が下） */
html body.tax-product_cat .k-reasons{ display:flex; flex-direction:column; align-items:center }
html body.tax-product_cat .k-reasons-en{
  font-family:"Kaisei Tokumin",serif!important;
  font-size:10.5px; font-weight:500; line-height:1.2;
  letter-spacing:.28em; padding-left:.28em; color:#9A6B55; margin:0;
}
html body.tax-product_cat .k-reasons ol{ width:100% }

/* ---- ⑪ 用户がスクショで指した 2 か所（2026-09-22）----
   実測での食い違い：
     ・理由の li …… 線上 Noto Sans JP 14px・padding 7px・margin-bottom 10px（高さ 38px）
                     見本 M PLUS Rounded 1c 13.5px・margin 8px・padding 0（高さ 24px）
       ⇒ 前回 .rt（中の span）だけ直して **li 自体を直していなかった**。
     ・ITEM の札 …… 線上は ::before に «左右へ伸びる線»（linear-gradient 2 本）と
                     組名の下の border-bottom 2px。見本は 線が 1 本も無く、
                     字は Kaisei Tokumin 10.5px/字距 .28em の «ITEM 01»。 */

/* ⑪-1 理由の行 */
html body.tax-product_cat .k-reasons li{
  font-family:"M PLUS Rounded 1c",sans-serif!important;
  font-size:13.5px; font-weight:400; line-height:1.8; color:#4A4038;
  margin:8px 0; padding:0;
}

/* ⑪-2 ITEM の札。線を 3 本とも止めて 板块大标题の英字と同じ字にする */
html body.tax-product_cat .k-sec::before{
  content:"ITEM " attr(data-n);
  display:block; background:none!important;   /* ← 左右の線（linear-gradient）を消す */
  font-family:"Kaisei Tokumin",serif!important;
  font-size:10.5px!important; font-weight:500!important;
  letter-spacing:.28em; padding-left:.28em; color:#9A6B55!important;
  margin:0 0 1px; text-align:center;
}
html body.tax-product_cat .k-sec h2{ border-bottom:0!important; padding-bottom:37px }

/* ---- ⑫ 上から下まで掃いて出た «古い層» の残り（2026-09-22）----
   道具：sweep.js（.site-content の中で 字を持つ 130 箇所を全部拾い、
   新しい系＝Kaisei Tokumin / M PLUS Rounded 1c 以外を数える）。36 箇所あった。

   ⚠️⚠️ いちばん効いていたのは 手順の締めの一文。
      前に書いた «.k-steps > p» は **引き出しの一行（.k-steps-lead）のほうに当たっていた**
      —— あれも .k-steps の中の p なので、:first で拾われていた。
      締めの文は ずっと Noto Sans JP 14px のままだった。
      «同じ型の要素が 2 つある段では :first / > p で拾わない»。

   ⚠️ 頁の頭の分類チップ（span.cn）は **わざと触っていない**。
      19 棚で共通の案内で、ずっと頁の上にある ——
      この棚だけ字を変えると、別の棚から来た客の目の前で 字が切り替わる。 */

/* ⑫-1 手順の締めの一文（引き出しの一行と区別して指す） */
html body.tax-product_cat .k-steps > p:not(.k-steps-lead){
  font-family:"M PLUS Rounded 1c",sans-serif!important;
  font-size:14px; font-weight:400; color:#6B5A4E; line-height:1.55; margin:10px 0 0;
}

/* ⑫-2 頁の尾の 3 段（こんな棚もあります／場面のカード／ほかの棚をさがす）。
        ⚠️ 見出しは 板块大标题（21px＋猫）には上げない —— あれは «段» の見出しで、
           ここは «次にどこへ行くか» の案内。大きさの差は 段の重さの差なので残す。
           変えるのは **字の種類だけ**。 */
html body.tax-product_cat .k-bandbar,
html body.tax-product_cat .k-relshelf h2,
html body.tax-product_cat .rl-t,
html body.tax-product_cat .sc-t{
  font-family:"Kaisei Tokumin",serif!important;
}
html body.tax-product_cat .rl-e,
html body.tax-product_cat .rl-cap,
html body.tax-product_cat .sc-s,
html body.tax-product_cat .on{
  font-family:"M PLUS Rounded 1c",sans-serif!important;
}

/* ⑫-3 尾の 2 つの見出しが x=-4 で飛び出していた（.kumoju-shop-head と同じ原因＝
        テーマ側の margin:-15px。溝を 11px にした分だけ はみ出す）。 */
html body.tax-product_cat .k-bandbar{ margin-left:0!important; margin-right:0!important }

/* ---- ⑬ 用户がスクショで指した 3 か所（2026-09-22）----
   実測：
     ・パンくず …… 線上 Noto Sans JP 14px #777 ／ 見本 M PLUS Rounded 1c 11px #9B8D83
     ・組と組のあいだ …… 見本には 1px の細い罫がある。線上は 空きだけ
     ・理由の番号 …… 線上 20x20・地 #F3E9DE・角丸 4px（＝丸くない）
                      見本 21x21・地 白・角丸 50%（＝丸） */

/* ⑬-1 パンくず */
html body.tax-product_cat .woocommerce-breadcrumb,
html body.tax-product_cat .woocommerce-breadcrumb a,
html body.tax-product_cat .wd-breadcrumbs,
html body.tax-product_cat .wd-breadcrumbs a{
  font-family:"M PLUS Rounded 1c",sans-serif!important;
  font-size:11px!important; font-weight:400!important; color:#9B8D83!important;
}
html body.tax-product_cat .woocommerce-breadcrumb{ padding:10px 0 0; margin:0 }

/* ⑬-2 組と組のあいだの細い罫。⚠️ 最初の組（#k-sec-0）には引かない。 */
html body.tax-product_cat .products.wd-products .k-sec:not(#k-sec-0){
  border-top:1px solid #EDE5DB; padding-top:26px; margin-top:26px;
}

/* ⑬-3 理由の番号を «白い丸» に（線上は 角丸 4px の生成りの札だった） */
html body.tax-product_cat .k-reasons .rn{
  width:21px!important; height:21px!important;
  border-radius:50%!important; background:#fff!important;
  display:inline-flex!important; align-items:center; justify-content:center;
  font-family:"Kaisei Tokumin",serif!important; font-size:11px; font-weight:700; color:#9A6B55;
  margin:0 9px 0 0; flex:0 0 21px;
}
html body.tax-product_cat .k-reasons li{ display:flex; align-items:flex-start }
html body.tax-product_cat .k-reasons li .rt{ flex:1 1 auto }

/* ⑬-4 パンくず。⚠️ 線上では «出ていない» のが正体だった ——
   .shop-loop-head が display:none（L7398。2026-09-07 に «件数と並び替え» を
   消したときに 箱ごと伏せた）。見本にはパンくずがあるので この棚だけ出す。
   ⚠️⚠️ **件数«全9件を表示» は 伏せたまま**にすること ——
   «件数は出さない» は 2026-09-07 に 用户が決めたこと（参照店に合わせる）で、
   蒸し返さない。箱ごと出すと それも一緒に出てくる。 */
/* ⚠️ テーマのパンくずを出す案は やめた —— 出る位置が 頁の中ほど（実測 y=2173）で、
   見本の «頭» ではなかった。自前のものを バナーの前に出す（inc/kumoju-shelf.php
   の kumoju_shelf_crumb）。.shop-loop-head は 伏せたまま ＝ 件数も出ない。 */
/* ⚠️ 2026-09-23：11px → **12px**（用户の指示）。
   ＝ 商品ページのパンくず（.k-crumbs、L9546）と同じ字の大きさ になった。
   ⚠️ 色は触っていない —— こちらは #9B8D83、商品ページは #7A7266 で いまも違う。 */
/* ⚠️ 2026-09-23：selector を **19 棚ぜんぶ**（body.tax-product_cat）に広げた。
   kumoju_shelf_crumb() の既定を «出す» にしたので、term-clock のままだと
   ほかの 18 棚のパンくずが **テーマの既定の字**（Shippori Mincho）で出てしまう。
   ⚠️ 宣言は 1 文字も変えていないので 時計の棚の見え方は 変わらない。
   ⚠️ 地色は棚によって違う（時計＝白／ほか 18 棚＝#F5F0E6）が、#9B8D83 は
      どちらの地でも読める（対比 3.0 / 2.8）。 */
html body.tax-product_cat .k-crumb{
  font-family:"M PLUS Rounded 1c",sans-serif!important;
  font-size:12px; font-weight:400; color:#9B8D83; line-height:1.8;
  padding:10px 0 2px; margin:0;
}
html body.tax-product_cat .k-crumb a{ color:#9B8D83; text-decoration:none }
html body.tax-product_cat .k-crumb span{ color:#9B8D83 }

/* ---- ⑭ ⑫-2／⑫-3 の書き漏らし（2026-09-22 夜、実測で発見）----
   `.k-relshelf h2` と書いたが **その class はどこにも存在しない** ——
   «ほかの棚をさがす» の見出しの実体は `.k-others h2`。
   実測：Shippori Mincho 14px（＝旧の字のまま）／x=-4 w=398（＝溝からはみ出し）。
   はみ出しの原因は ⑩・⑫-3 と同じ margin:0 -15px で、
   .k-bandbar だけ直して この 1 本を直していなかった。
   ⚠️ 版面そのもの（左寄せの米色の帯・角丸）は **まだ触らない** ——
      頁の尾の 3 段の作り直しは 見本を出して 用户の返事を待っている段階。 */
html body.tax-product_cat .k-others h2{
  font-family:"Kaisei Tokumin",serif!important;
  margin-left:0!important; margin-right:0!important;
}

/* ══════════════════════════════════════════════════════════════════════
   ⑮ 地は **白が主**（用户 2026-09-23「这个页面的背景以白色为主」
      「你就基于线上现在的样式和布局，主背景调整为白色，其他的你换下，不要动样式那些」）
   ----------------------------------------------------------------------
   ⚠️⚠️ **版面も字も段の並びも 一切 触っていない。**変えたのは «色の役割» だけ。
      直前の A 案（同日・米色の地 ＋ 白い箱）から こう入れ替えた：

        頁の地            #F6F1E9  →  **#fff**
        頭のひとかたまり  白い箱   →  **箱をやめる**（白い頁に白い箱は箱にならない）
        商品の格子        白い箱   →  **箱をやめる**
        «商品一覧»«選ばれる理由»   →  **#F6F1E9 のまま**（＝ 唯一 色の付く面になる）
        組と組のあいだ    米色の筋 →  **そのまま**（白地では いちばん効く区切り）
        頁の尾の 3 段     触っていない

   ⚠️⚠️ **これは «元に戻した» のではない。**A 案で入れた 2 つは残してある：
        ① ITEM 01 と ITEM 02 のあいだの **米色の筋**（前は 1px の細い罫だった）
        ② «ほかの棚をさがす» の字と溝の直し（⑭）
      A 案の白い箱だけをやめた形。

   ⚠️ 白地にすると «商品一覧»«選ばれる理由» が **また面として読める**。
      A 案では この 2 つが 頁の地とまったく同じ #F6F1E9 で、
      **面が消えていた**（実測で確認）。用户が «線上のまま» と指定した 2 段なので、
      白へ戻すことが そのまま この 2 つの修復になっている。
      → **`.k-nav-list a` の白と `.k-reasons .rn` の白は 絶対に触らない。**
        あれが無いと 米色の面の中で 目次のカードと理由の番号が沈む。

   ⚠️ 溝は 2026-09-23 深夜に **15px** にした（参照店 4%＝15.6px ／ ほかの 18 棚と同じ）。
   ══════════════════════════════════════════════════════════════════════ */

/* ⑮-1 頁の地を 白に */
html body.tax-product_cat,
html body.tax-product_cat .website-wrapper,
html body.tax-product_cat .main-page-wrapper,
html body.tax-product_cat .site-content{ background:#fff }

/* ⑮-2 頭のひとかたまりの «白い箱» をやめる。
   ⚠️ A 案では この 6 つの兄弟要素に 白を敷き、隙間を消すために
      margin を padding へ移していた。箱をやめる以上 **両方とも戻す** ——
      戻さないと 頭の段だけ 左右が 16px 内側に入り、頁のほかの段と
      左端が揃わなくなる（＝ 段によって字の始まる位置が違う）。 */
html body.tax-product_cat .kumoju-shop-head:not(.kumoju-shop-chips),
html body.tax-product_cat .k-shelf-lead2,
html body.tax-product_cat .k-steps{ background:none; padding-left:0; padding-right:0 }
html body.tax-product_cat .kumoju-shop-head:not(.kumoju-shop-chips){ padding-top:0; padding-bottom:0 }
html body.tax-product_cat .k-shelf-fig{
  background:none; padding-left:0; padding-right:0; padding-top:0; padding-bottom:0;
  margin:16px 0 14px;       /* もとの値（実測） */
}
html body.tax-product_cat .k-shelf-lead2{ margin:14px 0 0 }
html body.tax-product_cat .k-steps{ margin:16px 0 0 }
html body.tax-product_cat .k-shelf-fig--after_steps{ padding-bottom:0 }

/* ⑮-3 商品の格子の «白い箱» もやめる。
   ⚠️⚠️ **組と組のあいだの 米色の筋は 残す** —— 白地では これが
      «ここから別の組» を言う唯一の装置になる（A 案では 1px の細い罫の代わりに
      入れたもの）。箱の padding をやめたぶん、筋の左右の伸ばし量を
      **-16px → -1px** に直す（`.products` の実測 padding は 2px 1px 0）。
   ⚠️ セレクタは `.products.wd-products` まで書く —— 同ファイル L7931 の
      `body.kumoju-shop .products.wd-products` が class 3 つで、こちらが 2 つだと負ける。 */
html body.tax-product_cat .products.wd-products{
  background:none; margin-top:0; padding:2px 1px 0;
}
html body.tax-product_cat .products.wd-products .k-sec:not(#k-sec-0){
  position:relative; border-top:0;
  margin-top:44px; padding-top:0;
}
/* ⚠️ 2026-09-28：**高さ 10px → 4px。色は #F6F1E9 のまま**
      （用户「能不能细一点但是能看出来」→ 一度 #E2D7C2 に替えたら
        「我是让你就用原来那个颜色，没让你换颜色」＝ **色は変えない**）。
      ⚠️ さらに 4px → **3px**（用户「再细一点」・同日）。
      ⚠️ #F6F1E9 は 白地との差が 明度で 9/255 しかない。**3px が下限**と見ている ——
         2px 以下は 画面（DPR 2 の PC）で 1 列おきに薄くなり 途切れて見える。
         これより細くしたいときは 色を濃くするしかない ＝ そのときは また相談する。
      ⚠️ top も 直すこと —— 筋の中心を いちばん最初と同じ高さに保つ：
         最初 top:-27 ＋ 高さ 10 ＝ 中心 -22 ／ 今 top:-23.5 ＋ 高さ 3 ＝ 中心 -22。 */
html body.tax-product_cat .products.wd-products .k-sec:not(#k-sec-0)::after{
  content:""; position:absolute; left:-1px; right:-1px; top:-23.5px;
  height:3px; background:#F6F1E9; pointer-events:none;
}

/* ══════════════════════════════════════════════════════════════════════
   ⑯ 頁の頭の «キャッチ帯 ＋ お知らせ»（用户 2026-09-23、見本の **案2**）
   ----------------------------------------------------------------------
   出どころ：参照店（original-pet）のヘッダー直下と同じ二段。
   見本 https://kumoju.com/_p1a53fdaf7e/topband.php
   markup は inc/kumoju-shelf.php の kumoju_shelf_topband()。

   用户が選んだ 案2 ＝ 帯 **#E2D7C2** ／ お知らせ **#F6F1E9**。
   ⚠️ #E2D7C2 は 頁の尾の帯（.k-bandbar / .k-others h2）と同じ色 ＝ 1 頁で 2 度目。
      それを承知で 用户が選んでいる（ほかの 2 案は 淡すぎた）。
   ⚠️ #F6F1E9 は «商品一覧»«選ばれる理由» と同じ色 —— 色を増やさないため。

   ⚠️⚠️ **帯もお知らせも 通栏**（溝の外まで）。溝の中に置くと
      左右に 11px の白い筋が残る ＝ 用户「文案底色不要有白色」に反する。
      溝は `.site-content` の padding **15px** なので **margin-inline:-15px**。
      （15px の容器のときは -15px。-16px だと 1px はみ出す ―― 2026-09-07 の注記）

   ⚠️ 見出しは **p.tt**（h2 ではない）。この帯は h1 より前に出るので、
      見出しにすると 頁の見出しの並びが «h2 → h1» になる。
   ══════════════════════════════════════════════════════════════════════ */
html body.tax-product_cat .k-topband{ margin-inline:-15px }   /* ⚠️ 上の溝と同じ値。片方だけ変えると 左右に白い筋が残る */

/* ⑯-1 キャッチ帯 */
html body.tax-product_cat .k-catch{
  margin:0; background:#E2D7C2;
  padding:7px 14px; text-align:center; text-wrap:balance;
  font-family:"M PLUS Rounded 1c",sans-serif!important;
  font-size:11.5px; font-weight:400; line-height:1.6; letter-spacing:.02em; color:#6B5A4E;
}

/* ⑯-2 お知らせ */
html body.tax-product_cat .k-topnews{
  background:#F6F1E9; padding:15px 16px 17px;
}
html body.tax-product_cat .k-topnews .tt{
  font-family:"Kaisei Tokumin",serif!important;
  font-size:15.5px; font-weight:700; letter-spacing:.03em; line-height:1.5;
  color:#3F3A32; margin:0 0 7px;
}
html body.tax-product_cat .k-topnews p{
  font-family:"M PLUS Rounded 1c",sans-serif!important;
  font-size:12.5px; font-weight:400; line-height:1.85; color:#6B5A4E; margin:0;
}
html body.tax-product_cat .k-topnews p + p{ margin-top:7px }
/* 日付・期間だけ 濃く（参照店も «9月19日〜9月23日» だけ太い） */
html body.tax-product_cat .k-topnews em{
  font-style:normal; font-family:"Kaisei Tokumin",serif!important;
  font-weight:700; color:#3F3A32; letter-spacing:.02em;
}

/* ⑯-3 帯を ヘッダーに密着させる。
   ⚠️ Woodmart は `.main-page-wrapper` に **margin-top:-40px ＋ padding-top:40px** を
      入れている（実測）。差し引きで 箱の上端は ヘッダーの下（y=61）に来るが、
      **中身は 40px 下がる** ＝ ヘッダーと帯のあいだに 40px の白い空きが残る。
      参照店は ヘッダーの真下から帯が始まるので、padding だけ 0 にする。
   ⚠️ margin-top:-40px は 触らない —— あれを消すと 箱ごと 40px 下がる。
   ⚠️ この棚だけ（body.tax-product_cat）。 */
html body.tax-product_cat .main-page-wrapper{ padding-top:0 }

/* ⑰ バナーに字を重ねない棚（.is-nocopy）—— 2026-09-23
   ⚠️⚠️ **左を溶かすグラデーションを外す。**
      `body.kumoju-shop .k-shelf-hero::after`（L7539）は «左 45% に字を乗せるため» に
      紙色を被せている層。字を出さない棚では 絵の左 4 割を白く濁らせるだけになる。
      新しい絵は «左端から右端まで 1 つの部屋» として焼いてあるので（tools/gen-shelf-banner.js
      の full:true）、被せると せっかくの奥行きが消える。
   ⚠️ 外すのは この棚だけ。ほかの 18 棚は 字を重ねているので そのまま。 */
html body.tax-product_cat .k-shelf-hero.is-nocopy::after{ content:none }

/* ══════════════════════════════════════════════════════════════════════
   ⑱ «選ばれる理由» を **飾り枠** に（用户 2026-09-23「用 reason3 的 4 吧、
      注意内部文案的左右统一」）
   ----------------------------------------------------------------------
   見本 https://kumoju.com/_p1a53fdaf7e/reasons3.php の **4 番** を採用。
     外枠  ＝ assets/reason-frame-curl.png（双線の枠・四隅に巻き草と肉球）
     標題  ＝ assets/reason-title-curl.png（同じ手の飾り枠。字は HTML のまま重ねる）
   どちらも gpt-image-2 で焼いた線画（.cache/opt-0923/gen-outer-frame.js ／
   gen-reason-frame.js）。**字は 1 枚も焼いていない。**

   ⚠️⚠️ **背景画では作れない。border-image（9-slice）でなければならない。**
      この段の «箱の比» は 幅によって別物になる（線上の実測）：
        390px → 368x349（比 1.05） ／ 430px → 408x300（1.36）
        768px → 746x300（2.48）    ／ PC    → 1200x300（4.00）
      比が 3.8 倍ちがうので、1 枚の絵を background-size:100% 100% で敷くと
      PC では 四隅が横に 4 倍近く伸びる。9-slice なら
      «四隅＝そのままの形／各辺のまんなか＝伸びる» になる。
      → 絵の側も それに合わせて «飾りは四隅だけ・辺のまんなかは素線» で焼いてある。
      辺が素線なので repeat ではなく **stretch** で良い（伸ばしても分からない）。

   ⚠️⚠️ **border-image-slice 15.2% は 測って出した値**
      （.cache/opt-0923/export-assets.py が «隅の飾りが終わって素線になるところ» を測る：
        素線の深さ 12px ／ 隅の広がり 129px ／ 元絵の幅 900px）。
      ここを小さくすると 隅の飾りが切れ、大きくすると 辺の線が細くなる。

   ⚠️⚠️ **そろえる相手は «上下の段の 地の左右» であって «文字» ではない**
      （用户 2026-09-23「花边左右对齐上下元素背景左右的位置、是不是把边缘给我变细了」）。
      一度 «本文を x=25 にそろえる» と読んで 通栏（-11px）＋ 帯 25px にしたが、
      **それは 2 つとも外していた** ——
      ① 線上で 地を持つ段は 全部 **x=11 / 右 379 / w=368**（実測：商品一覧の面 #F6F1E9、
         «こんな棚» の帯 #E2D7C2、«ほかの棚» の帯）。通栏にすると この箱だけ
         左右へ 11px はみ出して 揃わない。
      ② 帯 25px は 見本（reasons3 の 4 番）の **48px** より細く、飾りが痩せて見えた。
      → 箱は **margin 0**（＝ x=11 / w=368）、帯は **見本と同じ 48px**。
      ⚠️ この 2 つは両立しない：箱を x=11 に置いたまま 本文を x=25 にそろえるには
         帯が 14px しか取れない。用户は «地をそろえる ＋ 帯は太く» を選んだ。

   ⚠️⚠️ **番号は 白い丸 → 塗りの札に変える。**
      CLAUDE.md には «.k-reasons .rn の白は絶対に米色にしない» とあるが、
      あれは «米色の面の上で 白い丸を立たせる» ための規則。
      この段は 地が **白** になったので、白い丸は逆に消える。地が変わったら
      印も変えるのが その規則の趣旨。
   ⚠️ 絵を焼き直したら **?v= の md5 を必ず変える**（テーマの静的ファイルは 1 年キャッシュ）。
      値は  md5sum child-theme/assets/reason-frame-curl.png | cut -c1-8
   ══════════════════════════════════════════════════════════════════════ */
html body.tax-product_cat .k-reasons{
  margin-left:0!important; margin-right:0!important;   /* ＝ x=11 / w=368。ほかの段の地と同じ */
  background:#fff!important;
  border:48px solid transparent!important;
  border-image:url("assets/reason-frame-curl.png?v=b72a4bff") 15.2% / 48px / 0 stretch!important;
  border-radius:0!important; box-shadow:none!important;
  padding:0!important;   /* 上下は 帯だけ ＝ 上 43.8px / 下 43.8px で左右対称 */
}

/* ⑱-0 中身を 帯の «空いているところ» へ引き出す（用户 2026-09-23「卖点的左右留白减少点」）
   ⚠️ **帯 48px ＝ 余白 48px ではない。**元絵の素線は 切り口 137px のうち 12px しか
      占めていないので、画面では **箱の端から 4.2px** のところに線が引かれ、
      残りの **約 44px は空** になっていた（実測：線と字のあいだ 47.8px）。
   → 帯は 48px のまま（隅の飾りの大きさは これで決まる）、**中身だけ -34px 引き出す**。
     48（帯）− 28 ＝ 箱の端から 20px ＝ 頁の座標で x=31。
     線との隙間は **47.8px → 15.8px**（用户「卖点的左右留白减少点」）。
   ⚠️ 上下は触っていない（帯だけ ＝ 43.8px、上下 対称）。
      **下は これ以上 詰められない** —— 四隅の飾りは 48px の正方形を占めるので、
      最後の行（番号の札が x=31 ＝ 左下の飾りの範囲内）を上げると 飾りに重なる。
   ⚠️ 引き出してよいのは «辺のまんなか» だけ —— 四隅の飾りは 48px の正方形を占める。
      1 行目は標題の下（隅より十分 内側）、最後の行の下には padding 10px を残してある。
   ⚠️ 帯や slice を触ったら この -28px も測り直す（線の位置が動く）。
   ⚠️⚠️ **2026-09-24：ol だけ -32px に上書きした**（この頁の ⑳。見本 reasonswrap.php の C）。
      ここの -28px が いま効いているのは **h2 だけ**。h2 は中央揃えなので 見た目は同じ。
      ⚠️ 本文の左右を測るときは ⑳ の値を見ること（左 15.8 ／ 右 11.8px）。 */
/* ⚠️ «REASONS» は ここに **入れない** —— 中央の字なので引き出す必要が無いうえ、
      align-self:stretch を掛けると 箱が横いっぱいになって 字が **左へ寄る**
      （親の align-items:center が効かなくなる。実測で左寄せになった）。 */
html body.tax-product_cat .k-reasons > ol,
html body.tax-product_cat .k-reasons > h2{
  align-self:stretch; width:auto!important;   /* ⚠️ ⑨ の ol{width:100%} を外さないと
        負の右マージンが効かない（幅が固定されたままなので 右端が内側に残る。
        実測：本文が x25..297 ＝ 左だけ動いて 右が 68px 足りなかった） */
  margin-left:-28px!important; margin-right:-28px!important;
}

/* ⑱-1 標題 —— **枠は付けない**（用户 2026-09-23「标题就不加框了」）。
   ⚠️ 一度 assets/reason-title-curl.png を敷いていたが外した。絵は残してある
      （戻すなら この段を 2026-09-23 の版に戻すだけ）。
   設計の考え：外枠が すでに «飾りの絵» なので、標題まで絵にすると 2 重になる。
     ・字は 頁のほかの板块大标题と **同じ型**（Kaisei Tokumin 700 / 21px / 字間 .12em / #3F3A32）
       ＝ 特別なのは «枠» だけ、という読み方になる
     ・下に **40px の細い罫 1 本**だけ置く。色は枠と同じ手（#D6BEA8）なので
       線の言葉がそろい、絵を 1 枚も足さずに «見出しの終わり» が立つ
   ⚠️ ⑧-4 の «歩く猫の罫（padding-bottom:37px ＋ sec-orn-walkcat.png）» と
      毛糸玉（span.k-tt の ::before/::after）を ここで外している。
      ⚠️ ほかの見出し（.k-sec h2 / .k-nav-head h2）は そのまま —— 触らないこと。 */
html body.tax-product_cat .k-reasons h2{
  width:auto; aspect-ratio:auto;
  margin:2px 0 8px!important; padding:0!important;   /* 18 → 8。1 行目との間 26 → 16px（用户「卖点还要上移一点」） */
  background:none!important;
  display:block!important; text-align:center;
  font-family:"Kaisei Tokumin",serif!important;
  font-size:21px!important; font-weight:700!important;
  letter-spacing:.12em!important; padding-left:.12em;
  color:#3F3A32!important; border:0!important;
}
/* ⚠️⚠️ **文言を長くすると 左右の点缀が枠から出る**（2026-09-23 に実測した数を残す）。
   必要な幅 ＝ «字の幅 ＋ 左右の飾りの位置 ×2»。h2 が使えるのは **264px**（枠の内側）。
   «Kumojuが選ばれる理由» に変えたときは 21px で 字 262 ＋ 飾り 124 ＝ 386px となり、
   飾りの左端が x=12（枠線は x=19.2）まで出た。
   → 17px/.08em ＋ 飾り 42px/±50 なら収まる（字 203px・全体 44..346）。
   **文言か字の大きさを変えたら ここを必ず測り直す。** */
/* 左右の点缀（用户 2026-09-23「标题左右两边点缀下，很空」）。
   ⚠️ 下に引いていた 40px の罫は外した —— 左右に罫が付くので 3 本になって うるさい。
   ⚠️ **絵は焼いていない。**枠と同じ言葉（細い罫＋小さな肉球）を SVG で書いただけ。
      色も枠に合わせてある（罫 #D6BEA8 ／ 肉球 #C49A83）。
   ⚠️ 毛糸玉（⑧-4）は この 2 つの ::before/::after を 上書きして消している。
      ほかの見出しの毛糸玉は そのまま。 */
html body.tax-product_cat .k-reasons h2 > span.k-tt{ display:inline-block; position:relative }
html body.tax-product_cat .k-reasons h2 > span.k-tt::before,
html body.tax-product_cat .k-reasons h2 > span.k-tt::after{
  content:""!important; position:absolute; top:50%; margin-top:-9px;
  width:54px; height:18px;
  background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 54 18%22%3E%3Cpath d=%22M0 9H28%22 stroke=%22%23D6BEA8%22 stroke-width=%221%22/%3E%3Cg fill=%22%23C49A83%22 transform=%22translate(34 4) rotate(-14 5.5 5) scale(0.55)%22%3E%3Cellipse cx=%2210%22 cy=%2213.2%22 rx=%224.6%22 ry=%223.8%22/%3E%3Cellipse cx=%223.8%22 cy=%228.2%22 rx=%221.7%22 ry=%222.2%22/%3E%3Cellipse cx=%227.6%22 cy=%224.6%22 rx=%221.7%22 ry=%222.3%22/%3E%3Cellipse cx=%2212.4%22 cy=%224.6%22 rx=%221.7%22 ry=%222.3%22/%3E%3Cellipse cx=%2216.2%22 cy=%228.2%22 rx=%221.7%22 ry=%222.2%22/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat!important;
}
html body.tax-product_cat .k-reasons h2 > span.k-tt::before{ left:-62px }
html body.tax-product_cat .k-reasons h2 > span.k-tt::after{ right:-62px; transform:scaleX(-1) }

/* ⑱-2 番号の札（地が白になったので 塗りにする。上の注記を読むこと） */
/* 最後の行の下マージンを落として 上下の余白をそろえる（上 43.8 / 下 43.8）。
   ⚠️ **下は これ以上 詰められない** —— 四隅の飾りは 48px の正方形なので、
      最後の行（番号の札が x=31 ＝ 左下の飾りの範囲）を上げると 飾りに重なる。 */
html body.tax-product_cat .k-reasons li:last-child{ margin-bottom:0!important }

html body.tax-product_cat .k-reasons .rn{
  width:21px!important; height:21px!important; border-radius:4px!important;
  background:#A97B5B!important; color:#fff!important;
  flex:0 0 21px; margin:2px 0 0 0;
}

/* ⑱-3 番号と字の間（用户「前面数字为什么和后面卖点第一个字隔那么远」）
   ⚠️ 実測 20px ＝ li の gap 11px ＋ .rn の margin-right 9px の **足し算**だった。
      margin を 0 にして gap だけにする。 */
html body.tax-product_cat .k-reasons li{ gap:10px!important }

/* ⑱-6 → **⑳ で上書きした**（2026-09-24、用户が 見本 reasonswrap.php の «C» を選んだ）。
   もとは «左の隙間だけ 少し広げる»（用户 2026-09-23「左边到边框的间距再加一点点」）で
   左 15.8 → 20.8px にしていた。C は その 5px を 本文の幅へ返す案。⑳ に理由と数がある。 */

/* ══════════════════════════════════════════════════════════════════════
   ⑳ 卖点の 2・4 を 1 行に戻す ―― 見本 reasonswrap.php の **C**（用户 2026-09-24）
   ----------------------------------------------------------------------
   頁の溝を 11 → 15px（ほかの 18 棚とそろえた）にした代償で 字の入る幅が
   323 → 315px に減り、2 と 4 が 2 行になっていた。しかも 2 行目は
   «で» «す» **1 字だけ**（実測：2 は 291px 要るのに 枠の中は 284px ＝ **7px 足りない**）。

   4 案（A 直さない ／ B 字を 12px ／ C 左右の余白から 9px ／ D 2 行を半分ずつ）を
   見本に出して 用户が **C** を選んだ ＝ **字の大きさ（12.5px）も 折り方も変えない。**
   ⚠️ B を採らなかったのは 同業 10 店の本文が 13.5〜14px で、12.5px でも既にその下だから。

   数は 2 つだけ動かす（どちらも **ol だけ**。標題は 中央揃えなので 触らない）：
     ・引き出し  -28px → **-32px**（⑱-0 の値の ol 版）
     ・内側の左   5px  → **4px**（⑱-6 の値）
   ⇒ ol は x31..359、本文は **x66..359 ＝ 幅 293px**（要る 291px より 2px 余る）。
     枠線（x19.2 / x370.8）との隙間は **左 15.8 ／ 右 11.8px**。

   ⚠️⚠️ 左の 15.8px は «2026-09-23 に 用户が «再加一点点» と言って 20.8px へ広げた値» を
      元に戻したもの。**用户が 見本でこの数を見たうえで C を選んでいる**（蒸し返さない）。
   ⚠️ これ以上は詰められない：右をさらに詰めると 枠の縦線に字が当たる。
      **文言を 1 字でも足したら ここが破れる** —— 足すときは 291px の側を測り直すこと。
   ⚠️ 帯（48px）・slice（15.2%）・字の大きさ を触ったら この 2 つの数も測り直す。 */
html body.tax-product_cat .k-reasons > ol{
  margin-left:-32px!important; margin-right:-32px!important;
  padding-left:4px!important;
}

/* ⑱-4 本文を 1 段だけ太く（用户「字体可以加粗一个号，不要太粗」）。
   ⚠️ M PLUS Rounded 1c は **400/500/600/700 が読み込まれている**ので 500 は本物。
      読み込んでいない字重を書くと ブラウザが «偽の太字» を作って にじむ。 */
/* ⚠️ 字号は 13.5px → **12.5px**（用户 2026-09-23「正文减少一个px看看」）。
   同業 10 店の実測（docs/typography-benchmark-2026-08.md §1）は **13.5〜14px** なので
   12.5px は その下。ここは «本文» ではなく «5 行の箇条書き» なので下げても読めるが、
   本文（商品ページの段落 15px）とは別物として扱うこと。 */
html body.tax-product_cat .k-reasons .rt{ font-weight:500!important; font-size:12.5px!important }
html body.tax-product_cat .k-reasons li{ font-size:12.5px!important }

/* ⑱-5 中身を上へ（用户「内部整体可以上提一下，顶部有点空」）
   ⚠️ 上げてよいのは «REASONS と標題が 中央の字» だから —— 四隅の飾りは
      48px の正方形なので、左寄せの行を上げると 左上の飾りに重なる。
      1 行目は 標題の下（上端から 90px 以上）なので 16px なら余裕がある。 */
html body.tax-product_cat .k-reasons > p.k-reasons-en{ margin-top:-16px!important }

/* ⑱-6 REASONS の上に «横向きにお座りした猫と犬»（用户 2026-09-23）
   「reasons 上面再加一个和 reasons 颜色一样的猫狗图案、侧面蹲着的猫狗、用线条」
   → 見本 https://kumoju.com/_p1a53fdaf7e/reasonspets.php の **0（塗りなし）**
   ----------------------------------------------------------------------
   絵 ＝ assets/reason-pets.png（288×192・gpt-image-2。字は焼いていない）。
   色は REASONS と同じ陶土色 #9A6B55 の一色。中は塗らない（用户「就线条吧」）。
   ⚠️ 塗った版（pale clay / ochre / 分け塗り）は .cache/opt-0923/rf2-*.png に残してある。

   ⚠️⚠️ **幅 72px は «REASONS の字の幅» ちょうど**（用户「底部不要超过 reasons 的整体长」）。
      線上の実測：REASONS は 10.5px・字間 2.94px で **72px**。字を触ったら測り直す。

   ⚠️⚠️ **«虚線に見える» は 焼き方ではなく 算数だった。**
      最初の絵は 元絵 1536px で線が 3〜4px ＝ 72px 表示（DPR3 ＝ 216 画素）では
      **0.42〜0.56 画素**。1 画素を割るので アンチエイリアスが点々に変える。
      膨張で太らせると 関節が団子になって «塗った» ように見えたので、
      **«線の太さ ＝ 画の高さの 1/30» と言い渡して焼き直した**（72px 表示で 約 2.1 画素）。
      ⚠️ **小さく使う線画は «元絵の線の太さ × 表示幅 ÷ 元絵の幅 ≧ 2 画素» を
         焼く前に計算する。** 足りなければ «線を太く» と言って焼き直す。

   ⚠️ 要素は足していない —— テンプレートは編集できないので `.k-reasons-en::before` に敷く。
      だから この p の margin-top（⑱-5）が そのまま «絵の上の余白» になる。
   ⚠️ 絵を焼き直したら ?v= の md5 を必ず変える（静的ファイルは 1 年キャッシュ）。 */
html body.tax-product_cat .k-reasons > p.k-reasons-en::before{
  content:""; display:block; width:72px; height:48px; margin:0 auto 3px;
  background:url("assets/reason-pets.png?v=9b6e2f75") center/100% 100% no-repeat;
}

/* ⑱-7 猫と犬の頭の上の余白を詰める（用户「宠物头顶距离边框的距离收一收」）。
   ⑱-5 の -16px を **-30px** に。枠線から 絵の上端まで 27.8 → **13.8px**。
   ⚠️ 詰められるのは 絵が **中央** にあるから —— 四隅の飾りは 48px の正方形で
      x=15..63 と x=327..375 を占めるが、絵は x=159..231 なので当たらない。
   ⚠️ 正文（12345）の組みと間隔は **1 つも触っていない**（用户の指示）。 */
html body.tax-product_cat .k-reasons > p.k-reasons-en{ margin-top:-30px!important }

/* ⑱-8 両脇の «縦線» を伸ばす（用户「增加外面那个花边两侧的垂直线条长度」）。
   ⚠️ 縦線の長さ ＝ **枠の高さ − 四隅の 48×2**。四隅の飾りは大きさを変えない
      （25px にしたとき «变细了» と言われている）ので、**箱を高くする**しかない。
   ⚠️ 上は詰めた（⑱-7）ので 伸ばすぶんは **下に足す**。
      実測 270px → 286px。padding-bottom の 1 か所で調整できる。
   ⚠️ 正文（12345）の組みと間隔は 触っていない —— 増えるのは最後の行の «下» だけ。 */
html body.tax-product_cat .k-reasons{ padding-bottom:16px!important }

/* ══════════════════════════════════════════════════════════════════════
   ⑲ 時計の棚 ―― 頁を上から下まで 1 本の物差しで測り直して出た «残り»（2026-09-24）
   ----------------------------------------------------------------------
   «改版したら 頁を全部 測り直す» の回。⑱ までは «選ばれる理由» の箱だけを見ていたので、
   ほかの段に 前の様式が残っていた。直したのは 3 つとも **実測で出た食い違い**で、
   新しい案ではない（新しい案は 見本に出して 用户の返事を待つ）。
   ⚠️ 頁の尾の 3 段の «段頭の型»（clocknext.php の T2）は **まだ返事待ち** ——
      ここで触ったのは 角の丸みと 1 字だけの行、つまり型ではなく 前の様式の残り。
   ══════════════════════════════════════════════════════════════════════ */

/* ⚠️⚠️ 本文の **行間** は 2026-09-24 に **1.9 → 1.7 → 1.55** に詰めた（用户「行距有点大」→
      見本 clockfigs.php の B で 1.55 を採用。参照店 original-pet は 15 頁とも 1.50）。
   書いてある場所は **6 か所**（ここには書いていない。値は それぞれの規則の中）：
     ③ .k-steps-lead ／ ③ .k-steps > p ／ ⑧-5 .k-sec p ／
     ⑧-7 .k-shop-title > p:last-of-type ／ ⑩-2 .k-shelf-lead2 ／ ⑫-1 .k-steps > p:not(.k-steps-lead)
   ⚠️ **1 か所にまとめない** —— まとめると «字の大きさと行間が 別々の場所に書いてある» ことになり、
      片方を触ったときに もう片方を測り直し忘れる。触るときは この 6 つを まとめて。
   ⚠️ 数の依拠：同業 10 店は **1.44〜1.80**（[docs/typography-benchmark-2026-08.md](docs/typography-benchmark-2026-08.md)）、
      うち 北欧・土屋・中川の 3 店は そろって **1.80**。参照店 original-pet は 15 頁とも **1.50**
      （[docs/original-pet-fpage-template-2026-09-24.md](docs/original-pet-fpage-template-2026-09-24.md)）。
      1.7 は «参照店より ゆるく、標杆より 少し詰めた» ところ。さらに詰めるなら 1.6 が次の段。
   ⚠️ 図注（.k-shelf-fig figcaption）は もとから 1.7。ここで そろった。 */

/* ⑲-1 組の見出しと前書きの 左右を ほかの段とそろえる。
   実測：この頁で 地や字を持つ段は 全部 **x=15..375**（頭の帯・パンくず・バナー・
   見出し・手順・目次・選ばれる理由の枠・こんな棚・ほかの棚）。
   ところが «まるい掛け時計 / しかくい掛け時計» の見出しと前書きだけ **x=18..372** だった。
   足し算の中身は 2 つ：
     ・.products（Woodmart の格子）の padding:2px 1px  → 格子の中身が 1px 内側
     ・.k-sec の padding:0 2px（⑨ の既定）            → さらに 2px 内側
   前書きは **左揃え**（⑧-5）なので、この 3px は そのまま «字の左端が 1 か所だけずれる» に出る。
   → padding を 0 にして、格子の 1px は 負の margin で戻す。
   ⚠️ 商品カード自体（x16..374）は 触っていない —— あれは Woodmart の格子の内側の
      余白で、動かすと 2 列の間合いまで動く。見出しの字と違って 地も無いので目に付かない。
   ⚠️ 組の無い棚では .k-sec が格子の **外** に出る（kumoju_shelf_item_head）。
      だから selector に .products を残す —— 外に出たときは 既定のままで正しい。 */
html body.tax-product_cat .products .k-sec{
  padding-left:0; padding-right:0;
  margin-left:-1px; margin-right:-1px;
}

/* ⑲-2 頁の尾の 2 段の «角の丸み» を落とす。
   この棚は «白地・直角» で作ってある（2026-09-22 の決定）。実測すると 頁じゅうの
   角は 全部 0px なのに、**場面カードの写真が 12px・ほかの棚の写真が 10px** 残っていた
   （＝ 棚ぜんぶで使っている ⑨ の既定のまま）。上半分と並べると そこだけ前の様式に見える。
   ⚠️ 直しているのは «丸み» だけ。段頭の型・地色・大きさは 見本の返事を待つ。
   ⚠️ 幅で分けていない —— この棚は 商品カードの写真を **PC でも** 直角にしている
      （⑦ の .wd-product .product-element-top{border-radius:0!important}。実測 PC も 0px）。
      だから尾の 2 段だけ丸いのは どの幅でも «残り» になる。 */
html body.tax-product_cat .k-scenes .sc-img,
html body.tax-product_cat .k-scenes .sc-img img,
html body.tax-product_cat .k-others .oi{ border-radius:0 }

/* ⑲-3 場面カードの説明が «る» 1 字だけの行になっていた。
   実測：枠 175px に対して «見送ったあとの、置き場所をつくる» は 184px ＝ 9px 足りない。
   字を小さくする・文を削る のどちらもせずに、**2 行を均等に折る**（text-wrap:balance）。
   ⚠️ 1 行に収まっている左のカード（172.5px）は そのまま 1 行 —— balance は
      «要る行数の中で いちばん長い行を短くする» だけで、折る行を増やさない。
   ⚠️ 効かないブラウザでは いままでどおりに折れるだけ（壊れない）。
      同じ手は .hc-main（バナーの字）で既に使っている。 */
html body.tax-product_cat .k-scenes .sc-s{ text-wrap:balance }

/* ⑲-4 目次のカードの下に 10px の «説明のつかない空き» があった。
   ul は 2 列 1 行の grid。1 枚目の li だけ 外から margin-bottom:10px を貰っていて
   （最後の li ではないため）、行の高さが 233.9 → **243.9px** になっていた。
   カード（a）は伸びないので 見えるのは «目次の箱の下だけ 10px 広い» だけ ——
   上 22px / 下 36px の非対称。li の margin を落として 上 22 / 下 26 に戻す。
   ⚠️ カードの高さ・並び・字は 1px も動かない（動くのは ul の高さだけ）。 */
html body.tax-product_cat .k-nav-list li{ margin:0 }

/* ⚠️ «写真は直角» の 2 行（⑥ にあった .products li.product …）は **削除した**。
   Woodmart が出すのは div.wd-product で li.product は 1 つも無く（実測 0 件）、
   何にも当たっていなかった。**付け替えもしていない** —— 同じことを言う規則が
   ⑦ に既にあり（.wd-product .product-element-top / img に border-radius:0!important）、
   そちらが 390 / 768 / PC の 3 幅とも 実際に効いている（実測 0px）。
   ⚠️ 消しただけで 画面は 1px も動かない。２本あると 片方が必ず古くなる。 */

/* ══════════════════════════════════════════════════════════════════════
   ㉑ 手順 ―― 参照店と同じ «素の文字 2 行» にする（2026-09-24）
   用户「像参考站一样，长一点好看点」＋ 参照店のスクリーンショット
   （＝「①ITEMよりご希望のふちどりクッションを選ぶ／②商品ページでデザインのテンプレートを選ぶ」）。
   ----------------------------------------------------------------------
   ⚠️⚠️ **一度 «見出し 15px ＋ 説明 13px ＋ 塗りの番号» に作り直して 戻された**
      （用户「我意思是像他这样，你干嘛呢」）。参照店の手順に **飾りは 1 つも無い** ——
      丸も、札も、線も、下に添える小さい字も無い。**長いのは 文のほうだけ**
      （«どこで 何をするか» まで書いてある）。
      → 飾りは 全部外して 本文と同じ組みにし、長さは 文案で出す。**蒸し返さないこと。**

   実測（参照店 15 頁）：手順の 2 行は 本文と **同じ 14px・行間 1.5**、
   番号は «①②» の丸囲み文字（画像でも札でもない）、
   前の段・後ろの段とは **空 1 行（21px）** で離れているだけ。

   ⚠️ 番号は PHP が «1» «2» と出しているので、ここで «①» «②» に差し替える
      （テンプレートを編集できないので CSS 側でやる。5 つまで面倒を見る）。
   ⚠️ 線は 1 本も引かない（用户 2026-09-22「你这里就不要加线条装饰了」）。 */
html body.tax-product_cat .k-steps li{
  display:block; padding:0; margin:0;
  font-size:14px; font-weight:400; line-height:1.7; color:#6B5A4E;
}
html body.tax-product_cat .k-steps .sn{
  display:inline; width:auto; height:auto; flex:none;
  background:none; border-radius:0; color:#6B5A4E;
  font-family:"M PLUS Rounded 1c",sans-serif; font-size:0; font-weight:400;
  margin:0 1px 0 0;
}
html body.tax-product_cat .k-steps li:nth-child(1) .sn::after{ content:"①"; font-size:14px }
html body.tax-product_cat .k-steps li:nth-child(2) .sn::after{ content:"②"; font-size:14px }
html body.tax-product_cat .k-steps li:nth-child(3) .sn::after{ content:"③"; font-size:14px }
html body.tax-product_cat .k-steps li:nth-child(4) .sn::after{ content:"④"; font-size:14px }
html body.tax-product_cat .k-steps li:nth-child(5) .sn::after{ content:"⑤"; font-size:14px }
html body.tax-product_cat .k-steps .st{
  display:inline; font-size:14px; font-weight:400; line-height:1.7; color:#6B5A4E;
}

/* ⚠️⚠️ 2026-09-24 夜：手順の 2 行に **様式を付けるのは やめた**。
   見本 clocksteps.php で 5 案（色だけ／太さ／ぶら下げ／地の島）を出して
   用户が B（番号を陶土色・字を #3F3A32 の 500）を選んだが、
   線上で見て **「算了，回复成之前的，这样不好看」** と戻した。
   ⚠️ したがって この 2 行は **本文と同じ組み**（14px / 400 / #6B5A4E / 行間 1.7）のまま。
      色も 太さも 変えない。飾り（札・丸・枠・罫・地色）は もっと前に却下されている。
   ⚠️ **この段に様式を足す案は 2 回 却下された。もう出さないこと。** */
/* 前の段・後ろの段とは «空 1 行» ぶんだけ離す（参照店は 21px）。
   ⚠️ selector は «> p» まで書く —— 11307 行の `html body.tax-product_cat .k-steps > p`
      （要素 3・class 2）のほうが `.k-steps-lead`（要素 2・class 2）より強く、
      class 名だけで書くと **margin が 10px 0 0 のまま**になる（実測でそうなっていた）。 */
html body.tax-product_cat .k-steps > p.k-steps-lead{ margin:0 0 21px }
html body.tax-product_cat .k-steps > p:not(.k-steps-lead){ margin-top:21px }

/* ══════════════════════════════════════════════════════════════════════
   ㉒ 写真の下を «図注» から «本文» に（2026-09-24。見本 clockfigs.php の **B**）
   用户「图片不要带出下面的图片本身的文字／你在图片下面多加点文字描述／
        线上第二张图下面没什么文案／文案行距、间隔样式也不好看」
   ----------------------------------------------------------------------
   参照店 15 頁に **図注は 1 つも無い**（実測）。写真の下は かならず 左揃えの本文。
   → PHP 側（inc/kumoju-shelf.php）で caption を外し、
     1 枚目の下＝ lead2、2 枚目の下＝ scenes_inline の 'text' を出すようにした。
     図注の 2 本の文は **消していない** —— どちらも その本文の頭に入っている。

   ここで直すのは «間合い» だけ。参照店の実測に合わせて 2 段階にする：
     ・写真と その説明   …… **16px**（近づける ＝ どの写真の説明か 目で分かる）
     ・段と 段           …… **22px**（空 1 行ぶん。参照店は 21px）
   ⚠️ いままでは 8〜16px で ほぼ同じだったので、«図の説明» と «次の段» の区別が無かった。
   ⚠️ 行間 1.55 は この段の **6 か所**に書いてある（⑲ の前の注記を見ること）。
   ⚠️ selector は «> p» まで書く（⑲ で 1 度 負けている）。 */
html body.tax-product_cat .k-shelf-fig{ margin:22px 0 0 }        /* 前の段から 22px。下の余白は持たない */
html body.tax-product_cat .k-shelf-lead2{ margin-top:16px }      /* 写真の «説明» なので 近づける */
html body.tax-product_cat .k-steps{ margin-top:22px }
/* ⚠️ 2026-09-24：手順の «引き出しの一行 → ①②» は **22px では空きすぎ**
   （用户「这个地方的行距收起来，你这里太多断行了」）。
   参照店の 21px は «段落が終わって 次の話に移る» ところの空き。
   うちの «していただくのは、二つだけです。» は **そのまま ①② を読ませる一行**なので、
   ここは «段の中» ＝ 8px。下（締めの一文へ）は 段が変わるので 18px 残す。
   ⚠️ ①② の 2 行のあいだは 行間（1.55 ＝ 21.7px）だけ。margin は 0 のまま。 */
html body.tax-product_cat .k-steps > p.k-steps-lead{ margin:0 0 8px }
html body.tax-product_cat .k-steps > p:not(.k-steps-lead){ margin-top:18px }
html body.tax-product_cat .k-shop-title > p:last-of-type{ margin-top:22px }
/* ⚠️ 図注の規則（⑩ 系）は残してある —— ほかの 18 棚は caption を使っているため。
      時計の棚では PHP が figcaption を出さないので、当たる要素が無いだけ。 */

/* ══════════════════════════════════════════════════════════════════════
   ㉓ 大見出しの上の 1 行を 英字 → 日本語に（2026-09-24。見本 clocktitle の **B**）
   用户「他们的标题好像都有『ペットの写真で作る』单独占一行？」
   ----------------------------------------------------------------------
   参照店は 15 頁のうち **14 頁**が «ペットの写真で作る»＋改行＋品名 の 2 行
   （HTML も `<h1 style="font-size:18px">ペットの写真で作る<br>うちの子オリジナル◯◯</h1>`）。
   うちの その位置は 英字 «CLOCK» ＝ 飾りで、«この頁が何をするか» を言っていなかった。
   → PHP 側（inc/kumoju-shop.php）で 'h1_lead' があれば 英字の代わりに 日本語を出す。
   ⚠️ 英字は 消えていない —— 目次の見出し（.k-nav-en）に 同じ 'en' が出ている。
   ⚠️ 大きさは 見出し（21px）より はっきり小さく（13px）—— 参照店は 2 行とも 18px だが、
      うちの見出しは 21px で 字間も広いので、同じ大きさで 2 行にすると 頭が重くなる。
      «C 案（2 行とも同じ大きさ）» は 見本に残してある。
   ⚠️ いま 'h1_lead' があるのは 時計の棚だけ。ほかの 18 棚は 英字のまま。 */
/* ⚠️⚠️ 2026-09-24：**B → C に変えた**（用户「标题用C」）。
   B は «英字の位置に 小さな日本語 13px»。C は 参照店と同じ **同じ大きさの 2 行**で、
   1 行目は h1 の中（PHP が <span class="h1-lead">＋<br> で出す）。
   ⚠️ 2 行になるぶん 見出しの箱は 1 行ぶん高くなる（27 → 57px）。C を選んだ以上 これは折り込み。
   ⚠️ 大きさは 21 → **19px**（参照店は 18px）。21px のまま 2 行にすると
      1 行目が 折り返して 3 行になる（390px で «お写真で作る» 以外は入らない）。
   ⚠️ 1 行目だけ ほんの少し淡い墨にしてある —— 同じ大きさでも «前置き» と読めるように。
      色を変えずに 大きさで差を付けるのが B、大きさを揃えて 濃さで差を付けるのが C。 */
html body.tax-product_cat .k-shop-title h1{ font-size:19px!important; line-height:1.55!important; letter-spacing:.1em!important }
html body.tax-product_cat .k-shop-title h1 .h1-lead{ color:#6B5A4E }
/* B のときの 1 行（.k-ten-ja）は もう出ないが、規則は残してある ——
   ほかの棚で «英字の代わりに小さな日本語» をやりたくなったら これで戻せる。 */
html body.tax-product_cat .k-shop-title .k-ten-ja{
  font-family:"Kaisei Tokumin",serif!important;
  font-size:13px; font-weight:400; line-height:1.6;
  letter-spacing:.16em; padding-left:.16em;
  color:#9A6B55; margin:0 0 5px;
}

/* ══════════════════════════════════════════════════════════════════════
   ㉔ 商品カードの «題 → 値段» の空き（2026-09-24。用户「标题与价格的行高间距
      与上面那个英文的不统一，收一下行高，统一下」）
   ----------------------------------------------------------------------
   実測（390px・改める前）：

     英字 → 題    10px      ← .product-element-bottom の gap
     題   → 値段  16px      ← gap 10 ＋ 値段の margin-top 6（⑨ の 8098 行）
     題の箱       41.6px    ← «13 × 1.6 × 2 行» で固定（⑧-6）。**中身は 1 行**

   ⇒ 赤枠の空きの正体は «2 行ぶんで固定した箱の、使っていない 2 行目»
      ＝ 20.8px。8 点とも 題は 1 行（自然高 20.8px を実測）なので、
      いまは 8 枚とも その空行を抱えている。PC も同じ（48px の箱に 24px の字）。

   直し方は 3 つ：
     ① 箱の高さを auto に      ← 空行が消える
     ② 値段の margin-top 6 を消す ← 上下とも gap だけ＝ 10px（PC 12px）で揃う
     ③ gap を 0 にして、代わりに 題と値段に同じ margin-top を書く
        ⚠️ ③ が要る理由：2 枚目のカードだけ 題と値段のあいだに
           **高さ 0 の .wd-star-rating** が 1 つ挟まっている（評価 8 件・
           星は描かれていないが flex の 1 コマは占める）。gap のままだと
           その 1 枚だけ 10px 下がり、**同じ段の値段の行が横で揃わない**
           （実測 priceTop 2642.3 / 2652.3）。margin なら 高さ 0 の要素は
           間合いを作らないので 8 枚とも揃う。

   実測（後）：英字→題 ＝ 題→値段 ＝ **10px**（PC 12px）、
              カードの高さ 278/288 → **251.2px で 8 枚とも同じ**、
              同じ段の値段の行は 横でぴったり揃う（8 枚とも priceTop 一致）。

   ⚠️⚠️ **箱の固定をやめたので、題が 2 行になる商品を足すと その段の値段が
        10px 下がる。** いまの 8 点は 13px で 13 字まで 1 行（実測 169px ＜ 172px）。
        2 行の題を出す必要が出たら ここを height:41.6px に戻すこと
        （PC は 48px）。⑧-6 の «字を触ったら高さも計算し直す» は生きている。
   ⚠️ 星は消していない —— 高さ 0 のまま 流れの中に残っている。
      評価を本当に出すことにしたら、その時点で この 3 行を見直す。 */
html body.tax-product_cat .wd-product .product-element-bottom{ gap:0!important }
html body.tax-product_cat .wd-product .wd-entities-title{
  height:auto!important; margin:12px 0 0!important;
}
html body.tax-product_cat .wd-product span.price{ margin-top:12px!important }
@media (max-width:1024px){
  html body.tax-product_cat .wd-product .wd-entities-title{ margin-top:10px!important }
  html body.tax-product_cat .wd-product span.price{ margin-top:10px!important }
}

/* ══════════════════════════════════════════════════════════════════════
   ㉕ 目次カードと 商品カードの字を 中央揃えに（2026-09-24。用户
      「这两个地方的标题那里，整体都水平居中」）
   ----------------------------------------------------------------------
   実測（改める前）：この頁で字を持つ «カード» は 3 種類あり、**1 つだけ
   すでに中央**だった。

     ほかの棚をさがす（.k-others .on）   center   ← もともと中央
     目次カード（.k-nav-list .nn/.nt/.np） start   ← 左
     商品カード（.k-pen/題/値段）         start   ← 左

   ⇒ 左の 2 つを中央に寄せて 3 種類とも同じにする。
   ⚠️ 参照店（original-pet）の商品セルの実測も **中央**
      （CLAUDE.md «商品セル 176px・无边框无底色・**居中**・価格 13px»）。

   ⚠️ .k-pen は flex（丸い点 ＋ 英字）なので text-align では動かない ——
      justify-content:center も要る。
   ⚠️ 絵（.ni / 画像）は もともと中央にある（a の padding 12px が左右同じ）ので
      触らない。動かすのは 字だけ。
   ⚠️⚠️ **2026-09-24 夜：用户が «纠结» したので いったん 左に戻した。**
      規則は 消していない —— 下の 4 行の中身を戻せば 中央に戻る。
      判断の材料（この日 実測したもの）：
        ・参照店 original-pet の商品セル（.category の品名と値段）は **center**
          （`c-fpage?fp=shapecushion` を 390px で実測。品名 p 幅 98 が x=30、
           値段 span 幅 64 が x=47 ＝ どちらも格の中で中央）
        ・この頁の «こんな棚もあります»（.k-others .on）は もともと **center**
        ・いまの 8 点は 題が **1 行**（中央でも 右端が揃わない問題は出ない）
        ・ただし 題が 2 行になる商品を足すと、中央では 2 行目が短く
          右端が ばらつく ＝ そのときは 左のほうが 落ち着く */
/* ⚠️ 2026-09-24 夜・決着（用户「商品一览的位置居中，下面的不动」）：
      **目次カードだけ 中央・商品カードは 左のまま。**
      «商品一覧» の帯の下の 2 枚（まるい／しかくい）が 目次カード。
      ここだけ中央にする理由は 絵の中軸 —— 絵は 137px、外の a は 161px
      （左右 12px の padding）で **絵に はっきりした中軸がある**ので、
      字を左に寄せると «絵の左下にぶら下がって» 見える。
      商品カードの絵は 枠いっぱい（中軸が立たない）ので 左のままでも崩れない。 */
html body.tax-product_cat .k-nav-list .nn,
html body.tax-product_cat .k-nav-list .nt,
html body.tax-product_cat .k-nav-list .np{ text-align:center }
/* ⚠️ 2026-10-03 改：商品カードも 中央へ（用户「红色框的位置能模版水平居中吗，
      到时候所有分类商品这里都是居中的」）。英字・題・価格の 3 つ、19 棚ぜんぶ。
      上の «商品カードは左» は この日で終わり。参照店のセルも中央（CLAUDE.md の実測表）。
      主図の右下の «6color» と玉（服の棚）は 絵の上なので この影響を受けない。 */
html body.tax-product_cat .wd-product .wd-entities-title,
html body.tax-product_cat .wd-product .wd-entities-title a,
html body.tax-product_cat .wd-product span.price{ text-align:center!important }
html body.tax-product_cat .wd-product .k-pen{ justify-content:center }

/* ══════════════════════════════════════════════════════════════════════
   ㉖ «選ばれる理由» の飾り枠 → «ITEM 01» の間合い（2026-09-28。用户
      「这个位置的高度稍微增加一点，现在太紧了」）
   ----------------------------------------------------------------------
   実測（改める前）：

     .k-shelf-nav ─ 26px ─ .k-reasons（飾り枠）─ **8px** ─ #k-sec-0（ITEM 01）

   ＝ 枠の **上は 26px・下は 8px** で 上下が揃っていなかった（下の 8px の内訳は
     .products の padding-top 2px ＋ .k-sec:first-child の margin-top 6px）。
   ⇒ 下も **26px** にして 枠の上下を同じにする（margin-top 6 → 24 ＋ padding 2）。
   ⚠️ 2 組目以降は 58px（筋つき）のまま —— あちらは «別の組が始まる» 区切りで、
      ここは «飾り枠の外側の余白» なので 揃える相手が違う。
   ⚠️ セレクタは id まで書く —— 7900 行の
      `body.kumoju-shop .products .k-sec:first-child{margin-top:6px}` に勝つため。 */
html body.tax-product_cat .products.wd-products .k-sec#k-sec-0{ margin-top:24px }

/* ══════════════════════════════════════════════════════════════════════
   ㉗ 頁の尾の 2 つの見出しの帯を **左右いっぱいに**（2026-09-28。用户
      「这两个标题位置的背景颜色，左右直接拉通，但是字体的位置不动」）
   ----------------------------------------------------------------------
   «こんな棚もあります» ＝ `.k-bandbar` ／ «ほかの棚をさがす» ＝ `.k-others h2`。
   実測（改める前）：

     390px   箱 x=15..375（溝の中）  字 x=30
     PC      箱 x=124..1316          字 x=148

   もともと 7714/7828 行は `margin:30px -15px 16px` ＝ **通栏だった**が、
   2026-09-22 の ⑫-3／⑭ で «溝を 11px にしたぶん はみ出す» として
   `margin-left/right:0` に潰してある。いま溝は **15px**（`.site-content` の
   padding を実測）なので **-15px でちょうど端に届く**（-16px だと 1px はみ出す）。

   ⇒ margin で 15px 外に出したぶん、padding で 15px 足し返す。
      **字の x は 1px も動かない**（390px：0+30＝30 ／ PC：109+39＝148）。
   ⚠️ PC の padding が違う（8159 行で 11px 24px）ので、断点も同じ
      `min-width:1025px` でもう一度書く。ここを忘れると PC だけ字が 15px 左へ動く。
   ⚠️ 帯の «中» の格子や カードは 触らない —— 動くのは この 2 本の帯だけ。

   ⚠️⚠️ **2026-09-28：用户が «算了，还是恢复成之前的吧，这样不好看» ＝ 取り消した。**
      通栏の帯は 溝の中に収まっている帯より «重い»。頁の尾の 3 段は «次にどこへ行くか»
      の案内なので、そこだけ全幅の帯が 2 本 並ぶと 段の重さが逆転する。
      ＝ 帯は ⑫-3／⑭ のまま（margin-left/right:0・溝の中の x=15..375）。
      もう一度やるなら 下の 2 つの塊を戻すだけでよい（字の x は 30 / 148 のまま動かない）：
        html body.tax-product_cat .k-bandbar,
        html body.tax-product_cat .k-others h2{
          margin-left:-15px!important; margin-right:-15px!important;
          padding-left:30px!important; padding-right:30px!important;
        }
        @media (min-width:1025px){ …同じ 2 本に padding-left/right:39px!important }
      ⚠️ PC の padding だけ別（8159 行が 11px 24px）なので 2 度書きが要る。 */


/* ======================================================================
   服の棚の «サイズ表»（2026-09-29・A 案）
   ----------------------------------------------------------------------
   用户 2026-09-28「这类产品是不是应该专门做个尺码表呢」
   → 見本 https://kumoju.com/_p1a53fdaf7e/size.php の 3 案から **A**（表を横に）。

   構造は js/kumoju-product.js の buildSizeTable()、
   数字は inc/kumoju-size.php の kumoju_size_bodies()（＝正本）。

   ⚠️ 参照店 original-pet は 測り方の図解と表を **画廊の 9・10 枚目の画像として
      焼いて** いる（2026-09-28 実測）。こちらは焼かない —— 図解は SVG、表は HTML。
      ① 数字を直しても焼き直さなくてよい ② 字が選択でき SEO に入る
      ③ 手机で拡大してもぼけない。

   ⚠️ 本文（この品について）の中に入るので、地色も字も **段の中身** として振る舞う。
      枠も影も付けない —— 段はすでに .k-pcard の中にいる（2 重の箱にしない）。
   ⚠️ 5 段（S〜XXL）＋ 行名の 6 列。390px では 1 列 48px しか無いので
      **字は 14px・padding は 4px** が下限。これ以上 列を増やすなら横スクロールが要る。
   ====================================================================== */

.k-size{ margin:14px 0 2px; }

/* 測り方の図（SVG）。線は本文の罫と同じ淡さ、矢印と字だけ陶土色 */
.k-size-fig{ margin:0 0 14px; }
.k-size-fig svg{ display:block; width:100%; height:auto; max-width:320px; margin:0 auto; }
.k-size-fig .gl{ fill:none; stroke:#C8BCA9; stroke-width:2.2;
                 stroke-linejoin:round; stroke-linecap:round; }
.k-size-fig .ar{ fill:none; stroke:#9A6B55; stroke-width:1.6; }
.k-size-fig .tx{ font-family:inherit; font-size:13px; font-weight:500; fill:#9A6B55; }

/* 表。行名は左寄せの淡い墨、数字は等幅の数字で縦に揃える */
.k-size-tbl{
  border-collapse:collapse; width:100%;
  font-variant-numeric:tabular-nums;
}
.k-size-tbl th,
.k-size-tbl td{
  padding:9px 4px; text-align:center; font-size:14px; line-height:1.5;
  border-bottom:1px solid #E3DACD;
}
.k-size-tbl thead th{ background:#F1EADF; font-weight:700; }
.k-size-tbl tbody th{
  text-align:left; padding-left:8px; font-weight:500;
  color:#8A7A6B; font-size:13px; white-space:nowrap;
}
.k-size-tbl tbody tr:last-child th,
.k-size-tbl tbody tr:last-child td{ border-bottom:0; }

/* 測り方の文＋誤差の断り */
.k-size-note{
  margin:13px 0 0 !important; padding-top:12px;
  border-top:1px dotted #D8CCBA;
  font-size:12px !important; line-height:1.85 !important; color:#8A7A6B !important;
}
.k-size-note b{ color:#9A6B55; font-weight:500; }

/* PC は表がのびすぎるので中央に寄せる（本文の段と同じ最大幅に合わせる） */
@media (min-width:1025px){
  .k-size{ max-width:560px; }
}


/* ⚠️ 2026-09-29：色の軸は «○» を出さず 色块だけにした（用户「统一成色块」）。
   .k-swatch-grid--radio は 3 列（auto auto 1fr）で、1 列目が ○・2 列目が印。
   ○ を出さないタイルでは 1 列目が空のまま column-gap 5px だけ残るので、
   印を 1 列目へ寄せる。DOM に :has() を使わず class で決めているので確実。 */
.single-product .k-swatch-grid--radio .k-swatch.k-sw-nodot .k-sw-c{
  grid-column:1; margin-right:0;
}

/* ============================================================
   服の棚のカード 色の玉（2026-10-03）
   ------------------------------------------------------------
   主図の右下に «6color» ＋ 6 つの玉。地は敷かない（用户「不加白色背景」）。
   参照：用户が見せた同業のカード。見本 weardots.php の B 案の数値そのまま
   （画像 156px に 字 10.5px・玉 11px・間 2px、画像の右下から 4px／3px）。
   描くのは js/kumoju-product.js の buildShelfColors()。
   ============================================================ */
body.tax-product_cat .product-grid-item .product-element-top,
body.tax-product_cat .product-grid-item .product-image-link{ position:relative; }
/* ⚠️ 置き場は 画像のリンクの中（buildShelfColors）。数値は «画像の右下から» */
body.tax-product_cat .product-grid-item .k-clr{
  position:absolute; right:4px; bottom:4px; z-index:3;
  display:flex; flex-direction:column; align-items:flex-end; gap:3px;
  pointer-events:none;
}
body.tax-product_cat .product-grid-item .k-clr em{
  font:normal 400 10.5px/1 "M PLUS Rounded 1c",sans-serif;
  color:#5E5650; letter-spacing:.3px;
}
body.tax-product_cat .product-grid-item .k-clr-dots{ display:flex; gap:2px; }
body.tax-product_cat .product-grid-item .k-clr-dots i{
  display:block; width:11px; height:11px; border-radius:50%;
  background:linear-gradient(160deg,var(--a),var(--b));
  box-shadow:inset 0 0 0 1px rgba(60,50,40,.18);
}

/* 組の見出しの下の 小さな 1 行（服の棚の «（ユニセックス S/M/L/XL/XXL）»、2026-10-03）。
   参照店 original-pet の ITEM 見出し «(ユニセックス M/L/XL)» の置き方。
   描くのは js/kumoju-shop.js の header()、文言は inc/kumoju-shelf.php の 'sub'。 */
body.tax-product_cat .k-sec h2 .k-sec-sub{
  display:block; margin-top:6px;
  font:500 12.5px/1.4 "M PLUS Rounded 1c",sans-serif;
  color:#3F3A32; letter-spacing:.02em;   /* 見出しと同じ墨（用户 2026-10-03） */
}

/* =====================================================================
   棚の目次カード：最後の段が 3 枚に満たないときは «真ん中に寄せる»（2026-10-05）
   用户（クッションの棚のスクショ・«抱き枕 まくら» の 2 枚）「这两个水平居中」。
   grid では 余った段を中央に寄せられない → 3 列の棚だけ flex の折り返しに替える。幅は grid と同じ «(100% − 溝 2 本) ÷ 3»。
   ⚠️ 2 列（data-n 2・4）はそのまま grid。⚠️ 同じ段のカードは flex の stretch で高さがそろうので、値段の行は今までどおり横で揃う。
   ===================================================================== */
body.kumoju-shop .k-nav-list:not([data-n="2"]):not([data-n="4"]){
  display:flex; flex-wrap:wrap; justify-content:center;
}
body.kumoju-shop .k-nav-list:not([data-n="2"]):not([data-n="4"]) > li{
  flex:0 0 calc((100% - 20px) / 3); max-width:calc((100% - 20px) / 3);
}

/* ============================================================
   スマホケースの «ご使用の機種»（inc/kumoju-phone-model.php、2026-10-12）
   骨組みは «お名前» 欄と同じなので 見出し・入力枠はそのまま当たる。ここは注意書きと機種一覧だけ。
   ============================================================ */
body.single-product .k-phone-model .k-phone-note{margin:10px 0 0;font-size:13px;line-height:1.7;color:#7A6E62}
body.single-product .k-phone-model .k-phone-models{margin:8px 0 0;font-size:13px;color:#5C5248}
body.single-product .k-phone-model .k-phone-models > summary{cursor:pointer;list-style:none;color:#9A6B55;text-decoration:underline;text-underline-offset:3px}
body.single-product .k-phone-model .k-phone-models > summary::-webkit-details-marker{display:none}
body.single-product .k-phone-model .k-phone-models ul{margin:8px 0 0;padding:0;list-style:none}
body.single-product .k-phone-model .k-phone-models li{padding:4px 0;border-bottom:1px dotted #E4D9CB;line-height:1.6}
body.single-product .k-phone-model .k-phone-models p{margin:8px 0 0;line-height:1.7;color:#7A6E62}

/* ショルダーストラップ（任意・+¥500、2026-10-13）。見出しは «お名前» と同じ骨組みで当たる。
   選択肢は のし（ギフトカード内）の胶囊と同じ言い方：白地・細い線・角丸いっぱい／選ぶと陶土色の線と字 */
body.single-product .k-phone-strap .k-strap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:2px 0 0}
body.single-product .k-phone-strap .k-strap-opt{position:relative;display:flex;align-items:center;justify-content:center;gap:6px;margin:0;
  padding:10px 6px;border:1px solid #E6D6C4;border-radius:999px;background:#fff;cursor:pointer;font-size:14px;line-height:1.3;color:#5C5248;text-align:center}
body.single-product .k-phone-strap .k-strap-opt input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
body.single-product .k-phone-strap .k-strap-opt i{flex:none;width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
body.single-product .k-phone-strap .k-strap-opt:has(input:checked){border-color:#9A6B55;background:#FBF2E9;color:#9A6B55;font-weight:500;box-shadow:0 0 0 3px rgba(154,107,85,.12)}
body.single-product .k-phone-strap .k-phone-note{margin:10px 0 0;font-size:13px;line-height:1.7;color:#7A6E62}

/* 選択肢が 1 つだけの変体の段（js hideSingleChoice・2026-10-13 クリアケース）。
   段の display はテーマ側が !important で決めているので、印の class で打ち返す */
html body.single-product table.variations tr.k-single-choice,
html body.single-product table.variations.k-all-single{display:none!important}

/* 組の見出しの下の 色見本（js/kumoju-shop.js header()・2026-10-13 スマホケース。用户が見本 4 案から D）。
   h2 の中 ＝ 犬の線（h2 の padding-bottom の背景）の上。字の幅を超えたら js が縮める */
body.tax-product_cat .k-sec h2 .k-sec-colors{display:flex;align-items:center;justify-content:center;gap:8px;margin:8px auto 2px;
  width:max-content;transform-origin:center top;font-size:0;line-height:1;letter-spacing:0}
body.tax-product_cat .k-sec h2 .k-sec-dots{display:flex}
body.tax-product_cat .k-sec h2 .k-sec-dots i{display:block;width:14px;height:14px;border-radius:50%;border:1.5px solid #fff;margin-left:-5px;box-sizing:content-box}
body.tax-product_cat .k-sec h2 .k-sec-dots i:first-child{margin-left:0}
body.tax-product_cat .k-sec h2 .k-sec-colors em{font-style:normal;font-family:'M PLUS Rounded 1c','Zen Maru Gothic',sans-serif;font-weight:400;
  font-size:12px;letter-spacing:.05em;color:#8A7A6C;white-space:nowrap}

/* ── 関税の一文（服の棚の商品ページ・最終確認画面）2026-10-14 ──
   inc/kumoju-legal.php の kumoju_legal_duty_line()／kumoju_legal_duty_on_checkout()。
   送料カードの下に小さく。目立たせすぎず、読めば分かる濃さ。 */
.k-duty-note {
	margin: 10px 0 0;
	padding: 10px 12px;
	background: #F6F1E9;
	border-left: 3px solid #C79B87;
	font-size: 12.5px;
	line-height: 1.75;
	color: #5a4a40;
}
.woocommerce-checkout .k-duty-note { margin: 0 0 14px; }