/* ==========================================================================
   CLAY（クレイシリーズ）ページ
   Figma: PC_02_Products_clay (node 70:216) / SP_02_Products_clay (node 4043:1991)
   tasks/ProductsClay.md の指示に基づき、1つのHTML構造をCSSメディアクエリ（768px）で
   出し分ける、モバイルファーストの実装。
   ヘッダー／ドロワー／フッターは index.html 等と共通（css/style.css）。
   ========================================================================== */

/* ==========================================================================
   固定pxキャンバス（PC=1440 / SP=500。SVGのキャンバス幅そのまま）
   index.html の pc01/sp01 と同じ「キャンバス全体を transform: scale() で
   画面幅へ合わせる」方式。中の座標・余白・フォントサイズは基準幅ちょうどで
   Figmaと一致するよう作られているので、載せ替えるだけで比率を保ったまま伸縮する。
   index.html はPC/SPでマークアップを2つ持つが、このページは元から1つの
   マークアップをメディアクエリで出し分けているため、キャンバスも1枚で
   幅だけ切り替える。倍率の計算は js/script.js の initScaleToFit。
   ========================================================================== */

.clay-viewport {
  position: relative;
  width: 100%;
  /* hidden ではなく clip。hidden はスクロールコンテナを作ってしまうため
     （css/style.css の html/body に書いてある理由と同じ） */
  overflow: clip;
}

.clay-canvas {
  width: 500px; /* SP_02_Products_clay.svg = 500 */
  transform-origin: top left;
  /* 背景の意図的なはみ出し（.clay-top__bg 等）でキャンバスが広がらないようにする */
  overflow-x: clip;
}

@media (min-width: 768px) {
  .clay-canvas {
    width: 1440px; /* PC_02_Products_clay.svg = 1440 */
  }
}

/* SVG実測: SPは線が x=440〜480（幅40）/ y=19・27・35。
   icon_menu.svg は 40×18 で内部の線が y=1・9・17 なので上端は実測−1 = 18 */
.clay-header__menu {
  position: absolute;
  top: 18px;
  right: 20px;
  z-index: 50;
  display: block;
  width: 40px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.clay-header__menu img {
  width: 100%;
}

.clay {
  /* hidden ではなく clip。理由は css/style.css の html/body と同じで、
     hidden だとスクロールコンテナになり .clay-pin__stage の sticky が効かなくなる */
  overflow-x: clip;
  background: #fff;
}

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

.clay-kv {
  position: relative;
}

.clay-kv__photo--pc {
  display: none;
}

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

.clay-kv__photo--sp img {
  position: absolute;
  left: -14.8%;
  top: -16.458%;
  width: 131.419%;
  height: 131.667%;
  max-width: none;
  object-fit: cover;
}

/* ---- TOP（タイトル・説明文・バナー） ---- */

.clay-top {
  position: relative;
  overflow: hidden;
  /* SVG実測(SP): 本文・タイトル・バナーはすべて x=40〜460（幅420・キャンバス中央250）。
     以前は縦書きラベルとの重なりを避けるため左だけ32pxにしていたが、
     ラベルは position:absolute なのでpaddingを非対称にする必要はない */
  padding: 50px 40px 40px;
}

/* SVG実測から逆算した配置。about_bg.svg(2041.99×1580.98) は内部に2つの図形を持ち、
   その両方をSVG側の対応図形と突き合わせるとオフセットが完全に一致する
   （＝拡大縮小なし・transformなし）。
     SP_02: ページ原点から (-455.1, -143.0) … KV 480px を引いて top -623.0 / 500
     PC_02: ページ原点から ( -62.2, -228.0) … KV 448px を引いて top -676.0 / 1440

   縦位置に top ではなく margin-top を使う理由:
   絶対配置要素の top のパーセントは「包含ブロックの高さ」基準で解決される。
   .clay-top の高さは本文の行数で変わるため、top:% だと背景の縦位置が
   デザインと無関係に動いてしまう。margin のパーセントは「幅」基準なので安定する。 */

.clay-bg-sec{
  position: relative;
  background: var(--pl-bg);
}

.clay-top__bg {
  position: absolute;
  left: -91.02%;
  top: 0;
  margin-top: -124.6%;
  width: 408.398%;
  aspect-ratio: 2041.995 / 1580.981;
  z-index: 0;
  pointer-events: none;
  z-index: 1;
}

.clay-top__bg img {
  display: block;
  width: 100%;
  height: 100%;
}

.clay-top__label {
  /* Figmaでは常にabsolute配置でタイトル左に添えられる要素のため、
     通常フローに置くとその高さ分コンテンツ全体が下に押し下げられてしまう */
  position: absolute;
  left: 4px;
  top: 20px ;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin: 0;
  color: #fff;
}

.clay-top__label span {
  writing-mode: vertical-rl;
  /* vertical-rl標準の文字回転(時計回り)だとFigmaの向きと逆になるため180度反転 */
  transform: rotate(180deg);
  font-family: var(--font-en);
  font-weight: 700;
  /* SVG実測: PRODUCTSラベルのインクは PC 20.5×164.7 / SP 20.5×164.2 で
     ほぼ同一 ＝ SP/PCとも同じ文字サイズ。よってここだけで両方に効かせる。
     （font-size を親 .clay-top__label に書くと、詳細度でこのspanに負けて効かない） */
  font-size: 28.676px;
  letter-spacing: 1.4338px;
}

.clay-top__label::before {
  /* Figma実測: 線はPRODUCTS文字の上側に位置する。writing-modeの影響を
     受けない通常のブロックとして幅3px・高さ50pxにする
     （以前はflex内でwidth:50pxがそのままクロス軸幅として使われ、
     ラベル全体が50px幅になりclay-top__innerと重なっていた） */
  content: "";
  display: block;
  width: 3px;
  height: 50px;
  background: #fff;
}

.clay-top__inner {
  position: relative;
  z-index: 1;
  /* SVG実測(SP): コンテンツ幅 420px（x=40〜460） */
  max-width: 420px;
  margin: 0 auto;
}

.clay-top__title {
  margin: 0 0 24px;
  text-align: center;
  color: var(--text-purple);
}

.clay-top__title-en {
  margin: 0;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 24px;
  line-height: 100%;
}

.clay-top__title-jp {
  margin: 0;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 36px;
}

.clay-top__text {
  color: #fff;
  padding: 0 20.5px;
}

.clay-top__desc {
  margin: 0;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 18px;
  line-height: 30px;
  letter-spacing: 3%;
}

.clay-top__desc sup {
  font-size: 0.645em;
}
.clay-top__desc span{
  font-size: 22px;
  letter-spacing: 4%;
  line-height: 40px;
}

.clay-top__note {
  margin: 50px 0 0;
  font-family: var(--font-jp);
  font-size: 12px;
  line-height: 1.5;
  text-align: right;
}

.clay-top__banners {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 50px;
}

.clay-top__banner {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 110px;
  color: #000;
  font-family: var(--font-jp);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 1px;
  text-align: center;
}
.clay-top__banner img{
  width: 100%;
  height: auto;
}

/* ---- アンカーリンク（7商品へのジャンプカード） ---- */

.clay-anchors {
  position: relative;
  overflow: hidden;
  padding: 40px 20px 64px;
}

.clay-anchor:nth-child(1){
  margin-bottom: -20px;
}

/* SVG実測: Figmaではこの装飾はページ直下に置かれていて、about_bg.svg の
   2枚目インスタンスではない。PCは四角形1枚、SPは別形状2枚と構成が違うため、
   各SVGから該当図形だけを抜き出した専用アセットを出し分ける。
   位置の基準はアンカーカード1段目の上端（PC y=1074 / SP y=1197）。
   そこから .clay-anchors のpadding-topを引いてセクション上端を割り出している。 */
.clay-anchors__bg {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

/* SP: セクション上端 = 1197 - padding-top 40 = 1157 */
.clay-anchors__bg--sp-a {
  left: -72.2%;                       /* -376 / 500 */
  top: 53.83px;                       /* 1210.83 - 1157 */
  width: 313.974%;                    /* 1569.87 / 500 */
  aspect-ratio: 1569.87 / 1489.72;
}

.clay-anchors__bg--sp-b {
  left: -218.95%;                     /* -1094.75 / 500 */
  top: 465.66px;                      /* 1589.66 - 1157 */
  width: 395.046%;                    /* 1975.23 / 500 */
}

.clay-anchors__bg--pc {
  display: none;
}

.clay-anchors__bg img {
  display: block;
  width: 100%;
  height: 100%;
}

.clay-anchors__label {
  /* position:absoluteは親のpadding-topを無視して常に上端0基準になるため、
     clay-anchorsのpadding-topと同じ値を明示してカード行の高さに揃える */
  position: absolute;
  right: 4px;
  top: 40px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin: 0;
  color: #fff;
}

.clay-anchors__label span {
  writing-mode: sideways-lr;
  transform: rotate(180deg);
  font-family: var(--font-en);
  font-weight: 700;
  /* SVG実測: LINEUPラベルのインクは PC 20.3×104.1 / SP 18.1×93.1。
     SPはPCの約0.895倍なので 28.676 × 0.895 ≒ 25.66px */
  font-size: 25.66px;
  letter-spacing: 1.283px;
}

.clay-anchors__label::after {
  /* Figma実測: LINEUPラベルはPRODUCTSラベルと逆で、線がテキストの下側。
     SPの線は stroke-width 2.68443 / 長さ 44.8（PCの 3×50 の約0.895倍） */
  content: "";
  display: block;
  width: 2.684px;
  height: 44.8px;
  background: #fff;
}

.clay-anchors__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-areas:
    "deepblack deepblack"
    "smooth acne"
    "shower bright"
    "hakudei redwrink";
  gap: 18px;
  max-width: 380px;
  margin: 0 auto;
}

.clay-anchor--deepblack {
  grid-area: deepblack;
  justify-self: center;
  /* SVG実測(SP): 単独で中央に置かれるが幅は他カードと同じ 178.3px。
     50%(=190px)だと1枚だけ太る。グリッド1カラム分と同じ幅にする */
  width: calc((100% - 18px) / 2);
}
.clay-anchor--smooth { grid-area: smooth; }
.clay-anchor--acne { grid-area: acne; }
.clay-anchor--shower { grid-area: shower; }
.clay-anchor--bright { grid-area: bright; }
.clay-anchor--hakudei { grid-area: hakudei; }
.clay-anchor--redwrink { grid-area: redwrink; }

.clay-anchor {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* SVG実測: PCカード 189.4×287.8（SPも 177.6〜182.5 × 270〜277.4 でほぼ同比） */
  aspect-ratio: 179 / 273;
  border-radius: 999px;
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.15);
  padding-top: 34px;
  color: #fff;
  text-decoration: none;
}

@media screen and (min-width:768px){
  .clay-anchor{
    aspect-ratio: 189.4 / 287.8;
  }
}

.clay-anchor--deepblack { background: #5a5a5a; }
.clay-anchor--smooth { background: #80da76; }
.clay-anchor--acne { background: #7dc9ff; }
.clay-anchor--shower { background: #73abff; }
.clay-anchor--bright { background: #ffe865; color: #383838; }
.clay-anchor--hakudei { background: #ffa6ad; }
.clay-anchor--redwrink { background: #ff6973; }

.clay-anchor__jar {
  display: block;

}

.clay-anchor__jar img {
  display: block;
  width: 69px;
  height: auto;
}
@media screen and (min-width:768px){
  .clay-anchor__jar img{
     width: 74px;
  }
}


.clay-anchor__text {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
  justify-content: center;
  margin: 9px 0 18px;
}

.clay-anchor__text sup {
  font-size: 0.65em;
}

.clay-anchor__arrow {
  /* SVG実測: 矢印のインク幅22.0。アセット icon_arrow_lineup_white.svg は
     stroke込みで22.8449なので、カード幅189.4に対して 22.845/189.4 = 12.06% */
  width: 22px;
}

.clay-anchors__note {
  position: relative;
  z-index: 1;
  margin: 41px auto 0;
  font-family: var(--font-jp);
  font-size: 12px;
  line-height: 1.6;
  color: #fff;
  text-align: right;
}

/* ==========================================================================
   商品セクションの積み重ね演出

   .clay-product ×7 … それぞれを position:sticky で画面上端に貼り付ける。
   スクロールすると次のセクションが下から上がってきて手前のセクションを覆い、
   上端に達したら今度はそれが貼り付く。以下これを7回くり返す。

   高さは常にデザイン比（700px × 倍率）に固定する。
   面をビューポート高さまで引き伸ばさないので、
     ・写真やテキストの構図がFigmaのまま崩れない
     ・次のセクションがすぐ続くので下に余白も出ない
   の両方が同時に満たされる。

   重要: 貼り付くのは .clay-product 自身＝等倍の空間。
   1440×700 のデザイン座標は中身（decor / body）を scale して作る。
   scale を sticky の「外側」に置くと sticky が (k-1)×scrollY ぶん
   ずれる（Chrome実測）ので、必ず内側に置くこと。

   重要: sticky を効かせるため、祖先（html / body / .clay）の overflow-x は
         hidden ではなく clip にしてある。hidden に戻すとこの演出は動かない。

   SP（767.98px以下）も同じ積み重ねだが、貼り付く位置だけが違う。
   SPのセクションは本文・成分・購入ブロックで約1800pxあり画面より背が高いので、
   top:0 で貼り付けると購入ボタンが画面外に切れたまま止まってしまう。
   そこで「下端が画面下端に来るまでスクロールしてから貼り付く」ようにする
   （＝ top に負の値を入れる）。読み切ってから次のセクションが覆いに来る。
   高さも貼り付き位置も商品ごとに違うので js/products-clay.js が実測して入れる。

   .clay-product 側の宣言（写真・影の位置など）は書き換えていない。
   あれはFigma実測と小数点まで一致している検証済みの値のため
   （tasks/clay_svg_diff.md §3-1）。
   ========================================================================== */

.clay-pin,
.clay-pin__stage {
  position: relative;
}

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

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

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

@media (min-width: 768px) {
  /* 拡大の基準単位。貼り付き中は中身を1440基準のまま scale するので等倍(1px)。
     貼り付かない場合（モーション低減 / JS無効）は通常フローのセクションに
     なるため、そのときだけ 100vw 基準で拡縮する。 */
  .clay-pin {
    --u: calc(100vw / 1440);
  }

  .clay-pin.is-pinned {
    --u: 1px;
  }

  .clay-pin.is-pinned .clay-product {
    position: sticky;
    top: 0;
    /* デザイン比そのまま。--clay-k はJSが入れる倍率（画面幅 ÷ 1440）。
       --clay-h は同じ値を整数pxに丸めたもので、こちらもJSが入れる。
       小数のままだと隣り合う面の境目が小数ピクセルに乗り、間に1pxの
       白い線が出ることがあるため、貼り付き中は整数の方を使う。
       （--clay-h には継ぎ目対策の 1px も含まれる。js/products-clay.js 参照） */
    height: var(--clay-h, calc(700px * var(--clay-k, 1)));
    overflow: hidden;
    /* 継ぎ目対策。面の背景を下へ120pxだけ張り出させる。
       box-shadow はボックスの外に描かれるのでレイアウトには影響せず、
       overflow:hidden にも切られない。次の面／フッターが常に上に描かれるため
       正常時は見えないが、端末の拡大率が小数（例: 165% → dpr 1.65）で
       境目が小数ピクセルに乗ったときや1フレームのずれが出たときに、
       白ではなく「その面の色」が見えるだけになる。
       120pxに留めているのは、保持が壊れて間隔（数百px）が露出したときに
       それを色で塗りつぶして問題を隠さないため。 */
    box-shadow: 0 120px 0 0 var(--panel-bg);
    /* z-index は指定しない。DOM順で後のセクションが自然に手前に来るので、
       スクロールすると次のセクションが手前のセクションを覆っていく */
  }

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

     重要: 滞留ぶんを面の高さに足してはいけない。sticky は「自分のマージンボックスが
     包含ブロック（.clay-pin__stage）からはみ出さない」範囲でしか貼り付けないため、
     面が高いほど早く下端に押し出される。末尾の面ほど余裕が無く、最後の1〜2面では
     次の面が覆いに来る前に押し出されて画面が真っ白になる（実測・計算とも確認済み）。
     間隔（gap）はどの面のボックスにも属さないので、この制約に影響しない。

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

  /* ---- 滞留中の「保持」 ----
     間隔を空けただけでは、画面の縦が面の高さ（700px × 倍率）より大きいときに
     その間隔がそのまま空き領域として見えてしまう。
     （SPは中身が画面より高く、伸ばした分が画面の外＝下に出るのでこの問題は無い）

     そこで滞留の間だけ、まだ来ていない面を間隔ぶんそのまま上へ引き上げ、
     前の面の中身の直下に付けたまま留める。結果、画面に見えるのは
     「元の積み重ねのまま、滞留のあいだ何も動かない」状態になり、SPと同じ体感になる。

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

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

     滞留中の画面は「貼り付いている面＋残りの面＋フッター」で埋まる必要がある。
     縦に極端に長い窓ではそれでも足りないことがあるので、埋まらない末尾の滞留は
     js側が自動的に省く（その回だけ間を空けず、そのまま次の面が上がる）。
     scroll駆動アニメなのでコンポジタ側で sticky と同じフレームに更新され、
     JSでスクロールを追いかけたときのような1フレーム遅れのガタつきが出ない。 */
  .clay-pin.is-pinned.is-holding .clay-product {
    flex-shrink: 0; /* 面の高さはデザイン比固定。flexの縮小を効かせない */
    /* 範囲（animation-range）は必須。js/products-clay.js のキーフレームは
       「滞留区間 --clay-hold-from〜to」を 0〜100% とした％で書かれているので、
       範囲を指定しないと計算値が normal に落ち、608px ぶんの引き上げが文書全体の
       スクロール量へ引き伸ばされる。そうなると滞留が効かず（貼り付いた直後に次の面が
       上がってくる）、面と面のあいだに「608px × ページ進行率」の空きが残り、
       範囲指定が効いているフッター（products-clay.js の tails）とも位置がずれる。
       解決に失敗したときの保険として 0px 0px のフォールバックを置く（＝範囲ゼロで
       引き上げ無し）。scroll駆動アニメ自体が使えない環境では products-clay.js の
       layoutPcHold() が false を返し、.is-holding ごと外れて素の積み重ねに戻る。
       products-sulfur.css の .sfp-product と同じ指定。 */
    animation-timeline: scroll(root block);
    animation-range: var(--clay-hold-from, 0px) var(--clay-hold-to, 0px);
    animation-fill-mode: both;
    animation-timing-function: linear;
    /* transform だけのアニメーションであることを明示して合成（コンポジタ）側へ
       上げる。メインスレッド更新に落ちると、コンポジタが即座に処理する
       スクロール／stickyと1フレームずれて面が揺れる */
    will-change: transform;
  }

  /* 中身だけを 1440×700 のデザイン座標のまま scale する。
     幅を固定するので、画面幅を変えても折り返しや space-between の間隔が
     動かず、要素同士が組み替わらない（倍率だけが変わる）。 */
  .clay-pin.is-pinned .clay-product__decor,
  .clay-pin.is-pinned .clay-product__body {
    width: 1440px;
    margin: 0;
    transform: scale(var(--clay-k, 1));
    transform-origin: top left;
  }

  .clay-pin.is-pinned .clay-product__decor {
    top: 0;
    left: 0;
    right: auto;
    bottom: auto;
    height: 700px;
    overflow: hidden;
  }
}

@media (max-width: 767.98px) {
  /* SPも積み重ねは同じ。ただし高さ（＝中身の自然な高さ × 倍率）と
     貼り付き位置 top は商品ごとに違うので js/products-clay.js が実測して入れる。
     SPは decor → body が通常フローで縦に積まれる構成なので、
     PCのような固定700pxにはできない。 */
  .clay-pin.is-pinned .clay-product {
    position: sticky;
    overflow: hidden;
  }

  /* 中身だけを 500px 幅のデザイン座標のまま scale する。
     幅を固定するので、画面幅を変えても本文の折り返し位置が動かず、
     ボタンや成分アイコンの並びが組み替わらない（倍率だけが変わる）。 */
  .clay-pin.is-pinned .clay-product__decor,
  .clay-pin.is-pinned .clay-product__body {
    width: 500px; /* SP_02_Products_clay.svg = 500 */
    margin: 0;
    transform: scale(var(--clay-k, 1));
    transform-origin: top left;
  }

  /* decor と body は「同じ原点（パネルの左上）」から scale しないと縦位置がずれる。
     SPは decor → body が通常フローで縦に積まれるため、そのままだと
     body の原点が decor の高さ565px分下がった位置に残り、
     scale後の実際の描画が 565 + 本文×倍率 になる。
     一方パネルの高さは (565 + 本文)×倍率 なので、
     565×(1−倍率) だけ足りず、下端の購入ボタンが overflow:hidden で切れる。

     decor を絶対配置にして両方の原点を左上へ揃え、
     body には decor と同じ高さの padding-top を持たせて元の縦並びを再現する。
     （PCは元から decor が絶対配置なのでこの問題は起きない） */
  .clay-pin.is-pinned .clay-product__decor {
    position: absolute;
    top: 0;
    left: 0;
  }

  .clay-pin.is-pinned .clay-product__body {
    padding-top: 565px; /* ＝ .clay-product__decor の高さ */
  }
}

/* OSのモーション低減設定を尊重。JS側も同じ条件で .is-pinned を付けないので
   通常はここまで来ないが、付いたまま設定が変わった場合の保険として打ち消す */
@media (prefers-reduced-motion: reduce) {
  .clay-pin.is-pinned .clay-product {
    position: relative;
    top: auto;
  }
}

/* ---- プロダクト詳細（商品ごとのセクション、7商品共通テンプレート） ---- */

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

/* BUY NOWの重なり順追加 */
.clay-product--deepblack { --panel-bg: #5a5a5a; z-index: 1; }
.clay-product--kaidei { --panel-bg: #80da76; z-index: 3; }
.clay-product--acne { --panel-bg: #7dc9ff; z-index: 5; }
.clay-product--shower { --panel-bg: #73abff; z-index: 7; }
.clay-product--bright { --panel-bg: #ffe865; color: #383838; z-index: 9; }
.clay-product--hakudei { --panel-bg: #ffa6ad; z-index: 11; }
.clay-product--redwrink { --panel-bg: #ff6973; z-index: 13; }

.clay-product__decor {
  position: relative;
  height: 565px;
}

.clay-product__wordmark {
  position: absolute;
  left: -13px;
  top: -26px;
  margin: 0;
  font-family: var(--font-en);
  font-weight: 400;
  font-size: 156px;
  line-height: 160px;
  white-space: nowrap;
  /* Figma実測: 背景が黄色(bright)でも本文と違いワードマークは常に白 */
  color: #fff;
}

.clay-product__wordmark--pc {
  /* SP: 「DEEP」「BLACK」の2行積み、PC: 1行に2回反復表示（Figma実測）。
     テキスト自体が違うため画像の出し分けと同様にdisplay切替で対応する */
  display: none;
}

.clay-product__shadow {
  position: absolute;
  left: 203.74px;
  top: 107.23px;
  width: 221.9px;
  height: 446.4px;
  transform: rotate(-179.06deg) scaleY(-1);
}

.clay-product__shadow img {
  display: block;
  width: 100%;
  height: 100%;
  opacity: .6;
}

.clay-product__hero {
  position: absolute;
  left: 37.59px;
  top: 11px;
  width: 409px;
  height: 569px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.clay-product__hero img {
  width: 244px;
  height: 516px;
  object-fit: cover;
  transform: rotate(20.5deg);
}

/* ---- SPの反転パターン（海泥スムース／シャワークレンズ／白泥ハクデイ） ----
   SVG実測: この3商品だけ rotate(-18) で写真が左寄せになる。
   これまで --mirrored の指定が @media (min-width:768px) の中にしか無く、
   SPでは7商品すべてが rotate(20.5)・右寄せで描かれていた。

   下の rotate は回転前の矩形(244×516)の左上を中心に掛かる指定なので、
   CSSでは「回転後のbbox」を枠にして中で中央寄せする（PC側と同じ手法）。
   -18°の回転後bbox = 391.51 × 566.15。
   商品ごとの left/top は SVGの transform="rotate(-18 x y)" から算出した値。 */

.clay-product--mirrored .clay-product__hero {
  width: 391.51px;
  height: 566.15px;
}

.clay-product--mirrored .clay-product__hero img {
  transform: rotate(-18deg);
}

/* 商品ごとの座標はSP専用。max-width で囲わないと、詳細度(0,2,0)が
   PC側の .clay-product__hero(0,1,0) に勝ってしまい、PCの標準4商品
   （acne/bright/redwrink）がSPの値で描かれてしまう */
@media (max-width: 767.98px) {
  .clay-product--kaidei .clay-product__hero { left: 72px; top: 27px; }
  .clay-product--shower .clay-product__hero { left: 67px; top: 28px; }
  .clay-product--hakudei .clay-product__hero { left: 77px; top: 41px; }

  /* 標準パターンの4商品も、SVGでは商品ごとに少しずつ位置が違う
     （基準の .clay-product__hero は deepblack の値） */
  .clay-product--acne .clay-product__hero { left: 39.9px; top: 14px; }
  .clay-product--bright .clay-product__hero { left: 25.9px; top: 31px; }
  .clay-product--redwrink .clay-product__hero { left: 23.9px; top: 38px; }
}

/* 影も左右が逆。SVGの反転3商品は x≈91〜98・幅192.5、標準4商品は x≈188〜208・幅220〜225。
   向きはPCの反転と同じ rotate(-1.94deg)（標準 -178.06deg の反対側）。
   ※ 影はアセット自身の余白が不明で座標を厳密には割り出せない（clay_svg_diff.md §5-1）。
     ここでは「左右が逆」という明確な誤りだけを正しており、微調整は目視で行う。 */
.clay-product--mirrored .clay-product__shadow {
  width: 192.5px;
  height: 446.4px;
  transform: rotate(-1.94deg);
  mix-blend-mode: multiply;
}

@media (max-width: 767.98px) {
  .clay-product--kaidei .clay-product__shadow { left: 95px; top: 110px; }
  .clay-product--shower .clay-product__shadow { left: 91px; top: 111px; }
  .clay-product--hakudei .clay-product__shadow { left: 98px; top: 123px; }
}

.clay-product__body {
  position: relative;
  z-index: 1;
  padding: 0 40px 60px;
}

.clay-product__intro {
  max-width: 420px;
  margin: 0 auto;
}

.clay-product__headline {
  margin: 0;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 34px;
  line-height: 49px;
}

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

.clay-product__desc {
  margin: 16px 0 0;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 18px;
  line-height: 30px;
  text-align: justify;
  letter-spacing: 1%;
}

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

.clay-product__ingredients {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-items: center;
  /* SVG実測(SP): 円は本文幅420pxいっぱいに広がる（左端36.7〜右端457.7）。
     直径188.5 + 間隔43 + 直径188.5 = 420。10pxだと内側に寄りすぎる */
  gap: 20px 36px;
  /* Figma実測: 見出し/説明文ブロック→成分アイコン→注釈の外側フレックスは
     gap:16pxで統一されている */
  margin-top: 19px;
}

@media screen and (min-width:768px){
  #kaidei .clay-product__ingredients{
    gap: 0;
  }
}


.clay-product__ingredient {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  /* max-width は付けない。SPでは円がカラム幅（＝188.5px）いっぱいになるのが実測どおり。
     190px上限を残すとカラム内でさらに中央寄せされ、左右への広がりが足りなくなる */
  width: 100%;
}

/* SVG実測(SP): 成分が3つの商品（海泥スムース／ガスールブライト）は
   3つ目が2カラムの中央に置かれる（kaidei cx 135/365 → 247、bright 134.3/364 → 249.3）。
   :last-child かつ :nth-child(odd) ＝ 奇数個の最後の1つ、が該当する。
   PCは4カラムなので下の @media (min-width:768px) で grid-column を戻す */
.clay-product__ingredient:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  justify-self: center;
  width: calc((100% - 43px) / 2);
}

.clay-product__ingredient img {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  object-fit: cover;
  /* Figmaでは写真レイヤーの下に白丸(imgEllipse4)が敷かれている。
     写真PNG自体に透明な余白があるアセット（オウバクエキス等）で
     背景色が透けて「上下が切れて見える」のを防ぐための背景色。 */
  background-color: #fff;
  width: 186px;
}

@media screen and (min-width:768px){
  .clay-product__ingredient img{
    width: 100%;
  }
}

.clay-product__ingredient p {
  margin: 0;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 16px;
  text-align: center;
  line-height: 28.75px;
}

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

.clay-product__ingredient--badge {
  /* 海泥スムースのみ、1枠目が写真ではなく「シリーズNo.1」バッジ
     （黄色い円+文字を中央に重ねる特殊デザイン、Figma実測）。
     CSS Gridはデフォルトでalign-items:stretchのため、他の成分枠
     （円+下の2行ラベル分の高さ）に合わせて背が高く伸ばされてしまい、
     absolute配置のテキストが円の外にはみ出していた。stretchを
     解除して自身のコンテンツ（円の高さ）だけに合わせる */
  position: relative;
  align-self: start;
}

.clay-product__ingredient--badge p {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
  color: #383838;
  font-family: var(--font-jp);
  /* Figma実測: シリーズ/クレイ高配合=16.024px、行間はNo.1と共通で
     30.904px（フォントサイズに比例したem指定ではなく、両方とも
     同じ絶対値の行間になっている） */
  font-size: 16px;
  line-height: 31px;
}

.clay-product__badge-label sup {
  /* Figma実測: ＊11は5.723px（本文の約0.36倍、通常のsup(0.65em)より
     かなり小さい） */
  font-size: 0.36em;
}

.clay-product__badge-label {
  font-size: 1em;
}

.clay-product__badge-num {
  /* Figma実測: 「No.1」だけ文字サイズが約2.14倍の英字フォント
     （シリーズ/クレイ高配合は16px、No.1は34.3px）。行間はラベルと
     同じ絶対値31pxのまま */
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 2.14em;
  line-height: 31px;
}

.clay-product__note {
  /* Figma実測: 成分アイコン→注釈もgap:16px */
  margin: 16px 0 0;
  font-family: var(--font-jp);
  font-size: 12px;
  line-height: 1.5;
}

.clay-product__note-break {
  /* SPはFigma上でも明示的な改行がなく自然折返しのため非表示にする
     （PCのみ実測通りの位置で改行する） */
  display: none;
}

.clay-product__buy {
  /* Figma実測: SPはジャー写真と「商品名+ボタン列」が横並び
     （縦積みではない）。ジャーは下端、右カラムは上端に揃う。

     SVG実測(SP): ジャー x=60（幅114）／ボタン x=231.5（幅228）。
     本文枠は x=40〜460 なので、枠内では ジャー20 + 114 + 間隔57.5 + ボタン228.5 = 420。
     padding-left と gap でこの内訳を作ると、ボタン幅は自動で228.5になる */
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 57.5px;
  padding-left: 20px;
  max-width: 420px;
  margin: 40px auto 0;
}
.clay-product__buy button{
  pointer-events: all;
}

.clay-product__buy-jar {
  flex: 0 0 auto;
  align-self: flex-end;
  width: 114px;
  aspect-ratio: 114 / 241;
}

.clay-product__buy-jar img {
  display: block;
  width: 101px;
  height: auto;
  object-fit: cover;
}

.clay-product__buy-col {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* SVG実測: ボタンの縦ピッチ64 − 高さ55 = 9px */
  gap: 9px;
  min-width: 0;
}

.clay-product__buy-name {
  margin: 0;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 18px;
  line-height: 30px;
  text-align: center;
}

.clay-product__buy-name sup{
  font-size: .65em;
}

.clay-product__iyaku{
  font-size: 11.2px;
  font-weight: 400;
  line-height: 1;
  margin: 0 0 3px 0;
}
.clay-product__iyaku span{
  display: inline-block;
  border: 1px solid #fff;
  padding: 3px 5px;
  margin-right: 7px;
}

.clay-product__buy-btnwrap {
  position: relative;
  width: 100%;
}

.clay-product__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  /* SVG実測: ボタンの矩形は 229×55（PC）/ 228×55（SP）。
     縦ピッチ64との差 9px が下の buy-col の gap になる */
  height: 55px;
  background: none;
  border: 1px solid #fff;
  color: #fff;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 1.8px;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
}

.clay-product__btn--buy {
  font-family: var(--font-en);
  font-weight: 600;
}

.clay-product--bright .clay-product__btn {
  /* Figma実測: 黄色背景では白ボーダー/白文字だと視認性が低いため
     ダーク配色（枠・文字とも#383838）+ 黄み掛かった半透明背景 */
  background: rgba(255, 232, 100, 0.5);
  border-color: #383838;
  color: #383838;
}

.clay-product__btn img {
  width: 15px;
  height: 15px;
}

/* BUY NOW展開パネル（Figma node 4231:3067 "PC&SP_06_buy_btn_open" 実測）。
   350x550の暗パネル自体を画面右側に固定表示するモーダル形式。
   バナー群はパネル内で上下左右中央寄せ、閉じるボタンは右上に固定。 */
.clay-product__popover{
  position: fixed;
  top: 50%;
  right: 0;
  z-index: 9999;
  transform: translate(100vw, -50%);
}
.clay-product__popover:nth-child(even){
  transform: translate(-100vw, -50%);
}
.clay-product__popover.active{
  transform: translate(0, -50%);
}

.clay-product__popover.active {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  transition: .5s;
}

.clay-product__popover:nth-child(even){
  right: auto;
  left: 0;
}

.clay-product__popover[hidden] {
  transform: translate(100vw, -50%);
}
.clay-product__popover[hidden]:nth-child(even) {
  transform: translate(-100vw, -50%);
}

.clay-product__popover-backdrop {
  position: absolute;
  inset: 0;
}

.clay-product__popover.active:not([hidden]) .clay-product__popover-panel {
  position: relative;
  z-index: 1;
  width: 330px;
  max-width: 90vw;
  max-height: 474px;
  padding: 147px 26px 120px 26px;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
}

.clay-product--deepblack { --panel-bg: #5a5a5a; z-index: 1; }
.clay-product--kaidei { --panel-bg: #80da76; z-index: 3; }
.clay-product--acne { --panel-bg: #7dc9ff; z-index: 5; }
.clay-product--shower { --panel-bg: #73abff; z-index: 7; }
.clay-product--bright { --panel-bg: #ffe865; color: #383838; z-index: 9; }
.clay-product--hakudei { --panel-bg: #ffa6ad; z-index: 11; }
.clay-product--redwrink { --panel-bg: #ff6973; z-index: 13; }

/* 重なり順 */
.deepblack.clay-product__popover{
  z-index: 2;
}
.kaidei.clay-product__popover{
  z-index: 4;
}
.acne.clay-product__popover{
  z-index: 6;
}
.shower.clay-product__popover{
  z-index: 8;
}
.bright.clay-product__popover{
  z-index: 10;
}
.hakudei.clay-product__popover{
  z-index: 12;
}
.redwrink.clay-product__popover{
  z-index: 14;
}
.sp01-viewport, .pc01-viewport{
  z-index: 13;
}

.clay-product__popover-close {
  position: absolute;
  top: 30px;
  right: 30px;
  width: 32px;
  height: 32px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.clay-product__popover-close img {
  display: block;
  width: 100%;
}

.clay-product__popover-banners {
  width: 286px;
  display: flex;
  flex-direction: column;
  gap: 23.638px;
}

.clay-product__popover-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 286 / 69.669;
  background: #fff;
}

.clay-product__popover-banner img {
  display: block;
}

.clay-product__popover-banner.rosette img{
  width: 85px;
}
.clay-product__popover-banner.amazon img{
  width: 100px;
}
.clay-product__popover-banner.rakuten img{
  width: 97px;
}
.clay-product__popover-text{
  color: #fff;
  margin: 0;
  font-size: 12px;
}

/* ---- 使用方法モーダル（全商品共通、Figma node 4167:2183） ---- */

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

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

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

.clay-usage-modal__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 340px;
  box-sizing: border-box;
  background: #fff;
  padding: 32px 24px 28px;
}

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

.clay-usage-modal__close img {
  display: block;
  width: 100%;
}

.clay-usage-modal__title {
  margin: 0 0 16px;
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 1.8px;
  color: #383838;
  text-align: center;
}

.clay-usage-modal__text {
  margin: 0;
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 1.4px;
  color: #383838;
  white-space: pre-line;
}

/* ---- 全成分モーダル（使用方法モーダルと同じ枠を共用、内容の長さに応じて
   縦スクロールさせる点だけが異なる） ---- */

.clay-ingredients-modal__panel {
  max-height: 80vh;
  overflow-y: auto;
}

/* ==========================================================================
   PC（768px以上）
   ========================================================================== */

@media (min-width: 768px) {
  /* SVG実測: PCは線が x=1320〜1360（右端 1440−1360 = 80）/ y=31・39・47。
      icon_menu.svg の内部線が y=1 始まりなので上端は 31−1 = 30。
      ※ right:80px はこのページのSVGにしか現れない値で、Topページ(PC_01_Top.svg)は
        right:32px。デザイン側の誤りの可能性あり（tasks/clay_svg_diff.md §6-1） */
  .clay-header__menu {
    top: 30px;
    right: 80px;
    width: 40px;
  }

  .clay-kv__photo--pc {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 1440 / 448;
    overflow: hidden;
  }

  .clay-kv__photo--pc > img {
    position: absolute;
    left: 0;
    top: -49.1%;
    width: 100%;
    height: 214.31%;
    max-width: none;
  }

  .clay-kv__tile {
    position: absolute;
    inset: 0;
    z-index: 2;
  }

  .clay-kv__tile img {
    display: block;
    width: 100%;
    height: 100%;
  }

  .clay-kv__photo--sp {
    display: none;
  }

  .clay-top {
    /* KV写真下の80pxは実際はFigma上で紫背景が続くゾーンだったため、
       clay-kv側の余白(margin)ではなくこちら側のpadding-topとして
       紫背景の内側に含める（白い隙間にならないようにする） */
    padding: 80px 40px 0;
  }

  /* PCは1440キャンバス基準（SPの500基準から入れ替える）。
     ページ原点から (-62.2, -228.0)、KV 448px を引いて top -676.0 */
  .clay-top__bg {
    left: -4.3194%;
    margin-top: -46.9444%;
    width: 141.8049%;
  }

  /* SVG実測: PRODUCTSのインク左端 x=126.7 → 要素の左端は約120px */
  .clay-top__label {
    position: absolute;
    left: 120px;
    top: 80px;
  }

  .clay-top__inner {
    max-width: 1200px;
  }

  .clay-top__title {
    max-width: 473px;
    margin: 0 auto 24px;
  }

  .clay-top__title-en {
    font-size: 30px;
  }

  .clay-top__title-jp {
    font-size: 46px;
  }

  .clay-top__text {
    max-width: 896px;
    margin: 0 auto;
  }

  .clay-top__desc {
    font-size: 22px;
    line-height: 2.318;
    letter-spacing: 2.9%;
  }

  .clay-top__desc sup {
    font-size: 0.645em;
  }

  .clay-top__note {
    margin-top: 8px;
  }

  .clay-top__banners {
    flex-direction: row;
    justify-content: center;
    max-width: 896px;
    margin: 57px auto 0;
    /* SVG実測(PC): バナーは x=272 と 728、どちらも幅440 →
       間隔は 728 −(272+440) = 16px。SPは縦積みで20pxなのでPCだけ上書きする */
    gap: 16px;
  }

  .clay-top__banner {
    flex: 1 1 440px;
    max-width: 440px;
    /* SVG実測(PC): rect 440×115。SPは 420×110 なのでPCだけ上書きする */
    height: 115px;
  }

  .clay-anchors {
    padding: 62px 40px 90px;
  }

  /* PC: セクション上端 = 1074 - padding-top 80 = 994 */
  .clay-anchors__bg--sp-a,
  .clay-anchors__bg--sp-b {
    display: none;
  }

  .clay-anchors__bg--pc {
    display: block;
    left: -9.9333%;                   /* -143.04 / 1440 */
    top: 406px;                       /* 1400 - 994 */
    width: 84.1257%;                  /* 1211.41 / 1440 */
    aspect-ratio: 1211.41 / 1056.19;
  }

  /* SVG実測: LINEUPのインク右端 1312.9 → 要素の右端は約120px。
     インク上端 1087.0 はカード1段目の上端(1074)より13px下 */
  .clay-anchors__label {
    right: 120px;
    top: 75px;
  }

  /* PCのLINEUPはPRODUCTSと同じ文字サイズ（インク幅 20.3 対 20.5）。
     SPだけ0.895倍なので、PCではここで等倍に戻す */
  .clay-anchors__label span {
    font-size: 28.676px;
    letter-spacing: 1.4338px;
  }

  .clay-anchors__label::after {
    width: 3px;
    height: 50px;
  }

  .clay-anchors__grid {
    /* PCは4枚+3枚(半カラム分オフセットして中央寄せ)の2段構成。
       8列グリッドにして各カードを2列分ずつ使うことで、
       2段目の半カラムずれをSPと共通のHTMLのまま再現する */
    grid-template-columns: repeat(8, 1fr);
    grid-template-areas:
      "deepblack deepblack smooth smooth acne acne shower shower"
      ".         bright    bright  hakudei hakudei redwrink redwrink .";
    max-width: 812px;
    /* SVG実測: 横は 189.4 + 18.1 のピッチ207.5 ＝ gap 18px。
       縦は1段目の下端1361.8 → 2段目の上端1363.3 で、ほぼ接している */
    gap: 1.5px 18px;
  }

  .clay-anchor--deepblack {
    justify-self: stretch;
    width: auto;
  }

  .clay-anchors__note {
    max-width: 812px;
    margin-top: 28px;
    text-align: right;
  }

  .clay-anchors__note-break {
    /* PCは812px幅で1行に収まる(Figma実測) */
    display: none;
  }

  .clay-product__decor {
    /* PC(Figma)は「装飾ゾーンの後にテキストが続く」のではなく、
       装飾（ワードマーク・写真・影）とテキストが同じ700px幅の中で
       重なり合う構成。decorを絶対配置にしてbodyの高さに合わせて重ね、
       SPのように高さ分を押し下げないようにする */
    position: absolute;
    inset: 0;
    height: auto;
    z-index: 0;
  }

  .clay-product__wordmark {
    left: calc(-18 * var(--u, 1px));
    top: calc(-24 * var(--u, 1px));
    font-size: calc(160 * var(--u, 1px));
    line-height: calc(160 * var(--u, 1px));
  }
  #redwrink.clay-product__wordmark{
    left: calc(-14 * var(--u, 1px));
  }

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

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

  .clay-product__shadow {
    left: calc(816 * var(--u, 1px));
    top: calc(119.21 * var(--u, 1px));
    width: calc(338.375 * var(--u, 1px));
    height: calc(620.046 * var(--u, 1px));
  }

  .clay-product__hero {
    left: calc(591.42 * var(--u, 1px));
    top: calc(-52.91 * var(--u, 1px));
    width: calc(608.882 * var(--u, 1px));
    height: calc(846.251 * var(--u, 1px));
  }

  .clay-product__hero img {
    width: calc(363 * var(--u, 1px));
    height: calc(767.745 * var(--u, 1px));
  }

  /* SVG実測: アクネクリアだけ rotate(20.5 850.997 3144) で、
     他の標準3商品（860.293 / 1736.09 相当）より左に9.3px・下に7.9px */
  .clay-product--acne .clay-product__hero {
    left: calc(582.13 * var(--u, 1px));
    top: calc(-45 * var(--u, 1px));
  }

  .clay-product__body {
    position: relative;
    z-index: 1;
    display: flex;
    /* Figma実測: テキストはtop固定（商品ごとに値が異なる）で配置される
       要素であり、購入ボタン群と高さで釣り合わせて中央寄せされている
       わけではない。align-items:centerだとテキスト量に応じてtop位置が
       ずれてしまうため、テキストはflex-startで固定し、購入ボタン群だけ
       個別にalign-selfで位置調整する */
    align-items: flex-start;
    /* Figma実測: テキストは左端(x:72)、購入ボタン群は右端(x:1154)に固定され、
       間に写真が重なる構成。gapで隣接させるとボタンが写真の下敷きになって
       しまうため、space-betweenで両端に離す */
    justify-content: space-between;
    gap: calc(40 * var(--u, 1px));
    /* SVG実測: 購入ボタン群は右端 1383.5（＝1440−56.5）、
       反転配置では左端 56.5。よって内容枠は 56.5〜1383.5。
       max-width:1360 + padding:40 だと 80〜1360 になり、ボタンが約23px内側に来る */
    max-width: calc(1440 * var(--u, 1px));
    margin: 0 auto;
    padding: calc(152 * var(--u, 1px)) calc(56 * var(--u, 1px)) calc(80 * var(--u, 1px));
  }

  .clay-product__intro {
    /* flex-grow:1だとjustify-content:space-betweenに使われるはずの
       余白まで自分の幅として吸収してしまい、buyが写真の下に隠れて
       いた。growさせず基準幅576pxで固定する。
       ベース(SP)のmax-width:420pxはそのままだと576pxを上書きして
       しまうので、ここで明示的に解除する */
    flex: 0 1 calc(576 * var(--u, 1px));
    max-width: calc(576 * var(--u, 1px));
    /* SVG実測: 本文の左端は73、内容枠の左端は56.5 → 差の16.5だけ内へ寄せる。
       space-between なので、この余白は購入ボタン群の位置には影響しない */
    margin: 0 0 0 calc(16.5 * var(--u, 1px));
    text-align: left;
  }

  /* 反転配置は本文が右側。SVG実測の本文左端793 ＋ 幅576 = 1369 で、
     内容枠の右端1383.5 との差は14.5 */
  .clay-product--mirrored .clay-product__intro {
    margin: 0 calc(14.5 * var(--u, 1px)) 0 0;
  }

  .clay-product__ingredients {
    grid-template-columns: repeat(4, 1fr);
    justify-items: start;
    gap: 0;
    /* Figma実測: PCも見出し/説明文→成分アイコン→注釈はgap:16pxで統一 */
     margin-top: 16px;
  }

  .clay-product__ingredient {
    max-width: calc(144 * var(--u, 1px));
  }
  .clay-product__ingredient .clay-product__img{
    padding: 0 12px;
  }

  /* PCは成分が横1行（4カラム）なので、SPの「3つ目を中央に」は打ち消す */
  .clay-product__ingredient:last-child:nth-child(odd) {
    grid-column: auto;
    justify-self: start;
    width: 100%;
  }

  .clay-product__note {
    margin-top: calc(16 * var(--u, 1px));
  }

  .clay-product__note-break {
    display: inline;
  }

  .clay-product__buy {
    /* PCはSPと違い、ジャー写真も含めて1本の縦積みカラム（Figma実測）。
       buy-colはただのラッパーとして展開し、直接の子として並べ直す */
    flex: 0 0 calc(230 * var(--u, 1px));
    flex-direction: column;
    align-items: center;
    gap: 8px;
    max-width: calc(230 * var(--u, 1px));
    margin: 0;
    /* 標準配置(ディープブラック/アクネクリア/ガスールブライト/
       レッドリンクル/白泥ハクデイ)は購入ボタン群がセクション内で
       縦中央寄せ（Figma実測: top:calc(50%+...)）。海泥スムース/
       シャワークレンズだけtop固定なので.clay-product--mirroredで上書き */
    align-self: center;
    padding-left: 0;
  }

  .clay-product__buy-jar {
    align-self: center;
    /* Figma実測: PCのサムネイルはSP(114px)より小さい101px */
    width: calc(101 * var(--u, 1px));
    aspect-ratio: 101 / 214;
  }

  .clay-product__buy-col {
    display: contents;
  }

  .clay-product {
    /* --u（拡大の基準単位）は .clay-pin で宣言し、ここへ継承される */

    /* Figma実測: 7商品すべてのインスタンスがheight:700px固定
       （"商品情報"インスタンスはどれもwidth:1440 height:700）。
       全商品で高さを統一するため、min-heightではなくheightで固定する */
    height: calc(700 * var(--u, 1px));
  }

  /* ---- 共通ブロックにしか無くPCで倍率が掛からない値を、ここで上書きする ----
     （画面固定オーバーレイの .clay-product__popover-* と .clay-usage-modal* は
       1440キャンバスの構成要素ではないので対象外） */

  .clay-product__headline {
    font-size: calc(34 * var(--u, 1px));
    line-height: 1.2;
  }

  .clay-product__desc {
    margin-top: calc(16 * var(--u, 1px));
    font-size: calc(18 * var(--u, 1px));
    line-height: 2;
  }
  #redwrink .clay-product__desc{
    letter-spacing: 0;
  }

  .clay-product__ingredient {
    gap: calc(8 * var(--u, 1px));
  }

  .clay-product__ingredient p {
    font-size: calc(14 * var(--u, 1px));
    line-height: 1.2;
  }

  .clay-product__ingredient--badge p {
    font-size: calc(16 * var(--u, 1px));
    line-height: calc(31 * var(--u, 1px));
  }

  .clay-product__badge-num {
    line-height: calc(31 * var(--u, 1px));
  }

  .clay-product__note {
    font-size: calc(12 * var(--u, 1px));
  }

  .clay-product__buy-col {
    gap: calc(9 * var(--u, 1px));
  }

  .clay-product__buy-name {
    font-size: calc(18 * var(--u, 1px));
  }
  .clay-product__buy-name sup{
    font-size: 12px;
  }
  
  .clay-product__btn {
    gap: calc(8 * var(--u, 1px));
    height: calc(55 * var(--u, 1px));
    border-width: calc(1 * var(--u, 1px));
    font-size: calc(18 * var(--u, 1px));
    letter-spacing: calc(1.8 * var(--u, 1px));
  }

  .clay-product__btn img {
    width: calc(15 * var(--u, 1px));
    height: calc(15 * var(--u, 1px));
  }

  /* Figma実測: PCは商品ごとにテキスト/購入ボタンの左右配置と
     ワードマークの上下位置が交互に反転する構成（海泥スムース／
     シャワークレンズ／白泥ハクデイが「反転」パターン）。
     DOM順は共通のまま、row-reverseで見た目の左右だけ入れ替える。 */
  .clay-product--mirrored .clay-product__body {
    flex-direction: row-reverse;
    /* 海泥スムース/シャワークレンズはテキストのtopがFigma実測72px
       （標準配置の152pxとは異なる） */
    padding-top: calc(72 * var(--u, 1px));
  }

  .clay-product--mirrored .clay-product__buy {
    /* 海泥スムース/シャワークレンズは購入ボタン群も中央寄せではなく
       top:40px固定（Figma実測）。bodyのpadding-top(72px)との差分だけ
       負のマージンで引き上げる */
    align-self: flex-start;
    margin-top: calc(-32 * var(--u, 1px));
  }

  .clay-product--mirrored .clay-product__wordmark {
    top: calc(564 * var(--u, 1px));
  }
  #hakudei.clay-product--mirrored .clay-product__wordmark{
    top: calc(566 * var(--u, 1px));
  }

  /* 白泥ハクデイだけ反転パターンの中でもさらに例外
     （テキストtop:40px、購入ボタンは中央寄せ、Figma実測） */
  .clay-product--hakudei .clay-product__body {
    padding-top: calc(40 * var(--u, 1px));
  }

  .clay-product--hakudei .clay-product__buy {
    align-self: center;
    margin-top: 0;
  }

  .clay-product--mirrored .clay-product__shadow {
    left: calc(315.29 * var(--u, 1px));
    top: calc(139.17 * var(--u, 1px));
    width: calc(283.713 * var(--u, 1px));
    height: calc(620.737 * var(--u, 1px));
    transform: rotate(-0.94deg);
    mix-blend-mode: multiply;
  }

  .clay-product--mirrored .clay-product__hero {
    left: calc(265 * var(--u, 1px));
    top: calc(-39 * var(--u, 1px));
    width: calc(582.559 * var(--u, 1px));
    height: calc(842.585 * var(--u, 1px));
  }

  .clay-product--mirrored .clay-product__hero img {
    width: calc(363 * var(--u, 1px));
    height: calc(768 * var(--u, 1px));
    transform: rotate(-18deg);
  }

  .clay-product__hero--hakudei {
    left: calc(277 * var(--u, 1px));
    top: calc(-37 * var(--u, 1px));
    width: calc(596.895 * var(--u, 1px));
    height: calc(820.3 * var(--u, 1px));
  }

  .clay-product__hero--hakudei img {
    width: calc(392.54 * var(--u, 1px));
    height: calc(736.012 * var(--u, 1px));
    transform: rotate(-17.62deg);
    object-fit: cover;
  }

  .clay-usage-modal__panel {
    max-width: 800px;
    padding: 42px 80px 40px;
  }

  .clay-usage-modal__close {
    top: 30px;
    right: 30px;
    width: 30px;
    height: 30px;
  }

  .clay-usage-modal__title {
    margin-bottom: 17px;
    font-size: 20px;
    letter-spacing: 2px;
  }

  .clay-usage-modal__text {
    font-size: 16px;
    letter-spacing: 1.6px;
  }
}