/* ==========================================================================
   SULFUR PRODUCTS（イオウシリーズ 商品一覧）ページ
   Figma: PC_03_Products_sulfur (node 379:4322) / SP_03_Products_sulfur (node 4046:1896)
   tasks/ProductsSulfur.md の指示に基づき、1つのHTML構造をCSSメディアクエリ（768px）で
   出し分ける、モバイルファーストの通常のレスポンシブ実装。
   ヘッダー／ドロワー／フッターは index.html 等と共通（css/style.css）。
   ========================================================================== */

/* ハンバーガーボタン（#hm）は index.html と共通で css/style.css 側が持つ。
   以前はKVキャンバス内に .sfp-header__menu を置いていたが、
   スケール対象のキャンバス内だとボタンまで拡大縮小され、
   スクロールで流れてしまうため、position:fixed の共通ボタンに統一した。 */

.sfp {
    /* hidden ではなく clip。hidden だとスクロールコンテナになり、
     商品セクションの position:sticky（積み重ね演出）が効かなくなる
     （products-clay.css の .clay と同じ理由） */
    overflow-x: clip;
    background: #fff;
}

/* ---- 表示幅に追従する固定pxキャンバス ----
   .sfp__canvas はFigmaの基準幅（SP=500px / PC=1440px）をそのまま持つ
   固定幅のキャンバス。.sfp__viewport の中で
   transform: scale(window.innerWidth / 基準幅) することで、
   どの画面幅でも比率を保ったまま拡大縮小され、要素の重なりや
   改行位置の変化といったレイアウト崩れが起きない。
   （フッターの .pc01 / .sp01 と同じ方式。JSは js/products-sulfur.js の
   initScaleCanvas 参照） */
.sfp__viewport {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.sfp__canvas {
    width: 500px;
    transform-origin: top left;
}

/* ---- KV ---- */

.sfp-kv {
    position: relative;
}

.sfp-kv__photo {
    position: relative;
    width: 100%;
    aspect-ratio: 500 / 480;
    overflow: hidden;
}

/* Figmaの構図（青ジャー左上・黒ジャー右上・白ジャー下中央がフレームに
   ほぼ収まる）に合わせたトリミング。Figmaが返す%はKVノードが持つ元画像
   （当サイトのsulfur_kv_photo.pngとは縦横比が異なる）基準の値なので、
   そのままでは使えず、実画像でFigmaと同じ見え方になる位置を指定している */
.sfp-kv__photo img {
    display: block;
    position: absolute;
    /* 
    left: -46.98%;
    top: -136%;
    width: 181.46%;
    height: 283.5%;
    */
    max-width: none;

    left: -55.98%;
    top: -153%;
    width: 201.46%;
    height: auto;
}

/* ---- タイトル（縦書きラベル、共通パーツ） ---- */

.sfp-vlabel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    color: #fff;
}

.sfp-vlabel::before {
    content: "";
    display: block;
    width: 3px;
    height: 50px;
    background: #fff;
}

.sfp-vlabel span {
    writing-mode: vertical-rl;
    /* vertical-rl標準の文字回転（時計回り）だとFigmaの向きと逆になるため180度反転 */
    transform: rotate(180deg);
    font-family: var(--font-en);
    font-weight: 700;
    /* Figma実測（SP_03のタイトルコンポーネント 373:2779）: 28.676px /
     字送り1.4338px。ラベル全体の幅34pxはこの文字サイズから決まる */
    font-size: 28.676px;
    letter-spacing: 1.4338px;
    white-space: nowrap;
}

/* ---- 紫グラデーションゾーン（イントロ〜FEATURES〜LINEUP共通の背景） ---- */

.sfp-purple {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--pl-bg-2) 0%, var(--pl-bg) 45%, var(--pl-accent) 100%);
}

.sfp-purple__diagonal {
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.22) 55%, transparent 70%);
    pointer-events: none;
}

/* ---- 背景装飾（Figmaの「BG」レイヤー。半透明白の斜め光沢図形） ----
   Figmaでは4枚のBGがフレーム全体に対して絶対配置されているが、
   .sfp-purple / .sfp-product は overflow:hidden なので、セクションを
   またぐ図形は「またぐ先のセクションにも同じ画像を置き、topをずらす」
   ことで連続して見せている。
   座標はSP(500px基準)とPC(1440px基準)でまったく異なるため、
   ブレークポイントごとに配置と表示/非表示を切り替える。
   いずれも .sfp__canvas 内の固定pxなので、画面幅が変わっても
   ページ全体と一緒に拡大縮小され崩れない。

   Figma実測（フレーム内の絶対座標）:
     bg_4 : SP(4, 684.36)      / PC(10.29, 684.36)   1501.72×644.50
     bg_1 : SP(-874, 3525.70)  / PC(-966.47, 3645.70) 2750.60×1851.05
     bg_2 : SP(100, 4418.05)   / PC(886.68, 4538.05)  2282.90×2259.49
     bg_3 : SP(1453, …) / PC(1979.77, …) → いずれも画面外のため未使用 */

.sfp-bg {
    position: absolute;
    display: block;
    pointer-events: none;
}

/* --- SP(500px基準)。セクション開始位置: purple=482 / acne=2944 /
       white=4432 / black=5983 --- */

/* bg_4: purple内 684.36-482=202.36 */
.sfp-bg--01 {
    /* 
    left: 4px;
    top: 202.36px;
    width: 1501.72px;
    height: 644.5px;
    */
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
}

.sfp-bg--02 {
    left: 0;
    bottom: 0;
    width: 100%;
    height: auto;
}

/* bg_1: acne(3525.70-2944=581.70)から white(3525.70-4432=-906.30)へまたぐ */
.sfp-bg--02-acne {
    left: -874px;
    top: 581.7px;
    width: 2750.6px;
    height: 1851.05px;
}

.sfp-bg--02-white {
    left: -874px;
    top: -906.3px;
    width: 2750.6px;
    height: 1851.05px;
}

/* PCでのみ使う（SPではbg_1はblackまで届かない） */
.sfp-bg--02-black {
    display: none;
}

/* bg_2: white(4418.05-4432=-13.95)から black(4418.05-5983=-1564.95)へまたぐ */
.sfp-bg--03-white {
    left: 100px;
    top: -13.95px;
    width: 2282.9px;
    height: 2259.49px;
}

.sfp-bg--03-black {
    left: 100px;
    top: -1564.95px;
    width: 2282.9px;
    height: 2259.49px;
}

/* ---- イントロ（PRODUCTS説明文） ---- */

/* Figma実測(SP_03 node 4046:1911): 上パディング20px＋タイトル上端28px＝48px、
   下パディング60px。本文ブロック(380px)は画面中央に配置される */
.sfp-intro {
    position: relative;
    padding: 48px 24px 60px;
}

/* Figma実測: ラベルは左8px / 上16px（フレーム上端-4px＋上パディング20px） */
.sfp-intro__label {
    position: absolute;
    left: 8px;
    top: 16px;
    margin: 0;
}

.sfp-intro__inner {
    max-width: 380px;
    margin: 0 auto;
}

/* Figma実測: タイトル枠(高さ80px)の下端128pxから本文上端154pxまで26px。
   Figmaのテキストノード高さ(80px)に対しCSSの行ボックスは73pxになるため、
   本文の開始位置(セクション上端から154px)が合うよう差の7pxを足す */
.sfp-intro__title {
    text-align: center;
    color: var(--text-purple, #5e33be);
    margin: 0 0 33px;
}

.sfp-intro__title-en {
    margin: 0;
    font-family: var(--font-en);
    font-weight: 700;
    font-size: 19.13px;
    font-size: 24px;
}

.sfp-intro__title-jp {
    margin: 9px 0 0;
    font-family: var(--font-jp);
    font-weight: 700;
    font-size: 28.69px;
    font-size: 36px;
    margin: 0;
}

/* Figma実測(node 4046:1915): Bold 18px / 行送り30px / 幅380px。
   本文ブロックは中央(x=60)からさらに5px内側の x=65 に置かれる */
.sfp-intro__desc {
    width: 380px;
    max-width: 100%;
    margin: 0 0 0 5px;
    font-family: var(--font-jp);
    font-weight: 700;
    font-size: 18px;
    line-height: 30px;
    color: #fff;
    letter-spacing: -0.1px;
    text-align: justify;
}

.sfp-intro__desc .l-space {
    letter-spacing: 1px;
}
.sfp-intro__desc .l-space2 {
    letter-spacing: -1px;
}

/* 注釈記号は本文より小さいフォントのため、行送りを固定していても
   ベースライン位置の差で行ボックスが30px→33pxに広がってしまう。
   line-height:0にして行の高さに影響させない（Figmaは全行30px＝7行210px） */
.sfp-intro__desc sup {
    line-height: 0;
}

.sfp-intro__note {
    width: 380px;
    max-width: 100%;
    margin: 16px 0 0;
    font-family: var(--font-jp);
    font-size: 12px;
    line-height: 18px;
    color: #fff;
    text-align: right;
}

@media screen and (max-width: 767px) {
    .sfp-intro__note {
        letter-spacing: 0.2px;
    }
}

/* ---- FEATURES（01/02 共通） ---- */

.sfp-feature {
    position: relative;
    padding: 0 24px 64px;
}

@media screen and (max-width: 767px) {
    .sfp-feature.sfp-feature--01 {
        padding: 0 24px 60px 15px;
    }
}

.sfp-feature__label {
    position: absolute;
    right: 24px;
    top: 0;
    z-index: 2;
    margin: 0;
}

.sfp-feature__photo {
    position: relative;
    width: 100%;
    max-width: 380px;
    aspect-ratio: 380 / 400;
    margin: 0 auto;
    border-radius: 16px;
    overflow: hidden;
}

.sfp-feature--01 .sfp-feature__photo {
    margin-left: 0;
}

.sfp-feature__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sfp-feature__card {
    position: relative;
    z-index: 1;
    max-width: 380px;
    margin: -152px auto 0;
}

.sfp-feature__num {
    box-sizing: border-box;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 103px;
    height: 69px;
    background: #fff;
    color: var(--text-purple, #5e33be);
    font-family: "DIN 2014", var(--font-en);
    font-weight: 700;
    font-size: 58.875px;
    line-height: 1;
}

.sfp-feature__num span {
    display: block;
    /* フォールバックフォント(Albert Sans)はディセンダー分の余白が
     ベースライン下に大きく確保されており、そのままflexで中央寄せすると
     数字の実際のインクは中心より上に寄って見え、下側に隙間ができる。
     視覚的な中央に補正するため少し下にずらす */
    transform: translateY(3px);
}

/* Figma実測: 「01」は右寄せ、「02」は左寄せで左右非対称の配置になっている */
.sfp-feature--01 .sfp-feature__num {
    margin-left: auto;
}

/* ---- SPの02は01と上下が逆（Figma実測: SP_03 node 4046:1926） ----
   01=「写真が上・カードが下」に対して、02は「カードが上・写真が右下」。
   HTMLのDOM順は写真→カードのまま（PCの絶対配置がその順を前提にしている）
   なので、flexのorderで見た目の順序だけ入れ替える。 */
.sfp-feature--02 .sfp-feature__inner {
    display: flex;
    flex-direction: column;
}

/* Figma実測: カード群(380px)は中央寄せで上端0。「02」バッジ・本文とも
   カード左端から8px内側に入るので、border-box前提でpadding-leftで寄せる */
.sfp-feature--02 .sfp-feature__card {
    order: 0;
    margin-top: 0;
    padding-left: 8px;
}

@media screen and (max-width: 767px) {
    .sfp-feature--01 .sfp-feature__card {
        padding-left: 3px;
    }

    .sfp-feature--02 .sfp-feature__card {
        padding-left: 0;
    }
}

/* Figma実測: 写真は左106px（=右端がセクションのpaddingから10pxはみ出す）、
   上245pxでカード（下端385px）に140px重なる */
.sfp-feature--02 .sfp-feature__photo {
    order: 1;
    margin: -140px -10px 0 auto;
    background: #fff;
}

/* Figma実測: 767×701pxの画像をマスク(380×400px)内で左-57px/上-94pxに
   配置したトリミング。SPは可変幅なのでマスクサイズに対する%で指定する */
.sfp-feature--02 .sfp-feature__photo img {
    /* 
    position: absolute;
    left: -15%;
    top: -23.5%;
    width: 201.842%;
    height: 175.25%;
    max-width: none;
    object-fit: fill;
    */
    width: 132%;
    height: auto;
    object-fit: fill;
    margin-left: -11%;
    position: relative;
    top: 20px;
}

/* SPのカード内タイポグラフィはFigma実測値（SP_03 node 4047:2695）。
   カードの高さが02の写真の重なり量（-140px）の前提になるため、
   padding/gap/font-sizeはFigmaの小数値をそのまま使う */
.sfp-feature__body {
    background: rgba(255, 255, 255, 0.7);
    padding: 26.761px;
    display: flex;
    flex-direction: column;
    gap: 5.352px;
}

.sfp-feature__title {
    margin: 0;
    font-family: var(--font-jp);
    font-weight: 700;
    font-size: 26px;
    color: var(--text-purple, #5e33be);
}

.sfp-feature__desc {
    margin: 0;
    font-family: var(--font-jp);
    font-weight: 500;
    font-size: 16px;
    line-height: 26.761px;
    color: var(--text-purple, #5e33be);
}

.sfp-feature--02 .sfp-feature__desc {
    margin-bottom: 0px;
}

.sfp-feature__note {
    margin: 0;
    font-family: var(--font-jp);
    font-weight: 400;
    font-size: 12px;
    line-height: 20px;
    color: var(--text-purple, #5e33be);
}

/* Figmaの注釈記号は「上付き」ではなく同じベースライン上の小さい文字
   （26px→16.77px / 16px→10.32px ＝ 約0.645em）。UA既定の
   vertical-align:super のままだと行ボックスが上に広がり、カード高さが
   Figma実測(385px)より大きくなって02の写真の重なり量がずれる */
.sfp-feature__title sup,
.sfp-feature__desc sup {
    font-size: 0.645em;
    vertical-align: baseline;
    vertical-align: super;
}

.sfp-feature__credit {
    margin: 16px 0 0;
    font-family: var(--font-jp);
    font-size: 11px;
    color: #fff;
    text-align: right;
}

/* ---- LINEUP（アンカーリンク） ---- */

/* Figma実測(SP_03 node 4046:1932): 上段カードがラップ上端(y=0)から始まるため
   上パディングは0。下は644px-595px=49px */
.sfp-anchors {
    position: relative;
    padding: 0 24px 49px;
}

/* Figma実測: SPではLINEUPラベルがフレーム外(x=700 / フレーム幅500px)に
   置かれており描画されない。PC(768px〜)でのみ表示する */
.sfp-anchors__label {
    display: none;
}

/* Figma実測(SP_03 node 4046:1932): SPは縦1列ではなく「上段1枚（中央）＋
   下段2枚」のピラミッド配置。下段は左52px/右447pxで横19.46px空く。
   カード幅より画面が狭い場合に備え列幅はminmaxで縮められるようにする */
.sfp-anchors__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 190.476px));
    justify-content: center;
    column-gap: 19.46px;
    row-gap: 0;
}

/* 後方の .sfp-anchor { max-width: 100% } と同詳細度で負けるため、
   グリッド側を含めた2クラス指定にする */
.sfp-anchors__grid .sfp-anchor--acne {
    grid-column: 1 / -1;
    justify-self: center;
    /* 2列ぶんの領域に置かれるため、狭い画面で上段だけ大きく残らないよう
     下段と同じ列幅を上限にする（PCは十分広いので190.476pxのまま） */
    max-width: calc((100% - 19.46px) / 2);
}

.sfp-anchor {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 190.476px;
    /* 狭い画面ではグリッドの列幅まで縮める（PCは十分広いので影響しない） */
    max-width: 100%;
    height: 289.524px;
    padding-top: 62px;
    border-radius: 125px;
    box-shadow: 6.095px 6.095px 10.667px rgba(0, 0, 0, 0.15);
    text-decoration: none;
    box-sizing: border-box;
}

.sfp-anchor--acne {
    background: #7dc9ff;
}
.sfp-anchor--white {
    background: #f2f2f2;
}
.sfp-anchor--black {
    background: #5a5a5a;
}

.sfp-anchor__photo {
    width: 117.333px;
    height: 117.333px;
    border-radius: 50%;
    overflow: hidden;
}

.sfp-anchor__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sfp-anchor__text {
    margin: 0;
    font-family: var(--font-jp);
    /* Figma実測: Noto Sans JP Bold 16px / 行送り20.286px */
    font-weight: 700;
    font-size: 16px;
    line-height: 20.286px;
    text-align: center;
    color: #fff;
}

.sfp-anchor--white .sfp-anchor__text {
    color: #383838;
}

/* Figmaの注釈記号は上付きではなく同じベースライン上の小さい文字（0.645em） */
.sfp-anchor__text sup,
.sfp-intro__desc sup {
    font-size: 0.645em;
    vertical-align: baseline;
    vertical-align: super;
}

.sfp-anchor__arrow {
    position: absolute;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    width: 22.095px;
    height: 10.667px;
}

.sfp-anchors__note {
    margin: 4px 0 0;
    font-family: var(--font-jp);
    font-size: 12px;
    line-height: 18px;
    color: #fff;
    text-align: right;
}

/* ---- 商品詳細（3商品共通テンプレート） ---- */

/* ==========================================================================
   商品セクションの積み重ね演出（products-clay.html と同じ方式）

   .sfp-product ×3 をそれぞれ position:sticky で画面上端に貼り付ける。
   スクロールすると次のセクションが下から上がってきて手前を覆い、
   上端に達したら今度はそれが貼り付く＝上部が固定されたまま商品が切り替わる。

   重要: 貼り付くのは .sfp-product 自身（等倍の空間）。Figmaのデザイン座標
   （PC=1440px / SP=500px）は中身の .sfp-product__inner を scale して作る。
   scale を sticky の「外側」に置くと sticky が (k-1)×scrollY ぶんずれるため、
   KV〜LINEUPで使っている .sfp__canvas ではこの3セクションを包まない。

   重要: 祖先（html / body / .sfp）の overflow-x は hidden ではなく clip。
   ========================================================================== */

.sfp-pin__stage {
    position: relative;
}

/* 貼り付いた面が次の面に覆われるまで留まる距離（＝何も動かない空スクロール）。
   この分だけ次の面がやってくるのが遅れる。
   中身は transform: scale() した .sfp-product__inner の中にあり面の高さから
   切り離されているため、Figmaのデザイン座標も一切動かない。

   滞留ぶんが画面に見えないようにする方法はPC/SPで違う。
     SP … 中身が画面より高いので、中身の下端を画面下端に合わせて貼り付ければ
           滞留ぶんはまるごと画面の外（下）に出る（js/products-sulfur.js）。
     PC … 中身は 700px × 倍率 しかないので上の手が使えない。代わりに滞留中は
           次の面を間隔ぶんだけ引き上げて中身の直下に留める（下の sfp-hold）。
   どちらも「滞留のあいだ画面上では何も動かない」という同じ見え方になる。

   長さの調整は js/products-sulfur.js の PC_DWELL / SP_DWELL_RATIO で行う。
   ここの値はJSが動かないときのフォールバックなので、変えるときは両方そろえること。 */
.sfp-pin {
    --sfp-dwell: 40vh;
}

/* デザイン座標をそのまま持つ内側。倍率 --sfp-k はJSが入れる */
.sfp-pin.is-pinned .sfp-product__inner {
    width: 500px;
    transform: scale(var(--sfp-k, 1));
    transform-origin: top left;
}

.sfp-pin.is-pinned .sfp-product {
    position: sticky;
    overflow: hidden;
    /* SPは中身が画面より背が高いので、高さと貼り付き位置(top)は
     js/products-sulfur.js が実測して入れる */
    padding: 0;
    /* z-index は指定しない。DOM順で後のセクションが自然に手前に来る */
}

/* 貼り付き時はセクション側のpaddingを内側（デザイン座標）へ移す */
.sfp-pin.is-pinned .sfp-product__inner {
    box-sizing: border-box;
    padding: 0 24px 64px;
    padding: 0 24px 100px;
}

.sfp-product {
    position: relative;
    overflow: hidden;
    color: #fff;
    padding: 0 24px 64px;
    /* 面の色は商品ごとの --panel-bg。継ぎ目対策の box-shadow でも同じ値を使うため、
     背景色を直接書かずカスタムプロパティ経由にしている（貼り付き時の指定を参照） */
    background: var(--panel-bg);
}

.sfp-product--acne {
    --panel-bg: #7dc9ff;
}
.sfp-product--white {
    --panel-bg: #f2f2f2;
    color: #383838;
}
.sfp-product--black {
    --panel-bg: #5a5a5a;
}

.sfp-product__wordmark {
    position: absolute;
    left: -18px;
    top: -12px;
    margin: 0;
    font-family: var(--font-en);
    font-weight: 400;
    /* Figma実測(SP_03 node 4048:2837 / PCも同値): 160px・行送り160px。
     SPは2行に折り返すのでテキストノード高さは320pxになる */
    font-size: 160px;
    line-height: 1;
    white-space: nowrap;
    opacity: 0.9;
    color: #fff;
    pointer-events: none;
}

@media screen and (max-width: 767px) {
    #acne .sfp-product__wordmark {
        top: -24px;
    }

    #black .sfp-product__wordmark {
        top: -24px;
    }
}

/* Figma実測(SP_03 node 4048:2882): SPのWHITEはACNE/BLACKと同じく
   上端配置（y=-27）。下端配置になるのはPCのみ（メディアクエリ側で上書き） */
.sfp-product--white .sfp-product__wordmark {
    color: #c0c0c0;
    top: -27px;
    bottom: auto;
}

.sfp-product__wordmark--pc {
    display: none;
}

.sfp-product__hero {
    order: 1;
    position: relative;
    width: 354px;
    height: 354px;
    margin: 56px auto 0;
}

.sfp-product--acne .sfp-product__hero {
    width: 353.883px;
    height: 353.883px;
    margin-bottom: 30px;
}
.sfp-product--white .sfp-product__hero {
    width: 354.686px;
    height: 354.686px;
    margin-bottom: 30px;
}
.sfp-product--black .sfp-product__hero {
    width: 353.776px;
    height: 353.776px;
    margin-bottom: 30px;
}

.sfp-product__hero-ring {
    position: absolute;
}

/* Figma実測: リングは写真と同心円ではなく、商品ごとに実測したサイズ・
   オフセットを持つ非対称な装飾（写真基準の相対値） */
.sfp-product--acne .sfp-product__hero-ring {
    left: 2.92%;
    top: -1.635%;
    width: 99.08%;
    height: 107.55%;
}

.sfp-product--white .sfp-product__hero-ring {
    left: 5.335%;
    top: -0.124%;
    width: 97.38%;
    height: 104.89%;
}

.sfp-product--black .sfp-product__hero-ring {
    left: 4.675%;
    top: 0.705%;
    width: 97.41%;
    height: 104.95%;
}

.sfp-product__hero-ring img {
    display: block;
    width: 100%;
    height: 100%;
}

.sfp-product__hero-photo {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    overflow: hidden;
}

.sfp-product__hero-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sfp-product__body {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-top: 24px;
}

.sfp-product__intro {
    order: 2;
    max-width: 420px;
    margin: 0 auto;
}

/* Figma実測(SP_03 node 4048:2850): Noto Sans JP Bold 34px / 行送り49px */
.sfp-product__headline {
    margin: 0;
    font-family: var(--font-jp);
    font-weight: 700;
    font-size: 34px;
    line-height: 49px;
}

.sfp-product__headline sup {
    font-size: 20px;
}


/* Figma実測(node 4048:2851): Medium 18px / 行送り30px */
.sfp-product__desc {
    margin: 16px 0 0;
    font-family: var(--font-jp);
    font-weight: 500;
    font-size: 18px;
    line-height: 30px;
}

.sfp-product__desc sup {
    font-size: 0.65em;
}

/* Figma実測(node 4048:2852): 470px枠に232×236pxのブロックを
   上段2枚（間隔4px）＋下段1枚中央（上との間隔20px）で配置 */
.sfp-product__ingredients {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px 4px;
    margin-top: 16px;
    /* Figma実測(node 4048:2852 ほか): 成分の並びだけ本文(420px)より広い
     470px枠(Frame 168)に置かれるため、左右に25pxずつはみ出させる */
    width: 470px;
    max-width: calc(100% + 50px);
    margin-left: -25px;
    margin-right: -25px;
}

.sfp-product__ingredient {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 13.012px;
    flex: 0 1 232px;
    max-width: calc(50% - 2px);
}

/* Figma実測: 円形画像は195.176px（232pxブロックの中で中央寄せ） */
.sfp-product__ingredient img {
    display: block;
    width: 195.176px;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    object-fit: cover;
    background-color: #fff;
}

/* Figma実測(I4048:2853;2174:1606): Medium 16px。行送りは47.617pxと
   返るが、ブロック全体の高さ236px＝画像195.176px＋間隔13.012px＋ラベル
   から逆算するとラベルの実高さは27.8pxなので、そちらに合わせる */
.sfp-product__ingredient p {
    margin: 0;
    font-family: var(--font-jp);
    font-weight: 500;
    font-size: 16px;
    line-height: 27.8px;
    text-align: center;
}

.sfp-product__ingredient p sup {
    font-size: 0.65em;
}

/* Figma実測(SP node 4048:2944): BLACKの成分ブロックだけACNE/WHITEより
   わずかに小さく（224×227・画像187.397px・内側の間隔12.493px）、
   行間もほぼ詰まっている（上下の間隔2px・左右0px）。
   ラベル高さは 227-187.397-12.493＝27.11px */
.sfp-product--black .sfp-product__ingredients {
    gap: 2px 0;
}

.sfp-product--black .sfp-product__ingredient {
    flex-basis: 224px;
    max-width: 50%;
    gap: 12.493px;
}

.sfp-product--black .sfp-product__ingredient img {
    width: 187.397px;
}

.sfp-product--black .sfp-product__ingredient p {
    line-height: 27.11px;
}

.sfp-product__note {
    margin: 24px 0 0;
    font-family: var(--font-jp);
    font-size: 12px;
    line-height: 1.5;
}

.sfp-product--black .sfp-product__note br {
    display: none;
}

@media screen and (min-width: 768px) {
    .sfp-product--black .sfp-product__note br {
        display: block;
    }
}

/* Figma実測(SP_03 node 4048:2841): 420px幅の箱に、左＝ジャー写真
   （left:11px / top:39px / 150px）、右＝206px幅の列（left:214px）へ
   商品名・医薬部外品バッジ・ボタン2つが縦に並ぶ。HTMLはPC都合で
   「buy-top（写真＋名前）→ buy-btns」の順なので、gridで配置し直す */
.sfp-product__buy {
    order: 3;
    max-width: 420px;
    margin: 32px auto 0;
    display: grid;
    grid-template-columns: 214px 206px;
    align-items: start;
}

/* 中の写真と名前列を直接グリッドアイテムにする */
.sfp-product__buy-top {
    display: contents;
}

.sfp-product__buy-jar {
    grid-column: 1;
    grid-row: 1 / span 2;
    margin: 39px 0 0 11px;
    flex: 0 0 auto;
    width: 150px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
}

.sfp-product--black .sfp-product__buy-jar {
    width: 151px;
}

.sfp-product__buy-jar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sfp-product__buy-col {
    grid-column: 2;
    grid-row: 1;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    /* Figma実測: 右列(206px)の中で商品名・バッジとも中央寄せ */
    align-items: center;
    text-align: center;
    gap: 8px;
    min-width: 0;
}

/* Figma実測(node 4048:2843): Medium 18px / 行送り30px（2行で60px） */
.sfp-product__buy-name {
    margin: 0;
    font-family: var(--font-jp);
    font-weight: 500;
    font-size: 18px;
    line-height: 30px;
}

.sfp-product__quasi {
    display: inline-block;
    padding: 3px 8px 5px;
    border: 1px solid currentColor;
    font-family: var(--font-jp);
    font-size: 12px;
    line-height: 1;
    margin-top: 10px;
}

/* Figma実測: バッジ下端86pxからボタン上端106pxまで20px */
.sfp-product__buy-btns {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 20px;
}

/* Figma実測(SP node 4048:2886): WHITEは医薬部外品バッジが無いぶん中身が
   下寄りになる（写真 10,67 ／ 商品名 y=38 ／ ボタン y=109・173） */
.sfp-product--white .sfp-product__buy-jar {
    margin-top: 67px;
    margin-left: 10px;
}

.sfp-product--white .sfp-product__buy-col {
    padding-top: 38px;
}

.sfp-product--white .sfp-product__buy-btns {
    margin-top: 11px;
}

/* Figma実測(SP node 4048:2934): BLACKも医薬部外品バッジが無い。
   写真 9,39（151px）／商品名 y=11 ／ボタン y=83・147 */
.sfp-product--black .sfp-product__buy-jar {
    margin-top: 39px;
    margin-left: 9px;
}

.sfp-product--black .sfp-product__buy-col {
    padding-top: 11px;
}

.sfp-product--black .sfp-product__buy-btns {
    margin-top: 12px;
}

.sfp-product__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 56px;
    background: rgba(90, 90, 90, 0.8);
    border: 1px solid #fff;
    color: #fff;
    font-family: var(--font-jp);
    font-weight: 500;
    font-size: 18px;
    letter-spacing: 1.8px;
    cursor: pointer;
    box-sizing: border-box;
}

/* Figma実測: ボタン背景は各商品の背景色を0.8透過にしたもの
   （Clayシリーズの0.5とは異なる）。ボーダー/文字は常に白系だが
   whiteだけ背景が白系のため濃色（#383838）で視認性を確保する */
.sfp-product--acne .sfp-product__btn {
    background: rgba(125, 201, 255, 0.8);
}

.sfp-product--white .sfp-product__btn {
    background: rgba(242, 242, 242, 0.8);
    border-color: #383838;
    color: #383838;
}

.sfp-product--black .sfp-product__btn {
    background: rgba(90, 90, 90, 0.8);
}

/* ---- 使用方法／全成分モーダル（Clayシリーズと同じ仕組みを流用） ---- */

.sfp-usage-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sfp-usage-modal[hidden] {
    display: none;
}

.sfp-usage-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
}

.sfp-usage-modal__panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 340px;
    max-height: 80vh;
    overflow-y: auto;
    background: #fff;
    color: #383838;
    padding: 32px 24px 28px;
    box-sizing: border-box;
}

@media screen and (max-width: 767px) {
    .sfp-usage-modal__panel {
        max-width: 460px;
        padding: 42px 30px 59px;
    }
}

@media screen and (min-width: 768px) {
    .sfp-usage-modal__panel {
        max-width: 800px;
        padding: 42px 80px 65px;
    }
}

.sfp-usage-modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 24px;
    height: 24px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
}

@media screen and (max-width: 767px) {
    .sfp-usage-modal__close {
        top: 22px;
        right: 22px;
    }
}

@media screen and (min-width: 768px) {
    .sfp-usage-modal__close {
        top: 30px;
        right: 30px;
    }
}

.sfp-usage-modal__close img {
    width: 100%;
}

.sfp-usage-modal__title {
    margin: 0 0 16px;
    font-family: var(--font-jp);
    font-weight: 700;
    font-size: 20px;
    text-align: center;
}

@media screen and (min-width: 768px) {
    .sfp-usage-modal__title {
        margin-bottom: 35px;
    }
}

.sfp-usage-modal__text {
    margin: 0;
    font-family: var(--font-jp);
    font-size: 14px;
    line-height: 1.8;
    white-space: pre-line;
}

/* ==========================================================================
   PC（768px〜）
   ========================================================================== */

@media (min-width: 768px) {
    br.sp-only {
        display: none;
    }
    /* --- 背景装飾のPC(1440px基準)配置。セクション開始位置:
         purple=528 / acne=2945 / white=3645 / black=4345 --- */

    /* bg_4: purple内 684.36-528=156.36 */
    .sfp-bg--01 {
        /* 
        left: 10.29px;
        top: 156.36px;
        width: 1501.72px;
        height: 644.5px;
        */
        left: 0;
        top: 0;
        width: 100%;
        height: auto;
    }

    /* PCではbg_1はwhiteから始まるのでacne側は使わない */
    .sfp-bg--02-acne {
        display: none;
    }

    /* bg_1: white(3645.70-3645=0.70)から black(3645.70-4345=-699.30)へまたぐ */
    .sfp-bg--02-white {
        left: -966.47px;
        top: 0.7px;
        width: 2750.6px;
        height: 1851.05px;
    }

    .sfp-bg--02-black {
        display: block;
        left: -966.47px;
        top: -699.3px;
        width: 2750.6px;
        height: 1851.05px;
    }

    /* PCではbg_2はblackから始まるのでwhite側は使わない */
    .sfp-bg--03-white {
        display: none;
    }

    /* bg_2: black内 4538.05-4345=193.05 */
    .sfp-bg--03-black {
        left: 886.68px;
        top: 193.05px;
        width: 2282.9px;
        height: 2259.49px;
    }

    .sfp-kv__photo {
        aspect-ratio: 1440 / 448;
    }

    .sfp-kv__photo img {
        position: static;
        left: auto;
        top: auto;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 50% 65%;
    }

    /* PCの基準幅は1440px。以下の各セクションのpx指定はすべて
     この1440px基準キャンバス内でのFigma実測値。
     （viewport側のルールはSP・PC共通なのでベース側の指定を使う） */
    .sfp__canvas {
        width: 1440px;
    }

    .sfp-intro {
        padding: 80px 40px;
    }

    /* Figma実測: イントロの実コンテンツ幅はFEATURES/LINEUPと同じく1200pxで、
     1440px基準キャンバスの左右に120pxずつマージンが空く。ラベルは
     その1200px枠の左端（＝キャンバス左端から120px）に配置される */
    .sfp-intro__label {
        left: 120px;
        top: 80px;
    }

    .sfp-intro__title {
        width: 473px;
        margin: 0 auto 40px;
    }

    .sfp-intro__title-en {
        font-size: 30px;
    }

    .sfp-intro__title-jp {
        margin-top: 11px;
        margin-top: 0;
        font-size: 46px;
    }

    .sfp-intro__inner {
        max-width: 896px;
        margin: 0 auto;
    }

    .sfp-intro__desc {
        width: auto;
        /* SPのみ本文が5px内側に寄る（PCはFigma上 x=0） */
        margin-left: 0;
        font-size: 22px;
        line-height: 2.3;
        text-align: justify;
        letter-spacing: auto;
    }

    .sfp-intro__desc .l-space {
        letter-spacing: 1px;
    }

    .sfp-intro__desc .l-space2 {
        letter-spacing: 1px;
    }

    .sfp-intro__note {
        width: auto;
        text-align: right;
    }

    /* Figma実測: FEATURESの実コンテンツ幅は1200pxで、1440px基準キャンバスの
     中央に配置される（左右マージン等分）。
     style.cssのグローバル box-sizing:border-box により、widthにpadding分
     が含まれてしまう。中身（.sfp-feature__inner）の実質幅を1200pxに
     保つため、width は content幅1200px + 左右padding80px = 1280px にする */
    .sfp-feature {
        padding: 0 40px 64px;
        width: 1280px;
        max-width: none;
        margin: 0 auto;
    }

    /* Figma実測: 01フレームはカード（写真下端より約49px下まで）の分だけ
     ベースのpadding-bottom(64px)では足りず、02が始まる前に695pxの
     セクション高さが必要（カード下端から約48pxの余白が空く） */
    .sfp-feature--01 {
        padding-bottom: 117px;
    }

    .sfp-feature__label {
        right: 40px;
        top: 0;
    }

    .sfp-feature__inner {
        position: relative;
        height: 578px;
    }

    .sfp-feature__photo {
        position: absolute;
        top: 0;
        max-width: none;
        width: 770px;
        height: 578px;
    }

    .sfp-feature__card {
        position: absolute;
        margin: 0;
        width: 704px;
        max-width: none;
    }

    .sfp-feature--01 .sfp-feature__photo {
        left: 0;
    }

    .sfp-feature--01 .sfp-feature__card {
        left: 496px;
        top: 316px;
    }

    .sfp-feature--02 .sfp-feature__inner {
        /* Figma実測: 02フレームはカード上端(y:0)を基準に、写真が154px
       下にずらして配置される分、全体の高さが732pxまで必要になる。
       PCは写真・カードとも絶対配置なので、SP用のflex(order)は解除する */
        display: block;
        height: 732px;
    }

    .sfp-feature--02 .sfp-feature__photo {
        top: 154px;
        right: 0;
        /* SP用の重なり・はみ出し量（margin）は絶対配置にも効いてしまうため打ち消す */
        margin: 0;
    }

    /* Figma実測: この画像は元写真の縦横比(1252x1144)がマスク枠(770x578)と
     異なる比率でトリミングされている。object-fit:coverだと縦横比が
     たまたま近いため意図した位置でクロップされないので、実測pxで
     直接配置する */
    .sfp-feature--02 .sfp-feature__photo img {
        /* 
        position: absolute;
        left: -45px;
        top: -217px;
        width: 1252px;
        height: 1144px;
        max-width: none;
        object-fit: fill;
      */
        position: static;
        width: 100%;
        height: auto;
        max-width: 100%;
        margin-left: 0;
    }

    .sfp-feature--02 .sfp-feature__card {
        left: 0;
        top: 0;
        /* SP用の8px内寄せはPCでは不要（PCはカード幅704pxちょうどで配置する） */
        padding-left: 0;
    }

    .sfp-feature__num {
        box-sizing: content-box;
        width: fit-content;
        min-width: 84px;
        height: 66px;
        padding: 6px 24px;
        font-size: 66px;
        line-height: 66px;
    }

    /* padding/gap/font-sizeのSP値はFigmaのSPカード実測値なので、PCはPCの
     実測値に戻す（gap・注釈はSP側で小数値・12pxに変えているため明示的に上書き） */
    .sfp-feature__body {
        padding: 40px;
        gap: 8px;
    }

    .sfp-feature__note {
        font-size: 12px;
        line-height: 1.6;
    }

    .sfp-feature__title {
        font-size: 36px;
    }

    .sfp-feature__desc {
        font-size: 18px;
        line-height: 2.1;
    }

    .sfp-feature--02 .sfp-feature__desc {
        margin-bottom: 60px;
    }

    .sfp-feature__credit {
        margin: 16px 0 0;
    }

    .sfp-anchors {
        padding: 40px 40px 100px;
        max-width: none;
    }

    /* Figma実測: LINEUPもイントロ／FEATURESと同じく実コンテンツ幅1200px
     （1440px基準キャンバスの左右120pxマージン）の右端にラベルが揃う */
    .sfp-anchors__label {
        /* SPでは非表示にしているのでPCで戻す */
        display: flex;
        justify-content: center;
        position: absolute;
        right: 120px;
        top: 40px;
        margin: 0;
    }

    /* SPはピラミッド配置のgridなので、PCは横1列のflexに戻す */
    .sfp-anchors__grid {
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 24px;
    }

    /* 以下はSPをFigma実測値に合わせた際の共通プロパティの打ち消し。
     FigmaのSP/PCで同じ値が指定されている箇所もあるが、今回はSP調整の
     依頼のためPCの見た目は従来のまま維持する */
    .sfp-vlabel span {
        font-size: 20px;
        font-size: 28px;
        letter-spacing: 1px;
    }

    .sfp-anchor__text {
        font-weight: 500;
        font-size: 15px;
        line-height: 1.35;
    }

    .sfp-anchors__note {
        max-width: 643px;
        margin: 24px auto 0;
    }

    /* Figma実測: テキストノードは y=-24, height=160（= font-size160px ×
     line-height1）と一致する。下の余白はフォント内部のディセンダー領域に
     よるもので、Figma上のテキストノードにも同じ分だけ確保されているため、
     詰めるとFigmaより文字が上にずれてしまう。line-height:1のまま維持する */
    .sfp-product__wordmark {
        left: -18px;
        top: -24px;
        font-size: 160px;
    }

    /* Figma実測: テキストノードは y=564, height=160（セクション高さ700に
     対して下端が700+24=724まではみ出す）。ACNE/BLACKのtop:-24pxと対称に
     なる値で、下端から24pxはみ出させる必要がある */
    .sfp-product--white .sfp-product__wordmark {
        top: auto;
        bottom: -24px;
    }

    .sfp-product__wordmark--sp {
        display: none;
    }

    .sfp-product__wordmark--pc {
        display: block;
    }

    .sfp-product {
        padding: 0;
    }

    .sfp-product__inner {
        width: 1440px;
        overflow: hidden;
    }

    /* PCはFigmaで1440×700の固定なので、高さは計算で書けて top:0 で貼り付く
     （SPのような実測は不要） */
    .sfp-pin.is-pinned .sfp-product {
        top: 0;
        /* --sfp-h は 700px × 倍率 を整数pxに丸めたもの（JSが入れる） */
        height: var(--sfp-h, calc(700px * var(--sfp-k, 1)));
        /* 継ぎ目対策。面の背景を下へ120pxだけ張り出させる。
         box-shadow はボックスの外に描かれるのでレイアウトには影響せず、
         overflow:hidden にも切られない。次の面／フッターが常に上に描かれるため
         正常時は見えないが、端末の拡大率が小数（例: 165% → dpr 1.65）で
         境目が小数ピクセルに乗ったときに、白ではなく「その面の色」が見えるだけになる。
         120pxに留めているのは、保持が壊れて間隔（数百px）が露出したときに
         それを色で塗りつぶして問題を隠さないため。 */
        box-shadow: 0 120px 0 0 var(--panel-bg);
    }

    /* 貼り付いてから次のセクションに覆われるまでの滞留は、面と面の「間隔」で作る。
     面の高さ（700px × 倍率）は絶対に変えない。

     重要: 滞留ぶんを面の高さに足してはいけない。sticky は「自分のマージンボックスが
     包含ブロック（.sfp-pin__stage）からはみ出さない」範囲でしか貼り付けないため、
     面が高いほど早く下端に押し出される。末尾の面では次の面が覆いに来る前に
     押し出され、一つ前の面の滞留ぶんが露出する（products-clay で実測済み）。
     間隔（gap）はどの面のボックスにも属さないので、この制約に影響しない。

     .is-holding が付いているときだけ間隔を空ける。間隔は「保持」（下の sfp-hold）が
     次の面を引き上げて詰める前提なので、保持が使えない環境（scroll駆動アニメ非対応）
     では間隔ゼロ＝素の積み重ねに戻る。 */
    .sfp-pin.is-pinned.is-holding .sfp-pin__stage {
        display: flex;
        flex-direction: column;
        row-gap: var(--sfp-dwell);
    }

    /* ---- 滞留中の「保持」 ----
     間隔を空けただけでは、画面の縦が面の高さ（700px × 倍率）より大きいときに
     その間隔がそのまま空き領域として見えてしまう。
     そこで滞留の間だけ、まだ来ていない面を間隔ぶんそのまま上へ引き上げ、
     前の面の中身の直下に付けたまま留める。画面に見えるのは
     「元の積み重ねのまま、滞留のあいだ何も動かない」状態になり、SPと同じ体感になる。

     引き上げ量は面ごとに違う（自分より前に残っている滞留の合計）ので、
     キーフレーム @keyframes sfp-hold-1〜2 と範囲 --sfp-hold-from/to は
     js/products-sulfur.js が実測して入れる。

     最後の面の下に続くのはフッターなので、フッター（.pc01-viewport / .sp01-viewport）にも
     最後の面と同じ引き上げを掛ける。これが無いと最後の面の下に間隔ぶんの空白が残る。
     ここはセレクタが届かないので指定は js/products-sulfur.js 側にある。

     滞留中の画面は「貼り付いている面＋残りの面＋フッター」で埋まる必要がある。
     縦に長い窓ではそれでも足りないことがあるので、埋まらない末尾の滞留は
     js側が自動的に省く（その回だけ間を空けず、そのまま次の面が上がる）。
     scroll駆動アニメなのでコンポジタ側で sticky と同じフレームに更新され、
     JSでスクロールを追いかけたときのような1フレーム遅れのガタつきが出ない。 */
    .sfp-pin.is-pinned.is-holding .sfp-product {
        flex-shrink: 0; /* 面の高さはデザイン比固定。flexの縮小を効かせない */
        animation-timeline: scroll(root block);
        animation-range: var(--sfp-hold-from, 0px) var(--sfp-hold-to, 0px);
        animation-fill-mode: both;
        animation-timing-function: linear;
        /* transform だけのアニメーションであることを明示して合成（コンポジタ）側へ
         上げる。メインスレッド更新に落ちると、コンポジタが即座に処理する
         スクロール／stickyと1フレームずれて面が揺れる */
        will-change: transform;
    }

    .sfp-pin.is-pinned .sfp-product__inner {
        width: 1440px;
        padding: 0;
    }

    .sfp-product__body {
        position: relative;
        display: block;
        width: 1440px;
        height: 700px;
        max-width: none;
        margin: 0;
        padding: 0;
    }

    .sfp-product__intro {
        position: absolute;
        left: 72px;
        top: 152px;
        width: 576px;
        max-width: none;
        margin: 0;
    }

    .sfp-product--white .sfp-product__intro {
        left: 872px;
        top: 72px;
        width: 531px;
    }

    /* Figma実測: 見出し・本文の実テキスト幅はintro全体幅(576px)より狭い
     481px（ACNE/BLACK）。WHITEはintro幅(531px)いっぱいまで使うため
     制限しない */
    .sfp-product__headline,
    .sfp-product__desc {
        max-width: 481px;
    }

    .sfp-product--white .sfp-product__headline,
    .sfp-product--white .sfp-product__desc {
        max-width: none;
    }

    .sfp-product__headline {
        font-size: 34px;
        line-height: 1.4;
        line-height: 1.2;
    }

    .sfp-product__desc {
        font-size: 18px;
        line-height: 2;
        line-break: strict;
    }

    .sfp-product__ingredients {
        justify-content: flex-start;
        gap: 0;
        /* SP用の470px枠（左右-25pxはみ出し）を打ち消す */
        width: auto;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }

    .sfp-product__ingredient {
        flex: 0 0 144px;
        max-width: none;
        gap: 8px;
    }

    .sfp-product__ingredient img {
        width: 120px;
    }

    .sfp-product__hero {
        position: absolute;
        width: 608.216px;
        height: 608.216px;
        left: 575.914px;
        top: 130.368px;
        margin: 0;
    }

    /* モバイル基準の .sfp-product--acne .sfp-product__hero（353.883px）は
     詳細度が高く、このPC用の幅指定より後で定義しても勝ってしまうため、
     明示的に上書きする */
    .sfp-product--acne .sfp-product__hero {
        width: 608.216px;
        height: 608.216px;
        margin-bottom: 0;
    }

    .sfp-product--white .sfp-product__hero {
        width: 630px;
        height: 630px;
        left: 239px;
        top: 125px;
    }

    .sfp-product--black .sfp-product__hero {
        width: 629.835px;
        height: 629.835px;
        left: 575.72px;
        top: 130.312px;
    }

    .sfp-product__buy {
        position: absolute;
        left: 1154px;
        top: 144px;
        width: 230px;
        max-width: none;
        margin: 0;
        /* SPは2カラムgridなのでPCは通常の縦積みに戻す */
        display: block;
    }

    .sfp-product--white .sfp-product__buy {
        left: 56px;
        top: 110px;
    }

    .sfp-product--black .sfp-product__buy {
        left: 1154px;
        top: 179px;
    }

    /* Figma実測: buyボックス内はジャー写真が上端から離れた位置（余白分）
     から始まり、下端（ボタン下端）でボックス高さちょうどに収まる
     「下寄せ」レイアウトになっている。医薬部外品バッジがあるACNEのみ
     上の余白が70px、WHITE/BLACKは50px */
    .sfp-product__buy-top {
        /* SPはdisplay:contentsで解体しているのでPCはflexに戻す */
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding-top: 50px;
        gap: 8px;
    }

    .sfp-product--acne .sfp-product__buy-top {
        padding-top: 70px;
    }

    .sfp-product__buy-jar {
        width: 130px;
        /* SPのグリッド配置用オフセットを打ち消す */
        margin: 0;
    }

    /* SP用のWHITE専用オフセット（写真・商品名・ボタン）を打ち消す。
     .sfp-product--white ... はクラス2つぶんの詳細度があり、
     .sfp-product__buy-jar 等の1クラス指定では上書きできない */
    .sfp-product--white .sfp-product__buy-jar {
        width: 151px;
        margin: 0;
    }

    .sfp-product--white .sfp-product__buy-col {
        padding-top: 0;
    }

    .sfp-product--white .sfp-product__buy-btns {
        margin-top: 24px;
    }

    /* SP用のBLACK専用オフセット／成分サイズを打ち消す。
     .sfp-product--black ... はクラス2つぶんの詳細度があり、
     1クラス指定のPC用ルールでは上書きできない */
    .sfp-product--black .sfp-product__buy-jar {
        width: 130px;
        margin: 0;
    }

    .sfp-product--black .sfp-product__buy-col {
        padding-top: 0;
    }

    .sfp-product--black .sfp-product__buy-btns {
        margin-top: 24px;
    }

    .sfp-product--black .sfp-product__ingredients {
        gap: 0;
    }

    .sfp-product--black .sfp-product__ingredient {
        flex-basis: 144px;
        max-width: none;
        gap: 8px;
    }

    .sfp-product--black .sfp-product__ingredient img {
        width: 120px;
    }

    .sfp-product--black .sfp-product__ingredient p {
        line-height: 1.5;
    }

    .sfp-product__buy-col {
        align-items: center;
        gap: 0;
    }

    /* 以下はSPをFigma実測値に合わせた際の共通プロパティの打ち消し
     （今回はSP調整の依頼のためPCの見た目は従来のまま維持する） */
    .sfp-product__buy-name {
        text-align: center;
        font-size: 18px;
        line-height: 1.5;
    }

    .sfp-product__ingredient p {
        font-size: 14px;
        line-height: 1.5;
    }

    .sfp-product__buy-btns {
        margin-top: 24px;
    }
}

/* ==========================================================================
   スクロールイン演出
   js/script.js の initReveal() が [data-reveal] に .is-inview を付ける
   （index.html / history.html と同じ仕組み）。
   どちらへどれだけ動かすかはここ（CSS）が決める、という役割分担。
   イージングと時間は css/style.css の既存演出に揃えている。
   ========================================================================== */

/* 写真・カード共通の動き。どちらへ動かすかは --reveal-x / --reveal-y で
   個別に指定する（css/style.css のHISTORY演出と同じ書き方）。
   css/style.css が [data-reveal] に --reveal-x:-40px / --reveal-y:0 を
   グローバル定義しているため、各要素で必ず両軸とも上書きすること
   （片方だけだと style.css 側の値が残って斜めに動いてしまう） */
.sfp-feature__photo[data-reveal],
.sfp-feature__card[data-reveal] {
    opacity: 0;
    transform: translate(var(--reveal-x), var(--reveal-y));
    transition:
        opacity 0.7s ease-out,
        transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: opacity, transform;
}

.sfp-feature__photo[data-reveal].is-inview,
.sfp-feature__card[data-reveal].is-inview {
    opacity: 1;
    transform: translate(0, 0);
}

/* 01: 写真は左から右へ、カードは下から上へ */
.sfp-feature--01 .sfp-feature__photo[data-reveal] {
    --reveal-x: -40px;
    --reveal-y: 0px;
}

.sfp-feature--01 .sfp-feature__card[data-reveal] {
    --reveal-x: 0px;
    --reveal-y: 40px;
}

/* 02: 写真は右から左へ、カードは上から下へ（01と左右・上下が逆の構成に合わせる） */
.sfp-feature--02 .sfp-feature__photo[data-reveal] {
    --reveal-x: 40px;
    --reveal-y: 0px;
}

.sfp-feature--02 .sfp-feature__card[data-reveal] {
    --reveal-x: 0px;
    --reveal-y: -40px;
}

/* 演出完了後は合成レイヤーを解放する（initReveal が .is-done を付ける） */
.sfp-feature__photo[data-reveal].is-done,
.sfp-feature__card[data-reveal].is-done {
    will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
    .sfp-feature__photo[data-reveal],
    .sfp-feature__card[data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}