@charset "utf-8";
/* =====================================================================
   採用クロストーク /recruit/crosstalk/ — 上半分（ヒーロー・導入・固定バー・ほかのページ）＋ページ全体の変数
   2026-10-06 B1（Opus）。正本: recruit_crosstalk_20261006/design/
     裁定_メイン_20261006.md（M0〜M12）＞ 正誤_A検収.md ＞ 設計図_v1.md・設計図_セクション.md（H／I／N／O）・設計図_動き.md（M-1〜M-10・M-6 新版・M-12・M-19）
   ・寸法は rem（PC: 1920 で 1rem=10px＝Figma px ÷ 10）。SP（≤1023）は末尾。
   ・動きは html.motion のときだけ（隠す初期状態は html.motion … :not(.is-in) の下）。ホバーは @media (hover:hover) の中。
   ・共通部品（.site-header・.rc-cta・.rc-footer・.rc-btn・.rc-head）は上書きしない。
   ・B2（rc-crosstalk-talk.css）は下の --ct-* と .ct-sr・.ct-talks の地・四つ角の色を使う（B2 は書かない）。
   ===================================================================== */

/* ---------- 0. ページ全体の変数（B2 も使う） ---------- */
.rc-page-crosstalk{
  --ct-ink:#000;--ct-bar:#141414;--ct-paper:#f0ede6;--ct-paper-2:#eae6dc;
  --ct-gold:#caaa6e;--ct-gold-2:#bfa05a;--ct-gold-3:#d4b96a;
  --ct-brown:#624f2d;--ct-brown-2:#947842;--ct-brown-3:#796d55;
  --ct-cream:#ffe7ba;--ct-peach:#ffcc93;--ct-wm:rgba(208,200,164,.5);
  --ct-wipe:1s cubic-bezier(.22,1,.36,1);                 /* 現物: meisei common.css .c-title-a__jp */
  --ct-pow1:linear(0,.19,.36,.51,.64,.75,.84,.91,.96,.99,1);   /* 現物: GSAP power1.out を 0.1 刻みで写した */
  --mo-in:cubic-bezier(0,.31,.18,.99);                   /* ui-motion-borrow 署名（520ms） */
  --mo-brake:cubic-bezier(.87,.05,.02,.97);              /* ui-motion-borrow 署名（820ms） */
  --ct-card-ease:cubic-bezier(.4,0,.2,1)                 /* Tailwind 既定／TOP vcard */
}
@supports not (transition-timing-function:linear(0,1)){
  .rc-page-crosstalk{--ct-pow1:cubic-bezier(.25,.46,.45,.94)}
}

/* ---------- 0-2. 共有の部品（B2 も使う） ---------- */
.rc-page-crosstalk .ct-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* 対話の地（Figma section#ct-next #f0ede6＋放射）。固定バーの sticky の親＝overflow を付けない */
.rc-page-crosstalk .ct-talks{position:relative;isolation:isolate;background:var(--ct-paper) radial-gradient(ellipse 50% 50% at 50% 50%,rgba(191,160,90,.2) 0%,rgba(191,160,90,0) 70%)}
/* 四つ角（問いの枠・メンバー写真・名言）の色と戻りの動き。現物: rc-common.css 147〜161 行（±.7rem・#d4b87a・.3s ease-out） */
.rc-page-crosstalk :is(.ct-q__c,.ct-corner,.ct-quote__br){color:var(--ct-gold);transition:translate .3s ease-out,color .3s ease-out}   /* ease-out＝現物 rc-common.css の写し */
.rc-page-crosstalk .ct-quote__br{color:var(--ct-gold-2)}   /* 名言のかっこだけ Figma #bfa05a（T-6d） */
@media (hover:hover){
  html.motion .rc-page-crosstalk [data-rc-corners]:hover :is(.ct-q__c,.ct-corner,.ct-quote__br){color:#d4b87a}
}

/* =====================================================================
   H. ヒーロー（section.ct-hero・92rem・地 #000）設計図_セクション H／正誤 1（見出しは回転なし）・正誤 2（M-6）
   ===================================================================== */
/* fix3（裁定 M15・本人「ここ下層とかと一緒で背景を透過してほしい」）: 炎の縁（.ct-intro__edge・2118×574＝57.4rem）の全体をヒーローの絵の上に乗せ、
   縁の透けた所からヒーローが見えるようにする。導入の黒は縁が塞がる 330〜372 行（縁の上端から 33〜37.2rem）で透明→不透明（下層 rc-common.css の .rc-hero-cover+* と同じ値）。
   ステージ --ct-st＝max(124rem,100vh): 縁の上端（ステージの下端 − 37.2rem）が「本音」の黒箱の下端 85.2rem から 1.6rem あく最小（86.8＋37.2＝124）。100vh で最初の画面の下に黒い面を出さない（TOP の stage と同じ max(…,100vh)）。
   --ct-cv-a／-b＝導入の上端から黒が始まる所（縁の top −10rem＋33／37.2rem）。導入をその分（-b）ヒーローに重ね、黒の上端＝ヒーローの下端にする */
.rc-page-crosstalk{--ct-st:max(124rem,100vh);--ct-cv-a:calc(var(--ct-edge-top,-10rem) + 33rem);--ct-cv-b:calc(var(--ct-edge-top,-10rem) + 37.2rem)}
.rc-page-crosstalk .ct-hero{height:var(--ct-st);background:var(--ct-ink);overflow:clip}
.rc-page-crosstalk .ct-hero__stage{position:relative;height:var(--ct-st);overflow:hidden;isolation:isolate;background:var(--ct-ink)}
.rc-page-crosstalk .ct-hero__bg{position:absolute;inset:0}
/* H-2 写真（楕円マスクは正誤 (a) の値）。fix3: 箱は 92rem のまま（object-fit:cover の構図を変えない。楕円は 90.6rem で透明になる＝その下は桃の覆いの色でつながる） */
.rc-page-crosstalk .ct-hero__photo-mask{position:absolute;inset:0 0 auto;height:92rem;
  -webkit-mask-image:radial-gradient(99.84rem 55.14rem at 136.87rem 35.46rem,#000 52%,transparent 100%);
  mask-image:radial-gradient(99.84rem 55.14rem at 136.87rem 35.46rem,#000 52%,transparent 100%)}
.rc-page-crosstalk .ct-hero__photo{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;transform-origin:50% 45%}
.rc-page-crosstalk .ct-hero__photo--acf{object-position:31% 43%}
/* H-3 桃の覆い */
.rc-page-crosstalk .ct-hero__tint{position:absolute;inset:0;background:var(--ct-peach);opacity:.53}
/* H-4 網点 3 層（canvas も同じ class＝M-3） */
.rc-page-crosstalk .ct-hero__dots{position:absolute;max-width:none}
.rc-page-crosstalk .ct-hero__dots--1{left:109.5rem;top:0;width:82.5rem;height:91rem;opacity:.55}
.rc-page-crosstalk .ct-hero__dots--2{left:0;top:0;width:46.25rem;height:91.7rem;opacity:.31}
.rc-page-crosstalk .ct-hero__dots--3{left:0;top:0;width:162.75rem;height:92rem;opacity:.31}
/* fix3: 網点を縁の下まで敷く（同じ画像を上下に裏返して元の下端に続ける＝継ぎ目で粒がつながる。層 1 の translate も同じ class で掛かる。WebGL の揺れは img だけ） */
.rc-page-crosstalk .ct-hero__dots--ext{display:block;background:0 0/100% 100% no-repeat;transform:scaleY(-1);pointer-events:none}
.rc-page-crosstalk .ct-hero__dots--ext.ct-hero__dots--1{top:91rem;background-image:url(../../images/recruit/rc-crosstalk-hero-dots-1.webp)}
.rc-page-crosstalk .ct-hero__dots--ext.ct-hero__dots--2{top:91.7rem;background-image:url(../../images/recruit/rc-crosstalk-hero-dots-2.webp)}
.rc-page-crosstalk .ct-hero__dots--ext.ct-hero__dots--3{top:92rem;background-image:url(../../images/recruit/rc-crosstalk-hero-dots-3.webp)}
/* H-7 CROSS／TALK（同じ 1740×617 の SVG を 2 つ。行ごとの箱＝A2 geometry.json hero-title.lines を全体の箱に対する % で） */
.rc-page-crosstalk .ct-hero__word{position:absolute;left:11.3rem;top:19rem;width:174rem;height:61.7rem;z-index:3;pointer-events:none}
.rc-page-crosstalk .ct-hero__word-line{position:absolute;display:block}
.rc-page-crosstalk .ct-hero__word-svg{position:absolute;display:block;max-width:none}
.rc-page-crosstalk .ct-hero__word-line--1{left:2.1264%;top:20.7455%;width:39.0230%;height:26.5802%}          /* l1 15.0,31.8 67.9×16.4rem */
.rc-page-crosstalk .ct-hero__word-line--1 .ct-hero__word-svg{left:-5.4492%;top:-78.0488%;width:256.2592%;height:376.2195%}
.rc-page-crosstalk .ct-hero__word-line--2{left:15.1724%;top:52.0259%;width:32.0115%;height:26.9044%}         /* l2 37.7,51.1 55.7×16.6rem */
.rc-page-crosstalk .ct-hero__word-line--2 .ct-hero__word-svg{left:-47.3968%;top:-193.3735%;width:312.3878%;height:371.6867%}
.rc-page-crosstalk .ct-hero__word-line:only-child{inset:0;width:auto;height:auto}                            /* SVG が 2 行に分かれていないとき */
.rc-page-crosstalk .ct-hero__word-line:only-child .ct-hero__word-svg{inset:0;width:100%;height:100%}
/* H-6 クロス（たいまつ組。soft-light は包みに＝正誤 5-1） */
.rc-page-crosstalk .ct-hero__cross{position:absolute;left:15.56rem;top:47.06rem;width:22.24rem;height:22.24rem;z-index:3;mix-blend-mode:soft-light;pointer-events:none}
.rc-page-crosstalk .ct-hero__cross-svg{display:block;width:100%;height:100%;overflow:visible}
.rc-page-crosstalk .ct-cross__l,.rc-page-crosstalk .ct-cross__r{transform-box:fill-box}
/* H-5 見出し（水平。置き場所は子ノードの TSV の箱＝正誤 1） */
.rc-page-crosstalk .ct-hero__title{position:absolute;inset:0;z-index:4;margin:0;font-family:var(--serif);font-weight:700;color:#fff;pointer-events:none}
.rc-page-crosstalk .ct-hero__title>span{position:absolute;display:block;white-space:nowrap;pointer-events:auto}   /* SEL-B07（2026-10-14・文字選択）原因: h1 が inset:0 で hero 全面を覆うため pointer-events:none（下の写真・網点に触れるように）。中の文字（採用担当／青山が切り込む／鯖江精機の／本音／REAL）も none を受け継ぎ、下の網点の canvas に当たって選べなかった→文字の箱（span）だけ auto。h1 自体は none のまま＝文字の箱の外はこれまでどおり下へ抜ける。箱の下に押せる物は無い（conflict_b.js で確認）。見た目は変えない */
.rc-page-crosstalk .ct-hero__t1{left:12.295rem;top:73.03rem;width:61.37rem;height:8.11rem;font-size:6.504rem;line-height:8.11rem;text-align:center;word-spacing:-.12em}   /* 407:23367（「採用担当」は override 3.71rem。空白は Figma では小さい字の側＝詰める） */
.rc-page-crosstalk .ct-hero__small{font-size:3.71rem;font-weight:700}
.rc-page-crosstalk .ct-hero__t2{left:76.06rem;top:71.01rem;width:48.81rem;height:10.26rem;font-size:9.734rem;line-height:10.26rem;text-align:center}   /* 407:23368 */
.rc-page-crosstalk .ct-hero__box{left:125.7rem;top:63.4rem;width:54.9rem;height:21.8rem}
.rc-page-crosstalk .ct-hero__band{position:absolute;inset:0;background:#000;transform-origin:0 50%}   /* Rectangle 427 */
.rc-page-crosstalk .ct-hero__honne{position:absolute;left:3.21rem;top:1.43rem;width:39.86rem;height:16.78rem;font-size:19.835rem;line-height:16.78rem;text-align:center;color:var(--ct-gold)}   /* 407:23370 */
.rc-page-crosstalk .ct-hero__real{position:absolute;left:39.52rem;top:1.75rem;width:13.77rem;height:19.12rem;font-size:6.767rem;line-height:13.77rem;text-align:center;color:var(--ct-gold);
  writing-mode:vertical-rl;text-orientation:sideways}   /* 407:23369（−90°＝上から下へ） */

/* ---- ヒーローの動き（設計図_動き 時間割・M-1／M-2／M-4／M-5。.is-in は JS が fonts.ready 後に付ける） ---- */
/* M-1 白文字スライド（現物: meisei .c-title-a__jp の clip-path・1s cubic-bezier(.22,1,.36,1)） */
html.motion .rc-page-crosstalk .ct-hero:not(.is-in) :is(.ct-hero__word-line,.ct-hero__t1,.ct-hero__t2){clip-path:polygon(0 0,0 0,0 100%,0 100%)}
html.motion .rc-page-crosstalk .ct-hero :is(.ct-hero__word-line,.ct-hero__t1,.ct-hero__t2){clip-path:polygon(0 0,150% 0,150% 100%,0 100%);transition:clip-path var(--ct-wipe)}
html.motion .rc-page-crosstalk .ct-hero .ct-hero__word-line--2{transition-delay:.15s}
html.motion .rc-page-crosstalk .ct-hero .ct-hero__t1{transition-delay:.45s}
html.motion .rc-page-crosstalk .ct-hero .ct-hero__t2{transition-delay:.6s}
/* M-2 たいまつ 2 本が左右から（現物無し → 署名 --mo-in 520ms。opacity は最初の 200ms） */
html.motion .rc-page-crosstalk .ct-hero:not(.is-in) .ct-hero__cross .ct-cross__l{translate:-14rem 0;opacity:0}
html.motion .rc-page-crosstalk .ct-hero:not(.is-in) .ct-hero__cross .ct-cross__r{translate:14rem 0;opacity:0}
html.motion .rc-page-crosstalk .ct-hero .ct-hero__cross :is(.ct-cross__l,.ct-cross__r){transition:translate .52s var(--mo-in) .3s,opacity .2s var(--mo-in) .3s}
/* M-4 黒帯（現物: sansei style.css @keyframes toRight .8s ease forwards を transform に写した）→ 本音・REAL（21st testimonials の easeOut） */
@keyframes ct-band-in{0%{transform:translateX(-20rem) scaleX(0)}100%{transform:translateX(0) scaleX(1)}}
html.motion .rc-page-crosstalk .ct-hero:not(.is-in) .ct-hero__band{transform:scaleX(0)}
html.motion .rc-page-crosstalk .ct-hero.is-in .ct-hero__band{animation:ct-band-in .8s ease .9s both}   /* ease＝現物 sansei toRight */
html.motion .rc-page-crosstalk .ct-hero:not(.is-in) :is(.ct-hero__honne,.ct-hero__real){opacity:0}
html.motion .rc-page-crosstalk .ct-hero :is(.ct-hero__honne,.ct-hero__real){transition:opacity .4s ease-out 1.5s}   /* ease-out＝現物 framer-motion easeOut */
/* M-5 写真が少し大きくなる（現物: corporate main.css fvKenburnsSP 8.5s cubic-bezier(.16,1,.3,1) を向きを逆に） */
@keyframes ct-hero-zoom{from{transform:scale(1)}to{transform:scale(1.1)}}
html.motion .rc-page-crosstalk .ct-hero.is-in .ct-hero__photo{animation:ct-hero-zoom 8.5s cubic-bezier(.16,1,.3,1) both}

/* M-6（新版・裁定 M12）ヒーロー → 導入: ステージを sticky で止め、導入（先頭が黒い炎の縁）が下から覆う。
   現物: TOP recruit.css 344〜348 行（html.mo #fv の高さ・.fv-stage の sticky）・421〜424 行（html.mo #philosophy／#mission の負の margin-top）。
   止める区間を 92rem 延ばし、同じだけ導入を上に重ねる＝導入以降の位置・全高は変えない。層の Osmo の速さは rc-crosstalk.js（osmoLayers）。
   no-motion・reduced-motion（＝html.motion が付かない）・SP では止めない */
/* fix3（M15-4）: 止める区間＝ステージ 1 枚分（--ct-st）。導入は静止の重なり（-b）にその分を足して重ねる＝導入の不透明な黒の上端が画面上端に届いた所ちょうどで止めが外れる
   （TOP の「次の地 .mi-gold が上端に届いた所」と同じ）。導入以降の位置は motion／no-motion で同じ */
@media (min-width:1024px) and (orientation:landscape), (min-width:1367px){
  html.motion .rc-page-crosstalk .ct-hero{height:calc(var(--ct-st) * 2);overflow:visible}
  html.motion .rc-page-crosstalk .ct-hero__stage{position:sticky;top:0;height:var(--ct-st);overflow:hidden}
  html.motion .rc-page-crosstalk .ct-intro{margin-top:calc(var(--ct-st) * -1 - var(--ct-cv-b))}
}

/* =====================================================================
   I. 導入（section.ct-intro・146.8rem・地 #000）設計図_セクション I
   ===================================================================== */
.rc-page-crosstalk .ct-intro{display:flow-root;background:var(--ct-ink);padding:39.9rem 0 10.4rem;color:#fff}   /* flow-root: 先頭の子の margin と負の margin-top の相殺を止める（A2 の注意） */
.rc-page-crosstalk .ct-intro{margin-top:calc(var(--ct-cv-b) * -1);background:linear-gradient(to bottom,transparent var(--ct-cv-a),var(--ct-ink) var(--ct-cv-b))}   /* fix3（M15-1）: 縁より上の導入は透明（縁の画像だけ）。黒は縁が塞がる所から＝下層の .rc-hero-cover+* の写し */
.rc-page-crosstalk .ct-intro__edge{position:absolute;left:-9.9rem;top:var(--ct-edge-top,-10rem);width:211.8rem;height:57.4rem;pointer-events:none;
  background:url(../../images/recruit/rc-crosstalk-edge-black.webp) 0 0/100% 100% no-repeat}   /* I-1（H-8）導入と一緒に動く */
.rc-page-crosstalk .ct-intro__glow{position:absolute;left:88.7rem;top:34.7rem;width:14.6rem;height:auto;max-width:none;pointer-events:none}   /* I-2 S の光 */
.rc-page-crosstalk .ct-intro__copy{position:relative;font:700 4.692rem/9.3rem var(--serif);letter-spacing:.198rem;padding-left:.198rem;text-align:center;color:#fff}   /* I-3 */
.rc-page-crosstalk .ct-intro__em{color:var(--ct-gold)}   /* 「火花」（420:46480 の override） */
/* I-4 問いの枠 */
.rc-page-crosstalk .ct-q{position:relative;width:58.4rem;margin:8.9rem auto 0;padding:2.83rem 2.94rem;text-align:center}
.rc-page-crosstalk .ct-q::before{content:"";position:absolute;inset:0 2.9rem;border:max(.109rem,1px) solid var(--ct-gold);mix-blend-mode:multiply;pointer-events:none}   /* Figma の矩形は MULTIPLY＝黒地では見えない（pc_frame どおり）。枠の線は四隅だけが見える */
.rc-page-crosstalk .ct-q__t{position:relative;font:700 3.6rem/4.4rem var(--serif);color:#fff;white-space:nowrap}   /* 420:209299（箱 44px） */
.rc-page-crosstalk .ct-q__c{position:absolute;width:1.959rem;height:1.5754rem;pointer-events:none}   /* q-corner 19.59×15.754（線の外側まで）。左上＝L の芯 − .1636rem */
.rc-page-crosstalk .ct-q__svg{display:block;width:100%;height:100%;overflow:visible}
.rc-page-crosstalk .ct-q__c--tl{left:-.164rem;top:-.083rem}
.rc-page-crosstalk .ct-q__c--tr{right:-.164rem;top:-.083rem;transform:scaleX(-1)}
.rc-page-crosstalk .ct-q__c--br{right:-.164rem;bottom:-.13rem;transform:scale(-1,-1)}
.rc-page-crosstalk .ct-q__c--bl{left:-.164rem;bottom:-.13rem;transform:scaleY(-1)}
/* I-5 カード 4 枚（写真の x 271／636／992／1348＝1→2 は 66.19・以降 57.19 の間。両端が 7.437rem 高い） */
.rc-page-crosstalk .ct-cards{position:relative;display:flex;justify-content:center;align-items:flex-start;gap:5.719rem;margin:-8.2rem 0 0;padding:0 .22rem 0 0}
.rc-page-crosstalk .ct-cards{pointer-events:none}   /* 列の箱（全幅・負の margin）が問いの枠の上にかぶる＝枠のホバー（M-12）を通す。カードだけ押せる */
.rc-page-crosstalk .ct-card{flex:none;width:29.881rem;margin-top:7.437rem;pointer-events:auto}
.rc-page-crosstalk .ct-card:first-child,.rc-page-crosstalk .ct-card:last-child{margin-top:0}
.rc-page-crosstalk .ct-card:first-child{margin-right:.9rem}
.rc-page-crosstalk .ct-cards--1 .ct-card{margin-right:0}
/* カードの中（原点＝写真の左・網点の上端＝写真の上端 − 5.757rem） */
.rc-page-crosstalk .ct-card__a{position:relative;display:block;padding-top:44.3rem;color:#fff;transform-origin:50% 45%}   /* リードの上＝写真上端から 38.54rem（カード 2〜4） */
.rc-page-crosstalk .ct-card__visual{position:absolute;left:0;top:0;width:100%;height:42.109rem;pointer-events:none}
.rc-page-crosstalk .ct-card__dots{position:absolute;left:0;top:3rem;width:29.9rem;height:36rem;max-width:none;z-index:0;clip-path:inset(0 .019rem 0 0)}
/* 2026-10-15 網点（炎 07 2）の位置を Figma の最新に合わせる（本人「これなんかデザイン違くない？」）。デザイナーが網点だけをカードに対して下へ動かしていた: 写真グループ（Group 1636）の上端から 10/06 は −32px・今は 01 が −8px（左 +1.5px）・02〜04 が −2px（左 0）。
   絵そのもの（色・形・アルファ）は 10/06 の書き出しと同じ。この箱の原点は網点の上端＝写真の上 5.757rem なので、旧 0 に対して 01 は +24px（2.4rem）・02〜04 は +30px（3rem）。右端は写真・帯（29.881rem）に揃えて切る（本人「ドットがカードからはみ出してる」） */
.rc-page-crosstalk .ct-card--01 .ct-card__dots{left:.15rem;top:2.4rem;clip-path:inset(0 .169rem 0 0)}
.rc-page-crosstalk .ct-card__photo{position:absolute;left:0;top:5.757rem;width:29.881rem;height:32.597rem;max-width:none;object-fit:cover;z-index:1}
.rc-page-crosstalk .ct-card__photo--acf{-webkit-mask-image:linear-gradient(#000 55%,transparent 100%);mask-image:linear-gradient(#000 55%,transparent 100%)}
.rc-page-crosstalk .ct-card__visual::after{content:"";position:absolute;left:0;top:3.2rem;width:29.89rem;height:35.164rem;z-index:2;
  background:linear-gradient(0deg,rgba(191,160,90,.92) 0%,rgba(212,185,106,.43) 13%,rgba(191,160,90,.10) 30%,rgba(191,160,90,0) 48%)}
.rc-page-crosstalk .ct-card__band{position:absolute;left:0;top:38.354rem;width:29.881rem;height:3.755rem;background:#000;z-index:2}   /* Rectangle 429 */
.rc-page-crosstalk :is(.ct-card__cross,.ct-card__flame){position:absolute;left:.5rem;top:17.981rem;width:29.881rem;height:20.373rem;overflow:hidden;z-index:3;mix-blend-mode:soft-light}   /* Mask group（写真上端から 12.224rem） */
/* 2026-10-15（本人「ここの炎が Figma の感じと違う」）: 位置は Figma と 1px 以内で合っている（網点・炎・バツを pc_frame と重ねて実測）。違いは明るさ。Figma の SOFT_LIGHT は暗い下地（黒い作業着）で CSS の soft-light の約半分しか明るくならない（下地 0.07→0.14・CSS だと 0.22。Figma は 2b−b²、CSS は W3C の式）＝実物の炎が白っぽく浮いていた。
   炎だけ別の層（.ct-card__flame）にして不透明度 .5（実測 4 枚で Figma との差が約半分になる値）。バツ（.ct-card__cross）は下地が明るい金のグラデなので両者がほぼ一致＝そのまま */
.rc-page-crosstalk .ct-card__flame{opacity:.5}
.rc-page-crosstalk .ct-card__cross-img{position:absolute;left:1.278rem;top:1.837rem;width:26.126rem;height:auto;max-width:none}   /* Group 237。SOFT_LIGHT は外側の .ct-card__cross に付ける（z-index の箱が層を作るので img 側では透明の地としか合成されない） */
.rc-page-crosstalk .ct-card__words{position:absolute;left:0;top:30.78rem;width:100%;height:4.548rem;z-index:4}
.rc-page-crosstalk .ct-card__w{position:absolute;top:0;font:700 4.548rem/4.548rem var(--serif);letter-spacing:.227rem;white-space:nowrap}   /* 45.48px ls 2.27 */
.rc-page-crosstalk .ct-card__w--l{left:2.477rem}
.rc-page-crosstalk .ct-card__w--r{left:17.817rem}
.rc-page-crosstalk .ct-card__num{position:absolute;left:.85rem;top:36.2rem;height:5.5rem;z-index:4}   /* 番号 SVG（インク 75×55）。pc_frame で実測 */
.rc-page-crosstalk .ct-card__num-img{display:block;width:auto;height:100%;max-width:none}
.rc-page-crosstalk .ct-card__meta{position:absolute;left:10.147rem;top:38.114rem;height:4rem;z-index:4;white-space:nowrap}
.rc-page-crosstalk .ct-card__talk{position:absolute;left:0;top:0;font:600 1.487rem/4rem var(--serif);letter-spacing:.119rem}   /* 14.87px ls 1.19 */
.rc-page-crosstalk .ct-card__label{position:absolute;left:8.229rem;top:0;font:600 2.092rem/4rem var(--serif);letter-spacing:.167rem}   /* 20.92px ls 1.67 */
.rc-page-crosstalk .ct-card__lead{position:relative;z-index:4;display:block;width:29.9rem;font:600 2.226rem/3.04rem var(--serif)}   /* 22.26px lh 30.4 */
.rc-page-crosstalk .ct-card--01 .ct-card__a{padding-top:42.837rem}   /* カード 1 だけ Figma で 1.463rem 上（2134.37。2〜4 は 2149／2223.37） */

/* =====================================================================
   N. 固定バー（nav.ct-bar・14.2rem・#141414・sticky）設計図_セクション N・動き M-10
   ===================================================================== */
.rc-page-crosstalk .ct-bar{position:sticky;top:10.4rem;z-index:50;height:14.2rem;background:var(--ct-bar);box-shadow:inset 0 -1px 0 rgba(191,160,90,.2)}
.rc-site.admin-bar.rc-page-crosstalk .ct-bar{top:calc(10.4rem + 32px)}
.rc-page-crosstalk .ct-bar__list{display:flex;width:159.2rem;height:100%;margin:0 auto}
.rc-page-crosstalk .ct-bar__item{position:relative;flex:1 1 0;min-width:0;border-left:1px solid var(--ct-gold);border-right:1px solid var(--ct-gold)}   /* Rectangle 432 INSIDE（隣と合わせて 2px） */
.rc-page-crosstalk .ct-bar__a{position:relative;display:block;height:100%;overflow:hidden;color:#fff}
.rc-page-crosstalk .ct-bar__glow{position:absolute;left:0;right:0;top:3.837rem;height:10.589rem;background:linear-gradient(0deg,rgba(202,170,110,.5) 0%,rgba(180,156,111,0) 63%);pointer-events:none}   /* Rectangle 431 */
.rc-page-crosstalk .ct-bar__cross{position:absolute;left:7.214rem;top:0;width:28.516rem;height:14.426rem;overflow:hidden;pointer-events:none}
.rc-page-crosstalk .ct-bar__cross-img{position:absolute;left:4.952rem;top:-.345rem;width:21.012rem;height:18.459rem;max-width:none;mix-blend-mode:soft-light}   /* Group 237 SOFT_LIGHT（バーの群は 210.12×184.59＝SVG より縦が詰まっている。Figma の箱どおりに伸縮） */
.rc-page-crosstalk .ct-bar__talk{position:absolute;left:3.106rem;top:5.8rem;width:6.498rem;font:600 1.287rem/1.73rem var(--serif);letter-spacing:.779rem;text-align:center;white-space:nowrap}   /* 12.87px ls 7.79 */
.rc-page-crosstalk .ct-bar__num{position:absolute;left:3.05rem;top:8.22rem;height:4.76rem}   /* カードの番号 SVG を 0.865 倍（インク実測） */
.rc-page-crosstalk .ct-bar__num-img{display:block;width:auto;height:100%;max-width:none}
.rc-page-crosstalk .ct-bar__words{position:absolute;left:0;top:9.1rem;width:100%;height:3.725rem}
.rc-page-crosstalk .ct-bar__w{position:absolute;top:0;font:700 3.725rem/3.725rem var(--serif);letter-spacing:.186rem;white-space:nowrap}   /* 37.25px ls 1.86 */
.rc-page-crosstalk .ct-bar__w--l{left:13.4rem}
.rc-page-crosstalk .ct-bar__w--r{left:25.7rem}
/* CT-WLONG（2026-10-27・本人「採用担当と新卒•中途になったから治るように調整して・文字と文字の間も狭くしてパンフレットみたいに詰める感じで」）:
   語が 2 字より長い対話だけ（--long。--wn＝長い方の字数・中黒は 0.5。page-templates/recruit-crosstalk.php の sbs_rc_ct_words_attr）、左右の語をバツの中心の両脇の半分ずつに寄せて置き、
   半分の幅に入る大きさまで字を縮めて字間を詰める（palt＋−.03em）。2 字の対話（01〜03）は上の指定のまま変えない。SP は下の @media */
@media (min-width:1024px) and (orientation:landscape), (min-width:1367px){
  .rc-page-crosstalk .ct-card__words--long{display:grid;grid-template-columns:1fr 1fr;column-gap:2.4rem;align-items:end;padding:0 .9rem}   /* 半分＝(29.881−1.8−2.4)÷2＝12.84rem。中心＝カードの中央＝バツの中心 */
  .rc-page-crosstalk .ct-card__words--long .ct-card__w{position:static;font-size:min(4.548rem, 12.84rem / var(--wn) / .97);letter-spacing:-.03em;font-feature-settings:"palt"}
  .rc-page-crosstalk .ct-bar__words--long{left:10.2rem;width:24.4rem;display:grid;grid-template-columns:1fr 1fr;column-gap:1.4rem;align-items:end}   /* 番号の右（10.2rem）〜矢印の左（34.6rem）。中心 22.4rem＝バツの中心 22.67rem とほぼ同じ */
  .rc-page-crosstalk .ct-bar__words--long .ct-bar__w{position:static;font-size:min(3.725rem, 11.5rem / var(--wn) / .97);letter-spacing:-.03em;font-feature-settings:"palt"}
  .rc-page-crosstalk :is(.ct-card__words--long .ct-card__w--l,.ct-bar__words--long .ct-bar__w--l){justify-self:end}
  .rc-page-crosstalk :is(.ct-card__words--long .ct-card__w--r,.ct-bar__words--long .ct-bar__w--r){justify-self:start}
  .rc-page-crosstalk.ct-hd-off .ct-bar__words.ct-bar__words--long{transform-origin:10.17rem 1.56rem}   /* 細い帯の時に縮める中心（項目の左から 20.37rem）は同じ。箱の左が 10.2rem ずれた分を引く（後ろの M19 の指定より強く） */
}
.rc-page-crosstalk .ct-bar__arrow{position:absolute;left:35rem;top:10.3rem;width:2.693rem;height:2.809rem}
.rc-page-crosstalk .ct-bar__arrow-img{display:block;width:100%;height:100%}
/* 下線（Figma の a::after。clip の外で見えていない金の線）＝ホバーと現在地の印（§11-9）。静止は現在地だけ */
.rc-page-crosstalk .ct-bar__line{position:absolute;left:0;right:0;bottom:0;height:.184rem;background:linear-gradient(90deg,#bfa05a,#d4b96a 50%,#bfa05a);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
.rc-page-crosstalk .ct-bar__a[aria-current="true"] .ct-bar__line{transform:scaleX(1)}
html.motion .rc-page-crosstalk .ct-bar__line{transition:transform .3s ease-out}   /* ease-out＝現物 rc-common.css 123 行（四つ角と同じ） */
@media (hover:hover){
  html.motion .rc-page-crosstalk .ct-bar__a:hover .ct-bar__line{transform:scaleX(1)}
}
/* hd（2026-10-07 裁定 M18・本人「黒い帯が来たらヘッダーはハンバーガーに。赤枠にハンバーガーが来る感じ」）PC（≥1024）だけ。
   バーが止まっている間 rc-crosstalk.js が body に .ct-hd-off を付ける → ①浮いたヘッダーを引っ込める ②バーを transform で画面の最上部へ（sticky の top は変えない＝ガタつかない・当たり判定も transform に付いてくる）
   ③右端の空き（4 項目の右・16.4rem の真ん中）にハンバーガー ④ドロワーはバーの下に出す。.ct-hd-off が無い時は今までと 1px も変わらない。
   動き＝コーポレートの現物 main.css 8399〜8403 行（#global-nav.gnav.is-hidden：中身は opacity .35s ease で消え、transform .45s cubic-bezier(.43,.05,.17,1) で 24px 上へ抜ける）。
   html.motion が無い／no-motion（reduced-motion は rc-common が no-motion にする）は transition 無し＝瞬時 */
.rc-page-crosstalk .ct-bar__menu{display:none}
@media (min-width:1024px) and (orientation:landscape), (min-width:1367px){
  .rc-page-crosstalk .ct-bar__menu{display:block;position:absolute;right:3.8rem;top:3.45rem;width:8.8rem;height:7.3rem;padding:0;border:0;background:none;cursor:pointer;opacity:0;visibility:hidden;pointer-events:none}   /* 当たり 8.8×7.3rem・線はヘッダーと同じ 6.8×3.3rem を中心に（中心＝右端から 8.2rem・バーの縦の真ん中） */
  .rc-page-crosstalk .ct-bar__menu-img{position:absolute;left:1rem;top:2rem;width:6.8rem;height:3.3rem;max-width:none}
  .rc-page-crosstalk .ct-bar__menu:focus-visible{outline:2px solid var(--ct-gold);outline-offset:-2px}
  .rc-page-crosstalk.ct-hd-off .ct-bar__menu{opacity:1;visibility:visible;pointer-events:auto}
  .rc-page-crosstalk.ct-hd-off .site-header{opacity:0;visibility:hidden;transform:translateY(-2.4rem);pointer-events:none}   /* 本人の指示でこのページだけ（.ct-hd-off の間だけ） */
  html.motion:not(.no-motion) .rc-page-crosstalk .site-header{transition:background-color .3s ease,box-shadow .3s ease,opacity .35s ease,transform .45s cubic-bezier(.43,.05,.17,1),visibility 0s}   /* 前 2 つは共通（rc-common.css 55 行）のまま */
  html.motion:not(.no-motion) .rc-page-crosstalk.ct-hd-off .site-header{transition:background-color .3s ease,box-shadow .3s ease,opacity .35s ease,transform .45s cubic-bezier(.43,.05,.17,1),visibility 0s linear .45s}
  /* bar（2026-10-07 裁定 M19・本人「ちょっと太すぎるから調整してほしい」）止まっている間だけ、見た目を 14.2 → 8.4rem に細くする（TOP p12 のヘッダー 113.6→84px と同じ考え方）。
     レイアウトの箱（14.2rem・sticky の top）は変えない＝出入りでページの中身はずれない。
     ①バーを 5.8rem（--ct-cut）だけ余分に上げ、上の 5.8rem を clip-path で切る＝見えている帯は画面の最上部〜8.4rem。下の金の線・区切りの線・下線はそのまま下端に残る。
       clip-path は当たり判定も切る・バーの箱の下端が 8.4rem になる＝空いた所（8.4〜14.2rem）は下の中身に当たる。
     ②中身（番号・語・炎の S とクロス・矢印）は 1 点（項目の左から 20.37rem・上から 10.66rem＝番号の上端〜矢印の下端の真ん中）を中心に 0.7 倍し、見えている帯の縦の真ん中（10rem）へ −0.66rem 動かす。
       各要素の transform-origin＝その 1 点を各要素の箱の左上から測った値（left/top は上の N の値）。TALK の字は 0.7 倍で 9px（1920）〜5px（1024）＝読めないので隠す（番号が残る）。
     ③金のグラデは帯の下端を基準に縦だけ 8.4/14.2 倍（帯に対する割合を保つ）。ハンバーガーも 0.7 倍で帯の縦の真ん中へ（7.1 → 10rem）。ドロワーは細い帯の下端 8.4＋すき間 1.6rem。 */
  .rc-page-crosstalk{--ct-cut:5.8rem}
  .rc-page-crosstalk.ct-hd-off .ct-bar{transform:translateY(calc(-10.4rem - var(--ct-cut)));clip-path:inset(var(--ct-cut) 0 0 0)}   /* M18 は translateY(-10.4rem)（sticky の上端から画面の最上部へ・admin-bar の下）→ M19 で更に --ct-cut 上げて上を切る */
  .rc-page-crosstalk.ct-hd-off .ct-bar__cross-img{transform:translateY(-.66rem) scale(.7);transform-origin:8.204rem 11.005rem}   /* 外の .ct-bar__cross に transform を付けると重なりの層が切れて soft-light が地と混ざらず白く出る＝中の img（項目の左から 12.166rem・上から −.345rem）に付ける */
  .rc-page-crosstalk.ct-hd-off .ct-bar__num{transform:translateY(-.66rem) scale(.7);transform-origin:17.32rem 2.44rem}
  .rc-page-crosstalk.ct-hd-off .ct-bar__words{transform:translateY(-.66rem) scale(.7);transform-origin:20.37rem 1.56rem}
  .rc-page-crosstalk.ct-hd-off .ct-bar__arrow{transform:translateY(-.66rem) scale(.7);transform-origin:-14.63rem .36rem}
  .rc-page-crosstalk.ct-hd-off .ct-bar__talk{transform:translateY(-.66rem) scale(.7);transform-origin:17.264rem 4.86rem;opacity:0}
  .rc-page-crosstalk.ct-hd-off .ct-bar__glow{transform:scaleY(.5915);transform-origin:50% 10.363rem}
  .rc-page-crosstalk.ct-hd-off .ct-bar__menu{transform:translateY(2.9rem) scale(.7)}
  .rc-page-crosstalk.ct-hd-off .sp-drawer{top:10rem}   /* M18 は 15.8rem（太い帯の下端 14.2＋1.6）→ M19 で細い帯の下端 8.4＋共通と同じすき間 1.6rem */
  .rc-site.admin-bar.rc-page-crosstalk.ct-hd-off .sp-drawer{top:calc(10rem + 32px)}
  html.motion:not(.no-motion) .rc-page-crosstalk .ct-bar{transition:transform .45s cubic-bezier(.43,.05,.17,1),clip-path .45s cubic-bezier(.43,.05,.17,1)}   /* 上げる量と切る量が同じ速さ＝見えている帯の上端は 10.4rem → 0 へ素直に動く */
  html.motion:not(.no-motion) .rc-page-crosstalk:not(.ct-hd-off) .ct-bar{clip-path:inset(0 0 0 0)}   /* 切る量 0 から動かすため（none からは補間できない）。見た目は切らない時と同じ・.ct-hd-off の切り（上）を打ち消さないよう :not で */
  html.motion:not(.no-motion) .rc-page-crosstalk :is(.ct-bar__cross-img,.ct-bar__num,.ct-bar__words,.ct-bar__arrow,.ct-bar__glow){transition:transform .45s cubic-bezier(.43,.05,.17,1)}
  html.motion:not(.no-motion) .rc-page-crosstalk .ct-bar__talk{transition:transform .45s cubic-bezier(.43,.05,.17,1),opacity .35s ease}
  html.motion:not(.no-motion) .rc-page-crosstalk .ct-bar__menu{transition:opacity .35s ease,transform .45s cubic-bezier(.43,.05,.17,1),visibility 0s linear .35s}
  html.motion:not(.no-motion) .rc-page-crosstalk.ct-hd-off .ct-bar__menu{transition:opacity .35s ease .1s,transform .45s cubic-bezier(.43,.05,.17,1),visibility 0s}
}

/* =====================================================================
   O. ほかのページも見る（section.ct-other。Figma は空枠＝仮の最小案 §11-2）
   ===================================================================== */
.rc-page-crosstalk .ct-other{display:flex;align-items:center;min-height:67rem;padding:7rem 0;background:var(--ct-paper-2) radial-gradient(ellipse 60% 70% at 50% 50%,rgba(191,160,90,.14) 0%,rgba(191,160,90,0) 70%)}
.rc-page-crosstalk .ct-other__wrap{width:min(120rem, 100% - var(--gut) * 2)}
.rc-page-crosstalk .ct-other__list{display:grid;grid-template-columns:repeat(4,1fr);gap:2.4rem;margin-top:3.2rem}
.rc-page-crosstalk .ct-other__btn{width:100%}

/* =====================================================================
   動き（スクロールで出る。html.motion のときだけ）
   ===================================================================== */
/* M-7 問いの枠: 4 隅が中心から角へ（現物無し → 署名 --mo-brake 820ms）→ 文字 */
html.motion .rc-page-crosstalk .ct-q:not(.is-in) .ct-q__c--tl{translate:28.4rem 4.4rem}
html.motion .rc-page-crosstalk .ct-q:not(.is-in) .ct-q__c--tr{translate:-28.4rem 4.4rem}
html.motion .rc-page-crosstalk .ct-q:not(.is-in) .ct-q__c--br{translate:-28.4rem -4.4rem}
html.motion .rc-page-crosstalk .ct-q:not(.is-in) .ct-q__c--bl{translate:28.4rem -4.4rem}
html.motion .rc-page-crosstalk .ct-q:not(.is-in)::before{clip-path:inset(50% 50%)}
html.motion .rc-page-crosstalk .ct-q:not(.is-in) .ct-q__t{opacity:0;translate:0 1rem}
html.motion .rc-page-crosstalk .ct-q .ct-q__c{transition:translate .82s var(--mo-brake),color .3s ease-out}
html.motion .rc-page-crosstalk .ct-q::before{clip-path:inset(0);transition:clip-path .82s var(--mo-brake)}
html.motion .rc-page-crosstalk .ct-q .ct-q__t{transition:opacity .5s ease-out .4s,translate .5s ease-out .4s}   /* ease-out＝設計図 M-7。遅延は設計図の .5s → .4s（かっこの展開 .82s と同じ頃に出し切る＝検収 m7 の 0.9 秒で表示）*/
html.motion .rc-page-crosstalk .ct-q.is-settled .ct-q__c{transition:translate .3s ease-out,color .3s ease-out}   /* 出現が済んだらホバーの戻り（M-12） */
/* M-12 ホバーで角が ±.7rem（出現が済んでから＝.is-settled） */
@media (hover:hover){
  html.motion .rc-page-crosstalk .ct-q.is-settled:hover .ct-q__c--tl{translate:-.7rem -.7rem}
  html.motion .rc-page-crosstalk .ct-q.is-settled:hover .ct-q__c--tr{translate:.7rem -.7rem}
  html.motion .rc-page-crosstalk .ct-q.is-settled:hover .ct-q__c--br{translate:.7rem .7rem}
  html.motion .rc-page-crosstalk .ct-q.is-settled:hover .ct-q__c--bl{translate:-.7rem .7rem}
}
/* M-8 カード: 出現（現物: 21st testimonials staggerChildren .2・opacity 0→1・y 20→0・.5s easeOut）・ホバー 1.05 倍（TOP vcard の曲線） */
html.motion .rc-page-crosstalk .ct-cards:not(.is-in) .ct-card{opacity:0;translate:0 2rem}
html.motion .rc-page-crosstalk .ct-card{transition:opacity .5s ease-out,translate .5s ease-out;transition-delay:calc(var(--i, 0) * .2s)}   /* ease-out＝現物 framer-motion easeOut */
html.motion .rc-page-crosstalk .ct-card__a{transition:transform .5s var(--ct-card-ease)}
@media (hover:hover){
  html.motion .rc-page-crosstalk .ct-card__a:hover{transform:scale(1.05)}
}

/* =====================================================================
   SP（≤1023。設計図_v1 §6。Figma に SP は無い＝TOP の SP 部品＋縦積み）
   ===================================================================== */
@media (max-width:1023px), (max-width:1366px) and (orientation:portrait){
  /* ヒーロー（高さ auto・網点 1 層・静止。止めない）
     sp2（2026-10-07 設計書_SP_v2 §2-1・裁定 M16）: 39rem の構図の箱（--hx＝箱の左端）を中央に置き、写真・CROSS TALK・見出しを全部この箱の座標で置く。
     文字（CROSS TALK＋見出し 2 行＋本音の箱）は左に 1 つのかたまり、写真の女性の顔は右（視線＝左上の CROSS TALK へ）。本人 FB（2026-10-07「ここの隙間がきになる。これなら詰めてほしい」）で
     顔の上下に分けていた文字を詰め、375×667 でも全部が最初の画面（下の固定バーより上）に入るようにした。写真は PC と同じ楕円のマスクで女性だけを見せる（左の男性・ベストのボタン＝「意味の無い小さな丸」は暗い地へ消える）。
     --hf＝炎の縁がヒーローにかぶる量（縁の上端＝ヒーローの下端 − 幅の 19.32%）＋1.2rem。見出しの下端（38.6rem）は縁の上端（46rem）より上＝炎がかからない（M14） */
  .rc-page-crosstalk .ct-hero{height:auto;overflow:clip;--ww:min(calc(var(--vw, 100vw) - 4rem), 60rem)}
  .rc-page-crosstalk .ct-hero{--hx:calc(50% - 19.5rem);--hf:calc(var(--vw, 100vw) * .1932 + 1.2rem)}
  /* fix3（M15-6）: 縁は幅 110%（高さ 1.1×574/2118 幅）で上 203 行がヒーローにかぶる。黒は縁の 330〜372 行から＝導入の上端から幅の 6.596%〜8.777%。
     その分ヒーローを下に延ばし（padding-bottom）、導入を同じだけ重ねる＝見出しと縁の間・導入以降の位置は今のまま。写真の箱は延ばさない（構図を変えない） */
  .rc-page-crosstalk{--ct-cv-a:calc(var(--vw, 100vw) * .06596);--ct-cv-b:calc(var(--vw, 100vw) * .08777)}
  .rc-page-crosstalk .ct-hero__stage{height:calc(var(--hh, 46rem) + var(--hf));min-height:0;padding:0}
  .rc-page-crosstalk .ct-hero__dots--ext{display:none}
  /* 写真: 2012×964 を 100rem 幅で（顔＝写真の 64.25%・33% を箱の (31.5, 27)＝見出しの右）。楕円のマスク（PC の H-2 と同じ考え）で女性だけ。ズーム（M-5）は SP では止める（設計図 §6） */
  .rc-page-crosstalk .ct-hero__photo-mask{inset:auto;left:calc(var(--hx) - 32.75rem);top:11.2rem;width:100rem;height:47.9rem;
    -webkit-mask-image:radial-gradient(18rem 22rem at 64.25rem 22rem,#000 42%,transparent 100%);mask-image:radial-gradient(18rem 22rem at 64.25rem 22rem,#000 42%,transparent 100%)}   /* 楕円の上端＝写真の箱の上端（箱の縁を見せない） */
  .rc-page-crosstalk .ct-hero__photo{object-position:50% 50%}
  html.motion .rc-page-crosstalk .ct-hero.is-in .ct-hero__photo{animation:none}
  .rc-page-crosstalk .ct-hero__dots--1,.rc-page-crosstalk .ct-hero__dots--2{display:none}
  .rc-page-crosstalk .ct-hero__dots--3{inset:0;width:100%;height:100%;object-fit:cover;object-position:0 50%}
  /* 文字の下だけ暗く（上＝CROSS TALK・下＝見出し。真ん中の顔はそのまま＝design-taste-canon「スクリムは写真が見える強さまで」） */
  .rc-page-crosstalk .ct-hero__bg::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(to bottom,rgba(14,9,4,.25) 0,rgba(14,9,4,0) 30%,rgba(14,9,4,0) 62%,rgba(14,9,4,.55) 100%)}
  /* CROSS／TALK: SVG の箱 1740×617 の中で字は左 2〜47% にしかない → 箱を 64rem にして字の幅 29rem（CROSS の字高 6.1rem・字は 3.2〜16.4rem） */
  .rc-page-crosstalk .ct-hero__word{position:absolute;left:calc(var(--hx) + .5rem);top:-1.5rem;width:64rem;height:auto;aspect-ratio:1740/617;margin:0}
  .rc-page-crosstalk .ct-hero__cross{left:calc(var(--hx) + 2.07rem);top:8.82rem;width:8.18rem;height:8.18rem}   /* PC と同じ比（箱の 2.448%・16.127%・12.78%） */
  .rc-page-crosstalk .ct-hero__title{position:absolute;inset:auto;left:calc(var(--hx) + 2rem);top:18.6rem;display:flex;flex-direction:column;align-items:flex-start;gap:.2rem;margin:0;
    text-shadow:0 0 1.6rem rgba(0,0,0,.45)}
  .rc-page-crosstalk .ct-hero__title>span{position:relative;left:auto;top:auto;width:auto;height:auto;text-align:left}
  .rc-page-crosstalk .ct-hero__t1{font-size:2.4rem;line-height:1.4;word-spacing:0;letter-spacing:.06em}
  .rc-page-crosstalk .ct-hero__small{font-size:1.4rem;letter-spacing:.04em}
  .rc-page-crosstalk .ct-hero__t2{font-size:3.4rem;line-height:1.3;letter-spacing:.06em}
  .rc-page-crosstalk .ct-hero__title>.ct-hero__box{display:flex;align-items:center;gap:.6rem;margin-top:.8rem;padding:.2rem 1.1rem .2rem 1.4rem;text-shadow:none}
  .rc-page-crosstalk .ct-hero__honne{position:relative;left:auto;top:auto;width:auto;height:auto;font-size:8.6rem;line-height:1.08;letter-spacing:.02em}
  .rc-page-crosstalk .ct-hero__real{position:relative;left:auto;top:auto;width:auto;height:auto;font-size:2.2rem;line-height:1.1;letter-spacing:.08em}

  /* 導入（炎の縁は PC と同じ比率で上 35.37% だけヒーローにかぶせる） */
  .rc-page-crosstalk .ct-intro{margin-top:0;padding:calc(var(--vw, 100vw) * .19 + 3rem) var(--gut) 6rem}
  .rc-page-crosstalk .ct-intro{margin-top:calc(var(--ct-cv-b) * -1)}   /* fix3: 黒の上端＝ヒーローの下端（地のグラデは PC と同じ規則・値は上の SP の --ct-cv-*） */
  .rc-page-crosstalk .ct-intro__edge{left:-5%;width:110%;height:auto;aspect-ratio:2118/574;top:0;transform:translateY(-35.37%)}
  .rc-page-crosstalk .ct-intro__glow{left:50%;top:calc(var(--vw, 100vw) * .19);width:7rem;margin-left:-3.5rem}
  .rc-page-crosstalk .ct-intro__copy{font-size:max(1.6rem, 13px);line-height:2.15;letter-spacing:.05em;padding-left:0}   /* sp2: 1.5 → 1.6rem（20 字の行が 35rem に収まる上限） */
  .rc-page-crosstalk .ct-q{width:auto;max-width:44rem;margin:4rem auto 0;padding:2rem}
  .rc-page-crosstalk .ct-q::before{inset:0 1.4rem}
  .rc-page-crosstalk .ct-q__t{font-size:max(1.9rem, 14px);line-height:1.6;letter-spacing:.06em;white-space:normal}   /* sp2: 1.6 → 1.9rem */
  /* sp3（2026-10-07 裁定 M17-1・design-taste-canon 25 行目）: カードは PC と同じ「ずらして並ぶ写真カード」を縮めた形。2 列・右の列を PC の段差（7.437rem）と同じ比で下げる。
     中身は PC の絶対配置をそのまま、PC の 1rem（カード幅 29.881rem に対して）を cqw に置き換えて縮める（1rem → 100/29.881＝3.3466cqw）。字は読める下限を max() で付ける。
     ホバー（1.05 倍）は無し。押すとタブの切り替え＋着地（rc-crosstalk.js の rc:jump のまま） */
  .rc-page-crosstalk .ct-cards{container-type:inline-size;display:grid;grid-template-columns:1fr 1fr;align-items:start;column-gap:1.6rem;row-gap:3.2rem;max-width:60rem;margin:5.2rem auto 0;padding:0}
  .rc-page-crosstalk .ct-card,.rc-page-crosstalk .ct-card:first-child,.rc-page-crosstalk .ct-card:last-child{container-type:inline-size;width:auto;min-width:0;margin:0}
  .rc-page-crosstalk .ct-card:nth-child(2n){margin-top:calc((100cqw - 1.6rem) * .1244)}   /* 段差＝PC 7.437rem ÷ カード 29.881rem × カード幅 */
  .rc-page-crosstalk .ct-cards{row-gap:0}   /* LK16-017（2026-10-16・Lark「ここの隙間つめてほしい」）: SP の 1 段目（01・02）と 2 段目（03・04）の間 3.2rem→0（row-gap を上書き。列の間 1.6rem・右の列の段差・カードの中は変えない） */
  .rc-page-crosstalk .ct-card__a{padding-top:148.25cqw}
  .rc-page-crosstalk .ct-card--01 .ct-card__a{padding-top:143.36cqw}
  .rc-page-crosstalk .ct-card__visual{height:140.92cqw}
  .rc-page-crosstalk .ct-card__dots{left:0;top:10.04cqw;width:100.06cqw;height:120.48cqw;clip-path:inset(0 .06cqw 0 0)}   /* PC の 3rem／.019rem を 298.81px＝100cqw で割った値。右端を写真・帯（100cqw）に揃える */
  .rc-page-crosstalk .ct-card--01 .ct-card__dots{left:.5cqw;top:8.03cqw;clip-path:inset(0 .56cqw 0 0)}
  .rc-page-crosstalk .ct-card__photo{top:19.27cqw;width:100cqw;height:109.09cqw}
  .rc-page-crosstalk .ct-card__visual::after{top:10.71cqw;width:100.03cqw;height:117.68cqw}
  .rc-page-crosstalk .ct-card__band{top:128.36cqw;width:100cqw;height:12.57cqw}
  .rc-page-crosstalk :is(.ct-card__cross,.ct-card__flame){left:1.67cqw;top:60.18cqw;width:100cqw;height:68.18cqw}
  .rc-page-crosstalk .ct-card__cross-img{left:4.28cqw;top:6.15cqw;width:87.43cqw}
  .rc-page-crosstalk .ct-card__words{top:103.01cqw;height:15.22cqw}
  .rc-page-crosstalk .ct-card__w{font-size:15.22cqw;line-height:15.22cqw;letter-spacing:.76cqw}
  .rc-page-crosstalk .ct-card__w--l{left:8.29cqw}
  .rc-page-crosstalk .ct-card__w--r{left:59.63cqw}
  .rc-page-crosstalk .ct-card__num{left:2.84cqw;top:121.15cqw;height:18.41cqw}
  .rc-page-crosstalk .ct-card__meta{left:33.96cqw;top:127.55cqw;height:12.57cqw}
  .rc-page-crosstalk .ct-card__talk{font-size:max(4.98cqw, 9px);line-height:12.57cqw;letter-spacing:.4cqw}
  .rc-page-crosstalk .ct-card__label{left:max(27.54cqw, 4.6em);font-size:max(7cqw, 11px);line-height:12.57cqw;letter-spacing:.3cqw}
  .rc-page-crosstalk .ct-card__lead{width:100%;font-size:max(7.45cqw, 12px);line-height:1.6}
  html.motion .rc-page-crosstalk .ct-card__a:hover{transform:none}   /* SP はホバー無し（タブレットのマウスでも拡大しない） */

  /* 固定バー（上 0 で止める・4 列・2 段） */
  .rc-page-crosstalk .ct-bar,.rc-site.admin-bar.rc-page-crosstalk .ct-bar{top:0;height:6.6rem}   /* sp2: 5.6 → 6.6rem（番号 2.1rem・語 1.25rem） */
  .rc-page-crosstalk .ct-bar__list{width:100%}
  .rc-page-crosstalk .ct-bar__item{border-left-width:0;border-right:1px solid rgba(202,170,110,.6)}
  .rc-page-crosstalk .ct-bar__item:last-child{border-right:0}
  .rc-page-crosstalk .ct-bar__a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem}
  .rc-page-crosstalk .ct-bar__glow{top:30%;height:70%}
  .rc-page-crosstalk :is(.ct-bar__cross,.ct-bar__talk,.ct-bar__arrow){display:none}
  .rc-page-crosstalk .ct-bar__num{position:relative;left:auto;top:auto;height:2.1rem}
  .rc-page-crosstalk .ct-bar__words{position:relative;left:auto;top:auto;width:auto;height:auto;font:700 max(1.25rem, 11px)/1.2 var(--serif);white-space:nowrap}
  .rc-page-crosstalk .ct-bar__w{position:static;font:inherit;letter-spacing:.04rem}
  .rc-page-crosstalk .ct-bar__words .ct-sr{position:static;width:auto;height:auto;overflow:visible;clip:auto;color:var(--ct-gold)}
  /* CT-WLONG（2026-10-27）: 長い語の対話は、カードの語を半分ずつに寄せて縮め（PC と同じ考え・cqw）、固定バーは 1 列に入らないので語を 2 段に積む（× は出さない） */
  .rc-page-crosstalk .ct-card__words--long{display:grid;grid-template-columns:1fr 1fr;column-gap:8.03cqw;align-items:end;padding:0 3.01cqw}   /* 半分＝(100−6.02−8.03)÷2＝42.97cqw */
  .rc-page-crosstalk .ct-card__words--long .ct-card__w{position:static;font-size:min(15.22cqw, 42.97cqw / var(--wn) / .97);letter-spacing:-.03em;font-feature-settings:"palt"}
  .rc-page-crosstalk .ct-card__words--long .ct-card__w--l{justify-self:end}
  .rc-page-crosstalk .ct-card__words--long .ct-card__w--r{justify-self:start}
  .rc-page-crosstalk .ct-bar__words--long{display:flex;flex-direction:column;align-items:center;line-height:1.15}
  .rc-page-crosstalk .ct-bar__words--long .ct-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}   /* 見た目は消し、読み上げには残す */
  .rc-page-crosstalk .ct-bar__words--long .ct-bar__w{letter-spacing:-.02em;font-feature-settings:"palt"}
  .rc-page-crosstalk .ct-bar__line{height:.3rem}
  .rc-page-crosstalk .ct-bar__a{transition:background-color .3s ease-out}   /* ease-out＝四つ角の現物と同じ */
  .rc-page-crosstalk .ct-bar__a[aria-current="true"]{background:rgba(202,170,110,.14)}
  .rc-page-crosstalk .ct-bar__a[aria-current="true"] .ct-bar__glow{opacity:1}
  .rc-page-crosstalk .ct-bar__a:not([aria-current="true"]) .ct-bar__glow{opacity:.45}

  /* ほかのページ */
  .rc-page-crosstalk .ct-other{min-height:0;padding:6rem 0}
  .rc-page-crosstalk .ct-other__wrap{width:auto;margin-inline:var(--gut)}
  .rc-page-crosstalk .ct-other__list{grid-template-columns:1fr;gap:1.2rem;margin-top:2.4rem}
}
@media (max-width:1023px) and (min-width:600px), (max-width:1366px) and (orientation:portrait) and (min-width:600px){
  .rc-page-crosstalk .ct-other__list{grid-template-columns:1fr 1fr}
}
/* sp3（2026-10-07 裁定 M17-3・design-taste-canon 25 行目「PC が止めて覆うなら SP も同じ作り」）: ヒーロー → 導入を PC の M-6 と同じく止めて覆う（TOP p14 方式）。
   PC（121〜125 行）と同じ形: ステージを sticky で 1 枚分止め、導入を同じだけ上に重ねる＝導入の不透明な黒の上端が画面上端に届いた所ちょうどで止めが外れる。導入以降の位置は止めない時と同じ。
   --ct-sps＝SP のステージの高さ（上の .ct-hero__stage と同じ式: 46rem＋炎の縁のかぶり --hf）。縁（#15 の透け）・導入の地のグラデは上の SP の値のまま。層の Osmo の速さは rc-crosstalk.js（PC と同じ値）。
   止めない: 画面の高さ 500px 未満（横向きのスマホ等。TOP の SP と同じ境）・html.motion が無い／no-motion（reduced-motion は rc-common が no-motion にする） */
@media (max-width:1023px) and (min-height:500px), (max-width:1366px) and (orientation:portrait) and (min-height:500px){
  html.motion:not(.no-motion) .rc-page-crosstalk{--ct-sps:calc(var(--hh, 46rem) + var(--vw, 100vw) * .1932 + 1.2rem)}
  html.motion:not(.no-motion) .rc-page-crosstalk .ct-hero{height:calc(var(--ct-sps) * 2);overflow:visible}
  html.motion:not(.no-motion) .rc-page-crosstalk .ct-hero__stage{position:sticky;top:0;height:var(--ct-sps);overflow:hidden}
  html.motion:not(.no-motion) .rc-page-crosstalk .ct-intro{margin-top:calc(var(--ct-sps) * -1 - var(--ct-cv-b))}
}

/* 印刷 */
@media print{
  .rc-page-crosstalk .ct-bar{position:static;transform:none}
  .rc-page-crosstalk .ct-bar__menu{display:none}
}