@charset "utf-8";
/* =========================================================
   MOK株式会社 — 採用サイト
   Design: Black × Volt / Security uniform (v4)
   制服の3色（墨黒・蛍光イエローグリーン・反射シルバー）に準拠。
   蛍光(--volt)は黒地の上でのみ使う。白地には置かない。
   ========================================================= */


:root{
  --navy:#0E0F11;   /* 制服の墨黒（基調・旧navyのキー名は踏襲） */
  --navy-d:#08090B; /* 最深部・フッター */
  --navy-l:#24262B; /* 黒ボタンのhover（グラファイト） */
  --volt:#C7F02E;   /* 蛍光イエローグリーン（黒地専用アクセント・面積5%目安） */
  --volt-d:#B4DE1E; /* 蛍光hover */
  --paper:#FAFAF9;  /* 本体地（わずかに温かいオフホワイト） */
  --paper-2:#EDEDEA;/* バンド地 */
  --ink-t:#14161A;  /* 本文の黒（中立） */
  --fog-2:#5F6368;  /* 白地の補助テキスト（中立グレー） */
  --steel:#3A3D42;  /* 白地のラベル・アイブロウ（グラファイト） */
  /* 装飾番号。#A8ACB2 は白地(#FAFAF9)に対して 2.18:1・バンド地(#EDEDEA)に対して 1.94:1 しかなく、
     WCAG の大文字基準 3:1 にも届いていなかった（番号は順序を示す情報なので装飾扱いにはできない）。
     両方の地で 3:1 を超える #83888F へ。 */
  --steel-2:#83888F;/* 装飾番号（中立シルバー） */
  --line-l:rgba(20,22,26,.14);
  --text-d:#EDEDEA;
  --fog:#AFB3B8;    /* 黒地の補助テキスト */
  --pale:#C3C9CF;   /* 黒地のアクセント＝反射シルバー */
  --line-d:rgba(237,237,234,.16);
  --gut:clamp(20px,5vw,64px);
  /* 和文は明朝で全ページ統一（2026-08-12 先方指示）。Oswald/Cormorant は欧文専用で、
     その内側の和文が既定フォントに落ちないよう必ず var(--jp) をフォールバックに置く。 */
  --jp:"Hiragino Mincho ProN","Yu Mincho","YuMincho",serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--jp);
  background:var(--paper);color:var(--ink-t);line-height:1.9;
  -webkit-font-smoothing:antialiased;letter-spacing:0;font-feature-settings:"palt" 1;
  line-break:strict;overflow-wrap:anywhere;
}
/* 横あふれの保険。overflow-x:hidden は「もう片軸が auto に昇格 → body がスクロールコンテナ化 →
   position:sticky が全滅」する副作用があるため使わない。clip はスクロールコンテナを作らない。 */
html,body{overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit}
/* ---------- 写真の縁を地へ溶かす ----------
   トップのヒーローで採った処理を、白地・バンド地の上に置く写真すべてに広げる。
   角丸は併用しない（丸い輪郭を描いてから消すことになり、意図が二重になる）。

   ただし全部には掛けない。溶かしてよいのは「地が無地」かつ「縁に主題が無い」写真だけ。
   - 採用ブロックの写真3枚（.rct-photos）は地が写真（.rct-bg）。写真の上で縁を溶かすと
     2枚が滲んで濁るだけなので掛けない。角丸のまま残す。
   - 会社概要の標章（hyosho.png）は書類。ぼかすと証明書を加工したように見えるため掛けない。
   - 会社概要のヒーロー（.phero-fig--logo）は写真ではなくロゴなので対象外。 */
.softedge{
  -webkit-mask-image:
    linear-gradient(90deg,transparent 0,#000 var(--se,8%),#000 calc(100% - var(--se,8%)),transparent 100%),
    linear-gradient(180deg,transparent 0,#000 var(--se,8%),#000 calc(100% - var(--se,8%)),transparent 100%);
  mask-image:
    linear-gradient(90deg,transparent 0,#000 var(--se,8%),#000 calc(100% - var(--se,8%)),transparent 100%),
    linear-gradient(180deg,transparent 0,#000 var(--se,8%),#000 calc(100% - var(--se,8%)),transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect;
  border-radius:0}
/* 下層ページのヒーロー写真・業務内容のカード・採用ページの仕事内容。いずれも周囲が無地。
   溶ける幅は % ではなく px。% にすると大きい写真ほど強く溶けて、同じ処理に見えなくなる。
   ヒーロー（.hero--panel）だけは白地へ大きく流し込む役目があるので別途 % で長く取る。 */
.phero-fig:not(.phero-fig--logo),.svc .photo,.media .photo,.biz-photo{--se:30px}
.phero-fig:not(.phero-fig--logo),.svc .photo,.media .photo{
  -webkit-mask-image:
    linear-gradient(90deg,transparent 0,#000 var(--se,8%),#000 calc(100% - var(--se,8%)),transparent 100%),
    linear-gradient(180deg,transparent 0,#000 var(--se,8%),#000 calc(100% - var(--se,8%)),transparent 100%);
  mask-image:
    linear-gradient(90deg,transparent 0,#000 var(--se,8%),#000 calc(100% - var(--se,8%)),transparent 100%),
    linear-gradient(180deg,transparent 0,#000 var(--se,8%),#000 calc(100% - var(--se,8%)),transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect;
  border-radius:0}
/* トップの事業内容だけは左辺が画面外へ抜ける。そこを溶かすと画面の縁に理由のない
   フェードが出るので、見えている上・右・下の3辺だけを溶かす。 */
.biz-photo{
  -webkit-mask-image:
    linear-gradient(90deg,#000 0,#000 calc(100% - var(--se,8%)),transparent 100%),
    linear-gradient(180deg,transparent 0,#000 var(--se,8%),#000 calc(100% - var(--se,8%)),transparent 100%);
  mask-image:
    linear-gradient(90deg,#000 0,#000 calc(100% - var(--se,8%)),transparent 100%),
    linear-gradient(180deg,transparent 0,#000 var(--se,8%),#000 calc(100% - var(--se,8%)),transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
/* キーボード操作時のフォーカス。個別指定はタブ・フォーム入力にしか無く、リンク・ボタン・
   ハンバーガーはブラウザ既定に頼っていた。既定の細い輪郭は黒地・蛍光ボタン上で見えにくいので、
   地の色を問わず輪郭が立つよう二重（本体＋外側の白/黒の縁）にする。マウス操作では出ない。 */
/* :where() は詳細度0なので、クラス付きのルールに簡単に負ける。フォーカス指標は
   消えると困るため、通常の詳細度で書く。 */
a:focus-visible,button:focus-visible,summary:focus-visible,
[role="tab"]:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--volt);outline-offset:2px;
  box-shadow:0 0 0 4px rgba(20,22,26,.55)}
/* 黒地の面では外側の縁を白にして、蛍光の輪郭を地から浮かせる */
.entry a:focus-visible,.entry button:focus-visible,
.message a:focus-visible,.message button:focus-visible,
footer a:focus-visible,footer button:focus-visible,
.menu a:focus-visible,.menu button:focus-visible{
  box-shadow:0 0 0 4px rgba(250,250,249,.65)}
.wrap{max-width:1180px;margin:0 auto;padding:0 var(--gut)}
.osw{font-family:'Oswald',var(--jp)}
.corm{font-family:'Cormorant',var(--jp)}
.mincho{font-family:var(--jp);font-feature-settings:"palt" 1}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* 日本語の意味単位を分断させない。文節ごとに .nb で包むと、折り返しは境界だけで起きる。 */
.nb{display:inline-block}
/* 電話番号はハイフンの後ろが折り返し候補になり「058-268-／4889」と割れる。番号は必ず1行で。 */
a[href^="tel:"],.phone b,.phone-lg b{white-space:nowrap}
/* 本文・見出しの折り返しを文節単位にする（対応ブラウザのみ。非対応環境は従来どおりの折り返し）。
   「私たちの仕事は目立ちません。けれ／どその…」のように語中で割れるのを防ぐ。
   セレクタを列挙していたが、列挙漏れの箇所（理由の3カラム・表の td・チェックリスト等）で
   「現場での／打ち合わせで」のような文節途中の改行が残っていたため body に効かせて全体に通す。
   文節が1行に収まらない場合はブラウザが従来の折り返しに落とすので、狭い枠でもあふれない。 */
body{word-break:auto-phrase}
/* ただし文節単位の折り返しは「版面が広いこと」が前提。モバイルの 208〜274px の列では
   1行に入る文節が少なく、行末に大きな余白が残る（実測: 行の埋まり 平均91%→81%、
   下位25%は 89%→77%、同じ段落が5行ぶん長くなる）。狭い幅では通常の折り返しに戻し、
   語中で割れると困る短い見出し・リードにだけ文節折り返しを残す。 */
@media(max-width:860px){
  body{word-break:normal}
  h1,h2,h3,.vsec-b > .t,.biz-t,.rct-lead,.phero .lead,.phero .psub,.entry .jp,
  .ssaside .t,.msg-body .pullquote,.points .pt h3{word-break:auto-phrase}
}

/* ---------- atoms ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:14px;font-family:'Oswald',var(--jp);
  font-weight:500;font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--steel)}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--steel);opacity:.7}
.klabel{display:block;font-size:13.5px;font-weight:700;letter-spacing:.16em;color:var(--steel)}
.idx{font-family:'Cormorant',var(--jp);font-style:italic;font-weight:500;color:var(--steel-2);font-size:34px;line-height:1}

.btn{display:inline-flex;align-items:center;gap:12px;background:var(--navy);color:#fff;
  padding:17px 32px;font-family:'Oswald',var(--jp);font-weight:500;font-size:13px;letter-spacing:.18em;
  text-transform:uppercase;text-decoration:none;transition:.25s;border:1px solid var(--navy)}
.btn:hover{background:var(--navy-l);border-color:var(--navy-l)}
/* セクション末尾の主導線は、モバイルでは幅を揃えて全幅に。同じ役割のボタンが
   155px / 335px / 194px と3種類の幅で出てくると、縦に読んだときに不揃いに見える。
   横に2つ並ぶ枠（フォームの戻る/次へ）と、本文中に置く小さな導線は対象外。 */
@media(max-width:640px){
  .biz-cta .btn,.entry .cta > .btn,.vsec-b > .cta .btn,.midcta .btn{
    width:100%;justify-content:center}
  .fstep-nav .btn{width:auto}
}
.btn svg{width:16px;height:16px;stroke-width:1.6;transition:transform .25s ease}
.btn:hover svg{transform:translateX(4px)}
.btn.on-navy{background:var(--volt);color:var(--navy);border-color:var(--volt)}
.btn.on-navy:hover{background:var(--volt-d);color:var(--navy);border-color:var(--volt-d)}
.btn.ghost{background:transparent;color:var(--navy);border-color:var(--line-l)}
.btn.ghost:hover{background:var(--navy);color:#fff;border-color:var(--navy)}

.phone{display:flex;flex-direction:row;align-items:center;gap:13px;line-height:1.25;text-decoration:none;color:inherit}
.phone small{font-size:12.5px;letter-spacing:.14em;color:var(--fog-2);font-weight:700}
.phone b{font-family:'Oswald',var(--jp);font-weight:500;font-size:25px;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.phone-ic svg{width:22px;height:22px;stroke-width:1.5}
.phone-tx{display:flex;flex-direction:column;line-height:1.25}
.on-navy-block .phone{color:#fff}
.on-navy-block .phone small{color:var(--fog)}

/* duotone photo grade */
/* 写真の角丸は採用ブロック（10px）に統一する */
.duo{position:relative;overflow:hidden;background:var(--paper-2);border-radius:10px}
.duo img{width:100%;height:100%;object-fit:cover;filter:contrast(1.03) saturate(1.06) brightness(1.02)}
.duo::before{content:none}

/* ---------- brand logo ---------- */
.brand{display:flex;align-items:center;text-decoration:none;color:inherit}
.brand .lg{height:30px;width:auto;display:block}
footer .brand .lg{height:30px}

/* ---------- preloader (CSS-only, auto-hides without JS) ---------- */
.preload{position:fixed;inset:0;z-index:200;background:var(--navy);display:flex;align-items:center;justify-content:center;
  animation:preOut .8s cubic-bezier(.7,0,.25,1) 1.6s forwards}
.preload .mk{width:88px;height:auto;color:#fff;opacity:0;transform:scale(.84) translateY(6px);
  animation:preMark 1s cubic-bezier(.2,.85,.2,1) .16s forwards}
@keyframes preMark{to{opacity:1;transform:none}}
@keyframes preOut{to{opacity:0;visibility:hidden;transform:translateY(-14px)}}
/* subsequent visits within the session: skip the curtain */
.preload.skip{animation:preSkip .2s ease forwards;animation-delay:0s}
@keyframes preSkip{to{opacity:0;visibility:hidden}}

/* ---------- scroll progress bar + section dots ---------- */
#sprog{position:fixed;top:0;left:0;height:2px;width:0;background:var(--volt);z-index:70;pointer-events:none;transition:width .05s linear}
/* 右端は常設の縦タブ（.floatcta）が占めるため、セクションドットは左端に置く */
#sdots{position:fixed;left:20px;top:50%;transform:translateY(-50%);z-index:55;display:none;flex-direction:column;gap:14px;pointer-events:none}
#sdots button{pointer-events:auto;display:flex;flex-direction:row-reverse;align-items:center;gap:10px;background:none;border:0;padding:6px 0;cursor:pointer;color:currentColor}
#sdots .d{width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.35;transition:opacity .3s,transform .3s,background .3s;flex:0 0 auto}
#sdots button.on .d{opacity:1;background:var(--volt);transform:scale(1.35)}
#sdots .lb{font-family:'Oswald',var(--jp);font-size:11px;letter-spacing:.18em;text-transform:uppercase;opacity:0;transform:translateX(-6px);transition:opacity .25s,transform .25s;white-space:nowrap}
#sdots button:hover .lb,#sdots button:focus-visible .lb{opacity:1;transform:none}
body.on-dark #sdots{color:#fff}
body:not(.on-dark) #sdots{color:var(--ink-t)}
@media(min-width:1100px){#sdots{display:flex}}

/* ---------- header (fixed on all pages; solid=starts navy, else transparent over hero) ---------- */
/* 白帯固定＋縦書きメニュー。ヒーロー上部の余白と地続きにするため、全ページで白地・墨黒文字に統一する
   （旧・透過ヘッダー／.solid の黒帯は廃止。.solid クラスは JS 側の互換のため残すが見た目は同じ）。 */
header{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:flex-start;justify-content:space-between;
  padding:26px var(--gut) 22px;transition:background .35s,padding .35s,border-color .35s,transform .3s cubic-bezier(.4,0,.2,1);
  border-bottom:1px solid transparent;color:var(--ink-t);background:transparent}
/* 下へ読み進めている間だけ退避（main.js が .hide を付け外しする）。860px 超では付かない。 */
header.hide{transform:translateY(-100%)}
@media(prefers-reduced-motion:reduce){header{transition:background .35s,padding .35s,border-color .35s}}
/* トップは地色が白なので最上部では透過にする（不透明な帯だと縦組み見出しの頭が帯の裏に隠れる）。
   下層ページは直下が黒の phero なので .solid で白帯を敷く。 */
header.scrolled{background:rgba(250,250,249,.94);backdrop-filter:blur(10px);border-bottom-color:var(--line-l);padding:14px var(--gut)}
header.solid{background:var(--paper);color:var(--ink-t)}
header.solid.scrolled{background:rgba(250,250,249,.94)}
header .brand{display:block;padding-top:2px}
/* 参照サイトと画面幅2000pxで並べたところ、ロゴ高85px/ナビ字17.5px に対して当方は 30px/13px。
   ロゴで2.8倍、ナビで1.35倍の差があり、ヘッダー全体が小さく見えていた。画面幅に連動させて上げる。
   （参照のロゴは丸マーク＋10文字の縦積みで高さが出る組み方。当方は横長のワードマークなので、
   同じ85pxまで上げると幅が410pxになり主張しすぎる。文字の大きさが釣り合う範囲に留める。） */
header .brand .lg{height:clamp(30px,3.6vw,56px)}
header nav{display:flex;align-items:flex-start;gap:clamp(16px,2.7vw,42px)}
header nav a{writing-mode:vertical-rl;color:inherit;text-decoration:none;
  font-size:clamp(14px,1.18vw,17.5px);letter-spacing:.14em;font-weight:600;padding-top:18px;
  position:relative;opacity:.86;transition:opacity .2s}
header nav a:hover{opacity:1}
/* 現在地・hover は項目の上に短い縦線（参照した縦組みヘッダーの流儀） */
header nav a::before{content:"";position:absolute;top:0;left:50%;width:1px;height:0;
  background:var(--ink-t);transition:height .3s cubic-bezier(.2,.8,.2,1)}
header nav a:hover::before{height:11px}
header nav a[aria-current="page"]::before{height:11px}
header nav a[aria-current="page"]{opacity:1}
/* スクロール後は帯が締まるぶん一段小さく。比率は通常時と同じ（約96%）を保つ。 */
header.scrolled nav a{padding-top:12px;font-size:clamp(13.5px,1.13vw,16.8px)}
header.scrolled .brand .lg{height:clamp(28px,3.2vw,50px)}
/* hamburger (mobile) */
/* 44×44px（Apple HIG のタップ領域）。線の位置は中央から算出するので、
   ボタンを大きくしても見た目のバーガー幅・線間は変わらない。 */
.hbg{display:none;position:relative;width:44px;height:44px;background:none;border:0;cursor:pointer;color:inherit;padding:0;z-index:110}
.hbg span{position:absolute;left:10px;right:10px;height:1.5px;background:currentColor;transition:transform .35s cubic-bezier(.4,0,.2,1),top .3s .05s,opacity .2s}
.hbg span:nth-child(1){top:16px}
.hbg span:nth-child(2){top:21.5px}
.hbg span:nth-child(3){top:27px}
.hbg[aria-expanded="true"] span:nth-child(1){top:21.5px;transform:rotate(45deg)}
.hbg[aria-expanded="true"] span:nth-child(2){opacity:0}
.hbg[aria-expanded="true"] span:nth-child(3){top:21.5px;transform:rotate(-45deg)}
@media(max-width:860px){
  header nav{display:none}
  header{padding:14px var(--gut);align-items:center}
  .hbg{display:block}
  header.solid .hbg,header.scrolled .hbg{color:inherit}
}
/* fullscreen mobile overlay menu */
.menu{position:fixed;inset:0;z-index:100;background:var(--navy);color:#fff;
  display:flex;flex-direction:column;padding:80px var(--gut) 40px;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .35s ease,transform .35s cubic-bezier(.2,.8,.2,1),visibility .35s;overflow-y:auto}
.menu.open{opacity:1;visibility:visible;transform:none}
.menu::before{content:"";position:absolute;left:var(--gut);top:70px;width:34px;height:2px;background:var(--volt);transform:scaleX(0);transform-origin:left;transition:transform .5s .2s cubic-bezier(.4,0,.2,1)}
.menu.open::before{transform:scaleX(1)}
.menu-mark{position:absolute;right:calc(var(--gut) - 20px);bottom:-20px;color:rgba(255,255,255,.05);width:min(64vw,520px);pointer-events:none}
.menu nav{display:flex;flex-direction:column;gap:0;margin-top:28px}
.menu nav a{color:#fff;text-decoration:none;font-family:'Oswald',var(--jp);font-weight:400;
  font-size:clamp(30px,7vw,44px);letter-spacing:.03em;padding:20px 0;
  border-bottom:1px solid rgba(255,255,255,.12);
  display:flex;align-items:baseline;gap:16px;
  opacity:0;transform:translateY(12px);transition:opacity .5s,transform .5s;transition-delay:calc(.15s + var(--i,0) * .06s)}
.menu.open nav a{opacity:1;transform:none}
.menu nav a .n{font-family:'Cormorant',var(--jp);font-style:italic;font-size:.4em;color:var(--volt);font-weight:500}
.menu nav a .ja{font-family:var(--jp);font-size:.34em;color:var(--fog);letter-spacing:.1em;font-weight:500;margin-left:auto}
.menu-foot{margin-top:auto;padding-top:40px;color:var(--fog);font-size:13.5px;line-height:1.9}
.menu-foot .phone-lg{display:flex;align-items:center;gap:14px;color:#fff;text-decoration:none;margin-bottom:16px}
.menu-foot .phone-lg svg{width:22px;height:22px;stroke-width:1.5;color:var(--volt)}
.menu-foot .phone-lg b{font-family:'Oswald',var(--jp);font-weight:500;font-size:24px;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.menu-foot .phone-lg small{display:block;font-size:12.5px;color:var(--pale);letter-spacing:.14em}

/* ---------- hero (top) ----------
   構図：ページ地（白）の上部余白 → その下から写真バンドが始まる。縦組みの大見出しは
   余白の側から始まり写真の上端をまたいで下る。写真は白のウォッシュで沈めて墨黒文字を読ませる。 */
.hero{position:relative;min-height:min(94svh,900px);display:flex;align-items:flex-start;
  overflow:hidden;background:var(--paper);--photo-top:clamp(136px,19vh,200px)}
.hero .bg{position:absolute;top:var(--photo-top);left:0;right:0;bottom:0;overflow:hidden}
/* 視差のための内枠。上下に余裕を持たせ、その範囲内で写真をずらす（地色が覗かない）。 */
.hero .bg-in{position:absolute;left:0;right:0;top:-16%;bottom:-16%;will-change:transform}
/* のっぺり対策：明るさブーストをやめてコントラストを上げる（空に階調が戻る）。
   ゆっくりした寄りを最後まで残し、静止画に見えないようにする。 */
.hero .bg img{width:100%;height:100%;object-fit:cover;object-position:72% 44%;
  filter:contrast(1.11) saturate(1.09);
  transform:scale(1.12);animation:kb 26s cubic-bezier(.2,.6,.2,1) forwards}
@keyframes kb{to{transform:scale(1.02)}}
.hero .bg::before{content:none}
/* 白のウォッシュ。左に強く効かせるのは変わらないが、写真の情報が消えない濃度まで下げ、
   代わりに (1)下端の締め (2)ごく薄い周辺減光 を重ねて奥行きを作る。 */
.hero .veil{position:absolute;top:var(--photo-top);left:0;right:0;bottom:0;background:
  linear-gradient(90deg,rgba(250,250,249,.62) 0%,rgba(250,250,249,.38) 24%,rgba(250,250,249,.14) 44%,rgba(250,250,249,.02) 62%,rgba(250,250,249,0) 100%),
  linear-gradient(0deg,rgba(14,15,17,.16) 0%,rgba(14,15,17,.04) 14%,rgba(14,15,17,0) 34%)}
.hero .bg::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 92% at 50% 40%,rgba(14,15,17,0) 52%,rgba(14,15,17,.10) 100%)}
@media(max-width:860px){
  .hero{--photo-top:clamp(88px,13vh,124px)}
  .hero .veil{background:
    linear-gradient(90deg,rgba(250,250,249,.84) 0%,rgba(250,250,249,.58) 30%,rgba(250,250,249,.22) 58%,rgba(250,250,249,.04) 100%),
    linear-gradient(0deg,rgba(14,15,17,.18) 0%,rgba(14,15,17,.04) 16%,rgba(14,15,17,0) 36%)}
}
.hero .inner{position:relative;z-index:2;padding-top:clamp(76px,11vh,122px);max-width:1180px;color:var(--ink-t);width:100%}
/* 縦組みブロック：row-reverse で「見出し＝右列 → リード＝その左」（縦書きの読み順）*/
.hero .vt{display:flex;flex-direction:row-reverse;justify-content:flex-end;align-items:flex-start;
  gap:clamp(16px,2.4vw,38px);padding-left:clamp(0px,8vw,120px)}
/* 参照サイトは1字あたり約105px相当。字を大きく・行間（＝列の間隔）と字間を詰めて
   2列を1つの塊として立たせることでインパクトを出す。
   縦組みは字数がそのまま高さになるため、画面高が低い環境（1280x640 等）で列が画面から
   はみ出す。9.5svh の上限を併せて掛け、横幅と画面高の両方に収まる大きさを選ぶ。 */
/* 写真の濃い部分に文字がかかっても読めるよう、白のハローを薄く敷く。
   ウォッシュを濃くして写真全体を飛ばすより、写真の情報を残せる。 */
.hero .vt-h{writing-mode:vertical-rl;color:var(--navy);
  font-family:var(--jp);font-weight:600;
  text-shadow:0 0 22px rgba(250,250,249,.75),0 0 6px rgba(250,250,249,.6);
  font-feature-settings:"palt" 1;
  font-size:min(clamp(34px,5.6vw,76px),9.5svh);line-height:1.34;letter-spacing:.02em}
.hero .vt-h .ln{display:block;overflow:hidden}
.hero .vt-h .ln i{display:block;font-style:normal;animation:lineUp 1.05s cubic-bezier(.19,1,.22,1) var(--d,0s) both}
@keyframes lineUp{from{transform:translateY(116%)}to{transform:none}}
/* 見出しが明朝なので、隣に置くリードもゴシックのままだと組みがちぐはぐになる。
   小さい文字なので明朝でも潰れないよう、字間を広めに取って線を拾わせる。 */
/* 参照サイトのサブ見出しは大見出しの約24%（当方は18%で小さすぎた）。
   字を大きくした分、字間は詰めないと間延びする。 */
.hero .vt-lead{writing-mode:vertical-rl;color:var(--fog-2);
  font-family:var(--jp);font-weight:400;
  text-shadow:0 0 16px rgba(250,250,249,.8);
  font-size:min(clamp(14px,1.32vw,18px),2.3svh);line-height:2.1;letter-spacing:.11em;padding-top:1.2em}
.hero .vt-lead span{display:block}
.hero .fade{animation:fadeUp .9s cubic-bezier(.2,.8,.2,1) var(--d,0s) both}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
/* 左端を縦に降りる細いライン（縦組みの起点を示す装飾）。
   白地の上なので蛍光は使わない（§avoid：白地×蛍光はコントラスト不合格）。 */
.hero .vline{position:absolute;left:var(--gut);top:clamp(96px,13vh,140px);z-index:2;width:1px;
  height:clamp(130px,24vh,220px);background:linear-gradient(180deg,rgba(20,22,26,.5) 0%,rgba(20,22,26,0) 100%);
  transform-origin:top;animation:vlineIn .9s cubic-bezier(.4,0,.2,1) .35s both}
@keyframes vlineIn{from{transform:scaleY(0)}to{transform:none}}
/* 右下の円形バッジ（採用への主導線）。明るいヒーローの中で唯一の黒面＝蛍光を置ける場所。 */
/* 径は中身に対して余裕を持たせる。148px のとき中身（採用募集中!）は79px で左右35px、
   84px（モバイル）では中身70px に対して左右7px しか残らず文字が縁に迫っていた。 */
.hbadge{position:absolute;z-index:3;right:var(--gut);bottom:clamp(58px,9vh,104px);
  width:clamp(124px,13vw,172px);aspect-ratio:1;border-radius:50%;text-decoration:none;color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  border:1px solid var(--navy);background:var(--navy);box-shadow:0 14px 34px rgba(14,15,17,.22);
  transition:background .28s,border-color .28s,color .28s,transform .28s}
.hbadge .en{font-family:'Oswald',var(--jp);font-weight:500;font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--volt);transition:color .28s}
.hbadge .ja{font-size:clamp(13.5px,1.2vw,15px);font-weight:700;letter-spacing:.06em}
.hbadge svg{width:15px;height:15px;stroke-width:1.8;margin-top:2px;transition:transform .28s}
.hbadge:hover{background:var(--volt);border-color:var(--volt);color:var(--navy);transform:translateY(-3px)}
.hbadge:hover .en{color:var(--navy)}
.hbadge:hover svg{transform:translateX(3px)}
/* 左下の採用直通（ヒーロー内の唯一のテキスト導線） */
.hphone{position:absolute;z-index:3;left:var(--gut);bottom:clamp(58px,9vh,104px);
  display:inline-flex;align-items:center;gap:12px;color:var(--navy);text-decoration:none;transition:opacity .25s}
.hphone:hover{opacity:.66}
.hphone svg{width:19px;height:19px;stroke-width:1.5;color:var(--navy)}
.hphone small{display:block;font-size:12.5px;letter-spacing:.16em;color:var(--fog-2);font-weight:700}
.hphone b{font-family:'Oswald',var(--jp);font-weight:400;font-size:20px;letter-spacing:.04em;font-variant-numeric:tabular-nums}
/* 旧・斜めスプリット時の横ずらし（--tx）は全面写真では左端に地色が露出するため使わない。
   構図は object-position だけで決める。 */
@media(max-width:860px){
  /* 縦長ビューポートでは横方向のトリミングが強く効く。72% だと人物の胸元が画面中央に来て
     縦組みの見出しと重なるため、58% まで戻して人物を右・テキスト面を左に確保する。 */
  .hero .bg img{object-position:58% 36%}
  .hero .vt{padding-left:0;gap:14px}
  /* 縦組みの見出しは「字数 × 文字送り」がそのまま高さになるので、画面が低いほど下へ伸びて
     左下の RECRUIT バッジ・SCROLL と衝突する（§7-3）。11svh では 375×667 で見出しが
     566px まで届き、最後の「。」がバッジに隠れ、SCROLL との間隔も 16px（規定は24px以上）
     しか残らなかった。svh の上限を締めて、低い画面ほど見出しが自動で縮むようにする。 */
  .hero .vt-h{font-size:min(clamp(42px,16vw,64px),6.9svh);line-height:1.26;letter-spacing:.02em}
  .hero .vt-lead{font-size:min(15.5px,2.4svh);line-height:2;letter-spacing:.09em}
  .hphone{display:none}
  .hbadge{bottom:96px;width:104px}
}
/* =========================================================
   ヒーローのバリアント
   A) .hero--cut  … 人物を切り抜いて重ね、背景は無地（淡い空色のグラデーション）
   B) .hero--edge … 写真は1枚のまま、長方形の輪郭を溶かして消す
   index.html の <section class="hero ..."> のクラスを差し替えて切替える。
   ========================================================= */

/* --- A) 切り抜き＋無地の背景 --- */
.hero--cut .bg img{display:none}
/* 人物の背後にやわらかい光を置く。図と地に共通の光源ができ、貼り付けた感が減る。 */
.hero--cut .bg{background:
  radial-gradient(52% 56% at 74% 60%,rgba(255,255,255,.72) 0%,rgba(255,255,255,.28) 44%,rgba(255,255,255,0) 74%),
  radial-gradient(128% 86% at 76% 12%,rgba(186,213,237,.9) 0%,rgba(221,234,246,.55) 44%,rgba(250,250,249,0) 74%),
  linear-gradient(180deg,#E4EEF7 0%,#F1F5F6 52%,var(--paper) 100%)}
.hero--cut .veil{background:none}
/* シンボルの透かし（下層ページと同じ語彙）で地に質感を入れる */
.hero--cut .hero-mk{position:absolute;z-index:1;top:56%;left:calc(50% - 58vw);transform:translateY(-50%);
  width:min(56vw,660px);height:auto;color:rgba(20,22,26,.05);pointer-events:none}
/* 切り抜いた人物。見出し(z-index:2)より前に置き、見出しが人物の後ろを通る。 */
/* 人物は画面右端ではなく中央寄り＝縦組み見出しのすぐ右隣に立たせる（参照サイトの構図）。 */
/* 画面右端を基準にすると、広い画面ほど見出しから離れてしまう。縦組み見出しは中央寄せの
   コンテナで位置が決まるので、人物も画面中央を基準に置いて間隔を一定に保つ。 */
.hero-fg{position:absolute;z-index:3;left:50%;margin-left:-88px;bottom:0;
  width:min(46vw,640px);pointer-events:none;
  animation:fgIn 1.3s cubic-bezier(.19,1,.22,1) .25s both}
/* 影は全方向に付けない（四方に均一な影は「シール」の見え方になる）。
   写真の光が左前から来ているので、落ちる影は右下だけに寄せて弱く。
   下端は直線で断ち切らずに溶かす＝腰のあたりで水平に切れる「貼り付け」の合図を消す。 */
.hero-fg img{display:block;width:100%;height:auto;
  filter:drop-shadow(10px 16px 18px rgba(14,15,17,.10));
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 86%,rgba(0,0,0,.72) 95%,rgba(0,0,0,.25) 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 86%,rgba(0,0,0,.72) 95%,rgba(0,0,0,.25) 100%)}
@keyframes fgIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.hero--cut .hbadge,.hero--cut .hphone,.hero--cut .scrollcue{z-index:4}
@media(max-width:860px){
  .hero--cut .hero-mk{display:none}
  /* 切り抜きは輪郭が主役なので、画面外へはみ出させて縁で断ち切らない（-4vw だと肩に
     垂直の切り口ができ、切り抜きではなく「写真を貼って切った」ように見える）。 */
  .hero-fg{width:min(78vw,430px);left:auto;right:0;margin-left:0}
  /* バッジは人物の誘導灯と高さが重なっていた。小さくして下げ、灯の下で完結させる。
     低い画面では見出しの下端がここまで降りてくるので、さらに下げて逃がす（§7-3）。 */
  .hero--cut .hbadge{bottom:64px;width:84px;left:var(--gut);right:auto}
}

/* --- D) 切り抜きは残し、地を「同じ写真の空」にする（案2） ---
   案1が合成そのものをやめる案なのに対し、こちらは合成を残したまま原因(a)素材の不一致と
   (b)色の不一致だけを潰す。地に敷くのは CSS のグラデーションではなく、この写真の左上
   （人物・誘導灯・雲・路面が一切入らない領域。実測 最小(125,187,230) 最大(190,216,243)）を
   切り出して引き伸ばしたもの。同一露光なので色温度・階調が完全に一致し、ぼかしで飛んだ粒子は
   生成時に戻してある＝人物（写真）と地（写真）で粒子の質が揃う。
   ※不採用（案1を採用）。素材 hero1-sky-*.webp と切り抜き hero1-person-*.webp は
   .src/unused/ に退避済みなので、この方式に戻すときは assets/img/ へ戻すこと。 */
.hero--sky .bg img{display:none}
.hero--sky .bg{background:
  /* 下端だけページの地へ送る。ここを長く取ると人物が溶けて「シールが消える」見え方に戻る。 */
  linear-gradient(180deg,rgba(250,250,249,0) 84%,rgba(250,250,249,.75) 95%,var(--paper) 100%),
  image-set(url(assets/img/hero1-sky-1600.webp) 1x) center/cover no-repeat,
  #BBD4EE}
.hero--sky .veil{background:none}
.hero--sky .hero-mk{position:absolute;z-index:1;top:56%;left:calc(50% - 58vw);transform:translateY(-50%);
  width:min(56vw,660px);height:auto;color:rgba(20,22,26,.05);pointer-events:none}
.hero--sky .hero-fg{position:absolute;z-index:3;left:50%;margin-left:-88px;bottom:0;
  width:min(46vw,640px);pointer-events:none;
  animation:fgIn 1.3s cubic-bezier(.19,1,.22,1) .25s both}
/* 影は付けない。元写真でも背景（遠くの空）に彼の影は落ちていない。
   一様なオフセットぼかしは、地が写真になったぶん逆に「シールの影」だと目立つ。 */
/* 下端のフェードも最小限に。長く溶かすほど「消えていくシール」に見える。 */
.hero--sky .hero-fg img{display:block;width:100%;height:auto;filter:none;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 95%,rgba(0,0,0,.55) 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 95%,rgba(0,0,0,.55) 100%)}
.hero--sky .hbadge,.hero--sky .hphone,.hero--sky .scrollcue{z-index:4}
@media(max-width:860px){
  .hero--sky .hero-mk{display:none}
  .hero--sky .hero-fg{width:min(78vw,430px);left:auto;right:0;margin-left:0}
  .hero--sky .hbadge{bottom:64px;width:84px;left:var(--gut);right:auto}
}

/* --- C) 写真を「窓」として置く（切り抜きを使わない・案1） ---
   切り貼りに見える原因は、写真の人物を CSS のグラデーション（粒子ゼロの滑らかな面）に
   載せていたこと＝素材の不一致。さらに撮影時の空 RGB(116-164,176-201,229-237) に対して
   背景に敷いていた #E4EEF7(228,238,247) は白く浅く、輪郭に回る光と地の色が合っていなかった。
   ここでは合成をやめ、写真を1枚の面（窓）として置く。右と下は画面外へ抜き、左と上は
   マスクで地へ溶かす。四辺すべてに硬い切り口があると「長方形を貼った」に見えるため、
   見えている2辺（左・上）から輪郭を消し、残る2辺は画面外へ逃がして辺の存在自体を無くす。 */
.hero--panel{--panel-left:43%}
.hero--panel .hero-fg,.hero--panel .hero-mk{display:none}
.hero--panel .bg{left:var(--panel-left);right:0;top:var(--photo-top);bottom:0;
  background:none;overflow:hidden}
/* 見えている2辺（左・上）を地へ溶かす。ただし直線のフェードだけでは「ぼけた直線の辺」が
   残り、長方形であることは読めてしまう。人物寄りを中心にした楕円を1枚重ね、輪郭が
   直線ではなく曲線で消えるようにする（右・下は画面外へ抜けるので楕円の減衰が届かない
   位置に中心を置き、そちら側は不透明のまま保つ）。
   .veil にも同じマスクを掛けること。同じ矩形に重なる別要素なので、こちらを掛け忘れると
   下端の締め（黒 13%）が左辺で断ち切られ、写真を溶かしても縦の継ぎ目だけが残る。 */
.hero--panel .bg,.hero--panel .veil{
  -webkit-mask-image:
    radial-gradient(145% 155% at 88% 72%,#000 52%,rgba(0,0,0,.55) 82%,transparent 100%),
    linear-gradient(90deg,transparent 0%,rgba(0,0,0,.28) 7%,#000 21%),
    linear-gradient(180deg,transparent 0%,rgba(0,0,0,.32) 6%,#000 18%);
  mask-image:
    radial-gradient(145% 155% at 88% 72%,#000 52%,rgba(0,0,0,.55) 82%,transparent 100%),
    linear-gradient(90deg,transparent 0%,rgba(0,0,0,.28) 7%,#000 21%),
    linear-gradient(180deg,transparent 0%,rgba(0,0,0,.32) 6%,#000 18%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
/* 視差用の上下はみ出し（-16%）を外す。案1の要は「彼が道路に立っている」ことなので、
   上下を16%ずつ削ると空と路面＝接地の手がかりが両方消えてしまう。全高を見せる。 */
.hero--panel .bg-in{top:0;bottom:0}
.hero--panel .bg img{animation:none;transform:none}
.hero--panel .bg img{display:block;width:100%;height:100%;object-fit:cover;
  object-position:88% 50%;filter:contrast(1.06) saturate(1.04)}
/* 左辺の白ウォッシュはマスクに置き換えたので持たない（重ねると二重に洗って写真が濁る）。
   残すのは下端のごく弱い締めだけ＝面が画面下辺で切れることを自然に見せるため。 */
.hero--panel .veil{left:var(--panel-left);right:0;top:var(--photo-top);bottom:0;background:
  linear-gradient(0deg,rgba(14,15,17,.13) 0%,rgba(14,15,17,.03) 12%,rgba(14,15,17,0) 28%)}
.hero--panel .bg::after{content:none}
/* 左辺の1px罫は削除。輪郭を溶かす方針に対して、罫はまさにその輪郭を描き直してしまう。 */
.hero--panel .bg::before{content:none}
/* 白地側に降りる縦罫は、面の左辺と近すぎると二重線に見えるので消す */
.hero--panel .vline{display:none}
/* バッジは画面右端に貼ると人物の胸〜腕に乗る。面の左下（ボケた路面と guardrail の側）へ
   移して、人物にも見出しにもかからない静かな場所に置く。 */
/* 右下に寄せる（ユーザー指示）。面の右下＝路面・ガードレール側。 */
.hero--panel .hbadge{right:clamp(28px,4vw,72px);left:auto;
  bottom:clamp(44px,6vh,72px)}
@media(max-width:860px){
  /* 縦画面では左右に割れないので、上下の関係に倒す＝白の余白 → その下に写真の帯。
     このとき縦長の枠に横長写真を流し込むと左右が大きく削れ（375px幅で605px分）、
     誘導灯も路面も消えて胸から上だけの拡大になる。帯の高さを写真の比率に近づけて、
     場面がほぼ丸ごと残るようにする（削れるのは85px程度）。 */
  .hero--panel{--panel-left:0%}
  .hero--panel .bg,.hero--panel .veil{top:auto;height:clamp(280px,38vh,340px);bottom:0}
  /* 帯は左右とも画面外へ抜けるので、溶かす必要があるのは上辺だけ。デスクトップ用の
     左フェードと楕円をそのまま効かせると、左下（車・コーン）まで白く抜けてしまう。
     ここも .veil を揃えないと、下端の締めだけが帯の上辺で断ち切られて線が残る。 */
  .hero--panel .bg,.hero--panel .veil{
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.35) 7%,#000 22%);
    mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.35) 7%,#000 22%);
    -webkit-mask-composite:source-over;mask-composite:add}
  .hero--panel .bg img{object-position:62% 50%}
  /* 見出しの下端が帯の上部にかかるので、上と左から白を効かせて墨黒の字を読ませる */
  .hero--panel .veil{background:
    linear-gradient(180deg,rgba(250,250,249,.86) 0%,rgba(250,250,249,.34) 18%,rgba(250,250,249,0) 40%),
    linear-gradient(90deg,rgba(250,250,249,.55) 0%,rgba(250,250,249,.18) 30%,rgba(250,250,249,0) 60%),
    linear-gradient(0deg,rgba(14,15,17,.16) 0%,rgba(14,15,17,.03) 14%,rgba(14,15,17,0) 32%)}
  .hero--panel .bg::before{content:none}
  /* 右下＝白地の右下端（写真の帯のすぐ上）に寄せる。帯に乗せると路面の情報を隠すため、
     帯の高さぶん持ち上げた位置に置く。 */
  .hero--panel .hbadge{right:var(--gut);left:auto;top:auto;width:108px;
    bottom:calc(clamp(280px,38vh,340px) + 18px)}
  /* SCROLL は帯の上（ボケた車の上）に乗って読めないので、この構図では出さない。
     縦に長いページであることは帯が画面下辺で切れていることで十分伝わる。 */
  .hero--panel .scrollcue{display:none}
}

/* --- B) 写真の外形を崩す（切り抜きは使わない） ---
   写真は1枚のまま。左下を白へ溶かし、右端を画面外へ抜き、上端の直線も部分的にぼかす。
   長方形の4辺すべてを見せないことで「板を貼った」輪郭を消す。 */
.hero--edge .hero-fg,.hero--edge .hero-mk{display:none}
.hero--edge .bg{top:var(--photo-top);left:auto;right:0;width:min(88%,1500px);
  -webkit-mask-image:
    radial-gradient(140% 120% at 88% 42%,#000 38%,rgba(0,0,0,.65) 62%,transparent 96%),
    linear-gradient(200deg,transparent 0%,rgba(0,0,0,.35) 12%,#000 34%);
  mask-image:
    radial-gradient(140% 120% at 88% 42%,#000 38%,rgba(0,0,0,.65) 62%,transparent 96%),
    linear-gradient(200deg,transparent 0%,rgba(0,0,0,.35) 12%,#000 34%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
.hero--edge .veil{left:auto;right:0;width:min(88%,1500px);background:
  linear-gradient(90deg,rgba(250,250,249,.72) 0%,rgba(250,250,249,.34) 26%,rgba(250,250,249,.06) 52%,rgba(250,250,249,0) 76%)}
@media(max-width:860px){
  .hero--edge .bg,.hero--edge .veil{width:100%}
}

.scrollcue{position:absolute;bottom:26px;left:var(--gut);z-index:3;font-family:'Oswald',var(--jp);font-weight:300;
  font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--steel);display:flex;align-items:center;gap:12px;
  animation:scue 2.4s ease-in-out infinite}
.scrollcue::after{content:"";width:52px;height:1px;background:var(--steel)}
@keyframes scue{0%,100%{opacity:.5}50%{opacity:1}}

/* ---------- page hero (sub pages) ----------
   写真は「帯」ではなく元の縦横比のまま置く。横長5:1の帯に cover で流すと、
   立っている人物は必ずどこかで切れる（頭が切れる／胸で切れる）ため、
   トリミングを一切かけない方式にした。縦組みの見出しは写真の左端に重ねて、
   トップのヒーローと同じ「見出しが写真にかかる」所作を保つ。 */
.phero{position:relative;overflow:hidden;background:var(--paper);color:var(--ink-t);
  padding:clamp(96px,12vh,144px) 0 clamp(44px,5.5vw,76px)}
.phero-top{position:relative;z-index:2}
/* 見出し部の透かし（会社概要と同じ語彙）。写真と喧嘩しないよう、空いている左側に置いて
   左端で切る。縦組み見出しの手前には来ないよう z-index:0 と薄い階調で背面に留める。 */
.phero-mk{position:absolute;z-index:0;top:58%;left:calc(50% - 56vw);transform:translateY(-50%);
  width:min(52vw,600px);height:auto;color:rgba(20,22,26,.045);pointer-events:none}
@media(max-width:860px){
  /* 縦積みでは写真が全幅になり、透かしは左端に切れ端が覗くだけで異物に見えるため出さない
     （会社概要は写真がなく透かしが主役なので、あちらは残す）。 */
  .phero-mk{display:none}
}
.phero-main{display:flex;align-items:flex-start;margin-top:clamp(14px,2.2vw,30px)}
/* .pvt が余白側を占め、row-reverse + flex-start で写真側の端に見出しを寄せる。
   その上で写真を負のマージンで左へ引き、見出しが写真の左端に重なるようにする。 */
.phero .pvt{position:relative;z-index:2;flex:1 1 auto;min-width:0;
  display:flex;flex-direction:row-reverse;justify-content:flex-start;align-items:flex-start;
  gap:clamp(10px,1.5vw,22px);padding-top:clamp(20px,3.4vw,52px)}
.phero-fig{position:relative;flex:0 0 auto;margin:0;
  width:min(64%,760px);border-radius:10px;overflow:hidden;
  margin-left:clamp(-40px,-2.4vw,-16px)}
.phero-fig img{display:block;width:100%;height:auto}
/* 会社概要は写真ではなくロゴを置く。写真ブロックと同じ寸法・角丸で並びのリズムを保ち、
   地は薄グレーにして縦組み見出し（墨黒）が左端に重なっても読めるようにする。 */
/* 会社概要は写真ではなくロゴ。四角い面を置くと「画像を貼った」感が出るため、
   箱を持たず、シンボルを大判の透かしとして右端へ流し、その手前に実寸のロゴを重ねる。
   サイト共通の「背景の大判英字」と同じ考え方（面ではなく透かしで空間を作る）。 */
/* 写真のような箱が要らないぶん、縦を詰めて余白の間延びを防ぐ */
.phero-fig--logo{position:relative;aspect-ratio:2/1;background:none;border-radius:0;
  overflow:visible;display:flex;align-items:center;justify-content:flex-start;
  margin-left:clamp(16px,2.6vw,40px);padding-left:clamp(18px,3vw,52px)}
/* 透かしがヘッダーの固定ナビまで伸びると背後が騒がしくなるので、中心を下げて収める */
.phero-fig--logo .mk{position:absolute;top:64%;right:calc(50% - 56vw);transform:translateY(-50%);
  width:min(100%,720px);height:auto;color:rgba(20,22,26,.045);pointer-events:none}
.phero-fig--logo .lg{position:relative;z-index:1;width:min(54%,330px);height:auto;color:var(--navy)}
@media(max-width:860px){
  .phero-fig--logo{aspect-ratio:16/9;margin-left:0;justify-content:center}
  /* 縦積みでも右端で切って「透かし」に見せる（全形が見えるとロゴの二重表示に見える）*/
  .phero-fig--logo .mk{width:min(96%,420px);left:auto;right:-24%;transform:translateY(-50%);color:rgba(20,22,26,.05)}
  .phero-fig--logo .lg{width:min(62%,260px)}
  .phero-main--logo .pvt{margin-bottom:clamp(14px,2.4vw,22px)}
}
/* 見出しが重なる左端だけ白を効かせる（写真そのものは沈めない） */
.phero-fig .veil{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,
  rgba(250,250,249,.88) 0%,rgba(250,250,249,.5) 12%,rgba(250,250,249,.12) 26%,rgba(250,250,249,0) 40%)}
.phero h1{writing-mode:vertical-rl;font-weight:600;letter-spacing:.08em;line-height:1.3;
  font-size:min(clamp(26px,3.4vw,44px),8svh);color:var(--navy)}
.phero .en{writing-mode:vertical-rl;font-family:'Oswald',var(--jp);font-weight:300;font-size:11.5px;
  letter-spacing:.3em;text-transform:uppercase;color:var(--steel);padding-top:.7em}
.phero-body{position:relative;z-index:2;margin-top:clamp(30px,4vw,54px)}
.phero .psub{font-size:clamp(19px,2.4vw,30px);font-weight:600;color:var(--navy);
  line-height:1.55;margin-bottom:16px;text-wrap:balance}
.phero .lead{color:var(--fog-2);font-size:16px;max-width:40em;text-wrap:pretty}
@media(max-width:860px){
  .phero-main{flex-direction:column;align-items:stretch}
  .phero .pvt{margin-right:0;padding-top:0;margin-bottom:-38px;align-self:flex-start;padding-left:2px}
  .phero-fig{width:100%;margin-left:0}
  /* 縦積みでは見出しが写真の「上端」に重なるので、白の効きも上から下へ変える */
  .phero-fig .veil{background:linear-gradient(180deg,
    rgba(250,250,249,.82) 0%,rgba(250,250,249,.3) 13%,rgba(250,250,249,0) 28%)}
}
.crumb{font-size:13px;color:var(--fog-2)}
/* 文字が12pxなのでリンクの当たり判定も12pxしかなく、指では押しにくい。インライン要素の
   上下 padding は行の高さを変えないので、見た目を保ったままタップ領域だけ広げられる。 */
.crumb a{text-decoration:none;color:var(--steel);display:inline-block;padding:14px 6px;margin:-14px -6px}
.crumb a:hover{text-decoration:underline}

/* ---------- 縦組みセクション見出し（代表メッセージ／待遇／エントリー） ----------
   ページ上半分（ヒーロー・事業内容・採用）で作った「左に縦組み明朝のセクション名、
   右に内容が流れる」構図を下半分にも通す。横書きの小ラベル＋横書き見出しのままだと、
   同じページで組み方が2種類になり別サイトのように見えるため。 */
/* 縦の間隔は各要素の margin-top で作る。row-gap を併用すると二重にかかる（実測103px）。 */
.vsec-grid{display:grid;grid-template-columns:minmax(0,15%) minmax(0,1fr);
  column-gap:clamp(24px,4.5vw,76px);row-gap:0;align-items:start}
/* DOM 順は h2 → .en。英字ラベルはその左に置く。flex + row-reverse で並べると、
   .en を持たないセクションでは h2 がラベルぶん左へ寄り、ページを縦に読むと見出しの
   左端が節ごとに 130px / 168px と食い違う。ラベル列を常に確保して、有無にかかわらず
   h2 の開始位置を揃える。 */
.vsec-t{display:grid;grid-template-columns:1.05em auto;justify-content:start;align-items:start;
  column-gap:clamp(9px,1.2vw,18px)}
.vsec-t h2{grid-column:2;writing-mode:vertical-rl;font-weight:600;line-height:1;color:var(--navy);
  font-size:clamp(21px,2.4vw,32px);letter-spacing:.2em}
.vsec-t .en{grid-column:1;grid-row:1;writing-mode:vertical-rl;font-family:'Oswald',var(--jp);font-weight:300;font-size:11px;
  letter-spacing:.28em;text-transform:uppercase;color:var(--steel);padding-top:.7em}
/* 黒地のセクションでは反転 */
.message:not(.light) .vsec-t h2,.entry .vsec-t h2{color:#fff}
.message:not(.light) .vsec-t .en,.entry .vsec-t .en{color:var(--pale)}
/* 縦組み見出しが立つので、内容側の先頭は横書きの見出しを置かずリードから始める */
.vsec-lead{color:var(--fog-2);font-size:16px;margin-bottom:clamp(34px,4.5vw,58px);max-width:40em;text-wrap:pretty}
.vsec-b > .t + .vsec-lead{margin-bottom:0}
/* リードが .vsec-b の最後なら、次の要素の margin-top と二重にかかるので自前の下余白は持たない */
.vsec-b > .vsec-lead:last-child{margin-bottom:0}
/* 内容は見出しの右の列に積む。縦組み見出しを1行目だけに置くと、見出しの高さがそのまま
   行の高さになり、リードが短いセクションでは「見出しの高さ−リードの高さ」ぶんの空白が
   下に生まれる（募集要項で実測187px）。見出しを全行にまたがせて、この空白をなくす。 */
/* 見出しは行の高さに影響させないため、グリッドの流れから外して左の列に絶対配置する。
   （span で全行にまたがせる手は、暗黙の行が大量に生成されて行間だけでページが膨張する。） */
.vsec-grid{position:relative;min-height:clamp(150px,18vw,230px)}
/* 絶対配置は .vsec-grid の直下に限る。セレクタを .vsec-t 全体にかけると、グリッド外で
   縦組み見出しを使う枠（トップの .biz-body、採用ページの .vsec-side）でも見出しが
   フローから外れ、本文の上に重なる／セクションの左上隅に飛ぶ。 */
/* left は 0 ではなく内側の余白ぶん。.vsec-grid は .wrap（左右 var(--gut)）なので、
   left:0 だと見出しだけがその余白に食い込み、パンくず・本文・ヒーローの左端と揃わない。 */
.vsec-grid > .vsec-t{position:absolute;left:var(--gut);top:0;width:15%}
.vsec-grid > *:not(.vsec-t):not(.big){grid-column:2;margin-top:clamp(26px,3vw,44px)}
.vsec-b{margin-top:0}
/* 注記は直前の塊にぶら下がるので詰める。小見出しは新しい塊の始まりなので空ける。 */
.vsec-grid > .fine:not(.big){margin-top:clamp(12px,1.4vw,20px)}
.vsec-grid > .klabel:not(.big){margin-top:clamp(40px,5vw,72px)}
.vsec-grid > .klabel + *:not(.big){margin-top:clamp(14px,1.6vw,22px)}
/* 3カラム等は列が痩せると折り返しが荒れるので全幅に出す。その場合だけ見出しのまたぎを解く
   （またいだまま全幅にすると見出しと内容が重なる）。 */
.vsec-grid > .cols:not(.big){grid-column:1/-1}
/* left は絶対配置のときだけ効かせる。position を戻したあとも残すと、エントリーのように
   別ルールで relative が付く枠では相対ずれとして効き、見出しだけ右に 64px ずれる。 */
.vsec-grid:has(> .cols) .vsec-t{position:static;width:auto;left:auto}
/* 写真と本文が横に並ぶ枠の中で縦組み見出しを使う場合（求人ページの仕事内容など） */
.vsec-side{display:flex;align-items:flex-start;gap:clamp(14px,2vw,30px)}
.vsec-side > .vsec-b{flex:1;min-width:0}
/* 見出しと本文の間隔を .vsec-grid と揃える（揃えないと、この枠だけ本文左端がずれる） */
@media(max-width:860px){.vsec-side{gap:clamp(16px,4.6vw,22px)}}
.message:not(.light) .vsec-lead,.entry .vsec-lead{color:var(--fog)}
@media(max-width:860px){
  /* 縦積みにすると、縦組み見出しが画面幅いっぱいの箱を1行まるごと占有するのに、
     字があるのは左端 44px だけ＝右 290px が毎セクション空く（実測: トップ5箇所・採用10箇所）。
     見出しは「柱」として左に立てたまま、内容をその右に流す2列に組み直す。列が1本のときの
     ような空白は生まれず、セクションごとの本文左端も 1 本に揃う。 */
  .vsec-grid{grid-template-columns:auto minmax(0,1fr);
    column-gap:clamp(16px,4.6vw,22px);row-gap:0;min-height:0}
  /* 見出しは1行目の左列に置くだけ。span で全行にまたがせると暗黙の行が大量に生成されて
     ページ高が暴走するため使わない（過去に採用ページが 68,471px に膨らんだ）。 */
  .vsec-grid > .vsec-t{position:static;width:auto;left:auto;grid-column:1;grid-row:1;align-self:start}
  .vsec-grid > *:not(.vsec-t):not(.big){grid-column:2;margin-top:clamp(20px,5vw,30px)}
  .vsec-grid > .vsec-b:first-of-type{margin-top:0}
  .vsec-grid > .cols:not(.big){grid-column:2}
  .vsec-grid > .klabel:not(.big){margin-top:clamp(34px,8vw,52px)}
}

/* ---------- sections ---------- */
section.blk{padding:clamp(80px,11vw,150px) 0}
section.blk.tight{padding:clamp(64px,8vw,104px) 0}
.band{background:var(--paper-2)}
.navyband{background:var(--navy);color:#fff}
/* 明朝は字面がゴシックより小さく、ゴシック用の詰め（letter-spacing:0・行間1.4）だとスカスカに見える。
   ウェイトは Hiragino Mincho の W6（600）に合わせ、字間と行間を締める。 */
.vsec-b > .t{font-size:clamp(26px,3.4vw,40px);font-weight:600;letter-spacing:.02em;line-height:1.5;text-wrap:balance;color:var(--navy)}
/* 主張見出しは 2 行に落として塊にする（1 行 20 字の長い横組みは締まらない）*/
.vsec-b > .t{margin-bottom:18px;max-width:16em}
.navyband .klabel{color:var(--pale)}

/* stats — 黒地＋上端に蛍光の反射テープ（制服モチーフ／視界に入ると点灯） */
.stats{background:var(--navy);color:#fff;position:relative}
.stats::before{content:"";position:absolute;top:0;left:0;height:2px;width:100%;background:var(--volt);
  transform:scaleX(0);transform-origin:left;transition:transform 1s cubic-bezier(.4,0,.2,1) .1s}
.stats.in::before{transform:scaleX(1)}
.stats .grid{display:grid;grid-template-columns:repeat(4,1fr)}
.stats .c{padding:46px 30px;border-left:1px solid var(--line-d)}
.stats .c:first-child{border-left:0}
.stats .c .n{font-family:'Oswald',var(--jp);font-weight:300;font-size:44px;line-height:1;color:#fff;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.stats .c .n small{font-size:18px;color:var(--pale)}
.stats .c .l{margin-top:14px;font-size:14px;font-weight:700;letter-spacing:.06em;color:var(--pale)}
.stats .c .d{margin-top:6px;font-size:13.5px;color:var(--fog)}
@media(max-width:860px){.stats .grid{grid-template-columns:repeat(2,1fr)}.stats .c:nth-child(3){border-left:0}.stats .c:nth-child(3),.stats .c:nth-child(4){border-top:1px solid var(--line-d)}.stats .c{padding:34px 22px}}

/* columns */
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.cols .col{padding:0 40px;border-left:1px solid var(--line-l)}
.cols .col:first-child{border-left:0;padding-left:0}
.cols .col h3{font-size:20px;font-weight:700;color:var(--ink-t);margin-bottom:14px;letter-spacing:.02em}
.cols .col p{font-size:15px;color:var(--fog-2)}
@media(max-width:860px){.cols{grid-template-columns:1fr;gap:44px}.cols .col{padding:0;border-left:0;border-top:1px solid var(--line-l);padding-top:34px}.cols .col:first-child{border-top:0;padding-top:0}}

/* =========================================================
   給与・待遇（v6）
   方針: 数字は数字らしく、Yes/No はリストで。
   「あり」を数字用の大判書体で組まない。
   - recruit = 雇用区分ごとの給与テーブル ＋ 手当チップ
   - index   = 本物の数字3つの黒帯 ＋ 手当リスト
   ========================================================= */

/* --- 給与テーブル（recruit） --- */
/* 給与テーブル。金額は「縦一列に揃って初めて比較できる」ので、
   全行で左右のパディングを揃え、単位の添え字は数字の右端に影響させない。 */
@media(max-width:560px){
}

/* --- 手当・福利厚生チップ（recruit） --- */
.perks{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
/* 折り返しで2列になると項目の幅がばらつき、2列目の頭が行ごとにずれて散らかる。
   狭い幅では1列に落として左端を揃える。 */
@media(max-width:520px){.perks{flex-direction:column;align-items:stretch}}
.perks li{display:inline-flex;align-items:center;gap:9px;padding:11px 17px 11px 14px;
  border:1px solid var(--line-l);border-radius:2px;background:var(--paper);
  font-size:14.5px;color:var(--ink-t);letter-spacing:.01em;transition:border-color .25s,transform .25s}
.band .perks li{background:var(--paper-2)}
.perks li:hover{border-color:var(--navy);transform:translateY(-2px)}
.perks li::before{content:"";flex:0 0 auto;width:11px;height:6px;
  border-left:2px solid var(--navy);border-bottom:2px solid var(--navy);transform:rotate(-45deg) translate(1px,-2px)}
.perks li b{font-weight:700;color:var(--navy)}
.perks li .num{font-family:'Oswald',var(--jp);font-weight:500;font-size:15px;color:var(--navy);
  letter-spacing:.02em;font-variant-numeric:tabular-nums}

/* --- 採用ページ hero の給与サマリー（応募者の第一関心を最上部に） --- */
/* 白地に載るようになったので、蛍光ラベル・白抜き数字を墨黒基調へ振り直す */
.phero-pay{display:flex;flex-wrap:wrap;align-items:flex-end;gap:clamp(20px,4vw,52px);
  margin-top:30px;padding-top:26px;border-top:1px solid var(--line-l)}
.phero-pay .pp{display:flex;flex-direction:column}
.phero-pay .pp .l{font-size:12.5px;font-weight:700;letter-spacing:.16em;color:var(--steel);margin-bottom:9px}
.phero-pay .pp .n{font-family:'Oswald',var(--jp);font-weight:300;font-size:clamp(32px,4.6vw,52px);
  line-height:1;color:var(--navy);letter-spacing:.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.phero-pay .pp .n em{font-style:normal;font-size:.4em;color:var(--fog-2);margin-left:5px;font-family:inherit}
.phero-pay .pp .d{margin-top:8px;font-size:13px;color:var(--fog-2)}
@media(max-width:560px){.phero-pay{gap:22px 30px}}

/* --- 募集要項のカテゴリ見出し（16行の壁を4群に割る） --- */
.spec-group{margin-top:52px}
.spec-group:first-of-type{margin-top:32px}
.spec-group > .gh{display:flex;align-items:center;gap:14px;margin-bottom:6px}
.spec-group > .gh .no{font-family:'Oswald',var(--jp);font-weight:500;font-size:12px;letter-spacing:.2em;color:var(--steel-2)}
.spec-group > .gh .tx{font-size:17px;font-weight:700;color:var(--navy);letter-spacing:.04em}
.spec-group > .gh::after{content:"";flex:1;height:1px;background:var(--line-l)}

/* --- フローの所要時間バッジ --- */
.fs-meta{display:inline-block;vertical-align:middle;margin:0 0 10px 10px;padding:4px 10px;
  border:1px solid var(--line-l);border-radius:2px;
  font-family:'Oswald',var(--jp);font-weight:500;font-size:11.5px;letter-spacing:.1em;color:var(--steel);
  font-variant-numeric:tabular-nums}
.fs-ic{vertical-align:middle}
.band .fs-meta{background:var(--paper-2)}

/* --- 未経験者への配慮ボックス（経験者向けリストの前に置く） --- */
.aside-note{display:flex;gap:14px;align-items:flex-start;padding:20px 24px;margin-bottom:30px;
  background:var(--paper-2);border-left:3px solid var(--navy)}
.band .aside-note{background:var(--paper)}
.aside-note .ic{flex:0 0 auto;font-family:'Oswald',var(--jp);font-weight:500;font-size:12px;
  letter-spacing:.14em;color:var(--steel);padding-top:2px}
/* 全幅の枠に入るため、1440px では 684px・1行51字まで伸びていた（サイト内で唯一、
   日本語の適正上限40〜50字を超えていた箇所）。40em＝約40字で頭打ちにする。
   モバイルでは列がこれより狭いので影響しない。 */
.aside-note p{font-size:14.5px;color:var(--fog-2);line-height:1.9;max-width:40em}
.aside-note b{color:var(--navy);font-weight:700}
@media(max-width:560px){.aside-note{flex-direction:column;gap:8px;padding:18px 20px}}

/* --- セクション途中の軽い応募導線 --- */
/* 募集要項の途中に置く応募導線。黒ベタで塗ると、白基調のページに黒い長方形を
   貼り込んだ見え方になる（標章ブロックと同じ問題）。地は敷かず上下の罫で囲い、
   注意を引く役目は墨黒のボタン1つに持たせる。 */
/* 直前は募集要項の表で、最終行の下罫がそのまま区切りになる。ここに自前の上罫を足すと
   罫が二重に並んで間が空き、空の行のように見える（モバイルで顕著）。上罫は持たせず、
   下罫だけで募集要項ブロック全体を閉じる。 */
.midcta{display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px;
  padding:clamp(26px,3vw,40px) 0 clamp(26px,3vw,38px);border-bottom:1px solid var(--line-l)}
.midcta p{font-size:15px;color:var(--fog-2);margin-right:auto;line-height:1.8}
.midcta p b{color:var(--navy);font-weight:700}
@media(max-width:640px){.midcta{padding:24px 0}.midcta p{margin-right:0}}
/* 文言を持たないボタンだけの導線。直前が表ではないので上側にも罫を引いて塊を閉じる。 */
.midcta--bare{border-top:1px solid var(--line-l);margin-top:clamp(30px,4vw,44px)}

/* =========================================================
   会社概要ページ（v7）
   警備会社の信頼＝許認可。黒×蛍光は「認定」の表現に使う。
   ========================================================= */

/* --- 事業内容カード（about → services への回遊も兼ねる） --- */
.bizgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-l);border:1px solid var(--line-l)}
.bizgrid .bz{background:var(--paper);padding:34px 28px;position:relative;overflow:hidden;
  transition:background .3s cubic-bezier(.2,.7,.2,1)}
.band .bizgrid .bz{background:var(--paper-2)}
.bizgrid .bz .ic{display:block;color:var(--navy);margin-bottom:18px;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.bizgrid .bz .ic svg{width:30px;height:30px;stroke-width:1.4}
.bizgrid .bz .no{font-family:'Cormorant',var(--jp);font-style:italic;font-weight:500;font-size:22px;
  color:var(--steel-2);display:block;margin-bottom:8px;line-height:1}
.bizgrid .bz h3{font-size:17.5px;font-weight:700;color:var(--navy);letter-spacing:.02em;margin-bottom:10px}
.bizgrid .bz p{font-size:14px;color:var(--fog-2);line-height:1.85}
/* hover: 墨黒に反転（カード単位なので面の塊にならない） */
.bizgrid .bz:hover{background:var(--navy)}
.bizgrid .bz:hover .ic{color:var(--volt);transform:translateY(-3px)}
.bizgrid .bz:hover .no{color:var(--volt)}
.bizgrid .bz:hover h3{color:#fff}
.bizgrid .bz:hover p{color:var(--fog)}
@media(max-width:900px){.bizgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.bizgrid{grid-template-columns:1fr}}

/* --- 認定カード（警備業者標章） --- */
/* 会社概要は白基調のページ。ここだけ黒ベタ＋蛍光にすると、面としても色としても浮く。
   地は敷かず、上に細い罫を引くだけにして、数字は他ページと同じ墨黒で組む。 */
.cert{display:grid;grid-template-columns:1fr .9fr;gap:clamp(28px,4vw,56px);align-items:center;
  padding-top:clamp(26px,3.2vw,44px);border-top:1px solid var(--line-l)}
.cert .klabel{color:var(--steel)}
.cert-no{font-family:'Oswald',var(--jp);font-weight:300;font-size:clamp(34px,4.6vw,54px);line-height:1;
  color:var(--navy);letter-spacing:.02em;font-variant-numeric:tabular-nums;margin-top:16px;white-space:nowrap}
.cert-by{margin-top:14px;font-size:15px;font-weight:700;color:var(--navy);letter-spacing:.04em}
.cert-note{margin-top:18px;font-size:14px;color:var(--fog-2);line-height:1.9;max-width:30em}
.cert-fig{margin:0;background:#fff;padding:14px;border-radius:10px;border:1px solid var(--line-l);
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s;
  box-shadow:0 14px 30px rgba(14,15,17,.07);will-change:transform}
.cert-fig:hover{box-shadow:0 22px 44px rgba(14,15,17,.12)}
.cert-fig img{width:100%;height:auto;display:block}
@media(max-width:860px){.cert{grid-template-columns:1fr;gap:28px}.cert-fig{order:-1}}

/* --- アクセスの交通手段タブ --- */
.acc-tabs{display:flex;gap:8px;margin-bottom:26px;flex-wrap:wrap}
.acc-tabs button{font:inherit;font-size:14.5px;font-weight:700;letter-spacing:.03em;cursor:pointer;
  padding:11px 20px;border:1px solid var(--line-l);background:var(--paper);color:var(--steel);
  border-radius:2px;transition:.25s}
.band .acc-tabs button{background:var(--paper-2)}
.acc-tabs button:hover{border-color:var(--navy);color:var(--navy)}
.acc-tabs button[aria-selected="true"]{background:var(--navy);color:#fff;border-color:var(--navy)}
.acc-tabs button:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.acc-pane{display:none}
.acc-pane.on{display:block;animation:step-in .35s cubic-bezier(.2,.7,.2,1)}

/* --- 数字帯（index） --- */
/* 旧・黒カード（黒地＋蛍光）を廃止。代表メッセージ→待遇→エントリーで黒が3連続し、
   ページ下半分だけ重くなっていたため、待遇は地のまま墨黒で組んで連続を断ち切る。 */
.figs{position:relative}
.figs-in{padding:0}
.figs-grid{display:grid;grid-template-columns:repeat(3,1fr)}
.figs-grid .f{padding:8px clamp(20px,3vw,40px);border-left:1px solid var(--line-l)}
.figs-grid .f:first-child{border-left:0;padding-left:0}
.figs-grid .f .n{font-family:'Oswald',var(--jp);font-weight:300;font-size:clamp(40px,5.6vw,68px);line-height:1;
  color:var(--navy);letter-spacing:.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.figs-grid .f .n em{font-style:normal;font-size:.38em;color:var(--fog-2);margin-left:5px;font-family:inherit}
.figs-grid .f .l{margin-top:14px;font-size:14px;font-weight:700;letter-spacing:.06em;color:var(--steel)}
/* この求人の雇用形態そのものである正社員だけ、ラベルを墨黒にして視線の起点にする。
   面を反転させたり数字の大きさを変えたりはしない（3つの金額を比べられなくなるため）。 */
.figs-grid .f.main .l{color:var(--navy)}
.figs-grid .f .d{margin-top:6px;font-size:13.5px;color:var(--fog-2);line-height:1.8}
@media(max-width:760px){
  .figs-grid{grid-template-columns:1fr}
  .figs-grid .f{border-left:0;padding:22px 0;border-top:1px solid var(--line-d)}
  .figs-grid .f:first-child{border-top:0;padding-top:0}
}
/* 縦1列にすると1画面に2件しか入らず間延びする。数字は十分大きいので、狭い幅では
   数字を少し締め、行間と上下の余白を詰めて3件が視野に収まるようにする。 */
@media(max-width:560px){
  .figs-grid .f{padding:16px 0}
  .figs-grid .f .n{font-size:clamp(36px,11vw,46px)}
  .figs-grid .f .l{margin-top:9px}
  .figs-grid .f .d{margin-top:4px;line-height:1.7}
}
/* 黒帯直下の手当リスト（index） */
.figs-perks{list-style:none;display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:36px;
  padding-top:26px;border-top:1px solid var(--line-l)}
.figs-perks li{display:inline-flex;align-items:center;gap:10px;font-size:14.5px;color:var(--fog-2);line-height:1.7}
.figs-perks li::before{content:"";flex:0 0 auto;width:11px;height:6px;
  border-left:2px solid var(--steel);border-bottom:2px solid var(--steel);transform:rotate(-45deg) translate(1px,-2px)}
.figs-perks li b{color:var(--navy);font-weight:700}
/* 折り返しで2列になると項目の幅がばらつき、2列目の頭が行ごとに 118/163/150px とずれて
   散らかる。狭い幅では1列に落として左端を揃える。 */
@media(max-width:560px){.figs-perks{flex-direction:column;gap:12px}}

/* flow — タイムライン（ノード＋接続線 volt が伸びる） */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.fstep{padding:30px 30px 0 0;position:relative}
.fstep::before{content:"";position:absolute;left:0;top:1px;width:9px;height:9px;border-radius:50%;background:var(--navy);box-shadow:0 0 0 3px var(--paper);z-index:2}
.band .fstep::before{box-shadow:0 0 0 3px var(--paper-2)}
.fstep:not(:last-child)::after{content:"";position:absolute;left:15px;right:0;top:5px;height:1px;background:var(--line-l);
  transform:scaleX(0);transform-origin:left;transition:transform 1s cubic-bezier(.4,0,.2,1) calc(var(--i,0) * .15s)}
.rv.in .fstep:not(:last-child)::after{transform:scaleX(1);background:var(--navy)}
.rv.in .fstep::before{animation:dot-pulse .8s cubic-bezier(.4,0,.2,1) calc(var(--i,0) * .15s) both}
@keyframes dot-pulse{0%{transform:scale(.3);background:var(--volt)}60%{transform:scale(1.3);background:var(--volt)}100%{transform:scale(1);background:var(--navy)}}
.fstep .idx{display:block;margin-bottom:12px;font-size:28px}
/* 見出しは h2 の直下なので h3。h4 にすると §11-2 の「階層を飛ばさない」に反する
   （選考の流れ・1日の流れの2箇所で h2→h4 になっていた）。 */
.fstep h3{font-size:18px;font-weight:700;color:var(--navy);margin-bottom:10px}
.fstep p{font-size:14px;color:var(--fog-2)}
@media(max-width:860px){.flow{grid-template-columns:1fr 1fr;gap:38px 24px}.fstep{padding:0}.fstep::before,.fstep:not(:last-child)::after{display:none}}
/* 2列だと 375px で1枠 156px しかなく、26〜30字の説明文が1行11字・3行に折り返して
   細長い塊になる（実測: 156px で3行 → 335px で1〜2行）。狭い幅では選考フロー（.flow-3）
   と同じく1列に落とす。 */
@media(max-width:560px){.flow{grid-template-columns:1fr;gap:30px}}

/* recruit: tag pills in page hero */
.tags{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.tags li{font-size:13px;letter-spacing:.04em;color:var(--steel);border:1px solid var(--line-l);padding:6px 13px;border-radius:2px}

/* recruit: point cards */
.points{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-l);border:1px solid var(--line-l)}
.points .pt{background:var(--paper);padding:36px 32px}
.points .pt .idx{display:block;font-size:26px;margin-bottom:14px}
.points .pt h3{font-size:18px;font-weight:700;color:var(--navy);margin-bottom:10px;letter-spacing:.02em}
.points .pt p{font-size:14.5px;color:var(--fog-2)}
.band .points .pt{background:var(--paper-2)}
@media(max-width:860px){.points{grid-template-columns:1fr}}

/* recruit: tick list */
.ticks{list-style:none;margin-top:24px;display:grid;gap:12px}
.ticks li{position:relative;padding-left:30px;font-size:16px;color:var(--ink-t)}
.ticks li::before{content:"";position:absolute;left:4px;top:.62em;width:11px;height:6px;border-left:1.5px solid var(--navy);border-bottom:1.5px solid var(--navy);transform:rotate(-45deg)}
.ticks li b{font-weight:700;color:var(--navy)}
.ticks li .sub{display:block;margin-top:6px;font-size:14.5px;color:var(--fog-2);line-height:1.85}

/* recruit: experience chips */
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:9px}
.chips li{font-size:14px;color:var(--steel);border:1px solid var(--line-l);padding:8px 15px;border-radius:2px;background:var(--paper)}
.band .chips li{background:var(--paper-2)}

/* fine print */
.fine{margin-top:26px;font-size:13.5px;color:var(--fog-2);line-height:1.9}

.flow-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:860px){.flow-3{grid-template-columns:1fr;gap:34px}}

/* info table */
table.info{width:100%;border-collapse:collapse}
table.info th,table.info td{text-align:left;padding:20px 2px;border-bottom:1px solid var(--line-l);font-size:15px;vertical-align:top}
table.info th{width:32%;font-weight:700;color:var(--navy);letter-spacing:.04em}
table.info td{color:var(--fog-2);font-variant-numeric:tabular-nums}
table.info tr:first-child th,table.info tr:first-child td{border-top:1px solid var(--line-l)}
@media(max-width:640px){table.info th,table.info td{display:block;width:100%;border-bottom:0;padding:12px 2px 0}
  table.info td{padding-bottom:16px;border-bottom:1px solid var(--line-l)}
  table.info tr:first-child th{border-top:0}}

/* two-column media */
.media{display:grid;grid-template-columns:0.9fr 1.1fr;gap:70px;align-items:stretch}
/* 写真の角丸はサイト共通の 10px（.duo と揃える） */
.media .photo{border-radius:10px;min-height:420px}
@media(max-width:860px){.media{grid-template-columns:1fr;gap:34px}.media .photo{min-height:260px}}

/* 代表メッセージ */
.message{background:var(--navy);color:#fff;overflow:hidden;padding:clamp(80px,11vw,150px) 0}
.msg-body{max-width:880px}
.msg-body .klabel{color:var(--pale)}
.msg-body .pullquote{font-size:clamp(27px,3.9vw,50px);line-height:1.55;font-weight:500;color:#fff;margin:24px 0 30px;text-wrap:balance;letter-spacing:.01em}
.msg-body .lead{color:var(--fog);font-size:16px;max-width:34em;line-height:2}
.msg-body .lead + .lead{margin-top:18px}
.msg-body .sign{margin-top:34px;font-size:16px;color:#fff;letter-spacing:.06em}
.msg-body .sign small{display:block;color:var(--pale);font-size:12.5px;letter-spacing:.18em;margin-bottom:7px}

/* 白地バリアント（about 用）。
   about は phero(黒) の直後に代表メッセージが来るため、黒のままだと 1,530px の
   黒が境界なく連続して一体化する。加えて about の本文は3段落あり、長文を黒地で
   読ませると可読性が落ちる（読ませる情報帯は白地、という本サイトの方針とも齟齬）。
   index の代表メッセージは短く、前後が白地なので黒の大扉のまま維持する。 */
.message.light{background:var(--paper);color:var(--ink-t)}
.message.light .msg-body .klabel{color:var(--steel)}
.message.light .msg-body .pullquote{color:var(--navy)}
.message.light .msg-body .lead{color:var(--fog-2)}
.message.light .msg-body .sign{color:var(--navy);padding-top:26px;border-top:1px solid var(--line-l);display:inline-block;padding-right:40px}
.message.light .msg-body .sign small{color:var(--steel)}

/* 業務内容：ピン留めスプリット（左固定リスト × 右スクロール連動写真） */
/* ---------- business（事業内容ティザー）----------
   左に写真を裁ち落とし（ビューポート左端まで）、右に本文。詳細は services.html。
   参照サイトが背景に敷いている巨大な透かし英字は meta.json.avoid に該当するため入れない。 */
.biz{--bizph:clamp(220px,52vw,300px);
  position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,47%) minmax(0,1fr);align-items:center;
  gap:clamp(28px,4.5vw,72px);padding:clamp(76px,11vw,150px) 0;background:var(--paper)}
/* 背景の大判英字。参照サイト同様、右端で切れるところまで送り出す。
   ここだけ Oswald を使わない：Oswald は縦長すぎて横幅が出ず、参照サイトの「全幅に寝かせた
   大きな英単語」の見え方にならないため、本文系（ヒラギノの欧文＝ニュートラルなサンセリフ）を使う。 */
.biz-wm{right:-.08em;top:clamp(46px,7vw,104px);
  font-size:clamp(76px,14vw,196px);color:rgba(20,22,26,.055)}
/* 背景の大判英字の共通土台（Business / Recruit / Entry）。
   Oswald は縦長すぎて「全幅に寝かせた大きな英単語」にならないため、ここだけニュートラルなサンセリフ。 */
.biz-wm,.rct-wm,.entry .big{position:absolute;z-index:0;pointer-events:none;white-space:nowrap;
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,system-ui,sans-serif;
  font-weight:300;line-height:.8;letter-spacing:-.01em}
.biz-photo,.biz-body{position:relative;z-index:1}
.biz-photo{overflow:hidden}
.biz-photo img{width:100%;height:clamp(300px,40vw,520px);object-fit:cover;
  filter:contrast(1.03) saturate(1.06)}
.biz-body{display:flex;align-items:flex-start;gap:clamp(14px,2vw,32px);padding-right:var(--gut);max-width:672px}
.biz-body .vsec-b{flex:1;min-width:0}
.biz-t{font-size:clamp(25px,3vw,38px);font-weight:600;color:var(--navy);line-height:1.5;
  letter-spacing:.02em;text-wrap:balance}
.biz-lead{margin-top:22px;color:var(--fog-2);font-size:15.5px;line-height:2.1;text-wrap:pretty}
.biz-list{list-style:none;display:flex;flex-wrap:wrap;gap:11px 26px;margin-top:28px;
  padding-top:26px;border-top:1px solid var(--line-l)}
.biz-list li{display:inline-flex;align-items:center;gap:9px;font-size:14.5px;font-weight:700;color:var(--ink-t)}
.biz-list svg{width:19px;height:19px;stroke-width:1.4;color:var(--steel);flex:0 0 auto}
.biz-cta{margin-top:36px}
@media(max-width:860px){
  /* 1カラムに落ちると写真がセクションの先頭に来て、その裏にある大判英字の下 8 割を
     覆ってしまう（文字の頭だけが写真の上にのぞく）。英字が丸ごと収まるぶんだけ
     上の余白を足し、英字は最上部に寄せる。 */
  .biz{grid-template-columns:minmax(0,1fr);gap:28px;padding:clamp(56px,10vw,92px) 0}
  /* 大判英字は写真の下端に重ねる。上の余白に単独で浮かべると、上の本文とも写真とも
     関係のない「大きな灰色の単語」に見える（Recruit / ENTRY は写真・黒地に重なっている）。
     位置は写真の実高から引くので、写真サイズを変えても追随する。 */
  .biz-wm{top:calc(clamp(56px,10vw,92px) + var(--bizph) - .55em)}
  .biz-photo img{height:var(--bizph)}
  /* 見出しと本文の間隔を .vsec-grid と同じ値にして、全セクションの本文左端を1本に揃える */
  .biz-body{padding:0 var(--gut);max-width:none;gap:clamp(16px,4.6vw,22px)}
}

/* ---------- recruit（採用ティザー：左にカード／右に写真3枚）----------
   参照サイトは背景に薄く写真を敷いて巨大な透かし英字を重ねる構成。透かし英字は avoid のため入れず、
   薄い写真＋バンド地だけで白セクションの連続を切る。 */
/* セクション間の縦リズムを揃える（.blk / .biz と同じ余白量にする） */
/* 参照サイトと並べて実測したところ、写真が小さく容器の中に収まりすぎていた
   （画面幅2000pxで: 参照＝1枚430×645・帯が画面の65%・右端まで抜ける／当方＝236×380・37%・
   右に474px余る）。結果、参照は「写真のブロック」なのに当方は「文字に写真が添えられた」
   主従の逆転した見え方になっていた。写真を主役に戻す。
   上下の余白も詰める（写真をバンド高の56%→70%前後にするため）。 */
.rct{position:relative;overflow:hidden;background:var(--paper-2);padding:clamp(64px,7.5vw,104px) 0}
/* 参照サイトは地の写真の左上角が斜めに切り落とされている（面取り）。四角い面をそのまま
   敷くのではなく、角を1つ落とすことで「風景を切り出して置いた」意図が出る。 */
/* 面取りは % で持つと、バンドの縦横比が変わったときに角度が崩れる
   （1440では173×108px＝約32°だが、375では45×124px＝細い楔になった）。
   縦横に同じ実寸を与えて、どの画面でも45°に保つ。 */
/* 面取り（左上の斜めカット）は地ではなく前面の写真3枚に付く。ここは四角のまま。 */
.rct-bg{position:absolute;inset:0;z-index:0}
/* 背景写真は「白く飛ばした風景」として使う。ぼかすと質感が濁って安く見えるため、ぼかさず
   不透明度と白のオーバーレイだけで沈める。左（カード側）を濃く、右（写真側）を薄く。 */
/* 縦位置は上寄り＝樹木・のぼり・広場が写る帯を使う。中央（人物の顔の高さ）を出すと
   前面の写真3枚と人物同士がぶつかって「透けた人が立っている」ように見える。 */
/* 前面に半透明の白文字を重ねるため、地が白すぎると文字が消える。背景写真は前より少し起こす。 */
/* 参照サイトの地は「白く飛ばしてあるが建物や空の構造は残っている」高明度の風景。
   当方は不透明度32%＋濃いオーバーレイで構造がほぼ消え、均一な灰色の面になっていた。
   写真を起こし、オーバーレイを中央で薄くして、風景として読める明るさに寄せる。 */
/* 店舗の外観・駐車車両が入る右寄りの帯を使う。
   横に広い枠では cover の拘束が幅側になり、横方向の切り取りが効かない＝左端の車内にいる
   運転手が必ず入ってしまう。少し寄せて（scale）左を画面外へ送り、顔を外す。 */
/* 切り口を読ませるには「平均の明度差」が要る一方、参照の地は細部が眠い低コントラストの風景。
   不透明度で明度差を確保しつつ、コントラストと彩度を落として細部だけを眠らせる
   （不透明度だけで薄くすると明度差が消えて切り口が見えなくなる）。 */
.rct-bg img{width:100%;height:100%;object-fit:cover;object-position:78% 34%;opacity:.46;
  filter:contrast(.68) saturate(.45) brightness(1.02);
  transform:scale(1.4);transform-origin:80% 45%}
/* 縦方向＝上端をいちばん白く（空気感）、下端も白に溶かして前後の白セクションと地続きに。
   横方向＝カード側をやや濃く、写真側は薄く。中央は構造が見える濃さまで開ける。 */
/* 切り口の明度差は .rct-bg の白ベースが作るので、ここでは写真を沈める役だけに戻す。
   横方向＝カード側を濃く（文字の下）、写真側は薄く。 */
/* 左端を薄く保っていたのは、地に面取りがあった頃に切り口を見せるため。面取りは写真側へ
   移したので、左端はカードの読みやすさを優先して素直に白く戻す。 */
.rct-bg::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(237,237,234,.2) 0%,rgba(237,237,234,.1) 24%,rgba(237,237,234,.06) 60%,rgba(237,237,234,.42) 100%),
  linear-gradient(90deg,rgba(237,237,234,.6) 0%,rgba(237,237,234,.68) 14%,rgba(237,237,234,.7) 30%,rgba(237,237,234,.44) 48%,rgba(237,237,234,.26) 100%)}
/* 大判英字は写真3枚の「前」に重ねる（参照サイトも文字が写真の上を通る）。
   半透明の白を1枚かぶせる形なので、地の上では明るい字形として、写真の上では薄いベールとして効く。
   pointer-events:none なので写真・ボタンの操作は妨げない。 */
/* 参照サイトとの差: 当方は画面いっぱいに中央揃えで、下端から36px浮いていた。
   参照は (1)カード列の右あたりから始まって右は画面外へ抜ける (2)バンドの下辺で文字が切れる。
   左右いっぱいの中央揃えだと「帯に置いた見出し」に見え、参照の「画面を横切って流れていく」
   感じにならないので、左を写真帯の起点に合わせて右へ流す。 */
.rct-wm{z-index:2;right:auto;text-align:left;
  left:calc(max(0px,(100vw - 1180px) / 2) + var(--gut) + 220px);
  bottom:-.12em;
  font-size:clamp(112px,26.5vw,360px);color:rgba(255,255,255,.52)}
@media(max-width:860px){
  /* 縦積みではカード列が無いので、画面の左端から流す */
  .rct-wm{left:calc(var(--gut) * -.4)}
}
/* カードは細く、写真側を大きく取る。カード内は中央揃え（縦組みの見出し＋2行のリード＋ボタン）。 */
/* 重ね順：背景写真(0) < 写真3枚(1) < 大判英字(2) < カード(3)。
   英字は写真の上を通すが、見出し・リード・ボタンの上には乗せない（文字が濁って読みにくくなる）。
   .rct-grid に z-index を持たせると子が同じ重ね合わせ文脈に閉じてこの順序が作れないため付けない。 */
/* .wrap の 1180px 制限を外し、左だけページの内容左端に合わせ、右は画面端まで抜く。
   （左の計算は .wrap と同じ結果になるように: (100vw-1180)/2 + gut。1180未満の画面では 0+gut。）
   写真の帯を右へ抜くことで、参照サイトと同じ「写真が画面を横切る」構図になる。 */
.rct-grid{position:relative;display:grid;
  grid-template-columns:minmax(0,220px) minmax(0,1fr);
  gap:clamp(28px,4vw,64px);align-items:center;
  max-width:none;margin:0;
  padding-left:calc(max(0px,(100vw - 1180px) / 2) + var(--gut));padding-right:0}
.rct-card{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;text-align:center}
.rct-t{writing-mode:vertical-rl;font-size:clamp(23px,2.5vw,33px);font-weight:600;color:var(--navy);
  letter-spacing:.3em;line-height:1}
.rct-lead{margin-top:30px;color:var(--fog-2);font-size:14px;line-height:2;letter-spacing:.04em}
.rct-cta{margin-top:26px;width:100%}
.rct-cta .btn{width:100%;min-width:148px;justify-content:center}
.rct-photos{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.6vw,20px)}
/* 角丸は素材を小さく見せる方向に働く。参照サイトは直角。
   高さを固定値で持つと、帯が広がる大画面で横長に崩れる（2000pxで比0.85まで寝た）。
   縦横比そのものを 2:3＝0.667（参照サイトの実測値）で固定し、幅に追従させる。
   左上の角は斜めに切り落とす（参照サイトの写真がこの形）。切り落とし量は縦横同じ実寸で
   与えて45°を保つ。% にすると 2:3 の枠では角度が寝てしまう。 */
.rct-photos figure{overflow:hidden;border-radius:0;aspect-ratio:2/3;
  --ch:clamp(30px,4.4vw,64px);--se:clamp(14px,2vw,28px);
  /* 面取りを clip-path（硬い切り口）で、縁をマスク（柔らかい）で持つと、同じ1枚の中に
     硬い辺と柔らかい辺が同居してちぐはぐになる。面取りも 135deg のグラデーションで表現し、
     4辺の溶かしと同じ1枚のマスクに統合する＝どの辺も同じ質で消える。 */
  -webkit-mask-image:
    linear-gradient(135deg,transparent 0,transparent calc(var(--ch) * .72),rgba(0,0,0,.5) var(--ch),#000 calc(var(--ch) * 1.5)),
    linear-gradient(90deg,transparent 0,#000 var(--se),#000 calc(100% - var(--se)),transparent 100%),
    linear-gradient(180deg,transparent 0,#000 var(--se),#000 calc(100% - var(--se)),transparent 100%);
  mask-image:
    linear-gradient(135deg,transparent 0,transparent calc(var(--ch) * .72),rgba(0,0,0,.5) var(--ch),#000 calc(var(--ch) * 1.5)),
    linear-gradient(90deg,transparent 0,#000 var(--se),#000 calc(100% - var(--se)),transparent 100%),
    linear-gradient(180deg,transparent 0,#000 var(--se),#000 calc(100% - var(--se)),transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
/* 素材はいずれも横長（3:2）。縦長タイルに流すと切り取り幅が狭くなるため、
   寄せ位置を人物に合わせて「立っている人＝縦長の被写体」が枠に収まるようにする。 */
/* 高さは figure の aspect-ratio が決めるので、画像は枠を満たすだけ。 */
.rct-photos img{width:100%;height:100%;object-fit:cover;
  --z:1;--zo:50% 50%;transform:scale(var(--z));transform-origin:var(--zo);
  filter:contrast(1.03) saturate(1.06);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.rct-photos figure:nth-child(1) img{object-position:68% 38%}  /* hero1：顔と上半身を中央に */
.rct-photos figure:nth-child(2) img{object-position:80% 50%}  /* 夜間：人物が右寄り */
.rct-photos figure:nth-child(3) img{object-position:55% 50%;--z:1.08;--zo:50% 54%}  /* 駐車場：引きの全身を少し寄る */
.rct-photos figure:hover img{transform:scale(calc(var(--z) * 1.05))}
@media(max-width:860px){
  /* 縦積みではカードも写真も1列。デスクトップ用に右padding を 0 にしているので戻す
     （0 のままだとカードの文字が画面右端に接する）。 */
  .rct-grid{grid-template-columns:minmax(0,1fr);gap:30px;padding-right:var(--gut)}
  /* 縦長の枠では横方向にしか切り取れない。右寄りの帯＝店舗外観と駐車車両を出す。 */
  /* 縦長の枠は横方向に切り取れるので、寄せは不要（寄せると解像度を無駄に使う）。 */
  .rct-bg img{object-position:88% 40%;transform:none}
  .rct-photos{gap:8px}
}
/* 3枚を横に並べたままだと 375px で1枚 106px・320px で 88px しかなく、立っている人物の
   顔が判別できない。狭い幅ではスナップ付きの横スクロール帯に変え、1枚あたり 58vw を
   与える。右端を画面外まで伸ばして「まだ続く」ことを見せ、ジェスチャーを気づかせる。 */
@media(max-width:640px){
  /* 大判英字はセクション下端を基準にしているため、写真帯が上に来るモバイルでは写真の
     「下」に落ちて、ただの大きな灰色の単語に見える。写真帯の下端に重なる位置まで上げて、
     デスクトップと同じ「写真の上を英字が通る」見え方に揃える。 */
  .rct-wm{bottom:clamp(60px,16vw,96px)}
  .rct-photos{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:58vw;
    gap:10px;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    margin-right:calc(var(--gut) * -1);padding-right:var(--gut);
    scrollbar-width:none}
  .rct-photos::-webkit-scrollbar{display:none}
  .rct-photos figure{scroll-snap-align:start}
}

.svcsplit{background:var(--paper);padding:clamp(80px,11vw,150px) 0;position:relative}
.ssgrid{display:grid;grid-template-columns:0.78fr 1.22fr;gap:clamp(40px,6vw,90px);align-items:start}
.ssaside-in{position:sticky;top:120px}
/* 進捗バー（左タブ下端を流れる volt。現在の業務が何番目かを示す） */
.sslist-prog{position:absolute;left:0;bottom:0;height:2px;background:var(--volt);width:0;transition:width .5s cubic-bezier(.4,0,.2,1)}
.sslist{position:relative}
@media(max-width:860px){.sslist-prog{display:none}}
/* NOTE: このセクションは「1画面に収める」ことが確定仕様（2026-08-02 先方指摘＋競合調査）。
   スクロール駆動のピン留め（セクションを数画面ぶん引き伸ばす手法）は導入しない。 */
.ssaside .t{font-size:clamp(26px,3.2vw,38px);font-weight:700;color:var(--navy);line-height:1.4;text-wrap:balance;margin-top:16px}
.ssaside .lead{margin-top:16px;color:var(--fog-2);font-size:15px}
.ssaside .more{margin-top:32px}
/* 左：業務タブ（クリックで切替・現在地を蛍光でハイライト） */
.sslist{margin-top:34px;border-top:1px solid var(--line-l)}
.sslist button{display:flex;align-items:baseline;gap:14px;width:100%;padding:15px 0 15px 16px;
  border:0;border-bottom:1px solid var(--line-l);background:none;font:inherit;text-align:left;cursor:pointer;
  position:relative;color:var(--steel-2);transition:color .35s}
.sslist button::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%) scaleY(0);
  width:3px;height:22px;background:var(--volt);transition:transform .35s cubic-bezier(.4,0,.2,1)}
.sslist button:hover{color:var(--ink-t)}
.sslist button[aria-selected="true"]{color:var(--navy)}
.sslist button[aria-selected="true"]::before{transform:translateY(-50%) scaleY(1)}
.sslist button:focus-visible{outline:2px solid var(--volt);outline-offset:-2px}
.sslist .n{font-family:'Oswald',var(--jp);font-size:12px;letter-spacing:.14em;color:var(--steel-2);transition:color .35s}
.sslist button[aria-selected="true"] .n{color:var(--navy)}
.sslist .nm{font-size:16px;font-weight:700;letter-spacing:.02em}
/* 右：大判の写真パネル（重ねて高さ固定＝縦に伸びない） */
.sspanes{position:relative;height:clamp(380px,74vh,620px)}
.sspane{position:absolute;inset:0;border-radius:3px;overflow:hidden;color:#fff;display:flex;align-items:flex-end;
  opacity:0;visibility:hidden;transition:opacity .45s ease,visibility .45s}
.sspane.on{opacity:1;visibility:visible}
.sspane .ssphoto{position:absolute;inset:0}
.sspane::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(0deg,rgba(8,9,11,.9),rgba(8,9,11,.28) 46%,rgba(8,9,11,.04) 78%)}
.sscap{position:relative;z-index:2;padding:clamp(26px,3vw,40px);padding-top:52px}
.sscap::before{content:"";position:absolute;left:clamp(26px,3vw,40px);top:26px;width:34px;height:2px;background:var(--volt);
  transform:scaleX(0);transform-origin:left;transition:transform .7s cubic-bezier(.4,0,.2,1) .1s}
.sspane.in .sscap::before{transform:scaleX(1)}
.sscap .ic{display:inline-block;vertical-align:middle;margin:0 12px 14px 0;color:#fff}
.sscap .ic svg{width:30px;height:30px;stroke-width:1.35}
.sscap .no{display:inline-block;vertical-align:middle;margin-bottom:14px;font-family:'Oswald',var(--jp);font-weight:500;
  font-size:14px;letter-spacing:.2em;color:var(--volt)}
.sscap h3{font-size:clamp(22px,2.6vw,30px);font-weight:700;letter-spacing:.03em}
.sscap p{font-size:15px;color:var(--pale);margin-top:10px;max-width:30em;line-height:1.9}
@media(max-width:860px){
  .ssgrid{grid-template-columns:minmax(0,1fr);gap:26px}
  .ssaside,.ssaside-in,.sspanes{min-width:0}
  .ssaside-in{position:static}
  /* タブは横スクロールのチップ型に */
  .sslist{display:flex;gap:8px;margin-top:26px;border-top:0;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;padding-bottom:2px;max-width:100%}
  .sslist::-webkit-scrollbar{display:none}
  .sslist button{width:auto;flex:0 0 auto;gap:8px;padding:10px 15px;border:1px solid var(--line-l);border-radius:2px;
    white-space:nowrap;background:var(--paper)}
  .sslist button::before{display:none}
  .sslist button[aria-selected="true"]{background:var(--navy);color:#fff;border-color:var(--navy)}
  .sslist button[aria-selected="true"] .n{color:var(--volt)}
  .sslist .nm{font-size:14.5px}
  .ssaside .more{margin-top:24px}
  .sspanes{height:clamp(300px,56vh,380px)}
}

/* service detail (services.html) */
.svc{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;padding:clamp(48px,6vw,84px) 0;border-top:1px solid var(--line-l)}
.svc:first-of-type{border-top:0}
.svc .photo{min-height:340px;border-radius:10px}
.svc .body .ic{display:inline-block;vertical-align:middle;color:var(--navy);margin:0 13px 16px 0}
.svc .body .ic svg{width:30px;height:30px;stroke-width:1.4}
.svc .body .no{display:inline-block;vertical-align:middle;font-family:'Cormorant',var(--jp);font-style:italic;color:var(--steel-2);font-size:22px;margin-bottom:16px;position:relative;top:-2px}
.svc .body h2{font-size:clamp(22px,2.8vw,30px);font-weight:700;color:var(--navy);margin:2px 0 16px}
.svc .body p{font-size:15.5px;color:var(--fog-2)}
.svc .body ul{margin-top:20px;display:flex;flex-wrap:wrap;gap:10px;list-style:none}
.svc .body li{font-size:13.5px;color:var(--steel);border:1px solid var(--line-l);padding:7px 14px;border-radius:2px}
.svc:nth-child(even) .photo{order:2}
@media(max-width:860px){.svc{grid-template-columns:1fr;gap:28px}.svc .photo{min-height:230px}.svc:nth-child(even) .photo{order:0}}

/* FAQ — volt stroke がスライドし、開閉時に本文が高さアニメ */
.faq{border-top:1px solid var(--line-l)}
.faq details{border-bottom:1px solid var(--line-l);position:relative;overflow:hidden}
.faq details::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--volt);
  transform:scaleY(0);transform-origin:top;transition:transform .35s cubic-bezier(.4,0,.2,1)}
.faq details[open]::before{transform:scaleY(1)}
.faq summary{cursor:pointer;list-style:none;padding:24px 40px 24px 22px;font-size:17px;font-weight:700;color:var(--navy);position:relative;transition:padding .25s}
.faq summary:hover{padding-left:28px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:34px;width:11px;height:11px;border-right:1px solid var(--steel);border-bottom:1px solid var(--steel);transform:rotate(45deg);transition:transform .35s cubic-bezier(.4,0,.2,1)}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq .a{padding:0 22px 26px;font-size:15px;color:var(--fog-2)}
.faq details[open] .a{animation:faq-in .4s cubic-bezier(.2,.7,.2,1)}
@keyframes faq-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* form */
.form{display:grid;gap:20px;max-width:620px}
.form label{display:block;font-size:14px;font-weight:700;color:var(--navy);margin-bottom:8px;letter-spacing:.04em}
/* 10px はモバイルで潰れて読めないため 11px。バッジなので本文よりは小さいままでよい。 */
.form label .req{display:inline-block;margin-left:9px;padding:2px 7px;font-size:12.5px;font-weight:700;letter-spacing:.04em;color:#fff;background:var(--ink-t);border-radius:2px;vertical-align:middle}
.form input,.form select,.form textarea{width:100%;padding:14px 16px;border:1px solid var(--line-l);border-radius:2px;
  font:inherit;font-size:16px;color:var(--ink-t);background:#fff;transition:.2s}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(20,22,26,.12)}
.form textarea{min-height:140px;resize:vertical}
.form .note{font-size:13.5px;color:var(--fog-2)}
.form button{justify-self:start;cursor:pointer;font-family:'Oswald',var(--jp);border:1px solid var(--navy)}

/* entry band */
.entry{position:relative;background:var(--navy);padding:clamp(90px,13vw,160px) 0;overflow:hidden;color:#fff}
/* 旧・蛍光の袋文字（avoid 該当）を廃止し、Business / Recruit と同じ「背景の大判英字」に統一。
   黒地なので白を極小の不透明度で乗せる。 */
.entry .big{left:0;right:0;bottom:clamp(4px,2vw,30px);
  text-align:center;font-size:clamp(104px,25vw,340px);color:rgba(255,255,255,.07)}
/* 参照サイトの大判英字は「白抜きの輪郭線」で、字の中が空いていて背景が透ける。
   当方は半透明の白でベタ塗りしていたため、巨大な白い面が1枚かぶさる＝のっぺりして見えていた。
   塗りを消して輪郭だけにする。線幅は字の大きさに追従させる（固定だと大画面で細く見える）。
   text-stroke 非対応の環境では color:transparent だけが効いて字が消えるため @supports で囲う。 */
@supports (-webkit-text-stroke: 1px black){
  .biz-wm{color:transparent;-webkit-text-stroke:clamp(1px,.13vw,2.2px) rgba(20,22,26,.13)}
  .rct-wm{color:transparent;-webkit-text-stroke:clamp(1.2px,.16vw,2.6px) rgba(255,255,255,.9)}
  .entry .big{color:transparent;-webkit-text-stroke:clamp(1px,.14vw,2.4px) rgba(255,255,255,.16)}
}
/* 大判英字の上に内容を出すための持ち上げ。縦組み見出しだけは除く：ここで position を
   relative に上書きすると .vsec-grid > .vsec-t の絶対配置が解け、left の 64px が
   相対ずれとして効いて、この節の見出しだけ右へ 64px ずれる（他の節と揃わない）。
   見出しは絶対配置のままなので z-index だけ与えれば同じ層に乗る。 */
.entry .wrap > *:not(.big):not(.vsec-t){position:relative;z-index:1}
.entry .vsec-t{z-index:1}
.entry .jp{margin:0 0 8px;font-size:clamp(18px,2.4vw,24px);font-weight:600;color:#fff}
.entry .sub{color:var(--fog);font-size:15px;margin-bottom:42px}
.entry .cta{display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.entry .cta .phone{align-items:center;padding-left:26px;border-left:1px solid rgba(255,255,255,.28);color:#fff}
.entry .cta .phone small{color:var(--fog)}

/* footer */
footer{background:var(--navy-d);color:var(--fog);padding:56px 0 40px;font-size:13.5px}
footer .row{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:26px}
footer .brand{color:#fff}
footer .fnav{display:flex;gap:26px;flex-wrap:wrap}
footer .fnav a{color:var(--pale);text-decoration:none}
footer .fnav a:hover{color:#fff;text-decoration:underline}
footer .meta{line-height:1.9;font-variant-numeric:tabular-nums}
footer .copy{margin-top:34px;padding-top:20px;border-top:1px solid rgba(238,242,248,.12);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:12.5px}
@media(max-width:860px){footer .row{flex-direction:column}}
/* タップ領域。実測でフッターのナビリンクが高さ 24px しかなく、指では狙いにくい
   （Apple HIG は 44×44px）。インライン要素の上下 padding は行の高さを変えないので、
   見た目の行間を保ったまま当たり判定だけ 44px に広げる。 */
@media(max-width:860px){
  footer .fnav{gap:20px 26px}
  footer .fnav a{display:inline-block;padding:11px 6px;margin:-11px -6px}
  footer .brand{display:inline-block;padding:7px 0}
}
/* ロゴ・電話も 44px に届いていなかった（ロゴ32px / 電話40px）。幅は十分あるので高さだけ足す。 */
@media(max-width:860px){
  header .brand,footer .brand{display:inline-flex;align-items:center;min-height:44px}
  a[href^="tel:"]{min-height:44px}
  .phone,.phone-lg{min-height:44px}
}

/* 追従する応募ボタン（デスクトップ：右下フロート、モバイル：下部dock） */
/* 右端に貼り付く縦タブ（参照した縦組みヘッダーの「お問い合わせ」タブの流儀）。
   常時表示。JS の .show は互換のため残すが表示条件には使わない。 */
.floatcta{position:fixed;right:0;top:50%;transform:translate(0,-50%);z-index:80;
  display:inline-flex;flex-direction:column;align-items:center;gap:10px;
  background:var(--volt);color:var(--navy);font-weight:700;font-size:14.5px;letter-spacing:.18em;
  padding:26px 13px 22px;border-radius:3px 0 0 3px;text-decoration:none;
  box-shadow:-6px 10px 26px rgba(14,15,17,.18);transition:background .22s,padding .22s}
.floatcta span{writing-mode:vertical-rl}
.floatcta:hover{background:var(--volt-d);padding-right:17px}
.floatcta svg{width:15px;height:15px;stroke-width:1.9;transform:rotate(90deg);transition:transform .25s}
.floatcta:hover svg{transform:rotate(90deg) translateX(3px)}
/* モバイル：底面 dock（応募 & 電話 の2分割） */
.mdock{position:fixed;left:0;right:0;bottom:0;z-index:79;display:none;
  background:var(--volt);box-shadow:0 -6px 22px rgba(14,15,17,.28);
  transform:translateY(110%);transition:transform .35s cubic-bezier(.4,0,.2,1);
  padding-bottom:env(safe-area-inset-bottom)}
.mdock.show{transform:none}
.mdock a{flex:1;padding:16px 10px;text-align:center;text-decoration:none;font-weight:700;letter-spacing:.04em;font-size:15px;color:var(--navy);display:flex;align-items:center;justify-content:center;gap:8px}
.mdock a + a{background:var(--navy);color:#fff;font-family:'Oswald',var(--jp);letter-spacing:.06em;font-weight:500;font-variant-numeric:tabular-nums}
.mdock a svg{width:16px;height:16px;stroke-width:1.8}
@media(max-width:860px){
  .floatcta{display:none}
  .mdock{display:flex}
  body{padding-bottom:calc(60px + env(safe-area-inset-bottom))}
}

/* reveal — .rv.in に最終状態を直書きし、animation は「あれば効く」演出扱い。
   Chrome のアニメーションが未起動でも要素は必ず表示される。 */
.rv{opacity:0;transform:translateY(18px)}
.rv.in{opacity:1;transform:none;animation:rv-in .9s cubic-bezier(.2,.7,.2,1)}
@keyframes rv-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

@media(prefers-reduced-motion:reduce){
  .hero-fg{animation:none}
  .rv,.hero .fade,.hero .vt-h .ln i,.pullquote .ln i{opacity:1!important;transform:none!important;transition:none!important;animation:none!important}
  .stats::before,.sscap::before,.hero .vline{transform:none!important;animation:none!important;transition:none!important}
  .hero .bg img{animation:none;transform:scale(1.04)}
  .hero .bg::after{background:radial-gradient(120% 92% at 50% 40%,rgba(14,15,17,0) 52%,rgba(14,15,17,.10) 100%)}
  .scrollcue{animation:none}
  .preload{display:none}
  html{scroll-behavior:auto}
  .duo img,.hero .bg img{filter:contrast(1.03) saturate(1.06) brightness(1.0)!important}
}

/* ===== v4 高度化：モーション・構造の作り込み ===== */

/* 代表メッセージ プルクオートの行送りリビール（heroと同手法） */
.pullquote .ln{display:block;overflow:hidden;padding-bottom:.04em}
.pullquote .ln i{display:block;font-style:normal;transform:translateY(110%);
  transition:transform .95s cubic-bezier(.19,1,.22,1)}
.message.in .pullquote .ln i{transform:none}
.message.in .pullquote .ln:nth-child(2) i{transition-delay:.09s}
.message.in .pullquote .ln:nth-child(3) i{transition-delay:.18s}

/* アクセス：情報＋地図の2カラム（地図はモノトーンに合わせグレースケール） */
.access{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.access-info .info{margin-top:0}
.access-map{position:relative;aspect-ratio:4/3;border:1px solid var(--line-l);border-radius:10px;overflow:hidden;background:var(--paper-2)}
.access-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(1) contrast(.96) brightness(1.02)}
@media(max-width:860px){.access{grid-template-columns:1fr;gap:34px}.access-map{aspect-ratio:16/11}}

/* 応募：フォーム＋安心材料パネルの2カラム */
.entry-grid{display:grid;grid-template-columns:1.45fr .85fr;gap:56px;align-items:start}
.reassure-card{background:var(--navy);color:#fff;padding:38px 34px;border-radius:10px;position:sticky;top:104px}
.reassure-card .klabel{color:var(--pale)}
.reassure-card .phone{margin-top:16px;color:#fff}
.reassure-card .phone small{color:var(--pale)}
.reassure-list{list-style:none;margin-top:26px;display:grid;gap:14px}
.reassure-list li{position:relative;padding-left:26px;font-size:15px;color:var(--pale);line-height:1.6}
.reassure-list li::before{content:"";position:absolute;left:2px;top:.5em;width:10px;height:5px;
  border-left:2px solid var(--volt);border-bottom:2px solid var(--volt);transform:rotate(-45deg)}
@media(max-width:860px){.entry-grid{grid-template-columns:1fr;gap:36px}.reassure-card{position:static}}
/* 左右 34px の余白＋折り返さない電話番号で、このカードの min-content が 255px になる。
   320px 幅では列（220px）に収まらず、同じ列にいる応募フォームごと右へはみ出していた。
   狭い幅では余白と番号を締めて、列の中に収める。 */
@media(max-width:560px){
  .reassure-card{padding:30px 22px}
  .reassure-card .phone b{font-size:21px;letter-spacing:.02em}
  .reassure-card .phone svg{width:19px;height:19px}
}

/* ===== 採用ページ：アイコンで視認性を上げる ===== */
/* 求人ポイントのカードアイコン */
.points .pt{position:relative}
.pt-ic{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  border:1px solid var(--line-l);border-radius:50%;color:var(--navy);margin-bottom:16px}
.pt-ic svg{width:22px;height:22px;stroke-width:1.5}
.points .pt .idx{display:block;margin-bottom:10px}
/* フロー（選考・1日）のステップアイコン */
.fs-ic{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  color:var(--navy);margin-bottom:10px}
.fs-ic svg{width:24px;height:24px;stroke-width:1.5}
.fs-time{display:inline-block;font-family:'Oswald',var(--jp);font-weight:500;font-size:15px;letter-spacing:.06em;
  color:var(--navy);background:var(--volt);padding:1px 8px;border-radius:2px;margin-right:9px}
/* 募集要項下の注記（＊）— 紹介制度などを控えめに強調 */
.fine-mark{display:inline-block;color:var(--navy);background:var(--volt);font-weight:700;font-size:13px;line-height:1;
  padding:3px 6px;border-radius:2px;margin-right:8px;vertical-align:1px;font-family:'Oswald',var(--jp)}
.fine b{color:var(--ink-t);font-weight:700}

/* 募集要項テーブルの項目アイコン */
.th-ic{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  color:var(--steel-2);margin-right:9px;vertical-align:-5px}
.th-ic svg{width:17px;height:17px;stroke-width:1.5}
table.info tr:hover .th-ic{color:var(--navy)}
@media(max-width:640px){.th-ic{display:none}}

/* info テーブル：行ホバーの微ハイライト */
table.info tr{transition:background .2s}
table.info tr:hover th,table.info tr:hover td{color:var(--ink-t)}

/* ============================================================
   v5 — pro polish（tilt / magnetic / hero live chip / timeline / form step）
   ============================================================ */

/* Hero live chip（時間帯で変わる稼働ステータス） */
.hero-chip{display:inline-flex;align-items:center;gap:10px;padding:9px 14px 9px 12px;background:rgba(255,255,255,.06);
  border:1px solid rgba(199,240,46,.35);color:#fff;font-size:13px;letter-spacing:.06em;
  margin-bottom:22px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.hero-chip .pulse{width:8px;height:8px;border-radius:50%;background:var(--volt);position:relative;flex:0 0 auto}
.hero-chip .pulse::after{content:"";position:absolute;inset:-4px;border-radius:50%;background:var(--volt);opacity:.4;
  animation:pulse 2s ease-out infinite}
@keyframes pulse{0%{transform:scale(.8);opacity:.5}80%,100%{transform:scale(2.4);opacity:0}}
.hero-chip small{color:var(--pale);font-family:'Oswald',var(--jp);letter-spacing:.14em}

/* Magnetic ボタン（デスクトップ hover のみ）— JS が --mx/--my を計算 */
@media(hover:hover) and (min-width:861px){
  .btn.mag,.floatcta.mag{transform:translate(calc(var(--mx,0px) * .3),calc(var(--my,0px) * .3));
    transition:transform .18s cubic-bezier(.2,.7,.2,1),background .25s,border-color .25s,box-shadow .35s}
  .btn.mag:hover,.floatcta.mag:hover{transition:transform .06s linear,background .25s,border-color .25s}
}

/* 認定カードの 3D tilt（デスクトップのみ）— JS で --rx/--ry を計算 */
@media(hover:hover) and (min-width:861px){
  .cert-fig img{transform:translateZ(20px);transition:transform .3s}
}

/* 会社沿革 timeline */
.tl{list-style:none;position:relative;padding-left:26px;margin-top:24px}
.tl::before{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:1px;background:var(--line-l)}
.tl li{position:relative;padding:12px 0 22px;font-size:15.5px;color:var(--ink-t)}
.tl li::before{content:"";position:absolute;left:-25px;top:20px;width:11px;height:11px;border-radius:50%;background:var(--paper);border:2px solid var(--navy);box-sizing:border-box}
.tl li.hi::before{background:var(--volt);border-color:var(--volt)}
.tl .yr{font-family:'Oswald',var(--jp);font-weight:500;font-size:13px;letter-spacing:.14em;color:var(--steel);display:block;margin-bottom:4px}
.tl li p{color:var(--fog-2);font-size:14.5px;margin-top:4px}

/* 求人ポイントカード：hover flip 風（実際は overlay 展開） */
.points .pt{cursor:default;overflow:hidden}
.points .pt .flip{position:absolute;inset:0;background:var(--navy);color:#fff;padding:30px 32px;
  display:flex;flex-direction:column;justify-content:flex-end;
  transform:translateY(100%);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.points .pt:hover .flip,.points .pt:focus-within .flip{transform:translateY(0)}
.points .pt .flip .quote{font-family:var(--jp);font-size:17px;line-height:1.75;color:#fff;letter-spacing:.02em;text-wrap:balance}
.points .pt .flip .quote::before{content:"「";color:var(--volt);font-size:1.4em;line-height:1;margin-right:.05em}
.points .pt .flip .quote::after{content:"」";color:var(--volt);font-size:1.4em;line-height:1;margin-left:.05em}
.points .pt .flip small{margin-top:14px;color:var(--pale);font-size:12.5px;letter-spacing:.14em}
@media(hover:none){.points .pt .flip{display:none}}

/* 応募フォーム multi-step */
/* <ol> なので list-style を消さないと、::before で描く丸番号の左に既定のマーカー
   「1.」「2.」が並んで出る（狭い幅では画面外に食い込んで見切れる）。 */
.fsteps{display:flex;gap:0;margin-bottom:34px;counter-reset:s;list-style:none}
/* min-width:auto のままだと「ご要望・送信」の min-content（約85px）×3 が下限になり、
   320px 幅では列に収まらずフォーム全体が右へ 15px はみ出す。0 を許して折り返させる。 */
.fsteps li{flex:1;min-width:0;position:relative;padding:0 0 22px;font-size:13px;color:var(--fog-2);letter-spacing:.06em;text-align:center;font-weight:700;counter-increment:s}
.fsteps li::before{content:counter(s);display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:50%;background:var(--paper);border:1.5px solid var(--line-l);
  margin:0 auto 8px;font-family:'Oswald',var(--jp);font-size:13px;color:var(--steel);transition:.35s;position:relative;z-index:2}
.fsteps li::after{content:"";position:absolute;left:50%;right:-50%;top:14px;height:1.5px;background:var(--line-l);z-index:1}
.fsteps li:last-child::after{display:none}
.fsteps li.on::before{background:var(--navy);border-color:var(--navy);color:#fff}
.fsteps li.done::before{background:var(--volt);border-color:var(--volt);color:var(--navy)}
.fsteps li.done ~ li{}
.fstep-body{display:none}
.fstep-body.on{display:grid;gap:20px;animation:step-in .4s cubic-bezier(.2,.7,.2,1)}
@keyframes step-in{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:none}}
.fstep-nav{display:flex;gap:12px;justify-content:space-between;margin-top:8px;flex-wrap:wrap}
.fstep-nav .btn.ghost{background:transparent;color:var(--navy)}
.form-error{border-color:#c92a2a!important;box-shadow:0 0 0 3px rgba(201,42,42,.14)!important}
.err-msg{color:#c92a2a;font-size:13.5px;margin-top:6px;display:none}
.err-msg.on{display:block}

/* Contact/送信 マイクロアニメ */
.form button{position:relative;overflow:hidden}
.form button.sending{pointer-events:none;opacity:.85}
.form button.sending::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--volt);
  transform-origin:left;animation:send-bar 1.4s ease-in-out infinite}
@keyframes send-bar{0%{transform:scaleX(0)}50%{transform:scaleX(.7)}100%{transform:scaleX(1)}}

/* entry .cta ボタン群：モバイル一列 */
@media(max-width:640px){
  /* 縦積みに変わると親の align-items:center が横方向に効き、ボタンと電話だけが
     中央に寄る。見出し・リードは左揃えなので、この節だけ軸が2本になる。左に揃える。 */
  .entry .cta{flex-direction:column;align-items:flex-start;gap:22px}
  .entry .cta .phone{padding-left:0;border-left:0}
}

/* view transitions（対応ブラウザのみ）— ロゴだけ連続、他はクロスフェード。
   @view-transition{navigation:auto} は body クラス toggle でも発火し、
   ページ内の他 transition/animation を凍結する副作用があるため使わない。
   ページ遷移時のフェードは ::view-transition-old/new の指定だけを残す。 */
::view-transition-old(root),::view-transition-new(root){animation-duration:.35s}

/* Fade-in for menu overlay (already exists) — 補助アニメ */
.menu nav a:nth-child(1){--i:0}
.menu nav a:nth-child(2){--i:1}
.menu nav a:nth-child(3){--i:2}
.menu nav a:nth-child(4){--i:3}

/* prefers-reduced-motion respect */
@media(prefers-reduced-motion:reduce){
  .hero-chip .pulse::after,.rv.in .fstep::before{animation:none!important}
  .points .pt .flip{transition:none!important}
  .menu,.menu.open{transition:opacity .2s ease}
}