@charset "utf-8";
/* 鯖江精機リクルート 新TOP（PC）
   正本: design/設計図_v1.md ＋ design/設計図_裁定_v1.md
   寸法: 1920 基準の rem（1rem = 10px @1920）。.p は Figma の px（--x/--y/--w/--h）を ÷10 して置く。
   P1: 骨組み＋01〜04 の静止。ベースの CSS ＝ 静止（no-motion と同じ縦並び）。演出の構造は P3 で html.js:not(.no-motion) の下に足す。
   PC/SP の切り替え（2026-10-12・縦向きの大きい iPad はスマホ版）: SP＝(max-width:1023px), (max-width:1366px) and (orientation:portrait) ／ PC＝(min-width:1024px) and (orientation:landscape), (min-width:1367px)。
   新しい @media を書く時もこの条件で（ipad_portrait_20261012/tools/bp_transform.py で揃えられる。--check で揃っていない物を一覧）。 */

/* == 共有（§2）== */
:root{
  --ink:#1a1a1a; --ink-2:#2a2825; --black:#000;
  --gold:#caaa6e; --gold-btn:#dbc08c; --gold-line:#c8a96e; --gold-text:#bfa05a;
  --brown:#796d55; --brown-2:#624f2d; --brown-3:#785e2e; --brown-4:#473a21;
  --cream:#f0ede6; --cream-2:#ffe9c0; --cream-3:#fffaed;
  --gray-box:#d9d9d9; --gray-text:#d3d3d3; --card-text:#d1d5dc;
  --g-fv:linear-gradient(180deg,#2a2825 0%,#ffd28f 100%);
  --g-work:linear-gradient(135deg,#ad844b 0%,#debc79 55%,#c5a264 100%);
  --g-band:linear-gradient(163deg,#d4b96a 0%,#eae6dc 75%);
  --g-band-after:linear-gradient(122deg,#bb9568 3%,#d6ba90 28%,#f4e1bc 51%,#d6ba90 71%,#e8cb9f 100%);
  --g-scrim:linear-gradient(90deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,.13) 100%);
  --g-env:linear-gradient(90deg,rgba(189,113,60,.73) 0%,rgba(225,173,118,.67) 50%,rgba(73,58,37,.47) 100%);
  --g-msgbtn:linear-gradient(157deg,#caaa6e 0%,#dec898 100%);
  --g-multiply-dark:linear-gradient(0deg,#737373 0%,rgba(217,217,217,0) 100%);
  --serif:'Noto Serif JP',serif; --cormorant:'Cormorant Garamond',serif;
}
html{font-size:calc(var(--vw, 100vw) / 192);overflow-y:scroll;-webkit-text-size-adjust:100%}  /* p5: --vw＝スクロールバーを除いた実際の幅（head のスクリプトが測る）。JS 無しは 100vw */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;overflow-x:clip;background:#fff;color:var(--ink);font-family:var(--serif);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,p,ul{margin:0;padding:0;font-weight:inherit;font-size:inherit}
ul{list-style:none}
img{display:block;max-width:none}
a{color:inherit;text-decoration:none}
main,section,header#fv,footer{display:block;position:relative;width:100%}
.p{position:absolute;left:calc(var(--x) * .1rem);top:calc(var(--y) * .1rem);width:calc(var(--w) * .1rem);height:calc(var(--h) * .1rem);margin:0}
.nw{white-space:nowrap}


/* 中央揃え＋字間の文字は padding-left に字間を入れる（CSS は最後の字のあとにも字間が付き、中心が字間/2 左へずれるため） */

/* == 01 fv（0–2362）== */
#fv{height:236.2rem;z-index:0}
.fv-stage{position:relative;height:236.2rem}
.fv-a,.fv-b,.fv-shared{position:absolute;left:0;width:100%;overflow:hidden}
.fv-a{top:0;height:107.5rem}
.fv-b{top:107.5rem;height:128.7rem}
.fv-shared{top:0;height:107.5rem}
.fv-a.fv-back{background:var(--g-fv)}
.fv-clip{left:.5rem;width:calc(100% - .5rem)}           /* 314:7768／314:7769 の clip は x≥5 */
.fv-in{position:absolute;left:-.5rem;top:0;width:192rem;height:107.5rem}
.fv-grad{background:var(--g-multiply-dark);mix-blend-mode:multiply}
.fv-machine{mix-blend-mode:screen}                        /* opacity .71 は焼き込み済み（§2.6 確認済） */
.fv-moe-glow{mix-blend-mode:multiply}
.fv-ch{color:#fff;font-weight:700;white-space:nowrap;transform:translate(.2rem,.3rem) rotate(-1.14deg)}   /* Group 1564 rot −0.0199。translate は描画の重ね合わせで +2/+3px 補正 */
.fv-ch--1{font-size:24.472rem;line-height:26.92rem;letter-spacing:-1.713rem;text-shadow:0 .816rem 9.789rem rgba(42,40,37,.28)}
.fv-ch--2{font-size:14.076rem;line-height:15.48rem;letter-spacing:-1.589rem;text-shadow:0 .757rem 9.081rem rgba(42,40,37,.28)}
.fv-ch--3{font-size:31.176rem;line-height:34.29rem;letter-spacing:-1.605rem;text-shadow:0 .764rem 9.169rem rgba(42,40,37,.28)}
.fv-ch--4{font-size:18.293rem;line-height:20.13rem;letter-spacing:-2.189rem;text-shadow:0 1.042rem 12.508rem rgba(42,40,37,.28)}
.fv-ch--5{font-size:21.305rem;line-height:23.44rem;letter-spacing:-1.937rem;text-shadow:0 .922rem 11.068rem rgba(42,40,37,.28)}
.fv-sub{color:#fff;font-weight:900;font-size:5.26rem;line-height:6.732rem;letter-spacing:-.158rem;white-space:nowrap;text-shadow:0 .862rem 10.346rem rgba(42,40,37,.28)}
.fv-sparkle{mix-blend-mode:screen}                        /* opacity .70 は焼き込み済み */
.fv-b-catch{color:#fff;font:700 14.306rem/13.33rem var(--cormorant);white-space:nowrap}
.fv-b-body{color:#fff;font-weight:700;font-size:4rem;line-height:8.32rem;white-space:nowrap;transform:translate(.2rem,.3rem) rotate(-.58deg);text-shadow:0 .211rem 2.536rem rgba(42,40,37,.28)}   /* 2026-10-09 本人「FV② 説明文の文字サイズ小さく」: 5→4rem・行 10.4→8.32rem（×0.8）。下の 1 行（.fv-b-small）も同じ比で縮め、位置は recruit-top.php の --y で詰めた。PC だけ（SP は recruit-sp.css のまま） */
.fv-b-small{color:#fff;font-weight:700;font-size:3.25rem;line-height:6.76rem;white-space:nowrap;transform:translate(0,.3rem) rotate(-.58deg);text-shadow:0 .172rem 2.061rem rgba(42,40,37,.28)}
.fv-gold-s{mix-blend-mode:screen}                         /* 343:98930 は S 形のマスクで切った SCREEN の光（透明地に書き出し）→ screen を付け直す */
.fv-gold-s--nm{display:none}
html.no-motion .fv-gold-s--nm{display:block}

/* == 02 philosophy（裁定 2: 箱 2908＋375。中身は箱の上端から）== */
#philosophy{margin-top:-37.5rem;height:328.3rem;z-index:2;background:linear-gradient(to bottom,transparent 37.5rem,#000 37.5rem)}   /* 裁定 v2-2 */
.ph-stage{position:relative;height:290.8rem}
.ph-1,.ph-2{position:absolute;left:0;width:100%;overflow:hidden}
.ph-1{top:0;height:142rem}
.ph-2{top:142rem;height:148.8rem;background:#000}
.ph-black{background:#000}
.ph-h1{color:#fff;font-weight:600;font-size:13rem;line-height:19rem;letter-spacing:.91rem;padding-left:.91rem;text-align:center;white-space:nowrap}
.gold{color:var(--gold)}
.ph-body1{color:#fff;font-weight:600;font-size:4rem;line-height:5.9rem;text-align:center;white-space:nowrap}
.ph-machine{mix-blend-mode:lighten}                       /* opacity .71 は焼き込み済み */
.ph-slash{mix-blend-mode:plus-lighter}                    /* opacity .57 は焼き込み済み */
.ph-h2{color:#fff;font-weight:700;font-size:6.514rem;line-height:10.31rem;letter-spacing:.195rem;text-align:center;white-space:nowrap}
.ph-h2>span{display:block}   /* p27: 直下の行（.l1／.l2）だけ。②を 1 文字ずつの span に分けても文字が縦に並ばないように */
.ph-h2 .l1{transform:translateY(-.7rem)}
.ph-h2 .l2{font-size:10rem;line-height:12.5rem;transform:translateY(-1.1rem)}   /* 行ごとの行送り違い（103.1／125）を Figma の描画位置に合わせる */
.ph-body2{color:#fff;font-weight:600;font-size:2.5rem;line-height:5.9rem;text-align:center;white-space:nowrap}
.ph-trail{margin-right:1.4rem}                            /* Figma は行末の空白（
）も幅に数えて中央揃えしている */
.ph-flames{position:absolute;inset:0;opacity:.36;mix-blend-mode:hard-light}

/* == 03 mission（裁定 2: 箱 4317＋335。t = y − 5270）== */
#mission{margin-top:-33.5rem;height:465.2rem;z-index:3;overflow:clip;background:linear-gradient(#0000 0,#0000 431.7rem,var(--cream) 431.7rem)}
.mi-in{position:absolute;left:0;top:0;width:100%;height:431.7rem}
.mi-gold{background:var(--gold)}
.mi-screen{mix-blend-mode:screen}
.mi-darken{mix-blend-mode:darken}                         /* Group 1575 自身の opacity .70 は焼き込み済み */
.mi-photos{position:absolute;inset:0;opacity:.7;mix-blend-mode:darken}
.mi-ghost{mix-blend-mode:multiply}                        /* opacity .22 は焼き込み済み */
.mi-kakageru{color:#fff;font-weight:700;font-size:3.408rem;line-height:7.5rem;letter-spacing:.784rem;padding-left:.784rem;text-align:center;white-space:nowrap}
.mi-rinen{color:#fff;font-weight:900;font-size:9.131rem;line-height:15.07rem;letter-spacing:1.209rem;padding-left:1.209rem;text-align:center;white-space:nowrap}
.mi-lead{color:var(--brown-4);font-weight:700;font-size:2.5rem;line-height:4.9rem;text-align:center;white-space:nowrap}
.mi-tate{color:#fff;font-weight:700;font-size:13.078rem;writing-mode:vertical-rl;width:auto;line-height:13.078rem;letter-spacing:-.378rem;white-space:nowrap}   /* L-064（2026-10-09・Lark「縦書きの「。」正しい位置にしてほしい」）: 1 字幅の箱で横書きを折り返す作り（word-break:break-all＋line-break:anywhere＝「。」が横書きの字形のまま字の左下に出た）をやめ、SP と同じ本当の縦書きに。字送りは Figma の行の高さ 12.7rem（字 13.078 − 字間 .378）、列の幅＝字の幅（width:auto）で、字の位置は前と同じ（±3px） */
@media (min-width:1024px) and (orientation:landscape), (min-width:1367px){.mi-tate--r{margin-left:3.53rem}}   /* L-064: 前は 17rem の箱の右に字を寄せていた（右寄せ）。縦書きでは同じ位置になるよう左に 3.53rem（17 − 13.078 − 字間 .392）。PC だけ */.mi-en{color:#fff;font:600 3.6rem/3rem var(--cormorant);letter-spacing:-.126rem;writing-mode:vertical-rl;white-space:nowrap}
.mi-en-h{color:#fff;font:600 3.6rem/5.4rem var(--cormorant);letter-spacing:-.126rem;white-space:nowrap}
.mi-prose{color:#fff;font-weight:700;font-size:2rem;line-height:6.9rem}
@media (min-width:1281px) and (orientation:landscape), (min-width:1367px){.mi-prose{width:44rem;font-size:2.4rem;line-height:6.4rem;letter-spacing:.08em}html.mo .mi-prose-clip{overflow:clip visible}html.mo .mi-prose-clip.is-in{width:44rem}html.mo .mi-scaler .mi-prose{font-size:max(2.4rem,calc(15px / max(var(--mi-s,1),.75)))}}   /* MU-03（2026-10-15・松浦さんFB No.3「説明文が急に小さくて読みづらい→文字サイズ大きく・文字間も少し開ける」）: 2→2.4rem・字間 .08em。行が増える分、箱を 44rem に（1024〜1280 の FB-04 と同じ広げ方）・行 6.9→6.4rem。画面固定で縮む時も 15px を下回らない */
.mi-band{background:var(--brown-4)}   /* L-076（2026-10-09・Lark「赤枠部分視認悪いんで、参考みたいに文字に帯」）: 参考（tokyu-land 新卒採用の人物名 p>span{background:#255720}）と同じく、行の中の span に余白なし・透けなしの地。色は金の地を濃くした同じ系統の --brown-4（参考も地の黄緑を濃くした緑）。PC・SP 共通 */
.mi-value-r .mi-band{padding-left:.5em;-webkit-box-decoration-break:clone;box-decoration-break:clone}   /* BAND-PAD（2026-11-02・先方FB「OUR VALUE ここの文字の帯、ギリギリすぎるので左側もほしい」→「左右どっちもにつけるとバランス悪くない？」）: OUR VALUE の帯の左だけ .5em（2 行とも「。」で終わり、右は字の中の空きで約半字あく＝左右がそろう）。行ごとの帯にも付ける（clone） */
.mi-value-h{color:#fff;font-weight:700;font-size:13.078rem;line-height:12.7rem;letter-spacing:.392rem;white-space:nowrap}
.mi-value-r{color:#fff;font-weight:700;font-size:2rem;line-height:4.59rem;letter-spacing:.095rem;white-space:nowrap}
.mi-fade{background:linear-gradient(0deg,#f0ede6 24%,rgba(240,237,230,.5) 57%,rgba(240,237,230,0) 100%)}
.vcard{overflow:hidden;border-radius:1.6rem;background:linear-gradient(135deg,#010101 0%,#030303 17%,#050505 33%,#090909 50%,#050505 67%,#030303 83%,#010101 100%);box-shadow:inset 0 0 0 .08rem rgba(255,255,255,.1),0 2.5rem 5rem -1.2rem rgba(0,0,0,.25);-webkit-backdrop-filter:blur(4.8rem);backdrop-filter:blur(4.8rem)}
.vc-deco i{position:absolute;display:block}
.vc-face{left:.08rem;top:.08rem;width:34.84rem;height:37.46rem;background:linear-gradient(45deg,rgba(255,255,255,.05),rgba(255,255,255,.1));opacity:.4}
.vc-orb{left:-7.92rem;top:22.725rem;width:19.2rem;height:19.2rem;border-radius:50%;background:linear-gradient(45deg,rgba(255,255,255,.1),transparent);opacity:.3;filter:blur(12.8rem)}
.vc-band{left:30.955rem;top:.06rem;width:42.771rem;height:37.5rem;background:linear-gradient(90deg,transparent,rgba(255,255,255,.05) 50%,transparent)}
.vc-line{display:block;background:linear-gradient(90deg,transparent,#fff 50%,transparent);opacity:.9}
.vc-h{color:var(--gold);font-weight:900;font-size:3.489rem;line-height:4.81rem;letter-spacing:.174rem;padding-left:.174rem;text-align:center;white-space:nowrap;opacity:.9}
.vcard>.p.vc-sub{position:relative;left:auto;top:auto;flex:none;box-sizing:border-box;width:100%;height:auto;min-height:3.77rem;margin:0;padding:0 .4rem;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--gold);opacity:.9;font:500 1.35rem/1.6 var(--serif);letter-spacing:.05em;text-wrap:balance;word-break:auto-phrase}   /* FB1015-18 副題（旧 SVG と同じ高さ 37.7px の中で上下中央・金） */
.vc-body{color:var(--card-text);font:400 1.4rem/2.28rem 'Inter','Noto Sans JP',sans-serif;letter-spacing:-.015rem;text-align:center}

/* == 04 about（t = y − 9587）== */
#about{height:473.759rem;background:var(--cream);overflow:clip}
@media (min-width:1024px) and (orientation:landscape), (min-width:1367px){#about{margin-top:-36rem;z-index:4}}   /* GAP-AB（2026-10-15・本人「3つの約束から鯖江精機のことの間の空白を埋めて」）: #mission の下 33.5rem＋ぼかし（.mi-fade）の下は地色（#f0ede6＝--cream）だけで、カードの下から写真まで約 73rem 空いていた→ #about を 36rem 上に重ねる（重なる所は .mi-fade の不透明な部分〜地色だけなので見た目の継ぎ目は出ない）。上に重ねるので z-index を #mission（3）より上に。PC だけ */
.ab-rail,.ab-num-list,.ab-num-rail{position:absolute;inset:0}
.ab-h{color:var(--ink-2);font-weight:900;font-size:3.5rem;line-height:5.7rem;letter-spacing:.129rem;white-space:nowrap}   /* DSN-01（2026-10-13・デザイナー①「TOP見せ方修正」・Figma 703:34）: 見出し 43→35px */
.ab-p{color:var(--ink-2);font-family:'Noto Sans JP',sans-serif;font-weight:400;font-size:1.8rem;line-height:3.5rem;word-break:normal;line-break:strict}   /* DSN-01: 本文は Noto Sans JP 400・18px・行 35px（Figma 314:1275 の SF Pro Regular の代わり。前は Serif 700・24px） */
.ab-title{color:var(--brown);font-weight:700;font-size:8.728rem;writing-mode:vertical-rl;width:auto;line-height:8.728rem;letter-spacing:.562rem;white-space:nowrap}   /* L-064（2026-10-09）: 鯖江精機のことも本当の縦書きに（.mi-tate と同じ。字送り 9.29rem＝8.728 ＋ .562） */
@media (min-width:1024px) and (orientation:landscape), (min-width:1367px){.ab-title{padding-top:.281rem}}   /* L-064: 横書きの時の行の上の半分の余り（(9.29 − 8.728) ÷ 2）だけ下げて、字の位置を前と同じに（±2px）。PC だけ */
.ab-ghost{color:var(--gold);opacity:.25;font:700 5.169rem/9.7rem var(--cormorant);writing-mode:vertical-rl;white-space:nowrap}   /* DSN-01: 飾り文字 69.69→51.69px（列の幅 9.7rem は同じ＝字の中心 x 1604.5 のまま・Figma 336:1379） */
.ab-item p{position:absolute;left:0}
.ab-k{top:0;width:7.6rem;height:4.1rem;color:#000;font-weight:900;font-size:3.759rem;line-height:4.1rem;letter-spacing:.038rem;text-align:center;white-space:nowrap}
.ab-v{top:5rem;width:22rem;height:5.8rem;color:var(--gold);font-weight:900;font-size:7.193rem;line-height:5.8rem;white-space:nowrap}
.ab-v small{font-size:5.395rem}
.ab-d{top:12.7rem;width:23.5rem;height:18.4rem;color:var(--ink-2);font-weight:700;font-size:1.5rem;line-height:2.3rem;word-break:break-all}
.ab-divider{background:#000}
/* DSN-01（2026-10-13）: 見出しの飾り＝①二重線（Figma 703:32・703:35。黒 1px の線 2 本・間 4.5px・見出しの上端 +154.5〜160。見出しの箱の中に描く＝recruit.js の .rv-l のワイプで一緒に出る）②金の下線（703:41・703:79。#caaa6e 33%・太さ 5px。全角［ ］の中＝sbs_rct_gold の .gold に引く）。PC・SP 共通（em・rem なので大きさに合わせて縮む） */
#about .ab-h::after{content:"";display:block;margin-top:1.65rem;height:.55rem;box-sizing:border-box;border-top:1px solid #000;border-bottom:1px solid #000}
#about .ab-h .gold{color:inherit;background:linear-gradient(rgba(202,170,110,.33),rgba(202,170,110,.33)) no-repeat 0 calc(100% - .151em)/100% .143em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* DSN-02（2026-10-13・デザイナー②「NUMBERのところ作成しました」）: NUMBER の題字＋灰色の枠は 1 枚の絵（img/ab_number_1013.webp・Figma 356:107275。前の .ab-sabae／.ab-band／.ab-number／.ab-box／.ab-box-t は撤去） */
.ab-num-art img{display:block;width:100%;height:100%}
/* DSN-03（2026-10-13・デザイナー③）: 灰色の箱 222×297・#d9d9d9＋仮の文（Figma 703:66〜703:78。Cormorant Bold の指定だが和文は見た目どおり Noto Sans JP 700・18.69px・行 42px・#494949・幅 17rem で 1 行 9 字の 3 行） */
.ab-ph-box{display:flex;align-items:center;justify-content:center;background:var(--gray-box)}
.ab-ph-t{width:17rem;color:#494949;font:700 1.869rem/4.2rem 'Noto Sans JP',sans-serif;text-align:center}
/* AB-NUM-PHOTO（2026-11-06・本人「鯖江精機とはの写真が入っていないところ…上から 1〜6」）: 箱の中は写真（欄 rc_top_num_N_img）。枠に中央で切り抜き。欄が空の箱は見えないだけ（SP の並びを崩さない） */
.ab-ph-box--img{background:none;overflow:hidden}
.ab-ph-img{display:block;width:100%;height:100%;object-fit:cover}
.ab-ph-box--none{visibility:hidden}

/* == 共有部品（P2）: 欧文の眉見出し・金ボタン（§6 L の静止の見た目。hover は P3）== */
.en-h{color:#fff;font:600 3.6rem/5.4rem var(--cormorant);letter-spacing:-.126rem;white-space:nowrap}
.en-h--brown{color:var(--brown)}
.gbtn{display:block}
.gbtn-sh{}         /* 2026-10-07 面の浮いて見える影を撤去（旧: box-shadow:0 .5rem 1.6rem rgba(105,82,45,.133)） */
.gbtn-face{box-sizing:border-box;border:solid #fff;mix-blend-mode:multiply}
.gbtn-t{display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;line-height:1;white-space:nowrap;text-align:center}
.fb{pointer-events:none}
.fb>i{position:absolute;display:block;width:calc(var(--hl) + var(--sw) / 2);height:calc(var(--vl) + var(--sw) / 2);border:0 solid var(--fb-c,#fff);transition:transform .3s ease-out,border-color .3s ease-out}
.fb>.tl{left:calc(var(--sw) / -2);top:calc(var(--sw) / -2);border-left-width:var(--sw);border-top-width:var(--sw);border-top-left-radius:calc(var(--sw) / 2)}
.fb>.tr{right:calc(var(--sw) / -2);top:calc(var(--sw) / -2);border-right-width:var(--sw);border-top-width:var(--sw);border-top-right-radius:calc(var(--sw) / 2)}
.fb>.br{right:calc(var(--sw) / -2);bottom:calc(var(--sw) / -2);border-right-width:var(--sw);border-bottom-width:var(--sw);border-bottom-right-radius:calc(var(--sw) / 2)}
.fb>.bl{left:calc(var(--sw) / -2);bottom:calc(var(--sw) / -2);border-left-width:var(--sw);border-bottom-width:var(--sw);border-bottom-left-radius:calc(var(--sw) / 2)}
/* 05 仕事を知る（Link に drop-shadow があるので Figma では面の MULTIPLY が背景に効かない＝通常合成。05 png の色で確認） */
.gbtn--wk .gbtn-face{mix-blend-mode:normal;background:rgba(148,120,66,.6);border-width:.062rem}
.gbtn--wk .gbtn-t{font-size:2rem;letter-spacing:.1rem;padding-left:.1rem;filter:drop-shadow(0 0 .4rem rgba(148,83,66,.79))}
/* 07 見学を申し込む */
.gbtn--vi .gbtn-face{background:var(--gold-btn);border-width:.139rem}
.gbtn--vi .gbtn-t{font-size:4.509rem;letter-spacing:.225rem;padding-left:.225rem;filter:drop-shadow(0 0 .902rem #af9158)}
@media (min-width:1024px) and (orientation:landscape), (min-width:1367px){.gbtn--vi{scale:.6;transform-origin:0 50%}}   /* VI-BTN（2026-10-14・本人「小さくして」→「あと一回りぐらい小さく」・位置は元に戻す）: 見学のボタンを 6 割に（483×129→290×77）。左端（見出しの左端 x341）を軸に縮める。scale は transform と別なので、押した時の :active の transform:scale(.985) とも重なって効く */
/* 08 全て読む／09 環境を知る */
.gbtn--pe .gbtn-face{background:var(--gold-btn);border-width:.097rem}
.gbtn--pe .gbtn-t{font-size:3.118rem;letter-spacing:.156rem;padding-left:.156rem;filter:drop-shadow(0 0 .629rem #af9158)}

/* == 05 work（t = y − 14324.59・§4.05。前回 build の縦 4 本を移植）== */
#work{height:145.5rem;background:var(--g-work);z-index:4;overflow:clip}
.wk-machine{mix-blend-mode:plus-lighter}                  /* LINEAR_DODGE。opacity .71 は焼き込み済み */
.wk-flame{opacity:.24}                                     /* 288:4583 は未抽出 → 前回の workfields_flame_s.svg で代用（§4.05-3） */
.wk-h{color:#fff;font-weight:900;font-size:9.5rem;line-height:9.6rem;letter-spacing:.319rem;white-space:nowrap}
.ms-h{color:var(--brown)}
.wk-lead{color:#fff;font-weight:700;font-size:2.3rem;line-height:4.77rem;letter-spacing:.099rem;white-space:nowrap}
#work .panel{position:absolute;top:46.2rem;width:36rem;height:69rem;overflow:hidden;display:block;z-index:2}
#work .panel .ph{position:absolute;left:0;top:0;width:36rem;height:69rem;object-fit:cover;object-position:center;transition:opacity .5s ease}
#work .panel .scrim2{position:absolute;inset:0;background:rgba(0,0,0,.4);transition:opacity .5s ease}
#work .panel h3{position:absolute;left:0;right:0;top:10.6rem;width:max-content;margin:0 auto;writing-mode:vertical-rl;text-orientation:upright;
  color:#fff;font-weight:900;font-size:4.3rem;line-height:1;letter-spacing:.12em;white-space:nowrap;transition:transform .5s ease,opacity .5s ease}
#work .panel .cover{position:absolute;inset:0;z-index:5;transform-origin:right center;transform:scaleX(0);pointer-events:none;
  background-image:var(--g-work);background-size:192rem 145.5rem;background-repeat:no-repeat;will-change:transform}
#work .wp1 .cover{background-position:-24rem -46.2rem}
#work .wp2 .cover{background-position:-60rem -46.2rem}
#work .wp3 .cover{background-position:-96rem -46.2rem}
#work .wp4 .cover{background-position:-132rem -46.2rem}
/* WK-SALES（2026-10-27・本人「一台を4つの手で作るを5にしたい・営業を追加してほしい」）: 営業（wp0）を足して 5 本。並びの幅（24〜168rem＝144rem・.wf-bg と同じ）は変えず、1 本を 36→28.8rem に。
   位置は recruit-top.php の left（24・52.8・81.6・110.4・139.2rem）。覆いの地色の位置もそれに合わせる（上の 4 行を上書き） */
#work .panel,#work .panel .ph{width:28.8rem}
#work .wp0 .cover{background-position:-24rem -46.2rem}
#work .wp1 .cover{background-position:-52.8rem -46.2rem}
#work .wp2 .cover{background-position:-81.6rem -46.2rem}
#work .wp3 .cover{background-position:-110.4rem -46.2rem}
#work .wp4 .cover{background-position:-139.2rem -46.2rem}
.wf-latch{position:absolute;left:0;bottom:0;width:0;height:0;overflow:hidden;pointer-events:none}
.wf-bg{position:absolute;left:24rem;top:46.2rem;width:144rem;height:69rem;z-index:1;pointer-events:none;overflow:hidden}
.wf-bg__item{position:absolute;inset:0;opacity:0;transition:opacity .5s ease}
.wf-bg__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wf-bg__scrim{position:absolute;inset:0;background:rgba(0,0,0,.4)}
.wf-bg__title{position:absolute;left:14.8rem;top:22.7rem;color:#fff;font-weight:700;font-size:1.8rem;line-height:1.2;letter-spacing:.1em}
.wf-bg__title::before{content:"";position:absolute;left:0;bottom:-.4rem;width:100%;height:.1rem;background:#fff;transform-origin:left;transform:scaleX(0)}
.wf-bg__name{position:absolute;left:14.8rem;top:26rem;color:#fff;font-weight:900;font-size:9rem;line-height:1.3;letter-spacing:.06em}
.wf-bg__name .ch{display:inline-block;opacity:0;transform:scale(1.5)}
.wf-bg__desc{position:absolute;left:14.8rem;top:38.5rem;color:#fff;font-weight:700;font-size:1.8rem;line-height:1.8;opacity:0}
.wf-bg__arrow{position:absolute;right:5rem;top:50%;width:8rem;height:8rem;margin-top:-4rem;border-radius:50%;box-shadow:inset 0 0 0 .2rem #fff;opacity:0;transform:scale(1.5)}
.wf-bg__arrow svg{position:absolute;inset:0;margin:auto;width:2.4rem;height:2.4rem;transform:translateX(-2.4rem)}

/* == 06 typical（t = y − 15779.59）== */
#typical{height:175.4rem;background:var(--gold)}
.ty-band{overflow:hidden}
.ty-band img{display:block}                                /* LINEAR_BURN は CSS に無い → 地 #caaa6e との合成を焼いた不透明画像（tools/_work/bake_ty_band.py） */
.ty-dark{background:#000}
.ty-cream{background:var(--cream-2)}
.ty-k{color:var(--gold);font-weight:900;font-size:3.28rem;line-height:5.5rem;letter-spacing:.394rem;padding-left:.394rem;text-align:center;white-space:nowrap}
.ty-big{color:var(--gold);font-weight:900;font-size:5.58rem;line-height:5.5rem;letter-spacing:.67rem;padding-left:.67rem;text-align:center;white-space:nowrap}
.ty-d{color:var(--gold);font-weight:900;font-size:1.9rem;line-height:3.5rem;letter-spacing:.095rem;padding-left:.095rem;text-align:center;white-space:nowrap}
.ty-col--r .ty-k{color:#979696}
.ty-col--r .ty-big{color:#949390}
@media (min-width:1024px) and (orientation:landscape), (min-width:1367px){.ty-big{display:flex;justify-content:center}}   /* 文字ずれ（2026-10-15・本人「中央揃えで」）: 字が箱の幅（56.6rem）より広く（12 字で 75rem）nowrap のため、text-align:center が効かず左端から右へはみ出していた→ flex の中央寄せで、箱の中心から左右へ均等にはみ出す形に。PC だけ（SP は white-space:normal で折り返すので不要） */
.ty-col--r .ty-d{color:#949390}   /* 2026-10-15（本人「『合わないのは、こういう人』と色を合わせて」）: 白＋金の光彩 → 見出し .ty-big と同じ灰色（光彩も外した） */
.ty-li{color:var(--ink);font-weight:700;font-size:1.7rem;line-height:3.1rem;white-space:nowrap}
.ty-li--ls{letter-spacing:.051rem}
.ty-li{left:calc((var(--x) - 17.2) * .1rem);width:55.65rem;text-align:center}   /* TY-1030（2026-10-30・先方FB「箇条書きで見せてるわけではないので、中央ぞろえで（白帯に対して）」）: 文字の箱を白い箱と同じ左端・幅に（文字の --x は箱の左端 +17.2・箱の幅 556.5）して、左右の真ん中に */
.ty-cn{display:none}
/* 四隅枠をホバーで開く（2026-10-15・本人「四隅枠動きたい・ホバーで開くように」）: 箱（ty_box_1015.svg＝L 字なし）の上に L 字 4 つ（ty_corner_1015.svg を mask に・位置は元の ty_box_1009.svg の L 字と同じ）。
   静止の見た目は前と同じ。ホバーで他の四隅（.fb・.frame-btn）と同じく ±.7rem 外へ・.3s ease-out・色は変えない（本人 10/08「色変えずに広がるだけに」）。
   例外: 右（らしくない人）の黒い地では #1a1a1a の L 字が開いても見えないので、ホバーの間だけ SP と同じ #979696 に。PC だけ・マウス環境だけ・html.mo の下だけ（演出なし／reduced-motion では静止） */
@media (min-width:1024px) and (orientation:landscape), (min-width:1367px){
  .ty-cn{display:block;pointer-events:none}
  .ty-col li>img{pointer-events:auto}   /* 「反応が悪い」（2026-10-15）: 上の `main img{pointer-events:none}` で箱の画像がマウスを受けず、ホバーが文字の帯（高さ約 31px）にしか効かなかった。箱（約 90px）全体で効くように */
  .ty-cn i{position:absolute;width:2.4rem;height:2.3rem;background:#1a1a1a;-webkit-mask:url(../svg/ty_corner_1015.svg) 0 0/100% 100% no-repeat;mask:url(../svg/ty_corner_1015.svg) 0 0/100% 100% no-repeat}
  .ty-col:not(.ty-col--r) .ty-cn i{background:var(--gold)}   /* TY-1030（2026-10-30・先方FB「らしいのほう、四隅のカギかっこ金のほうがいいかも」）: 左（らしい人）の四隅の L 字を金に（SP は前から金）。右（らしくない人）は今までどおり */
  .ty-cn .tl{left:0;top:0}
  .ty-cn .tr{right:0;top:0;scale:-1 1}
  .ty-cn .br{right:0;bottom:.04rem;scale:-1 -1}
  .ty-cn .bl{left:0;bottom:.04rem;scale:1 -1}
  html.mo .ty-cn i{transition:translate .3s ease-out,background-color .3s ease-out}
  @media (hover:hover){
    html.mo .ty-col li:hover .ty-cn .tl{translate:-.7rem -.7rem}
    html.mo .ty-col li:hover .ty-cn .tr{translate:.7rem -.7rem}
    html.mo .ty-col li:hover .ty-cn .br{translate:.7rem .7rem}
    html.mo .ty-col li:hover .ty-cn .bl{translate:-.7rem .7rem}
    html.mo .ty-col--r li:hover .ty-cn i{background:#979696}
  }
}

/* == 07 visit（t = y − 17533.59）== */
#visit{height:59rem;background:var(--cream-3);position:sticky;top:0}   /* F14（2026-10-12）: コーポレートの #about と同じ。止める範囲は .vi-cover（#visit〜#people）だけ・#people（z-index 5）が下から覆う・画面より高い時の top は recruit-top.php 末尾の JS が負にする。演出の有無・幅に関係なく常に（コーポレートも常に） */   /* Figma のフレーム opacity .82 は描画（09 png・pc_full_half）に効いていない（地が #fffaed そのまま）→ 付けない */
.vi-h{padding-top:1.05rem;color:var(--brown-3);font-weight:700;font-size:6.3rem;line-height:8.3rem;letter-spacing:.378rem;white-space:nowrap;mix-blend-mode:multiply}

/* == 08 people（t = y − 18123.59）== */
#people{height:643.4rem;background:var(--ink);z-index:5;overflow:clip}
.pe-top{background:rgba(255,204,147,.53)}
.pe-black{background:var(--ink);clip-path:polygon(0 12.5rem,100% 0,100% calc(100% - 13.4rem),0 100%)}           /* 356:107421 平行四辺形（PNG の辺から実測）。L-062①（2026-10-09・Lark「背景の黒と上の帯の黒を同じにして」）: #000 → 地と同じ --ink（Figma の「黒帯」420:110327 は #000・地 420:87686 は #1a1a1a）。SP もこの 1 行 */
.pe-rv-photos{clip-path:polygon(0 12.5rem,100% 0,100% calc(100% - 13.4rem),0 100%)}                      /* マスク 356:107414（同じ傾き） */
.pe-gold{background:var(--gold);clip-path:polygon(0 12.58rem,100% 0,100% 31.095rem,0 100%)}           /* 363:191585（上辺 125.8／下辺 111.5 上がり） */
.pe-rv-copy p{color:#fff;font-weight:700;text-align:center;white-space:nowrap}
.pe-rv-ask{font-size:3.473rem;line-height:7rem}
.pe-rv-ask span{font-size:6.088rem}
.pe-rv-of{font-size:9.111rem;line-height:9.152rem}
.pe-rv-hon{color:var(--gold)!important;font-size:19.835rem;line-height:16.425rem}
.pe-rv-real{color:var(--gold)!important;font-size:6.767rem;line-height:13.6rem;writing-mode:vertical-rl;text-orientation:sideways}
.talk-band{position:absolute;left:0;top:calc(var(--k) * 65.827rem);width:100%;height:0;display:block}
.tb-face{transform-origin:0 0;transform:rotate(-4deg);   /* Figma の帯は x=0 の縦一列を全部覆っている → 左上角を (−60, 上辺が x=0 で 1413.14 を通る位置) に置き、幅 1990（P2 実測） */
  overflow:hidden;background:var(--g-band);
  box-shadow:inset 0 .1rem 0 rgba(191,160,90,.7),inset 0 -.1rem 0 rgba(191,160,90,.7)}
.tb-face>i{position:absolute;left:0;top:.1rem;width:100%;height:79.326rem;   /* ::after 333:1280。--g-band-after(122deg) は正規化座標の角度 → 帯の実寸で重ね合わせて 162deg・止まり位置は handle から換算（P2） */
  background:linear-gradient(162deg,#bb9568 14.08%,#d6ba90 33.02%,#f4e1bc 50.44%,#d6ba90 65.70%,#e8cb9f 87.56%)}
.tb-photo{mix-blend-mode:color-burn}                      /* DSN-04（2026-10-13・デザイナー④）: 写真は不透明（ACF の欄 rc_top_ct_N_img）。濃さは出す時の opacity .32（Figma のマスク .32）。前は .12 を画像に焼き込み済み */
.tb-ct{color:var(--brown-2);font:600 6.566rem/9.85rem var(--cormorant);letter-spacing:-.23rem;writing-mode:vertical-rl;white-space:nowrap}
.tb-no{color:var(--brown-2);font-weight:900;font-size:12.154rem;line-height:13.3rem;white-space:nowrap}
.tb-no[style*="--tk-x"]::after{content:"";position:absolute;left:calc(var(--tk-x) * 1em);top:calc(var(--tk-y) * 1em);width:.181em;height:.2304em;background:url(../svg/people_ct_tick_1009.svg) 0 0/100% 100% no-repeat;pointer-events:none}   /* L-024（2026-10-09・Lark「数字の部分にちょぼ」）: 番号の 2 桁目の右上の点（Figma 420:110347 ほか・22×28）。位置は番号の箱の左上から em（Figma の番号グループの座標 ÷ 字の大きさ 121.54）。値は recruit-top.php の --tk-x／--tk-y */
.tb-xs{mix-blend-mode:soft-light}
.tb-w{color:var(--brown-2);font-weight:700;font-size:11.298rem;line-height:10.2rem;letter-spacing:.565rem;white-space:nowrap}
/* CT-WLONG-TOP（2026-10-28・本人「採用担当 新卒•中途 に直してほしい」）: 2 字より長い語の帯だけ（inc/recruit/top.php の sbs_rct_ct_w_attr）。
   左の語はバツの左で右そろえ・右の語はバツの右から左そろえ。字は箱の幅（31.2rem）÷ 字数（--wn）に入る大きさまで縮め、字間を詰める（クロストークのページの CT-WLONG と同じ考え方） */
.tb-w--long{font-size:min(11.298rem, 31.2rem / var(--wn) / .97);letter-spacing:-.03em;font-feature-settings:"palt"}
.tb-w--long.tb-w--l{text-align:right}
.tb-s{color:var(--brown-2);font-weight:900;font-size:4.183rem;line-height:9.91rem;text-align:center;white-space:nowrap}
.tb-p{color:var(--brown-2);font-weight:700;font-size:3rem;line-height:5.6rem;letter-spacing:.127rem}
/* CT-R（2026-10-30・先方FB「今入れてくれてるやつを少し見出し的に大きくして説明文入れてほしい（小さめの文字で）・左の〇〇×〇〇のボックスの中央にくるように」）:
   右の箱 .tb-r（recruit-top.php・上下の真ん中＝左のかたまりの真ん中 1666.3）の中に、見出し（前の本文 3rem → 4.4rem・900）と説明文（前の本文より小さい 2.6rem）を縦に並べ、上下の真ん中に。
   説明文の下限 12px（帯の中身は --ct-s 倍に縮めてあるので割る）。前の本文の字は 1440 で 13.5px・1024〜1280 で 14px → 説明文は 12px でそれより小さい */
.tb-r{display:flex;flex-direction:column;justify-content:center}
.tb-r>.tb-p{display:block;font-weight:900;font-size:4.4rem;line-height:1.45;letter-spacing:.2rem}
.tb-r>.tb-d{display:block;margin-top:1.4rem;color:var(--brown-2);font-weight:500;font-size:max(2.6rem,calc(12px / var(--ct-s,.6)));line-height:1.75;letter-spacing:.05rem}
.tb-read{box-sizing:border-box}   /* 2026-10-15 本人「READ の四角を消して」: 枠と薄い面を外し、READ と矢印だけ残す。カーソル追従の READ（.cursor-read .cr-in）は別に枠を持つのでそのまま */
.tb-read{display:none}   /* TB-READ-OFF（2026-10-15・本人「この残ってる奴も消して、カーソルのやつだけ残す」）: 帯に置いてある固定の READ と矢印は出さない。カーソル追従の READ（.cursor-read .cr-in・recruit.js）はそのまま */
.tb-read b{color:var(--brown);font:600 2.887rem/3.483rem var(--cormorant);letter-spacing:.173rem;padding-left:.173rem;text-align:center;white-space:nowrap}
.pe-soft{mix-blend-mode:soft-light}
.pe-q{color:#fff;font-weight:900;font-size:14.448rem;line-height:12.19rem;white-space:nowrap}
.pe-label-box{box-sizing:border-box;border:.087rem solid transparent;mix-blend-mode:multiply}   /* Rectangle 17 は MULTIPLY（img の SVG の中では効かない）→ 線だけ CSS。隅は people_group_165_corners.svg。L-062②（2026-10-09・Lark「なんか□の線がある」）: 線を透明に（箱の大きさは同じ） */
.pe-label{color:var(--gold);font-weight:900;font-size:3.231rem;line-height:3.5rem;text-align:center;white-space:nowrap}
.pe-card{overflow:hidden;border-radius:1.5rem}
.pe-card::after{content:"";position:absolute;inset:0;border:1px solid #868686;border-radius:1.5rem;pointer-events:none}
.pe-card-img{position:absolute;inset:0;width:100%;height:100%}
.pe-card p{color:#fff;white-space:nowrap}
.pe-name{font-weight:900;font-size:8.162rem;line-height:6.887rem;text-align:center}
.pe-name small{font-size:2.862rem}
.pe-dept{font-weight:700;font-size:2.219rem;line-height:2.912rem;text-align:center}   /* DSN-05（2026-10-13・デザイナー⑤）: 人で長さが違うので中央揃え（Figma は手で中央に置いてある） */
.pe-catch{display:flex;align-items:center;justify-content:center;font-weight:900;font-size:3.7rem;line-height:4.8rem;text-align:center}   /* DSN-05: 表のひとこと（Figma 714:185821 ほか＝37px・行 48px・白・中央・改行は欄の改行どおり。白と nowrap は .pe-card p）。中の span 1 つに <br> を入れる（flex の直下に <br> を置くと 1 行に並ぶため） */
.pe-name2{font-weight:900;font-size:5.014rem;line-height:4.239rem;text-align:center}
.pe-name2 small{font-size:1.758rem}
.pe-dept2{font-weight:700;font-size:1.82rem;line-height:2.388rem}
.pe-nd2{display:flex;justify-content:center;align-items:baseline;gap:1rem}   /* DSN-05: 裏の名前と所属を 1 行で中央に（Figma の組 1602 も人ごとに手で中央・名前と所属の間は実測 約 10px）。中の .pe-name2・.pe-dept2 は上の規則がそのまま効く */
.pe-cmt{white-space:normal!important;font-weight:700;font-size:2.219rem;line-height:4.41rem;text-align:center;word-break:break-all;text-shadow:0 0 .78rem rgba(0,0,0,.5)}   /* DSN-05: 裏の文 25.19px → 22.19px（Figma 714 の新しい値）。行 44.1px・影はそのまま */
.pe-cards>li:nth-child(n+3){display:none}   /* DSN-05: 演出なし（PC）は 1 人目（S.Y）の表と裏が Figma の並びで出る。2 人目以降は出さない（リング・SP の束は JS が 2 つずつ読むので影響なし） */
.pe-dodge{mix-blend-mode:color-dodge}                     /* opacity .18 は焼き込み済み */
.pe-arrow{padding:0;border:0;background:none;cursor:pointer}
.pe-arrow img{width:100%;height:100%}

/* == 09 environment（t = y − 24557.59。P2 は固定高さ 108.3rem の通常配置。課題バンドは P3）== */
#environment{height:108.3rem;background:#8b5a32;z-index:4;overflow:clip}
.env-stage{position:relative;height:108.3rem;overflow:hidden}
.env-grad{position:absolute;inset:0;background:var(--g-env)}
.env-h{color:#fff;font-weight:900;font-size:5.8rem;line-height:9.6rem;letter-spacing:.319rem;white-space:nowrap}
.env-p{color:#fff;font-weight:700;font-size:1.8rem;line-height:4.77rem;letter-spacing:.099rem;white-space:nowrap}
.dia{display:block}
.dia span{text-align:center;white-space:nowrap;color:#fff}
.dia-en{font:400 1.534rem/2.09rem 'Inter',sans-serif}
.dia-h{font-weight:700;font-size:4.447rem;line-height:4.548rem}
.dia-d{font:500 1.728rem/3.46rem 'Inter','Noto Sans JP',sans-serif}
.dia-en--s{font-size:1.185rem;line-height:1.614rem;color:#fff!important}
.dia-h--s{font-size:3.435rem;line-height:3.513rem;color:#fff!important}
.dia-d--s{font-size:1.334rem;line-height:2.67rem;color:#fff!important}
/* FB-15（2026-10-09・実装FBシート No.15「ENVIRONMENT の写真の上の文字・ひし形の文字が小さく灰色で読みにくい」）: 全部の幅で効かせる（No.4 の 1024〜1280px だけ、とは別）。
   本文 14px 以上・ひし形の文字 12px 以上・白（灰 #d3d3d3 をやめた＝すぐ上の .dia-*--s の 3 行と、html.mo .dia--gro span）。
   ひし形の文字は、下の 2 つ（Support/Technical）と上（Growth）の大きさの比 4.447/3.435 を保つ（recruit.js の initDiaSpin が回すとき、この比で文字を拡大・縮小する）
   → 下限も 下 12px／上 12 × 4.447 ÷ 3.435 ＝ 15.53px。中央の 1 行が箱より広くなっても左右に均等にはみ出すよう flex で中央に。
   写真の上の本文は、左側だけ写真を暗くする（.env-grad::after・本文の裏で白との比 4.5 以上）＋文字の影。ひし形の文字は影だけ */
.env-p{font-size:max(1.8rem,14px);text-shadow:0 1px 3px rgba(0,0,0,.35)}
.env-grad::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.28) 0%,rgba(0,0,0,.28) 45%,rgba(0,0,0,0) 62%)}
.dia span{display:flex;justify-content:center;text-shadow:0 1px 2px rgba(0,0,0,.35),0 0 8px rgba(60,38,10,.45)}
.dia-en{font-size:max(1.534rem,15.53px)}
.dia-d{font-size:max(1.728rem,15.53px);line-height:max(3.46rem,2em)}
.dia-en--s{font-size:max(1.185rem,12px)}
.dia-d--s{font-size:max(1.334rem,12px);line-height:max(2.67rem,2em)}
@media (min-width:1281px) and (max-width:1439px) and (orientation:landscape), (min-width:1367px) and (max-width:1439px){.env-p{letter-spacing:0}}   /* FB-15: 14px にした本文の 3 行目が Support のひし形の辺に届かないよう、この幅だけ字間 0（1024〜1280 は FB-04 で折り返す） */

/* == 10 message（t = y − 25640.59）== */
#message{height:calc(118.5rem + var(--ms-dy, 0rem));background:var(--cream);z-index:6;overflow:clip}   /* MS-LEAD（2026-10-30）: 導入文があると --ms-dy（11.2rem・recruit-top.php）だけ高く */
.ms-lead{color:var(--brown);font-weight:700;font-size:2.2rem;line-height:4.77rem;letter-spacing:.099rem}   /* MS-LEAD（2026-10-30・先方FB「導入文（少し小さい文字で）」）: 見出しの下の導入文。OUR TECHNOLOGY のリード（.wk-lead 2.3rem）より少し小さく・色は見出しと同じ */
.ms-panel{display:block;overflow:hidden}
.ms-ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ms-scrim{position:absolute;inset:0;background:var(--g-scrim)}
.ms-h3{color:#fff;font-weight:900;font-size:3rem;line-height:5.4rem;white-space:nowrap}
.ms-name{color:#fff;font-weight:700;font-size:1.7rem;line-height:3.8rem;white-space:nowrap}
.ms-arrow{box-sizing:border-box;border:.1rem solid #fff}
.ms-arrow>span{position:absolute;left:1.7rem;top:.6rem;width:1rem;height:3.1rem;display:flex;align-items:center;justify-content:center;color:#fff;font:700 2.6rem/1 'Inter',sans-serif}
.ms-arrow>.ms-arrow__i{position:absolute;left:-.1rem;top:-.1rem;width:calc(100% + .2rem);height:calc(100% + .2rem);max-width:none;display:block}   /* L-101（2026-10-09）: 枠の外寸いっぱいに → の SVG（ms_arrow_1009.svg）。枠は .ms-arrow の border のまま。.ms-arrow>span はもう使わない */
.ms-btn{display:block;box-sizing:border-box;background:var(--g-msgbtn);border:.1rem solid #fff}
.ms-btn .p{left:calc(var(--x) * .1rem - .1rem);top:calc(var(--y) * .1rem - .1rem)}   /* 原点＝枠線の外側 */
/* 2026-10-08 本人「メッセージを読むのボタンが四つ角ボタンがへん」: 左右の縦線だけの目盛り（上下 18% の白・ホバーで縦線が離れて浮く）→ L 字の四つ角に。
   旧TOP の修正v5 C と同じ直し（v4 までは縦線 4 本・「見学を申し込む」と同じ L 字・白・ホバーで金）。太さは目盛りと同じ .2rem・縦は目盛りと同じ 18%・横 1.2rem */
.ms-tick{display:block}
.ms-tick::before,.ms-tick::after{content:"";position:absolute;width:1.2rem;height:18%;box-sizing:border-box;border:0 solid var(--ms-tc,#fff)}
.ms-tick::before{top:0;border-top-width:.2rem}
.ms-tick::after{bottom:0;border-bottom-width:.2rem}
.ms-tick:first-of-type::before,.ms-tick:first-of-type::after{left:0;border-left-width:.2rem}
.ms-tick:last-of-type::before,.ms-tick:last-of-type::after{right:0;border-right-width:.2rem}
.ms-btn-t{color:#fff;font-weight:700;font-size:1.9rem;line-height:2.7rem;letter-spacing:.152rem;padding-left:.152rem;text-align:center;white-space:nowrap}
.marquee{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.marquee__track,.marquee__set{position:absolute;inset:0}
.mq-t{color:#222;font:600 30.463rem/17.735rem var(--cormorant);letter-spacing:-1.066rem;white-space:nowrap}

/* == 11 entry（t = y − 27026.59）== */
.en-dodge{mix-blend-mode:color-dodge}
.en-screen{mix-blend-mode:screen}                         /* opacity .44 は焼き込み済み */
.en-title{color:#fffefe;font:italic 700 15.3rem/8.9rem var(--cormorant);letter-spacing:.26rem;white-space:nowrap}
.en-copy{color:#fff;font-weight:700;font-size:2.72rem;line-height:3.728rem;letter-spacing:.082rem;white-space:nowrap}
.en-copy span{color:var(--gold-text)}
.frame-btn{display:block}
.frame-btn__corner{display:block;background-color:var(--fbc,#c8a96e);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}   /* 裁定 v2-4: 静止でも隅を表示 */
.en-btn{background:var(--gold);box-shadow:inset 0 0 0 .087rem var(--gold-line)}
.en-btn2{box-shadow:inset 0 0 0 .082rem var(--gold-line)}
.en-btn-en{color:#fff;font:700 8.042rem/6.6rem var(--cormorant);letter-spacing:1.102rem;padding-left:1.102rem;text-align:center;white-space:nowrap}
.en-btn-ja{color:#fff;font-weight:700;font-size:1.578rem;line-height:2.8rem;letter-spacing:.061rem;white-space:pre}
.en-btn2-t{color:#fff;font-weight:900;font-size:2.542rem;line-height:2.6rem;letter-spacing:-.1rem;white-space:nowrap}

/* == 12 footer（t = y − 27732.45）== */
#footer{height:32.848rem;background:var(--gold)}
#footer a img{display:block;width:100%;height:100%}
.ft-addr{color:var(--ink);font-style:normal;font-weight:700;font-size:1.4rem;line-height:2.94rem;white-space:nowrap}
.ft-tel{color:var(--ink);font-weight:900;font-size:2.5rem;line-height:3.6rem;white-space:nowrap}
.ft-hours{color:var(--ink);font-weight:700;font-size:1.5rem;line-height:3.3rem;white-space:nowrap}
.ft-nav a{color:var(--ink);font-weight:700;font-size:1.4rem;line-height:2rem;white-space:nowrap}

/* == no-motion／reduced-motion（§3）: 演出を全部止め、Figma どおりの縦並び（ベースと同じ）== */
html.no-motion *,html.no-motion *::before,html.no-motion *::after{animation:none!important;transition:none!important}
html.no-motion .fv-stage,html.no-motion .ph-stage{position:relative;top:auto}

/* ======================================================================
   P3 動き（設計図 §6 A〜L・裁定 v1）
   すべて html.mo の下に書く（mo は head のインラインが「reduced-motion でない・no-motion でない・1024 以上」のときだけ付ける。
   recruit.js が 1.5 秒以内に起動しなければ外れる（裁定 v2-5）＝JS 失敗時は静止のまま全部見えている）。
   no-motion／reduced-motion では mo が付かないので、上の静止 CSS（P1/P2）がそのまま効く。
   動かすのは transform／opacity／clip-path／mask／filter だけ（例外: F 本文の width・J の文字色）。
   ====================================================================== */
@property --glow-o{syntax:'<number>';inherits:false;initial-value:1}
@property --flk-o{syntax:'<number>';inherits:false;initial-value:1}
@property --dim-o{syntax:'<number>';inherits:false;initial-value:1}

/* == 構造: 01 FV ピン（§3・§6 A）== */
html.mo #fv{height:calc(max(107.5rem,100vh) * 2 + 178.7rem)}   /* FV-EVEN（2026-10-16）: 元の 178.7rem に戻した（recruit.js の FV_PIN） */   /* FV-A-SHORT（2026-10-16）: 138.7→120.2rem（recruit.js の FV_PIN） */   /* FV-B-SHORT（2026-10-16）: 178.7→138.7rem（recruit.js の FV_PIN と揃える） */ /* 前 */ /* html.mo #fv{height:calc(max(107.5rem,100vh) * 2 + 178.7rem)} */   /* 裁定 v2-1: ピン区間 128.7rem を常に確保。p11（2026-10-05・本人「2枚目の表示が短い」）で B の区間を +50rem＝178.7rem（recruit.js の pinRun と揃える）。
   p14（2026-10-05・本人「コーポレートの会社案内→採用情報の切り替わり方をまねて」）: コーポレートは COMPANY を sticky で止め、RECRUIT（z-index 2）が下から覆う。
   同じにするため、ステージ 1 枚分（＋max(107.5rem,100vh)）だけ止める区間を延ばし、その分 02 を上に重ねる（下の html.mo #philosophy の margin-top）＝02 以降の位置は変えない。
   02 の黒地が画面上端に届いた所でちょうど止めが外れる。覆われる間、文字はページと一緒に流れ続け（recruit.js の pinRun）、写真・点描・キラキラ・金の S は
   本人が渡した Osmo「Parallax Image Layers」の速さで上へ流れる（recruit.js の osmoLayers）。02→03 も同じ作り（下の .ph-stage・#mission） */
html.mo .fv-stage{position:sticky;top:0;height:max(107.5rem,100vh);overflow:hidden}
html.mo .fv-a,html.mo .fv-shared,html.mo .fv-in{height:100%}
html.mo .fv-b{top:0;height:100%}
html.mo .fv-bokeh{height:max(140.4rem,calc(100% + 8.5rem));object-fit:cover}          /* ステージが 107.5rem より高い画面でも下端まで覆う */
html.mo .fv-b-photo{height:max(141.2rem,calc(100% + 11.5rem));object-fit:cover}
html.mo .fv-a .fv-grad{height:max(46rem,calc(100% - 61.5rem))}
html.mo .fv-worker{top:max(2.61rem,calc(100% - 128.627rem))}                       /* 人物の下端（Figma 1312）がステージより上で切れないよう、高い画面では下端に揃える */                     /* 下端の暗いグラデもステージの下端まで */
/* A: パララックス（JS が transform を書く。人物・帯・線は sansei と同じ .3s ease） */
html.mo .fv-bokeh{transform:scale(1.6)}
html.mo .fv-dots,html.mo .fv-sparkle,html.mo .fv-machine{will-change:transform;transition:transform .3s ease,opacity 1.5s ease}
html.mo .fv-worker{will-change:transform;transition:transform .3s ease,opacity 1.5s ease}
html.mo .fv-moe-glow{transition:rotate .3s ease,--glow-o 1.5s ease,--dim-o .4s ease;opacity:calc(var(--flk-o) * var(--glow-o) * var(--dim-o));
  animation:fv-flicker 2.6s ease-in-out infinite alternate}
html.mo .fv-moe-glow--2{opacity:calc(var(--flk-o) * var(--glow-o) * var(--dim-o) * .5);animation-delay:-1.3s}
@keyframes fv-flicker{0%{--flk-o:.75;filter:blur(0);transform:skewX(-1.5deg) translateY(.3rem)}100%{--flk-o:1;filter:blur(.3rem);transform:skewX(1.5deg) translateY(-.3rem)}}
/* B: A/B 切り替え（しきい値 mvH/3）。B の奥（写真・点描・キラキラ・QUIET）は 1 枚の層で A の上にフェード。
   A の手前（グラデ・機械・燃の影・女性）は葉ごとにフェード（ラッパーに opacity を掛けると中の screen/multiply が孤立して色が変わるため） */
html.mo .fv-b.fv-back{opacity:0;transition:opacity 1.5s ease}
html.mo .fv-stage.is-b .fv-b.fv-back{opacity:1}
html.mo .fv-a.fv-front .fv-grad{transition:opacity 1.5s ease}
html.mo .fv-stage.is-b .fv-a.fv-front :is(.fv-grad,.fv-machine,.fv-worker){opacity:0}
html.mo .fv-stage.is-b .fv-moe-glow{--glow-o:0}
html.mo .fv-b.fv-front .fv-grad{opacity:0;transition:opacity 1.5s ease}
html.mo .fv-stage.is-b .fv-b.fv-front .fv-grad{opacity:1}
html.mo .fv-gold-s--nm{display:none}
html.mo .fv-instant,html.mo .fv-instant *{transition:none!important}
/* p10（2026-10-05）D': FV の文字のまとまりの入れ物（JS が作る）。元の置き場所と同じ原点・大きさ＝中の文字の位置は変わらない。
   スクロールと一緒に流れ（translate は JS）、上端から 100px を過ぎたら薄くなる。
   参考の現物 sanseitechnos main.js の .top-mv-fade（opacity .3／transition all .4s ease）を丸写し。
   ただし all にすると流れる translate まで .4s 遅れるので、opacity だけにする */
html.mo .fv-tw{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;transition:opacity .4s ease}
html.mo .fv-tw.is-dim{opacity:.3}
/* p13（2026-10-05・本人「炎の影も一緒に上に行ってほしい」）: 燃の金の影（.fv-moe-glow ×2）も「静かに、燃えろ。」と一緒に流し、一緒に薄くする。
   影は multiply なので .fv-tw に入れると孤立して色が変わる → 入れ物には入れず、JS が影そのものの translate に流れた分を足す。
   流れが .3s 遅れないよう translate の transition は外した（横のパララックスも即時になる。差は数 px）。薄くするのは .fv-tw と同じ .3／.4s ease */
html.mo .fv-moe-glow.is-dim{--dim-o:.3}
/* B: 文字のマスクワイプ（toyox の値: 入 1s ease-out／出 .8s・右へ）。静止中は mask を外して影を切らない（w-done） */
html.mo .fvt{-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:left;mask-position:left;-webkit-mask-size:200% 100%;mask-size:200% 100%;
  transition:-webkit-mask-size var(--wd,1s) ease-out var(--wdl,0s),mask-size var(--wd,1s) ease-out var(--wdl,0s),
    clip-path .9s cubic-bezier(.51,.32,0,.96) var(--cd,0s),opacity var(--od,1s) ease var(--odl,0s),translate .8s ease-out var(--odl,0s)}
html.mo .fvt-b,html.mo .fvt.w-hide,html.mo .fvt.w-before,html.mo .fvt.w-show{-webkit-mask-image:linear-gradient(90deg,#000 50%,transparent);mask-image:linear-gradient(90deg,#000 50%,transparent)}
html.mo .fvt-b,html.mo .fvt.w-before{-webkit-mask-size:.01% 100%;mask-size:.01% 100%}
html.mo .fvt.w-show{-webkit-mask-size:200% 100%;mask-size:200% 100%}
html.mo .fvt.w-hide{-webkit-mask-position:right;mask-position:right;-webkit-mask-size:.01% 100%;mask-size:.01% 100%;--wd:.8s;--wdl:0s}
html.mo .fvt.w-done{-webkit-mask-image:none;mask-image:none}
/* FV-B-WIPE（2026-10-16・本人「最初右側のテキストが映ってない」）: マスクは文字の箱（Figma の幅 --w）の中しか効かないので、本文が箱より長いと（テスト環境の文で 483→約 880）
   ワイプの間（1.4s）は箱から右が切れ、w-done で急に出ていた → B の文字の箱を文字の長さまで広げる（短い時は今までの幅）。回転の中心は元の箱の中心のまま（位置は変えない） */
html.mo .fvt-b{min-width:max-content;transform-origin:calc(var(--w) * .05rem) 50%}
/* C: 「静かに、燃えろ。」の入場（fonts.ready＋500ms で intro-run。intro-run／intro-done／no-intro が無い間＝隠し状態） */
html.mo .fv-stage:not(.intro-run):not(.intro-done):not(.no-intro) :is(.fv-ch--1,.fv-ch--2,.fv-ch--4,.fv-ch--5){clip-path:inset(-20% 100% -20% -20%)}
html.mo .fv-stage:not(.intro-run):not(.intro-done):not(.no-intro) .fv-ch--3{opacity:0}
html.mo .fv-stage:not(.intro-run):not(.intro-done):not(.no-intro) .fv-moe-glow{--glow-o:0}
html.mo .fv-stage:not(.intro-run):not(.intro-done):not(.no-intro) .fv-shared .fv-gold-s{opacity:0;transform:scale(.96);filter:blur(1.2rem)}
html.mo .fv-stage:not(.intro-run):not(.intro-done):not(.no-intro) .fv-sub{opacity:0;translate:0 2rem}
html.mo .fv-stage.intro-run :is(.fv-ch--1,.fv-ch--2,.fv-ch--4,.fv-ch--5){clip-path:inset(-20%)}
html.mo .fv-stage.intro-run :is(.fv-ch--4,.fv-ch--5){--cd:.9s}   /* p27 で 1.3s（燃→えろ。の順）にしたが、p29（本人「一旦タイミングをそろえて」）で .9s（燃と同時）に戻した。WebGL が無い時のクリップの開始 */
html.mo .fv-stage.intro-run .fv-ch--3{--od:1s;--odl:.9s}
html.mo .fv-stage.intro-run .fv-moe-glow{transition:rotate .3s ease,--glow-o 1s ease .9s,--dim-o .4s ease}
html.mo .fv-shared .fv-gold-s{transform-origin:50% 100%;transition:opacity 1.4s ease-out 2.2s,transform 1.4s ease-out 2.2s,filter 1.4s ease-out 2.2s}
html.mo .fv-stage.intro-run .fv-sub{--od:.8s;--odl:2.6s;transition-timing-function:ease-out}
html.mo .fv-stage.intro-done .fvt{clip-path:none}
/* p26（本人「FV の燃の出て来かたを、コーポレートの炎と同じようにめらっとして。文字の形と色は変えなくていい」）: 燃の字は canvas（.fv-moe-gl・recruit.js の FLARE）が
   下からの火の前線と陽炎で出し、揺れが収まったら DOM の字に戻す。canvas は燃の箱を上下左右 40px 広げた箱＝中心が同じなので、燃と同じ回転で重なる。
   燃えている間（.is-burn）、DOM の燃は字を透明にして影だけ出す（影は今までどおり .9s から 1s でフェード） */
html.mo .fv-moe-gl{transform:translate(.2rem,.3rem) rotate(-1.14deg);pointer-events:none}
html.mo .fv-ch.is-burn{color:transparent}
/* p28（本人「えろの部分も下から出てくるようにしてほしい」）: え・ろ。も FLARE（燃と同じ前線＋陽炎）で下から出す（1.3s から）。
   FLARE が受け持つ字（.fl）は左からのクリップをやめ、影は燃と同じく opacity でフェード（1.3s から 1s）。
   出る前は最初から opacity 0 にしておく（.fl が付いた時に 1→0 のフェードが走ると、入場の瞬間に影だけ半分見える）。
   FLARE が使えない環境（.fl が付かない）は、え・ろ。のクリップを下から上へ開く（opacity は入場と同時に 1。クリップが閉じているので見えない） */
html.mo .fv-stage:not(.intro-run):not(.intro-done):not(.no-intro) :is(.fv-ch--4,.fv-ch--5){clip-path:inset(120% -20% -20% -20%);opacity:0}
html.mo .fv-stage.intro-run :is(.fv-ch--4,.fv-ch--5){--od:0s}
html.mo .fv-stage.intro-run :is(.fv-ch--4,.fv-ch--5).fl{clip-path:none;--od:1s;--odl:.9s}   /* p29（本人「一旦タイミングをそろえて」）: 1.3s → .9s＝燃と同時（recruit.js の FLARE.items と揃える） */
/* FV-VEIL（2026-10-20）の黒い幕は RC-INTRO（同日・ロゴの導入。css/rc-top-intro.css・js/rc-top-intro.js）に置き換えた。題字の入場（C）は導入が終わってから（recruit.js の initFv） */
/* FVIN（2026-10-20・本人「静かに燃えろの出てき方を調整したい」・比較用。recruit.js の FVIN が html に .fvin-b／c／e を付ける。決まったら 1 つに絞って消す）
   入場（intro-run）の間だけ今までのクリップ・フェードを止め（clip-path:none・transition:none）、animation（backwards＝待っている間も隠れたまま）で出す */
html.mo.fvin-b .fv-stage.intro-run :is(.fv-ch--1,.fv-ch--2){clip-path:none;transition:none;animation:fvin-soft 1.6s ease-out backwards}   /* b: 静かに、はぼかしからゆっくり */
html.mo.fvin-b .fv-stage.intro-run .fv-ch--2{animation-delay:.35s}
html.mo.fvin-b .fv-stage.intro-run .fv-ch--3{--odl:2.1s}                                                                                  /* b: 間を置いて燃えろ。（recruit.js の FLARE 2.1s と揃える） */
html.mo.fvin-b .fv-stage.intro-run :is(.fv-ch--4,.fv-ch--5){--cd:2.1s}
html.mo.fvin-b .fv-stage.intro-run :is(.fv-ch--4,.fv-ch--5).fl{--odl:2.1s}
html.mo.fvin-c .fv-stage.intro-run .fv-ch{clip-path:none;transition:none;animation:fvin-rise 1.3s cubic-bezier(.2,.6,.2,1) var(--fd,0s) backwards}   /* c: 1 字ずつ下から浮かぶ */
html.mo.fvin-c .fv-stage.intro-run .fv-ch--2{--fd:.25s}
html.mo.fvin-c .fv-stage.intro-run .fv-ch--3{--fd:.8s}
html.mo.fvin-c .fv-stage.intro-run .fv-ch--4{--fd:1s}
html.mo.fvin-c .fv-stage.intro-run .fv-ch--5{--fd:1.2s}
html.mo.fvin-e .fv-stage:not(.intro-run):not(.intro-done):not(.no-intro) :is(.fv-ch--1,.fv-ch--2).fl{opacity:0}                         /* e: 静かに、も FLARE（影は燃と同じく opacity で） */
html.mo.fvin-e .fv-stage.intro-run :is(.fv-ch--1,.fv-ch--2).fl{clip-path:none;--od:1s}
html.mo.fvin-e .fv-stage.intro-run .fv-ch--2.fl{--odl:.2s}
@keyframes fvin-soft{from{opacity:0;filter:blur(1.2rem)}}
@keyframes fvin-rise{from{opacity:0;translate:0 1.6rem;filter:blur(.6rem)}}

/* == 構造: 02 PHILOSOPHY ピン＋E 粒子（§6 E。ピン区間 290.8rem − 142rem = 148.8rem）== */
html.mo #philosophy{height:calc(max(142rem,100vh) * 2 + 223.8rem);margin-top:calc(-37.5rem - max(107.5rem,100vh))}   /* 裁定 v2-2: ステージ＋148.8rem＋37.5rem。p14: margin-top は上の html.mo #fv で延ばした分だけ重ねる。高さは下の .ph-stage と同じだけ延ばす */
html.mo .ph-stage{height:calc(max(142rem,100vh) * 2 + 186.3rem)}   /* p14（本人「企業理念のセクションも同じように」）: ピン 148.8rem のあと、03 の金（上 33.5rem は炎の縁）が画面上端に届くまで止める＝ステージ 1 枚分＋37.5rem 延ばす（148.8＋37.5＝186.3） */
html.mo .ph-pin{position:sticky;top:0;height:max(142rem,100vh);overflow:hidden}
html.mo #mission{margin-top:calc(-71rem - max(142rem,100vh))}   /* p14: 02 を延ばした分（ステージ 1 枚分＋37.5rem）だけ深く重ねる（もとの −33.5rem と合わせて −71rem − ステージ）＝03 以降の位置は変えない。②の層の動きは recruit.js の osmoLayers */
html.mo .ph-pin::before{content:"";position:absolute;inset:0;background:#000;opacity:0;transition:opacity .5s ease}   /* ②の地。①の下に敷く（①が散るのを隠さない） */
html.mo .ph-pin.is-burst::before{opacity:1}
html.mo .ph-2{top:0;height:100%;background:none}
html.mo .ph-1{height:100%}   /* PH-PIN（2026-10-12・本人「背景は文字と一緒にとまってほしい」）: ①の写真を文字と一緒に流す間は写真が下へずれる。画面が 142rem より高い（1280×1024 など）と ①の箱の下端 142rem で写真が横一直線に切れて見えたので、①もピンの高さ（max(142rem,100vh)）いっぱいに。142rem 以下の画面は今と同じ */
html.mo .ph-1 .ch{display:inline-block;position:relative}
/* p15（2026-10-05・本人「パワポ感がすごい。中央から粉々になって塵みたいに消えて」）: 1 文字ずつ飛ばす transition と金の点をやめた。
   崩す間は JS が文字を canvas（.ph-dust）に描いて塵にする。is-dust の間は DOM の文字を透明に（読み上げ用に残す）。中身は recruit.js の makeDust */
html.mo .ph-dust{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;visibility:hidden}
html.mo .ph-pin.is-dust .ph-1 .ph-dust,html.mo .ph-pin.is-dust2 .ph-2 .ph-dust{visibility:visible}   /* p15c: 常に表示しておく案は不採用（下の DOM の文字の描かれ方が変わり、100%／150%／200% でも入れ替えの瞬間に差が出た）。p27: ①は is-dust・②は is-dust2 */
html.mo .ph-1 :is(.ph-h1,.ph-body1){transition:opacity .6s ease .4s}   /* p29（本人「文字が塵になって戻ってくるのはいらない」）: 戻すとき①は塵から組み直さず、ふっと出す。②が .4s で消えてから（Fable S9: 同時だと 0.4 秒ほど二重に透けた） */
html.mo .ph-pin.is-dust2-out .ph-2 .ph-dust{opacity:0;transition:opacity .3s ease}   /* p29（Fable S10）: ②が集まっている途中で戻したら、塵を .3s で薄くしてから消す（今までは一瞬で消えた） */
html.mo .ph-pin.is-dust .ph-1 :is(.ph-h1,.ph-body1){opacity:0;transition:none}   /* 崩れ始めは canvas と同じフレームで入れ替える（transition なし） */
/* p30（2026-10-07・本人「いま一回塵になって、その塵が集まって文字になっているからそれをやめたい」）: ②は塵から組み立てない（p27 の dust2 をやめた）。
   ①が塵になって散ったあと、②は is-in でその場でぼかしから焦点が合うように出る（動かさない＝p27 で「パワポ感」と言われたフェード＋上へにはしない）。
   値は FV の金の S の出方（opacity 0＋blur(1.2rem) → 1.4s ease-out）を写した。戻すとき（is-in が外れる）は p29 と同じ .4s で消す（①は .4s 待ってから出る＝二重に透けない） */
html.mo .ph-2 :is(.ph-h2,.ph-body2){opacity:0;filter:blur(1.2rem);transition:opacity .4s ease,filter .4s ease}
html.mo .ph-pin.is-in .ph-2 :is(.ph-h2,.ph-body2){opacity:1;filter:none;transition:opacity 1.4s ease-out,filter 1.4s ease-out}
html.mo .ph-pin.ph-instant .ph-2 :is(.ph-h2,.ph-body2){transition:none}   /* 読み込み時にもう②の位置にいたとき・state-b は出しきった状態から */
html.mo .ph-1 :is(.ph-machine,.ph-our){transition:opacity .8s ease}
html.mo .ph-pin.is-in .ph-1 :is(.ph-machine,.ph-our){opacity:0}
html.mo .ph-2 .ph-slash{opacity:0}   /* p27: 見出し・本文はここから外した（塵が集まって出る）。p28: 斜線もフェード＋上へをやめ、燃えている間は canvas（.ph-slash-fire）、燃え終わったら元の画像 */
.ph-slash-fire{mix-blend-mode:plus-lighter;pointer-events:none;visibility:hidden}
html.mo .ph-pin.is-burning .ph-slash-fire{visibility:visible}
@media (min-width:1024px) and (orientation:landscape), (min-width:1367px){.ph-flames{display:none}}   /* p28（本人「左右の炎を消して」）: PC だけ。SP は SP 担当の持ち物（recruit-sp.css で配置している）なので依頼で確認 */
html.mo .ph-2 :is(.ph-machine,.ph-our){opacity:0;transition:opacity .8s ease}
html.mo .ph-2 .ph-flames img{opacity:0;transition:opacity .6s ease}
html.mo .ph-pin.is-in:not(.is-burning) .ph-2 .ph-slash{opacity:1}
html.mo .ph-pin.is-in .ph-2 :is(.ph-machine,.ph-our){opacity:1}
html.mo .ph-pin.is-in .ph-2 .ph-flame-l{opacity:1;transition-delay:.8s}
html.mo .ph-pin.is-in .ph-2 .ph-flame-r{opacity:1;transition-delay:1.1s}
/* p23_phalign（2026-10-05・本人「文字が消える位置と出てくる位置を一緒にしてほしい。背景の位置が急に変わるのが違和感」）:
   ①と②は同じ機械の写真を別の位置・大きさで置いていた（②は 1.047 倍・31.4rem 上）→ 切り替えで背景が跳んだ。②の写真と OUR PHILOSOPHY を①と同じ位置・大きさに。
   写真と OUR は一瞬で差し替える（どちらも①②で同じ見た目）。
   文字は p24（本人「消えた後に出てくる方の位置に文字が欲しかった」）で、②を Figma の位置のままにし、①を②の位置へ寄せる形に変えた（recruit.js centerText） */
html.mo .ph-1{isolation:isolate}   /* p25: ①の写真（lighten）が①の外（崩れ始めに現れる .ph-pin::before）と混ざらないように。混ざると崩れ始めの瞬間に写真の上の方だけ明るさが最大 15 変わった */
html.mo :is(.ph-1,.ph-2) .ph-machine{left:-12.6rem;top:-24.9rem;width:217.2rem;height:150.3rem}   /* p25（2026-10-06・本人「背景画像の中心ぐらいに文字が来るように」）: 写真（①の大きさ 150.3rem）の中心を文字のインクの中心（縦 50.25rem）へ＝上端 50.25 − 75.15。横は写真 96rem・文字 98.75rem でほぼ同じ。①の写真は 02 がせり上がる間、黒地より上を recruit.js update() が clip-path で切る（墨の縁や FV に重ねない） */
html.mo .ph-2 .ph-our{top:12.01rem}
@media (min-width:1024px) and (orientation:landscape), (min-width:1367px){html.mo :is(.ph-1,.ph-2) .ph-our{width:auto;height:min(90.6rem,calc(100vh - 21rem))}}   /* OUR-FIT（2026-10-16・本人「CONCEPT が画面に収まりきってない」）: 縦書きの OUR CONCEPT（90.6rem）は止まる画面（142rem）に合わせた高さで、画面の高さが足りないと下が切れていた→画面の高さ − 21rem（上の位置 18rem＋下の余白 3rem）を上限に縮める（幅は比率のまま）。上の位置は同じ */
html.mo :is(.ph-1,.ph-2) :is(.ph-machine,.ph-our){transition:none}   /* 写真（明るさ平均 17.25／17.03）と OUR（SVG はバイト単位で同一）は同じ位置・同じ見た目なので一瞬で差し替える。
   重ねて徐々に替えると、写真は lighten で、OUR は半透明の重なりで一時的に明るくなった（実測 review/p23_phalign/switch・Fable 再検収 S8: OUR が 1.6 秒間 1.5 倍） */
html.mo .ph-2 :is(.ph-machine,.ph-our){opacity:.001}                 /* 隠している間も描いておく（0 だと描画が省かれ、差し替えた瞬間に間に合わず 1 コマ黒くなった） */
html.mo .ph-pin.is-in .ph-2 :is(.ph-machine,.ph-our){opacity:1}
html.mo .ph-pin.is-in .ph-1 :is(.ph-machine,.ph-our){opacity:.001}

/* == 共通リビール（F・G・H・I。IO rootMargin −10%・1 回）== */
html.mo .rv-l{clip-path:inset(-20% 100% -20% -20%)}
html.mo .rv-d{clip-path:inset(-20% -20% 100% -20%)}
html.mo :is(.rv-l,.rv-d){transition:clip-path .8s cubic-bezier(.51,.32,0,.96) var(--rd,0s)}
html.mo :is(.rv-l,.rv-d).is-in{clip-path:inset(-20%)}
html.mo :is(.rv-l,.rv-d).is-done{clip-path:none}
html.mo .rv-f{opacity:0;transition:opacity .8s ease var(--rd,0s)}
html.mo .rv-f.is-in{opacity:1}
html.mo .io-s{visibility:hidden;pointer-events:none}

/* == F: 03 まだら写真（6×4 セル・リニア）＋本文の幅ワイプ == */
html.mo .mottle{overflow:hidden;pointer-events:none}
html.mo .mottle>i{position:absolute;display:block;background-repeat:no-repeat;opacity:0;transition:opacity .05s linear}
html.mo .mottle.is-in>i{opacity:1}
html.mo .mi-prose-clip{overflow:hidden;width:0;transition:width .8s cubic-bezier(.51,.32,0,.96)}
html.mo .mi-prose-clip.is-in{width:calc(var(--w) * .1rem)}
html.mo .mi-prose-clip>.mi-prose{left:0;top:0}
/* 2026-10-15（本人「ここ見切れてるから修正して」）: MU-03 の 1281px 以上の指定（104 行の overflow:clip visible／.is-in の幅 44rem）は、同じ詳細度で後ろにある上の 2 行に負けて効いていなかった
   → 本文が 24px・幅 44rem になっても包みは幅 39.9rem・高さ 48.3rem のまま＝右と下が切れていた。上の 2 行の後ろで同じ指定をもう一度書く（1024〜1280px は 786〜791 行で効いている） */
@media (min-width:1281px) and (orientation:landscape), (min-width:1367px){html.mo .mi-prose-clip{overflow:clip visible}html.mo .mi-prose-clip.is-in{width:44rem}}
.mi-prose{word-break:auto-phrase}.mi-nw{white-space:nowrap}
@media (min-width:1281px) and (orientation:landscape), (min-width:1367px){.mi-prose[data-mi="m"]{letter-spacing:.04em}}
@media (min-width:1024px) and (orientation:landscape), (min-width:1367px){.mi-prose[data-mi="v"]{width:52rem;letter-spacing:.04em}html.mo .mi-prose-clip.is-in:has(>.mi-prose[data-mi="v"]){width:52rem}}   /* 2026-10-15（本人が VISION の本文の改行を指定）: 一番長い行「「こうすればもっと良くなる」というところ」（20 字）が 44rem に入らない → VISION の本文だけ幅 52rem・字間 .04em（出るときのワイプの幅も 52rem） */   /* 2026-10-15（本人が改行位置を指定＝管理画面の本文に改行）: 一番長い行「それでも、私たちの一台が止まれば、」（17 字）が幅 44rem に .08em では入らず割れた → MISSION の本文だけ字間を .04em に */   /* 2026-10-15（本人「改行位置を調整してほしい」）: MISSION／VISION の本文を文節で折り返す（「製／品」「生み／出す」のような語の途中の折り返しをなくす）。Chrome・Edge で効く。管理画面で文を変えても同じ */

/* == G: 04 sticky（右の見出し top 16.7rem・NUMBER の中の列 top 15vh）== */
html.mo .ab-rail{inset:auto;left:143.9rem;top:16.8rem;width:21rem;height:441.9rem}
html.mo .ab-stk{position:sticky;top:min(20.2rem,max(16.7rem,calc(100vh - 68.6rem)));height:80vh;transform:translate(-143.9rem,-16.8rem)}   /* GAP-AB-HD（2026-10-15・本人「topと同じでここ（固定の見出しとヘッダーの間）に隙間が欲しい・線も一緒に下に来てほしい」）: 止まる位置を 16.7→20.2rem（＋3.5rem）に。題（上端＝この値）・線（その 1.4rem 下）・飾り文字・斜線の印は同じ入れ物 .ab-stk の中なので一緒に下がる。ヘッダーの下端（10.3rem）から題まで 6.4→9.9rem。画面が低い時は題の下端（題の高さ 66.6rem＋余白 2rem）が画面からはみ出さないよう、下限 16.7rem（元の位置）まで戻す */
html.mo .ab-num-rail{inset:auto;left:89.65rem;top:214.8rem;width:48.2rem;height:232rem}
html.mo .ab-num-stk{position:sticky;top:15vh;height:84.45rem;transform:translate(-89.65rem,-214.8rem)}   /* DSN-02: 84.09→84.45rem（NUMBER の絵 844.5px が入りきる高さ） */

/* == H: 05 WORK（前回 build の A/A-4/A-5 を移植）== */
html.mo #work .panel .ph{will-change:transform}
html.mo .wf-bg__desc{transition:opacity .5s ease .2s}
html.mo .wf-bg__item.is-active{opacity:1}
html.mo .wf-bg__item.is-active .wf-bg__desc{opacity:1}
html.mo .wf-bg__name .ch{will-change:transform,opacity;transition:transform .5s cubic-bezier(.215,.61,.355,1),opacity .5s cubic-bezier(.215,.61,.355,1)}
html.mo .wf-bg__item.is-active .wf-bg__title::before{transform:scaleX(1);transition:transform .5s cubic-bezier(.215,.61,.355,1)}
html.mo .wf-bg__item.is-active .wf-bg__name .ch{opacity:1;transform:scale(1)}
html.mo .wf-bg__item.is-active .wf-bg__arrow{opacity:1;transform:scale(1);transition:transform .5s cubic-bezier(.215,.61,.355,1),opacity .5s cubic-bezier(.215,.61,.355,1)}
html.mo .wf-bg__item.is-active .wf-bg__arrow svg{transform:translateX(0);transition:transform .5s cubic-bezier(.215,.61,.355,1)}
html.mo #work.is-hover .panel .ph,html.mo #work.is-hover .panel .scrim2{opacity:0}
html.mo #work.is-hover .panel h3{transform:translateY(5%);opacity:0;transition:transform .5s ease,opacity .3s ease .1s}
html.mo #work.is-hover .panel{box-shadow:inset .1rem 0 0 rgba(255,255,255,.2)}

/* == I: 08 CROSS TALK の帯（p16 で裁定 7 を変更: 普段は金の面だけ、ホバーで写真が .4s で出る。本体は末尾の p16）== */
html.mo .tb-photo{transition:opacity .4s ease}
html.mo .tb-photo-hv{display:none}   /* 旧ホバー（金面 .25＋写真を持ち上げた複製）の複製は recruit.js が作るが、もう使わない */
/* L-093（2026-10-09・Lark「カーソルに出てくる READ 左のやつで」）: 追従の READ を白い丸から、帯 1 の四角い「READ →」（.tb-read）と同じ見た目に。
   箱は Figma 143px を帯の中身と同じ --ct-s 倍（.cr-in を scale）。中の文字と矢印は .tb-read の .p と同じ値。ホバー中の帯の .tb-read は消す（Figma のホバー後の帯には固定の READ が無い） */
html.mo .cursor-read{position:fixed;left:0;top:0;width:calc(14.3rem * var(--ct-s, .6));height:calc(14.3rem * var(--ct-s, .6));pointer-events:none;opacity:0;z-index:10;transition:opacity .3s ease}
html.mo .cursor-read.is-on{opacity:1}
html.mo .cursor-read .cr-in{position:absolute;left:0;top:0;width:14.3rem;height:14.3rem;transform-origin:0 0;transform:scale(var(--ct-s, .6));box-sizing:border-box;border:.161rem solid var(--brown);background:rgba(202,170,110,.09)}
html.mo .cursor-read .cr-in b{position:absolute;left:3.053rem;top:2.892rem;width:8.16rem;height:3.483rem;color:var(--brown);font:600 2.887rem/3.483rem var(--cormorant);letter-spacing:.173rem;padding-left:.173rem;text-align:center;white-space:nowrap}
html.mo .cursor-read .cr-in img{position:absolute;left:5.4rem;top:8rem;width:2.809rem;height:2.693rem}
html.mo .tb-read{transition:opacity .3s ease}
html.mo .talk-band:hover>.tb-read{opacity:0}
/* I: PEOPLE リング（p19・21st の Circular Gallery を写す: 円筒に 6 枚・半径 60rem（現物の既定 600px）・視点〜中心 200rem・正面のカードは奥行き 0＝Figma と同じ大きさ。
   向きと不透明度は JS が毎フレーム書く（transition は付けない）。裏を向いても隠さない＝後ろに回るのが見える。ホバーで面が替わるのは正面の 1 枚だけ。
   半径・視点は JS の RR=60・PP=140 と対） */
html.mo .pe-cards{display:none}
html.mo .pe-ring{perspective:140rem;perspective-origin:50% 50%}
html.mo .pe-rot{position:absolute;inset:0;transform-style:preserve-3d;transform:translateZ(-60rem)}
/* p19c（本人「全体的に中央寄せにしてほしい」）: 半径 93→60rem で輪を寄せ、矢印も輪の外端（中心から ±46.82rem）の 8rem 外まで寄せる（左右とも 24.28rem）。
   リングの時だけ（静止＝Figma の矢印位置は元のまま）。top は p16 が使っているので transform で動かす */
html.mo .pe-arrow--next{transform:translateX(-24.28rem)}
html.mo .pe-arrow--prev{transform:translateX(24.28rem)}
html.mo .pe-rcard{position:absolute;left:72.75rem;top:0;width:46.5rem;height:63.8rem;border-radius:1.5rem;overflow:hidden}
html.mo .pe-rcard::after{content:"";position:absolute;inset:0;border:1px solid #868686;border-radius:1.5rem;pointer-events:none}
html.mo .pe-face{position:absolute;inset:0;transition:opacity .32s ease}
html.mo .pe-face--b{opacity:0}
html.mo .pe-rcard.is-front:hover .pe-face--b{opacity:1}
html.mo .pe-rcard.is-front:hover .pe-face--f{opacity:0}
html.mo .pe-rcard.is-back>.pe-face{transform:scaleX(-1)}   /* 裏が見えているカードは面を左右反転＝鏡文字にしない。切り替えは側面が線になる約 72.5°（JS の BACK＝acos(93/310)）なので見えない */
/* p19b（本人「静かに、燃えた瞬間は？の位置を赤枠に」→「もう少し上・半分かかってるイメージ」）: 見出し（枠・四隅・文字）を 7.994rem 下げて、
   枠の上下の真ん中を正面のカードの上辺（5482.91）に合わせる（枠 5363.03＋79.88/2＝5402.97 → 差 79.94）。
   リングの時だけ（静止＝Figma の 2 枚並びは元の位置）。top は p16 が使っているので transform で動かす。カードより前に出し、マウスは下のカードへ通す。
   枠の中は Figma どおり透明のまま（地色で塗った版は本人「ボタンの中身は透明でいい」で取り消し） */
/* L-062③④（2026-10-09・Lark「はてなとかぎかっこの距離感縮めたい」「写真とかぶせると見にくいので離して」）: 上の p19b の translateY(7.994rem) を外し、
   見出しを Figma の位置に戻す（「？」の下から枠まで 141.3→61.4・枠の下からカードの上まで 40 空く。1920 基準の px） */
html.mo #people>:is(.pe-label-box,img[src*="people_group_165_corners"],.pe-label){z-index:1;pointer-events:none}
html.mo .pe-face p{color:#fff;white-space:nowrap}

/* == D/J: 09 ENVIRONMENT（課題バンド §6 D・裁定 3）＋ひし形ホバー == */
html.mo #environment{margin-top:-100vh;height:calc(100vh + 108.3rem)}   /* 裁定 v2-3: 正味 108.3rem＝no-motion と同じ */
html.mo .env-stage{position:sticky;top:0;height:max(100vh,108.3rem)}
html.mo .env-photo{height:max(128.02rem,calc(100% + 11.32rem));object-fit:cover}
html.mo .dia{position:relative;z-index:0;transform:scale(1);transition:transform .3s ease,z-index 0s .3s}   /* p18: ホバー中は前へ（隣の点線が金の上に乗らない）。離したら金が消え終わってから戻す */
html.mo .dia--sup{transform-origin:118.048rem 69.2675rem}
html.mo .dia--tec{transform-origin:152.344rem 69.2675rem}
html.mo .dia--gro{transform-origin:135.313rem 41.0085rem}
html.mo .dia>img{clip-path:polygon(50% -4%,104% 50%,50% 104%,-4% 50%)}   /* 当たり判定をひし形に（描画は変えない） */
html.mo .dia>img.dia-gold{opacity:0;transition:opacity .3s ease;pointer-events:none}
html.mo .dia>img.dia-dot{transition:opacity .3s ease}   /* p18: 3 つとも点線 → ホバーで点線を消して金に入れ替える */
html.mo .dia span{transition:color .3s ease;pointer-events:none}
html.mo .dia--gro span{color:#fff}   /* FB-15（2026-10-09）: 灰をやめて白（p18 の「ホバー前は灰」は実装FBシート No.15 で取りやめ） */
/* p18b: 金になるのは :hover ではなく JS の .is-on（ホバーした下のひし形は回って上へ行くので、金になるのは指の下ではなく上の 1 つ）。
   回る位置（translate）と文字の大きさ（span の scale）は JS が毎フレーム書く（transition は付けない） */
html.mo .dia.is-on{z-index:1;transform:scale(1.06);transition:transform .3s ease,z-index 0s}
html.mo .dia.is-on>img.dia-gold{opacity:1}
html.mo .dia.is-on>img.dia-dot{opacity:0}
html.mo .dia.is-on span{color:#fff!important}

/* == K: 10 MESSAGE 下端のマーキー（右→左 40s linear・2 組で継ぎ目なし）== */
html.mo .marquee__track{right:auto;width:373.346rem;animation:marquee 40s linear infinite;will-change:transform}
html.mo .marquee__set--2{left:186.673rem;right:auto;width:186.673rem}
@keyframes marquee{to{transform:translateX(-50%)}}

/* == L: 四隅ブラケット（コーポレート .frame-btn。hover で隅が外へ .7rem・.3s ease-out・#d4b87a／:active scale .985）== */
html.mo .frame-btn .frame-btn__corner{pointer-events:none;transition:transform .3s ease-out,background-color .3s ease-out}
@media (hover:hover){
  html.mo .gbtn:not(.gbtn--wk,.gbtn--pe):hover .fb{--fb-c:#d4b87a}   /* 2026-10-08 本人「四つ角開いたときに…見えなくなるから色変えずに広がるだけに」: 金・茶の地に乗る「仕事を知る」(wk)・「全て読む」「環境を知る」(pe) は #d4b87a が地に溶けるので色を変えない（隅が開くだけ）。明るい地の「見学を申し込む」(vi) は今のまま */
  html.mo .gbtn:hover .fb>.tl{transform:translate(-7px,-7px)}
  html.mo .gbtn:hover .fb>.tr{transform:translate(7px,-7px)}
  html.mo .gbtn:hover .fb>.br{transform:translate(7px,7px)}
  html.mo .gbtn:hover .fb>.bl{transform:translate(-7px,7px)}
  html.mo .frame-btn:hover .frame-btn__corner{--fbc:#d4b87a}
  html.mo .frame-btn:hover .fbc-tl{transform:translate(-7px,-7px)}
  html.mo .frame-btn:hover .fbc-tr{transform:translate(7px,-7px)}
  html.mo .frame-btn:hover .fbc-br{transform:translate(7px,7px)}
  html.mo .frame-btn:hover .fbc-bl{transform:translate(-7px,7px)}
  html.mo :is(.gbtn,.frame-btn){transition:transform .12s ease}
  html.mo :is(.gbtn,.frame-btn):active{transform:scale(.985)}
}
@media (prefers-reduced-motion:reduce){html.mo *,html.mo *::before,html.mo *::after{animation:none!important;transition:none!important}}
/* p20_mshover（2026-10-05・本人「代表と、採用担当の言葉。のカード、ホバーしたらサイズは変わらず中の画像がズームされてほしい」）:
   コーポレートの現物（テーマ main.css の .cp-message__photo／.tx-media）と同じ: 枠は変えず写真だけ .9s cubic-bezier(.22,.61,.21,1) で 1.08 倍に寄る・マウス環境のみ。
   拡大の起点は顔の上（横 55%・上端）。中心起点だと髪の上端（写真の上から約 2%）が切れる（コーポレートで本人に指摘された 2026-08-17 と同じ理由） */
@media (hover:hover) and (pointer:fine){
  html.mo .ms-ph{transition:transform .9s cubic-bezier(.22,.61,.21,1);will-change:transform;transform-origin:55% 0}
  html.mo .ms-panel:is(:hover,:focus-visible) .ms-ph{transform:scale(1.08)}
  html.mo .ms-arrow__i{transition:transform .3s ease-out}   /* L-065（2026-10-09・Figma 547:221292「共通でボタンの矢印は動くように」）: ホバーで → だけ右へ .6rem（枠は動かさない） */
  html.mo .ms-panel:is(:hover,:focus-visible) .ms-arrow__i{transform:translateX(.6rem)}
}
/* p21_msbtn（2026-10-05・本人「メッセージを読むのボタンのホバーの四つ角のアニメーションが消えてる」）:
   旧TOP（recruit_pc_20260921・修正v2 §3）では四隅が開いていたが、新TOP は裁定 8（Figma に隅のブラケットが無い）で外していた。
   左右の目盛りの上下の白（18%）が四隅に見えるので、演出ありのときだけ上下に分けて描き（静止の見た目は同じ）、ホバーで他の四隅と同じく ±.7rem 開いて #d4b87a に（.fb と同じ .3s ease-out） */
html.mo .ms-tick::before,html.mo .ms-tick::after{transition:transform .3s ease-out,border-color .3s ease-out}   /* 2026-10-08 L 字の四つ角は上の .ms-tick::before/::after（演出なしでも同じ形）。ここは動きだけ */
@media (hover:hover){
  html.mo .ms-btn:is(:hover,:focus-visible) .ms-tick{--ms-tc:#d4b87a}
  html.mo .ms-btn:is(:hover,:focus-visible) .ms-tick:first-of-type::before{transform:translate(-7px,-7px)}
  html.mo .ms-btn:is(:hover,:focus-visible) .ms-tick:first-of-type::after{transform:translate(-7px,7px)}
  html.mo .ms-btn:is(:hover,:focus-visible) .ms-tick:last-of-type::before{transform:translate(7px,-7px)}
  html.mo .ms-btn:is(:hover,:focus-visible) .ms-tick:last-of-type::after{transform:translate(7px,7px)}
}


/* 2026-10-05 PC／SP の作業分け: 1023px 以下（SP）の指定は assets/css/recruit-sp.css に移した（SP 担当が編集する）。
   このファイルは PC 担当が編集する。SP だけに出す要素は class="sp-only"、PC だけに出す要素は class="pc-only" を付ける。 */
@media (min-width:1024px) and (orientation:landscape), (min-width:1367px){.sp-only{display:none!important}}

/* == p16（2026-10-05・本人「採用担当青山が聞くの下のセクション、1画面で2つ写るようにしてほしい」＋ホバー前後の画像）==
   08 CROSS TALK の帯を縮める: 帯の縦（間隔 65.827rem・金面の厚み）は --ct-b 倍、中身の文字と箱は --ct-s 倍（帯は画面幅いっぱいのまま）。
   中身は帯の上下の真ん中の線の 1 点を中心に縮める（下の「中身」の注）。
   帯が縮んだ分と減った分（Figma の 5 本×65.827rem − --ct-n 本×--ct-p ＝ --ct-dy）だけ、下の金の斜め帯〜PEOPLE を上げ、#people の高さも縮める。
   ホバー: 普段は写真 0（＝Figma の帯 1。金だけ）→ ホバーで 1（＝Figma の帯 2〜5。写真入り）。写真は縮めた帯の見える部分（平行四辺形）で切り抜く。 */
@media (min-width:1024px) and (orientation:landscape), (min-width:1367px){
  /* p16b（本人「ちょっと縦が狭すぎるからもう少し伸ばしてほしい」）: 帯の縦（間隔・厚み）の倍率 --ct-b を中身の倍率 --ct-s と分けた。中身は 0.6 のまま、帯だけ伸ばす */
  /* p16c（本人「01が2つあるから一つ消してほしい」）: 帯は 4 本（--ct-n）。Figma の 5 本×65.827rem との差だけ、下を上げて #people を低くする */
  #people{--ct-s:.6;--ct-b:.68;--ct-n:4;--ct-p:calc(65.827rem * var(--ct-b));--ct-dy:calc(5 * 65.827rem - var(--ct-n) * var(--ct-p));height:calc(643.4rem - var(--ct-dy))}
  .talk-band{top:calc(var(--k) * var(--ct-p))}
  .talk-band>.tb-face{height:calc(var(--h) * var(--ct-b) * .1rem)}
  .tb-face>i{height:calc(79.326rem * var(--ct-b))}
  /* 写真: 焼き込み済みの平行四辺形（縦 65.9rem）の上端に合わせ、縮めた帯の見える部分（縦 --ct-p）で切り抜く＝写真の上 6 割が見える。
     真ん中合わせだと顔の上が帯の上辺で切れた（Fable 検収）。--sh .15rem は焼き込みの上端と帯の上辺の約 1.3px のずれを埋める分 */
  .talk-band>.tb-photo{--sh:.15rem;top:calc(var(--y) * .1rem - var(--sh));opacity:0;object-fit:cover;object-position:50% 0;   /* DSN-04（2026-10-13・デザイナー④）: object-fit を足した（写真は Figma の置き方で切り出し済み＝外接箱 1920×793.26 と同じ比率。違う比率の写真を入れても中央で切り抜く） */
    clip-path:polygon(0 calc(13.293rem + var(--sh)),100% calc(var(--sh) - .133rem),100% calc(var(--sh) - .133rem + var(--ct-p)),0 calc(13.293rem + var(--sh) + var(--ct-p)))}
  .talk-band:is(:hover,:focus-visible)>.tb-photo{opacity:.32}   /* DSN-04: 出す時の濃さ .32（Figma のマスクの不透明度。前は 1＝.12 を画像に焼き込み） */
  /* 中身: 文字と箱を全部、1 点（帯の見える部分の上下の真ん中の線のうち、中身の横の中心 x=921.5 → y=1348.69＋329.135）を中心に --ct-s 倍し、
     その線を縮めた帯の真ん中（上辺＋--ct-p/2）へ下ろす。帯に沿った線の上の点が中心なので、Figma の帯の構図（間隔・並び）のまま小さくなり、
     帯の中で上下の余白が均等に増える（--ct-b＝--ct-s なら p16 と同じ）。並べ方は左右いっぱい案・中間案と撮り比べて決定 review/p16_ct2 */
  .talk-band>.p:not(.tb-face):not(.tb-photo):not(.tb-photo-hv){
    transform-origin:calc((921.5 - var(--x)) * .1rem) calc((1677.825 - var(--y)) * .1rem);
    transform:translateY(calc(var(--ct-p) / 2 - 32.9135rem)) scale(var(--ct-s))}
  :is(#people>.pe-gold,#people>.gbtn--pe,#people>.pe-soft,#people>.pe-q,#people>.pe-label-box,#people>img[src*="people_group_165_corners"],#people>.pe-label,.pe-cards>.pe-card,.pe-carousel>.pe-dodge,.pe-carousel>.pe-arrow,.pe-carousel>.pe-ring){
    top:calc(var(--y) * .1rem - var(--ct-dy))}
}

/* == p25（2026-10-05・本人「ここのカードを修正する」＋ Figma Make「鯖江精機カード」を参考に）: 03 OUR VALUE のカード 3 枚 ==
   参考の現物: Make（https://www.figma.com/make/rQnOQvLGMiEnb94y5fCAWz）に入っている 21st.dev の highlight-card.tsx（Tailwind v4。色が oklch・拡大や回転が独立プロパティ）。カードはリンクではないので、参考の外枠の cursor-pointer は写さない。
   プレビュー（makeproxy の figma.site）の DOM から class をそのまま読んで値を写した（Tailwind の 1px＝.1rem。カード幅 350px＝35rem は今の Figma のカードと同じ＝Figma のカードはこの部品の静止画）。
   今のカードの下の黒い帯は、Figma の白い薄膜（.vc-face）が高さ 374.6px 固定で、カード 419px の下 44px に掛かっていなかったため。参考は inset 0（全面）。
   足したもの: 下の光る線・背景の光（跳ねる 3 点は F07（10/09 本人「●●●いらない」）で HTML・CSS とも外した）（左下の大きい丸・小さい丸 2 つの波紋）・ホバー（1.05 倍＋−1° 傾き・光が横切る・角が光る）。
   参考の上の丸いアイコンは入れない（p25b・本人「上のアイコンはいらない」）。カード上端の線は Figma どおり残す。
   変えないもの: 文言・金の見出しと副題（Figma）・本文の色（#d1d5dc＝Tailwind v4 の gray-300＝参考の text-gray-300）。
   並びは参考どおり縦の flex（p-8）。3 枚の高さは本文がいちばん長い 2 枚目に揃え、下の線は下端に寄せる（参考の線は本文の mt-6 → ここでは本文の下に最低 2.4rem）。
   SP は触らない（足した要素は pc-only。recruit-sp.css の .vcard はそのまま）。常時のアニメとホバーは html.mo の下だけ＝no-motion・reduced-motion では静止 */
@media (min-width:1024px) and (orientation:landscape), (min-width:1367px){
  .vcard{display:flex;flex-direction:column;align-items:center;height:43.3rem;padding:3.2rem;-webkit-backdrop-filter:blur(2.4rem);backdrop-filter:blur(2.4rem)}   /* backdrop-blur-xl */
  .vcard>.p{position:relative;left:auto;top:auto;flex:none}
  .vcard>.vc-h{width:auto;height:auto;margin:2.14rem 0 1.15rem}         /* 見出しと副題の間は Figma の 11.5px。F07（10/09 本人「上のタイトル中央に」）: 上の線〜中の線の間で上下中央に＝Figma の下の余白 42.8px を上下 21.4px ずつに分けた（中の線と本文の位置は不変） */
  .vcard>img.p[src*="text_1.svg"]{margin:1.1rem 0}                       /* 1 行の副題は 2 行の副題（37.7px）と同じ高さの中で上下中央（Figma の置き方）＝3 枚の見出しの高さが揃う */
  .vcard>.vc-line:not(.vc-line--top):not(.vc-line--end){margin:2.14rem 0 1.5rem}   /* 副題と中の線の間（F07 で 4.28→2.14rem）・中の線と本文の間は Figma のまま */
  .vcard>.vc-body{height:auto;margin-bottom:2.4rem}
  .vcard>.vc-line--end{width:33.333%;height:.2rem;margin-top:auto;border-radius:999px;background:linear-gradient(to right,transparent,#fff,transparent);opacity:1}   /* w-1/3 h-0.5 */
  .vcard>.vc-body{margin-top:auto;margin-bottom:auto;padding-bottom:1.5rem}.vcard>.vc-line--end{margin-top:0}   /* VC-CENTER（下に足した 1.5rem＝中の線の下の余白と同じ＝見た目の上下を等しく）（2026-10-15・本人「カードの文章を線の中の中心に」）: 本文を中の線と下の線の間の上下中央に（前は中の線のすぐ下に詰め、下の線だけ一番下＝下に余りが溜まっていた）。上下の余りを等分＝本文の上下の auto・下の線は本文の下の auto で一番下のまま */
  /* 背景（参考の absolute inset-0 z-0 の層）。角の光は参考ではカードの直下だが、中身より下・背景より上という重なりが同じなので、この層の最後に置いた */
  .vc-deco{position:absolute;inset:0;overflow:hidden;pointer-events:none}
  .vc-face{left:0;top:0;width:100%;height:100%;background:linear-gradient(to top right,rgba(255,255,255,.05),rgba(255,255,255,.1));opacity:.4}
  .vc-orb{left:-8rem;top:auto;bottom:-8rem;width:19.2rem;height:19.2rem;border-radius:50%;background:linear-gradient(to top right,rgba(255,255,255,.1),transparent);filter:blur(6.4rem);opacity:.3}
  .vc-ping{left:4rem;top:4rem;width:6.4rem;height:6.4rem;border-radius:50%;background:rgba(255,255,255,.05);filter:blur(2.4rem)}
  .vc-ping--2{left:auto;top:auto;right:6.4rem;bottom:6.4rem;width:4.8rem;height:4.8rem;filter:blur(1.6rem)}
  .vc-band{left:0;top:0;width:100%;height:100%;background:linear-gradient(to right,transparent,rgba(255,255,255,.05),transparent);transform:translateX(100%) skewX(-12deg)}
  .vc-corner{left:0;top:0;width:8rem;height:8rem;background:linear-gradient(to bottom right,rgba(255,255,255,.1),transparent);border-bottom-right-radius:2.4rem;opacity:0}
  .vc-corner--br{left:auto;top:auto;right:0;bottom:0;background:linear-gradient(to top left,rgba(255,255,255,.1),transparent);border-radius:2.4rem 0 0 0}

  /* 動き（参考の Tailwind v4 の値そのまま。transition の曲線は Tailwind 既定の cubic-bezier(.4,0,.2,1)）。
     v4 のホバーは @media (hover:hover) の中だけで効く＝タッチの端末（1024px 以上の iPad など）で拡大・傾きが残らない。
     左下の大きい丸の group-hover:scale-110 は、v4 では独立した scale プロパティなので animate-bounce（transform）と重なって効く（p25c・Fable 検収の注記で確認） */
  html.mo .vcard{transition:transform .5s cubic-bezier(.4,0,.2,1)}
  html.mo .vc-face{transition:opacity .5s cubic-bezier(.4,0,.2,1)}
  html.mo .vc-orb{transition:all .7s cubic-bezier(.4,0,.2,1);animation:vc-bounce 1s infinite}
  html.mo .vc-ping{animation:vc-ping 1s cubic-bezier(0,0,.2,1) infinite}
  html.mo .vc-band{transition:transform 1s cubic-bezier(.4,0,.2,1)}
  html.mo .vc-corner{transition:opacity .5s cubic-bezier(.4,0,.2,1)}
  html.mo .vcard>.vc-h{transition:transform .3s cubic-bezier(.4,0,.2,1);animation:vc-pulse 2s cubic-bezier(.4,0,.6,1) infinite}
  html.mo .vcard>.vc-body{transition:color .3s cubic-bezier(.4,0,.2,1)}
  html.mo .vcard>.vc-line--end{transition:all .5s cubic-bezier(.4,0,.2,1);animation:vc-pulse 2s cubic-bezier(.4,0,.6,1) infinite}
  @media (hover:hover){
    html.mo .vcard:hover{transform:scale(1.05) rotate(-1deg);box-shadow:inset 0 0 0 .08rem rgba(255,255,255,.25),0 2.5rem 5rem -1.2rem rgba(255,255,255,.05)}   /* hover:border-white/25 hover:shadow-white/5 */
    html.mo .vcard:hover .vc-face{opacity:.6}
    html.mo .vcard:hover .vc-orb{opacity:.5;scale:1.1}
    html.mo .vcard:hover .vc-band{transform:translateX(-200%) skewX(-12deg)}
    html.mo .vcard:hover .vc-corner{opacity:1}
    html.mo .vcard:hover>.vc-h{transform:scale(1.05)}
    html.mo .vcard:hover>.vc-body{color:#e5e7eb}                        /* group-hover:text-gray-200 */
    html.mo .vcard:hover>.vc-line--end{width:50%;height:.4rem}           /* group-hover:w-1/2 group-hover:h-1 */
  }
}
@keyframes vc-ping{75%,100%{transform:scale(2);opacity:0}}                /* Tailwind animate-ping */
@keyframes vc-pulse{50%{opacity:.5}}                                     /* Tailwind animate-pulse */
@keyframes vc-bounce{0%,100%{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}}   /* Tailwind animate-bounce */

/* == p31（2026-10-08・本人FB「③鯖江精機のこと＋NUMBER／④クロストークのビジュアル変えました」・Figma 420:47581）==
   設計書 recruit_top_fb_20261008/design/設計書_TOP修正_20261008.md。控え backup_20261008_1157_fb1008 */
@media (min-width:1024px) and (orientation:landscape), (min-width:1367px){
  /* p31c（2026-10-08・Figma メモ「情報だけ、htmlのを入れてください」）③ 4 段の文: 見出しは 3 行（html の改行どおり）・本文は 2 段落を 1 つの箱に。
     字数が増えた分は箱の高さを内容に合わせる（固定しない）。本文の始まりは見出しの下（--y に +64 済み）、行間は 3.5→3.2rem・見出しの行間は 5.7→5.3rem に詰めた（Figma の書体・大きさ・色はそのまま） */
  #about .ab-h{height:auto;line-height:4.6rem;letter-spacing:.3rem;font-feature-settings:normal}   /* DSN-01（2026-10-13・Figma 703:34）: 前は line-height 5.3rem・字間 0＋palt（「製品をつくるための、」10 字が箱 396 を超えて縦線に掛かるため詰めていた）。見出しが 43→35px になり、10 字×38px＝380px が箱 396px に収まるので詰めない＝Figma の行 46px・字間 3px */
  #about .ab-p{height:auto;font-size:1.8rem;line-height:3.5rem}   /* F02（2026-10-08・本人「鯖江精機のことの本文を一回り小さく」）: 2.4→2rem・行間 2.7rem。DSN-01（2026-10-13）で 1.8rem・3.5rem（Figma 314:1275）に上書き。PC だけ（SP は recruit-sp.css のまま） */
  #about .ab-pa{display:block}
  #about .ab-pa+.ab-pa{margin-top:3.5rem}   /* DSN-01: 段落の間を 1 行分（前は 1rem。Figma 703:38 のブロック 1 は空行 1 つ） */
  #about .ab-tl{display:inline-block;margin-top:1.2rem;color:var(--brown);font-weight:900;font-size:1.8rem;line-height:2.6rem;letter-spacing:.08rem;border-bottom:1px solid currentColor;text-decoration:none}
  /* ③ NUMBER: 1 枠 1 項目（見出し・値と単位・説明・時点の注記）。枠の中で上下中央・左揃え（高さは内容に合わせる） */
  .ab-item--n{display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
  .ab-item--n p{position:relative;left:auto;top:auto;width:auto;height:auto;text-align:left}
  .ab-item--n .ab-k{font-size:2.4rem;line-height:3.4rem;letter-spacing:.048rem}
  .ab-item--n .ab-ks{margin-left:.6rem;font-size:1.4rem;font-weight:700;letter-spacing:.04rem}   /* 「グループ連結」の小さな添え字 */
  .ab-item--n .ab-v{margin-top:.4rem;font-size:6.4rem;line-height:6.6rem}
  .ab-item--n .ab-v small{margin-left:.2rem;font-size:3.2rem}
  .ab-item--n .ab-d{margin-top:1.2rem;font-size:1.5rem;line-height:2.3rem;word-break:normal;line-break:strict}
  .ab-item--n .ab-asof{margin-top:.8rem;color:rgba(26,26,26,.7);font-weight:700;font-size:1.2rem;line-height:1.8rem}
  .ab-review-note{display:inline-block;margin-left:.2rem}

  /* ④ CROSS TALK の見出し（Figma 420:125756 Cormorant SemiBold 323.5px 白・左に約 2.6° 上がり）とクロスの印（558:221592 #ffe7ba soft-light） */
  .pe-ct-big{color:#fff;font:600 32.355rem/25rem var(--cormorant);letter-spacing:-2.2rem;margin-left:2.9rem;white-space:nowrap;transform-origin:0 100%;transform:rotate(-2.58deg)}
  .pe-ct-big span{padding-left:29.7rem}
  .pe-ct-xs{mix-blend-mode:soft-light;object-fit:contain;transform:rotate(-2.17deg)}   /* CSS の soft-light は Figma より少し褪せる（comp-measure-to-css）。差は小さいので式どおり */
  /* 写真は 9 人の切り抜き（塊ごとに透明あり）→ 旧 REAL VOICES の平行四辺形の切り抜きは使わない */
  .pe-ct-photos{clip-path:none}
  .pe-ct-halo{mix-blend-mode:plus-lighter}   /* 人の後ろの網点の光（Figma の絵との差＝足し算で重ねると Figma に戻る） */
  /* 黒い帯〜下は Figma で 181px 上がった → 帯 4 本と、その下（金の斜め帯〜PEOPLE・p16 の --ct-dy で上げている物）も 18.1rem 上げ、#people も同じだけ低くする */
  #people{--ct-up:18.1rem;--ct-dy:calc(5 * 65.827rem - var(--ct-n) * var(--ct-p) + var(--ct-up))}
  .talk-band{top:calc(var(--k) * var(--ct-p) - var(--ct-up))}
  /* 動き（Figma メモ 420:156752「リアルボイスとタイトル左から右に出てくると共に、写真も一緒に」・420:156751「人がふわんと出てくる感じで」）:
     文字は今までどおり左→右のワイプ（.rv-l）。人は同じ瞬間に、FV の金の S の出方（opacity 0・scale .96・blur 1.2rem → 1.4s ease-out）＋
     FV のサブコピーの浮き（translate 0 2rem）で「ふわん」と出る。塊ごとに左から .1s ずつ（--i） */
  /* p31b（2026-10-08・検収「題字は 0.4s で出きり、人は同じ位置でぼけが抜けるだけ＝一緒に左から右へ出るが読めない」）:
     題字の組（#pe-rv・印・文）の払いを 1s に（曲線は .rv-l の現物 cubic-bezier(.51,.32,0,.96) のまま）。
     人の塊は同じ曲線・同じ 1s で「ふわん」（ぼかし・浮き・縮み・不透明度は p31 の値のまま）。遅れ --fd は recruit.js が
     「払いを人の塊の幅に当てたとき、払いの先が塊の左端に届く時刻」から出す＝払いの進みと並んで左から右へ出る */
  html.mo #people .rv-l{transition-duration:1s}
  html.mo .pe-ct-photos>img.rv-fw{opacity:0;scale:.96;translate:0 2rem;filter:blur(1.2rem);
    transition:opacity 1s cubic-bezier(.51,.32,0,.96),scale 1s cubic-bezier(.51,.32,0,.96),translate 1s cubic-bezier(.51,.32,0,.96),filter 1s cubic-bezier(.51,.32,0,.96);transition-delay:var(--fd,0s)}
  html.mo .pe-ct-photos>img.rv-fw.is-in{opacity:1;scale:1;translate:none;filter:none}
}

/* == FB-04（2026-10-09・実装FBシート No.4「1024〜1280px で文字が比例して縮み、読めない」）: 1024〜1280px だけ、文字に下限 ==
   型（ほかのページの束も同じ型）: font-size:max(今の rem, 下限 px)。下限＝本文 14px／ボタン 13px／注釈・ラベル 11px。行の高さが rem なら max(今の rem, 今の比 em)。
   transform:scale で縮めた箱（CROSS TALK の帯の --ct-s・F08 の .mi-scaler）の中は、下限を倍率で割る。中央揃えで 1 行のまま広がる文字は display:flex で左右に均等にはみ出させる。
   字が大きくなって箱からあふれる所だけ、この幅の中で箱の幅・行の高さ・位置を変えた（1281px 以上と 1023px 以下＝SP は今のまま）。
   決めた数字の根拠: fbsheet_20261009/design/依頼/束A_指示書.md（Windows の常設スクロールバー 17px でも重ならないことを実測） */
@media (min-width:1024px) and (max-width:1280px) and (orientation:landscape){
  /* 02 PHILOSOPHY ② の本文 */
  .ph-body2{font-size:max(2.5rem,14px)}
  /* 03 企業理念のリード 14px */
  .mi-lead{font-size:max(2.5rem,14px)}
  /* 03 MISSION／VISION の本文 14px: 箱を 39.9→44rem に広げ、行を 6.9→5.8rem に詰めて、Figma の箱の高さ（48.3／41.4rem）に収める。
     出るときの幅のワイプ（recruit.js が包む .mi-prose-clip）も 44rem まで開く。縦は念のため切らない（overflow は横だけ clip）。
     F08 の画面固定で縮む時（.mi-scaler の scale(s)）は下限を s で割る（s は recruit.js の F08 の layout() が --mi-s に書く。.75 より小さい s は .75 として扱う） */
  .mi-prose{width:44rem;font-size:max(2.4rem,15px);line-height:5.8rem;letter-spacing:.06em}   /* MU-03: 2→2.4rem・下限 14→15px・字間 .06em */
  html.mo .mi-prose-clip{overflow:clip visible}
  html.mo .mi-prose-clip.is-in{width:44rem}
  html.mo .mi-scaler .mi-prose{font-size:max(2.4rem,calc(15px / max(var(--mi-s,1),.75)))}
  /* 03 OUR VALUE: リード 14px（帯は FB-16・recruit-top.php）。カード 3 枚は横に並べ直して広げる（左 36.85rem から 143.15rem・間 2rem・中の余白 2rem・高さは中身に合わせる）。
     本文 14px。副題（文字の画像・Figma で字が約 16px）は字が 11px 相当になる幅（var(--w) × 11/16 px）以上に */
  .mi-value-r{font-size:max(2rem,14px)}
  .mi-cards{position:absolute;left:36.85rem;top:365.5rem;width:143.15rem;display:flex;gap:2rem;align-items:stretch}
  .mi-cards>.vcard{position:relative;left:auto;top:auto;width:auto;flex:1 1 0;height:auto;min-height:43.3rem;padding:2rem}
  .vc-body{font-size:max(1.4rem,14px);line-height:max(2.28rem,1.55em);text-wrap:pretty}
  .vcard>img.p{width:max(calc(var(--w) * .1rem),calc(var(--w) * .6875px));height:auto}
  /* 04 鯖江精機のこと: 本文 14px。あふれる分、文の箱を 37.7→42rem（右の列）・43rem（左の列）に広げ、1.2rem 上げ、行 1.3em・段落の間 .6rem に（次の段の写真に届かない） */
  #about .ab-p{top:calc(var(--y) * .1rem - 1.2rem);font-size:max(1.8rem,14px);line-height:max(3.5rem,1.5em);text-wrap:pretty}   /* DSN-01（2026-10-13）: 本文が 20→18px（Figma）になったので下限の式も 1.8rem・行 3.5rem（比 1.5em）に */
  #about .ab-pa+.ab-pa{margin-top:.6rem}
  #about .ab-p:is([data-ab="1"],[data-ab="3"]){width:46rem}   /* DSN-01: 右の列は x 958 から 46rem（前は x 999 から 42rem）＝右端 x 1418 < 縦線 1439 */
  #about .ab-p:is([data-ab="2"],[data-ab="4"]){width:45rem}   /* DSN-01: 左の列は 45rem（前は 43rem）＝右端 x 774 < 写真 785。44rem だと 1024px で 2 段目の本文が 8 行になり次の段の写真に 6px 掛かったので 45rem に（実測 1024〜1280） */
  /* NUMBER: 説明 14px・添え字（グループ連結）と時点の注記 11px */
  .ab-item--n .ab-d{font-size:max(1.5rem,14px);line-height:max(2.3rem,1.5em)}
  .ab-item--n .ab-ks{font-size:max(1.4rem,11px)}
  .ab-item--n .ab-asof{font-size:max(1.2rem,11px);line-height:max(1.8rem,1.5em)}
  .ab-ph-t{width:auto;padding:0 1.6rem;font-size:max(1.869rem,11px);line-height:max(4.2rem,1.8em)}   /* DSN-03（2026-10-13）: 灰色の箱の仮の文。11px の下限・箱の幅いっぱい（左右 1.6rem）で折り返す */
  /* 05 OUR TECHNOLOGY: リード 14px・ホバーで出る写真の上の「仕事を知る」11px／説明 14px・ボタン 13px */
  .wk-lead{font-size:max(2.3rem,14px)}
  .ms-lead{font-size:max(2.2rem,13px)}   /* MS-LEAD（2026-10-30） */
  .wf-bg__title{font-size:max(1.8rem,11px)}
  .wf-bg__desc{font-size:max(1.8rem,14px)}
  .gbtn--wk .gbtn-t{font-size:max(2rem,13px)}
  /* 06 TYPICAL: 説明 14px（中央のまま左右に均等にはみ出させる）。箇条 14px は四隅の箱の中で 2 行まで折り返し、箱の上下の真ん中に（箱 90.5 の上端＝文字の --y − 29.77・文字の幅 522） */
  .ty-d{font-size:max(1.9rem,14px);display:flex;justify-content:center}
  .ty-li{top:calc(var(--y) * .1rem - 2.977rem);height:9.05rem;width:55.65rem;padding:0 2rem;display:flex;align-items:center;justify-content:center;white-space:normal;word-break:auto-phrase;text-wrap:balance;font-size:max(1.7rem,14px);line-height:1.35}   /* TY-1030: 幅を白い箱と同じ 55.65rem（前 52.2rem）にして左右の真ん中（左右 2rem はあける）。2 行に折れる時は 2 行の長さをそろえる（中央ぞろえで 1 行目だけ長くならないように） */
  /* 08 CROSS TALK の帯（中身は --ct-s 倍に縮めてある → 下限を倍率で割る）。本文の箱は右へ 86rem まで広げて、帯の斜めの下辺に届かないように */
  .tb-s{font-size:max(4.183rem,calc(14px / var(--ct-s)));display:flex;justify-content:center}
  /* CT-R（2026-10-30）: 見出しの下限 16px（説明文の 12px は CT-R の基本の規則。右の箱の幅 86rem はどの幅でも recruit-top.php の --w:860） */
  .tb-r>.tb-p{font-size:max(4.4rem,calc(16px / var(--ct-s)))}
  .talk-band>.tb-p{width:86rem;font-size:max(3rem,calc(14px / var(--ct-s)));line-height:max(5.6rem,1.75em);text-wrap:pretty;
    margin-top:calc(((5.6rem - max(5.6rem,1.75em)) / 2 + .381 * (1em - 3rem)) * var(--ct-s))}   /* TB-P-TOP（2026-10-28）: 字と行が大きくなった分、1 行目の字の上端が下がる → 戻して語の字の上端にそろえたまま（inc/recruit/top.php の sbs_rct_ct_p_y）。
     帯の中身は動く 1 点を中心に --ct-s 倍しているので、margin で動かすと縮める前の量がそのまま画面に出る → --ct-s を掛ける */
  .tb-read>b.p{left:0;width:100%;padding-left:0;display:flex;justify-content:center;font-size:max(2.887rem,calc(11px / var(--ct-s)))}
  html.mo .cursor-read .cr-in b{left:0;width:100%;padding-left:0;display:flex;justify-content:center;font-size:max(2.887rem,calc(11px / var(--ct-s,.6)))}
  /* PEOPLE のカード（仮の人の名前・部署・ひとこと） */
  .pe-dept2{font-size:max(1.82rem,11px)}
  .pe-name2 small{font-size:max(1.758rem,11px)}
  .pe-cmt{font-size:max(2.219rem,14px)}   /* DSN-05: 2.519 → 2.219（基本の .pe-cmt と同じ値） */
  /* 09 ENVIRONMENT: 本文（FB-15 で 14px）を幅 67rem で折り返す（各行の右端がその高さのひし形の辺に届かない幅・字間 0）。5 行まで入るよう「環境を知る」を 8.7rem 下げる */
  .env-p{white-space:normal;width:67rem;letter-spacing:0;text-wrap:pretty}
  .env-stage>.gbtn{top:calc(var(--y) * .1rem + 8.7rem)}
  /* 10 MESSAGE: 肩書き・名前 11px・ボタン 13px（ボタンの幅いっぱいの中央に） */
  .ms-name{font-size:max(1.7rem,11px)}
  .ms-btn .ms-btn-t{left:0;width:100%;padding-left:0;display:flex;justify-content:center;font-size:max(1.9rem,13px)}
}

/* == F08（2026-10-09・本人「画面固定で切り替わる感じにしたい」）03 MISSION→VISION を 1 つの sticky ステージで切り替える。recruit.js の initMission が箱を組む（html.mo のときだけ）。
   合成の落とし穴: 写真（darken）・炎（screen）は金の地と混ざって Figma の色になる。ステージとスケーラーに金の地を敷き、組の入れ物は transform なし（top/left のみ） == */
html.mo .mi-track{position:absolute;left:0;width:100%}
html.mo .mi-stage{position:sticky;top:0;clip-path:inset(0);background:var(--gold)}   /* 下だけは JS が V の写真の下端まで広げる（止めが外れた後に写真の下端が切れないように） */
html.mo .mi-scaler{position:absolute;left:0;top:0;width:100%;transform-origin:50% 0;background:var(--gold)}
html.mo .mi-scaler::before{content:"";position:absolute;inset:-100%;background:var(--gold)}
html.mo .mi-comp{position:absolute;left:0;width:192rem;height:431.7rem}
html.mo .mi-after{position:absolute;left:0;width:100%;height:431.7rem}
html.mo .mi-comp .rv-f{transition:opacity .6s ease}
html.mo .mottle.no-tr>i{transition:none}
html.mo .mi-instant,html.mo .mi-instant *{transition:none!important}
/* MI-PRE（2026-10-15）: MISSION の前置き（静かに燃える誇りと、／半世紀を超える／精密技術で、）。止めている間（.mi-comp の中＝pinSetup が組んだ時）だけ出す。止めない時（no-motion・reduced・pinSetup が false）は出さない。
   字: Figma 797:310（右の列 92.95px・行送り 99・ほか 2 列 97.78px・行送り 105）。縦書きの字送りは Figma の箱の高さ（902/9＝100.24・736/7＝105.14）に合わせる */
.mi-pre{display:none}
html.mo .mi-comp .mi-pre{display:block}
html.mo .mi-comp .mi-tate--pre{font-size:9.778rem;line-height:10.5rem;letter-spacing:.3rem;margin:.55rem 0 0 -.4rem}   /* MI-PRE-TOP（2026-10-16・本人「少し文字間詰めて」）: 字間 .736→.3rem（静かに〜は下の --pre1 で .6→.15rem）。3 列の上端そろえは recruit-top.php の --y */   /* margin: 字のインクを Figma の書き出しに重ねて合わせた分（右へ 4px・上へ 6px ずれていた） */
html.mo .mi-comp .mi-tate--pre1{font-size:9.295rem;line-height:9.9rem;letter-spacing:.15rem;margin:.55rem 0 0 -.35rem}
/* MI-SUB（2026-11-02・本人「世界の一瞬を支えている。の文字を切り替わる前のもの大きさと同じにして、切り替わる前と同じように右に詰めて、空いたスペースにサブミッションを縦書きで白文字で置いたら」→ 案 B）:
   止めの区画（html.mo .mi-comp）だけ。①切り替わった後の見出し 2 列を前置き（.mi-tate--pre）と同じ字の大きさ・行送り・字間・margin に、列の位置を前置きの 2・3 列目（--x 1200・1325・--y 1015.98）に、右端を前置きの右端にそろえる（−.55rem）。
   ②サブミッション（.mi-tate--sub・3 列）を見出しの左 2.6rem・下端を見出しの字の下端（Figma y 1626）に。字 2rem／行送り 3.4rem／字間 .36rem／600・写真の上でも読めるよう控えめな影。止めない時は出さない */
.mi-tate--sub{display:none}
.mi-sub-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
html.mo .mi-comp .mi-tate--m1,html.mo .mi-comp .mi-tate--m2{font-size:9.778rem;line-height:10.5rem;letter-spacing:.3rem;margin:.55rem 0 0 -.4rem;--y:1015.98!important;translate:-.55rem 0}
html.mo .mi-comp .mi-tate--m1{--x:1200!important}
html.mo .mi-comp .mi-tate--m2{--x:1325!important}
html.mo .mi-comp .mi-tate--sub{display:block;position:absolute;left:106.27rem;top:115.41rem;font-size:2rem;font-weight:600;line-height:3.4rem;letter-spacing:.36rem;text-shadow:0 0 .7em rgba(0,0,0,.55),0 0 .18em rgba(0,0,0,.4)}
html.mo .mi-comp .mi-tate--sub .mi-sub-sp{display:none}

/* ===== SEL-A01（2026-10-14・本人「PC で文字を左ボタンでなぞって選択・コピーできるように」・調べと前後の数 text_select_20261014/review/A/README.md）=====
   原因: 文字の上にかぶる飾り・演出の層（画像・全面の入れ物の div）がマウスを受け取り、なぞっても選べなかった。
   画像の上で押して動かすと、ブラウザの「画像のドラッグ」が始まる（自動操作ではこれで応答が止まる＝TOP で 1 回なぞった直後に固まった件の原因）。
   直し: 受け取る必要の無い層だけ pointer-events:none にする。pointer-events は子に継ぐので、文字は pointer-events:auto に戻す。
   リンク・ボタン・ホバーで動く物（.talk-band・.vcard・.gbtn・.panel・.ms-panel・.ms-btn）の入れ物自体には付けない。見た目・動きは変えない */
main img,main canvas{pointer-events:none}   /* SEL-A01: 画像・canvas はすべて受け取らない（リンク・ボタン・カードの中の画像は、親がそのまま受け取る） */
/* SEL-A02 FV: 全面を覆う入れ物は受け取らず、文字（.fvt）だけ受け取る（文字を包む .fv-tw は元から none なので、文字側を auto に戻す） */
.fv-stage :is(.fv-a,.fv-b,.fv-shared){pointer-events:none}   /* 動き有り・無し・SP とも（動き無し・SP では .fv-b.fv-front が上から全面でかぶっていた） */
.fv-stage .fvt{pointer-events:auto}
.fv-grad{pointer-events:none}   /* 下端の暗いグラデ（飾り）。SP・動き無しでも文字の上にかぶる */
/* SEL-A03 PHILOSOPHY: ②の全面の箱（.ph-2）が①の文字の上にかぶっていた → 箱は受け取らず、②の文字だけ受け取る。見えていない側の文字（①は塵になったあと・②は出る前）は受け取らない */
html.mo .ph-2{pointer-events:none}
html.mo .ph-2 :is(.ph-h2,.ph-body2){pointer-events:auto}
html.mo .ph-pin.is-dust .ph-1 :is(.ph-h1,.ph-body1),html.mo .ph-pin:not(.is-in) .ph-2 :is(.ph-h2,.ph-body2){pointer-events:none}
/* SEL-A04 MISSION／VISION／VALUE: 全面の入れ物は受け取らず、文字・カードだけ受け取る。出ていない文字（rv-f の薄い間）は受け取らない */
html.mo :is(.mi-after,.mi-comp,.mi-photos){pointer-events:none}
html.mo :is(.mi-after,.mi-comp) :is(h2,h3,p,.mi-tate,.vcard){pointer-events:auto}
html.mo .rv-f:not(.is-in){pointer-events:none!important}
/* SEL-A05 ABOUT: NUMBER の入れ物が本文の上に全面でかぶっていた → 受け取らず、数字の項目だけ受け取る */
.ab-num-list,.ab-num-rail,.ab-rail{pointer-events:none}   /* .ab-rail は動き無し・SP で本文の上に全面でかぶる（動き有りでは右の細い列） */
.ab-num-list>.p,.ab-rail :is(h2,p){pointer-events:auto}
/* SEL-A06 PEOPLE: 写真・リングの入れ物は受け取らず、カードだけ受け取る。見えていない裏面（opacity 0）は受け取らない（ホバーで出ている間だけ受け取る）。見出しの文字も選べるように */
.pe-rv-photos{pointer-events:none}
html.mo .pe-ring{pointer-events:none}
html.mo .pe-rcard{pointer-events:auto}
html.mo .pe-face--b{pointer-events:none}
html.mo .pe-rcard.is-front:hover .pe-face--b{pointer-events:auto}
html.mo .pe-rcard.is-front:hover .pe-face--f{pointer-events:none}
html.mo #people>h2.pe-label.p{pointer-events:auto}   /* 上の「#people>:is(.pe-label-box,img[…],.pe-label){pointer-events:none}」（カードへマウスを通す旧設計。今は見出しとカードの間が 40px 空いているので重ならない）より強く */
/* SEL-A07 ENVIRONMENT: ひし形の文字を選べるように（回す判定は JS が座標で行うので、文字が受け取っても動きは同じ） */
html.mo .dia span{pointer-events:auto}