@charset "utf-8";
/* ==========================================================================
   Project (home) — トップページ専用。他ページでは読み込まない。
   ========================================================================== */
@layer project {

  /* ---- ヒーロー --------------------------------------------------------
     ⛔ 実測（1156×519）で「デモを見る」が折り返しの外(y=513)にあった。
        FVで最も見せたいのは実物への入口なので、そこまでを1画面に収める。
        直した点: ①上の余白を詰める ②リード文を4行→2行に短くする
        ③空いていた右386pxに実測値を寄せて、縦を使わない */
  .p-home-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--space-6) var(--space-16);
    /* ⛔ start だと左右の下端が85pxずれた（実測）。stretch で両端を揃える。
       右カラムの中身が増えたので、実測値の行だけを伸縮させて調整する */
    align-items: stretch;
  }

  .p-home-hero__kicker {
    display: inline-block;
    margin-bottom: var(--space-4);
    color: var(--color-accent);
    font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em;
  }
  /* 紙面で最も強い一点 */
  .p-home-hero__title {
    /* ⛔ 折り返しに任せず、句ごとに改行して3行に積む。
       50pxは1行が長いと破綻するため、行の長さを自分で決める */
    font-size: var(--fs-hero);
    line-height: 1.28;
    letter-spacing: .01em;
    margin-bottom: var(--space-6);
  }
  /* ⛔ 直下の span だけを行にする。子孫セレクタにすると、
     行の中に入れたアクセント用の span まで改行されて4行になる（実測で発生） */
  .p-home-hero__title > span { display: block; }
  /* 色を当てるのは1語だけ。範囲を狭くするほど強く出る */
  .p-home-hero__accent { display: inline; color: var(--color-accent); }
  .p-home-hero__lead {
    max-width: 34em;
    font-size: var(--fs-lg);
    color: var(--color-text-secondary);
  }
  /* ⛔ <br> で折らない。文ごとに行を分けたいだけなので、直下の span を行にする。
     こうすると、画面が狭くて1文が入りきらない場合は文の中で普通に折り返せる
     （<br> だと折り返しの位置が固定されて、狭い画面で不自然に切れる）。
     ⛔ 直下の span だけを対象にする（見出しで同じ書き方をして踏んだ問題と同じ）。 */
  .p-home-hero__lead > span { display: block; }
  .p-home-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }

  /* 対応できる技術。発注者が募集要項に挙げる語をそのまま並べる。
     ⛔ 書けないものは載せない（§実績数値のSSOTで確認した範囲だけ） */
  .p-home-skills {
    display: flex; flex-wrap: wrap; gap: var(--space-2);
    margin-top: var(--space-4);
    padding: 0; list-style: none;
  }
  .p-home-skills li {
    margin: 0;
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    /* ⛔ 塗りが無いと、背景の写真に文字が埋もれる（実機で発生）。
       ⛔ backdrop-filter は掛けない。7個ぶんの合成層をスマホで作ることになり、
          80%の白で読みやすさは足りているので割に合わない。 */
    background: var(--chip-bg);
    font-size: var(--fs-xs);
    color: var(--color-text-secondary);
    letter-spacing: .02em;
  }

  /* ---- 実測値（右カラム・パネル）----------------------------------------
     このサイトで唯一の「数字による裏づけ」。白い面に載せて independent な
     ブロックとして立たせる。
     ⛔ ラベルと数字の左端は必ずそろえる。ずれると「表」でも「見出し」でもない
        中途半端な見え方になる（実測で40pxずれていたのを是正）。
     ⛔ 棒グラフは入れない。母数のない数値に棒を引くと比較できるかのような
        誤った印象を与える。 */
  .p-home-proof {
    /* ⛔ start だとパネルの下に空白が残る（実測78px＝左の技術タグ1行ぶん）。
       stretch で左カラムの下端まで伸ばし、余った高さは中の項目に配る。
       ⛔ 高さを固定しない。画面幅が狭いほど左が縦に伸びるので、差は一定ではない。 */
    align-self: stretch;
    display: flex;
    flex-direction: column;
    padding: var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    /* ⛔ ここだけ地をわずかに透かす。写真の上に置いた板に見せるため。
       backdrop-filter は対応していないブラウザでは何も起きないだけで、
       94%の白は残るので中の文字は読める（＝壊れない足し方をしている） */
    background: var(--panel-bg);
    backdrop-filter: blur(var(--panel-blur));
    -webkit-backdrop-filter: blur(var(--panel-blur));
    box-shadow: var(--shadow-card);
  }

  .p-home-proof__title {
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: .14em;
    color: var(--color-text-muted);
  }

  .p-home-facts { display: grid; gap: var(--space-4); }

  /* 伸びたぶんを上の3項目で分け合う。⛔ 隙間だけを広げると、項目の上に引いた
     区切り線が下の項目に寄って見える（線の上下が非対称になる）。
     行そのものを等分し、中身を各行の中央に置くことで上下を対称に保つ。 */
  .p-home-proof > .p-home-facts:not(.p-home-facts--sub) { flex: 1; grid-auto-rows: 1fr; }
  .p-home-proof > .p-home-facts:not(.p-home-facts--sub) .p-home-facts__item { align-content: center; }

  .p-home-facts__item {
    display: grid;
    justify-items: start;   /* ⛔ ラベルと数字の左端をそろえる */
    gap: 2px;
  }
  .p-home-facts__item + .p-home-facts__item {
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
  }

  /* ラベルは小さく静かに。数字との差（4倍）が大きいほど数字が強く見える */
  .p-home-facts__label {
    font-size: 12px;
    color: var(--color-text-muted);
    line-height: 1.4;
    letter-spacing: .06em;
  }

  .p-home-facts__value {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-size: var(--fs-figure);
    font-weight: 700;
    line-height: 1;
    /* 大きな数字は字間を締めないと間延びして見える */
    letter-spacing: -.03em;
    white-space: nowrap;
    /* 桁幅をそろえる */
    font-variant-numeric: tabular-nums;
    font-feature-settings: "palt" 0;   /* ⛔ 数字に約物詰めを掛けない */
  }
  .p-home-facts__num { display: block; }

  .p-home-facts__unit {
    font-size: 11px;
    font-weight: 400;
    color: var(--color-text-muted);
    letter-spacing: .04em;
  }

  /* 補助の実測値。⛔ 上の3つと同じ大きさにしない（同じ強さの塊が5つ並ぶと、
     左の大見出しと主従が壊れる）。2列にして高さを抑える。 */
  .p-home-facts--sub {
    grid-template-columns: 1fr 1fr;
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
  }
  /* ⛔ 基本形は縦並び前提で「2つ目以降に上罫線」を引いている。
     2列にすると右側の項目にだけ横罫が出るので、ここで打ち消す。 */
  .p-home-facts--sub .p-home-facts__item + .p-home-facts__item {
    padding-top: 0;
    border-top: 0;
  }
  .p-home-facts--sub .p-home-facts__value { font-size: var(--fs-figure-sub); }
  .p-home-facts--sub .p-home-facts__unit { font-size: var(--fs-xs); }

  /* ⛔ パネルを透かしたぶん、中の小さい文字だけ色を一段濃くする。
     合否は `_check_hero_contrast.py` の実測で決めている（触ったら再実行）。 */
  .p-home-proof__title,
  .p-home-proof .p-home-facts__label,
  .p-home-proof .p-home-facts__unit { color: var(--panel-label); }

  /* ---- デモ一覧 -------------------------------------------------------- */
  .p-home-works__grid {
    display: grid; gap: var(--space-6);
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }

  /* ---- 対応できること -------------------------------------------------- */
  .p-home-service__grid {
    display: grid; gap: var(--space-8);
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
  .p-home-service__title {
    margin-bottom: var(--space-2);
    padding-top: var(--space-4);
    border-top: 2px solid var(--color-accent);
    font-size: var(--fs-lg);
  }
  .p-home-service__desc { font-size: var(--fs-sm); color: var(--color-text-secondary); line-height: var(--lh-compact); }

  /* ---- お約束 ---------------------------------------------------------- */
  .p-home-sla__grid {
    display: grid; gap: var(--space-6);
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }
  .p-home-sla__item {
    padding: var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface);
  }
  .p-home-sla__term { margin-bottom: var(--space-2); font-size: var(--fs-md); font-weight: 700; }
  .p-home-sla__desc { font-size: var(--fs-sm); color: var(--color-text-secondary); line-height: var(--lh-compact); }

  /* ---- 連絡 ------------------------------------------------------------ */
  .p-home-contact {
    padding: var(--space-12);
    border-radius: var(--radius-lg);
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    text-align: center;
  }
  .p-home-contact__title { margin-bottom: var(--space-4); }
  .p-home-contact__desc {
    max-width: var(--width-prose); margin-inline: auto;
    color: var(--color-text-secondary);
  }
  /* ⛔ <br> で折らない。PCでだけ文ごとに行を分けたいので、直下の span を行にする。
     狭い画面では inline に戻して、1つの段落として自然に折り返させる。
     切替は 899px＝ヒーロー・背景と同じ幅（⛔ ここだけ別の値にしない）。 */
  .p-home-contact__desc > span { display: block; }
  @media (max-width: 899px) {
    .p-home-contact__desc > span { display: inline; }
  }


  @media (max-width: 899px) {
    .p-home-hero { grid-template-columns: 1fr; gap: var(--space-8); }
  }
  @media (max-width: 767px) {
    .p-home-hero__title { font-size: var(--fs-3xl); }
    .p-home-contact { padding: var(--space-8) var(--space-6); }
  }
}