/* =====================================================
   Bendel 定期購入特典ページ（統合版 / 整理済み）
   - Scope: #subscription-benefits 内だけ
   - Main: #c8a789 / Accent: #a6444b / Lead: #4E3626
   - Rail: rgba(127,111,105,.22) 固定
   - TIMELINEは transform なしで、PC -25% / SP -15% 相当の数値設計
   ===================================================== */

#subscription-benefits{
  --sb-main: #c8a789;
  --sb-accent: #a6444b;
  --sb-lead: #4E3626;

  --sb-border: rgba(0,0,0,.08);
  --sb-bg: rgba(0,0,0,.02);
  --sb-radius: 18px;
  --sb-max: 1040px;

  --sb-rail: rgba(127,111,105,.22);

  line-height: 1.75;
}

#subscription-benefits *{ box-sizing: border-box; }
#subscription-benefits img{ max-width: 100%; height: auto; display:block; }

#subscription-benefits .sb-inner{
  max-width: var(--sb-max);
  margin: 0 auto;
  padding: 0 16px;
}
@media (min-width:768px){
  #subscription-benefits .sb-inner{ padding: 0 32px; }
}

#subscription-benefits .sb-sec{ padding: 36px 0; }
#subscription-benefits .sb-secAlt{ background: var(--sb-bg); }
#subscription-benefits .sb-center{ text-align:center; }

/* ----------------------------
   Typography
---------------------------- */
#subscription-benefits .sb-eyebrow{
  font-size: 13px;
  letter-spacing: .08em;
  opacity: .7;
  margin: 0 0 10px;
}

#subscription-benefits .sb-title{
  margin: 20px 0 14px;
  text-align: center;
  line-height: 1.6;
  color: var(--sb-lead);
  font-family: "Zen Kaku Gothic New";
}

#subscription-benefits .sb-titleSub{
  display: inline-block;
  font-size: 1.1em;
  letter-spacing: .12em;
}

#subscription-benefits .section-ttl{
  display: block;
  margin: 0 auto 18px;
  font-size: 25px;
  font-family: "Zen Kaku Gothic New";
  font-weight: 500;
  color: var(--sb-main);
  text-align: center;
  letter-spacing: .15em;
  line-height: 1.6;
}
#subscription-benefits .section-ttl > span{
  display: block;
  margin-top: 6px;
  font-size: 40%;
}

#subscription-benefits .sb-lead{
  margin: 0 0 20px;
  color: var(--sb-lead);
  font-size: 14px;
  line-height: 1.9;
  text-align: center;
}

/* ----------------------------
   KV
---------------------------- */
#subscription-benefits .sb-kv{ overflow: hidden; padding-top: 16px; }
@media (min-width:768px){
  #subscription-benefits .sb-kv{ padding-top: 28px; }
}
#subscription-benefits .sb-kvImg{ width: 100%; max-width: none; margin: 0 auto; }
@media (min-width:768px){
  #subscription-benefits .sb-kvImg{ max-width: 1040px; }
}

/* ----------------------------
   CTA buttons (more-btn踏襲)
---------------------------- */
#subscription-benefits .sb-ctaRow{
  display:flex;
  flex-wrap:wrap;
  gap: 12px;
  margin: 0 0 20px;
}

#subscription-benefits .sb-moreArea{
  width: auto !important;
  flex: 1 1 260px;
  margin: 0 !important;
}

#subscription-benefits .more-btn,
#subscription-benefits .more-btn:link,
#subscription-benefits .more-btn:visited{
  display: block;
  width: 100%;
  margin: 0;
  padding: 15px 0;
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  text-align: center;
  letter-spacing: .05em;
  line-height: 1.0;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  border: 1px solid var(--sb-main);
  background-color: var(--sb-main);
}
#subscription-benefits .more-btn:hover{ color:#fff !important; }
#subscription-benefits .more-btn::after{
  content:"";
  display:block;
  position:absolute;
  top: calc(50% - 5px);
  right: 40px;
  width: 20px;
  height: 5px;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  transform: skew(45deg);
  transition: .3s;
}
#subscription-benefits .more-btn:hover::after{ right: 30px; width: 30px; }

#subscription-benefits .sb-moreAreaGhost .sb-moreBtnGhost,
#subscription-benefits .sb-moreAreaGhost .sb-moreBtnGhost:link,
#subscription-benefits .sb-moreAreaGhost .sb-moreBtnGhost:visited{
  background: #fff;
  color: var(--sb-main);
  border-color: var(--sb-main);
}
#subscription-benefits .sb-moreAreaGhost .sb-moreBtnGhost::after{
  border-right-color: var(--sb-main);
  border-bottom-color: var(--sb-main);
}

/* ----------------------------
   Cards grid
---------------------------- */
#subscription-benefits .sb-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width:768px){
  #subscription-benefits .sb-grid{ grid-template-columns: repeat(3, 1fr); }
}

#subscription-benefits .sb-card{
  background:#fff;
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius);
  padding: 18px;
  color: var(--sb-lead);
}
#subscription-benefits .sb-card h3{
  margin: 0 0 8px;
  font-size: 15px;
  letter-spacing: .06em;
  color: var(--sb-lead);
}
#subscription-benefits .sb-card p{
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  opacity: .92;
}

/* ----------------------------
   Badges
---------------------------- */
#subscription-benefits .sb-badges{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  justify-items:center;
  margin: 26px 0 0;
  padding: 0;
  list-style:none;
}

#subscription-benefits .sb-badge{
  width: min(150px, 42vw);
  height: min(150px, 42vw);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.28), rgba(255,255,255,0) 60%), var(--sb-main);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-size: clamp(13px, 3.6vw, 15px);
  line-height: 1.35;
  letter-spacing: .08em;
  font-weight: 500;
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
}
@media (min-width:768px){
  #subscription-benefits .sb-badges{
    grid-template-columns: repeat(4, 130px);
    justify-content:center;
    gap: 20px;
    margin-top: 40px;
  }
  #subscription-benefits .sb-badge{
    width: 130px;
    height: 130px;
    font-size: 14px;
  }
}

/* ----------------------------
   Cycle
---------------------------- */
#subscription-benefits .sb-cycleGrid{
  display:grid;
  gap: 14px;
  margin-top: 22px;
}
@media (min-width:768px){
  #subscription-benefits .sb-cycleGrid{
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 26px;
  }
}
#subscription-benefits .sb-cycleCard{
  background:#fff;
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius);
  padding: 16px;
}
#subscription-benefits .sb-cycleIcon{
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: rgba(200,167,137,.10);
  display:grid;
  place-items:center;
  margin: 0 auto 10px;
}
#subscription-benefits .sb-cycleTtl{
  margin: 6px 0 6px;
  text-align:center;
  font-size: 14px;
  letter-spacing: .08em;
  color: var(--sb-lead);
}
#subscription-benefits .sb-cycleTxt{
  margin: 0;
  text-align:center;
  font-size: 13px;
  line-height: 1.7;
  color: var(--sb-lead);
  opacity: .92;
}
#subscription-benefits .sb-cycleNote{
  margin: 10px 0 0;
  text-align:center;
  font-size: 12px;
  line-height: 1.6;
  color: var(--sb-lead);
  opacity: .75;
}

/* 線アイコン */
#subscription-benefits .sb-ic{ width: 22px; height: 22px; position: relative; display:block; }
#subscription-benefits .sb-icCal,
#subscription-benefits .sb-icDate,
#subscription-benefits .sb-icWeek{
  border: 2px solid rgba(78,54,38,.55);
  border-radius: 6px;
}
#subscription-benefits .sb-icCal::before,
#subscription-benefits .sb-icDate::before,
#subscription-benefits .sb-icWeek::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:6px;
  height:2px;
  background: rgba(78,54,38,.55);
}
#subscription-benefits .sb-icCal::after{
  content:"";
  position:absolute;
  left:4px; right:4px;
  bottom:5px;
  height:2px;
  background: rgba(78,54,38,.55);
  box-shadow: 0 -6px 0 rgba(78,54,38,.28);
}
#subscription-benefits .sb-icDate::after{
  content:"";
  position:absolute;
  width:6px; height:6px;
  border-radius: 50%;
  background: rgba(78,54,38,.55);
  left: calc(50% - 3px);
  top: calc(50% - 1px);
}
#subscription-benefits .sb-icWeek::after{
  content:"";
  position:absolute;
  left:5px;
  top:10px;
  width:12px;
  height:2px;
  background: rgba(78,54,38,.55);
  box-shadow: 0 5px 0 rgba(78,54,38,.35), 0 10px 0 rgba(78,54,38,.22);
}

/* ----------------------------
   How to change
---------------------------- */
#subscription-benefits .sb-howtoLead{
  margin: 0 0 18px;
  color: var(--sb-lead);
  font-size: 13px;
  line-height: 1.7;
  text-align:center;
}
#subscription-benefits .sb-strong{
  color: var(--sb-accent);
  font-weight: 700;
  letter-spacing: .06em;
  background: rgba(166,68,75,.10);
  padding: 2px 6px;
  border-radius: 6px;
}
#subscription-benefits .sb-howto{
  list-style:none;
  padding:0;
  margin: 24px 0 0;
  display:grid;
  gap: 14px;
}
#subscription-benefits .sb-howto li{
  background:#fff;
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius);
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--sb-lead);
}
#subscription-benefits .sb-howtoStep{
  display:inline-block;
  margin-right: 10px;
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--sb-main);
  font-weight: 700;
}
#subscription-benefits .sb-note{
  margin-top: 16px;
  margin-bottom: 28px; /* ←下の余白を確保 */
  font-size: 12px;
  opacity: .75;
  line-height: 1.6;
  color: var(--sb-lead);
  text-align:center;
}
/* -------------------------------
   ✅ FAQ：＋で“ふわっと”開く（button + div 構造前提）
   ※ details/summary では動きません
   ------------------------------- */
#subscription-benefits .sb-faq{
  display: grid;
  gap: 12px;
  margin-top: 12px;
  margin-bottom: 40px;
}

#subscription-benefits .sb-faqItem{
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius);
  background: #fff;
  overflow: hidden;
}

/* 質問行（ボタン） */
#subscription-benefits .sb-faqQ{
  width: 100%;
  appearance: none;
  border: 0;
  background: transparent;
  padding: 16px 48px 16px 16px;
  text-align: left;
  font-size: 14px;
  line-height: 1.5;
  cursor: pointer;
  position: relative;
}

/* Q / A マーク */
#subscription-benefits .sb-qMark,
#subscription-benefits .sb-aMark{
  display: inline-flex;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  margin-right: 8px;
  color: #fff;
  background: var(--sb-main);
}

/* ＋アイコン */
#subscription-benefits .sb-plus{
  position: absolute;
  right: 14px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
}

#subscription-benefits .sb-plus::before,
#subscription-benefits .sb-plus::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  background: var(--sb-main);
  transform: translateY(-50%);
  transition: opacity .25s ease;
}

#subscription-benefits .sb-plus::after{
  transform: translateY(-50%) rotate(90deg);
}

/* 回答（ふわっと） */
#subscription-benefits .sb-faqA{
  max-height: 0;
  opacity: 0;
  transform: translateY(-6px);
  overflow: hidden;
  transition: max-height .35s ease, opacity .25s ease, transform .25s ease;
  will-change: max-height, opacity, transform;
}

#subscription-benefits .sb-faqAInner{
  padding: 0 16px 16px 16px;
  font-size: 14px;
  line-height: 1.7;
  opacity: .85;
}

/* 開いた状態 */
#subscription-benefits .sb-faqItem.is-open .sb-faqA{
  max-height: 700px;
  opacity: 1;
  transform: translateY(0);
}
#subscription-benefits .sb-faqItem.is-open .sb-plus::after{
  opacity: 0; /* ＋→－ */
}

/* PC */
@media (min-width: 768px){
  #subscription-benefits .sb-inner{ padding: 0 22px; }
  #subscription-benefits .sb-grid{ grid-template-columns: repeat(3, 1fr); }
}

/* =====================================================
   TIMELINE（transform無しで縮小設計）
   - SP：全体 15% 小さめ
   - PC：全体 25% 小さめ
===================================================== */

/* タイムライン全体（共通：縦 / SP） */
#subscription-benefits #sb-timeline .sb-flow{
  --flow-step: rgba(200,167,137,.92);
  display: grid;
  gap: 10px;              /* ←少し詰める */
  margin-top: 18px;       /* ←少し詰める */
  position: relative;
  padding: 6px 0 4px;
}

/* SPの縦レール */
#subscription-benefits #sb-timeline .sb-flow::before{
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 9px;                         /* ←15%相当で少し細く */
  transform: translateX(-50%);
  background: var(--sb-rail);
  border-radius: 999px;
  z-index: 0;
}

/* レールより前に */
#subscription-benefits #sb-timeline .sb-flowCard,
#subscription-benefits #sb-timeline .sb-flowStep,
#subscription-benefits #sb-timeline .sb-flowMore{
  position: relative;
  z-index: 1;
}

/* STEP（SP基準：15%小さめ） */
#subscription-benefits #sb-timeline .sb-flowStep{
  background: var(--flow-step);
  color: #fff;
  text-align: center;
  padding: 10px 10px;      /* ←15%詰め */
  border-radius: 12px;
  font-size: 17px;         /* ←(元20)を15%程度小さく */
  font-weight: 700;
  letter-spacing: .12em;
  box-shadow: 0 8px 18px rgba(0,0,0,.10);
  display: grid;
  place-items: center;

  width: min(92%, 420px);
  margin-left: auto;
  margin-right: auto;
}

/* thin はSPでは無効化（幅が細すぎるの防止） */
#subscription-benefits #sb-timeline .sb-flowStep--thin{
  width: min(92%, 420px) !important;
}

/* 縦書き指定はSPでは横書きに戻す */
#subscription-benefits #sb-timeline .sb-flowStep--tate{
  writing-mode: horizontal-tb !important;
  padding: 12px 12px;
  font-size: 18px;
}

/* カード（SP基準：15%小さめ） */
#subscription-benefits #sb-timeline .sb-flowCard{
  background: #fff;
  border: 1px solid var(--sb-border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 22px rgba(0,0,0,.08);

  width: min(92%, 420px);
  margin-left: auto;
  margin-right: auto;
}

/* カード見出し（SP 15%小さめ） */
#subscription-benefits #sb-timeline .sb-flowHead{
  background: var(--sb-main);
  color: #fff;
  text-align: center;
  padding: 9px 10px;
  font-size: 17px;        /* ←(元20)から小さめ */
  font-weight: 800;
  letter-spacing: .12em;
}
#subscription-benefits #sb-timeline .sb-flowHead--accent{
  background: var(--sb-accent);
}

/* 本文 */
#subscription-benefits #sb-timeline .sb-flowBody{
  padding: 14px 14px;
  text-align: center;
}
#subscription-benefits #sb-timeline .sb-flowTag{
  display: inline-flex;
  justify-content: center;
  margin: 6px auto 10px;
  background: rgba(200,167,137,.10);
  color: var(--sb-lead);
  border: 1px solid rgba(200,167,137,.22);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: .08em;
}
#subscription-benefits #sb-timeline .sb-flowTxt{
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--sb-lead);
  text-align: center;
}
#subscription-benefits #sb-timeline .sb-flowSub{
  display: inline-block;
  margin-top: 6px;
  font-size: 12px;
  opacity: .75;
}

/* 数字（明朝） */
#subscription-benefits .sb-flowNum{
  font-family: "Zen Kaku Gothic New", system-ui, -apple-system, sans-serif;
  font-weight: 700;              /* 太すぎないけど存在感あり */
  font-size: 1.1em;             /* 数字を主役に */
  letter-spacing: .04em;         /* ← 明朝っぽさを消すポイント */
  color: var(--sb-main);
  background: rgba(200,167,137,.12);
  padding: 4px 10px;
  border-radius: 999px;          /* クーポン感UP */
}
#subscription-benefits #sb-timeline .sb-flowNum--accent{
  color: var(--sb-accent);
  background: rgba(166,68,75,.12);
}

/* ============================
   TIMELINE：画像の上下余白を完全にゼロ
   ============================ */

/* 共通：1・3・6・9回目の画像 */
#subscription-benefits #sb-timeline .sb-flowImg--wide,
#subscription-benefits #sb-timeline .sb-flowImg--start{
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;   /* 比率は維持 */
  object-fit: contain;
  margin: 0 auto;        /* ← 上下余白ゼロ */
  max-width: 190px;
}
/* ============================
   3回目（クーポン）だけさらに詰める
   ============================ */

/* カード内paddingを最小限に */
#subscription-benefits #sb-timeline
.sb-flowCard--coupon .sb-flowBody{
  padding-top: 8px;
  padding-bottom: 8px;
}

/* START価格表示 */
#subscription-benefits #sb-timeline .sb-startProduct{
  font-size: 13px;
  letter-spacing: .08em;
  color: var(--sb-lead);
  margin-bottom: 8px;
}
#subscription-benefits #sb-timeline .sb-startOff{
  display: inline-block;
  margin: 6px auto 10px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 2px solid rgba(166,68,75,.35);
  color: var(--sb-accent);
  font-weight: 800;
  letter-spacing: .08em;
  background: rgba(166,68,75,.08); /* ←不透明寄せ */
}
#subscription-benefits #sb-timeline .sb-startPrices{
  display: grid;
  gap: 5px;
}
#subscription-benefits #sb-timeline .sb-startOld{
  color: rgba(78,54,38,.55);
  font-size: 12px;
}
#subscription-benefits #sb-timeline .sb-yen{
  font-family: "Tsukushi Old A Mincho","筑紫オールドA明朝",serif;
  font-weight: 800;
}
#subscription-benefits #sb-timeline .sb-startOld .sb-yen{
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}
#subscription-benefits #sb-timeline .sb-startNew{
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  color: var(--sb-lead);
}
#subscription-benefits #sb-timeline .sb-startArrow{
  color: rgba(78,54,38,.55);
  font-size: 12px;
}
#subscription-benefits #sb-timeline .sb-yen--big{
  font-size: 20px;
  color: var(--sb-lead);
}

/* 強調カード：背景透過しない（レールが透けない） */
#subscription-benefits #sb-timeline .sb-flowCard--highlight{
  border-color: rgba(166,68,75,.35);
  background: linear-gradient(180deg, #f6e8e9, #ffffff 55%) !important; /* ←不透明 */
  box-shadow: 0 12px 26px rgba(166,68,75,.14);
}

/* “＞＞＞” */
#subscription-benefits #sb-timeline .sb-flowMore{
  align-self: center;
  font-size: 16px;         /* ←少し小さめ */
  letter-spacing: .18em;
  color: rgba(78,54,38,.45);
  padding: 0 6px;
}

/* 注記：タイムライン直下の距離を詰める */
#subscription-benefits #sb-timeline .sb-note{
  margin-top: 10px;
  margin-bottom: 28px;
}

/* ============================
   PC：横並び + レール（PCは25%小さめ設計）
============================ */
@media (min-width:768px){

  #subscription-benefits #sb-timeline .sb-flow{
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    align-items: stretch;
    justify-content: start;
    gap: 12px;                 /* ←詰める */
    position: relative;
    padding: 8px 16px 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* 背面レール（25%小さめ：太さも） */
  #subscription-benefits #sb-timeline .sb-flow::before{
    content:"";
    position:absolute;
    left: 16px;
    right: 16px;
    top: 50%;
    height: 8px;               /* ←(元10)を縮小 */
    transform: translateY(-50%);
    background: var(--sb-rail);
    border-radius: 999px;
    z-index: 0;
  }

  #subscription-benefits #sb-timeline .sb-flowCard,
  #subscription-benefits #sb-timeline .sb-flowStep,
  #subscription-benefits #sb-timeline .sb-flowMore{
    z-index: 1;
  }

  /* PC 25%小さめ：幅・文字・画像 */
  #subscription-benefits #sb-timeline .sb-flowCard{ width: 195px; }   /* 260 * .75 */
  #subscription-benefits #sb-timeline .sb-flowStep{ width: 82px; }    /* 110 * .75 */
  #subscription-benefits #sb-timeline .sb-flowStep--thin{ width: 48px; } /* 64 * .75 */

  #subscription-benefits #sb-timeline .sb-flowHead{
    padding: 7px 9px;
    font-size: 18px;
  }
  #subscription-benefits #sb-timeline .sb-flowBody{
    padding: 12px 12px;
  }

  #subscription-benefits #sb-timeline .sb-flowStep{
    font-size: 18px;
    padding: 10px 8px;
  }
  /* PCは縦書きを維持 */
  #subscription-benefits #sb-timeline .sb-flowStep--tate{
    writing-mode: vertical-rl;
    font-size: 19px;
    padding: 10px 6px;
  }

  #subscription-benefits #sb-timeline .sb-flowImg--wide{ max-width: 165px; } /* 220*.75 */
  #subscription-benefits #sb-timeline .sb-flowImg--start{ max-width: 158px; } /* 210*.75 */

  #subscription-benefits #sb-timeline .sb-yen--big{ font-size: 18px; }

  /* 注記の距離：PCは近めに */
  #subscription-benefits #sb-timeline .sb-note{
    margin-top: 10px;
  }
}
/* ============================
   SPだけ：3回目（クーポン）カードを縦に詰める
   ============================ */
@media (max-width: 767px){

  /* 3回目カード：上下paddingを詰める */
  #subscription-benefits #sb-timeline .sb-flowCard--coupon .sb-flowBody{
    padding-top: 8px;
    padding-bottom: 8px;
  }


  /* タグと本文の間も詰めたい場合 */
  #subscription-benefits #sb-timeline .sb-flowCard--coupon .sb-flowTag{
    margin-top: 4px;
    margin-bottom: 8px;
  }
  #subscription-benefits #sb-timeline .sb-flowMore{
    opacity: .6;
    transform: translateY(-4px);
  }
}

@media (min-width: 768px){
  /* 2・4・5・7・8回目 用 */
  #subscription-benefits .sb-flowStep--tate{
    letter-spacing: .04em;   /* ← 広すぎたのが原因 */
    font-size: 22px;         /* ← 少しだけ下げる */
  }

  #subscription-benefits .sb-flowStep--thin{
    width: 48px;             /* ← 58px → 48px に */
  }
}