@charset "UTF-8";
/* ==========================================================================
   b.s. — philosophy.css（our philosophy）
   数値はIllustratorのデザイン座標（幅1280px基準）。考え方は top.css と同じです。
   --x / --y : 1行目の書き出し位置とベースライン  --fs : 文字サイズ
   --lh : 行送り ÷ 文字サイズ  --ls : 字間
   ========================================================================== */

@layer pages {

  .c-pagehero { --scene-h: 850; }

  /* =========================
     ステートメント
  ========================= */
  .p-phil-statement { --scene-y: 850; --scene-h: 530; }
  .p-phil-statement__text { --x: 357.7; --y: 998.5; --fs: 79.402; --lh: 1.205; --ls: 0.0407em; }

  /* =========================
     本文
  ========================= */
  .p-phil-body { --scene-y: 1380; --scene-h: 2800; }
  .p-phil-body__text { --x: 42.0; --y: 1510.9; --fs: 35.997; --lh: 1.4721; --ls: 0.0406em; }
  /* 署名（b.s. / believe. speculate.）は欧文なので字間を個別に */
  .p-phil-body__text p:last-child .line:first-child { letter-spacing: 0.018em; }
  .p-phil-body__text p:last-child .line:last-child { letter-spacing: 0.032em; }

  /* =========================
     すべては、…
  ========================= */
  .p-phil-final { --scene-y: 4180; --scene-h: 1020; }
  .p-phil-final__text { --x: 204.0; --y: 4280.5; --fs: 97.764; --lh: 1.205; --ls: -0.1080em; }

  /* =========================
     ABOUT（会社情報）
     面は水平のまま。「about」の文字が面の左上にかかります。
  ========================= */
  .p-phil-about { --scene-y: 5200; --scene-h: 1440; }
  .p-phil-about__title { --x: 76.2; --y: 5288.7; --fs: 115.065; --lh: 1.2; --ls: 0.0860em; --k: var(--k-corporate); --slant: 0deg; --slant: 0deg; color: var(--c-about-word); }
  .p-phil-about__box { --x: 157.0; --y: 5277.0; --w: 967.0; --h: 1285.0; --shape-c: var(--c-about-box); }
  .p-phil-about__body {
    --x: 306.1; --y: 5341.5; --fs: 32.457;
    position: relative;
    z-index: 2;
    margin-left: calc(var(--frame-x) + var(--x) * var(--u));
    margin-top: calc((var(--y) - var(--scene-y)) * var(--u));
    font-family: var(--ff-shippori);
    font-weight: 500;
    font-size: calc(var(--fs) * var(--u));
    line-height: 1.5097;           /* 行送り 49px */
    letter-spacing: 0.05em;
    color: var(--c-black);
  }
  .p-phil-about__list { margin: 0; }
  .p-phil-about__row { display: grid; grid-template-columns: 7.35em auto; }
  .p-phil-about__row + .p-phil-about__row { margin-top: 1.5097em; }   /* 項目の間は1行分あける */
  .p-phil-about__row--stack { grid-template-columns: auto; }
  .p-phil-about__row dd { margin: 0; }
  .p-phil-about__biz li { text-indent: -0.25em; }
  .p-phil-about__biz li::before { content: "・"; margin-left: -0.25em; }
  .p-phil-about__mail { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
  @media (hover: hover) {
    .p-phil-about__mail:hover { text-decoration-color: transparent; }
  }

  /* =========================
     ロゴ（締め）
  ========================= */
  .p-phil-closing { --scene-y: 6640; --scene-h: 575; }
  .p-phil-closing__tagline { --x: 513.0; --y: 6749.1; --fs: 24.303; --lh: 1.7389; --ls: 0.0406em; --k: var(--k-shippori); }
  .p-phil-closing__logo { --x: 763.34; --y: 6767.4; --w: 464.05; }

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

/* ==========================================================================
   SMARTPHONE／TABLET（〜1023px）
   幅390px基準（--s）。改行は index.html の <br class="u-sp">。
   ========================================================================== */
@layer pages {
  @media (max-width: 1023px) {
    .p-phil-statement { --spb: 20; }
    .p-phil-statement__text { --sx: 16; --sy: 70; --sfs: 30; --sfs-min: 25px; --slh: 1.3; }
    .p-phil-body { --spb: 40; }
    .p-phil-body__text { --sx: 20; --sy: 96; --sfs: 16; --sfs-min: 14.5px; --slh: 1.95; }
    .p-phil-final { --spb: 20; }
    .p-phil-final__text { --sx: 12; --sy: 120; --sfs: 40; --sfs-min: 34px; --slh: 1.22; --sls: -0.04em; }
    .p-phil-about { --spb: 30; }
    .p-phil-about__title { --sx: 8; --sy: 0; --sfs: 56; --sfs-min: 46px; --slh: 1; --o: -1; z-index: 3; }
    .p-phil-about__box { position: absolute; inset: calc(40 * var(--sv)) 16px 0 16px; margin: 0; width: auto; height: auto; justify-self: stretch; align-self: stretch; }
    .p-phil-about__body {
      margin: calc(-8 * var(--s)) 0 0 36px;
      padding: 0 20px 36px 0;
      font-size: 14.5px;
      line-height: 1.75;
      letter-spacing: 0.04em;
    }
    .p-phil-about__row { grid-template-columns: 6.6em auto; }
    .p-phil-about__row--stack { grid-template-columns: 6.6em auto; }
    .p-phil-about__row + .p-phil-about__row { margin-top: 1.1em; }
    .p-phil-about__row dd { white-space: normal; }
    .p-phil-about__mail { display: inline-block; padding-block: 8px; margin-block: -8px; }  /* 押せる範囲を確保 */
  }
  /* タブレット：会社情報は少し大きく、左右に余白を取る */
  @media (min-width: 560px) and (max-width: 1023px) {
    .p-phil-about__body { margin-left: 64px; padding-right: 48px; font-size: 18px; }
    .p-phil-about__box { inset: calc(40 * var(--sv)) 32px 0 32px; }
  }
}