/* ==========================================================================
   ステップ17　── 業務ページ・ツールページを、トップの青いセクションに揃える
   2026-08-06 riho さんの指示

     ・求人・採用の「よくある状態」は、カードを 青で囲んで 文字も青にする
     ・そのカードの説明文は 要らない
     ・「できること」の背景を 青にする
     ・kintone の「扱うテーマ」も トップと同じ 青にする

   青はトップの「これまでに扱ってきた業務」と同じ
     linear-gradient(180deg,#0047a0 0%,#007cc8 100%)（トビラの ENTRY 帯の実測値）
   ========================================================================== */


/* ==========================================================================
   1. よくある状態（/operation/recruit）── 青で囲んで 文字も青
   ========================================================================== */

.mk.p-op #issue .mk-numcard{
  background:#fff;
  border:1px solid #017cc8;
  border-radius:10px;
  color:#017cc8;
}
.mk.p-op #issue .mk-numcard__no{color:#017cc8;}
.mk.p-op #issue .mk-numcard__title{color:#017cc8;}

/* 説明文は出さない（riho さん指示） */
.mk.p-op #issue .mk-numcard__text{display:none;}


/* ==========================================================================
   2. 青い背景のセクション
      できること（/operation/recruit）と 扱うテーマ（/tool/kintone）
      ★トップの「これまでに扱ってきた業務」と同じ見え方に揃える
   ========================================================================== */

.mk.p-op #feature,
.mk.p-tool #theme{
  background-image:linear-gradient(180deg,#0047a0 0%,#007cc8 100%);
  color:#fff;
  padding-bottom:180px;
}

/* ラベルと大見出しは白 */
.mk.p-op #feature .mk-sectitle__en,
.mk.p-op #feature .mk-sectitle__ja,
.mk.p-tool #theme .mk-sectitle__en,
.mk.p-tool #theme .mk-sectitle__ja{color:rgba(255,255,255,.85);}
.mk.p-op #feature .mk-sectitle__ja::before,
.mk.p-tool #theme .mk-sectitle__ja::before{background:rgba(255,255,255,.6);}
.mk.p-op #feature .mk-head h2,
.mk.p-tool #theme .mk-head h2{
  background-image:none;color:#fff;-webkit-text-fill-color:#fff;}
.mk.p-op #feature .mk-head .mk-lead,
.mk.p-tool #theme .mk-head .mk-lead{color:#fff;}

/* 中見出し（扱う範囲）も白 */
.mk.p-op #feature .mk-h-mid{color:#fff;}
.mk.p-op #feature .mk-h-mid::after{background:rgba(255,255,255,.5);}

/* 中のカードは白のまま・枠線なし（トップと同じ） */
.mk.p-op #feature .mk-usecard,
.mk.p-tool #theme .mk-feature{background:#fff;border:0;color:#253a4f;}
.mk.p-op #feature .mk-usecard__title,
.mk.p-op #feature .mk-usecard__text,
.mk.p-tool #theme .mk-theme__title,
.mk.p-tool #theme .mk-theme__text,
.mk.p-tool #theme .mk-theme__cases p{color:#253a4f;}
.mk.p-op #feature .mk-usecard__no{color:rgba(37,58,79,.2);}
.mk.p-tool #theme .mk-theme__label{color:rgba(37,58,79,.5);}
.mk.p-tool #theme .mk-theme__cases p{border-bottom-color:rgba(37,58,79,.06);}

/* 青地に直接置くピル（扱う範囲）は 白地・青文字 */
.mk.p-op #feature .mk-pill,
.mk.p-op #feature .mk-pill--auto{background:#fff;border-color:#fff;color:#017cc8;}
/* 白いカードの中のピル（期待される効果）は 青地・白文字のまま */
.mk.p-tool #theme .mk-feature .mk-pill,
.mk.p-tool #theme .mk-feature .mk-pill--auto{
  background:#017cc8;border-color:#017cc8;color:#fff;}

/* 青地の上のタグは 白地・青文字 */
.mk.p-op #feature .mk-tag,
.mk.p-tool #theme .mk-tag{background:#fff;border-color:#fff;color:#017cc8;}

@media (max-width:900px){
  .mk.p-op #feature,
  .mk.p-tool #theme{padding-bottom:90px;}
}