/* ==========================================================================
   ステップ18　── セクションの上下の余白を、どのセクションも同じにする
   2026-08-06 riho さんの指示

   ★起きていた問題
     ・「よくある状態」の下に余白がなく、グレーのすぐ下から青が始まっていた
     ・「できること」（青）の下に、グレーの帯が数百px 残っていた

   ★原因
     グレーの地は「よくある状態」と「できること」を1枚でくるむ入れものでした。
     その入れものの下の余白180pxが、青いセクションの さらに下 に出ていました。
     また、中のセクションには下の余白が無く、上の余白しか持っていませんでした。

   ★直しかた
     グレーの入れものは グレーのセクションだけをくるむようにし（組み立て側を変更）、
     色が付いたセクション（グレー・青）は 上下とも 180px を自分で持つようにしました。
     色が付いていない白いセクションは、これまでどおり上の余白 180px だけです
     （下に余白を足すと、白どうしで 360px 空いてしまうため）。

     結果、どのセクションも「見出しの上に180px・中身の下に180px」で揃います。
   ========================================================================== */

:root{ --mk-band-pad: 180px; }

/* --- 色が付いた帯は 上下とも180px ------------------------------------------- */
.mk .s-tint,                       /* 淡いグレーの入れもの */
.mk .mk-section.s-canary,          /* トップの青（これまでに扱ってきた業務） */
.mk.p-op #feature,                 /* 求人・採用の青（できること） */
.mk.p-tool #theme{                 /* kintone の青（扱うテーマ） */
  padding-top:var(--mk-band-pad);
  padding-bottom:var(--mk-band-pad);
}

/* 入れものが上の余白を持つので、その中の1つ目のセクションは上をゼロにする
   （ステップ7で 180px を足していたぶんを取り消す。二重にならないように） */
.mk .s-tint > .mk-section:first-child{padding-top:0;}

/* 入れものの中でセクションが続くときは、間を180pxあける */
.mk .s-tint > .mk-section + .mk-section{padding-top:var(--mk-band-pad);}

/* 帯の中の最後のセクションは、下の余白を入れものに任せる */
.mk .s-tint > .mk-section{padding-bottom:0;}

@media (max-width:900px){
  :root{ --mk-band-pad: 90px; }
}