@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/


html {
  scroll-behavior: smooth;
}


/* ==========================================
   0. 基本設定とカラーパレット
   ========================================== */

/* メインアクセントカラー (テラコッタ/アプリのキーカラー) */
:root {
  --color-accent: #ff7a3c;
  --color-accent-light: #fff4e6;
  --color-text-main: #333333;
  --color-text-sub: #666666;
  --color-bg-base: #f5f5f7;
  --color-card-bg: #ffffff;
  --color-shadow: rgba(15, 23, 42, 0.08);
}

/* ページ全体の背景: アプリ風の淡いグラデーションを適用 */
body.single-product {
  background: radial-gradient(circle at top, #fff5ea 0%, #f6f4f2 45%, var(--color-bg-base) 100%);
}

/* Cocoonの不要要素非表示 (single-product 専用) */
body.single-product #header-container,
body.single-product #header,
body.single-product #navi,
body.single-product #top-menu,
body.single-product #appeal,
body.single-product #appeal-in,
body.single-product .sns-share,
body.single-product .sns-follow,
body.single-product .breadcrumb,
body.single-product .related-entries,
body.single-product .entry-footer,
body.single-product .author-info,
body.single-product .entry-title,
body.single-product .entry-meta,
body.single-product .date-tags,
body.single-product .post-date,
body.single-product .eye-catch,
body.single-product #content-top, /* コンテンツ上のウィジェットエリア */
body.single-product #header-in, 
body.single-product #main-top-image,
body.single-product #site-header-image,
body.single-product #footer-mobile-buttons, /* モバイル下部固定メニュー */
/* ★追加：ヘッダー画像関連の最後の候補★ */
body.single-product #top-page-only-image,
body.single-product #site-header-image-container,
body.single-product #site-header-image-container img,
body.single-product .page-header-image, /* 固定ページ用ヘッダー画像 */
body.single-product .top-image-content, /* トップ画像エリアのコンテンツ */
body.single-product #header-top-in,
/* ★画像が出ている具体的なラッパー（Cocoonのデフォルト）★ */
body.single-product .header-image-wrapper {
  display: none !important;
}

body.single-product .content {
  background: transparent; /* 背景透過 */
  padding-top: 0;
  padding-bottom: 2.4em;
}

/* 中央のコンテンツ幅調整 */
#kuu-product-main {
  max-width: 760px; /* PCでのコンテンツ最大幅を固定 */
  margin: 0 auto;
  padding: 0 16px 32px;
}

/* -----------------------------------------
   1. ヒーローエリア V2 (画像 + 評価の統合)
   ----------------------------------------- */

/* H1タイトルとメタ情報エリア */
.kuu-product-header-info {
  padding: 18px 0 0;
}

.kuu-tax-pills {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}

.kuu-pill {
  /* ヒーローメタのPillは目立たせるため、テラコッタのライトカラーを使用 */
  background: var(--color-accent-light); 
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 600;
}

.kuu-main-title {
  font-size: clamp(24px, 4vw, 32px);
  font-weight: 800;
  margin: 0 0 4px;
  line-height: 1.3;
}

.kuu-product-catchcopy {
  font-size: 14px;
  color: var(--color-text-sub);
  margin: 0 0 8px;
  line-height: 1.6;
}

.kuu-product-maker-text {
  font-size: 13px;
  color: #999;
  margin: 0;
}

/* -----------------------------------------
   2. カード共通スタイル
   ----------------------------------------- */

.kuu-card {
  margin: 0 auto 20px;
  background: var(--color-card-bg);
  border-radius: 20px;
  padding: 18px;
  box-shadow: 0 16px 32px var(--color-shadow); /* 影を強調 */
  border: 1px solid rgba(0, 0, 0, 0.03); /* 薄い線を追加 */
}

.kuu-card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text-main);
  border-left: 4px solid var(--color-accent); /* 見出しにアクセントライン */
  padding-left: 10px;
  margin-bottom: 12px;
}

/* -----------------------------------------
   3. 商品情報カード (価格, CTA, グリッド情報)
   ----------------------------------------- */

.kuu-product-price-section {
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
  border-bottom: 1px dashed #eee;
  padding-bottom: 16px;
}

.kuu-price-label {
  font-size: 13px;
  color: #999;
  margin-bottom: 4px;
}

.kuu-price-value {
  font-size: 32px; /* 価格を最大サイズに */
  font-weight: 800;
  color: var(--color-accent);
  line-height: 1;
}

.kuu-price-unit {
  font-size: 14px;
  margin-left: 4px;
  color: var(--color-text-sub);
}

/* CTAエリア（購入ボタン） */
.kuu-product-cta-section {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* ボタン間の余白 */
  margin-bottom: 18px;
}

/* ボタンの共通スタイル */
.kuu-product-cta-section a,
.md-otomo-btn {
  display: inline-flex;
  flex-grow: 1; /* 全て均等幅に */
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
  min-width: 120px;
}

/* メインボタン (公式サイト) の強調 */
.md-otomo-btn-official { 
  background: linear-gradient(90deg, #ff9a4b 0%, var(--color-accent) 100%);
  color: #fff; 
  box-shadow: 0 8px 20px rgba(255,122,60,0.45);
}

/* サブボタン (楽天・Amazon・Yahoo/B2B) を公式カラーに変更 */
.md-otomo-btn-amazon {
  /* Amazon オレンジ */
  background: #ff9900;
  color: #ffffff;
  border: none;
}

.md-otomo-btn-rakuten {
  /* 楽天レッド */
  background: #bf0000;
  color: #ffffff;
  border: none;
}

/* 将来：Y!ショッピング or B2B 用
   → 今 Yahoo を想定した色にしておく */
.md-otomo-btn-b2b {
  background: #ff0033; /* Yahoo!っぽい赤 */
  color: #ffffff;
  border: none;
}


.kuu-product-cta-section a:hover {
  opacity: 0.9;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15);
}



/* -----------------------------------------
   4. レビューカードとフローティングボタン (FAB)
   ----------------------------------------- */

.kuu-card-review {
  /* レビューカードは少し明るめの背景 */
  background: #F7F0E8;
  border: 1px solid #E4D6C8;
  padding-bottom: 24px;
}

/* レビューリスト内の各レビューカード（Site Reviewsの要素） */
.kuu-card-review .glsr-review {
  border-radius: 14px;
  border: 1px solid #ffe3d1 !important;
  box-shadow: none !important;
  background: #ffffff;
  padding: 10px 12px;
  margin-bottom: 10px;
}

/* AI要約のスタイル */
.md-ai-summary {
  margin-top: 10px;
  padding: 12px;
  border-radius: 12px;
  background: #fff3e6; /* テラコッタの強いライトカラー */
  border-left: 5px solid var(--color-accent);
}

.md-ai-summary-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-accent);
  margin-bottom: 4px;
}

.md-ai-summary-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-main);
}


/* ★フローティングアクションボタン (FAB)★ */
.kuu-floating-fab-wrap {
  position: fixed;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  max-width: 90%;
  width: 320px; /* PCでも大きくなりすぎないように */
}

.kuu-fab-button {
  width: 100%;
  border-radius: 999px;
  padding: 14px 20px;
  background: linear-gradient(90deg, #f08a4b 0%, #d96b32 100%);
  border: none;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 10px 30px rgba(255,122,60,0.55);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.kuu-fab-button:hover {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 14px 35px rgba(255,122,60,0.65);
}

/* FAB内のアイコン調整 (Font Awesomeなどの想定) */
.kuu-fab-button i {
  font-size: 1.2em;
}

/* -----------------------------------------
   5. モーダル (ポップアップ)
   ----------------------------------------- */

.md-review-modal {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
}

.md-review-modal.is-open {
  display: block;
}

.md-review-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
}

.md-review-modal__content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 640px;
  width: 92%;
  max-height: 90vh;
  overflow-y: auto;
  background: #ffffff;
  border-radius: 20px;
  padding: 1.5em 1.3em 1.4em;
  box-shadow: 0 24px 60px rgba(0,0,0,0.45);
}

.md-review-modal__close {
  position: absolute;
  top: 0.4em;
  right: 0.6em;
  border: none;
  background: none;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  color: #999;
}

.md-review-modal-open body {
  overflow: hidden;
}

/* モーダル内のフォームスタイル (Site Reviews) */
.md-review-modal__content .glsr-form input[type="text"],
.md-review-modal__content .glsr-form input[type="email"],
.md-review-modal__content .glsr-form textarea {
  border-radius: 10px;
  border-color: #eee;
  padding: 0.7em 0.9em;
  font-size: 13px !important;
}

.md-review-modal__content .glsr-label {
  font-size: 0.8rem;
  color: #777;
  margin-bottom: 0.2em;
}


/* モーダル内の送信ボタンをFABと同じスタイルに */
.md-review-modal__content .glsr-form button,
.md-review-modal__content .glsr-form input[type="submit"] {
  width: 100%;
  border-radius: 999px;
  padding: 12px 16px;
  background: var(--color-accent);
  font-weight: 700;
  border: none;
  color: #fff;
  cursor: pointer;
}


/* -----------------------------------------
   PC・SP共通：ヒーロー画像＆2カラムレイアウト
   ----------------------------------------- */

/* 上部ヒーローブロック全体 */
.kuu-hero-v3 {
  margin-bottom: 32px;
}

/* PC時：画像＋評価カードの2カラム（1024px以上で横並び） */
.kuu-hero-2col {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
}

/* 左：画像側ラッパー */
.kuu-hero-image-col {
  flex: 0 0 auto;
}

/* 画像ラッパー（PCの基本幅） */
.kuu-hero-image-v2-wrap {
  max-width: 280px;   /* ★PCでのアイキャッチ最大幅（お好みで調整OK） */
  width: 100%;
  margin: 0 auto;
}

/* 実際の画像 */
.kuu-hero-image-v2-wrap img.kuu-hero-image-v2 {
  display: block;
  width: 100%;
  height: auto;
}

/* 右：評価カード */
.kuu-hero-review-card {
  flex: 0 0 360px;
  max-width: 360px;
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  padding: 12px 16px;
  border-radius: 20px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);

  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.kuu-hero-review-label {
  font-size: 12px;
  letter-spacing: 0.12em;
  opacity: 0.9;
  margin: 0;
}

.kuu-hero-review-main {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.kuu-rating-stars {
  position: relative;
  font-size: 18px;
  line-height: 1;
}

.kuu-rating-stars-base {
  color: #e0e0e7;
}

.kuu-rating-stars-fill {
  position: absolute;
  top: 0;
  left: 0;
  white-space: nowrap;
  overflow: hidden;
  color: #ffc94a;
}

.kuu-rating-score-number {
  font-size: 24px;
  font-weight: 700;
  color: #ffc94a;
}

/* 件数テキストなど */
.kuu-product-rating-count {
  font-size: 12px;
  opacity: 0.9;
  width: 100%;
}

/* タイトルブロックとの距離 */
.kuu-product-header-info {
  margin-top: 24px;
}

/* 「〇件のクチコミを見る」リンク */
.kuu-product-rating-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 4px;
  padding: 2px 0;
  color: #fff;
  text-decoration: none;
}

.kuu-product-rating-link-icon {
  opacity: 0.6;
  font-size: 13px;
}

.kuu-product-rating-link:hover {
  opacity: 0.85;
}


/* -----------------------------------------
   PCレイアウト（1024px以上）
   コンテンツ幅を 1200px に揃える
   ----------------------------------------- */
@media (min-width: 1024px) {

  /* ページ全体のコンテンツ幅 */
  #kuu-product-main {
    max-width: 1200px;
    margin: 0 auto;
  }

  /* 下のカード類も 1200px まで広げる */
  .kuu-product-body,
  .kuu-card {
    max-width: 1200px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}


/* -----------------------------------------
   タブレット・スマホ共通（〜1023px）
   画像の下に評価カードを少し重ねる
   ----------------------------------------- */
@media screen and (max-width: 1023px) {

  /* 縦並びレイアウトに変更 */
  .kuu-hero-2col {
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

  /* スマホ・タブレットでは画像幅を画面に合わせつつ中央寄せ */
  .kuu-hero-image-v2-wrap {
    max-width: min(100%, 250px);  /* 画面幅を超えない＆最大240px程度 */
    margin: 0 auto;
  }

  .kuu-hero-review-card {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    width: calc(100% - 32px);   /* 画面端から少し余白 */
    max-width: 420px;
    margin-top: -20px;          /* ★ ここで画像に少し食い込ませる */
    padding: 8px 14px;
    border-radius: 16px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
    row-gap: 2px;
    column-gap: 8px;
    justify-content: center;
    text-align: center;
  }

  .kuu-rating-stars {
    font-size: 15px;
  }

  .kuu-rating-score-number {
    font-size: 20px;
  }

  .kuu-hero-review-label,
  .kuu-hero-review-main {
    width: auto;
  }

  .kuu-hero-review-main {
    justify-content: center;
  }

  .kuu-product-rating-link {
    width: 100%;
    justify-content: center;
    text-align: center;
    margin-top: 2px;
  }

  .kuu-product-rating-count {
    font-size: 12px;
    width: auto;
  }
}


/* -----------------------------------------
   スマホ詳細（〜480px）
   ※ヒーロー画像には触らず、周辺だけ調整
   ----------------------------------------- */
@media screen and (max-width: 480px) {

  /* コンテンツ左右の余白を少し詰める */
  #kuu-product-main {
    padding: 0 10px 24px;
  }

  .kuu-card {
    padding: 16px;
    border-radius: 16px;
  }

  .kuu-product-header-info {
    padding: 12px 0 0;
  }

  .kuu-main-title {
    font-size: 24px;
  }

  /* CTAボタンを縦並びに */
  .kuu-product-cta-section {
    flex-direction: column;
  }

  .kuu-product-cta-section a,
  .md-otomo-btn {
    width: 100%;
  }

  /* 商品情報グリッドを1列に */
  .kuu-product-info-grid {
    grid-template-columns: 1fr;
  }

  /* FAB（クチコミを書くボタン）をほぼ全幅に */
  .kuu-floating-fab-wrap {
    width: 90%;
  }

  /* レビューモーダルを画面幅にフィットさせる */
  .md-review-modal__content {
    max-width: 96%;
    padding: 1.3em 1.1em 1.2em;
  }
}







/* ==========================================
   内容量 ＆ アレルゲン情報ブロック
   ========================================== */

.kuu-product-nutrition-block {
  margin: 12px 0 18px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #f8f7fb;
  border: 1px solid rgba(0, 0, 0, 0.03);
}

/* 小見出し（内容量 / アレルゲン）共通 */
.kuu-product-subtitle {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #888;
  text-transform: none;
  margin-bottom: 4px;
}

/* 内容量の行 */
.kuu-product-amount-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px dashed #e2e2f0;
}

.kuu-product-amount-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text-main);
}

.kuu-product-amount-unit {
  margin-left: 4px;
  font-size: 13px;
  color: var(--color-text-sub);
}

/* アレルゲンボックス */
.kuu-product-allergen-box {
  margin-top: 4px;
}

.kuu-product-allergen-title {
  display: flex;
  align-items: center;
  gap: 6px;
}

.kuu-product-allergen-title::before {
  content: "⚠";
  font-size: 14px;
  display: inline-block;
  color: #ff7a3c;
}

/* タグ群 */
.kuu-product-allergen-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.kuu-allergen-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  background: #fff;
  border: 1px solid #ffd4b8;
  color: #c25b2d;
  font-weight: 600;
  white-space: nowrap;
}

/* 注意書き */
.kuu-product-allergen-note {
  margin: 6px 0 0;
  font-size: 11px;
  color: #999;
  line-height: 1.5;
}

/* スマホでは少しだけゆとりを出す */
@media (max-width: 480px) {
  .kuu-product-nutrition-block {
    padding: 10px 10px;
    border-radius: 12px;
  }

  .kuu-product-amount-value {
    font-size: 16px;
  }

  .kuu-allergen-tag {
    font-size: 10px;
    padding: 2px 7px;
  }
}



/* ==========================
   メタ行 5.0 ★★★★★ 提供品 日付
   ========================== */

body.single-product .md-review-meta-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #333333;
}

/* スコア数値 5.0 */
body.single-product .md-review-meta-line .md-score-number {
  font-size: 18px;
  font-weight: 700;
  color: #ff8c2a;
}

/* 星 */
body.single-product .md-review-meta-line .md-stars {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  font-size: 17px;
  color: #ffc93c;
}
body.single-product .md-review-meta-line .md-stars .glsr-stars,
body.single-product .md-review-meta-line .md-stars .glsr-star {
  display: inline-flex;
}

/* 提供品バッジ（メタ行内） */
body.single-product .md-review-meta-line .md-review-badge,
body.single-product .md-review-meta-line .md-meta-badge {
  background: #ffe9d6;
  border: 1px solid #ffcf99;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: #b5622a;
}

/* 日付 */
body.single-product .md-review-meta-line .glsr-review-date {
  margin-left: auto;
  font-size: 12px;
  font-weight: 400;
  font-style: normal;
  color: #777777;
}
body.single-product .md-review-meta-line .glsr-review-date .glsr-tag-value {
  font-size: inherit;
  font-weight: inherit;
  font-style: inherit;
}




/* =========================================================
   /mypage/reviews（page-id-800）にも商品ページと同じメタ/バッジを適用
========================================================= */

/* メタ行（数値・星・バッジ・日付） */
body.page-id-800 .md-review-meta-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #333333;
}

/* スコア数値 */
body.page-id-800 .md-review-meta-line .md-score-number,
body.page-id-800 .md-review-meta-line .md-review-score {
  font-size: 18px;
  font-weight: 700;
  color: #ff8c2a;
}

/* 星 */
body.page-id-800 .md-review-meta-line .md-stars,
body.page-id-800 .md-review-meta-line .md-review-stars {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  font-size: 17px;
  color: #ffc93c;
}

/* 日付 */
body.page-id-800 .md-review-meta-line .glsr-review-date {
  margin-left: auto;
  font-size: 12px;
  font-weight: 400;
  font-style: normal;
  color: #777777;
  white-space: nowrap;
}

/* ▼ バッジ “行” の並び（商品ページ寄せ） */
body.page-id-800 .md-review-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 10px;
}

/* ▼ バッジ本体（商品ページの最終形に合わせる） */
body.page-id-800 .md-review-meta-line .md-review-badge,
body.page-id-800 .md-review-meta-line .md-meta-badge,
body.page-id-800 .md-review-badges .md-review-badge,
body.page-id-800 .md-review-badges .md-meta-badge {
  background: #ffe0c4;
  border: 1px solid #f0a25b;
  color: #b4541f;
  padding: 2px 8px;

  /* 商品ページが四角運用なら 4px、pill運用なら 999px に */
  border-radius: 4px;

  font-size: 12px;
  font-weight: 600;
}





/* ==========================
   本文フォント＆行長
   ========================== */

body.single-product .kuu-card-review .glsr-review-content,
body.single-product .md-review-cards .glsr-review-content {
  font-size: 12.5px;
  line-height: 1.8;
  color: #444444;
  max-width: 60ch;  /* PC では1行を約60文字に制限 */
}

@media (max-width: 480px) {
  body.single-product .kuu-card-review .glsr-review-content,
  body.single-product .md-review-cards .glsr-review-content {
    font-size: 12px;
    max-width: 100%;  /* SPでは幅いっぱい使う */
  }
}

/* ==========================
   アバター＋名前
   ========================== */

body.single-product .kuu-card-review .glsr-review-avatar img,
body.single-product .md-review-cards .glsr-review-avatar img {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #eeeeee;
}

body.single-product .kuu-card-review .glsr-review-author,
body.single-product .md-review-cards .glsr-review-author {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  font-size: 10px;
  color: #666666;
}

/* ==========================
   SP：1行目=評価+日付 / 2行目=提供品バッジ
   ========================== */

/* SP：1行目=評価+日付 / 2行目=提供品バッジ（バッジ幅はテキストに合わせる） */
@media (max-width: 480px) {
  body.single-product .md-review-meta-line {
    align-items: flex-start;
  }

  /* 並び順を指定 */
  body.single-product .md-review-meta-line .md-score-number { order: 1; }
  body.single-product .md-review-meta-line .md-stars        { order: 2; }
  body.single-product .md-review-meta-line .glsr-review-date {
    order: 3;
    margin-left: 8px;
  }

  /* 疑似要素で「改行用」の 1 アイテムを入れる */
  body.single-product .md-review-meta-line::after {
    content: "";
    order: 3.5;
    flex-basis: 100%;
  }

  /* 提供品バッジは 2 行目。幅は内容に合わせる */
  body.single-product .md-review-meta-line .md-review-badge,
  body.single-product .md-review-meta-line .md-meta-badge {
    order: 4;
    margin-left: 0;
    margin-top: 2px;
    align-self: flex-start;   /* 左寄せ */
    /* flex-basis は指定しない → pill の幅 = テキスト幅 */
  }
}



/* 提供品バッジ：オレンジを少し濃くして締める */
.md-review-badge,
body.single-product .md-review-meta-line .md-review-badge,
body.single-product .md-review-meta-line .md-meta-badge {
  background: #ffe0c4;
  border: 1px solid #f0a25b;
  color: #b4541f;
}





/* ==============================
   商品情報ブロック：1行レイアウト＋タグ風リンク
   ============================== */

/* PC：2カラム、SP：1カラム */
body.single-product .kuu-product-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
  margin: 8px 0 0;
  padding: 0;
}

@media (max-width: 480px) {
  body.single-product .kuu-product-info-grid {
    grid-template-columns: 1fr;
  }
}

/* 各行：ラベル＋値を横並び1行に */
body.single-product .kuu-product-info-item {
  background: #f8f7fb;
  border-radius: 12px;
  padding: 6px 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

/* ラベル（保存方法／製造元／カテゴリ／地域） */
body.single-product .kuu-product-info-item dt {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.05em;
  color: #999999;
  white-space: nowrap;  /* ラベルは必ず1行 */
}

/* 値（常温／テスト／鮭／北海道 など） */
body.single-product .kuu-product-info-item dd {
  margin: 0 0 0 auto;   /* 右寄せ */
  font-size: 14px;
  font-weight: 600;
  color: #333333;
  text-align: right;
  flex: 1 1 auto;
  word-break: break-all;   /* 製造元が長くてもはみ出さず折り返す */
}

/* カテゴリ・地域などリンク値をタグ風ボタンに */
body.single-product .kuu-product-info-item dd a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  background: #fff;
  border: 1px solid #ffd4b8;
  color: var(--color-accent);
  white-space: nowrap;
}

body.single-product .kuu-product-info-item dd a:hover {
  background: #fff4e6;
  border-color: #ffc38f;
}


/* -------------------------------------------------
   クチコミ投稿フォーム：全体カード化
   ------------------------------------------------- */
body.single-product .md-review-modal__content .glsr-form {
  background: #ffffff;
  border-radius: 18px;
  padding: 18px 16px 22px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.12);
  border: 1px solid #f3e0d0;
}

/* ラベルや入力欄の間隔を少し詰める */
body.single-product .md-review-modal__content .glsr-field {
  margin-bottom: 12px;
}

/* -------------------------------------------------
   画像アップロードカード（＋ボタン風）
   ------------------------------------------------- */

body.single-product .md-review-photo-field {
  margin: 14px 0 10px;
}

body.single-product .md-review-photo-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px dashed #ffd9b5;  /* 柔らかいオレンジに */
  background: #fffaf5;         /* ほぼ白のクリーム色に */
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}


body.single-product .md-review-photo-card:hover {
  background: #ffeadd;
  box-shadow: 0 4px 10px rgba(255,122,60,0.25);
  transform: translateY(-1px);
}

body.single-product .md-review-photo-icon {
  font-size: 16px;
  margin-bottom: 3px;
}

body.single-product .md-review-photo-text-main {
  font-size: 13px;
  font-weight: 700;
  color: #c75a1c;
}

body.single-product .md-review-photo-text-sub {
  font-size: 11px;
  color: #996b4a;
}

/* 実際の file インプットは全面にかぶせて隠す */
body.single-product .md-review-photo-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

/* ファイル名表示 */
body.single-product .md-review-photo-filename {
  margin-top: 4px;
  font-size: 11px;
  color: #888;
}

/* -------------------------------------------------
   入手経路ボックス：フォームカード内での統一感
   ------------------------------------------------- */

body.single-product .md-review-extra-box {
  margin-top: 14px;
  padding: 12px 12px 10px;
  border-radius: 12px;
  background: #fffaf4;
  border: 1px solid #ffe2c6;
}

body.single-product .md-review-extra-title {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 4px;
}

body.single-product .md-review-extra-note,
body.single-product .md-review-extra-legal {
  font-size: 11px;
  color: #8b7a6b;
}

body.single-product .md-review-source-group {
  margin: 8px 0 4px;
}

body.single-product .md-review-brand-input {
  border-radius: 8px;
  border-color: #f1dfce;
}

/* -------------------------------------------------
   スマホ微調整
   ------------------------------------------------- */
@media (max-width: 480px) {
  body.single-product .md-review-modal__content .glsr-form {
    padding: 16px 12px 20px;
    border-radius: 16px;
  }

  body.single-product .md-review-photo-card {
    padding: 10px;
  }
}


/* -------------------------------------------------
   クチコミフォーム：ヘッダー
   ------------------------------------------------- */
body.single-product .md-review-modal__content .md-review-form-header {
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid #f3e0d0;
}

body.single-product .md-review-modal__content .md-review-form-title {
  font-size: 15px;
  font-weight: 700;
  color: #333;
}

body.single-product .md-review-modal__content .md-review-form-lead {
  margin: 4px 0 0;
  font-size: 11px;        /* ← 12px から 11px に */
  color: #9a8370;         /* ← 少し薄めで落ち着いた色に */
  line-height: 1.6;
}

/* 星評価まわりの余白を少しだけ詰める（あれば） */
body.single-product .md-review-modal__content .glsr-field-rating {
  margin-bottom: 10px;
}







/* ==========================================
   モーダル＆フォーム UI 最終調整（上書き）
   ========================================== */

body.single-product .md-review-modal__content {
  max-width: 640px;
  /* 上の余白を少しだけ削る：1.3em → 0.8em */
  padding: 0.8em 1.3em 1.3em;
  box-shadow: 0 20px 50px rgba(0,0,0,0.40);
}

/* フォームカードの上マージンもカットしてさらに詰める */
body.single-product .md-review-modal__content .glsr-form {
  margin-top: 0;
  padding: 16px 16px 22px;
  border-radius: 16px;
}


/* 各フィールド間隔を少しだけ詰める */
body.single-product .md-review-modal__content .glsr-field {
  margin-bottom: 10px;
}

/* 星評価ブロック：見出し感は維持しつつ、下との距離を短く */
body.single-product .md-review-modal__content .glsr-field-rating {
  margin: 0 0 10px;
  padding: 10px 12px 8px;
  border-radius: 12px;
  background: #fffaf4;
  border: 1px solid #ffe2c6;
}
body.single-product .md-review-modal__content .glsr-field-rating .glsr-label {
  font-size: 13px;
  font-weight: 700;
  color: #333;
  margin-bottom: 4px;
}


/* 「必須」バッジの見た目 */
body.single-product .md-review-modal__content .md-required-badge {
  font-size: 11px;
  font-weight: 700;
  color: #ff7a3c;
  margin-left: 4px;
}


/* 入手経路タイトルに「必須」バッジを表示 */
body.single-product .md-review-modal__content .md-review-extra-title::after {
  content: " 必須";
  font-size: 11px;
  font-weight: 700;
  color: #ff7a3c;
  margin-left: 4px;
}


/* ラベル階層の統一（これはそのままでOK） */
body.single-product .md-review-modal__content .glsr-field .glsr-label {
  font-size: 12px;
  font-weight: 600;
  color: #444;
  margin-bottom: 4px;
}

body.single-product .md-review-modal__content .glsr-field .glsr-description,
body.single-product .md-review-modal__content .md-review-extra-note,
body.single-product .md-review-modal__content .md-review-extra-legal {
  font-size: 9px;
  color: #a29386;
}

/* 画像カードと入手経路カードの横幅を完全に揃える */
body.single-product .md-review-modal__content .md-review-photo-field,
body.single-product .md-review-modal__content .md-review-extra-box {
  width: 100%;
  box-sizing: border-box;
}

/* 画像カードの上下余白を調整して、全体グリッドと揃える */
body.single-product .md-review-modal__content .md-review-photo-field {
  margin: 12px 0 8px;
}

/* 入手経路ボックス：トーンを少しだけ抑える + 間隔調整 */
body.single-product .md-review-modal__content .md-review-extra-box {
  background: #fffdf9;
  border-color: #ffe8d0;
  margin-top: 10px;
}
body.single-product .md-review-modal__content .md-review-extra-title {
  font-size: 13px;
  font-weight: 700;
  color: #333;
}
body.single-product .md-review-modal__content .md-review-source-group {
  margin: 8px 0 6px;
}
body.single-product .md-review-modal__content .md-radio {
  font-size: 13px;
  line-height: 1.5;
}

/* 「企業名」入力はデフォルト非表示。is-active で出す */
body.single-product .md-review-modal__content .md-radio-with-input .md-review-brand-input {
  display: none;
  margin-left: 22px;
}
body.single-product .md-review-modal__content .md-radio-with-input.is-active .md-review-brand-input {
  display: block;
}

/* 閉じるボタンのタップ領域を拡大 */
body.single-product .md-review-modal__close {
  top: 0.4em;
  right: 0.6em;
  padding: 6px;
  border-radius: 999px;
}
body.single-product .md-review-modal__close:hover,
body.single-product .md-review-modal__close:focus {
  background: rgba(0,0,0,0.05);
  color: #666;
}

/* 送信ボタン周辺の余白と影 */
body.single-product .md-review-modal__content .glsr-form button,
body.single-product .md-review-modal__content .glsr-form input[type="submit"] {
  margin-top: 10px;
  box-shadow: 0 8px 18px rgba(255,122,60,0.4);
}

/* モーダル内の入手経路ラジオ：1行ずつ縦並びにする */
body.single-product .md-review-modal__content .md-review-source-group {
  display: block;         /* flex をやめる */
}

body.single-product .md-review-modal__content .md-review-source-group .md-radio {
  display: block;         /* ラベルをブロック化 = 1 行 1 選択肢 */
  margin-bottom: 6px;
  align-items: flex-start;
}

body.single-product .md-review-modal__content .md-review-source-group .md-radio input[type="radio"] {
  margin-right: 4px;
}


/* アップロードカードを、右上絶対配置の基準にする */
body.single-product .md-review-photo-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  padding: 10px 12px;
  padding-right: 70px;   /* 右上のプレビュー用スペース */
  padding-bottom: 20px;  /* ★プレビュー枠のぶん下にも余白を取る */
  min-height: 70px;      /* ★カード自体の最低高さ（64px＋余白） */
  box-sizing: border-box;
}


/* 右上に固定されるプレビュー枠
   画像がなくても常に「点線の□」として見せる */
body.single-product .md-review-photo-preview {
  position: absolute;
  top: 50%;      /* 好みで 12〜18pxくらいに調整してOK */
  right: 16px;
  transform: translateY(-50%);  /* 自分の高さの半分だけ上に戻す＝縦中央 */
  width: 48px;
  height: 48px;
  border-radius: 8px;
  border: 1px dashed #f1dfce;  /* 画像なし時：点線 */
  background: transparent;
  overflow: hidden;
}

/* JS が .has-image を付けたとき → 実画像モード */
body.single-product .md-review-photo-preview.has-image {
  border-style: solid;  /* 実線枠 */
  background: #fff;
}

body.single-product .md-review-photo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}


/* フィールド間の縦スペースを少し詰める */
body.single-product .md-review-modal__content .glsr-field {
  margin-bottom: 4px;  /* 10px → 8px に */
}

/* 星評価ブロックの下マージンも少しだけ詰める */
body.single-product .md-review-modal__content .glsr-field-rating {
  margin: 0 0 4px;
}

/* 「写真を追加」ブロックの余白を詰める */
body.single-product .md-review-modal__content .md-review-photo-field {
  margin: 4px 0 4px;
}

/* 入手経路ボックスとの間も少しだけ詰める */
body.single-product .md-review-modal__content .md-review-extra-box {
  margin-top: 4px;
}



/* === 全体カード　口コミデザイン === */
/* カード本体（個別レビューの外枠） */
.md-review-card {
    background: #fff;
    border-radius: 16px;
    padding: 18px 20px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.05);
    margin-bottom: 24px;
    box-sizing: border-box;
}

/* PCレイアウト：左にテキスト、右に画像
   1行目: メタ（数値・星・バッジ・日付）
   2行目: タイトル
   3行目: 本文
   4行目: 著者情報
*/
.md-review-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 180px;
    grid-template-areas:
        "meta   image"
        "title  image"
        "text   image"
		"readmore image"   /* ← ここを追加 */
        "author image";
    column-gap: 20px;
    row-gap: 8px;
    align-items: flex-start;
}

/* 各要素をグリッドのどのマスに置くか */
.md-review-meta-line { 
    grid-area: meta; 
}
.md-review-media { 
    grid-area: image; 
}
.md-review-title { 
    grid-area: title; 
}
.md-review-text { 
    grid-area: text; 
}
.md-review-author { 
    grid-area: author; 
}



/* SP：指定の順番
   1行目  数値・星・日付（＋2行目にバッジ）
   3行目  画像（中央）
   4行目  タイトル
   5行目  本文
   6行目  著者情報
*/
@media (max-width: 768px) {
    .md-review-main {
        grid-template-columns: 1fr;
        grid-template-areas:
            "meta"
            "image"
            "title"
            "text"
			"readmore"   /* ← 追加 */
            "author";
    }
}



/* 各要素の配置（中身の視覚スタイルは既存の single-product 用ルールに任せる） */
.md-review-meta-line { 
    grid-area: meta; 
}
.md-review-media      { 
    grid-area: image; 
}
.md-review-title      { 
    grid-area: title; 
}
.md-review-text       { 
    grid-area: text; 
}
.md-review-author     { 
    grid-area: author; 
}

/* 「…続きをみる」ボタンも本文(Text)のマスに入れる */
.md-review-readmore {
    grid-area: text;
    justify-self: flex-start;  /* 左寄せ（お好みで） */
}



/* バッジ行：ラッパーとして余白だけ付与（見た目はプラグイン＋既存ルールに任せる） */
.md-review-badges {
    margin: 4px 0 10px;
}

/* 画像：PC右寄せ / SP中央＆小さめ */
.md-review-media {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
}

.md-review-img {
    max-width: 100px;
    width: 100%;
    height: auto;
    border-radius: 10px;
    object-fit: cover;
}

@media (max-width: 768px) {
    .md-review-media {
        justify-content: center;
        margin: 2px 0 2px;
    }

    .md-review-img {
        height: 70px;      /* SPで縦約70pxに固定（実サイズは比率で調整） */
        width: auto;
        max-width: 100%;
        object-fit: contain;
    }
}

/* タイトル */
.md-review-title {
    font-size: 16px;
    font-weight: 700;
    margin: 2px 0;

    /* ★ 1行で省略（続きを読む押すまで） */
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 本文：2行制限で高さを揃えやすく */
.md-review-text {
    font-size: 14px;
    line-height: 1.7;
    color: #333;
    margin-top: 4px;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ★ カード展開時：制限解除 */
.md-review-card.is-expanded .md-review-title,
.md-review-card.is-expanded .md-review-text {
    display: block;
    -webkit-line-clamp: unset;
    -webkit-box-orient: unset;
    overflow: visible;
}

/* 「…続きをみる」ボタン */
.md-review-readmore {
	display: none;
    margin-top: 4px;
	grid-area: readmore; 
    font-size: 12px;
    color: var(--color-accent);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-align: left;
}

.md-review-readmore:focus {
    outline: none;
}

/* 著者行 */
.md-review-author {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-top: 10px;
    border-top: 1px solid #f2f2f2;
    margin-top: 8px;
}

.md-review-author-avatar img {
    width: 24px !important;
    height: 24px !important;
    border-radius: 50%;
    object-fit: cover;
}

.md-review-author-name {
    font-size: 11px;
    font-weight: 600;
}


/* ==========================
   review.php 新HTML向け 互換スタイル
   （元のデザインをCSSだけで復元）
   ========================== */

/* ── 5.0 の数値部分：旧 .md-score-number と同じ見た目を付与 ── */
body.single-product .md-review-meta-line .md-review-score {
  font-size: 18px;
  font-weight: 700;
  color: #ff8c2a;
}

/* ── 星部分：旧 .md-stars と同じ見た目を付与 ── */
body.single-product .md-review-meta-line .md-review-stars {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  font-size: 17px;
  color: #ffc93c;
}
body.single-product .md-review-meta-line .md-review-stars .glsr-stars,
body.single-product .md-review-meta-line .md-review-stars .glsr-star {
  display: inline-flex;
}

/* ── バッジラッパ：横並び＋間隔だけ付与（形は下で指定）── */
body.single-product .md-review-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 10px;
}

/* ── バッジ本体：元の pill デザインを .md-review-badges 内にも適用 ── */
body.single-product .md-review-badges .md-review-badge,
body.single-product .md-review-badges .md-meta-badge {
  background: #000;
  border: 1px solid #000;
  color: #ffff00;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}



/* ==========================
   新テンプレ(md-review-card)専用 メタ行 完全上書き
   PC：1行「数値 → 星 → バッジ → 日付」
   SP：1行目=数値/星/日付, 2行目=バッジ
   ========================== */

/* PC: 1行「数値 → 星 → バッジ …… 日付（右端固定）」 */
@media (min-width: 769px) {
  body.single-product .md-review-card .md-review-main .md-review-meta-line {
    display: grid !important;
    grid-template-columns: auto auto 1fr auto; /* score / stars / badges / date */
    column-gap: 0.5em;
    align-items: center;
  }

  body.single-product .md-review-card .md-review-main .md-review-score {
    grid-column: 1;
  }

  body.single-product .md-review-card .md-review-main .md-review-stars {
    grid-column: 2;
  }

  body.single-product .md-review-card .md-review-main .md-review-badges {
    grid-column: 3;
  }

  body.single-product .md-review-card .md-review-main .md-review-date,
  body.single-product .md-review-card .md-review-main .md-review-meta-line .glsr-review-date {
    grid-column: 4;
    justify-self: end;   /* 右端に固定 */
    margin-left: 0;
    text-align: right;
  }
}


/* SP: グリッドで 1行目=数値/星/日付, 2行目=バッジ にする */
@media (max-width: 768px) {
  body.single-product .md-review-card .md-review-main .md-review-meta-line {
    display: grid !important;
    grid-template-columns: auto auto 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
      "score stars date"
      "badges badges badges";
    column-gap: 0.4em;
    row-gap: 0.25em;
  }

  body.single-product .md-review-card .md-review-main .md-review-score {
    grid-area: score;
    order: 0; /* 既存 order をリセット */
  }

  body.single-product .md-review-card .md-review-main .md-review-stars {
    grid-area: stars;
    order: 0;
  }

  body.single-product .md-review-card .md-review-main .md-review-date,
  body.single-product .md-review-card .md-review-main .md-review-meta-line .glsr-review-date {
    grid-area: date;
    order: 0;
    margin-left: 0;
    text-align: right;
  }

  body.single-product .md-review-card .md-review-main .md-review-badges {
    grid-area: badges;
    order: 0;
  }
}


/* 新テンプレの assigned_links を pill バッジ風にする */
body.single-product .md-review-card .md-review-badges > * {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  margin-right: 4px;
  margin-bottom: 2px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: #E2C9AD;
  border: 1px solid #E2C9AD;
  color: #fff;
  text-decoration: none;
}

body.single-product .md-review-card .md-review-badges > *:hover {
  opacity: 0.9;
}


/* ==========================
   クチコミ：タイトル＆本文 制御（確実版）
   ========================== */

/* ▼ 初期状態（is-expanded が付いていないとき）は 1行/2行 に制限 */

.md-review-card:not(.is-expanded) .md-review-title {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;

  /* 念のため高さも物理的に制限 */
  line-height: 1.4;
  max-height: 1.4em; /* ≒1行分 */
}

.md-review-card:not(.is-expanded) .md-review-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;

  line-height: 1.7;
  max-height: 3.4em; /* 1.7 × 2行分 */
}

/* ▼ 展開時だけ制限を解除（全文表示） */

.md-review-card.is-expanded .md-review-title,
.md-review-card.is-expanded .md-review-text {
  display: block;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
  overflow: visible;
  max-height: none;
}




/* ===============================
   SP：レビュー一覧 & カード内部の余白調整まとめ
   =============================== */
@media (max-width: 768px) {

  /* ▼ レビュー同士の余白（カード間）を詰める */
  body.single-product .glsr-reviews,
  body.single-product .glsr-reviews-wrap {
    gap: 10px !important;
    row-gap: 10px !important;
    column-gap: 0 !important;
  }

  /* ▼ カード内部の行間（meta / title / image / text / author）を詰める */
  body.single-product .md-review-main {
    row-gap: 0 !important;
  }

  /* 直下の各要素の上下マージンを圧縮 */
  body.single-product .md-review-main > * {
    margin-top: 2px !important;
    margin-bottom: 2px !important;
  }

  /* 一番上と一番下だけ、少しだけ余裕を残す */
  body.single-product .md-review-main > *:first-child {
    margin-top: 4px !important;
  }
  body.single-product .md-review-main > *:last-child {
    margin-bottom: 4px !important;
  }

  /* ▼ 画像ありレビュー専用の微調整 */

  /* タイトル上の余白を少し戻す（キツすぎないように） */
  body.single-product
  .md-review-card.md-has-image
  .md-review-main
  .md-review-title {
    margin-top: 4px !important;
  }

  /* バッジ ↔ 画像間を詰めつつ、
     画像の下にだけ少し余裕を持たせる */
  body.single-product
  .md-review-card.md-has-image
  .md-review-main
  .md-review-badges {
    margin-bottom: 2px !important;
  }

  body.single-product
  .md-review-card.md-has-image
  .md-review-main
  .md-review-media {
    margin-top: 0 !important;
    margin-bottom: 6px !important;
  }
}


/* ===============================
   SP：バッジを一回り小さくする
   =============================== */
@media (max-width: 768px) {

  /* メタ行内のバッジ（購入品／プレゼント など） */
  body.single-product .md-review-meta-line .md-review-badge,
  body.single-product .md-review-meta-line .md-meta-badge {
    font-size: 11px !important;   /* 12px → 11px */
    padding: 1px 6px !important;  /* 2px 8px → 少しだけ細く */
  }

  /* カード下部のバッジ（assigned_links が入るところ）も揃える場合 */
  body.single-product .md-review-card .md-review-badges > * {
    font-size: 11px !important;
    padding: 1px 6px !important;
  }
}

/* ===============================
   レビューバッジ：丸 pill → 四角に変更
   =============================== */
body.single-product .md-review-meta-line .md-review-badge,
body.single-product .md-review-meta-line .md-meta-badge,
body.single-product .md-review-badges .md-review-badge,
body.single-product .md-review-badges .md-meta-badge,
body.single-product .md-review-card .md-review-badges > * {
  border-radius: 999px !important;  /* 完全に角を立てるなら 0px に */
}

/* ===============================
   レビュー画像サムネを正方形にする
   =============================== */

/* PC用（今の縦サイズ＝約100pxを基準に正方形） */
@media (min-width: 769px) {
  body.single-product .md-review-img {
    width: 100px !important;      /* 正方形の幅 */
    height: 100px !important;     /* 正方形の高さ（今の縦サイズ） */
    max-width: none !important;
    object-fit: contain !important;  /* 横長画像は余白付きで全体表示 */
    background: #f7f7f7;          /* 余白部分の背景色（お好みで） */
    border-radius: 10px;          /* 角丸は現状キープ。やめたければ 0 に */
  }
}

/* ===============================
   SP：グリッドレイアウトを解除して
       画像をカード幅いっぱいで中央にする
   =============================== */
@media (max-width: 768px) {

  /* ★ グリッドそのものを無効化する */
  body.single-product .md-review-card,
  body.single-product .md-review-card .md-review-main {
    display: block !important;
    grid-template-columns: none !important;
    grid-template-areas: none !important;
  }

  /* 画像コンテナ：カード幅いっぱい ＋ 中央寄せ */
  body.single-product .md-review-card .md-review-media {
    width: 100% !important;
    margin: 4px 0 8px !important;   /* 上下だけ少し余白 */
    padding: 0 !important;
    text-align: center !important;
    display: block !important;
  }

  /* 画像：70×70 の正方形＋中央 */
  body.single-product .md-review-card .md-review-media img.md-review-img,
  body.single-product .md-review-card .md-review-img {
    width: 90px !important;
    height: 90px !important;
    max-width: none !important;
    object-fit: contain !important;
    background: #f7f7f7;
    border-radius: 10px;
    display: block !important;
    margin: 0 auto !important;      /* カード全体に対して中央 */
  }
}







/* ==========================================
   PC：md-review-card 内の日付をカード右上に固定
   ========================================== */
@media (min-width: 769px) {

  /* カード全体を絶対配置の基準にする */
  body.single-product .md-review-card {
    position: relative;
  }

  /* メタ行：日付分のスペースを確保（右側に余白を空ける） */
  body.single-product .md-review-card .md-review-main .md-review-meta-line {
    padding-right: 110px; /* 日付の分だけ右に空ける。必要なら増減 */
  }

  /* 日付：カード右上に固定（タイトル長・画像有無の影響を受けない） */
  body.single-product .md-review-card .md-review-main .md-review-meta-line > .glsr-review-date {
    position: absolute;
    top: 18px;          /* カード内の上からの位置。微調整したければここを変える */
    right: 24px;        /* カード右端からの余白 */
    margin-left: 0 !important;
    text-align: right;
    white-space: nowrap;
  }
}





/* ==========================================
   PC：画像ありレビュー(md-has-image) の画像位置を固定
   （日付は既存の「カード右上固定」をそのまま利用）
   ========================================== */
@media (min-width: 769px) {

  /* 画像ありカードだけ、右側に画像ぶんの余白を確保 */
  body.single-product .md-review-card.md-has-image .md-review-main {
    padding-right: 70px;   /* 画像+余白。必要に応じて 160〜190px で微調整 */
  }

  /* 画像コンテナをカード内で絶対配置 */
  body.single-product .md-review-card.md-has-image .md-review-media {
    position: absolute !important;
    top: 60px;              /* カード上からの縦位置。好みで 50〜70px で調整可 */
    right: 24px;            /* カード右端からの余白 */
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 !important;   /* 既存の margin-top などを無効化 */
  }

  /* 画像を枠いっぱいに収める（既存の正方形ルールに揃える） */
  body.single-product .md-review-card.md-has-image .md-review-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }
}


/* ==========================================
   PC：md-review-card 内の本文幅を 60ch 制限から解放
   （画像手前までテキストが伸びるようにする）
   ========================================== */
@media (min-width: 769px) {

  /* 本文ラッパー自体の幅制限を解除 */
  body.single-product .md-review-card .md-review-text {
    max-width: none !important;
  }

  /* glsr-review-content に掛かっている max-width:60ch を上書き */
  body.single-product .md-review-card .md-review-text .glsr-review-content {
    max-width: none !important;
    width: 100% !important;
    overflow-wrap: break-word;  /* 日本語＋長い英数どちらでも自然に折り返す */
  }
}


@media (min-width: 769px) {

  /* ▼ 親グリッドの row-gap をゼロに強制 */
  body.single-product .md-review-card .md-review-main {
    row-gap: 0 !important;
  }

  /* ▼ h3 タイトルコンテナの余白を完全削除 */
  body.single-product .md-review-card .md-review-title {
    margin: 0 0 6px !important;  /* ← タイトル下だけ 4px 空ける */
    padding: 0 !important;
    line-height: 1.3 !important;
  }

  /* ▼ タイトル内の div も margin/padding 全消し */
  body.single-product .md-review-card .md-review-title * {
    margin: 0 !important;
    padding: 0 !important;
    line-height: inherit !important;
  }

  /* ▼ 本文全体の上マージンを完全削除 */
  body.single-product .md-review-card .md-review-text {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* ▼ 本文内部（glsr-review-content）の margin/padding も全削除 */
  body.single-product .md-review-card .md-review-text * {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}


/* PC：本文エリアを「最低2行ぶん」の高さにする */
@media (min-width: 769px) {
  body.single-product .md-review-card .md-review-text {
    /* 行間 1.7 × 2 行 ≒ 3.4 行高ぶん確保 */
    min-height: 3.4em !important;
  }
}


/* ===============================
   クチコミ見出しの文字サイズ調整　SEO用
   （商品名が長くても収まりやすくする）
   =============================== */

/* PC・SP 共通の基本サイズ */
body.single-product #kuu-reviews .kuu-card-title {
  font-size: 18px !important;
  line-height: 1.4;
}

/* 「のクチコミ」部分だけ小さく（PC 基準） */
body.single-product #kuu-reviews .kuu-card-title .review-label {
  font-size: 0.8em;  /* タイトルより20%小さい */
}

/* スマホ用調整 */
@media (max-width: 480px) {
  /* 見出し全体をさらに小さく */
  body.single-product #kuu-reviews .kuu-card-title {
    font-size: 14px !important;
  }

  /* スマホでは「のクチコミ」を少し小さめに */
  body.single-product #kuu-reviews .kuu-card-title .review-label {
    font-size: 0.8em;
  }
}