@charset "UTF-8";
/* ============================================================
   260918_A04627_gelato pique cafe_OPEN カミスン
   掲載先＝**USAGI ONLINE の特集ページ**（2026-09-08 の人の明言）。gelatopique.com へは上げない。
   ★器（枠・追従ヘッダーの配線・PC/SPの出し分け・ブレークポイント）は
     `templates/feature_base.html` を写した＝初稿は掲載先を取り違えて複製せずに組んであったので、
     **本文の値はそのままで器だけ載せ替えた**（要確認リスト 残タスク17）。

   ■ 寸法の書き方（規約 §8-1）
     寸法は「SPカンプ(750px幅)の実測px ÷ 10」の rem で1組だけ書く。
     PC/SPの縮尺差は html{font-size} の1行だけが持つ。
       SP : 1.33333vw  → 実機375pxで 1rem=5px（75rem=375px）
       PC : 0.37037vw  → 画面1440pxで 1rem=5.3333px（75rem=400px＝PC支給の中央カラム幅）
     ★動きの量（translateY など）は px で書く＝紙面の寸法ではなく画面上の距離。
     ★PC専用のレールは --pcu（1 PCカンプpx）で書く＝本文カラムの rem を当てない（§8-1）。
   ■ ブレークポイント＝**750/751**（テンプレと同じ＝掲載先の公開実物で最多）。
     SPを土台に書き、PCの縮尺とフレームだけを下の「PCブロック」が持つ。
   ============================================================ */

/* ---- CMS組み込みの必須リセット（案件で消さない・docs/cms-embed.md §3） ---- */
.l-container { width: 100%; }
.l-footer, .pc-footer { margin: 0; padding: 0; }
.l-container::after { content: ""; }
sup, sub { position: static; top: auto; }

/* ---- リセット（LPの根へスコープする＝掲載先のヘッダー/フッターへ漏らさない・§3b） ---- */
.feature, .feature * { margin: 0; padding: 0; border: 0; vertical-align: baseline; box-sizing: border-box; }
body { margin: 0; }
.feature ul, .feature ol { list-style: none; }
.feature img { display: block; vertical-align: bottom; max-width: 100%; height: auto; }
.feature a { color: inherit; text-decoration: none; }
/* ★アンカーの着地は追従ヘッダーの高さぶん逃がす（テンプレは 50px 固定・こちらは実測値を使う
   ＝同じ値を2か所で持たない。実測は js/script.js が --cms-header-h へ流す） */
.feature * { scroll-margin-top: var(--cms-header-h, 0px); }
/* ★見出しと strong を .feature の font-weight の継承へ戻す（ブラウザ既定の太字は継承より強い） */
.feature h1, .feature h2, .feature h3, .feature h4, .feature h5, .feature h6,
.feature strong, .feature b { font-weight: inherit; }

/* ---- 縮尺の基準＝SPが土台。PCは下の「PCブロック」の1行だけが持つ ---- */
html { scroll-behavior: smooth; font-size: 1.33333vw; }   /* SP＝実機375pxで 1rem=5px */

/* ---- 器 ---- */
.feature {
  --pcu: calc(100vw / 1440);                   /* PCカンプ1pxぶん（レール専用） */
  --hdr: 51px;                                 /* 掲載先の追従ヘッダー高（固定値・SP 51 / PC 80 はPCブロックで）＝FV と凍結位置の計算に使う */
  position: relative;
  /* ⚠ ここに overflow-x: clip を置かない（2026-09-14 に撤去）。
     理由＝**貼り付き（sticky）がスマホで細かく震える**（人の指摘「プルプル震える」）。
     position:sticky は祖先の overflow が visible でないと、ブラウザの合成側から落ちて毎コマ計算になる。
     clip でも同じ（「clip はスクロール容器を作らないので sticky はそのまま効く」と書いてあったが、
     **効くことと滑らかなことは別**だった）。PCで起きずSPだけだったのは、PC側でだけ clip を外していたため。
     ★参考ページ（fray-id 2024ss／2024aw）は、貼り付き要素の祖先に overflow を1つも持っていない（実測）。
     はみ出しの処理は**はみ出す要素自身**が持つ＝look25 と横引き・★Dの枠（下の各所）。 */
  background: #EBF3F7;                         /* 正値 #E3EEF4 を不透明度70%で白に重ねた合成色 */
  color: #1C558A;
  font-family: "hiragino-kaku-gothic-pron", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", sans-serif;
  font-weight: 300;
  /* ★既定の文字サイズはここで明示する（2rem＝カンプ20px）＝1rem が実機5px相当なので、
     これが無いと「font-size を書き忘れたテキスト」が5pxで出る（テンプレと同じ理由） */
  font-size: 2rem;
  /* ★字間は**実効 0.5px** を保つ値で書く（照合で通した見た目）。
     器の載せ替えで上の font-size を明示したので em の分母が 10px→20px に変わり、
     元の .05em はそのままだと 1px＝倍になる（STAFF の3件目が1行折り返して紙面が34px伸びた・実測）。
     ⚠ STAFF の字間は正値（layout.json）に無い＝「級数の5%」が正なら仕上げで .05em へ戻す判断が要る。
     字間を持つ他の要素（lead .025em / credit .03em）は自分で宣言しているのでこの行の影響を受けない。 */
  letter-spacing: .025em;
  /* カナ・約物を字幅どおりに詰める（Illustrator のプロポーショナルメトリクス）。
     カンプの字面幅 394.17（layout.json txt01）に対し、詰めなしの全角送りだと 443 になる
     ＝18字ぶんで約49px 広がる。正値が詰まっている側なので合わせる。 */
  font-feature-settings: "palt";
  /* 和文の折り返しをカンプへ揃える＝Chrome 既定の行末約物の詰めと、小書き仮名の行頭許容を止める */
  text-spacing-trim: space-all;
  line-break: strict;
}
.feature .en,
.feature .hero__ttl,
.feature .credit,
.feature .staff { font-family: "futura-pt", Futura, sans-serif; font-weight: 500; }

/* ============ FV ============ */
.feature .hero { position: relative; }
.feature .hero__img { margin-top: 0rem; }
.feature .hero__img img { width: 100%; }
.feature .hero__ttl {
  position: absolute; top: 25.956rem; left: 24.118rem;
  width: 26.764rem;                            /* 正値 267.64 */
}
/* ロゴは SVG（svgtext-02.svg・光彩つき）＝viewBox 265.2×216 の中で字形は (20.25, 20.25) から 204.5×155.25。
   正値（字形の箱 204.7×155.61 を x27.265 y85.2 に置く）へ合わせるため、光彩のぶん四方へ広げて置く
   ＝1単位 0.1001rem × 20.25 = 2.027rem 外へ。PNG（look-03）は iPhone（DPR3）で1.5倍に伸びてぼやける */
.feature .hero__logo {
  position: absolute; top: 83.173rem; left: 25.238rem;
  width: 26.546rem;                            /* 字形 20.47rem ＋ 光彩の余白 */
}

/* ============ 中央本文の器（SP＝1本・PCは下のPCブロックで3カラムになる） ============
   ★display:flow-root は飾りではない＝clip は BFC を作らないのでマージン相殺を止めない（#565）。
     無いと先頭要素の margin-top が器の外へ抜けて全体が上へずれる（PC面はSPのFVが消えて
     先頭要素が変わるので、SPでは出ないずれがPCだけで出る）。
   ★背景は敷かない＝この案件の地色は .feature（#EBF3F7）＋白い節4枚が持つ（テンプレは #fff）。 */
.feature .frame-main__inner {
  display: flow-root;
  position: relative; z-index: 0;              /* 白い地（.white::before・z-index:-1）の受け皿・§8-11 */
  width: 100%; margin: auto;
  /* ★紙面（本文カラム）からはみ出す絵は隠す＝デザインの約束（2026-09-08 に人が明言）。
     ⚠ ただし**ここ（本文カラム）では切らない**（2026-09-14 に撤去）＝中の貼り付きが全部この下に居るので、
       ここに overflow を置くと sticky が合成側から落ちてスマホで震える（上の .feature のコメント）。
     切るのは**はみ出す要素自身**＝実測すると、カラムを超えるのは3つだけで全部自分の枠を持っている：
       ・横引きの帯（.scrollx）と★Dの2枚目（.xframe）… もともと自分が overflow:hidden で切っている
       ・look25 の丸写真 … 下の .look25 で自分の幅を 75rem に収め、中の写真を自分で切る（PCでは枠の外へ出す） */
  /* ★紙面の末尾の余白＝カンプは最後の要素（STAFF）の下に SP 189.35px（=21402.35−21213）の空きを持つ。
     PC は 90.5px（=11540.5−11450）で SP の縮尺（100.99）より 10.5px 狭い＝下のPCブロックで差し引く。
     ⚠ 毎回人が指摘している項目＝「掲載先のフッター余白と二重になるかも」を理由に落とさない。 */
  padding-bottom: 18.935rem;
}

/* ---- PC/SPの出し分け＝**SPが既定**（テンプレと同じ向き。PCブロックで反転する） ---- */
.feature .pc { display: none; }

/* ============================================================
   ▼PCブロック（751px以上）＝縮尺と、PC専用のフレームだけを持つ
   ★寸法の二重管理をしない＝本文の値はここに書かない（上の1組がそのまま縮尺される）
   ============================================================ */
@media screen and (min-width: 751px) {
  /* 縮尺はこの1行＝【本文カラム幅(PCカンプpx) ÷ 75 ÷ 1440 × 100】vw
     ＝400/75=5.3333px → 0.37037vw（PC支給1440幅の中央カラム400px） */
  html { font-size: 0.37037vw; }

  .feature .pc { display: block; }
  .feature .sp { display: none; }
  /* 静的プレビュー専用ラッパー div.pc の透明化（本番は m:echo="false" でタグごと消える＝同じ挙動）
     ＝これが無いと div.pc 自身が flex の並びに入ってレールが潰れる */
  .feature .frame > .pc { display: contents; }

  /* 全幅ヘッダー/フッター（①④）＝本文の上下・紙面いっぱい */
  .feature .frame-header, .feature .frame-footer { width: 100%; }

  /* ★PC の FV は高さ100%＝画面いっぱい（追従ヘッダーを除く）で、スクロールすると後続の本文が上から覆いかぶさる
     ＝型は docs/recipes/fv-scroll-cover.md（fixed 禁止＝sticky で作る・走路なし＝紙面の長さは伸びない）。
     人の指示（2026-09-08・毎案件の約束）＝「PCのFVは高さ100%。参考サイトと同じく FVより下のコンテンツが覆いかぶさる」。
     ・FV（frame-header）を sticky＝ヘッダー下端で留まり続ける（最後まで解けない・覆われて見えなくなる）
     ・覆う側（.frame）は不透明な1枚のシート＝背景色を持つ。重なり順は DOM 順（後が上）＝z-index は 0 / 1
     ・写真は高さ var(--fv-h)・object-fit: cover。文字とロゴは画面の角へ寄せる（top/right・left/bottom）＝高さが
       画面で変わっても構図の隅に留まる（fullbleed-hero.md「下側の要素は bottom 基準」） */
  /* FV の高さ＝画面 − 追従ヘッダー、留まる位置＝追従ヘッダーの下端（人の指示 2026-09-09）。
     ⚠ ヘッダー高は実測の変数（--cms-header-h）でなく**固定値**で持つ＝掲載先のヘッダーはスクロールを始めてから
     出る（0→80px）ので、変数に連動させると出た瞬間に FV がキュッと縮む（人が実機で指摘）。
     値はレシピ fv-scroll-cover の knob（--header-h）＝掲載先の実測 PC 80px（docs/brand-specs.md・USAGI ONLINE） */
  .feature { --hdr: 80px; --fv-h: calc(100svh - var(--hdr)); }
  .feature .frame-header { position: sticky; top: var(--hdr); z-index: 0; }
  .feature .hero__img img.pc { height: var(--fv-h); object-fit: cover; object-position: center; }
  .feature .frame { position: relative; z-index: 1; background: #EBF3F7; }

  /* sticky 成立の前提2つ（崩さない）
     1. .frame は display:flex ＋ align-items:stretch（サイド列が本文の高さまで伸びる＝走路になる）
     2. 追従させる中身は必ず .frame-side__inner に入れる */
  .feature .frame { display: flex; align-items: stretch; justify-content: center; }
  /* 中央本文＝75rem 固定（「SPカンプ750px幅ぶん」の意味。実pxは上の html{font-size} が作る）。
     ★カラム幅を変えるときはこの行ではなく html{font-size} を直す＝器と中身の縮尺が構造的に一致する */
  .feature .frame-main { flex: 0 0 auto; width: 75rem; }
  .feature .frame-main__inner { padding-bottom: calc(18.935rem - 10.5 * var(--pcu)); }

  /* FV の文字とロゴ（PC本データの正値・FV上端 y118 からの距離）。
     ロゴ（pcsvg-02）は光彩つき＝viewBox 269.52×219.6 の中で字形は (20.75, 20.5) から 207.75×158。
     字形の箱（208.19×158.27 を x28.31 y496.07）へ合わせるため、光彩のぶん左上へ寄せて置く（実測して算出） */
  /* 角基準＝右端から 36.39（=1440−1035.43−368.18）／ロゴは字形の下端が FV 下端から 37.66（=692−496.07−158.27）。
     ロゴ SVG は字形の下に光彩の余白 41.2（=(219.6−20.5−158)×1.0021）を持つので bottom は 37.66−41.2 = −3.54 */
  .feature .hero__ttl--pc  { top: calc(41.22 * var(--pcu)); right: calc(36.39 * var(--pcu)); left: auto; width: calc(368.18 * var(--pcu)); }
  .feature .hero__logo--pc { bottom: calc(-3.54 * var(--pcu)); top: auto; left: calc(7.52 * var(--pcu)); width: calc(270.09 * var(--pcu)); }

  /* サイド列の土台＝幅指定の無いサイドは左右の余白を等分（1440幅で520pxずつ＝PC支給と一致） */
  .feature .frame-side { position: relative; flex: 1 1 0; z-index: 1; }
  /* ★下の余白は**走路の終わりのため**＝レールは紙面の最下端まで走るので、余白が0だと
     レールの中身が掲載先フッターに接する（手元には掲載先フッターが無いので画面では見えない）。
     80 はテンプレの既定値＝本文末尾の余白に合わせて書き換えてよい（この案件の末尾余白は要確認 B-2）。
     ★sticky の上端は追従ヘッダーの実測値ぶん下げる（js/script.js が --cms-header-h へ流す）。 */
  .feature .frame-side__inner {
    position: sticky; top: var(--cms-header-h, 0px);
    margin-bottom: calc(90.5 * var(--pcu));    /* 本文末尾の余白（PC 90.5px）と同じ＝テンプレの既定どおり揃える */
    --rail-h: calc(100vh - var(--cms-header-h, 0px));
    height: var(--rail-h);
    overflow: hidden;                          /* 画面が低いときレールの中身を紙面へはみ出させない */
  }
  /* レールに載る塊＝器の天地中央（写真とは独立に置く）。
     ⚠ 縦位置を幅基準（--pcu）で書くと、幅が広くて低い画面で下へ逃げて画面外へ出る＝比率で置く。
     ★カンプは「可視領域の上端から785px」だが天地中央に倒してある（規約 §8-6-2・要確認 A-12）。 */
  .feature .side__body { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; }
  /* レールの中身の寸法は --pcu（1 PCカンプpx）＝本文の rem を当てない（Issue #440） */
  .feature .frame-side.-left .side__ttl {
    position: relative; left: 48.7%; transform: translateX(-50%);
    width: calc(151.58 * var(--pcu));          /* PC本データ（_ol）の実測 151.58（レール幅520の中で中心253.2） */
  }
  .feature .frame-side.-right .side__link {
    position: relative; left: 48.1%; transform: translateX(-50%);
    display: block; width: calc(220.61 * var(--pcu));  /* PC実測 220.61（中心250.33） */
  }
  .feature .side__link img { width: 100%; }   /* 器の幅に合わせる（無いと素材の実寸で出る） */
}

/* ============ 白い節（bgCandidates の white レイヤー4枚） ============
   ★本文の流れに乗せる＝中身を div.white で包み、白は ::before で器の上下から少しはみ出させる。
     正値（紙面上端からの絶対位置）は 413.745+132.535 / 884.106+86.319 / 1268.794+132.535 / 1744.942+132.535。
     器の上下端からの差（--wt / --wb・正の値＝内側）は静止状態（?noanim・750幅）の実測で出した。
     紙面上端からの絶対配置にすると、演出で紙面が伸びた瞬間（横引きの pin・2枚目の挿入）に白だけが置き去りになる。
     はみ出した分は隣の写真の裏に隠れる（カンプでも同じ）。 */
.feature .white-sec { position: relative; z-index: 0; display: flow-root; }   /* z-index:0＝::before の -1 を受けるスタッキングコンテキスト（§8-11） */
.feature .white-sec::before {
  content: ""; position: absolute; left: 0; right: 0;
  top: var(--wt, 0rem); bottom: var(--wb, 0rem);
  background: #fff; z-index: -1;
}
.feature .white-sec--1 { --wt: -5.51rem;  --wb: -17.74rem; }   /* look07 の下端の 5.5 上 〜 look10 の 2.75 下 */
.feature .white-sec--2 { --wt: 7.79rem;   --wb: -3.94rem; }    /* look15 の 3.78 上 〜 3.94 下（白い枠） */
.feature .white-sec--3 { --wt: -18rem;    --wb: -24.4rem; }    /* look19 の下端の 18 上 〜 look21 の 14.5 下 */
/* ★白い地の上端が「前の写真」に付いているもの（1枚目＝look07 の下端の 5.51 上・3枚目＝look19 の下端の 18 上）は、
   その写真が凍結している間も一緒に止まって写真の下に居なければならない（人の指摘 2026-09-09「本来なら stick する、下にあるべき」）。
   白い節（.white-sec）は凍結中に流れる側なので、上端側の白を**凍結する束の stick** に敷く＝写真の下端から**器（.stack）の下端**まで
   伸ばし、流れてくる白い節の上端と重ねる（重なった分は同じ白）。z-index:-1 で束の中身（写真）の下。
   stick の下端から器の下端までの距離＝走路 × (1 − 進み具合)＝走路の長さ --runway-now と JS の --p（data-scrub）で出す
   （凍結の前＝走路まるごと・凍結が終わった後＝0＝stick は器の末尾に居る）。走路だけで伸ばすと凍結後に走路のぶん長すぎる */
/* ★白い地の「凍結中に伸びる分」は**走路そのものを白く塗る**（2026-09-14）。
   走路は束の中で1枚目の真下にあり、凍結中はその下端が「1枚目の下端 ＋ 残りの走路」にちょうど居る
   ＝塗るだけで、以前 JS が毎コマ計算していた長さと**同じ形**になる（実測で画素一致を確認）。
   ⚠ 以前は stick の擬似要素の bottom を --p（JSが毎コマ配る値）で伸縮させていた。
     これは**止まっている写真の中身が毎コマ変わる**ということで、写真ごと毎コマ描き直しになる
     ＝人の指摘「上に乗る写真がプルプル震える」の原因になりうる。
     参考ページ（fray-id 2024ss）の★Cも「CSSだけでJSは無い」と実測記録にある＝そちらへ戻した。 */
.feature .stack--07 > .stack-runway,
.feature .stack--19 > .stack-runway,
.feature .stack--26 > .stack-runway { background: #fff; }
/* 写真と重なる分（継ぎ目を作らないための重ね代）＝高さは固定・JSは要らない */
.feature .stack--07 > .stack-stick::after,
.feature .stack--19 > .stack-stick::after,
.feature .stack--26 > .stack-stick::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: -1; background: #fff;
}
.feature .stack--07 > .stack-stick::after { top: calc(100% - 5.51rem); }
.feature .stack--19 > .stack-stick::after { top: calc(100% - 18rem); }
/* 4枚目の白は look26 の上端の 11.78 下 〜 look26 の下端の 78.39 下（アイス look27 の途中）。2つに分けて敷く＝
   ①上端側＝凍結する束の stick（上と同じ型。上端は look26 の束内位置 --above を JS が渡す・下端は器の下端）
   ②下端側＝器（.stack--26）の下端から 78.39 下まで（器の ::after＝後続の2枚目・クレジット・アイスに付いて動く） */
.feature .white-sec--4::before { display: none; }
.feature .stack--26 { z-index: 0; }   /* ②の z-index:-1 を受けるスタッキングコンテキスト */
.feature .stack--26 > .stack-stick::before { top: calc(var(--above, 0px) + 11.78rem); }
.feature .stack--26::after {
  content: ""; position: absolute; left: 0; right: 0; z-index: -1; background: #fff;
  top: 100%; height: 78.39rem;
}
/* 白い節の直下の要素は描画順を DOM 順に固定（section > * と同じ）＝位置指定の無い要素（クレジット・アイス）が
   束の白（stacking context の z:0）の裏へ回るのを防ぐ（静止版で credit08 と look27 が白の裏に隠れていた） */
.feature .white-sec > * { position: relative; }

/* ============ 本文 ============ */
.feature section > * { position: relative; }  /* 描画順をDOM順に固定・§8-2 */

/* ---- リード文 ---- */
.feature .lead {
  margin-top: 6.947rem;
  width: 100%; text-align: center;
  font-size: 2.4rem; line-height: 2; letter-spacing: .025em;
}

/* ---- 写真（幅と左位置は正値そのまま） ---- */
.feature .look04 { margin-top: 22.87rem; width: 63.003rem; margin-left: 5.998rem; }
/* ★留まる側（.stack__base）の上余白は器（.stack--NN）に書く＝留まる側に付けると margin が器の上へ抜けて
   sticky の留まる範囲が消える（実測＝look05 が1pxも留まらなかった・2026-09-08） */
.feature .look05 { width: 60.003rem; margin-left: 14.999rem; }
.feature .look07 { width: 75.004rem; margin-left: 0.004rem; }
.feature .look08 { margin-top: 10.078rem; width: 55.003rem; margin-left: 9.999rem; }   /* 正値 9.943 ＋ 2枚目（93.7）が1枚目（93.835）より 0.135 短いぶん */
.feature .look10 { width: 75rem; }
.feature .look13 { margin-top: 9.737rem; width: 59.57rem; margin-left: 7.715rem; }
.feature .look15 { margin-top: 11.57rem; width: 63.003rem; margin-left: 5.998rem; }
.feature .look16 { width: 34.002rem; }
/* look17 の上余白＝正値は fr16 の塊（43.079）の下端から 58.848。器が2枚目の下端（94.09）まで伸びたので差し引く */
.feature .look17 { margin-top: 7.837rem; width: 57.895rem; margin-left: 9.314rem; }
.feature .look19 { width: 75.004rem; }
.feature .look23 { width: 75.004rem; }
/* ★look25（丸写真）はカラムの右へ 8.219rem はみ出す唯一の絵＝**自分で切る**。
   器の幅をカラムの残り（75 − 7.804）に収め、中の写真は正値の 75.415rem のまま器で切る
   ＝カラムに overflow を置かずに済む（置くと中の貼り付きが震える・上のコメント）。PCでは枠の外へ出す。 */
.feature .look25 { margin-top: 12.432rem; width: 67.196rem; margin-left: 7.804rem; overflow: hidden; }
.feature .look25 .lk__link { display: block; width: 75.415rem; }
.feature .look25 img { width: 75.415rem; max-width: none; }
.feature .look26 { width: 53.003rem; }                 /* 上余白は .stack--26 に */
.feature .lk img { width: 100%; }

/* 写真リンクは「白へフェード」＝下地を1px内側に敷く（§8-7） */
.feature .lk__link,
.feature .viewall__link {
  display: block;
  background: linear-gradient(#fff, #fff) center / calc(100% - 2px) calc(100% - 2px) no-repeat;
}
/* ⚠ 透過素材には白下地を敷かない＝透明な部分がそのまま白い四角として出る（実機で確認）。
   §8-7 の「白へフェード」は不透明な写真が前提で、切り抜き素材では成立しない。 */
.feature .look13 .lk__link,
.feature .look17 .lk__link,
.feature .look25 .lk__link,
.feature .viewall__link { background: none; }

/* ---- 区切り装飾（アイスコーン3つ・9か所とも同じ意匠。余白だけ個別＝flow-margins が書き戻す） ---- */
.feature .deco-ice {
  width: 13.444rem; margin-left: auto; margin-right: auto;   /* 正値 x307.78＝中央 */
}
.feature .look06 { margin-top: 9.564rem; }
.feature .look09 { margin-top: 9.766rem; }
.feature .look11 { margin-top: 11.668rem; }
.feature .look14 { margin-top: 10.702rem; }
.feature .look18 { margin-top: 12.94rem; }
.feature .look22 { margin-top: 9.184rem; }
.feature .look24 { margin-top: 9.829rem; }
.feature .look27 { margin-top: 9.471rem; }
.feature .look29 { margin-top: 11.214rem; }

/* ---- クレジット（構造は全案件共通・§8-3） ---- */
.feature .credit { font-size: 2.8rem; line-height: 1.52; letter-spacing: .03em; }
.feature .credit .item { white-space: nowrap; }
.feature .credit .link { display: inline; }
/* credit01 の上余白＝カンプ正値は look05 の下端から 55.09。器（.stack--05）が2枚目の下端まで 58.63 伸びたので差し引く */
.feature .credit01 { margin-top: -3.54rem; text-align: left; margin-left: 53rem; }
.feature .credit02 { margin-top: 5.257rem; text-align: center; }
.feature .credit03 { margin-top: 16.123rem; text-align: center; }   /* 正値 7.796 ＋ 2枚目の下端が1枚目の下端より 8.327 上にあるぶん */
.feature .credit04 { margin-top: 8.154rem; text-align: center; }
.feature .credit05 { text-align: left; }
.feature .credit06 { margin-top: 8.8rem; text-align: left; margin-left: 6rem; }
.feature .credit07 { margin-top: 18.081rem; text-align: center; }   /* 正値 8.871 ＋ 3枚目の下端（84.39）が look23 の下端（93.6）より 9.21 上にあるぶん */
/* credit08 の上余白＝正値は look26 の下端から 56.76。器（.stack--26）が2枚目の下端まで 47.97 伸びたので差し引く */
.feature .credit08 { margin-top: 8.79rem; text-align: center; }

/* ---- credit05 と look16 の横並び（カンプで重なる1ブロック）＝★C の凍結する束（.stack--16 の中）。高さ 43.079 ---- */
.feature .fr16 { position: relative; height: 43.079rem; }   /* ⚠ relative が無いと絶対配置の中身が束（sticky）の先頭へ飛ぶ（実害 2026-09-09） */
.feature .fr16 .credit05 { position: absolute; top: 0; left: 6rem; margin-top: 0; }
.feature .fr16 .fr16__img { position: absolute; top: 0.57rem; left: 40.999rem; width: 34.002rem; }

/* ---- VIEW ALL ---- */
.feature .viewall { margin-top: 11.113rem; width: 62.597rem; margin-left: 6.201rem; }
.feature .viewall img { width: 100%; }

/* ---- STAFF ---- */
.feature .staff {
  margin-top: 11.433rem;
  width: 45.328rem; margin-left: 14.836rem;
  text-align: center; font-size: 2.2rem; line-height: 1.52;
}
.feature .staff__list { margin-top: 2.478rem; }   /* 正値 8220.01 − 8195.23（STAFF下端） */

/* ============ 演出 ============ */
/* ★A/★B 下からふわっと（画像もテキストも同じ1クラス・参考ページ実測） */
.feature .js-fade { opacity: 0; transform: translateY(25px); transition: opacity 1.5s ease, transform 1s ease; }
.feature .js-fade.is-inview { opacity: 1; transform: translateY(0); }

/* ★C 下から上がって上の画像に重なる＝参考ページ（fray-id 2024ss）の作り＝**CSS だけ**。
   留まる側（.stack__base）を sticky にし、覆う側（.stack__over）は正値の着地位置に置く。器（.stack）の高さを
   覆う側の下端まで伸ばすと、そのぶん留まる側が画面に留まり、覆う側がスクロールで下から上がって重なる。
   sticky の top は掲載先の追従ヘッダーぶん下げる（レールと同じ変数）。translateZ(0) は覆う側を独立レイヤーへ
   上げて sticky の下に潜らせないため（参考ページ実測・省くと重なり順が崩れる）。
   ⚠ 指示書の★Cは7か所＝look05 / look07 / look10 / look16（チャーム）/ look19 / look23（2枚目・3枚目）/ look26。
     初稿は「同寸の2枚目」を全部★D（横から）にしていた＝指示書には★Dの枠は無い（人の指摘で直した 2026-09-08）。
   2枚目の置き方は3型：
     ①はみ出し型（05 / 16 / 26）＝2枚目の下端が1枚目より下＝器を padding-bottom で伸ばす。後続の余白はそのぶん引く
     ②同枠型（07 / 19）＝2枚目が1枚目と同じ枠＝フロー要素として1枚目の後ろに置く（.stack__over--flow）。
       紙面は2枚目のぶん伸びる（参考ページも同じ）。?noanim では出さないのでカンプと同じ高さになる
     ③内側型（10 / 23）＝2枚目の着地が1枚目の枠の内側＝sticky では留まる距離が作れない。GSAP（js-riseup）で
       1枚目を pin し、2枚目を自分の高さぶん下から上げる。上がり始めるまで（.stack に is-active が付くまで）出さない */
/* ★型は docs/recipes/sticky-freeze-cover.md（amadeus の正本）＝
     .stack ＝ 凍結する束（.stack-stick・sticky）＋ 走路（.stack-runway＝凍結中に進むスクロール距離）
     .stack-over ＝ 覆う側。**器の外のフロー要素**で、カンプの重なり量（--v）を負の margin-top で持つ
   凍結の位置＝1枚目の上端が追従ヘッダーの下端に来たとき（参考 fray-id 2024ss は sticky top:0）。
   走路 ＝ 100svh − 凍結時の1枚目下端Y ＋ --v ＝ 「2枚目が画面の下端からカンプの位置まで走る距離」。
   JS の仕事は走路を開く印（html.has-stack-js）だけ。JS無し・?noanim・動きを減らす設定では走路0＝カンプの静止状態。
   ★覆う側はフローなので、紙面上の位置は静止状態でもカンプどおり（?noanim では visibility で消すだけ＝高さは変えない）。
   ⚠ 1枚目の上余白は .stack に書く（束に付けると margin が器の外へ抜けて sticky の留まる範囲が消える・実測）。
   ⚠ left（margin-left）は紙面の左端から＝正値の x をそのまま（初稿は look05 の margin-left ぶん引いて 15rem ずれていた）。 */
/* 凍結する位置＝**ヘッダーを除いた画面の天地中央**に1枚目の中心が来たとき（人の指示 2026-09-09＝上端ではない）。
   --stick-top ＝ (画面高 + ヘッダー)/2 − 1枚目の高さ/2 ／ --pin ＝ 凍結時の1枚目の下端Y ／ 走路 ＝ 100svh − pin + v。
   ヘッダー高は固定値 --hdr（PC 80 / SP 51＝掲載先の実測・.feature の根に定義）＝実測の変数に連動させると出た瞬間に位置が跳ぶ */
/* ★中央に置くのは「凍結が終わった時の見え方」＝1枚目＋着地した2枚目の塊（--union-h＝塊の高さ）。
   その塊の中心がヘッダーを除いた画面の中央に来るように1枚目を止める（人の指示 2026-09-09）。
   ただし1枚目の上端がヘッダーに潜らない範囲で（max）＝塊が画面より高い低背の端末ではヘッダー直下で止まる */
/* ★束には「直前のコンテンツ」も入れる（凍結中に画面の上側が流れて見えないように＝人の指示 2026-09-09）。
   --above ＝ 束の上端から1枚目（.stack-under）の上端までの距離（JS が実測して px で渡す・無ければ0）。
   凍結位置は1枚目基準のまま＝束の top はそのぶん上へ（画面の外に出てよい）。
   display: flow-root ＝束の先頭の要素の margin（覆う側の負の margin など）を束の中に閉じ込める（外へ抜けると sticky の範囲が狂う） */
/* ★束は**入れ子**（各束が上の本文ぜんぶを含む＝縦の長い画面でも凍結中に上が動かない・2026-09-09）。
   だから束ごとの変数は**ここで毎回リセット**する（--run / --v / --union-h / --extra は親の束から継承してしまう）。
   束ごとの CSS は子結合子（>）で書く＝子孫セレクタは内側の束にも当たる */
/* ★凍結する位置＝**追従ヘッダーのすぐ下**（2026-09-14・人の決定）。
   これは指示書が指す**参考ページの実物どおり**＝指示書は止まる位置を文言で決めておらず、
   「指示の文言ではなく参考ページの実物が仕様」と読み起こしにある。実測記録（reference-check.json）＝
     ★C（fray-id 2024ss）… .sticky-block { position: sticky; top: 0 }（節ごとに上書き・SP 6.25 / 0 / −18.75）
     ★D（fray-id 2024aw）… 外側を sticky で固定・実測 top = 100px（PC）/ 50px（SP）
   ⚠ 2026-09-09〜09-14 は「塊の中心が可視領域の中央」に止めていた（人の指示）。上で止めると
     **止まった写真の上は画面の外**になるので、「凍結中に上のコンテンツが流れる」問題そのものが消える。
   ⚠ --union-h（1枚目＋着地した2枚目の高さ）は中央で止めていた頃の計算に使っていた値＝いまは使っていない。
     寸法の記録として残してある。

   ★★【止まる位置を戻すとき】＝「★止まる位置」で検索すると**この3か所**が出る。貼り替えるだけで戻る：
     ①ここ（下の --stick-top）
        → max(calc(var(--hdr) - var(--above, 0px)), calc((100svh + var(--hdr)) / 2 - var(--union-h) / 2 - var(--above, 0px)))
     ②.stack--23 の --extra
        → calc(100svh - max(var(--hdr), calc((100svh + var(--hdr)) / 2 - 46.8rem)) - 9.39rem)
     ③.stack--23b の --stick-top と --extra-b
        → calc(max(var(--hdr), calc((100svh + var(--hdr)) / 2 - 46.8rem)) + 9.38rem)
        → calc(100svh - max(var(--hdr), calc((100svh + var(--hdr)) / 2 - 46.8rem)) - 9.39rem)
     戻しても**静止時の紙面は動かない**（凍結位置は sticky の top を通るだけ）＝カンプ照合はやり直し不要。 */
.feature .stack { position: relative; display: flow-root;
  --run: initial; --v: 0rem; --union-h: var(--under-h); --extra: 0rem;
  --stick-top: calc(var(--hdr) - var(--above, 0px));   /* ★止まる位置① */
  --pin: calc(var(--stick-top) + var(--above, 0px) + var(--under-h)); }
.feature .stack-stick { position: sticky; top: var(--stick-top); z-index: 0; display: flow-root; }
.feature .stack { --runway-now: 0px; }
html.has-stack-js .feature .stack { --runway-now: var(--run, calc(100svh - var(--pin) + var(--v) + var(--extra))); }   /* --run＝走路を直接指定する組（横方向） */
.feature .stack-runway { height: var(--runway-now); }
/* 覆う側。重なり量（負の margin-top）は組ごとに書く（下）。
   ⚠ 以前はここに transform: translateZ(0) を置いていた（束が入れ子だった頃は、これが無いと
     覆う側が凍結した写真の下へ潜った）。**平らにしたら要らなくなった**＝6組とも外しても重なり順は同じ（実測 2026-09-14）。
     外した理由＝この1行は写真1枚ずつを独立したGPUレイヤーへ上げる。**止まっている写真の上を
     独立レイヤーが動く形**は、端末によって縁が1pxちらつく原因になる（人の指摘「上に乗る分がプルプル震える」）。
     重なり順は position: relative ＋ z-index だけで足りる。 */
.feature .stack-over { position: relative; z-index: 1; }
.feature .stack-over img { width: 100%; }
/* --under-h＝1枚目の高さ（rem）／--v＝重なり量＝1枚目の高さ − 2枚目の上端（正値）。後続の margin は
   「2枚目の下端」からになるので、2枚目の下端が1枚目の下端より上に来る組（10）はその差を後続へ足す */
/* --union-h＝1枚目の上端から2枚目の下端まで（2枚目が下へはみ出す組だけ。内側・同枠の組は1枚目の高さ） */
/* 1枚目の上余白は1枚目自身（.lookNN）に書く＝束の中の位置（前の要素との間隔）。束の先頭の要素は自分の余白を持って束に入る */
.feature .stack--05 { --under-h: 74.904rem; --v: 3.784rem;  --union-h: 133.532rem; }   /* 2枚目 top 71.12・下端 133.53 */
.feature .stack--07 { --under-h: 93.835rem; --v: 93.835rem; }                            /* 同じ枠＝丸ごと覆う */
.feature .stack--10 { --under-h: 93.951rem; --v: 85.811rem; }                            /* 2枚目 top 8.14（内側） */
.feature .stack--16 { --under-h: 43.079rem; --v: 20.319rem; --union-h: 94.09rem; }      /* 2枚目 top 22.76・下端 94.09 */
/* ★この組だけ重なりが逆＝look16（バッグ・小）が2枚目（チャーム・大）より**前**（人の指摘 2026-09-14）。
   ほかの★Cは2枚目が1枚目を丸ごと覆うので前後が見えないが、ここだけは寸法も位置も違って
   一部しか重ならない＝**前後が画面に出る唯一の組**。
   ⚠ .ai のレイヤー順（slide2nd が img より前）は根拠にならない＝丸ごと覆う組では
     どちらでも同じ絵になるので、この組のために選ばれた順ではない。
   ⚠ 直すのは**この束だけ**＝`.stack-over` の z-index を動かすと全部の組で2枚目が潜る。
     束（sticky）が重なりの器を作っているので、束ごと2枚目の上へ出す。 */
.feature .stack--16 > .stack-stick { z-index: 2; }
.feature .stack--19 { --under-h: 93.705rem; --v: 93.705rem; }                            /* 同じ枠 */
/* ★slidealt-23 は .ai でクリップされたグループ＝見える矩形は x140 y+619.7 610×521.8（layout.json の bounds）。以前は未クリップの
   元画像の矩形（x68.2 y+441.3 681.8×852.4）で置いていた＝横長の書き出しを縦長の枠に入れて位置も大きさも違っていた（人の指摘 2026-09-09） */
.feature .stack--26 { --under-h: 66.104rem; --v: 4.131rem; --union-h: 114.073rem; }     /* 2枚目 top 61.973・下端 114.07 */
.feature .look05 { margin-top: 10.073rem; }
.feature .look07 { margin-top: 12.708rem; }
.feature .look10 { margin-top: 14.99rem; }
.feature .fr16   { margin-top: 9.599rem; }
.feature .look19 { margin-top: 25.754rem; }
.feature .look26 { margin-top: 8.183rem; }
/* ⚠ 覆う側は器の兄弟＝器の --v を継承しないので、重なり量（負の margin-top）はここに書く */
.feature .stack-over--05 { margin-top: -3.784rem;  margin-left: -0.01rem;  width: 50.01rem; }    /* 正値 x -0.1 */
/* 同じ枠の2枚目（07・19）は正値 750＝カラム幅＝100% で書く（75rem だと端に 1px 足りず、裏の白い地が線になって見える） */
.feature .stack-over--07 { margin-top: -93.835rem; margin-left: 0; width: 100%; }
.feature .stack-over--10 { margin-top: -85.811rem; margin-left: 6.73rem;   width: 61.946rem; }   /* 正値 x 67.3 */
.feature .stack-over--33 { margin-top: -20.319rem; margin-left: -0.27rem;  width: 57.003rem; }   /* 正値 x -2.7 */
.feature .stack-over--19 { margin-top: -93.705rem; margin-left: 0;         width: 100%; }
.feature .stack-over--26 { margin-top: -4.131rem;  margin-left: 14rem;     width: 61rem; }       /* 正値（クリップ後）x 140・610×521.8 */

/* 3枚組（look23）＝sticky を2段に重ねる。1段目＝look23 が凍結（走路は2枚目と3枚目が走り切るぶん＝--extra）。
   2段目＝着地した2枚目（.stack--23b＝覆う側であり次の凍結する束）がその場（look23 の上端 9.38 下）で凍結し、
   3枚目が画面の下端から上がって2枚目の上に重なる（正値＝slide2nd / slide3rd レイヤー） */
/* 1段目の走路 ＝ 2枚目のぶん ＋ 3枚目のぶん（--extra ＝ 2段目の走路と同じ長さ）。
   2段目（着地した2枚目）の凍結位置 ＝ look23 の凍結位置 ＋ 9.38（正値）。2段目の走路 ＝ 100svh − pin_b + v_b
   ＝ 100svh − (look23 の --stick-top + 9.38 + 75.02) + 75.01 ＝ 100svh − look23 の --stick-top − 9.39rem */
.feature .stack--23 { --under-h: 93.6rem; --v: 84.22rem;
  --extra: calc(100svh - var(--hdr) - 9.39rem); }   /* ★止まる位置②（look23 の凍結位置＝ヘッダー直下 基準・束の --above に依らない） */
.feature .look23 { margin-top: 11.836rem; }
.feature .stack--23b { margin-top: -84.22rem; margin-left: 7.502rem; width: 60rem; --under-h: 75.02rem; --v: 75.01rem;
  z-index: 0; }   /* ⚠ 覆う側の z-index:1 を消す＝3枚目（次の束の中＝0）より上に立つと3枚目が2枚目の下へ潜る（実害）。look23 の上に来るのは DOM 順で足りる */
/* 2枚目は1段目の走路の「前半」で着地させる＝走路の後半（3枚目のぶん＝--extra と同じ長さ）を先取りして引き上げる。
   こうすると look23 は2枚目・3枚目が走り切るまで凍結したまま、2枚目は着地した位置で自分の走路ぶん凍結し、3枚目が上がる */
html.has-stack-js .feature .stack--23b { margin-top: calc(-84.22rem - var(--extra-b)); }
/* 2段目の凍結位置＝look23 の凍結位置（同じ式を書く＝兄弟なので継承しない）＋ 9.38 */
/* ★止まる位置③（2段目＝着地した2枚目の凍結位置・兄弟なので式を書き直している） */
.feature .stack--23b { --stick-top: calc(var(--hdr) + 9.38rem);
  --extra-b: calc(100svh - var(--hdr) - 9.39rem); }
/* ⚠ 2枚目は写真リンク（附番22）を巻いたので img が1枚内側に入る＝直下セレクタは a を挟む */
.feature .stack--23b > .stack-stick > .lk__link > img { width: 100%; }
.feature .stack-over--23c { margin-top: -75.01rem; margin-left: 7.522rem; width: 59.97rem; z-index: 2; }

/* ★D 横から滑り込んで重なる（look12 / look21・指示書「★A＋★D 2枚目」）＝同じ型で1枚目が凍結し、2枚目が右の外から
   滑り込む。横の動きだけは CSS で書けないので js/script.js がスクロール量を --p（0〜1）で器に渡す。
   支給の絵は1枚目750＋2枚目550の帯＝1枚目は帯をそのまま置いて器（.xframe・overflow:hidden）で左750だけ見せ、
   2枚目は帯の右550を切り出した別ファイルを x=200 に置く（着地＝slide2nd レイヤーの正値と同じ見え方）。
   走路＝器の幅×2（参考 fray-id 2024aw の実測）。横引き（look20・furfur）は走路＝引き量、中身を左へ引く */
.feature .xframe { position: relative; width: 75rem; overflow: hidden; }
/* ★横へ動く3か所（★D の look12 / look21・横引きの look20）の受け持ち＝**参考ページの実物どおり**
   （https://fray-id.com/page/collection/2024aw/2nd_collection/ の js/index.js を 2026-09-14 に実取得）。
     ・**留めるのは CSS の sticky**（このファイル＝束＋走路）。参考ページも `.sticky__Trigger { position: sticky }`
     ・**横へ動かすのは GSAP の1本のトゥイーン**（js/script.js）＝`scrub: 1` で追従を1秒ならす。**pin は使わない**
   ⚠ 走路＝器の幅×2 は参考ページの `end: "+=" + container.clientWidth * 2` と同じ値。
     これまで「この数字だけ」を写して、作り方（GSAP・scrub）を写していなかった＝
     自前でスクロール量を配る形になり、滑らかさを出すのに案件ごとの調整が要った（人の指摘 2026-09-14）。 */
.feature .stack--12 { --run: 150rem;    --under-h: 81.1rem; }   /* 走路＝器の幅 75 × 2。--under-h は凍結位置の計算用（帯の高さ 811） */
.feature .stack--21 { --run: 150rem;    --under-h: 81.15rem; }
.feature .stack--20 { --run: 44.948rem; --under-h: 80.1rem; }   /* 走路＝引き量 449.5＝スクロール量と 1:1 */
.feature .stack--12 > .stack-stick > .xframe { margin-top: 13.568rem; }
.feature .stack--21 > .stack-stick > .xframe { margin-top: 9.925rem; }
.feature .scrollx--20 { margin-top: 10.047rem; }
.feature .xstrip { max-width: none; }                            /* 帯＝器より広い1枚目 */
.feature .look12 .xstrip { width: 130.003rem; }
.feature .look21 .xstrip { width: 129.994rem; }
/* ★人の説明（2026-09-09）＝「650の画像2枚が隣り合わせ。右の画像は左から650ずれた位置（左の写真の右隣）からスタートして、
   最終的に左寄せになるだけ」。1枚目＝左の写真650（リンクの器を650幅で切る）。2枚目＝右の写真650を x=650 に置き
   （枠の右100pxにその端が見える＝カンプの静止状態）、スクロールで左へ650動いて x=0＝1枚目の真上に同じ大きさで載る。
   translateX((1 − p) × 100%)＝自分の幅650ぶん右から始まる */
/* ★カンプは**始まりの状態**＝2枚目は1枚目の右隣（x=650）に居て、枠の右100pxにその端が見える。
   そこから左へ動いて1枚目の真上（x=0）に載る。動かすのは GSAP＝ここが持つのは**置き場所だけ**。
   ⚠ 開始位置を transform で持たない＝GSAP は既にある transform を土台として読むので、
     その上に動きが**二重に乗る**（実測＝開始が 338px のはずが 676px・着地が 0 のはずが 338px）。
     だから位置は left で持ち、transform は GSAP だけが触る。
   JSが読めない・?noanim・動きを減らす設定では、この置き場所のまま出る＝カンプの静止状態そのもの。 */
.feature .panel__item--2 { position: absolute; top: 0; z-index: 2; }
.feature .panel__item--2 img { width: 100%; }
.feature .look12 > .lk__link { width: 65.003rem; overflow: hidden; }   /* 台所の写真（Illustrator 実測 650.03） */
.feature .look21 > .lk__link { width: 64.984rem; overflow: hidden; }   /* タンブラーの写真（649.84） */
/* ★デザイナーの置き方（人の説明 2026-09-09）＝帯は「同じ大きさの写真2枚（各 650×813）のグループ」で、
   本文に置いてある方（1枚目・x0〜650）が正しい大きさ。2枚目はその**真上に同じ大きさで**載る＝left 0・幅 650。
   2枚目の画素は Illustrator の配置画像そのもの（帯の書き出しの x650〜） */
.feature .xframe > .panel__item--2 { left: 65.003rem; width: 65.003rem; }   /* 置き場所＝1枚目の右隣（自分の幅ぶん右）。GSAP が自分の幅ぶん左へ動かすと 1枚目の真上に載る */

/* ---- PC は 1440 を上限に止める（人の指示 2026-09-08＝「このPCの大きさをマックスにして止めて。本文と両端のサイズ。
   1440以下は可変。水色（地色）はそのまま100%」）＝縮尺（html の font-size と --pcu）を 1440 の値で固定し、
   止めるのは**中身の大きさ**（本文カラム 400px・レールの中身）だけ＝器は FV も本文も横幅100%（人の指示 2026-09-09）
   ＝1440 を超えた余りは両端のレールが分配して広がる（掲載先の公開実物と同じ挙動・docs/brand-specs.md の Lily Brown 行）。 ---- */
@media screen and (min-width: 1441px) {
  html { font-size: 5.3333px; }                 /* = 0.37037vw × 1440 */
  .feature { --pcu: 1px; }
}

/* ---- PC版面だけ間隔が違う2か所（PC支給 .ai の実測・pos-expect-pc.json） ----
   PC中央カラムは写真の寸法こそSP紙面の 0.5333 倍ちょうどだが、**節の間隔は2か所だけ違う**
   ＝1組の rem で通すと、ここから下が丸ごと平行移動する（実測＝上半分が48.6px高く・
   下半分が13.0px低い）。差のぶんだけ --pcu（PCカンプ1px）で足し引きする。
     ① FV→本文の入り … PCのほうが 48.6px 広い
     ② look18→look19 … PCのほうが 61.6px 狭い */
@media screen and (min-width: 751px) {
  .feature .lead { margin-top: calc(6.947rem + 48.57 * var(--pcu)); }
  .feature .look19 { margin-top: calc(25.754rem - 61.56 * var(--pcu)); }
  /* PC は look25 の丸写真の右のはみ出しを枠の外へ出す（人の指示 2026-09-09「PCの時は枠から出せる？」）
     ＝SPで自分に掛けている切り取りを外すだけ（カラム側に overflow は SP/PC とも置かない）。
     ⚠ この行は base の .look25 より**後ろ**に置く＝指定の強さが同じなので、前に置くと打ち消される（実測で踏んだ） */
  .feature .look25 { width: 75.415rem; overflow: visible; }
}

/* 横引き＝枠を画面に留めて中の長い画像を左へ引く（引き量＝画像幅−枠幅）＝look20 だけ（指示書 p.2 の紫枠） */
.feature .scrollx { position: relative; width: 75rem; overflow: hidden; }
.feature .scrollx__inner { width: max-content; }   /* 左端が枠の左端に合った状態＝カンプ。ここから左へ引くのは GSAP */
.feature .scrollx--20 img { width: 119.948rem; }   /* 引き量 449.5 */

/* 「画像がすべってはいってくる」（look17・参考 BEAMS）＝inview で1回だけ左から滑り込む（人が実物で確認）。
   カンプの傾きが左上がりなので、左の外から入る（紙面の外は中央カラムで切れる） */
/* ★オフセットは監視対象（外側）でなく中の img に掛ける（anim-scroll-reveal の落とし穴6＝外側を紙面の外へ出すと
   祖先の clip で交差ゼロになり永久に点火しない） */
/* 参考サイト（BEAMS）を人が実物で見た動き＝下から上へ入りつつ少し回る（2026-09-09）。実物は Chromium が弾かれて測れないので
   値は knob＝--si-x / --si-y（開始位置のずれ）・--si-rot（開始の傾き）・--si-dur。人が実機で見て数字を直せる形 */
.feature .js-slidein { --si-x: -12rem; --si-y: 24rem; --si-rot: 8deg; --si-dur: 1.2s; }   /* 回転は時計回りから戻す（人の指示 2026-09-09） */
.feature .js-slidein img {
  transform: translate(var(--si-x), var(--si-y)) rotate(var(--si-rot));
  transition: transform var(--si-dur) cubic-bezier(0.22, 0.61, 0.36, 1);
}
.feature .js-slidein.is-inview img { transform: none; }

/* ---- ホバー（PC限定・SPでタップしても薄くしない・§8-7） ---- */
@media (hover: hover) {
  .feature a img { transition: opacity .3s; }
  .feature a:hover img { opacity: .7; }
}

/* ---- 動きを減らす設定・?noanim（演出を切ってカンプと同じ紙面にする） ---- */
/* ★出現アニメ（js-fade）と、自分自身が横から入ってくる写真（js-slidein＝look17）は
     「着地した状態」がカンプ＝そのまま出す。
   ★覆いに来る2枚目・3枚目（.stack__over）は逆＝カンプは1枚目だけを描いている（2枚目は指示書の別枠）ので出さない。
     ?noanim は画素照合・座標照合の撮影用＝2枚目を全部消す（同枠型は紙面の高さもカンプへ戻る）。
   ★動きを減らす設定では GSAP を初期化しない＝内側型（js-riseup）だけ「動く前」の状態で消し、
     CSS だけで成立する①②型は着地した状態でそのまま見せる。 */
@media (prefers-reduced-motion: reduce) {
  html:not(.is-forceanim) { scroll-behavior: auto; }
  html:not(.is-forceanim) .feature .js-fade,
  html:not(.is-forceanim) .feature .js-slidein img { opacity: 1; transform: none; transition: none; }
  html:not(.is-forceanim) .feature .stack-runway { height: 0 !important; }   /* 走路を畳む＝凍結なし・2枚目は着地位置で静止 */
}
/* ★D の2枚目は静止でも消さない＝--p が 0 のまま「左の写真の右隣（x=650）」に居る＝カンプの静止状態そのもの（枠の右100pxに端が見える） */
html.is-noanim .feature .js-fade,
html.is-noanim .feature .js-slidein img { opacity: 1 !important; transform: none !important; transition: none !important; }
html.is-noanim .feature .scrollx__inner { transform: none !important; }
html.is-noanim .feature .stack-runway { height: 0 !important; }
html.is-noanim .feature .stack-over { visibility: hidden !important; }   /* フローの高さは保つ＝カンプと同じ紙面（2枚目だけ消す） */
html.is-noanim .feature .stack-stick { position: relative; top: auto; }   /* ⚠ top を残すと relative の位置ずれになる（束が凍結位置ぶん下へ描かれた＝実測） */