/* ===========================
   scope-style.css 〈商品詳細 クリンナップ版〉
   =========================== */

/* ── 見出し（scope風：左線＋下線） ── */
.product_page .ec-productRole__description .hd{
  margin-top:80px !important;
  margin-bottom:8px !important;
  font:700 15px/1.4 sans-serif !important;
  border-left:4px solid #8b572a !important;
  padding-left:7px !important;
  border-bottom:1px solid #ccc !important;
  padding-bottom:4px !important;
  color:#333 !important;
}
/* ページ先頭の見出しだけ余白ゼロ */
.product_page .ec-productRole__description > .hd:first-child{
  margin-top:0 !important;
}

/* ── 単独画像＆キャプション（読み物用） ── */
.product_page .ec-productRole__description .img{
  display:block; width:100%; height:auto; margin:12px 0 10px;
}
.product_page .ec-productRole__description .cap{
  display:block; font-size:12.5px; color:#777; margin:-4px 0 10px;
}

/* ── 商品説明内の画像は全部フルード化 ── */
.product_page .ec-productRole__description img,
.product_page .ec-productRole__description IMG{
  max-width:100% !important;
  height:auto !important;
  display:block !important;
}

/* 画像直後の見出しには“呼吸”を置く */
.product_page .ec-productRole__description .img + .hd,
.product_page .ec-productRole__description img + .hd,
.product_page .ec-productRole__description IMG + .hd{
  margin-top:70px !important;
}

/* 最初の画像は下にゆったり余白 */
.product_page .ec-productRole__description img:first-of-type,
.product_page .ec-productRole__description IMG:first-of-type,
.product_page .ec-productRole__description .img:first-of-type{
  margin-top:12px !important;
  margin-bottom:70px !important;
}

/* ── 2カラム（小さめ写真横並び） ── */
.product_page .ec-productRole__description .twocol{
  display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:10px 0 12px;
}
.product_page .ec-productRole__description .twocol img,
.product_page .ec-productRole__description .twocol IMG{
  width:100% !important; height:auto !important; display:block !important;
}
.product_page .ec-productRole__description .twocol figcaption{
  font-size:12.5px; color:#666; line-height:1.4 !important;
  margin-top:2px !important;   /* 画像との距離を最小限に */
}

/* ── 箇条書きカード ── */
.product_page .ec-productRole__description ul.bullets{
  list-style:none; margin:3px 0 10px; padding:10px 12px;
  background:#fafafa; border:1px solid #eee; border-radius:6px;
}
.product_page .ec-productRole__description ul.bullets li{
  position:relative; padding-left:1.1em; margin:6px 0;
}
.product_page .ec-productRole__description ul.bullets li::before{
  content:"▸"; position:absolute; left:0; top:0; color:#8b572a;
}

/* ── 段落の基本 ── */
.product_page .ec-productRole__description p{
  margin-top:0.4em !important;
  margin-bottom:0.6em !important;
  line-height:1.6 !important;
}

/* ── summary / staff / notice / info ── */
.product_page .ec-productRole__description .summary{
  margin:24px 0 32px; padding:14px 16px; border-radius:10px;
  background:#fff7e6; border:1px solid #f2e4cc; color:#333;
}
.product_page .ec-productRole__description .summary .ttl{
  display:flex; align-items:center; font:700 14px/1.5 sans-serif; color:#b1711c; margin:0 0 8px 0;
}
.product_page .ec-productRole__description .summary .ttl::before{
  content:"✦"; font-size:14px; margin-right:6px; color:#f5a623;
}
.product_page .ec-productRole__description .summary p{
  margin:6px 0 !important; line-height:1.7 !important; font-size:13.5px;
}

.product_page .ec-productRole__description .staff-note{
  margin:24px 0 28px; padding:14px 16px; border-radius:10px;
  background:#f5f8ff; border:1px solid #e2eafc; color:#2b3a55;
}
.product_page .ec-productRole__description .staff-note .ttl{
  display:flex; align-items:center; font:700 14px/1.5 sans-serif; margin:0 0 8px 0;
}
.product_page .ec-productRole__description .staff-note .ttl::before{
  content:"📝"; font-size:16px; margin-right:6px;
}
.product_page .ec-productRole__description .staff-note p{
  margin:6px 0 !important; line-height:1.7 !important; font-size:13.5px;
}

.product_page .ec-productRole__description .notice{
  margin:20px 0 26px; padding:12px 14px; border-radius:10px;
  border:1px solid #f3e1cc; background:#fff8ef; color:#4a3a2a;
}
.product_page .ec-productRole__description .notice .ttl{
  display:flex; align-items:center; font:700 14px/1.5 sans-serif; margin:0 0 6px 0; color:#a4651d;
}
.product_page .ec-productRole__description .notice .ttl::before{
  content:"⚠"; font-size:16px; margin-right:6px; color:#f5a623;
}
.product_page .ec-productRole__description .notice p{
  margin:4px 0 !important; font-size:13.5px; line-height:1.5 !important;
}

.product_page .ec-productRole__description .info{
  margin:20px 0 26px; padding:12px 14px; border-radius:10px;
  border:1px solid #dfe7ff; background:#f6f9ff; color:#2b3a55; line-height:1.7;
}
.product_page .ec-productRole__description .info .ttl{
  display:flex; align-items:center; font:700 14px/1.5 sans-serif; margin:0 0 6px 0; color:#3556a6;
}
.product_page .ec-productRole__description .info .ttl::before{
  content:"ℹ"; font-size:16px; margin-right:6px; color:#5c7de7;
}
.product_page .ec-productRole__description .info p{
  margin:4px 0 !important; font-size:13.5px;
}

/* ── ボックス直後の見出しに“呼吸” ── */
.product_page .ec-productRole__description .summary + .hd,
.product_page .ec-productRole__description .spec + .hd,
.product_page .ec-productRole__description .info + .hd,
.product_page .ec-productRole__description .staff-note + .hd,
.product_page .ec-productRole__description .notice + .hd{
  margin-top:70px !important;
}

/* ── figure周り（最終確定）：余白ゼロ & 画像→キャプション=2px ── */
.product_page .ec-productRole__description figure{
  display:flex !important;
  flex-direction:column !important;
  gap:2px !important;
  margin:0 !important; padding:0 !important; border:0 !important;
}
.product_page .ec-productRole__description figure > img,
.product_page .ec-productRole__description figure > .img,
.product_page .ec-productRole__description figure > a > img,
.product_page .ec-productRole__description figure > a > .img{
  display:block !important;
  margin:0 !important; padding:0 !important;
  line-height:0 !important; /* ベースライン隙間も排除 */
}
.product_page .ec-productRole__description figure > figcaption{
  margin:0 !important;
  font-size:12.5px !important;
  line-height:1.4 !important;
  color:#666 !important;
}
.product_page .ec-productRole__description figure br{
  display:none !important; /* 紛れ込み<BR>対策 */
}

/* ── SPEC（新方式：dl > dt｜dd）── */
.product_page .ec-productRole__description .spec{
  background:#fafafa; border:1px solid #e5e5e5;
  padding:10px 12px; margin:24px 0 16px;
  font-size:13px; line-height:1.5;
}
.product_page .ec-productRole__description .spec dl{
  display:grid; grid-template-columns:7em 1fr; gap:4px 0; margin:0;
}
.product_page .ec-productRole__description .spec dt{
  font-weight:600; color:#555; position:relative; padding-right:0.8em;
}
.product_page .ec-productRole__description .spec dt::after{
  content:"｜"; position:absolute; right:0; color:#999;
}
.product_page .ec-productRole__description .spec dd{
  margin:0; color:#333;
}
@media (max-width:600px){
  .product_page .ec-productRole__description .spec dl{
    grid-template-columns:6em 1fr;
    font-size:13.5px;
  }
  /* ボックス→見出しの“呼吸”をやや短めに */
  .product_page .ec-productRole__description .summary + .hd,
  .product_page .ec-productRole__description .spec + .hd,
  .product_page .ec-productRole__description .info + .hd,
  .product_page .ec-productRole__description .staff-note + .hd,
  .product_page .ec-productRole__description .notice + .hd{
    margin-top:50px !important;
  }
  /* 2カラムは縦並び */
  .product_page .ec-productRole__description .twocol{
    grid-template-columns:1fr !important; gap:12px !important;
  }
}

/* ──（必要なら残す：レガシー互換）ul > li > .label／.bar ── */
/* 旧テンプレのページが残っている場合のみ活かす。未使用なら削除可。 */
.product_page .ec-productRole__description .spec ul{ list-style:none; margin:0; padding:0; }
.product_page .ec-productRole__description .spec li{ margin:0 0 4px 0; color:#333; }
.product_page .ec-productRole__description .spec .label{
  display:inline-block; width:7em; font-weight:600; color:#555; text-align:left;
}
.product_page .ec-productRole__description .spec .bar{
  display:inline-block; padding:0 0.5em 0 0.2em; color:#999;
}