@charset "UTF-8";
/* ============================================================
   SATELLITE Tech Solutions — TOP
   Figma: Satellite-2 / node 638:4538「TOP / SATELLITE Tech Solutions — 1372」
   デザイン幅 1366px（ヘッダー/フッターは 1366px 固定、本文は流動）
   ============================================================ */

/* ---------- Design tokens（Figma 変数と 1:1） ---------- */
:root{
  --st-white01:#ffffff;
  --st-white02:#f2f1ee;
  --st-black01:#1d1d1f;
  --st-logo01:#666666;

  /* 派生色（Figma の生値） */
  --c-footer-bg:#0a0a0c;
  --c-text-dim:#98989d;
  --c-text-nav:#c9c9cd;
  --c-text-body:#3a3a3e;
  --c-ph:#d9d9d9;
  --c-hairline:rgba(255,255,255,.1);
  --c-chip-border:rgba(16,16,18,.12);

  --font-mincho:"Shippori Mincho", serif;
  --font-gothic:"Zen Kaku Gothic New", sans-serif;
  --font-mono:"IBM Plex Mono", monospace;

  /* ボタンのグラデーション（Figma は要素ごとに角度が微妙に異なる） */
  --grad-166:linear-gradient(165.62deg, #bdbdbd 0%, #ffffff 71.429%);
  --grad-170:linear-gradient(170.33deg, #bdbdbd 0%, #ffffff 71.429%);
  --grad-172:linear-gradient(172.41deg, #bdbdbd 0%, #ffffff 71.429%);
  --grad-174:linear-gradient(174.03deg, #bdbdbd 0%, #ffffff 71.429%);
  --grad-177:linear-gradient(176.98deg, #bdbdbd 0%, #ffffff 71.429%);
  --grad-135:linear-gradient(135deg, #bdbdbd 0%, #ffffff 71.429%);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body,h1,h2,h3,p,ul,li,figure,dl,dt,dd{margin:0;padding:0}
ul{list-style:none}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

body{
  background:var(--st-white02);
  color:var(--st-black01);
  font-family:var(--font-gothic);
  -webkit-font-smoothing:antialiased;
}

/* Figma の各ページフレームは clipsContent:true。右へ食み出す装飾（ABOUT の星画像など）を
   ページ幅で切る。overflow:hidden と違い clip はスクロールコンテナを作らないので、
   Flow や Message の position:sticky を壊さない。 */
.page{overflow-x:clip}

.u-visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* Figma の [text-box-trim:trim-both][text-box-edge:cap_alphabetic] に対応。
   行ボックスの余白（ハーフレディング）を削り、キャップハイト〜ベースラインで詰める。
   Chrome 133+ / Safari 18.2+ が対応。非対応ブラウザでは各ブロックがやや高くなるだけで崩れない。 */
.tb-trim{text-box:trim-both cap alphabetic}

/* Figma で text-box-trim が指定されている要素 */
.sec-head__title,.sec-head__sub,
.statement__title,.statement__lead,
.statband__label,.statband__num,.statband__unit,
.svc-card__eyebrow,.svc-card__name,.svc-card__desc,
.btn__label,
.why__lead,.why-card__no,.why-card__title,.why-card__desc,
.about-band__catch,
.recruit-band__catch,.recruit-band__desc,.chip,
.cta__catch,
.footer-nav a,.footer-copy p{text-box:trim-both cap alphabetic}

/* Products & Services の見出しだけは Figma 側で trim 指定が無い（638:4561 / 638:4562）ので戻す */
.services .sec-head__title,
.services .sec-head__sub{text-box:normal}


/* ============================================================
   Header（sticky / Figma 638:4720）
   ============================================================ */
.site-header{
  /* Figma 638:4720: ページ全体を覆う絶対配置ラッパー内の sticky。
     = ページ先頭に固定されるオーバーレイ。レイアウト高さを持たない。 */
  position:fixed;top:0;left:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  width:100%;height:70px;
  padding:10px 50px;
  background:var(--st-black01);
  overflow:hidden;
  /* 共通モーション: 下スクロールで隠し、上スクロールで即表示。
     0.3s / power2.out（GSAP の Power2.easeOut = easeOutQuad 相当）。 */
  transition:transform .3s cubic-bezier(.25,.46,.45,.94);
  will-change:transform;
}
.site-header.is-hidden{transform:translateY(-100%)}

@media (prefers-reduced-motion:reduce){
  .site-header{transition:none}
  .site-header.is-hidden{transform:none}
}
.site-header__nav{
  display:flex;align-items:center;gap:30px;
  flex:1 0 0;min-width:0;
  padding:20px 0;
  font-size:14px;letter-spacing:1.12px;color:var(--st-white01);
  white-space:nowrap;
}
.site-header__cta{
  display:flex;flex-direction:column;align-items:flex-end;justify-content:center;
  flex:1 0 0;min-width:0;padding:20px 0;
}

/* 横組みロゴ（アスペクト 344.03:155.75 / 高さいっぱい） */
.logo-h{
  position:relative;flex-shrink:0;
  height:100%;aspect-ratio:344.03/155.75;
  overflow:hidden;
}
.logo-h__mark,.logo-h__word-a,.logo-h__word-b{
  position:absolute;
  background-repeat:no-repeat;background-position:center;background-size:100% 100%;
}
.logo-h__mark  {inset:.37% 53.2% .36% .18%;  background-image:url("../img/logo-mark.webp");background-size:cover}
.logo-h__word-a{inset:53.94% -.01% 32.94% 53.07%;background-image:url("../img/logo-header-a.svg")}
.logo-h__word-b{inset:30.94% .36% 52.87% 53.5%; background-image:url("../img/logo-header-b.svg")}

/* ============================================================
   ボタン
   ============================================================ */
.btn{display:inline-flex;align-items:center;overflow:hidden}
.btn__label{
  font-family:var(--font-mono);font-weight:400;font-size:14px;
  color:var(--st-black01);white-space:nowrap;
}
.btn__label--gothic{
  font-family:var(--font-gothic);font-weight:500;letter-spacing:1.12px;
}
.btn__line{
  flex-shrink:0;width:50px;height:6px;
  background:url("../img/btn-line-light.svg") no-repeat center/100% 100%;
}
.btn__line--dark {background-image:url("../img/btn-line-dark.svg")}
.btn__line--about{background-image:url("../img/btn-line-about.svg")}
.btn__line--cta  {width:49px;background-image:url("../img/btn-line-cta.svg")}

/* ピル型：ラベルと線をくっつけて中央寄せ */
.btn--pill{gap:10px;padding:10px 30px;border-radius:500px}
/* バー型：カード幅いっぱいで両端に配置 */
.btn--bar{justify-content:space-between;width:100%;padding:10px 30px;border-radius:500px}
/* 円形 */
.btn--round{
  flex-direction:column;align-items:center;justify-content:center;gap:30px;
  width:200px;height:200px;padding:10px 30px;border-radius:500px;
  background-image:var(--grad-135);
}
.btn--black{background:#000}
.btn--black .btn__label{color:#fff}

.btn--grad-166{background-image:var(--grad-166)}
.btn--grad-170{background-image:var(--grad-170)}
.btn--grad-172{background-image:var(--grad-172)}
.btn--grad-174{background-image:var(--grad-174)}
.btn--grad-177{background-image:var(--grad-177)}

/* ============================================================
   共通セクション見出し
   ============================================================ */
.sec-head{display:flex;flex-direction:column;align-items:flex-start;gap:12px;overflow:hidden}
.sec-head__title{font-family:var(--font-mincho);font-weight:500;line-height:.95;white-space:nowrap}
.sec-head__title--80 {font-size:80px}
.sec-head__title--96 {font-size:96px}
.sec-head__title--100{font-size:100px}
.sec-head__sub{font-family:var(--font-gothic);font-weight:400;font-size:13.5px;letter-spacing:2.43px;white-space:nowrap}
.sec-head__sub--14{font-size:14px;letter-spacing:2.52px}
.sec-head--light{color:var(--st-white01)}
.sec-head--dark {color:var(--st-black01)}
.sec-head__sub--gray{color:var(--c-text-nav)}
.sec-head__sub--dim {color:var(--c-text-body)}

/* ============================================================
   First View（638:4539）
   ============================================================ */
.fv{
  position:relative;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;
  /* Figma の 1366x768 をそのまま px 固定すると、可視高が 768px でない PC
     （ズーム倍率・ブックマークバー・ディスプレイサイズで簡単に変わる）で
     ファーストビューが画面と一致しない。ビューポート基準にする。
     vh ではなく svh: モバイルでアドレスバーの出入りによる高さのガタつきを防ぐ。
     min-height は中身（見出し + gap 220px + ボタン + padding）が潰れない下限。 */
  height:100svh;min-height:600px;padding:100px 50px;overflow:hidden;
  /* キービジュアルは Figma で 1366×768 の1枚絵（ASCII フィールド＋HUD を焼き込み済み）。
     地色 #050505 は画像が届かない/はみ出した場合の受け皿。 */
  background:#050505 url("../img/fv-keyvisual.webp") no-repeat center top/cover;
}
/* 背景動画。CSS 背景の静止画の上に重ね、再生不可なら静止画が残る */
.fv__video{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;max-width:none;
  object-fit:cover;pointer-events:none;
}
.fv__inner{position:relative;z-index:1}
.fv__inner{display:flex;flex-direction:column;gap:220px;width:677px}
.fv__title{
  font-family:var(--font-mincho);font-weight:600;
  font-size:38px;line-height:1.8;letter-spacing:3.8px;
  color:var(--st-white01);
  /* CSS は最終文字の後ろにも letter-spacing を足すため、その分を打ち消す。
     これが無いと2行目が 680.55px となり 677px のコンテナで折り返す。 */
  margin-right:-3.8px;
}
.fv__btns{display:flex;align-items:center;gap:30px}

/* ============================================================
   Statement（638:4550）
   ============================================================ */
.statement{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:26px;
  padding:120px 100px;
}
/* 装飾バンド（638:4551）: 2088×590 を左上に置く */
.ai-band{position:absolute;left:0;top:0;width:2088px;height:590px;pointer-events:none}
.ai-band__img{
  position:absolute;inset:0;width:100%;height:100%;max-width:none;
  object-fit:cover;mix-blend-mode:difference;
}
.ai-band__fade{
  position:absolute;inset:0;
  background:linear-gradient(to right, var(--st-white01) 22.379%, rgba(255,255,255,0) 48.605%);
}
.statement__title,
.statement__lead,
.statband{position:relative}

.statement__title{
  font-family:var(--font-mincho);font-weight:600;
  font-size:38px;line-height:normal;letter-spacing:4.56px;
  color:var(--st-black01);white-space:nowrap;
}
.statement__lead{font-size:18px;color:var(--c-text-body);white-space:nowrap}
.statband{
  display:flex;align-items:baseline;justify-content:center;gap:26px;
  color:var(--st-black01);white-space:nowrap;
}
.statband__label,
.statband__unit{font-family:var(--font-gothic);font-weight:500;font-size:24px}
.statband__label{letter-spacing:4.8px}
.statband__unit {letter-spacing:3.36px}
.statband__num{font-family:var(--font-mincho);font-weight:500;font-size:130px;line-height:1}

/* ============================================================
   Products & Services（638:4558）
   ============================================================ */
.services-wrap{padding:0 50px}
.services{
  display:flex;flex-direction:column;align-items:flex-start;gap:30px;
  padding:50px;border-radius:20px;overflow:hidden;
  background:var(--st-logo01);
}
.services__body{display:flex;align-items:flex-start;gap:30px;width:100%}
.svc-list{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0;min-width:0}

.svc-card{
  display:flex;flex-direction:column;align-items:flex-start;gap:15px;
  /* Figma は 568px 固定だが、それは 1366px 時の列幅と同値。
     固定にするとスクロールバーの分だけ列が狭まった時に右へはみ出すため、
     列幅に追従させる（1366px では Figma と同じ 568px になる）。 */
  width:100%;padding:15px 0;overflow:hidden;
  border-top:1px solid var(--c-hairline);
  border-bottom:1px solid var(--c-hairline);
  color:var(--st-white01);
}
.svc-card__eyebrow{font-family:var(--font-mincho);font-weight:400;font-size:14px;letter-spacing:.84px;white-space:nowrap}
.svc-card__name{font-family:var(--font-gothic);font-weight:700;font-size:24px;letter-spacing:1.92px;white-space:nowrap}
.svc-card__desc{font-size:14px;width:100%}

/* 右側のイラスト（638:4593） */
.svc-visual{
  display:flex;align-items:center;justify-content:center;
  flex:1 0 0;min-width:0;align-self:stretch;
  /* Figma の radialGradient を CSS 化（中心 50% / r=284 of 568） */
  background:radial-gradient(circle at 50% 50%,
    #d9d9d9 18.269%, #bcbcbc 32.692%, #a0a0a0 47.115%, #838383 61.538%, #666666 75.962%);
}
.svc-visual__stage{
  display:flex;align-items:flex-start;justify-content:center;gap:9.5px;
  width:418px;height:285px;
}
.svc-visual__node     {width:63.84px;height:80.18px;flex-shrink:0}
.svc-visual__node-tall{width:68.4px; height:102.6px;flex-shrink:0}
.svc-visual__center{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:9.5px;
  height:100%;flex-shrink:0;
}
.svc-visual__connector{width:14px;height:35.15px;flex-shrink:0}

.ai-cube{
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  width:83.6px;height:83.6px;border-radius:21.736px;
  border:1.9px solid rgba(255,255,255,.3);
  background-image:linear-gradient(135deg, #6b6b78 0%, #1a1a1f 71.429%);
  filter:drop-shadow(0 11.4px 13.3px rgba(0,0,0,.5));
}
.ai-cube span{font-family:var(--font-mincho);font-weight:500;font-size:35.112px;color:#f4f3f0}

/* ============================================================
   ダーク地（638:4612）
   ============================================================ */
.dark{background:var(--st-black01)}

/* ---------- Why（638:4613） ---------- */
.why{
  display:flex;flex-direction:column;align-items:flex-start;gap:30px;
  padding:100px;overflow:hidden;white-space:nowrap;
  background:linear-gradient(to bottom, var(--st-white02) 30%, rgba(242,241,238,0) 100%);
}
.why .sec-head{gap:30px}
.why__lead{font-size:14px;line-height:1.9;color:var(--st-black01)}
.why-cards{display:flex;align-items:flex-start;width:100%;overflow:hidden;color:var(--st-white01)}
.why-card{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px;
  flex:1 0 0;min-width:0;padding:30px;overflow:hidden;
  border-left:1px solid var(--st-white01);
  border-right:1px solid var(--st-white01);
}
.why-card__no   {font-family:var(--font-mincho);font-weight:400;font-size:14px;letter-spacing:1.4px}
.why-card__title{font-family:var(--font-mincho);font-weight:600;font-size:24px;letter-spacing:1.92px}
.why-card__desc {font-size:14px;line-height:1.8}

/* ---------- About Us（638:4631） ---------- */
.about-band{
  position:relative;overflow:hidden;
  display:flex;align-items:center;gap:70px;
  padding:110px 100px;
}
.about-band__copy{display:flex;flex-direction:column;align-items:flex-start;gap:70px;flex-shrink:0}
.about-band__head{padding-top:12px;gap:30px;width:449px}
.about-band__head .sec-head__title{color:var(--st-white02)}
.about-band__body{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:76px}
.about-band__catch{
  font-family:var(--font-mincho);font-weight:600;
  font-size:50px;line-height:normal;letter-spacing:5px;
  color:var(--st-white02);white-space:nowrap;
}
/* 数字球（638:4642）: 加算合成でダーク地に浮かせる */
.about-band__sphere{
  position:absolute;left:633px;top:-2px;width:633px;height:633px;
  max-width:none;object-fit:cover;
  mix-blend-mode:plus-lighter;pointer-events:none;
  /* 進入時に 1.06 → 1.0 へ寄る（JS が --sphere-scale を書き込む） */
  transform:scale(var(--sphere-scale,1));
  transform-origin:center;
  will-change:transform;
}

/* ---------- Recruit（638:4643） ---------- */
.recruit-wrap{padding:50px}
.recruit-band{
  position:relative;overflow:hidden;
  display:flex;align-items:center;gap:50px;
  padding:110px 50px;border-radius:20px;
  background:var(--st-white02);
}
.recruit-band__frame{
  position:absolute;left:calc(50% - 447px);top:-109.75px;
  width:1066px;height:799.5px;max-width:none;
  transform:translateX(-50%);pointer-events:none;
}
.recruit-band__visual{
  position:relative;flex:1 0 0;min-width:0;height:360px;border-radius:22px;overflow:hidden;
  background-image:linear-gradient(155.53deg, #e6e5e1 0%, #d4d3cf 71.942%);
}
.recruit-band__visual img{
  position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;
}
.recruit-band__copy{
  position:relative;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;
  align-self:stretch;overflow:hidden;
}
.recruit-band__catch{
  font-family:var(--font-mincho);font-weight:600;
  font-size:32px;letter-spacing:3.2px;color:var(--st-black01);white-space:nowrap;
}
.recruit-band__desc{font-size:14px;line-height:2;color:var(--c-text-body);white-space:nowrap}
.recruit-band__btns{display:flex;align-items:flex-start;gap:14px;overflow:hidden}

.chips{display:flex;align-items:flex-start;gap:10px;overflow:hidden}
.chip{
  padding:6px 16px;border-radius:999px;
  border:1px solid var(--c-chip-border);
  font-size:12px;letter-spacing:.96px;color:var(--c-text-body);white-space:nowrap;
}

/* ---------- CTA（638:4689） ---------- */
.cta{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:34px;
  padding:100px;overflow:hidden;
}
.cta__strip{display:flex;align-items:center;gap:69.53px}
.cta__group{display:flex;align-items:center;gap:46.353px;height:386.426px}
.cta__cell{display:flex;flex-shrink:0;height:100%;padding:4.457px 0}
.cta__cell--a{flex-direction:column;align-items:center;justify-content:center;width:283.468px}
.cta__cell--b{flex-direction:column;align-items:center;justify-content:flex-end;width:200.567px}
.cta__cell--c{align-items:center}
.cta__cell--d{flex-direction:column;align-items:center;justify-content:center;width:225.527px}
.cta__cell--a > *{width:100%;height:185.413px}
.cta__cell--b > *{width:100%;height:149.311px}
.cta__cell--c > *{width:216.613px;height:266.532px}
.cta__cell--d > *{width:100%;height:128.809px}
.cta__cell img{object-fit:cover;background:var(--c-ph)}
.cta__ph{display:block;background:var(--c-ph)}

.cta__foot{display:flex;align-items:center;gap:78px}
.cta__catch{
  font-family:var(--font-mincho);font-weight:600;
  font-size:32px;letter-spacing:3.84px;color:var(--st-white02);white-space:nowrap;
}
.cta__btns{display:flex;align-items:flex-start;overflow:hidden}
.cta__btn-offset{display:flex;align-items:flex-start;justify-content:center;padding-top:100px}

/* ============================================================
   Footer（244:34）
   ============================================================ */
.site-footer{
  display:flex;flex-direction:column;align-items:flex-start;
  width:100%;padding:50px 100px;overflow:hidden;
  background:var(--c-footer-bg);
}
.footer-grid{display:flex;align-items:flex-start;gap:40px;width:100%;overflow:hidden}
.footer-brand{
  display:flex;flex-direction:column;align-items:flex-start;gap:14px;
  flex:1 0 0;min-width:0;overflow:hidden;
}
.footer-brand__tagline{font-size:12px;line-height:2;color:var(--c-text-dim);white-space:nowrap}

/* 縦組みロゴ（244:7 / 162.84×222.67） */
.logo-v{position:relative;flex-shrink:0;width:162.84px;height:222.67px;overflow:hidden}
.logo-v__mark,.logo-v__word-a,.logo-v__word-b{
  position:absolute;
  background-repeat:no-repeat;background-position:center;background-size:100% 100%;
}
.logo-v__mark  {inset:.26% .35% 30.3% 1.15%; background-image:url("../img/logo-mark.webp");background-size:cover}
.logo-v__word-a{inset:90.82% .83% 0 0;       background-image:url("../img/logo-footer-a.svg")}
.logo-v__word-b{inset:74.73% 1.6% 13.94% .92%;background-image:url("../img/logo-footer-b.svg")}

.footer-right{
  display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;
  flex:1 0 0;min-width:0;align-self:stretch;
}
.footer-nav{display:flex;align-items:flex-start;gap:40px;width:100%;font-size:18px;color:var(--c-text-nav);white-space:nowrap}
.footer-nav__col{display:flex;flex-direction:column;align-items:flex-start;gap:30px;flex:1 0 0;min-width:0;overflow:hidden}

.footer-copy{display:flex;flex-direction:column;align-items:flex-end;gap:10px;width:100%}
.footer-copy__rule{
  display:block;width:100%;height:1px;
  /* ナビ最終行の直下に罫線が接する。text-box:trim でリンクの箱が
     キャップ高さまで縮んでいるため、ディセンダ（Knowledgeforce の g）が
     罫線を突き抜けて下線のように見える。その分だけ空ける。 */
  margin-top:10px;
  background:url("../img/footer-divider.svg") no-repeat center/100% 100%;
}
.footer-copy p{font-size:11px;letter-spacing:.88px;color:var(--c-text-dim);white-space:nowrap}

/* ============================================================
   モーション
   ============================================================ */

/* ---------- ボタン: スライドしながら色反転 ---------- */
/* 既定のピル/バー/円は「明るい地 × 濃い文字」。ホバーで濃い地がスライドで入り、
   文字と矢印が白に反転する。矢印は SVG なので filter で反転させる。 */
.btn{position:relative;isolation:isolate}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--st-black01);
  transform:translateX(-101%);
  /* 背景色が左から右へ 0.3s で塗り変わる */
  transition:transform .3s cubic-bezier(.65,0,.35,1);
}
.btn:hover::before,
.btn:focus-visible::before{transform:translateX(0)}

.btn__label{transition:color .3s cubic-bezier(.65,0,.35,1)}
.btn__line{transition:filter .3s cubic-bezier(.65,0,.35,1),transform .3s cubic-bezier(.65,0,.35,1)}
/* ホバーで矢印が右へ進む */
.btn:hover .btn__line,
.btn:focus-visible .btn__line{transform:translateX(8px)}
.btn:hover .btn__label,
.btn:focus-visible .btn__label{color:var(--st-white01)}
.btn:hover .btn__line,
.btn:focus-visible .btn__line{filter:invert(1)}

/* 黒地のボタン（SATELLITE OS）は逆に、白地 × 黒文字へ反転する */
.btn--black::before{background:var(--st-white01)}
.btn--black:hover .btn__label,
.btn--black:focus-visible .btn__label{color:var(--st-black01)}
.btn--black .btn__line{filter:invert(1)}
.btn--black:hover .btn__line,
.btn--black:focus-visible .btn__line{filter:none}

.btn:focus-visible{outline:2px solid var(--st-white01);outline-offset:3px}

/* ---------- スクロールでフェードイン ---------- */
[data-reveal]{
  opacity:0;transform:translateY(24px);
  transition:opacity .9s cubic-bezier(.22,.61,.36,1),transform .9s cubic-bezier(.22,.61,.36,1);
}
[data-reveal].is-inview{opacity:1;transform:none}

/* ---------- ローディング（0 → 100%） ---------- */
.loader{
  position:fixed;inset:0;z-index:1000;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  background:#050505;
  transition:opacity .6s ease,visibility .6s ease;
}
.loader.is-done{opacity:0;visibility:hidden}
.loader__count{
  display:flex;align-items:baseline;
  font-family:var(--font-mono);font-size:64px;color:var(--st-white02);
  font-variant-numeric:tabular-nums;
}
.loader__pct{font-size:24px;margin-left:4px}
.loader__bar{width:240px;height:1px;background:rgba(242,241,238,.2);overflow:hidden}
.loader__bar-fill{
  display:block;width:100%;height:100%;background:var(--st-white02);
  transform:scaleX(0);transform-origin:left center;
}

/* ローディング中は背後をスクロールさせない */
html:not(.is-loaded),
html:not(.is-loaded) body{overflow:hidden}

@media (prefers-reduced-motion:reduce){
  .btn::before{transition:none}
  [data-reveal]{opacity:1;transform:none;transition:none}
  .loader{transition:none}
}

/* ---------- Statement: 背景バンドのスクロール拡大 ---------- */
/* 画像だけを拡大し、白フェードの帯（.ai-band__fade）は動かさない。
   拡大率は JS が --band-scale に書き込む（1 → 1.2）。 */
.ai-band__img{
  transform:scale(var(--band-scale,1));
  transform-origin:left center;
  will-change:transform;
}

/* ---------- 「1,200」を下からフェードイン ---------- */
/* transform / opacity のみで、ベースライン揃え（.statband の align-items:baseline）を壊さない */
[data-reveal="up"]{transform:translateY(56px)}
.statband__num{transition-duration:1.1s}

@media (prefers-reduced-motion:reduce){
  .ai-band__img{transform:none}
  [data-reveal="up"]{transform:none}
}

/* ---------- Products & Services: ホバーでイラストを差し替え ---------- */
/* 既定は Figma の組み立て済みイラスト。カードにカーソルを合わせると
   そのサービスに対応した 418×285 の透過PNG にクロスフェードする。 */
.svc-visual__stage{position:relative}
.svc-art{
  position:absolute;inset:0;
  width:418px;height:285px;
  opacity:0;visibility:hidden;
  transition:opacity .4s ease,visibility .4s ease;
}
.svc-art.is-active{opacity:1;visibility:visible}
/* 既定のイラストだけは中身が flex 組み（画像ではなく SVG の組み立て） */
.svc-art--default{
  display:flex;align-items:flex-start;justify-content:center;gap:9.5px;
}

/* ---------- FirstView: 動きを抑える設定では静止画のままにする ---------- */
@media (prefers-reduced-motion:reduce){
  .fv__video{display:none}
}

/* ---------- Recruit: カードごと下からスライドイン ---------- */
[data-reveal="card"]{
  opacity:0;transform:translateY(64px);
  transition:opacity 1s cubic-bezier(.22,.61,.36,1),transform 1s cubic-bezier(.22,.61,.36,1);
}
[data-reveal="card"].is-inview{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .about-band__sphere{transform:none}
  [data-reveal="card"]{opacity:1;transform:none;transition:none}
  .btn:hover .btn__line,
  .btn:focus-visible .btn__line{transform:none}
}

/* ============================================================
   ABOUT / 私たちについて（Figma 638:5056）
   ============================================================ */

/* ---------- 導入（638:5057） ---------- */
.ab-intro{display:flex;align-items:center;padding:120px 100px 110px;width:100%}
.ab-intro__copy{
  display:flex;flex-direction:column;align-items:flex-start;gap:30px;
  flex:1 0 0;min-width:0;white-space:nowrap;
}
.ab-intro__eyebrow{font-size:11px;letter-spacing:3.3px;color:var(--c-text-dim)}
.ab-intro__title{
  font-family:var(--font-mincho);font-weight:600;
  font-size:40px;line-height:normal;letter-spacing:4px;color:var(--st-black01);
}
.ab-intro__lead{font-size:14px;color:var(--c-text-body)}
.ab-intro__eyebrow,.ab-intro__title,.ab-intro__lead{text-box:trim-both cap alphabetic}

/* ---------- Message（638:5062） ---------- */
.ab-message{
  position:relative;
  display:flex;align-items:center;gap:80px;
  padding:120px 100px 110px;width:100%;
}
.ab-message__copy{
  display:flex;flex-direction:column;align-items:flex-start;gap:30px;
  flex:1 0 0;min-width:0;white-space:nowrap;
}
/* SecHead は滞在中に上端で止まる */
.ab-message__head{position:sticky;top:0;justify-content:center}
.ab-message__body{display:flex;flex-direction:column;align-items:flex-start;gap:30px}
.ab-message__catch{
  font-family:var(--font-mincho);font-weight:600;
  font-size:40px;letter-spacing:4px;color:var(--st-black01);
}
.ab-message__text{display:flex;flex-direction:column;align-items:flex-start;gap:30px;font-size:14px}
.ab-message__desc{color:var(--c-text-body);line-height:normal}
.ab-message__sign{font-weight:500;letter-spacing:1.4px;color:var(--st-black01)}
.ab-message__catch,.ab-message__desc,.ab-message__sign{text-box:trim-both cap alphabetic}

/* 右にはみ出す大きなビジュアル。回転と上下パララックスは JS が --p を書き込む */
.ab-message__visual{
  position:absolute;right:-82px;top:calc(50% - 157px);
  width:723px;height:697px;max-width:none;
  object-fit:cover;pointer-events:none;
  /* Figma 638:5072 は y=-271（セクション上端より上）に置かれる。
     top:calc(50% - 157px) と translateY(-50%) の組み合わせでその位置になる。
     パララックスと回転は、その -50% を消さないよう後ろに重ねる。 */
  transform:translateY(-50%)
            translateY(calc((var(--p,.5) - .5) * 80px))
            rotate(calc((var(--p,.5) - .5) * 16deg));
  will-change:transform;
}

/* ---------- Executives（638:5073） ---------- */
.ab-exec{
  display:flex;align-items:flex-start;justify-content:space-between;
  padding:0 100px 120px;width:100%;overflow:hidden;
  /* 上は透明、下に向かってダークへ落ちる */
  background:linear-gradient(to bottom, rgba(29,29,31,0) 30%, var(--st-black01) 100%);
}
.ab-exec__head{position:sticky;top:0;padding:100px 0;justify-content:center;white-space:nowrap}
.ab-exec__list{display:flex;flex-direction:column;align-items:flex-start;gap:40px;width:620px}

.member{
  display:flex;align-items:flex-start;gap:30px;
  width:100%;padding:40px;overflow:hidden;
  background:var(--st-white01);
  border:1px solid rgba(16,16,18,.07);
  border-radius:24px;
}
.member__inner{
  display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;
  flex:1 0 0;min-width:0;align-self:stretch;line-height:normal;white-space:nowrap;
}
.member__head{
  display:flex;flex-direction:column;align-items:flex-start;gap:15px;
  width:100%;padding-bottom:15px;
  border-bottom:1px solid var(--st-logo01);
}
.member__role{font-size:14px;letter-spacing:1.4px;color:var(--st-logo01)}
.member__name{
  font-family:var(--font-mincho);font-weight:600;
  font-size:26px;letter-spacing:2.6px;color:var(--st-black01);
}
.member__desc{
  font-size:14px;color:var(--c-text-body);
  /* Figma では見出しの罫線（.member__head の下辺 y=59）と、この説明文の
     テキストボックス（y=59）がぴったり接している。text-box-trim は
     欧文のキャップハイトで箱を切るため、和文のかな・漢字は箱の上に
     はみ出す。結果カンプ上でも罫線が文字を横切っているので、
     ここだけカンプから外して余白を入れる。 */
  margin-top:12px;
}
.member__role,.member__name,.member__desc{text-box:trim-both cap alphabetic}

/* ---------- Company Information（638:5095） ---------- */
.ab-company{
  display:flex;align-items:flex-start;gap:60px;
  padding:120px 100px 140px;width:100%;overflow:hidden;
  color:var(--st-white01);white-space:nowrap;
}
.ab-company__head{display:flex;flex-direction:column;align-items:flex-start;gap:30px;flex:1 0 0;min-width:0}
.ab-company__title{font-family:var(--font-mincho);font-weight:500;font-size:80px;line-height:1.05}
.ab-company__sub{font-size:14px;letter-spacing:2.52px}
.ab-company__title,.ab-company__sub{text-box:trim-both cap alphabetic}

.ab-table{display:flex;flex-direction:column;align-items:flex-start;width:620px;overflow:hidden;font-size:14px}
.ab-table__row{
  display:flex;align-items:flex-start;justify-content:space-between;
  width:100%;padding:10px 0 30px;overflow:hidden;
  border-bottom:1px solid var(--st-white01);
}
.ab-table__label{width:100px;flex-shrink:0;font-weight:500;letter-spacing:1.68px}
.ab-table__value{text-align:right;line-height:1.8}
.ab-table__label,.ab-table__value{text-box:trim-both cap alphabetic}

/* ---------- CTABand（638:5115） ---------- */
.ab-cta{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:34px;
  height:768px;padding:100px;width:100%;
}
.ab-cta__art{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;max-width:none;object-fit:cover;
  pointer-events:none;
  transform:scale(calc(1 + var(--p,0) * .2));
  transform-origin:center;
  will-change:transform;
}
.ab-cta__catch{
  position:relative;z-index:1;
  font-family:var(--font-mincho);font-weight:600;
  font-size:50px;letter-spacing:6px;color:var(--st-white01);white-space:nowrap;
  text-box:trim-both cap alphabetic;
}

@media (prefers-reduced-motion:reduce){
  .ab-message__visual,.ab-cta__art{transform:none}
}

/* ============================================================
   下層ページ共通：DarkHero（Figma 638:5761 ほか）
   注記 638:7661「以降の全ページのヒーローもこの同一ルールで統一」
   ============================================================ */
.hero{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;
  height:768px;padding:250px 100px 100px;width:100%;
}
.hero__bg{position:absolute;inset:0;pointer-events:none}
.hero__bg-base{
  position:absolute;inset:0;
  background:linear-gradient(159.79deg, #111114 0%, #0a0a0c 39.568%, #141417 71.942%);
}
/* 背景メディア：scrub で y -12% パララックス＋ scale 1.08→1.0 */
.hero__bg-media{
  position:absolute;inset:0;opacity:.6;overflow:hidden;
  transform:translateY(calc(var(--p,.5) * -12%)) scale(calc(1.08 - var(--p,0) * .08));
  transform-origin:center;
  will-change:transform;
}
.hero__bg-media img{
  position:absolute;left:32.87%;top:-23.78%;
  width:67.13%;height:169.81%;max-width:none;
}
.hero__bg-veil{
  position:absolute;inset:0;
  background:linear-gradient(to left, rgba(29,29,31,0) 37.071%, var(--st-black01) 62.681%);
}
.hero__head{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:15px;white-space:nowrap}
.hero__eyebrow{font-size:11px;letter-spacing:3.3px;color:var(--c-text-dim)}
.hero__title{
  font-family:var(--font-mincho);font-weight:500;
  font-size:100px;line-height:1.02;color:var(--st-white02);
}
.hero__catch{
  position:relative;
  font-family:var(--font-mincho);font-weight:600;
  font-size:42px;line-height:normal;letter-spacing:4.2px;
  color:var(--st-white02);white-space:nowrap;
}
.hero__btns{position:relative;display:flex;align-items:flex-start;gap:14px;overflow:hidden}
.hero__eyebrow,.hero__title,.hero__catch{text-box:trim-both cap alphabetic}

/* ============================================================
   SATELLITE OS（Figma 638:5760）
   ============================================================ */

/* ---------- Issue（638:5773） ---------- */
.issue{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:110px 100px;width:100%;
}
.issue__bg{position:absolute;inset:0;pointer-events:none}
.issue__bg img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
.issue__veil{
  position:absolute;inset:0;
  background:linear-gradient(to bottom, rgba(200,255,254,0), rgba(200,255,254,1));
}
.issue__inner{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:50px;width:100%}
.issue__lead{display:flex;align-items:center;gap:50px;width:100%;white-space:nowrap}
.issue__lead .sec-head{gap:30px}
.issue__desc{font-size:14px;color:var(--c-text-body);text-box:trim-both cap alphabetic}
.issue__list{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px;width:1166px}
.issue__group{display:flex;flex-direction:column}
.issue__group--left {align-items:flex-start}
.issue__group--right{align-items:flex-end;justify-content:center;text-align:right}

/* 白帯 → 文字 の順に出現（注記 638:7907） */
.issue-band{
  display:flex;align-items:center;justify-content:center;
  padding:5px;background:var(--st-white01);
}
.issue-band > span{
  font-family:var(--font-mincho);font-weight:400;
  font-size:35px;line-height:normal;color:var(--st-black01);white-space:nowrap;
  text-box:trim-both cap alphabetic;
}

/* ---------- Plan / Value を載せる中間ブロック（638:5801） ---------- */
.os-mid{
  position:relative;
  background:#c8fffe url("../img/os-mid-bg.webp") no-repeat center top/cover;
}

/* ---------- Plan（638:5803） ---------- */
.plan{position:relative;height:938px;width:100%}
.plan__head{position:absolute;left:100px;top:100px;width:575px}
.plan__visual{position:absolute;left:100px;top:456px;width:517px;height:293px;max-width:none;object-fit:contain}
.plan__list{
  position:absolute;left:691px;top:100px;width:575px;
  display:flex;flex-direction:column;gap:20px;
}
.plan-card{
  position:relative;display:flex;align-items:flex-start;
  width:575px;height:232.6px;
  background:var(--st-white02);border-radius:22px;overflow:hidden;
}
.plan-card__copy{
  display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;
  position:absolute;left:28px;top:26px;width:200px;height:176.6px;
}
.plan-card__eyebrow{
  font-family:var(--font-mincho);font-weight:400;font-size:11px;letter-spacing:1.5px;
  color:var(--c-text-body);white-space:nowrap;
}
.plan-card__name{
  font-family:var(--font-mincho);font-weight:600;font-size:24px;letter-spacing:1.2px;
  color:var(--st-black01);white-space:nowrap;margin-top:8px;
}
.plan-card__desc{font-size:12px;line-height:1.7;color:var(--c-text-body);margin-top:auto}
.plan-card__shot{position:absolute;left:243px;top:26px;width:312px;height:177px;max-width:none}
.plan-card__eyebrow,.plan-card__name,.plan-card__desc{text-box:trim-both cap alphabetic}

/* ---------- Value（638:6325） ---------- */
.value{
  position:relative;display:flex;align-items:flex-start;gap:16px;
  padding:100px;width:100%;
  background:linear-gradient(to bottom, rgba(29,29,31,0) 30%, var(--st-black01) 100%);
}
.value__head{flex:1 0 0;min-width:0;gap:30px;white-space:nowrap}
.value__list{display:flex;flex-direction:column;align-items:flex-start;gap:20px;flex:1 0 0;min-width:0;padding-top:24px;overflow:hidden}
.value__visual{position:absolute;left:128px;top:283px;width:287px;height:287px;max-width:none;object-fit:contain;pointer-events:none}

/* 情報カード（Value / Pricing 共通） */
.info-card{
  display:flex;flex-direction:column;align-items:flex-start;gap:15px;
  width:100%;padding:26px 28px 30px;overflow:hidden;
  background:var(--st-white02);
  border:1px solid rgba(16,16,18,.08);
  border-radius:22px;
  box-shadow:0 16px 36px 0 rgba(20,20,23,.06);
  white-space:nowrap;
}
.info-card__no{font-family:var(--font-mincho);font-weight:400;font-size:14px;letter-spacing:1.12px;color:var(--st-logo01)}
.info-card__title{font-family:var(--font-mincho);font-weight:600;font-size:19px;line-height:1.7;letter-spacing:1.14px;color:var(--st-black01)}
.info-card__title--24{font-size:24px;letter-spacing:1.44px}
.info-card__desc{font-size:14px;line-height:1.8;color:var(--c-text-body)}
.info-card__no,.info-card__title,.info-card__desc{text-box:trim-both cap alphabetic}
.info-card--wide{flex-direction:row;align-items:flex-start}
.info-card__inner{display:flex;flex-direction:column;align-items:flex-start;gap:30px;width:200px}
.info-card__lead{display:flex;flex-direction:column;align-items:flex-start;gap:15px}

/* ---------- WhiteLabel（638:6347） ---------- */
.wl{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:100px;
  padding:100px;width:100%;background:var(--st-black01);
}
.wl__top{display:flex;flex-direction:column;align-items:flex-start;gap:30px;width:100%}
.wl__row{display:flex;align-items:flex-start;justify-content:space-between;width:100%}
.wl__copy{
  display:flex;flex-direction:column;align-items:flex-start;gap:18px;
  width:583px;height:181px;overflow:hidden;white-space:nowrap;
}
.wl__title{font-family:var(--font-mincho);font-weight:500;font-size:80px;line-height:1;color:var(--st-white02)}
.wl__sub{font-size:14px;letter-spacing:2.52px;color:var(--c-text-nav)}
.wl__catch{font-family:var(--font-mincho);font-weight:600;font-size:28px;letter-spacing:2.8px;color:var(--st-white02)}
.wl__desc{font-size:14px;line-height:2;color:var(--c-text-nav)}
.wl__title,.wl__sub,.wl__catch,.wl__desc{text-box:trim-both cap alphabetic}

.wl-diagram{display:flex;align-items:center;flex-shrink:0}
.wl-diagram__monitor{width:232px;height:179px;flex-shrink:0}
.wl-diagram__flow{position:relative;display:flex;flex-direction:column;align-items:center;flex-shrink:0}
.wl-diagram__arrows{width:223px;height:127px;max-width:none}
.wl-diagram__tags{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  width:138px;margin:0 auto;
}
.wl-tag{
  display:flex;align-items:center;justify-content:center;
  width:85px;height:28px;border-radius:10px;
  background:#fff;border:1.4px solid #1a1a1a;
  font-weight:700;font-size:14px;color:#1a1a1a;
}
.wl-diagram__companies{display:flex;flex-direction:column;gap:29.434px;width:149.324px;flex-shrink:0}
.wl-co{display:flex;flex-direction:column;align-items:center;gap:15.794px}
.wl-co img{width:149.324px;height:auto;max-width:none}
.wl-co p{font-weight:700;font-size:14px;color:var(--st-white01);text-box:trim-both cap alphabetic}

/* 注記 638:7333「矢印の線、それぞれのアイコンは、一定時間でグラデーションが光る」 */
@keyframes wl-glow{
  0%,70%,100%{filter:brightness(1)}
  85%       {filter:brightness(1.75)}
}
.wl-diagram .glow{animation:wl-glow 3.6s ease-in-out infinite}
.wl-diagram__flow .glow      {animation-delay:.3s}
.wl-diagram__companies .wl-co:nth-child(1) .glow{animation-delay:.6s}
.wl-diagram__companies .wl-co:nth-child(2) .glow{animation-delay:.9s}
.wl-diagram__companies .wl-co:nth-child(3) .glow{animation-delay:1.2s}

.wl__points{display:flex;flex-direction:column;align-items:flex-start;gap:12px;width:100%;overflow:hidden;white-space:nowrap}
.wl-point{
  display:flex;flex-direction:column;align-items:flex-start;gap:15px;
  width:100%;padding:18px 24px;overflow:hidden;
  background:var(--st-black01);
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
}
.wl-point__label{font-family:var(--font-mincho);font-weight:400;font-size:12px;letter-spacing:1.68px;color:var(--c-text-dim)}
.wl-point__text{font-size:18px;color:var(--st-white02)}
.wl-point__label,.wl-point__text{text-box:trim-both cap alphabetic}

/* ---------- Pricing（638:6536） ---------- */
.pricing{
  position:relative;display:flex;align-items:flex-start;
  width:100%;padding:50px;overflow:hidden;
  background:var(--st-white02);border-radius:20px;
}
.pricing__visual{position:absolute;left:127px;top:181px;width:324px;height:373px;max-width:none;object-fit:contain;pointer-events:none}
.pricing__head{flex:1 0 0;min-width:0;gap:30px;white-space:nowrap}
.pricing__list{display:flex;flex-direction:column;align-items:flex-start;gap:20px;flex:1 0 0;min-width:0;overflow:hidden}

/* ---------- CTABand（638:6560） ---------- */
.os-cta{
  display:flex;flex-direction:column;align-items:center;gap:30px;
  padding:100px;width:100%;background:var(--st-black01);
}
.os-cta__catch{
  font-family:var(--font-mincho);font-weight:600;
  font-size:30px;letter-spacing:3px;color:var(--st-white02);white-space:nowrap;
  text-box:trim-both cap alphabetic;
}
.os-cta__btns{display:flex;align-items:flex-start;gap:16px;overflow:hidden}

/* ---------- 白帯の出現（帯 → 文字） ---------- */
[data-reveal="band"]{
  transform:scaleX(0);transform-origin:left center;
  transition:transform .5s cubic-bezier(.65,0,.35,1);
}
.issue__group--right [data-reveal="band"]{transform-origin:right center}
[data-reveal="band"] > span{
  display:inline-block;opacity:0;
  transition:opacity .45s ease .35s;
}
[data-reveal="band"].is-inview{transform:scaleX(1)}
[data-reveal="band"].is-inview > span{opacity:1}

@media (prefers-reduced-motion:reduce){
  .hero__bg-media{transform:none}
  .wl-diagram .glow{animation:none}
  [data-reveal="band"]{transform:none;transition:none}
  [data-reveal="band"] > span{opacity:1;transition:none}
}

/* ============================================================
   KNOWLEDGEFORCE（Figma 638:6571）
   ============================================================ */
body.kf{background:#add8ff}

/* ヒーロー：背景画像の載せ方だけ OS と異なる（不透明・全幅） */
.hero--kf .hero__bg-media{opacity:1}
.hero--kf .hero__bg-media img{left:8.73%;top:.01%;width:100%;height:118.46%}

/* ---------- Issue（638:6584） ---------- */
.issue--kf{align-items:flex-start;justify-content:flex-start}
.issue--kf .issue__veil{background:linear-gradient(to bottom, rgba(173,216,255,0), #add8ff)}
.issue__inner--kf{gap:30px}
.issue__desc--kf{color:var(--st-black01)}
.issue--kf .sec-head__sub{color:var(--st-black01)}

/* ---------- Feature / Why を載せる中間ブロック（638:6607） ---------- */
/* 背景画像(1427px)がブロック(1291px)より高いので、はみ出しをクリップする。
   しないと絶対配置の画像が後続の CTA セクションの文字の上に乗る（Figma 側もクリップ）。 */
.kf-mid{position:relative;display:flex;flex-direction:column;align-items:flex-start;width:100%;overflow:hidden}
.kf-mid__bg{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:1363px;height:1427px;max-width:none;object-fit:cover;pointer-events:none;
}

/* ---------- Feature（638:6609） ---------- */
.feature{position:relative;display:flex;align-items:flex-start;gap:16px;padding:100px;width:100%}
.feature__head{flex:1 0 0;min-width:0;gap:30px;white-space:nowrap}
.feature__head .sec-head__title,
.feature__head .sec-head__sub{color:var(--st-black01)}
.feature__list{display:flex;flex-direction:column;align-items:flex-start;gap:20px;flex:1 0 0;min-width:0;overflow:hidden}
.feature__visual{
  position:absolute;left:125px;top:321px;width:291px;height:291px;
  max-width:none;object-fit:contain;pointer-events:none;
}
.feat-card{
  display:flex;flex-direction:column;align-items:flex-start;gap:15px;
  width:100%;padding:24px 26px 28px;overflow:hidden;
  background:var(--st-white02);
  border:1px solid rgba(16,16,18,.08);
  border-radius:22px;
}
.feat-card__no{font-family:var(--font-mincho);font-weight:400;font-size:14px;color:var(--st-logo01);white-space:nowrap}
.feat-card__title{
  font-family:var(--font-mincho);font-weight:600;font-size:24px;letter-spacing:1.92px;
  color:var(--st-black01);white-space:nowrap;
}
.feat-card__desc{font-size:14px;line-height:1.8;color:var(--c-text-body);width:523px}
.feat-card__no,.feat-card__title,.feat-card__desc{text-box:trim-both cap alphabetic}

/* ---------- Why Knowledgeforce（638:6631） ---------- */
.whykf{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:50px;
  padding:100px;width:100%;
  background:linear-gradient(to bottom, rgba(29,29,31,0) 30%, var(--st-black01) 100%);
}
.whykf__head{gap:30px;white-space:nowrap}
.whykf__head .sec-head__sub{color:var(--st-black01)}
.whykf__title{
  font-family:var(--font-mincho);font-weight:500;font-size:80px;line-height:1;
  color:var(--st-black01);text-box:trim-both cap alphabetic;
}
.whykf__cols{display:flex;align-items:flex-start;gap:20px;width:100%;overflow:hidden}
.whykf-col{
  display:flex;flex-direction:column;align-items:flex-start;gap:30px;
  flex:1 0 0;min-width:0;padding:30px 30px 32px;overflow:hidden;border-radius:20px;
}
.whykf-col--before{background:var(--st-black01);color:var(--st-white02)}
.whykf-col--after {background:var(--st-white02);color:var(--st-black01)}
.whykf-col__title{
  font-family:var(--font-mincho);font-weight:600;font-size:35px;letter-spacing:2.8px;
  white-space:nowrap;text-box:trim-both cap alphabetic;
}
.whykf-col__list{display:flex;flex-direction:column;align-items:flex-start;gap:15px}
.whykf-col__list li{font-size:14px;line-height:1.8;white-space:pre;text-box:trim-both cap alphabetic}

/* ---------- CTABand（638:6650） ---------- */
.kf-cta{
  overflow:hidden;
  background:
    linear-gradient(90deg, #1d1d1f 0%, #1d1d1f 100%),
    linear-gradient(172.3deg, #0f0f12 0%, #121215 71.942%);
}

/* ============================================================
   CONTACT / お問い合わせ（Figma 638:7092）
   ============================================================ */
.ct-hero{
  display:flex;flex-direction:column;align-items:flex-start;gap:30px;
  padding:120px 100px 0;width:100%;white-space:nowrap;
}
.ct-hero__title{
  font-family:var(--font-mincho);font-weight:500;font-size:100px;line-height:1;
  color:var(--st-black01);text-box:trim-both cap alphabetic;
}
.ct-hero__sub{font-size:14px;letter-spacing:2.52px;color:var(--c-text-body);text-box:trim-both cap alphabetic}

.ct-body{display:flex;align-items:flex-start;gap:50px;padding:80px 200px 130px;width:100%;overflow:hidden}
.ct-copy{display:flex;flex-direction:column;align-items:flex-start;gap:30px;flex-shrink:0;white-space:nowrap}
.ct-copy__catch{
  font-family:var(--font-mincho);font-weight:600;font-size:40px;letter-spacing:4px;
  line-height:normal;color:var(--st-black01);text-box:trim-both cap alphabetic;
}
.ct-copy__desc{font-size:14px;line-height:normal;color:var(--c-text-body);text-box:trim-both cap alphabetic}

/* ---------- FormCard（638:7100） ---------- */
.form-card{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;
  flex:1 0 0;min-width:0;padding:40px;overflow:hidden;
  background:var(--st-white02);
  border:1px solid rgba(16,16,18,.08);
  border-radius:24px;
  box-shadow:0 24px 50px 0 rgba(20,20,23,.08);
}
.field{display:flex;flex-direction:column;align-items:flex-start;gap:8px;width:100%}
/* display:flex にすると行ボックスが 20px になり trim が効かない。
   Figma のラベルは trim 後 10px なので、ブロックのままインラインで並べる。 */
.field__label{
  display:block;
  font-weight:500;font-size:14px;letter-spacing:1.68px;color:var(--c-text-body);
  white-space:nowrap;text-box:trim-both cap alphabetic;
}
.field__required{font-weight:400;letter-spacing:2.24px;color:#b0332b;margin-left:8px}
.field__control{
  width:100%;height:40px;padding:0 14px;
  background:rgba(255,255,255,.8);
  border:1px solid rgba(16,16,18,.12);
  border-radius:14px;
  font-family:var(--font-gothic);font-size:14px;color:var(--st-black01);
  appearance:none;
}
.field__control--area{height:115px;padding:12px 14px;line-height:1.8;resize:vertical}
.field__control:focus-visible{outline:2px solid var(--st-black01);outline-offset:2px}
/* select の下向き矢印 */
select.field__control{
  background-image:linear-gradient(45deg,transparent 50%,var(--c-text-body) 50%),
                   linear-gradient(135deg,var(--c-text-body) 50%,transparent 50%);
  background-position:calc(100% - 20px) 18px, calc(100% - 15px) 18px;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
  padding-right:40px;
}
.form-card__submit{border:0;cursor:pointer;font:inherit}

/* ============================================================
   SATELLITE AI ACADEMY（Figma 638:6661）
   ============================================================ */
body.ac{background:#efc9ff}

.hero--ac .hero__bg-media img{left:-.04%;top:-12.5%;width:112.5%;height:112.5%}
.hero__title--80{font-size:80px;line-height:normal}

.ac-mid{position:relative;display:flex;flex-direction:column;align-items:flex-start;width:100%;overflow:hidden}
.ac-mid__bg{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:1865px;height:1951px;max-width:none;object-fit:cover;pointer-events:none;
}

/* ---------- Service（638:6676） ---------- */
.ac-stats{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:20px;
  padding:110px 100px;width:100%;color:var(--st-black01);white-space:nowrap;
}
.ac-stats__title{font-family:var(--font-mincho);font-weight:500;font-size:100px;line-height:.95}
.ac-stats__sub{font-size:14px;letter-spacing:2.52px}
.ac-stats__desc{font-size:14px;line-height:2}
.ac-stats__title,.ac-stats__sub,.ac-stats__desc{text-box:trim-both cap alphabetic}
.ac-stats__list{display:flex;align-items:flex-start;gap:20px;width:100%;padding-top:20px;overflow:hidden}
.stat-card{
  display:flex;flex-direction:column;align-items:center;gap:15px;
  flex:1 0 0;min-width:0;padding:30px 0 20px;overflow:hidden;
  background:var(--st-white02);border-radius:22px;
  box-shadow:0 16px 36px 0 rgba(20,20,23,.06);
}
.stat-card__num{font-family:var(--font-mincho);font-weight:500;font-size:64px;line-height:1}
.stat-card__label{font-size:18px;letter-spacing:3.96px}
.stat-card__num,.stat-card__label{text-box:trim-both cap alphabetic}

/* ---------- Concept（638:6693） ---------- */
.ac-concept{position:relative;display:flex;align-items:flex-start;gap:16px;padding:100px;width:100%}
.ac-concept__visual{
  position:absolute;left:210px;top:280px;width:286px;height:331px;
  max-width:none;object-fit:contain;pointer-events:none;
}
.ac-concept__head{
  position:sticky;top:0;align-self:flex-start;
  flex:1 0 0;min-width:0;gap:30px;white-space:nowrap;
}
.ac-concept__list{display:flex;flex-direction:column;align-items:flex-start;gap:20px;flex:1 0 0;min-width:0;overflow:hidden}
.feat-card__title--mincho{line-height:1.7;letter-spacing:1.44px}
.feat-card__desc--519{width:519px}

/* ---------- Plan（638:6711） ---------- */
.ac-plan{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:30px;
  padding:100px;width:100%;
  background:linear-gradient(to bottom, rgba(29,29,31,0) 30%, var(--st-black01) 100%);
}
.ac-plan__head{display:flex;flex-direction:column;align-items:flex-start;gap:15px;color:var(--st-black01);white-space:nowrap}
.ac-plan__title{font-family:var(--font-mincho);font-weight:500;font-size:100px;line-height:.95;text-box:trim-both cap alphabetic}
.ac-plan__sub{font-size:14px;letter-spacing:2.52px;text-box:trim-both cap alphabetic}
.ac-plan__list{display:flex;align-items:stretch;gap:20px;width:100%;overflow:hidden}
.ac-plan-card{
  display:flex;flex-direction:column;align-items:flex-start;gap:15px;
  flex:1 0 0;min-width:0;padding:30px;overflow:hidden;
  background:var(--st-white02);
  border:1px solid rgba(16,16,18,.4);
  border-radius:22px;
}
.ac-plan-card__name{font-family:var(--font-mincho);font-weight:400;font-size:35px;line-height:normal;color:var(--st-black01);white-space:nowrap}
.ac-plan-card__lead{
  font-family:var(--font-mincho);font-weight:600;font-size:18px;line-height:1.7;letter-spacing:1.08px;
  color:var(--st-black01);white-space:nowrap;
}
.ac-plan-card__desc{font-size:14px;line-height:1.8;color:var(--c-text-body);width:100%}
.ac-plan-card__spacer{display:block;height:18px;width:100%}
.ac-plan-card__name,.ac-plan-card__lead,.ac-plan-card__desc{text-box:trim-both cap alphabetic}

/* ============================================================
   RECRUIT / 採用情報（Figma 638:6739）
   ============================================================ */
body.rc{background:var(--st-black01)}

/* ---------- Hero（638:6740 ＋ guide 638:6899） ---------- */
.rc-hero{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:50px;
  height:768px;padding:120px 100px 90px;width:100%;
  background:var(--st-black01);
}
/* 背景動画（Figma のヒーローは VIDEO フィル） */
.rc-hero__video{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;max-width:none;object-fit:cover;pointer-events:none;
}
/* guide はドット＋波形を暗い地に描いた1枚絵。screen 合成で暗部を抜き、
   Figma と同じ不透明度 60% で動画の上に重ねる。位置は固定（注記 638:7784）。 */
.rc-hero__guide{
  position:absolute;inset:0;z-index:1;
  width:100%;height:100%;max-width:none;object-fit:cover;pointer-events:none;
  mix-blend-mode:screen;opacity:.6;
}
.rc-hero__copy{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:flex-start;gap:15px;white-space:nowrap;
}
.rc-hero__eyebrow{font-size:11px;letter-spacing:3.3px;color:var(--c-text-dim)}
.rc-hero__title{
  font-family:var(--font-mincho);font-weight:600;font-size:42px;line-height:normal;letter-spacing:4.2px;
  color:var(--st-white02);
}
.rc-hero__lead{font-size:14px;line-height:2;color:var(--c-text-nav)}
.rc-hero__eyebrow,.rc-hero__title,.rc-hero__lead{text-box:trim-both cap alphabetic}
.rc-hero__btns{position:relative;z-index:2;display:flex;align-items:flex-start;gap:14px;overflow:hidden}

/* ---------- Satellite DNA（638:6752） ---------- */
.rc-dna-wrap{display:flex;flex-direction:column;align-items:flex-start;padding:50px;width:100%}
.rc-dna{
  position:relative;overflow:hidden;
  display:flex;align-items:flex-start;
  width:100%;padding:100px 50px;border-radius:20px;
  background:rgba(102,102,102,.3);
}
/* 元は -60deg 回転の帯。回転後の見え方に合わせて配置する */
.rc-dna__ribbon{
  position:absolute;left:-126px;top:calc(50% + 166px);
  width:202.984px;height:928.281px;max-width:none;
  transform:translateY(-50%) rotate(-60deg);
  transform-origin:center;object-fit:cover;pointer-events:none;
}
.rc-dna__head{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:15px;
  flex:1 0 0;min-width:0;white-space:nowrap;
}
.rc-dna__title{font-family:var(--font-mincho);font-weight:500;font-size:80px;line-height:1;color:var(--st-white02)}
.rc-dna__sub{font-size:14px;letter-spacing:2.24px;color:var(--c-text-nav)}
.rc-dna__title,.rc-dna__sub{text-box:trim-both cap alphabetic}

.rc-values{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:30px;
  flex:1 0 0;min-width:0;padding:20px 30px;border-radius:20px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  white-space:nowrap;
}
.rc-value{display:flex;align-items:center;justify-content:space-between;width:100%;overflow:hidden;border-radius:18px}
.rc-value__no{font-family:var(--font-mincho);font-weight:400;font-size:15px;letter-spacing:3px;color:var(--st-white01)}
.rc-value__text{
  font-family:var(--font-mincho);font-weight:600;font-size:18px;line-height:1.6;letter-spacing:1.44px;
  color:var(--st-white02);
}
.rc-value__no,.rc-value__text{text-box:trim-both cap alphabetic}

/* ---------- Fit（638:6786） ---------- */
.rc-fit{display:flex;align-items:stretch;gap:20px;padding:100px;width:100%}
.fit-card{
  display:flex;flex-direction:column;align-items:flex-start;gap:30px;
  flex:1 0 0;min-width:0;padding:32px 32px 34px;overflow:hidden;border-radius:22px;
  white-space:nowrap;
}
.fit-card--no{background:var(--st-white01);border:1px dashed rgba(16,16,18,.2)}
.fit-card--no .fit-card__title{color:var(--c-text-body)}
.fit-card--no .fit-card__list{color:var(--st-logo01)}
.fit-card--yes{
  background:linear-gradient(to bottom, #1c1c20, #101012);
  border:.5px solid #fff;
}
.fit-card--yes .fit-card__title{color:var(--st-white02)}
.fit-card--yes .fit-card__list{color:var(--c-text-nav)}
.fit-card__title{font-family:var(--font-mincho);font-weight:600;font-size:35px;letter-spacing:2.8px;text-box:trim-both cap alphabetic}
.fit-card__list{display:flex;flex-direction:column;align-items:flex-start;gap:15px;font-size:14px;line-height:1.8}
.fit-card__list li{text-box:trim-both cap alphabetic}

/* ---------- 社内風景の自動スクロール（638:6807 ／ 注記 638:6955） ---------- */
.rc-strip{width:100%;height:386.426px;overflow:hidden}
.rc-strip__track{
  display:flex;align-items:center;gap:69.53px;width:max-content;
  animation:rc-strip-scroll 40s linear infinite;
}
.rc-strip__group{display:flex;align-items:center;gap:46.353px;height:386.426px;flex-shrink:0}
.rc-strip__cell{display:flex;flex-shrink:0;height:100%;padding:4.457px 0}
.rc-strip__cell--a{flex-direction:column;align-items:center;justify-content:center;width:283.468px}
.rc-strip__cell--b{flex-direction:column;align-items:center;justify-content:flex-end;width:200.567px}
.rc-strip__cell--c{align-items:center}
.rc-strip__cell--d{flex-direction:column;align-items:center;justify-content:center;width:225.527px}
.rc-strip__cell--a > *{width:100%;height:185.413px}
.rc-strip__cell--b > *{width:100%;height:149.311px}
.rc-strip__cell--c > *{width:216.613px;height:266.532px}
.rc-strip__cell--d > *{width:100%;height:128.809px}
.rc-strip__ph{display:block;background:var(--c-ph)}
/* 2グループ分（＋gap）ぶん動かして原点へ戻すと途切れずに繋がる */
@keyframes rc-strip-scroll{
  from{transform:translateX(0)}
  to  {transform:translateX(calc(-50% - 34.765px))}
}

/* ---------- Positions（638:6826） ---------- */
.rc-pos-wrap{display:flex;flex-direction:column;align-items:flex-start;padding:50px;width:100%}
.rc-pos{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:50px;
  width:100%;padding:100px 50px;border-radius:20px;overflow:hidden;
  background:rgba(102,102,102,.3);
}
.rc-pos__head{display:flex;flex-direction:column;align-items:flex-start;gap:15px;width:100%;color:var(--st-white01);white-space:nowrap}
.rc-pos__title{font-family:var(--font-mincho);font-weight:500;font-size:80px;line-height:.95}
.rc-pos__sub{font-size:14px;letter-spacing:1.96px}
.rc-pos__title,.rc-pos__sub{text-box:trim-both cap alphabetic}
.rc-pos__grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;width:100%}
.pos-card{
  display:flex;flex-direction:column;align-items:flex-start;gap:30px;
  padding:26px 28px 28px;overflow:hidden;border-radius:22px;
  background:var(--st-white02);border:1px solid rgba(16,16,18,.08);
  white-space:nowrap;
}
.pos-card__no{font-family:var(--font-mincho);font-weight:400;font-size:14px;letter-spacing:1.4px;color:var(--st-logo01)}
.pos-card__name{font-family:var(--font-mincho);font-weight:600;font-size:24px;letter-spacing:1.44px;color:var(--st-black01)}
.pos-card__desc{font-size:14px;line-height:1.9;color:var(--c-text-body)}
.pos-card__no,.pos-card__name,.pos-card__desc{text-box:trim-both cap alphabetic}
/* 見出し2つは gap:15px の塊にする */
.pos-card__no + .pos-card__name{margin-top:-15px}

/* ---------- Flow（638:6854）／タイトル固定・カードのみスクロール ---------- */
.rc-flow{display:flex;align-items:flex-start;padding:100px;width:100%;white-space:nowrap}
.rc-flow__head{
  position:sticky;top:0;align-self:flex-start;
  display:flex;flex-direction:column;align-items:flex-start;gap:15px;
  flex:1 0 0;min-width:0;padding:200px 0 100px;
}
.rc-flow__title{font-family:var(--font-mincho);font-weight:500;font-size:80px;line-height:.95;color:var(--st-white01)}
.rc-flow__sub{font-size:14px;letter-spacing:1.96px;color:var(--st-white02)}
.rc-flow__title,.rc-flow__sub{text-box:trim-both cap alphabetic}
.rc-flow__steps{display:flex;flex-direction:column;align-items:flex-start;gap:30px;flex:1 0 0;min-width:0}
.step-card{
  display:flex;flex-direction:column;align-items:flex-start;gap:30px;
  width:100%;padding:30px 50px;overflow:hidden;border-radius:18px;
  background:var(--st-white02);border:1px solid rgba(16,16,18,.08);
}
.step-card__no{font-family:var(--font-mincho);font-weight:400;font-size:14px;letter-spacing:2.24px;color:var(--st-logo01)}
.step-card__name{font-family:var(--font-mincho);font-weight:600;font-size:24px;color:var(--st-black01)}
.step-card__desc{font-size:14px;line-height:1.8;color:var(--c-text-body)}
.step-card__no,.step-card__name,.step-card__desc{text-box:trim-both cap alphabetic}
.step-card__no + .step-card__name{margin-top:-15px}

/* ---------- 集合写真（638:6889）：写真未配置のプレースホルダー ---------- */
.rc-groupphoto{
  width:100%;height:768px;
  /* 写真は assets/img/rc-groupphoto.webp に置く。
     background で当てているので、ファイルが無い間は下地のグレーが出るだけで壊れない。 */
  background:var(--st-logo01) url("../img/rc-groupphoto.webp") no-repeat center/cover;
}

.os-cta__catch--rc{letter-spacing:3.6px}

@media (prefers-reduced-motion:reduce){
  .rc-strip__track{animation:none}
}

/* RECRUIT の CTABand は Figma 側が高さ固定（383px・primaryAxisSizingMode FIXED） */
.rc-cta{height:383px;justify-content:center}

/* ============================================================
   SATELLITE AX（Figma 638:5571）
   ============================================================ */
body.ax{background:#ffe9cd}
.ax-page{position:relative;display:flex;flex-direction:column;align-items:flex-start;width:100%;overflow:hidden}
.ax-page__bg{
  position:absolute;top:540px;left:50%;transform:translateX(-50%);
  width:1865px;height:1951px;max-width:none;object-fit:cover;pointer-events:none;z-index:0;
}
.ax-page > section,.ax-page > .dark{position:relative;z-index:1;width:100%}

.hero--ax .hero__bg-media img{left:-6.68%;top:-22.14%;width:141.95%;height:144.27%}
.hero__catch--40{font-size:40px;letter-spacing:3.2px}

/* ---------- Service（638:5585） ---------- */
.ax-service{
  display:flex;flex-direction:column;align-items:flex-start;gap:30px;
  padding:110px 100px;width:100%;
}
.ax-service__head{display:flex;flex-direction:column;align-items:flex-start;gap:15px;white-space:nowrap}
.ax-service__title{font-family:var(--font-mincho);font-weight:500;font-size:100px;line-height:.95;color:var(--st-black01)}
.ax-service__sub{font-size:14px;letter-spacing:2.52px;color:var(--c-text-body)}
.ax-service__lead{font-size:14px;line-height:2.1;color:var(--c-text-body);width:100%}
.ax-service__title,.ax-service__sub,.ax-service__lead{text-box:trim-both cap alphabetic}

/* 注記 638:7866：行は左右交互に ±24px から中央へスライドイン＋フェード */
.ax-row{display:flex;align-items:flex-start;gap:30px;width:100%;overflow:hidden}
[data-reveal="row"]{
  opacity:0;
  transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .8s cubic-bezier(.22,.61,.36,1);
}
.ax-row--from-left [data-reveal="row"],
.ax-row--from-left{transform:translateX(-24px)}
.ax-row--from-right{transform:translateX(24px)}
[data-reveal="row"].is-inview{opacity:1;transform:none}
/* リード文は行より 0.15s 先行 → 行側を 0.15s 遅らせる */
.ax-row{transition-delay:.15s}

.ax-svc-card{
  display:flex;align-items:flex-start;gap:30px;
  flex:1 0 0;min-width:0;padding:26px 28px 28px;overflow:hidden;
  background:var(--st-white01);
  border:1px solid rgba(16,16,18,.08);
  border-radius:22px;
  box-shadow:0 16px 36px 0 rgba(20,20,23,.06);
}
.ax-svc-card__art{width:150px;height:150px;flex-shrink:0;max-width:none;object-fit:contain}
.ax-svc-card__body{display:flex;flex-direction:column;align-items:flex-start;gap:30px;flex:1 0 0;min-width:0}
.ax-svc-card__head{display:flex;flex-direction:column;align-items:flex-start;gap:15px;white-space:nowrap}
.ax-svc-card__no{font-family:var(--font-mincho);font-weight:400;font-size:14px;color:var(--st-logo01)}
.ax-svc-card__name{font-family:var(--font-mincho);font-weight:600;font-size:24px;line-height:1.7;color:var(--st-black01)}
.ax-svc-card__name--18{font-size:18px}
.ax-svc-card__detail{display:flex;flex-direction:column;align-items:flex-start;gap:15px;width:100%}
.ax-svc-card__desc{font-size:14px;line-height:1.8;color:var(--c-text-body);white-space:nowrap}
.ax-svc-card__rule{display:block;width:100%;height:1px;background:rgba(16,16,18,.12)}
.ax-svc-card__eg{font-size:14px;color:var(--st-logo01);white-space:nowrap}
.ax-svc-card__no,.ax-svc-card__name,.ax-svc-card__desc,.ax-svc-card__eg{text-box:trim-both cap alphabetic}

/* ---------- Feature（638:5694） ---------- */
.ax-feature{
  position:relative;display:flex;align-items:flex-start;gap:16px;padding:100px;width:100%;
  background:linear-gradient(to bottom, rgba(29,29,31,0) 30%, var(--st-black01) 100%);
}
.ax-feature__visual{
  position:absolute;left:125px;top:279px;width:291px;height:291px;
  max-width:none;object-fit:contain;pointer-events:none;
}
.ax-feature__head{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:30px;
  flex:1 0 0;min-width:0;white-space:nowrap;
}
.ax-feature__title{font-family:var(--font-mincho);font-weight:500;font-size:100px;line-height:.95;color:var(--st-black01)}
.ax-feature__sub{font-size:14px;letter-spacing:2.24px;color:var(--c-text-body)}
.ax-feature__title,.ax-feature__sub{text-box:trim-both cap alphabetic}
.ax-feature__list{display:flex;flex-direction:column;align-items:flex-start;gap:20px;flex:1 0 0;min-width:0;overflow:hidden;white-space:nowrap}
.ax-feat-card{
  display:flex;flex-direction:column;align-items:flex-start;gap:30px;
  width:100%;padding:26px 28px 30px;overflow:hidden;
  background:var(--st-white01);border:1px solid rgba(16,16,18,.08);border-radius:22px;
}
.ax-feat-card__head{display:flex;flex-direction:column;align-items:flex-start;gap:15px}
.ax-feat-card__no{font-family:var(--font-mincho);font-weight:400;font-size:14px;color:var(--st-logo01)}
.ax-feat-card__name{font-family:var(--font-mincho);font-weight:600;font-size:24px;letter-spacing:1.44px;color:var(--st-black01)}
.ax-feat-card__desc{font-size:14px;color:var(--c-text-body)}
.ax-feat-card__no,.ax-feat-card__name,.ax-feat-card__desc{text-box:trim-both cap alphabetic}

/* ---------- TrackRecord（638:5716） ---------- */
.ax-track{display:flex;align-items:center;gap:60px;padding:100px;width:100%;overflow:hidden}
.ax-track__head{display:flex;flex-direction:column;align-items:flex-start;gap:15px;flex:1 0 0;min-width:0;overflow:hidden;white-space:nowrap}
.ax-track__title{font-family:var(--font-mincho);font-weight:500;font-size:100px;line-height:1.05;color:var(--st-white02)}
.ax-track__sub{font-size:14px;letter-spacing:2.52px;color:var(--c-text-nav)}
.ax-track__title,.ax-track__sub{text-box:trim-both cap alphabetic}
.ax-stat{display:flex;flex-direction:column;align-items:center;gap:30px;flex-shrink:0;white-space:nowrap}
.ax-stat__num{display:flex;align-items:baseline;gap:10px;color:var(--st-white02)}
.ax-stat__figure{font-family:var(--font-mincho);font-weight:500;font-size:110px;line-height:1;text-box:trim-both cap alphabetic}
.ax-stat__unit{font-family:var(--font-gothic);font-weight:500;font-size:24px;text-box:trim-both cap alphabetic}
.ax-stat__label{font-size:18px;letter-spacing:2.88px;color:var(--c-text-nav);text-box:trim-both cap alphabetic}

/* ---------- Process（638:5729） ---------- */
.ax-process-wrap{display:flex;flex-direction:column;align-items:flex-start;padding:50px;width:100%}
.ax-process{
  display:flex;flex-direction:column;align-items:flex-start;gap:16px;
  width:100%;padding:100px;overflow:hidden;border-radius:20px;
  background:var(--st-white02);white-space:nowrap;
}
.ax-process__head{display:flex;flex-direction:column;align-items:flex-start;gap:15px}
.ax-process__title{font-family:var(--font-mincho);font-weight:500;font-size:100px;line-height:.95;color:var(--st-black01)}
.ax-process__sub{font-size:14px;letter-spacing:2.52px;color:var(--c-text-body)}
.ax-process__title,.ax-process__sub{text-box:trim-both cap alphabetic}
.ax-process__grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;width:100%;padding-top:24px;overflow:hidden}
.phase-card{
  display:flex;flex-direction:column;align-items:flex-start;gap:15px;
  padding:26px 24px;overflow:hidden;border-radius:18px;
  background:var(--st-white01);border:1px solid rgba(16,16,18,.08);
}
.phase-card__no{font-family:var(--font-mincho);font-weight:400;font-size:14px;letter-spacing:1.12px;color:var(--st-logo01)}
.phase-card__name{font-family:var(--font-mincho);font-weight:600;font-size:24px;line-height:1.7;color:var(--st-black01)}
.phase-card__no,.phase-card__name{text-box:trim-both cap alphabetic}

@media (prefers-reduced-motion:reduce){
  .ax-row{transform:none}
  [data-reveal="row"]{opacity:1;transform:none;transition:none}
}

/* ============================================================
   レスポンシブ
   ------------------------------------------------------------
   Figma に SP カンプが無いため、PC カンプ（1366px）から以下の規則で導出している。
   デザインが上がったら、この節を差し替えれば済むよう1か所にまとめてある。

     ブレイクポイント : 1024px（タブレット）/ 600px（スマホ）
     余白             : 100px → 48px → 24px ／ 50px → 24px → 16px
     英字大見出し     : 100px → 64px → 40px
     キャッチ         : 42/40px → 30px → 22px
     本文             : 14px 据え置き（読みやすさ優先）
     2カラム          : 1024px 以下ですべて縦積み
     nowrap           : SP では解除して折り返す
   ============================================================ */

/* ---------- ハンバーガーボタン（1024px 以下で表示） ---------- */
.nav-toggle{
  display:none;
  position:relative;z-index:2;
  width:44px;height:44px;padding:12px 10px;
  background:none;border:0;cursor:pointer;
  flex-direction:column;justify-content:space-between;
}
.nav-toggle span{
  display:block;height:1.5px;width:100%;
  background:var(--st-white01);border-radius:2px;
  transition:transform .3s cubic-bezier(.65,0,.35,1),opacity .2s ease;
}
.is-nav-open .nav-toggle span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.is-nav-open .nav-toggle span:nth-child(2){opacity:0}
.is-nav-open .nav-toggle span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}

@media (max-width:1024px){
  /* ---- ヘッダー ---- */
  .nav-toggle{display:flex}
  .site-header{padding:10px 20px;overflow:visible}
  .site-header__nav{
    position:fixed;left:0;top:70px;
    width:100%;height:calc(100dvh - 70px);
    flex-direction:column;align-items:flex-start;justify-content:center;gap:28px;
    padding:0 32px;
    background:var(--st-black01);
    font-size:22px;letter-spacing:1.6px;
    transform:translateY(-8px);opacity:0;visibility:hidden;
    transition:opacity .3s ease,transform .3s ease,visibility .3s ease;
  }
  .is-nav-open .site-header__nav{transform:none;opacity:1;visibility:visible}
  .is-nav-open,.is-nav-open body{overflow:hidden}
  .site-header__logo{order:-1;margin-right:auto;margin-left:12px}
  .site-header__cta{flex:0 0 auto}
  .site-header__cta .btn__label{font-size:12px}

  /* ---- 共通 ---- */
  .sec-head__title--80,.sec-head__title--96,.sec-head__title--100{font-size:64px}
  .hero__title{font-size:64px}
  .hero__title--80{font-size:52px}
  .hero__catch,.hero__catch--40{font-size:30px;letter-spacing:2px}
  .hero{height:auto;min-height:600px;padding:150px 24px 64px;gap:36px}
  .os-cta,.kf-cta,.rc-cta{padding:64px 24px}
  .os-cta__catch{font-size:22px;letter-spacing:2px}
  .ab-cta__catch{font-size:26px;letter-spacing:2px}
  .ab-cta{height:auto;min-height:420px;padding:64px 24px}
  /* ボタン群は狭いと2つ並びきらないので折り返す */
  .os-cta__btns{flex-wrap:wrap;justify-content:center}
  .hero__btns,.rc-hero__btns,.recruit-band__btns,.fv__btns,.chips{flex-wrap:wrap}
  .btn--pill{max-width:100%}
  .btn__label{white-space:normal}
  .rc-cta{height:auto}

  /* 2カラム → 縦積み（サイト全体で共通の当て方） */
  .statement,.services__body,.about-band,.recruit-band,.cta__foot,
  .ab-message,.ab-exec,.ab-company,.issue__lead,.value,.wl__row,.pricing,
  .feature,.ac-concept,.ax-feature,.ax-track,.rc-dna,.rc-fit,.rc-flow,.ct-body{
    flex-direction:column;align-items:flex-start;gap:32px;
  }
  .services-wrap,.recruit-wrap,.rc-dna-wrap,.rc-pos-wrap,.ax-process-wrap{padding:24px}
  .services,.rc-dna,.rc-pos,.ax-process,.pricing,.recruit-band{padding:48px 24px}
  .statement,.value,.why,.ab-intro,.ab-message,.ab-company,.issue,.feature,
  .ac-stats,.ac-concept,.ac-plan,.ax-service,.ax-feature,.ax-track,.rc-hero,
  .rc-fit,.rc-flow,.ct-hero,.ct-body,
  .ab-exec,.about-band,.cta,.plan{padding-left:24px;padding-right:24px}
  .plan{padding-top:48px;padding-bottom:48px}

  /* 固定幅を可変に */
  .fv__inner,.svc-card,.ab-exec__list,.ab-table,.issue__list,.value__list,
  .feature__list,.ac-concept__list,.rc-values,.wl__copy,.ax-feature__list,
  .ac-plan__list,.pricing__list,.rc-pos__grid,.ax-process__grid,
  .feat-card__desc,.feat-card__desc--519,.ax-service__lead{width:100%}
  .ab-message__copy,.value__head,.feature__head,.ac-concept__head,
  .ax-feature__head,.rc-flow__head,.pricing__head,.ax-track__head{width:100%;flex:none}

  /* sticky 見出しは縦積みでは解除 */
  .ab-message__head,.ab-exec__head,.ac-concept__head,.rc-flow__head{position:static;padding:0}

  /* 装飾ビジュアルは縦積みでは邪魔になるため隠す */
  .ab-message__visual,.value__visual,.ac-concept__visual,.ax-feature__visual,
  .pricing__visual,.plan__visual,.feature__visual,.about-band__sphere,
  .rc-dna__ribbon,.recruit-band__frame{display:none}

  /* 折り返しを許可（PCカンプは nowrap 前提なので、狭い幅では一括で解除する）。
     rc-strip は文字を持たない写真帯なので影響なし。whykf の一覧だけ整列用の空白を保つ。 */
  .page *,.site-footer *{white-space:normal}
  .whykf-col__list li{white-space:pre-wrap}

  /* Products & Services */
  .plan,.pricing{height:auto}
  .plan__head,.plan__visual,.plan__list{position:static;width:100%}
  .plan{display:flex;flex-direction:column;gap:32px}
  .plan-card{width:100%;height:auto;flex-direction:column;padding:24px}
  .plan-card__copy{position:static;width:100%;height:auto}
  .plan-card__shot{position:static;width:100%;height:auto;margin-top:16px}
  .svc-visual__stage{transform:scale(.72);transform-origin:center}

  /* Statement のバンドと数字 */
  .statband{flex-wrap:wrap;gap:12px}
  .statband__num{font-size:72px}

  /* Why / Executives / CTA */
  .why-cards{flex-direction:column;gap:24px}
  .why-card{width:100%;border-left:0;border-right:0;border-top:1px solid var(--st-white01);padding:24px 0}
  .cta__strip{transform:scale(.55);transform-origin:left center}
  .cta__btns{flex-direction:column;gap:16px}
  .cta__btn-offset{padding-top:0}

  /* AX / KF / ACADEMY */
  .ax-row{flex-direction:column}
  .ax-row--from-left,.ax-row--from-right{transform:none}
  .ax-svc-card{flex-direction:column}
  .ax-stat__figure{font-size:72px}
  .ac-stats__list{flex-wrap:wrap}
  .stat-card{flex:1 1 calc(50% - 10px);min-width:140px}
  .whykf__cols,.ac-plan__list{flex-direction:column}
  .whykf__title{font-size:44px}

  /* RECRUIT */
  .rc-hero{min-height:600px;justify-content:flex-end}
  .rc-pos__grid,.ax-process__grid{grid-template-columns:1fr}
  .rc-strip{height:240px}
  .rc-strip__group{height:240px}
  .rc-strip__cell--a > *{height:120px}
  .rc-strip__cell--b > *{height:96px}
  .rc-strip__cell--c > *{width:140px;height:170px}
  .rc-strip__cell--d > *{height:84px}
  .rc-groupphoto{height:320px}
  .fit-card{width:100%}

  /* WhiteLabel の図 */
  .wl{padding:48px 24px;gap:48px}
  .wl-diagram{transform:scale(.7);transform-origin:left center}
  .wl__copy{height:auto}

  /* CONTACT */
  .ct-hero{padding-top:120px}
  .ct-copy{width:100%}
  .form-card{width:100%;padding:24px}

  /* Footer */
  .site-footer{padding:48px 24px}
  .footer-grid{flex-direction:column;gap:32px}
  .footer-right{width:100%;gap:32px}
  .footer-nav{font-size:16px;gap:24px}
  .footer-nav__col{gap:18px}
  .footer-copy{align-items:flex-start}
  .footer-copy p{white-space:normal}
}

@media (max-width:600px){
  .site-header{padding:10px 16px}
  .sec-head__title--80,.sec-head__title--96,.sec-head__title--100,
  .hero__title,.ac-stats__title,.ab-company__title,.ax-service__title,
  .ax-feature__title,.ax-track__title,.ax-process__title,.ac-plan__title,
  .rc-dna__title,.rc-pos__title,.rc-flow__title,.ct-hero__title{font-size:40px}
  .hero__title--80,.whykf__title{font-size:32px}
  .hero__catch,.hero__catch--40{font-size:22px;letter-spacing:1.5px}
  .hero{padding:130px 16px 48px;min-height:520px}

  .statement,.value,.why,.ab-intro,.ab-message,.ab-company,.issue,.feature,
  .ac-stats,.ac-concept,.ac-plan,.ax-service,.ax-feature,.ax-track,.rc-hero,
  .rc-fit,.rc-flow,.ct-hero,.ct-body,.wl,
  .ab-exec,.about-band,.cta,.plan{padding-left:16px;padding-right:16px}
  .services-wrap,.recruit-wrap,.rc-dna-wrap,.rc-pos-wrap,.ax-process-wrap{padding:16px}
  .services,.rc-dna,.rc-pos,.ax-process,.pricing,.recruit-band{padding:32px 16px}
  .os-cta,.kf-cta,.rc-cta{padding:48px 16px}

  .statement__title,.ab-intro__title,.ab-message__catch,.ct-copy__catch{font-size:26px;letter-spacing:2px}
  .statband__num,.ax-stat__figure,.stat-card__num{font-size:52px}
  .issue-band > span{font-size:20px}
  .member,.info-card,.feat-card,.pos-card,.step-card,.ax-svc-card,
  .ax-feat-card,.plan-card,.ac-plan-card,.fit-card,.whykf-col{padding:20px}
  .fit-card__title,.whykf-col__title,.ac-plan-card__name{font-size:24px;letter-spacing:1.5px}
  .rc-value{flex-direction:column;align-items:flex-start;gap:6px}
  .cta__strip{transform:scale(.4)}
  .wl-diagram{transform:scale(.5)}
  .svc-visual__stage{transform:scale(.5)}
  .rc-strip{height:180px}
  .rc-strip__group{height:180px}
  .btn--round{width:150px;height:150px}
  .footer-nav{flex-direction:column;gap:24px}
}

/* ============================================================
   スマホ実機レビューでの指摘対応（2026-08-28）
   上のレスポンシブ指定を後から打ち消す差分。原因ごとにまとめている。
   ============================================================ */

@media (max-width:1024px){

  /* ---------------------------------------------------------
     [原因1] 縦積みにした親の中で flex:1 0 0 が高さ0に潰れる

     PCカンプは横並び前提なので、各カラムに flex:1 0 0（＝基準サイズ0）を
     当てている。これを flex-direction:column にすると「基準の高さが0」に
     化けるため、子が高さ0まで潰れる。多くが overflow:hidden なので
     中身ごと消える（フッターのロゴ・タグライン・ナビが丸ごと消えていた）。
     縦積みのときは伸縮を止める。
     --------------------------------------------------------- */
  .statement > *,.services__body > *,.about-band > *,.recruit-band > *,
  .cta__foot > *,.ab-message > *,.ab-exec > *,.ab-company > *,.issue__lead > *,
  .value > *,.wl__row > *,.pricing > *,.feature > *,.ac-concept > *,
  .ax-feature > *,.ax-track > *,.rc-dna > *,.rc-fit > *,.rc-flow > *,
  .ct-body > *,.footer-grid > *,.footer-right > *{
    flex:none;width:100%;align-self:auto;height:auto;
  }
  /* 絶対配置の装飾オーバーレイは上の一括指定の対象外。PC幅の座標が前提なので隠したまま */
  .about-band__sphere,.recruit-band__frame,.rc-dna__ribbon{display:none}

  /* ---------------------------------------------------------
     [原因2] transform:scale はレイアウト箱を縮めない

     見た目だけ小さくなり、元の大きさぶんの空白が残る（CTA の写真帯は
     1767×386px の箱がそのまま残り、黒い空欄に見えていた）。
     zoom はレイアウト箱ごと縮むので、こちらに置き換える。
     --------------------------------------------------------- */
  .cta__strip{transform:none;zoom:.28}
  .rc-strip{height:auto;overflow:hidden}
  .rc-strip__track{zoom:.45}
  .rc-strip__group{height:386.426px}
  .rc-strip__cell--a > *{height:185.413px}
  .rc-strip__cell--b > *{height:149.311px}
  .rc-strip__cell--c > *{width:216.613px;height:266.532px}
  .rc-strip__cell--d > *{height:128.809px}
  .wl-diagram{transform:none;zoom:.62}
  .svc-visual__stage{transform:none}

  /* ---------------------------------------------------------
     [原因3] イラストを display:none で消していた

     縦積みで邪魔になると判断して隠していたが、装飾ではなく中身。
     絶対配置をやめて、幅いっぱいの1枚として流し込む。
     --------------------------------------------------------- */
  .ab-message__visual,.value__visual,.ac-concept__visual,.ax-feature__visual,
  .pricing__visual,.plan__visual,.feature__visual{
    display:block;position:static;
    width:100%;max-width:320px;height:auto;
    margin:8px auto 0;object-fit:contain;
  }

  /* ---------------------------------------------------------
     [原因4] First View だけレスポンシブ指定が無かった

     height:768px / padding:100px 50px のままで、中身（651px）が
     入りきらず見出しが固定ヘッダーの裏に潜っていた。
     --------------------------------------------------------- */
  .fv{height:auto;min-height:600px;padding:120px 24px 56px}
  .fv__inner{gap:72px;width:100%}
  .fv__title{font-size:28px;line-height:1.9;letter-spacing:2.8px;margin-right:0}
  .fv__btns{flex-wrap:wrap;gap:16px}

  /* ---------------------------------------------------------
     [原因5] Why の白文字が明るい背景の上に乗っていた

     背景は「上は明るく、下へ向かって透明（＝暗い地が出る）」の
     グラデーション。カードは白文字なので、PCでは暗い側に来て読める。
     縦積みでセクションが伸びるとカードが明るい側に入り、文字が消える。
     見出しの直後で暗転を終わらせる。
     --------------------------------------------------------- */
  .why{
    padding:64px 24px;
    background:linear-gradient(to bottom, var(--st-white02) 0, rgba(242,241,238,0) 170px);
  }

  /* ---------------------------------------------------------
     [原因6] Recruit バンドの文字が重なる

     justify-content:space-between ＋ 高さの制約で各行が押し潰され、
     はみ出した文字どうしが重なっていた。上詰め＋行間で組み直す。
     --------------------------------------------------------- */
  .recruit-band__copy{justify-content:flex-start;gap:20px;overflow:visible}
  .recruit-band__visual{height:220px}
  .recruit-band__catch{font-size:26px;letter-spacing:2px;line-height:1.7}
  .recruit-band__desc{line-height:1.9}

  /* ---------------------------------------------------------
     [指摘] CTA のボタンは横一列に
     --------------------------------------------------------- */
  .cta__btns{flex-direction:row;flex-wrap:nowrap;justify-content:center;gap:20px}
  .cta__btn-offset{padding-top:0}
  .btn--round{width:170px;height:170px}
}

@media (max-width:600px){
  .cta__strip{zoom:.185}
  .rc-strip__track{zoom:.34}
  .wl-diagram{zoom:.42}
  .fv{padding:104px 16px 48px;min-height:540px}
  .fv__title{font-size:23px;letter-spacing:2px}
  .fv__inner{gap:56px}
  .why{padding:56px 16px;background:linear-gradient(to bottom, var(--st-white02) 0, rgba(242,241,238,0) 150px)}
  .recruit-band__catch{font-size:22px;letter-spacing:1.5px}
  .btn--round{width:150px;height:150px}
  .cta__btns{gap:14px}
  /* フッターのナビも縦積みになるので、同じ理由で伸縮を止める */
  .footer-nav__col{flex:none;width:100%}
}

/* ============================================================
   1025〜1365px（ノートPC幅）の見切れ対策

   カンプは 1366px 固定で、ほぼ全ての見出し・カードが white-space:nowrap。
   さらに各カラムが flex:1 0 0 + min-width:0 + overflow:hidden なので、
   1366px を1pxでも下回ると文字が黙って切れる（.feat-card / .ax-svc-card /
   .pos-card / .wl__copy などで実測 4〜194px の欠け）。

   この帯だけは組み替えず、ページ全体を縮小してカンプの比率を保つ。
   transform ではなくレイアウト箱ごと縮む zoom を使う。
   ============================================================ */
@media (min-width:1301px) and (max-width:1365px){ html{zoom:.955} }
@media (min-width:1237px) and (max-width:1300px){ html{zoom:.915} }
@media (min-width:1173px) and (max-width:1236px){ html{zoom:.865} }
@media (min-width:1109px) and (max-width:1172px){ html{zoom:.820} }
@media (min-width:1045px) and (max-width:1108px){ html{zoom:.775} }
@media (min-width:1025px) and (max-width:1044px){ html{zoom:.735} }

/* ============================================================
   スマホ実機レビュー 2巡目（Why セクション）
   ============================================================ */
@media (max-width:1024px){
  /* [原因1と同じ] .why-cards も縦積みにしたので、カードの flex:1 0 0 が
     高さ0に潰れ、overflow:hidden で ( 01 ) と説明文が切れていた。 */
  .why-cards > *{flex:none;width:100%;height:auto}
  .why-card{padding:24px 0;overflow:visible}

  /* リード文はカンプでは明るい地の上（濃い文字）。縦積みで暗転位置が
     上がり、暗い地に濃い文字が乗って読めなくなるので、見出しと同じ
     明るい側に留める。 */
  .why{
    padding:64px 24px;
    background:linear-gradient(to bottom, var(--st-white02) 0, var(--st-white02) 212px, rgba(242,241,238,0) 268px);
  }
}
@media (max-width:600px){
  .why{
    padding:56px 16px;
    background:linear-gradient(to bottom, var(--st-white02) 0, var(--st-white02) 232px, rgba(242,241,238,0) 288px);
  }
}


/* ============================================================
   スマホの崩れ 3巡目 ─ 原因を2つに切り分けて一括で当てる
   （個別に潰すとキリがないので、CSS から機械的に抽出した対象に当てている）
   ============================================================ */
@media (max-width:1024px){

  /* [A] flex:1 0 0 が縦積みで高さ0に化ける
         横並び前提のカラム指定。flex-direction:column にすると
         「基準の高さ0」になり、親も子も高さ0に潰れる。
         親の高さが auto の場合は特に、中身ごと消える。 */
  .ab-company__head,
  .ab-intro__copy,
  .ab-message__copy,
  .ac-concept__head,
  .ac-concept__list,
  .ac-plan-card,
  .ax-feature__head,
  .ax-feature__list,
  .ax-svc-card,
  .ax-svc-card__body,
  .ax-track__head,
  .feature__head,
  .feature__list,
  .fit-card,
  .footer-brand,
  .footer-nav__col,
  .footer-right,
  .form-card,
  .member__inner,
  .pricing__head,
  .pricing__list,
  .rc-dna__head,
  .rc-flow__head,
  .rc-flow__steps,
  .rc-values,
  .recruit-band__visual,
  .stat-card,
  .svc-list,
  .svc-visual,
  .value__head,
  .value__list,
  .why-card,
  .whykf-col{
    flex:none;
  }

  /* [B] overflow:hidden で折り返した文字が切れる
         Figma の「コンテンツを切り抜く」をそのまま写しているが、
         折り返しで背が伸びる縦積みでは中身が切れる（実測で
         .ax-svc-card 344px / .whykf-col 268px などが欠けていた）。
         切り抜きが要る箱（背景の焼き込み・ロゴのスプライト・
         写真帯・ボタンのスライド演出）だけ残して解除する。 */
  .ab-company,
  .ab-cta,
  .ab-table,
  .ab-table__row,
  .ac-concept__list,
  .ac-plan-card,
  .ac-plan__list,
  .ac-stats__list,
  .ax-feat-card,
  .ax-feature__list,
  .ax-process,
  .ax-process__grid,
  .ax-row,
  .ax-svc-card,
  .ax-track,
  .ax-track__head,
  .chips,
  .ct-body,
  .cta__btns,
  .feat-card,
  .feature__list,
  .fit-card,
  .footer-brand,
  .footer-grid,
  .footer-nav__col,
  .form-card,
  .hero__btns,
  .info-card,
  .kf-cta,
  .member,
  .os-cta__btns,
  .phase-card,
  .plan-card,
  .pos-card,
  .pricing,
  .pricing__list,
  .rc-hero__btns,
  .rc-pos,
  .rc-value,
  .recruit-band,
  .recruit-band__btns,
  .recruit-band__copy,
  .sec-head,
  .services,
  .stat-card,
  .step-card,
  .value__list,
  .why,
  .why-card,
  .why-cards,
  .whykf-col,
  .whykf__cols,
  .wl-point,
  .wl__copy,
  .wl__points{
    overflow:visible;
  }
}

/* ============================================================
   ファーストビューのボタンはスマホでは常に縦積み

   flex-wrap:wrap にしていたため、375px では折り返して縦、
   400px では横に並んで右端に張り付く、と幅で見え方が変わっていた。
   下層ページのヒーローも同じ2つ組みなので揃える。
   ============================================================ */
@media (max-width:1024px){
  .fv__btns,.hero__btns,.rc-hero__btns{
    flex-direction:column;align-items:flex-start;flex-wrap:nowrap;gap:14px;
  }
}

/* ============================================================
   スマホ実機レビュー 4巡目
   ============================================================ */
@media (max-width:1024px){

  /* [ABOUT] 星のビジュアルが本文に重なる

     縦積み用に position:static にしたが、パララックス用の
     transform:translateY(-50%) … が残っていて 163px ぶん上へ引き上げられ、
     直前の本文に重なっていた。縦積みでは動かす必要がないので止める。 */
  .ab-message__visual,.ab-cta__art,
  .value__visual,.ac-concept__visual,.ax-feature__visual,
  .pricing__visual,.plan__visual,.feature__visual{
    transform:none;
  }

  /* [SATELLITE OS] プランカードの文字が詰まって重なる

     カンプは copy の高さを 176.6px に固定し justify-content:space-between で
     散らしている。縦積みで height:auto にすると余白がゼロになり、
     text-box:trim で箱がキャップ高さまで縮んでいる分、
     見出しの下に説明文がめり込む。行間を明示する。 */
  .plan-card__copy{gap:12px}
  .plan-card__desc{margin-top:0}

  /* [SATELLITE AX] サービスカードのアイコンを中央に

     横並びのときは左のカラムだったが、縦積みでは
     幅いっぱいの中で左端に寄って落ち着かないため中央に置く。 */
  .ax-svc-card__art{align-self:center}
}


/* ============================================================
   スマホ実機レビュー 5巡目
   ============================================================ */
@media (max-width:1024px){

  /* [A の続き] flex:none にしただけでは幅が「内容なり」に縮む

     カンプは align-items:flex-start（左寄せ）なので、伸長を止めた途端に
     カードが中身の幅まで痩せる。Knowledgeforce の比較表は
     400px の画面で 200px しかなかった。
     縦積みにした親は伸ばす、中のカード・リストは幅いっぱいにする。 */
  .os-mid,.kf-mid,.ac-mid,.ax-page,.whykf,.whykf__cols,
  .statement,.services__body,.about-band,.recruit-band,.cta__foot,
  .ab-message,.ab-exec,.ab-company,.issue__lead,.value,.wl__row,.pricing,
  .feature,.ac-concept,.ax-feature,.ax-track,.rc-dna,.rc-fit,.rc-flow,.ct-body,
  .footer-grid,.footer-right,.why-cards,.ac-plan__list,.feature__list,
  .ac-concept__list,.value__list,.pricing__list,.ax-feature__list,
  .rc-flow__steps,.issue__list,.ax-process__grid,.rc-pos__grid{
    align-items:stretch;
  }
  .ab-company__head,
  .ab-intro__copy,
  .ab-message__copy,
  .ac-concept__head,
  .ac-concept__list,
  .ac-plan-card,
  .ax-feature__head,
  .ax-feature__list,
  .ax-svc-card,
  .ax-svc-card__body,
  .ax-track__head,
  .feature__head,
  .feature__list,
  .fit-card,
  .footer-brand,
  .footer-nav__col,
  .footer-right,
  .form-card,
  .member__inner,
  .pricing__head,
  .pricing__list,
  .rc-dna__head,
  .rc-flow__head,
  .rc-flow__steps,
  .rc-values,
  .recruit-band__visual,
  .svc-list,
  .svc-visual,
  .value__head,
  .value__list,
  .why-card,
  .whykf-col{
    width:100%;
  }
  .stat-card{width:auto}   /* ここは2つ並びを保つ */

  /* [ACADEMY / KF] 見出しが背景テクスチャの暗い部分に沈む

     .ac-mid__bg は 1865x1951 の1枚絵を中央寄せで敷いている。
     1366px のカンプでは明るい帯の上に見出しが来るが、スマホでは
     中央の暗い部分だけが見えるため、濃い文字（#1d1d1f）が読めなくなる
     （AI アカデミーの「Plan」が消えていた）。
     明るい下地を敷き、テクスチャは薄く重ねる。 */
  .ac-mid,.kf-mid{background:var(--st-white02)}
  .ac-mid__bg,.kf-mid__bg{
    top:0;left:0;transform:none;
    width:100%;height:100%;object-fit:cover;opacity:.3;
  }
}

/* Knowledgeforce の Why セクションだけ、スマホの余白指定リストから漏れていた
   （padding:100px のままで、400px の画面では中身の幅が 200px しか残らなかった）。 */
@media (max-width:1024px){ .whykf{padding:64px 24px} }
@media (max-width:600px){  .whykf{padding:56px 16px} }

/* ============================================================
   スマホ実機レビュー 6巡目
   ============================================================ */
@media (max-width:1024px){

  /* [TOP] Statement の ASCII バンドはスマホでは出さない

     2088×590 の1枚絵を左上に置き、左 22〜48% を白でフェードして
     文字の背後を抜く作り。画面が狭いと絵の見せ場が残らないため、
     指示により非表示にする（PCはカンプ通り）。 */
  .ai-band{display:none}

  /* [TOP] CTA の写真帯が小さすぎた
     カンプでも 1366px からはみ出して切れる帯なので、
     画面幅に収めきらず、大きさを優先して左右に流す。 */
  .cta__strip{zoom:.55}
}

@media (max-width:600px){
  .cta__strip{zoom:.45}
}

/* ============================================================
   スマホ実機レビュー 7巡目
   ============================================================ */
@media (max-width:1024px){
  /* [TOP] サービスカードのイラストが枠からはみ出す

     .svc-visual__stage は 418px 固定だが、中の人物・矢印は
     flex-shrink:0。狭い画面では stage 自体が 336px まで縮められる一方、
     中身は 418px のまま並ぶので、背景のグラデーション枠から溢れていた。
     stage を縮ませず、収まる倍率まで zoom で落とす。 */
  .svc-visual{overflow:hidden}
  .svc-visual__stage{flex-shrink:0;transform:none;zoom:1}
}
@media (max-width:600px){
  .svc-visual__stage{zoom:.72}
}

/* ============================================================
   About Us の球体をスマホでも出す（ボタンの下）

   PC は右側に絶対配置でせり出す装飾。スマホでは
   「私たちについて」ボタンの直後に回り込ませる。
   DOM 上ももともとコピーの後ろにあるので、縦積みで自然にこの順になる。
   黒地に mix-blend-mode:plus-lighter で重ねているため、
   背景が暗い About Us の中でだけ成立する。
   ============================================================ */
@media (max-width:1024px){
  .about-band__sphere{
    display:block;position:static;left:auto;top:auto;
    width:100%;max-width:300px;height:auto;
    /* 動画のメタデータが届く前でも箱がずれないよう比率を明示（元は 560x560） */
    aspect-ratio:1/1;object-fit:contain;
    margin:16px auto 0;
  }
}
@media (max-width:600px){
  .about-band__sphere{max-width:260px}
}

/* ============================================================
   お問い合わせフォーム：送信結果の表示とハニーポット
   （ハニーポットは WordPress 側でのみ出力される bot 判定用の空欄）
   ============================================================ */
.form-notice{
  margin-bottom:20px;padding:14px 18px;border-radius:12px;
  font-size:14px;line-height:1.7;
}
.form-notice--ok{background:rgba(29,29,31,.06);color:var(--st-black01)}
.form-notice--ng{background:rgba(190,60,60,.08);color:#a33}
.field--hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}