/* ══════════════════════════════════════════════════════════════
   Anté デザインリファイン（試作：REPOSÉページ）
   コンセプト：小さめの文字 × 広い字間・行間 × たっぷりの余白
   ・見た目のみの調整。文章・見出し構造・HTMLは変更しない
   ══════════════════════════════════════════════════════════════ */
body.rp-page{
  --rf-ink:#2B2B2B;      /* 本文 */
  --rf-sub:#6B6B6B;      /* 補足 */
  --rf-note:#808080;     /* 注釈 */
  --rf-line:#ECECEC;     /* 罫線 */
  --rf-cell:#F6F6F6;     /* 表：項目 */
  --rf-cell2:#FBFBFB;    /* 表：内容 */
}

/* ── 1. 余白 ─────────────────────────────── */
body.rp-page .rp-sec{padding:140px 0!important;}
body.rp-page .rp-intro{padding:96px 0 88px!important;}
body.rp-page .rp-in,body.rp-page .rp-in--sm{padding-left:64px!important;padding-right:64px!important;}
body.rp-page .rp-sec > div > div[style*="text-align:center"]{margin-bottom:56px!important;}
body.rp-page .rp-div{margin:22px auto 36px!important;width:24px!important;height:1px!important;}
body.rp-page .rp-div:not(.rp-div--c){margin-left:0!important;}

/* ── 2. 文字 ─────────────────────────────── */
body.rp-page :where(.rp-sec,.rp-intro) :where(p,li,td,th,span,blockquote){letter-spacing:.08em;}
body.rp-page :where(.rp-sec,.rp-intro) :where(p,li,blockquote){
  font-size:14px!important;line-height:2.05!important;
}
body.rp-page .rp-h2{font-size:28px!important;line-height:1.6!important;letter-spacing:.1em!important;font-weight:400!important;}
body.rp-page .rp-h3{font-size:20px!important;line-height:1.7!important;letter-spacing:.08em!important;}
body.rp-page .rp-tag{font-size:10px!important;letter-spacing:.32em!important;color:#A8A8A8!important;margin-bottom:14px!important;}
body.rp-page .rp-intro__catch{font-size:24px!important;line-height:1.8!important;letter-spacing:.1em!important;font-weight:400!important;}
/* 注釈・補足（小さく・薄く） */
body.rp-page .rp-note,body.rp-page .rp-sec small,body.rp-page [class*="-note"],body.rp-page .rp-treat-note,body.rp-page .rp-sim__note,
body.rp-page .rp-sec p[style*="font-size:.7"],body.rp-page .rp-sec p[style*="font-size:.72"],body.rp-page .rp-sec p[style*="font-size:.74"],body.rp-page .rp-sec p[style*="font-size:.76"]{
  font-size:11px!important;line-height:1.85!important;letter-spacing:.08em!important;color:var(--rf-note)!important;
}
body.rp-page .rp-note{background:transparent!important;border:none!important;border-top:1px solid var(--rf-line)!important;padding:20px 0 0!important;margin-top:40px!important;}

/* ── 3. カード：線で詰めず、余白で区切る ─────────── */
body.rp-page .rp-treat-grid,body.rp-page .rp-why-grid,body.rp-page .rp-soothe,body.rp-page .rp-voice-grid,body.rp-page .rp-merit,body.rp-page .rp-steps,body.rp-page .rp-price-grid{
  gap:20px!important;background:transparent!important;border:none!important;
}
body.rp-page .rp-treat-card,body.rp-page .rp-why-card,body.rp-page .rp-soothe__item,body.rp-page .rp-voice,body.rp-page .rp-merit__item,body.rp-page .rp-step,body.rp-page .rp-price-card{
  border:1px solid var(--rf-line)!important;
}
body.rp-page .rp-price-card:not(.rp-price-card--featured),body.rp-page .rp-treat-card,body.rp-page .rp-why-card,body.rp-page .rp-soothe__item,body.rp-page .rp-voice,body.rp-page .rp-merit__item,body.rp-page .rp-step{background:#fff;}
body.rp-page .rp-why-card,body.rp-page .rp-soothe__item,body.rp-page .rp-voice,body.rp-page .rp-merit__item{padding:32px 28px!important;}
body.rp-page .rp-treat-body{padding:24px 24px 28px!important;}
body.rp-page .rp-treat-title,body.rp-page .rp-why-title,body.rp-page .rp-merit__ttl,body.rp-page .rp-voice__head,body.rp-page .rp-step-title{
  font-size:15px!important;line-height:1.7!important;letter-spacing:.08em!important;font-weight:500!important;margin-bottom:10px!important;
}
body.rp-page .rp-treat-desc,body.rp-page .rp-why-desc,body.rp-page .rp-merit__txt,body.rp-page .rp-voice__body,body.rp-page .rp-step-desc,body.rp-page .rp-soothe__txt{
  font-size:13px!important;line-height:2!important;color:var(--rf-sub)!important;
}

/* ── 4. 表（商品情報・比較）：SALONIA型の2カラム ───── */
body.rp-page .rp-info-table,body.rp-page .rp-cmp{border-collapse:separate!important;border-spacing:0 4px!important;border:none!important;width:100%;}
body.rp-page .rp-info-table th,body.rp-page .rp-info-table td,body.rp-page .rp-cmp th,body.rp-page .rp-cmp td{
  border:none!important;padding:20px 18px!important;font-size:12.5px!important;line-height:1.85!important;letter-spacing:.1em!important;
  vertical-align:middle;color:var(--rf-ink)!important;
}
body.rp-page .rp-info-table th,body.rp-page .rp-cmp tbody th{background:var(--rf-cell)!important;font-weight:500!important;width:32%;}
body.rp-page .rp-info-table td,body.rp-page .rp-cmp td{background:var(--rf-cell2)!important;}
body.rp-page .rp-cmp-wrap{border:none!important;}
body.rp-page .rp-cmp thead th{background:#fff!important;font-size:11px!important;color:var(--rf-sub)!important;padding:12px 10px!important;}
body.rp-page .rp-cmp thead .is-rp{background:var(--rp-sage)!important;color:#fff!important;}
body.rp-page .rp-cmp .is-rp{background:#F1F5EE!important;}
body.rp-page .rp-ingr-list{font-size:11.5px!important;line-height:2!important;letter-spacing:.08em!important;color:var(--rf-sub)!important;}

/* ── 5. ボタン：控えめで上品な形に統一 ───────────── */
body.rp-page .rp-intro__cta,body.rp-page .rp-order-main,body.rp-page .rp-order-line,body.rp-page .rp-order-mail,body.rp-page .rp-related__btn{
  min-height:52px;border-radius:999px!important;padding:0 36px!important;
  display:inline-flex!important;align-items:center;justify-content:center;gap:10px;
  font-size:12px!important;letter-spacing:.16em!important;font-weight:500;line-height:1;
}
body.rp-page .rp-order-mail{background:#fff!important;border:1px solid #CFCFCF!important;color:var(--rf-ink)!important;}
body.rp-page .rp-intro__cta{margin-top:12px;}

/* ── 6. よくある質問・開閉 ───────────────── */
body.rp-page .rp-faq-q{font-size:14px!important;letter-spacing:.06em!important;line-height:1.8!important;padding:22px 0!important;}
body.rp-page .rp-faq-a span{font-size:13px!important;line-height:2!important;color:var(--rf-sub)!important;}
body.rp-page .rp-more>summary{font-size:13px!important;letter-spacing:.08em!important;padding:20px 18px!important;}

/* ── 7. スマホ ───────────────────────────── */
@media (max-width:768px){
  body.rp-page .rp-sec{padding:96px 0!important;}
  body.rp-page .rp-intro{padding:72px 0 64px!important;}
  body.rp-page .rp-in,body.rp-page .rp-in--sm{padding-left:28px!important;padding-right:28px!important;}
  body.rp-page .rp-sec > div > div[style*="text-align:center"]{margin-bottom:40px!important;}

  body.rp-page .rp-h2{font-size:20px!important;}
  body.rp-page .rp-h3{font-size:16px!important;}
  body.rp-page .rp-intro__catch{font-size:18px!important;}
  body.rp-page :where(.rp-sec,.rp-intro) :where(p,li,blockquote){font-size:13px!important;line-height:2!important;}
  body.rp-page .rp-treat-desc,body.rp-page .rp-why-desc,body.rp-page .rp-merit__txt,body.rp-page .rp-voice__body,body.rp-page .rp-step-desc,body.rp-page .rp-soothe__txt{font-size:12.5px!important;}
  body.rp-page .rp-treat-title,body.rp-page .rp-why-title,body.rp-page .rp-merit__ttl,body.rp-page .rp-voice__head,body.rp-page .rp-step-title{font-size:14px!important;}
  body.rp-page .rp-note,body.rp-page .rp-sec small,body.rp-page [class*="-note"],body.rp-page .rp-treat-note,body.rp-page .rp-sim__note{font-size:10.5px!important;}

  /* 段落：スマホは左揃え（見出し・短いキャッチ・ブランド面は中央のまま） */
  body.rp-page :where(.rp-sec,.rp-intro) p{text-align:left!important;}
  body.rp-page .rp-intro__catch,body.rp-page .rp-final p,body.rp-page .rp-sim__ttl,body.rp-page .rp-price-card p,
  body.rp-page .rp-tex figcaption,body.rp-page .rp-stock-inline,body.rp-page .rp-intro__pts li{text-align:center!important;}

  /* カード：1列・余白広め */
  body.rp-page .rp-why-grid,body.rp-page .rp-soothe,body.rp-page .rp-voice-grid,body.rp-page .rp-merit{grid-template-columns:1fr!important;gap:14px!important;}
  /* 施術シーン・使い方：スマホは「画像＋文」の横並びカードで読みやすく */
  body.rp-page .rp-steps{grid-template-columns:1fr!important;gap:12px!important;}
  body.rp-page .rp-step{display:grid!important;grid-template-columns:96px 1fr;align-items:stretch;}
  body.rp-page .rp-step-img{aspect-ratio:auto!important;height:100%!important;min-height:96px;}
  body.rp-page .rp-step-body{padding:16px 16px 18px!important;}
  body.rp-page .rp-why-card,body.rp-page .rp-soothe__item,body.rp-page .rp-voice,body.rp-page .rp-merit__item{padding:26px 22px!important;}
  body.rp-page .rp-treat-body{padding:16px 14px 18px!important;}

  /* 横スライド（施術シーン・選ばれる理由・お客様の声・鎮静特化の4要素）
     ・内容はすべてページ内に残したまま、横にスワイプして見る形に */
  body.rp-page .rp-treat-grid,body.rp-page .rp-voice-grid,body.rp-page .rp-merit,body.rp-page .rp-soothe{
    display:flex!important;flex-wrap:nowrap!important;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    gap:12px!important;margin:0 -28px!important;padding:4px 28px 18px!important;scroll-padding-left:28px;scrollbar-width:none;
  }
  body.rp-page .rp-treat-grid::-webkit-scrollbar,body.rp-page .rp-voice-grid::-webkit-scrollbar,body.rp-page .rp-merit::-webkit-scrollbar,body.rp-page .rp-soothe::-webkit-scrollbar{display:none;}
  body.rp-page .rp-treat-card,body.rp-page .rp-voice,body.rp-page .rp-merit__item,body.rp-page .rp-soothe__item{
    flex:0 0 78%!important;max-width:78%;scroll-snap-align:start;grid-column:auto!important;
  }
  body.rp-page .rp-merit__item{flex-direction:column;gap:8px!important;}
  body.rp-page .rp-treat-grid::after,body.rp-page .rp-voice-grid::after,body.rp-page .rp-merit::after,body.rp-page .rp-soothe::after{content:'';flex:0 0 16px;}
  body.rp-page .rp-swipe-hint{display:block;}

  /* 比較表：スマホは項目ごとのカード型（横スクロールなし） */
  body.rp-page .rp-cmp-wrap{overflow:visible!important;}
  body.rp-page .rp-cmp,body.rp-page .rp-cmp tbody{display:block!important;min-width:0!important;}
  body.rp-page .rp-cmp thead{display:none!important;}
  body.rp-page .rp-cmp tbody tr{display:grid!important;grid-template-columns:1fr 1fr;gap:2px;margin:0 0 10px;}
  body.rp-page .rp-cmp tbody th{grid-column:1 / -1;width:auto!important;padding:10px 14px!important;font-size:11px!important;background:var(--rf-cell)!important;}
  body.rp-page .rp-cmp tbody td{text-align:left!important;padding:12px 14px!important;font-size:12px!important;line-height:1.8!important;}
  body.rp-page .rp-cmp tbody td.is-rp{grid-column:1 / -1;color:var(--rf-ink)!important;}
  body.rp-page .rp-cmp tbody td::before{display:block;font-size:9.5px;letter-spacing:.1em;color:var(--rf-note);margin-bottom:2px;font-weight:400;}
  body.rp-page .rp-cmp tbody td.is-rp::before{content:'REPOSÉ';color:var(--rp-sage);}
  body.rp-page .rp-cmp tbody td:nth-child(3)::before{content:'一般的なモデリングパック';}
  body.rp-page .rp-cmp tbody td:nth-child(4)::before{content:'シート・クリームパック';}
  body.rp-page .rp-cmp tbody td:nth-child(3),body.rp-page .rp-cmp tbody td:nth-child(4){font-size:11px!important;color:var(--rf-sub)!important;}

  /* 表：2カラムのまま、文字を小さく余白は広く */
  body.rp-page .rp-info-table th,body.rp-page .rp-info-table td{padding:16px 14px!important;font-size:12px!important;}
  body.rp-page .rp-info-table th{width:36%;}
  body.rp-page .rp-cmp th,body.rp-page .rp-cmp td{padding:14px 10px!important;font-size:11.5px!important;}

  /* ボタン：横幅いっぱい */
  body.rp-page .rp-intro__cta,body.rp-page .rp-order-main{width:100%;padding:0 20px!important;}
  body.rp-page .rp-order-line,body.rp-page .rp-order-mail{flex:1;padding:0 16px!important;min-width:140px;}
  body.rp-page .rp-intro__pts{max-width:100%!important;}
  body.rp-page .rp-intro__pts li{font-size:10.5px!important;padding:14px 6px!important;}
  body.rp-page .rp-faq-q{font-size:13px!important;}
  body.rp-page .rp-faq-a span{font-size:12.5px!important;}
}

/* ── 8. 試算ボックス：黒をやめ、淡いグレーで全体のトーンにそろえる ── */
body.rp-page .rp-sim{background:#F4F4F2!important;color:var(--rf-ink)!important;padding:48px 40px!important;}
body.rp-page .rp-sim__ttl{color:var(--rf-ink)!important;font-size:15px!important;letter-spacing:.1em!important;margin-bottom:28px!important;}
body.rp-page .rp-sim__cell{background:#fff!important;border:1px solid var(--rf-line)!important;}
body.rp-page .rp-sim__cell span,body.rp-page .rp-sim__cell small{color:var(--rf-sub)!important;}
body.rp-page .rp-sim__cell strong{color:var(--rf-ink)!important;font-weight:400;}
body.rp-page .rp-sim__cell.is-hl{background:var(--rp-sage)!important;border-color:var(--rp-sage)!important;}
body.rp-page .rp-sim__cell.is-hl strong,body.rp-page .rp-sim__cell.is-hl span,body.rp-page .rp-sim__cell.is-hl small{color:#fff!important;}
body.rp-page .rp-sim__op{color:#B5B5B5!important;}
body.rp-page .rp-sim__note{color:var(--rf-note)!important;}
/* スワイプの案内（スマホのみ表示） */
body.rp-page .rp-sec p.rp-swipe-hint,body.rp-page .rp-swipe-hint{text-align:right!important;}
body.rp-page .rp-swipe-hint{display:none;font-size:10px;letter-spacing:.2em;color:#A8A8A8;text-align:right;margin:0 0 10px;}
@media (max-width:768px){
  body.rp-page .rp-sim{padding:36px 20px!important;}
  body.rp-page .rp-swipe-hint{display:block;}
}
