/* ==========================================================================
   ステップ10　── ツールページ（/tool/kintone）を、求人・採用ページと同じ型にする
   2026-08-06 ／ 同日 riho さんの指摘で 3点を修正

     見出しの帯（白）※タイトルはグラデ
     ┌ 淡いグレーの地 ───────────────┐
     │ いま起きていること                    │
     │ 何をつなぐのか（図）／私たちが扱う範囲    │
     │ 扱うテーマ … トップと同じ 白いカード     │
     └───────────────────────┘
     関連する記事（白）

   ★riho さんの指摘で直したところ
     ・「私たちが扱う範囲」の左の縦線は いらない        → 消した
     ・扱うテーマのボタンの色は ださくなった            → 黒にした
     ・扱うテーマの背景は 青にしなくてよい。トップと同じに → 青い箱をやめた

   ★求人・採用ページの「できること」の青い箱は そのまま残っています。
     （mk-step7.css の .s-blue。こちらのページから使うのをやめただけ）
   ========================================================================== */


/* --- グレーの地の上に出る部品 ------------------------------------------------ */

/* 図（入口 → kintone → 出口）：白いカード・枠なし（よくある状態のカードと同じ） */
.mk .s-tint .mk-diagram{background:#fff;border:0;border-radius:12px;}
.mk .s-tint .mk-diagram__row span{border-color:rgba(37,58,79,.06);}
.mk .s-tint .mk-diagram__core{background:#017cc8;color:#fff;}
.mk .s-tint .mk-diagram__arrow{color:rgba(37,58,79,.5);}
.mk .s-tint .mk-diagram__arrow::before{background:rgba(37,58,79,.5);}
.mk .s-tint .mk-diagram__note{color:rgba(37,58,79,.5);}

/* 重要なセリフ：左の縦線は消す（文字の位置はそのまま左端に寄せる） */
.mk .s-tint .mk-quote{border-left:0;padding-left:0;}

/* 本文と画像の2段組：画像の下地をカナリーの淡い色に */
/* 写真は角を丸めない（riho さん指示）。地の色だけ合わせる */
.mk .s-tint .mk-split__pic{background:rgba(37,58,79,.06);}


/* --- 扱うテーマ：トップの「これまでに扱ってきた業務」と同じ形 ------------------
   白いカード・枠1px rgba(37,58,79,.06)。左に画像・右に本文で、2つ目以降は左右が入れ替わる。 */
/* カードは角丸12。ただし overflow:hidden は付けない（写真の角まで丸くなるため） */
.mk .s-tint .mk-feature{background:#fff;border:1px solid rgba(37,58,79,.06);border-radius:12px;}
.mk .s-tint .mk-feature__pic{background:rgba(37,58,79,.06);}
.mk .s-tint .mk-theme__label{color:rgba(37,58,79,.5);}
.mk .s-tint .mk-theme__cases p{border-bottom-color:rgba(37,58,79,.06);}

/* 期待される効果のピル（ツールページ）：文字は黒 */
.mk.p-tool .s-tint .mk-pill,
.mk.p-tool .s-tint .mk-pill--auto{background:#fff;border:1px solid rgba(37,58,79,.06);color:#253a4f;}

/* --- 図の中の追加の部品（ツールページ4枚で使う）------------------------------ */
/* 中央の箱の下に添える小さい説明（社内AI の「取り込み ／ 整形 ／ 参照範囲」） */
.mk .mk-diagram__coresub{display:block;margin-top:6px;font-size:13px;font-weight:400;opacity:.85;}
/* 双方向の矢印（Zoho）。上下に線を出す */
.mk .mk-diagram__arrow.is-both::before{height:20px;}
.mk .mk-diagram__arrow.is-both::after{content:"";width:1px;height:20px;background:currentColor;}
.mk .mk-diagram__core{height:auto;padding:16px 40px;text-align:center;line-height:1.4;}