/* ============================================
   字体引入：Zen Maru Gothic（本地）
   ============================================ */
@font-face {
  font-family: "Zen Maru Gothic";
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url("/file/lady_top_1_code/fonts/ZenMaruGothic-Light.ttf") format("truetype");
}
@font-face {
  font-family: "Zen Maru Gothic";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("/file/lady_top_1_code/fonts/ZenMaruGothic-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Zen Maru Gothic";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("/file/lady_top_1_code/fonts/ZenMaruGothic-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "Zen Maru Gothic";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("/file/lady_top_1_code/fonts/ZenMaruGothic-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "Zen Maru Gothic";
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  src: url("/file/lady_top_1_code/fonts/ZenMaruGothic-Black.ttf") format("truetype");
}

/* ============================================
   颜色变量（设计 token）
   ============================================ */
:root {
  /* ---- 主色 ---- */
  --color-pink:          #ff7c7a; /* 主粉色：导航文字、装饰线等 */
  --color-white:         #ffffff;
  --color-text:          #4f4f4f; /* 次要文字：PR、说明文 */
  --color-text-dark:     #333333; /* 主文字色：标签、正文加重 */

  /* ---- 辅助主题色 ---- */
  --color-blue-light:    #6fc0e6;
  --color-yellow:        #ffeb87;
  --color-teal:          #64c9cc;

  /* ---- 边框 / 分隔 ---- */
  --color-border:        #cecece; /* 通用浅灰边框：select 等 */
  --color-border-soft:   #fdd5c0; /* 柔和粉色边框：こだわり按钮等 */
  --color-input-border:  #cccccc; /* radio/checkbox 边框 */
  --color-divider:       #f5f5f5; /* 浅灰分隔线 */

  /* ---- 背景 / 按钮 ---- */
  --color-label-bg:      #ffe0cd; /* 橙粉标签底 */
  --color-button:        #4a4a4a; /* 提交按钮深灰底 */

  /* ---- 渐变（form 外框三色 / TOP3 段背景）---- */
  --color-grad-1:        #fbe9d5;
  --color-grad-2:        #ffb19c;
  --color-grad-3:        #ff6f72;

  /* 半透明金黄（27.82%）—— 比较表第二列推荐高亮 */
  --color-yellow-soft:   #ffeb8747;

  /* 比较表自定义滚动条 */
  --color-scrollbar-track: #e6e6e6;   /* 浅灰轨道 */
  --color-scrollbar-thumb: #889da6;   /* 蓝灰 thumb */

  /* 比较表 section 背景 */
  --color-compare-bg:    #fff7f3;     /* 浅奶油粉 */

  /* ---- TOP3 区相关 ---- */
  --color-gold:          #e0c655; /* 评分星 ★ + 数字 */
  --color-card-img-bg:   #e5e5e5; /* 商品图占位灰白 */

  /* ---- 半透明分隔线（用于比较表等浅色背景上的细线）---- */
  --color-line-soft:     #4f4f4f2c; /* #4f4f4f + 17% alpha，figma 原版 */

  /* ---- 商品卡（ranking item）相关 ---- */
  --color-cta-from:      #20babf; /* CTA 渐变起 */
  --color-cta-to:        #82e8ce; /* CTA 渐变止 */
  --color-cta-shadow:    #359699; /* CTA 底部硬阴影 */
  --color-tag-bg:        #484848; /* 关键词胶囊 */
  --color-photo-bg:      #d9d9d9; /* 商品图占位 */

  /* ---- 响应式像素：基于设计稿基准宽度 2200 缩放 ---- */
  --site-division:         2200;
  --site-horizontal-ratio: calc(100vw / var(--site-division));
}

/* ============================================
   基础重置 + 通用骨架（最小必要）
   ============================================ */
* { box-sizing: border-box; }
html { margin: 0; padding: 0; overflow-x: hidden; scroll-behavior: smooth; }
body { margin: 0; padding: 0; }
body {
  font-family: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  color: #333;
  background: #fff;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; margin: 0; }
h1, h2, h3, h4, p, dl, dd { margin: 0; }
button { font-family: inherit; cursor: pointer; }

/* ============================================
   PC / SP 显示切换工具类
   ============================================ */
.pc-only { display: block; }
.sp-only { display: none; }

@media (max-width: 768px) {
  .pc-only { display: none; }
  .sp-only { display: block; }
}

/* body row: product image + comment + button */
body.no-scroll {
  overflow: hidden;
}

/* ============================================
   1. 顶部 Header
   ============================================ */
.site-header {
  background: var(--color-white);
}
.site-header__inner {
  display: flex;
  align-items: center;
  padding: 10px 100px 14px; /* PC：上 10 / 左右 100 / 下 14 */
}

.site-header__logo {
  flex: 0 0 auto;
}
.site-header__logo img {
  width: 271.86px;
  height: auto;
}

/* 导航条（PC）：3 个链接 + 2 条竖线，总宽 439px */
.site-nav {
  width: 439px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-left: auto; /* 推到右侧 */
}
.site-nav__item {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 900; /* Black */
  font-size: 20px;
  color: var(--color-pink);
  white-space: nowrap;
}
.site-nav__divider {
  display: inline-block;
  width: 1px;
  height: 20px; /* 与字体等高 */
  background: var(--color-pink);
}

/* PR 按钮：67×32 外框，离导航 40px */
.site-header__pr {
  width: 67px;
  height: 32px;
  margin-left: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 13px;
  color: var(--color-text);
  border: 1px solid var(--color-text);
  flex: 0 0 auto;
}

/* 汉堡包菜单：PC 隐藏 */
.site-header__menu {
  display: none;
}

/* SP 适配 */
@media (max-width: 768px) {
  .site-header__inner {
    padding: 8px 16px 14px; /* SP：上 8 / 左右 16 / 下 14 */
    height: 56px;
  }
  .site-header__logo img {
    width: 190px;
  }
  .site-nav {
    display: none;
  }
  .site-header__pr {
    margin-left: auto; /* PR + 汉堡包整组推到右侧（响应式推荐） */
    width: 51px;
    height: 24px;
  }
  .site-header__menu {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;                              /* 两线之间间距 5px */
    width: 28px;
    height: 20px;
    padding: 0;
    margin-left: 20px; /* PR 到汉堡包的距离 */
    background: none;
    border: none;
  }
  .site-header__menu span {
    display: block;
    width: 100%;
    height: 2px;
    background: #4F4F4F;
    border-radius: 1px;
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform-origin: center;
  }
  /* 汉堡包打开 → 两条线变 X */
  .site-header__menu[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
  }
  .site-header__menu[aria-expanded="true"] span:nth-child(2) {
    transform: translateY(-9px) rotate(-45deg);
  }

  /* SP 全屏覆盖菜单（在 header 下方铺满屏幕，链接从顶部开始排） */
  .site-nav-mobile {
    position: fixed;
    top: 56px;          /* header 高度 */
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-white);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 100;
  }
  .site-nav-mobile.is-open {
    opacity: 1;
    visibility: visible;
  }
  .site-nav-mobile__list {
    padding: 8px 0;
  }
  .site-nav-mobile__list li + li {
    border-top: 1px solid var(--color-divider);
  }
  .site-nav-mobile__link {
    display: block;
    padding: 16px 24px;
    font-family: "Zen Maru Gothic", sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: var(--color-pink);
  }
}

/* body row: product image + comment + button */
@media (min-width: 769px) {
  .site-nav-mobile { display: none; }
  body {
    min-width: 1440px;
    max-width: 1440px;
    margin: 0 auto;
  }
}

/* ============================================
   2. FV banner
   ============================================ */
.fv {
  /* 容器无需样式；图片用 margin: 0 auto 居中 */
}
.fv__img {
  display: block;
  width: 1000px;       /* PC 设计稿固定 1000 */
  height: 480px;       /* PC 设计稿固定 480 */
  max-width: 100%;     /* 屏幕窄于 1000 时不溢出 */
  margin: 0 auto;      /* 居中 */
}

@media (max-width: 768px) {
  .fv__img {
    width: 100%;       /* SP 撑满屏幕宽 */
    height: auto;      /* 按 fv.png 自身 375:235.07 比例自动 */
  }
}

/* ============================================
   3. SP TOP3 推荐区（仅 SP 显示）
   ============================================ */
.top3 {
  /* 上半段渐变（0%→50%），下半段纯 grad-3 */
  background: linear-gradient(to bottom,
    var(--color-grad-1) 0%,
    var(--color-grad-2) 20%,
    var(--color-grad-3) 50%,
    var(--color-grad-3) 100%);
  padding: 8% 0 32px;
}

/* ---- 标题区：直接用 ttl.png
   设计稿基准 375 屏宽：图 321×127 / 左 24 / 右 30 / 下 20
   全部用 % 让所有 SP 屏宽（414/430 等）按比例缩放 ---- */
.top3__title {
  margin: 0 8% 5.333% 6.4%;     /* 右 30/375=8% / 下 20/375=5.333% / 左 24/375=6.4% */
}
.top3__title img {
  display: block;
  width: 100%;                  /* 撑满父容器（父级 margin 已控制 6.4% + 8% 边距） */
  height: auto;                 /* 按图原比例自动 */
}

/* ---- 卡片列表 ---- */
.top3__cards {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0 16px;             /* 左右 16px 标准 SP 边距（待你校准） */
}

.top3-card {
  display: block;
  text-decoration: none;
}
.top3-card img {
  display: block;
  width: 100%;
  object-fit: cover;                /* 高度多/少的图自动裁切 */
}

/* 王冠：独立左列，跨头/体两行 */
.top3-card__crown {
  width: 41px;
  height: 36px;
  flex-shrink: 0;
}

/* body row: product image + comment + button */
.top3-card__main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* head：商品名 + 评分（横向） */
.top3-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.top3-card__name {
  flex: 1 1 auto;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 900;                 /* Black */
  font-size: 20px;
  color: var(--color-blue-light);   /* #6fc0e6 */
  text-decoration: underline;
}
.top3-card__name a {
  color: inherit;
  text-decoration: inherit;
}
.top3-card__rating {
  flex-shrink: 0;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-size: 24px;
  color: var(--color-gold);         /* ★ + 4.9 同色 #e0c655 */
}
.top3-card__rating-star {
  margin-right: 2px;                /* 继承父级 color */
}

/* body row: product image + comment + button */
.top3-card__body {
  display: flex;
  align-items: center;
  gap: 10px;
}
.top3-card__img {
  width: 66px;
  height: 66px;
  background: var(--color-card-img-bg);
  flex-shrink: 0;
}
.top3-card__comment {
  flex: 1 1 auto;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 900;
  font-size: 13px;
  color: var(--color-text-dark);
  line-height: 1.6;
}

/* 圆形粉色按钮 + 白色右箭头 */
.top3-card__btn {
  position: relative;
  width: 30px;
  height: 30px;
  background: var(--color-pink);
  border-radius: 50%;
  flex-shrink: 0;
}
.top3-card__btn::after {
  content: "▶";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 2px;          /* ▶ 视觉居中微调 */
  color: var(--color-white);
  font-size: 14px;
}

/* ============================================
   4. 搜索区 + 推荐 banner（PC 双栏；SP 整块隐藏 .pc-only）
   ============================================ */
.search-area {
  padding: 66px 0 112px;
  /* 上 66px：ribon 顶部到 banner 底刚好 40px
     算式：66(area padding) + 3(form border) + 25(form padding) - 54(ribon margin-top) = 40 */
}
.search-area__inner {
  width: 1000px;       /* 与 banner 等宽 */
  max-width: 100%;
  margin: 0 auto;      /* 居中 */
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

/* ---- 左：搜索表单 ---- */
.search-form {
  flex: 1 1 auto;
  border: 3px solid transparent;       /* 边框宽 3px，position inside（box-sizing border-box 已生效） */
  border-radius: 15px;
  background:
    linear-gradient(var(--color-compare-bg), var(--color-compare-bg)) padding-box,
    linear-gradient(to bottom,
      var(--color-grad-1) 0%,
      var(--color-grad-2) 40%,
      var(--color-grad-3) 100%) border-box;  /* 双背景实现渐变边框 + 保留圆角 */
  padding: 25px 12px 34px 11px;  /* 上 25 / 右 12 / 下 34（按钮离下边）/ 左 11 */
  position: relative;
}
/* 顶部"絞り込み検索" ribon 标题，悬浮在 form 顶部 */
.search-form__title {
  text-align: center;
  margin-top: -54px;     /* 与 height: 50px 配套，保持顶部刚好浮出 4px */
  margin-bottom: 14px;   /* ribon 底部 → 第一行顶部距离 */
}
.search-form__title img {
  display: inline-block;
  width: 383px;          /* Figma 素材实际尺寸 */
  height: 50px;
}

/* 每行：橙粉标签 + 单选选项 */
.search-form__row {
  display: flex;
  align-items: center;
  gap: 30px;                    /* label → 第一个选项圈距离 */
}
.search-form__row + .search-form__row {
  margin-top: 7px;              /* 行间距默认 7px */
}
/* details 内：头皮选项行 → 容量行 间距 17px（覆盖默认 7） */
.search-form__more > .search-form__row:first-of-type + .search-form__row {
  margin-top: 17px;
}
.search-form__label {
  flex: 0 0 142px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 142px;
  height: 45px;
  background: var(--color-label-bg);
  border-radius: 5px;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 900;             /* Black */
  font-size: 20px;
  color: var(--color-text-dark);
}
.search-form__row label {
  display: inline-flex;
  align-items: center;
  gap: 10px;                    /* 勾选圈 → 文字距离 */
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 500;             /* Medium */
  font-size: 16px;
  color: var(--color-text-dark);
  cursor: pointer;
}
/* 自定义 radio / checkbox：边框保持灰色，选中时仅内部出现粉色块 */
.search-form__row input[type="radio"],
.search-form__row input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 25px;
  height: 25px;
  margin: 0;
  padding: 4px;                       /* 内部留 padding，背景填 17×17 */
  border: 1px solid var(--color-input-border);  /* 灰色边框，选中状态不变 */
  background-color: transparent;
  cursor: pointer;
  flex-shrink: 0;
}
.search-form__row input[type="radio"] {
  border-radius: 50%;                 /* 圆形 */
  background-color: #fff;             /* 圆形内部固定白色 */
}
.search-form__row input[type="checkbox"] {
  border-radius: 4px;                 /* 圆角方形 */
}
.search-form__row input[type="radio"]:checked,
.search-form__row input[type="checkbox"]:checked {
  background-color: var(--color-pink);  /* 选中时内部填粉色 */
  background-clip: content-box;         /* 选中时粉色仅在 padding 内，不贴 border */
}

/* "こだわり条件を追加する" 折叠 */
.search-form__more {
  margin: 14px 0 0;             /* 上 14（与上一行距离） */
}
.search-form__more > summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  margin-bottom: 17px;          /* 展开时 summary 到内部第一行的距离 */
  background: #fff;
  border: 3px solid var(--color-border-soft);
  border-radius: 5px;
  color: var(--color-pink);
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 900;             /* Black */
  font-size: 20px;
  cursor: pointer;
  position: relative;
}
.search-form__more > summary::-webkit-details-marker { display: none; }
.search-form__more > summary::after {
  content: "−";
  position: absolute;
  right: 16px;
  font-size: 18px;
}
.search-form__more:not([open]) > summary::after { content: "+"; }

/* 含 select 的行：label → select 间距 10px（覆盖 row 默认 30px） */
.search-form__row:has(select) {
  gap: 10px;
}

/* select 下拉 */
.search-form select {
  width: 390px;
  height: 45px;                                /* 与 label 等高 */
  padding: 0 47px 0 20px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 23'><polygon points='3,7 20,7 11.5,16' fill='%23ff7c7a'/></svg>") no-repeat right 14px center;
  background-size: 23px 23px;                  /* 小三角 23×23 */
  color: var(--color-text-dark);
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 500;                            /* Medium */
  font-size: 16px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

/* 提交按钮 */
.search-form__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 335px;
  height: 50px;
  margin: 20px auto 0;
  padding: 0;
  background: var(--color-button);
  color: var(--color-white);
  border: none;
  border-radius: 30px;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
}

/* ---- 右：推荐 banner ---- */
.side-banners {
  flex: 0 0 232px;       /* 取最宽子元素（No.1 标签 232px） */
  display: flex;
  flex-direction: column;
  align-items: center;   /* 230 banner 在 232 容器内居中 */
}
.side-banners__label img {
  display: block;        /* block 消除 inline-block 的 baseline gap */
  width: 232px;          /* Figma 素材实际尺寸 */
  height: 79px;
  margin: 0 auto;        /* 居中（容器 232 = 图片 232，实际无偏移） */
}
.side-banner {
  display: block;
}
.side-banner img {
  display: block;
  width: 230px;          /* 直角 230×230 */
  height: 230px;
}
/* 间距：No.1 标签 → 第一个 banner = 6px；banner 之间 = 10px */
.side-banners__label + .side-banner { margin-top: 6px; }
.side-banner + .side-banner { margin-top: 10px; }

/* ============================================
   5. 失敗しない育毛剤比較表
   ============================================ */
.compare {
  padding: 0 0 109px;
  margin-top: 30px;
  display: flow-root;
  background: var(--color-compare-bg);
}

/* 内层容器：整体上提，让标题气泡跨过 section 上边线 */
.compare__inner {
  margin-top: -30px;
}

/* 标题 ttl.png 居中（使用图片固有尺寸 521x154） */
.compare__title {
  margin: 0 auto 24px;
  text-align: center;
}
.compare__title img {
  display: inline-block;
  width: 521px;
  height: 154px;
  max-width: 100%;
}

/* 表格容器：跟 banner 等宽 1000，横向滚动 + 自定义滚动条样式 */
.compare__table-wrap {
  position: relative;                  /* 给整列渐变伪元素做定位参考 */
  width: 1000px;
  max-width: 100%;
  margin: 0 auto;
  overflow-x: auto;
  padding-bottom: 20px;
}
/* 第一列贯通渐变：用真 div + position: sticky，横向滚动时不跟着表走 */
.compare__col-bg {
  position: sticky;
  left: 0;
  top: 0;
  width: 191px;                        /* 与第一列 col 同宽 */
  height: 909px;                       /* 与 PC 表格高度一致 */
  margin-bottom: -909px;               /* 不占垂直空间，让表格紧贴顶 */
  background-image: linear-gradient(to bottom,
    var(--color-grad-1) 0%,
    var(--color-grad-2) 40%,
    var(--color-grad-3) 100%);
  z-index: 1;
  pointer-events: none;
}
/* 滚动条：轨道 1000×31 浅灰、thumb 300×23 蓝灰圆角 18 */
.compare__table-wrap::-webkit-scrollbar {
  height: 31px;
}
/* 去掉左右箭头按钮 */
.compare__table-wrap::-webkit-scrollbar-button:horizontal:start:decrement,
.compare__table-wrap::-webkit-scrollbar-button:horizontal:end:increment,
.compare__table-wrap::-webkit-scrollbar-button:horizontal:start:increment,
.compare__table-wrap::-webkit-scrollbar-button:horizontal:end:decrement {
  display: block;
  width: 0;
  height: 0;
  background: transparent;
}
.compare__table-wrap::-webkit-scrollbar-track {
  background: var(--color-scrollbar-track);
}
.compare__table-wrap::-webkit-scrollbar-thumb {
  background: var(--color-scrollbar-thumb);
  border-radius: 18px;
  border: 4px solid transparent;       /* 上下各 4px 透明 → thumb 视觉高 23px */
  background-clip: content-box;
}
/* Firefox 兼容（用 @supports 隔离，不让 Chrome 切到 modern 模式覆盖 webkit 自定义）*/
@supports not selector(::-webkit-scrollbar) {
  .compare__table-wrap {
    scrollbar-color: var(--color-scrollbar-thumb) var(--color-scrollbar-track);
    scrollbar-width: thin;
  }
}

.compare__table {
  width: max-content;
  border-collapse: collapse;
  font-family: "Zen Maru Gothic", sans-serif;
  background: var(--color-white);
  position: relative;
}
/* 表格高度自适应，不再固定 909（避免内容超出后被截） */

/* 单元格通用：figma 半透明 border + 响应式 1px */
.compare__table th,
.compare__table td {
  width: 210px;                  /* 商品列宽（设计稿规格）*/
  padding: 15px;
  text-align: center;
  vertical-align: middle;
  border: calc(1 * var(--site-horizontal-ratio)) solid var(--color-line-soft);
  font-size: 13px;
  color: var(--color-text-dark);
}

/* 第一列 sticky：整列连续渐变
   每个 cell 用同一渐变图，background-size/position 由 JS 按 cell 在 table 中的偏移计算，
   拼起来就是整列连续渐变 */
.compare__table th:first-child {
  position: sticky;
  left: 0;
  z-index: 2;                          /* 高于 wrap::before 渐变层（z-index:1） */
  width: 191px;
  background: transparent;             /* 背景由 wrap::before 整列渐变提供，cell 透明 */
  /* 透明 cell 上原半透明 border 看不清，用 box-shadow 画白色半透明分隔线 */
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.6);
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 900;
  font-size: 16px;
  color: var(--color-white);
}

/* 第二列整列（thead 的 th + tbody 的 td，统一第 2 个 child）：半透明金黄 */
.compare__table tr > *:nth-child(2) {
  background: var(--color-yellow-soft);
}

/* product cell layout */
.compare__product {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.compare__product-crown {
  order: 1;
  width: auto;
  height: 36px;
}
.compare__product-img {
  order: 2;
  width: 165px;
  height: 165px;
  background: var(--color-card-img-bg);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;                /* 容器现在是 a，去下划线 */
}
.compare__product-img img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.compare__product-name {
  order: 3;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--color-blue-light);     /* #6FC0E6 */
}
.compare__product-name a {
  color: inherit;
  text-decoration: none;
}
.compare__product-name a:hover {
  text-decoration: underline;
}


/* tbody 所有 td（不含第一列 th 标签）：12px */
.compare__table tbody td {
  font-weight: 900;
  font-size: 12px;
  color: var(--color-pink);
}

/* 标记类：PC 不换行（隐藏 br），SP 换行（显示 br）
   用法：在需要此行为的 th 上加 class="compare__th-break" */
.compare__th-break br {
  display: none;
}
@media (max-width: 768px) {
  .compare__th-break br {
    display: inline;
  }
}

/* 最后一行（公式サイト 按钮行）上下 padding 减小 */
.compare__table tbody tr:last-child > th,
.compare__table tbody tr:last-child > td {
  padding-top: 8px;
  padding-bottom: 8px;
}

/* "公式サイト" 按钮（用 btn.png 切图） */
/* 比较表 公式サイト 按钮：跟商品卡 CTA 同款绿色渐变 + 闪光特效，缩小版 */
.compare__btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 150px;
  height: 44px;
  padding: 0 16px;
  border-radius: 22px;
  background: linear-gradient(to bottom,
    var(--color-cta-from) 0%,
    var(--color-cta-to) 100%);
  box-shadow: 0 4px 0 var(--color-cta-shadow);
  color: var(--color-white);
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 0.7px;
  text-decoration: none;
}
/* 复用 @keyframes btn-slash 的闪光带 */
.compare__btn::before {
  content: '';
  position: absolute;
  top: -180px;
  left: 0;
  width: 20px;
  height: 100%;
  background-color: #fff;
  animation: btn-slash 1.5s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
.compare__btn-text {
  position: relative;
  z-index: 1;
}
.compare__btn-arrow {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 7px solid var(--color-white);
}
@media (max-width: 768px) {
  .compare__btn {
    min-width: 0;
    width: 100%;
    height: 36px;
    padding: 0 8px;
    font-size: 12px;
    gap: 4px;
    border-radius: 18px;
    box-shadow: 0 4px 0 var(--color-cta-shadow);
  }
  .compare__btn-arrow {
    right: 7px;
    border-top-width: 4px;
    border-bottom-width: 4px;
    border-left-width: 6px;
  }
}

/* "※横スクロールできます。" 提示文字（figma 规格：Noto Sans JP Bold 18px 0.9px 字距 左对齐） */
.compare__note {
  width: 1000px;
  max-width: 100%;
  margin: 20px auto 0;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--color-text);
  letter-spacing: 0.9px;
  text-align: left;
}

/* ============================================
   SP 适配（设计稿 375 基准）
   ============================================ */
@media (max-width: 768px) {
  /* section：标题气泡跨过上边线，逻辑同 PC，数值按 SP 缩放 */
  .compare {
    padding: 0 0 60px;
    margin-top: 66px;            /* 高度 = SP 标题图 102 / 2 */
  }
  .compare__inner {
    margin-top: -20px;
  }
  /* 标题图：左右 16 留白后铺满，等比缩小（521×154 → ~343×102） */
  .compare__title {
    margin: 0 auto 16px;
    padding: 0 16px;
  }
  .compare__title img {
    width: 89%;
    height: auto;
  }
  /* 表格容器：左右各 16 留白，横向滚动 */
  .compare__table-wrap {
    width: auto;
    margin: 0 16px;
    padding-bottom: 12px;
  }
  /* 表格本体：宽度由列宽相加决定，触发横滚 */
  .compare__table {
    width: max-content;
    height: auto;
  }
  /* 通用 cell：缩小 padding / 字号 */
  .compare__table th,
  .compare__table td {
    width: 170px;                /* 商品列 SP 宽（加宽避免日文逐字换行）*/
    padding: 10px 8px;
    font-size: 12px;
    letter-spacing: 0.3px;
  }
  /* 第一列 label：narrower + 字号小 */
  .compare__table th:first-child {
    width: 62px;
    padding: 10px 0;
    font-size: 12px;
    letter-spacing: 0;
    line-height: 1.3;
  }
  /* SP：渐变层宽度同步 + 高度估算（无 fixed 909） */
  .compare__col-bg {
    width: 62px;
    height: 800px;
    margin-bottom: -800px;
  }
  /* 商品图占位：SP 缩小 */
  .compare__product-img {
    width: 90px;
    height: 90px;
  }
  /* 商品名 / 评分文字：SP 字号 */
  .compare__product-name {
    font-size: 12px;
  }
  /* 滚动条：SP 细一点 */
  .compare__table-wrap::-webkit-scrollbar {
    height: 18px;
  }
  /* note 文字：SP 缩小 */
  .compare__note {
    width: auto;
    margin: 12px 16px 0;
    font-size: 12px;
    letter-spacing: 0.4px;
  }
}

/* ============================================
   6-8. 説明区
   ============================================ */
.explain {
  width: 1000px;
  max-width: calc(100% - 40px);
  margin: 72px auto 0;
  color: var(--color-text-dark);
}

.explain--1 {
  margin-top: 82px;
}

.explain__title {
  width: 521px;
  max-width: 100%;
  margin: 0 auto 24px;
}

.explain__title img,
.explain__visual img {
  width: 100%;
  height: auto;
}

.explain__visual {
  width: 760px;
  max-width: 100%;
  margin: 0 auto 24px;
}

.explain--2,
.explain--3 {
  display: grid;
  grid-template-columns: 420px minmax(0, 1fr);
  gap: 34px;
  align-items: center;
}

.explain--2 .explain__visual,
.explain--3 .explain__visual {
  width: 100%;
  margin: 0;
}

.explain__text {
  font-size: 18px;
  line-height: 1.95;
}

.explain__text p + p {
  margin-top: 18px;
}

.explain__list {
  margin-top: 18px;
  padding-left: 1.4em;
  list-style: decimal;
  color: var(--color-pink);
  font-weight: 700;
}

.explain__list li + li {
  margin-top: 8px;
}

/* ============================================
   説明区 1 专用样式（Figma node 2-930 / SP 36-620）
   - PC 736 / SP 335 内宽
   - 标题渐变条 + 4 段文 + 3 个 visual 卡
   - 块间 gap 15px（覆盖 .explain 通用规则）
   ============================================ */
.explain--1 {
  width: 736px;
  max-width: calc(100% - 40px);
  display: flex;
  flex-direction: column;
  gap: 15px;
  color: var(--color-text);
}

.explain--1 .explain__title,
.explain--1 .explain__visual {
  width: 100%;
  margin: 0;
}
.explain--1 .explain__title img,
.explain--1 .explain__visual img {
  width: 100%;
  height: auto;
}

.explain--1 .explain__text {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.8px;
  color: var(--color-text);
}

/* 段间空行：figma 用空段落占 1 行高，等价于 1.6em */
.explain--1 .explain__text p + p {
  margin-top: 1.6em;
}

/* 强调短句：Zen Maru Gothic Black + 主粉色 */
.explain--1 .is-strong {
  font-weight: 900;
  color: var(--color-pink);
}

/* SP 适配（设计稿 375 基准 / 内容宽 335） */
@media (max-width: 768px) {
  .explain--1 {
    width: auto;
    max-width: none;
    margin: 60px 20px 0;
  }
}

/* ============================================
   9. ranking banner
   ============================================ */
.ranking-banner {
  width: 1000px;
  max-width: calc(100% - 40px);
  margin: 80px auto 56px;
}

.ranking-banner img {
  width: 100%;
  height: auto;
}

/* ============================================
   10. ランキング商品列表
   ============================================ */
.ranking-list {
  width: 1000px;
  max-width: calc(100% - 40px);
  margin: 0 auto 90px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);  /* 必须显式 minmax(0,1fr)，否则隐式列按 max-content 撑到 1000 */
  gap: 64px;
}

/* ============================================
   商品卡 product-card（Figma 36-694 / 2-173）
   分步写：① 标题条 → ⑦ CTA
   ============================================ */
.product-card {
  width: 1000px;
  max-width: 100%;
  min-width: 0;                  /* grid 子项默认 min-width: auto 会被内容撑到 1000，必须显式归 0 */
  background: var(--color-compare-bg);
  border-radius: 15px;
  overflow: hidden;
}

/* ① 顶部渐变标题条：王冠 + 商品名 */
.product-card__head {
  position: relative;
  height: 75px;
  display: flex;
  align-items: center;
  padding: 0 40px;
  gap: 19px;
  background: linear-gradient(to bottom,
    var(--color-grad-1) 0%,
    var(--color-grad-2) 40.385%,
    var(--color-grad-3) 100%);
}
.product-card__rank {
  width: 57px;
  height: 50px;
  flex: 0 0 auto;
}
.product-card__name {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 900;
  font-size: 28px;
  color: var(--color-white);
  letter-spacing: 1.4px;
  margin: 0;
}

/* card body：内容区统一内边距 */
.product-card__body {
  padding: 20px 39px 60px;
}

/* ② 总合评价（284×40 白底胶囊条：标签 / 5 颗星 / 分数） */
.product-card__rating {
  width: 284px;
  height: 40px;
  background: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 11px;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 900;
  font-size: 18px;
  letter-spacing: 0.9px;
}
.product-card__rating-label {
  color: var(--color-text-dark);
}
.product-card__rating-stars {
  color: var(--color-gold);
  font-size: 22px;
  letter-spacing: 2px;
  line-height: 1;
}
.product-card__rating-score {
  color: var(--color-pink);
}

/* ③ 商品标语：32px black，含粉色强调（.is-strong） */
.product-card__catch {
  margin: 30px 0 0;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 900;
  font-size: 32px;
  line-height: 1.6;
  letter-spacing: 1.6px;
  color: var(--color-text);
}
.product-card__catch .is-strong {
  color: var(--color-pink);
}

/* ④ 商品图（灰底占位 736×390） + 左右翻页箭头（50×50 圆） */
.product-card__photo {
  margin: 30px 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 41px;
}
.product-card__photo-img {
  flex: 0 0 auto;
  width: 736px;
  height: auto;                             /* 高度跟随图片 */
  background: var(--color-white);
  border-radius: 15px;
}
.product-card__photo-arrow {
  flex: 0 0 auto;
  width: 50px;
  height: 50px;
  padding: 0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  /* 与标题条同色系的桃粉渐变 */
  background: linear-gradient(to bottom,
    var(--color-grad-1) 0%,
    var(--color-grad-2) 50%,
    var(--color-grad-3) 100%);
}
/* 白色实心三角形（border-trick）：默认指向左 = prev
   注意：三角形的视觉重心在 1/3 处，不在 bounding box 中心。
   bounding box 13×18 → 重心 (8.67, 9)px (prev) / (4.33, 9)px (next)
   用绝对像素 translate 把重心对齐到按钮中心 */
.product-card__photo-arrow::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-right: 13px solid var(--color-white);
  transform: translate(-8.67px, -9px);
}
.product-card__photo-arrow--next::before {
  border-right: none;
  border-left: 13px solid var(--color-white);
  transform: translate(-4.33px, -9px);
}

/* ⑤ 关键词标签：深灰胶囊条 */
.product-card__tags {
  margin: 30px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.product-card__tag {
  padding: 5px 20px;
  background: var(--color-tag-bg);
  border-radius: 20px;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 900;
  font-size: 16px;
  letter-spacing: 0.8px;
  color: var(--color-white);
  white-space: nowrap;
}

/* ⑥ 6 项规格表：3 行 × 2 列 grid */
.product-card__specs {
  margin: 30px 0 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 20px;
}
.product-card__spec {
  display: flex;
  height: 100px;
}
.product-card__spec-label {
  flex: 0 0 164px;
  background: var(--color-pink);
  color: var(--color-white);
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 900;
  font-size: 16px;
  letter-spacing: 0.8px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 0;
}
/* PC 单行显示（隐藏 br），SP 强制换行 */
.product-card__spec-label br {
  display: none;
}
.product-card__spec-value {
  flex: 1;
  background: var(--color-white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 900;
  font-size: 16px;
  letter-spacing: 0.8px;
  color: var(--color-text-dark);
  margin: 0;
  padding: 8px 12px;
  line-height: 1.4;
  box-sizing: border-box;
}
/* value 内嵌样式钩子 */
.product-card__spec-value .is-strong {
  color: var(--color-pink);
}
.product-card__spec-value.is-pink,
.product-card__spec-value .is-pink {
  font-size: 18px;
  letter-spacing: 0.9px;
  color: var(--color-pink);
}
.product-card__spec-value .is-note {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.4px;
  color: var(--color-text);
  margin-top: 2px;
}
.product-card__spec-value small {
  font-size: 0.75em;
}

/* value 含 ◎ 双圆标记：marker 在上方居中，text 在下方居中（沿用父级 flex-direction: column） */
.product-card__spec-value.has-mark {
  gap: 2px;
}
.product-card__spec-mark {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  /* 双环：内环 6-9px，外环 14-17px，中间和中心白色 */
  background: radial-gradient(
    circle,
    var(--color-white) 0 6px,
    var(--color-pink) 6px 9px,
    var(--color-white) 9px 14px,
    var(--color-pink) 14px 17px
  );
}
.product-card__spec-text {
  text-align: center;
}

/* ⑦ 绿色 CTA 按钮：渐变 + 底部硬阴影 + 副标 + 主标 + 右侧箭头 */
.product-card__cta {
  position: relative;
  overflow: hidden;                        /* 闪光特效裁圆角 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 550px;
  max-width: 100%;
  height: 80px;
  margin: 30px auto 0;
  border-radius: 40px;
  background: linear-gradient(to bottom,
    var(--color-cta-from) 0%,
    var(--color-cta-to) 100%);
  box-shadow: 0 6px 0 var(--color-cta-shadow);
  color: var(--color-white);
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 900;
  text-decoration: none;
}
.product-card__cta-sub {
  font-size: 16px;
  letter-spacing: 0.8px;
}
.product-card__cta-main {
  font-size: 22px;
  letter-spacing: 1.1px;
  margin-top: 4px;
}
/* CTA 按钮循环闪光特效（旧站 .btn-slash 移植）：每 3 秒一道斜白光斑掠过 */
.product-card__cta::before {
  content: '';
  position: absolute;
  top: -180px;
  left: 0;
  width: 30px;
  height: 100%;
  background-color: #fff;
  animation: btn-slash 1.5s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
.product-card__cta-sub,
.product-card__cta-main {
  position: relative;
  z-index: 1;                              /* 文字浮在闪光之上 */
}
.product-card__cta-arrow {
  z-index: 1;                              /* 保留原 absolute，只提升 z-index */
}
@keyframes btn-slash {
  0%   { transform: scale(0) rotate(45deg); opacity: 0; }
  80%  { transform: scale(0) rotate(45deg); opacity: 0.5; }
  81%  { transform: scale(4) rotate(45deg); opacity: 1; }
  100% { transform: scale(50) rotate(45deg); opacity: 0; }
}

/* 右侧白色箭头：border-trick 三角形指向右 */
.product-card__cta-arrow {
  position: absolute;
  top: 50%;
  right: 30px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 11px solid var(--color-white);
  transform: translateY(-50%);
}

/* ⑧⑨ 边框卡通用：白底圆角 + 顶部色条标题 + 内容区 */
.product-card__box {
  margin: 30px 0 0;
  background: var(--color-white);
  border: 2px solid;
  border-radius: 15px;
  overflow: hidden;
}
.product-card__box--pink {
  border-color: var(--color-pink);
}
.product-card__box--teal {
  border-color: var(--color-teal);
}
.product-card__box-title {
  margin: -2px -2px 0;          /* 顶部条贴边盖住 border */
  padding: 8px 0;
  text-align: center;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 900;
  font-size: 20px;
  letter-spacing: 1px;
  color: var(--color-white);
}
.product-card__box--pink .product-card__box-title {
  background: var(--color-pink);
}
.product-card__box--teal .product-card__box-title {
  background: var(--color-teal);
}

/* ⑧ おすすめポイント 列表：每行带粉色 ✓ check */
.product-card__highlights {
  margin: 16px 50px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 900;
  font-size: 20px;
  letter-spacing: 1px;
  color: var(--color-text-dark);
  line-height: 1.4;
}
.product-card__highlights li {
  position: relative;
  padding-left: 38px;
}
.product-card__highlights li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 14px;
  height: 7px;
  border-left: 3px solid var(--color-pink);
  border-bottom: 3px solid var(--color-pink);
  transform: rotate(-50deg);
}
.product-card__highlights .is-strong {
  color: var(--color-pink);
}

/* ⑨ 編集部のコメント 文本：行高 1.6，青色强调 */
.product-card__comment {
  margin: 16px 49px;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.8px;
  color: var(--color-text-dark);
}
.product-card__comment .is-teal {
  font-weight: 900;
  color: var(--color-teal);
}

/* ⑪ ※注释：12px Noto Sans Medium */
.product-card__notes {
  margin: 30px 0 0;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.6px;
  color: var(--color-text);
}

/* ⑫ 口コミ・評判 标题 + 底部分隔线 */
.product-card__reviews-title {
  margin: 30px 0 0;
  padding-bottom: 16px;
  border-bottom: 2px dashed #4F4F4F;
  text-align: center;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 900;
  font-size: 28px;
  letter-spacing: 1.4px;
  line-height: 1.6;
  color: var(--color-text);
}

/* ⑬ 口コミ卡：左右翻页 + 卡片（avatar + meta + 长评论） */
.product-card__review-wrap {
  margin: 30px 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 41px;
}
.product-card__review {
  flex: 0 0 auto;
  width: 736px;
  max-width: 100%;
  background: var(--color-white);
  border-radius: 15px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
  padding: 20px 33px;
  display: grid;
  grid-template-columns: 84px 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  row-gap: 10px;
  font-family: "Zen Maru Gothic", sans-serif;
  color: var(--color-text);
}
.product-card__review-avatar {
  grid-column: 1;
  grid-row: 1;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: transparent;            /* 有图就靠 img 自己显示，不用灰底 */
  object-fit: cover;
  display: block;
}
.product-card__review-meta {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.product-card__review-name {
  font-weight: 900;
  font-size: 18px;
  letter-spacing: 0.9px;
  line-height: 1.2;
}
.product-card__review-stars {
  font-size: 22px;
  letter-spacing: 2px;
  line-height: 1;
  color: var(--color-gold);
}
.product-card__review-text {
  grid-column: 1 / -1;
  grid-row: 2;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.8px;
}

/* ⑭ キャンペーン 卡：920 宽，高度跟随内容 */
.product-card__campaign {
  position: relative;
  width: 920px;
  max-width: 100%;
  height: auto;                            /* 跟随内容；图片高度变化时整卡跟着变 */
  padding: 88px 0 30px;                    /* 顶部 88px 留给粉条+图片重叠区，底部 30px */
  margin: 30px auto 0;
  background: var(--color-white);
  border-radius: 15px;
}
/* 顶部粉条 169 高，覆盖整个宽度 */
.product-card__campaign-head {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 169px;
  background: var(--color-pink);
  border-radius: 15px 15px 0 0;
}
/* 标题：水平居中，top:27 */
.product-card__campaign-title {
  position: absolute;
  top: 27px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 900;
  font-size: 28px;
  line-height: 1.6;
  letter-spacing: 1.4px;
  color: var(--color-white);
  white-space: nowrap;
}
/* 装饰斜杠 20.5×28.5 白色，左 \ 右 / 朝内 */
.product-card__campaign-deco {
  position: absolute;
  top: 39px;
  width: 20.5px;
  height: 28.5px;
  background: var(--color-white);
}
.product-card__campaign-deco--left {
  left: 238px;
  clip-path: polygon(0 0, 30% 0, 100% 100%, 70% 100%);
}
.product-card__campaign-deco--right {
  left: 652.5px;
  clip-path: polygon(70% 0, 100% 0, 30% 100%, 0 100%);
}
/* 商品图占位：宽度固定，高度跟随图片，叠在粉条上 */
.product-card__campaign-img {
  position: relative;
  margin: 0 auto;
  width: 820px;
  max-width: 100%;
  height: auto;                            /* 跟随 img 自然高度 */
  background: #ececec;
  border: 4px solid var(--color-white);
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.15);
  box-sizing: border-box;
  z-index: 1;                              /* 浮在粉条之上 */
}
/* 注释文本：图片下方 20px */
.product-card__campaign-note {
  position: relative;
  margin: 20px auto 0;
  padding: 0 49px;                         /* 左右 49px 留白 */
  width: 100%;
  max-width: 920px;
  box-sizing: border-box;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.8px;
  color: var(--color-text-dark);
}
.product-card__campaign-note .is-strong {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 900;
  color: var(--color-pink);
}
/* .product-card__campaign-body 仅作 SP 容器，PC 下不需要包裹效果 */
.product-card__campaign-body { display: contents; }

/* SP 适配 */
@media (max-width: 768px) {
  .product-card__head {
    height: 60px;
    padding: 0 14px;
    gap: 12px;
  }
  .product-card__rank {
    width: 38px;
    height: 33px;
  }
  .product-card__name {
    font-size: 20px;
    letter-spacing: 1px;
  }
  .product-card__body {
    padding: 14px 14px 40px;
  }
  .product-card__rating {
    width: 100%;        /* figma：占满 body 内宽 */
    height: 40px;
    padding: 0 12px;
  }
  .product-card__catch {
    margin-top: 20px;
    font-size: 22px;
    letter-spacing: 1.1px;
  }
  /* SP 商品图：375 viewport 下 305 宽，高度跟随图片 */
  .product-card__photo {
    position: relative;
    margin: 20px auto 0;
    gap: 0;
    width: 305px;
    max-width: 100%;
  }
  .product-card__photo-img {
    flex: 1 1 auto;
    width: 100%;
    height: auto;
  }
  .product-card__photo-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 35px;
    height: 35px;
  }
  .product-card__photo-arrow--prev { left: -17.5px; }   /* 一半叠在图上，一半在图外 */
  .product-card__photo-arrow--next { right: -17.5px; }
  /* SP：三角形等比缩小，重心 1/3 规则同步 */
  .product-card__photo-arrow::before {
    border-top-width: 7px;
    border-bottom-width: 7px;
    border-right-width: 10px;
    transform: translate(-6.67px, -7px);
  }
  .product-card__photo-arrow--next::before {
    border-left-width: 10px;
    transform: translate(-3.33px, -7px);
  }
  .product-card__tags {
    margin-top: 20px;
    gap: 5px;
  }
  .product-card__tag {
    font-size: 12px;
    letter-spacing: 0.6px;
  }
  .product-card__specs {
    margin-top: 20px;
    gap: 10px 8px;
  }
  .product-card__spec {
    height: 76px;
  }
  .product-card__spec-label {
    flex: 0 0 51px;
    font-size: 12px;
    letter-spacing: 0.6px;
    line-height: 1.2;
  }
  .product-card__spec-label br {
    display: inline;       /* SP 强制换行 */
  }
  .product-card__spec-value {
    font-size: 12.2px;
    letter-spacing: 0.6px;
  }
  .product-card__spec-value.is-pink,
  .product-card__spec-value .is-pink {
    font-size: 13.75px;
    letter-spacing: 0.7px;
  }
  .product-card__spec-value .is-note {
    font-size: 9px;
    letter-spacing: 0.3px;
  }
  .product-card__spec-value.has-mark {
    gap: 6px;
    padding: 0 6px;
  }
  .product-card__spec-mark {
    width: 26px;
    height: 26px;
    background: radial-gradient(
      circle,
      var(--color-white) 0 5px,
      var(--color-pink) 5px 7px,
      var(--color-white) 7px 11px,
      var(--color-pink) 11px 13px
    );
  }
  /* ⑧⑨ SP */
  .product-card__box {
    margin-top: 20px;
  }
  .product-card__box-title {
    padding: 5px 0;          /* figma：色条 38px 高 */
    font-size: 18px;
    letter-spacing: 0.9px;
  }
  .product-card__highlights {
    margin: 12px 18px;
    gap: 8px;                /* figma：间距 8px */
    font-size: 15px;
    letter-spacing: 0.75px;
  }
  .product-card__highlights li {
    padding-left: 24px;
  }
  .product-card__highlights li::before {
    width: 10px;
    height: 5px;
    border-left-width: 2px;
    border-bottom-width: 2px;
  }
  .product-card__comment {
    margin: 12px 16px;
    font-size: 15px;
    letter-spacing: 0.75px;
  }
  .product-card__notes {
    margin-top: 20px;
  }
  .product-card__reviews-title {
    margin-top: 24px;
    padding-bottom: 10px;
    font-size: 20px;
    letter-spacing: 1px;
  }
  .product-card__review-wrap {
    position: relative;                    /* 给绝对定位的左右按钮做参考 */
    margin-top: 20px;
    gap: 0;
  }
  /* 评论卡左右按钮：比商品图箭头更多叠在卡内 */
  .product-card__review-wrap .product-card__photo-arrow--prev { left: -8px; }
  .product-card__review-wrap .product-card__photo-arrow--next { right: -8px; }
  .product-card__review {
    flex: 1 1 auto;
    width: auto;
    padding: 23px 29px;
    column-gap: 8px;
    row-gap: 8px;
  }
  .product-card__review-text {
    font-size: 15px;
    letter-spacing: 0.75px;
  }
  .product-card__review-name {
    font-size: 18px;
    letter-spacing: 0.9px;
  }
  /* SP：CTA 文案/箭头位置微调 */
  .product-card__cta {
    width: 100%;
    margin-top: 20px;
  }
  .product-card__cta-arrow {
    right: 16px;
  }
  /* SP：取消绝对定位，改为流式 */
  .product-card__campaign {
    width: auto;
    height: auto;
    margin-top: 20px;
    padding: 0;                            /* SP：去掉 PC 88/0/30 padding */
  }
  .product-card__campaign-head {
    position: relative;
    height: 169px;                         /* SP 粉条高度跟 PC 一致 */
    padding: 27px 32px 0;                  /* top 27px 让全部内容（title + decos）一起下移 */
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
    border-radius: 15px 15px 0 0;
  }
  .product-card__campaign-title {
    position: static;
    transform: none;
    white-space: normal;
    text-align: center;
    font-size: 22px;
    line-height: 1.4;
    letter-spacing: 1.1px;
  }
  .product-card__campaign-deco {
    position: static;
    flex: 0 0 auto;
    width: 18px;
    height: 28px;                          /* 略加长 */
    margin-top: 6px;                       /* 往下挪一点跟标题第一行对齐 */
  }
  .product-card__campaign-body {
    display: block;
    padding: 0 16px 20px;
    margin-top: -75px;                     /* SP：图片往上多叠一些 */
    position: relative;
    z-index: 1;
  }
  .product-card__campaign-img {
    position: relative;
    width: 100%;
    height: auto;
    margin: 0;
  }
  .product-card__campaign-note {
    position: static;
    width: auto;
    margin: 16px 0 0;
    padding: 0;                            /* SP：去掉 PC 的 49px 左右 padding */
    font-size: 14px;
    letter-spacing: 0.7px;
  }
}

.rank-card {
  overflow: hidden;
  background: #fff7f3;
  border-radius: 8px;
  border: 1px solid #ffd5c7;
}

.rank-card__head {
  display: flex;
  align-items: center;
  min-height: 70px;
  padding: 12px 28px;
  color: #fff;
  background: linear-gradient(180deg, #ffd8ca 0%, var(--color-pink) 100%);
}

.rank-card__crown {
  width: 42px;
  height: auto;
  margin-right: 12px;
}

.rank-card__name {
  font-size: 26px;
  font-weight: 900;
}

.rank-card__rating {
  margin-left: auto;
  color: var(--color-gold);
  font-size: 20px;
  font-weight: 900;
}

.rank-card__body {
  display: grid;
  grid-template-columns: 420px minmax(0, 1fr);
  gap: 34px;
  padding: 34px 38px 26px;
}

.rank-card__visual {
  display: grid;
  place-items: center;
  min-height: 330px;
  background: #fff;
  border-radius: 8px;
}

.rank-card__product {
  max-height: 300px;
  object-fit: contain;
}

.rank-card__catch {
  margin-bottom: 18px;
  color: var(--color-pink);
  font-size: 24px;
  line-height: 1.45;
  font-weight: 900;
}

.rank-card__points {
  display: grid;
  gap: 8px;
  margin-bottom: 22px;
  font-size: 17px;
  line-height: 1.65;
}

.rank-card__points li {
  position: relative;
  padding-left: 1.3em;
}

.rank-card__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 8px;
  height: 8px;
  background: var(--color-pink);
  border-radius: 50%;
}

.rank-card__spec {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: #fff;
}

.rank-card__spec div {
  display: grid;
  grid-template-columns: 44% minmax(0, 1fr);
  min-height: 54px;
}

.rank-card__spec dt,
.rank-card__spec dd {
  display: grid;
  place-items: center;
  padding: 8px;
  font-size: 14px;
  text-align: center;
}

.rank-card__spec dt {
  color: #fff;
  background: var(--color-pink);
  font-weight: 700;
}

.rank-card__spec dd {
  background: #fff;
}

.rank-card__foot {
  padding: 0 38px 34px;
  text-align: center;
}

.rank-card__cta {
  display: inline-block;
  width: 330px;
  max-width: 100%;
}

.rank-card__cta img {
  width: 100%;
}

/* ============================================
   11. footer
   ============================================ */
/* ============================================
   イチオシ推荐区（figma 5-4031 等）
   ============================================ */
.recommend {
  position: relative;
  background: var(--color-compare-bg);    /* #fff7f3 */
  height: 406px;                          /* figma 设计高度 */
  box-sizing: border-box;
}
.recommend__inner {
  width: 1000px;
  max-width: calc(100% - 40px);
  margin: 25px auto 60px;
}
/* 顶部"旗子"标签：PNG 素材，一半漏在 section 上方（仿 .compare__title 玩法） */
.recommend__banner {
  max-width: 100%;              /* -52 = 图高 103/2，上半浮出 */
  text-align: center;
}
.recommend__banner img {
  width: 602px;
  height: auto;
  display: inline-block;
  margin-top: -30px;
}
/* 主体：图左 + 文右 2 列 */
.recommend__body {
  display: grid;
  grid-template-columns: 399px 1fr;
  gap: 30px;
  align-items: center;
}
.recommend__img {
  width: 399px;
  height: 266px;
  object-fit: cover;
  border-radius: 15px;
  display: block;
}
.recommend__text {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.8px;
  color: var(--color-text-dark);
}
.recommend__text p {
  margin: 0;
}
.recommend__text p + p {
  margin-top: 1.6em;
}
.recommend__text .is-strong {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 900;
  color: var(--color-pink);
}

/* ============================================
   site-footer：粉色底 + 4 个下划线链接 + 版权
   ============================================ */
.site-footer {
  padding: 30px 20px;
  color: var(--color-white);
  background: var(--color-pink);
  text-align: center;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.8px;
}
.site-footer__nav a {
  color: inherit;
  text-decoration: underline;
}
.site-footer__sep {
  margin: 0 0.4em;
}
.site-footer__copy {
  margin: 0;
}

@media (max-width: 768px) {
  .explain,
  .ranking-banner,
  .ranking-list {
    width: calc(100% - 32px);
    max-width: none;
  }

  .explain {
    margin-top: 44px;
  }

  .explain--2,
  .explain--3,
  .rank-card__body {
    grid-template-columns: 1fr;
  }

  .explain__visual {
    width: 100%;
  }

  .explain__text {
    font-size: 14px;
    line-height: 1.8;
  }

  .ranking-banner {
    margin-top: 48px;
    margin-bottom: 34px;
  }

  .ranking-list {
    gap: 36px;
    margin-bottom: 56px;
  }

  .rank-card__head {
    min-height: 52px;
    padding: 8px 14px;
  }

  .rank-card__crown {
    width: 30px;
  }

  .rank-card__name {
    font-size: 18px;
  }

  .rank-card__rating {
    font-size: 15px;
  }

  .rank-card__body {
    gap: 18px;
    padding: 18px 14px;
  }

  .rank-card__visual {
    min-height: 220px;
  }

  .rank-card__product {
    max-height: 200px;
  }

  .rank-card__catch {
    font-size: 17px;
  }

  .rank-card__points {
    font-size: 14px;
  }

  .rank-card__spec {
    grid-template-columns: 1fr;
  }

  .rank-card__foot {
    padding: 0 14px 22px;
  }

  /* イチオシ推荐区 SP */
  .recommend {
    height: auto;                         /* 覆盖 PC 的 406px 固定 */
    margin-top: 100px;
    padding: 0 0 40px;
  }
  .recommend__inner {
    width: auto;
    max-width: none;
    margin: 0 auto;
    padding: 0 16px;
  }
  .recommend__banner {
    width: 100%;
    text-align: center;
    margin-bottom: 24px;
  }
  .recommend__banner img {
    width: 100%;                          /* SP 让 banner 图缩放 */
    max-width: 320px;
    margin-top: -40px;                    /* 一半浮在 section 上方 */
  }
  .recommend__body {
    display: grid;
    grid-template-columns: 1fr;          /* 单列 */
    gap: 20px;
  }
  .recommend__img {
    width: 100%;
    height: auto;
    aspect-ratio: 399 / 266;
  }
  .recommend__text {
    font-size: 14px;
    letter-spacing: 0.7px;
  }

  /* footer SP */
  .site-footer {
    padding: 24px 16px;
    font-size: 13px;
    line-height: 1.8;
  }
  .site-footer__sep {
    margin: 0 0.3em;
  }
}

/* ============================================
   图片容器尺寸兜底（防止真图过大撑爆容器）
   - 默认 contain：等比缩放完整可见
   - 圆形头像 cover：填满裁掉边
   ============================================ */
.product-card__photo-img,
.product-card__campaign-img,
.product-card__review-avatar,
.top3-card__img {
  overflow: hidden;
}
.product-card__campaign-img a {
  display: block;
  text-decoration: none;
}
.product-card__campaign-img img {
  width: 100%;
  height: auto;                            /* 高度按图片比例 */
  display: block;
}
.top3-card__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
/* 商品图轮播：track 横向排列，每张 100% 宽，由 transform translateX 切换 */
.product-card__photo-track {
  display: flex;
  width: 100%;
  transition: transform 0.4s ease;
  align-items: flex-start;                 /* 防止图片高度不一时被拉伸 */
}
.product-card__photo-slide {
  flex: 0 0 100%;
  width: 100%;
  display: block;
  text-decoration: none;
}
.product-card__photo-slide img {
  width: 100%;
  height: auto;                            /* 宽度铺满 736，高度按比例自动 */
  display: block;
}

/* 口コミ卡轮播：viewport 裁、track flex 横排，每张 100% */
.product-card__review-viewport {
  flex: 1 1 auto;
  overflow: hidden;
  min-width: 0;                            /* flex item 允许压缩 */
  padding: 10px;                           /* 4 边 padding 给 box-shadow 留显示空间 */
  margin: -10px 0;                         /* 上下负 margin 抵消，避免拉高布局 */
}
.product-card__review-track {
  display: flex;
  gap: 20px;                               /* 卡间留白，避免左右 box-shadow 被邻卡盖住 */
  transition: transform 0.4s ease;
}
.product-card__review-track > .product-card__review {
  flex: 0 0 100%;
  width: 100%;
}
.product-card__review-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;             /* 圆形头像必须填满 */
  border-radius: 50%;
  display: block;
}

/* ============================================
   覆盖 common.css 的全局影响
   - 字体：common.css `* { font-family: Hiragino }` 会覆盖全页字体，强制改回 Zen Maru Gothic
   - rem：common.css `html { font-size: 62.5% }` 让 1rem=10px，可能影响 input；显式锁定根字号 16px
   ============================================ */
html {
  font-size: 16px;
}
body, body * {
  font-family: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
}

/* 通用工具类（生产 DB 内嵌 HTML 用到，如 <span class="line b">） */
.b {
  font-weight: bold;
}

/* ============================================
   5 星图标（star-full / half / empty PNG）
   - .rating-star: 通用 img class
   - 在不同位置（②商品卡评分 / ⑬评论 / 比较表総合評価）由父容器控制 size 和 gap
   ============================================ */
.rating-star {
  display: inline-block;
  vertical-align: middle;
  width: 22px;
  height: 22px;
}
.product-card__rating-stars {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  letter-spacing: 0;
}
.product-card__rating-stars .rating-star {
  width: 22px;
  height: 22px;
}
.product-card__review-stars {
  display: inline-flex;
  align-items: center;
  gap: 1px;
}
.product-card__review-stars .rating-star {
  width: 18px;
  height: 18px;
}
.compare__stars {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
}
.compare__stars .rating-star {
  width: 16px;
  height: 16px;
}
@media (max-width: 768px) {
  .compare__stars .rating-star {
    width: 11px;
    height: 11px;
  }
  .product-card__rating-stars .rating-star {
    width: 25px;
    height: 25px;
  }
  .product-card__review-stars .rating-star {
    width: 16px;
    height: 16px;
  }
}

/* 比较表 cell 内的评分图（compare_X.png） */
.compare__table .compare-img,
.product-card__spec-value .compare-img {
  display: block;
  margin: 0 auto 4px;
  width: 34px;
  height: 34px;
}
@media (max-width: 768px) {
  .compare__table .compare-img,
  .product-card__spec-value .compare-img {
    width: 26px;
    height: 26px;
  }
}

/* ============================================
   PC 全屏出血背景：让带背景色的 section 不被 body 1440 宽度限制
   - 整个 section 撑到 100vw（视口宽）
   - 内部 inner 包裹元素 / footer 内文 保持原宽度，不受影响
   ============================================ */
@media (min-width: 769px) {
  .compare,
  .recommend,
  .site-footer {
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
  }
}

/* ============================================
   本页文字配色：默认 #4F4F4F；<small> 黑色；
   后台维护时通过 class 标记不同颜色
   ============================================ */
.lady-top-1-page {
  color: #4F4F4F;
}
.lady-top-1-page small,
.lady-top-1-page .small {
  color: #4F4F4F;
}
/* 颜色工具类（admin 后台用，如 <span class="pink">XXX</span>） */
.lady-top-1-page .pink   { color: var(--color-pink); }      /* #ff7c7a 主粉色 */
.lady-top-1-page .teal   { color: #64C9CC; }                /* 編集部コメント 青色 */
.lady-top-1-page .gold   { color: var(--color-gold); }      /* #e0c655 星星金 */
.lady-top-1-page .gray   { color: #4F4F4F; }                /* 同默认 */
.lady-top-1-page .black  { color: #4F4F4F; }                /* "黑色" 本项目指 #4F4F4F */
.lady-top-1-page .white  { color: #fff; }

/* .line 高亮带：把 common.css 的实色 gold 改成半透明 */
.lady-top-1-page span.line {
  background: linear-gradient(transparent 60%, rgba(255, 215, 0, 0.9) 97%);
}