/* 採用：環境を知る — 01 成長・FOR YOUR LIFE（2026-10-07 B2 → v2 2026-10-08 B1）
   v2: 見出し .env-head は rc-environment-base.css へ移した。旧 02（6 つのこと・たとえば・DIRECTORY）の規則は新しい DOM と名前が重なるので外した（控え backup/rc-environment-growth.css.v1_before_b1v2）。02 は rc-environment-benefits.css。
   持ち物: #growth（.env-step）・.env-life（FOR YOUR LIFE。共通マーキー .rc-marquee の上書き）。寸法の記法: rem＝Figma px ÷ 10。 */

/* ============================================================ 01 成長（#growth・Figma 2482〜3870・高さ 138.8rem） */
.rc-page-environment .env-growth{
  --env-head-label-x:105.8rem;--h-h:48.1rem;--h-en-top:24.5rem;--h-en-lh:4.42rem;--h-label-top:26.7rem;--h-rule-top:30.9rem;--h-catch-top:31.2rem;
  position:relative;padding-bottom:3.4rem;background:var(--env-paper)
}
/* STEP（左の列＋右の写真）。座標は .env-step の左上（＝右の写真の上端＝#growth の 48.1rem 下）基準。motion_check_env が行 4 の中心をクリックできる位置に収めるため、箱の上端は写真の上端に合わせた */
.rc-page-environment .env-step{position:relative;display:flow-root;min-height:81.5rem}
.rc-page-environment .env-step__s{position:absolute;left:57.8rem;top:-1.7rem;width:6.4rem;height:17.1rem;mix-blend-mode:hard-light;opacity:1;pointer-events:none}   /* 指示書は opacity .57。1 と並置して差の小さい方を採った（S の周りの文字の無い所の平均差 .94 → .42） */
.rc-page-environment .env-step__top{position:absolute;left:0;top:0;width:100%;height:0;margin:0}
.rc-page-environment .env-step__kicker{position:absolute;left:44.733rem;top:3.445rem;width:31.9rem;margin:0;font:600 2.853rem/2.85rem var(--serif);letter-spacing:.438rem;color:var(--env-ink-2);text-align:center;white-space:nowrap}
.rc-page-environment .env-step__title{position:absolute;left:40.95rem;top:7.675rem;width:39.6rem;margin:0;font:700 5.188rem/5.19rem var(--serif);letter-spacing:.265rem;color:var(--env-brown);text-align:center;white-space:nowrap}
/* 行の列 */
.rc-page-environment .env-step__list{position:relative;width:32.4rem;margin:17.383rem 0 0 43.637rem;padding:0;list-style:none}
.rc-page-environment .env-step__item{
  position:relative;display:flex;flex-wrap:wrap;align-items:flex-start;align-content:flex-start;box-sizing:border-box;width:32.4rem;min-height:16.6rem;padding-top:2.8rem;margin:0;
  color:var(--env-ink)
}
.rc-page-environment .env-step__item:nth-child(2){min-height:16.8rem}
.rc-page-environment .env-step__item:nth-child(3){min-height:16.4rem}
.rc-page-environment .env-step__item:last-child{min-height:12.4rem}
.rc-page-environment .env-step__item[aria-current="step"]{color:var(--env-brown)}
/* 炎の印・番号・｜LEARN（行の左上が原点）。炎の位置は行ごとに Figma の値 */
.rc-page-environment .env-step__flame{position:absolute;left:-5.176rem;top:-1.983rem;width:1.709rem;height:4.916rem;pointer-events:none}
.rc-page-environment .env-step__item:nth-child(2) .env-step__flame{left:-5.299rem;top:-2.7rem;width:2.055rem;height:4.97rem}
.rc-page-environment .env-step__item:nth-child(3) .env-step__flame{left:-5.3rem;top:-2.4rem;width:2.429rem;height:4.48rem}
.rc-page-environment .env-step__item:nth-child(n+4) .env-step__flame{left:-6rem;top:-2.1rem;width:3.503rem;height:5.196rem}
.rc-page-environment .env-step__num{position:absolute;left:.55rem;top:.5rem;width:3.6rem;height:2.7rem;color:inherit}
.rc-page-environment .env-step__num-svg,.rc-page-environment .env-step__num svg{display:block;width:100%;height:100%}
.rc-page-environment .env-step__num--text{width:auto;height:auto;top:0;font:400 3.465rem/3.46rem var(--cormorant);white-space:nowrap}
.rc-page-environment .env-step__en{position:absolute;left:4.411rem;top:1.753rem;width:max-content;min-width:5.389rem;font:600 max(1.058rem,12px)/1.609rem var(--cormorant);letter-spacing:.169rem;text-align:center;white-space:nowrap}   /* F2-3: 英字ラベルの下限 → F5 で 12px（｜LEARN。1920 は 10.58px のまま） */
.rc-page-environment .env-step__name{flex:none;font:600 3.4rem/5.1rem var(--serif);padding-left:.55rem;white-space:nowrap}
.rc-page-environment .env-step__catch{flex:1 1 0;min-width:0;margin:1.4rem 0 0 .8rem;font:500 max(1.3rem,12px)/max(3.23rem,1.45em) var(--serif)}   /* F2-3: 本文の下限 11px → 12px（1920 は 13px のまま） */
.rc-page-environment .env-step__item:nth-child(2) .env-step__catch{margin-left:.55rem;margin-top:1.2rem}
.rc-page-environment .env-step__catch:has(br){margin-top:1.2rem;line-height:max(1.4rem,1.08em)}
@media (min-width:1024px) and (orientation:landscape), (min-width:1367px){.rc-page-environment .env-step__catch{margin-top:1.2rem;line-height:max(1.4rem,1.08em)}.rc-page-environment .env-step__item:nth-child(2) .env-step__catch{margin-top:1.2rem}}   /* MU-11（2026-10-15・松浦さんFB No.11「4つの成長STEP 行間バラバラ」）: 小見出しは改行入りの 02 だけ行が詰めてあり、1 行前提の 01・03・04 は行が 3.23rem（高い）で、幅が狭いと自動で 2 行に折れて行の間が大きく空いていた→4 つとも 02 と同じ行の高さ・上の余白に。PC */
/* 線（2 状態を 2 枚の擬似要素の不透明度で入れ替え） */
.rc-page-environment .env-step__rule{position:relative;flex:0 0 100%;height:max(.1rem,1px);margin:.3rem 0 0;background:none}
.rc-page-environment .env-step__rule::before,.rc-page-environment .env-step__rule::after{content:"";position:absolute;inset:0;transition:opacity .5s var(--env-io)}
.rc-page-environment .env-step__rule::before{background:linear-gradient(90deg,#d2d2d2,#424242);opacity:1}
.rc-page-environment .env-step__rule::after{background:linear-gradient(90deg,#c8b89f,#c88e32);opacity:0}
.rc-page-environment .env-step__item[aria-current="step"] .env-step__rule::before{opacity:0}
.rc-page-environment .env-step__item[aria-current="step"] .env-step__rule::after{opacity:1}
.rc-page-environment .env-step__desc{flex:0 0 100%;box-sizing:border-box;margin-top:.6rem;padding-left:.45rem;font:400 var(--env-t12)/max(1.7rem,1.42em) var(--sans)}
/* 縦のつなぎ線（行ごとの区間と色は Figma の値。最後の行は透明へ） */
.rc-page-environment .env-step__item::before{content:"";position:absolute;left:-4.237rem;width:max(.073rem,1px);pointer-events:none}
.rc-page-environment .env-step__item:nth-child(1)::before{top:4.628rem;height:8.722rem;background:linear-gradient(180deg,#c8b89f,#c88e32)}
.rc-page-environment .env-step__item:nth-child(2)::before{top:3.1rem;height:10.7rem;background:linear-gradient(180deg,#c88e32,#cd953b)}
.rc-page-environment .env-step__item:nth-child(3)::before{top:3.3rem;height:10.4rem;background:linear-gradient(180deg,#cd953b,#cc830e)}
.rc-page-environment .env-step__item:nth-child(n+4)::before{top:4.2rem;height:10.15rem;background:linear-gradient(180deg,#cd953b 78%,transparent)}
/* 行の全面ボタン（押す場所） */
.rc-page-environment .env-step__hit{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;background:none;border:0;border-radius:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.rc-page-environment .env-step__hit:focus-visible{outline:max(.2rem,2px) solid var(--env-gold-2);outline-offset:.4rem}
/* SEL-B05（2026-10-14・文字選択）原因: 行の全面ボタン .env-step__hit（inset:0）が li の文字（英字ラベル・名前・キャッチ・説明）の上に重なり、なぞる操作がボタンに当たって文字を選べなかった。
   文字を持つ 4 つの子をボタンより上に出す（z-index:1。英字ラベルは名前の字体の高さにかぶるので 2）。位置はずらさない（relative は offset なし・en は元から absolute）。
   押す・ホバー・タップでの切り替えは同じ: ホバーは li の pointerenter なので文字の上でも効く・クリック／タップは rc-environment-growth.js が li でも受ける（SEL-B05）。ボタンのフォーカス（キーボード）は変えない */
.rc-page-environment .env-step__item>:is(.env-step__name,.env-step__catch,.env-step__desc){position:relative;z-index:1}
.rc-page-environment .env-step__item>.env-step__en{z-index:2}
@media (hover:hover) and (pointer:fine){.rc-page-environment .env-step__item{cursor:pointer}}   /* v2-F6: ホバーで切り替え。ボタン以外の所でも手（浮き・拡大は付けない） */
/* 現物: 21st feature-section（research/動き_STEP_21st.md・FeatureSteps_reconstructed.tsx 34〜40 行）opacity .3⇄1・0.5s。曲線は写真と同じ framer easeInOut。
   F1: li には opacity を付けない（指示書 G-5「炎は常に不透明」。炎の印 .env-step__flame と縦のつなぎ線 li::before は今の行でなくても濃いまま＝炎は 01 の小さな火から 04 の大きな火へ育つ絵）。
   薄くするのは文字の子だけ（値と動きは従来の li と同じ .3⇄1・.5s var(--env-io)）。li の color の変化（今の行 #624f2d）はそのまま。.env-step__hit は触らない */
.rc-page-environment .env-step__item{transition:color .5s var(--env-io)}
.rc-page-environment .env-step__num,.rc-page-environment .env-step__en,.rc-page-environment .env-step__name,.rc-page-environment .env-step__catch,.rc-page-environment .env-step__rule,.rc-page-environment .env-step__desc{opacity:.3;transition:opacity .5s var(--env-io)}
.rc-page-environment .env-step__item[aria-current="step"] .env-step__num,.rc-page-environment .env-step__item[aria-current="step"] .env-step__en,.rc-page-environment .env-step__item[aria-current="step"] .env-step__name,.rc-page-environment .env-step__item[aria-current="step"] .env-step__catch,.rc-page-environment .env-step__item[aria-current="step"] .env-step__rule,.rc-page-environment .env-step__item[aria-current="step"] .env-step__desc{opacity:1}
/* ENV-FLAME（2026-10-30・先方FB「炎もホバーしてるところだけ色ついて、他は薄くなってるようにしたい」）: F1（炎は常に不透明）をやめ、炎の印も今の行（ホバー中・自動送りの今）だけ色付き。
   ほかの行の炎は色を抜いて薄く（灰色＋.35）。切り替えの速さは文字と同じ .5s。縦のつなぎ線（li::before）は濃いまま */
.rc-page-environment .env-step__flame{opacity:.35;filter:grayscale(1);transition:opacity .5s var(--env-io),filter .5s var(--env-io)}
.rc-page-environment .env-step__item[aria-current="step"] .env-step__flame{opacity:1;filter:none}
/* 右の写真の枠 */
.rc-page-environment .env-step__media{position:absolute;left:89.4rem;top:0;width:63.9rem;height:81.5rem;border-radius:1.956rem;overflow:hidden;background:rgba(231,235,246,.2)}
/* 現物: 同 62〜72 行。exit {y:-100,opacity:0,rotateX:20} → initial {y:100,opacity:0,rotateX:-20} → animate {y:0,opacity:1,rotateX:0}・0.5s easeInOut・mode wait（perspective なし＝原文どおり） */
.rc-page-environment .env-step__ph{position:absolute;inset:0;margin:0;opacity:0;translate:0 10rem;transform:rotateX(-20deg);transition:opacity .5s var(--env-io),translate .5s var(--env-io),transform .5s var(--env-io)}
.rc-page-environment .env-step__ph.is-current{opacity:1;translate:0 0;transform:none}
.rc-page-environment .env-step__ph.is-leaving{opacity:0;translate:0 -10rem;transform:rotateX(20deg)}
.rc-page-environment .env-step__img{display:block;width:100%;height:100%;object-fit:cover}
.rc-page-environment .env-step__grad{position:absolute;inset:0;background:linear-gradient(0deg,rgba(191,160,90,.92) 0%,rgba(191,160,90,0) 10%);pointer-events:none}
.rc-page-environment .env-growth__note{margin:3.6rem 0 0 36rem;width:120rem;font:400 max(1.6rem,13px)/max(2.2rem,1.375em) var(--sans)}

/* v2 STEP の今の行（aria-current="step"）だけ太く（Figma の静止＝01 が今の行。｜LEARN 700・名 900・キャッチ 700・説明 700）。和文は全角で幅が変わらない＝行の高さは変わらない（func/environment-growth.js F で 4 行とも測る） */
.rc-page-environment .env-step__item[aria-current="step"] .env-step__en{font-weight:700}
.rc-page-environment .env-step__item[aria-current="step"] .env-step__name{font-weight:900}
.rc-page-environment .env-step__item[aria-current="step"] .env-step__catch{font-weight:700}
.rc-page-environment .env-step__item[aria-current="step"] .env-step__desc{font-weight:700}
/* v2 STEP ごとのグラデ（Figma 496:240691／496:240694 の stops: 下 .92 → 上 0 が 24.04%／48.56%。1・4 は今の 10%）。写真ごと（figure の data-step）に当てる＝退場中の写真のグラデが先に変わらない。.env-step[data-cur] は JS が付ける現在地（検収用） */
.rc-page-environment .env-step__ph[data-step="2"] .env-step__grad{background:linear-gradient(0deg,rgba(191,160,90,.92) 0%,rgba(191,160,90,0) 24.04%)}
.rc-page-environment .env-step__ph[data-step="3"] .env-step__grad{background:linear-gradient(0deg,rgba(191,160,90,.92) 0%,rgba(191,160,90,0) 48.56%)}

/* ============================================================ FOR YOUR LIFE（.env-life・Figma 3870〜4428） */
.rc-page-environment .env-life{position:relative;height:55.8rem;overflow:visible;overflow-x:clip;background:var(--env-paper)}
.rc-page-environment .env-life .env-word{left:-5.236rem;top:3.5rem}
/* v2 FOR YOUR LIFE は共通マーキー（.rc-marquee＋data-rc-marquee。rc-common.js が 1 組複製して 40s linear で流す・no-motion は複製なし＝静止）。共通の大きさ・色を今の見た目（上の .env-word）に戻す（詳細度 0,4,0・共通ファイルは変えない） */
.rc-page-environment .env-life.rc-marquee{height:55.8rem;overflow:hidden;background:var(--env-paper)}
.rc-page-environment .env-life.rc-marquee .rc-marquee__track{left:-5.236rem;top:3.5rem;bottom:auto}
.rc-page-environment .env-life.rc-marquee .rc-marquee__set{position:static;margin:0;font:600 25.6rem/48.64rem var(--cormorant);letter-spacing:1.536rem;color:var(--env-ink);-webkit-text-fill-color:var(--env-ink);-webkit-text-stroke:0}


/* PC の縮小（1024〜1499）: 文字の下限で 1 行の字数が減るので、決め打ちでない折り返しは文節で。1920 は Figma の折り返しのまま */
@media (min-width:1024px) and (max-width:1499px) and (orientation:landscape), (min-width:1367px) and (max-width:1499px){
  .rc-page-environment .env-step__desc,.rc-page-environment .env-step__catch,.rc-page-environment .env-growth__note{word-break:auto-phrase;text-wrap:pretty}
}

/* ============================================================ SP（≤1023）。PC の構図を縦積み */
@media (max-width:1023px), (max-width:1366px) and (orientation:portrait){
  .rc-page-environment .env-growth{padding-bottom:6rem}
  .rc-page-environment .env-step{display:flex;flex-direction:column;min-height:0;margin-top:4rem;padding:0 var(--gut)}
  .rc-page-environment .env-step__s{display:none}
  .rc-page-environment .env-step__media{position:relative;left:auto;top:auto;order:-1;width:100%;height:auto;aspect-ratio:639/815;max-height:56rem;margin:0 auto}
  .rc-page-environment .env-step__top{position:static;height:auto;margin:4rem 0 3rem;text-align:center}
  .rc-page-environment .env-step__kicker,.rc-page-environment .env-step__title{position:static;width:auto}
  .rc-page-environment .env-step__kicker{font:600 1.5rem/1.6 var(--serif);letter-spacing:.2rem}
  .rc-page-environment .env-step__title{margin-top:.6rem;font:700 2.8rem/1.3 var(--serif);letter-spacing:.1rem}
  .rc-page-environment .env-step__list{position:static;width:auto;margin:0}
  .rc-page-environment .env-step__item,.rc-page-environment .env-step__item:nth-child(n){width:auto;min-height:0;padding:1.2rem 0 2.4rem 4.4rem}
  .rc-page-environment .env-step__item::before,.rc-page-environment .env-step__item:nth-child(n)::before{left:1.2rem;top:4.8rem;bottom:-1.2rem;height:auto}
  .rc-page-environment .env-step__item:last-child::before{bottom:2rem}
  .rc-page-environment .env-step__flame,.rc-page-environment .env-step__item:nth-child(n) .env-step__flame{left:0;top:.6rem;width:2.4rem;height:4rem;object-fit:contain}
  .rc-page-environment .env-step__num{left:4.4rem;top:1.4rem}
  .rc-page-environment .env-step__en{left:8.4rem;top:2.6rem}
  .rc-page-environment .env-step__name{padding:3.4rem 0 0;font-size:2.4rem;line-height:1.5}
  .rc-page-environment .env-step__catch,.rc-page-environment .env-step__item:nth-child(2) .env-step__catch,.rc-page-environment .env-step__catch:has(br){margin:3.8rem 0 0 .8rem;font:500 max(1.2rem,12px)/1.5 var(--serif)}
  .rc-page-environment .env-step__rule{margin-top:.6rem}
  .rc-page-environment .env-step__desc{margin-top:.8rem;padding-left:0;font:400 max(1.2rem,12px)/1.7 var(--sans)}
  .rc-page-environment .env-step__hit{min-height:4.4rem}
  .rc-page-environment .env-growth__note{margin:0;padding:0 var(--gut);width:auto;font:400 max(1.1rem,11px)/1.8 var(--sans)}
  .rc-page-environment .env-life{height:16rem}
  .rc-page-environment .env-life .env-word{left:-1rem;top:0;font-size:9rem;line-height:16rem;letter-spacing:.5rem}
  .rc-page-environment .env-life.rc-marquee{height:16rem}
  .rc-page-environment .env-life.rc-marquee .rc-marquee__track{left:-1rem;top:0}
  .rc-page-environment .env-life.rc-marquee .rc-marquee__set{font-size:9rem;line-height:16rem;letter-spacing:.5rem}
  .rc-page-environment .env-step__en{font-size:max(1.1rem,12px)}
  .rc-page-environment .env-head__catch,.rc-page-environment .env-step__desc,.rc-page-environment .env-step__catch,.rc-page-environment .env-growth__note{word-break:auto-phrase;text-wrap:pretty}
}
/* FB-04（2026-10-09・実装FBシート No.4「1024〜1280px で文字に下限」）: 文字だけに下限。STEP のキャッチ（.env-step__catch）はラベル扱いで 12px のまま（14px だと 2 行が 4 行に割れる）。1281px 以上と SP は今のまま */
@media (min-width:1024px) and (max-width:1280px) and (orientation:landscape){
  .rc-page-environment .env-step__desc{font-size:max(1.2rem,14px)}
}


/* ============================================================ SP-PIN（2026-10-16・本人「SP 版のここ。スクロールで画面は動かずに写真と文字が切り替わるようにしてほしい」＝Lark 010 への答えとして Figma 820:2（SP の Frame）に描かれた形）
   rc-environment-growth.js が SP・動きあり・高さ 600px 以上のときだけ .env-step を外箱 .env-step-track で包み is-pin を付ける（印が無い＝no-motion・reduced・JS なし・低い画面・PC では下の規則は効かない＝今のまま）。
   外箱の高さ＝止める画面（--egs-h＝画面−目次バー−下の固定バー）＋1 STEP の量（画面の高さ×.7）×STEP 数（--egs-n は JS が入れる）。.env-step を目次バーの下に sticky で止め、
   見出し→写真→今の STEP の 1 行（Figma 820:2 の y66〜1088。寸法は Figma px×.052rem＝750 幅を 39rem に）を上下の真ん中に。写真は低い画面では縦だけ縮む（object-fit:cover）。
   写真は opacity のクロスフェード .5s、文字は消える .3s → 出る .5s（.15s 後）。曲線は既存の var(--env-io)。 */
@media (max-width:1023px), (max-width:1366px) and (orientation:portrait){
  .rc-page-environment .env-step-track.is-pin{
    --egs-vh:100vh;--egs-top:6.4rem;--egs-bot:calc(var(--bar,7.2rem) + var(--safe,0px));
    --egs-h:calc(var(--egs-vh) - var(--egs-top) - var(--egs-bot));
    position:relative;margin-top:4rem;height:calc(var(--egs-h) + var(--egs-vh) * .7 * var(--egs-n,4))
  }
  @supports (height:100svh){.rc-page-environment .env-step-track.is-pin{--egs-vh:100svh}}   /* iPhone のツールバーの出入りで高さが変わらない方 */
  .rc-page-environment .env-step-track.is-pin>.env-step{position:sticky;top:var(--egs-top);height:var(--egs-h);box-sizing:border-box;margin-top:0;padding:1rem var(--gut) calc(1.6rem + max(5.2rem,44px));justify-content:center;overflow:hidden;background:var(--env-paper)}   /* 下の余白＝右下の TOP ボタン（rc-crumbs.css 42 行: 下の固定バーの上 1.2rem・高さ max(5.2rem,44px)）＋.4rem にかからない分。背景は S の hard-light の下地（sticky は重なりの単位を作る） */
  .rc-page-environment .env-step-track.is-pin .env-step__s{display:block;position:relative;left:auto;top:auto;order:0;flex:none;align-self:center;width:4.32rem;height:11.44rem;margin:-3.43rem 0 -8.01rem;object-fit:contain}   /* Figma 820:7666（x337 y66 83×220）。見出しの上に 3.43rem はみ出す。上下の margin で高さ 0 扱い（低い画面で写真を削らない・はみ出しは上の余白に） */
  .rc-page-environment .env-step-track.is-pin .env-step__top{order:1;position:relative;z-index:1;flex:none;margin:0}
  .rc-page-environment .env-step-track.is-pin .env-step__kicker{font-size:1.91rem;line-height:1.2;letter-spacing:.15em}   /* Figma 36.77px */
  .rc-page-environment .env-step-track.is-pin .env-step__title{margin-top:.6rem;font-size:3.48rem;line-height:1.2;letter-spacing:.05em}   /* Figma 66.87px */
  .rc-page-environment .env-step-track.is-pin .env-step__media{order:2;flex:0 1 auto;height:auto;min-height:0;max-height:none;aspect-ratio:639/483;align-self:center;width:calc(100% - 2.4rem);margin:min(3.7rem, var(--egs-vh) * .034) 0 0;border-radius:1.02rem}   /* Figma 820:7754 639×483・角 19.56。幅は stretch＋左右 margin にしない（WebKit は margin 込みの幅で縦横比を取り 1 割高くなる） */
  .rc-page-environment .env-step-track.is-pin .env-step__ph,.rc-page-environment .env-step-track.is-pin .env-step__ph.is-leaving{translate:none;transform:none;transition:opacity .5s var(--env-io)}
  .rc-page-environment .env-step-track.is-pin .env-step__ph.is-leaving{opacity:0}
  .rc-page-environment .env-step-track.is-pin .env-step__img{object-position:50% 30%}   /* 横長に切るので顔が入る高さへ（Figma の切り取りは 01＝38%・02＝25%・03＝20% 相当） */
  .rc-page-environment .env-step-track.is-pin .env-step__list{order:3;display:grid;flex:none;margin:.4rem 0 0}
  .rc-page-environment .env-step-track.is-pin .env-step__item{grid-area:1/1;padding:0 0 0 4.6rem;visibility:hidden;opacity:0;transition:opacity .3s var(--env-io),visibility 0s linear .3s,color .5s var(--env-io)}
  .rc-page-environment .env-step-track.is-pin .env-step__item[aria-current="step"]{visibility:visible;opacity:1;transition:opacity .5s var(--env-io) .15s,visibility 0s,color .5s var(--env-io)}
  .rc-page-environment .env-step-track.is-pin .env-step__item::before{left:.65rem;top:6rem;bottom:0}   /* 縦の線（Figma 820:7722 x51）。1 行ずつなので次の行へはつながない */
  .rc-page-environment .env-step-track.is-pin .env-step__item .env-step__flame{top:0;left:calc(.65rem - var(--fw) / 2);width:var(--fw);height:var(--fh);object-fit:contain}
  .rc-page-environment .env-step-track.is-pin .env-step__item:nth-child(1) .env-step__flame{--fw:1.61rem;--fh:4.63rem}   /* Figma 炎 01 31×89・02 37×90・03 44×81・04 64×94（×.052） */
  .rc-page-environment .env-step-track.is-pin .env-step__item:nth-child(2) .env-step__flame{--fw:1.92rem;--fh:4.68rem}
  .rc-page-environment .env-step-track.is-pin .env-step__item:nth-child(3) .env-step__flame{--fw:2.29rem;--fh:4.21rem}
  .rc-page-environment .env-step-track.is-pin .env-step__item:nth-child(n+4) .env-step__flame{--fw:3.33rem;--fh:4.89rem}
  .rc-page-environment .env-step-track.is-pin .env-step__num{left:5.1rem;top:1.9rem}
  .rc-page-environment .env-step-track.is-pin .env-step__en{left:8.8rem;top:3.4rem}
  .rc-page-environment .env-step-track.is-pin .env-step__name{padding:4.52rem 0 0 .5rem;font-size:3.22rem;line-height:1.5}   /* Figma 61.83px・行 92.7 */
  .rc-page-environment .env-step-track.is-pin .env-step__catch{margin:6.49rem 0 0 .8rem;font-size:max(1.23rem,12px);line-height:1.5}   /* 1 行: Figma の中心（名前の中心＋.47rem） */
  .rc-page-environment .env-step-track.is-pin .env-step__catch:has(br){margin-top:6.35rem;line-height:1.08}   /* 2 行（02）: 名前の中心にそろえる（Figma 行 25.46） */
  .rc-page-environment .env-step-track.is-pin .env-step__rule{margin-top:.26rem}
  .rc-page-environment .env-step-track.is-pin .env-step__desc{margin-top:.68rem;padding-left:.5rem;font-size:max(1.13rem,12px);line-height:1.45}   /* Figma 21.82px・行 30.9 */
}