/* ==========================================================================
   ステップ2　── トップページの「ファーストビュー」と「これまでに扱ってきた業務」だけ
   2026-08-06 riho さんの指示：

   ファーストビュー
     ・こちらのサイトの文字の大きさ・字間は変えない
     ・「人を採る側が、つくる。」は 色だけ カナリーと同じグラデーションにする
     ・「話を聞いて、現場を見て…」は太く大きすぎるので、カナリーを参考に細く小さくする
     ・背景の三角は消す（消したのは build_masterkey_top.py 側）
     ・カナリーの「Our stance」のようなブロックは入れない
     ・その下のロゴを流す帯は今のまま

   これまでに扱ってきた業務（トップの1セクションだけ）
     ・セクションのラベル（Service ｜ …）は カナリーのグレーに
     ・大きい見出しは カナリーのグラデーションに
     ・背景は カナリーの淡いグレーに
     ・カードの地は グレー → 白に
     ・その下のボタン（業務名）は カナリーと同じ色に

   ★このファイルは「トップページの2か所」しか触らない。
     業務ページ・ツールページ・事例・会社・記事のセクションは今のまま。
     mk-base.css も parts.css も書き換えていない。

   実測の出どころ　https://corp.canary-app.jp/  2026-08-06 ライブ計測
     グラデ（見出し）  linear-gradient(90deg,#000,#000,#007dc9 50%,#007dc9 60%,#000)
     グラデ（FV）      #000 0% → #000 50% → #017cc8 75% → 透明 100%
     淡いグレーの地    linear-gradient(216deg,rgba(37,58,79,.02) -1.54%,rgba(37,58,79,.06) 83.2%)
     小ラベルのグレー  rgba(37,58,79,.5)        枠線 rgba(37,58,79,.06)        主色 #017cc8
     説明文            16px / 行間38.4 / w400 / 黒
   ========================================================================== */


/* ==========================================================================
   1. ファーストビュー
   ========================================================================== */

/* 「人を採る側が、つくる。」
   ★大きさ clamp(46px,6.3vw,91px)・行間1.7・w700・字間.2em は そのまま。色だけ変える。

   カナリーの実物（captures/canary/top-desktop-full.png）を見ると
     ・2行まとめて ひとつづきの横グラデ
     ・左が水色 → 右が黒
     ・グラデの幅は「一番長い行の幅」。短い行は左側なので水色のまま
   になっている。同じ見え方にするため width:fit-content で
   箱の幅を一番長い行に合わせている。 */
.s-laboro .hero-h1{
  width:fit-content;
  background-image:linear-gradient(90deg,#017cc8 0%,#017cc8 50%,#000 78%,#000 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}

/* 「話を聞いて、現場を見て、その会社に必要なものを作ります。」
   いま 23px / 行間39.1 / w700 / 字間1.12px → カナリーの説明文に合わせて細く小さく */
.s-laboro .msg-lead{
  margin-top:28px;
  font-size:16px;line-height:38.4px;font-weight:400;letter-spacing:.02em;color:#000;
}
@media (max-width:900px){
  .s-laboro .msg-lead{margin-top:20px;font-size:15px;line-height:32px;letter-spacing:.02em;}
}


/* ==========================================================================
   2. これまでに扱ってきた業務（.s-canary が付いたセクションだけ）
   ========================================================================== */

/* 背景：カナリーの淡いグレー。帯として閉じるように下の余白を足す */
.mk .mk-section.s-canary{
  background-image:linear-gradient(216deg,rgba(37,58,79,.02) -1.54%,rgba(37,58,79,.06) 83.2%);
  padding-bottom:180px;
}
@media (max-width:900px){
  .mk .mk-section.s-canary{padding-bottom:90px;}
}

/* ラベル（／ Service ｜ これまでに扱ってきた業務）：カナリーのグレー */
.mk .s-canary .mk-sectitle__en,
.mk .s-canary .mk-sectitle__ja{color:rgba(37,58,79,.5);}
.mk .s-canary .mk-sectitle__ja::before{background:rgba(37,58,79,.5);}

/* 大きい見出しのグラデーションは mk-step8.css に移した（強すぎたため抑えめに変更）。
   ここに残っていると、指定の強さで こちらが勝ってしまうので消してある。 */

/* カードの地：グレー #ffffff → 白。枠線はカナリーの色で1本入れる */
.mk .s-canary .mk-feature{background:#fff;border:1px solid rgba(37,58,79,.06);}
/* 見出し「求人・応募者・面接の管理」と その下の本文は今のまま（指定しない） */

/* その下のボタン（業務名のピル）：カナリーと同じ 白地・水色の文字・枠1px */
.mk .s-canary a.mk-pill--auto{
  background:#fff;border:1px solid rgba(37,58,79,.06);color:#017cc8;font-weight:700;
}