/* =========================================================================
   Design Refresh — リデザインA「クリーン・トラスト」
   方針: ブランドグリーン(#67d059)は主要CTA/アクセントに限定し、
        面はニュートラルへ。視覚階層と余白を強化して情報を読みやすく。
   実装: 既存CSSを壊さないよう最後に読み込む上書き専用シート。
   ========================================================================= */
:root {
  --brand-green: #67d059;
  --brand-green-dark: #4fb93f;
  --ink: #2b2f36;
  --muted: #6b7280;
  --line: #e6e8eb;
  --surface: #f6f8f9;
}

/* ---- D-1: FAQの「緑の壁」を解消（.question 32個を白基調＋緑アクセントへ）---- */
.question {
  background: #ffffff !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  border-left: 4px solid var(--brand-green) !important;
  border-radius: 8px !important;
  padding: 14px 44px 14px 16px !important;
  margin: 0 0 8px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  position: relative;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.question:hover {
  border-left-color: var(--brand-green-dark) !important;
  box-shadow: 0 3px 10px rgba(20, 40, 20, .06) !important;
}
/* 開閉アイコン（+）を緑の丸で右側に付与し、クリック可能性を明示 */
.question::after {
  content: "+";
  position: absolute;
  top: 50%; right: 14px;
  transform: translateY(-50%);
  width: 22px; height: 22px;
  line-height: 22px; text-align: center;
  color: #fff; background: var(--brand-green);
  border-radius: 50%; font-weight: 700; font-size: 15px;
}

/* ---- D-5: セクション見出しの階層強化 ---- */
.ec-shopRanking__title,
.ec-newItem__title,
.ec-hotProducts__title,
.ec-pickupProducts__title,
.section__title {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  letter-spacing: .02em !important;
  padding: 0 0 10px 0 !important;
  margin: 0 0 22px 0 !important;
  border-bottom: 2px solid var(--brand-green) !important;
}
@media (max-width: 767px) {
  .ec-shopRanking__title,
  .ec-newItem__title,
  .ec-hotProducts__title,
  .ec-pickupProducts__title,
  .section__title { font-size: 19px !important; margin-bottom: 16px !important; }
}

/* ---- D-7: セクション間の余白を拡大（詰まりを解消）---- */
.ec-shopRanking,
.ec-newItem,
.ec-hotProducts,
.ec-pickupProducts { margin: 40px 0 !important; }

/* ---- D-1補: 「SHOPPING FLOW / SHOPPING GUIDE」見出しの緑ベタも面積を抑制 ---- */
.ec-shoppingFlow__title,
.ec-shoppingGuide__title {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border-left: 4px solid var(--brand-green) !important;
}

/* ---- 商品カードのクリック可能性/一貫性（軽微な磨き）---- */
.ec-shopRankingItem, .ec-newItemRole__list .ec-newItemRole__listItem {
  transition: transform .12s ease, box-shadow .12s ease;
}

/* ---- D-2: FAQ折りたたみ（上位8問＋「すべて見る」）---- */
.faq-hidden { display: none !important; }
.faq-showall {
  display: block;
  margin: 16px auto 0;
  padding: 12px 28px;
  background: #fff;
  color: var(--brand-green-dark);
  border: 1.5px solid var(--brand-green);
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.faq-showall:hover { background: var(--brand-green); color: #fff; }

/* ---- D-3: サイドカテゴリの可読性向上（構造は変えず余白/区切り/hoverのみ）---- */
.ec-categoryNaviRole .ec-itemNav__nav li a {
  display: block;
  padding: 9px 10px !important;
  border-bottom: 1px solid #f0f1f2;
  line-height: 1.4;
  transition: background .12s ease, color .12s ease;
}
.ec-categoryNaviRole .ec-itemNav__nav li a:hover {
  background: var(--surface);
  color: var(--brand-green-dark) !important;
}
/* 親カテゴリを少し強調してスキャンしやすく */
.ec-categoryNaviRole .ec-itemNav__nav > li > a { font-weight: 600; }
.ec-categoryNaviRole .ec-itemNav__nav ul a { padding-left: 22px !important; color: var(--muted) !important; }

/* ---- D-4: バナー枠の規格統一（画像は歪めず、余白/角丸/影で揃える）---- */
.ec-sideBanner__item,
.ec-bannerItem { margin-bottom: 12px !important; }
.ec-sideBanner__item img,
.ec-bannerItem img {
  border-radius: 8px;
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 0 1px 4px rgba(20,40,20,.08);
}

/* =========================================================================
   Design Refresh 2 — 商品カード / 価格 / タグ / スペック表（コンバージョン導線）
   ========================================================================= */

/* ---- D-8: 商品一覧カードを「カード」らしく（ホバーで浮く）---- */
.ec-shelfGrid__item {
  box-sizing: border-box;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 10px 14px;
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.ec-shelfGrid__item:hover {
  box-shadow: 0 8px 20px rgba(20,40,20,.10);
  border-color: #d5d9dd;
  transform: translateY(-2px);
}
.ec-shelfGrid__item-image img,
.ec-shopRankingItem__image img,
.ec-newItemRole__listItemHeading img { border-radius: 8px; }

/* ---- D-9: 価格の視認性を上げる（太字・やや大きく）---- */
.ec-shelfGrid__item-price,
.price02-default,
.ec-productRole__price .price02-default { font-weight: 700 !important; font-size: 17px !important; }

/* ---- D-10: 商品タグを統一したpillに ---- */
.ec-shelfRole__tag,
.ec-productRole__tags .tag,
.ec-productRole__tags a {
  display: inline-block;
  background: var(--surface) !important;
  color: var(--muted) !important;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 11px !important;
  font-size: 12px !important;
  line-height: 1.7;
  margin: 2px 4px 2px 0;
  text-decoration: none;
}

/* ---- D-11: 商品詳細スペック表の緑ヘッダ(.ttitle)を淡色+緑アクセントに ---- */
.ttitle {
  background: #f1f9ef !important;
  color: var(--ink) !important;
  border-left: 4px solid var(--brand-green) !important;
  font-weight: 700 !important;
}

/* ---- D-12: ランキング/新着カードのホバー微調整 ---- */
.ec-shopRankingItem, .ec-newItemRole__listItem {
  transition: transform .12s ease;
}
.ec-shopRankingItem:hover, .ec-newItemRole__listItem:hover { transform: translateY(-2px); }

/* ---- D-13: 左サイドバーの空きスペース調整 ----
   各ブロックが float:right で幅185px→カラム(313px)左に空白が出ていたのを、
   カラム幅いっぱいに広げて解消（バナー削除で露呈した余白を詰める）。 */
.ec-layoutRole__left > div,
.ec-layoutRole__left > ul {
  float: none !important;
  width: 100% !important;
  box-sizing: border-box;
}

/* =========================================================================
   Detail Polish — 「細部にこだわって」対応（骨格は変えず整列/余白/一貫性を磨く）
   対象: 商品カード / バナー整列 / 下部SNS
   ========================================================================= */

/* ---- P-A: 商品カード（ホーム各セクション）の整列・可読性 ---------------- */
/* 商品名: 青の下線リンク → 落ち着いた濃色・2行で高さ固定（素のリンク感を排除） */
.front_page .product-item .ec-shelfGrid__item-name {
  color: var(--ink) !important;
  text-decoration: none !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
  margin: 9px 2px 7px !important;
  height: 2.9em;                 /* 2行で固定 */
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.front_page .product-item a:hover .ec-shelfGrid__item-name { color: var(--brand-green-dark) !important; }

/* タグ: 上位2行で高さ固定 → 全カードで価格・星の高さが揃い、雑然さを解消 */
.front_page .product-item .ec-shelfRole__tags {
  height: 56px;
  overflow: hidden;
  margin: 0 0 4px !important;
  padding: 0 !important;
}

/* 価格・レビューの余白を整える */
.front_page .product-item .ec-shelfGrid__item-price.price02-default {
  margin: 0 2px 6px !important;
}
.front_page .product-item .product-review { margin: 0 2px 2px; }

/* 画像枠を硬い#c0c0c0の1pxから柔らかいラインへ */
.front_page .product-item img,
.front_page .product-item .slick-slide img {
  border: 1px solid var(--line) !important;
  border-radius: 8px;
}

/* ---- P-B: バナーの整列・余白（KV下4バナーの間隔を一定に、下に余白） ------ */
.ec-sliderRole .ec-bannerRole_col_2 {
  gap: 12px;
}
.ec-sliderRole .ec-bannerRole_col_2 .ec-bannerItem { margin-bottom: 0 !important; }
.ec-sliderRole { margin-bottom: 28px !important; }

/* ---- P-C: 下部SNSを同一規格の丸アイコンボタンに統一 ---------------------- */
.sns-buttons {
  display: flex !important;
  justify-content: center;
  gap: 20px;
  list-style: none;
  padding: 8px 0 6px !important;
  margin: 16px 0 !important;
}
.sns-buttons__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: auto !important;
  margin: 0 !important;
}
.sns-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  color: #fff;
  font-size: 22px;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(0,0,0,.14);
  transition: transform .12s ease, box-shadow .12s ease;
}
.sns-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0,0,0,.20); }
.sns-btn--mail  { background: var(--brand-green); }
.sns-btn--insta { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.sns-btn--x     { background: #000; }
.sns-btn svg { display: block; }
.sns-btn__label { font-size: 11px; color: var(--muted); line-height: 1; }

/* ---- P-D: SHOPPING FLOW の体裁を整える ----------------------------------
   ピンク見出し(#ff7782)・赤の乱用(#e31919)・巨大文字(1.5em)で雑然としていたのを、
   落ち着いた濃色見出し＋緑のSTEP＋正の強調は緑・注意書きのみ抑えた赤、に統一。 */
.ec-shoppingFlowItem__title {
  color: var(--ink) !important;              /* ピンク → 濃色で端正に */
}
.ec-shoppingFlowItem__title span {
  color: var(--brand-green-dark) !important; /* STEP0X をブランド緑に */
}
/* 正の強調(365日24時間 / 当店より配信)は「赤の警告色」ではなくブランド緑・サイズも抑制 */
.ec-shoppingFlowItem__description .big02 {
  font-size: 1.2em !important;
}
/* 注意書きの赤は毒々しい#e31919から落ち着いた赤へ */
.ec-shoppingFlowItem__description .red {
  color: #c0392b !important;
}
/* big02は.redと併用されるため、より高い詳細度で緑を確実に適用（正の強調と警告を色で分離） */
.ec-shoppingFlowItem__description .big02.red {
  color: #2e7d32 !important;
}

/* =========================================================================
   P-F: 商品一覧カード ワールドクラス版 (#page_product_list 限定 / CSS-ONLY)
   Base: 「Trust-forward Pharmacy」の骨格(枠線カード+価格フッター+緑ジェネリック
   チップ+モバイルファースト)。Graft: S1 の欠品画像インラインSVGプレースホルダ、
   S3 の :has() による 0レビュー行の優雅な非表示。既存 design-refresh.css の
   P-E(308-341) を置換し、D-8/D-9/D-10 の一覧分を上書きする想定で末尾に追記する。
   グローバルトークン(--ink/--muted/--line/--surface/--brand-green*)を再利用。
   ========================================================================= */

/* ---- ページ限定トークン(ホーム/詳細へ漏らさない) ---- */
#page_product_list {
  --pl-green-ink:  #3f9e33;   /* 可読な緑(文字/枠) */
  --pl-green-tint: #eef8ec;   /* 緑チップ背景 */
  --pl-green-line: #cfe9c8;   /* 緑ヘアライン(hover/アクセント) */
  --pl-sub:        #5b626b;   /* 副次テキスト(タグ) */
  --pl-star:       #f4ac00;   /* 実評価の星(サイト踏襲アンバー) */
  --pl-star-empty: #e6e9ed;   /* 空星(静かに後退→0件でも寂しくない) */
  --pl-price:      #17191c;   /* 価格ヒーロー(loud赤を廃し濃色で主役化。円/〜は控えめに) */
  --pl-line-soft:  #eef1f4;   /* フッター内側の細線 */
}

/* ---- グリッド: モバイル2-up / デスクトップ3-up。gap駆動・単一の間隔源 ---- */
#page_product_list .ec-shelfGrid {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;            /* 行内カードを等高に */
  gap: 12px;                       /* モバイル(row/col) */
  margin: 0;
  padding: 0;
}
#page_product_list .ec-shelfGrid__item {
  box-sizing: border-box;
  margin: 0 !important;            /* 既存 margin-right/bottom + nth-child(4n) を無効化 */
  width: calc((100% - 12px) / 2);  /* モバイル2-up(旧: 窮屈な3-up) */
  display: flex;
  flex-direction: column;          /* 内部縦フレックス→価格/星が下端に */
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 10px 12px;
  box-shadow: 0 1px 2px rgba(24, 39, 24, .04);
  overflow: hidden;                /* 画像ズームをカード角でクリップ */
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
#page_product_list .ec-shelfGrid__item:hover {
  border-color: var(--pl-green-line);
  box-shadow: 0 10px 24px rgba(35, 90, 30, .10);
  transform: translateY(-3px);
}

/* ---- 内部フレックス連鎖: リンク〜右カラムを伸長し、価格を下端にピン ---- */
#page_product_list .ec-shelfGrid__item > a {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  text-decoration: none;
  color: inherit;
}
#page_product_list .ec-shelfGrid__item > a:focus-visible {
  outline: 2px solid var(--pl-green-ink);
  outline-offset: 2px;
  border-radius: 10px;
}
#page_product_list .product-item,
#page_product_list .product-item-right {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;                    /* クランプ文字の横あふれ防止 */
}
#page_product_list .product-item-left { min-width: 0; }

/* ---- 画像: 清潔なニュートラルタイル + CONTAIN(箱を絶対に切らない) ----
   欠落/broken時はインラインSVGの控えめなグリフに劣化(S1由来)。 */
#page_product_list .ec-shelfGrid__item-image {
  position: relative;
  display: block;
  width: 100%;
  height: 0;
  padding-top: 100%;               /* 正方形タイル */
  margin: 0 0 12px;
  background-color: var(--surface);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2244%22%20height=%2244%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23c7ccd1%22%20stroke-width=%221.4%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Crect%20x=%223%22%20y=%223%22%20width=%2218%22%20height=%2218%22%20rx=%222.5%22/%3E%3Ccircle%20cx=%228.5%22%20cy=%228.5%22%20r=%221.6%22/%3E%3Cpath%20d=%22M21%2015l-5-5L6%2021%22/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 44px;           /* 画像がある時は完全に隠れる */
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
#page_product_list .ec-shelfGrid__item-image img {
  position: absolute;
  inset: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  padding: 6px;                   /* 箱の周囲は最小限の余白のみ(無駄な内側余白を削減し商品を大きく) */
  box-sizing: border-box;
  object-fit: contain !important;  /* cover→contain: 商品箱を切らない */
  object-position: center;
  transform: none;                 /* 既存 translate(-50%,-50%) を打消し */
  border: 0 !important;            /* 硬い #c0c0c0 枠を除去 */
  border-radius: 0;
  background: transparent;
  color: var(--muted);             /* broken時の alt を静かなキャプション化 */
  font-size: 11px;
  line-height: 1.35;
  text-align: center;
  transition: transform .3s ease;
}
#page_product_list .ec-shelfGrid__item:hover .ec-shelfGrid__item-image img {
  transform: scale(1.03);          /* クリップ内の控えめなズーム */
}

/* ---- 商品名: 濃色/下線なし/2行クランプ(1行名でも高さ確保で整列) ---- */
#page_product_list .product-item .ec-shelfGrid__item-name {
  color: var(--ink);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .01em;
  margin: 0 0 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.5em * 2);
}
#page_product_list .ec-shelfGrid__item > a:hover .ec-shelfGrid__item-name {
  color: var(--pl-green-ink);
}

/* 任意のロング説明はカードを詰めて可読性優先で非表示(S3由来) */
#page_product_list .ec-shelfGrid__item-description { display: none; }

/* ---- タグ: 清潔なpill。先頭タグ(ほぼ「ジェネリック」)を緑アクセント化 ----
   実データ由来でバッジ捏造なし。0〜9個の乱れは最大2行で吸収(全タグは詳細に)。 */
#page_product_list .product-item .ec-shelfRole__tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0 0 10px;
  padding: 0;
  max-height: 52px;                /* 約2行。P-E の 58px を上書き */
  overflow: hidden;
}
#page_product_list .ec-shelfRole__tag {
  display: inline-block;
  max-width: 100%;
  margin: 0 !important;
  padding: 2px 9px !important;
  background: var(--surface) !important;
  color: var(--pl-sub) !important;
  border: 1px solid var(--line) !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  line-height: 1.6 !important;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
}
#page_product_list .ec-shelfRole__tags .ec-shelfRole__tag:first-child {
  background: var(--pl-green-tint) !important;
  color: var(--pl-green-ink) !important;
  border-color: var(--pl-green-line) !important;
  font-weight: 700;
}

/* ---- フッター(下端ピン): ヘアライン + 価格ヒーロー(D-9の!importantを上回る) ---- */
#page_product_list .product-item-right .ec-shelfGrid__item-price.price02-default {
  margin: auto 0 0 !important;     /* margin-top:auto → 行内で価格ラインを揃える */
  padding: 10px 0 0 !important;
  border-top: 1px solid var(--pl-line-soft);
  color: var(--pl-price) !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: -.01em;
}
#page_product_list .ec-shelfGrid__item-price.price02-default .title {
  color: var(--pl-price);
  font-size: inherit;
  font-weight: inherit;
}
#page_product_list .ec-shelfGrid__item-price.price02-default .title small {
  font-size: .62em;                /* 「円」を控え数字を主役に */
  font-weight: 700;
  margin: 0 1px;
  color: var(--muted);            /* 「円」を控えめに→数字を主役 */
}

/* ---- レビュー: 小さく静かに。空星は淡色で0件でも寂しくない ----
   さらに :has() 対応ブラウザでは実レビュー0(=.fas無し)の行を隠す(S3由来)。
   非対応ブラウザは淡い空星+"(0)" にフォールバック(壊れない)。 */
#page_product_list .product-item-right .product-review {
  margin: 7px 0 0;
  min-height: 16px;                /* 隠しても高さ保持→価格整列を維持 */
  font-size: 11px;
  line-height: 1;
  letter-spacing: .3px;
  color: var(--muted);
}
#page_product_list .product-review i { font-size: 12px; }
#page_product_list .product-review i.fas.fa-star,
#page_product_list .product-review i.fas.fa-star-half-alt {
  color: var(--pl-star);
}
#page_product_list .product-review i.far.fa-star {
  color: var(--pl-star-empty);
}
#page_product_list .product-review:not(:has(.fas)) { visibility: hidden; }

/* ---- 品切れボタン(<a>外の兄弟・在庫0時のみ): 静かで無効なチップ ---- */
#page_product_list .ec-productRole__btn { margin: 10px 0 0; }
#page_product_list .ec-productRole__btn .ec-blockBtn--action,
#page_product_list .ec-productRole__btn .ec-blockBtn--action[disabled],
#page_product_list .ec-productRole__btn .ec-blockBtn--action:disabled {
  display: block;
  width: 100%;
  justify-content: center;
  background: #f2f4f6 !important;
  color: var(--muted) !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  font-size: 11px !important;
  font-weight: 600;
  padding: 8px 6px !important;
  cursor: not-allowed;
}

/* ---- デスクトップ(>=768px): 3-up + 余裕ある余白 + 価格ヒーロー拡大 ---- */
@media (min-width: 768px) {
  #page_product_list .ec-shelfGrid { gap: 18px; }
  #page_product_list .ec-shelfGrid__item {
    width: calc((100% - 36px) / 3);   /* 657pxカラム → 約207px幅 */
    padding: 14px 14px 16px;
    border-radius: 16px;
  }
  #page_product_list .product-item .ec-shelfGrid__item-name { font-size: 14px; }
  #page_product_list .ec-shelfGrid__item-image { margin-bottom: 14px; }
  #page_product_list .product-item-right .ec-shelfGrid__item-price.price02-default {
    font-size: 20px !important;
  }
}

/* ---- reduced-motion 尊重 ---- */
@media (prefers-reduced-motion: reduce) {
  #page_product_list .ec-shelfGrid__item,
  #page_product_list .ec-shelfGrid__item-image img { transition: none; }
  #page_product_list .ec-shelfGrid__item:hover { transform: none; }
  #page_product_list .ec-shelfGrid__item:hover .ec-shelfGrid__item-image img { transform: none; }
}


/* ---- P-G: トップ用KV販促スライドショーを下層ページでは非表示 ------------------
   contentBottom領域に配置されたKVカルーセル(1,000円クーポン等)は、
   トップページのヒーロー用販促。商品一覧/詳細等の"購入導線"では散漫・重複・
   下部情報の押し下げになりノイズ。ホーム(front_page)以外では隠し、
   トップ限定のヒーローに戻す(MainTopのKVは無傷)。 */
body:not(.front_page) .ec-layoutRole__contentBottom .top__kv { display: none !important; }

/* =========================================================================
   P-H: 他ページ横断ポリッシュ（詳細/カート/決済/ログイン登録/マイページ・問合せ）
   監査ワークフロー統合。全selectorは #page_* 限定でホーム/一覧に非波及。
   ========================================================================= */
/* =========================================================================
   design-refresh.css APPEND — cross-page polish (product-detail, cart,
   shopping, login/entry, mypage/contact). Every selector page-scoped.
   Reuses tokens: --brand-green #67d059 / --brand-green-dark #4fb93f /
   --ink #2b2f36 / --muted #6b7280 / --line #e6e8eb / --surface #f6f8f9.
   Near-black price = #17191c.
   ========================================================================= */

/* ---------- Shared CTA recipe: loud-red/dark squares -> brand green ------ */
#page_cart .ec-blockBtn--action,
#page_shopping .ec-totalBox__btn .ec-blockBtn--action,
#page_entry .ec-registerRole__actions .ec-blockBtn--action,
#page_mypage_login .ec-login__actions .ec-blockBtn--cancel,
#page_contact .ec-blockBtn--action,
#page_product_detail .order_tbl .btn {
  background-color: var(--brand-green) !important;
  border: 1px solid var(--brand-green-dark) !important;
  color: #fff !important;
  border-radius: 10px !important;
  text-shadow: none !important;
  box-shadow: 0 2px 8px rgba(79,185,63,.25);
  transition: background-color .15s ease, box-shadow .15s ease, transform .12s ease;
}
#page_cart .ec-blockBtn--action:hover, #page_cart .ec-blockBtn--action:focus,
#page_shopping .ec-totalBox__btn .ec-blockBtn--action:hover, #page_shopping .ec-totalBox__btn .ec-blockBtn--action:focus,
#page_entry .ec-registerRole__actions .ec-blockBtn--action:hover, #page_entry .ec-registerRole__actions .ec-blockBtn--action:focus,
#page_mypage_login .ec-login__actions .ec-blockBtn--cancel:hover, #page_mypage_login .ec-login__actions .ec-blockBtn--cancel:focus,
#page_contact .ec-blockBtn--action:hover, #page_contact .ec-blockBtn--action:focus,
#page_product_detail .order_tbl .btn:hover {
  background-color: var(--brand-green-dark) !important;
  border-color: var(--brand-green-dark) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(79,185,63,.30);
}

/* ---------- Shared secondary: dark #333 squares -> white outline -------- */
#page_cart .ec-blockBtn--cancel,
#page_shopping .ec-totalBox__btn .ec-blockBtn--cancel,
#page_entry .ec-registerRole__actions .ec-blockBtn--cancel {
  background-color: #fff !important;
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
#page_cart .ec-blockBtn--cancel:hover, #page_cart .ec-blockBtn--cancel:focus,
#page_shopping .ec-totalBox__btn .ec-blockBtn--cancel:hover, #page_shopping .ec-totalBox__btn .ec-blockBtn--cancel:focus,
#page_entry .ec-registerRole__actions .ec-blockBtn--cancel:hover {
  background-color: var(--surface) !important;
  border-color: #d5d9dd !important;
  color: var(--ink) !important;
}

/* ---------- Prices: loud red -> near-black ------------------------------ */
#page_product_detail .order_tbl .sale,
#page_product_detail .order_tbl .sale strong,
#page_product_detail .sp-only strong { color: #17191c !important; }
#page_cart .ec-cartRole__totalAmount { color: #17191c !important; }
#page_shopping .ec-totalBox .ec-totalBox__price { color: #17191c !important; }
#page_shopping .ec-totalBox .ec-totalBox__taxLabel { color: var(--muted) !important; }
#page_shopping .ec-totalBox .ec-totalBox__total,
#page_shopping .ec-totalBox .ec-totalBox__total .ec-totalBox__price,
#page_shopping .ec-totalBox .ec-totalBox__total .ec-totalBox__taxLabel { color: var(--ink) !important; }

/* ======================= PRODUCT DETAIL ================================= */
/* Spec-section headings: green wall -> ink + green left-accent; keep icons visible */
#page_product_detail section.no_padding > h2 {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  border-left: 4px solid var(--brand-green) !important;
  border-radius: 8px !important;
  padding: 12px 44px 12px 14px !important;
  font-size: 18px !important;
}
#page_product_detail section.no_padding > h2 .icon:before,
#page_product_detail section.no_padding > h2 .icon:after { background: var(--ink) !important; }

/* Tags: candy chips -> neutral pills (targets the bare <li>) */
#page_product_detail .ec-productRole__tags { border-bottom: 0 !important; }
#page_product_detail .ec-productRole__tags .ec-productRole__tag {
  background: var(--surface) !important;
  color: var(--muted) !important;
  border: 1px solid var(--line) !important;
  border-radius: 999px !important;
  padding: 2px 11px !important;
  font-size: 12px !important;
  line-height: 1.7 !important;
  margin: 2px 6px 2px 0 !important;
}

/* Order table header: green fill + hard borders -> pale green + --line */
#page_product_detail .order_tbl th {
  background: #f1f9ef !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}
#page_product_detail .order_tbl th,
#page_product_detail .order_tbl td { border-color: var(--line) !important; }

/* Spec panels & review comments: cream -> white card / surface */
#page_product_detail .item_text {
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 0 8px 8px;
  padding: 14px !important;
}
#page_product_detail .good-comment,
#page_product_detail .bad-comment { background: var(--surface) !important; }

/* Review good/bad boxes: orange/purple -> green/gray */
#page_product_detail .left--box,
#page_product_detail .right--box { border-color: var(--line) !important; }
#page_product_detail .good-title { background: var(--brand-green) !important; }
#page_product_detail .bad-title  { background: #9aa1a9 !important; }

/* Residual: red average score + gradient review buttons */
#page_product_detail .strong-red { color: var(--ink) !important; }
#page_product_detail #item_review .review--btn {
  background: var(--brand-green) !important;
  border: 1px solid var(--brand-green-dark) !important;
  color: #fff !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* Supervision card -> shared card language */
#page_product_detail .supervision-section {
  border: 1px solid var(--line) !important;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(20,40,20,.06);
  padding: 16px;
}
#page_product_detail .supervision-details h3 { color: var(--ink); }
#page_product_detail .supervision-details p { color: var(--muted); }

/* ======================= CART ========================================== */
/* Empty-cart: garish pink error box -> neutral surface (scoped to empty cell) */
#page_cart .ec-off3Grid .ec-alert-warning {
  background: var(--surface) !important;
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand-green);
  border-radius: 10px;
  padding: 22px 16px !important;
  text-align: center;
}
#page_cart .ec-off3Grid .ec-alert-warning .ec-alert-warning__icon { display: none; }
#page_cart .ec-off3Grid .ec-alert-warning .ec-alert-warning__text { color: var(--ink); font-weight: 500; }

/* Real cart error alerts: calmer red (keeps white icon/text) */
#page_cart .ec-cartRole__error .ec-alert-warning { background: #e05c53 !important; border-radius: 10px; }

/* Free-shipping incentive: salmon -> green */
#page_cart .ec-cartRole__progress .ec-color-red { color: var(--brand-green-dark) !important; }

/* Dotted #ccc dividers -> solid --line */
#page_cart .ec-cartRole__totalText,
#page_cart .ec-cartRow__delColumn,
#page_cart .ec-cartRow__contentColumn,
#page_cart .ec-cartRow__amountColumn,
#page_cart .ec-cartRow__subtotalColumn { border-color: var(--line) !important; border-style: solid !important; }

/* Quantity steppers: heavy gray -> hairline + green hover */
#page_cart .ec-cartRow__amountUpButton,
#page_cart .ec-cartRow__amountDownButton,
#page_cart .ec-cartRow__amountDownButtonDisabled {
  border: 1px solid var(--line) !important;
  background: #fff !important;
  transition: border-color .12s ease, background .12s ease;
}
#page_cart .ec-cartRow__amountUpButton:hover,
#page_cart .ec-cartRow__amountDownButton:hover { border-color: var(--brand-green) !important; background: var(--surface) !important; }
#page_cart .ec-cartRow__amountDownButtonDisabled { opacity: .45; }

/* Cart table header: beige -> cool surface */
#page_cart .ec-cartHeader__label { background: var(--surface) !important; color: var(--ink) !important; border-bottom: 1px solid var(--line); }

/* ======================= SHOPPING / CHECKOUT =========================== */
/* Section headings: gray fill -> ink + green left-accent */
#page_shopping .ec-rectHeading h1,
#page_shopping .ec-rectHeading h2,
#page_shopping .ec-rectHeading h3 {
  background: #fff !important;
  color: var(--ink) !important;
  border-left: 4px solid var(--brand-green);
  border-bottom: 1px solid var(--line);
  border-radius: 4px 4px 0 0;
  padding: 10px 14px !important;
  font-size: 18px !important;
  letter-spacing: .01em;
}
/* Order summary -> white card */
#page_shopping .ec-orderRole__summary .ec-totalBox {
  background: #fff !important;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(20,40,20,.06);
  padding: 18px 18px 20px;
}
/* Progress stepper: teal -> brand green */
#page_shopping .ec-progress .is-complete .ec-progress__number { background: var(--brand-green) !important; }
#page_shopping .ec-progress .is-complete .ec-progress__label { color: var(--brand-green-dark) !important; }
/* Dotted dividers -> solid */
#page_shopping .ec-totalBox .ec-totalBox__total,
#page_shopping .ec-orderRole .ec-borderedList,
#page_shopping .ec-selects { border-color: var(--line) !important; border-style: solid !important; }
/* Payment logos: clamp height */
#page_shopping .ec-orderPayment .ec-radio img { max-height: 40px; width: auto; vertical-align: middle; margin: 2px 0 6px; }

/* ======================= LOGIN / ENTRY ================================= */
/* Login card: constrain + center (overrides inline width:100%) */
#page_mypage_login .ec-off2Grid__cell { max-width: 480px !important; margin: 0 auto !important; float: none !important; }
#page_mypage_login .ec-login {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 28px 24px;
  box-shadow: 0 1px 2px rgba(24,39,24,.04);
}
/* Login inputs */
#page_mypage_login .ec-login__input .ec-input input {
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  color: var(--ink) !important;
  height: 44px;
}
#page_mypage_login .ec-login__input .ec-input input:focus {
  border-color: var(--brand-green) !important;
  box-shadow: 0 0 0 3px rgba(103,208,89,.18) !important;
  outline: 0;
}
/* Login helper links: blue -> green */
#page_mypage_login .ec-login__link a.ec-link { color: var(--muted) !important; }
#page_mypage_login .ec-login__link a.ec-link:hover { color: var(--brand-green-dark) !important; text-decoration: underline; }

/* Entry form: dotted dividers + hard inputs + blue focus -> system */
#page_entry .ec-borderedDefs dl { border-bottom: 1px solid var(--line) !important; padding: 14px 0 16px !important; }
#page_entry .ec-input input,
#page_entry .ec-halfInput input,
#page_entry .ec-zipInput input,
#page_entry .ec-telInput input,
#page_entry .ec-select select,
#page_entry .ec-birth select {
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  color: var(--ink) !important;
  background-color: #fff !important;
}
#page_entry .ec-input input:focus,
#page_entry .ec-halfInput input:focus,
#page_entry .ec-zipInput input:focus,
#page_entry .ec-telInput input:focus,
#page_entry .ec-select select:focus,
#page_entry .ec-birth select:focus {
  border-color: var(--brand-green) !important;
  box-shadow: 0 0 0 3px rgba(103,208,89,.18) !important;
  outline: 0;
}
/* Entry mobile dead-gap */
@media (max-width: 1023px) { #page_entry .ec-off4Grid__cell { margin-bottom: 40px !important; } }

/* ======================= MYPAGE / CONTACT ============================== */
/* Order-history rows -> cards */
#page_mypage .ec-historyRole__contents {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(24,39,24,.05);
  padding: 18px 18px 16px;
  margin: 0 0 16px;
}
#page_mypage .ec-historyRole__detail { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 4px; }
#page_mypage .ec-historyRole__detail .ec-imageGrid__img img { border: 1px solid var(--line); border-radius: 8px; }
/* Account nav: red tab + hard grid -> green accent + --line */
#page_mypage .ec-navlistRole .ec-navlistRole__navlist,
#page_mypage .ec-navlistRole .ec-navlistRole__item { border-color: var(--line); }
#page_mypage .ec-navlistRole .active a { color: var(--brand-green-dark); box-shadow: inset 0 -3px 0 var(--brand-green); }
#page_mypage .ec-navlistRole .ec-navlistRole__item a:hover { background: var(--surface); color: var(--brand-green-dark); }
/* Welcome msg + defs: dotted -> solid */
#page_mypage .ec-welcomeMsg { border-bottom: 1px solid var(--line); }
#page_mypage .ec-borderedDefs dl { border-bottom: 1px solid var(--line); }

/* Contact form fields */
#page_contact .ec-borderedDefs input,
#page_contact .ec-borderedDefs select,
#page_contact .ec-borderedDefs textarea {
  border: 1px solid var(--line);
  border-radius: 8px;
  background-color: #fff;
  color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
#page_contact .ec-borderedDefs input:focus,
#page_contact .ec-borderedDefs select:focus,
#page_contact .ec-borderedDefs textarea:focus {
  border-color: var(--brand-green);
  box-shadow: 0 0 0 3px rgba(103,208,89,.18);
  outline: 0;
}
#page_contact .ec-borderedDefs textarea { min-height: 140px; }
#page_contact .ec-zipInputHelp span { color: var(--brand-green-dark); }
/* Contact critical notice -> softened warning card (needs class swap in Twig) */
#page_contact .contact-notice {
  background: #fdecea;
  border: 1px solid #f5c6c2;
  border-left: 4px solid #c0392b;
  border-radius: 8px;
  color: #b23b30;
  padding: 12px 14px;
  margin: 0 0 8px;
  line-height: 1.6;
}
/* Contact mobile dead-gap */
@media (max-width: 1023px) {
  #page_contact .ec-blockBtn--action,
  #page_contact .ec-blockBtn--cancel { margin-bottom: 24px; }
}

/* ---------- Shared page titles: weak dotted -> ink + green accent ------- */
#page_contact .ec-pageHeader h1,
#page_mypage .ec-pageHeader h1 {
  font-size: 20px;
  color: var(--ink);
  border-bottom: none;
  border-left: 4px solid var(--brand-green);
  padding: 2px 0 2px 12px;
  line-height: 1.35;
  margin: 0 0 24px;
}

/* ---- P-H補: 詳細ページ「よく一緒に見られている商品」関連カードも統一 ----
   関連商品の価格が赤(#ff0024)・名前が青リンクで新デザインと不一致。価格ink・名前濃色に。 */
#page_product_detail .price02-default,
#page_product_detail .price02-default .title { color: #17191c !important; }
#page_product_detail .ec-shelfGrid__item-name {
  color: var(--ink) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}

/* =========================================================================
   P-I: フォント刷新（サイト全体）
   本文=Noto Sans JP（清潔・高可読）、見出し/商品名/価格=Zen Kaku Gothic New
   （モダン・プレミアム）。OS依存の游ゴシック/メイリオを脱し全端末で一貫。
   ========================================================================= */
:root {
  --font-body: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", Meiryo, sans-serif;
  --font-head: "Zen Kaku Gothic New", "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
}
body {
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
input, button, select, textarea, table, th, td, p, a, li, span, div, dl, dt, dd {
  font-family: inherit;
}
/* 見出し・商品名・価格・セクションタイトルはZen Kaku Gothic Newでプレミアムに */
h1, h2, h3, h4,
.ec-shelfGrid__item-name,
.price02-default, .price02-default .title,
.ec-productRole__title,
.gc-hero__title, .gc-hero__eyebrow,
.ec-shopRanking__title, .ec-newItem__title,
.ec-shoppingFlow__title, .ec-shoppingGuide__title,
.ec-pageHeader h1,
.ec-rectHeading h1, .ec-rectHeading h2, .ec-rectHeading h3,
.header-tel__num {
  font-family: var(--font-head);
}

/* =========================================================================
   P-J: PRODUCT DETAIL — First-Fold Conversion pack (hero buybox + mobile
   sticky buy-bar + trust row + gallery/order polish). Append to the END of
   design-refresh.css. EVERY selector scoped to #page_product_detail so it
   cannot leak. Breakpoint 1023/1024px matches this template's own PC/SP
   boundary (pc-only/sp-only, .ec-grid2, .ec-layoutRole width switch).
   Reuses tokens: --brand-green #67d059 / --brand-green-dark #4fb93f /
   --ink #2b2f36 / --muted #6b7280 / --line #e6e8eb / --surface #f6f8f9.
   Near-black price #17191c.
   The #form1 add-to-cart form and the .add-cart submit buttons are UNTOUCHED:
   both new CTAs are <a href="#item_order"> anchors that ride the existing
   a[href^="#"] smooth-scroll handler (detail.twig line ~984).
   ========================================================================= */
#page_product_detail {
  --pd-price: #17191c;
  --pd-radius: 14px;
}

/* ---- J-1: HERO BUYBOX — price + primary CTA + trust, above the spec table.
   Inserted right after the tags, so on desktop it sits ABOVE the pc-only spec
   table (fixing the y=887 fold) and on mobile it lands high in the profile. -- */
#page_product_detail .pd-buybox {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--pd-radius);
  box-shadow: 0 1px 3px rgba(20,40,20,.06);
  padding: 16px 18px 14px;
  margin: 12px 0 18px;
}
#page_product_detail .pd-buybox__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 10px;
}
#page_product_detail .pd-buybox__eyebrow {
  align-self: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: var(--brand-green);
  border-radius: 999px;
  padding: 3px 11px;
  letter-spacing: .04em;
  line-height: 1.4;
}
#page_product_detail .pd-buybox__was {
  color: var(--muted);
  font-size: 15px;
  text-decoration: line-through;
}
#page_product_detail .pd-buybox__now {
  color: var(--pd-price);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
}
#page_product_detail .pd-buybox__now strong { font-size: 34px; }
#page_product_detail .pd-buybox__now small { font-size: 16px; font-weight: 700; margin-left: 2px; }
#page_product_detail .pd-buybox__tilde { font-size: 18px; font-weight: 700; color: var(--muted); margin-left: 1px; }
#page_product_detail .pd-buybox__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  margin-top: 14px;
  min-height: 54px;
  padding: 0 18px;
  background: var(--brand-green);
  color: #fff !important;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border: 1px solid var(--brand-green-dark);
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(79,185,63,.28);
  transition: background-color .15s ease, box-shadow .15s ease, transform .12s ease;
}
#page_product_detail .pd-buybox__cta:hover,
#page_product_detail .pd-buybox__cta:focus {
  background: var(--brand-green-dark);
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(79,185,63,.34);
  transform: translateY(-1px);
}
#page_product_detail .pd-buybox__cta i { font-size: 16px; }
#page_product_detail .pd-buybox__cta--soldout {
  background: #e9ecef;
  color: var(--muted) !important;
  border-color: var(--line);
  box-shadow: none;
  cursor: default;
  transform: none;
}
#page_product_detail .pd-buybox__cta--soldout:hover { background: #e9ecef; color: var(--muted) !important; box-shadow: none; transform: none; }
#page_product_detail .pd-buybox__hint {
  margin: 9px 0 0;
  text-align: center;
  font-size: 12px;
  color: var(--muted);
}

/* ---- J-2: TRUST ROW (正規品保証 / 追跡可能な配送 / 医師監修) — reuses on-page
   claims (modal02 / shipping policy / supervision section). Pills under CTA. -- */
#page_product_detail .pd-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 0;
  padding: 13px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}
#page_product_detail .pd-trust li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
}
#page_product_detail .pd-trust li i { color: var(--brand-green-dark); font-size: 13px; }

/* ---- J-3: MOBILE/TABLET STICKY BUY-BAR (<=1023px) — lowest price + CTA that
   smooth-scrolls to #item_order. Never touches the cart form. -------------- */
#page_product_detail .pd-stickybuy { display: none; }
@media (max-width: 1023px) {
  #page_product_detail .pd-stickybuy {
    display: flex;
    align-items: center;
    gap: 12px;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 9000; /* below site modals (z-index 200000) so they still cover it */
    padding: 9px 14px calc(9px + env(safe-area-inset-bottom, 0px));
    background: rgba(255,255,255,.97);
    -webkit-backdrop-filter: saturate(1.2) blur(6px);
    backdrop-filter: saturate(1.2) blur(6px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -4px 18px rgba(20,40,20,.12);
  }
  #page_product_detail .pd-stickybuy__info {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    line-height: 1.1;
  }
  #page_product_detail .pd-stickybuy__label { font-size: 10px; font-weight: 700; color: var(--muted); letter-spacing: .03em; }
  #page_product_detail .pd-stickybuy__amount { color: var(--pd-price); font-weight: 800; font-size: 14px; }
  #page_product_detail .pd-stickybuy__amount strong { font-size: 21px; letter-spacing: -.02em; }
  #page_product_detail .pd-stickybuy__cta {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 16px;
    background: var(--brand-green);
    color: #fff !important;
    font-size: 16px;
    font-weight: 800;
    text-decoration: none;
    border: 1px solid var(--brand-green-dark);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(79,185,63,.30);
  }
  #page_product_detail .pd-stickybuy__cta:active { background: var(--brand-green-dark); }
  #page_product_detail .pd-stickybuy__cta i { font-size: 15px; }
  /* reserve space so the fixed bar never hides the footer, and lift pagetop */
  #page_product_detail { padding-bottom: 84px; }
  #page_product_detail .ec-blockTopBtn { bottom: 92px; }
}

/* ---- J-4: MOBILE SOURCE-ORDER FIX (<=767px, where .ec-layoutRole__contents
   is block-flow) — push the whole left column (category nav + メルマガ/Instagram/X
   SNS) BELOW the product so the product owns the fold. The 768-1023px tablet
   two-column theme layout is left untouched. --------------------------------- */
@media (max-width: 767px) {
  #page_product_detail .ec-layoutRole__contents {
    display: flex;
    flex-direction: column;
  }
  #page_product_detail .ec-layoutRole__main,
  #page_product_detail .ec-layoutRole__mainWithColumn,
  #page_product_detail .ec-layoutRole__mainBetweenColumn { order: 1; }
  #page_product_detail .ec-layoutRole__left { order: 2; margin-top: 24px; }
}

/* ---- J-5: TREND POLISH — thumbnail chips + framed main image ------------- */
#page_product_detail .ec-sliderItemRole .item_visual {
  border: 1px solid var(--line);
  border-radius: var(--pd-radius);
  overflow: hidden;
  background: #fff;
}
#page_product_detail .item_nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
#page_product_detail .item_nav .slideThumb {
  width: 64px;
  height: 64px;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease;
}
#page_product_detail .item_nav .slideThumb:hover {
  border-color: var(--brand-green);
  box-shadow: 0 4px 12px rgba(79,185,63,.18);
  transform: translateY(-1px);
}
#page_product_detail .item_nav .slideThumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
  box-sizing: border-box;
}

/* ---- J-6: REAL BUY ZONE polish (styling only; submit type/id/classes are
   unchanged — the existing P-H rule already makes .order_tbl .btn green). ---- */
#page_product_detail .order_tbl tr:hover td { background: #fbfdfb; }
#page_product_detail .order_tbl .btn::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f07a";
  margin-right: 4px;
  font-size: 13px;
}

/* ---- J-7: reduced-motion ---- */
@media (prefers-reduced-motion: reduce) {
  #page_product_detail .pd-buybox__cta,
  #page_product_detail .item_nav .slideThumb { transition: none; }
  #page_product_detail .pd-buybox__cta:hover,
  #page_product_detail .item_nav .slideThumb:hover { transform: none; }
}

/* ---- P-J補: 詳細ヒーローの商品名を全幅化 --------------------------------
   名前が更新日と横並びで押し合い、単語途中(ジェネリック)で改行分断していた。
   item_titleをblockにして名前を全幅・更新日をその下へ。 */
#page_product_detail .item_title { display: block; }
#page_product_detail .item_title h1 { margin: 0 0 4px; line-height: 1.35; }
#page_product_detail .item_title .update_date {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin: 0 0 4px;
}

/* =========================================================================
   P-K: モバイル全ページのレイアウト是正
   ①左カラム(SNS/カテゴリ)がmainより上に来る問題→mainを上・左カラムを下へ(全ページ)
   ②トップのカテゴリバナーが半端な183px幅で乱雑→全幅で均等に
   ③KVのサムネナビはモバイルで冗長・乱雑→非表示で整理
   ========================================================================= */
@media (max-width: 767px) {
  .ec-layoutRole__contents { display: flex; flex-direction: column; }
  .ec-layoutRole__main,
  .ec-layoutRole__mainWithColumn,
  .ec-layoutRole__mainBetweenColumn { order: 1; min-width: 0; }
  .ec-layoutRole__left { order: 2; margin-top: 20px; }

  /* トップ: カテゴリバナーを全幅で均等配置(半端幅・左寄せを解消) */
  .front_page .ec-sliderRole .ec-bannerRole_col_2 { display: block; margin: 0; padding: 0; }
  .front_page .ec-sliderRole .ec-bannerRole_col_2 .ec-bannerItem {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 8px !important;
    float: none !important;
    list-style: none;
  }
  .front_page .ec-sliderRole .ec-bannerRole_col_2 .ec-bannerItem img {
    width: 100%; height: auto; display: block;
  }
  /* KVサムネナビはモバイルで冗長→非表示 */
  .front_page .top__kv .top_item_nav { display: none; }
}

/* ---- P-K補: トップのカテゴリバナー(slick撤去後)を清潔なグリッドに ----
   デスクトップ=2列均等、モバイル=全幅1列。半端幅・カルーセル崩れを解消。 */
.front_page .ec-sliderRole .main_visual { display: block; }
.front_page .ec-sliderRole .main_visual .ec-bannerRole_col_2 {
  display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none;
}
.front_page .ec-sliderRole .main_visual .ec-bannerItem {
  width: calc(50% - 5px); margin: 0 !important; float: none !important; list-style: none;
}
.front_page .ec-sliderRole .main_visual .ec-bannerItem img {
  width: 100%; height: auto; display: block; border-radius: 8px;
}
@media (max-width: 767px) {
  .front_page .ec-sliderRole .main_visual .ec-bannerItem { width: 100%; }
}

/* ---- P-K2: バナー幅はflex-basisで決まる→flex-basisを上書き（width不可） ----
   theme既定の flex-basis:49% が原因。デスクトップ2列/モバイル全幅をflexで確定。 */
.front_page .ec-sliderRole .main_visual .ec-bannerRole_col_2 .ec-bannerItem {
  flex: 0 0 calc(50% - 5px) !important;
  max-width: calc(50% - 5px) !important;
}
@media (max-width: 767px) {
  .front_page .ec-sliderRole .main_visual .ec-bannerRole_col_2 .ec-bannerItem {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* ---- P-J補2: h1がfloat/縮小で288pxになる問題を強制解除 ---- */
#page_product_detail .item_title h1 {
  float: none !important;
  clear: both !important;
  width: 100% !important;
  display: block !important;
  white-space: normal !important;
}

/* =========================================================================
   P-L: 情報/規約ページ(当サイトについて/ご利用ガイド/プライバシー/特商法)を
   読みやすいトレンドレイアウトへ。カテゴリサイドバー非表示→本文を中央寄せの
   可読幅に。見出しをink+緑アクセント、行間/余白を最適化。
   ========================================================================= */
#page_help_about .ec-layoutRole__left,
#page_help_guide .ec-layoutRole__left,
#page_help_privacy .ec-layoutRole__left,
#page_help_tradelaw .ec-layoutRole__left { display: none !important; }

#page_help_about .ec-layoutRole__mainWithColumn,
#page_help_guide .ec-layoutRole__mainWithColumn,
#page_help_privacy .ec-layoutRole__mainWithColumn,
#page_help_tradelaw .ec-layoutRole__mainWithColumn {
  flex-basis: 100% !important;
  max-width: 840px !important;
  width: 100% !important;
  margin: 0 auto !important;
}
/* 見出しh1 */
#page_help_about h1, #page_help_guide h1, #page_help_privacy h1, #page_help_tradelaw h1 {
  font-size: 26px !important;
  color: var(--ink) !important;
  font-weight: 700 !important;
  letter-spacing: .01em;
  border-bottom: 2px solid var(--brand-green) !important;
  padding: 0 0 12px !important;
  margin: 8px 0 28px !important;
  background: none !important;
}
/* 見出しh2/h3 */
#page_help_about h2, #page_help_guide h2, #page_help_privacy h2, #page_help_tradelaw h2,
#page_help_about h3, #page_help_guide h3, #page_help_privacy h3, #page_help_tradelaw h3 {
  font-size: 18px !important;
  color: var(--ink) !important;
  font-weight: 700 !important;
  border-left: 4px solid var(--brand-green) !important;
  padding: 2px 0 2px 12px !important;
  margin: 34px 0 14px !important;
  background: none !important;
}
/* 本文 */
#page_help_about p, #page_help_guide p, #page_help_privacy p, #page_help_tradelaw p,
#page_help_about li, #page_help_guide li, #page_help_privacy li, #page_help_tradelaw li,
#page_help_about dd, #page_help_guide dd, #page_help_privacy dd, #page_help_tradelaw dd {
  line-height: 1.9 !important;
  color: #3a3f46;
  margin: 0 0 14px;
}
/* 当サイトについて: 会社情報テーブルを清潔なカードに */
#page_help_about table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
#page_help_about table th, #page_help_about table td {
  padding: 14px 16px !important;
  border-bottom: 1px solid var(--line) !important;
  text-align: left;
  vertical-align: top;
}
#page_help_about table th {
  background: var(--surface) !important;
  color: var(--ink) !important;
  white-space: nowrap;
  width: 30%;
  font-weight: 700;
}
#page_help_about table tr:last-child th, #page_help_about table tr:last-child td { border-bottom: 0 !important; }

/* ---- P-J補3: 商品名折返しの真因=item_titleのpadding-right:170px(絶対配置の更新日用) ----
   padding-rightを除去し更新日を通常フロー(名前の下)に。名前が全幅で1行に収まる。 */
#page_product_detail .item_title { padding-right: 0 !important; position: static !important; }
#page_product_detail .item_title h1 { width: auto !important; }
#page_product_detail .item_title .update_date {
  position: static !important;
  text-align: left;
  color: var(--muted);
  font-size: 12px;
  margin: 2px 0 8px;
}