@charset "UTF-8";
/* =============================================================
   DRW column blog.css  v3.0 (single source of truth)
   Path on CMS : /assets/css/blogcss/blog.css
   Scope       : .customPage.columnMigrated  (wraps <main>)
   Target      : 90 migrated column articles (column1 - column90 etc.)
   Design      : Soft pink + beige (DRW original tone)
   ----
   Notes:
   - Selectors are prefixed with `.customPage.columnMigrated` to beat
     the CMS global `.customPage *` reset (specificity 2,0 vs 1,0).
   - Reset-sensitive properties (margin / padding / font-weight / list-style /
     font-size) carry !important on key elements as a safety net.
   - Editing this single file updates all 90 articles at once.
   ============================================================= */

/* =========================================================
   1. Base layout
   ========================================================= */
.customPage.columnMigrated,
.customPage.columnMigrated * { box-sizing: border-box; }

.customPage.columnMigrated {
  color: #3a2a2e;
  line-height: 1.85;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  background: #fffaf7;
  text-align: left !important;
}

.customPage.columnMigrated #columnNo01 {
  width: 100%;
  max-width: 960px;
  margin: 0 auto !important;
  padding: 20px 16px 40px !important;
}

.customPage.columnMigrated .columnOriginalArticle { display: block; }

.customPage.columnMigrated img,
.customPage.columnMigrated amp-img {
  max-width: 100%;
  height: auto;
  display: block;
}

.customPage.columnMigrated a {
  color: #d36a8a;
  overflow-wrap: anywhere;
  text-decoration: none;
}
.customPage.columnMigrated a:hover { text-decoration: underline; }

.customPage.columnMigrated p {
  margin: 14px 0 !important;
  font-weight: 400;
  text-align: left !important;
}

.customPage.columnMigrated ul,
.customPage.columnMigrated ol {
  margin: 14px 0 !important;
  padding: 0 !important;
}

.customPage.columnMigrated li {
  list-style: none;
}

/* =========================================================
   2. Hero image (first img before h1)
   ========================================================= */
.customPage.columnMigrated #columnNo01 > .columnOriginalArticle > img:first-child,
.customPage.columnMigrated #columnNo01 > article > img:first-child {
  width: 100%;
  border-radius: 14px;
  margin: 0 0 18px !important;
  box-shadow: 0 6px 20px rgba(211,106,138,.08);
}

/* =========================================================
   3. H1 – article title
   ========================================================= */
.customPage.columnMigrated h1 {
  font-size: 26px !important;
  font-weight: 800 !important;
  line-height: 1.5 !important;
  color: #2f2528 !important;
  text-align: left !important;
  margin: 18px 0 14px !important;
  padding: 0 0 14px !important;
  border-bottom: 3px solid #f6c7c9;
  position: relative;
}
.customPage.columnMigrated h1::after {
  content: "";
  position: absolute;
  left: 0; bottom: -3px;
  width: 120px; height: 3px;
  background: #d36a8a;
}

/* =========================================================
   4. Category / update bar (ul-box-01)
   ========================================================= */
.customPage.columnMigrated .ul-box-01 { margin: 12px 0 22px !important; }
.customPage.columnMigrated .ul-box-01 ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none;
  align-items: center;
}
.customPage.columnMigrated .ul-box-01 li {
  list-style: none;
  margin: 0 !important;
}
.customPage.columnMigrated .ul-box-01 li a {
  display: inline-block;
  padding: 4px 12px;
  background: #f9e7ea;
  color: #b6536d;
  border-radius: 20px;
  font-size: 12px !important;
  font-weight: 600 !important;
}
.customPage.columnMigrated .update-Parts000TMPL_812-01,
.customPage.columnMigrated .update-Parts000TMPL_812-02 { display: inline-block; }
.customPage.columnMigrated .update-Parts000TMPL_812-01 p,
.customPage.columnMigrated .update-Parts000TMPL_812-02 p {
  margin: 0 !important;
  font-size: 13px !important;
  color: #7d6870;
}

/* =========================================================
   5. Lead paragraphs
   ========================================================= */
.customPage.columnMigrated .lead-01,
.customPage.columnMigrated .lead-02 {
  margin: 14px 0 !important;
  font-size: 15px !important;
  line-height: 1.95 !important;
  font-weight: 400 !important;
}
.customPage.columnMigrated .lead_width-margin,
.customPage.columnMigrated .lead_width-margin-01,
.customPage.columnMigrated .lead_width-margin-02,
.customPage.columnMigrated .lead_width-margin-03 {
  padding: 0 2px;
}

/* =========================================================
   6. Marker highlight
   ========================================================= */
.customPage.columnMigrated .js-marker.marker-beige {
  background: linear-gradient(transparent 60%, #fde5c6 60%);
  padding: 0 2px;
  font-weight: 600 !important;
}

.customPage.columnMigrated .font-large  { font-size: 17px !important; }
.customPage.columnMigrated .font-weight-01 { font-weight: 800 !important; color: #d36a8a; }

/* =========================================================
   7. Anchor / next-btm
   ========================================================= */
.customPage.columnMigrated .anchor {
  display: block;
  position: relative;
  top: -70px;
  visibility: hidden;
  height: 0;
}
.customPage.columnMigrated .next-btm {
  display: inline-block;
  width: 0; height: 0;
  margin-left: 6px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid #d36a8a;
  vertical-align: middle;
}

/* =========================================================
   8. Section title boxes (title_back)
   ========================================================= */
.customPage.columnMigrated .title_back,
.customPage.columnMigrated .title_back-02 {
  margin: 28px 0 14px !important;
  padding: 14px 18px !important;
  background: linear-gradient(90deg, #fde7eb 0%, #fff4ea 100%);
  border-left: 6px solid #d36a8a;
  border-radius: 8px;
  font-weight: 700 !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  color: #7d3a50;
  text-align: left !important;
}

/* =========================================================
   9. Headings – H2 / H3
   ========================================================= */
.customPage.columnMigrated h2 {
  margin: 34px 0 20px !important;
  padding: 16px 20px !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #fff !important;
  background: linear-gradient(135deg, #d36a8a 0%, #e89ca8 100%);
  border-radius: 10px;
  line-height: 1.5 !important;
  text-align: center !important;
  box-shadow: 0 4px 12px rgba(211,106,138,.22);
}
.customPage.columnMigrated h2 span { color: #fff !important; }

.customPage.columnMigrated h3 {
  margin: 28px 0 14px !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  color: #3a2a2e !important;
  text-align: left !important;
}
.customPage.columnMigrated h3.tit-box,
.customPage.columnMigrated h3.h3-03,
.customPage.columnMigrated .tit-box.h3-03 {
  padding: 12px 16px 12px 46px !important;
  background: #fff;
  border: 2px solid #f6c7c9;
  border-radius: 10px;
  position: relative;
  color: #b6536d !important;
}
.customPage.columnMigrated h3.tit-box::before,
.customPage.columnMigrated h3.h3-03::before,
.customPage.columnMigrated .tit-box.h3-03::before {
  content: "♥";
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #d36a8a;
  font-size: 18px;
}

/* =========================================================
   10. Article images
   ========================================================= */
.customPage.columnMigrated .img-02 {
  margin: 14px auto !important;
  border-radius: 10px;
  width: 100%;
}

/* =========================================================
   11. Text buttons (texbtn-00 / texbtn-01)
   ========================================================= */
.customPage.columnMigrated .texbtn-00,
.customPage.columnMigrated .texbtn-01 {
  margin: 22px 0 !important;
  text-align: center !important;
}
.customPage.columnMigrated .texbtn-00 a,
.customPage.columnMigrated .texbtn-01 a {
  display: inline-block;
  min-width: 260px;
  padding: 14px 30px !important;
  background: linear-gradient(135deg, #d36a8a 0%, #e89ca8 100%);
  color: #fff !important;
  border-radius: 40px;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: .04em;
  box-shadow: 0 4px 14px rgba(211,106,138,.3);
  transition: transform .15s ease, box-shadow .15s ease;
  text-decoration: none !important;
}
.customPage.columnMigrated .texbtn-00 a:hover,
.customPage.columnMigrated .texbtn-01 a:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(211,106,138,.4);
}
.customPage.columnMigrated .texbtn-01 a {
  background: linear-gradient(135deg, #c29a66 0%, #d9b88a 100%);
  box-shadow: 0 4px 14px rgba(194,154,102,.3);
}
.customPage.columnMigrated .texbtn-01-text::after {
  content: " ▶";
  font-size: 12px;
  margin-left: 4px;
}

/* =========================================================
   12. Product card (ul-box-03)
   ========================================================= */
.customPage.columnMigrated .ul-box-03 {
  margin: 16px 0 32px !important;
  padding: 18px !important;
  background: #fff;
  border: 1px solid #f1d9dd;
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(211,106,138,.06);
}
.customPage.columnMigrated .ul-box-03 > a,
.customPage.columnMigrated .ul-box-03 .productCardLink {
  display: block;
  color: inherit;
  text-decoration: none !important;
}
.customPage.columnMigrated .ul-box-03 .productCardLink.is-disabled {
  pointer-events: none;
  cursor: default;
  opacity: 1;
}
.customPage.columnMigrated .ul-box-03 ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 0 !important;
  margin: 0 0 14px !important;
  list-style: none;
}
.customPage.columnMigrated .ul-box-03 ul li {
  list-style: none;
  margin: 0 !important;
}
.customPage.columnMigrated .ul-box-03 ul li img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  background: #faf5f6;
}
.customPage.columnMigrated .ul-box-03 p {
  margin: 8px 0 14px !important;
  font-size: 14px !important;
  line-height: 1.85 !important;
}
.customPage.columnMigrated .price-tax {
  color: #c0392b !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  padding: 2px 8px;
  background: #fff3f1;
  border-radius: 4px;
}

/* =========================================================
   13. Cart button
   ========================================================= */
.customPage.columnMigrated .ul-box-03 .button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 14px auto 0 !important;
  padding: 12px 24px !important;
  max-width: 320px;
  background: linear-gradient(135deg, #d36a8a 0%, #e89ca8 100%);
  color: #fff !important;
  border-radius: 40px;
  font-weight: 700 !important;
  font-size: 14px !important;
  box-shadow: 0 4px 12px rgba(211,106,138,.28);
}
.customPage.columnMigrated .ul-box-03 .button .img-01 {
  width: 20px;
  height: auto;
  filter: brightness(0) invert(1);
}

/* =========================================================
   14. Table of contents (tocBox)
   ========================================================= */
.customPage.columnMigrated .tocBox {
  margin: 28px 0 !important;
  padding: 28px 24px !important;
  background: #fff;
  border: 2px solid #f6c7c9;
  border-radius: 20px;
  box-shadow: 0 6px 20px rgba(211,106,138,.07);
}
.customPage.columnMigrated .tocBox__head {
  text-align: center !important;
  margin-bottom: 18px !important;
  padding-bottom: 14px !important;
  border-bottom: 2px dashed #f6c7c9;
}
.customPage.columnMigrated .tocBox__eyebrow {
  margin: 0 !important;
  font-size: 12px !important;
  letter-spacing: .3em;
  color: #d36a8a;
  font-weight: 700 !important;
}
.customPage.columnMigrated .tocBox__title {
  margin: 6px 0 0 !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #3a2a2e;
}
.customPage.columnMigrated .tocBox__list {
  list-style: none;
  padding: 0 !important;
  margin: 0 !important;
  counter-reset: toc;
}
.customPage.columnMigrated .tocBox__item {
  margin: 0 0 10px !important;
  list-style: none;
}
.customPage.columnMigrated .tocBox__item > a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px !important;
  background: #fffaf7;
  border-radius: 14px;
  color: #3a2a2e !important;
  font-weight: 700 !important;
  transition: background .15s ease;
  text-decoration: none !important;
}
.customPage.columnMigrated .tocBox__item > a:hover {
  background: #fde7eb;
}
.customPage.columnMigrated .tocBox__num {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #d36a8a 0%, #e89ca8 100%);
  color: #fff !important;
  border-radius: 50%;
  font-size: 14px !important;
  font-weight: 800 !important;
}
.customPage.columnMigrated .tocBox__text {
  flex: 1;
  font-size: 15px !important;
  line-height: 1.5 !important;
}
.customPage.columnMigrated .tocBox__sublist {
  list-style: none;
  margin: 8px 0 12px 54px !important;
  padding: 0 !important;
  font-size: 13px !important;
}
.customPage.columnMigrated .tocBox__sublist li {
  list-style: none;
  margin: 6px 0 !important;
  padding-left: 14px !important;
  position: relative;
  color: #6a5259;
  line-height: 1.6 !important;
}
.customPage.columnMigrated .tocBox__sublist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px; height: 2px;
  background: #d36a8a;
}
.customPage.columnMigrated .tocBox__sublist li a {
  color: #6a5259 !important;
}

/* =========================================================
   15. FAQ section
   ========================================================= */
.customPage.columnMigrated #faq {
  margin: 40px 0 !important;
  padding: 28px 20px !important;
  background: #fff;
  border: 2px solid #f6c7c9;
  border-radius: 18px;
}
.customPage.columnMigrated .accordion-container {
  margin: 0 0 12px !important;
}
.customPage.columnMigrated .google-faq-title {
  margin: 0 !important;
  padding: 16px 48px 16px 20px !important;
  background: #fde7eb;
  border: none;
  border-radius: 10px;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #b6536d !important;
  cursor: pointer;
  position: relative;
  text-align: left !important;
}
.customPage.columnMigrated .google-faq-title span {
  color: #d36a8a !important;
  margin-right: 4px;
}
.customPage.columnMigrated .google-faq-title::after {
  content: "▼";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: #d36a8a;
}
.customPage.columnMigrated .google-faq-content {
  margin: 8px 0 16px !important;
  padding: 14px 20px !important;
  background: #fffaf7;
  border-radius: 10px;
  font-size: 14px !important;
  line-height: 1.9 !important;
}
.customPage.columnMigrated .google-faq-content p {
  margin: 0 !important;
}

/* =========================================================
   16. Section ver01 (optional accordion area)
   ========================================================= */
.customPage.columnMigrated .section.ver01 {
  margin: 24px 0 !important;
  padding: 20px !important;
  background: #fff;
  border: 1px solid #f1d9dd;
  border-radius: 14px;
}

/* =========================================================
   17. Responsive (mobile)
   ========================================================= */
@media (max-width: 767px) {
  .customPage.columnMigrated #columnNo01 { padding: 16px 12px 32px !important; }
  .customPage.columnMigrated h1 { font-size: 22px !important; }
  .customPage.columnMigrated h2 { font-size: 18px !important; padding: 14px 14px !important; }
  .customPage.columnMigrated h3 { font-size: 16px !important; }
  .customPage.columnMigrated h3.tit-box,
  .customPage.columnMigrated h3.h3-03 { padding: 10px 12px 10px 38px !important; }
  .customPage.columnMigrated h3.tit-box::before,
  .customPage.columnMigrated h3.h3-03::before { left: 12px; }
  .customPage.columnMigrated .title_back,
  .customPage.columnMigrated .title_back-02 { font-size: 14px !important; padding: 12px 14px !important; }
  .customPage.columnMigrated .ul-box-03 { padding: 14px !important; }
  .customPage.columnMigrated .ul-box-03 ul { grid-template-columns: 1fr; }
  .customPage.columnMigrated .tocBox { padding: 20px 14px !important; border-radius: 16px; }
  .customPage.columnMigrated .tocBox__title { font-size: 19px !important; }
  .customPage.columnMigrated .tocBox__item > a { padding: 12px !important; gap: 10px; border-radius: 12px; }
  .customPage.columnMigrated .tocBox__num { flex: 0 0 34px; width: 34px; height: 34px; font-size: 12px !important; }
  .customPage.columnMigrated .tocBox__text { font-size: 14px !important; }
  .customPage.columnMigrated .tocBox__sublist { margin-left: 44px !important; }
  .customPage.columnMigrated .texbtn-00 a,
  .customPage.columnMigrated .texbtn-01 a { min-width: 0; width: 100%; padding: 12px 18px !important; font-size: 13px !important; }
  .customPage.columnMigrated .google-faq-title { font-size: 14px !important; padding: 14px 40px 14px 16px !important; }
  .customPage.columnMigrated .google-faq-content { padding: 12px 14px !important; font-size: 13px !important; }
  .customPage.columnMigrated .ul-box-03 .button { max-width: 100%; }
}

/* === CTA full-width PC override === */
.customPage.columnMigrated .texbtn-00 a,
.customPage.columnMigrated .texbtn-01 a {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box;
  text-align: center;
}
.customPage.columnMigrated .texbtn-00,
.customPage.columnMigrated .texbtn-01 {
  width: 100%;
}
.customPage.columnMigrated .ul-box-03 .button {
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box;
}

/* === Old article ranking section support === */
.customPage.columnMigrated .itemList3 {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 16px 0 !important;
}
.customPage.columnMigrated .itemList3 li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.customPage.columnMigrated .product-unit {
  background: #fff;
  border: 1px solid #f1d9dd;
  border-radius: 12px;
  padding: 8px;
  text-align: center;
  position: relative;
  box-shadow: 0 2px 8px rgba(211,106,138,.06);
}
.customPage.columnMigrated .product-unit.rank1 { border-color: #d4af37; }
.customPage.columnMigrated .product-unit.rank2 { border-color: #c0c0c0; }
.customPage.columnMigrated .product-unit.rank3 { border-color: #cd7f32; }
.customPage.columnMigrated .product-unit a {
  display: block !important;
  text-decoration: none !important;
  color: inherit !important;
}
.customPage.columnMigrated .product-unit .product-image img {
  width: 100% !important;
  height: auto !important;
  border-radius: 8px;
  display: block;
}
.customPage.columnMigrated .product-unit .ranknumber {
  position: absolute;
  top: 4px; left: 4px;
  margin: 0 !important;
  font-size: 12px !important;
  font-weight: 700;
  color: #d36a8a;
  z-index: 2;
}
.customPage.columnMigrated .product-unit .ranknumber img {
  width: 28px;
  height: auto;
  vertical-align: middle;
}
.customPage.columnMigrated .product-unit .catchphrase,
.customPage.columnMigrated .product-unit .name {
  margin: 8px 0 4px !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  font-weight: 500 !important;
  color: #3a2a2e !important;
  text-align: left !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.customPage.columnMigrated .pricePink {
  margin: 4px 0 0 !important;
  color: #d36a8a !important;
  font-weight: 700 !important;
  text-align: left !important;
}
.customPage.columnMigrated .pricePink span {
  display: inline-block;
}
.customPage.columnMigrated .text-overflow,
.customPage.columnMigrated .text-overflow2,
.customPage.columnMigrated .text-overflow-03 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.customPage.columnMigrated .itemList {
  margin: 16px 0 !important;
}
@media (max-width: 767px) {
  .customPage.columnMigrated .itemList3 {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .customPage.columnMigrated .product-unit {
    display: flex !important;
    align-items: stretch;
    gap: 12px;
    text-align: left;
  }
  .customPage.columnMigrated .product-unit a {
    display: flex !important;
    width: 100%;
    align-items: stretch;
    gap: 12px;
  }
  .customPage.columnMigrated .product-unit .product-image {
    flex: 0 0 110px;
    margin: 0 !important;
  }
  .customPage.columnMigrated .product-unit .product-image img {
    width: 110px !important;
  }
  .customPage.columnMigrated .product-unit .catchphrase,
  .customPage.columnMigrated .product-unit .name {
    -webkit-line-clamp: 3;
    margin: 0 !important;
    font-size: 13px !important;
  }
  .customPage.columnMigrated .product-unit .pricePink {
    margin-top: 6px !important;
    font-size: 13px !important;
  }
}

/* === Related articles section (layer_back / contents_lineup) === */
.customPage.columnMigrated .contents_lineup {
  margin: 28px 0 !important;
}
.customPage.columnMigrated .contents_lineup > h2.title_back {
  margin: 18px 0 14px !important;
}
.customPage.columnMigrated ul.layer_back {
  display: flex !important;
  align-items: center !important;
  background: #fff;
  border: 1px solid #f1d9dd;
  border-radius: 12px;
  padding: 10px !important;
  margin: 12px 0 !important;
  list-style: none !important;
  gap: 12px;
  box-shadow: 0 2px 6px rgba(211,106,138,.05);
}
.customPage.columnMigrated ul.layer_back li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.customPage.columnMigrated ul.layer_back li:first-child {
  flex: 0 0 130px;
}
.customPage.columnMigrated ul.layer_back li:last-child {
  flex: 1;
}
.customPage.columnMigrated ul.layer_back .img-box {
  display: block;
  border-radius: 8px;
  overflow: hidden;
}
.customPage.columnMigrated ul.layer_back .img-box img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
}
.customPage.columnMigrated ul.layer_back li a {
  text-decoration: none !important;
  color: #3a2a2e !important;
}
.customPage.columnMigrated ul.layer_back li:last-child p {
  margin: 0 0 6px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.customPage.columnMigrated .border-box-220823 {
  display: inline-block;
  margin: 4px 0 0 !important;
  padding: 2px 10px !important;
  background: #fde7eb;
  color: #b6536d !important;
  border-radius: 12px;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
@media (max-width: 767px) {
  .customPage.columnMigrated ul.layer_back li:first-child {
    flex: 0 0 110px;
  }
  .customPage.columnMigrated ul.layer_back li:last-child p {
    font-size: 13px !important;
    -webkit-line-clamp: 3;
  }
}

/* === SP: product-unit 価格セルの途中改行修正 (2026-04-30) === */
@media (max-width: 767px) {
  .customPage.columnMigrated .product-unit > a {
    display: grid !important;
    grid-template-columns: 110px 1fr !important;
    grid-template-areas:
      "img title"
      "img price" !important;
    column-gap: 12px !important;
    row-gap: 4px !important;
    align-items: start !important;
    width: 100% !important;
  }
  .customPage.columnMigrated .product-unit .product-image {
    grid-area: img !important;
    margin: 0 !important;
  }
  .customPage.columnMigrated .product-unit .product-image img {
    width: 100% !important;
    height: auto !important;
    border-radius: 8px !important;
  }
  .customPage.columnMigrated .product-unit .catchphrase,
  .customPage.columnMigrated .product-unit .name {
    grid-area: title !important;
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
    -webkit-line-clamp: 3 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
  .customPage.columnMigrated .product-unit .pricePink {
    grid-area: price !important;
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  /* 税別表示は取り消し線・グレー(セール価格的表現) */
  .customPage.columnMigrated .product-unit .pricePink .priceDel {
    display: inline !important;
    color: #9a8d92 !important;
    font-weight: 400 !important;
    text-decoration: line-through !important;
    margin-right: 6px !important;
    font-size: 12px !important;
  }
}

/* === product-unit 価格表示 (PC+SP共通: 税別を取り消し線で価格訴求) === */
.customPage.columnMigrated .product-unit .pricePink {
  font-weight: 700 !important;
  color: #d36a8a !important;
}
.customPage.columnMigrated .product-unit .pricePink .priceDel {
  display: inline !important;
  color: #9a8d92 !important;
  font-weight: 400 !important;
  text-decoration: line-through !important;
  margin-right: 8px !important;
  font-size: 0.85em !important;
}

/* === SP: product-unit 縦積みカード (画像左+タイトル/価格右) === */
@media (max-width: 767px) {
  .customPage.columnMigrated .product-unit > a {
    display: grid !important;
    grid-template-columns: 110px 1fr !important;
    grid-template-areas:
      "img title"
      "img price" !important;
    column-gap: 12px !important;
    row-gap: 4px !important;
    align-items: start !important;
    width: 100% !important;
  }
  .customPage.columnMigrated .product-unit .product-image {
    grid-area: img !important;
    margin: 0 !important;
  }
  .customPage.columnMigrated .product-unit .product-image img {
    width: 100% !important;
    height: auto !important;
    border-radius: 8px !important;
  }
  .customPage.columnMigrated .product-unit .catchphrase,
  .customPage.columnMigrated .product-unit .name {
    grid-area: title !important;
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
    -webkit-line-clamp: 3 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
  .customPage.columnMigrated .product-unit .pricePink {
    grid-area: price !important;
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* === 人気記事ランキング セクション (.column > dl) === */
.customPage.columnMigrated .column {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 14px !important;
  margin: 18px 0 28px !important;
  list-style: none !important;
}
.customPage.columnMigrated .column dl {
  margin: 0 !important;
  padding: 8px !important;
  background: #fff;
  border: 1px solid #f1d9dd;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(211,106,138,.06);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.customPage.columnMigrated .column dl dt {
  margin: 0 !important;
  padding: 0 !important;
  position: relative;
}
.customPage.columnMigrated .column dl dt > a {
  display: block !important;
  margin-top: 4px;
}
.customPage.columnMigrated .column dl dt > a > img {
  width: 100% !important;
  height: auto !important;
  border-radius: 8px;
  display: block;
  object-fit: cover;
  aspect-ratio: 16/10;
}
.customPage.columnMigrated .column dl .rank {
  position: absolute;
  top: -6px; left: -6px;
  margin: 0 !important;
  padding: 2px 6px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #b6536d !important;
  background: rgba(255,255,255,.92);
  border-radius: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1;
}
.customPage.columnMigrated .column dl .rank img {
  width: 22px !important;
  height: 22px !important;
  object-fit: contain;
  vertical-align: middle;
  display: inline-block;
}
.customPage.columnMigrated .column dl .name {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 11px !important;
  color: #9a8d92 !important;
  font-weight: 400 !important;
}
.customPage.columnMigrated .column dl dd {
  margin: 0 !important;
}
.customPage.columnMigrated .column dl dd.lead {
  font-size: 13px !important;
  line-height: 1.5 !important;
  font-weight: 600 !important;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.customPage.columnMigrated .column dl dd.lead a {
  color: #3a2a2e !important;
  text-decoration: none !important;
}
.customPage.columnMigrated .column dl dd.views {
  font-size: 11px !important;
  color: #9a8d92 !important;
}

/* SP: 1列縦並び・横カード化 */
@media (max-width: 767px) {
  .customPage.columnMigrated .column {
    grid-template-columns: 1fr !important;
  }
  .customPage.columnMigrated .column dl {
    display: grid !important;
    grid-template-columns: 110px 1fr !important;
    grid-template-areas:
      "img title"
      "img meta" !important;
    column-gap: 12px !important;
    row-gap: 4px !important;
  }
  .customPage.columnMigrated .column dl dt {
    grid-area: img;
  }
  .customPage.columnMigrated .column dl .name {
    order: 99;
  }
  .customPage.columnMigrated .column dl dd.lead {
    grid-area: title;
    -webkit-line-clamp: 3 !important;
  }
  .customPage.columnMigrated .column dl dd.views,
  .customPage.columnMigrated .column dl .name {
    grid-area: meta;
    display: inline !important;
    margin-right: 8px !important;
  }
}

/* === 価格バリエーション (.priceTax / .taxName / .price-02) === */
.customPage.columnMigrated .priceTax {
  color: #d36a8a !important;
  font-weight: 700 !important;
  font-size: 16px !important;
}
.customPage.columnMigrated .taxName {
  color: #9a8d92 !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  margin-left: 4px;
}
.customPage.columnMigrated .price-02 {
  color: #d36a8a !important;
  font-weight: 700 !important;
}

/* === マーカー追加色 (.marker-pink / .marker-blue) === */
.customPage.columnMigrated .js-marker.marker-pink {
  background: linear-gradient(transparent 60%, #f9c5d1 60%);
  padding: 0 2px;
  font-weight: 600 !important;
}
.customPage.columnMigrated .js-marker.marker-blue {
  background: linear-gradient(transparent 60%, #c5dcf9 60%);
  padding: 0 2px;
  font-weight: 600 !important;
}

/* === lead-03 / left-tit / content_area / table_box === */
.customPage.columnMigrated .lead-03 {
  margin: 14px 0 !important;
  font-size: 15px !important;
  line-height: 1.95 !important;
}
.customPage.columnMigrated .left-tit {
  margin: 24px 0 12px !important;
  padding: 8px 12px !important;
  background: #fde7eb;
  border-left: 4px solid #d36a8a;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #b6536d !important;
}
.customPage.columnMigrated .content_area {
  margin: 18px 0 !important;
  padding: 14px !important;
  background: #fffaf7;
  border-radius: 12px;
}
.customPage.columnMigrated .table_box {
  margin: 14px 0 !important;
  overflow-x: auto;
}
.customPage.columnMigrated .table_box table {
  width: 100%;
  border-collapse: collapse;
}
.customPage.columnMigrated .table_box th,
.customPage.columnMigrated .table_box td {
  padding: 8px 10px !important;
  border: 1px solid #f1d9dd;
  font-size: 13px !important;
}
.customPage.columnMigrated .table_box th {
  background: #fde7eb;
  color: #b6536d;
  font-weight: 700;
}

/* === TOC menu5-10 (目次が多い記事) === */
.customPage.columnMigrated .menu5,
.customPage.columnMigrated .menu6,
.customPage.columnMigrated .menu7,
.customPage.columnMigrated .menu8,
.customPage.columnMigrated .menu9,
.customPage.columnMigrated .menu10 {
  display: block;
}
.customPage.columnMigrated .menu5 .menu1-margin_btm,
.customPage.columnMigrated .menu6 .menu1-margin_btm,
.customPage.columnMigrated .menu7 .menu1-margin_btm,
.customPage.columnMigrated .menu8 .menu1-margin_btm,
.customPage.columnMigrated .menu9 .menu1-margin_btm,
.customPage.columnMigrated .menu10 .menu1-margin_btm {
  margin-bottom: 6px;
}

/* === Bootstrap icons / checkmark / text-strong / next === */
.customPage.columnMigrated .bi.bi-check::before {
  content: "✓";
  color: #d36a8a;
  font-weight: 700;
  margin-right: 4px;
}
.customPage.columnMigrated .checkmark::before {
  content: "✓";
  color: #d36a8a;
  font-weight: 700;
  margin-right: 4px;
}
.customPage.columnMigrated .text-strong {
  font-weight: 700 !important;
  color: #d36a8a !important;
}
.customPage.columnMigrated .next::after {
  content: " ▶";
  font-size: 0.85em;
  color: #d36a8a;
}

/* === clearfix === */
.customPage.columnMigrated .clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* === SizeTaguLyncA / texbtn-01-text (text variant) === */
.customPage.columnMigrated .SizeTaguLyncA {
  display: inline-block;
  margin: 0 4px;
  padding: 2px 8px;
  background: #fde7eb;
  color: #b6536d;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
}
.customPage.columnMigrated .texbtn-01-text {
  /* this is span inside .texbtn-01 a, just needs ▶ suffix handled via existing rule */
  display: inline-block;
}

/* === rank4 / rank5 / rank6 (additional ranks for .product-unit) === */
.customPage.columnMigrated .product-unit.rank4 { border-color: #b8b0a3; }
.customPage.columnMigrated .product-unit.rank5 { border-color: #a3a39c; }
.customPage.columnMigrated .product-unit.rank6 { border-color: #9c9590; }

/* === radius-none / lead_width-margin-list-tit (utility) === */
.customPage.columnMigrated .radius-none { border-radius: 0 !important; }
.customPage.columnMigrated .lead_width-margin-list-tit {
  margin: 10px 0 6px !important;
  font-weight: 700 !important;
}

/* === Fix B: Hide /_RENEWAL2019/img/ placeholder images (2026-05-19) === */
/* Crown placeholders (王冠マーク) — hide and rely on "No.X" text */
.customPage.columnMigrated img[src*="/_RENEWAL2019/img/crown"] {
  display: none !important;
}

/* Color sample placeholders → replace with colored circle via parent */
.customPage.columnMigrated img[src*="/_RENEWAL2019/img/red.jpg"],
.customPage.columnMigrated img[src*="/_RENEWAL2019/img/pink.jpg"],
.customPage.columnMigrated img[src*="/_RENEWAL2019/img/black.jpg"],
.customPage.columnMigrated img[src*="/_RENEWAL2019/img/white.jpg"],
.customPage.columnMigrated img[src*="/_RENEWAL2019/img/blue.jpg"],
.customPage.columnMigrated img[src*="/_RENEWAL2019/img/navy.jpg"],
.customPage.columnMigrated img[src*="/_RENEWAL2019/img/sax.jpg"],
.customPage.columnMigrated img[src*="/_RENEWAL2019/img/purple.jpg"],
.customPage.columnMigrated img[src*="/_RENEWAL2019/img/green.jpg"],
.customPage.columnMigrated img[src*="/_RENEWAL2019/img/yellow.jpg"],
.customPage.columnMigrated img[src*="/_RENEWAL2019/img/beige.jpg"] {
  width: 18px !important;
  height: 18px !important;
  border-radius: 50%;
  border: 1px solid #d9d3d5;
  object-fit: cover;
  background: linear-gradient(135deg, #f0e9ea, #d9d3d5);
  display: inline-block;
  vertical-align: middle;
}

/* Material sample placeholders */
.customPage.columnMigrated img[src*="/_RENEWAL2019/img/race.jpg"],
.customPage.columnMigrated img[src*="/_RENEWAL2019/img/satin.jpg"],
.customPage.columnMigrated img[src*="/_RENEWAL2019/img/chiffon.jpg"],
.customPage.columnMigrated img[src*="/_RENEWAL2019/img/organdy.jpg"],
.customPage.columnMigrated img[src*="/_RENEWAL2019/img/tulle.jpg"],
.customPage.columnMigrated img[src*="/_RENEWAL2019/img/stretch.jpg"] {
  width: 28px !important;
  height: 28px !important;
  border-radius: 4px;
  border: 1px solid #f1d9dd;
  object-fit: cover;
  background: linear-gradient(135deg, #fde7eb, #faf5f6);
  display: inline-block;
  vertical-align: middle;
}

/* === Hide ProductSubImages placeholders (sub image not uploaded) === */
/* In ul-box-03, the 2nd <li> is sub-image. Most are placeholders → hide them site-wide */
.customPage.columnMigrated .ul-box-03 ul li:nth-child(2) {
  display: none !important;
}
.customPage.columnMigrated .ul-box-03 ul {
  grid-template-columns: 1fr !important;
  max-width: 280px;
  margin: 0 auto 14px !important;
}
@media (max-width: 767px) {
  .customPage.columnMigrated .ul-box-03 ul {
    max-width: 100% !important;
  }
}