@charset "UTF-8";
/* =========================================================================
   OFFICE ABLE — D案 GRADIENT（U.S Inc.型）共通スタイル
   画像参照は必ず ../../assets/ から（このCSSは us/css/ にあるため）
   ========================================================================= */

:root{
  --blue:#1557DA; --blue-d:#0b3ea8; --blue-l:#7aa5ff; --blue-p:#e8f0ff;
  /* 2026-08-04 変更（案1：寒色ブラック）
     ⚠️ ニュートラルな黒（#0d0f14）は「ブラウザ既定のまま」に見え、
        ブランド青と同じ画面に置くと文字だけが体系から浮く。
        青へわずかに寄せた黒に差し替え、グレーも同じ色相に揃えた。
        --ink は文字だけでなく pill・チップ・ヒーローのバナーの地色でもあるので、
        黒い面もまとめて同じ寒色に乗る（CTAの #0a0d18 とも family が揃う）。
        グレーは同時に少し暗くしてある＝コントラスト比も上がる */
  --ink:#101625; --gray:#5d6675; --gray-l:#8b95a6; --line:#e3e5e9;
  --bg:#eef0f3; --panel:#f2f4f7; --white:#fff;
  --line-g:#058542;
  /* U.S Inc.実測: 生きテキストはInter(400/500/600)、ヒーローのロックアップだけ
     アウトライン化した幾何学サンセリフ。後者に最も近い入手可能書体がPoppins */
  --ff-en:'Inter',sans-serif; --ff-jp:'Noto Sans JP',sans-serif;
  --ff-dp:'Poppins','Inter',sans-serif;
  --ease:cubic-bezier(.4,.4,0,1);   /* U.Sが全トランジションで使うイージング */
  --pad:clamp(22px,5vw,90px);
  /* U.S Inc.実測（2026-08-04・DevToolsで計測）
     ・カード= border-radius:16px／その中の画像= 8px
     ・ページ最外周の大パネル= 40px
     ・全要素が transition:all .3s cubic-bezier(.4,.4,0,1) の一択 */
  --r:40px;            /* 大パネル */
  --r-card:16px;       /* カード */
  --r-img:8px;         /* カード内の画像 */
  --gut:clamp(10px,1.6vw,26px);   /* パネルとページ端の隙間 */
  --dur:.3s;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{font-family:var(--ff-jp);color:var(--ink);background:var(--bg);line-height:1.9;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;}
/* ⚠️ height:auto を必ず入れる（2026-08-05 追加）。
   <img width="1081" height="992"> の height 属性はプレゼンテーション属性として
   height:992px に効く。CSS側で aspect-ratio を指定しても、高さが auto でない限り
   比率は適用されない（aspect-ratio は "auto の方の辺" を埋める仕様）。
   実害：代表挨拶の写真が 439×992 の縦長枠になり、object-fit:cover が
   顔だけを極端に拡大していた。height:auto があればこの種の事故は起きない。 */
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
::selection{background:var(--blue);color:#fff;}

/* ============ 共通パーツ ============ */
/* U.S実測: Inter 500 / 32px / letter-spacing normal / line-height 1 */
.sec-label{font-family:var(--ff-en);font-weight:500;font-size:clamp(25px,2.3vw,32px);
  letter-spacing:normal;line-height:1;}
.lead{font-weight:700;font-size:clamp(16px,1.75vw,26px);line-height:2.1;letter-spacing:.09em;}
/* リード1文につき1箇所だけブランド色を置く（案1）。
   視線の落ちどころを作るのが目的なので、2箇所以上は入れないこと */
.lead em{font-style:normal;font-weight:900;color:var(--blue);}
/* リードと英文の間に置く本文。リードほど大きくせず、lead-en よりは濃く読ませる。
   1行の長さが伸びると読みづらくなるので幅は44em前後で止める */
.lead-body{max-width:44em;margin-top:clamp(24px,3vw,38px);
  font-size:clamp(13.5px,1.15vw,16px);line-height:2.25;letter-spacing:.05em;color:#3d434f;}
.lead-body p+p{margin-top:1.5em;}
.lead-body p{text-wrap:pretty;}
.lead-body em{font-style:normal;font-weight:700;color:var(--ink);}
@media(max-width:640px){
  /* リードの<br>はPCの改行位置を作るためのもの。幅が足りない画面では
     強制改行と自然折返しが混ざってガタつくので、素直に流す */
  .about .lead br{display:none;}
  .lead-body{margin-top:22px;}
}
.lead-en{font-family:var(--ff-en);font-weight:400;font-size:clamp(12px,1vw,14px);
  line-height:2;letter-spacing:.02em;color:var(--gray-l);margin-top:20px;}
.sub-jp{font-weight:700;font-size:13.5px;letter-spacing:.1em;color:var(--gray);margin-top:12px;}

.pill{display:inline-flex;align-items:center;gap:20px;background:var(--ink);color:#fff;
  font-family:var(--ff-en);font-weight:600;font-size:15px;letter-spacing:.02em;
  padding:14px 14px 14px 32px;border-radius:999px;
  transition:background .3s,color .3s;white-space:nowrap;}
.pill i{width:34px;height:34px;border-radius:50%;background:#fff;display:grid;place-items:center;
  font-style:normal;flex:none;transition:transform .35s cubic-bezier(.22,1,.36,1);}
.pill i svg{width:13px;height:13px;stroke:var(--ink);stroke-width:2;fill:none;stroke-linecap:round;}
.pill:hover{background:var(--blue);}
.pill:hover i{transform:translate(3px,-3px);}
.pill.ghost{background:#fff;color:var(--ink);box-shadow:0 2px 20px rgba(13,15,20,.08);}
.pill.ghost i{background:var(--ink);} .pill.ghost i svg{stroke:#fff;}
.pill.ghost:hover{background:var(--blue);color:#fff;}
.pill.line{background:var(--line-g);color:#fff;} .pill.line i{background:#fff;}
.pill.line i svg{stroke:var(--line-g);}
.pill.line:hover{background:#04703a;}

/* ============ スクロール出現（トリガー型リビール） ============
   U.S実測は「不透明度だけ0.3s」だったが、2026-08-09 ユーザー指示で
   Runokテンプレート風（文字と写真がスクロールで立ち上がる）に変更。
   スクラブ（進行度連動）ではなく IntersectionObserver で一度だけ再生する。
   ・.rv  … フェード＋上昇。本文・カード等の汎用（従来クラスをそのまま流用）
   ・.rl  … 行マスク。<br>区切りを1行として、下から刷り上がる（リード・CTA見出し）
   ・.rch … 文字マスク。.sec-label の英単語を1文字ずつ立ち上げる
   ・.rvp … 写真のワイプ＋ズームアウト（Runokの .reveal 相当をclip-pathで再現）
   .rl/.rch/.rvp はJSがラップ／付与するので、JSが動かない環境では素のまま見える。
   ⚠️ transformは使わない。カードのhoverやパララックスとの衝突を避けるため
      個別プロパティ（translate/scale）とclip-pathだけで動かす */
.rv{opacity:0;translate:0 30px;
  transition:opacity .7s var(--ease),translate .9s cubic-bezier(.22,1,.36,1);}
.rv.on{opacity:1;translate:0 0;}

/* 行マスク。inline-block+overflow:hiddenはベースラインが箱の下端に落ちるので
   vertical-alignで戻す。padding/margin相殺はヒーロー（.fv h1 .ln）と同じ流儀で
   ディセンダ（y,g等）の欠けを防ぐ */
.rl{display:inline-block;overflow:hidden;vertical-align:bottom;
  padding-bottom:.1em;margin-bottom:-.1em;}
.rl>.rl-i{display:inline-block;translate:0 115%;
  transition:translate .85s cubic-bezier(.22,1,.36,1) calc(var(--i,0)*.14s);}
.on .rl>.rl-i,.rl.on>.rl-i{translate:0 0;}

/* 文字マスク（.sec-labelの英単語用）。外側の.rlが1本のマスクになる */
.rch{display:inline-block;translate:0 115%;white-space:pre;
  transition:translate .7s cubic-bezier(.22,1,.36,1) calc(var(--i,0)*.05s);}
.on .rch{translate:0 0;}

/* 写真ワイプ。コンテナを左→右に開きつつ、中の写真をズームアウトで迎える。
   scaleは個別プロパティなので、hover(transform)やview()パララックスと共存できる */
.rvp{clip-path:inset(0 100% 0 0);
  transition:clip-path 1s cubic-bezier(.22,1,.36,1) calc(var(--i,0)*.1s);}
.rvp img{scale:1.16;transition:scale 1.25s cubic-bezier(.22,1,.36,1) calc(var(--i,0)*.1s);}
.rvp.on{clip-path:inset(0 0 0 0);}
.rvp.on img{scale:1;}

/* ============ 固定3DCGステージ ============
   U.S Inc.実測: 画面いっぱいの position:fixed レイヤー（z-index:-3）を敷き、
   ページを最後までスクロールしても同じ図形が残り続ける構造になっている。
   こちらは同じ位置に星型八面体（Adobe Stock #369511142）をリアルタイム描画する。 */
.stage{position:fixed;inset:0;z-index:0;pointer-events:none;}
.stage canvas{display:block;width:100%;height:100%;}
/* 固定ステージを敷くページは、地色を半透明にして図形を透かす。
   完全な透明にすると文字が図形の上に乗って読めなくなるので、
   文字量の多いセクションほど地色を濃くする（＝図形は薄く沈む） */
body.stage-bg{background:linear-gradient(180deg,#fbfcfd 0%,#eef1f5 42%,#e9edf3 100%);}
.stage-bg .fv{background:transparent;z-index:2;}          /* ヒーローだけ図形を素で見せる */
.stage-bg .about{background:rgba(255,255,255,.55);}
/* 縦長の画面では図形が本文の真後ろに来る。本文が増えたABOUTだけは
   地色を上げて、灰色の補足文が図形に沈まないようにする */
@media(max-width:900px){.stage-bg .about{background:rgba(255,255,255,.86);}}
.stage-bg #service{background:rgba(244,246,249,.58);}
.stage-bg .sec.white{background:rgba(255,255,255,.78);}
.stage-bg .sec.gray{background:linear-gradient(180deg,rgba(244,246,249,.70),rgba(238,240,243,.80));}
.stage-bg .cta{background:linear-gradient(120deg,rgba(11,62,168,.84),rgba(21,87,218,.80) 46%,rgba(79,136,255,.78));}
.stage-bg .foot{background:transparent;}
.stage-bg .foot-box{background:rgba(17,19,24,.93);}
.stage-bg main{position:relative;z-index:2;}

/* 3DCGを描くキャンバスの器 */
.ribbon{position:absolute;pointer-events:none;z-index:0;}
.ribbon svg,.ribbon canvas{display:block;width:100%;height:100%;}
/* 本文が乗る左側は必ず明るく保つ（グラデ面に文字が埋もれるのを防ぐ） */
.sec>.ribbon::after{content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(244,246,249,.94) 0%,rgba(244,246,249,.72) 30%,
    rgba(244,246,249,.22) 52%,transparent 68%);}

.wrap{max-width:1240px;margin:0 auto;}
.sec{position:relative;z-index:2;padding:clamp(80px,10vw,160px) var(--pad);}
.sec.tight{padding-top:clamp(50px,6vw,90px);}
.sec.gray{background:linear-gradient(180deg,#f4f6f8,var(--bg));}
.sec.white{background:var(--white);}

/* ============ ヘッダー ============
   U.S Inc.実測: ヘッダーは position:fixed / background:transparent /
   mix-blend-mode:exclusion。地の明暗に応じて文字色が自動で反転するので、
   白背景では黒・黒パネルでは白・写真の上では反転色になる。
   スクロールしても白いバーは出さない（＝ずっと素のまま重なる）。 */
header{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;
  padding:26px var(--pad);color:#fff;mix-blend-mode:exclusion;
  transition:padding var(--dur) var(--ease);}
header.scrolled{padding:16px var(--pad);}
.logo{display:flex;align-items:center;gap:11px;font-family:var(--ff-en);font-weight:800;
  font-size:20px;letter-spacing:.01em;}
.logo svg{width:27px;height:24px;flex:none;}
/* ヘッダーのロックアップは「サイン」案（2026-08-20 ユーザー採用）：
   ナビの小ラベルと同じ Martian Mono に落とし、ヘッダー全体を一つの声に統一する。
   マーク（SVG）は不変。フッター（.foot .logo / .kf-logo）は対象外。
   書体はホーム外でも使うため @font-face を本ファイル末尾に持つ（trionn.css と同内容） */
header .logo{transition:opacity var(--dur) var(--ease);
  font-family:'Martian Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  font-weight:400;font-size:11px;letter-spacing:.3em;gap:12px;}
header .logo svg{width:23px;height:20px;}
header .logo:hover{opacity:.5;}
/* exclusionの下では有彩色が地の色で転ぶので、ヘッダーのロゴは currentColor の
   シルエット1色に落とす（3Dロゴの2D平面版。デイ=黒/ナイト=白は exclusion と
   ダーク時の color:#fff がそのまま作る） */
header .logo svg *{fill:currentColor;}
/* メニューを開いている間は下地が白い面と分かっているので、反転をやめて素の黒で置く。
   （メニュー背景のグラデが青いため、exclusionのままだとロゴが橙に転ぶ） */
body.menu-open header{mix-blend-mode:normal;color:var(--ink);}
/* 同じ理由で、ヘッダーの真下がブランド青のパネル（CTA・数字バンド・フッター）に
   なった瞬間だけ反転を切って白に固定する。exclusionのままだと白×青＝金色に転ぶ。
   U.S Inc.が全面モノクロだからこの問題を持たない、という差分への対処。
   判定はJS側（.sec.dark / .cta / .foot-box がヘッダー高さを跨いだか）で行う。 */
body.nav-on-dark header{mix-blend-mode:normal;color:#fff;}
/* ---- トップのヒーロー上だけ exclusion を切る ----
   exclusion は「地の明度が中間」だと文字と地の明度が近づいて消える
   （白×地b の結果は 1-b なので、b≒0.5 で地と同じ明るさになる）。
   ヒーローの虹グラデはまさに中間色の塊で、実測すると About〜News が
   橙に転んで読めなかった。ここだけ素の色に戻し、上端のスクリムと
   ごく薄いハローで地から浮かせる。判定はJS側（.fv がヘッダー行に
   掛かっているか）。他のセクションは従来どおり exclusion のまま。 */
body.nav-on-fv header{mix-blend-mode:normal;color:var(--ink);
  text-shadow:0 0 12px rgba(255,255,255,.85);}
body.nav-on-fv header::before{content:"";position:absolute;left:0;right:0;top:0;
  height:112px;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(255,255,255,.70) 0%,
    rgba(255,255,255,.44) 45%,rgba(255,255,255,0) 100%);}
:root[data-theme="dark"] body.nav-on-fv header{color:#fff;
  text-shadow:0 0 12px rgba(0,0,0,.85);}
:root[data-theme="dark"] body.nav-on-fv header::before{
  background:linear-gradient(to bottom,rgba(5,5,5,.70) 0%,
    rgba(5,5,5,.44) 45%,rgba(5,5,5,0) 100%);}
/* 全画面メニューは自前の白面を持つので、スクリムが帯として浮く */
body.menu-open header::before{display:none;}
/* ヒーロー左下のNews見出しは、スクロールするとヘッダーのロゴに重なる。
   ヘッダー行に近づいたら消す（JSが .fv-away を付ける）。
   ※ 下の .fv.ready .fv-news{opacity:1} に負けるので詳細度を上げてある */
.fv-news{transition:opacity .3s var(--ease);}
.fv .fv-news.fv-away,
.fv.ready .fv-news.fv-away{opacity:0;pointer-events:none;}
header nav{margin-left:auto;display:flex;gap:clamp(16px,2.3vw,36px);
  font-family:var(--ff-en);font-weight:600;font-size:14px;}
/* U.S実測のホバー: EN と JP を重ねて置き、両方を上へ16px送りながら色を入れ替える。
   （実サイトは translate 0→8px / 8px→-8px ＋ color⇄transparent の2枚重ね） */
header nav a{position:relative;display:grid;height:21px;overflow:hidden;}
header nav a>span{grid-area:1/1;display:block;white-space:nowrap;
  transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease);}
header nav a .jp{font-family:var(--ff-jp);font-weight:700;font-size:11.5px;letter-spacing:.06em;
  line-height:21px;transform:translateY(100%);opacity:0;}
header nav a:hover .en{transform:translateY(-100%);opacity:0;}
header nav a:hover .jp{transform:translateY(0);opacity:1;}
header nav a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1.5px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .4s cubic-bezier(.22,1,.36,1);}
header nav a.cur::after{transform:scaleX(1);transform-origin:left;}
/* メニューを開いたらヘッダーごと前面へ（headerがz-index:100で重なり文脈を作るため
   .burger側にz-indexを付けても持ち上がらない） */
body.menu-open header{z-index:120;}
.burger{margin-left:clamp(16px,2.3vw,36px);width:30px;display:grid;gap:6px;padding:8px 0;}
.burger span{height:1.5px;background:currentColor;display:block;transition:transform .4s,opacity .3s;}
body.menu-open .burger span:nth-child(1){transform:translateY(3.75px) rotate(11deg);}
body.menu-open .burger span:nth-child(2){transform:translateY(-3.75px) rotate(-11deg);}

/* モバイル／全画面メニュー */
.mmenu{position:fixed;inset:0;z-index:110;background:rgba(255,255,255,.97);
  backdrop-filter:blur(20px);display:flex;flex-direction:column;
  justify-content:center;justify-content:safe center;  /* 収まらない時に上へはみ出さない */
  padding:120px var(--pad) 64px;overflow-y:auto;
  opacity:0;visibility:hidden;transition:opacity .45s,visibility .45s;}
body.menu-open .mmenu{opacity:1;visibility:visible;}
.mmenu .ribbon{inset:0;}
.mmenu nav{position:relative;z-index:2;display:grid;gap:clamp(8px,1.2vw,18px);flex:none;}
.mmenu nav a{font-family:var(--ff-en);font-weight:600;font-size:clamp(26px,4.2vw,46px);
  line-height:1.05;letter-spacing:-.02em;opacity:0;transform:translateY(20px);
  transition:opacity .5s,transform .5s,color .3s;}
body.menu-open .mmenu nav a{opacity:1;transform:none;}
.mmenu nav a:hover{color:var(--blue);}
.mmenu nav a small{display:block;font-family:var(--ff-jp);font-weight:700;font-size:11.5px;
  letter-spacing:.14em;color:var(--gray);margin-top:4px;}
.mmenu .mm-act{position:relative;z-index:2;display:flex;gap:12px;flex-wrap:wrap;margin-top:44px;}

/* ============ FV（トップ） ============
   U.S実測: ヒーローはstickyでもパララックスでもない。ブランド色のグラデが全面に走り、
   その上に黒のロックアップが上寄せで置かれ、左下にNews1件。スクロールは普通に流れる。 */
.fv{position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:flex-start;
  padding:clamp(120px,15vh,168px) var(--pad) 130px;overflow:hidden;
  background:linear-gradient(160deg,#fbfcfd 0%,#eceff3 55%,#e6eaf0 100%);}
.fv .ribbon{left:-6%;right:-6%;top:-8%;bottom:-8%;}
/* 左側は明るく保って黒のロックアップを読ませる（U.Sは地色が黄なので同じ関係） */
.fv .ribbon::after{content:'';position:absolute;inset:0;
  background:linear-gradient(102deg,rgba(250,251,253,.90) 0%,rgba(250,251,253,.62) 26%,
    rgba(250,251,253,.16) 46%,transparent 60%);}
.fv-copy{position:relative;z-index:2;max-width:min(1180px,92vw);}
.fv h1{font-family:var(--ff-dp);font-weight:500;line-height:1.06;letter-spacing:-.015em;
  font-size:min(clamp(40px,7.8vw,120px),17vh);}
/* ロックアップの出現も行ごとの短いフェード（U.Sの0.3s基調に合わせる） */
.fv h1 .ln{display:block;}
.fv h1 .ln>span{display:block;opacity:0;transition:opacity .5s var(--ease);}
.fv.ready h1 .ln>span{opacity:1;}
.fv h1 .ln:nth-child(2)>span{transition-delay:.1s;}
.fv h1 .ln:nth-child(3)>span{transition-delay:.2s;}
.fv .jp{display:block;font-family:var(--ff-jp);line-height:1.9;
  font-weight:700;font-size:clamp(14px,1.55vw,22px);letter-spacing:.12em;margin-top:30px;
  opacity:0;transition:opacity .5s var(--ease) .45s;}
.fv.ready .jp{opacity:1;}
.fv .jp em{font-style:normal;color:var(--blue);}
.fv-news{position:absolute;left:var(--pad);bottom:52px;z-index:2;display:flex;align-items:center;
  gap:18px;font-size:13.5px;opacity:0;transition:opacity .5s var(--ease) .62s;
  max-width:calc(100% - var(--pad)*2);}
.fv.ready .fv-news{opacity:1;}
.fv-news .tagn{font-family:var(--ff-en);font-weight:600;font-size:12px;letter-spacing:.08em;
  background:var(--ink);color:#fff;border-radius:999px;padding:6px 18px;flex:none;}
.fv-news time{font-family:var(--ff-en);color:var(--gray);flex:none;}
.fv-news a{border-bottom:1px solid #c9ced6;padding-bottom:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.fv-scroll{position:absolute;right:var(--pad);bottom:44px;z-index:2;writing-mode:vertical-rl;
  font-family:var(--ff-en);font-weight:600;font-size:11px;letter-spacing:.22em;color:var(--gray);}
.fv-scroll::after{content:'';display:block;width:1px;height:54px;margin:14px auto 0;
  background:linear-gradient(var(--gray),transparent);}
/* スマホのヒーロー下端：NEWS行が右下のオーブ（58px＋余白）に潜り込まないよう、
   下端へ寄せたうえで右側を空けて省略記号で切る。日付・タグも一回り絞る */
@media(max-width:900px){
  .fv-news{bottom:18px;gap:10px;font-size:12.5px;
    max-width:calc(100% - var(--pad) - 84px);}
  .fv-news .tagn{font-size:10px;padding:5px 12px;}
}

main,footer{position:relative;}

/* ============ 下層ページのヒーロー（U.S型の角丸パネル） ============ */
.page-hero{position:relative;z-index:2;padding:clamp(96px,11vw,140px) var(--pad) 0;}
.ph-panel{position:relative;overflow:hidden;border-radius:var(--r);
  background:linear-gradient(120deg,#f6f8fa,var(--panel));
  min-height:clamp(200px,26vw,300px);display:flex;align-items:center;
  padding:clamp(28px,4vw,56px) clamp(24px,4vw,60px);}
.ph-panel .ribbon{left:26%;right:-8%;top:-30%;bottom:-30%;}
.ph-in{position:relative;z-index:2;}
.ph-in h1{font-family:var(--ff-dp);font-weight:500;line-height:1;letter-spacing:-.015em;
  font-size:clamp(36px,6.2vw,90px);}
.ph-in .jp{font-weight:700;font-size:clamp(12px,1.2vw,15px);letter-spacing:.16em;margin-top:12px;}
/* パンくずは見出しの「上」。見出しの下に置くと、H1と次のセクションの間に
   宙に浮いた1行が挟まり、まとまりが切れて見える */
.crumb{display:flex;gap:10px;align-items:center;font-family:var(--ff-en);font-size:12px;
  color:var(--gray);margin:0 0 clamp(16px,1.8vw,24px);padding:0 4px;}
.crumb a:hover{color:var(--blue);}

/* ============ ABOUTブロック（トップ） ============
   U.Sのセクションは border-radius:0 で角丸の被せをしない。素直に積む。 */
.about{position:relative;z-index:2;background:var(--white);
  padding:clamp(84px,11vw,170px) var(--pad);overflow:hidden;}
/* 透かしとして覗かせるだけなので、面はごく淡く落とす */
.about .ribbon{left:12%;right:-10%;top:-30%;bottom:-30%;opacity:.24;}
/* U.S方式の透かし：ロゴを白い面から「型抜き」し、穴からグラデを覗かせる。
   面自体を95%不透明にしておくと、全体にもグラデがうっすら乗る（U.Sと同じ .95） */
.about .veil{position:absolute;inset:0;width:100%;height:100%;z-index:1;
  opacity:.95;pointer-events:none;}
.about-in{position:relative;z-index:2;max-width:960px;}
.about .lead{margin-top:clamp(36px,5vw,66px);}
.about .pill{margin-top:38px;}
/* 英文は行が長く、右の3D図形に掛かると灰色文字が沈む。本文と同じ幅で折り返す */
.about .lead-en{margin-top:26px;max-width:44em;}

/* ============ 事業カード ============ */
.cards{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,1.7vw,26px);margin-top:clamp(44px,6vw,84px);}
.card{background:#fff;border-radius:var(--r-card);overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 24px 60px rgba(13,25,60,.09);
  transition:transform .55s cubic-bezier(.22,1,.36,1),box-shadow .55s;}
.card:hover{transform:translateY(-8px);box-shadow:0 34px 76px rgba(13,25,60,.14);}
.card .hd{display:flex;align-items:flex-start;gap:16px;padding:32px 28px 0;}
.card .no{font-family:var(--ff-en);font-weight:600;font-size:13px;color:var(--gray);padding-top:9px;}
.card .ttl{font-family:var(--ff-en);font-weight:600;font-size:clamp(20px,2vw,30px);
  letter-spacing:-.01em;line-height:1.2;}
.card .ttl small{display:block;font-family:var(--ff-jp);font-weight:700;font-size:13px;
  letter-spacing:.08em;margin-top:9px;}
.card .arw{margin-left:auto;width:26px;height:26px;flex:none;margin-top:6px;
  transition:transform .45s cubic-bezier(.22,1,.36,1);}
.card:hover .arw{transform:translate(4px,-4px);}
.card .arw svg{width:100%;height:100%;stroke:var(--ink);stroke-width:1.4;fill:none;stroke-linecap:round;}
.card .ph{margin:24px 14px 14px;border-radius:var(--r-img);overflow:hidden;aspect-ratio:4/3;background:#e8eaee;}
.card .ph img{width:100%;height:100%;object-fit:cover;
  transition:transform .9s cubic-bezier(.22,1,.36,1);}
.card:hover .ph img{transform:scale(1.06);}
.card .dsc{padding:4px 28px 30px;font-size:13.5px;line-height:2;color:#565f70;}

/* ============ 横スライダー（WORKS / NEWS） ============ */
.track{display:flex;gap:clamp(12px,1.6vw,24px);padding:clamp(36px,5vw,66px) var(--pad) 20px;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:var(--pad);scrollbar-width:none;}
.track::-webkit-scrollbar{display:none;}
.head-row{padding:0 var(--pad);display:flex;align-items:flex-end;gap:26px;flex-wrap:wrap;}
.head-row .pill{margin-left:auto;}
.head-row .lead{width:100%;margin-top:24px;}
/* 見出し行の英文サブ。.head-rowはflexなので幅を明示しないと.leadと同じ行に並ぼうとする。
   行間は.head-rowのgap(26px)が効くのでmargin-topは0に戻す */
.head-row .lead-en{width:100%;margin-top:0;}

.wcard{flex:none;width:min(400px,74vw);scroll-snap-align:start;}
.wcard .ph{border-radius:var(--r-card);overflow:hidden;aspect-ratio:4/3;background:#e8eaee;
  box-shadow:0 20px 46px rgba(13,25,60,.1);}
.wcard .ph img{width:100%;height:100%;object-fit:cover;
  transition:transform .9s cubic-bezier(.22,1,.36,1);}
/* ⚠️ ph-par（下のスクロールパララックス）が transform を占有するため、
   animation を止めないと hover の拡大が一切効かない。しかも ph-par の scale は 1.12 で
   こちらの 1.05 より大きいので、効いた瞬間に「縮む」ことになる。必ずセットで書くこと */
.wcard:hover .ph img{animation:none;transform:scale(1.05);}
.wcard .cat{font-family:var(--ff-en);font-weight:600;font-size:11.5px;letter-spacing:.14em;
  color:var(--blue);margin-top:20px;}
.wcard h3{font-weight:700;font-size:16.5px;line-height:1.7;margin-top:7px;letter-spacing:.03em;}
.wcard .meta{font-size:12.5px;color:var(--gray);margin-top:5px;letter-spacing:.04em;}

.ncard{flex:none;width:min(360px,72vw);scroll-snap-align:start;background:#fff;border-radius:var(--r-card);
  padding:24px;box-shadow:0 18px 44px rgba(13,25,60,.07);
  transition:transform .5s cubic-bezier(.22,1,.36,1);}
.ncard:hover{transform:translateY(-6px);}
/* ⚠️ grid-template-rows:100% を必ず入れる（2026-08-07）。
   これが無いと行が「内容の高さ」で作られ、中の img の height:100% が
   その行を参照する＝循環参照になるので auto に落ちる。結果、16:10 以外の写真
   （例: 4:3 のWP添付 1024×769）だけ枠より2割高く描かれ、overflow:hidden で
   上下が切れて「写真がでかくなった」ように見えていた（実測 312×234／枠は312×195）。
   place-items:center は代替マーク（.nomark）の中央寄せに要るので残す。
   ⚠️ place-items:stretch では直らない（行が内容サイズのままなので）。実測で確認済み。 */
.ncard .ph{border-radius:var(--r-img);overflow:hidden;aspect-ratio:16/10;background:var(--blue-p);
  display:grid;grid-template-rows:100%;place-items:center;}
.ncard .ph img{width:100%;height:100%;object-fit:cover;}
.ncard .ph .nomark{width:42%;opacity:.2;}
.ncard time{display:block;font-family:var(--ff-en);font-size:12.5px;color:var(--gray);margin-top:20px;}
.ncard p{font-weight:700;font-size:14.5px;line-height:1.85;margin-top:8px;letter-spacing:.03em;}

/* ============ 数字バンド ============ */
.stats-in{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;max-width:1200px;margin:0 auto;}
.stat .v{font-family:var(--ff-en);font-weight:600;font-size:clamp(36px,5vw,68px);line-height:1;
  letter-spacing:-.02em;color:var(--blue);}
.stat .v small{font-size:.38em;margin-left:3px;letter-spacing:0;}
.stat .l{font-family:var(--ff-en);font-weight:600;font-size:11px;letter-spacing:.15em;
  color:var(--gray);margin-top:15px;}
.stat .j{font-size:13px;font-weight:700;letter-spacing:.06em;margin-top:4px;}

/* ============ CTA ============ */
.cta{position:relative;z-index:2;overflow:hidden;color:#fff;text-align:center;
  padding:clamp(86px,12vw,180px) var(--pad);
  background:linear-gradient(120deg,var(--blue-d),var(--blue) 46%,#4f88ff);}
.cta .ribbon{left:-8%;right:-8%;top:-18%;bottom:-18%;}
.cta-in{position:relative;z-index:2;}
.cta h2{font-family:var(--ff-dp);font-weight:500;line-height:1.1;letter-spacing:-.015em;
  font-size:clamp(32px,6vw,92px);}
.cta .jp{font-weight:700;font-size:clamp(13px,1.4vw,19px);letter-spacing:.13em;margin-top:28px;}
.cta .btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:46px;}
.cta .pill{background:#fff;color:var(--ink);} .cta .pill i{background:var(--ink);}
.cta .pill i svg{stroke:#fff;}
.cta .pill:hover{background:var(--ink);color:#fff;}
.cta .pill:hover i{background:#fff;} .cta .pill:hover i svg{stroke:var(--ink);}
.cta .pill.line{background:var(--line-g);color:#fff;} .cta .pill.line i{background:#fff;}
.cta .pill.line i svg{stroke:var(--line-g);}
.cta .pill.line:hover{background:#04703a;color:#fff;}

/* ============ フッター（U.S型：黒い角丸ボックスが浮く） ============ */
.foot{background:var(--bg);padding:0 clamp(10px,1.6vw,26px) clamp(10px,1.6vw,26px);}
.foot-box{position:relative;overflow:hidden;border-radius:var(--r);background:#111318;color:#fff;
  padding:clamp(44px,6vw,88px) clamp(24px,4vw,70px) clamp(22px,2.4vw,34px);}
.foot-box .ribbon{left:-10%;right:-10%;top:-30%;bottom:-30%;opacity:.55;}
.foot-in{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr 1fr .8fr;
  gap:clamp(28px,4vw,60px);}
.foot .logo{font-size:clamp(20px,2.2vw,26px);}
.foot-addr{font-size:12.5px;line-height:2;color:#9aa3b2;margin-top:26px;}
.foot-addr b{color:#fff;font-family:var(--ff-en);font-size:11px;letter-spacing:.18em;
  display:block;margin-bottom:4px;}
.foot-addr .en{color:#6f7784;font-family:var(--ff-en);font-size:11.5px;}
.foot-addr>div+div{margin-top:18px;}
.foot-line{display:inline-flex;align-items:center;gap:16px;margin-top:28px;padding:16px 20px;
  border:1px solid #2a2f3a;border-radius:14px;transition:border-color .3s,background .3s;}
.foot-line:hover{border-color:var(--line-g);background:rgba(5,133,66,.12);}
.foot-line img{width:66px;height:66px;background:#fff;border-radius:8px;padding:4px;}
.foot-line b{display:block;font-size:13.5px;font-weight:700;}
.foot-line small{display:block;font-size:11px;color:#9aa3b2;margin-top:3px;}
.fcol{display:flex;flex-direction:column;gap:6px;}
.fmain{display:inline-flex;align-items:center;gap:12px;font-family:var(--ff-en);font-weight:600;
  font-size:clamp(19px,2vw,26px);letter-spacing:-.01em;padding:7px 0;transition:color .3s;}
.fmain:hover{color:var(--blue-l);}
.fmain svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;
  transition:transform .35s cubic-bezier(.22,1,.36,1);}
.fmain:hover svg{transform:translate(3px,-3px);}
.fsub{border-left:1px solid #2a2f3a;padding:6px 0 14px 22px;margin-left:2px;
  display:grid;gap:9px;font-size:13px;color:#9aa3b2;}
.fsub a:hover{color:#fff;}
.foot-bot{position:relative;z-index:2;display:flex;justify-content:space-between;flex-wrap:wrap;
  gap:14px;margin-top:clamp(34px,4vw,64px);padding-top:22px;border-top:1px solid #232833;
  font-family:var(--ff-en);font-size:11.5px;letter-spacing:.05em;color:#9aa3b2;}
.foot-bot a:hover{color:#fff;}

/* ============ 会社概要テーブル ============ */
.c-table{border-top:1px solid var(--line);}
.c-table dl{display:grid;grid-template-columns:250px 1fr;gap:20px;padding:24px 4px;
  border-bottom:1px solid var(--line);align-items:start;}
.c-table dt{font-weight:700;font-size:14.5px;letter-spacing:.06em;}
.c-table dt small{display:block;font-family:var(--ff-en);font-weight:600;font-size:10px;
  letter-spacing:.16em;color:var(--gray-l);margin-top:3px;}
/* 1行の長さを760pxで止める。読みやすさの上でも、
   固定した背景ロゴの濃い部分（右側）まで文字を伸ばさないためにも要る */
.c-table dd{font-size:14px;line-height:2;color:#39414f;max-width:760px;}

/* ============ 沿革 ============ */
.history{border-left:1px solid var(--line);padding-left:clamp(20px,3vw,44px);margin-top:44px;}
.h-item{position:relative;padding:0 0 34px;}
.h-item::before{content:'';position:absolute;left:calc(-1 * clamp(20px,3vw,44px) - 5px);top:11px;
  width:9px;height:9px;border-radius:50%;background:var(--blue);
  box-shadow:0 0 0 4px rgba(21,87,218,.14);}
.h-item .year{font-family:var(--ff-en);font-weight:600;font-size:15px;color:var(--blue);}
.h-item .txt{font-size:14.5px;font-weight:700;letter-spacing:.04em;margin-top:3px;}

/* ============ アクセス（ダークネイビーの地図） ============ */
.access-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2vw,28px);margin-top:44px;}
.access-card{background:#fff;border-radius:var(--r-card);overflow:hidden;box-shadow:0 20px 50px rgba(13,25,60,.08);}
.access-card .map{position:relative;aspect-ratio:16/10;background:#1d2a47;}
.access-card .map iframe{width:100%;height:100%;border:0;
  filter:grayscale(1) invert(.9) sepia(1) hue-rotate(185deg) saturate(2.6) brightness(1.06) contrast(.92);
  transition:filter .4s;}
.access-card .map:hover iframe{filter:grayscale(1) invert(.9) sepia(1) hue-rotate(185deg) saturate(2.9) brightness(1.12) contrast(.92);}
/* 反転フィルタでGoogleの赤ピンが水色になるため、白ピンを中央に重ねる */
.access-card .map::after{content:'';position:absolute;left:50%;top:50%;width:26px;height:34px;
  transform:translate(-50%,-100%);pointer-events:none;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 34'%3E%3Cpath d='M13 0C5.8 0 0 5.8 0 13c0 9.7 13 21 13 21s13-11.3 13-21C26 5.8 20.2 0 13 0z' fill='%23fff'/%3E%3Ccircle cx='13' cy='13' r='5' fill='%231d2a47'/%3E%3C/svg%3E");
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.45));}
.access-card .body{padding:26px 26px 30px;}
.access-card h3{font-family:var(--ff-en);font-weight:600;font-size:22px;letter-spacing:.02em;}
.access-card p{font-size:13.5px;line-height:2;color:#39414f;margin-top:10px;}
.access-card .tel{font-family:var(--ff-en);font-weight:600;font-size:19px;color:var(--blue);margin-top:12px;}

/* ============ 代表挨拶 ============ */
.msg{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(24px,4vw,60px);
  align-items:start;margin-top:44px;}
.msg h3{font-weight:900;font-size:clamp(20px,2.6vw,32px);line-height:1.6;letter-spacing:.05em;
  margin-bottom:26px;}
.msg p{font-size:14.5px;line-height:2.2;color:#39414f;margin-bottom:18px;}
.msg .sign{display:flex;gap:34px;flex-wrap:wrap;margin-top:26px;font-size:12.5px;color:var(--gray);}
.msg .sign b{display:block;font-size:16px;color:var(--ink);letter-spacing:.08em;margin-top:2px;}
.msg .photo img{border-radius:var(--r-card);aspect-ratio:1/1;object-fit:cover;background:var(--panel);}
.msg .photo small{display:block;text-align:center;font-size:11px;color:var(--gray-l);margin-top:9px;}

/* ============ サービス詳細 ============ */
.svc{position:relative;z-index:2;padding:clamp(60px,7vw,110px) 0;border-top:1px solid var(--line);}
.svc:first-of-type{border-top:0;}
.svc-no{font-family:var(--ff-en);font-weight:600;font-size:12px;letter-spacing:.22em;color:var(--blue);}
.svc h2{font-family:var(--ff-en);font-weight:600;font-size:clamp(30px,4.4vw,58px);
  letter-spacing:-.02em;line-height:1.05;margin-top:10px;}
.svc h2 small{display:block;font-family:var(--ff-jp);font-weight:700;font-size:14px;
  letter-spacing:.1em;margin-top:12px;}
.svc .txt{font-size:14.5px;line-height:2.2;color:#39414f;max-width:760px;margin-top:24px;}
.menu-detail{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-top:38px;}
.menu-detail div{background:#fff;padding:22px 22px 24px;}
.menu-detail b{display:block;font-size:14px;font-weight:700;letter-spacing:.05em;}
.menu-detail span{display:block;font-size:12.5px;line-height:1.9;color:var(--gray);margin-top:6px;}

/* ============ プロセス ============ */
.flow{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:44px;}
.step{background:#fff;border-radius:var(--r-card);padding:26px 20px 28px;text-align:center;
  box-shadow:0 14px 36px rgba(13,25,60,.07);
  opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.22,1,.36,1);}
.flow.on .step{opacity:1;transform:none;}
.flow.on .step:nth-child(1){transition-delay:0s;}   .flow.on .step:nth-child(2){transition-delay:.12s;}
.flow.on .step:nth-child(3){transition-delay:.24s;} .flow.on .step:nth-child(4){transition-delay:.36s;}
.flow.on .step:nth-child(5){transition-delay:.48s;}
.step .n{font-family:var(--ff-en);font-weight:600;font-size:11px;letter-spacing:.18em;color:var(--blue);}
.step b{display:block;font-size:15px;letter-spacing:.06em;margin-top:9px;}
.step span{display:block;font-size:12px;line-height:1.85;color:var(--gray);margin-top:8px;}

/* ============ FAQ ============ */
.faq{border-top:1px solid var(--line);margin-top:40px;}
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{width:100%;display:flex;align-items:flex-start;gap:16px;text-align:left;
  padding:22px 4px;font-weight:700;font-size:15px;letter-spacing:.05em;line-height:1.8;}
.faq-q::before{content:'Q';font-family:var(--ff-en);font-weight:600;color:var(--blue);flex:none;
  font-size:15px;line-height:1.8;}
.faq-q::after{content:'';margin-left:auto;flex:none;width:11px;height:11px;margin-top:9px;
  border-right:1.6px solid var(--ink);border-bottom:1.6px solid var(--ink);
  transform:rotate(45deg);transition:transform .35s;}
.faq-item.open .faq-q::after{transform:rotate(-135deg);}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.22,1,.36,1);}
.faq-item.open .faq-a{grid-template-rows:1fr;}
.faq-a>div{overflow:hidden;}
.faq-a p{font-size:13.5px;line-height:2.1;color:#39414f;padding:0 4px 24px 31px;}
.faq-a p+p{padding-top:12px;}

/* ============ 実績一覧 ============ */
.filter{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:clamp(40px,5vw,72px);}
/* 「# ALL」は絞り込み解除ボタン。us.js がクリックを拾う（span のままだが role=button を付与） */
.filter .all{font-family:var(--ff-en);font-weight:600;font-size:14px;letter-spacing:.14em;
  padding-right:22px;border-right:1px solid var(--line);cursor:pointer;opacity:.5;
  transition:opacity .3s;}
.filter .all.on,.filter .all:hover{opacity:1;}
.filter .chips{display:flex;gap:10px;flex-wrap:wrap;}
.chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:10px 22px;
  font-size:13px;font-weight:700;letter-spacing:.05em;transition:all .3s;}
.chip:hover{border-color:var(--blue);color:var(--blue);}
.chip.on{background:var(--ink);border-color:var(--ink);color:#fff;}
.wgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,30px);margin-top:44px;}
.wgrid .wcard{width:auto;}

/* ============ ニュース一覧 ============ */
.nlist{border-top:1px solid var(--line);margin-top:44px;}
.nrow{display:grid;grid-template-columns:120px 130px 1fr auto;gap:20px;align-items:center;
  padding:24px 4px;border-bottom:1px solid var(--line);transition:background .3s;}
.nrow:hover{background:#fafbfc;}
.nrow time{font-family:var(--ff-en);font-size:13px;color:var(--gray);}
.nrow .tag{font-family:var(--ff-en);font-weight:600;font-size:10.5px;letter-spacing:.14em;
  border:1px solid var(--line);border-radius:999px;padding:5px 0;text-align:center;color:var(--gray);}
.nrow p,.nrow .ttl{font-weight:700;font-size:14.5px;letter-spacing:.04em;line-height:1.8;}
.nrow .go{width:22px;height:22px;flex:none;transition:transform .35s cubic-bezier(.22,1,.36,1);}
.nrow:hover .go{transform:translate(4px,-4px);}
.nrow .go svg{width:100%;height:100%;stroke:var(--ink);stroke-width:1.5;fill:none;stroke-linecap:round;}

/* ============ フォーム ============ */
.form-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(26px,4vw,60px);
  align-items:start;margin-top:44px;}
/* min-width:auto のままだと長いボタンが列幅を押し広げて横はみ出しになる */
.form-grid>*{min-width:0;}
.form-grid .pill{max-width:100%;white-space:normal;}
.frow{margin-bottom:22px;}
.frow label{display:flex;align-items:center;gap:10px;font-weight:700;font-size:13.5px;
  letter-spacing:.06em;margin-bottom:9px;}
.req{font-family:var(--ff-en);font-weight:600;font-size:10px;letter-spacing:.12em;
  background:var(--blue);color:#fff;border-radius:4px;padding:3px 8px;}
.frow input,.frow select,.frow textarea{width:100%;font:inherit;font-size:14.5px;
  background:#f4f6f8;border:1px solid transparent;border-radius:12px;padding:14px 16px;
  transition:border-color .3s,background .3s;}
.frow input:focus,.frow select:focus,.frow textarea:focus{outline:0;background:#fff;border-color:var(--blue);}
.frow textarea{min-height:170px;resize:vertical;}
.fnote{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;color:var(--gray);margin:8px 0 24px;}
.side-card{background:#fff;border-radius:var(--r-card);padding:26px;box-shadow:0 18px 44px rgba(13,25,60,.07);}
.side-card+.side-card{margin-top:16px;}
/* LINE QRはテーマに関係なく必ず白地＋余白（クワイエットゾーン）に載せる。
   ナイトでカード地が暗転すると黒モジュールが沈んでスキャン不能になるため */
.side-card .qr{display:block;margin-top:16px;background:#fff;padding:8px;
  border-radius:10px;border:1px solid var(--line);}
.side-card .k{font-family:var(--ff-en);font-weight:600;font-size:11px;letter-spacing:.16em;color:var(--gray);}
.side-card .tel{font-family:var(--ff-en);font-weight:600;font-size:26px;color:var(--blue);margin-top:6px;}
.side-card small{display:block;font-size:12px;color:var(--gray);margin-top:4px;}
.side-card p{font-size:13px;line-height:2;color:#39414f;margin-top:8px;}

/* ============ 求人 ============ */
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,26px);margin-top:44px;}
.why div{background:#fff;border-radius:var(--r-card);padding:30px 26px 34px;
  box-shadow:0 18px 44px rgba(13,25,60,.07);}
.why .n{font-family:var(--ff-en);font-weight:600;font-size:12px;letter-spacing:.2em;color:var(--blue);}
.why b{display:block;font-size:17px;letter-spacing:.05em;margin:10px 0 12px;line-height:1.6;}
.why span{font-size:13px;line-height:2;color:#39414f;}
.pos{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,1.8vw,24px);margin-top:44px;}
.pos article{background:#fff;border-radius:var(--r-card);padding:30px 28px 34px;
  box-shadow:0 18px 44px rgba(13,25,60,.07);}
.pos .en{font-family:var(--ff-en);font-weight:600;font-size:11px;letter-spacing:.2em;color:var(--blue);}
.pos h3{font-size:19px;letter-spacing:.05em;margin:8px 0 12px;}
.pos p{font-size:13.5px;line-height:2;color:#39414f;}
.tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;}
.tags span{font-size:11.5px;font-weight:700;letter-spacing:.05em;background:var(--blue-p);
  color:var(--blue-d);border-radius:999px;padding:6px 14px;}

/* ============ 本文（プライバシー等） ============ */
.prose{max-width:900px;margin-top:44px;}
.prose h2{font-size:17px;letter-spacing:.06em;margin:38px 0 12px;padding-left:14px;
  border-left:3px solid var(--blue);}
.prose p,.prose li{font-size:14px;line-height:2.1;color:#39414f;}
.prose ul{margin:10px 0 0 20px;list-style:disc;}
/* ⚠️ 本文中のリンクは必ず下線を引くこと。指定が無いと本文と同色・下線なしで、
   押せることが分からない（お知らせ記事に初めてリンクを入れて発覚）。
   コラム本文（.ka-body a）と同じ体裁に揃える */
.prose a{color:inherit;text-decoration:underline;text-underline-offset:4px;
  text-decoration-thickness:1px;transition:color .3s;}
.prose a:hover{color:var(--blue);}
.prose .date{font-family:var(--ff-en);font-size:12.5px;color:var(--gray);margin-top:40px;text-align:right;}

/* ============ レスポンシブ ============ */
@media(max-width:1000px){
  header nav{display:none;}
  /* navを消すと margin-left:auto の押し出し役がいなくなり、
     ハンバーガーがロゴの真横に貼り付いてしまう。右端へ戻す */
  .burger{margin-left:auto;}
  .cards,.wgrid,.why,.menu-detail{grid-template-columns:1fr;}
  .pos,.access-grid{grid-template-columns:1fr;}
  .stats-in{grid-template-columns:repeat(2,1fr);gap:40px 18px;}
  .flow{grid-template-columns:repeat(2,1fr);}
  .msg{grid-template-columns:1fr;}
  .msg .photo{max-width:340px;margin:0 auto;order:-1;}
  .form-grid{grid-template-columns:1fr;}
  .foot-in{grid-template-columns:1fr;}
  .c-table dl{grid-template-columns:1fr;gap:6px;}
  .nrow{grid-template-columns:auto 1fr;gap:8px 14px;}
  .nrow .tag{grid-row:1;width:110px;}
  .nrow p,.nrow .ttl{grid-column:1/-1;}
  .nrow .go{display:none;}
  .about .mark{width:78vw;opacity:.04;}
  .ph-panel .ribbon{left:0;}
}
@media(max-width:560px){
  .flow{grid-template-columns:1fr;}
  .stats-in{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important;}
  .rv,.step{opacity:1;transform:none;translate:none;}
  .rl>.rl-i,.rch{translate:none;}
  .rvp{clip-path:none;}
  .rvp img{scale:none;}
  .fv h1 .ln>span{transform:none;}
  .fv .jp,.fv-news{opacity:1;transform:none;}
  .mmenu nav a{opacity:1;transform:none;}
}

/* =========================================================================
   ここから 2026-08-04 追加分
   U.S Inc. の「構造・演出」に寄せる ＋ 最新のスクロール連動APIを載せる
   ========================================================================= */

/* ---- ページ遷移（View Transitions API）。対応ブラウザだけクロスフェードする ---- */
@view-transition{navigation:auto;}
::view-transition-old(root){animation:vt-out .28s var(--ease) both;}
::view-transition-new(root){animation:vt-in  .38s var(--ease) both;}
@keyframes vt-out{to{opacity:0;}}
@keyframes vt-in{from{opacity:0;transform:translateY(14px);}}
/* ヘッダーに view-transition-name は付けない。単独スナップショットになると
   遷移中だけ mix-blend-mode:exclusion が効かず、白いバーが一瞬見えてしまう */

/* ---- 角丸パネル ----
   U.S実測: 暗いセクションだけを border-radius:40px のパネルにして
   ページ地の上に浮かせる。明るいセクションは地のまま素直に積む。 */
.panel{border-radius:var(--r);margin:var(--gut);overflow:hidden;isolation:isolate;}
@media(max-width:560px){.panel{border-radius:24px;}}

/* ---- 数字バンドを黒パネルへ（明→暗→明のリズムを作る） ---- */
.sec.dark{color:#fff;background:#0c1120;}
.stage-bg .sec.dark{background:rgba(12,17,32,.94);}
/* 面の中を青いオーロラで満たす。conic-gradient を大きくぼかすと
   ベタ塗りにならず、奥行きのある発光面になる */
.sec.dark::before{content:'';position:absolute;inset:-30% -10%;z-index:0;pointer-events:none;
  background:
    radial-gradient(48% 66% at 14% 20%,rgba(21,87,218,.80),transparent 68%),
    radial-gradient(42% 56% at 86% 82%,rgba(122,165,255,.46),transparent 70%),
    radial-gradient(34% 46% at 64% 6%,rgba(79,136,255,.34),transparent 72%);
  filter:blur(26px);opacity:1;
  animation:aurora 26s var(--ease) infinite alternate;}
@keyframes aurora{
  0%  {transform:translate3d(-3%,-2%,0) scale(1);}
  50% {transform:translate3d(4%,3%,0)  scale(1.12);}
  100%{transform:translate3d(-2%,4%,0) scale(1.04);}
}
.sec.dark>*{position:relative;z-index:1;}
.sec.dark .stat .v{color:#fff;}
.sec.dark .stat .l{color:#9aa3b2;}
.sec.dark .stat .j{color:#e7eaf0;}

/* ---- CTAもパネル化。地色は濃紺に落とし、青は発光として残す ----
   ヘッダーが mix-blend-mode:exclusion なので、下地が鮮やかな青のままだと
   ナビが補色（オレンジ）に反転してしまう。暗い面にすれば白のまま保てる。 */
.cta{background:#0a0d18;}
.stage-bg .cta{background:rgba(10,13,24,.95);}
.cta::before{content:'';position:absolute;inset:-25% -12%;z-index:0;pointer-events:none;
  background:
    radial-gradient(44% 58% at 26% 26%,rgba(21,87,218,.72),transparent 68%),
    radial-gradient(46% 60% at 76% 74%,rgba(79,136,255,.50),transparent 70%),
    radial-gradient(34% 44% at 54% 4%,rgba(122,165,255,.30),transparent 72%);
  filter:blur(34px);animation:aurora 22s var(--ease) infinite alternate;}

/* ---- FVの見出しを行マスクで送り出す ----
   U.Sは不透明度だけだが、そこに行単位のマスクを足すと"組み上がる"感が出る。
   時間は0.3s基調のまま伸ばさない（長いと途端に安っぽくなる） */
.fv h1 .ln{overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em;}
.fv h1 .ln>span{transform:translateY(105%);
  transition:opacity .5s var(--ease),transform .62s cubic-bezier(.22,1,.36,1);}
.fv.ready h1 .ln>span{transform:none;}

/* ---- スクロール駆動アニメーション（animation-timeline） ----
   IntersectionObserverと違いメインスレッドを使わないので、
   3Dキャンバスを回したままでも滑らかに動く。非対応ブラウザでは単に無効。 */
@supports (animation-timeline:view()){
  /* 見出し・リード等の任意要素に data-sda を付けると、視界に入る過程で立ち上がる */
  [data-sda]{animation:sda-rise linear both;animation-timeline:view();
    animation-range:entry 2% entry 88%;}
  @keyframes sda-rise{from{opacity:0;transform:translateY(26px);filter:blur(6px);}
                      to  {opacity:1;transform:none;filter:blur(0);}}
  /* ヒーローは、スクロールに合わせて奥へ引きながら消える */
  .fv-copy{animation:fv-away linear both;animation-timeline:view();
    animation-range:exit-crossing 0% exit 100%;}
  @keyframes fv-away{from{opacity:1;transform:none;filter:blur(0);}
                     to  {opacity:0;transform:translateY(-40px) scale(.94);filter:blur(3px);}}
  /* 実績・ニュースの帯は、通過に合わせて奥行きを持って起き上がる */
  [data-sda="panel"]{animation:sda-panel linear both;animation-timeline:view();
    animation-range:entry 0% entry 92%;}
  @keyframes sda-panel{from{opacity:.35;transform:perspective(1400px) translateY(70px) rotateX(7deg) scale(.955);}
                       to  {opacity:1;transform:none;}}
}

/* ---- スクロール進捗バー（画面最上部の細い線） ---- */
.prog{position:fixed;left:0;top:0;height:2px;z-index:130;pointer-events:none;
  background:linear-gradient(90deg,var(--blue),var(--blue-l));
  transform-origin:0 50%;transform:scaleX(0);width:100%;}
@supports (animation-timeline:scroll()){
  .prog{animation:prog-grow linear both;animation-timeline:scroll(root block);}
  @keyframes prog-grow{from{transform:scaleX(0);}to{transform:scaleX(1);}}
}

/* ---- 無限マーキー（事業領域のキーワード帯） ---- */
.marquee{position:relative;z-index:2;overflow:hidden;padding:clamp(22px,2.6vw,34px) 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.5);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.marquee .row{display:flex;width:max-content;will-change:transform;
  animation:mq 34s linear infinite;}
.marquee:hover .row{animation-play-state:paused;}
.marquee .row>span{display:inline-flex;align-items:center;gap:clamp(26px,3.4vw,52px);
  padding-right:clamp(26px,3.4vw,52px);
  font-family:var(--ff-dp);font-weight:500;font-size:clamp(22px,3vw,42px);
  letter-spacing:-.015em;line-height:1.1;white-space:nowrap;color:var(--ink);}
.marquee .row>span i{font-style:normal;color:var(--blue);font-size:.42em;transform:translateY(-.18em);}
/* 2周目を薄くして、流れているのが分かるようにする */
.marquee .row>span:nth-child(even){color:transparent;-webkit-text-stroke:1px var(--gray-l);}
@keyframes mq{from{transform:translate3d(0,0,0);}to{transform:translate3d(-50%,0,0);}}

/* ---- カードの3Dチルト（ポインタ追従） ----
   JSは --mx / --my（カード内の位置 0〜1）を書き込むだけ。傾きはCSS側で作る。 */
.tilt{transform-style:preserve-3d;
  transform:perspective(1100px)
            rotateX(calc((var(--my,.5) - .5) * -9deg))
            rotateY(calc((var(--mx,.5) - .5) * 12deg))
            translateY(var(--ty,0));
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);}
.tilt:hover{--ty:-8px;}
/* 面に沿って走る光。カーソル位置に追従させると、板が物体らしく見える */
.tilt>.gloss{position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;
  opacity:0;transition:opacity .4s var(--ease);
  background:radial-gradient(38% 46% at calc(var(--mx,.5)*100%) calc(var(--my,.5)*100%),
    rgba(255,255,255,.85),rgba(255,255,255,0) 62%);
  mix-blend-mode:soft-light;}
.tilt:hover>.gloss{opacity:1;}
.card{position:relative;}

/* ---- マグネティックボタン（カーソルに引き寄せられる） ---- */
.pill{transform:translate3d(var(--px,0),var(--py,0),0);
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),
             transform .45s cubic-bezier(.22,1,.36,1);}
.pill.mag-live{transition:background var(--dur) var(--ease),color var(--dur) var(--ease);}

/* ---- カーソル追従スポットライト ----
   画面全体に極薄の光を置く。ブランド色の存在を、面を塗らずに感じさせる。 */
.spot{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:0;
  transition:opacity .6s var(--ease);
  background:radial-gradient(420px 420px at var(--sx,50%) var(--sy,50%),
    rgba(21,87,218,.11),rgba(21,87,218,.045) 42%,transparent 68%);}
body.pointer-fine .spot{opacity:1;}

/* ---- フィルムグレイン。べったりしたグラデ面のバンディングを隠す ---- */
.grain{position:fixed;inset:-50%;z-index:129;pointer-events:none;opacity:.26;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;animation:grain 7s steps(6) infinite;}
@keyframes grain{
  0%{transform:translate(0,0);}      16%{transform:translate(-4%,-3%);}
  33%{transform:translate(3%,-4%);}  50%{transform:translate(-3%,4%);}
  66%{transform:translate(4%,2%);}   83%{transform:translate(-2%,-4%);}
  100%{transform:translate(0,0);}}

/* ---- 実績カードの画像に、通過に合わせた縦パララックスを掛ける ---- */
@supports (animation-timeline:view()){
  .wcard .ph img{animation:ph-par linear both;animation-timeline:view(block);
    animation-range:cover 0% cover 100%;}
  @keyframes ph-par{from{transform:translateY(-4%) scale(1.12);}
                    to  {transform:translateY(4%)  scale(1.12);}}
}

/* ---- リンクの下線を左から引く（U.Sの .3s に合わせる） ---- */
.fv-news a{position:relative;border-bottom-color:transparent;}
.fv-news a::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform var(--dur) var(--ease);}
.fv-news a:hover::after{transform:scaleX(1);transform-origin:left;}

@media (prefers-reduced-motion: reduce){
  .marquee .row,.sec.dark::before,.cta::before,.grain{animation:none!important;}
  .tilt{transform:none!important;}
  .spot,.grain{display:none;}
  [data-sda],.fv-copy,.wcard .ph img{animation:none!important;opacity:1!important;
    transform:none!important;filter:none!important;}
  .fv h1 .ln>span{transform:none!important;}
}

/* ============ 背景ロゴ（下層ページ共通） ============
   参考: https://usinc.jp/business-produce
   先方はロゴのΛマークをビューポート超のサイズまで拡大し、画面外へ断ち落として
   ページ全体の背景に敷いている（上は鮮やか／下へいくほど淡く消える）。
   こちらは自社の正式ロゴ（ヘッダー左上のOAマーク）で同じことをする。
   図版は assets/logo/oa-mark-bg.svg に外出し（全ページで1ファイルを共有） */
body.mark-page{background:linear-gradient(180deg,#fbfcfd 0%,#eef1f5 46%,#e9edf3 100%);}
.mark-page main{position:relative;z-index:2;}
/* position:fixed＝スクロールしても背景がついてくる（2026-08-04 ユーザー指示）。
   ⚠️ absolute時代のマスクは「ページを下へ行くほど消す」設計だった。
   fixedにすると常に画面内に居座るので、マスクは“画面の下半分で抜く”設計に変える。
   これをやらないと、本文を読んでいる高さにロゴの濃い部分が常駐して文字が沈む */
.mark-bg{position:fixed;top:0;left:0;right:0;height:165vh;z-index:0;
  overflow:hidden;pointer-events:none;opacity:.92;
  /* ⚠️ 高さは 165vh のまま（100vh に縮めない）。
     当社ロゴは画面高の1.6倍あるので、枠を画面ぴったりにすると
     ロゴの見どころ＝円と三角の「重なりの濃色」が枠外に落ちて別物になる。
     枠を画面より大きく取り、下に伸びたぶんは単に画面外に置く。
     結果、マスクは画面下端で約30%まで落ちる＝本文が読める濃さになる */
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 36%,rgba(0,0,0,.16) 66%,transparent 92%);
          mask-image:linear-gradient(180deg,#000 0%,#000 36%,rgba(0,0,0,.16) 66%,transparent 92%);}
/* ⚠️ 当社ロゴは「円＋三角」で密度が高い。参考サイトのΛのように等倍で引き伸ばすと
   ただの青い塊になり、逆に画面外へ逃がしすぎるとロゴだと分からなくなる。
   ・マーク全体が読めるサイズ（≒画面幅の8〜9割）
   ・Aの右脚だけ右端から断ち落とす
   ・円は見出しコピーに掛からない位置で止める
   の3条件を満たす値に決めた（3案比較）。以下はページごとに少しずつ振ってある。
   ⚠️ 新ロゴ（2Dフラット版）はリング頂点が viewBox y=0 から始まる（旧三角は y=14）。
      頂点が exclusion のヘッダー帯に入るとナビ文字が補色（茶色）に濁るので、
      旧頂点と同じ高さまで 14/96×幅 ぶん calc で下げている */
.mark-bg img,.mark-bg .mkfig{position:absolute;top:calc(-6vh + 12.83vw);right:-12vw;width:88vw;height:auto;display:block;
  max-width:none;}
body[data-page="service"] .mark-bg img,body[data-page="service"] .mark-bg .mkfig{top:calc(-14vh + 11.96vw);right:-6vw; width:82vw;}
body[data-page="works"]   .mark-bg img,body[data-page="works"]   .mark-bg .mkfig{top:calc(-2vh + 13.42vw); right:-20vw;width:92vw;}
body[data-page="news"]    .mark-bg img,body[data-page="news"]    .mark-bg .mkfig{top:calc(-4vh + 12.25vw); right:-16vw;width:84vw;}
body[data-page="recruit"] .mark-bg img,body[data-page="recruit"] .mark-bg .mkfig{top:calc(-10vh + 11.38vw);right:-2vw; width:78vw;}
body[data-page="contact"] .mark-bg img,body[data-page="contact"] .mark-bg .mkfig{top:calc(-12vh + 12.54vw);right:-8vw; width:86vw;}
body[data-page="privacy"] .mark-bg img,body[data-page="privacy"] .mark-bg .mkfig{top:calc(-8vh + 11.67vw); right:-14vw;width:80vw;}
/* JSがインラインSVGを注入できたら、フォールバックの<img>は下げる */
.mark-bg.mk-live img{display:none;}
/* ---- 3層パララックス（C案）。値は us.js のメインループが .mark-bg 自身に書き込む ----
   ⚠️ 変数は :root ではなく .mark-bg に書くこと。:root に毎フレーム書くと
      ページ全体のスタイル再計算が走って重くなる */
.mark-bg .mkRing{transform-box:view-box;transform-origin:34.3px 42px;
  transform:translate(var(--mkcx,0px),var(--mkcy,0px));}
.mark-bg .mkA{transform-box:view-box;transform-origin:68.9px 59px;
  transform:translate(var(--mktx,0px),var(--mkty,0px));}
.mark-bg .mkEcho{transform-box:view-box;transform-origin:34.3px 42px;
  transform:translate(var(--mkex,0px),var(--mkey,0px)) scale(var(--mkes,1));}
.mark-bg .mkGloss{transform-box:view-box;transform:translateX(var(--mkgx,-40px)) rotate(16deg);}

/* 白地のセクションは半透明にして、背景ロゴを透かす。
   ⚠️ .mark-bg を fixed にすると、ベタの半透明白は上下の境目が
      「背景ロゴが急に濃くなる横線」になって継ぎ目に見える。
      上下端を透明に落としたグラデにすると、境目が消えたまま
      本文のある中央だけを保護できる */
.mark-page .sec.white{background:linear-gradient(180deg,
  transparent 0%,rgba(255,255,255,.6) 12%,rgba(255,255,255,.6) 88%,transparent 100%);}
.mark-page .sec.gray{background:linear-gradient(180deg,
  transparent 0%,rgba(242,244,248,.72) 12%,rgba(238,240,243,.78) 88%,transparent 100%);}
/* 下層ヒーローの角丸パネルは、背景ロゴを見せるため地色を外す。
   ⚠️ 地色だけ外して寸法（min-height:300 / padding:56px 60px）を残すと、
   見えないパネルの余白がそのまま意味のない空白になり、H1と次のセクションが
   200px以上離れて「文字が散らばっている」状態になる。寸法ごと外すこと */
.mark-page .ph-panel{background:transparent;border-radius:0;overflow:visible;
  min-height:0;padding:0;display:block;}
/* パネルの内側パディング(60px)が無くなるので、そのままだと H1 だけが
   本文カラム(.wrap = 最大1240px中央寄せ)より左にずれる。両方を同じ軸に揃える */
.mark-page .ph-panel,
.mark-page .crumb{max-width:1240px;margin-left:auto;margin-right:auto;padding-left:0;padding-right:0;}
/* パネルが無くなった分、見出しと最初のセクションの間隔を詰めて1つの塊にする */
.mark-page .page-hero{padding-bottom:clamp(10px,1.4vw,20px);}
.mark-page .page-hero + .sec:not(.tight){padding-top:clamp(56px,6.6vw,104px);}
/* 背景ロゴの上に本文が乗ると、グレーの補足文（.lead-en / .sub-jp）が沈んで読めない。
   左側にだけ地色のスクリムを敷き、テキストカラムの背後を必ず淡く保つ */
.mark-bg::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,
    rgba(251,252,253,.96) 0%,
    rgba(251,252,253,.84) 24%,
    rgba(251,252,253,.40) 40%,
    transparent 56%);}
@media (max-width:900px){
  /* 縦長は本文の幅が狭く、マークを大きく置くと必ず文字に掛かる。
     右上の角に寄せて断ち落とし、濃度も落とす */
  .mark-bg{height:120vh;opacity:.58;
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 24%,rgba(0,0,0,.18) 60%,transparent 92%);
            mask-image:linear-gradient(180deg,#000 0%,#000 24%,rgba(0,0,0,.18) 60%,transparent 92%);}
  .mark-bg img,.mark-bg .mkfig,
  body[data-page] .mark-bg img,body[data-page] .mark-bg .mkfig{top:calc(-14vh + 19.25vw);right:-46vw;width:132vw;}
}


/* ---- OAコンシェルジュ（チャットパネル。us.jsが注入） ---- */
/* ⚠️ fx.js がこのパネルを popover 化してトップレイヤーへ上げている。
   [popover] のUAスタイルは inset:0 / margin:auto / border:solid / padding が入るため、
   right・bottomだけ指定しても left:0・top:0 が生き残って左上に張り付く（実測）。
   四辺とmargin・borderを明示して打ち消すこと。 */
.oa-chat{position:fixed;inset:auto 22px 22px auto;margin:0;border:0;z-index:9000;
  width:min(360px,calc(100vw - 32px));max-height:min(560px,calc(100vh - 56px));
  background:#fff;border-radius:var(--r-card);box-shadow:0 24px 60px rgba(13,15,20,.3);
  display:flex;flex-direction:column;overflow:hidden;padding:0;
  opacity:0;transform:translateY(16px) scale(.97);pointer-events:none;
  transition:opacity var(--dur),transform var(--dur) var(--ease);}
.oa-chat.open{opacity:1;transform:none;pointer-events:auto;}
.oa-chat-head{display:flex;align-items:center;gap:10px;background:var(--ink);color:#fff;
  padding:14px 18px;font-weight:900;font-size:14px;flex:none;}
.oa-chat-head svg{width:24px;height:21px;flex:none;}
.oa-chat-head button{margin-left:auto;background:none;border:0;color:#8b929e;
  font-size:20px;line-height:1;cursor:pointer;transition:color var(--dur);}
.oa-chat-head button:hover{color:#fff;}
.oa-chat-body{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;
  gap:10px;background:#f6f7f9;}
.oa-msg{max-width:85%;padding:11px 14px;border-radius:14px;font-size:13px;line-height:1.7;}
.oa-msg.bot{background:#fff;border:1px solid var(--line);border-bottom-left-radius:4px;
  align-self:flex-start;}
.oa-msg.user{background:var(--blue);color:#fff;border-bottom-right-radius:4px;
  align-self:flex-end;}
.oa-msg .acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
.oa-msg .acts a{display:inline-block;font-size:11.5px;font-weight:800;background:var(--blue);
  color:#fff;border-radius:999px;padding:7px 13px;}
.oa-msg .acts a.alt{background:var(--line-g);}
.oa-chat-chips{display:flex;flex-wrap:wrap;gap:8px;padding:12px 16px;background:#fff;
  border-top:1px solid var(--line);}
.oa-chat-chips button{font-family:var(--ff-jp);font-size:12px;font-weight:700;
  border:1.5px solid var(--blue);color:var(--blue);background:#fff;border-radius:999px;
  padding:8px 14px;cursor:pointer;transition:background var(--dur),color var(--dur);}
.oa-chat-chips button:hover{background:var(--blue);color:#fff;}
.oa-chat-input{display:flex;gap:8px;padding:10px 12px;background:#fff;
  border-top:1px solid var(--line);}
.oa-chat-input input{flex:1;min-width:0;border:1.5px solid var(--line);border-radius:999px;
  padding:9px 16px;font-family:var(--ff-jp);font-size:13px;background:#f9fafb;}
.oa-chat-input input:focus{outline:none;border-color:var(--blue);background:#fff;}
.oa-chat-input button{flex:none;width:38px;height:38px;border-radius:50%;border:0;
  background:var(--blue);color:#fff;font-size:13px;cursor:pointer;
  transition:transform .2s var(--ease);}
.oa-chat-input button:hover{transform:scale(1.08);}

/* ---- ダークモード ----
   ⚠️ このパネルは #fff / #f6f7f9 / #f9fafb を直に書いていて、暗い配色では
      面だけ白のまま残り、文字色（--ink）だけが明るい側へ反転する。結果として
      「白地に白文字」になって全部読めなくなる（実測）。面をすべて暗い側へ寄せる。
   ⚠️ --ink は明るい配色では文字色だが、暗い配色では地色として使えない。
      ヘッダー帯の background:var(--ink) が白帯＋白文字になっていた原因。
   ⚠️ 明暗の判定は @media(prefers-color-scheme) ではなく :root[data-theme] で行うこと。
      このサイトはヘッダーの切り替えボタンでOS設定と違う配色にもできるので、
      メディアクエリで書くと「OSは明るい／表示は暗い」のときに追従できない。 */
:root[data-theme="dark"] .oa-chat{background:var(--white);box-shadow:0 24px 60px rgba(0,0,0,.6);
  border:1px solid var(--line);}
:root[data-theme="dark"] .oa-chat-head{background:var(--bg);color:#fff;}
:root[data-theme="dark"] .oa-chat-head button{color:var(--gray);}
:root[data-theme="dark"] .oa-chat-head button:hover{color:#fff;}
:root[data-theme="dark"] .oa-chat-body{background:var(--surface-2);}
:root[data-theme="dark"] .oa-msg.bot{background:#1a2437;border-color:var(--line);color:var(--ink);}
/* 暗い配色の --blue は明るい水色。白文字だとコントラストが出ないので地の色を敷く */
:root[data-theme="dark"] .oa-msg.user{color:#081020;}
:root[data-theme="dark"] .oa-msg .acts a{color:#081020;}
:root[data-theme="dark"] .oa-msg .acts a.alt{color:#fff;}
:root[data-theme="dark"] .oa-chat-chips{background:var(--white);}
:root[data-theme="dark"] .oa-chat-chips button{background:transparent;}
:root[data-theme="dark"] .oa-chat-chips button:hover{background:var(--blue);color:#081020;}
:root[data-theme="dark"] .oa-chat-input{background:var(--white);}
:root[data-theme="dark"] .oa-chat-input input{background:var(--surface-2);color:var(--ink);}
:root[data-theme="dark"] .oa-chat-input input::placeholder{color:var(--gray);}
:root[data-theme="dark"] .oa-chat-input input:focus{background:#0a1020;}
:root[data-theme="dark"] .oa-chat-input button{color:#081020;}

/* ---- 追尾オーブ（us.jsが注入する第二の起動口） ----
   ヒーローのバナーが画面外へ出たら右下に現れ、スクロールに随伴する。
   鼓動のscaleは .core だけに掛け、周回リング（.ring）と波紋（.echo）は
   別レイヤーに分ける——1要素に回転と拍動を同居させると transform が
   上書き合戦になるため。パネル（z-index:9000）より一段下に置く */
.oa-orb{position:fixed;right:22px;bottom:calc(22px + env(safe-area-inset-bottom,0px));
  z-index:8990;width:64px;height:64px;border:0;padding:0;background:none;cursor:pointer;
  opacity:0;transform:translateY(16px) scale(.55);pointer-events:none;
  transition:opacity .45s var(--ease),transform .45s var(--ease);}
.oa-orb.show{opacity:1;transform:none;pointer-events:auto;}
/* estrelaの開幕中は隠す。e-wait が外れると .show の遷移で自然に現れる */
:root.js body.estrela.e-wait .oa-orb{opacity:0;pointer-events:none;}
.oa-orb:active{transform:scale(.93);}
.oa-orb .core{position:absolute;inset:0;border-radius:50%;background:var(--ink);
  display:grid;place-items:center;box-shadow:0 14px 34px rgba(13,15,20,.34);
  transition:box-shadow var(--dur) var(--ease);
  animation:oaBeat 1.9s cubic-bezier(.34,0,.42,1) infinite;}
.oa-orb .core svg{width:30px;height:26px;}
.oa-orb:hover .core{box-shadow:0 10px 30px rgba(232,0,96,.3),0 18px 46px rgba(12,159,255,.32);}
/* 周回する虹リング。色はヒーロー3DCG（estrela）のcosパレット
   vec3(.56,.38,.54)+vec3(.52,.46,.52)*cos(2π(vec3(.9,1,.8)t+vec3(.02,.34,.60)))
   を t=0〜1 で実測サンプリングした値。始点と終点を同色にしてconicの継ぎ目を消す */
.oa-orb .ring{position:absolute;inset:-4px;border-radius:50%;
  background:conic-gradient(from 0deg,
    #ff5a3e,#e80060,#9200b2,#3b47f4,#0c9fff,#1bd3f4,#61c3b2,#bd7a60,#ff5a3e);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));
          mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));
  filter:drop-shadow(0 0 5px rgba(232,0,96,.35)) drop-shadow(0 0 9px rgba(27,211,244,.25));
  animation:oaSpin 4.2s linear infinite;}
/* 鼓動に合わせて広がる波紋。2枚をずらし、色も虹の両端（マゼンタ／シアン）に割る */
.oa-orb .echo{position:absolute;inset:0;border-radius:50%;pointer-events:none;
  border:1.5px solid #e80060;opacity:0;
  animation:oaEcho 1.9s cubic-bezier(.2,.6,.35,1) infinite;}
.oa-orb .echo.e2{border-color:#1bd3f4;animation-delay:.24s;}
/* ホバーで左側に浮かぶ誘導ピル */
.oa-orb .tip{position:absolute;right:calc(100% + 13px);top:50%;
  transform:translateY(-50%) translateX(8px);white-space:nowrap;
  font-family:var(--ff-jp);font-size:11.5px;font-weight:700;letter-spacing:.05em;
  background:var(--ink);color:#fff;padding:9px 14px;border-radius:999px;
  box-shadow:0 10px 26px rgba(13,15,20,.22);opacity:0;pointer-events:none;
  transition:opacity .3s var(--ease),transform .3s var(--ease);}
.oa-orb:hover .tip,.oa-orb:focus-visible .tip{opacity:1;transform:translateY(-50%);}

/* 心拍：小さな第一波→強い第二波→休止の「トク・トクン」 */
@keyframes oaBeat{
  0%,100%{transform:scale(1)}
  9%{transform:scale(1.055)}
  18%{transform:scale(.995)}
  27%{transform:scale(1.095)}
  45%{transform:scale(1)}
}
@keyframes oaSpin{to{transform:rotate(1turn)}}
@keyframes oaEcho{
  0%,8%{opacity:0;transform:scale(.9)}
  22%{opacity:.5}
  70%,100%{opacity:0;transform:scale(1.6)}
}

/* 暗い配色では --ink が明色に反転して「白丸に白ロゴ」になるので地色を固定する。
   黒地に黒丸で沈むぶんは、青のアンビエントグローで輪郭を起こす */
:root[data-theme="dark"] .oa-orb .core{background:#0d1424;border:1px solid rgba(255,255,255,.3);
  box-shadow:0 14px 34px rgba(0,0,0,.5),0 0 22px rgba(232,0,96,.22),0 0 40px rgba(27,211,244,.18);}
:root[data-theme="dark"] .oa-orb:hover .core{box-shadow:0 14px 34px rgba(0,0,0,.5),0 0 30px rgba(232,0,96,.4),0 0 54px rgba(27,211,244,.32);}
:root[data-theme="dark"] .oa-orb .tip{background:#0d1424;border:1px solid rgba(255,255,255,.3);}

@media(max-width:900px){
  .oa-orb{width:58px;height:58px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));}
  .oa-orb .tip{display:none;}
}

@media (prefers-reduced-motion: reduce){
  .oa-orb{transition:opacity .01s;}
  .oa-orb .core,.oa-orb .ring{animation:none;}
  .oa-orb .echo{display:none;}
}

/* ---- 採用情報バナー（トップのみ・オーブの真上） ----
   白カード＋上端にestrela虹の細線。us.jsのチャットIIFEが注入する。
   ×で閉じると sessionStorage に記録し同一セッション中は出さない。
   出現・退避はオーブと同じ .show 方式（チャットパネル開中は一緒に引っ込める） */
.oa-rbnr{position:fixed;right:22px;bottom:calc(104px + env(safe-area-inset-bottom,0px));
  z-index:8985;width:262px;background:var(--white);border:1px solid var(--line);
  border-radius:16px;overflow:hidden;box-shadow:0 18px 44px rgba(13,15,20,.16);
  opacity:0;transform:translateY(16px);pointer-events:none;
  transition:opacity .45s var(--ease),transform .45s var(--ease);}
.oa-rbnr.show{opacity:1;transform:none;pointer-events:auto;}
:root.js body.estrela.e-wait .oa-rbnr{opacity:0;pointer-events:none;}
.oa-rbnr::before{content:"";display:block;height:3px;background:linear-gradient(90deg,
  #ff5a3e,#e80060,#9200b2,#3b47f4,#0c9fff,#1bd3f4,#61c3b2);}
.oa-rbnr .in{padding:14px 16px 16px;}
.oa-rbnr .lb{font-family:var(--ff-en);font-weight:600;font-size:10px;letter-spacing:.16em;
  color:var(--gray);display:flex;align-items:center;margin-bottom:6px;}
.oa-rbnr .bt{width:7px;height:7px;border-radius:50%;background:var(--blue);flex:none;
  margin-right:7px;box-shadow:0 0 8px rgba(21,87,218,.55);
  animation:oaBeat 1.9s cubic-bezier(.34,0,.42,1) infinite;}
.oa-rbnr .ttl{font-size:15px;font-weight:700;line-height:1.5;letter-spacing:.04em;color:var(--ink);}
.oa-rbnr .sub{font-size:11px;color:var(--gray);line-height:1.75;margin:4px 0 12px;}
.oa-rbnr .cta{display:flex;align-items:center;justify-content:center;gap:8px;
  background:var(--ink);color:#fff;text-decoration:none;border-radius:999px;
  font-size:12px;font-weight:700;letter-spacing:.06em;padding:9px 16px;
  transition:background var(--dur) var(--ease);}
.oa-rbnr .cta .ar{font-family:var(--ff-en);font-weight:500;transition:transform var(--dur) var(--ease);}
.oa-rbnr .cta:hover{background:var(--blue);}
.oa-rbnr .cta:hover .ar{transform:translate(2px,-2px);}
.oa-rbnr .x{position:absolute;top:10px;right:8px;width:26px;height:26px;border:0;cursor:pointer;
  border-radius:50%;display:grid;place-items:center;background:transparent;color:var(--gray-l);
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);}
.oa-rbnr .x:hover{background:rgba(93,102,117,.12);color:var(--ink);}
.oa-rbnr .x svg{width:11px;height:11px;display:block;}
/* ナイト配色: オーブcoreと同処方（地色固定＋白枠線）。--inkが明色反転するため
   CTAは白地×濃紺文字を直値で固定する */
:root[data-theme="dark"] .oa-rbnr{background:#0d1424;border-color:rgba(255,255,255,.28);
  box-shadow:0 18px 44px rgba(0,0,0,.5);}
:root[data-theme="dark"] .oa-rbnr .ttl{color:#fff;}
:root[data-theme="dark"] .oa-rbnr .sub{color:var(--gray-l);}
:root[data-theme="dark"] .oa-rbnr .cta{background:#fff;color:#101625;}
:root[data-theme="dark"] .oa-rbnr .cta:hover{background:var(--blue);color:#fff;}
:root[data-theme="dark"] .oa-rbnr .x:hover{background:rgba(255,255,255,.14);color:#fff;}
/* ---- 畳んだ状態（ピル） ----
   カードのまま居座ると右下の内容（CTA帯のLINEボタン・実績カードの本文・
   フッターのコピーライト）を覆ってしまう。時間かスクロールでピルに縮め、
   ピルを押せばカードに戻す。縮小はwidthのアニメが破綻するので中身の
   差し替え＋フェードで見せる。 */
.oa-rbnr .tab{display:none;}
.oa-rbnr.mini{width:auto;border-radius:999px;box-shadow:0 10px 26px rgba(13,15,20,.14);}
.oa-rbnr.mini::before{display:none;}   /* 虹の細線はカードの時だけ */
.oa-rbnr.mini .in{display:none;}
.oa-rbnr.mini .tab{display:flex;align-items:center;gap:8px;border:0;cursor:pointer;
  background:transparent;color:var(--ink);font-family:var(--ff-en);font-weight:700;
  font-size:11px;letter-spacing:.14em;padding:11px 17px;
  animation:oaRbFade .3s var(--ease);
  transition:color var(--dur) var(--ease);}
.oa-rbnr.mini .tab .ar{font-weight:500;letter-spacing:0;}
.oa-rbnr.mini .tab:hover{color:var(--blue);}
:root[data-theme="dark"] .oa-rbnr.mini .tab{color:#fff;}
:root[data-theme="dark"] .oa-rbnr.mini .tab:hover{color:var(--blue-l,#7aa7ff);}
@keyframes oaRbFade{from{opacity:0}to{opacity:1}}
@media(max-width:900px){
  .oa-rbnr{right:16px;bottom:calc(92px + env(safe-area-inset-bottom,0px));
    width:min(262px,calc(100vw - 88px));}
  /* ピルは全幅の本文に重なるので一回りコンパクトに */
  .oa-rbnr.mini .tab{font-size:10px;letter-spacing:.1em;padding:9px 13px;}
  /* 下スクロール中は右下の固定UI（採用ピル・オーブ）とヘッダーを退避する。
     スマホは本文が全幅＝固定UIが常に文字へ被るため。上スクロール／停止で復帰。
     クラスの付け外しは us.js の方向検知（body.oa-fabhide）。
     .show と組で書くこと（素の .oa-orb は元々 opacity:0 のため）。 */
  body.oa-fabhide .oa-rbnr.show,
  body.oa-fabhide .oa-orb.show{opacity:0;transform:translateY(16px);pointer-events:none;}
  header{transition:translate .4s var(--ease);}
  body.oa-fabhide header{translate:0 -110%;}
  /* 全画面メニューを開いている間は退避を解く（ヘッダーの×が消えると閉じられない） */
  body.menu-open.oa-fabhide header{translate:none;}
}

/* ---- スクロール進捗ハアライン（スマホ専用） ----
   上端2pxのestrela虹。CSS scroll()駆動なのでJSは注入のみ（us.js）。
   非対応ブラウザでは scaleX(0) のまま＝出ないだけで無害。 */
.oa-progress{display:none;}
@media(max-width:900px){
  .oa-progress{display:block;position:fixed;left:0;top:0;height:2px;width:100%;
    z-index:130;transform-origin:0 50%;transform:scaleX(0);pointer-events:none;
    background:linear-gradient(90deg,#ff5a3e,#e80060,#9200b2,#3b47f4,#0c9fff,#1bd3f4,#61c3b2);}
  @supports(animation-timeline:scroll()){
    .oa-progress{animation:oaProg linear both;animation-timeline:scroll(root);}
  }
  body.menu-open .oa-progress{opacity:0;}
  :root.js body.estrela.e-wait .oa-progress{opacity:0;}
}
@keyframes oaProg{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion: reduce){
  .oa-rbnr{transition:opacity .01s;}
  .oa-rbnr .bt{animation:none;}
  .oa-rbnr.mini .tab{animation:none;}
}
/* リクルートページ「募集職種」への着地位置。固定ヘッダーに食われないよう余白を取る */
#positions{scroll-margin-top:84px;}

/* 全幅で組んだ数字バンドは、背景ロゴの濃い部分に小さいラベルが重なって読めなくなる。
   箱に見えないよう上下にフェードする帯だけ敷いてコントラストを戻す */
.mark-page .statband{background:linear-gradient(180deg,rgba(250,251,253,0),
  rgba(250,251,253,.74) 20%,rgba(250,251,253,.74) 80%,rgba(250,251,253,0));}

/* ============ 画像を掴んだときに浮かぶ透かしロゴ ============
   ドラッグ／右クリック／長押し／範囲選択で画像を「取ろうとした」瞬間に、
   その画像の上へロゴを薄く重ねる。1枚だけを body 直下に置き、
   対象画像の矩形へ position:fixed で合わせる（画像ごとにDOMを増やさない）。 */
.wmark{position:fixed;z-index:125;pointer-events:none;
  display:grid;place-items:center;align-content:center;gap:9px;
  background:rgba(10,13,22,.22);
  opacity:0;visibility:hidden;transform:scale(1.03);
  transition:opacity .32s var(--ease),visibility .32s,transform .5s cubic-bezier(.22,1,.36,1);}
.wmark.on{opacity:1;visibility:visible;transform:none;}
.wmark svg{width:min(30%,92px);height:auto;opacity:.72;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.35));}
.wmark b{font-family:var(--ff-en);font-weight:700;letter-spacing:.3em;text-indent:.3em;
  font-size:clamp(9px,.85vw,12px);color:rgba(255,255,255,.78);white-space:nowrap;
  text-shadow:0 1px 8px rgba(0,0,0,.4);}
/* 小さいサムネイルでは社名を省いてマークだけにする */
.wmark.sm{gap:0;} .wmark.sm b{display:none;} .wmark.sm svg{width:44%;}
@media (prefers-reduced-motion: reduce){
  .wmark{transition:opacity .01s;transform:none;}
}


/* =========================================================================
   estrelaオープニング（フロントページ専用・body.estrela でスコープ）
   ローダー数字・グレイン・周辺減光のDOMは js/estrela.js が生やす。
   開幕前の隠し（e-wait）は :root.js のときだけ効かせる＝us.jsが死んだら
   3秒後に .js が外れて本文が素で出る（既存のJS失敗保険と同じ線）。
   ========================================================================= */
:root[data-theme="dark"] body.estrela{background:#050505;}
body.estrela .fv{background:transparent;}
:root.js body.estrela.e-wait #header,
:root.js body.estrela.e-wait .fv,
:root.js body.estrela.e-wait .skip{opacity:0;}
/* 画面外のスキップリンクの描画が黒地では上端に白くはみ出て見えるため、
   フォーカスされていない間は消しておく（キーボード操作では従来どおり出る） */
body.estrela .skip:not(:focus){opacity:0;}
body.estrela.e-in #header{animation:eHd .9s cubic-bezier(.16,1,.3,1) .4s both;}
@keyframes eHd{from{opacity:0;transform:translateY(-14px);}to{opacity:1;transform:none;}}
.eloader-num{position:fixed;left:0;top:0;z-index:60;pointer-events:none;
  font-family:"Didot","Bodoni 72",Georgia,"Times New Roman",serif;
  font-size:clamp(22px,2.4vw,32px);line-height:1;color:#f2efe9;
  will-change:transform,opacity;}
:root[data-theme="light"] .eloader-num{color:#101625;}
.evig{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 42%, transparent 55%, rgba(0,0,0,.55) 100%);}
:root[data-theme="light"] .evig{background:radial-gradient(120% 90% at 50% 42%, transparent 60%, rgba(16,22,37,.10) 100%);}
.egrain{position:fixed;inset:-40px;z-index:999;pointer-events:none;opacity:.07;}
.espacer{height:95vh;}   /* 全身のマークが現れる「見せ場」の余白 */
@media (max-width:900px){ .espacer{height:70vh;} }
@media (prefers-reduced-motion: reduce){
  :root.js body.estrela.e-wait #header,
  :root.js body.estrela.e-wait .fv,
  :root.js body.estrela.e-wait .skip{opacity:1;}
  body.estrela.e-in #header{animation:none;}
}
@media (prefers-reduced-transparency: reduce){
  .egrain,.evig,.eloader-num{display:none;}
}

/* ============ 等幅ラベル用の書体（ヘッダーロゴ用） ============
   trionn.css（ホームのみ読込）と同じ宣言。ヘッダーは全ページ共通なので
   us.css 側にも持つ（同一 family+src の重複宣言はブラウザが1つに束ねる） */
@font-face{
  font-family:'Martian Mono';
  src:url('../fonts/martian-mono-latin-300500.woff2') format('woff2');
  font-weight:300 500;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---- RECRUIT: 仕事の様子（動画） v2.29.0 -------------------------------
   自動再生しない（preload="none"）。クリックされるまで読み込まないので
   ヒーローのLCPに影響しない。ポスターだけ先に出る。 */
.rc-movie{margin:26px 0 0;border-radius:14px;overflow:hidden;
  background:#0b1220;box-shadow:0 18px 44px rgba(16,26,48,.16);}
.rc-movie video{display:block;width:100%;height:auto;aspect-ratio:16/9;}
#movie .rc-note{margin:16px 0 0;}
@media(max-width:720px){.rc-movie{border-radius:10px;margin-top:18px;}}