/* ==========================================================================
   ステップ13　── 色をぜんぶ トビラ（rct.tobila.com）に置き換える
   2026-08-06 riho さん「扉の色に全部一旦書き換えてください」

   出典  sites/_shared/tobila-colors.css（2026-08-06 実測）

   トビラの考え方
     実質2色（#253a4f と #017cc8）＋ 白 ＋ その黒の不透明度5段階だけ。
     灰色を「別の色」として持っていない。線も注釈も薄い番号も、黒を薄くしたもの。
     影はゼロ。グラデーションは3種類だけ。ページの84%は純白。

   置き換えた対応
     #00BBD5 主色        → #017cc8
     #00E0FF 明るい水色   → #007dc9
     #02D2FB → #0651E8   → #007cc8 → #0047a0（CTAのグラデ）
     #131311 / #242424   → #253a4f（黒に近い紺）
     #E6ECF2 / #DDDBD8   → rgba(37,58,79,.06)   線
     #A2B0C1 / #949391   → rgba(37,58,79,.5)    注釈・補助文字
     #E7F0F5 写真の下地   → rgba(37,58,79,.06)
     #F9FBFC 帯の始まり   → rgba(37,58,79,.02)
     #EFEFEF / #E2E2E2   → #ffffff
     #2DBB77 仮置きの緑   → #017cc8

   ★カナリー配色の一式は sites/_shared-canary-old/ に控えてあります。
     戻すときはそのフォルダの mk-step*.css を上書きコピーするだけです。

   ★赤 #BE0C1A（フォームの「必須」）だけ残しています。
     トビラは「必須」を青のバッジにしていて、色ではなく形で見せているためです。
     揃えるなら別途ご相談ください。
   ========================================================================== */


/* --- 1. 土台の変数（mk-base.css の :root を上書き）--------------------------- */
:root{
  --mk-ink:   #253a4f;              /* 文字の黒 → 黒に近い紺 */
  --mk-dark:  #253a4f;              /* 暗い帯の地 */
  --mk-paper: #ffffff;              /* 明るい地 → 純白 */
  --mk-onDark:#ffffff;              /* 暗い地の上の文字 */
  --mk-sub:   rgba(37,58,79,.5);    /* 注釈・補助文字（黒50%） */
  --mk-line:  rgba(255,255,255,.3); /* 暗い地の上の線 */
  --mk-lineL: rgba(37,58,79,.06);   /* 明るい地の上の線（黒6%） */
  --mk-accent:#017cc8;              /* アクセントの青 */
}


/* --- 2. CTAの帯：トビラの ENTRY 帯と同じ 青のグラデにする ---------------------
   実測 linear-gradient(180deg,#0047a0 0%,#007cc8 100%)（スクロール後の最終状態） */
.mk .mk-band{
  background:none;
  background-image:linear-gradient(180deg,#0047a0 0%,#007cc8 100%);
  color:#fff;
}
.mk .mk-band .mk-more__circ{background:#fff;}
.mk .mk-band .mk-more__circ::after{border-color:#017cc8;}
.mk .mk-band .mk-btn-round{background:#fff;color:#017cc8;}
.mk .mk-band .mk-btn-card{background:#fff;border-color:#fff;}


/* ヘッダーの文字も 黒に近い紺に（ステップ1で #000 にしていた） */
.mk-hdr{color:#253a4f;}
.mk-hdr__item{color:#253a4f;}


/* --- 3. ヘッダーのドロップダウン：黒に近い紺に ------------------------------- */
.mk-pop__inner{background:rgba(37,58,79,.94);}
.mk-pop__pic{background:rgba(255,255,255,.12);}


/* --- 4. 薄い番号（01 02 …）は 黒20%（トビラの連番と同じ扱い）----------------- */
.mk .mk-numcard__no,
.mk .mk-usecard__no{color:rgba(37,58,79,.2);}


/* --- 5. フッター：地は青。中の薄い面と線もトビラの考え方に合わせる ------------ */
.mk-ftr{background:#017cc8;}
.mk-ftr__bnr{background:rgba(255,255,255,.10);}
.mk-ftr__sns span{background:rgba(255,255,255,.2);}


/* --- 6. 影はゼロ（トビラは1か所も使っていない）------------------------------- */
.mk *,.mk-hdr,.mk-hdr *,.mk-ftr,.mk-ftr *{box-shadow:none;}

/* --- 7. 取引先ロゴの箱：地が純白になって見えなくなるので 黒4%（トビラの下地と同じ）--- */
.mk .mk-logos__row span{background:rgba(37,58,79,.04);color:rgba(37,58,79,.5);}
.mk .mk-logos{border-bottom-color:rgba(37,58,79,.06);}