@charset "UTF-8";
/* ============================================================
   260807 FURFUR 26AW1st カタログ — 型A（feature_base 起点）
   規約: docs/coding-rules.md §1〜§9 ／ 骨格: templates/feature_base.html

   ■ リキッドの仕組み（この案件の実測値）
     カンプ  SP=750px / PC=1500px（PC中央本文は550px・完全中央）
     採用単位 1rem = カンプ20px  ⇒ 「カンプpx ÷ 20」を rem で書く
       SP: html{font-size:2.66667vw} … 1rem=10px@375（=SP見本750pxの1/2）＝規約どおり
       PC: html{font-size:0.977778vw} … 1rem=14.6667px@1500・以降も比例＝**全部可変（キャップ無し）**
     ★キャップ撤廃はユーザー判断（2026-08-03）: 指示書の参考3サイト（miesrohe/celford/snidel）が
       いずれもPCブレイクポイント無しの全可変だったため。
       （旧実装の min(0.977778vw,14.6667px)=1500px頭打ちは実ページ260729FURの実測由来＝
        掲載先と挙動が変わる点は留意。brand-specs 昇格時はこの判断も書き添える）
   ============================================================ */

body { margin: 0; } /* ローカルプレビュー用（CMSには貼らない） */

/* ===== CMS組み込み用の必須リセット（規約 §6 / docs/cms-embed.md §3）=====
   LP本体（.feature 配下）ではなく CMS側の器に当てるので .feature で包まない。
   ・共通CSS(p/common/style.css)の .l-container{width:1140px} を全幅に戻す
   ・共通CSS(p/shared/common/style.css・header-footer.css)のフッター余白を落とす
   ・.l-container:after{content:'.'} の旧式クリアフィックスが最下部に作る白帯を消す（#97。float回収は残す）
   いずれも共通CSS側は素のクラス1個・!important なし、LPのCSSは共通CSSより後に読まれる＝上書きできる。
   SP系統(s/…)には .l-container / .l-footer / .pc-footer の宣言が無いのでメディアクエリで囲む必要はない。 */
.l-container {
  width: 100%;
}
.l-footer,.pc-footer {
  margin: 0;
  padding: 0;
}
.l-container::after {
  content: "";
}

/* ===== リキッド基準 ===== */
html { scroll-behavior: smooth; font-size: 0.977778vw; } /* PC: 1rem=14.6667px@1500・全可変（キャップ無し） */

/* ===== 出現アニメ（inview）＝値は 演出仕様.md §1（miesrohe 実測）に一致 ===== */
/* 基本＝fadeIn型: 純フェード 1.2s cubic-bezier(0.25,0.46,0.45,0.94)・移動なし */
.js-fade { opacity: 0; transition: opacity 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.js-fade.is-active { opacity: 1; }
/* 枠もの（スイッチャー等）＝fadeUp型: +20カンプpx上昇＋blur(10px)→解除・1s linear */
.js-fade.-up { transform: translateY(1rem); filter: blur(10px);
  transition: opacity 1s linear, transform 1s linear, filter 1s linear; }
.js-fade.-up.is-active { opacity: 1; transform: none; filter: none; }
/* MVの「TOP画像表示後 テキストとロゴ表示」用の遅延。
   当初は参考実装の実測で 01=.3s/02=.6s/03=.9s の段差だったが、
   FV上のテキスト・ロゴは全て同時にふわっと＝全要素 anim-delay01 へ統一（ユーザー指示 2026-08-04） */
.anim-delay01 { transition-delay: .3s; }
/* 一文字ずつ表示（ピンク枠指定）＝stagger 70ms/字は JS側（transition-delay 焼き込み） */
.js-chars .char { display: inline-block; opacity: 0; transition: opacity .12s ease; }
.js-chars.is-active .char { opacity: 1; }
/* スクロールで重ね（シアン枠）＝sticky式のスクロール連動。実装は下部「▼スクロールで画像を重ねる」節
   （旧 .js-overlay の transform 式は 2026-08-04 のユーザー指示で置き換え＝廃止） */
/* QA検証用フック(?noanim)＝全アニメを完了状態で固定。overlay-diff のフルページ撮影は
   IntersectionObserver が発火せず出現アニメが opacity:0 のまま写る＝偽の不一致になる対策。
   ★transform/filter 潰しは .-up に限定する（基本の .js-fade は opacity のみ＝
     transform を全消しすると pc-mv のセンタリング用 translate まで殺してしまう） */
.is-noanim .js-fade, .is-noanim .js-chars .char, .is-noanim .js-anime {
  transition: none !important; opacity: 1 !important; transition-delay: 0s !important; }
.is-noanim .js-fade.-up {
  transform: none !important; filter: none !important; }
/* 重ね（sticky式）＝走路を畳む→sticky変位0＝フローがカンプの最終（重なり）状態そのものになる
   （!important は .has-stack-js .feature .stack-runway の展開ルールに勝つため） */
.is-noanim .stack-runway { height: 0 !important; }
/* クレジットの面は「開いていない」のが既定＝opacity は潰さない（潰すと全ルックで開いた状態になる）。
   消すのはフェードだけ＝QA・reduced-motion では即時に開閉する */
.is-noanim .credit-window { transition: none !important; }
/* reduced-motion フォールバック（a11y＋overlay-diff は reducedMotion:'reduce' でレンダするため
   ?noanim 無しでも偽ミスマッチにならない。前案件実測: 有り2.5% / 無し22.5%） */
@media (prefers-reduced-motion: reduce) {
  .js-fade, .js-chars .char, .js-anime {
    transition: none !important; opacity: 1 !important; transition-delay: 0s !important; }
  .js-fade.-up { transform: none !important; filter: none !important; }
  .stack-runway { height: 0 !important; }
  .credit-window { transition: none !important; }
}

/* ===== 特集共通枠 ===== */
.feature { box-sizing: border-box; color: #000; margin: 0 auto; overflow: clip; position: relative; width: 100%;
  /* 構成書.xlsx FONTシート指定＝Adobe Fonts キット utk3dqd（futura-pt / kozuka-gothic-pr6n）。
     ローダーは js/script.js 先頭（<head>読み込み）。本文はすべて Futura PT（layout.json 実測） */
  font-family: futura-pt, "Futura", "Century Gothic", sans-serif;
  font-weight: 400; font-style: normal; font-feature-settings: "palt";
  background: #DDE7F0; /* PC面の地色（layout.json bgCandidates ab2/ab3 実測＝全面） */ }
.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: inherit; text-decoration: none; }
/* height:auto は width/height 属性（実寸注入＝tools/inject-img-dims.js）とセット＝
   属性は「読み込み前の高さ予約（アスペクト比）」のためだけに使い、表示寸法はCSSが決める
   （属性のheightのまま描くと縦横比が崩れる罠への保険） */
.feature img { vertical-align: bottom; max-width: 100%; height: auto; }
.feature ul { list-style: none; }
/* PCだけホバー（SPに hover は無い） */
@media (hover: hover) {
  .feature a img { transition: opacity .6s; }
  .feature a:hover img { opacity: .7; }
  /* クレジットを持つ写真もPCでは同じく薄くする（ユーザー指示 2026-08-04）。
     クレジットの作り直しで画像側の <a> を廃止した＝共通の `a:hover img` が当たらなくなり、
     「薄くなる写真5点／ならない写真14点」に分かれていたのを揃える。
     ・対象は .look 直下の img だけ＝クレジットの×（.credit-close img）やベールには当てない
     ・スイッチャー（2枚重ね）は**表示中の1枚だけ**＝非表示側の opacity:0 を壊さない
     ・transition もスイッチャーは自前の 1.3s を尊重する（.6s で上書きするとクロスフェードが速くなる） */
  .feature .look.has-credit > img:not(.switch-img) { transition: opacity .6s; }
  .feature .look.has-credit:hover > img:not(.switch-img),
  .feature .look.has-credit:hover > .switch-img.is-current { opacity: .7; }
  /* PC右レールの VIEW ALL ITEMS（logo-07.svg）だけ透過を強める（ユーザー指示 2026-08-04）。
     写真と同じ .7 では褪せ方が弱く見える＝黒一色の文字ロゴは残り70%がそのまま「黒」として
     読めてしまうため（相対コントラストの減り方は写真と同じでも体感が合わない）。 */
  .feature .side-items a:hover img { opacity: .5; }
  /* 文字リンクのホバー（ユーザー指示 2026-08-04）。共通ルールは `a img` 前提＝
     ライブテキストのリンクには当たらないので個別に足す。値は黒文字なので同じく .5。
     ・本文最下部の VIEW ALL ITEMS（.items-link01）＝a に掛けるので下線も一緒に薄くなる
     ・クレジットの各アイテム（.credit .link）＝タップで出る面の中と常時表示(.-static)の両方
       ※href は CMS の credit.inc が入れる＝ローカルでは href 無しでもホバーは効く */
  .feature .items-link a,
  .feature .credit .link { transition: opacity .6s; }
  .feature .items-link a:hover,
  .feature .credit .link:hover { opacity: .5; }
}

/* ============================================================
   ▼PCフレーム（土台）: ①全幅ヘッダー(PC専用MV) ②左sticky ③右sticky ＋ 中央本文
   ============================================================ */
/* ▼追従ヘッダー高（--header-h）＝FVのピン位置と1画面高を決めるknob。
   ★2026-08-05 再適用（ユーザー指示）＝2026-08-04 に一度入れて撤回したものを、
     **SP/PCで別値**にして戻した。前回はSPもPCと同じ80pxで 30px 過剰にずらしていた
     （ユーザー指摘「SPの高さがちょっと違った」）。
   値は掲載先の同型ページ `usagi-online.com/s/260729FUR/` の実測（2026-08-05・スクロールして
   実際に画面に残る要素を全数走査した結果。デスクトップUAとモバイルUAで**別のヘッダーが配信される**）:
     PC = 80px … `div.pc-header-main.is-fixed`（position:fixed / top:0 / height:80 / z-index:800。
                  スクロール開始後にJSで .is-fixed が付いて出現）
     SP = 50px … `div.sm-header`（position:fixed / top:0 / height:50 / z-index:7。常時追従）
                 ※SPの sp-header 系（78/51px）は static＝流れるので対象外。SP値は下のSPメディアクエリ。
   ※参考: 同ページのLP自身のFV（div.catch__movie）は SP で `sticky; top:0`＝ヘッダーの下に
     潜り込ませている（ずらしていない）。当案件はユーザー指示によりずらす方を採る。 */
.feature { --header-h: 80px; }
/* FVの1画面高＝ヘッダーを差し引いた「実際に見える高さ」。PC専用MVで使う（SPのFVはカンプ寸法） */
.feature { --fv-h: calc(100svh - var(--header-h)); }
/* .frame は FVせり上がりの「覆う側」＝positioned にして DOM順でピン留めMVより上に描画する
   （背景はPC専用の差分メディアクエリで #DDE7F0 を持たせる＝隙間からMVが透けない不透明シート） */
.feature .frame { display: flex; align-items: stretch; justify-content: center; position: relative; }
/* 静的プレビュー専用ラッパー div.pc の透明化（本番は m:echo="false" でタグごと消える＝同じ挙動） */
.feature .frame > .pc { display: contents; }
/* 中央本文＝カンプ750px幅 → 37.5rem（PCで550px・SPで375px） */
.feature .frame-main { flex: 0 0 auto; width: 37.5rem; }
/* overflow は clip 固定（hidden はスクロールコンテナ化して内側の sticky＝重なり演出を無効にする） */
.feature .frame-main__Inner { overflow: clip; width: 37.5rem; margin: auto; }
/* サイド列＝左右の余白を等分して本文高までstretch（＝stickyの走路）。
   Inner は 100svh の sticky 窓＝中身（ロゴ/VIEW ALL）を flex で常に画面の上下中央へ
   （ユーザー指示 2026-08-03。カンプでもロゴが縦に3回登場＝「常に見えている」意図） */
.feature .frame-side { position: relative; flex: 1 1 0; }
.feature .frame-side__Inner { position: sticky; top: var(--header-h); height: var(--fv-h); /* ヘッダー考慮（2026-08-05 再適用） */
  display: flex; align-items: center; }
.feature .frame-header, .feature .frame-footer { width: 100%; }

/* ★PC専用要素だけは「PC面カンプ(1500px)の実測px ÷ 14.6667」でrem化する
   （本文は SPカンプ750px基準の ÷20。座標系が違うので分母が違う＝混ぜない）
   出典: src/text/layout-pc.json ＋ img-export のasset実測レポート */

/* --- PC専用MV（全幅ヘッダー領域）＝look-23（写真2枚の合成 1500x900）
     高さ100svh・ロゴ/タイトルは中央基準（ユーザー指示 2026-08-03。カンプ実測でも
     ロゴ中心x751・タイトル群中心x750＝デザイン意図が中央＝絶対座標で組まない）

     ▼FVせり上がり（A-2・ユーザー指示 2026-08-04）＝celford式（演出仕様.md §3-b）の
       fixed→sticky 置き換え（fixed は CMS規約で禁止＝cms-embed §1）:
     ・画像(.pc-mv)だけ sticky top:0 でビューポートに残し、テキスト層(.pc-mv__Txt)と
       後続の .frame（背景持ち）が通常フローのままスクロール1:1で上に覆いかぶさる。
     ・div.pc と header は display:contents ＝ sticky の可動域（親ボックス）を .feature 全高へ
       広げる（本番CMSは m:echo="false" で div.pc タグ自体が消える＝同じ形になる）。
       ピンは解けず最後まで残るが、.frame が不透明（地色背景）なので覆われた後は見えない。
     ・重なり順は z-index なしの DOM順（.pc-mv が先＝下・.frame が後＝上）。
     ・走路も余分なスクロール距離も無し＝ページ長・フローはカンプのまま
       （scroll 0 がカンプそのもの＝PPゲート・overlay-diff のフルページ撮影に影響なし） --- */
.feature > .pc, .feature .frame-header { display: contents; }
/* 追従ヘッダー考慮（2026-08-05 再適用＝ユーザー指示）: ピン位置はヘッダー下端＝FVがヘッダーに
   潜り込まない／FVの高さもヘッダーぶん差し引く（値と根拠は上の --header-h 節） */
.feature .pc-mv { position: sticky; top: var(--header-h); width: 100%; }
.feature .pc-mv__Img { display: block; width: 100%; height: var(--fv-h); object-fit: cover; }
/* テキスト層＝MV画像と同じ 100svh の箱を負マージンで画像に重ねる（フロー上の位置は不変）。
   ★画像と一緒にピン留めする（先方修正依頼 2026-08-05 ③「TOP ロゴとタイトル部分ですが、固定で」）。
     従来は position:relative ＝テキストだけ先に上へ流れて消えていた。箱のフロー位置は
     MV画像の直上（y0）＝top:0 の sticky で scroll 0 の時点から動かない。
     覆いかぶさるのは後続の .frame（不透明な地色持ち・DOM順で後＝上に描かれる）＝画像と同じ扱い。
   pointer-events:none は将来 video に差し替えた際も操作を塞がない保険（中にリンクは無い） */
.feature .pc-mv__Txt { position: sticky; top: var(--header-h); height: var(--fv-h);
  margin-top: calc(var(--fv-h) * -1); pointer-events: none; }
/* MVの FURFUR 白ロゴ（asset-21 実測 w500・中心はカンプMVのど真ん中 x751/y450） */
.feature .pc-mv__Logo { position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%); width: 34.0909rem; }
/* タイトル群（asset-20 実測 x556.3〜943 w387＝中心x750）→ 群ごと左右中央・内部は相対配置 */
.feature .pc-mv__Ttl { position: absolute; top: 5.22%; left: 50%; transform: translateX(-50%);
  width: 26.3863rem; height: 2.25rem;
  font-size: 2.0455rem; line-height: 0.91; letter-spacing: 0.03em; color: #FFFFFF; }
.feature .pc-mv__Ttl span { position: absolute; top: 0; }
.feature .pc-mv__Ttl .-y { left: 0; }           /* 2026       x=556.3（基準） */
.feature .pc-mv__Ttl .-s { left: 8.1382rem; }   /* Autumn     x=675.66 → +119.36 */
.feature .pc-mv__Ttl .-c { left: 17.9557rem; }  /* Collection x=819.65 → +263.35 */

/* --- 左sticky＝FURFURロゴ / 右sticky＝VIEW ALL ITEMS ---
   縦位置は sticky 窓の flex センタリング（上）＝margin-top 不要。横位置はカンプ実測
   ★2026-08-06 先方修正（朱字「70パーセントに縮小しました」）＝両方とも70%へ。
     新カンプ 260806_..._shu.ai の 0806_修正 レイヤー実測（PC面1500px座標・中央基準の縮小）:
       FURFURロゴ     x=87.5 w=300  → x=132.5   w=210    （中心x237.5 は不変）
       VIEW ALL ITEMS x=1116.9 w=291.2 → x=1160.58 w=203.84（中心x1262.5 は不変）
     ※デザイナーは各1件だけを縮小して見本として置いた（design レイヤーには旧寸法の
       ロゴ5件・VIEW ALL 5件が残っている＝カンプ上でstickyの登場を複数回描いているもの）。
       実装は sticky で1基ずつ＝この width を直せば全登場に反映される。
     ※素材はどちらもSVG（logo-06/07.svg）＝ベクターなので再書き出し不要。
       img の width/height 属性は実寸のまま（規約§8-5）・表示寸法はこのCSSが持つ。 */
.feature .side-logo { width: 14.3182rem; margin: 0 0 0 9.0341rem; }    /* 210 / 132.5（旧 300 / 88） */
.feature .side-items { width: 13.8982rem; margin: 0 0 0 9.2441rem; }   /* 203.84 / レール左端1025からの距離135.58（旧 291 / 92） */
.feature .side-items a { display: block; }
/* ★img は .main-content の width:100% リセットの外＝無指定だと原寸(291px)で止まり
   約1500px幅以上で可変が停止する（実際に踏んだ）。明示して枠に追従させる */
.feature .side-items img { display: block; width: 100%; }


/* ============================================================
   ▼本文（main-content-build 生成 → 単位をremへ機械変換 → .feature スコープ化）
      値はすべて layout.json の正値由来。手で足した装飾は末尾にまとめてある。
   ============================================================ */

.feature * {
  -webkit-text-size-adjust: 100%;
}

.feature .main-content {
  width: 37.5rem;
  font-feature-settings: 'palt';
  margin: 0 auto;
  display: flow-root; /* BFC化：子の margin-top を外に漏らさない（先頭要素の上余白がコンテナ内に収まる） */
  /* 最下部の余白＝margin レイヤーのマゼンタ帯「150」（SP_2 最下部・look22 の下。2026-08-04 実測）。
     カンプ実測の下余白 146.85px（credit15 下端 22149.75 → カンプ総高 22296.6）とも整合＝帯が指定の正。
     地色シート(::before)は bottom:0 なのでこの padding 領域まで自動で塗られる（帯 #F0F0F0 の
     グラデ高さ 534.65rem はカンプ総高までの値＝padding 追加でちょうど下端が一致する） */
  padding-bottom: 7.5rem;
}
.feature .main-content * {
  box-sizing: border-box;
}
/* img リセット：:where() で詳細度 (0,1,0) に抑える＝後続の単クラス部品CSS（UI部品等）が
   width 指定で普通に勝てる。素の img{} を持つサイト共通CSSには .main-content ぶんで勝ち続ける */
.feature .main-content :where(img) {
  width: 100%;
  height: auto;
  vertical-align: top;
}
.feature .main-content a {
  color: inherit;
  text-decoration: none; /* CMS共通CSSがaに付ける下線を消す（ローカルでは見えずCMS設置後に発覚する型）。下線が要るデザインは該当クラスで上書き */
}
/* 見出し・段落のリセット：tag 指定（h1〜h6/p）でも div と同じ素の状態から始める。
   :where() は詳細度を上げない＝サイト側の素の h2{} 等には勝ち（.main-content ぶんの詳細度）、
   後続のクラス指定（意味クラスの font-size・連番クラスの margin-top）には普通に負ける */
.feature .main-content :where(h1, h2, h3, h4, h5, h6, p) {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
  font-family: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
}


/* look / asset は block 化（余白・幅・横位置は .lookNN/.assetNN 等の連番クラス）。.look 内の a も block（inline だと画像下に隙間が出る） */
.feature .look,
.feature .asset { display: block; }
/* 画像を包む a だけ block（inline だと画像下に隙間が出る）。子孫セレクタにすると
   クレジット内の a.link（インライン流し）まで block 化してしまうので直下に限定する */
.feature .look > a { display: block; }

/* look画像：margin-top=カンプ座標から自動計算、幅=実PNG幅、横位置（左寄せ=そのまま/右端一致=margin-left:auto/他=左からの距離） */
.feature .look01 { margin-top: 0; width: 37.5rem; }
.feature .look02 { margin-top: 14.95rem; width: 25rem; margin-left: 6.25rem; } /* mv-logo 挿入後の残余（カンプ: look02 上端1400 − ロゴ下端1101） */
/* ★2026-08-04: クレジットをフロー外（.credit-window の中央）へ移したので、
   直後の要素の margin-top に「そのクレジットが占めていた高さ」を足し戻してある
   （2行=2.679rem / 1行=1.3395rem。カンプ位置は変えない＝機械照合で±0.1カンプpx を確認済み）。 */
.feature .look03 { margin-top: 12.3rem; width: 37.5rem; }
.feature .look04 { margin-top: -0.2rem; width: 26.9rem; margin-left: 5.2rem; }
.feature .look05 { margin-top: 13.9rem; width: 37.5rem; }
.feature .look06 { margin-top: 7.6395rem; width: 32.5rem; margin-left: 2.5rem; } /* クレジット退避ぶん: 旧 35.45 + credit02の margin(-29.15)+高さ(1.3395) */
.feature .look07 { margin-top: 7.5rem; width: 37.5rem; }
.feature .look08 { margin-top: 7.529rem; width: 32.5rem; margin-left: 2.5rem; }  /* 旧 34 + credit03(-29.15+2.679) */
.feature .look09 { margin-top: 7.4895rem; width: 37.5rem; }                      /* 旧 28.15 + credit04(-22+1.3395) */
.feature .look10 { margin-top: 9.929rem; width: 27.1rem; margin-left: 5.2rem; }  /* 旧 36.4 + credit05(-29.15+2.679) */
.feature .look11 { margin-top: -32.95rem; width: 26.1rem; margin-left: 5.7rem; }
.feature .look12 { margin-top: 10.579rem; width: 37.5rem; }                       /* 旧 26.25 + look11のクレジット(-18.35+2.679) */
.feature .look13 {margin-top: 2.2565rem;width: 37.45rem;} /* 常時表示クレジット(credit08)が24pxで1行ぶん高くなった差 -0.267 ／ +0.0565=credit08の20px化(2026-08-06)でフローが縮んだぶんの戻し＝look13以降はカンプのまま不変 */
/* --- look14 = 「Classical rules. / Rebellious rhythm.」-----------------------------
   ★2026-08-05: 焼き込み画像（deco-01.svg）→ **ライブテキスト＋一文字ずつ表示**（.js-chars）に差し替え
     （先方修正依頼 ④の「テキスト表示」に動きを付けるため＝ユーザー指示）。
   値は FIN.ai の PHレイヤーの生テキストを実測（発明していない・紙面内 SP_2 x478.03 y2339.36 の1件。
   もう1件の同文は紙面外＝状態見本）:
     Futura PT Book 20pt / leading 27.3004pt（＝line-height 1.365）/ tracking 30（＝0.03em）/
     #000 / matrix a=0.9578 b=-0.28743 → AI -16.704° ⇒ CSS +16.7042deg（右下がり）
   ★整列は **center**。.ai の paragraphAttributes は "right" と報告するが、**実描画（旧 deco-01.svg の
     アウトライン）を画素で測ると2行は中央揃え**＝行2の右端が行1より 14カンプpx 右（中央揃えの予測値
     13＝(行2幅-行1幅)/2 と一致・右揃えなら0）。実描画を正とした。
   ★z-index:1 ＝直後の look15 より前面へ（依頼「写真の上にテキスト表示」。DOM順のままだと後の
     look15 が上に来て、カンプ同様に「Rebellious rhythm.」の一部が写真に隠れる）
   ★配置は lyric01/02 と同じ「中心合わせ」方式＝回転は要素の中心で起きるので、
     未回転の箱の中心をカンプのインク外接矩形の中心（x551.855 y2386.23＝
     layout.json look-14 bounds 481.11,2348.17,141.49,76.12 の中心）へ translate で寄せる。
   ★画素照合の結果（旧SVG描画 vs 新ライブテキスト・SP375幅・?noanim・回転を戻して行単位で実測）:
     行幅 61/74 → 61/75px・行間オフセット +7 → +7px・インク外接矩形の中心差 dx=0.0 dy=0.0px
     ＝カンプ位置と同値（残る赤青の差は1px幅ストロークのアンチエイリアス差）。
     未回転の箱幅も 151.3 対 .ai実測 150.4カンプpx＝0.6%以内で一致（書体が正しく載っている裏取り）。 */
.feature .look14 { margin-top: 6.929rem; margin-left: 24.05rem; width: max-content; z-index: 1;
  font-size: 1rem; line-height: 1.365; letter-spacing: 0.03em; text-align: center; color: #000;
  transform: translate(0.016rem, 0.519rem) rotate(16.7042deg); }   /* 旧 33.4 + look13のクレジット(-29.15+2.679) */
/* margin-top は旧 -2.15rem＋1.0375rem＝look14 が画像(3.766rem)からライブテキスト2行(2.728rem)に
   なって縮んだぶんの戻し（2026-08-05 実測）。これで look15 以降のフローはカンプのまま不変 */
.feature .look15 { margin-top: -1.1125rem; width: 30rem; margin-left: 3.65rem; }
.feature .look16 { margin-top: 9.629rem; width: 37.5rem; }                       /* 旧 26.7 + look15のクレジット(-19.75+2.679) */
.feature .look17 {margin-top: 1.5565rem;width: 37.45rem;} /* 同上（credit11）／ +0.0565=credit11の20px化(2026-08-06)の戻し */
/* ★look18/19 は 2026-08-04 に中身を入れ替えた（指示の 1番目/2番目 が正）＝
   look-18=マフラーアップ(under・1番目) / look-19=銀カーテン全身(over・2番目)。
   旧実装は読み順(y差7.8px)の連番をそのまま採ったため画像も重なりも逆だった */
.feature .look18 { margin-top: 10.359rem; width: 26.7rem; margin-left: 5.3rem; }  /* 旧 36.83 + look17のクレジット(-29.15+2.679) */
.feature .look19 { margin-top: -34.19rem; width: 27.7rem; margin-left: 4.85rem; }
.feature .look20 { margin-top: 10.919rem; width: 37.5rem; margin-left: -0.1rem; } /* 旧 27.28 + look19のクレジット(-19.04+2.679)。look19 が690高の全身に替わった差分(+7.8px)も吸収済み＝カンプ y6614 のまま */
.feature .look21 { margin-top: 7.429rem; width: 32.4rem; margin-left: 2.5rem; }  /* 旧 33.9 + look20のクレジット(-29.15+2.679) */
.feature .look22 { margin-top: 7.235rem; width: 25rem; margin-left: 6.25rem; } /* staff-credit の折り返し解消（6行化）で1行ぶん詰まった29.7カンプpxを戻す（2026-08-04・DOM実測 vs layout.json 21455.4） */

/* テキスト：className 毎に代表値（値は layout.json 由来）＋直後の連番クラスに余白と個別差分 */

.feature .mv-title {
  font-size: 1.5rem;
  line-height: 0.91;
  letter-spacing: 0.03em;
  text-align: center;
  color: #FFFFFF;
}
.feature .mv-title01 { margin-top: 0; } /* 引き戻し -50.2rem は親 .mv-txt へ移した（固定化＝下記「▼TOPロゴ・タイトルの固定」） */
.feature .mv-title02 {margin-top: 11.4rem;}
.feature .mv-title03 {margin-top: 4.5rem;}

.feature .tap-label {
  font-size: 1.1rem;
  line-height: 1.2;
  letter-spacing: 0.014em;
  text-align: left;
  color: #000000;
}
.feature .tap-label01 {margin-top: -30.1rem;margin-left: 26.6rem;}
.feature .tap-label02 { margin-top: 7.629rem; margin-left: 30.5rem; } /* 旧 34.1 + credit01(-29.15+2.679)＝フロー外へ出したぶん */
.feature .tap-label03 {margin-top: -46.9rem;margin-left: 27.2rem;}
.feature .tap-label04 {margin-top: -40.1rem;margin-left: 7rem;}

.feature .lyric {
  font-size: 1rem;
  line-height: 1.37;
  letter-spacing: 0.03em;
  text-align: center;
  color: #000000;
}
.feature .lyric01 { margin-top: -1.15rem; } /* deco-logo01（Not in Line）挿入後＝五線ロゴ下端2339にテキスト上端2316が少し重なるカンプどおり */
.feature .lyric02 { margin-top: -2.15rem; }

.feature .items-link {
  font-size: 2.5rem;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-align: left;
  color: #000000;
}
.feature .items-link01 {margin-top: 7.6rem;margin-left: 9.65rem;} /* 旧 28.15 + look21のクレジット(-22.8+2.679) */

.feature .end-title {
  font-size: 1rem;
  line-height: 1.37;
  letter-spacing: 0.03em;
  text-align: center;
  color: #000000;
}
.feature .end-title01 {margin-top: 11.6rem;}
.feature .end-title02 { margin-top: -0.05rem; }
.feature .end-title03 {margin-top: 1.1rem;} /* deco-logo02（Not in Line 小）挿入後の残余 */

.feature .staff-credit {
  font-size: 1rem;
  line-height: 1.37;
  letter-spacing: 0.03em;
  text-align: center;
  color: #000000;
}
.feature .staff-credit01 { margin-top: 2.5rem; }

/* --- credit（クレジット）------------------------------------------------------
   構造は規約§8-3 の固定標準 `ul.credit > li.item > a.link > span.txt + span.price`
   ＝CMS の credit.inc 差し替え口。**商品リンクは credit.inc が入れる**ので a.link に href は書かない（規約§4）。
   カンプ実測: Futura PT Book 24px（=1.2rem）/ line-height 1.34 / 中央寄せ / 項目区切りは " / "。
   ・タップで出るクレジット（12基＋重ねの下2基）は .credit-window の中で中央＝**フロー外**。
     → 下の要素を押さない＝クレジット無しのカンプ（見本PDF「クレジットなし」）とフローが一致する。
   ・.-static の3基（look12/look16/look22）はカンプで常時表示のラベル＝フローに残して margin で置く。
   幅は「カンプの折り返し幅」＝layout.json のテキスト枠実測 ＋1.1rem（=区切り " / " の実幅22カンプpx）。
   スラッシュは行末に残るのがカンプの多数派だが、枠がカンプ実測ちょうどだと入りきらず
   次行の頭へ回る（look15/18/19/21 で実際に発生）＝区切りぶんの余裕を足してある。
   折り返しは器幅に任せる（<br> は使わない＝CMS credit.inc は改行を持てないため）。 */
.feature .credit {
  font-size: 1.2rem;
  line-height: 1.34;
  letter-spacing: 0.03em;
  color: #000000;
  text-align: center;
}
.feature .credit .item { display: inline; }
.feature .credit .link { white-space: nowrap; }   /* 1アイテムの途中では折り返さない */
.feature .credit .item:not(:last-child)::after { content: " / "; }

.feature .credit01 { width: 27.8285rem; }  /* look3  カンプ w=534.6 */
.feature .credit02 { width: 8.7105rem; }   /* look5  w=152.2 */
.feature .credit03 { width: 17.9645rem; }  /* look7  w=337.3 */
.feature .credit04 { width: 8.001rem; }    /* look8  w=138.0 */
.feature .credit05 { width: 25.7175rem; }  /* look9  w=492.4 */
.feature .credit06 { width: 19.4775rem; }  /* look10 ＝look11と同一コーデ（カンプに面は無い・幅は揃える） */
.feature .credit07 { width: 19.4775rem; }  /* look11 w=367.6 */
.feature .credit08 { width: 5.751rem; }    /* look12 w=115.0（常時表示・20px化 2026-08-06。旧 6.901=138.0） */
.feature .credit09 { width: 19.5715rem; }  /* look13 w=369.4 */
.feature .credit10 { width: 11rem; }      /* look15 w=198.0 */
.feature .credit11 { width: 5.751rem; }    /* look16 w=115.0（常時表示・20px化 2026-08-06。旧 6.901=138.0） */
.feature .credit12 { width: 19.4755rem; }  /* look17 w=367.5 */
.feature .credit13 { width: 18.868rem; }   /* look18 ＝look19と同一コーデ */
.feature .credit14 { width: 18.868rem; }   /* look19 w=355.4 */
.feature .credit15 { width: 26.2215rem; }  /* look20 w=502.4 */
.feature .credit16 { width: 27.605rem; }   /* look21 w=530.1 */
.feature .credit17 { width: 5.751rem; }    /* look22 w=115.0（常時表示・20px化 2026-08-06。旧 6.901=138.0） */

/* 常時表示の3基＝フロー内。位置はカンプ実測（margin-left は下部の共通指定で中央から寄せる） */
/* margin-top の +0.21rem は 20px 化で行ボックスが縮んだぶんの下げ戻し（2026-08-06）。
   行ボックス上端→グリフ上端のオフセットは font-size 比例＝旧24pxで実測5.23px ⇒ 20pxで4.36px。
   新カンプのグリフ上端は look 上端から 1042.28（旧1038.95）＝行ボックス上端を 1037.92 に置く。

   ★横位置は「写真との余白」を修正前のまま保つ（ユーザー指示 2026-08-06）。
     20px化でテキスト枠は 138.02→115.02 に細るが、新カンプはそれを**中央基準**で縮めている
     ＝左寄りのラベルは左余白が、右寄りのラベルは右余白が 11.5px ずつ広がってしまう。
     デザイン上そろえたいのは写真の縁との距離なので、各ラベルが写真のどちら側に寄っているかで
     基準辺を変える（寄っている側の余白＝修正前と同値）:
       .credit08 look12（写真0〜750の左寄り）… 左余白 40.54 を維持 ⇒ x=40.54（＝旧値のまま）
       .credit11 look16（写真0〜750の右寄り）… 右余白 31.99 を維持 ⇒ 右端718.01 から逆算し x=602.99
       .credit17 look22（写真125〜625の左寄り）… 左余白 0（写真の左端に揃う）⇒ x=124.99（＝旧値のまま） */
.feature .credit08 { margin-top: 41.11rem; margin-left: 2.027rem; }   /* look12 左余白40.54を維持（mt 旧40.9） */
.feature .credit11 { margin-top: 35.01rem; margin-left: 30.1495rem; } /* look16 右余白31.99を維持＝右端718.01（旧 x=580.0 / mt 34.8） */
.feature .credit17 { margin-top: 0.91rem; margin-left: 6.2495rem; }   /* look22 左余白0＝写真左端に揃う（mt 旧0.7） */

/* ★2026-08-06 先方修正（朱字「フォントサイズ 20ptに修正お願いいたします」）
   ＝常時表示ラベル3基（look12「Bag ¥14,300」/ look16「Bag ¥16,500」/ look22「Bag ¥16,500」）を 24px → 20px。
   朱字が付いていたのは look12・look16 の2点だけだが、**3基を揃える**のがユーザー判断（2026-08-06）。
   新カンプ 260806_..._shu.ai の design レイヤー実測で size=20・枠幅 138.02→115.02（中央基準）。
   ★.ai 側の縮め方は「ベースライン固定」＝グリフ上端は下がり下端は上がる。実測で検算済み:
     旧 上端1038.95 / 下端1064.95（h26・asc19.98・desc6.02）
     新 上端1042.28 / 下端1063.95（h21.67）＝ asc/desc をそれぞれ 20/24 倍した値と一致。
   look22 は朱字が無く .ai も24ptのままなので、この同じ規則（上端+3.33・x+11.5）を当てはめた。
   タップで出るクレジット群（.credit-window の中）は対象外＝24px のまま。 */
.feature .credit08,
.feature .credit11,
.feature .credit17 { font-size: 1rem; }


/* ============================================================
   装飾著述（coding-rules §5・§8）。ここから下は手書き。
   骨組み（上の機械生成CSS）は壊さず追記のみ。寸法はカンプpx÷20のrem。
   ============================================================ */

/* --- 中央寄せテキストの横位置 -------------------------------------------------
   機械工程は alignment:center を「紙面幅で中央」と解釈するが、この案件の
   2026 / Autumn / Collection は紙面上に散らして置かれている（カンプ実測）。
   ボックスを内容幅にして margin-left でカンプのx座標へ置く。               */
.feature .mv-title,
.feature .end-title { width: fit-content; }
.feature .mv-title01 { margin-left: 8.65rem; }
.feature .mv-title02 { margin-left: 28.85rem; }
.feature .mv-title03 { margin-left: 2.1rem; }
.feature .end-title01 { margin-left: 8.4rem; }
.feature .end-title02 { margin-left: 28.85rem; }
.feature .end-title03 { margin-left: 13.55rem; }

/* 複数行の中央寄せテキストは「箱の位置＋箱内で中央」＝箱の幅と左位置をカンプ実測で与える */
.feature .lyric01 { width: 24.3rem; margin-left: 3.9rem; position: relative; z-index: 1; } /* 五線ロゴと重なるためテキストを上に */
.feature .lyric02 { width: 9.2rem; margin-left: 4.75rem; }
/* staff-credit はカンプ枠(w432 x159)の中心=紙面中央（7.95+21.6/2=18.75rem）。
   枠幅21.6remだと最終行「…MASH STYLE LAB」の末尾が実描画で数px超えて折り返す
   （全行 <br> 明示済み＝行分けはカンプの正）→ 幅は内容に任せて中央寄せに置き換え */
.feature .staff-credit01 { width: max-content; margin-left: auto; margin-right: auto; }

/* --- 追加部品（指示レイヤー・design レイヤーの機械抽出値。2026-08-03） ---------------
   mv-logo    : SP MVの FURFUR 白ロゴ（asset-04 実測 x147 y956 w457 h145）
   deco-logo01: Not in Line ロゴ（asset-06 実測 x158 y2121 w435 h218）
   deco-logo02: Not in Line ロゴ小（asset-17 実測 x173 y9224 w435 h218） */
.feature .mv-logo { width: 22.85rem; margin-top: 18.05rem; margin-left: 7.35rem; }

/* ============================================================
   ▼TOPロゴ・タイトルの固定（先方修正依頼 2026-08-05 ③「TOP ロゴとタイトル部分ですが、固定で」）
     SPのFV画像（.look01）は既に sticky でピン留めしてある（＝FVせり上がり）。
     テキスト層だけが通常フローで流れて先に消えていたので、同じくピン留めして
     「FV一式が残り、後続コンテンツが覆いかぶさる」形に揃える。
     ・.mv-txt の箱は look01 下端(60rem)から -50.2rem 戻った位置＝カンプ y9.8rem で始まる
       → sticky の top も同値。**さらに追従ヘッダーぶん（--header-h）を足す**＝ピン留めした
         FV画像（.look01 も top:var(--header-h)）との相対位置がカンプのまま保たれる
         （2026-08-05・ヘッダー考慮の再適用。足さないとロゴ・タイトルだけ画像から離れる）
     ・高さは中身まかせ（auto）／子の margin は据え置き＝フロー・後続の look02 位置は不変
     ・z-index は look01 と同じ -2＝地色シート(.main-content::before, -1)に覆われる側に置く
       （前面に置くと本文の上に貼り付いたまま残ってしまう。DOM順で look01 の後＝画像の上）
     ・pointer-events:none＝ピン留め層が本文のタップを塞がない保険（中にリンクは無い）
   ============================================================ */
.feature .mv-txt { position: sticky; top: calc(9.8rem + var(--header-h)); margin-top: -50.2rem;
  z-index: -2; pointer-events: none; }
.feature .deco-logo { display: block; }
.feature .deco-logo01 { width: 21.75rem; margin-top: 30.95rem; margin-left: 7.9rem; }
.feature .deco-logo02 {width: 21.75rem;margin-top: 0.9rem;margin-left: 8.65rem;}

/* VIEW ALL ITEMS の下線（カンプ asset-14 は文字＋下線。ライブテキスト＋下線で実装、
   ゲートが弾いたら asset-14 画像へ差し替え） */
.feature .items-link a {border-bottom: 1px solid currentColor;padding-bottom: 0.5rem;}

/* ============================================================
   ▼傾き（カンプで斜めに置かれている3要素）— 画像化せずライブテキストのまま transform で倒す
     角度は .ai のテキストフレーム matrix の実測（推測ではない）:
       lyric01      matrix a=0.99408 b=-0.10866 → AI +(-6.238°) ⇒ CSS  6.24deg（右下がり）
       lyric02      matrix a=0.98124 b=+0.19280 → AI +(11.116°) ⇒ CSS -11.12deg（右上がり）
       items-link01 matrix a=0.99851 b=-0.05460 → AI +(-3.130°) ⇒ CSS  3.13deg（右下がり）
     ※AIはY軸が上向き＝CSSは符号が逆になる。
   layout.json の bounds は「傾いた後の外接矩形」なので、その中心＝未回転テキストの中心。
   transform は回転を要素の中心で行う＝flowは動かさないまま、translateY で中心を
   カンプ外接矩形の中心へ寄せる（margin を触らないので後続要素の位置に影響しない）。
     lyric01: 実測インク中心 y2358.5 → カンプ中心 y2381.3（+22.8px＝1.14rem）
     lyric02: 実測インク中心 y4610.5 → カンプ中心 y4628.4（+17.9px＝0.9rem）
     items-link01: 箱がテキストより広く回転中心がずれるので width:max-content で箱を文字幅に揃える
   ★translateY の最終値はカンプPNGとの画素照合で詰めた（.ai の bounds は傾いたテキストでは
     グリフの実インクより大きく出るので、寄せ先はPNGの実インクを正とした。
     照合結果 lyric01/02 は dy0・items-link01 は +0.4rem 追い足しで dy0）。
   items-link01 は文字＋下線をまとめて倒す（下線もカンプどおり斜めになる）。
   一文字ずつ表示(.js-chars)はライブテキスト前提なので、この3要素は画像化しない。
   ============================================================ */
.feature .lyric01 { transform: translateY(1.14rem) rotate(6.24deg); }
.feature .lyric02 { transform: translateY(0.9rem) rotate(-11.12deg); }
.feature .items-link01 { width: max-content; transform: translate(0.04rem, 0.53rem) rotate(3.13deg); }


/* ============================================================
   ▼地色（layout.json bgCandidates の実測＝発明していない）
     SP面(ab0)   : 全面 #F7F8F8 ＋ y1197 から高さ1450 の帯 #DDE7F0
     SP_2面(ab1) : 全面 #F2F2F2 ＋ y181 から高さ10514 の帯 #F0F0F0
     PC面(ab2/3) : 全面 #DDE7F0（＝.feature の background）
   本文は SP面→SP_2面 を縦連結した1本なので、連結後の通しYで帯を敷く。
   ============================================================ */
/* ★地色の塗りはSPのみ（PC面はアートボード全面が #DDE7F0 の1枚＝.feature の背景で足りる。
   bgCandidates ab2/ab3 が 1500x8519・1500x7880 の単色1枚しか持たないのが根拠）。
   → SPの帯は下部の SP メディアクエリ内で敷く。 */
/* ★main-content を stacking context 化（z-index:0）し、地色帯（::before/::after）は z-index:-1 で
   「main-content の背景の上・すべての子ボックスの下」へ沈める。
   （旧実装の `.main-content > * { z-index:1 }` は display:contents の旧 .look-unit にボックスが無く
   効かない＝ルックが帯に塗り潰される事故。z-index:1 の持ち上げ方式は使わない。
   .look-unit 自体は 2026-08-04 に廃止＝クレジットは .look の中の .credit-window が持つ） */
.feature .frame-main__Inner { position: relative; }
.feature .main-content { position: relative; z-index: 0; }
/* 本文の描画順＝DOM順に固定する。positioned（.look 等）と静的要素が混ざると
   「静的が先・positionedが後」の描画フェーズ順になり、負マージンで画像に重ねた
   テキスト（MVタイトル・ロゴ等）が画像の下へ潜る。全部 positioned にして解決 */
.feature .main-content :where(.look, .mv-title, .mv-logo, .deco-logo, .lyric, .credit,
  .items-link, .end-title, .staff-credit) { position: relative; }

/* ============================================================
   ▼クレジット表示（画像タップ）
     カンプ（見本JPG/…クレジットあり.pdf）のベクター実測:
       ・ベール面 #DDF0FC・不透明度60%。写真と同じ形（=写真の矩形）で、写真の上にしか掛からない
       ・×ボタン 29.29角の2本線・黒・線幅1、面の右上から上30/右30 カンプpx（→ img/close-01.svg）
       ・クレジットは面の中央
     仕様（ユーザー指示 2026-08-04）:
       1タップ目＝画像タップで面が出る／2タップ目＝薄い青（ベール）をタップでキーワードリンクへ遷移。
       ＝**リンクは画像ではなくベールが持つ**。各アイテムのリンクは li 1件ずつ（CMS credit.inc が入れる）
   ============================================================ */
.feature .look { position: relative; }
.feature .look.has-credit { cursor: pointer; }

/* 面（ベール＋クレジット＋×）の器。既定は不可視＝クリックも通さない（visibility） */
.feature .credit-window {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility .4s;
}
.feature .look.is-credit .credit-window { opacity: 1; visibility: visible; }

/* 薄い青の面そのものがリンク（キーワード検索）。クレジット・×より下に敷く */
.feature .credit-veil {
  position: absolute; inset: 0; display: block;
  background: #DDF0FC; opacity: .6;
}
.feature .credit-window .credit { position: relative; z-index: 1; }

/* ×＝カンプのパスをそのままSVG化（img/close-01.svg）。
   30.29 は 29.29 の作画＋線幅ぶんの余白＝面の角からの見た目の余白がカンプの 30 になる。
   ★タップ領域拡大（2026-08-04 ユーザー指摘「スマホで押せない」）: 見た目 30.29カンプpx＝
   SP実寸15pxは推奨44pxの1/3 → 当たり判定だけ 4.4rem四方（SP44px）へ。padding で広げ
   同量の負 margin で位置を戻す＝×の見た目・位置は不変（box-sizing:border-box 前提。
   広がった角はベール（面リンク）に被るが×優先が正）。 */
.feature .credit-close {
  --hit: calc((4.4rem - 1.5145rem) / 2); /* 片側の拡張量 */
  position: absolute; top: 1.475rem; right: 1.475rem; z-index: 2;
  width: 4.4rem; height: 4.4rem;
  padding: var(--hit); margin: calc(var(--hit) * -1);
  border: 0; background: none; cursor: pointer; line-height: 0;
}
.feature .credit-close img { display: block; width: 100%; }

/* --- 斜め写真は面を写真と同じ角度で倒す（＝クリップ）------------------------
   look10/11/15/18/19 は 500x650 の写真を傾けて配置したもの＝PNGは外接矩形（四隅が透明）。
   面を inset:0 で敷くと透明な四隅まで青くなる＝カンプは写真の上にしか掛かっていない。
   面を 25rem x 32.5rem（=500x650）にして中心合わせで倒すと写真とぴったり重なる。
   角度は .ai / カンプPDF のベクター実測（PNGのアルファ辺を最小二乗フィットして裏取り済み）。
   ×とクレジットは倒さない（カンプでも水平）＝面の回転を打ち消す。                */
/* --- 斜め写真の落ち影は「素材PNGが持つ」（2026-08-04 訂正）--------------------
   斜め6点（look04/10/11/15/18/19）の落ち影は .ai のグループに掛かった効果＝
   **書き出しPNGに焼き込まれている**
   （まっすぐな写真 look02/08/22 はアルファ無し＝影なし＝この6点だけの意匠。カンプ側も段差なし）。
   ★ただし img-export はクリップグループを**マスクパスの範囲**でラスタライズする
     （export-layer.jsx の trueVisibleBounds）＝効果のはみ出しが外接矩形で切られ、
     隅に直線の切れ目が出る（旧PNGの実測: 外周1pxに alpha 249 までの影が 23〜114px 残っていた）。
   → 2026-08-04 に**各辺24カンプpxの余白つきで再書き出し**（クリップ窓＋padでラスタライズ）。
     外周の半透明画素は6点とも0＝切れ目なし。写真の画素は旧PNGと一致（look-18/19 の入れ替えも保持）。
     対象の見つけ方（機械判定）＝「不透明部分から3px以上外へ広がる半透明画素があり、
     それが外周1pxに残っている PNG」。look04 はこの走査で後から見つかった（2026-08-04・ユーザー指摘）。
   ★CSSで drop-shadow を足すのは**二重掛け**なので廃止した。実測（地色240からの暗さの積分）:
     look15下辺 カンプ228 / CSS影あり349(1.53倍) / 素材の影だけ177 ・
     look19下辺4点 CSS影あり 1.05〜1.70倍。filter はアルファから影を作る＝焼き込み影が
     さらに影を落として切れ目まで輪郭化していた。
   余白ぶんは img だけを外へ張り出させて吸収する（.look の箱＝写真の寸法のまま＝
   フロー・クレジットの面（.credit-window の中心）・重ねの --under-h/--v を一切動かさない）。
   width の 100% は .look の幅（＝写真幅）なので +2.4rem で新PNGの実寸ちょうど、高さは auto で追従。 */
.feature .look04 > a > img,   /* look04 は img が a の中（他5点は .look 直下） */
.feature .look10 > img,
.feature .look11 > img,
.feature .look15 > img,
.feature .look18 > img,
.feature .look19 > img {
  width: calc(100% + 2.4rem);
  max-width: none; /* 共通の img{max-width:100%} が幅を器（=写真幅）で頭打ちにするので外す */
  margin: -1.2rem;
}

.feature .look10 { --tilt: 3.8367deg; }
.feature .look11 { --tilt: -2.0284deg; }
.feature .look15 { --tilt: -9.6119deg; }
.feature .look18 { --tilt: -3.2157deg; }
.feature .look19 { --tilt: 4.9394deg; }
.feature .look10 .credit-window,
.feature .look11 .credit-window,
.feature .look15 .credit-window,
.feature .look18 .credit-window,
.feature .look19 .credit-window {
  inset: auto; top: 50%; left: 50%; width: 25rem; height: 32.5rem;
  transform: translate(-50%, -50%) rotate(var(--tilt));
}
.feature .look10 .credit-close, .feature .look11 .credit-close,
.feature .look15 .credit-close, .feature .look18 .credit-close,
.feature .look19 .credit-close { transform: rotate(calc(var(--tilt) * -1)); }
.feature .look10 .credit-window .credit, .feature .look11 .credit-window .credit,
.feature .look15 .credit-window .credit, .feature .look18 .credit-window .credit,
.feature .look19 .credit-window .credit { transform: rotate(calc(var(--tilt) * -1)); }

/* ============================================================
   ▼タップ再生（緑枠）— 「TAP.」文字＋波形を1枚のSVG（logo-02.svg）に統合
     （ユーザー指示 2026-08-03。_ol実測 34.7x53.8＝旧テキスト枠と同原点なので
      margin-left/top はそのまま。旧 tap-wave-NN.png は不使用＝残置）
   ============================================================ */
.feature .tap-label {
  position: relative; display: block; width: fit-content;
  padding: 0; border: 0; background: none; font: inherit; cursor: pointer;
}
.feature .tap-icon { display: block; width: 1.735rem; }
.feature .js-sound.is-playing .tap-icon { animation: tap-pulse .9s ease-in-out infinite; }
@keyframes tap-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
  .feature .js-sound.is-playing .tap-icon { animation: none; }
}

/* ============================================================
   ▼スクロールで画像を重ねる（シアン枠）／画像スイッチ（自動切替）
     対象は指示レイヤーのシアン枠・SLIDE注記を機械抽出して確定（2026-08-03）:
     重ね = look10+11 / ~~look14+15~~ / look18+19
       ★look14+15 は 2026-08-05 の先方修正依頼 ④で**重ねを撤回**（フェードイン＋テキスト前面へ）。
         残る2組は据え置き＝依頼PDFの青枠が look14+15 の1組だけを囲っていたため（ユーザー判断）。
     スイッチ = look03 / look09 / look13 / look20 / look21（2枚目は look-extra）

     重ねの動き（ユーザー指示 2026-08-04）＝celford式sticky（演出仕様.md §3-a）の改良版:
     under画像が画面の縦中央に来たら「直前のlookごと」凍結（sticky）し、
     overがスクロール1:1で画面下から覆いかぶさり、カンプの重なり位置で凍結が解ける。
     ・.stack-stick … 直前look＋under を束ねた sticky ブロック。
       直前unitまで含めるのは凍結中に画面上部へ「動く継ぎ目」を見せないため。
       ピンの式: under中央=50svh ⇔ ブロック下端=50svh+under高/2
                 ⇔ top = calc(50svh + var(--under-h)/2 - stick高)
       ★stick高はCSSで書けない＝stickyの top の%は「コンテナでなくスクロールポート基準」で
       解決される（100%=ビューポート高になるのを実測で確認）。よって --stick-h は
       script.js ⑤が offsetHeight を実測して注入する（画像ロード/リサイズは ResizeObserver 追随）。
     ・.stack-runway … 凍結中に進むスクロール距離（走路）
       = over が「画面下端 → カンプの重なり位置」まで走る距離 = 50svh - under高/2 + --v
       sticky の変位上限＝走路長なので、解除位置はこの高さだけで決まる。
       走路は html.has-stack-js（script.js ⑤が付与）でのみ展開＝JS無し環境は走路0
       ＝ピンも変位も起きずカンプの最終（重なり）状態で静止する安全側。
     ・over側の look は .stack の外（次兄弟）の通常フロー＝負margin-topはカンプ値のまま。
       解除後は sticky が走路ぶん押し下げられた位置で確定＝カンプの最終状態と一致する。
     ・重なり順は z-index なしの DOM順（over が後）。祖先の overflow は clip 必須（hidden は sticky 殺し）。
     ・--under-h: under画像の高さ / --v: カンプの重なり量（over の margin-top の絶対値）
     ・--pin: 凍結時の under下端のビューポートY＝発動位置のノブ。
       既定「under画像の中央=画面中央」（旧 stack02 だけ under が小さなテキストだったため
       「over の最終位置の中央=画面中央」基準に差し替えていたが、その組は撤回済み＝上記） */
.feature .stack { --pin: calc(50svh + var(--under-h) / 2);
  --runway: calc(100svh - var(--pin) + var(--v)); } /* 走路 = overが「画面下端→カンプ位置」まで走る距離 */
.feature .stack-stick { position: sticky;
  top: calc(var(--pin) - var(--stick-h, 99999px)); } /* 未計測時は事実上ピン無効 */
.feature .stack-runway { height: 0; }
.has-stack-js .feature .stack-runway { height: var(--runway); }
.feature .stack01 { --under-h: 34.1rem;  --v: 32.95rem; } /* under=look10(h682/20) over=look11 */
/* ※ stack02（look14＋look15）は 2026-08-05 の先方修正依頼 ④で重ねを撤回＝
     ふわっと表示（.js-fade）＋テキスト前面（.look14 の z-index）に置き換えたのでルールを削除した。 */
.feature .stack03 { --under-h: 33.8rem;  --v: 34.19rem; } /* under=look18(マフラーアップ h676/20) over=look19(全身) */

/* 画像スイッチ＝クロスフェード 1300ms linear（miesrohe slick 実測: speed:1300 / cssEase:'linear'） */
.feature .switcher { position: relative; }
.feature .switcher .switch-img { transition: opacity 1.3s linear; }
.feature .switcher .switch-img + .switch-img { position: absolute; inset: 0; }
.feature .switcher .switch-img:not(.is-current) { opacity: 0; }
.feature .switcher .switch-img.is-current { opacity: 1; }
/* ドット（位置・寸法は仕様実測: 10カンプpx・白枠・active白塗り・枠の右下 bottom18/right22）
   ★形は「丸」（先方修正依頼 2026-08-05 ②「スライドボタン四角ではなく、下記入稿したデザインで」）＝
     入稿の凡例パネルの意匠が ●○＝丸ドット。参考サイト(miesrohe)実測の角ドットから丸へ変更。
     色（白）と位置（写真の右下）は指摘なし＝実測どおり据え置き。 */
.feature .switch-dots { position: absolute; right: 1.1rem; bottom: 0.9rem;
  display: flex; gap: 0.5rem; z-index: 2; }
.feature .switch-dots button { width: 0.5rem; height: 0.5rem; padding: 0;
  border: 1px solid #fff; border-radius: 50%; background: transparent; cursor: pointer; }
.feature .switch-dots .is-current { background: #fff; }

/* ============================================================
   ▼SP(768px以下)
     SP見本(750px幅)の実測値÷20のrem＝本文のrem値はPCと共有。
     切り替えるのは html の font-size とフレームの解除だけ。
   ============================================================ */
@media screen and (max-width: 768px) {
  html { font-size: 2.66667vw; } /* 1rem=10px@375 */
  /* ★SPの追従ヘッダーは 50px（実ページ実測 `div.sm-header` fixed top:0 h50 z7＝常時追従）。
     PCの 80px（pc-header-main.is-fixed）とは別値＝ここで差し替える（根拠は冒頭 --header-h 節）。
     --fv-h も自動で追随するが、SPのFVはカンプ寸法（look01=60rem）なので高さには使わない */
  .feature { --header-h: 50px; }
  /* PCフレームの領域（PC専用MV・左右sticky）はSPでは丸ごと出さない。
     .frame > .pc は基本側の display:contents に確実に勝たせるため個別に消す */
  .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%; }
  .feature .main-content { width: 100%; }

  /* ▼FVせり上がり（A-2・ユーザー指示 2026-08-04）: SPのMV＝look01（画像だけ）を
     sticky top:0 でビューポート上端に残し、MVタイトル・ロゴ含む後続コンテンツが
     スクロール1:1で覆いかぶさる（celford式 演出仕様.md §3-b の fixed→sticky 置き換え）。
     可動域の親は .main-content（全高）＝ピンは最後まで解けないが、下の地色シートが
     不透明なので覆われた後は見えない。z-index:-2 ＝シート(-1)より下・Inner背景より上。
     フロー・ページ長は不変＝PPゲート・overlay-diff 影響なし。
     動画が支給されたら look01 内の img を video に差し替えるだけ（A-2） */
  /* ヘッダー考慮（2026-08-05 再適用）＝SPの追従ヘッダー50pxの下端でピン留めする。
     ★ローカルプレビューは上にサイトヘッダーが無い（LPが文書の先頭）ので、scroll 0 では
       sticky が「top より上にある要素を下げる」規則で FV が --header-h ぶん下がって見える。
       CMS上ではLPの上に静的ヘッダー（SP実測180px）があるので起きない＝ローカル限定の見え方。
       .mv-txt も同じ量だけ下がる（top に --header-h を足してある）＝FVとの相対位置は不変。 */
  .feature .look01 { position: sticky; top: var(--header-h); z-index: -2; }

  /* ▼SP面の地色（layout.json bgCandidates 実測）
     ab0: 全面 #F7F8F8 ＋ y1197 から高さ1450 の帯 #DDE7F0
     ab1: 全面 #F2F2F2 ＋ y181 から高さ10514 の帯 #F0F0F0（通しYで 11604 から）
     ★FVせり上がり対応（2026-08-04）: 従来の帯2本（::before/::after）を
     「FV下端(y1200=60rem)から最下部までの不透明シート1枚」(::before) に敷き直した。
     シートが後続コンテンツと一緒にスクロールしてピン留めFVを覆い隠す＝コンテンツの
     隙間からFVが透けない（帯の無い区間も base #F7F8F8 で塗る）。
     帯のY・高さは従来値のまま（通しy → シート内ローカルyへ -60rem しただけ＝見た目不変） */
  .feature .frame-main__Inner { background: #F7F8F8; }
  .feature .main-content::before {
    content: ""; position: absolute; left: 0; top: 60rem; bottom: 0; width: 100%; z-index: -1;
    background:
      linear-gradient(#DDE7F0, #DDE7F0) 0 0 / 100% 72.35rem no-repeat,          /* ab0帯: 通しy59.85〜132.35（FV下端60から） */
      linear-gradient(#F0F0F0, #F0F0F0) 0 calc(520.2rem + var(--bands-shift, 0rem))
        / 100% calc(100% - 520.2rem - var(--bands-shift, 0rem)) no-repeat,      /* ab1帯: 通しy580.2 から下端まで */
      #F7F8F8;
  }
}

/* ▼ab1帯の走路補正（SP/PC共通・2026-08-04・ユーザー指摘「look11の背景が薄暗い」）:
   帯のYはシート内の絶対rem＝JSが展開する走路（.stack-runway）でコンテンツが押し下げられると
   帯だけが相対的に上へ食い込み、look11 周辺（帯開始直前）が #F0F0F0 に沈んでいた。
   補正量＝「帯開始より上にある走路」の合計＝この案件では stack01 の走路だけ
   （素座標実測: SP 5693px<5802px / PC 508.08rem<519.06rem。stack02/03 は帯の内側＝
   帯を「開始〜シート下端」で塗る形にして自動吸収）。
   式は .stack01 の --runway と同じ: 100svh - (50svh + 34.1rem/2) + 32.95rem = 50svh + 15.9rem
   ★stack01 の --under-h / --v を変えたらここも追随させること。 */
.has-stack-js .feature .main-content::before { --bands-shift: calc(50svh + 15.9rem); }
/* 走路が 0 に戻る状態（?noanim・reduced-motion・JS無し）は補正も 0（走路の打ち消しと対） */
.is-noanim .feature .main-content::before { --bands-shift: 0rem !important; }
@media (prefers-reduced-motion: reduce) {
  .feature .main-content::before { --bands-shift: 0rem !important; }
}

/* ============================================================
   ▼PC専用の差分（769px以上）
   ============================================================ */
@media screen and (min-width: 769px) {
  /* ★SP専用要素の非表示は「本文CSSより後」に置くこと。
     本文CSSの .feature .look{display:block} と同じ詳細度(0,2,0)なので、
     先に書くと負けて look01 がPCにも出てしまう（実際に踏んだ）。 */
  .feature .sp { display: none; }

  /* FVせり上がりの「覆う側」の不透明背景（PC面はアートボード全面 #DDE7F0＝.feature と同値）。
     ピン留めした .pc-mv がコンテンツの隙間から透けないよう .frame 自身が地色を持って
     スクロールと一緒に上がっていく（celford の .l-content{background:#fff} と同じ役目） */
  .feature .frame { background: #DDE7F0; }

  /* SPのMV（look01＋2026/Autumn/Collection）はPCでは出さない＝
     本文先頭が look02 になるので、フレーム先頭からの余白をPC面カンプで与え直す。
     PC面実測: MV下端 y=900 / look02 上端 y=1030 → 差130px ÷14.6667 = 8.8636rem */
  .feature .look02 { margin-top: 8.8636rem; }

  /* ▼PC中央コラムの地色帯（2026-08-04・ユーザー指示「念のため修正」）:
     PCカンプの中央コラム（550px幅）にはSPと同じ地色帯が写っている（PCカンプ実測:
     帯0終端=カンプy1944・帯1開始=カンプy8513=アートボード境界。コラム外は .frame の #DDE7F0）。
     座標はSP帯の通しyから「SPのFV+MVタイトル区間(70rem) − PCのlook02余白(8.8636rem) = 61.1364rem」
     を引いたコラムローカル値（look02 の素座標 8.86rem・look12=帯1開始 519.01rem の実測で裏取り済み）:
       帯0 #DDE7F0: 0 〜 71.21rem（132.35 - 61.14。上端はコラム上端まで＝上は .frame と同色）
       帯1 #F0F0F0: 519.06rem（580.2 - 61.14）〜 下端（走路補正 --bands-shift はSPと共通ルール）
     シートは main-content 全高（top:0/bottom:0）＝FVせり上がりで .frame が持ち上がる動きにも追従 */
  .feature .main-content::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 100%; z-index: -1;
    background:
      linear-gradient(#DDE7F0, #DDE7F0) 0 0 / 100% 71.21rem no-repeat,
      linear-gradient(#F0F0F0, #F0F0F0) 0 calc(519.06rem + var(--bands-shift, 0rem))
        / 100% calc(100% - 519.06rem - var(--bands-shift, 0rem)) no-repeat,
      #F7F8F8;
  }
}

/* （クレジットの枠幅は上部の credit 節へ集約した。タップで出る12+2基はフロー外＝
    .credit-window の中央に置くので margin-left は不要・常時表示の3基だけが margin を持つ） */