@charset "UTF-8";
/* ============================================================
   261020CFD TAION × CELFORD（templates/feature_base.html から複製・型A）
   ■ 寸法＝SPカンプ(560px幅)の正値px ÷ 10 の rem で1組だけ書く（1rem = カンプ10px）
     SP : html{font-size:1.785714vw}（560px幅で 1rem=10px）
     PC : html{font-size:0.714286vw}（本文カラム560px@1400 → 1rem=10px）
     ＝器 .frame-main は 56rem 固定。draft-measure.json の contentRem 56 と対。
   ■ PC本文は SP座標 +(700, −660) の平行移動＝本文は1組だけ書く（面差は PC ブロックの4点だけ）
   ■ 左レール（PCだけ）は本文カラムの外＝rem を使わず --pcu（1 PCカンプpx）で書く（§8-6-2・#440）
   ■ テキストの top は Figma の行ボックス＝半leading を引かない（bounds型: line-box）
   ============================================================ */
body { margin: 0; } /* プレビュー用 */

/* ===== CMS組み込み用の必須リセット（規約§6 / docs/cms-embed.md §3）＝消さない ===== */
.l-container { width: 100%; }
.l-footer,.pc-footer { margin: 0; padding: 0; }
.l-container::after { content: ""; }
/* 掲載先の normalize.css の sup/sub を打ち消す（テンプレの注記どおり） */
sup, sub { position: static; top: auto; }

/* ===== リキッド基準（SP） ===== */
html { scroll-behavior: smooth; font-size: 1.785714vw; } /* 1rem=10px@560 */

/* ============================================================
   ▼出現アニメ（指示書の割当表＝src/text/指示読み起こし.md）
   点火クラスは is-inview（is-active は Splide が自動付与するので使わない・§8-11）。
   初期非表示は html.js-anim ゲート越しにだけ書く（JS が無い環境では全部見える）。
   ============================================================ */
/* 指示#1「指定外すべて下から上へフェードアップ」＝b-risk の fadeup の実物
   （reference-check.json：1s・cubic-bezier(0.33, 1, 0.68, 1)・下から30px・不透明度は8割の時点で1） */
html.js-anim .js-reveal.-up { opacity: 0; }
html.js-anim .js-reveal.-up.is-inview { animation: fadeup 1s cubic-bezier(0.33, 1, 0.68, 1) var(--d, 0s) both; }
@keyframes fadeup {
  0% { opacity: 0; transform: translateY(3rem); }
  80% { opacity: 1; }
  100% { opacity: 1; transform: translateY(0); }
}

/* 指示#2 FV「写真：右から左 → 文字：左から右に滑らかに表示」＝b-risk の smooth の実物
   （clip-path の1辺を100%→0・1.4s cubic-bezier(0.37, 0, 0.63, 1)）。
   ★2枚組（器 js-wipe-box が見張り・中身 js-wipe が潰れて開く＝テンプレの形） */
.js-wipe { transition: clip-path 1.4s cubic-bezier(0.37, 0, 0.63, 1) var(--d, 0s); }
html.js-anim .js-wipe.-fromLeft  { clip-path: inset(0 100% 0 0); } /* 左から右へ開く */
html.js-anim .js-wipe.-fromRight { clip-path: inset(0 0 0 100%); } /* 右から左へ開く */
html.js-anim .js-wipe-box.is-inview > .js-wipe { clip-path: inset(0); }
html.js-anim .js-wipe.is-inview { clip-path: inset(0); }
.js-wipe-box { position: relative; }
.js-wipe-box > .js-wipe { display: block; }

/* 指示#5 LOOK 見出し＝celford.com の参考ゾーン（「× Pants Style」の出方）の実物
   ＝字形のパス1本ずつが下から1字ぶん浮き上がる。0.7s cubic-bezier(0.19, 1, 0.22, 1.1)・
   遅延 0.06s × 順番（順番は script.js が各パスへ入れる）。窓は inline SVG の既定 overflow:hidden。 */
html.js-anim .js-pop path { opacity: 0; translate: 0 100%; transform-box: fill-box;
  transition: opacity .7s cubic-bezier(0.19, 1, 0.22, 1.1), translate .7s cubic-bezier(0.19, 1, 0.22, 1.1); }
html.js-anim .js-pop.is-inview path { opacity: 1; translate: 0 0; }

/* QA検証用フック(?noanim)＝全アニメを完了状態で固定 */
.is-noanim .js-reveal { animation: none !important; transition: none !important; opacity: 1 !important; }
.is-noanim .js-wipe { transition: none !important; clip-path: none !important; }
.is-noanim .js-pop path { transition: none !important; opacity: 1 !important; translate: none !important; }
/* reduced-motion＝完了状態で見せる（?anim=1 の切り分けフックで外せる） */
@media (prefers-reduced-motion: reduce) {
  html:not(.is-forceanim) .js-reveal { animation: none !important; transition: none !important; opacity: 1 !important; }
  html:not(.is-forceanim) .js-wipe { transition: none !important; clip-path: none !important; }
  html:not(.is-forceanim) .js-pop path { transition: none !important; opacity: 1 !important; translate: none !important; }
  html:not(.is-forceanim) .feature .railttl__item { transition: none !important; }
  html:not(.is-forceanim) { scroll-behavior: auto; }
}

/* ===== 特集共通枠 ===== */
/* ★ここに overflow は置かない（#1771＝祖先の overflow が中の sticky をスマホで震わせる） */
.feature { box-sizing: border-box; color: #000; margin: 0 auto; position: relative; width: 100%;
  /* 構成書 FONT シート＝しっぽり明朝 Regular（キット adm0hlf） */
  font-family: "shippori-mincho", serif;
  font-weight: 400; font-style: normal; font-size: 1.6rem; letter-spacing: 0;
  text-spacing-trim: space-all;
  line-break: strict;
  background: #fff; }
.feature * { margin: 0; padding: 0; border: 0; vertical-align: baseline; box-sizing: border-box; scroll-margin-top: 50px; }
.feature h1, .feature h2, .feature h3, .feature h4, .feature h5, .feature h6,
.feature strong, .feature b { font-weight: inherit; }
/* PC/SP 出し分け＝打ち消しは基本側と同じ詳細度以上の2本立て（§8-2・#346） */
.feature .pc, .feature .frame > .pc { display: none; }
.feature a { color: #000; text-decoration: none; }
/* ホバー透過は PC だけ（§8-7）。値はテンプレ既定（公開実物の最多 .7 / .3s） */
@media (hover: hover) {
  .feature a img, .feature a:not(:has(img:not([alt=""]))), .feature button { transition: opacity .3s; }
  .feature a:has(img:not([alt=""])):hover img { opacity: .7; }
  .feature a:not(:has(img:not([alt=""]))):hover, .feature button:hover { opacity: .7; text-decoration: none; }
}
.feature img { display: block; vertical-align: bottom; max-width: 100%; height: auto; }
.feature svg { display: block; width: 100%; height: auto; }
.feature ul { list-style: none; }
.feature a:has(img), .feature a:has(svg) { display: block; }

/* 本文カラムの器＝100%（親に合わせる・テンプレの注記どおり） */
.feature .frame-main__inner { display: flow-root; width: 100%; margin: auto; background: #fff; }
/* §8-2: 本文の子要素は全部 relative＝描画順をDOM順に固定 */
.feature :where(.body-rest > *, .look > *, .look__txt > *, .muffler > *, .muffler__txt > *) { position: relative; }

/* ============================================================
   ▼FV（窓 560x680・写真 560x700 を上揃えで置いて下20pxを切る）
   子の位置は器に対する%で書く＝SP（本文カラム）とPC（左レール）の両方で同じ比になる
   ロゴの縦位置は下端基準（PCレールが低い窓で縮んでも写真の裾に乗る）
   ============================================================ */
.feature .fv { position: relative; overflow: clip; aspect-ratio: 560 / 680; }
.feature .fv__thum { position: absolute; inset: 0; }
.feature .fv__thum a { height: 100%; }
.feature .fv__thum img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
/* ロゴ asset-02（x28 y501.2 504.58x65.64）＝下端 566.84 → 下から 113.16/680 */
.feature .fv__logo { position: absolute; left: 5%; bottom: 16.641%; width: 90.104%; --d: 1s; pointer-events: none; }
/* 「×」＝カンプ画素実測 x209 y524 16x16（白の細線2本の交差）。
   支給の asset-03.png は回転が抜けて縦線2本で書き出されていた（phase6-prep-defects.md）＝SVGの線で描く。
   ロゴ（x28 y501.2 504.58x65.64）に対する比で置く */
.feature .fv__x { position: absolute; left: 35.871%; top: 34.735%; width: 3.171%; }

/* ============================================================
   ▼本文の走路（TOP ボタンが追従する範囲＝FV の下から紙面の末尾まで）
   ============================================================ */
/* 末尾の余白＝紙面の下端 12792 − STAFF の下端 12713.1（§8-18） */
.feature .body-rest { position: relative; display: flow-root; padding-bottom: 7.89rem; }
.feature .topmark-rail { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
/* 矢印 x526 y771（10.5x38）＋縦組みの TOP x525.5 y811（10.5x31.5）＝カンプ画素実測。
   素材 asset-05 は回転の書き出しで並びが崩れていた＝2枚に分けて縦に積む（phase6-prep-defects.md）。
   走路の起点は FV の下端 680 → 771 まで 9.1rem。貼り付く位置は追従ヘッダーの下に 3rem。 */
.feature .topmark { position: sticky; top: calc(var(--cms-header-h, 0px) + 3rem);
  margin-top: 9.1rem; margin-left: 52.55rem; width: 1.1rem; margin-bottom: 7.89rem; }
.feature .topmark__btn { display: block; pointer-events: auto; }
.feature .topmark__arrow { width: 1.05rem; margin-left: .05rem; }
.feature .topmark__txt { width: 1.05rem; margin-top: .2rem; }

/* ============================================================
   ▼導入（Down, Dressed up 〜 リード文）
   ============================================================ */
.feature .intro__ttl { margin-top: 5rem; width: 33.312rem; margin-left: 11.3rem; }
.feature .intro__sub { margin-top: 0.296rem; text-align: center; font-size: 2.4rem; line-height: 1.42; color: #A6C0D0; }
.feature .intro__lead { margin-top: 0.8rem; text-align: center; font-size: 1.6rem; line-height: 1.75; color: #000; }

/* ▼発売告知（器＝カッコの外接 x141〜422 / y1012〜1163・中身は器相対の正値） */
.feature .release { margin-top: 5.7rem; position: relative; width: 28.1rem; height: 15.1rem; margin-left: 14.1rem; }
.feature .release__bracket { position: absolute; top: 0; }
.feature .release__bracket.-l { left: 0; width: 2.2rem; }
.feature .release__bracket.-r { right: 0; width: 2.4rem; }
/* 構成書 FONT シート＝Noto Sans CJK JP Medium（キット adm0hlf の noto-sans-cjk-jp 500） */
.feature .release__shop, .feature .release__time { position: absolute; text-align: center; white-space: nowrap;
  font-family: "noto-sans-cjk-jp", "Noto Sans JP", sans-serif; font-weight: 500; color: #A6C0D0; }
.feature .release__shop { top: 1.85rem; left: 5.19rem; width: 17.2rem; font-size: 2.4rem; line-height: 1.25; }
.feature .release__date { position: absolute; top: 6.7rem; left: 2.076rem; width: 23.648rem; }
.feature .release__time { top: 11.11rem; left: 4.82rem; width: 18rem; font-size: 1.6rem; line-height: 1.88; }

/* ============================================================
   ▼LOOK（×6）＝メイン写真の窓＋番号 → 見出し → カルーセル or サブ写真 → コピー・本文・クレジット
   ============================================================ */
.feature .look__numsvg, .feature .look__ttlsvg { display: block; width: 100%; height: auto; }
/* 番号は写真より後に出る（指示#4「1 写真 → 2 文字ブロック」）＝遅延 .4s */
.feature .look p[class*="__num"] { position: absolute; z-index: 1; --d: .4s; pointer-events: none; }
.feature .look [class*="__main"] img, .feature .look [class*="__sub"] img { width: 100%; }

.feature .look01__main { margin-top: 7.9rem; height: 70rem; overflow: clip; }
.feature .look01__num { left: 3.5rem; top: 3.8rem; width: 8.399rem; }
.feature .look01__ttl { margin-top: 2.7rem; width: 28.577rem; margin-left: 13.7rem; }
.feature .look01__car { margin-top: 2.767rem; }
.feature .look01__copy { margin-top: 4rem; }
.feature .look01__lead { margin-top: 0.9rem; }
.feature .look01__credit { margin-top: 1.7rem; max-width: 25.5172rem; min-height: 7.2000rem; }

.feature .look02__main { margin-top: 8rem; height: 70rem; overflow: clip; }
.feature .look02__num { left: 42.981rem; top: 11rem; width: 10.339rem; }
.feature .look02__ttl { margin-top: 2.7rem; width: 44.462rem; margin-left: 5.769rem; }
.feature .look02__sub { margin-top: 1.896rem; }
.feature .look02__copy { margin-top: 4rem; }
.feature .look02__lead { margin-top: 0.9rem; }
.feature .look02__credit { margin-top: 1.7rem; max-width: 25.7961rem; min-height: 7.2000rem; }

.feature .look03__main { margin-top: 8rem; height: 70rem; overflow: clip; }
.feature .look03__num { left: 5.1rem; top: 14.5rem; width: 9.81rem; }
.feature .look03__ttl { margin-top: 2.8rem; width: 29.981rem; margin-left: 13rem; }
.feature .look03__car { margin-top: 2.667rem; }
.feature .look03__copy { margin-top: 4rem; }
.feature .look03__lead { margin-top: 0.9rem; }
.feature .look03__credit { margin-top: 1.7rem; max-width: 28.6000rem; min-height: 7.2000rem; }

.feature .look04__main { margin-top: 8rem; height: 70rem; overflow: clip; }
.feature .look04__num { left: 42.981rem; top: 33.3rem; width: 9.682rem; }
.feature .look04__ttl { margin-top: 2.6rem; width: 37.408rem; margin-left: 9.3rem; }
.feature .look04__sub { margin-top: 1.996rem; }
.feature .look04__copy { margin-top: 4rem; }
.feature .look04__lead { margin-top: 0.9rem; }
.feature .look04__credit { margin-top: 1.7rem; max-width: 34.7773rem; min-height: 4.8000rem; }

/* LOOK5 だけメイン写真が 448 幅（窓 #47 x56 448x560）＝asset-27 を窓相対 (-25.6, -37.6) で置いて切る */
.feature .look05__main { margin-top: 8rem; width: 44.8rem; height: 56rem; margin-left: 5.6rem; overflow: clip; }
.feature .look .look05__main > a > img { position: relative; left: -2.56rem; top: -3.76rem; width: 50.176rem; max-width: none; }
.feature .look05__num { left: 6.793rem; top: 9.1rem; width: 10.359rem; }
.feature .look05__ttl { margin-top: 2.252rem; width: 30.923rem; margin-left: 12.5rem; }
.feature .look05__sub { margin-top: 2.317rem; }
.feature .look05__copy { margin-top: 4rem; }
.feature .look05__lead { margin-top: 0.9rem; }
.feature .look05__credit { margin-top: 1.7rem; max-width: 27.8984rem; min-height: 7.2000rem; }

/* LOOK6 のメイン写真は窓より大きい（asset-31 635x794 を窓相対 (-52, -43)） */
.feature .look06__main { margin-top: 8rem; height: 70rem; overflow: clip; }
.feature .look .look06__main > a > img { position: relative; left: -5.2rem; top: -4.3rem; width: 63.5rem; max-width: none; }
.feature .look06__num { left: 4.598rem; top: 20.6rem; width: 11.914rem; }
.feature .look06__ttl { margin-top: 2rem; width: 33.584rem; margin-left: 11.2rem; }
.feature .look06__car { margin-top: 2.447rem; }
.feature .look06__copy { margin-top: 4rem; }
.feature .look06__lead { margin-top: 0.9rem; }
.feature .look06__credit { margin-top: 1.7rem; max-width: 30.0063rem; min-height: 7.2000rem; }

/* サブ写真の窓（x56 448x560） */
.feature .look02__sub, .feature .look04__sub, .feature .look05__sub { width: 44.8rem; height: 56rem; margin-left: 5.6rem; overflow: clip; }
.feature .look .look02__sub img { position: relative; left: -3.041rem; top: -4.25rem; width: 49.987rem; max-width: none; }

/* 指示#6 青枠「横カルーセル・エンドレス」＝Splide loop（slider-build）。
   1枚の窓 380x475・2枚目は x400（間 20）で紙面の右端で切れる＝カンプの見え方そのまま。
   幅と間は data-splide（fixedWidth 38rem / gap 2rem）。はみ出しはカルーセル自身の器で切る。 */
.feature .look01__car, .feature .look03__car, .feature .look06__car { height: 47.5rem; overflow-x: clip; }
.feature .look .splide__slide { position: relative; height: 47.5rem; overflow: clip; }
.feature .look .splide__slide img { position: absolute; max-width: none; }
/* 窓の中の写真の位置＝素材の bounds − 窓（ループの複製でも当たるようファイル名で引く） */
.feature .splide__slide img[src$="asset-12.jpg"] { left: -1rem; top: -2.5rem; width: 40rem; }
.feature .splide__slide img[src$="asset-13.jpg"] { left: -1rem; top: -1.25rem; width: 40rem; }
.feature .splide__slide img[src$="asset-22.jpg"] { left: -1rem; top: -1.25rem; width: 40rem; }
.feature .splide__slide img[src$="asset-21.jpg"] { left: -3.4rem; top: -4rem; width: 43.6rem; }
.feature .splide__slide img[src$="asset-35.jpg"] { left: 0; top: 0; width: 38rem; }
.feature .splide__slide img[src$="asset-34.jpg"] { left: -1rem; top: -1.25rem; width: 40rem; }

/* コピー（しっぽり明朝 18/1.56 #000002）・本文（16/1.75 #000） */
.feature .look [class$="__copy"], .feature .muffler__copy { text-align: center; font-size: 1.8rem; line-height: 1.56; color: #000002; }
.feature .look [class$="__lead"], .feature .muffler__lead { text-align: center; font-size: 1.6rem; line-height: 1.75; color: #000; }

/* ===== クレジット(credit.inc相当) =====
   構造は固定（ul.credit > li.item > a.link > span.txt + span.price・§8-3）。
   支給は Noto Serif JP 16px #8E8E8E・下線つき＝キット外なのでしっぽり明朝で仮置き（要確認リスト 1-1）。
   行構成はカンプの改行を器幅の自然折り返しで作る（<br> 禁止）＝器幅は tune-credits が実フォントで出す。 */
.feature .credit { display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start;
  column-gap: .8rem; line-height: 2.4rem; margin-left: auto; margin-right: auto; }
.feature .credit .item { position: relative; line-height: 2.4rem; white-space: nowrap; }
.feature .credit .link { font-size: 1.6rem; color: #8E8E8E; text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.feature .credit .item.-noline .link { text-decoration: none; } /* クレジットリストに品番URLが無い項目 */

/* ============================================================
   ▼Down Muffler
   ============================================================ */
.feature .muffler__photo { margin-top: 8rem; width: 35rem; height: 45rem; margin-left: 10.5rem; overflow: clip; }
.feature .muffler__photo img { position: relative; left: -.498rem; width: 35.997rem; max-width: none; }
.feature .muffler__ttl { margin-top: 4rem; width: 17.488rem; margin-left: 19.3rem; }
.feature .muffler__copy { margin-top: 1.764rem; }
.feature .muffler__lead { margin-top: 0.9rem; }
.feature .muffler__credit { margin-top: 1.7rem; max-width: 17.5656rem; min-height: 2.4000rem; }
/* 商品名と価格の間の空き（カンプは空白1つ）＝本文に空白を書くと CMS の credit.inc（1つの型で全部を描く）で消えるので余白で持つ。
   0.26em＝しっぽり明朝の空白1つの実測（4.1px@16px） */
.feature .muffler__credit .price { margin-left: .26em; }

/* ============================================================
   ▼軽くて、暖かい。その理由。（灰色の囲み x56 y12146 448x304 #E5EAEE＝カンプ画素実測）
   ============================================================ */
.feature .why { margin-top: 8rem; position: relative; width: 44.8rem; height: 30.4rem; margin-left: 5.6rem; background: #E5EAEE; }
.feature .why__ttl { position: absolute; top: 2.5rem; left: 3.1rem; font-size: 2rem; line-height: 1.7; white-space: nowrap; }
.feature .why__txt { position: absolute; top: 7.3rem; left: 3.1rem; font-size: 1.6rem; line-height: 1.75; white-space: nowrap; }
/* 縦書きの飾り「WHY TAION?」asset-38＝SP面でも見えている（x474 y12159・カンプ画素実測。
   layout の x596 は回転入りで壊れた bounds＝引き継ぎの「PC専用」は誤り・phase6-prep-defects.md） */
.feature .why__deco { position: absolute; left: 41.8rem; top: 1.3rem; width: 3rem; }

/* ============================================================
   ▼末尾: All Items Check ＋ STAFF
   ============================================================ */
/* 枠は panels #54（261x42・線 #000002/1）＝CSS。文字は asset-39（SVG）を枠相対 (48, 11.3) */
.feature .allitems { margin-top: 8rem; width: 26.1rem; height: 4.2rem; margin-left: 14.9rem;
  border: max(1px, .1rem) solid #000002; }
.feature .allitems a { position: relative; height: 100%; }
.feature .allitems__svg { position: absolute; left: 4.8rem; top: 1.13rem; width: 16.308rem; }
/* 構成書 FONT シート＝Bodoni Moda Variable Italic（opsz 11・wght 400） */
.feature .staff { margin-top: 2.1rem; text-align: center; font-size: 1.4rem; line-height: 1.43; color: #000002;
  font-family: "bodoni-moda-variable", serif; font-style: italic; font-variation-settings: "opsz" 11, "wght" 400; }

/* スライダー（Splide 4）＝矢印・ドットは使わない（テンプレ既定 false）。
   外部CDNが届かなくても並びが保つ（slider-build 手順3の続き・#1744）。core CSS と同じ宣言＝見た目は変わらない */
.js-slider .splide__track { overflow: hidden; position: relative; z-index: 0; }
.js-slider .splide__list { display: flex; margin: 0; padding: 0; }
.js-slider .splide__slide { flex-shrink: 0; list-style-type: none; margin: 0; position: relative; }
/* JSが届かないときに見せる1コマの幅＝data-splide の fixedWidth と同じ 38rem・間 2rem
   ★間は起動前だけ（:not(.is-initialized)）＝起動後も残すと Splide の gap に上乗せされ、間が 4rem・先頭が 2rem 右へずれる */
.js-slider .splide__slide { width: 38rem; }
.js-slider:not(.is-initialized) .splide__slide + .splide__slide { margin-left: 2rem; }

/* ============================================================
   ▼PCブロック(751px以上) — 縮尺と、PC専用のフレームだけを持つ
   ============================================================ */
@media screen and (min-width: 751px) {
  /* ★基準はスクロールバーを除いた幅＝vw はスクロールバー（Windows で15px）を含むので、そのままだと
     見えている幅より約1%大きく組まれる（仕上げの指摘）。--sbw は js/script.js が実測して入れる（無ければ0） */
  /* ★1400px（スクロールバー抜き）で拡大を止める＝中身は以降固定サイズ・地色（.feature の背景）は100%のまま（仕上げの指示 2026-10-07） */
  html { font-size: calc(min(100vw - var(--sbw, 0px), 1400px) * 0.00714286); } /* 1rem=10px@1400（本文カラム560px÷56） */

  .feature .pc { display: block; }
  .feature .sp { display: none; }
  .feature .frame > .pc { display: contents; }

  /* --pcu＝1 PCカンプpx（左レールの寸法はこれで書く）／--rail-top＝USAGI の PC 追従ヘッダー高（固定値・§8-6-2） */
  .feature { --pcu: calc(min(100vw - var(--sbw, 0px), 1400px) / 1400); --rail-top: 80px; background: #D3E3ED; }

  /* 白い紙面は x140〜1260＝左レール560＋本文560。外側140pxずつに地色 #D3E3ED が見える */
  .feature .frame { display: flex; align-items: stretch; justify-content: center;
    width: calc(1120 * var(--pcu)); margin: 0 auto; background: #fff; }
  .feature .frame-main { flex: 0 0 auto; width: 56rem; }

  /* --- 左レール（指示 P2「TOP 固定表示」）＝sticky。fixed は使わない（docs/cms-embed.md §1） ---
     ★この案件のレールは「写真 560x680 ＋ 白地に見出し」＝写真で器を覆う型（テンプレの -mv）ではない。
       器は中身の高さのまま、**写真の高さだけ**を「カンプの680」と「窓の高さ − 追従ヘッダー − 見出しの分」の
       小さいほうにする＝低い窓でも見出しが画面に残る（§8-6-2・#1088 の意図）。 */
  .feature .frame-side { position: relative; flex: 0 0 auto; width: calc(560 * var(--pcu)); }
  .feature .frame-side__inner { --rail-h: calc(100vh - var(--rail-top));
    position: sticky; top: var(--rail-top); width: 100%; margin-bottom: calc(78.9 * var(--pcu)); }
  /* FV＝カンプの 560x680。窓が低いときは「見出しの分（50＋36＋50）」を残して縮める */
  .feature .frame-side .fv { aspect-ratio: auto; width: 100%;
    height: min(calc(680 * var(--pcu)), calc(var(--rail-h) - 136 * var(--pcu))); }
  /* 指示 P3「この文字部分をパートごとに切り替える」＝FV の下 50・左列の中央（PCカンプの LOOK1 状態） */
  .feature .railttl { position: relative; margin-top: calc(50 * var(--pcu)); height: calc(36 * var(--pcu)); }
  .feature .railttl__item { position: absolute; top: 0; left: 0; right: 0; opacity: 0; transition: opacity .6s cubic-bezier(0.33, 1, 0.68, 1); }
  .feature .railttl__item.is-shown { opacity: 1; }
  .feature .railttl__item img { margin: 0 auto; }
  .feature .railttl__item .-n1 { width: calc(285.77 * var(--pcu)); }
  .feature .railttl__item .-n2 { width: calc(444.62 * var(--pcu)); }
  .feature .railttl__item .-n3 { width: calc(299.81 * var(--pcu)); }
  .feature .railttl__item .-n4 { width: calc(374.08 * var(--pcu)); }
  .feature .railttl__item .-n5 { width: calc(309.23 * var(--pcu)); }
  .feature .railttl__item .-n6 { width: calc(335.84 * var(--pcu)); }

  /* --- 本文の面差（PC は FV が左レールへ移る） ---
     走路の起点が紙面の上端になる＝TOP 矢印は PC y112（SP 771 − 660 + 1） */
  .feature .topmark { margin-top: 11.1rem; }
}
/* 面差＝本文1つ目の上余白。SP は FV 下端から 50・PC は紙面の上端から 70（PC カンプ y70）。
   ⚠ 上の .intro__ttl の margin-top は flow-margins が書き戻す値＝手で触らない。PC の打ち消しだけをここに置く */
@media screen and (min-width: 751px) {
  .feature .intro__ttl { margin-top: 7rem; }
}

/* CMS（EC Fulfillment System）が差し込むシステム通知を隠す（仕上げの指示・2026-10-06） */
.efs-system-notification {
  display: none !important;
}