/* ==========================================================================
   余白と角丸　── トビラ（rct.tobila.com）の実測に合わせる
   2026-08-07  出典 sites/_shared/tobila-space.css（全5ページ走査）

   トビラの要点
     ・余白の基本単位は 30px（880か所と圧倒的）。スケールは5の倍数
     ・gap はほぼ使わず margin で組む（gap は全ページで2か所だけ）
     ・角丸は 完全な丸(125) / 12px(52) / 16px(40)。
       ★ボタン・タグ・バッジは例外なく完全な丸（9999px）
     ・カードは 枠線1px ＋ 角丸12 ＋ 内側40px。大きいカードは 角丸16 ＋ 内側60
     ・ボタンは上下の余白を持たず、高さで作る（44 / 32 / 20px）
     ・縦のリズムは「前は詰めて30px、後ろは空けて60px」の2倍ルール

   ★入れたもの
     角丸 ／ カードの内側 ／ ボタンの高さ ／ 見出しまわりの縦のリズム
   ★2026-08-07 riho さん「プライムは無視して、もっと扉に合わせて。全体の余白も」
     → セクションの上下を トビラの実測に差し替えた。
        rct.tobila.com を実際に走査したところ、大きい箱の上下は
          136px / 136px（2か所）／ 135px / 135px（1か所）／ 108px / 138px（1か所）
        だった。標準を 135px にしている（これまでは180px＝プライム実測）。
   ★入れていないもの（別途ご相談）
     非対称グリッド（左389px空けて本文910pxを右寄せ）
   ========================================================================== */

:root{
  --mk-sp-1:  5px;
  --mk-sp-2:  8px;
  --mk-sp-3: 10px;
  --mk-sp-4: 15px;
  --mk-sp-5: 20px;
  --mk-sp-7: 30px;   /* ★基本単位 */
  --mk-sp-11:60px;   /* 見出しブロックの間 */

  --mk-r-full:9999px;
  --mk-r-lg:   16px;
  --mk-r-md:   12px;
  --mk-r-sm:    8px;
}


/* --- 角丸 ------------------------------------------------------------------
   これまで 10px でそろえていたものを、トビラの実測（12 / 16）に分ける。 */
.mk .mk-usecard,
.mk .mk-numcard,
.mk .mk-diagram,
.mk .mk-callout,
.mk .mk-btn-card,
.mk .mk-case,
.mk .mk-post--sm,
.mk .c-card{border-radius:var(--mk-r-md);}

/* 大きいカードは16 */
.mk .mk-feature,
.mk .c-specbox,
.mk .c-card--lg{border-radius:var(--mk-r-lg);}

/* 写真も12（カードと同じ） */
.mk .mk-case__pic,
.mk .mk-post__pic,
.mk .mk-split__pic,
.mk .mk-usecard__pic,
.mk .mk-article figure img{border-radius:var(--mk-r-md);}

/* ★ボタン・タグ・バッジは例外なく完全な丸（トビラ125か所すべて） */
.mk .mk-tag,
.mk .mk-filter__tab,
.mk .mk-pill,
.mk .mk-pill--auto,
.mk .mk-diagram__row span,
.mk-hdr__btn,
.mk-ftr__btn,
.mk .mk-form__submit button{border-radius:var(--mk-r-full);}


/* --- カードの内側 ----------------------------------------------------------
   トビラ：標準40px ／ 大きいカード60px ／ 小さいカード30px */
.mk .mk-numcard,
.mk .mk-usecard,
.mk .mk-callout{padding:var(--mk-sp-7);}          /* 30 */
.mk .mk-feature__body{padding:40px;}
.mk .c-specbox{padding:60px;}
.mk .mk-diagram{padding:40px var(--mk-sp-7);}

@media (max-width:900px){
  .mk .mk-numcard,.mk .mk-usecard,.mk .mk-callout{padding:var(--mk-sp-5);}
  .mk .mk-feature__body{padding:var(--mk-sp-5);}
  .mk .c-specbox{padding:var(--mk-sp-7) var(--mk-sp-5);}
}


/* --- ボタンの高さ（上下の余白を持たず、高さで作る）--------------------------- */
.mk-hdr__btn{height:44px;padding:0 32px;}
.mk .mk-pill,
.mk .mk-pill--auto{height:44px;padding:0 32px;}
.mk .mk-filter__tab{height:32px;padding:0 22px;}
.mk .mk-tag{height:20px;padding:0 12px;}

@media (max-width:900px){
  .mk .mk-pill,.mk .mk-pill--auto{height:38px;padding:0 22px;}
}


/* --- 縦のリズム（前は詰めて30px、後ろは空けて60px の2倍ルール）--------------- */

/* 小ラベル（／ Service）→ 見出し */
.mk .mk-head .mk-sectitle{margin-bottom:var(--mk-sp-2);}   /* 8 */
.mk .mk-head h2{margin-top:0;margin-bottom:var(--mk-sp-7);} /* 30 */
/* 見出し → 本文 */
.mk .mk-head .mk-lead{margin-top:0;margin-bottom:0;}
/* 見出しブロック → 中身 */
.mk .mk-body{margin-top:var(--mk-sp-11);}                   /* 60 */
/* 中身 → ボタン */
.mk .mk-foot{margin-top:46px;}
/* 中見出しどうしの間 */
.mk .mk-submid{margin-top:var(--mk-sp-11);}
.mk .mk-h-mid + *{margin-top:var(--mk-sp-7);}

/* カードの中：見出し → 本文 は 17px、本文 → タグ は 30px */
.mk .mk-numcard__title,
.mk .mk-usecard__title{margin-top:var(--mk-sp-3);}
.mk .mk-numcard__text,
.mk .mk-usecard__text{margin-top:17px;}
.mk .mk-theme__text{margin-top:17px;}
.mk .mk-theme__part{margin-top:var(--mk-sp-7);}
.mk .mk-flow{gap:var(--mk-sp-3);}


/* ==========================================================================
   セクションの上下　── トビラ実測 135px（これまでは 180px）
   ========================================================================== */

.mk .mk-section{padding-top:135px;}
.mk .mk-section:first-child{padding-top:0;}

/* 色が付いた帯は上下とも135px */
.mk .s-tint,
.mk .mk-section.s-canary,
.mk.p-op #feature,
.mk.p-tool #theme{padding-top:135px;padding-bottom:135px;}
.mk .s-tint > .mk-section:first-child{padding-top:0;}
.mk .s-tint > .mk-section + .mk-section{padding-top:135px;}
.mk .s-tint > .mk-section{padding-bottom:0;}

/* 暗い帯（CTA）も同じ */
.mk .mk-band{padding:135px 0;}

/* ページ末尾（トビラは 上70 / 下160） */
.mk main > div[style*="height:180px"]{height:160px !important;}

@media (max-width:900px){
  .mk .mk-section{padding-top:70px;}
  .mk .s-tint,
  .mk .mk-section.s-canary,
  .mk.p-op #feature,
  .mk.p-tool #theme{padding-top:70px;padding-bottom:70px;}
  .mk .s-tint > .mk-section + .mk-section{padding-top:70px;}
  .mk .mk-band{padding:70px 0;}
}


/* ==========================================================================
   カードの中の写真の高さ
   ★2026-08-07 riho さん「2つ目のセクションの画像の縦のサイズが大きすぎる」
     実測：写真の元が 1024×1536（縦長）で、幅392に合わせると 588px になり、
     その高さがそのままカードの高さになっていた（本文は300px弱）。
     → 写真をカードの高さから切り離し、本文の高さに合わせて切り抜く。
   ========================================================================== */
.mk .mk-feature__pic{position:relative;min-height:280px;}
.mk .mk-feature__pic img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;display:block;
}
@media (max-width:900px){
  .mk .mk-feature__pic{min-height:0;aspect-ratio:16/9;}
}


/* ==========================================================================
   ファーストビューの下の余白
   ★2026-08-07 riho さん「ロゴ帯を消したので下に余白がない」
     ロゴを流す帯（上下60px）が下の余白を兼ねていたため、外したら
     ファーストビューの文章と次のセクションがくっついていた。
     セクションの縦のリズム（135px）と同じだけ空ける。
   ========================================================================== */
.s-laboro .topblock{padding-bottom:135px;}
@media (max-width:900px){
  .s-laboro .topblock{padding-bottom:70px;}
}


/* ==========================================================================
   見出しまわりの余白を詰める
   ★2026-08-07 riho さん「記事と、その下の小さい文の余白を狭めて。
     その下のカードとの余白も大きいかも」

   トビラの縦のリズム（tobila-space.css 実測）
     h2(80px) → p        34px
     h3(24px) → p        17px
     ブロック → 次のブロック 60px
   こちらは 見出し36px なので、その中間の 20px にした。
   見出しブロック → 中身 は 60px → 45px。
   ========================================================================== */
.mk .mk-head h2{margin-bottom:20px;}
.mk .mk-body{margin-top:45px;}