@charset "UTF-8";
/* ==========================================================================
   b.s. — projects.css（projects）
   数値はIllustratorのデザイン座標（幅1280px基準）。
   各プロジェクト＝大きなタイトル（画面端からはみ出す）＋白い円＋紹介文。
   リンクがあるのは「仕事は、冒険だ。」「就活に、個性を。」（外部サイト）「三代目PROJECT」です。
   プロジェクトは左右交互（円が右→左→右…）。「就活に、個性を。」の追加（v1.0.3）で、三代目PROJECT以降は左右を入れ替えています。
   ========================================================================== */

@layer pages {
  .c-pagehero { --scene-h: 850; }

  /* 導入 */
  .p-proj-intro { --scene-y: 850; --scene-h: 550; }
  .p-proj-intro__text { --x: 156.8; --y: 921.4; --fs: 31.891; --lh: 1.4719; --ls: 0.0407em; }

  /* 円の中の文字（黒の70%） */
  .p-proj__circle-text { color: rgb(0 0 0 / 0.7); }

  /* 円・ロゴ・リンク文言をまとめたリンク（円と文言の部分だけが押せる） */
  .p-proj__link,
  .p-proj__visual { justify-self: stretch; pointer-events: none; }
  .p-proj__link { position: relative; z-index: 4; /* 周囲の文字より手前に置き、押せる範囲を確保 */ --frame-x: 0px; margin-left: calc((var(--vw, 100vw) - var(--design-w) * var(--u)) / 2); width: calc(var(--design-w) * var(--u)); }
  .p-proj__visual { --frame-x: 0px; margin-left: calc((var(--vw, 100vw) - var(--design-w) * var(--u)) / 2); width: calc(var(--design-w) * var(--u)); }
  .p-proj__link > *,
  .p-proj__visual > * { pointer-events: auto; }
  .p-proj__link:focus-visible { outline: none; }
  .p-proj__link:focus-visible .c-shape--circle { outline: 3px solid var(--c-ink); outline-offset: 6px; }
  .p-proj__link .c-shape--circle,
  .p-proj__link .c-fig,
  .p-proj__link .p-proj__circle-text { transition: scale 0.7s var(--ease-out); }
  .p-proj__label { transition: translate 0.6s var(--ease-out); }
  @media (hover: hover) {
    .p-proj__link:hover .c-shape--circle { scale: 1.04; }
    .p-proj__link:hover .c-fig,
    .p-proj__link:hover .p-proj__circle-text { scale: 1.06; }
    .p-proj__link:hover .p-proj__label { translate: 0.8em 0; }
  }
  .p-proj__link:focus-visible .p-proj__label { translate: 0.8em 0; }
  @media (hover: none) {
    .p-proj__link:active .c-shape--circle { scale: 0.97; transition-duration: 0.25s; }
  }

  .p-proj-adventure { --scene-y: 1400; --scene-h: 900; }
  .p-proj-adventure__title { --x: -0.3; --y: 1695.9; --fs: 111.075; --lh: 1.2; --ls: 0.0406em; }
  .p-proj-adventure__body { --x: 208.8; --y: 1722.4; --fs: 27.998; --lh: 1.5357; --ls: 0.0408em; }
  .p-proj-adventure__body .l5 { translate: 0 calc(3.5 * var(--u)); }
  .p-proj-adventure__circle { --x: 746.0; --y: 1573.0; --w: 577.0; --h: 577.0; --shape-c: var(--c-white); }
  .p-proj-adventure__circle-text { --x: 832.0; --y: 1880.6; --fs: 120.412; --lh: 1.1691; --ls: 0.0406em; }
  .p-proj-adventure__label { --x: 725.8; --y: 2167.4; --fs: 27.998; --lh: 1.2; --ls: 0.0408em; }

  /* 就活に、個性を。（v1.0.3 追加：円が左／タイトルが右） */
  .p-proj-shukatsu { --scene-y: 2300; --scene-h: 950; }
  .p-proj-shukatsu__title { --x: 339.74; --y: 2575.89; --fs: 111.075; --lh: 1.2; --ls: 0.0407em; }
  .p-proj-shukatsu__body { --x: 663.79; --y: 2598.37; --fs: 27.998; --lh: 1.5362; --ls: 0.0408em; }
  .p-proj-shukatsu__circle { --x: -24.0; --y: 2661.0; --w: 577.0; --h: 577.0; --shape-c: var(--c-white); }
  .p-proj-shukatsu__logo { --x: 83.7; --y: 2777.8; --w: 365.5; }
  .p-proj-shukatsu__label { --x: 348.79; --y: 3172.43; --fs: 27.998; --lh: 1.2; --ls: 0.0408em; }

  /* 三代目PROJECT（v1.0.3：円が右／タイトルが左に入れ替え。位置は支給デザインのとおり） */
  .p-proj-sandaime { --scene-y: 3250; --scene-h: 1000; }
  .p-proj-sandaime__title { --x: -0.26; --y: 3630.89; --fs: 111.075; --lh: 1.2; --ls: 0.0000em; }
  .p-proj-sandaime__title .l0 { letter-spacing: 0.0810em; }
  .p-proj-sandaime__body { --x: 80.79; --y: 3697.4; --fs: 27.998; --lh: 1.5358; --ls: 0.0408em; }
  .p-proj-sandaime__body .l2 { letter-spacing: 0.0655em; }
  .p-proj-sandaime__body .l6 { letter-spacing: 0.0745em; translate: 0 calc(3.4 * var(--u)); }
  .p-proj-sandaime__circle { --x: 734.0; --y: 3561.0; --w: 577.0; --h: 577.0; --shape-c: var(--c-white); }
  .p-proj-sandaime__logo { --x: 872.3; --y: 3669.0; --w: 340.5; }
  .p-proj-sandaime__label { --x: 733.79; --y: 4147.43; --fs: 27.998; --lh: 1.2; --ls: 0.0408em; }

  /* Qeld／UNWORK／Realwork Engine（v1.0.3：左右を入れ替え。横位置は画面中央で反転、縦の関係はそのまま） */
  .p-proj-qeld { --scene-y: 4250; --scene-h: 1130; }
  .p-proj-qeld__title { --x: 430.0; --y: 4519; --fs: 111.075; --lh: 1.2; --ls: 0.0000em; }
  .p-proj-qeld__title .l0 { letter-spacing: 0.0421em; }
  .p-proj-qeld__body { --x: 620.0; --y: 4632.0; --fs: 27.998; --lh: 1.5358; --ls: 0.0408em; }
  .p-proj-qeld__body .l6 { translate: 0 calc(3.4 * var(--u)); }
  .p-proj-qeld__circle { --x: -41.0; --y: 4590; --w: 577.0; --h: 577.0; --shape-c: var(--c-white); }
  .p-proj-qeld__logo { --x: 116.9; --y: 4695.7; --w: 261.2; }

  .p-proj-unwork { --scene-y: 5380; --scene-h: 950; }
  .p-proj-unwork__title { --x: -0.3; --y: 5723; --fs: 111.075; --lh: 1.2; --ls: 0.0000em; }
  .p-proj-unwork__title .l0 { letter-spacing: 0.0276em; }
  .p-proj-unwork__body { --x: 208.8; --y: 5749; --fs: 27.998; --lh: 1.5358; --ls: 0.0408em; }
  .p-proj-unwork__body .l3 { letter-spacing: 0.2429em; }
  .p-proj-unwork__body .l6 { translate: 0 calc(3.4 * var(--u)); }
  .p-proj-unwork__circle { --x: 744.0; --y: 5600; --w: 577.0; --h: 577.0; --shape-c: var(--c-white); }
  .p-proj-unwork__logo { --x: 804.3; --y: 5858.1; --w: 434.9; }

  .p-proj-realwork { --scene-y: 6330; --scene-h: 1183; }
  .p-proj-realwork__title { --x: 33.3; --y: 6790; --fs: 111.075; --lh: 1.2; --ls: 0.0000em; }
  .p-proj-realwork__title .l0 { letter-spacing: 0.0423em; }
  .p-proj-realwork__body { --x: 600.0; --y: 6737; --fs: 27.998; --lh: 1.5358; --ls: 0.0408em; }
  .p-proj-realwork__body .l6 { letter-spacing: 0.0286em; translate: 0 calc(3.4 * var(--u)); }
  .p-proj-realwork__circle { --x: -59.0; --y: 6850; --w: 577.0; --h: 577.0; --shape-c: var(--c-white); }
  .p-proj-realwork__logo { --x: 56.8; --y: 6947.2; --w: 320.0; }

  /* ロゴ（締め） */
  .p-proj-closing { --scene-y: 7513; --scene-h: 662; }
  .p-proj-closing__tagline { --x: 513.0; --y: 7709.1; --fs: 24.303; --lh: 1.7389; --ls: 0.0406em; --k: var(--k-shippori); }
  .p-proj-closing__logo { --x: 763.34; --y: 7727.4; --w: 464.05; }

  /* ページナビ */
  .p-proj-nav { --scene-y: 8175; --scene-h: 2147; }
  .p-proj-nav .c-navlinks { --scene-y: 8175; }
  .p-proj-nav .c-navlink--philosophy { --bx: 54; --by: 0; }
  .p-proj-nav .c-navlink--works { --bx: 54; --by: 470; }
  .p-proj-nav .c-navlink--characters { --bx: 54; --by: 948; }
  .p-proj-nav .c-navlink--contact { --bx: 300; --by: 1683; --bw: 720; --bh: 260; }
}

/* ---------- 動き：円（と中身をまとめた data-reveal="open"）が画面に入ると丸いマスクで開き、タイトルは自分がはみ出している側から入る ---------- */
@layer motion {
  .js-motion .p-proj .c-shape--circle { clip-path: circle(0% at 50% 50%); transition: clip-path 1.3s var(--ease-inout), scale 0.7s var(--ease-out); }
  .js-motion .p-proj .c-fig,
  .js-motion .p-proj .p-proj__circle-text { opacity: 0; transition: opacity 0.8s linear 0.7s, scale 0.7s var(--ease-out); }
  .js-motion .p-proj [data-reveal="open"].is-inview .c-shape--circle { clip-path: circle(50% at 50% 50%); }
  .js-motion .p-proj [data-reveal="open"].is-inview .c-fig,
  .js-motion .p-proj [data-reveal="open"].is-inview .p-proj__circle-text { opacity: 1; }
  .js-motion [data-reveal="from-left"] { opacity: 0; translate: -120px 26px; transition: translate 1.4s var(--ease-out), opacity 0.8s linear; }
  .js-motion [data-reveal="from-right"] { opacity: 0; translate: 120px -26px; transition: translate 1.4s var(--ease-out), opacity 0.8s linear; }
  .js-motion [data-reveal^="from-"].is-inview { opacity: 1; translate: 0 0; }
  @media (max-width: 1023px) {
    .js-motion [data-reveal="from-left"] { translate: -48px 10px; }
    .js-motion [data-reveal="from-right"] { translate: 48px -10px; }
  }
}

/* ==========================================================================
   SMARTPHONE／TABLET（〜1023px）
   タイトル → 白い円（左右交互に画面端で切れる）→ 紹介文 の順に並べ直しています。
   ========================================================================== */
@layer pages {
  @media (max-width: 1023px) {
    .p-proj-intro__text { --sx: 22; --sy: 64; --sfs: 16; --sfs-min: 14.5px; --slh: 1.85; }
    .p-proj { --spb: 30; }
    .p-proj__link,
    .p-proj__visual { margin-left: 0; width: 100%; display: flex; flex-direction: column; align-items: flex-start; order: 1; }
    /* 円の中身（ロゴ／文字）は円の位置に重ねて固定 */
    .p-proj__link .c-fig,
    .p-proj__visual .c-fig,
    .p-proj__circle-text { position: absolute; margin: 0; left: calc(var(--sx) * var(--s)); }
    .p-proj-adventure__title { --o: 0; --sx: -4; --sy: 80; --sfs: 52; --sfs-min: 40px; --slh: 1.1; --sls: 0.02em; }
    .p-proj-adventure__body { --o: 3; --sx: 24; --sy: 14; --sfs: 15.5; --sfs-min: 14.5px; --slh: 1.85; }
    .p-proj-adventure__circle { --o: 1; --sx: 136; --sy: 24; --sw: 284; }
    .p-proj-adventure__circle-text { --sx: 176; top: calc(24 * var(--sv) + 94 * var(--s)); --sfs: 46; --slh: 1.17; }
    .p-proj-adventure__label { --o: 2; --sx: 110; --sy: 14; --sfs: 17; --sfs-min: 15px; --slh: 1.3; }

    .p-proj-shukatsu__title { --o: 0; --sx: 60; --sy: 110; --sfs: 52; --sfs-min: 40px; --slh: 1.1; --sls: 0.02em; }
    .p-proj-shukatsu__body { --o: 3; --sx: 40; --sy: 14; --sfs: 15.5; --sfs-min: 14.5px; --slh: 1.85; }
    .p-proj-shukatsu__circle { --o: 1; --sx: -30; --sy: 24; --sw: 284; }
    .p-proj-shukatsu__logo { --sx: 23; top: calc(24 * var(--sv) + 57 * var(--s)); --sw: 180; }
    .p-proj-shukatsu__label { --o: 2; --sx: 40; --sy: 14; --sfs: 17; --sfs-min: 15px; --slh: 1.3; }

    .p-proj-sandaime__title { --o: 0; --sx: -4; --sy: 110; --sfs: 52; --sfs-min: 40px; --slh: 1.1; --sls: 0.02em; }
    .p-proj-sandaime__body { --o: 3; --sx: 24; --sy: 14; --sfs: 15.5; --sfs-min: 14.5px; --slh: 1.85; }
    .p-proj-sandaime__circle { --o: 1; --sx: 136; --sy: 24; --sw: 284; }
    .p-proj-sandaime__logo { --sx: 188; top: calc(24 * var(--sv) + 43 * var(--s)); --sw: 196; }
    .p-proj-sandaime__label { --o: 2; --sx: 110; --sy: 14; --sfs: 17; --sfs-min: 15px; --slh: 1.3; }

    .p-proj-qeld__title { --o: 0; --sx: 60; --sy: 110; --sfs: 52; --sfs-min: 40px; --slh: 1.1; --sls: 0.02em; }
    .p-proj-qeld__body { --o: 3; --sx: 40; --sy: 14; --sfs: 15.5; --sfs-min: 14.5px; --slh: 1.85; }
    .p-proj-qeld__circle { --o: 1; --sx: -30; --sy: 24; --sw: 284; }
    .p-proj-qeld__logo { --sx: 48; top: calc(24 * var(--sv) + 53 * var(--s)); --sw: 128; }

    .p-proj-unwork__title { --o: 0; --sx: -4; --sy: 110; --sfs: 52; --sfs-min: 40px; --slh: 1.1; --sls: 0.02em; }
    .p-proj-unwork__body { --o: 3; --sx: 24; --sy: 14; --sfs: 15.5; --sfs-min: 14.5px; --slh: 1.85; }
    .p-proj-unwork__circle { --o: 1; --sx: 136; --sy: 24; --sw: 284; }
    .p-proj-unwork__logo { --sx: 172; top: calc(24 * var(--sv) + 124 * var(--s)); --sw: 212; }

    .p-proj-realwork__title { --o: 0; --sx: 60; --sy: 110; --sfs: 50; --sfs-min: 40px; --slh: 1.1; --sls: 0.02em; }
    .p-proj-realwork__body { --o: 3; --sx: 40; --sy: 14; --sfs: 15.5; --sfs-min: 14.5px; --slh: 1.85; }
    .p-proj-realwork__circle { --o: 1; --sx: -30; --sy: 24; --sw: 284; }
    .p-proj-realwork__logo { --sx: 37; top: calc(24 * var(--sv) + 55 * var(--s)); --sw: 150; }
  }
}