@charset "UTF-8";
/* ============================================================
   260827EEM emmi × PUMA Sporty with Ease.（型A・feature_base 由来）
   ------------------------------------------------------------
   寸法は「SP見本750pxで実測したpx ÷ 20」の rem を1組だけ書く（規約§8-1）。
   PC/SPの縮尺差は html{font-size} の1行だけが持つ。器 .frame-main__Inner は 37.5rem 固定。
   ★margin-top は draft-measure/flow-margins が書く（手で直さない＝残差は draft-measure.json の corrections へ）。
   ============================================================ */

body { margin: 0; } /* ★外部化で落とすと全要素が +8px ずれる（規約§7-1・#667） */

/* ===== CMS組み込み用の必須リセット（規約§6 / docs/cms-embed.md §3）＝案件で消さない ===== */
.l-container { width: 100%; }
.l-footer,.pc-footer { margin: 0; padding: 0; }
.l-container::after { content: ""; }

/* ===== リキッド基準 =====
   PC＝本文カラム460px ÷ 37.5 ÷ 1400 × 100 = 0.876190vw（1rem=12.2667px＝SP見本20px）。
   ★draft-measure.json の contentRem（37.5）と対。 */
html { scroll-behavior: smooth; font-size: 0.876190vw; }

/* ★1400px 以上はサイズ固定（指示書 p.2「1400px 以上の場合は固定サイズ」）＝止めるのは**中身の縮尺だけ**。
   ⚠ **枠（.frame）に max-width を掛けてはいけない**＝掛けると 1400px 超で枠ごと中央寄せになり、
     PC左レールのFVが画面端に届かない（1920px で左右に 260px の地色が出た＝実測）。
     指示の「固定」は寸法の話で、紙面幅の話ではない。
   裏取り＝掲載先の公開実物（2cテンプレ）5本・別ブランド4種で全部同じ形だった:
     `.f-container { display:flex; width:100%; }`（**max-width なし＝全幅**）
     `.f-container .f-left { position:sticky; top:80px; overflow:clip; width:50%; height:calc(100vh - 80px); }`
   ＝レールは常に画面の半分・器は全幅。止めるのは font-size と --pcu の2点。
   ⚠ **`--pcu` の固定はここに書いてはいけない**＝`.feature { --pcu: 0.0714286vw }` の宣言が
     このファイルの**後ろ**にあるので、同じ特異度では後ろが勝って上書きが死ぬ（実測＝1920pxで
     文字SVGが 492.8px でなく 675.8px に伸びた）。`--pcu` の固定は宣言の直後に置く（下の §PCフレーム）。 */
@media screen and (min-width: 1400px) {
  html { font-size: 12.2667px; }
}

/* ===== 出現アニメ（ピンク枠＝ふわっと表示） =====
   点火クラスは is-inview（Splide が触る is-active を使わない＝規約§8-11）。
   ★実値は**指示書がピンクに挙げた参考URL**の公開実物から採る（2026-08-24 に実取得して確定）＝
     `.animate-item { transition: all 1s ease-out; transition-delay: .3s; }` ＋ `.fade-in { opacity: 0 }`
     → 1s・ease-out・**遅延 0.3s**。初稿は `opacity 1s` だけで ease-out と遅延が落ちていた
     （別ページのクラス名を出どころとして書いていた＝参考の取り違え）。 */
.js-fade { opacity: 0; transition: opacity 1s ease-out .3s; }
.js-fade.is-inview { opacity: 1; }

/* ===== 出現アニメ（オレンジ枠＝左から右へ動きをつけて）＝カーテンで左から出す =====
   ★**指示書がオレンジに挙げた参考URLの実物で、実際に画像へ付いていたクラス3枚**をそのまま写した
     （2026-08-24 に HTML と CSS を実取得＝`js-slide_in slideIn scrollShow` の3枚組）:
       .slideIn      { position: relative; overflow: hidden; }
       .slideIn:before{ 全面を覆う板・left:0 → transition 1.2s cubic-bezier(.215,.61,.355,1) }
       .scrollShow.is-active:before { left: 100%; }   ← 板が右へ抜ける＝**左から画像が出る**
       .js-slide_in img { transform: translateX(40px) } → .is-active で 0
     ＝**カーテンが右へ抜ける**のが本体で、画像は同時に右40pxから定位置へ寄る（二重の動き）。
     `.scrollShow img { opacity: 1 }` が後ろにあるので**フェードは効いていない**＝透過しない。
   ⚠ 初稿は「フェード＋わずかな横移動」だった＝カーテンが無く、別の演出になっていた
     （その前は別ページのクラスから採った値で、距離も秒数も違っていた）。
   ★カーテンの色は**この案件の地色 #F0EEEA**（参考実装は白地なので #fff だった）。
     ここを白にすると板が抜ける間だけ白い帯が見える。
   ★器は img だけを包む内側の span に置く＝`.look` 自体に overflow を付けると
     写真の外に絶対配置した縦書き見出しが切れる（look05 / look09 / look13）。 */
.js-slide__Inner { position: relative; overflow: hidden; display: block; }
.js-slide__Inner::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  background-color: #F0EEEA; z-index: 10;
  transition: left 1.2s cubic-bezier(.215, .61, .355, 1); }
.js-slide.is-inview .js-slide__Inner::before { left: 100%; }
/* ★2026-08-25 修正依頼②＝**PCだけ「右からふわっと寄る」動きが出ていなかった**。
   原因は下の共通ホバー透過 `@media (hover: hover) .feature a img { transition: opacity .6s }`（0,1,2）が
   この行（0,1,1）に**特異度で勝って transition を丸ごと置き換えていた**＝transform が即時になる
   （カーテンは ::before なので無傷＝「左から右へは動くが、ふわっと入る動きが無い」に見える）。
   SPは (hover: hover) が偽なのでこのルールが当たらず生きていた＝「SP版は参考と同じ動き」の正体。
   対照実験＝PC幅のまま hover を none にすると transition が transform 1.2s に戻った（外したら消えた）。
   ＝`.feature` を足して (0,2,1) で勝たせ、**ホバー透過の opacity も併記**する
     （片方だけ書くと相手が死ぬ＝この事故そのもの）。 */
.feature .js-slide__Inner img { transform: translateX(40px);
  transition: transform 1.2s cubic-bezier(.215, .61, .355, 1), opacity .6s; }
.js-slide.is-inview .js-slide__Inner img { transform: translateX(0); }

/* ===== 横スライド（水色枠＝スクロールすると右にスライド）＝ピン留め横スクロール =====
   ★**掲載先の公開LPの実装をそのまま写した**（2026-08-24 に css/js/html を実取得）。
     器3枚＝`.horizontal-section`（外枠・clip）> `.horizontal-container`（窓・高さを持つ）
     > `.horizontal-scroll`（走路・中身の実幅）。走路が絶対配置なのも実装どおり。
     駆動は GSAP ScrollTrigger の `pin: true` ＋ `scrub`＝**節が画面に留まっている間に走路が左へ動く**
     （js/script.js）。x は 0 から −はみ出し量へ＝**カンプは始まりの状態**（1500の左端750が見えている）。
   ★初稿は別サイト（ブランド公式）の器だけを借りて駆動を自作していた＝動きが参考実装と別物だった。
     掲載先の実物では `position: fixed` を使うピン留めが**本番で使われている**（実測）。 */
.horizontal-section { position: relative; overflow: hidden; }
.horizontal-section .horizontal-container { width: 100%; display: flex; align-items: center; }
.horizontal-section .horizontal-container .horizontal-scroll { position: absolute; display: flex; width: max-content; }

/* QA検証用フック(?noanim)＝全アニメを完了状態で固定。
   ★transform の打ち消しは「transform を使うアニメ変種」だけに限定する（レイアウト transform を殺さない） */
.is-noanim .js-fade, .is-noanim .js-anime { transition: none !important; opacity: 1 !important; }
/* オレンジはカーテン型＝**板ごと消す**（left:100% に飛ばすのではなく描かない）＋画像を定位置へ。 */
.is-noanim .js-slide { transition: none !important; opacity: 1 !important; }
.is-noanim .js-slide__Inner::before { display: none !important; }
.is-noanim .js-slide__Inner img { transition: none !important; transform: none !important; }
/* 横スクロールは script.js 側でピン留めごと配線しない（＝ピンの余白も出ない）。
   念のため走路の transform も打ち消す＝x=0 がカンプの状態。 */
.is-noanim .horizontal-scroll { transform: none !important; }
.is-noanim .leftcont__Box { transition: none !important; opacity: 1 !important; filter: none !important; transform: none !important; }
/* reduced-motion フォールバック＝OSの「視差効果を減らす」設定では完了状態で見せる（a11y）。
   overlay-diff は reducedMotion:'reduce' でレンダするので、?noanim 無しでも偽ミスマッチにならない。
   ★:not(.is-forceanim) で括るのは実機切り分け用フック ?anim=1 のため（Issue #228）。 */
@media (prefers-reduced-motion: reduce) {
  html:not(.is-forceanim) .js-fade, html:not(.is-forceanim) .js-anime { transition: none !important; opacity: 1 !important; }
  html:not(.is-forceanim) .js-slide { transition: none !important; opacity: 1 !important; }
  html:not(.is-forceanim) .js-slide__Inner::before { display: none !important; }
  html:not(.is-forceanim) .js-slide__Inner img { transition: none !important; transform: none !important; }
  html:not(.is-forceanim) .horizontal-scroll { transform: none !important; }
  html:not(.is-forceanim) .leftcont__Box { transition: none !important; opacity: 1 !important; filter: none !important; transform: none !important; }
}

/* ===== 特集共通枠 ===== */
/* ★`pragmatica` を**先頭**に置く（2026-08-25・先方の指摘「リード文の英字のフォントが違う」）。
   欧文専用のキット書体なので**和文グリフを持たない**＝英数字だけが `pragmatica` で描かれ、
   かなと漢字は次の `toppan-bunkyu-gothic-pr6n` へ落ちる（1行で欧文と和文を撃ち分ける形）。
   ⚠ 効くのは**個別に書体を指定していない要素だけ**＝クレジット（`pragmatica` 指定）と
     Check All Items（`vincente` 指定）は元から変わらない。実質リード文だけが変わる。
   裏取り＝`spot-diff` の残差9件のうち**リード文の4件は全部が英字を含む行**だった
   （`Special Make Upの「SPEEDCAT OG」。`＝3件・`PUMAとのタッグから生まれた`＝1件。
   和文だけの行には1件も出ていない）＝カンプの英字が別書体だったことの機械の証拠。 */
.feature { box-sizing: border-box; color: #000; margin: 0 auto; overflow: clip; position: relative; width: 100%;
  font-family: "pragmatica", "toppan-bunkyu-gothic-pr6n", "游ゴシック体", YuGothic, "Yu Gothic", sans-serif;
  font-weight: 400; font-style: normal; font-feature-settings: "palt";
  background: #F0EEEA; /* 見本の地色（layout.json bgCandidates の AB1/AB2 全面 fill） */ }
.feature * { margin: 0; padding: 0; border: 0; vertical-align: baseline; box-sizing: border-box; scroll-margin-top: 50px; }
.feature .sp { display: none; }
.feature a { color: #000; text-decoration: none; }
/* ホバー透過は【PCだけ】＝@media (hover: hover) で必ず包む（規約§8-7）
   ⚠ **プロパティ名を必ず書く**（`transition: .6s` と書かない）＝名前を省いたショートハンドは
     `transition-property: all` になる。この紙面は `html{font-size:vw}` で全部が rem 駆動なので、
     ウィンドウをリサイズするたびに**画像の height が 0.6 秒かけてアニメする**
     （width は % なので即時＝その間だけ縦横比が崩れ、紙面高も動き続ける）。
     実測（1600→1200 に1回）＝ h 613.3 →(0.6s)→ 525.7 / 紙面高 9126 →(0.6s)→ 8018。
     リサイズは連射されるので「何度もリロードしているように見える」＝2026-08-25 の実機報告の正体。 */
@media (hover: hover) {
  .feature a img { transition: opacity .6s; }
  .feature a:hover img { opacity: .7; }
}
.feature img { vertical-align: bottom; max-width: 100%; height: auto; }
.feature ul { list-style: none; }

/* ============================================================
   ▼PCフレーム＝左sticky（フルハイトFV）＋中央本文
     指示書 p.2「固定・左エリアの横／縦100%」「SP版のコンテンツを右エリアに460pxで流し込む」
   ============================================================ */
/* ★--header-h は掲載先（USAGI ONLINE）の追従ヘッダー高。**80px は公開実物の実測値**＝
     `.pc-header-main.is-fixed`（position:fixed / top:0 / height:80px / 不透明白 / z-index:800）を
     3ページ×PC3幅（1400/1440/1920）で採り、全件 80px で一致（2026-08-24・要確認リスト A-5 解決）。
     この値が効くのは**PC面だけ**＝768px 以下では `.pc` を display:none にするので SP には無関係
     （SPの追従ヘッダーは `.sp-header-main.show` の 51px だが本文は全幅で流れる）。
   ★--pcu＝1 PC見本px（PC見本幅1400）＝レール（本文カラムの外）の寸法はこれで書く（規約§8-1・#440） */
.feature { --header-h: 80px; --pcu: 0.0714286vw; }
/* ★1400px 以上で --pcu を 1px に止める＝レール上の寸法を固定サイズにする（指示書 p.2）。
   **宣言の直後に置く**＝ファイル冒頭のMQに書くと、上の行が後から同じ特異度で上書きして死ぬ。 */
@media screen and (min-width: 1400px) { .feature { --pcu: 1px; } }
.feature .frame { display: flex; align-items: stretch; justify-content: center; }
.feature .frame > .pc { display: contents; }
.feature .frame-main { flex: 0 0 auto; width: 50%; }
/* 本文の器＝37.5rem 固定（=SP見本750px幅ぶん）。地色は見本と同じ #F0EEEA（白地の器はこの案件に無い）。
   末尾159px（本文の最終要素の下端 15243 → フッター罫）は padding-bottom で作る＝本文総高 15402 カンプpx。
   ★159 の根拠＝AB2 の footer 罫は layout では y7012（太さ0.96）だが、見本JPGでは **y7011 から**
     ラスタライズされている（行ごとの平均輝度を実測＝7011/7012 が 118・その上下は 237）。
     本文はその罫の手前まで＝AB2 は 7011 まで。カンプPNGも同じ 7011 で切っている。
   overflow は clip 固定・display:flow-root はマージン相殺を止めるため（#565） */
.feature .frame-main__Inner { overflow: clip; display: flow-root; width: 37.5rem; margin: auto;
  background: #F0EEEA; padding-bottom: 7.95rem; }
/* 規約§8-2: 本文の子要素は全部 relative＝描画順をDOM順に固定 */
.feature :where(.frame-main__Inner > *, .frame-main__Inner .sp > *, .frame-main__Inner .pc > *) { position: relative; }
.feature .frame-side { position: relative; flex: 1 1 0; }
.feature .frame-side__Inner { position: sticky; top: var(--header-h); }

/* --- PC左sticky＝画面半分のフルハイトFV（look-01・ロゴは焼き込み済み＝別PNGは無い） --- */
.feature .frame-side.-mv { flex: 0 0 auto; width: 50%; }
.feature .frame-side.-mv .frame-side__Inner { height: calc(100vh - var(--header-h)); width: 100%; }
.feature .leftcont__Box { opacity: 0; transition: opacity .8s; }
.feature .leftcont__Box.is-inview { opacity: 1; }
.feature .leftcont__Thum { height: calc(100vh - var(--header-h)); width: 100%; position: relative; }
/* ★写真だけに cover を当てる（重ねる文字SVGまで cover にしないため＝直下の img に限定）
   ★切り取りの基準は**中央**（2026-08-25 変更）＝画面が縦に伸び縮みしたとき上下が均等に詰まる。
     `center top` は上端合わせ＝下だけが切れるので、背の低い画面でモデルの足元が丸ごと落ちた。 */
.feature .leftcont__Thum > img { width: 100%; height: 100%; object-fit: cover; object-position: center center; }

/* ===== FVの文字（ロゴ「PUMA × emmi」＋タグライン「Sporty with Ease.」）=====
   ★写真から分離して重ねる（2026-08-24）。掲載先の公開LPと同じ2枚構成。
   ★寸法はカンプの実測＝**インク 468×266.5 カンプpx／SVGの箱 528×328**
     （差はドロップシャドウの外への広がり＝上下左右に約30px。箱の中でインクはほぼ中央
     ＝実測 50.000% / 49.924%）。だから「箱の幅 26.4rem」で置くとインク幅が 468 になる。
   ★SPは窓（750×900）に対する実測の絶対位置で置く＝カンプと同じ位置に載る。
   ★PC左レールの文字は**レール（＝画面）に対して置く**（2026-08-25 変更）。
     ⚠ 初稿は「cover の実描画と同じ箱（`.fv-cover`）」を作ってその中で割合配置していた＝
       **文字が後ろの写真に固定**されていた。写真は画面の縦横比に応じて左右へはみ出す（cover）ので、
       画面が縦長になるほど文字だけが写真と一緒に外へ流れて、紙面上の位置が定まらない。
       他企画（掲載先の公開2cテンプレ・実測4ブランド）はどれも**レールの寸法の割合**で置いている
       （`calc((100vh - 80px) * 係数)`）＝固定pxで置いている実物も、写真に固定している実物も無い。
     ＝器は `.leftcont__Thum`（レールそのもの＝幅50vw × 高さ calc(100vh - 80px)）。
       割合はカンプ（PC見本 700×840）の実測から＝
       SVGの箱 492.8×306.13（インク 436.8×248.93・影のぶん外へ28px）
       → left (126.93−28.0)/700＝14.1329%／top (303.78−28.47)/840＝32.775%／width 492.8/700＝70.4%
       ＝カンプと同じ縦横比（1400×920）のときカンプと画素で一致し、そこから画面が変わっても
         文字は紙面上の同じ割合の位置に留まる（後ろの写真だけが cover で切り替わる）。 */
.feature .fv-txt img { width: 100%; height: auto; }
.feature .look03 .fv-txt { position: absolute; left: 5.3rem; top: 14.754rem; width: 26.4rem; }
/* ★2026-08-25 修正依頼①＝**1400px 以上はタイトルのサイズを固定する**
     （指示書 p.2 原文「※画面幅1400px 以下の場合はタイトルが可変サイズで、**1400px 以上の場合は
     固定サイズ**にしてください」＝`src/text/指示読み起こし.md`）。
   初稿はレール幅に対する % だったので **1400px を超えても伸び続けていた**
     ＝実測 1400px 492.8px（カンプ正値）→ 1600px 563.2 → 1920px 675.8 → 2560px 901.1。
   ＝横方向は `--pcu` で書く（1400px 未満 0.0714286vw ／ 以上 1px に止まる＝上の §PCフレーム）。
     **1400px 未満は変更前の % と完全に等価**＝492.8×0.0714286vw = 35.2vw ÷ レール 50vw = 70.4%／
     98.93×0.0714286vw = 7.0664vw ÷ 50vw = 14.1329%（どちらも変更前の値そのもの）
     ＝1400px 以下の見た目は1px も動かさず、1400px 超だけがカンプの寸法で止まる。
   ⚠ top は % のまま＝縦はレール高（100vh − ヘッダー80）依存で `--pcu`（vw基準）では書けない。
     指示は「タイトルのサイズ」＝寸法の話なので、縦位置はレール内の割合を保つ（初稿の設計どおり）。
   ★横位置は**レールの中央から引く**（2026-08-25 の2回目の指摘＝「サイズは良いが真ん中に来ていない」）。
     ⚠ 最初は左端からの距離を固定した（`left: calc(98.93 * var(--pcu))`）＝1400px を超えると
       レールだけが広がるので**文字が左に寄って見えた**（1920px でレール960に対し左228/右238ではなく
       左98.9/右368.3）。サイズを止めるなら、位置は**中央から**測らないと紙面の中で片寄る。
     251.07 の内訳＝箱幅の半分 246.4 ＋ カンプでの中央からの左オフセット 4.67
     （カンプの箱は left 98.93・幅 492.8・レール 700 ＝ 中央 350 に対して 4.67px 左＝**意図を残す**）。
     ★**1400px 未満は変更前と完全に等価**＝50% はレール幅の半分（0.25vw）・251.07×--pcu は
       0.179336vw ＝差 0.070664vw ＝ 98.93×--pcu と同値（1e-7 まで一致）。 */
.feature .leftcont__Thum .fv-txt { position: absolute; top: 32.775%;
  left: calc(50% - 251.07 * var(--pcu)); width: calc(492.8 * var(--pcu)); pointer-events: none; }

/* ============================================================
   ▼本文（SP見本の正値 ÷20 の rem・並びは elements.txt の flow 順）
   ★フロー要素は 1id=1ルール／margin-top は必ず先頭に置く（flow-margins の書き戻し先）
   ============================================================ */
.feature .look { width: 100%; }
.feature .look img { width: 100%; }
/* ★写真のリンク＝インラインのままだと行ボックスができて器の高さが1px級で動く＝block にする。
   ホバー透過は共通の `@media (hover: hover) .feature a:hover img` が効く（PCだけ）。 */
.feature .look-link { display: block; }

/* ★写真の高さはカンプの正値で固定する（height:auto に任せない）＝**同値の二重の守り**。
   2026-08-24 に**ファイル側を正値へ切り落とした**ので、いまはファイル＝bounds＝この値の3つが一致する
   （＝縦横比の歪みはゼロ・`height:auto` でも同じ絵になる）。それでも残してあるのは、
   書き出しをやり直したときに画布の切り上げが**また混ざっても総高が動かない**ようにするため。
   ⚠ 切り落とした理由は「1px高い」ことではなく、**余った1pxに一様な線が焼き込まれていた**
     ＝写真の縁がうっすら出る（17枚中12枚・詳細は reports/phase6-prep-defects.md の A-1）。
     bounds と同寸だった5枚（look-02/03/04/05/14）はどの辺にも線が無かった＝相関は全件一致。
   リセット `.feature img{height:auto}`（0,1,1）に勝つよう**2本立て**で書く（規約§8-5・#430）。
   ★look03 だけ**直下の img に限定**する（`>`）＝FVは中に文字のSVGを重ねてあり、
     子孫まで当てると重ねたSVGが 45rem に伸びる。特異度は `>` では変わらない＝リセットには勝つ。 */
.feature .look03 > img { height: 45rem; }
.feature .look04 img { height: 36rem; }
.feature .look05 img { height: 50rem; }
.feature .look06 img { height: 37rem; }
.feature .look07 img { height: 37rem; }
.feature .look08 img { height: 48rem; }
.feature .look09 img { height: 34rem; }
.feature .look10 img { height: 44rem; }
.feature .look11 img { height: 50rem; }
.feature .look12 img { height: 41rem; }
.feature .look13 img { height: 41rem; }
.feature .look14 img { height: 45rem; }
.feature .look15 img { height: 44rem; }
.feature .look16 img { height: 44rem; }
.feature .look17 img { height: 38rem; }

/* 1. FV（ピンク＝ふわっと） */
.feature .look03 { margin-top: 0rem; width: 37.5rem; }

/* 2. リード文 */
.feature .lead { margin-top: 4.4rem; margin-left: auto; margin-right: auto; width: 31.5rem;
  font-size: 1.2rem; line-height: 2; letter-spacing: .05em; color: #242424; text-align: center; }

/* 3. 靴の引き（オレンジ） */
.feature .look04 { margin-top: 6.35rem; margin-left: auto; margin-right: auto; width: 27rem; }

/* 4. クレジット（中央寄せ・1品目） */
.feature .credit01 { margin-top: 1.4995rem; margin-left: auto; margin-right: auto; max-width: 11.5367rem; justify-content: center; height: 2.1010rem; }

/* 5. ベロアセットアップ（オレンジ・全幅） */
.feature .look05 { margin-top: 6.5985rem; width: 37.5rem; }

/* 6. クレジット（中央寄せ・4品目2行） */
.feature .credit02 { margin-top: 1.4995rem; margin-left: auto; margin-right: auto; max-width: 24.7609rem; justify-content: center; height: 4.2020rem; }

/* 7-8. ジャケット単体／座りカット（オレンジ・左寄せ x35） */
.feature .look06 { margin-top: 5.6035rem; margin-left: 1.75rem; width: 27.75rem; }
.feature .look07 { margin-top: 1rem; margin-left: 1.75rem; width: 27.75rem; }

/* 9. 白セットアップ（オレンジ・中央 左右15） */
.feature .look08 { margin-top: 8rem; margin-left: auto; margin-right: auto; width: 36rem; }

/* 10. 椅子の脚寄り（オレンジ・右寄せ＝右余白0.75rem） */
.feature .look09 { margin-top: 6rem; margin-left: 11.25rem; width: 25.5rem; }

/* 11. シアースカート寄り（オレンジ・左端） */
.feature .look10 { margin-top: 4rem; width: 33rem; }

/* 12. クレジット（左寄せ x40・4品目2行） */
.feature .credit03 { margin-top: 1.4995rem; margin-left: 2rem; max-width: 25.2797rem; justify-content: flex-start; height: 4.2020rem; }

/* 13. 靴アップ（オレンジ・全幅） */
.feature .look11 { margin-top: 7.5985rem; width: 37.5rem; }

/* 14-15. 脚のクローズアップ／ランプ前の立ち（オレンジ・中央 左右67.5） */
/* ★幅は 30.7rem（614px）＝カンプの器は 615px だが、**この2枚だけ x が 67.5（半画素）**なので
   JPEG書き出しの内側スナップで 614px になる（両端の半分だけ被った列を落とす＝混色の縁が出ない）。
   615 に引き伸ばすと写真全体が再サンプルされるので、器を 614 に合わせて**等倍で置く**。
   紙面中央寄せで x=68＝カンプの 67.5 と 0.5px 差（pos-diff の許容2px内）。
   下の縦書き2件（-emmipuma / -speedcat）のオフセットはこの 0.5px を織り込んだ値。 */
.feature .look12 { margin-top: 5rem; margin-left: auto; margin-right: auto; width: 30.7rem; }
.feature .look13 { margin-top: 1rem; margin-left: auto; margin-right: auto; width: 30.7rem; }

/* 16. クレジット（中央寄せ・4品目2行） */
.feature .credit04 { margin-top: 1.4995rem; margin-left: auto; margin-right: auto; max-width: 25.7445rem; justify-content: center; height: 4.2020rem; }

/* 17. 横長カット（水色＝ピン留め横スクロール）＝紙面750の窓に 1500 の中身を入れる。
   窓の高さ＝カンプ 900 ÷20＝45rem／走路の幅＝カンプ 1500 ÷20＝75rem
   ＝ピンで消費するスクロール量は 75 − 37.5 ＝ **37.5rem**（＝カンプ 750px ぶん）。 */
.feature .look14 { margin-top: 5.5985rem; width: 37.5rem; }
.feature .horizontal-section01 .horizontal-container { height: 45rem; }
.feature .horizontal-section01 .horizontal-scroll { width: 75rem; }
.feature .horizontal-section01 .scroll-item { width: 75rem; }

/* 18-19. ニット寄り（オレンジ・右端まで x90+660=750） */
.feature .look15 { margin-top: 8rem; margin-left: 4.5rem; width: 33rem; }
.feature .look16 { margin-top: 1rem; margin-left: 4.5rem; width: 33rem; }

/* 20. クレジット（左寄せ x90・4品目2行） */
.feature .credit05 { margin-top: 1.4995rem; margin-left: 4.5rem; max-width: 27.0844rem; justify-content: flex-start; height: 4.2020rem; }

/* 21. Check All Items の帯（ピンク＝ふわっと・中央 左右90） */
.feature .look17 { margin-top: 7.5985rem; margin-left: auto; margin-right: auto; width: 28.5rem; }

/* ===== 縦書き見出し（look-name / brand-label）＝**SVG画像**（2026-08-24 にライブテキストから変更）=====
   ライブテキスト（writing-mode: vertical-rl + text-orientation: sideways）では**字形が合わない**：
   `×`（U+00D7）の大きさがカンプと違い、`emmi × PUMA` の字面の長さが 221px（カンプ 232.79px）
   ＝-11.8px 短かった。書体・ウェイト・字送りを合わせても記号1文字ぶんの差が残る
   （キットの `vincente` の × と .ai の × が別物）。**FVの文字が既にSVG**（`fvtxt-01.svg`・A-7）なので
   この案件の流儀としても揃う。
   ★出どころは `page_ol.ai` の `txt` レイヤー＝**アウトライン版の可視bounds＝インクそのもの**。
     再生成（`design/` を差し替えたら回し直す。`.ai` は保存しない＝支給データは無傷）:
       node .claude/skills/svg-export/dup.js --ai <page_ol.ai> --from-layer txt --to-layer svgtmp \
         --match-bounds "1,23,2677,47,20;1,168,6639,48,17;1,168,7137,34,26;2,92,2150,46,25;2,615,2716,48,17"
       node .claude/skills/svg-export/export.js --ai <page_ol.ai> --layer svgtmp --out <src/img> --prefix vtxt
       node .claude/skills/svg-export/dup.js --ai <page_ol.ai> --cleanup svgtmp
     連番は読み順（AB→y→x）＝01 Velour / 02 Sheer / 03 Game Jersey / 04 emmi × PUMA / 05 Speedcat OG。
     `--match-bounds` に渡す数字は**グループの bounds ではなくクリップ窓（最大グリフ）**
     ＝dup.js の照合基準（グループの 60.51x214.94 を渡すと候補0個になる）。
   ★色は SVG が持つ（Sheer / Game Jersey の #2D0F0F も含む）＝CSS で color を当てない。
   ★寸法・位置は**インク座標をそのまま** rem 化（＝サイドベアリングの当て推量が消えた）。
     ライブテキスト時代の「カンプとの最良一致で寄せた値」は不要になったので捨てた。
   ★width / height を各行に持たせるのは特異度のため＝`.feature .lookNN img { height: NNrem }`（0,2,1）が
     この見出しの img にも当たるので、変種クラス込みの (0,3,0) で上書きする（規約§8-5 と同じ形）。 */
.feature .look-name, .feature .brand-label { position: absolute; display: block; }
/* Velour Set-Up（look05・写真の中） */
.feature .look-name.-velour { top: 1.2805rem; left: .5815rem; width: 3.0257rem; height: 10.747rem; }
/* Sheer / Game Jersey は写真の**左外**（インクの右端が look09 の左端 x225 の手前 8.8 / 10.2px） */
.feature .look-name.-sheer { top: .1325rem; right: calc(100% + .4423rem); width: 2.4478rem; height: 4.3373rem; }
.feature .look-name.-gamejersey { top: 23.984rem; right: calc(100% + .5103rem); width: 2.9917rem; height: 10.0124rem; }
/* emmi × PUMA（look13・写真の中）
   ⚠ この1件は `layout.json` の bounds が**壊れている**（x57.5 / w108.49 に対しインクは x91.19 / w47.53
     ＝phase6 A-2 が確定）。ライブテキスト時代はカンプ画素へ寄せて (dx+23, dy+10)px 動かしていた
     ＝`_ol` のインク x91.19 と 0.2px で一致した（別々の測り方で同じ答え）。 */
.feature .brand-label.-emmipuma { top: 1.393rem; left: 1.1595rem; width: 2.3764rem; height: 11.6395rem; }
/* Speedcat OG（look13・写真の中・右寄せ） */
.feature .look-name.-speedcat { top: 29.969rem; right: .9173rem; width: 3.0257rem; height: 9.6754rem; }
/* ↑ left / right は器が 614px（x=68）である前提の値＝インクの絶対位置をカンプに合わせるため
     0.5px 引いてある（器を 615px に戻すなら 1.1845rem / .9423rem へ戻す）。 */

/* ===== Check All Items（横書き3行・写真に重ねるリンク）=====
   fs122 → 6.1rem・line-height 1・letter-spacing -0.005em・白（layout.json の実測） */
/* ★位置は縦書き見出しと同じく最良一致の実測で寄せた（ink 実測 top 1 / left 1.75 → (-1,+1)px） */
.feature .items-link { position: absolute; top: 1.05rem; left: 1.7rem;
  font-family: "vincente", "Times New Roman", serif; font-weight: 400;
  font-size: 6.1rem; line-height: 1; letter-spacing: -.005em; }
.feature .items-link a { color: #FFFFFF; display: block; }
@media (hover: hover) {
  .feature .items-link a { transition: opacity .6s; }
  .feature .items-link a:hover { opacity: .7; }
}

/* ===== クレジット（credit.inc 相当）=====
   ★構造（ul.credit > li.item > a.link > span.txt + span.price）は全案件固定＝崩さない（規約§8-3）。
   ★行構成は <br> でなく**器幅の自然折り返し**で作る（credit.inc へ丸ごと差し替わる＝<br>は残らない）。
   ★max-width と height は **CMS が描く実文字列（credit.tsv の field(2)）で測り直した実測値**
     ＝2026-08-24・`tune-credits --write`（A-3 解決）。カンプの字面幅からの初期値との差は
     最大 0.0012rem（0.024px）＝ダミー価格が実売値と全件一致していたため字面が動かなかった。
   ★下線なし＝品番URLが無い項目（リンク未支給・A-2）。カンプでも下線は無い（見本JPGで確認）。
   ★アイテムの間隔は column-gap で持たせる（margin-right にしない）＝margin は折り返した行の
     行末にも残ってその行だけ内寄せになる（tune-credits の実測で -8px）。部品カタログ §10-2-1 と同じ形。 */
/* ★align-content: flex-start は固定高（各 creditNN の height）とセット＝これが無いと flex 既定の
     stretch で「行数が減ったとき行が縦に伸びる」（価格はライブ実売値＝桁が変わりうる・#363）。 */
.feature .credit { display: flex; flex-wrap: wrap; column-gap: 1rem; align-content: flex-start;
  font-family: "pragmatica", "Helvetica Neue", Arial, sans-serif;
  font-weight: 300; font-style: normal; font-size: 1.1rem; line-height: 1.91;
  letter-spacing: .05em; color: #000000; }
/* ★flex アイテムは縮ませない（`flex: 0 0 auto`）＋品目内では折らない（`nowrap`）。
   既定の `flex-shrink: 1` だと**アイテムが潰れて li の中で文字が折り返す**＝器幅で行を作る設計
   （§8-3）が効かず、実測で credit02 の高さが 84px → 160px になった（pos-diff の段差 +73.8px の正体）。
   部品カタログ §10-2-1 の形にはこの2宣言が無い＝同じ穴を踏む（reports/phase6-prep-defects.md）。 */
.feature .credit .item { flex: 0 0 auto; white-space: nowrap; }
.feature .credit .item.-noline { border-bottom: none; }
.feature .credit .link { color: #000000; }

/* ============================================================
   ▼SP(768px以下)＝「PC見本とSP見本で実際に値が違うもの」だけ書く
     本文の寸法は上のスコープに1組だけ書いてある＝ここでは繰り返さない
   ============================================================ */
@media screen and (max-width: 768px) {
  html { font-size: 2.66667vw; } /* 1rem=10px@375（=SP見本20px） */
  /* PC/SP出し分けの打ち消しは基本側と同じ詳細度以上で＝2本立て（規約§8-2・#346） */
  .feature .pc, .feature .frame > .pc { display: none; }
  .feature .sp { display: block; }
  .feature .frame { display: block; }
  .feature .frame-main { width: 100%; }
  .feature .frame-main__Inner { width: 100%; }
}