/* ==========================================================================
   ステップ15　── 角丸／ボタンを青地に／トップのサービスを青い背景に
   2026-08-06 riho さんの指示

     ① カードや写真に角丸をつける（トビラみたいに）
     ② ボタンは 青地・白文字 にする
     ③ トップの「これまでに扱ってきた業務」は、一旦 背景を青にしてみる

   トビラの角丸（tobila-colors.html の実測）
     カード・グラデの箱   10px
     小さい見本のチップ   6px
     「必須」バッジ       4px
     ENTRY ボタン        20px（＝高さの半分。ピル）

   ★③は「一旦やってみて」とのことなので、外しやすいように
     このファイルの一番下にまとめてあります。要らなければそこだけ消せます。
   ========================================================================== */


/* ==========================================================================
   ① 角丸　── カードと写真に 10px
   ========================================================================== */

/* カード類 */
.mk .mk-feature,
.mk .mk-usecard,
.mk .mk-numcard,
.mk .mk-diagram,
.mk .mk-callout,
.mk .mk-btn-card,
.mk .c-specbox,
.mk .mk-case,
.mk .mk-post--sm{border-radius:10px;}

/* 写真・ダミー画像 */
.mk .mk-case__pic,
.mk .mk-post__pic,
.mk .mk-feature__pic,
.mk .mk-split__pic,
.mk .mk-usecard__pic,
.mk .mk-article figure img,
.mk .mk-post--sm .mk-post__pic{border-radius:10px;overflow:hidden;}

/* カードの端まで写真が来るもの（左に画像・右に本文）は、
   カードごと切り抜いて角を丸める */
.mk .mk-feature{overflow:hidden;}
.mk .mk-feature .mk-feature__pic{border-radius:0;}

/* 図の中の小さい箱（紙・FAX・メール…）は 6px */
.mk .mk-diagram__row span{border-radius:6px;}

/* 「新着」などのタグは 4px（トビラの「必須」バッジと同じ） */
.mk .mk-tag{border-radius:4px;}


/* ==========================================================================
   ② ボタン　── 青地・白文字
   ========================================================================== */

/* ヘッダーの2つ */
.mk-hdr a.mk-hdr__btn--sub,
.mk-hdr a.mk-hdr__btn--main{background:#017cc8;color:#fff;border:1px solid #017cc8;}

/* CTAの丸ボタン（お問い合わせ） */
.mk .mk-btn-round{background:#017cc8;color:#fff;}
.mk .mk-btn-round__ico{background:#fff;}
.mk .mk-btn-round__ico::after{border-color:#017cc8;}

/* 角丸ボタン */
.mk .mk-btn{background:#017cc8;color:#fff;}
.mk .mk-btn__ico{background:#fff;}
.mk .mk-btn__ico::after{border-color:#017cc8;}

/* 送信ボタン（もともと青地・白文字） */
.mk .mk-form__submit button{background:#017cc8;color:#fff;}

/* 業務名・ツール名・扱う範囲のピル
   ★riho さんが「ボタン」と呼ばれているものなので、これも青地・白文字にしています。
     白地に戻したければ、このかたまりだけ消してください。 */
.mk .mk-pill,
.mk .mk-pill--auto,
.mk a.mk-pill,
.mk a.mk-pill--auto,
.mk.p-op .s-tint .mk-pill,
.mk.p-op .s-tint .mk-pill--auto,
.mk.p-tool .s-tint .mk-pill,
.mk.p-tool .s-tint .mk-pill--auto{
  background:#017cc8;border:1px solid #017cc8;color:#fff;
}

/* 一覧の絞り込みタブ：選んでいるものだけ青地・白文字 */
.mk .mk-filter__tab.is-active{background:#017cc8;border-color:#017cc8;color:#fff;}

/* たたんだメニューの中のボタン */
.mk-drawer .mk-drawer__cta a.is-sub,
.mk-drawer .mk-drawer__cta a.is-main{background:#017cc8;color:#fff;border:1px solid #017cc8;}

/* 青い地の上では、地に沈むので 白地・青文字のまま */
.mk .mk-band .mk-btn-round{background:#fff;color:#017cc8;}
.mk .mk-band .mk-btn-round__ico{background:#017cc8;}
.mk .mk-band .mk-btn-round__ico::after{border-color:#fff;}
.mk .mk-band .mk-pill,
.mk .mk-band .mk-pill--auto,
.mk .s-blue .mk-pill,
.mk .s-blue .mk-pill--auto{background:#fff;border-color:#fff;color:#017cc8;}


/* ==========================================================================
   ③ トップの「これまでに扱ってきた業務」を 青い背景に　★お試し
      要らなければ、ここから下だけ消してください。
   ========================================================================== */

.mk .mk-section.s-canary{
  background-image:linear-gradient(180deg,#0047a0 0%,#007cc8 100%);
  color:#fff;
  padding-bottom:180px;
}
/* ラベルと大見出しを白に */
.mk .s-canary .mk-sectitle__en,
.mk .s-canary .mk-sectitle__ja{color:rgba(255,255,255,.85);}
.mk .s-canary .mk-sectitle__ja::before{background:rgba(255,255,255,.6);}
.mk .s-canary .mk-head h2{background-image:none;color:#fff;-webkit-text-fill-color:#fff;}
.mk .s-canary .mk-head .mk-lead{color:#fff;}

/* 中のカードは白のまま。枠線は白にして、青地から浮かせる */
.mk .s-canary .mk-feature{background:#fff;border:1px solid #fff;color:#253a4f;}
.mk .s-canary .mk-theme__title,
.mk .s-canary .mk-theme__text{color:#253a4f;}
/* 青地の上に直接置くピルは 白地・青文字。
   ただし 白いカードの中のピルは、白×白で見えなくなるので 青地・白文字のまま。 */
.mk .s-canary .mk-pill,
.mk .s-canary .mk-pill--auto,
.mk .s-canary a.mk-pill--auto{background:#fff;border-color:#fff;color:#017cc8;}
.mk .s-canary .mk-feature .mk-pill,
.mk .s-canary .mk-feature .mk-pill--auto,
.mk .s-canary .mk-feature a.mk-pill--auto{background:#017cc8;border-color:#017cc8;color:#fff;}

@media (max-width:900px){
  .mk .mk-section.s-canary{padding-bottom:90px;}
}