/* 診察の流れ（実際の画面つき）— クラスはすべて sf- 始まり */
/* =====================================================================
   ★色を変えるときは、この枠の中の値だけを書き換えてください★
   ・「#ffffff」のような色コードに書き換えれば、その色になります
   ・var(--paper, #fff) のままなら、LP の :root の色に自動で合わせます
   ・LP の HTML 側で <div class="sf-flow" style="--sf-bg:#e8f3fa"> と書いても変えられます
   ===================================================================== */
.sf-flow{
  --sf-bg: transparent;                 /* 部品全体の背景（transparent＝透明。LPの背景がそのまま見える） */
  --sf-pad: 0;                          /* 部品全体の内側の余白。↑に色を入れたら 16px にする */
  --sf-card-bg: var(--paper, #fff);     /* カードと STEP 一覧の背景 */
  --sf-note-bg: var(--accent-soft, #fff3e6); /* 「よくある勘違い」カードの背景 */
  --sf-navy: var(--navy, #1b2a4a);      /* STEP の丸・見出しの色 */
  --sf-accent: var(--accent, #f5821e);  /* 注釈の枠・番号・スワイプ案内の色 */
  --sf-ink: var(--ink, #232a36);        /* 本文の文字色 */
  --sf-line: var(--line, #e7e0d4);      /* カードの枠線の色 */
}

/* =====================================================================
   ★商品を変えるときは、この枠の中の文字を書き換えてください★
   ・カート／お支払い情報／カード登録の3画面に、まとめて反映されます
   ・"" の中を書き換える（"" は消さない）。数量が無い商品は "" のまま空にする
   ・商品の写真は img フォルダの product.webp を差し替える（同じファイル名で上書き。jpg/png なら .webp に変換）
   ===================================================================== */
.sf-flow{
  --sf-product-name: "ご購入の商品名";    /* 商品名 */
  --sf-product-qty: "";      /* 数量（例 "30錠/1か月分"） */
  --sf-product-price: "¥X,XXX";  /* 商品の価格（税込） */
  --sf-product-total: "¥X,XXX";  /* 支払い予定額＝価格＋送料（税込1万円以上は送料無料） */
}
/* ===================== ここから下は変えなくてよい ===================== */
.sf-flow{--sf-paper:var(--sf-card-bg);--sf-accent-soft:var(--sf-note-bg);--sf-ink-soft:var(--ink-soft,#5a6270);--sf-radius:var(--radius,14px);background:var(--sf-bg);padding:var(--sf-pad);border-radius:var(--sf-radius)}
.sf-flow[style*="--sf-bg"]{--sf-pad:16px}  /* HTML の style で背景色を入れたときは、余白も自動でつける */
/* STEP の一覧（スワイプしなくても流れが分かる） */
.sf-map{list-style:none;margin:0 0 14px;padding:12px 14px;background:var(--sf-paper);border:1px solid var(--sf-line);border-radius:var(--sf-radius);display:grid;grid-template-columns:1fr;gap:6px}
.sf-map li{display:flex;align-items:center;gap:10px;font-size:14px;line-height:1.5;color:var(--sf-ink)}
.sf-map__no{flex:none;width:24px;height:24px;border-radius:50%;background:var(--sf-navy);color:#fff;font-size:12px;font-weight:700;line-height:24px;text-align:center}
.sf-fee{margin:0 0 14px;font-size:13.5px;line-height:1.75;color:var(--sf-ink)}
/* スワイプの案内（右寄せ。右手の親指の近く） */
.sf-hint{display:flex;justify-content:flex-end;align-items:center;gap:6px;margin:0 0 8px;font-size:13px;font-weight:700;color:var(--sf-accent)}
.sf-hint__pc{display:none}
.sf-hint__arrow{display:inline-block;font-size:18px;animation:sf-nudge 1.6s ease-in-out infinite}
@keyframes sf-nudge{0%,60%,100%{transform:translateX(0)}30%{transform:translateX(-8px)}}
@media (prefers-reduced-motion:reduce){.sf-hint__arrow{animation:none}}
/* 横並び。カードは画面幅の8割にして、次のカードを右端に覗かせる */
.sf-track{list-style:none;display:flex;align-items:stretch;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;margin:0 -16px;padding:4px 16px 14px;scroll-padding-left:16px;scrollbar-width:thin}
.sf-card{flex:0 0 80%;max-width:320px;box-sizing:border-box;scroll-snap-align:start;scroll-snap-stop:always;background:var(--sf-paper);border:1px solid var(--sf-line);border-radius:var(--sf-radius);padding:12px 12px 10px;box-shadow:0 4px 14px rgba(27,42,74,.07)}
.sf-card__head{display:flex;align-items:center;gap:8px;margin:0 0 8px}
.sf-step__no{flex:none;margin:0;background:var(--sf-navy);color:#fff;font-size:11px;font-weight:700;letter-spacing:.06em;padding:3px 9px;border-radius:999px}
.sf-card__title{flex:1;font-size:14px;font-weight:700;line-height:1.4;color:var(--sf-navy)}
.sf-card__count{flex:none;font-size:11px;font-weight:700;color:var(--sf-ink-soft)}
.sf-card__lead{margin:0 0 10px;font-size:13.5px;line-height:1.75;color:var(--sf-ink)}
.sf-card--note{background:var(--sf-accent-soft);border-color:var(--sf-accent)}
.sf-note__label{margin:6px 0 4px;font-size:12px;font-weight:700;color:var(--sf-accent)}
.sf-note__title{margin:0 0 8px;font-size:20px;font-weight:700;line-height:1.5;color:var(--sf-navy)}
.sf-note__text{margin:0;font-size:14.5px;line-height:1.85;color:var(--sf-ink)}
.sf-shot{margin:0}
.sf-shot__count{margin:0 0 6px;font-size:12px;font-weight:700;color:var(--sf-ink-soft)}
.sf-screen{position:relative;border:1px solid var(--sf-line);border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 4px 14px rgba(27,42,74,.10)}
.sf-screen img{display:block;width:100%;height:auto}
.sf-screen{container-type:inline-size}
/* 画面の上に重ねる商品（写真・名前・価格）。文字の大きさは画面の幅に合わせて伸び縮みする */
.sf-ov{position:absolute;display:flex;overflow:hidden;color:#1a1a1a;line-height:var(--lh,1.2);word-break:break-all;font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP","Yu Gothic",Meiryo,sans-serif;font-size:calc(var(--fs,3) * 2.7px);font-size:calc(var(--fs,3) * 1cqw)}
.sf-ov:not([data-f="name"]){white-space:nowrap}
.sf-ov[data-f="name"]::before{content:var(--sf-product-name)}
.sf-ov[data-f="qty"]::before{content:var(--sf-product-qty)}
.sf-ov[data-f="price"]::before{content:var(--sf-product-price)}
.sf-ov[data-f="total"]::before{content:var(--sf-product-total)}
.sf-screen .sf-ov--img img{width:100%;height:100%;object-fit:contain}
.sf-box{position:absolute;border:3px solid var(--sf-accent);border-radius:8px;box-shadow:0 0 0 2px rgba(255,255,255,.9)}
.sf-mark{position:absolute;transform:translate(-50%,-50%);width:26px;height:26px;border-radius:50%;background:var(--sf-accent);color:#fff;font-size:14px;font-weight:700;line-height:26px;text-align:center;border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.sf-shot figcaption{padding:10px 2px 0}
.sf-shot__cap{margin:0 0 6px;font-size:14px;font-weight:700;line-height:1.6;color:var(--sf-navy)}
.sf-pts{list-style:none;margin:0;padding:0}
.sf-pts li{display:flex;gap:8px;margin:0 0 6px;font-size:13.5px;line-height:1.7;color:var(--sf-ink)}
.sf-pts__no{flex:none;width:20px;height:20px;margin-top:2px;border-radius:50%;background:var(--sf-accent);color:#fff;font-size:12px;font-weight:700;line-height:20px;text-align:center}
@media (min-width:768px){
.sf-map{grid-template-columns:1fr 1fr}
.sf-hint__sp{display:none}
.sf-hint__pc{display:inline}
.sf-track{margin:0;padding:4px 0 14px;scroll-padding-left:0}
.sf-card{flex-basis:300px}
}