@charset "UTF-8";
/* ==========================================================================
   b.s. — works.css（works）
   数値はIllustratorのデザイン座標（幅1280px基準）。考え方は top.css と同じです。
   グレーの平行四辺形（p-works-band）は色面、文字はその上に重ねています。
   ========================================================================== */

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

  /* =========================
     メッセージ
  ========================= */
  .p-works-message { --scene-y: 850; --scene-h: 550; }
  .p-works-message__text { --x: 488.7; --y: 969.0; --fs: 49.111; --lh: 1.205; --ls: 0.0407em; }

  /* =========================
     導入
  ========================= */
  .p-works-intro { --scene-y: 1400; --scene-h: 650; }
  .p-works-intro__text { --x: 52.8; --y: 1510.4; --fs: 31.891; --lh: 1.4719; --ls: 0.0407em; }
  .p-works-intro__text .l1 { translate: 0 calc(4.0 * var(--u)); }

  /* =========================
     戦略系支援／施策系支援（グレーの帯）
     帯の色は common.css の --c-grey-1〜4
  ========================= */
  .p-works-strategy { --scene-y: 2050; --scene-h: 1180; }
  .p-works-strategy__label { --x: 86.8; --y: 2168.3; --fs: 31.891; --lh: 1.2; --ls: 0.0407em; }
  .p-works-strategy__band--1 { --x: 94.0; --y: 1941.2; --w: 1090.9; --h: 496.8; --shape-c: var(--c-grey-1); --shape-clip: polygon(100.00% 48.91%, 0.00% 100.00%, 0.00% 51.09%, 100.00% 0.00%); }
  .p-works-strategy__band--1-title { --x: 151.8; --y: 2263.4; --fs: 45.996; --lh: 1.2; --ls: 0.0407em; }
  .p-works-strategy__band--1-items { --x: 151.8; --y: 2336.4; --fs: 31.997; --lh: 1.4673; --ls: 0.0407em; }
  .p-works-strategy__band--1-items .l0 { letter-spacing: 0.0877em; }
  .p-works-strategy__band--2 { --x: 94.0; --y: 2200.2; --w: 1090.9; --h: 496.8; --shape-c: var(--c-grey-2); --shape-clip: polygon(100.00% 48.91%, 0.00% 100.00%, 0.00% 51.09%, 100.00% 0.00%); }
  .p-works-strategy__band--2-title { --x: 151.8; --y: 2522.4; --fs: 45.996; --lh: 1.2; --ls: 0.0407em; }
  .p-works-strategy__band--2-items { --x: 151.8; --y: 2595.4; --fs: 31.997; --lh: 1.4673; --ls: 0.0407em; }
  .p-works-strategy__band--3 { --x: 94.0; --y: 2459.2; --w: 1090.9; --h: 496.8; --shape-c: var(--c-grey-3); --shape-clip: polygon(100.00% 48.91%, 0.00% 100.00%, 0.00% 51.09%, 100.00% 0.00%); }
  .p-works-strategy__band--3-title { --x: 151.8; --y: 2781.4; --fs: 45.996; --lh: 1.2; --ls: 0.0407em; }
  .p-works-strategy__band--3-items { --x: 151.8; --y: 2854.4; --fs: 31.997; --lh: 1.4673; --ls: 0.0407em; }
  .p-works-strategy__band--4 { --x: 94.0; --y: 2718.2; --w: 1090.9; --h: 496.8; --shape-c: var(--c-grey-4); --shape-clip: polygon(100.00% 48.91%, 0.00% 100.00%, 0.00% 51.09%, 100.00% 0.00%); }
  .p-works-strategy__band--4-title { --x: 151.8; --y: 3040.4; --fs: 45.996; --lh: 1.2; --ls: 0.0407em; }
  .p-works-strategy__band--4-items { --x: 151.8; --y: 3113.4; --fs: 31.997; --lh: 1.4673; --ls: 0.0407em; }

  .p-works-measure { --scene-y: 3230; --scene-h: 1190; }
  .p-works-measure__label { --x: 86.8; --y: 3347.4; --fs: 31.891; --lh: 1.2; --ls: 0.0407em; }
  .p-works-measure__band--1 { --x: 94.0; --y: 3120.2; --w: 1090.9; --h: 496.8; --shape-c: var(--c-grey-1); --shape-clip: polygon(100.00% 48.91%, 0.00% 100.00%, 0.00% 51.09%, 100.00% 0.00%); }
  .p-works-measure__band--1-title { --x: 151.8; --y: 3442.4; --fs: 45.996; --lh: 1.2; --ls: 0.0407em; }
  .p-works-measure__band--1-items { --x: 151.8; --y: 3515.4; --fs: 31.997; --lh: 1.4673; --ls: 0.0407em; }
  .p-works-measure__band--2 { --x: 94.0; --y: 3379.2; --w: 1090.9; --h: 496.8; --shape-c: var(--c-grey-2); --shape-clip: polygon(100.00% 48.91%, 0.00% 100.00%, 0.00% 51.09%, 100.00% 0.00%); }
  .p-works-measure__band--2-title { --x: 151.8; --y: 3701.4; --fs: 45.996; --lh: 1.2; --ls: 0.0407em; }
  .p-works-measure__band--2-items { --x: 151.8; --y: 3774.4; --fs: 31.997; --lh: 1.4673; --ls: 0.0407em; }
  .p-works-measure__band--3 { --x: 94.0; --y: 3638.2; --w: 1090.9; --h: 496.8; --shape-c: var(--c-grey-3); --shape-clip: polygon(100.00% 48.91%, 0.00% 100.00%, 0.00% 51.09%, 100.00% 0.00%); }
  .p-works-measure__band--3-title { --x: 151.8; --y: 3960.4; --fs: 45.996; --lh: 1.2; --ls: 0.0407em; }
  .p-works-measure__band--3-items { --x: 151.8; --y: 4033.4; --fs: 31.997; --lh: 1.4673; --ls: 0.0407em; }
  .p-works-measure__band--4 { --x: 94.0; --y: 3897.2; --w: 1090.9; --h: 496.8; --shape-c: var(--c-grey-4); --shape-clip: polygon(100.00% 48.91%, 0.00% 100.00%, 0.00% 51.09%, 100.00% 0.00%); }
  .p-works-measure__band--4-title { --x: 151.8; --y: 4219.4; --fs: 45.996; --lh: 1.2; --ls: 0.0407em; }
  .p-works-measure__band--4-items { --x: 151.8; --y: 4292.4; --fs: 31.997; --lh: 1.4673; --ls: 0.0407em; }
  .p-works-measure__band--4-items .l0 { letter-spacing: 0.1129em; }

  /* =========================
     クリエイティブ成果
  ========================= */
  .p-works-creative { --scene-y: 4420; --scene-h: 340; }
  .p-works-creative__text { --x: 93.8; --y: 4540.3; --fs: 31.891; --lh: 1.4719; --ls: 0.0407em; }
  .p-works-creative__text .l1 { letter-spacing: 0.0573em; }
  .p-works-creative__text .l2 { letter-spacing: 0.0618em; }

  /* =========================
     ロゴ（締め）
  ========================= */
  .p-works-closing { --scene-y: 4760; --scene-h: 566; }
  .p-works-closing__tagline { --x: 513.0; --y: 4860.1; --fs: 24.303; --lh: 1.7389; --ls: 0.0406em; --k: var(--k-shippori); }
  .p-works-closing__logo { --x: 763.34; --y: 4878.4; --w: 464.05; }

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

/* ---------- 動き：帯が右から順に押し込まれ、文字も一緒に入る ---------- */
@layer motion {
  .js-motion .p-works-group [data-n] {
    opacity: 0;
    translate: 90px -20px;
    transition: translate 1.1s var(--ease-out), opacity 0.6s linear;
  }
  .js-motion .p-works-group [data-n="1"] { transition-delay: 0.12s; }
  .js-motion .p-works-group [data-n="2"] { transition-delay: 0.24s; }
  .js-motion .p-works-group [data-n="3"] { transition-delay: 0.36s; }
  .js-motion .p-works-group.is-inview [data-n] { opacity: 1; translate: 0 0; }
  @media (max-width: 1023px) {
    .js-motion .p-works-group [data-n] { translate: 36px -8px; }
  }
}

/* ==========================================================================
   SMARTPHONE／TABLET（〜1023px）
   帯は画面幅いっぱいの平行四辺形にし、項目は1行に1つずつ並べ直しています。
   ========================================================================== */
@layer pages {
  @media (max-width: 1023px) {
    .p-works-message { --spb: 20; }
    .p-works-message__text { --sx: 30; --sy: 60; --sfs: 25; --sfs-min: 21px; --slh: 1.25; }
    .p-works-intro { --spb: 10; }
    .p-works-intro__text { --sx: 20; --sy: 70; --sfs: 16; --sfs-min: 14.5px; --slh: 1.8; }
    .p-works-group { --spb: 20; }
    .p-works-band { --shape-clip: polygon(0 calc(88 * var(--s)), 100% 0, 100% calc(100% - 88 * var(--s)), 0 100%); }
    .p-works-strategy__label { --sx: 18; --sy: 70; --sfs: 19; --sfs-min: 16px; --slh: 1.3; }
    .p-works-strategy__band--1 { --sx: 6; --sy: -54; --sys: 0; --sw: 370; --sh: 307; }
    .p-works-strategy__band--1-title { --sx: 30; --sy: -307; --sys: 106; --sfs: 24; --slh: 1.3; }
    .p-works-strategy__band--1-items { --sx: 30; --sy: 10; --sfs: 16.5; --slh: 1.62; }
    .p-works-strategy__band--2 { --sx: 14; --sy: 0; --sys: -56; --sw: 370; --sh: 280; }
    .p-works-strategy__band--2-title { --sx: 38; --sy: -280; --sys: 106; --sfs: 24; --slh: 1.3; }
    .p-works-strategy__band--2-items { --sx: 38; --sy: 10; --sfs: 16.5; --slh: 1.62; }
    .p-works-strategy__band--3 { --sx: 6; --sy: 0; --sys: -56; --sw: 370; --sh: 280; }
    .p-works-strategy__band--3-title { --sx: 30; --sy: -280; --sys: 106; --sfs: 24; --slh: 1.3; }
    .p-works-strategy__band--3-items { --sx: 30; --sy: 10; --sfs: 16.5; --slh: 1.62; }
    .p-works-strategy__band--4 { --sx: 14; --sy: 0; --sys: -56; --sw: 370; --sh: 280; }
    .p-works-strategy__band--4-title { --sx: 38; --sy: -280; --sys: 106; --sfs: 24; --slh: 1.3; }
    .p-works-strategy__band--4-items { --sx: 38; --sy: 10; --sfs: 16.5; --slh: 1.62; }

    .p-works-measure__label { --sx: 18; --sy: 70; --sfs: 19; --sfs-min: 16px; --slh: 1.3; }
    .p-works-measure__band--1 { --sx: 6; --sy: -54; --sys: 0; --sw: 370; --sh: 307; }
    .p-works-measure__band--1-title { --sx: 30; --sy: -307; --sys: 106; --sfs: 24; --slh: 1.3; }
    .p-works-measure__band--1-items { --sx: 30; --sy: 10; --sfs: 16.5; --slh: 1.62; }
    .p-works-measure__band--2 { --sx: 14; --sy: 0; --sys: -56; --sw: 370; --sh: 280; }
    .p-works-measure__band--2-title { --sx: 38; --sy: -280; --sys: 106; --sfs: 24; --slh: 1.3; }
    .p-works-measure__band--2-items { --sx: 38; --sy: 10; --sfs: 16.5; --slh: 1.62; }
    .p-works-measure__band--3 { --sx: 6; --sy: 0; --sys: -56; --sw: 370; --sh: 280; }
    .p-works-measure__band--3-title { --sx: 30; --sy: -280; --sys: 106; --sfs: 24; --slh: 1.3; }
    .p-works-measure__band--3-items { --sx: 30; --sy: 10; --sfs: 16.5; --slh: 1.62; }
    .p-works-measure__band--4 { --sx: 14; --sy: 0; --sys: -56; --sw: 370; --sh: 307; }
    .p-works-measure__band--4-title { --sx: 38; --sy: -307; --sys: 106; --sfs: 24; --slh: 1.3; }
    .p-works-measure__band--4-items { --sx: 38; --sy: 10; --sfs: 16.5; --slh: 1.62; }
    .p-works-band__items { --sfs-min: 0px; }
    .p-works-band__title { --sfs-min: 0px; }
    .p-works-creative { --spb: 30; }
    .p-works-creative__text { --sx: 20; --sy: 56; --sfs: 16; --sfs-min: 14.5px; --slh: 1.8; }
  }
}