/* 鯖江精機リクルート 新TOP — SP（1023px 以下）の指定 2026-10-05 PC／SP の作業を 2 つのセッションに分けるため、recruit.css の末尾（SP の部分）をここへ移した。 このファイルは SP 担当のセッションが編集する。PC 担当は触らない。読み込みは recruit.css の直後。 ここに書く指定は必ず @media (max-width:1023px) の中に入れる（PC の表示を変えないため）。 2026-10-05 sp1: SP を作り直した（設計図_SP_v1.md／裁定_SP_v1.md）。 - Figma に SP の正は無い（本人回答）。FV〜MISSION とヘッダーは「松尾作業」ページの作業中の SP フレーム （ヘッター 366:252984／Frame 314:1507／Frame 109 366:283786）の構図を参考にし、ABOUT 以降は参考サイトの SP （sanseitechnos・toyox・tokyu-land・shinkin echishin・gbsmedical）の作法と PC の色・書体で組んだ。 - 寸法: 390 幅で 1rem = 10px（html の文字サイズ = 画面幅 / 39。600px 以上は 13px で止める）。 中身の左右の余白は --gut（2rem。広い画面では中身を 60rem までにして中央に寄せる）。 - 演出（ピン・パララックス）は 1024px 以上だけ（html.mo は 1024 未満では付かない）。SP は静止＋小さな動きだけ。 */ /* == 土台 == */ @media (max-width:1023px), (max-width:1366px) and (orientation:portrait){ html{font-size:min(calc(var(--vw, 100vw) / 39), 13px)} :root{--gut:max(2rem, calc((100% - 60rem) / 2));--safe:env(safe-area-inset-bottom, 0px)} body{font-size:1.4rem} .pc-only{display:none!important} /* ZOOM-SCALE（2026-10-28・本人「スマホで見るとこんな感じで崩れてる」「治ってないよ」iPhone 13 mini）: SP で PC の部品を縮めて使う 4 か所（全て読む・見学を申し込む・ REAL VOICES のカード・ENVIRONMENT のひし形）は、前は CSS の zoom で縮めていた。iPhone の Safari では zoom の中の文字だけ縮まず（箱と行の高さは縮む）、 文字が大きすぎて重なる・はみ出していた（Chrome・Mac の Safari では出ない）。-webkit-text-size-adjust:none では直らなかった（10/28 実機で確認）。 → zoom をやめ、一般的な transform:scale()（左上が起点）で縮める（本人「普通の関数を使うじゃダメなの？」）。transform は場所を取る大きさが縮まないので、 縮んだ分（幅・高さ×(1−倍率)）を右と下の余白で打ち消し、上・左の余白は前の zoom と同じ見た目の値（×倍率）にした。Chrome での位置・大きさは前と同じ（10/28 に 320〜768px で測って確認） */ .p{position:relative;left:auto;top:auto;width:auto;height:auto} :where(img).p{width:100%;height:auto} /* 詳細度は .p と同じ（後に書いたクラスの指定が勝つように） */ main>section,.vi-cover>section,#fv,#footer{height:auto!important;margin-top:0!important;overflow:clip} /* 見出しは文節で折り返し、行の長さをそろえる（Chrome。ほかのブラウザは普通の折り返し） */ :is(.ph-h1,.mi-value-h,.ab-h,.wk-h,.vi-h,.env-h,.ms-h,.tb-s,.pe-label){word-break:auto-phrase;text-wrap:balance} :is(.mi-prose,.mi-value-r,.ab-p,.ab-d,.wk-lead,.tb-p,.env-p,.vc-body){text-wrap:pretty} .vc-body{word-break:auto-phrase} /* カード本文は文節で折り返す（balance は付けない＝「言える／こと。」のような割れ方を避ける） */ /* 中央揃えの短い文も文節で折り返して行の長さをそろえる（「続け／ている」のような割れ方を防ぐ）。 Safari は文節の折り返しが無いので、要の所は index.html の
で改行を決めている（PHILOSOPHY・理念） */ :is(.ph-body1,.ph-body2,.mi-lead,.ty-d,.en-copy){word-break:auto-phrase;text-wrap:balance} /* 欧文の眉見出し（S アイコン＋英字）。アイコンは各セクションの SVG を ::before で出す（HTML のアイコンは隠す） */ .sp-eyebrow,.en-h,.mi-en-h{display:flex;align-items:center;gap:.8rem;font:600 1.7rem/1.2 var(--cormorant);letter-spacing:.04em;white-space:nowrap} :is(.en-h,.mi-en-h)::before{content:"";flex:none;width:1.2rem;height:2rem;background:var(--eb-icon) center/contain no-repeat} #work .en-h{--eb-icon:url(../svg/section_a_frame_1559.svg)} .env-stage .en-h{--eb-icon:url(../svg/section_b_frame_1559.svg)} #message .en-h{--eb-icon:url(../svg/section_c_frame_1559.svg)} .mi-en-h{--eb-icon:url(../svg/frame_112_frame_1559.svg)} /* 金ボタン（PC の部品をそのまま縮めて使う。中の配置は Figma のまま） */ :is(.gbtn,.ms-btn,.pe-card) .p{position:absolute;left:calc(var(--x) * .1rem);top:calc(var(--y) * .1rem);width:calc(var(--w) * .1rem);height:calc(var(--h) * .1rem)} .ms-btn .p{left:calc(var(--x) * .1rem - .1rem);top:calc(var(--y) * .1rem - .1rem)} .gbtn{flex:none;position:relative;margin:3.2rem auto 0} .gbtn--wk{width:27rem;height:9.6rem} .gbtn--pe{width:33.7rem;height:9.512rem;transform:scale(.82);transform-origin:0 0} /* ZOOM-SCALE: 前は zoom .82。余白は下の #people>.gbtn--pe */ /* 2026-10-08 本人「（SP の全て読む）ホバーしなくても開いてるからそろえる」: 四隅（.fb）の箱が面（.gbtn-face）より上下に約 3px 大きく、 L の線の半分も外に出ていたので、押す前から開いて見えた。四隅を面と同じ箱にし、L の外側を面のふちにぴったり合わせる（「仕事を知る」と同じ見え方）。「環境を知る」も同じ部品なので一緒に */ .gbtn--pe>.fb{top:.318rem;width:33.693rem;height:8.97rem} .gbtn--pe>.fb>.tl{left:0;top:0} .gbtn--pe>.fb>.tr{right:0;top:0} .gbtn--pe>.fb>.br{right:0;bottom:0} .gbtn--pe>.fb>.bl{left:0;bottom:0} .gbtn--vi{width:48.3rem;height:12.856rem;transform:scale(.32);transform-origin:0 0} /* ZOOM-SCALE: 前は zoom .32。余白は #visit>.gbtn--vi */ /* VI-BTN-SP2（2026-10-16・本人「SP 版はあと 2 回りぐらい小さく」）: .44→.32（0.73 倍）。margin の割り戻しも .32 に揃えた（下の #visit>.gbtn--vi）。前の: VI-BTN（2026-10-14・本人「小さく」→「あと一回りぐらい小さく」・位置は元に戻す）: 前は zoom:.66。左寄せは元のまま */ } /* ヘッダー・ドロワーは assets/css/recruit/rc-header.css（全採用ページ共通・2026-10-09） */ @media (max-width:1023px), (max-width:1366px) and (orientation:portrait){ /* ページ内リンクの着地点は固定ヘッダーの下 */ :is(main>section[id],.vi-cover>section[id],#crosstalk,#who){scroll-margin-top:2rem} html.sp-lock{overflow:hidden!important} /* メニューを開いている間は背面をスクロールさせない（sp-lock は recruit-sp.js が付け外し） */ } /* == 01 FV（A＝「静かに、燃えろ。」女性の写真を大きく・見出しを左下に重ねる。 sp2: その下に B＝「QUIET PASSION.」を 1 画面分つなげる＝PC の A→B（スクロールで切り替わる 2 画面）を縦に並べた形。--fa/--fb は A／B の高さ）== */ @media (max-width:1023px), (max-width:1366px) and (orientation:portrait){ .rc-site .site-header{margin-bottom:-6.4rem} /* 2026-10-09 上の帯（6.4rem）を FV の上に重ねる＝FV は y0 から（sticky のステージと 30rem の A→B の量を変えない） */ #fv{background:#16110c;--fa:60rem;--fb:74rem} .fv-stage{position:relative;height:calc(var(--fa) + var(--fb));overflow:hidden} /* B の下 6rem は②の黒い炎が重なる分 */ .fv-a,.fv-shared{position:absolute;left:0;top:0;width:100%;height:var(--fa);overflow:hidden} .fv-a.fv-back{background:#16110c} .fv-back .fv-in{position:absolute;left:0;top:0;width:100%;height:100%} .fv-bokeh{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;object-position:16% 30%;filter:brightness(.8) saturate(1.05)} /* 点描は PC に近い大きさで使う（縮めると点がつぶれて模様に見えない）。左上は人物の奥、右端は人物の手前に薄く */ .fv-a.fv-back .fv-dots{position:absolute;height:auto;max-width:none} .fv-a.fv-back .fv-dots:nth-of-type(2){left:-40rem;top:-24rem;width:58rem;opacity:.85} .fv-a.fv-back .fv-dots:nth-of-type(3){left:auto;right:-52rem;top:-30rem;width:66rem;z-index:2;opacity:.7;mix-blend-mode:screen; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6rem);mask-image:linear-gradient(90deg,transparent 0,#000 6rem)} /* 画像の左端＝画面の 25rem。顔にかからない右端の帯だけに出る */ .fv-a.fv-back .fv-dots:nth-of-type(3){z-index:auto} /* FV-DOTS-BACK（2026-10-15・本人「スマホで見たときにドットの炎が上に来てる」）: 右のドットも人物の奥に（前は z-index 2 で人物の手前＝縦横比によって顔・腕・帽子の上に網点が乗っていた） */ .fv-a.fv-back .fv-in::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.9; background:url("../img/fv_a_dots_1b.webp") left -12rem bottom -1rem/50rem auto no-repeat,url("../img/fv_a_dots_2.webp") right -14rem bottom -1rem/52rem auto no-repeat} /* FV-DOTS-FULL（2026-10-15・本人「下にドットがないのが気になる。1 画面全部にドットがあるように」）: 上の 2 枚は画面の上寄り（濃い所が真ん中まで）なので、同じ網点の炎を下の左右にも置く。人物の奥（.fv-back の中） */ .fv-shared{z-index:2} .fv-shared .fv-gold-s{position:absolute;left:calc(50% + 4rem);top:24rem;width:11.6rem;height:auto} .fv-front .fv-in{position:absolute;left:50%;top:0;width:39rem;height:100%;margin-left:-19.5rem} .fv-front .fv-grad{position:absolute;left:-8rem;top:auto;bottom:0;width:55rem;height:24rem;mix-blend-mode:normal;background:linear-gradient(0deg,rgba(14,10,7,.6),rgba(14,10,7,0))} .fv-machine{position:absolute;left:17rem;top:-3rem;width:26rem;height:auto;opacity:.9} .fv-moe-glow{display:none} .fv-worker{position:absolute;left:-3rem;top:7.8rem;width:43.6rem;height:auto;z-index:1} .fv-title{position:absolute;left:0;top:0;width:100%;height:100%;z-index:3;margin:0} .fv-ch{position:absolute;width:auto;height:auto;transform:none;line-height:1;white-space:nowrap;text-shadow:0 .4rem 3rem rgba(42,40,37,.4),0 0 1rem rgba(42,40,37,.25)} .fv-ch--1{left:3.3rem;top:28.6rem;font-size:9.6rem;letter-spacing:-.07em} .fv-ch--2{left:13.1rem;top:32.2rem;font-size:5.8rem;letter-spacing:-.11em} .fv-ch--3{left:1.9rem;top:38.1rem;font-size:12rem;letter-spacing:-.05em} .fv-ch--4{left:14.6rem;top:43.6rem;font-size:6.6rem;letter-spacing:-.12em} .fv-ch--5{left:20.4rem;top:42rem;font-size:7.6rem;letter-spacing:-.09em} .fv-sub{position:absolute;left:4.4rem;top:51.7rem;width:auto;height:auto;z-index:3;font-size:2.35rem;line-height:3.5rem;letter-spacing:-.03em;white-space:nowrap;text-shadow:0 .2rem 1.6rem rgba(20,16,12,.55)} /* B（PC の状態 B の写真・点描・キラキラ・文字。主役の男性の顔が上、文字は下にまとめる） */ .fv-b{position:absolute;left:0;top:var(--fa);width:100%;height:var(--fb);overflow:hidden} .fv-b.fv-back{background:#16110c} .fv-b-photo{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;object-position:72% 0} .fv-b .fv-dots{position:absolute;height:auto;max-width:none;opacity:.8} .fv-b .fv-dots[src*="dots_l"]{left:-18rem;top:auto;bottom:-6rem;width:44rem} .fv-b .fv-dots[src*="dots_r"]{left:auto;right:-20rem;top:26rem;width:40rem} .fv-sparkle{position:absolute;height:auto;max-width:none;opacity:.9} .fv-sparkle-1{left:-40rem;top:14rem;width:90rem} .fv-sparkle-2{left:auto;right:-46rem;top:-6rem;width:90rem} .fv-b .fv-gold-s--nm{display:block;position:absolute;left:calc(50% - 15rem);top:auto;bottom:16rem;width:9.6rem;height:auto;opacity:.95} .fv-b.fv-front{z-index:3} .fv-b.fv-front .fv-grad{position:absolute;left:0;top:auto;bottom:0;width:100%;height:46rem;mix-blend-mode:normal;background:linear-gradient(0deg,rgba(14,10,7,.82) 0%,rgba(14,10,7,.55) 45%,rgba(14,10,7,0) 100%)} .fv-b-catch{position:absolute;left:var(--gut);top:auto;bottom:31rem;width:auto;height:auto;z-index:4;font-size:6.6rem;line-height:6.2rem;letter-spacing:.01em;text-shadow:0 .4rem 2.4rem rgba(20,16,12,.45)} .fv-b-body{position:absolute;left:var(--gut);top:auto;bottom:13.6rem;width:auto;height:auto;font-size:1.9rem;line-height:3.7rem;letter-spacing:.04em;transform:none;text-shadow:0 .2rem 1.6rem rgba(20,16,12,.55)} .fv-b-small{position:absolute;left:var(--gut);top:auto;bottom:8.4rem;width:auto;height:auto;font-size:1.9rem;line-height:3rem;letter-spacing:.06em;transform:none;text-shadow:0 .2rem 1.6rem rgba(20,16,12,.55)} } /* == 02 PHILOSOPHY（黒。上端の黒い炎で FV に食い込む。① → ② を縦に）== */ @media (max-width:1023px), (max-width:1366px) and (orientation:portrait){ #philosophy{margin-top:-8rem!important;background:linear-gradient(to bottom,transparent 7.9rem,#000 7.9rem)} .ph-stage,.ph-pin{position:relative;height:auto} .ph-1,.ph-2{position:relative;left:auto;top:auto;width:auto;height:auto;overflow:hidden;padding:0 max(3.6rem, var(--gut));text-align:center} /* 左右 3.6rem＝左端の縦の英字に本文が重ならない幅 */ .ph-1{padding-top:13.4rem;padding-bottom:6rem} .ph-1>img:first-child{position:absolute;left:50%;top:0;width:max(54rem,100%);height:auto;margin-left:0;translate:-50% 0} /* sp3: タブレット幅（703px〜）でも画面幅いっぱい（54rem だと覆いかぶさる縁の左右に切れ目が出た） */ .ph-black{display:none} /* 縦の OUR PHILOSOPHY は左端に全部見せる（作業中 SP と同じ。半分切れると欠けて見える） */ .ph-our{position:absolute;left:.6rem;width:2.8rem;height:auto;opacity:.7} .ph-1 .ph-our{top:8.4rem} /* 高さ 38.2rem が①の下端（46.8rem）に収まる位置 */ .ph-2 .ph-our{top:3rem} .ph-1 .ph-h1{position:relative;z-index:1;padding-left:0;font-size:2.65rem;line-height:1.7;letter-spacing:.08em;white-space:normal} .ph-body1,.ph-body2{position:relative;z-index:1;margin-top:2.6rem;font-size:1.4rem;line-height:2.25;letter-spacing:.04em;white-space:normal} .ph-machine{position:absolute;left:-10rem;top:15rem;width:60rem;height:auto;pointer-events:none} .ph-2{padding-top:5rem;padding-bottom:9rem;background:#000} .ph-slash{position:absolute;left:50%;top:2rem;width:13.4rem;height:auto;margin-left:-6.7rem} /* 10/08 本人「真ん中に S のロゴ」: 幅の半分だけ左へ＝画面の中央（画像の金の中心は画像の中央 0.50） */ .ph-h2{position:relative;z-index:1;white-space:normal} .ph-h2 .l1{font-size:1.85rem;line-height:1.7;letter-spacing:.05em;transform:none} .ph-h2 .l2{font-size:3.1rem;line-height:1.45;letter-spacing:.06em;transform:none} .ph-trail{margin-right:0} .ph-flames{display:none} /* sp2: PC で左右の炎を消した（p28・本人「左右の炎を消して」）のに合わせる */ .ph-2 .ph-machine{left:-12rem;top:auto;bottom:-10rem;width:62rem} } /* sp3: 炎の画像が画面幅いっぱい（703px〜）になると、画像の両下隅の透明（左右端は高さの 59% まで不透明）が見えて、黒地との間に小さな三角の切れ目が出た → その幅だけ黒地の始まりを画像の 59% より上（12vw）へ（Fable 再検収・768 で 30×10px）。600〜702px でも残ったので 600px から（590px 以下は隅が画面外） */ @media (min-width:600px) and (max-width:1023px), (min-width:600px) and (max-width:1366px) and (orientation:portrait){ /* 600〜702px も画像が画面より最大 102px しか広くなく、隅の透明が画面に入る（Fable 再検収）→ 600px から */ #philosophy{background:linear-gradient(to bottom,transparent min(7.9rem,12vw),#000 min(7.9rem,12vw))} } /* == 03 MISSION（金。上端の金の炎で②に食い込む。理念 → MISSION（右に縦書き・左にまだらの写真）→ VISION（左右反転）→ VALUE） 作業中の SP Frame 109 366:283786 の構図を参考に、VISION を足した（裁定 SP-3） == */ @media (max-width:1023px), (max-width:1366px) and (orientation:portrait){ #mission{margin-top:-10.4rem!important;background:linear-gradient(to bottom,transparent 10.3rem,var(--gold) 10.3rem)} .mi-in{position:relative;height:auto;display:grid;align-items:start; grid-template-columns:var(--gut) 12rem minmax(0,1fr) 12rem var(--gut); grid-template-areas: "top top top top top" ". kak kak kak ." ". rin rin rin ." ". lead lead lead ." ". mph mph mtt ." ". mpro mpro mpro ." ". vtt vph vph ." ". vtt vpro vpro ." ". veh veh veh ." ". vh vh vh ." ". vr vr vr ." ". cards cards cards ." "fade fade fade fade fade"} .mi-in>*{position:relative;z-index:1} .mi-gold,.mi-in>img[src*="frame_112_frame_1559"]{display:none} .mi-in>img:first-child{grid-area:top;justify-self:center;width:65.5rem;height:auto;margin-bottom:-4.4rem;z-index:0} .mi-ghost{grid-area:kak;justify-self:center;width:5.2rem;height:auto;margin-top:-6.4rem;z-index:0!important} .mi-kakageru{grid-area:kak;padding-left:.25em;font-size:1.5rem;line-height:2;letter-spacing:.25em;white-space:nowrap;text-align:center} .mi-rinen{grid-area:rin;padding-left:.15em;font-size:4rem;line-height:1.35;letter-spacing:.15em;white-space:nowrap;text-align:center} .mi-lead{grid-area:lead;justify-self:center;max-width:32rem;margin-top:1.4rem;font-size:1.4rem;line-height:1.95;letter-spacing:.02em;white-space:normal;text-align:center} /* 幅 32rem＝3 行目が「、」で折り返る幅 */ /* 縦書きの見出し（右の列から読む） */ .mi-tate-wrap{display:flex;flex-direction:row;align-items:flex-start;gap:.2rem;margin:0} .mi-tate{writing-mode:vertical-rl;font-size:4.2rem;line-height:1.08;letter-spacing:.06em;word-break:normal;line-break:auto;white-space:nowrap;text-align:start;text-shadow:0 0 2rem rgba(71,58,33,.35)} .mi-en{width:auto;height:auto;font-size:1.3rem;line-height:1;letter-spacing:.06em} /* MISSION */ .mi-tate-wrap[data-mi="m"]:not(.mi-pre){grid-area:mtt;justify-self:start;margin-top:4.6rem} /* MI-H 取り消し（2026-10-14）: 元に戻した。MI-PRE（2026-10-15）: aria-label が「静かに…」始まりになったので、前置き（.mi-pre）を除く MISSION の見出し、で拾う */ /* MI-PRE（2026-10-15）: 前置き（静かに燃える誇りと、／半世紀を超える／精密技術で、）。止めている間（.sp-mi-comp の中）だけ、今の見出しと同じ grid の場所に重ねる（絶対配置＝行の高さに数えない）。 字は今の .mi-tate（4.2rem）× Figma の比（右 92.95/130.78・ほか 97.78/130.78）。止めない時（高さ 500px 未満・no-motion）は出さない */ .mi-tate-wrap.mi-pre{display:none} html.sp-mo .sp-mi-comp .mi-tate-wrap.mi-pre{display:flex;position:absolute;grid-area:mtt;justify-self:start;margin-top:4.6rem} html.sp-mo .sp-mi-comp .mi-tate.mi-tate--pre{font-size:3.14rem} html.sp-mo .sp-mi-comp .mi-tate.mi-tate--pre1{font-size:2.985rem} /* MI-SUB（2026-11-02・案 B）: 止めている間（.sp-mi-comp）だけ。切り替わった後の見出し 2 列を前置きと同じ字（3.14rem）にして右端をそろえる（＋1rem）。 サブミッション（6 列＝「、」の後ろでも折る）は見出しのすぐ左（.3rem）、下端を本文の 1rem 上（見出しの組の上から 17.35rem）に。字 1.15rem／行送り 1.8rem／字間 .12em／600 */ html.sp-mo .sp-mi-comp .mi-tate-wrap[data-mi="m"]:not(.mi-pre){position:relative} html.sp-mo .sp-mi-comp .mi-tate--m1,html.sp-mo .sp-mi-comp .mi-tate--m2{font-size:3.14rem;translate:1rem 0} html.sp-mo .sp-mi-comp .mi-tate--sub{display:block;position:absolute;top:17.35rem;right:calc(100% - .3rem);translate:0 -100%;font-size:1.15rem;font-weight:600;line-height:1.8rem;letter-spacing:.12em;text-shadow:0 0 .7em rgba(0,0,0,.55),0 0 .18em rgba(0,0,0,.4)} html.sp-mo .sp-mi-comp .mi-tate--sub .mi-sub-sp{display:inline} .mi-in>img[src*="mask_group_2"]{grid-area:mtt;justify-self:end;width:1.1rem;height:auto;margin-top:4.6rem} img[src*="mask_group_2"]+.mi-en{grid-area:mtt;justify-self:end;margin-top:8rem} .mi-photos{grid-row:mph;grid-column:1/5;position:relative;inset:auto;height:34rem;margin-right:-1rem;z-index:0!important} .mi-photos img.p{position:absolute;height:auto} .mi-photos .mi-ph--1{left:9rem;top:3rem;width:20rem} .mi-photos .mi-ph--3{left:0;top:9rem;width:14rem} .mi-photos .mi-ph--2{left:15rem;top:15.5rem;width:19rem} .mi-photos .mi-ph--4{left:1.6rem;top:19.4rem;width:16.6rem} img[src*="mask_group_2"]+.mi-en+.mi-prose{grid-area:mpro;margin-top:2.4rem} .mi-prose{font-size:1.4rem;line-height:2.25;letter-spacing:.02em;text-align:justify} /* VISION（左右反転。本文は見出しの右・写真の下） */ .mi-tate-wrap[aria-label^="問"]{grid-area:vtt;justify-self:end;margin-top:7rem} .mi-in>img[src*="mask_group_3"]{grid-area:vtt;justify-self:start;width:1.1rem;height:auto;margin-top:7rem} img[src*="mask_group_3"]+.mi-en{grid-area:vtt;justify-self:start;margin-top:10.4rem} .mi-darken{grid-area:vph;width:calc(100% + 4rem);max-width:none;height:auto;margin-top:7rem;margin-right:-2rem;justify-self:start} img[src*="mask_group_3"]+.mi-en+.mi-prose{grid-area:vpro;margin-top:1.6rem;padding-left:.4rem} .mi-prose[data-mi="v"] br{display:none} /* 2026-10-15: 管理画面の本文の改行は PC 用（本人指定・一番長い行 20 字）。SP の VISION は縦書きの見出しの横で幅 23rem しかなく入らない → 改行を使わず文節で折り返す（recruit.css の .mi-prose auto-phrase） */ /* SP-MI-BIG（2026-10-16・本人「①変なドロップシャドーがある ②MISSION／VISION の写真をもう少し大きく、文字が写真の下の方から始まるように（東急不動産の採用サイトのように）」） ① 縦書きの見出しの text-shadow が、写真の層（darken・.7）と重なる所で明るい四角に見えていた→ SP は影なし。 ② MISSION の写真 4 枚を 1.2 倍（並びは同じ）・本文は写真のかたまりの上から約 7 割の所から始める（写真に重ねる。本文は帯つきなので読める）。 VISION の写真は縦書きの見出しの列から右端まで（見出しは写真に重ねる）・本文は写真の下 3 割に重ねる */ .mi-tate{text-shadow:none} .mi-photos{height:40.8rem} .mi-photos .mi-ph--1{left:10rem;top:3.6rem;width:24rem} .mi-photos .mi-ph--3{left:0;top:10.8rem;width:16.8rem} .mi-photos .mi-ph--2{left:17rem;top:18.6rem;width:22.8rem} .mi-photos .mi-ph--4{left:1.2rem;top:23.3rem;width:20rem} img[src*="mask_group_2"]+.mi-en+.mi-prose{margin-top:-19rem} /* MI-UP（2026-10-16・本人「文章の位置もっと上に」）: -13rem→-19rem（前置きの字と 8px 以上あく範囲。-20rem 以上は 360 で 9px 台まで詰まる） */ .mi-darken{grid-column:2/6;width:calc(100% + var(--gut));margin-right:calc(var(--gut) * -1);z-index:0!important} img[src*="mask_group_3"]+.mi-en+.mi-prose{margin-top:-10rem} /* VALUE */ .mi-en-h{grid-area:veh;margin-top:8rem} .mi-value-h{grid-area:vh;margin-top:.8rem;font-size:4rem;line-height:1.28;letter-spacing:.04em;white-space:normal} .mi-value-r{grid-area:vr;margin-top:1.6rem;font-size:1.35rem;line-height:1.9;letter-spacing:.01em;white-space:normal} /* 25 字の 2 行がそれぞれ 1 行に収まる大きさ（「ます。」だけの行を作らない） */ /* sp2: VALUE のカードは PC と同じく 3 枚を横に並べ、指でずらす（次のカードが少し見える）。見た目は PC の p25（Figma Make「鯖江精機カード」）の静止の状態 */ .mi-cards{grid-row:cards;grid-column:1/-1;display:flex;gap:1.4rem;margin-top:3.6rem;padding:.4rem var(--gut) 2.4rem;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding:0 var(--gut);scrollbar-width:none} .mi-cards::-webkit-scrollbar{display:none} .vcard{position:relative;left:auto;top:auto;flex:0 0 29.4rem;width:auto;height:auto;min-height:42rem;margin:0;padding:3.2rem 2.2rem 2.6rem;display:flex;flex-direction:column;align-items:center;scroll-snap-align:start; border-radius:1.6rem;box-shadow:inset 0 0 0 .08rem rgba(255,255,255,.1),0 1.6rem 3.2rem -1.2rem rgba(0,0,0,.45)} .vcard>.p{position:relative;flex:none} .vc-deco{position:absolute;inset:0;overflow:hidden;pointer-events:none} .vcard .pc-only{display:block!important} .vcard .vc-corner{display:none!important} .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:3rem;top:3rem;width:6rem;height:6rem;border-radius:50%;background:rgba(255,255,255,.05);filter:blur(2.4rem)} .vc-ping--2{left:auto;top:auto;right:5rem;bottom:5rem;width:4.4rem;height:4.4rem;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)} .vcard .vc-line{width:9.48rem;height:.2rem;flex:none} .vcard .vc-line--end{width:33.333%;margin-top:auto;border-radius:999px;opacity:1} .vc-h{margin-top:1.7rem;padding-left:.05em;font-size:2.7rem;line-height:1.5;letter-spacing:.05em;white-space:nowrap} /* F07（10/09）: 上の線〜中の線の間で上下中央（上 12／下 22px → 17px ずつ） */ .vcard img.p{width:auto;max-width:100%;height:auto;margin:1.2rem auto 1.7rem} .vcard img.p[src*="text_1.svg"]{margin-top:1.8rem;margin-bottom:2.3rem} .vcard>.p.vc-sub{margin:1.2rem 0 1.7rem;font-size:1.3rem} /* FB1015-18 副題（SP） */ /* 1 行の副題は上下に .6rem ずつ足す（PC と同じく 2 行の副題の高さの中で中央） */ .vc-body{margin:2rem 0 2.4rem;font-size:1.35rem;line-height:1.85} /* 炎（screen）: 左の炎は MISSION の写真の上、右の炎は VALUE の横、もう 1 つは理念の右 */ .mi-screen{z-index:0!important;width:26rem;height:auto;pointer-events:none} .mi-in>img[src*="mi_flame_4"]{grid-row:mph;grid-column:1/4;justify-self:start;margin:-3rem 0 0 -8rem} .mi-in>img[src*="mi_flame_5"]{grid-row:veh;grid-column:3/6;justify-self:end;margin:0 -9rem -17.2rem 0;width:24rem} /* SP-VAL-GAP（2026-10-16・本人「SP 版 あいだあきすぎ」）: 炎（高さ 24rem×658.4/922.5＝17.13rem）が OUR VALUE の行の高さを決め、小見出しと大見出しの間が 79px 空いていた → 下を炎の高さだけ詰めて行の高さに数えない（炎の位置・大きさは今のまま。間は .mi-value-h の .8rem に戻る） */ .mi-in>img[src*="mi_flame_3"]{grid-row:rin;grid-column:4/6;justify-self:end;margin:-8rem -11rem 0 0;width:22rem;opacity:.85} .mi-fade{grid-area:fade;width:100%;height:14rem;margin-top:5rem} #mission{background:linear-gradient(to bottom,transparent 10.3rem,var(--gold) 10.3rem,var(--gold) calc(100% - 1px),var(--cream) calc(100% - 1px))} } /* == 04 ABOUT（sp2: PC と同じく右端に縦書きの見出し「鯖江精機のこと／ABOUT SABAESEIKI」の列（スクロールに付いてくる）、 左に写真と文の 4 段。写真は段ごとに左寄せ・右寄せを交互＝PC のジグザグ。NUMBER は「平行四辺形＋文」の行を左右交互）== */ @media (max-width:1023px), (max-width:1366px) and (orientation:portrait){ #about{display:grid;grid-template-columns:minmax(0,1fr) 5.4rem;column-gap:1.2rem;align-content:start;padding:6.4rem var(--gut) 8rem; background:linear-gradient(180deg,#f4f0e8 0%,var(--cream) 35%,#ebe4d6 100%)} #about>*{grid-column:1;order:var(--o,0)} /* 並び: 縦書きの列（--o:0）→ 4 段（1）→ NUMBER の見出し（20）→ 6 項目（21） */ /* 右の縦書きの列（4 段の高さいっぱい。中身は sticky でヘッダーの下に付いてくる） */ #about>.ab-rail{position:relative;inset:auto;grid-column:2;grid-row:1/span 12;align-self:stretch} .ab-stk{position:sticky;top:2rem;display:flex;flex-direction:row;align-items:flex-start;gap:.4rem} .ab-stk>img:first-child{position:relative;width:.15rem;height:calc(100svh - 2rem);background:var(--brown);opacity:.5;align-self:stretch;object-fit:none} /* 縦の線（PC の Frame 1585） */ /* SP-AB-LINE（2026-10-16・本人「ここの線一番下まであってほしい」）: 長さ 30rem 固定で題の少し下で切れていた→「止まる位置 2rem から画面の下端まで」。題と一緒に付いてくるのは同じ・セクションの終わりでは列（.ab-rail）の下端で一緒に終わる */ .ab-title{position:relative;left:auto;top:auto;width:auto;height:auto;writing-mode:vertical-rl;font-size:2.8rem;line-height:1.15;letter-spacing:.12em;white-space:nowrap;word-break:normal;line-break:auto} .ab-stk>img[src*="mask_group"]{position:absolute;right:0;top:0;width:1.1rem;height:auto;opacity:.7} .ab-ghost{position:relative;left:auto;top:auto;width:auto;height:auto;margin-top:2.4rem;font-size:1.5rem;line-height:1.1;letter-spacing:.08em;opacity:.45} /* 写真と文の 4 段（ジグザグ） */ #about>img.p{width:88%;max-width:none;aspect-ratio:592/411;object-fit:cover;margin-top:4.8rem;justify-self:start} /* SP-AB-ALIGN（2026-10-16・本人「SP版の時はそろえてほしい」）: 2・4 段目の写真の右寄せ（justify-self:end）をやめ、1・3 段目と同じ左端に。控え sp_about_align_20261016\backup */ #about>img.p[data-ab="1"]{margin-top:0} .ab-h{margin-top:1.8rem;font-size:2rem;line-height:1.5;letter-spacing:.086em;white-space:normal} /* DSN-01（2026-10-13・Figma に SP は無い→PC の比率）: 2.1→2rem・行 1.55→1.5・字間 .04→.086em（PC の 3/35）。二重線・金の下線は recruit.css の #about .ab-h::after／.gold（em・rem なので縮む） */ #about .ab-h::after{margin-top:1rem} /* DSN-01: 見出しの下の二重線の間（PC 1.65rem の SP 版） */ .ab-p{margin-top:1rem;font-family:'Noto Sans JP',sans-serif;font-weight:400;font-size:1.4rem;line-height:1.95} /* DSN-01: Serif 700・1.35rem・行 1.9 → Noto Sans JP 400・1.4rem・行 1.95（PC の 18px/35px に合わせたゴシック） */ /* SP-AB-ALIGN: 2・4 段目の見出し・本文の padding-left:12% もやめる（全段とも同じ左端から） */ /* NUMBER（見出し → 灰色の箱 → 6 項目） */ #about>.ab-num-rail{grid-column:1/-1;position:relative;inset:auto;margin-top:9rem;text-align:center} .ab-num-stk{display:flex;flex-direction:column;align-items:center} .ab-divider{display:none} .ab-num-art{position:relative;left:auto;top:auto;width:min(28rem,72%);height:auto;margin:0 auto} /* DSN-02（2026-10-13・デザイナー②）: NUMBER の題字＋灰色の枠は 1 枚の絵（前は .ab-sabae／.ab-number／.ab-box-t の 3 つ）。中央・幅は 28rem か 72% の小さい方 */ .ab-num-art img{display:block;width:100%;height:auto} /* 6 項目: 奇数の行は「平行四辺形 | 文」、偶数の行は「文 | 平行四辺形」（PC と同じ左右交互） */ #about>.ab-num-list{grid-column:1/-1;position:relative;inset:auto;display:grid;grid-template-columns:11rem minmax(0,1fr) 11rem;column-gap:1.6rem;row-gap:2.8rem;margin-top:4rem} .ab-num-list>span.ab-ph-box{position:relative;left:auto;top:auto;width:100%;height:auto;aspect-ratio:222/297;padding:0 .6rem;align-self:center} /* DSN-03（2026-10-13）: 灰色の箱（前は斜めの灰色の svg の img）。要素は span＝下の :nth-of-type が .ab-item（div）と混ざらない */ .ab-num-list>span.ab-ph-box .ab-ph-t{width:auto;font-size:1.1rem;line-height:1.8} .ab-num-list>span.ab-ph-box--img{padding:0} /* AB-NUM-PHOTO（2026-11-06）: 写真は箱いっぱい（左右の .6rem は仮の文のためだった） */ .ab-num-list>span.ab-ph-box:nth-of-type(odd){grid-column:1} .ab-num-list>span.ab-ph-box:nth-of-type(even){grid-column:3} .ab-item{position:relative;left:auto;top:auto;width:auto;height:auto;align-self:center} .ab-item:nth-of-type(odd){grid-column:2/4} .ab-item:nth-of-type(even){grid-column:1/3;text-align:right} .ab-num-list>:is(span.ab-ph-box:nth-of-type(1),.ab-item:nth-of-type(1)){grid-row:1} .ab-num-list>:is(span.ab-ph-box:nth-of-type(2),.ab-item:nth-of-type(2)){grid-row:2} .ab-num-list>:is(span.ab-ph-box:nth-of-type(3),.ab-item:nth-of-type(3)){grid-row:3} .ab-num-list>:is(span.ab-ph-box:nth-of-type(4),.ab-item:nth-of-type(4)){grid-row:4} .ab-num-list>:is(span.ab-ph-box:nth-of-type(5),.ab-item:nth-of-type(5)){grid-row:5} .ab-num-list>:is(span.ab-ph-box:nth-of-type(6),.ab-item:nth-of-type(6)){grid-row:6} .ab-item p{position:static;width:auto;height:auto;white-space:normal} .ab-item:nth-of-type(even) p{text-align:right} .ab-k{text-align:left;font-size:1.6rem;line-height:1.4;letter-spacing:.06em} .ab-v{margin-top:.4rem;font-size:4.4rem;line-height:1.1;letter-spacing:.01em} .ab-v small{font-size:2.6rem} .ab-d{margin-top:1rem;font-size:1.2rem;line-height:1.75} } /* == 05 WORK（sp4・2026-10-07 本人「ここは参考サイトのアニメーションのSP版をまねすればOK」: 参考 munekata.group/jp.saiyo/ #our-job の SP 版を写す（390 幅で実測 research/munekata_sp）。写真の帯（332×125px）を縦に積み、 左は 59px 空けて右は画面の端まで。帯の中は職種名（左・白の明朝）と丸い矢印（右）。スクロールに合わせて、帯を覆う地色が右へ縮んで写真が左から現れ、 写真は 1.5→1 倍（帯ごとに少し遅れる）。値は PC の WORK と同じ参考の現物（start top 75%・end center 75%・stagger .2・各 .5・power1.out・scrub 1 秒）。 動きは recruit-sp.js の workReveal（html.sp-mo の時だけ。動かない時は最初から全部見える）== */ @media (max-width:1023px), (max-width:1366px) and (orientation:portrait){ #work{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-content:start;padding:8rem var(--gut) 8rem} #work>*{order:var(--o,0);grid-column:1/-1} #work>:not([style*="--o"]){display:none} #work>.wk-machine{display:block;position:absolute;left:auto;right:-9rem;top:-4rem;width:28rem;height:auto;order:0} #work>.wk-flame{display:block;position:absolute;left:-8rem;top:auto;bottom:4rem;width:24rem;height:auto;order:0} .wk-h{margin-top:1.2rem;font-size:2.8rem;line-height:1.45;letter-spacing:.05em;white-space:normal} .wk-lead{margin:1.6rem 0 3.2rem;font-size:1.4rem;line-height:2;letter-spacing:0;white-space:normal} #work .panel{position:relative;left:auto!important;top:auto;grid-column:1/-1;width:auto;height:12.5rem;margin:0 calc(var(--gut) * -1) 0 3.9rem;overflow:hidden} #work .panel .ph{width:100%;height:100%;object-position:50% 40%;transform-origin:center} #work .wp1 .ph{object-position:50% 25%} /* 縦長の写真を帯に切るので、帯ごとに見せ場（モニター／工具／帽子と目元／操作する手元）に合わせる（sp1 の値） */ #work .wp3 .ph{object-position:50% 41%} /* 組立は目元（写真の高さの約 43%）を帯の中央に（22% だと帽子のつばだけだった） */ #work .wp4 .ph{object-position:50% 84%} #work .panel{height:auto;aspect-ratio:1440/690} /* WK-SP-H（2026-10-15）: 帯は横写真（1440×690）と同じ比率＝写真を切らずに全部見せる（前は高さ 12.5rem 固定で縦写真を帯に切っていた） */ #work .panel .ph{object-position:50% 50%} /* WK-SP-H: 横写真は比率が同じなので中央のまま（上の縦写真用の位置合わせは効かせない） */ #work .panel .scrim2{background:rgba(0,0,0,.35)} #work .wk-desc{display:none} #work .panel h3{left:2.8rem;right:auto;top:50%;width:auto;margin:0;translate:0 -50%;writing-mode:horizontal-tb;text-orientation:mixed;font-size:2.3rem;line-height:1.2;letter-spacing:.14em} #work .panel::after{content:"";position:absolute;right:2rem;top:50%;z-index:3;width:3.2rem;height:3.2rem;margin-top:-1.6rem;border-radius:50%; box-shadow:inset 0 0 0 1px #fff;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13M13 7l5 5-5 5' fill='none' stroke='%23fff' stroke-width='1.8'/%3E%3C/svg%3E") center/1.3rem no-repeat} #work .panel .cover{display:block;background-position:0 0;background-size:100% 100%} /* 地色の覆い。大きさと位置は recruit-sp.js が #work の背景と継ぎ目なく合わせる */ #work>.gbtn--wk{margin-top:3.6rem} } /* == 06 TYPICAL（sp2: PC と同じく写真の帯の上に「TYPICAL OF SABAE SEIKI」と副題を重ねる → らしい人（クリーム）→ らしくない人（黒）。 PC の左右 2 列は、SP では読める大きさを保つため縦に積む）== */ @media (max-width:1023px), (max-width:1366px) and (orientation:portrait){ #typical{display:grid;grid-template-columns:100%;height:auto} #typical>:is(.ty-dark,.ty-cream){display:none} #typical>.ty-band{position:relative;left:auto;top:auto;width:100%;height:28rem;grid-row:1;grid-column:1;overflow:hidden} #typical>.ty-band img{width:100%;height:100%;object-fit:cover;object-position:46% 60%} /* TY-SP3（2026-10-16）: 767px 以下は SP 版の写真（3 人が入る切り出し・縦横比 1.394）。幅 508〜767 で帯が横長になる分は下寄せで、真ん中の人の頭と右の人のあごが見出しより上に収まる位置 */ @media (max-width:767px){ #typical>.ty-band img{object-position:50% 90%} } #typical>.ty-band::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,8,6,0) 30%,rgba(10,8,6,.5) 100%)} .ty-h{grid-row:1;grid-column:1;align-self:end;position:relative;z-index:1;display:block;padding:0 var(--gut) 3rem} .ty-h img.p{width:100%;transform:none!important;filter:drop-shadow(0 .2rem 1.2rem rgba(0,0,0,.35))} /* LK16-035（2026-10-16・Lark「日本語文字の文字小さいので、大きくする（鯖江精機らしいと（改行）らしくないを紹介」）: 日本語は SP だけ 2 行の SVG（recruit-top.php の picture）。日英とも見出しの幅の 64%＝390 で 224px（日本語 1 字 28px＝前の 1.28 倍・英字 273→224px）で 1 つの塊に。下の余白 3rem→2.6rem＝390 で日本語の上端が帯の上から 166px（3 人の顔にかからない） */ .ty-h{padding-bottom:2.6rem} .ty-h picture>img.p{width:64%;margin:0 auto} .ty-h picture+img.p{width:64%;margin:1rem auto 0} .ty-col{padding:5.6rem var(--gut) 5rem;background:var(--cream-2)} .ty-col--r{background:#000} .ty-col :is(.ty-k,.ty-big,.ty-d){padding-left:0;white-space:normal} .ty-k{font-size:1.5rem;line-height:1.6;letter-spacing:.14em} .ty-big{margin-top:.4rem;font-size:2.6rem;line-height:1.4;letter-spacing:.1em} .ty-d{margin:1.4rem 0 2.6rem;font-size:1.3rem;line-height:1.95;letter-spacing:.02em} /* クリーム地に金の文字は読みにくい（約 1.9:1）→ 左（らしい人）は項目名と本文を茶、見出しは濃い金（裁定 SP-6） */ .ty-col:not(.ty-col--r) :is(.ty-k,.ty-d){color:var(--brown-3)} .ty-col:not(.ty-col--r) .ty-big{color:#9a7a3f} .ty-col li{position:relative;margin-bottom:1.2rem;padding:1.4rem 2rem;background:#fff;border:0} /* TY-1030（2026-10-30・先方FB「四角の黒線消しで」）: 箱の細い線を外した（前 1px rgba(26,26,26,.35)）。四隅の L 字（::before）はそのまま */ .ty-col li>img{display:none} /* 2026-10-08 四つ角（本人「SP版の四つ角事故ってる」）: 前は左右に縦いっぱいの「[ ]」で、PC の「箱の 4 隅に L 字」と別物＋箱の線と二重になっていた。 PC と同じ L 字 4 つ（腕 1.1rem・線 .25rem）を箱の角に付ける。箱が何行分に伸びても角は伸びない（グラデの 8 本線・画像は使わない） */ /* L-001②（2026-10-09・Lark「四隅のカギかっこ大きく」）: L 字の腕 1.1→2rem・線 .25→.3rem（PC の 2 倍に合わせる。2.2rem だと 1 行の箱（高さ 54px）で上下の腕の間が 10px しか残らないので 2rem） */ /* L-001② r1（Fable 検収: SP の腕を 1.45rem に。1 行の箱で腕÷箱の高さ 0.36→0.26＝PC と同じ） */ .ty-col li::before{content:"";position:absolute;inset:-.2rem;pointer-events:none;--c:var(--gold);--a:1.45rem;--t:.3rem;background-repeat:no-repeat; background-image:linear-gradient(var(--c),var(--c)),linear-gradient(var(--c),var(--c)),linear-gradient(var(--c),var(--c)),linear-gradient(var(--c),var(--c)),linear-gradient(var(--c),var(--c)),linear-gradient(var(--c),var(--c)),linear-gradient(var(--c),var(--c)),linear-gradient(var(--c),var(--c)); background-position:0 0,0 0,100% 0,100% 0,0 100%,0 100%,100% 100%,100% 100%; background-size:var(--a) var(--t),var(--t) var(--a),var(--a) var(--t),var(--t) var(--a),var(--a) var(--t),var(--t) var(--a),var(--a) var(--t),var(--t) var(--a)} .ty-col li::after{display:none} .ty-li{display:block;font-size:1.4rem;line-height:1.7;white-space:normal;text-align:center;word-break:auto-phrase;text-wrap:balance} /* TY-1030: 白い箱の左右の真ん中に。2 行に折れる時は長さをそろえる（「その場で聞／く。」のように 2 行目だけ短くならないように） */ .ty-col--r li{background:#f6f4ef} .ty-col--r li::before{--c:#979696} } /* == 07 VISIT（sp2: PC と同じく写真（左に金の斜線）の上に文とボタンを重ねる。左側にクリームの薄い幕を掛けて文字を読めるように）→ SP-VI-IMG（2026-10-16）: 写真を全部見せるため、文→ボタン→写真の縦並びに == */ @media (max-width:1023px), (max-width:1366px) and (orientation:portrait){ #visit{position:sticky;top:0;display:grid;grid-template-columns:100%;grid-template-rows:auto auto;height:auto} #visit>img.p:first-child{grid-row:1/3;grid-column:1;width:100%;height:100%;object-fit:cover;object-position:75% 50%} /* SP-VI-IMG（2026-10-16・本人「ここの画像全部入るように」）: 前は文とボタンの下に敷いて object-fit:cover（390 で写真の 45% しか見えず、右の人が切れていた）→ 文とボタンの下に横幅いっぱい・縦横比そのままで置く（写真の端はクリーム #fffbec で、地 #fffaed とつながる） → VI-BG（2026-10-16・本人「背景が写真になるように」）: 縦並びをやめ、PC と同じく写真を帯の背景（grid 2 行ぶん・cover）に戻し、人物が入るよう object-position を左へずらす（横 75%・縦 50%）。文字用に下のクリームの幕を復活 */ #visit::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(160deg,rgba(255,250,237,.85) 0%,rgba(255,250,237,.55) 45%,rgba(255,250,237,0) 85%)} /* VI-BG: 文とボタンの後ろが濃く右下へ薄い幕 */ .vi-h{grid-row:1;grid-column:1;position:relative;z-index:2;margin:0 var(--gut);padding-top:7.2rem;font-size:2.3rem;line-height:1.65;letter-spacing:.06em;white-space:normal} #visit>.gbtn--vi{grid-row:2;grid-column:1;position:relative;z-index:2;justify-self:start;margin:calc(2.4rem * .66) calc(48.3rem * -.68) calc(7.2rem * .66 - 12.856rem * .68) var(--gut)} /* ZOOM-SCALE（2026-10-28）: zoom → transform:scale() にしたので、余白は見た目の値のまま（前は ÷.32 で割り戻していた）。左＝見出しと同じ --gut。右・下の負の値は縮んだ分を詰める */ /* VI-BTN（2026-10-14）: zoom を .66→.44 にすると、余白にも倍率がかかって左端が右へずれた（390 で 13→63px）。左は見出しと同じ --gut（max(2rem, (幅−60rem)/2)）を倍率で割り戻し、上下は元（zoom .66）と同じ見た目の間隔に */ } /* == 08 PEOPLE（sp2: PC と同じ並び。REAL VOICES → 黒い斜めの帯（左に「採用担当 青山が聞く 鯖江精機の 本音 REAL」・右に写真 2 枚） → 金の斜めの帯 4 本（CROSS TALK。−4° 相当の斜め・普段は金だけ＝PC と同じ）→ 金の斜めの帯の上に「全て読む」→ ？・見出し・カード） 段は grid の名前で重ねる（黒い帯・文・写真は同じ段 rv、金の斜め帯とボタンは同じ段 more）== */ @media (max-width:1023px), (max-width:1366px) and (orientation:portrait){ #people{display:grid;grid-template-columns:100%;padding:7rem 0 8rem; grid-template-areas:"rvh" "rv" "ct" "more" "q" "label" "car"} #people>:not([style*="--o"]){display:none} #people>.pe-top{display:block;position:absolute;left:0;top:0;width:100%;height:60rem;background:linear-gradient(180deg,rgba(255,204,147,.45),rgba(255,204,147,0))} #people>img[src*="pe_dots_1"]{display:block;position:absolute;left:auto;right:-12rem;top:-6rem;width:30rem;height:auto;opacity:.5} #pe-rv{grid-area:rvh;width:31rem;max-width:calc(100% - var(--gut) * 2);height:auto;margin:0 var(--gut);position:relative;z-index:1} /* 黒い斜めの帯＋文＋写真（PC の Group 1581 の構図） */ #people>.pe-black{display:block;grid-area:rv;align-self:end;position:relative;left:auto;top:auto;width:100%;height:25rem;clip-path:polygon(0 2.6rem,100% 0,100% calc(100% - 2.6rem),0 100%)} .pe-rv-photos{grid-area:rv;justify-self:end;position:relative;left:auto;top:auto;width:54%;height:36rem;margin-top:1.6rem;display:grid;grid-template-columns:1fr 1fr;gap:.6rem; clip-path:polygon(0 0,100% 0,100% calc(100% - 2.6rem),0 calc(100% - 1.15rem))} .pe-rv-photos img.p{width:100%;height:100%;object-fit:cover;object-position:center 18%} .pe-rv-copy{grid-area:rv;align-self:end;justify-self:start;position:relative;z-index:2;margin:0 0 4.6rem var(--gut);display:grid;grid-template-columns:auto auto auto;align-items:end;column-gap:.6rem} .pe-rv-copy p{position:static;width:auto;height:auto;text-align:left;white-space:nowrap} .pe-rv-ask{grid-column:1/-1;font-size:1.3rem;line-height:1.7} .pe-rv-ask span{font-size:2rem} .pe-rv-of{grid-column:1;font-size:2.4rem;line-height:1.35;padding-bottom:.5rem} /* 10/08 本人「本音を横に」: 2 段目を「鯖江精機の｜本音 REAL」の横並び（PC と同じ読み順） */ .pe-rv-hon{font-size:6.4rem;line-height:1} .pe-rv-real{display:block!important;font-size:1.9rem;line-height:1;padding-bottom:.4rem} /* CROSS TALK: 金の斜めの帯を縦に重ねる。帯どうしは斜めの辺の高さ（--sl）だけ重ねて辺をそろえ、1px のすき間から金の線（PC の帯の縁）を見せる */ .pe-bands{grid-area:ct;display:block;margin-top:calc(var(--sl) * -1 + .1rem);padding:0;overflow:visible;--sl:2.6rem; background:#bfa05a;clip-path:polygon(0 var(--sl),100% 0,100% 100%,0 100%)} /* 帯どうしの .1rem のすき間から見える線＝PC の帯の縁の金（#bfa05a）。上の三角は黒い帯なので切る */ /* 黒い帯の下辺（同じ傾き）に重ねてつなぐ */ .talk-band{position:relative;top:auto;display:grid;grid-template-columns:5.6rem auto auto auto minmax(0,1fr);grid-template-rows:auto auto auto 1fr;align-items:center;column-gap:.6rem; min-height:28rem;height:auto;padding:calc(var(--sl) + 2.4rem) var(--gut) calc(var(--sl) + 2.6rem);overflow:hidden; background:linear-gradient(162deg,#bb9568 14%,#d6ba90 33%,#f4e1bc 50%,#d6ba90 66%,#e8cb9f 88%); clip-path:polygon(0 var(--sl),100% 0,100% calc(100% - var(--sl)),0 100%)} .talk-band+.talk-band{margin-top:calc(var(--sl) * -1 + .1rem)} .talk-band>.tb-face,.tb-read{display:none} .talk-band>.tb-photo{display:block;position:absolute;left:0;top:0;width:100%;height:100%;z-index:-1;object-fit:cover;object-position:50% 25%;opacity:.28;mix-blend-mode:normal;filter:grayscale(1) sepia(1) saturate(2.4) hue-rotate(-8deg) brightness(1.05) contrast(.75);pointer-events:none} /* LK16-028（2026-10-16・Lark「実際のスマホだと、すごい色が濃い（文字が見えなくなる可能性がある）※調節できる？」）: SP-CT-TONE の続き。PC の共通の規則 .tb-photo{mix-blend-mode:color-burn}（recruit.css・@media の外）が SP にも効き、焼き込み＋フィルターの二重で赤く濃く出ていた → normal を明示。濃さ .28・明るさ 1.05・コントラスト .75＝文字の後ろの暗い所（P10）でも本文と文字の比 2.9 以上（束7 指示書の表）。普通の重ねなので Chrome・Safari・実機で同じ色 */ /* SP-CT-TONE（2026-10-16・本人「実際のスマホだと、すごい色が濃い（文字が見えなくなる可能性がある）」）: color-burn（焼き込み）＋opacity は、透明度が効かない描画だと写真が全力で焼き込まれて真っ暗になり文字が沈む（PC の Chrome で opacity:1 にすると本人の言う濃さになる）→ 合成をやめ、写真を金色の単色に寄せて薄く重ねる（普通の重ね＝どの端末でも同じ色）。色味は今の見た目に近い値を 5 案から選んだ（sp_ct_band_color_20261016/v_pair2.png） */ /* DSN-04（2026-10-13・デザイナー④）: SP は常に写真（ホバーが無い）。帯（clip-path で重なりの箱）の金のグラデと焼き込み。文字（grid の子）より下 */ .talk-band[style*="--k:3"]>.tb-photo{object-position:44% 25%} /* DSN-04: 帯 04 は三人（左の男性・採用担当・右の男性）。縦長の SP の窓（写真の横 51%）では真ん中の採用担当を帯の中央に置く（50% だと左の男性の顔がほぼ切れた） */ /* CT-COL（2026-10-16・本人「SP のクロストーク 位置がずれてるから PC 版と同じように見えるように」）: 左の列（斜線マーク・縦書き・番号）を PC（Figma の x/y/w と字の大きさ）の比率で組む。単位は番号の字の大きさ --nf（PC 121.54）。 前は 縦書きが列の右端・マークが左端で軸がずれ、K の下が番号の点に付いていた。控え sp_ct_band_tick_20261016\backup */ .talk-band{--nf:4.4rem} .talk-band>img[src*="people_frame_1559"]{grid-column:1;grid-row:1;width:auto;height:calc(var(--nf) * .658);justify-self:center;align-self:end} /* CT-MARK-UP（2026-10-30・先方FB「このオブジェクト横になってる」）: 立てた印（people_frame_1559_up.svg）は高さで合わせる＝PC の長さ 80÷121.54。前は寝かせた印の幅 .75 */ /* LK16-009（2026-10-16・Lark「①ロゴがずれてる②数字も文字の中心にくるように（全部）」）: 横は列（5.6rem）の真ん中＝縦書き・番号と同じ芯（前は左寄せ＋左の空き (150.95−143)÷121.54）。幅 91.2÷121.54。下端を行の下にそろえ、縦書きとの間を PC と同じに */ .tb-ct{grid-column:1;grid-row:2/4;align-self:start;justify-self:center;width:calc(var(--nf) * .8212);height:auto;margin-top:calc(var(--nf) * .135);writing-mode:vertical-rl;font-size:calc(var(--nf) * .54);line-height:calc(var(--nf) * .8212);letter-spacing:-.035em} /* 字 65.66÷121.54・列の幅＝行の高さ 98.5÷121.54（LK16-009: 箱を列の真ん中に置く＝字の芯が列の真ん中。前は左寄せで芯が番号の左から .41em）・字間 −2.3÷65.66・マークとの間 (1514.63−1498.22)÷121.54 */ .tb-no{grid-column:1;grid-row:4;align-self:end;justify-self:center;margin-top:calc(var(--nf) * .04);font-size:var(--nf);line-height:1} /* LK16-009: 番号も列の真ん中（数字の芯＝縦書きの芯・01〜04 とも）。縦書きの終わり→数字の間は PC と同じ比に詰めた（前 CT-COL は .2em。真ん中に寄せると右上の点は縦書きの右に外れるので K とは重ならない） */ .tb-no[style*="--tk-x"]::after{top:calc((var(--tk-y) - .0472) * 1em)} /* L-024: SP は行の高さ 1（PC は 1.094）で字面が .0472em 上がる → 点も同じだけ上げる */ .tb-w{grid-row:1;font-size:3.1rem;line-height:1.3;letter-spacing:.1em} .tb-w:first-of-type{grid-column:2} .tb-w~.tb-w{grid-column:4} /* CT-WLONG-TOP（2026-10-28）: 2 字より長い語の帯だけ、左右の語（合わせて --wt 字）とバツを 1 行に収める大きさまで縮める（前は「新卒•中途」が画面の右からはみ出した）。 使える幅＝画面 − 左右の余白 − 左の列 5.6rem − 列の間 .6rem×4 − バツ 4rem */ .tb-w--long{font-size:min(3.1rem, (100vw - var(--gut) * 2 - 12rem) / var(--wt) / 1.02);letter-spacing:.02em;text-align:left} .tb-xs{grid-column:3;grid-row:1;width:3.6rem!important;height:auto;margin:0 .2rem;align-self:center} .tb-s{grid-column:2/-1;grid-row:2;margin-top:.6rem;font-size:1.6rem;line-height:1.5;text-align:left;white-space:normal} .tb-p{grid-column:2/-1;grid-row:3/5;align-self:start;margin-top:1.2rem;font-size:1.25rem;line-height:1.85;letter-spacing:.02em} /* CT-SP-MID（2026-10-28・本人「文字を画像の真ん中あたりにくるようにしてほしい」）: 語・副題・本文を、帯の上下の真ん中へ（前は上に寄って、下が大きく空いていた）。 行を「1fr｜語｜副題｜本文｜1fr」にして、上下の 1fr で残りを等分する。左の列（マーク・縦書き・番号）は全部の行にまたがらせ、前と同じ位置になるよう余白で置く （マークの下端＝語の行の下端 3.1rem×1.3・縦書きはその .135 下・番号は下端。縦書きの下に番号の分 1.04 をあけて、帯の高さも前と同じ） */ .talk-band{grid-template-rows:1fr auto auto auto auto 1fr} /* CT-R（2026-10-30）: 説明文の段（5 段目）を足した */ .tb-r{display:contents} .tb-r>.tb-p{display:block;font-size:1.5rem;font-weight:900;line-height:1.6;letter-spacing:.04em} /* CT-R: 見出し（前の本文 1.25rem・700 → 1.5rem・900） */ .tb-r>.tb-d{display:block;grid-column:2/-1;grid-row:5;margin-top:.6rem;color:var(--brown-2);font-size:1.15rem;font-weight:500;line-height:1.85;letter-spacing:.02em} /* CT-R: 説明文（前の本文より小さい） */ .talk-band>img[src*="people_frame_1559"]{grid-row:1/-1;align-self:start;margin-top:calc(3.1rem * 1.3 - var(--nf) * .658)} /* CT-MARK-UP: 下端は前と同じ（語の行の下端）。立てた印の高さの分だけ上から */ .tb-ct{grid-row:1/-1;margin-top:calc(3.1rem * 1.3 + var(--nf) * .135);margin-bottom:calc(var(--nf) * 1.04)} .tb-no{grid-row:1/-1;margin-top:0} .tb-w,.tb-xs{grid-row:2} .tb-s{grid-row:3} .tb-p{grid-row:4} /* CT-GROUP（2026-11-11・本人 iPhone「ここが上の文字と繋がっているように見えるので…下の説明文のグループであるようにみせたい（他4トーク分も）」→ 追加の説明「上の行（同じ年に入った二人）は題（同期×同期）とひと組、 下の行（友であり、ライバルであり）は説明文とひと組。それが見て分かるように」）: 前は 題→副題 .6rem・副題→見出し 1.2rem・見出し→説明文 .6rem でほぼ等間隔＝4 行が 1 つの塊に見えた。 副題（.tb-s）を題に寄せ（.6→0）、見出し（.tb-p）の上を広げ（1.2→2.6rem）、説明文（.tb-d）を見出しに寄せる（.6→0）。字の大きさはそのまま。帯 01〜05 共通。PC は左右に分かれているので変えない */ .tb-s{margin-top:0} .tb-r>.tb-p{margin-top:2.6rem} .tb-r>.tb-d{margin-top:0} .talk-band::after{content:"READ";position:absolute;right:var(--gut);bottom:calc(var(--sl) + 1.2rem);color:var(--brown);font:600 1.4rem/1 var(--cormorant);letter-spacing:.12em;padding-right:2.4rem; background:url(../svg/people_boxicons_arrow_left_stroke_filled.svg) right center/1.6rem no-repeat} /* 金の斜め帯の上に「全て読む」（PC の .pe-gold） */ #people>.pe-gold{display:block;grid-area:more;position:relative;left:auto;top:auto;width:100%;height:auto;margin-top:-2.6rem;clip-path:polygon(0 2.6rem,100% 0,100% calc(100% - 2.6rem),0 100%)} #people>.gbtn--pe{grid-area:more;position:relative;z-index:1;justify-self:center;margin:calc(2.4rem * .82) calc(33.7rem * -.18) calc(4.4rem * .82 - 9.512rem * .18) 0} /* ZOOM-SCALE（2026-10-28）: 前は margin:2.4rem auto 4.4rem（zoom .82 で見た目は ×.82）。transform:scale() にしたので見た目の値を直接書き、縮んだ分を右・下で詰める。真ん中寄せは justify-self */ .pe-q{grid-area:q;position:relative;left:auto;top:auto;width:auto;height:auto;font-size:5rem;line-height:1.1;text-align:center} /* L-062②（2026-10-09・Lark「なんか□の線がある」）: 箱の細い線 rgb(21,17,11) を透明に（箱の大きさ・四隅の L 字は同じ） */ .pe-label{grid-area:label;justify-self:center;position:relative;margin:1.6rem var(--gut) 3rem;padding:1.3rem 2.2rem;border:1px solid transparent;font-size:2rem;line-height:1.5;letter-spacing:.04em;white-space:normal} /* 2026-10-08 四つ角: PC は「箱の 4 隅に短い金の L 字＋ごく暗い金の細線（multiply で地よりわずかに暗い）」。前の左右縦いっぱいの「[ ]」と明るい金の線を PC に合わせた（.ty-col li と同じ作り方） */ .pe-label::before{content:"";position:absolute;inset:-.2rem;pointer-events:none;--c:var(--gold);--a:1.1rem;--t:.26rem;background-repeat:no-repeat; background-image:linear-gradient(var(--c),var(--c)),linear-gradient(var(--c),var(--c)),linear-gradient(var(--c),var(--c)),linear-gradient(var(--c),var(--c)),linear-gradient(var(--c),var(--c)),linear-gradient(var(--c),var(--c)),linear-gradient(var(--c),var(--c)),linear-gradient(var(--c),var(--c)); background-position:0 0,0 0,100% 0,100% 0,0 100%,0 100%,100% 100%,100% 100%; background-size:var(--a) var(--t),var(--t) var(--a),var(--a) var(--t),var(--t) var(--a),var(--a) var(--t),var(--t) var(--a),var(--a) var(--t),var(--t) var(--a)} .pe-label::after{display:none} /* sp5（2026-10-07・本人「まず画像（カード）が中央に来るように」）: 前は 4.4rem｜1fr｜4.4rem＋左右 --gut で、 カード（27.9rem）が真ん中の列より広く右へはみ出していた（390 で左 70px・右 41px・右の矢印が画面外へ 9px）。 1fr｜カード｜1fr にしてカードの中心＝画面の中心。矢印は左右の列の中で、カード側に寄せて対称に置く （カードとの間＝min(3rem, 列の余り÷2)＝狭い幅では画面の端との間と同じ）。大きさは 44px 以上（押しやすさ）。 */ .pe-carousel{grid-area:car;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:0;padding:0;--aw:max(4.4rem,44px)} .pe-carousel>.pe-dodge{display:none} .pe-carousel>.pe-cards{display:none} /* sp5: SP は recruit-sp.js が作る 6 人の束（.pe-sp-deck）を出す。.pe-cards は PC のリングの材料 */ .pe-sp-deck{grid-area:1/2;display:grid;justify-items:center} .pe-sp-deck li.pe-card{grid-area:1/1;position:relative;left:auto;top:auto;width:46.5rem;height:63.8rem;transform:scale(.6);transform-origin:0 0;margin:0 calc(46.5rem * -.4) calc(63.8rem * -.4) 0;transition:opacity .4s ease,visibility .4s;opacity:0;visibility:hidden} .pe-sp-deck li.is-cur{opacity:1;visibility:visible} /* sp6: 指払い・タップで裏返す（動きは recruit-sp.js）。縦のスクロールはブラウザに任せる（pan-y）。 角丸・縁の線・切り抜きは li から面（.pe-sf）へ移す（li で切ると回っている間に手前の辺が欠ける）。裏の面は先に 180° 回しておく＝鏡文字にならない */ .pe-sp-deck{touch-action:pan-y pinch-zoom;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none} .pe-sp-deck li.pe-card{overflow:visible;border-radius:0;-webkit-tap-highlight-color:transparent} .pe-sp-deck li.pe-card[role="button"]{cursor:pointer} .pe-sp-deck li.pe-card::after{content:none} .pe-sp-deck .pe-flip{position:absolute;inset:0;transform-style:preserve-3d} .pe-sp-deck .pe-sf{position:absolute;inset:0;overflow:hidden;border-radius:1.5rem;-webkit-backface-visibility:hidden;backface-visibility:hidden} .pe-sp-deck .pe-sf::after{content:"";position:absolute;inset:0;border:1px solid #868686;border-radius:1.5rem;pointer-events:none} .pe-sp-deck .pe-sf--b{transform:rotateY(180deg)} .pe-sp-status{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .pe-card p{white-space:nowrap} .pe-card .pe-cmt{white-space:normal} .pe-arrow{position:relative;left:auto;top:auto;width:var(--aw);height:var(--aw)} .pe-arrow--prev{grid-area:1/1;justify-self:end;margin-right:min(3rem, calc((100% - var(--aw)) / 2))} .pe-arrow--next{grid-area:1/3;justify-self:start;margin-left:min(3rem, calc((100% - var(--aw)) / 2))} } @media (max-width:1023px) and (prefers-reduced-motion:reduce), (max-width:1366px) and (orientation:portrait) and (prefers-reduced-motion:reduce){ .pe-sp-deck li.pe-card{transition:none} /* sp5: 動きを減らす設定ではフェードせず即座に替える */ } /* == 09 ENVIRONMENT（写真＋グラデ。ひし形 3 つは PC の配置のまま縮めて置く）== */ @media (max-width:1023px), (max-width:1366px) and (orientation:portrait){ #environment{margin-top:0} .env-stage{position:relative;height:auto;display:flex;flex-direction:column;padding:8rem var(--gut) 7rem} .env-stage>*{order:var(--o,0)} .env-stage>:not([style*="--o"]){display:none} .env-stage>.env-photo,.env-stage>.env-grad{display:block!important;position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;object-position:30% 50%} .env-stage>.env-grad::after{background:rgba(0,0,0,.28)} /* FB-15: SP は文字が写真の全幅に乗るので、写真を一様に暗く（::after の本体は recruit.css の FB-15。PC は左側だけ） */ .env-h{margin-top:1.2rem;font-size:2.8rem;line-height:1.45;letter-spacing:.05em;white-space:normal} .env-p{margin-top:1.6rem;font-size:max(1.4rem,14px);line-height:2;letter-spacing:0;white-space:normal} /* FB-15（2026-10-09・実装FBシート No.15）: 本文 14px 以上（375 で 13.5px だった） */ .env-stage>.gbtn{margin:2.8rem 0 0} .env-stage>.gbtn--pe{margin:calc(2.8rem * .82) calc(33.7rem * -.18) calc(9.512rem * -.18) 0} /* ZOOM-SCALE（2026-10-28）: 「環境を知る」も「全て読む」と同じ部品（.gbtn--pe・.82 倍）。前の zoom と同じ見た目の上の余白（×.82）にし、縮んだ分を右・下で詰める */ .env-dias{position:relative;width:78rem;height:71rem;align-self:center;margin:calc(4.4rem * .44) calc(78rem * -.56) calc(71rem * -.56) 0;transform:scale(.44);transform-origin:0 0} /* ZOOM-SCALE（2026-10-28）: 前は margin:4.4rem auto 0; zoom:.44。真ん中寄せは align-self、縮んだ分は右・下で詰める */ .env-dias .dia{position:static;display:block} .env-dias .p{position:absolute;left:calc(var(--x) * .1rem - 96.2rem);top:calc(var(--y) * .1rem - 19.3rem);width:calc(var(--w) * .1rem);height:calc(var(--h) * .1rem)} .env-dias .dia span{display:flex;justify-content:center;align-items:center;white-space:nowrap;text-align:center} /* .44 倍に縮むので（ZOOM-SCALE で zoom → transform:scale()）、小さい文字は 390 幅で 11px 前後（360 幅でも 10px 以上）になる大きさにする */ .env-dias .dia-en{font-size:max(2.6rem,27.3px);line-height:3rem} /* FB-15: .env-dias は zoom .44 → 見た目 12px 以上＝27.3px 以上（12 ÷ .44）。下の 3 行も同じ。回す時の文字の倍率は recruit.js が初めに実寸を測る（F04b）ので JS は変えない */ .env-dias .dia-d{font-size:max(2.7rem,27.3px);line-height:max(3.7rem,1.25em);margin-top:-.8rem} .env-dias .dia-en--s{font-size:max(2.5rem,27.3px);line-height:2.8rem} .env-dias .dia-d--s{font-size:max(2.6rem,27.3px);line-height:max(3.4rem,1.25em);margin-top:-.4rem} .env-dias .dia-h--s{font-size:3.6rem} /* F04（2026-10-08・本人「SP 版のここクリックしたらちゃんと動くように」）: ひし形 3 つをタップで回す（動きは recruit.js の initDiaSpin(sp)・PC の p18b と同じ）。 .sp-dia は JS が .env-dias に付ける（動かない時＝1024px 以上・JS なしは何も変わらない）。点線／金の入れ替えは PC の html.mo .dia（recruit.css 547〜561）と同じ作り。 金（.is-on）は上に来た 1 つだけ＝始めは Growth（静止の見た目と同じ）。PC の .is-on の scale(1.06) は付けない（始めの Growth の画素を変えないため）。 座標の換算は JS（.env-dias の左上＝Figma 962,193・幅 78rem＝780）。この箱の left/top/width を変えたら recruit.js の SPX／SPY／SPW も揃える */ .env-dias.sp-dia{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent} .env-dias.sp-dia .dia{position:relative;z-index:0} /* 回ったあとの重なり順（金の 1 つを前へ）。.dia は高さ 0 で左上は箱と同じ＝子の絶対配置の原点は変わらない */ .env-dias.sp-dia .dia.is-on{z-index:1} .env-dias.sp-dia .dia>img.dia-gold{opacity:0;pointer-events:none} .env-dias.sp-dia .dia.is-on>img.dia-gold{opacity:1} .env-dias.sp-dia .dia.is-on>img.dia-dot{opacity:0} .env-dias.sp-dia .dia--gro span{color:#fff} /* FB-15: 灰をやめて白（PC の recruit.css と同じ） */ .env-dias.sp-dia .dia.is-on span{color:#fff!important} html:not(.no-motion) .env-dias.sp-dia .dia>img.dia-gold,html:not(.no-motion) .env-dias.sp-dia .dia>img.dia-dot{transition:opacity .3s ease} html:not(.no-motion) .env-dias.sp-dia .dia span{transition:color .3s ease} } /* == 10 MESSAGE（クリーム。写真のパネル 2 枚 → ボタン → 下端に SABAESEIKI のマーキー）== */ @media (max-width:1023px), (max-width:1366px) and (orientation:portrait){ #message{display:flex;flex-direction:column;padding:8rem var(--gut) 6.4rem} /* 下 6.4rem: 旧 marquee の上の余白（margin-top 6.4rem）の代わり＝「メッセージを読む」ボタンと共通の一番下のセクションの間 */ #message>*{order:var(--o,0)} #message>:not([style*="--o"]):not(.marquee){display:none} .ms-h{margin:1.2rem 0 2.8rem;font-size:2.6rem;line-height:1.45;letter-spacing:.05em;white-space:normal} .ms-lead{margin:-1.2rem 0 2.8rem;font-size:1.3rem;line-height:1.9;letter-spacing:.02em;white-space:normal} /* MS-LEAD（2026-10-30）: 見出しの下の導入文（見出しの下の余白を詰めて続ける） */ .ms-panel{position:relative;left:auto;top:auto;display:flex;flex-direction:column;justify-content:center;width:100%;height:auto;aspect-ratio:720/365;min-height:18rem;margin-bottom:1.2rem;padding:2rem 7.6rem 2rem 2.2rem} .ms-panel>img.p{position:relative;width:auto;height:2.3rem;opacity:.65;margin-bottom:.6rem;align-self:flex-start} .ms-h3{font-size:2.2rem;line-height:1.4;white-space:normal} .ms-name{margin-top:.4rem;font-size:1.3rem;line-height:1.6;white-space:normal} .ms-panel>.ms-arrow{position:absolute;left:auto;right:2rem;top:auto;bottom:2rem;width:4.6rem;height:4.6rem;margin-top:0} /* L-101（2026-10-09）: Figma と同じ右下へ（大きさは今のまま） */ .ms-btn{position:relative;width:27rem;height:6.8rem;margin:2rem auto 0} #message>.marquee{position:relative;inset:auto;order:9;height:9.6rem;margin:6.4rem calc(var(--gut) * -1) 0;overflow:hidden} .marquee__track{position:absolute;left:0;top:0;bottom:0;right:auto;display:flex;width:max-content} .marquee__set{position:relative;inset:auto;display:flex;align-items:flex-end;gap:1.8rem;padding-right:3.6rem;flex:none} .marquee__set .p{position:relative} .marquee__set img.p{width:3.6rem;height:9.6rem} .mq-t{font-size:12.6rem;line-height:7.4rem;letter-spacing:-.035em;white-space:nowrap} } @media (max-width:1023px) and (prefers-reduced-motion:no-preference), (max-width:1366px) and (orientation:portrait) and (prefers-reduced-motion:no-preference){ html:not(.no-motion) .marquee__track{animation:marquee 26s linear infinite} } /* == 11 ENTRY（黒。丸い写真 → ENTRY → 2 つのボタン）== */ @media (max-width:1023px), (max-width:1366px) and (orientation:portrait){ .en-title{margin-top:0;font-size:7.2rem;line-height:1;letter-spacing:.1em} .en-copy{margin:1.8rem 0 3.2rem;font-size:1.7rem;line-height:1.7;text-align:center;white-space:normal} .frame-btn{position:relative;left:auto;top:auto;display:flex;flex-direction:column;justify-content:center;width:100%;max-width:34rem;height:auto;min-height:10rem;margin-top:2.4rem;padding:1.8rem 8rem 1.8rem 2.4rem} .frame-btn>img.p{position:absolute;left:auto;right:2rem;top:50%;width:4.6rem;height:4.6rem;margin-top:-2.3rem} .frame-btn>.frame-btn__corner{position:absolute;width:3.2rem;height:3.2rem} .frame-btn>.fbc-tl{left:-1rem;top:-1rem} .frame-btn>.fbc-tr{left:auto;right:-1rem;top:-1rem} .frame-btn>.fbc-br{left:auto;right:-1rem;top:auto;bottom:-1rem} .frame-btn>.fbc-bl{left:-1rem;top:auto;bottom:-1rem} .en-btn-en{padding-left:0;font-size:4rem;line-height:1.1;letter-spacing:.2em;text-align:left} .en-btn-ja{font-size:1.4rem;line-height:1.6;white-space:pre} .en-btn2-t{font-size:1.7rem;line-height:1.5;letter-spacing:.02em;white-space:normal} } /* == 動き（SP・控えめ）。html.sp-mo は recruit-sp.js が付ける（1023px 以下・reduced-motion でない・no-motion でない）。 付かないとき（JS なし・動きを減らす設定）は全部そのまま見える。値は PC の C（FV の入場）と rv-l（見出しのワイプ）の現物 == */ @media (max-width:1023px), (max-width:1366px) and (orientation:portrait){ /* FV の入場: 隠した状態は最初の表示から効かせる（html.js は head のスクリプトが最初に付ける。no-motion＝動きを減らす設定は除く）。 recruit-sp.js が sp-intro-run を付けると出てくる。JS が動かなかったときは 8.5 秒で必ず出す（sp-intro-fallback。RC-INTRO で 3.5 秒から延ばした） */ html.js:not(.no-motion) .fv-stage:not(.sp-intro-run):not(.sp-intro-done) :is(.fv-ch--1,.fv-ch--2,.fv-ch--4,.fv-ch--5){clip-path:inset(-20% 100% -20% -20%);animation:sp-intro-fallback .01s linear 8.5s forwards} html.js:not(.no-motion) .fv-stage:not(.sp-intro-run):not(.sp-intro-done) .fv-ch--3{opacity:0;animation:sp-intro-fallback .01s linear 8.5s forwards} html.js:not(.no-motion) .fv-stage:not(.sp-intro-run):not(.sp-intro-done) .fv-shared .fv-gold-s{opacity:0;transform:scale(.96);filter:blur(1.2rem);animation:sp-intro-fallback .01s linear 8.5s forwards} html.js:not(.no-motion) .fv-stage:not(.sp-intro-run):not(.sp-intro-done) .fv-sub{opacity:0;translate:0 2rem;animation:sp-intro-fallback .01s linear 8.5s forwards} html.js:not(.no-motion) .fv-ch{transition:clip-path .9s cubic-bezier(.51,.32,0,.96) var(--cd,0s),opacity 1s ease var(--odl,0s)} html.js:not(.no-motion) .fv-stage.sp-intro-run :is(.fv-ch--4,.fv-ch--5){--cd:.9s} html.js:not(.no-motion) .fv-stage.sp-intro-run .fv-ch--3{--odl:.9s} html.js:not(.no-motion) .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.js:not(.no-motion) .fv-sub{transition:opacity .8s ease-out 2.6s,translate .8s ease-out 2.6s} html.js:not(.no-motion) .fv-stage.sp-intro-done .fv-ch{clip-path:none} @keyframes sp-intro-fallback{to{clip-path:inset(-20%);opacity:1;transform:none;filter:none;translate:0 0}} /* FV-VEIL（2026-10-20）の黒い幕は RC-INTRO（同日・ロゴの導入。css/rc-top-intro.css）に置き換えた。題字の入場は導入が終わってから（recruit-sp.js）。 そのため上の入場の保険（sp-intro-fallback）は 3.5s → 8.5s（導入の保険 8s のあと。3.5s のままだと導入の裏で題字が出きってしまい、入場が見えない） */ /* 見出しは左から（縦書きは上から）ワイプ、写真は 0.1s ずつずれてフェード（PC の F・H と同じ考え方） */ /* sp2（Fable 検収・必須）: 隠した状態でも 1px の面積を残す。面積が 0 だと IntersectionObserver が「入っていない」のままになり、幅によっては見出しが永久に出なかった */ html.sp-mo .sp-rv{clip-path:inset(-20% calc(100% - 1px) -20% -20%);transition:clip-path .8s cubic-bezier(.51,.32,0,.96) var(--rd,0s)} html.sp-mo .sp-rv-d{clip-path:inset(-20% -20% calc(100% - 1px) -20%);transition:clip-path .8s cubic-bezier(.51,.32,0,.96) var(--rd,0s)} html.sp-mo :is(.sp-rv,.sp-rv-d).is-in{clip-path:inset(-20%)} html.sp-mo :is(.sp-rv,.sp-rv-d).is-done{clip-path:none} html.sp-mo .sp-fade{opacity:0;transition:opacity .8s ease var(--rd,0s)} html.sp-mo .sp-fade.is-in{opacity:1} /* MI-WIPE-SP（2026-11-11・本人「（OUR VISION の）出てくる感じ PC とあわせたい・アニメーションが違う」）: MISSION／VISION の止めの画面だけ、本文の帯（.sp-wipe）を PC の .mi-prose-clip と同じ 左からのワイプ .8s に（recruit-sp.js miPin）。写真は本人「写真は全部ふわっと」で今までどおり .sp-fade（同日に一度入れたまだらは外した） */ html.sp-mo .sp-wipe{clip-path:inset(-2rem calc(100% - 1px) -2rem -2rem);transition:clip-path .8s cubic-bezier(.51,.32,0,.96) var(--rd,0s)} html.sp-mo .sp-wipe.is-in{clip-path:inset(-2rem)} html.sp-mo .sp-wipe.is-done{clip-path:none} } /* == sp3（2026-10-07・本人「SP版のここの切り替わり方がPC版と違う」＝FV の A→B と PHILOSOPHY の①→②）: PC と同じく、ステージを画面に止めて（sticky）スクロール量で切り替え、止めたまま次のセクションが下から覆いかぶさる（PC の p14）。 - FV: A のあいだ 30rem スクロールしたら B へ（recruit-sp.js が .is-b）。B の写真は 1.5s で重なり、A の文字は右へ抜け、B の文字は左から現れる（PC の B と同じ時間）。 - PHILOSOPHY: 25rem で①→②（.is-in）。①の文字はぼけながら消え（PC の塵の代わり）、黒地に②の文字が .45s 遅れて集まるように出る。機械の写真と OUR は同じ位置で差し替え（PC の p23）。 - 止める長さ: FV は --fvpin、PHILOSOPHY は --phpin。止めている間の最後の 1 画面分で次のセクションがせり上がる（#philosophy／#mission を 1 画面分上に重ねる）。 html.sp-mo が無い時（動きを減らす設定・JS なし）は、上の静止の並び（A の下に B、①の下に②）のまま == */ @media (max-width:1023px) and (min-height:500px), (max-width:1366px) and (orientation:portrait) and (min-height:500px){ /* 横向きのスマホなど低い画面（500px 未満）は止めない＝静止の並び。iPhone SE の Safari はツールバー付きで約 548px なので止める（Fable 検収で 560 から下げた） */ html.sp-mo{--st:max(50rem,calc(100vh - 7.2rem - var(--safe)));--fvpin:90rem;--phpin:80rem} /* 7.2rem＝rc-header.css の --rch-bar（下の固定バー）。html の規則なので body の変数は使えず数字で書く */ @supports (height:100svh){html.sp-mo{--st:max(50rem,calc(100svh - 7.2rem - var(--safe)))}} /* ステージ＝ツールバーが出ている時の高さ（svh）−下のバー。A の構図（60rem）より低い画面は、A の上端がヘッダーの裏で少し切れる */ /* FV: 止めるステージ */ html.sp-mo #fv{height:calc(var(--st) * 2 + var(--fvpin))!important} html.sp-mo .fv-stage{position:sticky;top:0;height:var(--st)} html.sp-mo :is(.fv-a,.fv-shared,.fv-b){top:0;height:100%} html.sp-mo .fv-a.fv-back .fv-in{height:100%} html.sp-mo .fv-front .fv-in{top:calc(var(--st) - var(--fa));bottom:auto;height:var(--fa)} /* A の構図（60rem）はステージの下端にそろえる＝高い画面では上にボケの地が伸びる */ html.sp-mo .fv-shared .fv-gold-s{top:calc(var(--st) - var(--fa) + 24rem)} /* L-018（2026-10-09・Lark「【FV】変」SP）: 高い画面で A の上がボケだけになっていた → 女性の写真をステージの縦いっぱいに（Figma の SP 枠 420:148743 の FV と同じ組み）。帽子の上端（画像の高さの 2.02%）はヘッダーの帯（6.4rem）の下 3rem＝ステージの 9.4rem、写真の下端は見える所の下端 +2rem。高さ --wh＝(下端 − 7.4rem) ÷ .98 を 58.5rem（今の大きさ）〜86rem に。横は顔の中心（画像の幅の 53%）を 20.1rem（今と同じ）に。ステージが 60rem より低い画面は今のまま（min）。機械の写真は上端へ。文字・金の S・B は動かさない */ html.sp-mo .fv-a.fv-front .fv-worker{--wb:var(--st);--wh:clamp(58.5rem,calc((var(--wb) - 7.4rem) / .98),86rem);width:calc(var(--wh) * .7451);left:calc(20.1rem - var(--wh) * .3949);top:min(7.8rem,calc(var(--fa) - var(--st) + 9.4rem - var(--wh) * .0202))} html.sp-mo .fv-a.fv-front .fv-machine{top:min(-3rem,calc(var(--fa) - var(--st) - 2rem))} @supports (height:100lvh){html.sp-mo .fv-a.fv-front .fv-worker{--wb:max(var(--st),calc(100lvh - 7.2rem - var(--safe)))}} /* L-018: 実機でツールバーが縮んで画面が伸びても、写真の下端が見える所の下まで届く */ /* 実機でツールバーが縮むと画面は svh より伸びる → ステージの下に地の帯が出ないよう、写真・ボケ・グラデだけ lvh まで下へ伸ばす（文字は svh の下端基準のまま） */ @supports (height:100lvh){ html.sp-mo .fv-stage{overflow-x:clip;overflow-y:visible} html.sp-mo :is(.fv-a,.fv-shared,.fv-b.fv-back){height:max(100%,100lvh)} html.sp-mo .fv-b-catch{top:calc(var(--st) - 43.4rem);bottom:auto} /* B の奥の層を伸ばしたので、QUIET PASSION. は上から（svh の下端から 31rem 上＝静止と同じ） */ html.sp-mo .fv-b.fv-front{overflow:visible} html.sp-mo .fv-b.fv-front .fv-grad{bottom:calc(var(--st) - max(var(--st),100lvh));height:calc(46rem + max(var(--st),100lvh) - var(--st))} html.sp-mo .fv-a.fv-front .fv-grad{bottom:calc(var(--st) - max(var(--st),100lvh));height:calc(24rem + max(var(--st),100lvh) - var(--st))} } html.sp-mo .fv-b .fv-gold-s--nm{display:none} /* PC と同じく金の S は A/B 共通の 1 枚（動かさない） */ html.sp-mo .fv-b.fv-back{opacity:0;transition:opacity 1.5s ease} html.sp-mo .fv-b.fv-front .fv-grad{opacity:0;transition:opacity 1.5s ease} html.sp-mo .fv-b .fvt{clip-path:inset(-20% 100% -20% -20%);transition:clip-path .45s ease-in} /* B から A へ戻る時: B の文字を先に消す */ html.sp-mo .fv-a.fv-front :is(.fv-grad,.fv-machine,.fv-worker){transition:opacity 1.5s ease} html.sp-mo .fv-title,html.sp-mo .fv-stage.sp-intro-done .fv-sub{transition:opacity .8s ease .45s,translate .8s ease .45s} /* A へ戻る時は B の文字が消えてから（同時だと 2 つの見出しが重なって見えた） */ html.sp-mo .fv-stage.is-b .fv-b.fv-back,html.sp-mo .fv-stage.is-b .fv-b.fv-front .fv-grad{opacity:1} html.sp-mo .fv-stage.is-b .fv-b .fvt{clip-path:inset(-20%);transition:clip-path 1s ease-out .3s} html.sp-mo .fv-stage.is-b .fv-a.fv-front :is(.fv-grad,.fv-machine,.fv-worker){opacity:0} html.sp-mo .fv-stage.is-b :is(.fv-title,.fv-sub){opacity:0;translate:4rem 0;transition:opacity .5s ease,translate .5s ease} /* PHILOSOPHY: FV の上に 1 画面分重ねて覆いかぶさる → 止めて①→② → MISSION が覆いかぶさる */ html.sp-mo #philosophy{margin-top:calc(-8rem - var(--st))!important} html.sp-mo .ph-stage{height:calc(var(--st) * 2 + var(--phpin))} html.sp-mo .ph-pin{position:sticky;top:0;height:var(--st);overflow:hidden} html.sp-mo :is(.ph-1,.ph-2){position:absolute;left:0;top:0;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center; padding:8rem max(3.6rem,var(--gut)) 0;background:none} html.sp-mo .ph-1 .ph-h1,html.sp-mo .ph-body1,html.sp-mo .ph-2 .ph-h2,html.sp-mo .ph-body2{flex:none} html.sp-mo :is(.ph-1,.ph-2) .ph-machine{left:-10rem;top:auto;bottom:-4rem;width:60rem} /* ①②で同じ位置・大きさ＝差し替えても背景が跳ばない（PC の p23） */ html.sp-mo :is(.ph-1,.ph-2) .ph-our{top:9rem} html.sp-mo .ph-2 .ph-slash{top:calc(50% - 15rem)} html.sp-mo .ph-1 :is(.ph-h1,.ph-body1){transition:clip-path .8s cubic-bezier(.51,.32,0,.96),opacity .6s ease .4s,filter .6s ease .4s,scale .6s ease .4s} /* clip-path は見出しのワイプ（.sp-rv）の分 */ html.sp-mo .ph-2 :is(.ph-h2,.ph-body2,.ph-slash){opacity:0;filter:blur(1rem);transition:clip-path .8s cubic-bezier(.51,.32,0,.96),opacity .4s ease,filter .4s ease} html.sp-mo .ph-2 :is(.ph-machine,.ph-our){opacity:.001} html.sp-mo .ph-pin.is-in .ph-1 :is(.ph-h1,.ph-body1){opacity:0;filter:blur(1rem);scale:1.04;transition:clip-path .8s cubic-bezier(.51,.32,0,.96),opacity .5s ease,filter .5s ease,scale .5s ease} html.sp-mo .ph-pin.is-in .ph-1 :is(.ph-machine,.ph-our){opacity:.001} html.sp-mo .ph-pin.is-in .ph-2 .ph-machine{opacity:1} html.sp-mo .ph-pin.is-in .ph-2 .ph-our{opacity:.7} /* ①の OUR と同じ .7（1 にすると差し替えの瞬間に 1.4 倍明るくなった・Fable 検収） */ html.sp-mo .ph-pin.is-in .ph-2 :is(.ph-h2,.ph-body2,.ph-slash){opacity:1;filter:blur(0);transition:clip-path .8s cubic-bezier(.51,.32,0,.96),opacity .8s ease .45s,filter .8s ease .45s} /* 10/08 ②の金の斜線は燃え上がりで出す（recruit-sp.js の phFire＝PC の p28 と同じ）。燃えている間は canvas（.ph-slash-fire）を見せて画像は隠し、 燃え終わったら画像へ一瞬で差し替える（ぼかしのフェードはやめる）。canvas が作れない時は .sp-fire が付かず上のフェードのまま */ html.sp-mo .ph-slash-fire{position:absolute;margin:0} html.sp-mo .ph-pin.is-burning .ph-slash-fire{visibility:visible} html.sp-mo.sp-fire .ph-pin .ph-2 .ph-slash{opacity:0;filter:none;transition:none} html.sp-mo.sp-fire .ph-pin.is-in:not(.is-burning) .ph-2 .ph-slash{opacity:1} html.sp-mo #mission{margin-top:calc(-10.4rem - var(--st))!important} } /* == F17（2026-10-13）: SP の MISSION → VISION を 1 画面に止めて切り替える（PC の F08 と同じ区切り）。作りは recruit-sp.js の miPin（組を入れ物に移す）。 組の並びは上の 03 MISSION と同じ grid（.mi-in の m/v の行だけを組ごとに持つ）。止める・フェードは html.sp-mo の時だけ＝動きが無い時は M の下に V がそのまま縦に並ぶ。 各組の入れ物は金の地を自分で持つ（darken・screen の合成が金と混ざる。組の入れ物は自分で重なりの箱になってよい）。 == */ @media (max-width:1023px), (max-width:1366px) and (orientation:portrait){ .sp-mi-track{grid-row:mph-start / vpro-end;grid-column:1/-1} .sp-mi-comp{display:grid;grid-template-columns:var(--gut) 12rem minmax(0,1fr) 12rem var(--gut)} .sp-mi-comp--m{grid-template-areas:". mph mph mtt ." ". mpro mpro mpro ."} .sp-mi-comp--v{grid-template-areas:". vtt vph vph ." ". vtt vpro vpro ."} .sp-mi-comp>*{position:relative;z-index:1} .sp-mi-comp>img[src*="mask_group_2"]{grid-area:mtt;justify-self:end;width:1.1rem;height:auto;margin-top:4.6rem} .sp-mi-comp>img[src*="mask_group_3"]{grid-area:vtt;justify-self:start;width:1.1rem;height:auto;margin-top:7rem} .sp-mi-comp>img[src*="mi_flame_4"]{grid-row:mph;grid-column:1/4;justify-self:start;margin:-3rem 0 0 -8rem} } @media (max-width:1023px) and (min-height:500px), (max-width:1366px) and (orientation:portrait) and (min-height:500px){ html.sp-mo .sp-mi-track{height:calc(var(--st,calc(100vh - 7.2rem)) * 3.25)} /* MI-SHORT（2026-11-11・本人「完全に出てから 2 回くらいスクロールしたら次に」）: ステージ 1 画面＋止める区間 2.25 画面（recruit-sp.js miPin の MI_D と同じ数）。前は 4.26 */ /* LK16-030③（2026-10-16）: ステージ 1 画面＋止める区間 3.26 画面（recruit-sp.js miPin の D と同じ数）。MI-PRE 2026-10-15 は 2.8（止める区間 1.8 画面）・その前は 2.2 */ html.sp-mo .sp-mi-stage{position:sticky;top:0;height:var(--st,calc(100vh - 7.2rem));overflow:hidden;background:var(--gold)} html.sp-mo .sp-mi-scaler{position:absolute;left:0;top:0;width:100%;height:100%;transform-origin:50% 0;background:var(--gold)} html.sp-mo .sp-mi-comp::before{content:"";position:absolute;top:0;bottom:0;left:-100%;right:-100%;background:var(--gold);z-index:0} /* TKH-02（2026-10-13）: 倍率 s が 1 未満の時、炎（mi_flame_4・screen 合成）が組の箱の左へはみ出す所（margin-left:-8rem）は、組の入れ物の外＝下地が透明で、screen 合成の黒がそのまま黒い四角に見えた（375×667 は MISSION が長くなって s≈0.93 になり目立った）。組の入れ物の左右にも金の地を敷く（ステージの overflow:hidden で切れる）。子（z-index:1）より下 */ html.sp-mo .sp-mi-comp{position:absolute;left:0;top:0;width:100%;height:100%;box-sizing:border-box;padding-top:var(--mi-pt,0);align-content:start;background:var(--gold);z-index:1} html.sp-mo .sp-mi-comp.is-off{z-index:2;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .5s ease,visibility 0s linear .5s} /* 消える側が上に重なって .5s でフェードアウト。出る側は即座に下に出る（中身は出現前） */ html.sp-mo .sp-mi-instant,html.sp-mo .sp-mi-instant *{transition:none!important} } /* SP-VI-BIG（2026-10-16・本人「VISION は写真の配置そのままで、写真の大きさを大きくしたりして余白（金の空き）を小さく」）: 止めた画面の VISION だけ、 写真のかたまり（.mi-darken）を 1.45 倍（並びはそのまま・右端は画面の外で切れる）・本文の写真への重なりを -10rem→-2rem に。 組の高さ 356→479px（390）＝MISSION（533）を超えないので画面の縮み（miPin の s）は 1 のまま。上下の空き 234/182→173/120px。 同日の SP-MI-FULL（MISSION を写真で敷き詰め）は本人「やりすぎ」で外した */ @media (max-width:1023px), (max-width:1366px) and (orientation:portrait){ .sp-mi-comp--v .mi-darken{width:calc((100% + var(--gut)) * 1.45)} .sp-mi-comp--v img[src*="mask_group_3"]+.mi-en+.mi-prose{margin-top:-12rem} /* 本人「（写真を大きくする前の VISION の）このぐらいの位置まで」: 本文の始まりを止めた画面の上から 48%（前と同じ）に。写真への重なり -2→-12rem＋組を 4rem 持ち上げ（下） */ } @media (max-width:1023px) and (min-height:500px), (max-width:1366px) and (orientation:portrait) and (min-height:500px){ html.sp-mo .sp-mi-comp--v{padding-top:max(0px, calc(var(--mi-pt,0px) - 4rem))} html.sp-mo .sp-mi-comp--m{padding-top:max(0px, calc(var(--mi-pt,0px) - .55rem))} /* MI-TXT-K: 本文だけ上げた分の真ん中そろえのずれ（半分）を打ち消し、写真・見出しの位置を据え置く */ html.sp-mo .sp-mi-comp--v::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;mix-blend-mode:screen;background:url(../img/mi_flame_4.webp) left -9rem bottom -3rem/26rem auto no-repeat,url(../img/mi_flame_4_r180_1016.webp) right -9rem top calc(max(0px, var(--mi-pt,0px) - 4rem) - 5.5rem)/26rem auto no-repeat} /* VI-FLAME-UP（2026-11-11・本人 iPhone「炎の装飾もう少し上にして顔にかぶらないようにしたい」）: 右上の炎は前は組の上端から 4.4rem＝写真の位置（画面の高さで上下する）と関係なく置いていたので、低い画面ほど右上の写真の男性（白髪）の顔にかかった（320×568・375×667・393×760・430×852 で顔の所の差 平均 9〜34）。炎の上端を「写真の上端（組の padding＋.mi-darken の margin-top 7rem）−12.5rem」に＝炎の見える所（絵の上から 15〜80%）の下の端が男性の髪の上で止まる。どの画面の高さでも写真との位置関係は同じ /* VI-FLAME（2026-10-16・本人「左下と右上に炎を」）: MISSION（SP-MI-BIG2）と同じ金の煙を VISION にも左下と右上（180° 回した画像 mi_flame_4_r180_1016）に。位置は MISSION とそろえた（390 で右上は上端から 44px） */ /* VISION の組だけ、上下の真ん中（miPin の --mi-pt）から 4rem 上へ（390 で本文の始まり 463→373px） */ } /* SP-MI-BIG2（2026-10-16・本人「画像を少し大きくしてもう少し上に・テキストを少し下に・この炎を左下と右上に」）: MISSION の写真 4 枚を画面の中心（写真の箱の左から 17.5rem）を軸に 1.12 倍＋2.4rem 上へ（並びはそのまま）。 本文は写真の箱が伸びた分＋2rem 下へ（-19→-17rem）。金の煙（mi_flame_4）は右上へ（180° 回して内向き）・止めている間は左下にもう 1 枚（::after・同じ画像・screen）。 組の高さ 533→578px（390）＝止めた画面に収まる（miPin の s は 1。375×667 だけ 0.94 に縮む） */ @media (max-width:1023px), (max-width:1366px) and (orientation:portrait){ .mi-photos{height:43.3rem} .mi-photos .mi-ph--1{left:9.1rem;top:1.63rem;width:26.88rem} .mi-photos .mi-ph--3{left:-2.1rem;top:9.7rem;width:18.82rem} .mi-photos .mi-ph--2{left:16.94rem;top:18.43rem;width:25.54rem} .mi-photos .mi-ph--4{left:-.76rem;top:23.7rem;width:22.4rem} img[src*="mask_group_2"]+.mi-en+.mi-prose{margin-top:-20.35rem} /* MI-TXT-K（2026-10-16・本人「ミッションの文字の位置が低くなってる。ZIP 20261016k の時の高さに戻して・本文の位置だけ」）: 止めた画面で本文の始まりを k と同じ（390 で上から 364px）に。本文だけ上げると組の真ん中そろえ（miPin）で写真・見出しも半分下がるので、下の .sp-mi-comp--m の padding で 0.55rem 打ち消す。経緯の値: -19.25（中間）・-21.5・-17・-15.5rem */ .sp-mi-comp>img[src*="mi_flame_4"]{grid-row:mph;grid-column:3/6;justify-self:end;margin:-9rem -9rem 0 0;rotate:180deg} } @media (max-width:1023px) and (min-height:500px), (max-width:1366px) and (orientation:portrait) and (min-height:500px){ html.sp-mo .sp-mi-comp--m::after{content:"";position:absolute;left:-9rem;bottom:-3rem;width:26rem;aspect-ratio:923/658;background:url(../img/mi_flame_4.webp) center/contain no-repeat;mix-blend-mode:screen;z-index:0;pointer-events:none} } /* == 12 FOOTER（金。下の固定バーの分だけ下に余白）== */ @media (max-width:1023px), (max-width:1366px) and (orientation:portrait){ #footer{display:flex;flex-direction:column;gap:1.4rem;padding:4.8rem var(--gut) calc(var(--safe) + 4.8rem)} #footer>a.p:first-child{width:100%;max-width:28rem} #footer a img{height:auto} .ft-addr{font-size:1.3rem;line-height:1.85;white-space:normal;color:rgba(26,26,26,.75)} .ft-tel{font-size:2.1rem;line-height:1.4;white-space:normal} .ft-hours{font-size:1.3rem;line-height:1.6;white-space:normal;color:rgba(26,26,26,.75)} /* 補足は主情報（採用直通）より薄く */ .ft-nav{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem 1.6rem;margin-top:2rem;padding-top:2.4rem;border-top:1px solid rgba(26,26,26,.25)} .ft-nav a{font-size:1.35rem;line-height:1.5;white-space:normal} } /* == p31（2026-10-08・本人FB ③④・Figma 420:47581）== ③ NUMBER: 1 枠に「見出し＋値」を 2 組（旧 TOP の「数字で見る」の値）→ 組の間をあける。 ④ CROSS TALK（仮の SP。デザイナーの SP が届いたら合わせ直す・Figma メモ 420:156753「ここごめん、SPまた渡します」）: PC の構図を縮める＝上に「CROSS／TALK」と印、その下に 9 人の塊（PC の x 612〜1932・y 215〜1235 を同じ比で縮めた箱）、 黒い斜めの帯は人の塊の 35% の高さから下（PC と同じ位置関係）、文は帯の中で人の下に置く（人の顔に文を重ねない） */ @media (max-width:1023px), (max-width:1366px) and (orientation:portrait){ /* p31c: 1 枠 1 項目（見出し・値・説明・時点の注記）。見出しの添え字・説明・注記は 13px 以上 */ .ab-item--n .ab-ks{display:inline-block;margin-left:.6rem;font-size:max(1.3rem,13px);font-weight:700;letter-spacing:.04em} .ab-item--n .ab-d{margin-top:.8rem;font-size:max(1.3rem,13px);line-height:1.8;word-break:normal;line-break:strict} .ab-item--n .ab-asof{margin-top:.6rem;color:rgba(26,26,26,.7);font-weight:700;font-size:max(1.3rem,13px);line-height:1.6} .ab-num-list .ab-item--n p{text-align:left} /* 偶数の枠も説明文は左揃え（右揃えだと行頭がそろわず読みにくい） */ .ab-num-list .ab-item--n .ab-d{text-wrap:wrap} /* LK16-042（2026-10-16・Lark「実際のスマホで見ると変な隙間があったりする」）: SP 共通の text-wrap:pretty（:is(…,.ab-d,…) の行）は iPhone の Safari では段落全体の行をそろえて短くするので、NUMBER の説明が箱（224px）の右に最大 55px 余り 4 行になっていた（Chrome は 3 行・余り 0〜3px）。NUMBER の説明だけ普通の折り返しに＝Safari も Chrome と同じ改行 */ .ab-review-note{display:inline-block} #about .ab-pa{display:block} #about .ab-pa+.ab-pa{margin-top:2.7rem} /* DSN-01（2026-10-13）: 段落の間を 1 行分（1.4rem×1.95≒2.7rem。前は 1rem） */ #about .ab-tl{display:inline-block;margin-top:1rem;color:var(--brown);font-weight:900;font-size:1.4rem;line-height:1.8;letter-spacing:.06em;border-bottom:1px solid currentColor;text-decoration:none} #about .ab-h{font-feature-settings:normal} /* DSN-01（2026-10-13）: palt をやめる（PC と同じ。字間 .086em で詰めない） */ #about .ab-p{font-size:max(1.4rem,13px)} /* DSN-01: 1.35→1.4rem */ #about .ab-tl{font-size:max(1.4rem,13px)} #people{grid-template-areas:"rvh" "rv" "rvc" "ct" "more" "q" "label" "car"} #pe-rv.pe-ct-big{grid-area:rvh;width:auto;height:auto;margin:0 0 0 calc(var(--gut) + .4rem);color:#fff;font:600 9.6rem/7.4rem var(--cormorant);letter-spacing:-.65rem;white-space:nowrap; transform-origin:0 100%;transform:rotate(-2.58deg);position:relative;z-index:1} #pe-rv.pe-ct-big span{padding-left:8.8rem} #people>.pe-ct-xs{grid-area:rvh;align-self:end;justify-self:start;position:relative;left:auto;top:auto;width:7.6rem;height:7.8rem;margin:0 0 -.6rem calc(var(--gut) + .8rem); object-fit:contain;mix-blend-mode:soft-light;transform:rotate(-2.17deg);z-index:1} .pe-rv-photos.pe-ct-photos{grid-area:rv;justify-self:stretch;width:100%;height:auto;aspect-ratio:1320/1020;margin-top:-2.4rem;display:block;gap:0;clip-path:none} .pe-ct-photos img.p{position:absolute;left:calc((var(--x) - 612) / 1320 * 100%);top:calc(var(--y) / 1020 * 100%);width:calc(var(--w) / 1320 * 100%);height:auto;object-fit:fill} .pe-ct-photos img.pe-ct-halo{display:none} /* 網点の光（plus-lighter）は SP の入場フェード（sp-fade の箱の opacity）で黒い四角になる → SP では出さない */ /* PE-SP-UP（2026-10-16・本人「SP 版の画像の位置を調整」＝CROSS TALK の下の空きに、男性 8 人の写真を上げる）: 男性の 4 枚だけ --pe-up 分（Figma の単位）上へ。 写真の箱の高さも同じだけ詰め（1020→1020−up）、下の「採用担当 青山が聞く」も一緒に上がる。女性（1 枚目）の位置はそのまま */ .pe-rv-photos.pe-ct-photos{--pe-up:170;aspect-ratio:1320/calc(1020 - var(--pe-up))} .pe-ct-photos img.p{top:calc(var(--y) / (1020 - var(--pe-up)) * 100%)} .pe-ct-photos img.p:not(:first-child){top:calc((var(--y) - var(--pe-up)) / (1020 - var(--pe-up)) * 100%)} .pe-ct-photos img.p:first-child{--pe-ax:8;left:calc((var(--x) - 612) / 1320 * 100% + var(--pe-ax) * 1%)} /* PE-AO-R（2026-10-16・本人「SP 版だけ青山さんの位置を右に寄せて」）: 1 枚目（青山さん）だけ箱の幅の 8% 右へ（390 で約 31px）。右肩は画面の端で切れる（section の overflow:clip） */ #people>.pe-black{grid-area:auto;grid-row:rv-start/rvc-end;grid-column:1;align-self:stretch;height:auto;margin-top:calc(27% - 2.4rem)} .pe-rv-copy{grid-area:rvc;align-self:start;margin:1.2rem 0 5.2rem var(--gut)} .pe-rv-copy{margin-top:-1.6rem;margin-bottom:3.4rem} /* PE-BAND-S（2026-10-16・本人「文字を少し上に・黒帯の高さをもう少し小さく」）: 上 1.2→-1.6rem（写真の下の黒に少し掛ける）・下 5.2→3.4rem。黒帯（rv-start〜rvc-end）は 4.6rem 短くなる */ /* 上の薄い金の面（PC の Rectangle 422）を黒い帯の上辺まで届かせる（今までの 60rem のぼかしでは帯の上が地の黒と同じになり、帯の斜めが見えない） */ #people>.pe-top{position:relative;left:auto;top:auto;width:auto;height:auto;grid-row:1/rv-end;grid-column:1;align-self:stretch;margin-top:-7rem;background:rgba(255,204,147,.53)} /* p31b（2026-10-08）: PC の p31b と同じ。題字の払いを 1s（曲線は sp-rv の現物のまま）・人の塊は同じ曲線・1s で「ふわん」、遅れ --fd は recruit-sp.js */ html.sp-mo #pe-rv.sp-rv{transition-duration:1s} html.sp-mo .pe-ct-photos img.sp-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.sp-mo .pe-ct-photos img.sp-fw.is-in{opacity:1;scale:1;translate:none;filter:none} } /* ===== SEL-A09（2026-10-14・本人「文字をなぞって選択・コピーできるように」・調べ text_select_20261014/review/A/README.md）===== SP の PHILOSOPHY ①②は同じ場所に重なる。見えていない側（opacity 0）が上から受け取って、見えている文字を選べなかった → 見えていない側の文字は受け取らない。見た目・動きは変えない */ @media (max-width:1023px), (max-width:1366px) and (orientation:portrait){ html.sp-mo .ph-pin.is-in .ph-1 :is(.ph-h1,.ph-body1),html.sp-mo .ph-pin:not(.is-in) .ph-2 :is(.ph-h2,.ph-body2){pointer-events:none} } /* ===== 2026-11-09 本人 iPhone FB（採用トップ）===== */ @media (max-width:1023px), (max-width:1366px) and (orientation:portrait){ /* MI-SUB-FADE（本人「ここのがサラッと出ない」＝OUR MISSION の縦書きの小さい文）: 見出しのワイプ（clip-path）の枠が小さい文（見出しの左の外）を切っていて、ワイプが終わった瞬間（is-done）にパッと出ていた → ワイプの枠を左へ広げて小さい文を切らないようにし、小さい文は見出しの後に 1.4 秒でふわっと出す */ html.sp-mo .sp-mi-comp .mi-tate-wrap[data-mi="m"]:not(.mi-pre).sp-rv-d{clip-path:inset(-20% -20% calc(100% - 1px) -400%)} html.sp-mo .sp-mi-comp .mi-tate-wrap[data-mi="m"]:not(.mi-pre).sp-rv-d.is-in{clip-path:inset(-20% -20% -20% -400%)} html.sp-mo .sp-mi-comp .mi-tate-wrap[data-mi="m"]:not(.mi-pre).sp-rv-d.is-done{clip-path:none} html.sp-mo .sp-mi-comp .mi-tate--sub{opacity:0;transition:opacity 1.4s ease .5s} html.sp-mo .sp-mi-comp .mi-tate-wrap.is-in .mi-tate--sub{opacity:1} /* VI-PROSE-LEFT（本人「ここの文字間どうにかできないか」＝OUR VISION の黒い帯の文）: 管理画面の改行を消して両端そろえで流していたので、短く折れた行（「求められる前に、」）の字の間が大きく空いていた → 左そろえ・行末の詰めもしない（sbs-phrase-break.js の NOFIT）。管理画面の改行（今の文はいちばん長い行 16 字）をそのまま出す（字間 0 で 360 まで 1 行に入る。入らない行は文節で折れる）。 2026-10-15 の「改行を使わない」（上の 210 行）は一番長い行が 20 字だった時のもの */ .mi-prose[data-mi="v"]{text-align:left!important;letter-spacing:0} .mi-prose[data-mi="v"] br{display:inline} /* MI-FADE-SMOOTH（本人「なんかぱきってる」＝ABOUT の上の金→クリーム）: ぼかしが約 108px と短く、途中で傾きが折れ、下の ABOUT の頭（#f4f0e8）とも色が少し違った → ぼかしを 20rem に延ばして滑らかに、終わりの色を ABOUT の頭の色にそろえる */ .mi-fade{height:20rem;background:linear-gradient(to bottom,rgba(244,240,232,0) 0%,rgba(244,240,232,.02) 8%,rgba(244,240,232,.08) 18%,rgba(244,240,232,.2) 30%,rgba(244,240,232,.38) 42%,rgba(244,240,232,.58) 54%,rgba(244,240,232,.76) 66%,rgba(244,240,232,.89) 78%,rgba(244,240,232,.96) 88%,rgba(244,240,232,.99) 95%,#f4f0e8 100%)} #mission{background:linear-gradient(to bottom,transparent 10.3rem,var(--gold) 10.3rem,var(--gold) calc(100% - 1px),#f4f0e8 calc(100% - 1px))} /* AB-H-SP（本人「改行とか文字の位置を修正してほしい」＝ABOUT の見出し 4 つ）: 「製品を生む機械を、一台ずつ／設計してつくる。」「機械をつくる。／その先の、困りごとを解決する。」 「設計から、／納入後のメンテナンスまで。」「メガネの機械から、／宇宙のモノづくりへ。」の 2 行に。管理画面の文（PC の改行）は変えず、SP だけ金の下線の中の改行などを出さない。 いちばん長い「その先の、困りごとを解決する。」が 1 行に入るよう 2 → 1.7rem（幅 360 まで確認） */ #about .ab-h{font-size:1.7rem} .ab-h[data-ab="1"] .gold br,.ab-h[data-ab="3"] .gold br,.ab-h[data-ab="4"] .gold br,.ab-h[data-ab="2"]>br:nth-of-type(2){display:none} /* AB-NUM-SP（本人「一つずつふわんふわんと出したい」＝設立・売上高・従業員数…）: 数字の 6 つが画面に入った順に 1 つずつ、下から少し持ち上がりながらふわっと出る（recruit-sp.js が sp-fade と sp-up を付ける） */ html.sp-mo .sp-up{translate:0 1.6rem;transition:opacity .9s ease var(--rd,0s),translate .9s cubic-bezier(.22,.61,.36,1) var(--rd,0s)} html.sp-mo .sp-up.is-in{translate:none} /* PE-TAP（本人「ここクリックしたら金になるけど、それがわからないので、なにか押すよ〜みたいな金の装飾がでるといい」）: 裏（金のコメント）があるカードの表の右上に、金の縁の「TAP」と指の印。 輪が広がる動きで押せることを知らせる。一度押したら消える（recruit-sp.js が .is-tapped）。裏返すと表ごと見えなくなる */ .pe-sp-deck .pe-tap{position:absolute;right:2.2rem;top:2.2rem;z-index:5;display:flex;align-items:center;gap:.9rem;padding:1rem 1.8rem 1rem 1.3rem;border-radius:99rem;background:rgba(14,14,14,.78);border:.2rem solid #caaa6e;color:#e3c58a;font:700 2.3rem/1 "Cormorant Garamond",serif;letter-spacing:.2em;pointer-events:none;animation:pe-tap-ping 1.9s ease-out infinite} .pe-sp-deck .pe-tap svg{width:3rem;height:3rem;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transform-origin:50% 100%;animation:pe-tap-nod 1.9s ease-in-out infinite} .pe-sp-deck.is-tapped .pe-tap{display:none} } @keyframes pe-tap-ping{0%{box-shadow:0 0 0 0 rgba(202,170,110,.65)}70%,100%{box-shadow:0 0 0 1.6rem rgba(202,170,110,0)}} @keyframes pe-tap-nod{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(.6rem) scale(.92)}} @media (prefers-reduced-motion:reduce){.pe-sp-deck .pe-tap,.pe-sp-deck .pe-tap svg{animation:none}} /* ===== 11/10 FB（作業者B：B11・B12・B16 の採用トップ分）===== */ @media (max-width:1023px), (max-width:1366px) and (orientation:portrait){ /* CT-MOTION-SP（2026-11-10・本人「ここ、PCみたいに文字の動きや人の出方の動きしてほしい」）: クロスの印も題字と一緒に払う（PC の .pe-ct-xs.rv-l と同じ）。払いの時間は題字（#pe-rv）と同じ 1s。きっかけは recruit-sp.js の CT-MOTION-SP */ html.sp-mo #people>.pe-ct-xs.sp-rv{transition-duration:1s} /* ENV-BTN-SP（2026-11-10・本人「ボタン図形の下に」）: SP だけ「環境を知る」を菱形 3 つ（.env-dias）の下へ。.env-stage は縦の flex で --o の順（文 3 → ボタン 4 → 菱形 5）なので、ボタンだけ 6 番目に。 上の余白は 文→菱形 2.8rem・菱形→ボタン 2.6rem（どちらも縮めは transform で左上が軸＝margin は見た目のまま）。PC は絶対配置のまま */ .env-stage>.gbtn--pe{order:6;margin-top:2.6rem;align-self:center} /* ENV-BTN-MID（2026-11-11・本人 iPhone「ボタンを配置を中央に」）: 横の真ん中へ（上の菱形 .env-dias と同じ align-self:center。縮めは左上が軸で、縮んだ分は右の margin で打ち消してあるので、margin の箱＝見た目の箱が真ん中に来る） */ .env-stage>.env-dias{margin-top:2.8rem} /* EYEBROW-SP（2026-11-10・本人「ここの項目でかいので、ひらがなよりも小さめでいいです。（他同じようなところは統一で修正）」＝仕事を知るの WORK FIELDS）: 斜線の印＋英字＋日本語の見出しの英字を、 採用サイト全体で 2rem（仕事を知るの WHAT WE DO と同じ）・印の高さ 3rem にそろえる。トップは 1.7rem・印 2rem だった。下層は rc-common.css／rc-work.css の EYEBROW-SP */ .sp-eyebrow,.en-h,.mi-en-h{gap:.4rem;font-size:2rem} :is(.en-h,.mi-en-h)::before{width:1.8rem;height:3rem} /* 印の SVG は 30×50 の箱の真ん中に 19 幅の斜線（左右に余白）→ 箱 1.8×3rem で斜線は 1.14×3rem・すき間は見た目 .7rem（下層と同じ） */ } /* ===== 11/10 FB（親：採用トップ B1〜B10）===== */ @media (max-width:1023px), (max-width:1366px) and (orientation:portrait){ /* FVB-FIT（2026-11-10・本人「文字が切れそう」＝QUIET PASSION の本文）: 本文が 4 行より増えた分（recruit-sp.js の --fvb-x）だけ QUIET PASSION. を上へ＝見出しと本文の間は今のまま */ .fv-b-catch{bottom:calc(31rem + var(--fvb-x, 0px))} /* PH-HANG（2026-11-10・本人「若干中央じゃない？」＝OUR CONCEPT）: 行の終わりの「。」「、」（recruit-sp.js が span.sbs-hang で包む）の右の空きを詰めて、真ん中に見せる */ .sbs-hang{margin-right:-.7em} /* PH-SIZE（2026-11-10・本人「上のタイトルもう少し大きくしたい／説明文 次のセクションに出てくる説明文のサイズ感に合わせてほしい（もう少し大きく）」＝OUR CONCEPT の 1 枚目）: 題 2.65rem・字間 .08em → 2.9rem・.04em（「この機械が止まった日、」が 1 行に入る大きさ。行末の「、」は PH-HANG で詰める）。 説明 1.4 → 1.55rem。2 枚目（私たちが止まれば…）の説明も同じ大きさにそろえる */ .ph-1 .ph-h1{font-size:2.9rem;letter-spacing:.04em} .ph-body1,.ph-body2{font-size:1.55rem} /* MI-HEAD-TIGHT（2026-11-10・本人「もう少し文字の余白つめたい」＝鯖江精機の掲げる／企業理念／説明 の間・矢印は上向き）: 「鯖江精機の掲げる」→「企業理念」の箱の間 46 → 12px、「企業理念」→ 説明 37 → 14px */ .mi-rinen{margin-top:-3.4rem} .mi-lead{margin-top:-4.3rem} /* BAND-PAD-SP（2026-11-10・本人「帯が文字ギリギリなのでもうすこし余白ほしい」＝OUR MISSION・OUR VISION の本文の帯）: OUR VALUE の帯（recruit.css の BAND-PAD）と同じく 行ごとの帯の左に .5em。行の終わりが「。」「、」でない行もあるので右にも .2em（句読点の行は字の中の空きと合わせて約 .7em） */ .mi-prose .mi-band{padding:0 .5em;-webkit-box-decoration-break:clone;box-decoration-break:clone} /* 2026-11-10 2 回目: 右 .2em では「に」などで終わる行の右が約 3px で左（約 7px）より狭かった（別エージェントの点検）→ 左右とも .5em */ .mi-prose{margin-left:-.5em;margin-right:-.5em} /* 余白の分だけ箱を左右へ広げる＝字の位置と 1 行に入る字数は今のまま（VISION の狭い列で折り返しが変わらない） */ /* VC-SHADOW-SP（2026-11-10・本人「グラデが自然じゃないなんかぱきってる」＝3つの約束のカードの下）: カードの影（下へ 3.6rem）が横スクロールの箱の下の余白 2.4rem で まっすぐ切れていた → 箱の下の余白を 4.8rem にして、増やした 2.4rem は外の margin で戻す（次の物の位置は今のまま） */ .mi-cards{padding-bottom:4.8rem;margin-bottom:-2.4rem} /* AB-BLOCK-SP（2026-11-10・本人「ここのセクション来たら結構大胆に塊ごとにでてきてほしい（ふわんって）」）: 行ごとの写真＋文の塊（recruit-sp.js が .sp-blk）を 下から 6rem・.94 倍・少しぼけた所から、1.4s でゆっくり大きく出す。写真が先・文は .15s 後（--rd） */ html.sp-mo .sp-blk{opacity:0;translate:0 6rem;scale:.94;filter:blur(.4rem); transition:opacity 1.1s ease var(--rd,0s),translate 1.4s cubic-bezier(.16,1,.3,1) var(--rd,0s),scale 1.4s cubic-bezier(.16,1,.3,1) var(--rd,0s),filter 1.1s ease var(--rd,0s)} html.sp-mo .sp-blk.is-in{opacity:1;translate:none;scale:none;filter:none} } /* FVB-LVH（2026-11-10・本人「下の固定メニューがきえると変な余白がでてしまうのなんとかしたいです」＝Safari の下のバーが縮んだ時の QUIET PASSION の下の暗い帯）: ステージはバーが出ている時の高さ（svh）で組んでいるので、バーが縮んで画面が伸びると、文の下に暗いグラデだけの帯（約 40pt）が増えて見えた。 B の文（QUIET PASSION.・本文・小さな火）を、伸びた分（lvh − svh・上限 4.4rem）だけ下げる＝バーが縮んだ時も、今のバーが出ている時と同じ余白に見える。 バーが出ている時は文が下の固定の帯に少し近づく（いちばん下の行と帯の間 約 8.4rem → 4〜5rem）。lvh は動かない値なので、バーの出入りで文は動かない */ @media (max-width:1023px) and (min-height:500px), (max-width:1366px) and (orientation:portrait) and (min-height:500px){ @supports (height:100lvh){ html.sp-mo{--fvb-dy:min(calc(max(var(--st), calc(100lvh - 7.2rem - var(--safe))) - var(--st)), 4.4rem)} html.sp-mo .fv-b-catch{top:calc(var(--st) - 43.4rem - var(--fvb-x, 0px) + var(--fvb-dy));bottom:auto} html.sp-mo .fv-b-body{bottom:calc(13.6rem - var(--fvb-dy))} html.sp-mo .fv-b-small{bottom:calc(8.4rem - var(--fvb-dy))} } }