@charset "UTF-8";
/* ==========================================================================
   b.s. — top.css（TOPページ）
   各ブロックの数値はIllustratorのデザイン座標（幅1280px基準）です。
   --x / --y       : 1行目の書き出し位置とベースライン（ページ上端からのY）
   --fs            : 文字サイズ
   --lh            : 行送り ÷ 文字サイズ
   --scene-y/-h    : セクションの開始Yと高さ
   文字を増やしても崩れにくいよう、各セクションは通常の文書の流れで積み重なり、
   セクションの中だけをデザイン座標で重ねています。
   ========================================================================== */

@layer pages {

  /* =========================
     HERO（ファーストビュー）
  ========================= */
  .p-top-hero { --scene-y: 0; --scene-h: 1161; }
  .p-top-hero__title {
    --scene-y: 0;
    justify-self: stretch;
    font-weight: inherit;
    font-size: inherit;
  }
  .p-top-hero__logo { --x: 672; --y: 352.6; --w: 597.54; }
  .p-top-hero__tagline {
    --x: 462; --y: 812.6; --fs: 46; --lh: 1.7391;
    color: var(--c-ink);
  }

  /* =========================
     人は、まだ、こんなものじゃない。
  ========================= */
  .p-top-people { --scene-y: 1161; --scene-h: 700; scroll-margin-top: calc(360 * var(--u)); } /* 見出しは帯より上へはみ出すため */
  .p-top-people__band { --band-y: 1161; --band-h: 700; --bleed: 40; }
  .p-top-people__title { --x: 53.7; --y: 1227.5; --fs: 79.408; --lh: 1.2039; }
  .p-top-people__body  { --x: 69.4; --y: 1567.8; --fs: 23.55;  --lh: 2.0976; }
  .p-top-people__turn  { --x: 400;  --y: 1717;   --fs: 53;     --lh: 1.6585; }

  /* =========================
     まだないものを想像する。（月面）
  ========================= */
  .p-top-imagine { --scene-y: 1861; --scene-h: 927; }
  .p-top-imagine__band { --band-y: 2088; --band-h: 700; --bleed: 100; }
  .p-top-imagine__list { --x: 113.8; --y: 2008.6; --fs: 26.764; --lh: 2.0998; }
  .p-top-imagine__step { --x: 289.4; --y: 2600.3; --fs: 65.757; --lh: 1.7025; }

  /* =========================
     私たちは、そんな人の可能性を信じています。
  ========================= */
  .p-top-believe { --scene-y: 2788; --scene-h: 227; }
  .p-top-believe__text { --x: 23.4; --y: 2961.9; --fs: 39.592; --lh: 1.2048; }

  /* =========================
     企業だって、まだ、こんなものじゃない。（東京）
  ========================= */
  .p-top-company { --scene-y: 3015; --scene-h: 700; }
  .p-top-company__band  { --band-y: 3015; --band-h: 700; --bleed: 100; }
  .p-top-company__title { --x: 28;    --y: 3280.3; --fs: 64.069; --lh: 1.2; }
  .p-top-company__body  { --x: 535.1; --y: 3432.6; --fs: 23.55;  --lh: 2.0976; }

  /* =========================
     私たちは、外から正解を持ってくる…
  ========================= */
  .p-top-statement { --scene-y: 3715; --scene-h: 566; }
  .p-top-statement__text { --x: 2; --y: 3997; --fs: 68.049; --lh: 1.3711; --ls: 0.0654em; }
  /* デザインで詰められている読点（、）の詰め幅 */
  .p-top-statement__tight--a { margin-right: calc(-18.9 * var(--u)); }
  .p-top-statement__tight--b { margin-right: calc(-27 * var(--u)); }

  /* =========================
     すべては、…（会議）
  ========================= */
  .p-top-inside { --scene-y: 4281; --scene-h: 923; }
  .p-top-inside__band  { --band-y: 4281; --band-h: 696; --bleed: 41; }
  .p-top-inside__body  { --x: 113.4; --y: 4371.8; --fs: 23.55;   --lh: 2.0998; }
  .p-top-inside__title { --x: -11.5; --y: 4942.5; --fs: 127.305; --lh: 1.205; --ls: -0.108em; }

  /* =========================
     まだ存在しない未来へ、ここから。（空）
  ========================= */
  .p-top-future { --scene-y: 5204; --scene-h: 700; }
  .p-top-future__band    { --band-y: 5204; --band-h: 700; --bleed: 84; }
  .p-top-future__message { --x: 427.4; --y: 5305.8; --fs: 23.55;   --lh: 2.0998; }
  /* 「をぶら下げた行：デザインでは2.5px下がっています */
  .p-top-future__message .line--hang { translate: 0 calc(2.5 * var(--u)); }
  .p-top-future__title   { --x: 200.4; --y: 5837.7; --fs: 113.953; --lh: 1.2049; --ls: -0.108em; }

  /* =========================
     ロゴ（締め）
  ========================= */
  .p-top-closing { --scene-y: 5904; --scene-h: 1042; }
  .p-top-closing__tagline { --x: 117; --y: 6299.7; --fs: 35.615; --lh: 1.738; }
  .p-top-closing__logo    { --x: 483.85; --y: 6326.5; --w: 680; }

  /* =========================
     ページナビ
     --bx / --by : 写真枠の位置（--by はこのセクション上端から）
     英字の位置・丸矢印は common.css の c-navlink で共通管理しています
  ========================= */
  .p-top-nav { --scene-y: 6946; --scene-h: 2630; }
  .p-top-nav .c-navlinks { --scene-y: 6946; }

  .c-navlink--philosophy { --bx: 54; --by: 0; }

  .c-navlink--works { --bx: 54; --by: 474; }

  .c-navlink--projects { --bx: 54; --by: 941; }

  .c-navlink--characters { --bx: 54; --by: 1415; }

  /* contact（写真なし）：クリック範囲の枠と、その中の英字位置 */
  .c-navlink--contact { --bx: 300; --by: 2150; --bw: 720; --bh: 260; }
}

/* ==========================================================================
   SMARTPHONE／TABLET（〜1023px）
   幅390pxを基準にしたSP専用の組版です（--s ＝ SPデザインの1px）。
   PCとは別に、改行（index.html の <br class="u-sp">）・文字サイズ・
   写真のトリミング（-sp- の画像）・重なり・並び順を設計しています。
   ========================================================================== */
@layer pages {
  @media (max-width: 1023px) {

    /* ---------- HERO ---------- */
    .p-top-hero { min-height: max(100svh, 600px); justify-content: flex-end; --spb: 90; }
    .p-top-hero__title { width: 100%; --spb: 0; }
    .p-top-hero__tagline { --o: -1; --sx: 20; --sy: 0; --sfs: 21; --sfs-min: 18px; --slh: 1.78; z-index: 3; }
    .p-top-hero__logo { --o: 0; --sx: 34; --sy: -64; --sw: 342; }

    /* ---------- 人は、まだ、こんなものじゃない。 ---------- */
    .p-top-people { --spb: 40; scroll-margin-top: 150px; }
    .p-top-people__title { --o: -1; --sx: 14; --sy: 0; --sfs: 41; --sfs-min: 34px; --slh: 1.22; }
    .p-top-people__band  { --sbh: 620; --sby: -58; }
    .p-top-people__body  { --o: 1; --sx: 22; --sy: -410; --sfs: 15; --sfs-min: 14px; --slh: 1.95; }
    .p-top-people__turn  { --o: 2; --sx: 36; --sy: 36; --sfs: 26; --sfs-min: 23px; --slh: 1.6; }

    /* ---------- まだないものを想像する。 ---------- */
    .p-top-imagine { --spb: 30; }
    .p-top-imagine__list { --o: 0; --sx: 22; --sy: 96; --sfs: 16; --sfs-min: 14.5px; --slh: 2; }
    .p-top-imagine__band { --o: 1; --sbh: 560; --sby: -64; }
    .p-top-imagine__step { --o: 2; --sx: 24; --sy: -236; --sfs: 34; --sfs-min: 29px; --slh: 1.55; }

    /* ---------- 私たちは、そんな人の可能性を信じています。 ---------- */
    .p-top-believe { --spb: 0; }
    .p-top-believe__text { --sx: 18; --sy: 48; --sfs: 22; --sfs-min: 19px; --slh: 1.3; }

    /* ---------- 企業だって、まだ、こんなものじゃない。 ---------- */
    .p-top-company { --spb: 0; }
    .p-top-company__band  { --o: 0; --sbh: 680; --sby: -30; }
    .p-top-company__title { --o: 1; --sx: 14; --sy: -620; --sfs: 36; --sfs-min: 31px; --slh: 1.25; }
    .p-top-company__body  { --o: 2; --sx: 22; --sy: 170; --sfs: 15; --sfs-min: 14px; --slh: 1.95; }

    /* ---------- 私たちは、外から正解を持ってくる… ---------- */
    .p-top-statement { --spb: 70; }
    .p-top-statement__text { --sx: -4; --sy: 130; --sfs: 34; --sfs-min: 28px; --slh: 1.32; --sls: 0.04em; }
    .p-top-statement__tight--a,
    .p-top-statement__tight--b { margin-right: 0; }

    /* ---------- すべては、…（会議） ---------- */
    .p-top-inside { --spb: 0; }
    .p-top-inside__band  { --o: 0; --sbh: 660; --sby: 0; }
    .p-top-inside__body  { --o: 1; --sx: 22; --sy: -620; --sfs: 15; --sfs-min: 14px; --slh: 1.95; }
    .p-top-inside__title { --o: 2; --sx: -6; --sy: 170; --sfs: 58; --sfs-min: 48px; --slh: 1.16; --sls: -0.09em; }

    /* ---------- まだ存在しない未来へ、ここから。 ---------- */
    .p-top-future { --spb: 30; }
    .p-top-future__band    { --o: 0; --sbh: 640; --sby: -90; }
    .p-top-future__message { --o: 1; --sx: 34; --sy: -470; --sfs: 15; --sfs-min: 14px; --slh: 2; }
    .p-top-future__title   { --o: 2; --sx: 18; --sy: 30; --sfs: 54; --sfs-min: 46px; --slh: 1.18; --sls: -0.09em; }

    /* ---------- ロゴ（締め） ---------- */
    .p-top-closing { --spb: 100; }
    .p-top-closing__tagline { --sx: 22; --sy: 110; --sfs: 18; --sfs-min: 16px; --slh: 1.78; z-index: 3; }
    .p-top-closing__logo    { --sx: 48; --sy: -8; --sw: 322; }

    /* ---------- ページナビ ---------- */
    .p-top-nav { --spb: 60; }
  }
}

/* ==========================================================================
   TABLET（560〜1023px：大きめのスマートフォン横向き〜タブレット）
   写真と文字の重なりを保つため、TOPでは文字も写真の高さと同じ比率（--sv）で拡大します。
   ========================================================================== */
@layer pages {
  @media (min-width: 560px) and (max-width: 1023px) {
    .p-top { --sf: var(--sv); }
  }
}