/* index.html 専用のスタイル。site.css から切り出したもの（#212）。
   このファイルは index.html だけが読み込む。共通で使うものは site.css へ戻すこと。 */

@layer utilities {
  .relative {
    position: relative;
  }
  .-mx-5 {
    margin-inline: calc(var(--spacing) * -5);
  }
  .mt-12 {
    margin-top: calc(var(--spacing) * 12);
  }
  .h-1 {
    height: calc(var(--spacing) * 1);
  }
  .h-full {
    height: 100%;
  }
  .w-16 {
    width: calc(var(--spacing) * 16);
  }
  .w-max {
    width: max-content;
  }
  .shrink-0 {
    flex-shrink: 0;
  }
  .overflow-hidden {
    overflow: hidden;
  }
  .overflow-x-auto {
    overflow-x: auto;
  }
  .rounded-full {
    border-radius: 3.40282e38px;
  }
  .bg-border {
    background-color: var(--border);
  }
  .bg-grid {
    background-image:
      linear-gradient(to right, var(--brand) 1px, transparent 1px),
      linear-gradient(to bottom, var(--brand) 1px, transparent 1px);
  }
}

@layer utilities {
  @supports (color: color-mix(in lab, red, red)) {
    .bg-grid {
      background-image:
        linear-gradient(
          to right,
          color-mix(in oklab, var(--brand) 8%, transparent) 1px,
          transparent 1px
        ),
        linear-gradient(
          to bottom,
          color-mix(in oklab, var(--brand) 8%, transparent) 1px,
          transparent 1px
        );
    }
  }
}

@layer utilities {
  .bg-grid {
    background-size: 40px 40px;
  }
  .object-cover {
    object-fit: cover;
  }
  .pb-1 {
    padding-bottom: calc(var(--spacing) * 1);
  }
  .mix-blend-multiply {
    mix-blend-mode: multiply;
  }
  .focus-visible\:ring-2:focus-visible {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0
      calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow:
      var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
      var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .focus-visible\:ring-offset-2:focus-visible {
    --tw-ring-offset-width: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0
      var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }
  .focus-visible\:outline-none:focus-visible {
    --tw-outline-style: none;
    outline-style: none;
  }
}

@layer utilities {
  @media (prefers-reduced-motion: reduce) {
    .motion-reduce\:animate-none {
      animation: none;
    }
  }
}

@layer utilities {
  @media (min-width: 40rem) {
    .sm\:block {
      display: block;
    }
    .sm\:hidden {
      display: none;
    }
  }
}

@layer utilities {
  .logo-cell {
    display: flex;
    height: calc(var(--spacing) * 16);
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    padding-inline: calc(var(--spacing) * 3);
  }
}

@layer utilities {
  @media (min-width: 40rem) {
    .logo-cell {
      height: calc(var(--spacing) * 24);
      padding-inline: calc(var(--spacing) * 4);
    }
  }
}

@layer utilities {
  @media (min-width: 64rem) {
    .logo-cell {
      height: calc(var(--spacing) * 28);
    }
  }
}

@layer utilities {
  .logo-cell-sm {
    display: flex;
    height: calc(var(--spacing) * 20);
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
  }
  .kv-cover {
    pointer-events: none;
    position: absolute;
    /* hero-rise（下に 18px）と kv-float（上に 8px）で背面が覗かないよう余裕を取る。
       はみ出した分はヒーロー section 側の overflow: hidden が切る。 */
    inset: -24px;
    z-index: 0;
    overflow: hidden;
    animation: hero-rise 900ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  .kv-cover-inner {
    width: 100%;
    height: 100%;
    animation: kv-float 11s ease-in-out infinite;
  }
  .kv-cover-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 変更前は width: 120% / right: -80px で左右にはみ出しており、実際に見えて
       いたのは画像の中央付近（約 10%〜93%）だった。cover では横が切れるため、
       その範囲に最も近い center を使う。縦は変更前と同じ上端基準にする
       （画面が横長なときだけ縦が切れる）。 */
    object-position: center top;
  }
}

@layer utilities {
  @media (max-width: 63.9999rem) {
    .kv-cover {
      display: none;
    }
  }
}

@layer utilities {
  .kv-cover-mobile {
    pointer-events: none;
    position: absolute;
    top: 380px;
    right: 0;
    z-index: 0;
    width: 200vw;
    aspect-ratio: 1672 / 941;
    background-image: url(/images/esprot-keyvisual-local-future-final.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
}

@layer utilities {
  @media (min-width: 64rem) {
    .kv-cover-mobile {
      display: none;
    }
  }
}

@layer utilities {
  @media (prefers-reduced-motion: reduce) {
    .kv-cover,
    .kv-cover-inner {
      animation: none !important;
    }
  }
}

/* 縦位置は daaf451 と揃える。旧KVは section に pt-16（固定ヘッダー分の
   4rem）があり、PCではその下の領域で天地中央、SPは上寄せだった。
   同じ見え方になるよう、ヘッダー分の padding-top を持たせたうえで
   SPは flex-start、1024px以上で center にする。 */
.corp-kv__beat {
  position: sticky;
  top: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: flex-start;
  padding-top: 4rem;
  overflow: hidden;
  z-index: 1;
}

@media (min-width: 1024px) {
  .corp-kv__beat {
    align-items: center;
  }
}

.corp-kv__handoff {
  height: 100vh;
}
/* せり上がってKVを覆う側のセクション。
   ⚠️ 1ビューポート以上の高さが必須。KVの containing block（.corp-kv）は
   beat + handoff で2画面分あり、その最後の1画面ぶんは「beatがまだ固定されて
   いる」区間にあたる。ここを覆いきれないと、sticky な beat（z-index:1）が
   後続セクション（z-index:auto）より上に描画され、次のセクションの上部に
   KVの濃紺が残ってしまう（実測：#about が 573px しかなく、ビューポート
   573〜900px にKVが覗いていた）。min-height で1画面を確保して塞ぐ。
   中身は縦センタリングし、1画面を使い切っても間延びして見えないようにする。 */
.corp-rise {
  position: relative;
  z-index: 3;
  margin-top: -100vh;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (max-width: 767px) {
  .corp-kv__beat {
    min-height: 100dvh;
  }
  .corp-kv__handoff {
    height: 100svh;
    height: 100dvh;
  }
  .corp-rise {
    margin-top: -100svh;
    margin-top: -100dvh;
    min-height: 100svh;
    min-height: 100dvh;
  }
}

/* --- KEY VISUAL のビジュアルレイヤー（daaf451の構成をそのまま維持）-------
   奥から順に、grid → 白のディアゴナルwash → cyanのドリフト光 →
   キービジュアル画像（PCは .kv-cover / モバイルは .kv-cover-mobile）。
   .kv-cover 系は既存クラスをそのまま再利用しているため、画像の見え方
   （object-position・浮遊アニメ・PC/SPの出し分け）は旧版と同一。 */
.corp-kv__grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.7;
}
.corp-kv__wash {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 55%);
}
.corp-kv__blob {
  position: absolute;
  top: 25%;
  left: -8rem;
  z-index: 0;
  width: 420px;
  height: 420px;
  border-radius: 999px;
  pointer-events: none;
  background: linear-gradient(to bottom right, rgba(33, 189, 234, 0.14), transparent);
  filter: blur(64px);
  animation: drift 26s ease-in-out infinite;
}
/* モバイルだけ、画面下部のキービジュアルへ向かって淡いブルー→ブルーで沈める */
.corp-kv__mobile-fade {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 0;
  height: 14rem;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent 0%, rgba(205, 234, 245, 0.75) 45%, rgba(47, 125, 196, 0.85) 100%);
}

@media (min-width: 640px) {
  .corp-kv__mobile-fade {
    height: 18rem;
  }
}

@media (min-width: 1024px) {
  .corp-kv__mobile-fade {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .corp-kv__blob {
    animation: none;
  }
}

/* --- KEY VISUAL のコンテンツ（daaf451の型・サイズ・位置を維持）----------
   コンテナは旧KVと同じ 80rem（本文カラムは 32rem）。PC1440で見出し左端が
   112px になり、旧版と同じ位置に揃う。 */
/* KV の紙質感（grain）。KV は WHITE / LIGHT BLUE / DEEP NAVY への置換対象外
   （例外01）なので、背景の色・画像・グラデーションは一切変更していない。
   粒の種類・質感だけをサイト共通＝Recruit の grain system に揃えるための
   レイヤー。z-index は他の装飾層と同じ 0 で、DOM 順により最前面に乗り、
   本文（.corp-kv__inner, z-index 1）より背面に留まる。 */
.corp-kv__layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
/* KV に載せる grain の“レシピ選定”について。
   ⚠️ ここに PHOTO recipe（--corp-grain-photo / overlay / 0.065）を使ってはいけない。
   overlay は「グレー50%＝変化なし」を中心に明暗へ振る合成なので、効き幅が
   (1 - 地の明度) に比例する。Recruit の PHOTO FEATURE は中間調の写真
   （実測 平均輝度 79）なので十分効くが、KV の地は #f3f8fd 〜 明るい空
   （実測 平均輝度 235〜244）で、粒の分散が std +0.00/255 ＝ 実質ゼロになる
   （実測で確認済み）。「紙の質感が地続きに見える」という要件を満たせない。

   そこで Recruit が“最も明るい面”に割り当てているレシピ
   （.fwd-scene--grain-light / .fwd-scene--white.fwd-scene--noise::before
   ＝ --fwd-grain / opacity 0.075 / multiply。コメント曰く「白い面：最も弱く
   （清潔感・余白感を優先）」）をそのまま使う。KV はページ内で最も明るく
   抜けのある面なので、Recruit 自身の基準に照らしてこの値が正しい。
   結果として KV・CLIENTS・Recruit の白面がすべて同一の粒（実測 std 2.08/255）
   になり、値の変化も Recruit の白面と同じ最小量に収まる。 */
.corp-kv__grain {
  background-repeat: repeat;
  background-size: 72px 72px;
  background-image: var(--corp-grain);
  opacity: 0.075;
  mix-blend-mode: multiply;
}
.corp-kv__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 80rem;
  margin-inline: auto;
  padding: 3.5rem 1.25rem;
}

@media (min-width: 640px) {
  .corp-kv__inner {
    padding-block: 5rem;
  }
}

@media (min-width: 1024px) {
  .corp-kv__inner {
    padding: 6rem 2rem;
  }
}

.corp-kv__eyebrow {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--brand);
}
.corp-kv__eyebrow-rule {
  display: block;
  width: 2rem;
  height: 1px;
  margin-top: 0.375rem;
  background: rgba(31, 145, 227, 0.5);
}
.corp-kv__title {
  margin: 1.25rem 0 0;
  font-size: 2rem;
  font-weight: 900;
  line-height: 1.32;
  letter-spacing: -0.01em;
  color: var(--brand-deep);
}
.corp-kv__accent {
  background: linear-gradient(to right, var(--brand-cyan), var(--brand), var(--brand-blue));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.corp-kv__lead {
  margin: 1.25rem 0 0;
  max-width: 32rem;
  font-size: 0.875rem;
  line-height: 1.625;
  color: var(--muted-foreground);
}
/* KVのCTA。pill は廃止し、サイト共通の角型（radius 2px・shadowなし）へ。
   ⚠️ FVの主役は eyebrow・大見出し・背景ビジュアル。ここを濃い色で塗りつぶすと
      CTAが見出しより先に目に入ってしまう。逆に淡いブルーのベタにすると
      背景（実測 PC #ddeaf7〜#e4ecf5 / SP #eef0f5〜#e2eff7）へ埋もれる。
      そこで「白い面＋細い cyan→brand blue のグラデーション罫」で組み、
      面の明るさではなく輪郭でボタンだと分からせる。
      文字と矢印は Business の .biz-more と同じく1本の縦罫で仕切る
      （editorial / thin rule の文法）。 */
.corp-kv__cta {
  position: relative;
  display: inline-flex;
  /* ⚠️ stretch にしないこと。ラベルは素のテキストノード（匿名フレックス
     アイテム）なので、stretch だと行が上端に寄って文字だけ上にずれる。 */
  align-items: center;
  min-height: 50px;
  margin-top: 1.75rem;
  padding-left: 1.5rem;
  /* 枠は transparent border ＋ 2枚backgroundで作る（wrapper要素は増やさない）。
     padding-box側＝白い面、border-box側＝cyan→brand blue のグラデーション。
     ⚠️ 1.5px だと Chromium で 1px に丸められ、FVの上で罫が負ける。2px で固定。
        3px以上・二重枠・glow・shadow は使わない。 */
  border: 2px solid transparent;
  border-radius: 2px;
  /* 面は白。FVの質感と地続きに見せるためほんのわずかだけ透かす（0.94）。
     ⚠️ backdrop-filter / blur は使わない。「白い面」に見えることが優先。
     枠は原色にせずalphaを落とし、罫そのものが主役にならないようにする。
     角度は .corp-phero__scrim と同じ 100deg。 */
  background:
    linear-gradient(rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.94)) padding-box,
    linear-gradient(100deg, rgba(33, 189, 234, 0.72) 0%, rgba(47, 111, 228, 0.62) 100%) border-box;
  color: var(--brand-deep);
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.6;
  text-decoration: none;
  /* hoverは面をほんの少しLIGHT BLUE寄りにし、枠のalphaを上げるだけ。
     scale / translateY / shadow / glow / 濃紺の全面fill は使わない。 */
  transition: background 220ms ease;
}
.corp-kv__cta span {
  display: inline-flex;
  align-items: center;
  align-self: center;
  height: 1.5rem;
  margin-left: 1rem;
  padding: 0 0.85rem;
  /* 白い面の上なので、仕切りは非常に薄いDEEP NAVY系の細線にする */
  border-left: 1px solid rgba(11, 31, 58, 0.15);
  color: var(--brand-cyan);
  font-size: 1rem;
  line-height: 1;
  transition: transform 220ms ease;
}
.corp-kv__cta:hover,
.corp-kv__cta:focus-visible {
  background:
    linear-gradient(rgba(238, 248, 255, 0.96), rgba(238, 248, 255, 0.96)) padding-box,
    linear-gradient(100deg, rgba(33, 189, 234, 0.95) 0%, rgba(47, 111, 228, 0.82) 100%) border-box;
}
.corp-kv__cta:hover span,
.corp-kv__cta:focus-visible span {
  transform: translateX(3px);
}
/* キーボード操作時の現在地。hoverの色変化だけで状態を伝えない */
.corp-kv__cta:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

@media (max-width: 639px) {
  .corp-kv__cta {
    min-height: 48px;
    padding-left: 1.25rem;
  }
  .corp-kv__cta span {
    margin-left: 0.85rem;
    padding: 0 0.75rem;
  }
}

@media (min-width: 640px) {
  .corp-kv__eyebrow {
    font-size: 0.875rem;
  }
  .corp-kv__title {
    font-size: 3rem;
    line-height: 1.28;
  }
  .corp-kv__lead {
    margin-top: 1.5rem;
    font-size: 1rem;
  }
  .corp-kv__cta {
    margin-top: 2.25rem;
  }
}

@media (min-width: 1024px) {
  .corp-kv__title {
    font-size: 3.1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .corp-kv__cta,
  .corp-kv__cta span {
    transition: none;
  }
}

/* BUSINESS：column 型（縦罫で3つの力を仕切る。カードにしない） */
.corp-cols {
  display: grid;
  margin-top: 3rem;
  border-top: 1px solid var(--border);
}

@media (min-width: 900px) {
  .corp-cols {
    grid-template-columns: repeat(3, 1fr);
    border-bottom: 1px solid var(--border);
  }
  /* 3列になる幅では、説明文の行数が事業ごとに違ってもCTAの縦位置が揃うよう、
     本文に下マージンを与えて .corp-col__more の margin-top:auto を効かせる。
     （採用TOPのTEAMで使ったのと同じ考え方） */
  .corp-col__text {
    margin-bottom: 1.75rem;
  }
}

/* 事業ラベル。採用サイトの .fwd-case__num（CASE 01）と同じデザイン言語で、
   DEEP NAVY のベタ塗り＋白文字＋字間の効いた英字にする。角丸は付けない。
   ⚠️ 以前は巨大なゴースト数字だったが、面としての強さが足りず3列が同じ
      テンションに見えたため、塗りのラベルへ置き換えた。 */
.corp-col__num {
  align-self: flex-start;
  display: inline-block;
  padding: 0.35rem 0.9rem;
  background: var(--brand-deep);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 0.18em;
  white-space: nowrap;
}
/* 課題文。事業名より先に「顧客が抱えている状態」を置く構成は維持しつつ、
   本文の導入として本文の直前へ置く（ラベルと事業名を隣り合わせにするため）。 */
.corp-col__issue {
  margin: 1.15rem 0 0;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.65;
  color: var(--muted-foreground);
}
.corp-col__title {
  margin: 0.9rem 0 0;
  font-size: clamp(1.3rem, 1.12rem + 0.75vw, 1.55rem);
  font-weight: 900;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--brand-deep);
}
/* 事業名の下に英字を小さく添える（= .fwd-jobrow__name small と同じ役割）。
   意味を足す要素ではなく、日本語見出しの直後に置く「音の低い段」。 */
.corp-col__en {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--brand-cyan);
}
.corp-col__text {
  margin: 0.7rem 0 0;
  font-size: 0.85rem;
  line-height: 1.9;
  color: var(--muted-foreground);
}
/* NEWS：row 型（カードをやめ、日付＋見出しの一行を罫線で積む） */
.corp-rows {
  margin-top: 3rem;
  border-top: 1px solid var(--border);
}
/* 行全体が押せることが伝わるよう、hoverで面がごく薄く沈む。
   採用サイトの .fwd-jobrow::before（白5%をscaleXで敷く）と同じ考え方を、
   明るい面用に navy 側で薄く敷き直したもの。 */
.corp-row {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 0.35rem 1.5rem;
  /* SPで縦に伸びすぎないよう 1.6rem → 1.45rem（約9%）。PCは下の
     メディアクエリで 1.75rem のまま。 */
  padding: 1.45rem 0;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
}
.corp-row::before {
  content: "";
  position: absolute;
  inset: 0 -1rem;
  z-index: 0;
  background: rgba(11, 31, 58, 0.035);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 300ms ease;
}
.corp-row:hover::before,
.corp-row:focus-visible::before {
  transform: scaleX(1);
}
.corp-row > * {
  position: relative;
  z-index: 1;
}

@media (min-width: 768px) {
  .corp-row {
    grid-template-columns: 8rem 6rem 1fr auto;
    align-items: center;
    padding: 1.75rem 0;
  }
}

/* 日付＝いちばん弱い。読み飛ばして良い情報なので明度を落とす */
.corp-row__date {
  font-size: 0.76rem;
  font-weight: 700;
  color: rgba(79, 93, 111, 0.75);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
/* 区分＝ラベル。採用サイトの .fwd-jobrow__badge（cyanの細枠＋文字）と同じ
   扱いにして、日付とも記事タイトルとも違う「種類」であることを形で示す。 */
.corp-row__tag {
  justify-self: start;
  padding: 0.2rem 0.7rem;
  border: 1px solid rgba(33, 189, 234, 0.55);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--brand);
}
/* 記事タイトル＝この行の主役。日付・区分よりはっきり大きく・太く */
.corp-row__title {
  font-size: clamp(0.98rem, 0.93rem + 0.22vw, 1.12rem);
  font-weight: 800;
  line-height: 1.65;
  color: var(--brand-deep);
  transition: color 220ms ease;
}
.corp-row__arrow {
  display: none;
  font-size: 0.85rem;
  color: var(--brand);
  transition: transform 220ms ease;
}

@media (min-width: 768px) {
  .corp-row__arrow {
    display: block;
  }
}

.corp-row:hover .corp-row__title,
.corp-row:focus-visible .corp-row__title {
  color: var(--brand);
}
.corp-row:hover .corp-row__arrow,
.corp-row:focus-visible .corp-row__arrow {
  transform: translateX(4px);
}
.corp-row:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 4px;
}
/* RECRUIT：split 型（左に主張・右に職種） */
.corp-split {
  display: grid;
  gap: 2.5rem;
  margin-top: 2.5rem;
}

@media (min-width: 900px) {
  .corp-split {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
  }
}

/* 3職種の行。採用サイトの JOB OPENINGS（.fwd-jobrow）のデザイン言語を、
   WHITE 面用に翻訳したもの。番号と和名と矢印を cyan、職種名を DEEP NAVY に
   することで、濃紺版で確立した「主役＝職種名／補助＝cyan」の階層を保つ。
   ⚠️ 巨大カード化はしない。罫線と余白だけで行を仕切る。
   SP では上下 padding を 1.5rem → 1.25rem に詰め、縦の長さを抑える。 */
.corp-roles {
  border-top: 1px solid var(--border);
}
.corp-role {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 2.5rem 1fr auto;
  align-items: center;
  gap: 0 1rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
}

@media (min-width: 900px) {
  .corp-role {
    padding: 1.4rem 0;
  }
}

.corp-role::before {
  content: "";
  position: absolute;
  inset: 0 -1rem;
  z-index: 0;
  background: rgba(33, 189, 234, 0.07);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 300ms ease;
}
.corp-role:hover::before,
.corp-role:focus-visible::before {
  transform: scaleX(1);
}
.corp-role > * {
  position: relative;
  z-index: 1;
}
.corp-role__num {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--brand-cyan);
  font-variant-numeric: tabular-nums;
}
.corp-role__name {
  font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.7rem);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: var(--brand-deep);
}
.corp-role__ja {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--brand-cyan);
}
.corp-role__arrow {
  font-size: 0.95rem;
  color: var(--brand-cyan);
  transition: transform 220ms ease;
}
.corp-role:hover .corp-role__arrow,
.corp-role:focus-visible .corp-role__arrow {
  transform: translateX(4px);
}
.corp-role:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 4px;
}
/* --- TOPページのみ body の overflow を戻す（sticky reveal の前提）--------
   @layer base の `body { overflow-x: hidden }` は、overflow-y が visible の
   ままだと仕様上 overflow-y: auto へ計算され、body 自身が独立したスクロール
   コンテナになる。すると window のスクロール量と body の実スクロール位置が
   ずれ、配下の position: sticky が固定されず素通りする（＝KV→ABOUT の
   sticky reveal が丸ごと効かなくなる。実測で beat が pin されず本文と一緒に
   流れることを確認した）。
   採用TOPでは forward.css が同じ理由で body の overflow を visible へ戻して
   いる。コーポレート側は site.css が全ページ共通のため、TOPページの body に
   だけ付く .page-top で限定する（他ページの横スクロール抑止は据え置き）。
   横スクロールの抑止自体は html 側の overflow-x: hidden がビューポートへ
   伝播して引き続き効く。 */
body.page-top {
  overflow: visible;
}
.corp-about__layer {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}
/* 上端から淡いブルーを落として、KVから覆いかぶさる瞬間の境目を柔らげる */
.corp-about__top-glow {
  inset-inline: 0;
  top: 0;
  height: 10rem;
  background: linear-gradient(to bottom, rgba(140, 190, 225, 0.55), transparent 100%);
}
.corp-about__glow-tl {
  top: -4rem;
  left: -4rem;
  width: 16rem;
  height: 16rem;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(240, 250, 252, 0.35), transparent 72%);
}
.corp-about__glow-br {
  right: -5rem;
  bottom: -6rem;
  width: 18rem;
  height: 18rem;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(4, 12, 28, 0.4), transparent 72%);
}
/* 街並みのキービジュアル。右へ向かって斜めに消えるマスクで、
   本文（左寄せ）側の可読性を確保しつつ絵柄の存在感を残す。 */
.corp-about__photo {
  inset: 0;
  opacity: 0.4;
  background-image: url("/images/esprot-keyvisual-local-future-v5.png");
  background-size: cover;
  background-position: left center;
  -webkit-mask-image: linear-gradient(105deg, black 0%, black 55%, transparent 88%);
  mask-image: linear-gradient(105deg, black 0%, black 55%, transparent 88%);
}
.corp-about__diag {
  inset: 0;
  display: none;
  background: linear-gradient(140deg, rgba(234, 246, 251, 0.25) 0%, rgba(111, 168, 216, 0.35) 42%, rgba(10, 24, 48, 0.47) 100%);
}
.corp-about__vignette {
  inset: 0;
  background: radial-gradient(62% 85% at 28% 55%, rgba(4, 15, 35, 0.55), transparent 72%);
}
/* 紙質感（grain）。旧TOP由来の独自 texture（0.045 / 3oct / 300px, opacity 0.09）
   ＋ noise（0.85 / 2oct / 120px, opacity 0.22）の2枚重ねは廃止し、
   サイト共通＝Recruit の PHOTO grain（.fwd-photo-grain 相当）1枚に統一する。
   背景の色・画像・グラデーションは変更していない（粒の種類・質感のみ統一）。
   実体の値は .corp-photo-grain 側（72px / opacity 0.065 / overlay）。 */
.corp-about__grain {
  inset: 0;
}
.corp-about__ring {
  top: -7rem;
  right: -7rem;
  width: 340px;
  height: 340px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.corp-about__orb {
  bottom: -6rem;
  left: -5rem;
  width: 16rem;
  height: 16rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  filter: blur(48px);
}

@media (min-width: 640px) {
  .corp-about__top-glow {
    height: 13rem;
  }
}

@media (min-width: 1024px) {
  .corp-about__top-glow {
    height: 16rem;
  }
  .corp-about__diag {
    display: block;
  }
  .corp-about__glow-tl {
    width: 20rem;
    height: 20rem;
  }
  .corp-about__glow-br {
    width: 24rem;
    height: 24rem;
  }
  .corp-about__ring {
    top: -8rem;
    right: -5rem;
    width: 420px;
    height: 420px;
  }
}