/* ==========================================================================
   ステップ7　── 業務ページ（/operation/recruit）をカナリーに合わせる
   2026-08-06 riho さんの指示

     ・「求人・採用」と書いてある帯の地は 白。その下からグレーにする
     ・「よくある状態」は 黒帯 → カナリーの普段のグレーに。カードの中身だけ白
     ・「01」のような番号は Case study などの英語ラベルと同じグレー
       カードの見出しは 黒。白いカードに枠線をつける
     ・「できること」は カナリーの青いブロックを背景にした形にする
     ・「事例」はトップページと同じ形のまま

   ★このページ（.p-op が付いたページ）だけに効く。他のページは今のまま。
     残り9枚の業務ページも、同じ型なので同じ見た目になる。

   実測の出どころ  https://corp.canary-app.jp/
     淡いグレーの地  linear-gradient(216deg,rgba(37,58,79,.02) -1.54%,rgba(37,58,79,.06) 83.2%)
     青いブロック    linear-gradient(140deg,#007cc8 3.32%,#0047a0 96.51%) 角丸24
     カード          白地・枠1px rgba(37,58,79,.06)・角丸12・影なし
     小ラベル        rgba(37,58,79,.5)        主色 #017cc8
   ========================================================================== */


/* --- 見出しの帯：白にする（その下からグレーになる）--------------------------- */
.mk.p-op .mk-pagehead{background:#fff;}


/* --- 淡いグレーの帯（カナリーの普段の地）------------------------------------
   ★「よくある状態」と「できること」は、この1枚の地の上に一緒に乗せている。
     セクションごとに地を敷くと、グラデがセクション単位で描き直されるので、
     境目で色が切り替わって見えてしまう（実際にそうなっていた）。 */
.mk .s-tint{
  background-image:linear-gradient(216deg,rgba(37,58,79,.02) -1.54%,rgba(37,58,79,.06) 83.2%);
  padding-bottom:180px;
}
/* ★1枚の地でくるんだことで、中の1つ目のセクションが
   mk-base の「:first-child は上の余白ゼロ」に当たってしまい、
   「よくある状態」の上が詰まっていた。セクション間と同じ180pxに戻す。 */
.mk .s-tint > .mk-section:first-child{padding-top:180px;}
@media (max-width:900px){
  .mk .s-tint{padding-bottom:90px;}
  .mk .s-tint > .mk-section:first-child{padding-top:90px;}
}

/* グレーの上の白いカード（よくある状態）
   番号 01 は英語ラベルと同じグレー／見出しは黒／枠線をつける */
.mk .s-tint .mk-numcard{
  background:#fff;border:1px solid rgba(37,58,79,.06);border-radius:12px;padding:32px;
}
.mk .s-tint .mk-numcard__no{color:rgba(37,58,79,.5);font-weight:500;}
.mk .s-tint .mk-numcard__title{color:#253a4f;}
.mk .s-tint .mk-numcard__text{color:#253a4f;}


/* --- 青いブロック（できること）---------------------------------------------
   カナリーと同じく、画面の端まで伸ばさず左右48pxあけて角丸24の箱にする */
.mk .s-blue{
  background-image:linear-gradient(140deg,#007cc8 3.32%,#0047a0 96.51%);
  border-radius:24px;color:#fff;margin:0 48px;padding:110px 0 120px;
}
@media (max-width:900px){
  .mk .s-blue{margin:0 20px;border-radius:16px;padding:56px 0 60px;}
}

/* 青の上の文字：ラベルは白の85%、大見出しはグラデをやめて白 */
.mk .s-blue .mk-sectitle__en,
.mk .s-blue .mk-sectitle__ja{color:rgba(255,255,255,.85);}
.mk .s-blue .mk-sectitle__ja::before{background:rgba(255,255,255,.6);}
.mk .s-blue .mk-head h2{background-image:none;color:#fff;-webkit-text-fill-color:#fff;}
.mk .s-blue .mk-head .mk-lead{color:#fff;}
.mk .s-blue .mk-h-mid{color:#fff;}
.mk .s-blue .mk-h-mid::after{background:rgba(255,255,255,.5);}

/* 青の上のカード（できること）：白いカード・枠は白・番号はグレー・見出しは黒 */
.mk .s-blue .mk-usecard{
  background:#fff;border:1px solid #fff;border-radius:12px;color:#253a4f;
}
.mk .s-blue .mk-usecard__pic{background:rgba(37,58,79,.06);}
.mk .s-blue .mk-usecard__no{color:rgba(37,58,79,.5);font-weight:500;}
.mk .s-blue .mk-usecard__title{color:#253a4f;}
.mk .s-blue .mk-usecard__text{color:#253a4f;}

/* 青の上のピル（扱う範囲）：白地・水色の文字 */
.mk .s-blue .mk-pill,
.mk .s-blue .mk-pill--auto{background:#fff;border-color:#fff;color:#017cc8;}