/* ===========================================================
   05-brand — 社名の由来（球体グラフィック）

   カンプでは「球体」「網」「幕」「ロゴ」が別レイヤーで、
   球体だけがヒーローのアーチと同じ扱い＝画面に貼り付く。
   スクロールすると網とロゴだけが流れ、幕が上がって球体を覆い隠す。

   実測（Figma / Frame 1 は 1366幅）:
     球  `_レイヤー_1`    X=495 Y=4164  375×375
     網  `Layer_1`       X=473 Y=3979  419×654
     幕2 `Rectangle 150` X=0   Y=4432 1366×1818
                         0% EFF0EE 不透明度0 / 12% 100% / 87% 100% / 100% 0
     ロゴ `aixeed_logo 1` X=301 Y=4318  218×53

   基準箱は網（419×654）。各要素はそこからの％で置く:
     球   left (495-473)/419 = 5.25%    top (4164-3979)/654 = 28.29%  w 375/419 = 89.5%
     幕   top  (4432-3979)/654 = 69.27%  h 1818/654 = 278%
     ロゴ left (301-473)/419 = -41.05%  top (4318-3979)/654 = 51.83%  w 218/419 = 52.03%

   ⚠️ DOM順がそのまま重なり順。球 → 網 → 幕 → ロゴ の順を崩さないこと。
      並べ替えると幕が球を隠せなくなる。
   =========================================================== */

.sec-brand {
  padding-block: 120px;               /* PROVISIONAL */
}

/* カンプでは網の上端が「私たちについて」の本文に **食い込んでいる**。
   実測: `Frame 274`（AI仙人のテキスト塊）X=42 Y=3832 460×189 → 本文下端 Y4021
         網 `Layer_1` 上端 Y3979
         → 網は本文の下端より 42px 上から始まる（＝最後の2行に重なる）

   実装では ABOUT の padding-bottom(120) + BRAND の padding-top(120) が挟まって
   +240px 空いていた。カンプの −42px にするには 282px 詰める必要がある。
   パディングは 0 未満にできないので、負のマージンで引き上げる。
     240（現状の空き） + 42（食い込み） = 282

   ⚠️ 120 + 120 + 42 = 282 という足し算なので、上下どちらかのセクションの
      パディングを変えたらこの値も直すこと。

   狭い画面で網が本文に重なると可読性が落ちるので PC だけに効かせている。
   SPカンプ未照合。 */
@media (min-width: 1100px) {
  .sec-brand {
    margin-top: -282px;
  }
}

/* グリッドにはしない。カンプではコピーが球体の右端に 26px 食い込んでいて、
   カラムで割ると再現できない（実測でも 47px 外側にズレていた）。
   ビジュアルだけを流しに置いて高さの基準にし、コピーは絶対配置で乗せる。 */
.sec-brand__inner {
  position: relative;
}

/* 網の箱＝すべての基準。実測 419×654。 */
/* ロゴの % 指定の基準箱。従来 .sec-brand__visual が担っていた寸法を
   そのまま引き継ぐので、PC の見た目は一切変わらない。
   SP ではここを flex にしてロゴを球体の上へ持ち上げる。 */
.sec-brand__stage {
  position: relative;
  width: 100%;
  max-width: 419px;
  margin-inline: auto;
}

.sec-brand__visual {
  position: relative;
  width: 100%;
  aspect-ratio: 419 / 654;
}

/* --- 球体（画面に貼り付く） ---------------------------------

   sticky を使う。position: fixed ではアーチと両立しない:
   アーチはページ上部で「見えている」必要があり、球体は同じ場所で
   「隠れている」必要がある。1枚の幕で両立できず、重なり順を解くと
   球 > 幕1 > アーチ > 幕2 > 球 で循環して解けない。
   sticky なら自分の帯（.sec-brand__pin）の中だけで画面に貼り付くので、
   見え方は同じまま衝突しない。

   pin の高さ = 球375 + 貼り付いていてほしい距離。
   幕は球の上端より 268px 下から始まるので、完全に覆うには
   268 + 375 = 643px の相対移動が要る。余裕を見て 700px 取る。 */
.sec-brand__pin {
  position: absolute;
  left: 5.25%;
  top: 28.29%;
  width: 89.5%;
  height: 1075px;                     /* 375 + 700 */
  pointer-events: none;
}

.sec-brand__sphere {
  position: sticky;
  /* 画面のどこで貼り付くか。球の中心が画面中央に来る位置。
     縦の短い端末で天井に貼り付いてしまわないよう下限を切る。 */
  top: max(24px, calc(50vh - 187px));
  width: 100%;
  height: auto;                       /* width/height 属性の打ち消し（必須） */
}

/* --- 網（普通に流れる） ------------------------------------- */

.sec-brand__mesh {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* --- 幕2（球体を覆い隠す） ---------------------------------

   カンプの `Rectangle 150` は全幅なので、コンテナを突き抜けて画面いっぱいに伸ばす。
   球体より手前・本文より奥に入る。

   ⚠️ 高さはカンプの 1818px（=278%）にしないこと。
      この幕は position: absolute ＝「位置指定された要素」の層に入るので、
      position: static のセクション（`.sec-careers`）の背景より手前に来る。
      1818px だと CAREERS の暗い帯に 603px 食い込んで塗り潰してしまう。
      カンプで 1818px あるのは静止画だから許されているだけ。

      必要な長さは「球体が貼り付き終わる位置まで」だけ:
        pin 下端 = 28.29%×654 + 1075 = 1260（ビジュアル箱の上端から）
        幕の上端 = 69.27%×654 = 453
        差 = 807px → 余裕を見て 850px
      カンプの下端フェード（87%→100%）も不要。幕の下は 幕1 が同じ地色を
      敷いているので、途中で切っても継ぎ目が出ない。 */
.sec-brand__veil {
  position: absolute;
  left: 50%;
  top: 69.27%;
  width: 100vw;
  height: 850px;                      /* 必要量 807px + 余裕 */
  transform: translateX(-50%);
  background: linear-gradient(
    to bottom,
    rgb(243 244 243 / 0) 0,
    var(--bg-base) 218px,             /* 実測: 1818×12% = 218px のフェードイン */
    var(--bg-base) 100%
  );
  pointer-events: none;
}

/* --- ロゴ（普通に流れる） ----------------------------------
   基準箱の左外へ張り出す。カンプでも球体の左半分にかかる。 */
.sec-brand__logo {
  position: absolute;
  left: -41.05%;
  top: 51.83%;
  width: 52.03%;
  height: auto;
  pointer-events: none;
}

/* --- コピー -------------------------------------------------

   実測（Figma `Frame 276` / 縦Auto Layout・間隔0・パディング0）:
     X=844 Y=4274 W=326 H=168
     見出し Zen Kaku Gothic New Bold    20px / 行間 220% → 44px（1行）
     本文   Zen Kaku Gothic New Regular 14px / 行間 220% → 31px×4行 = 124px
     44 + 124 = 168 ✓ 間隔0なので margin-top も 0。

   位置（コンテナ 1282 = 42〜1324 基準）:
     左  844 - 42 = 802        → 802/1282  = 62.56%
     幅の上限 1324 - 844 = 480 → 480/1282  = 37.44%
     縦  コピー中心 4274+84 = 4358 ≒ 球体中心 4351.5
         → ビジュアル箱（Y3979 起点・高さ654）の 372.5/654 = 56.96% に中心を置く

   ※ 本文は 387px あり見出し（326）より広い。カンプでも枠からはみ出しているので
     width は max-content にして折り返させない。改行位置は <br> で固定済み。 */
.sec-brand__title {
  font-size: 20px;                    /* 実測 */
  font-weight: 700;
  line-height: 2.2;                   /* 実測 220% */
}

.sec-brand__body {
  margin-top: 0;                      /* 実測: Auto Layout の間隔が 0 */
  font-size: var(--fs-body);          /* 実測 14px */
  line-height: 2.2;                   /* 実測 220% */
}

@media (min-width: 1100px) {
  .sec-brand__copy {
    position: absolute;
    left: 62.56%;
    top: 56.96%;
    width: max-content;
    max-width: 37.44%;
    transform: translateY(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  /* 貼り付きも「動き」なので止める。静止したカンプそのものになる。 */
  .sec-brand__pin {
    height: auto;
  }

  .sec-brand__sphere {
    position: static;
  }
}

/* ===========================================================
   TB / SP — 球体を上、テキストを下に。
   =========================================================== */

@media (max-width: 1099px) {
  /* 絶対配置は PC だけ。ここでは普通の流しでビジュアルの下に積む。 */
  .sec-brand__copy {
    margin-top: 40px;
  }
}

@media (max-width: 767px) {
  /* ✅ SPカンプ実測（網 `Layer_1`: X=41 / Y=6206 / 293×459）。
     左右41pxで中央。PCの「球体の左にロゴ」ではなく、
     **ロゴ → 球体 → 見出し → 本文 をすべて中央揃えで縦積み**になる。 */
  .sec-brand {
    padding-block: 64px;              /* PROVISIONAL */
  }

  .sec-brand__stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 293px;                 /* 実測 網の幅 */
  }

  /* ロゴを通常フローに戻し、order で球体の上へ。
     ✅ SPカンプ実測（2026-08-12）:
          ロゴ  X=77  Y=6141  W=217.52  H=53.12  → 下端 6194.12
          網    X=41  Y=6206  W=293     H=459
        間隔 = 6206 − 6194.12 = 11.88 ≒ 12px
        ロゴ中心 77+217.52/2 = 185.76（画面中心187.5）→ 実質中央揃え

     ⚠️ 以前は幅206px・間隔54pxの目測値だった。
        **間隔が4倍以上開いていて、ロゴと網が離れすぎていた。** */
  .sec-brand__logo {
    position: static;
    order: -1;
    width: 217.5px;                   /* 実測 217.52 */
    height: auto;
    margin-bottom: 12px;              /* 実測 11.88 */
  }

  /* ✅ SPカンプ実測（2026-08-12）:
       球 X=54.73 Y=6316.75  262.39×262.39
       網 X=41    Y=6206     293×459
     網を基準にした比率:
       左  (54.73 − 41)   / 293 = 4.69 %
       上  (6316.75−6206) / 459 = 24.13 %
       幅   262.39        / 293 = 89.55 %

     ⚠️ PCの比率（左5.25% / 上28.29%）をSPにも流用していたため、
        **球体が約4%（≒19px）下にずれていた。**
        PCとSPで球と網の関係が違うので、両方を別に持つこと。 */
  .sec-brand__pin {
    left: 4.69%;
    top: 24.13%;
    width: 89.55%;
    /* pin の高さ ＝ 球が幕に完全に隠れるまでの移動距離 ＋ 球の高さ。
       PCと「同じ考え方」で出すが、**幕までの距離が違うので数値は変わる**。

       SP:
         球の上端  網457 × 24.13% = 110.3
         幕の上端  316.79（幕は上から218pxかけて不透明になる）
         球が完全に隠れる位置 = 316.79 + 218 = 534.8
         必要な移動 = 534.8 − 110.3 = 424.5
         pin = 球262 + 424.5 = 686.5 → 余裕を見て 700

       ⚠️ ここを PC と同じ 1075px にすると、**幕に隠れる前に球が
          セクションを飛び出し、VISION の文字の上に重なる**（実際に出した）。
          セクションの高さが違う以上、同じ数値は使えない。 */
    height: 700px;
  }

  /* 球の中心を画面中央に置く。球径が違うので PC（187）とは数値が変わる。 */
  .sec-brand__sphere {
    top: max(16px, calc(50vh - 131px));
  }

  .sec-brand__veil {
    height: 560px;                    /* PROVISIONAL */
  }

  /* カンプでは見出し・本文とも中央揃え。 */
  .sec-brand__copy {
    margin-top: 46px;                 /* PROVISIONAL */
    text-align: center;
  }

  .sec-brand__body {
    font-size: var(--sp-fs-body);
  }
}