/* フォントは各HTMLのので読み込む（@importは保険）。EN表示=Expose(未入手)→Archivo近似 */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Zen+Kaku+Gothic+New:wght@400;500;700&family=Archivo:wght@400;500;600;700&display=swap");
/* =====================================================================
common.css — 三益工業 全ページ共通（reset / レイアウト / 共通コンポーネント /
固定背景 / アニメ）。ページ固有CSSはこの共通クラスを上書きしない（差分はバリアントで）。
===================================================================== */
/* ===== reset / base ===== */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
html,body{ overflow-x:clip } /* 横溢れ安全弁。clipはsticky/scroll-drivenを壊さない */
@supports not (overflow:clip){ html,body{ overflow-x:hidden } }
body{ margin:0; font-family:var(--ff-jp); font-size:var(--fz-body); line-height:var(--lh-body);
letter-spacing:1px; color:var(--c-main); background:var(--c-white);
-webkit-font-smoothing:antialiased; }
img,svg,video,iframe{ max-width:100%; height:auto; display:block }
a{ color:inherit; text-decoration:none }
ul,ol{ margin:0; padding:0; list-style:none }
h1,h2,h3,h4,h5,p,figure,dl,dd,blockquote{ margin:0 }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
:focus-visible{ outline:2px solid var(--c-accent); outline-offset:2px }
:root{ --motion-ease:cubic-bezier(.16,1,.3,1); --motion-bg-y:0px }
.container{ width:100%; max-width:calc(var(--w-container) + var(--pad-x)*2);
margin-inline:auto; padding-inline:var(--pad-x) }
@media (max-width:1023px){ .container{ padding-inline:var(--pad-x-tb) } }
@media (max-width:767px){ .container{ padding-inline:var(--pad-x-sp) } }
.visually-hidden{ position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap }
.section{ padding:96px 0 }
@media (max-width:1023px){ .section{ padding:72px 0 } }
@media (max-width:767px){ .section{ padding:56px 0 } }
/* =====================================================================
固定の青系アブストラクト背景（要件5）
.site-bg を body直下に置く。position:fixedで全ページ固定。背景色のある
セクションが上に重なって隠す＝透明セクションでは固定背景が見える。
blue-abstract-template-editable を共通CSS化したもの。
===================================================================== */
.site-bg{ position:fixed; inset:-3vh 0; z-index:-10; pointer-events:none; overflow:hidden;
transform:translate3d(0,var(--motion-bg-y),0) scale(1.03); will-change:transform;
background:
radial-gradient(circle at 78% 30%, rgba(42,96,190,.14) 0%, transparent 42%),
radial-gradient(circle at 68% 72%, rgba(40,98,204,.18) 0%, transparent 44%),
linear-gradient(90deg, var(--c-main) 0%, #14274a 42%, var(--c-main) 100%),
var(--c-main); }
/* 光アニメ層：spanは .site-bg から独立した .site-lights（z:-1）に置き、
FV写真 .fv-photo（z:-2）の上でアニメーションさせる（2026-07-02 変更）。
fixed＋同一transformで .site-bg 土台と一体で視差する。 */
.site-lights{ position:fixed; inset:-3vh 0; z-index:-1; pointer-events:none; overflow:hidden;
transform:translate3d(0,var(--motion-bg-y),0) scale(1.03); will-change:transform }
.site-lights span{ position:absolute; pointer-events:none; will-change:transform,opacity }
.site-lights .bg-light{ inset:-24%; background:
radial-gradient(circle at 84% 44%, rgba(94,164,255,.5) 0%, rgba(61,123,232,.3) 16%, rgba(22,68,143,.14) 34%, transparent 54%),
radial-gradient(circle at 70% 74%, rgba(40,98,204,.28) 0%, rgba(20,64,136,.12) 34%, transparent 56%),
radial-gradient(circle at 96% 22%, rgba(148,213,255,.16) 0%, transparent 34%);
filter:blur(48px); animation:bgDrift var(--bg-anim-dur) ease-in-out infinite alternate }
.site-lights .bg-sweep{ left:100%; top:12%; width:82vw; height:82vw; border-radius:999px; background:
radial-gradient(circle, rgba(138,208,255,.30) 0%, rgba(92,165,255,.50) 18%, rgba(56,121,231,.34) 34%, rgba(29,80,176,.16) 50%, transparent 70%);
filter:blur(72px); mix-blend-mode:screen; animation:bgSweep calc(var(--bg-anim-dur)*1.2) ease-in-out infinite }
.site-lights .bg-flow{ inset:-35%; background:
linear-gradient(115deg, transparent 0%, rgba(92,165,255,.12) 42%, rgba(128,197,255,.08) 50%, rgba(42,102,210,.06) 60%, transparent 78%);
filter:blur(34px); mix-blend-mode:screen; animation:bgFlow calc(var(--bg-anim-dur)*.9) ease-in-out infinite }
.site-lights .bg-glow1{ width:min(54vw,760px); height:min(54vw,760px); right:-12vw; top:9%; border-radius:999px;
background:radial-gradient(circle, rgba(96,160,255,.30) 0%, rgba(76,142,255,.16) 40%, transparent 70%);
filter:blur(72px); mix-blend-mode:screen; animation:bgGlow1 5s ease-in-out infinite alternate }
.site-lights .bg-glow2{ width:min(42vw,580px); height:min(42vw,580px); right:19vw; bottom:-11vw; border-radius:999px;
background:radial-gradient(circle, rgba(23,82,172,.28) 0%, rgba(20,64,136,.12) 45%, transparent 72%);
filter:blur(72px); mix-blend-mode:screen; animation:bgGlow2 11s ease-in-out infinite alternate }
.site-lights .bg-noise{ inset:0; background-image:
radial-gradient(circle at center, rgba(255,255,255,.10) 0 1px, transparent 1.4px),
linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
background-size:7px 7px,4px 4px,4px 4px; mix-blend-mode:overlay; opacity:.14; animation:bgNoise 8s steps(6) infinite }
@keyframes bgDrift{ 0%{transform:translate3d(0,0,0) scale(1);opacity:.72} 100%{transform:translate3d(-4vw,2vw,0) scale(1.08);opacity:.94} }
@keyframes bgSweep{ 0%{transform:translate3d(0,0,0) scale(.94);opacity:.18} 10%{opacity:.52} 25%{transform:translate3d(-46vw,.4vw,0) scale(1);opacity:.78} 50%{transform:translate3d(-182vw,3.2vw,0) scale(1.14);opacity:.34} 75%{transform:translate3d(-46vw,.8vw,0) scale(1.02);opacity:.74} 90%{opacity:.5} 100%{transform:translate3d(0,0,0) scale(.94);opacity:.18} }
@keyframes bgFlow{ 0%{transform:translate3d(16%,-2%,0) rotate(0);opacity:.10} 50%{transform:translate3d(-10%,2%,0) rotate(2deg);opacity:.26} 100%{transform:translate3d(10%,4%,0) rotate(-2deg);opacity:.12} }
@keyframes bgGlow1{ 0%{transform:translate3d(8vw,0,0) scale(1);opacity:.58} 100%{transform:translate3d(-18vw,1.6vw,0) scale(1.1);opacity:.9} }
@keyframes bgGlow2{ 0%{transform:translate3d(0,0,0) scale(1);opacity:.4} 100%{transform:translate3d(4vw,-3vw,0) scale(1.12);opacity:.72} }
@keyframes bgNoise{ 0%{transform:translate3d(0,0,0)} 100%{transform:translate3d(8px,-8px,0)} }
@media (prefers-reduced-motion:reduce){
.site-lights .bg-light,.site-lights .bg-sweep,.site-lights .bg-flow,.site-lights .bg-glow1,.site-lights .bg-glow2,.site-lights .bg-noise{ animation:none }
}
/* リサイズ中は光レイヤーのみ退避（vwサイズ×blur×mix-blendの再ラスタライズが毎ステップ走り
カクつく実測 2026-07-29。土台.site-bg/.fv-photoは残す＝白フラッシュ無し。opacityフェードで
急な消灯に見せない。is-resizing は main.js がリサイズ静止200msで解除） */
.site-lights{ transition:opacity .2s ease }
html.is-resizing .site-lights{ opacity:0; transition:none } /* 退避は即時（ドラッグ中の再ラスタライズを1フレームでも早く止める）。復帰のみフェード */
html.is-resizing .site-lights span{ animation-play-state:paused }
@media (prefers-reduced-motion:reduce){ .site-lights{ transition:none } }
/* 固定背景を使うページのbodyは背景透明にして.site-bgを見せる */
body.has-site-bg{ background:transparent }
/* =====================================================================
下層FV背景写真（Figma各ページ bg-image 1440×900・青オーバーレイ焼き込み済み）
body直下（.site-bgの次）に を置き、
画像はページCSSで body[data-page=…] .fv-photo{ background-image:… } を指定。
z-index: .site-bg(-10)土台 より手前・.site-lights(-1)光アニメ より奥＝
光は写真の上でアニメーションする。下端はマスクで透過させ土台へ溶かす
（Figmaの bg-image 下端も濃紺に落ちるため継ぎ目レス）。
===================================================================== */
/* 2026-07-02: 光アニメFVページは背景写真も固定（fixed・ビューポート全面）。
.site-bg(-10)土台 → .fv-photo(-2)写真 → .site-lights(-1)光 の固定3層の上を
コンテンツがスクロールし、透明セクションでは写真＋光が見え続ける。 */
.fv-photo{ position:fixed; inset:0; z-index:-2; pointer-events:none;
background-position:center top; background-size:cover; background-repeat:no-repeat }
/* --cut：明色写真FV（recruit）。固定化の対象外＝ページ先頭900pxスクロール追従・直切り */
.fv-photo--cut{ position:absolute; inset:0 0 auto 0; height:900px }
@media (max-width:1023px){ .fv-photo--cut{ height:700px } }
@media (max-width:767px){ .fv-photo--cut{ height:560px } }
/* =====================================================================
テキストグラデ（要件7）：左→右に透明→#2B5EB4 で一度だけ流れ最終は全体#2B5EB4
FV内は読込時(.is-in付与をJSが即時)、下部はIOで該当エリア到達時。
===================================================================== */
.tgrad{ color:var(--c-accent) } /* JS無効/最終状態 */
/* background-clip:text は要素の箱の外には塗られない。かつて .subfv__title を text-box-trim で
cap高さまで詰めていたため、箱外へ張り出す和文グリフ上下端が透明化＝切れる不具合があり、
背景を縦300%に拡張して箱外へ塗る回避策を採っていた。しかしこの箱外描画はブラウザ実装依存で
（旧Chrome/Safariでは効かず切れる・母艦-LOG 2026-07-12）根治にならないため、.subfv__title 側で
text-box-trim を撤廃し「箱=line-heightでglyphを内包」する方式に一本化。よって背景の縦拡張は不要。
ここは横スイープのみ（縦は単色で見た目不変）。ページ別の tgrad 上書きは色(background-image)だけとし、
background-size を縦拡張する上書きを新設しないこと（＝ドリフト・偽PASSの再発源）。 */
.js .tgrad{
background-image:linear-gradient(90deg, var(--c-accent) 0%, var(--c-accent) 50%, rgba(43,94,180,0) 50%, rgba(43,94,180,0) 100%);
/* 幅220%：終端(position-x:0%)で要素右端がグラデ境界(色→透明)より手前に来て、最後の字の
右端まで塗る（200%だと要素右端＝境界で最終字の右端が透明化＝右端切れ）。sweep開始は透明維持。 */
background-size:220% 100%; background-position-x:100%; background-repeat:no-repeat;
-webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
}
.js .tgrad.is-in{ animation:tgradSweep 1.25s var(--motion-ease) forwards }
@keyframes tgradSweep{ from{ background-position-x:100% } to{ background-position-x:0% } }
@media (prefers-reduced-motion:reduce){
.js .tgrad{ background:none; color:var(--c-accent); -webkit-text-fill-color:var(--c-accent) }
.site-bg,.site-lights{ transform:none }
.js .tgrad.is-in{ animation:none }
}
/* on-dark（FV/濃紺・青背景）上の tgrad：要件7の最終色 #2b5eb4 は暗地で沈み視認不可のため、
FV内タイトルは淡スチール終端に（Figmaの淡色FVタイトル準拠・可読性確保）。透明→淡色で左→右に流れる。 */
.subfv .tgrad,.cta .tgrad,.on-dark-grad{ color:#cdd9f4 }
.js .subfv .tgrad,.js .cta .tgrad,.js .on-dark-grad{
background-image:linear-gradient(90deg,#cdd9f4 0%,#cdd9f4 50%, rgba(205,217,244,0) 50%, rgba(205,217,244,0) 100%);
}
@media (prefers-reduced-motion:reduce){
.js .subfv .tgrad,.js .cta .tgrad,.js .on-dark-grad{ background:none; color:#cdd9f4; -webkit-text-fill-color:#cdd9f4 }
}
/* ===== scroll reveal（JS有効時のみ初期非表示。上品な出現） ===== */
.js .reveal{ opacity:0; transform:translate3d(0,56px,0); filter:blur(10px);
transition:opacity 1.15s var(--motion-ease), transform 1.15s var(--motion-ease), filter 1.15s var(--motion-ease);
will-change:opacity,transform,filter }
.js .reveal.is-in{ opacity:1; transform:none; filter:blur(0) }
@media (prefers-reduced-motion:reduce){ .js .reveal{ opacity:1; transform:none; filter:none; transition:none } }
/* =====================================================================
Header（要件6：FVを超えたら slim・濃紺・固定で再出現。上下padding 10px）
既定は透過（濃紺FV上で白文字）。スクロールで .is-slim（濃紺地・細）に。
.site-header--solid は最初から濃紺（FVが明色のページ＝recruit/contact/privacy用）。
===================================================================== */
.site-header{ position:fixed; top:0; left:0; right:0; z-index:100; height:var(--header-h);
display:flex; align-items:center; color:var(--c-white); background:transparent;
transition:background .3s ease, height .3s ease, box-shadow .3s ease }
.site-header__bar{ width:100%; max-width:none; padding-inline:32px;
display:flex; align-items:center; justify-content:space-between; gap:24px }
@media (max-width:767px){ .site-header__bar{ padding-inline:20px } }
.site-header.is-slim{ height:auto; background:var(--c-main); box-shadow:0 2px 14px rgba(0,0,0,.18) }
.site-header.is-slim .site-header__bar{ padding-top:10px; padding-bottom:10px }
.site-header--solid{ position:sticky; background:var(--c-main) }
.site-header__logo{ display:flex; align-items:center; gap:8px; font-weight:700; flex-shrink:0 }
/* ロゴは縦横比固定（汎用 img{max-width:100%} で幅だけ縮み height:24px固定になると歪むため max-width:none） */
.site-header__logo img{ height:24px; width:auto; max-width:none; flex:0 0 auto; filter:brightness(0) invert(1) } /* 濃紺地上＝白ロゴ */
.gnav__list{ display:flex; gap:22px; font-size:14px }
.gnav__link{ display:inline-block; padding:8px 0; opacity:.92; white-space:nowrap }
.gnav__link:hover{ opacity:1 }
.gnav__link[aria-current="page"]{ opacity:1 } /* 視覚下線なし（aria-currentのみ／Figma準拠） */
.nav-toggle{ display:none }
.nav-overlay{ display:none }
/* ナビ切替は1199px以下でハンバーガー：7項目＋固定ロゴが収まるのは1200px以上のため
（ロゴを縦横比固定にしたので、収まらない幅は縮めずハンバーガーへ。1023→1199に引上げ 2026-07-13） */
@media (max-width:1199px){
.site-header{ height:60px; background:var(--c-main) } /* SPは常時濃紺地 */
.site-header.is-slim{ height:60px } /* モバイルはslimでも高さ固定（ドロワーtopと一致＝隙間防止） */
.site-header.is-slim .site-header__bar{ padding-top:8px; padding-bottom:8px }
.nav-toggle{ position:relative; display:inline-flex; width:44px; height:44px; flex:0 0 44px;
align-items:center; justify-content:center; padding:0; z-index:120 }
.nav-toggle span{ position:absolute; left:10px; width:24px; height:2px; background:var(--c-white);
transform-origin:center; transition:transform .3s ease, opacity .2s ease }
.nav-toggle span:nth-child(1){ top:14px }
.nav-toggle span:nth-child(2){ top:21px }
.nav-toggle span:nth-child(3){ top:28px }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg) }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0 }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg) }
/* 閉時は visibility:hidden（閉スライド完了後 .3s 遅延で隠す＝閉アニメは見せる。
閉時の画面外リンクをTab到達不可にする効果も兼ねる）。
1199px横断時に transform:none→translateX(100%) の閉スライドが0.3秒丸見えになる
フラッシュは、リサイズ連続中 is-resizing の transition:none で即時化して抑止（2026-07-29） */
.gnav{ position:fixed; inset:60px 0 auto auto; height:calc(100dvh - 60px); width:min(80vw,330px);
background:var(--c-main); transform:translateX(100%); visibility:hidden;
transition:transform .3s ease, visibility 0s .3s; padding:24px; overflow-y:auto; z-index:110 }
.gnav[data-open="true"]{ transform:translateX(0); visibility:visible; transition:transform .3s ease, visibility 0s }
html.is-resizing .gnav{ transition:none }
.gnav__list{ flex-direction:column; gap:2px; font-size:var(--fz-body) }
.gnav__link{ display:block; padding:14px 4px; border-bottom:1px solid rgba(255,255,255,.15) }
.nav-overlay[data-open="true"]{ display:block; position:fixed; inset:60px 0 0 0; background:rgba(0,0,0,.45); z-index:90 }
}
@media (max-width:767px){
.site-header{ height:var(--header-h) }
.site-header.is-slim{ height:var(--header-h) } /* slimでも固定（ドロワーtop=--header-hと一致） */
.site-header__bar{ padding-inline:16px }
.site-header.is-slim .site-header__bar{ padding-top:0; padding-bottom:0 }
.site-header__logo img{ height:18px }
.nav-toggle{ width:40px; height:40px; flex-basis:40px }
.nav-toggle span{ left:9px; width:22px }
.nav-toggle span:nth-child(1){ top:13px }
.nav-toggle span:nth-child(2){ top:19px }
.nav-toggle span:nth-child(3){ top:25px }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg) }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg) }
.gnav{ inset:var(--header-h) 0 auto auto; height:calc(100dvh - var(--header-h)); width:min(86vw,330px);
padding:20px }
.nav-overlay[data-open="true"]{ inset:var(--header-h) 0 0 0 }
}
@media (prefers-reduced-motion:reduce){ .site-header,.gnav,.nav-toggle span{ transition:none } }
/* =====================================================================
下層FV（subfv）：固定の青背景が透けるよう透明。白文字＋パンくず＋サブナビchip。
===================================================================== */
/* Figma正の下層FVリズム：パンくずy121 → タイトルy255（gap80）→ リードy568。
旧 align-items:flex-end はコンテンツ量でパンくず位置が変動（ページ毎にズレる）ため flex-start に統一。 */
.subfv{ position:relative; color:var(--c-white); padding-top:121px; padding-bottom:72px;
min-height:420px; display:flex; align-items:flex-start }
.subfv__inner{ width:100%; display:flex; flex-direction:column; gap:80px }
/* 短FV（contact/privacy/contact-finish＝Figma hero237）は従来リズムを維持 */
.subfv--solid{ padding-top:84px }
.subfv--solid .subfv__inner{ gap:40px }
/* subfv__title は text-box-trim を使わない（＝箱=line-heightで和文グリフを完全内包）。
理由：trimでcap高さまで詰めた箱に -webkit-background-clip:text（tgradグラデ文字）を掛けると、
箱外へ張り出す漢字・かなの上下端に背景が回らず透明化＝「上下が切れる」。Chrome/Safariで顕在化
（Firefox=trim未対応で不顕在）。background-size 縦拡張で箱外へ塗る旧回避策はブラウザ実装依存＝脆弱で
ページ別上書きにも打ち消される（母艦-LOG 2026-07-12 で単一ソース化）。
Figmaのcap詰め位置は、trimの代わりに対称の負margin（(lh1.25 − capBox0.733)/2 ≒ 0.258em）で復元。
負marginは描画に影響せず外形位置だけ戻すため、塗り漏れは起きない。eyebrowのgap40も維持される。 */
.subfv__title{ font-size:var(--fz-display-jp); line-height:var(--lh-display-jp); font-weight:700; letter-spacing:1px; width:fit-content;
margin-block:-0.258em }
.subfv__eyebrow{ font-family:var(--ff-en); font-size:var(--fz-display-en-s); font-weight:500; opacity:.95; margin-top:40px; text-transform:none;
text-box-trim:trim-both; text-box-edge:cap alphabetic }
.subfv__head{ transform:translate3d(0,var(--motion-y,0px),0); will-change:transform }
@media (max-width:1023px){ .subfv{ min-height:340px; padding-bottom:56px } .subfv__title{ font-size:52px } }
@media (max-width:767px){
.subfv{ min-height:auto; padding-top:var(--header-h); padding-bottom:48px } /* パンくずバーをヘッダー直下に */
.subfv__inner{ gap:36px } /* 2x余白の圧縮 */
.subfv__title{ font-size:27px }
.subfv__eyebrow{ font-size:14px; margin-top:16px }
}
@media (prefers-reduced-motion:reduce){ .subfv__head{ transform:none } }
/* パンくず＋セクションアンカー chip（About hero由来の共通版） */
.subnav{ display:flex; align-items:center; justify-content:space-between; gap:16px;
background:rgba(106,120,146,.20); padding:6px; border-radius:8px; backdrop-filter:blur(6px) }
.subnav__crumb{ display:flex; align-items:center; gap:10px; height:42px; padding:0 24px;
background:#f8f8f8; border-radius:8px; color:var(--c-main); font-size:var(--fz-caption); line-height:1.6; white-space:nowrap }
.subnav__crumb a{ text-decoration:underline }
.subnav__crumb .sep{ width:3px; height:3px; border-radius:50%; background:var(--c-main); opacity:.5 }
.subnav__anchors{ display:flex; gap:6px; flex-wrap:wrap }
.subnav__anchors a{ display:inline-flex; align-items:center; gap:6px; height:42px; padding:0 16px 0 22px;
background:#f8f8f8; border-radius:8px; color:var(--c-main); font-size:var(--fz-caption); white-space:nowrap }
.subnav__anchors a:hover{ background:#fff }
.subnav__anchors svg{ width:12px; height:12px; flex:0 0 12px }
.subnav__anchors a[href^="#"] svg{ transform:rotate(90deg) }
@media (max-width:1023px){ .subnav__anchors{ display:none } }
@media (max-width:767px){
/* SP：Figma 2534:6727 準拠。パンくず＝全幅#f8f8fバー、アンカー＝角丸8pxピルを横スクロール。 */
.subnav{
display:flex; flex-direction:column; align-items:stretch; gap:10px;
margin-inline: calc(-1 * var(--pad-x-sp)); /* ウインドウ横いっぱい（全幅ブリード） */
padding:0; background:transparent; border-radius:0; backdrop-filter:none;
overflow:visible;
}
/* パンくず：全幅の #f8f8f8 バー（h32・px24・10px・ホーム下線・3px dot） */
.subnav__crumb{
flex:0 0 auto; height:32px; padding:0 24px; gap:8px;
background:#f8f8f8; border-radius:0; font-size:10px;
}
/* アンカー：#f8f8f8 の角丸ピルを横スクロール（左右6px＝Figma Contents-nav px6） */
.subnav__anchors{
display:flex; flex:0 0 auto; flex-wrap:nowrap; gap:6px;
padding-inline:6px;
overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.subnav__anchors::-webkit-scrollbar{ display:none }
.subnav__anchors a{
flex:0 0 auto; height:32px; padding:0 12px 0 24px; gap:4px;
background:#f8f8f8; border-radius:8px; font-size:10px; white-space:nowrap;
}
.subnav__anchors svg{ width:14px; height:14px; flex:0 0 14px }
.subnav__anchors a[href^="#"] svg{ transform:rotate(90deg) } /* 下向き ⌄（Figma arrow-down） */
}
/* breadcrumb（汎用・本文上） */
.breadcrumb{ font-size:var(--fz-caption); color:var(--c-ink-60) }
.breadcrumb ol{ display:flex; flex-wrap:wrap; gap:8px; align-items:center }
.breadcrumb a:hover{ color:var(--c-accent) }
.breadcrumb li+li::before{ content:"›"; margin-right:8px; opacity:.6 }
/* =====================================================================
見出し（section-head）：和文タイトル(48px・上) → 英サブ(24px・下)
＝正しいFigma(マスター2414:5375配下)準拠。HTMLは eyebrow→title の順のまま
column-reverse で視覚的に title を上に。※section-headは about/technology/
corporate-activities のみ使用（校了ページは不使用＝影響なし）。
===================================================================== */
.section-head{ display:flex; flex-direction:column-reverse; gap:24px; margin-bottom:64px }
.section-head__eyebrow{ font-family:var(--ff-en); font-size:var(--fz-h4); font-weight:500;
line-height:1.25; letter-spacing:.24px; color:var(--c-main);
text-box-trim:trim-both; text-box-edge:cap alphabetic }
/* text-box-trim: Figmaの見出しinstance(h140)はキャップハイト詰め。未対応ブラウザは従来の行ボックス(数十px高くなるだけ) */
.section-head__title{ font-size:var(--fz-h1); font-weight:700; line-height:1.25; letter-spacing:1px; color:var(--c-main);
text-box-trim:trim-both; text-box-edge:cap alphabetic }
.section-head--lg .section-head__title{ font-size:var(--fz-h1) }
.section-head--on-dark .section-head__eyebrow,
.section-head--on-dark .section-head__title{ color:var(--c-white) }
.section-head--center{ align-items:center; text-align:center }
@media (max-width:767px){
.section-head{ gap:14px; margin-bottom:40px }
.section-head__eyebrow{ font-size:18px }
.section-head__title{ font-size:24px }
.section-head--lg .section-head__title{ font-size:24px } /* PCではbaseと同寸(fz-h1)。SPでbaseだけ縮み--lgが48pxで残っていた不揃いを是正 */
}
/* =====================================================================
ボタン
===================================================================== */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:56px;
padding:0 32px; font-size:var(--fz-body); font-weight:700; letter-spacing:1px; border-radius:0; /* Figma ButtonPrimaryは直角 */
transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease }
.btn:hover{ transform:translateY(-1px) }
.btn__arrow{ width:18px; height:12px; flex:0 0 18px }
.btn__chevron{ width:14px; height:14px; flex:0 0 14px } /* Figma Button Primary（テキスト左＋右端シェブロン変種） */
.btn--primary{ background:var(--c-main); color:var(--c-white) }
.btn--primary:hover{ background:var(--c-accent) }
.btn--accent{ background:var(--c-accent); color:var(--c-white) }
.btn--accent:hover{ background:var(--c-main) }
.btn--ghost{ background:transparent; color:var(--c-main); border:1px solid var(--c-main) }
.btn--ghost:hover{ background:var(--c-main); color:var(--c-white) }
.btn--on-dark.btn--ghost{ color:var(--c-white); border-color:#7d8eac } /* Figma Line色（暗地ボタン枠） */
.btn--on-dark.btn--ghost:hover{ background:var(--c-white); color:var(--c-main) }
.btn--block{ width:100% }
/* 青グラデボタン（Figma「ボタン青グラデ」）: 横長・テキスト左/矢印右の space-between */
.btn--grad{ background:linear-gradient(180deg,#2b5eb4 0%,#0851a2 100%); color:var(--c-white);
border-radius:8px; padding:22px 28px 22px 32px; min-height:0; font-size:var(--fz-lead); font-weight:700;
justify-content:space-between; gap:24px }
.btn--grad:hover{ background:linear-gradient(180deg,#3a6fc8 0%,#0a5fbd 100%) }
@media (max-width:767px){ .btn{ width:100%; min-height:48px; padding:12px 20px } .btn--grad{ padding:12px 20px } }
/* =====================================================================
汎用カード / グリッド
===================================================================== */
.grid{ display:grid; gap:32px }
.grid--2{ grid-template-columns:repeat(2,minmax(0,1fr)) }
.grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)) }
.grid--4{ grid-template-columns:repeat(4,minmax(0,1fr)) }
@media (max-width:1023px){ .grid--3,.grid--4{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:767px){ .grid--2,.grid--3,.grid--4{ grid-template-columns:1fr } }
.card{ background:var(--c-white); border-radius:12px; overflow:hidden; min-width:0;
box-shadow:0 8px 30px rgba(16,32,59,.06) }
.card__media{ aspect-ratio:16/10; overflow:hidden }
.card__media img{ width:100%; height:100%; object-fit:cover }
.card__body{ padding:24px }
.card__title{ font-size:var(--fz-lead); font-weight:700; line-height:1.5 }
.card__text{ font-size:var(--fz-meta); color:var(--c-ink-60); margin-top:10px }
/* =====================================================================
NEWS リスト（お知らせ：日付＋カテゴリ＋タイトル）
===================================================================== */
.news-list{ display:flex; flex-direction:column }
.news-item{ display:grid; grid-template-columns:120px 120px minmax(0,1fr); gap:24px; align-items:center;
padding:24px 8px; border-bottom:1px solid var(--c-ink-08) }
.news-item:first-child{ border-top:1px solid var(--c-ink-08) }
.news-item__date{ font-size:var(--fz-meta); color:var(--c-ink-60); font-family:var(--ff-en); letter-spacing:.5px }
.news-item__cat{ justify-self:start; font-size:var(--fz-caption); font-weight:700; color:var(--c-accent);
border:1px solid var(--c-accent); border-radius:999px; padding:4px 14px }
.news-item__title{ font-size:var(--fz-body); line-height:1.6; min-width:0 }
.news-item:hover .news-item__title{ color:var(--c-accent) }
@media (max-width:767px){
.news-item{ grid-template-columns:auto auto; gap:8px 16px; padding:18px 4px }
.news-item__title{ grid-column:1 / -1 }
}
/* =====================================================================
定義テーブル（会社概要等）
===================================================================== */
.def-table-wrap{ width:100% }
.def-table{ width:100%; table-layout:fixed; border-collapse:collapse }
.def-table th,.def-table td{ text-align:left; vertical-align:top; padding:20px 0;
border-bottom:1px solid var(--c-line); font-weight:400 }
.def-table th{ width:211px; font-weight:700; color:var(--c-main) }
.def-table td{ font-size:var(--fz-body); line-height:var(--lh-body) }
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch }
.table-scroll__hint{ display:none; font-size:var(--fz-caption); color:var(--c-line); margin-bottom:8px }
@media (max-width:767px){
.table-scroll__hint{ display:block; text-align:center }
.js .table-scroll__hint{ display:none } /* JS有効時はScrollHintが視覚ヒントを代替（noscript時のみ静的表示） */
.def-table{ min-width:480px } .def-table th{ width:100px }
}
/* =====================================================================
CTA 帯（LET'S TALK / お問い合わせ誘導）
===================================================================== */
.cta{ background:var(--c-main); color:var(--c-white); text-align:center }
.cta__inner{ padding:80px 0; display:flex; flex-direction:column; align-items:center; gap:28px }
.cta__en{ font-family:var(--ff-en); font-size:var(--fz-display-en); line-height:1; font-weight:600 }
.cta__lead{ font-size:var(--fz-lead) }
@media (max-width:767px){ .cta__inner{ padding:56px 0 } .cta__en{ font-size:40px } }
/* =====================================================================
Footer（白地・大きいEN導線＋住所2拠点＋コピーライト）
===================================================================== */
/* Figma実体(node 2414:11243): bg白・padding 80/32・gap80。EN導線64px Expose(uppercase) 左／JP16px 右、
logo+2拠点(地図はpin付き別行)、罫線、© / プライバシー。 */
.site-footer{ position:relative; z-index:1; background:var(--c-white); color:var(--c-main) }
.site-footer__inner{ max-width:1440px; margin-inline:auto; padding:80px 32px;
display:flex; flex-direction:column; gap:48px }
/* 大EN+JP 7導線（スクショ突合：行間は詰め＝line-height0.8・行間gap0で pitch≈52px） */
.site-footer__nav{ display:flex; flex-direction:column; gap:0 }
.site-footer__navrow{ display:flex; justify-content:space-between; align-items:flex-end; gap:32px }
.site-footer__navrow .en{ font-family:var(--ff-en); font-size:64px; font-weight:400; line-height:.8;
letter-spacing:1px; text-transform:uppercase; color:var(--c-main); min-width:0 }
.site-footer__navrow .jp{ font-size:16px; line-height:1.8; letter-spacing:1px; white-space:nowrap; flex:0 0 auto }
/* ホバー：NEWS同様のフェード */
.site-footer__navrow{ transition:opacity .25s ease }
.site-footer__navrow .en,.site-footer__navrow .jp{ transition:color .25s ease }
.site-footer__navrow:hover{ opacity:.85 }
.site-footer__navrow:hover .en,.site-footer__navrow:hover .jp{ color:var(--c-accent) }
@media (prefers-reduced-motion:reduce){ .site-footer__navrow,.site-footer__navrow .en,.site-footer__navrow .jp{ transition:none } }
/* logo + 2拠点 */
.site-footer__info{ display:flex; flex-wrap:wrap; gap:10px 150px; align-items:flex-start }
.site-footer__logo img{ height:20px; width:auto }
.site-footer__office{ display:flex; flex-direction:column; gap:8px }
.site-footer__office h3{ font-size:16px; font-weight:700; line-height:1.8 }
.site-footer__office .addr,.site-footer__office .tel{ font-size:14px; line-height:1.8; color:var(--c-main) }
.site-footer__map{ display:inline-flex; align-items:center; gap:8px; padding-top:8px; font-size:14px; line-height:1.8 }
.site-footer__map svg{ width:12px; height:12px; flex:0 0 12px }
.site-footer__map:hover{ color:var(--c-accent) }
/* 罫線 + コピーライト */
.site-footer__bottom{ display:flex; flex-direction:column; gap:20px }
.site-footer__line{ border:0; border-top:1px solid var(--c-line); margin:0 }
/* Figma Frame 1000005874: Caption 12px Noto Sans JP・色 #000・行高1.6 */
.site-footer__copy{ display:flex; justify-content:space-between; align-items:center; gap:16px;
font-family:var(--ff-jp); font-size:12px; line-height:1.6; color:#000 }
.site-footer__copy small{ font-size:12px; font-weight:400; line-height:1.6 } /* の縮小をキャンセル */
.site-footer__copy a{ color:#000 }
.site-footer__copy a:hover{ color:var(--c-accent) }
@media (max-width:1023px){
.site-footer__navrow .en{ font-size:48px }
.site-footer__info{ gap:32px 80px }
}
@media (max-width:767px){
.site-footer__inner{ padding:56px 20px; gap:48px }
/* SP：横並び(en|jp)をやめて block（改行）演出＝en の下に jp を縦積み、行ごとに間隔 */
.site-footer__nav{ gap:24px }
.site-footer__navrow{ display:block }
.site-footer__navrow .en{ display:block; font-size:30px; line-height:1 }
.site-footer__navrow .jp{ display:block; font-size:12px; margin-top:4px }
.site-footer__info{ flex-direction:column; gap:28px }
.site-footer__office,
.site-footer__office h3,
.site-footer__office .addr,
.site-footer__office .tel,
.site-footer__map{ font-size:12px }
.site-footer__office{ gap:4px }
.site-footer__copy{ flex-direction:column; align-items:flex-start; gap:8px; font-size:10px }
.site-footer__copy small{ font-size:10px }
}
/* 下層FVの濃紺ソリッド版（青アブストラクト固定背景を使わないページ：recruit/contact/contact-finish/privacy） */
.subfv--solid{ background:var(--c-main) }